Update test for previews fix

Turns out the vuedraggable import has side effects that break other
test cases. This is awful and requires further investigation, but for
now, the import is performed at execution time

.gitattributes

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

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

@@ -1,67 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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/backport.yaml

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

.github/workflows/chromatic.yaml

@@ -0,0 +1,57 @@
+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,9 +29,11 @@ jobs:
       - name: Check if we should proceed
         id: check-status
         run: |
-          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
+          # 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
             echo "Some CI checks failed - skipping Claude review"
             echo "proceed=false" >> $GITHUB_OUTPUT
           else
@@ -48,10 +50,9 @@ jobs:
     timeout-minutes: 30
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v5
+        uses: actions/checkout@v4
         with:
           fetch-depth: 0
-          ref: refs/pull/${{ github.event.pull_request.number }}/head
 
       - name: Install pnpm
         uses: pnpm/action-setup@v4
@@ -85,4 +86,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-release-candidate-branch.yaml

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

.github/workflows/dev-release.yaml

@@ -15,7 +15,7 @@ jobs:
       version: ${{ steps.current_version.outputs.version }}
     steps:
       - name: Checkout code
-        uses: actions/checkout@v5
+        uses: actions/checkout@v4
       - 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@v5
+        uses: actions/checkout@v4
       - name: Download dist artifact
         uses: actions/download-artifact@v4
         with:

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

@@ -1,26 +0,0 @@
-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/i18n-custom-nodes.yaml

@@ -22,13 +22,13 @@ jobs:
     runs-on: ubuntu-latest
     steps:
     - name: Checkout ComfyUI
-      uses: actions/checkout@v5
+      uses: actions/checkout@v4
       with:
         repository: comfyanonymous/ComfyUI
         path: ComfyUI
         ref: master
     - name: Checkout ComfyUI_frontend
-      uses: actions/checkout@v5
+      uses: actions/checkout@v4
       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@v5
+      uses: actions/checkout@v4
       with:
         repository: ${{ inputs.owner }}/${{ inputs.repository }}
         path: 'ComfyUI/custom_nodes/${{ inputs.repository }}'
@@ -77,15 +77,16 @@ jobs:
         python main.py --cpu --multi-user &
         wait-for-it --service 127.0.0.1:8188 -t 600
       working-directory: ComfyUI
-    - name: Setup Playwright
-      uses: ./ComfyUI_frontend/.github/actions/setup-playwright
+    - name: Install Playwright Browsers
+      run: npx playwright install chromium --with-deps
+      working-directory: ComfyUI_frontend
     - name: Start dev server
       # Run electron dev server as it is a superset of the web dev server
       # We do want electron specific UIs to be translated.
       run: pnpm dev:electron &
       working-directory: ComfyUI_frontend
     - name: Capture base i18n
-      run: pnpm exec tsx scripts/diff-i18n capture
+      run: npx tsx scripts/diff-i18n capture
       working-directory: ComfyUI_frontend
     - name: Update en.json
       run: pnpm collect-i18n
@@ -98,7 +99,7 @@ jobs:
         OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
       working-directory: ComfyUI_frontend
     - name: Diff base vs updated i18n
-      run: pnpm exec tsx scripts/diff-i18n diff
+      run: npx tsx scripts/diff-i18n diff
       working-directory: ComfyUI_frontend
     - name: Update i18n in custom node repository
       run: |

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

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

.github/workflows/i18n.yaml

@@ -14,8 +14,7 @@ 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:
-    - name: Setup Frontend
-      uses: ./.github/actions/setup-frontend
+    - uses: Comfy-Org/ComfyUI_frontend_setup_action@v3
     
     - name: Cache tool outputs
       uses: actions/cache@v4
@@ -26,8 +25,16 @@ jobs:
         key: i18n-tools-cache-${{ runner.os }}-${{ hashFiles('ComfyUI_frontend/pnpm-lock.yaml') }}
         restore-keys: |
           i18n-tools-cache-${{ runner.os }}-
