1.9.4 (#2444)

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

.cursorrules

@@ -15,7 +15,7 @@ const folderStructure = `
 src/
   components/
   constants/
-  hooks/
+  composables/
   views/
   stores/
   services/

.github/workflows/release.yaml

@@ -40,9 +40,10 @@ jobs:
           files: |
             dist.zip
           tag_name: v${{ steps.current_version.outputs.version }}
-          draft: true
+          draft: false
           prerelease: false
           make_latest: "true"
+          generate_release_notes: true
   publish_types:
     runs-on: ubuntu-latest
     if: >

.gitignore

@@ -18,6 +18,7 @@ dist-ssr
 !.vscode/extensions.json
 !.vscode/tailwind.json
 !.vscode/settings.json.default
+!.vscode/launch.json.default
 .idea
 .DS_Store
 *.suo

.vscode/launch.json.default

@@ -0,0 +1,16 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Launch Chrome on frontend dev",
+            "url": "http://localhost:5173",
+            "webRoot": "${workspaceFolder}/src",
+            "sourceMaps": true,
+        }
+    ]
+}

browser_tests/assets/group_node_identical_nodes_hidden_inputs.json

@@ -0,0 +1,163 @@
+{
+  "last_node_id": 19,
+  "last_link_id": 14,
+  "nodes": [
+    {
+      "id": 19,
+      "type": "workflow>two_VAE_decode",
+      "pos": [
+        1368.800048828125,
+        768.7999877929688
+      ],
+      "size": [
+        418.1999816894531,
+        86
+      ],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "samples",
+          "type": "LATENT",
+          "link": null
+        },
+        {
+          "name": "vae",
+          "type": "VAE",
+          "link": null
+        }
+      ],
+      "outputs": [
+        {
+          "name": "IMAGE",
+          "type": "IMAGE",
+          "links": null
+        },
+        {
+          "name": "VAEDecode IMAGE",
+          "type": "IMAGE",
+          "links": null
+        }
+      ],
+      "properties": {}
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 1,
+      "offset": [
+        0,
+        0
+      ]
+    },
+    "node_versions": {},
+    "ue_links": [],
+    "groupNodes": {
+      "two_VAE_decode": {
+        "nodes": [
+          {
+            "id": -1,
+            "type": "VAEDecode",
+            "pos": [
+              1368.800048828125,
+              768.7999877929688
+            ],
+            "size": [
+              210,
+              46
+            ],
+            "flags": {},
+            "order": 0,
+            "mode": 0,
+            "inputs": [
+              {
+                "name": "samples",
+                "type": "LATENT",
+                "link": null,
+                "localized_name": "samples"
+              },
+              {
+                "name": "vae",
+                "type": "VAE",
+                "link": null,
+                "localized_name": "vae"
+              }
+            ],
+            "outputs": [
+              {
+                "name": "IMAGE",
+                "type": "IMAGE",
+                "links": null,
+                "localized_name": "IMAGE"
+              }
+            ],
+            "properties": {
+              "Node name for S&R": "VAEDecode"
+            },
+            "index": 0
+          },
+          {
+            "id": -1,
+            "type": "VAEDecode",
+            "pos": [
+              1368.800048828125,
+              873.7999877929688
+            ],
+            "size": [
+              210,
+              46
+            ],
+            "flags": {},
+            "order": 1,
+            "mode": 0,
+            "inputs": [
+              {
+                "name": "samples",
+                "type": "LATENT",
+                "link": null,
+                "localized_name": "samples"
+              },
+              {
+                "name": "vae",
+                "type": "VAE",
+                "link": null,
+                "localized_name": "vae"
+              }
+            ],
+            "outputs": [
+              {
+                "name": "IMAGE",
+                "type": "IMAGE",
+                "links": null,
+                "localized_name": "IMAGE"
+              }
+            ],
+            "properties": {
+              "Node name for S&R": "VAEDecode"
+            },
+            "index": 1
+          }
+        ],
+        "links": [],
+        "external": [],
+        "config": {
+          "1": {
+            "input": {
+              "samples": {
+                "visible": false
+              },
+              "vae": {
+                "visible": false
+              }
+            }
+          }
+        }
+      }
+    }
+  },
+  "version": 0.4
+}

browser_tests/assets/widgets/boolean_widget.json

@@ -0,0 +1,35 @@
+{
+  "last_node_id": 11,
+  "last_link_id": 9,
+  "nodes": [
+    {
+      "id": 11,
+      "type": "DevToolsNodeWithBooleanInput",
+      "pos": [
+        0,
+        30
+      ],
+      "size": [
+        315,
+        58
+      ],
+      "flags": {
+        "collapsed": false
+      },
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [],
+      "properties": {
+        "Node name for S&R": "DevToolsNodeWithBooleanInput"
+      },
+      "widgets_values": [
+        false
+      ]
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "config": {},
+  "version": 0.4
+}

browser_tests/dialog.spec.ts

@@ -1,4 +1,4 @@
-import { expect } from '@playwright/test'
+import { Locator, expect } from '@playwright/test'
 
 import { Keybinding } from '../src/types/keyBindingTypes'
 import { comfyPageFixture as test } from './fixtures/ComfyPage'
@@ -66,9 +66,71 @@ test.describe('Missing models warning', () => {
     }, comfyPage.url)
   })
 
+  test('Should display a warning when missing models are found', async ({
+    comfyPage
+  }) => {
+    await comfyPage.loadWorkflow('missing_models')
+
+    const missingModelsWarning = comfyPage.page.locator('.comfy-missing-models')
+    await expect(missingModelsWarning).toBeVisible()
+
+    const downloadButton = missingModelsWarning.getByLabel('Download')
+    await expect(downloadButton).toBeVisible()
+  })
+
+  test('Should not display a warning when no missing models are found', async ({
+    comfyPage
+  }) => {
+    const modelFoldersRes = {
+      status: 200,
+      body: JSON.stringify([
+        {
+          name: 'clip',
+          folders: ['ComfyUI/models/clip']
+        }
+      ])
+    }
+    comfyPage.page.route(
+      '**/api/experiment/models',
+      (route) => route.fulfill(modelFoldersRes),
+      { times: 1 }
+    )
+
+    // Reload page to trigger indexing of model folders
+    await comfyPage.setup()
+
+    const clipModelsRes = {
+      status: 200,
+      body: JSON.stringify([
+        {
+          name: 'fake_model.safetensors',
+          pathIndex: 0
+        }
+      ])
+    }
+    comfyPage.page.route(
+      '**/api/experiment/models/clip',
+      (route) => route.fulfill(clipModelsRes),
+      { times: 1 }
+    )
+
+    await comfyPage.loadWorkflow('missing_models')
+
+    const missingModelsWarning = comfyPage.page.locator('.comfy-missing-models')
+    await expect(missingModelsWarning).not.toBeVisible()
+  })
+
+  test('should show on tutorial workflow', async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.TutorialCompleted', false)
+    await comfyPage.setup({ clearStorage: true })
+    const missingModelsWarning = comfyPage.page.locator('.comfy-missing-models')
+    await expect(missingModelsWarning).toBeVisible()
+    expect(await comfyPage.getSetting('Comfy.TutorialCompleted')).toBe(true)
+  })
+
   // Flaky test after parallelization
   // https://github.com/Comfy-Org/ComfyUI_frontend/pull/1400
-  test.skip('Should display a warning when missing models are found', async ({
+  test.skip('Should download missing model when clicking download button', async ({
     comfyPage
   }) => {
     // The fake_model.safetensors is served by
@@ -86,6 +148,49 @@ test.describe('Missing models warning', () => {
     const download = await downloadPromise
     expect(download.suggestedFilename()).toBe('fake_model.safetensors')
   })
+
+  test.describe('Do not show again checkbox', () => {
+    let checkbox: Locator
+    let closeButton: Locator
+
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.setSetting(
+        'Comfy.Workflow.ShowMissingModelsWarning',
+        true
+      )
+      await comfyPage.loadWorkflow('missing_models')
+
+      checkbox = comfyPage.page.getByLabel("Don't show this again")
+      closeButton = comfyPage.page.getByLabel('Close')
+    })
+
+    test('Should disable warning dialog when checkbox is checked', async ({
+      comfyPage
+    }) => {
+      await checkbox.click()
+      const changeSettingPromise = comfyPage.page.waitForRequest(
+        '**/api/settings/Comfy.Workflow.ShowMissingModelsWarning'
+      )
+      await closeButton.click()
+      await changeSettingPromise
+
+      const settingValue = await comfyPage.getSetting(
+        'Comfy.Workflow.ShowMissingModelsWarning'
+      )
+      expect(settingValue).toBe(false)
+    })
+
+    test('Should keep warning dialog enabled when checkbox is unchecked', async ({
+      comfyPage
+    }) => {
+      await closeButton.click()
+
+      const settingValue = await comfyPage.getSetting(
+        'Comfy.Workflow.ShowMissingModelsWarning'
+      )
+      expect(settingValue).toBe(true)
+    })
+  })
 })
 
 test.describe('Settings', () => {
@@ -148,7 +253,7 @@ test.describe('Settings', () => {
 
     // Save keybinding
     const saveButton = comfyPage.page
-      .getByLabel('Comfy.NewBlankWorkflow')
+      .getByLabel('New Blank Workflow')
       .getByLabel('Save')
     await saveButton.click()
 

browser_tests/fixtures/ComfyPage.ts

@@ -904,7 +904,9 @@ export const comfyPageFixture = base.extend<{ comfyPage: ComfyPage }>({
         'Comfy.NodeBadge.NodeSourceBadgeMode': NodeBadgeMode.None,
         // Disable tooltips by default to avoid flakiness.
         'Comfy.EnableTooltips': false,
-        'Comfy.userId': userId
+        'Comfy.userId': userId,
+        // Set tutorial completed to true to avoid loading the tutorial workflow.
+        'Comfy.TutorialCompleted': true
       })
     } catch (e) {
       console.error(e)

browser_tests/fixtures/utils/litegraphUtils.ts

@@ -83,6 +83,12 @@ export class NodeWidgetReference {
       y: pos[1]
     }
   }
+
+  async click() {
+    await this.node.comfyPage.canvas.click({
+      position: await this.getPosition()
+    })
+  }
 }
 
 export class NodeReference {

browser_tests/groupNode.spec.ts

@@ -134,6 +134,37 @@ test.describe('Group Node', () => {
     expect(await manage2.getSelectedNodeType()).toBe('g2')
   })
 
+  test('Preserves hidden input configuration when containing duplicate node types', async ({
+    comfyPage
+  }) => {
+    await comfyPage.loadWorkflow('group_node_identical_nodes_hidden_inputs')
+    await comfyPage.nextFrame()
+
+    const groupNodeId = 19
+    const groupNodeName = 'two_VAE_decode'
+
+    const totalInputCount = await comfyPage.page.evaluate((nodeName) => {
+      const {
+        extra: { groupNodes }
+      } = window['app'].graph
+      const { nodes } = groupNodes[nodeName]
+      return nodes.reduce((acc: number, node) => {
+        return acc + node.inputs.length
+      }, 0)
+    }, groupNodeName)
+
+    const visibleInputCount = await comfyPage.page.evaluate((id) => {
+      const node = window['app'].graph.getNodeById(id)
+      return node.inputs.length
+    }, groupNodeId)
+
+    // Verify there are 4 total inputs (2 VAE decode nodes with 2 inputs each)
+    expect(totalInputCount).toBe(4)
+
+    // Verify there are 2 visible inputs (2 have been hidden in config)
+    expect(visibleInputCount).toBe(2)
+  })
+
   test('Reconnects inputs after configuration changed via manage dialog save', async ({
     comfyPage
   }) => {

browser_tests/menu.spec.ts

@@ -707,6 +707,36 @@ test.describe('Menu', () => {
         '*Unsaved Workflow.json'
       ])
     })
+
+    test('Can drop workflow from workflows sidebar', async ({ comfyPage }) => {
+      await comfyPage.setupWorkflowsDirectory({
+        'workflow1.json': 'default.json'
+      })
+      await comfyPage.setup()
+      await comfyPage.menu.workflowsTab.open()
+
+      const nodeCount = await comfyPage.getGraphNodesCount()
+
+      // Get the bounding box of the canvas element
+      const canvasBoundingBox = (await comfyPage.page
+        .locator('#graph-canvas')
+        .boundingBox())!
+
+      // Calculate the center position of the canvas
+      const targetPosition = {
+        x: canvasBoundingBox.x + canvasBoundingBox.width / 2,
+        y: canvasBoundingBox.y + canvasBoundingBox.height / 2
+      }
+
+      await comfyPage.page.dragAndDrop(
+        '.comfyui-workflows-browse .node-label:has-text("workflow1.json")',
+        '#graph-canvas',
+        { targetPosition }
+      )
+      // Wait for the workflow to be inserted
+      await comfyPage.page.waitForTimeout(200)
+      expect(await comfyPage.getGraphNodesCount()).toBe(nodeCount * 2)
+    })
   })
 
   test.describe('Workflows topbar tabs', () => {

browser_tests/rightClickMenu.spec.ts

@@ -102,6 +102,18 @@ test.describe('Node Right Click Menu', () => {
       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(

browser_tests/widget.spec.ts

@@ -27,3 +27,16 @@ test.describe('Combo text widget', () => {
     await expect(comfyPage.canvas).toHaveScreenshot('resized-to-original.png')
   })
 })
+
+test.describe('Boolean widget', () => {
+  test('Can toggle', async ({ comfyPage }) => {
+    await comfyPage.loadWorkflow('widgets/boolean_widget')
+    await expect(comfyPage.canvas).toHaveScreenshot('boolean_widget.png')
+    const node = (await comfyPage.getFirstNodeRef())!
+    const widget = await node.getWidget(0)
+    await widget.click()
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'boolean_widget_toggled.png'
+    )
+  })
+})

global.d.ts

@@ -1,3 +1,15 @@
 declare const __COMFYUI_FRONTEND_VERSION__: string
 declare const __SENTRY_ENABLED__: boolean
 declare const __SENTRY_DSN__: string
+
+interface Navigator {
+  /**
+   * Used by the electron API.  This is a WICG non-standard API, but is guaranteed to exist in Electron.
+   * It is `undefined` in Firefox and older browsers.
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/Navigator/windowControlsOverlay
+   */
+  windowControlsOverlay?: {
+    /** When `true`, the window is using custom window style. */
+    visible: boolean
+  }
+}

lint-staged.config.js

@@ -11,7 +11,7 @@ export default {
 
 function formatAndEslint(fileNames) {
   return [
-    `prettier --write ${fileNames.join(' ')}`,
-    `eslint --fix ${fileNames.join(' ')}`
+    `eslint --fix ${fileNames.join(' ')}`,
+    `prettier --write ${fileNames.join(' ')}`
   ]
 }

package-lock.json

@@ -1,17 +1,17 @@
 {
   "name": "@comfyorg/comfyui-frontend",
-  "version": "1.8.2",
+  "version": "1.9.4",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@comfyorg/comfyui-frontend",
-      "version": "1.8.2",
+      "version": "1.9.4",
       "license": "GPL-3.0-only",
       "dependencies": {
         "@atlaskit/pragmatic-drag-and-drop": "^1.3.1",
-        "@comfyorg/comfyui-electron-types": "^0.4.11",
-        "@comfyorg/litegraph": "^0.8.61",
+        "@comfyorg/comfyui-electron-types": "^0.4.16",
+        "@comfyorg/litegraph": "^0.8.68",
         "@primevue/forms": "^4.2.5",
         "@primevue/themes": "^4.2.5",
         "@sentry/vue": "^8.48.0",
@@ -24,6 +24,7 @@
         "@tiptap/starter-kit": "^2.10.4",
         "@vueuse/core": "^11.0.0",
         "@xterm/addon-fit": "^0.10.0",
+        "@xterm/addon-serialize": "^0.13.0",
         "@xterm/xterm": "^5.5.0",
         "axios": "^1.7.4",
         "dotenv": "^16.4.5",
@@ -87,7 +88,7 @@
         "vite": "^5.4.6",
         "vite-plugin-dts": "^4.3.0",
         "vite-plugin-static-copy": "^1.0.5",
-        "vitest": "^2.0.5",
+        "vitest": "^2.1.9",
         "vue-tsc": "^2.1.10",
         "zip-dir": "^2.0.0",
         "zod-to-json-schema": "^3.24.1"
@@ -1937,15 +1938,15 @@
       "dev": true
     },
     "node_modules/@comfyorg/comfyui-electron-types": {
-      "version": "0.4.11",
-      "resolved": "https://registry.npmjs.org/@comfyorg/comfyui-electron-types/-/comfyui-electron-types-0.4.11.tgz",
-      "integrity": "sha512-RGJeWwXjyv0Ojj7xkZKgcRxC1nFv1nh7qEWpNBiofxVgFiap9Ei79b/KJYxNE0no4BoYqRMaRg+sFtCE6yEukA==",
+      "version": "0.4.16",
+      "resolved": "https://registry.npmjs.org/@comfyorg/comfyui-electron-types/-/comfyui-electron-types-0.4.16.tgz",
+      "integrity": "sha512-AKy4WLVAuDka/Xjv8zrKwfU/wfRSQpFVE5DgxoLfvroCI0sw+rV1JqdL6xFVrYIoeprzbfKhQiyqlAWU+QgHyg==",
       "license": "GPL-3.0-only"
     },
     "node_modules/@comfyorg/litegraph": {
-      "version": "0.8.61",
-      "resolved": "https://registry.npmjs.org/@comfyorg/litegraph/-/litegraph-0.8.61.tgz",
-      "integrity": "sha512-7DroJ0PLgI9TFvQR//6rf0NRXRvV60hapxVX5lmKzNn4Mn2Ni/JsB2ypNLKeSU5sacNyu8QT3W5Jdpafl7lcnA==",
+      "version": "0.8.68",
+      "resolved": "https://registry.npmjs.org/@comfyorg/litegraph/-/litegraph-0.8.68.tgz",
+      "integrity": "sha512-/c4PH2/vNE2DezdZYdXapCq4jGvSHJqrCT1S9WL3uJ5XYjRcanztLYUGkXgYXNEHfvUV/1oerF3p9o3Kvglwhg==",
       "license": "MIT"
     },
     "node_modules/@cspotcode/source-map-support": {
@@ -5667,25 +5668,62 @@
       }
     },
     "node_modules/@vitest/expect": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-2.0.5.tgz",
-      "integrity": "sha512-yHZtwuP7JZivj65Gxoi8upUN2OzHTi3zVfjwdpu2WrvCZPLwsJ2Ey5ILIPccoW23dd/zQBlJ4/dhi7DWNyXCpA==",
+      "version": "2.1.9",
+      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-2.1.9.tgz",
+      "integrity": "sha512-UJCIkTBenHeKT1TTlKMJWy1laZewsRIzYighyYiJKZreqtdxSos/S1t+ktRMQWu2CKqaarrkeszJx1cgC5tGZw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vitest/spy": "2.0.5",
-        "@vitest/utils": "2.0.5",
-        "chai": "^5.1.1",
+        "@vitest/spy": "2.1.9",
+        "@vitest/utils": "2.1.9",
+        "chai": "^5.1.2",
         "tinyrainbow": "^1.2.0"
       },
       "funding": {
         "url": "https://opencollective.com/vitest"
       }
     },
+    "node_modules/@vitest/mocker": {
+      "version": "2.1.9",
+      "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-2.1.9.tgz",
+      "integrity": "sha512-tVL6uJgoUdi6icpxmdrn5YNo3g3Dxv+IHJBr0GXHaEdTcw3F+cPKnsXFhli6nO+f/6SDKPHEK1UN+k+TQv0Ehg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/spy": "2.1.9",
+        "estree-walker": "^3.0.3",
+        "magic-string": "^0.30.12"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "msw": "^2.4.9",
+        "vite": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "msw": {
+          "optional": true
+        },
+        "vite": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vitest/mocker/node_modules/estree-walker": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
+      "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0"
+      }
+    },
     "node_modules/@vitest/pretty-format": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-2.0.5.tgz",
-      "integrity": "sha512-h8k+1oWHfwTkyTkb9egzwNMfJAEx4veaPSnMeKbVSjp4euqGSbQlm5+6VHwTr7u4FJslVVsUG5nopCaAYdOmSQ==",
+      "version": "2.1.9",
+      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-2.1.9.tgz",
+      "integrity": "sha512-KhRIdGV2U9HOUzxfiHmY8IFHTdqtOhIzCpd8WRdJiE7D/HUcZVD0EgQCVjm+Q9gkUXWgBvMmTtZgIG48wq7sOQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -5696,13 +5734,13 @@
       }
     },
     "node_modules/@vitest/runner": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-2.0.5.tgz",
-      "integrity": "sha512-TfRfZa6Bkk9ky4tW0z20WKXFEwwvWhRY+84CnSEtq4+3ZvDlJyY32oNTJtM7AW9ihW90tX/1Q78cb6FjoAs+ig==",
+      "version": "2.1.9",
+      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-2.1.9.tgz",
+      "integrity": "sha512-ZXSSqTFIrzduD63btIfEyOmNcBmQvgOVsPNPe0jYtESiXkhd8u2erDLnMxmGrDCwHCCHE7hxwRDCT3pt0esT4g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vitest/utils": "2.0.5",
+        "@vitest/utils": "2.1.9",
         "pathe": "^1.1.2"
       },
       "funding": {
@@ -5710,14 +5748,14 @@
       }
     },
     "node_modules/@vitest/snapshot": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-2.0.5.tgz",
-      "integrity": "sha512-SgCPUeDFLaM0mIUHfaArq8fD2WbaXG/zVXjRupthYfYGzc8ztbFbu6dUNOblBG7XLMR1kEhS/DNnfCZ2IhdDew==",
+      "version": "2.1.9",
+      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-2.1.9.tgz",
+      "integrity": "sha512-oBO82rEjsxLNJincVhLhaxxZdEtV0EFHMK5Kmx5sJ6H9L183dHECjiefOAdnqpIgT5eZwT04PoggUnW88vOBNQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vitest/pretty-format": "2.0.5",
-        "magic-string": "^0.30.10",
+        "@vitest/pretty-format": "2.1.9",
+        "magic-string": "^0.30.12",
         "pathe": "^1.1.2"
       },
       "funding": {
@@ -5725,44 +5763,33 @@
       }
     },
     "node_modules/@vitest/spy": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-2.0.5.tgz",
-      "integrity": "sha512-c/jdthAhvJdpfVuaexSrnawxZz6pywlTPe84LUB2m/4t3rl2fTo9NFGBG4oWgaD+FTgDDV8hJ/nibT7IfH3JfA==",
+      "version": "2.1.9",
+      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-2.1.9.tgz",
+      "integrity": "sha512-E1B35FwzXXTs9FHNK6bDszs7mtydNi5MIfUWpceJ8Xbfb1gBMscAnwLbEu+B44ed6W3XjL9/ehLPHR1fkf1KLQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "tinyspy": "^3.0.0"
+        "tinyspy": "^3.0.2"
       },
       "funding": {
         "url": "https://opencollective.com/vitest"
       }
     },
     "node_modules/@vitest/utils": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-2.0.5.tgz",
-      "integrity": "sha512-d8HKbqIcya+GR67mkZbrzhS5kKhtp8dQLcmRZLGTscGVg7yImT82cIrhtn2L8+VujWcy6KZweApgNmPsTAO/UQ==",
+      "version": "2.1.9",
+      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-2.1.9.tgz",
+      "integrity": "sha512-v0psaMSkNJ3A2NMrUEHFRzJtDPFn+/VWZ5WxImB21T9fjucJRmS7xCS3ppEnARb9y11OAzaD+P2Ps+b+BGX5iQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vitest/pretty-format": "2.0.5",
-        "estree-walker": "^3.0.3",
-        "loupe": "^3.1.1",
+        "@vitest/pretty-format": "2.1.9",
+        "loupe": "^3.1.2",
         "tinyrainbow": "^1.2.0"
       },
       "funding": {
         "url": "https://opencollective.com/vitest"
       }
     },
-    "node_modules/@vitest/utils/node_modules/estree-walker": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
-      "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@types/estree": "^1.0.0"
-      }
-    },
     "node_modules/@volar/language-core": {
       "version": "2.4.10",
       "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.4.10.tgz",
@@ -6135,6 +6162,15 @@
         "@xterm/xterm": "^5.0.0"
       }
     },
+    "node_modules/@xterm/addon-serialize": {
+      "version": "0.13.0",
+      "resolved": "https://registry.npmjs.org/@xterm/addon-serialize/-/addon-serialize-0.13.0.tgz",
+      "integrity": "sha512-kGs8o6LWAmN1l2NpMp01/YkpxbmO4UrfWybeGu79Khw5K9+Krp7XhXbBTOTc3GJRRhd6EmILjpR8k5+odY39YQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@xterm/xterm": "^5.0.0"
+      }
+    },
     "node_modules/@xterm/xterm": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/@xterm/xterm/-/xterm-5.5.0.tgz",
@@ -7115,9 +7151,9 @@
       }
     },
     "node_modules/chai": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/chai/-/chai-5.1.1.tgz",
-      "integrity": "sha512-pT1ZgP8rPNqUgieVaEY+ryQr6Q4HXNg8Ei9UnLUrjN4IA7dvQC5JB+/kxVcPNDHyBcc/26CXPkbNzq3qwrOEKA==",
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/chai/-/chai-5.1.2.tgz",
+      "integrity": "sha512-aGtmf24DW6MLHHG5gCx4zaI3uBq3KRtxeVs0DjFH6Z0rDNbsvTxFASFvdj79pxjxZ8/5u3PIiN3IwEIQkiiuPw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -8394,6 +8430,13 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/es-module-lexer": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.6.0.tgz",
+      "integrity": "sha512-qqnD1yMU6tk/jnaMosogGySTZP8YtUgAffA9nMN+E/rjxcfRQ6IEk7IiozUjgxKoFHBGjTLnrHB/YC45r/59EQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/esbuild": {
       "version": "0.21.5",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",
@@ -8958,6 +9001,16 @@
         "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
+    "node_modules/expect-type": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/expect-type/-/expect-type-1.1.0.tgz",
+      "integrity": "sha512-bFi65yM+xZgk+u/KRIpekdSYkTB5W1pEf0Lt8Q8Msh7b+eQ7LXVtIB1Bkm4fvclDEL1b2CZkMhv2mOeF8tMdkA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/extend": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
@@ -9356,16 +9409,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/get-func-name": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/get-func-name/-/get-func-name-2.0.2.tgz",
-      "integrity": "sha512-8vXOvuE167CtIc3OyItco7N/dpRtBbYOsPsXCz7X/PMnlGjYjSGuZJgM1Y7mmew7BKf9BqvLX2tnOVy1BBUsxQ==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": "*"
-      }
-    },
     "node_modules/get-intrinsic": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
@@ -13354,14 +13397,11 @@
       }
     },
     "node_modules/loupe": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/loupe/-/loupe-3.1.1.tgz",
-      "integrity": "sha512-edNu/8D5MKVfGVFRhFf8aAxiTM6Wumfz5XsaatSxlD3w4R1d/WEKUTydCdPGbl9K7QG/Ca3GnDV2sIKIpXRQcw==",
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/loupe/-/loupe-3.1.3.tgz",
+      "integrity": "sha512-kkIp7XSkP78ZxJEsSxW3712C6teJVoeHHwgo9zJ380de7IYyJ2ISlxojcH2pC5OFLewESmnRi/+XCDIEEVyoug==",
       "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "get-func-name": "^2.0.1"
-      }
+      "license": "MIT"
     },
     "node_modules/lru-cache": {
       "version": "5.1.1",
@@ -13373,9 +13413,10 @@
       }
     },
     "node_modules/magic-string": {
-      "version": "0.30.11",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.11.tgz",
-      "integrity": "sha512-+Wri9p0QHMy+545hKww7YAu5NyzF8iomPL/RQazugQ9+Ez4Ic3mERMd8ZTX5rfK944j+560ZJi8iAwgak1Ac7A==",
+      "version": "0.30.17",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz",
+      "integrity": "sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==",
+      "license": "MIT",
       "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.5.0"
       }
@@ -16819,9 +16860,9 @@
       "license": "MIT"
     },
     "node_modules/std-env": {
-      "version": "3.7.0",
-      "resolved": "https://registry.npmjs.org/std-env/-/std-env-3.7.0.tgz",
-      "integrity": "sha512-JPbdCEQLj1w5GilpiHAx3qJvFndqybBysA3qUOnznweH4QbNYUsW/ea8QzSrnh0vNsezMMw5bcVool8lM0gwzg==",
+      "version": "3.8.0",
+      "resolved": "https://registry.npmjs.org/std-env/-/std-env-3.8.0.tgz",
+      "integrity": "sha512-Bc3YwwCB+OzldMxOXJIIvC6cPRWr/LxOp48CdQTOkPyk/t4JWWJbrilwBd7RJzKV8QW7tJkcgAmeuLLJugl5/w==",
       "dev": true,
       "license": "MIT"
     },
@@ -17249,10 +17290,11 @@
       "license": "MIT"
     },
     "node_modules/tinyexec": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-0.3.0.tgz",
-      "integrity": "sha512-tVGE0mVJPGb0chKhqmsoosjsS+qUnJVGJpZgsHYQcGoPlG3B51R3PouqTgEGH2Dc9jjFyOqOpix6ZHNMXp1FZg==",
-      "dev": true
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-0.3.2.tgz",
+      "integrity": "sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==",
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/tinypool": {
       "version": "1.0.1",
@@ -17275,9 +17317,9 @@
       }
     },
     "node_modules/tinyspy": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/tinyspy/-/tinyspy-3.0.0.tgz",
-      "integrity": "sha512-q5nmENpTHgiPVd1cJDDc9cVoYN5x4vCvwT3FMilvKPKneCBZAxn2YWQjDF0UMcE9k0Cay1gBiDfTMU0g+mPMQA==",
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/tinyspy/-/tinyspy-3.0.2.tgz",
+      "integrity": "sha512-n1cw8k1k0x4pgA2+9XrOkFydTerNcJ1zWCO5Nn9scWHTD+5tp8dghT2x1uduQePZTZgd3Tupf+x9BxJjeJi77Q==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -18526,16 +18568,16 @@
       }
     },
     "node_modules/vite-node": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/vite-node/-/vite-node-2.0.5.tgz",
-      "integrity": "sha512-LdsW4pxj0Ot69FAoXZ1yTnA9bjGohr2yNBU7QKRxpz8ITSkhuDl6h3zS/tvgz4qrNjeRnvrWeXQ8ZF7Um4W00Q==",
+      "version": "2.1.9",
+      "resolved": "https://registry.npmjs.org/vite-node/-/vite-node-2.1.9.tgz",
+      "integrity": "sha512-AM9aQ/IPrW/6ENLQg3AGY4K1N2TGZdR5e4gu/MmmR2xR3Ll1+dib+nook92g4TV3PXVyeyxdWwtaCAiUL0hMxA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "cac": "^6.7.14",
-        "debug": "^4.3.5",
+        "debug": "^4.3.7",
+        "es-module-lexer": "^1.5.4",
         "pathe": "^1.1.2",
-        "tinyrainbow": "^1.2.0",
         "vite": "^5.0.0"
       },
       "bin": {
@@ -18648,30 +18690,31 @@
       }
     },
     "node_modules/vitest": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/vitest/-/vitest-2.0.5.tgz",
-      "integrity": "sha512-8GUxONfauuIdeSl5f9GTgVEpg5BTOlplET4WEDaeY2QBiN8wSm68vxN/tb5z405OwppfoCavnwXafiaYBC/xOA==",
+      "version": "2.1.9",
+      "resolved": "https://registry.npmjs.org/vitest/-/vitest-2.1.9.tgz",
+      "integrity": "sha512-MSmPM9REYqDGBI8439mA4mWhV5sKmDlBKWIYbA3lRb2PTHACE0mgKwA8yQ2xq9vxDTuk4iPrECBAEW2aoFXY0Q==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@ampproject/remapping": "^2.3.0",
-        "@vitest/expect": "2.0.5",
-        "@vitest/pretty-format": "^2.0.5",
-        "@vitest/runner": "2.0.5",
-        "@vitest/snapshot": "2.0.5",
-        "@vitest/spy": "2.0.5",
-        "@vitest/utils": "2.0.5",
-        "chai": "^5.1.1",
-        "debug": "^4.3.5",
-        "execa": "^8.0.1",
-        "magic-string": "^0.30.10",
+        "@vitest/expect": "2.1.9",
+        "@vitest/mocker": "2.1.9",
+        "@vitest/pretty-format": "^2.1.9",
+        "@vitest/runner": "2.1.9",
+        "@vitest/snapshot": "2.1.9",
+        "@vitest/spy": "2.1.9",
+        "@vitest/utils": "2.1.9",
+        "chai": "^5.1.2",
+        "debug": "^4.3.7",
+        "expect-type": "^1.1.0",
+        "magic-string": "^0.30.12",
         "pathe": "^1.1.2",
-        "std-env": "^3.7.0",
-        "tinybench": "^2.8.0",
-        "tinypool": "^1.0.0",
+        "std-env": "^3.8.0",
+        "tinybench": "^2.9.0",
+        "tinyexec": "^0.3.1",
+        "tinypool": "^1.0.1",
         "tinyrainbow": "^1.2.0",
         "vite": "^5.0.0",
-        "vite-node": "2.0.5",
+        "vite-node": "2.1.9",
         "why-is-node-running": "^2.3.0"
       },
       "bin": {
@@ -18686,8 +18729,8 @@
       "peerDependencies": {
         "@edge-runtime/vm": "*",
         "@types/node": "^18.0.0 || >=20.0.0",
-        "@vitest/browser": "2.0.5",
-        "@vitest/ui": "2.0.5",
+        "@vitest/browser": "2.1.9",
+        "@vitest/ui": "2.1.9",
         "happy-dom": "*",
         "jsdom": "*"
       },
@@ -18712,150 +18755,6 @@
         }
       }
     },
-    "node_modules/vitest/node_modules/execa": {
-      "version": "8.0.1",
-      "resolved": "https://registry.npmjs.org/execa/-/execa-8.0.1.tgz",
-      "integrity": "sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "cross-spawn": "^7.0.3",
-        "get-stream": "^8.0.1",
-        "human-signals": "^5.0.0",
-        "is-stream": "^3.0.0",
-        "merge-stream": "^2.0.0",
-        "npm-run-path": "^5.1.0",
-        "onetime": "^6.0.0",
-        "signal-exit": "^4.1.0",
-        "strip-final-newline": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=16.17"
-      },
-      "funding": {
-        "url": "https://github.com/sindresorhus/execa?sponsor=1"
-      }
-    },
-    "node_modules/vitest/node_modules/get-stream": {
-      "version": "8.0.1",
-      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-8.0.1.tgz",
-      "integrity": "sha512-VaUJspBffn/LMCJVoMvSAdmscJyS1auj5Zulnn5UoYcY531UWmdwhRWkcGKnGU93m5HSXP9LP2usOryrBtQowA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=16"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/vitest/node_modules/human-signals": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-5.0.0.tgz",
-      "integrity": "sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==",
-      "dev": true,
-      "license": "Apache-2.0",
-      "engines": {
-        "node": ">=16.17.0"
-      }
-    },
-    "node_modules/vitest/node_modules/is-stream": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-3.0.0.tgz",
-      "integrity": "sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/vitest/node_modules/mimic-fn": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-4.0.0.tgz",
-      "integrity": "sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/vitest/node_modules/npm-run-path": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.3.0.tgz",
-      "integrity": "sha512-ppwTtiJZq0O/ai0z7yfudtBpWIoxM8yE6nHi1X47eFR2EWORqfbu6CnPlNsjeN683eT0qG6H/Pyf9fCcvjnnnQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "path-key": "^4.0.0"
-      },
-      "engines": {
-        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/vitest/node_modules/onetime": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/onetime/-/onetime-6.0.0.tgz",
-      "integrity": "sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "mimic-fn": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/vitest/node_modules/path-key": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/path-key/-/path-key-4.0.0.tgz",
-      "integrity": "sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/vitest/node_modules/signal-exit": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
-      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
-      "dev": true,
-      "license": "ISC",
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/vitest/node_modules/strip-final-newline": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-3.0.0.tgz",
-      "integrity": "sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/vscode-uri": {
       "version": "3.0.8",
       "resolved": "https://registry.npmjs.org/vscode-uri/-/vscode-uri-3.0.8.tgz",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comfyorg/comfyui-frontend",
   "private": true,
-  "version": "1.8.2",
+  "version": "1.9.4",
   "type": "module",
   "repository": "https://github.com/Comfy-Org/ComfyUI_frontend",
   "homepage": "https://comfy.org",
@@ -76,15 +76,15 @@
     "vite": "^5.4.6",
     "vite-plugin-dts": "^4.3.0",
     "vite-plugin-static-copy": "^1.0.5",
-    "vitest": "^2.0.5",
+    "vitest": "^2.1.9",
     "vue-tsc": "^2.1.10",
     "zip-dir": "^2.0.0",
     "zod-to-json-schema": "^3.24.1"
   },
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^1.3.1",
-    "@comfyorg/comfyui-electron-types": "^0.4.11",
-    "@comfyorg/litegraph": "^0.8.61",
+    "@comfyorg/comfyui-electron-types": "^0.4.16",
+    "@comfyorg/litegraph": "^0.8.68",
     "@primevue/forms": "^4.2.5",
     "@primevue/themes": "^4.2.5",
     "@sentry/vue": "^8.48.0",
@@ -97,6 +97,7 @@
     "@tiptap/starter-kit": "^2.10.4",
     "@vueuse/core": "^11.0.0",
     "@xterm/addon-fit": "^0.10.0",
+    "@xterm/addon-serialize": "^0.13.0",
     "@xterm/xterm": "^5.5.0",
     "axios": "^1.7.4",
     "dotenv": "^16.4.5",

public/templates/default.json

@@ -266,7 +266,7 @@
       ],
       "properties": {},
       "widgets_values": [
-        "v1-5-pruned-emaonly.safetensors"
+        "v1-5-pruned-emaonly-fp16.safetensors"
       ]
     }
   ],
@@ -349,8 +349,8 @@
   "extra": {},
   "version": 0.4,
   "models": [{
-    "name": "v1-5-pruned-emaonly.safetensors",
-    "url": "https://huggingface.co/Comfy-Org/stable-diffusion-v1-5-archive/resolve/main/v1-5-pruned-emaonly.safetensors?download=true",
+    "name": "v1-5-pruned-emaonly-fp16.safetensors",
+    "url": "https://huggingface.co/Comfy-Org/stable-diffusion-v1-5-archive/resolve/main/v1-5-pruned-emaonly-fp16.safetensors?download=true",
     "directory": "checkpoints"
   }]
 }

public/templates/image2image.json

@@ -330,7 +330,7 @@
         "Node name for S&R": "CheckpointLoaderSimple"
       },
       "widgets_values": [
-        "v1-5-pruned-emaonly.safetensors"
+        "v1-5-pruned-emaonly-fp16.safetensors"
       ]
     }
   ],
@@ -440,8 +440,8 @@
   "extra": {},
   "version": 0.4,
   "models": [{
-    "name": "v1-5-pruned-emaonly.safetensors",
-    "url": "https://huggingface.co/Comfy-Org/stable-diffusion-v1-5-archive/resolve/main/v1-5-pruned-emaonly.safetensors?download=true",
+    "name": "v1-5-pruned-emaonly-fp16.safetensors",
+    "url": "https://huggingface.co/Comfy-Org/stable-diffusion-v1-5-archive/resolve/main/v1-5-pruned-emaonly-fp16.safetensors?download=true",
     "directory": "checkpoints"
   }]
 }

src/assets/css/style.css

@@ -765,6 +765,30 @@ audio.comfy-audio.empty-audio-widget {
   padding: var(--comfy-tree-explorer-item-padding) !important;
 }
 
+/* Load3d styles */
+.comfy-load-3d,
+.comfy-load-3d-animation,
+.comfy-preview-3d,
+.comfy-preview-3d-animation{
+  display: flex;
+  flex-direction: column;
+  background: transparent;
+  flex: 1;
+  position: relative;
+  overflow: hidden;
+}
+
+.comfy-load-3d canvas,
+.comfy-load-3d-animation canvas,
+.comfy-preview-3d canvas,
+.comfy-preview-3d-animation canvas{
+  display: flex;
+  width: 100% !important;
+  height: 100% !important;
+}
+
+/* End of Load3d styles */
+
 /* [Desktop] Electron window specific styles */
 .app-drag {
   app-region: drag;

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

@@ -7,16 +7,19 @@
 </template>
 
 <script setup lang="ts">
-import { Ref, ref } from 'vue'
+import { Ref, onUnmounted, ref } from 'vue'
 
-import { useTerminal } from '@/hooks/bottomPanelTabs/useTerminal'
+import { useTerminal } from '@/composables/bottomPanelTabs/useTerminal'
 
 const emit = defineEmits<{
   created: [ReturnType<typeof useTerminal>, Ref<HTMLElement>]
+  unmounted: []
 }>()
 const terminalEl = ref<HTMLElement>()
 const rootEl = ref<HTMLElement>()
 emit('created', useTerminal(terminalEl), rootEl)
+
+onUnmounted(() => emit('unmounted'))
 </script>
 
 <style scoped>

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

@@ -6,7 +6,7 @@
 import { IDisposable } from '@xterm/xterm'
 import { Ref, onMounted, onUnmounted } from 'vue'
 
-import type { useTerminal } from '@/hooks/bottomPanelTabs/useTerminal'
+import type { useTerminal } from '@/composables/bottomPanelTabs/useTerminal'
 import { electronAPI } from '@/utils/envUtil'
 
 import BaseTerminal from './BaseTerminal.vue'

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

@@ -15,7 +15,7 @@ import { storeToRefs } from 'pinia'
 import ProgressSpinner from 'primevue/progressspinner'
 import { Ref, onMounted, onUnmounted, ref } from 'vue'
 
-import type { useTerminal } from '@/hooks/bottomPanelTabs/useTerminal'
+import type { useTerminal } from '@/composables/bottomPanelTabs/useTerminal'
 import { api } from '@/scripts/api'
 import { useExecutionStore } from '@/stores/executionStore'
 import { LogEntry, LogsWsMessage, TerminalSize } from '@/types/apiTypes'

src/components/common/CustomizationDialog.vue

@@ -42,7 +42,7 @@
                 v-else
                 class="pi pi-palette"
                 :style="{ fontSize: '1.2rem' }"
-                v-tooltip="$t('g.customColor')"
+                v-tooltip="$t('color.custom')"
               ></i>
             </template>
           </SelectButton>

src/components/common/ElectronFileDownload.vue

@@ -80,7 +80,7 @@ import ProgressBar from 'primevue/progressbar'
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import { useDownload } from '@/hooks/downloadHooks'
+import { useDownload } from '@/composables/useDownload'
 import { useElectronDownloadStore } from '@/stores/electronDownloadStore'
 import { formatSize } from '@/utils/formatUtil'
 

src/components/common/FileDownload.vue

@@ -27,7 +27,7 @@
 import Button from 'primevue/button'
 import { computed } from 'vue'
 
-import { useDownload } from '@/hooks/downloadHooks'
+import { useDownload } from '@/composables/useDownload'
 import { formatSize } from '@/utils/formatUtil'
 
 const props = defineProps<{

src/components/common/FormItem.vue

@@ -35,6 +35,7 @@ import CustomFormValue from '@/components/common/CustomFormValue.vue'
 import FormColorPicker from '@/components/common/FormColorPicker.vue'
 import FormImageUpload from '@/components/common/FormImageUpload.vue'
 import InputSlider from '@/components/common/InputSlider.vue'
+import UrlInput from '@/components/common/UrlInput.vue'
 import { FormItem } from '@/types/settingTypes'
 
 const formValue = defineModel<any>('formValue')
@@ -91,6 +92,8 @@ function getFormComponent(item: FormItem): Component {
       return FormImageUpload
     case 'color':
       return FormColorPicker
+    case 'url':
+      return UrlInput
     default:
       return InputText
   }

src/components/common/TreeExplorer.vue

@@ -9,6 +9,7 @@
     :pt="{
       nodeLabel: 'tree-explorer-node-label',
       nodeContent: ({ context }) => ({
+        class: 'group/tree-node',
         onClick: (e: MouseEvent) =>
           onNodeContentClick(e, context.node as RenderedTreeExplorerNode),
         onContextmenu: (e: MouseEvent) =>
@@ -42,7 +43,7 @@ import { computed, provide, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import TreeExplorerTreeNode from '@/components/common/TreeExplorerTreeNode.vue'
-import { useErrorHandling } from '@/hooks/errorHooks'
+import { useErrorHandling } from '@/composables/useErrorHandling'
 import type {
   RenderedTreeExplorerNode,
   TreeExplorerNode
@@ -69,7 +70,7 @@ const renderedRoots = computed<RenderedTreeExplorerNode[]>(() => {
 })
 const getTreeNodeIcon = (node: TreeExplorerNode) => {
   if (node.getIcon) {
-    const icon = node.getIcon(node)
+    const icon = node.getIcon()
     if (icon) {
       return icon
     }
@@ -94,7 +95,7 @@ const fillNodeInfo = (node: TreeExplorerNode): RenderedTreeExplorerNode => {
     children,
     type: node.leaf ? 'node' : 'folder',
     totalLeaves,
-    badgeText: node.getBadgeText ? node.getBadgeText(node) : null
+    badgeText: node.getBadgeText ? node.getBadgeText() : null
   }
 }
 const onNodeContentClick = async (
@@ -105,7 +106,7 @@ const onNodeContentClick = async (
     selectionKeys.value = {}
   }
   if (node.handleClick) {
-    await node.handleClick(node, e)
+    await node.handleClick(e)
   }
   emit('nodeClick', node, e)
 }
@@ -127,7 +128,7 @@ const renameCommand = (node: RenderedTreeExplorerNode) => {
   renameEditingNode.value = node
 }
 const deleteCommand = async (node: RenderedTreeExplorerNode) => {
-  await node.handleDelete?.(node)
+  await node.handleDelete?.()
   emit('nodeDelete', node)
 }
 const menuItems = computed<MenuItem[]>(() =>

src/components/common/TreeExplorerTreeNode.vue

@@ -27,19 +27,25 @@
         class="leaf-count-badge"
       />
     </div>
-    <div class="node-actions">
+    <div
+      class="node-actions motion-safe:opacity-0 motion-safe:group-hover/tree-node:opacity-100"
+    >
       <slot name="actions" :node="props.node"></slot>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview'
 import Badge from 'primevue/badge'
 import { Ref, computed, inject, ref } from 'vue'
 
 import EditableText from '@/components/common/EditableText.vue'
-import { usePragmaticDraggable, usePragmaticDroppable } from '@/hooks/dndHooks'
-import { useErrorHandling } from '@/hooks/errorHooks'
+import { useErrorHandling } from '@/composables/useErrorHandling'
+import {
+  usePragmaticDraggable,
+  usePragmaticDroppable
+} from '@/composables/usePragmaticDragAndDrop'
 import type {
   RenderedTreeExplorerNode,
   TreeExplorerDragAndDropData,
@@ -80,7 +86,7 @@ const isEditing = computed(
 const errorHandling = useErrorHandling()
 const handleRename = errorHandling.wrapWithErrorHandlingAsync(
   async (newName: string) => {
-    await props.node.handleRename(props.node, newName)
+    await props.node.handleRename(newName)
   },
   props.node.handleError,
   () => {
@@ -102,7 +108,17 @@ if (props.node.draggable) {
       }
     },
     onDragStart: () => emit('dragStart', props.node),
-    onDrop: () => emit('dragEnd', props.node)
+    onDrop: () => emit('dragEnd', props.node),
+    onGenerateDragPreview: props.node.renderDragPreview
+      ? ({ nativeSetDragImage }) => {
+          setCustomNativeDragPreview({
+            render: ({ container }) => {
+              return props.node.renderDragPreview(container)
+            },
+            nativeSetDragImage
+          })
+        }
+      : undefined
   })
 }
 
@@ -111,7 +127,7 @@ if (props.node.droppable) {
     onDrop: async (event) => {
       const dndData = event.source.data as TreeExplorerDragAndDropData
       if (dndData.type === 'tree-explorer-node') {
-        await props.node.handleDrop?.(props.node, dndData)
+        await props.node.handleDrop?.(dndData)
         canDrop.value = false
         emit('itemDropped', props.node, dndData.data)
       }

src/components/common/UrlInput.vue

@@ -0,0 +1,116 @@
+<template>
+  <IconField class="w-full">
+    <InputText
+      v-bind="$attrs"
+      :model-value="internalValue"
+      class="w-full"
+      :invalid="validationState === ValidationState.INVALID"
+      @update:model-value="handleInput"
+      @blur="handleBlur"
+    />
+    <InputIcon
+      :class="{
+        'pi pi-spin pi-spinner text-neutral-400':
+          validationState === ValidationState.LOADING,
+        'pi pi-check text-green-500 cursor-pointer':
+          validationState === ValidationState.VALID,
+        'pi pi-times text-red-500 cursor-pointer':
+          validationState === ValidationState.INVALID
+      }"
+      @click="validateUrl(props.modelValue)"
+    />
+  </IconField>
+</template>
+
+<script setup lang="ts">
+import IconField from 'primevue/iconfield'
+import InputIcon from 'primevue/inputicon'
+import InputText from 'primevue/inputtext'
+import { onMounted, ref, watch } from 'vue'
+
+import { isValidUrl } from '@/utils/formatUtil'
+import { checkUrlReachable } from '@/utils/networkUtil'
+import { ValidationState } from '@/utils/validationUtil'
+
+const props = defineProps<{
+  modelValue: string
+  validateUrlFn?: (url: string) => Promise<boolean>
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+  'state-change': [state: ValidationState]
+}>()
+
+const validationState = ref<ValidationState>(ValidationState.IDLE)
+
+// Add internal value state
+const internalValue = ref(props.modelValue)
+
+// Watch for external modelValue changes
+watch(
+  () => props.modelValue,
+  async (newValue: string) => {
+    internalValue.value = newValue
+    await validateUrl(newValue)
+  }
+)
+
+watch(validationState, (newState) => {
+  emit('state-change', newState)
+})
+
+// Validate on mount
+onMounted(async () => {
+  await validateUrl(props.modelValue)
+})
+
+const handleInput = (value: string) => {
+  // Update internal value without emitting
+  internalValue.value = value
+  // Reset validation state when user types
+  validationState.value = ValidationState.IDLE
+}
+
+const handleBlur = async () => {
+  // Emit the update only on blur
+  emit('update:modelValue', internalValue.value)
+}
+
+// Default validation implementation
+const defaultValidateUrl = async (url: string): Promise<boolean> => {
+  if (!isValidUrl(url)) return false
+  try {
+    return await checkUrlReachable(url)
+  } catch {
+    return false
+  }
+}
+
+const validateUrl = async (value: string) => {
+  if (validationState.value === ValidationState.LOADING) return
+
+  const url = value.trim()
+
+  // Reset state
+  validationState.value = ValidationState.IDLE
+
+  // Skip validation if empty
+  if (!url) return
+
+  validationState.value = ValidationState.LOADING
+  try {
+    const isValid = await (props.validateUrlFn ?? defaultValidateUrl)(url)
+    validationState.value = isValid
+      ? ValidationState.VALID
+      : ValidationState.INVALID
+  } catch {
+    validationState.value = ValidationState.INVALID
+  }
+}
+
+// Add inheritAttrs option to prevent attrs from being applied to root element
+defineOptions({
+  inheritAttrs: false
+})
+</script>

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

@@ -0,0 +1,158 @@
+import { mount } from '@vue/test-utils'
+import PrimeVue from 'primevue/config'
+import IconField from 'primevue/iconfield'
+import InputIcon from 'primevue/inputicon'
+import InputText from 'primevue/inputtext'
+import { beforeEach, describe, expect, it } from 'vitest'
+import { createApp, nextTick } from 'vue'
+
+import UrlInput from '../UrlInput.vue'
+
+describe('UrlInput', () => {
+  beforeEach(() => {
+    const app = createApp({})
+    app.use(PrimeVue)
+  })
+
+  const mountComponent = (props: any, options = {}) => {
+    return mount(UrlInput, {
+      global: {
+        plugins: [PrimeVue],
+        components: { IconField, InputIcon, InputText }
+      },
+      props,
+      ...options
+    })
+  }
+
+  it('passes through additional attributes to input element', () => {
+    const wrapper = mountComponent({
+      modelValue: '',
+      placeholder: 'Enter URL',
+      disabled: true
+    })
+
+    expect(wrapper.find('input').attributes('disabled')).toBe('')
+  })
+
+  it('emits update:modelValue on blur', async () => {
+    const wrapper = mountComponent({
+      modelValue: '',
+      placeholder: 'Enter URL'
+    })
+
+    const input = wrapper.find('input')
+    await input.setValue('https://test.com')
+    await input.trigger('blur')
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([
+      'https://test.com'
+    ])
+  })
+
+  it('renders spinner when validation is loading', async () => {
+    const wrapper = mountComponent({
+      modelValue: '',
+      placeholder: 'Enter URL',
+      validateUrlFn: () =>
+        new Promise(() => {
+          // Never resolves, simulating perpetual loading state
+        })
+    })
+
+    wrapper.setProps({ modelValue: 'https://test.com' })
+    await nextTick()
+    await nextTick()
+
+    expect(wrapper.find('.pi-spinner').exists()).toBe(true)
+  })
+
+  it('renders check icon when validation is valid', async () => {
+    const wrapper = mountComponent({
+      modelValue: '',
+      placeholder: 'Enter URL',
+      validateUrlFn: () => Promise.resolve(true)
+    })
+
+    wrapper.setProps({ modelValue: 'https://test.com' })
+    await nextTick()
+    await nextTick()
+
+    expect(wrapper.find('.pi-check').exists()).toBe(true)
+  })
+
+  it('renders cross icon when validation is invalid', async () => {
+    const wrapper = mountComponent({
+      modelValue: '',
+      placeholder: 'Enter URL',
+      validateUrlFn: () => Promise.resolve(false)
+    })
+
+    wrapper.setProps({ modelValue: 'https://test.com' })
+    await nextTick()
+    await nextTick()
+
+    expect(wrapper.find('.pi-times').exists()).toBe(true)
+  })
+
+  it('validates on mount', async () => {
+    const wrapper = mountComponent({
+      modelValue: 'https://test.com',
+      validateUrlFn: () => Promise.resolve(true)
+    })
+
+    await nextTick()
+    await nextTick()
+
+    expect(wrapper.find('.pi-check').exists()).toBe(true)
+  })
+
+  it('triggers validation when clicking the validation icon', async () => {
+    let validationCount = 0
+    const wrapper = mountComponent({
+      modelValue: 'https://test.com',
+      validateUrlFn: () => {
+        validationCount++
+        return Promise.resolve(true)
+      }
+    })
+
+    // Wait for initial validation
+    await nextTick()
+    await nextTick()
+
+    // Click the validation icon
+    await wrapper.find('.pi-check').trigger('click')
+    await nextTick()
+    await nextTick()
+
+    expect(validationCount).toBe(2) // Once on mount, once on click
+  })
+
+  it('prevents multiple simultaneous validations', async () => {
+    let validationCount = 0
+    const wrapper = mountComponent({
+      modelValue: '',
+      validateUrlFn: () => {
+        validationCount++
+        return new Promise(() => {
+          // Never resolves, simulating perpetual loading state
+        })
+      }
+    })
+
+    wrapper.setProps({ modelValue: 'https://test.com' })
+    await nextTick()
+    await nextTick()
+
+    // Trigger multiple validations in quick succession
+    wrapper.find('.pi-spinner').trigger('click')
+    wrapper.find('.pi-spinner').trigger('click')
+    wrapper.find('.pi-spinner').trigger('click')
+
+    await nextTick()
+    await nextTick()
+
+    expect(validationCount).toBe(1) // Only the initial validation should occur
+  })
+})

src/components/dialog/content/ExecutionErrorDialogContent.vue

@@ -59,7 +59,7 @@ import { useI18n } from 'vue-i18n'
 
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
 import FindIssueButton from '@/components/dialog/content/error/FindIssueButton.vue'
-import { useCopyToClipboard } from '@/hooks/clipboardHooks'
+import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
 import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
 import type { ExecutionErrorWsMessage, SystemStats } from '@/types/apiTypes'

src/components/dialog/content/MissingModelsWarning.vue

@@ -2,9 +2,15 @@
   <NoResultsPlaceholder
     class="pb-0"
     icon="pi pi-exclamation-circle"
-    title="Missing Models"
-    message="When loading the graph, the following models were not found"
+    :title="t('missingModelsDialog.missingModels')"
+    :message="t('missingModelsDialog.missingModelsMessage')"
   />
+  <div class="flex gap-1 mb-4">
+    <Checkbox v-model="doNotAskAgain" binary input-id="doNotAskAgain" />
+    <label for="doNotAskAgain">{{
+      t('missingModelsDialog.doNotAskAgain')
+    }}</label>
+  </div>
   <ListBox :options="missingModels" class="comfy-missing-models">
     <template #option="{ option }">
       <Suspense v-if="isElectron()">
@@ -25,11 +31,14 @@
 </template>
 
 <script setup lang="ts">
+import Checkbox from 'primevue/checkbox'
 import ListBox from 'primevue/listbox'
-import { computed, ref } from 'vue'
+import { computed, onBeforeUnmount, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import FileDownload from '@/components/common/FileDownload.vue'
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
+import { useSettingStore } from '@/stores/settingStore'
 import { isElectron } from '@/utils/envUtil'
 
 // TODO: Read this from server internal API rather than hardcoding here
@@ -58,6 +67,10 @@ const props = defineProps<{
   paths: Record<string, string[]>
 }>()
 
+const { t } = useI18n()
+
+const doNotAskAgain = ref(false)
+
 const modelDownloads = ref<Record<string, ModelInfo>>({})
 const missingModels = computed(() => {
   return props.missingModels.map((model) => {
@@ -107,6 +120,12 @@ const missingModels = computed(() => {
     }
   })
 })
+
+onBeforeUnmount(() => {
+  if (doNotAskAgain.value) {
+    useSettingStore().set('Comfy.Workflow.ShowMissingModelsWarning', false)
+  }
+})
 </script>
 
 <style scoped>

src/components/dialog/content/error/ReportIssuePanel.vue

@@ -50,7 +50,7 @@
             :aria-label="$t('issueReport.provideAdditionalDetails')"
           />
           <Message
-            v-if="$field?.error && $field.touched"
+            v-if="$field?.error && $field.touched && $field.value"
             severity="error"
             size="small"
             variant="simple"
@@ -105,6 +105,7 @@ import { Form, FormField, type FormSubmitEvent } from '@primevue/forms'
 import { zodResolver } from '@primevue/forms/resolvers/zod'
 import type { CaptureContext, User } from '@sentry/core'
 import { captureMessage } from '@sentry/core'
+import _ from 'lodash'
 import cloneDeep from 'lodash/cloneDeep'
 import Button from 'primevue/button'
 import Checkbox from 'primevue/checkbox'
@@ -218,7 +219,7 @@ const createCaptureContext = async (
         ? formData.notifyOnResolution
         : false,
       isElectron: isElectron(),
-      ...props.tags
+      ..._.mapValues(props.tags, (tag) => _.trim(tag).replace(/[\n\r\t]/g, ' '))
     },
     extra: {
       details: formData.details,

src/components/dialog/content/setting/KeybindingPanel.vue

@@ -68,7 +68,7 @@
       class="min-w-96"
       v-model:visible="editDialogVisible"
       modal
-      :header="currentEditingCommand?.id"
+      :header="currentEditingCommand?.label"
       @hide="cancelEdit"
     >
       <div>
@@ -151,6 +151,7 @@ const { t } = useI18n()
 interface ICommandData {
   id: string
   keybinding: KeybindingImpl | null
+  label: string
 }
 
 const commandsData = computed<ICommandData[]>(() => {
@@ -213,6 +214,17 @@ function removeKeybinding(commandData: ICommandData) {
 }
 
 function captureKeybinding(event: KeyboardEvent) {
+  // Allow the use of keyboard shortcuts when adding keyboard shortcuts
+  if (!event.shiftKey && !event.altKey && !event.ctrlKey && !event.metaKey) {
+    switch (event.key) {
+      case 'Escape':
+        cancelEdit()
+        return
+      case 'Enter':
+        saveKeybinding()
+        return
+    }
+  }
   const keyCombo = KeyComboImpl.fromEvent(event)
   newBindingKeyCombo.value = keyCombo
 }

src/components/dialog/content/setting/ServerConfigPanel.vue

@@ -74,8 +74,8 @@ import { watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import FormItem from '@/components/common/FormItem.vue'
+import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
 import type { ServerConfig } from '@/constants/serverConfig'
-import { useCopyToClipboard } from '@/hooks/clipboardHooks'
 import { useServerConfigStore } from '@/stores/serverConfigStore'
 import { useSettingStore } from '@/stores/settingStore'
 import type { FormItem as FormItemType } from '@/types/settingTypes'

src/components/graph/GraphCanvas.vue

@@ -29,18 +29,7 @@
 </template>
 
 <script setup lang="ts">
-import {
-  CanvasPointer,
-  ContextMenu,
-  DragAndScale,
-  LGraph,
-  LGraphBadge,
-  LGraphCanvas,
-  LGraphGroup,
-  LGraphNode,
-  LLink,
-  LiteGraph
-} from '@comfyorg/litegraph'
+import { CanvasPointer, LGraphNode, LiteGraph } from '@comfyorg/litegraph'
 import { computed, onMounted, ref, watch, watchEffect } from 'vue'
 
 import LiteGraphCanvasSplitterOverlay from '@/components/LiteGraphCanvasSplitterOverlay.vue'
@@ -52,38 +41,31 @@ import TitleEditor from '@/components/graph/TitleEditor.vue'
 import NodeSearchboxPopover from '@/components/searchbox/NodeSearchBoxPopover.vue'
 import SideToolbar from '@/components/sidebar/SideToolbar.vue'
 import SecondRowWorkflowTabs from '@/components/topbar/SecondRowWorkflowTabs.vue'
+import { useCanvasDrop } from '@/composables/useCanvasDrop'
+import { useContextMenuTranslation } from '@/composables/useContextMenuTranslation'
+import { useGlobalLitegraph } from '@/composables/useGlobalLitegraph'
+import { useWorkflowPersistence } from '@/composables/useWorkflowPersistence'
 import { CORE_SETTINGS } from '@/constants/coreSettings'
-import { usePragmaticDroppable } from '@/hooks/dndHooks'
+import { i18n } from '@/i18n'
 import { api } from '@/scripts/api'
 import { app as comfyApp } from '@/scripts/app'
 import { ChangeTracker } from '@/scripts/changeTracker'
-import { getStorageValue, setStorageValue } from '@/scripts/utils'
 import { IS_CONTROL_WIDGET, updateControlWidgetLabel } from '@/scripts/widgets'
 import { useColorPaletteService } from '@/services/colorPaletteService'
-import { useLitegraphService } from '@/services/litegraphService'
 import { useWorkflowService } from '@/services/workflowService'
 import { useCommandStore } from '@/stores/commandStore'
 import { useCanvasStore } from '@/stores/graphStore'
-import { ComfyModelDef } from '@/stores/modelStore'
-import {
-  ModelNodeProvider,
-  useModelToNodeStore
-} from '@/stores/modelToNodeStore'
-import { ComfyNodeDefImpl, useNodeDefStore } from '@/stores/nodeDefStore'
+import { useNodeDefStore } from '@/stores/nodeDefStore'
 import { useSettingStore } from '@/stores/settingStore'
-import { useWorkflowStore } from '@/stores/workflowStore'
 import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
-import type { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
 
 const emit = defineEmits(['ready'])
 const canvasRef = ref<HTMLCanvasElement | null>(null)
-const litegraphService = useLitegraphService()
 const settingStore = useSettingStore()
 const nodeDefStore = useNodeDefStore()
 const workspaceStore = useWorkspaceStore()
 const canvasStore = useCanvasStore()
-const modelToNodeStore = useModelToNodeStore()
 const betaMenuEnabled = computed(
   () => settingStore.get('Comfy.UseNewMenu') !== 'Disabled'
 )
@@ -95,29 +77,6 @@ const canvasMenuEnabled = computed(() =>
 )
 const tooltipEnabled = computed(() => settingStore.get('Comfy.EnableTooltips'))
 
-const storedWorkflows = JSON.parse(
-  getStorageValue('Comfy.OpenWorkflowsPaths') || '[]'
-)
-const storedActiveIndex = JSON.parse(
-  getStorageValue('Comfy.ActiveWorkflowIndex') || '-1'
-)
-const openWorkflows = computed(() => workspaceStore?.workflow?.openWorkflows)
-const activeWorkflow = computed(() => workspaceStore?.workflow?.activeWorkflow)
-const restoreState = computed<{ paths: string[]; activeIndex: number }>(() => {
-  if (!openWorkflows.value || !activeWorkflow.value) {
-    return { paths: [], activeIndex: -1 }
-  }
-
-  const paths = openWorkflows.value
-    .filter((workflow) => workflow?.isPersisted && !workflow.isModified)
-    .map((workflow) => workflow.path)
-  const activeIndex = openWorkflows.value.findIndex(
-    (workflow) => workflow.path === activeWorkflow.value?.path
-  )
-
-  return { paths, activeIndex }
-})
-
 watchEffect(() => {
   const canvasInfoEnabled = settingStore.get('Comfy.Graph.CanvasInfo')
   if (canvasStore.canvas) {
@@ -184,6 +143,17 @@ watchEffect(() => {
   }
 })
 
+watchEffect(() => {
+  const lowQualityRenderingZoomThreshold = settingStore.get(
+    'LiteGraph.Canvas.LowQualityRenderingZoomThreshold'
+  )
+  if (canvasStore.canvas) {
+    canvasStore.canvas.low_quality_zoom_threshold =
+      lowQualityRenderingZoomThreshold
+    canvasStore.canvas.setDirty(/* fg */ true, /* bg */ true)
+  }
+})
+
 watchEffect(() => {
   const linkMarkerShape = settingStore.get('Comfy.Graph.LinkMarkers')
   const { canvas } = canvasStore
@@ -269,98 +239,30 @@ watch(
   }
 )
 
-const workflowStore = useWorkflowStore()
-const persistCurrentWorkflow = () => {
-  const workflow = JSON.stringify(comfyApp.serializeGraph())
-  localStorage.setItem('workflow', workflow)
-  if (api.clientId) {
-    sessionStorage.setItem(`workflow:${api.clientId}`, workflow)
+watchEffect(() => {
+  LiteGraph.context_menu_scaling = settingStore.get(
+    'LiteGraph.ContextMenu.Scaling'
+  )
+})
+
+const loadCustomNodesI18n = async () => {
+  try {
+    const i18nData = await api.getCustomNodesI18n()
+    Object.entries(i18nData).forEach(([locale, message]) => {
+      i18n.global.mergeLocaleMessage(locale, message)
+    })
+  } catch (error) {
+    console.error('Failed to load custom nodes i18n', error)
   }
 }
 
-watchEffect(() => {
-  if (workflowStore.activeWorkflow) {
-    const workflow = workflowStore.activeWorkflow
-    setStorageValue('Comfy.PreviousWorkflow', workflow.key)
-    // When the activeWorkflow changes, the graph has already been loaded.
-    // Saving the current state of the graph to the localStorage.
-    persistCurrentWorkflow()
-  }
-})
-
-api.addEventListener('graphChanged', persistCurrentWorkflow)
-
-usePragmaticDroppable(() => canvasRef.value, {
-  onDrop: (event) => {
-    const loc = event.location.current.input
-    const dndData = event.source.data
-
-    if (dndData.type === 'tree-explorer-node') {
-      const node = dndData.data as RenderedTreeExplorerNode
-      if (node.data instanceof ComfyNodeDefImpl) {
-        const nodeDef = node.data
-        // Add an offset on x to make sure after adding the node, the cursor
-        // is on the node (top left corner)
-        const pos = comfyApp.clientPosToCanvasPos([
-          loc.clientX - 20,
-          loc.clientY
-        ])
-        litegraphService.addNodeOnGraph(nodeDef, { pos })
-      } else if (node.data instanceof ComfyModelDef) {
-        const model = node.data
-        const pos = comfyApp.clientPosToCanvasPos([loc.clientX, loc.clientY])
-        const nodeAtPos = comfyApp.graph.getNodeOnPos(pos[0], pos[1])
-        let targetProvider: ModelNodeProvider | null = null
-        let targetGraphNode: LGraphNode | null = null
-        if (nodeAtPos) {
-          const providers = modelToNodeStore.getAllNodeProviders(
-            model.directory
-          )
-          for (const provider of providers) {
-            if (provider.nodeDef.name === nodeAtPos.comfyClass) {
-              targetGraphNode = nodeAtPos
-              targetProvider = provider
-            }
-          }
-        }
-        if (!targetGraphNode) {
-          const provider = modelToNodeStore.getNodeProvider(model.directory)
-          if (provider) {
-            targetGraphNode = litegraphService.addNodeOnGraph(
-              provider.nodeDef,
-              {
-                pos
-              }
-            )
-            targetProvider = provider
-          }
-        }
-        if (targetGraphNode) {
-          const widget = targetGraphNode.widgets.find(
-            (widget) => widget.name === targetProvider.key
-          )
-          if (widget) {
-            widget.value = model.file_name
-          }
-        }
-      }
-    }
-  }
-})
-
 const comfyAppReady = ref(false)
+const workflowPersistence = useWorkflowPersistence()
+useCanvasDrop(canvasRef)
+
 onMounted(async () => {
-  // Backward compatible
-  // Assign all properties of lg to window
-  window['LiteGraph'] = LiteGraph
-  window['LGraph'] = LGraph
-  window['LLink'] = LLink
-  window['LGraphNode'] = LGraphNode
-  window['LGraphGroup'] = LGraphGroup
-  window['DragAndScale'] = DragAndScale
-  window['LGraphCanvas'] = LGraphCanvas
-  window['ContextMenu'] = ContextMenu
-  window['LGraphBadge'] = LGraphBadge
+  useGlobalLitegraph()
+  useContextMenuTranslation()
 
   comfyApp.vueAppReady = true
 
@@ -368,6 +270,7 @@ onMounted(async () => {
   // ChangeTracker needs to be initialized before setup, as it will overwrite
   // some listeners of litegraph canvas.
   ChangeTracker.init(comfyApp)
+  await loadCustomNodesI18n()
   await settingStore.loadSettingValues()
   CORE_SETTINGS.forEach((setting) => {
     settingStore.addSetting(setting)
@@ -387,17 +290,9 @@ onMounted(async () => {
     'Comfy.CustomColorPalettes'
   )
 
-  const isRestorable = storedWorkflows?.length > 0 && storedActiveIndex >= 0
-  if (isRestorable)
-    workflowStore.openWorkflowsInBackground({
-      left: storedWorkflows.slice(0, storedActiveIndex),
-      right: storedWorkflows.slice(storedActiveIndex)
-    })
-
-  watch(restoreState, ({ paths, activeIndex }) => {
-    setStorageValue('Comfy.OpenWorkflowsPaths', JSON.stringify(paths))
-    setStorageValue('Comfy.ActiveWorkflowIndex', JSON.stringify(activeIndex))
-  })
+  // Restore workflow and workflow tabs state from storage
+  await workflowPersistence.restorePreviousWorkflow()
+  workflowPersistence.restoreWorkflowTabsState()
 
   // Start watching for locale change after the initial value is loaded.
   watch(

src/components/graph/NodeTooltip.vue

@@ -17,10 +17,12 @@ import { nextTick, ref } from 'vue'
 import { st } from '@/i18n'
 import { app as comfyApp } from '@/scripts/app'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
+import { useSettingStore } from '@/stores/settingStore'
 import { normalizeI18nKey } from '@/utils/formatUtil'
 
 let idleTimeout: number
 const nodeDefStore = useNodeDefStore()
+const settingStore = useSettingStore()
 const tooltipRef = ref<HTMLDivElement>()
 const tooltipText = ref('')
 const left = ref<string>()
@@ -110,7 +112,10 @@ const onMouseMove = (e: MouseEvent) => {
   clearTimeout(idleTimeout)
 
   if ((e.target as Node).nodeName !== 'CANVAS') return
-  idleTimeout = window.setTimeout(onIdle, 500)
+  idleTimeout = window.setTimeout(
+    onIdle,
+    settingStore.get('LiteGraph.Node.TooltipDelay')
+  )
 }
 
 useEventListener(window, 'mousemove', onMouseMove)

src/components/install/MirrorsConfiguration.vue

@@ -0,0 +1,114 @@
+<template>
+  <Panel
+    :header="$t('install.settings.mirrorSettings')"
+    toggleable
+    :collapsed="!showMirrorInputs"
+    pt:root="bg-neutral-800 border-none w-[600px]"
+  >
+    <template
+      v-for="([item, modelValue], index) in mirrors"
+      :key="item.settingId + item.mirror"
+    >
+      <Divider v-if="index > 0" />
+
+      <MirrorItem
+        :item="item"
+        v-model="modelValue.value"
+        @state-change="validationStates[index] = $event"
+      />
+    </template>
+    <template #icons>
+      <i
+        :class="{
+          'pi pi-spin pi-spinner text-neutral-400':
+            validationState === ValidationState.LOADING,
+          'pi pi-check text-green-500':
+            validationState === ValidationState.VALID,
+          'pi pi-times text-red-500':
+            validationState === ValidationState.INVALID
+        }"
+        v-tooltip="validationStateTooltip"
+      />
+    </template>
+  </Panel>
+</template>
+
+<script setup lang="ts">
+import {
+  CUDA_TORCH_URL,
+  NIGHTLY_CPU_TORCH_URL,
+  TorchDeviceType
+} from '@comfyorg/comfyui-electron-types'
+import Divider from 'primevue/divider'
+import Panel from 'primevue/panel'
+import { ModelRef, computed, onMounted, ref } from 'vue'
+
+import MirrorItem from '@/components/install/mirror/MirrorItem.vue'
+import { PYPI_MIRROR, PYTHON_MIRROR, UVMirror } from '@/constants/uvMirrors'
+import { t } from '@/i18n'
+import { isInChina } from '@/utils/networkUtil'
+import { ValidationState, mergeValidationStates } from '@/utils/validationUtil'
+
+const showMirrorInputs = ref(false)
+const { device } = defineProps<{ device: TorchDeviceType }>()
+const pythonMirror = defineModel<string>('pythonMirror', { required: true })
+const pypiMirror = defineModel<string>('pypiMirror', { required: true })
+const torchMirror = defineModel<string>('torchMirror', { required: true })
+
+const getTorchMirrorItem = (device: TorchDeviceType): UVMirror => {
+  const settingId = 'Comfy-Desktop.UV.TorchInstallMirror'
+  switch (device) {
+    case 'mps':
+      return {
+        settingId,
+        mirror: NIGHTLY_CPU_TORCH_URL,
+        fallbackMirror: NIGHTLY_CPU_TORCH_URL
+      }
+    case 'nvidia':
+      return {
+        settingId,
+        mirror: CUDA_TORCH_URL,
+        fallbackMirror: CUDA_TORCH_URL
+      }
+    case 'cpu':
+    default:
+      return {
+        settingId,
+        mirror: PYPI_MIRROR.mirror,
+        fallbackMirror: PYPI_MIRROR.fallbackMirror
+      }
+  }
+}
+
+const mirrors = computed<[UVMirror, ModelRef<string>][]>(() => [
+  [PYTHON_MIRROR, pythonMirror],
+  [PYPI_MIRROR, pypiMirror],
+  [getTorchMirrorItem(device), torchMirror]
+])
+
+const validationStates = ref<ValidationState[]>(
+  mirrors.value.map(() => ValidationState.IDLE)
+)
+const validationState = computed(() => {
+  return mergeValidationStates(validationStates.value)
+})
+const validationStateTooltip = computed(() => {
+  switch (validationState.value) {
+    case ValidationState.INVALID:
+      return t('install.settings.mirrorsUnreachable')
+    case ValidationState.VALID:
+      return t('install.settings.mirrorsReachable')
+    default:
+      return t('install.settings.checkingMirrors')
+  }
+})
+
+onMounted(async () => {
+  // Check if user is in China and set fallback mirrors directly
+  if (await isInChina()) {
+    for (const [item, modelValue] of mirrors.value) {
+      modelValue.value = item.fallbackMirror
+    }
+  }
+})
+</script>

src/components/install/mirror/MirrorItem.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="flex flex-col items-center gap-4">
+    <div class="w-full">
+      <h3 class="text-lg font-medium text-neutral-100">
+        {{ $t(`settings.${normalizedSettingId}.name`) }}
+      </h3>
+      <p class="text-sm text-neutral-400 mt-1">
+        {{ $t(`settings.${normalizedSettingId}.tooltip`) }}
+      </p>
+    </div>
+    <UrlInput
+      v-model="modelValue"
+      :validate-url-fn="
+        (mirror: string) =>
+          checkMirrorReachable(mirror + (item.validationPathSuffix ?? ''))
+      "
+      @state-change="validationState = $event"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue'
+
+import UrlInput from '@/components/common/UrlInput.vue'
+import { UVMirror } from '@/constants/uvMirrors'
+import { normalizeI18nKey } from '@/utils/formatUtil'
+import { checkMirrorReachable } from '@/utils/networkUtil'
+import { ValidationState } from '@/utils/validationUtil'
+
+const { item } = defineProps<{
+  item: UVMirror
+}>()
+
+const emit = defineEmits<{
+  'state-change': [state: ValidationState]
+}>()
+
+const modelValue = defineModel<string>('modelValue', { required: true })
+const validationState = ref<ValidationState>(ValidationState.IDLE)
+
+const normalizedSettingId = computed(() => {
+  return normalizeI18nKey(item.settingId)
+})
+
+onMounted(() => {
+  // Set mirror value if not already set
+  if (!modelValue.value) {
+    modelValue.value = item.mirror
+  }
+})
+
+watch(validationState, (newState) => {
+  emit('state-change', newState)
+
+  // Set fallback mirror if default mirror is invalid
+  if (
+    newState === ValidationState.INVALID &&
+    modelValue.value === item.mirror
+  ) {
+    modelValue.value = item.fallbackMirror
+  }
+})
+</script>

src/components/maintenance/StatusTag.vue

@@ -3,9 +3,9 @@
 </template>
 
 <script setup lang="ts">
-import { PrimeIcons, type PrimeIconsOptions } from '@primevue/core/api'
-import Tag, { TagProps } from 'primevue/tag'
-import { ref, watch } from 'vue'
+import { PrimeIcons } from '@primevue/core/api'
+import Tag from 'primevue/tag'
+import { computed } from 'vue'
 
 import { t } from '@/i18n'
 
@@ -16,25 +16,21 @@ const props = defineProps<{
 }>()
 
 // Bindings
-const icon = ref<string>(null)
-const severity = ref<TagProps['severity']>(null)
-const value = ref<PrimeIconsOptions[keyof PrimeIconsOptions]>(null)
+const icon = computed(() => {
+  if (props.refreshing) return PrimeIcons.QUESTION
+  if (props.error) return PrimeIcons.TIMES
+  return PrimeIcons.CHECK
+})
 
-const updateBindings = () => {
-  if (props.refreshing) {
-    icon.value = PrimeIcons.QUESTION
-    severity.value = 'info'
-    value.value = t('maintenance.refreshing')
-  } else if (props.error) {
-    icon.value = PrimeIcons.TIMES
-    severity.value = 'danger'
-    value.value = t('g.error')
-  } else {
-    icon.value = PrimeIcons.CHECK
-    severity.value = 'success'
-    value.value = t('maintenance.OK')
-  }
-}
+const severity = computed(() => {
+  if (props.refreshing) return 'info'
+  if (props.error) return 'danger'
+  return 'success'
+})
 
-watch(props, updateBindings, { deep: true })
+const value = computed(() => {
+  if (props.refreshing) return t('maintenance.refreshing')
+  if (props.error) return t('g.error')
+  return t('maintenance.OK')
+})
 </script>

src/components/maintenance/TaskCard.vue

@@ -5,12 +5,12 @@
   >
     <Card
       class="max-w-48 relative h-full overflow-hidden"
-      :class="{ 'opacity-65': state.state !== 'error' }"
+      :class="{ 'opacity-65': runner.state !== 'error' }"
       v-bind="(({ onClick, ...rest }) => rest)($attrs)"
     >
       <template #header>
         <i
-          v-if="state.state === 'error'"
+          v-if="runner.state === 'error'"
           class="pi pi-exclamation-triangle text-red-500 absolute m-2 top-0 -right-14 opacity-15"
           style="font-size: 10rem"
         />
@@ -38,7 +38,7 @@
     </Card>
 
     <i
-      v-if="!isLoading && state.state === 'OK'"
+      v-if="!isLoading && runner.state === 'OK'"
       class="task-card-ok pi pi-check"
     />
   </div>
@@ -54,7 +54,7 @@ import type { MaintenanceTask } from '@/types/desktop/maintenanceTypes'
 import { useMinLoadingDurationRef } from '@/utils/refUtil'
 
 const taskStore = useMaintenanceTaskStore()
-const state = computed(() => taskStore.getState(props.task))
+const runner = computed(() => taskStore.getRunner(props.task))
 
 // Properties
 const props = defineProps<{
@@ -68,14 +68,14 @@ defineEmits<{
 
 // Bindings
 const description = computed(() =>
-  state.value.state === 'error'
+  runner.value.state === 'error'
     ? props.task.errorDescription ?? props.task.shortDescription
     : props.task.shortDescription
 )
 
 // Use a minimum run time to ensure tasks "feel" like they have run
-const reactiveLoading = computed(() => state.value.refreshing)
-const reactiveExecuting = computed(() => state.value.executing)
+const reactiveLoading = computed(() => runner.value.refreshing)
+const reactiveExecuting = computed(() => runner.value.executing)
 
 const isLoading = useMinLoadingDurationRef(reactiveLoading, 250)
 const isExecuting = useMinLoadingDurationRef(reactiveExecuting, 250)

src/components/maintenance/TaskListItem.vue

@@ -2,12 +2,12 @@
   <tr
     class="border-neutral-700 border-solid border-y"
     :class="{
-      'opacity-50': state.state === 'resolved',
-      'opacity-75': isLoading && state.state !== 'resolved'
+      'opacity-50': runner.resolved,
+      'opacity-75': isLoading && runner.resolved
     }"
   >
     <td class="text-center w-16">
-      <TaskListStatusIcon :state="state.state" :loading="isLoading" />
+      <TaskListStatusIcon :state="runner.state" :loading="isLoading" />
     </td>
     <td>
       <p class="inline-block">{{ task.name }}</p>
@@ -51,7 +51,7 @@ import { useMinLoadingDurationRef } from '@/utils/refUtil'
 import TaskListStatusIcon from './TaskListStatusIcon.vue'
 
 const taskStore = useMaintenanceTaskStore()
-const state = computed(() => taskStore.getState(props.task))
+const runner = computed(() => taskStore.getRunner(props.task))
 
 // Properties
 const props = defineProps<{
@@ -65,14 +65,14 @@ defineEmits<{
 
 // Binding
 const severity = computed<VueSeverity>(() =>
-  state.value.state === 'error' || state.value.state === 'warning'
+  runner.value.state === 'error' || runner.value.state === 'warning'
     ? 'primary'
     : 'secondary'
 )
 
 // Use a minimum run time to ensure tasks "feel" like they have run
-const reactiveLoading = computed(() => state.value.refreshing)
-const reactiveExecuting = computed(() => state.value.executing)
+const reactiveLoading = computed(() => runner.value.refreshing)
+const reactiveExecuting = computed(() => runner.value.executing)
 
 const isLoading = useMinLoadingDurationRef(reactiveLoading, 250)
 const isExecuting = useMinLoadingDurationRef(reactiveExecuting, 250)

src/components/searchbox/NodeSearchBox.vue

@@ -60,8 +60,9 @@
       <!-- FilterAndValue -->
       <template v-slot:chip="{ value }">
         <SearchFilterChip
+          v-if="Array.isArray(value) && value.length === 2"
           :key="`${value[0].id}-${value[1]}`"
-          @remove="onRemoveFilter($event, value)"
+          @remove="onRemoveFilter($event, value as FilterAndValue)"
           :text="value[1]"
           :badge="value[0].invokeSequence.toUpperCase()"
           :badge-class="value[0].invokeSequence + '-badge'"

src/components/sidebar/tabs/ModelLibrarySidebarTab.vue

@@ -54,7 +54,7 @@ import TreeExplorer from '@/components/common/TreeExplorer.vue'
 import SidebarTabTemplate from '@/components/sidebar/tabs/SidebarTabTemplate.vue'
 import ElectronDownloadItems from '@/components/sidebar/tabs/modelLibrary/ElectronDownloadItems.vue'
 import ModelTreeLeaf from '@/components/sidebar/tabs/modelLibrary/ModelTreeLeaf.vue'
-import { useTreeExpansion } from '@/hooks/treeHooks'
+import { useTreeExpansion } from '@/composables/useTreeExpansion'
 import { useLitegraphService } from '@/services/litegraphService'
 import {
   ComfyModelDef,
@@ -64,10 +64,7 @@ import {
 } from '@/stores/modelStore'
 import { useModelToNodeStore } from '@/stores/modelToNodeStore'
 import { useSettingStore } from '@/stores/settingStore'
-import type {
-  RenderedTreeExplorerNode,
-  TreeExplorerNode
-} from '@/types/treeExplorerTypes'
+import type { TreeExplorerNode } from '@/types/treeExplorerTypes'
 import { isElectron } from '@/utils/envUtil'
 import { buildTree } from '@/utils/treeUtil'
 
@@ -126,7 +123,7 @@ const renderedRoot = computed<TreeExplorerNode<ModelOrFolder>>(() => {
         : node.label,
       leaf: node.leaf,
       data: node.data,
-      getIcon: () => {
+      getIcon() {
         if (model) {
           return model.image ? 'pi pi-image' : 'pi pi-file'
         }
@@ -137,7 +134,7 @@ const renderedRoot = computed<TreeExplorerNode<ModelOrFolder>>(() => {
         }
         return 'pi pi-folder'
       },
-      getBadgeText: () => {
+      getBadgeText() {
         // Return null to apply default badge text
         // Return empty string to hide badge
         if (!folder) {
@@ -147,11 +144,8 @@ const renderedRoot = computed<TreeExplorerNode<ModelOrFolder>>(() => {
       },
       children,
       draggable: node.leaf,
-      handleClick: (
-        node: RenderedTreeExplorerNode<ModelOrFolder>,
-        e: MouseEvent
-      ) => {
-        if (node.leaf) {
+      handleClick(e: MouseEvent) {
+        if (this.leaf) {
           const provider = modelToNodeStore.getNodeProvider(model.directory)
           if (provider) {
             const node = useLitegraphService().addNodeOnGraph(provider.nodeDef)

src/components/sidebar/tabs/NodeLibrarySidebarTab.vue

@@ -66,15 +66,16 @@ import Button from 'primevue/button'
 import Divider from 'primevue/divider'
 import Popover from 'primevue/popover'
 import type { TreeNode } from 'primevue/treenode'
-import { Ref, computed, nextTick, ref } from 'vue'
+import { Ref, computed, h, nextTick, ref, render } from 'vue'
 
 import SearchBox from '@/components/common/SearchBox.vue'
 import { SearchFilter } from '@/components/common/SearchFilterChip.vue'
 import TreeExplorer from '@/components/common/TreeExplorer.vue'
+import NodePreview from '@/components/node/NodePreview.vue'
 import NodeSearchFilter from '@/components/searchbox/NodeSearchFilter.vue'
 import SidebarTabTemplate from '@/components/sidebar/tabs/SidebarTabTemplate.vue'
 import NodeTreeLeaf from '@/components/sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue'
-import { useTreeExpansion } from '@/hooks/treeHooks'
+import { useTreeExpansion } from '@/composables/useTreeExpansion'
 import { useLitegraphService } from '@/services/litegraphService'
 import { FilterAndValue } from '@/services/nodeSearchService'
 import { useNodeBookmarkStore } from '@/stores/nodeBookmarkStore'
@@ -83,10 +84,7 @@ import {
   buildNodeDefTree,
   useNodeDefStore
 } from '@/stores/nodeDefStore'
-import type {
-  RenderedTreeExplorerNode,
-  TreeExplorerNode
-} from '@/types/treeExplorerTypes'
+import type { TreeExplorerNode } from '@/types/treeExplorerTypes'
 import { sortedTree } from '@/utils/treeUtil'
 
 import NodeBookmarkTreeExplorer from './nodeLibrary/NodeBookmarkTreeExplorer.vue'
@@ -118,21 +116,25 @@ const renderedRoot = computed<TreeExplorerNode<ComfyNodeDefImpl>>(() => {
       label: node.leaf ? node.data.display_name : node.label,
       leaf: node.leaf,
       data: node.data,
-      getIcon: (node: TreeExplorerNode<ComfyNodeDefImpl>) => {
-        if (node.leaf) {
+      getIcon() {
+        if (this.leaf) {
           return 'pi pi-circle-fill'
         }
       },
       children,
       draggable: node.leaf,
-      handleClick: (
-        node: RenderedTreeExplorerNode<ComfyNodeDefImpl>,
-        e: MouseEvent
-      ) => {
-        if (node.leaf) {
-          useLitegraphService().addNodeOnGraph(node.data)
+      renderDragPreview(container) {
+        const vnode = h(NodePreview, { nodeDef: node.data })
+        render(vnode, container)
+        return () => {
+          render(null, container)
+        }
+      },
+      handleClick(e: MouseEvent) {
+        if (this.leaf) {
+          useLitegraphService().addNodeOnGraph(this.data)
         } else {
-          toggleNodeOnEvent(e, node)
+          toggleNodeOnEvent(e, this)
         }
       }
     }

src/components/sidebar/tabs/SidebarTabTemplate.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="comfy-vue-side-bar-container flex flex-col h-full"
+    class="comfy-vue-side-bar-container flex flex-col h-full group/sidebar-tab"
     :class="props.class"
   >
     <div class="comfy-vue-side-bar-header">
@@ -11,7 +11,11 @@
           </span>
         </template>
         <template #end>
-          <slot name="tool-buttons"></slot>
+          <div
+            class="flex flex-row motion-safe:w-0 motion-safe:opacity-0 motion-safe:group-hover/sidebar-tab:w-auto motion-safe:group-hover/sidebar-tab:opacity-100 motion-safe:group-focus-within/sidebar-tab:w-auto motion-safe:group-focus-within/sidebar-tab:opacity-100 touch:w-auto touch:opacity-100 transition-all duration-200"
+          >
+            <slot name="tool-buttons"></slot>
+          </div>
         </template>
       </Toolbar>
       <slot name="header"></slot>

src/components/sidebar/tabs/WorkflowsSidebarTab.vue

@@ -7,6 +7,7 @@
       <Button
         class="browse-templates-button"
         icon="pi pi-th-large"
+        severity="secondary"
         v-tooltip.bottom="$t('sideToolbar.browseTemplates')"
         text
         @click="() => commandStore.execute('Comfy.BrowseTemplates')"
@@ -14,6 +15,7 @@
       <Button
         class="open-workflow-button"
         icon="pi pi-folder-open"
+        severity="secondary"
         v-tooltip.bottom="$t('sideToolbar.openWorkflow')"
         text
         @click="() => commandStore.execute('Comfy.OpenWorkflow')"
@@ -21,6 +23,7 @@
       <Button
         class="new-blank-workflow-button"
         icon="pi pi-plus"
+        severity="secondary"
         v-tooltip.bottom="$t('sideToolbar.newBlankWorkflow')"
         @click="() => commandStore.execute('Comfy.NewBlankWorkflow')"
         text
@@ -152,7 +155,7 @@ import TreeExplorer from '@/components/common/TreeExplorer.vue'
 import TreeExplorerTreeNode from '@/components/common/TreeExplorerTreeNode.vue'
 import SidebarTabTemplate from '@/components/sidebar/tabs/SidebarTabTemplate.vue'
 import WorkflowTreeLeaf from '@/components/sidebar/tabs/workflows/WorkflowTreeLeaf.vue'
-import { useTreeExpansion } from '@/hooks/treeHooks'
+import { useTreeExpansion } from '@/composables/useTreeExpansion'
 import { useWorkflowService } from '@/services/workflowService'
 import { useCommandStore } from '@/stores/commandStore'
 import { useSettingStore } from '@/stores/settingStore'
@@ -242,24 +245,18 @@ const renderTreeNode = (
 
   const workflow: ComfyWorkflow = node.data
 
-  const handleClick = (
-    node: TreeExplorerNode<ComfyWorkflow>,
-    e: MouseEvent
-  ) => {
-    if (node.leaf) {
+  function handleClick(this: TreeExplorerNode<ComfyWorkflow>, e: MouseEvent) {
+    if (this.leaf) {
       workflowService.openWorkflow(workflow)
     } else {
-      toggleNodeOnEvent(e, node)
+      toggleNodeOnEvent(e, this)
     }
   }
 
   const actions = node.leaf
     ? {
         handleClick,
-        handleRename: async (
-          node: TreeExplorerNode<ComfyWorkflow>,
-          newName: string
-        ) => {
+        async handleRename(newName: string) {
           const newPath =
             type === WorkflowTreeType.Browse
               ? workflow.directory + '/' + appendJsonExt(newName)
@@ -269,10 +266,10 @@ const renderTreeNode = (
         },
         handleDelete: workflow.isTemporary
           ? undefined
-          : async () => {
+          : async function () {
               await workflowService.deleteWorkflow(workflow)
             },
-        contextMenuItems: (node: TreeExplorerNode<ComfyWorkflow>) => {
+        contextMenuItems() {
           return [
             {
               label: t('g.insert'),
@@ -283,7 +280,8 @@ const renderTreeNode = (
               }
             }
           ]
-        }
+        },
+        draggable: true
       }
     : { handleClick }
 

src/components/sidebar/tabs/nodeLibrary/NodeBookmarkTreeExplorer.vue

@@ -23,14 +23,15 @@
 
 <script setup lang="ts">
 import type { TreeNode } from 'primevue/treenode'
-import { computed, nextTick, ref, watch } from 'vue'
+import { computed, h, nextTick, ref, render, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import FolderCustomizationDialog from '@/components/common/CustomizationDialog.vue'
 import TreeExplorer from '@/components/common/TreeExplorer.vue'
+import NodePreview from '@/components/node/NodePreview.vue'
 import NodeTreeFolder from '@/components/sidebar/tabs/nodeLibrary/NodeTreeFolder.vue'
 import NodeTreeLeaf from '@/components/sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue'
-import { useTreeExpansion } from '@/hooks/treeHooks'
+import { useTreeExpansion } from '@/composables/useTreeExpansion'
 import { useLitegraphService } from '@/services/litegraphService'
 import { useNodeBookmarkStore } from '@/stores/nodeBookmarkStore'
 import { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
@@ -139,8 +140,8 @@ const renderedBookmarkedRoot = computed<TreeExplorerNode<ComfyNodeDefImpl>>(
         label: node.leaf ? node.data.display_name : node.label,
         leaf: node.leaf,
         data: node.data,
-        getIcon: (node: TreeExplorerNode<ComfyNodeDefImpl>) => {
-          if (node.leaf) {
+        getIcon() {
+          if (this.leaf) {
             return 'pi pi-circle-fill'
           }
           const customization =
@@ -151,11 +152,15 @@ const renderedBookmarkedRoot = computed<TreeExplorerNode<ComfyNodeDefImpl>>(
         },
         children: sortedChildren,
         draggable: node.leaf,
+        renderDragPreview(container) {
+          const vnode = h(NodePreview, { nodeDef: node.data })
+          render(vnode, container)
+          return () => {
+            render(null, container)
+          }
+        },
         droppable: !node.leaf,
-        handleDrop: (
-          node: TreeExplorerNode<ComfyNodeDefImpl>,
-          data: TreeExplorerDragAndDropData<ComfyNodeDefImpl>
-        ) => {
+        handleDrop(data: TreeExplorerDragAndDropData<ComfyNodeDefImpl>) {
           const nodeDefToAdd = data.data.data
           // Remove bookmark if the source is the top level bookmarked node.
           if (nodeBookmarkStore.isBookmarked(nodeDefToAdd)) {
@@ -165,12 +170,9 @@ const renderedBookmarkedRoot = computed<TreeExplorerNode<ComfyNodeDefImpl>>(
           const nodePath = folderNodeDef.category + '/' + nodeDefToAdd.name
           nodeBookmarkStore.addBookmark(nodePath)
         },
-        handleClick: (
-          node: RenderedTreeExplorerNode<ComfyNodeDefImpl>,
-          e: MouseEvent
-        ) => {
-          if (node.leaf) {
-            useLitegraphService().addNodeOnGraph(node.data)
+        handleClick(e: MouseEvent) {
+          if (this.leaf) {
+            useLitegraphService().addNodeOnGraph(this.data)
           } else {
             toggleNodeOnEvent(e, node)
           }
@@ -179,9 +181,13 @@ const renderedBookmarkedRoot = computed<TreeExplorerNode<ComfyNodeDefImpl>>(
         ...(node.leaf
           ? {}
           : {
-              handleRename,
-              handleDelete: (node: TreeExplorerNode<ComfyNodeDefImpl>) => {
-                nodeBookmarkStore.deleteBookmarkFolder(node.data)
+              handleRename(newName: string) {
+                if (this.data && this.data.isDummyFolder) {
+                  nodeBookmarkStore.renameBookmarkFolder(this.data, newName)
+                }
+              },
+              handleDelete() {
+                nodeBookmarkStore.deleteBookmarkFolder(this.data)
               }
             })
       }
@@ -212,12 +218,6 @@ defineExpose({
   addNewBookmarkFolder
 })
 
-const handleRename = (node: TreeNode, newName: string) => {
-  if (node.data && node.data.isDummyFolder) {
-    nodeBookmarkStore.renameBookmarkFolder(node.data, newName)
-  }
-}
-
 const showCustomizationDialog = ref(false)
 const initialIcon = ref(nodeBookmarkStore.defaultBookmarkIcon)
 const initialColor = ref(nodeBookmarkStore.defaultBookmarkColor)

src/components/topbar/TopMenubar.vue

@@ -11,7 +11,7 @@
       <div class="flex-grow min-w-0 app-drag h-full">
         <WorkflowTabs v-if="workflowTabsPosition === 'Topbar'" />
       </div>
-      <div class="comfyui-menu-right" ref="menuRight"></div>
+      <div class="comfyui-menu-right flex-shrink-0" ref="menuRight"></div>
       <Actionbar />
       <BottomPanelToggleButton class="flex-shrink-0" />
       <Button
@@ -33,7 +33,7 @@
 
   <!-- Virtual top menu for native window (drag handle) -->
   <div
-    v-show="isNativeWindow && !showTopMenu"
+    v-show="isNativeWindow() && !showTopMenu"
     class="fixed top-0 left-0 app-drag w-full h-[var(--comfy-topbar-height)]"
   />
 </template>
@@ -50,7 +50,12 @@ import WorkflowTabs from '@/components/topbar/WorkflowTabs.vue'
 import { app } from '@/scripts/app'
 import { useSettingStore } from '@/stores/settingStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
-import { electronAPI, isElectron, showNativeMenu } from '@/utils/envUtil'
+import {
+  electronAPI,
+  isElectron,
+  isNativeWindow,
+  showNativeMenu
+} from '@/utils/envUtil'
 
 const workspaceState = useWorkspaceStore()
 const settingStore = useSettingStore()
@@ -64,10 +69,6 @@ const teleportTarget = computed(() =>
     ? '.comfyui-body-top'
     : '.comfyui-body-bottom'
 )
-const isNativeWindow = computed(
-  () =>
-    isElectron() && settingStore.get('Comfy-Desktop.WindowStyle') === 'custom'
-)
 const showTopMenu = computed(
   () => betaMenuEnabled.value && !workspaceState.focusMode
 )

src/components/topbar/WorkflowTab.vue

@@ -32,7 +32,10 @@
 import Button from 'primevue/button'
 import { ref } from 'vue'
 
-import { usePragmaticDraggable, usePragmaticDroppable } from '@/hooks/dndHooks'
+import {
+  usePragmaticDraggable,
+  usePragmaticDroppable
+} from '@/composables/usePragmaticDragAndDrop'
 import { useWorkflowService } from '@/services/workflowService'
 import { ComfyWorkflow } from '@/stores/workflowStore'
 import { useWorkflowStore } from '@/stores/workflowStore'

src/composables/bottomPanelTabs/useTerminalBuffer.ts

@@ -0,0 +1,30 @@
+import { SerializeAddon } from '@xterm/addon-serialize'
+import { Terminal } from '@xterm/xterm'
+import { markRaw, onMounted, onUnmounted } from 'vue'
+
+export function useTerminalBuffer() {
+  const serializeAddon = new SerializeAddon()
+  const terminal = markRaw(new Terminal({ convertEol: true }))
+
+  const copyTo = (destinationTerminal: Terminal) => {
+    destinationTerminal.write(serializeAddon.serialize())
+  }
+
+  const write = (message: string) => terminal.write(message)
+
+  const serialize = () => serializeAddon.serialize()
+
+  onMounted(() => {
+    terminal.loadAddon(serializeAddon)
+  })
+
+  onUnmounted(() => {
+    terminal.dispose()
+  })
+
+  return {
+    copyTo,
+    serialize,
+    write
+  }
+}

src/composables/useCanvasDrop.ts

@@ -0,0 +1,87 @@
+import { LGraphNode } from '@comfyorg/litegraph'
+import { LiteGraph } from '@comfyorg/litegraph'
+import { Ref } from 'vue'
+
+import { usePragmaticDroppable } from '@/composables/usePragmaticDragAndDrop'
+import { app as comfyApp } from '@/scripts/app'
+import { useLitegraphService } from '@/services/litegraphService'
+import { useWorkflowService } from '@/services/workflowService'
+import { ComfyModelDef } from '@/stores/modelStore'
+import { ModelNodeProvider } from '@/stores/modelToNodeStore'
+import { useModelToNodeStore } from '@/stores/modelToNodeStore'
+import { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+import { ComfyWorkflow } from '@/stores/workflowStore'
+import { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
+
+export const useCanvasDrop = (canvasRef: Ref<HTMLCanvasElement>) => {
+  const modelToNodeStore = useModelToNodeStore()
+  const litegraphService = useLitegraphService()
+  const workflowService = useWorkflowService()
+
+  usePragmaticDroppable(() => canvasRef.value, {
+    getDropEffect: (args): Exclude<DataTransfer['dropEffect'], 'none'> =>
+      args.source.data.type === 'tree-explorer-node' ? 'copy' : 'move',
+    onDrop: (event) => {
+      const loc = event.location.current.input
+      const dndData = event.source.data
+
+      if (dndData.type === 'tree-explorer-node') {
+        const node = dndData.data as RenderedTreeExplorerNode
+        if (node.data instanceof ComfyNodeDefImpl) {
+          const nodeDef = node.data
+          // Add an offset on x to make sure after adding the node, the cursor
+          // is on the node (top left corner)
+          const pos = comfyApp.clientPosToCanvasPos([
+            loc.clientX,
+            loc.clientY + LiteGraph.NODE_TITLE_HEIGHT
+          ])
+          litegraphService.addNodeOnGraph(nodeDef, { pos })
+        } else if (node.data instanceof ComfyModelDef) {
+          const model = node.data
+          const pos = comfyApp.clientPosToCanvasPos([loc.clientX, loc.clientY])
+          const nodeAtPos = comfyApp.graph.getNodeOnPos(pos[0], pos[1])
+          let targetProvider: ModelNodeProvider | null = null
+          let targetGraphNode: LGraphNode | null = null
+          if (nodeAtPos) {
+            const providers = modelToNodeStore.getAllNodeProviders(
+              model.directory
+            )
+            for (const provider of providers) {
+              if (provider.nodeDef.name === nodeAtPos.comfyClass) {
+                targetGraphNode = nodeAtPos
+                targetProvider = provider
+              }
+            }
+          }
+          if (!targetGraphNode) {
+            const provider = modelToNodeStore.getNodeProvider(model.directory)
+            if (provider) {
+              targetGraphNode = litegraphService.addNodeOnGraph(
+                provider.nodeDef,
+                {
+                  pos
+                }
+              )
+              targetProvider = provider
+            }
+          }
+          if (targetGraphNode) {
+            const widget = targetGraphNode.widgets?.find(
+              (widget) => widget.name === targetProvider?.key
+            )
+            if (widget) {
+              widget.value = model.file_name
+            }
+          }
+        } else if (node.data instanceof ComfyWorkflow) {
+          const workflow = node.data
+          const position = comfyApp.clientPosToCanvasPos([
+            loc.clientX,
+            loc.clientY
+          ])
+          workflowService.insertWorkflow(workflow, { position })
+        }
+      }
+    }
+  })
+}

src/composables/useContextMenuTranslation.ts

@@ -0,0 +1,104 @@
+import type {
+  IContextMenuOptions,
+  IContextMenuValue,
+  INodeInputSlot,
+  IWidget
+} from '@comfyorg/litegraph'
+import { LGraphCanvas, LiteGraph } from '@comfyorg/litegraph'
+
+import { st, te } from '@/i18n'
+import { normalizeI18nKey } from '@/utils/formatUtil'
+
+/**
+ * Add translation for litegraph context menu.
+ */
+export const useContextMenuTranslation = () => {
+  const f = LGraphCanvas.prototype.getCanvasMenuOptions
+  const getCanvasCenterMenuOptions = function (
+    this: LGraphCanvas,
+    ...args: Parameters<typeof f>
+  ) {
+    const res = f.apply(this, args) as ReturnType<typeof f>
+    for (const item of res) {
+      if (item?.content) {
+        item.content = st(`contextMenu.${item.content}`, item.content)
+      }
+    }
+    return res
+  }
+
+  LGraphCanvas.prototype.getCanvasMenuOptions = getCanvasCenterMenuOptions
+
+  function translateMenus(
+    values: (IContextMenuValue | string)[] | undefined,
+    options: IContextMenuOptions
+  ) {
+    if (!values) return
+    const reInput = /Convert (.*) to input/
+    const reWidget = /Convert (.*) to widget/
+    const cvt = st('contextMenu.Convert ', 'Convert ')
+    const tinp = st('contextMenu. to input', ' to input')
+    const twgt = st('contextMenu. to widget', ' to widget')
+    for (const value of values) {
+      if (typeof value === 'string') continue
+
+      translateMenus(value?.submenu?.options, options)
+      if (!value?.content) {
+        continue
+      }
+      if (te(`contextMenu.${value.content}`)) {
+        value.content = st(`contextMenu.${value.content}`, value.content)
+      }
+
+      // for capture translation text of input and widget
+      const extraInfo: any = options.extra || options.parentMenu?.options?.extra
+      // widgets and inputs
+      const matchInput = value.content?.match(reInput)
+      if (matchInput) {
+        let match = matchInput[1]
+        extraInfo?.inputs?.find((i: INodeInputSlot) => {
+          if (i.name != match) return false
+          match = i.label ? i.label : i.name
+        })
+        extraInfo?.widgets?.find((i: IWidget) => {
+          if (i.name != match) return false
+          match = i.label ? i.label : i.name
+        })
+        value.content = cvt + match + tinp
+        continue
+      }
+      const matchWidget = value.content?.match(reWidget)
+      if (matchWidget) {
+        let match = matchWidget[1]
+        extraInfo?.inputs?.find((i: INodeInputSlot) => {
+          if (i.name != match) return false
+          match = i.label ? i.label : i.name
+        })
+        extraInfo?.widgets?.find((i: IWidget) => {
+          if (i.name != match) return false
+          match = i.label ? i.label : i.name
+        })
+        value.content = cvt + match + twgt
+        continue
+      }
+    }
+  }
+
+  const OriginalContextMenu = LiteGraph.ContextMenu
+  function ContextMenu(
+    values: (IContextMenuValue | string)[],
+    options: IContextMenuOptions
+  ) {
+    if (options.title) {
+      options.title = st(
+        `nodeDefs.${normalizeI18nKey(options.title)}.display_name`,
+        options.title
+      )
+    }
+    translateMenus(values, options)
+    const ctx = new OriginalContextMenu(values, options)
+    return ctx
+  }
+
+  LiteGraph.ContextMenu = ContextMenu as unknown as typeof LiteGraph.ContextMenu
+}

src/composables/useGlobalLitegraph.ts

@@ -0,0 +1,27 @@
+// @ts-strict-ignore
+import {
+  ContextMenu,
+  DragAndScale,
+  LGraph,
+  LGraphBadge,
+  LGraphCanvas,
+  LGraphGroup,
+  LGraphNode,
+  LLink,
+  LiteGraph
+} from '@comfyorg/litegraph'
+
+/**
+ * Assign all properties of LiteGraph to window to make it backward compatible.
+ */
+export const useGlobalLitegraph = () => {
+  window['LiteGraph'] = LiteGraph
+  window['LGraph'] = LGraph
+  window['LLink'] = LLink
+  window['LGraphNode'] = LGraphNode
+  window['LGraphGroup'] = LGraphGroup
+  window['DragAndScale'] = DragAndScale
+  window['LGraphCanvas'] = LGraphCanvas
+  window['ContextMenu'] = ContextMenu
+  window['LGraphBadge'] = LGraphBadge
+}

src/composables/useWorkflowPersistence.ts

@@ -0,0 +1,130 @@
+import { computed, watch, watchEffect } from 'vue'
+
+import { api } from '@/scripts/api'
+import { app as comfyApp } from '@/scripts/app'
+import { getStorageValue, setStorageValue } from '@/scripts/utils'
+import { useWorkflowService } from '@/services/workflowService'
+import { useModelStore } from '@/stores/modelStore'
+import { useSettingStore } from '@/stores/settingStore'
+import { useWorkflowStore } from '@/stores/workflowStore'
+
+export function useWorkflowPersistence() {
+  const workflowStore = useWorkflowStore()
+  const settingStore = useSettingStore()
+
+  const persistCurrentWorkflow = () => {
+    const workflow = JSON.stringify(comfyApp.serializeGraph())
+    localStorage.setItem('workflow', workflow)
+    if (api.clientId) {
+      sessionStorage.setItem(`workflow:${api.clientId}`, workflow)
+    }
+  }
+
+  const loadWorkflowFromStorage = async (
+    json: string | null,
+    workflowName: string | null
+  ) => {
+    if (!json) return false
+    const workflow = JSON.parse(json)
+    await comfyApp.loadGraphData(workflow, true, true, workflowName)
+    return true
+  }
+
+  const loadPreviousWorkflowFromStorage = async () => {
+    const workflowName = getStorageValue('Comfy.PreviousWorkflow')
+    const clientId = api.initialClientId ?? api.clientId
+
+    // Try loading from session storage first
+    if (clientId) {
+      const sessionWorkflow = sessionStorage.getItem(`workflow:${clientId}`)
+      if (await loadWorkflowFromStorage(sessionWorkflow, workflowName)) {
+        return true
+      }
+    }
+
+    // Fall back to local storage
+    const localWorkflow = localStorage.getItem('workflow')
+    return await loadWorkflowFromStorage(localWorkflow, workflowName)
+  }
+
+  const loadDefaultWorkflow = async () => {
+    if (!settingStore.get('Comfy.TutorialCompleted')) {
+      await settingStore.set('Comfy.TutorialCompleted', true)
+      await useModelStore().loadModelFolders()
+      await useWorkflowService().loadTutorialWorkflow()
+    } else {
+      await comfyApp.loadGraphData()
+    }
+  }
+
+  const restorePreviousWorkflow = async () => {
+    try {
+      const restored = await loadPreviousWorkflowFromStorage()
+      if (!restored) {
+        await loadDefaultWorkflow()
+      }
+    } catch (err) {
+      console.error('Error loading previous workflow', err)
+      await loadDefaultWorkflow()
+    }
+  }
+
+  // Setup watchers
+  watchEffect(() => {
+    if (workflowStore.activeWorkflow) {
+      const workflow = workflowStore.activeWorkflow
+      setStorageValue('Comfy.PreviousWorkflow', workflow.key)
+      // When the activeWorkflow changes, the graph has already been loaded.
+      // Saving the current state of the graph to the localStorage.
+      persistCurrentWorkflow()
+    }
+  })
+  api.addEventListener('graphChanged', persistCurrentWorkflow)
+
+  // Restore workflow tabs states
+  const openWorkflows = computed(() => workflowStore.openWorkflows)
+  const activeWorkflow = computed(() => workflowStore.activeWorkflow)
+  const restoreState = computed<{ paths: string[]; activeIndex: number }>(
+    () => {
+      if (!openWorkflows.value || !activeWorkflow.value) {
+        return { paths: [], activeIndex: -1 }
+      }
+
+      const paths = openWorkflows.value
+        .filter((workflow) => workflow?.isPersisted && !workflow.isModified)
+        .map((workflow) => workflow.path)
+      const activeIndex = openWorkflows.value.findIndex(
+        (workflow) => workflow.path === activeWorkflow.value?.path
+      )
+
+      return { paths, activeIndex }
+    }
+  )
+
+  // Get storage values before setting watchers
+  const storedWorkflows = JSON.parse(
+    getStorageValue('Comfy.OpenWorkflowsPaths') || '[]'
+  )
+  const storedActiveIndex = JSON.parse(
+    getStorageValue('Comfy.ActiveWorkflowIndex') || '-1'
+  )
+  watch(restoreState, ({ paths, activeIndex }) => {
+    setStorageValue('Comfy.OpenWorkflowsPaths', JSON.stringify(paths))
+    setStorageValue('Comfy.ActiveWorkflowIndex', JSON.stringify(activeIndex))
+  })
+
+  const restoreWorkflowTabsState = () => {
+    const isRestorable = storedWorkflows?.length > 0 && storedActiveIndex >= 0
+    if (isRestorable) {
+      workflowStore.openWorkflowsInBackground({
+        left: storedWorkflows.slice(0, storedActiveIndex),
+        right: storedWorkflows.slice(storedActiveIndex)
+      })
+    }
+  }
+
+  return {
+    restorePreviousWorkflow,
+    restoreWorkflowTabsState
+  }
+}

src/constants/coreSettings.ts

@@ -157,7 +157,7 @@ export const CORE_SETTINGS: SettingParams[] = [
     id: 'Comfy.Workflow.ShowMissingModelsWarning',
     name: 'Show missing models warning',
     type: 'boolean',
-    defaultValue: false,
+    defaultValue: true,
     experimental: true
   },
   {
@@ -290,7 +290,7 @@ export const CORE_SETTINGS: SettingParams[] = [
     name: 'Node ID badge mode',
     type: 'combo',
     options: [NodeBadgeMode.None, NodeBadgeMode.ShowAll],
-    defaultValue: NodeBadgeMode.ShowAll
+    defaultValue: NodeBadgeMode.None
   },
   {
     id: 'Comfy.NodeBadge.NodeLifeCycleBadgeMode',
@@ -363,6 +363,18 @@ export const CORE_SETTINGS: SettingParams[] = [
     },
     defaultValue: 0
   },
+  {
+    id: 'LiteGraph.Node.TooltipDelay',
+    name: 'Tooltip Delay',
+    type: 'number',
+    attrs: {
+      min: 100,
+      max: 3000,
+      step: 50
+    },
+    defaultValue: 500,
+    versionAdded: '1.9.0'
+  },
   {
     id: 'Comfy.EnableTooltips',
     category: ['LiteGraph', 'Node', 'EnableTooltips'],
@@ -654,7 +666,7 @@ export const CORE_SETTINGS: SettingParams[] = [
   },
   {
     id: 'LiteGraph.Canvas.MaximumFps',
-    name: 'Maxium FPS',
+    name: 'Maximum FPS',
     tooltip:
       'The maximum frames per second that the canvas is allowed to render. Caps GPU usage at the cost of smoothness. If 0, the screen refresh rate is used. Default: 0',
     type: 'slider',
@@ -708,5 +720,32 @@ export const CORE_SETTINGS: SettingParams[] = [
     defaultValue: 'after',
     options: ['before', 'after'],
     versionModified: '1.6.10'
+  },
+  {
+    id: 'Comfy.TutorialCompleted',
+    name: 'Tutorial completed',
+    type: 'hidden',
+    defaultValue: false,
+    versionAdded: '1.8.7'
+  },
+  {
+    id: 'LiteGraph.ContextMenu.Scaling',
+    name: 'Scale node combo widget menus (lists) when zoomed in',
+    defaultValue: false,
+    type: 'boolean',
+    versionAdded: '1.8.8'
+  },
+  {
+    id: 'LiteGraph.Canvas.LowQualityRenderingZoomThreshold',
+    name: 'Low quality rendering zoom threshold',
+    tooltip: 'Render low quality shapes when zoomed out',
+    type: 'slider',
+    attrs: {
+      min: 0.1,
+      max: 1,
+      step: 0.01
+    },
+    defaultValue: 0.6,
+    versionAdded: '1.9.1'
   }
 ]

src/constants/desktopMaintenanceTasks.ts

@@ -31,8 +31,10 @@ export const DESKTOP_MAINTENANCE_TASKS: Readonly<MaintenanceTask>[] = [
     execute: () => openUrl('https://git-scm.com/downloads/'),
     name: 'Download git',
     shortDescription: 'Open the git download page.',
+    errorDescription:
+      'Git is missing. Please download and install git, then restart ComfyUI Desktop.',
     description:
-      'Git is required to download and manage custom nodes and other extensions. This fixer simply opens the download page in your browser. You must download and install git manually.',
+      'Git is required to download and manage custom nodes and other extensions. This task opens the download page in your default browser, where you can download the latest version of git. Once you have installed git, please restart ComfyUI Desktop.',
     button: {
       icon: PrimeIcons.EXTERNAL_LINK,
       text: 'Download'

src/constants/uvMirrors.ts

@@ -0,0 +1,34 @@
+export interface UVMirror {
+  /**
+   * The setting id defined for the mirror.
+   */
+  settingId: string
+  /**
+   * The default mirror to use.
+   */
+  mirror: string
+  /**
+   * The fallback mirror to use.
+   */
+  fallbackMirror: string
+  /**
+   * The path suffix to validate the mirror is reachable.
+   */
+  validationPathSuffix?: string
+}
+
+export const PYTHON_MIRROR: UVMirror = {
+  settingId: 'Comfy-Desktop.UV.PythonInstallMirror',
+  mirror:
+    'https://github.com/astral-sh/python-build-standalone/releases/download',
+  fallbackMirror:
+    'https://bgithub.xyz/astral-sh/python-build-standalone/releases/download',
+  validationPathSuffix:
+    '/20250115/cpython-3.10.16+20250115-aarch64-apple-darwin-debug-full.tar.zst.sha256'
+}
+
+export const PYPI_MIRROR: UVMirror = {
+  settingId: 'Comfy-Desktop.UV.PypiInstallMirror',
+  mirror: 'https://pypi.org/simple/',
+  fallbackMirror: 'https://mirrors.tuna.tsinghua.edu.cn/pypi/web/simple'
+}

src/extensions/core/electronAdapter.ts

@@ -1,9 +1,10 @@
+import { PYTHON_MIRROR } from '@/constants/uvMirrors'
 import { t } from '@/i18n'
 import { app } from '@/scripts/app'
 import { useDialogService } from '@/services/dialogService'
-import { useSettingStore } from '@/stores/settingStore'
 import { useWorkflowStore } from '@/stores/workflowStore'
 import { electronAPI as getElectronAPI, isElectron } from '@/utils/envUtil'
+import { checkMirrorReachable } from '@/utils/networkUtil'
 
 ;(async () => {
   if (!isElectron()) return
@@ -55,6 +56,40 @@ import { electronAPI as getElectronAPI, isElectron } from '@/utils/envUtil'
 
           electronAPI.Config.setWindowStyle(newValue)
         }
+      },
+      {
+        id: 'Comfy-Desktop.UV.PythonInstallMirror',
+        name: 'Python Install Mirror',
+        tooltip: `Managed Python installations are downloaded from the Astral python-build-standalone project. This variable can be set to a mirror URL to use a different source for Python installations. The provided URL will replace https://github.com/astral-sh/python-build-standalone/releases/download in, e.g., https://github.com/astral-sh/python-build-standalone/releases/download/20240713/cpython-3.12.4%2B20240713-aarch64-apple-darwin-install_only.tar.gz. Distributions can be read from a local directory by using the file:// URL scheme.`,
+        type: 'url',
+        defaultValue: '',
+        attrs: {
+          validateUrlFn(mirror: string) {
+            return checkMirrorReachable(
+              mirror + PYTHON_MIRROR.validationPathSuffix
+            )
+          }
+        }
+      },
+      {
+        id: 'Comfy-Desktop.UV.PypiInstallMirror',
+        name: 'Pypi Install Mirror',
+        tooltip: `Default pip install mirror`,
+        type: 'url',
+        defaultValue: '',
+        attrs: {
+          validateUrlFn: checkMirrorReachable
+        }
+      },
+      {
+        id: 'Comfy-Desktop.UV.TorchInstallMirror',
+        name: 'Torch Install Mirror',
+        tooltip: `Pip install mirror for pytorch`,
+        type: 'url',
+        defaultValue: '',
+        attrs: {
+          validateUrlFn: checkMirrorReachable
+        }
       }
     ],
 

