Merge remote-tracking branch 'origin/main' into feat/new-workflow-templates

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

@@ -128,7 +128,25 @@ echo "Last stable release: $LAST_STABLE"
 
 ### Step 4: Analyze Dependency Updates
 
-1. **Check significant 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:**
    ```bash
    # Extract all dependency changes for major version bumps
    OTHER_DEP_CHANGES=""
@@ -200,22 +218,48 @@ echo "Last stable release: $LAST_STABLE"
    PR data: [contents of prs-${NEW_VERSION}.json]
    ```
 
-3. **Generate GTM notification:**
+3. **Generate GTM notification using this EXACT Slack-compatible format:**
    ```bash
-   # Save to gtm-summary-${NEW_VERSION}.md based on analysis
+   # Only create file if GTM-worthy features exist:
-   # If GTM-worthy features exist, include them with testing instructions
+   if [ "$GTM_FEATURES_FOUND" = "true" ]; then
-   # If not, note that this is a maintenance/bug fix release
+     cat > gtm-summary-${NEW_VERSION}.md << 'EOF'
-   
+   *GTM Summary: ComfyUI Frontend v${NEW_VERSION}*
-   # Check if notification is needed
+
-   if grep -q "No marketing-worthy features" gtm-summary-${NEW_VERSION}.md; then
+   _Disclaimer: the below is AI-generated_
-     echo "✅ No GTM notification needed for this release"
+
-     echo "📄 Summary saved to: gtm-summary-${NEW_VERSION}.md"
+   1. *[Feature Title]* (#[PR_NUMBER])
-   else
+       * *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
      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:**
@@ -228,37 +272,42 @@ echo "Last stable release: $LAST_STABLE"
 
 ### Step 7: Security and Dependency Audit
 
-1. Run security audit:
+1. Run pnpm security audit:
    ```bash
-   npm audit --audit-level moderate
+   pnpm audit --audit-level moderate
+   pnpm licenses ls --summary
    ```
 2. Check for known vulnerabilities in dependencies
-3. Scan for hardcoded secrets or credentials:
+3. Run comprehensive dependency health check:
+   ```bash
+   pnpm doctor
+   ```
+4. Scan for hardcoded secrets or credentials:
    ```bash
    git log -p ${BASE_TAG}..HEAD | grep -iE "(password|key|secret|token)" || echo "No sensitive data found"
    ```
-4. Verify no sensitive data in recent commits
+5. Verify no sensitive data in recent commits
-5. **SECURITY REVIEW**: Address any critical findings before proceeding?
+6. **SECURITY REVIEW**: Address any critical findings before proceeding?
 
 ### Step 8: Pre-Release Testing
 
 1. Run complete test suite:
    ```bash
-   npm run test:unit
+   pnpm test:unit
-   npm run test:component
+   pnpm test:component
    ```
 2. Run type checking:
    ```bash
-   npm run typecheck
+   pnpm typecheck
    ```
 3. Run linting (may have issues with missing packages):
    ```bash
-   npm run lint || echo "Lint issues - verify if critical"
+   pnpm lint || echo "Lint issues - verify if critical"
    ```
 4. Test build process:
    ```bash
-   npm run build
+   pnpm build
-   npm run build:types
+   pnpm build:types
    ```
 5. **QUALITY GATE**: All tests and builds passing?
 
@@ -488,7 +537,7 @@ echo "Workflow triggered. Waiting for PR creation..."
    ```bash
    # Check npm availability
    for i in {1..10}; do
-     if npm view @comfyorg/comfyui-frontend-types@${NEW_VERSION} version >/dev/null 2>&1; then
+     if pnpm 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: `npm run typecheck && npm run lint`
+   - Run validation: `pnpm typecheck && pnpm 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
-   - npm types publication
+   - pnpm types publication
 
 ### Step 12: Post-Release Verification
 
@@ -211,7 +211,7 @@ For each commit:
    ```
 3. Verify npm package:
    ```bash
-   npm view @comfyorg/comfyui-frontend-types@1.23.5
+   pnpm view @comfyorg/comfyui-frontend-types@1.23.5
    ```
 4. Generate release summary with:
    - Version released

