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

.claude/commands/create-frontend-release.md

@@ -294,6 +294,7 @@ echo "Last stable release: $LAST_STABLE"
 1. Run complete test suite:
    ```bash
    pnpm test:unit
+   pnpm test:component
    ```
 2. Run type checking:
    ```bash
@@ -458,15 +459,15 @@ echo "Workflow triggered. Waiting for PR creation..."
 3. **IMMEDIATELY CHECK**: Did release workflow trigger?
    ```bash
    sleep 10
-   gh run list --workflow=release-draft-create.yaml --limit=1
+   gh run list --workflow=release.yaml --limit=1
    ```
-4. **For Minor/Major Version Releases**: The release-branch-create workflow will automatically:
+4. **For Minor/Major Version Releases**: The create-release-candidate-branch workflow will automatically:
    - Create a `core/x.yy` branch for the PREVIOUS minor version
    - Apply branch protection rules
    - Document the feature freeze policy
    ```bash
    # Monitor branch creation (for minor/major releases)
-   gh run list --workflow=release-branch-create.yaml --limit=1
+   gh run list --workflow=create-release-candidate-branch.yaml --limit=1
    ```
 4. If workflow didn't trigger due to [skip ci]:
    ```bash
@@ -477,7 +478,7 @@ echo "Workflow triggered. Waiting for PR creation..."
    ```
 5. If workflow triggered, monitor execution:
    ```bash
-   WORKFLOW_RUN_ID=$(gh run list --workflow=release-draft-create.yaml --limit=1 --json databaseId --jq '.[0].databaseId')
+   WORKFLOW_RUN_ID=$(gh run list --workflow=release.yaml --limit=1 --json databaseId --jq '.[0].databaseId')
    gh run watch ${WORKFLOW_RUN_ID}
    ```
 

.claude/commands/create-hotfix-release.md

@@ -246,7 +246,7 @@ For each commit:
 3. Merge the PR: `gh pr merge --merge`
 4. Monitor release workflow:
    ```bash