-    - name: Setup Playwright
-      uses: ./.github/actions/setup-playwright
+    - 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: npx playwright install chromium --with-deps
+      working-directory: ComfyUI_frontend
     - name: Start dev server
       # Run electron dev server as it is a superset of the web dev server
       # We do want electron specific UIs to be translated.

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

@@ -13,9 +13,11 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout PR
-        uses: actions/checkout@v5
+        uses: actions/checkout@v4
         with:
-          ref: ${{ !github.event.pull_request.head.repo.fork && github.head_ref || github.ref }}
+          token: ${{ secrets.GITHUB_TOKEN }}
+          ref: ${{ github.event.pull_request.head.ref }}
+          fetch-depth: 0
 
       - name: Install pnpm
         uses: pnpm/action-setup@v4
@@ -100,4 +102,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.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@v5
+        uses: actions/checkout@v4
 
       - name: Get PR Number
         id: pr

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

@@ -0,0 +1,126 @@
+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

@@ -1,90 +0,0 @@
-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

@@ -1,231 +0,0 @@
-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/test-browser-exp.yaml

@@ -10,15 +10,20 @@ jobs:
     runs-on: ubuntu-latest
     if: github.event.label.name == 'New Browser Test Expectations'
     steps:
-    - name: Checkout workflow repo
-      uses: actions/checkout@v5
-    - name: Setup Frontend
-      uses: ./.github/actions/setup-frontend
-    - name: Setup Playwright
-      uses: ./.github/actions/setup-playwright
+    - 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: npx playwright install chromium --with-deps
+      working-directory: ComfyUI_frontend
     - name: Run Playwright tests and update snapshots
       id: playwright-tests
-      run: pnpm exec playwright test --update-snapshots
+      run: npx playwright test --update-snapshots
       continue-on-error: true
       working-directory: ComfyUI_frontend
     - uses: actions/upload-artifact@v4

.github/workflows/test-ui.yaml

@@ -12,16 +12,17 @@ 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@v5
+        uses: actions/checkout@v4
         with:
           repository: 'comfyanonymous/ComfyUI'
           path: 'ComfyUI'
           ref: master
 
       - name: Checkout ComfyUI_frontend
-        uses: actions/checkout@v5
+        uses: actions/checkout@v4
         with:
           repository: 'Comfy-Org/ComfyUI_frontend'
           path: 'ComfyUI_frontend'
@@ -64,6 +65,12 @@ 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
@@ -116,8 +123,22 @@ jobs:
         working-directory: ComfyUI
 
 
-      - name: Setup Playwright
-        uses: ./ComfyUI_frontend/.github/actions/setup-playwright
+      - 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: Start ComfyUI server
         run: |
@@ -127,7 +148,7 @@ jobs:
 
       - name: Run Playwright tests (Shard ${{ matrix.shardIndex }}/${{ matrix.shardTotal }})
         id: playwright
-        run: pnpm exec playwright test --project=chromium --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }} --reporter=blob
+        run: npx playwright test --project=chromium --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }} --reporter=blob
         working-directory: ComfyUI_frontend
         env:
           PLAYWRIGHT_BLOB_OUTPUT_DIR: ../blob-report
@@ -181,8 +202,22 @@ jobs:
           pip install wait-for-it
         working-directory: ComfyUI
 
-      - name: Setup Playwright
-        uses: ./ComfyUI_frontend/.github/actions/setup-playwright
+      - 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: Start ComfyUI server
         run: |
@@ -195,7 +230,7 @@ jobs:
         run: |
           # Run tests with both HTML and JSON reporters
           PLAYWRIGHT_JSON_OUTPUT_NAME=playwright-report/report.json \
-          pnpm exec playwright test --project=${{ matrix.browser }} \
+          npx playwright test --project=${{ matrix.browser }} \
             --reporter=list \
             --reporter=html \
             --reporter=json
@@ -215,7 +250,7 @@ jobs:
     if: ${{ !cancelled() }}
     steps:
       - name: Checkout ComfyUI_frontend
