nit - fix TS type

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

.cursorrules

@@ -0,0 +1,43 @@
+// Vue 3 Composition API .cursorrules
+
+// Vue 3 Composition API best practices
+const vue3CompositionApiBestPractices = [
+  "Use setup() function for component logic",
+  "Utilize ref and reactive for reactive state",
+  "Implement computed properties with computed()",
+  "Use watch and watchEffect for side effects",
+  "Implement lifecycle hooks with onMounted, onUpdated, etc.",
+  "Utilize provide/inject for dependency injection",
+]
+
+// Folder structure
+const folderStructure = `
+src/
+  components/
+  constants/
+  hooks/
+  views/
+  stores/
+  services/
+  App.vue
+  main.ts
+`;
+
+// Tailwind CSS best practices
+const tailwindCssBestPractices = [
+  "Use Tailwind CSS for styling",
+  "Implement responsive design with Tailwind CSS",
+]
+
+// Additional instructions
+const additionalInstructions = `
+1. Leverage VueUse functions for performance-enhancing styles
+2. Use lodash for utility functions
+3. Use TypeScript for type safety
+4. Implement proper props and emits definitions
+5. Utilize Vue 3's Teleport component when needed
+6. Use Suspense for async components
+7. Implement proper error handling
+8. Follow Vue 3 style guide and naming conventions
+9. Use Vite for fast development and building
+`;

.github/workflows/format.yaml

@@ -20,4 +20,4 @@ jobs:
       run: npm ci
 
     - name: Run Prettier check
-      run: npx prettier --check './**/*.{js,ts,tsx,vue}'
+      run: npm run format:check

.github/workflows/i18n-custom-nodes.yaml

@@ -107,21 +107,56 @@ jobs:
         cp -rf ComfyUI_frontend/temp/diff/* "$LOCALE_DIR"
     - name: Check and create fork of custom node repository
       run: |
+        # Try to fork the repository
         gh repo fork ${{ inputs.owner }}/${{ inputs.repository }} --clone=false || {
           echo "Fork failed - repository might already be forked"
           # Exit 0 to prevent the workflow from failing
           exit 0
         }
+
+        # Enable workflows on the forked repository
+        gh api \
+          --method PUT \
+          -H "Accept: application/vnd.github+json" \
+          "/repos/${{ inputs.fork_owner }}/${{ inputs.repository }}/actions/permissions/workflow" \
+          -F can_approve_pull_request_reviews=true \
+          -F default_workflow_permissions="write" \
+          -F enabled=true
       env:
-        GH_TOKEN: ${{ secrets.GH_TOKEN }}
-    - name: Commit and push changes
+        GH_TOKEN: ${{ secrets.PR_GH_TOKEN }}
+
+    - name: Commit changes
+      working-directory: ComfyUI/custom_nodes/${{ inputs.repository }}
       run: |
+        git config --global user.name 'github-actions'
+        git config --global user.email 'github-actions@github.com'
+
+        # Create and switch to new branch
         git checkout -b update-locales
+
+        # Stage and commit changes
         git add -A
         git commit -m "Update locales"
-        git remote add org_fork git@github.com:${{ inputs.fork_owner }}/${{ inputs.repository }}.git
-        git push org_fork update-locales
-        gh pr create --title "Update locales for ${{ inputs.repository }}" --repo ${{ inputs.owner }}/${{ inputs.repository }} --head ${{ inputs.fork_owner }}:update-locales
+
+    - name: Install SSH key For PUSH
+      uses: shimataro/ssh-key-action@v2
+      with:
+        # PR private key from action server
+        key: ${{ secrets.PR_SSH_PRIVATE_KEY }}
+        # github public key to confirm it's github server
+        known_hosts: github.com ssh-rsa AAAAB3NzaC1yc2EAAAABIwAAAQEAq2A7hRGmdnm9tUDbO9IDSwBK6TbQa+PXYPCPy6rbTrTtw7PHkccKrpp0yVhp5HdEIcKr6pLlVDBfOLX9QUsyCOV0wzfjIJNlGEYsdlLJizHhbn2mUjvSAHQqZETYP81eFzLQNnPHt4EVVUh7VfDESU84KezmD5QlWpXLmvU31/yMf+Se8xhHTvKSCZIFImWwoG6mbUoWf9nzpIoaSjB+weqqUUmpaaasXVal72J+UX2B+2RPW3RcT0eOzQgqlJL3RKrTJvdsjE3JEAvGq3lGHSZXy28G3skua2SmVi/w4yCE6gbODqnTWlg7+wC604ydGXA8VJiS5ap43JXiUFFAaQ==
+
+    - name: Push changes
       working-directory: ComfyUI/custom_nodes/${{ inputs.repository }}
+      run: |
+        # Force push to create the branch
+        echo "Pushing changes to ${{ inputs.fork_owner }}/${{ inputs.repository }}"
+        git push -f git@github.com:${{ inputs.fork_owner }}/${{ inputs.repository }}.git update-locales
+
+    - name: Create PR 
+      working-directory: ComfyUI/custom_nodes/${{ inputs.repository }}
+      run: |
+        # Create PR using gh cli
+        gh pr create --title "Update locales for ${{ inputs.repository }}" --repo ${{ inputs.owner }}/${{ inputs.repository }} --head ${{ inputs.fork_owner }}:update-locales --body "Update locales for ${{ inputs.repository }}"
       env:
-        GH_TOKEN: ${{ secrets.GH_TOKEN }}
+        GH_TOKEN: ${{ secrets.PR_GH_TOKEN }}

.github/workflows/i18n-node-defs.yaml

@@ -0,0 +1,48 @@
+name: Update Node Definitions Locales
+
+on:
+  workflow_dispatch:
+    inputs:
+      trigger_type:
+        description: 'Type of trigger (manual or automatic)'
+        required: false
+        type: string
+        default: 'manual'
+
+jobs:
+  update-locales:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: Comfy-Org/ComfyUI_frontend_setup_action@v2.1
+    - name: Install Playwright Browsers
+      run: npx playwright install chromium --with-deps
+      working-directory: ComfyUI_frontend
+    - name: Start dev server
+      # Run electron dev server as it is a superset of the web dev server
+      # We do want electron specific UIs to be translated.
+      run: npm run dev:electron &
+      working-directory: ComfyUI_frontend
+    - name: Update en.json
+      run: npm run collect-i18n -- scripts/collect-i18n-node-defs.ts
+      env:
+        PLAYWRIGHT_TEST_URL: http://localhost:5173
+      working-directory: ComfyUI_frontend
+    - name: Update translations
+      run: npm run locale
+      env:
+        OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
+      working-directory: ComfyUI_frontend
+    - name: Create Pull Request
+      uses: peter-evans/create-pull-request@v7
+      with:
+        token: ${{ secrets.PR_GH_TOKEN }}
+        commit-message: "Update locales for node definitions"
+        title: "Update locales for node definitions"
+        body: |
+          Automated PR to update locales for node definitions
+
+          This PR was created automatically by the frontend update workflow.
+        branch: update-locales-node-defs-${{ github.event.inputs.trigger_type }}-${{ github.run_id }}
+        base: main
+        labels: dependencies
+        path: ComfyUI_frontend

.github/workflows/i18n.yaml

@@ -5,6 +5,8 @@ on:
 
 jobs:
   update-locales:
+    # Don't run on fork PRs
+    if: github.event.pull_request.head.repo.full_name == github.repository
     runs-on: ubuntu-latest
     steps:
     - uses: Comfy-Org/ComfyUI_frontend_setup_action@v2.1
@@ -17,13 +19,12 @@ jobs:
       run: npm run dev:electron &
       working-directory: ComfyUI_frontend
     - name: Update en.json
-      run: npm run collect-i18n
+      run: npm run collect-i18n -- scripts/collect-i18n-general.ts
       env:
         PLAYWRIGHT_TEST_URL: http://localhost:5173
       working-directory: ComfyUI_frontend
     - name: Update translations
-      # Pipe output so that it doesn't error out on stdout.clearLine
-      run: npm run locale 2>&1 | cat
+      run: npm run locale
       env:
         OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
       working-directory: ComfyUI_frontend

.github/workflows/release.yaml

@@ -25,6 +25,8 @@ jobs:
         id: current_version
         run: echo ::set-output name=version::$(node -p "require('./package.json').version")
       - name: Build project
+        env:
+          SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
         run: |
           npm ci
           npm run build

.github/workflows/test-ui.yaml

@@ -19,8 +19,7 @@ jobs:
     - name: Run Jest tests
       run: |
         npm run test:generate
-        npm run test:generate:examples
-        npm run test:jest:fast -- --verbose
+        npm run test:jest -- --verbose
       working-directory: ComfyUI_frontend
 
   playwright-tests-chromium:

.gitignore

@@ -16,6 +16,8 @@ dist-ssr
 .vscode/*
 *.code-workspace
 !.vscode/extensions.json
+!.vscode/tailwind.json
+!.vscode/settings.json.default
 .idea
 .DS_Store
 *.suo
@@ -41,4 +43,7 @@ browser_tests/*/*-win32.png
 
 dist.zip
 
-/temp/
+/temp/
+
+# Generated JSON Schemas
+/schemas/

.i18nrc.cjs

@@ -9,7 +9,7 @@ module.exports = defineConfig({
   entry: 'src/locales/en',
   entryLocale: 'en',
   output: 'src/locales',
-  outputLocales: ['zh', 'ru', 'ja', 'ko'],
+  outputLocales: ['zh', 'ru', 'ja', 'ko', 'fr'],
   reference: `Special names to keep untranslated: flux, photomaker, clip, vae, cfg, stable audio, stable cascade.
   'latent' is the short form of 'latent space'.
   'mask' is in the context of image processing.

.prettierrc

@@ -3,5 +3,16 @@
   "tabWidth": 2,
   "semi": false,
   "trailingComma": "none",
-  "printWidth": 80
-}
+  "printWidth": 80,
+  "importOrder": ["^@core/(.*)$", "<THIRD_PARTY_MODULES>", "^@/(.*)$", "^[./]"],
+  "importOrderSeparation": true,
+  "importOrderSortSpecifiers": true,
+  "overrides": [
+    {
+      "files": "*.{js,cjs,mjs,ts,cts,mts,tsx,vue}",
+      "options": {
+        "plugins": ["@trivago/prettier-plugin-sort-imports"]
+      }
+    }
+  ]
+}

.vscode/settings.json.default

@@ -0,0 +1,5 @@
+{
+  "css.customData": [
+    ".vscode/tailwind.json"
+  ]
+}

.vscode/tailwind.json

@@ -0,0 +1,55 @@
+{
+  "version": 1.1,
+  "atDirectives": [
+    {
+      "name": "@tailwind",
+      "description": "Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS.",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#tailwind"
+        }
+      ]
+    },
+    {
+      "name": "@apply",
+      "description": "Use the `@apply` directive to inline any existing utility classes into your own custom CSS. This is useful when you find a common utility pattern in your HTML that you’d like to extract to a new component.",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#apply"
+        }
+      ]
+    },
+    {
+      "name": "@responsive",
+      "description": "You can generate responsive variants of your own classes by wrapping their definitions in the `@responsive` directive:\n```css\n@responsive {\n  .alert {\n    background-color: #E53E3E;\n  }\n}\n```\n",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#responsive"
+        }
+      ]
+    },
+    {
+      "name": "@screen",
+      "description": "The `@screen` directive allows you to create media queries that reference your breakpoints by **name** instead of duplicating their values in your own CSS:\n```css\n@screen sm {\n  /* ... */\n}\n```\n…gets transformed into this:\n```css\n@media (min-width: 640px) {\n  /* ... */\n}\n```\n",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#screen"
+        }
+      ]
+    },
+    {
+      "name": "@variants",
+      "description": "Generate `hover`, `focus`, `active` and other **variants** of your own utilities by wrapping their definitions in the `@variants` directive:\n```css\n@variants hover, focus {\n   .btn-brand {\n    background-color: #3182CE;\n  }\n}\n```\n",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#variants"
+        }
+      ]
+    }
+  ]
+}

CODEOWNERS

@@ -6,10 +6,9 @@
 /tests-ui/ @Comfy-Org/comfy_maintainer
 /browser_tests/ @Comfy-Org/comfy_maintainer
 /.env_example @Comfy-Org/comfy_maintainer
-/src/locales/ @Comfy-Org/comfy_maintainer
 
-# Japanese translation
-/src/locales/ja.json @shinshin86 @Comfy-Org/comfy_maintainer
+# Translations (AIGODLIKE team + shinshin86)
+/src/locales/ @Yorha4D @KarryCharon @DorotaLuna @shinshin86 @Comfy-Org/comfy_maintainer
 
 # Load 3D extension
 /src/extensions/core/load3d.ts @jtydhr88 @Comfy-Org/comfy_frontend_devs

README.md

@@ -58,17 +58,17 @@ Stable releases are published bi-weekly in the ComfyUI main repository.
 
 ### Major features
 
-<details>
+<details id='feature-native-translation'>
   <summary>v1.5: Native translation (i18n)</summary>
 
-  ComfyUI now includes built-in translation support, replacing the need for third-party translation extensions. Select your language 
-  in `Comfy > Locale > Language` to translate the interface into English, Chinese (Simplified), Russian, Japanese, or Korean. This native 
+  ComfyUI now includes built-in translation support, replacing the need for third-party translation extensions. Select your language
+  in `Comfy > Locale > Language` to translate the interface into English, Chinese (Simplified), Russian, Japanese, or Korean. This native
   implementation offers better performance, reliability, and maintainability compared to previous solutions.<br>
-  
+
   More details available here: https://blog.comfy.org/p/native-localization-support-i18n
 </details>
 
-<details>
+<details id='feature-mask-editor'>
   <summary>v1.4: New mask editor</summary>
 
   https://github.com/Comfy-Org/ComfyUI_frontend/pull/1284 implements a new mask editor.