-   gh run list --workflow=release-draft-create.yaml --limit=1
+   gh run list --workflow=release.yaml --limit=1
    gh run watch
    ```
 5. Track progress:

.claude/commands/setup_repo.md

@@ -120,6 +120,7 @@ echo "Available commands:"
 echo "  pnpm dev          - Start development server"
 echo "  pnpm build        - Build for production"
 echo "  pnpm test:unit    - Run unit tests"
+echo "  pnpm test:component - Run component tests"
 echo "  pnpm typecheck    - Run TypeScript checks"
 echo "  pnpm lint         - Run ESLint"
 echo "  pnpm format       - Format code with Prettier"

.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-comfyui-server/action.yml

@@ -1,55 +0,0 @@
-name: Setup ComfyUI Server
-description: 'Setup ComfyUI server for continuous integration (with ComfyUI_devtools node installed)'
-inputs:
-  extra_server_params:
-    description: 'Additional parameters to pass to ComfyUI server'
-    required: false
-    default: ''
-  launch_server:
-    description: 'Whether to launch the server after setup'
-    required: false
-    default: 'false'
-runs:
-  using: 'composite'
-  steps:
-    # Note: this workflow assume frontend repo is checked out and is built in ../dist
-
-    # Checkout ComfyUI repo, install the dev_tools node and start server
-    - name: Checkout ComfyUI
-      uses: actions/checkout@v5
-      with:
-        repository: 'comfyanonymous/ComfyUI'
-        path: 'ComfyUI'
-
-    - name: Install ComfyUI_devtools from frontend repo
-      shell: bash
-      run: |
-        mkdir -p ComfyUI/custom_nodes/ComfyUI_devtools
-        if ! cp -r ./tools/devtools/* ComfyUI/custom_nodes/ComfyUI_devtools/; then
-          echo "::error::Failed to copy ComfyUI_devtools from ./tools/devtools/"
-          echo "::error::This action assumes the ComfyUI_frontend repository is checked out in the current working directory."
-          echo "::error::Please ensure you have run 'actions/checkout@v5' before calling this action."
-          exit 1
-        fi
-
-    - 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: Start ComfyUI server
-      if: ${{ inputs.launch_server == 'true' }}
-      shell: bash
-      working-directory: ComfyUI
-      run: |
-        python main.py --cpu --multi-user --front-end-root ../dist ${{ inputs.extra_server_params }} &
-        wait-for-it --service 127.0.0.1:8188 -t 600

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

@@ -1,45 +0,0 @@
-name: Setup ComfyUI Frontend
-description: 'Install nodejs/pnpm/dependencies and optionally build ComfyUI_frontend'
-inputs:
-  include_build_step:
-    description: 'Include the build step to build the frontend. Set to true for workflows that need a built frontend'
-    required: false
-    default: 'false'
-runs:
-  using: 'composite'
-  steps:
-    # Note: this workflow assume frontend repo is checked out in the root of the workspace
-
-    # Install pnpm, Node.js, build frontend
-    - 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: './pnpm-lock.yaml'
-
-    # Restore tool caches before running any build/lint operations
-    - name: Restore tool output cache
-      uses: actions/cache/restore@v4
-      with:
-        path: |
-          ./.cache
-          ./tsconfig.tsbuildinfo
-        key: tool-cache-${{ runner.os }}-${{ hashFiles('./pnpm-lock.yaml') }}-${{ hashFiles('./src/**/*.{ts,vue,js,mts}', './*.config.*') }}
-        restore-keys: |
-          tool-cache-${{ runner.os }}-${{ hashFiles('./pnpm-lock.yaml') }}-
-          tool-cache-${{ runner.os }}-
-
-    - name: Install dependencies
-      shell: bash
-      run: pnpm install --frozen-lockfile
-
-    - name: Build ComfyUI_frontend
-      if: ${{ inputs.include_build_step == 'true' }}
-      shell: bash
-      run: pnpm build

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

@@ -1,28 +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
-      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
-
-    - name: Install Playwright Browsers (operating system dependencies)
-      if: steps.cache-playwright-browsers.outputs.cache-hit == 'true'
-      shell: bash
-      run: pnpm exec playwright install-deps

.github/workflows/README.md

@@ -1,21 +0,0 @@
-# GitHub Workflows
-
-## Naming Convention
-
-Workflow files follow a consistent naming pattern: `<prefix>-<descriptive-name>.yaml`
-
-### Category Prefixes
-
-| Prefix     | Purpose                             | Example                              |
-| ---------- | ----------------------------------- | ------------------------------------ |
-| `ci-`      | Testing, linting, validation        | `ci-tests-e2e.yaml`                  |
-| `release-` | Version management, publishing      | `release-version-bump.yaml`          |
-| `pr-`      | PR automation (triggered by labels) | `pr-claude-review.yaml`              |
-| `api-`     | External Api type generation        | `api-update-registry-api-types.yaml` |
-| `i18n-`    | Internationalization updates        | `i18n-update-core.yaml`              |
-
-## Documentation
-
-Each workflow file contains comments explaining its purpose, triggers, and behavior. For specific details about what each workflow does, refer to the comments at the top of each `.yaml` file.
-
-For GitHub Actions documentation, see [Events that trigger workflows](https://docs.github.com/en/actions/writing-workflows/choosing-when-your-workflow-runs/events-that-trigger-workflows).

.github/workflows/backport.yaml

@@ -1,4 +1,4 @@
-name: PR Backport
+name: Auto Backport
 
 on:
   pull_request_target:
@@ -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
 
@@ -95,61 +95,41 @@ jobs:
           echo "skip=true" >> $GITHUB_OUTPUT
           echo "::warning::Backport PRs already exist for PR #${PR_NUMBER}, skipping to avoid duplicates"
 
-      - name: Collect backport targets
+      - name: Extract version labels
         if: steps.check-existing.outputs.skip != 'true'
-        id: targets
+        id: versions
         run: |
-          TARGETS=()
-          declare -A SEEN=()
-
+          # Extract version labels (e.g., "1.24", "1.22")
+          VERSIONS=""
+          
           if [ "${{ github.event_name }}" = "workflow_dispatch" ]; then
+            # For manual triggers, get labels from the PR
             LABELS=$(gh pr view ${{ inputs.pr_number }} --json labels | jq -r '.labels[].name')
           else
+            # For automatic triggers, extract from PR event
             LABELS='${{ toJSON(github.event.pull_request.labels) }}'
             LABELS=$(echo "$LABELS" | jq -r '.[].name')
           fi
-
-          add_target() {
-            local label="$1"
-            local target="$2"
-
-            if [ -z "$target" ]; then
-              return
+          
+          for label in $LABELS; do
+            # Match version labels like "1.24" (major.minor only)
+            if [[ "$label" =~ ^[0-9]+\.[0-9]+$ ]]; then
+              # Validate the branch exists before adding to list
+              if git ls-remote --exit-code origin "core/${label}" >/dev/null 2>&1; then
+                VERSIONS="${VERSIONS}${label} "
+              else
+                echo "::warning::Label '${label}' found but branch 'core/${label}' does not exist"
+              fi
             fi
+          done
 
-            target=$(echo "$target" | xargs)
-
-            if [ -z "$target" ] || [ -n "${SEEN[$target]}" ]; then
-              return
-            fi
-
-            if git ls-remote --exit-code origin "$target" >/dev/null 2>&1; then
-              TARGETS+=("$target")
-              SEEN["$target"]=1
-            else
-              echo "::warning::Label '${label}' references missing branch '${target}'"
-            fi
-          }
-
-          while IFS= read -r label; do
-            [ -z "$label" ] && continue
-
-            if [[ "$label" =~ ^branch:(.+)$ ]]; then
-              add_target "$label" "${BASH_REMATCH[1]}"
-            elif [[ "$label" =~ ^backport:(.+)$ ]]; then
-              add_target "$label" "${BASH_REMATCH[1]}"
-            elif [[ "$label" =~ ^[0-9]+\.[0-9]+$ ]]; then
-              add_target "$label" "core/${label}"
-            fi
-          done <<< "$LABELS"
-
-          if [ "${#TARGETS[@]}" -eq 0 ]; then
-            echo "::error::No backport targets found (use labels like '1.24' or 'branch:release/hotfix')"
+          if [ -z "$VERSIONS" ]; then
+            echo "::error::No version labels found (e.g., 1.24, 1.22)"
             exit 1
           fi
 
-          echo "targets=${TARGETS[*]}" >> $GITHUB_OUTPUT
-          echo "Found backport targets: ${TARGETS[*]}"
+          echo "versions=${VERSIONS}" >> $GITHUB_OUTPUT
+          echo "Found version labels: ${VERSIONS}"
 
       - name: Backport commits
         if: steps.check-existing.outputs.skip != 'true'
@@ -170,17 +150,16 @@ jobs:
             MERGE_COMMIT="${{ github.event.pull_request.merge_commit_sha }}"
           fi
 
-          for target in ${{ steps.targets.outputs.targets }}; do
-            TARGET_BRANCH="${target}"
-            SAFE_TARGET=$(echo "$TARGET_BRANCH" | tr '/' '-')
-            BACKPORT_BRANCH="backport-${PR_NUMBER}-to-${SAFE_TARGET}"
+          for version in ${{ steps.versions.outputs.versions }}; do
+            echo "::group::Backporting to core/${version}"
 
-            echo "::group::Backporting to ${TARGET_BRANCH}"
+            TARGET_BRANCH="core/${version}"
+            BACKPORT_BRANCH="backport-${PR_NUMBER}-to-${version}"
 
             # Fetch target branch (fail if doesn't exist)
             if ! git fetch origin "${TARGET_BRANCH}"; then
               echo "::error::Target branch ${TARGET_BRANCH} does not exist"
-              FAILED="${FAILED}${TARGET_BRANCH}:branch-missing "
+              FAILED="${FAILED}${version}:branch-missing "
               echo "::endgroup::"
               continue
             fi
@@ -191,7 +170,7 @@ jobs:
             # Try cherry-pick
             if git cherry-pick "${MERGE_COMMIT}"; then
               git push origin "${BACKPORT_BRANCH}"
-              SUCCESS="${SUCCESS}${TARGET_BRANCH}:${BACKPORT_BRANCH} "
+              SUCCESS="${SUCCESS}${version}:${BACKPORT_BRANCH} "
               echo "Successfully created backport branch: ${BACKPORT_BRANCH}"
               # Return to main (keep the branch, we need it for PR)
               git checkout main
@@ -201,7 +180,7 @@ jobs:
               git cherry-pick --abort
 
               echo "::error::Cherry-pick failed due to conflicts"
-              FAILED="${FAILED}${TARGET_BRANCH}:conflicts:${CONFLICTS} "
+              FAILED="${FAILED}${version}:conflicts:${CONFLICTS} "
 
               # Clean up the failed branch
               git checkout main
@@ -235,13 +214,13 @@ jobs:
           fi
           
           for backport in ${{ steps.backport.outputs.success }}; do
-            IFS=':' read -r target branch <<< "${backport}"
+            IFS=':' read -r version branch <<< "${backport}"
 
             if PR_URL=$(gh pr create \
-              --base "${target}" \
+              --base "core/${version}" \
               --head "${branch}" \
-              --title "[backport ${target}] ${PR_TITLE}" \
-              --body "Backport of #${PR_NUMBER} to \`${target}\`"$'\n\n'"Automatically created by backport workflow." \
+              --title "[backport ${version}] ${PR_TITLE}" \
+              --body "Backport of #${PR_NUMBER} to \`core/${version}\`"$'\n\n'"Automatically created by backport workflow." \
               --label "backport" 2>&1); then
 
               # Extract PR number from URL
@@ -251,9 +230,9 @@ jobs:
                 gh pr comment "${PR_NUMBER}" --body "@${PR_AUTHOR} Successfully backported to #${PR_NUM}"
               fi
             else
-              echo "::error::Failed to create PR for ${target}: ${PR_URL}"
+              echo "::error::Failed to create PR for ${version}: ${PR_URL}"
               # Still try to comment on the original PR about the failure
-              gh pr comment "${PR_NUMBER}" --body "@${PR_AUTHOR} Backport branch created but PR creation failed for \`${target}\`. Please create the PR manually from branch \`${branch}\`"
+              gh pr comment "${PR_NUMBER}" --body "@${PR_AUTHOR} Backport branch created but PR creation failed for \`core/${version}\`. Please create the PR manually from branch \`${branch}\`"
             fi
           done
 
@@ -274,16 +253,16 @@ jobs:
           fi
 
           for failure in ${{ steps.backport.outputs.failed }}; do
-            IFS=':' read -r target reason conflicts <<< "${failure}"
+            IFS=':' read -r version reason conflicts <<< "${failure}"
 
             if [ "${reason}" = "branch-missing" ]; then
-              gh pr comment "${PR_NUMBER}" --body "@${PR_AUTHOR} Backport failed: Branch \`${target}\` does not exist"
+              gh pr comment "${PR_NUMBER}" --body "@${PR_AUTHOR} Backport failed: Branch \`core/${version}\` does not exist"
 
             elif [ "${reason}" = "conflicts" ]; then
               # Convert comma-separated conflicts back to newlines for display
               CONFLICTS_LIST=$(echo "${conflicts}" | tr ',' '\n' | sed 's/^/- /')
 
-              COMMENT_BODY="@${PR_AUTHOR} Backport to \`${target}\` failed: Merge conflicts detected."$'\n\n'"Please manually cherry-pick commit \`${MERGE_COMMIT}\` to the \`${target}\` branch."$'\n\n'"<details><summary>Conflicting files</summary>"$'\n\n'"${CONFLICTS_LIST}"$'\n\n'"</details>"
+              COMMENT_BODY="@${PR_AUTHOR} Backport to \`core/${version}\` failed: Merge conflicts detected."$'\n\n'"Please manually cherry-pick commit \`${MERGE_COMMIT}\` to the \`core/${version}\` branch."$'\n\n'"<details><summary>Conflicting files</summary>"$'\n\n'"${CONFLICTS_LIST}"$'\n\n'"</details>"
               gh pr comment "${PR_NUMBER}" --body "${COMMENT_BODY}"
             fi
           done

.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/ci-json-validation.yaml

@@ -1,16 +0,0 @@
-name: "CI: JSON Validation"
-description: "Validates JSON syntax in all tracked .json files (excluding tsconfig*.json) using jq"
-
-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/ci-python-validation.yaml

@@ -1,27 +0,0 @@
-name: "CI: Python Validation"
-description: "Validates Python code in tools/devtools directory"
-
-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/ci-tests-e2e.yaml

@@ -1,236 +0,0 @@
-name: "CI: Tests E2E"
-description: "End-to-end testing with Playwright across multiple browsers, deploys test reports to Cloudflare Pages"
-
-on:
-  push:
-    branches: [main, master, core/*, desktop/*]
-  pull_request:
-    branches-ignore:
-      [wip/*, draft/*, temp/*, vue-nodes-migration, sno-playwright-*]
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
-  cancel-in-progress: true
-
-jobs:
-  setup:
-    runs-on: ubuntu-latest
-    outputs:
-      cache-key: ${{ steps.cache-key.outputs.key }}
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v5
-
-      # Setup Test Environment, build frontend but do not start server yet
-      - name: Setup ComfyUI server
-        uses: ./.github/actions/setup-comfyui-server
-      - name: Setup frontend
-        uses: ./.github/actions/setup-frontend
-        with:
-          include_build_step: true
-      - name: Setup Playwright
-        uses: ./.github/actions/setup-playwright # Setup Playwright and cache browsers
-
-      # Save the entire workspace as cache for later test jobs to restore
-      - name: Generate cache key
-        id: cache-key
-        run: echo "key=$(date +%s)" >> $GITHUB_OUTPUT
-      - name: Save cache
-        uses: actions/cache/save@5a3ec84eff668545956fd18022155c47e93e2684
-        with:
-          path: .
-          key: comfyui-setup-${{ steps.cache-key.outputs.key }}
-
-  # Sharded chromium tests
-  playwright-tests-chromium-sharded:
-    needs: setup
-    runs-on: ubuntu-latest
-    permissions:
-      contents: read
-    strategy:
-      fail-fast: false
-      matrix:
-        shardIndex: [1, 2, 3, 4, 5, 6, 7, 8]
-        shardTotal: [8]
-    steps:
-      # download built frontend repo from setup job
-      - name: Wait for cache propagation
-        run: sleep 10
-      - name: Restore cached setup
-        uses: actions/cache/restore@5a3ec84eff668545956fd18022155c47e93e2684
-        with:
-          fail-on-cache-miss: true
-          path: .
-          key: comfyui-setup-${{ needs.setup.outputs.cache-key }}
-
-      # Setup Test Environment for this runner, start server, use cached built frontend ./dist from 'setup' job
-      - name: Setup ComfyUI server
-        uses: ./.github/actions/setup-comfyui-server
-        with:
-          launch_server: true
-      - name: Setup nodejs, pnpm, reuse built frontend
-        uses: ./.github/actions/setup-frontend
-      - name: Setup Playwright
-        uses: ./.github/actions/setup-playwright
-
-      # Run sharded tests and upload sharded reports
-      - 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
-        env:
-          PLAYWRIGHT_BLOB_OUTPUT_DIR: ./blob-report
-
-      - name: Upload blob report
-        uses: actions/upload-artifact@v4
-        if: ${{ !cancelled() }}
-        with:
-          name: blob-report-chromium-${{ matrix.shardIndex }}
-          path: blob-report/
-          retention-days: 1
-
-  playwright-tests:
-    # Ideally, each shard runs test in 6 minutes, but allow up to 15 minutes
-    timeout-minutes: 15
-    needs: setup
-    runs-on: ubuntu-latest
-    permissions:
-      contents: read
-    strategy:
-      fail-fast: false
-      matrix:
-        browser: [chromium-2x, chromium-0.5x, mobile-chrome]
-    steps:
-      # download built frontend repo from setup job
-      - name: Wait for cache propagation
-        run: sleep 10
-      - name: Restore cached setup
-        uses: actions/cache/restore@5a3ec84eff668545956fd18022155c47e93e2684
-        with:
-          fail-on-cache-miss: true
-          path: .
-          key: comfyui-setup-${{ needs.setup.outputs.cache-key }}
-
-      # Setup Test Environment for this runner, start server, use cached built frontend ./dist from 'setup' job
-      - name: Setup ComfyUI server
-        uses: ./.github/actions/setup-comfyui-server
-        with:
-          launch_server: true
-      - name: Setup nodejs, pnpm, reuse built frontend
-        uses: ./.github/actions/setup-frontend
-      - name: Setup Playwright
-        uses: ./.github/actions/setup-playwright
-
-      # Run tests and upload reports
-      - name: Run Playwright tests (${{ matrix.browser }})
-        id: playwright
-        run: |
-          # Run tests with both HTML and JSON reporters
-          PLAYWRIGHT_JSON_OUTPUT_NAME=playwright-report/report.json \
-          pnpm exec playwright test --project=${{ matrix.browser }} \
-            --reporter=list \
-            --reporter=html \
-            --reporter=json
-
-      - name: Upload Playwright report
-        uses: actions/upload-artifact@v4
-        if: always()
-        with:
-          name: playwright-report-${{ matrix.browser }}
-          path: ./playwright-report/
-          retention-days: 30
-
-  # Merge sharded test reports
-  merge-reports:
-    needs: [playwright-tests-chromium-sharded]
-    runs-on: ubuntu-latest
-    if: ${{ !cancelled() }}
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v5
-
-      # Setup Test Environment, we only need playwright to merge reports
-      - name: Setup frontend
-        uses: ./.github/actions/setup-frontend
-      - name: Setup Playwright
-        uses: ./.github/actions/setup-playwright
-
-      - name: Download blob reports
-        uses: actions/download-artifact@v4
-        with:
-          path: ./all-blob-reports
-          pattern: blob-report-chromium-*
-          merge-multiple: true
-
-      - name: Merge into HTML Report
-        run: |
-          # Generate HTML report
-          pnpm exec playwright merge-reports --reporter=html ./all-blob-reports
-          # Generate JSON report separately with explicit output path
-          PLAYWRIGHT_JSON_OUTPUT_NAME=playwright-report/report.json \
-          pnpm exec playwright merge-reports --reporter=json ./all-blob-reports
-
-      - name: Upload HTML report
-        uses: actions/upload-artifact@v4
-        with:
-          name: playwright-report-chromium
-          path: ./playwright-report/
-          retention-days: 30
-
-  #### BEGIN Deployment and commenting (non-forked PRs only)
-  # when using pull_request event, we have permission to comment directly
-  # if its a forked repo, we need to use workflow_run event in a separate workflow (pr-playwright-deploy.yaml)
-
-  # 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: Get start time
-        id: start-time
-        run: echo "time=$(date -u '+%m/%d/%Y, %I:%M:%S %p')" >> $GITHUB_OUTPUT
-
-      - name: Post starting comment
-        env:
-          GITHUB_TOKEN: ${{ github.token }}
-        run: |
-          chmod +x scripts/cicd/pr-playwright-deploy-and-comment.sh
-          ./scripts/cicd/pr-playwright-deploy-and-comment.sh \
-            "${{ github.event.pull_request.number }}" \
-            "${{ github.head_ref }}" \
-            "starting" \
-            "${{ steps.start-time.outputs.time }}"
-
-  # Deploy and comment for non-forked PRs only
-  deploy-and-comment:
-    needs: [playwright-tests, merge-reports]
-    runs-on: ubuntu-latest
-    if: always() && github.event_name == 'pull_request' && github.event.pull_request.head.repo.fork == false
-    permissions:
-      pull-requests: write
-      contents: read
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v5
-
-      - name: Download all playwright reports
-        uses: actions/download-artifact@v4
-        with:
-          pattern: playwright-report-*
-          path: reports
-
-      - name: Deploy reports and comment on PR
-        env:
-          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
-          CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
-          GITHUB_TOKEN: ${{ github.token }}
-        run: |
-          bash ./scripts/cicd/pr-playwright-deploy-and-comment.sh \
-            "${{ github.event.pull_request.number }}" \
-            "${{ github.head_ref }}" \
-            "completed"
-  #### END Deployment and commenting (non-forked PRs only)

.github/workflows/ci-tests-storybook-forks.yaml

@@ -1,91 +0,0 @@
-name: "CI: Tests Storybook (Deploy for Forks)"
-description: "Deploys Storybook previews from forked PRs (forks can't access deployment secrets)"
-
-on:
-  workflow_run:
-    workflows: ["CI: Tests Storybook"]
-    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/ci-tests-storybook.yaml

@@ -1,204 +0,0 @@
-name: "CI: Tests Storybook"
-description: "Builds Storybook and runs visual regression testing via Chromatic, deploys previews to Cloudflare Pages"
-
-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: 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: 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/ci-tests-unit.yaml

@@ -1,36 +0,0 @@
-name: "CI: Tests Unit"
-description: "Unit and component testing with Vitest"
-
-on:
-  push:
-    branches: [main, master, dev*, core/*, desktop/*]
-  pull_request:
-    branches-ignore: [wip/*, draft/*, temp/*]
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
-  cancel-in-progress: true
-
-jobs:
-  test:
-    runs-on: ubuntu-latest
-
-    steps:
-      - uses: actions/checkout@v5
-
-      - name: Install pnpm
-        uses: pnpm/action-setup@v4
-        with:
-          version: 10
-
-      - name: Use Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: "lts/*"
-          cache: "pnpm"
-
-      - name: Install dependencies
-        run: pnpm install --frozen-lockfile
-
-      - name: Run Vitest tests
-        run: pnpm test:unit

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

@@ -1,5 +1,4 @@
-name: "PR: Claude Review"
-description: "AI-powered code review triggered by adding the 'claude-review' label to a PR"
+name: Claude PR Review
 
 permissions:
   contents: read
@@ -12,10 +11,6 @@ on:
   pull_request:
     types: [labeled]
 
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
-  cancel-in-progress: true
-
 jobs:
   wait-for-ci:
     runs-on: ubuntu-latest
@@ -34,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
@@ -53,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
@@ -78,10 +74,10 @@ jobs:
         with:
           label_trigger: "claude-review"
           prompt: |
-            Read the file .claude/commands/comprehensive-pr-review.md and follow ALL the instructions exactly.
-
-            CRITICAL: You must post individual inline comments using the gh api commands shown in the file.
-            DO NOT create a summary comment.
+            Read the file .claude/commands/comprehensive-pr-review.md and follow ALL the instructions exactly. 
+            
+            CRITICAL: You must post individual inline comments using the gh api commands shown in the file. 
+            DO NOT create a summary comment. 
             Each issue must be posted as a separate inline comment on the specific line of code.
           anthropic_api_key: ${{ secrets.ANTHROPIC_API_KEY }}
           claude_args: "--max-turns 256 --allowedTools 'Bash(git:*),Bash(gh api:*),Bash(gh pr:*),Bash(gh repo:*),Bash(jq:*),Bash(echo:*),Read,Write,Edit,Glob,Grep,WebFetch'"
@@ -90,10 +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 }}
-
-      - name: Remove claude-review label
-        if: always()
-        run: gh pr edit ${{ github.event.pull_request.number }} --remove-label "claude-review"
-        env:
-          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          REPOSITORY: ${{ github.repository }}

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

@@ -1,4 +1,4 @@
-name: Release Branch Create
+name: Create Release Branch
 
 on:
   pull_request:
@@ -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

@@ -1,4 +1,4 @@
-name: Release PyPI Dev
+name: Create Dev PyPI Package
 
 on:
   workflow_dispatch:
@@ -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:
@@ -25,6 +25,17 @@ jobs:
           node-version: 'lts/*'
           cache: 'pnpm'
 
+      - name: Cache tool outputs
+        uses: actions/cache@v4
+        with:
+          path: |
+            .cache
+            dist
+            tsconfig.tsbuildinfo
+          key: dev-release-tools-cache-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            dev-release-tools-cache-${{ runner.os }}-
+
       - name: Get current version
         id: current_version
         run: echo "version=$(node -p "require('./package.json').version")" >> $GITHUB_OUTPUT
@@ -33,7 +44,6 @@ jobs:
           SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
           ALGOLIA_APP_ID: ${{ secrets.ALGOLIA_APP_ID }}
           ALGOLIA_API_KEY: ${{ secrets.ALGOLIA_API_KEY }}
-          ENABLE_MINIFY: 'true'
           USE_PROD_CONFIG: 'true'
         run: |
           pnpm install --frozen-lockfile
@@ -52,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/i18n-custom-nodes.yaml

@@ -1,4 +1,4 @@
-name: i18n Update Custom Nodes
+name: Update Locales for given custom node repository
 
 on:
   workflow_dispatch:
@@ -21,64 +21,91 @@ jobs:
   update-locales:
     runs-on: ubuntu-latest
     steps:
-    - name: Checkout repository
-      uses: actions/checkout@v5
-
-    # Setup playwright environment with custom node repository
-    - name: Setup ComfyUI Server (without launching)
-      uses: ./.github/actions/setup-comfyui-server
-    - name: Setup frontend
-      uses: ./.github/actions/setup-frontend
+    - name: Checkout ComfyUI
+      uses: actions/checkout@v4
       with:
-        include_build_step: 'true'
-    - name: Setup Playwright
-      uses: ./.github/actions/setup-playwright
-
-    # Install the custom node repository
+        repository: comfyanonymous/ComfyUI
+        path: ComfyUI
+        ref: master
+    - name: Checkout ComfyUI_frontend
+      uses: actions/checkout@v4
+      with:
+        repository: Comfy-Org/ComfyUI_frontend
+        path: ComfyUI_frontend
+    - name: Copy ComfyUI_devtools from frontend repo
+      run: |
+        mkdir -p ComfyUI/custom_nodes/ComfyUI_devtools
+        cp -r ComfyUI_frontend/tools/devtools/* ComfyUI/custom_nodes/ComfyUI_devtools/
     - name: Checkout custom node repository
-      uses: actions/checkout@v5
+      uses: actions/checkout@v4
       with:
         repository: ${{ inputs.owner }}/${{ inputs.repository }}
         path: 'ComfyUI/custom_nodes/${{ inputs.repository }}'
-    - name: Install custom node Python requirements
-      working-directory: ComfyUI/custom_nodes/${{ inputs.repository }}
+    - name: Install pnpm
+      uses: pnpm/action-setup@v4
+      with:
+        version: 10
+    - uses: actions/setup-node@v4
+      with:
+        node-version: 'lts/*'
+        cache: 'pnpm'
+    - uses: actions/setup-python@v4
+      with:
+        python-version: '3.10'
+    - name: Install ComfyUI requirements
+      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
+      working-directory: ComfyUI
+    - name: Install custom node requirements
       run: |
         if [ -f "requirements.txt" ]; then
           pip install -r requirements.txt
         fi
-
-    # Start ComfyUI Server
-    - name: Start ComfyUI Server
-      shell: bash
-      working-directory: ComfyUI
+      working-directory: ComfyUI/custom_nodes/${{ inputs.repository }}
+    - name: Build & Install ComfyUI_frontend
       run: |
-        python main.py --cpu --multi-user --front-end-root ../dist --custom-node-path ../ComfyUI/custom_nodes/${{ inputs.repository }} &
-        wait-for-it --service
-
+        pnpm install --frozen-lockfile
+        pnpm build
+        rm -rf ../ComfyUI/web/*
+        mv dist/* ../ComfyUI/web/
+      working-directory: ComfyUI_frontend
+    - name: Start ComfyUI server
+      run: |
+        python main.py --cpu --multi-user &
+        wait-for-it --service 127.0.0.1:8188 -t 600
+      working-directory: ComfyUI
+    - name: Install Playwright Browsers
+      run: 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
       env:
         PLAYWRIGHT_TEST_URL: http://localhost:5173
+      working-directory: ComfyUI_frontend
     - name: Update translations
       run: pnpm locale
       env:
         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: |
         LOCALE_DIR=ComfyUI/custom_nodes/${{ inputs.repository }}/locales/
         install -d "$LOCALE_DIR"
         cp -rf ComfyUI_frontend/temp/diff/* "$LOCALE_DIR"
-    
-    # Git ops for pushing changes and creating PR
     - name: Check and create fork of custom node repository
       run: |
         # Try to fork the repository

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

@@ -1,4 +1,4 @@
-name: i18n Update Nodes
+name: Update Node Definitions Locales
 
 on:
   workflow_dispatch:
@@ -13,32 +13,25 @@ jobs:
   update-locales:
     runs-on: ubuntu-latest
     steps:
-    - name: Checkout repository
-      uses: actions/checkout@v5
-    # Setup playwright environment
-    - name: Setup ComfyUI Server (and start)
-      uses: ./.github/actions/setup-comfyui-server
-      with:
-        launch_server: true
-    - name: Setup frontend
-      uses: ./.github/actions/setup-frontend
-      with:
-        include_build_step: true
-    - name: Setup Playwright
-      uses: ./.github/actions/setup-playwright
-
+    - uses: Comfy-Org/ComfyUI_frontend_setup_action@v3
+    - 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: Update en.json
       run: pnpm collect-i18n -- scripts/collect-i18n-node-defs.ts
       env:
         PLAYWRIGHT_TEST_URL: http://localhost:5173
+      working-directory: ComfyUI_frontend
     - name: Update translations
       run: pnpm locale
       env:
         OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
+      working-directory: ComfyUI_frontend
     - name: Create Pull Request
       uses: peter-evans/create-pull-request@271a8d0340265f705b14b6d32b9829c1cb33d45e
       with:
@@ -52,3 +45,4 @@ jobs:
         branch: update-locales-node-defs-${{ github.event.inputs.trigger_type }}-${{ github.run_id }}
         base: main
         labels: dependencies
+        path: ComfyUI_frontend

.github/workflows/i18n.yaml

@@ -1,5 +1,4 @@
-name: "i18n: Update Core"
-description: "Generates and updates translations for core ComfyUI components using OpenAI"
+name: Update Locales
 
 on:
   # Manual dispatch for urgent translation updates  
@@ -15,35 +14,42 @@ 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: Checkout repository
-      uses: actions/checkout@v5
-
-    # Setup playwright environment
-    - name: Setup ComfyUI Frontend
-      uses: ./.github/actions/setup-frontend
+    - uses: Comfy-Org/ComfyUI_frontend_setup_action@v3
+    
+    - name: Cache tool outputs
+      uses: actions/cache@v4
       with:
-        include_build_step: true
-    - name: Setup ComfyUI Server
-      uses: ./.github/actions/setup-comfyui-server
+        path: |
+          ComfyUI_frontend/.cache
+          ComfyUI_frontend/.cache
+        key: i18n-tools-cache-${{ runner.os }}-${{ hashFiles('ComfyUI_frontend/pnpm-lock.yaml') }}
+        restore-keys: |
+          i18n-tools-cache-${{ runner.os }}-
+    - name: Cache Playwright browsers
+      uses: actions/cache@v4
       with:
-        launch_server: true
-    - name: Setup Playwright
-      uses: ./.github/actions/setup-playwright
-
+        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.
       run: pnpm dev:electron &
-
-    # Update locales, collect new strings and update translations using OpenAI, then commit changes
+      working-directory: ComfyUI_frontend
     - name: Update en.json
       run: pnpm collect-i18n
       env:
         PLAYWRIGHT_TEST_URL: http://localhost:5173
+      working-directory: ComfyUI_frontend
     - name: Update translations
       run: pnpm locale
       env:
         OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
+      working-directory: ComfyUI_frontend
     - name: Commit updated locales
       run: |
         git config --global user.name 'github-actions'
@@ -55,5 +61,6 @@ jobs:
         # Apply the stashed changes if any
         git stash pop || true
         git add src/locales/
-        git diff --staged --quiet || git commit -m "Update locales"
+        git diff --staged --quiet || git commit -m "Update locales [skip ci]"
         git push origin HEAD:${{ github.head_ref }}
+      working-directory: ComfyUI_frontend

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

@@ -1,14 +1,9 @@
-name: "CI: Lint Format"
-description: "Linting and code formatting validation for pull requests"
+name: Lint and Format
 
 on:
   pull_request:
     branches-ignore: [wip/*, draft/*, temp/*]
 
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
-  cancel-in-progress: true
-
 permissions:
   contents: write
   pull-requests: write
@@ -18,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
@@ -33,6 +30,21 @@ jobs:
           node-version: 'lts/*'
           cache: 'pnpm'
 
+      - name: Cache tool outputs
+        uses: actions/cache@v4
+        with:
+          path: |
+            .cache
+            .eslintcache
+            tsconfig.tsbuildinfo
+            .prettierCache
+            .knip-cache
+          key: lint-format-cache-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}-${{ hashFiles('src/**/*.{ts,vue,js,mts}', '*.config.*', '.eslintrc.*', '.prettierrc.*', 'tsconfig.json') }}
+          restore-keys: |
+            lint-format-cache-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}-
+            lint-format-cache-${{ runner.os }}-
+            ci-tools-cache-${{ runner.os }}-
+
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
@@ -57,7 +69,7 @@ jobs:
           git config --local user.email "action@github.com"
           git config --local user.name "GitHub Action"
           git add .
-          git commit -m "[automated] Apply ESLint and Prettier fixes"
+          git commit -m "[auto-fix] Apply ESLint and Prettier fixes"
           git push
 
       - name: Final validation
@@ -90,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

@@ -1,9 +1,8 @@
-name: "CI: Tests E2E (Deploy for Forks)"
-description: "Deploys test results from forked PRs (forks can't access deployment secrets)"
+name: PR Playwright Deploy (Forks)
 
 on:
   workflow_run:
-    workflows: ["CI: Tests E2E"]
+    workflows: ["Tests CI"]
     types: [requested, completed]
 
 env:
@@ -31,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-update-playwright-expectations.yaml

@@ -1,108 +0,0 @@
-# Setting test expectation screenshots for Playwright
-name: "PR: Update Playwright Expectations"
-
-on:
-  pull_request:
-    types: [labeled]
-  issue_comment:
-    types: [created]
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
-  cancel-in-progress: true
-
-jobs:
-  test:
-    runs-on: ubuntu-latest
-    if: >
-      ( github.event_name == 'pull_request' && github.event.label.name == 'New Browser Test Expectations' ) ||
-      ( github.event.issue.pull_request && 
-        github.event_name == 'issue_comment' &&
-        (
-          github.event.comment.author_association == 'OWNER' ||
-          github.event.comment.author_association == 'MEMBER' ||
-          github.event.comment.author_association == 'COLLABORATOR'
-        ) &&
-        startsWith(github.event.comment.body, '/update-playwright') )
-    steps:
-      - name: Find Update Comment
-        uses: peter-evans/find-comment@b30e6a3c0ed37e7c023ccd3f1db5c6c0b0c23aad
-        id: "find-update-comment"
-        with:
-          issue-number: ${{ github.event.number || github.event.issue.number }}
-          comment-author: "github-actions[bot]"
-          body-includes: "Updating Playwright Expectations"
-
-      - name: Add Starting Reaction
-        uses: peter-evans/create-or-update-comment@e8674b075228eee787fea43ef493e45ece1004c9
-        with:
-          comment-id: ${{ steps.find-update-comment.outputs.comment-id }}
-          issue-number: ${{ github.event.number || github.event.issue.number }}
-          body: |
-            Updating Playwright Expectations
-          edit-mode: replace
-          reactions: eyes
-
-      - name: Get Branch SHA
-        id: "get-branch"
-        run: echo ::set-output name=branch::$(gh pr view $PR_NO --repo $REPO --json headRefName --jq '.headRefName')
-        env:
-          REPO: ${{ github.repository }}
-          PR_NO: ${{ github.event.number || github.event.issue.number }}
-          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Initial Checkout
-        uses: actions/checkout@v5
-        with:
-          ref: ${{ steps.get-branch.outputs.branch }}
-      - name: Setup Frontend
-        uses: ./.github/actions/setup-frontend
-        with:
-          include_build_step: true
-      - name: Setup ComfyUI Server
-        uses: ./.github/actions/setup-comfyui-server
-        with:
-          launch_server: true
-      - name: Setup Playwright
-        uses: ./.github/actions/setup-playwright
-      - name: Run Playwright tests and update snapshots
-        id: playwright-tests
-        run: pnpm exec playwright test --update-snapshots
-        continue-on-error: true
-      - uses: actions/upload-artifact@v4
-        if: always()
-        with:
-          name: playwright-report
-          path: ./playwright-report/
-          retention-days: 30
-      - name: Debugging info
-        run: |
-          echo "PR: ${{ github.event.issue.number }}"
-          echo "Branch: ${{ steps.get-branch.outputs.branch }}"
-          git status
-      - name: Commit updated expectations
-        run: |
-          git config --global user.name 'github-actions'
-          git config --global user.email 'github-actions@github.com'
-          git add browser_tests
-          if git diff --cached --quiet; then
-            echo "No changes to commit"
-          else
-            git commit -m "[automated] Update test expectations"
-            git push origin ${{ steps.get-branch.outputs.branch }}
-          fi
-
-      - name: Add Done Reaction
-        uses: peter-evans/create-or-update-comment@e8674b075228eee787fea43ef493e45ece1004c9
-        if: github.event_name == 'issue_comment'
-        with:
-          comment-id: ${{ steps.find-update-comment.outputs.comment-id }}
-          issue-number: ${{ github.event.number || github.event.issue.number }}
-          reactions: +1
-          reactions-edit-mode: replace
-
-      - name: Remove New Browser Test Expectations label
-        if: always() && github.event_name == 'pull_request'
-        run: gh pr edit ${{ github.event.pull_request.number }} --remove-label "New Browser Test Expectations"
-        env:
-          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/publish-desktop-ui-on-merge.yaml

@@ -1,59 +0,0 @@
-name: Publish Desktop UI on PR Merge
-
-on:
-  pull_request:
-    types: [ closed ]
-    branches: [ main, core/* ]
-    paths:
-      - 'apps/desktop-ui/package.json'
-
-jobs:
-  resolve:
-    name: Resolve Version and Dist Tag
-    runs-on: ubuntu-latest
-    if: >
-      github.event.pull_request.merged == true &&
-      contains(github.event.pull_request.labels.*.name, 'Release')
-    outputs:
-      version: ${{ steps.get_version.outputs.version }}
-      dist_tag: ${{ steps.dist.outputs.dist_tag }}
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v5
-        with:
-          ref: ${{ github.event.pull_request.merge_commit_sha }}
-          persist-credentials: false
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v5
-        with:
-          node-version: '24.x'
-
-      - name: Read desktop-ui version
-        id: get_version
-        run: |
-          VERSION=$(node -p "require('./apps/desktop-ui/package.json').version")
-          echo "version=$VERSION" >> $GITHUB_OUTPUT
-
-      - name: Determine dist-tag
-        id: dist
-        env:
-          VERSION: ${{ steps.get_version.outputs.version }}
-        run: |
-          if [[ "$VERSION" =~ ^[0-9]+\.[0-9]+\.[0-9]+- ]]; then
-            echo "dist_tag=next" >> $GITHUB_OUTPUT
-          else
-            echo "dist_tag=latest" >> $GITHUB_OUTPUT
-          fi
-
-  publish:
-    name: Publish Desktop UI to npm
-    needs: resolve
-    uses: ./.github/workflows/publish-desktop-ui.yaml
-    with:
-      version: ${{ needs.resolve.outputs.version }}
-      dist_tag: ${{ needs.resolve.outputs.dist_tag }}
-      ref: ${{ github.event.pull_request.merge_commit_sha }}
-    secrets:
-      NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-

.github/workflows/publish-desktop-ui.yaml

@@ -1,192 +0,0 @@
-name: Publish Desktop UI
-
-on:
-  workflow_dispatch:
-    inputs:
-      version:
-        description: 'Version to publish (e.g., 1.2.3)'
-        required: true
-        type: string
-      dist_tag:
-        description: 'npm dist-tag to use'
-        required: true
-        default: latest
-        type: string
-      ref:
-        description: 'Git ref to checkout (commit SHA, tag, or branch)'
-        required: false
-        type: string
-  workflow_call:
-    inputs:
-      version:
-        required: true
-        type: string
-      dist_tag:
-        required: false
-        type: string
-        default: latest
-      ref:
-        required: false
-        type: string
-    secrets:
-      NPM_TOKEN:
-        required: true
-
-concurrency:
-  group: publish-desktop-ui-${{ github.workflow }}-${{ inputs.version }}-${{ inputs.dist_tag }}
-  cancel-in-progress: false
-
-jobs:
-  publish_desktop_ui:
-    name: Publish @comfyorg/desktop-ui
-    runs-on: ubuntu-latest
-    permissions:
-      contents: read
-    env:
-      PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: '1'
-      ENABLE_MINIFY: 'true'
-    steps:
-      - name: Validate inputs
-        env:
-          VERSION: ${{ inputs.version }}
-        shell: bash
-        run: |
-          set -euo pipefail
-          SEMVER_REGEX='^(0|[1-9][0-9]*)\.(0|[1-9][0-9]*)\.(0|[1-9][0-9]*)(-((0|[1-9][0-9]*|[0-9]*[A-Za-z-][0-9A-Za-z-]*)(\.(0|[1-9][0-9]*|[0-9]*[A-Za-z-][0-9A-Za-z-]*))*))?(\+([0-9A-Za-z-]+(\.[0-9A-Za-z-]+)*))?$'
-          if [[ ! "$VERSION" =~ $SEMVER_REGEX ]]; then
-            echo "::error title=Invalid version::Version '$VERSION' must follow semantic versioning (x.y.z[-suffix][+build])" >&2
-            exit 1
-          fi
-
-      - name: Determine ref to checkout
-        id: resolve_ref
-        env:
-          REF: ${{ inputs.ref }}
-          VERSION: ${{ inputs.version }}
-        shell: bash
-        run: |
-          set -euo pipefail
-          if [ -n "$REF" ]; then
-            if ! git check-ref-format --allow-onelevel "$REF"; then
-              echo "::error title=Invalid ref::Ref '$REF' fails git check-ref-format validation." >&2
-              exit 1
-            fi
-            echo "ref=$REF" >> "$GITHUB_OUTPUT"
-          else
-            echo "ref=refs/tags/v$VERSION" >> "$GITHUB_OUTPUT"
-          fi
-
-      - name: Checkout repository
-        uses: actions/checkout@v5
-        with:
-          ref: ${{ steps.resolve_ref.outputs.ref }}
-          fetch-depth: 1
-          persist-credentials: false
-
-      - name: Install pnpm
-        uses: pnpm/action-setup@v4
-        with:
-          version: 10
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v5
-        with:
-          node-version: '24.x'
-          cache: 'pnpm'
-          registry-url: https://registry.npmjs.org
-
-      - name: Install dependencies
-        run: pnpm install --frozen-lockfile --ignore-scripts
-
-      - name: Build Desktop UI
-        run: pnpm build:desktop
-
-      - name: Prepare npm package
-        id: pkg
-        shell: bash
-        run: |
-          set -euo pipefail
-          APP_PKG=apps/desktop-ui/package.json
-          ROOT_PKG=package.json
-
-          NAME=$(jq -r .name "$APP_PKG")
-          APP_VERSION=$(jq -r .version "$APP_PKG")
-          ROOT_LICENSE=$(jq -r .license "$ROOT_PKG")
-          REPO=$(jq -r .repository "$ROOT_PKG")
-
-          if [ -z "$NAME" ] || [ "$NAME" = "null" ]; then
-            echo "::error title=Missing name::apps/desktop-ui/package.json is missing 'name'" >&2
-            exit 1
-          fi
-
-          INPUT_VERSION="${{ inputs.version }}"
-          if [ "$APP_VERSION" != "$INPUT_VERSION" ]; then
-            echo "::error title=Version mismatch::apps/desktop-ui version $APP_VERSION does not match input $INPUT_VERSION" >&2
-            exit 1
-          fi
-
-          if [ ! -d apps/desktop-ui/dist ]; then
-            echo "::error title=Missing build::apps/desktop-ui/dist not found. Did build succeed?" >&2
-            exit 1
-          fi
-
-          PUBLISH_DIR=apps/desktop-ui/.npm-publish
-          rm -rf "$PUBLISH_DIR"
-          mkdir -p "$PUBLISH_DIR"
-          cp -R apps/desktop-ui/dist "$PUBLISH_DIR/dist"
-
-          INPUT_VERSION="${{ inputs.version }}"
-          jq -n \
-            --arg name "$NAME" \
-            --arg version "$INPUT_VERSION" \
-            --arg description "Static assets for the ComfyUI Desktop UI" \
-            --arg license "$ROOT_LICENSE" \
-            --arg repository "$REPO" \
-            '{
-              name: $name,
-              version: $version,
-              description: $description,
-              license: $license,
-              repository: $repository,
-              type: "module",
-              private: false,
-              files: ["dist"],
-              publishConfig: { access: "public" }
-            }' > "$PUBLISH_DIR/package.json"
-
-          if [ -f apps/desktop-ui/README.md ]; then
-            cp apps/desktop-ui/README.md "$PUBLISH_DIR/README.md"
-          fi
-
-          echo "publish_dir=$PUBLISH_DIR" >> "$GITHUB_OUTPUT"
-          echo "name=$NAME" >> "$GITHUB_OUTPUT"
-
-      - name: Check if version already on npm
-        id: check_npm
-        env:
-          NAME: ${{ steps.pkg.outputs.name }}
-          VER: ${{ inputs.version }}
-        shell: bash
-        run: |
-          set -euo pipefail
-          STATUS=0
-          OUTPUT=$(npm view "${NAME}@${VER}" --json 2>&1) || STATUS=$?
-          if [ "$STATUS" -eq 0 ]; then
-            echo "exists=true" >> "$GITHUB_OUTPUT"
-            echo "::warning title=Already published::${NAME}@${VER} already exists on npm. Skipping publish."
-          else
-            if echo "$OUTPUT" | grep -q "E404"; then
-              echo "exists=false" >> "$GITHUB_OUTPUT"
-            else
-              echo "::error title=Registry lookup failed::$OUTPUT" >&2
-              exit "$STATUS"
-            fi
-          fi
-
-      - name: Publish package
-        if: steps.check_npm.outputs.exists == 'false'
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
-          DIST_TAG: ${{ inputs.dist_tag }}
-        run: pnpm publish --access public --tag "$DIST_TAG" --no-git-checks --ignore-scripts
-        working-directory: ${{ steps.pkg.outputs.publish_dir }}

.github/workflows/publish-frontend-types.yaml

@@ -1,4 +1,4 @@
-name: Release NPM Types
+name: Publish Frontend Types
 
 on:
   workflow_dispatch:

.github/workflows/release.yaml

@@ -1,4 +1,4 @@
-name: Release Draft Create
+name: Create Release Draft
 
 on:
   pull_request:
@@ -28,6 +28,16 @@ jobs:
           node-version: 'lts/*'
           cache: 'pnpm'
 
+      - name: Cache tool outputs
+        uses: actions/cache@v4
+        with:
+          path: |
+            .cache
+            tsconfig.tsbuildinfo
+          key: release-tools-cache-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            release-tools-cache-${{ runner.os }}-
+
       - name: Get current version
         id: current_version
         run: echo "version=$(node -p "require('./package.json').version")" >> $GITHUB_OUTPUT
@@ -45,7 +55,6 @@ jobs:
           SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
           ALGOLIA_APP_ID: ${{ secrets.ALGOLIA_APP_ID }}
           ALGOLIA_API_KEY: ${{ secrets.ALGOLIA_API_KEY }}
-          ENABLE_MINIFY: 'true'
           USE_PROD_CONFIG: 'true'
         run: |
           pnpm install --frozen-lockfile
@@ -117,7 +126,7 @@ jobs:
 
   publish_types:
     needs: build
-    uses: ./.github/workflows/release-npm-types.yaml
+    uses: ./.github/workflows/publish-frontend-types.yaml
     with:
       version: ${{ needs.build.outputs.version }}
       ref: ${{ github.event.pull_request.merge_commit_sha }}

.github/workflows/size-data.yml

@@ -1,52 +0,0 @@
-name: size data
-
-on:
-  push:
-    branches:
-      - main
-  pull_request:
-    branches:
-      - main
-
-permissions:
-  contents: read
-
-jobs:
-  collect:
-    if: github.repository == 'Comfy-Org/ComfyUI_frontend'
-    runs-on: ubuntu-latest
-
-    steps:
-      - uses: actions/checkout@v5
-
-      - name: Install pnpm
-        uses: pnpm/action-setup@v4.1.0
-        with:
-          version: 10
-
-      - name: Install Node.js
-        uses: actions/setup-node@v5
-        with:
-          node-version: '24.x'
-          cache: pnpm
-
-      - name: Install dependencies
-        run: pnpm install
-
-      - name: Build project
-        run: pnpm build
-
-      - name: Collect size data
-        run: node scripts/size-collect.js
-
-      - name: Save PR number & base branch
-        if: ${{ github.event_name == 'pull_request' }}
-        run: |
-          echo ${{ github.event.number }} > ./temp/size/number.txt
-          echo ${{ github.base_ref }} > ./temp/size/base.txt
-
-      - name: Upload size data
-        uses: actions/upload-artifact@v4
-        with:
-          name: size-data
-          path: temp/size

.github/workflows/size-report.yml

@@ -1,104 +0,0 @@
-name: size report
-
-on:
-  workflow_run:
-    workflows: ['size data']
-    types:
-      - completed
-  workflow_dispatch:
-    inputs:
-      pr_number:
-        description: 'PR number to report on'
-        required: true
-        type: number
-      run_id:
-        description: 'Size data workflow run ID'
-        required: true
-        type: string
-
-permissions:
-  contents: read
-  pull-requests: write
-  issues: write
-
-jobs:
-  size-report:
-    runs-on: ubuntu-latest
-    if: >
-      github.repository == 'Comfy-Org/ComfyUI_frontend' &&
-      (
-        (github.event_name == 'workflow_run' &&
-         github.event.workflow_run.event == 'pull_request' &&
-         github.event.workflow_run.conclusion == 'success') ||
-        github.event_name == 'workflow_dispatch'
-      )
-    steps:
-      - uses: actions/checkout@v5
-
-      - name: Install pnpm
-        uses: pnpm/action-setup@v4.1.0
-        with:
-          version: 10
-
-      - name: Install Node.js
-        uses: actions/setup-node@v5
-        with:
-          node-version: '24.x'
-          cache: pnpm
-
-      - name: Install dependencies
-        run: pnpm install
-
-      - name: Download size data
-        uses: dawidd6/action-download-artifact@v11
-        with:
-          name: size-data
-          run_id: ${{ github.event_name == 'workflow_dispatch' && inputs.run_id || github.event.workflow_run.id }}
-          path: temp/size
-
-      - name: Set PR number
-        id: pr-number
-        run: |
-          if [ "${{ github.event_name }}" == "workflow_dispatch" ]; then
-            echo "content=${{ inputs.pr_number }}" >> $GITHUB_OUTPUT
-          else
-            echo "content=$(cat temp/size/number.txt)" >> $GITHUB_OUTPUT
-          fi
-
-      - name: Set base branch
-        id: pr-base
-        run: |
-          if [ "${{ github.event_name }}" == "workflow_dispatch" ]; then
-            echo "content=main" >> $GITHUB_OUTPUT
-          else
-            echo "content=$(cat temp/size/base.txt)" >> $GITHUB_OUTPUT
-          fi
-
-      - name: Download previous size data
-        uses: dawidd6/action-download-artifact@v11
-        with:
-          branch: ${{ steps.pr-base.outputs.content }}
-          workflow: size-data.yml
-          event: push
-          name: size-data
-          path: temp/size-prev
-          if_no_artifact_found: warn
-
-      - name: Generate size report
-        run: node scripts/size-report.js > size-report.md
-
-      - name: Read size report
-        id: size-report
-        uses: juliangruber/read-file-action@v1
-        with:
-          path: ./size-report.md
-
-      - name: Create or update PR comment
-        uses: actions-cool/maintain-one-comment@v3
-        with:
-          token: ${{ secrets.GITHUB_TOKEN }}
-          number: ${{ steps.pr-number.outputs.content }}
-          body: |
-            ${{ steps.size-report.outputs.content }}
-            <!-- COMFYUI_FRONTEND_SIZE -->
-          body-include: '<!-- COMFYUI_FRONTEND_SIZE -->'

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

@@ -0,0 +1,49 @@
+# Setting test expectation screenshots for Playwright
+name: Update Playwright Expectations
+
+on:
+  pull_request:
+    types: [ labeled ]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    if: github.event.label.name == 'New Browser Test Expectations'
+    steps:
+    - uses: Comfy-Org/ComfyUI_frontend_setup_action@v3
+    - name: Cache Playwright browsers
+      uses: actions/cache@v4
+      with:
+        path: ~/.cache/ms-playwright
+        key: playwright-browsers-${{ runner.os }}-${{ hashFiles('ComfyUI_frontend/pnpm-lock.yaml') }}
+        restore-keys: |
+          playwright-browsers-${{ runner.os }}-
+    - name: Install Playwright Browsers
+      run: npx playwright install chromium --with-deps
+      working-directory: ComfyUI_frontend
+    - name: Run Playwright tests and update snapshots
+      id: playwright-tests
+      run: npx playwright test --update-snapshots
+      continue-on-error: true
+      working-directory: ComfyUI_frontend
+    - uses: actions/upload-artifact@v4
+      if: always()
+      with:
+        name: playwright-report
+        path: ComfyUI_frontend/playwright-report/
+        retention-days: 30
+    - name: Debugging info
+      run: |
+        echo "Branch: ${{ github.head_ref }}"
+        git status
+      working-directory: ComfyUI_frontend
+    - name: Commit updated expectations
+      run: |
+        git config --global user.name 'github-actions'
+        git config --global user.email 'github-actions@github.com'
+        git fetch origin ${{ github.head_ref }}
+        git checkout -B ${{ github.head_ref }} origin/${{ github.head_ref }}
+        git add browser_tests
+        git commit -m "Update test expectations [skip ci]"
+        git push origin HEAD:${{ github.head_ref }}
+      working-directory: ComfyUI_frontend

.github/workflows/test-ui.yaml

@@ -0,0 +1,357 @@
+name: Tests CI
+
+on:
+  push:
+    branches: [main, master, core/*, desktop/*]
+  pull_request:
+    branches-ignore:
+      [wip/*, draft/*, temp/*, vue-nodes-migration, sno-playwright-*]
+
+jobs:
+  setup:
+    runs-on: ubuntu-latest
+    outputs:
+      cache-key: ${{ steps.cache-key.outputs.key }}
+      playwright-version: ${{ steps.playwright-version.outputs.PLAYWRIGHT_VERSION }}
+    steps:
+      - name: Checkout ComfyUI
+        uses: actions/checkout@v4
+        with:
+          repository: 'comfyanonymous/ComfyUI'
+          path: 'ComfyUI'
+          ref: master
+
+      - name: Checkout ComfyUI_frontend
+        uses: actions/checkout@v4
+        with:
+          repository: 'Comfy-Org/ComfyUI_frontend'
+          path: 'ComfyUI_frontend'
+
+      - name: Copy ComfyUI_devtools from frontend repo
+        run: |
+          mkdir -p ComfyUI/custom_nodes/ComfyUI_devtools
+          cp -r ComfyUI_frontend/tools/devtools/* ComfyUI/custom_nodes/ComfyUI_devtools/
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+          cache: 'pnpm'
+          cache-dependency-path: 'ComfyUI_frontend/pnpm-lock.yaml'
+
+      - name: Cache tool outputs
+        uses: actions/cache@v4
+        with:
+          path: |
+            ComfyUI_frontend/.cache
+            ComfyUI_frontend/tsconfig.tsbuildinfo
+          key: playwright-setup-cache-${{ runner.os }}-${{ hashFiles('ComfyUI_frontend/pnpm-lock.yaml') }}-${{ hashFiles('ComfyUI_frontend/src/**/*.{ts,vue,js}', 'ComfyUI_frontend/*.config.*') }}
+          restore-keys: |
+            playwright-setup-cache-${{ runner.os }}-${{ hashFiles('ComfyUI_frontend/pnpm-lock.yaml') }}-
+            playwright-setup-cache-${{ runner.os }}-
+            playwright-tools-cache-${{ runner.os }}-
+
+      - name: Build ComfyUI_frontend
+        run: |
+          pnpm install --frozen-lockfile
+          pnpm build
+        working-directory: ComfyUI_frontend
+
+      - name: Generate cache key
+        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
+        with:
+          path: |
+            ComfyUI
+            ComfyUI_frontend
+          key: comfyui-setup-${{ steps.cache-key.outputs.key }}
+
+  # Sharded chromium tests
+  playwright-tests-chromium-sharded:
+    needs: setup
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+    strategy:
+      fail-fast: false
+      matrix:
+        shardIndex: [1, 2, 3, 4, 5, 6, 7, 8]
+        shardTotal: [8]
+    steps:
+      - name: Wait for cache propagation
+        run: sleep 10
+
+      - name: Restore cached setup
+        uses: actions/cache/restore@5a3ec84eff668545956fd18022155c47e93e2684
+        with:
+          fail-on-cache-miss: true
+          path: |
+            ComfyUI
+            ComfyUI_frontend
+          key: comfyui-setup-${{ needs.setup.outputs.cache-key }}
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
+
+      - uses: actions/setup-python@v4
+        with:
+          python-version: '3.10'
+          cache: 'pip'
+
+      - name: Install requirements
+        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
+        working-directory: ComfyUI
+
+
+      - name: Cache Playwright Browsers
+        uses: actions/cache@v4
+        id: cache-playwright-browsers
+        with:
+          path: '~/.cache/ms-playwright'
+          key: '${{ runner.os }}-playwright-browsers-${{ needs.setup.outputs.playwright-version }}'
+
+      - name: Install Playwright Browsers
+        if: steps.cache-playwright-browsers.outputs.cache-hit != 'true'
+        run: pnpm exec playwright install chromium --with-deps
+        working-directory: ComfyUI_frontend
+
+      - name: Install Playwright Browsers (operating system dependencies)
+        if: steps.cache-playwright-browsers.outputs.cache-hit == 'true'
+        run: pnpm exec playwright install-deps
+        working-directory: ComfyUI_frontend
+
+      - name: Start ComfyUI server
+        run: |
+          python main.py --cpu --multi-user --front-end-root ../ComfyUI_frontend/dist &
+          wait-for-it --service 127.0.0.1:8188 -t 600
+        working-directory: ComfyUI
+
+      - name: Run Playwright tests (Shard ${{ matrix.shardIndex }}/${{ matrix.shardTotal }})
+        id: playwright
+        run: npx playwright test --project=chromium --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }} --reporter=blob
+        working-directory: ComfyUI_frontend
+        env:
+          PLAYWRIGHT_BLOB_OUTPUT_DIR: ../blob-report
+
+      - uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: blob-report-chromium-${{ matrix.shardIndex }}
+          path: blob-report/
+          retention-days: 1
+
+  playwright-tests:
+    # Ideally, each shard runs test in 6 minutes, but allow up to 15 minutes
+    timeout-minutes: 15
+    needs: setup
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+    strategy:
+      fail-fast: false
+      matrix:
+        browser: [chromium-2x, chromium-0.5x, mobile-chrome]
+    steps:
+      - name: Wait for cache propagation
+        run: sleep 10
+
+      - name: Restore cached setup
+        uses: actions/cache/restore@5a3ec84eff668545956fd18022155c47e93e2684
+        with:
+          fail-on-cache-miss: true
+          path: |
+            ComfyUI
+            ComfyUI_frontend
+          key: comfyui-setup-${{ needs.setup.outputs.cache-key }}
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
+
+      - uses: actions/setup-python@v4
+        with:
+          python-version: '3.10'
+          cache: 'pip'
+
+      - name: Install requirements
+        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
+        working-directory: ComfyUI
+
+      - name: Cache Playwright Browsers
+        uses: actions/cache@v4
+        id: cache-playwright-browsers
+        with:
+          path: '~/.cache/ms-playwright'
+          key: '${{ runner.os }}-playwright-browsers-${{ needs.setup.outputs.playwright-version }}'
+
+      - name: Install Playwright Browsers
+        if: steps.cache-playwright-browsers.outputs.cache-hit != 'true'
+        run: pnpm exec playwright install chromium --with-deps
+        working-directory: ComfyUI_frontend
+
+      - name: Install Playwright Browsers (operating system dependencies)
+        if: steps.cache-playwright-browsers.outputs.cache-hit == 'true'
+        run: pnpm exec playwright install-deps
+        working-directory: ComfyUI_frontend
+
+      - name: Start ComfyUI server
+        run: |
+          python main.py --cpu --multi-user --front-end-root ../ComfyUI_frontend/dist &
+          wait-for-it --service 127.0.0.1:8188 -t 600
+        working-directory: ComfyUI
+
+      - name: Run Playwright tests (${{ matrix.browser }})
+        id: playwright
+        run: |
+          # Run tests with both HTML and JSON reporters
+          PLAYWRIGHT_JSON_OUTPUT_NAME=playwright-report/report.json \
+          npx playwright test --project=${{ matrix.browser }} \
+            --reporter=list \
+            --reporter=html \
+            --reporter=json
+        working-directory: ComfyUI_frontend
+
+      - uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-report-${{ matrix.browser }}
+          path: ComfyUI_frontend/playwright-report/
+          retention-days: 30
+
+  # Merge sharded test reports
+  merge-reports:
+    needs: [playwright-tests-chromium-sharded]
+    runs-on: ubuntu-latest
+    if: ${{ !cancelled() }}
+    steps:
+      - name: Checkout ComfyUI_frontend
+        uses: actions/checkout@v4
+        with:
+          repository: 'Comfy-Org/ComfyUI_frontend'
+          path: 'ComfyUI_frontend'
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+          cache: 'pnpm'
+          cache-dependency-path: 'ComfyUI_frontend/pnpm-lock.yaml'
+
+      - name: Install dependencies
+        run: |
+          pnpm install --frozen-lockfile
+        working-directory: ComfyUI_frontend
+
+      - name: Download blob reports
+        uses: actions/download-artifact@v4
+        with:
+          path: ComfyUI_frontend/all-blob-reports
+          pattern: blob-report-chromium-*
+          merge-multiple: true
+
+      - name: Merge into HTML Report
+        run: |
+          # Generate HTML report
+          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 \
+          npx playwright merge-reports --reporter=json ./all-blob-reports
+        working-directory: ComfyUI_frontend
+
+      - name: Upload HTML report
+        uses: actions/upload-artifact@v4
+        with:
+          name: playwright-report-chromium
+          path: ComfyUI_frontend/playwright-report/
+          retention-days: 30
+
+  #### BEGIN Deployment and commenting (non-forked PRs only)
+  # when using pull_request event, we have permission to comment directly
+  # if its a forked repo, we need to use workflow_run event in a separate workflow (pr-playwright-deploy.yaml)
+
+  # 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@v4
+        
+      - name: Get start time
+        id: start-time
+        run: echo "time=$(date -u '+%m/%d/%Y, %I:%M:%S %p')" >> $GITHUB_OUTPUT
+        
+      - name: Post starting comment
+        env:
+          GITHUB_TOKEN: ${{ github.token }}
+        run: |
+          chmod +x scripts/cicd/pr-playwright-deploy-and-comment.sh
+          ./scripts/cicd/pr-playwright-deploy-and-comment.sh \
+            "${{ github.event.pull_request.number }}" \
+            "${{ github.head_ref }}" \
+            "starting" \
+            "${{ steps.start-time.outputs.time }}"
+          
+  # Deploy and comment for non-forked PRs only
+  deploy-and-comment:
+    needs: [playwright-tests, merge-reports]
+    runs-on: ubuntu-latest
+    if: always() && github.event_name == 'pull_request' && github.event.pull_request.head.repo.fork == false
+    permissions:
+      pull-requests: write
+      contents: read
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        
+      - name: Download all playwright reports
+        uses: actions/download-artifact@v4
+        with:
+          pattern: playwright-report-*
+          path: reports
+          
+      - name: Make deployment script executable
+        run: chmod +x scripts/cicd/pr-playwright-deploy-and-comment.sh
+        
+      - name: Deploy reports and comment on PR
+        env:
+          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          GITHUB_TOKEN: ${{ github.token }}
+        run: |
+          ./scripts/cicd/pr-playwright-deploy-and-comment.sh \
+            "${{ github.event.pull_request.number }}" \
+            "${{ github.head_ref }}" \
+            "completed"
+  #### END Deployment and commenting (non-forked PRs only)

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

@@ -1,5 +1,4 @@
-name: 'Api: Update Electron API Types'
-description: 'When upstream electron API is updated, click dispatch to update the TypeScript type definitions in this repo'
+name: Update Electron Types
 
 on:
   workflow_dispatch:
@@ -13,7 +12,7 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v5
+        uses: actions/checkout@v4
 
       - name: Install pnpm
         uses: pnpm/action-setup@v4
@@ -26,6 +25,15 @@ jobs:
           node-version: lts/*
           cache: 'pnpm'
 
+      - name: Cache tool outputs
+        uses: actions/cache@v4
+        with:
+          path: |
+            .cache
+          key: electron-types-tools-cache-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            electron-types-tools-cache-${{ runner.os }}-
+
       - name: Update electron types
         run: pnpm install --workspace-root @comfyorg/comfyui-electron-types@latest
 

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

@@ -1,5 +1,4 @@
-name: 'Api: Update Manager API Types'
-description: 'When upstream ComfyUI-Manager API is updated, click dispatch to update the TypeScript type definitions in this repo'
+name: Update ComfyUI-Manager API Types
 
 on:
   # Manual trigger
@@ -18,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
@@ -31,11 +30,28 @@ jobs:
           node-version: lts/*
           cache: 'pnpm'
 
+      - name: Cache tool outputs
+        uses: actions/cache@v4
+        with:
+          path: |
+            .cache
+          key: update-manager-tools-cache-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            update-manager-tools-cache-${{ runner.os }}-
+
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
+      - name: Cache ComfyUI-Manager repository
+        uses: actions/cache@v4
+        with:
+          path: ComfyUI-Manager
+          key: comfyui-manager-repo-${{ runner.os }}-${{ github.run_id }}
+          restore-keys: |
+            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
@@ -52,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

@@ -1,5 +1,4 @@
-name: 'Api: Update Registry API Types'
-description: 'When upstream comfy-api is updated, click dispatch to update the TypeScript type definitions in this repo'
+name: Update Comfy Registry API Types
 
 on:
   # Manual trigger
@@ -17,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
@@ -30,11 +29,28 @@ jobs:
           node-version: lts/*
           cache: 'pnpm'
 
+      - name: Cache tool outputs
+        uses: actions/cache@v4
+        with:
+          path: |
+            .cache
+          key: update-registry-tools-cache-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            update-registry-tools-cache-${{ runner.os }}-
+
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
+      - name: Cache comfy-api repository
+        uses: actions/cache@v4
+        with:
+          path: comfy-api
+          key: comfy-api-repo-${{ runner.os }}-${{ github.run_id }}
+          restore-keys: |
+            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
@@ -52,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
@@ -71,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
@@ -106,4 +121,4 @@ jobs:
           labels: CNR
           delete-branch: true
           add-paths: |
-            packages/registry-types/src/comfyRegistryTypes.ts
+            src/types/comfyRegistryTypes.ts

.github/workflows/version-bump-desktop-ui.yaml

@@ -1,95 +0,0 @@
-name: Version Bump Desktop UI
-
-on:
-  workflow_dispatch:
-    inputs:
-      version_type:
-        description: 'Version increment type'
-        required: true
-        default: 'patch'
-        type: 'choice'
-        options: [patch, minor, major, prepatch, preminor, premajor, prerelease]
-      pre_release:
-        description: Pre-release ID (suffix)
-        required: false
-        default: ''
-        type: string
-      branch:
-        description: 'Base branch to bump (e.g., main, core/1.29, core/1.30)'
-        required: true
-        default: 'main'
-        type: string
-
-jobs:
-  bump-version-desktop-ui:
-    runs-on: ubuntu-latest
-    permissions:
-      contents: write
-      pull-requests: write
-
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v5
-        with:
-          ref: ${{ github.event.inputs.branch }}
-          fetch-depth: 0
-          persist-credentials: false
-
-      - name: Validate branch exists
-        run: |
-          BRANCH="${{ github.event.inputs.branch }}"
-          if ! git show-ref --verify --quiet "refs/heads/$BRANCH" && ! git show-ref --verify --quiet "refs/remotes/origin/$BRANCH"; then
-            echo "❌ Branch '$BRANCH' does not exist"
-            echo ""
-            echo "Available core branches:"
-            git branch -r | grep 'origin/core/' | sed 's/.*origin\//  - /' || echo "  (none found)"
-            echo ""
-            echo "Main branch:"
-            echo "  - main"
-            exit 1
-          fi
-          echo "✅ Branch '$BRANCH' exists"
-
-      - name: Install pnpm
-        uses: pnpm/action-setup@v4
-        with:
-          version: 10
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v5
-        with:
-          node-version: '24.x'
-          cache: 'pnpm'
-
-      - name: Bump desktop-ui version
-        id: bump-version
-        env:
-          VERSION_TYPE: ${{ github.event.inputs.version_type }}
-          PRE_RELEASE: ${{ github.event.inputs.pre_release }}
-        run: |
-          pnpm -C apps/desktop-ui version "$VERSION_TYPE" --preid "$PRE_RELEASE" --no-git-tag-version
-          NEW_VERSION=$(node -p "require('./apps/desktop-ui/package.json').version")
-          echo "NEW_VERSION=$NEW_VERSION" >> $GITHUB_OUTPUT
-
-      - name: Format PR string
-        id: capitalised
-        env:
-          VERSION_TYPE: ${{ github.event.inputs.version_type }}
-        run: |
-          echo "capitalised=${VERSION_TYPE@u}" >> $GITHUB_OUTPUT
-
-      - name: Create Pull Request
-        uses: peter-evans/create-pull-request@271a8d0340265f705b14b6d32b9829c1cb33d45e
-        with:
-          token: ${{ secrets.PR_GH_TOKEN }}
-          commit-message: '[release] Increment desktop-ui to ${{ steps.bump-version.outputs.NEW_VERSION }}'
-          title: desktop-ui ${{ steps.bump-version.outputs.NEW_VERSION }}
-          body: |
-            ${{ steps.capitalised.outputs.capitalised }} version increment for @comfyorg/desktop-ui to ${{ steps.bump-version.outputs.NEW_VERSION }}
-
-            **Base branch:** `${{ github.event.inputs.branch }}`
-          branch: desktop-ui-version-bump-${{ steps.bump-version.outputs.NEW_VERSION }}
-          base: ${{ github.event.inputs.branch }}
-          labels: |
-            Release
-

.github/workflows/version-bump.yaml

@@ -1,5 +1,4 @@
-name: "Release: Version Bump"
-description: "Manual workflow to increment package version with semantic versioning support"
+name: Version Bump
 
 on:
   workflow_dispatch:
@@ -15,11 +14,6 @@ on:
         required: false
         default: ''
         type: string
-      branch:
-        description: 'Base branch to bump (e.g., main, core/1.29, core/1.30)'
-        required: true
-        default: 'main'
-        type: string
 
 jobs:
   bump-version:
@@ -30,25 +24,7 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v5
-        with:
-          ref: ${{ github.event.inputs.branch }}
-          fetch-depth: 0
-
-      - name: Validate branch exists
-        run: |
-          BRANCH="${{ github.event.inputs.branch }}"
-          if ! git show-ref --verify --quiet "refs/heads/$BRANCH" && ! git show-ref --verify --quiet "refs/remotes/origin/$BRANCH"; then
-            echo "❌ Branch '$BRANCH' does not exist"
-            echo ""
-            echo "Available core branches:"
-            git branch -r | grep 'origin/core/' | sed 's/.*origin\//  - /' || echo "  (none found)"
-            echo ""
-            echo "Main branch:"
-            echo "  - main"
-            exit 1
-          fi
-          echo "✅ Branch '$BRANCH' exists"
+        uses: actions/checkout@v4
 
       - name: Install pnpm
         uses: pnpm/action-setup@v4
@@ -82,9 +58,7 @@ jobs:
           title: ${{ steps.bump-version.outputs.NEW_VERSION }}
           body: |
             ${{ steps.capitalised.outputs.capitalised }} version increment to ${{ steps.bump-version.outputs.NEW_VERSION }}
-
-            **Base branch:** `${{ github.event.inputs.branch }}`
           branch: version-bump-${{ steps.bump-version.outputs.NEW_VERSION }}
-          base: ${{ github.event.inputs.branch }}
+          base: main
           labels: |
             Release

.github/workflows/vitest.yaml

@@ -0,0 +1,46 @@
+name: Vitest Tests
+
+on:
+  push:
+    branches: [ main, master, dev*, core/*, desktop/* ]
+  pull_request:
+    branches-ignore: [ wip/*, draft/*, temp/* ]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v4
+
+    - name: Install pnpm
+      uses: pnpm/action-setup@v4
+      with:
+        version: 10
+
+    - name: Use Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: 'lts/*'
+        cache: 'pnpm'
+
+    - name: Cache tool outputs
+      uses: actions/cache@v4
+      with:
+        path: |
+          .cache
+          coverage
+          .vitest-cache
+        key: vitest-cache-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}-${{ hashFiles('src/**/*.{ts,vue,js}', 'vitest.config.*', 'tsconfig.json') }}
+        restore-keys: |
+          vitest-cache-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}-
+          vitest-cache-${{ runner.os }}-
+          test-tools-cache-${{ runner.os }}-
+
+    - name: Install dependencies
+      run: pnpm install --frozen-lockfile
+
+    - name: Run Vitest tests
+      run: |
+        pnpm test:component
+        pnpm test:unit

.gitignore

@@ -15,7 +15,6 @@ yarn.lock
 # Cache files
 .eslintcache
 .prettiercache
-.stylelintcache
 
 node_modules
 dist
@@ -32,7 +31,6 @@ CLAUDE.local.md
 *.code-workspace
 !.vscode/extensions.json
 !.vscode/tailwind.json
-!.vscode/custom-css.json
 !.vscode/settings.json.default
 !.vscode/launch.json.default
 .idea

.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

.husky/pre-push

@@ -1,5 +1,5 @@
 #!/usr/bin/env bash
 
 # Run Knip with cache via package script
-pnpm knip 1>&2
+pnpm knip
 

.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/CLAUDE.md

@@ -4,7 +4,7 @@
 
 - `pnpm storybook`: Start Storybook development server
 - `pnpm build-storybook`: Build static Storybook
-- `pnpm test:unit`: Run unit tests (includes Storybook components)
+- `pnpm test:component`: Run component tests (includes Storybook components)
 
 ## Development Workflow for Storybook
 

.storybook/README.md

@@ -211,17 +211,18 @@ This Storybook setup includes:
 
 ## Icon Usage in Storybook
 
-In this project, only the `<i class="icon-[lucide--folder]" />` syntax from unplugin-icons is supported in Storybook.  
+In this project, the `<i-lucide:... />` syntax from unplugin-icons is not supported in Storybook.  
 
 **Example:**
 
 ```vue
 <script setup lang="ts">
