[fix] Correct checkout ref for fork PRs in lint-and-format workflow

The workflow was using `github.event.pull_request.head.ref` which only
contains the branch name (e.g., 'mpe/typoFixes'). For PRs from forks,
this causes GitHub Actions to incorrectly look for that branch in the
main repository instead of the fork.

Changed to use `refs/pull/${{ github.event.pull_request.number }}/head`
which correctly references the PR's merge ref that GitHub creates. This
ensures the workflow checks out the right code for both fork and non-fork PRs.

This issue was observed in PR #5880 where the workflow was fetching from
Comfy-Org/ComfyUI_frontend instead of the contributor's fork.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

.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

.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"

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

@@ -9,14 +9,15 @@ runs:
   using: 'composite'
   steps:
     - name: Checkout ComfyUI
-      uses: actions/checkout@v5
+      uses: actions/checkout@v4
       with:
         repository: 'comfyanonymous/ComfyUI'
         path: 'ComfyUI'
 
     - name: Checkout ComfyUI_frontend
-      uses: actions/checkout@v5
+      uses: actions/checkout@v4
       with:
+        repository: 'Comfy-Org/ComfyUI_frontend'
         path: 'ComfyUI_frontend'
 
     - name: Copy ComfyUI_devtools from frontend repo

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

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

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

@@ -73,10 +73,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'"
@@ -86,9 +86,3 @@ jobs:
           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 }}

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

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

