Prune dead code, tighten interval, add screenshot

Code related to possible options has been pruned. It was pointless for
updateNode to take a node as input. Collapsing documentation items does
not make sense given the greater space of a sidebar tab compared to a
floating window on the graph, so the corresponding code has been fully
pruned as well.

The topmost node is used instead of the current_node. While current_node
displayed the desired properties when canvas was still shallowReactive
of notifying a change in node, it's not intended to be used external to
litegraph and at best, tracks the topmost visible node instead of the
actual topmost node.

A test expectation screenshot has been added for verifying theming works
for the documentation tab.

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

.github/workflows/test-ui.yaml

@@ -20,7 +20,7 @@ jobs:
       run: |
         npm run test:generate
         npm run test:generate:examples
-        npm test -- --verbose
+        npm run test:jest:fast -- --verbose
       working-directory: ComfyUI_frontend
 
   playwright-tests-chromium:

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/assets/node_template_templates.json

@@ -1,10 +0,0 @@
-[
-    {
-        "name": "Three Nodes Template",
-        "data": "{\"nodes\":[{\"id\":7,\"type\":\"CLIPTextEncode\",\"pos\":[413,389],\"size\":[425.27801513671875,180.6060791015625],\"flags\":{},\"order\":3,\"mode\":0,\"inputs\":[{\"name\":\"clip\",\"type\":\"CLIP\",\"link\":null}],\"outputs\":[{\"name\":\"CONDITIONING\",\"type\":\"CONDITIONING\",\"links\":[],\"slot_index\":0}],\"properties\":{\"Node name for S&R\":\"CLIPTextEncode\"},\"widgets_values\":[\"text, watermark\"]},{\"id\":6,\"type\":\"CLIPTextEncode\",\"pos\":[415,186],\"size\":[422.84503173828125,164.31304931640625],\"flags\":{},\"order\":2,\"mode\":0,\"inputs\":[{\"name\":\"clip\",\"type\":\"CLIP\",\"link\":null}],\"outputs\":[{\"name\":\"CONDITIONING\",\"type\":\"CONDITIONING\",\"links\":[],\"slot_index\":0}],\"properties\":{\"Node name for S&R\":\"CLIPTextEncode\"},\"widgets_values\":[\"beautiful scenery nature glass bottle landscape, , purple galaxy bottle,\"]},{\"id\":4,\"type\":\"CheckpointLoaderSimple\",\"pos\":[26,474],\"size\":[315,98],\"flags\":{},\"order\":1,\"mode\":0,\"inputs\":[],\"outputs\":[{\"name\":\"MODEL\",\"type\":\"MODEL\",\"links\":[],\"slot_index\":0},{\"name\":\"CLIP\",\"type\":\"CLIP\",\"links\":[],\"slot_index\":1},{\"name\":\"VAE\",\"type\":\"VAE\",\"links\":[],\"slot_index\":2}],\"properties\":{\"Node name for S&R\":\"CheckpointLoaderSimple\"},\"widgets_values\":[\"v1-5-pruned-emaonly.ckpt\"]}],\"groups\":[],\"reroutes\":[],\"links\":[{\"id\":5,\"origin_id\":4,\"origin_slot\":1,\"target_id\":7,\"target_slot\":0,\"type\":\"CLIP\"},{\"id\":3,\"origin_id\":4,\"origin_slot\":1,\"target_id\":6,\"target_slot\":0,\"type\":\"CLIP\"}]}"
-    },
-    {
-        "name": "Completely empty template",
-        "data": "{\"nodes\":[],\"groups\":[],\"reroutes\":[],\"links\":[]}"
-    }
-]

browser_tests/assets/oversized_group.json

@@ -0,0 +1,90 @@
+{
+  "last_node_id": 9,
+  "last_link_id": 9,
+  "nodes": [
+    {
+      "id": 3,
+      "type": "KSampler",
+      "pos": [
+        37,
+        98
+      ],
+      "size": [
+        315,
+        262
+      ],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "model",
+          "type": "MODEL",
+          "link": null
+        },
+        {
+          "name": "positive",
+          "type": "CONDITIONING",
+          "link": null
+        },
+        {
+          "name": "negative",
+          "type": "CONDITIONING",
+          "link": null
+        },
+        {
+          "name": "latent_image",
+          "type": "LATENT",
+          "link": null
+        }
+      ],
+      "outputs": [
+        {
+          "name": "LATENT",
+          "type": "LATENT",
+          "links": [],
+          "slot_index": 0
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "KSampler"
+      },
+      "widgets_values": [
+        156680208700286,
+        "randomize",
+        20,
+        8,
+        "euler",
+        "normal",
+        1
+      ]
+    }
+  ],
+  "links": [],
+  "groups": [
+    {
+      "id": 1,
+      "title": "Group",
+      "bounding": [
+        23,
+        23,
+        900,
+        825
+      ],
+      "color": "#3f789e",
+      "font_size": 24,
+      "flags": {}
+    }
+  ],
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 1,
+      "offset": [
+        0,
+        0
+      ]
+    }
+  },
+  "version": 0.4
+}

browser_tests/assets/vintage_clipboard_template.json

@@ -1,6 +0,0 @@
-[
-    {
-        "name": "vintageClipboard Template",
-        "data": "{\"nodes\":[{\"id\":-1,\"type\":\"CheckpointLoaderSimple\",\"pos\":[26,474],\"size\":[315,98],\"flags\":{},\"order\":1,\"mode\":0,\"inputs\":[],\"outputs\":[{\"name\":\"MODEL\",\"type\":\"MODEL\",\"links\":[],\"slot_index\":0},{\"name\":\"CLIP\",\"type\":\"CLIP\",\"links\":[],\"slot_index\":1},{\"name\":\"VAE\",\"type\":\"VAE\",\"links\":[],\"slot_index\":2}],\"properties\":{\"Node name for S&R\":\"CheckpointLoaderSimple\"},\"widgets_values\":[\"v1-5-pruned-emaonly.ckpt\"]},{\"id\":-1,\"type\":\"CLIPTextEncode\",\"pos\":[415,186],\"size\":[422.84503173828125,164.31304931640625],\"flags\":{},\"order\":2,\"mode\":0,\"inputs\":[{\"name\":\"clip\",\"type\":\"CLIP\",\"link\":null}],\"outputs\":[{\"name\":\"CONDITIONING\",\"type\":\"CONDITIONING\",\"links\":[],\"slot_index\":0}],\"properties\":{\"Node name for S&R\":\"CLIPTextEncode\"},\"widgets_values\":[\"beautiful scenery nature glass bottle landscape, , purple galaxy bottle,\"]},{\"id\":-1,\"type\":\"CLIPTextEncode\",\"pos\":[413,389],\"size\":[425.27801513671875,180.6060791015625],\"flags\":{},\"order\":3,\"mode\":0,\"inputs\":[{\"name\":\"clip\",\"type\":\"CLIP\",\"link\":null}],\"outputs\":[{\"name\":\"CONDITIONING\",\"type\":\"CONDITIONING\",\"links\":[],\"slot_index\":0}],\"properties\":{\"Node name for S&R\":\"CLIPTextEncode\"},\"widgets_values\":[\"text, watermark\"]}],\"links\":[[0,1,1,0,4],[0,1,2,0,4]]}"
-    }
-]

browser_tests/browserTabTitle.spec.ts

@@ -11,7 +11,7 @@ test.describe('Browser tab title', () => {
       const workflowName = await comfyPage.page.evaluate(async () => {
         return window['app'].extensionManager.workflow.activeWorkflow.filename
       })
-      expect(await comfyPage.page.title()).toBe(`${workflowName} - ComfyUI`)
+      expect(await comfyPage.page.title()).toBe(`*${workflowName} - ComfyUI`)
     })
 
     // Failing on CI

browser_tests/changeTracker.spec.ts

@@ -3,9 +3,6 @@ import {
   comfyPageFixture as test,
   comfyExpect as expect
 } from './fixtures/ComfyPage'