+import { Trophy, Settings } from 'lucide-vue-next'
 </script>
 
 <template>
-  <i class="icon-[lucide--trophy] text-neutral size-4" />
-  <i class="icon-[lucide--settings] text-neutral size-4" />
+  <Trophy :size="16" class="text-neutral" />
+  <Settings :size="16" class="text-neutral" />
 </template>
 ```
 

.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'
             )
           }
         }),
@@ -76,6 +76,11 @@ const config: StorybookConfig = {
       },
       build: {
         rollupOptions: {
+          external: () => {
+            // Don't externalize any modules in Storybook build
+            // This ensures PrimeVue and other dependencies are bundled
+            return false
+          },
           onwarn: (warning, warn) => {
             // Suppress specific warnings
             if (

.stylelintrc.json

@@ -1,74 +0,0 @@
-{
-  "extends": [],
-  "overrides": [
-    {
-      "files": ["*.vue", "**/*.vue"],
-      "customSyntax": "postcss-html"
-    }
-  ],
-  "rules": {
-    "import-notation": "string",
-    "font-family-no-missing-generic-family-keyword": true,
-    "declaration-property-value-no-unknown": [
-      true,
-      {
-        "ignoreProperties": {
-          "speak": ["none"],
-          "app-region": ["drag", "no-drag"],
-          "/^(width|height)$/": ["/^v-bind/"]
-        }
-      }
-    ],
-    "color-function-notation": "modern",
-    "shorthand-property-no-redundant-values": true,
-    "selector-pseudo-element-colon-notation": "double",
-    "no-duplicate-selectors": true,
-    "font-weight-notation": "numeric",
-    "length-zero-no-unit": true,
-    "color-no-invalid-hex": true,
-    "number-max-precision": 4,
-    "property-no-vendor-prefix": true,
-    "value-no-vendor-prefix": true,
-    "selector-no-vendor-prefix": true,
-    "media-feature-name-no-vendor-prefix": true,
-    "selector-max-universal": 1,
-    "selector-max-type": 2,
-    "declaration-block-no-duplicate-properties": true,
-    "block-no-empty": true,
-    "no-descending-specificity": null,
-    "no-duplicate-at-import-rules": true,
-    "at-rule-no-unknown": [
-      true,
-      {
-        "ignoreAtRules": [
-          "tailwind",
-          "apply",
-          "layer",
-          "config",
-          "theme",
-          "reference",
-          "plugin",
-          "custom-variant",
-          "utility"
-        ]
-      }
-    ],
-    "function-no-unknown": [
-      true,
-      {
-        "ignoreFunctions": [
-          "theme",
-          "v-bind"
-        ]
-      }
-    ]
-  },
-  "ignoreFiles": [
-    "node_modules/**",
-    "dist/**",
-    "playwright-report/**",
-    "public/**",
-    "src/lib/litegraph/**"
-  ],
-  "files": ["**/*.css", "**/*.vue"]
-}

.vscode/custom-css.json

@@ -1,50 +0,0 @@
-{
-  "version": 1.1,
-  "properties": [
-    {
-      "name": "app-region",
-      "description": "Electron-specific CSS property that defines draggable regions in custom title bar windows. Setting 'drag' marks a rectangular area as draggable for moving the window; 'no-drag' excludes areas from the draggable region.",
-      "values": [
-        {
-          "name": "drag",
-          "description": "Marks the element as draggable for moving the Electron window"
-        },
-        {
-          "name": "no-drag",
-          "description": "Excludes the element from being used to drag the Electron window"
-        }
-      ],
-      "references": [
-        {
-          "name": "Electron Window Customization",
-          "url": "https://www.electronjs.org/docs/latest/tutorial/window-customization"
-        }
-      ]
-    },
-    {
-      "name": "speak",
-      "description": "Deprecated CSS2 aural stylesheet property for controlling screen reader speech. Use ARIA attributes instead.",
-      "values": [
-        {
-          "name": "auto",
-          "description": "Content is read aurally if element is not a block and is visible"
-        },
-        {
-          "name": "never",
-          "description": "Content will not be read aurally"
-        },
-        {
-          "name": "always",
-          "description": "Content will be read aurally regardless of display settings"
-        }
-      ],
-      "references": [
-        {
-          "name": "CSS-Tricks Reference",
-          "url": "https://css-tricks.com/almanac/properties/s/speak/"
-        }
-      ],
-      "status": "obsolete"
-    }
-  ]
-}

.vscode/settings.json.default

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

.vscode/tailwind.json

@@ -7,7 +7,7 @@
       "references": [
         {
           "name": "Tailwind Documentation",
-          "url": "https://tailwindcss.com/docs/functions-and-directives#import-directive"
+          "url": "https://tailwindcss.com/docs/functions-and-directives#import"
         }
       ]
     },
@@ -17,7 +17,7 @@
       "references": [
         {
           "name": "Tailwind Documentation",
-          "url": "https://tailwindcss.com/docs/functions-and-directives#theme-directive"
+          "url": "https://tailwindcss.com/docs/functions-and-directives#theme"
         }
       ]
     },
@@ -27,17 +27,17 @@
       "references": [
         {
           "name": "Tailwind Documentation",
-          "url": "https://tailwindcss.com/docs/theme#layers"
+          "url": "https://tailwindcss.com/docs/functions-and-directives#layer"
         }
       ]
     },
     {
       "name": "@apply",
-      "description": "DO NOT USE. IF YOU ARE CAUGHT USING @apply YOU WILL FACE SEVERE CONSEQUENCES.",
+      "description": "Use the `@apply` directive to inline any existing utility classes into your own custom CSS. This is useful when you find a common utility pattern in your HTML that you’d like to extract to a new component.",
       "references": [
         {
           "name": "Tailwind Documentation",
-          "url": "https://tailwindcss.com/docs/functions-and-directives#apply-directive"
+          "url": "https://tailwindcss.com/docs/functions-and-directives#apply"
         }
       ]
     },
@@ -47,7 +47,7 @@
       "references": [
         {
           "name": "Tailwind Documentation",
-          "url": "https://tailwindcss.com/docs/functions-and-directives#config-directive"
+          "url": "https://tailwindcss.com/docs/functions-and-directives#config"
         }
       ]
     },
@@ -57,7 +57,7 @@
       "references": [
         {
           "name": "Tailwind Documentation",
-          "url": "https://tailwindcss.com/docs/functions-and-directives#reference-directive"
+          "url": "https://tailwindcss.com/docs/functions-and-directives#reference"
         }
       ]
     },
@@ -67,27 +67,7 @@
       "references": [
         {
           "name": "Tailwind Documentation",
-          "url": "https://tailwindcss.com/docs/functions-and-directives#plugin-directive"
-        }
-      ]
-    },
-    {
-      "name": "@custom-variant",
-      "description": "Use the `@custom-variant` directive to add a custom variant to your project. Custom variants can be used with utilities like `hover`, `focus`, and responsive breakpoints. Use `@slot` inside the variant to indicate where the utility's styles should be inserted.",
-      "references": [
-        {
-          "name": "Tailwind Documentation",
-          "url": "https://tailwindcss.com/docs/adding-custom-styles#adding-custom-variants"
-        }
-      ]
-    },
-    {
-      "name": "@utility",
-      "description": "Use the `@utility` directive to add custom utilities to your project. Custom utilities work with all variants like `hover`, `focus`, and responsive variants. Use `--value()` to create functional utilities that accept arguments.",
-      "references": [
-        {
-          "name": "Tailwind Documentation",
-          "url": "https://tailwindcss.com/docs/adding-custom-styles#adding-custom-utilities"
+          "url": "https://tailwindcss.com/docs/functions-and-directives#plugin"
         }
       ]
     }

AGENTS.md

@@ -5,14 +5,15 @@
 - Routing/i18n/entry: `src/router.ts`, `src/i18n.ts`, `src/main.ts`.
 - Tests: unit/component in `tests-ui/` and `src/components/**/*.{test,spec}.ts`; E2E in `browser_tests/`.
 - Public assets: `public/`. Build output: `dist/`.
-- Config: `vite.config.mts`, `vitest.config.ts`, `playwright.config.ts`, `eslint.config.ts`, `.prettierrc`.
+- Config: `vite.config.mts`, `vitest.config.ts`, `playwright.config.ts`, `eslint.config.js`, `.prettierrc`.
 
 ## Build, Test, and Development Commands
 - `pnpm dev`: Start Vite dev server.
 - `pnpm dev:electron`: Dev server with Electron API mocks.
 - `pnpm build`: Type-check then production build to `dist/`.
 - `pnpm preview`: Preview the production build locally.
-- `pnpm test:unit`: Run Vitest unit tests.
+- `pnpm test:unit`: Run Vitest unit tests (`tests-ui/`).
+- `pnpm test:component`: Run component tests (`src/components/`).
 - `pnpm test:browser`: Run Playwright E2E tests (`browser_tests/`).
 - `pnpm lint` / `pnpm lint:fix`: Lint (ESLint). `pnpm format` / `format:check`: Prettier.
 - `pnpm typecheck`: Vue TSC type checking.
@@ -30,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`.