.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 `npm run dev` from the root directory
+   - If not running, start it with `pnpm 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
 

.github/workflows/chromatic.yaml

@@ -21,11 +21,16 @@ jobs:
         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: 'npm'
+          cache: 'pnpm'
 
       - name: Get current time
         id: current-time
@@ -58,14 +63,14 @@ jobs:
             .cache
             storybook-static
             tsconfig.tsbuildinfo
-          key: storybook-cache-${{ runner.os }}-${{ hashFiles('**/package-lock.json') }}-${{ hashFiles('src/**/*.{ts,vue,js}', '*.config.*', '.storybook/**/*') }}
+          key: storybook-cache-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}-${{ hashFiles('src/**/*.{ts,vue,js}', '*.config.*', '.storybook/**/*') }}
           restore-keys: |
-            storybook-cache-${{ runner.os }}-${{ hashFiles('**/package-lock.json') }}-
+            storybook-cache-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}-
             storybook-cache-${{ runner.os }}-
             storybook-tools-cache-${{ runner.os }}-
 
       - name: Install dependencies
-        run: npm ci
+        run: pnpm install --frozen-lockfile
 
       - name: Build Storybook and run Chromatic
         id: chromatic

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

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

.github/workflows/dev-release.yaml

@@ -16,10 +16,14 @@ 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: 'npm'
+          cache: 'pnpm'
 
       - name: Cache tool outputs
         uses: actions/cache@v4
@@ -28,7 +32,7 @@ jobs:
             .cache
             dist
             tsconfig.tsbuildinfo
-          key: dev-release-tools-cache-${{ runner.os }}-${{ hashFiles('**/package-lock.json') }}
+          key: dev-release-tools-cache-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
           restore-keys: |
             dev-release-tools-cache-${{ runner.os }}-
 
@@ -42,9 +46,9 @@ jobs:
           ALGOLIA_API_KEY: ${{ secrets.ALGOLIA_API_KEY }}
           USE_PROD_CONFIG: 'true'
         run: |
-          npm ci
+          pnpm install --frozen-lockfile
-          npm run build
+          pnpm build
-          npm run zipdist
+          pnpm zipdist
       - name: Upload dist artifact
         uses: actions/upload-artifact@v4
         with:

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

@@ -42,9 +42,14 @@ 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'
@@ -63,8 +68,8 @@ jobs:
       working-directory: ComfyUI/custom_nodes/${{ inputs.repository }}
     - name: Build & Install ComfyUI_frontend
       run: |
-        npm ci
+        pnpm install --frozen-lockfile
-        npm run build
+        pnpm build
         rm -rf ../ComfyUI/web/*
         mv dist/* ../ComfyUI/web/
       working-directory: ComfyUI_frontend
@@ -79,18 +84,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: npm run dev:electron &
+      run: pnpm 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: npm run collect-i18n
+      run: pnpm collect-i18n
       env:
         PLAYWRIGHT_TEST_URL: http://localhost:5173
       working-directory: ComfyUI_frontend
     - name: Update translations
-      run: npm run locale
+      run: pnpm 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@v2.3
+    - uses: Comfy-Org/ComfyUI_frontend_setup_action@v3
     - name: Install Playwright Browsers
       run: npx playwright install chromium --with-deps
       working-directory: ComfyUI_frontend
     - name: Start dev server
       # Run electron dev server as it is a superset of the web dev server
       # We do want electron specific UIs to be translated.
-      run: npm run dev:electron &
+      run: pnpm dev:electron &
       working-directory: ComfyUI_frontend
     - name: Update en.json
-      run: npm run collect-i18n -- scripts/collect-i18n-node-defs.ts
+      run: pnpm collect-i18n -- scripts/collect-i18n-node-defs.ts
       env:
         PLAYWRIGHT_TEST_URL: http://localhost:5173
       working-directory: ComfyUI_frontend
     - name: Update translations
-      run: npm run locale
+      run: pnpm locale
       env:
         OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
       working-directory: ComfyUI_frontend

.github/workflows/i18n.yaml

@@ -1,22 +1,20 @@
 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, master, dev* ]
+    branches: [ main ]
-    paths-ignore:
+    types: [opened, synchronize, reopened]
-      - '.github/**'
-      - '.husky/**'
-      - '.vscode/**'
-      - 'browser_tests/**'
-      - 'tests-ui/**'
 
 jobs:
   update-locales:
-    # Don't run on fork PRs
+    # Branch detection: Only run for manual dispatch or version-bump-* branches from main repo
-    if: github.event.pull_request.head.repo.full_name == github.repository
+    if: github.event_name == 'workflow_dispatch' || (github.event.pull_request.head.repo.full_name == github.repository && startsWith(github.head_ref, 'version-bump-'))
     runs-on: ubuntu-latest
     steps:
-    - uses: Comfy-Org/ComfyUI_frontend_setup_action@v2.3
+    - uses: Comfy-Org/ComfyUI_frontend_setup_action@v3
     
     - name: Cache tool outputs
       uses: actions/cache@v4
@@ -24,7 +22,7 @@ jobs:
         path: |
           ComfyUI_frontend/.cache
           ComfyUI_frontend/.cache
-        key: i18n-tools-cache-${{ runner.os }}-${{ hashFiles('ComfyUI_frontend/package-lock.json') }}
+        key: i18n-tools-cache-${{ runner.os }}-${{ hashFiles('ComfyUI_frontend/pnpm-lock.yaml') }}
         restore-keys: |
           i18n-tools-cache-${{ runner.os }}-
     - name: Install Playwright Browsers
@@ -33,15 +31,15 @@ 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: npm run dev:electron &
+      run: pnpm dev:electron &
       working-directory: ComfyUI_frontend
     - name: Update en.json
-      run: npm run collect-i18n -- scripts/collect-i18n-general.ts
+      run: pnpm collect-i18n -- scripts/collect-i18n-general.ts
       env:
         PLAYWRIGHT_TEST_URL: http://localhost:5173
       working-directory: ComfyUI_frontend
     - name: Update translations
-      run: npm run locale
+      run: pnpm locale
       env:
         OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
       working-directory: ComfyUI_frontend

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

@@ -19,11 +19,16 @@ jobs:
           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: 'npm'
+          cache: 'pnpm'
 
       - name: Cache tool outputs
         uses: actions/cache@v4
@@ -34,20 +39,20 @@ jobs:
             tsconfig.tsbuildinfo
             .prettierCache
             .knip-cache
-          key: lint-format-cache-${{ runner.os }}-${{ hashFiles('**/package-lock.json') }}-${{ hashFiles('src/**/*.{ts,vue,js,mts}', '*.config.*', '.eslintrc.*', '.prettierrc.*', 'tsconfig.json') }}
+          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('**/package-lock.json') }}-
+            lint-format-cache-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}-
             lint-format-cache-${{ runner.os }}-
             ci-tools-cache-${{ runner.os }}-
 
       - name: Install dependencies
-        run: npm ci
+        run: pnpm install --frozen-lockfile
 
       - name: Run ESLint with auto-fix
-        run: npm run lint:fix
+        run: pnpm lint:fix
 
       - name: Run Prettier with auto-format
-        run: npm run format
+        run: pnpm format
 
       - name: Check for changes
         id: verify-changed-files
@@ -69,9 +74,9 @@ jobs:
 
       - name: Final validation
         run: |
-          npm run lint
+          pnpm lint
-          npm run format:check
+          pnpm format:check
-          npm run knip
+          pnpm 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
@@ -96,5 +101,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\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.'
+              body: '## ⚠️ Linting/Formatting Issues Found\n\nThis PR has linting or formatting issues that need to be fixed.\n\n**Since this PR is from a fork, auto-fix cannot be applied automatically.**\n\n### Option 1: Set up pre-commit hooks (recommended)\nRun this once to automatically format code on every commit:\n```bash\npnpm prepare\n```\n\n### Option 2: Fix manually\nRun these commands and push the changes:\n```bash\npnpm lint:fix\npnpm format\n```\n\nSee [CONTRIBUTING.md](https://github.com/Comfy-Org/ComfyUI_frontend/blob/main/CONTRIBUTING.md#git-pre-commit-hooks) for more details.'
             })

.github/workflows/release.yaml

@@ -19,10 +19,14 @@ 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: 'npm'
+          cache: 'pnpm'
 
       - name: Cache tool outputs
         uses: actions/cache@v4
@@ -30,7 +34,7 @@ jobs:
           path: |
             .cache
             tsconfig.tsbuildinfo
-          key: release-tools-cache-${{ runner.os }}-${{ hashFiles('**/package-lock.json') }}
+          key: release-tools-cache-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
           restore-keys: |
             release-tools-cache-${{ runner.os }}-
 
@@ -53,9 +57,9 @@ jobs:
           ALGOLIA_API_KEY: ${{ secrets.ALGOLIA_API_KEY }}
           USE_PROD_CONFIG: 'true'
         run: |
-          npm ci
+          pnpm install --frozen-lockfile
-          npm run build
+          pnpm build
-          npm run zipdist
+          pnpm zipdist
       - name: Upload dist artifact
         uses: actions/upload-artifact@v4
         with:
@@ -125,10 +129,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: 'npm'
+          cache: 'pnpm'
           registry-url: https://registry.npmjs.org
 
       - name: Cache tool outputs
@@ -138,14 +146,14 @@ jobs:
             .cache
             tsconfig.tsbuildinfo
             dist
-          key: types-tools-cache-${{ runner.os }}-${{ hashFiles('**/package-lock.json') }}
+          key: types-tools-cache-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
           restore-keys: |
             types-tools-cache-${{ runner.os }}-
 
-      - run: npm ci
+      - run: pnpm install --frozen-lockfile
-      - run: npm run build:types
+      - run: pnpm build:types
       - name: Publish package
-        run: npm publish --access public
+        run: pnpm publish --access public
         working-directory: dist
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

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

@@ -10,7 +10,7 @@ jobs:
     runs-on: ubuntu-latest
     if: github.event.label.name == 'New Browser Test Expectations'
     steps:
-    - uses: Comfy-Org/ComfyUI_frontend_setup_action@v2.3
+    - uses: Comfy-Org/ComfyUI_frontend_setup_action@v3
     - name: Install Playwright Browsers
       run: npx playwright install chromium --with-deps
       working-directory: ComfyUI_frontend

.github/workflows/test-ui.yaml

@@ -37,11 +37,16 @@ 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: 'npm'
+          cache: 'pnpm'
-          cache-dependency-path: 'ComfyUI_frontend/package-lock.json'
+          cache-dependency-path: 'ComfyUI_frontend/pnpm-lock.yaml'
 
       - name: Get current time
         id: current-time
@@ -61,7 +66,7 @@ jobs:
 
             ---
 
-            <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;" />
+            <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-left: 4px;" />
             <bold>[${{ steps.current-time.outputs.time }} UTC] Preparing browser tests across multiple browsers...</bold>
 
             ---
@@ -73,16 +78,16 @@ jobs:
           path: |
             ComfyUI_frontend/.cache
             ComfyUI_frontend/tsconfig.tsbuildinfo
-          key: playwright-setup-cache-${{ runner.os }}-${{ hashFiles('ComfyUI_frontend/package-lock.json') }}-${{ hashFiles('ComfyUI_frontend/src/**/*.{ts,vue,js}', 'ComfyUI_frontend/*.config.*') }}
+          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/package-lock.json') }}-
+            playwright-setup-cache-${{ runner.os }}-${{ hashFiles('ComfyUI_frontend/pnpm-lock.yaml') }}-
             playwright-setup-cache-${{ runner.os }}-
             playwright-tools-cache-${{ runner.os }}-
 
       - name: Build ComfyUI_frontend
         run: |
-          npm ci
+          pnpm install --frozen-lockfile
-          npm run build
+          pnpm build
         working-directory: ComfyUI_frontend
 
       - name: Generate cache key
@@ -129,6 +134,11 @@ 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'
@@ -158,7 +168,7 @@ jobs:
           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;" />
+            <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-left: 4px;" />
             <bold>${{ matrix.browser }}</bold>: Running tests...
 
       - name: Install requirements
@@ -179,9 +189,9 @@ jobs:
         uses: actions/cache@v4
         with:
           path: ~/.cache/ms-playwright
-          key: playwright-browsers-${{ runner.os }}-${{ hashFiles('ComfyUI_frontend/package-lock.json') }}-${{ matrix.browser }}
+          key: playwright-browsers-${{ runner.os }}-${{ hashFiles('ComfyUI_frontend/pnpm-lock.yaml') }}-${{ matrix.browser }}
           restore-keys: |
-            playwright-browsers-${{ runner.os }}-${{ hashFiles('ComfyUI_frontend/package-lock.json') }}-
+            playwright-browsers-${{ runner.os }}-${{ hashFiles('ComfyUI_frontend/pnpm-lock.yaml') }}-
             playwright-browsers-${{ runner.os }}-
 
       - name: Install Playwright Browsers
@@ -189,7 +199,7 @@ jobs:
         working-directory: ComfyUI_frontend
 
       - name: Install Wrangler
-        run: npm install -g wrangler
+        run: pnpm install -g wrangler
 
       - name: Run Playwright tests (${{ matrix.browser }})
         id: playwright

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

@@ -14,28 +14,33 @@ 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: 'npm'
+          cache: 'pnpm'
 
       - name: Cache tool outputs
         uses: actions/cache@v4
         with:
           path: |
             .cache
-          key: electron-types-tools-cache-${{ runner.os }}-${{ hashFiles('**/package-lock.json') }}
+          key: electron-types-tools-cache-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
           restore-keys: |
             electron-types-tools-cache-${{ runner.os }}-
 
       - name: Update electron types
-        run: npm install @comfyorg/comfyui-electron-types@latest
+        run: pnpm 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('./package-lock.json')).packages['node_modules/@comfyorg/comfyui-electron-types'].version)")
+          NEW_VERSION=$(node -e "console.log(JSON.parse(require('fs').readFileSync('./pnpm-lock.yaml')).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,23 +19,28 @@ 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: 'npm'
+          cache: 'pnpm'
 
       - name: Cache tool outputs
         uses: actions/cache@v4
         with:
           path: |
             .cache
-          key: update-manager-tools-cache-${{ runner.os }}-${{ hashFiles('**/package-lock.json') }}
+          key: update-manager-tools-cache-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
           restore-keys: |
             update-manager-tools-cache-${{ runner.os }}-
 
       - name: Install dependencies
-        run: npm ci
+        run: pnpm install --frozen-lockfile
 
       - name: Cache ComfyUI-Manager repository
         uses: actions/cache@v4
@@ -81,7 +86,7 @@ jobs:
       - name: Lint generated types
         run: |
           echo "Linting generated ComfyUI-Manager API types..."
-          npm run lint:fix:no-cache -- ./src/types/generatedManagerTypes.ts
+          pnpm lint:fix:no-cache -- ./src/types/generatedManagerTypes.ts
 
       - name: Check for changes
         id: check-changes

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

@@ -18,23 +18,28 @@ 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: 'npm'
+          cache: 'pnpm'
 
       - name: Cache tool outputs
         uses: actions/cache@v4
         with:
           path: |
             .cache
-          key: update-registry-tools-cache-${{ runner.os }}-${{ hashFiles('**/package-lock.json') }}
+          key: update-registry-tools-cache-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
           restore-keys: |
             update-registry-tools-cache-${{ runner.os }}-
 
       - name: Install dependencies
-        run: npm ci
+        run: pnpm install --frozen-lockfile
 
       - name: Cache comfy-api repository
         uses: actions/cache@v4
@@ -81,7 +86,7 @@ jobs:
       - name: Lint generated types
         run: |
           echo "Linting generated Comfy Registry API types..."
-          npm run lint:fix:no-cache -- ./src/types/comfyRegistryTypes.ts
+          pnpm lint:fix:no-cache -- ./src/types/comfyRegistryTypes.ts
 
       - name: Check for changes
         id: check-changes

.github/workflows/version-bump.yaml

@@ -26,16 +26,21 @@ 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: 'npm'
+          cache: 'pnpm'
 
       - name: Bump version
         id: bump-version
         run: |
-          npm version ${{ github.event.inputs.version_type }} --preid ${{ github.event.inputs.pre_release }} --no-git-tag-version
+          pnpm 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,11 +13,16 @@ 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: 'npm'
+        cache: 'pnpm'
 
     - name: Cache tool outputs
       uses: actions/cache@v4
@@ -26,16 +31,16 @@ jobs:
           .cache
           coverage
           .vitest-cache
-        key: vitest-cache-${{ runner.os }}-${{ hashFiles('**/package-lock.json') }}-${{ hashFiles('src/**/*.{ts,vue,js}', 'vitest.config.*', 'tsconfig.json') }}
+        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('**/package-lock.json') }}-
+          vitest-cache-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}-
           vitest-cache-${{ runner.os }}-
           test-tools-cache-${{ runner.os }}-
 
     - name: Install dependencies
-      run: npm ci
+      run: pnpm install --frozen-lockfile
 
     - name: Run Vitest tests
       run: |
-        npm run test:component
+        pnpm test:component
-        npm run test:unit
+        pnpm test:unit

.gitignore

@@ -10,7 +10,6 @@ lerna-debug.log*
 # Package manager lockfiles (allow users to use different package managers)
 bun.lock
 bun.lockb
-pnpm-lock.yaml
 yarn.lock
 
 # Cache files

.storybook/CLAUDE.md

@@ -2,9 +2,9 @@
 
 ## Quick Commands
 
-- `npm run storybook`: Start Storybook development server
+- `pnpm storybook`: Start Storybook development server
-- `npm run build-storybook`: Build static Storybook
+- `pnpm build-storybook`: Build static Storybook
-- `npm run test:component`: Run component tests (includes Storybook components)
+- `pnpm 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 `npm run typecheck` to verify TypeScript
+   - Run `pnpm typecheck` to verify TypeScript
-   - Run `npm run lint` to check for linting issues
+   - Run `pnpm 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
-npm run typecheck
+pnpm typecheck
 
 # Lint Storybook files
-npm run lint .storybook/
+pnpm lint .storybook/
 
 # Build to check for production issues
-npm run build-storybook
+pnpm 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
-npm run storybook
+pnpm storybook
 
 # Build static Storybook for deployment
-npm run build-storybook
+pnpm build-storybook
 ```
 
 ### Creating Stories

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
-- `npm run dev`: Start Vite dev server.
+- `pnpm dev`: Start Vite dev server.
-- `npm run dev:electron`: Dev server with Electron API mocks.
+- `pnpm dev:electron`: Dev server with Electron API mocks.
-- `npm run build`: Type-check then production build to `dist/`.
+- `pnpm build`: Type-check then production build to `dist/`.
-- `npm run preview`: Preview the production build locally.
+- `pnpm preview`: Preview the production build locally.
-- `npm run test:unit`: Run Vitest unit tests (`tests-ui/`).
+- `pnpm test:unit`: Run Vitest unit tests (`tests-ui/`).
-- `npm run test:component`: Run component tests (`src/components/`).
+- `pnpm test:component`: Run component tests (`src/components/`).
-- `npm run test:browser`: Run Playwright E2E tests (`browser_tests/`).
+- `pnpm test:browser`: Run Playwright E2E tests (`browser_tests/`).
-- `npm run lint` / `npm run lint:fix`: Lint (ESLint). `npm run format` / `format:check`: Prettier.
+- `pnpm lint` / `pnpm lint:fix`: Lint (ESLint). `pnpm format` / `format:check`: Prettier.
-- `npm run typecheck`: Vue TSC type checking.
+- `pnpm 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 `npm run format` before committing.
+- Imports: sorted/grouped by plugin; run `pnpm 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: `npm run lint`, `npm run typecheck`, and relevant tests must pass. Keep PRs focused and small.
+- Quality gates: `pnpm lint`, `pnpm typecheck`, and relevant tests must pass. Keep PRs focused and small.
 
 ## Security & Configuration Tips
 - Secrets: Use `.env` (see `.env_example`); do not commit secrets.