@@ -76,7 +76,7 @@ Stable releases are published bi-weekly in the ComfyUI main repository.
   ![image](https://github.com/user-attachments/assets/f0ea6ee5-00ee-4e5d-a09c-6938e86a1f17)
 </details>
 
-<details>
+<details id='feature-integrated-server-terminal'>
   <summary>v1.3.22: Integrated server terminal</summary>
 
 Press Ctrl + ` to toggle integrated terminal.
@@ -84,7 +84,7 @@ Press Ctrl + ` to toggle integrated terminal.
 https://github.com/user-attachments/assets/eddedc6a-07a3-4a83-9475-63b3977f6d94
 </details>
 
-<details>
+<details id='feature-keybinding-customization'>
   <summary>v1.3.7: Keybinding customization</summary>
 
 ## Basic UI
@@ -101,7 +101,7 @@ https://github.com/user-attachments/assets/eddedc6a-07a3-4a83-9475-63b3977f6d94
 
 </details>
 
-<details>
+<details id='feature-node-library-sidebar'>
   <summary>v1.2.4: Node library sidebar tab</summary>
 
   #### Drag & Drop
@@ -111,13 +111,13 @@ https://github.com/user-attachments/assets/853e20b7-bc0e-49c9-bbce-a2ba7566f92f
 https://github.com/user-attachments/assets/4bbca3ee-318f-4cf0-be32-a5a5541066cf
 </details>
 
-<details>
+<details id='feature-queue-sidebar'>
   <summary>v1.2.0: Queue/History sidebar tab</summary>
 
   https://github.com/user-attachments/assets/86e264fe-4d26-4f07-aa9a-83bdd2d02b8f
 </details>
 
-<details>
+<details id='feature-node-search'>
   <summary>v1.1.0: Node search box</summary>
 
   #### Fuzzy search & Node preview
@@ -129,26 +129,26 @@ https://github.com/user-attachments/assets/4bbca3ee-318f-4cf0-be32-a5a5541066cf
 
 ### QoL changes
 
-<details>
+<details id='feature-nested-group'>
   <summary>v1.3.32: **Litegraph** Nested group</summary>
 
 https://github.com/user-attachments/assets/f51adeb1-028e-40af-81e4-0ac13075198a
 </details>
 
-<details>
+<details id='feature-group-selection'>
   <summary>v1.3.24: **Litegraph** Group selection</summary>
 
 https://github.com/user-attachments/assets/e6230a94-411e-4fba-90cb-6c694200adaa
 </details>
 
-<details>
+<details id='feature-toggle-link-visibility'>
   <summary>v1.3.6: **Litegraph** Toggle link visibility</summary>
 
 [rec.webm](https://github.com/user-attachments/assets/34e460ac-fbbc-44ef-bfbb-99a84c2ae2be)
 
 </details>
 
-<details>
+<details id='feature-auto-widget-conversion'>
   <summary>v1.3.4: **Litegraph** Auto widget to input conversion</summary>
 
 Dropping a link of correct type on node widget will automatically convert the widget to input.
@@ -157,7 +157,7 @@ Dropping a link of correct type on node widget will automatically convert the wi
 
 </details>
 
-<details>
+<details id='feature-pan-mode'>
   <summary>v1.3.4: **Litegraph** Canvas pan mode</summary>
 
 The canvas becomes readonly in pan mode. Pan mode is activated by clicking the pan mode button on the canvas menu
@@ -167,42 +167,42 @@ or by holding the space key.
 
 </details>
 
-<details>
+<details id='feature-shift-drag-link-creation'>
   <summary>v1.3.1: **Litegraph** Shift drag link to create a new link</summary>
 
 [rec.webm](https://github.com/user-attachments/assets/7e73aaf9-79e2-4c3c-a26a-911cba3b85e4)
 
 </details>
 
-<details>
+<details id='feature-optional-input-donuts'>
   <summary>v1.2.62: **Litegraph** Show optional input slots as donuts</summary>
 
 ![GYEIRidb0AYGO-v](https://github.com/user-attachments/assets/e6cde0b6-654b-4afd-a117-133657a410b1)
 
 </details>
 
-<details>
+<details id='feature-group-title-edit'>
   <summary>v1.2.44: **Litegraph** Double click group title to edit</summary>
 
 https://github.com/user-attachments/assets/5bf0e2b6-8b3a-40a7-b44f-f0879e9ad26f
 
 </details>
 
-<details>
+<details id='feature-group-selection-shortcut'>
   <summary>v1.2.39: **Litegraph** Group selected nodes with Ctrl + G</summary>
 
 https://github.com/user-attachments/assets/7805dc54-0854-4a28-8bcd-4b007fa01151
 
 </details>
 
-<details>
+<details id='feature-node-title-edit'>
   <summary>v1.2.38: **Litegraph** Double click node title to edit</summary>
 
 https://github.com/user-attachments/assets/d61d5d0e-f200-4153-b293-3e3f6a212b30
 
 </details>
 
-<details>
+<details id='feature-drag-multi-link'>
   <summary>v1.2.7: **Litegraph** drags multiple links with shift pressed</summary>
 
 https://github.com/user-attachments/assets/68826715-bb55-4b2a-be6e-675cfc424afe
@@ -211,7 +211,7 @@ https://github.com/user-attachments/assets/c142c43f-2fe9-4030-8196-b3bfd4c6977d
 
 </details>
 
-<details>
+<details id='feature-auto-connect-link'>
   <summary>v1.2.2: **Litegraph** auto connects to correct slot</summary>
 
   #### Before
@@ -221,7 +221,7 @@ https://github.com/user-attachments/assets/c142c43f-2fe9-4030-8196-b3bfd4c6977d
   https://github.com/user-attachments/assets/b6360ac0-f0d2-447c-9daa-8a2e20c0dc1d
 </details>
 
-<details>
+<details id='feature-hide-text-overflow'>
   <summary>v1.1.8: **Litegraph** hides text overflow on widget value</summary>
 
   https://github.com/user-attachments/assets/5696a89d-4a47-4fcc-9e8c-71e1264943f2
@@ -229,6 +229,55 @@ https://github.com/user-attachments/assets/c142c43f-2fe9-4030-8196-b3bfd4c6977d
 
 ### Developer APIs
 
+<details>
+  <summary>v1.6.13: prompt/confirm/alert replacements for ComfyUI desktop</summary>
+
+Several browser-only APIs are not available in ComfyUI desktop's electron environment.
+
+- `window.prompt`
+- `window.confirm`
+- `window.alert`
+
+Please use the following APIs as replacements.
+
+```js
+// window.prompt
+window['app'].extensionManager.dialog
+  .prompt({
+    title: 'Test Prompt',
+    message: 'Test Prompt Message'
+  })
+  .then((value: string) => {
+    // Do something with the value user entered
+  })
+```
+
+![image](https://github.com/user-attachments/assets/c73f74d0-9bb4-4555-8d56-83f1be4a1d7e)
+
+```js
+// window.confirm
+window['app'].extensionManager.dialog
+  .confirm({
+    title: 'Test Confirm',
+    message: 'Test Confirm Message'
+  })
+  .then((value: boolean) => {
+    // Do something with the value user entered
+  })
+```
+
+![image](https://github.com/user-attachments/assets/8dec7a42-7443-4245-85be-ceefb1116e96)
+
+```js
+// window.alert
+window['app'].extensionManager.toast
+  .addAlert("Test Alert")
+```
+
+![image](https://github.com/user-attachments/assets/9b18bdca-76ef-4432-95de-5cd2369684f2)
+
+</details>
+
 <details>
   <summary>v1.3.34: Register about panel badges</summary>
 
@@ -249,7 +298,7 @@ app.registerExtension({
 
 </details>
 
-<details>
+<details id='extension-api-bottom-panel-tabs'>
   <summary>v1.3.22: Register bottom panel tabs</summary>
 
 ```js
@@ -272,7 +321,7 @@ app.registerExtension({
 
 </details>
 
-<details>
+<details id='extension-api-settings'>
   <summary>v1.3.22: New settings API</summary>
 
 Legacy settings API.
@@ -318,7 +367,7 @@ app.extensionManager.setting.set('TestSetting', 'Hello, universe!')
 
 </details>
 
-<details>
+<details id='extension-api-commands-keybindings'>
   <summary>v1.3.7: Register commands and keybindings</summary>
 
   Extensions can call the following API to register commands and keybindings. Do
@@ -347,7 +396,7 @@ app.extensionManager.setting.set('TestSetting', 'Hello, universe!')
 
 </details>
 
-<details>
+<details id='extension-api-topbar-menu'>
   <summary>v1.3.1: Extension API to register custom topbar menu items</summary>
 
   Extensions can call the following API to register custom topbar menu items.
@@ -376,7 +425,7 @@ app.extensionManager.setting.set('TestSetting', 'Hello, universe!')
 ![image](https://github.com/user-attachments/assets/ae7b082f-7ce9-4549-a446-4563567102fe)
 </details>
 
-<details>
+<details id='extension-api-toast'>
   <summary>v1.2.27: Extension API to add toast message</summary>i
 
   Extensions can call the following API to add toast messages.
@@ -394,7 +443,7 @@ Documentation of all supported options can be found here: <https://primevue.org/
 ![image](https://github.com/user-attachments/assets/de02cd7e-cd81-43d1-a0b0-bccef92ff487)
 </details>
 
-<details>
+<details id='extension-api-sidebar-tab'>
   <summary>v1.2.4: Extension API to register custom sidebar tab</summary>
 
   Extensions now can call the following API to register a sidebar tab.
@@ -471,8 +520,7 @@ navigate to `http://<server_ip>:5173` (e.g. `http://192.168.2.20:5173` here), to
 - `git clone https://github.com/comfyanonymous/ComfyUI_examples.git` to `tests-ui/ComfyUI_examples` or the EXAMPLE_REPO_PATH location specified in .env
 - `npm i` to install all dependencies
 - `npm run test:generate` to fetch `tests-ui/data/object_info.json`
-- `npm run test:generate:examples` to extract the example workflows
-- `npm run test` to execute all unit tests.
+- `npm run test:jest` to execute all unit tests.
 
 ### Component Test
 
@@ -506,6 +554,7 @@ Our project supports multiple languages using `vue-i18n`. This allows users arou
  - ru (Русский)
  - ja (日本語)
  - ko (한국어)
+ - fr (Français)
 
 ### How to Add a New Language
 
@@ -577,10 +626,3 @@ You can switch languages by opening the ComfyUI Settings and selecting from the
 
 - Option 1: Set `DEPLOY_COMFYUI_DIR` in `.env` and run `npm run deploy`.
 - Option 2: Copy everything under `dist/` to `ComfyUI/web/` in your ComfyUI checkout manually.
-
-## Publish release to ComfyUI main repo
-
-Run following command to publish a release to ComfyUI main repo. The script will create a new branch and do a commit to `web/` folder by checkout `dist.zip`
-from GitHub release.
-
-- `python scripts/main_repo_release.py <path_to_comfyui_main_repo> <version>`

browser_tests/README.md

@@ -34,6 +34,8 @@ There are two ways to run the tests:
    ```
    This opens a user interface where you can select specific tests to run and inspect the test execution timeline.
 
+   To run the same test multiple times in Playwright's UI mode, you must launch the main ComfyUI process with the `--multi-user` flag.
+
    ![Playwright UI Mode](https://github.com/user-attachments/assets/6a1ebef0-90eb-4157-8694-f5ee94d03755)
 
 ## Screenshot Expectations

browser_tests/actionbar.spec.ts

@@ -1,6 +1,7 @@
 import type { Response } from '@playwright/test'
-import type { StatusWsMessage } from '../src/types/apiTypes.ts'
 import { expect, mergeTests } from '@playwright/test'
+
+import type { StatusWsMessage } from '../src/types/apiTypes.ts'
 import { comfyPageFixture } from './fixtures/ComfyPage'
 import { webSocketFixture } from './fixtures/ws.ts'
 

browser_tests/assets/collapsed_multiline.json

@@ -0,0 +1,37 @@
+{
+  "last_node_id": 1,
+  "last_link_id": 0,
+  "nodes": [
+    {
+      "id": 1,
+      "type": "CLIPTextEncode",
+      "pos": [20, 50],
+      "size": [400, 200],
+      "flags": { "collapsed": true },
+      "order": 0,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "clip",
+          "type": "CLIP",
+          "link": null,
+          "localized_name": "clip"
+        }
+      ],
+      "outputs": [
+        {
+          "name": "CONDITIONING",
+          "type": "CONDITIONING",
+          "links": null,
+          "localized_name": "CONDITIONING"
+        }
+      ],
+      "properties": {},
+      "widgets_values": ["Should not be displayed."]
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "config": {},
+  "version": 0.4
+}

browser_tests/assets/single_connected_reroute_node.json

@@ -0,0 +1,116 @@
+{
+  "last_node_id": 16,
+  "last_link_id": 18,
+  "nodes": [
+    {
+      "id": 12,
+      "type": "VAEDecode",
+      "pos": [620, 260],
+      "size": [210, 46],
+      "flags": {},
+      "order": 2,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "samples",
+          "type": "LATENT",
+          "link": null
+        },
+        {
+          "name": "vae",
+          "type": "VAE",
+          "link": 18
+        }
+      ],
+      "outputs": [
+        {
+          "name": "IMAGE",
+          "type": "IMAGE",
+          "links": null
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "VAEDecode"
+      },
+      "widgets_values": []
+    },
+    {
+      "id": 13,
+      "type": "Reroute",
+      "pos": [510, 280],
+      "size": [75, 26],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "",
+          "type": "*",
+          "link": 13
+        }
+      ],
+      "outputs": [
+        {
+          "name": "",
+          "type": "VAE",
+          "links": [18],
+          "slot_index": 0
+        }
+      ],
+      "properties": {
+        "showOutputText": false,
+        "horizontal": false
+      }
+    },
+    {
+      "id": 4,
+      "type": "CheckpointLoaderSimple",
+      "pos": [160, 240],
+      "size": [315, 98],
+      "flags": {},
+      "order": 0,
+      "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": [13],
+          "slot_index": 2
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "CheckpointLoaderSimple"
+      },
+      "widgets_values": ["v1-5-pruned-emaonly.safetensors"]
+    }
+  ],
+  "links": [
+    [13, 4, 2, 13, 0, "*"],
+    [18, 13, 0, 12, 1, "VAE"]
+  ],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 1,
+      "offset": {
+        "0": 0,
+        "1": 0
+      }
+    }
+  },
+  "version": 0.4
+}

browser_tests/browserTabTitle.spec.ts

@@ -1,4 +1,5 @@
 import { expect } from '@playwright/test'
+
 import { comfyPageFixture as test } from './fixtures/ComfyPage'
 
 test.describe('Browser tab title', () => {

browser_tests/changeTracker.spec.ts

@@ -1,7 +1,7 @@
 import {
   ComfyPage,
-  comfyPageFixture as test,
-  comfyExpect as expect
+  comfyExpect as expect,
+  comfyPageFixture as test
 } from './fixtures/ComfyPage'
 
 async function beforeChange(comfyPage: ComfyPage) {

browser_tests/colorPalette.spec.ts

@@ -1,7 +1,9 @@
 import { expect } from '@playwright/test'
+
+import type { Palette } from '../src/types/colorPaletteTypes'
 import { comfyPageFixture as test } from './fixtures/ComfyPage'
 
-const customColorPalettes = {
+const customColorPalettes: Record<string, Palette> = {
   obsidian: {
     version: 102,
     id: 'obsidian',
@@ -127,23 +129,61 @@ const customColorPalettes = {
         'tr-odd-bg-color': 'rgba(19,19,19,.9)'
       }
     }
+  },
+  // A custom light theme with fg color red
+  light_red: {
+    id: 'light_red',
+    name: 'Light Red',
+    light_theme: true,
+    colors: {
+      node_slot: {},
+      litegraph_base: {},
+      comfy_base: {
+        'fg-color': '#ff0000'
+      }
+    }
   }
 }
 
 test.describe('Color Palette', () => {
-  test.beforeEach(async ({ comfyPage }) => {
+  test('Can show custom color palette', async ({ comfyPage }) => {
     await comfyPage.setSetting('Comfy.CustomColorPalettes', customColorPalettes)
+    // Reload to apply the new setting. Setting Comfy.CustomColorPalettes directly
+    // doesn't update the store immediately.
+    await comfyPage.setup()
+
+    await comfyPage.setSetting('Comfy.ColorPalette', 'obsidian_dark')
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'custom-color-palette-obsidian-dark.png'
+    )
+    await comfyPage.setSetting('Comfy.ColorPalette', 'light_red')
+    await comfyPage.nextFrame()
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'custom-color-palette-light-red.png'
+    )
+
+    await comfyPage.setSetting('Comfy.ColorPalette', 'dark')
+    await comfyPage.nextFrame()
+    await expect(comfyPage.canvas).toHaveScreenshot('default-color-palette.png')
   })
 
-  test('Can show custom color palette', async ({ comfyPage }) => {
+  test('Can add custom color palette', async ({ comfyPage }) => {
+    await comfyPage.page.evaluate((p) => {
+      window['app'].extensionManager.colorPalette.addCustomColorPalette(p)
+    }, customColorPalettes.obsidian_dark)
+    expect(await comfyPage.getToastErrorCount()).toBe(0)
+
+    await comfyPage.setSetting('Comfy.ColorPalette', 'obsidian_dark')
+    await comfyPage.nextFrame()
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'custom-color-palette-obsidian-dark.png'
+    )
+    // Legacy `custom_` prefix is still supported
     await comfyPage.setSetting('Comfy.ColorPalette', 'custom_obsidian_dark')
     await comfyPage.nextFrame()
     await expect(comfyPage.canvas).toHaveScreenshot(
       'custom-color-palette-obsidian-dark.png'
     )
-    await comfyPage.setSetting('Comfy.ColorPalette', 'dark')
-    await comfyPage.nextFrame()
-    await expect(comfyPage.canvas).toHaveScreenshot('default-color-palette.png')
   })
 })
 

browser_tests/commands.spec.ts

@@ -1,4 +1,5 @@
 import { expect } from '@playwright/test'
+
 import { comfyPageFixture as test } from './fixtures/ComfyPage'
 
 test.describe('Keybindings', () => {

browser_tests/copyPaste.spec.ts

@@ -1,4 +1,5 @@
 import { expect } from '@playwright/test'
+
 import { comfyPageFixture as test } from './fixtures/ComfyPage'
 
 test.describe('Copy Paste', () => {
@@ -10,6 +11,14 @@ test.describe('Copy Paste', () => {
     await expect(comfyPage.canvas).toHaveScreenshot('copied-node.png')
   })
 
+  test('Can copy and paste node with link', async ({ comfyPage }) => {
+    await comfyPage.clickTextEncodeNode1()
+    await comfyPage.page.mouse.move(10, 10)
+    await comfyPage.ctrlC()
+    await comfyPage.page.keyboard.press('Control+Shift+V')
+    await expect(comfyPage.canvas).toHaveScreenshot('copied-node-with-link.png')
+  })
+
   test('Can copy and paste text', async ({ comfyPage }) => {
     const textBox = comfyPage.widgetTextBox
     await textBox.click()

browser_tests/dialog.spec.ts

@@ -1,4 +1,6 @@
 import { expect } from '@playwright/test'
+
+import { Keybinding } from '../src/types/keyBindingTypes'
 import { comfyPageFixture as test } from './fixtures/ComfyPage'
 
 test.describe('Load workflow warning', () => {
@@ -42,6 +44,18 @@ test.describe('Execution error', () => {
     const executionError = comfyPage.page.locator('.comfy-error-report')
     await expect(executionError).toBeVisible()
   })
+
+  test('Can display Issue Report form', async ({ comfyPage }) => {
+    await comfyPage.loadWorkflow('execution_error')
+    await comfyPage.queueButton.click()
+    await comfyPage.nextFrame()
+
+    await comfyPage.page.getByLabel('Help Fix This').click()
+    const issueReportForm = comfyPage.page.getByText(
+      'Submit Error Report (Optional)'
+    )
+    await expect(issueReportForm).toBeVisible()
+  })
 })
 
 test.describe('Missing models warning', () => {
@@ -77,8 +91,12 @@ test.describe('Missing models warning', () => {
 test.describe('Settings', () => {
   test('@mobile Should be visible on mobile', async ({ comfyPage }) => {
     await comfyPage.page.keyboard.press('Control+,')
-    const searchBox = comfyPage.page.locator('.settings-content')
-    await expect(searchBox).toBeVisible()
+    const settingsContent = comfyPage.page.locator('.settings-content')
+    await expect(settingsContent).toBeVisible()
+    const isUsableHeight = await settingsContent.evaluate(
+      (el) => el.clientHeight > 30
+    )
+    expect(isUsableHeight).toBeTruthy()
   })
 
   test('Can open settings with hotkey', async ({ comfyPage }) => {
@@ -94,8 +112,90 @@ test.describe('Settings', () => {
   test('Can change canvas zoom speed setting', async ({ comfyPage }) => {
     const maxSpeed = 2.5
     await comfyPage.setSetting('Comfy.Graph.ZoomSpeed', maxSpeed)
-    test.step('Setting should persist', async () => {
+    await test.step('Setting should persist', async () => {
       expect(await comfyPage.getSetting('Comfy.Graph.ZoomSpeed')).toBe(maxSpeed)
     })
   })
+
+  test('Should persist keybinding setting', async ({ comfyPage }) => {
+    // Open the settings dialog
+    await comfyPage.page.keyboard.press('Control+,')
+    await comfyPage.page.waitForSelector('.settings-container')
+
+    // Open the keybinding tab
+    await comfyPage.page.getByLabel('Keybinding').click()
+    await comfyPage.page.waitForSelector(
+      '[placeholder="Search Keybindings..."]'
+    )
+
+    // Focus the 'New Blank Workflow' row
+    const newBlankWorkflowRow = comfyPage.page.locator('tr', {
+      has: comfyPage.page.getByRole('cell', { name: 'New Blank Workflow' })
+    })
+    await newBlankWorkflowRow.click()
+
+    // Click edit button
+    const editKeybindingButton = newBlankWorkflowRow.locator('.pi-pencil')
+    await editKeybindingButton.click()
+
+    // Set new keybinding
+    const input = comfyPage.page.getByPlaceholder('Press keys for new binding')
+    await input.press('Alt+n')
+
+    const requestPromise = comfyPage.page.waitForRequest(
+      '**/api/settings/Comfy.Keybinding.NewBindings'
+    )
+
+    // Save keybinding
+    const saveButton = comfyPage.page
+      .getByLabel('Comfy.NewBlankWorkflow')
+      .getByLabel('Save')
+    await saveButton.click()
+
+    const request = await requestPromise
+    const expectedSetting: Keybinding = {
+      commandId: 'Comfy.NewBlankWorkflow',
+      combo: {
+        key: 'n',
+        ctrl: false,
+        alt: true,
+        shift: false
+      }
+    }
+    expect(request.postData()).toContain(JSON.stringify(expectedSetting))
+  })
+})
+
+test.describe('Feedback dialog', () => {
+  test('Should open from topmenu help command', async ({ comfyPage }) => {
+    // Open feedback dialog from top menu
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
+    await comfyPage.menu.topbar.triggerTopbarCommand(['Help', 'Feedback'])
+
+    // Verify feedback dialog content is visible
+    const feedbackHeader = comfyPage.page.getByRole('heading', {
+      name: 'Feedback'
+    })
+    await expect(feedbackHeader).toBeVisible()
+  })
+
+  test('Should close when close button clicked', async ({ comfyPage }) => {
+    // Open feedback dialog
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
+    await comfyPage.menu.topbar.triggerTopbarCommand(['Help', 'Feedback'])
+
+    const feedbackHeader = comfyPage.page.getByRole('heading', {
+      name: 'Feedback'
+    })
+
+    // Close feedback dialog
+    await comfyPage.page
+      .getByLabel('', { exact: true })
+      .getByLabel('Close')
+      .click()
+    await feedbackHeader.waitFor({ state: 'hidden' })
+
+    // Verify dialog is closed
+    await expect(feedbackHeader).not.toBeVisible()
+  })
 })

browser_tests/domWidget.spec.ts

@@ -0,0 +1,27 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from './fixtures/ComfyPage'
+
+test.describe('DOM Widget', () => {
+  test('Collapsed multiline textarea is not visible', async ({ comfyPage }) => {
+    await comfyPage.loadWorkflow('collapsed_multiline')
+
+    expect(comfyPage.page.locator('.comfy-multiline-input')).not.toBeVisible()
+  })
+
+  test('Multiline textarea correctly collapses', async ({ comfyPage }) => {
+    const multilineTextAreas = comfyPage.page.locator('.comfy-multiline-input')
+    const firstMultiline = multilineTextAreas.first()
+    const lastMultiline = multilineTextAreas.last()
+
+    await expect(firstMultiline).toBeVisible()
+    await expect(lastMultiline).toBeVisible()
+
+    const nodes = await comfyPage.getNodeRefsByType('CLIPTextEncode')
+    for (const node of nodes) {
+      await node.click('collapse')
+    }
+    await expect(firstMultiline).not.toBeVisible()
+    await expect(lastMultiline).not.toBeVisible()
+  })
+})

browser_tests/extensionAPI.spec.ts

@@ -1,4 +1,5 @@
-import { expect, Locator } from '@playwright/test'
+import { expect } from '@playwright/test'
+
 import { comfyPageFixture as test } from './fixtures/ComfyPage'
 
 test.describe('Topbar commands', () => {
@@ -157,4 +158,42 @@ test.describe('Topbar commands', () => {
       expect(await badge.textContent()).toContain('Test Badge')
     })
   })
+
+  test.describe('Dialog', () => {
+    test('Should allow showing a prompt dialog', async ({ comfyPage }) => {
+      await comfyPage.page.evaluate(() => {
+        window['app'].extensionManager.dialog
+          .prompt({
+            title: 'Test Prompt',
+            message: 'Test Prompt Message'
+          })
+          .then((value: string) => {
+            window['value'] = value
+          })
+      })
+
+      await comfyPage.fillPromptDialog('Hello, world!')
+      expect(await comfyPage.page.evaluate(() => window['value'])).toBe(
+        'Hello, world!'
+      )
+    })
+
+    test('Should allow showing a confirmation dialog', async ({
+      comfyPage
+    }) => {
+      await comfyPage.page.evaluate(() => {
+        window['app'].extensionManager.dialog
+          .confirm({
+            title: 'Test Confirm',
+            message: 'Test Confirm Message'
+          })
+          .then((value: boolean) => {
+            window['value'] = value
+          })
+      })
+
+      await comfyPage.confirmDialog.click('confirm')
+      expect(await comfyPage.page.evaluate(() => window['value'])).toBe(true)
+    })
+  })
 })

browser_tests/fixtures/ComfyPage.ts

@@ -1,28 +1,37 @@
-import type { Page, Locator, APIRequestContext } from '@playwright/test'
+import type { APIRequestContext, Locator, Page } from '@playwright/test'
 import { expect } from '@playwright/test'
 import { test as base } from '@playwright/test'
-import { ComfyActionbar } from '../helpers/actionbar'
 import dotenv from 'dotenv'
-dotenv.config()
 import * as fs from 'fs'
-import { NodeBadgeMode } from '../../src/types/nodeSource'
+
+import type { useWorkspaceStore } from '../../src/stores/workspaceStore'
 import type { NodeId } from '../../src/types/comfyWorkflow'
 import type { KeyCombo } from '../../src/types/keyBindingTypes'
+import { NodeBadgeMode } from '../../src/types/nodeSource'
+import { ComfyActionbar } from '../helpers/actionbar'
 import { ComfyTemplates } from '../helpers/templates'
 import { ComfyNodeSearchBox } from './components/ComfyNodeSearchBox'
+import { SettingDialog } from './components/SettingDialog'
 import {
   NodeLibrarySidebarTab,
+  QueueSidebarTab,
   WorkflowsSidebarTab
 } from './components/SidebarTab'
 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'
+import { NodeReference } from './utils/litegraphUtils'
+import TaskHistory from './utils/taskHistory'
+
+dotenv.config()
 
 type WorkspaceStore = ReturnType<typeof useWorkspaceStore>
 
 class ComfyMenu {
+  private _nodeLibraryTab: NodeLibrarySidebarTab | null = null
+  private _workflowsTab: WorkflowsSidebarTab | null = null
+  private _queueTab: QueueSidebarTab | null = null
+  private _topbar: Topbar | null = null
+
   public readonly sideToolbar: Locator
   public readonly themeToggleButton: Locator
   public readonly saveButton: Locator
@@ -36,15 +45,23 @@ class ComfyMenu {
   }
 
   get nodeLibraryTab() {
-    return new NodeLibrarySidebarTab(this.page)
+    this._nodeLibraryTab ??= new NodeLibrarySidebarTab(this.page)
+    return this._nodeLibraryTab
   }
 
   get workflowsTab() {
-    return new WorkflowsSidebarTab(this.page)
+    this._workflowsTab ??= new WorkflowsSidebarTab(this.page)
+    return this._workflowsTab
+  }
+
+  get queueTab() {
+    this._queueTab ??= new QueueSidebarTab(this.page)
+    return this._queueTab
   }
 
   get topbar() {
-    return new Topbar(this.page)
+    this._topbar ??= new Topbar(this.page)
+    return this._topbar
   }
 
   async toggleTheme() {
@@ -83,11 +100,13 @@ class ConfirmDialog {
   public readonly delete: Locator
   public readonly overwrite: Locator
   public readonly reject: Locator
+  public readonly confirm: Locator
 
   constructor(public readonly page: Page) {
     this.delete = page.locator('button.p-button[aria-label="Delete"]')
     this.overwrite = page.locator('button.p-button[aria-label="Overwrite"]')
     this.reject = page.locator('button.p-button[aria-label="Cancel"]')
+    this.confirm = page.locator('button.p-button[aria-label="Confirm"]')
   }
 
   async click(locator: KeysOfType<ConfirmDialog, Locator>) {
@@ -98,6 +117,8 @@ class ConfirmDialog {
 }
 
 export class ComfyPage {
+  private _history: TaskHistory | null = null
+
   public readonly url: string
   // All canvas position operations are based on default view of canvas.
   public readonly canvas: Locator
@@ -231,6 +252,11 @@ export class ComfyPage {
     }
   }
 
+  setupHistory(): TaskHistory {
+    this._history ??= new TaskHistory(this)
+    return this._history
+  }
+
   async setup({ clearStorage = true }: { clearStorage?: boolean } = {}) {
     await this.goto()
     if (clearStorage) {
@@ -343,11 +369,6 @@ export class ComfyPage {
     }, settingId)
   }
 
-  async reload({ clearStorage = true }: { clearStorage?: boolean } = {}) {
-    await this.page.reload({ timeout: 15000 })
-    await this.setup({ clearStorage })
-  }
-
   async goto() {
     await this.page.goto(this.url)
   }
@@ -518,6 +539,13 @@ export class ComfyPage {
     return this.page.locator('.p-dialog-content input[type="text"]')
   }
 
+  async fillPromptDialog(value: string) {
+    await this.promptDialogInput.fill(value)
+    await this.page.keyboard.press('Enter')
+    await this.promptDialogInput.waitFor({ state: 'hidden' })
+    await this.nextFrame()
+  }
+
   async disconnectEdge() {
     await this.dragAndDrop(this.clipTextEncodeNode1InputSlot, this.emptySpace)
   }
@@ -785,9 +813,7 @@ export class ComfyPage {
     await this.canvas.press('Control+a')
     const node = await this.getFirstNodeRef()
     await node!.clickContextMenuOption('Convert to Group Node')
-    await this.promptDialogInput.fill(groupNodeName)
-    await this.page.keyboard.press('Enter')
-    await this.promptDialogInput.waitFor({ state: 'hidden' })
+    await this.fillPromptDialog(groupNodeName)
     await this.nextFrame()
   }
 
@@ -799,6 +825,11 @@ export class ComfyPage {
   async getNodeRefById(id: NodeId) {
     return new NodeReference(id, this)
   }
+  async getNodes() {
+    return await this.page.evaluate(() => {
+      return window['app'].graph.nodes
+    })
+  }
   async getNodeRefsByType(type: string): Promise<NodeReference[]> {
     return Promise.all(
       (
@@ -845,6 +876,12 @@ export class ComfyPage {
       return (await window['app'].graphToPrompt())[api ? 'output' : 'workflow']
     }, api)
   }
+  async setFocusMode(focusMode: boolean) {
+    await this.page.evaluate((focusMode) => {
+      window['app'].extensionManager.focusMode = focusMode
+    }, focusMode)
+    await this.nextFrame()
+  }
 }
 
 export const comfyPageFixture = base.extend<{ comfyPage: ComfyPage }>({
@@ -907,5 +944,19 @@ const makeMatcher = function <T>(
 export const comfyExpect = expect.extend({
   toBePinned: makeMatcher((n) => n.isPinned(), 'pinned'),
   toBeBypassed: makeMatcher((n) => n.isBypassed(), 'bypassed'),
-  toBeCollapsed: makeMatcher((n) => n.isCollapsed(), 'collapsed')
+  toBeCollapsed: makeMatcher((n) => n.isCollapsed(), 'collapsed'),
+  async toHaveFocus(locator: Locator, options = { timeout: 256 }) {
+    const isFocused = await locator.evaluate(
+      (el) => el === document.activeElement
+    )
+
+    await expect(async () => {
+      expect(isFocused).toBe(!this.isNot)
+    }).toPass(options)
+
+    return {
+      pass: isFocused,
+      message: () => `Expected element to ${isFocused ? 'not ' : ''}be focused.`
+    }
+  }
 })

browser_tests/fixtures/UserSelectPage.ts

@@ -1,5 +1,5 @@
-import { Page } from 'playwright'
 import { test as base } from '@playwright/test'
+import { Page } from 'playwright'
 
 export class UserSelectPage {
   constructor(

browser_tests/fixtures/components/ComfyNodeSearchBox.ts

@@ -3,6 +3,13 @@ import { Locator, Page } from '@playwright/test'
 export class ComfyNodeSearchFilterSelectionPanel {
   constructor(public readonly page: Page) {}
 
+  get header() {
+    return this.page
+      .getByRole('dialog')
+      .locator('div')
+      .filter({ hasText: 'Add node filter condition' })
+  }
+
   async selectFilterType(filterType: string) {
     await this.page
       .locator(

browser_tests/fixtures/components/SidebarTab.ts

@@ -22,6 +22,12 @@ class SidebarTab {
     }
     await this.tabButton.click()
   }
+  async close() {
+    if (!this.tabButton.isVisible()) {
+      return
+    }
+    await this.tabButton.click()
+  }
 }
 
 export class NodeLibrarySidebarTab extends SidebarTab {
@@ -146,4 +152,132 @@ export class WorkflowsSidebarTab extends SidebarTab {
     await this.page.keyboard.press('Enter')
     await this.page.waitForTimeout(300)
   }
+
+  async insertWorkflow(locator: Locator) {
+    await locator.click({ button: 'right' })
+    await this.page
+      .locator('.p-contextmenu-item-content', { hasText: 'Insert' })
+      .click()
+  }
+}
+
+export class QueueSidebarTab extends SidebarTab {
+  constructor(public readonly page: Page) {
+    super(page, 'queue')
+  }
+
+  get root() {
+    return this.page.locator('.sidebar-content-container', { hasText: 'Queue' })
+  }
+
+  get tasks() {
+    return this.root.locator('[data-virtual-grid-item]')
+  }
+
+  get visibleTasks() {
+    return this.tasks.locator('visible=true')
+  }
+
+  get clearButton() {
+    return this.root.locator('.clear-all-button')
+  }
+
+  get collapseTasksButton() {
+    return this.getToggleExpandButton(false)
+  }
+
+  get expandTasksButton() {
+    return this.getToggleExpandButton(true)
+  }
+
+  get noResultsPlaceholder() {
+    return this.root.locator('.no-results-placeholder')
+  }
+
+  get galleryImage() {
+    return this.page.locator('.galleria-image')
+  }
+
+  private getToggleExpandButton(isExpanded: boolean) {
+    const iconSelector = isExpanded ? '.pi-image' : '.pi-images'
+    return this.root.locator(`.toggle-expanded-button ${iconSelector}`)
+  }
+
+  async open() {
+    await super.open()
+    return this.root.waitFor({ state: 'visible' })
+  }
+
+  async close() {
+    await super.close()
+    await this.root.waitFor({ state: 'hidden' })
+  }
+
+  async expandTasks() {
+    await this.expandTasksButton.click()
+    await this.collapseTasksButton.waitFor({ state: 'visible' })
+  }
+
+  async collapseTasks() {
+    await this.collapseTasksButton.click()
+    await this.expandTasksButton.waitFor({ state: 'visible' })
+  }
+
+  async waitForTasks() {
+    return Promise.all([
+      this.tasks.first().waitFor({ state: 'visible' }),
+      this.tasks.last().waitFor({ state: 'visible' })
+    ])
+  }
+
+  async scrollTasks(direction: 'up' | 'down') {
+    const scrollToEl =
+      direction === 'up' ? this.tasks.last() : this.tasks.first()
+    await scrollToEl.scrollIntoViewIfNeeded()
+    await this.waitForTasks()
+  }
+
+  async clearTasks() {
+    await this.clearButton.click()
+    const confirmButton = this.page.getByLabel('Delete')
+    await confirmButton.click()
+    await this.noResultsPlaceholder.waitFor({ state: 'visible' })
+  }
+
+  /** Set the width of the tab (out of 100). Must call before opening the tab */
+  async setTabWidth(width: number) {
+    if (width < 0 || width > 100) {
+      throw new Error('Width must be between 0 and 100')
+    }
+    return this.page.evaluate((width) => {
+      localStorage.setItem('queue', JSON.stringify([width, 100 - width]))
+    }, width)
+  }
+
+  getTaskPreviewButton(taskIndex: number) {
+    return this.tasks.nth(taskIndex).getByRole('button')
+  }
+
+  async openTaskPreview(taskIndex: number) {
+    const previewButton = this.getTaskPreviewButton(taskIndex)
+    await previewButton.click()
+    return this.galleryImage.waitFor({ state: 'visible' })
+  }
+
+  getGalleryImage(imageFilename: string) {
+    return this.galleryImage.and(this.page.getByAltText(imageFilename))
+  }
+
+  getTaskImage(imageFilename: string) {
+    return this.tasks.getByAltText(imageFilename)
+  }
+
+  /** Trigger the queue store and tasks to update */
+  async triggerTasksUpdate() {
+    await this.page.evaluate(() => {
+      window['app']['api'].dispatchCustomEvent('status', {
+        exec_info: { queue_remaining: 0 }
+      })
+    })
+  }
 }

browser_tests/fixtures/components/Topbar.ts

@@ -9,6 +9,12 @@ export class Topbar {
       .allInnerTexts()
   }
 
+  async getActiveTabName(): Promise<string> {
+    return this.page
+      .locator('.workflow-tabs .p-togglebutton-checked')
+      .innerText()
+  }
+
   async openSubmenuMobile() {
     await this.page.locator('.p-menubar-mobile .p-menubar-button').click()
   }

browser_tests/fixtures/utils/litegraphUtils.ts

@@ -1,6 +1,7 @@
-import { ManageGroupNode } from '../../helpers/manageGroupNode'
-import type { NodeId } from '../../../src/types/comfyWorkflow'
 import type { Page } from '@playwright/test'
+
+import type { NodeId } from '../../../src/types/comfyWorkflow'
+import { ManageGroupNode } from '../../helpers/manageGroupNode'
 import type { ComfyPage } from '../ComfyPage'
 import type { Position, Size } from '../types'
 
@@ -234,9 +235,7 @@ export class NodeReference {
   }
   async convertToGroupNode(groupNodeName: string = 'GroupNode') {
     await this.clickContextMenuOption('Convert to Group Node')
-    await this.comfyPage.promptDialogInput.fill(groupNodeName)
-    await this.comfyPage.page.keyboard.press('Enter')
-    await this.comfyPage.promptDialogInput.waitFor({ state: 'hidden' })
+    await this.comfyPage.fillPromptDialog(groupNodeName)
     await this.comfyPage.nextFrame()
     const nodes = await this.comfyPage.getNodeRefsByType(
       `workflow>${groupNodeName}`

browser_tests/fixtures/utils/taskHistory.ts

@@ -0,0 +1,162 @@
+import fs from 'fs'
+import _ from 'lodash'
+import path from 'path'
+import type { Request, Route } from 'playwright'
+import { v4 as uuidv4 } from 'uuid'
+
+import type {
+  HistoryTaskItem,
+  TaskItem,
+  TaskOutput
+} from '../../../src/types/apiTypes'
+import type { ComfyPage } from '../ComfyPage'
+
+/** keyof TaskOutput[string] */
+type OutputFileType = 'images' | 'audio' | 'animated'
+
+const DEFAULT_IMAGE = 'example.webp'
+
+const getFilenameParam = (request: Request) => {
+  const url = new URL(request.url())
+  return url.searchParams.get('filename') || DEFAULT_IMAGE
+}
+
+const getContentType = (filename: string, fileType: OutputFileType) => {
+  const subtype = path.extname(filename).slice(1)
+  switch (fileType) {
+    case 'images':
+      return `image/${subtype}`
+    case 'audio':
+      return `audio/${subtype}`
+    case 'animated':
+      return `video/${subtype}`
+  }
+}
+
+const setQueueIndex = (task: TaskItem) => {
+  task.prompt[0] = TaskHistory.queueIndex++
+}
+
+const setPromptId = (task: TaskItem) => {
+  task.prompt[1] = uuidv4()
+}
+
+export default class TaskHistory {
+  static queueIndex = 0
+  static readonly defaultTask: Readonly<HistoryTaskItem> = {
+    prompt: [0, 'prompt-id', {}, { client_id: uuidv4() }, []],
+    outputs: {},
+    status: {
+      status_str: 'success',
+      completed: true,
+      messages: []
+    },
+    taskType: 'History'
+  }
+  private tasks: HistoryTaskItem[] = []
+  private outputContentTypes: Map<string, string> = new Map()
+
+  constructor(readonly comfyPage: ComfyPage) {}
+
+  private loadAsset: (filename: string) => Buffer = _.memoize(
+    (filename: string) => {
+      const filePath = this.comfyPage.assetPath(filename)
+      return fs.readFileSync(filePath)
+    }
+  )
+
+  private async handleGetHistory(route: Route) {
+    return route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      body: JSON.stringify(this.tasks)
+    })
+  }
+
+  private async handleGetView(route: Route) {
+    const fileName = getFilenameParam(route.request())
+    if (!this.outputContentTypes.has(fileName)) route.continue()
+
+    const asset = this.loadAsset(fileName)
+    return route.fulfill({
+      status: 200,
+      contentType: this.outputContentTypes.get(fileName),
+      body: asset,
+      headers: {
+        'Cache-Control': 'public, max-age=31536000',
+        'Content-Length': asset.byteLength.toString()
+      }
+    })
+  }
+
+  async setupRoutes() {
+    return this.comfyPage.page.route(
+      /.*\/api\/(view|history)(\?.*)?$/,
+      async (route) => {
+        const request = route.request()
+        const method = request.method()
+
+        const isViewReq = request.url().includes('view') && method === 'GET'
+        if (isViewReq) return this.handleGetView(route)
+
+        const isHistoryPath = request.url().includes('history')
+        const isGetHistoryReq = isHistoryPath && method === 'GET'
+        if (isGetHistoryReq) return this.handleGetHistory(route)
+
+        const isClearReq =
+          method === 'POST' &&
+          isHistoryPath &&
+          request.postDataJSON()?.clear === true
+        if (isClearReq) return this.clearTasks()
+
+        return route.continue()
+      }
+    )
+  }
+
+  private createOutputs(
+    filenames: string[],
+    filetype: OutputFileType
+  ): TaskOutput {
+    return filenames.reduce((outputs, filename, i) => {
+      const nodeId = `${i + 1}`
+      outputs[nodeId] = {
+        [filetype]: [{ filename, subfolder: '', type: 'output' }]
+      }
+      const contentType = getContentType(filename, filetype)
+      this.outputContentTypes.set(filename, contentType)
+      return outputs
+    }, {})
+  }
+
+  private addTask(task: HistoryTaskItem) {
+    setPromptId(task)
+    setQueueIndex(task)
+    this.tasks.unshift(task) // Tasks are added to the front of the queue
+  }
+
+  clearTasks(): this {
+    this.tasks = []
+    return this
+  }
+
+  withTask(
+    outputFilenames: string[],
+    outputFiletype: OutputFileType = 'images',
+    overrides: Partial<HistoryTaskItem> = {}
+  ): this {
+    this.addTask({
+      ...TaskHistory.defaultTask,
+      outputs: this.createOutputs(outputFilenames, outputFiletype),
+      ...overrides
+    })
+    return this
+  }
+
+  /** Repeats the last task in the task history a specified number of times. */
+  repeat(n: number): this {
+    for (let i = 0; i < n; i++)
+      this.addTask(structuredClone(this.tasks.at(0)) as HistoryTaskItem)
+    return this
+  }
+}

browser_tests/globalSetup.ts

@@ -1,7 +1,8 @@
 import { FullConfig } from '@playwright/test'
-import { backupPath } from './utils/backupUtils'
 import dotenv from 'dotenv'
 
+import { backupPath } from './utils/backupUtils'
+
 dotenv.config()
 
 export default function globalSetup(config: FullConfig) {

browser_tests/globalTeardown.ts

@@ -1,7 +1,8 @@
 import { FullConfig } from '@playwright/test'
-import { restorePath } from './utils/backupUtils'
 import dotenv from 'dotenv'
 
+import { restorePath } from './utils/backupUtils'
+
 dotenv.config()
 
 export default function globalTeardown(config: FullConfig) {

browser_tests/graphCanvasMenu.spec.ts

@@ -1,4 +1,5 @@
 import { expect } from '@playwright/test'
+
 import { comfyPageFixture as test } from './fixtures/ComfyPage'
 
 test.describe('Graph Canvas Menu', () => {

browser_tests/groupNode.spec.ts

@@ -1,4 +1,5 @@
 import { expect } from '@playwright/test'
+
 import { ComfyPage, comfyPageFixture as test } from './fixtures/ComfyPage'
 import type { NodeReference } from './fixtures/utils/litegraphUtils'
 

browser_tests/helpers/actionbar.ts

@@ -1,4 +1,5 @@
-import type { Page, Locator } from '@playwright/test'
+import type { Locator, Page } from '@playwright/test'
+
 import type { AutoQueueMode } from '../../src/stores/queueStore'
 
 export class ComfyActionbar {

browser_tests/helpers/manageGroupNode.ts

@@ -1,4 +1,5 @@
 import { Locator, Page } from '@playwright/test'
+
 export class ManageGroupNode {
   footer: Locator
   header: Locator

browser_tests/helpers/templates.ts

@@ -1,4 +1,5 @@
 import { Locator, Page } from '@playwright/test'
+
 export class ComfyTemplates {
   readonly content: Locator
 

browser_tests/interaction.spec.ts

@@ -1,4 +1,5 @@
 import { expect } from '@playwright/test'
+
 import { comfyPageFixture as test } from './fixtures/ComfyPage'
 
 test.describe('Item Interaction', () => {
@@ -452,6 +453,9 @@ test.describe('Canvas Interaction', () => {
     expect(await getCursorStyle()).toBe('default')
     await comfyPage.page.mouse.down()
     expect(await getCursorStyle()).toBe('grabbing')
+    // Move mouse should not alter cursor style.
+    await comfyPage.page.mouse.move(10, 20)
+    expect(await getCursorStyle()).toBe('grabbing')
     await comfyPage.page.mouse.up()
     expect(await getCursorStyle()).toBe('default')
 
@@ -465,6 +469,43 @@ test.describe('Canvas Interaction', () => {
     expect(await getCursorStyle()).toBe('default')
   })
 
+  // https://github.com/Comfy-Org/litegraph.js/pull/424
+  test('Properly resets dragging state after pan mode sequence', async ({
+    comfyPage
+  }) => {
+    const getCursorStyle = async () => {
+      return await comfyPage.page.evaluate(() => {
+        return (
+          document.getElementById('graph-canvas')!.style.cursor || 'default'
+        )
+      })
+    }
+
+    // Initial state check
+    await comfyPage.page.mouse.move(10, 10)
+    expect(await getCursorStyle()).toBe('default')
+
+    // Click and hold
+    await comfyPage.page.mouse.down()
+    expect(await getCursorStyle()).toBe('grabbing')
+
+    // Press space while holding click
+    await comfyPage.page.keyboard.down('Space')
+    expect(await getCursorStyle()).toBe('grabbing')
+
+    // Release click while space is still down
+    await comfyPage.page.mouse.up()
+    expect(await getCursorStyle()).toBe('grab')
+
+    // Release space
+    await comfyPage.page.keyboard.up('Space')
+    expect(await getCursorStyle()).toBe('default')
+
+    // Move mouse - cursor should remain default
+    await comfyPage.page.mouse.move(20, 20)
+    expect(await getCursorStyle()).toBe('default')
+  })
+
   test('Can pan when dragging a link', async ({ comfyPage }) => {
     const posSlot1 = comfyPage.clipTextEncodeNode1InputSlot
     await comfyPage.page.mouse.move(posSlot1.x, posSlot1.y)
@@ -552,7 +593,7 @@ test.describe('Load workflow', () => {
   }) => {
     await comfyPage.loadWorkflow('single_ksampler')
     await expect(comfyPage.canvas).toHaveScreenshot('single_ksampler.png')
-    await comfyPage.reload({ clearStorage: false })
+    await comfyPage.setup({ clearStorage: false })
     await expect(comfyPage.canvas).toHaveScreenshot('single_ksampler.png')
   })
 
@@ -569,11 +610,72 @@ test.describe('Load workflow', () => {
     await expect(comfyPage.canvas).toHaveScreenshot(
       'single_ksampler_modified.png'
     )
-    await comfyPage.reload({ clearStorage: false })
+    await comfyPage.setup({ clearStorage: false })
     await expect(comfyPage.canvas).toHaveScreenshot(
       'single_ksampler_modified.png'
     )
   })
+
+  test.describe('Restore all open workflows on reload', () => {
+    let workflowA: string
+    let workflowB: string
+
+    const generateUniqueFilename = (extension = '') =>
+      `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}${extension}`
+
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
+
+      workflowA = generateUniqueFilename()
+      await comfyPage.menu.topbar.saveWorkflow(workflowA)
+      workflowB = generateUniqueFilename()
+      await comfyPage.menu.topbar.triggerTopbarCommand(['Workflow', 'New'])
+      await comfyPage.menu.topbar.saveWorkflow(workflowB)
+
+      // Wait for localStorage to persist the workflow paths before reloading
+      await comfyPage.page.waitForFunction(
+        () => !!window.localStorage.getItem('Comfy.OpenWorkflowsPaths')
+      )
+      await comfyPage.setup({ clearStorage: false })
+    })
+
+    test('Restores topbar workflow tabs after reload', async ({
+      comfyPage
+    }) => {
+      await comfyPage.setSetting(
+        'Comfy.Workflow.WorkflowTabsPosition',
+        'Topbar'
+      )
+      const tabs = await comfyPage.menu.topbar.getTabNames()
+      const activeWorkflowName = await comfyPage.menu.topbar.getActiveTabName()
+
+      expect(tabs).toEqual(expect.arrayContaining([workflowA, workflowB]))
+      expect(tabs.indexOf(workflowA)).toBeLessThan(tabs.indexOf(workflowB))
+      expect(activeWorkflowName).toEqual(workflowB)
+    })
+
+    test('Restores sidebar workflows after reload', async ({ comfyPage }) => {
+      await comfyPage.setSetting(
+        'Comfy.Workflow.WorkflowTabsPosition',
+        'Sidebar'
+      )
+      await comfyPage.menu.workflowsTab.open()
+      const openWorkflows =
+        await comfyPage.menu.workflowsTab.getOpenedWorkflowNames()
+      const activeWorkflowName =
+        await comfyPage.menu.workflowsTab.getActiveWorkflowName()
+      const workflowPathA = `${workflowA}.json`
+      const workflowPathB = `${workflowB}.json`
+
+      expect(openWorkflows).toEqual(
+        expect.arrayContaining([workflowPathA, workflowPathB])
+      )
+      expect(openWorkflows.indexOf(workflowPathA)).toBeLessThan(
+        openWorkflows.indexOf(workflowPathB)
+      )
+      expect(activeWorkflowName).toEqual(workflowPathB)
+    })
+  })
 })
 
 test.describe('Load duplicate workflow', () => {

browser_tests/keybindings.spec.ts

@@ -1,4 +1,5 @@
 import { expect } from '@playwright/test'
+
 import { comfyPageFixture as test } from './fixtures/ComfyPage'
 
 test.describe('Keybindings', () => {

browser_tests/litegraphEvent.spec.ts

@@ -1,4 +1,5 @@
 import { expect } from '@playwright/test'
+
 import { comfyPageFixture as test } from './fixtures/ComfyPage'
 
 function listenForEvent(): Promise<Event> {

browser_tests/loadWorkflowInMedia.spec.ts

@@ -1,4 +1,5 @@
 import { expect } from '@playwright/test'
+
 import { comfyPageFixture as test } from './fixtures/ComfyPage'
 
 test.describe('Load Workflow in Media', () => {

browser_tests/menu.spec.ts

@@ -1,4 +1,5 @@
 import { expect } from '@playwright/test'
+
 import { comfyPageFixture as test } from './fixtures/ComfyPage'
 
 test.describe('Menu', () => {
@@ -17,7 +18,7 @@ test.describe('Menu', () => {
     expect(await comfyPage.menu.getThemeId()).toBe('light')
 
     // Theme id should persist after reload.
-    await comfyPage.reload()
+    await comfyPage.setup()
     expect(await comfyPage.menu.getThemeId()).toBe('light')
 
     await comfyPage.menu.toggleTheme()
@@ -288,6 +289,47 @@ test.describe('Menu', () => {
         }
       })
     })
+
+    test('Can customize bookmark color after interacting with color options', async ({
+      comfyPage
+    }) => {
+      // Open customization dialog
+      await comfyPage.setSetting('Comfy.NodeLibrary.Bookmarks.V2', ['foo/'])
+      const tab = comfyPage.menu.nodeLibraryTab
+      await tab.getFolder('foo').click({ button: 'right' })
+      await comfyPage.page.getByLabel('Customize').click()
+
+      // Click a color option multiple times
+      const customColorOption = comfyPage.page.locator(
+        '.p-togglebutton-content > .pi-palette'
+      )
+      await customColorOption.click()
+      await customColorOption.click()
+
+      // Use the color picker
+      await comfyPage.page
+        .getByLabel('Customize Folder')
+        .getByRole('textbox')
+        .click()
+      await comfyPage.page.locator('.p-colorpicker-color-background').click()
+
+      // Finalize the customization
+      await comfyPage.page
+        .locator('.icon-field .p-selectbutton > *:nth-child(2)')
+        .click()
+      await comfyPage.page.getByLabel('Confirm').click()
+      await comfyPage.nextFrame()
+
+      // Verify the color selection is saved
+      const setting = await comfyPage.getSetting(
+        'Comfy.NodeLibrary.BookmarksCustomization'
+      )
+      await expect(setting).toHaveProperty(['foo/', 'color'])
+      await expect(setting['foo/'].color).not.toBeNull()
+      await expect(setting['foo/'].color).not.toBeUndefined()
+      await expect(setting['foo/'].color).not.toBe('')
+    })
+
     test('Can rename customized bookmark folder', async ({ comfyPage }) => {
       await comfyPage.setSetting('Comfy.NodeLibrary.Bookmarks.V2', ['foo/'])
       await comfyPage.setSetting('Comfy.NodeLibrary.BookmarksCustomization', {
@@ -395,6 +437,56 @@ test.describe('Menu', () => {
       )
     })
 
+    test('Can duplicate workflow', async ({ comfyPage }) => {
+      const tab = comfyPage.menu.workflowsTab
+      await comfyPage.menu.topbar.saveWorkflow('workflow1.json')
+
+      expect(await tab.getTopLevelSavedWorkflowNames()).toEqual(
+        expect.arrayContaining(['workflow1.json'])
+      )
+
+      await comfyPage.executeCommand('Comfy.DuplicateWorkflow')
+      expect(await tab.getOpenedWorkflowNames()).toEqual([
+        'workflow1.json',
+        '*workflow1 (Copy).json'
+      ])
+
+      await comfyPage.executeCommand('Comfy.DuplicateWorkflow')
+      expect(await tab.getOpenedWorkflowNames()).toEqual([
+        'workflow1.json',
+        '*workflow1 (Copy).json',
+        '*workflow1 (Copy) (2).json'
+      ])
+
+      await comfyPage.executeCommand('Comfy.DuplicateWorkflow')
+      expect(await tab.getOpenedWorkflowNames()).toEqual([
+        'workflow1.json',
+        '*workflow1 (Copy).json',
+        '*workflow1 (Copy) (2).json',
+        '*workflow1 (Copy) (3).json'
+      ])
+    })
+
+    test('Can open workflow after insert', async ({ comfyPage }) => {
+      await comfyPage.setupWorkflowsDirectory({
+        'workflow1.json': 'single_ksampler.json'
+      })
+      await comfyPage.setup()
+
+      const tab = comfyPage.menu.workflowsTab
+      await tab.open()
+      await comfyPage.executeCommand('Comfy.LoadDefaultWorkflow')
+      const originalNodeCount = (await comfyPage.getNodes()).length
+
+      await tab.insertWorkflow(tab.getPersistedItem('workflow1.json'))
+      await comfyPage.nextFrame()
+      expect((await comfyPage.getNodes()).length).toEqual(originalNodeCount + 1)
+
+      await tab.getPersistedItem('workflow1.json').click()
+      await comfyPage.nextFrame()
+      expect((await comfyPage.getNodes()).length).toEqual(1)
+    })
+
     test('Can rename nested workflow from opened workflow item', async ({
       comfyPage
     }) => {
@@ -474,7 +566,7 @@ test.describe('Menu', () => {
       })
 
       await comfyPage.setSetting('Comfy.Locale', 'zh')
-      await comfyPage.reload()
+      await comfyPage.setup()
 
       const downloadedContentZh = await comfyPage.getExportedWorkflow({
         api: false
@@ -570,6 +662,15 @@ test.describe('Menu', () => {
       ).toEqual(['*Unsaved Workflow.json'])
     })
 
+    test('Can close saved workflow with command', async ({ comfyPage }) => {
+      const tab = comfyPage.menu.workflowsTab
+      await comfyPage.menu.topbar.saveWorkflow('workflow1.json')
+      await comfyPage.executeCommand('Workspace.CloseWorkflow')
+      expect(await tab.getOpenedWorkflowNames()).toEqual([
+        '*Unsaved Workflow.json'
+      ])
+    })
+
     test('Can delete workflows (confirm disabled)', async ({ comfyPage }) => {
       await comfyPage.setSetting('Comfy.Workflow.ConfirmDelete', false)
 
@@ -703,3 +804,204 @@ test.describe('Menu', () => {
     })
   })
 })
+
+test.describe.skip('Queue sidebar', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
+  })
+
+  test('can display tasks', async ({ comfyPage }) => {
+    await comfyPage.setupHistory().withTask(['example.webp']).setupRoutes()
+    await comfyPage.menu.queueTab.open()
+    await comfyPage.menu.queueTab.waitForTasks()
+    expect(await comfyPage.menu.queueTab.visibleTasks.count()).toBe(1)
+  })
+
+  test('can display tasks after closing then opening', async ({
+    comfyPage
+  }) => {
+    await comfyPage.setupHistory().withTask(['example.webp']).setupRoutes()
+    await comfyPage.menu.queueTab.open()
+    await comfyPage.menu.queueTab.close()
+    await comfyPage.menu.queueTab.open()
+    await comfyPage.menu.queueTab.waitForTasks()
+    expect(await comfyPage.menu.queueTab.visibleTasks.count()).toBe(1)
+  })
+
+  test.describe('Virtual scroll', () => {
+    const layouts = [
+      { description: 'Five columns layout', width: 95, rows: 3, cols: 5 },
+      { description: 'Three columns layout', width: 55, rows: 3, cols: 3 },
+      { description: 'Two columns layout', width: 40, rows: 3, cols: 2 }
+    ]
+
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage
+        .setupHistory()
+        .withTask(['example.webp'])
+        .repeat(50)
+        .setupRoutes()
+    })
+
+    layouts.forEach(({ description, width, rows, cols }) => {
+      const preRenderedRows = 1
+      const preRenderedTasks = preRenderedRows * cols * 2
+      const visibleTasks = rows * cols
+      const expectRenderLimit = visibleTasks + preRenderedTasks
+
+      test.describe(description, () => {
+        test.beforeEach(async ({ comfyPage }) => {
+          await comfyPage.menu.queueTab.setTabWidth(width)
+          await comfyPage.menu.queueTab.open()
+          await comfyPage.menu.queueTab.waitForTasks()
+        })
+
+        test('should not render items outside of view', async ({
+          comfyPage
+        }) => {
+          const renderedCount =
+            await comfyPage.menu.queueTab.visibleTasks.count()
+          expect(renderedCount).toBeLessThanOrEqual(expectRenderLimit)
+        })
+
+        test('should teardown items after scrolling away', async ({
+          comfyPage
+        }) => {
+          await comfyPage.menu.queueTab.scrollTasks('down')
+          const renderedCount =
+            await comfyPage.menu.queueTab.visibleTasks.count()
+          expect(renderedCount).toBeLessThanOrEqual(expectRenderLimit)
+        })
+
+        test('should re-render items after scrolling away then back', async ({
+          comfyPage
+        }) => {
+          await comfyPage.menu.queueTab.scrollTasks('down')
+          await comfyPage.menu.queueTab.scrollTasks('up')
+          const renderedCount =
+            await comfyPage.menu.queueTab.visibleTasks.count()
+          expect(renderedCount).toBeLessThanOrEqual(expectRenderLimit)
+        })
+      })
+    })
+  })
+
+  test.describe('Expand tasks', () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      // 2-item batch and 3-item batch -> 3 additional items when expanded
+      await comfyPage
+        .setupHistory()
+        .withTask(['example.webp', 'example.webp', 'example.webp'])
+        .withTask(['example.webp', 'example.webp'])
+        .setupRoutes()
+      await comfyPage.menu.queueTab.open()
+      await comfyPage.menu.queueTab.waitForTasks()
+    })
+
+    test('can expand tasks with multiple outputs', async ({ comfyPage }) => {
+      const initialCount = await comfyPage.menu.queueTab.visibleTasks.count()
+      await comfyPage.menu.queueTab.expandTasks()
+      expect(await comfyPage.menu.queueTab.visibleTasks.count()).toBe(
+        initialCount + 3
+      )
+    })
+
+    test('can collapse flat tasks', async ({ comfyPage }) => {
+      const initialCount = await comfyPage.menu.queueTab.visibleTasks.count()
+      await comfyPage.menu.queueTab.expandTasks()
+      await comfyPage.menu.queueTab.collapseTasks()
+      expect(await comfyPage.menu.queueTab.visibleTasks.count()).toBe(
+        initialCount
+      )
+    })
+  })
+
+  test.describe('Clear tasks', () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage
+        .setupHistory()
+        .withTask(['example.webp'])
+        .repeat(6)
+        .setupRoutes()
+      await comfyPage.menu.queueTab.open()
+    })
+
+    test('can clear all tasks', async ({ comfyPage }) => {
+      await comfyPage.menu.queueTab.clearTasks()
+      expect(await comfyPage.menu.queueTab.visibleTasks.count()).toBe(0)
+      expect(
+        await comfyPage.menu.queueTab.noResultsPlaceholder.isVisible()
+      ).toBe(true)
+    })
+
+    test('can load new tasks after clearing all', async ({ comfyPage }) => {
+      await comfyPage.menu.queueTab.clearTasks()
+      await comfyPage.menu.queueTab.close()
+      await comfyPage.setupHistory().withTask(['example.webp']).setupRoutes()
+      await comfyPage.menu.queueTab.open()
+      await comfyPage.menu.queueTab.waitForTasks()
+      expect(await comfyPage.menu.queueTab.visibleTasks.count()).toBe(1)
+    })
+  })
+
+  test.describe('Gallery', () => {
+    const firstImage = 'example.webp'
+    const secondImage = 'image32x32.webp'
+
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage
+        .setupHistory()
+        .withTask([secondImage])
+        .withTask([firstImage])
+        .setupRoutes()
+      await comfyPage.menu.queueTab.open()
+      await comfyPage.menu.queueTab.waitForTasks()
+      await comfyPage.menu.queueTab.openTaskPreview(0)
+    })
+
+    test('displays gallery image after opening task preview', async ({
+      comfyPage
+    }) => {
+      await comfyPage.nextFrame()
+      expect(comfyPage.menu.queueTab.getGalleryImage(firstImage)).toBeVisible()
+    })
+
+    test('maintains active gallery item when new tasks are added', async ({
+      comfyPage
+    }) => {
+      // Add a new task while the gallery is still open
+      const newImage = 'image64x64.webp'
+      comfyPage.setupHistory().withTask([newImage])
+      await comfyPage.menu.queueTab.triggerTasksUpdate()
+      await comfyPage.page.waitForTimeout(500)
+      const newTask = comfyPage.menu.queueTab.tasks.getByAltText(newImage)
+      await newTask.waitFor({ state: 'visible' })
+      // The active gallery item should still be the initial image
+      expect(comfyPage.menu.queueTab.getGalleryImage(firstImage)).toBeVisible()
+    })
+
+    test.describe('Gallery navigation', () => {
+      const paths: {
+        description: string
+        path: ('Right' | 'Left')[]
+        end: string
+      }[] = [
+        { description: 'Right', path: ['Right'], end: secondImage },
+        { description: 'Left', path: ['Right', 'Left'], end: firstImage },
+        { description: 'Left wrap', path: ['Left'], end: secondImage },
+        { description: 'Right wrap', path: ['Right', 'Right'], end: firstImage }
+      ]
+
+      paths.forEach(({ description, path, end }) => {
+        test(`can navigate gallery ${description}`, async ({ comfyPage }) => {
+          for (const direction of path)
+            await comfyPage.page.keyboard.press(`Arrow${direction}`, {
+              delay: 256
+            })
+          await comfyPage.nextFrame()
+          expect(comfyPage.menu.queueTab.getGalleryImage(end)).toBeVisible()
+        })
+      })
+    })
+  })
+})

browser_tests/nodeBadge.spec.ts

@@ -1,7 +1,8 @@
 import { expect } from '@playwright/test'
-import { comfyPageFixture as test } from './fixtures/ComfyPage'
+
 import type { ComfyApp } from '../src/scripts/app'
 import { NodeBadgeMode } from '../src/types/nodeSource'
+import { comfyPageFixture as test } from './fixtures/ComfyPage'
 
 test.describe('Node Badge', () => {
   test('Can add badge', async ({ comfyPage }) => {

browser_tests/nodeDisplay.spec.ts

@@ -1,4 +1,5 @@
 import { expect } from '@playwright/test'
+
 import { comfyPageFixture as test } from './fixtures/ComfyPage'
 
 // If an input is optional by node definition, it should be shown as

browser_tests/nodeSearchBox.spec.ts

@@ -1,5 +1,7 @@
-import { expect } from '@playwright/test'
-import { comfyPageFixture as test } from './fixtures/ComfyPage'
+import {
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from './fixtures/ComfyPage'
 
 test.describe('Node search box', () => {
   test.beforeEach(async ({ comfyPage }) => {
@@ -80,10 +82,14 @@ test.describe('Node search box', () => {
   test('Has correct aria-labels on search results', async ({ comfyPage }) => {
     const node = 'Load Checkpoint'
     await comfyPage.doubleClickCanvas()
-    await comfyPage.searchBox.fillAndSelectFirstNode(node)
-    const firstResult = comfyPage.page
-      .locator('li.p-autocomplete-option')
-      .first()
+    await comfyPage.searchBox.input.waitFor({ state: 'visible' })
+    await comfyPage.searchBox.input.fill(node)
+    await comfyPage.searchBox.dropdown.waitFor({ state: 'visible' })
+    // Wait for some time for the auto complete list to update.
+    // The auto complete list is debounced and may take some time to update.
+    await comfyPage.page.waitForTimeout(500)
+
+    const firstResult = comfyPage.searchBox.dropdown.locator('li').first()
     await expect(firstResult).toHaveAttribute('aria-label', node)
   })
 
@@ -105,26 +111,127 @@ test.describe('Node search box', () => {
   })
 
   test.describe('Filtering', () => {
+    const expectFilterChips = async (comfyPage, expectedTexts: string[]) => {
+      const chips = comfyPage.searchBox.filterChips
+
+      // Check that the number of chips matches the expected count
+      await expect(chips).toHaveCount(expectedTexts.length)
+
+      // Verify the text and visibility of each filter chip
+      await Promise.all(
+        expectedTexts.map(async (text, index) => {
+          const chip = chips.nth(index)
+          await expect(chip).toContainText(text)
+          await expect(chip).toBeVisible()
+        })
+      )
+    }
+
     test.beforeEach(async ({ comfyPage }) => {
       await comfyPage.doubleClickCanvas()
     })
 
     test('Can add filter', async ({ comfyPage }) => {
       await comfyPage.searchBox.addFilter('MODEL', 'Input Type')
-      await expect(comfyPage.searchBox.filterChips).toHaveCount(1)
+      await expectFilterChips(comfyPage, ['MODEL'])
+    })
+
+    // Flaky test.
+    // Sample test failure:
+    // https://github.com/Comfy-Org/ComfyUI_frontend/actions/runs/12696912248/job/35391990861?pr=2210
+    /*
+    1) [chromium-2x] › nodeSearchBox.spec.ts:135:5 › Node search box › Filtering › Outer click dismisses filter panel but keeps search box visible
+
+    Error: expect(locator).not.toBeVisible()
+
+    Locator: getByRole('dialog').locator('div').filter({ hasText: 'Add node filter condition' })
+    Expected: not visible
+    Received: visible
+    Call log:
+      - expect.not.toBeVisible with timeout 5000ms
+      - waiting for getByRole('dialog').locator('div').filter({ hasText: 'Add node filter condition' })
+
+
+      143 |
+      144 |       // Verify the filter selection panel is hidden
+    > 145 |       expect(panel.header).not.toBeVisible()
+          |                                ^
+      146 |
+      147 |       // Verify the node search dialog is still visible
+      148 |       expect(comfyPage.searchBox.input).toBeVisible()
+
+        at /home/runner/work/ComfyUI_frontend/ComfyUI_frontend/ComfyUI_frontend/browser_tests/nodeSearchBox.spec.ts:145:32
+     */
+    test.skip('Outer click dismisses filter panel but keeps search box visible', async ({
+      comfyPage
+    }) => {
+      await comfyPage.searchBox.filterButton.click()
+      const panel = comfyPage.searchBox.filterSelectionPanel
+      await panel.header.waitFor({ state: 'visible' })
+      const panelBounds = await panel.header.boundingBox()
+      await comfyPage.page.mouse.click(panelBounds!.x - 10, panelBounds!.y - 10)
+
+      // Verify the filter selection panel is hidden
+      expect(panel.header).not.toBeVisible()
+
+      // Verify the node search dialog is still visible
+      expect(comfyPage.searchBox.input).toBeVisible()
     })
 
     test('Can add multiple filters', async ({ comfyPage }) => {
       await comfyPage.searchBox.addFilter('MODEL', 'Input Type')
       await comfyPage.searchBox.addFilter('CLIP', 'Output Type')
-      await expect(comfyPage.searchBox.filterChips).toHaveCount(2)
+      await expectFilterChips(comfyPage, ['MODEL', 'CLIP'])
     })
 
     test('Can remove filter', async ({ comfyPage }) => {
       await comfyPage.searchBox.addFilter('MODEL', 'Input Type')
-      await comfyPage.searchBox.addFilter('CLIP', 'Output Type')
       await comfyPage.searchBox.removeFilter(0)
-      await expect(comfyPage.searchBox.filterChips).toHaveCount(1)
+      await expectFilterChips(comfyPage, [])
+    })
+
+    test.describe('Removing from multiple filters', () => {
+      test.beforeEach(async ({ comfyPage }) => {
+        await comfyPage.searchBox.addFilter('MODEL', 'Input Type')
+        await comfyPage.searchBox.addFilter('CLIP', 'Output Type')
+        await comfyPage.searchBox.addFilter('utils', 'Category')
+      })
+
+      test('Can remove first filter', async ({ comfyPage }) => {
+        await comfyPage.searchBox.removeFilter(0)
+        await expectFilterChips(comfyPage, ['CLIP', 'utils'])
+        await comfyPage.searchBox.removeFilter(0)
+        await expectFilterChips(comfyPage, ['utils'])
+        await comfyPage.searchBox.removeFilter(0)
+        await expectFilterChips(comfyPage, [])
+      })
+
+      test('Can remove middle filter', async ({ comfyPage }) => {
+        await comfyPage.searchBox.removeFilter(1)
+        await expectFilterChips(comfyPage, ['MODEL', 'utils'])
+      })
+
+      test('Can remove last filter', async ({ comfyPage }) => {
+        await comfyPage.searchBox.removeFilter(2)
+        await expectFilterChips(comfyPage, ['MODEL', 'CLIP'])
+      })
+    })
+  })
+
+  test.describe('Input focus behavior', () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.doubleClickCanvas()
+    })
+
+    test('focuses input after adding a filter', async ({ comfyPage }) => {
+      await comfyPage.searchBox.addFilter('MODEL', 'Input Type')
+      await expect(comfyPage.searchBox.input).toHaveFocus()
+    })
+
+    test('focuses input after removing a filter', async ({ comfyPage }) => {
+      await comfyPage.searchBox.addFilter('MODEL', 'Input Type')
+      await comfyPage.searchBox.removeFilter(0)
+      await expect(comfyPage.searchBox.input).toHaveFocus()
     })
   })
 })

browser_tests/primitiveNode.spec.ts

@@ -1,4 +1,5 @@
 import { expect } from '@playwright/test'
+
 import { comfyPageFixture as test } from './fixtures/ComfyPage'
 import type { NodeReference } from './fixtures/utils/litegraphUtils'
 

browser_tests/propertiesPanel.spec.ts

@@ -1,4 +1,5 @@
 import { expect } from '@playwright/test'
+
 import { comfyPageFixture as test } from './fixtures/ComfyPage'
 
 test.describe('Properties Panel', () => {

browser_tests/rerouteNode.spec.ts

@@ -0,0 +1,38 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from './fixtures/ComfyPage'
+
+test.describe('Reroute Node', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
+  })
+
+  test.afterEach(async ({ comfyPage }) => {
+    await comfyPage.setupWorkflowsDirectory({})
+  })
+
+  test('loads from inserted workflow', async ({ comfyPage }) => {
+    const workflowName = 'single_connected_reroute_node.json'
+    await comfyPage.setupWorkflowsDirectory({
+      [workflowName]: workflowName
+    })
+    await comfyPage.setup()
+    await comfyPage.menu.topbar.triggerTopbarCommand(['Workflow', 'New'])
+
+    // Insert the workflow
+    const workflowsTab = comfyPage.menu.workflowsTab
+    await workflowsTab.open()
+    await workflowsTab.getPersistedItem(workflowName).click({ button: 'right' })
+    const insertButton = comfyPage.page.locator('.p-contextmenu-item-link', {
+      hasText: 'Insert'
+    })
+    await insertButton.click()
+
+    // Close the sidebar tab
+    await workflowsTab.tabButton.click()
+    await workflowsTab.root.waitFor({ state: 'hidden' })
+    await comfyPage.setFocusMode(true)
+
+    await expect(comfyPage.canvas).toHaveScreenshot('reroute_inserted.png')
+  })
+})

browser_tests/rightClickMenu.spec.ts

@@ -1,6 +1,7 @@
 import { expect } from '@playwright/test'
-import { comfyPageFixture as test } from './fixtures/ComfyPage'
+
 import { NodeBadgeMode } from '../src/types/nodeSource'
+import { comfyPageFixture as test } from './fixtures/ComfyPage'
 
 test.describe('Canvas Right Click Menu', () => {
   // See https://github.com/comfyanonymous/ComfyUI/issues/3883

browser_tests/templates.spec.ts

@@ -1,4 +1,5 @@
 import { expect } from '@playwright/test'
+
 import { comfyPageFixture as test } from './fixtures/ComfyPage'
 
 test.describe('Templates', () => {

browser_tests/textWidgetTruncate.spec.ts

@@ -1,4 +1,5 @@
 import { expect } from '@playwright/test'
+
 import { comfyPageFixture as test } from './fixtures/ComfyPage'
 
 test.describe('Combo text widget', () => {

browser_tests/userSelectView.spec.ts

@@ -1,4 +1,5 @@
 import { expect } from '@playwright/test'
+
 import { userSelectPageFixture as test } from './fixtures/UserSelectPage'
 
 /**

browser_tests/utils/backupUtils.ts

@@ -1,5 +1,5 @@
-import path from 'path'
 import fs from 'fs-extra'
+import path from 'path'
 
 type PathParts = readonly [string, ...string[]]
 

eslint.config.js

@@ -1,8 +1,8 @@
-import globals from 'globals'
 import pluginJs from '@eslint/js'
-import tseslint from 'typescript-eslint'
-import pluginVue from 'eslint-plugin-vue'
 import unusedImports from 'eslint-plugin-unused-imports'
+import pluginVue from 'eslint-plugin-vue'
+import globals from 'globals'
+import tseslint from 'typescript-eslint'
 
 export default [
   {

global.d.ts

@@ -1 +1,3 @@
 declare const __COMFYUI_FRONTEND_VERSION__: string
+declare const __SENTRY_ENABLED__: boolean
+declare const __SENTRY_DSN__: string

jest.config.fast.ts

@@ -1,12 +0,0 @@
-import type { JestConfigWithTsJest } from 'ts-jest'
-import baseConfig from './jest.config.base'
-
-const jestConfig: JestConfigWithTsJest = {
-  ...baseConfig,
-  displayName: 'fast',
-  setupFiles: ['./tests-ui/tests/fast/globalSetup.ts'],
-  setupFilesAfterEnv: undefined,
-  testMatch: ['**/tests-ui/tests/fast/**/*.test.ts']
-}
-
-export default jestConfig

jest.config.slow.ts

@@ -1,11 +0,0 @@
-import type { JestConfigWithTsJest } from 'ts-jest'
-import baseConfig from './jest.config.base'
-
-const jestConfig: JestConfigWithTsJest = {
-  ...baseConfig,
-  displayName: 'slow (DOM)',
-  testTimeout: 10000,
-  testMatch: ['**/tests-ui/tests/slow/**/*.test.ts']
-}
-
-export default jestConfig

jest.config.ts

@@ -21,8 +21,7 @@ const jestConfig: JestConfigWithTsJest = {
   },
   clearMocks: true,
   resetModules: true,
-  setupFiles: ['./tests-ui/tests/globalSetup.ts'],
-  setupFilesAfterEnv: ['./tests-ui/tests/afterSetup.ts']
+  setupFiles: ['./tests-ui/tests/globalSetup.ts']
 }
 
 export default jestConfig

lint-staged.config.js

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

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comfyorg/comfyui-frontend",
   "private": true,
-  "version": "1.6.2",
+  "version": "1.8.2",
   "type": "module",
   "repository": "https://github.com/Comfy-Org/ComfyUI_frontend",
   "homepage": "https://comfy.org",
@@ -17,11 +17,9 @@
     "update-litegraph": "node scripts/update-litegraph.js",
     "zipdist": "node scripts/zipdist.js",
     "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",
-    "test:jest:slow": "jest --config jest.config.slow.ts",
-    "test:generate:examples": "npx tsx tests-ui/extractExamples",
+    "format": "prettier --write './**/*.{js,ts,tsx,vue,mts}'",
+    "format:check": "prettier --check './**/*.{js,ts,tsx,vue,mts}'",
+    "test:jest": "jest --config jest.config.ts",
     "test:generate": "npx tsx tests-ui/setup",
     "test:browser": "npx playwright test",
     "test:component": "vitest run src/components/",
@@ -30,7 +28,8 @@
     "lint": "eslint src",
     "lint:fix": "eslint src --fix",
     "locale": "lobe-i18n locale",
-    "collect-i18n": "playwright test --config=playwright.i18n.config.ts"
+    "collect-i18n": "playwright test --config=playwright.i18n.config.ts",
+    "json-schema": "tsx scripts/generate-json-schema.ts"
   },
   "devDependencies": {
     "@babel/core": "^7.24.7",
@@ -40,6 +39,7 @@
     "@lobehub/i18n-cli": "^1.20.0",
     "@pinia/testing": "^0.1.5",
     "@playwright/test": "^1.44.1",
+    "@trivago/prettier-plugin-sort-imports": "^5.2.0",
     "@types/jest": "^29.5.12",
     "@types/lodash": "^4.17.6",
     "@types/node": "^20.14.8",
@@ -78,13 +78,23 @@
     "vite-plugin-static-copy": "^1.0.5",
     "vitest": "^2.0.5",
     "vue-tsc": "^2.1.10",
-    "zip-dir": "^2.0.0"
+    "zip-dir": "^2.0.0",
+    "zod-to-json-schema": "^3.24.1"
   },
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^1.3.1",
-    "@comfyorg/comfyui-electron-types": "^0.3.34",
-    "@comfyorg/litegraph": "^0.8.46",
-    "@primevue/themes": "^4.0.5",
+    "@comfyorg/comfyui-electron-types": "^0.4.11",
+    "@comfyorg/litegraph": "^0.8.61",
+    "@primevue/forms": "^4.2.5",
+    "@primevue/themes": "^4.2.5",
+    "@sentry/vue": "^8.48.0",
+    "@tiptap/core": "^2.10.4",
+    "@tiptap/extension-link": "^2.10.4",
+    "@tiptap/extension-table": "^2.10.4",
+    "@tiptap/extension-table-cell": "^2.10.4",
+    "@tiptap/extension-table-header": "^2.10.4",
+    "@tiptap/extension-table-row": "^2.10.4",
+    "@tiptap/starter-kit": "^2.10.4",
     "@vueuse/core": "^11.0.0",
     "@xterm/addon-fit": "^0.10.0",
     "@xterm/xterm": "^5.5.0",
@@ -96,9 +106,10 @@
     "loglevel": "^1.9.2",
     "pinia": "^2.1.7",
     "primeicons": "^7.0.0",
-    "primevue": "^4.0.5",
+    "primevue": "^4.2.5",
     "three": "^0.170.0",
-    "vue": "^3.4.31",
+    "tiptap-markdown": "^0.8.10",
+    "vue": "^3.5.13",
     "vue-i18n": "^9.13.1",
     "vue-router": "^4.4.3",
     "zod": "^3.23.8",

playwright.i18n.config.ts

@@ -8,7 +8,7 @@ const config: PlaywrightTestConfig = {
   },
   reporter: 'list',
   timeout: 10000,
-  testMatch: /collect-i18n\.ts/
+  testMatch: /collect-i18n-.*\.ts/
 }
 
 export default config

scripts/collect-i18n-general.ts

@@ -1,15 +1,13 @@
 import * as fs from 'fs'
+
 import { comfyPageFixture as test } from '../browser_tests/fixtures/ComfyPage'
 import { CORE_MENU_COMMANDS } from '../src/constants/coreMenuCommands'
 import { SERVER_CONFIG_ITEMS } from '../src/constants/serverConfig'
-import { formatCamelCase, normalizeI18nKey } from '../src/utils/formatUtil'
-import { ComfyNodeDefImpl } from '../src/stores/nodeDefStore'
 import type { ComfyCommandImpl } from '../src/stores/commandStore'
 import type { FormItem, SettingParams } from '../src/types/settingTypes'
-import type { ComfyApi } from '../src/scripts/api'
+import { formatCamelCase, normalizeI18nKey } from '../src/utils/formatUtil'
 
 const localePath = './src/locales/en/main.json'
-const nodeDefsPath = './src/locales/en/nodeDefs.json'
 const commandsPath = './src/locales/en/commands.json'
 const settingsPath = './src/locales/en/settings.json'
 
@@ -21,7 +19,7 @@ const extractMenuCommandLocaleStrings = (): Set<string> => {
   return labels
 }
 
-test('collect-i18n', async ({ comfyPage }) => {
+test('collect-i18n-general', async ({ comfyPage }) => {
   const commands = (
     await comfyPage.page.evaluate(() => {
       const workspace = window['app'].extensionManager
@@ -65,6 +63,7 @@ test('collect-i18n', async ({ comfyPage }) => {
     const settings = workspace.setting.settings as Record<string, SettingParams>
     return Object.values(settings)
       .sort((a, b) => a.id.localeCompare(b.id))
+      .filter((setting) => setting.type !== 'hidden')
       .map((setting) => ({
         id: setting.id,
         name: setting.name,
@@ -127,105 +126,6 @@ test('collect-i18n', async ({ comfyPage }) => {
     ])
   )
 
-  // Node Definitions
-  const nodeDefs: ComfyNodeDefImpl[] = Object.values(
-    await comfyPage.page.evaluate(async () => {
-      const api = window['app'].api as ComfyApi
-      return await api.getNodeDefs()
-    })
-  ).map((def) => new ComfyNodeDefImpl(def))
-
-  console.log(`Collected ${nodeDefs.length} node definitions`)
-
-  const allDataTypesLocale = Object.fromEntries(
-    nodeDefs
-      .flatMap((nodeDef) => {
-        const inputDataTypes = Object.values(nodeDef.inputs.all).map(
-          (inputSpec) => inputSpec.type
-        )
-        const outputDataTypes = nodeDef.outputs.all.map((output) => output.type)
-        const allDataTypes = [...inputDataTypes, ...outputDataTypes].flatMap(
-          (type: string) => type.split(',')
-        )
-        return allDataTypes.map((dataType) => [
-          normalizeI18nKey(dataType),
-          dataType
-        ])
-      })
-      .sort((a, b) => a[0].localeCompare(b[0]))
-  )
-
-  function extractInputs(nodeDef: ComfyNodeDefImpl) {
-    const inputs = Object.fromEntries(
-      nodeDef.inputs.all.flatMap((input) => {
-        const name = input.name
-        const tooltip = input.tooltip
-
-        if (name === undefined && tooltip === undefined) {
-          return []
-        }
-
-        return [
-          [
-            normalizeI18nKey(input.name),
-            {
-              name,
-              tooltip
-            }
-          ]
-        ]
-      })
-    )
-    return Object.keys(inputs).length > 0 ? inputs : undefined
-  }
-
-  function extractOutputs(nodeDef: ComfyNodeDefImpl) {
-    const outputs = Object.fromEntries(
-      nodeDef.outputs.all.flatMap((output, i) => {
-        // Ignore data types if they are already translated in allDataTypesLocale.
-        const name = output.name in allDataTypesLocale ? undefined : output.name
-        const tooltip = output.tooltip
-
-        if (name === undefined && tooltip === undefined) {
-          return []
-        }
-
-        return [
-          [
-            i.toString(),
-            {
-              name,
-              tooltip
-            }
-          ]
-        ]
-      })
-    )
-    return Object.keys(outputs).length > 0 ? outputs : undefined
-  }
-
-  const allNodeDefsLocale = Object.fromEntries(
-    nodeDefs
-      .sort((a, b) => a.name.localeCompare(b.name))
-      .map((nodeDef) => [
-        normalizeI18nKey(nodeDef.name),
-        {
-          display_name: nodeDef.display_name ?? nodeDef.name,
-          description: nodeDef.description || undefined,
-          inputs: extractInputs(nodeDef),
-          outputs: extractOutputs(nodeDef)
-        }
-      ])
-  )
-
-  const allNodeCategoriesLocale = Object.fromEntries(
-    nodeDefs.flatMap((nodeDef) =>
-      nodeDef.category
-        .split('/')
-        .map((category) => [normalizeI18nKey(category), category])
-    )
-  )
-
   fs.writeFileSync(
     localePath,
     JSON.stringify(
@@ -239,16 +139,13 @@ test('collect-i18n', async ({ comfyPage }) => {
           ...allSettingCategoriesLocale
         },
         serverConfigItems: allServerConfigsLocale,
-        serverConfigCategories: allServerConfigCategoriesLocale,
-        dataTypes: allDataTypesLocale,
-        nodeCategories: allNodeCategoriesLocale
+        serverConfigCategories: allServerConfigCategoriesLocale
       },
       null,
       2
     )
   )
 
-  fs.writeFileSync(nodeDefsPath, JSON.stringify(allNodeDefsLocale, null, 2))
   fs.writeFileSync(commandsPath, JSON.stringify(allCommandsLocale, null, 2))
   fs.writeFileSync(settingsPath, JSON.stringify(allSettingsLocale, null, 2))
 })

scripts/collect-i18n-node-defs.ts

@@ -0,0 +1,125 @@
+import * as fs from 'fs'
+
+import { comfyPageFixture as test } from '../browser_tests/fixtures/ComfyPage'
+import type { ComfyApi } from '../src/scripts/api'
+import { ComfyNodeDefImpl } from '../src/stores/nodeDefStore'
+import { normalizeI18nKey } from '../src/utils/formatUtil'
+
+const localePath = './src/locales/en/main.json'
+const nodeDefsPath = './src/locales/en/nodeDefs.json'
+
+test('collect-i18n-node-defs', async ({ comfyPage }) => {
+  const nodeDefs: ComfyNodeDefImpl[] = Object.values(
+    await comfyPage.page.evaluate(async () => {
+      const api = window['app'].api as ComfyApi
+      return await api.getNodeDefs()
+    })
+  ).map((def) => new ComfyNodeDefImpl(def))
+
+  console.log(`Collected ${nodeDefs.length} node definitions`)
+
+  const allDataTypesLocale = Object.fromEntries(
+    nodeDefs
+      .flatMap((nodeDef) => {
+        const inputDataTypes = Object.values(nodeDef.inputs.all).map(
+          (inputSpec) => inputSpec.type
+        )
+        const outputDataTypes = nodeDef.outputs.all.map((output) => output.type)
+        const allDataTypes = [...inputDataTypes, ...outputDataTypes].flatMap(
+          (type: string) => type.split(',')
+        )
+        return allDataTypes.map((dataType) => [
+          normalizeI18nKey(dataType),
+          dataType
+        ])
+      })
+      .sort((a, b) => a[0].localeCompare(b[0]))
+  )
+
+  function extractInputs(nodeDef: ComfyNodeDefImpl) {
+    const inputs = Object.fromEntries(
+      nodeDef.inputs.all.flatMap((input) => {
+        const name = input.name
+        const tooltip = input.tooltip
+
+        if (name === undefined && tooltip === undefined) {
+          return []
+        }
+
+        return [
+          [
+            normalizeI18nKey(input.name),
+            {
+              name,
+              tooltip
+            }
+          ]
+        ]
+      })
+    )
+    return Object.keys(inputs).length > 0 ? inputs : undefined
+  }
+
+  function extractOutputs(nodeDef: ComfyNodeDefImpl) {
+    const outputs = Object.fromEntries(
+      nodeDef.outputs.all.flatMap((output, i) => {
+        // Ignore data types if they are already translated in allDataTypesLocale.
+        const name = output.name in allDataTypesLocale ? undefined : output.name
+        const tooltip = output.tooltip
+
+        if (name === undefined && tooltip === undefined) {
+          return []
+        }
+
+        return [
+          [
+            i.toString(),
+            {
+              name,
+              tooltip
+            }
+          ]
+        ]
+      })
+    )
+    return Object.keys(outputs).length > 0 ? outputs : undefined
+  }
+
+  const allNodeDefsLocale = Object.fromEntries(
+    nodeDefs
+      .sort((a, b) => a.name.localeCompare(b.name))
+      .map((nodeDef) => [
+        normalizeI18nKey(nodeDef.name),
+        {
+          display_name: nodeDef.display_name ?? nodeDef.name,
+          description: nodeDef.description || undefined,
+          inputs: extractInputs(nodeDef),
+          outputs: extractOutputs(nodeDef)
+        }
+      ])
+  )
+
+  const allNodeCategoriesLocale = Object.fromEntries(
+    nodeDefs.flatMap((nodeDef) =>
+      nodeDef.category
+        .split('/')
+        .map((category) => [normalizeI18nKey(category), category])
+    )
+  )
+
+  const locale = JSON.parse(fs.readFileSync(localePath, 'utf-8'))
+  fs.writeFileSync(
+    localePath,
+    JSON.stringify(
+      {
+        ...locale,
+        dataTypes: allDataTypesLocale,
+        nodeCategories: allNodeCategoriesLocale
+      },
+      null,
+      2
+    )
+  )
+
+  fs.writeFileSync(nodeDefsPath, JSON.stringify(allNodeDefsLocale, null, 2))
+})

scripts/deploy.js

@@ -1,8 +1,10 @@
-import { copy } from 'fs-extra'
 import { config } from 'dotenv'
+import { copy } from 'fs-extra'
+
 config()
 
 const sourceDir = './dist'
+// eslint-disable-next-line no-undef
 const targetDir = process.env.DEPLOY_COMFYUI_DIR
 
 copy(sourceDir, targetDir)

scripts/diff-i18n.ts

@@ -1,12 +1,12 @@
 import {
-  readFileSync,
-  writeFileSync,
-  readdirSync,
-  mkdirSync,
   existsSync,
-  rmSync
+  mkdirSync,
+  readFileSync,
+  readdirSync,
+  rmSync,
+  writeFileSync
 } from 'fs'
-import { join, dirname } from 'path'
+import { dirname, join } from 'path'
 
 // Ensure directories exist
 function ensureDir(dir: string) {

scripts/generate-json-schema.ts

@@ -0,0 +1,35 @@
+import fs from 'fs'
+import path from 'path'
+import { zodToJsonSchema } from 'zod-to-json-schema'
+
+import { zComfyWorkflow, zComfyWorkflow1 } from '../src/types/comfyWorkflow'
+
+// Convert both workflow schemas to JSON Schema
+const workflow04Schema = zodToJsonSchema(zComfyWorkflow, {
+  name: 'ComfyWorkflow0_4',
+  $refStrategy: 'none'
+})
+
+const workflow1Schema = zodToJsonSchema(zComfyWorkflow1, {
+  name: 'ComfyWorkflow1_0',
+  $refStrategy: 'none'
+})
+
+// Create output directory if it doesn't exist
+const outputDir = './schemas'
+if (!fs.existsSync(outputDir)) {
+  fs.mkdirSync(outputDir, { recursive: true })
+}
+
+// Write schemas to files
+fs.writeFileSync(
+  path.join(outputDir, 'workflow-0_4.json'),
+  JSON.stringify(workflow04Schema, null, 2)
+)
+
+fs.writeFileSync(
+  path.join(outputDir, 'workflow-1_0.json'),
+  JSON.stringify(workflow1Schema, null, 2)
+)
+
+console.log('JSON Schemas generated successfully!')

scripts/main_repo_release.py

@@ -1,71 +0,0 @@
-import os
-import sys
-import requests
-import zipfile
-import shutil
-import git
-import tempfile
-
-
-def download_and_extract(version, temp_dir):
-    url = f"https://github.com/Comfy-Org/ComfyUI_frontend/releases/download/v{version}/dist.zip"
-    response = requests.get(url)
-
-    if response.status_code == 200:
-        zip_path = os.path.join(temp_dir, "dist.zip")
-        with open(zip_path, "wb") as file:
-            file.write(response.content)
-
-        with zipfile.ZipFile(zip_path, "r") as zip_ref:
-            zip_ref.extractall(temp_dir)
-
-        # Clean up the zip file after extraction
-        os.remove(zip_path)
-    else:
-        raise Exception(
-            f"Failed to download release asset. Status code: {response.status_code}"
-        )
-
-
-def update_repo(repo_path, version, temp_dir):
-    repo = git.Repo(repo_path)
-
-    # Stash any changes
-    repo.git.stash()
-
-    # Create and checkout new branch
-    new_branch = f"release-{version}"
-    repo.git.checkout("-b", new_branch, "-t", "origin/master")
-
-    # Remove all files under web/ directory
-    web_dir = os.path.join(repo_path, "web")
-    if os.path.exists(web_dir):
-        shutil.rmtree(web_dir)
-
-    # Move content from temp_dir to web/
-    shutil.move(temp_dir, web_dir)
-
-    # Add changes and commit
-    repo.git.add(all=True)
-    commit_message = f"Update web content to release v{version}"
-    repo.git.commit("-m", commit_message)
-
-
-def main(repo_path: str, version: str):
-    with tempfile.TemporaryDirectory() as temp_dir:
-        try:
-            download_and_extract(version, temp_dir)
-            update_repo(repo_path, version, temp_dir)
-            print(f"Successfully updated repo to release v{version}")
-        except Exception as e:
-            print(f"An error occurred: {str(e)}")
-
-
-if __name__ == "__main__":
-    if len(sys.argv) != 3:
-        print("Usage: python script.py <repo_path> <version>")
-        sys.exit(1)
-
-    repo_path = sys.argv[1]
-    version = sys.argv[2]
-    main(repo_path, version)

scripts/update-electron-types.js

@@ -0,0 +1,43 @@
+import { execSync } from 'child_process'
+import { readFileSync } from 'fs'
+
+const packageName = '@comfyorg/comfyui-electron-types'
+const description = 'desktop API types'
+
+try {
+  // Create a new branch
+  console.log('Creating new branch...')
+  const date = new Date()
+  const isoDate = date.toISOString().split('T')[0]
+  const timestamp = date.getTime()
+  const branchName = `update-electron-types-${isoDate}-${timestamp}`
+  execSync(`git checkout -b ${branchName} -t origin/main`, { stdio: 'inherit' })
+
+  // Update npm package to latest version
+  console.log(`Updating ${description}...`)
+  execSync(`npm install ${packageName}@latest`, {
+    stdio: 'inherit'
+  })
+
+  // Get the new version from package.json
+  const packageLock = JSON.parse(readFileSync('./package-lock.json', 'utf8'))
+  const newVersion = packageLock.packages[`node_modules/${packageName}`].version
+
+  // Stage changes
+  const message = `[chore] Update electron-types to ${newVersion}`
+  execSync('git add package.json package-lock.json', { stdio: 'inherit' })
+  execSync(`git commit -m "${message}"`, { stdio: 'inherit' })
+
+  // Create the PR
+  console.log('Creating PR...')
+  execSync(
+    `gh pr create --title "${message}" --label "dependencies" --body "Automated update of ${description} to version ${newVersion}."`,
+    { stdio: 'inherit' }
+  )
+
+  console.log(
+    `✅ Successfully created PR for ${description} update to ${newVersion}`
+  )
+} catch (error) {
+  console.error('❌ Error during update process:', error.message)
+}

src/App.vue

@@ -9,14 +9,16 @@
 </template>
 
 <script setup lang="ts">
-import config from '@/config'
-import { computed, onMounted } from 'vue'
-import { useWorkspaceStore } from '@/stores/workspaceStore'
+import { useEventListener } from '@vueuse/core'
 import BlockUI from 'primevue/blockui'
 import ProgressSpinner from 'primevue/progressspinner'
+import { computed, onMounted } from 'vue'
+
 import GlobalDialog from '@/components/dialog/GlobalDialog.vue'
-import { useEventListener } from '@vueuse/core'
-import { isElectron, showNativeMenu } from './utils/envUtil'
+import config from '@/config'
+import { useWorkspaceStore } from '@/stores/workspaceStore'
+
+import { electronAPI, isElectron } from './utils/envUtil'
 
 const workspaceStore = useWorkspaceStore()
 const isLoading = computed<boolean>(() => workspaceStore.spinner)
@@ -32,7 +34,7 @@ const showContextMenu = (event: PointerEvent) => {
     case target instanceof HTMLTextAreaElement:
     case target instanceof HTMLInputElement && target.type === 'text':
       // TODO: Context input menu explicitly for text input
-      showNativeMenu({ type: 'text' })
+      electronAPI()?.showContextMenu({ type: 'text' })
       return
   }
 }

src/assets/css/style.css

@@ -10,6 +10,7 @@
   --bg-color: #fff;
   --comfy-menu-bg: #353535;
   --comfy-menu-secondary-bg: #292929;
+  --comfy-topbar-height: 2.5rem;
   --comfy-input-bg: #222;
   --input-text: #ddd;
   --descrip-text: #999;
@@ -148,6 +149,69 @@ body {
   font-size: var(--comfy-textarea-font-size);
 }
 
+.comfy-markdown {
+  /* We assign the textarea and the Tiptap editor to the same CSS grid area to stack them on top of one another. */
+  display: grid;
+}
+
+.comfy-markdown > textarea {
+  grid-area: 1 / 1 / 2 / 2;
+}
+
+.comfy-markdown .tiptap {
+  grid-area: 1 / 1 / 2 / 2;
+  background-color: var(--comfy-input-bg);
+  color: var(--input-text);
+  overflow: hidden;
+  overflow-y: auto;
+  resize: none;
+  border: none;
+  box-sizing: border-box;
+  font-size: var(--comfy-textarea-font-size);
+  height: 100%;
+  padding: 0.5em;
+}
+
+.comfy-markdown.editing .tiptap {
+  display: none;
+}
+
+.comfy-markdown .tiptap :first-child {
+  margin-top: 0;
+}
+
+.comfy-markdown .tiptap :last-child {
+  margin-bottom: 0;
+}
+
+.comfy-markdown .tiptap blockquote {
+  border-left: medium solid;
+  margin-left: 1em;
+  padding-left: 0.5em;
+}
+
+.comfy-markdown .tiptap pre {
+  border: thin dotted;
+  border-radius: 0.5em;
+  margin: 0.5em;
+  padding: 0.5em;
+}
+
+.comfy-markdown .tiptap table {
+  border-collapse: collapse;
+}
+
+.comfy-markdown .tiptap th {
+  text-align: left;
+  background: var(--comfy-menu-bg);
+}
+
+.comfy-markdown .tiptap th,
+.comfy-markdown .tiptap td {
+  padding: 0.5em;
+  border: thin solid;
+}
+
 .comfy-modal {
   display: none; /* Hidden by default */
   position: fixed; /* Stay in place */
@@ -586,16 +650,12 @@ dialog::backdrop {
 .litegraph.litecontextmenu.dark {
   z-index: 9999 !important;
   background-color: var(--comfy-menu-bg) !important;
-  filter: brightness(95%);
-  will-change: transform;
 }
 
 .litegraph.litecontextmenu
   .litemenu-entry:hover:not(.disabled):not(.separator) {
-  background-color: var(--comfy-menu-bg) !important;
-  filter: brightness(155%);
-  will-change: transform;
-  color: var(--input-text);
+  background-color: var(--comfy-menu-hover-bg, var(--border-color)) !important;
+  color: var(--fg-color);
 }
 
 .litegraph.litecontextmenu .litemenu-entry.submenu,
@@ -704,3 +764,17 @@ audio.comfy-audio.empty-audio-widget {
 .p-tree-node-content {
   padding: var(--comfy-tree-explorer-item-padding) !important;
 }
+
+/* [Desktop] Electron window specific styles */
+.app-drag {
+  app-region: drag;
+}
+
+.no-drag {
+  app-region: no-drag;
+}
+
+.window-actions-spacer {
+  width: calc(100vw - env(titlebar-area-width, 100vw));
+}
+/* End of [Desktop] Electron window specific styles */

src/assets/palettes/arc.json

@@ -0,0 +1,77 @@
+{
+  "id": "arc",
+  "name": "Arc",
+  "colors": {
+    "node_slot": {
+      "BOOLEAN": "",
+      "CLIP": "#eacb8b",
+      "CLIP_VISION": "#A8DADC",
+      "CLIP_VISION_OUTPUT": "#ad7452",
+      "CONDITIONING": "#cf876f",
+      "CONTROL_NET": "#00d78d",
+      "CONTROL_NET_WEIGHTS": "",
+      "FLOAT": "",
+      "GLIGEN": "",
+      "IMAGE": "#80a1c0",
+      "IMAGEUPLOAD": "",
+      "INT": "",
+      "LATENT": "#b38ead",
+      "LATENT_KEYFRAME": "",
+      "MASK": "#a3bd8d",
+      "MODEL": "#8978a7",
+      "SAMPLER": "",
+      "SIGMAS": "",
+      "STRING": "",
+      "STYLE_MODEL": "#C2FFAE",
+      "T2I_ADAPTER_WEIGHTS": "",
+      "TAESD": "#DCC274",
+      "TIMESTEP_KEYFRAME": "",
+      "UPSCALE_MODEL": "",
+      "VAE": "#be616b"
+    },
+    "litegraph_base": {
+      "BACKGROUND_IMAGE": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAACXBIWXMAAAsTAAALEwEAmpwYAAABcklEQVR4nO3YMUoDARgF4RfxBqZI6/0vZqFn0MYtrLIQMFN8U6V4LAtD+Jm9XG/v30OGl2e/AP7yevz4+vx45nvgF/+QGITEICQGITEIiUFIjNNC3q43u3/YnRJyPOzeQ+0e220nhRzReC8e7R7bbdvl+Jal1Bs46jEIiUFIDEJiEBKDkBhKPbZT6qHdptRTu02p53DUYxASg5AYhMQgJAYhMZR6bKfUQ7tNqad2m1LP4ajHICQGITEIiUFIDEJiKPXYTqmHdptST+02pZ7DUY9BSAxCYhASg5AYhMRQ6rGdUg/tNqWe2m1KPYejHoOQGITEICQGITEIiaHUYzulHtptSj2125R6Dkc9BiExCIlBSAxCYhASQ6nHdko9tNuUemq3KfUcjnoMQmIQEoOQGITEICSGUo/tlHpotyn11G5T6jkc9RiExCAkBiExCIlBSAylHtsp9dBuU+qp3abUczjqMQiJQUgMQmIQEoOQGITE+AHFISNQrFTGuwAAAABJRU5ErkJggg==",
+      "CLEAR_BACKGROUND_COLOR": "#2b2f38",
+      "NODE_TITLE_COLOR": "#b2b7bd",
+      "NODE_SELECTED_TITLE_COLOR": "#FFF",
+      "NODE_TEXT_SIZE": 14,
+      "NODE_TEXT_COLOR": "#AAA",
+      "NODE_SUBTEXT_SIZE": 12,
+      "NODE_DEFAULT_COLOR": "#2b2f38",
+      "NODE_DEFAULT_BGCOLOR": "#242730",
+      "NODE_DEFAULT_BOXCOLOR": "#6e7581",
+      "NODE_DEFAULT_SHAPE": 2,
+      "NODE_BOX_OUTLINE_COLOR": "#FFF",
+      "NODE_BYPASS_BGCOLOR": "#FF00FF",
+      "NODE_ERROR_COLOUR": "#E00",
+      "DEFAULT_SHADOW_COLOR": "rgba(0,0,0,0.5)",
+      "DEFAULT_GROUP_FONT": 22,
+      "WIDGET_BGCOLOR": "#2b2f38",
+      "WIDGET_OUTLINE_COLOR": "#6e7581",
+      "WIDGET_TEXT_COLOR": "#DDD",
+      "WIDGET_SECONDARY_TEXT_COLOR": "#b2b7bd",
+      "LINK_COLOR": "#9A9",
+      "EVENT_LINK_COLOR": "#A86",
+      "CONNECTING_LINK_COLOR": "#AFA"
+    },
+    "comfy_base": {
+      "fg-color": "#fff",
+      "bg-color": "#2b2f38",
+      "comfy-menu-bg": "#242730",
+      "comfy-menu-secondary-bg": "#22252E",
+      "comfy-input-bg": "#2b2f38",
+      "input-text": "#ddd",
+      "descrip-text": "#b2b7bd",
+      "drag-text": "#ccc",
+      "error-text": "#ff4444",
+      "border-color": "#6e7581",
+      "tr-even-bg-color": "#2b2f38",
+      "tr-odd-bg-color": "#242730",
+      "content-bg": "#6e7581",
+      "content-fg": "#fff",
+      "content-hover-bg": "#2b2f38",
+      "content-hover-fg": "#fff",
+      "bar-shadow": "rgba(8, 8, 8, 0.75) 0 0 0.5rem"
+    }
+  }
+}

src/assets/palettes/dark.json

@@ -0,0 +1,71 @@
+{
+  "id": "dark",
+  "name": "Dark (Default)",
+  "colors": {
+    "node_slot": {
+      "CLIP": "#FFD500",
+      "CLIP_VISION": "#A8DADC",
+      "CLIP_VISION_OUTPUT": "#ad7452",
+      "CONDITIONING": "#FFA931",
+      "CONTROL_NET": "#6EE7B7",
+      "IMAGE": "#64B5F6",
+      "LATENT": "#FF9CF9",
+      "MASK": "#81C784",
+      "MODEL": "#B39DDB",
+      "STYLE_MODEL": "#C2FFAE",
+      "VAE": "#FF6E6E",
+      "NOISE": "#B0B0B0",
+      "GUIDER": "#66FFFF",
+      "SAMPLER": "#ECB4B4",
+      "SIGMAS": "#CDFFCD",
+      "TAESD": "#DCC274"
+    },
+    "litegraph_base": {
+      "BACKGROUND_IMAGE": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAIAAAD/gAIDAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAQBJREFUeNrs1rEKwjAUhlETUkj3vP9rdmr1Ysammk2w5wdxuLgcMHyptfawuZX4pJSWZTnfnu/lnIe/jNNxHHGNn//HNbbv+4dr6V+11uF527arU7+u63qfa/bnmh8sWLBgwYJlqRf8MEptXPBXJXa37BSl3ixYsGDBMliwFLyCV/DeLIMFCxYsWLBMwSt4Be/NggXLYMGCBUvBK3iNruC9WbBgwYJlsGApeAWv4L1ZBgsWLFiwYJmCV/AK3psFC5bBggULloJX8BpdwXuzYMGCBctgwVLwCl7Be7MMFixYsGDBsu8FH1FaSmExVfAxBa/gvVmwYMGCZbBg/W4vAQYA5tRF9QYlv/QAAAAASUVORK5CYII=",
+      "CLEAR_BACKGROUND_COLOR": "#222",
+      "NODE_TITLE_COLOR": "#999",
+      "NODE_SELECTED_TITLE_COLOR": "#FFF",
+      "NODE_TEXT_SIZE": 14,
+      "NODE_TEXT_COLOR": "#AAA",
+      "NODE_TEXT_HIGHLIGHT_COLOR": "#FFF",
+      "NODE_SUBTEXT_SIZE": 12,
+      "NODE_DEFAULT_COLOR": "#333",
+      "NODE_DEFAULT_BGCOLOR": "#353535",
+      "NODE_DEFAULT_BOXCOLOR": "#666",
+      "NODE_DEFAULT_SHAPE": 2,
+      "NODE_BOX_OUTLINE_COLOR": "#FFF",
+      "NODE_BYPASS_BGCOLOR": "#FF00FF",
+      "NODE_ERROR_COLOUR": "#E00",
+      "DEFAULT_SHADOW_COLOR": "rgba(0,0,0,0.5)",
+      "DEFAULT_GROUP_FONT": 24,
+      "WIDGET_BGCOLOR": "#222",
+      "WIDGET_OUTLINE_COLOR": "#666",
+      "WIDGET_TEXT_COLOR": "#DDD",
+      "WIDGET_SECONDARY_TEXT_COLOR": "#999",
+      "LINK_COLOR": "#9A9",
+      "EVENT_LINK_COLOR": "#A86",
+      "CONNECTING_LINK_COLOR": "#AFA",
+      "BADGE_FG_COLOR": "#FFF",
+      "BADGE_BG_COLOR": "#0F1F0F"
+    },
+    "comfy_base": {
+      "fg-color": "#fff",
+      "bg-color": "#202020",
+      "comfy-menu-bg": "#353535",
+      "comfy-menu-secondary-bg": "#303030",
+      "comfy-input-bg": "#222",
+      "input-text": "#ddd",
+      "descrip-text": "#999",
+      "drag-text": "#ccc",
+      "error-text": "#ff4444",
+      "border-color": "#4e4e4e",
+      "tr-even-bg-color": "#222",
+      "tr-odd-bg-color": "#353535",
+      "content-bg": "#4e4e4e",
+      "content-fg": "#fff",
+      "content-hover-bg": "#222",
+      "content-hover-fg": "#fff",
+      "bar-shadow": "rgba(16, 16, 16, 0.5) 0 0 0.5rem"
+    }
+  }
+}

src/assets/palettes/github.json

@@ -0,0 +1,77 @@
+{
+  "id": "github",
+  "name": "Github",
+  "colors": {
+    "node_slot": {
+      "BOOLEAN": "",
+      "CLIP": "#eacb8b",
+      "CLIP_VISION": "#A8DADC",
+      "CLIP_VISION_OUTPUT": "#ad7452",
+      "CONDITIONING": "#cf876f",
+      "CONTROL_NET": "#00d78d",
+      "CONTROL_NET_WEIGHTS": "",
+      "FLOAT": "",
+      "GLIGEN": "",
+      "IMAGE": "#80a1c0",
+      "IMAGEUPLOAD": "",
+      "INT": "",
+      "LATENT": "#b38ead",
+      "LATENT_KEYFRAME": "",
+      "MASK": "#a3bd8d",
+      "MODEL": "#8978a7",
+      "SAMPLER": "",
+      "SIGMAS": "",
+      "STRING": "",
+      "STYLE_MODEL": "#C2FFAE",
+      "T2I_ADAPTER_WEIGHTS": "",
+      "TAESD": "#DCC274",
+      "TIMESTEP_KEYFRAME": "",
+      "UPSCALE_MODEL": "",
+      "VAE": "#be616b"
+    },
+    "litegraph_base": {
+      "BACKGROUND_IMAGE": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAIAAAD/gAIDAAAACXBIWXMAAAsTAAALEwEAmpwYAAAGlmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgOS4xLWMwMDEgNzkuMTQ2Mjg5OSwgMjAyMy8wNi8yNS0yMDowMTo1NSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDI1LjEgKFdpbmRvd3MpIiB4bXA6Q3JlYXRlRGF0ZT0iMjAyMy0xMS0xM1QwMDoxODowMiswMTowMCIgeG1wOk1vZGlmeURhdGU9IjIwMjMtMTEtMTVUMDI6MDQ6NTkrMDE6MDAiIHhtcDpNZXRhZGF0YURhdGU9IjIwMjMtMTEtMTVUMDI6MDQ6NTkrMDE6MDAiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOmIyYzRhNjA5LWJmYTctYTg0MC1iOGFlLTk3MzE2ZjM1ZGIyNyIgeG1wTU06RG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOjk0ZmNlZGU4LTE1MTctZmQ0MC04ZGU3LWYzOTgxM2E3ODk5ZiIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjIzMWIxMGIwLWI0ZmItMDI0ZS1iMTJlLTMwNTMwM2NkMDdjOCI+IDx4bXBNTTpIaXN0b3J5PiA8cmRmOlNlcT4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImNyZWF0ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6MjMxYjEwYjAtYjRmYi0wMjRlLWIxMmUtMzA1MzAzY2QwN2M4IiBzdEV2dDp3aGVuPSIyMDIzLTExLTEzVDAwOjE4OjAyKzAxOjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgMjUuMSAoV2luZG93cykiLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjQ4OWY1NzlmLTJkNjUtZWQ0Zi04OTg0LTA4NGE2MGE1ZTMzNSIgc3RFdnQ6d2hlbj0iMjAyMy0xMS0xNVQwMjowNDo1OSswMTowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIDI1LjEgKFdpbmRvd3MpIiBzdEV2dDpjaGFuZ2VkPSIvIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDpiMmM0YTYwOS1iZmE3LWE4NDAtYjhhZS05NzMxNmYzNWRiMjciIHN0RXZ0OndoZW49IjIwMjMtMTEtMTVUMDI6MDQ6NTkrMDE6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCAyNS4xIChXaW5kb3dzKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4OTe6GAAAAx0lEQVR42u3WMQoAIQxFwRzJys77X8vSLiRgITif7bYbgrwYc/mKXyBoY4VVBgsWLFiwYFmOlTv+9jfDOjHmr8u6eVkGCxYsWLBgmc5S8ApewXvgYRksWLBgKXidpeBdloL3wMOCBctgwVLwCl7BuyyDBQsWLFiwTGcpeAWv4D3wsAwWLFiwFLzOUvAuS8F74GHBgmWwYCl4Ba/gXZbBggULFixYprMUvIJX8B54WAYLFixYCl5nKXiXpeA98LBgwTJYsGC9tg1o8f4TTtqzNQAAAABJRU5ErkJggg==",
+      "CLEAR_BACKGROUND_COLOR": "#040506",
+      "NODE_TITLE_COLOR": "#999",
+      "NODE_SELECTED_TITLE_COLOR": "#e5eaf0",
+      "NODE_TEXT_SIZE": 14,
+      "NODE_TEXT_COLOR": "#bcc2c8",
+      "NODE_SUBTEXT_SIZE": 12,
+      "NODE_DEFAULT_COLOR": "#161b22",
+      "NODE_DEFAULT_BGCOLOR": "#13171d",
+      "NODE_DEFAULT_BOXCOLOR": "#30363d",
+      "NODE_DEFAULT_SHAPE": 2,
+      "NODE_BOX_OUTLINE_COLOR": "#e5eaf0",
+      "NODE_BYPASS_BGCOLOR": "#FF00FF",
+      "NODE_ERROR_COLOUR": "#E00",
+      "DEFAULT_SHADOW_COLOR": "rgba(0,0,0,0.5)",
+      "DEFAULT_GROUP_FONT": 24,
+      "WIDGET_BGCOLOR": "#161b22",
+      "WIDGET_OUTLINE_COLOR": "#30363d",
+      "WIDGET_TEXT_COLOR": "#bcc2c8",
+      "WIDGET_SECONDARY_TEXT_COLOR": "#999",
+      "LINK_COLOR": "#9A9",
+      "EVENT_LINK_COLOR": "#A86",
+      "CONNECTING_LINK_COLOR": "#AFA"
+    },
+    "comfy_base": {
+      "fg-color": "#e5eaf0",
+      "bg-color": "#161b22",
+      "comfy-menu-bg": "#13171d",
+      "comfy-menu-secondary-bg": "#11141A",
+      "comfy-input-bg": "#161b22",
+      "input-text": "#bcc2c8",
+      "descrip-text": "#999",
+      "drag-text": "#ccc",
+      "error-text": "#ff4444",
+      "border-color": "#30363d",
+      "tr-even-bg-color": "#161b22",
+      "tr-odd-bg-color": "#13171d",
+      "content-bg": "#30363d",
+      "content-fg": "#e5eaf0",
+      "content-hover-bg": "#161b22",
+      "content-hover-fg": "#e5eaf0",
+      "bar-shadow": "rgba(0, 0, 0, 1) 0 0 0.5rem"
+    }
+  }
+}

src/assets/palettes/light.json

@@ -0,0 +1,73 @@
+{
+  "id": "light",
+  "name": "Light",
+  "light_theme": true,
+  "colors": {
+    "node_slot": {
+      "CLIP": "#FFA726",
+      "CLIP_VISION": "#5C6BC0",
+      "CLIP_VISION_OUTPUT": "#8D6E63",
+      "CONDITIONING": "#EF5350",
+      "CONTROL_NET": "#66BB6A",
+      "IMAGE": "#42A5F5",
+      "LATENT": "#AB47BC",
+      "MASK": "#9CCC65",
+      "MODEL": "#7E57C2",
+      "STYLE_MODEL": "#D4E157",
+      "VAE": "#FF7043",
+      "NOISE": "#B0B0B0",
+      "GUIDER": "#66FFFF",
+      "SAMPLER": "#ECB4B4",
+      "SIGMAS": "#CDFFCD",
+      "TAESD": "#DCC274"
+    },
+    "litegraph_base": {
+      "BACKGROUND_IMAGE": "data:image/gif;base64,R0lGODlhZABkALMAAAAAAP///+vr6+rq6ujo6Ofn5+bm5uXl5d3d3f///wAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAAkALAAAAABkAGQAAAT/UMhJq7046827HkcoHkYxjgZhnGG6si5LqnIM0/fL4qwwIMAg0CAsEovBIxKhRDaNy2GUOX0KfVFrssrNdpdaqTeKBX+dZ+jYvEaTf+y4W66mC8PUdrE879f9d2mBeoNLfH+IhYBbhIx2jkiHiomQlGKPl4uZe3CaeZifnnijgkESBqipqqusra6vsLGys62SlZO4t7qbuby7CLa+wqGWxL3Gv3jByMOkjc2lw8vOoNSi0czAncXW3Njdx9Pf48/Z4Kbbx+fQ5evZ4u3k1fKR6cn03vHlp7T9/v8A/8Gbp4+gwXoFryXMB2qgwoMMHyKEqA5fxX322FG8tzBcRnMW/zlulPbRncmQGidKjMjyYsOSKEF2FBlJQMCbOHP6c9iSZs+UnGYCdbnSo1CZI5F64kn0p1KnTH02nSoV3dGTV7FFHVqVq1dtWcMmVQZTbNGu72zqXMuW7danVL+6e4t1bEy6MeueBYLXrNO5Ze36jQtWsOG97wIj1vt3St/DjTEORss4nNq2mDP3e7w4r1bFkSET5hy6s2TRlD2/mSxXtSHQhCunXo26NevCpmvD/UU6tuullzULH76q92zdZG/Ltv1a+W+osI/nRmyc+fRi1Xdbh+68+0vv10dH3+77KD/i6IdnX669/frn5Zsjh4/2PXju8+8bzc9/6fj27LFnX11/+IUnXWl7BJfegm79FyB9JOl3oHgSklefgxAC+FmFGpqHIYcCfkhgfCohSKKJVo044YUMttggiBkmp6KFXw1oII24oYhjiDByaKOOHcp3Y5BD/njikSkO+eBREQAAOw==",
+      "CLEAR_BACKGROUND_COLOR": "lightgray",
+      "NODE_TITLE_COLOR": "#222",
+      "NODE_SELECTED_TITLE_COLOR": "#000",
+      "NODE_TEXT_SIZE": 14,
+      "NODE_TEXT_COLOR": "#444",
+      "NODE_TEXT_HIGHLIGHT_COLOR": "#1e293b",
+      "NODE_SUBTEXT_SIZE": 12,
+      "NODE_DEFAULT_COLOR": "#F7F7F7",
+      "NODE_DEFAULT_BGCOLOR": "#F5F5F5",
+      "NODE_DEFAULT_BOXCOLOR": "#CCC",
+      "NODE_DEFAULT_SHAPE": 2,
+      "NODE_BOX_OUTLINE_COLOR": "#000",
+      "NODE_BYPASS_BGCOLOR": "#FF00FF",
+      "NODE_ERROR_COLOUR": "#E00",
+      "DEFAULT_SHADOW_COLOR": "rgba(0,0,0,0.1)",
+      "DEFAULT_GROUP_FONT": 24,
+      "WIDGET_BGCOLOR": "#D4D4D4",
+      "WIDGET_OUTLINE_COLOR": "#999",
+      "WIDGET_TEXT_COLOR": "#222",
+      "WIDGET_SECONDARY_TEXT_COLOR": "#555",
+      "LINK_COLOR": "#4CAF50",
+      "EVENT_LINK_COLOR": "#FF9800",
+      "CONNECTING_LINK_COLOR": "#2196F3",
+      "BADGE_FG_COLOR": "#000",
+      "BADGE_BG_COLOR": "#FFF"
+    },
+    "comfy_base": {
+      "fg-color": "#222",
+      "bg-color": "#DDD",
+      "comfy-menu-bg": "#F5F5F5",
+      "comfy-menu-hover-bg": "#ccc",
+      "comfy-menu-secondary-bg": "#EEE",
+      "comfy-input-bg": "#C9C9C9",
+      "input-text": "#222",
+      "descrip-text": "#444",
+      "drag-text": "#555",
+      "error-text": "#F44336",
+      "border-color": "#888",
+      "tr-even-bg-color": "#f9f9f9",
+      "tr-odd-bg-color": "#fff",
+      "content-bg": "#e0e0e0",
+      "content-fg": "#222",
+      "content-hover-bg": "#adadad",
+      "content-hover-fg": "#222",
+      "bar-shadow": "rgba(16, 16, 16, 0.25) 0 0 0.5rem"
+    }
+  }
+}

src/assets/palettes/nord.json

@@ -0,0 +1,77 @@
+{
+  "id": "nord",
+  "name": "Nord",
+  "colors": {
+    "node_slot": {
+      "BOOLEAN": "",
+      "CLIP": "#eacb8b",
+      "CLIP_VISION": "#A8DADC",
+      "CLIP_VISION_OUTPUT": "#ad7452",
+      "CONDITIONING": "#cf876f",
+      "CONTROL_NET": "#00d78d",
+      "CONTROL_NET_WEIGHTS": "",
+      "FLOAT": "",
+      "GLIGEN": "",
+      "IMAGE": "#80a1c0",
+      "IMAGEUPLOAD": "",
+      "INT": "",
+      "LATENT": "#b38ead",
+      "LATENT_KEYFRAME": "",
+      "MASK": "#a3bd8d",
+      "MODEL": "#8978a7",
+      "SAMPLER": "",
+      "SIGMAS": "",
+      "STRING": "",
+      "STYLE_MODEL": "#C2FFAE",
+      "T2I_ADAPTER_WEIGHTS": "",
+      "TAESD": "#DCC274",
+      "TIMESTEP_KEYFRAME": "",
+      "UPSCALE_MODEL": "",
+      "VAE": "#be616b"
+    },
+    "litegraph_base": {
+      "BACKGROUND_IMAGE": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAIAAAD/gAIDAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFu2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgOS4xLWMwMDEgNzkuMTQ2Mjg5OSwgMjAyMy8wNi8yNS0yMDowMTo1NSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDI1LjEgKFdpbmRvd3MpIiB4bXA6Q3JlYXRlRGF0ZT0iMjAyMy0xMS0xM1QwMDoxODowMiswMTowMCIgeG1wOk1vZGlmeURhdGU9IjIwMjMtMTEtMTVUMDE6MjA6NDUrMDE6MDAiIHhtcDpNZXRhZGF0YURhdGU9IjIwMjMtMTEtMTVUMDE6MjA6NDUrMDE6MDAiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjUwNDFhMmZjLTEzNzQtMTk0ZC1hZWY4LTYxMzM1MTVmNjUwMCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoyMzFiMTBiMC1iNGZiLTAyNGUtYjEyZS0zMDUzMDNjZDA3YzgiIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDoyMzFiMTBiMC1iNGZiLTAyNGUtYjEyZS0zMDUzMDNjZDA3YzgiPiA8eG1wTU06SGlzdG9yeT4gPHJkZjpTZXE+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJjcmVhdGVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjIzMWIxMGIwLWI0ZmItMDI0ZS1iMTJlLTMwNTMwM2NkMDdjOCIgc3RFdnQ6d2hlbj0iMjAyMy0xMS0xM1QwMDoxODowMiswMTowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIDI1LjEgKFdpbmRvd3MpIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDo1MDQxYTJmYy0xMzc0LTE5NGQtYWVmOC02MTMzNTE1ZjY1MDAiIHN0RXZ0OndoZW49IjIwMjMtMTEtMTVUMDE6MjA6NDUrMDE6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCAyNS4xIChXaW5kb3dzKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz73jWg/AAAAyUlEQVR42u3WKwoAIBRFQRdiMb1idv9Lsxn9gEFw4Dbb8JCTojbbXEJwjJVL2HKwYMGCBQuWLbDmjr+9zrBGjHl1WVcvy2DBggULFizTWQpewSt4HzwsgwULFiwFr7MUvMtS8D54WLBgGSxYCl7BK3iXZbBgwYIFC5bpLAWv4BW8Dx6WwYIFC5aC11kK3mUpeB88LFiwDBYsBa/gFbzLMliwYMGCBct0loJX8AreBw/LYMGCBUvB6ywF77IUvA8eFixYBgsWrNfWAZPltufdad+1AAAAAElFTkSuQmCC",
+      "CLEAR_BACKGROUND_COLOR": "#212732",
+      "NODE_TITLE_COLOR": "#999",
+      "NODE_SELECTED_TITLE_COLOR": "#e5eaf0",
+      "NODE_TEXT_SIZE": 14,
+      "NODE_TEXT_COLOR": "#bcc2c8",
+      "NODE_SUBTEXT_SIZE": 12,
+      "NODE_DEFAULT_COLOR": "#2e3440",
+      "NODE_DEFAULT_BGCOLOR": "#161b22",
+      "NODE_DEFAULT_BOXCOLOR": "#545d70",
+      "NODE_DEFAULT_SHAPE": 2,
+      "NODE_BOX_OUTLINE_COLOR": "#e5eaf0",
+      "NODE_BYPASS_BGCOLOR": "#FF00FF",
+      "NODE_ERROR_COLOUR": "#E00",
+      "DEFAULT_SHADOW_COLOR": "rgba(0,0,0,0.5)",
+      "DEFAULT_GROUP_FONT": 24,
+      "WIDGET_BGCOLOR": "#2e3440",
+      "WIDGET_OUTLINE_COLOR": "#545d70",
+      "WIDGET_TEXT_COLOR": "#bcc2c8",
+      "WIDGET_SECONDARY_TEXT_COLOR": "#999",
+      "LINK_COLOR": "#9A9",
+      "EVENT_LINK_COLOR": "#A86",
+      "CONNECTING_LINK_COLOR": "#AFA"
+    },
+    "comfy_base": {
+      "fg-color": "#e5eaf0",
+      "bg-color": "#2e3440",
+      "comfy-menu-bg": "#161b22",
+      "comfy-menu-secondary-bg": "#14181F",
+      "comfy-input-bg": "#2e3440",
+      "input-text": "#bcc2c8",
+      "descrip-text": "#999",
+      "drag-text": "#ccc",
+      "error-text": "#ff4444",
+      "border-color": "#545d70",
+      "tr-even-bg-color": "#2e3440",
+      "tr-odd-bg-color": "#161b22",
+      "content-bg": "#545d70",
+      "content-fg": "#e5eaf0",
+      "content-hover-bg": "#2e3440",
+      "content-hover-fg": "#e5eaf0",
+      "bar-shadow": "rgba(0, 0, 0, 0.75) 0 0 0.5rem"
+    }
+  }
+}

src/assets/palettes/solarized.json

@@ -0,0 +1,62 @@
+{
+  "id": "solarized",
+  "name": "Solarized",
+  "colors": {
+    "node_slot": {
+      "CLIP": "#2AB7CA",
+      "CLIP_VISION": "#6c71c4",
+      "CLIP_VISION_OUTPUT": "#859900",
+      "CONDITIONING": "#d33682",
+      "CONTROL_NET": "#d1ffd7",
+      "IMAGE": "#5940bb",
+      "LATENT": "#268bd2",
+      "MASK": "#CCC9E7",
+      "MODEL": "#dc322f",
+      "STYLE_MODEL": "#1a998a",
+      "UPSCALE_MODEL": "#054A29",
+      "VAE": "#facfad"
+    },
+    "litegraph_base": {
+      "NODE_TITLE_COLOR": "#fdf6e3",
+      "NODE_SELECTED_TITLE_COLOR": "#A9D400",
+      "NODE_TEXT_SIZE": 14,
+      "NODE_TEXT_COLOR": "#657b83",
+      "NODE_SUBTEXT_SIZE": 12,
+      "NODE_DEFAULT_COLOR": "#094656",
+      "NODE_DEFAULT_BGCOLOR": "#073642",
+      "NODE_DEFAULT_BOXCOLOR": "#839496",
+      "NODE_DEFAULT_SHAPE": 2,
+      "NODE_BOX_OUTLINE_COLOR": "#fdf6e3",
+      "NODE_BYPASS_BGCOLOR": "#FF00FF",
+      "NODE_ERROR_COLOUR": "#E00",
+      "DEFAULT_SHADOW_COLOR": "rgba(0,0,0,0.5)",
+      "DEFAULT_GROUP_FONT": 24,
+      "WIDGET_BGCOLOR": "#002b36",
+      "WIDGET_OUTLINE_COLOR": "#839496",
+      "WIDGET_TEXT_COLOR": "#fdf6e3",
+      "WIDGET_SECONDARY_TEXT_COLOR": "#93a1a1",
+      "LINK_COLOR": "#2aa198",
+      "EVENT_LINK_COLOR": "#268bd2",
+      "CONNECTING_LINK_COLOR": "#859900"
+    },
+    "comfy_base": {
+      "fg-color": "#fdf6e3",
+      "bg-color": "#002b36",
+      "comfy-menu-bg": "#073642",
+      "comfy-menu-secondary-bg": "#06323D",
+      "comfy-input-bg": "#002b36",
+      "input-text": "#93a1a1",
+      "descrip-text": "#586e75",
+      "drag-text": "#839496",
+      "error-text": "#dc322f",
+      "border-color": "#657b83",
+      "tr-even-bg-color": "#002b36",
+      "tr-odd-bg-color": "#073642",
+      "content-bg": "#657b83",
+      "content-fg": "#fdf6e3",
+      "content-hover-bg": "#002b36",
+      "content-hover-fg": "#fdf6e3",
+      "bar-shadow": "rgba(16, 16, 16, 0.5) 0 0 0.5rem"
+    }
+  }
+}

src/components/BrowserTabTitle.vue

@@ -5,11 +5,12 @@
 </template>
 
 <script setup lang="ts">
+import { useTitle } from '@vueuse/core'
+import { computed } from 'vue'
+
 import { useExecutionStore } from '@/stores/executionStore'
 import { useSettingStore } from '@/stores/settingStore'
 import { useWorkflowStore } from '@/stores/workflowStore'
-import { useTitle } from '@vueuse/core'
-import { computed } from 'vue'
 
 const DEFAULT_TITLE = 'ComfyUI'
 const TITLE_SUFFIX = ' - ComfyUI'

src/components/LiteGraphCanvasSplitterOverlay.vue

@@ -46,13 +46,14 @@
 </template>
 
 <script setup lang="ts">
-import { useSettingStore } from '@/stores/settingStore'
-import { useBottomPanelStore } from '@/stores/workspace/bottomPanelStore'
-import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
 import Splitter from 'primevue/splitter'
 import SplitterPanel from 'primevue/splitterpanel'
 import { computed } from 'vue'
 
+import { useSettingStore } from '@/stores/settingStore'
+import { useBottomPanelStore } from '@/stores/workspace/bottomPanelStore'
+import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
+
 const settingStore = useSettingStore()
 const sidebarLocation = computed<'left' | 'right'>(() =>
   settingStore.get('Comfy.Sidebar.Location')

src/components/MenuHamburger.vue

@@ -1,24 +1,31 @@
 <template>
-  <Button
+  <div
     v-show="workspaceState.focusMode"
-    class="comfy-menu-hamburger"
+    class="comfy-menu-hamburger no-drag"
     :style="positionCSS"
-    icon="pi pi-bars"
-    severity="secondary"
-    text
-    size="large"
-    v-tooltip="{ value: $t('menu.showMenu'), showDelay: 300 }"
-    @click="exitFocusMode"
-    @contextmenu="showNativeMenu"
-  />
+  >
+    <Button
+      icon="pi pi-bars"
+      severity="secondary"
+      text
+      size="large"
+      v-tooltip="{ value: $t('menu.showMenu'), showDelay: 300 }"
+      :aria-label="$t('menu.showMenu')"
+      aria-live="assertive"
+      @click="exitFocusMode"
+      @contextmenu="showNativeMenu"
+    />
+    <div v-show="menuSetting !== 'Bottom'" class="window-actions-spacer" />
+  </div>
 </template>
 
 <script setup lang="ts">
 import Button from 'primevue/button'
-import { useWorkspaceStore } from '@/stores/workspaceStore'
-import { computed, CSSProperties, watchEffect } from 'vue'
+import { CSSProperties, computed, watchEffect } from 'vue'
+
 import { app } from '@/scripts/app'
 import { useSettingStore } from '@/stores/settingStore'
+import { useWorkspaceStore } from '@/stores/workspaceStore'
 import { showNativeMenu } from '@/utils/envUtil'
 
 const workspaceState = useWorkspaceStore()
@@ -50,8 +57,6 @@ const positionCSS = computed<CSSProperties>(() =>
 
 <style scoped>
 .comfy-menu-hamburger {
-  pointer-events: auto;
-  position: fixed;
-  z-index: 9999;
+  @apply pointer-events-auto fixed z-[9999] flex flex-row;
 }
 </style>

src/components/actionbar/BatchCountEdit.vue

@@ -3,6 +3,7 @@
     class="batch-count"
     :class="props.class"
     v-tooltip.bottom="$t('menu.batchCount')"
+    :aria-label="$t('menu.batchCount')"
   >
     <InputNumber
       class="w-14"
@@ -30,12 +31,13 @@
 </template>
 
 <script lang="ts" setup>
-import { useQueueSettingsStore } from '@/stores/queueStore'
-import { useSettingStore } from '@/stores/settingStore'
 import { storeToRefs } from 'pinia'
 import InputNumber from 'primevue/inputnumber'
 import { computed } from 'vue'
 
+import { useQueueSettingsStore } from '@/stores/queueStore'
+import { useSettingStore } from '@/stores/settingStore'
+
 interface Props {
   class?: string
 }
@@ -57,7 +59,7 @@ const handleClick = (increment: boolean) => {
   let newCount: number
   if (increment) {
     const originalCount = batchCount.value - 1
-    newCount = originalCount * 2
+    newCount = Math.min(originalCount * 2, maxQueueCount.value)
   } else {
     const originalCount = batchCount.value + 1
     newCount = Math.floor(originalCount / 2)