CLAUDE.md

@@ -18,6 +18,7 @@ This bootstraps the monorepo with dependencies, builds, tests, and dev server ve
 - `pnpm build`: Build for production (via nx)
 - `pnpm lint`: Linting (via nx)
 - `pnpm format`: Prettier formatting
+- `pnpm test:component`: Run component tests with browser environment
 - `pnpm test:unit`: Run all unit tests
 - `pnpm test:browser`: Run E2E tests via Playwright
 - `pnpm test:unit -- tests-ui/tests/example.test.ts`: Run single test file
@@ -126,5 +127,6 @@ const value = api.getServerFeature('config_name', defaultValue)  // Get config
 - NEVER use `--no-verify` flag when committing
 - NEVER delete or disable tests to make them pass
 - NEVER circumvent quality checks
-- NEVER use `dark:` or `dark-theme:` tailwind variants. Instead use a semantic value from the `style.css` theme, e.g. `bg-node-component-surface`
-- NEVER use `:class="[]"` to merge class names - always use `import { cn } from '@/utils/tailwindUtil'`, for example: `<div :class="cn('text-node-component-header-icon', hasError && 'text-danger')" />`
+- NEVER use `dark:` prefix - always use `dark-theme:` for dark mode styles, for example: `dark-theme:text-white dark-theme:bg-black`
+- NEVER use `:class="[]"` to merge class names - always use `import { cn } from '@/utils/tailwindUtil'`, for example: `<div :class="cn('bg-red-500', { 'bg-blue-500': condition })" />`
+