CLAUDE.md

@@ -2,13 +2,13 @@
 
 ## Quick Commands
 
-- `npm run`: See all available commands
+- `pnpm`: See all available commands
-- `npm run typecheck`: Type checking
+- `pnpm typecheck`: Type checking
-- `npm run lint`: Linting
+- `pnpm lint`: Linting
-- `npm run format`: Prettier formatting
+- `pnpm format`: Prettier formatting
-- `npm run test:component`: Run component tests with browser environment
+- `pnpm test:component`: Run component tests with browser environment
-- `npm run test:unit`: Run all unit tests
+- `pnpm test:unit`: Run all unit tests
-- `npm run test:unit -- tests-ui/tests/example.test.ts`: Run single test file
+- `pnpm test:unit -- tests-ui/tests/example.test.ts`: Run single test file
 
 ## Development Workflow
 

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 (v16 or later; v20/v22 strongly recommended) and npm
+  - Node.js (v16 or later; v24 strongly recommended) and pnpm
   - 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
-   npm install
+   pnpm install
    ```
 
 3. Configure environment (optional):
@@ -57,13 +57,13 @@ python main.py --port 8188
 
 ### Git pre-commit hooks
 
-Run `npm run prepare` to install Git pre-commit hooks. Currently, the pre-commit hook is used to auto-format code on commit.
+Run `pnpm 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 `npm run dev` to start the dev server
+- Run `pnpm dev` to start the dev server
-- Run `npm run dev:electron` to start the dev server with electron API mocked
+- Run `pnpm 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 `npm i`, the Playwright MCP server will be automatically available when you start Claude Code locally.
+After installing dependencies with `pnpm 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
 