.github/workflows/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,205 +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'
-    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: Pack (preview only)
-        shell: bash
-        working-directory: ${{ steps.pkg.outputs.publish_dir }}
-        run: |
-          set -euo pipefail
-          npm pack --json | tee pack-result.json
-
-      - name: Upload package tarball artifact
-        uses: actions/upload-artifact@v4
-        with:
-          name: desktop-ui-npm-tarball-${{ inputs.version }}
-          path: ${{ steps.pkg.outputs.publish_dir }}/*.tgz
-          if-no-files-found: error
-
-      - 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/tests-ci.yaml

@@ -12,6 +12,7 @@ jobs:
     runs-on: ubuntu-latest
     outputs:
       cache-key: ${{ steps.cache-key.outputs.key }}
+      playwright-version: ${{ steps.playwright-version.outputs.PLAYWRIGHT_VERSION }}
     steps:
       - name: Checkout ComfyUI
         uses: actions/checkout@v5
@@ -23,6 +24,7 @@ jobs:
       - name: Checkout ComfyUI_frontend
         uses: actions/checkout@v5
         with:
+          repository: 'Comfy-Org/ComfyUI_frontend'
           path: 'ComfyUI_frontend'
 
       - name: Copy ComfyUI_devtools from frontend repo
@@ -63,6 +65,12 @@ jobs:
         id: cache-key
         run: echo "key=$(date +%s)" >> $GITHUB_OUTPUT
 
+      - name: Playwright Version
+        id: playwright-version
+        run:  |
+          PLAYWRIGHT_VERSION=$(pnpm ls @playwright/test --json | jq --raw-output '.[0].devDependencies["@playwright/test"].version')
+          echo "PLAYWRIGHT_VERSION=$PLAYWRIGHT_VERSION" >> $GITHUB_OUTPUT
+        working-directory: ComfyUI_frontend
 
       - name: Save cache
         uses: actions/cache/save@5a3ec84eff668545956fd18022155c47e93e2684
@@ -88,7 +96,7 @@ jobs:
         run: sleep 10
 
       - name: Restore cached setup
-        uses: actions/cache/restore@v4
+        uses: actions/cache/restore@5a3ec84eff668545956fd18022155c47e93e2684
         with:
           fail-on-cache-miss: true
           path: |
@@ -115,8 +123,22 @@ jobs:
         working-directory: ComfyUI
 
 
-      - name: Setup Playwright
-        uses: ./ComfyUI_frontend/.github/actions/setup-playwright
+      - name: Cache Playwright Browsers
+        uses: actions/cache@v4
+        id: cache-playwright-browsers
+        with:
+          path: '~/.cache/ms-playwright'
+          key: '${{ runner.os }}-playwright-browsers-${{ needs.setup.outputs.playwright-version }}'
+
+      - name: Install Playwright Browsers
+        if: steps.cache-playwright-browsers.outputs.cache-hit != 'true'
+        run: pnpm exec playwright install chromium --with-deps
+        working-directory: ComfyUI_frontend
+
+      - name: Install Playwright Browsers (operating system dependencies)
+        if: steps.cache-playwright-browsers.outputs.cache-hit == 'true'
+        run: pnpm exec playwright install-deps
+        working-directory: ComfyUI_frontend
 
       - name: Start ComfyUI server
         run: |
@@ -154,7 +176,7 @@ jobs:
         run: sleep 10
 
       - name: Restore cached setup
-        uses: actions/cache/restore@v4
+        uses: actions/cache/restore@5a3ec84eff668545956fd18022155c47e93e2684
         with:
           fail-on-cache-miss: true
           path: |
@@ -180,8 +202,22 @@ jobs:
           pip install wait-for-it
         working-directory: ComfyUI
 
-      - name: Setup Playwright
-        uses: ./ComfyUI_frontend/.github/actions/setup-playwright
+      - name: Cache Playwright Browsers
+        uses: actions/cache@v4
+        id: cache-playwright-browsers
+        with:
+          path: '~/.cache/ms-playwright'
+          key: '${{ runner.os }}-playwright-browsers-${{ needs.setup.outputs.playwright-version }}'
+
+      - name: Install Playwright Browsers
+        if: steps.cache-playwright-browsers.outputs.cache-hit != 'true'
+        run: pnpm exec playwright install chromium --with-deps
+        working-directory: ComfyUI_frontend
+
+      - name: Install Playwright Browsers (operating system dependencies)
+        if: steps.cache-playwright-browsers.outputs.cache-hit == 'true'
+        run: pnpm exec playwright install-deps
+        working-directory: ComfyUI_frontend
 
       - name: Start ComfyUI server
         run: |
@@ -216,6 +252,7 @@ jobs:
       - name: Checkout ComfyUI_frontend
         uses: actions/checkout@v5
         with:
+          repository: 'Comfy-Org/ComfyUI_frontend'
           path: 'ComfyUI_frontend'
 
       - name: Install pnpm
@@ -317,4 +354,4 @@ jobs:
             "${{ github.event.pull_request.number }}" \
             "${{ github.head_ref }}" \
             "completed"
-  #### END Deployment and commenting (non-forked PRs only)
+  #### END Deployment and commenting (non-forked PRs only)

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

@@ -77,8 +77,9 @@ jobs:
         python main.py --cpu --multi-user &
         wait-for-it --service 127.0.0.1:8188 -t 600
       working-directory: ComfyUI
-    - name: Setup Playwright
-      uses: ./ComfyUI_frontend/.github/actions/setup-playwright
+    - name: Install Playwright Browsers
+      run: pnpm exec playwright install chromium --with-deps
+      working-directory: ComfyUI_frontend
     - name: Start dev server
       # Run electron dev server as it is a superset of the web dev server
       # We do want electron specific UIs to be translated.

.github/workflows/update-locales.yaml

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

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

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

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

@@ -3,58 +3,50 @@ name: Update Playwright Expectations
 
 on:
   pull_request:
-    types: [labeled]
-  issue_comment:
-    types: [created]
+    types: [ labeled ]
 
 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') )
+    if: github.event.label.name == 'New Browser Test Expectations'
     steps:
-      - name: Initial Checkout
-        uses: actions/checkout@v5
-      - name: Pull Request Checkout
-        run: gh pr checkout ${{ github.event.issue.number }}
-        if: github.event.issue.pull_request && github.event_name == 'issue_comment'
-        env:
-          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-      - name: Setup Frontend
-        uses: ./.github/actions/setup-frontend
-      - name: Setup Playwright
-        uses: ./.github/actions/setup-playwright
-      - name: Run Playwright tests and update snapshots
-        id: playwright-tests
-        run: pnpm exec playwright test --update-snapshots
-        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 "PR: ${{ github.event.issue.number }}"
-          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 add browser_tests
-          git diff --cached --quiet || git commit -m "[automated] Update test expectations"
-          git push
-        env:
-          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        working-directory: ComfyUI_frontend
+    - name: Checkout workflow repo
+      uses: actions/checkout@v5
+    - name: Setup Frontend
+      uses: ./.github/actions/setup-frontend
+    - name: Cache Playwright browsers
+      uses: actions/cache@v4
+      with:
+        path: ~/.cache/ms-playwright
+        key: playwright-browsers-${{ runner.os }}-${{ hashFiles('ComfyUI_frontend/pnpm-lock.yaml') }}
+        restore-keys: |
+          playwright-browsers-${{ runner.os }}-
+    - name: Install Playwright Browsers
+      run: pnpm exec playwright install chromium --with-deps
+      working-directory: ComfyUI_frontend
+    - name: Run Playwright tests and update snapshots
+      id: playwright-tests
+      run: pnpm exec 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/version-bump-desktop-ui.yaml

@@ -1,71 +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
-
-jobs:
-  bump-version-desktop-ui:
-    runs-on: ubuntu-latest
-    permissions:
-      contents: write
-      pull-requests: write
-
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v5
-        with:
-          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'
-
-      - 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 }}
-          branch: desktop-ui-version-bump-${{ steps.bump-version.outputs.NEW_VERSION }}
-          base: main
-          labels: |
-            Release
-

.github/workflows/vitest-tests.yaml

@@ -2,43 +2,45 @@ name: Vitest Tests
 
 on:
   push:
-    branches: [main, master, dev*, core/*, desktop/*]
+    branches: [ main, master, dev*, core/*, desktop/* ]
   pull_request:
-    branches-ignore: [wip/*, draft/*, temp/*]
+    branches-ignore: [ wip/*, draft/*, temp/* ]
 
 jobs:
   test:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v5
+    - uses: actions/checkout@v5
 
-      - name: Install pnpm
-        uses: pnpm/action-setup@v4
-        with:
-          version: 10
+    - 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: 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: 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: Install dependencies
+      run: pnpm install --frozen-lockfile
 
-      - name: Run Vitest tests
-        run: pnpm test:unit
+    - 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

.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

@@ -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 (

.storybook/preview.ts

@@ -12,9 +12,6 @@ import Tooltip from 'primevue/tooltip'
 import '@/assets/css/style.css'
 import { i18n } from '@/i18n'
 import '@/lib/litegraph/public/css/litegraph.css'
-import { useSettingStore } from '@/platform/settings/settingStore'
-import { useWidgetStore } from '@/stores/widgetStore'
-import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 
 const ComfyUIPreset = definePreset(Aura, {
   semantic: {
@@ -31,122 +28,6 @@ setup((app) => {
   const pinia = createPinia()
 
   app.use(pinia)
-
-  // Initialize stores
-  useColorPaletteStore(pinia)
-  useWidgetStore(pinia)
-
-  // Initialize setting store and mock settings for Storybook
-  const settingStore = useSettingStore(pinia)
-
-  // Initialize setting values manually for Storybook (since loadSettingValues might fail)
-  settingStore.$patch({
-    settingValues: {} // Start with empty settings values
-  })
-
-  // Mock common setting definitions for Storybook
-  const mockSettings = [
-    { id: 'Comfy.Locale', name: 'Language', type: 'combo', defaultValue: 'en' },
-    {
-      id: 'Comfy.AutoSave',
-      name: 'Auto Save',
-      type: 'boolean',
-      defaultValue: true
-    },
-    {
-      id: 'Comfy.AutoSaveInterval',
-      name: 'Auto Save Interval',
-      type: 'number',
-      defaultValue: 30
-    },
-    {
-      id: 'Comfy.ColorPalette',
-      name: 'Color Palette',
-      type: 'combo',
-      defaultValue: 'dark'
-    },
-    {
-      id: 'Comfy.AccentColor',
-      name: 'Accent Color',
-      type: 'color',
-      defaultValue: '#007bff'
-    },
-    {
-      id: 'Comfy.NodeOpacity',
-      name: 'Node Opacity',
-      type: 'slider',
-      defaultValue: 80
-    },
-    {
-      id: 'Comfy.MaxConcurrentTasks',
-      name: 'Max Concurrent Tasks',
-      type: 'number',
-      defaultValue: 4
-    },
-    {
-      id: 'Comfy.EnableGPUAcceleration',
-      name: 'GPU Acceleration',
-      type: 'boolean',
-      defaultValue: true
-    },
-    {
-      id: 'Comfy.CacheSize',
-      name: 'Cache Size',
-      type: 'slider',
-      defaultValue: 512
-    },
-    // Mock settings used in stories
-    {
-      id: 'test.setting',
-      name: 'Test Setting',
-      type: 'boolean',
-      defaultValue: false
-    },
-    {
-      id: 'mixed.boolean',
-      name: 'Boolean Setting',
-      type: 'boolean',
-      defaultValue: true
-    },
-    {
-      id: 'mixed.text',
-      name: 'Text Setting',
-      type: 'text',
-      defaultValue: 'Default text'
-    },
-    {
-      id: 'mixed.number',
-      name: 'Number Setting',
-      type: 'number',
-      defaultValue: 42
-    },
-    {
-      id: 'mixed.slider',
-      name: 'Slider Setting',
-      type: 'slider',
-      defaultValue: 75
-    },
-    {
-      id: 'mixed.combo',
-      name: 'Combo Setting',
-      type: 'combo',
-      defaultValue: 'option2'
-    },
-    {
-      id: 'mixed.color',
-      name: 'Color Setting',
-      type: 'color',
-      defaultValue: '#ff6b35'
-    }
-  ]
-
-  // Register mock settings
-  try {
-    mockSettings.forEach((setting) => settingStore.addSetting(setting as any))
-  } catch (error) {
-    console.warn('Failed to add settings, they might already exist:', error)
-  }
-
   app.use(i18n)
   app.use(PrimeVue, {
     theme: {

.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

@@ -12,7 +12,8 @@
 - `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.

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

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

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,7 +262,7 @@ 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.

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 Desktop</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.1",
-  "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,88 +0,0 @@
-import arCommands from '@frontend-locales/ar/commands.json' with { type: 'json' }
-import ar from '@frontend-locales/ar/main.json' with { type: 'json' }
-import arNodes from '@frontend-locales/ar/nodeDefs.json' with { type: 'json' }
-import arSettings from '@frontend-locales/ar/settings.json' with { type: 'json' }
-import enCommands from '@frontend-locales/en/commands.json' with { type: 'json' }
-import en from '@frontend-locales/en/main.json' with { type: 'json' }
-import enNodes from '@frontend-locales/en/nodeDefs.json' with { type: 'json' }
-import enSettings from '@frontend-locales/en/settings.json' with { type: 'json' }
-import esCommands from '@frontend-locales/es/commands.json' with { type: 'json' }
-import es from '@frontend-locales/es/main.json' with { type: 'json' }
-import esNodes from '@frontend-locales/es/nodeDefs.json' with { type: 'json' }
-import esSettings from '@frontend-locales/es/settings.json' with { type: 'json' }
-import frCommands from '@frontend-locales/fr/commands.json' with { type: 'json' }
-import fr from '@frontend-locales/fr/main.json' with { type: 'json' }
-import frNodes from '@frontend-locales/fr/nodeDefs.json' with { type: 'json' }
-import frSettings from '@frontend-locales/fr/settings.json' with { type: 'json' }
-import jaCommands from '@frontend-locales/ja/commands.json' with { type: 'json' }
-import ja from '@frontend-locales/ja/main.json' with { type: 'json' }
-import jaNodes from '@frontend-locales/ja/nodeDefs.json' with { type: 'json' }
-import jaSettings from '@frontend-locales/ja/settings.json' with { type: 'json' }
-import koCommands from '@frontend-locales/ko/commands.json' with { type: 'json' }
-import ko from '@frontend-locales/ko/main.json' with { type: 'json' }
-import koNodes from '@frontend-locales/ko/nodeDefs.json' with { type: 'json' }
-import koSettings from '@frontend-locales/ko/settings.json' with { type: 'json' }
-import ruCommands from '@frontend-locales/ru/commands.json' with { type: 'json' }
-import ru from '@frontend-locales/ru/main.json' with { type: 'json' }
-import ruNodes from '@frontend-locales/ru/nodeDefs.json' with { type: 'json' }
-import ruSettings from '@frontend-locales/ru/settings.json' with { type: 'json' }
-import trCommands from '@frontend-locales/tr/commands.json' with { type: 'json' }
-import tr from '@frontend-locales/tr/main.json' with { type: 'json' }
-import trNodes from '@frontend-locales/tr/nodeDefs.json' with { type: 'json' }
-import trSettings from '@frontend-locales/tr/settings.json' with { type: 'json' }
-import zhTWCommands from '@frontend-locales/zh-TW/commands.json' with { type: 'json' }
-import zhTW from '@frontend-locales/zh-TW/main.json' with { type: 'json' }
-import zhTWNodes from '@frontend-locales/zh-TW/nodeDefs.json' with { type: 'json' }
-import zhTWSettings from '@frontend-locales/zh-TW/settings.json' with { type: 'json' }
-import zhCommands from '@frontend-locales/zh/commands.json' with { type: 'json' }
-import zh from '@frontend-locales/zh/main.json' with { type: 'json' }
-import zhNodes from '@frontend-locales/zh/nodeDefs.json' with { type: 'json' }
-import zhSettings from '@frontend-locales/zh/settings.json' with { type: 'json' }
-import { createI18n } from 'vue-i18n'
-
-function buildLocale<M, N, C, S>(main: M, nodes: N, commands: C, settings: S) {
-  return {
-    ...main,
-    nodeDefs: nodes,
-    commands: commands,
-    settings: settings
-  }
-}
-
-const messages = {
-  en: buildLocale(en, enNodes, enCommands, enSettings),
-  zh: buildLocale(zh, zhNodes, zhCommands, zhSettings),
-  'zh-TW': buildLocale(zhTW, zhTWNodes, zhTWCommands, zhTWSettings),
-  ru: buildLocale(ru, ruNodes, ruCommands, ruSettings),
-  ja: buildLocale(ja, jaNodes, jaCommands, jaSettings),
-  ko: buildLocale(ko, koNodes, koCommands, koSettings),
-  fr: buildLocale(fr, frNodes, frCommands, frSettings),
-  es: buildLocale(es, esNodes, esCommands, esSettings),
-  ar: buildLocale(ar, arNodes, arCommands, arSettings),
-  tr: buildLocale(tr, trNodes, trCommands, trSettings)
-}
-
-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/fixtures/VueNodeHelpers.ts

@@ -13,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'
+    )
   }
 
   /**

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/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/vueNodes/groups/groups.spec.ts

@@ -8,7 +8,6 @@ const CREATE_GROUP_HOTKEY = 'Control+g'
 test.describe('Vue Node Groups', () => {
   test.beforeEach(async ({ comfyPage }) => {
     await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)
-    await comfyPage.setSetting('Comfy.Minimap.ShowGroups', true)
     await comfyPage.vueNodes.waitForNodes()
   })
 
@@ -16,7 +15,6 @@ test.describe('Vue Node Groups', () => {
     await comfyPage.page.getByText('Load Checkpoint').click()
     await comfyPage.page.getByText('KSampler').click({ modifiers: ['Control'] })
     await comfyPage.page.keyboard.press(CREATE_GROUP_HOTKEY)
-    await comfyPage.nextFrame()
     await expect(comfyPage.canvas).toHaveScreenshot(
       'vue-groups-create-group.png'
     )

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

@@ -693,99 +693,4 @@ test.describe('Vue Node Link Interaction', () => {
       if (shiftHeld) await comfyPage.page.keyboard.up('Shift').catch(() => {})
     }
   })
-
-  test('should snap to node center while dragging and link on drop', async ({
-    comfyPage,
-    comfyMouse
-  }) => {
-    const clipNode = (await comfyPage.getNodeRefsByType('CLIPTextEncode'))[0]
-    const samplerNode = (await comfyPage.getNodeRefsByType('KSampler'))[0]
-    expect(clipNode && samplerNode).toBeTruthy()
-
-    // Start drag from CLIP output[0]
-    const clipOutputCenter = await getSlotCenter(
-      comfyPage.page,
-      clipNode.id,
-      0,
-      false
-    )
-
-    // Drag to the visual center of the KSampler Vue node (not a slot)
-    const samplerVue = comfyPage.vueNodes.getNodeLocator(String(samplerNode.id))
-    await expect(samplerVue).toBeVisible()
-    const samplerCenter = await getCenter(samplerVue)
-
-    await comfyMouse.move(clipOutputCenter)
-    await comfyMouse.drag(samplerCenter)
-
-    // During drag, the preview should snap/highlight a compatible input on KSampler
-    await expect(comfyPage.canvas).toHaveScreenshot('vue-node-snap-to-node.png')
-
-    // Drop to create the link
-    await comfyMouse.drop()
-    await comfyPage.nextFrame()
-
-    // Validate a link was created to one of KSampler's compatible inputs (1 or 2)
-    const linkOnInput1 = await getInputLinkDetails(
-      comfyPage.page,
-      samplerNode.id,
-      1
-    )
-    const linkOnInput2 = await getInputLinkDetails(
-      comfyPage.page,
-      samplerNode.id,
-      2
-    )
-
-    const linked = linkOnInput1 ?? linkOnInput2
-    expect(linked).not.toBeNull()
-    expect(linked?.originId).toBe(clipNode.id)
-    expect(linked?.targetId).toBe(samplerNode.id)
-  })
-
-  test('should snap to a specific compatible slot when targeting it', async ({
-    comfyPage,
-    comfyMouse
-  }) => {
-    const clipNode = (await comfyPage.getNodeRefsByType('CLIPTextEncode'))[0]
-    const samplerNode = (await comfyPage.getNodeRefsByType('KSampler'))[0]
-    expect(clipNode && samplerNode).toBeTruthy()
-
-    // Drag from CLIP output[0] to KSampler input[2] (third slot) which is the
-    // second compatible input for CLIP
-    const clipOutputCenter = await getSlotCenter(
-      comfyPage.page,
-      clipNode.id,
-      0,
-      false
-    )
-    const samplerInput3Center = await getSlotCenter(
-      comfyPage.page,
-      samplerNode.id,
-      2,
-      true
-    )
-
-    await comfyMouse.move(clipOutputCenter)
-    await comfyMouse.drag(samplerInput3Center)
-
-    // Expect the preview to show snapping to the targeted slot
-    await expect(comfyPage.canvas).toHaveScreenshot('vue-node-snap-to-slot.png')
-
-    // Finish the connection
-    await comfyMouse.drop()
-    await comfyPage.nextFrame()
-
-    const linkDetails = await getInputLinkDetails(
-      comfyPage.page,
-      samplerNode.id,
-      2
-    )
-    expect(linkDetails).not.toBeNull()
-    expect(linkDetails).toMatchObject({
-      originId: clipNode.id,
-      targetId: samplerNode.id,
-      targetSlot: 2
-    })
-  })
 })

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

@@ -1,67 +0,0 @@
-import {
-  type ComfyPage,
-  comfyExpect as expect,
-  comfyPageFixture as test
-} from '../../../../fixtures/ComfyPage'
-import type { Position } from '../../../../fixtures/types'
-
-test.describe('Vue Node Moving', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)
-    await comfyPage.vueNodes.waitForNodes()
-  })
-
-  const getLoadCheckpointHeaderPos = async (comfyPage: ComfyPage) => {
-    const loadCheckpointHeaderPos = await comfyPage.page
-      .getByText('Load Checkpoint')
-      .boundingBox()
-
-    if (!loadCheckpointHeaderPos)
-      throw new Error('Load Checkpoint header not found')
-
-    return loadCheckpointHeaderPos
-  }
-
-  const expectPosChanged = async (pos1: Position, pos2: Position) => {
-    const diffX = Math.abs(pos2.x - pos1.x)
-    const diffY = Math.abs(pos2.y - pos1.y)
-    expect(diffX).toBeGreaterThan(0)
-    expect(diffY).toBeGreaterThan(0)
-  }
-
-  test('should allow moving nodes by dragging', async ({ comfyPage }) => {
-    const loadCheckpointHeaderPos = await getLoadCheckpointHeaderPos(comfyPage)
-    await comfyPage.dragAndDrop(loadCheckpointHeaderPos, {
-      x: 256,
-      y: 256
-    })
-
-    const newHeaderPos = await getLoadCheckpointHeaderPos(comfyPage)
-    await expectPosChanged(loadCheckpointHeaderPos, newHeaderPos)
-
-    await expect(comfyPage.canvas).toHaveScreenshot('vue-node-moved-node.png')
-  })
-
-  test('@mobile should allow moving nodes by dragging on touch devices', async ({
-    comfyPage
-  }) => {
-    // Disable minimap (gets in way of the node on small screens)
-    await comfyPage.setSetting('Comfy.Minimap.Visible', false)
-
-    const loadCheckpointHeaderPos = await getLoadCheckpointHeaderPos(comfyPage)
-    await comfyPage.panWithTouch(
-      {
-        x: 64,
-        y: 64
-      },
-      loadCheckpointHeaderPos
-    )
-
-    const newHeaderPos = await getLoadCheckpointHeaderPos(comfyPage)
-    await expectPosChanged(loadCheckpointHeaderPos, newHeaderPos)
-
-    await expect(comfyPage.canvas).toHaveScreenshot(
-      'vue-node-moved-node-touch.png'
-    )
-  })
-})

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

@@ -50,17 +50,17 @@ test.describe('Vue Node Collapse', () => {
 
     // Check initial expanded state icon
     let iconClass = await vueNode.getCollapseIconClass()
-    expect(iconClass).not.toContain('-rotate-90')
+    expect(iconClass).toContain('pi-chevron-down')
 
     // Collapse and check icon
     await vueNode.toggleCollapse()
     iconClass = await vueNode.getCollapseIconClass()
-    expect(iconClass).toContain('-rotate-90')
+    expect(iconClass).toContain('pi-chevron-right')
 
     // Expand and check icon
     await vueNode.toggleCollapse()
     iconClass = await vueNode.getCollapseIconClass()
-    expect(iconClass).not.toContain('-rotate-90')
+    expect(iconClass).toContain('pi-chevron-down')
   })
 
   test('should preserve title when collapsing/expanding', async ({

eslint.config.ts

@@ -1,7 +1,6 @@
 // For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
 import pluginJs from '@eslint/js'
 import pluginI18n from '@intlify/eslint-plugin-vue-i18n'
-import { importX } from 'eslint-plugin-import-x'
 import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'
 import storybook from 'eslint-plugin-storybook'
 import unusedImports from 'eslint-plugin-unused-imports'
@@ -38,9 +37,7 @@ export default defineConfig([
           allowDefaultProject: [
             'vite.config.mts',
             'vite.electron.config.mts',
-            'vite.types.config.mts',
-            'playwright.config.ts',
-            'playwright.i18n.config.ts'
+            'vite.types.config.mts'
           ]
         },
         tsConfigRootDir: import.meta.dirname,
@@ -48,12 +45,6 @@ export default defineConfig([
         sourceType: 'module',
         extraFileExtensions
       }
-    },
-    settings: {
-      'import/resolver': {
-        typescript: true,
-        node: true
-      }
     }
   },
   {
@@ -72,24 +63,13 @@ export default defineConfig([
         sourceType: 'module',
         extraFileExtensions
       }
-    },
-    settings: {
-      'import/resolver': {
-        typescript: true,
-        node: true
-      }
     }
   },
   pluginJs.configs.recommended,
-  // eslint-disable-next-line import-x/no-named-as-default-member
   tseslint.configs.recommended,
   pluginVue.configs['flat/recommended'],
   eslintPluginPrettierRecommended,
   storybook.configs['flat/recommended'],
-  // @ts-expect-error Bad types in the plugin
-  importX.flatConfigs.recommended,
-  // @ts-expect-error Bad types in the plugin
-  importX.flatConfigs.typescript,
   {
     plugins: {
       'unused-imports': unusedImports,
@@ -109,17 +89,12 @@ export default defineConfig([
           allowInterfaces: 'always'
         }
       ],
-      'import-x/consistent-type-specifier-style': ['error', 'prefer-top-level'],
-      'import-x/no-useless-path-segments': 'error',
-      'import-x/no-relative-packages': 'error',
       'unused-imports/no-unused-imports': 'error',
-      'no-console': ['error', { allow: ['warn', 'error'] }],
       'vue/no-v-html': 'off',
       // Enforce dark-theme: instead of dark: prefix
       'vue/no-restricted-class': ['error', '/^dark:/'],
       'vue/multi-word-component-names': 'off', // TODO: fix
       'vue/no-template-shadow': 'off', // TODO: fix
-      'vue/match-component-import-name': 'error',
       /* Toggle on to do additional until we can clean up existing violations.
       'vue/no-unused-emit-declarations': 'error',
       'vue/no-unused-properties': 'error',
@@ -232,11 +207,5 @@ export default defineConfig([
         }
       ]
     }
-  },
-  {
-    files: ['**/*.{test,spec,stories}.ts', '**/*.stories.vue'],
-    rules: {
-      'no-console': 'off'
-    }
   }
 ])

knip.config.ts

@@ -20,6 +20,7 @@ const config: KnipConfig = {
       project: ['src/**/*.{js,ts}', '*.{js,ts,mts}']
     },
     'packages/registry-types': {
+      entry: ['src/comfyRegistryTypes.ts'],
       project: ['src/**/*.{js,ts}']
     }
   },
