feat: improve multi-package selection handling (#5116)

* feat: improve multi-package selection handling

- Check each package individually for conflicts in install dialog
- Show only packages with actual conflicts in warning dialog
- Hide action buttons for mixed installed/uninstalled selections
- Display dynamic status based on selected packages priority
- Deduplicate conflict information across multiple packages
- Fix PackIcon blur background opacity

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

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

* refactor: extract multi-package logic into reusable composables

- Create usePackageSelection composable for installation state management
- Create usePackageStatus composable for status priority logic
- Refactor InfoPanelMultiItem to use new composables
- Reduce component complexity by separating business logic
- Improve code reusability across components

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

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

* fix: directory modified

* test: add comprehensive tests for multi-package selection composables

- Add tests for usePacksSelection composable
  - Test installation status filtering
  - Test selection state determination (all/none/mixed)
  - Test dynamic status changes

- Add tests for usePacksStatus composable
  - Test import failure detection
  - Test status priority handling
  - Test integration with conflict detection store

- Fix existing test mocking issues
  - Update es-toolkit/compat mock to use async import
  - Add Pinia setup for store-dependent tests
  - Update vue-i18n mock to preserve all exports

---------

Co-authored-by: Claude <noreply@anthropic.com>

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

@@ -128,25 +128,7 @@ echo "Last stable release: $LAST_STABLE"
 
 ### Step 4: Analyze Dependency Updates
 
-1. **Use pnpm's built-in dependency analysis:**
-   ```bash
-   # Get outdated dependencies with pnpm
-   pnpm outdated --format table > outdated-deps-${NEW_VERSION}.txt
-   
-   # Check for license compliance
-   pnpm licenses ls --json > licenses-${NEW_VERSION}.json
-   
-   # Analyze why specific dependencies exist
-   echo "Dependency analysis:" > dep-analysis-${NEW_VERSION}.md
-   MAJOR_DEPS=("vue" "vite" "@vitejs/plugin-vue" "typescript" "pinia")
-   for dep in "${MAJOR_DEPS[@]}"; do
-     echo -e "\n## $dep\n\`\`\`" >> dep-analysis-${NEW_VERSION}.md
-     pnpm why "$dep" >> dep-analysis-${NEW_VERSION}.md || echo "Not found" >> dep-analysis-${NEW_VERSION}.md
-     echo "\`\`\`" >> dep-analysis-${NEW_VERSION}.md
-   done
-   ```
-
-2. **Check for significant dependency updates:**
+1. **Check significant dependency updates:**
    ```bash
    # Extract all dependency changes for major version bumps
    OTHER_DEP_CHANGES=""
@@ -218,48 +200,22 @@ echo "Last stable release: $LAST_STABLE"
    PR data: [contents of prs-${NEW_VERSION}.json]
    ```
 
-3. **Generate GTM notification using this EXACT Slack-compatible format:**
+3. **Generate GTM notification:**
    ```bash
-   # Only create file if GTM-worthy features exist:
-   if [ "$GTM_FEATURES_FOUND" = "true" ]; then
-     cat > gtm-summary-${NEW_VERSION}.md << 'EOF'
-   *GTM Summary: ComfyUI Frontend v${NEW_VERSION}*
-
-   _Disclaimer: the below is AI-generated_
-
-   1. *[Feature Title]* (#[PR_NUMBER])
-       * *Author:* @[username]
-       * *Demo:* [Media Link or "No demo available"]
-       * *Why users should care:* [One compelling sentence]
-       * *Key Features:*
-           * [Feature detail 1]
-           * [Feature detail 2]
-
-   2. *[Feature Title]* (#[PR_NUMBER])
-       * *Author:* @[username]
-       * *Demo:* [Media Link]
-       * *Why users should care:* [One compelling sentence]
-       * *Key Features:*
-           * [Feature detail 1]
-           * [Feature detail 2]
-   EOF
+   # Save to gtm-summary-${NEW_VERSION}.md based on analysis
+   # If GTM-worthy features exist, include them with testing instructions
+   # If not, note that this is a maintenance/bug fix release
+   
+   # Check if notification is needed
+   if grep -q "No marketing-worthy features" gtm-summary-${NEW_VERSION}.md; then
+     echo "✅ No GTM notification needed for this release"
+     echo "📄 Summary saved to: gtm-summary-${NEW_VERSION}.md"
+   else
      echo "📋 GTM summary saved to: gtm-summary-${NEW_VERSION}.md"
      echo "📤 Share this file in #gtm channel to notify the team"
-   else
-     echo "✅ No GTM notification needed for this release"
-     echo "📄 No gtm-summary file created - no marketing-worthy features"
    fi
    ```
 
-   **CRITICAL Formatting Requirements:**
-   - Use single asterisk (*) for emphasis, NOT double (**)
-   - Use underscore (_) for italics
-   - Use 4 spaces for indentation (not tabs)
-   - Convert author names to @username format (e.g., "John Smith" → "@john")
-   - No section headers (#), no code language specifications
-   - Always include "Disclaimer: the below is AI-generated"
-   - Keep content minimal - no testing instructions, additional sections, etc.
-
 ### Step 6: Version Preview
 
 **Version Preview:**
@@ -272,42 +228,37 @@ echo "Last stable release: $LAST_STABLE"
 
 ### Step 7: Security and Dependency Audit
 
-1. Run pnpm security audit:
+1. Run security audit:
    ```bash
-   pnpm audit --audit-level moderate
-   pnpm licenses ls --summary
+   npm audit --audit-level moderate
    ```
 2. Check for known vulnerabilities in dependencies
-3. Run comprehensive dependency health check:
-   ```bash
-   pnpm doctor
-   ```
-4. Scan for hardcoded secrets or credentials:
+3. Scan for hardcoded secrets or credentials:
    ```bash
    git log -p ${BASE_TAG}..HEAD | grep -iE "(password|key|secret|token)" || echo "No sensitive data found"
    ```
-5. Verify no sensitive data in recent commits
-6. **SECURITY REVIEW**: Address any critical findings before proceeding?
+4. Verify no sensitive data in recent commits
+5. **SECURITY REVIEW**: Address any critical findings before proceeding?
 
 ### Step 8: Pre-Release Testing
 
 1. Run complete test suite:
    ```bash
-   pnpm test:unit
-   pnpm test:component
+   npm run test:unit
+   npm run test:component
    ```
 2. Run type checking:
    ```bash
-   pnpm typecheck
+   npm run typecheck
    ```
 3. Run linting (may have issues with missing packages):
    ```bash
-   pnpm lint || echo "Lint issues - verify if critical"
+   npm run lint || echo "Lint issues - verify if critical"
    ```
 4. Test build process:
    ```bash
-   pnpm build
-   pnpm build:types
+   npm run build
+   npm run build:types
    ```
 5. **QUALITY GATE**: All tests and builds passing?
 
@@ -537,7 +488,7 @@ echo "Workflow triggered. Waiting for PR creation..."
    ```bash
    # Check npm availability
    for i in {1..10}; do
-     if pnpm view @comfyorg/comfyui-frontend-types@${NEW_VERSION} version >/dev/null 2>&1; then
+     if npm view @comfyorg/comfyui-frontend-types@${NEW_VERSION} version >/dev/null 2>&1; then
        echo "✅ npm package available"
        break
      fi

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

@@ -80,7 +80,7 @@ For each commit:
    - **CONFIRMATION REQUIRED**: Conflicts resolved correctly?
 3. After successful cherry-pick:
    - Show the changes: `git show HEAD`
-   - Run validation: `pnpm typecheck && pnpm lint`
+   - Run validation: `npm run typecheck && npm run lint`
 4. **CONFIRMATION REQUIRED**: Cherry-pick successful and valid?
 
 ### Step 6: Create PR to Core Branch
@@ -197,7 +197,7 @@ For each commit:
 5. Track progress:
    - GitHub release draft/publication
    - PyPI upload
-   - pnpm types publication
+   - npm types publication
 
 ### Step 12: Post-Release Verification
 
@@ -211,7 +211,7 @@ For each commit:
    ```
 3. Verify npm package:
    ```bash
-   pnpm view @comfyorg/comfyui-frontend-types@1.23.5
+   npm view @comfyorg/comfyui-frontend-types@1.23.5
    ```
 4. Generate release summary with:
    - Version released

.claude/commands/setup_repo.md

@@ -1,158 +0,0 @@
-# Setup Repository
-
-Bootstrap the ComfyUI Frontend monorepo with all necessary dependencies and verification checks.
-
-## Overview
-
-This command will:
-1. Install pnpm package manager (if not present)
-2. Install all project dependencies
-3. Verify the project builds successfully
-4. Run unit tests to ensure functionality
-5. Start development server to verify frontend boots correctly
-
-## Prerequisites Check
-
-First, let's verify the environment:
-
-```bash
-# Check Node.js version (should be >= 24)
-node --version
-
-# Check if we're in a git repository
-git status
-```
-
-## Step 1: Install pnpm
-
-```bash
-# Check if pnpm is already installed
-pnpm --version 2>/dev/null || {
-  echo "Installing pnpm..."
-  npm install -g pnpm
-}
-
-# Verify pnpm installation
-pnpm --version
-```
-
-## Step 2: Install Dependencies
-
-```bash
-# Install all dependencies using pnpm
-echo "Installing project dependencies..."
-pnpm install
-
-# Verify node_modules exists and has packages
-ls -la node_modules | head -5
-```
-
-## Step 3: Verify Build
-
-```bash
-# Run TypeScript type checking
-echo "Running TypeScript checks..."
-pnpm typecheck
-
-# Build the project
-echo "Building project..."
-pnpm build
-
-# Verify dist folder was created
-ls -la dist/
-```
-
-## Step 4: Run Unit Tests
-
-```bash
-# Run unit tests
-echo "Running unit tests..."
-pnpm test:unit
-
-# If tests fail, show the output and stop
-if [ $? -ne 0 ]; then
-  echo "❌ Unit tests failed. Please fix failing tests before continuing."
-  exit 1
-fi
-
-echo "✅ Unit tests passed successfully"
-```
-
-## Step 5: Verify Development Server
-
-```bash
-# Start development server in background
-echo "Starting development server..."
-pnpm dev &
-SERVER_PID=$!
-
-# Wait for server to start (check for port 5173 or similar)
-echo "Waiting for server to start..."
-sleep 10
-
-# Check if server is running
-if curl -s http://localhost:5173 > /dev/null 2>&1; then
-  echo "✅ Development server started successfully at http://localhost:5173"
-  
-  # Kill the background server
-  kill $SERVER_PID
-  wait $SERVER_PID 2>/dev/null
-else
-  echo "❌ Development server failed to start or is not accessible"
-  kill $SERVER_PID 2>/dev/null
-  wait $SERVER_PID 2>/dev/null
-  exit 1
-fi
-```
-
-## Step 6: Final Verification
-
-```bash
-# Run linting to ensure code quality
-echo "Running linter..."
-pnpm lint
-
-# Show project status
-echo ""
-echo "🎉 Repository setup complete!"
-echo ""
-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"
-echo ""
-echo "Next steps:"
-echo "1. Run 'pnpm dev' to start developing"
-echo "2. Open http://localhost:5173 in your browser"
-echo "3. Check README.md for additional setup instructions"
-```
-
-## Troubleshooting
-
-If any step fails:
-
-1. **pnpm installation fails**: Try using `curl -fsSL https://get.pnpm.io/install.sh | sh -`
-2. **Dependencies fail to install**: Try clearing cache with `pnpm store prune` and retry
-3. **Build fails**: Check for TypeScript errors and fix them first
-4. **Tests fail**: Review test output and fix failing tests
-5. **Dev server fails**: Check if port 5173 is already in use
-
-## Manual Verification Steps
-
-After running the setup, manually verify:
-
-1. **Dependencies installed**: `ls node_modules | wc -l` should show many packages
-2. **Build artifacts**: `ls dist/` should show built files
-3. **Server accessible**: Open http://localhost:5173 in browser
-4. **Hot reload works**: Edit a file and see changes reflect
-
-## Environment Requirements
-
-- Node.js >= 24
-- Git repository
-- Internet connection for package downloads
-- Available ports (typically 5173 for dev server)

.claude/commands/verify-visually.md

@@ -5,7 +5,7 @@ Follow these steps systematically to verify our changes:
 
 1. **Server Setup**
    - Check if the dev server is running on port 5173 using browser navigation or port checking
-   - If not running, start it with `pnpm dev` from the root directory
+   - If not running, start it with `npm run dev` from the root directory
    - If the server fails to start, provide detailed troubleshooting steps by reading package.json and README.md for accurate instructions
    - Wait for the server to be fully ready before proceeding
 

.gitattributes

@@ -2,14 +2,9 @@
 * text=auto
 
 # Force TS to LF to make the unixy scripts not break on Windows
-*.cjs text eol=lf
-*.js text eol=lf
-*.json text eol=lf
-*.mjs text eol=lf
-*.mts text eol=lf
 *.ts text eol=lf
 *.vue text eol=lf
-*.yaml text eol=lf
+*.js text eol=lf
 
 # Generated files
 src/types/comfyRegistryTypes.ts linguist-generated=true

.github/workflows/chromatic.yaml

@@ -3,48 +3,54 @@ name: 'Chromatic'
 # - [Automate Chromatic with GitHub Actions • Chromatic docs]( https://www.chromatic.com/docs/github-actions/ )
 
 on:
-  workflow_dispatch: # Allow manual triggering
+  push:
+    branches: [main]
   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-')
+    permissions:
+      pull-requests: write
+      issues: write
     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'
+          cache: 'npm'
 
+      - name: Get current time
+        id: current-time
+        run: echo "time=$(date -u '+%m/%d/%Y, %I:%M:%S %p')" >> $GITHUB_OUTPUT
 
-      - name: Cache tool outputs
-        uses: actions/cache@v4
+      - name: Comment PR - Build Started
+        if: github.event_name == 'pull_request'
+        uses: edumserrano/find-create-or-update-comment@v3
         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 }}-