-- `npm i` to install all dependencies
+- `pnpm i` to install all dependencies
-- `npm run test:unit` to execute all unit tests
+- `pnpm test:unit` to execute all unit tests
 
 ### Component Tests
 
 Component tests verify Vue components in `src/components/`.
 
-- `npm run test:component` to execute all component tests
+- `pnpm 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
-npm run test:unit
+pnpm test:unit
-npm run test:component
+pnpm test:component
-npm run test:browser
+pnpm test:browser
-npm run typecheck
+pnpm typecheck
-npm run lint
+pnpm lint
-npm run format
+pnpm format
 ```
 
 ## Code Style Guidelines

browser_tests/tests/selectionToolbox.spec.ts

@@ -43,7 +43,7 @@ test.describe('Selection Toolbox', () => {
     const boundingBox = await toolboxContainer.boundingBox()
     expect(boundingBox).not.toBeNull()
     // Canvas-based positioning can vary, just verify toolbox appears in reasonable bounds
-    expect(boundingBox!.x).toBeGreaterThan(-100) // Not too far off-screen left
+    expect(boundingBox!.x).toBeGreaterThan(-200) // Not too far off-screen left
     expect(boundingBox!.x).toBeLessThan(1000) // Not too far off-screen right
     expect(boundingBox!.y).toBeGreaterThan(-100) // Not too far off-screen top
   })