CODEOWNERS

@@ -1,7 +1,12 @@
 # Desktop/Electron
-/apps/desktop-ui/                                 @webfiltered
+/src/types/desktop/                               @webfiltered
+/src/constants/desktopDialogs.ts                  @webfiltered
+/src/constants/desktopMaintenanceTasks.ts         @webfiltered
 /src/stores/electronDownloadStore.ts              @webfiltered
 /src/extensions/core/electronAdapter.ts           @webfiltered
+/src/views/DesktopDialogView.vue                  @webfiltered
+/src/components/install/                          @webfiltered
+/src/components/maintenance/                      @webfiltered
 /vite.electron.config.mts                         @webfiltered
 
 # Common UI Components
@@ -54,10 +59,3 @@
 
 # Translations
 /src/locales/                                     @Yorha4D @KarryCharon @shinshin86 @Comfy-Org/comfy_maintainer
-
-# LLM Instructions (blank on purpose)
-.claude/
-.cursor/
-.cursorrules
-**/AGENTS.md
-**/CLAUDE.md

CONTRIBUTING.md

@@ -213,6 +213,12 @@ Here's how Claude Code can use the Playwright MCP server to inspect the interfac
 - `pnpm i` to install all dependencies
 - `pnpm test:unit` to execute all unit tests
 
+### Component Tests
+
+Component tests verify Vue components in `src/components/`.
+
+- `pnpm test:component` to execute all component tests
+
 ### Playwright Tests
 
 Playwright tests verify the whole app. See [browser_tests/README.md](browser_tests/README.md) for details.
