code improve

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

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

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

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

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

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

.claude/commands/setup_repo.md

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

.env_example

@@ -5,10 +5,6 @@ PLAYWRIGHT_TEST_URL=http://localhost:5173
 
 # Proxy target of the local development server
 # Note: localhost:8188 does not work.
-# Cloud auto-detection: Setting this to any *.comfy.org URL automatically enables
-# cloud mode (DISTRIBUTION=cloud) without needing to set DISTRIBUTION separately.
-# Examples: https://testcloud.comfy.org/, https://stagingcloud.comfy.org/,
-#           https://pr-123.testenvs.comfy.org/, https://cloud.comfy.org/
 DEV_SERVER_COMFYUI_URL=http://127.0.0.1:8188
 
 # Allow dev server access from remote IP addresses.
@@ -23,10 +19,10 @@ TEST_COMFYUI_DIR=/home/ComfyUI
 # Whether to enable minification of the frontend code.
 ENABLE_MINIFY=true
 
-# Whether to disable proxying the `/templates` route. If true, allows you to
-# serve templates from the ComfyUI_frontend/public/templates folder (for
-# locally testing changes to templates). When false or nonexistent, the
-# templates are served via the normal method from the server's python site
+# Whether to disable proxying the `/templates` route. If true, allows you to 
+# serve templates from the ComfyUI_frontend/public/templates folder (for 
+# locally testing changes to templates). When false or nonexistent, the 
+# templates are served via the normal method from the server's python site 
 # packages.
 DISABLE_TEMPLATES_PROXY=false
 
@@ -37,8 +33,3 @@ DISABLE_VUE_PLUGINS=false
 # Algolia credentials required for developing with the new custom node manager.
 ALGOLIA_APP_ID=4E0RO38HS8
 ALGOLIA_API_KEY=684d998c36b67a9a9fce8fc2d8860579
-
-# Sentry ENV vars replace with real ones for debugging
-# SENTRY_AUTH_TOKEN=private-token # get from sentry
-# SENTRY_ORG=comfy-org
-# SENTRY_PROJECT=cloud-frontend-staging

.gitattributes

@@ -7,11 +7,10 @@
 *.json text eol=lf
 *.mjs text eol=lf
 *.mts text eol=lf
-*.snap text eol=lf
 *.ts text eol=lf
 *.vue text eol=lf
 *.yaml text eol=lf
 
 # Generated files
-packages/registry-types/src/comfyRegistryTypes.ts linguist-generated=true
-src/workbench/extensions/manager/types/generatedManagerTypes.ts linguist-generated=true
+src/types/comfyRegistryTypes.ts linguist-generated=true
+src/types/generatedManagerTypes.ts linguist-generated=true

.github/actions/setup-comfyui-server/action.yml

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

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

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

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

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

.github/workflows/README.md

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

.github/workflows/backport.yaml

@@ -0,0 +1,185 @@
+name: Auto Backport
+
+on:
+  pull_request_target:
+    types: [closed, labeled]
+    branches: [main]
+
+jobs:
+  backport:
+    if: github.event.pull_request.merged == true && contains(github.event.pull_request.labels.*.name, 'needs-backport')
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      pull-requests: write
+      issues: write
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Configure git
+        run: |
+          git config user.name "github-actions[bot]"
+          git config user.email "github-actions[bot]@users.noreply.github.com"
+
+      - name: Check if backports already exist
+        id: check-existing
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          PR_NUMBER: ${{ github.event.pull_request.number }}
+        run: |
+          # Check for existing backport PRs for this PR number
+          EXISTING_BACKPORTS=$(gh pr list --state all --search "backport-${PR_NUMBER}-to" --json title,headRefName,baseRefName | jq -r '.[].headRefName')
+          
+          if [ -z "$EXISTING_BACKPORTS" ]; then
+            echo "skip=false" >> $GITHUB_OUTPUT
+            exit 0
+          fi
+          
+          echo "Found existing backport PRs:"
+          echo "$EXISTING_BACKPORTS"
+          echo "skip=true" >> $GITHUB_OUTPUT
+          echo "::warning::Backport PRs already exist for PR #${PR_NUMBER}, skipping to avoid duplicates"
+
+      - name: Extract version labels
+        if: steps.check-existing.outputs.skip != 'true'
+        id: versions
+        run: |
+          # Extract version labels (e.g., "1.24", "1.22")
+          VERSIONS=""
+          LABELS='${{ toJSON(github.event.pull_request.labels) }}'
+          for label in $(echo "$LABELS" | jq -r '.[].name'); do
+            # Match version labels like "1.24" (major.minor only)
+            if [[ "$label" =~ ^[0-9]+\.[0-9]+$ ]]; then
+              # Validate the branch exists before adding to list
+              if git ls-remote --exit-code origin "core/${label}" >/dev/null 2>&1; then
+                VERSIONS="${VERSIONS}${label} "
+              else
+                echo "::warning::Label '${label}' found but branch 'core/${label}' does not exist"
+              fi
+            fi
+          done
+
+          if [ -z "$VERSIONS" ]; then
+            echo "::error::No version labels found (e.g., 1.24, 1.22)"
+            exit 1
+          fi
+
+          echo "versions=${VERSIONS}" >> $GITHUB_OUTPUT
+          echo "Found version labels: ${VERSIONS}"
+
+      - name: Backport commits
+        if: steps.check-existing.outputs.skip != 'true'
+        id: backport
+        env:
+          PR_NUMBER: ${{ github.event.pull_request.number }}
+          PR_TITLE: ${{ github.event.pull_request.title }}
+          MERGE_COMMIT: ${{ github.event.pull_request.merge_commit_sha }}
+        run: |
+          FAILED=""
+          SUCCESS=""
+
+          for version in ${{ steps.versions.outputs.versions }}; do
+            echo "::group::Backporting to core/${version}"
+
+            TARGET_BRANCH="core/${version}"
+            BACKPORT_BRANCH="backport-${PR_NUMBER}-to-${version}"
+
+            # Fetch target branch (fail if doesn't exist)
+            if ! git fetch origin "${TARGET_BRANCH}"; then
+              echo "::error::Target branch ${TARGET_BRANCH} does not exist"
+              FAILED="${FAILED}${version}:branch-missing "
+              echo "::endgroup::"
+              continue
+            fi
+
+            # Create backport branch
+            git checkout -b "${BACKPORT_BRANCH}" "origin/${TARGET_BRANCH}"
+
+            # Try cherry-pick
+            if git cherry-pick "${MERGE_COMMIT}"; then
+              git push origin "${BACKPORT_BRANCH}"
+              SUCCESS="${SUCCESS}${version}:${BACKPORT_BRANCH} "
+              echo "Successfully created backport branch: ${BACKPORT_BRANCH}"
+              # Return to main (keep the branch, we need it for PR)
+              git checkout main
+            else
+              # Get conflict info
+              CONFLICTS=$(git diff --name-only --diff-filter=U | tr '\n' ',')
+              git cherry-pick --abort
+
+              echo "::error::Cherry-pick failed due to conflicts"
+              FAILED="${FAILED}${version}:conflicts:${CONFLICTS} "
+
+              # Clean up the failed branch
+              git checkout main
+              git branch -D "${BACKPORT_BRANCH}"
+            fi
+
+            echo "::endgroup::"
+          done
+
+          echo "success=${SUCCESS}" >> $GITHUB_OUTPUT
+          echo "failed=${FAILED}" >> $GITHUB_OUTPUT
+
+          if [ -n "${FAILED}" ]; then
+            exit 1
+          fi
+
+      - name: Create PR for each successful backport
+        if: steps.check-existing.outputs.skip != 'true' && steps.backport.outputs.success
+        env:
+          GH_TOKEN: ${{ secrets.PR_GH_TOKEN }}
+          PR_TITLE: ${{ github.event.pull_request.title }}
+          PR_NUMBER: ${{ github.event.pull_request.number }}
+          PR_AUTHOR: ${{ github.event.pull_request.user.login }}
+        run: |
+          for backport in ${{ steps.backport.outputs.success }}; do
+            IFS=':' read -r version branch <<< "${backport}"
+
+            if PR_URL=$(gh pr create \
+              --base "core/${version}" \
+              --head "${branch}" \
+              --title "[backport ${version}] ${PR_TITLE}" \
+              --body "Backport of #${PR_NUMBER} to \`core/${version}\`"$'\n\n'"Automatically created by backport workflow." \
+              --label "backport" 2>&1); then
+
+              # Extract PR number from URL
+              PR_NUM=$(echo "${PR_URL}" | grep -o '[0-9]*$')
+
+              if [ -n "${PR_NUM}" ]; then
+                gh pr comment "${PR_NUMBER}" --body "@${PR_AUTHOR} Successfully backported to #${PR_NUM}"
+              fi
+            else
+              echo "::error::Failed to create PR for ${version}: ${PR_URL}"
+              # Still try to comment on the original PR about the failure
+              gh pr comment "${PR_NUMBER}" --body "@${PR_AUTHOR} Backport branch created but PR creation failed for \`core/${version}\`. Please create the PR manually from branch \`${branch}\`"
+            fi
+          done
+
+      - name: Comment on failures
+        if: steps.check-existing.outputs.skip != 'true' && failure() && steps.backport.outputs.failed
+        env:
+          GH_TOKEN: ${{ github.token }}
+        run: |
+          PR_NUMBER="${{ github.event.pull_request.number }}"
+          PR_AUTHOR="${{ github.event.pull_request.user.login }}"
+          MERGE_COMMIT="${{ github.event.pull_request.merge_commit_sha }}"
+
+          for failure in ${{ steps.backport.outputs.failed }}; do
+            IFS=':' read -r version reason conflicts <<< "${failure}"
+
+            if [ "${reason}" = "branch-missing" ]; then
+              gh pr comment "${PR_NUMBER}" --body "@${PR_AUTHOR} Backport failed: Branch \`core/${version}\` does not exist"
+
+            elif [ "${reason}" = "conflicts" ]; then
+              # Convert comma-separated conflicts back to newlines for display
+              CONFLICTS_LIST=$(echo "${conflicts}" | tr ',' '\n' | sed 's/^/- /')
+
+              COMMENT_BODY="@${PR_AUTHOR} Backport to \`core/${version}\` failed: Merge conflicts detected."$'\n\n'"Please manually cherry-pick commit \`${MERGE_COMMIT}\` to the \`core/${version}\` branch."$'\n\n'"<details><summary>Conflicting files</summary>"$'\n\n'"${CONFLICTS_LIST}"$'\n\n'"</details>"
+              gh pr comment "${PR_NUMBER}" --body "${COMMENT_BODY}"
+            fi
+          done

.github/workflows/chromatic.yaml

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

.github/workflows/ci-json-validation.yaml

@@ -1,16 +0,0 @@
-name: "CI: JSON Validation"
-description: "Validates JSON syntax in all tracked .json files (excluding tsconfig*.json) using jq"
-
-on:
-  push:
-    branches:
-      - main
-  pull_request:
-
-jobs:
-  json-lint:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v5
-      - name: Validate JSON syntax
-        run: ./scripts/cicd/check-json.sh

.github/workflows/ci-python-validation.yaml

@@ -1,27 +0,0 @@
-name: "CI: Python Validation"
-description: "Validates Python code in tools/devtools directory"
-
-on:
-  pull_request:
-    paths:
-      - 'tools/devtools/**'
-  push:
-    branches: [ main ]
-    paths:
-      - 'tools/devtools/**'
-
-jobs:
-  syntax:
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v5
-
-      - name: Set up Python
-        uses: actions/setup-python@v5
-        with:
-          python-version: '3.11'
-
-      - name: Validate Python syntax
-        run: python3 -m compileall -q tools/devtools

.github/workflows/ci-size-data.yaml

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

.github/workflows/ci-tests-e2e.yaml

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

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

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

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

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

.github/workflows/ci-tests-unit.yaml

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

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

@@ -1,5 +1,4 @@
-name: "PR: Claude Review"
-description: "AI-powered code review triggered by adding the 'claude-review' label to a PR"
+name: Claude PR Review
 
 permissions:
   contents: read
@@ -12,10 +11,6 @@ on:
   pull_request:
     types: [labeled]
 
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
-  cancel-in-progress: true
-
 jobs:
   wait-for-ci:
     runs-on: ubuntu-latest
@@ -28,16 +23,17 @@ jobs:
         with:
           ref: ${{ github.event.pull_request.head.sha }}
           check-regexp: '^(lint-and-format|test|playwright-tests)'
-          allowed-conclusions: success,skipped,failure,cancelled,neutral,action_required,timed_out,stale
           wait-interval: 30
           repo-token: ${{ secrets.GITHUB_TOKEN }}
       
       - name: Check if we should proceed
         id: check-status
         run: |
-          CHECK_RUNS=$(gh api repos/${{ github.repository }}/commits/${{ github.event.pull_request.head.sha }}/check-runs --jq '.check_runs[] | select(.name | test("lint-and-format")) | {name, conclusion}')
-
-          if echo "$CHECK_RUNS" | grep -Eq '"conclusion": "(failure|cancelled|timed_out|action_required)"'; then
+          # Get all check runs for this commit
+          CHECK_RUNS=$(gh api repos/${{ github.repository }}/commits/${{ github.event.pull_request.head.sha }}/check-runs --jq '.check_runs[] | select(.name | test("lint-and-format|test|playwright-tests")) | {name, conclusion}')
+          
+          # Check if any required checks failed
+          if echo "$CHECK_RUNS" | grep -q '"conclusion": "failure"'; then
             echo "Some CI checks failed - skipping Claude review"
             echo "proceed=false" >> $GITHUB_OUTPUT
           else
@@ -54,10 +50,9 @@ jobs:
     timeout-minutes: 30
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v5
+        uses: actions/checkout@v4
         with:
           fetch-depth: 0
-          ref: refs/pull/${{ github.event.pull_request.number }}/head
 
       - name: Install pnpm
         uses: pnpm/action-setup@v4
@@ -79,10 +74,10 @@ jobs:
         with:
           label_trigger: "claude-review"
           prompt: |
-            Read the file .claude/commands/comprehensive-pr-review.md and follow ALL the instructions exactly.
-
-            CRITICAL: You must post individual inline comments using the gh api commands shown in the file.
-            DO NOT create a summary comment.
+            Read the file .claude/commands/comprehensive-pr-review.md and follow ALL the instructions exactly. 
+            
+            CRITICAL: You must post individual inline comments using the gh api commands shown in the file. 
+            DO NOT create a summary comment. 
             Each issue must be posted as a separate inline comment on the specific line of code.
           anthropic_api_key: ${{ secrets.ANTHROPIC_API_KEY }}
           claude_args: "--max-turns 256 --allowedTools 'Bash(git:*),Bash(gh api:*),Bash(gh pr:*),Bash(gh repo:*),Bash(jq:*),Bash(echo:*),Read,Write,Edit,Glob,Grep,WebFetch'"
@@ -91,10 +86,4 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           COMMIT_SHA: ${{ github.event.pull_request.head.sha }}
           BASE_SHA: ${{ github.event.pull_request.base.sha }}
-          REPOSITORY: ${{ github.repository }}
-
-      - name: Remove claude-review label
-        if: always()
-        run: gh pr edit ${{ github.event.pull_request.number }} --remove-label "claude-review"
-        env:
-          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          REPOSITORY: ${{ github.repository }}

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

@@ -1,4 +1,4 @@
-name: Release Branch Create
+name: Create Release Branch
 
 on:
   pull_request:
@@ -18,7 +18,7 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v5
+        uses: actions/checkout@v4
         with:
           fetch-depth: 0
           token: ${{ secrets.PR_GH_TOKEN || secrets.GITHUB_TOKEN }}
@@ -69,9 +69,6 @@ jobs:
           echo "prev_version=$PREV_VERSION" >> $GITHUB_OUTPUT
           echo "prev_minor=$PREV_MINOR" >> $GITHUB_OUTPUT
 
-          BASE_COMMIT=$(git rev-parse HEAD)
-          echo "base_commit=$BASE_COMMIT" >> $GITHUB_OUTPUT
-
           # Get previous major version for comparison
           PREV_MAJOR=$(echo $PREV_VERSION | cut -d. -f1)
 
@@ -90,13 +87,13 @@ jobs:
           elif [[ "$MAJOR" -gt "$PREV_MAJOR" && "$MINOR" == "0" && "$PATCH" == "0" ]]; then
             # Major version bump (e.g., 1.99.x → 2.0.0)
             echo "is_minor_bump=true" >> $GITHUB_OUTPUT
-            BRANCH_BASE="${PREV_MAJOR}.${PREV_MINOR}"
-            echo "branch_base=$BRANCH_BASE" >> $GITHUB_OUTPUT
+            BRANCH_NAME="core/${PREV_MAJOR}.${PREV_MINOR}"
+            echo "branch_name=$BRANCH_NAME" >> $GITHUB_OUTPUT
           elif [[ "$MAJOR" == "$PREV_MAJOR" && "$MINOR" -gt "$PREV_MINOR" && "$PATCH" == "0" ]]; then
             # Minor version bump (e.g., 1.23.x → 1.24.0)
             echo "is_minor_bump=true" >> $GITHUB_OUTPUT
-            BRANCH_BASE="${MAJOR}.${PREV_MINOR}"
-            echo "branch_base=$BRANCH_BASE" >> $GITHUB_OUTPUT
+            BRANCH_NAME="core/${MAJOR}.${PREV_MINOR}"
+            echo "branch_name=$BRANCH_NAME" >> $GITHUB_OUTPUT
           else
             echo "is_minor_bump=false" >> $GITHUB_OUTPUT
           fi
@@ -104,97 +101,64 @@ jobs:
           # Return to main branch
           git checkout main
 
-      - name: Create release branches
-        id: create_branches
+      - name: Create release branch
         if: steps.check_version.outputs.is_minor_bump == 'true'
         run: |
-          BRANCH_BASE="${{ steps.check_version.outputs.branch_base }}"
-          PREV_VERSION="${{ steps.check_version.outputs.prev_version }}"
+          BRANCH_NAME="${{ steps.check_version.outputs.branch_name }}"
 
-          if [[ -z "$BRANCH_BASE" ]]; then
-            echo "::error::Branch base not set; unable to determine release branches"
-            exit 1
+          # Check if branch already exists
+          if git ls-remote --heads origin "$BRANCH_NAME" | grep -q "$BRANCH_NAME"; then
+            echo "⚠️  Branch $BRANCH_NAME already exists, skipping creation"
+            echo "branch_exists=true" >> $GITHUB_ENV
+            exit 0
+          else
+            echo "branch_exists=false" >> $GITHUB_ENV
           fi
 
