1.4.2 (#1580)

* implmentation of new mask editor

* fixed some problems, added some new ones

* Refactor: Split implementation into classes, fix multiple bugs -> all initial features work, more testing required

* first release - fixed all known issues, tested, added color select tool and settings toggle

.env_example

@@ -6,6 +6,11 @@ PLAYWRIGHT_TEST_URL=http://localhost:5173
 # Note: localhost:8188 does not work.
 DEV_SERVER_COMFYUI_URL=http://127.0.0.1:8188
 
+# Allow dev server access from remote IP addresses.
+# If true, the vite dev server will listen on all addresses, including LAN
+# and public addresses.
+VITE_REMOTE_DEV=false
+
 # The target ComfyUI checkout directory to deploy the frontend code to.
 # The dist directory will be copied to {DEPLOY_COMFYUI_DIR}/custom_web_versions/main/dev
 # Add `--front-end-root {DEPLOY_COMFYUI_DIR}/custom_web_versions/main/dev`

.husky/pre-commit

@@ -1,5 +1,7 @@
 if [[ "$OS" == "Windows_NT" ]]; then
   npx.cmd lint-staged
+  npm.cmd run typecheck
 else
   npx lint-staged
+  npm run typecheck
 fi

README.md

@@ -431,6 +431,8 @@ core extensions will be loaded.
 
 #### Access dev server on touch devices
 
+Enable remote access to the dev server by setting `VITE_REMOTE_DEV` in `.env` to `true`.
+
 After you start the dev server, you should see following logs:
 
 ```

browser_tests/fixtures/ComfyPage.ts

@@ -204,13 +204,15 @@ export class ComfyPage {
     }
   }
 
-  async setup() {
+  async setup({ clearStorage = true }: { clearStorage?: boolean } = {}) {
     await this.goto()
-    await this.page.evaluate((id) => {
-      localStorage.clear()
-      sessionStorage.clear()
-      localStorage.setItem('Comfy.userId', id)
-    }, this.id)
+    if (clearStorage) {
+      await this.page.evaluate((id) => {
+        localStorage.clear()
+        sessionStorage.clear()
+        localStorage.setItem('Comfy.userId', id)
+      }, this.id)
+    }
     await this.goto()
 
     // Unify font for consistent screenshots.
@@ -314,9 +316,9 @@ export class ComfyPage {
     }, settingId)
   }
 
-  async reload() {
+  async reload({ clearStorage = true }: { clearStorage?: boolean } = {}) {
     await this.page.reload({ timeout: 15000 })
-    await this.setup()
+    await this.setup({ clearStorage })
   }
 
   async goto() {

browser_tests/fixtures/components/ComfyNodeSearchBox.ts

@@ -43,7 +43,7 @@ export class ComfyNodeSearchBox {
   }
 
   get filterButton() {
-    return this.page.locator('.comfy-vue-node-search-container ._filter-button')
+    return this.page.locator('.comfy-vue-node-search-container .filter-button')
   }
 
   async fillAndSelectFirstNode(

browser_tests/groupNode.spec.ts

@@ -77,8 +77,13 @@ test.describe('Group Node', () => {
         .click()
     })
   })
-
-  test('Can be added to canvas using search', async ({ comfyPage }) => {
+  // The 500ms fixed delay on the search results is causing flakiness
+  // Potential solution: add a spinner state when the search is in progress,
+  // and observe that state from the test. Blocker: the PrimeVue AutoComplete
+  // does not have a v-model on the query, so we cannot observe the raw
+  // query update, and thus cannot set the spinning state between the raw query
+  // update and the debounced search update.
+  test.skip('Can be added to canvas using search', async ({ comfyPage }) => {
     const groupNodeName = 'DefautWorkflowGroupNode'
     await comfyPage.convertAllNodesToGroupNode(groupNodeName)
     await comfyPage.doubleClickCanvas()

browser_tests/interaction.spec.ts

@@ -537,6 +537,34 @@ test.describe('Load workflow', () => {
     await comfyPage.loadWorkflow('string_input')
     await expect(comfyPage.canvas).toHaveScreenshot('string_input.png')
   })
+
+  test('Restore workflow on reload (switch workflow)', async ({
+    comfyPage
+  }) => {
+    await comfyPage.loadWorkflow('single_ksampler')
+    await expect(comfyPage.canvas).toHaveScreenshot('single_ksampler.png')
+    await comfyPage.reload({ clearStorage: false })
+    await expect(comfyPage.canvas).toHaveScreenshot('single_ksampler.png')
+  })
+
+  test('Restore workflow on reload (modify workflow)', async ({
+    comfyPage
+  }) => {
+    await comfyPage.loadWorkflow('single_ksampler')
+    const node = (await comfyPage.getFirstNodeRef())!
+    await node.click('collapse')
+    // Wait 300ms between 2 clicks so that it is not treated as a double click
+    // by litegraph.
+    await comfyPage.page.waitForTimeout(300)
+    await comfyPage.clickEmptySpace()
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'single_ksampler_modified.png'
+    )
+    await comfyPage.reload({ clearStorage: false })
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'single_ksampler_modified.png'
+    )
+  })
 })
 
 test.describe('Load duplicate workflow', () => {

jest.config.base.ts

@@ -14,6 +14,7 @@ const jestConfig: JestConfigWithTsJest = {
       }
     ]
   },
+  transformIgnorePatterns: ['/node_modules/(?!(three|@three)/)'],
   moduleNameMapper: {
     '^@/(.*)$': '<rootDir>/src/$1',
     '\\.(css|less|scss|sass)$': 'identity-obj-proxy'

package-lock.json

@@ -1,16 +1,16 @@
 {
   "name": "comfyui-frontend",
-  "version": "1.3.43",
+  "version": "1.4.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "comfyui-frontend",
-      "version": "1.3.43",
+      "version": "1.4.2",
       "dependencies": {
         "@atlaskit/pragmatic-drag-and-drop": "^1.3.1",
         "@comfyorg/comfyui-electron-types": "^0.2.16",
-        "@comfyorg/litegraph": "^0.8.26",
+        "@comfyorg/litegraph": "^0.8.27",
         "@primevue/themes": "^4.0.5",
         "@vueuse/core": "^11.0.0",
         "@xterm/addon-fit": "^0.10.0",
@@ -24,6 +24,7 @@
         "pinia": "^2.1.7",
         "primeicons": "^7.0.0",
         "primevue": "^4.0.5",
+        "three": "^0.170.0",
         "vue": "^3.4.31",
         "vue-i18n": "^9.13.1",
         "vue-router": "^4.4.3",
@@ -40,6 +41,7 @@
         "@types/jest": "^29.5.12",
         "@types/lodash": "^4.17.6",
         "@types/node": "^20.14.8",
+        "@types/three": "^0.169.0",
         "@vitejs/plugin-vue": "^5.1.4",
         "@vue/test-utils": "^2.4.6",
         "@vue/vue3-jest": "^29.2.6",
@@ -63,7 +65,6 @@
         "tailwindcss": "^3.4.4",
         "ts-jest": "^29.1.4",
         "ts-node": "^10.9.2",
-        "tsc-files": "^1.1.4",
         "tsx": "^4.15.6",
         "typescript": "^5.4.5",
         "typescript-eslint": "^8.0.0",
@@ -1922,9 +1923,9 @@
       "license": "GPL-3.0-only"
     },
     "node_modules/@comfyorg/litegraph": {
-      "version": "0.8.26",
-      "resolved": "https://registry.npmjs.org/@comfyorg/litegraph/-/litegraph-0.8.26.tgz",
-      "integrity": "sha512-q0Vcd5usphR5nghfyFksVx+VM+eSB1MyX8Ne304KFDnr214KQMA6DAjrEQJlGBUUCybLiOtPCvd3dxPecEQiSQ==",
+      "version": "0.8.27",
+      "resolved": "https://registry.npmjs.org/@comfyorg/litegraph/-/litegraph-0.8.27.tgz",
+      "integrity": "sha512-EMQ3jsny+3gUQL4+vSVwJAFxrLq4IpuyjCvAiErLY4wLZZu2Mi+7cELmhrNS0MajhZqfN1M0GPmdcBRwSWbarw==",
       "license": "MIT"
     },
     "node_modules/@cspotcode/source-map-support": {
@@ -3850,6 +3851,13 @@
       "integrity": "sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==",
       "dev": true
     },
+    "node_modules/@tweenjs/tween.js": {
+      "version": "23.1.3",
+      "resolved": "https://registry.npmjs.org/@tweenjs/tween.js/-/tween.js-23.1.3.tgz",
+      "integrity": "sha512-vJmvvwFxYuGnF2axRtPYocag6Clbb5YS7kLL+SO/TeVFzHqDIWrNKYtcsPMibjDx9O+bu+psAy9NKfWklassUA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@@ -3985,6 +3993,13 @@
       "integrity": "sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==",
       "dev": true
     },
+    "node_modules/@types/stats.js": {
+      "version": "0.17.3",
+      "resolved": "https://registry.npmjs.org/@types/stats.js/-/stats.js-0.17.3.tgz",
+      "integrity": "sha512-pXNfAD3KHOdif9EQXZ9deK82HVNaXP5ZIF5RP2QG6OQFNTaY2YIetfrE9t528vEreGQvEPRDDc8muaoYeK0SxQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/strip-bom": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/@types/strip-bom/-/strip-bom-3.0.0.tgz",
@@ -3999,6 +4014,21 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/three": {
+      "version": "0.169.0",
+      "resolved": "https://registry.npmjs.org/@types/three/-/three-0.169.0.tgz",
+      "integrity": "sha512-oan7qCgJBt03wIaK+4xPWclYRPG9wzcg7Z2f5T8xYTNEF95kh0t0lklxLLYBDo7gQiGLYzE6iF4ta7nXF2bcsw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@tweenjs/tween.js": "~23.1.3",
+        "@types/stats.js": "*",
+        "@types/webxr": "*",
+        "@webgpu/types": "*",
+        "fflate": "~0.8.2",
+        "meshoptimizer": "~0.18.1"
+      }
+    },
     "node_modules/@types/tough-cookie": {
       "version": "4.0.5",
       "resolved": "https://registry.npmjs.org/@types/tough-cookie/-/tough-cookie-4.0.5.tgz",
@@ -4011,6 +4041,13 @@
       "integrity": "sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==",
       "license": "MIT"
     },
+    "node_modules/@types/webxr": {
+      "version": "0.5.20",
+      "resolved": "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.20.tgz",
+      "integrity": "sha512-JGpU6qiIJQKUuVSKx1GtQnHJGxRjtfGIhzO2ilq43VZZS//f1h1Sgexbdk+Lq+7569a6EYhOWrUpIruR/1Enmg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/yargs": {
       "version": "17.0.32",
       "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.32.tgz",
@@ -4636,6 +4673,13 @@
         }
       }
     },
+    "node_modules/@webgpu/types": {
+      "version": "0.1.51",
+      "resolved": "https://registry.npmjs.org/@webgpu/types/-/types-0.1.51.tgz",
+      "integrity": "sha512-ktR3u64NPjwIViNCck+z9QeyN0iPkQCUOQ07ZCV1RzlkfP+olLTeEZ95O1QHS+v4w9vJeY9xj/uJuSphsHy5rQ==",
+      "dev": true,
+      "license": "BSD-3-Clause"
+    },
     "node_modules/@xterm/addon-fit": {
       "version": "0.10.0",
       "resolved": "https://registry.npmjs.org/@xterm/addon-fit/-/addon-fit-0.10.0.tgz",
@@ -6778,6 +6822,13 @@
         "bser": "2.1.1"
       }
     },
+    "node_modules/fflate": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz",
+      "integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/file-entry-cache": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
@@ -10067,6 +10118,13 @@
         "node": ">= 8"
       }
     },
+    "node_modules/meshoptimizer": {
+      "version": "0.18.1",
+      "resolved": "https://registry.npmjs.org/meshoptimizer/-/meshoptimizer-0.18.1.tgz",
+      "integrity": "sha512-ZhoIoL7TNV4s5B6+rx5mC//fw8/POGyNxS/DZyCJeiZ12ScLfVwRE/GfsxwiTkMYYD5DmK2/JXnEVXqL4rF+Sw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/micromatch": {
       "version": "4.0.7",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.7.tgz",
@@ -11952,6 +12010,12 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/three": {
+      "version": "0.170.0",
+      "resolved": "https://registry.npmjs.org/three/-/three-0.170.0.tgz",
+      "integrity": "sha512-FQK+LEpYc0fBD+J8g6oSEyyNzjp+Q7Ks1C568WWaoMRLW+TkNNWmenWeGgJjV105Gd+p/2ql1ZcjYvNiPZBhuQ==",
+      "license": "MIT"
+    },
     "node_modules/tinybench": {
       "version": "2.9.0",
       "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz",
@@ -12170,19 +12234,6 @@
         }
       }
     },
-    "node_modules/tsc-files": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/tsc-files/-/tsc-files-1.1.4.tgz",
-      "integrity": "sha512-RePsRsOLru3BPpnf237y1Xe1oCGta8rmSYzM76kYo5tLGsv5R2r3s64yapYorGTPuuLyfS9NVbh9ydzmvNie2w==",
-      "dev": true,
-      "license": "MIT",
-      "bin": {
-        "tsc-files": "cli.js"
-      },
-      "peerDependencies": {
-        "typescript": ">=3"
-      }
-    },
     "node_modules/tsconfig": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/tsconfig/-/tsconfig-7.0.0.tgz",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "comfyui-frontend",
   "private": true,
-  "version": "1.3.43",
+  "version": "1.4.2",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -35,6 +35,7 @@
     "@types/jest": "^29.5.12",
     "@types/lodash": "^4.17.6",
     "@types/node": "^20.14.8",
+    "@types/three": "^0.169.0",
     "@vitejs/plugin-vue": "^5.1.4",
     "@vue/test-utils": "^2.4.6",
     "@vue/vue3-jest": "^29.2.6",
@@ -58,7 +59,6 @@
     "tailwindcss": "^3.4.4",
     "ts-jest": "^29.1.4",
     "ts-node": "^10.9.2",
-    "tsc-files": "^1.1.4",
     "tsx": "^4.15.6",
     "typescript": "^5.4.5",
     "typescript-eslint": "^8.0.0",
@@ -73,7 +73,7 @@
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^1.3.1",
     "@comfyorg/comfyui-electron-types": "^0.2.16",
-    "@comfyorg/litegraph": "^0.8.26",
+    "@comfyorg/litegraph": "^0.8.27",
     "@primevue/themes": "^4.0.5",
     "@vueuse/core": "^11.0.0",
     "@xterm/addon-fit": "^0.10.0",
@@ -87,6 +87,7 @@
     "pinia": "^2.1.7",
     "primeicons": "^7.0.0",
     "primevue": "^4.0.5",
+    "three": "^0.170.0",
     "vue": "^3.4.31",
     "vue-i18n": "^9.13.1",
     "vue-router": "^4.4.3",
@@ -94,7 +95,8 @@
     "zod-validation-error": "^3.3.0"
   },
   "lint-staged": {
-    "./**/*.{js,ts,tsx,vue}": "prettier --write",
-    "**/*.ts": "tsc-files --noEmit"
+    "./**/*.{js,ts,tsx,vue}": [
+      "prettier --write"
+    ]
   }
 }

src/components/actionbar/ComfyActionbar.vue

@@ -125,30 +125,45 @@ const adjustMenuPosition = () => {
     const menuWidth = panelRef.value.offsetWidth
     const menuHeight = panelRef.value.offsetHeight
 
-    // Calculate the distance from each edge
+    // Calculate distances to all edges
+    const distanceLeft = lastDragState.value.x
     const distanceRight =
       lastDragState.value.windowWidth - (lastDragState.value.x + menuWidth)
+    const distanceTop = lastDragState.value.y
     const distanceBottom =
       lastDragState.value.windowHeight - (lastDragState.value.y + menuHeight)
 
-    // Determine if the menu is closer to right/bottom or left/top
-    const anchorRight = distanceRight < lastDragState.value.x
-    const anchorBottom = distanceBottom < lastDragState.value.y
+    // Find the smallest distance to determine which edge to anchor to
+    const distances = [
+      { edge: 'left', distance: distanceLeft },
+      { edge: 'right', distance: distanceRight },
+      { edge: 'top', distance: distanceTop },
+      { edge: 'bottom', distance: distanceBottom }
+    ]
+    const closestEdge = distances.reduce((min, curr) =>
+      curr.distance < min.distance ? curr : min
+    )
 
-    // Calculate new position
-    if (anchorRight) {
-      x.value =
-        screenWidth - (lastDragState.value.windowWidth - lastDragState.value.x)
-    } else {
-      x.value = lastDragState.value.x
-    }
+    // Calculate vertical position as a percentage of screen height
+    const verticalRatio =
+      lastDragState.value.y / lastDragState.value.windowHeight
+    const horizontalRatio =
+      lastDragState.value.x / lastDragState.value.windowWidth
 
-    if (anchorBottom) {
-      y.value =
-        screenHeight -
-        (lastDragState.value.windowHeight - lastDragState.value.y)
+    // Apply positioning based on closest edge
+    if (closestEdge.edge === 'left') {
+      x.value = closestEdge.distance // Maintain exact distance from left
+      y.value = verticalRatio * screenHeight
+    } else if (closestEdge.edge === 'right') {
+      x.value = screenWidth - menuWidth - closestEdge.distance // Maintain exact distance from right
+      y.value = verticalRatio * screenHeight
+    } else if (closestEdge.edge === 'top') {
+      x.value = horizontalRatio * screenWidth
+      y.value = closestEdge.distance // Maintain exact distance from top
     } else {
-      y.value = lastDragState.value.y
+      // bottom
+      x.value = horizontalRatio * screenWidth
+      y.value = screenHeight - menuHeight - closestEdge.distance // Maintain exact distance from bottom
     }
 
     // Ensure the menu stays within the screen bounds

src/components/bottomPanel/tabs/IntegratedTerminal.vue

@@ -1,104 +0,0 @@
-<template>
-  <div class="relative h-full w-full bg-black">
-    <p v-if="errorMessage" class="p-4 text-center">{{ errorMessage }}</p>
-    <ProgressSpinner
-      v-else-if="loading"
-      class="absolute inset-0 flex justify-center items-center h-full z-10"
-    />
-    <div v-show="!loading" class="p-terminal rounded-none h-full w-full p-2">
-      <div class="h-full" ref="terminalEl"></div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import '@xterm/xterm/css/xterm.css'
-import { Terminal } from '@xterm/xterm'
-import { FitAddon } from '@xterm/addon-fit'
-import { api } from '@/scripts/api'
-import { onMounted, onUnmounted, ref } from 'vue'
-import { debounce } from 'lodash'
-import ProgressSpinner from 'primevue/progressspinner'
-import { useExecutionStore } from '@/stores/executionStore'
-import { storeToRefs } from 'pinia'
-import { until } from '@vueuse/core'
-import { LogEntry, LogsWsMessage, TerminalSize } from '@/types/apiTypes'
-
-const errorMessage = ref('')
-const loading = ref(true)
-const terminalEl = ref<HTMLDivElement>()
-const fitAddon = new FitAddon()
-const terminal = new Terminal({
-  convertEol: true
-})
-terminal.loadAddon(fitAddon)
-
-const resizeTerminal = () =>
-  terminal.resize(terminal.cols, fitAddon.proposeDimensions().rows)
-
-const resizeObserver = new ResizeObserver(debounce(resizeTerminal, 50))
-
-const update = (entries: Array<LogEntry>, size?: TerminalSize) => {
-  if (size) {
-    terminal.resize(size.cols, fitAddon.proposeDimensions().rows)
-  }
-  terminal.write(entries.map((e) => e.m).join(''))
-}
-
-const logReceived = (e: CustomEvent<LogsWsMessage>) => {
-  update(e.detail.entries, e.detail.size)
-}
-
-const loadLogEntries = async () => {
-  const logs = await api.getRawLogs()
-  update(logs.entries, logs.size)
-}
-
-const watchLogs = async () => {
-  const { clientId } = storeToRefs(useExecutionStore())
-  if (!clientId.value) {
-    await until(clientId).not.toBeNull()
-  }
-  api.subscribeLogs(true)
-  api.addEventListener('logs', logReceived)
-}
-
-onMounted(async () => {
-  terminal.open(terminalEl.value)
-
-  try {
-    await loadLogEntries()
-  } catch (err) {
-    console.error('Error loading logs', err)
-    // On older backends the endpoints wont exist
-    errorMessage.value =
-      'Unable to load logs, please ensure you have updated your ComfyUI backend.'
-    return
-  }
-
-  loading.value = false
-  resizeObserver.observe(terminalEl.value)
-
-  await watchLogs()
-})
-
-onUnmounted(() => {
-  if (api.clientId) {
-    api.subscribeLogs(false)
-  }
-  api.removeEventListener('logs', logReceived)
-
-  resizeObserver.disconnect()
-})
-</script>
-
-<style scoped>
-:deep(.p-terminal) .xterm {
-  overflow-x: auto;
-}
-
-:deep(.p-terminal) .xterm-screen {
-  background-color: black;
-  overflow-y: hidden;
-}
-</style>

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

@@ -0,0 +1,30 @@
+<template>
+  <div class="relative h-full w-full bg-black" ref="rootEl">
+    <div class="p-terminal rounded-none h-full w-full p-2">
+      <div class="h-full terminal-host" ref="terminalEl"></div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, defineEmits, Ref } from 'vue'
+import { useTerminal } from '@/hooks/bottomPanelTabs/useTerminal'
+
+const emit = defineEmits<{
+  created: [ReturnType<typeof useTerminal>, Ref<HTMLElement>]
+}>()
+const terminalEl = ref<HTMLElement>()
+const rootEl = ref<HTMLElement>()
+emit('created', useTerminal(terminalEl), rootEl)
+</script>
+
+<style scoped>
+:deep(.p-terminal) .xterm {
+  overflow-x: auto;
+}
+
+:deep(.p-terminal) .xterm-screen {
+  background-color: black;
+  overflow-y: hidden;
+}
+</style>

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

@@ -0,0 +1,73 @@
+<template>
+  <BaseTerminal @created="terminalCreated" />
+</template>
+
+<script setup lang="ts">
+import { onMounted, onUnmounted, Ref } from 'vue'
+import type { useTerminal } from '@/hooks/bottomPanelTabs/useTerminal'
+import { electronAPI } from '@/utils/envUtil'
+import { IDisposable } from '@xterm/xterm'
+import BaseTerminal from './BaseTerminal.vue'
+
+const terminalCreated = (
+  { terminal, useAutoSize }: ReturnType<typeof useTerminal>,
+  root: Ref<HTMLElement>
+) => {
+  // TODO: use types from electron package
+  const terminalApi = electronAPI()['Terminal'] as {
+    onOutput(cb: (message: string) => void): () => void
+    resize(cols: number, rows: number): void
+    restore(): Promise<{
+      buffer: string[]
+      pos: { x: number; y: number }
+      size: { cols: number; rows: number }
+    }>
+    storePos(x: number, y: number): void
+    write(data: string): void
+  }
+
+  let offData: IDisposable
+  let offOutput: () => void
+
+  useAutoSize(root, true, true, () => {
+    // If we aren't visible, don't resize
+    if (!terminal.element?.offsetParent) return
+
+    terminalApi.resize(terminal.cols, terminal.rows)
+  })
+
+  onMounted(async () => {
+    offData = terminal.onData(async (message: string) => {
+      terminalApi.write(message)
+    })
+
+    offOutput = terminalApi.onOutput((message) => {
+      terminal.write(message)
+    })
+
+    const restore = await terminalApi.restore()
+    setTimeout(() => {
+      if (restore.buffer.length) {
+        terminal.resize(restore.size.cols, restore.size.rows)
+        terminal.write(restore.buffer.join(''))
+      }
+    }, 500)
+  })
+
+  onUnmounted(() => {
+    offData?.dispose()
+    offOutput?.()
+  })
+}
+</script>
+
+<style scoped>
+:deep(.p-terminal) .xterm {
+  overflow-x: auto;
+}
+
+:deep(.p-terminal) .xterm-screen {
+  background-color: black;
+  overflow-y: hidden;
+}
+</style>

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

@@ -0,0 +1,90 @@
+<template>
+  <div class="bg-black h-full w-full">
+    <p v-if="errorMessage" class="p-4 text-center">{{ errorMessage }}</p>
+    <ProgressSpinner
+      v-else-if="loading"
+      class="relative inset-0 flex justify-center items-center h-full z-10"
+    />
+    <BaseTerminal v-show="!loading" @created="terminalCreated" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, onUnmounted, Ref, ref } from 'vue'
+import type { useTerminal } from '@/hooks/bottomPanelTabs/useTerminal'
+import { LogEntry, LogsWsMessage, TerminalSize } from '@/types/apiTypes'
+import { api } from '@/scripts/api'
+import { useExecutionStore } from '@/stores/executionStore'
+import { until } from '@vueuse/core'
+import { storeToRefs } from 'pinia'
+import BaseTerminal from './BaseTerminal.vue'
+import ProgressSpinner from 'primevue/progressspinner'
+
+const errorMessage = ref('')
+const loading = ref(true)
+
+const terminalCreated = (
+  { terminal, useAutoSize }: ReturnType<typeof useTerminal>,
+  root: Ref<HTMLElement>
+) => {
+  useAutoSize(root, true, false)
+
+  const update = (entries: Array<LogEntry>, size?: TerminalSize) => {
+    if (size) {
+      terminal.resize(size.cols, terminal.rows)
+    }
+    terminal.write(entries.map((e) => e.m).join(''))
+  }
+
+  const logReceived = (e: CustomEvent<LogsWsMessage>) => {
+    update(e.detail.entries, e.detail.size)
+  }
+
+  const loadLogEntries = async () => {
+    const logs = await api.getRawLogs()
+    update(logs.entries, logs.size)
+  }
+
+  const watchLogs = async () => {
+    const { clientId } = storeToRefs(useExecutionStore())
+    if (!clientId.value) {
+      await until(clientId).not.toBeNull()
+    }
+    api.subscribeLogs(true)
+    api.addEventListener('logs', logReceived)
+  }
+
+  onMounted(async () => {
+    try {
+      await loadLogEntries()
+    } catch (err) {
+      console.error('Error loading logs', err)
+      // On older backends the endpoints wont exist
+      errorMessage.value =
+        'Unable to load logs, please ensure you have updated your ComfyUI backend.'
+      return
+    }
+
+    await watchLogs()
+    loading.value = false
+  })
+
+  onUnmounted(() => {
+    if (api.clientId) {
+      api.subscribeLogs(false)
+    }
+    api.removeEventListener('logs', logReceived)
+  })
+}
+</script>
+
+<style scoped>
+:deep(.p-terminal) .xterm {
+  overflow-x: auto;
+}
+
+:deep(.p-terminal) .xterm-screen {
+  background-color: black;
+  overflow-y: hidden;
+}
+</style>

src/components/common/ElectronFileDownload.vue

@@ -28,7 +28,14 @@
       class="flex flex-row items-center gap-2"
       v-if="status === 'in_progress' || status === 'paused'"
     >
-      <ProgressBar class="flex-1" :value="downloadProgress" />
+      <!-- Temporary fix for issue when % only comes into view only if the progress bar is large enough
+           https://comfy-organization.slack.com/archives/C07H3GLKDPF/p1731551013385499     
+      -->
+      <ProgressBar
+        class="flex-1"
+        :value="downloadProgress"
+        :show-value="downloadProgress > 10"
+      />
 
       <Button
         class="file-action-button"

src/components/common/InputSlider.vue

@@ -13,6 +13,7 @@
       :modelValue="modelValue"
       @update:modelValue="updateValue"
       class="input-part"
+      :max-fraction-digits="3"
       :class="inputClass"
       :min="min"
       :max="max"

src/components/common/TreeExplorer.vue

@@ -1,6 +1,6 @@
 <template>
   <Tree
-    class="tree-explorer p-2 2xl:p-4"
+    class="tree-explorer py-0 px-2 2xl:px-4"
     :class="props.class"
     v-model:expandedKeys="expandedKeys"
     v-model:selectionKeys="selectionKeys"

src/components/graph/GraphCanvas.vue

@@ -61,6 +61,7 @@ import { usePragmaticDroppable } from '@/hooks/dndHooks'
 import { useWorkflowStore } from '@/stores/workflowStore'
 import { setStorageValue } from '@/scripts/utils'
 import { ChangeTracker } from '@/scripts/changeTracker'
+import { api } from '@/scripts/api'
 
 const emit = defineEmits(['ready'])
 const canvasRef = ref<HTMLCanvasElement | null>(null)
@@ -178,13 +179,26 @@ watchEffect(() => {
 })
 
 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(() => {
   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
@@ -262,6 +276,7 @@ onMounted(async () => {
   ChangeTracker.init(comfyApp)
   await comfyApp.setup(canvasRef.value)
   canvasStore.canvas = comfyApp.canvas
+  canvasStore.canvas.render_canvas_border = false
   workspaceStore.spinner = false
 
   window['app'] = comfyApp

src/components/install/InstallLocationPicker.vue

@@ -87,10 +87,10 @@ onMounted(async () => {
   installPath.value = paths.defaultInstallPath
 })
 
-const validatePath = async () => {
+const validatePath = async (path: string) => {
   try {
     pathError.value = ''
-    const validation = await electron.validateInstallPath(installPath.value)
+    const validation = await electron.validateInstallPath(path)
 
     if (!validation.isValid) {
       pathError.value = validation.error
@@ -105,7 +105,7 @@ const browsePath = async () => {
     const result = await electron.showDirectoryPicker()
     if (result) {
       installPath.value = result
-      await validatePath()
+      await validatePath(result)
     }
   } catch (error) {
     pathError.value = t('install.failedToSelectDirectory')

src/components/searchbox/NodeSearchBox.vue

@@ -1,6 +1,11 @@
 <template>
-  <div class="comfy-vue-node-search-container">
-    <div class="comfy-vue-node-preview-container" v-if="enableNodePreview">
+  <div
+    class="comfy-vue-node-search-container flex justify-center items-center w-full min-w-96 pointer-events-auto"
+  >
+    <div
+      class="comfy-vue-node-preview-container absolute left-[-350px] top-[50px]"
+      v-if="enableNodePreview"
+    >
       <NodePreview
         :nodeDef="hoveredSuggestion"
         :key="hoveredSuggestion?.name || ''"
@@ -11,10 +16,10 @@
     <Button
       icon="pi pi-filter"
       severity="secondary"
-      class="_filter-button"
+      class="filter-button z-10"
       @click="nodeSearchFilterVisible = true"
     />
-    <Dialog v-model:visible="nodeSearchFilterVisible" class="_dialog">
+    <Dialog v-model:visible="nodeSearchFilterVisible" class="min-w-96">
       <template #header>
         <h3>Add node filter condition</h3>
       </template>
@@ -25,7 +30,7 @@
 
     <AutoCompletePlus
       :model-value="props.filters"
-      class="comfy-vue-node-search-box"
+      class="comfy-vue-node-search-box z-10 flex-grow"
       scrollHeight="40vh"
       :placeholder="placeholder"
       :input-id="inputId"
@@ -148,31 +153,3 @@ const setHoverSuggestion = (index: number) => {
   hoveredSuggestion.value = value
 }
 </script>
-
-<style scoped>
-.comfy-vue-node-search-container {
-  @apply flex justify-center items-center w-full min-w-96;
-}
-
-.comfy-vue-node-search-container * {
-  pointer-events: auto;
-}
-
-.comfy-vue-node-preview-container {
-  position: absolute;
-  left: -350px;
-  top: 50px;
-}
-
-.comfy-vue-node-search-box {
-  @apply z-10 flex-grow;
-}
-
-._filter-button {
-  z-index: 10;
-}
-
-._dialog {
-  @apply min-w-96;
-}
-</style>

src/components/sidebar/tabs/ModelLibrarySidebarTab.vue

@@ -31,7 +31,7 @@
       <ElectronDownloadItems v-if="isElectron()" />
 
       <TreeExplorer
-        class="model-lib-tree-explorer py-0"
+        class="model-lib-tree-explorer"
         :roots="renderedRoot.children"
         v-model:expandedKeys="expandedKeys"
       >

src/components/sidebar/tabs/NodeLibrarySidebarTab.vue

@@ -48,7 +48,7 @@
         class="m-2"
       />
       <TreeExplorer
-        class="node-lib-tree-explorer py-0"
+        class="node-lib-tree-explorer"
         :roots="renderedRoot.children"
         v-model:expandedKeys="expandedKeys"
       >

src/components/sidebar/tabs/modelLibrary/DownloadItem.vue

@@ -16,9 +16,13 @@
       class="mt-2 flex flex-row items-center gap-2"
       v-if="['in_progress', 'paused', 'completed'].includes(download.status)"
     >
+      <!-- Temporary fix for issue when % only comes into view only if the progress bar is large enough
+           https://comfy-organization.slack.com/archives/C07H3GLKDPF/p1731551013385499     
+      -->
       <ProgressBar
         class="flex-1"
         :value="Number((download.progress * 100).toFixed(1))"
+        :show-value="download.progress > 0.1"
       />
 
       <Button

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

@@ -1,6 +1,6 @@
 <template>
   <TreeExplorer
-    class="node-lib-bookmark-tree-explorer py-0"
+    class="node-lib-bookmark-tree-explorer"
     ref="treeExplorerRef"
     :roots="renderedBookmarkedRoot.children"
     :expandedKeys="expandedKeys"

src/extensions/core/colorPalette.ts

@@ -733,7 +733,7 @@ app.registerExtension({
 
     app.ui.settings.addSetting({
       id,
-      category: ['Comfy', 'ColorPalette'],
+      category: ['Appearance', 'ColorPalette'],
       name: 'Color Palette',
       type: (name, setter, value) => {
         const options = [

src/extensions/core/electronAdapter.ts

@@ -0,0 +1,138 @@
+import { app } from '@/scripts/app'
+import { electronAPI as getElectronAPI, isElectron } from '@/utils/envUtil'
+;(async () => {
+  if (!isElectron()) return
+
+  const electronAPI = getElectronAPI()
+  const desktopAppVersion = await electronAPI.getElectronVersion()
+  app.registerExtension({
+    name: 'Comfy.ElectronAdapter',
+    settings: [
+      {
+        id: 'Comfy-Desktop.AutoUpdate',
+        category: ['Comfy-Desktop', 'General', 'AutoUpdate'],
+        name: 'Automatically check for updates',
+        type: 'boolean',
+        defaultValue: true,
+        onChange(newValue, oldValue) {
+          if (oldValue !== undefined && newValue !== oldValue) {
+            electronAPI.restartApp(
+              'Restart ComfyUI to apply changes.',
+              1500 // add delay to allow changes to take effect before restarting.
+            )
+          }
+        }
+      }
+    ],
+
+    commands: [
+      {
+        id: 'Comfy-Desktop.Folders.OpenLogsFolder',
+        label: 'Open Logs Folder',
+        icon: 'pi pi-folder-open',
+        function() {
+          electronAPI.openLogsFolder()
+        }
+      },
+      {
+        id: 'Comfy-Desktop.Folders.OpenModelsFolder',
+        label: 'Open Models Folder',
+        icon: 'pi pi-folder-open',
+        function() {
+          electronAPI.openModelsFolder()
+        }
+      },
+      {
+        id: 'Comfy-Desktop.Folders.OpenOutputsFolder',
+        label: 'Open Outputs Folder',
+        icon: 'pi pi-folder-open',
+        function() {
+          electronAPI.openOutputsFolder()
+        }
+      },
+      {
+        id: 'Comfy-Desktop.Folders.OpenInputsFolder',
+        label: 'Open Inputs Folder',
+        icon: 'pi pi-folder-open',
+        function() {
+          electronAPI.openInputsFolder()
+        }
+      },
+      {
+        id: 'Comfy-Desktop.Folders.OpenCustomNodesFolder',
+        label: 'Open Custom Nodes Folder',
+        icon: 'pi pi-folder-open',
+        function() {
+          electronAPI.openCustomNodesFolder()
+        }
+      },
+      {
+        id: 'Comfy-Desktop.Folders.OpenModelConfig',
+        label: 'Open extra_model_paths.yaml',
+        icon: 'pi pi-file',
+        function() {
+          electronAPI.openModelConfig()
+        }
+      },
+      {
+        id: 'Comfy-Desktop.OpenDevTools',
+        label: 'Open DevTools',
+        icon: 'pi pi-code',
+        function() {
+          electronAPI.openDevTools()
+        }
+      },
+      {
+        id: 'Comfy-Desktop.OpenFeedbackPage',
+        label: 'Feedback',
+        icon: 'pi pi-envelope',
+        function() {
+          window.open('https://forum.comfy.org/c/v1-feedback/', '_blank')
+        }
+      },
+      {
+        id: 'Comfy-Desktop.Reinstall',
+        label: 'Reinstall',
+        icon: 'pi pi-refresh',
+        function() {
+          // TODO(huchenlei): Add a confirmation dialog.
+          electronAPI.reinstall()
+        }
+      }
+    ],
+
+    menuCommands: [
+      {
+        path: ['Help'],
+        commands: ['Comfy-Desktop.OpenFeedbackPage']
+      },
+      {
+        path: ['Help'],
+        commands: ['Comfy-Desktop.OpenDevTools']
+      },
+      {
+        path: ['Help', 'Open Folder'],
+        commands: [
+          'Comfy-Desktop.Folders.OpenLogsFolder',
+          'Comfy-Desktop.Folders.OpenModelsFolder',
+          'Comfy-Desktop.Folders.OpenOutputsFolder',
+          'Comfy-Desktop.Folders.OpenInputsFolder',
+          'Comfy-Desktop.Folders.OpenCustomNodesFolder',
+          'Comfy-Desktop.Folders.OpenModelConfig'
+        ]
+      },
+      {
+        path: ['Help'],
+        commands: ['Comfy-Desktop.Reinstall']
+      }
+    ],
+
+    aboutPageBadges: [
+      {
+        label: 'ComfyUI_Desktop ' + desktopAppVersion,
+        url: 'https://github.com/Comfy-Org/electron',
+        icon: 'pi pi-github'
+      }
+    ]
+  })
+})()

src/extensions/core/groupNode.ts

@@ -13,6 +13,7 @@ import {
   deserialiseAndCreate,
   serialise
 } from '@/extensions/core/vintageClipboard'
+import type { ComfyNodeDef } from '@/types/apiTypes'
 
 type GroupNodeWorkflowData = {
   external: ComfyLink[]
@@ -56,7 +57,7 @@ const Workflow = {
 
 class GroupNodeBuilder {
   nodes: LGraphNode[]
-  nodeData: any
+  nodeData: GroupNodeWorkflowData
 
   constructor(nodes: LGraphNode[]) {
     this.nodes = nodes
@@ -175,7 +176,7 @@ export class GroupNodeConfig {
   primitiveToWidget: {}
   nodeInputs: {}
   outputVisibility: any[]
-  nodeDef: any
+  nodeDef: ComfyNodeDef
   inputs: any[]
   linksFrom: {}
   linksTo: {}
@@ -204,6 +205,7 @@ export class GroupNodeConfig {
       output: [],
       output_name: [],
       output_is_list: [],
+      // @ts-expect-error Unused, doesn't exist
       output_is_hidden: [],
       name: source + SEPARATOR + this.name,
       display_name: this.name,
@@ -695,11 +697,11 @@ export class GroupNodeConfig {
 }
 
 export class GroupNodeHandler {
-  node
+  node: LGraphNode
   groupData
   innerNodes: any
 
-  constructor(node) {
+  constructor(node: LGraphNode) {
     this.node = node
     this.groupData = node.constructor?.nodeData?.[GROUP]
 
@@ -774,6 +776,7 @@ export class GroupNodeHandler {
 
     this.node.updateLink = (link) => {
       // Replace the group node reference with the internal node
+      // @ts-expect-error Can this be removed?  Or replaced with: LLink.create(link.asSerialisable())
       link = { ...link }
       const output = this.groupData.newToOldOutputMap[link.origin_slot]
       let innerNode = this.innerNodes[output.node.index]
@@ -965,17 +968,20 @@ export class GroupNodeHandler {
 
       app.canvas.emitBeforeChange()
 
-      const { newNodes, selectedIds } = addInnerNodes()
-      reconnectInputs(selectedIds)
-      reconnectOutputs(selectedIds)
-      app.graph.remove(this.node)
+      try {
+        const { newNodes, selectedIds } = addInnerNodes()
+        reconnectInputs(selectedIds)
+        reconnectOutputs(selectedIds)
+        app.graph.remove(this.node)
 
-      app.canvas.emitAfterChange()
-
-      return newNodes
+        return newNodes
+      } finally {
+        app.canvas.emitAfterChange()
+      }
     }
 
     const getExtraMenuOptions = this.node.getExtraMenuOptions
+    // @ts-expect-error Should pass patched return value getExtraMenuOptions
     this.node.getExtraMenuOptions = function (_, options) {
       getExtraMenuOptions?.apply(this, arguments)
 
@@ -988,6 +994,7 @@ export class GroupNodeHandler {
         null,
         {
           content: 'Convert to nodes',
+          // @ts-expect-error
           callback: () => {
             return this.convertToNodes()
           }
@@ -1148,6 +1155,7 @@ export class GroupNodeHandler {
 
           if (
             old.inputName !== 'image' &&
+            // @ts-expect-error Widget values
             !widget.options.values.includes(widget.value)
           ) {
             widget.value = widget.options.values[0]
@@ -1354,6 +1362,7 @@ export class GroupNodeHandler {
       if (!originNode) continue // this node is in the group
       originNode.connect(
         originSlot,
+        // @ts-expect-error Valid - uses deprecated interface.  Required check: if (graph.getNodeById(this.node.id) !== this.node) report()
         this.node.id,
         this.groupData.oldToNewInputMap[targetId][targetSlot]
       )
@@ -1475,7 +1484,7 @@ function ungroupSelectedGroupNodes() {
   const nodes = Object.values(app.canvas.selected_nodes ?? {})
   for (const node of nodes) {
     if (GroupNodeHandler.isGroupNode(node)) {
-      node['convertToNodes']?.()
+      node.convertToNodes?.()
     }
   }
 }

src/extensions/core/groupOptions.ts

@@ -4,6 +4,7 @@ import { app } from '../../scripts/app'
 import { LGraphCanvas } from '@comfyorg/litegraph'
 import type { Positionable } from '@comfyorg/litegraph/dist/interfaces'
 import type { LGraphNode } from '@comfyorg/litegraph'
+import { useSettingStore } from '@/stores/settingStore'
 
 function setNodeMode(node: LGraphNode, mode: number) {
   node.mode = mode
@@ -11,7 +12,8 @@ function setNodeMode(node: LGraphNode, mode: number) {
 }
 
 function addNodesToGroup(group: LGraphGroup, items: Iterable<Positionable>) {
-  group.resizeTo([...group.children, ...items])
+  const padding = useSettingStore().get('Comfy.GroupSelectedNodes.Padding')
+  group.resizeTo([...group.children, ...items], padding)
 }
 
 app.registerExtension({
@@ -76,7 +78,10 @@ app.registerExtension({
         content: 'Fit Group To Nodes',
         callback: () => {
           group.recomputeInsideNodes()
-          group.resizeTo(group.children)
+          const padding = useSettingStore().get(
+            'Comfy.GroupSelectedNodes.Padding'
+          )
+          group.resizeTo(group.children, padding)
           this.graph.change()
         }
       })

src/extensions/core/index.ts

@@ -20,3 +20,5 @@ import './uploadImage'
 import './webcamCapture'
 import './widgetInputs'
 import './uploadAudio'
+import './electronAdapter'
+import './load3d'

src/extensions/core/invertMenuScrolling.ts

@@ -24,7 +24,7 @@ app.registerExtension({
     }
     app.ui.settings.addSetting({
       id,
-      category: ['Comfy', 'Graph', 'InvertMenuScrolling'],
+      category: ['LiteGraph', 'Menu', 'InvertMenuScrolling'],
       name: 'Invert Context Menu Scrolling',
       type: 'boolean',
       defaultValue: false,

src/extensions/core/snapToGrid.ts

@@ -25,7 +25,7 @@ app.registerExtension({
     // Add setting to control grid size
     app.ui.settings.addSetting({
       id: 'Comfy.SnapToGrid.GridSize',
-      category: ['Comfy', 'Graph', 'GridSize'],
+      category: ['LiteGraph', 'Canvas', 'GridSize'],
       name: 'Snap to grid size',
       type: 'slider',
       attrs: {
@@ -43,7 +43,7 @@ app.registerExtension({
     // Using a new setting id can cause existing users to lose their existing settings.
     const alwaysSnapToGrid = app.ui.settings.addSetting({
       id: 'pysssss.SnapToGrid',
-      category: ['Comfy', 'Graph', 'AlwaysSnapToGrid'],
+      category: ['LiteGraph', 'Canvas', 'AlwaysSnapToGrid'],
       name: 'Always snap to grid',
       type: 'boolean',
       defaultValue: false,

src/extensions/core/vintageClipboard.ts

@@ -69,51 +69,54 @@ export function deserialiseAndCreate(data: string, canvas: LGraphCanvas): void {
 
   const { graph, graph_mouse } = canvas
   canvas.emitBeforeChange()
-  graph.beforeChange()
+  try {
+    graph.beforeChange()
 
-  const deserialised = JSON.parse(data)
+    const deserialised = JSON.parse(data)
 
-  // Find the top left point of the boundary of all pasted nodes
-  const topLeft = [Infinity, Infinity]
-  for (const { pos } of deserialised.nodes) {
-    if (topLeft[0] > pos[0]) topLeft[0] = pos[0]
-    if (topLeft[1] > pos[1]) topLeft[1] = pos[1]
+    // Find the top left point of the boundary of all pasted nodes
+    const topLeft = [Infinity, Infinity]
+    for (const { pos } of deserialised.nodes) {
+      if (topLeft[0] > pos[0]) topLeft[0] = pos[0]
+      if (topLeft[1] > pos[1]) topLeft[1] = pos[1]
+    }
+
+    // Silent default instead of throw
+    if (!Number.isFinite(topLeft[0]) || !Number.isFinite(topLeft[1])) {
+      topLeft[0] = graph_mouse[0]
+      topLeft[1] = graph_mouse[1]
+    }
+
+    // Create nodes
+    const nodes: LGraphNode[] = []
+    for (const info of deserialised.nodes) {
+      const node = LiteGraph.createNode(info.type)
+      if (!node) continue
+
+      node.configure(info)
+
+      // Paste to the bottom right of pointer
+      node.pos[0] += graph_mouse[0] - topLeft[0]
+      node.pos[1] += graph_mouse[1] - topLeft[1]
+
+      graph.add(node, true)
+      nodes.push(node)
+    }
+
+    // Create links
+    for (const info of deserialised.links) {
+      const relativeId = info[0]
+      const outNode = relativeId != null ? nodes[relativeId] : undefined
+
+      const inNode = nodes[info[2]]
+      if (outNode && inNode) outNode.connect(info[1], inNode, info[3])
+      else console.warn('Warning, nodes missing on pasting')
+    }
+
+    canvas.selectNodes(nodes)
+
+    graph.afterChange()
+  } finally {
+    canvas.emitAfterChange()
   }
-
-  // Silent default instead of throw
-  if (!Number.isFinite(topLeft[0]) || !Number.isFinite(topLeft[1])) {
-    topLeft[0] = graph_mouse[0]
-    topLeft[1] = graph_mouse[1]
-  }
-
-  // Create nodes
-  const nodes: LGraphNode[] = []
-  for (const info of deserialised.nodes) {
-    const node = LiteGraph.createNode(info.type)
-    if (!node) continue
-
-    node.configure(info)
-
-    // Paste to the bottom right of pointer
-    node.pos[0] += graph_mouse[0] - topLeft[0]
-    node.pos[1] += graph_mouse[1] - topLeft[1]
-
-    graph.add(node, true)
-    nodes.push(node)
-  }
-
-  // Create links
-  for (const info of deserialised.links) {
-    const relativeId = info[0]
-    const outNode = relativeId != null ? nodes[relativeId] : undefined
-
-    const inNode = nodes[info[2]]
-    if (outNode && inNode) outNode.connect(info[1], inNode, info[3])
-    else console.warn('Warning, nodes missing on pasting')
-  }
-
-  canvas.selectNodes(nodes)
-
-  graph.afterChange()
-  canvas.emitAfterChange()
 }

src/hooks/bottomPanelTabs/integratedTerminalTab.ts

@@ -1,14 +0,0 @@
-import { useI18n } from 'vue-i18n'
-import { markRaw } from 'vue'
-import IntegratedTerminal from '@/components/bottomPanel/tabs/IntegratedTerminal.vue'
-import { BottomPanelExtension } from '@/types/extensionTypes'
-
-export const useIntegratedTerminalTab = (): BottomPanelExtension => {
-  const { t } = useI18n()
-  return {
-    id: 'integrated-terminal',
-    title: t('terminal'),
-    component: markRaw(IntegratedTerminal),
-    type: 'vue'
-  }
-}

src/hooks/bottomPanelTabs/terminalTabs.ts

@@ -0,0 +1,25 @@
+import { useI18n } from 'vue-i18n'
+import { markRaw } from 'vue'
+import { BottomPanelExtension } from '@/types/extensionTypes'
+import LogsTerminal from '@/components/bottomPanel/tabs/terminal/LogsTerminal.vue'
+import CommandTerminal from '@/components/bottomPanel/tabs/terminal/CommandTerminal.vue'
+
+export const useLogsTerminalTab = (): BottomPanelExtension => {
+  const { t } = useI18n()
+  return {
+    id: 'logs-terminal',
+    title: t('logs'),
+    component: markRaw(LogsTerminal),
+    type: 'vue'
+  }
+}
+
+export const useCommandTerminalTab = (): BottomPanelExtension => {
+  const { t } = useI18n()
+  return {
+    id: 'command-terminal',
+    title: t('terminal'),
+    component: markRaw(CommandTerminal),
+    type: 'vue'
+  }
+}

src/hooks/bottomPanelTabs/useTerminal.ts

@@ -0,0 +1,69 @@
+import { FitAddon } from '@xterm/addon-fit'
+import { Terminal } from '@xterm/xterm'
+import { debounce } from 'lodash'
+import { onMounted, onUnmounted, Ref } from 'vue'
+import '@xterm/xterm/css/xterm.css'
+
+export function useTerminal(element: Ref<HTMLElement>) {
+  const fitAddon = new FitAddon()
+  const terminal = new Terminal({
+    convertEol: true
+  })
+  terminal.loadAddon(fitAddon)
+
+  onMounted(async () => {
+    terminal.open(element.value)
+  })
+
+  onUnmounted(() => {
+    terminal.dispose()
+  })
+
+  return {
+    terminal,
+    useAutoSize(
+      root: Ref<HTMLElement>,
+      autoRows: boolean = true,
+      autoCols: boolean = true,
+      onResize?: () => void
+    ) {
+      const ensureValidRows = (rows: number | undefined) => {
+        if (rows == null || isNaN(rows)) {
+          return root.value?.clientHeight / 20
+        }
+        return rows
+      }
+
+      const ensureValidCols = (cols: number | undefined): number => {
+        if (cols == null || isNaN(cols)) {
+          // Sometimes this is NaN if so, estimate.
+          return root.value?.clientWidth / 8
+        }
+        return cols
+      }
+
+      const resize = () => {
+        const dims = fitAddon.proposeDimensions()
+        // Sometimes propose returns NaN, so we may need to estimate.
+        terminal.resize(
+          autoCols ? ensureValidCols(dims?.cols) : terminal.cols,
+          autoRows ? ensureValidRows(dims?.rows) : terminal.rows
+        )
+        onResize?.()
+      }
+
+      const resizeObserver = new ResizeObserver(debounce(resize, 25))
+
+      onMounted(async () => {
+        resizeObserver.observe(root.value)
+        resize()
+      })
+
+      onUnmounted(() => {
+        resizeObserver.disconnect()
+      })
+
+      return { resize }
+    }
+  }
+}

src/hooks/sidebarTabs/modelLibrarySidebarTab.ts

@@ -2,15 +2,28 @@ import { markRaw } from 'vue'
 import { useI18n } from 'vue-i18n'
 import ModelLibrarySidebarTab from '@/components/sidebar/tabs/ModelLibrarySidebarTab.vue'
 import type { SidebarTabExtension } from '@/types/extensionTypes'
+import { useElectronDownloadStore } from '@/stores/electronDownloadStore'
+import { isElectron } from '@/utils/envUtil'
 
 export const useModelLibrarySidebarTab = (): SidebarTabExtension => {
   const { t } = useI18n()
+
   return {
     id: 'model-library',
     icon: 'pi pi-box',
     title: t('sideToolbar.modelLibrary'),
     tooltip: t('sideToolbar.modelLibrary'),
     component: markRaw(ModelLibrarySidebarTab),
-    type: 'vue'
+    type: 'vue',
+    iconBadge: () => {
+      if (isElectron()) {
+        const electronDownloadStore = useElectronDownloadStore()
+        if (electronDownloadStore.downloads.length > 0) {
+          return electronDownloadStore.downloads.length.toString()
+        }
+      }
+
+      return null
+    }
   }
 }

src/i18n.ts

@@ -57,6 +57,7 @@ const messages = {
     loadAllFolders: 'Load All Folders',
     refresh: 'Refresh',
     terminal: 'Terminal',
+    logs: 'Logs',
     videoFailedToLoad: 'Video failed to load',
     extensionName: 'Extension Name',
     reloadToApplyChanges: 'Reload to apply changes',

src/scripts/app.ts

@@ -1227,7 +1227,8 @@ export class ComfyApp {
     const origProcessMouseDown = LGraphCanvas.prototype.processMouseDown
     LGraphCanvas.prototype.processMouseDown = function (e) {
       // prepare for ctrl+shift drag: zoom start
-      if (e.ctrlKey && e.shiftKey && e.buttons) {
+      const useFastZoom = useSettingStore().get('Comfy.Graph.CtrlShiftZoom')
+      if (useFastZoom && e.ctrlKey && e.shiftKey && !e.altKey && e.buttons) {
         self.zoom_drag_start = [e.x, e.y, this.ds.scale]
         return
       }
@@ -1572,10 +1573,7 @@ export class ComfyApp {
     api.addEventListener('execution_start', ({ detail }) => {
       this.lastExecutionError = null
       this.graph.nodes.forEach((node) => {
-        // @ts-expect-error
-        if (node.onExecutionStart)
-          // @ts-expect-error
-          node.onExecutionStart()
+        if (node.onExecutionStart) node.onExecutionStart()
       })
     })
 
@@ -1867,15 +1865,6 @@ export class ComfyApp {
       await this.loadGraphData()
     }
 
-    // Save current workflow automatically
-    setInterval(() => {
-      const workflow = JSON.stringify(this.serializeGraph())
-      localStorage.setItem('workflow', workflow)
-      if (api.clientId) {
-        sessionStorage.setItem(`workflow:${api.clientId}`, workflow)
-      }
-    }, 1000)
-
     this.#addDrawNodeHandler()
     this.#addDrawGroupsHandler()
     this.#addDropHandler()
@@ -2407,8 +2396,8 @@ export class ComfyApp {
         }
       }
 
-      const innerNodes = outerNode['getInnerNodes']
-        ? outerNode['getInnerNodes']()
+      const innerNodes = outerNode.getInnerNodes
+        ? outerNode.getInnerNodes()
         : [outerNode]
       for (const node of innerNodes) {
         if (node.isVirtualNode) {
@@ -2426,8 +2415,8 @@ export class ComfyApp {
     for (const outerNode of graph.computeExecutionOrder(false)) {
       const skipNode = outerNode.mode === 2 || outerNode.mode === 4
       const innerNodes =
-        !skipNode && outerNode['getInnerNodes']
-          ? outerNode['getInnerNodes']()
+        !skipNode && outerNode.getInnerNodes
+          ? outerNode.getInnerNodes()
           : [outerNode]
       for (const node of innerNodes) {
         if (node.isVirtualNode) {
@@ -2893,7 +2882,6 @@ export class ComfyApp {
     for (let nodeNum in this.graph.nodes) {
       const node = this.graph.nodes[nodeNum]
       const def = defs[node.type]
-      // @ts-expect-error
       // Allow primitive nodes to handle refresh
       node.refreshComboInNode?.(defs)
 

src/scripts/changeTracker.ts

@@ -99,7 +99,7 @@ export class ChangeTracker {
         this.initialState,
         this.activeState
       )
-      if (workflow.isModified) {
+      if (logger.getLevel() <= logger.levels.DEBUG && workflow.isModified) {
         const diff = ChangeTracker.graphDiff(
           this.initialState,
           this.activeState

src/stores/coreSettings.ts

@@ -1,9 +1,6 @@
 import type { Keybinding } from '@/types/keyBindingTypes'
 import { NodeBadgeMode } from '@/types/nodeSource'
-import {
-  LinkReleaseTriggerAction,
-  LinkReleaseTriggerMode
-} from '@/types/searchBoxTypes'
+import { LinkReleaseTriggerAction } from '@/types/searchBoxTypes'
 import type { SettingParams } from '@/types/settingTypes'
 import { LinkMarkerShape } from '@comfyorg/litegraph'
 import { LiteGraph } from '@comfyorg/litegraph'
@@ -24,17 +21,9 @@ export const CORE_SETTINGS: SettingParams[] = [
     options: ['default', 'litegraph (legacy)'],
     defaultValue: 'default'
   },
-  {
-    id: 'Comfy.NodeSearchBoxImpl.LinkReleaseTrigger',
-    category: ['Comfy', 'Node Search Box', 'LinkReleaseTrigger'],
-    name: 'Trigger on link release',
-    type: 'hidden',
-    options: Object.values(LinkReleaseTriggerMode),
-    defaultValue: LinkReleaseTriggerMode.ALWAYS,
-    deprecated: true
-  },
   {
     id: 'Comfy.LinkRelease.Action',
+    category: ['LiteGraph', 'LinkRelease', 'Action'],
     name: 'Action on link release (No modifier)',
     type: 'combo',
     options: Object.values(LinkReleaseTriggerAction),
@@ -42,6 +31,7 @@ export const CORE_SETTINGS: SettingParams[] = [
   },
   {
     id: 'Comfy.LinkRelease.ActionShift',
+    category: ['LiteGraph', 'LinkRelease', 'ActionShift'],
     name: 'Action on link release (Shift)',
     type: 'combo',
     options: Object.values(LinkReleaseTriggerAction),
@@ -81,7 +71,7 @@ export const CORE_SETTINGS: SettingParams[] = [
   },
   {
     id: 'Comfy.Sidebar.Location',
-    category: ['Comfy', 'Sidebar', 'Location'],
+    category: ['Appearance', 'Sidebar', 'Location'],
     name: 'Sidebar location',
     type: 'combo',
     options: ['left', 'right'],
@@ -89,7 +79,7 @@ export const CORE_SETTINGS: SettingParams[] = [
   },
   {
     id: 'Comfy.Sidebar.Size',
-    category: ['Comfy', 'Sidebar', 'Size'],
+    category: ['Appearance', 'Sidebar', 'Size'],
     name: 'Sidebar size',
     type: 'combo',
     options: ['normal', 'small'],
@@ -97,7 +87,7 @@ export const CORE_SETTINGS: SettingParams[] = [
   },
   {
     id: 'Comfy.TextareaWidget.FontSize',
-    category: ['Comfy', 'Node Widget', 'TextareaWidget', 'FontSize'],
+    category: ['Appearance', 'Node Widget', 'TextareaWidget', 'FontSize'],
     name: 'Textarea widget font size',
     type: 'slider',
     defaultValue: 10,
@@ -121,7 +111,8 @@ export const CORE_SETTINGS: SettingParams[] = [
   },
   {
     id: 'Comfy.Graph.CanvasInfo',
-    name: 'Show canvas info (fps, etc.)',
+    category: ['LiteGraph', 'Canvas', 'CanvasInfo'],
+    name: 'Show canvas info on bottom left corner (fps, etc.)',
     type: 'boolean',
     defaultValue: true
   },
@@ -143,6 +134,7 @@ export const CORE_SETTINGS: SettingParams[] = [
   },
   {
     id: 'Comfy.Node.Opacity',
+    category: ['Appearance', 'Node', 'Opacity'],
     name: 'Node opacity',
     type: 'slider',
     defaultValue: 1,
@@ -167,6 +159,7 @@ export const CORE_SETTINGS: SettingParams[] = [
   },
   {
     id: 'Comfy.Graph.ZoomSpeed',
+    category: ['LiteGraph', 'Canvas', 'ZoomSpeed'],
     name: 'Canvas zoom speed',
     type: 'slider',
     defaultValue: 1.1,
@@ -207,6 +200,7 @@ export const CORE_SETTINGS: SettingParams[] = [
   },
   {
     id: 'Comfy.GroupSelectedNodes.Padding',
+    category: ['LiteGraph', 'Group', 'Padding'],
     name: 'Group selected nodes padding',
     type: 'slider',
     defaultValue: 10,
@@ -217,12 +211,14 @@ export const CORE_SETTINGS: SettingParams[] = [
   },
   {
     id: 'Comfy.Node.DoubleClickTitleToEdit',
+    category: ['LiteGraph', 'Node', 'DoubleClickTitleToEdit'],
     name: 'Double click node title to edit',
     type: 'boolean',
     defaultValue: true
   },
   {
     id: 'Comfy.Group.DoubleClickTitleToEdit',
+    category: ['LiteGraph', 'Group', 'DoubleClickTitleToEdit'],
     name: 'Double click group title to edit',
     type: 'boolean',
     defaultValue: true
@@ -270,6 +266,7 @@ export const CORE_SETTINGS: SettingParams[] = [
   },
   {
     id: 'Comfy.NodeBadge.NodeSourceBadgeMode',
+    category: ['LiteGraph', 'Node', 'NodeSourceBadgeMode'],
     name: 'Node source badge mode',
     type: 'combo',
     options: Object.values(NodeBadgeMode),
@@ -277,6 +274,7 @@ export const CORE_SETTINGS: SettingParams[] = [
   },
   {
     id: 'Comfy.NodeBadge.NodeIdBadgeMode',
+    category: ['LiteGraph', 'Node', 'NodeIdBadgeMode'],
     name: 'Node ID badge mode',
     type: 'combo',
     options: [NodeBadgeMode.None, NodeBadgeMode.ShowAll],
@@ -284,6 +282,7 @@ export const CORE_SETTINGS: SettingParams[] = [
   },
   {
     id: 'Comfy.NodeBadge.NodeLifeCycleBadgeMode',
+    category: ['LiteGraph', 'Node', 'NodeLifeCycleBadgeMode'],
     name: 'Node life cycle badge mode',
     type: 'combo',
     options: [NodeBadgeMode.None, NodeBadgeMode.ShowAll],
@@ -316,7 +315,7 @@ export const CORE_SETTINGS: SettingParams[] = [
    */
   {
     id: 'Comfy.PreviewFormat',
-    category: ['Comfy', 'Node Widget', 'PreviewFormat'],
+    category: ['LiteGraph', 'Node Widget', 'PreviewFormat'],
     name: 'Preview image format',
     tooltip:
       'When displaying a preview in the image widget, convert it to a lightweight image, e.g. webp, jpeg, webp;50, etc.',
@@ -325,14 +324,14 @@ export const CORE_SETTINGS: SettingParams[] = [
   },
   {
     id: 'Comfy.DisableSliders',
-    category: ['Comfy', 'Node Widget', 'DisableSliders'],
+    category: ['LiteGraph', 'Node Widget', 'DisableSliders'],
     name: 'Disable node widget sliders',
     type: 'boolean',
     defaultValue: false
   },
   {
     id: 'Comfy.DisableFloatRounding',
-    category: ['Comfy', 'Node Widget', 'DisableFloatRounding'],
+    category: ['LiteGraph', 'Node Widget', 'DisableFloatRounding'],
     name: 'Disable default float widget rounding.',
     tooltip:
       '(requires page reload) Cannot disable round when round is set by the node in the backend.',
@@ -341,7 +340,7 @@ export const CORE_SETTINGS: SettingParams[] = [
   },
   {
     id: 'Comfy.FloatRoundingPrecision',
-    category: ['Comfy', 'Node Widget', 'FloatRoundingPrecision'],
+    category: ['LiteGraph', 'Node Widget', 'FloatRoundingPrecision'],
     name: 'Float widget rounding decimal places [0 = auto].',
     tooltip: '(requires page reload)',
     type: 'slider',
@@ -354,7 +353,7 @@ export const CORE_SETTINGS: SettingParams[] = [
   },
   {
     id: 'Comfy.EnableTooltips',
-    category: ['Comfy', 'Node', 'EnableTooltips'],
+    category: ['LiteGraph', 'Node', 'EnableTooltips'],
     name: 'Enable Tooltips',
     type: 'boolean',
     defaultValue: true
@@ -395,6 +394,7 @@ export const CORE_SETTINGS: SettingParams[] = [
   },
   {
     id: 'Comfy.Graph.CanvasMenu',
+    category: ['LiteGraph', 'Canvas', 'CanvasMenu'],
     name: 'Show graph canvas menu',
     type: 'boolean',
     defaultValue: true
@@ -448,7 +448,7 @@ export const CORE_SETTINGS: SettingParams[] = [
   },
   {
     id: 'Comfy.LinkRenderMode',
-    category: ['Comfy', 'Graph', 'LinkRenderMode'],
+    category: ['LiteGraph', 'Graph', 'LinkRenderMode'],
     name: 'Link Render Mode',
     defaultValue: 2,
     type: 'combo',
@@ -461,6 +461,7 @@ export const CORE_SETTINGS: SettingParams[] = [
   },
   {
     id: 'Comfy.Node.AutoSnapLinkToSlot',
+    category: ['LiteGraph', 'Node', 'AutoSnapLinkToSlot'],
     name: 'Auto snap link to node slot',
     tooltip:
       'When dragging a link over a node, the link automatically snap to a viable input slot on the node',
@@ -470,6 +471,7 @@ export const CORE_SETTINGS: SettingParams[] = [
   },
   {
     id: 'Comfy.Node.SnapHighlightsNode',
+    category: ['LiteGraph', 'Node', 'SnapHighlightsNode'],
     name: 'Snap highlights node',
     tooltip:
       'When dragging a link over a node with viable input slot, highlight the node',
@@ -479,6 +481,7 @@ export const CORE_SETTINGS: SettingParams[] = [
   },
   {
     id: 'Comfy.Node.BypassAllLinksOnDelete',
+    category: ['LiteGraph', 'Node', 'BypassAllLinksOnDelete'],
     name: 'Keep all links when deleting nodes',
     tooltip:
       'When deleting a node, attempt to reconnect all of its input and output links (bypassing the deleted node)',
@@ -488,6 +491,7 @@ export const CORE_SETTINGS: SettingParams[] = [
   },
   {
     id: 'Comfy.Node.MiddleClickRerouteNode',
+    category: ['LiteGraph', 'Node', 'MiddleClickRerouteNode'],
     name: 'Middle-click creates a new Reroute node',
     type: 'boolean',
     defaultValue: true,
@@ -495,6 +499,7 @@ export const CORE_SETTINGS: SettingParams[] = [
   },
   {
     id: 'Comfy.RerouteBeta',
+    category: ['LiteGraph', 'RerouteBeta'],
     name: 'Opt-in to the reroute beta test',
     tooltip:
       'Enables the new native reroutes.\n\nReroutes can be added by holding alt and dragging from a link line, or on the link menu.\n\nDisabling this option is non-destructive - reroutes are hidden.',
@@ -505,6 +510,7 @@ export const CORE_SETTINGS: SettingParams[] = [
   },
   {
     id: 'Comfy.Graph.LinkMarkers',
+    category: ['LiteGraph', 'Link', 'LinkMarkers'],
     name: 'Link midpoint markers',
     defaultValue: LinkMarkerShape.Circle,
     type: 'combo',
@@ -517,9 +523,17 @@ export const CORE_SETTINGS: SettingParams[] = [
   },
   {
     id: 'Comfy.DOMClippingEnabled',
-    category: ['Comfy', 'Node', 'DOMClippingEnabled'],
+    category: ['LiteGraph', 'Node', 'DOMClippingEnabled'],
     name: 'Enable DOM element clipping (enabling may reduce performance)',
     type: 'boolean',
     defaultValue: true
+  },
+  {
+    id: 'Comfy.Graph.CtrlShiftZoom',
+    category: ['LiteGraph', 'Canvas', 'CtrlShiftZoom'],
+    name: 'Enable fast-zoom shortcut (Ctrl + Shift + Drag)',
+    type: 'boolean',
+    defaultValue: true,
+    versionAdded: '1.4.0'
   }
 ]

src/stores/workspace/bottomPanelStore.ts

@@ -2,8 +2,12 @@ import type { BottomPanelExtension } from '@/types/extensionTypes'
 import { defineStore } from 'pinia'
 import { computed, ref } from 'vue'
 import { useCommandStore } from '@/stores/commandStore'
-import { useIntegratedTerminalTab } from '@/hooks/bottomPanelTabs/integratedTerminalTab'
+import {
+  useLogsTerminalTab,
+  useCommandTerminalTab
+} from '@/hooks/bottomPanelTabs/terminalTabs'
 import { ComfyExtension } from '@/types/comfy'
+import { isElectron } from '@/utils/envUtil'
 
 export const useBottomPanelStore = defineStore('bottomPanel', () => {
   const bottomPanelVisible = ref(false)
@@ -49,7 +53,10 @@ export const useBottomPanelStore = defineStore('bottomPanel', () => {
   }
 
   const registerCoreBottomPanelTabs = () => {
-    registerBottomPanelTab(useIntegratedTerminalTab())
+    registerBottomPanelTab(useLogsTerminalTab())
+    if (isElectron()) {
+      registerBottomPanelTab(useCommandTerminalTab())
+    }
   }
 
   const registerExtensionBottomPanelTabs = (extension: ComfyExtension) => {

src/types/apiTypes.ts

@@ -484,11 +484,6 @@ const zSettings = z.record(z.any()).and(
         zBookmarkCustomization
       ),
       'Comfy.NodeInputConversionSubmenus': z.boolean(),
-      'Comfy.NodeSearchBoxImpl.LinkReleaseTrigger': z.enum([
-        'always',
-        'hold shift',
-        'NOT hold shift'
-      ]),
       'Comfy.LinkRelease.Action': zLinkReleaseTriggerAction,
       'Comfy.LinkRelease.ActionShift': zLinkReleaseTriggerAction,
       'Comfy.NodeSearchBoxImpl.NodePreview': z.boolean(),

src/types/litegraph-augmentation.d.ts

@@ -1,6 +1,7 @@
 import '@comfyorg/litegraph'
 import type { ComfyNodeDef } from '@/types/apiTypes'
 import type { LLink } from '@comfyorg/litegraph'
+import type { NodeId } from './comfyWorkflow'
 
 /**
  *  ComfyUI extensions of litegraph
@@ -26,8 +27,17 @@ declare module '@comfyorg/litegraph' {
     onExecuted?(output: any): void
     onNodeCreated?(this: LGraphNode): void
     setInnerNodes?(nodes: LGraphNode[]): void
+    // TODO: Requires several coercion changes to runtime code.
+    getInnerNodes?() // : LGraphNode[]
+    convertToNodes?(): LGraphNode[]
+    recreate?(): Promise<LGraphNode>
+    refreshComboInNode?(defs: Record<string, ComfyNodeDef>)
     applyToGraph?(extraLinks?: LLink[]): void
     updateLink?(link: LLink): LLink | null
+    onExecutionStart?(): unknown
+
+    index?: number
+    runningInternalNodeId?: NodeId
 
     comfyClass?: string
 

vite.config.mts

@@ -11,6 +11,8 @@ dotenv.config()
 
 const IS_DEV = process.env.NODE_ENV === 'development'
 const SHOULD_MINIFY = process.env.ENABLE_MINIFY === 'true'
+// vite dev server will listen on all addresses, including LAN and public addresses
+const VITE_REMOTE_DEV = process.env.VITE_REMOTE_DEV === 'true'
 
 interface ShimResult {
   code: string
@@ -94,7 +96,7 @@ const DEV_SERVER_COMFYUI_URL = process.env.DEV_SERVER_COMFYUI_URL || 'http://127
 export default defineConfig({
   base: '',
   server: {
-    host: '0.0.0.0',
+    host: VITE_REMOTE_DEV ? '0.0.0.0' : undefined,
     proxy: {
       '/internal': {
         target: DEV_SERVER_COMFYUI_URL,