-        uses: actions/checkout@v5
+        uses: actions/checkout@v4
         with:
           repository: 'Comfy-Org/ComfyUI_frontend'
           path: 'ComfyUI_frontend'
@@ -246,10 +281,10 @@ jobs:
       - name: Merge into HTML Report
         run: |
           # Generate HTML report
-          pnpm exec playwright merge-reports --reporter=html ./all-blob-reports
+          npx playwright merge-reports --reporter=html ./all-blob-reports
           # Generate JSON report separately with explicit output path
           PLAYWRIGHT_JSON_OUTPUT_NAME=playwright-report/report.json \
-          pnpm exec playwright merge-reports --reporter=json ./all-blob-reports
+          npx playwright merge-reports --reporter=json ./all-blob-reports
         working-directory: ComfyUI_frontend
 
       - name: Upload HTML report
@@ -271,7 +306,7 @@ jobs:
       pull-requests: write
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v5
+        uses: actions/checkout@v4
         
       - name: Get start time
         id: start-time
@@ -298,7 +333,7 @@ jobs:
       contents: read
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v5
+        uses: actions/checkout@v4
         
       - name: Download all playwright reports
         uses: actions/download-artifact@v4

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

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

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

@@ -17,7 +17,7 @@ jobs:
       pull-requests: write
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v5
+        uses: actions/checkout@v4
 
       - 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@v5
+        uses: actions/checkout@v4
         with:
           repository: Comfy-Org/ComfyUI-Manager
           path: ComfyUI-Manager
@@ -68,7 +68,7 @@ jobs:
       - name: Generate Manager API types
         run: |
           echo "Generating TypeScript types from ComfyUI-Manager@${{ steps.manager-info.outputs.commit }}..."
-          pnpm dlx openapi-typescript ./ComfyUI-Manager/openapi.yaml --output ./src/types/generatedManagerTypes.ts
+          npx openapi-typescript ./ComfyUI-Manager/openapi.yaml --output ./src/types/generatedManagerTypes.ts
 
       - name: Validate generated types
         run: |

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

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

.github/workflows/validate-json.yaml

@@ -1,15 +0,0 @@
-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@v5
+        uses: actions/checkout@v4
 
       - name: Install pnpm
         uses: pnpm/action-setup@v4

.github/workflows/vitest.yaml

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

.husky/pre-commit

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

.npmrc

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

.prettierignore

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

.storybook/main.ts

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

AGENTS.md

@@ -31,9 +31,10 @@
 - Playwright: place tests in `browser_tests/`; optional tags like `@mobile`, `@2x` are respected by config.
 
 ## Commit & Pull Request Guidelines
-- Commits: Use `[skip ci]` for locale-only updates when appropriate.
-- PRs: Include clear description, linked issues (`- Fixes #123`), and screenshots/GIFs for UI changes.
+- 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.
 - 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`.

CONTRIBUTING.md

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

browser_tests/README.md

@@ -16,7 +16,7 @@ Without this flag, parallel tests will conflict and fail randomly.
 
 ### ComfyUI devtools
 
-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 is now included in this repository under `tools/devtools/`. During CI/CD, these files are automatically copied to the `custom_nodes` directory.  
 _ComfyUI_devtools adds additional API endpoints and nodes to ComfyUI for browser testing._
 
 For local development, copy the devtools files to your ComfyUI installation:
@@ -29,7 +29,7 @@ cp -r tools/devtools/* /path/to/your/ComfyUI/custom_nodes/ComfyUI_devtools/
 Ensure you have Node.js v20 or v22 installed. Then, set up the Chromium test driver:
 
 ```bash
-pnpm exec playwright install chromium --with-deps
+npx playwright install chromium --with-deps
 ```
 
 ### Environment Configuration
@@ -73,7 +73,7 @@ For tests that specifically need to test release functionality, see the example
 **Always use UI mode for development:**
 
 ```bash