-          BASE_COMMIT="${{ steps.check_version.outputs.base_commit }}"
+          # Create branch from the commit BEFORE the version bump
+          # This ensures the release branch has the previous minor version
+          git checkout -b "$BRANCH_NAME" HEAD^1
 
-          if [[ -z "$BASE_COMMIT" ]]; then
-            echo "::error::Base commit not provided; cannot create release branches"
-            exit 1
-          fi
+          # Push the new branch
+          git push origin "$BRANCH_NAME"
 
-          RESULTS_FILE=$(mktemp)
-          trap 'rm -f "$RESULTS_FILE"' EXIT
+          echo "✅ Created release branch: $BRANCH_NAME"
+          echo "This branch is now in feature freeze and will only receive:"
+          echo "- Bug fixes"
+          echo "- Critical security patches"
+          echo "- Documentation updates"
 
-          for PREFIX in core cloud; do
-            BRANCH_NAME="${PREFIX}/${BRANCH_BASE}"
-
-            if git ls-remote --exit-code --heads origin \
-              "$BRANCH_NAME" >/dev/null 2>&1; then
-              echo "⚠️  Branch $BRANCH_NAME already exists"
-              echo "ℹ️  Skipping creation for $BRANCH_NAME"
-              STATUS="exists"
-            else
-              # Create branch from the commit BEFORE the version bump
-              if ! git push origin "$BASE_COMMIT:refs/heads/$BRANCH_NAME"; then
-                echo "::error::Failed to push release branch $BRANCH_NAME"
-                exit 1
-              fi
-              echo "✅ Created release branch: $BRANCH_NAME"
-              STATUS="created"
-            fi
-
-            echo "$BRANCH_NAME|$STATUS|$PREV_VERSION" >> "$RESULTS_FILE"
-          done
-
-          {
-            echo "results<<'EOF'"
-            cat "$RESULTS_FILE"
-            echo "EOF"
-          } >> $GITHUB_OUTPUT
 
       - name: Post summary
         if: steps.check_version.outputs.is_minor_bump == 'true'
         run: |
+          BRANCH_NAME="${{ steps.check_version.outputs.branch_name }}"
+          PREV_VERSION="${{ steps.check_version.outputs.prev_version }}"
           CURRENT_VERSION="${{ steps.check_version.outputs.current_version }}"
-          RESULTS="${{ steps.create_branches.outputs.results }}"
 
-          if [[ -z "$RESULTS" ]]; then
+          if [[ "${{ env.branch_exists }}" == "true" ]]; then
             cat >> $GITHUB_STEP_SUMMARY << EOF
-          ## 🌿 Release Branch Summary
+          ## 🌿 Release Branch Already Exists
 
-          Release branch creation skipped; no eligible branches were found.
+          The release branch for the previous minor version already exists:
+          EOF
+          else
+            cat >> $GITHUB_STEP_SUMMARY << EOF
+          ## 🌿 Release Branch Created
+
+          A new release branch has been created for the previous minor version:
           EOF
-            exit 0
           fi
 
           cat >> $GITHUB_STEP_SUMMARY << EOF
-          ## 🌿 Release Branch Summary
 
