1.5.3 (#1756)

* Add test for cloning pinned node

* Remove only

* Update litegraph

---------

Co-authored-by: huchenlei <huchenlei@proton.me>

.github/workflows/release.yaml

@@ -41,3 +41,21 @@ jobs:
           draft: true
           prerelease: false
           make_latest: "true"
+  publish_types:
+    runs-on: ubuntu-latest
+    if: >
+      github.event.pull_request.merged == true &&
+      contains(github.event.pull_request.labels.*.name, 'Release')
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v3
+        with:
+          node-version: lts/*
+          registry-url: "https://registry.npmjs.org"
+      - run: npm ci
+      - run: npm run build:types
+      - name: Publish package
+        run: npm publish --access public
+        working-directory: ./dist
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.i18nrc.cjs

@@ -0,0 +1,11 @@
+// This file is intentionally kept in CommonJS format (.cjs) 
+// to resolve compatibility issues with dependencies that require CommonJS.
+// Do not convert this file to ESModule format unless all dependencies support it.
+const { defineConfig } = require('@lobehub/i18n-cli');
+
+module.exports = defineConfig({
+  entry: 'src/locales/en.json',
+  entryLocale: 'en',
+  output: 'src/locales',
+  outputLocales: ['zh', 'ru', 'ja'],
+});

README.md

@@ -414,6 +414,7 @@ We will support custom icons later.
 - [PrimeVue](https://primevue.org/) with [TailwindCSS](https://tailwindcss.com/) for UI
 - [Litegraph](https://github.com/Comfy-Org/litegraph.js) for node editor
 - [zod](https://zod.dev/) for schema validation
+- [vue-i18n](https://github.com/intlify/vue-i18n) for internationalization
 
 ### Git pre-commit hooks
 
@@ -480,6 +481,77 @@ This repo is using litegraph package hosted on <https://github.com/Comfy-Org/lit
 
 This will replace the litegraph package in this repo with the local litegraph repo.
 
+## Internationalization (i18n)
+
+Our project supports multiple languages using `vue-i18n`. This allows users around the world to use the application in their preferred language.
+
+### Supported Languages
+
+ - en
+ - zh
+ - ru
+ - ja
+
+### How to Add a New Language
+
+We welcome the addition of new languages. You can add a new language by following these steps:
+
+#### 1. Generate language files
+We use [lobe-i18n](https://github.com/lobehub/lobe-cli-toolbox/blob/master/packages/lobe-i18n/README.md) as our translation tool, which integrates with LLM for efficient localization.
+
+Update the configuration file to include the new language(s) you wish to add:
+
+
+```javascript
+const { defineConfig } = require('@lobehub/i18n-cli');
+
+module.exports = defineConfig({
+  entry: 'src/locales/en.json', // Base language file
+  entryLocale: 'en',
+  output: 'src/locales',
+  outputLocales: ['zh', 'ru', 'ja'], // Add the new language(s) here
+});
+```
+
+Set your OpenAI API Key by running the following command:
+
+```sh
+npx lobe-i18n --option
+```
+
+Once configured, generate the translation files with:
+
+```sh
+npx lobe-i18n locale
+```
+
+This will create the language files for the specified languages in the configuration.
+
+#### 2. Update i18n Configuration
+
+Import the newly generated locale file(s) in the `src/i18n.ts` file to include them in the application's i18n setup.
+
+#### 3. Enable Selection of the New Language
+
+Add the newly added language to the following item in `src/constants/coreSettings.ts`:
+
+```typescript
+  {
+    id: 'Comfy.Locale',
+    name: 'Locale',
+    type: 'combo',
+    options: ['en', 'zh', 'ru', 'ja'], // Add the new language(s) here
+    defaultValue: navigator.language.split('-')[0] || 'en'
+  },
+```
+
+This will make the new language selectable in the application's settings.
+
+#### 4. Test the Translations
+
+Start the development server, switch to the new language, and verify the translations.
+You can switch languages by opening the ComfyUI Settings and selecting from the `ComfyUI > Locale` dropdown box.
+
 ## Deploy
 
 - Option 1: Set `DEPLOY_COMFYUI_DIR` in `.env` and run `npm run deploy`.

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,64 +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)
-
-      expect(await getUndoQueueSize()).toBe(0)
-      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(1)
-      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(2)
-      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(1)
-      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(0)
-      expect(await getRedoQueueSize()).toBe(2)
+      expect(await comfyPage.isCurrentWorkflowModified()).toBe(false)
+      expect(await comfyPage.getUndoQueueSize()).toBe(0)
+      expect(await comfyPage.getRedoQueueSize()).toBe(2)
     })
   })
 
@@ -174,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/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
@@ -788,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/UserSelectPage.ts

@@ -0,0 +1,41 @@
+import { Page } from 'playwright'
+import { test as base } from '@playwright/test'
+
+export class UserSelectPage {
+  constructor(
+    public readonly url: string,
+    public readonly page: Page
+  ) {}
+
+  get selectionUrl() {
+    return this.url + '/user-select'
+  }
+
+  get container() {
+    return this.page.locator('#comfy-user-selection')
+  }
+
+  get newUserInput() {
+    return this.container.locator('#new-user-input')
+  }
+
+  get existingUserSelect() {
+    return this.container.locator('#existing-user-select')
+  }
+
+  get nextButton() {
+    return this.container.getByText('Next')
+  }
+}
+
+export const userSelectPageFixture = base.extend<{
+  userSelectPage: UserSelectPage
+}>({
+  userSelectPage: async ({ page }, use) => {
+    const userSelectPage = new UserSelectPage(
+      process.env.PLAYWRIGHT_TEST_URL || 'http://localhost:8188',
+      page
+    )
+    await use(userSelectPage)
+  }
+})

browser_tests/groupNode.spec.ts

@@ -103,6 +103,36 @@ test.describe('Group Node', () => {
     await expect(comfyPage.page.locator('.node-tooltip')).toBeVisible()
   })
 
+  test('Manage group opens with the correct group selected', async ({
+    comfyPage
+  }) => {
+    const makeGroup = async (name, type1, type2) => {
+      const node1 = (await comfyPage.getNodeRefsByType(type1))[0]
+      const node2 = (await comfyPage.getNodeRefsByType(type2))[0]
+      await node1.click('title')
+      await node2.click('title', {
+        modifiers: ['Shift']
+      })
+      return await node2.convertToGroupNode(name)
+    }
+
+    const group1 = await makeGroup(
+      'g1',
+      'CLIPTextEncode',
+      'CheckpointLoaderSimple'
+    )
+    const group2 = await makeGroup('g2', 'EmptyLatentImage', 'KSampler')
+
+    const manage1 = await group1.manageGroupNode()
+    await comfyPage.nextFrame()
+    expect(await manage1.getSelectedNodeType()).toBe('g1')
+    await manage1.close()
+    await expect(manage1.root).not.toBeVisible()
+
+    const manage2 = await group2.manageGroupNode()
+    expect(await manage2.getSelectedNodeType()).toBe('g2')
+  })
+
   test('Reconnects inputs after configuration changed via manage dialog save', async ({
     comfyPage
   }) => {

browser_tests/helpers/manageGroupNode.ts

@@ -1,12 +1,14 @@
 import { Locator, Page } from '@playwright/test'
 export class ManageGroupNode {
   footer: Locator
+  header: Locator
 
   constructor(
     readonly page: Page,
     readonly root: Locator
   ) {
     this.footer = root.locator('footer')
+    this.header = root.locator('header')
   }
 
   async setLabel(name: string, label: string) {
@@ -23,6 +25,11 @@ export class ManageGroupNode {
     await this.footer.getByText('Close').click()
   }
 
+  async getSelectedNodeType() {
+    const select = this.header.locator('select').first()
+    return await select.inputValue()
+  }
+
   async selectNode(name: string) {
     const list = this.root.locator('.comfy-group-manage-list-items')
     const item = list.getByText(name)

browser_tests/menu.spec.ts

@@ -350,23 +350,6 @@ test.describe('Menu', () => {
       await comfyPage.page.waitForTimeout(1000)
       expect(await tab.getNode('KSampler (Advanced)').count()).toBe(2)
     })
-
-    test('Can migrate legacy bookmarks', async ({ comfyPage }) => {
-      await comfyPage.setSetting('Comfy.NodeLibrary.Bookmarks', [
-        'foo/',
-        'foo/KSampler (Advanced)',
-        'UNKNOWN',
-        'KSampler'
-      ])
-      await comfyPage.setSetting('Comfy.NodeLibrary.Bookmarks.V2', [])
-      await comfyPage.reload()
-      expect(await comfyPage.getSetting('Comfy.NodeLibrary.Bookmarks')).toEqual(
-        []
-      )
-      expect(
-        await comfyPage.getSetting('Comfy.NodeLibrary.Bookmarks.V2')
-      ).toEqual(['foo/', 'foo/KSamplerAdvanced', 'KSampler'])
-    })
   })
 
   test.describe('Workflows sidebar', () => {
@@ -465,6 +448,20 @@ test.describe('Menu', () => {
       ).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
     }) => {

browser_tests/rightClickMenu.spec.ts

@@ -186,4 +186,22 @@ test.describe('Node Right Click Menu', () => {
       'selected-nodes-unpinned.png'
     )
   })
+
+  test('Can clone pinned nodes', async ({ comfyPage }) => {
+    const nodeCount = await comfyPage.getGraphNodesCount()
+    const node = (await comfyPage.getFirstNodeRef())!
+    await node.clickContextMenuOption('Pin')
+    await comfyPage.nextFrame()
+    await node.click('title', { button: 'right' })
+    await expect(
+      comfyPage.page.locator('.litemenu-entry:has-text("Unpin")')
+    ).toBeAttached()
+    const cloneItem = comfyPage.page.locator(
+      '.litemenu-entry:has-text("Clone")'
+    )
+    await cloneItem.click()
+    await expect(cloneItem).toHaveCount(0)
+    await comfyPage.nextFrame()
+    expect(await comfyPage.getGraphNodesCount()).toBe(nodeCount + 1)
+  })
 })

browser_tests/userSelectView.spec.ts

@@ -0,0 +1,42 @@
+import { expect } from '@playwright/test'
+import { userSelectPageFixture as test } from './fixtures/UserSelectPage'
+
+/**
+ * Expects ComfyUI backend to be launched with `--multi-user` flag.
+ */
+test.describe('User Select View', () => {
+  test.beforeEach(async ({ userSelectPage, page }) => {
+    await page.goto(userSelectPage.url)
+    await page.evaluate(() => {
+      localStorage.clear()
+      sessionStorage.clear()
+    })
+  })
+
+  test('Redirects to user select view if no user is logged in', async ({
+    userSelectPage,
+    page
+  }) => {
+    await page.goto(userSelectPage.url)
+    await expect(userSelectPage.container).toBeVisible()
+    expect(page.url()).toBe(userSelectPage.selectionUrl)
+  })
+
+  test('Can create new user', async ({ userSelectPage, page }) => {
+    const randomUser = `test-user-${Math.random().toString(36).substring(2, 7)}`
+    await page.goto(userSelectPage.url)
+    await expect(page).toHaveURL(userSelectPage.selectionUrl)
+    await userSelectPage.newUserInput.fill(randomUser)
+    await userSelectPage.nextButton.click()
+    await expect(page).toHaveURL(userSelectPage.url)
+  })
+
+  test('Can choose existing user', async ({ userSelectPage, page }) => {
+    await page.goto(userSelectPage.url)
+    await expect(page).toHaveURL(userSelectPage.selectionUrl)
+    await userSelectPage.existingUserSelect.click()
+    await page.locator('.p-select-list .p-select-option').first().click()
+    await userSelectPage.nextButton.click()
+    await expect(page).toHaveURL(userSelectPage.url)
+  })
+})

index.html

@@ -9,33 +9,6 @@
   </head>
   <body class="litegraph grid">
     <div id="vue-app"></div>
-    <div id="comfy-user-selection" class="comfy-user-selection" style="display: none;">
-      <main class="comfy-user-selection-inner">
-        <h1>ComfyUI</h1>
-        <form>
-          <section>
-            <label>New user:
-              <input placeholder="Enter a username" />
-            </label>
-          </section>
-          <div class="comfy-user-existing">
-            <span class="or-separator">OR</span>
-            <section>
-              <label>
-                Existing user:
-                <select>
-                  <option hidden disabled selected value> Select a user </option>
-                </select>
-              </label>
-            </section>
-          </div>
-          <footer>
-            <span class="comfy-user-error">&nbsp;</span>
-            <button class="comfy-btn comfy-user-button-next">Next</button>
-          </footer>
-        </form>
-      </main>
-    </div>
     <script type="module" src="src/main.ts"></script>
   </body>
 </html>

lint-staged.config.js

@@ -3,6 +3,7 @@ export default {
 
   './**/*.{ts,tsx,vue}': (stagedFiles) => [
     ...formatFiles(stagedFiles),
+    'vue-tsc --noEmit',
     'tsc --noEmit',
     'tsc-strict'
   ]

package.json

@@ -1,17 +1,22 @@
 {
-  "name": "comfyui-frontend",
+  "name": "@comfyorg/comfyui-frontend",
   "private": true,
-  "version": "1.4.9",
+  "version": "1.5.3",
   "type": "module",
+  "repository": "https://github.com/Comfy-Org/ComfyUI_frontend",
+  "homepage": "https://comfy.org",
+  "description": "Official front-end implementation of ComfyUI",
+  "license": "GPL-3.0-only",
   "scripts": {
     "dev": "vite",
     "dev:electron": "vite --config vite.electron.config.mts",
     "build": "npm run typecheck && vite build",
+    "build:types": "vite build --config vite.types.config.mts && node scripts/prepare-types.js",
     "deploy": "npm run build && node scripts/deploy.js",
     "release": "node scripts/release.js",
     "update-litegraph": "node scripts/update-litegraph.js",
     "zipdist": "node scripts/zipdist.js",
-    "typecheck": "tsc --noEmit && tsc-strict",
+    "typecheck": "vue-tsc --noEmit && tsc --noEmit && tsc-strict",
     "format": "prettier --write './**/*.{js,ts,tsx,vue}'",
     "test": "jest --config jest.config.base.ts",
     "test:jest:fast": "jest --config jest.config.fast.ts",
@@ -30,6 +35,7 @@
     "@babel/preset-env": "^7.22.20",
     "@eslint/js": "^9.8.0",
     "@iconify/json": "^2.2.245",
+    "@lobehub/i18n-cli": "^1.20.1",
     "@pinia/testing": "^0.1.5",
     "@playwright/test": "^1.44.1",
     "@types/jest": "^29.5.12",
@@ -66,14 +72,16 @@
     "unplugin-icons": "^0.19.3",
     "unplugin-vue-components": "^0.27.4",
     "vite": "^5.4.6",
+    "vite-plugin-dts": "^4.3.0",
     "vite-plugin-static-copy": "^1.0.5",
     "vitest": "^2.0.5",
+    "vue-tsc": "^2.1.10",
     "zip-dir": "^2.0.0"
   },
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^1.3.1",
-    "@comfyorg/comfyui-electron-types": "^0.3.6",
-    "@comfyorg/litegraph": "^0.8.35",
+    "@comfyorg/comfyui-electron-types": "^0.3.19",
+    "@comfyorg/litegraph": "^0.8.42",
     "@primevue/themes": "^4.0.5",
     "@vueuse/core": "^11.0.0",
     "@xterm/addon-fit": "^0.10.0",

public/assets/images/Git-Logo-White.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="292" height="92pt" viewBox="0 0 219 92"><defs><clipPath id="a"><path d="M159 .79h25V69h-25Zm0 0"/></clipPath><clipPath id="b"><path d="M183 9h35.371v60H183Zm0 0"/></clipPath><clipPath id="c"><path d="M0 .79h92V92H0Zm0 0"/></clipPath></defs><path style="stroke:none;fill-rule:nonzero;fill:#fff;fill-opacity:1" d="M130.871 31.836c-4.785 0-8.351 2.352-8.351 8.008 0 4.261 2.347 7.222 8.093 7.222 4.871 0 8.18-2.867 8.18-7.398 0-5.133-2.961-7.832-7.922-7.832Zm-9.57 39.95c-1.133 1.39-2.262 2.87-2.262 4.612 0 3.48 4.434 4.524 10.527 4.524 5.051 0 11.926-.352 11.926-5.043 0-2.793-3.308-2.965-7.488-3.227Zm25.761-39.688c1.563 2.004 3.22 4.789 3.22 8.793 0 9.656-7.571 15.316-18.536 15.316-2.789 0-5.312-.348-6.879-.785l-2.87 4.613 8.526.52c15.059.96 23.934 1.398 23.934 12.968 0 10.008-8.789 15.665-23.934 15.665-15.75 0-21.757-4.004-21.757-10.88 0-3.917 1.742-6 4.789-8.878-2.875-1.211-3.828-3.387-3.828-5.739 0-1.914.953-3.656 2.523-5.312 1.566-1.652 3.305-3.305 5.395-5.219-4.262-2.09-7.485-6.617-7.485-13.058 0-10.008 6.613-16.88 19.93-16.88 3.742 0 6.004.344 8.008.872h16.972v7.394l-8.007.61"/><g clip-path="url(#a)"><path style="stroke:none;fill-rule:nonzero;fill:#fff;fill-opacity:1" d="M170.379 16.281c-4.961 0-7.832-2.87-7.832-7.836 0-4.957 2.871-7.656 7.832-7.656 5.05 0 7.922 2.7 7.922 7.656 0 4.965-2.871 7.836-7.922 7.836Zm-11.227 52.305V61.71l4.438-.606c1.219-.175 1.394-.437 1.394-1.746V33.773c0-.953-.261-1.566-1.132-1.824l-4.7-1.656.957-7.047h18.016V59.36c0 1.399.086 1.57 1.395 1.746l4.437.606v6.875h-24.805"/></g><g clip-path="url(#b)"><path style="stroke:none;fill-rule:nonzero;fill:#fff;fill-opacity:1" d="M218.371 65.21c-3.742 1.825-9.223 3.481-14.187 3.481-10.356 0-14.27-4.175-14.27-14.015V31.879c0-.524 0-.871-.7-.871h-6.093v-7.746c7.664-.871 10.707-4.703 11.664-14.188h8.27v12.36c0 .609 0 .87.695.87h12.27v8.704h-12.965v20.797c0 5.136 1.218 7.136 5.918 7.136 2.437 0 4.96-.609 7.047-1.39l2.351 7.66"/></g><g clip-path="url(#c)"><path style="stroke:none;fill-rule:nonzero;fill:#fff;fill-opacity:1" d="M89.422 42.371 49.629 2.582a5.868 5.868 0 0 0-8.3 0l-8.263 8.262 10.48 10.484a6.965 6.965 0 0 1 7.173 1.668 6.98 6.98 0 0 1 1.656 7.215l10.102 10.105a6.963 6.963 0 0 1 7.214 1.657 6.976 6.976 0 0 1 0 9.875 6.98 6.98 0 0 1-9.879 0 6.987 6.987 0 0 1-1.519-7.594l-9.422-9.422v24.793a6.979 6.979 0 0 1 1.848 1.32 6.988 6.988 0 0 1 0 9.88c-2.73 2.726-7.153 2.726-9.875 0a6.98 6.98 0 0 1 0-9.88 6.893 6.893 0 0 1 2.285-1.523V34.398a6.893 6.893 0 0 1-2.285-1.523 6.988 6.988 0 0 1-1.508-7.637L29.004 14.902 1.719 42.187a5.868 5.868 0 0 0 0 8.301l39.793 39.793a5.868 5.868 0 0 0 8.3 0l39.61-39.605a5.873 5.873 0 0 0 0-8.305"/></g></svg>

scripts/prepare-types.js

@@ -0,0 +1,40 @@
+import fs from 'fs'
+import path from 'path'
+
+const mainPackage = JSON.parse(fs.readFileSync('./package.json', 'utf8'))
+
+// Create the types-only package.json
+const typesPackage = {
+  name: `${mainPackage.name}-types`,
+  version: mainPackage.version,
+  types: './index.d.ts',
+  files: ['index.d.ts'],
+  publishConfig: {
+    access: 'public'
+  },
+  repository: mainPackage.repository,
+  homepage: mainPackage.homepage,
+  description: `TypeScript definitions for ${mainPackage.name}`,
+  license: mainPackage.license,
+  dependencies: {
+    '@comfyorg/litegraph': mainPackage.dependencies['@comfyorg/litegraph']
+  },
+  peerDependencies: {
+    vue: mainPackage.dependencies.vue,
+    zod: mainPackage.dependencies.zod
+  }
+}
+
+// Ensure dist directory exists
+const distDir = './dist'
+if (!fs.existsSync(distDir)) {
+  fs.mkdirSync(distDir, { recursive: true })
+}
+
+// Write the new package.json to the dist directory
+fs.writeFileSync(
+  path.join(distDir, 'package.json'),
+  JSON.stringify(typesPackage, null, 2)
+)
+
+console.log('Types package.json have been prepared in the dist directory')

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="relative h-full w-full bg-black" ref="rootEl">
+  <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>

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

@@ -13,18 +13,7 @@ const terminalCreated = (
   { terminal, useAutoSize }: ReturnType<typeof useTerminal>,
   root: Ref<HTMLElement>
 ) => {
-  // TODO: use types from electron package
-  const terminalApi = electronAPI()['Terminal'] as {
-    onOutput(cb: (message: string) => void): () => void
-    resize(cols: number, rows: number): void
-    restore(): Promise<{
-      buffer: string[]
-      pos: { x: number; y: number }
-      size: { cols: number; rows: number }
-    }>
-    storePos(x: number, y: number): void
-    write(data: string): void
-  }
+  const terminalApi = electronAPI().Terminal
 
   let offData: IDisposable
   let offOutput: () => void

src/components/common/FormItem.vue

@@ -1,7 +1,7 @@
 <!-- A generalized form item for rendering in a form. -->
 <template>
   <div class="form-label flex flex-grow items-center">
-    <span class="text-[var(--p-text-muted-color)]">
+    <span class="text-muted" :class="props.labelClass">
       <slot name="name-prefix"></slot>
       {{ props.item.name }}
       <i
@@ -33,15 +33,11 @@ import CustomFormValue from '@/components/common/CustomFormValue.vue'
 import InputSlider from '@/components/common/InputSlider.vue'
 
 const formValue = defineModel<any>('formValue')
-const props = withDefaults(
-  defineProps<{
-    item: FormItem
-    id: string | undefined
-  }>(),
-  {
-    id: undefined
-  }
-)
+const props = defineProps<{
+  item: FormItem
+  id?: string
+  labelClass?: string | Record<string, boolean>
+}>()
 
 function getFormAttrs(item: FormItem) {
   const attrs = { ...(item.attrs || {}) }

src/components/common/SearchBox.vue

@@ -44,21 +44,22 @@ import Button from 'primevue/button'
 import SearchFilterChip from './SearchFilterChip.vue'
 import { toRefs } from 'vue'
 
-interface Props {
-  class?: string
-  modelValue: string
-  placeholder?: string
-  icon?: string
-  debounceTime?: number
-  filterIcon?: string
-  filters?: TFilter[]
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  placeholder: 'Search...',
-  icon: 'pi pi-search',
-  debounceTime: 300
-})
+const props = withDefaults(
+  defineProps<{
+    class?: string
+    modelValue: string
+    placeholder?: string
+    icon?: string
+    debounceTime?: number
+    filterIcon?: string
+    filters?: TFilter[]
+  }>(),
+  {
+    placeholder: 'Search...',
+    icon: 'pi pi-search',
+    debounceTime: 300
+  }
+)
 
 const { filters } = toRefs(props)
 

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

@@ -38,7 +38,6 @@
 
 <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'
@@ -50,6 +49,7 @@ 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
@@ -65,7 +65,6 @@ const showReport = () => {
 const showSendError = isElectron()
 
 const toast = useToast()
-const { copy, isSupported } = useClipboard()
 
 onMounted(async () => {
   try {
@@ -140,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,71 +17,47 @@
       />
     </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>
-          <TabPanel key="server-config" value="Server-Config">
-            <Suspense>
-              <ServerConfigPanel />
-              <template #fallback>
-                <div>Loading server config 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>
+            <CurrentUserMessage v-if="tabValue === 'Comfy'" />
+            <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>
 
@@ -90,17 +66,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 CurrentUserMessage from './setting/CurrentUserMessage.vue'
+import { flattenTree } from '@/utils/treeUtil'
 import { isElectron } from '@/utils/envUtil'
 
 const KeybindingPanel = defineAsyncComponent(
@@ -113,11 +89,6 @@ const ServerConfigPanel = defineAsyncComponent(
   () => import('./setting/ServerConfigPanel.vue')
 )
 
-interface ISettingGroup {
-  label: string
-  settings: SettingParams[]
-}
-
 const aboutPanelNode: SettingTreeNode = {
   key: 'about',
   label: 'About',
@@ -158,8 +129,11 @@ const serverConfigPanelNodeList = computed<SettingTreeNode[]>(() => {
 
 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,
@@ -178,10 +152,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/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/CurrentUserMessage.vue

@@ -0,0 +1,26 @@
+<!-- A message that displays the current user -->
+<template>
+  <Message
+    v-if="userStore.isMultiUserServer"
+    severity="info"
+    icon="pi pi-user"
+    pt:text="w-full"
+  >
+    <div class="flex items-center justify-between">
+      <div>{{ $t('currentUser') }}: {{ userStore.currentUser?.username }}</div>
+      <Button icon="pi pi-sign-out" @click="logout" text />
+    </div>
+  </Message>
+</template>
+
+<script setup lang="ts">
+import Message from 'primevue/message'
+import Button from 'primevue/button'
+import { useUserStore } from '@/stores/userStore'
+
+const userStore = useUserStore()
+const logout = () => {
+  userStore.logout()
+  window.location.reload()
+}
+</script>

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

@@ -1,7 +1,7 @@
 <template>
   <Message
     v-if="show"
-    class="first-time-ui-message m-2"
+    class="first-time-ui-message"
     severity="info"
     :closable="true"
     @close="handleClose"

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

@@ -1,37 +1,105 @@
 <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" />
+  <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>
-  </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 { useSettingStore } from '@/stores/settingStore'
 import { useServerConfigStore } from '@/stores/serverConfigStore'
 import { storeToRefs } from 'pinia'
-import { onMounted, watch } from 'vue'
-import { SERVER_CONFIG_ITEMS } from '@/constants/serverConfig'
+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, launchArgs, serverConfigValues } =
-  storeToRefs(serverConfigStore)
+const {
+  serverConfigsByCategory,
+  serverConfigValues,
+  launchArgs,
+  commandLineArgs,
+  modifiedConfigs
+} = storeToRefs(serverConfigStore)
 
-onMounted(() => {
-  serverConfigStore.loadServerConfig(
-    SERVER_CONFIG_ITEMS,
-    settingStore.get('Comfy.Server.ServerConfigValues')
-  )
-})
+const revertChanges = () => {
+  serverConfigStore.revertChanges()
+}
+
+const restartApp = () => {
+  electronAPI().restartApp()
+}
 
 watch(launchArgs, (newVal) => {
   settingStore.set('Comfy.Server.LaunchArgs', newVal)
@@ -40,4 +108,9 @@ watch(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/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

@@ -163,6 +163,12 @@ watchEffect(() => {
   }
 })
 
+watchEffect(() => {
+  const maximumFps = settingStore.get('LiteGraph.Canvas.MaximumFps')
+  const { canvas } = canvasStore
+  if (canvas) canvas.maximumFps = maximumFps
+})
+
 watchEffect(() => {
   CanvasPointer.doubleClickTime = settingStore.get(
     'Comfy.Pointer.DoubleClickTime'

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"

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/searchbox/NodeSearchBoxPopover.vue

@@ -22,7 +22,7 @@
     >
       <template #container>
         <NodeSearchBox
-          :filters="nodeFilters"
+          :filters="nodeFilters as FilterAndValue[]"
           @add-filter="addFilter"
           @remove-filter="removeFilter"
           @add-node="addNode"
@@ -56,7 +56,7 @@ const getNewNodeLocation = (): [number, number] => {
   if (triggerEvent.value === null) {
     return [100, 100]
   }
-
+  // @ts-expect-error type event detail
   const originalEvent = triggerEvent.value.detail.originalEvent
   return [originalEvent.canvasX, originalEvent.canvasY]
 }
@@ -99,6 +99,7 @@ const newSearchBoxEnabled = computed(
 )
 const showSearchBox = (e: LiteGraphCanvasEvent) => {
   if (newSearchBoxEnabled.value) {
+    // @ts-expect-error type event detail
     if (e.detail.originalEvent?.pointerType === 'touch') {
       setTimeout(() => {
         showNewSearchBox(e)
@@ -107,13 +108,16 @@ const showSearchBox = (e: LiteGraphCanvasEvent) => {
       showNewSearchBox(e)
     }
   } else {
+    // @ts-expect-error type event detail
     canvasStore.canvas.showSearchBox(e.detail.originalEvent as MouseEvent)
   }
 }
 
 const nodeDefStore = useNodeDefStore()
 const showNewSearchBox = (e: LiteGraphCanvasEvent) => {
+  // @ts-expect-error type event detail
   if (e.detail.linkReleaseContext) {
+    // @ts-expect-error type event detail
     const links = e.detail.linkReleaseContext.links
     if (links.length === 0) {
       console.warn('Empty release with no links! This should never happen')
@@ -123,7 +127,7 @@ const showNewSearchBox = (e: LiteGraphCanvasEvent) => {
     const filter = nodeDefStore.nodeSearchService.getFilterById(
       firstLink.releaseSlotType
     )
-    const dataType = firstLink.type
+    const dataType = firstLink.type.toString()
     addFilter([filter, dataType])
   }
 
@@ -138,6 +142,7 @@ const showNewSearchBox = (e: LiteGraphCanvasEvent) => {
 }
 
 const showContextMenu = (e: LiteGraphCanvasEvent) => {
+  // @ts-expect-error type event detail
   const links = e.detail.linkReleaseContext.links
   if (links.length === 0) {
     console.warn('Empty release with no links! This should never happen')
@@ -145,6 +150,7 @@ const showContextMenu = (e: LiteGraphCanvasEvent) => {
   }
 
   const firstLink = ConnectingLinkImpl.createFromPlainObject(links[0])
+  // @ts-expect-error type event detail
   const mouseEvent = e.detail.originalEvent as MouseEvent
   const commonOptions = {
     e: mouseEvent,
@@ -162,6 +168,7 @@ const showContextMenu = (e: LiteGraphCanvasEvent) => {
         slotTo: firstLink.input,
         afterRerouteId: firstLink.afterRerouteId
       }
+  // @ts-expect-error type arguments
   canvasStore.canvas.showConnectionMenu({
     ...connectionOptions,
     ...commonOptions
@@ -202,6 +209,7 @@ const linkReleaseActionShift = computed(() => {
 })
 
 const handleCanvasEmptyRelease = (e: LiteGraphCanvasEvent) => {
+  // @ts-expect-error type event detail
   const originalEvent = e.detail.originalEvent as MouseEvent
   const shiftPressed = originalEvent.shiftKey
 

src/components/sidebar/SideToolbar.vue

@@ -12,6 +12,7 @@
         @click="onTabClick(tab)"
       />
       <div class="side-tool-bar-end">
+        <SidebarLogoutIcon v-if="userStore.isMultiUserServer" />
         <SidebarThemeToggleIcon />
         <SidebarSettingsToggleIcon />
       </div>
@@ -29,15 +30,18 @@
 import SidebarIcon from './SidebarIcon.vue'
 import SidebarThemeToggleIcon from './SidebarThemeToggleIcon.vue'
 import SidebarSettingsToggleIcon from './SidebarSettingsToggleIcon.vue'
+import SidebarLogoutIcon from './SidebarLogoutIcon.vue'
 import ExtensionSlot from '@/components/common/ExtensionSlot.vue'
 import { computed } from 'vue'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import { useSettingStore } from '@/stores/settingStore'
 import type { SidebarTabExtension } from '@/types/extensionTypes'
 import { useKeybindingStore } from '@/stores/keybindingStore'
+import { useUserStore } from '@/stores/userStore'
 
 const workspaceStore = useWorkspaceStore()
 const settingStore = useSettingStore()
+const userStore = useUserStore()
 
 const teleportTarget = computed(() =>
   settingStore.get('Comfy.Sidebar.Location') === 'left'

src/components/sidebar/SidebarLogoutIcon.vue

@@ -0,0 +1,21 @@
+<template>
+  <SidebarIcon icon="pi pi-sign-out" :tooltip="tooltip" @click="logout" />
+</template>
+
+<script setup lang="ts">
+import SidebarIcon from './SidebarIcon.vue'
+import { useUserStore } from '@/stores/userStore'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+const userStore = useUserStore()
+
+const tooltip = computed(
+  () => `${t('sideToolbar.logout')} (${userStore.currentUser?.username})`
+)
+const logout = () => {
+  userStore.logout()
+  window.location.reload()
+}
+</script>

src/components/sidebar/tabs/QueueSidebarTab.vue

@@ -1,18 +1,6 @@
 <template>
   <SidebarTabTemplate :title="$t('sideToolbar.queue')">
     <template #tool-buttons>
-      <Popover ref="outputFilterPopup">
-        <OutputFilters />
-      </Popover>
-
-      <Button
-        icon="pi pi-filter"
-        text
-        severity="secondary"
-        @click="outputFilterPopup.toggle($event)"
-        v-tooltip="$t(`sideToolbar.queueTab.filter`)"
-        :class="{ 'text-yellow-500': anyFilter }"
-      />
       <Button
         :icon="
           imageFit === 'cover'
@@ -111,7 +99,6 @@ import Button from 'primevue/button'
 import ConfirmPopup from 'primevue/confirmpopup'
 import ContextMenu from 'primevue/contextmenu'
 import type { MenuItem } from 'primevue/menuitem'
-import Popover from 'primevue/popover'
 import ProgressSpinner from 'primevue/progressspinner'
 import TaskItem from './queue/TaskItem.vue'
 import ResultGallery from './queue/ResultGallery.vue'
@@ -124,9 +111,7 @@ import { useSettingStore } from '@/stores/settingStore'
 import { useCommandStore } from '@/stores/commandStore'
 import { app } from '@/scripts/app'
 
-const SETTING_FIT = 'Comfy.Queue.ImageFit'
-const SETTING_FLAT = 'Comfy.Queue.ShowFlatList'
-const SETTING_FILTER = 'Comfy.Queue.Filter'
+const IMAGE_FIT = 'Comfy.Queue.ImageFit'
 const confirm = useConfirm()
 const toast = useToast()
 const queueStore = useQueueStore()
@@ -135,7 +120,7 @@ const commandStore = useCommandStore()
 const { t } = useI18n()
 
 // Expanded view: show all outputs in a flat list.
-const isExpanded = computed<boolean>(() => settingStore.get(SETTING_FLAT))
+const isExpanded = ref(false)
 const visibleTasks = ref<TaskItemImpl[]>([])
 const scrollContainer = ref<HTMLElement | null>(null)
 const loadMoreTrigger = ref<HTMLElement | null>(null)
@@ -143,23 +128,7 @@ const galleryActiveIndex = ref(-1)
 // Folder view: only show outputs from a single selected task.
 const folderTask = ref<TaskItemImpl | null>(null)
 const isInFolderView = computed(() => folderTask.value !== null)
-const imageFit = computed<string>(() => settingStore.get(SETTING_FIT))
-const hideCached = computed<boolean>(
-  () => settingStore.get(SETTING_FILTER)?.hideCached
-)
-const hideCanceled = computed<boolean>(
-  () => settingStore.get(SETTING_FILTER)?.hideCanceled
-)
-const anyFilter = computed(() => hideCanceled.value || hideCached.value)
-
-watch(hideCached, () => {
-  updateVisibleTasks()
-})
-watch(hideCanceled, () => {
-  updateVisibleTasks()
-})
-
-const outputFilterPopup = ref(null)
+const imageFit = computed<string>(() => settingStore.get(IMAGE_FIT))
 
 const ITEMS_PER_PAGE = 8
 const SCROLL_THRESHOLD = 100 // pixels from bottom to trigger load
@@ -180,31 +149,9 @@ const allGalleryItems = computed(() =>
   })
 )
 
-const filterTasks = (tasks: TaskItemImpl[]) =>
-  tasks
-    .filter((t) => {
-      if (
-        hideCanceled.value &&
-        t.status?.messages?.at(-1)?.[0] === 'execution_interrupted'
-      ) {
-        return false
-      }
-
-      if (
-        hideCached.value &&
-        t.flatOutputs?.length &&
-        t.flatOutputs.every((o) => o.cached)
-      ) {
-        return false
-      }
-
-      return true
-    })
-    .slice(0, ITEMS_PER_PAGE)
-
 const loadMoreItems = () => {
   const currentLength = visibleTasks.value.length
-  const newTasks = filterTasks(allTasks.value).slice(
+  const newTasks = allTasks.value.slice(
     currentLength,
     currentLength + ITEMS_PER_PAGE
   )
@@ -239,11 +186,11 @@ useResizeObserver(scrollContainer, () => {
 })
 
 const updateVisibleTasks = () => {
-  visibleTasks.value = filterTasks(allTasks.value)
+  visibleTasks.value = allTasks.value.slice(0, ITEMS_PER_PAGE)
 }
 
 const toggleExpanded = () => {
-  settingStore.set(SETTING_FLAT, !isExpanded.value)
+  isExpanded.value = !isExpanded.value
   updateVisibleTasks()
 }
 
@@ -344,10 +291,7 @@ const exitFolderView = () => {
 }
 
 const toggleImageFit = () => {
-  settingStore.set(
-    SETTING_FIT,
-    imageFit.value === 'cover' ? 'contain' : 'cover'
-  )
+  settingStore.set(IMAGE_FIT, imageFit.value === 'cover' ? 'contain' : 'cover')
 }
 
 onMounted(() => {

src/components/sidebar/tabs/WorkflowsSidebarTab.vue

@@ -95,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>
@@ -120,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

@@ -75,7 +75,7 @@ const props = defineProps<{
   download: ElectronDownload
 }>()
 
-const getDownloadLabel = (savePath: string, filename: string) => {
+const getDownloadLabel = (savePath: string) => {
   let parts = (savePath ?? '').split('/')
   parts = parts.length === 1 ? parts[0].split('\\') : parts
   const name = parts.pop()
@@ -95,7 +95,6 @@ const handleRemoveDownload = () => {
     state.downloads = state.downloads.filter(
       ({ url }) => url !== props.download.url
     )
-    state.hasChanged = true
   })
 }
 </script>