-pnpm exec playwright test --ui
+npx playwright test --ui
 ```
 
 UI mode features:
@@ -84,13 +84,13 @@ 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/9b9cb09f-6da7-4fa0-81df-2effceced755)
+![Playwright UI Mode](https://github.com/user-attachments/assets/c158c93f-b39a-44c5-a1a1-e0cc975ee9f2)
 
 For CI or headless testing:
 
 ```bash
-pnpm exec playwright test                    # Run all tests
-pnpm exec playwright test widget.spec.ts     # Run specific test file
+npx playwright test                    # Run all tests
+npx playwright test widget.spec.ts     # Run specific test file
 ```
 
 ### Local Development Config
@@ -386,7 +386,7 @@ export default defineConfig({
 Option 2 - Generate local baselines for comparison:
 
 ```bash
-pnpm exec playwright test --update-snapshots
+npx playwright test --update-snapshots
 ```
 
 ### Creating New Screenshot Baselines

browser_tests/assets/widgets/all_load_widgets.json

@@ -1,221 +0,0 @@
-{
-  "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/templates.spec.ts

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

browser_tests/tests/versionMismatchWarnings.spec.ts

@@ -85,7 +85,6 @@ test.describe('Version Mismatch Warnings', () => {
   test('should persist dismissed state across sessions', async ({
     comfyPage
   }) => {
-    test.setTimeout(30_000)
     // Mock system_stats route to indicate that the installed version is always ahead of the required version
     await comfyPage.page.route('**/system_stats**', async (route) => {
       await route.fulfill({

browser_tests/tests/vueNodes/NodeHeader.spec.ts

@@ -1,20 +1,67 @@
 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('Vue Node Collapse', () => {
+test.describe('NodeHeader', () => {
   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('should allow collapsing node with collapse icon', async ({
-    comfyPage
-  }) => {
+  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('handles node collapsing', async ({ comfyPage }) => {
     // Get the KSampler node from the default workflow
     const nodes = await comfyPage.getNodeRefsByType('KSampler')
     const node = nodes[0]
@@ -43,7 +90,7 @@ test.describe('Vue Node Collapse', () => {
     expect(expandedSize.height).toBeGreaterThanOrEqual(collapsedSize.height)
   })
 
-  test('should show collapse/expand icon state', async ({ comfyPage }) => {
+  test('shows collapse/expand icon state', async ({ comfyPage }) => {
     const nodes = await comfyPage.getNodeRefsByType('KSampler')
     const node = nodes[0]
     const vueNode = new VueNodeFixture(node, comfyPage.page)
@@ -63,9 +110,7 @@ test.describe('Vue Node Collapse', () => {
     expect(iconClass).toContain('pi-chevron-down')
   })
 
-  test('should preserve title when collapsing/expanding', async ({
-    comfyPage
-  }) => {
+  test('preserves 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/deleteKeyInteraction.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/groups/groups.spec.ts

@@ -1,33 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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,33 +0,0 @@
-import {
-  comfyExpect as expect,
-  comfyPageFixture as test
-} from '../../../../fixtures/ComfyPage'
-
-test.describe('Vue Nodes Zoom', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)
-    await comfyPage.vueNodes.waitForNodes()
-  })
-
-  test('should not capture drag while zooming with ctrl+shift+drag', async ({
-    comfyPage
-  }) => {
-    const checkpointNode = comfyPage.vueNodes.getNodeByTitle('Load Checkpoint')
-    const nodeBoundingBox = await checkpointNode.boundingBox()
-    if (!nodeBoundingBox) throw new Error('Node bounding box not available')
-
-    const nodeMidpointX = nodeBoundingBox.x + nodeBoundingBox.width / 2
-    const nodeMidpointY = nodeBoundingBox.y + nodeBoundingBox.height / 2
-
-    // Start the Ctrl+Shift drag-to-zoom on the canvas and continue dragging over
-    // the node. The node should not capture the drag while drag-zooming.
-    await comfyPage.page.keyboard.down('Control')
-    await comfyPage.page.keyboard.down('Shift')
-    await comfyPage.dragAndDrop(
-      { x: 200, y: 300 },
-      { x: nodeMidpointX, y: nodeMidpointY }
-    )
-
-    await expect(comfyPage.canvas).toHaveScreenshot('zoomed-in-ctrl-shift.png')
-  })
-})

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

@@ -1,696 +0,0 @@
-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/rename.spec.ts

@@ -1,76 +0,0 @@
-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/linkInteraction.spec.ts

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

browser_tests/tests/vueNodes/lod.spec.ts

@@ -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/nodeInteractions/selectionState.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,8 +15,7 @@ test.describe('Vue Node Selection', () => {
 
   const modifiers = [
     { key: 'Control', name: 'ctrl' },
-    { key: 'Shift', name: 'shift' },
-    { key: 'Meta', name: 'meta' }
+    { key: 'Shift', name: 'shift' }
   ] as const
 
   for (const { key: modifier, name } of modifiers) {

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

@@ -1,49 +0,0 @@
-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/pin.spec.ts

@@ -1,85 +0,0 @@
-import {
-  comfyExpect as expect,
-  comfyPageFixture as test
-} from '../../../fixtures/ComfyPage'
-
-const PIN_HOTKEY = 'p'
-const PIN_INDICATOR = '[data-testid="node-pin-indicator"]'
-
-test.describe('Vue Node Pin', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)
-    await comfyPage.vueNodes.waitForNodes()
-  })
-
-  test('should allow toggling pin on a selected node with hotkey', async ({
-    comfyPage
-  }) => {
-    await comfyPage.page.getByText('Load Checkpoint').click()
-    await comfyPage.page.keyboard.press(PIN_HOTKEY)
-
-    const checkpointNode = comfyPage.vueNodes.getNodeByTitle('Load Checkpoint')
-    const pinIndicator = checkpointNode.locator(PIN_INDICATOR)
-
-    await expect(pinIndicator).toBeVisible()
-
-    await comfyPage.page.keyboard.press(PIN_HOTKEY)
-    await expect(pinIndicator).not.toBeVisible()
-  })
-
-  test('should allow toggling pin on multiple selected nodes with hotkey', async ({
-    comfyPage
-  }) => {
-    await comfyPage.page.getByText('Load Checkpoint').click()
-    await comfyPage.page.getByText('KSampler').click({ modifiers: ['Control'] })
-
-    const checkpointNode = comfyPage.vueNodes.getNodeByTitle('Load Checkpoint')
-    const ksamplerNode = comfyPage.vueNodes.getNodeByTitle('KSampler')
-
-    await comfyPage.page.keyboard.press(PIN_HOTKEY)
-    const pinIndicator1 = checkpointNode.locator(PIN_INDICATOR)
-    await expect(pinIndicator1).toBeVisible()
-    const pinIndicator2 = ksamplerNode.locator(PIN_INDICATOR)
-    await expect(pinIndicator2).toBeVisible()
-
-    await comfyPage.page.keyboard.press(PIN_HOTKEY)
-    await expect(pinIndicator1).not.toBeVisible()
-    await expect(pinIndicator2).not.toBeVisible()
-  })
-
-  test('should not allow dragging pinned nodes', async ({ comfyPage }) => {
-    const checkpointNodeHeader = comfyPage.page.getByText('Load Checkpoint')
-    await checkpointNodeHeader.click()
-    await comfyPage.page.keyboard.press(PIN_HOTKEY)
-
-    // Try to drag the node
-    const headerPos = await checkpointNodeHeader.boundingBox()
-    if (!headerPos) throw new Error('Failed to get header position')
-    await comfyPage.dragAndDrop(
-      { x: headerPos.x, y: headerPos.y },
-      { x: headerPos.x + 256, y: headerPos.y + 256 }
-    )
-
-    // Verify the node is not dragged (same position before and after click-and-drag)
-    const headerPosAfterDrag = await checkpointNodeHeader.boundingBox()
-    if (!headerPosAfterDrag)
-      throw new Error('Failed to get header position after drag')
-    expect(headerPosAfterDrag).toEqual(headerPos)
-
-    // Unpin the node with the hotkey
-    await checkpointNodeHeader.click()
-    await comfyPage.page.keyboard.press(PIN_HOTKEY)
-
-    // Try to drag the node again
-    await comfyPage.dragAndDrop(
-      { x: headerPos.x, y: headerPos.y },
-      { x: headerPos.x + 256, y: headerPos.y + 256 }
-    )
-
-    // Verify the node is dragged
-    const headerPosAfterDrag2 = await checkpointNodeHeader.boundingBox()
-    if (!headerPosAfterDrag2)
-      throw new Error('Failed to get header position after drag')
-    expect(headerPosAfterDrag2).not.toEqual(headerPos)
-  })
-})

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

@@ -1,21 +0,0 @@
-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'
-    )
-  })
-})

browser_tests/tests/vueNodes/widgets/text/multilineStringWidget.spec.ts

@@ -1,49 +0,0 @@
-import {
-  type ComfyPage,
-  comfyExpect as expect,
-  comfyPageFixture as test
-} from '../../../../fixtures/ComfyPage'
-
-test.describe('Vue Multiline String Widget', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)
-    await comfyPage.vueNodes.waitForNodes()
-  })
-
-  const getFirstClipNode = (comfyPage: ComfyPage) =>
-    comfyPage.vueNodes.getNodeByTitle('CLIP Text Encode (Prompt)').first()
-
-  const getFirstMultilineStringWidget = (comfyPage: ComfyPage) =>
-    getFirstClipNode(comfyPage).getByRole('textbox', { name: 'text' })
-
-  test('should allow entering text', async ({ comfyPage }) => {
-    const textarea = getFirstMultilineStringWidget(comfyPage)
-    await textarea.fill('Hello World')
-    await expect(textarea).toHaveValue('Hello World')
-    await textarea.fill('Hello World 2')
-    await expect(textarea).toHaveValue('Hello World 2')
-  })
-
-  test('should support entering multiline content', async ({ comfyPage }) => {
-    const textarea = getFirstMultilineStringWidget(comfyPage)
-
-    const multilineValue = ['Line 1', 'Line 2', 'Line 3'].join('\n')
-
-    await textarea.fill(multilineValue)
-    await expect(textarea).toHaveValue(multilineValue)
-  })
-
-  test('should retain value after focus changes', async ({ comfyPage }) => {
-    const textarea = getFirstMultilineStringWidget(comfyPage)
-
-    await textarea.fill('Keep me around')
-
-    // Click another node
-    const loadCheckpointNode =
-      comfyPage.vueNodes.getNodeByTitle('Load Checkpoint')
-    await loadCheckpointNode.click()
-    await getFirstClipNode(comfyPage).click()
-
-    await expect(textarea).toHaveValue('Keep me around')
-  })
-})

build/customIconCollection.ts

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

docs/extensions/development.md

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

eslint.config.ts

@@ -18,7 +18,7 @@ export default defineConfig([
       'src/scripts/*',
       'src/extensions/core/*',
       'src/types/vue-shim.d.ts',
-      'packages/registry-types/src/comfyRegistryTypes.ts',
+      'src/types/comfyRegistryTypes.ts',
       'src/types/generatedManagerTypes.ts',
       '**/vite.config.*.timestamp*',
       '**/vitest.config.*.timestamp*'
@@ -90,7 +90,6 @@ 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:/'],
@@ -182,37 +181,5 @@ export default defineConfig([
         { disallowTypeAnnotations: false }
       ]
     }
-  },
-  {
-    files: ['**/*.spec.ts'],
-    ignores: ['browser_tests/tests/**/*.spec.ts'],
-    rules: {
-      'no-restricted-syntax': [
-        'error',
-        {
-          selector: 'Program',
-          message: '.spec.ts files are only allowed under browser_tests/tests/'
-        }
-      ]
-    }
-  },
-  {
-    files: ['browser_tests/tests/**/*.test.ts'],
-    rules: {
-      'no-restricted-syntax': [
-        'error',
-        {
-          selector: 'Program',
-          message:
-            '.test.ts files are not allowed in browser_tests/tests/; use .spec.ts instead'
-        }
-      ]
-    }
-  },
-  {
-    files: ['**/*.{test,spec,stories}.ts', '**/*.stories.vue'],
-    rules: {
-      'no-console': 'off'
-    }
   }
 ])

knip.config.ts

@@ -1,29 +1,15 @@
 import type { KnipConfig } from 'knip'
 
 const config: KnipConfig = {
-  workspaces: {
-    '.': {
-      entry: [
-        '{build,scripts}/**/*.{js,ts}',
-        'src/assets/css/style.css',
-        'src/main.ts',
-        'src/scripts/ui/menu/index.ts',
-        'src/types/index.ts'
-      ],
-      project: ['**/*.{js,ts,vue}', '*.{js,ts,mts}']
-    },
-    'packages/tailwind-utils': {
-      project: ['src/**/*.{js,ts}']
-    },
-    'packages/design-system': {
-      entry: ['src/**/*.ts'],
-      project: ['src/**/*.{js,ts}', '*.{js,ts,mts}']
-    },
-    'packages/registry-types': {
-      project: ['src/**/*.{js,ts}']
-    }
-  },
-  ignoreBinaries: ['python3'],
+  entry: [
+    '{build,scripts}/**/*.{js,ts}',
+    'src/assets/css/style.css',
+    'src/main.ts',
+    'src/scripts/ui/menu/index.ts',
+    'src/types/index.ts'
+  ],
+  project: ['**/*.{js,ts,vue}', '*.{js,ts,mts}'],
+  ignoreBinaries: ['only-allow', 'openapi-typescript'],
   ignoreDependencies: [
     // Weird importmap things
     '@iconify/json',
@@ -37,7 +23,7 @@ const config: KnipConfig = {
   ignore: [
     // Auto generated manager types
     'src/workbench/extensions/manager/types/generatedManagerTypes.ts',
-    'packages/registry-types/src/comfyRegistryTypes.ts',
+    'src/types/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.4",
+  "version": "1.28.2",
   "type": "module",
   "repository": "https://github.com/Comfy-Org/ComfyUI_frontend",
   "homepage": "https://comfy.org",
@@ -19,11 +19,11 @@
     "format:no-cache": "prettier --write './**/*.{js,ts,tsx,vue,mts}' --list-different",
     "format:check:no-cache": "prettier --check './**/*.{js,ts,tsx,vue,mts}'",
     "test:all": "nx run test",
-    "test:browser": "pnpm exec nx e2e",
+    "test:browser": "npx nx e2e",
     "test:component": "nx run test src/components/",
     "test:litegraph": "vitest run --config vitest.litegraph.config.ts",
     "test:unit": "nx run test tests-ui/tests",
-    "preinstall": "pnpm dlx only-allow pnpm",
+    "preinstall": "npx only-allow pnpm",
     "prepare": "husky || true && git config blame.ignoreRevsFile .git-blame-ignore-revs || true",
     "preview": "nx preview",
     "lint": "eslint src --cache",
@@ -35,89 +35,88 @@
     "knip": "knip --cache",
     "knip:no-cache": "knip",
     "locale": "lobe-i18n locale",
-    "collect-i18n": "pnpm exec playwright test --config=playwright.i18n.config.ts",
+    "collect-i18n": "npx playwright test --config=playwright.i18n.config.ts",
     "json-schema": "tsx scripts/generate-json-schema.ts",
     "storybook": "nx storybook -p 6006",
-    "build-storybook": "storybook build",
-    "devtools:pycheck": "python3 -m compileall -q tools/devtools"
+    "build-storybook": "storybook build"
   },
   "devDependencies": {
-    "@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:",
+    "@eslint/js": "^9.35.0",
+    "@iconify-json/lucide": "^1.2.66",
+    "@iconify/tailwind": "^1.2.0",
+    "@intlify/eslint-plugin-vue-i18n": "^4.1.0",
+    "@lobehub/i18n-cli": "^1.25.1",
+    "@nx/eslint": "21.4.1",
+    "@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",
     "fs-extra": "^11.2.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:",
+    "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",
     "uuid": "^11.1.0",
-    "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:",
+    "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",
     "zip-dir": "^2.0.0",
-    "zod-to-json-schema": "catalog:"
+    "zod-to-json-schema": "^3.24.1"
   },
   "dependencies": {
-    "@alloc/quick-lru": "catalog:",
+    "@alloc/quick-lru": "^5.2.0",
     "@atlaskit/pragmatic-drag-and-drop": "^1.3.1",
     "@comfyorg/comfyui-electron-types": "0.4.73-0",
-    "@comfyorg/design-system": "workspace:*",
-    "@comfyorg/registry-types": "workspace:*",
     "@comfyorg/tailwind-utils": "workspace:*",
-    "@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:",
+    "@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",
     "@tiptap/core": "^2.10.4",
     "@tiptap/extension-link": "^2.10.4",
     "@tiptap/extension-table": "^2.10.4",
@@ -125,39 +124,39 @@
     "@tiptap/extension-table-header": "^2.10.4",
     "@tiptap/extension-table-row": "^2.10.4",
     "@tiptap/starter-kit": "^2.10.4",
-    "@vueuse/core": "catalog:",
-    "@vueuse/integrations": "catalog:",
+    "@vueuse/core": "^11.0.0",
     "@xterm/addon-fit": "^0.10.0",
     "@xterm/addon-serialize": "^0.13.0",
     "@xterm/xterm": "^5.5.0",
-    "algoliasearch": "catalog:",
-    "axios": "catalog:",
+    "algoliasearch": "^5.21.0",
+    "axios": "^1.8.2",
     "chart.js": "^4.5.0",
     "dompurify": "^3.2.5",
-    "dotenv": "catalog:",
+    "dotenv": "^16.4.5",
     "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": "catalog:",
+    "firebase": "^11.6.0",
     "fuse.js": "^7.0.0",
     "glob": "^11.0.3",
     "jsondiffpatch": "^0.6.0",
     "loglevel": "^1.9.2",
     "marked": "^15.0.11",
-    "pinia": "catalog:",
-    "primeicons": "catalog:",
-    "primevue": "catalog:",
+    "pinia": "^2.1.7",
+    "primeicons": "^7.0.0",
+    "primevue": "^4.2.5",
     "reka-ui": "^2.5.0",
     "semver": "^7.7.2",
     "three": "^0.170.0",
     "tiptap-markdown": "^0.8.10",
-    "vue": "catalog:",
-    "vue-i18n": "catalog:",
-    "vue-router": "catalog:",
-    "vuefire": "catalog:",
-    "yjs": "catalog:",
-    "zod": "catalog:",
-    "zod-validation-error": "catalog:"
+    "vue": "^3.5.13",
+    "vue-i18n": "^9.14.3",
+    "vue-router": "^4.4.3",
+    "vuedraggable": "^4.1.0",
+    "vuefire": "^3.2.1",
+    "yjs": "^13.6.27",
+    "zod": "^3.23.8",
+    "zod-validation-error": "^3.3.0"
   }
 }

packages/design-system/package.json

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

packages/design-system/tailwind.config.ts

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

packages/design-system/tsconfig.json

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

packages/registry-types/package.json

@@ -1,16 +0,0 @@
-{
-  "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

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

packages/shared-frontend-utils/package.json

@@ -1,22 +0,0 @@
-{
-  "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/tsconfig.json

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

packages/tailwind-utils/package.json

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

pnpm-workspace.yaml

@@ -2,115 +2,6 @@ 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

@@ -1,77 +0,0 @@
-#!/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

@@ -1,247 +0,0 @@
-#!/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