+          - **Branch**: \`$BRANCH_NAME\`
+          - **Version**: \`$PREV_VERSION\` (feature frozen)
           - **Main branch**: \`$CURRENT_VERSION\` (active development)
 
-          ### Branch Status
-          EOF
-
-          while IFS='|' read -r BRANCH STATUS PREV_VERSION; do
-            if [[ "$STATUS" == "created" ]]; then
-              cat >> $GITHUB_STEP_SUMMARY << EOF
-
-          - \`$BRANCH\` created from version \`$PREV_VERSION\`
-          EOF
-            else
-              cat >> $GITHUB_STEP_SUMMARY << EOF
-
-          - \`$BRANCH\` already existed (based on version \`$PREV_VERSION\`)
-          EOF
-            fi
-          done <<< "$RESULTS"
-
-          cat >> $GITHUB_STEP_SUMMARY << EOF
-
           ### Branch Policy
 
-          Release branches are feature-frozen and only accept:
+          The \`$BRANCH_NAME\` branch is now in **feature freeze** and will only accept:
           - 🐛 Bug fixes
           - 🔒 Security patches
           - 📚 Documentation updates
@@ -203,9 +167,9 @@ jobs:
 
           ### Backporting Changes
 
-          To backport a fix:
+          To backport a fix to this release branch:
           1. Create your fix on \`main\` first
-          2. Cherry-pick to the target release branch
-          3. Create a PR targeting that branch
-          4. Apply the matching \`core/x.y\` or \`cloud/x.y\` label
+          2. Cherry-pick to \`$BRANCH_NAME\`
+          3. Create a PR targeting \`$BRANCH_NAME\`
+          4. Use the \`Release\` label on the PR
           EOF

.github/workflows/dev-release.yaml

@@ -1,4 +1,4 @@
-name: Release PyPI Dev
+name: Create Dev PyPI Package
 
 on:
   workflow_dispatch:
@@ -15,7 +15,7 @@ jobs:
       version: ${{ steps.current_version.outputs.version }}
     steps:
       - name: Checkout code
-        uses: actions/checkout@v5
+        uses: actions/checkout@v4
       - name: Install pnpm
         uses: pnpm/action-setup@v4
         with:
@@ -25,6 +25,17 @@ jobs:
           node-version: 'lts/*'
           cache: 'pnpm'
 
+      - name: Cache tool outputs
+        uses: actions/cache@v4
+        with:
+          path: |
+            .cache
+            dist
+            tsconfig.tsbuildinfo
+          key: dev-release-tools-cache-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            dev-release-tools-cache-${{ runner.os }}-
+
       - name: Get current version
         id: current_version
         run: echo "version=$(node -p "require('./package.json').version")" >> $GITHUB_OUTPUT
@@ -33,7 +44,6 @@ jobs:
           SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
           ALGOLIA_APP_ID: ${{ secrets.ALGOLIA_APP_ID }}
           ALGOLIA_API_KEY: ${{ secrets.ALGOLIA_API_KEY }}
-          ENABLE_MINIFY: 'true'
           USE_PROD_CONFIG: 'true'
         run: |
           pnpm install --frozen-lockfile
@@ -52,7 +62,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v5
+        uses: actions/checkout@v4
       - name: Download dist artifact
         uses: actions/download-artifact@v4
         with:

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

@@ -1,4 +1,4 @@
-name: i18n Update Custom Nodes
+name: Update Locales for given custom node repository
 
 on:
   workflow_dispatch:
@@ -21,64 +21,92 @@ jobs:
   update-locales:
     runs-on: ubuntu-latest
     steps:
-    - name: Checkout repository
-      uses: actions/checkout@v5
-
-    # Setup playwright environment with custom node repository
-    - name: Setup ComfyUI Server (without launching)
-      uses: ./.github/actions/setup-comfyui-server
-    - name: Setup frontend
-      uses: ./.github/actions/setup-frontend
+    - name: Checkout ComfyUI
+      uses: actions/checkout@v4
       with:
-        include_build_step: 'true'
-    - name: Setup Playwright
-      uses: ./.github/actions/setup-playwright
-
-    # Install the custom node repository
+        repository: comfyanonymous/ComfyUI
+        path: ComfyUI
+        ref: master
+    - name: Checkout ComfyUI_frontend
+      uses: actions/checkout@v4
+      with:
+        repository: Comfy-Org/ComfyUI_frontend
+        path: ComfyUI_frontend
+    - name: Checkout ComfyUI_devtools
+      uses: actions/checkout@v4
+      with:
+        repository: Comfy-Org/ComfyUI_devtools
+        path: ComfyUI/custom_nodes/ComfyUI_devtools
     - name: Checkout custom node repository
-      uses: actions/checkout@v5
+      uses: actions/checkout@v4
       with:
         repository: ${{ inputs.owner }}/${{ inputs.repository }}
         path: 'ComfyUI/custom_nodes/${{ inputs.repository }}'
-    - name: Install custom node Python requirements
-      working-directory: ComfyUI/custom_nodes/${{ inputs.repository }}
+    - name: Install pnpm
+      uses: pnpm/action-setup@v4
+      with:
+        version: 10
+    - uses: actions/setup-node@v4
+      with:
+        node-version: 'lts/*'
+        cache: 'pnpm'
+    - uses: actions/setup-python@v4
+      with:
+        python-version: '3.10'
+    - name: Install ComfyUI requirements
+      run: |
+        python -m pip install --upgrade pip
+        pip install torch torchvision torchaudio --index-url https://download.pytorch.org/whl/cpu
+        pip install -r requirements.txt
+        pip install wait-for-it
+      working-directory: ComfyUI
+    - name: Install custom node requirements
       run: |
         if [ -f "requirements.txt" ]; then
           pip install -r requirements.txt
         fi
-
-    # Start ComfyUI Server
-    - name: Start ComfyUI Server
-      shell: bash
-      working-directory: ComfyUI
+      working-directory: ComfyUI/custom_nodes/${{ inputs.repository }}
+    - name: Build & Install ComfyUI_frontend
       run: |
-        python main.py --cpu --multi-user --front-end-root ../dist --custom-node-path ../ComfyUI/custom_nodes/${{ inputs.repository }} &
-        wait-for-it --service
-
+        pnpm install --frozen-lockfile
+        pnpm build
+        rm -rf ../ComfyUI/web/*
+        mv dist/* ../ComfyUI/web/
+      working-directory: ComfyUI_frontend
+    - name: Start ComfyUI server
+      run: |
+        python main.py --cpu --multi-user &
+        wait-for-it --service 127.0.0.1:8188 -t 600
+      working-directory: ComfyUI
+    - name: Install Playwright Browsers
+      run: npx playwright install chromium --with-deps
+      working-directory: ComfyUI_frontend
     - name: Start dev server
       # Run electron dev server as it is a superset of the web dev server
       # We do want electron specific UIs to be translated.
       run: pnpm dev:electron &
-      
+      working-directory: ComfyUI_frontend
     - name: Capture base i18n
-      run: pnpm exec tsx scripts/diff-i18n capture
+      run: npx tsx scripts/diff-i18n capture
+      working-directory: ComfyUI_frontend
     - name: Update en.json
       run: pnpm collect-i18n
       env:
         PLAYWRIGHT_TEST_URL: http://localhost:5173
+      working-directory: ComfyUI_frontend
     - name: Update translations
       run: pnpm locale
       env:
         OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
+      working-directory: ComfyUI_frontend
     - name: Diff base vs updated i18n
-      run: pnpm exec tsx scripts/diff-i18n diff
+      run: npx tsx scripts/diff-i18n diff
+      working-directory: ComfyUI_frontend
     - name: Update i18n in custom node repository
       run: |
         LOCALE_DIR=ComfyUI/custom_nodes/${{ inputs.repository }}/locales/
         install -d "$LOCALE_DIR"
         cp -rf ComfyUI_frontend/temp/diff/* "$LOCALE_DIR"
-    
-    # Git ops for pushing changes and creating PR
     - name: Check and create fork of custom node repository
       run: |
         # Try to fork the repository

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

@@ -1,4 +1,4 @@
-name: i18n Update Nodes
+name: Update Node Definitions Locales
 
 on:
   workflow_dispatch:
@@ -13,32 +13,25 @@ jobs:
   update-locales:
     runs-on: ubuntu-latest
     steps:
-    - name: Checkout repository
-      uses: actions/checkout@v5
-    # Setup playwright environment
-    - name: Setup ComfyUI Server (and start)
-      uses: ./.github/actions/setup-comfyui-server
-      with:
-        launch_server: true
-    - name: Setup frontend
-      uses: ./.github/actions/setup-frontend
-      with:
-        include_build_step: true
-    - name: Setup Playwright
-      uses: ./.github/actions/setup-playwright
-
+    - uses: Comfy-Org/ComfyUI_frontend_setup_action@v3
+    - name: Install Playwright Browsers
+      run: npx playwright install chromium --with-deps
+      working-directory: ComfyUI_frontend
     - name: Start dev server
       # Run electron dev server as it is a superset of the web dev server
       # We do want electron specific UIs to be translated.
       run: pnpm dev:electron &
+      working-directory: ComfyUI_frontend
     - name: Update en.json
       run: pnpm collect-i18n -- scripts/collect-i18n-node-defs.ts
       env:
         PLAYWRIGHT_TEST_URL: http://localhost:5173
+      working-directory: ComfyUI_frontend
     - name: Update translations
       run: pnpm locale
       env:
         OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
+      working-directory: ComfyUI_frontend
     - name: Create Pull Request
       uses: peter-evans/create-pull-request@271a8d0340265f705b14b6d32b9829c1cb33d45e
       with:
@@ -52,3 +45,4 @@ jobs:
         branch: update-locales-node-defs-${{ github.event.inputs.trigger_type }}-${{ github.run_id }}
         base: main
         labels: dependencies
+        path: ComfyUI_frontend

.github/workflows/i18n.yaml

@@ -1,5 +1,4 @@
-name: "i18n: Update Core"
-description: "Generates and updates translations for core ComfyUI components using OpenAI"
+name: Update Locales
 
 on:
   # Manual dispatch for urgent translation updates  
@@ -15,35 +14,42 @@ jobs:
     if: github.event_name == 'workflow_dispatch' || (github.event.pull_request.head.repo.full_name == github.repository && startsWith(github.head_ref, 'version-bump-'))
     runs-on: ubuntu-latest
     steps:
-    - name: Checkout repository
-      uses: actions/checkout@v5
-
-    # Setup playwright environment
-    - name: Setup ComfyUI Frontend
-      uses: ./.github/actions/setup-frontend
+    - uses: Comfy-Org/ComfyUI_frontend_setup_action@v3
+    
+    - name: Cache tool outputs
+      uses: actions/cache@v4
       with:
-        include_build_step: true
-    - name: Setup ComfyUI Server
-      uses: ./.github/actions/setup-comfyui-server
+        path: |
+          ComfyUI_frontend/.cache
+          ComfyUI_frontend/.cache
+        key: i18n-tools-cache-${{ runner.os }}-${{ hashFiles('ComfyUI_frontend/pnpm-lock.yaml') }}
+        restore-keys: |
+          i18n-tools-cache-${{ runner.os }}-
+    - name: Cache Playwright browsers
+      uses: actions/cache@v4
       with:
-        launch_server: true
-    - name: Setup Playwright
-      uses: ./.github/actions/setup-playwright
-
+        path: ~/.cache/ms-playwright
+        key: playwright-browsers-${{ runner.os }}-${{ hashFiles('ComfyUI_frontend/pnpm-lock.yaml') }}
+        restore-keys: |
+          playwright-browsers-${{ runner.os }}-
+    - name: Install Playwright Browsers
+      run: npx playwright install chromium --with-deps
+      working-directory: ComfyUI_frontend
     - name: Start dev server
       # Run electron dev server as it is a superset of the web dev server
       # We do want electron specific UIs to be translated.
       run: pnpm dev:electron &
-
-    # Update locales, collect new strings and update translations using OpenAI, then commit changes
+      working-directory: ComfyUI_frontend
     - name: Update en.json
       run: pnpm collect-i18n
       env:
         PLAYWRIGHT_TEST_URL: http://localhost:5173
+      working-directory: ComfyUI_frontend
     - name: Update translations
       run: pnpm locale
       env:
         OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
+      working-directory: ComfyUI_frontend
     - name: Commit updated locales
       run: |
         git config --global user.name 'github-actions'
@@ -55,5 +61,6 @@ jobs:
         # Apply the stashed changes if any
         git stash pop || true
         git add src/locales/
-        git diff --staged --quiet || git commit -m "Update locales"
+        git diff --staged --quiet || git commit -m "Update locales [skip ci]"
         git push origin HEAD:${{ github.head_ref }}
+      working-directory: ComfyUI_frontend

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

@@ -1,14 +1,9 @@
-name: "CI: Lint Format"
-description: "Linting and code formatting validation for pull requests"
+name: Lint and Format
 
 on:
   pull_request:
     branches-ignore: [wip/*, draft/*, temp/*]
 
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
-  cancel-in-progress: true
-
 permissions:
   contents: write
   pull-requests: write
@@ -18,9 +13,11 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout PR
-        uses: actions/checkout@v5
+        uses: actions/checkout@v4
         with:
-          ref: ${{ !github.event.pull_request.head.repo.fork && github.head_ref || github.ref }}
+          token: ${{ secrets.GITHUB_TOKEN }}
+          ref: ${{ github.event.pull_request.head.ref }}
+          fetch-depth: 0
 
       - name: Install pnpm
         uses: pnpm/action-setup@v4
@@ -33,15 +30,27 @@ jobs:
           node-version: 'lts/*'
           cache: 'pnpm'
 
+      - name: Cache tool outputs
+        uses: actions/cache@v4
+        with:
+          path: |
+            .cache
+            .eslintcache
+            tsconfig.tsbuildinfo
+            .prettierCache
+            .knip-cache
+          key: lint-format-cache-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}-${{ hashFiles('src/**/*.{ts,vue,js,mts}', '*.config.*', '.eslintrc.*', '.prettierrc.*', 'tsconfig.json') }}
+          restore-keys: |
+            lint-format-cache-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}-
+            lint-format-cache-${{ runner.os }}-
+            ci-tools-cache-${{ runner.os }}-
+
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
       - name: Run ESLint with auto-fix
         run: pnpm lint:fix
 
-      - name: Run Stylelint with auto-fix
-        run: pnpm stylelint:fix
-
       - name: Run Prettier with auto-format
         run: pnpm format
 
@@ -60,13 +69,12 @@ 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
         run: |
           pnpm lint
-          pnpm stylelint
           pnpm format:check
           pnpm knip
 
@@ -94,4 +102,4 @@ jobs:
               owner: context.repo.owner,
               repo: context.repo.repo,
               body: '## ⚠️ Linting/Formatting Issues Found\n\nThis PR has linting or formatting issues that need to be fixed.\n\n**Since this PR is from a fork, auto-fix cannot be applied automatically.**\n\n### Option 1: Set up pre-commit hooks (recommended)\nRun this once to automatically format code on every commit:\n```bash\npnpm prepare\n```\n\n### Option 2: Fix manually\nRun these commands and push the changes:\n```bash\npnpm lint:fix\npnpm format\n```\n\nSee [CONTRIBUTING.md](https://github.com/Comfy-Org/ComfyUI_frontend/blob/main/CONTRIBUTING.md#git-pre-commit-hooks) for more details.'
-            })
+            })

.github/workflows/pr-backport.yaml

@@ -1,355 +0,0 @@
-name: PR Backport
-
-on:
-  pull_request_target:
-    types: [closed, labeled]
-    branches: [main]
-  workflow_dispatch:
-    inputs:
-      pr_number:
-        description: 'PR number to backport'
-        required: true
-        type: string
-      force_rerun:
-        description: 'Force rerun even if backports exist'
-        required: false
-        type: boolean
-        default: false
-
-jobs:
-  backport:
-    if: >
-      (github.event_name == 'pull_request_target' && 
-       github.event.pull_request.merged == true && 
-       contains(github.event.pull_request.labels.*.name, 'needs-backport')) ||
-      github.event_name == 'workflow_dispatch'
-    runs-on: ubuntu-latest
-    permissions:
-      contents: write
-      pull-requests: write
-      issues: write
-
-    steps:
-      - name: Validate inputs for manual triggers
-        if: github.event_name == 'workflow_dispatch'
-        run: |
-          # Validate PR number format
-          if ! [[ "${{ inputs.pr_number }}" =~ ^[0-9]+$ ]]; then
-            echo "::error::Invalid PR number format. Must be a positive integer."
-            exit 1
-          fi
-          
-          # Validate PR exists and is merged
-          if ! gh pr view "${{ inputs.pr_number }}" --json merged >/dev/null 2>&1; then
-            echo "::error::PR #${{ inputs.pr_number }} not found or inaccessible."
-            exit 1
-          fi
-          
-          MERGED=$(gh pr view "${{ inputs.pr_number }}" --json merged --jq '.merged')
-          if [ "$MERGED" != "true" ]; then
-            echo "::error::PR #${{ inputs.pr_number }} is not merged. Only merged PRs can be backported."
-            exit 1
-          fi
-          
-          # Validate PR has needs-backport label
-          if ! gh pr view "${{ inputs.pr_number }}" --json labels --jq '.labels[].name' | grep -q "needs-backport"; then
-            echo "::error::PR #${{ inputs.pr_number }} does not have 'needs-backport' label."
-            exit 1
-          fi
-        env:
-          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Checkout repository
-        uses: actions/checkout@v5
-        with:
-          fetch-depth: 0
-
-      - name: Configure git
-        run: |
-          git config user.name "github-actions[bot]"
-          git config user.email "github-actions[bot]@users.noreply.github.com"
-
-      - name: Collect backport targets
-        id: targets
-        run: |
-          TARGETS=()
-          declare -A SEEN=()
-
-          if [ "${{ github.event_name }}" = "workflow_dispatch" ]; then
-            LABELS=$(gh pr view ${{ inputs.pr_number }} --json labels | jq -r '.labels[].name')
-          else
-            LABELS='${{ toJSON(github.event.pull_request.labels) }}'
-            LABELS=$(echo "$LABELS" | jq -r '.[].name')
-          fi
-
-          add_target() {
-            local label="$1"
-            local target="$2"
-
-            if [ -z "$target" ]; then
-              return
-            fi
-
-            target=$(echo "$target" | xargs)
-
-            if [ -z "$target" ] || [ -n "${SEEN[$target]}" ]; then
-              return
-            fi
-
-            if git ls-remote --exit-code origin "$target" >/dev/null 2>&1; then
-              TARGETS+=("$target")
-              SEEN["$target"]=1
-            else
-              echo "::warning::Label '${label}' references missing branch '${target}'"
-            fi
-          }
-
-          while IFS= read -r label; do
-            [ -z "$label" ] && continue
-
-            if [[ "$label" =~ ^branch:(.+)$ ]]; then
-              add_target "$label" "${BASH_REMATCH[1]}"
-            elif [[ "$label" =~ ^backport:(.+)$ ]]; then
-              add_target "$label" "${BASH_REMATCH[1]}"
-            elif [[ "$label" =~ ^core\/([0-9]+)\.([0-9]+)$ ]]; then
-              SAFE_MAJOR="${BASH_REMATCH[1]}"
-              SAFE_MINOR="${BASH_REMATCH[2]}"
-              add_target "$label" "core/${SAFE_MAJOR}.${SAFE_MINOR}"
-            elif [[ "$label" =~ ^cloud\/([0-9]+)\.([0-9]+)$ ]]; then
-              SAFE_MAJOR="${BASH_REMATCH[1]}"
-              SAFE_MINOR="${BASH_REMATCH[2]}"
-              add_target "$label" "cloud/${SAFE_MAJOR}.${SAFE_MINOR}"
-            elif [[ "$label" =~ ^[0-9]+\.[0-9]+$ ]]; then
-              add_target "$label" "core/${label}"
-            fi
-          done <<< "$LABELS"
-
-          if [ "${#TARGETS[@]}" -eq 0 ]; then
-            echo "::error::No backport targets found (use labels like '1.24' or 'branch:release/hotfix')"
-            exit 1
-          fi
-
-          echo "targets=${TARGETS[*]}" >> $GITHUB_OUTPUT
-          echo "Found backport targets: ${TARGETS[*]}"
-
-      - name: Filter already backported targets
-        id: filter-targets
-        env:
-          EVENT_NAME: ${{ github.event_name }}
-          FORCE_RERUN_INPUT: >-
-            ${{ github.event_name == 'workflow_dispatch' && inputs.force_rerun
-            || 'false' }}
-          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          PR_NUMBER: >-
-            ${{ github.event_name == 'workflow_dispatch' && inputs.pr_number
-            || github.event.pull_request.number }}
-        run: |
-          set -euo pipefail
-
-          REQUESTED_TARGETS="${{ steps.targets.outputs.targets }}"
-          if [ -z "$REQUESTED_TARGETS" ]; then
-            echo "skip=true" >> $GITHUB_OUTPUT
-            echo "pending-targets=" >> $GITHUB_OUTPUT
-            exit 0
-          fi
-
-          FORCE_RERUN=false
-          if [ "$EVENT_NAME" = "workflow_dispatch" ] && [ "$FORCE_RERUN_INPUT" = "true" ]; then
-            FORCE_RERUN=true
-          fi
-
-          mapfile -t EXISTING_BRANCHES < <(
-            git ls-remote --heads origin "backport-${PR_NUMBER}-to-*" || true
-          )
-
-          PENDING=()
-          SKIPPED=()
-
-          for target in $REQUESTED_TARGETS; do
-            SAFE_TARGET=$(echo "$target" | tr '/' '-')
-            BACKPORT_BRANCH="backport-${PR_NUMBER}-to-${SAFE_TARGET}"
-
-            if [ "$FORCE_RERUN" = true ]; then
-              PENDING+=("$target")
-              continue
-            fi
-
-            if printf '%s\n' "${EXISTING_BRANCHES[@]:-}" |
-              grep -Fq "refs/heads/${BACKPORT_BRANCH}"; then
-              SKIPPED+=("$target")
-            else
-              PENDING+=("$target")
-            fi
-          done
-
-          SKIPPED_JOINED="${SKIPPED[*]:-}"
-          PENDING_JOINED="${PENDING[*]:-}"
-
-          echo "already-exists=${SKIPPED_JOINED}" >> $GITHUB_OUTPUT
-          echo "pending-targets=${PENDING_JOINED}" >> $GITHUB_OUTPUT
-
-          if [ -z "$PENDING_JOINED" ]; then
-            echo "skip=true" >> $GITHUB_OUTPUT
-            if [ -n "$SKIPPED_JOINED" ]; then
-              echo "::warning::Backport branches already exist for: ${SKIPPED_JOINED}"
-            fi
-          else
-            echo "skip=false" >> $GITHUB_OUTPUT
-            if [ -n "$SKIPPED_JOINED" ]; then
-              echo "::notice::Skipping already backported targets: ${SKIPPED_JOINED}"
-            fi
-          fi
-
-      - name: Backport commits
-        if: steps.filter-targets.outputs.skip != 'true'
-        id: backport
-        env:
-          PR_NUMBER: ${{ github.event_name == 'workflow_dispatch' && inputs.pr_number || github.event.pull_request.number }}
-        run: |
-          FAILED=""
-          SUCCESS=""
-          
-          # Get PR data for manual triggers
-          if [ "${{ github.event_name }}" = "workflow_dispatch" ]; then
-            PR_DATA=$(gh pr view ${{ inputs.pr_number }} --json title,mergeCommit)
-            PR_TITLE=$(echo "$PR_DATA" | jq -r '.title')
-            MERGE_COMMIT=$(echo "$PR_DATA" | jq -r '.mergeCommit.oid')
-          else
-            PR_TITLE="${{ github.event.pull_request.title }}"
-            MERGE_COMMIT="${{ github.event.pull_request.merge_commit_sha }}"
-          fi
-
-          for target in ${{ steps.filter-targets.outputs.pending-targets }}; do
-            TARGET_BRANCH="${target}"
-            SAFE_TARGET=$(echo "$TARGET_BRANCH" | tr '/' '-')
-            BACKPORT_BRANCH="backport-${PR_NUMBER}-to-${SAFE_TARGET}"
-
-            echo "::group::Backporting to ${TARGET_BRANCH}"
-
-            # Fetch target branch (fail if doesn't exist)
-            if ! git fetch origin "${TARGET_BRANCH}"; then
-              echo "::error::Target branch ${TARGET_BRANCH} does not exist"
-              FAILED="${FAILED}${TARGET_BRANCH}:branch-missing "
-              echo "::endgroup::"
-              continue
-            fi
-
-            # Check if commit already exists on target branch
-            if git branch -r --contains "${MERGE_COMMIT}" | grep -q "origin/${TARGET_BRANCH}"; then
-              echo "::notice::Commit ${MERGE_COMMIT} already exists on ${TARGET_BRANCH}, skipping backport"
-              FAILED="${FAILED}${TARGET_BRANCH}:already-exists "
-              echo "::endgroup::"
-              continue
-            fi
-
-            # Create backport branch
-            git checkout -b "${BACKPORT_BRANCH}" "origin/${TARGET_BRANCH}"
-
-            # Try cherry-pick
-            if git cherry-pick "${MERGE_COMMIT}"; then
-              git push origin "${BACKPORT_BRANCH}"
-              SUCCESS="${SUCCESS}${TARGET_BRANCH}:${BACKPORT_BRANCH} "
-              echo "Successfully created backport branch: ${BACKPORT_BRANCH}"
-              # Return to main (keep the branch, we need it for PR)
-              git checkout main
-            else
-              # Get conflict info
-              CONFLICTS=$(git diff --name-only --diff-filter=U | tr '\n' ',')
-              git cherry-pick --abort
-
-              echo "::error::Cherry-pick failed due to conflicts"
-              FAILED="${FAILED}${TARGET_BRANCH}:conflicts:${CONFLICTS} "
-
-              # Clean up the failed branch
-              git checkout main
-              git branch -D "${BACKPORT_BRANCH}"
-            fi
-
-            echo "::endgroup::"
-          done
-
-          echo "success=${SUCCESS}" >> $GITHUB_OUTPUT
-          echo "failed=${FAILED}" >> $GITHUB_OUTPUT
-
-          if [ -n "${FAILED}" ]; then
-            exit 1
-          fi
-
-      - name: Create PR for each successful backport
-        if: steps.filter-targets.outputs.skip != 'true' && steps.backport.outputs.success
-        env:
-          GH_TOKEN: ${{ secrets.PR_GH_TOKEN }}
-          PR_NUMBER: ${{ github.event_name == 'workflow_dispatch' && inputs.pr_number || github.event.pull_request.number }}
-        run: |
-          # Get PR data for manual triggers
-          if [ "${{ github.event_name }}" = "workflow_dispatch" ]; then
-            PR_DATA=$(gh pr view ${{ inputs.pr_number }} --json title,author)
-            PR_TITLE=$(echo "$PR_DATA" | jq -r '.title')
-            PR_AUTHOR=$(echo "$PR_DATA" | jq -r '.author.login')
-          else
-            PR_TITLE="${{ github.event.pull_request.title }}"
-            PR_AUTHOR="${{ github.event.pull_request.user.login }}"
-          fi
-          
-          for backport in ${{ steps.backport.outputs.success }}; do
-            IFS=':' read -r target branch <<< "${backport}"
-
-            if PR_URL=$(gh pr create \
-              --base "${target}" \
-              --head "${branch}" \
-              --title "[backport ${target}] ${PR_TITLE}" \
-              --body "Backport of #${PR_NUMBER} to \`${target}\`"$'\n\n'"Automatically created by backport workflow." \
-              --label "backport" 2>&1); then
-
-              # Extract PR number from URL
-              PR_NUM=$(echo "${PR_URL}" | grep -o '[0-9]*$')
-
-              if [ -n "${PR_NUM}" ]; then
-                gh pr comment "${PR_NUMBER}" --body "@${PR_AUTHOR} Successfully backported to #${PR_NUM}"
-              fi
-            else
-              echo "::error::Failed to create PR for ${target}: ${PR_URL}"
-              # Still try to comment on the original PR about the failure
-              gh pr comment "${PR_NUMBER}" --body "@${PR_AUTHOR} Backport branch created but PR creation failed for \`${target}\`. Please create the PR manually from branch \`${branch}\`"
-            fi
-          done
-
-      - name: Comment on failures
-        if: steps.filter-targets.outputs.skip != 'true' && failure() && steps.backport.outputs.failed
-        env:
-          GH_TOKEN: ${{ github.token }}
-        run: |
-          if [ "${{ github.event_name }}" = "workflow_dispatch" ]; then
-            PR_DATA=$(gh pr view ${{ inputs.pr_number }} --json author,mergeCommit)
-            PR_NUMBER="${{ inputs.pr_number }}"
-            PR_AUTHOR=$(echo "$PR_DATA" | jq -r '.author.login')
-            MERGE_COMMIT=$(echo "$PR_DATA" | jq -r '.mergeCommit.oid')
-          else
-            PR_NUMBER="${{ github.event.pull_request.number }}"
-            PR_AUTHOR="${{ github.event.pull_request.user.login }}"
-            MERGE_COMMIT="${{ github.event.pull_request.merge_commit_sha }}"
-          fi
-
-          for failure in ${{ steps.backport.outputs.failed }}; do
-            IFS=':' read -r target reason conflicts <<< "${failure}"
-
-            if [ "${reason}" = "branch-missing" ]; then
-              gh pr comment "${PR_NUMBER}" --body "@${PR_AUTHOR} Backport failed: Branch \`${target}\` does not exist"
-
-            elif [ "${reason}" = "already-exists" ]; then
-              gh pr comment "${PR_NUMBER}" --body "@${PR_AUTHOR} Commit \`${MERGE_COMMIT}\` already exists on branch \`${target}\`. No backport needed."
-
-            elif [ "${reason}" = "conflicts" ]; then
-              # Convert comma-separated conflicts back to newlines for display
-              CONFLICTS_LIST=$(echo "${conflicts}" | tr ',' '\n' | sed 's/^/- /')
-
-              COMMENT_BODY="@${PR_AUTHOR} Backport to \`${target}\` failed: Merge conflicts detected."$'\n\n'"Please manually cherry-pick commit \`${MERGE_COMMIT}\` to the \`${target}\` branch."$'\n\n'"<details><summary>Conflicting files</summary>"$'\n\n'"${CONFLICTS_LIST}"$'\n\n'"</details>"
-              gh pr comment "${PR_NUMBER}" --body "${COMMENT_BODY}"
-            fi
-          done
-
-      - name: Remove needs-backport label
-        if: steps.filter-targets.outputs.skip != 'true' && success()
-        run: gh pr edit ${{ github.event_name == 'workflow_dispatch' && inputs.pr_number || github.event.pull_request.number }} --remove-label "needs-backport"
-        env:
-          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

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

@@ -1,9 +1,8 @@
-name: "CI: Tests E2E (Deploy for Forks)"
-description: "Deploys test results from forked PRs (forks can't access deployment secrets)"
+name: PR Playwright Deploy (Forks)
 
 on:
   workflow_run:
-    workflows: ["CI: Tests E2E"]
+    workflows: ["Tests CI"]
     types: [requested, completed]
 
 env:
@@ -31,7 +30,7 @@ jobs:
           echo "Is forked: ${{ github.event.workflow_run.head_repository.full_name != github.event.workflow_run.repository.full_name }}"
 
       - name: Checkout repository
-        uses: actions/checkout@v5
+        uses: actions/checkout@v4
 
       - name: Get PR Number
         id: pr

.github/workflows/pr-size-report.yaml

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

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

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

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

@@ -1,309 +0,0 @@
-# Setting test expectation screenshots for Playwright
-name: "PR: Update Playwright Expectations"
-
-on:
-  pull_request:
-    types: [labeled]
-  issue_comment:
-    types: [created]
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
-  cancel-in-progress: true
-
-jobs:
-  setup:
-    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') )
-    outputs:
-      cache-key: ${{ steps.cache-key.outputs.key }}
-      pr-number: ${{ steps.pr-info.outputs.pr-number }}
-      branch: ${{ steps.pr-info.outputs.branch }}
-      comment-id: ${{ steps.find-update-comment.outputs.comment-id }}
-    steps:
-      - name: Get PR info
-        id: pr-info
-        run: |
-          echo "pr-number=${{ github.event.number || github.event.issue.number }}" >> $GITHUB_OUTPUT
-          echo "branch=$(gh pr view ${{ github.event.number || github.event.issue.number }} --repo ${{ github.repository }} --json headRefName --jq '.headRefName')" >> $GITHUB_OUTPUT
-        env:
-          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Find Update Comment
-        uses: peter-evans/find-comment@b30e6a3c0ed37e7c023ccd3f1db5c6c0b0c23aad
-        id: "find-update-comment"
-        with:
-          issue-number: ${{ steps.pr-info.outputs.pr-number }}
-          comment-author: "github-actions[bot]"
-          body-includes: "Updating Playwright Expectations"
-
-      - name: Add Starting Reaction
-        uses: peter-evans/create-or-update-comment@e8674b075228eee787fea43ef493e45ece1004c9
-        with:
-          comment-id: ${{ steps.find-update-comment.outputs.comment-id }}
-          issue-number: ${{ steps.pr-info.outputs.pr-number }}
-          body: |
-            Updating Playwright Expectations
-          edit-mode: replace
-          reactions: eyes
-
-      - name: Checkout repository
-        uses: actions/checkout@v5
-        with:
-          ref: ${{ steps.pr-info.outputs.branch }}
-      - name: Setup frontend
-        uses: ./.github/actions/setup-frontend
-        with:
-          include_build_step: true
-      # Save expensive build artifacts (Python env, built frontend, node_modules)
-      # Source code will be checked out fresh in sharded jobs
-      - name: Generate cache key
-        id: cache-key
-        run: echo "key=$(date +%s)" >> $GITHUB_OUTPUT
-      - name: Save cache
-        uses: actions/cache/save@5a3ec84eff668545956fd18022155c47e93e2684
-        with:
-          path: |
-            ComfyUI
-            dist
-          key: comfyui-setup-${{ steps.cache-key.outputs.key }}
-
-  # Sharded snapshot updates
-  update-snapshots-sharded:
-    needs: setup
-    runs-on: ubuntu-latest
-    strategy:
-      fail-fast: false
-      matrix:
-        shardIndex: [1, 2, 3, 4]
-        shardTotal: [4]
-    steps:
-      # Checkout source code fresh (not cached)
-      - name: Checkout repository
-        uses: actions/checkout@v5
-        with:
-          ref: ${{ needs.setup.outputs.branch }}
-
-      # Restore expensive build artifacts from setup job
-      - name: Restore cached artifacts
-        uses: actions/cache/restore@5a3ec84eff668545956fd18022155c47e93e2684
-        with:
-          fail-on-cache-miss: true
-          path: |
-            ComfyUI
-            dist
-          key: comfyui-setup-${{ needs.setup.outputs.cache-key }}
-
-      - name: Setup ComfyUI server (from cache)
-        uses: ./.github/actions/setup-comfyui-server
-        with:
-          launch_server: true
-
-      - name: Setup nodejs, pnpm, reuse built frontend
-        uses: ./.github/actions/setup-frontend
-
-      - name: Setup Playwright
-        uses: ./.github/actions/setup-playwright
-
-      # Run sharded tests with snapshot updates
-      - name: Update snapshots (Shard ${{ matrix.shardIndex }}/${{ matrix.shardTotal }})
-        id: playwright-tests
-        run: pnpm exec playwright test --update-snapshots --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }}
-        continue-on-error: true
-
-      # Identify and stage only changed snapshot files
-      - name: Stage changed snapshot files
-        id: changed-snapshots
-        run: |
-          echo "=========================================="
-          echo "STAGING CHANGED SNAPSHOTS (Shard ${{ matrix.shardIndex }})"
-          echo "=========================================="
-          
-          # Get list of changed snapshot files
-          changed_files=$(git diff --name-only browser_tests/ 2>/dev/null | grep -E '\-snapshots/' || echo "")
-          
-          if [ -z "$changed_files" ]; then
-            echo "No snapshot changes in this shard"
-            echo "has-changes=false" >> $GITHUB_OUTPUT
-            exit 0
-          fi
-          
-          echo "✓ Found changed files:"
-          echo "$changed_files"
-          file_count=$(echo "$changed_files" | wc -l)
-          echo "Count: $file_count"
-          echo "has-changes=true" >> $GITHUB_OUTPUT
-          echo ""
-          
-          # Create staging directory
-          mkdir -p /tmp/changed_snapshots_shard
-          
-          # Copy only changed files, preserving directory structure
-          # Strip 'browser_tests/' prefix to avoid double nesting
-          echo "Copying changed files to staging directory..."
-          while IFS= read -r file; do
-            # Remove 'browser_tests/' prefix
-            file_without_prefix="${file#browser_tests/}"
-            # Create parent directories
-            mkdir -p "/tmp/changed_snapshots_shard/$(dirname "$file_without_prefix")"
-            # Copy file
-            cp "$file" "/tmp/changed_snapshots_shard/$file_without_prefix"
-            echo "  → $file_without_prefix"
-          done <<< "$changed_files"
-          
-          echo ""
-          echo "Staged files for upload:"
-          find /tmp/changed_snapshots_shard -type f
-
-      # Upload ONLY the changed files from this shard
-      - name: Upload changed snapshots
-        uses: actions/upload-artifact@v4
-        if: steps.changed-snapshots.outputs.has-changes == 'true'
-        with:
-          name: snapshots-shard-${{ matrix.shardIndex }}
-          path: /tmp/changed_snapshots_shard/
-          retention-days: 1
-
-      - name: Upload test report
-        uses: actions/upload-artifact@v4
-        if: always()
-        with:
-          name: playwright-report-shard-${{ matrix.shardIndex }}
-          path: ./playwright-report/
-          retention-days: 30
-
-  # Merge snapshots and commit
-  merge-and-commit:
-    needs: [setup, update-snapshots-sharded]
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v5
-        with:
-          ref: ${{ needs.setup.outputs.branch }}
-
-      # Download all changed snapshot files from shards
-      - name: Download snapshot artifacts
-        uses: actions/download-artifact@v4
-        with:
-          pattern: snapshots-shard-*
-          path: ./downloaded-snapshots
-          merge-multiple: false
-
-      - name: List downloaded files
-        run: |
-          echo "=========================================="
-          echo "DOWNLOADED SNAPSHOT FILES"
-          echo "=========================================="
-          find ./downloaded-snapshots -type f
-          echo ""
-          echo "Total files: $(find ./downloaded-snapshots -type f | wc -l)"
-
-      # Merge only the changed files into browser_tests
-      - name: Merge changed snapshots
-        run: |
-          set -euo pipefail
-
-          echo "=========================================="
-          echo "MERGING CHANGED SNAPSHOTS"
-          echo "=========================================="
-
-          # Verify target directory exists
-          if [ ! -d "browser_tests" ]; then
-            echo "::error::Target directory 'browser_tests' does not exist"
-            exit 1
-          fi
-
-          merged_count=0
-
-          # For each shard's changed files, copy them directly
-          for shard_dir in ./downloaded-snapshots/snapshots-shard-*/; do
-            if [ ! -d "$shard_dir" ]; then
-              continue
-            fi
-
-            shard_name=$(basename "$shard_dir")
-            file_count=$(find "$shard_dir" -type f | wc -l)
-            
-            if [ "$file_count" -eq 0 ]; then
-              echo "  $shard_name: no files"
-              continue
-            fi
-
-            echo "Processing $shard_name ($file_count file(s))..."
-            
-            # Copy files directly, preserving directory structure
-            # Since files are already in correct structure (no browser_tests/ prefix), just copy them all
-            cp -v -r "$shard_dir"* browser_tests/ 2>&1 | sed 's/^/  /'
-            
-            merged_count=$((merged_count + 1))
-            echo "  ✓ Merged"
-            echo ""
-          done
-
-          echo "=========================================="
-          echo "MERGE COMPLETE"
-          echo "=========================================="
-          echo "Shards merged: $merged_count"
-
-      - name: Show changes
-        run: |
-          echo "=========================================="
-          echo "CHANGES SUMMARY"
-          echo "=========================================="
-          echo ""
-          echo "Changed files in browser_tests:"
-          git diff --name-only browser_tests/ | head -20 || echo "No changes"
-          echo ""
-          echo "Total changes:"
-          git diff --name-only browser_tests/ | wc -l || echo "0"
-
-      - name: Commit updated expectations
-        id: commit
-        run: |
-          git config --global user.name 'github-actions'
-          git config --global user.email 'github-actions@github.com'
-          
-          if git diff --quiet browser_tests/; then
-            echo "No changes to commit"
-            echo "has-changes=false" >> $GITHUB_OUTPUT
-            exit 0
-          fi
-          
-          echo "=========================================="
-          echo "COMMITTING CHANGES"
-          echo "=========================================="
-          
-          echo "has-changes=true" >> $GITHUB_OUTPUT
-          
-          git add browser_tests/
-          git commit -m "[automated] Update test expectations"
-          
-          echo "Pushing to ${{ needs.setup.outputs.branch }}..."
-          git push origin ${{ needs.setup.outputs.branch }}
-          
-          echo "✓ Commit and push successful"
-
-      - name: Add Done Reaction
-        uses: peter-evans/create-or-update-comment@e8674b075228eee787fea43ef493e45ece1004c9
-        if: github.event_name == 'issue_comment' && steps.commit.outputs.has-changes == 'true'
-        with:
-          comment-id: ${{ needs.setup.outputs.comment-id }}
-          issue-number: ${{ needs.setup.outputs.pr-number }}
-          reactions: +1
-          reactions-edit-mode: replace
-
-      - name: Remove New Browser Test Expectations label
-        if: always() && github.event_name == 'pull_request'
-        run: gh pr edit ${{ needs.setup.outputs.pr-number }} --remove-label "New Browser Test Expectations"
-        env:
-          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

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

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

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

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

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

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

.github/workflows/release.yaml

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

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

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

.github/workflows/test-ui.yaml

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

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

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

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

@@ -1,5 +1,4 @@
-name: 'Api: Update Manager API Types'
-description: 'When upstream ComfyUI-Manager API is updated, click dispatch to update the TypeScript type definitions in this repo'
+name: Update ComfyUI-Manager API Types
 
 on:
   # Manual trigger
@@ -18,7 +17,7 @@ jobs:
       pull-requests: write
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v5
+        uses: actions/checkout@v4
 
       - name: Install pnpm
         uses: pnpm/action-setup@v4
@@ -31,11 +30,28 @@ jobs:
           node-version: lts/*
           cache: 'pnpm'
 
+      - name: Cache tool outputs
+        uses: actions/cache@v4
+        with:
+          path: |
+            .cache
+          key: update-manager-tools-cache-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            update-manager-tools-cache-${{ runner.os }}-
+
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
+      - name: Cache ComfyUI-Manager repository
+        uses: actions/cache@v4
+        with:
+          path: ComfyUI-Manager
+          key: comfyui-manager-repo-${{ runner.os }}-${{ github.run_id }}
+          restore-keys: |
+            comfyui-manager-repo-${{ runner.os }}-
+
       - name: Checkout ComfyUI-Manager repository
-        uses: actions/checkout@v5
+        uses: actions/checkout@v4
         with:
           repository: Comfy-Org/ComfyUI-Manager
           path: ComfyUI-Manager
@@ -52,7 +68,7 @@ jobs:
       - name: Generate Manager API types
         run: |
           echo "Generating TypeScript types from ComfyUI-Manager@${{ steps.manager-info.outputs.commit }}..."
-          pnpm dlx openapi-typescript ./ComfyUI-Manager/openapi.yaml --output ./src/types/generatedManagerTypes.ts
+          npx openapi-typescript ./ComfyUI-Manager/openapi.yaml --output ./src/types/generatedManagerTypes.ts
 
       - name: Validate generated types
         run: |

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

@@ -1,5 +1,4 @@
-name: 'Api: Update Registry API Types'
-description: 'When upstream comfy-api is updated, click dispatch to update the TypeScript type definitions in this repo'
+name: Update Comfy Registry API Types
 
 on:
   # Manual trigger
@@ -17,7 +16,7 @@ jobs:
       pull-requests: write
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v5
+        uses: actions/checkout@v4
 
       - name: Install pnpm
         uses: pnpm/action-setup@v4
@@ -30,11 +29,28 @@ jobs:
           node-version: lts/*
           cache: 'pnpm'
 
+      - name: Cache tool outputs
+        uses: actions/cache@v4
+        with:
+          path: |
+            .cache
+          key: update-registry-tools-cache-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            update-registry-tools-cache-${{ runner.os }}-
+
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
+      - name: Cache comfy-api repository
+        uses: actions/cache@v4
+        with:
+          path: comfy-api
+          key: comfy-api-repo-${{ runner.os }}-${{ github.run_id }}
+          restore-keys: |
+            comfy-api-repo-${{ runner.os }}-
+
       - name: Checkout comfy-api repository
-        uses: actions/checkout@v5
+        uses: actions/checkout@v4
         with:
           repository: Comfy-Org/comfy-api
           path: comfy-api
@@ -52,18 +68,17 @@ jobs:
       - name: Generate API types
         run: |
           echo "Generating TypeScript types from comfy-api@${{ steps.api-info.outputs.commit }}..."
-          mkdir -p ./packages/registry-types/src
-          pnpm dlx openapi-typescript ./comfy-api/openapi.yml --output ./packages/registry-types/src/comfyRegistryTypes.ts
+          npx openapi-typescript ./comfy-api/openapi.yml --output ./src/types/comfyRegistryTypes.ts
 
       - name: Validate generated types
         run: |
-          if [ ! -f ./packages/registry-types/src/comfyRegistryTypes.ts ]; then
+          if [ ! -f ./src/types/comfyRegistryTypes.ts ]; then
             echo "Error: Types file was not generated."
             exit 1
           fi
 
           # Check if file is not empty
-          if [ ! -s ./packages/registry-types/src/comfyRegistryTypes.ts ]; then
+          if [ ! -s ./src/types/comfyRegistryTypes.ts ]; then
             echo "Error: Generated types file is empty."
             exit 1
           fi
@@ -71,12 +86,12 @@ jobs:
       - name: Lint generated types
         run: |
           echo "Linting generated Comfy Registry API types..."
-          pnpm lint:fix:no-cache -- ./packages/registry-types/src/comfyRegistryTypes.ts
+          pnpm lint:fix:no-cache -- ./src/types/comfyRegistryTypes.ts
 
       - name: Check for changes
         id: check-changes
         run: |
-          if [[ -z $(git status --porcelain ./packages/registry-types/src/comfyRegistryTypes.ts) ]]; then
+          if [[ -z $(git status --porcelain ./src/types/comfyRegistryTypes.ts) ]]; then
             echo "No changes to Comfy Registry API types detected."
             echo "changed=false" >> $GITHUB_OUTPUT
             exit 0
@@ -106,4 +121,4 @@ jobs:
           labels: CNR
           delete-branch: true
           add-paths: |
-            packages/registry-types/src/comfyRegistryTypes.ts
+            src/types/comfyRegistryTypes.ts

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

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

.github/workflows/version-bump.yaml

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

.github/workflows/vitest.yaml

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

.github/workflows/weekly-docs-check.yaml

@@ -1,144 +0,0 @@
-name: "Weekly Documentation Check"
-description: "Automated weekly documentation accuracy check and update via Claude"
-
-permissions:
-  contents: write
-  pull-requests: write
-  id-token: write
-
-on:
-  schedule:
-    # Run every Monday at 9 AM UTC
-    - cron: '0 9 * * 1'
-  workflow_dispatch:
-
-concurrency:
-  group: ${{ github.workflow }}
-  cancel-in-progress: true
-
-jobs:
-  docs-check:
-    runs-on: ubuntu-latest
-    timeout-minutes: 45
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v5
-        with:
-          fetch-depth: 0
-          ref: main
-
-      - name: Install pnpm
-        uses: pnpm/action-setup@v4
-        with:
-          version: 10
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: '20'
-          cache: 'pnpm'
-
-      - name: Install dependencies for analysis tools
-        run: |
-          # Check if packages are already available locally
-          if ! pnpm list typescript @vue/compiler-sfc >/dev/null 2>&1; then
-            echo "Installing TypeScript and Vue compiler globally..."
-            pnpm install -g typescript @vue/compiler-sfc
-          else
-            echo "TypeScript and Vue compiler already available locally"
-          fi
-
-      - name: Run Claude Documentation Review
-        uses: anthropics/claude-code-action@v1.0.6
-        with:
-          prompt: |
-            Is all documentation still 100% accurate?
-
-            INSTRUCTIONS:
-            1. Fact-check all documentation against the current codebase
-            2. Look for:
-               - Outdated API references
-               - Deprecated functions or components still documented
-               - Missing documentation for new features
-               - Incorrect code examples
-               - Broken internal references
-               - Configuration examples that no longer work
-               - Documentation that contradicts actual implementation
-            3. Update any inaccurate or outdated documentation
-            4. Add documentation for significant undocumented features
-            5. Ensure all code examples are valid and tested against current code
-
-            Focus on these key areas:
-            - docs/**/*.md (all documentation files)
-            - CLAUDE.md (project guidelines)
-            - README.md files throughout the repository
-            - .claude/commands/*.md (Claude command documentation)
-
-            Make changes directly to the documentation files as needed.
-            DO NOT modify any source code files unless absolutely necessary for documentation accuracy.
-
-            After making all changes, create a comprehensive PR message summary:
-            1. Write a detailed PR body to /tmp/pr-body-${{ github.run_id }}.md in markdown format
-            2. Include:
-               - ## Summary section with bullet points of what was changed
-               - ## Changes Made section with details organized by category
-               - ## Review Notes section with any important context
-            3. Be specific about which files were updated and why
-            4. If no changes were needed, write a brief message stating documentation is up to date
-          anthropic_api_key: ${{ secrets.ANTHROPIC_API_KEY }}
-          claude_args: "--max-turns 256 --allowedTools 'Bash(git status),Bash(git diff),Bash(git log),Bash(pnpm:*),Bash(npm:*),Bash(node:*),Bash(tsc:*),Bash(echo:*),Read,Write,Edit,Glob,Grep'"
-        continue-on-error: false
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Check for changes
-        id: check_changes
-        run: |
-          if git diff --quiet && git diff --cached --quiet; then
-            echo "has_changes=false" >> $GITHUB_OUTPUT
-            echo "No documentation changes needed"
-          else
-            echo "has_changes=true" >> $GITHUB_OUTPUT
-            echo "Documentation changes detected"
-          fi
-
-      - name: Create default PR body if not generated
-        if: steps.check_changes.outputs.has_changes == 'true'
-        run: |
-          if [ ! -f /tmp/pr-body-${{ github.run_id }}.md ]; then
-            cat > /tmp/pr-body-${{ github.run_id }}.md <<'EOF'
-          ## Automated Documentation Review
-
-          This PR contains documentation updates identified by the weekly automated review.
-
-          ### Review Process
-          - Automated fact-checking against current codebase
-          - Verification of code examples and API references
-          - Detection of outdated or missing documentation
-
-          ### What was checked
-          - All markdown documentation in `docs/`
-          - Project guidelines in `CLAUDE.md`
-          - README files throughout the repository
-          - Claude command documentation in `.claude/commands/`
-
-          **Note**: This is an automated PR. Please review all changes carefully before merging.
-
-          🤖 Generated by weekly documentation check workflow
-          EOF
-          fi
-
-      - name: Create or Update Pull Request
-        if: steps.check_changes.outputs.has_changes == 'true'
-        uses: peter-evans/create-pull-request@v7
-        with:
-          token: ${{ secrets.PR_GH_TOKEN }}
-          commit-message: 'docs: weekly documentation accuracy update'
-          branch: docs/weekly-update
-          delete-branch: true
-          title: 'docs: Weekly Documentation Update'
-          body-path: /tmp/pr-body-${{ github.run_id }}.md
-          labels: |
-            documentation
-            automated
-          draft: true

.gitignore

@@ -15,7 +15,6 @@ yarn.lock
 # Cache files
 .eslintcache
 .prettiercache
-.stylelintcache
 
 node_modules
 dist
@@ -23,8 +22,6 @@ dist-ssr
 *.local
 # Claude configuration
 .claude/*.local.json
-.claude/*.local.md
-.claude/*.local.txt
 CLAUDE.local.md
 
 # Editor directories and files
@@ -32,7 +29,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
@@ -48,7 +44,6 @@ components.d.ts
 tests-ui/data/*
 tests-ui/ComfyUI_examples
 tests-ui/workflows/examples
-coverage/
 
 # Browser tests
 /test-results/
@@ -78,13 +73,13 @@ templates_repo/
 vite.config.mts.timestamp-*.mjs
 
 # Linux core dumps
-/core
+./core
 
 *storybook.log
 storybook-static
 
-# MCP Servers
-.playwright-mcp/*
+
+
 
 .nx/cache
 .nx/workspace-data
@@ -92,6 +87,3 @@ storybook-static
 .github/instructions/nx.instructions.md
 vite.config.*.timestamp*
 vitest.config.*.timestamp*
-
-# Weekly docs check output
-/output.txt

.husky/pre-commit

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

.husky/pre-push

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

.i18nrc.cjs

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

.npmrc

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

.prettierignore

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

.prettierrc

@@ -7,5 +7,12 @@
   "importOrder": ["^@core/(.*)$", "<THIRD_PARTY_MODULES>", "^@/(.*)$", "^[./]"],
   "importOrderSeparation": true,
   "importOrderSortSpecifiers": true,
-  "plugins": ["@prettier/plugin-oxc", "@trivago/prettier-plugin-sort-imports"]
+  "overrides": [
+    {
+      "files": "*.{js,cjs,mjs,ts,cts,mts,tsx,vue}",
+      "options": {
+        "plugins": ["@trivago/prettier-plugin-sort-imports"]
+      }
+    }
+  ]
 }

.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

@@ -15,37 +15,26 @@ const config: StorybookConfig = {
   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'))
+      config.plugins = config.plugins.filter((plugin: any) => {
+        if (plugin && plugin.name && plugin.name.includes('import-map')) {
+          return false
+        }
+        return true
+      })
     }
 
     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'
+              process.cwd() + '/src/assets/icons/custom'
             )
           }
         }),
@@ -76,6 +65,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

@@ -1,7 +1,7 @@
 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 type { Preview } from '@storybook/vue3-vite'
 import { createPinia } from 'pinia'
 import 'primeicons/primeicons.css'
 import PrimeVue from 'primevue/config'
@@ -9,9 +9,11 @@ import ConfirmationService from 'primevue/confirmationservice'
 import ToastService from 'primevue/toastservice'
 import Tooltip from 'primevue/tooltip'
 
-import '@/assets/css/style.css'
-import { i18n } from '@/i18n'
-import '@/lib/litegraph/public/css/litegraph.css'
+import '../src/assets/css/style.css'
+import { i18n } from '../src/i18n'
+import '../src/lib/litegraph/public/css/litegraph.css'
+import { useWidgetStore } from '../src/stores/widgetStore'
+import { useColorPaletteStore } from '../src/stores/workspace/colorPaletteStore'
 
 const ComfyUIPreset = definePreset(Aura, {
   semantic: {
@@ -23,11 +25,13 @@ const ComfyUIPreset = definePreset(Aura, {
 // Setup Vue app for Storybook
 setup((app) => {
   app.directive('tooltip', Tooltip)
-
-  // Create Pinia instance
   const pinia = createPinia()
-
   app.use(pinia)
+
+  // Initialize stores
+  useColorPaletteStore(pinia)
+  useWidgetStore(pinia)
+
   app.use(i18n)
   app.use(PrimeVue, {
     theme: {
@@ -46,8 +50,8 @@ setup((app) => {
   app.use(ToastService)
 })
 
-// Theme and dialog decorator
-export const withTheme = (Story: StoryFn, context: StoryContext) => {
+// Dark theme decorator
+export const withTheme = (Story: any, context: any) => {
   const theme = context.globals.theme || 'light'
 
   // Apply theme class to document root
@@ -59,7 +63,7 @@ export const withTheme = (Story: StoryFn, context: StoryContext) => {
     document.body.classList.remove('dark-theme')
   }
 
-  return Story(context.args, context)
+  return Story()
 }
 
 const preview: Preview = {

.stylelintrc.json

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

.vscode/custom-css.json

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

.vscode/settings.json.default

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

.vscode/tailwind.json

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

AGENTS.md

@@ -5,14 +5,15 @@
 - Routing/i18n/entry: `src/router.ts`, `src/i18n.ts`, `src/main.ts`.
 - Tests: unit/component in `tests-ui/` and `src/components/**/*.{test,spec}.ts`; E2E in `browser_tests/`.
 - Public assets: `public/`. Build output: `dist/`.
-- Config: `vite.config.mts`, `vitest.config.ts`, `playwright.config.ts`, `eslint.config.ts`, `.prettierrc`.
+- Config: `vite.config.mts`, `vitest.config.ts`, `playwright.config.ts`, `eslint.config.js`, `.prettierrc`.
 
 ## Build, Test, and Development Commands
 - `pnpm dev`: Start Vite dev server.
 - `pnpm dev:electron`: Dev server with Electron API mocks.
 - `pnpm build`: Type-check then production build to `dist/`.
 - `pnpm preview`: Preview the production build locally.
-- `pnpm test:unit`: Run Vitest unit tests.
+- `pnpm test:unit`: Run Vitest unit tests (`tests-ui/`).
+- `pnpm test:component`: Run component tests (`src/components/`).
 - `pnpm test:browser`: Run Playwright E2E tests (`browser_tests/`).
 - `pnpm lint` / `pnpm lint:fix`: Lint (ESLint). `pnpm format` / `format:check`: Prettier.
 - `pnpm typecheck`: Vue TSC type checking.
@@ -30,9 +31,10 @@
 - Playwright: place tests in `browser_tests/`; optional tags like `@mobile`, `@2x` are respected by config.
 
 ## Commit & Pull Request Guidelines
-- Commits: Use `[skip ci]` for locale-only updates when appropriate.
-- PRs: Include clear description, linked issues (`- Fixes #123`), and screenshots/GIFs for UI changes.
+- Commits: Prefer Conventional Commits (e.g., `feat(ui): add sidebar`), `refactor(litegraph): …`. Use `[skip ci]` for locale-only updates when appropriate.
+- PRs: Include clear description, linked issues (`Fixes #123`), and screenshots/GIFs for UI changes. Add/adjust tests and i18n strings when applicable.
 - Quality gates: `pnpm lint`, `pnpm typecheck`, and relevant tests must pass. Keep PRs focused and small.
 
 ## Security & Configuration Tips
 - Secrets: Use `.env` (see `.env_example`); do not commit secrets.