+          issue-number: ${{ github.event.pull_request.number }}
+          body-includes: '<!-- STORYBOOK_BUILD_STATUS -->'
+          comment-author: 'github-actions[bot]'
+          edit-mode: append
+          body: |
+            <!-- STORYBOOK_BUILD_STATUS -->
+            ## 🎨 Storybook Build Status
+
+            🔄 **Building Storybook and running visual tests...**
+
+            ⏳ Build started at: ${{ steps.current-time.outputs.time }} UTC
+
+            ---
+            *This comment will be updated when the build completes*
 
       - name: Install dependencies
-        run: pnpm install --frozen-lockfile
+        run: npm ci
 
       - name: Build Storybook and run Chromatic
         id: chromatic
@@ -55,3 +61,36 @@ jobs:
           autoAcceptChanges: 'main' # Auto-accept changes on main branch
           exitOnceUploaded: true # Don't wait for UI tests to complete
 
+      - name: Get completion time
+        id: completion-time
+        if: always()
+        run: echo "time=$(date -u '+%m/%d/%Y, %I:%M:%S %p')" >> $GITHUB_OUTPUT
+
+      - name: Comment PR - Build Complete
+        if: github.event_name == 'pull_request' && always()
+        uses: edumserrano/find-create-or-update-comment@v3
+        with:
+          issue-number: ${{ github.event.pull_request.number }}
+          body-includes: '<!-- STORYBOOK_BUILD_STATUS -->'
+          comment-author: 'github-actions[bot]'
+          edit-mode: replace
+          body: |
+            <!-- STORYBOOK_BUILD_STATUS -->
+            ## 🎨 Storybook Build Status
+
+            ${{ steps.chromatic.outcome == 'success' && '✅' || '❌' }} **${{ steps.chromatic.outcome == 'success' && 'Build completed successfully!' || 'Build failed!' }}**
+
+            ⏰ Completed at: ${{ steps.completion-time.outputs.time }} UTC
+
+            ### 📊 Build Summary
+            - **Components**: ${{ steps.chromatic.outputs.componentCount || '0' }}
+            - **Stories**: ${{ steps.chromatic.outputs.testCount || '0' }}
+            - **Visual changes**: ${{ steps.chromatic.outputs.changeCount || '0' }}
+            - **Errors**: ${{ steps.chromatic.outputs.errorCount || '0' }}
+
+            ### 🔗 Links
+            ${{ steps.chromatic.outputs.buildUrl && format('- [📸 View Chromatic Build]({0})', steps.chromatic.outputs.buildUrl) || '' }}
+            ${{ steps.chromatic.outputs.storybookUrl && format('- [📖 Preview Storybook]({0})', steps.chromatic.outputs.storybookUrl) || '' }}
+
+            ---
+            ${{ steps.chromatic.outcome == 'success' && '🎉 Your Storybook is ready for review!' || '⚠️ Please check the workflow logs for error details.' }}

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

@@ -53,20 +53,14 @@ jobs:
         with:
           fetch-depth: 0
 
-      - 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: |
-          pnpm install -g typescript @vue/compiler-sfc
+          npm install -g typescript @vue/compiler-sfc
 
       - name: Run Claude PR Review
         uses: anthropics/claude-code-action@main

.github/workflows/dev-release.yaml

@@ -16,26 +16,9 @@ jobs:
     steps:
       - name: Checkout code
         uses: actions/checkout@v4
-      - name: Install pnpm
-        uses: pnpm/action-setup@v4
-        with:
-          version: 10
       - uses: actions/setup-node@v4
         with:
           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
@@ -46,9 +29,9 @@ jobs:
           ALGOLIA_API_KEY: ${{ secrets.ALGOLIA_API_KEY }}
           USE_PROD_CONFIG: 'true'
         run: |
-          pnpm install --frozen-lockfile
-          pnpm build
-          pnpm zipdist
+          npm ci
+          npm run build
+          npm run zipdist
       - name: Upload dist artifact
         uses: actions/upload-artifact@v4
         with:

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

@@ -42,14 +42,9 @@ jobs:
       with:
         repository: ${{ inputs.owner }}/${{ inputs.repository }}
         path: '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'
@@ -68,8 +63,8 @@ jobs:
       working-directory: ComfyUI/custom_nodes/${{ inputs.repository }}
     - name: Build & Install ComfyUI_frontend
       run: |