@@ -223,6 +229,7 @@ Before submitting a PR, ensure all tests pass:
 
 ```bash
 pnpm test:unit
+pnpm test:component
 pnpm test:browser
 pnpm typecheck
 pnpm lint
@@ -255,12 +262,12 @@ pnpm format
 The project supports three types of icons, all with automatic imports (no manual imports needed):
 
 1. **PrimeIcons** - Built-in PrimeVue icons using CSS classes: `<i class="pi pi-plus" />`
-2. **Iconify Icons** - 200,000+ icons from various libraries: `<i class="icon-[lucide--settings]" />`, `<i class="icon-[mdi--folder]" />`
+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
 

apps/desktop-ui/.storybook/main.ts

@@ -1,103 +0,0 @@
-import type { StorybookConfig } from '@storybook/vue3-vite'
-import { FileSystemIconLoader } from 'unplugin-icons/loaders'
-import IconsResolver from 'unplugin-icons/resolver'
-import Icons from 'unplugin-icons/vite'
-import Components from 'unplugin-vue-components/vite'
-import type { InlineConfig } from 'vite'
-
-const config: StorybookConfig = {
-  stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-  addons: ['@storybook/addon-docs'],
-  framework: {
-    name: '@storybook/vue3-vite',
-    options: {}
-  },
-  staticDirs: [{ from: '../public', to: '/' }],
-  async viteFinal(config) {
-    // Use dynamic import to avoid CJS deprecation warning
-    const { mergeConfig } = await import('vite')
-    const { default: tailwindcss } = await import('@tailwindcss/vite')
-
-    // Filter out any plugins that might generate import maps
-    if (config.plugins) {
-      config.plugins = config.plugins
-        // Type guard: ensure we have valid plugin objects with names
-        .filter(
-          (plugin): plugin is NonNullable<typeof plugin> & { name: string } => {
-            return (
-              plugin !== null &&
-              plugin !== undefined &&
-              typeof plugin === 'object' &&
-              'name' in plugin &&
-              typeof plugin.name === 'string'
-            )
-          }
-        )
-        // Business logic: filter out import-map plugins
-        .filter((plugin) => !plugin.name.includes('import-map'))
-    }
-
-    return mergeConfig(config, {
-      // Replace plugins entirely to avoid inheritance issues
-      plugins: [
-        // Only include plugins we explicitly need for Storybook
-        tailwindcss(),
-        Icons({
-          compiler: 'vue3',
-          customCollections: {
-            comfy: FileSystemIconLoader(
-              process.cwd() + '/../../packages/design-system/src/icons'
-            )
-          }
-        }),
-        Components({
-          dts: false, // Disable dts generation in Storybook
-          resolvers: [
-            IconsResolver({
-              customCollections: ['comfy']
-            })
-          ],
-          dirs: [
-            process.cwd() + '/src/components',
-            process.cwd() + '/src/views'
-          ],
-          deep: true,
-          extensions: ['vue'],
-          directoryAsNamespace: true
-        })
-      ],
-      server: {
-        allowedHosts: true
-      },
-      resolve: {
-        alias: {
-          '@': process.cwd() + '/src',
-          '@frontend-locales': process.cwd() + '/../../src/locales'
-        }
-      },
-      build: {
-        rollupOptions: {
-          onwarn: (warning, warn) => {
-            // Suppress specific warnings
-            if (
-              warning.code === 'UNUSED_EXTERNAL_IMPORT' &&
-              warning.message?.includes('resolveComponent')
-            ) {
-              return
-            }
-            // Suppress Storybook font asset warnings
-            if (
-              warning.code === 'UNRESOLVED_IMPORT' &&
-              warning.message?.includes('nunito-sans')
-            ) {
-              return
-            }
-            warn(warning)
-          }
-        },
-        chunkSizeWarningLimit: 1000
-      }
-    } satisfies InlineConfig)
-  }
-}
-export default config

apps/desktop-ui/.storybook/preview.ts

@@ -1,88 +0,0 @@
-import { definePreset } from '@primevue/themes'
-import Aura from '@primevue/themes/aura'
-import { setup } from '@storybook/vue3'
-import type { Preview, StoryContext, StoryFn } from '@storybook/vue3-vite'
-import { createPinia } from 'pinia'
-import 'primeicons/primeicons.css'
-import PrimeVue from 'primevue/config'
-import ConfirmationService from 'primevue/confirmationservice'
-import ToastService from 'primevue/toastservice'
-import Tooltip from 'primevue/tooltip'
-
-import '@/assets/css/style.css'
-import { i18n } from '@/i18n'
-
-const ComfyUIPreset = definePreset(Aura, {
-  semantic: {
-    // @ts-expect-error prime type quirk
-    primary: Aura['primitive'].blue
-  }
-})
-
-setup((app) => {
-  app.directive('tooltip', Tooltip)
-
-  const pinia = createPinia()
-
-  app.use(pinia)
-  app.use(i18n)
-  app.use(PrimeVue, {
-    theme: {
-      preset: ComfyUIPreset,
-      options: {
-        prefix: 'p',
-        cssLayer: { name: 'primevue', order: 'primevue, tailwind-utilities' },
-        darkModeSelector: '.dark-theme, :root:has(.dark-theme)'
-      }
-    }
-  })
-  app.use(ConfirmationService)
-  app.use(ToastService)
-})
-
-export const withTheme = (Story: StoryFn, context: StoryContext) => {
-  const theme = context.globals.theme || 'light'
-  if (theme === 'dark') {
-    document.documentElement.classList.add('dark-theme')
-    document.body.classList.add('dark-theme')
-  } else {
-    document.documentElement.classList.remove('dark-theme')
-    document.body.classList.remove('dark-theme')
-  }
-
-  return Story(context.args, context)
-}
-
-const preview: Preview = {
-  parameters: {
-    controls: {
-      matchers: { color: /(background|color)$/i, date: /Date$/i }
-    },
-    backgrounds: {
-      default: 'light',
-      values: [
-        { name: 'light', value: '#ffffff' },
-        { name: 'dark', value: '#0a0a0a' }
-      ]
-    }
-  },
-  globalTypes: {
-    theme: {
-      name: 'Theme',
-      description: 'Global theme for components',
-      defaultValue: 'light',
-      toolbar: {
-        icon: 'circlehollow',
-        items: [
-          { value: 'light', icon: 'sun', title: 'Light' },
-          { value: 'dark', icon: 'moon', title: 'Dark' }
-        ],
-        showName: true,
-        dynamicTitle: true
-      }
-    }
-  },
-  decorators: [withTheme]
-}
-
-export default preview

apps/desktop-ui/index.html

@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <title>ComfyUI</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
-  </head>
-  <body>
-    <div id="desktop-app"></div>
-    <script type="module" src="src/main.ts"></script>
-  </body>
-</html>

apps/desktop-ui/package.json

@@ -1,117 +0,0 @@
-{
-  "name": "@comfyorg/desktop-ui",
-  "version": "0.0.3",
-  "type": "module",
-  "nx": {
-    "tags": [
-      "scope:desktop",
-      "type:app"
-    ],
-    "targets": {
-      "dev": {
-        "executor": "nx:run-commands",
-        "continuous": true,
-        "options": {
-          "cwd": "apps/desktop-ui",
-          "command": "vite --config vite.config.mts"
-        }
-      },
-      "serve": {
-        "executor": "nx:run-commands",
-        "continuous": true,
-        "options": {
-          "cwd": "apps/desktop-ui",
-          "command": "vite --config vite.config.mts"
-        }
-      },
-      "build": {
-        "executor": "nx:run-commands",
-        "cache": true,
-        "dependsOn": [
-          "^build"
-        ],
-        "options": {
-          "cwd": "apps/desktop-ui",
-          "command": "vite build --config vite.config.mts"
-        },
-        "outputs": [
-          "{projectRoot}/dist"
-        ]
-      },
-      "preview": {
-        "executor": "nx:run-commands",
-        "continuous": true,
-        "dependsOn": [
-          "build"
-        ],
-        "options": {
-          "cwd": "apps/desktop-ui",
-          "command": "vite preview --config vite.config.mts"
-        }
-      },
-      "storybook": {
-        "executor": "nx:run-commands",
-        "continuous": true,
-        "options": {
-          "cwd": "apps/desktop-ui",
-          "command": "storybook dev -p 6007"
-        }
-      },
-      "build-storybook": {
-        "executor": "nx:run-commands",
-        "cache": true,
-        "options": {
-          "cwd": "apps/desktop-ui",
-          "command": "storybook build -o dist/storybook"
-        },
-        "outputs": [
-          "{projectRoot}/dist/storybook"
-        ]
-      },
-      "lint": {
-        "executor": "nx:run-commands",
-        "cache": true,
-        "options": {
-          "cwd": "apps/desktop-ui",
-          "command": "eslint src --cache"
-        }
-      },
-      "typecheck": {
-        "executor": "nx:run-commands",
-        "cache": true,
-        "options": {
-          "cwd": "apps/desktop-ui",
-          "command": "vue-tsc --noEmit -p tsconfig.json"
-        }
-      }
-    }
-  },
-  "scripts": {
-    "storybook": "storybook dev -p 6007",
-    "build-storybook": "storybook build -o dist/storybook"
-  },
-  "dependencies": {
-    "@comfyorg/comfyui-electron-types": "0.4.73-0",
-    "@comfyorg/shared-frontend-utils": "workspace:*",
-    "@primevue/core": "catalog:",
-    "@primevue/themes": "catalog:",
-    "@vueuse/core": "catalog:",
-    "pinia": "catalog:",
-    "primeicons": "catalog:",
-    "primevue": "catalog:",
-    "vue": "catalog:",
-    "vue-i18n": "catalog:",
-    "vue-router": "catalog:"
-  },
-  "devDependencies": {
-    "@tailwindcss/vite": "catalog:",
-    "@vitejs/plugin-vue": "catalog:",
-    "dotenv": "catalog:",
-    "unplugin-icons": "catalog:",
-    "unplugin-vue-components": "catalog:",
-    "vite": "catalog:",
-    "vite-plugin-html": "catalog:",
-    "vite-plugin-vue-devtools": "catalog:",
-    "vue-tsc": "catalog:"
-  }
-}

apps/desktop-ui/src/App.vue

@@ -1,7 +0,0 @@
-<template>
-  <RouterView />
-</template>
-
-<script setup lang="ts">
-import { RouterView } from 'vue-router'
-</script>

apps/desktop-ui/src/assets/css/style.css

@@ -1,6 +0,0 @@
-@import '@comfyorg/design-system/css/style.css';
-
-#desktop-app {
-  position: absolute;
-  inset: 0;
-}

apps/desktop-ui/src/components/bottomPanel/tabs/terminal/BaseTerminal.vue

@@ -1,113 +0,0 @@
-<template>
-  <div
-    ref="rootEl"
-    class="relative overflow-hidden h-full w-full bg-neutral-900"
-  >
-    <div class="p-terminal rounded-none h-full w-full p-2">
-      <div ref="terminalEl" class="h-full terminal-host" />
-    </div>
-    <Button
-      v-tooltip.left="{
-        value: tooltipText,
-        showDelay: 300
-      }"
-      icon="pi pi-copy"
-      severity="secondary"
-      size="small"
-      :class="
-        cn('absolute top-2 right-8 transition-opacity', {
-          'opacity-0 pointer-events-none select-none': !isHovered
-        })
-      "
-      :aria-label="tooltipText"
-      @click="handleCopy"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useElementHover, useEventListener } from '@vueuse/core'
-import type { IDisposable } from '@xterm/xterm'
-import Button from 'primevue/button'
-import type { Ref } from 'vue'
-import { computed, onMounted, onUnmounted, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import { useTerminal } from '@/composables/bottomPanelTabs/useTerminal'
-import { electronAPI, isElectron } from '@/utils/envUtil'
-import { cn } from '@/utils/tailwindUtil'
-
-const { t } = useI18n()
-
-const emit = defineEmits<{
-  created: [ReturnType<typeof useTerminal>, Ref<HTMLElement | undefined>]
-  unmounted: []
-}>()
-const terminalEl = ref<HTMLElement | undefined>()
-const rootEl = ref<HTMLElement | undefined>()
-const hasSelection = ref(false)
-
-const isHovered = useElementHover(rootEl)
-
-const terminalData = useTerminal(terminalEl)
-emit('created', terminalData, ref(rootEl))
-
-const { terminal } = terminalData
-let selectionDisposable: IDisposable | undefined
-
-const tooltipText = computed(() => {
-  return hasSelection.value
-    ? t('serverStart.copySelectionTooltip')
-    : t('serverStart.copyAllTooltip')
-})
-
-const handleCopy = async () => {
-  const existingSelection = terminal.getSelection()
-  const shouldSelectAll = !existingSelection
-  if (shouldSelectAll) terminal.selectAll()
-
-  const selectedText = shouldSelectAll
-    ? terminal.getSelection()
-    : existingSelection
-
-  if (selectedText) {
-    await navigator.clipboard.writeText(selectedText)
-
-    if (shouldSelectAll) {
-      terminal.clearSelection()
-    }
-  }
-}
-
-const showContextMenu = (event: MouseEvent) => {
-  event.preventDefault()
-  electronAPI()?.showContextMenu({ type: 'text' })
-}
-
-if (isElectron()) {
-  useEventListener(terminalEl, 'contextmenu', showContextMenu)
-}
-
-onMounted(() => {
-  selectionDisposable = terminal.onSelectionChange(() => {
-    hasSelection.value = terminal.hasSelection()
-  })
-})
-
-onUnmounted(() => {
-  selectionDisposable?.dispose()
-  emit('unmounted')
-})
-</script>
-
-<style scoped>
-@reference '../../../../assets/css/style.css';
-
-:deep(.p-terminal) .xterm {
-  @apply overflow-hidden;
-}
-
-:deep(.p-terminal) .xterm-screen {
-  @apply bg-neutral-900 overflow-hidden;
-}
-</style>

apps/desktop-ui/src/components/common/UrlInput.vue

@@ -1,129 +0,0 @@
-<template>
-  <IconField class="w-full">
-    <InputText
-      v-bind="$attrs"
-      :model-value="internalValue"
-      class="w-full"
-      :invalid="validationState === ValidationState.INVALID"
-      @update:model-value="handleInput"
-      @blur="handleBlur"
-    />
-    <InputIcon
-      :class="{
-        'pi pi-spin pi-spinner text-neutral-400':
-          validationState === ValidationState.LOADING,
-        'pi pi-check text-green-500 cursor-pointer':
-          validationState === ValidationState.VALID,
-        'pi pi-times text-red-500 cursor-pointer':
-          validationState === ValidationState.INVALID
-      }"
-      @click="validateUrl(props.modelValue)"
-    />
-  </IconField>
-</template>
-
-<script setup lang="ts">
-import { isValidUrl } from '@comfyorg/shared-frontend-utils/formatUtil'
-import { checkUrlReachable } from '@comfyorg/shared-frontend-utils/networkUtil'
-import IconField from 'primevue/iconfield'
-import InputIcon from 'primevue/inputicon'
-import InputText from 'primevue/inputtext'
-import { onMounted, ref, watch } from 'vue'
-
-import { ValidationState } from '@/utils/validationUtil'
-
-const props = defineProps<{
-  modelValue: string
-  validateUrlFn?: (url: string) => Promise<boolean>
-}>()
-
-const emit = defineEmits<{
-  'update:modelValue': [value: string]
-  'state-change': [state: ValidationState]
-}>()
-
-const validationState = ref<ValidationState>(ValidationState.IDLE)
-
-const cleanInput = (value: string): string =>
-  value ? value.replace(/\s+/g, '') : ''
-
-// Add internal value state
-const internalValue = ref(cleanInput(props.modelValue))
-
-// Watch for external modelValue changes
-watch(
-  () => props.modelValue,
-  async (newValue: string) => {
-    internalValue.value = cleanInput(newValue)
-    await validateUrl(newValue)
-  }
-)
-
-watch(validationState, (newState) => {
-  emit('state-change', newState)
-})
-
-// Validate on mount
-onMounted(async () => {
-  await validateUrl(props.modelValue)
-})
-
-const handleInput = (value: string | undefined) => {
-  // Update internal value without emitting
-  internalValue.value = cleanInput(value ?? '')
-  // Reset validation state when user types
-  validationState.value = ValidationState.IDLE
-}
-
-const handleBlur = async () => {
-  const input = cleanInput(internalValue.value)
-
-  let normalizedUrl = input
-  try {
-    const url = new URL(input)
-    normalizedUrl = url.toString()
-  } catch {
-    // If URL parsing fails, just use the cleaned input
-  }
-
-  // Emit the update only on blur
-  emit('update:modelValue', normalizedUrl)
-}
-
-// Default validation implementation
-const defaultValidateUrl = async (url: string): Promise<boolean> => {
-  if (!isValidUrl(url)) return false
-  try {
-    return await checkUrlReachable(url)
-  } catch {
-    return false
-  }
-}
-
-const validateUrl = async (value: string) => {
-  if (validationState.value === ValidationState.LOADING) return
-
-  const url = cleanInput(value)
-
-  // Reset state
-  validationState.value = ValidationState.IDLE
-
-  // Skip validation if empty
-  if (!url) return
-
-  validationState.value = ValidationState.LOADING
-  try {
-    const isValid = await (props.validateUrlFn ?? defaultValidateUrl)(url)
-    validationState.value = isValid
-      ? ValidationState.VALID
-      : ValidationState.INVALID
-  } catch {
-    validationState.value = ValidationState.INVALID
-  }
-}
-
-// Add inheritAttrs option to prevent attrs from being applied to root element
-defineOptions({
-  inheritAttrs: false
-})
-</script>

apps/desktop-ui/src/composables/bottomPanelTabs/useTerminal.ts

@@ -1,105 +0,0 @@
-import { FitAddon } from '@xterm/addon-fit'
-import { Terminal } from '@xterm/xterm'
-import '@xterm/xterm/css/xterm.css'
-import { debounce } from 'es-toolkit/compat'
-import type { Ref } from 'vue'
-import { markRaw, onMounted, onUnmounted } from 'vue'
-
-export function useTerminal(element: Ref<HTMLElement | undefined>) {
-  const fitAddon = new FitAddon()
-  const terminal = markRaw(
-    new Terminal({
-      convertEol: true,
-      theme: { background: '#171717' }
-    })
-  )
-  terminal.loadAddon(fitAddon)
-
-  terminal.attachCustomKeyEventHandler((event) => {
-    // Allow default browser copy/paste handling
-    if (
-      event.type === 'keydown' &&
-      (event.ctrlKey || event.metaKey) &&
-      ((event.key === 'c' && terminal.hasSelection()) || event.key === 'v')
-    ) {
-      // TODO: Deselect text after copy/paste; use IPC.
-      return false
-    }
-    return true
-  })
-
-  onMounted(async () => {
-    if (element.value) {
-      terminal.open(element.value)
-    }
-  })
-
-  onUnmounted(() => {
-    terminal.dispose()
-  })
-
-  return {
-    terminal,
-    useAutoSize({
-      root,
-      autoRows = true,
-      autoCols = true,
-      minCols = Number.NEGATIVE_INFINITY,
-      minRows = Number.NEGATIVE_INFINITY,
-      onResize
-    }: {
-      root: Ref<HTMLElement | undefined>
-      autoRows?: boolean
-      autoCols?: boolean
-      minCols?: number
-      minRows?: number
-      onResize?: () => void
-    }) {
-      const ensureValidRows = (rows: number | undefined): number => {
-        if (rows == null || isNaN(rows)) {
-          return (root.value?.clientHeight ?? 80) / 20
-        }
-        return rows
-      }
-
-      const ensureValidCols = (cols: number | undefined): number => {
-        if (cols == null || isNaN(cols)) {
-          // Sometimes this is NaN if so, estimate.
-          return (root.value?.clientWidth ?? 80) / 8
-        }
-        return cols
-      }
-
-      const resize = () => {
-        const dims = fitAddon.proposeDimensions()
-        // Sometimes propose returns NaN, so we may need to estimate.
-        terminal.resize(
-          Math.max(
-            autoCols ? ensureValidCols(dims?.cols) : terminal.cols,
-            minCols
-          ),
-          Math.max(
-            autoRows ? ensureValidRows(dims?.rows) : terminal.rows,
-            minRows
-          )
-        )
-        onResize?.()
-      }
-
-      const resizeObserver = new ResizeObserver(debounce(resize, 25))
-
-      onMounted(async () => {
-        if (root.value) {
-          resizeObserver.observe(root.value)
-          resize()
-        }
-      })
-
-      onUnmounted(() => {
-        resizeObserver.disconnect()
-      })
-
-      return { resize }
-    }
-  }
-}

apps/desktop-ui/src/constants/uvMirrors.ts

@@ -1,34 +0,0 @@
-export interface UVMirror {
-  /**
-   * The setting id defined for the mirror.
-   */
-  settingId: string
-  /**
-   * The default mirror to use.
-   */
-  mirror: string
-  /**
-   * The fallback mirror to use.
-   */
-  fallbackMirror: string
-  /**
-   * The path suffix to validate the mirror is reachable.
-   */
-  validationPathSuffix?: string
-}
-
-export const PYTHON_MIRROR: UVMirror = {
-  settingId: 'Comfy-Desktop.UV.PythonInstallMirror',
-  mirror:
-    'https://github.com/astral-sh/python-build-standalone/releases/download',
-  fallbackMirror:
-    'https://python-standalone.org/mirror/astral-sh/python-build-standalone',
-  validationPathSuffix:
-    '/20250115/cpython-3.10.16+20250115-aarch64-apple-darwin-debug-full.tar.zst.sha256'
-}
-
-export const PYPI_MIRROR: UVMirror = {
-  settingId: 'Comfy-Desktop.UV.PypiInstallMirror',
-  mirror: 'https://pypi.org/simple/',
-  fallbackMirror: 'https://mirrors.tuna.tsinghua.edu.cn/pypi/web/simple'
-}

apps/desktop-ui/src/i18n.ts

@@ -1,184 +0,0 @@
-// Import only English locale eagerly as the default/fallback
-// ESLint cannot statically resolve dynamic imports with path aliases (@frontend-locales/*),
-// but these are properly configured in tsconfig.json and resolved by Vite at build time.
-// eslint-disable-next-line import-x/no-unresolved
-import enCommands from '@frontend-locales/en/commands.json' with { type: 'json' }
-// eslint-disable-next-line import-x/no-unresolved
-import en from '@frontend-locales/en/main.json' with { type: 'json' }
-// eslint-disable-next-line import-x/no-unresolved
-import enNodes from '@frontend-locales/en/nodeDefs.json' with { type: 'json' }
-// eslint-disable-next-line import-x/no-unresolved
-import enSettings from '@frontend-locales/en/settings.json' with { type: 'json' }
-import { createI18n } from 'vue-i18n'
-
-function buildLocale<
-  M extends Record<string, unknown>,
-  N extends Record<string, unknown>,
-  C extends Record<string, unknown>,
-  S extends Record<string, unknown>
->(main: M, nodes: N, commands: C, settings: S) {
-  return {
-    ...main,
-    nodeDefs: nodes,
-    commands: commands,
-    settings: settings
-  } as M & { nodeDefs: N; commands: C; settings: S }
-}
-
-// Locale loader map - dynamically import locales only when needed
-// ESLint cannot statically resolve these dynamic imports, but they are valid at build time
-/* eslint-disable import-x/no-unresolved */
-const localeLoaders: Record<
-  string,
-  () => Promise<{ default: Record<string, unknown> }>
-> = {
-  ar: () => import('@frontend-locales/ar/main.json'),
-  es: () => import('@frontend-locales/es/main.json'),
-  fr: () => import('@frontend-locales/fr/main.json'),
-  ja: () => import('@frontend-locales/ja/main.json'),
-  ko: () => import('@frontend-locales/ko/main.json'),
-  ru: () => import('@frontend-locales/ru/main.json'),
-  tr: () => import('@frontend-locales/tr/main.json'),
-  zh: () => import('@frontend-locales/zh/main.json'),
-  'zh-TW': () => import('@frontend-locales/zh-TW/main.json')
-}
-
-const nodeDefsLoaders: Record<
-  string,
-  () => Promise<{ default: Record<string, unknown> }>
-> = {
-  ar: () => import('@frontend-locales/ar/nodeDefs.json'),
-  es: () => import('@frontend-locales/es/nodeDefs.json'),
-  fr: () => import('@frontend-locales/fr/nodeDefs.json'),
-  ja: () => import('@frontend-locales/ja/nodeDefs.json'),
-  ko: () => import('@frontend-locales/ko/nodeDefs.json'),
-  ru: () => import('@frontend-locales/ru/nodeDefs.json'),
-  tr: () => import('@frontend-locales/tr/nodeDefs.json'),
-  zh: () => import('@frontend-locales/zh/nodeDefs.json'),
-  'zh-TW': () => import('@frontend-locales/zh-TW/nodeDefs.json')
-}
-
-const commandsLoaders: Record<
-  string,
-  () => Promise<{ default: Record<string, unknown> }>
-> = {
-  ar: () => import('@frontend-locales/ar/commands.json'),
-  es: () => import('@frontend-locales/es/commands.json'),
-  fr: () => import('@frontend-locales/fr/commands.json'),
-  ja: () => import('@frontend-locales/ja/commands.json'),
-  ko: () => import('@frontend-locales/ko/commands.json'),
-  ru: () => import('@frontend-locales/ru/commands.json'),
-  tr: () => import('@frontend-locales/tr/commands.json'),
-  zh: () => import('@frontend-locales/zh/commands.json'),
-  'zh-TW': () => import('@frontend-locales/zh-TW/commands.json')
-}
-
-const settingsLoaders: Record<
-  string,
-  () => Promise<{ default: Record<string, unknown> }>
-> = {
-  ar: () => import('@frontend-locales/ar/settings.json'),
-  es: () => import('@frontend-locales/es/settings.json'),
-  fr: () => import('@frontend-locales/fr/settings.json'),
-  ja: () => import('@frontend-locales/ja/settings.json'),
-  ko: () => import('@frontend-locales/ko/settings.json'),
-  ru: () => import('@frontend-locales/ru/settings.json'),
-  tr: () => import('@frontend-locales/tr/settings.json'),
-  zh: () => import('@frontend-locales/zh/settings.json'),
-  'zh-TW': () => import('@frontend-locales/zh-TW/settings.json')
-}
-
-// Track which locales have been loaded
-const loadedLocales = new Set<string>(['en'])
-
-// Track locales currently being loaded to prevent race conditions
-const loadingLocales = new Map<string, Promise<void>>()
-
-/**
- * Dynamically load a locale and its associated files (nodeDefs, commands, settings)
- */
-export async function loadLocale(locale: string): Promise<void> {
-  if (loadedLocales.has(locale)) {
-    return
-  }
-
-  // If already loading, return the existing promise to prevent duplicate loads
-  const existingLoad = loadingLocales.get(locale)
-  if (existingLoad) {
-    return existingLoad
-  }
-
-  const loader = localeLoaders[locale]
-  const nodeDefsLoader = nodeDefsLoaders[locale]
-  const commandsLoader = commandsLoaders[locale]
-  const settingsLoader = settingsLoaders[locale]
-
-  if (!loader || !nodeDefsLoader || !commandsLoader || !settingsLoader) {
-    console.warn(`Locale "${locale}" is not supported`)
-    return
-  }
-
-  // Create and track the loading promise
-  const loadPromise = (async () => {
-    try {
-      const [main, nodes, commands, settings] = await Promise.all([
-        loader(),
-        nodeDefsLoader(),
-        commandsLoader(),
-        settingsLoader()
-      ])
-
-      const messages = buildLocale(
-        main.default,
-        nodes.default,
-        commands.default,
-        settings.default
-      )
-
-      i18n.global.setLocaleMessage(locale, messages as LocaleMessages)
-      loadedLocales.add(locale)
-    } catch (error) {
-      console.error(`Failed to load locale "${locale}":`, error)
-      throw error
-    } finally {
-      // Clean up the loading promise once complete
-      loadingLocales.delete(locale)
-    }
-  })()
-
-  loadingLocales.set(locale, loadPromise)
-  return loadPromise
-}
-
-// Only include English in the initial bundle
-const messages = {
-  en: buildLocale(en, enNodes, enCommands, enSettings)
-}
-
-// Type for locale messages - inferred from the English locale structure
-type LocaleMessages = typeof messages.en
-
-export const i18n = createI18n({
-  // Must set `false`, as Vue I18n Legacy API is for Vue 2
-  legacy: false,
-  locale: navigator.language.split('-')[0] || 'en',
-  fallbackLocale: 'en',
-  messages,
-  // Ignore warnings for locale options as each option is in its own language.
-  // e.g. "English", "中文", "Русский", "日本語", "한국어", "Français", "Español"
-  missingWarn: /^(?!settings\.Comfy_Locale\.options\.).+/,
-  fallbackWarn: /^(?!settings\.Comfy_Locale\.options\.).+/
-})
-
-/** Convenience shorthand: i18n.global */
-export const { t, te } = i18n.global
-
-/**
- * Safe translation function that returns the fallback message if the key is not found.
- *
- * @param key - The key to translate.
- * @param fallbackMessage - The fallback message to use if the key is not found.
- */
-export function st(key: string, fallbackMessage: string) {
-  return te(key) ? t(key) : fallbackMessage
-}

apps/desktop-ui/src/main.ts

@@ -1,46 +0,0 @@
-import { definePreset } from '@primevue/themes'
-import Aura from '@primevue/themes/aura'
-import { createPinia } from 'pinia'
-import 'primeicons/primeicons.css'
-import PrimeVue from 'primevue/config'
-import ConfirmationService from 'primevue/confirmationservice'
-import ToastService from 'primevue/toastservice'
-import Tooltip from 'primevue/tooltip'
-import { createApp } from 'vue'
-
-import App from './App.vue'
-import './assets/css/style.css'
-import { i18n } from './i18n'
-import router from './router'
-
-const ComfyUIPreset = definePreset(Aura, {
-  semantic: {
-    // @ts-expect-error fixme ts strict error
-    primary: Aura['primitive'].blue
-  }
-})
-
-const app = createApp(App)
-const pinia = createPinia()
-
-app.directive('tooltip', Tooltip)
-app
-  .use(router)
-  .use(PrimeVue, {
-    theme: {
-      preset: ComfyUIPreset,
-      options: {
-        prefix: 'p',
-        cssLayer: {
-          name: 'primevue',
-          order: 'theme, base, primevue'
-        },
-        darkModeSelector: '.dark-theme, :root:has(.dark-theme)'
-      }
-    }
-  })
-  .use(ConfirmationService)
-  .use(ToastService)
-  .use(pinia)
-  .use(i18n)
-  .mount('#desktop-app')

apps/desktop-ui/src/router.ts

@@ -1,92 +0,0 @@
-import {
-  createRouter,
-  createWebHashHistory,
-  createWebHistory
-} from 'vue-router'
-
-import { isElectron } from '@/utils/envUtil'
-import LayoutDefault from '@/views/layouts/LayoutDefault.vue'
-
-const isFileProtocol = window.location.protocol === 'file:'
-const basePath = isElectron() ? '/' : window.location.pathname
-
-const router = createRouter({
-  history: isFileProtocol ? createWebHashHistory() : createWebHistory(basePath),
-  routes: [
-    {
-      path: '/',
-      component: LayoutDefault,
-      children: [
-        {
-          path: '',
-          name: 'WelcomeView',
-          component: () => import('@/views/WelcomeView.vue')
-        },
-        {
-          path: 'welcome',
-          name: 'WelcomeViewAlias',
-          component: () => import('@/views/WelcomeView.vue')
-        },
-        {
-          path: 'install',
-          name: 'InstallView',
-          component: () => import('@/views/InstallView.vue')
-        },
-        {
-          path: 'download-git',
-          name: 'DownloadGitView',
-          component: () => import('@/views/DownloadGitView.vue')
-        },
-        {
-          path: 'desktop-start',
-          name: 'DesktopStartView',
-          component: () => import('@/views/DesktopStartView.vue')
-        },
-        {
-          path: 'desktop-update',
-          name: 'DesktopUpdateView',
-          component: () => import('@/views/DesktopUpdateView.vue')
-        },
-        {
-          path: 'server-start',
-          name: 'ServerStartView',
-          component: () => import('@/views/ServerStartView.vue')
-        },
-        {
-          path: 'manual-configuration',
-          name: 'ManualConfigurationView',
-          component: () => import('@/views/ManualConfigurationView.vue')
-        },
-        {
-          path: 'metrics-consent',
-          name: 'MetricsConsentView',
-          component: () => import('@/views/MetricsConsentView.vue')
-        },
-        {
-          path: 'maintenance',
-          name: 'MaintenanceView',
-          component: () => import('@/views/MaintenanceView.vue')
-        },
-        {
-          path: 'not-supported',
-          name: 'NotSupportedView',
-          component: () => import('@/views/NotSupportedView.vue')
-        },
-        {
-          path: 'desktop-dialog/:dialogId',
-          name: 'DesktopDialogView',
-          component: () => import('@/views/DesktopDialogView.vue')
-        }
-      ]
-    }
-  ],
-  scrollBehavior(_to, _from, savedPosition) {
-    if (savedPosition) {
-      return savedPosition
-    }
-
-    return { top: 0 }
-  }
-})
-
-export default router

apps/desktop-ui/src/types/global.d.ts

@@ -1,12 +0,0 @@
-declare global {
-  interface Navigator {
-    /**
-     * Desktop app uses windowControlsOverlay to decide if it is in a custom window.
-     */
-    windowControlsOverlay?: {
-      visible: boolean
-    }
-  }
-}
-
-export {}

apps/desktop-ui/src/utils/electronMirrorCheck.ts

@@ -1,14 +0,0 @@
-import { isValidUrl } from '@comfyorg/shared-frontend-utils/formatUtil'
-
-import { electronAPI } from './envUtil'
-
-/**
- * Check if a mirror is reachable from the electron App.
- * @param mirror - The mirror to check.
- * @returns True if the mirror is reachable, false otherwise.
- */
-export const checkMirrorReachable = async (mirror: string) => {
-  return (
-    isValidUrl(mirror) && (await electronAPI().NetWork.canAccessUrl(mirror))
-  )
-}

apps/desktop-ui/src/utils/envUtil.ts

@@ -1,13 +0,0 @@
-import type { ElectronAPI } from '@comfyorg/comfyui-electron-types'
-
-export function isElectron() {
-  return 'electronAPI' in window && window.electronAPI !== undefined
-}
-
-export function electronAPI() {
-  return (window as any).electronAPI as ElectronAPI
-}
-
-export function isNativeWindow() {
-  return isElectron() && !!window.navigator.windowControlsOverlay?.visible
-}

apps/desktop-ui/src/utils/tailwindUtil.ts

@@ -1 +0,0 @@
-export { cn } from '@comfyorg/tailwind-utils'

apps/desktop-ui/src/utils/validationUtil.ts

@@ -1,6 +0,0 @@
-export enum ValidationState {
-  IDLE = 'IDLE',
-  LOADING = 'LOADING',
-  VALID = 'VALID',
-  INVALID = 'INVALID'
-}

apps/desktop-ui/src/views/layouts/LayoutDefault.vue

@@ -1,11 +0,0 @@
-<template>
-  <main class="w-full h-full overflow-hidden relative">
-    <router-view />
-  </main>
-</template>
-
-<script setup lang="ts">
-import { useFavicon } from '@vueuse/core'
-
-useFavicon('/assets/favicon.ico')
-</script>

apps/desktop-ui/src/views/templates/BaseViewTemplate.vue

@@ -1,52 +0,0 @@
-<template>
-  <div
-    class="font-sans w-screen h-screen flex flex-col"
-    :class="[
-      dark
-        ? 'text-neutral-300 bg-neutral-900 dark-theme'
-        : 'text-neutral-900 bg-neutral-300'
-    ]"
-  >
-    <!-- Virtual top menu for native window (drag handle) -->
-    <div
-      v-show="isNativeWindow()"
-      ref="topMenuRef"
-      class="app-drag w-full h-(--comfy-topbar-height)"
-    />
-    <div class="grow w-full flex items-center justify-center overflow-auto">
-      <slot />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { nextTick, onMounted, ref } from 'vue'
-
-import { electronAPI, isElectron, isNativeWindow } from '../../utils/envUtil'
-
-const { dark = false } = defineProps<{
-  dark?: boolean
-}>()
-
-const darkTheme = {
-  color: 'rgba(0, 0, 0, 0)',
-  symbolColor: '#d4d4d4'
-}
-
-const lightTheme = {
-  color: 'rgba(0, 0, 0, 0)',
-  symbolColor: '#171717'
-}
-
-const topMenuRef = ref<HTMLDivElement | null>(null)
-onMounted(async () => {
-  if (isElectron()) {
-    await nextTick()
-
-    electronAPI().changeTheme({
-      ...(dark ? darkTheme : lightTheme),
-      height: topMenuRef.value?.getBoundingClientRect().height ?? 0
-    })
-  }
-})
-</script>

apps/desktop-ui/tsconfig.json

@@ -1,20 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "noEmit": true,
-    "allowImportingTsExtensions": true,
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["src/*"],
-      "@frontend-locales/*": ["../../src/locales/*"]
-    }
-  },
-  "include": [
-    ".storybook/**/*",
-    "src/**/*.ts",
-    "src/**/*.vue",
-    "src/**/*.d.ts",
-    "vite.config.mts"
-  ],
-  "references": []
-}

apps/desktop-ui/vite.config.mts

@@ -1,72 +0,0 @@
-import tailwindcss from '@tailwindcss/vite'
-import vue from '@vitejs/plugin-vue'
-import dotenv from 'dotenv'
-import path from 'node:path'
-import { fileURLToPath } from 'node:url'
-import { FileSystemIconLoader } from 'unplugin-icons/loaders'
-import IconsResolver from 'unplugin-icons/resolver'
-import Icons from 'unplugin-icons/vite'
-import Components from 'unplugin-vue-components/vite'
-import { defineConfig } from 'vite'
-import { createHtmlPlugin } from 'vite-plugin-html'
-import vueDevTools from 'vite-plugin-vue-devtools'
-
-dotenv.config()
-
-const projectRoot = fileURLToPath(new URL('.', import.meta.url))
-
-const SHOULD_MINIFY = process.env.ENABLE_MINIFY === 'true'
-const VITE_REMOTE_DEV = process.env.VITE_REMOTE_DEV === 'true'
-const DISABLE_VUE_PLUGINS = process.env.DISABLE_VUE_PLUGINS === 'true'
-
-export default defineConfig(() => {
-  return {
-    root: projectRoot,
-    base: '',
-    publicDir: path.resolve(projectRoot, 'public'),
-    server: {
-      port: 5174,
-      host: VITE_REMOTE_DEV ? '0.0.0.0' : undefined
-    },
-    resolve: {
-      alias: {
-        '@': path.resolve(projectRoot, 'src'),
-        '@frontend-locales': path.resolve(projectRoot, '../../src/locales')
-      }
-    },
-    plugins: [
-      ...(!DISABLE_VUE_PLUGINS
-        ? [vueDevTools(), vue(), createHtmlPlugin({})]
-        : [vue()]),
-      tailwindcss(),
-      Icons({
-        compiler: 'vue3',
-        customCollections: {
-          comfy: FileSystemIconLoader(
-            path.resolve(projectRoot, '../../packages/design-system/src/icons')
-          )
-        }
-      }),
-      Components({
-        dts: path.resolve(projectRoot, 'components.d.ts'),
-        resolvers: [
-          IconsResolver({
-            customCollections: ['comfy']
-          })
-        ],
-        dirs: [
-          path.resolve(projectRoot, 'src/components'),
-          path.resolve(projectRoot, 'src/views')
-        ],
-        deep: true,
-        extensions: ['vue'],
-        directoryAsNamespace: true
-      })
-    ],
-    build: {
-      minify: SHOULD_MINIFY ? ('esbuild' as const) : false,
-      target: 'es2022',
-      sourcemap: true
-    }
-  }
-})

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/vueNodes/linked-int-widget.json

@@ -1,90 +0,0 @@
-{
-  "id": "95ea19ba-456c-46e8-aa40-dc3ff135b746",
-  "revision": 0,
-  "last_node_id": 11,
-  "last_link_id": 10,
-  "nodes": [
-    {
-      "id": 10,
-      "type": "KSampler",
-      "pos": [494.3333740234375, 142.3333282470703],
-      "size": [444, 399],
-      "flags": {},
-      "order": 1,
-      "mode": 0,
-      "inputs": [
-        {
-          "name": "model",
-          "type": "MODEL",
-          "link": null
-        },
-        {
-          "name": "positive",
-          "type": "CONDITIONING",
-          "link": null
-        },
-        {
-          "name": "negative",
-          "type": "CONDITIONING",
-          "link": null
-        },
-        {
-          "name": "latent_image",
-          "type": "LATENT",
-          "link": null
-        },
-        {
-          "name": "seed",
-          "type": "INT",
-          "widget": {
-            "name": "seed"
-          },
-          "link": 10
-        }
-      ],
-      "outputs": [
-        {
-          "name": "LATENT",
-          "type": "LATENT",
-          "links": null
-        }
-      ],
-      "properties": {
-        "Node name for S&R": "KSampler"
-      },
-      "widgets_values": [67, "randomize", 20, 8, "euler", "simple", 1]
-    },
-    {
-      "id": 11,
-      "type": "PrimitiveInt",
-      "pos": [24.333343505859375, 149.6666717529297],
-      "size": [444, 125],
-      "flags": {},
-      "order": 0,
-      "mode": 0,
-      "inputs": [],
-      "outputs": [
-        {
-          "name": "INT",
-          "type": "INT",
-          "links": [10]
-        }
-      ],
-      "properties": {
-        "Node name for S&R": "PrimitiveInt"
-      },
-      "widgets_values": [67, "randomize"]
-    }
-  ],
-  "links": [[10, 11, 0, 10, 4, "INT"]],
-  "groups": [],
-  "config": {},
-  "extra": {
-    "ds": {
-      "scale": 1,
-      "offset": [0, 0]
-    },
-    "frontendVersion": "1.28.6"
-  },
-  "version": 0.4
-}

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/fixtures/ComfyPage.ts

@@ -1,5 +1,6 @@
 import type { APIRequestContext, Locator, Page } from '@playwright/test'
-import { test as base, expect } from '@playwright/test'
+import { expect } from '@playwright/test'
+import { test as base } from '@playwright/test'
 import dotenv from 'dotenv'
 import * as fs from 'fs'
 
@@ -46,10 +47,6 @@ class ComfyMenu {
       .nth(0)
   }
 
-  get buttons() {
-    return this.sideToolbar.locator('.side-bar-button')
-  }
-
   get nodeLibraryTab() {
     this._nodeLibraryTab ??= new NodeLibrarySidebarTab(this.page)
     return this._nodeLibraryTab
@@ -133,8 +130,7 @@ export class ComfyPage {
 
   // Buttons
   public readonly resetViewButton: Locator
-  public readonly queueButton: Locator // Run button in Legacy UI
-  public readonly runButton: Locator // Run button (renamed "Queue" -> "Run")
+  public readonly queueButton: Locator
 
   // Inputs
   public readonly workflowUploadInput: Locator
@@ -169,9 +165,6 @@ export class ComfyPage {
     this.widgetTextBox = page.getByPlaceholder('text').nth(1)
     this.resetViewButton = page.getByRole('button', { name: 'Reset View' })
     this.queueButton = page.getByRole('button', { name: 'Queue Prompt' })
-    this.runButton = page
-      .getByTestId('queue-button')
-      .getByRole('button', { name: 'Run' })
     this.workflowUploadInput = page.locator('#comfy-file-input')
     this.visibleToasts = page.locator('.p-toast-message:visible')
 
@@ -1093,6 +1086,12 @@ export class ComfyPage {
 
     const targetPosition = await targetSlot.getPosition()
 
+    // Debug: Log the positions we're trying to use
+    console.log('Drag positions:', {
+      source: sourcePosition,
+      target: targetPosition
+    })
+
     await this.dragAndDrop(sourcePosition, targetPosition)
     await this.nextFrame()
   }

browser_tests/fixtures/VueNodeHelpers.ts

@@ -3,8 +3,6 @@
  */
 import type { Locator, Page } from '@playwright/test'
 
-import { VueNodeFixture } from './utils/vueNodeFixtures'
-
 export class VueNodeHelpers {
   constructor(private page: Page) {}
 
@@ -15,18 +13,13 @@ export class VueNodeHelpers {
     return this.page.locator('[data-node-id]')
   }
 
-  /**
-   * Get locator for a Vue node by its NodeId
-   */
-  getNodeLocator(nodeId: string): Locator {
-    return this.page.locator(`[data-node-id="${nodeId}"]`)
-  }
-
   /**
    * Get locator for selected Vue node components (using visual selection indicators)
    */
   get selectedNodes(): Locator {
-    return this.page.locator('[data-node-id].outline-node-component-outline')
+    return this.page.locator(
+      '[data-node-id].outline-black, [data-node-id].outline-white'
+    )
   }
 
   /**
@@ -108,24 +101,6 @@ export class VueNodeHelpers {
     await this.page.keyboard.press('Backspace')
   }
 
-  /**
-   * Return a DOM-focused VueNodeFixture for the first node matching the title.
-   * Resolves the node id up front so subsequent interactions survive title changes.
-   */
-  async getFixtureByTitle(title: string): Promise<VueNodeFixture> {
-    const node = this.getNodeByTitle(title).first()
-    await node.waitFor({ state: 'visible' })
-
-    const nodeId = await node.evaluate((el) => el.getAttribute('data-node-id'))
-    if (!nodeId) {
-      throw new Error(
-        `Vue node titled "${title}" is missing its data-node-id attribute`
-      )
-    }
-
-    return new VueNodeFixture(this.getNodeLocator(nodeId))
-  }
-
   /**
    * Wait for Vue nodes to be rendered
    */
@@ -139,24 +114,4 @@ export class VueNodeHelpers {
       await this.page.waitForSelector('[data-node-id]')
     }
   }
-
-  /**
-   * Get a specific widget by node title and widget name
-   */
-  getWidgetByName(nodeTitle: string, widgetName: string): Locator {
-    return this.getNodeByTitle(nodeTitle).locator(
-      `_vue=[widget.name="${widgetName}"]`
-    )
-  }
-
-  /**
-   * Get controls for input number widgets (increment/decrement buttons and input)
-   */
-  getInputNumberControls(widget: Locator) {
-    return {
-      input: widget.locator('input'),
-      incrementButton: widget.locator('button').first(),
-      decrementButton: widget.locator('button').last()
-    }
-  }
 }

browser_tests/fixtures/components/Topbar.ts

@@ -7,7 +7,7 @@ export class Topbar {
 
   constructor(public readonly page: Page) {
     this.menuLocator = page.locator('.comfy-command-menu')
-    this.menuTrigger = page.locator('.comfy-menu-button-wrapper')
+    this.menuTrigger = page.locator('.comfyui-logo-wrapper')
   }
 
   async getTabNames(): Promise<string[]> {
@@ -105,7 +105,7 @@ export class Topbar {
    * Close the topbar menu by clicking outside
    */
   async closeTopbarMenu() {
-    await this.page.locator('body').click({ position: { x: 300, y: 10 } })
+    await this.page.locator('body').click({ position: { x: 10, y: 10 } })
     await expect(this.menuLocator).not.toBeVisible()
   }
 

browser_tests/fixtures/utils/litegraphUtils.ts

@@ -151,8 +151,7 @@ class NodeSlotReference {
         const convertedPos =
           window['app'].canvas.ds.convertOffsetToCanvas(rawPos)
 
-        // Debug logging - convert Float64Arrays to regular arrays for visibility
-        // eslint-disable-next-line no-console
+        // Debug logging - convert Float32Arrays to regular arrays for visibility
         console.log(
           `NodeSlotReference debug for ${type} slot ${index} on node ${id}:`,
           {

browser_tests/fixtures/utils/vueNodeFixtures.ts

@@ -1,66 +1,131 @@
-import { expect } from '@playwright/test'
-import type { Locator } from '@playwright/test'
+import type { Locator, Page } from '@playwright/test'
 
-/** DOM-centric helper for a single Vue-rendered node on the canvas. */
+import type { NodeReference } from './litegraphUtils'
+
+/**
+ * VueNodeFixture provides Vue-specific testing utilities for interacting with
+ * Vue node components. It bridges the gap between litegraph node references
+ * and Vue UI components.
+ */
 export class VueNodeFixture {
-  constructor(private readonly locator: Locator) {}
+  constructor(
+    private readonly nodeRef: NodeReference,
+    private readonly page: Page
+  ) {}
 
-  get header(): Locator {
-    return this.locator.locator('[data-testid^="node-header-"]')
+  /**
+   * Get the node's header element using data-testid
+   */
+  async getHeader(): Promise<Locator> {
+    const nodeId = this.nodeRef.id
+    return this.page.locator(`[data-testid="node-header-${nodeId}"]`)
   }
 
-  get title(): Locator {
-    return this.locator.locator('[data-testid="node-title"]')
-  }
-
-  get titleInput(): Locator {
-    return this.locator.locator('[data-testid="node-title-input"]')
-  }
-
-  get body(): Locator {
-    return this.locator.locator('[data-testid^="node-body-"]')
-  }
-
-  get collapseButton(): Locator {
-    return this.locator.locator('[data-testid="node-collapse-button"]')
-  }
-
-  get collapseIcon(): Locator {
-    return this.collapseButton.locator('i')
-  }
-
-  get root(): Locator {
-    return this.locator
+  /**
+   * Get the node's title element
+   */
+  async getTitleElement(): Promise<Locator> {
+    const header = await this.getHeader()
+    return header.locator('[data-testid="node-title"]')
   }
 
+  /**
+   * Get the current title text
+   */
   async getTitle(): Promise<string> {
-    return (await this.title.textContent()) ?? ''
+    const titleElement = await this.getTitleElement()
+    return (await titleElement.textContent()) || ''
   }
 
-  async setTitle(value: string): Promise<void> {
-    await this.header.dblclick()
-    const input = this.titleInput
-    await expect(input).toBeVisible()
-    await input.fill(value)
+  /**
+   * Set a new title by double-clicking and entering text
+   */
+  async setTitle(newTitle: string): Promise<void> {
+    const titleElement = await this.getTitleElement()
+    await titleElement.dblclick()
+
+    const input = (await this.getHeader()).locator(
+      '[data-testid="node-title-input"]'
+    )
+    await input.fill(newTitle)
     await input.press('Enter')
   }
 
+  /**
+   * Cancel title editing
+   */
   async cancelTitleEdit(): Promise<void> {
-    await this.header.dblclick()
-    const input = this.titleInput
-    await expect(input).toBeVisible()
+    const titleElement = await this.getTitleElement()
+    await titleElement.dblclick()
+
+    const input = (await this.getHeader()).locator(
+      '[data-testid="node-title-input"]'
+    )
     await input.press('Escape')
   }
 
+  /**
+   * Check if the title is currently being edited
+   */
+  async isEditingTitle(): Promise<boolean> {
+    const header = await this.getHeader()
+    const input = header.locator('[data-testid="node-title-input"]')
+    return await input.isVisible()
+  }
+
+  /**
+   * Get the collapse/expand button
+   */
+  async getCollapseButton(): Promise<Locator> {
+    const header = await this.getHeader()
+    return header.locator('[data-testid="node-collapse-button"]')
+  }
+
+  /**
+   * Toggle the node's collapsed state
+   */
   async toggleCollapse(): Promise<void> {
-    await this.collapseButton.click()
+    const button = await this.getCollapseButton()
+    await button.click()
   }
 
+  /**
+   * Get the collapse icon element
+   */
+  async getCollapseIcon(): Promise<Locator> {
+    const button = await this.getCollapseButton()
+    return button.locator('i')
+  }
+
+  /**
+   * Get the collapse icon's CSS classes
+   */
   async getCollapseIconClass(): Promise<string> {
-    return (await this.collapseIcon.getAttribute('class')) ?? ''
+    const icon = await this.getCollapseIcon()
+    return (await icon.getAttribute('class')) || ''
   }
 
-  boundingBox(): ReturnType<Locator['boundingBox']> {
-    return this.locator.boundingBox()
+  /**
+   * Check if the collapse button is visible
+   */
+  async isCollapseButtonVisible(): Promise<boolean> {
+    const button = await this.getCollapseButton()
+    return await button.isVisible()
+  }
+
+  /**
+   * Get the node's body/content element
+   */
+  async getBody(): Promise<Locator> {
+    const nodeId = this.nodeRef.id
+    return this.page.locator(`[data-testid="node-body-${nodeId}"]`)
+  }
+
+  /**
+   * Check if the node body is visible (not collapsed)
+   */
+  async isBodyVisible(): Promise<boolean> {
+    const body = await this.getBody()
+    return await body.isVisible()
   }
 }

browser_tests/tests/actionbar.spec.ts

@@ -116,10 +116,9 @@ test.describe('Actionbar', () => {
   test('Can dock actionbar into top menu', async ({ comfyPage }) => {
     await comfyPage.page.dragAndDrop(
       '.actionbar .drag-handle',
-      '.actionbar-container',
+      '.comfyui-menu',
       {
-        targetPosition: { x: 50, y: 20 },
-        force: true
+        targetPosition: { x: 0, y: 0 }
       }
     )
     expect(await comfyPage.actionbar.isDocked()).toBe(true)

browser_tests/tests/domWidget.spec.ts

@@ -53,10 +53,6 @@ test.describe('DOM Widget', () => {
   })
 
   test('should reposition when layout changes', async ({ comfyPage }) => {
-    test.skip(
-      true,
-      'Only recalculates when the Canvas size changes, need to recheck the logic'
-    )
     // --- setup ---
 
     const textareaWidget = comfyPage.page

browser_tests/tests/graphCanvasMenu.spec.ts

@@ -39,15 +39,15 @@ test.describe('Graph Canvas Menu', () => {
     )
   })
 
-  test('Toggle minimap button is clickable and has correct test id', async ({
+  test('Focus mode button is clickable and has correct test id', async ({
     comfyPage
   }) => {
-    const minimapButton = comfyPage.page.getByTestId('toggle-minimap-button')
-    await expect(minimapButton).toBeVisible()
-    await expect(minimapButton).toBeEnabled()
+    const focusButton = comfyPage.page.getByTestId('focus-mode-button')
+    await expect(focusButton).toBeVisible()
+    await expect(focusButton).toBeEnabled()
 
     // Test that the button can be clicked without error
-    await minimapButton.click()
+    await focusButton.click()
     await comfyPage.nextFrame()
   })
 

browser_tests/tests/groupNode.spec.ts

@@ -233,7 +233,6 @@ test.describe('Group Node', () => {
     }
 
     const isRegisteredNodeDefStore = async (comfyPage: ComfyPage) => {
-      await comfyPage.menu.nodeLibraryTab.open()
       const groupNodesFolderCt = await comfyPage.menu.nodeLibraryTab
         .getFolder(GROUP_NODE_CATEGORY)
         .count()
@@ -254,6 +253,8 @@ test.describe('Group Node', () => {
     test.beforeEach(async ({ comfyPage }) => {
       await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
       await comfyPage.loadWorkflow(WORKFLOW_NAME)
+      await comfyPage.menu.nodeLibraryTab.open()
+
       groupNode = await comfyPage.getFirstNodeRef()
       if (!groupNode)
         throw new Error(`Group node not found in workflow ${WORKFLOW_NAME}`)

browser_tests/tests/interaction.spec.ts

@@ -3,10 +3,10 @@ import { expect } from '@playwright/test'
 import type { Position } from '@vueuse/core'
 
 import {
+  type ComfyPage,
   comfyPageFixture as test,
   testComfySnapToGridGridSize
 } from '../fixtures/ComfyPage'
-import type { ComfyPage } from '../fixtures/ComfyPage'
 import type { NodeReference } from '../fixtures/utils/litegraphUtils'
 
 test.beforeEach(async ({ comfyPage }) => {
@@ -786,25 +786,24 @@ test.describe('Viewport settings', () => {
     // Screenshot the canvas element
     await comfyPage.setSetting('Comfy.Graph.CanvasMenu', true)
 
+    // Open zoom controls dropdown first
+    const zoomControlsButton = comfyPage.page.getByTestId(
+      'zoom-controls-button'
+    )
+    await zoomControlsButton.click()
+
     const toggleButton = comfyPage.page.getByTestId('toggle-minimap-button')
     await toggleButton.click()
+    // close zoom menu
+    await zoomControlsButton.click()
     await comfyPage.setSetting('Comfy.Graph.CanvasMenu', false)
 
     await comfyPage.menu.topbar.saveWorkflow('Workflow A')
     await comfyPage.nextFrame()
+    const screenshotA = (await comfyPage.canvas.screenshot()).toString('base64')
 
     // Save workflow as a new file, then zoom out before screen shot
     await comfyPage.menu.topbar.saveWorkflowAs('Workflow B')
-
-    await comfyPage.nextFrame()
-    const tabA = comfyPage.menu.topbar.getWorkflowTab('Workflow A')
-    await changeTab(tabA)
-
-    const screenshotA = (await comfyPage.canvas.screenshot()).toString('base64')
-
-    const tabB = comfyPage.menu.topbar.getWorkflowTab('Workflow B')
-    await changeTab(tabB)
-
     await comfyMouse.move(comfyPage.emptySpace)
     for (let i = 0; i < 4; i++) {
       await comfyMouse.wheel(0, 60)
@@ -816,6 +815,9 @@ test.describe('Viewport settings', () => {
     // Ensure that the screenshots are different due to zoom level
     expect(screenshotB).not.toBe(screenshotA)
 
+    const tabA = comfyPage.menu.topbar.getWorkflowTab('Workflow A')
+    const tabB = comfyPage.menu.topbar.getWorkflowTab('Workflow B')
+
     // Go back to Workflow A
     await changeTab(tabA)
     expect((await comfyPage.canvas.screenshot()).toString('base64')).toBe(

browser_tests/tests/menu.spec.ts

@@ -8,7 +8,9 @@ test.describe('Menu', () => {
   })
 
   test('Can register sidebar tab', async ({ comfyPage }) => {
-    const initialChildrenCount = await comfyPage.menu.buttons.count()
+    const initialChildrenCount = await comfyPage.menu.sideToolbar.evaluate(
+      (el) => el.children.length
+    )
 
     await comfyPage.page.evaluate(async () => {
       window['app'].extensionManager.registerSidebarTab({
@@ -24,7 +26,9 @@ test.describe('Menu', () => {
     })
     await comfyPage.nextFrame()
 
-    const newChildrenCount = await comfyPage.menu.buttons.count()
+    const newChildrenCount = await comfyPage.menu.sideToolbar.evaluate(
+      (el) => el.children.length
+    )
     expect(newChildrenCount).toBe(initialChildrenCount + 1)
   })