+- Backend: Dev server expects ComfyUI backend at `localhost:8188` by default; configure via `.env`.

CLAUDE.md

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

CODEOWNERS

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

CONTRIBUTING.md

@@ -43,7 +43,7 @@ Have another idea? Drop into Discord or open an issue, and let's chat!
    ```
 
 3. Configure environment (optional):
-   Create a `.env` file in the project root based on the provided [.env_example](.env_example) file.
+   Create a `.env` file in the project root based on the provided [.env.example](.env.example) file.
 
    **Note about ports**: By default, the dev server expects the ComfyUI backend at `localhost:8188`. If your ComfyUI instance runs on a different port, update this in your `.env` file.
 
@@ -213,6 +213,12 @@ Here's how Claude Code can use the Playwright MCP server to inspect the interfac
 - `pnpm i` to install all dependencies
 - `pnpm test:unit` to execute all unit tests
 
+### Component Tests
+
+Component tests verify Vue components in `src/components/`.
+
+- `pnpm test:component` to execute all component tests
+
 ### Playwright Tests
 
 Playwright tests verify the whole app. See [browser_tests/README.md](browser_tests/README.md) for details.
@@ -223,6 +229,7 @@ Before submitting a PR, ensure all tests pass:
 
 ```bash
 pnpm test:unit