src/extensions/core/load3d/Load3DConfiguration.ts

@@ -0,0 +1,134 @@
+import type { IWidget } from '@comfyorg/litegraph'
+
+import Load3d from '@/extensions/core/load3d/Load3d'
+import Load3dUtils from '@/extensions/core/load3d/Load3dUtils'
+import { api } from '@/scripts/api'
+
+class Load3DConfiguration {
+  constructor(private load3d: Load3d) {}
+
+  configure(
+    loadFolder: 'input' | 'output',
+    modelWidget: IWidget,
+    material: IWidget,
+    lightIntensity: IWidget,
+    upDirection: IWidget,
+    fov: IWidget,
+    cameraState?: any,
+    postModelUpdateFunc?: (load3d: Load3d) => void
+  ) {
+    this.setupModelHandling(
+      modelWidget,
+      loadFolder,
+      cameraState,
+      postModelUpdateFunc
+    )
+    this.setupMaterial(material)
+    this.setupLighting(lightIntensity)
+    this.setupDirection(upDirection)
+    this.setupCamera(fov)
+    this.setupDefaultProperties()
+  }
+
+  private setupModelHandling(
+    modelWidget: IWidget,
+    loadFolder: 'input' | 'output',
+    cameraState?: any,
+    postModelUpdateFunc?: (load3d: Load3d) => void
+  ) {
+    const onModelWidgetUpdate = this.createModelUpdateHandler(
+      loadFolder,
+      cameraState,
+      postModelUpdateFunc
+    )
+    if (modelWidget.value) {
+      onModelWidgetUpdate(modelWidget.value)
+    }
+    modelWidget.callback = onModelWidgetUpdate
+  }
+
+  private setupMaterial(material: IWidget) {
+    material.callback = (value: 'original' | 'normal' | 'wireframe') => {
+      this.load3d.setMaterialMode(value)
+    }
+    this.load3d.setMaterialMode(
+      material.value as 'original' | 'normal' | 'wireframe'
+    )
+  }
+
+  private setupLighting(lightIntensity: IWidget) {
+    lightIntensity.callback = (value: number) => {
+      this.load3d.setLightIntensity(value)
+    }
+    this.load3d.setLightIntensity(lightIntensity.value as number)
+  }
+
+  private setupDirection(upDirection: IWidget) {
+    upDirection.callback = (
+      value: 'original' | '-x' | '+x' | '-y' | '+y' | '-z' | '+z'
+    ) => {
+      this.load3d.setUpDirection(value)
+    }
+    this.load3d.setUpDirection(
+      upDirection.value as 'original' | '-x' | '+x' | '-y' | '+y' | '-z' | '+z'
+    )
+  }
+
+  private setupCamera(fov: IWidget) {
+    fov.callback = (value: number) => {
+      this.load3d.setFOV(value)
+    }
+    this.load3d.setFOV(fov.value as number)
+  }
+
+  private setupDefaultProperties() {
+    const cameraType = this.load3d.loadNodeProperty(
+      'Camera Type',
+      'perspective'
+    )
+    this.load3d.toggleCamera(cameraType)
+
+    const showGrid = this.load3d.loadNodeProperty('Show Grid', true)
+    this.load3d.toggleGrid(showGrid)
+
+    const bgColor = this.load3d.loadNodeProperty('Background Color', '#282828')
+
+    this.load3d.setBackgroundColor(bgColor)
+  }
+
+  private createModelUpdateHandler(
+    loadFolder: 'input' | 'output',
+    cameraState?: any,
+    postModelUpdateFunc?: (load3d: Load3d) => void
+  ) {
+    let isFirstLoad = true
+    return async (value: string | number | boolean | object) => {
+      if (!value) return
+
+      const filename = value as string
+      const modelUrl = api.apiURL(
+        Load3dUtils.getResourceURL(
+          ...Load3dUtils.splitFilePath(filename),
+          loadFolder
+        )
+      )
+
+      await this.load3d.loadModel(modelUrl, filename)
+
+      if (postModelUpdateFunc) {
+        postModelUpdateFunc(this.load3d)
+      }
+
+      if (isFirstLoad && cameraState && typeof cameraState === 'object') {
+        try {
+          this.load3d.setCameraState(cameraState)
+        } catch (error) {
+          console.warn('Failed to restore camera state:', error)
+        }
+        isFirstLoad = false
+      }
+    }
+  }
+}
+
+export default Load3DConfiguration