[feat] Add automatic keybinding migration from event.key to event.code

- Implement keybindingMigration utility to convert old format to new format
- Add migration logic in registerUserKeybindings() for backward compatibility
- Update tests to use event.code format in KeyboardEvent creation
- Add comprehensive migration test suite
- Automatically migrate user keybindings on first load after update

This ensures existing user custom keybindings continue working after switching
from event.key to event.code for layout-independent shortcut handling.

Relates to #5252

.gitattributes

@@ -12,5 +12,5 @@
 *.yaml text eol=lf
 
 # Generated files
-src/types/comfyRegistryTypes.ts linguist-generated=true
+packages/registry-types/src/comfyRegistryTypes.ts linguist-generated=true
 src/workbench/extensions/manager/types/generatedManagerTypes.ts linguist-generated=true

.github/actions/setup-frontend/action.yml

@@ -0,0 +1,67 @@
+name: Setup Frontend
+description: 'Setup ComfyUI frontend development environment'
+inputs:
+  extra_server_params:
+    description: 'Additional parameters to pass to ComfyUI server'
+    required: false
+    default: ''
+runs:
+  using: 'composite'
+  steps:
+    - name: Checkout ComfyUI
+      uses: actions/checkout@v4
+      with:
+        repository: 'comfyanonymous/ComfyUI'
+        path: 'ComfyUI'
+
+    - name: Checkout ComfyUI_frontend
+      uses: actions/checkout@v4
+      with:
+        repository: 'Comfy-Org/ComfyUI_frontend'
+        path: 'ComfyUI_frontend'
+
+    - name: Copy ComfyUI_devtools from frontend repo
+      shell: bash
+      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
+      with:
+        version: 10
+
+    - name: Setup Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: 'lts/*'
+        cache: 'pnpm'
+        cache-dependency-path: 'ComfyUI_frontend/pnpm-lock.yaml'
+
+    - name: Setup Python
+      uses: actions/setup-python@v4
+      with:
+        python-version: '3.10'
+
+    - name: Install Python requirements
+      shell: bash
+      working-directory: ComfyUI
+      run: |
+        python -m pip install --upgrade pip
+        pip install torch torchvision torchaudio --index-url https://download.pytorch.org/whl/cpu
+        pip install -r requirements.txt
+        pip install wait-for-it
+
+    - name: Build & Install ComfyUI_frontend
+      shell: bash
+      working-directory: ComfyUI_frontend
+      run: |
+        pnpm install --frozen-lockfile
+        pnpm build
+
+    - name: Start ComfyUI server
+      shell: bash
+      working-directory: ComfyUI
+      run: |
+        python main.py --cpu --multi-user --front-end-root ../ComfyUI_frontend/dist ${{ inputs.extra_server_params }} &
+        wait-for-it --service 127.0.0.1:8188 -t 600

.github/actions/setup-playwright/action.yml

@@ -0,0 +1,31 @@
+name: Setup Playwright
+description: Cache and install Playwright browsers with dependencies
+runs:
+  using: composite
+  steps:
+    - name: Detect Playwright version
+      id: detect-version
+      shell: bash
+      working-directory: ComfyUI_frontend
+      run: |
+        PLAYWRIGHT_VERSION=$(pnpm ls @playwright/test --json | jq --raw-output '.[0].devDependencies["@playwright/test"].version')
+        echo "playwright-version=$PLAYWRIGHT_VERSION" >> $GITHUB_OUTPUT
+
+    - name: Cache Playwright Browsers
+      uses: actions/cache@v4
+      id: cache-playwright-browsers
+      with:
+        path: '~/.cache/ms-playwright'
+        key: ${{ runner.os }}-playwright-browsers-${{ steps.detect-version.outputs.playwright-version }}
+
+    - name: Install Playwright Browsers
+      if: steps.cache-playwright-browsers.outputs.cache-hit != 'true'
+      shell: bash
+      run: pnpm exec playwright install chromium --with-deps
+      working-directory: ComfyUI_frontend
+
+    - name: Install Playwright Browsers (operating system dependencies)
+      if: steps.cache-playwright-browsers.outputs.cache-hit == 'true'
+      shell: bash
+      run: pnpm exec playwright install-deps
+      working-directory: ComfyUI_frontend

.github/workflows/auto-backport.yaml

@@ -60,7 +60,7 @@ jobs:
           GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Checkout repository
-        uses: actions/checkout@v4
+        uses: actions/checkout@v5
         with:
           fetch-depth: 0
 

.github/workflows/chromatic.yaml

@@ -1,57 +0,0 @@
-name: 'Chromatic'
-
-# - [Automate Chromatic with GitHub Actions • Chromatic docs]( https://www.chromatic.com/docs/github-actions/ )
-
-on:
-  workflow_dispatch: # Allow manual triggering
-  pull_request:
-    branches: [main]
-
-jobs:
-  chromatic-deployment:
-    runs-on: ubuntu-latest
-    # Only run for PRs from version-bump-* branches or manual triggers
-    if: github.event_name == 'workflow_dispatch' || startsWith(github.head_ref, 'version-bump-')
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0 # Required for Chromatic baseline
-
-      - name: Install pnpm
-        uses: pnpm/action-setup@v4
-        with:
-          version: 10
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: '20'
-          cache: 'pnpm'
-
-
-      - name: Cache tool outputs
-        uses: actions/cache@v4
-        with:
-          path: |
-            .cache
-            storybook-static
-            tsconfig.tsbuildinfo
-          key: storybook-cache-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}-${{ hashFiles('src/**/*.{ts,vue,js}', '*.config.*', '.storybook/**/*') }}
-          restore-keys: |
-            storybook-cache-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}-
-            storybook-cache-${{ runner.os }}-
-            storybook-tools-cache-${{ runner.os }}-
-
-      - name: Install dependencies
-        run: pnpm install --frozen-lockfile
-
-      - name: Build Storybook and run Chromatic
-        id: chromatic
-        uses: chromaui/action@latest
-        with:
-          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
-          buildScriptName: build-storybook
-          autoAcceptChanges: 'main' # Auto-accept changes on main branch
-          exitOnceUploaded: true # Don't wait for UI tests to complete
-

.github/workflows/claude-pr-review.yml

@@ -29,11 +29,9 @@ jobs:
       - name: Check if we should proceed
         id: check-status
         run: |
-          # Get all check runs for this commit
-          CHECK_RUNS=$(gh api repos/${{ github.repository }}/commits/${{ github.event.pull_request.head.sha }}/check-runs --jq '.check_runs[] | select(.name | test("lint-and-format|test|playwright-tests")) | {name, conclusion}')
-          
-          # Check if any required checks failed
-          if echo "$CHECK_RUNS" | grep -q '"conclusion": "failure"'; then
+          CHECK_RUNS=$(gh api repos/${{ github.repository }}/commits/${{ github.event.pull_request.head.sha }}/check-runs --jq '.check_runs[] | select(.name | test("lint-and-format")) | {name, conclusion}')
+
+          if echo "$CHECK_RUNS" | grep -Eq '"conclusion": "(failure|cancelled|timed_out|action_required)"'; then
             echo "Some CI checks failed - skipping Claude review"
             echo "proceed=false" >> $GITHUB_OUTPUT
           else
@@ -50,9 +48,10 @@ jobs:
     timeout-minutes: 30
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v4
+        uses: actions/checkout@v5
         with:
           fetch-depth: 0
+          ref: refs/pull/${{ github.event.pull_request.number }}/head
 
       - name: Install pnpm
         uses: pnpm/action-setup@v4
@@ -86,4 +85,4 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           COMMIT_SHA: ${{ github.event.pull_request.head.sha }}
           BASE_SHA: ${{ github.event.pull_request.base.sha }}
-          REPOSITORY: ${{ github.repository }}
+          REPOSITORY: ${{ github.repository }}

.github/workflows/create-dev-pypi-package.yaml

@@ -15,7 +15,7 @@ jobs:
       version: ${{ steps.current_version.outputs.version }}
     steps:
       - name: Checkout code
-        uses: actions/checkout@v4
+        uses: actions/checkout@v5
       - name: Install pnpm
         uses: pnpm/action-setup@v4
         with:
@@ -62,7 +62,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v4
+        uses: actions/checkout@v5
       - name: Download dist artifact
         uses: actions/download-artifact@v4
         with:

.github/workflows/create-release-branch.yaml

@@ -18,7 +18,7 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v4
+        uses: actions/checkout@v5
         with:
           fetch-depth: 0
           token: ${{ secrets.PR_GH_TOKEN || secrets.GITHUB_TOKEN }}

.github/workflows/devtools-python-check.yaml

@@ -0,0 +1,26 @@
+name: Devtools Python Check
+
+on:
+  pull_request:
+    paths:
+      - 'tools/devtools/**'
+  push:
+    branches: [ main ]
+    paths:
+      - 'tools/devtools/**'
+
+jobs:
+  syntax:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v5
+
+      - name: Set up Python
+        uses: actions/setup-python@v5
+        with:
+          python-version: '3.11'
+
+      - name: Validate Python syntax
+        run: python3 -m compileall -q tools/devtools

.github/workflows/lint-and-format.yaml

@@ -13,11 +13,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout PR
-        uses: actions/checkout@v4
+        uses: actions/checkout@v5
         with:
-          token: ${{ secrets.GITHUB_TOKEN }}
-          ref: ${{ github.event.pull_request.head.ref }}
-          fetch-depth: 0
+          ref: ${{ !github.event.pull_request.head.repo.fork && github.head_ref || github.ref }}
 
       - name: Install pnpm
         uses: pnpm/action-setup@v4
@@ -102,4 +100,4 @@ jobs:
               owner: context.repo.owner,
               repo: context.repo.repo,
               body: '## ⚠️ Linting/Formatting Issues Found\n\nThis PR has linting or formatting issues that need to be fixed.\n\n**Since this PR is from a fork, auto-fix cannot be applied automatically.**\n\n### Option 1: Set up pre-commit hooks (recommended)\nRun this once to automatically format code on every commit:\n```bash\npnpm prepare\n```\n\n### Option 2: Fix manually\nRun these commands and push the changes:\n```bash\npnpm lint:fix\npnpm format\n```\n\nSee [CONTRIBUTING.md](https://github.com/Comfy-Org/ComfyUI_frontend/blob/main/CONTRIBUTING.md#git-pre-commit-hooks) for more details.'
-            })
+            })

.github/workflows/pr-playwright-deploy-forks.yaml

@@ -30,7 +30,7 @@ jobs:
           echo "Is forked: ${{ github.event.workflow_run.head_repository.full_name != github.event.workflow_run.repository.full_name }}"
 
       - name: Checkout repository
-        uses: actions/checkout@v4
+        uses: actions/checkout@v5
 
       - name: Get PR Number
         id: pr

.github/workflows/pr-storybook-comment.yaml

@@ -1,126 +0,0 @@
-name: PR Storybook Comment
-
-on:
-  workflow_run:
-    workflows: ['Chromatic']
-    types: [requested, completed]
-
-jobs:
-  comment-storybook:
-    runs-on: ubuntu-latest
-    if: >-
-      github.repository == 'Comfy-Org/ComfyUI_frontend'
-      && github.event.workflow_run.event == 'pull_request'
-      && startsWith(github.event.workflow_run.head_branch, 'version-bump-')
-    permissions:
-      pull-requests: write
-      actions: read
-    steps:
-      - name: Get PR number
-        id: pr
-        uses: actions/github-script@v7
-        with:
-          script: |
-            const { data: pullRequests } = await github.rest.pulls.list({
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              state: 'open',
-              head: `${context.repo.owner}:${context.payload.workflow_run.head_branch}`,
-            });
-
-            if (pullRequests.length === 0) {
-              console.log('No open PR found for this branch');
-              return null;
-            }
-
-            return pullRequests[0].number;
-
-      - name: Log when no PR found
-        if: steps.pr.outputs.result == 'null'
-        run: |
-          echo "⚠️ No open PR found for branch: ${{ github.event.workflow_run.head_branch }}"
-          echo "Workflow run ID: ${{ github.event.workflow_run.id }}"
-          echo "Repository: ${{ github.event.workflow_run.repository.full_name }}"
-          echo "Event: ${{ github.event.workflow_run.event }}"
-
-      - name: Get workflow run details
-        if: steps.pr.outputs.result != 'null' && github.event.action == 'completed'
-        id: workflow-run
-        uses: actions/github-script@v7
-        with:
-          script: |
-            const run = await github.rest.actions.getWorkflowRun({
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              run_id: context.payload.workflow_run.id,
-            });
-
-            return {
-              conclusion: run.data.conclusion,
-              html_url: run.data.html_url
-            };
-
-      - name: Get completion time
-        id: completion-time
-        run: echo "time=$(date -u '+%m/%d/%Y, %I:%M:%S %p')" >> $GITHUB_OUTPUT
-
-      - name: Comment PR - Storybook Started
-        if: steps.pr.outputs.result != 'null' && github.event.action == 'requested'
-        uses: edumserrano/find-create-or-update-comment@82880b65c8a3a6e4c70aa05a204995b6c9696f53 # v3.0.0
-        with:
-          issue-number: ${{ steps.pr.outputs.result }}
-          body-includes: '<!-- STORYBOOK_BUILD_STATUS -->'
-          comment-author: 'github-actions[bot]'
-          edit-mode: replace
-          body: |
-            <!-- STORYBOOK_BUILD_STATUS -->
-            ## 🎨 Storybook Build Status
-
-            <img alt='comfy-loading-gif' src='https://github.com/user-attachments/assets/755c86ee-e445-4ea8-bc2c-cca85df48686' width='14px' height='14px' style='vertical-align: middle; margin-right: 4px;' /> **Build is starting...** 
-
-            ⏰ Started at: ${{ steps.completion-time.outputs.time }} UTC
-
-            ### 🚀 Building Storybook
-            - 📦 Installing dependencies...
-            - 🔧 Building Storybook components...
-            - 🎨 Running Chromatic visual tests...
-
-            ---
-            ⏱️ Please wait while the Storybook build is in progress...
-
-      - name: Comment PR - Storybook Complete
-        if: steps.pr.outputs.result != 'null' && github.event.action == 'completed'
-        uses: edumserrano/find-create-or-update-comment@82880b65c8a3a6e4c70aa05a204995b6c9696f53 # v3.0.0
-        with:
-          issue-number: ${{ steps.pr.outputs.result }}
-          body-includes: '<!-- STORYBOOK_BUILD_STATUS -->'
-          comment-author: 'github-actions[bot]'
-          edit-mode: replace
-          body: |
-            <!-- STORYBOOK_BUILD_STATUS -->
-            ## 🎨 Storybook Build Status
-
-            ${{
-              fromJSON(steps.workflow-run.outputs.result).conclusion == 'success' && '✅'
-              || fromJSON(steps.workflow-run.outputs.result).conclusion == 'skipped' && '⏭️'
-              || fromJSON(steps.workflow-run.outputs.result).conclusion == 'cancelled' && '🚫'
-              || '❌'
-            }} **${{
-              fromJSON(steps.workflow-run.outputs.result).conclusion == 'success' && 'Build completed successfully!'
-              || fromJSON(steps.workflow-run.outputs.result).conclusion == 'skipped' && 'Build skipped.'
-              || fromJSON(steps.workflow-run.outputs.result).conclusion == 'cancelled' && 'Build cancelled.'
-              || 'Build failed!'
-            }}**
-
-            ⏰ Completed at: ${{ steps.completion-time.outputs.time }} UTC
-
-            ### 🔗 Links
-            - [📊 View Workflow Run](${{ fromJSON(steps.workflow-run.outputs.result).html_url }})
-
-            ---
-            ${{
-              fromJSON(steps.workflow-run.outputs.result).conclusion == 'success' && '🎉 Your Storybook is ready for review!'
-              || fromJSON(steps.workflow-run.outputs.result).conclusion == 'skipped' && 'ℹ️ Chromatic was skipped for this PR.'
-              || fromJSON(steps.workflow-run.outputs.result).conclusion == 'cancelled' && 'ℹ️ The Chromatic run was cancelled.'
-              || '⚠️ Please check the workflow logs for error details.'
-            }}