+pnpm test:component
 pnpm test:browser
 pnpm typecheck
 pnpm lint
@@ -255,12 +262,12 @@ pnpm format
 The project supports three types of icons, all with automatic imports (no manual imports needed):
 
 1. **PrimeIcons** - Built-in PrimeVue icons using CSS classes: `<i class="pi pi-plus" />`
-2. **Iconify Icons** - 200,000+ icons from various libraries: `<i class="icon-[lucide--settings]" />`, `<i class="icon-[mdi--folder]" />`
+2. **Iconify Icons** - 200,000+ icons from various libraries: `<i-lucide:settings />`, `<i-mdi:folder />`
 3. **Custom Icons** - Your own SVG icons: `<i-comfy:workflow />`
 
-Icons are powered by the unplugin-icons system, which automatically discovers and imports icons as Vue components. Custom icons are stored in `packages/design-system/src/icons/` and processed by `packages/design-system/src/iconCollection.ts` with automatic validation.
+Icons are powered by the unplugin-icons system, which automatically discovers and imports icons as Vue components. Custom icons are stored in `src/assets/icons/custom/` and processed by `build/customIconCollection.ts` with automatic validation.
 
-For detailed instructions and code examples, see [packages/design-system/src/icons/README.md](packages/design-system/src/icons/README.md).
+For detailed instructions and code examples, see [src/assets/icons/README.md](src/assets/icons/README.md).
 
 ## Working with litegraph.js
 
@@ -325,4 +332,4 @@ If you have questions about contributing:
 - Ask in our [Discord](https://discord.com/invite/comfyorg)
 - Open a new issue for clarification
 
-Thank you for contributing to ComfyUI Frontend!
+Thank you for contributing to ComfyUI Frontend!

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

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

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

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

apps/desktop-ui/index.html

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

apps/desktop-ui/package.json

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

apps/desktop-ui/src/App.vue

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

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

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

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

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

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

@@ -1,71 +0,0 @@
-<template>
-  <div :class="wrapperClass">
-    <div class="grid grid-rows-2 gap-8">
-      <!-- Top container: Logo -->
-      <div class="flex items-end justify-center">
-        <img
-          src="/assets/images/comfy-brand-mark.svg"
-          :alt="t('g.logoAlt')"
-          class="w-60"
-        />
-      </div>
-      <!-- Bottom container: Progress and text -->
-      <div class="flex flex-col items-center justify-center gap-4">
-        <ProgressBar
-          v-if="!hideProgress"
-          :mode="progressMode"
-          :value="progressPercentage ?? 0"
-          :show-value="false"
-          class="w-90 h-2 mt-8"
-          :pt="{ value: { class: 'bg-brand-yellow' } }"
-        />
-        <h1 v-if="title" class="font-inter font-bold text-3xl text-neutral-300">
-          {{ title }}
-        </h1>
-        <p v-if="statusText" class="text-lg text-neutral-400">
-          {{ statusText }}
-        </p>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import ProgressBar from 'primevue/progressbar'
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-const { t } = useI18n()
-
-/** Props for the StartupDisplay component */
-interface StartupDisplayProps {
-  /** Progress: 0-100 for determinate, undefined for indeterminate */
-  progressPercentage?: number
-  /** Main title text */
-  title?: string
-  /** Status text shown below the title */
-  statusText?: string
-  /** Hide the progress bar */
-  hideProgress?: boolean
-  /** Use full screen wrapper (default: true) */
-  fullScreen?: boolean
-}
-
-const {
-  progressPercentage,
-  title,
-  statusText,
-  hideProgress = false,
-  fullScreen = true
-} = defineProps<StartupDisplayProps>()
-
-const progressMode = computed(() =>
-  progressPercentage === undefined ? 'indeterminate' : 'determinate'
-)
-
-const wrapperClass = computed(() =>
-  fullScreen
-    ? 'flex items-center justify-center min-h-screen'
-    : 'flex items-center justify-center'
-)
-</script>

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/components/install/GpuPicker.vue

@@ -1,103 +0,0 @@
-<template>
-  <div
-    class="mx-auto grid h-[40rem] w-full max-w-3xl grid-rows-[1fr_auto_auto_1fr] select-none"
-  >
-    <h2 class="text-center font-inter text-3xl font-bold text-neutral-100">
-      {{ $t('install.gpuPicker.title') }}
-    </h2>
-
-    <!-- GPU Selection buttons - takes up remaining space and centers content -->
-    <div class="flex flex-1 items-center justify-center gap-8">
-      <!-- Apple Metal / NVIDIA -->
-      <HardwareOption
-        v-if="platform === 'darwin'"
-        :image-path="'./assets/images/apple-mps-logo.png'"
-        placeholder-text="Apple Metal"
-        subtitle="Apple Metal"
-        :value="'mps'"
-        :selected="selected === 'mps'"
-        :recommended="true"
-        @click="pickGpu('mps')"
-      />
-      <HardwareOption
-        v-else
-        :image-path="'./assets/images/nvidia-logo-square.jpg'"
-        placeholder-text="NVIDIA"
-        :subtitle="$t('install.gpuPicker.nvidiaSubtitle')"
-        :value="'nvidia'"
-        :selected="selected === 'nvidia'"
-        :recommended="true"
-        @click="pickGpu('nvidia')"
-      />
-      <!-- CPU -->
-      <HardwareOption
-        placeholder-text="CPU"
-        :subtitle="$t('install.gpuPicker.cpuSubtitle')"
-        :value="'cpu'"
-        :selected="selected === 'cpu'"
-        @click="pickGpu('cpu')"
-      />
-      <!-- Manual Install -->
-      <HardwareOption
-        placeholder-text="Manual Install"
-        :subtitle="$t('install.gpuPicker.manualSubtitle')"
-        :value="'unsupported'"
-        :selected="selected === 'unsupported'"
-        @click="pickGpu('unsupported')"
-      />
-    </div>
-
-    <div class="h-16 px-24 pt-12">
-      <div v-show="showRecommendedBadge" class="flex items-center gap-2">
-        <Tag
-          :value="$t('install.gpuPicker.recommended')"
-          class="rounded-full bg-neutral-300 px-2 py-[1px] text-sm font-bold text-neutral-900"
-        />
-        <i class="icon-[lucide--badge-check] text-lg text-neutral-300" />
-      </div>
-    </div>
-
-    <div class="px-24 text-neutral-300">
-      <p v-show="descriptionText" class="leading-relaxed">
-        {{ descriptionText }}
-      </p>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { TorchDeviceType } from '@comfyorg/comfyui-electron-types'
-import Tag from 'primevue/tag'
-import { computed } from 'vue'
-
-import HardwareOption from '@/components/install/HardwareOption.vue'
-import { st } from '@/i18n'
-import { electronAPI } from '@/utils/envUtil'
-
-const selected = defineModel<TorchDeviceType | null>('device', {
-  required: true
-})
-
-const electron = electronAPI()
-const platform = electron.getPlatform()
-
-const showRecommendedBadge = computed(
-  () => selected.value === 'mps' || selected.value === 'nvidia'
-)
-
-const descriptionKeys = {
-  mps: 'appleMetal',
-  nvidia: 'nvidia',
-  cpu: 'cpu',
-  unsupported: 'manual'
-} as const
-
-const descriptionText = computed(() => {
-  const key = selected.value ? descriptionKeys[selected.value] : undefined
-  return st(`install.gpuPicker.${key}Description`, '')
-})
-
-const pickGpu = (value: TorchDeviceType) => {
-  selected.value = value
-}
-</script>

apps/desktop-ui/src/components/install/HardwareOption.stories.ts

@@ -1,73 +0,0 @@
-// eslint-disable-next-line storybook/no-renderer-packages
-import type { Meta, StoryObj } from '@storybook/vue3'
-
-import HardwareOption from './HardwareOption.vue'
-
-const meta: Meta<typeof HardwareOption> = {
-  title: 'Desktop/Components/HardwareOption',
-  component: HardwareOption,
-  parameters: {
-    layout: 'centered',
-    backgrounds: {
-      default: 'dark',
-      values: [{ name: 'dark', value: '#1a1a1a' }]
-    }
-  },
-  argTypes: {
-    selected: { control: 'boolean' },
-    imagePath: { control: 'text' },
-    placeholderText: { control: 'text' },
-    subtitle: { control: 'text' }
-  }
-}
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const AppleMetalSelected: Story = {
-  args: {
-    imagePath: '/assets/images/apple-mps-logo.png',
-    placeholderText: 'Apple Metal',
-    subtitle: 'Apple Metal',
-    value: 'mps',
-    selected: true
-  }
-}
-
-export const AppleMetalUnselected: Story = {
-  args: {
-    imagePath: '/assets/images/apple-mps-logo.png',
-    placeholderText: 'Apple Metal',
-    subtitle: 'Apple Metal',
-    value: 'mps',
-    selected: false
-  }
-}
-
-export const CPUOption: Story = {
-  args: {
-    placeholderText: 'CPU',
-    subtitle: 'Subtitle',
-    value: 'cpu',
-    selected: false
-  }
-}
-
-export const ManualInstall: Story = {
-  args: {
-    placeholderText: 'Manual Install',
-    subtitle: 'Subtitle',
-    value: 'unsupported',
-    selected: false
-  }
-}
-
-export const NvidiaSelected: Story = {
-  args: {
-    imagePath: '/assets/images/nvidia-logo-square.jpg',
-    placeholderText: 'NVIDIA',
-    subtitle: 'NVIDIA',
-    value: 'nvidia',
-    selected: true
-  }
-}

apps/desktop-ui/src/components/install/HardwareOption.vue

@@ -1,55 +0,0 @@
-<template>
-  <div class="relative">
-    <!-- Recommended Badge -->
-    <button
-      :class="
-        cn(
-          'hardware-option w-[170px] h-[190px] p-5 flex flex-col items-center rounded-3xl transition-all duration-200 bg-neutral-900/70 border-4',
-          selected ? 'border-solid border-brand-yellow' : 'border-transparent'
-        )
-      "
-      @click="$emit('click')"
-    >
-      <!-- Icon/Logo Area - Rounded square container -->
-      <div
-        class="icon-container w-[110px] h-[110px] shrink-0 rounded-2xl bg-neutral-800 flex items-center justify-center overflow-hidden"
-      >
-        <img
-          v-if="imagePath"
-          :src="imagePath"
-          :alt="placeholderText"
-          class="w-full h-full object-cover"
-          style="object-position: 57% center"
-          draggable="false"
-        />
-        <span v-else class="text-xl font-medium text-neutral-400">
-          {{ placeholderText }}
-        </span>
-      </div>
-
-      <!-- Text Content -->
-      <div v-if="subtitle" class="text-center mt-4">
-        <div class="text-sm text-neutral-500">{{ subtitle }}</div>
-      </div>
-    </button>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { TorchDeviceType } from '@comfyorg/comfyui-electron-types'
-
-import { cn } from '@/utils/tailwindUtil'
-
-interface Props {
-  imagePath?: string
-  placeholderText: string
-  subtitle?: string
-  value: TorchDeviceType
-  selected?: boolean
-  recommended?: boolean
-}
-
-defineProps<Props>()
-
-defineEmits<{ click: [] }>()
-</script>

apps/desktop-ui/src/components/install/InstallFooter.vue

@@ -1,79 +0,0 @@
-<template>
-  <div class="grid grid-cols-[1fr_auto_1fr] items-center gap-4">
-    <!-- Back button -->
-    <Button
-      v-if="currentStep !== '1'"
-      :label="$t('g.back')"
-      severity="secondary"
-      icon="pi pi-arrow-left"
-      class="font-inter rounded-lg border-0 px-6 py-2 justify-self-start"
-      @click="$emit('previous')"
-    />
-    <div v-else></div>
-
-    <!-- Step indicators in center -->
-    <StepList class="flex justify-center items-center gap-3 select-none">
-      <Step value="1" :pt="stepPassthrough">
-        {{ $t('install.gpu') }}
-      </Step>
-      <Step value="2" :disabled="disableLocationStep" :pt="stepPassthrough">
-        {{ $t('install.installLocation') }}
-      </Step>
-      <Step value="3" :disabled="disableSettingsStep" :pt="stepPassthrough">
-        {{ $t('install.desktopSettings') }}
-      </Step>
-    </StepList>
-
-    <!-- Next/Install button -->
-    <Button
-      :label="currentStep !== '3' ? $t('g.next') : $t('g.install')"
-      class="px-8 py-2 bg-brand-yellow hover:bg-brand-yellow/90 font-inter rounded-lg border-0 transition-colors justify-self-end"
-      :pt="{
-        label: { class: 'text-neutral-900 font-inter font-black' }
-      }"
-      :disabled="!canProceed"
-      @click="currentStep !== '3' ? $emit('next') : $emit('install')"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { PassThrough } from '@primevue/core'
-import Button from 'primevue/button'
-import Step, { type StepPassThroughOptions } from 'primevue/step'
-import StepList from 'primevue/steplist'
-
-defineProps<{
-  /** Current step index as string ('1', '2', '3', '4') */
-  currentStep: string
-  /** Whether the user can proceed to the next step */
-  canProceed: boolean
-  /** Whether the location step should be disabled */
-  disableLocationStep: boolean
-  /** Whether the migration step should be disabled */
-  disableMigrationStep: boolean
-  /** Whether the settings step should be disabled */
-  disableSettingsStep: boolean
-}>()
-
-defineEmits<{
-  previous: []
-  next: []
-  install: []
-}>()
-
-const stepPassthrough: PassThrough<StepPassThroughOptions> = {
-  root: { class: 'flex-none p-0 m-0' },
-  header: ({ context }) => ({
-    class: [
-      'h-2.5 p-0 m-0 border-0 rounded-full transition-all duration-300',
-      context.active
-        ? 'bg-brand-yellow w-8 rounded-sm'
-        : 'bg-neutral-700 w-2.5',
-      context.disabled ? 'opacity-60 cursor-not-allowed' : ''
-    ].join(' ')
-  }),
-  number: { class: 'hidden' },
-  title: { class: 'hidden' }
-}
-</script>