-        pnpm install --frozen-lockfile
-        pnpm build
+        npm ci
+        npm run build
         rm -rf ../ComfyUI/web/*
         mv dist/* ../ComfyUI/web/
       working-directory: ComfyUI_frontend
@@ -84,18 +79,18 @@ jobs:
     - 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 &
+      run: npm run dev:electron &
       working-directory: ComfyUI_frontend
     - name: Capture base i18n
       run: npx tsx scripts/diff-i18n capture
       working-directory: ComfyUI_frontend
     - name: Update en.json
-      run: pnpm collect-i18n
+      run: npm run collect-i18n
       env:
         PLAYWRIGHT_TEST_URL: http://localhost:5173
       working-directory: ComfyUI_frontend
     - name: Update translations
-      run: pnpm locale
+      run: npm run locale
       env:
         OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
       working-directory: ComfyUI_frontend

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

@@ -13,22 +13,22 @@ jobs:
   update-locales:
     runs-on: ubuntu-latest
     steps:
-    - uses: Comfy-Org/ComfyUI_frontend_setup_action@v3
+    - uses: Comfy-Org/ComfyUI_frontend_setup_action@v2.3
     - 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 &
+      run: npm run dev:electron &
       working-directory: ComfyUI_frontend
     - name: Update en.json
-      run: pnpm collect-i18n -- scripts/collect-i18n-node-defs.ts
+      run: npm run 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
+      run: npm run locale
       env:
         OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
       working-directory: ComfyUI_frontend

.github/workflows/i18n.yaml

@@ -1,52 +1,37 @@
 name: Update Locales
 
 on:
-  # Manual dispatch for urgent translation updates  
-  workflow_dispatch:
-  # Only trigger on PRs to main/master - additional branch filtering in job condition
   pull_request:
-    branches: [ main ]
-    types: [opened, synchronize, reopened]
+    branches: [ main, master, dev* ]
+    paths-ignore:
+      - '.github/**'
+      - '.husky/**'
+      - '.vscode/**'
+      - 'browser_tests/**'
+      - 'tests-ui/**'
 
 jobs:
   update-locales:
-    # Branch detection: Only run for manual dispatch or version-bump-* branches from main repo
-    if: github.event_name == 'workflow_dispatch' || (github.event.pull_request.head.repo.full_name == github.repository && startsWith(github.head_ref, 'version-bump-'))
+    # Don't run on fork PRs
+    if: github.event.pull_request.head.repo.full_name == github.repository
     runs-on: ubuntu-latest
     steps:
-    - uses: Comfy-Org/ComfyUI_frontend_setup_action@v3
-    
-    - name: Cache tool outputs
-      uses: actions/cache@v4
-      with:
-        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:
-        path: ~/.cache/ms-playwright
-        key: playwright-browsers-${{ runner.os }}-${{ hashFiles('ComfyUI_frontend/pnpm-lock.yaml') }}
-        restore-keys: |
-          playwright-browsers-${{ runner.os }}-
+    - uses: Comfy-Org/ComfyUI_frontend_setup_action@v2.3
     - 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 &
+      run: npm run dev:electron &
       working-directory: ComfyUI_frontend
     - name: Update en.json
-      run: pnpm collect-i18n
+      run: npm run collect-i18n -- scripts/collect-i18n-general.ts
       env:
         PLAYWRIGHT_TEST_URL: http://localhost:5173
       working-directory: ComfyUI_frontend
     - name: Update translations
-      run: pnpm locale
+      run: npm run locale
       env:
         OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
       working-directory: ComfyUI_frontend

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

@@ -16,43 +16,23 @@ jobs:
         uses: actions/checkout@v4
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
-          ref: ${{ github.event.pull_request.head.ref }}
+          ref: ${{ github.event.pull_request.head.sha }}
           fetch-depth: 0
 
-      - 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
-            .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 }}-
+          cache: 'npm'
 
       - name: Install dependencies
-        run: pnpm install --frozen-lockfile
+        run: npm ci
 
       - name: Run ESLint with auto-fix
-        run: pnpm lint:fix
+        run: npm run lint:fix
 
       - name: Run Prettier with auto-format
-        run: pnpm format
+        run: npm run format
 
       - name: Check for changes
         id: verify-changed-files
@@ -74,13 +54,12 @@ jobs:
 
       - name: Final validation
         run: |
-          pnpm lint
-          pnpm format:check
-          pnpm knip
+          npm run lint
+          npm run format:check
+          npm run knip
 
       - name: Comment on PR about auto-fix
         if: steps.verify-changed-files.outputs.changed == 'true' && github.event.pull_request.head.repo.full_name == github.repository
-        continue-on-error: true
         uses: actions/github-script@v7
         with:
           script: |
@@ -93,7 +72,6 @@ jobs:
 
       - name: Comment on PR about manual fix needed
         if: steps.verify-changed-files.outputs.changed == 'true' && github.event.pull_request.head.repo.full_name != github.repository
-        continue-on-error: true
         uses: actions/github-script@v7
         with:
           script: |
@@ -101,5 +79,5 @@ jobs:
               issue_number: context.issue.number,
               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.'
+              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\nnpm run prepare\n```\n\n### Option 2: Fix manually\nRun these commands and push the changes:\n```bash\nnpm run lint:fix\nnpm run format\n```\n\nSee [CONTRIBUTING.md](https://github.com/Comfy-Org/ComfyUI_frontend/blob/main/CONTRIBUTING.md#git-pre-commit-hooks) for more details.'
             })

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

@@ -1,280 +0,0 @@
-name: PR Playwright Deploy and Comment
-
-on:
-  workflow_run:
-    workflows: ["Tests CI"]
-    types: [requested, completed]
-
-env:
-  DATE_FORMAT: '+%m/%d/%Y, %I:%M:%S %p'
-
-jobs:
-  deploy-reports:
-    runs-on: ubuntu-latest
-    if: github.repository == 'Comfy-Org/ComfyUI_frontend' && github.event.workflow_run.event == 'pull_request' && github.event.action == 'completed'
-    permissions:
-      actions: read
-    strategy:
-      fail-fast: false
-      matrix:
-        browser: [chromium, chromium-2x, chromium-0.5x, mobile-chrome]
-    steps:
-      - name: Get PR info
-        id: pr-info
-        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 { number: null, sanitized_branch: null };
-            }
-            
-            const pr = pullRequests[0];
-            const branchName = context.payload.workflow_run.head_branch;
-            const sanitizedBranch = branchName.toLowerCase().replace(/[^a-z0-9-]/g, '-').replace(/--+/g, '-').replace(/^-|-$/g, '');
-            
-            return {
-              number: pr.number,
-              sanitized_branch: sanitizedBranch
-            };
-
-      - name: Set project name
-        if: fromJSON(steps.pr-info.outputs.result).number != null
-        id: project-name
-        run: |
-          if [ "${{ matrix.browser }}" = "chromium-0.5x" ]; then
-            echo "name=comfyui-playwright-chromium-0-5x" >> $GITHUB_OUTPUT
-          else
-            echo "name=comfyui-playwright-${{ matrix.browser }}" >> $GITHUB_OUTPUT
-          fi
-          echo "branch=${{ fromJSON(steps.pr-info.outputs.result).sanitized_branch }}" >> $GITHUB_OUTPUT
-
-      - name: Download playwright report
-        if: fromJSON(steps.pr-info.outputs.result).number != null
-        uses: actions/download-artifact@v4
-        with:
-          github-token: ${{ secrets.GITHUB_TOKEN }}
-          run-id: ${{ github.event.workflow_run.id }}
-          name: playwright-report-${{ matrix.browser }}
-          path: playwright-report
-
-      - name: Install Wrangler
-        if: fromJSON(steps.pr-info.outputs.result).number != null
-        run: npm install -g wrangler
-
-      - name: Deploy to Cloudflare Pages (${{ matrix.browser }})
-        if: fromJSON(steps.pr-info.outputs.result).number != null
-        id: cloudflare-deploy
-        continue-on-error: true
-        run: |
-          # Retry logic for wrangler deploy (3 attempts)
-          RETRY_COUNT=0
-          MAX_RETRIES=3
-          SUCCESS=false
-          
-          while [ $RETRY_COUNT -lt $MAX_RETRIES ] && [ $SUCCESS = false ]; do
-            RETRY_COUNT=$((RETRY_COUNT + 1))
-            echo "Deployment attempt $RETRY_COUNT of $MAX_RETRIES..."
-            
-            if npx wrangler pages deploy playwright-report --project-name=${{ steps.project-name.outputs.name }} --branch=${{ steps.project-name.outputs.branch }}; then
-              SUCCESS=true
-              echo "Deployment successful on attempt $RETRY_COUNT"
-            else
-              echo "Deployment failed on attempt $RETRY_COUNT"
-              if [ $RETRY_COUNT -lt $MAX_RETRIES ]; then
-                echo "Retrying in 10 seconds..."
-                sleep 10
-              fi
-            fi
-          done
-          
-          if [ $SUCCESS = false ]; then
-            echo "All deployment attempts failed"
-            exit 1
-          fi
-        env:
-          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
-          CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
-
-  comment-tests-starting:
-    runs-on: ubuntu-latest
-    if: github.repository == 'Comfy-Org/ComfyUI_frontend' && github.event.workflow_run.event == 'pull_request' && github.event.action == 'requested'
-    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: Get completion time
-        id: completion-time
-        run: echo "time=$(date -u '${{ env.DATE_FORMAT }}')" >> $GITHUB_OUTPUT
-
-      - name: Generate comment body for start
-        if: steps.pr.outputs.result != 'null'
-        id: comment-body-start
-        run: |
-          echo "<!-- PLAYWRIGHT_TEST_STATUS -->" > comment.md
-          echo "## 🎭 Playwright Test Results" >> comment.md
-          echo "" >> comment.md
-          echo "<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;' /> **Tests are starting...** " >> comment.md
-          echo "" >> comment.md
-          echo "⏰ Started at: ${{ steps.completion-time.outputs.time }} UTC" >> comment.md
-          echo "" >> comment.md
-          echo "### 🚀 Running Tests" >> comment.md
-          echo "- 🧪 **chromium**: Running tests..." >> comment.md
-          echo "- 🧪 **chromium-0.5x**: Running tests..." >> comment.md
-          echo "- 🧪 **chromium-2x**: Running tests..." >> comment.md
-          echo "- 🧪 **mobile-chrome**: Running tests..." >> comment.md
-          echo "" >> comment.md
-          echo "---" >> comment.md
-          echo "⏱️ Please wait while tests are running across all browsers..." >> comment.md
-
-      - name: Comment PR - Tests Started
-        if: steps.pr.outputs.result != 'null'
-        uses: edumserrano/find-create-or-update-comment@82880b65c8a3a6e4c70aa05a204995b6c9696f53 # v3.0.0
-        with:
-          issue-number: ${{ steps.pr.outputs.result }}
-          body-includes: '<!-- PLAYWRIGHT_TEST_STATUS -->'
-          comment-author: 'github-actions[bot]'
-          edit-mode: replace
-          body-path: comment.md
-
-  comment-tests-completed:
-    runs-on: ubuntu-latest
-    needs: deploy-reports
-    if: github.repository == 'Comfy-Org/ComfyUI_frontend' && github.event.workflow_run.event == 'pull_request' && github.event.action == 'completed' && always()
-    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: Download all deployment info
-        if: steps.pr.outputs.result != 'null'
-        uses: actions/download-artifact@v4
-        with:
-          github-token: ${{ secrets.GITHUB_TOKEN }}
-          run-id: ${{ github.event.workflow_run.id }}
-          pattern: deployment-info-*
-          merge-multiple: true
-          path: deployment-info
-
-      - name: Get completion time
-        id: completion-time
-        run: echo "time=$(date -u '${{ env.DATE_FORMAT }}')" >> $GITHUB_OUTPUT
-
-      - name: Generate comment body for completion
-        if: steps.pr.outputs.result != 'null'
-        id: comment-body-completed
-        run: |
-          echo "<!-- PLAYWRIGHT_TEST_STATUS -->" > comment.md
-          echo "## 🎭 Playwright Test Results" >> comment.md
-          echo "" >> comment.md
-
-          # Check if all tests passed
-          ALL_PASSED=true
-          for file in deployment-info/*.txt; do
-            if [ -f "$file" ]; then
-              browser=$(basename "$file" .txt)
-              info=$(cat "$file")
-              exit_code=$(echo "$info" | cut -d'|' -f2)
-              if [ "$exit_code" != "0" ]; then
-                ALL_PASSED=false
-                break
-              fi
-            fi
-          done
-
-          if [ "$ALL_PASSED" = "true" ]; then
-            echo "✅ **All tests passed across all browsers!**" >> comment.md
-          else
-            echo "❌ **Some tests failed!**" >> comment.md
-          fi
-
-          echo "" >> comment.md
-          echo "⏰ Completed at: ${{ steps.completion-time.outputs.time }} UTC" >> comment.md
-          echo "" >> comment.md
-          echo "### 📊 Test Reports by Browser" >> comment.md
-
-          for file in deployment-info/*.txt; do
-            if [ -f "$file" ]; then
-              browser=$(basename "$file" .txt)
-              info=$(cat "$file")
-              exit_code=$(echo "$info" | cut -d'|' -f2)
-              url=$(echo "$info" | cut -d'|' -f3)
-              
-              # Validate URLs before using them in comments
-              sanitized_url=$(echo "$url" | grep -E '^https://[a-z0-9.-]+\.pages\.dev(/.*)?$' || echo "INVALID_URL")
-              if [ "$sanitized_url" = "INVALID_URL" ]; then
-                echo "Invalid deployment URL detected: $url"
-                url="#" # Use safe fallback
-              fi
-              
-              if [ "$exit_code" = "0" ]; then
-                status="✅"
-              else
-                status="❌"
-              fi
-              
-              echo "- $status **$browser**: [View Report]($url)" >> comment.md
-            fi
-          done
-
-          echo "" >> comment.md
-          echo "---" >> comment.md
-          if [ "$ALL_PASSED" = "true" ]; then
-            echo "🎉 Your tests are passing across all browsers!" >> comment.md
-          else
-            echo "⚠️ Please check the test reports for details on failures." >> comment.md
-          fi
-
-      - name: Comment PR - Tests Complete
-        if: steps.pr.outputs.result != 'null'
-        uses: edumserrano/find-create-or-update-comment@82880b65c8a3a6e4c70aa05a204995b6c9696f53 # v3.0.0
-        with:
-          issue-number: ${{ steps.pr.outputs.result }}
-          body-includes: '<!-- PLAYWRIGHT_TEST_STATUS -->'
-          comment-author: 'github-actions[bot]'
-          edit-mode: replace
-          body-path: comment.md

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

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

.github/workflows/release.yaml

@@ -19,25 +19,9 @@ jobs:
     steps:
       - name: Checkout code
         uses: actions/checkout@v4
-      - name: Install pnpm
-        uses: pnpm/action-setup@v4
-        with:
-          version: 10
       - uses: actions/setup-node@v4
         with:
           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
@@ -57,9 +41,9 @@ jobs:
           ALGOLIA_API_KEY: ${{ secrets.ALGOLIA_API_KEY }}
           USE_PROD_CONFIG: 'true'
         run: |
-          pnpm install --frozen-lockfile
-          pnpm build
-          pnpm zipdist
+          npm ci
+          npm run build
+          npm run zipdist
       - name: Upload dist artifact
         uses: actions/upload-artifact@v4
         with:
@@ -129,31 +113,14 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-      - name: Install pnpm
-        uses: pnpm/action-setup@v4
-        with:
-          version: 10
       - uses: actions/setup-node@v4
         with:
           node-version: 'lts/*'
-          cache: 'pnpm'
           registry-url: https://registry.npmjs.org
-
-      - name: Cache tool outputs
-        uses: actions/cache@v4
-        with:
-          path: |
-            .cache
-            tsconfig.tsbuildinfo
-            dist
-          key: types-tools-cache-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: |
-            types-tools-cache-${{ runner.os }}-
-
-      - run: pnpm install --frozen-lockfile
-      - run: pnpm build:types
+      - run: npm ci
+      - run: npm run build:types
       - name: Publish package
-        run: pnpm publish --access public
+        run: npm publish --access public
         working-directory: dist
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

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

@@ -10,14 +10,7 @@ jobs:
     runs-on: ubuntu-latest
     if: github.event.label.name == 'New Browser Test Expectations'
     steps:
-    - uses: Comfy-Org/ComfyUI_frontend_setup_action@v3
-    - name: Cache Playwright browsers
-      uses: actions/cache@v4
-      with:
-        path: ~/.cache/ms-playwright
-        key: playwright-browsers-${{ runner.os }}-${{ hashFiles('ComfyUI_frontend/pnpm-lock.yaml') }}
-        restore-keys: |
-          playwright-browsers-${{ runner.os }}-
+    - uses: Comfy-Org/ComfyUI_frontend_setup_action@v2.3
     - name: Install Playwright Browsers
       run: npx playwright install chromium --with-deps
       working-directory: ComfyUI_frontend

.github/workflows/test-ui.yaml

@@ -7,11 +7,15 @@ on:
     branches-ignore:
       [wip/*, draft/*, temp/*, vue-nodes-migration, sno-playwright-*]
 
+env:
+  DATE_FORMAT: '+%m/%d/%Y, %I:%M:%S %p'
+
 jobs:
   setup:
     runs-on: ubuntu-latest
     outputs:
       cache-key: ${{ steps.cache-key.outputs.key }}
+      sanitized-branch: ${{ steps.branch-info.outputs.sanitized }}
     steps:
       - name: Checkout ComfyUI
         uses: actions/checkout@v4
@@ -33,39 +37,51 @@ jobs:
           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
+      - name: Get current time
+        id: current-time
+        run: echo "time=$(date -u '${{ env.DATE_FORMAT }}')" >> $GITHUB_OUTPUT
+
+      - name: Comment PR - Tests Started
+        if: github.event_name == 'pull_request'
+        uses: edumserrano/find-create-or-update-comment@v3
         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 }}-
+          issue-number: ${{ github.event.pull_request.number }}
+          body-includes: '<!-- PLAYWRIGHT_TEST_STATUS -->'
+          comment-author: 'github-actions[bot]'
+          edit-mode: append
+          body: |
+            <!-- PLAYWRIGHT_TEST_STATUS -->
+
+            ---
+
+            <img alt='claude-loading-gif' src="https://github.com/user-attachments/assets/5ac382c7-e004-429b-8e35-7feb3e8f9c6f" width="14px" height="14px" style="vertical-align: middle; margin-left: 4px;" />
+            <bold>[${{ steps.current-time.outputs.time }} UTC] Preparing browser tests across multiple browsers...</bold>
+
+            ---
+            *This comment will be updated when tests complete*
 
       - name: Build ComfyUI_frontend
         run: |
-          pnpm install --frozen-lockfile
-          pnpm build
+          npm ci
+          npm run build
         working-directory: ComfyUI_frontend
 
       - name: Generate cache key
         id: cache-key
         run: echo "key=$(date +%s)" >> $GITHUB_OUTPUT
 
+      - name: Generate sanitized branch name
+        id: branch-info
+        run: |
+          # Get branch name and sanitize it for Cloudflare branch names
+          BRANCH_NAME="${{ github.head_ref || github.ref_name }}"
+          SANITIZED_BRANCH=$(echo "$BRANCH_NAME" | tr '[:upper:]' '[:lower:]' | sed 's/[^a-z0-9-]/-/g' | sed 's/--*/-/g' | sed 's/^-\|-$//g')
+          echo "sanitized=${SANITIZED_BRANCH}" >> $GITHUB_OUTPUT
+
       - name: Save cache
         uses: actions/cache/save@5a3ec84eff668545956fd18022155c47e93e2684
         with:
@@ -74,83 +90,17 @@ jobs:
             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: 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: Install Playwright Browsers
-        run: npx playwright install chromium --with-deps
-        working-directory: ComfyUI_frontend
-
-      - 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:
+      pull-requests: write
+      issues: write
       contents: read
     strategy:
       fail-fast: false
       matrix:
-        browser: [chromium-2x, chromium-0.5x, mobile-chrome]
+        browser: [chromium, chromium-2x, chromium-0.5x, mobile-chrome]
     steps:
       - name: Wait for cache propagation
         run: sleep 10
@@ -164,15 +114,35 @@ jobs:
             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: Get current time
+        id: current-time
+        run: echo "time=$(date -u '${{ env.DATE_FORMAT }}')" >> $GITHUB_OUTPUT
+
+      - name: Set project name
+        id: project-name
+        run: |
+          if [ "${{ matrix.browser }}" = "chromium-0.5x" ]; then
+            echo "name=comfyui-playwright-chromium-0-5x" >> $GITHUB_OUTPUT
+          else
+            echo "name=comfyui-playwright-${{ matrix.browser }}" >> $GITHUB_OUTPUT
+          fi
+          echo "branch=${{ needs.setup.outputs.sanitized-branch }}" >> $GITHUB_OUTPUT
+
+      - name: Comment PR - Browser Test Started
+        if: github.event_name == 'pull_request'
+        uses: edumserrano/find-create-or-update-comment@v3
+        with:
+          issue-number: ${{ github.event.pull_request.number }}
+          body-includes: '<!-- PLAYWRIGHT_TEST_STATUS -->'
+          comment-author: 'github-actions[bot]'
+          edit-mode: append
+          body: |
+            <img alt='claude-loading-gif' src="https://github.com/user-attachments/assets/5ac382c7-e004-429b-8e35-7feb3e8f9c6f" width="14px" height="14px" style="vertical-align: middle; margin-left: 4px;" />
+            <bold>${{ matrix.browser }}</bold>: Running tests...
 
       - name: Install requirements
         run: |