docs/extensions/development.md

@@ -105,7 +105,7 @@ The alternative would have been breaking all existing extensions or staying with
 
 Build the frontend for full functionality:
 ```bash
-npm run build
+pnpm build
 ```
 
 For faster iteration during development, use watch mode:

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comfyorg/comfyui-frontend",
   "private": true,
-  "version": "1.26.6",
+  "version": "1.26.7",
   "type": "module",
   "repository": "https://github.com/Comfy-Org/ComfyUI_frontend",
   "homepage": "https://comfy.org",
@@ -10,7 +10,7 @@
   "scripts": {
     "dev": "vite",
     "dev:electron": "vite --config vite.electron.config.mts",
-    "build": "npm run typecheck && vite build",
+    "build": "pnpm typecheck && vite build",
     "build:types": "vite build --config vite.types.config.mts && node scripts/prepare-types.js",
     "zipdist": "node scripts/zipdist.js",
     "typecheck": "vue-tsc --noEmit",
@@ -21,6 +21,7 @@
     "test:browser": "npx playwright test",
     "test:unit": "vitest run tests-ui/tests",
     "test:component": "vitest run src/components/",
+    "preinstall": "npx only-allow pnpm",
     "prepare": "husky || true && git config blame.ignoreRevsFile .git-blame-ignore-revs || true",
     "preview": "vite preview",
     "lint": "eslint src --cache",
@@ -45,6 +46,7 @@
     "@pinia/testing": "^0.1.5",
     "@playwright/test": "^1.52.0",
     "@storybook/addon-docs": "^9.1.1",
+    "@storybook/vue3": "^9.1.1",
     "@storybook/vue3-vite": "^9.1.1",
     "@trivago/prettier-plugin-sort-imports": "^5.2.0",
     "@types/dompurify": "^3.0.5",
@@ -56,6 +58,7 @@
     "@vue/test-utils": "^2.4.6",
     "autoprefixer": "^10.4.19",
     "chalk": "^5.3.0",
+    "commander": "^14.0.0",
     "eslint": "^9.12.0",
     "eslint-config-prettier": "^10.1.2",
     "eslint-plugin-prettier": "^5.2.6",
@@ -67,11 +70,14 @@
     "happy-dom": "^15.11.0",
     "husky": "^9.0.11",
     "identity-obj-proxy": "^3.0.0",
+    "ink": "^4.2.0",
     "knip": "^5.62.0",
     "lint-staged": "^15.2.7",
     "lucide-vue-next": "^0.540.0",
     "postcss": "^8.4.39",
     "prettier": "^3.3.2",
+    "react": "^18.3.1",
+    "react-reconciler": "^0.29.2",
     "storybook": "^9.1.1",
     "tailwindcss": "^3.4.4",
     "tsx": "^4.15.6",
@@ -79,6 +85,7 @@
     "typescript-eslint": "^8.0.0",
     "unplugin-icons": "^0.22.0",
     "unplugin-vue-components": "^0.28.0",
+    "uuid": "^11.1.0",
     "vite": "^5.4.19",
     "vite-plugin-dts": "^4.3.0",
     "vite-plugin-html": "^3.2.2",
@@ -92,8 +99,14 @@
     "@alloc/quick-lru": "^5.2.0",
     "@atlaskit/pragmatic-drag-and-drop": "^1.3.1",
     "@comfyorg/comfyui-electron-types": "^0.4.43",
+    "@primeuix/forms": "0.0.2",
+    "@primeuix/styled": "0.3.2",
+    "@primeuix/utils": "^0.3.2",
+    "@primevue/core": "^4.2.5",
     "@primevue/forms": "^4.2.5",
+    "@primevue/icons": "4.2.5",
     "@primevue/themes": "^4.2.5",
+    "@sentry/core": "^10.5.0",
     "@sentry/vue": "^8.48.0",
     "@tiptap/core": "^2.10.4",
     "@tiptap/extension-link": "^2.10.4",
@@ -113,8 +126,10 @@
     "es-toolkit": "^1.39.9",
     "extendable-media-recorder": "^9.2.27",
     "extendable-media-recorder-wav-encoder": "^7.0.129",
+    "fast-glob": "^3.3.3",
     "firebase": "^11.6.0",
     "fuse.js": "^7.0.0",
+    "glob": "^11.0.3",
     "jsondiffpatch": "^0.6.0",
     "loglevel": "^1.9.2",
     "marked": "^15.0.11",

playwright.config.ts

@@ -90,8 +90,8 @@ export default defineConfig({
 
   /* Run your local dev server before starting the tests */
   // webServer: {
-  //   command: 'npm run start',
+  //   command: 'pnpm dev',
-  //   url: 'http://127.0.0.1:3000',
+  //   url: 'http://127.0.0.1:5173',
   //   reuseExistingServer: !process.env.CI,
   // },
 })

pnpm-workspace.yaml

@@ -0,0 +1,15 @@
+packages:
+  - apps/**
+  - packages/**
+
+ignoredBuiltDependencies:
+  - '@firebase/util'
+  - protobufjs
+  - vue-demi
+
+onlyBuiltDependencies:
+  - '@playwright/browser-chromium'
+  - '@playwright/browser-firefox'
+  - '@playwright/browser-webkit'
+  - esbuild
+  - oxc-resolver

src/components/dialog/content/SettingDialogContent.vue

@@ -118,7 +118,7 @@ const sortedGroups = (category: SettingTreeNode): ISettingGroup[] => {
 }
 
 const handleSearch = (query: string) => {
-  handleSearchBase(query)
+  handleSearchBase(query.trim())
   activeCategory.value = query ? null : defaultCategory.value
 }
 

src/components/graph/SelectionToolbox.vue

@@ -1,16 +1,13 @@
 <template>
-  <Transition name="slide-up">
+  <div
-    <!-- Wrapping panel in div to get correct ref because panel ref is not of raw dom el -->
+    ref="toolboxRef"
-    <div
+    style="transform: translate(var(--tb-x), var(--tb-y))"
-      v-show="visible"
+    class="fixed left-0 top-0 z-40"
-      ref="toolboxRef"
+  >
-      style="
+    <Transition name="slide-up">
-        transform: translate(calc(var(--tb-x) - 50%), calc(var(--tb-y) - 120%));
-      "
-      class="selection-toolbox fixed left-0 top-0 z-40"
-    >
       <Panel
-        class="rounded-lg"
+        v-if="visible"
+        class="rounded-lg selection-toolbox"
         :pt="{
           header: 'hidden',
           content: 'p-0 flex flex-row'
@@ -33,8 +30,8 @@
         />
         <HelpButton />
       </Panel>
-    </div>
+    </Transition>
-  </Transition>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -84,22 +81,31 @@ const extensionToolboxCommands = computed<ComfyCommandImpl[]>(() => {
 </script>
 
 <style scoped>
+.selection-toolbox {
+  transform: translateX(-50%) translateY(-120%);
+  will-change: transform, opacity;
+}
+
+@keyframes slideUp {
+  0% {
+    transform: translateX(-50%) translateY(-100%);
+    opacity: 0;
+  }
+  50% {
+    transform: translateX(-50%) translateY(-125%);
+    opacity: 0.5;
+  }
+  100% {
+    transform: translateX(-50%) translateY(-120%);
+    opacity: 1;
+  }
+}
+
 .slide-up-enter-active {
-  opacity: 1;
+  animation: slideUp 125ms ease-out;
-  transition: all 0.3s ease-out;
 }
 
 .slide-up-leave-active {
-  transition: none;
+  animation: slideUp 25ms ease-out reverse;
-}
-
-.slide-up-enter-from {
-  transform: translateY(-100%);
-  opacity: 0;
-}
-
-.slide-up-leave-to {
-  transform: translateY(0);
-  opacity: 0;
 }
 </style>

src/components/helpcenter/WhatsNewPopup.vue

@@ -136,8 +136,6 @@ const closePopup = async () => {
   hide()
 }
 
-// Learn more handled by anchor href
-
 // const handleCTA = async () => {
 //   window.open('https://docs.comfy.org/installation/update_comfyui', '_blank')
 //   await closePopup()
@@ -161,8 +159,10 @@ defineExpose({
 <style scoped>
 /* Popup container - positioning handled by parent */
 .whats-new-popup-container {
+  --whats-new-popup-bottom: 1rem;
+
   position: absolute;
-  bottom: 1rem;
+  bottom: var(--whats-new-popup-bottom);
   z-index: 1000;
   pointer-events: auto;
 }
@@ -171,8 +171,8 @@ defineExpose({
 .help-center-arrow {
   position: absolute;
   bottom: calc(
-    var(--sidebar-width, 4rem) + 0.25rem
+    var(--sidebar-width) * 2 + var(--sidebar-width) / 2
-  ); /* Position toward center of help center icon */
+  ); /* Position to center of help center icon (2 icons below + half icon height for center) */
   transform: none;
   z-index: 999;
   pointer-events: none;
@@ -185,7 +185,10 @@ defineExpose({
 
 .whats-new-popup-container.sidebar-left.small-sidebar .help-center-arrow {
   left: -14px; /* Overlap with popup outline */
-  bottom: calc(2.5rem + 0.25rem); /* Adjust for small sidebar */
+  bottom: calc(
+    var(--sidebar-width) * 2 + var(--sidebar-icon-size) / 2 -
+      var(--whats-new-popup-bottom)
+  ); /* Position to center of help center icon (2 icons below + half icon height for center - whats new popup bottom position ) */
 }
 
 /* Sidebar positioning classes applied by parent */

src/components/sidebar/SideToolbar.vue

@@ -76,6 +76,22 @@ const getTabTooltipSuffix = (tab: SidebarTabExtension) => {
 }
 </script>
 
+<style>
+/* Global CSS variables for sidebar
+ * These variables need to be global (not scoped) because they are used by
+ * teleported components like WhatsNewPopup that render outside the sidebar
+ * but need to reference sidebar dimensions for proper positioning.
+ */
+:root {
+  --sidebar-width: 4rem;
+  --sidebar-icon-size: 1rem;
+}
+
+:root:has(.side-tool-bar-container.small-sidebar) {
+  --sidebar-width: 2.5rem;
+}
+</style>
+
 <style scoped>
 .side-tool-bar-container {
   display: flex;
@@ -88,9 +104,6 @@ const getTabTooltipSuffix = (tab: SidebarTabExtension) => {
   background-color: var(--comfy-menu-secondary-bg);
   color: var(--fg-color);
   box-shadow: var(--bar-shadow);
-
-  --sidebar-width: 4rem;
-  --sidebar-icon-size: 1rem;
 }
 
 .side-tool-bar-container.small-sidebar {

src/composables/node/useNodePricing.ts

@@ -1332,6 +1332,9 @@ const apiNodeCosts: Record<string, { displayPrice: string | PricingFunction }> =
         return 'Token-based'
       }
     },
+    GeminiImageNode: {
+      displayPrice: '$0.03 per 1K tokens'
+    },
     // OpenAI nodes
     OpenAIChatNode: {
       displayPrice: (node: LGraphNode): string => {

src/composables/useCoreCommands.ts

@@ -446,6 +446,9 @@ export function useCoreCommands(): ComfyCommand[] {
         )
         group.resizeTo(canvas.selectedItems, padding)
         canvas.graph?.add(group)
+
+        group.recomputeInsideNodes()
+
         useTitleEditorStore().titleEditorTarget = group
       }
     },

src/constants/coreMenuCommands.ts

@@ -13,6 +13,7 @@ export const CORE_MENU_COMMANDS = [
   ],
   [['Edit'], ['Comfy.Undo', 'Comfy.Redo']],
   [['Edit'], ['Comfy.OpenClipspace']],
+  [['Edit'], ['Comfy.RefreshNodeDefinitions']],
   [
     ['Help'],
     [

src/extensions/core/groupOptions.ts

@@ -42,6 +42,8 @@ app.registerExtension({
               this.graph.add(group)
               // @ts-expect-error fixme ts strict error
               this.graph.change()
+
+              group.recomputeInsideNodes()
             }
           })
         }

src/lib/litegraph/CLAUDE.md

@@ -9,9 +9,9 @@
 
 # Bash commands
 
-- `npm run typecheck` Run the typechecker
+- `pnpm typecheck` Run the typechecker
-- `npm run build` Build the project
+- `pnpm build` Build the project
-- `npm run lint:fix` Run ESLint
+- `pnpm lint:fix` Run ESLint
 
 # Code style
 

src/lib/litegraph/README.md

@@ -152,7 +152,7 @@ Use GitHub actions to release normal versions.
 
 ### Pre-release
 
-The action directly translates `Version increment type` to the npm version command. `Pre-release ID (suffix)` is the option for the `--preid` argument.
+The action directly translates `Version increment type` to the pnpm version command. `Pre-release ID (suffix)` is the option for the `--preid` argument.
 
 e.g. Use `prerelease` increment type to automatically bump the patch version and create a pre-release version. Subsequent runs of prerelease will update the prerelease version only.
 Use `patch` when ready to remove the pre-release suffix.

src/locales/CONTRIBUTING.md

@@ -79,19 +79,20 @@ const messages = {
 #### Option A: Local Generation (Optional)
 ```bash
 # Only if you have OpenAI API key configured
-npm run locale
+pnpm locale
 ```
 
 #### Option B: Let CI Handle It (Recommended)
 - Create your PR with the configuration changes above
-- Our GitHub CI will automatically generate translation files
+- **Important**: Translation files will be generated during release PRs, not feature PRs
-- Empty JSON files are fine - they'll be populated by the workflow
+- Empty JSON files are fine - they'll be populated during the next release workflow
+- For urgent translation needs, maintainers can manually trigger the workflow
 
 ### Step 3: Test Your Changes
 
 ```bash
-npm run typecheck  # Check for TypeScript errors
+pnpm typecheck  # Check for TypeScript errors
-npm run dev        # Start development server
+pnpm dev        # Start development server
 ```
 
 **Testing checklist:**
@@ -110,11 +111,23 @@ npm run dev        # Start development server
 
 ## What Happens in CI
 
-Our automated translation workflow:
+Our automated translation workflow now runs on release PRs (version-bump-* branches) to improve development performance:
+
+### For Feature PRs (Regular Development)
+- **No automatic translations** - faster reviews and fewer conflicts
+- **English-only development** - new strings show in English until release
+- **Focus on functionality** - reviewers see only your actual changes
+
+### For Release PRs (version-bump-* branches)
 1. **Collects strings**: Scans the UI for translatable text
-2. **Updates English files**: Ensures all strings are captured
+2. **Updates English files**: Ensures all strings are captured  
 3. **Generates translations**: Uses OpenAI API to translate to all configured languages
-4. **Commits back**: Automatically updates your PR with complete translations
+4. **Commits back**: Automatically updates the release PR with complete translations
+
+### Manual Translation Updates
+If urgent translation updates are needed outside of releases, maintainers can:
+- Trigger the "Update Locales" workflow manually from GitHub Actions
+- The workflow supports manual dispatch for emergency translation updates
 
 ## File Structure
 

src/locales/ar/main.json

@@ -341,6 +341,7 @@
     "micPermissionDenied": "تم رفض إذن الميكروفون",
     "migrate": "ترحيل",
     "missing": "مفقود",
+    "moreWorkflows": "المزيد من سير العمل",
     "name": "الاسم",
     "newFolder": "مجلد جديد",
     "next": "التالي",

src/locales/es/main.json

@@ -341,6 +341,7 @@
     "micPermissionDenied": "Permiso de micrófono denegado",
     "migrate": "Migrar",
     "missing": "Faltante",
+    "moreWorkflows": "Más flujos de trabajo",
     "name": "Nombre",
     "newFolder": "Nueva carpeta",
     "next": "Siguiente",

src/locales/fr/main.json

@@ -341,6 +341,7 @@
     "micPermissionDenied": "Permission du microphone refusée",
     "migrate": "Migrer",
     "missing": "Manquant",
+    "moreWorkflows": "Plus de workflows",
     "name": "Nom",
     "newFolder": "Nouveau dossier",
     "next": "Suivant",

src/locales/ja/main.json

@@ -341,6 +341,7 @@
     "micPermissionDenied": "マイクの許可が拒否されました",
     "migrate": "移行する",
     "missing": "不足している",
+    "moreWorkflows": "さらに多くのワークフロー",
     "name": "名前",
     "newFolder": "新しいフォルダー",
     "next": "次へ",

src/locales/ko/main.json

@@ -341,6 +341,7 @@
     "micPermissionDenied": "마이크 권한이 거부되었습니다",
     "migrate": "이전(migrate)",
     "missing": "누락됨",
+    "moreWorkflows": "더 많은 워크플로우",
     "name": "이름",
     "newFolder": "새 폴더",
     "next": "다음",

src/locales/ru/main.json

@@ -341,6 +341,7 @@
     "micPermissionDenied": "Доступ к микрофону запрещён",
     "migrate": "Мигрировать",
     "missing": "Отсутствует",
+    "moreWorkflows": "Больше рабочих процессов",
     "name": "Имя",
     "newFolder": "Новая папка",
     "next": "Далее",

src/locales/zh-TW/main.json

@@ -341,6 +341,7 @@
     "micPermissionDenied": "麥克風權限被拒絕",
     "migrate": "遷移",
     "missing": "缺少",
+    "moreWorkflows": "更多工作流程",
     "name": "名稱",
     "newFolder": "新資料夾",
     "next": "下一步",

src/locales/zh/main.json

@@ -341,6 +341,7 @@
     "micPermissionDenied": "麦克风权限被拒绝",
     "migrate": "迁移",
     "missing": "缺失",
+    "moreWorkflows": "更多工作流",
     "name": "名称",
     "newFolder": "新文件夹",
     "next": "下一个",

src/scripts/app.ts

@@ -63,6 +63,7 @@ import { ExtensionManager } from '@/types/extensionTypes'
 import type { NodeExecutionId } from '@/types/nodeIdentification'
 import { ColorAdjustOptions, adjustColor } from '@/utils/colorUtil'
 import { graphToPrompt } from '@/utils/executionUtil'
+import { forEachNode } from '@/utils/graphTraversalUtil'
 import {
   getNodeByExecutionId,
   triggerCallbackOnAllNodes
@@ -1700,12 +1701,13 @@ export class ComfyApp {
     for (const nodeId in defs) {
       this.registerNodeDef(nodeId, defs[nodeId])
     }
-    for (const node of this.graph.nodes) {
+    // Refresh combo widgets in all nodes including those in subgraphs
+    forEachNode(this.graph, (node) => {
       const def = defs[node.type]
       // Allow primitive nodes to handle refresh
       node.refreshComboInNode?.(defs)
 
-      if (!def?.input) continue
+      if (!def?.input) return
 
       if (node.widgets) {
         const nodeInputs = def.input
@@ -1732,7 +1734,7 @@ export class ComfyApp {
           }
         }
       }
-    }
+    })
 
     await useExtensionService().invokeExtensionsAsync(
       'refreshComboInNodes',

tests-ui/README.md

@@ -33,13 +33,13 @@ To run the tests locally:
 
 ```bash
 # Run unit tests
-npm run test:unit
+pnpm test:unit
 
 # Run unit tests in watch mode
-npm run test:unit:dev
+pnpm test:unit:dev
 
 # Run component tests with browser-native environment
-npm run test:component
+pnpm test:component
 ```
 
 Refer to the specific guides for more detailed information on each testing type.

tests-ui/tests/composables/node/useNodePricing.test.ts

@@ -1561,6 +1561,14 @@ describe('useNodePricing', () => {
         const price = getNodeDisplayPrice(node)
         expect(price).toBe('Token-based')
       })
+
+      it('should return static price for GeminiImageNode', () => {
+        const { getNodeDisplayPrice } = useNodePricing()
+        const node = createMockNode('GeminiImageNode')
+
+        const price = getNodeDisplayPrice(node)
+        expect(price).toBe('$0.03 per 1K tokens')
+      })
     })
 
     describe('Additional RunwayML edge cases', () => {

tests-ui/tests/litegraph/README.md

@@ -18,13 +18,13 @@ litegraph/
 
 ```bash
 # Run all litegraph tests
-npm run test:unit -- tests-ui/tests/litegraph/
+pnpm test:unit -- tests-ui/tests/litegraph/
 
 # Run specific subdirectory
-npm run test:unit -- tests-ui/tests/litegraph/core/
+pnpm test:unit -- tests-ui/tests/litegraph/core/
 
 # Run single test file
-npm run test:unit -- tests-ui/tests/litegraph/core/LGraph.test.ts
+pnpm test:unit -- tests-ui/tests/litegraph/core/LGraph.test.ts
 ```
 
 ## Migration Status