apps/desktop-ui/src/components/install/InstallLocationPicker.stories.ts

@@ -1,148 +0,0 @@
-// eslint-disable-next-line storybook/no-renderer-packages
-import type { Meta, StoryObj } from '@storybook/vue3'
-import { ref } from 'vue'
-
-import InstallLocationPicker from './InstallLocationPicker.vue'
-
-const meta: Meta<typeof InstallLocationPicker> = {
-  title: 'Desktop/Components/InstallLocationPicker',
-  component: InstallLocationPicker,
-  parameters: {
-    layout: 'padded',
-    backgrounds: {
-      default: 'dark',
-      values: [
-        { name: 'dark', value: '#0a0a0a' },
-        { name: 'neutral-900', value: '#171717' },
-        { name: 'neutral-950', value: '#0a0a0a' }
-      ]
-    }
-  },
-  decorators: [
-    () => {
-      // Mock electron API
-      ;(window as any).electronAPI = {
-        getSystemPaths: () =>
-          Promise.resolve({
-            defaultInstallPath: '/Users/username/ComfyUI'
-          }),
-        validateInstallPath: () =>
-          Promise.resolve({
-            isValid: true,
-            exists: false,
-            canWrite: true,
-            freeSpace: 100000000000,
-            requiredSpace: 10000000000,
-            isNonDefaultDrive: false
-          }),
-        validateComfyUISource: () =>
-          Promise.resolve({
-            isValid: true
-          }),
-        showDirectoryPicker: () => Promise.resolve('/Users/username/ComfyUI')
-      }
-      return { template: '<story />' }
-    }
-  ]
-}
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-// Default story with accordion expanded
-export const Default: Story = {
-  render: (args) => ({
-    components: { InstallLocationPicker },
-    setup() {
-      const installPath = ref('/Users/username/ComfyUI')
-      const pathError = ref('')
-      const migrationSourcePath = ref('/Users/username/ComfyUI-old')
-      const migrationItemIds = ref<string[]>(['models', 'custom_nodes'])
-
-      return {
-        args,
-        installPath,
-        pathError,
-        migrationSourcePath,
-        migrationItemIds
-      }
-    },
-    template: `
-      <div class="min-h-screen bg-neutral-950 p-8">
-        <InstallLocationPicker
-          v-model:installPath="installPath"
-          v-model:pathError="pathError"
-          v-model:migrationSourcePath="migrationSourcePath"
-          v-model:migrationItemIds="migrationItemIds"
-        />
-      </div>
-    `
-  })
-}
-
-// Story with different background to test transparency
-export const OnNeutral900: Story = {
-  render: (args) => ({
-    components: { InstallLocationPicker },
-    setup() {
-      const installPath = ref('/Users/username/ComfyUI')
-      const pathError = ref('')
-      const migrationSourcePath = ref('/Users/username/ComfyUI-old')
-      const migrationItemIds = ref<string[]>(['models', 'custom_nodes'])
-
-      return {
-        args,
-        installPath,
-        pathError,
-        migrationSourcePath,
-        migrationItemIds
-      }
-    },
-    template: `
-      <div class="min-h-screen bg-neutral-900 p-8">
-        <InstallLocationPicker
-          v-model:installPath="installPath"
-          v-model:pathError="pathError"
-          v-model:migrationSourcePath="migrationSourcePath"
-          v-model:migrationItemIds="migrationItemIds"
-        />
-      </div>
-    `
-  })
-}
-
-// Story with debug overlay showing background colors
-export const DebugBackgrounds: Story = {
-  render: (args) => ({
-    components: { InstallLocationPicker },
-    setup() {
-      const installPath = ref('/Users/username/ComfyUI')
-      const pathError = ref('')
-      const migrationSourcePath = ref('/Users/username/ComfyUI-old')
-      const migrationItemIds = ref<string[]>(['models', 'custom_nodes'])
-
-      return {
-        args,
-        installPath,
-        pathError,
-        migrationSourcePath,
-        migrationItemIds
-      }
-    },
-    template: `
-      <div class="min-h-screen bg-neutral-950 p-8 relative">
-        <div class="absolute top-4 right-4 text-white text-xs space-y-2 z-50">
-          <div>Parent bg: neutral-950 (#0a0a0a)</div>
-          <div>Accordion content: bg-transparent</div>
-          <div>Migration options: bg-transparent + p-4 rounded-lg</div>
-        </div>
-        <InstallLocationPicker
-          v-model:installPath="installPath"
-          v-model:pathError="pathError"
-          v-model:migrationSourcePath="migrationSourcePath"
-          v-model:migrationItemIds="migrationItemIds"
-        />
-      </div>
-    `
-  })
-}

apps/desktop-ui/src/components/install/InstallLocationPicker.vue

@@ -1,312 +0,0 @@
-<template>
-  <div class="flex flex-col gap-8 w-full max-w-3xl mx-auto select-none">
-    <!-- Installation Path Section -->
-    <div class="grow flex flex-col gap-6 text-neutral-300">
-      <h2 class="font-inter font-bold text-3xl text-neutral-100 text-center">
-        {{ $t('install.locationPicker.title') }}
-      </h2>
-
-      <p class="text-center text-neutral-400 px-12">
-        {{ $t('install.locationPicker.subtitle') }}
-      </p>
-
-      <!-- Path Input -->
-      <div class="flex gap-2 px-12">
-        <InputText
-          v-model="installPath"
-          :placeholder="$t('install.locationPicker.pathPlaceholder')"
-          class="flex-1 bg-neutral-800/50 border-neutral-700 text-neutral-200 placeholder:text-neutral-500"
-          :class="{ 'p-invalid': pathError }"
-          @update:model-value="validatePath"
-          @focus="onFocus"
-        />
-        <Button
-          icon="pi pi-folder-open"
-          severity="secondary"
-          class="bg-neutral-700 hover:bg-neutral-600 border-0"
-          @click="browsePath"
-        />
-      </div>
-
-      <!-- Error Messages -->
-      <div v-if="pathError || pathExists || nonDefaultDrive" class="px-12">
-        <Message
-          v-if="pathError"
-          severity="error"
-          class="whitespace-pre-line w-full"
-        >
-          {{ pathError }}
-        </Message>
-        <Message v-if="pathExists" severity="warn" class="w-full">
-          {{ $t('install.pathExists') }}
-        </Message>
-        <Message v-if="nonDefaultDrive" severity="warn" class="w-full">
-          {{ $t('install.nonDefaultDrive') }}
-        </Message>
-      </div>
-
-      <!-- Collapsible Sections using PrimeVue Accordion -->
-      <Accordion
-        v-model:value="activeAccordionIndex"
-        :multiple="true"
-        class="location-picker-accordion"
-        :pt="{
-          root: 'bg-transparent border-0',
-          panel: {
-            root: 'border-0 mb-0'
-          },
-          header: {
-            root: 'border-0',
-            content:
-              'text-neutral-400 hover:text-neutral-300 px-4 py-2 flex items-center gap-3',
-            toggleicon: 'text-xs order-first mr-0'
-          },
-          content: {
-            root: 'bg-transparent border-0',
-            content: 'text-neutral-500 text-sm pl-11 pb-3 pt-0'
-          }
-        }"
-      >
-        <AccordionPanel value="0">
-          <AccordionHeader>
-            {{ $t('install.locationPicker.migrateFromExisting') }}
-          </AccordionHeader>
-          <AccordionContent>
-            <MigrationPicker
-              v-model:source-path="migrationSourcePath"
-              v-model:migration-item-ids="migrationItemIds"
-            />
-          </AccordionContent>
-        </AccordionPanel>
-
-        <AccordionPanel value="1">
-          <AccordionHeader>
-            {{ $t('install.locationPicker.chooseDownloadServers') }}
-          </AccordionHeader>
-          <AccordionContent>
-            <template
-              v-for="([item, modelValue], index) in mirrors"
-              :key="item.settingId + item.mirror"
-            >
-              <Divider v-if="index > 0" class="my-8" />
-
-              <MirrorItem
-                v-model="modelValue.value"
-                :item="item"
-                @state-change="validationStates[index] = $event"
-              />
-            </template>
-          </AccordionContent>
-        </AccordionPanel>
-      </Accordion>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { TorchDeviceType } from '@comfyorg/comfyui-electron-types'
-import { TorchMirrorUrl } from '@comfyorg/comfyui-electron-types'
-import { isInChina } from '@comfyorg/shared-frontend-utils/networkUtil'
-import Accordion from 'primevue/accordion'
-import AccordionContent from 'primevue/accordioncontent'
-import AccordionHeader from 'primevue/accordionheader'
-import AccordionPanel from 'primevue/accordionpanel'
-import Button from 'primevue/button'
-import Divider from 'primevue/divider'
-import InputText from 'primevue/inputtext'
-import Message from 'primevue/message'
-import { type ModelRef, computed, onMounted, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import MigrationPicker from '@/components/install/MigrationPicker.vue'
-import MirrorItem from '@/components/install/mirror/MirrorItem.vue'
-import {
-  PYPI_MIRROR,
-  PYTHON_MIRROR,
-  type UVMirror
-} from '@/constants/uvMirrors'
-import { electronAPI } from '@/utils/envUtil'
-import { ValidationState } from '@/utils/validationUtil'
-
-const { t } = useI18n()
-
-const installPath = defineModel<string>('installPath', { required: true })
-const pathError = defineModel<string>('pathError', { required: true })
-const migrationSourcePath = defineModel<string>('migrationSourcePath')
-const migrationItemIds = defineModel<string[]>('migrationItemIds')
-const pythonMirror = defineModel<string>('pythonMirror', {
-  default: ''
-})
-const pypiMirror = defineModel<string>('pypiMirror', {
-  default: ''
-})
-const torchMirror = defineModel<string>('torchMirror', {
-  default: ''
-})
-
-const { device } = defineProps<{ device: TorchDeviceType | null }>()
-
-const pathExists = ref(false)
-const nonDefaultDrive = ref(false)
-const inputTouched = ref(false)
-
-// Accordion state - array of active panel values
-const activeAccordionIndex = ref<string[] | undefined>(undefined)
-
-const electron = electronAPI()
-
-// Mirror configuration logic
-const getTorchMirrorItem = (device: TorchDeviceType): UVMirror => {
-  const settingId = 'Comfy-Desktop.UV.TorchInstallMirror'
-  switch (device) {
-    case 'mps':
-      return {
-        settingId,
-        mirror: TorchMirrorUrl.NightlyCpu,
-        fallbackMirror: TorchMirrorUrl.NightlyCpu
-      }
-    case 'nvidia':
-      return {
-        settingId,
-        mirror: TorchMirrorUrl.Cuda,
-        fallbackMirror: TorchMirrorUrl.Cuda
-      }
-    case 'cpu':
-    default:
-      return {
-        settingId,
-        mirror: PYPI_MIRROR.mirror,
-        fallbackMirror: PYPI_MIRROR.fallbackMirror
-      }
-  }
-}
-
-const userIsInChina = ref(false)
-const useFallbackMirror = (mirror: UVMirror) => ({
-  ...mirror,
-  mirror: mirror.fallbackMirror
-})
-
-const mirrors = computed<[UVMirror, ModelRef<string>][]>(() =>
-  (
-    [
-      [PYTHON_MIRROR, pythonMirror],
-      [PYPI_MIRROR, pypiMirror],
-      [getTorchMirrorItem(device ?? 'cpu'), torchMirror]
-    ] as [UVMirror, ModelRef<string>][]
-  ).map(([item, modelValue]) => [
-    userIsInChina.value ? useFallbackMirror(item) : item,
-    modelValue
-  ])
-)
-
-const validationStates = ref<ValidationState[]>(
-  mirrors.value.map(() => ValidationState.IDLE)
-)
-
-// Get default install path on component mount
-onMounted(async () => {
-  const paths = await electron.getSystemPaths()
-  installPath.value = paths.defaultInstallPath
-  await validatePath(paths.defaultInstallPath)
-  userIsInChina.value = await isInChina()
-})
-
-const validatePath = async (path: string | undefined) => {
-  try {
-    pathError.value = ''
-    pathExists.value = false
-    nonDefaultDrive.value = false
-    const validation = await electron.validateInstallPath(path ?? '')
-
-    // Create a pre-formatted list of errors
-    if (!validation.isValid) {
-      const errors: string[] = []
-      if (validation.cannotWrite) errors.push(t('install.cannotWrite'))
-      if (validation.freeSpace < validation.requiredSpace) {
-        const requiredGB = validation.requiredSpace / 1024 / 1024 / 1024
-        errors.push(`${t('install.insufficientFreeSpace')}: ${requiredGB} GB`)
-      }
-      if (validation.parentMissing) errors.push(t('install.parentMissing'))
-      if (validation.isOneDrive) errors.push(t('install.isOneDrive'))
-
-      if (validation.error)
-        errors.push(`${t('install.unhandledError')}: ${validation.error}`)
-      pathError.value = errors.join('\n')
-    }
-
-    if (validation.isNonDefaultDrive) nonDefaultDrive.value = true
-    if (validation.exists) pathExists.value = true
-  } catch (error) {
-    pathError.value = t('install.pathValidationFailed')
-  }
-}
-
-const browsePath = async () => {
-  try {
-    const result = await electron.showDirectoryPicker()
-    if (result) {
-      installPath.value = result
-      await validatePath(result)
-    }
-  } catch (error) {
-    pathError.value = t('install.failedToSelectDirectory')
-  }
-}
-
-const onFocus = async () => {
-  if (!inputTouched.value) {
-    inputTouched.value = true
-    return
-  }
-  // Refresh validation on re-focus
-  await validatePath(installPath.value)
-}
-</script>
-
-<style scoped>
-@reference '../../assets/css/style.css';
-
-:deep(.location-picker-accordion) {
-  @apply px-12;
-
-  .p-accordionpanel {
-    @apply border-0 bg-transparent;
-  }
-
-  .p-accordionheader {
-    @apply bg-neutral-800/50 border-0 rounded-xl mt-2 hover:bg-neutral-700/50;
-    transition:
-      background-color 0.2s ease,
-      border-radius 0.5s ease;
-  }
-
-  /* When panel is expanded, adjust header border radius */
-  .p-accordionpanel-active {
-    .p-accordionheader {
-      @apply rounded-t-xl rounded-b-none;
-    }
-
-    .p-accordionheader-toggle-icon {
-      &::before {
-        content: '\e902';
-      }
-    }
-  }
-
-  .p-accordioncontent {
-    @apply bg-neutral-800/50 border-0 rounded-b-xl rounded-t-none;
-  }
-
-  .p-accordioncontent-content {
-    @apply bg-transparent pt-3 pr-5 pb-5 pl-5;
-  }
-
-  /* Override default chevron icons to use up/down */
-  .p-accordionheader-toggle-icon {
-    &::before {
-      content: '\e933';
-    }
-  }
-}
-</style>

apps/desktop-ui/src/components/install/MigrationPicker.stories.ts

@@ -1,45 +0,0 @@
-// eslint-disable-next-line storybook/no-renderer-packages
-import type { Meta, StoryObj } from '@storybook/vue3'
-import { ref } from 'vue'
-
-import MigrationPicker from './MigrationPicker.vue'
-
-const meta: Meta<typeof MigrationPicker> = {
-  title: 'Desktop/Components/MigrationPicker',
-  component: MigrationPicker,
-  parameters: {
-    backgrounds: {
-      default: 'dark',
-      values: [
-        { name: 'dark', value: '#0a0a0a' },
-        { name: 'neutral-900', value: '#171717' }
-      ]
-    }
-  },
-  decorators: [
-    () => {
-      ;(window as any).electronAPI = {
-        validateComfyUISource: () => Promise.resolve({ isValid: true }),
-        showDirectoryPicker: () => Promise.resolve('/Users/username/ComfyUI')
-      }
-
-      return { template: '<story />' }
-    }
-  ]
-}
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  render: () => ({
-    components: { MigrationPicker },
-    setup() {
-      const sourcePath = ref('')
-      const migrationItemIds = ref<string[]>([])
-      return { sourcePath, migrationItemIds }
-    },
-    template:
-      '<MigrationPicker v-model:sourcePath="sourcePath" v-model:migrationItemIds="migrationItemIds" />'
-  })
-}

