Update pnpm lock file

Fixes flaky templates modal test introduced in
https://github.com/Comfy-Org/ComfyUI_frontend/pull/5802 by ensuring the
templates modal is visible before querying the visible card count and
asserting that it is greater than 0.

If we immediately count the number of cards after executing the "load
templates" command, it's possible that there are 0 visible due to them
loading (rather than being caused by a legitimate bug).

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5808-fix-flaky-templates-browser-test-27b6d73d365081e58c65f608944976a0)
by [Unito](https://www.unito.io)

.claude/commands/comprehensive-pr-review.md

@@ -67,9 +67,9 @@ This is critical for better file inspection:
 
 Use git locally for much faster analysis:
 
-1. Get list of changed files: `git diff --name-only "origin/$BASE_BRANCH" > changed_files.txt`
-2. Get the full diff: `git diff "origin/$BASE_BRANCH" > pr_diff.txt`
-3. Get detailed file changes with status: `git diff --name-status "origin/$BASE_BRANCH" > file_changes.txt`
+1. Get list of changed files: `git diff --name-only "$BASE_SHA" > changed_files.txt`
+2. Get the full diff: `git diff "$BASE_SHA" > pr_diff.txt`
+3. Get detailed file changes with status: `git diff --name-status "$BASE_SHA" > file_changes.txt`
 
 ### Step 1.5: Create Analysis Cache
 

.gitattributes

@@ -13,4 +13,4 @@
 
 # Generated files
 src/types/comfyRegistryTypes.ts linguist-generated=true
-src/types/generatedManagerTypes.ts linguist-generated=true
+src/workbench/extensions/manager/types/generatedManagerTypes.ts linguist-generated=true

.github/workflows/backport.yaml

@@ -4,10 +4,25 @@ on:
   pull_request_target:
     types: [closed, labeled]
     branches: [main]
+  workflow_dispatch:
+    inputs:
+      pr_number:
+        description: 'PR number to backport'
+        required: true
+        type: string
+      force_rerun:
+        description: 'Force rerun even if backports exist'
+        required: false
+        type: boolean
+        default: false
 
 jobs:
   backport:
-    if: github.event.pull_request.merged == true && contains(github.event.pull_request.labels.*.name, 'needs-backport')
+    if: >
+      (github.event_name == 'pull_request_target' && 
+       github.event.pull_request.merged == true && 
+       contains(github.event.pull_request.labels.*.name, 'needs-backport')) ||
+      github.event_name == 'workflow_dispatch'
     runs-on: ubuntu-latest
     permissions:
       contents: write
@@ -15,6 +30,35 @@ jobs:
       issues: write
 
     steps:
+      - name: Validate inputs for manual triggers
+        if: github.event_name == 'workflow_dispatch'
+        run: |
+          # Validate PR number format
+          if ! [[ "${{ inputs.pr_number }}" =~ ^[0-9]+$ ]]; then
+            echo "::error::Invalid PR number format. Must be a positive integer."
+            exit 1
+          fi
+          
+          # Validate PR exists and is merged
+          if ! gh pr view "${{ inputs.pr_number }}" --json merged >/dev/null 2>&1; then
+            echo "::error::PR #${{ inputs.pr_number }} not found or inaccessible."
+            exit 1
+          fi
+          
+          MERGED=$(gh pr view "${{ inputs.pr_number }}" --json merged --jq '.merged')
+          if [ "$MERGED" != "true" ]; then
+            echo "::error::PR #${{ inputs.pr_number }} is not merged. Only merged PRs can be backported."
+            exit 1
+          fi
+          
+          # Validate PR has needs-backport label
+          if ! gh pr view "${{ inputs.pr_number }}" --json labels --jq '.labels[].name' | grep -q "needs-backport"; then
+            echo "::error::PR #${{ inputs.pr_number }} does not have 'needs-backport' label."
+            exit 1
+          fi
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
       - name: Checkout repository
         uses: actions/checkout@v4
         with:
@@ -29,7 +73,7 @@ jobs:
         id: check-existing
         env:
           GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          PR_NUMBER: ${{ github.event.pull_request.number }}
+          PR_NUMBER: ${{ github.event_name == 'workflow_dispatch' && inputs.pr_number || github.event.pull_request.number }}
         run: |
           # Check for existing backport PRs for this PR number
           EXISTING_BACKPORTS=$(gh pr list --state all --search "backport-${PR_NUMBER}-to" --json title,headRefName,baseRefName | jq -r '.[].headRefName')
@@ -39,6 +83,13 @@ jobs:
             exit 0
           fi
           
+          # For manual triggers with force_rerun, proceed anyway
+          if [ "${{ github.event_name }}" = "workflow_dispatch" ] && [ "${{ inputs.force_rerun }}" = "true" ]; then
+            echo "skip=false" >> $GITHUB_OUTPUT
+            echo "::warning::Force rerun requested - existing backports will be updated"
+            exit 0
+          fi
+          
           echo "Found existing backport PRs:"
           echo "$EXISTING_BACKPORTS"
           echo "skip=true" >> $GITHUB_OUTPUT
@@ -50,8 +101,17 @@ jobs:
         run: |
           # Extract version labels (e.g., "1.24", "1.22")
           VERSIONS=""
-          LABELS='${{ toJSON(github.event.pull_request.labels) }}'
-          for label in $(echo "$LABELS" | jq -r '.[].name'); do
+          
+          if [ "${{ github.event_name }}" = "workflow_dispatch" ]; then
+            # For manual triggers, get labels from the PR
+            LABELS=$(gh pr view ${{ inputs.pr_number }} --json labels | jq -r '.labels[].name')
+          else
+            # For automatic triggers, extract from PR event
+            LABELS='${{ toJSON(github.event.pull_request.labels) }}'
+            LABELS=$(echo "$LABELS" | jq -r '.[].name')
+          fi
+          
+          for label in $LABELS; do
             # Match version labels like "1.24" (major.minor only)
             if [[ "$label" =~ ^[0-9]+\.[0-9]+$ ]]; then
               # Validate the branch exists before adding to list
@@ -75,12 +135,20 @@ jobs:
         if: steps.check-existing.outputs.skip != 'true'
         id: backport
         env:
-          PR_NUMBER: ${{ github.event.pull_request.number }}
-          PR_TITLE: ${{ github.event.pull_request.title }}
-          MERGE_COMMIT: ${{ github.event.pull_request.merge_commit_sha }}
+          PR_NUMBER: ${{ github.event_name == 'workflow_dispatch' && inputs.pr_number || github.event.pull_request.number }}
         run: |
           FAILED=""
           SUCCESS=""
+          
+          # Get PR data for manual triggers
+          if [ "${{ github.event_name }}" = "workflow_dispatch" ]; then
+            PR_DATA=$(gh pr view ${{ inputs.pr_number }} --json title,mergeCommit)
+            PR_TITLE=$(echo "$PR_DATA" | jq -r '.title')
+            MERGE_COMMIT=$(echo "$PR_DATA" | jq -r '.mergeCommit.oid')
+          else
+            PR_TITLE="${{ github.event.pull_request.title }}"
+            MERGE_COMMIT="${{ github.event.pull_request.merge_commit_sha }}"
+          fi
 
           for version in ${{ steps.versions.outputs.versions }}; do
             echo "::group::Backporting to core/${version}"
@@ -133,10 +201,18 @@ jobs:
         if: steps.check-existing.outputs.skip != 'true' && steps.backport.outputs.success
         env:
           GH_TOKEN: ${{ secrets.PR_GH_TOKEN }}
-          PR_TITLE: ${{ github.event.pull_request.title }}
-          PR_NUMBER: ${{ github.event.pull_request.number }}
-          PR_AUTHOR: ${{ github.event.pull_request.user.login }}
+          PR_NUMBER: ${{ github.event_name == 'workflow_dispatch' && inputs.pr_number || github.event.pull_request.number }}
         run: |
+          # Get PR data for manual triggers
+          if [ "${{ github.event_name }}" = "workflow_dispatch" ]; then
+            PR_DATA=$(gh pr view ${{ inputs.pr_number }} --json title,author)
+            PR_TITLE=$(echo "$PR_DATA" | jq -r '.title')
+            PR_AUTHOR=$(echo "$PR_DATA" | jq -r '.author.login')
+          else
+            PR_TITLE="${{ github.event.pull_request.title }}"
+            PR_AUTHOR="${{ github.event.pull_request.user.login }}"
+          fi
+          
           for backport in ${{ steps.backport.outputs.success }}; do
             IFS=':' read -r version branch <<< "${backport}"
 
@@ -165,9 +241,16 @@ jobs:
         env:
           GH_TOKEN: ${{ github.token }}
         run: |
-          PR_NUMBER="${{ github.event.pull_request.number }}"
-          PR_AUTHOR="${{ github.event.pull_request.user.login }}"
-          MERGE_COMMIT="${{ github.event.pull_request.merge_commit_sha }}"
+          if [ "${{ github.event_name }}" = "workflow_dispatch" ]; then
+            PR_DATA=$(gh pr view ${{ inputs.pr_number }} --json author,mergeCommit)
+            PR_NUMBER="${{ inputs.pr_number }}"
+            PR_AUTHOR=$(echo "$PR_DATA" | jq -r '.author.login')
+            MERGE_COMMIT=$(echo "$PR_DATA" | jq -r '.mergeCommit.oid')
+          else
+            PR_NUMBER="${{ github.event.pull_request.number }}"
+            PR_AUTHOR="${{ github.event.pull_request.user.login }}"
+            MERGE_COMMIT="${{ github.event.pull_request.merge_commit_sha }}"
+          fi
 
           for failure in ${{ steps.backport.outputs.failed }}; do
             IFS=':' read -r version reason conflicts <<< "${failure}"

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

@@ -32,11 +32,10 @@ jobs:
       with:
         repository: Comfy-Org/ComfyUI_frontend
         path: ComfyUI_frontend
-    - name: Checkout ComfyUI_devtools
-      uses: actions/checkout@v4
-      with:
-        repository: Comfy-Org/ComfyUI_devtools
-        path: ComfyUI/custom_nodes/ComfyUI_devtools
+    - name: Copy ComfyUI_devtools from frontend repo
+      run: |
+        mkdir -p ComfyUI/custom_nodes/ComfyUI_devtools
+        cp -r ComfyUI_frontend/tools/devtools/* ComfyUI/custom_nodes/ComfyUI_devtools/
     - name: Checkout custom node repository
       uses: actions/checkout@v4
       with:
@@ -79,7 +78,7 @@ jobs:
         wait-for-it --service 127.0.0.1:8188 -t 600
       working-directory: ComfyUI
     - name: Install Playwright Browsers
-      run: npx playwright install chromium --with-deps
+      run: pnpm exec 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
@@ -87,7 +86,7 @@ jobs:
       run: pnpm dev:electron &
       working-directory: ComfyUI_frontend
     - name: Capture base i18n
-      run: npx tsx scripts/diff-i18n capture
+      run: pnpm exec tsx scripts/diff-i18n capture
       working-directory: ComfyUI_frontend
     - name: Update en.json
       run: pnpm collect-i18n
@@ -100,7 +99,7 @@ jobs:
         OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
       working-directory: ComfyUI_frontend
     - name: Diff base vs updated i18n
-      run: npx tsx scripts/diff-i18n diff
+      run: pnpm exec tsx scripts/diff-i18n diff
       working-directory: ComfyUI_frontend
     - name: Update i18n in custom node repository
       run: |

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

@@ -15,7 +15,7 @@ jobs:
     steps:
     - uses: Comfy-Org/ComfyUI_frontend_setup_action@v3
     - name: Install Playwright Browsers
-      run: npx playwright install chromium --with-deps
+      run: pnpm exec 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

.github/workflows/i18n.yaml

@@ -33,7 +33,7 @@ jobs:
         restore-keys: |
           playwright-browsers-${{ runner.os }}-
     - name: Install Playwright Browsers
-      run: npx playwright install chromium --with-deps
+      run: pnpm exec 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

.github/workflows/test-browser-exp.yaml

@@ -19,11 +19,11 @@ jobs:
         restore-keys: |
           playwright-browsers-${{ runner.os }}-
     - name: Install Playwright Browsers
-      run: npx playwright install chromium --with-deps
+      run: pnpm exec playwright install chromium --with-deps
       working-directory: ComfyUI_frontend
     - name: Run Playwright tests and update snapshots
       id: playwright-tests
-      run: npx playwright test --update-snapshots
+      run: pnpm exec playwright test --update-snapshots
       continue-on-error: true
       working-directory: ComfyUI_frontend
     - uses: actions/upload-artifact@v4

.github/workflows/test-ui.yaml

@@ -27,12 +27,10 @@ jobs:
           repository: 'Comfy-Org/ComfyUI_frontend'
           path: 'ComfyUI_frontend'
 
-      - name: Checkout ComfyUI_devtools
-        uses: actions/checkout@v4
-        with:
-          repository: 'Comfy-Org/ComfyUI_devtools'
-          path: 'ComfyUI/custom_nodes/ComfyUI_devtools'
-          ref: 'd05fd48dd787a4192e16802d4244cfcc0e2f9684'
+      - name: Copy ComfyUI_devtools from frontend repo
+        run: |
+          mkdir -p ComfyUI/custom_nodes/ComfyUI_devtools
+          cp -r ComfyUI_frontend/tools/devtools/* ComfyUI/custom_nodes/ComfyUI_devtools/
 
       - name: Install pnpm
         uses: pnpm/action-setup@v4
@@ -150,7 +148,7 @@ jobs:
 
       - name: Run Playwright tests (Shard ${{ matrix.shardIndex }}/${{ matrix.shardTotal }})
         id: playwright
-        run: npx playwright test --project=chromium --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }} --reporter=blob
+        run: pnpm exec playwright test --project=chromium --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }} --reporter=blob
         working-directory: ComfyUI_frontend
         env:
           PLAYWRIGHT_BLOB_OUTPUT_DIR: ../blob-report
@@ -232,7 +230,7 @@ jobs:
         run: |
           # Run tests with both HTML and JSON reporters
           PLAYWRIGHT_JSON_OUTPUT_NAME=playwright-report/report.json \
-          npx playwright test --project=${{ matrix.browser }} \
+          pnpm exec playwright test --project=${{ matrix.browser }} \
             --reporter=list \
             --reporter=html \
             --reporter=json
@@ -283,10 +281,10 @@ jobs:
       - name: Merge into HTML Report
         run: |
           # Generate HTML report
-          npx playwright merge-reports --reporter=html ./all-blob-reports
+          pnpm exec playwright merge-reports --reporter=html ./all-blob-reports
           # Generate JSON report separately with explicit output path
           PLAYWRIGHT_JSON_OUTPUT_NAME=playwright-report/report.json \
-          npx playwright merge-reports --reporter=json ./all-blob-reports
+          pnpm exec playwright merge-reports --reporter=json ./all-blob-reports
         working-directory: ComfyUI_frontend
 
       - name: Upload HTML report

.github/workflows/update-manager-types.yaml

@@ -68,7 +68,7 @@ jobs:
       - name: Generate Manager API types
         run: |
           echo "Generating TypeScript types from ComfyUI-Manager@${{ steps.manager-info.outputs.commit }}..."
-          npx openapi-typescript ./ComfyUI-Manager/openapi.yaml --output ./src/types/generatedManagerTypes.ts
+          pnpm dlx openapi-typescript ./ComfyUI-Manager/openapi.yaml --output ./src/types/generatedManagerTypes.ts
 
       - name: Validate generated types
         run: |

.github/workflows/update-registry-types.yaml

@@ -68,7 +68,7 @@ jobs:
       - name: Generate API types
         run: |
           echo "Generating TypeScript types from comfy-api@${{ steps.api-info.outputs.commit }}..."
-          npx openapi-typescript ./comfy-api/openapi.yml --output ./src/types/comfyRegistryTypes.ts
+          pnpm dlx openapi-typescript ./comfy-api/openapi.yml --output ./src/types/comfyRegistryTypes.ts
 
       - name: Validate generated types
         run: |

.gitignore

@@ -22,6 +22,8 @@ dist-ssr
 *.local
 # Claude configuration
 .claude/*.local.json
+.claude/*.local.md
+.claude/*.local.txt
 CLAUDE.local.md
 
 # Editor directories and files
@@ -44,6 +46,7 @@ components.d.ts
 tests-ui/data/*
 tests-ui/ComfyUI_examples
 tests-ui/workflows/examples
+coverage/
 
 # Browser tests
 /test-results/

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/usr/bin/env bash
 
 pnpm exec lint-staged
-pnpm exec tsx scripts/check-unused-i18n-keys.ts
+pnpm exec tsx scripts/check-unused-i18n-keys.ts

.i18nrc.cjs

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

.storybook/main.ts

@@ -45,7 +45,7 @@ const config: StorybookConfig = {
           compiler: 'vue3',
           customCollections: {
             comfy: FileSystemIconLoader(
-              process.cwd() + '/src/assets/icons/custom'
+              process.cwd() + '/packages/design-system/src/icons'
             )
           }
         }),

CODEOWNERS

@@ -1,17 +1,61 @@
-# Admins
-* @Comfy-Org/comfy_frontend_devs
+# Desktop/Electron
+/src/types/desktop/                               @webfiltered
+/src/constants/desktopDialogs.ts                  @webfiltered
+/src/constants/desktopMaintenanceTasks.ts         @webfiltered
+/src/stores/electronDownloadStore.ts              @webfiltered
+/src/extensions/core/electronAdapter.ts           @webfiltered
+/src/views/DesktopDialogView.vue                  @webfiltered
+/src/components/install/                          @webfiltered
+/src/components/maintenance/                      @webfiltered
+/vite.electron.config.mts                         @webfiltered
 
-# Maintainers
-*.md @Comfy-Org/comfy_maintainer
-/tests-ui/ @Comfy-Org/comfy_maintainer
-/browser_tests/ @Comfy-Org/comfy_maintainer
-/.env_example @Comfy-Org/comfy_maintainer
+# Common UI Components
+/src/components/chip/                             @viva-jinyi
+/src/components/card/                             @viva-jinyi
+/src/components/button/                           @viva-jinyi
+/src/components/input/                            @viva-jinyi
 
-# Translations (AIGODLIKE team + shinshin86)
-/src/locales/ @Yorha4D @KarryCharon @DorotaLuna @shinshin86 @Comfy-Org/comfy_maintainer
+# Topbar
+/src/components/topbar/                           @pythongosssss
 
-# Load 3D extension
-/src/extensions/core/load3d.ts @jtydhr88 @Comfy-Org/comfy_frontend_devs
+# Thumbnail
+/src/renderer/core/thumbnail/                     @pythongosssss
 
-# Mask Editor extension
-/src/extensions/core/maskeditor.ts @brucew4yn3rp @trsommer @Comfy-Org/comfy_frontend_devs
+# Legacy UI
+/scripts/ui/                                      @pythongosssss
+
+# Link rendering
+/src/renderer/core/canvas/links/                  @benceruleanlu
+
+# Node help system
+/src/utils/nodeHelpUtil.ts                        @benceruleanlu
+/src/stores/workspace/nodeHelpStore.ts            @benceruleanlu
+/src/services/nodeHelpService.ts                  @benceruleanlu
+
+# Selection toolbox
+/src/components/graph/selectionToolbox/           @Myestery
+
+# Minimap
+/src/renderer/extensions/minimap/                 @jtydhr88
+
+# Assets
+/src/platform/assets/                             @arjansingh
+
+# Workflow Templates
+/src/platform/workflow/templates/                 @Myestery @christian-byrne @comfyui-wiki
+/src/components/templates/                        @Myestery @christian-byrne @comfyui-wiki
+
+# Mask Editor
+/src/extensions/core/maskeditor.ts                @trsommer @brucew4yn3rp
+/src/extensions/core/maskEditorLayerFilenames.ts  @trsommer @brucew4yn3rp
+/src/extensions/core/maskEditorOld.ts             @trsommer @brucew4yn3rp
+
+# 3D
+/src/extensions/core/load3d.ts                    @jtydhr88
+/src/components/load3d/                           @jtydhr88
+
+# Manager
+/src/workbench/extensions/manager/                @viva-jinyi @christian-byrne @ltdrdata
+
+# Translations
+/src/locales/                                     @Yorha4D @KarryCharon @shinshin86 @Comfy-Org/comfy_maintainer

CONTRIBUTING.md

@@ -265,9 +265,9 @@ The project supports three types of icons, all with automatic imports (no manual
 2. **Iconify Icons** - 200,000+ icons from various libraries: `<i-lucide:settings />`, `<i-mdi:folder />`
 3. **Custom Icons** - Your own SVG icons: `<i-comfy:workflow />`
 
-Icons are powered by the unplugin-icons system, which automatically discovers and imports icons as Vue components. Custom icons are stored in `src/assets/icons/custom/` and processed by `build/customIconCollection.ts` with automatic validation.
+Icons are powered by the unplugin-icons system, which automatically discovers and imports icons as Vue components. Custom icons are stored in `packages/design-system/src/icons/` and processed by `packages/design-system/src/iconCollection.ts` with automatic validation.
 
-For detailed instructions and code examples, see [src/assets/icons/README.md](src/assets/icons/README.md).
+For detailed instructions and code examples, see [packages/design-system/src/icons/README.md](packages/design-system/src/icons/README.md).
 
 ## Working with litegraph.js
 

browser_tests/README.md

@@ -16,15 +16,20 @@ Without this flag, parallel tests will conflict and fail randomly.
 
 ### ComfyUI devtools
 
-Clone <https://github.com/Comfy-Org/ComfyUI_devtools> to your `custom_nodes` directory.  
+ComfyUI_devtools is now included in this repository under `tools/devtools/`. During CI/CD, these files are automatically copied to the `custom_nodes` directory.  
 _ComfyUI_devtools adds additional API endpoints and nodes to ComfyUI for browser testing._
 
+For local development, copy the devtools files to your ComfyUI installation:
+```bash
+cp -r tools/devtools/* /path/to/your/ComfyUI/custom_nodes/ComfyUI_devtools/
+```
+
 ### Node.js & Playwright Prerequisites
 
 Ensure you have Node.js v20 or v22 installed. Then, set up the Chromium test driver:
 
 ```bash
-npx playwright install chromium --with-deps
+pnpm exec playwright install chromium --with-deps
 ```
 
 ### Environment Configuration
@@ -51,14 +56,6 @@ TEST_COMFYUI_DIR=/path/to/your/ComfyUI
 
 ### Common Setup Issues
 
-**Most tests require the new menu system** - Add to your test:
-
-```typescript
-test.beforeEach(async ({ comfyPage }) => {
-  await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
-})
-```
-
 ### Release API Mocking
 
 By default, all tests mock the release API (`api.comfy.org/releases`) to prevent release notification popups from interfering with test execution. This is necessary because the release notifications can appear over UI elements and block test interactions.
@@ -76,7 +73,7 @@ For tests that specifically need to test release functionality, see the example
 **Always use UI mode for development:**
 
 ```bash
-npx playwright test --ui
+pnpm exec playwright test --ui
 ```
 
 UI mode features:
@@ -92,8 +89,8 @@ UI mode features:
 For CI or headless testing:
 
 ```bash
-npx playwright test                    # Run all tests
-npx playwright test widget.spec.ts     # Run specific test file
+pnpm exec playwright test                    # Run all tests
+pnpm exec playwright test widget.spec.ts     # Run specific test file
 ```
 
 ### Local Development Config
@@ -389,7 +386,7 @@ export default defineConfig({
 Option 2 - Generate local baselines for comparison:
 
 ```bash
-npx playwright test --update-snapshots
+pnpm exec playwright test --update-snapshots
 ```
 
 ### Creating New Screenshot Baselines

browser_tests/assets/vueNodes/simple-triple.json

@@ -0,0 +1 @@
+{"id":"4412323e-2509-4258-8abc-68ddeea8f9e1","revision":0,"last_node_id":39,"last_link_id":29,"nodes":[{"id":37,"type":"KSampler","pos":[3635.923095703125,870.237548828125],"size":[428,437],"flags":{},"order":0,"mode":0,"inputs":[{"localized_name":"model","name":"model","type":"MODEL","link":null},{"localized_name":"positive","name":"positive","type":"CONDITIONING","link":null},{"localized_name":"negative","name":"negative","type":"CONDITIONING","link":null},{"localized_name":"latent_image","name":"latent_image","type":"LATENT","link":null},{"localized_name":"seed","name":"seed","type":"INT","widget":{"name":"seed"},"link":null},{"localized_name":"steps","name":"steps","type":"INT","widget":{"name":"steps"},"link":null},{"localized_name":"cfg","name":"cfg","type":"FLOAT","widget":{"name":"cfg"},"link":null},{"localized_name":"sampler_name","name":"sampler_name","type":"COMBO","widget":{"name":"sampler_name"},"link":null},{"localized_name":"scheduler","name":"scheduler","type":"COMBO","widget":{"name":"scheduler"},"link":null},{"localized_name":"denoise","name":"denoise","type":"FLOAT","widget":{"name":"denoise"},"link":null}],"outputs":[{"localized_name":"LATENT","name":"LATENT","type":"LATENT","links":null}],"properties":{"Node name for S&R":"KSampler"},"widgets_values":[0,"randomize",20,8,"euler","simple",1]},{"id":38,"type":"VAEDecode","pos":[4164.01611328125,925.5230712890625],"size":[193.25,107],"flags":{},"order":1,"mode":0,"inputs":[{"localized_name":"samples","name":"samples","type":"LATENT","link":null},{"localized_name":"vae","name":"vae","type":"VAE","link":null}],"outputs":[{"localized_name":"IMAGE","name":"IMAGE","type":"IMAGE","links":null}],"properties":{"Node name for S&R":"VAEDecode"}},{"id":39,"type":"CLIPTextEncode","pos":[3259.289794921875,927.2508544921875],"size":[239.9375,155],"flags":{},"order":2,"mode":0,"inputs":[{"localized_name":"clip","name":"clip","type":"CLIP","link":null},{"localized_name":"text","name":"text","type":"STRING","widget":{"name":"text"},"link":null}],"outputs":[{"localized_name":"CONDITIONING","name":"CONDITIONING","type":"CONDITIONING","links":null}],"properties":{"Node name for S&R":"CLIPTextEncode"},"widgets_values":[""]}],"links":[],"groups":[],"config":{},"extra":{"ds":{"scale":1.1576250000000001,"offset":[-2808.366467322067,-478.34316506594797]}},"version":0.4}

browser_tests/fixtures/ComfyPage.ts

@@ -1643,7 +1643,7 @@ export const comfyPageFixture = base.extend<{
 
     try {
       await comfyPage.setupSettings({
-        'Comfy.UseNewMenu': 'Disabled',
+        'Comfy.UseNewMenu': 'Top',
         // Hide canvas menu/info/selection toolbox by default.
         'Comfy.Graph.CanvasInfo': false,
         'Comfy.Graph.CanvasMenu': false,

browser_tests/fixtures/VueNodeHelpers.ts

@@ -22,6 +22,13 @@ export class VueNodeHelpers {
     )
   }
 
+  /**
+   * Get locator for a Vue node by the node's title (displayed name in the header)
+   */
+  getNodeByTitle(title: string): Locator {
+    return this.page.locator(`[data-node-id]`).filter({ hasText: title })
+  }
+
   /**
    * Get total count of Vue nodes in the DOM
    */

browser_tests/helpers/fitToView.ts

@@ -0,0 +1,104 @@
+import type { ReadOnlyRect } from '../../src/lib/litegraph/src/interfaces'
+import type { ComfyPage } from '../fixtures/ComfyPage'
+
+interface FitToViewOptions {
+  selectionOnly?: boolean
+  zoom?: number
+  padding?: number
+}
+
+/**
+ * Instantly fits the canvas view to graph content without waiting for UI animation.
+ *
+ * Lives outside the shared fixture to keep the default ComfyPage interactions user-oriented.
+ */
+export async function fitToViewInstant(
+  comfyPage: ComfyPage,
+  options: FitToViewOptions = {}
+) {
+  const { selectionOnly = false, zoom = 0.75, padding = 10 } = options
+
+  const rectangles = await comfyPage.page.evaluate<
+    ReadOnlyRect[] | null,
+    { selectionOnly: boolean }
+  >(
+    ({ selectionOnly }) => {
+      const app = window['app']
+      if (!app?.canvas) return null
+
+      const canvas = app.canvas
+      const items = (() => {
+        if (selectionOnly && canvas.selectedItems?.size) {
+          return Array.from(canvas.selectedItems)
+        }
+        try {
+          return Array.from(canvas.positionableItems ?? [])
+        } catch {
+          return []
+        }
+      })()
+
+      if (!items.length) return null
+
+      const rects: ReadOnlyRect[] = []
+
+      for (const item of items) {
+        const rect = item?.boundingRect
+        if (!rect) continue
+
+        const x = Number(rect[0])
+        const y = Number(rect[1])
+        const width = Number(rect[2])
+        const height = Number(rect[3])
+
+        rects.push([x, y, width, height] as const)
+      }
+
+      return rects.length ? rects : null
+    },
+    { selectionOnly }
+  )
+
+  if (!rectangles || rectangles.length === 0) return
+
+  let minX = Infinity
+  let minY = Infinity
+  let maxX = -Infinity
+  let maxY = -Infinity
+
+  for (const [x, y, width, height] of rectangles) {
+    minX = Math.min(minX, Number(x))
+    minY = Math.min(minY, Number(y))
+    maxX = Math.max(maxX, Number(x) + Number(width))
+    maxY = Math.max(maxY, Number(y) + Number(height))
+  }
+
+  const hasFiniteBounds =
+    Number.isFinite(minX) &&
+    Number.isFinite(minY) &&
+    Number.isFinite(maxX) &&
+    Number.isFinite(maxY)
+
+  if (!hasFiniteBounds) return
+
+  const bounds: ReadOnlyRect = [
+    minX - padding,
+    minY - padding,
+    maxX - minX + 2 * padding,
+    maxY - minY + 2 * padding
+  ]
+
+  await comfyPage.page.evaluate(
+    ({ bounds, zoom }) => {
+      const app = window['app']
+      if (!app?.canvas) return
+
+      const canvas = app.canvas
+      canvas.ds.fitToBounds(bounds, { zoom })
+      canvas.setDirty(true, true)
+    },
+    { bounds, zoom }
+  )
+
+  await comfyPage.nextFrame()
+}

browser_tests/tests/backgroundImageUpload.spec.ts

@@ -2,6 +2,10 @@ import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('Background Image Upload', () => {
   test.beforeEach(async ({ comfyPage }) => {
     // Reset the background image setting before each test

browser_tests/tests/changeTracker.spec.ts

@@ -15,6 +15,10 @@ async function afterChange(comfyPage: ComfyPage) {
   })
 }
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('Change Tracker', () => {
   test.describe('Undo/Redo', () => {
     test.beforeEach(async ({ comfyPage }) => {

browser_tests/tests/chatHistory.spec.ts

@@ -3,6 +3,10 @@ import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 interface ChatHistoryEntry {
   prompt: string
   response: string

browser_tests/tests/colorPalette.spec.ts

@@ -3,6 +3,10 @@ import { expect } from '@playwright/test'
 import type { Palette } from '../../src/schemas/colorPaletteSchema'
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 const customColorPalettes: Record<string, Palette> = {
   obsidian: {
     version: 102,

browser_tests/tests/commands.spec.ts

@@ -2,6 +2,10 @@ import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('Keybindings', () => {
   test('Should execute command', async ({ comfyPage }) => {
     await comfyPage.registerCommand('TestCommand', () => {

browser_tests/tests/copyPaste.spec.ts

@@ -2,6 +2,10 @@ import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('Copy Paste', () => {
   test('Can copy and paste node', async ({ comfyPage }) => {
     await comfyPage.clickEmptyLatentNode()

browser_tests/tests/dialog.spec.ts

@@ -4,6 +4,10 @@ import { expect } from '@playwright/test'
 import type { Keybinding } from '../../src/schemas/keyBindingSchema'
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('Load workflow warning', () => {
   test('Should display a warning when loading a workflow with missing nodes', async ({
     comfyPage

browser_tests/tests/domWidget.spec.ts

@@ -2,6 +2,10 @@ import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('DOM Widget', () => {
   test('Collapsed multiline textarea is not visible', async ({ comfyPage }) => {
     await comfyPage.loadWorkflow('widgets/collapsed_multiline')

browser_tests/tests/execution.spec.ts

@@ -2,6 +2,10 @@ import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('Execution', () => {
   test('Report error on unconnected slot', async ({ comfyPage }) => {
     await comfyPage.disconnectEdge()

browser_tests/tests/featureFlags.spec.ts

@@ -2,6 +2,10 @@ import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('Feature Flags', () => {
   test('Client and server exchange feature flags on connection', async ({
     comfyPage

browser_tests/tests/graph.spec.ts

@@ -2,6 +2,10 @@ import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('Graph', () => {
   // Should be able to fix link input slot index after swap the input order
   // Ref: https://github.com/Comfy-Org/ComfyUI_frontend/issues/3348

browser_tests/tests/graphCanvasMenu.spec.ts

@@ -2,6 +2,10 @@ import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('Graph Canvas Menu', () => {
   test.beforeEach(async ({ comfyPage }) => {
     // Set link render mode to spline to make sure it's not affected by other tests'

browser_tests/tests/groupNode.spec.ts

@@ -4,6 +4,10 @@ import type { ComfyPage } from '../fixtures/ComfyPage'
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 import type { NodeReference } from '../fixtures/utils/litegraphUtils'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('Group Node', () => {
   test.describe('Node library sidebar', () => {
     const groupNodeName = 'DefautWorkflowGroupNode'

browser_tests/tests/interaction.spec.ts

@@ -9,6 +9,10 @@ import {
 } from '../fixtures/ComfyPage'
 import type { NodeReference } from '../fixtures/utils/litegraphUtils'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('Item Interaction', () => {
   test('Can select/delete all items', async ({ comfyPage }) => {
     await comfyPage.loadWorkflow('groups/mixed_graph_items')

browser_tests/tests/keybindings.spec.ts

@@ -2,6 +2,10 @@ import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('Keybindings', () => {
   test('Should not trigger non-modifier keybinding when typing in input fields', async ({
     comfyPage

browser_tests/tests/litegraphEvent.spec.ts

@@ -2,6 +2,10 @@ import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 function listenForEvent(): Promise<Event> {
   return new Promise<Event>((resolve) => {
     document.addEventListener('litegraph:canvas', (e) => resolve(e), {

browser_tests/tests/loadWorkflowInMedia.spec.ts

@@ -2,6 +2,10 @@ import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('Load Workflow in Media', () => {
   const fileNames = [
     'workflow.webp',

browser_tests/tests/lodThreshold.spec.ts

@@ -2,6 +2,10 @@ import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('LOD Threshold', () => {
   test('Should switch to low quality mode at correct zoom threshold', async ({
     comfyPage

browser_tests/tests/nodeBadge.spec.ts

@@ -4,6 +4,10 @@ import type { ComfyApp } from '../../src/scripts/app'
 import { NodeBadgeMode } from '../../src/types/nodeSource'
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('Node Badge', () => {
   test('Can add badge', async ({ comfyPage }) => {
     await comfyPage.page.evaluate(() => {

browser_tests/tests/nodeDisplay.spec.ts

@@ -2,6 +2,10 @@ import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 // If an input is optional by node definition, it should be shown as
 // a hollow circle no matter what shape it was defined in the workflow JSON.
 test.describe('Optional input', () => {

browser_tests/tests/nodeSearchBox.spec.ts

@@ -3,6 +3,10 @@ import {
   comfyPageFixture as test
 } from '../fixtures/ComfyPage'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('Node search box', () => {
   test.beforeEach(async ({ comfyPage }) => {
     await comfyPage.setSetting('Comfy.LinkRelease.Action', 'search box')

browser_tests/tests/noteNode.spec.ts

@@ -2,6 +2,10 @@ import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('Note Node', () => {
   test('Can load node nodes', async ({ comfyPage }) => {
     await comfyPage.loadWorkflow('nodes/note_nodes')

browser_tests/tests/primitiveNode.spec.ts

@@ -3,6 +3,10 @@ import { expect } from '@playwright/test'
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 import type { NodeReference } from '../fixtures/utils/litegraphUtils'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('Primitive Node', () => {
   test('Can load with correct size', async ({ comfyPage }) => {
     await comfyPage.loadWorkflow('primitive/primitive_node')

browser_tests/tests/rerouteNode.spec.ts

@@ -40,6 +40,7 @@ test.describe('Reroute Node', () => {
 
 test.describe('LiteGraph Native Reroute Node', () => {
   test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
     await comfyPage.setSetting('LiteGraph.Reroute.SplineOffset', 80)
   })
 

browser_tests/tests/rightClickMenu.spec.ts

@@ -3,6 +3,10 @@ import { expect } from '@playwright/test'
 import { NodeBadgeMode } from '../../src/types/nodeSource'
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('Canvas Right Click Menu', () => {
   test('Can add node', async ({ comfyPage }) => {
     await comfyPage.rightClickCanvas()

browser_tests/tests/selectionToolbox.spec.ts

@@ -4,6 +4,9 @@ import { comfyPageFixture } from '../fixtures/ComfyPage'
 
 const test = comfyPageFixture
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
 const BLUE_COLOR = 'rgb(51, 51, 85)'
 const RED_COLOR = 'rgb(85, 51, 51)'
 

browser_tests/tests/selectionToolboxSubmenus.spec.ts

@@ -2,6 +2,10 @@ import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('Selection Toolbox - More Options Submenus', () => {
   test.beforeEach(async ({ comfyPage }) => {
     await comfyPage.setSetting('Comfy.Canvas.SelectionToolbox', true)

browser_tests/tests/templates.spec.ts

@@ -80,6 +80,12 @@ test.describe('Templates', () => {
     // Load a template
     await comfyPage.executeCommand('Comfy.BrowseTemplates')
     await expect(comfyPage.templates.content).toBeVisible()
+
+    await comfyPage.page
+      .locator(
+        'nav > div:nth-child(2) > div > span:has-text("Getting Started")'
+      )
+      .click()
     await comfyPage.templates.loadTemplate('default')
     await expect(comfyPage.templates.content).toBeHidden()
 
@@ -102,48 +108,72 @@ test.describe('Templates', () => {
     expect(await comfyPage.templates.content.isVisible()).toBe(true)
   })
 
-  test('Uses title field as fallback when the key is not found in locales', async ({
+  test('Uses proper locale files for templates', async ({ comfyPage }) => {
+    // Set locale to French before opening templates
+    await comfyPage.setSetting('Comfy.Locale', 'fr')
+
+    // Load the templates dialog and wait for the French index file request
+    const requestPromise = comfyPage.page.waitForRequest(
+      '**/templates/index.fr.json'
+    )
+
+    await comfyPage.executeCommand('Comfy.BrowseTemplates')
+
+    const request = await requestPromise
+
+    // Verify French index was requested
+    expect(request.url()).toContain('templates/index.fr.json')
+
+    await expect(comfyPage.templates.content).toBeVisible()
+  })
+
+  test('Falls back to English templates when locale file not found', async ({
     comfyPage
   }) => {
-    // Capture request for the index.json
-    await comfyPage.page.route('**/templates/index.json', async (route, _) => {
-      // Add a new template that won't have a translation pre-generated
-      const response = [
-        {
-          moduleName: 'default',
-          title: 'FALLBACK CATEGORY',
-          type: 'image',
-          templates: [
-            {
-              name: 'unknown_key_has_no_translation_available',
-              title: 'FALLBACK TEMPLATE NAME',
-              mediaType: 'image',
-              mediaSubtype: 'webp',
-              description: 'No translations found'
-            }
-          ]
-        }
-      ]
+    // Set locale to a language that doesn't have a template file
+    await comfyPage.setSetting('Comfy.Locale', 'de') // German - no index.de.json exists
+
+    // Wait for the German request (expected to 404)
+    const germanRequestPromise = comfyPage.page.waitForRequest(
+      '**/templates/index.de.json'
+    )
+
+    // Wait for the fallback English request
+    const englishRequestPromise = comfyPage.page.waitForRequest(
+      '**/templates/index.json'
+    )
+
+    // Intercept the German file to simulate a 404
+    await comfyPage.page.route('**/templates/index.de.json', async (route) => {
       await route.fulfill({
-        status: 200,
-        body: JSON.stringify(response),
-        headers: {
-          'Content-Type': 'application/json',
-          'Cache-Control': 'no-store'
-        }
+        status: 404,
+        headers: { 'Content-Type': 'text/plain' },
+        body: 'Not Found'
       })
     })
 
+    // Allow the English index to load normally
+    await comfyPage.page.route('**/templates/index.json', (route) =>
+      route.continue()
+    )
+
     // Load the templates dialog
     await comfyPage.executeCommand('Comfy.BrowseTemplates')
+    await expect(comfyPage.templates.content).toBeVisible()
 
-    // Expect the title to be used as fallback for template cards
+    // Verify German was requested first, then English as fallback
+    const germanRequest = await germanRequestPromise
+    const englishRequest = await englishRequestPromise
+
+    expect(germanRequest.url()).toContain('templates/index.de.json')
+    expect(englishRequest.url()).toContain('templates/index.json')
+
+    // Verify English titles are shown as fallback
     await expect(
-      comfyPage.templates.content.getByText('FALLBACK TEMPLATE NAME')
+      comfyPage.templates.content.getByRole('heading', {
+        name: 'Image Generation'
+      })
     ).toBeVisible()
-
-    // Expect the title to be used as fallback for the template categories
-    await expect(comfyPage.page.getByLabel('FALLBACK CATEGORY')).toBeVisible()
   })
 
   test('template cards are dynamically sized and responsive', async ({
@@ -151,27 +181,33 @@ test.describe('Templates', () => {
   }) => {
     // Open templates dialog
     await comfyPage.executeCommand('Comfy.BrowseTemplates')
-    await expect(comfyPage.templates.content).toBeVisible()
+    await comfyPage.templates.content.waitFor({ state: 'visible' })
 
-    // Wait for at least one template card to appear
-    await expect(comfyPage.page.locator('.template-card').first()).toBeVisible({
-      timeout: 5000
-    })
+    const templateGrid = comfyPage.page.locator(
+      '[data-testid="template-workflows-content"]'
+    )
+    const nav = comfyPage.page
+      .locator('header')
+      .filter({ hasText: 'Templates' })
 
-    // Take snapshot of the template grid
-    const templateGrid = comfyPage.templates.content.locator('.grid').first()
+    const cardCount = await comfyPage.page
+      .locator('[data-testid^="template-workflow-"]')
+      .count()
+    expect(cardCount).toBeGreaterThan(0)
     await expect(templateGrid).toBeVisible()
-    await expect(templateGrid).toHaveScreenshot('template-grid-desktop.png')
+    await expect(nav).toBeVisible() // Nav should be visible at desktop size
 
-    // Check cards at mobile viewport size
-    await comfyPage.page.setViewportSize({ width: 640, height: 800 })
+    const mobileSize = { width: 640, height: 800 }
+    await comfyPage.page.setViewportSize(mobileSize)
+    expect(cardCount).toBeGreaterThan(0)
     await expect(templateGrid).toBeVisible()
-    await expect(templateGrid).toHaveScreenshot('template-grid-mobile.png')
+    await expect(nav).not.toBeVisible() // Nav should collapse at mobile size
 
-    // Check cards at tablet size
-    await comfyPage.page.setViewportSize({ width: 1024, height: 800 })
+    const tabletSize = { width: 1024, height: 800 }
+    await comfyPage.page.setViewportSize(tabletSize)
+    expect(cardCount).toBeGreaterThan(0)
     await expect(templateGrid).toBeVisible()
-    await expect(templateGrid).toHaveScreenshot('template-grid-tablet.png')
+    await expect(nav).toBeVisible() // Nav should be visible at tablet size
   })
 
   test('hover effects work on template cards', async ({ comfyPage }) => {
@@ -179,10 +215,13 @@ test.describe('Templates', () => {
     await comfyPage.executeCommand('Comfy.BrowseTemplates')
     await expect(comfyPage.templates.content).toBeVisible()
 
-    // Get a template card
-    const firstCard = comfyPage.page.locator('.template-card').first()
+    // Get a template card using data-testid
+    const firstCard = comfyPage.page
+      .locator('[data-testid^="template-workflow-"]')
+      .first()
     await expect(firstCard).toBeVisible({ timeout: 5000 })
 
+    // Check initial state - card should have transition classes
     // Take snapshot before hover
     await expect(firstCard).toHaveScreenshot('template-card-before-hover.png')
 
@@ -257,21 +296,42 @@ test.describe('Templates', () => {
     await comfyPage.executeCommand('Comfy.BrowseTemplates')
     await expect(comfyPage.templates.content).toBeVisible()
 
-    // Verify cards are visible with varying content lengths
+    // Wait for cards to load
     await expect(
-      comfyPage.page.getByText('This is a short description.')
-    ).toBeVisible({ timeout: 5000 })
-    await expect(
-      comfyPage.page.getByText('This is a medium length description')
-    ).toBeVisible({ timeout: 5000 })
-    await expect(
-      comfyPage.page.getByText('This is a much longer description')
+      comfyPage.page.locator(
+        '[data-testid="template-workflow-short-description"]'
+      )
     ).toBeVisible({ timeout: 5000 })
 
-    // Take snapshot of a grid with specific cards
-    const templateGrid = comfyPage.templates.content
-      .locator('.grid:has-text("Short Description")')
-      .first()
+    // Verify all three cards with different descriptions are visible
+    const shortDescCard = comfyPage.page.locator(
+      '[data-testid="template-workflow-short-description"]'
+    )
+    const mediumDescCard = comfyPage.page.locator(
+      '[data-testid="template-workflow-medium-description"]'
+    )
+    const longDescCard = comfyPage.page.locator(
+      '[data-testid="template-workflow-long-description"]'
+    )
+
+    await expect(shortDescCard).toBeVisible()
+    await expect(mediumDescCard).toBeVisible()
+    await expect(longDescCard).toBeVisible()
+
+    // Verify descriptions are visible and have line-clamp class
+    // The description is in a p tag with text-muted class
+    const shortDesc = shortDescCard.locator('p.text-muted.line-clamp-2')
+    const mediumDesc = mediumDescCard.locator('p.text-muted.line-clamp-2')
+    const longDesc = longDescCard.locator('p.text-muted.line-clamp-2')
+
+    await expect(shortDesc).toContainText('short description')
+    await expect(mediumDesc).toContainText('medium length description')
+    await expect(longDesc).toContainText('much longer description')
+
+    // Verify grid layout maintains consistency
+    const templateGrid = comfyPage.page.locator(
+      '[data-testid="template-workflows-content"]'
+    )
     await expect(templateGrid).toBeVisible()
     await expect(templateGrid).toHaveScreenshot(
       'template-grid-varying-content.png'

browser_tests/tests/useSettingSearch.spec.ts

@@ -2,6 +2,10 @@ import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('Settings Search functionality', () => {
   test.beforeEach(async ({ comfyPage }) => {
     // Register test settings to verify hidden/deprecated filtering

browser_tests/tests/versionMismatchWarnings.spec.ts

@@ -106,6 +106,11 @@ test.describe('Version Mismatch Warnings', () => {
     const dismissButton = warningToast.getByRole('button', { name: 'Close' })
     await dismissButton.click()
 
+    // Wait for the dismissed state to be persisted
+    await comfyPage.page.waitForFunction(
+      () => !!localStorage.getItem('comfy.versionMismatch.dismissals')
+    )
+
     // Reload the page, keeping local storage
     await comfyPage.setup({ clearStorage: false })
 

browser_tests/tests/vueNodes/NodeHeader.spec.ts

@@ -6,7 +6,7 @@ import { VueNodeFixture } from '../../fixtures/utils/vueNodeFixtures'
 
 test.describe('NodeHeader', () => {
   test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.setSetting('Comfy.UseNewMenu', 'Enabled')
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
     await comfyPage.setSetting('Comfy.Graph.CanvasMenu', false)
     await comfyPage.setSetting('Comfy.EnableTooltips', true)
     await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)

browser_tests/tests/vueNodes/deleteKeyInteraction.spec.ts

@@ -2,6 +2,10 @@ import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('Vue Nodes - Delete Key Interaction', () => {
   test.beforeEach(async ({ comfyPage }) => {
     // Enable Vue nodes rendering

browser_tests/tests/vueNodes/linkInteraction.spec.ts

@@ -0,0 +1,221 @@
+import type { Locator } from '@playwright/test'
+
+import { getSlotKey } from '../../../src/renderer/core/layout/slots/slotIdentifier'
+import {
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '../../fixtures/ComfyPage'
+import { fitToViewInstant } from '../../helpers/fitToView'
+
+async function getCenter(locator: Locator): Promise<{ x: number; y: number }> {
+  const box = await locator.boundingBox()
+  if (!box) throw new Error('Slot bounding box not available')
+  return {
+    x: box.x + box.width / 2,
+    y: box.y + box.height / 2
+  }
+}
+
+test.describe('Vue Node Link Interaction', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
+    await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.setup()
+    await comfyPage.loadWorkflow('vueNodes/simple-triple')
+    await comfyPage.vueNodes.waitForNodes()
+    await fitToViewInstant(comfyPage)
+  })
+
+  test('should show a link dragging out from a slot when dragging on a slot', async ({
+    comfyPage,
+    comfyMouse
+  }) => {
+    const samplerNodes = await comfyPage.getNodeRefsByType('KSampler')
+    expect(samplerNodes.length).toBeGreaterThan(0)
+
+    const samplerNode = samplerNodes[0]
+    const outputSlot = await samplerNode.getOutput(0)
+    await outputSlot.removeLinks()
+    await comfyPage.nextFrame()
+
+    const slotKey = getSlotKey(String(samplerNode.id), 0, false)
+    const slotLocator = comfyPage.page.locator(`[data-slot-key="${slotKey}"]`)
+    await expect(slotLocator).toBeVisible()
+
+    const start = await getCenter(slotLocator)
+    const canvasBox = await comfyPage.canvas.boundingBox()
+    if (!canvasBox) throw new Error('Canvas bounding box not available')
+
+    // Arbitrary value
+    const dragTarget = {
+      x: start.x + 180,
+      y: start.y - 140
+    }
+
+    await comfyMouse.move(start)
+    await comfyMouse.drag(dragTarget)
+    await comfyPage.nextFrame()
+
+    try {
+      await expect(comfyPage.canvas).toHaveScreenshot(
+        'vue-node-dragging-link.png'
+      )
+    } finally {
+      await comfyMouse.drop()
+    }
+  })
+
+  test('should create a link when dropping on a compatible slot', async ({
+    comfyPage
+  }) => {
+    const samplerNodes = await comfyPage.getNodeRefsByType('KSampler')
+    expect(samplerNodes.length).toBeGreaterThan(0)
+    const samplerNode = samplerNodes[0]
+
+    const vaeNodes = await comfyPage.getNodeRefsByType('VAEDecode')
+    expect(vaeNodes.length).toBeGreaterThan(0)
+    const vaeNode = vaeNodes[0]
+
+    const samplerOutput = await samplerNode.getOutput(0)
+    const vaeInput = await vaeNode.getInput(0)
+
+    const outputSlotKey = getSlotKey(String(samplerNode.id), 0, false)
+    const inputSlotKey = getSlotKey(String(vaeNode.id), 0, true)
+
+    const outputSlot = comfyPage.page.locator(
+      `[data-slot-key="${outputSlotKey}"]`
+    )
+    const inputSlot = comfyPage.page.locator(
+      `[data-slot-key="${inputSlotKey}"]`
+    )
+
+    await expect(outputSlot).toBeVisible()
+    await expect(inputSlot).toBeVisible()
+
+    await outputSlot.dragTo(inputSlot)
+    await comfyPage.nextFrame()
+
+    expect(await samplerOutput.getLinkCount()).toBe(1)
+    expect(await vaeInput.getLinkCount()).toBe(1)
+
+    const linkDetails = await comfyPage.page.evaluate((sourceId) => {
+      const app = window['app']
+      const graph = app?.canvas?.graph ?? app?.graph
+      if (!graph) return null
+
+      const source = graph.getNodeById(sourceId)
+      if (!source) return null
+
+      const linkId = source.outputs[0]?.links?.[0]
+      if (linkId == null) return null
+
+      const link = graph.links[linkId]
+      if (!link) return null
+
+      return {
+        originId: link.origin_id,
+        originSlot: link.origin_slot,
+        targetId: link.target_id,
+        targetSlot: link.target_slot
+      }
+    }, samplerNode.id)
+
+    expect(linkDetails).not.toBeNull()
+    expect(linkDetails).toMatchObject({
+      originId: samplerNode.id,
+      originSlot: 0,
+      targetId: vaeNode.id,
+      targetSlot: 0
+    })
+  })
+
+  test('should not create a link when slot types are incompatible', async ({
+    comfyPage
+  }) => {
+    const samplerNodes = await comfyPage.getNodeRefsByType('KSampler')
+    expect(samplerNodes.length).toBeGreaterThan(0)
+    const samplerNode = samplerNodes[0]
+
+    const clipNodes = await comfyPage.getNodeRefsByType('CLIPTextEncode')
+    expect(clipNodes.length).toBeGreaterThan(0)
+    const clipNode = clipNodes[0]
+
+    const samplerOutput = await samplerNode.getOutput(0)
+    const clipInput = await clipNode.getInput(0)
+
+    const outputSlotKey = getSlotKey(String(samplerNode.id), 0, false)
+    const inputSlotKey = getSlotKey(String(clipNode.id), 0, true)
+
+    const outputSlot = comfyPage.page.locator(
+      `[data-slot-key="${outputSlotKey}"]`
+    )
+    const inputSlot = comfyPage.page.locator(
+      `[data-slot-key="${inputSlotKey}"]`
+    )
+
+    await expect(outputSlot).toBeVisible()
+    await expect(inputSlot).toBeVisible()
+
+    await outputSlot.dragTo(inputSlot)
+    await comfyPage.nextFrame()
+
+    expect(await samplerOutput.getLinkCount()).toBe(0)
+    expect(await clipInput.getLinkCount()).toBe(0)
+
+    const graphLinkCount = await comfyPage.page.evaluate((sourceId) => {
+      const app = window['app']
+      const graph = app?.canvas?.graph ?? app?.graph
+      if (!graph) return 0
+
+      const source = graph.getNodeById(sourceId)
+      if (!source) return 0
+
+      return source.outputs[0]?.links?.length ?? 0
+    }, samplerNode.id)
+
+    expect(graphLinkCount).toBe(0)
+  })
+
+  test('should not create a link when dropping onto a slot on the same node', async ({
+    comfyPage
+  }) => {
+    const samplerNodes = await comfyPage.getNodeRefsByType('KSampler')
+    expect(samplerNodes.length).toBeGreaterThan(0)
+    const samplerNode = samplerNodes[0]
+
+    const samplerOutput = await samplerNode.getOutput(0)
+    const samplerInput = await samplerNode.getInput(3)
+
+    const outputSlotKey = getSlotKey(String(samplerNode.id), 0, false)
+    const inputSlotKey = getSlotKey(String(samplerNode.id), 3, true)
+
+    const outputSlot = comfyPage.page.locator(
+      `[data-slot-key="${outputSlotKey}"]`
+    )
+    const inputSlot = comfyPage.page.locator(
+      `[data-slot-key="${inputSlotKey}"]`
+    )
+
+    await expect(outputSlot).toBeVisible()
+    await expect(inputSlot).toBeVisible()
+
+    await outputSlot.dragTo(inputSlot)
+    await comfyPage.nextFrame()
+
+    expect(await samplerOutput.getLinkCount()).toBe(0)
+    expect(await samplerInput.getLinkCount()).toBe(0)
+
+    const graphLinkCount = await comfyPage.page.evaluate((sourceId) => {
+      const app = window['app']
+      const graph = app?.canvas?.graph ?? app?.graph
+      if (!graph) return 0
+
+      const source = graph.getNodeById(sourceId)
+      if (!source) return 0
+
+      return source.outputs[0]?.links?.length ?? 0
+    }, samplerNode.id)
+
+    expect(graphLinkCount).toBe(0)
+  })
+})

browser_tests/tests/vueNodes/lod.spec.ts

@@ -0,0 +1,48 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
+
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
+test.describe('Vue Nodes - LOD', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.setup()
+    await comfyPage.loadWorkflow('default')
+  })
+
+  test('should toggle LOD based on zoom threshold', async ({ comfyPage }) => {
+    await comfyPage.vueNodes.waitForNodes()
+
+    const initialNodeCount = await comfyPage.vueNodes.getNodeCount()
+    expect(initialNodeCount).toBeGreaterThan(0)
+
+    await expect(comfyPage.canvas).toHaveScreenshot('vue-nodes-default.png')
+
+    const vueNodesContainer = comfyPage.vueNodes.nodes
+    const textboxesInNodes = vueNodesContainer.getByRole('textbox')
+    const buttonsInNodes = vueNodesContainer.getByRole('button')
+
+    await expect(textboxesInNodes.first()).toBeVisible()
+    await expect(buttonsInNodes.first()).toBeVisible()
+
+    await comfyPage.zoom(120, 10)
+    await comfyPage.nextFrame()
+
+    await expect(comfyPage.canvas).toHaveScreenshot('vue-nodes-lod-active.png')
+
+    await expect(textboxesInNodes.first()).toBeHidden()
+    await expect(buttonsInNodes.first()).toBeHidden()
+
+    await comfyPage.zoom(-120, 10)
+    await comfyPage.nextFrame()
+
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'vue-nodes-lod-inactive.png'
+    )
+    await expect(textboxesInNodes.first()).toBeVisible()
+    await expect(buttonsInNodes.first()).toBeVisible()
+  })
+})

browser_tests/tests/vueNodes/nodeInteractions/selectionState.spec.ts

@@ -0,0 +1,51 @@
+import {
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '../../../fixtures/ComfyPage'
+
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
+test.describe('Vue Node Selection', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.vueNodes.waitForNodes()
+  })
+
+  const modifiers = [
+    { key: 'Control', name: 'ctrl' },
+    { key: 'Shift', name: 'shift' }
+  ] as const
+
+  for (const { key: modifier, name } of modifiers) {
+    test(`should allow selecting multiple nodes with ${name}+click`, async ({
+      comfyPage
+    }) => {
+      await comfyPage.page.getByText('Load Checkpoint').click()
+      expect(await comfyPage.vueNodes.getSelectedNodeCount()).toBe(1)
+
+      await comfyPage.page.getByText('Empty Latent Image').click({
+        modifiers: [modifier]
+      })
+      expect(await comfyPage.vueNodes.getSelectedNodeCount()).toBe(2)
+
+      await comfyPage.page.getByText('KSampler').click({
+        modifiers: [modifier]
+      })
+      expect(await comfyPage.vueNodes.getSelectedNodeCount()).toBe(3)
+    })
+
+    test(`should allow de-selecting nodes with ${name}+click`, async ({
+      comfyPage
+    }) => {
+      await comfyPage.page.getByText('Load Checkpoint').click()
+      expect(await comfyPage.vueNodes.getSelectedNodeCount()).toBe(1)
+
+      await comfyPage.page.getByText('Load Checkpoint').click({
+        modifiers: [modifier]
+      })
+      expect(await comfyPage.vueNodes.getSelectedNodeCount()).toBe(0)
+    })
+  }
+})

browser_tests/tests/vueNodes/nodeStates/bypass.spec.ts

@@ -0,0 +1,45 @@
+import {
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '../../../fixtures/ComfyPage'
+
+const BYPASS_HOTKEY = 'Control+b'
+const BYPASS_CLASS = /before:bg-bypass\/60/
+
+test.describe('Vue Node Bypass', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.vueNodes.waitForNodes()
+  })
+
+  test('should allow toggling bypass on a selected node with hotkey', async ({
+    comfyPage
+  }) => {
+    await comfyPage.page.getByText('Load Checkpoint').click()
+    await comfyPage.page.keyboard.press(BYPASS_HOTKEY)
+
+    const checkpointNode = comfyPage.vueNodes.getNodeByTitle('Load Checkpoint')
+    await expect(checkpointNode).toHaveClass(BYPASS_CLASS)
+
+    await comfyPage.page.keyboard.press(BYPASS_HOTKEY)
+    await expect(checkpointNode).not.toHaveClass(BYPASS_CLASS)
+  })
+
+  test('should allow toggling bypass on multiple selected nodes with hotkey', async ({
+    comfyPage
+  }) => {
+    await comfyPage.page.getByText('Load Checkpoint').click()
+    await comfyPage.page.getByText('KSampler').click({ modifiers: ['Control'] })
+
+    const checkpointNode = comfyPage.vueNodes.getNodeByTitle('Load Checkpoint')
+    const ksamplerNode = comfyPage.vueNodes.getNodeByTitle('KSampler')
+
+    await comfyPage.page.keyboard.press(BYPASS_HOTKEY)
+    await expect(checkpointNode).toHaveClass(BYPASS_CLASS)
+    await expect(ksamplerNode).toHaveClass(BYPASS_CLASS)
+
+    await comfyPage.page.keyboard.press(BYPASS_HOTKEY)
+    await expect(checkpointNode).not.toHaveClass(BYPASS_CLASS)
+    await expect(ksamplerNode).not.toHaveClass(BYPASS_CLASS)
+  })
+})

browser_tests/tests/vueNodes/nodeStates/error.spec.ts

@@ -0,0 +1,32 @@
+import {
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '../../../fixtures/ComfyPage'
+
+const ERROR_CLASS = /border-error/
+
+test.describe('Vue Node Error', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.vueNodes.waitForNodes()
+  })
+
+  test('should display error state when node is missing (node from workflow is not installed)', async ({
+    comfyPage
+  }) => {
+    await comfyPage.setup()
+    await comfyPage.loadWorkflow('missing/missing_nodes')
+
+    // Close missing nodes warning dialog
+    await comfyPage.page.getByRole('button', { name: 'Close' }).click()
+    await comfyPage.page.waitForSelector('.comfy-missing-nodes', {
+      state: 'hidden'
+    })
+
+    // Expect error state on missing unknown node
+    const unknownNode = comfyPage.page.locator('[data-node-id]').filter({
+      hasText: 'UNKNOWN NODE'
+    })
+    await expect(unknownNode).toHaveClass(ERROR_CLASS)
+  })
+})

browser_tests/tests/vueNodes/nodeStates/mute.spec.ts

@@ -0,0 +1,45 @@
+import {
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '../../../fixtures/ComfyPage'
+
+const MUTE_HOTKEY = 'Control+m'
+const MUTE_CLASS = /opacity-50/
+
+test.describe('Vue Node Mute', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.vueNodes.waitForNodes()
+  })
+
+  test('should allow toggling mute on a selected node with hotkey', async ({
+    comfyPage
+  }) => {
+    await comfyPage.page.getByText('Load Checkpoint').click()
+    await comfyPage.page.keyboard.press(MUTE_HOTKEY)
+
+    const checkpointNode = comfyPage.vueNodes.getNodeByTitle('Load Checkpoint')
+    await expect(checkpointNode).toHaveClass(MUTE_CLASS)
+
+    await comfyPage.page.keyboard.press(MUTE_HOTKEY)
+    await expect(checkpointNode).not.toHaveClass(MUTE_CLASS)
+  })
+
+  test('should allow toggling mute on multiple selected nodes with hotkey', async ({
+    comfyPage
+  }) => {
+    await comfyPage.page.getByText('Load Checkpoint').click()
+    await comfyPage.page.getByText('KSampler').click({ modifiers: ['Control'] })
+
+    const checkpointNode = comfyPage.vueNodes.getNodeByTitle('Load Checkpoint')
+    const ksamplerNode = comfyPage.vueNodes.getNodeByTitle('KSampler')
+
+    await comfyPage.page.keyboard.press(MUTE_HOTKEY)
+    await expect(checkpointNode).toHaveClass(MUTE_CLASS)
+    await expect(ksamplerNode).toHaveClass(MUTE_CLASS)
+
+    await comfyPage.page.keyboard.press(MUTE_HOTKEY)
+    await expect(checkpointNode).not.toHaveClass(MUTE_CLASS)
+    await expect(ksamplerNode).not.toHaveClass(MUTE_CLASS)
+  })
+})

browser_tests/tests/widget.spec.ts

@@ -2,6 +2,10 @@ import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('Combo text widget', () => {
   test('Truncates text when resized', async ({ comfyPage }) => {
     await comfyPage.resizeLoadCheckpointNode(0.2, 1)
@@ -318,6 +322,9 @@ test.describe('Animated image widget', () => {
 test.describe('Load audio widget', () => {
   test('Can load audio', async ({ comfyPage }) => {
     await comfyPage.loadWorkflow('widgets/load_audio_widget')
+    // Wait for the audio widget to be rendered in the DOM
+    await comfyPage.page.waitForSelector('.comfy-audio', { state: 'attached' })
+    await comfyPage.nextFrame()
     await expect(comfyPage.canvas).toHaveScreenshot('load_audio_widget.png')
   })
 })

browser_tests/tsconfig.json

@@ -3,7 +3,6 @@
   "compilerOptions": {
     /* Test files should not be compiled */
     "noEmit": true,
-    // "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "resolveJsonModule": true

build/plugins/comfyAPIPlugin.ts

@@ -1,5 +1,5 @@
 import path from 'path'
-import { Plugin } from 'vite'
+import type { Plugin } from 'vite'
 
 interface ShimResult {
   code: string

build/plugins/generateImportMapPlugin.ts

@@ -1,7 +1,7 @@
 import glob from 'fast-glob'
 import fs from 'fs-extra'
 import { dirname, join } from 'node:path'
-import { HtmlTagDescriptor, Plugin, normalizePath } from 'vite'
+import { type HtmlTagDescriptor, type Plugin, normalizePath } from 'vite'
 
 interface ImportMapSource {
   name: string

build/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    /* Build scripts configuration */
+    "noEmit": true,
+    "strict": true,
+    "esModuleInterop": true,
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "resolveJsonModule": true
+  },
+  "include": [
+    "**/*.ts"
+  ]
+}

docs/extensions/development.md

@@ -110,7 +110,7 @@ pnpm build
 
 For faster iteration during development, use watch mode:
 ```bash
-npx vite build --watch
+pnpm exec vite build --watch
 ```
 
 Note: Watch mode provides faster rebuilds than full builds, but still no hot reload

eslint.config.ts

@@ -33,7 +33,13 @@ export default defineConfig([
       },
       parserOptions: {
         parser: tseslint.parser,
-        projectService: true,
+        projectService: {
+          allowDefaultProject: [
+            'vite.config.mts',
+            'vite.electron.config.mts',
+            'vite.types.config.mts'
+          ]
+        },
         tsConfigRootDir: import.meta.dirname,
         ecmaVersion: 2020,
         sourceType: 'module',
@@ -77,12 +83,25 @@ export default defineConfig([
       '@typescript-eslint/prefer-as-const': 'off',
       '@typescript-eslint/consistent-type-imports': 'error',
       '@typescript-eslint/no-import-type-side-effects': 'error',
+      '@typescript-eslint/no-empty-object-type': [
+        'error',
+        {
+          allowInterfaces: 'always'
+        }
+      ],
       'unused-imports/no-unused-imports': 'error',
       'vue/no-v-html': 'off',
       // Enforce dark-theme: instead of dark: prefix
       'vue/no-restricted-class': ['error', '/^dark:/'],
       'vue/multi-word-component-names': 'off', // TODO: fix
       'vue/no-template-shadow': 'off', // TODO: fix
+      /* Toggle on to do additional until we can clean up existing violations.
+      'vue/no-unused-emit-declarations': 'error',
+      'vue/no-unused-properties': 'error',
+      'vue/no-unused-refs': 'error',
+      'vue/no-use-v-else-with-v-for': 'error',
+      'vue/no-useless-v-bind': 'error',
+      // */
       'vue/one-component-per-file': 'off', // TODO: fix
       'vue/require-default-prop': 'off', // TODO: fix -- this one is very worthwhile
       // Restrict deprecated PrimeVue components

index.html

@@ -8,8 +8,8 @@
     <link rel="stylesheet" type="text/css" href="user.css" />
     <link rel="stylesheet" type="text/css" href="api/userdata/user.css" />
     
-    <!-- Fullscreen mode on iOS -->
-    <meta name="apple-mobile-web-app-capable" content="yes">
+    <!-- Fullscreen mode on mobile browsers -->
+    <meta name="mobile-web-app-capable" content="yes">
     <!-- Status bar style (eg. black or transparent) -->
     <meta name="apple-mobile-web-app-status-bar-style" content="black">
     

knip.config.ts

@@ -22,12 +22,10 @@ const config: KnipConfig = {
   ],
   ignore: [
     // Auto generated manager types
-    'src/types/generatedManagerTypes.ts',
+    'src/workbench/extensions/manager/types/generatedManagerTypes.ts',
     'src/types/comfyRegistryTypes.ts',
     // Used by a custom node (that should move off of this)
-    'src/scripts/ui/components/splitButton.ts',
-    // Staged for for use with subgraph widget promotion
-    'src/lib/litegraph/src/widgets/DisconnectedWidget.ts'
+    'src/scripts/ui/components/splitButton.ts'
   ],
   compilers: {
     // https://github.com/webpro-nl/knip/issues/1008#issuecomment-3207756199

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comfyorg/comfyui-frontend",
   "private": true,
-  "version": "1.28.0",
+  "version": "1.28.2",
   "type": "module",
   "repository": "https://github.com/Comfy-Org/ComfyUI_frontend",
   "homepage": "https://comfy.org",
@@ -18,29 +18,30 @@
     "format:check": "prettier --check './**/*.{js,ts,tsx,vue,mts}' --cache",
     "format:no-cache": "prettier --write './**/*.{js,ts,tsx,vue,mts}' --list-different",
     "format:check:no-cache": "prettier --check './**/*.{js,ts,tsx,vue,mts}'",
-    "test:browser": "npx nx e2e",
-    "test:unit": "nx run test tests-ui/tests",
+    "test:all": "nx run test",
+    "test:browser": "pnpm exec nx e2e",
     "test:component": "nx run test src/components/",
     "test:litegraph": "vitest run --config vitest.litegraph.config.ts",
-    "preinstall": "npx only-allow pnpm",
+    "test:unit": "nx run test tests-ui/tests",
+    "preinstall": "pnpm dlx only-allow pnpm",
     "prepare": "husky || true && git config blame.ignoreRevsFile .git-blame-ignore-revs || true",
     "preview": "nx preview",
     "lint": "eslint src --cache",
     "lint:fix": "eslint src --cache --fix",
+    "lint:unstaged": "git diff --name-only HEAD | grep -E '\\.(js|ts|vue|mts)$' | xargs -r eslint --cache",
+    "lint:unstaged:fix": "git diff --name-only HEAD | grep -E '\\.(js|ts|vue|mts)$' | xargs -r eslint --cache --fix",
     "lint:no-cache": "eslint src",
     "lint:fix:no-cache": "eslint src --fix",
     "knip": "knip --cache",
     "knip:no-cache": "knip",
     "locale": "lobe-i18n locale",
-    "collect-i18n": "npx playwright test --config=playwright.i18n.config.ts",
+    "collect-i18n": "pnpm exec playwright test --config=playwright.i18n.config.ts",
     "json-schema": "tsx scripts/generate-json-schema.ts",
     "storybook": "nx storybook -p 6006",
     "build-storybook": "storybook build"
   },
   "devDependencies": {
     "@eslint/js": "^9.35.0",
-    "@iconify-json/lucide": "^1.2.66",
-    "@iconify/tailwind": "^1.2.0",
     "@intlify/eslint-plugin-vue-i18n": "^4.1.0",
     "@lobehub/i18n-cli": "^1.25.1",
     "@nx/eslint": "21.4.1",
@@ -94,6 +95,7 @@
     "vite-plugin-html": "^3.2.2",
     "vite-plugin-vue-devtools": "^7.7.6",
     "vitest": "^3.2.4",
+    "vue-component-type-helpers": "^3.0.7",
     "vue-eslint-parser": "^10.2.0",
     "vue-tsc": "^3.0.7",
     "zip-dir": "^2.0.0",
@@ -103,6 +105,9 @@
     "@alloc/quick-lru": "^5.2.0",
     "@atlaskit/pragmatic-drag-and-drop": "^1.3.1",
     "@comfyorg/comfyui-electron-types": "0.4.73-0",
+    "@comfyorg/design-system": "workspace:*",
+    "@comfyorg/schemas": "workspace:*",
+    "@comfyorg/tailwind-utils": "workspace:*",
     "@iconify/json": "^2.2.380",
     "@primeuix/forms": "0.0.2",
     "@primeuix/styled": "0.3.2",
@@ -120,13 +125,13 @@
     "@tiptap/extension-table-row": "^2.10.4",
     "@tiptap/starter-kit": "^2.10.4",
     "@vueuse/core": "^11.0.0",
+    "@vueuse/integrations": "^13.9.0",
     "@xterm/addon-fit": "^0.10.0",
     "@xterm/addon-serialize": "^0.13.0",
     "@xterm/xterm": "^5.5.0",
     "algoliasearch": "^5.21.0",
     "axios": "^1.8.2",
     "chart.js": "^4.5.0",
-    "clsx": "^2.1.1",
     "dompurify": "^3.2.5",
     "dotenv": "^16.4.5",
     "es-toolkit": "^1.39.9",
@@ -144,7 +149,6 @@
     "primevue": "^4.2.5",
     "reka-ui": "^2.5.0",
     "semver": "^7.7.2",
-    "tailwind-merge": "^3.3.1",
     "three": "^0.170.0",
     "tiptap-markdown": "^0.8.10",
     "vue": "^3.5.13",
@@ -155,4 +159,4 @@
     "zod": "^3.23.8",
     "zod-validation-error": "^3.3.0"
   }
-}
+}

packages/design-system/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@comfyorg/design-system",
+  "version": "1.0.0",
+  "description": "Shared design system for ComfyUI Frontend",
+  "type": "module",
+  "exports": {
+    "./tailwind-config": {
+      "import": "./tailwind.config.ts",
+      "types": "./tailwind.config.ts"
+    },
+    "./css/*": "./src/css/*"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit"
+  },
+  "nx": {
+    "tags": [
+      "scope:shared",
+      "type:design"
+    ]
+  },
+  "dependencies": {
+    "@iconify-json/lucide": "^1.1.178",
+    "@iconify/tailwind": "^1.1.3"
+  },
+  "devDependencies": {
+    "tailwindcss": "^3.4.17",
+    "typescript": "^5.4.5"
+  },
+  "packageManager": "pnpm@10.17.1"
+}

packages/design-system/src/iconCollection.ts

@@ -5,7 +5,7 @@ import { fileURLToPath } from 'url'
 
 const fileName = fileURLToPath(import.meta.url)
 const dirName = dirname(fileName)
-const customIconsPath = join(dirName, '..', 'src', 'assets', 'icons', 'custom')
+const customIconsPath = join(dirName, 'icons')
 
 // Iconify collection structure
 interface IconifyIcon {

packages/design-system/src/icons/README.md

@@ -51,7 +51,7 @@ ComfyUI supports three types of icons that can be used throughout the interface.
 
 ```vue
 <template>
-  <!-- Your custom SVG icons from src/assets/icons/custom/ -->
+  <!-- Your custom SVG icons from packages/design-system/src/icons/ -->
   <i-comfy:workflow />
   <i-comfy:node-tree />
   <i-comfy:my-custom-icon class="text-xl" />
@@ -128,10 +128,10 @@ ComfyUI supports three types of icons that can be used throughout the interface.
 
 ### 1. Add Your SVG
 
-Place your SVG file in `src/assets/icons/custom/`:
+Place your SVG file in `packages/design-system/src/icons/`:
 
 ```
-src/assets/icons/custom/
+packages/design-system/src/icons/
 ├── workflow-duplicate.svg
 ├── node-preview.svg
 └── your-icon.svg
@@ -249,8 +249,8 @@ Icons are automatically imported using `unplugin-icons` - no manual imports need
 
 The icon system has two layers:
 
-1. **Build-time Processing** (`build/customIconCollection.ts`):
-   - Scans `src/assets/icons/custom/` for SVG files
+1. **Build-time Processing** (`packages/design-system/src/iconCollection.ts`):
+   - Scans `packages/design-system/src/icons/` for SVG files
    - Validates SVG content and structure
    - Creates Iconify collection for Tailwind CSS
    - Provides error handling for malformed files
@@ -273,7 +273,7 @@ export const iconCollection: IconifyCollection = {
 Icons({
   compiler: 'vue3',
   customCollections: {
-    comfy: FileSystemIconLoader('src/assets/icons/custom')
+    comfy: FileSystemIconLoader('packages/design-system/src/icons')
   }
 })
 ```

packages/design-system/tailwind.config.ts

@@ -0,0 +1,26 @@
+import lucide from '@iconify-json/lucide/icons.json' with { type: 'json' }
+import { addDynamicIconSelectors } from '@iconify/tailwind'
+
+import { iconCollection } from './src/iconCollection'
+
+export default {
+  content: [],
+  safelist: [
+    'icon-[lucide--folder]',
+    'icon-[lucide--package]',
+    'icon-[lucide--image]',
+    'icon-[lucide--video]',
+    'icon-[lucide--box]',
+    'icon-[lucide--audio-waveform]',
+    'icon-[lucide--message-circle]'
+  ],
+  plugins: [
+    addDynamicIconSelectors({
+      iconSets: {
+        comfy: iconCollection,
+        lucide
+      },
+      prefix: 'icon'
+    })
+  ]
+}

packages/design-system/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "dist"
+  },
+  "include": ["src/**/*"]
+}

packages/schemas/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@comfyorg/schemas",
+  "version": "1.0.0",
+  "type": "module",
+  "description": "Shared Zod schemas for ComfyUI Frontend",
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    "./apiSchema": "./src/apiSchema.ts",
+    "./colorPaletteSchema": "./src/colorPaletteSchema.ts",
+    "./keyBindingSchema": "./src/keyBindingSchema.ts",
+    "./nodeDefSchema": "./src/nodeDefSchema.ts",
+    "./nodeDef/nodeDefSchemaV2": "./src/nodeDef/nodeDefSchemaV2.ts",
+    "./nodeDef/migration": "./src/nodeDef/migration.ts",
+    "./signInSchema": "./src/signInSchema.ts"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit"
+  },
+  "nx": {
+    "tags": [
+      "scope:shared",
+      "type:schema"
+    ]
+  },
+  "dependencies": {
+    "zod": "^3.23.8",
+    "zod-validation-error": "^3.3.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.4.5"
+  }
+}

packages/schemas/src/apiSchema.ts

@@ -0,0 +1,526 @@
+import { z } from 'zod'
+
+import { LinkMarkerShape } from '@/lib/litegraph/src/litegraph'
+import {
+  zComfyWorkflow,
+  zNodeId
+} from '@/platform/workflow/validation/schemas/workflowSchema'
+import { colorPalettesSchema } from '@/schemas/colorPaletteSchema'
+import { zKeybinding } from '@/schemas/keyBindingSchema'
+import { NodeBadgeMode } from '@/types/nodeSource'
+import { LinkReleaseTriggerAction } from '@/types/searchBoxTypes'
+
+const zNodeType = z.string()
+const zQueueIndex = z.number()
+const zPromptId = z.string()
+export const resultItemType = z.enum(['input', 'output', 'temp'])
+export type ResultItemType = z.infer<typeof resultItemType>
+
+const zResultItem = z.object({
+  filename: z.string().optional(),
+  subfolder: z.string().optional(),
+  type: resultItemType.optional()
+})
+export type ResultItem = z.infer<typeof zResultItem>
+const zOutputs = z
+  .object({
+    audio: z.array(zResultItem).optional(),
+    images: z.array(zResultItem).optional(),
+    video: z.array(zResultItem).optional(),
+    animated: z.array(z.boolean()).optional()
+  })
+  .passthrough()
+
+// WS messages
+const zStatusWsMessageStatus = z.object({
+  exec_info: z.object({
+    queue_remaining: z.number().int()
+  })
+})
+
+const zStatusWsMessage = z.object({
+  status: zStatusWsMessageStatus.nullish(),
+  sid: z.string().nullish()
+})
+
+const zProgressWsMessage = z.object({
+  value: z.number().int(),
+  max: z.number().int(),
+  prompt_id: zPromptId,
+  node: zNodeId
+})
+
+const zNodeProgressState = z.object({
+  value: z.number(),
+  max: z.number(),
+  state: z.enum(['pending', 'running', 'finished', 'error']),
+  node_id: zNodeId,
+  prompt_id: zPromptId,
+  display_node_id: zNodeId.optional(),
+  parent_node_id: zNodeId.optional(),
+  real_node_id: zNodeId.optional()
+})
+
+const zProgressStateWsMessage = z.object({
+  prompt_id: zPromptId,
+  nodes: z.record(zNodeId, zNodeProgressState)
+})
+
+const zExecutingWsMessage = z.object({
+  node: zNodeId,
+  display_node: zNodeId,
+  prompt_id: zPromptId
+})
+
+const zExecutedWsMessage = zExecutingWsMessage.extend({
+  output: zOutputs,
+  merge: z.boolean().optional()
+})
+
+const zExecutionWsMessageBase = z.object({
+  prompt_id: zPromptId,
+  timestamp: z.number().int()
+})
+
+const zExecutionStartWsMessage = zExecutionWsMessageBase
+const zExecutionSuccessWsMessage = zExecutionWsMessageBase
+const zExecutionCachedWsMessage = zExecutionWsMessageBase.extend({
+  nodes: z.array(zNodeId)
+})
+const zExecutionInterruptedWsMessage = zExecutionWsMessageBase.extend({
+  node_id: zNodeId,
+  node_type: zNodeType,
+  executed: z.array(zNodeId)
+})
+const zExecutionErrorWsMessage = zExecutionWsMessageBase.extend({
+  node_id: zNodeId,
+  node_type: zNodeType,
+  executed: z.array(zNodeId),
+  exception_message: z.string(),
+  exception_type: z.string(),
+  traceback: z.array(z.string()),
+  current_inputs: z.any(),
+  current_outputs: z.any()
+})
+
+const zProgressTextWsMessage = z.object({
+  nodeId: zNodeId,
+  text: z.string()
+})
+
+const zDisplayComponentWsMessage = z.object({
+  node_id: zNodeId,
+  component: z.enum(['ChatHistoryWidget']),
+  props: z.record(z.string(), z.any()).optional()
+})
+
+const zTerminalSize = z.object({
+  cols: z.number(),
+  row: z.number()
+})
+const zLogEntry = z.object({
+  t: z.string(),
+  m: z.string()
+})
+const zLogsWsMessage = z.object({
+  size: zTerminalSize.optional(),
+  entries: z.array(zLogEntry)
+})
+const zLogRawResponse = z.object({
+  size: zTerminalSize,
+  entries: z.array(zLogEntry)
+})
+
+const zFeatureFlagsWsMessage = z.record(z.string(), z.any())
+
+export type StatusWsMessageStatus = z.infer<typeof zStatusWsMessageStatus>
+export type StatusWsMessage = z.infer<typeof zStatusWsMessage>
+export type ProgressWsMessage = z.infer<typeof zProgressWsMessage>
+export type ExecutingWsMessage = z.infer<typeof zExecutingWsMessage>
+export type ExecutedWsMessage = z.infer<typeof zExecutedWsMessage>
+export type ExecutionStartWsMessage = z.infer<typeof zExecutionStartWsMessage>
+export type ExecutionSuccessWsMessage = z.infer<
+  typeof zExecutionSuccessWsMessage
+>
+export type ExecutionCachedWsMessage = z.infer<typeof zExecutionCachedWsMessage>
+export type ExecutionInterruptedWsMessage = z.infer<
+  typeof zExecutionInterruptedWsMessage
+>
+export type ExecutionErrorWsMessage = z.infer<typeof zExecutionErrorWsMessage>
+export type LogsWsMessage = z.infer<typeof zLogsWsMessage>
+export type ProgressTextWsMessage = z.infer<typeof zProgressTextWsMessage>
+export type DisplayComponentWsMessage = z.infer<
+  typeof zDisplayComponentWsMessage
+>
+export type NodeProgressState = z.infer<typeof zNodeProgressState>
+export type ProgressStateWsMessage = z.infer<typeof zProgressStateWsMessage>
+export type FeatureFlagsWsMessage = z.infer<typeof zFeatureFlagsWsMessage>
+// End of ws messages
+
+const zPromptInputItem = z.object({
+  inputs: z.record(z.string(), z.any()),
+  class_type: zNodeType
+})
+
+const zPromptInputs = z.record(zPromptInputItem)
+
+const zExtraPngInfo = z
+  .object({
+    workflow: zComfyWorkflow
+  })
+  .passthrough()
+
+const zExtraData = z.object({
+  /** extra_pnginfo can be missing is backend execution gets a validation error. */
+  extra_pnginfo: zExtraPngInfo.optional(),
+  client_id: z.string()
+})
+const zOutputsToExecute = z.array(zNodeId)
+
+const zExecutionStartMessage = z.tuple([
+  z.literal('execution_start'),
+  zExecutionStartWsMessage
+])
+
+const zExecutionSuccessMessage = z.tuple([
+  z.literal('execution_success'),
+  zExecutionSuccessWsMessage
+])
+
+const zExecutionCachedMessage = z.tuple([
+  z.literal('execution_cached'),
+  zExecutionCachedWsMessage
+])
+
+const zExecutionInterruptedMessage = z.tuple([
+  z.literal('execution_interrupted'),
+  zExecutionInterruptedWsMessage
+])
+
+const zExecutionErrorMessage = z.tuple([
+  z.literal('execution_error'),
+  zExecutionErrorWsMessage
+])
+
+const zStatusMessage = z.union([
+  zExecutionStartMessage,
+  zExecutionSuccessMessage,
+  zExecutionCachedMessage,
+  zExecutionInterruptedMessage,
+  zExecutionErrorMessage
+])
+
+const zStatus = z.object({
+  status_str: z.enum(['success', 'error']),
+  completed: z.boolean(),
+  messages: z.array(zStatusMessage)
+})
+
+const zTaskPrompt = z.tuple([
+  zQueueIndex,
+  zPromptId,
+  zPromptInputs,
+  zExtraData,
+  zOutputsToExecute
+])
+
+const zRunningTaskItem = z.object({
+  taskType: z.literal('Running'),
+  prompt: zTaskPrompt,
+  // @Deprecated
+  remove: z.object({
+    name: z.literal('Cancel'),
+    cb: z.function()
+  })
+})
+
+const zPendingTaskItem = z.object({
+  taskType: z.literal('Pending'),
+  prompt: zTaskPrompt
+})
+
+const zTaskOutput = z.record(zNodeId, zOutputs)
+
+const zNodeOutputsMeta = z.object({
+  node_id: zNodeId,
+  display_node: zNodeId,
+  prompt_id: zPromptId.optional(),
+  read_node_id: zNodeId.optional()
+})
+
+const zTaskMeta = z.record(zNodeId, zNodeOutputsMeta)
+
+const zHistoryTaskItem = z.object({
+  taskType: z.literal('History'),
+  prompt: zTaskPrompt,
+  status: zStatus.optional(),
+  outputs: zTaskOutput,
+  meta: zTaskMeta.optional()
+})
+
+const zTaskItem = z.union([
+  zRunningTaskItem,
+  zPendingTaskItem,
+  zHistoryTaskItem
+])
+
+const zTaskType = z.union([
+  z.literal('Running'),
+  z.literal('Pending'),
+  z.literal('History')
+])
+
+export type TaskType = z.infer<typeof zTaskType>
+export type TaskPrompt = z.infer<typeof zTaskPrompt>
+export type TaskStatus = z.infer<typeof zStatus>
+export type TaskOutput = z.infer<typeof zTaskOutput>
+
+// `/queue`
+export type RunningTaskItem = z.infer<typeof zRunningTaskItem>
+export type PendingTaskItem = z.infer<typeof zPendingTaskItem>
+// `/history`
+export type HistoryTaskItem = z.infer<typeof zHistoryTaskItem>
+export type TaskItem = z.infer<typeof zTaskItem>
+
+const zEmbeddingsResponse = z.array(z.string())
+const zExtensionsResponse = z.array(z.string())
+const zError = z.object({
+  type: z.string(),
+  message: z.string(),
+  details: z.string(),
+  extra_info: z
+    .object({
+      input_name: z.string().optional()
+    })
+    .passthrough()
+    .optional()
+})
+const zNodeError = z.object({
+  errors: z.array(zError),
+  class_type: z.string(),
+  dependent_outputs: z.array(z.any())
+})
+const zPromptResponse = z.object({
+  node_errors: z.record(zNodeId, zNodeError).optional(),
+  prompt_id: z.string().optional(),
+  exec_info: z
+    .object({
+      queue_remaining: z.number().optional()
+    })
+    .optional(),
+  error: z.union([z.string(), zError])
+})
+
+const zDeviceStats = z.object({
+  name: z.string(),
+  type: z.string(),
+  index: z.number(),
+  vram_total: z.number(),
+  vram_free: z.number(),
+  torch_vram_total: z.number(),
+  torch_vram_free: z.number()
+})
+
+const zSystemStats = z.object({
+  system: z.object({
+    os: z.string(),
+    python_version: z.string(),
+    embedded_python: z.boolean(),
+    comfyui_version: z.string(),
+    pytorch_version: z.string(),
+    required_frontend_version: z.string().optional(),
+    argv: z.array(z.string()),
+    ram_total: z.number(),
+    ram_free: z.number()
+  }),
+  devices: z.array(zDeviceStats)
+})
+const zUser = z.object({
+  storage: z.enum(['server']),
+  // `migrated` is only available in single-user mode.
+  migrated: z.boolean().optional(),
+  // `users` is only available in multi-user server mode.
+  users: z.record(z.string(), z.string()).optional()
+})
+const zUserData = z.array(z.array(z.string(), z.string()))
+const zUserDataFullInfo = z.object({
+  path: z.string(),
+  size: z.number(),
+  modified: z.number()
+})
+const zBookmarkCustomization = z.object({
+  icon: z.string().optional(),
+  color: z.string().optional()
+})
+export type BookmarkCustomization = z.infer<typeof zBookmarkCustomization>
+
+const zLinkReleaseTriggerAction = z.enum(
+  Object.values(LinkReleaseTriggerAction) as [string, ...string[]]
+)
+
+const zNodeBadgeMode = z.enum(
+  Object.values(NodeBadgeMode) as [string, ...string[]]
+)
+
+const zSettings = z.object({
+  'Comfy.ColorPalette': z.string(),
+  'Comfy.CustomColorPalettes': colorPalettesSchema,
+  'Comfy.Canvas.BackgroundImage': z.string().optional(),
+  'Comfy.ConfirmClear': z.boolean(),
+  'Comfy.DevMode': z.boolean(),
+  'Comfy.Workflow.ShowMissingNodesWarning': z.boolean(),
+  'Comfy.Workflow.ShowMissingModelsWarning': z.boolean(),
+  'Comfy.Workflow.WarnBlueprintOverwrite': z.boolean(),
+  'Comfy.DisableFloatRounding': z.boolean(),
+  'Comfy.DisableSliders': z.boolean(),
+  'Comfy.DOMClippingEnabled': z.boolean(),
+  'Comfy.EditAttention.Delta': z.number(),
+  'Comfy.EnableTooltips': z.boolean(),
+  'Comfy.EnableWorkflowViewRestore': z.boolean(),
+  'Comfy.FloatRoundingPrecision': z.number(),
+  'Comfy.Graph.CanvasInfo': z.boolean(),
+  'Comfy.Graph.CanvasMenu': z.boolean(),
+  'Comfy.Graph.CtrlShiftZoom': z.boolean(),
+  'Comfy.Graph.LinkMarkers': z.nativeEnum(LinkMarkerShape),
+  'Comfy.Graph.ZoomSpeed': z.number(),
+  'Comfy.Group.DoubleClickTitleToEdit': z.boolean(),
+  'Comfy.GroupSelectedNodes.Padding': z.number(),
+  'Comfy.Locale': z.string(),
+  'Comfy.NodeLibrary.Bookmarks': z.array(z.string()),
+  'Comfy.NodeLibrary.Bookmarks.V2': z.array(z.string()),
+  'Comfy.NodeLibrary.BookmarksCustomization': z.record(
+    z.string(),
+    zBookmarkCustomization
+  ),
+  'Comfy.LinkRelease.Action': zLinkReleaseTriggerAction,
+  'Comfy.LinkRelease.ActionShift': zLinkReleaseTriggerAction,
+  'Comfy.ModelLibrary.AutoLoadAll': z.boolean(),
+  'Comfy.ModelLibrary.NameFormat': z.enum(['filename', 'title']),
+  'Comfy.NodeSearchBoxImpl.NodePreview': z.boolean(),
+  'Comfy.NodeSearchBoxImpl': z.enum(['default', 'simple']),
+  'Comfy.NodeSearchBoxImpl.ShowCategory': z.boolean(),
+  'Comfy.NodeSearchBoxImpl.ShowIdName': z.boolean(),
+  'Comfy.NodeSearchBoxImpl.ShowNodeFrequency': z.boolean(),
+  'Comfy.NodeSuggestions.number': z.number(),
+  'Comfy.Node.BypassAllLinksOnDelete': z.boolean(),
+  'Comfy.Node.Opacity': z.number(),
+  'Comfy.Node.MiddleClickRerouteNode': z.boolean(),
+  'Comfy.Node.ShowDeprecated': z.boolean(),
+  'Comfy.Node.ShowExperimental': z.boolean(),
+  'Comfy.Pointer.ClickBufferTime': z.number(),
+  'Comfy.Pointer.ClickDrift': z.number(),
+  'Comfy.Pointer.DoubleClickTime': z.number(),
+  'Comfy.PreviewFormat': z.string(),
+  'Comfy.PromptFilename': z.boolean(),
+  'Comfy.Sidebar.Location': z.enum(['left', 'right']),
+  'Comfy.Sidebar.Size': z.enum(['small', 'normal']),
+  'Comfy.Sidebar.UnifiedWidth': z.boolean(),
+  'Comfy.SnapToGrid.GridSize': z.number(),
+  'Comfy.TextareaWidget.FontSize': z.number(),
+  'Comfy.TextareaWidget.Spellcheck': z.boolean(),
+  'Comfy.UseNewMenu': z.enum(['Disabled', 'Top', 'Bottom']),
+  'Comfy.TreeExplorer.ItemPadding': z.number(),
+  'Comfy.Validation.Workflows': z.boolean(),
+  'Comfy.Workflow.SortNodeIdOnSave': z.boolean(),
+  'Comfy.Queue.ImageFit': z.enum(['contain', 'cover']),
+  'Comfy.Workflow.WorkflowTabsPosition': z.enum([
+    'Sidebar',
+    'Topbar',
+    'Topbar (2nd-row)'
+  ]),
+  'Comfy.Node.DoubleClickTitleToEdit': z.boolean(),
+  'Comfy.WidgetControlMode': z.enum(['before', 'after']),
+  'Comfy.Window.UnloadConfirmation': z.boolean(),
+  'Comfy.NodeBadge.NodeSourceBadgeMode': zNodeBadgeMode,
+  'Comfy.NodeBadge.NodeIdBadgeMode': zNodeBadgeMode,
+  'Comfy.NodeBadge.NodeLifeCycleBadgeMode': zNodeBadgeMode,
+  'Comfy.NodeBadge.ShowApiPricing': z.boolean(),
+  'Comfy.Notification.ShowVersionUpdates': z.boolean(),
+  'Comfy.QueueButton.BatchCountLimit': z.number(),
+  'Comfy.Queue.MaxHistoryItems': z.number(),
+  'Comfy.Keybinding.UnsetBindings': z.array(zKeybinding),
+  'Comfy.Keybinding.NewBindings': z.array(zKeybinding),
+  'Comfy.Extension.Disabled': z.array(z.string()),
+  'Comfy.LinkRenderMode': z.number(),
+  'Comfy.Node.AutoSnapLinkToSlot': z.boolean(),
+  'Comfy.Node.SnapHighlightsNode': z.boolean(),
+  'Comfy.Server.ServerConfigValues': z.record(z.string(), z.any()),
+  'Comfy.Server.LaunchArgs': z.record(z.string(), z.string()),
+  'LiteGraph.Canvas.MaximumFps': z.number(),
+  'Comfy.Workflow.ConfirmDelete': z.boolean(),
+  'Comfy.Workflow.AutoSaveDelay': z.number(),
+  'Comfy.Workflow.AutoSave': z.enum(['off', 'after delay']),
+  'Comfy.RerouteBeta': z.boolean(),
+  'LiteGraph.Canvas.MinFontSizeForLOD': z.number(),
+  'Comfy.Canvas.SelectionToolbox': z.boolean(),
+  'LiteGraph.Node.TooltipDelay': z.number(),
+  'LiteGraph.ContextMenu.Scaling': z.boolean(),
+  'LiteGraph.Reroute.SplineOffset': z.number(),
+  'LiteGraph.Canvas.LowQualityRenderingZoomThreshold': z.number(),
+  'Comfy.Toast.DisableReconnectingToast': z.boolean(),
+  'Comfy.Workflow.Persist': z.boolean(),
+  'Comfy.TutorialCompleted': z.boolean(),
+  'Comfy.InstalledVersion': z.string().nullable(),
+  'Comfy.Node.AllowImageSizeDraw': z.boolean(),
+  'Comfy.Minimap.Visible': z.boolean(),
+  'Comfy.Minimap.NodeColors': z.boolean(),
+  'Comfy.Minimap.ShowLinks': z.boolean(),
+  'Comfy.Minimap.ShowGroups': z.boolean(),
+  'Comfy.Minimap.RenderBypassState': z.boolean(),
+  'Comfy.Minimap.RenderErrorState': z.boolean(),
+  'Comfy.Canvas.NavigationMode': z.string(),
+  'Comfy.Canvas.LeftMouseClickBehavior': z.string(),
+  'Comfy.Canvas.MouseWheelScroll': z.string(),
+  'Comfy.VueNodes.Enabled': z.boolean(),
+  'Comfy.Assets.UseAssetAPI': z.boolean(),
+  'Comfy-Desktop.AutoUpdate': z.boolean(),
+  'Comfy-Desktop.SendStatistics': z.boolean(),
+  'Comfy-Desktop.WindowStyle': z.string(),
+  'Comfy-Desktop.UV.PythonInstallMirror': z.string(),
+  'Comfy-Desktop.UV.PypiInstallMirror': z.string(),
+  'Comfy-Desktop.UV.TorchInstallMirror': z.string(),
+  'Comfy.MaskEditor.UseNewEditor': z.boolean(),
+  'Comfy.MaskEditor.BrushAdjustmentSpeed': z.number(),
+  'Comfy.MaskEditor.UseDominantAxis': z.boolean(),
+  'Comfy.Load3D.ShowGrid': z.boolean(),
+  'Comfy.Load3D.ShowPreview': z.boolean(),
+  'Comfy.Load3D.BackgroundColor': z.string(),
+  'Comfy.Load3D.LightIntensity': z.number(),
+  'Comfy.Load3D.LightIntensityMaximum': z.number(),
+  'Comfy.Load3D.LightIntensityMinimum': z.number(),
+  'Comfy.Load3D.LightAdjustmentIncrement': z.number(),
+  'Comfy.Load3D.CameraType': z.enum(['perspective', 'orthographic']),
+  'Comfy.Load3D.3DViewerEnable': z.boolean(),
+  'Comfy.Memory.AllowManualUnload': z.boolean(),
+  'pysssss.SnapToGrid': z.boolean(),
+  /** VHS setting is used for queue video preview support. */
+  'VHS.AdvancedPreviews': z.string(),
+  /** Release data settings */
+  'Comfy.Release.Version': z.string(),
+  'Comfy.Release.Status': z.enum([
+    'skipped',
+    'changelog seen',
+    "what's new seen"
+  ]),
+  'Comfy.Release.Timestamp': z.number(),
+  /** Settings used for testing */
+  'test.setting': z.any(),
+  'main.sub.setting.name': z.any(),
+  'single.setting': z.any(),
+  'LiteGraph.Node.DefaultPadding': z.boolean(),
+  'LiteGraph.Pointer.TrackpadGestures': z.boolean()
+})
+
+export type EmbeddingsResponse = z.infer<typeof zEmbeddingsResponse>
+export type ExtensionsResponse = z.infer<typeof zExtensionsResponse>
+export type PromptResponse = z.infer<typeof zPromptResponse>
+export type NodeError = z.infer<typeof zNodeError>
+export type Settings = z.infer<typeof zSettings>
+export type DeviceStats = z.infer<typeof zDeviceStats>
+export type SystemStats = z.infer<typeof zSystemStats>
+export type User = z.infer<typeof zUser>
+export type UserData = z.infer<typeof zUserData>
+export type UserDataFullInfo = z.infer<typeof zUserDataFullInfo>
+export type TerminalSize = z.infer<typeof zTerminalSize>
+export type LogEntry = z.infer<typeof zLogEntry>
+export type LogsRawResponse = z.infer<typeof zLogRawResponse>

packages/schemas/src/colorPaletteSchema.ts

@@ -0,0 +1,116 @@
+import { z } from 'zod'
+
+import { LiteGraph } from '@/lib/litegraph/src/litegraph'
+
+const nodeSlotSchema = z.object({
+  CLIP: z.string(),
+  CLIP_VISION: z.string(),
+  CLIP_VISION_OUTPUT: z.string(),
+  CONDITIONING: z.string(),
+  CONTROL_NET: z.string(),
+  IMAGE: z.string(),
+  LATENT: z.string(),
+  MASK: z.string(),
+  MODEL: z.string(),
+  STYLE_MODEL: z.string(),
+  VAE: z.string(),
+  NOISE: z.string(),
+  GUIDER: z.string(),
+  SAMPLER: z.string(),
+  SIGMAS: z.string(),
+  TAESD: z.string()
+})
+
+const litegraphBaseSchema = z.object({
+  BACKGROUND_IMAGE: z.string(),
+  CLEAR_BACKGROUND_COLOR: z.string(),
+  NODE_TITLE_COLOR: z.string(),
+  NODE_SELECTED_TITLE_COLOR: z.string(),
+  NODE_TEXT_SIZE: z.number(),
+  NODE_TEXT_COLOR: z.string(),
+  NODE_TEXT_HIGHLIGHT_COLOR: z.string(),
+  NODE_SUBTEXT_SIZE: z.number(),
+  NODE_DEFAULT_COLOR: z.string(),
+  NODE_DEFAULT_BGCOLOR: z.string(),
+  NODE_DEFAULT_BOXCOLOR: z.string(),
+  NODE_DEFAULT_SHAPE: z.union([
+    z.literal(LiteGraph.BOX_SHAPE),
+    z.literal(LiteGraph.ROUND_SHAPE),
+    z.literal(LiteGraph.CARD_SHAPE),
+    // Legacy palettes have string field for NODE_DEFAULT_SHAPE.
+    z.string()
+  ]),
+  NODE_BOX_OUTLINE_COLOR: z.string(),
+  NODE_BYPASS_BGCOLOR: z.string(),
+  NODE_ERROR_COLOUR: z.string(),
+  DEFAULT_SHADOW_COLOR: z.string(),
+  DEFAULT_GROUP_FONT: z.number(),
+  WIDGET_BGCOLOR: z.string(),
+  WIDGET_OUTLINE_COLOR: z.string(),
+  WIDGET_TEXT_COLOR: z.string(),
+  WIDGET_SECONDARY_TEXT_COLOR: z.string(),
+  WIDGET_DISABLED_TEXT_COLOR: z.string(),
+  LINK_COLOR: z.string(),
+  EVENT_LINK_COLOR: z.string(),
+  CONNECTING_LINK_COLOR: z.string(),
+  BADGE_FG_COLOR: z.string(),
+  BADGE_BG_COLOR: z.string()
+})
+
+const comfyBaseSchema = z.object({
+  ['fg-color']: z.string(),
+  ['bg-color']: z.string(),
+  ['bg-img']: z.string().optional(),
+  ['comfy-menu-bg']: z.string(),
+  ['comfy-menu-secondary-bg']: z.string(),
+  ['comfy-input-bg']: z.string(),
+  ['input-text']: z.string(),
+  ['descrip-text']: z.string(),
+  ['drag-text']: z.string(),
+  ['error-text']: z.string(),
+  ['border-color']: z.string(),
+  ['tr-even-bg-color']: z.string(),
+  ['tr-odd-bg-color']: z.string(),
+  ['content-bg']: z.string(),
+  ['content-fg']: z.string(),
+  ['content-hover-bg']: z.string(),
+  ['content-hover-fg']: z.string(),
+  ['bar-shadow']: z.string()
+})
+
+const colorsSchema = z.object({
+  node_slot: nodeSlotSchema,
+  litegraph_base: litegraphBaseSchema,
+  comfy_base: comfyBaseSchema
+})
+
+const partialColorsSchema = z.object({
+  node_slot: nodeSlotSchema.partial(),
+  litegraph_base: litegraphBaseSchema.partial(),
+  comfy_base: comfyBaseSchema.partial()
+})
+
+// Palette in the wild can have custom metadata fields such as 'version'.
+export const paletteSchema = z
+  .object({
+    id: z.string(),
+    name: z.string(),
+    colors: partialColorsSchema,
+    light_theme: z.boolean().optional()
+  })
+  .passthrough()
+
+const completedPaletteSchema = z
+  .object({
+    id: z.string(),
+    name: z.string(),
+    colors: colorsSchema
+  })
+  .passthrough()
+
+export const colorPalettesSchema = z.record(paletteSchema)
+
+export type Colors = z.infer<typeof colorsSchema>
+export type Palette = z.infer<typeof paletteSchema>
+export type CompletedPalette = z.infer<typeof completedPaletteSchema>
+export type ColorPalettes = z.infer<typeof colorPalettesSchema>

packages/schemas/src/keyBindingSchema.ts

@@ -0,0 +1,25 @@
+import { z } from 'zod'
+
+// KeyCombo schema
+const zKeyCombo = z.object({
+  key: z.string(),
+  ctrl: z.boolean().optional(),
+  alt: z.boolean().optional(),
+  shift: z.boolean().optional(),
+  meta: z.boolean().optional()
+})
+
+// Keybinding schema
+export const zKeybinding = z.object({
+  commandId: z.string(),
+  combo: zKeyCombo,
+  // Optional target element ID to limit keybinding to.
+  // Note: Currently only used to distinguish between global keybindings
+  // and litegraph canvas keybindings.
+  // Do NOT use this field in extensions as it has no effect.
+  targetElementId: z.string().optional()
+})
+
+// Infer types from schemas
+export type KeyCombo = z.infer<typeof zKeyCombo>
+export type Keybinding = z.infer<typeof zKeybinding>

packages/schemas/src/nodeDef/migration.ts

@@ -0,0 +1,143 @@
+import type {
+  ComfyNodeDef as ComfyNodeDefV2,
+  InputSpec as InputSpecV2,
+  OutputSpec as OutputSpecV2
+} from '@/schemas/nodeDef/nodeDefSchemaV2'
+import type {
+  ComfyNodeDef as ComfyNodeDefV1,
+  InputSpec as InputSpecV1
+} from '@/schemas/nodeDefSchema'
+import {
+  getComboSpecComboOptions,
+  isComboInputSpec,
+  isComboInputSpecV1
+} from '@/schemas/nodeDefSchema'
+
+/**
+ * Transforms a V1 node definition to V2 format
+ * @param nodeDefV1 The V1 node definition to transform
+ * @returns The transformed V2 node definition
+ */
+export function transformNodeDefV1ToV2(
+  nodeDefV1: ComfyNodeDefV1
+): ComfyNodeDefV2 {
+  // Transform inputs
+  const inputs: Record<string, InputSpecV2> = {}
+
+  // Process required inputs
+  if (nodeDefV1.input?.required) {
+    Object.entries(nodeDefV1.input.required).forEach(([name, inputSpecV1]) => {
+      inputs[name] = transformInputSpecV1ToV2(inputSpecV1, {
+        name,
+        isOptional: false
+      })
+    })
+  }
+
+  // Process optional inputs
+  if (nodeDefV1.input?.optional) {
+    Object.entries(nodeDefV1.input.optional).forEach(([name, inputSpecV1]) => {
+      inputs[name] = transformInputSpecV1ToV2(inputSpecV1, {
+        name,
+        isOptional: true
+      })
+    })
+  }
+
+  // Transform outputs
+  const outputs: OutputSpecV2[] = []
+
+  if (nodeDefV1.output) {
+    if (Array.isArray(nodeDefV1.output)) {
+      nodeDefV1.output.forEach((outputType, index) => {
+        const outputSpec: OutputSpecV2 = {
+          index,
+          name: nodeDefV1.output_name?.[index] || `output_${index}`,
+          type: Array.isArray(outputType) ? 'COMBO' : outputType,
+          is_list: nodeDefV1.output_is_list?.[index] || false,
+          tooltip: nodeDefV1.output_tooltips?.[index]
+        }
+
+        // Add options for combo outputs
+        if (Array.isArray(outputType)) {
+          outputSpec.options = outputType
+        }
+
+        outputs.push(outputSpec)
+      })
+    } else {
+      console.warn('nodeDefV1.output is not an array:', nodeDefV1.output)
+    }
+  }
+
+  // Create the V2 node definition
+  return {
+    inputs,
+    outputs,
+    hidden: nodeDefV1.input?.hidden,
+    name: nodeDefV1.name,
+    display_name: nodeDefV1.display_name,
+    description: nodeDefV1.description,
+    category: nodeDefV1.category,
+    output_node: nodeDefV1.output_node,
+    python_module: nodeDefV1.python_module,
+    deprecated: nodeDefV1.deprecated,
+    experimental: nodeDefV1.experimental
+  }
+}
+
+/**
+ * Transforms a V1 input specification to V2 format
+ * @param inputSpecV1 The V1 input specification to transform
+ * @param name The name of the input
+ * @param isOptional Whether the input is optional
+ * @returns The transformed V2 input specification
+ */
+export function transformInputSpecV1ToV2(
+  inputSpecV1: InputSpecV1,
+  kwargs: {
+    name: string
+    isOptional?: boolean
+  }
+): InputSpecV2 {
+  const { name, isOptional = false } = kwargs
+
+  // Extract options from the input spec
+  const options = inputSpecV1[1] || {}
+
+  // Base properties for all input types
+  const baseProps = {
+    name,
+    isOptional,
+    ...options
+  }
+
+  // Handle different input types
+  if (isComboInputSpec(inputSpecV1)) {
+    return {
+      type: 'COMBO',
+      ...baseProps,
+      options: isComboInputSpecV1(inputSpecV1)
+        ? inputSpecV1[0]
+        : getComboSpecComboOptions(inputSpecV1)
+    }
+  } else if (typeof inputSpecV1[0] === 'string') {
+    // Handle standard types (INT, FLOAT, BOOLEAN, STRING) and custom types
+    return {
+      type: inputSpecV1[0],
+      ...baseProps
+    }
+  }
+
+  // Fallback for any unhandled cases
+  return {
+    type: 'UNKNOWN',
+    ...baseProps
+  }
+}
+
+export function transformInputSpecV2ToV1(
+  inputSpecV2: InputSpecV2
+): InputSpecV1 {
+  return [inputSpecV2.type, inputSpecV2]
+}

packages/schemas/src/nodeDef/nodeDefSchemaV2.ts

@@ -0,0 +1,264 @@
+import { z } from 'zod'
+
+import {
+  zBaseInputOptions,
+  zBooleanInputOptions,
+  zComboInputOptions,
+  zFloatInputOptions,
+  zIntInputOptions,
+  zStringInputOptions
+} from '@/schemas/nodeDefSchema'
+
+const zIntInputSpec = zIntInputOptions.extend({
+  type: z.literal('INT'),
+  name: z.string(),
+  isOptional: z.boolean().optional()
+})
+
+const zFloatInputSpec = zFloatInputOptions.extend({
+  type: z.literal('FLOAT'),
+  name: z.string(),
+  isOptional: z.boolean().optional()
+})
+
+const zBooleanInputSpec = zBooleanInputOptions.extend({
+  type: z.literal('BOOLEAN'),
+  name: z.string(),
+  isOptional: z.boolean().optional()
+})
+
+const zStringInputSpec = zStringInputOptions.extend({
+  type: z.literal('STRING'),
+  name: z.string(),
+  isOptional: z.boolean().optional()
+})
+
+const zComboInputSpec = zComboInputOptions.extend({
+  type: z.literal('COMBO'),
+  name: z.string(),
+  isOptional: z.boolean().optional()
+})
+
+const zColorInputSpec = zBaseInputOptions.extend({
+  type: z.literal('COLOR'),
+  name: z.string(),
+  isOptional: z.boolean().optional(),
+  options: z
+    .object({
+      default: z.string().optional()
+    })
+    .optional()
+})
+
+const zFileUploadInputSpec = zBaseInputOptions.extend({
+  type: z.literal('FILEUPLOAD'),
+  name: z.string(),
+  isOptional: z.boolean().optional(),
+  options: z.record(z.unknown()).optional()
+})
+
+const zImageInputSpec = zBaseInputOptions.extend({
+  type: z.literal('IMAGE'),
+  name: z.string(),
+  isOptional: z.boolean().optional(),
+  options: z.record(z.unknown()).optional()
+})
+
+const zImageCompareInputSpec = zBaseInputOptions.extend({
+  type: z.literal('IMAGECOMPARE'),
+  name: z.string(),
+  isOptional: z.boolean().optional(),
+  options: z.record(z.unknown()).optional()
+})
+
+const zMarkdownInputSpec = zBaseInputOptions.extend({
+  type: z.literal('MARKDOWN'),
+  name: z.string(),
+  isOptional: z.boolean().optional(),
+  options: z
+    .object({
+      content: z.string().optional()
+    })
+    .optional()
+})
+
+const zTreeSelectInputSpec = zBaseInputOptions.extend({
+  type: z.literal('TREESELECT'),
+  name: z.string(),
+  isOptional: z.boolean().optional(),
+  options: z
+    .object({
+      multiple: z.boolean().optional(),
+      values: z.array(z.unknown()).optional()
+    })
+    .optional()
+})
+
+const zMultiSelectInputSpec = zBaseInputOptions.extend({
+  type: z.literal('MULTISELECT'),
+  name: z.string(),
+  isOptional: z.boolean().optional(),
+  options: z
+    .object({
+      values: z.array(z.string()).optional()
+    })
+    .optional()
+})
+
+const zChartInputSpec = zBaseInputOptions.extend({
+  type: z.literal('CHART'),
+  name: z.string(),
+  isOptional: z.boolean().optional(),
+  options: z
+    .object({
+      type: z.enum(['bar', 'line']).optional(),
+      data: z.object({}).optional()
+    })
+    .optional()
+})
+
+const zGalleriaInputSpec = zBaseInputOptions.extend({
+  type: z.literal('GALLERIA'),
+  name: z.string(),
+  isOptional: z.boolean().optional(),
+  options: z
+    .object({
+      images: z.array(z.string()).optional()
+    })
+    .optional()
+})
+
+const zSelectButtonInputSpec = zBaseInputOptions.extend({
+  type: z.literal('SELECTBUTTON'),
+  name: z.string(),
+  isOptional: z.boolean().optional(),
+  options: z
+    .object({
+      values: z.array(z.string()).optional()
+    })
+    .optional()
+})
+
+const zTextareaInputSpec = zBaseInputOptions.extend({
+  type: z.literal('TEXTAREA'),
+  name: z.string(),
+  isOptional: z.boolean().optional(),
+  options: z
+    .object({
+      rows: z.number().optional(),
+      cols: z.number().optional(),
+      default: z.string().optional()
+    })
+    .optional()
+})
+
+const zCustomInputSpec = zBaseInputOptions.extend({
+  type: z.string(),
+  name: z.string(),
+  isOptional: z.boolean().optional()
+})
+
+const zInputSpec = z.union([
+  zIntInputSpec,
+  zFloatInputSpec,
+  zBooleanInputSpec,
+  zStringInputSpec,
+  zComboInputSpec,
+  zColorInputSpec,
+  zFileUploadInputSpec,
+  zImageInputSpec,
+  zImageCompareInputSpec,
+  zMarkdownInputSpec,
+  zTreeSelectInputSpec,
+  zMultiSelectInputSpec,
+  zChartInputSpec,
+  zGalleriaInputSpec,
+  zSelectButtonInputSpec,
+  zTextareaInputSpec,
+  zCustomInputSpec
+])
+
+// Output specs
+const zOutputSpec = z.object({
+  index: z.number(),
+  name: z.string(),
+  type: z.string(),
+  is_list: z.boolean(),
+  options: z.array(z.any()).optional(),
+  tooltip: z.string().optional()
+})
+
+// Main node definition schema
+export const zComfyNodeDef = z.object({
+  inputs: z.record(zInputSpec),
+  outputs: z.array(zOutputSpec),
+  hidden: z.record(z.any()).optional(),
+
+  name: z.string(),
+  display_name: z.string(),
+  description: z.string(),
+  help: z.string().optional(),
+  category: z.string(),
+  output_node: z.boolean(),
+  python_module: z.string(),
+  deprecated: z.boolean().optional(),
+  experimental: z.boolean().optional(),
+  api_node: z.boolean().optional()
+})
+
+// Export types
+type IntInputSpec = z.infer<typeof zIntInputSpec>
+type FloatInputSpec = z.infer<typeof zFloatInputSpec>
+type BooleanInputSpec = z.infer<typeof zBooleanInputSpec>
+type StringInputSpec = z.infer<typeof zStringInputSpec>
+export type ComboInputSpec = z.infer<typeof zComboInputSpec>
+export type ColorInputSpec = z.infer<typeof zColorInputSpec>
+export type FileUploadInputSpec = z.infer<typeof zFileUploadInputSpec>
+export type ImageCompareInputSpec = z.infer<typeof zImageCompareInputSpec>
+export type TreeSelectInputSpec = z.infer<typeof zTreeSelectInputSpec>
+export type MultiSelectInputSpec = z.infer<typeof zMultiSelectInputSpec>
+export type ChartInputSpec = z.infer<typeof zChartInputSpec>
+export type GalleriaInputSpec = z.infer<typeof zGalleriaInputSpec>
+export type SelectButtonInputSpec = z.infer<typeof zSelectButtonInputSpec>
+export type TextareaInputSpec = z.infer<typeof zTextareaInputSpec>
+export type CustomInputSpec = z.infer<typeof zCustomInputSpec>
+
+export type InputSpec = z.infer<typeof zInputSpec>
+export type OutputSpec = z.infer<typeof zOutputSpec>
+export type ComfyNodeDef = z.infer<typeof zComfyNodeDef>
+
+export const isIntInputSpec = (
+  inputSpec: InputSpec
+): inputSpec is IntInputSpec => {
+  return inputSpec.type === 'INT'
+}
+
+export const isFloatInputSpec = (
+  inputSpec: InputSpec
+): inputSpec is FloatInputSpec => {
+  return inputSpec.type === 'FLOAT'
+}
+
+export const isBooleanInputSpec = (
+  inputSpec: InputSpec
+): inputSpec is BooleanInputSpec => {
+  return inputSpec.type === 'BOOLEAN'
+}
+
+export const isStringInputSpec = (
+  inputSpec: InputSpec
+): inputSpec is StringInputSpec => {
+  return inputSpec.type === 'STRING'
+}
+
+export const isComboInputSpec = (
+  inputSpec: InputSpec
+): inputSpec is ComboInputSpec => {
+  return inputSpec.type === 'COMBO'
+}
+
+export const isChartInputSpec = (
+  inputSpec: InputSpec
+): inputSpec is ChartInputSpec => {
+  return inputSpec.type === 'CHART'
+}

packages/schemas/src/nodeDefSchema.ts

@@ -0,0 +1,255 @@
+import { z } from 'zod'
+import { fromZodError } from 'zod-validation-error'
+
+import { resultItemType } from '@/schemas/apiSchema'
+
+const zComboOption = z.union([z.string(), z.number()])
+const zRemoteWidgetConfig = z.object({
+  route: z.string().url().or(z.string().startsWith('/')),
+  refresh: z.number().gte(128).safe().or(z.number().lte(0).safe()).optional(),
+  response_key: z.string().optional(),
+  query_params: z.record(z.string(), z.string()).optional(),
+  refresh_button: z.boolean().optional(),
+  control_after_refresh: z.enum(['first', 'last']).optional(),
+  timeout: z.number().gte(0).optional(),
+  max_retries: z.number().gte(0).optional()
+})
+const zMultiSelectOption = z.object({
+  placeholder: z.string().optional(),
+  chip: z.boolean().optional()
+})
+
+export const zBaseInputOptions = z
+  .object({
+    default: z.any().optional(),
+    defaultInput: z.boolean().optional(),
+    forceInput: z.boolean().optional(),
+    tooltip: z.string().optional(),
+    hidden: z.boolean().optional(),
+    advanced: z.boolean().optional(),
+    widgetType: z.string().optional(),
+    /** Backend-only properties. */
+    rawLink: z.boolean().optional(),
+    lazy: z.boolean().optional()
+  })
+  .passthrough()
+
+const zNumericInputOptions = zBaseInputOptions.extend({
+  min: z.number().optional(),
+  max: z.number().optional(),
+  step: z.number().optional(),
+  /** Note: Many node authors are using INT/FLOAT to pass list of INT/FLOAT. */
+  default: z.union([z.number(), z.array(z.number())]).optional(),
+  display: z.enum(['slider', 'number', 'knob']).optional()
+})
+
+export const zIntInputOptions = zNumericInputOptions.extend({
+  /**
+   * If true, a linked widget will be added to the node to select the mode
+   * of `control_after_generate`.
+   */
+  control_after_generate: z.boolean().optional()
+})
+
+export const zFloatInputOptions = zNumericInputOptions.extend({
+  round: z.union([z.number(), z.literal(false)]).optional()
+})
+
+export const zBooleanInputOptions = zBaseInputOptions.extend({
+  label_on: z.string().optional(),
+  label_off: z.string().optional(),
+  default: z.boolean().optional()
+})
+
+export const zStringInputOptions = zBaseInputOptions.extend({
+  default: z.string().optional(),
+  multiline: z.boolean().optional(),
+  dynamicPrompts: z.boolean().optional(),
+
+  // Multiline-only fields
+  defaultVal: z.string().optional(),
+  placeholder: z.string().optional()
+})
+
+export const zComboInputOptions = zBaseInputOptions.extend({
+  control_after_generate: z.boolean().optional(),
+  image_upload: z.boolean().optional(),
+  image_folder: resultItemType.optional(),
+  allow_batch: z.boolean().optional(),
+  video_upload: z.boolean().optional(),
+  audio_upload: z.boolean().optional(),
+  animated_image_upload: z.boolean().optional(),
+  options: z.array(zComboOption).optional(),
+  remote: zRemoteWidgetConfig.optional(),
+  /** Whether the widget is a multi-select widget. */
+  multi_select: zMultiSelectOption.optional()
+})
+
+const zIntInputSpec = z.tuple([z.literal('INT'), zIntInputOptions.optional()])
+const zFloatInputSpec = z.tuple([
+  z.literal('FLOAT'),
+  zFloatInputOptions.optional()
+])
+const zBooleanInputSpec = z.tuple([
+  z.literal('BOOLEAN'),
+  zBooleanInputOptions.optional()
+])
+const zStringInputSpec = z.tuple([
+  z.literal('STRING'),
+  zStringInputOptions.optional()
+])
+/**
+ * Legacy combo syntax.
+ * @deprecated Use `zComboInputSpecV2` instead.
+ */
+const zComboInputSpec = z.tuple([
+  z.array(zComboOption),
+  zComboInputOptions.optional()
+])
+const zComboInputSpecV2 = z.tuple([
+  z.literal('COMBO'),
+  zComboInputOptions.optional()
+])
+
+export function isComboInputSpecV1(
+  inputSpec: InputSpec
+): inputSpec is ComboInputSpec {
+  return Array.isArray(inputSpec[0])
+}
+
+export function isIntInputSpec(
+  inputSpec: InputSpec
+): inputSpec is IntInputSpec {
+  return inputSpec[0] === 'INT'
+}
+
+export function isFloatInputSpec(
+  inputSpec: InputSpec
+): inputSpec is FloatInputSpec {
+  return inputSpec[0] === 'FLOAT'
+}
+
+export function isComboInputSpecV2(
+  inputSpec: InputSpec
+): inputSpec is ComboInputSpecV2 {
+  return inputSpec[0] === 'COMBO'
+}
+
+export function isComboInputSpec(
+  inputSpec: InputSpec
+): inputSpec is ComboInputSpec | ComboInputSpecV2 {
+  return isComboInputSpecV1(inputSpec) || isComboInputSpecV2(inputSpec)
+}
+
+/**
+ * Get the type of an input spec.
+ *
+ * @param inputSpec - The input spec to get the type of.
+ * @returns The type of the input spec.
+ */
+export function getInputSpecType(inputSpec: InputSpec): string {
+  return isComboInputSpec(inputSpec) ? 'COMBO' : inputSpec[0]
+}
+
+/**
+ * Get the combo options from a combo input spec.
+ *
+ * @param inputSpec - The input spec to get the combo options from.
+ * @returns The combo options.
+ */
+export function getComboSpecComboOptions(
+  inputSpec: ComboInputSpec | ComboInputSpecV2
+): (number | string)[] {
+  return (
+    (isComboInputSpecV2(inputSpec) ? inputSpec[1]?.options : inputSpec[0]) ?? []
+  )
+}
+
+const excludedLiterals = new Set(['INT', 'FLOAT', 'BOOLEAN', 'STRING', 'COMBO'])
+const zCustomInputSpec = z.tuple([
+  z.string().refine((value) => !excludedLiterals.has(value)),
+  zBaseInputOptions.optional()
+])
+
+const zInputSpec = z.union([
+  zIntInputSpec,
+  zFloatInputSpec,
+  zBooleanInputSpec,
+  zStringInputSpec,
+  zComboInputSpec,
+  zComboInputSpecV2,
+  zCustomInputSpec
+])
+
+const zComfyInputsSpec = z.object({
+  required: z.record(zInputSpec).optional(),
+  optional: z.record(zInputSpec).optional(),
+  // Frontend repo is not using it, but some custom nodes are using the
+  // hidden field to pass various values.
+  hidden: z.record(z.any()).optional()
+})
+
+const zComfyNodeDataType = z.string()
+const zComfyComboOutput = z.array(zComboOption)
+const zComfyOutputTypesSpec = z.array(
+  z.union([zComfyNodeDataType, zComfyComboOutput])
+)
+
+export const zComfyNodeDef = z.object({
+  input: zComfyInputsSpec.optional(),
+  output: zComfyOutputTypesSpec.optional(),
+  output_is_list: z.array(z.boolean()).optional(),
+  output_name: z.array(z.string()).optional(),
+  output_tooltips: z.array(z.string()).optional(),
+  name: z.string(),
+  display_name: z.string(),
+  description: z.string(),
+  help: z.string().optional(),
+  category: z.string(),
+  output_node: z.boolean(),
+  python_module: z.string(),
+  deprecated: z.boolean().optional(),
+  experimental: z.boolean().optional(),
+  /**
+   * Whether the node is an API node. Running API nodes requires login to
+   * Comfy Org account.
+   * https://docs.comfy.org/tutorials/api-nodes/overview
+   */
+  api_node: z.boolean().optional(),
+  /**
+   * Specifies the order of inputs for each input category.
+   * Used to ensure consistent widget ordering regardless of JSON serialization.
+   * Keys are 'required', 'optional', etc., values are arrays of input names.
+   */
+  input_order: z.record(z.array(z.string())).optional()
+})
+
+// `/object_info`
+export type ComfyInputsSpec = z.infer<typeof zComfyInputsSpec>
+export type ComfyOutputTypesSpec = z.infer<typeof zComfyOutputTypesSpec>
+export type ComfyNodeDef = z.infer<typeof zComfyNodeDef>
+export type RemoteWidgetConfig = z.infer<typeof zRemoteWidgetConfig>
+
+export type ComboInputOptions = z.infer<typeof zComboInputOptions>
+export type NumericInputOptions = z.infer<typeof zNumericInputOptions>
+
+export type IntInputSpec = z.infer<typeof zIntInputSpec>
+export type FloatInputSpec = z.infer<typeof zFloatInputSpec>
+export type ComboInputSpec = z.infer<typeof zComboInputSpec>
+export type ComboInputSpecV2 = z.infer<typeof zComboInputSpecV2>
+export type InputSpec = z.infer<typeof zInputSpec>
+
+export function validateComfyNodeDef(
+  data: any,
+  onError: (error: string) => void = console.warn
+): ComfyNodeDef | null {
+  const result = zComfyNodeDef.safeParse(data)
+  if (!result.success) {
+    const zodError = fromZodError(result.error)
+    onError(
+      `Invalid ComfyNodeDef: ${JSON.stringify(data)}\n${zodError.message}`
+    )
+    return null
+  }
+  return result.data
+}

packages/schemas/src/signInSchema.ts

@@ -0,0 +1,60 @@
+import { z } from 'zod'
+
+import { t } from '@/i18n'
+
+export const apiKeySchema = z.object({
+  apiKey: z
+    .string()
+    .trim()
+    .startsWith('comfyui-', t('validation.prefix', { prefix: 'comfyui-' }))
+    .length(72, t('validation.length', { length: 72 }))
+})
+
+export const signInSchema = z.object({
+  email: z
+    .string()
+    .email(t('validation.invalidEmail'))
+    .min(1, t('validation.required')),
+  password: z.string().min(1, t('validation.required'))
+})
+
+export type SignInData = z.infer<typeof signInSchema>
+
+const passwordSchema = z.object({
+  password: z
+    .string()
+    .min(8, t('validation.minLength', { length: 8 }))
+    .max(32, t('validation.maxLength', { length: 32 }))
+    .regex(/[A-Z]/, t('validation.password.uppercase'))
+    .regex(/[a-z]/, t('validation.password.lowercase'))
+    .regex(/\d/, t('validation.password.number'))
+    .regex(/[^A-Za-z0-9]/, t('validation.password.special')),
+  confirmPassword: z.string().min(1, t('validation.required'))
+})
+
+export const updatePasswordSchema = passwordSchema.refine(
+  (data) => data.password === data.confirmPassword,
+  {
+    message: t('validation.password.match'),
+    path: ['confirmPassword']
+  }
+)
+
+export const signUpSchema = passwordSchema
+  .extend({
+    email: z
+      .string()
+      .email(t('validation.invalidEmail'))
+      .min(1, t('validation.required')),
+    personalDataConsent: z.boolean()
+  })
+  .refine((data) => data.password === data.confirmPassword, {
+    message: t('validation.password.match'),
+    path: ['confirmPassword']
+  })
+  .refine((data) => data.personalDataConsent === true, {
+    message: t('validation.personalDataConsentRequired'),
+    path: ['personalDataConsent']
+  })
+
+export type SignUpData = z.infer<typeof signUpSchema>