.github/workflows/pr-storybook-deploy-forks.yaml

@@ -0,0 +1,90 @@
+name: PR Storybook Deploy (Forks)
+
+on:
+  workflow_run:
+    workflows: ['Storybook and Chromatic CI']
+    types: [requested, completed]
+
+env:
+  DATE_FORMAT: '+%m/%d/%Y, %I:%M:%S %p'
+
+jobs:
+  deploy-and-comment-forked-pr:
+    runs-on: ubuntu-latest
+    if: |
+      github.repository == 'Comfy-Org/ComfyUI_frontend' && 
+      github.event.workflow_run.event == 'pull_request' &&
+      github.event.workflow_run.head_repository != null &&
+      github.event.workflow_run.repository != null &&
+      github.event.workflow_run.head_repository.full_name != github.event.workflow_run.repository.full_name
+    permissions:
+      pull-requests: write
+      actions: read
+    steps:
+      - name: Log workflow trigger info
+        run: |
+          echo "Repository: ${{ github.repository }}"
+          echo "Event: ${{ github.event.workflow_run.event }}"
+          echo "Head repo: ${{ github.event.workflow_run.head_repository.full_name || 'null' }}"
+          echo "Base repo: ${{ github.event.workflow_run.repository.full_name || 'null' }}"
+          echo "Is forked: ${{ github.event.workflow_run.head_repository.full_name != github.event.workflow_run.repository.full_name }}"
+
+      - name: Checkout repository
+        uses: actions/checkout@v5
+
+      - name: Get PR Number
+        id: pr
+        uses: actions/github-script@v7
+        with:
+          script: |
+            const { data: prs } = await github.rest.pulls.list({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              state: 'open',
+            });
+            
+            const pr = prs.find(p => p.head.sha === context.payload.workflow_run.head_sha);
+            
+            if (!pr) {
+              console.log('No PR found for SHA:', context.payload.workflow_run.head_sha);
+              return null;
+            }
+            
+            console.log(`Found PR #${pr.number} from fork: ${context.payload.workflow_run.head_repository.full_name}`);
+            return pr.number;
+
+      - name: Handle Storybook Start
+        if: steps.pr.outputs.result != 'null' && github.event.action == 'requested'
+        env:
+          GITHUB_TOKEN: ${{ github.token }}
+        run: |
+          chmod +x scripts/cicd/pr-storybook-deploy-and-comment.sh
+          ./scripts/cicd/pr-storybook-deploy-and-comment.sh \
+            "${{ steps.pr.outputs.result }}" \
+            "${{ github.event.workflow_run.head_branch }}" \
+            "starting" \
+            "$(date -u '${{ env.DATE_FORMAT }}')"
+
+      - name: Download and Deploy Storybook
+        if: steps.pr.outputs.result != 'null' && github.event.action == 'completed' && github.event.workflow_run.conclusion == 'success'
+        uses: actions/download-artifact@v4
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          run-id: ${{ github.event.workflow_run.id }}
+          name: storybook-static
+          path: storybook-static
+          
+      - name: Handle Storybook Completion
+        if: steps.pr.outputs.result != 'null' && github.event.action == 'completed'
+        env:
+          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          GITHUB_TOKEN: ${{ github.token }}
+          WORKFLOW_CONCLUSION: ${{ github.event.workflow_run.conclusion }}
+          WORKFLOW_URL: ${{ github.event.workflow_run.html_url }}
+        run: |
+          chmod +x scripts/cicd/pr-storybook-deploy-and-comment.sh
+          ./scripts/cicd/pr-storybook-deploy-and-comment.sh \
+            "${{ steps.pr.outputs.result }}" \
+            "${{ github.event.workflow_run.head_branch }}" \
+            "completed"

.github/workflows/storybook-and-chromatic-ci.yaml

@@ -0,0 +1,231 @@
+name: Storybook and Chromatic CI
+
+# - [Automate Chromatic with GitHub Actions • Chromatic docs]( https://www.chromatic.com/docs/github-actions/ )
+
+on:
+  workflow_dispatch: # Allow manual triggering
+  pull_request:
+    branches: [main]
+
+jobs:
+  # Post starting comment for non-forked PRs
+  comment-on-pr-start:
+    runs-on: ubuntu-latest
+    if: github.event_name == 'pull_request' && github.event.pull_request.head.repo.fork == false
+    permissions:
+      pull-requests: write
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v5
+        
+      - name: Post starting comment
+        env:
+          GITHUB_TOKEN: ${{ github.token }}
+        run: |
+          chmod +x scripts/cicd/pr-storybook-deploy-and-comment.sh
+          ./scripts/cicd/pr-storybook-deploy-and-comment.sh \
+            "${{ github.event.pull_request.number }}" \
+            "${{ github.head_ref }}" \
+            "starting" \
+            "$(date -u '+%m/%d/%Y, %I:%M:%S %p')"
+
+  # Build Storybook for all PRs (free Cloudflare deployment)
+  storybook-build:
+    runs-on: ubuntu-latest
+    if: github.event_name == 'pull_request'
+    outputs:
+      conclusion: ${{ steps.job-status.outputs.conclusion }}
+      workflow-url: ${{ steps.workflow-url.outputs.url }}
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v5
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'pnpm'
+
+      - name: Cache tool outputs
+        uses: actions/cache@v4
+        with:
+          path: |
+            .cache
+            storybook-static
+            tsconfig.tsbuildinfo
+          key: storybook-cache-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}-${{ hashFiles('src/**/*.{ts,vue,js}', '*.config.*', '.storybook/**/*') }}
+          restore-keys: |
+            storybook-cache-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}-
+            storybook-cache-${{ runner.os }}-
+            storybook-tools-cache-${{ runner.os }}-
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build Storybook
+        run: pnpm build-storybook
+
+      - name: Set job status
+        id: job-status
+        if: always()
+        run: |
+          echo "conclusion=${{ job.status }}" >> $GITHUB_OUTPUT
+
+      - name: Get workflow URL
+        id: workflow-url
+        if: always()
+        run: |
+          echo "url=${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}" >> $GITHUB_OUTPUT
+
+      - name: Upload Storybook build
+        if: success() && github.event.pull_request.head.repo.fork == false
+        uses: actions/upload-artifact@v4
+        with:
+          name: storybook-static
+          path: storybook-static/
+          retention-days: 7
+
+  # Chromatic deployment only for version-bump-* branches or manual triggers
+  chromatic-deployment:
+    runs-on: ubuntu-latest
+    if: github.event_name == 'workflow_dispatch' || (github.event_name == 'pull_request' && startsWith(github.head_ref, 'version-bump-'))
+    outputs:
+      conclusion: ${{ steps.job-status.outputs.conclusion }}
+      workflow-url: ${{ steps.workflow-url.outputs.url }}
+      chromatic-build-url: ${{ steps.chromatic.outputs.buildUrl }}
+      chromatic-storybook-url: ${{ steps.chromatic.outputs.storybookUrl }}
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v5
+        with:
+          fetch-depth: 0 # Required for Chromatic baseline
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'pnpm'
+
+      - name: Cache tool outputs
+        uses: actions/cache@v4
+        with:
+          path: |
+            .cache
+            storybook-static
+            tsconfig.tsbuildinfo
+          key: storybook-cache-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}-${{ hashFiles('src/**/*.{ts,vue,js}', '*.config.*', '.storybook/**/*') }}
+          restore-keys: |
+            storybook-cache-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}-
+            storybook-cache-${{ runner.os }}-
+            storybook-tools-cache-${{ runner.os }}-
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build Storybook and run Chromatic
+        id: chromatic
+        uses: chromaui/action@latest
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          buildScriptName: build-storybook
+          autoAcceptChanges: 'main' # Auto-accept changes on main branch
+          exitOnceUploaded: true # Don't wait for UI tests to complete
+          onlyChanged: true # Only capture changed stories
+
+      - name: Set job status
+        id: job-status
+        if: always()
+        run: |
+          echo "conclusion=${{ job.status }}" >> $GITHUB_OUTPUT
+
+      - name: Get workflow URL
+        id: workflow-url
+        if: always()
+        run: |
+          echo "url=${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}" >> $GITHUB_OUTPUT
+
+  # Deploy and comment for non-forked PRs only
+  deploy-and-comment:
+    needs: [storybook-build]
+    runs-on: ubuntu-latest
+    if: github.event_name == 'pull_request' && github.event.pull_request.head.repo.fork == false && always()
+    permissions:
+      pull-requests: write
+      contents: read
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v5
+        
+      - name: Download Storybook build
+        if: needs.storybook-build.outputs.conclusion == 'success'
+        uses: actions/download-artifact@v4
+        with:
+          name: storybook-static
+          path: storybook-static
+          
+      - name: Make deployment script executable
+        run: chmod +x scripts/cicd/pr-storybook-deploy-and-comment.sh
+        
+      - name: Deploy Storybook and comment on PR
+        env:
+          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          GITHUB_TOKEN: ${{ github.token }}
+          WORKFLOW_CONCLUSION: ${{ needs.storybook-build.outputs.conclusion }}
+          WORKFLOW_URL: ${{ needs.storybook-build.outputs.workflow-url }}
+        run: |
+          ./scripts/cicd/pr-storybook-deploy-and-comment.sh \
+            "${{ github.event.pull_request.number }}" \
+            "${{ github.head_ref }}" \
+            "completed"
+
+  # Update comment with Chromatic URLs for version-bump branches
+  update-comment-with-chromatic:
+    needs: [chromatic-deployment, deploy-and-comment]
+    runs-on: ubuntu-latest
+    if: github.event_name == 'pull_request' && github.event.pull_request.head.repo.fork == false && startsWith(github.head_ref, 'version-bump-') && needs.chromatic-deployment.outputs.chromatic-build-url != ''
+    permissions:
+      pull-requests: write
+    steps:
+      - name: Update comment with Chromatic URLs
+        uses: actions/github-script@v7
+        with:
+          script: |
+            const buildUrl = '${{ needs.chromatic-deployment.outputs.chromatic-build-url }}';
+            const storybookUrl = '${{ needs.chromatic-deployment.outputs.chromatic-storybook-url }}';
+            
+            // Find the existing Storybook comment
+            const { data: comments } = await github.rest.issues.listComments({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              issue_number: ${{ github.event.pull_request.number }}
+            });
+            
+            const storybookComment = comments.find(comment => 
+              comment.body.includes('<!-- STORYBOOK_BUILD_STATUS -->')
+            );
+            
+            if (storybookComment && buildUrl && storybookUrl) {
+              // Append Chromatic info to existing comment
+              const updatedBody = storybookComment.body.replace(
+                /---\n(.*)$/s,
+                `---\n### 🎨 Chromatic Visual Tests\n- 📊 [View Chromatic Build](${buildUrl})\n- 📚 [View Chromatic Storybook](${storybookUrl})\n\n$1`
+              );
+              
+              await github.rest.issues.updateComment({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                comment_id: storybookComment.id,
+                body: updatedBody
+              });
+            }

.github/workflows/tests-ci.yaml

@@ -12,17 +12,16 @@ jobs:
     runs-on: ubuntu-latest
     outputs:
       cache-key: ${{ steps.cache-key.outputs.key }}
-      playwright-version: ${{ steps.playwright-version.outputs.PLAYWRIGHT_VERSION }}
     steps:
       - name: Checkout ComfyUI
-        uses: actions/checkout@v4
+        uses: actions/checkout@v5
         with:
           repository: 'comfyanonymous/ComfyUI'
           path: 'ComfyUI'
           ref: master
 
       - name: Checkout ComfyUI_frontend
-        uses: actions/checkout@v4
+        uses: actions/checkout@v5
         with:
           repository: 'Comfy-Org/ComfyUI_frontend'
           path: 'ComfyUI_frontend'
@@ -65,12 +64,6 @@ jobs:
         id: cache-key
         run: echo "key=$(date +%s)" >> $GITHUB_OUTPUT
 
-      - name: Playwright Version
-        id: playwright-version
-        run:  |
-          PLAYWRIGHT_VERSION=$(pnpm ls @playwright/test --json | jq --raw-output '.[0].devDependencies["@playwright/test"].version')
-          echo "PLAYWRIGHT_VERSION=$PLAYWRIGHT_VERSION" >> $GITHUB_OUTPUT
-        working-directory: ComfyUI_frontend
 
       - name: Save cache
         uses: actions/cache/save@5a3ec84eff668545956fd18022155c47e93e2684
@@ -123,22 +116,8 @@ jobs:
         working-directory: ComfyUI
 
 
-      - name: Cache Playwright Browsers
-        uses: actions/cache@v4
-        id: cache-playwright-browsers
-        with:
-          path: '~/.cache/ms-playwright'
-          key: '${{ runner.os }}-playwright-browsers-${{ needs.setup.outputs.playwright-version }}'
-
-      - name: Install Playwright Browsers
-        if: steps.cache-playwright-browsers.outputs.cache-hit != 'true'
-        run: pnpm exec playwright install chromium --with-deps
-        working-directory: ComfyUI_frontend
-
-      - name: Install Playwright Browsers (operating system dependencies)
-        if: steps.cache-playwright-browsers.outputs.cache-hit == 'true'
-        run: pnpm exec playwright install-deps
-        working-directory: ComfyUI_frontend
+      - name: Setup Playwright
+        uses: ./ComfyUI_frontend/.github/actions/setup-playwright
 
       - name: Start ComfyUI server
         run: |
@@ -202,22 +181,8 @@ jobs:
           pip install wait-for-it
         working-directory: ComfyUI
 
-      - name: Cache Playwright Browsers
-        uses: actions/cache@v4
-        id: cache-playwright-browsers
-        with:
-          path: '~/.cache/ms-playwright'
-          key: '${{ runner.os }}-playwright-browsers-${{ needs.setup.outputs.playwright-version }}'
-
-      - name: Install Playwright Browsers
-        if: steps.cache-playwright-browsers.outputs.cache-hit != 'true'
-        run: pnpm exec playwright install chromium --with-deps
-        working-directory: ComfyUI_frontend
-
-      - name: Install Playwright Browsers (operating system dependencies)
-        if: steps.cache-playwright-browsers.outputs.cache-hit == 'true'
-        run: pnpm exec playwright install-deps
-        working-directory: ComfyUI_frontend
+      - name: Setup Playwright
+        uses: ./ComfyUI_frontend/.github/actions/setup-playwright
 
       - name: Start ComfyUI server
         run: |
@@ -250,7 +215,7 @@ jobs:
     if: ${{ !cancelled() }}
     steps:
       - name: Checkout ComfyUI_frontend
-        uses: actions/checkout@v4
+        uses: actions/checkout@v5
         with:
           repository: 'Comfy-Org/ComfyUI_frontend'
           path: 'ComfyUI_frontend'
@@ -306,7 +271,7 @@ jobs:
       pull-requests: write
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v4
+        uses: actions/checkout@v5
         
       - name: Get start time
         id: start-time
@@ -333,7 +298,7 @@ jobs:
       contents: read
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v4
+        uses: actions/checkout@v5
         
       - name: Download all playwright reports
         uses: actions/download-artifact@v4

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

@@ -16,7 +16,7 @@ jobs:
       pull-requests: write
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v4
+        uses: actions/checkout@v5
 
       - name: Install pnpm
         uses: pnpm/action-setup@v4
@@ -50,7 +50,7 @@ jobs:
             comfy-api-repo-${{ runner.os }}-
 
       - name: Checkout comfy-api repository
-        uses: actions/checkout@v4
+        uses: actions/checkout@v5
         with:
           repository: Comfy-Org/comfy-api
           path: comfy-api
@@ -68,17 +68,18 @@ jobs:
       - name: Generate API types
         run: |
           echo "Generating TypeScript types from comfy-api@${{ steps.api-info.outputs.commit }}..."