apps/desktop-ui/src/components/install/mirror/MirrorItem.vue

@@ -1,109 +0,0 @@
-<template>
-  <div class="flex flex-col gap-4 text-neutral-400 text-sm">
-    <div>
-      <h3 class="text-lg font-medium text-neutral-100 mb-3 mt-0">
-        {{ $t(`settings.${normalizedSettingId}.name`) }}
-      </h3>
-      <p class="my-1">
-        {{ $t(`settings.${normalizedSettingId}.tooltip`) }}
-      </p>
-    </div>
-    <UrlInput
-      v-model="modelValue"
-      :validate-url-fn="
-        (mirror: string) =>
-          checkMirrorReachable(mirror + (item.validationPathSuffix ?? ''))
-      "
-      @state-change="validationState = $event"
-    />
-    <div v-if="secondParagraph" class="mt-2">
-      <a href="#" @click.prevent="showDialog = true">
-        {{ $t('g.learnMore') }}
-      </a>
-
-      <Dialog
-        v-model:visible="showDialog"
-        modal
-        dismissable-mask
-        :header="$t(`settings.${normalizedSettingId}.urlFormatTitle`)"
-        class="select-none max-w-3xl"
-      >
-        <div class="text-neutral-300">
-          <p class="mt-1 whitespace-pre-wrap">{{ secondParagraph }}</p>
-          <div class="mt-2 break-all">
-            <span class="text-neutral-300 font-semibold">
-              {{ EXAMPLE_URL_FIRST_PART }}
-            </span>
-            <span>{{ EXAMPLE_URL_SECOND_PART }}</span>
-          </div>
-          <Divider />
-          <p>
-            {{ $t(`settings.${normalizedSettingId}.fileUrlDescription`) }}
-          </p>
-          <span class="text-neutral-300 font-semibold">
-            {{ FILE_URL_SCHEME }}
-          </span>
-          <span>
-            {{ EXAMPLE_FILE_URL }}
-          </span>
-        </div>
-      </Dialog>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { normalizeI18nKey } from '@comfyorg/shared-frontend-utils/formatUtil'
-import Dialog from 'primevue/dialog'
-import Divider from 'primevue/divider'
-import { computed, onMounted, ref, watch } from 'vue'
-
-import UrlInput from '@/components/common/UrlInput.vue'
-import type { UVMirror } from '@/constants/uvMirrors'
-import { st } from '@/i18n'
-import { checkMirrorReachable } from '@/utils/electronMirrorCheck'
-import { ValidationState } from '@/utils/validationUtil'
-
-const FILE_URL_SCHEME = 'file://'
-const EXAMPLE_FILE_URL = '/C:/MyPythonInstallers/'
-const EXAMPLE_URL_FIRST_PART =
-  'https://github.com/astral-sh/python-build-standalone/releases/download'
-const EXAMPLE_URL_SECOND_PART =
-  '/20250902/cpython-3.12.11+20250902-x86_64-pc-windows-msvc-install_only.tar.gz'
-
-const { item } = defineProps<{
-  item: UVMirror
-}>()
-
-const emit = defineEmits<{
-  'state-change': [state: ValidationState]
-}>()
-
-const modelValue = defineModel<string>('modelValue', { required: true })
-const validationState = ref<ValidationState>(ValidationState.IDLE)
-const showDialog = ref(false)
-
-const normalizedSettingId = computed(() => {
-  return normalizeI18nKey(item.settingId)
-})
-
-const secondParagraph = computed(() =>
-  st(`settings.${normalizedSettingId.value}.urlDescription`, '')
-)
-
-onMounted(() => {
-  modelValue.value = item.mirror
-})
-
-watch(validationState, (newState) => {
-  emit('state-change', newState)
-
-  // Set fallback mirror if default mirror is invalid
-  if (
-    newState === ValidationState.INVALID &&
-    modelValue.value === item.mirror
-  ) {
-    modelValue.value = item.fallbackMirror
-  }
-})
-</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/desktopDialogs.ts

@@ -1,75 +0,0 @@
-export interface DialogAction {
-  readonly label: string
-  readonly action: 'openUrl' | 'close' | 'cancel'
-  readonly url?: string
-  readonly severity?: 'danger' | 'primary' | 'secondary' | 'warn'
-  readonly returnValue: string
-}
-
-interface DesktopDialog {
-  readonly title: string
-  readonly message: string
-  readonly buttons: DialogAction[]
-}
-
-export const DESKTOP_DIALOGS = {
-  /** Shown when a corrupt venv is detected. */
-  reinstallVenv: {
-    title: 'Reinstall ComfyUI (Fresh Start)?',
-    message: `Sorry, we can't launch ComfyUI because some installed packages aren't compatible.
-
-Click Reinstall to restore ComfyUI and get back up and running.
-
-Please note: if you've added custom nodes, you'll need to reinstall them after this process.`,
-    buttons: [
-      {
-        label: 'Learn More',
-        action: 'openUrl',
-        url: 'https://docs.comfy.org',
-        returnValue: 'openDocs'
-      },
-      {
-        label: 'Reinstall',
-        action: 'close',
-        severity: 'danger',
-        returnValue: 'resetVenv'
-      }
-    ]
-  },
-  /** A dialog that is shown when an invalid dialog ID is provided. */
-  invalidDialog: {
-    title: 'Invalid Dialog',
-    message: `Invalid dialog ID was provided.`,
-    buttons: [
-      {
-        label: 'Close',
-        action: 'cancel',
-        returnValue: 'cancel'
-      }
-    ]
-  }
-} as const satisfies { [K: string]: DesktopDialog }
-
-/** The ID of a desktop dialog. */
-type DesktopDialogId = keyof typeof DESKTOP_DIALOGS
-
-/**
- * Checks if {@link id} is a valid dialog ID.
- * @param id The string to check
- * @returns `true` if the ID is a valid dialog ID, otherwise `false`
- */
-function isDialogId(id: unknown): id is DesktopDialogId {
-  return typeof id === 'string' && id in DESKTOP_DIALOGS
-}
-
-/**
- * Gets the dialog with the given ID.
- * @param dialogId The ID of the dialog to get
- * @returns The dialog with the given ID
- */
-export function getDialog(
-  dialogId: string | string[]
-): DesktopDialog & { id: DesktopDialogId } {
-  const id = isDialogId(dialogId) ? dialogId : 'invalidDialog'
-  return { id, ...structuredClone(DESKTOP_DIALOGS[id]) }
-}

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

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

apps/desktop-ui/src/i18n.ts

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

apps/desktop-ui/src/main.ts

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

apps/desktop-ui/src/router.ts

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

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

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

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

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

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

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

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

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

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

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

apps/desktop-ui/src/views/DesktopDialogView.vue

@@ -1,70 +0,0 @@
-<template>
-  <div class="w-full h-full flex flex-col rounded-lg p-6 justify-between">
-    <h1 class="font-inter font-semibold text-xl m-0 italic">
-      {{ t(`desktopDialogs.${id}.title`, title) }}
-    </h1>
-    <p class="whitespace-pre-wrap">
-      {{ t(`desktopDialogs.${id}.message`, message) }}
-    </p>
-    <div class="flex w-full gap-2">
-      <Button
-        v-for="button in buttons"
-        :key="button.label"
-        class="rounded-lg first:mr-auto"
-        :label="
-          t(
-            `desktopDialogs.${id}.buttons.${normalizeI18nKey(button.label)}`,
-            button.label
-          )
-        "
-        :severity="button.severity ?? 'secondary'"
-        @click="handleButtonClick(button)"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { normalizeI18nKey } from '@comfyorg/shared-frontend-utils/formatUtil'
-import Button from 'primevue/button'
-import { useRoute } from 'vue-router'
-
-import { type DialogAction, getDialog } from '@/constants/desktopDialogs'
-import { t } from '@/i18n'
-import { electronAPI } from '@/utils/envUtil'
-
-const route = useRoute()
-const { id, title, message, buttons } = getDialog(route.params.dialogId)
-
-const handleButtonClick = async (button: DialogAction) => {
-  await electronAPI().Dialog.clickButton(button.returnValue)
-}
-</script>
-
-<style scoped>
-@reference '../assets/css/style.css';
-
-.p-button-secondary {
-  @apply text-white border-none bg-neutral-600;
-}
-
-.p-button-secondary:hover {
-  @apply bg-neutral-550;
-}
-
-.p-button-secondary:active {
-  @apply bg-neutral-500;
-}
-
-.p-button-danger {
-  @apply bg-coral-red-600;
-}
-
-.p-button-danger:hover {
-  @apply bg-coral-red-500;
-}
-
-.p-button-danger:active {
-  @apply bg-coral-red-400;
-}
-</style>

apps/desktop-ui/src/views/InstallView.stories.ts

@@ -1,417 +0,0 @@
-// eslint-disable-next-line storybook/no-renderer-packages
-import type { Meta, StoryObj } from '@storybook/vue3'
-import { nextTick, provide } from 'vue'
-import { createMemoryHistory, createRouter } from 'vue-router'
-
-import InstallView from './InstallView.vue'
-
-// Create a mock router for stories
-const createMockRouter = () =>
-  createRouter({
-    history: createMemoryHistory(),
-    routes: [
-      { path: '/', component: { template: '<div>Home</div>' } },
-      {
-        path: '/server-start',
-        component: { template: '<div>Server Start</div>' }
-      },
-      {
-        path: '/manual-configuration',
-        component: { template: '<div>Manual Configuration</div>' }
-      }
-    ]
-  })
-
-const meta: Meta<typeof InstallView> = {
-  title: 'Desktop/Views/InstallView',
-  component: InstallView,
-  parameters: {
-    layout: 'fullscreen',
-    backgrounds: {
-      default: 'dark',
-      values: [
-        { name: 'dark', value: '#0a0a0a' },
-        { name: 'neutral-900', value: '#171717' },
-        { name: 'neutral-950', value: '#0a0a0a' }
-      ]
-    }
-  },
-  decorators: [
-    (story) => {
-      // Create router for this story
-      const router = createMockRouter()
-
-      // Mock electron API
-      ;(window as any).electronAPI = {
-        getPlatform: () => 'darwin',
-        Config: {
-          getDetectedGpu: () => Promise.resolve('mps')
-        },
-        Events: {
-          trackEvent: (_eventName: string, _data?: any) => {}
-        },
-        installComfyUI: (_options: any) => {},
-        changeTheme: (_theme: any) => {},
-        getSystemPaths: () =>
-          Promise.resolve({
-            defaultInstallPath: '/Users/username/ComfyUI'
-          }),
-        validateInstallPath: () =>
-          Promise.resolve({
-            isValid: true,
-            exists: false,
-            canWrite: true,
-            freeSpace: 100000000000,
-            requiredSpace: 10000000000,
-            isNonDefaultDrive: false
-          }),
-        validateComfyUISource: () =>
-          Promise.resolve({
-            isValid: true
-          }),
-        showDirectoryPicker: () => Promise.resolve('/Users/username/ComfyUI')
-      }
-
-      return {
-        setup() {
-          // Provide router for all child components
-          provide('router', router)
-          return {
-            story
-          }
-        },
-        template: '<div style="width: 100vw; height: 100vh;"><story /></div>'
-      }
-    }
-  ]
-}
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-// Default story - start at GPU selection
-export const GpuSelection: Story = {
-  render: () => ({
-    components: { InstallView },
-    setup() {
-      // The component will automatically start at step 1
-      return {}
-    },
-    template: '<InstallView />'
-  })
-}
-
-// Story showing the install location step
-export const InstallLocation: Story = {
-  render: () => ({
-    components: { InstallView },
-    setup() {
-      return {}
-    },
-    async mounted() {
-      // Wait for component to be fully mounted
-      await nextTick()
-
-      // Select Apple Metal option to enable navigation
-      const hardwareOptions = this.$el.querySelectorAll(
-        '.p-selectbutton-option'
-      )
-      if (hardwareOptions.length > 0) {
-        hardwareOptions[0].click() // Click Apple Metal (first option)
-      }
-
-      await nextTick()
-
-      // Click Next to go to step 2
-      const buttons = Array.from(
-        this.$el.querySelectorAll('button')
-      ) as HTMLButtonElement[]
-      const nextBtn = buttons.find((btn) => btn.textContent?.includes('Next'))
-      if (nextBtn) {
-        nextBtn.click()
-      }
-    },
-    template: '<InstallView />'
-  })
-}
-
-// Story showing the migration step (currently empty)
-export const MigrationStep: Story = {
-  render: () => ({
-    components: { InstallView },
-    setup() {
-      return {}
-    },
-    async mounted() {
-      // Wait for component to be fully mounted
-      await nextTick()
-
-      // Select Apple Metal option to enable navigation
-      const hardwareOptions = this.$el.querySelectorAll(
-        '.p-selectbutton-option'
-      )
-      if (hardwareOptions.length > 0) {
-        hardwareOptions[0].click() // Click Apple Metal (first option)
-      }
-
-      await nextTick()
-
-      // Click Next to go to step 2
-      const buttons1 = Array.from(
-        this.$el.querySelectorAll('button')
-      ) as HTMLButtonElement[]
-      const nextBtn1 = buttons1.find((btn) => btn.textContent?.includes('Next'))
-      if (nextBtn1) {
-        nextBtn1.click()
-      }
-
-      await nextTick()
-
-      // Click Next again to go to step 3
-      const buttons2 = Array.from(
-        this.$el.querySelectorAll('button')
-      ) as HTMLButtonElement[]
-      const nextBtn2 = buttons2.find((btn) => btn.textContent?.includes('Next'))
-      if (nextBtn2) {
-        nextBtn2.click()
-      }
-    },
-    template: '<InstallView />'
-  })
-}
-
-// Story showing the desktop settings configuration
-export const DesktopSettings: Story = {
-  render: () => ({
-    components: { InstallView },
-    setup() {
-      return {}
-    },
-    async mounted() {
-      // Wait for component to be fully mounted
-      await nextTick()
-
-      // Select Apple Metal option to enable navigation
-      const hardwareOptions = this.$el.querySelectorAll(
-        '.p-selectbutton-option'
-      )
-      if (hardwareOptions.length > 0) {
-        hardwareOptions[0].click() // Click Apple Metal (first option)
-      }
-
-      await nextTick()
-
-      // Click Next to go to step 2
-      const buttons1 = Array.from(
-        this.$el.querySelectorAll('button')
-      ) as HTMLButtonElement[]
-      const nextBtn1 = buttons1.find((btn) => btn.textContent?.includes('Next'))
-      if (nextBtn1) {
-        nextBtn1.click()
-      }
-
-      await nextTick()
-
-      // Click Next again to go to step 3
-      const buttons2 = Array.from(
-        this.$el.querySelectorAll('button')
-      ) as HTMLButtonElement[]
-      const nextBtn2 = buttons2.find((btn) => btn.textContent?.includes('Next'))
-      if (nextBtn2) {
-        nextBtn2.click()
-      }
-
-      await nextTick()
-
-      // Click Next again to go to step 4
-      const buttons3 = Array.from(
-        this.$el.querySelectorAll('button')
-      ) as HTMLButtonElement[]
-      const nextBtn3 = buttons3.find((btn) => btn.textContent?.includes('Next'))
-      if (nextBtn3) {
-        nextBtn3.click()
-      }
-    },
-    template: '<InstallView />'
-  })
-}
-
-// Story with Windows platform (no Apple Metal option)
-export const WindowsPlatform: Story = {
-  render: () => {
-    // Override the platform to Windows
-    ;(window as any).electronAPI.getPlatform = () => 'win32'
-    ;(window as any).electronAPI.Config.getDetectedGpu = () =>
-      Promise.resolve('nvidia')
-
-    return {
-      components: { InstallView },
-      setup() {
-        return {}
-      },
-      template: '<InstallView />'
-    }
-  }
-}
-
-// Story with macOS platform (Apple Metal option)
-export const MacOSPlatform: Story = {
-  name: 'macOS Platform',
-  render: () => {
-    // Override the platform to macOS
-    ;(window as any).electronAPI.getPlatform = () => 'darwin'
-    ;(window as any).electronAPI.Config.getDetectedGpu = () =>
-      Promise.resolve('mps')
-
-    return {
-      components: { InstallView },
-      setup() {
-        return {}
-      },
-      template: '<InstallView />'
-    }
-  }
-}
-
-// Story with CPU selected
-export const CpuSelected: Story = {
-  render: () => ({
-    components: { InstallView },
-    setup() {
-      return {}
-    },
-    async mounted() {
-      // Wait for component to be fully mounted
-      await nextTick()
-
-      // Find and click the CPU hardware option
-      const hardwareButtons = this.$el.querySelectorAll('.hardware-option')
-      // CPU is the button with "CPU" text
-      for (const button of hardwareButtons) {
-        if (button.textContent?.includes('CPU')) {
-          button.click()
-          break
-        }
-      }
-    },
-    template: '<InstallView />'
-  })
-}
-
-// Story with manual install selected
-export const ManualInstall: Story = {
-  render: () => ({
-    components: { InstallView },
-    setup() {
-      return {}
-    },
-    async mounted() {
-      // Wait for component to be fully mounted
-      await nextTick()
-
-      // Find and click the Manual Install hardware option
-      const hardwareButtons = this.$el.querySelectorAll('.hardware-option')
-      // Manual Install is the button with "Manual Install" text
-      for (const button of hardwareButtons) {
-        if (button.textContent?.includes('Manual Install')) {
-          button.click()
-          break
-        }
-      }
-    },
-    template: '<InstallView />'
-  })
-}
-
-// Story with error state (invalid install path)
-export const ErrorState: Story = {
-  render: () => {
-    // Override validation to return an error
-    ;(window as any).electronAPI.validateInstallPath = () =>
-      Promise.resolve({
-        isValid: false,
-        exists: false,
-        canWrite: false,
-        freeSpace: 100000000000,
-        requiredSpace: 10000000000,
-        isNonDefaultDrive: false,
-        error: 'Story mock: Example error state'
-      })
-
-    return {
-      components: { InstallView },
-      setup() {
-        return {}
-      },
-      async mounted() {
-        // Wait for component to be fully mounted
-        await nextTick()
-
-        // Select Apple Metal option to enable navigation
-        const hardwareOptions = this.$el.querySelectorAll(
-          '.p-selectbutton-option'
-        )
-        if (hardwareOptions.length > 0) {
-          hardwareOptions[0].click() // Click Apple Metal (first option)
-        }
-
-        await nextTick()
-
-        // Click Next to go to step 2 where error will be shown
-        const buttons = Array.from(
-          this.$el.querySelectorAll('button')
-        ) as HTMLButtonElement[]
-        const nextBtn = buttons.find((btn) => btn.textContent?.includes('Next'))
-        if (nextBtn) {
-          nextBtn.click()
-        }
-      },
-      template: '<InstallView />'
-    }
-  }
-}
-
-// Story with warning state (non-default drive)
-export const WarningState: Story = {
-  render: () => {
-    // Override validation to return a warning about non-default drive
-    ;(window as any).electronAPI.validateInstallPath = () =>
-      Promise.resolve({
-        isValid: true,
-        exists: false,
-        canWrite: true,
-        freeSpace: 500_000_000_000,
-        requiredSpace: 10_000_000_000,
-        isNonDefaultDrive: true
-      })
-
-    return {
-      components: { InstallView },
-      setup() {
-        return {}
-      },
-      async mounted() {
-        // Wait for component to be fully mounted
-        await nextTick()
-
-        // Select Apple Metal option to enable navigation
-        const hardwareOptions = this.$el.querySelectorAll('.hardware-option')
-        if (hardwareOptions.length > 0) {
-          hardwareOptions[0].click() // Click Apple Metal (first option)
-        }
-
-        await nextTick()
-
-        // Click Next to go to step 2 where warning will be shown
-        const buttons = Array.from(
-          this.$el.querySelectorAll('button')
-        ) as HTMLButtonElement[]
-        const nextBtn = buttons.find((btn) => btn.textContent?.includes('Next'))
-        if (nextBtn) {
-          nextBtn.click()
-        }
-      },
-      template: '<InstallView />'
-    }
-  }
-}

