Merge branch 'main' into sno-fix-playwright-pnpm

- Add sno-fix-playwright-pnpm to push triggers in test-ui.yaml workflow
- This ensures Playwright tests run on pushes to current branch

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

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

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

@@ -128,7 +128,22 @@ echo "Last stable release: $LAST_STABLE"
 
 ### Step 4: Analyze Dependency Updates
 
-1. **Check significant dependency updates:**
+1. **Use npm's built-in dependency analysis:**
+   ```bash
+   # Get outdated dependencies with npm
+   npm outdated --format table > outdated-deps-${NEW_VERSION}.txt || echo "No outdated dependencies"
+   
+   # 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
+     npm ls "$dep" >> dep-analysis-${NEW_VERSION}.md 2>&1 || 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 +215,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
-   # 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
+   # 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
      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 +269,41 @@ echo "Last stable release: $LAST_STABLE"
 
 ### Step 7: Security and Dependency Audit
 
-1. Run security audit:
+1. Run npm security audit:
    ```bash
    npm audit --audit-level moderate
    ```
 2. Check for known vulnerabilities in dependencies
-3. Scan for hardcoded secrets or credentials:
+3. Run comprehensive dependency health check:
+   ```bash
+   npm 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. **SECURITY REVIEW**: Address any critical findings before proceeding?
+5. Verify no sensitive data in recent commits
+6. **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?
 
@@ -488,7 +533,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
@@ -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

@@ -0,0 +1,143 @@
+# Setup Repository
+
+Bootstrap the ComfyUI Frontend monorepo with all necessary dependencies and verification checks.
+
+## Overview
+
+This command will:
+1. Install all project dependencies using npm
+2. Verify the project builds successfully
+3. Run unit tests to ensure functionality
+4. 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 Dependencies
+
+```bash
+# Install all dependencies using npm
+echo "Installing project dependencies..."
+npm install
+
+# Verify node_modules exists and has packages
+ls -la node_modules | head -5
+```
+
+## Step 2: Verify Build
+
+```bash
+# Run TypeScript type checking
+echo "Running TypeScript checks..."
+npm run typecheck
+
+# Build the project
+echo "Building project..."
+npm run build
+
+# Verify dist folder was created
+ls -la dist/
+```
+
+## Step 3: Run Unit Tests
+
+```bash
+# Run unit tests
+echo "Running unit tests..."
+npm run 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 4: Verify Development Server
+
+```bash
+# Start development server in background
+echo "Starting development server..."
+npm run 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 5: Final Verification
+
+```bash
+# Run linting to ensure code quality
+echo "Running linter..."
+npm run lint
+
+# Show project status
+echo ""
+echo "🎉 Repository setup complete!"
+echo ""
+echo "Available commands:"
+echo "  npm run dev          - Start development server"
+echo "  npm run build        - Build for production"
+echo "  npm run test:unit    - Run unit tests"
+echo "  npm run test:component - Run component tests"
+echo "  npm run typecheck    - Run TypeScript checks"
+echo "  npm run lint         - Run ESLint"
+echo "  npm run format       - Format code with Prettier"
+echo ""
+echo "Next steps:"
+echo "1. Run 'npm run 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. **Dependencies fail to install**: Try clearing cache with `npm cache clean --force` 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
 

.github/workflows/chromatic.yaml

@@ -12,49 +12,18 @@ jobs:
     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: Comment PR - Build Started
-        if: github.event_name == 'pull_request'
-        continue-on-error: true
-        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: 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: Cache tool outputs
         uses: actions/cache@v4
@@ -63,14 +32,14 @@ jobs:
             .cache
             storybook-static
             tsconfig.tsbuildinfo
-          key: storybook-cache-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}-${{ hashFiles('src/**/*.{ts,vue,js}', '*.config.*', '.storybook/**/*') }}
+          key: storybook-cache-${{ runner.os }}-${{ hashFiles('**/package-lock.json') }}-${{ hashFiles('src/**/*.{ts,vue,js}', '*.config.*', '.storybook/**/*') }}
           restore-keys: |
-            storybook-cache-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}-
+            storybook-cache-${{ runner.os }}-${{ hashFiles('**/package-lock.json') }}-
             storybook-cache-${{ runner.os }}-
             storybook-tools-cache-${{ runner.os }}-
 
       - name: Install dependencies
-        run: pnpm install --frozen-lockfile
+        run: npm ci
 
       - name: Build Storybook and run Chromatic
         id: chromatic
@@ -81,37 +50,3 @@ 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()
-        continue-on-error: true
-        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,15 @@ 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'
+          cache: 'npm'
 
       - 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,14 +16,10 @@ 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'
+          cache: 'npm'
 
       - name: Cache tool outputs
         uses: actions/cache@v4
@@ -32,7 +28,7 @@ jobs:
             .cache
             dist
             tsconfig.tsbuildinfo
-          key: dev-release-tools-cache-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
+          key: dev-release-tools-cache-${{ runner.os }}-${{ hashFiles('**/package-lock.json') }}
           restore-keys: |
             dev-release-tools-cache-${{ runner.os }}-
 
@@ -46,9 +42,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,10 @@ 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'
+        cache: 'npm'
     - uses: actions/setup-python@v4
       with:
         python-version: '3.10'
@@ -68,8 +64,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 +80,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

@@ -20,15 +20,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: 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

@@ -22,7 +22,7 @@ jobs:
         path: |
           ComfyUI_frontend/.cache
           ComfyUI_frontend/.cache
-        key: i18n-tools-cache-${{ runner.os }}-${{ hashFiles('ComfyUI_frontend/pnpm-lock.yaml') }}
+        key: i18n-tools-cache-${{ runner.os }}-${{ hashFiles('ComfyUI_frontend/package-lock.json') }}
         restore-keys: |
           i18n-tools-cache-${{ runner.os }}-
     - name: Install Playwright Browsers
@@ -31,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: pnpm dev:electron &
+      run: npm run dev:electron &
       working-directory: ComfyUI_frontend
     - name: Update en.json
-      run: pnpm collect-i18n -- scripts/collect-i18n-general.ts
+      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/lint-and-format.yaml

@@ -19,16 +19,11 @@ 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: 'pnpm'
+          cache: 'npm'
 
       - name: Cache tool outputs
         uses: actions/cache@v4
@@ -39,20 +34,20 @@ jobs:
             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') }}
+          key: lint-format-cache-${{ runner.os }}-${{ hashFiles('**/package-lock.json') }}-${{ 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 }}-${{ hashFiles('**/package-lock.json') }}-
             lint-format-cache-${{ runner.os }}-
             ci-tools-cache-${{ runner.os }}-
 
       - 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,9 +69,9 @@ 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

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

@@ -0,0 +1,163 @@
+name: PR Playwright Comment
+
+on:
+  workflow_run:
+    workflows: ['Tests CI']
+    types: [requested, completed]
+
+env:
+  DATE_FORMAT: '+%m/%d/%Y, %I:%M:%S %p'
+
+jobs:
+  comment-summary:
+    runs-on: ubuntu-latest
+    if: github.repository == 'Comfy-Org/ComfyUI_frontend' && github.event.workflow_run.event == 'pull_request'
+    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: Generate comment body for start
+        if: steps.pr.outputs.result != 'null' && github.event.action == 'requested'
+        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: Download all deployment info
+        if: steps.pr.outputs.result != 'null' && github.event.action == 'completed'
+        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' && github.event.action == 'completed'
+        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 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: '<!-- PLAYWRIGHT_TEST_STATUS -->'
+          comment-author: 'github-actions[bot]'
+          edit-mode: replace
+          body-path: comment.md
+
+      - name: Comment PR - Tests 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: '<!-- PLAYWRIGHT_TEST_STATUS -->'
+          comment-author: 'github-actions[bot]'
+          edit-mode: replace
+          body-path: comment.md

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

@@ -0,0 +1,101 @@
+name: PR Playwright Deploy
+
+on:
+  workflow_run:
+    workflows: ["Tests CI"]
+    types: [completed]
+
+jobs:
+  deploy-reports:
+    runs-on: ubuntu-latest
+    if: github.repository == 'Comfy-Org/ComfyUI_frontend' && github.event.workflow_run.event == 'pull_request'
+    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 }}

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

@@ -0,0 +1,108 @@
+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'
+    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 == 'success' && 'Build completed successfully!' || '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!' || '⚠️ Please check the workflow logs for error details.' }}

.github/workflows/release.yaml

@@ -19,14 +19,10 @@ 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'
+          cache: 'npm'
 
       - name: Cache tool outputs
         uses: actions/cache@v4
@@ -34,7 +30,7 @@ jobs:
           path: |
             .cache
             tsconfig.tsbuildinfo
-          key: release-tools-cache-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
+          key: release-tools-cache-${{ runner.os }}-${{ hashFiles('**/package-lock.json') }}
           restore-keys: |
             release-tools-cache-${{ runner.os }}-
 
@@ -57,9 +53,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,14 +125,10 @@ 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'
+          cache: 'npm'
           registry-url: https://registry.npmjs.org
 
       - name: Cache tool outputs
@@ -146,14 +138,14 @@ jobs:
             .cache
             tsconfig.tsbuildinfo
             dist
-          key: types-tools-cache-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
+          key: types-tools-cache-${{ runner.os }}-${{ hashFiles('**/package-lock.json') }}
           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-ui.yaml

@@ -2,20 +2,16 @@ name: Tests CI
 
 on:
   push:
-    branches: [main, master, core/*, desktop/*]
+    branches: [main, master, core/*, desktop/*, sno-fix-playwright-pnpm]
   pull_request:
     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
@@ -37,40 +33,12 @@ 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'
+          cache: 'npm'
+          cache-dependency-path: 'ComfyUI_frontend/package-lock.json'
 
-      - 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'
-        continue-on-error: true
-        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: |
-            <!-- 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: Cache tool outputs
         uses: actions/cache@v4
@@ -78,30 +46,22 @@ jobs:
           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.*') }}
+          key: playwright-setup-cache-${{ runner.os }}-${{ hashFiles('ComfyUI_frontend/package-lock.json') }}-${{ 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 }}-${{ hashFiles('ComfyUI_frontend/package-lock.json') }}-
             playwright-setup-cache-${{ runner.os }}-
             playwright-tools-cache-${{ runner.os }}-
 
       - 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:
@@ -114,8 +74,6 @@ jobs:
     needs: setup
     runs-on: ubuntu-latest
     permissions:
-      pull-requests: write
-      issues: write
       contents: read
     strategy:
       fail-fast: false
@@ -134,42 +92,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'
           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'
-        continue-on-error: true
-        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: |
@@ -189,18 +116,15 @@ jobs:
         uses: actions/cache@v4
         with:
           path: ~/.cache/ms-playwright
-          key: playwright-browsers-${{ runner.os }}-${{ hashFiles('ComfyUI_frontend/pnpm-lock.yaml') }}-${{ matrix.browser }}
+          key: playwright-browsers-${{ runner.os }}-${{ hashFiles('ComfyUI_frontend/package-lock.json') }}-${{ matrix.browser }}
           restore-keys: |
-            playwright-browsers-${{ runner.os }}-${{ hashFiles('ComfyUI_frontend/pnpm-lock.yaml') }}-
+            playwright-browsers-${{ runner.os }}-${{ hashFiles('ComfyUI_frontend/package-lock.json') }}-
             playwright-browsers-${{ runner.os }}-
 
       - name: Install Playwright Browsers
         run: npx playwright install chromium --with-deps
         working-directory: ComfyUI_frontend
 
-      - name: Install Wrangler
-        run: pnpm install -g wrangler
-
       - name: Run Playwright tests (${{ matrix.browser }})
         id: playwright
         run: npx playwright test --project=${{ matrix.browser }} --reporter=html
@@ -213,181 +137,3 @@ jobs:
           path: ComfyUI_frontend/playwright-report/
           retention-days: 30
 
-      - name: Deploy to Cloudflare Pages (${{ matrix.browser }})
-        id: cloudflare-deploy
-        if: always()
-        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 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: 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: Upload deployment info
-        if: always()
-        uses: actions/upload-artifact@v4
-        with:
-          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'
-        continue-on-error: true
-        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
-        continue-on-error: true
-        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,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: 'pnpm'
+          cache: 'npm'
 
       - name: Cache tool outputs
         uses: actions/cache@v4
         with:
           path: |
             .cache
-          key: electron-types-tools-cache-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
+          key: electron-types-tools-cache-${{ runner.os }}-${{ hashFiles('**/package-lock.json') }}
           restore-keys: |
             electron-types-tools-cache-${{ runner.os }}-
 
       - name: Update electron types
-        run: pnpm install @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,28 +19,23 @@ 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: Cache tool outputs
         uses: actions/cache@v4
         with:
           path: |
             .cache
-          key: update-manager-tools-cache-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
+          key: update-manager-tools-cache-${{ runner.os }}-${{ hashFiles('**/package-lock.json') }}
           restore-keys: |
             update-manager-tools-cache-${{ runner.os }}-
 
       - name: Install dependencies
-        run: pnpm install --frozen-lockfile
+        run: npm ci
 
       - name: Cache ComfyUI-Manager repository
         uses: actions/cache@v4
@@ -86,7 +81,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,28 +18,23 @@ 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: Cache tool outputs
         uses: actions/cache@v4
         with:
           path: |
             .cache
-          key: update-registry-tools-cache-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
+          key: update-registry-tools-cache-${{ runner.os }}-${{ hashFiles('**/package-lock.json') }}
           restore-keys: |
             update-registry-tools-cache-${{ runner.os }}-
 
       - name: Install dependencies
-        run: pnpm install --frozen-lockfile
+        run: npm ci
 
       - name: Cache comfy-api repository
         uses: actions/cache@v4
@@ -86,7 +81,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,16 +13,11 @@ 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'
+        cache: 'npm'
 
     - name: Cache tool outputs
       uses: actions/cache@v4
@@ -31,16 +26,16 @@ jobs:
           .cache
           coverage
           .vitest-cache
-        key: vitest-cache-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}-${{ hashFiles('src/**/*.{ts,vue,js}', 'vitest.config.*', 'tsconfig.json') }}
+        key: vitest-cache-${{ runner.os }}-${{ hashFiles('**/package-lock.json') }}-${{ hashFiles('src/**/*.{ts,vue,js}', 'vitest.config.*', 'tsconfig.json') }}
         restore-keys: |
-          vitest-cache-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}-
+          vitest-cache-${{ runner.os }}-${{ hashFiles('**/package-lock.json') }}-
           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

@@ -22,6 +22,7 @@ dist-ssr
 *.local
 # Claude configuration
 .claude/*.local.json
+CLAUDE.local.md
 
 # Editor directories and files
 .vscode/*
@@ -76,3 +77,12 @@ 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

@@ -0,0 +1 @@
+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,17 +4,26 @@
     transition: background-color 0.3s ease, color 0.3s ease;
   }
 
-  /* Light theme default */
-  body {
-    background-color: #ffffff;
-    color: #1a1a1a;
+  /* 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;
+    }
   }
 
   /* Dark theme styles */
   body.dark-theme,
   .dark-theme body {
-    background-color: #0a0a0a;
-    color: #e5e5e5;
+    background-color: #202020;
+    color: #fff;
   }
 
   /* Ensure Storybook canvas follows theme */
@@ -24,11 +33,33 @@
 
   .dark-theme .sb-show-main,
   .dark-theme .docs-story {
-    background-color: #0a0a0a !important;
+    background-color: #202020 !important;
   }
 
-  /* Fix for Storybook controls panel in dark mode */
-  .dark-theme .docblock-argstable-body {
-    color: #e5e5e5;
+  /* 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;
   }
 </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,22 +1,52 @@
 # 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 typecheck`: Type checking