-          pnpm dlx openapi-typescript ./comfy-api/openapi.yml --output ./src/types/comfyRegistryTypes.ts
+          mkdir -p ./packages/registry-types/src
+          pnpm dlx openapi-typescript ./comfy-api/openapi.yml --output ./packages/registry-types/src/comfyRegistryTypes.ts
 
       - name: Validate generated types
         run: |
-          if [ ! -f ./src/types/comfyRegistryTypes.ts ]; then
+          if [ ! -f ./packages/registry-types/src/comfyRegistryTypes.ts ]; then
             echo "Error: Types file was not generated."
             exit 1
           fi
 
           # Check if file is not empty
-          if [ ! -s ./src/types/comfyRegistryTypes.ts ]; then
+          if [ ! -s ./packages/registry-types/src/comfyRegistryTypes.ts ]; then
             echo "Error: Generated types file is empty."
             exit 1
           fi
@@ -86,12 +87,12 @@ jobs:
       - name: Lint generated types
         run: |
           echo "Linting generated Comfy Registry API types..."
-          pnpm lint:fix:no-cache -- ./src/types/comfyRegistryTypes.ts
+          pnpm lint:fix:no-cache -- ./packages/registry-types/src/comfyRegistryTypes.ts
 
       - name: Check for changes
         id: check-changes
         run: |
-          if [[ -z $(git status --porcelain ./src/types/comfyRegistryTypes.ts) ]]; then
+          if [[ -z $(git status --porcelain ./packages/registry-types/src/comfyRegistryTypes.ts) ]]; then
             echo "No changes to Comfy Registry API types detected."
             echo "changed=false" >> $GITHUB_OUTPUT
             exit 0
@@ -121,4 +122,4 @@ jobs:
           labels: CNR
           delete-branch: true
           add-paths: |
-            src/types/comfyRegistryTypes.ts
+            packages/registry-types/src/comfyRegistryTypes.ts

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

@@ -17,7 +17,7 @@ jobs:
       pull-requests: write
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v4
+        uses: actions/checkout@v5
 
       - name: Install pnpm
         uses: pnpm/action-setup@v4
@@ -51,7 +51,7 @@ jobs:
             comfyui-manager-repo-${{ runner.os }}-
 
       - name: Checkout ComfyUI-Manager repository
-        uses: actions/checkout@v4
+        uses: actions/checkout@v5
         with:
           repository: Comfy-Org/ComfyUI-Manager
           path: ComfyUI-Manager

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

@@ -12,7 +12,7 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v4
+        uses: actions/checkout@v5
 
       - name: Install pnpm
         uses: pnpm/action-setup@v4

.github/workflows/update-locales-for-given-custom-node-repository.yaml

@@ -22,13 +22,13 @@ jobs:
     runs-on: ubuntu-latest
     steps:
     - name: Checkout ComfyUI
-      uses: actions/checkout@v4
+      uses: actions/checkout@v5
       with:
         repository: comfyanonymous/ComfyUI
         path: ComfyUI
         ref: master
     - name: Checkout ComfyUI_frontend
-      uses: actions/checkout@v4
+      uses: actions/checkout@v5
       with:
         repository: Comfy-Org/ComfyUI_frontend
         path: ComfyUI_frontend
@@ -37,7 +37,7 @@ jobs:
         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
+      uses: actions/checkout@v5
       with:
         repository: ${{ inputs.owner }}/${{ inputs.repository }}
         path: 'ComfyUI/custom_nodes/${{ inputs.repository }}'
@@ -77,9 +77,8 @@ jobs:
         python main.py --cpu --multi-user &
         wait-for-it --service 127.0.0.1:8188 -t 600
       working-directory: ComfyUI
-    - name: Install Playwright Browsers
-      run: pnpm exec playwright install chromium --with-deps
-      working-directory: ComfyUI_frontend
+    - name: Setup Playwright
+      uses: ./ComfyUI_frontend/.github/actions/setup-playwright
     - name: Start dev server
       # Run electron dev server as it is a superset of the web dev server
       # We do want electron specific UIs to be translated.

.github/workflows/update-locales.yaml

@@ -14,7 +14,8 @@ jobs:
     if: github.event_name == 'workflow_dispatch' || (github.event.pull_request.head.repo.full_name == github.repository && startsWith(github.head_ref, 'version-bump-'))
     runs-on: ubuntu-latest
     steps:
-    - uses: Comfy-Org/ComfyUI_frontend_setup_action@v3
+    - name: Setup Frontend
+      uses: ./.github/actions/setup-frontend
     
     - name: Cache tool outputs
       uses: actions/cache@v4
@@ -25,16 +26,8 @@ jobs:
         key: i18n-tools-cache-${{ runner.os }}-${{ hashFiles('ComfyUI_frontend/pnpm-lock.yaml') }}
         restore-keys: |
           i18n-tools-cache-${{ runner.os }}-
-    - name: Cache Playwright browsers
-      uses: actions/cache@v4
-      with:
-        path: ~/.cache/ms-playwright
-        key: playwright-browsers-${{ runner.os }}-${{ hashFiles('ComfyUI_frontend/pnpm-lock.yaml') }}
-        restore-keys: |
-          playwright-browsers-${{ runner.os }}-
-    - name: Install Playwright Browsers
-      run: pnpm exec playwright install chromium --with-deps
-      working-directory: ComfyUI_frontend
+    - name: Setup Playwright
+      uses: ./.github/actions/setup-playwright
     - name: Start dev server
       # Run electron dev server as it is a superset of the web dev server
       # We do want electron specific UIs to be translated.

.github/workflows/update-node-definitions-locales.yaml

@@ -14,9 +14,8 @@ jobs:
     runs-on: ubuntu-latest
     steps:
     - uses: Comfy-Org/ComfyUI_frontend_setup_action@v3
-    - name: Install Playwright Browsers
-      run: pnpm exec playwright install chromium --with-deps
-      working-directory: ComfyUI_frontend
+    - name: Setup Playwright
+      uses: ./.github/actions/setup-playwright
     - name: Start dev server
       # Run electron dev server as it is a superset of the web dev server
       # We do want electron specific UIs to be translated.

.github/workflows/update-playwright-expectations.yaml

@@ -10,17 +10,12 @@ jobs:
     runs-on: ubuntu-latest
     if: github.event.label.name == 'New Browser Test Expectations'
     steps:
-    - uses: Comfy-Org/ComfyUI_frontend_setup_action@v3
-    - name: Cache Playwright browsers
-      uses: actions/cache@v4
-      with:
-        path: ~/.cache/ms-playwright
-        key: playwright-browsers-${{ runner.os }}-${{ hashFiles('ComfyUI_frontend/pnpm-lock.yaml') }}
-        restore-keys: |
-          playwright-browsers-${{ runner.os }}-
-    - name: Install Playwright Browsers
-      run: pnpm exec playwright install chromium --with-deps
-      working-directory: ComfyUI_frontend
+    - name: Checkout workflow repo
+      uses: actions/checkout@v5
+    - name: Setup Frontend
+      uses: ./.github/actions/setup-frontend
+    - name: Setup Playwright
+      uses: ./.github/actions/setup-playwright
     - name: Run Playwright tests and update snapshots
       id: playwright-tests
       run: pnpm exec playwright test --update-snapshots

.github/workflows/validate-json.yaml

@@ -0,0 +1,15 @@
+name: Validate JSON
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+
+jobs:
+  json-lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v5
+      - name: Validate JSON syntax
+        run: ./scripts/cicd/check-json.sh

.github/workflows/version-bump.yaml

@@ -24,7 +24,7 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v4
+        uses: actions/checkout@v5
 
       - name: Install pnpm
         uses: pnpm/action-setup@v4

.github/workflows/vitest-tests.yaml

@@ -11,7 +11,7 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v5
 
     - name: Install pnpm
       uses: pnpm/action-setup@v4

.npmrc

@@ -1 +1,2 @@
 ignore-workspace-root-check=true
+catalog-mode=prefer

.prettierignore

@@ -1,2 +1,2 @@
-src/types/comfyRegistryTypes.ts
-src/types/generatedManagerTypes.ts
+packages/registry-types/src/comfyRegistryTypes.ts
+src/types/generatedManagerTypes.ts

AGENTS.md

@@ -31,10 +31,9 @@
 - Playwright: place tests in `browser_tests/`; optional tags like `@mobile`, `@2x` are respected by config.
 
 ## Commit & Pull Request Guidelines
-- Commits: Prefer Conventional Commits (e.g., `feat(ui): add sidebar`), `refactor(litegraph): …`. Use `[skip ci]` for locale-only updates when appropriate.
-- PRs: Include clear description, linked issues (`Fixes #123`), and screenshots/GIFs for UI changes. Add/adjust tests and i18n strings when applicable.
+- Commits: Use `[skip ci]` for locale-only updates when appropriate.
+- PRs: Include clear description, linked issues (`- Fixes #123`), and screenshots/GIFs for UI changes.
 - Quality gates: `pnpm lint`, `pnpm typecheck`, and relevant tests must pass. Keep PRs focused and small.
 
 ## Security & Configuration Tips
 - Secrets: Use `.env` (see `.env_example`); do not commit secrets.
-- Backend: Dev server expects ComfyUI backend at `localhost:8188` by default; configure via `.env`.

browser_tests/README.md

@@ -16,7 +16,7 @@ Without this flag, parallel tests will conflict and fail randomly.
 
 ### ComfyUI devtools
 
-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 is 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:
@@ -84,7 +84,7 @@ UI mode features:
 - **Console/Network Tabs**: View logs and API calls at each step
 - **Attachments Tab**: View all snapshots with expected and actual images
 
-![Playwright UI Mode](https://github.com/user-attachments/assets/c158c93f-b39a-44c5-a1a1-e0cc975ee9f2)
+![Playwright UI Mode](https://github.com/user-attachments/assets/9b9cb09f-6da7-4fa0-81df-2effceced755)
 
 For CI or headless testing:
 

browser_tests/assets/widgets/all_load_widgets.json

@@ -0,0 +1,221 @@
+{
+  "id": "e74f5af9-b886-4a21-abbf-ed535d12e2fb",
+  "revision": 0,
+  "last_node_id": 8,
+  "last_link_id": 0,
+  "nodes": [
+    {
+      "id": 1,
+      "type": "LoadAudio",
+      "pos": [
+        41.52964782714844,
+        16.930862426757812
+      ],
+      "size": [
+        444,
+        125
+      ],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "AUDIO",
+          "type": "AUDIO",
+          "links": null
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "LoadAudio"
+      },
+      "widgets_values": [
+        null,
+        null,
+        ""
+      ]
+    },
+    {
+      "id": 2,
+      "type": "LoadVideo",
+      "pos": [
+        502.28570556640625,
+        16.857147216796875
+      ],
+      "size": [
+        444,
+        525
+      ],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "VIDEO",
+          "type": "VIDEO",
+          "links": null
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "LoadVideo"
+      },
+      "widgets_values": [
+        null,
+        "image"
+      ]
+    },
+    {
+      "id": 3,
+      "type": "DevToolsLoadAnimatedImageTest",
+      "pos": [
+        41.71427917480469,
+        188.0000457763672
+      ],
+      "size": [
+        444,
+        553
+      ],
+      "flags": {},
+      "order": 2,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "IMAGE",
+          "type": "IMAGE",
+          "links": null
+        },
+        {
+          "name": "MASK",
+          "type": "MASK",
+          "links": null
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "DevToolsLoadAnimatedImageTest"
+      },
+      "widgets_values": [
+        null,
+        "image"
+      ]
+    },
+    {
+      "id": 5,
+      "type": "LoadImage",
+      "pos": [
+        958.285888671875,
+        16.57145118713379
+      ],
+      "size": [
+        444,
+        553
+      ],
+      "flags": {},
+      "order": 3,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "IMAGE",
+          "type": "IMAGE",
+          "links": null
+        },
+        {
+          "name": "MASK",
+          "type": "MASK",
+          "links": null
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "LoadImage"
+      },
+      "widgets_values": [
+        null,
+        "image"
+      ]
+    },
+    {
+      "id": 6,
+      "type": "LoadImageMask",
+      "pos": [
+        503.4285888671875,
+        588
+      ],
+      "size": [
+        444,
+        563
+      ],
+      "flags": {},
+      "order": 4,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "MASK",
+          "type": "MASK",
+          "links": null
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "LoadImageMask"
+      },
+      "widgets_values": [
+        null,
+        "alpha",
+        "image"
+      ]
+    },
+    {
+      "id": 7,
+      "type": "LoadImageOutput",
+      "pos": [
+        965.1429443359375,
+        612
+      ],
+      "size": [
+        444,
+        553
+      ],
+      "flags": {},
+      "order": 5,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "IMAGE",
+          "type": "IMAGE",
+          "links": null
+        },
+        {
+          "name": "MASK",
+          "type": "MASK",
+          "links": null
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "LoadImageOutput"
+      },
+      "widgets_values": [
+        null,
+        false,
+        "refresh",
+        "image"
+      ]
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 1,
+      "offset": [
+        0,
+        0
+      ]
+    },
+    "frontendVersion": "1.28.3"
+  },
+  "version": 0.4
+}

browser_tests/tests/vueNodes/groups/groups.spec.ts

@@ -0,0 +1,33 @@
+import {
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '../../../fixtures/ComfyPage'
+
+const CREATE_GROUP_HOTKEY = 'Control+g'
+
+test.describe('Vue Node Groups', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.vueNodes.waitForNodes()
+  })
+
+  test('should allow creating groups with hotkey', async ({ comfyPage }) => {
+    await comfyPage.page.getByText('Load Checkpoint').click()
+    await comfyPage.page.getByText('KSampler').click({ modifiers: ['Control'] })
+    await comfyPage.page.keyboard.press(CREATE_GROUP_HOTKEY)
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'vue-groups-create-group.png'
+    )
+  })
+
+  test('should allow fitting group to contents', async ({ comfyPage }) => {
+    await comfyPage.setup()
+    await comfyPage.loadWorkflow('groups/oversized_group')
+    await comfyPage.ctrlA()
+    await comfyPage.executeCommand('Comfy.Graph.FitGroupToContents')
+    await comfyPage.nextFrame()
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'vue-groups-fit-to-contents.png'
+    )
+  })
+})

browser_tests/tests/vueNodes/interactions/canvas/pan.spec.ts

@@ -0,0 +1,18 @@
+import {
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '../../../../fixtures/ComfyPage'
+
+test.describe('Vue Nodes Canvas Pan', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.vueNodes.waitForNodes()
+  })
+
+  test('@mobile Can pan with touch', async ({ comfyPage }) => {
+    await comfyPage.panWithTouch({ x: 64, y: 64 }, { x: 256, y: 256 })
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'vue-nodes-paned-with-touch.png'
+    )
+  })
+})

browser_tests/tests/vueNodes/interactions/canvas/zoom.spec.ts