@@ -192,60 +162,193 @@ jobs:
         run: npx playwright install chromium --with-deps
         working-directory: ComfyUI_frontend
 
+      - name: Install Wrangler
+        run: npm install -g wrangler
+
       - name: Run Playwright tests (${{ matrix.browser }})
         id: playwright
         run: npx playwright test --project=${{ matrix.browser }} --reporter=html
         working-directory: ComfyUI_frontend
 
       - uses: actions/upload-artifact@v4
-        if: always()
+        if: always() # note: use always() to allow results to be upload/report even tests failed.
         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
+      - name: Deploy to Cloudflare Pages (${{ matrix.browser }})
+        id: cloudflare-deploy
+        if: always()
         run: |
-          pnpm install --frozen-lockfile
-        working-directory: ComfyUI_frontend
+          # Retry logic for wrangler deploy (3 attempts)
+          RETRY_COUNT=0
+          MAX_RETRIES=3
+          SUCCESS=false
+          
+          while [ $RETRY_COUNT -lt $MAX_RETRIES ] && [ $SUCCESS = false ]; do
+            RETRY_COUNT=$((RETRY_COUNT + 1))
+            echo "Deployment attempt $RETRY_COUNT of $MAX_RETRIES..."
+            
+            if npx wrangler pages deploy ComfyUI_frontend/playwright-report --project-name=${{ steps.project-name.outputs.name }} --branch=${{ steps.project-name.outputs.branch }}; then
+              SUCCESS=true
+              echo "Deployment successful on attempt $RETRY_COUNT"
+            else
+              echo "Deployment failed on attempt $RETRY_COUNT"
+              if [ $RETRY_COUNT -lt $MAX_RETRIES ]; then
+                echo "Retrying in 10 seconds..."
+                sleep 10
+              fi
+            fi
+          done
+          
+          if [ $SUCCESS = false ]; then
+            echo "All deployment attempts failed"
+            exit 1
+          fi
+        env:
+          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
 
-      - name: Download blob reports
-        uses: actions/download-artifact@v4
-        with:
-          path: ComfyUI_frontend/all-blob-reports
-          pattern: blob-report-chromium-*
-          merge-multiple: true
+      - name: Save deployment info for summary
+        if: always()
+        run: |
+          mkdir -p deployment-info
+          # Use step conclusion to determine test result
+          if [ "${{ steps.playwright.conclusion }}" = "success" ]; then
+            EXIT_CODE="0"
+          else
+            EXIT_CODE="1"
+          fi
+          DEPLOYMENT_URL="${{ steps.cloudflare-deploy.outputs.deployment-url || steps.cloudflare-deploy.outputs.url || format('https://{0}.{1}.pages.dev', steps.project-name.outputs.branch, steps.project-name.outputs.name) }}"
+          echo "${{ matrix.browser }}|${EXIT_CODE}|${DEPLOYMENT_URL}" > deployment-info/${{ matrix.browser }}.txt
 
-      - name: Merge into HTML Report
-        run: npx playwright merge-reports --reporter html ./all-blob-reports
-        working-directory: ComfyUI_frontend
-
-      - name: Upload HTML report
+      - name: Upload deployment info
+        if: always()
         uses: actions/upload-artifact@v4
         with:
-          name: playwright-report-chromium
-          path: ComfyUI_frontend/playwright-report/
-          retention-days: 30
+          name: deployment-info-${{ matrix.browser }}
+          path: deployment-info/
+          retention-days: 1
+
+      - name: Get completion time
+        id: completion-time
+        if: always()
+        run: echo "time=$(date -u '${{ env.DATE_FORMAT }}')" >> $GITHUB_OUTPUT
+
+      - name: Comment PR - Browser Test Complete
+        if: always() && github.event_name == 'pull_request'
+        uses: edumserrano/find-create-or-update-comment@v3
+        with:
+          issue-number: ${{ github.event.pull_request.number }}
+          body-includes: '<!-- PLAYWRIGHT_TEST_STATUS -->'
+          comment-author: 'github-actions[bot]'
+          edit-mode: append
+          body: |
+            ${{ steps.playwright.conclusion == 'success' && '✅' || '❌' }} **${{ matrix.browser }}**: ${{ steps.playwright.conclusion == 'success' && 'Tests passed!' || 'Tests failed!' }} [View Report](${{ steps.cloudflare-deploy.outputs.deployment-url || format('https://{0}.{1}.pages.dev', steps.project-name.outputs.branch, steps.project-name.outputs.name) }})
+
+  comment-summary:
+    needs: playwright-tests
+    runs-on: ubuntu-latest
+    if: always() && github.event_name == 'pull_request'
+    permissions:
+      pull-requests: write
+    steps:
+      - name: Download all deployment info
+        uses: actions/download-artifact@v4
+        with:
+          pattern: deployment-info-*
+          merge-multiple: true
+          path: deployment-info
+
+      - name: Get completion time
+        id: completion-time
+        run: echo "time=$(date -u '${{ env.DATE_FORMAT }}')" >> $GITHUB_OUTPUT
+
+      - name: Generate comment body
+        id: comment-body
+        run: |
+          echo "<!-- PLAYWRIGHT_TEST_STATUS -->" > comment.md
+          echo "## 🎭 Playwright Test Results" >> comment.md
+          echo "" >> comment.md
+
+          # Check if all tests passed
+          ALL_PASSED=true
+          for file in deployment-info/*.txt; do
+            if [ -f "$file" ]; then
+              browser=$(basename "$file" .txt)
+              info=$(cat "$file")
+              exit_code=$(echo "$info" | cut -d'|' -f2)
+              if [ "$exit_code" != "0" ]; then
+                ALL_PASSED=false
+                break
+              fi
+            fi
+          done
+
+          if [ "$ALL_PASSED" = "true" ]; then
+            echo "✅ **All tests passed across all browsers!**" >> comment.md
+          else
+            echo "❌ **Some tests failed!**" >> comment.md
+          fi
+
+          echo "" >> comment.md
+          echo "⏰ Completed at: ${{ steps.completion-time.outputs.time }} UTC" >> comment.md
+          echo "" >> comment.md
+          echo "### 📊 Test Reports by Browser" >> comment.md
+
+          for file in deployment-info/*.txt; do
+            if [ -f "$file" ]; then
+              browser=$(basename "$file" .txt)
+              info=$(cat "$file")
+              exit_code=$(echo "$info" | cut -d'|' -f2)
+              url=$(echo "$info" | cut -d'|' -f3)
+              
+              if [ "$exit_code" = "0" ]; then
+                status="✅"
+              else
+                status="❌"
+              fi
+              
+              echo "- $status **$browser**: [View Report]($url)" >> comment.md
+            fi
+          done
+
+          echo "" >> comment.md
+          echo "---" >> comment.md
+          if [ "$ALL_PASSED" = "true" ]; then
+            echo "🎉 Your tests are passing across all browsers!" >> comment.md
+          else
+            echo "⚠️ Please check the test reports for details on failures." >> comment.md
+          fi
+
+      - name: Comment PR - Tests Complete
+        uses: edumserrano/find-create-or-update-comment@v3
+        with:
+          issue-number: ${{ github.event.pull_request.number }}
+          body-includes: '<!-- PLAYWRIGHT_TEST_STATUS -->'
+          comment-author: 'github-actions[bot]'
+          edit-mode: replace
+          body-path: comment.md
+
+      - name: Check test results and fail if needed
+        run: |
+          # Check if all tests passed and fail the job if not
+          ALL_PASSED=true
+          for file in deployment-info/*.txt; do
+            if [ -f "$file" ]; then
+              info=$(cat "$file")
+              exit_code=$(echo "$info" | cut -d'|' -f2)
+              if [ "$exit_code" != "0" ]; then
+                ALL_PASSED=false
+                break
+              fi
+            fi
+          done
+
+          if [ "$ALL_PASSED" = "false" ]; then
+            echo "❌ Tests failed in one or more browsers. Failing the CI job."
+            exit 1
+          else
+            echo "✅ All tests passed across all browsers!"
+          fi

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

@@ -14,33 +14,19 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v4
 
-      - 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'
-
-      - 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 }}-
+          cache: 'npm'
 
       - name: Update electron types
-        run: pnpm install --workspace-root @comfyorg/comfyui-electron-types@latest
+        run: npm install @comfyorg/comfyui-electron-types@latest
 
       - name: Get new version
         id: get-version
         run: |
-          NEW_VERSION=$(node -e "console.log(JSON.parse(require('fs').readFileSync('./pnpm-lock.yaml')).packages['node_modules/@comfyorg/comfyui-electron-types'].version)")
+          NEW_VERSION=$(node -e "console.log(JSON.parse(require('fs').readFileSync('./package-lock.json')).packages['node_modules/@comfyorg/comfyui-electron-types'].version)")
           echo "NEW_VERSION=$NEW_VERSION" >> $GITHUB_OUTPUT
 
       - name: Create Pull Request

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

@@ -19,36 +19,14 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v4
 
-      - 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'
-
-      - 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 }}-
+          cache: 'npm'
 
       - 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 }}-
+        run: npm ci
 
       - name: Checkout ComfyUI-Manager repository
         uses: actions/checkout@v4
@@ -86,7 +64,7 @@ jobs:
       - name: Lint generated types
         run: |
           echo "Linting generated ComfyUI-Manager API types..."
-          pnpm lint:fix:no-cache -- ./src/types/generatedManagerTypes.ts
+          npm run lint:fix:no-cache -- ./src/types/generatedManagerTypes.ts
 
       - name: Check for changes
         id: check-changes

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

@@ -18,36 +18,14 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v4
 
-      - 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'
-
-      - 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 }}-
+          cache: 'npm'
 
       - 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 }}-
+        run: npm ci
 
       - name: Checkout comfy-api repository
         uses: actions/checkout@v4
@@ -86,7 +64,7 @@ jobs:
       - name: Lint generated types
         run: |
           echo "Linting generated Comfy Registry API types..."
-          pnpm lint:fix:no-cache -- ./src/types/comfyRegistryTypes.ts
+          npm run lint:fix:no-cache -- ./src/types/comfyRegistryTypes.ts
 
       - name: Check for changes
         id: check-changes

.github/workflows/version-bump.yaml

@@ -26,21 +26,16 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v4
 
-      - 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: 'npm'
 
       - name: Bump version
         id: bump-version
         run: |
-          pnpm version ${{ github.event.inputs.version_type }} --preid ${{ github.event.inputs.pre_release }} --no-git-tag-version
+          npm version ${{ github.event.inputs.version_type }} --preid ${{ github.event.inputs.pre_release }} --no-git-tag-version
           NEW_VERSION=$(node -p "require('./package.json').version")
           echo "NEW_VERSION=$NEW_VERSION" >> $GITHUB_OUTPUT
 

.github/workflows/vitest.yaml

@@ -13,34 +13,15 @@ jobs:
     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
+      run: npm ci
 
     - name: Run Vitest tests
       run: |
-        pnpm test:component
-        pnpm test:unit
+        npm run test:component
+        npm run test:unit

.gitignore

@@ -10,6 +10,7 @@ lerna-debug.log*
 # Package manager lockfiles (allow users to use different package managers)
 bun.lock
 bun.lockb
+pnpm-lock.yaml
 yarn.lock
 
 # Cache files
@@ -22,7 +23,7 @@ dist-ssr
 *.local
 # Claude configuration
 .claude/*.local.json
-CLAUDE.local.md
+.claude/settings.json
 
 # Editor directories and files
 .vscode/*
@@ -77,12 +78,3 @@ vite.config.mts.timestamp-*.mjs
 *storybook.log
 storybook-static
 
-
-
-
-.nx/cache
-.nx/workspace-data
-.cursor/rules/nx-rules.mdc
-.github/instructions/nx.instructions.md
-vite.config.*.timestamp*
-vitest.config.*.timestamp*

.nvmrc

@@ -1 +0,0 @@
-24

.storybook/CLAUDE.md

@@ -2,9 +2,9 @@
 
 ## Quick Commands
 
-- `pnpm storybook`: Start Storybook development server
-- `pnpm build-storybook`: Build static Storybook
-- `pnpm test:component`: Run component tests (includes Storybook components)
+- `npm run storybook`: Start Storybook development server
+- `npm run build-storybook`: Build static Storybook
+- `npm run test:component`: Run component tests (includes Storybook components)
 
 ## Development Workflow for Storybook
 
@@ -19,8 +19,8 @@
    - Ensure proper theming and styling
 
 3. **Code Quality**:
-   - Run `pnpm typecheck` to verify TypeScript
-   - Run `pnpm lint` to check for linting issues
+   - Run `npm run typecheck` to verify TypeScript
+   - Run `npm run lint` to check for linting issues
    - Follow existing story patterns and conventions
 
 ## Story Creation Guidelines
@@ -138,13 +138,13 @@ The Storybook preview is configured with:
 
 ```bash
 # Check TypeScript issues
-pnpm typecheck
+npm run typecheck
 
 # Lint Storybook files
-pnpm lint .storybook/
+npm run lint .storybook/
 
 # Build to check for production issues
-pnpm build-storybook
+npm run build-storybook
 ```
 
 ## File Organization

.storybook/README.md

@@ -40,10 +40,10 @@ Storybook is a frontend workshop for building UI components and pages in isolati
 
 ```bash
 # Start Storybook development server
-pnpm storybook
+npm run storybook
 
 # Build static Storybook for deployment
-pnpm build-storybook
+npm run build-storybook
 ```
 
 ### Creating Stories

.storybook/preview-head.html

@@ -4,26 +4,17 @@
     transition: background-color 0.3s ease, color 0.3s ease;
   }
 
-  /* Light theme default - with explicit color to override media queries */
-  body:not(.dark-theme) {
-    background-color: #fff !important;
-    color: #000 !important;
-  }
-
-  /* Override browser dark mode preference for light theme */
-  @media (prefers-color-scheme: dark) {
-    body:not(.dark-theme) {
-      color: #000 !important;
-      --fg-color: #000 !important;
-      --bg-color: #fff !important;
-    }
+  /* Light theme default */
+  body {
+    background-color: #ffffff;
+    color: #1a1a1a;
   }
 
   /* Dark theme styles */
   body.dark-theme,
   .dark-theme body {
-    background-color: #202020;
-    color: #fff;
+    background-color: #0a0a0a;
+    color: #e5e5e5;
   }
 
   /* Ensure Storybook canvas follows theme */
@@ -33,33 +24,11 @@
 
   .dark-theme .sb-show-main,
   .dark-theme .docs-story {
-    background-color: #202020 !important;
+    background-color: #0a0a0a !important;
   }
 
-  /* CSS Variables for theme consistency */
-  body:not(.dark-theme) {
-    --fg-color: #000;
-    --bg-color: #fff;
-    --content-bg: #e0e0e0;
-    --content-fg: #000;
-    --content-hover-bg: #adadad;
-    --content-hover-fg: #000;
-  }
-
-  body.dark-theme {
-    --fg-color: #fff;
-    --bg-color: #202020;
-    --content-bg: #4e4e4e;
-    --content-fg: #fff;
-    --content-hover-bg: #222;
-    --content-hover-fg: #fff;
-  }
-
-  /* Override Storybook's problematic & selector styles */
-  /* Reset only the specific properties that Storybook injects */
-  #storybook-root li+li,
-  #storybook-docs li+li {
-    margin: inherit;
-    padding: inherit;
+  /* Fix for Storybook controls panel in dark mode */
+  .dark-theme .docblock-argstable-body {
+    color: #e5e5e5;
   }
 </style>

AGENTS.md

@@ -8,19 +8,19 @@
 - 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 (`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.
+- `npm run dev`: Start Vite dev server.
+- `npm run dev:electron`: Dev server with Electron API mocks.
+- `npm run build`: Type-check then production build to `dist/`.
+- `npm run preview`: Preview the production build locally.
+- `npm run test:unit`: Run Vitest unit tests (`tests-ui/`).
+- `npm run test:component`: Run component tests (`src/components/`).
+- `npm run test:browser`: Run Playwright E2E tests (`browser_tests/`).
+- `npm run lint` / `npm run lint:fix`: Lint (ESLint). `npm run format` / `format:check`: Prettier.
+- `npm run typecheck`: Vue TSC type checking.
 
 ## Coding Style & Naming Conventions
 - Language: TypeScript, Vue SFCs (`.vue`). Indent 2 spaces; single quotes; no semicolons; width 80 (see `.prettierrc`).
-- Imports: sorted/grouped by plugin; run `pnpm format` before committing.
+- Imports: sorted/grouped by plugin; run `npm run format` before committing.
 - ESLint: Vue + TS rules; no floating promises; unused imports disallowed; i18n raw text restrictions in templates.
 - Naming: Vue components in PascalCase (e.g., `MenuHamburger.vue`); composables `useXyz.ts`; Pinia stores `*Store.ts`.
 
@@ -33,7 +33,7 @@
 ## Commit & Pull Request Guidelines
 - Commits: Prefer Conventional Commits (e.g., `feat(ui): add sidebar`), `refactor(litegraph): …`. Use `[skip ci]` for locale-only updates when appropriate.
 - PRs: Include clear description, linked issues (`Fixes #123`), and screenshots/GIFs for UI changes. Add/adjust tests and i18n strings when applicable.
-- Quality gates: `pnpm lint`, `pnpm typecheck`, and relevant tests must pass. Keep PRs focused and small.
+- Quality gates: `npm run lint`, `npm run typecheck`, and relevant tests must pass. Keep PRs focused and small.
 
 ## Security & Configuration Tips
 - Secrets: Use `.env` (see `.env_example`); do not commit secrets.

CLAUDE.md

@@ -1,52 +1,22 @@
 # ComfyUI Frontend Project Guidelines
 
-## Repository Setup
-
-For first-time setup, use the Claude command:
-```
-/setup_repo
-```
-This bootstraps the monorepo with dependencies, builds, tests, and dev server verification.
-
-**Prerequisites:** Node.js >= 24, Git repository, available ports (5173, 6006)
-
 ## Quick Commands
 
-- `pnpm`: See all available commands
-- `pnpm dev`: Start development server (port 5173, via nx)
-- `pnpm typecheck`: Type checking
-- `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
-- `pnpm storybook`: Start Storybook development server (port 6006)
-- `pnpm knip`: Detect unused code and dependencies
-
-## Monorepo Architecture
-
-The project now uses **Nx** for build orchestration and task management:
-
-- **Task Orchestration**: Commands like `dev`, `build`, `lint`, and `test:browser` run via Nx
-- **Caching**: Nx provides intelligent caching for faster rebuilds
-- **Configuration**: Managed through `nx.json` with plugins for ESLint, Storybook, Vite, and Playwright
-- **Dependencies**: Nx handles dependency graph analysis and parallel execution
-
-Key Nx features:
-- Build target caching and incremental builds
-- Parallel task execution across the monorepo
-- Plugin-based architecture for different tools
+- `npm run`: See all available commands
+- `npm run typecheck`: Type checking
+- `npm run lint`: Linting
+- `npm run format`: Prettier formatting
+- `npm run test:component`: Run component tests with browser environment
+- `npm run test:unit`: Run all unit tests
+- `npm run test:unit -- tests-ui/tests/example.test.ts`: Run single test file
 
 ## Development Workflow
 
-1. **First-time setup**: Run `/setup_repo` Claude command
-2. Make code changes
-3. Run tests (see subdirectory CLAUDE.md files)
-4. Run typecheck, lint, format
-5. Check README updates
-6. Consider docs.comfy.org updates
+1. Make code changes
+2. Run tests (see subdirectory CLAUDE.md files)
+3. Run typecheck, lint, format
+4. Check README updates
+5. Consider docs.comfy.org updates
 
 ## Git Conventions
 
@@ -82,44 +52,6 @@ When referencing Comfy-Org repos:
 2. Use GitHub API for branches/PRs/metadata
 3. Curl GitHub website if needed
 
-## Settings and Feature Flags Quick Reference
-
-### Settings Usage
-```typescript
-const settingStore = useSettingStore()
-const value = settingStore.get('Comfy.SomeSetting')     // Get setting
-await settingStore.set('Comfy.SomeSetting', newValue)   // Update setting
-```
-
-### Dynamic Defaults
-```typescript
-{
-  id: 'Comfy.Example.Setting',
-  defaultValue: () => window.innerWidth < 1024 ? 'small' : 'large'  // Runtime context
-}
-```
-
-### Version-Based Defaults
-```typescript
-{
-  id: 'Comfy.Example.Feature',
-  defaultValue: 'legacy',
-  defaultsByInstallVersion: { '1.25.0': 'enhanced' }  // Gradual rollout
-}
-```
-
-### Feature Flags
-```typescript
-if (api.serverSupportsFeature('feature_name')) {  // Check capability
-  // Use enhanced feature
-}
-const value = api.getServerFeature('config_name', defaultValue)  // Get config
-```
-
-**Documentation:**
-- Settings system: `docs/SETTINGS.md`
-- Feature flags system: `docs/FEATURE_FLAGS.md`
-
 ## Common Pitfalls
 
 - NEVER use `any` type - use proper TypeScript types

CODEOWNERS

@@ -14,4 +14,4 @@
 /src/extensions/core/load3d.ts @jtydhr88 @Comfy-Org/comfy_frontend_devs
 
 # Mask Editor extension
-/src/extensions/core/maskeditor.ts @brucew4yn3rp @trsommer @Comfy-Org/comfy_frontend_devs
+/src/extensions/core/maskeditor.ts @trsommer @Comfy-Org/comfy_frontend_devs

CONTRIBUTING.md

@@ -17,7 +17,7 @@ Have another idea? Drop into Discord or open an issue, and let's chat!
 ### Prerequisites & Technology Stack
 
 - **Required Software**:
-  - Node.js (v18 or later to build; v24 for vite dev server) and pnpm
+  - Node.js (v16 or later; v20/v22 strongly recommended) and npm
   - Git for version control
   - A running ComfyUI backend instance
   
@@ -39,7 +39,7 @@ Have another idea? Drop into Discord or open an issue, and let's chat!
 
 2. Install dependencies:
    ```bash
-   pnpm install
+   npm install
    ```
 
 3. Configure environment (optional):
@@ -57,13 +57,13 @@ python main.py --port 8188
 
 ### Git pre-commit hooks
 
-Run `pnpm prepare` to install Git pre-commit hooks. Currently, the pre-commit hook is used to auto-format code on commit.
+Run `npm run prepare` to install Git pre-commit hooks. Currently, the pre-commit hook is used to auto-format code on commit.
 
 ### Dev Server
 
 - Start local ComfyUI backend at `localhost:8188`
-- Run `pnpm dev` to start the dev server
-- Run `pnpm dev:electron` to start the dev server with electron API mocked
+- Run `npm run dev` to start the dev server
+- Run `npm run dev:electron` to start the dev server with electron API mocked
 
 #### Access dev server on touch devices
 
@@ -155,7 +155,7 @@ For ComfyUI_frontend development, you can ask coding assistants to use Playwrigh
 
 ##### Setup for Claude Code
 
-After installing dependencies with `pnpm i`, the Playwright MCP server will be automatically available when you start Claude Code locally.
+After installing dependencies with `npm i`, the Playwright MCP server will be automatically available when you start Claude Code locally.
 
 Here's how Claude Code can use the Playwright MCP server to inspect the interface of the local development server (assuming you're running the dev server at `localhost:5173`):
 
@@ -210,14 +210,14 @@ Here's how Claude Code can use the Playwright MCP server to inspect the interfac
 
 ### Unit Tests
 
-- `pnpm i` to install all dependencies
-- `pnpm test:unit` to execute all unit tests
+- `npm i` to install all dependencies
+- `npm run 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
+- `npm run test:component` to execute all component tests
 
 ### Playwright Tests
 
@@ -228,12 +228,12 @@ Playwright tests verify the whole app. See [browser_tests/README.md](browser_tes
 Before submitting a PR, ensure all tests pass:
 
 ```bash
-pnpm test:unit
-pnpm test:component
-pnpm test:browser
-pnpm typecheck
-pnpm lint
-pnpm format
+npm run test:unit
+npm run test:component
+npm run test:browser
+npm run typecheck
+npm run lint
+npm run format
 ```
 
 ## Code Style Guidelines
@@ -265,7 +265,7 @@ The project supports three types of icons, all with automatic imports (no manual
 2. **Iconify Icons** - 200,000+ icons from various libraries: `<i-lucide:settings />`, `<i-mdi:folder />`
 3. **Custom Icons** - Your own SVG icons: `<i-comfy:workflow />`
 
-Icons are powered by the unplugin-icons system, which automatically discovers and imports icons as Vue components. Custom icons are stored in `src/assets/icons/custom/` and processed by `build/customIconCollection.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/`.
 
 For detailed instructions and code examples, see [src/assets/icons/README.md](src/assets/icons/README.md).
 

browser_tests/fixtures/ComfyPage.ts

@@ -124,7 +124,6 @@ export class ComfyPage {
   public readonly url: string
   // All canvas position operations are based on default view of canvas.
   public readonly canvas: Locator
-  public readonly selectionToolbox: Locator
   public readonly widgetTextBox: Locator
 
   // Buttons
@@ -159,7 +158,6 @@ export class ComfyPage {
   ) {
     this.url = process.env.PLAYWRIGHT_TEST_URL || 'http://localhost:8188'
     this.canvas = page.locator('#graph-canvas')
-    this.selectionToolbox = page.locator('.selection-toolbox')
     this.widgetTextBox = page.getByPlaceholder('text').nth(1)
     this.resetViewButton = page.getByRole('button', { name: 'Reset View' })
     this.queueButton = page.getByRole('button', { name: 'Queue Prompt' })

browser_tests/fixtures/UserSelectPage.ts

@@ -1,4 +1,5 @@
-import { Page, test as base } from '@playwright/test'
+import { test as base } from '@playwright/test'
+import { Page } from 'playwright'
 
 export class UserSelectPage {
   constructor(

browser_tests/fixtures/components/Topbar.ts

@@ -65,7 +65,6 @@ export class Topbar {
   }
 
   async openTopbarMenu() {
-    await this.page.waitForTimeout(1000)
     await this.page.locator('.comfyui-logo-wrapper').click()
     const menu = this.page.locator('.comfy-command-menu')
     await menu.waitFor({ state: 'visible' })

browser_tests/fixtures/utils/taskHistory.ts

@@ -1,7 +1,7 @@
-import type { Request, Route } from '@playwright/test'
 import _ from 'es-toolkit/compat'
 import fs from 'fs'
 import path from 'path'
+import type { Request, Route } from 'playwright'
 import { v4 as uuidv4 } from 'uuid'
 
 import type {

browser_tests/tests/customIcons.spec.ts

@@ -1,57 +0,0 @@
-import { expect } from '@playwright/test'
-import type { Locator } from '@playwright/test'
-
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-
-async function verifyCustomIconSvg(iconElement: Locator) {
-  const svgVariable = await iconElement.evaluate((element) => {
-    const styles = getComputedStyle(element)
-    return styles.getPropertyValue('--svg')
-  })
-
-  expect(svgVariable).toBeTruthy()
-  const dataUrlMatch = svgVariable.match(
-    /url\("data:image\/svg\+xml,([^"]+)"\)/
-  )
-  expect(dataUrlMatch).toBeTruthy()
-
-  const encodedSvg = dataUrlMatch![1]
-  const decodedSvg = decodeURIComponent(encodedSvg)
-
-  // Check for SVG header to confirm it's a valid SVG
-  expect(decodedSvg).toContain("<svg xmlns='http://www.w3.org/2000/svg'")
-}
-
-test.describe('Custom Icons', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
-  })
-
-  test('sidebar tab icons use custom SVGs', async ({ comfyPage }) => {
-    // Find the icon in the sidebar
-    const icon = comfyPage.page.locator(
-      '.icon-\\[comfy--ai-model\\].side-bar-button-icon'
-    )
-    await expect(icon).toBeVisible()
-
-    // Verify the custom SVG content
-    await verifyCustomIconSvg(icon)
-  })
-
-  test('Browse Templates menu item uses custom template icon', async ({
-    comfyPage
-  }) => {
-    // Open the topbar menu
-    await comfyPage.menu.topbar.openTopbarMenu()
-    const menuItem = comfyPage.menu.topbar.getMenuItem('Browse Templates')
-
-    // Find the icon as a previous sibling of the menu item label
-    const templateIcon = menuItem
-      .locator('..')
-      .locator('.icon-\\[comfy--template\\]')
-    await expect(templateIcon).toBeVisible()
-
-    // Verify the custom SVG content
-    await verifyCustomIconSvg(templateIcon)
-  })
-})

browser_tests/tests/dialog.spec.ts

@@ -59,6 +59,18 @@ test.describe('Execution error', () => {
     const executionError = comfyPage.page.locator('.comfy-error-report')
     await expect(executionError).toBeVisible()
   })
+
+  test('Can display Issue Report form', async ({ comfyPage }) => {
+    await comfyPage.loadWorkflow('nodes/execution_error')
+    await comfyPage.queueButton.click()
+    await comfyPage.nextFrame()
+
+    await comfyPage.page.getByLabel('Help Fix This').click()
+    const issueReportForm = comfyPage.page.getByText(
+      'Submit Error Report (Optional)'
+    )
+    await expect(issueReportForm).toBeVisible()
+  })
 })
 
 test.describe('Missing models warning', () => {
@@ -291,16 +303,37 @@ test.describe('Settings', () => {
   })
 })
 
-test.describe('Support', () => {
-  test('Should open external zendesk link', async ({ comfyPage }) => {
+test.describe('Feedback dialog', () => {
+  test('Should open from topmenu help command', async ({ comfyPage }) => {
+    // Open feedback dialog from top menu
     await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
-    const pagePromise = comfyPage.page.context().waitForEvent('page')
-    await comfyPage.menu.topbar.triggerTopbarCommand(['Help', 'Support'])
-    const newPage = await pagePromise
+    await comfyPage.menu.topbar.triggerTopbarCommand(['Help', 'Feedback'])
 
-    await newPage.waitForLoadState('networkidle')
-    await expect(newPage).toHaveURL(/.*support\.comfy\.org.*/)
-    await newPage.close()
+    // Verify feedback dialog content is visible
+    const feedbackHeader = comfyPage.page.getByRole('heading', {
+      name: 'Feedback'
+    })
+    await expect(feedbackHeader).toBeVisible()
+  })
+
+  test('Should close when close button clicked', async ({ comfyPage }) => {
+    // Open feedback dialog
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
+    await comfyPage.menu.topbar.triggerTopbarCommand(['Help', 'Feedback'])
+
+    const feedbackHeader = comfyPage.page.getByRole('heading', {
+      name: 'Feedback'
+    })
+
+    // Close feedback dialog
+    await comfyPage.page
+      .getByLabel('', { exact: true })
+      .getByLabel('Close')
+      .click()
+    await feedbackHeader.waitFor({ state: 'hidden' })
+
+    // Verify dialog is closed
+    await expect(feedbackHeader).not.toBeVisible()
   })
 })
 

browser_tests/tests/graphCanvasMenu.spec.ts

@@ -7,11 +7,13 @@ test.describe('Graph Canvas Menu', () => {
     // Set link render mode to spline to make sure it's not affected by other tests'
     // side effects.
     await comfyPage.setSetting('Comfy.LinkRenderMode', 2)
-    // Enable canvas menu for all tests
-    await comfyPage.setSetting('Comfy.Graph.CanvasMenu', true)
   })
 
   test('Can toggle link visibility', async ({ comfyPage }) => {
+    // Note: `Comfy.Graph.CanvasMenu` is disabled in comfyPage setup.
+    // so no cleanup is needed.
+    await comfyPage.setSetting('Comfy.Graph.CanvasMenu', true)
+
     const button = comfyPage.page.getByTestId('toggle-link-visibility-button')
     await button.click()
     await comfyPage.nextFrame()
@@ -34,45 +36,4 @@ test.describe('Graph Canvas Menu', () => {
       hiddenLinkRenderMode
     )
   })
-
-  test('Focus mode button is clickable and has correct test id', async ({
-    comfyPage
-  }) => {
-    const focusButton = comfyPage.page.getByTestId('focus-mode-button')
-    await expect(focusButton).toBeVisible()
-    await expect(focusButton).toBeEnabled()
-
-    // Test that the button can be clicked without error
-    await focusButton.click()
-    await comfyPage.nextFrame()
-  })
-
-  test('Zoom controls popup opens and closes', async ({ comfyPage }) => {
-    // Find the zoom button by its percentage text content
-    const zoomButton = comfyPage.page.locator('button').filter({
-      hasText: '%'
-    })
-    await expect(zoomButton).toBeVisible()
-
-    // Click to open zoom controls
-    await zoomButton.click()
-    await comfyPage.nextFrame()
-
-    // Zoom controls modal should be visible
-    const zoomModal = comfyPage.page
-      .locator('div')
-      .filter({
-        hasText: 'Zoom To Fit'
-      })
-      .first()
-    await expect(zoomModal).toBeVisible()
-
-    // Click backdrop to close
-    const backdrop = comfyPage.page.locator('.fixed.inset-0').first()
-    await backdrop.click()
-    await comfyPage.nextFrame()
-
-    // Modal should be hidden
-    await expect(zoomModal).not.toBeVisible()
-  })
 })

browser_tests/tests/interaction.spec.ts

@@ -780,18 +780,9 @@ test.describe('Viewport settings', () => {
 
     // Screenshot the canvas element
     await comfyPage.setSetting('Comfy.Graph.CanvasMenu', true)
-
-    // Open zoom controls dropdown first
-    const zoomControlsButton = comfyPage.page.getByTestId(
-      'zoom-controls-button'
-    )
-    await zoomControlsButton.click()
-
     const toggleButton = comfyPage.page.getByTestId('toggle-minimap-button')
+
     await toggleButton.click()
-    // close zoom menu
-    await zoomControlsButton.click()
-    await comfyPage.setSetting('Comfy.Graph.CanvasMenu', false)
 
     await comfyPage.menu.topbar.saveWorkflow('Workflow A')
     await comfyPage.nextFrame()