-import type { useWorkspaceStore } from '../src/stores/workspaceStore'
-
-type WorkspaceStore = ReturnType<typeof useWorkspaceStore>
 
 async function beforeChange(comfyPage: ComfyPage) {
   await comfyPage.page.evaluate(() => {
@@ -26,65 +23,41 @@ test.describe('Change Tracker', () => {
     })
 
     test('Can undo multiple operations', async ({ comfyPage }) => {
-      function isModified() {
-        return comfyPage.page.evaluate(async () => {
-          return !!(window['app'].extensionManager as WorkspaceStore).workflow
-            .activeWorkflow?.isModified
-        })
-      }
-
-      function getUndoQueueSize() {
-        return comfyPage.page.evaluate(() => {
-          const workflow = (window['app'].extensionManager as WorkspaceStore)
-            .workflow.activeWorkflow
-          return workflow?.changeTracker.undoQueue.length
-        })
-      }
-
-      function getRedoQueueSize() {
-        return comfyPage.page.evaluate(() => {
-          const workflow = (window['app'].extensionManager as WorkspaceStore)
-            .workflow.activeWorkflow
-          return workflow?.changeTracker.redoQueue.length
-        })
-      }
-      expect(await getUndoQueueSize()).toBe(0)
-      expect(await getRedoQueueSize()).toBe(0)
+      expect(await comfyPage.getUndoQueueSize()).toBe(0)
+      expect(await comfyPage.getRedoQueueSize()).toBe(0)
 
       // Save, confirm no errors & workflow modified flag removed
       await comfyPage.menu.topbar.saveWorkflow('undo-redo-test')
       expect(await comfyPage.getToastErrorCount()).toBe(0)
-      expect(await isModified()).toBe(false)
-
-      // TODO(huchenlei): Investigate why saving the workflow is causing the
-      // undo queue to be triggered.
-      expect(await getUndoQueueSize()).toBe(1)
-      expect(await getRedoQueueSize()).toBe(0)
+      expect(await comfyPage.isCurrentWorkflowModified()).toBe(false)
+      expect(await comfyPage.getUndoQueueSize()).toBe(0)
+      expect(await comfyPage.getRedoQueueSize()).toBe(0)
 
       const node = (await comfyPage.getFirstNodeRef())!
+      await node.click('title')
       await node.click('collapse')
       await expect(node).toBeCollapsed()
-      expect(await isModified()).toBe(true)
-      expect(await getUndoQueueSize()).toBe(2)
-      expect(await getRedoQueueSize()).toBe(0)
+      expect(await comfyPage.isCurrentWorkflowModified()).toBe(true)
+      expect(await comfyPage.getUndoQueueSize()).toBe(1)
+      expect(await comfyPage.getRedoQueueSize()).toBe(0)
 
       await comfyPage.ctrlB()
       await expect(node).toBeBypassed()
-      expect(await isModified()).toBe(true)
-      expect(await getUndoQueueSize()).toBe(3)
-      expect(await getRedoQueueSize()).toBe(0)
+      expect(await comfyPage.isCurrentWorkflowModified()).toBe(true)
+      expect(await comfyPage.getUndoQueueSize()).toBe(2)
+      expect(await comfyPage.getRedoQueueSize()).toBe(0)
 
       await comfyPage.ctrlZ()
       await expect(node).not.toBeBypassed()
-      expect(await isModified()).toBe(true)
-      expect(await getUndoQueueSize()).toBe(2)
-      expect(await getRedoQueueSize()).toBe(1)
+      expect(await comfyPage.isCurrentWorkflowModified()).toBe(true)
+      expect(await comfyPage.getUndoQueueSize()).toBe(1)
+      expect(await comfyPage.getRedoQueueSize()).toBe(1)
 
       await comfyPage.ctrlZ()
       await expect(node).not.toBeCollapsed()
-      expect(await isModified()).toBe(false)
-      expect(await getUndoQueueSize()).toBe(1)
-      expect(await getRedoQueueSize()).toBe(2)
+      expect(await comfyPage.isCurrentWorkflowModified()).toBe(false)
+      expect(await comfyPage.getUndoQueueSize()).toBe(0)
+      expect(await comfyPage.getRedoQueueSize()).toBe(2)
     })
   })
 
@@ -98,6 +71,7 @@ test.describe('Change Tracker', () => {
 
     // Make changes outside set
     // Bypass + collapse node
+    await node.click('title')
     await node.click('collapse')
     await comfyPage.ctrlB()
     await expect(node).toBeCollapsed()
@@ -111,6 +85,10 @@ test.describe('Change Tracker', () => {
     await expect(node).not.toBeBypassed()
     await expect(node).not.toBeCollapsed()
 
+    // Prevent clicks registering a double-click
+    await comfyPage.clickEmptySpace()
+    await node.click('title')
+
     // Run again, but within a change transaction
     await beforeChange(comfyPage)
 
@@ -152,6 +130,7 @@ test.describe('Change Tracker', () => {
     const multipleChanges = async () => {
       await beforeChange(comfyPage)
       // Call other actions that uses begin/endChange
+      await node.click('title')
       await collapse()
       await bypassAndPin()
       await afterChange(comfyPage)
@@ -169,4 +148,20 @@ test.describe('Change Tracker', () => {
     await expect(node).toBePinned()
     await expect(node).toBeCollapsed()
   })
+
+  test('Can detect changes in workflow.extra', async ({ comfyPage }) => {
+    expect(await comfyPage.getUndoQueueSize()).toBe(0)
+    await comfyPage.page.evaluate(() => {
+      window['app'].graph.extra.foo = 'bar'
+    })
+    // Click empty space to trigger a change detection.
+    await comfyPage.clickEmptySpace()
+    expect(await comfyPage.getUndoQueueSize()).toBe(1)
+  })
+
+  test('Ignores changes in workflow.ds', async ({ comfyPage }) => {
+    expect(await comfyPage.getUndoQueueSize()).toBe(0)
+    await comfyPage.pan({ x: 10, y: 10 })
+    expect(await comfyPage.getUndoQueueSize()).toBe(0)
+  })
 })

browser_tests/copyPaste.spec.ts

@@ -24,14 +24,6 @@ test.describe('Copy Paste', () => {
 
   test('Can copy and paste widget value', async ({ comfyPage }) => {
     // Copy width value (512) from empty latent node to KSampler's seed.
-    // Empty latent node's width
-    await comfyPage.canvas.click({
-      position: {
-        x: 718,
-        y: 643
-      }
-    })
-    await comfyPage.ctrlC(null)
     // KSampler's seed
     await comfyPage.canvas.click({
       position: {
@@ -39,6 +31,14 @@ test.describe('Copy Paste', () => {
         y: 281
       }
     })
+    await comfyPage.ctrlC(null)
+    // Empty latent node's width
+    await comfyPage.canvas.click({
+      position: {
+        x: 718,
+        y: 643
+      }
+    })
     await comfyPage.ctrlV(null)
     await comfyPage.page.keyboard.press('Enter')
     await expect(comfyPage.canvas).toHaveScreenshot('copied-widget-value.png')

browser_tests/dialog.spec.ts

@@ -94,7 +94,7 @@ test.describe('Settings', () => {
   test('Can change canvas zoom speed setting', async ({ comfyPage }) => {
     const maxSpeed = 2.5
     await comfyPage.setSetting('Comfy.Graph.ZoomSpeed', maxSpeed)
-    await test.step('Setting should persist', async () => {
+    test.step('Setting should persist', async () => {
       expect(await comfyPage.getSetting('Comfy.Graph.ZoomSpeed')).toBe(maxSpeed)
     })
   })

browser_tests/documentationSidebar.spec.ts

@@ -0,0 +1,125 @@
+import { expect } from '@playwright/test'
+import { comfyPageFixture as test } from './fixtures/ComfyPage'
+const nodeDef = {
+  title: 'TestNodeAdvancedDoc'
+}
+
+test.describe('Documentation Sidebar', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.loadWorkflow('default')
+  })
+
+  test.afterEach(async ({ comfyPage }) => {
+    const currentThemeId = await comfyPage.menu.getThemeId()
+    if (currentThemeId !== 'dark') {
+      await comfyPage.menu.toggleTheme()
+    }
+  })
+
+  test('Sidebar registered', async ({ comfyPage }) => {
+    await expect(
+      comfyPage.page.locator('.documentation-tab-button')
+    ).toBeVisible()
+  })
+  test('Parses help for basic node', async ({ comfyPage }) => {
+    await comfyPage.page.locator('.documentation-tab-button').click()
+    const docPane = comfyPage.page.locator('.sidebar-content-container')
+    //Check that each independently parsed element exists
+    await expect(docPane).toContainText('Load Checkpoint')
+    await expect(docPane).toContainText('Loads a diffusion model')
+    await expect(docPane).toContainText('The name of the checkpoint')
+    await expect(docPane).toContainText('The VAE model used')
+  })
+  test('Responds to hovering over node', async ({ comfyPage }) => {
+    await comfyPage.page.locator('.documentation-tab-button').click()
+    const docPane = comfyPage.page.locator('.sidebar-content-container')
+    await comfyPage.page.mouse.move(321, 593)
+    const tooltipTimeout = 500
+    await comfyPage.page.waitForTimeout(tooltipTimeout + 16)
+    await expect(comfyPage.page.locator('.node-tooltip')).not.toBeVisible()
+    await expect(
+      comfyPage.page.locator('.sidebar-content-container>div>div:nth-child(4)')
+    ).toBeFocused()
+  })
+  test('Updates when a new node is selected', async ({ comfyPage }) => {
+    await comfyPage.page.locator('.documentation-tab-button').click()
+    const docPane = comfyPage.page.locator('.sidebar-content-container')
+    await comfyPage.page.mouse.click(557, 440)
+    await expect(docPane).not.toContainText('Load Checkpoint')
+    await expect(docPane).toContainText('CLIP Text Encode (Prompt)')
+    await expect(docPane).toContainText('The text to be encoded')
+    await expect(docPane).toContainText(
+      'A conditioning containing the embedded text'
+    )
+  })
+  test('Responds to a change in theme', async ({ comfyPage }) => {
+    await comfyPage.page.locator('.documentation-tab-button').click()
+    const docPane = comfyPage.page.locator('.sidebar-content-container')
+    await comfyPage.menu.toggleTheme()
+    await expect(docPane).toHaveScreenshot(
+      'documentation-sidebar-light-theme.png'
+    )
+  })
+})
+test.describe('Advanced Description tests', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    //register test node and add to graph
+    await comfyPage.page.evaluate(async (node) => {
+      const app = window['app']
+      await app.registerNodeDef(node.name, node)
+      app.addNodeOnGraph(node)
+    }, advDocNode)
+  })
+  test('Description displays as raw html', async ({ comfyPage }) => {
+    await comfyPage.page.locator('.documentation-tab-button').click()
+    const docPane = comfyPage.page.locator('.sidebar-content-container>div')
+    await expect(docPane).toHaveJSProperty(
+      'innerHTML',
+      advDocNode.description[1]
+    )
+  })
+  test('selected function', async ({ comfyPage }) => {
+    await comfyPage.page.evaluate(() => {
+      const app = window['app']
+      const desc =
+        LiteGraph.registered_node_types['Test_AdvancedDescription'].nodeData
+          .description
+      desc[2].select = (element, name, value) => {
+        element.children[0].innerText = name + ' ' + value
+      }
+    })
+    await comfyPage.page.locator('.documentation-tab-button').click()
+    const docPane = comfyPage.page.locator('.sidebar-content-container')
+    await comfyPage.page.mouse.move(307, 80)
+    const tooltipTimeout = 500
+    await comfyPage.page.waitForTimeout(tooltipTimeout + 16)
+    await expect(comfyPage.page.locator('.node-tooltip')).not.toBeVisible()
+    await expect(docPane).toContainText('int_input 0')
+  })
+})
+
+const advDocNode = {
+  display_name: 'Node With Advanced Description',
+  name: 'Test_AdvancedDescription',
+  input: {
+    required: {
+      int_input: [
+        'INT',
+        { tooltip: "an input tooltip that won't be displayed in sidebar" }
+      ]
+    }
+  },
+  output: ['INT'],
+  output_name: ['int_output'],
+  output_tooltips: ["An output tooltip that won't be displayed in the sidebar"],
+  output_is_list: false,
+  description: [
+    'A node with description in the advanced format',
+    `
+A long form description that will be displayed in the sidebar.
+<div doc_title="INT">Can include arbitrary html</div>
+<div doc_title="int_input">or out of order widgets</div>
+`,
+    {}
+  ]
+}

browser_tests/fixtures/ComfyPage.ts

@@ -17,8 +17,11 @@ import {
 import { Topbar } from './components/Topbar'
 import { NodeReference } from './utils/litegraphUtils'
 import type { Position, Size } from './types'
+import type { useWorkspaceStore } from '../../src/stores/workspaceStore'
 import { SettingDialog } from './components/SettingDialog'
 
+type WorkspaceStore = ReturnType<typeof useWorkspaceStore>
+
 class ComfyMenu {
   public readonly sideToolbar: Locator
   public readonly themeToggleButton: Locator
@@ -77,7 +80,6 @@ export class ComfyPage {
   // All canvas position operations are based on default view of canvas.
   public readonly canvas: Locator
   public readonly widgetTextBox: Locator
-  public readonly contextMenu: Locator
 
   // Buttons
   public readonly resetViewButton: Locator
@@ -108,7 +110,6 @@ export class ComfyPage {
     this.url = process.env.PLAYWRIGHT_TEST_URL || 'http://localhost:8188'
     this.canvas = page.locator('#graph-canvas')
     this.widgetTextBox = page.getByPlaceholder('text').nth(1)
-    this.contextMenu = page.locator('.litegraph.litecontextmenu')
     this.resetViewButton = page.getByRole('button', { name: 'Reset View' })
     this.queueButton = page.getByRole('button', { name: 'Queue Prompt' })
     this.workflowUploadInput = page.locator('#comfy-file-input')
@@ -150,12 +151,6 @@ export class ComfyPage {
     })
   }
 
-  async getGraphSelectedItemsCount(): Promise<number | undefined> {
-    return await this.page.evaluate(() => {
-      return window['app']?.canvas?.selectedItems?.size
-    })
-  }
-
   async setupWorkflowsDirectory(structure: FolderStructure) {
     const resp = await this.request.post(
       `${this.url}/api/devtools/setup_folder_structure`,
@@ -199,39 +194,6 @@ export class ComfyPage {
     return await resp.json()
   }
 
-  async clearNodeTemplates() {
-    const resp = await this.request.delete(
-      `${this.url}/api/userdata/comfy.templates.json`,
-      {
-        headers: { 'Comfy-User': this.id }
-      }
-    )
-
-    const status = resp.status()
-    if (status !== 204 && status !== 404)
-      throw new Error(`Failed to delete node templates: ${await resp.text()}`)
-  }
-
-  async setNodeTemplates(fileName: string) {
-    const path = this.assetPath(fileName)
-    const data = fs.readFileSync(path, 'utf-8')
-
-    const resp = await this.request.post(
-      `${this.url}/api/userdata/comfy.templates.json`,
-      {
-        headers: {
-          'Comfy-User': this.id,
-          overwrite: 'true',
-          full_info: 'true'
-        },
-        data
-      }
-    )
-
-    if (resp.status() !== 200)
-      throw new Error(`Failed to upload node templates: ${await resp.text()}`)
-  }
-
   async setupSettings(settings: Record<string, any>) {
     const resp = await this.request.post(
       `${this.url}/api/devtools/set_settings`,
@@ -245,13 +207,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.
@@ -355,9 +319,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() {
@@ -440,17 +404,11 @@ export class ComfyPage {
     await this.nextFrame()
   }
 
-  async dragAndDrop(
-    source: Position,
-    target: Position,
-    modifierKey?: 'ControlOrMeta' | 'Control' | 'Alt' | 'Shift'
-  ) {
-    if (modifierKey) await this.page.keyboard.down(modifierKey)
+  async dragAndDrop(source: Position, target: Position) {
     await this.page.mouse.move(source.x, source.y)
     await this.page.mouse.down()
     await this.page.mouse.move(target.x, target.y)
     await this.page.mouse.up()
-    if (modifierKey) await this.page.keyboard.up(modifierKey)
     await this.nextFrame()
   }
 
@@ -571,9 +529,6 @@ export class ComfyPage {
     safeSpot = safeSpot || { x: 10, y: 10 }
     await this.page.mouse.move(safeSpot.x, safeSpot.y)
     await this.page.mouse.down()
-    // TEMPORARY HACK: Multiple pans open the search menu, so cheat and keep it closed.
-    // TODO: Fix that (double-click at not-the-same-coordinations should not open the menu)
-    await this.page.keyboard.press('Escape')
     await this.page.mouse.move(offset.x + safeSpot.x, offset.y + safeSpot.y)
     await this.page.mouse.up()
     await this.nextFrame()
@@ -598,11 +553,13 @@ export class ComfyPage {
   }
 
   async rightClickCanvas() {
-    await this.canvas.click({
-      position: { x: 10, y: 10 },
-      button: 'right'
-    })
-    await expect(this.contextMenu).toBeVisible()
+    await this.page.mouse.click(10, 10, { button: 'right' })
+    await this.nextFrame()
+  }
+
+  async clickContextMenuItem(name: string): Promise<void> {
+    await this.page.getByRole('menuitem', { name }).click()
+    await this.nextFrame()
   }
 
   async doubleClickCanvas() {
@@ -617,7 +574,7 @@ export class ComfyPage {
         y: 625
       }
     })
-    await this.page.mouse.move(10, 10)
+    this.page.mouse.move(10, 10)
     await this.nextFrame()
   }
 
@@ -629,14 +586,10 @@ export class ComfyPage {
       },
       button: 'right'
     })
-    await this.page.mouse.move(10, 10)
+    this.page.mouse.move(10, 10)
     await this.nextFrame()
   }
 
-  async clickContextMenuItem(name: string): Promise<void> {
-    await this.page.getByRole('menuitem', { name }).click()
-  }
-
   async select2Nodes() {
     // Select 2 CLIP nodes.
     await this.page.keyboard.down('Control')
@@ -787,6 +740,19 @@ export class ComfyPage {
     )
   }
 
+  async confirmDialog(prompt: string, text: string = 'Yes') {
+    const modal = this.page.locator(
+      `.comfy-modal-content:has-text("${prompt}")`
+    )
+    await expect(modal).toBeVisible()
+    await modal
+      .locator('.comfyui-button', {
+        hasText: text
+      })
+      .click()
+    await expect(modal).toBeHidden()
+  }
+
   async convertAllNodesToGroupNode(groupNodeName: string) {
     this.page.on('dialog', async (dialog) => {
       await dialog.accept(groupNodeName)
@@ -825,6 +791,26 @@ export class ComfyPage {
   async moveMouseToEmptyArea() {
     await this.page.mouse.move(10, 10)
   }
+  async getUndoQueueSize() {
+    return this.page.evaluate(() => {
+      const workflow = (window['app'].extensionManager as WorkspaceStore)
+        .workflow.activeWorkflow
+      return workflow?.changeTracker.undoQueue.length
+    })
+  }
+  async getRedoQueueSize() {
+    return this.page.evaluate(() => {
+      const workflow = (window['app'].extensionManager as WorkspaceStore)
+        .workflow.activeWorkflow
+      return workflow?.changeTracker.redoQueue.length
+    })
+  }
+  async isCurrentWorkflowModified() {
+    return this.page.evaluate(() => {
+      return (window['app'].extensionManager as WorkspaceStore).workflow
+        .activeWorkflow?.isModified
+    })
+  }
 }
 
 export const comfyPageFixture = base.extend<{ comfyPage: ComfyPage }>({

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/fixtures/components/SidebarTab.ts

@@ -103,6 +103,12 @@ export class WorkflowsSidebarTab extends SidebarTab {
       .allInnerTexts()
   }
 
+  async getActiveWorkflowName() {
+    return await this.page
+      .locator('.comfyui-workflows-open .p-tree-node-selected .node-label')
+      .innerText()
+  }
+
   async getTopLevelSavedWorkflowNames() {
     return await this.page
       .locator('.comfyui-workflows-browse .node-label')

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

@@ -320,6 +320,15 @@ test.describe('Node Interaction', () => {
     await expect(comfyPage.canvas).toHaveScreenshot('group-selected-nodes.png')
   })
 
+  test('Can fit group to contents', async ({ comfyPage }) => {
+    await comfyPage.loadWorkflow('oversized_group')
+    await comfyPage.ctrlA()
+    await comfyPage.nextFrame()
+    await comfyPage.executeCommand('Comfy.Graph.FitGroupToContents')
+    await comfyPage.nextFrame()
+    await expect(comfyPage.canvas).toHaveScreenshot('group-fit-to-contents.png')
+  })
+
   // Somehow this test fails on GitHub Actions. It works locally.
   // https://github.com/Comfy-Org/ComfyUI_frontend/pull/736
   test.skip('Can pin/unpin nodes with keyboard shortcut', async ({
@@ -537,6 +546,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', () => {

browser_tests/menu.spec.ts

@@ -379,7 +379,9 @@ test.describe('Menu', () => {
       // Open the sidebar
       const tab = comfyPage.menu.workflowsTab
       await tab.open()
+    })
 
+    test.afterEach(async ({ comfyPage }) => {
       await comfyPage.setupWorkflowsDirectory({})
     })
 
@@ -392,7 +394,7 @@ test.describe('Menu', () => {
       await tab.newBlankWorkflowButton.click()
       expect(await tab.getOpenedWorkflowNames()).toEqual([
         '*Unsaved Workflow.json',
-        'Unsaved Workflow (2).json'
+        '*Unsaved Workflow (2).json'
       ])
     })
 
@@ -450,6 +452,58 @@ test.describe('Menu', () => {
       ).toEqual(['*Unsaved Workflow.json', 'workflow3.json', 'workflow4.json'])
     })
 
+    test('Can save workflow as with same name', async ({ comfyPage }) => {
+      await comfyPage.menu.topbar.saveWorkflow('workflow5.json')
+      expect(
+        await comfyPage.menu.workflowsTab.getOpenedWorkflowNames()
+      ).toEqual(['workflow5.json'])
+
+      await comfyPage.menu.topbar.saveWorkflowAs('workflow5.json')
+      await comfyPage.confirmDialog('Overwrite existing file?', 'Yes')
+      expect(
+        await comfyPage.menu.workflowsTab.getOpenedWorkflowNames()
+      ).toEqual(['workflow5.json'])
+    })
+
+    test('Can save temporary workflow with unmodified name', async ({
+      comfyPage
+    }) => {
+      expect(await comfyPage.isCurrentWorkflowModified()).toBe(false)
+
+      await comfyPage.menu.topbar.saveWorkflow('Unsaved Workflow')
+      // Should not trigger the overwrite dialog
+      expect(
+        await comfyPage.page.locator('.comfy-modal-content:visible').count()
+      ).toBe(0)
+
+      expect(await comfyPage.isCurrentWorkflowModified()).toBe(false)
+    })
+
+    test('Can overwrite other workflows with save as', async ({
+      comfyPage
+    }) => {
+      const topbar = comfyPage.menu.topbar
+      await topbar.saveWorkflow('workflow1.json')
+      await topbar.saveWorkflowAs('workflow2.json')
+      await comfyPage.nextFrame()
+      expect(
+        await comfyPage.menu.workflowsTab.getOpenedWorkflowNames()
+      ).toEqual(['workflow1.json', 'workflow2.json'])
+      expect(await comfyPage.menu.workflowsTab.getActiveWorkflowName()).toEqual(
+        'workflow2.json'
+      )
+
+      await topbar.saveWorkflowAs('workflow1.json')
+      await comfyPage.confirmDialog('Overwrite existing file?', 'Yes')
+      // The old workflow1.json should be deleted and the new one should be saved.
+      expect(
+        await comfyPage.menu.workflowsTab.getOpenedWorkflowNames()
+      ).toEqual(['workflow2.json', 'workflow1.json'])
+      expect(await comfyPage.menu.workflowsTab.getActiveWorkflowName()).toEqual(
+        'workflow1.json'
+      )
+    })
+
     test('Does not report warning when switching between opened workflows', async ({
       comfyPage
     }) => {
@@ -475,12 +529,12 @@ test.describe('Menu', () => {
         `tempWorkflow-${test.info().title}`
       )
       const closeButton = comfyPage.page.locator(
-        '.comfyui-workflows-open .p-button-icon.pi-times'
+        '.comfyui-workflows-open .close-workflow-button'
       )
       await closeButton.click()
       expect(
         await comfyPage.menu.workflowsTab.getOpenedWorkflowNames()
-      ).toEqual(['Unsaved Workflow.json'])
+      ).toEqual(['*Unsaved Workflow.json'])
     })
   })
 

browser_tests/nodeTemplate.spec.ts

@@ -1,70 +0,0 @@
-import {
-  comfyPageFixture as test,
-  comfyExpect as expect
-} from './fixtures/ComfyPage'
-
-// Old `nodeTemplate.ts` system
-test.describe('Node Template', () => {
-  test.afterEach(async ({ comfyPage }) => {
-    await comfyPage.clearNodeTemplates()
-  })
-
-  test('Can create and use node template', async ({ comfyPage }) => {
-    const templateName = 'Can create node template template'
-
-    await comfyPage.clearNodeTemplates()
-    await comfyPage.reload()
-
-    // TODO: Flaky test.  Right click requires delay after reload, but other interactions do not.
-    await comfyPage.page.waitForTimeout(500)
-
-    // Enter filename when prompt dialog shown
-    comfyPage.page.on('dialog', (dialog) => dialog.accept(templateName))
-
-    // Ctrl + drag over 3 nodes
-    await comfyPage.dragAndDrop(
-      { x: 175, y: 252 },
-      { x: 483, y: 564 },
-      'ControlOrMeta'
-    )
-    expect(await comfyPage.getGraphSelectedItemsCount()).toEqual(3)
-
-    await comfyPage.rightClickCanvas()
-    await comfyPage.clickContextMenuItem('Save Selected as Template')
-    await comfyPage.nextFrame()
-
-    await comfyPage.rightClickCanvas()
-    await comfyPage.clickContextMenuItem('Node Templates >')
-    await comfyPage.clickContextMenuItem(templateName)
-
-    await expect(comfyPage.canvas).toHaveScreenshot()
-  })
-
-  test('Can load old format template', async ({ comfyPage }) => {
-    await comfyPage.setNodeTemplates('vintage_clipboard_template.json')
-    await comfyPage.reload()
-
-    // TODO: Flaky test.  Right click requires delay after reload, but other interactions do not.
-    await comfyPage.page.waitForTimeout(500)
-
-    await comfyPage.rightClickCanvas()
-    await comfyPage.clickContextMenuItem('Node Templates >')
-    await comfyPage.clickContextMenuItem('vintageClipboard Template')
-
-    await expect(comfyPage.canvas).toHaveScreenshot()
-  })
-
-  test('Can load new format template', async ({ comfyPage }) => {
-    await comfyPage.setNodeTemplates('node_template_templates.json')
-    await comfyPage.reload()
-
-    // TODO: Flaky test.  Right click requires delay after reload, but other interactions do not.
-    await comfyPage.page.waitForTimeout(500)
-
-    await comfyPage.rightClickCanvas()
-    await comfyPage.clickContextMenuItem('Node Templates >')
-    await comfyPage.clickContextMenuItem('Three Nodes Template')
-
-    await expect(comfyPage.canvas).toHaveScreenshot()
-  })
-})

browser_tests/rightClickMenu.spec.ts

@@ -36,7 +36,7 @@ test.describe('Canvas Right Click Menu', () => {
       await dialog.accept('GroupNode2CLIP')
     })
     await comfyPage.rightClickCanvas()
-    await comfyPage.page.getByText('Convert to Group Node').click()
+    await comfyPage.clickContextMenuItem('Convert to Group Node')
     await comfyPage.nextFrame()
     await expect(comfyPage.canvas).toHaveScreenshot(
       'right-click-node-group-node.png'

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'

lint-staged.config.js

@@ -0,0 +1,13 @@
+export default {
+  './**/*.js': (stagedFiles) => formatFiles(stagedFiles),
+
+  './**/*.{ts,tsx,vue}': (stagedFiles) => [
+    ...formatFiles(stagedFiles),
+    'tsc --noEmit',
+    'tsc-strict'
+  ]
+}
+
+function formatFiles(fileNames) {
+  return [`prettier --write ${fileNames.join(' ')}`]
+}

package-lock.json

@@ -1,16 +1,16 @@
 {
   "name": "comfyui-frontend",
-  "version": "1.3.43",
+  "version": "1.4.13",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "comfyui-frontend",
-      "version": "1.3.43",
+      "version": "1.4.13",
       "dependencies": {
         "@atlaskit/pragmatic-drag-and-drop": "^1.3.1",
-        "@comfyorg/comfyui-electron-types": "^0.2.16",
-        "@comfyorg/litegraph": "^0.8.26",
+        "@comfyorg/comfyui-electron-types": "^0.3.19",
+        "@comfyorg/litegraph": "^0.8.37",
         "@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",
@@ -1916,15 +1917,15 @@
       "dev": true
     },
     "node_modules/@comfyorg/comfyui-electron-types": {
-      "version": "0.2.16",
-      "resolved": "https://registry.npmjs.org/@comfyorg/comfyui-electron-types/-/comfyui-electron-types-0.2.16.tgz",
-      "integrity": "sha512-Hm6NeyMK4sd2V5AyOnvfI+tvCsXr5NBG8wOZlWyyD17ADpbQnpm6qPMWzvm4vCp/YvTR7cUbDGiY0quhofuQGg==",
+      "version": "0.3.19",
+      "resolved": "https://registry.npmjs.org/@comfyorg/comfyui-electron-types/-/comfyui-electron-types-0.3.19.tgz",
+      "integrity": "sha512-VNr542eaLVmaeSJIvGv/Y5OiC2vYiLy+FtjwYtP+J8M5BSy88GCikX2K9NIkLPtcw9DLolVK3XWuIvFpsOK0zg==",
       "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.37",
+      "resolved": "https://registry.npmjs.org/@comfyorg/litegraph/-/litegraph-0.8.37.tgz",
+      "integrity": "sha512-HI3msNigdlW1pz5HMU7+5UpLX0TkWkLD8qOeVBFTwq4tGjsEfqWs6lowyjsWSJcjef/0fVvjsKV5hsTbeVWVkA==",
       "license": "MIT"
     },
     "node_modules/@cspotcode/source-map-support": {
@@ -2459,9 +2460,9 @@
       }
     },
     "node_modules/@eslint/plugin-kit": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.2.0.tgz",
-      "integrity": "sha512-vH9PiIMMwvhCx31Af3HiGzsVNULDbyVkHXwlemn/B0TFj/00ho3y55efXrUZTfQipxoHC5u4xq6zblww1zm1Ig==",
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.2.3.tgz",
+      "integrity": "sha512-2b/g5hRmpbb1o4GnTZax9N9m0FXzz9OV42ZzI4rDDMDuHUqigAiQCEWChBWCY4ztAGVRjoWT19v0yMmc5/L5kA==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
@@ -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",
@@ -5807,10 +5851,11 @@
       "dev": true
     },
     "node_modules/cross-spawn": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
+      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "path-key": "^3.1.0",
         "shebang-command": "^2.0.0",
@@ -6778,6 +6823,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,11 +10119,19 @@
         "node": ">= 8"
       }
     },
-    "node_modules/micromatch": {
-      "version": "4.0.7",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.7.tgz",
-      "integrity": "sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q==",
+    "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.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
         "braces": "^3.0.3",
         "picomatch": "^2.3.1"
@@ -11952,6 +12012,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 +12236,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.13",
   "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",
@@ -72,8 +72,8 @@
   },
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^1.3.1",
-    "@comfyorg/comfyui-electron-types": "^0.2.16",
-    "@comfyorg/litegraph": "^0.8.26",
+    "@comfyorg/comfyui-electron-types": "^0.3.19",
+    "@comfyorg/litegraph": "^0.8.37",
     "@primevue/themes": "^4.0.5",
     "@vueuse/core": "^11.0.0",
     "@xterm/addon-fit": "^0.10.0",
@@ -87,14 +87,11 @@
     "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",
     "zod": "^3.23.8",
     "zod-validation-error": "^3.3.0"
-  },
-  "lint-staged": {
-    "./**/*.{js,ts,tsx,vue}": "prettier --write",
-    "**/*.ts": "tsc-files --noEmit"
   }
 }

src/components/BrowserTabTitle.vue

@@ -26,7 +26,10 @@ const betaMenuEnabled = computed(
 
 const workflowStore = useWorkflowStore()
 const isUnsavedText = computed(() =>
-  workflowStore.activeWorkflow?.isModified ? ' *' : ''
+  workflowStore.activeWorkflow?.isModified ||
+  !workflowStore.activeWorkflow?.isPersisted
+    ? ' *'
+    : ''
 )
 const workflowNameText = computed(() => {
   const workflowName = workflowStore.activeWorkflow?.filename

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 overflow-hidden 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, 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,62 @@
+<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>
+) => {
+  const terminalApi = electronAPI().Terminal
+
+  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/FormItem.vue

@@ -0,0 +1,98 @@
+<!-- A generalized form item for rendering in a form. -->
+<template>
+  <div class="form-label flex flex-grow items-center">
+    <span class="text-muted" :class="props.labelClass">
+      <slot name="name-prefix"></slot>
+      {{ props.item.name }}
+      <i
+        v-if="props.item.tooltip"
+        class="pi pi-info-circle bg-transparent"
+        v-tooltip="props.item.tooltip"
+      />
+      <slot name="name-suffix"></slot>
+    </span>
+  </div>
+  <div class="form-input flex justify-end">
+    <component
+      :is="markRaw(getFormComponent(props.item))"
+      :id="props.id"
+      v-model:modelValue="formValue"
+      v-bind="getFormAttrs(props.item)"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { FormItem } from '@/types/settingTypes'
+import { markRaw, type Component } from 'vue'
+import InputText from 'primevue/inputtext'
+import InputNumber from 'primevue/inputnumber'
+import Select from 'primevue/select'
+import ToggleSwitch from 'primevue/toggleswitch'
+import CustomFormValue from '@/components/common/CustomFormValue.vue'
+import InputSlider from '@/components/common/InputSlider.vue'
+
+const formValue = defineModel<any>('formValue')
+const props = defineProps<{
+  item: FormItem
+  id?: string
+  labelClass?: string | Record<string, boolean>
+}>()
+
+function getFormAttrs(item: FormItem) {
+  const attrs = { ...(item.attrs || {}) }
+  const inputType = item.type
+  if (typeof inputType === 'function') {
+    attrs['renderFunction'] = () =>
+      inputType(
+        props.item.name,
+        (v: any) => (formValue.value = v),
+        formValue.value,
+        item.attrs
+      )
+  }
+  switch (item.type) {
+    case 'combo':
+      attrs['options'] =
+        typeof item.options === 'function'
+          ? item.options(formValue.value)
+          : item.options
+      if (typeof item.options[0] !== 'string') {
+        attrs['optionLabel'] = 'text'
+        attrs['optionValue'] = 'value'
+      }
+      break
+  }
+  return attrs
+}
+
+function getFormComponent(item: FormItem): Component {
+  if (typeof item.type === 'function') {
+    return CustomFormValue
+  }
+  switch (item.type) {
+    case 'boolean':
+      return ToggleSwitch
+    case 'number':
+      return InputNumber
+    case 'slider':
+      return InputSlider
+    case 'combo':
+      return Select
+    default:
+      return InputText
+  }
+}
+</script>
+
+<style scoped>
+.form-input :deep(.input-slider) .p-inputnumber input,
+.form-input :deep(.input-slider) .slider-part {
+  @apply w-20;
+}
+
+.form-input :deep(.p-inputtext),
+.form-input :deep(.p-select) {
+  @apply w-44;
+}
+</style>

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/dialog/GlobalDialog.vue

@@ -1,61 +1,51 @@
 <!-- The main global dialog to show various things -->
 <template>
   <Dialog
-    v-model:visible="dialogStore.isVisible"
+    v-for="(item, index) in dialogStore.dialogStack"
+    :key="item.key"
+    v-model:visible="item.visible"
     class="global-dialog"
-    modal
-    closable
-    closeOnEscape
-    dismissableMask
-    :maximizable="maximizable"
-    :maximized="maximized"
-    @hide="dialogStore.closeDialog"
-    @maximize="onMaximize"
-    @unmaximize="onUnmaximize"
-    :aria-labelledby="headerId"
+    v-bind="item.dialogComponentProps"
+    :auto-z-index="false"
+    :pt:mask:style="{ zIndex: baseZIndex + index + 1 }"
+    :aria-labelledby="item.key"
   >
     <template #header>
       <component
-        v-if="dialogStore.headerComponent"
-        :is="dialogStore.headerComponent"
-        :id="headerId"
+        v-if="item.headerComponent"
+        :is="item.headerComponent"
+        :id="item.key"
       />
-      <h3 v-else :id="headerId">{{ dialogStore.title || ' ' }}</h3>
+      <h3 v-else :id="item.key">{{ item.title || ' ' }}</h3>
     </template>
 
-    <component :is="dialogStore.component" v-bind="contentProps" />
+    <component
+      :is="item.component"
+      v-bind="item.contentProps"
+      :maximized="item.dialogComponentProps.maximized"
+    />
   </Dialog>
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, onMounted } from 'vue'
+import { ZIndex } from '@primeuix/utils/zindex'
+import { usePrimeVue } from '@primevue/core'
 import { useDialogStore } from '@/stores/dialogStore'
 import Dialog from 'primevue/dialog'
 
 const dialogStore = useDialogStore()
-const maximizable = computed(
-  () => dialogStore.dialogComponentProps.maximizable ?? false
-)
-const maximized = ref(false)
 
-const onMaximize = () => {
-  maximized.value = true
-}
+const primevue = usePrimeVue()
 
-const onUnmaximize = () => {
-  maximized.value = false
-}
+const baseZIndex = computed(() => {
+  return primevue?.config?.zIndex?.modal ?? 1100
+})
 
-const contentProps = computed(() =>
-  maximizable.value
-    ? {
-        ...dialogStore.props,
-        maximized: maximized.value
-      }
-    : dialogStore.props
-)
-
-const headerId = `dialog-${Math.random().toString(36).substr(2, 9)}`
+onMounted(() => {
+  const mask = document.createElement('div')
+  ZIndex.set('model', mask, baseZIndex.value)
+})
 </script>
 
 <style>

src/components/dialog/content/ExecutionErrorDialogContent.vue

@@ -20,6 +20,7 @@
     </template>
 
     <div class="action-container">
+      <ReportIssueButton v-if="showSendError" :error="props.error" />
       <FindIssueButton
         :errorMessage="props.error.exception_message"
         :repoOwner="repoOwner"
@@ -37,16 +38,18 @@
 
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
-import { useClipboard } from '@vueuse/core'
 import { useToast } from 'primevue/usetoast'
 import Button from 'primevue/button'
 import Divider from 'primevue/divider'
 import ScrollPanel from 'primevue/scrollpanel'
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
 import FindIssueButton from '@/components/dialog/content/error/FindIssueButton.vue'
+import ReportIssueButton from '@/components/dialog/content/error/ReportIssueButton.vue'
 import type { ExecutionErrorWsMessage, SystemStats } from '@/types/apiTypes'
 import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
+import { isElectron } from '@/utils/envUtil'
+import { useCopyToClipboard } from '@/hooks/clipboardHooks'
 
 const props = defineProps<{
   error: ExecutionErrorWsMessage
@@ -59,9 +62,9 @@ const reportOpen = ref(false)
 const showReport = () => {
   reportOpen.value = true
 }
+const showSendError = isElectron()
 
 const toast = useToast()
-const { copy, isSupported } = useClipboard()
 
 onMounted(async () => {
   try {
@@ -136,30 +139,9 @@ ${workflowText}
 `
 }
 
+const { copyToClipboard } = useCopyToClipboard()
 const copyReportToClipboard = async () => {
-  if (isSupported) {
-    try {
-      await copy(reportContent.value)
-      toast.add({
-        severity: 'success',
-        summary: 'Success',
-        detail: 'Report copied to clipboard',
-        life: 3000
-      })
-    } catch (err) {
-      toast.add({
-        severity: 'error',
-        summary: 'Error',
-        detail: 'Failed to copy report'
-      })
-    }
-  } else {
-    toast.add({
-      severity: 'error',
-      summary: 'Error',
-      detail: 'Clipboard API not supported in your browser'
-    })
-  }
+  await copyToClipboard(reportContent.value)
 }
 
 const openNewGithubIssue = async () => {

src/components/dialog/content/SettingDialogContent.vue

@@ -17,63 +17,46 @@
       />
     </ScrollPanel>
     <Divider layout="vertical" class="mx-1 2xl:mx-4" />
-    <ScrollPanel class="settings-content flex-grow">
-      <Tabs :value="tabValue" :lazy="true">
-        <FirstTimeUIMessage v-if="tabValue === 'Comfy'" />
-        <TabPanels class="settings-tab-panels">
-          <TabPanel key="search-results" value="Search Results">
-            <div v-if="searchResults.length > 0">
-              <SettingGroup
-                v-for="(group, i) in searchResults"
-                :key="group.label"
-                :divider="i !== 0"
-                :group="group"
-              />
-            </div>
-            <NoResultsPlaceholder
-              v-else
-              icon="pi pi-search"
-              :title="$t('noResultsFound')"
-              :message="$t('searchFailedMessage')"
-            />
-          </TabPanel>
-          <TabPanel
-            v-for="category in categories"
-            :key="category.key"
-            :value="category.label"
-          >
-            <SettingGroup
-              v-for="(group, i) in sortedGroups(category)"
-              :key="group.label"
-              :divider="i !== 0"
-              :group="{
-                label: group.label,
-                settings: flattenTree<SettingParams>(group)
-              }"
-            />
-          </TabPanel>
-          <TabPanel key="about" value="About">
-            <AboutPanel />
-          </TabPanel>
-          <TabPanel key="keybinding" value="Keybinding">
-            <Suspense>
-              <KeybindingPanel />
-              <template #fallback>
-                <div>Loading keybinding panel...</div>
-              </template>
-            </Suspense>
-          </TabPanel>
-          <TabPanel key="extension" value="Extension">
-            <Suspense>
-              <ExtensionPanel />
-              <template #fallback>
-                <div>Loading extension panel...</div>
-              </template>
-            </Suspense>
-          </TabPanel>
-        </TabPanels>
-      </Tabs>
-    </ScrollPanel>
+    <Tabs :value="tabValue" :lazy="true" class="settings-content h-full w-full">
+      <TabPanels class="settings-tab-panels h-full w-full pr-0">
+        <PanelTemplate value="Search Results">
+          <SettingsPanel :settingGroups="searchResults" />
+        </PanelTemplate>
+
+        <PanelTemplate
+          v-for="category in settingCategories"
+          :key="category.key"
+          :value="category.label"
+        >
+          <template #header>
+            <FirstTimeUIMessage v-if="tabValue === 'Comfy'" />
+          </template>
+          <SettingsPanel :settingGroups="sortedGroups(category)" />
+        </PanelTemplate>
+
+        <AboutPanel />
+        <Suspense>
+          <KeybindingPanel />
+          <template #fallback>
+            <div>Loading keybinding panel...</div>
+          </template>
+        </Suspense>
+
+        <Suspense>
+          <ExtensionPanel />
+          <template #fallback>
+            <div>Loading extension panel...</div>
+          </template>
+        </Suspense>
+
+        <Suspense>
+          <ServerConfigPanel />
+          <template #fallback>
+            <div>Loading server config panel...</div>
+          </template>
+        </Suspense>
+      </TabPanels>
+    </Tabs>
   </div>
 </template>
 
@@ -82,17 +65,17 @@ import { ref, computed, onMounted, watch, defineAsyncComponent } from 'vue'
 import Listbox from 'primevue/listbox'
 import Tabs from 'primevue/tabs'
 import TabPanels from 'primevue/tabpanels'
-import TabPanel from 'primevue/tabpanel'
 import Divider from 'primevue/divider'
 import ScrollPanel from 'primevue/scrollpanel'
 import { SettingTreeNode, useSettingStore } from '@/stores/settingStore'
-import { SettingParams } from '@/types/settingTypes'
-import SettingGroup from './setting/SettingGroup.vue'
+import { ISettingGroup, SettingParams } from '@/types/settingTypes'
 import SearchBox from '@/components/common/SearchBox.vue'
-import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
-import { flattenTree } from '@/utils/treeUtil'
+import SettingsPanel from './setting/SettingsPanel.vue'
+import PanelTemplate from './setting/PanelTemplate.vue'
 import AboutPanel from './setting/AboutPanel.vue'
 import FirstTimeUIMessage from './setting/FirstTimeUIMessage.vue'
+import { flattenTree } from '@/utils/treeUtil'
+import { isElectron } from '@/utils/envUtil'
 
 const KeybindingPanel = defineAsyncComponent(
   () => import('./setting/KeybindingPanel.vue')
@@ -100,11 +83,9 @@ const KeybindingPanel = defineAsyncComponent(
 const ExtensionPanel = defineAsyncComponent(
   () => import('./setting/ExtensionPanel.vue')
 )
-
-interface ISettingGroup {
-  label: string
-  settings: SettingParams[]
-}
+const ServerConfigPanel = defineAsyncComponent(
+  () => import('./setting/ServerConfigPanel.vue')
+)
 
 const aboutPanelNode: SettingTreeNode = {
   key: 'about',
@@ -124,18 +105,36 @@ const extensionPanelNode: SettingTreeNode = {
   children: []
 }
 
+const serverConfigPanelNode: SettingTreeNode = {
+  key: 'server-config',
+  label: 'Server-Config',
+  children: []
+}
+
 const extensionPanelNodeList = computed<SettingTreeNode[]>(() => {
   const settingStore = useSettingStore()
   const showExtensionPanel = settingStore.get('Comfy.Settings.ExtensionPanel')
   return showExtensionPanel ? [extensionPanelNode] : []
 })
 
+/**
+ * Server config panel is only available in Electron. We might want to support
+ * it in the web version in the future.
+ */
+const serverConfigPanelNodeList = computed<SettingTreeNode[]>(() => {
+  return isElectron() ? [serverConfigPanelNode] : []
+})
+
 const settingStore = useSettingStore()
 const settingRoot = computed<SettingTreeNode>(() => settingStore.settingTree)
+const settingCategories = computed<SettingTreeNode[]>(
+  () => settingRoot.value.children ?? []
+)
 const categories = computed<SettingTreeNode[]>(() => [
-  ...(settingRoot.value.children || []),
+  ...settingCategories.value,
   keybindingPanelNode,
   ...extensionPanelNodeList.value,
+  ...serverConfigPanelNodeList.value,
   aboutPanelNode
 ])
 const activeCategory = ref<SettingTreeNode | null>(null)
@@ -151,10 +150,13 @@ onMounted(() => {
   activeCategory.value = categories.value[0]
 })
 
-const sortedGroups = (category: SettingTreeNode) => {
-  return [...(category.children || [])].sort((a, b) =>
-    a.label.localeCompare(b.label)
-  )
+const sortedGroups = (category: SettingTreeNode): ISettingGroup[] => {
+  return [...(category.children ?? [])]
+    .sort((a, b) => a.label.localeCompare(b.label))
+    .map((group) => ({
+      label: group.label,
+      settings: flattenTree<SettingParams>(group)
+    }))
 }
 
 const searchQuery = ref<string>('')

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

@@ -0,0 +1,51 @@
+<template>
+  <Button
+    @click="reportIssue"
+    :label="$t('reportIssue')"
+    :severity="submitted ? 'success' : 'secondary'"
+    :icon="icon"
+    :disabled="submitted"
+    v-tooltip="$t('reportIssueTooltip')"
+  >
+  </Button>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, defineProps } from 'vue'
+import Button from 'primevue/button'
+import { useToast } from 'primevue/usetoast'
+import { ExecutionErrorWsMessage } from '@/types/apiTypes'
+import { useI18n } from 'vue-i18n'
+import { electronAPI } from '@/utils/envUtil'
+
+const { error } = defineProps<{
+  error: ExecutionErrorWsMessage
+}>()
+
+const { t } = useI18n()
+const toast = useToast()
+const submitting = ref(false)
+const submitted = ref(false)
+const icon = computed(
+  () => `pi ${submitting.value ? 'pi-spin pi-spinner' : 'pi-send'}`
+)
+
+const reportIssue = async () => {
+  if (submitting.value) return
+  submitting.value = true
+  try {
+    await electronAPI().sendErrorToSentry(error.exception_message, {
+      stackTrace: error.traceback?.join('\n'),
+      nodeType: error.node_type
+    })
+    submitted.value = true
+    toast.add({
+      severity: 'success',
+      summary: t('reportSent'),
+      life: 3000
+    })
+  } finally {
+    submitting.value = false
+  }
+}
+</script>

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="about-container">
+  <PanelTemplate value="About" class="about-container">
     <h2 class="text-2xl font-bold mb-2">{{ $t('about') }}</h2>
     <div class="space-y-2">
       <a
@@ -26,10 +26,11 @@
       v-if="systemStatsStore.systemStats"
       :stats="systemStatsStore.systemStats"
     />
-  </div>
+  </PanelTemplate>
 </template>
 
 <script setup lang="ts">
+import PanelTemplate from './PanelTemplate.vue'
 import { useSystemStatsStore } from '@/stores/systemStatsStore'
 import { useAboutPanelStore } from '@/stores/aboutPanelStore'
 import Tag from 'primevue/tag'

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

@@ -1,6 +1,35 @@
 <template>
-  <div class="extension-panel">
-    <DataTable :value="extensionStore.extensions" stripedRows size="small">
+  <PanelTemplate value="Extension" class="extension-panel">
+    <template #header>
+      <SearchBox
+        v-model="filters['global'].value"
+        :placeholder="$t('searchExtensions') + '...'"
+      />
+      <Message v-if="hasChanges" severity="info" pt:text="w-full">
+        <ul>
+          <li v-for="ext in changedExtensions" :key="ext.name">
+            <span>
+              {{ extensionStore.isExtensionEnabled(ext.name) ? '[-]' : '[+]' }}
+            </span>
+            {{ ext.name }}
+          </li>
+        </ul>
+        <div class="flex justify-end">
+          <Button
+            :label="$t('reloadToApplyChanges')"
+            @click="applyChanges"
+            outlined
+            severity="danger"
+          />
+        </div>
+      </Message>
+    </template>
+    <DataTable
+      :value="extensionStore.extensions"
+      stripedRows
+      size="small"
+      :filters="filters"
+    >
       <Column field="name" :header="$t('extensionName')" sortable></Column>
       <Column
         :pt="{
@@ -15,28 +44,7 @@
         </template>
       </Column>
     </DataTable>
-    <div class="mt-4">
-      <Message v-if="hasChanges" severity="info">
-        <ul>
-          <li v-for="ext in changedExtensions" :key="ext.name">
-            <span>
-              {{ extensionStore.isExtensionEnabled(ext.name) ? '[-]' : '[+]' }}
-            </span>
-            {{ ext.name }}
-          </li>
-        </ul>
-      </Message>
-      <Button
-        :label="$t('reloadToApplyChanges')"
-        icon="pi pi-refresh"
-        @click="applyChanges"
-        :disabled="!hasChanges"
-        text
-        fluid
-        severity="danger"
-      />
-    </div>
-  </div>
+  </PanelTemplate>
 </template>
 
 <script setup lang="ts">
@@ -48,6 +56,13 @@ import Column from 'primevue/column'
 import ToggleSwitch from 'primevue/toggleswitch'
 import Button from 'primevue/button'
 import Message from 'primevue/message'
+import { FilterMatchMode } from '@primevue/core/api'
+import PanelTemplate from './PanelTemplate.vue'
+import SearchBox from '@/components/common/SearchBox.vue'
+
+const filters = ref({
+  global: { value: '', matchMode: FilterMatchMode.CONTAINS }
+})
 
 const extensionStore = useExtensionStore()
 const settingStore = useSettingStore()

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

@@ -1,5 +1,12 @@
 <template>
-  <div class="keybinding-panel">
+  <PanelTemplate value="Keybinding" class="keybinding-panel">
+    <template #header>
+      <SearchBox
+        v-model="filters['global'].value"
+        :placeholder="$t('searchKeybindings') + '...'"
+      />
+    </template>
+
     <DataTable
       :value="commandsData"
       v-model:selection="selectedCommandData"
@@ -11,12 +18,6 @@
         header: 'px-0'
       }"
     >
-      <template #header>
-        <SearchBox
-          v-model="filters['global'].value"
-          :placeholder="$t('searchKeybindings') + '...'"
-        />
-      </template>
       <Column field="actions" header="">
         <template #body="slotProps">
           <div class="actions invisible flex flex-row">
@@ -109,7 +110,7 @@
       text
       @click="resetKeybindings"
     />
-  </div>
+  </PanelTemplate>
 </template>
 
 <script setup lang="ts">
@@ -127,6 +128,7 @@ import Dialog from 'primevue/dialog'
 import InputText from 'primevue/inputtext'
 import Message from 'primevue/message'
 import Tag from 'primevue/tag'
+import PanelTemplate from './PanelTemplate.vue'
 import KeyComboDisplay from './keybinding/KeyComboDisplay.vue'
 import SearchBox from '@/components/common/SearchBox.vue'
 import { useToast } from 'primevue/usetoast'

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

@@ -0,0 +1,21 @@
+<template>
+  <TabPanel :value="props.value" class="h-full w-full" :class="props.class">
+    <div class="flex flex-col h-full w-full gap-2">
+      <slot name="header" />
+      <ScrollPanel class="flex-grow h-0 pr-2">
+        <slot />
+      </ScrollPanel>
+      <slot name="footer" />
+    </div>
+  </TabPanel>
+</template>
+
+<script setup lang="ts">
+import TabPanel from 'primevue/tabpanel'
+import ScrollPanel from 'primevue/scrollpanel'
+
+const props = defineProps<{
+  value: string
+  class?: string
+}>()
+</script>

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

@@ -0,0 +1,116 @@
+<template>
+  <PanelTemplate value="Server-Config" class="server-config-panel">
+    <template #header>
+      <div class="flex flex-col gap-2">
+        <Message
+          v-if="modifiedConfigs.length > 0"
+          severity="info"
+          pt:text="w-full"
+        >
+          <p>
+            {{ $t('serverConfig.modifiedConfigs') }}
+          </p>
+          <ul>
+            <li v-for="config in modifiedConfigs" :key="config.id">
+              {{ config.name }}: {{ config.initialValue }} → {{ config.value }}
+            </li>
+          </ul>
+          <div class="flex justify-end gap-2">
+            <Button
+              :label="$t('serverConfig.revertChanges')"
+              @click="revertChanges"
+              outlined
+            />
+            <Button
+              :label="$t('serverConfig.restart')"
+              @click="restartApp"
+              outlined
+              severity="danger"
+            />
+          </div>
+        </Message>
+        <Message v-if="commandLineArgs" severity="secondary" pt:text="w-full">
+          <template #icon>
+            <i-lucide:terminal class="text-xl font-bold" />
+          </template>
+          <div class="flex items-center justify-between">
+            <p>{{ commandLineArgs }}</p>
+            <Button
+              icon="pi pi-clipboard"
+              @click="copyCommandLineArgs"
+              severity="secondary"
+              text
+            />
+          </div>
+        </Message>
+      </div>
+    </template>
+    <div
+      v-for="([label, items], i) in Object.entries(serverConfigsByCategory)"
+      :key="label"
+    >
+      <Divider v-if="i > 0" />
+      <h3>{{ formatCamelCase(label) }}</h3>
+      <div
+        v-for="item in items"
+        :key="item.name"
+        class="flex items-center mb-4"
+      >
+        <FormItem
+          :item="item"
+          v-model:formValue="item.value"
+          :id="item.id"
+          :labelClass="{
+            'text-highlight': item.initialValue !== item.value
+          }"
+        />
+      </div>
+    </div>
+  </PanelTemplate>
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import Message from 'primevue/message'
+import Divider from 'primevue/divider'
+import FormItem from '@/components/common/FormItem.vue'
+import PanelTemplate from './PanelTemplate.vue'
+import { formatCamelCase } from '@/utils/formatUtil'
+import { useServerConfigStore } from '@/stores/serverConfigStore'
+import { storeToRefs } from 'pinia'
+import { electronAPI } from '@/utils/envUtil'
+import { useSettingStore } from '@/stores/settingStore'
+import { watch } from 'vue'
+import { useCopyToClipboard } from '@/hooks/clipboardHooks'
+
+const settingStore = useSettingStore()
+const serverConfigStore = useServerConfigStore()
+const {
+  serverConfigsByCategory,
+  serverConfigValues,
+  launchArgs,
+  commandLineArgs,
+  modifiedConfigs
+} = storeToRefs(serverConfigStore)
+
+const revertChanges = () => {
+  serverConfigStore.revertChanges()
+}
+
+const restartApp = () => {
+  electronAPI().restartApp()
+}
+
+watch(launchArgs, (newVal) => {
+  settingStore.set('Comfy.Server.LaunchArgs', newVal)
+})
+
+watch(serverConfigValues, (newVal) => {
+  settingStore.set('Comfy.Server.ServerConfigValues', newVal)
+})
+
+const { copyToClipboard } = useCopyToClipboard()
+const copyCommandLineArgs = async () => {
+  await copyToClipboard(commandLineArgs.value)
+}
+</script>

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

@@ -7,45 +7,15 @@
       :key="setting.id"
       class="setting-item flex items-center mb-4"
     >
-      <div class="setting-label flex flex-grow items-center">
-        <span class="text-[var(--p-text-muted-color)]">
-          <Tag v-if="setting.experimental" :value="$t('experimental')" />
-          <Tag
-            v-if="setting.deprecated"
-            :value="$t('deprecated')"
-            severity="danger" />
-          {{ setting.name }}
-          <i
-            v-if="setting.tooltip"
-            class="pi pi-info-circle bg-transparent"
-            v-tooltip="setting.tooltip"
-        /></span>
-      </div>
-      <div class="setting-input flex justify-end">
-        <component
-          :is="markRaw(getSettingComponent(setting))"
-          :id="setting.id"
-          :modelValue="settingStore.get(setting.id)"
-          @update:modelValue="updateSetting(setting, $event)"
-          v-bind="getSettingAttrs(setting)"
-        />
-      </div>
+      <SettingItem :setting="setting" />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { useSettingStore } from '@/stores/settingStore'
-import { SettingParams } from '@/types/settingTypes'
-import { markRaw, type Component } from 'vue'
-import InputText from 'primevue/inputtext'
-import InputNumber from 'primevue/inputnumber'
-import Select from 'primevue/select'
-import ToggleSwitch from 'primevue/toggleswitch'
 import Divider from 'primevue/divider'
-import Tag from 'primevue/tag'
-import CustomSettingValue from '@/components/dialog/content/setting/CustomSettingValue.vue'
-import InputSlider from '@/components/common/InputSlider.vue'
+import SettingItem from '@/components/dialog/content/setting/SettingItem.vue'
+import { SettingParams } from '@/types/settingTypes'
 import { formatCamelCase } from '@/utils/formatUtil'
 
 defineProps<{
@@ -55,67 +25,4 @@ defineProps<{
   }
   divider?: boolean
 }>()
-
-const settingStore = useSettingStore()
-
-function getSettingAttrs(setting: SettingParams) {
-  const attrs = { ...(setting.attrs || {}) }
-  const settingType = setting.type
-  if (typeof settingType === 'function') {
-    attrs['renderFunction'] = () =>
-      settingType(
-        setting.name,
-        (v) => updateSetting(setting, v),
-        settingStore.get(setting.id),
-        setting.attrs
-      )
-  }
-  switch (setting.type) {
-    case 'combo':
-      attrs['options'] =
-        typeof setting.options === 'function'
-          ? setting.options(settingStore.get(setting.id))
-          : setting.options
-      if (typeof setting.options[0] !== 'string') {
-        attrs['optionLabel'] = 'text'
-        attrs['optionValue'] = 'value'
-      }
-      break
-  }
-  return attrs
-}
-
-const updateSetting = (setting: SettingParams, value: any) => {
-  settingStore.set(setting.id, value)
-}
-
-function getSettingComponent(setting: SettingParams): Component {
-  if (typeof setting.type === 'function') {
-    return CustomSettingValue
-  }
-  switch (setting.type) {
-    case 'boolean':
-      return ToggleSwitch
-    case 'number':
-      return InputNumber
-    case 'slider':
-      return InputSlider
-    case 'combo':
-      return Select
-    default:
-      return InputText
-  }
-}
 </script>
-
-<style scoped>
-.setting-input :deep(.input-slider) .p-inputnumber input,
-.setting-input :deep(.input-slider) .slider-part {
-  @apply w-20;
-}
-
-.setting-input :deep(.p-inputtext),
-.setting-input :deep(.p-select) {
-  @apply w-44;
-}
-</style>

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

@@ -0,0 +1,35 @@
+<template>
+  <FormItem
+    :item="setting"
+    :id="setting.id"
+    :formValue="settingValue"
+    @update:formValue="updateSettingValue"
+  >
+    <template #name-prefix>
+      <Tag v-if="setting.experimental" :value="$t('experimental')" />
+      <Tag
+        v-if="setting.deprecated"
+        :value="$t('deprecated')"
+        severity="danger"
+      />
+    </template>
+  </FormItem>
+</template>
+
+<script setup lang="ts">
+import Tag from 'primevue/tag'
+import FormItem from '@/components/common/FormItem.vue'
+import { useSettingStore } from '@/stores/settingStore'
+import { SettingParams } from '@/types/settingTypes'
+import { computed } from 'vue'
+
+const props = defineProps<{
+  setting: SettingParams
+}>()
+
+const settingStore = useSettingStore()
+const settingValue = computed(() => settingStore.get(props.setting.id))
+const updateSettingValue = (value: any) => {
+  settingStore.set(props.setting.id, value)
+}
+</script>

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

@@ -0,0 +1,26 @@
+<template>
+  <div v-if="props.settingGroups.length > 0">
+    <SettingGroup
+      v-for="(group, i) in props.settingGroups"
+      :key="group.label"
+      :divider="i !== 0"
+      :group="group"
+    />
+  </div>
+  <NoResultsPlaceholder
+    v-else
+    icon="pi pi-search"
+    :title="$t('noResultsFound')"
+    :message="$t('searchFailedMessage')"
+  />
+</template>
+
+<script setup lang="ts">
+import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
+import SettingGroup from './SettingGroup.vue'
+import { ISettingGroup } from '@/types/settingTypes'
+
+const props = defineProps<{
+  settingGroups: ISettingGroup[]
+}>()
+</script>

src/components/graph/GraphCanvas.vue

@@ -47,7 +47,8 @@ import {
   DragAndScale,
   LGraphCanvas,
   ContextMenu,
-  LGraphBadge
+  LGraphBadge,
+  CanvasPointer
 } from '@comfyorg/litegraph'
 import type { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
 import { useCanvasStore } from '@/stores/graphStore'
@@ -61,6 +62,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)
@@ -161,6 +163,28 @@ watchEffect(() => {
   }
 })
 
+watchEffect(() => {
+  CanvasPointer.doubleClickTime = settingStore.get(
+    'Comfy.Pointer.DoubleClickTime'
+  )
+})
+
+watchEffect(() => {
+  CanvasPointer.bufferTime = settingStore.get('Comfy.Pointer.ClickBufferTime')
+})
+
+watchEffect(() => {
+  CanvasPointer.maxClickDrift = settingStore.get('Comfy.Pointer.ClickDrift')
+})
+
+watchEffect(() => {
+  LiteGraph.CANVAS_GRID_SIZE = settingStore.get('Comfy.SnapToGrid.GridSize')
+})
+
+watchEffect(() => {
+  LiteGraph.alwaysSnapToGrid = settingStore.get('pysssss.SnapToGrid')
+})
+
 watchEffect(() => {
   if (!canvasStore.canvas) return
 
@@ -178,13 +202,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 +299,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/graph/NodeTooltip.vue

@@ -10,20 +10,23 @@
 </template>
 
 <script setup lang="ts">
-import { nextTick, ref } from 'vue'
+import { nextTick, ref, watch } from 'vue'
 import { LiteGraph } from '@comfyorg/litegraph'
 import { app as comfyApp } from '@/scripts/app'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
+import { useHoveredItemStore } from '@/stores/graphStore'
 import { useEventListener } from '@vueuse/core'
 
 let idleTimeout: number
 const nodeDefStore = useNodeDefStore()
+const hoveredItemStore = useHoveredItemStore()
 const tooltipRef = ref<HTMLDivElement>()
 const tooltipText = ref('')
 const left = ref<string>()
 const top = ref<string>()
 
 const hideTooltip = () => (tooltipText.value = null)
+const clearHovered = () => (hoveredItemStore.value = null)
 
 const showTooltip = async (tooltip: string | null | undefined) => {
   if (!tooltip) return
@@ -43,6 +46,36 @@ const showTooltip = async (tooltip: string | null | undefined) => {
     top.value = comfyApp.canvas.mouse[1] + rect.height + 'px'
   }
 }
+watch(hoveredItemStore, (hoveredItem) => {
+  if (!hoveredItem.value) {
+    return hideTooltip()
+  }
+  const item = hoveredItem.value
+  const nodeDef =
+    nodeDefStore.nodeDefsByName[item.node.type] ??
+    LiteGraph.registered_node_types[item.node.type]?.nodeData
+  if (item.type == 'Title') {
+    let description = nodeDef.description
+    if (Array.isArray(description)) {
+      description = description[0]
+    }
+    return showTooltip(description)
+  } else if (item.type == 'Input') {
+    showTooltip(nodeDef.input.getInput(item.inputName)?.tooltip)
+  } else if (item.type == 'Output') {
+    showTooltip(nodeDef?.output?.all?.[item.outputSlot]?.tooltip)
+  } else if (item.type == 'Widget') {
+    showTooltip(
+      item.widget.tooltip ??
+        (
+          nodeDef.input.optional?.[item.widget.name] ??
+          nodeDef.input.required?.[item.widget.name]
+        )?.tooltip
+    )
+  } else {
+    hideTooltip()
+  }
+})
 
 const onIdle = () => {
   const { canvas } = comfyApp
@@ -50,13 +83,15 @@ const onIdle = () => {
   if (!node) return
 
   const ctor = node.constructor as { title_mode?: 0 | 1 | 2 | 3 }
-  const nodeDef = nodeDefStore.nodeDefsByName[node.type]
+  const nodeDef =
+    nodeDefStore.nodeDefsByName[node.type] ??
+    LiteGraph.registered_node_types[node.type]?.nodeData
 
   if (
     ctor.title_mode !== LiteGraph.NO_TITLE &&
     canvas.graph_mouse[1] < node.pos[1] // If we are over a node, but not within the node then we are on its title
   ) {
-    return showTooltip(nodeDef.description)
+    hoveredItemStore.value = { node, type: 'Title' }
   }
 
   if (node.flags?.collapsed) return
@@ -69,7 +104,7 @@ const onIdle = () => {
   )
   if (inputSlot !== -1) {
     const inputName = node.inputs[inputSlot].name
-    return showTooltip(nodeDef.input.getInput(inputName)?.tooltip)
+    hoveredItemStore.value = { node, type: 'Input', inputName }
   }
 
   const outputSlot = canvas.isOverNodeOutput(
@@ -79,20 +114,18 @@ const onIdle = () => {
     [0, 0]
   )
   if (outputSlot !== -1) {
-    return showTooltip(nodeDef.output.all?.[outputSlot]?.tooltip)
+    hoveredItemStore.value = { node, type: 'Output', outputSlot }
   }
 
   const widget = comfyApp.canvas.getWidgetAtCursor()
   // Dont show for DOM widgets, these use native browser tooltips as we dont get proper mouse events on these
   if (widget && !widget.element) {
-    return showTooltip(
-      widget.tooltip ?? nodeDef.input.getInput(widget.name)?.tooltip
-    )
+    hoveredItemStore.value = { node, type: 'Widget', widget }
   }
 }
 
 const onMouseMove = (e: MouseEvent) => {
-  hideTooltip()
+  clearHovered()
   clearTimeout(idleTimeout)
 
   if ((e.target as Node).nodeName !== 'CANVAS') return
@@ -100,7 +133,7 @@ const onMouseMove = (e: MouseEvent) => {
 }
 
 useEventListener(window, 'mousemove', onMouseMove)
-useEventListener(window, 'click', hideTooltip)
+useEventListener(window, 'click', clearHovered)
 </script>
 
 <style lang="css" scoped>

src/components/install/InstallLocationPicker.vue

@@ -16,7 +16,7 @@
             v-model="installPath"
             class="w-full"
             :class="{ 'p-invalid': pathError }"
-            @change="validatePath"
+            @update:modelValue="validatePath"
           />
           <InputIcon
             class="pi pi-info-circle"
@@ -85,12 +85,14 @@ onMounted(async () => {
   appData.value = paths.appData
   appPath.value = paths.appPath
   installPath.value = paths.defaultInstallPath
+
+  await validatePath(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 +107,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/install/MigrationPicker.vue

@@ -16,7 +16,7 @@
           placeholder="Select existing ComfyUI installation (optional)"
           class="flex-1"
           :class="{ 'p-invalid': pathError }"
-          @change="validateSource"
+          @update:modelValue="validateSource"
         />
         <Button icon="pi pi-folder" @click="browsePath" class="w-12" />
       </div>
@@ -57,6 +57,18 @@
             </p>
           </div>
         </div>
+        <div class="flex items-center gap-3 p-2 rounded cursor-not-allowed">
+          <Checkbox disabled :binary="true" />
+          <div>
+            <label class="text-neutral-200 font-medium">
+              {{ $t('install.customNodes') }}
+              <Tag severity="secondary"> {{ $t('comingSoon') }}... </Tag>
+            </label>
+            <p class="text-sm text-neutral-400 my-1">
+              {{ $t('install.customNodesDescription') }}
+            </p>
+          </div>
+        </div>
       </div>
     </div>
 
@@ -70,6 +82,7 @@
 <script setup lang="ts">
 import { ref, computed, watchEffect } from 'vue'
 import { electronAPI } from '@/utils/envUtil'
+import Tag from 'primevue/tag'
 import InputText from 'primevue/inputtext'
 import Button from 'primevue/button'
 import Checkbox from 'primevue/checkbox'

src/components/node/NodePreview.vue

@@ -74,7 +74,11 @@ https://github.com/Nuked88/ComfyUI-N-Sidebar/blob/7ae7da4a9761009fb6629bc04c6830
         backgroundColor: litegraphColors.WIDGET_BGCOLOR
       }"
     >
-      {{ nodeDef.description }}
+      {{
+        Array.isArray(nodeDef.description)
+          ? nodeDef.description[0]
+          : nodeDef.description
+      }}
     </div>
   </div>
 </template>

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/DocumentationSidebarTab.vue

@@ -0,0 +1,196 @@
+<template>
+  <div v-if="!hasAnyDoc()">Select a node to see documentation.</div>
+  <div v-else-if="rawDoc" ref="docElement" v-html="rawDoc"></div>
+  <div v-else ref="docElement">
+    <div class="doc-node">{{ title }}</div>
+    <div>{{ description }}</div>
+    <div v-if="inputs.length" class="doc-section">Inputs</div>
+    <div
+      v-if="inputs.length"
+      v-for="input in inputs"
+      tabindex="-1"
+      class="doc-item"
+    >
+      {{ input[0] }}
+      <div>{{ input[1] }}</div>
+    </div>
+    <div v-if="outputs.length" class="doc-section">Outputs</div>
+    <div
+      v-if="outputs.length"
+      v-for="output in outputs"
+      tabindex="-1"
+      class="doc-item"
+    >
+      {{ output[0] }}
+      <div>{{ output[1] }}</div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, watch, onBeforeUnmount, isReactive } from 'vue'
+import { app } from '@/scripts/app'
+import { useCanvasStore } from '@/stores/graphStore'
+import { useHoveredItemStore } from '@/stores/graphStore'
+const hoveredItemStore = useHoveredItemStore()
+const canvasStore = useCanvasStore()
+
+const docElement = ref(null)
+
+let def
+const rawDoc = ref(null)
+const description = ref(null)
+const title = ref(null)
+const inputs = ref([])
+const outputs = ref([])
+
+function selectHelp(name: string, value?: string) {
+  if (!docElement.value || !name) {
+    return null
+  }
+  if (def.description[2]?.select) {
+    return def.description[2].select(docElement.value, name, value)
+  }
+  //attempt to navigate to name in help
+  function collapseUnlessMatch(items, t) {
+    var match = items.querySelector('[doc_title="' + t + '"]')
+    if (!match) {
+      for (let i of items.children) {
+        if (i.innerHTML.slice(0, t.length + 5).includes(t)) {
+          match = i
+          break
+        }
+      }
+    }
+    if (!match) {
+      return null
+    }
+    //For longer documentation items with fewer collapsable elements,
+    //scroll to make sure the entirety of the selected item is visible
+    match.scrollIntoView({ block: 'nearest' })
+    //The previous floating help implementation would try to scroll the window
+    //itself if the display was partiall offscreen. As the sidebar documentation
+    //does not pan with the canvas, this should no longer be needed
+    //window.scrollTo(0, 0)
+    for (let i of items.querySelectorAll('.doc_collapse')) {
+      if (i.contains(match)) {
+        setCollapse(i, false)
+      } else {
+        setCollapse(i, true)
+      }
+    }
+    return match
+  }
+  let target = collapseUnlessMatch(docElement.value, name)
+  if (target) {
+    target.focus()
+    if (value) {
+      collapseUnlessMatch(target, value)
+    }
+  }
+}
+function updateNode() {
+  //Grab the topmost node.
+  //current_node is topmost on screen and
+  //selectedItems is unordered
+  const node = app?.graph?._nodes[app?.graph?._nodes.length - 1]
+  if (!node) {
+    // Graph has no nodes
+    return
+  }
+  const nodeDef = LiteGraph.getNodeType(node.type).nodeData
+  if (def == nodeDef) {
+    return
+  }
+  def = nodeDef
+  title.value = def.display_name
+  if (Array.isArray(def.description)) {
+    rawDoc.value = def.description[1]
+    outputs.value = []
+    inputs.value = []
+    return
+  } else {
+    rawDoc.value = null
+  }
+  description.value = def.description
+  let input_temp = []
+  for (let k in def?.input?.required) {
+    if (def.input.required[k][1]?.tooltip) {
+      input_temp.push([k, def.input.required[k][1].tooltip])
+    }
+  }
+  for (let k in def?.optional?.required) {
+    if (def.input.optional[k][1]?.tooltip) {
+      input_temp.push([k, def.input.optional[k][1].tooltip])
+    }
+  }
+  inputs.value = input_temp
+  if (def.output_tooltips) {
+    const outputs_temp = []
+    const output_name = def.output_name || def.output
+    for (let i = 0; i < def.output_tooltips.length; i++) {
+      outputs_temp[i] = [output_name[i], def.output_tooltips[i]]
+    }
+    outputs.value = outputs_temp
+  } else {
+    outputs.value = []
+  }
+}
+function hasAnyDoc() {
+  return def?.description || inputs.value.length || outputs.value.length
+}
+watch(hoveredItemStore, (hoveredItem) => {
+  if (!hoveredItem.value) {
+    return
+  }
+  const item = hoveredItem.value
+  const nodeDef = LiteGraph.getNodeType(item.node.type).nodeData
+  if (nodeDef != def) {
+    return
+  }
+  if (item.type == 'DESCRIPTION') {
+    return
+  } else if (item.type == 'Input') {
+    selectHelp(item.inputName)
+    hoveredItem.value = null
+  } else if (item.type == 'Output') {
+    selectHelp(nodeDef?.output?.all?.[item.outputSlot]?.name)
+    hoveredItem.value = null
+  } else if (item.type == 'Widget') {
+    selectHelp(item.widget.name, item.widget.value)
+    hoveredItem.value = null
+  }
+})
+if (isReactive(canvasStore?.canvas)) {
+  watch(() => canvasStore.canvas?.current_node, updateNode)
+} else {
+  let interval = setInterval(updateNode, 300)
+  onBeforeUnmount(() => clearInterval(this.interval))
+}
+updateNode()
+</script>
+
+<style scoped>
+.doc-node {
+  font-size: 1.5em;
+}
+.doc-section {
+  background-color: var(--comfy-menu-bg);
+}
+.doc-item div {
+  margin-inline-start: 1vw;
+}
+@keyframes selectAnimation {
+  0% {
+    background-color: #5555;
+  }
+  80% {
+    background-color: #5555;
+  }
+  100% {
+    background-color: #0000;
+  }
+}
+.doc-item:focus {
+  animation: selectAnimation 2s;
+}
+</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/WorkflowsSidebarTab.vue

@@ -50,10 +50,13 @@
             <template #node="{ node }">
               <TreeExplorerTreeNode :node="node">
                 <template #before-label="{ node }">
-                  <span v-if="node.data.isModified">*</span>
+                  <span v-if="node.data.isModified || !node.data.isPersisted"
+                    >*</span
+                  >
                 </template>
                 <template #actions="{ node }">
                   <Button
+                    class="close-workflow-button"
                     icon="pi pi-times"
                     text
                     :severity="
@@ -92,11 +95,18 @@
               renderTreeNode(workflowsTree, WorkflowTreeType.Browse).children
             "
             v-model:expandedKeys="expandedKeys"
+            v-if="workflowStore.persistedWorkflows.length > 0"
           >
             <template #node="{ node }">
               <WorkflowTreeLeaf :node="node" />
             </template>
           </TreeExplorer>
+          <NoResultsPlaceholder
+            v-else
+            icon="pi pi-folder"
+            :title="$t('empty')"
+            :message="$t('noWorkflowsFound')"
+          />
         </div>
       </div>
       <div class="comfyui-workflows-search-panel" v-else>
@@ -117,6 +127,7 @@
 
 <script setup lang="ts">
 import SearchBox from '@/components/common/SearchBox.vue'
+import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
 import WorkflowTreeLeaf from '@/components/sidebar/tabs/workflows/WorkflowTreeLeaf.vue'
 import SidebarTabTemplate from '@/components/sidebar/tabs/SidebarTabTemplate.vue'
 import TreeExplorer from '@/components/common/TreeExplorer.vue'

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/modelLibrary/ElectronDownloadItems.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="mx-6 mb-4" v-if="downloads.length > 0">
+  <div class="mx-6 mb-4" v-if="inProgressDownloads.length > 0">
     <div class="text-lg my-4">
       {{ $t('electronFileDownload.inProgress') }}
     </div>
 
-    <template v-for="download in downloads" :key="download.url">
+    <template v-for="download in inProgressDownloads" :key="download.url">
       <DownloadItem :download="download" />
     </template>
   </div>
@@ -16,5 +16,5 @@ import { useElectronDownloadStore } from '@/stores/electronDownloadStore'
 import { storeToRefs } from 'pinia'
 
 const electronDownloadStore = useElectronDownloadStore()
-const { downloads } = storeToRefs(electronDownloadStore)
+const { inProgressDownloads } = storeToRefs(electronDownloadStore)
 </script>

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/components/topbar/WorkflowTabs.vue

@@ -18,7 +18,10 @@
       <div class="relative">
         <span
           class="status-indicator"
-          v-if="!workspaceStore.shiftDown && option.workflow.isModified"
+          v-if="
+            !workspaceStore.shiftDown &&
+            (option.workflow.isModified || !option.workflow.isPersisted)
+          "
           >•</span
         >
         <Button

src/constants/coreKeybindings.ts

@@ -59,7 +59,7 @@ export const CORE_KEYBINDINGS: Keybinding[] = [
       key: 's',
       ctrl: true
     },
-    commandId: 'Comfy.ExportWorkflow'
+    commandId: 'Comfy.SaveWorkflow'
   },
   {
     combo: {
@@ -74,13 +74,6 @@ export const CORE_KEYBINDINGS: Keybinding[] = [
     },
     commandId: 'Comfy.ClearWorkflow'
   },
-  {
-    combo: {
-      key: 'd',
-      ctrl: true
-    },
-    commandId: 'Comfy.LoadDefaultWorkflow'
-  },
   {
     combo: {
       key: 'g',
@@ -173,7 +166,7 @@ export const CORE_KEYBINDINGS: Keybinding[] = [
       key: '`',
       ctrl: true
     },
-    commandId: 'Workspace.ToggleBottomPanelTab.integrated-terminal'
+    commandId: 'Workspace.ToggleBottomPanelTab.logs-terminal'
   },
   {
     combo: {

src/constants/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,118 @@ 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'
+  },
+  {
+    id: 'Comfy.Pointer.ClickDrift',
+    category: ['LiteGraph', 'Pointer', 'ClickDrift'],
+    name: 'Pointer click drift (maximum distance)',
+    tooltip:
+      'If the pointer moves more than this distance while holding a button down, it is considered dragging (rather than clicking).\n\nHelps prevent objects from being unintentionally nudged if the pointer is moved whilst clicking.',
+    experimental: true,
+    type: 'slider',
+    attrs: {
+      min: 0,
+      max: 20,
+      step: 1
+    },
+    defaultValue: 6,
+    versionAdded: '1.4.3'
+  },
+  {
+    id: 'Comfy.Pointer.ClickBufferTime',
+    category: ['LiteGraph', 'Pointer', 'ClickBufferTime'],
+    name: 'Pointer click drift delay',
+    tooltip:
+      'After pressing a pointer button down, this is the maximum time (in milliseconds) that pointer movement can be ignored for.\n\nHelps prevent objects from being unintentionally nudged if the pointer is moved whilst clicking.',
+    experimental: true,
+    type: 'slider',
+    attrs: {
+      min: 0,
+      max: 1000,
+      step: 25
+    },
+    defaultValue: 150,
+    versionAdded: '1.4.3'
+  },
+  {
+    id: 'Comfy.Pointer.DoubleClickTime',
+    category: ['LiteGraph', 'Pointer', 'DoubleClickTime'],
+    name: 'Double click interval (maximum)',
+    tooltip:
+      'The maximum time in milliseconds between the two clicks of a double-click.  Increasing this value may assist if double-clicks are sometimes not registered.',
+    type: 'slider',
+    attrs: {
+      min: 100,
+      max: 1000,
+      step: 50
+    },
+    defaultValue: 300,
+    versionAdded: '1.4.3'
+  },
+  {
+    id: 'Comfy.SnapToGrid.GridSize',
+    category: ['LiteGraph', 'Canvas', 'GridSize'],
+    name: 'Snap to grid size',
+    type: 'slider',
+    attrs: {
+      min: 1,
+      max: 500
+    },
+    tooltip:
+      'When dragging and resizing nodes while holding shift they will be aligned to the grid, this controls the size of that grid.',
+    defaultValue: LiteGraph.CANVAS_GRID_SIZE
+  },
+  // Keep the 'pysssss.SnapToGrid' setting id so we don't need to migrate setting values.
+  // Using a new setting id can cause existing users to lose their existing settings.
+  {
+    id: 'pysssss.SnapToGrid',
+    category: ['LiteGraph', 'Canvas', 'AlwaysSnapToGrid'],
+    name: 'Always snap to grid',
+    type: 'boolean',
+    defaultValue: false,
+    versionAdded: '1.3.13'
+  },
+  {
+    id: 'Comfy.Server.ServerConfigValues',
+    name: 'Server config values for frontend display',
+    tooltip: 'Server config values used for frontend display only',
+    type: 'hidden',
+    // Mapping from server config id to value.
+    defaultValue: {} as Record<string, any>,
+    versionAdded: '1.4.8'
+  },
+  {
+    id: 'Comfy.Server.LaunchArgs',
+    name: 'Server launch arguments',
+    tooltip:
+      'These are the actual arguments that are passed to the server when it is launched.',
+    type: 'hidden',
+    defaultValue: {} as Record<string, string>,
+    versionAdded: '1.4.8'
+  },
+  {
+    id: 'Comfy.Queue.MaxHistoryItems',
+    name: 'Queue history size',
+    tooltip: 'The maximum number of tasks that show in the queue history.',
+    type: 'slider',
+    attrs: {
+      min: 16,
+      max: 256,
+      step: 16
+    },
+    defaultValue: 64,
+    versionAdded: '1.4.12'
   }
 ]

src/constants/serverConfig.ts

@@ -0,0 +1,436 @@
+import { FormItem } from '@/types/settingTypes'
+import {
+  LatentPreviewMethod,
+  LogLevel,
+  HashFunction,
+  AutoLaunch,
+  CudaMalloc,
+  FloatingPointPrecision,
+  CrossAttentionMethod,
+  VramManagement
+} from '@/types/serverArgs'
+
+export type ServerConfigValue = string | number | true | null | undefined
+
+export interface ServerConfig<T> extends FormItem {
+  id: string
+  defaultValue: T
+  category?: string[]
+  // Override the default value getter with a custom function.
+  getValue?: (value: T) => Record<string, ServerConfigValue>
+}
+
+export const WEB_ONLY_CONFIG_ITEMS: ServerConfig<ServerConfigValue>[] = [
+  // We only need these settings in the web version. Desktop app manages them already.
+  {
+    id: 'listen',
+    name: 'Host: The IP address to listen on',
+    category: ['Network'],
+    type: 'text',
+    defaultValue: '127.0.0.1'
+  },
+  {
+    id: 'port',
+    name: 'Port: The port to listen on',
+    category: ['Network'],
+    type: 'number',
+    defaultValue: 8188
+  }
+]
+
+export const SERVER_CONFIG_ITEMS: ServerConfig<any>[] = [
+  // Network settings
+  {
+    id: 'tls-keyfile',
+    name: 'TLS Key File: Path to TLS key file for HTTPS',
+    category: ['Network'],
+    type: 'text',
+    defaultValue: ''
+  },
+  {
+    id: 'tls-certfile',
+    name: 'TLS Certificate File: Path to TLS certificate file for HTTPS',
+    category: ['Network'],
+    type: 'text',
+    defaultValue: ''
+  },
+  {
+    id: 'enable-cors-header',
+    name: 'Enable CORS header: Use "*" for all origins or specify domain',
+    category: ['Network'],
+    type: 'text',
+    defaultValue: ''
+  },
+  {
+    id: 'max-upload-size',
+    name: 'Maximum upload size (MB)',
+    category: ['Network'],
+    type: 'number',
+    defaultValue: 100
+  },
+
+  // Launch behavior
+  {
+    id: 'auto-launch',
+    name: 'Automatically opens in the browser on startup',
+    category: ['Launch'],
+    type: 'combo',
+    options: Object.values(AutoLaunch),
+    defaultValue: AutoLaunch.Auto,
+    getValue: (value: AutoLaunch) => {
+      switch (value) {
+        case AutoLaunch.Auto:
+          return {}
+        case AutoLaunch.Enable:
+          return {
+            ['auto-launch']: true
+          }
+        case AutoLaunch.Disable:
+          return {
+            ['disable-auto-launch']: true
+          }
+      }
+    }
+  },
+
+  // CUDA settings
+  {
+    id: 'cuda-device',
+    name: 'CUDA device index to use',
+    category: ['CUDA'],
+    type: 'number',
+    defaultValue: null
+  },
+  {
+    id: 'cuda-malloc',
+    name: 'Use CUDA malloc for memory allocation',
+    category: ['CUDA'],
+    type: 'combo',
+    options: Object.values(CudaMalloc),
+    defaultValue: CudaMalloc.Auto,
+    getValue: (value: CudaMalloc) => {
+      switch (value) {
+        case CudaMalloc.Auto:
+          return {}
+        case CudaMalloc.Enable:
+          return {
+            ['cuda-malloc']: true
+          }
+        case CudaMalloc.Disable:
+          return {
+            ['disable-cuda-malloc']: true
+          }
+      }
+    }
+  },
+
+  // Precision settings
+  {
+    id: 'global-precision',
+    name: 'Global floating point precision',
+    category: ['Inference'],
+    type: 'combo',
+    options: [
+      FloatingPointPrecision.AUTO,
+      FloatingPointPrecision.FP32,
+      FloatingPointPrecision.FP16
+    ],
+    defaultValue: FloatingPointPrecision.AUTO,
+    tooltip: 'Global floating point precision',
+    getValue: (value: FloatingPointPrecision) => {
+      switch (value) {
+        case FloatingPointPrecision.AUTO:
+          return {}
+        case FloatingPointPrecision.FP32:
+          return {
+            ['force-fp32']: true
+          }
+        case FloatingPointPrecision.FP16:
+          return {
+            ['force-fp16']: true
+          }
+        default:
+          return {}
+      }
+    }
+  },
+
+  // UNET precision
+  {
+    id: 'unet-precision',
+    name: 'UNET precision',
+    category: ['Inference'],
+    type: 'combo',
+    options: [
+      FloatingPointPrecision.AUTO,
+      FloatingPointPrecision.FP64,
+      FloatingPointPrecision.FP32,
+      FloatingPointPrecision.FP16,
+      FloatingPointPrecision.BF16,
+      FloatingPointPrecision.FP8E4M3FN,
+      FloatingPointPrecision.FP8E5M2
+    ],
+    defaultValue: FloatingPointPrecision.AUTO,
+    tooltip: 'UNET precision',
+    getValue: (value: FloatingPointPrecision) => {
+      switch (value) {
+        case FloatingPointPrecision.AUTO:
+          return {}
+        default:
+          return {
+            [`${value.toLowerCase()}-unet`]: true
+          }
+      }
+    }
+  },
+
+  // VAE settings
+  {
+    id: 'vae-precision',
+    name: 'VAE precision',
+    category: ['Inference'],
+    type: 'combo',
+    options: [
+      FloatingPointPrecision.AUTO,
+      FloatingPointPrecision.FP16,
+      FloatingPointPrecision.FP32,
+      FloatingPointPrecision.BF16
+    ],
+    defaultValue: FloatingPointPrecision.AUTO,
+    tooltip: 'VAE precision',
+    getValue: (value: FloatingPointPrecision) => {
+      switch (value) {
+        case FloatingPointPrecision.AUTO:
+          return {}
+        default:
+          return {
+            [`${value.toLowerCase()}-vae`]: true
+          }
+      }
+    }
+  },
+  {
+    id: 'cpu-vae',
+    name: 'Run VAE on CPU',
+    category: ['Inference'],
+    type: 'boolean',
+    defaultValue: false
+  },
+
+  // Text Encoder settings
+  {
+    id: 'text-encoder-precision',
+    name: 'Text Encoder precision',
+    category: ['Inference'],
+    type: 'combo',
+    options: [
+      FloatingPointPrecision.AUTO,
+      FloatingPointPrecision.FP8E4M3FN,
+      FloatingPointPrecision.FP8E5M2,
+      FloatingPointPrecision.FP16,
+      FloatingPointPrecision.FP32
+    ],
+    defaultValue: FloatingPointPrecision.AUTO,
+    tooltip: 'Text Encoder precision',
+    getValue: (value: FloatingPointPrecision) => {
+      switch (value) {
+        case FloatingPointPrecision.AUTO:
+          return {}
+        default:
+          return {
+            [`${value.toLowerCase()}-text-enc`]: true
+          }
+      }
+    }
+  },
+
+  // Memory and performance settings
+  {
+    id: 'force-channels-last',
+    name: 'Force channels-last memory format',
+    category: ['Memory'],
+    type: 'boolean',
+    defaultValue: false
+  },
+  {
+    id: 'directml',
+    name: 'DirectML device index',
+    category: ['Memory'],
+    type: 'number',
+    defaultValue: null
+  },
+  {
+    id: 'disable-ipex-optimize',
+    name: 'Disable IPEX optimization',
+    category: ['Memory'],
+    type: 'boolean',
+    defaultValue: false
+  },
+
+  // Preview settings
+  {
+    id: 'preview-method',
+    name: 'Method used for latent previews',
+    category: ['Preview'],
+    type: 'combo',
+    options: Object.values(LatentPreviewMethod),
+    defaultValue: LatentPreviewMethod.NoPreviews
+  },
+  {
+    id: 'preview-size',
+    name: 'Size of preview images',
+    category: ['Preview'],
+    type: 'slider',
+    defaultValue: 512,
+    attrs: {
+      min: 128,
+      max: 2048,
+      step: 128
+    }
+  },
+
+  // Cache settings
+  {
+    id: 'cache-classic',
+    name: 'Use classic cache system',
+    category: ['Cache'],
+    type: 'boolean',
+    defaultValue: false
+  },
+  {
+    id: 'cache-lru',
+    name: 'Use LRU caching with a maximum of N node results cached.',
+    category: ['Cache'],
+    type: 'number',
+    defaultValue: null,
+    tooltip: 'May use more RAM/VRAM.'
+  },
+
+  // Attention settings
+  {
+    id: 'cross-attention-method',
+    name: 'Cross attention method',
+    category: ['Attention'],
+    type: 'combo',
+    options: Object.values(CrossAttentionMethod),
+    defaultValue: CrossAttentionMethod.Auto,
+    getValue: (value: CrossAttentionMethod) => {
+      switch (value) {
+        case CrossAttentionMethod.Auto:
+          return {}
+        default:
+          return {
+            [`use-${value.toLowerCase()}-cross-attention`]: true
+          }
+      }
+    }
+  },
+  {
+    id: 'disable-xformers',
+    name: 'Disable xFormers optimization',
+    type: 'boolean',
+    defaultValue: false
+  },
+  {
+    id: 'force-upcast-attention',
+    name: 'Force attention upcast',
+    category: ['Attention'],
+    type: 'boolean',
+    defaultValue: false
+  },
+  {
+    id: 'dont-upcast-attention',
+    name: 'Prevent attention upcast',
+    category: ['Attention'],
+    type: 'boolean',
+    defaultValue: false
+  },
+
+  // VRAM management
+  {
+    id: 'vram-management',
+    name: 'VRAM management mode',
+    category: ['Memory'],
+    type: 'combo',
+    options: Object.values(VramManagement),
+    defaultValue: VramManagement.Auto,
+    getValue: (value: VramManagement) => {
+      switch (value) {
+        case VramManagement.Auto:
+          return {}
+        default:
+          return {
+            [value]: true
+          }
+      }
+    }
+  },
+  {
+    id: 'reserve-vram',
+    name: 'Reserved VRAM (GB)',
+    category: ['Memory'],
+    type: 'number',
+    defaultValue: null,
+    tooltip:
+      'Set the amount of vram in GB you want to reserve for use by your OS/other software. By default some amount is reverved depending on your OS.'
+  },
+
+  // Misc settings
+  {
+    id: 'default-hashing-function',
+    name: 'Default hashing function for model files',
+    type: 'combo',
+    options: Object.values(HashFunction),
+    defaultValue: HashFunction.SHA256
+  },
+  {
+    id: 'disable-smart-memory',
+    name: 'Force ComfyUI to agressively offload to regular ram instead of keeping models in vram when it can.',
+    category: ['Memory'],
+    type: 'boolean',
+    defaultValue: false
+  },
+  {
+    id: 'deterministic',
+    name: 'Make pytorch use slower deterministic algorithms when it can.',
+    type: 'boolean',
+    defaultValue: false,
+    tooltip: 'Note that this might not make images deterministic in all cases.'
+  },
+  {
+    id: 'fast',
+    name: 'Enable some untested and potentially quality deteriorating optimizations.',
+    type: 'boolean',
+    defaultValue: false
+  },
+  {
+    id: 'dont-print-server',
+    name: "Don't print server output to console.",
+    type: 'boolean',
+    defaultValue: false
+  },
+  {
+    id: 'disable-metadata',
+    name: 'Disable saving prompt metadata in files.',
+    type: 'boolean',
+    defaultValue: false
+  },
+  {
+    id: 'disable-all-custom-nodes',
+    name: 'Disable loading all custom nodes.',
+    type: 'boolean',
+    defaultValue: false
+  },
+  {
+    id: 'log-level',
+    name: 'Logging verbosity level',
+    type: 'combo',
+    options: Object.values(LogLevel),
+    defaultValue: LogLevel.INFO,
+    getValue: (value: LogLevel) => {
+      return {
+        verbose: value
+      }
+    }
+  }
+]

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 = [