@@ -1,7 +1,7 @@
 import {
   comfyExpect as expect,
   comfyPageFixture as test
-} from '../../../fixtures/ComfyPage'
+} from '../../../../fixtures/ComfyPage'
 
 test.describe('Vue Nodes Zoom', () => {
   test.beforeEach(async ({ comfyPage }) => {

browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts

@@ -0,0 +1,696 @@
+import type { Locator, Page } from '@playwright/test'
+
+import type { NodeId } from '../../../../../src/platform/workflow/validation/schemas/workflowSchema'
+import { getSlotKey } from '../../../../../src/renderer/core/layout/slots/slotIdentifier'
+import {
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '../../../../fixtures/ComfyPage'
+import { getMiddlePoint } from '../../../../fixtures/utils/litegraphUtils'
+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
+  }
+}
+
+async function getInputLinkDetails(
+  page: Page,
+  nodeId: NodeId,
+  slotIndex: number
+) {
+  return await page.evaluate(
+    ([targetNodeId, targetSlot]) => {
+      const app = window['app']
+      const graph = app?.canvas?.graph ?? app?.graph
+      if (!graph) return null
+
+      const node = graph.getNodeById(targetNodeId)
+      if (!node) return null
+
+      const input = node.inputs?.[targetSlot]
+      if (!input) return null
+
+      const linkId = input.link
+      if (linkId == null) return null
+
+      const link = graph.getLink?.(linkId)
+      if (!link) return null
+
+      return {
+        id: link.id,
+        originId: link.origin_id,
+        originSlot:
+          typeof link.origin_slot === 'string'
+            ? Number.parseInt(link.origin_slot, 10)
+            : link.origin_slot,
+        targetId: link.target_id,
+        targetSlot:
+          typeof link.target_slot === 'string'
+            ? Number.parseInt(link.target_slot, 10)
+            : link.target_slot,
+        parentId: link.parentId ?? null
+      }
+    },
+    [nodeId, slotIndex] as const
+  )
+}
+
+// Test helpers to reduce repetition across cases
+function slotLocator(
+  page: Page,
+  nodeId: NodeId,
+  slotIndex: number,
+  isInput: boolean
+) {
+  const key = getSlotKey(String(nodeId), slotIndex, isInput)
+  return page.locator(`[data-slot-key="${key}"]`)
+}
+
+async function expectVisibleAll(...locators: Locator[]) {
+  await Promise.all(locators.map((l) => expect(l).toBeVisible()))
+}
+
+async function getSlotCenter(
+  page: Page,
+  nodeId: NodeId,
+  slotIndex: number,
+  isInput: boolean
+) {
+  const locator = slotLocator(page, nodeId, slotIndex, isInput)
+  await expect(locator).toBeVisible()
+  return await getCenter(locator)
+}
+
+async function connectSlots(
+  page: Page,
+  from: { nodeId: NodeId; index: number },
+  to: { nodeId: NodeId; index: number },
+  nextFrame: () => Promise<void>
+) {
+  const fromLoc = slotLocator(page, from.nodeId, from.index, false)
+  const toLoc = slotLocator(page, to.nodeId, to.index, true)
+  await expectVisibleAll(fromLoc, toLoc)
+  await fromLoc.dragTo(toLoc)
+  await nextFrame()
+}
+
+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 samplerNode = (await comfyPage.getNodeRefsByType('KSampler'))[0]
+    expect(samplerNode).toBeTruthy()
+
+    const slot = slotLocator(comfyPage.page, samplerNode.id, 0, false)
+    await expect(slot).toBeVisible()
+
+    const start = await getCenter(slot)
+
+    // 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 samplerNode = (await comfyPage.getNodeRefsByType('KSampler'))[0]
+    const vaeNode = (await comfyPage.getNodeRefsByType('VAEDecode'))[0]
+    expect(samplerNode && vaeNode).toBeTruthy()
+
+    const samplerOutput = await samplerNode.getOutput(0)
+    const vaeInput = await vaeNode.getInput(0)
+
+    await connectSlots(
+      comfyPage.page,
+      { nodeId: samplerNode.id, index: 0 },
+      { nodeId: vaeNode.id, index: 0 },
+      () => comfyPage.nextFrame()
+    )
+
+    expect(await samplerOutput.getLinkCount()).toBe(1)
+    expect(await vaeInput.getLinkCount()).toBe(1)
+
+    const linkDetails = await getInputLinkDetails(comfyPage.page, vaeNode.id, 0)
+    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 samplerNode = (await comfyPage.getNodeRefsByType('KSampler'))[0]
+    const clipNode = (await comfyPage.getNodeRefsByType('CLIPTextEncode'))[0]
+    expect(samplerNode && clipNode).toBeTruthy()
+
+    const samplerOutput = await samplerNode.getOutput(0)
+    const clipInput = await clipNode.getInput(0)
+
+    const outputSlot = slotLocator(comfyPage.page, samplerNode.id, 0, false)
+    const inputSlot = slotLocator(comfyPage.page, clipNode.id, 0, true)
+    await expectVisibleAll(outputSlot, inputSlot)
+
+    await outputSlot.dragTo(inputSlot)
+    await comfyPage.nextFrame()
+
+    expect(await samplerOutput.getLinkCount()).toBe(0)
+    expect(await clipInput.getLinkCount()).toBe(0)
+
+    const graphLinkDetails = await getInputLinkDetails(
+      comfyPage.page,
+      clipNode.id,
+      0
+    )
+    expect(graphLinkDetails).toBeNull()
+  })
+
+  test('should not create a link when dropping onto a slot on the same node', async ({
+    comfyPage
+  }) => {
+    const samplerNode = (await comfyPage.getNodeRefsByType('KSampler'))[0]
+    expect(samplerNode).toBeTruthy()
+
+    const samplerOutput = await samplerNode.getOutput(0)
+    const samplerInput = await samplerNode.getInput(3)
+
+    const outputSlot = slotLocator(comfyPage.page, samplerNode.id, 0, false)
+    const inputSlot = slotLocator(comfyPage.page, samplerNode.id, 3, true)
+    await expectVisibleAll(outputSlot, inputSlot)
+
+    await outputSlot.dragTo(inputSlot)
+    await comfyPage.nextFrame()
+
+    expect(await samplerOutput.getLinkCount()).toBe(0)
+    expect(await samplerInput.getLinkCount()).toBe(0)
+  })
+
+  test('should reuse the existing origin when dragging an input link', async ({
+    comfyPage,
+    comfyMouse
+  }) => {
+    const samplerNode = (await comfyPage.getNodeRefsByType('KSampler'))[0]
+    const vaeNode = (await comfyPage.getNodeRefsByType('VAEDecode'))[0]
+    expect(samplerNode && vaeNode).toBeTruthy()
+    const samplerOutputCenter = await getSlotCenter(
+      comfyPage.page,
+      samplerNode.id,
+      0,
+      false
+    )
+    const vaeInputCenter = await getSlotCenter(
+      comfyPage.page,
+      vaeNode.id,
+      0,
+      true
+    )
+
+    await comfyMouse.move(samplerOutputCenter)
+    await comfyMouse.drag(vaeInputCenter)
+    await comfyMouse.drop()
+
+    const dragTarget = {
+      x: vaeInputCenter.x + 160,
+      y: vaeInputCenter.y - 100
+    }
+
+    await comfyMouse.move(vaeInputCenter)
+    await comfyMouse.drag(dragTarget)
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'vue-node-input-drag-reuses-origin.png'
+    )
+    await comfyMouse.drop()
+  })
+
+  test('ctrl+alt drag from an input starts a fresh link', async ({
+    comfyPage,
+    comfyMouse
+  }) => {
+    const samplerNode = (await comfyPage.getNodeRefsByType('KSampler'))[0]
+    const vaeNode = (await comfyPage.getNodeRefsByType('VAEDecode'))[0]
+    expect(samplerNode && vaeNode).toBeTruthy()
+
+    const samplerOutput = await samplerNode.getOutput(0)
+    const vaeInput = await vaeNode.getInput(0)
+
+    const samplerOutputCenter = await getSlotCenter(
+      comfyPage.page,
+      samplerNode.id,
+      0,
+      false
+    )
+    const vaeInputCenter = await getSlotCenter(
+      comfyPage.page,
+      vaeNode.id,
+      0,
+      true
+    )
+
+    await comfyMouse.move(samplerOutputCenter)
+    await comfyMouse.drag(vaeInputCenter)
+    await comfyMouse.drop()
+
+    await comfyPage.nextFrame()
+
+    const dragTarget = {
+      x: vaeInputCenter.x + 140,
+      y: vaeInputCenter.y - 110
+    }
+
+    await comfyMouse.move(vaeInputCenter)
+    await comfyPage.page.keyboard.down('Control')
+    await comfyPage.page.keyboard.down('Alt')
+
+    try {
+      await comfyMouse.drag(dragTarget)
+      await expect(comfyPage.canvas).toHaveScreenshot(
+        'vue-node-input-drag-ctrl-alt.png'
+      )
+    } finally {
+      await comfyMouse.drop().catch(() => {})
+      await comfyPage.page.keyboard.up('Alt').catch(() => {})
+      await comfyPage.page.keyboard.up('Control').catch(() => {})
+    }
+
+    await comfyPage.nextFrame()
+
+    // Tcehnically intended to disconnect existing as well
+    expect(await vaeInput.getLinkCount()).toBe(0)
+    expect(await samplerOutput.getLinkCount()).toBe(0)
+  })
+
+  test('dropping an input link back on its slot restores the original connection', async ({
+    comfyPage,
+    comfyMouse
+  }) => {
+    const samplerNode = (await comfyPage.getNodeRefsByType('KSampler'))[0]
+    const vaeNode = (await comfyPage.getNodeRefsByType('VAEDecode'))[0]
+    expect(samplerNode && vaeNode).toBeTruthy()
+
+    const samplerOutput = await samplerNode.getOutput(0)
+    const vaeInput = await vaeNode.getInput(0)
+
+    const samplerOutputCenter = await getSlotCenter(
+      comfyPage.page,
+      samplerNode.id,
+      0,
+      false
+    )
+    const vaeInputCenter = await getSlotCenter(
+      comfyPage.page,
+      vaeNode.id,
+      0,
+      true
+    )
+
+    await comfyMouse.move(samplerOutputCenter)
+    try {
+      await comfyMouse.drag(vaeInputCenter)
+    } finally {
+      await comfyMouse.drop()
+    }
+
+    await comfyPage.nextFrame()
+
+    const originalLink = await getInputLinkDetails(
+      comfyPage.page,
+      vaeNode.id,
+      0
+    )
+    expect(originalLink).not.toBeNull()
+
+    const dragTarget = {
+      x: vaeInputCenter.x + 150,
+      y: vaeInputCenter.y - 100
+    }
+
+    // To prevent needing a screenshot expectation for whether the link's off
+    const vaeInputLocator = slotLocator(comfyPage.page, vaeNode.id, 0, true)
+    const inputBox = await vaeInputLocator.boundingBox()
+    if (!inputBox) throw new Error('Input slot bounding box not available')
+    const isOutsideX =
+      dragTarget.x < inputBox.x || dragTarget.x > inputBox.x + inputBox.width
+    const isOutsideY =
+      dragTarget.y < inputBox.y || dragTarget.y > inputBox.y + inputBox.height
+    expect(isOutsideX || isOutsideY).toBe(true)
+
+    await comfyMouse.move(vaeInputCenter)
+    await comfyMouse.drag(dragTarget)
+    await comfyMouse.move(vaeInputCenter)
+    await comfyMouse.drop()
+
+    await comfyPage.nextFrame()
+
+    const restoredLink = await getInputLinkDetails(
+      comfyPage.page,
+      vaeNode.id,
+      0
+    )
+
+    expect(restoredLink).not.toBeNull()
+    if (!restoredLink || !originalLink) {
+      throw new Error('Expected both original and restored links to exist')
+    }
+    expect(restoredLink).toMatchObject({
+      originId: originalLink.originId,
+      originSlot: originalLink.originSlot,
+      targetId: originalLink.targetId,
+      targetSlot: originalLink.targetSlot,
+      parentId: originalLink.parentId
+    })
+    expect(await samplerOutput.getLinkCount()).toBe(1)
+    expect(await vaeInput.getLinkCount()).toBe(1)
+  })
+
+  test('rerouted input drag preview remains anchored to reroute', async ({
+    comfyPage,
+    comfyMouse
+  }) => {
+    const samplerNode = (await comfyPage.getNodeRefsByType('KSampler'))[0]
+    const vaeNode = (await comfyPage.getNodeRefsByType('VAEDecode'))[0]
+
+    const samplerOutput = await samplerNode.getOutput(0)
+    const vaeInput = await vaeNode.getInput(0)
+
+    await connectSlots(
+      comfyPage.page,
+      { nodeId: samplerNode.id, index: 0 },
+      { nodeId: vaeNode.id, index: 0 },
+      () => comfyPage.nextFrame()
+    )
+
+    const outputPosition = await samplerOutput.getPosition()
+    const inputPosition = await vaeInput.getPosition()
+    const reroutePoint = getMiddlePoint(outputPosition, inputPosition)
+
+    // Insert a reroute programmatically on the existing link between sampler output[0] and VAE input[0].
+    // This avoids relying on an exact path hit-test position.
+    await comfyPage.page.evaluate(
+      ([targetNodeId, targetSlot, clientPoint]) => {
+        const app = (window as any)['app']
+        const graph = app?.canvas?.graph ?? app?.graph
+        if (!graph) throw new Error('Graph not available')
+        const node = graph.getNodeById(targetNodeId)
+        if (!node) throw new Error('Target node not found')
+        const input = node.inputs?.[targetSlot]
+        if (!input) throw new Error('Target input slot not found')
+
+        const linkId = input.link
+        if (linkId == null) throw new Error('Expected existing link on input')
+        const link = graph.getLink(linkId)
+        if (!link) throw new Error('Link not found')
+
+        // Convert the client/canvas pixel coordinates to graph space
+        const pos = app.canvas.ds.convertCanvasToOffset([
+          clientPoint.x,
+          clientPoint.y
+        ])
+        graph.createReroute(pos, link)
+      },
+      [vaeNode.id, 0, reroutePoint] as const
+    )
+
+    await comfyPage.nextFrame()
+
+    const vaeInputCenter = await getSlotCenter(
+      comfyPage.page,
+      vaeNode.id,
+      0,
+      true
+    )
+    const dragTarget = {
+      x: vaeInputCenter.x + 160,
+      y: vaeInputCenter.y - 120
+    }
+
+    let dropped = false
+    try {
+      await comfyMouse.move(vaeInputCenter)
+      await comfyMouse.drag(dragTarget)
+      await expect(comfyPage.canvas).toHaveScreenshot(
+        'vue-node-reroute-input-drag.png'
+      )
+      await comfyMouse.move(vaeInputCenter)
+      await comfyMouse.drop()
+      dropped = true
+    } finally {
+      if (!dropped) {
+        await comfyMouse.drop().catch(() => {})
+      }
+    }
+
+    await comfyPage.nextFrame()
+
+    const linkDetails = await getInputLinkDetails(comfyPage.page, vaeNode.id, 0)
+    expect(linkDetails).not.toBeNull()
+    expect(linkDetails?.originId).toBe(samplerNode.id)
+    expect(linkDetails?.parentId).not.toBeNull()
+  })
+
+  test('rerouted output shift-drag preview remains anchored to reroute', async ({
+    comfyPage,
+    comfyMouse
+  }) => {
+    const samplerNode = (await comfyPage.getNodeRefsByType('KSampler'))[0]
+    const vaeNode = (await comfyPage.getNodeRefsByType('VAEDecode'))[0]
+    expect(samplerNode && vaeNode).toBeTruthy()
+
+    const samplerOutput = await samplerNode.getOutput(0)
+    const vaeInput = await vaeNode.getInput(0)
+
+    await connectSlots(
+      comfyPage.page,
+      { nodeId: samplerNode.id, index: 0 },
+      { nodeId: vaeNode.id, index: 0 },
+      () => comfyPage.nextFrame()
+    )
+
+    const outputPosition = await samplerOutput.getPosition()
+    const inputPosition = await vaeInput.getPosition()
+    const reroutePoint = getMiddlePoint(outputPosition, inputPosition)
+
+    // Insert a reroute programmatically on the existing link between sampler output[0] and VAE input[0].
+    // This avoids relying on an exact path hit-test position.
+    await comfyPage.page.evaluate(
+      ([targetNodeId, targetSlot, clientPoint]) => {
+        const app = (window as any)['app']
+        const graph = app?.canvas?.graph ?? app?.graph
+        if (!graph) throw new Error('Graph not available')
+        const node = graph.getNodeById(targetNodeId)
+        if (!node) throw new Error('Target node not found')
+        const input = node.inputs?.[targetSlot]
+        if (!input) throw new Error('Target input slot not found')
+
+        const linkId = input.link
+        if (linkId == null) throw new Error('Expected existing link on input')
+        const link = graph.getLink(linkId)
+        if (!link) throw new Error('Link not found')
+
+        // Convert the client/canvas pixel coordinates to graph space
+        const pos = app.canvas.ds.convertCanvasToOffset([
+          clientPoint.x,
+          clientPoint.y
+        ])
+        graph.createReroute(pos, link)
+      },
+      [vaeNode.id, 0, reroutePoint] as const
+    )
+
+    await comfyPage.nextFrame()
+
+    const outputCenter = await getSlotCenter(
+      comfyPage.page,
+      samplerNode.id,
+      0,
+      false
+    )
+    const dragTarget = {
+      x: outputCenter.x + 150,
+      y: outputCenter.y - 140
+    }
+
+    let dropPending = false
+    let shiftHeld = false
+    try {
+      await comfyMouse.move(outputCenter)
+      await comfyPage.page.keyboard.down('Shift')
+      shiftHeld = true
+      dropPending = true
+      await comfyMouse.drag(dragTarget)
+      await expect(comfyPage.canvas).toHaveScreenshot(
+        'vue-node-reroute-output-shift-drag.png'
+      )
+      await comfyMouse.move(outputCenter)
+      await comfyMouse.drop()
+      dropPending = false
+    } finally {
+      if (dropPending) await comfyMouse.drop().catch(() => {})
+      if (shiftHeld) await comfyPage.page.keyboard.up('Shift').catch(() => {})
+    }
+
+    await comfyPage.nextFrame()
+
+    const linkDetails = await getInputLinkDetails(comfyPage.page, vaeNode.id, 0)
+    expect(linkDetails).not.toBeNull()
+    expect(linkDetails?.originId).toBe(samplerNode.id)
+    expect(linkDetails?.parentId).not.toBeNull()
+  })
+
+  test('dragging input to input drags existing link', async ({
+    comfyPage,
+    comfyMouse
+  }) => {
+    const clipNode = (await comfyPage.getNodeRefsByType('CLIPTextEncode'))[0]
+    const samplerNode = (await comfyPage.getNodeRefsByType('KSampler'))[0]
+    expect(clipNode && samplerNode).toBeTruthy()
+
+    // Step 1: Connect CLIP's only output (index 0) to KSampler's second input (index 1)
+    await connectSlots(
+      comfyPage.page,
+      { nodeId: clipNode.id, index: 0 },
+      { nodeId: samplerNode.id, index: 1 },
+      () => comfyPage.nextFrame()
+    )
+
+    // Verify initial link exists between CLIP -> KSampler input[1]
+    const initialLink = await getInputLinkDetails(
+      comfyPage.page,
+      samplerNode.id,
+      1
+    )
+    expect(initialLink).not.toBeNull()
+    expect(initialLink).toMatchObject({
+      originId: clipNode.id,
+      targetId: samplerNode.id,
+      targetSlot: 1
+    })
+
+    // Step 2: Drag from KSampler's second input to its third input (index 2)
+    const input2Center = await getSlotCenter(
+      comfyPage.page,
+      samplerNode.id,
+      1,
+      true
+    )
+    const input3Center = await getSlotCenter(
+      comfyPage.page,
+      samplerNode.id,
+      2,
+      true
+    )
+
+    await comfyMouse.move(input2Center)
+    await comfyMouse.drag(input3Center)
+    await comfyMouse.drop()
+    await comfyPage.nextFrame()
+
+    // Expect old link removed from input[1]
+    const afterSecondInput = await getInputLinkDetails(
+      comfyPage.page,
+      samplerNode.id,
+      1
+    )
+    expect(afterSecondInput).toBeNull()
+
+    // Expect new link exists at input[2] from CLIP
+    const afterThirdInput = await getInputLinkDetails(
+      comfyPage.page,
+      samplerNode.id,
+      2
+    )
+    expect(afterThirdInput).not.toBeNull()
+    expect(afterThirdInput).toMatchObject({
+      originId: clipNode.id,
+      targetId: samplerNode.id,
+      targetSlot: 2
+    })
+  })
+
+  test('shift-dragging an output with multiple links should drag all links', async ({
+    comfyPage,
+    comfyMouse
+  }) => {
+    const clipNode = (await comfyPage.getNodeRefsByType('CLIPTextEncode'))[0]
+    const samplerNode = (await comfyPage.getNodeRefsByType('KSampler'))[0]
+    expect(clipNode && samplerNode).toBeTruthy()
+
+    const clipOutput = await clipNode.getOutput(0)
+
+    // Connect output[0] -> inputs[1] and [2]
+    await connectSlots(
+      comfyPage.page,
+      { nodeId: clipNode.id, index: 0 },
+      { nodeId: samplerNode.id, index: 1 },
+      () => comfyPage.nextFrame()
+    )
+    await connectSlots(
+      comfyPage.page,
+      { nodeId: clipNode.id, index: 0 },
+      { nodeId: samplerNode.id, index: 2 },
+      () => comfyPage.nextFrame()
+    )
+
+    expect(await clipOutput.getLinkCount()).toBe(2)
+
+    const outputCenter = await getSlotCenter(
+      comfyPage.page,
+      clipNode.id,
+      0,
+      false
+    )
+    const dragTarget = {
+      x: outputCenter.x + 40,
+      y: outputCenter.y - 140
+    }
+
+    let dropPending = false
+    let shiftHeld = false
+    try {
+      await comfyMouse.move(outputCenter)
+      await comfyPage.page.keyboard.down('Shift')
+      shiftHeld = true
+      await comfyMouse.drag(dragTarget)
+      dropPending = true
+
+      await expect(comfyPage.canvas).toHaveScreenshot(
+        'vue-node-shift-output-multi-link.png'
+      )
+    } finally {
+      if (dropPending) await comfyMouse.drop().catch(() => {})
+      if (shiftHeld) await comfyPage.page.keyboard.up('Shift').catch(() => {})
+    }
+  })
+})