apps/desktop-ui/src/views/InstallView.vue

@@ -1,210 +0,0 @@
-<template>
-  <BaseViewTemplate dark>
-    <!-- Fixed height container with flexbox layout for proper content management -->
-    <div class="w-full h-full flex flex-col">
-      <Stepper
-        v-model:value="currentStep"
-        class="flex flex-col h-full"
-        @update:value="handleStepChange"
-      >
-        <!-- Main content area that grows to fill available space -->
-        <StepPanels
-          class="flex-1 overflow-auto"
-          :style="{ scrollbarGutter: 'stable' }"
-        >
-          <StepPanel value="1" class="flex">
-            <GpuPicker v-model:device="device" />
-          </StepPanel>
-          <StepPanel value="2">
-            <InstallLocationPicker
-              v-model:install-path="installPath"
-              v-model:path-error="pathError"
-              v-model:migration-source-path="migrationSourcePath"
-              v-model:migration-item-ids="migrationItemIds"
-              v-model:python-mirror="pythonMirror"
-              v-model:pypi-mirror="pypiMirror"
-              v-model:torch-mirror="torchMirror"
-              :device="device"
-            />
-          </StepPanel>
-          <StepPanel value="3">
-            <DesktopSettingsConfiguration
-              v-model:auto-update="autoUpdate"
-              v-model:allow-metrics="allowMetrics"
-            />
-          </StepPanel>
-        </StepPanels>
-
-        <!-- Install footer with navigation -->
-        <InstallFooter
-          class="w-full max-w-2xl my-6 mx-auto"
-          :current-step
-          :can-proceed
-          :disable-location-step="noGpu"
-          :disable-migration-step="noGpu || hasError || highestStep < 2"
-          :disable-settings-step="noGpu || hasError || highestStep < 3"
-          @previous="goToPreviousStep"
-          @next="goToNextStep"
-          @install="install"
-        />
-      </Stepper>
-    </div>
-  </BaseViewTemplate>
-</template>
-
-<script setup lang="ts">
-import type {
-  InstallOptions,
-  TorchDeviceType
-} from '@comfyorg/comfyui-electron-types'
-import StepPanel from 'primevue/steppanel'
-import StepPanels from 'primevue/steppanels'
-import Stepper from 'primevue/stepper'
-import { computed, onMounted, ref, toRaw } from 'vue'
-import { useRouter } from 'vue-router'
-
-import DesktopSettingsConfiguration from '@/components/install/DesktopSettingsConfiguration.vue'
-import GpuPicker from '@/components/install/GpuPicker.vue'
-import InstallFooter from '@/components/install/InstallFooter.vue'
-import InstallLocationPicker from '@/components/install/InstallLocationPicker.vue'
-import { electronAPI } from '@/utils/envUtil'
-import BaseViewTemplate from '@/views/templates/BaseViewTemplate.vue'
-
-const device = ref<TorchDeviceType | null>(null)
-
-const installPath = ref('')
-const pathError = ref('')
-
-const migrationSourcePath = ref('')
-const migrationItemIds = ref<string[]>([])
-
-const autoUpdate = ref(true)
-const allowMetrics = ref(true)
-const pythonMirror = ref('')
-const pypiMirror = ref('')
-const torchMirror = ref('')
-
-/** Current step in the stepper */
-const currentStep = ref('1')
-
-/** Forces each install step to be visited at least once. */
-const highestStep = ref(0)
-
-const handleStepChange = (value: string | number) => {
-  setHighestStep(value)
-
-  electronAPI().Events.trackEvent('install_stepper_change', {
-    step: value
-  })
-}
-
-const setHighestStep = (value: string | number) => {
-  const int = typeof value === 'number' ? value : parseInt(value, 10)
-  if (!isNaN(int) && int > highestStep.value) highestStep.value = int
-}
-
-const hasError = computed(() => pathError.value !== '')
-const noGpu = computed(() => typeof device.value !== 'string')
-
-// Computed property to determine if user can proceed to next step
-const regex = /^Insufficient space - minimum free space: \d+ GB$/
-
-const canProceed = computed(() => {
-  switch (currentStep.value) {
-    case '1':
-      return typeof device.value === 'string'
-    case '2':
-      return pathError.value === '' || regex.test(pathError.value)
-    case '3':
-      return !hasError.value
-    default:
-      return false
-  }
-})
-
-// Navigation methods
-const goToNextStep = () => {
-  const nextStep = (parseInt(currentStep.value) + 1).toString()
-  currentStep.value = nextStep
-  setHighestStep(nextStep)
-  electronAPI().Events.trackEvent('install_stepper_change', {
-    step: nextStep
-  })
-}
-
-const goToPreviousStep = () => {
-  const prevStep = (parseInt(currentStep.value) - 1).toString()
-  currentStep.value = prevStep
-  electronAPI().Events.trackEvent('install_stepper_change', {
-    step: prevStep
-  })
-}
-
-const electron = electronAPI()
-const router = useRouter()
-const install = async () => {
-  const options: InstallOptions = {
-    installPath: installPath.value,
-    autoUpdate: autoUpdate.value,
-    allowMetrics: allowMetrics.value,
-    migrationSourcePath: migrationSourcePath.value,
-    migrationItemIds: toRaw(migrationItemIds.value),
-    pythonMirror: pythonMirror.value,
-    pypiMirror: pypiMirror.value,
-    torchMirror: torchMirror.value,
-    // @ts-expect-error fixme ts strict error
-    device: device.value
-  }
-  electron.installComfyUI(options)
-
-  const nextPage =
-    options.device === 'unsupported' ? '/manual-configuration' : '/server-start'
-  await router.push(nextPage)
-}
-
-onMounted(async () => {
-  if (!electron) return
-
-  const detectedGpu = await electron.Config.getDetectedGpu()
-  if (detectedGpu === 'mps' || detectedGpu === 'nvidia') {
-    device.value = detectedGpu
-  }
-
-  electronAPI().Events.trackEvent('install_stepper_change', {
-    step: currentStep.value,
-    gpu: detectedGpu
-  })
-})
-</script>
-
-<style scoped>
-@reference '../assets/css/style.css';
-
-:deep(.p-steppanel) {
-  @apply mt-8 flex justify-center bg-transparent;
-}
-
-/* Remove default padding/margin from StepPanels to make scrollbar flush */
-:deep(.p-steppanels) {
-  @apply p-0 m-0;
-}
-
-/* Ensure StepPanel content container has no top/bottom padding */
-:deep(.p-steppanel-content) {
-  @apply p-0;
-}
-
-/* Custom overlay scrollbar for WebKit browsers (Electron, Chrome) */
-:deep(.p-steppanels::-webkit-scrollbar) {
-  @apply w-4;
-}
-
-:deep(.p-steppanels::-webkit-scrollbar-track) {
-  @apply bg-transparent;
-}
-
-:deep(.p-steppanels::-webkit-scrollbar-thumb) {
-  @apply bg-white/20 rounded-lg border-[4px] border-transparent;
-  background-clip: content-box;
-}
-</style>

apps/desktop-ui/src/views/ServerStartView.vue

@@ -1,242 +0,0 @@
-<template>
-  <BaseViewTemplate dark>
-    <div class="relative min-h-screen">
-      <!-- Terminal Background Layer (always visible during loading) -->
-      <div v-if="!isError" class="fixed inset-0 overflow-hidden z-0">
-        <div class="h-full w-full">
-          <BaseTerminal @created="terminalCreated" />
-        </div>
-      </div>
-
-      <!-- Semi-transparent overlay -->
-      <div v-if="!isError" class="fixed inset-0 bg-neutral-900/80 z-5"></div>
-
-      <!-- Smooth radial gradient overlay -->
-      <div
-        v-if="!isError"
-        class="fixed inset-0 z-8"
-        style="
-          background: radial-gradient(
-            ellipse 800px 600px at center,
-            rgb(23 23 23 / 0.95) 0%,
-            rgb(23 23 23 / 0.93) 10%,
-            rgb(23 23 23 / 0.9) 20%,
-            rgb(23 23 23 / 0.85) 30%,
-            rgb(23 23 23 / 0.75) 40%,
-            rgb(23 23 23 / 0.6) 50%,
-            rgb(23 23 23 / 0.4) 60%,
-            rgb(23 23 23 / 0.2) 70%,
-            rgb(23 23 23 / 0.1) 80%,
-            rgb(23 23 23 / 0.05) 90%,
-            transparent 100%
-          );
-        "
-      ></div>
-
-      <div class="relative z-10">
-        <!-- Main startup display using StartupDisplay component -->
-        <StartupDisplay
-          :title="displayTitle"
-          :status-text="displayStatusText"
-          :progress-percentage="installStageProgress"
-          :hide-progress="isError"
-        />
-
-        <!-- Error Section (positioned at bottom) -->
-        <div
-          v-if="isError"
-          class="absolute bottom-20 left-0 right-0 flex flex-col items-center gap-4"
-        >
-          <div class="flex gap-4 justify-center">
-            <Button
-              icon="pi pi-flag"
-              :label="$t('serverStart.reportIssue')"
-              severity="secondary"
-              @click="reportIssue"
-            />
-            <Button
-              icon="pi pi-file"
-              :label="$t('serverStart.openLogs')"
-              severity="secondary"
-              @click="openLogs"
-            />
-            <Button
-              icon="pi pi-wrench"
-              :label="$t('serverStart.troubleshoot')"
-              @click="troubleshoot"
-            />
-          </div>
-        </div>
-
-        <!-- Terminal Output (positioned at bottom when manually toggled in error state) -->
-        <div
-          v-if="terminalVisible && isError"
-          class="absolute bottom-4 left-4 right-4 max-w-4xl mx-auto z-10"
-        >
-          <div
-            class="bg-neutral-900/95 rounded-lg p-4 border border-neutral-700 h-[300px]"
-          >
-            <BaseTerminal @created="terminalCreated" />
-          </div>
-        </div>
-      </div>
-    </div>
-  </BaseViewTemplate>
-</template>
-
-<script setup lang="ts">
-import {
-  InstallStage,
-  type InstallStageInfo,
-  type InstallStageName,
-  ProgressStatus
-} from '@comfyorg/comfyui-electron-types'
-import type { Terminal } 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 BaseTerminal from '@/components/bottomPanel/tabs/terminal/BaseTerminal.vue'
-import StartupDisplay from '@/components/common/StartupDisplay.vue'
-import type { useTerminal } from '@/composables/bottomPanelTabs/useTerminal'
-import { electronAPI } from '@/utils/envUtil'
-import BaseViewTemplate from '@/views/templates/BaseViewTemplate.vue'
-
-const { t } = useI18n()
-const electron = electronAPI()
-
-const status = ref<ProgressStatus>(ProgressStatus.INITIAL_STATE)
-const electronVersion = ref<string>('')
-const terminalVisible = ref(false)
-
-const installStage = ref<InstallStageName | null>(null)
-const installStageMessage = ref<string>('')
-const installStageProgress = ref<number | undefined>(undefined)
-
-let xterm: Terminal | undefined
-
-/**
- * Handles installation stage updates from the desktop
- */
-const updateInstallStage = (stageInfo: InstallStageInfo) => {
-  console.warn('[InstallStage.onUpdate] Received:', {
-    stage: stageInfo.stage,
-    progress: stageInfo.progress,
-    message: stageInfo.message,
-    error: stageInfo.error,
-    timestamp: stageInfo.timestamp,
-    fullInfo: stageInfo
-  })
-
-  installStage.value = stageInfo.stage
-  installStageMessage.value = stageInfo.message || ''
-  installStageProgress.value = stageInfo.progress
-}
-
-const currentStatusLabel = computed(() => {
-  // Use the message from the Electron API if available
-  if (installStageMessage.value) {
-    return installStageMessage.value
-  }
-  return t(`serverStart.process.${status.value}`)
-})
-
-const isError = computed(
-  () =>
-    status.value === ProgressStatus.ERROR ||
-    installStage.value === InstallStage.ERROR
-)
-
-const isInstallationStage = computed(() => {
-  const installationStages: InstallStageName[] = [
-    InstallStage.WELCOME_SCREEN,
-    InstallStage.INSTALL_OPTIONS_SELECTION,
-    InstallStage.CREATING_DIRECTORIES,
-    InstallStage.INITIALIZING_CONFIG,
-    InstallStage.PYTHON_ENVIRONMENT_SETUP,
-    InstallStage.INSTALLING_REQUIREMENTS,
-    InstallStage.INSTALLING_PYTORCH,
-    InstallStage.INSTALLING_COMFYUI_REQUIREMENTS,
-    InstallStage.INSTALLING_MANAGER_REQUIREMENTS,
-    InstallStage.MIGRATING_CUSTOM_NODES
-  ]
-  return (
-    installStage.value !== null &&
-    installationStages.includes(installStage.value)
-  )
-})
-
-const displayTitle = computed(() => {
-  if (isError.value) {
-    return t('serverStart.errorMessage')
-  }
-  if (isInstallationStage.value) {
-    return t('serverStart.installation.title')
-  }
-  return t('serverStart.title')
-})
-
-const displayStatusText = computed(() => {
-  if (isError.value && electronVersion.value) {
-    return `v${electronVersion.value}`
-  }
-  return currentStatusLabel.value
-})
-
-const updateProgress = ({ status: newStatus }: { status: ProgressStatus }) => {
-  status.value = newStatus
-
-  // Make critical error screen more obvious.
-  if (newStatus === ProgressStatus.ERROR) terminalVisible.value = false
-}
-
-const terminalCreated = (
-  { terminal, useAutoSize }: ReturnType<typeof useTerminal>,
-  root: Ref<HTMLElement | undefined>
-) => {
-  xterm = terminal
-
-  useAutoSize({ root, autoRows: true, autoCols: true })
-  electron.onLogMessage((message: string) => {
-    terminal.write(message)
-  })
-
-  terminal.options.cursorBlink = false
-  terminal.options.disableStdin = true
-  terminal.options.cursorInactiveStyle = 'block'
-}
-
-const troubleshoot = () => electron.startTroubleshooting()
-const reportIssue = () => {
-  window.open('https://forum.comfy.org/c/v1-feedback/', '_blank')
-}
-const openLogs = () => electron.openLogsFolder()
-
-let cleanupInstallStageListener: (() => void) | undefined
-
-onMounted(async () => {
-  electron.sendReady()
-  electron.onProgressUpdate(updateProgress)
-  cleanupInstallStageListener =
-    electron.InstallStage.onUpdate(updateInstallStage)
-
-  const stageInfo = await electron.InstallStage.getCurrent()
-  updateInstallStage(stageInfo)
-  electronVersion.value = await electron.getElectronVersion()
-})
-
-onUnmounted(() => {
-  xterm?.dispose()
-  cleanupInstallStageListener?.()
-})
-</script>
-
-<style scoped>
-@reference '../assets/css/style.css';
-
-/* Hide the xterm scrollbar completely */
-:deep(.p-terminal) .xterm-viewport {
-  overflow: hidden !important;
-}
-</style>

apps/desktop-ui/src/views/WelcomeView.vue

@@ -1,39 +0,0 @@
-<template>
-  <BaseViewTemplate dark>
-    <div class="flex items-center justify-center min-h-screen">
-      <div class="grid grid-rows-2 gap-8">
-        <!-- Top container: Logo -->
-        <div class="flex items-end justify-center">
-          <img
-            src="/assets/images/comfy-brand-mark.svg"
-            :alt="$t('g.logoAlt')"
-            class="w-60"
-          />
-        </div>
-        <!-- Bottom container: Title and button -->
-        <div class="flex flex-col items-center justify-center gap-4">
-          <Button
-            :label="$t('welcome.getStarted')"
-            class="px-8 mt-4 bg-brand-yellow hover:bg-brand-yellow/90 border-0 rounded-lg transition-colors"
-            :pt="{
-              label: { class: 'font-inter text-neutral-900 font-black' }
-            }"
-            @click="navigateTo('/install')"
-          />
-        </div>
-      </div>
-    </div>
-  </BaseViewTemplate>
-</template>
-
-<script setup lang="ts">
-import Button from 'primevue/button'
-import { useRouter } from 'vue-router'
-
-import BaseViewTemplate from '@/views/templates/BaseViewTemplate.vue'
-
-const router = useRouter()
-const navigateTo = async (path: string) => {
-  await router.push(path)
-}
-</script>

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>