-- `pnpm lint`: Linting
-- `pnpm format`: Prettier formatting
-- `pnpm test:component`: Run component tests with browser environment
-- `pnpm test:unit`: Run all unit tests
-- `pnpm test:unit -- tests-ui/tests/example.test.ts`: Run single test file
+- `npm run`: See all available commands
+- `npm run dev`: Start development server (port 5173, via nx)
+- `npm run typecheck`: Type checking
+- `npm run build`: Build for production (via nx)
+- `npm run lint`: Linting (via nx)
+- `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:browser`: Run E2E tests via Playwright
+- `npm run test:unit -- tests-ui/tests/example.test.ts`: Run single test file
+- `npm run storybook`: Start Storybook development server (port 6006)
+- `npm run 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
 
 ## Development Workflow
 
-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
+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
 
 ## Git Conventions
 

CODEOWNERS

@@ -14,4 +14,4 @@
 /src/extensions/core/load3d.ts @jtydhr88 @Comfy-Org/comfy_frontend_devs
 
 # Mask Editor extension
-/src/extensions/core/maskeditor.ts @trsommer @Comfy-Org/comfy_frontend_devs
+/src/extensions/core/maskeditor.ts @brucew4yn3rp @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 (v16 or later; v24 strongly recommended) and pnpm
+  - Node.js (v16 or later; v24 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 install`, 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 install` 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

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/adr/0002-monorepo-conversion.md

@@ -19,14 +19,13 @@ For more information on Monorepos, check out [monorepo.tools](https://monorepo.t
 
 ## Decision
 
-- Swap out NPM for PNPM
 - Add a workspace for the PrimeVue fork
 - Move the frontend code into its own app workspace
 - Longer term: Extract and reorganize common infrastructure to take advantage of the new monorepo tooling
 
 ### Tools proposed
 
-[PNPM](https://pnpm.io/) and [PNPM workspaces](https://pnpm.io/workspaces)
+[npm workspaces](https://docs.npmjs.com/cli/v8/using-npm/workspaces)
 
 For monorepo management, I'd probably go with [Nx](https://nx.dev/), but I could be conviced otherwise.
 There's a [whole list here](https://monorepo.tools/#tools-review) if you're interested.

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
-pnpm build
+npm run build
 ```
 
 For faster iteration during development, use watch mode:

eslint.config.js