browser_tests/tests/vueNodes/interactions/node/remove.spec.ts

@@ -1,6 +1,6 @@
 import { expect } from '@playwright/test'
 
-import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
+import { comfyPageFixture as test } from '../../../../fixtures/ComfyPage'
 
 test.beforeEach(async ({ comfyPage }) => {
   await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')

browser_tests/tests/vueNodes/interactions/node/rename.spec.ts

@@ -0,0 +1,76 @@
+import {
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '../../../../fixtures/ComfyPage'
+import { VueNodeFixture } from '../../../../fixtures/utils/vueNodeFixtures'
+
+test.describe('Vue Nodes Renaming', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.Graph.CanvasMenu', false)
+    await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.setup()
+  })
+
+  test('should display node title', async ({ comfyPage }) => {
+    // Get the KSampler node from the default workflow
+    const nodes = await comfyPage.getNodeRefsByType('KSampler')
+    expect(nodes.length).toBeGreaterThanOrEqual(1)
+
+    const node = nodes[0]
+    const vueNode = new VueNodeFixture(node, comfyPage.page)
+
+    const title = await vueNode.getTitle()
+    expect(title).toBe('KSampler')
+
+    // Verify title is visible in the header
+    const header = await vueNode.getHeader()
+    await expect(header).toContainText('KSampler')
+  })
+
+  test('should allow title renaming by double clicking on the node header', async ({
+    comfyPage
+  }) => {
+    const nodes = await comfyPage.getNodeRefsByType('KSampler')
+    const node = nodes[0]
+    const vueNode = new VueNodeFixture(node, comfyPage.page)
+
+    // Test renaming with Enter
+    await vueNode.setTitle('My Custom Sampler')
+    const newTitle = await vueNode.getTitle()
+    expect(newTitle).toBe('My Custom Sampler')
+
+    // Verify the title is displayed
+    const header = await vueNode.getHeader()
+    await expect(header).toContainText('My Custom Sampler')
+
+    // Test cancel with Escape
+    const titleElement = await vueNode.getTitleElement()
+    await titleElement.dblclick()
+    await comfyPage.nextFrame()
+
+    // Type a different value but cancel
+    const input = (await vueNode.getHeader()).locator(
+      '[data-testid="node-title-input"]'
+    )
+    await input.fill('This Should Be Cancelled')
+    await input.press('Escape')
+    await comfyPage.nextFrame()
+
+    // Title should remain as the previously saved value
+    const titleAfterCancel = await vueNode.getTitle()
+    expect(titleAfterCancel).toBe('My Custom Sampler')
+  })
+
+  test('Double click node body does not trigger edit', async ({
+    comfyPage
+  }) => {
+    const loadCheckpointNode =
+      comfyPage.vueNodes.getNodeByTitle('Load Checkpoint')
+    const nodeBbox = await loadCheckpointNode.boundingBox()
+    if (!nodeBbox) throw new Error('Node not found')
+    await loadCheckpointNode.dblclick()
+
+    const editingTitleInput = comfyPage.page.getByTestId('node-title-input')
+    await expect(editingTitleInput).not.toBeVisible()
+  })
+})

browser_tests/tests/vueNodes/interactions/node/select.spec.ts