@@ -44,9 +45,9 @@ const config: KnipConfig = {
   compilers: {
     // https://github.com/webpro-nl/knip/issues/1008#issuecomment-3207756199
     css: (text: string) =>
-      [...text.replaceAll('plugin', 'import').matchAll(/(?<=@)import[^;]+/g)]
-        .map((match) => match[0].replace(/url\(['"]?([^'"()]+)['"]?\)/, '$1'))
-        .join('\n')
+      [
+        ...text.replaceAll('plugin', 'import').matchAll(/(?<=@)import[^;]+/g)
+      ].join('\n')
   },
   vite: {
     config: ['vite?(.*).config.mts']

package.json

@@ -1,129 +1,123 @@
 {
   "name": "@comfyorg/comfyui-frontend",
   "private": true,
-  "version": "1.29.0",
+  "version": "1.28.4",
   "type": "module",
   "repository": "https://github.com/Comfy-Org/ComfyUI_frontend",
   "homepage": "https://comfy.org",
   "description": "Official front-end implementation of ComfyUI",
   "license": "GPL-3.0-only",
   "scripts": {
-    "build:desktop": "nx build @comfyorg/desktop-ui",
-    "build-storybook": "storybook build",
-    "build:types": "nx build --config vite.types.config.mts && node scripts/prepare-types.js",
-    "build": "cross-env NODE_OPTIONS='--max-old-space-size=8192' pnpm typecheck && nx build",
-    "collect-i18n": "pnpm exec playwright test --config=playwright.i18n.config.ts",
-    "dev:desktop": "nx dev @comfyorg/desktop-ui",
-    "dev:electron": "nx serve --config vite.electron.config.mts",
     "dev": "nx serve",
-    "devtools:pycheck": "python3 -m compileall -q tools/devtools",
-    "format:check:no-cache": "prettier --check './**/*.{js,ts,tsx,vue,mts}'",
+    "dev:electron": "nx serve --config vite.electron.config.mts",
+    "build": "pnpm typecheck && nx build",
+    "build:types": "nx build --config vite.types.config.mts && node scripts/prepare-types.js",
+    "zipdist": "node scripts/zipdist.js",
+    "typecheck": "vue-tsc --noEmit",
+    "format": "prettier --write './**/*.{js,ts,tsx,vue,mts}' --cache --list-different",
     "format:check": "prettier --check './**/*.{js,ts,tsx,vue,mts}' --cache",
     "format:no-cache": "prettier --write './**/*.{js,ts,tsx,vue,mts}' --list-different",
-    "format": "prettier --write './**/*.{js,ts,tsx,vue,mts}' --cache --list-different",
-    "json-schema": "tsx scripts/generate-json-schema.ts",
-    "knip:no-cache": "knip",
-    "knip": "knip --cache",
-    "lint:fix:no-cache": "eslint src --fix",
-    "lint:fix": "eslint src --cache --fix",
-    "lint:no-cache": "eslint src",
-    "lint:unstaged:fix": "git diff --name-only HEAD | grep -E '\\.(js|ts|vue|mts)$' | xargs -r eslint --cache --fix",
-    "lint:unstaged": "git diff --name-only HEAD | grep -E '\\.(js|ts|vue|mts)$' | xargs -r eslint --cache",
-    "lint": "eslint src --cache",
-    "locale": "lobe-i18n locale",
+    "format:check:no-cache": "prettier --check './**/*.{js,ts,tsx,vue,mts}'",
+    "test:all": "nx run test",
+    "test:browser": "pnpm exec nx e2e",
+    "test:component": "nx run test src/components/",
+    "test:litegraph": "vitest run --config vitest.litegraph.config.ts",
+    "test:unit": "nx run test tests-ui/tests",
     "preinstall": "pnpm dlx only-allow pnpm",
     "prepare": "husky || true && git config blame.ignoreRevsFile .git-blame-ignore-revs || true",
     "preview": "nx preview",
+    "lint": "eslint src --cache",
+    "lint:fix": "eslint src --cache --fix",
+    "lint:unstaged": "git diff --name-only HEAD | grep -E '\\.(js|ts|vue|mts)$' | xargs -r eslint --cache",
+    "lint:unstaged:fix": "git diff --name-only HEAD | grep -E '\\.(js|ts|vue|mts)$' | xargs -r eslint --cache --fix",
+    "lint:no-cache": "eslint src",
+    "lint:fix:no-cache": "eslint src --fix",
+    "knip": "knip --cache",
+    "knip:no-cache": "knip",
+    "locale": "lobe-i18n locale",
+    "collect-i18n": "pnpm exec playwright test --config=playwright.i18n.config.ts",
+    "json-schema": "tsx scripts/generate-json-schema.ts",
     "storybook": "nx storybook -p 6006",
-    "stylelint:fix": "stylelint --cache --fix '{apps,packages,src}/**/*.{css,vue}'",
-    "stylelint": "stylelint --cache '{apps,packages,src}/**/*.{css,vue}'",
-    "test:browser": "pnpm exec nx e2e",
-    "test:unit": "nx run test",
-    "typecheck": "vue-tsc --noEmit",
-    "zipdist": "node scripts/zipdist.js"
+    "build-storybook": "storybook build",
+    "devtools:pycheck": "python3 -m compileall -q tools/devtools"
   },
   "devDependencies": {
-    "@eslint/js": "catalog:",
-    "@intlify/eslint-plugin-vue-i18n": "catalog:",
-    "@lobehub/i18n-cli": "catalog:",
-    "@nx/eslint": "catalog:",
-    "@nx/playwright": "catalog:",
-    "@nx/storybook": "catalog:",
-    "@nx/vite": "catalog:",
-    "@pinia/testing": "catalog:",
-    "@playwright/test": "catalog:",
-    "@storybook/addon-docs": "catalog:",
-    "@storybook/vue3": "catalog:",
-    "@storybook/vue3-vite": "catalog:",
-    "@tailwindcss/vite": "catalog:",
-    "@trivago/prettier-plugin-sort-imports": "catalog:",
-    "@types/fs-extra": "catalog:",
-    "@types/jsdom": "catalog:",
-    "@types/node": "catalog:",
-    "@types/semver": "catalog:",
-    "@types/three": "catalog:",
-    "@vitejs/plugin-vue": "catalog:",
-    "@vitest/coverage-v8": "catalog:",
-    "@vitest/ui": "catalog:",
-    "@vue/test-utils": "catalog:",
-    "cross-env": "catalog:",
-    "eslint": "catalog:",
-    "eslint-config-prettier": "catalog:",
-    "eslint-import-resolver-typescript": "catalog:",
-    "eslint-plugin-import-x": "catalog:",
-    "eslint-plugin-prettier": "catalog:",
-    "eslint-plugin-storybook": "catalog:",
-    "eslint-plugin-unused-imports": "catalog:",
-    "eslint-plugin-vue": "catalog:",
+    "@eslint/js": "^9.35.0",
+    "@intlify/eslint-plugin-vue-i18n": "^4.1.0",
+    "@lobehub/i18n-cli": "^1.25.1",
+    "@nx/eslint": "21.4.1",
+    "@nx/playwright": "21.4.1",
+    "@nx/storybook": "21.4.1",
+    "@nx/vite": "21.4.1",
+    "@pinia/testing": "^0.1.5",
+    "@playwright/test": "^1.52.0",
+    "@storybook/addon-docs": "^9.1.1",
+    "@storybook/vue3": "^9.1.1",
+    "@storybook/vue3-vite": "^9.1.1",
+    "@tailwindcss/vite": "^4.1.12",
+    "@trivago/prettier-plugin-sort-imports": "^5.2.0",
+    "@types/fs-extra": "^11.0.4",
+    "@types/jsdom": "^21.1.7",
+    "@types/node": "^20.14.8",
+    "@types/semver": "^7.7.0",
+    "@types/three": "^0.169.0",
+    "@vitejs/plugin-vue": "^5.1.4",
+    "@vitest/coverage-v8": "^3.2.4",
+    "@vitest/ui": "^3.0.0",
+    "@vue/test-utils": "^2.4.6",
+    "eslint": "^9.34.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.4",
+    "eslint-plugin-storybook": "^9.1.6",
+    "eslint-plugin-unused-imports": "^4.2.0",
+    "eslint-plugin-vue": "^10.4.0",
     "fs-extra": "^11.2.0",
-    "globals": "catalog:",
-    "happy-dom": "catalog:",
-    "husky": "catalog:",
-    "jiti": "catalog:",
-    "jsdom": "catalog:",
-    "knip": "catalog:",
-    "lint-staged": "catalog:",
-    "nx": "catalog:",
-    "postcss-html": "catalog:",
-    "prettier": "catalog:",
-    "storybook": "catalog:",
-    "stylelint": "catalog:",
-    "tailwindcss": "catalog:",
-    "tailwindcss-primeui": "catalog:",
-    "tsx": "catalog:",
-    "tw-animate-css": "catalog:",
-    "typescript": "catalog:",
-    "typescript-eslint": "catalog:",
-    "unplugin-icons": "catalog:",
-    "unplugin-vue-components": "catalog:",
+    "globals": "^15.9.0",
+    "happy-dom": "^15.11.0",
+    "husky": "^9.0.11",
+    "jiti": "2.4.2",
+    "jsdom": "^26.1.0",
+    "knip": "^5.62.0",
+    "lint-staged": "^15.2.7",
+    "nx": "21.4.1",
+    "prettier": "^3.3.2",
+    "storybook": "^9.1.6",
+    "tailwindcss": "^4.1.12",
+    "tailwindcss-primeui": "^0.6.1",
+    "tsx": "^4.15.6",
+    "tw-animate-css": "^1.3.8",
+    "typescript": "^5.4.5",
+    "typescript-eslint": "^8.44.0",
+    "unplugin-icons": "^0.22.0",
+    "unplugin-vue-components": "^0.28.0",
     "uuid": "^11.1.0",
-    "vite": "catalog:",
-    "vite-plugin-dts": "catalog:",
-    "vite-plugin-html": "catalog:",
-    "vite-plugin-vue-devtools": "catalog:",
-    "vitest": "catalog:",
-    "vue-component-type-helpers": "catalog:",
-    "vue-eslint-parser": "catalog:",
-    "vue-tsc": "catalog:",
+    "vite": "^5.4.19",
+    "vite-plugin-dts": "^4.5.4",
+    "vite-plugin-html": "^3.2.2",
+    "vite-plugin-vue-devtools": "^7.7.6",
+    "vitest": "^3.2.4",
+    "vue-component-type-helpers": "^3.0.7",
+    "vue-eslint-parser": "^10.2.0",
+    "vue-tsc": "^3.0.7",
     "zip-dir": "^2.0.0",
-    "zod-to-json-schema": "catalog:"
+    "zod-to-json-schema": "^3.24.1"
   },
   "dependencies": {
-    "@alloc/quick-lru": "catalog:",
+    "@alloc/quick-lru": "^5.2.0",
     "@atlaskit/pragmatic-drag-and-drop": "^1.3.1",
     "@comfyorg/comfyui-electron-types": "0.4.73-0",
     "@comfyorg/design-system": "workspace:*",
     "@comfyorg/registry-types": "workspace:*",
     "@comfyorg/tailwind-utils": "workspace:*",
-    "@iconify/json": "catalog:",
-    "@primeuix/forms": "catalog:",
-    "@primeuix/styled": "catalog:",
-    "@primeuix/utils": "catalog:",
-    "@primevue/core": "catalog:",
-    "@primevue/forms": "catalog:",
-    "@primevue/icons": "catalog:",
-    "@primevue/themes": "catalog:",
-    "@sentry/vue": "catalog:",
+    "@iconify/json": "^2.2.380",
+    "@primeuix/forms": "0.0.2",
+    "@primeuix/styled": "0.3.2",
+    "@primeuix/utils": "^0.3.2",
+    "@primevue/core": "^4.2.5",
+    "@primevue/forms": "^4.2.5",
+    "@primevue/icons": "4.2.5",
+    "@primevue/themes": "^4.2.5",
+    "@sentry/vue": "^8.48.0",
     "@tiptap/core": "^2.10.4",
     "@tiptap/extension-link": "^2.10.4",
     "@tiptap/extension-table": "^2.10.4",
@@ -131,39 +125,39 @@
     "@tiptap/extension-table-header": "^2.10.4",
     "@tiptap/extension-table-row": "^2.10.4",
     "@tiptap/starter-kit": "^2.10.4",
-    "@vueuse/core": "catalog:",
-    "@vueuse/integrations": "catalog:",
+    "@vueuse/core": "^11.0.0",
+    "@vueuse/integrations": "^13.9.0",
     "@xterm/addon-fit": "^0.10.0",
     "@xterm/addon-serialize": "^0.13.0",
     "@xterm/xterm": "^5.5.0",
-    "algoliasearch": "catalog:",
-    "axios": "catalog:",
+    "algoliasearch": "^5.21.0",
+    "axios": "^1.8.2",
     "chart.js": "^4.5.0",
     "dompurify": "^3.2.5",
-    "dotenv": "catalog:",
+    "dotenv": "^16.4.5",
     "es-toolkit": "^1.39.9",
     "extendable-media-recorder": "^9.2.27",
     "extendable-media-recorder-wav-encoder": "^7.0.129",
     "fast-glob": "^3.3.3",
-    "firebase": "catalog:",
+    "firebase": "^11.6.0",
     "fuse.js": "^7.0.0",
     "glob": "^11.0.3",
     "jsondiffpatch": "^0.6.0",
     "loglevel": "^1.9.2",
     "marked": "^15.0.11",
-    "pinia": "catalog:",
-    "primeicons": "catalog:",
-    "primevue": "catalog:",
+    "pinia": "^2.1.7",
+    "primeicons": "^7.0.0",
+    "primevue": "^4.2.5",
     "reka-ui": "^2.5.0",
     "semver": "^7.7.2",
     "three": "^0.170.0",
     "tiptap-markdown": "^0.8.10",
-    "vue": "catalog:",
-    "vue-i18n": "catalog:",
-    "vue-router": "catalog:",
-    "vuefire": "catalog:",
-    "yjs": "catalog:",
-    "zod": "catalog:",
-    "zod-validation-error": "catalog:"
+    "vue": "^3.5.13",
+    "vue-i18n": "^9.14.3",
+    "vue-router": "^4.4.3",
+    "vuefire": "^3.2.1",
+    "yjs": "^13.6.27",
+    "zod": "^3.23.8",
+    "zod-validation-error": "^3.3.0"
   }
 }

packages/design-system/package.json

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