@@ -17,9 +17,10 @@ export default [
       'src/scripts/*',
       'src/extensions/core/*',
       'src/types/vue-shim.d.ts',
-      // Generated files that don't need linting
       'src/types/comfyRegistryTypes.ts',
-      'src/types/generatedManagerTypes.ts'
+      'src/types/generatedManagerTypes.ts',
+      '**/vite.config.*.timestamp*',
+      '**/vitest.config.*.timestamp*'
     ]
   },
   {

knip.config.ts

@@ -74,7 +74,7 @@ const config: KnipConfig = {
   // Workspace configuration for monorepo-like structure
   workspaces: {
     '.': {
-      entry: ['src/main.ts']
+      entry: ['src/main.ts', 'playwright.i18n.config.ts']
     }
   }
 }

nx.json

@@ -0,0 +1,40 @@
+{
+  "$schema": "./node_modules/nx/schemas/nx-schema.json",
+  "plugins": [
+    {
+      "plugin": "@nx/eslint/plugin",
+      "options": {
+        "targetName": "lint"
+      }
+    },
+    {
+      "plugin": "@nx/storybook/plugin",
+      "options": {
+        "serveStorybookTargetName": "storybook",
+        "buildStorybookTargetName": "build-storybook",
+        "testStorybookTargetName": "test-storybook",
+        "staticStorybookTargetName": "static-storybook"
+      }
+    },
+    {
+      "plugin": "@nx/vite/plugin",
+      "options": {
+        "buildTargetName": "build",
+        "testTargetName": "test",
+        "serveTargetName": "serve",
+        "devTargetName": "dev",
+        "previewTargetName": "preview",
+        "serveStaticTargetName": "serve-static",
+        "typecheckTargetName": "typecheck",
+        "buildDepsTargetName": "build-deps",
+        "watchDepsTargetName": "watch-deps"
+      }
+    },
+    {
+      "plugin": "@nx/playwright/plugin",
+      "options": {
+        "targetName": "e2e"
+      }
+    }
+  ]
+}

package.json

@@ -7,23 +7,26 @@
   "homepage": "https://comfy.org",
   "description": "Official front-end implementation of ComfyUI",
   "license": "GPL-3.0-only",
+  "workspaces": [
+    "apps/**",
+    "packages/**"
+  ],
   "scripts": {
-    "dev": "vite",
-    "dev:electron": "vite --config vite.electron.config.mts",
-    "build": "pnpm typecheck && vite build",
-    "build:types": "vite build --config vite.types.config.mts && node scripts/prepare-types.js",
+    "dev": "nx serve",
+    "dev:electron": "nx serve --config vite.electron.config.mts",
+    "build": "npm run typecheck && nx build",
+    "build:types": "nx build --config vite.types.config.mts && node scripts/prepare-types.js",
     "zipdist": "node scripts/zipdist.js",
     "typecheck": "vue-tsc --noEmit",
     "format": "prettier --write './**/*.{js,ts,tsx,vue,mts}' --cache",
     "format:check": "prettier --check './**/*.{js,ts,tsx,vue,mts}' --cache",
     "format:no-cache": "prettier --write './**/*.{js,ts,tsx,vue,mts}'",
     "format:check:no-cache": "prettier --check './**/*.{js,ts,tsx,vue,mts}'",
-    "test:browser": "npx playwright test",
-    "test:unit": "vitest run tests-ui/tests",
-    "test:component": "vitest run src/components/",
-    "preinstall": "npx only-allow pnpm",
+    "test:browser": "npx nx e2e",
+    "test:unit": "nx run test tests-ui/tests",
+    "test:component": "nx run test src/components/",
     "prepare": "husky || true && git config blame.ignoreRevsFile .git-blame-ignore-revs || true",
-    "preview": "vite preview",
+    "preview": "nx preview",
     "lint": "eslint src --cache",
     "lint:fix": "eslint src --cache --fix",
     "lint:no-cache": "eslint src",
@@ -31,18 +34,23 @@
     "knip": "knip --cache",
     "knip:no-cache": "knip",
     "locale": "lobe-i18n locale",
-    "collect-i18n": "playwright test --config=playwright.i18n.config.ts",
+    "collect-i18n": "npx playwright test --config=playwright.i18n.config.ts",
     "json-schema": "tsx scripts/generate-json-schema.ts",
-    "storybook": "storybook dev -p 6006",
+    "storybook": "nx storybook -p 6006",
     "build-storybook": "storybook build"
   },
   "devDependencies": {
     "@eslint/js": "^9.8.0",
-    "@executeautomation/playwright-mcp-server": "^1.0.5",
+    "@executeautomation/playwright-mcp-server": "^1.0.6",
     "@iconify/json": "^2.2.245",
     "@iconify/tailwind": "^1.2.0",
     "@intlify/eslint-plugin-vue-i18n": "^3.2.0",
-    "@lobehub/i18n-cli": "^1.20.0",
+    "@lobehub/i18n-cli": "^1.25.1",
+    "@nx/eslint": "21.4.1",
+    "@nx/playwright": "21.4.1",
+    "@nx/storybook": "21.4.1",
+    "@nx/vite": "21.4.1",
+    "@nx/web": "21.4.1",
     "@pinia/testing": "^0.1.5",
     "@playwright/test": "^1.52.0",
     "@storybook/addon-docs": "^9.1.1",
@@ -55,6 +63,7 @@
     "@types/semver": "^7.7.0",
     "@types/three": "^0.169.0",
     "@vitejs/plugin-vue": "^5.1.4",
+    "@vitest/ui": "^3.0.0",
     "@vue/test-utils": "^2.4.6",
     "autoprefixer": "^10.4.19",
     "chalk": "^5.3.0",
@@ -70,14 +79,16 @@
     "happy-dom": "^15.11.0",
     "husky": "^9.0.11",
     "identity-obj-proxy": "^3.0.0",
-    "ink": "^4.2.0",
+    "ink": "^6.2.2",
+    "jiti": "2.4.2",
     "knip": "^5.62.0",
     "lint-staged": "^15.2.7",
     "lucide-vue-next": "^0.540.0",
+    "nx": "21.4.1",
     "postcss": "^8.4.39",
     "prettier": "^3.3.2",
-    "react": "^18.3.1",
-    "react-reconciler": "^0.29.2",
+    "react": "^19.1.1",
+    "react-reconciler": "^0.32.0",
     "storybook": "^9.1.1",
     "tailwindcss": "^3.4.4",
     "tsx": "^4.15.6",
@@ -90,7 +101,7 @@
     "vite-plugin-dts": "^4.3.0",
     "vite-plugin-html": "^3.2.2",
     "vite-plugin-vue-devtools": "^7.7.6",
-    "vitest": "^2.0.0",
+    "vitest": "^3.2.4",
     "vue-tsc": "^2.1.10",
     "zip-dir": "^2.0.0",
     "zod-to-json-schema": "^3.24.1"

playwright.config.ts

@@ -1,39 +1,31 @@
 import { defineConfig, devices } from '@playwright/test'
 
-/**
- * Read environment variables from file.
- * https://github.com/motdotla/dotenv
- */
-// import dotenv from 'dotenv';
-// dotenv.config({ path: path.resolve(__dirname, '.env') });
-
-/**
- * See https://playwright.dev/docs/test-configuration.
- */
 export default defineConfig({
   testDir: './browser_tests',
-  /* Run tests in files in parallel */
   fullyParallel: true,
-  /* Fail the build on CI if you accidentally left test.only in the source code. */
   forbidOnly: !!process.env.CI,
-  /* Retry on CI only - increased for better flaky test handling */
-  retries: process.env.CI ? 3 : 0,
-  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
   reporter: 'html',
-  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  // /* // Toggle for [LOCAL] testing.
+  retries: process.env.CI ? 3 : 0,
   use: {
-    /* Base URL to use in actions like `await page.goto('/')`. */
-    // baseURL: 'http://127.0.0.1:3000',
-
-    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: 'on-first-retry'
   },
-  /* Path to global setup file. Exported function runs once before all the tests */
+  /*/ // [LOCAL]
+  // VERY HELPFUL: Skip screenshot tests locally
+  // grep: process.env.CI ? undefined : /^(?!.*screenshot).*$/,
+  timeout: 30_000, // Longer timeout for breakpoints
+  retries: 0, // No retries while debugging. Increase if writing new tests. that may be flaky.
+  workers: 4, // Single worker for easier debugging. Increase to match CPU cores if you want to run a lot of tests in parallel.
+
+  use: {
+    trace: 'on', // Always capture traces (CI uses 'on-first-retry')
+    video: 'on' // Always record video (CI uses 'retain-on-failure')
+  },
+  //*/
+
   globalSetup: './browser_tests/globalSetup.ts',
-  /* Path to global teardown file. Exported function runs once after all the tests */
   globalTeardown: './browser_tests/globalTeardown.ts',
 
-  /* Configure projects for major browsers */
   projects: [
     {
       name: 'chromium',

playwright.i18n.config.ts

@@ -1,6 +1,6 @@
-import { PlaywrightTestConfig } from '@playwright/test'
+import { defineConfig } from '@playwright/test'
 
-const config: PlaywrightTestConfig = {
+export default defineConfig({
   testDir: './scripts',
   use: {
     baseURL: 'http://localhost:5173',
@@ -9,6 +9,4 @@ const config: PlaywrightTestConfig = {
   reporter: 'list',
   timeout: 60000,
   testMatch: /collect-i18n-.*\.ts/
-}
-
-export default config
+})

pnpm-workspace.yaml

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

src/components/button/MoreButton.stories.ts

@@ -24,22 +24,22 @@ export const Basic: Story = {
         <MoreButton>
           <template #default="{ close }">
             <IconTextButton
-              type="secondary"
+              type="transparent"
               label="Settings"
               @click="() => { close() }"
             >
               <template #icon>
-                <Download />
+                <Download :size="16" />
               </template>
             </IconTextButton>
 
             <IconTextButton
-              type="primary"
+              type="transparent"
               label="Profile"
               @click="() => { close() }"
             >
               <template #icon>
-                <ScrollText />
+                <ScrollText :size="16" />
               </template>
             </IconTextButton>
           </template>

src/components/dialog/content/setting/UserPanel.vue

@@ -57,14 +57,23 @@
           class="w-8 h-8 mt-4"
           style="--pc-spinner-color: #000"
         />
-        <Button
-          v-else
-          class="mt-4 w-32"
-          severity="secondary"
-          :label="$t('auth.signOut.signOut')"
-          icon="pi pi-sign-out"
-          @click="handleSignOut"
-        />
+        <div v-else class="mt-4 flex flex-col gap-2">
+          <Button
+            class="w-32"
+            severity="secondary"
+            :label="$t('auth.signOut.signOut')"
+            icon="pi pi-sign-out"
+            @click="handleSignOut"
+          />
+          <Button
+            v-if="!isApiKeyLogin"
+            class="w-32"
+            severity="danger"
+            :label="$t('auth.deleteAccount.deleteAccount')"
+            icon="pi pi-trash"
+            @click="handleDeleteAccount"
+          />
+        </div>
       </div>
 
       <!-- Login Section -->
@@ -100,6 +109,7 @@ const dialogService = useDialogService()
 const {
   loading,
   isLoggedIn,
+  isApiKeyLogin,
   isEmailProvider,
   userDisplayName,
   userEmail,
@@ -107,6 +117,7 @@ const {
   providerName,
   providerIcon,
   handleSignOut,
-  handleSignIn
+  handleSignIn,
+  handleDeleteAccount
 } = useCurrentUser()
 </script>

src/components/graph/SelectionToolbox.vue

@@ -1,16 +1,13 @@
 <template>
-  <Transition name="slide-up">
-    <!-- Wrapping panel in div to get correct ref because panel ref is not of raw dom el -->
-    <div
-      v-show="visible"
-      ref="toolboxRef"
-      style="
-        transform: translate(calc(var(--tb-x) - 50%), calc(var(--tb-y) - 120%));
-      "
-      class="selection-toolbox fixed left-0 top-0 z-40"
-    >
+  <div
+    ref="toolboxRef"
+    style="transform: translate(var(--tb-x), var(--tb-y))"
+    class="fixed left-0 top-0 z-40"
+  >
+    <Transition name="slide-up">
       <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;
-  transition: all 0.3s ease-out;
+  animation: slideUp 125ms ease-out;
 }
 
 .slide-up-leave-active {
-  transition: none;
-}
-
-.slide-up-enter-from {
-  transform: translateY(-100%);
-  opacity: 0;
-}
-
-.slide-up-leave-to {
-  transform: translateY(0);
-  opacity: 0;
+  animation: slideUp 25ms ease-out reverse;
 }
 </style>

src/components/input/MultiSelect.stories.ts

@@ -1,9 +1,23 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import type { MultiSelectProps } from 'primevue/multiselect'
 import { ref } from 'vue'
 
 import MultiSelect from './MultiSelect.vue'
 
-const meta: Meta<typeof MultiSelect> = {
+// Combine our component props with PrimeVue MultiSelect props
+// Since we use v-bind="$attrs", all PrimeVue props are available
+interface ExtendedProps extends Partial<MultiSelectProps> {
+  // Our custom props
+  label?: string
+  showSearchBox?: boolean
+  showSelectedCount?: boolean
+  showClearButton?: boolean
+  searchPlaceholder?: string
+  // Override modelValue type to match our Option type
+  modelValue?: Array<{ name: string; value: string }>
+}
+
+const meta: Meta<ExtendedProps> = {
   title: 'Components/Input/MultiSelect',
   component: MultiSelect,
   tags: ['autodocs'],
@@ -13,7 +27,35 @@ const meta: Meta<typeof MultiSelect> = {
     },
     options: {
       control: 'object'
+    },
+    showSearchBox: {
+      control: 'boolean',
+      description: 'Toggle searchBar visibility'
+    },
+    showSelectedCount: {
+      control: 'boolean',
+      description: 'Toggle selected count visibility'
+    },
+    showClearButton: {
+      control: 'boolean',
+      description: 'Toggle clear button visibility'
+    },
+    searchPlaceholder: {
+      control: 'text'
     }
+  },
+  args: {
+    label: 'Select',
+    options: [
+      { name: 'Vue', value: 'vue' },
+      { name: 'React', value: 'react' },
+      { name: 'Angular', value: 'angular' },
+      { name: 'Svelte', value: 'svelte' }
+    ],
+    showSearchBox: false,
+    showSelectedCount: false,
+    showClearButton: false,
+    searchPlaceholder: 'Search...'
   }
 }
 
@@ -25,7 +67,7 @@ export const Default: Story = {
     components: { MultiSelect },
     setup() {
       const selected = ref([])
-      const options = [
+      const options = args.options || [
         { name: 'Vue', value: 'vue' },
         { name: 'React', value: 'react' },
         { name: 'Angular', value: 'angular' },
@@ -38,8 +80,11 @@ export const Default: Story = {
         <MultiSelect 
           v-model="selected" 
           :options="options"
-          label="Select Frameworks"
-          v-bind="args"
+          :label="args.label"
+          :showSearchBox="args.showSearchBox"
+          :showSelectedCount="args.showSelectedCount"
+          :showClearButton="args.showClearButton"
+          :searchPlaceholder="args.searchPlaceholder"
         />
         <div class="mt-4 p-3 bg-gray-50 dark-theme:bg-zinc-800 rounded">
           <p class="text-sm">Selected: {{ selected.length > 0 ? selected.map(s => s.name).join(', ') : 'None' }}</p>
@@ -50,10 +95,10 @@ export const Default: Story = {
 }
 
 export const WithPreselectedValues: Story = {
-  render: () => ({
+  render: (args) => ({
     components: { MultiSelect },
     setup() {
-      const options = [
+      const options = args.options || [
         { name: 'JavaScript', value: 'js' },
         { name: 'TypeScript', value: 'ts' },
         { name: 'Python', value: 'python' },
@@ -61,25 +106,43 @@ export const WithPreselectedValues: Story = {
         { name: 'Rust', value: 'rust' }
       ]
       const selected = ref([options[0], options[1]])
-      return { selected, options }
+      return { selected, options, args }
     },
     template: `
       <div>
         <MultiSelect 
           v-model="selected" 
           :options="options"
-          label="Select Languages"
+          :label="args.label"
+          :showSearchBox="args.showSearchBox"
+          :showSelectedCount="args.showSelectedCount"
+          :showClearButton="args.showClearButton"
+          :searchPlaceholder="args.searchPlaceholder"
         />
         <div class="mt-4 p-3 bg-gray-50 dark-theme:bg-zinc-800 rounded">
           <p class="text-sm">Selected: {{ selected.map(s => s.name).join(', ') }}</p>
         </div>
       </div>
     `
-  })
+  }),
+  args: {
+    label: 'Select Languages',
+    options: [
+      { name: 'JavaScript', value: 'js' },
+      { name: 'TypeScript', value: 'ts' },
+      { name: 'Python', value: 'python' },
+      { name: 'Go', value: 'go' },
+      { name: 'Rust', value: 'rust' }
+    ],
+    showSearchBox: false,
+    showSelectedCount: false,
+    showClearButton: false,
+    searchPlaceholder: 'Search...'
+  }
 }
 
 export const MultipleSelectors: Story = {
-  render: () => ({
+  render: (args) => ({
     components: { MultiSelect },
     setup() {
       const frameworkOptions = ref([
@@ -114,7 +177,8 @@ export const MultipleSelectors: Story = {
         tagOptions,
         selectedFrameworks,
         selectedProjects,
-        selectedTags
+        selectedTags,
+        args
       }
     },
     template: `
@@ -124,22 +188,34 @@ export const MultipleSelectors: Story = {
             v-model="selectedFrameworks" 
             :options="frameworkOptions"
             label="Select Frameworks"
+            :showSearchBox="args.showSearchBox"
+            :showSelectedCount="args.showSelectedCount"
+            :showClearButton="args.showClearButton"
+            :searchPlaceholder="args.searchPlaceholder"
           />
           <MultiSelect 
             v-model="selectedProjects" 
             :options="projectOptions"
             label="Select Projects"
+            :showSearchBox="args.showSearchBox"
+            :showSelectedCount="args.showSelectedCount"
+            :showClearButton="args.showClearButton"
+            :searchPlaceholder="args.searchPlaceholder"
           />
           <MultiSelect 
             v-model="selectedTags" 
             :options="tagOptions"
             label="Select Tags"
+            :showSearchBox="args.showSearchBox"
+            :showSelectedCount="args.showSelectedCount"
+            :showClearButton="args.showClearButton"
+            :searchPlaceholder="args.searchPlaceholder"
           />
         </div>
         
         <div class="p-4 bg-gray-50 dark-theme:bg-zinc-800 rounded">
-          <h4 class="font-medium mb-2">Current Selection:</h4>
-          <div class="space-y-1 text-sm">
+          <h4 class="font-medium mt-0">Current Selection:</h4>
+          <div class="flex flex-col text-sm">
             <p>Frameworks: {{ selectedFrameworks.length > 0 ? selectedFrameworks.map(s => s.name).join(', ') : 'None' }}</p>
             <p>Projects: {{ selectedProjects.length > 0 ? selectedProjects.map(s => s.name).join(', ') : 'None' }}</p>
             <p>Tags: {{ selectedTags.length > 0 ? selectedTags.map(s => s.name).join(', ') : 'None' }}</p>
@@ -147,5 +223,54 @@ export const MultipleSelectors: Story = {
         </div>
       </div>
     `
-  })
+  }),
+  args: {
+    showSearchBox: false,
+    showSelectedCount: false,
+    showClearButton: false,
+    searchPlaceholder: 'Search...'
+  }
+}
+
+export const WithSearchBox: Story = {
+  ...Default,
+  args: {
+    ...Default.args,
+    showSearchBox: true
+  }
+}
+
+export const WithSelectedCount: Story = {
+  ...Default,
+  args: {
+    ...Default.args,
+    showSelectedCount: true
+  }
+}
+
+export const WithClearButton: Story = {
+  ...Default,
+  args: {
+    ...Default.args,
+    showClearButton: true
+  }
+}
+
+export const AllHeaderFeatures: Story = {
+  ...Default,
+  args: {
+    ...Default.args,
+    showSearchBox: true,
+    showSelectedCount: true,
+    showClearButton: true
+  }
+}
+
+export const CustomSearchPlaceholder: Story = {
+  ...Default,
+  args: {
+    ...Default.args,
+    showSearchBox: true,
+    searchPlaceholder: 'Filter packages...'
+  }
 }

src/components/input/MultiSelect.vue

@@ -1,93 +1,104 @@
 <template>
-  <div class="relative inline-block">
-    <MultiSelect
-      v-model="selectedItems"
-      :options="options"
-      option-label="name"
-      unstyled
-      :placeholder="label"
-      :max-selected-labels="0"
-      :pt="pt"
+  <!-- 
+    Note: Unlike SingleSelect, we don't need an explicit options prop because:
+    1. Our value template only shows a static label (not dynamic based on selection)
+    2. We display a count badge instead of actual selected labels
+    3. All PrimeVue props (including options) are passed via v-bind="$attrs"
+    
+    option-label="name" is required because our option template directly accesses option.name
+    max-selected-labels="0" is required to show count badge instead of selected item labels
+  -->
+  <MultiSelect
+    v-model="selectedItems"
+    v-bind="$attrs"
+    option-label="name"
+    unstyled
+    :max-selected-labels="0"
+    :pt="pt"
+  >
+    <template
+      v-if="showSearchBox || showSelectedCount || showClearButton"
+      #header
     >
-      <template
-        v-if="hasSearchBox || showSelectedCount || hasClearButton"
-        #header
-      >
-        <div class="p-2 flex flex-col gap-y-4 pb-0">
-          <SearchBox
-            v-if="hasSearchBox"
-            v-model="searchQuery"
-            :has-border="true"
-            :place-holder="searchPlaceholder"
-          />
-          <div class="flex items-center justify-between">
-            <span
-              v-if="showSelectedCount"
-              class="text-sm text-neutral-400 dark-theme:text-zinc-500 px-1"
-            >
-              {{
-                selectedCount > 0
-                  ? $t('g.itemsSelected', { selectedCount })
-                  : $t('g.itemSelected', { selectedCount })
-              }}
-            </span>
-            <TextButton
-              v-if="hasClearButton"
-              :label="$t('g.clearAll')"
-              type="transparent"
-              size="fit-content"
-              class="text-sm !text-blue-500 !dark-theme:text-blue-600"
-              @click.stop="selectedItems = []"
-            />
-          </div>
-          <div class="h-px bg-zinc-200 dark-theme:bg-zinc-700"></div>
-        </div>
-      </template>
-
-      <!-- Trigger value (keep text scale identical) -->
-      <template #value>
-        <span class="text-sm text-zinc-700 dark-theme:text-gray-200">
-          {{ label }}
-        </span>
-      </template>
-
-      <!-- Chevron size identical to current -->
-      <template #dropdownicon>
-        <i-lucide:chevron-down class="text-lg text-neutral-400" />
-      </template>
-
-      <!-- Custom option row: square checkbox + label (unchanged layout/colors) -->
-      <template #option="slotProps">
-        <div class="flex items-center gap-2">
-          <div
-            class="flex h-4 w-4 p-0.5 flex-shrink-0 items-center justify-center rounded border-[3px] transition-all duration-200"
-            :class="
-              slotProps.selected
-                ? 'border-blue-400 bg-blue-400 dark-theme:border-blue-500 dark-theme:bg-blue-500'
-                : 'border-neutral-300 dark-theme:border-zinc-600 bg-neutral-100 dark-theme:bg-zinc-700'
-            "
+      <div class="p-2 flex flex-col pb-0">
+        <SearchBox
+          v-if="showSearchBox"
+          v-model="searchQuery"
+          :class="showSelectedCount || showClearButton ? 'mb-2' : ''"
+          :show-order="true"
+          :place-holder="searchPlaceholder"
+        />
+        <div
+          v-if="showSelectedCount || showClearButton"
+          class="mt-2 flex items-center justify-between"
+        >
+          <span
+            v-if="showSelectedCount"
+            class="text-sm text-neutral-400 dark-theme:text-zinc-500 px-1"
           >
-            <i-lucide:check
-              v-if="slotProps.selected"
-              class="text-xs text-bold text-white"
-            />
-          </div>
-          <span>{{ slotProps.option.name }}</span>
+            {{
+              selectedCount > 0
+                ? $t('g.itemsSelected', { selectedCount })
+                : $t('g.itemSelected', { selectedCount })
+            }}
+          </span>
+          <TextButton
+            v-if="showClearButton"
+            :label="$t('g.clearAll')"
+            type="transparent"
+            size="fit-content"
+            class="text-sm !text-blue-500 !dark-theme:text-blue-600"
+            @click.stop="selectedItems = []"
+          />
         </div>
-      </template>
-    </MultiSelect>
+        <div class="mt-4 h-px bg-zinc-200 dark-theme:bg-zinc-700"></div>
+      </div>
+    </template>
 
-    <!-- Selected count badge -->
-    <div
-      v-if="selectedCount > 0"
-      class="pointer-events-none absolute -right-2 -top-2 z-10 flex h-5 w-5 items-center justify-center rounded-full bg-blue-400 dark-theme:bg-blue-500 text-xs font-semibold text-white"
-    >
-      {{ selectedCount }}
-    </div>
-  </div>
+    <!-- Trigger value (keep text scale identical) -->
+    <template #value>
+      <span class="text-sm text-zinc-700 dark-theme:text-gray-200">
+        {{ label }}
+      </span>
+      <span
+        v-if="selectedCount > 0"
+        class="pointer-events-none absolute -right-2 -top-2 z-10 flex h-5 w-5 items-center justify-center rounded-full bg-blue-400 dark-theme:bg-blue-500 text-xs font-semibold text-white"
+      >
+        {{ selectedCount }}
+      </span>
+    </template>
+
+    <!-- Chevron size identical to current -->
+    <template #dropdownicon>
+      <i-lucide:chevron-down class="text-lg text-neutral-400" />
+    </template>
+
+    <!-- Custom option row: square checkbox + label (unchanged layout/colors) -->
+    <template #option="slotProps">
+      <div class="flex items-center gap-2">
+        <div
+          class="flex h-4 w-4 p-0.5 flex-shrink-0 items-center justify-center rounded transition-all duration-200"
+          :class="
+            slotProps.selected
+              ? 'border-[3px] border-blue-400 bg-blue-400 dark-theme:border-blue-500 dark-theme:bg-blue-500'
+              : 'border-[1px] border-neutral-300 dark-theme:border-zinc-600 bg-neutral-100 dark-theme:bg-zinc-700'
+          "
+        >
+          <i-lucide:check
+            v-if="slotProps.selected"
+            class="text-xs text-bold text-white"
+          />
+        </div>
+        <Button class="border-none outline-none bg-transparent" unstyled>{{
+          slotProps.option.name
+        }}</Button>
+      </div>
+    </template>
+  </MultiSelect>
 </template>
 
 <script setup lang="ts">
+import Button from 'primevue/button'
 import MultiSelect, {
   MultiSelectPassThroughMethodOptions
 } from 'primevue/multiselect'
@@ -99,26 +110,29 @@ import TextButton from '../button/TextButton.vue'
 
 type Option = { name: string; value: string }
 
+defineOptions({
+  inheritAttrs: false
+})
+
 interface Props {
   /** Input label shown on the trigger button */
   label?: string
-  /** Static options for the multiselect (when not using async search) */
-  options: Option[]
   /** Show search box in the panel header */
-  hasSearchBox?: boolean
+  showSearchBox?: boolean
   /** Show selected count text in the panel header */
   showSelectedCount?: boolean
   /** Show "Clear all" action in the panel header */
-  hasClearButton?: boolean
+  showClearButton?: boolean
   /** Placeholder for the search input */
   searchPlaceholder?: string
+  // Note: options prop is intentionally omitted.
+  // It's passed via $attrs to maximize PrimeVue API compatibility
 }
 const {
   label,
-  options,
-  hasSearchBox = false,
+  showSearchBox = false,
   showSelectedCount = false,
-  hasClearButton = false,
+  showClearButton = false,
   searchPlaceholder = 'Search...'
 } = defineProps<Props>()
 
@@ -131,7 +145,7 @@ const selectedCount = computed(() => selectedItems.value.length)
 const pt = computed(() => ({
   root: ({ props }: MultiSelectPassThroughMethodOptions) => ({
     class: [
-      'relative inline-flex cursor-pointer select-none w-full',
+      'relative inline-flex cursor-pointer select-none',
       'rounded-lg bg-white dark-theme:bg-zinc-800 text-neutral dark-theme:text-white',
       'transition-all duration-200 ease-in-out',
       'border-[2.5px] border-solid',
@@ -153,7 +167,7 @@ const pt = computed(() => ({
   },
   header: () => ({
     class:
-      hasSearchBox || showSelectedCount || hasClearButton ? 'block' : 'hidden'
+      showSearchBox || showSelectedCount || showClearButton ? 'block' : 'hidden'
   }),
   // Overlay & list visuals unchanged
   overlay:
@@ -161,9 +175,17 @@ const pt = computed(() => ({
   list: {
     class: 'flex flex-col gap-1 p-0 list-none border-none text-xs'
   },
-  // Option row hover tone identical
-  option:
-    'flex gap-1 items-center p-2 hover:bg-neutral-100/50 dark-theme:hover:bg-zinc-700/50',
+  // Option row hover and focus tone
+  option: ({ context }: MultiSelectPassThroughMethodOptions) => ({
+    class: [
+      'flex gap-1 items-center p-2',
+      'hover:bg-neutral-100/50 dark-theme:hover:bg-zinc-700/50',
+      // Add focus/highlight state for keyboard navigation
+      {
+        'bg-neutral-100/50 dark-theme:bg-zinc-700/50': context?.focused
+      }
+    ]
+  }),
   // Hide built-in checkboxes entirely via PT (no :deep)
   pcHeaderCheckbox: {
     root: { class: 'hidden' },

src/components/input/SearchBox.stories.ts

@@ -10,7 +10,15 @@ const meta: Meta<typeof SearchBox> = {
   argTypes: {
     placeHolder: {
       control: 'text'
+    },
+    showBorder: {
+      control: 'boolean',
+      description: 'Toggle border prop'
     }
+  },
+  args: {
+    placeHolder: 'Search...',
+    showBorder: false
   }
 }
 
@@ -25,9 +33,23 @@ export const Default: Story = {
       return { searchText, args }
     },
     template: `
-      <div>
-        <SearchBox v-model:="searchQuery" />
+      <div style="max-width: 320px;">
+        <SearchBox v-bind="args" v-model="searchText" />
       </div>
     `
   })
 }
+
+export const WithBorder: Story = {
+  ...Default,
+  args: {
+    showBorder: true
+  }
+}
+
+export const NoBorder: Story = {
+  ...Default,
+  args: {
+    showBorder: false
+  }
+}

src/components/input/SearchBox.vue

@@ -15,19 +15,20 @@
 import InputText from 'primevue/inputtext'
 import { computed } from 'vue'
 
-const { placeHolder, hasBorder = false } = defineProps<{
+const { placeHolder, showBorder = false } = defineProps<{
   placeHolder?: string
-  hasBorder?: boolean
+  showBorder?: boolean
 }>()
-const searchQuery = defineModel<string>('')
+// defineModel without arguments uses 'modelValue' as the prop name
+const searchQuery = defineModel<string>()
 
 const wrapperStyle = computed(() => {
-  return hasBorder
+  return showBorder
     ? 'flex w-full items-center rounded gap-2 bg-white dark-theme:bg-zinc-800 p-1 border border-solid border-zinc-200 dark-theme:border-zinc-700'
     : 'flex w-full items-center rounded px-2 py-1.5 gap-2 bg-white dark-theme:bg-zinc-800'
 })
 
 const iconColorStyle = computed(() => {
-  return !hasBorder ? 'text-neutral' : 'text-zinc-300 dark-theme:text-zinc-700'
+  return !showBorder ? 'text-neutral' : 'text-zinc-300 dark-theme:text-zinc-700'
 })
 </script>

src/components/input/SingleSelect.stories.ts

@@ -4,12 +4,24 @@ import { ref } from 'vue'
 
 import SingleSelect from './SingleSelect.vue'
 
+// SingleSelect already includes options prop, so no need to extend
 const meta: Meta<typeof SingleSelect> = {
   title: 'Components/Input/SingleSelect',
   component: SingleSelect,
   tags: ['autodocs'],
   argTypes: {
-    label: { control: 'text' }
+    label: { control: 'text' },
+    options: { control: 'object' }
+  },
+  args: {
+    label: 'Sorting Type',
+    options: [
+      { name: 'Popular', value: 'popular' },
+      { name: 'Newest', value: 'newest' },
+      { name: 'Oldest', value: 'oldest' },
+      { name: 'A → Z', value: 'az' },
+      { name: 'Z → A', value: 'za' }
+    ]
   }
 }
 
@@ -29,19 +41,18 @@ export const Default: Story = {
     components: { SingleSelect },
     setup() {
       const selected = ref<string | null>(null)
-      const options = sampleOptions
+      const options = args.options || sampleOptions
       return { selected, options, args }
     },
     template: `
       <div>
-        <SingleSelect v-model="selected" :options="options" :label="args.label || 'Sorting Type'" />
+        <SingleSelect v-model="selected" :options="options" :label="args.label" />
         <div class="mt-4 p-3 bg-gray-50 dark-theme:bg-zinc-800 rounded">
           <p class="text-sm">Selected: {{ selected ?? 'None' }}</p>
         </div>
       </div>
     `
-  }),
-  args: { label: 'Sorting Type' }
+  })
 }
 
 export const WithIcon: Story = {

src/components/input/SingleSelect.vue

@@ -1,58 +1,73 @@
 <template>
-  <div class="relative inline-flex items-center">
-    <Select
-      v-model="selectedItem"
-      :options="options"
-      option-label="name"
-      option-value="value"
-      unstyled
-      :placeholder="label"
-      :pt="pt"
-    >
-      <!-- Trigger value -->
-      <template #value="slotProps">
-        <div class="flex items-center gap-2 text-sm">
-          <slot name="icon" />
-          <span
-            v-if="slotProps.value !== null && slotProps.value !== undefined"
-            class="text-zinc-700 dark-theme:text-gray-200"
-          >
-            {{ getLabel(slotProps.value) }}
-          </span>
-          <span v-else class="text-zinc-700 dark-theme:text-gray-200">
-            {{ label }}
-          </span>
-        </div>
-      </template>
+  <!-- 
+    Note: We explicitly pass options here (not just via $attrs) because:
+    1. Our custom value template needs options to look up labels from values
+    2. PrimeVue's value slot only provides 'value' and 'placeholder', not the selected item's label
+    3. We need to maintain the icon slot functionality in the value template
+    
+    option-label="name" is required because our option template directly accesses option.name
+  -->
+  <Select
+    v-model="selectedItem"
+    v-bind="$attrs"
+    :options="options"
+    option-label="name"
+    option-value="value"
+    unstyled
+    :pt="pt"
+  >
+    <!-- Trigger value -->
+    <template #value="slotProps">
+      <div class="flex items-center gap-2 text-sm">
+        <slot name="icon" />
+        <span
+          v-if="slotProps.value !== null && slotProps.value !== undefined"
+          class="text-zinc-700 dark-theme:text-gray-200"
+        >
+          {{ getLabel(slotProps.value) }}
+        </span>
+        <span v-else class="text-zinc-700 dark-theme:text-gray-200">
+          {{ label }}
+        </span>
+      </div>
+    </template>
 
-      <!-- Trigger caret -->
-      <template #dropdownicon>
-        <i-lucide:chevron-down
-          class="text-base text-neutral-400 dark-theme:text-gray-300"
+    <!-- Trigger caret -->
+    <template #dropdownicon>
+      <i-lucide:chevron-down
+        class="text-base text-neutral-400 dark-theme:text-gray-300"
+      />
+    </template>
+
+    <!-- Option row -->
+    <template #option="{ option, selected }">
+      <div class="flex items-center justify-between gap-3 w-full">
+        <span class="truncate">{{ option.name }}</span>
+        <i-lucide:check
+          v-if="selected"
+          class="text-neutral-900 dark-theme:text-white"
         />
-      </template>
-
-      <!-- Option row -->
-      <template #option="{ option, selected }">
-        <div class="flex items-center justify-between gap-3 w-full">
-          <span class="truncate">{{ option.name }}</span>
-          <i-lucide:check
-            v-if="selected"
-            class="text-neutral-900 dark-theme:text-white"
-          />
-        </div>
-      </template>
-    </Select>
-  </div>
+      </div>
+    </template>
+  </Select>
 </template>
 
 <script setup lang="ts">
 import Select, { SelectPassThroughMethodOptions } from 'primevue/select'
 import { computed } from 'vue'
 
+defineOptions({
+  inheritAttrs: false
+})
+
 const { label, options } = defineProps<{
   label?: string
-  options: {
+  /**
+   * Required for displaying the selected item's label.
+   * Cannot rely on $attrs alone because we need to access options
+   * in getLabel() to map values to their display names.
+   */
+  options?: {
     name: string
     value: string
   }[]
@@ -60,8 +75,14 @@ const { label, options } = defineProps<{
 
 const selectedItem = defineModel<string | null>({ required: true })
 
+/**
+ * Maps a value to its display label.
+ * Necessary because PrimeVue's value slot doesn't provide the selected item's label,
+ * only the raw value. We need this to show the correct text when an item is selected.
+ */
 const getLabel = (val: string | null | undefined) => {
   if (val == null) return label ?? ''
+  if (!options) return label ?? ''
   const found = options.find((o) => o.value === val)
   return found ? found.name : label ?? ''
 }
@@ -77,7 +98,7 @@ const pt = computed(() => ({
   }: SelectPassThroughMethodOptions<{ name: string; value: string }>) => ({
     class: [
       // container
-      'relative inline-flex w-full cursor-pointer select-none items-center',
+      'relative inline-flex cursor-pointer select-none items-center',
       // trigger surface
       'rounded-md',
       'bg-transparent text-neutral dark-theme:text-white',
@@ -115,7 +136,9 @@ const pt = computed(() => ({
       'flex items-center justify-between gap-3 px-3 py-2',
       'hover:bg-neutral-100/50 dark-theme:hover:bg-zinc-700/50',
       // Selected state + check icon
-      { 'bg-neutral-100/50 dark-theme:bg-zinc-700/50': context.selected }
+      { 'bg-neutral-100/50 dark-theme:bg-zinc-700/50': context.selected },
+      // Add focus state for keyboard navigation
+      { 'bg-neutral-100/50 dark-theme:bg-zinc-700/50': context.focused }
     ]
   }),
   optionLabel: {

src/components/topbar/CurrentUserPopover.spec.ts

@@ -41,11 +41,13 @@ afterAll(() => {
 })
 
 // Mock the useCurrentUser composable
+const mockHandleSignOut = vi.fn()
 vi.mock('@/composables/auth/useCurrentUser', () => ({
   useCurrentUser: vi.fn(() => ({
     userPhotoUrl: 'https://example.com/avatar.jpg',
     userDisplayName: 'Test User',
-    userEmail: 'test@example.com'
+    userEmail: 'test@example.com',
+    handleSignOut: mockHandleSignOut
   }))
 }))
 
@@ -155,8 +157,8 @@ describe('CurrentUserPopover', () => {
     // Click the logout button
     await logoutButton.trigger('click')
 
-    // Verify logout was called
-    expect(mockLogout).toHaveBeenCalled()
+    // Verify handleSignOut was called
+    expect(mockHandleSignOut).toHaveBeenCalled()
 
     // Verify close event was emitted
     expect(wrapper.emitted('close')).toBeTruthy()

src/components/topbar/CurrentUserPopover.vue

@@ -88,7 +88,8 @@ const emit = defineEmits<{
   close: []
 }>()
 
-const { userDisplayName, userEmail, userPhotoUrl } = useCurrentUser()
+const { userDisplayName, userEmail, userPhotoUrl, handleSignOut } =
+  useCurrentUser()
 const authActions = useFirebaseAuthActions()
 const dialogService = useDialogService()
 
@@ -103,7 +104,7 @@ const handleTopUp = () => {
 }
 
 const handleLogout = async () => {
-  await authActions.logout()
+  await handleSignOut()
   emit('close')
 }
 

src/components/widget/SampleModelSelector.vue

@@ -12,7 +12,7 @@
     </template>
 
     <template #header>
-      <SearchBox v-model:="searchQuery" class="max-w-[384px]" />
+      <SearchBox v-model="searchQuery" class="max-w-[384px]" />
     </template>
 
     <template #header-right-area>
@@ -59,12 +59,13 @@
       <div class="relative px-6 pt-2 pb-4 flex gap-2">
         <MultiSelect
           v-model="selectedFrameworks"
+          v-model:search-query="searchText"
           class="w-[250px]"
-          :has-search-box="true"
-          :show-selected-count="true"
-          :has-clear-button="true"
           label="Select Frameworks"
           :options="frameworkOptions"
+          :show-search-box="true"
+          :show-selected-count="true"
+          :show-clear-button="true"
         />
         <MultiSelect
           v-model="selectedProjects"
@@ -135,7 +136,7 @@
 </template>
 
 <script setup lang="ts">
-import { provide, ref } from 'vue'
+import { provide, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import IconButton from '@/components/button/IconButton.vue'
@@ -201,9 +202,18 @@ const { onClose } = defineProps<{
 provide(OnCloseKey, onClose)
 
 const searchQuery = ref<string>('')
+const searchText = ref<string>('')
 const selectedFrameworks = ref([])
 const selectedProjects = ref([])
 const selectedSort = ref<string>('popular')
 
 const selectedNavItem = ref<string | null>('installed')
+
+watch(searchText, (newQuery) => {
+  console.log('searchText:', searchText.value, newQuery)
+})
+
+watch(searchQuery, (newQuery) => {
+  console.log('searchQuery:', searchQuery.value, newQuery)
+})
 </script>

src/components/widget/layout/BaseWidget.stories.ts

@@ -240,6 +240,9 @@ const createStoryTemplate = (args: StoryArgs) => ({
               v-model="selectedFrameworks"
               label="Select Frameworks"
               :options="frameworkOptions"
+              :has-search-box="true"
+              :show-selected-count="true"
+              :has-clear-button="true"
             />
             <MultiSelect
               v-model="selectedProjects"

src/composables/auth/useCurrentUser.ts

@@ -1,5 +1,8 @@
 import { computed } from 'vue'
 
+import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
+import { t } from '@/i18n'
+import { useDialogService } from '@/services/dialogService'
 import { useApiKeyAuthStore } from '@/stores/apiKeyAuthStore'
 import { useCommandStore } from '@/stores/commandStore'
 import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
@@ -8,6 +11,8 @@ export const useCurrentUser = () => {
   const authStore = useFirebaseAuthStore()
   const commandStore = useCommandStore()
   const apiKeyStore = useApiKeyAuthStore()
+  const dialogService = useDialogService()
+  const { deleteAccount } = useFirebaseAuthActions()
 
   const firebaseUser = computed(() => authStore.currentUser)
   const isApiKeyLogin = computed(() => apiKeyStore.isAuthenticated)
@@ -85,6 +90,18 @@ export const useCurrentUser = () => {
     await commandStore.execute('Comfy.User.OpenSignInDialog')
   }
 
+  const handleDeleteAccount = async () => {
+    const confirmed = await dialogService.confirm({
+      title: t('auth.deleteAccount.confirmTitle'),
+      message: t('auth.deleteAccount.confirmMessage'),
+      type: 'delete'
+    })
+
+    if (confirmed) {
+      await deleteAccount()
+    }
+  }
+
   return {
     loading: authStore.loading,
     isLoggedIn,
@@ -96,6 +113,7 @@ export const useCurrentUser = () => {
     providerName,
     providerIcon,
     handleSignOut,
-    handleSignIn
+    handleSignIn,
+    handleDeleteAccount
   }
 }

src/composables/auth/useFirebaseAuthActions.ts

@@ -135,6 +135,16 @@ export const useFirebaseAuthActions = () => {
     reportError
   )
 
+  const deleteAccount = wrapWithErrorHandlingAsync(async () => {
+    await authStore.deleteAccount()
+    toastStore.add({
+      severity: 'success',
+      summary: t('auth.deleteAccount.success'),
+      detail: t('auth.deleteAccount.successDetail'),
+      life: 5000
+    })
+  }, reportError)
+
   return {
     logout,
     sendPasswordReset,
@@ -146,6 +156,7 @@ export const useFirebaseAuthActions = () => {
     signInWithEmail,
     signUpWithEmail,
     updatePassword,
+    deleteAccount,
     accessError
   }
 }

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/composables/useModelSelectorDialog.ts

@@ -1,4 +1,4 @@
-import ModelSelector from '@/components/widget/ModelSelector.vue'
+import SampleModelSelector from '@/components/widget/SampleModelSelector.vue'
 import { useDialogService } from '@/services/dialogService'
 import { useDialogStore } from '@/stores/dialogStore'
 
@@ -15,7 +15,7 @@ export const useModelSelectorDialog = () => {
   function show() {
     dialogService.showLayoutDialog({
       key: DIALOG_KEY,
-      component: ModelSelector,
+      component: SampleModelSelector,
       props: {
         onClose: hide
       }

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
 
-- `pnpm typecheck` Run the typechecker
-- `pnpm build` Build the project
-- `pnpm lint:fix` Run ESLint
+- `npm run typecheck` Run the typechecker
+- `npm run build` Build the project
+- `npm run 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 pnpm version command. `Pre-release ID (suffix)` is the option for the `--preid` argument.
+The action directly translates `Version increment type` to the npm 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/lib/litegraph/src/subgraph/ExecutableNodeDTO.ts

@@ -141,7 +141,8 @@ export class ExecutableNodeDTO implements ExecutableLGraphNode {
    */
   resolveInput(
     slot: number,
-    visited = new Set<string>()
+    visited = new Set<string>(),
+    type?: ISlotType
   ): ResolvedInput | undefined {
     const uniqueId = `${this.subgraphNode?.subgraph.id}:${this.node.id}[I]${slot}`
     if (visited.has(uniqueId)) {
@@ -232,7 +233,11 @@ export class ExecutableNodeDTO implements ExecutableLGraphNode {
         `No output node DTO found for id [${outputNodeExecutionId}]`
       )
 
-    return outputNodeDto.resolveOutput(link.origin_slot, input.type, visited)
+    return outputNodeDto.resolveOutput(
+      link.origin_slot,
+      type ?? input.type,
+      visited
+    )
   }
 
   /**
@@ -284,7 +289,7 @@ export class ExecutableNodeDTO implements ExecutableLGraphNode {
 
     // Upstreamed: Other virtual nodes are bypassed using the same input/output index (slots must match)
     if (node.isVirtualNode) {
-      if (this.inputs.at(slot)) return this.resolveInput(slot, visited)
+      if (this.inputs.at(slot)) return this.resolveInput(slot, visited, type)
 
       // Fallback check for nodes performing link redirection
       const virtualLink = this.node.getInputLink(slot)

src/lib/litegraph/test/LinkConnector.integration.test.ts

@@ -334,12 +334,9 @@ describe('LinkConnector Integration', () => {
         } = graph.getNodeById(nodeId)!
 
         expect(input.link).toBeNull()
-        // @ts-expect-error toBeOneOf not in type definitions
         expect(output.links?.length).toBeOneOf([0, undefined])
 
-        // @ts-expect-error toBeOneOf not in type definitions
         expect(input._floatingLinks?.size).toBeOneOf([0, undefined])
-        // @ts-expect-error toBeOneOf not in type definitions
         expect(output._floatingLinks?.size).toBeOneOf([0, undefined])
       }
     })
@@ -537,12 +534,9 @@ describe('LinkConnector Integration', () => {
         } = graph.getNodeById(nodeId)!
 
         expect(input.link).toBeNull()
-        // @ts-expect-error toBeOneOf not in type definitions
         expect(output.links?.length).toBeOneOf([0, undefined])
 
-        // @ts-expect-error toBeOneOf not in type definitions
         expect(input._floatingLinks?.size).toBeOneOf([0, undefined])
-        // @ts-expect-error toBeOneOf not in type definitions
         expect(output._floatingLinks?.size).toBeOneOf([0, undefined])
       }
     })
@@ -856,12 +850,9 @@ describe('LinkConnector Integration', () => {
       } = graph.getNodeById(nodeId)!
 
       expect(input.link).toBeNull()
-      // @ts-expect-error toBeOneOf not in type definitions
       expect(output.links?.length).toBeOneOf([0, undefined])
 
-      // @ts-expect-error toBeOneOf not in type definitions
       expect(input._floatingLinks?.size).toBeOneOf([0, undefined])
-      // @ts-expect-error toBeOneOf not in type definitions
       expect(output._floatingLinks?.size).toBeOneOf([0, undefined])
     }
   })

src/locales/CONTRIBUTING.md

@@ -79,7 +79,7 @@ const messages = {
 #### Option A: Local Generation (Optional)
 ```bash
 # Only if you have OpenAI API key configured
-pnpm locale
+npm run locale
 ```
 
 #### Option B: Let CI Handle It (Recommended)
@@ -91,8 +91,8 @@ pnpm locale
 ### Step 3: Test Your Changes
 
 ```bash
-pnpm typecheck  # Check for TypeScript errors
-pnpm dev        # Start development server
+npm run typecheck  # Check for TypeScript errors
+npm run dev        # Start development server
 ```
 
 **Testing checklist:**

src/locales/ar/main.json

@@ -27,6 +27,15 @@
       "title": "مفتاح API",
       "whitelistInfo": "حول المواقع غير المدرجة في القائمة البيضاء"
     },
+    "deleteAccount": {
+      "cancel": "إلغاء",
+      "confirm": "حذف الحساب",
+      "confirmMessage": "هل أنت متأكد أنك تريد حذف حسابك؟ لا يمكن التراجع عن هذا الإجراء وسيتم حذف جميع بياناتك نهائيًا.",
+      "confirmTitle": "حذف الحساب",
+      "deleteAccount": "حذف الحساب",
+      "success": "تم حذف الحساب",
+      "successDetail": "تم حذف حسابك بنجاح."
+    },
     "login": {
       "andText": "و",
       "confirmPasswordLabel": "تأكيد كلمة المرور",

src/locales/en/main.json

@@ -1601,6 +1601,15 @@
     "passwordUpdate": {
       "success": "Password Updated",
       "successDetail": "Your password has been updated successfully"
+    },
+    "deleteAccount": {
+      "deleteAccount": "Delete Account",
+      "confirmTitle": "Delete Account",
+      "confirmMessage": "Are you sure you want to delete your account? This action cannot be undone and will permanently remove all your data.",
+      "confirm": "Delete Account",
+      "cancel": "Cancel",
+      "success": "Account Deleted",
+      "successDetail": "Your account has been successfully deleted."
     }
   },
   "validation": {

src/locales/es/main.json

@@ -27,6 +27,15 @@
       "title": "Clave API",
       "whitelistInfo": "Acerca de los sitios no incluidos en la lista blanca"
     },
+    "deleteAccount": {
+      "cancel": "Cancelar",
+      "confirm": "Eliminar cuenta",
+      "confirmMessage": "¿Estás seguro de que deseas eliminar tu cuenta? Esta acción no se puede deshacer y eliminará permanentemente todos tus datos.",
+      "confirmTitle": "Eliminar cuenta",
+      "deleteAccount": "Eliminar cuenta",
+      "success": "Cuenta eliminada",
+      "successDetail": "Tu cuenta ha sido eliminada exitosamente."
+    },
     "login": {
       "andText": "y",
       "confirmPasswordLabel": "Confirmar contraseña",

src/locales/fr/main.json

@@ -27,6 +27,15 @@
       "title": "Clé API",
       "whitelistInfo": "À propos des sites non autorisés"
     },
+    "deleteAccount": {
+      "cancel": "Annuler",
+      "confirm": "Supprimer le compte",
+      "confirmMessage": "Êtes-vous sûr de vouloir supprimer votre compte ? Cette action est irréversible et supprimera définitivement toutes vos données.",
+      "confirmTitle": "Supprimer le compte",
+      "deleteAccount": "Supprimer le compte",
+      "success": "Compte supprimé",
+      "successDetail": "Votre compte a été supprimé avec succès."
+    },
     "login": {
       "andText": "et",
       "confirmPasswordLabel": "Confirmer le mot de passe",

src/locales/ja/main.json

@@ -27,6 +27,15 @@
       "title": "APIキー",
       "whitelistInfo": "ホワイトリストに登録されていないサイトについて"
     },
+    "deleteAccount": {
+      "cancel": "キャンセル",
+      "confirm": "アカウントを削除",
+      "confirmMessage": "本当にアカウントを削除しますか？この操作は元に戻せず、すべてのデータが完全に削除されます。",
+      "confirmTitle": "アカウントを削除",
+      "deleteAccount": "アカウントを削除",
+      "success": "アカウントが削除されました",
+      "successDetail": "アカウントは正常に削除されました。"
+    },
     "login": {
       "andText": "および",
       "confirmPasswordLabel": "パスワードの確認",

src/locales/ko/main.json

@@ -27,6 +27,15 @@
       "title": "API 키",
       "whitelistInfo": "비허용 사이트에 대하여"
     },
+    "deleteAccount": {
+      "cancel": "취소",
+      "confirm": "계정 삭제",
+      "confirmMessage": "정말로 계정을 삭제하시겠습니까? 이 작업은 되돌릴 수 없으며 모든 데이터가 영구적으로 삭제됩니다.",
+      "confirmTitle": "계정 삭제",
+      "deleteAccount": "계정 삭제",
+      "success": "계정이 삭제되었습니다",
+      "successDetail": "계정이 성공적으로 삭제되었습니다."
+    },
     "login": {
       "andText": "및",
       "confirmPasswordLabel": "비밀번호 확인",

src/locales/ru/main.json

@@ -27,6 +27,15 @@
       "title": "API-ключ",
       "whitelistInfo": "О не включённых в белый список сайтах"
     },
+    "deleteAccount": {
+      "cancel": "Отмена",
+      "confirm": "Удалить аккаунт",
+      "confirmMessage": "Вы уверены, что хотите удалить свой аккаунт? Это действие необратимо и приведёт к безвозвратному удалению всех ваших данных.",
+      "confirmTitle": "Удалить аккаунт",
+      "deleteAccount": "Удалить аккаунт",
+      "success": "Аккаунт удалён",
+      "successDetail": "Ваш аккаунт был успешно удалён."
+    },
     "login": {
       "andText": "и",
       "confirmPasswordLabel": "Подтвердите пароль",

src/locales/zh-TW/main.json

@@ -27,6 +27,15 @@
       "title": "API 金鑰",
       "whitelistInfo": "關於未列入白名單的網站"
     },
+    "deleteAccount": {
+      "cancel": "取消",
+      "confirm": "刪除帳號",
+      "confirmMessage": "您確定要刪除您的帳號嗎？此操作無法復原，且將永久移除您所有的資料。",
+      "confirmTitle": "刪除帳號",
+      "deleteAccount": "刪除帳號",
+      "success": "帳號已刪除",
+      "successDetail": "您的帳號已成功刪除。"
+    },
     "login": {
       "andText": "以及",
       "confirmPasswordLabel": "確認密碼",

src/locales/zh/commands.json

@@ -48,7 +48,7 @@
     "label": "适应视图到选中节点"
   },
   "Comfy_Canvas_Lock": {
-    "label": "鎖定畫布"
+    "label": "锁定画布"
   },
   "Comfy_Canvas_MoveSelectedNodes_Down": {
     "label": "下移选中的节点"
@@ -93,7 +93,7 @@
     "label": "固定/取消固定选中项"
   },
   "Comfy_Canvas_Unlock": {
-    "label": "解鎖畫布"
+    "label": "解锁画布"
   },
   "Comfy_Canvas_ZoomIn": {
     "label": "放大"
@@ -111,7 +111,7 @@
     "label": "联系支持"
   },
   "Comfy_Dev_ShowModelSelector": {
-    "label": "顯示模型選擇器（開發）"
+    "label": "显示模型选择器（开发）"
   },
   "Comfy_DuplicateWorkflow": {
     "label": "复制当前工作流"

src/locales/zh/main.json

@@ -27,6 +27,15 @@
       "title": "API 密钥",
       "whitelistInfo": "关于非白名单网站"
     },
+    "deleteAccount": {
+      "cancel": "取消",
+      "confirm": "删除账户",
+      "confirmMessage": "您确定要删除您的账户吗？此操作无法撤销，并且会永久删除您的所有数据。",
+      "confirmTitle": "删除账户",
+      "deleteAccount": "删除账户",
+      "success": "账户已删除",
+      "successDetail": "您的账户已成功删除。"
+    },
     "login": {
       "andText": "和",
       "confirmPasswordLabel": "确认密码",
@@ -313,7 +322,7 @@
     "feedback": "反馈",
     "filter": "过滤",
     "findIssues": "查找问题",
-    "frontendNewer": "前端版本 {frontendVersion} 可能與後端版本 {backendVersion} 不相容。",
+    "frontendNewer": "前端版本 {frontendVersion} 可能与后端版本 {backendVersion} 不相容。",
     "frontendOutdated": "前端版本 {frontendVersion} 已过时。后端需要 {requiredVersion} 或更高版本。",
     "goToNode": "转到节点",
     "help": "帮助",
@@ -410,17 +419,17 @@
   },
   "graphCanvasMenu": {
     "fitView": "适应视图",
-    "focusMode": "專注模式",
-    "hand": "拖曳",
-    "hideLinks": "隱藏連結",
+    "focusMode": "专注模式",
+    "hand": "拖拽",
+    "hideLinks": "隐藏链接",
     "panMode": "平移模式",
     "resetView": "重置视图",
-    "select": "選取",
+    "select": "选择",
     "selectMode": "选择模式",
-    "showLinks": "顯示連結",
+    "showLinks": "显示链接",
     "toggleMinimap": "切换小地图",
     "zoomIn": "放大",
-    "zoomOptions": "縮放選項",
+    "zoomOptions": "缩放选项",
     "zoomOut": "缩小"
   },
   "groupNode": {
@@ -806,7 +815,7 @@
     "Increase Brush Size in MaskEditor": "在 MaskEditor 中增大笔刷大小",
     "Interrupt": "中断",
     "Load Default Workflow": "加载默认工作流",
-    "Lock Canvas": "鎖定畫布",
+    "Lock Canvas": "锁定画布",
     "Manage group nodes": "管理组节点",
     "Manager": "管理器",
     "Minimap": "小地图",
@@ -847,8 +856,8 @@
     "Restart": "重启",
     "Save": "保存",
     "Save As": "另存为",
-    "Show Keybindings Dialog": "顯示快捷鍵對話框",
-    "Show Model Selector (Dev)": "顯示模型選擇器（開發用）",
+    "Show Keybindings Dialog": "显示快捷键对话框",
+    "Show Model Selector (Dev)": "显示模型选择器（开发用）",
     "Show Settings Dialog": "显示设置对话框",
     "Sign Out": "退出登录",
     "Toggle Essential Bottom Panel": "切换基础底部面板",
@@ -861,7 +870,7 @@
     "Toggle the Custom Nodes Manager Progress Bar": "切换自定义节点管理器进度条",
     "Undo": "撤销",
     "Ungroup selected group nodes": "解散选中组节点",
-    "Unlock Canvas": "解除鎖定畫布",
+    "Unlock Canvas": "解除锁定画布",
     "Unpack the selected Subgraph": "解包选中子图",
     "Workflows": "工作流",
     "Zoom In": "放大画面",
@@ -1684,8 +1693,8 @@
   },
   "versionMismatchWarning": {
     "dismiss": "关闭",
-    "frontendNewer": "前端版本 {frontendVersion} 可能與後端版本 {backendVersion} 不相容。",
-    "frontendOutdated": "前端版本 {frontendVersion} 已过时。後端需要 {requiredVersion} 版或更高版本。",
+    "frontendNewer": "前端版本 {frontendVersion} 可能与后端版本 {backendVersion} 不相容。",
+    "frontendOutdated": "前端版本 {frontendVersion} 已过时。后端需要 {requiredVersion} 版或更高版本。",
     "title": "版本相容性警告",
     "updateFrontend": "更新前端"
   },
@@ -1703,9 +1712,9 @@
     "saveWorkflow": "保存工作流"
   },
   "zoomControls": {
-    "hideMinimap": "隱藏小地圖",
-    "label": "縮放控制",
-    "showMinimap": "顯示小地圖",
-    "zoomToFit": "適合畫面"
+    "hideMinimap": "隐藏小地图",
+    "label": "缩放控制",
+    "showMinimap": "显示小地图",
+    "zoomToFit": "适合画面"
   }
 }

src/stores/firebaseAuthStore.ts

@@ -8,6 +8,7 @@ import {
   type UserCredential,
   browserLocalPersistence,
   createUserWithEmailAndPassword,
+  deleteUser,
   onAuthStateChanged,
   sendPasswordResetEmail,
   setPersistence,
@@ -287,6 +288,14 @@ export const useFirebaseAuthStore = defineStore('firebaseAuth', () => {
     await updatePassword(currentUser.value, newPassword)
   }
 
+  /** Delete the current user account */
+  const _deleteAccount = async (): Promise<void> => {
+    if (!currentUser.value) {
+      throw new FirebaseAuthStoreError(t('toastMessages.userNotAuthenticated'))
+    }
+    await deleteUser(currentUser.value)
+  }
+
   const addCredits = async (
     requestBodyContent: CreditPurchasePayload
   ): Promise<CreditPurchaseResponse> => {
@@ -385,6 +394,7 @@ export const useFirebaseAuthStore = defineStore('firebaseAuth', () => {
     accessBillingPortal,
     sendPasswordReset,
     updatePassword: _updatePassword,
+    deleteAccount: _deleteAccount,
     getAuthHeader
   }
 })

tests-ui/README.md

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

tests-ui/tests/litegraph/README.md

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

tsconfig.json

@@ -12,16 +12,12 @@
     "experimentalDecorators": true,
     "emitDecoratorMetadata": true,
     "resolveJsonModule": true,
-
-    /* Linting */
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
     "downlevelIteration": true,
     "noImplicitOverride": true,
-
-    /* AllowJs during migration phase */
     "allowJs": true,
     "baseUrl": ".",
     "paths": {
@@ -29,7 +25,7 @@
     },
     "typeRoots": ["src/types", "node_modules/@types"],
     "outDir": "./dist",
-    "rootDir": "./",
+    "rootDir": "./"
   },
   "include": [
     "src/**/*",

vite.config.mts

@@ -26,6 +26,9 @@ export default defineConfig({
   base: '',
   server: {
     host: VITE_REMOTE_DEV ? '0.0.0.0' : undefined,
+    watch: {
+      ignored: ['**/coverage/**', '**/playwright-report/**']
+    },
     proxy: {
       '/internal': {
         target: DEV_SERVER_COMFYUI_URL