@@ -1,7 +1,7 @@
 import {
   comfyExpect as expect,
   comfyPageFixture as test
-} from '../../../fixtures/ComfyPage'
+} from '../../../../fixtures/ComfyPage'
 
 test.beforeEach(async ({ comfyPage }) => {
   await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
@@ -15,7 +15,8 @@ test.describe('Vue Node Selection', () => {
 
   const modifiers = [
     { key: 'Control', name: 'ctrl' },
-    { key: 'Shift', name: 'shift' }
+    { key: 'Shift', name: 'shift' },
+    { key: 'Meta', name: 'meta' }
   ] as const
 
   for (const { key: modifier, name } of modifiers) {

browser_tests/tests/vueNodes/linkInteraction.spec.ts

@@ -1,221 +0,0 @@
-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/nodeStates/collapse.spec.ts

@@ -1,80 +1,20 @@
 import {
   comfyExpect as expect,
   comfyPageFixture as test
-} from '../../fixtures/ComfyPage'
-import { VueNodeFixture } from '../../fixtures/utils/vueNodeFixtures'
+} from '../../../fixtures/ComfyPage'
+import { VueNodeFixture } from '../../../fixtures/utils/vueNodeFixtures'
 
-test.describe('NodeHeader', () => {
+test.describe('Vue Node Collapse', () => {
   test.beforeEach(async ({ comfyPage }) => {
-    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)
     await comfyPage.setup()
   })
 
-  test('displays node title', async ({ comfyPage }) => {
-    // Get the KSampler node from the default workflow
-    const nodes = await comfyPage.getNodeRefsByType('KSampler')
-    expect(nodes.length).toBeGreaterThanOrEqual(1)
-
-    const node = nodes[0]
-    const vueNode = new VueNodeFixture(node, comfyPage.page)
-
-    const title = await vueNode.getTitle()
-    expect(title).toBe('KSampler')
-
-    // Verify title is visible in the header
-    const header = await vueNode.getHeader()
-    await expect(header).toContainText('KSampler')
-  })
-
-  test('allows title renaming', async ({ comfyPage }) => {
-    const nodes = await comfyPage.getNodeRefsByType('KSampler')
-    const node = nodes[0]
-    const vueNode = new VueNodeFixture(node, comfyPage.page)
-
-    // Test renaming with Enter
-    await vueNode.setTitle('My Custom Sampler')
-    const newTitle = await vueNode.getTitle()
-    expect(newTitle).toBe('My Custom Sampler')
-
-    // Verify the title is displayed
-    const header = await vueNode.getHeader()
-    await expect(header).toContainText('My Custom Sampler')
-
-    // Test cancel with Escape
-    const titleElement = await vueNode.getTitleElement()
-    await titleElement.dblclick()
-    await comfyPage.nextFrame()
-
-    // Type a different value but cancel
-    const input = (await vueNode.getHeader()).locator(
-      '[data-testid="node-title-input"]'
-    )
-    await input.fill('This Should Be Cancelled')
-    await input.press('Escape')
-    await comfyPage.nextFrame()
-
-    // Title should remain as the previously saved value
-    const titleAfterCancel = await vueNode.getTitle()
-    expect(titleAfterCancel).toBe('My Custom Sampler')
-  })
-
-  test('Double click node body does not trigger edit', async ({
+  test('should allow collapsing node with collapse icon', async ({
     comfyPage
   }) => {
-    const loadCheckpointNode =
-      comfyPage.vueNodes.getNodeByTitle('Load Checkpoint')
-    const nodeBbox = await loadCheckpointNode.boundingBox()
-    if (!nodeBbox) throw new Error('Node not found')
-    await loadCheckpointNode.dblclick()
-
-    const editingTitleInput = comfyPage.page.getByTestId('node-title-input')
-    await expect(editingTitleInput).not.toBeVisible()
-  })
-
-  test('handles node collapsing', async ({ comfyPage }) => {
     // Get the KSampler node from the default workflow
     const nodes = await comfyPage.getNodeRefsByType('KSampler')
     const node = nodes[0]
@@ -103,7 +43,7 @@ test.describe('NodeHeader', () => {
     expect(expandedSize.height).toBeGreaterThanOrEqual(collapsedSize.height)
   })
 
-  test('shows collapse/expand icon state', async ({ comfyPage }) => {
+  test('should show collapse/expand icon state', async ({ comfyPage }) => {
     const nodes = await comfyPage.getNodeRefsByType('KSampler')
     const node = nodes[0]
     const vueNode = new VueNodeFixture(node, comfyPage.page)
@@ -123,7 +63,9 @@ test.describe('NodeHeader', () => {
     expect(iconClass).toContain('pi-chevron-down')
   })
 
-  test('preserves title when collapsing/expanding', async ({ comfyPage }) => {
+  test('should preserve title when collapsing/expanding', async ({
+    comfyPage
+  }) => {
     const nodes = await comfyPage.getNodeRefsByType('KSampler')
     const node = nodes[0]
     const vueNode = new VueNodeFixture(node, comfyPage.page)

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

@@ -0,0 +1,49 @@
+import {
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '../../../fixtures/ComfyPage'
+
+test.describe('Vue Node Custom Colors', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
+    await comfyPage.setSetting('Comfy.Canvas.SelectionToolbox', true)
+    await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.vueNodes.waitForNodes()
+  })
+
+  test('displays color picker button and allows color selection', async ({
+    comfyPage
+  }) => {
+    const loadCheckpointNode = comfyPage.page.locator('[data-node-id]').filter({
+      hasText: 'Load Checkpoint'
+    })
+    await loadCheckpointNode.getByText('Load Checkpoint').click()
+
+    await comfyPage.page.locator('.selection-toolbox .pi-circle-fill').click()
+    await comfyPage.page
+      .locator('.color-picker-container')
+      .locator('i[data-testid="blue"]')
+      .click()
+
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'vue-node-custom-color-blue.png'
+    )
+  })
+
+  test('should load node colors from workflow', async ({ comfyPage }) => {
+    await comfyPage.loadWorkflow('nodes/every_node_color')
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'vue-node-custom-colors-dark-all-colors.png'
+    )
+  })
+
+  test('should show brightened node colors on light theme', async ({
+    comfyPage
+  }) => {
+    await comfyPage.setSetting('Comfy.ColorPalette', 'light')
+    await comfyPage.loadWorkflow('nodes/every_node_color')
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'vue-node-custom-colors-light-all-colors.png'
+    )
+  })
+})

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

@@ -1,6 +1,6 @@
 import { expect } from '@playwright/test'
 
-import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
+import { comfyPageFixture as test } from '../../../fixtures/ComfyPage'
 
 test.beforeEach(async ({ comfyPage }) => {
   await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')

browser_tests/tests/vueNodes/widgets/load/uploadWidgets.spec.ts

@@ -0,0 +1,21 @@
+import {
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '../../../../fixtures/ComfyPage'
+
+test.describe('Vue Upload Widgets', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.vueNodes.waitForNodes()
+  })
+
+  test('should hide canvas-only upload buttons', async ({ comfyPage }) => {
+    await comfyPage.setup()
+    await comfyPage.loadWorkflow('widgets/all_load_widgets')
+    await comfyPage.vueNodes.waitForNodes()
+
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'vue-nodes-upload-widgets.png'
+    )
+  })
+})

eslint.config.ts

@@ -18,7 +18,7 @@ export default defineConfig([
       'src/scripts/*',
       'src/extensions/core/*',
       'src/types/vue-shim.d.ts',
-      'src/types/comfyRegistryTypes.ts',
+      'packages/registry-types/src/comfyRegistryTypes.ts',
       'src/types/generatedManagerTypes.ts',
       '**/vite.config.*.timestamp*',
       '**/vitest.config.*.timestamp*'
@@ -90,6 +90,7 @@ export default defineConfig([
         }
       ],
       'unused-imports/no-unused-imports': 'error',
+      'no-console': ['error', { allow: ['warn', 'error'] }],
       'vue/no-v-html': 'off',
       // Enforce dark-theme: instead of dark: prefix
       'vue/no-restricted-class': ['error', '/^dark:/'],
@@ -207,5 +208,11 @@ export default defineConfig([
         }
       ]
     }
+  },
+  {
+    files: ['**/*.{test,spec,stories}.ts', '**/*.stories.vue'],
+    rules: {
+      'no-console': 'off'
+    }
   }
 ])

knip.config.ts

@@ -18,8 +18,12 @@ const config: KnipConfig = {
     'packages/design-system': {
       entry: ['src/**/*.ts'],
       project: ['src/**/*.{js,ts}', '*.{js,ts,mts}']
+    },
+    'packages/registry-types': {
+      project: ['src/**/*.{js,ts}']
     }
   },
+  ignoreBinaries: ['python3'],
   ignoreDependencies: [
     // Weird importmap things
     '@iconify/json',
@@ -33,7 +37,7 @@ const config: KnipConfig = {
   ignore: [
     // Auto generated manager types
     'src/workbench/extensions/manager/types/generatedManagerTypes.ts',
-    'src/types/comfyRegistryTypes.ts',
+    'packages/registry-types/src/comfyRegistryTypes.ts',
     // Used by a custom node (that should move off of this)
     'src/scripts/ui/components/splitButton.ts'
   ],

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comfyorg/comfyui-frontend",
   "private": true,
-  "version": "1.28.3",
+  "version": "1.28.4",
   "type": "module",
   "repository": "https://github.com/Comfy-Org/ComfyUI_frontend",
   "homepage": "https://comfy.org",
@@ -38,84 +38,86 @@
     "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"
+    "build-storybook": "storybook build",
+    "devtools:pycheck": "python3 -m compileall -q tools/devtools"
   },
   "devDependencies": {
-    "@eslint/js": "^9.35.0",
-    "@intlify/eslint-plugin-vue-i18n": "^4.1.0",
-    "@lobehub/i18n-cli": "^1.25.1",
-    "@nx/eslint": "21.4.1",
-    "@nx/playwright": "21.4.1",
-    "@nx/storybook": "21.4.1",
-    "@nx/vite": "21.4.1",
-    "@pinia/testing": "^0.1.5",
-    "@playwright/test": "^1.52.0",
-    "@storybook/addon-docs": "^9.1.1",
-    "@storybook/vue3": "^9.1.1",
-    "@storybook/vue3-vite": "^9.1.1",
-    "@tailwindcss/vite": "^4.1.12",
-    "@trivago/prettier-plugin-sort-imports": "^5.2.0",
-    "@types/fs-extra": "^11.0.4",
-    "@types/jsdom": "^21.1.7",
-    "@types/node": "^20.14.8",
-    "@types/semver": "^7.7.0",
-    "@types/three": "^0.169.0",
-    "@vitejs/plugin-vue": "^5.1.4",
-    "@vitest/coverage-v8": "^3.2.4",
-    "@vitest/ui": "^3.0.0",
-    "@vue/test-utils": "^2.4.6",
-    "eslint": "^9.34.0",
-    "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-prettier": "^5.5.4",
-    "eslint-plugin-storybook": "^9.1.6",
-    "eslint-plugin-unused-imports": "^4.2.0",
-    "eslint-plugin-vue": "^10.4.0",
+    "@eslint/js": "catalog:",
+    "@intlify/eslint-plugin-vue-i18n": "catalog:",
+    "@lobehub/i18n-cli": "catalog:",
+    "@nx/eslint": "catalog:",
+    "@nx/playwright": "catalog:",
+    "@nx/storybook": "catalog:",
+    "@nx/vite": "catalog:",
+    "@pinia/testing": "catalog:",
+    "@playwright/test": "catalog:",
+    "@storybook/addon-docs": "catalog:",
+    "@storybook/vue3": "catalog:",
+    "@storybook/vue3-vite": "catalog:",
+    "@tailwindcss/vite": "catalog:",
+    "@trivago/prettier-plugin-sort-imports": "catalog:",
+    "@types/fs-extra": "catalog:",
+    "@types/jsdom": "catalog:",
+    "@types/node": "catalog:",
+    "@types/semver": "catalog:",
+    "@types/three": "catalog:",
+    "@vitejs/plugin-vue": "catalog:",
+    "@vitest/coverage-v8": "catalog:",
+    "@vitest/ui": "catalog:",
+    "@vue/test-utils": "catalog:",
+    "eslint": "catalog:",
+    "eslint-config-prettier": "catalog:",
+    "eslint-plugin-prettier": "catalog:",
+    "eslint-plugin-storybook": "catalog:",
+    "eslint-plugin-unused-imports": "catalog:",
+    "eslint-plugin-vue": "catalog:",
     "fs-extra": "^11.2.0",
-    "globals": "^15.9.0",
-    "happy-dom": "^15.11.0",
-    "husky": "^9.0.11",
-    "jiti": "2.4.2",
-    "jsdom": "^26.1.0",
-    "knip": "^5.62.0",
-    "lint-staged": "^15.2.7",
-    "nx": "21.4.1",
-    "prettier": "^3.3.2",
-    "storybook": "^9.1.6",
-    "tailwindcss": "^4.1.12",
-    "tailwindcss-primeui": "^0.6.1",
-    "tsx": "^4.15.6",
-    "tw-animate-css": "^1.3.8",
-    "typescript": "^5.4.5",
-    "typescript-eslint": "^8.44.0",
-    "unplugin-icons": "^0.22.0",
-    "unplugin-vue-components": "^0.28.0",
+    "globals": "catalog:",
+    "happy-dom": "catalog:",
+    "husky": "catalog:",
+    "jiti": "catalog:",
+    "jsdom": "catalog:",
+    "knip": "catalog:",
+    "lint-staged": "catalog:",
+    "nx": "catalog:",
+    "prettier": "catalog:",
+    "storybook": "catalog:",
+    "tailwindcss": "catalog:",
+    "tailwindcss-primeui": "catalog:",
+    "tsx": "catalog:",
+    "tw-animate-css": "catalog:",
+    "typescript": "catalog:",
+    "typescript-eslint": "catalog:",
+    "unplugin-icons": "catalog:",
+    "unplugin-vue-components": "catalog:",
     "uuid": "^11.1.0",
-    "vite": "^5.4.19",
-    "vite-plugin-dts": "^4.5.4",
-    "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",
+    "vite": "catalog:",
+    "vite-plugin-dts": "catalog:",
+    "vite-plugin-html": "catalog:",
+    "vite-plugin-vue-devtools": "catalog:",
+    "vitest": "catalog:",
+    "vue-component-type-helpers": "catalog:",
+    "vue-eslint-parser": "catalog:",
+    "vue-tsc": "catalog:",
     "zip-dir": "^2.0.0",
-    "zod-to-json-schema": "^3.24.1"
+    "zod-to-json-schema": "catalog:"
   },
   "dependencies": {
-    "@alloc/quick-lru": "^5.2.0",
+    "@alloc/quick-lru": "catalog:",
     "@atlaskit/pragmatic-drag-and-drop": "^1.3.1",
     "@comfyorg/comfyui-electron-types": "0.4.73-0",
     "@comfyorg/design-system": "workspace:*",
+    "@comfyorg/registry-types": "workspace:*",
     "@comfyorg/tailwind-utils": "workspace:*",
-    "@iconify/json": "^2.2.380",
-    "@primeuix/forms": "0.0.2",
-    "@primeuix/styled": "0.3.2",
-    "@primeuix/utils": "^0.3.2",
-    "@primevue/core": "^4.2.5",
-    "@primevue/forms": "^4.2.5",
-    "@primevue/icons": "4.2.5",
-    "@primevue/themes": "^4.2.5",
-    "@sentry/vue": "^8.48.0",
+    "@iconify/json": "catalog:",
+    "@primeuix/forms": "catalog:",
+    "@primeuix/styled": "catalog:",
+    "@primeuix/utils": "catalog:",
+    "@primevue/core": "catalog:",
+    "@primevue/forms": "catalog:",
+    "@primevue/icons": "catalog:",
+    "@primevue/themes": "catalog:",
+    "@sentry/vue": "catalog:",
     "@tiptap/core": "^2.10.4",
     "@tiptap/extension-link": "^2.10.4",
     "@tiptap/extension-table": "^2.10.4",
@@ -123,39 +125,39 @@
     "@tiptap/extension-table-header": "^2.10.4",
     "@tiptap/extension-table-row": "^2.10.4",
     "@tiptap/starter-kit": "^2.10.4",
-    "@vueuse/core": "^11.0.0",
-    "@vueuse/integrations": "^13.9.0",
+    "@vueuse/core": "catalog:",
+    "@vueuse/integrations": "catalog:",
     "@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",
+    "algoliasearch": "catalog:",
+    "axios": "catalog:",
     "chart.js": "^4.5.0",
     "dompurify": "^3.2.5",
-    "dotenv": "^16.4.5",
+    "dotenv": "catalog:",
     "es-toolkit": "^1.39.9",
     "extendable-media-recorder": "^9.2.27",
     "extendable-media-recorder-wav-encoder": "^7.0.129",
     "fast-glob": "^3.3.3",
-    "firebase": "^11.6.0",
+    "firebase": "catalog:",
     "fuse.js": "^7.0.0",
     "glob": "^11.0.3",
     "jsondiffpatch": "^0.6.0",
     "loglevel": "^1.9.2",
     "marked": "^15.0.11",
-    "pinia": "^2.1.7",
-    "primeicons": "^7.0.0",
-    "primevue": "^4.2.5",
+    "pinia": "catalog:",
+    "primeicons": "catalog:",
+    "primevue": "catalog:",
     "reka-ui": "^2.5.0",
     "semver": "^7.7.2",
     "three": "^0.170.0",
     "tiptap-markdown": "^0.8.10",
-    "vue": "^3.5.13",
-    "vue-i18n": "^9.14.3",
-    "vue-router": "^4.4.3",
-    "vuefire": "^3.2.1",
-    "yjs": "^13.6.27",
-    "zod": "^3.23.8",
-    "zod-validation-error": "^3.3.0"
+    "vue": "catalog:",
+    "vue-i18n": "catalog:",
+    "vue-router": "catalog:",
+    "vuefire": "catalog:",
+    "yjs": "catalog:",
+    "zod": "catalog:",
+    "zod-validation-error": "catalog:"
   }
 }

packages/design-system/package.json

@@ -4,10 +4,7 @@
   "description": "Shared design system for ComfyUI Frontend",
   "type": "module",
   "exports": {
-    "./tailwind-config": {
-      "import": "./tailwind.config.ts",
-      "types": "./tailwind.config.ts"
-    },
+    "./tailwind-config": "./tailwind.config.ts",
     "./css/*": "./src/css/*"
   },
   "scripts": {
@@ -20,12 +17,12 @@
     ]
   },
   "dependencies": {
-    "@iconify-json/lucide": "^1.1.178",
-    "@iconify/tailwind": "^1.1.3"
+    "@iconify-json/lucide": "catalog:",
+    "@iconify/tailwind": "catalog:"
   },
   "devDependencies": {
-    "tailwindcss": "^3.4.17",
-    "typescript": "^5.4.5"
+    "tailwindcss": "catalog:",
+    "typescript": "catalog:"
   },
   "packageManager": "pnpm@10.17.1"
 }

packages/design-system/src/css/style.css

@@ -152,7 +152,7 @@
   }
 }
 
-/* Everthing below here to be cleaned up over time. */
+/* Everything below here to be cleaned up over time. */
 
 body {
   width: 100vw;

packages/registry-types/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "@comfyorg/registry-types",
+  "version": "1.0.0",
+  "description": "Comfy Registry API TypeScript types",
+  "packageManager": "pnpm@10.17.1",
+  "type": "module",
+  "exports": {
+    ".": "./src/comfyRegistryTypes.ts"
+  },
+  "nx": {
+    "tags": [
+      "scope:shared",
+      "type:types"
+    ]
+  }
+}

packages/registry-types/tsconfig.json

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

packages/shared-frontend-utils/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@comfyorg/shared-frontend-utils",
+  "private": true,
+  "version": "1.0.0",
+  "description": "Shared frontend utils for ComfyUI Frontend",
+  "scripts": {
+    "typecheck": "tsc --noEmit"
+  },
+  "keywords": [],
+  "packageManager": "pnpm@10.17.1",
+  "type": "module",
+  "exports": {
+    "./formatUtil": "./src/formatUtil.ts",
+    "./networkUtil": "./src/networkUtil.ts"
+  },
+  "dependencies": {
+    "axios": "catalog:"
+  },
+  "devDependencies": {
+    "typescript": "catalog:"
+  }
+}

packages/shared-frontend-utils/src/formatUtil.ts

@@ -1,5 +1,4 @@
-import type { ResultItem } from '@/schemas/apiSchema'
-import type { operations } from '@/types/comfyRegistryTypes'
+import type { operations } from '@comfyorg/registry-types'
 
 export function formatCamelCase(str: string): string {
   // Check if the string is camel case
@@ -194,27 +193,6 @@ export function isValidUrl(url: string): boolean {
     return false
   }
 }
-const hasAnnotation = (filepath: string): boolean =>
-  /\[(input|output|temp)\]/i.test(filepath)
-
-const createAnnotation = (filepath: string, rootFolder = 'input'): string =>
-  !hasAnnotation(filepath) && rootFolder !== 'input' ? ` [${rootFolder}]` : ''
-
-const createPath = (filename: string, subfolder = ''): string =>
-  subfolder ? `${subfolder}/${filename}` : filename
-
-/** Creates annotated filepath in format used by folder_paths.py */
-export function createAnnotatedPath(
-  item: string | ResultItem,
-  options: { rootFolder?: string; subfolder?: string } = {}
-): string {
-  const { rootFolder = 'input', subfolder } = options
-  if (typeof item === 'string')
-    return `${createPath(item, subfolder)}${createAnnotation(item, rootFolder)}`
-  return `${createPath(item.filename ?? '', item.subfolder)}${
-    item.type ? createAnnotation(item.type, rootFolder) : ''
-  }`
-}
 
 /**
  * Parses a filepath into its filename and subfolder components.

packages/shared-frontend-utils/src/networkUtil.ts

@@ -1,8 +1,5 @@
 import axios from 'axios'
 
-import { electronAPI } from './envUtil'
-import { isValidUrl } from './formatUtil'
-
 const VALID_STATUS_CODES = [200, 201, 301, 302, 307, 308]
 export const checkUrlReachable = async (url: string): Promise<boolean> => {
   try {
@@ -14,17 +11,6 @@ export const checkUrlReachable = async (url: string): Promise<boolean> => {
   }
 }
 
-/**
- * Check if a mirror is reachable from the electron App.
- * @param mirror - The mirror to check.
- * @returns True if the mirror is reachable, false otherwise.
- */
-export const checkMirrorReachable = async (mirror: string) => {
-  return (
-    isValidUrl(mirror) && (await electronAPI().NetWork.canAccessUrl(mirror))
-  )
-}
-
 /**
  * Checks if the user is likely in mainland China by:
  * 1. Checking navigator.language

packages/shared-frontend-utils/tsconfig.json

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

packages/tailwind-utils/package.json

@@ -6,10 +6,7 @@
   "main": "./src/index.ts",
   "types": "./src/index.ts",
   "exports": {
-    ".": {
-      "import": "./src/index.ts",
-      "types": "./src/index.ts"
-    }
+    ".": "./src/index.ts"
   },
   "scripts": {
     "typecheck": "tsc --noEmit"
@@ -25,6 +22,6 @@
     "tailwind-merge": "^2.2.0"
   },
   "devDependencies": {
-    "typescript": "^5.4.5"
+    "typescript": "catalog:"
   }
-}
+}

pnpm-workspace.yaml

@@ -2,6 +2,115 @@ packages:
   - apps/**
   - packages/**
 
+catalog:
+  # Core frameworks
+  typescript: ^5.9.2
+  vue: ^3.5.13
+
+  # Build tools
+  '@nx/eslint': 21.4.1
+  '@nx/playwright': 21.4.1
+  '@nx/storybook': 21.4.1
+  '@nx/vite': 21.4.1
+  nx: 21.4.1
+  tsx: ^4.15.6
+  vite: ^5.4.19
+  '@vitejs/plugin-vue': ^5.1.4
+  'vite-plugin-dts': ^4.5.4
+  vue-tsc: ^3.0.7
+
+  # Testing
+  'happy-dom': ^15.11.0
+  jsdom: ^26.1.0
+  '@pinia/testing': ^0.1.5
+  '@playwright/test': ^1.52.0
+  '@vitest/coverage-v8': ^3.2.4
+  '@vitest/ui': ^3.0.0
+  vitest: ^3.2.4
+  '@vue/test-utils': ^2.4.6
+
+  # Linting & Formatting
+  '@eslint/js': ^9.35.0
+  eslint: ^9.34.0
+  'eslint-config-prettier': ^10.1.8
+  'eslint-plugin-prettier': ^5.5.4
+  'eslint-plugin-storybook': ^9.1.6
+  'eslint-plugin-unused-imports': ^4.2.0
+  'eslint-plugin-vue': ^10.4.0
+  globals: ^15.9.0
+  '@intlify/eslint-plugin-vue-i18n': ^4.1.0
+  prettier: ^3.3.2
+  'typescript-eslint': ^8.44.0
+  'vue-eslint-parser': ^10.2.0
+
+  # Vue ecosystem
+  '@sentry/vue': ^8.48.0
+  '@vueuse/core': ^11.0.0
+  '@vueuse/integrations': ^13.9.0
+  'vite-plugin-html': ^3.2.2
+  'vite-plugin-vue-devtools': ^7.7.6
+  pinia: ^2.1.7
+  'vue-i18n': ^9.14.3
+  'vue-router': ^4.4.3
+  vuefire: ^3.2.1
+
+  # PrimeVue UI framework
+  '@primeuix/forms': 0.0.2
+  '@primeuix/styled': 0.3.2
+  '@primeuix/utils': ^0.3.2
+  '@primevue/core': ^4.2.5
+  '@primevue/forms': ^4.2.5
+  '@primevue/icons': 4.2.5
+  '@primevue/themes': ^4.2.5
+  primeicons: ^7.0.0
+  primevue: ^4.2.5
+
+  # Tailwind CSS and design
+  '@iconify/json': ^2.2.380
+  '@iconify-json/lucide': ^1.1.178
+  '@iconify/tailwind': ^1.1.3
+  '@tailwindcss/vite': ^4.1.12
+  tailwindcss: ^4.1.12
+  'tailwindcss-primeui': ^0.6.1
+  'tw-animate-css': ^1.3.8
+  'unplugin-icons': ^0.22.0
+  'unplugin-vue-components': ^0.28.0
+
+  # Storybook
+  '@storybook/addon-docs': ^9.1.1
+  storybook: ^9.1.6
+  '@storybook/vue3': ^9.1.1
+  '@storybook/vue3-vite': ^9.1.1
+
+  # Data and validation
+  algoliasearch: ^5.21.0
+  axios: ^1.8.2
+  firebase: ^11.6.0
+  yjs: ^13.6.27
+  zod: ^3.23.8
+  'zod-validation-error': ^3.3.0
+
+  # Dev tools
+  dotenv: ^16.4.5
+  husky: ^9.0.11
+  jiti: 2.4.2
+  knip: ^5.62.0
+  'lint-staged': ^15.2.7
+
+  # Type definitions
+  '@types/fs-extra': ^11.0.4
+  '@types/jsdom': ^21.1.7
+  '@types/node': ^20.14.8
+  '@types/semver': ^7.7.0
+  '@types/three': ^0.169.0
+  'vue-component-type-helpers': ^3.0.7
+  'zod-to-json-schema': ^3.24.1
+
+  # i18n
+  '@alloc/quick-lru': ^5.2.0
+  '@lobehub/i18n-cli': ^1.25.1
+  '@trivago/prettier-plugin-sort-imports': ^5.2.0
+
 ignoredBuiltDependencies:
   - '@firebase/util'
   - protobufjs

scripts/cicd/check-json.sh

@@ -0,0 +1,77 @@
+#!/bin/bash
+set -euo pipefail
+
+usage() {
+  echo "Usage: $0 [--debug]" >&2
+}
+
+debug=0
+
+while [ "$#" -gt 0 ]; do
+  case "$1" in
+    --debug)
+      debug=1
+      ;;
+    -h|--help)
+      usage
+      exit 0
+      ;;
+    *)
+      echo "Unknown option: $1" >&2
+      usage
+      exit 2
+      ;;
+  esac
+  shift
+done
+
+# Validate JSON syntax in tracked files using jq
+if ! command -v jq >/dev/null 2>&1; then
+  echo "Error: jq is required but not installed" >&2
+  exit 127
+fi
+
+EXCLUDE_PATTERNS=(
+  '**/tsconfig*.json'
+)
+
+if [ -n "${JSON_LINT_EXCLUDES:-}" ]; then
+  # shellcheck disable=SC2206
+  EXCLUDE_PATTERNS+=( ${JSON_LINT_EXCLUDES} )
+fi
+
+pathspecs=(-- '*.json')
+for pattern in "${EXCLUDE_PATTERNS[@]}"; do
+  if [[ ${pattern:0:1} == ':' ]]; then
+    pathspecs+=("$pattern")
+  else
+    pathspecs+=(":(glob,exclude)${pattern}")
+  fi
+done
+
+mapfile -t json_files < <(git ls-files "${pathspecs[@]}")
+
+if [ "${#json_files[@]}" -eq 0 ]; then
+  echo 'No JSON files found.'
+  exit 0
+fi
+
+if [ "$debug" -eq 1 ]; then
+  echo 'JSON files to validate:'
+  printf '  %s\n' "${json_files[@]}"
+fi
+
+failed=0
+for file in "${json_files[@]}"; do
+  if ! jq -e . "$file" >/dev/null; then
+    echo "Invalid JSON syntax: $file" >&2
+    failed=1
+  fi
+done
+
+if [ "$failed" -ne 0 ]; then
+  echo 'JSON validation failed.' >&2
+  exit 1
+fi
+
+echo 'All JSON files are valid.'

scripts/cicd/pr-storybook-deploy-and-comment.sh

@@ -0,0 +1,247 @@
+#!/bin/bash
+set -e
+
+# Deploy Storybook to Cloudflare Pages and comment on PR
+# Usage: ./pr-storybook-deploy-and-comment.sh <pr_number> <branch_name> <status> [start_time]
+
+# Input validation
+# Validate PR number is numeric
+case "$1" in
+    ''|*[!0-9]*) 
+        echo "Error: PR_NUMBER must be numeric" >&2
+        exit 1
+        ;;
+esac
+PR_NUMBER="$1"
+
+# Sanitize and validate branch name (allow alphanumeric, dots, dashes, underscores, slashes)
+BRANCH_NAME=$(echo "$2" | sed 's/[^a-zA-Z0-9._/-]//g')
+if [ -z "$BRANCH_NAME" ]; then
+    echo "Error: Invalid or empty branch name" >&2
+    exit 1
+fi
+
+# Validate status parameter
+STATUS="${3:-completed}"
+case "$STATUS" in
+    starting|completed) ;;
+    *) 
+        echo "Error: STATUS must be 'starting' or 'completed'" >&2
+        exit 1
+        ;;
+esac
+
+START_TIME="${4:-$(date -u '+%m/%d/%Y, %I:%M:%S %p')}"
+
+# Required environment variables
+: "${GITHUB_TOKEN:?GITHUB_TOKEN is required}"
+: "${GITHUB_REPOSITORY:?GITHUB_REPOSITORY is required}"
+
+# Cloudflare variables only required for deployment
+if [ "$STATUS" = "completed" ]; then
+    : "${CLOUDFLARE_API_TOKEN:?CLOUDFLARE_API_TOKEN is required for deployment}"
+    : "${CLOUDFLARE_ACCOUNT_ID:?CLOUDFLARE_ACCOUNT_ID is required for deployment}"
+fi
+
+# Configuration
+COMMENT_MARKER="<!-- STORYBOOK_BUILD_STATUS -->"
+
+# Install wrangler if not available (output to stderr for debugging)
+if ! command -v wrangler > /dev/null 2>&1; then
+    echo "Installing wrangler v4..." >&2
+    npm install -g wrangler@^4.0.0 >&2 || {
+        echo "Failed to install wrangler" >&2
+        echo "failed"
+        return
+    }
+fi
+
+# Deploy Storybook report, WARN: ensure inputs are sanitized before calling this function
+deploy_storybook() {
+    dir="$1"
+    branch="$2"
+    
+    [ ! -d "$dir" ] && echo "failed" && return
+    
+    project="comfy-storybook"
+    
+    echo "Deploying Storybook to project $project on branch $branch..." >&2
+    
+    # Try deployment up to 3 times
+    i=1
+    while [ $i -le 3 ]; do
+        echo "Deployment attempt $i of 3..." >&2
+        # Branch is already sanitized, use it directly
+        if output=$(wrangler pages deploy "$dir" \
+            --project-name="$project" \
+            --branch="$branch" 2>&1); then
+            
+            # Extract URL from output (improved regex for valid URL characters)
+            url=$(echo "$output" | grep -oE 'https://[a-zA-Z0-9.-]+\.pages\.dev\S*' | head -1)
+            result="${url:-https://${branch}.${project}.pages.dev}"
+            echo "Success! URL: $result" >&2
+            echo "$result"  # Only this goes to stdout for capture
+            return
+        else
+            echo "Deployment failed on attempt $i: $output" >&2
+        fi
+        [ $i -lt 3 ] && sleep 10
+        i=$((i + 1))
+    done
+    
+    echo "failed"
+}
+
+# Post or update GitHub comment
+post_comment() {
+    body="$1"
+    temp_file=$(mktemp)
+    echo "$body" > "$temp_file"
+    
+    if command -v gh > /dev/null 2>&1; then
+        # Find existing comment ID
+        existing=$(gh api "repos/$GITHUB_REPOSITORY/issues/$PR_NUMBER/comments" \
+            --jq ".[] | select(.body | contains(\"$COMMENT_MARKER\")) | .id" | head -1)
+        
+        if [ -n "$existing" ]; then
+            # Update specific comment by ID
+            gh api --method PATCH "repos/$GITHUB_REPOSITORY/issues/comments/$existing" \
+                --field body="$(cat "$temp_file")"
+        else
+            gh pr comment "$PR_NUMBER" --body-file "$temp_file"
+        fi
+    else
+        echo "GitHub CLI not available, outputting comment:"
+        cat "$temp_file"
+    fi
+    
+    rm -f "$temp_file"
+}
+
+# Main execution
+if [ "$STATUS" = "starting" ]; then
+    # Check if this is a version-bump branch
+    IS_VERSION_BUMP="false"
+    if echo "$BRANCH_NAME" | grep -q "^version-bump-"; then
+        IS_VERSION_BUMP="true"
+    fi
+    
+    # Post starting comment with appropriate message
+    if [ "$IS_VERSION_BUMP" = "true" ]; then
+        comment=$(cat <<EOF
+$COMMENT_MARKER
+## 🎨 Storybook Build Status
+
+<img alt='loading' src='https://github.com/user-attachments/assets/755c86ee-e445-4ea8-bc2c-cca85df48686' width='14px' height='14px'/> **Build is starting...**
+
+⏰ Started at: $START_TIME UTC
+
+### 🚀 Building Storybook
+- 📦 Installing dependencies...
+- 🔧 Building Storybook components...
+- 🎨 Running Chromatic visual tests...
+
+---
+⏱️ Please wait while the Storybook build is in progress...
+EOF
+)
+    else
+        comment=$(cat <<EOF
+$COMMENT_MARKER
+## 🎨 Storybook Build Status
+
+<img alt='loading' src='https://github.com/user-attachments/assets/755c86ee-e445-4ea8-bc2c-cca85df48686' width='14px' height='14px'/> **Build is starting...**
+
+⏰ Started at: $START_TIME UTC
+
+### 🚀 Building Storybook
+- 📦 Installing dependencies...
+- 🔧 Building Storybook components...
+- 🌐 Preparing deployment to Cloudflare Pages...
+
+---
+⏱️ Please wait while the Storybook build is in progress...
+EOF
+)
+    fi
+    post_comment "$comment"
+    
+elif [ "$STATUS" = "completed" ]; then
+    # Deploy and post completion comment
+    # Convert branch name to Cloudflare-compatible format (lowercase, only alphanumeric and dashes)
+    cloudflare_branch=$(echo "$BRANCH_NAME" | tr '[:upper:]' '[:lower:]' | \
+        sed 's/[^a-z0-9-]/-/g' | sed 's/--*/-/g' | sed 's/^-\|-$//g')
+    
+    echo "Looking for Storybook build in: $(pwd)/storybook-static"
+    
+    # Deploy Storybook if build exists
+    deployment_url="Not deployed"
+    if [ -d "storybook-static" ]; then
+        echo "Found Storybook build, deploying..."
+        url=$(deploy_storybook "storybook-static" "$cloudflare_branch")
+        if [ "$url" != "failed" ] && [ -n "$url" ]; then
+            deployment_url="[View Storybook]($url)"
+        else
+            deployment_url="Deployment failed"
+        fi
+    else
+        echo "Storybook build not found at storybook-static"
+    fi
+    
+    # Get workflow conclusion from environment or default to success
+    WORKFLOW_CONCLUSION="${WORKFLOW_CONCLUSION:-success}"
+    WORKFLOW_URL="${WORKFLOW_URL:-}"
+    
+    # Generate completion comment based on conclusion
+    if [ "$WORKFLOW_CONCLUSION" = "success" ]; then
+        status_icon="✅"
+        status_text="Build completed successfully!"
+        footer_text="🎉 Your Storybook is ready for review!"
+    elif [ "$WORKFLOW_CONCLUSION" = "skipped" ]; then
+        status_icon="⏭️"
+        status_text="Build skipped."
+        footer_text="ℹ️ Chromatic was skipped for this PR."
+    elif [ "$WORKFLOW_CONCLUSION" = "cancelled" ]; then
+        status_icon="🚫"
+        status_text="Build cancelled."
+        footer_text="ℹ️ The Chromatic run was cancelled."
+    else
+        status_icon="❌"
+        status_text="Build failed!"
+        footer_text="⚠️ Please check the workflow logs for error details."
+    fi
+    
+    comment="$COMMENT_MARKER
+## 🎨 Storybook Build Status
+
+$status_icon **$status_text**
+
+⏰ Completed at: $(date -u '+%m/%d/%Y, %I:%M:%S %p') UTC
+
+### 🔗 Links
+- [📊 View Workflow Run]($WORKFLOW_URL)"
+    
+    # Add deployment status
+    if [ "$deployment_url" != "Not deployed" ]; then
+        if [ "$deployment_url" = "Deployment failed" ]; then
+            comment="$comment
+- ❌ Storybook deployment failed"
+        elif [ "$WORKFLOW_CONCLUSION" = "success" ]; then
+            comment="$comment
+- 🎨 $deployment_url"
+        else
+            comment="$comment
+- ⚠️ Build failed - $deployment_url"
+        fi
+    elif [ "$WORKFLOW_CONCLUSION" != "success" ]; then
+        comment="$comment
+- ⏭️ Storybook deployment skipped (build did not succeed)"
+    fi
+    
+    comment="$comment
+
+---
+$footer_text"
+    
+    post_comment "$comment"
+fi

scripts/collect-i18n-general.ts

@@ -1,12 +1,15 @@
 import * as fs from 'fs'
 
 import { comfyPageFixture as test } from '../browser_tests/fixtures/ComfyPage'
+import {
+  formatCamelCase,
+  normalizeI18nKey
+} from '../packages/shared-frontend-utils/src/formatUtil'
 import { CORE_MENU_COMMANDS } from '../src/constants/coreMenuCommands'
 import { DESKTOP_DIALOGS } from '../src/constants/desktopDialogs'
 import { SERVER_CONFIG_ITEMS } from '../src/constants/serverConfig'
 import type { FormItem, SettingParams } from '../src/platform/settings/types'
 import type { ComfyCommandImpl } from '../src/stores/commandStore'
-import { formatCamelCase, normalizeI18nKey } from '../src/utils/formatUtil'
 
 const localePath = './src/locales/en/main.json'
 const commandsPath = './src/locales/en/commands.json'

scripts/collect-i18n-node-defs.ts

@@ -3,8 +3,8 @@ import * as fs from 'fs'
 import type { ComfyNodeDef } from '@/schemas/nodeDefSchema'
 
 import { comfyPageFixture as test } from '../browser_tests/fixtures/ComfyPage'
+import { normalizeI18nKey } from '../packages/shared-frontend-utils/src/formatUtil'
 import type { ComfyNodeDefImpl } from '../src/stores/nodeDefStore'
-import { normalizeI18nKey } from '../src/utils/formatUtil'
 
 const localePath = './src/locales/en/main.json'
 const nodeDefsPath = './src/locales/en/nodeDefs.json'

src/App.vue

@@ -44,7 +44,6 @@ const showContextMenu = (event: MouseEvent) => {
 onMounted(() => {
   // @ts-expect-error fixme ts strict error
   window['__COMFYUI_FRONTEND_VERSION__'] = config.app_version
-  console.log('ComfyUI Front-end version:', config.app_version)
 
   if (isElectron()) {
     document.addEventListener('contextmenu', showContextMenu)

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

@@ -69,7 +69,7 @@ const terminalCreated = (
       await loadLogEntries()
     } catch (err) {
       console.error('Error loading logs', err)
-      // On older backends the endpoints wont exist
+      // On older backends the endpoints won't exist
       errorMessage.value =
         'Unable to load logs, please ensure you have updated your ComfyUI backend.'
       return

src/components/dialog/content/SignInContent.vue

@@ -45,37 +45,39 @@
         <span class="text-muted">{{ t('auth.login.orContinueWith') }}</span>
       </Divider>
 
-      <!-- Social Login Buttons -->
+      <!-- Social Login Buttons (hidden if host not whitelisted) -->
       <div class="flex flex-col gap-6">
-        <Button
-          type="button"
-          class="h-10"
-          severity="secondary"
-          outlined
-          @click="signInWithGoogle"
-        >
-          <i class="pi pi-google mr-2"></i>
-          {{
-            isSignIn
-              ? t('auth.login.loginWithGoogle')
-              : t('auth.signup.signUpWithGoogle')
-          }}
-        </Button>
+        <template v-if="ssoAllowed">
+          <Button
+            type="button"
+            class="h-10"
+            severity="secondary"
+            outlined
+            @click="signInWithGoogle"
+          >
+            <i class="pi pi-google mr-2"></i>
+            {{
+              isSignIn
+                ? t('auth.login.loginWithGoogle')
+                : t('auth.signup.signUpWithGoogle')
+            }}
+          </Button>
 
-        <Button
-          type="button"
-          class="h-10"
-          severity="secondary"
-          outlined
-          @click="signInWithGithub"
-        >
-          <i class="pi pi-github mr-2"></i>
-          {{
-            isSignIn
-              ? t('auth.login.loginWithGithub')
-              : t('auth.signup.signUpWithGithub')
-          }}
-        </Button>
+          <Button
+            type="button"
+            class="h-10"
+            severity="secondary"
+            outlined
+            @click="signInWithGithub"
+          >
+            <i class="pi pi-github mr-2"></i>
+            {{
+              isSignIn
+                ? t('auth.login.loginWithGithub')
+                : t('auth.signup.signUpWithGithub')
+            }}
+          </Button>
+        </template>
 
         <Button
           type="button"
@@ -149,6 +151,7 @@ import { useI18n } from 'vue-i18n'
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
 import { COMFY_PLATFORM_BASE_URL } from '@/config/comfyApi'
 import type { SignInData, SignUpData } from '@/schemas/signInSchema'
+import { isHostWhitelisted, normalizeHost } from '@/utils/hostWhitelist'
 import { isInChina } from '@/utils/networkUtil'
 
 import ApiKeyForm from './signin/ApiKeyForm.vue'
@@ -164,6 +167,7 @@ const authActions = useFirebaseAuthActions()
 const isSecureContext = window.isSecureContext
 const isSignIn = ref(true)
 const showApiKeyForm = ref(false)
+const ssoAllowed = isHostWhitelisted(normalizeHost(window.location.hostname))
 
 const toggleState = () => {
   isSignIn.value = !isSignIn.value

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

@@ -237,7 +237,7 @@ async function removeKeybinding(commandData: ICommandData) {
 async function captureKeybinding(event: KeyboardEvent) {
   // Allow the use of keyboard shortcuts when adding keyboard shortcuts
   if (!event.shiftKey && !event.altKey && !event.ctrlKey && !event.metaKey) {
-    switch (event.key) {
+    switch (event.code) {
       case 'Escape':
         cancelEdit()
         return

src/components/graph/GraphCanvas.vue

@@ -93,6 +93,7 @@ import NodeSearchboxPopover from '@/components/searchbox/NodeSearchBoxPopover.vu
 import SideToolbar from '@/components/sidebar/SideToolbar.vue'
 import SecondRowWorkflowTabs from '@/components/topbar/SecondRowWorkflowTabs.vue'
 import { useChainCallback } from '@/composables/functional/useChainCallback'
+import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
 import { useViewportCulling } from '@/composables/graph/useViewportCulling'
 import { useVueNodeLifecycle } from '@/composables/graph/useVueNodeLifecycle'
 import { useNodeBadge } from '@/composables/node/useNodeBadge'
@@ -103,7 +104,6 @@ import { useGlobalLitegraph } from '@/composables/useGlobalLitegraph'
 import { usePaste } from '@/composables/usePaste'
 import { useVueFeatureFlags } from '@/composables/useVueFeatureFlags'
 import { i18n, t } from '@/i18n'
-import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { useLitegraphSettings } from '@/platform/settings/composables/useLitegraphSettings'
 import { CORE_SETTINGS } from '@/platform/settings/constants/coreSettings'
 import { useSettingStore } from '@/platform/settings/settingStore'
@@ -189,8 +189,8 @@ watch(
   }
 )
 
-const allNodes = computed(() =>
-  Array.from(vueNodeLifecycle.vueNodeData.value.values())
+const allNodes = computed((): VueNodeData[] =>
+  Array.from(vueNodeLifecycle.nodeManager.value?.vueNodeData?.values() ?? [])
 )
 
 watchEffect(() => {
@@ -225,7 +225,6 @@ watch(
     for (const n of comfyApp.graph.nodes) {
       if (!n.widgets) continue
       for (const w of n.widgets) {
-        // @ts-expect-error fixme ts strict error
         if (w[IS_CONTROL_WIDGET]) {
           updateControlWidgetLabel(w)
           if (w.linkedWidgets) {
@@ -293,45 +292,36 @@ watch(
   { deep: true }
 )
 
-// Update node slot errors
+// Update node slot errors for LiteGraph nodes
+// (Vue nodes read from store directly)
 watch(
   () => executionStore.lastNodeErrors,
   (lastNodeErrors) => {
-    const removeSlotError = (node: LGraphNode) => {
+    if (!comfyApp.graph) return
+
+    for (const node of comfyApp.graph.nodes) {
+      // Clear existing errors
       for (const slot of node.inputs) {
         delete slot.hasErrors
       }
       for (const slot of node.outputs) {
         delete slot.hasErrors
       }
-    }
 
-    for (const node of comfyApp.graph.nodes) {
-      removeSlotError(node)
       const nodeErrors = lastNodeErrors?.[node.id]
       if (!nodeErrors) continue
 
       const validErrors = nodeErrors.errors.filter(
         (error) => error.extra_info?.input_name !== undefined
       )
-      const slotErrorsChanged =
-        validErrors.length > 0 &&
-        validErrors.some((error) => {
-          const inputName = error.extra_info!.input_name!
-          const inputIndex = node.findInputSlot(inputName)
-          if (inputIndex !== -1) {
-            node.inputs[inputIndex].hasErrors = true
-            return true
-          }
-          return false
-        })
 
-      // Trigger Vue node data update if slot errors changed
-      if (slotErrorsChanged && comfyApp.graph.onTrigger) {
-        comfyApp.graph.onTrigger('node:slot-errors:changed', {
-          nodeId: node.id
-        })
-      }
+      validErrors.forEach((error) => {
+        const inputName = error.extra_info!.input_name!
+        const inputIndex = node.findInputSlot(inputName)
+        if (inputIndex !== -1) {
+          node.inputs[inputIndex].hasErrors = true
+        }
+      })
     }
 
     comfyApp.canvas.draw(true, true)
@@ -364,7 +354,6 @@ const loadCustomNodesI18n = async () => {
 
 const comfyAppReady = ref(false)
 const workflowPersistence = useWorkflowPersistence()
-// @ts-expect-error fixme ts strict error
 useCanvasDrop(canvasRef)
 useLitegraphSettings()
 useNodeBadge()

src/components/graph/widgets/DomWidget.vue

@@ -125,50 +125,43 @@ watch(
     }
   }
 )
-
-// Set up event listeners only after the widget is mounted and visible
-const setupDOMEventListeners = () => {
-  if (!isDOMWidget(widget) || !widgetState.visible) return
-
-  if (widget.element.blur) {
-    useEventListener(document, 'mousedown', (event) => {
-      if (!widget.element.contains(event.target as HTMLElement)) {
-        widget.element.blur()
-      }
-    })
+useEventListener(document, 'mousedown', (event) => {
+  if (!isDOMWidget(widget) || !widgetState.visible || !widget.element.blur) {
+    return
   }
+  if (!widget.element.contains(event.target as HTMLElement)) {
+    widget.element.blur()
+  }
+})
 
-  for (const evt of widget.options.selectOn ?? ['focus', 'click']) {
-    useEventListener(widget.element, evt, () => {
+onMounted(() => {
+  if (!isDOMWidget(widget)) {
+    return
+  }
+  useEventListener(
+    widget.element,
+    widget.options.selectOn ?? ['focus', 'click'],
+    () => {
       const lgCanvas = canvasStore.canvas
       lgCanvas?.selectNode(widget.node)
       lgCanvas?.bringToFront(widget.node)
-    })
-  }
-}
-
-// Set up event listeners when widget becomes visible
-watch(
-  () => widgetState.visible,
-  (visible) => {
-    if (visible) {
-      setupDOMEventListeners()
     }
-  },
-  { immediate: true }
-)
+  )
+})
 
 const inputSpec = widget.node.constructor.nodeData
 const tooltip = inputSpec?.inputs?.[widget.name]?.tooltip
 
 // Mount DOM element when widget is or becomes visible
 const mountElementIfVisible = () => {
-  if (widgetState.visible && isDOMWidget(widget) && widgetElement.value) {
-    // Only append if not already a child
-    if (!widgetElement.value.contains(widget.element)) {
-      widgetElement.value.appendChild(widget.element)
-    }
+  if (!(widgetState.visible && isDOMWidget(widget) && widgetElement.value)) {
+    return
   }
+  // Only append if not already a child
+  if (widgetElement.value.contains(widget.element)) {
+    return
+  }
+  widgetElement.value.appendChild(widget.element)
 }
 
 // Check on mount - but only after next tick to ensure visibility is calculated

src/components/install/mirror/MirrorItem.vue

@@ -60,8 +60,8 @@ import { computed, onMounted, ref, watch } from 'vue'
 import UrlInput from '@/components/common/UrlInput.vue'
 import type { UVMirror } from '@/constants/uvMirrors'
 import { st } from '@/i18n'
+import { checkMirrorReachable } from '@/utils/electronMirrorCheck'
 import { normalizeI18nKey } from '@/utils/formatUtil'
-import { checkMirrorReachable } from '@/utils/networkUtil'
 import { ValidationState } from '@/utils/validationUtil'
 
 const FILE_URL_SCHEME = 'file://'

src/components/widget/SampleModelSelector.vue

@@ -127,7 +127,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, provide, ref, watch } from 'vue'
+import { computed, provide, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import IconButton from '@/components/button/IconButton.vue'
@@ -202,12 +202,4 @@ const selectedSort = ref<string>('popular')
 const selectedNavItem = ref<string | null>('installed')
 
 const gridStyle = computed(() => createGridStyle())
-
-watch(searchText, (newQuery) => {
-  console.log('searchText:', searchText.value, newQuery)
-})
-
-watch(searchQuery, (newQuery) => {
-  console.log('searchQuery:', searchQuery.value, newQuery)
-})
 </script>

src/components/widget/layout/BaseModalLayout.stories.ts

@@ -86,7 +86,7 @@ const createStoryTemplate = (args: StoryArgs) => ({
     const t = (k: string) => k
 
     const onClose = () => {
-      console.log('OnClose invoked')
+      // OnClose handler for story
     }
     provide(OnCloseKey, onClose)
 

src/composables/graph/useGraphNodeManager.ts

@@ -41,6 +41,8 @@ export interface VueNodeData {
     collapsed?: boolean
     pinned?: boolean
   }
+  color?: string
+  bgcolor?: string
 }
 
 export interface GraphNodeManager {
@@ -126,7 +128,9 @@ export function useGraphNodeManager(graph: LGraph): GraphNodeManager {
       widgets: safeWidgets,
       inputs: node.inputs ? [...node.inputs] : undefined,
       outputs: node.outputs ? [...node.outputs] : undefined,
-      flags: node.flags ? { ...node.flags } : undefined
+      flags: node.flags ? { ...node.flags } : undefined,
+      color: node.color || undefined,
+      bgcolor: node.bgcolor || undefined
     }
   }
 
@@ -237,7 +241,7 @@ export function useGraphNodeManager(graph: LGraph): GraphNodeManager {
   }
 
   /**
-   * Sets up widget callbacks for a node - now with reduced nesting
+   * Sets up widget callbacks for a node
    */
   const setupNodeWidgetCallbacks = (node: LGraphNode) => {
     if (!node.widgets) return
@@ -449,6 +453,24 @@ export function useGraphNodeManager(graph: LGraph): GraphNodeManager {
                 ...currentData,
                 mode: typeof event.newValue === 'number' ? event.newValue : 0
               })
+              break
+            case 'color':
+              vueNodeData.set(nodeId, {
+                ...currentData,
+                color:
+                  typeof event.newValue === 'string'
+                    ? event.newValue
+                    : undefined
+              })
+              break
+            case 'bgcolor':
+              vueNodeData.set(nodeId, {
+                ...currentData,
+                bgcolor:
+                  typeof event.newValue === 'string'
+                    ? event.newValue
+                    : undefined
+              })
           }
         }
       } else if (