merge main into rh-test

2026-02-02 22:37:32 +00:00 · 2025-09-28 15:33:29 -07:00
parent 1c0f151d02
commit ff0c15b119
1317 changed files with 85439 additions and 18373 deletions
--- a/.claude/commands/comprehensive-pr-review.md
+++ b/.claude/commands/comprehensive-pr-review.md
@@ -67,9 +67,9 @@ This is critical for better file inspection:

 Use git locally for much faster analysis:

-1. Get list of changed files: `git diff --name-only "origin/$BASE_BRANCH" > changed_files.txt`
-2. Get the full diff: `git diff "origin/$BASE_BRANCH" > pr_diff.txt`
-3. Get detailed file changes with status: `git diff --name-status "origin/$BASE_BRANCH" > file_changes.txt`
+1. Get list of changed files: `git diff --name-only "$BASE_SHA" > changed_files.txt`
+2. Get the full diff: `git diff "$BASE_SHA" > pr_diff.txt`
+3. Get detailed file changes with status: `git diff --name-status "$BASE_SHA" > file_changes.txt`

 ### Step 1.5: Create Analysis Cache

--- a/.claude/commands/create-frontend-release.md
+++ b/.claude/commands/create-frontend-release.md
@@ -128,7 +128,25 @@ echo "Last stable release: $LAST_STABLE"

 ### Step 4: Analyze Dependency Updates

-1. **Check significant dependency updates:**
+1. **Use pnpm's built-in dependency analysis:**
+   ```bash
+   # Get outdated dependencies with pnpm
+   pnpm outdated --format table > outdated-deps-${NEW_VERSION}.txt
+   
+   # Check for license compliance
+   pnpm licenses ls --json > licenses-${NEW_VERSION}.json
+   
+   # Analyze why specific dependencies exist
+   echo "Dependency analysis:" > dep-analysis-${NEW_VERSION}.md
+   MAJOR_DEPS=("vue" "vite" "@vitejs/plugin-vue" "typescript" "pinia")
+   for dep in "${MAJOR_DEPS[@]}"; do
+     echo -e "\n## $dep\n\`\`\`" >> dep-analysis-${NEW_VERSION}.md
+     pnpm why "$dep" >> dep-analysis-${NEW_VERSION}.md || echo "Not found" >> dep-analysis-${NEW_VERSION}.md
+     echo "\`\`\`" >> dep-analysis-${NEW_VERSION}.md
+   done
+   ```
+
+2. **Check for significant dependency updates:**
   ```bash
   # Extract all dependency changes for major version bumps
   OTHER_DEP_CHANGES=""
@@ -200,22 +218,48 @@ echo "Last stable release: $LAST_STABLE"
   PR data: [contents of prs-${NEW_VERSION}.json]
   ```

-3. **Generate GTM notification:**
+3. **Generate GTM notification using this EXACT Slack-compatible format:**
   ```bash
-   # Save to gtm-summary-${NEW_VERSION}.md based on analysis
-   # 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,17 +272,22 @@ echo "Last stable release: $LAST_STABLE"

 ### Step 7: Security and Dependency Audit

-1. Run security audit:
+1. Run pnpm security audit:
   ```bash
-   npm audit --audit-level moderate
+   pnpm audit --audit-level moderate
+   pnpm licenses ls --summary
   ```
 2. Check for known vulnerabilities in dependencies
-3. Scan for hardcoded secrets or credentials:
+3. Run comprehensive dependency health check:
+   ```bash
+   pnpm doctor
+   ```
+4. Scan for hardcoded secrets or credentials:
   ```bash
   git log -p ${BASE_TAG}..HEAD | grep -iE "(password|key|secret|token)" || echo "No sensitive data found"
   ```
-4. Verify no sensitive data in recent commits
-5. **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

--- a/.claude/commands/create-hotfix-release.md
+++ b/.claude/commands/create-hotfix-release.md
@@ -1,30 +1,85 @@
 # Create Hotfix Release

-This command guides you through creating a patch/hotfix release for ComfyUI Frontend with comprehensive safety checks and human confirmations at each step.
+This command creates patch/hotfix releases for ComfyUI Frontend by backporting fixes to stable core branches. It handles both automated backports (preferred) and manual cherry-picking (fallback).
+
+**Process Overview:**
+1. **Check automated backports first** (via labels)
+2. **Skip to version bump** if backports already merged
+3. **Manual cherry-picking** if automation failed
+4. **Create patch release** with version bump  
+5. **Publish GitHub release** (manually uncheck "latest")
+6. **Update ComfyUI requirements.txt** via PR

 <task>
-Create a hotfix release by cherry-picking commits or PR commits from main to a core branch: $ARGUMENTS
+Create a hotfix release by backporting commits/PRs from main to a core branch: $ARGUMENTS

 Expected format: Comma-separated list of commits or PR numbers
 Examples: 
- `abc123,def456,ghi789` (commits)
- `#1234,#5678` (PRs)
- `abc123,#1234,def456` (mixed)
+- `#1234,#5678` (PRs - preferred)
+- `abc123,def456` (commit hashes)
+- `#1234,abc123` (mixed)

-If no arguments provided, the command will help identify the correct core branch and guide you through selecting commits/PRs.
+If no arguments provided, the command will guide you through identifying commits/PRs to backport.
 </task>

 ## Prerequisites

-Before starting, ensure:
- You have push access to the repository
- GitHub CLI (`gh`) is authenticated
- You're on a clean working tree
- You understand the commits/PRs you're cherry-picking
+- Push access to repository
+- GitHub CLI (`gh`) authenticated  
+- Clean working tree
+- Understanding of what fixes need backporting

 ## Hotfix Release Process

-### Step 1: Identify Target Core Branch
+### Step 1: Try Automated Backports First
+
+**Check if automated backports were attempted:**
+
+1. **For each PR, check existing backport labels:**
+   ```bash
+   gh pr view #1234 --json labels | jq -r '.labels[].name'
+   ```
+
+2. **If no backport labels exist, add them now:**
+   ```bash
+   # Add backport labels (this triggers automated backports)
+   gh pr edit #1234 --add-label "needs-backport"
+   gh pr edit #1234 --add-label "1.24"  # Replace with target version
+   ```
+
+3. **Check for existing backport PRs:**
+   ```bash
+   # Check for backport PRs created by automation
+   PR_NUMBER=${ARGUMENTS%%,*}  # Extract first PR number from arguments
+   PR_NUMBER=${PR_NUMBER#\#}   # Remove # prefix
+   gh pr list --search "backport-${PR_NUMBER}-to" --json number,title,state,baseRefName
+   ```
+
+4. **Handle existing backport scenarios:**
+
+   **Scenario A: Automated backports already merged**
+   ```bash
+   # Check if backport PRs were merged to core branches
+   gh pr list --search "backport-${PR_NUMBER}-to" --state merged
+   ```
+   - If backport PRs are merged → Skip to Step 10 (Version Bump)
+   - **CONFIRMATION**: Automated backports completed, proceeding to version bump?
+
+   **Scenario B: Automated backport PRs exist but not merged**
+   ```bash
+   # Show open backport PRs that need merging
+   gh pr list --search "backport-${PR_NUMBER}-to" --state open
+   ```
+   - **ACTION REQUIRED**: Merge the existing backport PRs first
+   - Use: `gh pr merge [PR_NUMBER] --merge` for each backport PR
+   - After merging, return to this command and skip to Step 10 (Version Bump)
+   - **CONFIRMATION**: Have you merged all backport PRs? Ready to proceed to version bump?
+
+   **Scenario C: No automated backports or they failed**
+   - Continue to Step 2 for manual cherry-picking
+   - **CONFIRMATION**: Proceeding with manual cherry-picking because automation failed?
+
+### Step 2: Identify Target Core Branch

 1. Fetch the current ComfyUI requirements.txt from master branch:
   ```bash
@@ -36,7 +91,7 @@ Before starting, ensure:
 5. Verify the core branch exists: `git ls-remote origin refs/heads/core/*`
 6. **CONFIRMATION REQUIRED**: Is `core/X.Y` the correct target branch?

-### Step 2: Parse and Validate Arguments
+### Step 3: Parse and Validate Arguments

 1. Parse the comma-separated list of commits/PRs
 2. For each item:
@@ -49,7 +104,7 @@ Before starting, ensure:
   - **CONFIRMATION REQUIRED**: Use merge commit or cherry-pick individual commits?
 4. Validate all commit hashes exist in the repository

-### Step 3: Analyze Target Changes
+### Step 4: Analyze Target Changes

 1. For each commit/PR to cherry-pick:
   - Display commit hash, author, date
@@ -60,7 +115,7 @@ Before starting, ensure:
 2. Identify potential conflicts by checking changed files
 3. **CONFIRMATION REQUIRED**: Proceed with these commits?

-### Step 4: Create Hotfix Branch
+### Step 5: Create Hotfix Branch

 1. Checkout the core branch (e.g., `core/1.23`)
 2. Pull latest changes: `git pull origin core/X.Y`
@@ -69,7 +124,7 @@ Before starting, ensure:
   - Example: `hotfix/1.23.4-20241120`
 5. **CONFIRMATION REQUIRED**: Created branch correctly?

-### Step 5: Cherry-pick Changes
+### Step 6: Cherry-pick Changes

 For each commit:
 1. Attempt cherry-pick: `git cherry-pick <commit>`
@@ -83,7 +138,7 @@ For each commit:
   - Run validation: `pnpm typecheck && pnpm lint`
 4. **CONFIRMATION REQUIRED**: Cherry-pick successful and valid?

-### Step 6: Create PR to Core Branch
+### Step 7: Create PR to Core Branch

 1. Push the hotfix branch: `git push origin hotfix/<version>-<timestamp>`
 2. Create PR using gh CLI:
@@ -100,7 +155,7 @@ For each commit:
   - Impact assessment
 5. **CONFIRMATION REQUIRED**: PR created correctly?

-### Step 7: Wait for Tests
+### Step 8: Wait for Tests

 1. Monitor PR checks: `gh pr checks`
 2. Display test results as they complete
@@ -111,7 +166,7 @@ For each commit:
 4. Wait for all required checks to pass
 5. **CONFIRMATION REQUIRED**: All tests passing?

-### Step 8: Merge Hotfix PR
+### Step 9: Merge Hotfix PR

 1. Verify all checks have passed
 2. Check for required approvals
@@ -119,7 +174,7 @@ For each commit:
 4. Delete the hotfix branch
 5. **CONFIRMATION REQUIRED**: PR merged successfully?

-### Step 9: Create Version Bump
+### Step 10: Create Version Bump

 1. Checkout the core branch: `git checkout core/X.Y`
 2. Pull latest changes: `git pull origin core/X.Y`
@@ -131,7 +186,7 @@ For each commit:
 7. Commit: `git commit -m "[release] Bump version to 1.23.5"`
 8. **CONFIRMATION REQUIRED**: Version bump correct?

-### Step 10: Create Release PR
+### Step 11: Create Release PR

 1. Push release branch: `git push origin release/1.23.5`
 2. Create PR with Release label:
@@ -184,7 +239,7 @@ For each commit:
     ```
 5. **CONFIRMATION REQUIRED**: Release PR has "Release" label?

-### Step 11: Monitor Release Process
+### Step 12: Monitor Release Process

 1. Wait for PR checks to pass
 2. **FINAL CONFIRMATION**: Ready to trigger release by merging?
@@ -199,7 +254,102 @@ For each commit:
   - PyPI upload
   - pnpm types publication

-### Step 12: Post-Release Verification
+### Step 13: Manually Publish Draft Release
+
+**CRITICAL**: The release workflow creates a DRAFT release. You must manually publish it:
+
+1. **Go to GitHub Releases:** https://github.com/Comfy-Org/ComfyUI_frontend/releases
+2. **Find the DRAFT release** (e.g., "v1.23.5 Draft")
+3. **Click "Edit release"**
+4. **UNCHECK "Set as the latest release"** ⚠️ **CRITICAL**
+   - This prevents the hotfix from showing as "latest" 
+   - Main branch should always be "latest release"
+5. **Click "Publish release"**
+6. **CONFIRMATION REQUIRED**: Draft release published with "latest" unchecked?
+
+### Step 14: Create ComfyUI Requirements.txt Update PR
+
+**IMPORTANT**: Create PR to update ComfyUI's requirements.txt via fork:
+
+1. **Setup fork (if needed):**
+   ```bash
+   # Check if fork already exists
+   if gh repo view ComfyUI --json owner | jq -r '.owner.login' | grep -q "$(gh api user --jq .login)"; then
+     echo "Fork already exists"
+   else
+     # Fork the ComfyUI repository
+     gh repo fork comfyanonymous/ComfyUI --clone=false
+     echo "Created fork of ComfyUI"
+   fi
+   ```
+
+2. **Clone fork and create branch:**
+   ```bash
+   # Clone your fork (or use existing clone)
+   GITHUB_USER=$(gh api user --jq .login)
+   if [ ! -d "ComfyUI-fork" ]; then
+     gh repo clone ${GITHUB_USER}/ComfyUI ComfyUI-fork
+   fi
+   
+   cd ComfyUI-fork
+   git checkout master
+   git pull origin master
+   
+   # Create update branch
+   BRANCH_NAME="update-frontend-${NEW_VERSION}"
+   git checkout -b ${BRANCH_NAME}
+   ```
+
+3. **Update requirements.txt:**
+   ```bash
+   # Update the version in requirements.txt
+   sed -i "s/comfyui-frontend-package==[0-9].*$/comfyui-frontend-package==${NEW_VERSION}/" requirements.txt
+   
+   # Verify the change
+   grep "comfyui-frontend-package" requirements.txt
+   
+   # Commit the change
+   git add requirements.txt
+   git commit -m "Bump frontend to ${NEW_VERSION}"
+   git push origin ${BRANCH_NAME}
+   ```
+
+4. **Create PR from fork:**
+   ```bash
+   # Create PR using gh CLI from fork
+   gh pr create \
+     --repo comfyanonymous/ComfyUI \
+     --title "Bump frontend to ${NEW_VERSION}" \
+     --body "$(cat <<EOF
+Bump frontend to ${NEW_VERSION}
+
+\`\`\`
+python main.py --front-end-version Comfy-Org/ComfyUI_frontend@${NEW_VERSION}
+\`\`\`
+
+- Diff: [Comfy-Org/ComfyUI_frontend: v${OLD_VERSION}...v${NEW_VERSION}](https://github.com/Comfy-Org/ComfyUI_frontend/compare/v${OLD_VERSION}...v${NEW_VERSION})
+- PyPI Package: https://pypi.org/project/comfyui-frontend-package/${NEW_VERSION}/
+- npm Types: https://www.npmjs.com/package/@comfyorg/comfyui-frontend-types/v/${NEW_VERSION}
+
+## Changes
+
+- Fix: [Brief description of hotfixes included]
+EOF
+)"
+   ```
+
+5. **Clean up:**
+   ```bash
+   # Return to original directory
+   cd ..
+   
+   # Keep fork directory for future updates
+   echo "Fork directory 'ComfyUI-fork' kept for future use"
+   ```
+
+6. **CONFIRMATION REQUIRED**: ComfyUI requirements.txt PR created from fork?
+
+### Step 15: Post-Release Verification

 1. Verify GitHub release:
   ```bash
@@ -213,12 +363,14 @@ For each commit:
   ```bash
   pnpm view @comfyorg/comfyui-frontend-types@1.23.5
   ```
-4. Generate release summary with:
+4. Monitor ComfyUI requirements.txt PR for approval/merge
+5. Generate release summary with:
   - Version released
   - Commits included
   - Issues fixed
   - Distribution status
-5. **CONFIRMATION REQUIRED**: Release completed successfully?
+   - ComfyUI integration status
+6. **CONFIRMATION REQUIRED**: Hotfix release fully completed?

 ## Safety Checks

@@ -240,19 +392,28 @@ If something goes wrong:

 ## Important Notes

+- **Always try automated backports first** - This command is for when automation fails
 - Core branch version will be behind main - this is expected
 - The "Release" label triggers the PyPI/npm publication
+- **CRITICAL**: Always uncheck "Set as latest release" for hotfix releases
+- **Must create ComfyUI requirements.txt PR** - Hotfix isn't complete without it
 - PR numbers must include the `#` prefix
 - Mixed commits/PRs are supported but review carefully
 - Always wait for full test suite before proceeding

-## Expected Timeline
+## Modern Workflow Context

- Step 1-3: ~10 minutes (analysis)
- Steps 4-6: ~15-30 minutes (cherry-picking)
- Step 7: ~10-20 minutes (tests)
- Steps 8-10: ~10 minutes (version bump)
- Step 11-12: ~15-20 minutes (release)
- Total: ~60-90 minutes
+**Primary Backport Method:** Automated via `needs-backport` + `X.YY` labels
+**This Command Usage:** 
+- Smart path detection - skip to version bump if backports already merged
+- Fallback to manual cherry-picking only when automation fails/has conflicts
+**Complete Hotfix:** Includes GitHub release publishing + ComfyUI requirements.txt integration

-This process ensures a safe, verified hotfix release with multiple confirmation points and clear tracking of what changes are being released.
+## Workflow Paths
+
+- **Path A:** Backports already merged → Skip to Step 10 (Version Bump)
+- **Path B:** Backport PRs need merging → Merge them → Skip to Step 10 (Version Bump)  
+- **Path C:** No/failed backports → Manual cherry-picking (Steps 2-9) → Version Bump (Step 10)
+
+
+This process ensures a complete hotfix release with proper GitHub publishing, ComfyUI integration, and multiple safety checkpoints.
--- a/.claude/commands/setup_repo.md
+++ b/.claude/commands/setup_repo.md
@@ -0,0 +1,158 @@
+# Setup Repository
+
+Bootstrap the ComfyUI Frontend monorepo with all necessary dependencies and verification checks.
+
+## Overview
+
+This command will:
+1. Install pnpm package manager (if not present)
+2. Install all project dependencies
+3. Verify the project builds successfully
+4. Run unit tests to ensure functionality
+5. Start development server to verify frontend boots correctly
+
+## Prerequisites Check
+
+First, let's verify the environment:
+
+```bash
+# Check Node.js version (should be >= 24)
+node --version
+
+# Check if we're in a git repository
+git status
+```
+
+## Step 1: Install pnpm
+
+```bash
+# Check if pnpm is already installed
+pnpm --version 2>/dev/null || {
+  echo "Installing pnpm..."
+  npm install -g pnpm
+}
+
+# Verify pnpm installation
+pnpm --version
+```
+
+## Step 2: Install Dependencies
+
+```bash
+# Install all dependencies using pnpm
+echo "Installing project dependencies..."
+pnpm install
+
+# Verify node_modules exists and has packages
+ls -la node_modules | head -5
+```
+
+## Step 3: Verify Build
+
+```bash
+# Run TypeScript type checking
+echo "Running TypeScript checks..."
+pnpm typecheck
+
+# Build the project
+echo "Building project..."
+pnpm build
+
+# Verify dist folder was created
+ls -la dist/
+```
+
+## Step 4: Run Unit Tests
+
+```bash
+# Run unit tests
+echo "Running unit tests..."
+pnpm test:unit
+
+# If tests fail, show the output and stop
+if [ $? -ne 0 ]; then
+  echo "❌ Unit tests failed. Please fix failing tests before continuing."
+  exit 1
+fi
+
+echo "✅ Unit tests passed successfully"
+```
+
+## Step 5: Verify Development Server
+
+```bash
+# Start development server in background
+echo "Starting development server..."
+pnpm dev &
+SERVER_PID=$!
+
+# Wait for server to start (check for port 5173 or similar)
+echo "Waiting for server to start..."
+sleep 10
+
+# Check if server is running
+if curl -s http://localhost:5173 > /dev/null 2>&1; then
+  echo "✅ Development server started successfully at http://localhost:5173"
+  
+  # Kill the background server
+  kill $SERVER_PID
+  wait $SERVER_PID 2>/dev/null
+else
+  echo "❌ Development server failed to start or is not accessible"
+  kill $SERVER_PID 2>/dev/null
+  wait $SERVER_PID 2>/dev/null
+  exit 1
+fi
+```
+
+## Step 6: Final Verification
+
+```bash
+# Run linting to ensure code quality
+echo "Running linter..."
+pnpm lint
+
+# Show project status
+echo ""
+echo "🎉 Repository setup complete!"
+echo ""
+echo "Available commands:"
+echo "  pnpm dev          - Start development server"
+echo "  pnpm build        - Build for production"
+echo "  pnpm test:unit    - Run unit tests"
+echo "  pnpm test:component - Run component tests"
+echo "  pnpm typecheck    - Run TypeScript checks"
+echo "  pnpm lint         - Run ESLint"
+echo "  pnpm format       - Format code with Prettier"
+echo ""
+echo "Next steps:"
+echo "1. Run 'pnpm dev' to start developing"
+echo "2. Open http://localhost:5173 in your browser"
+echo "3. Check README.md for additional setup instructions"
+```
+
+## Troubleshooting
+
+If any step fails:
+
+1. **pnpm installation fails**: Try using `curl -fsSL https://get.pnpm.io/install.sh | sh -`
+2. **Dependencies fail to install**: Try clearing cache with `pnpm store prune` and retry
+3. **Build fails**: Check for TypeScript errors and fix them first
+4. **Tests fail**: Review test output and fix failing tests
+5. **Dev server fails**: Check if port 5173 is already in use
+
+## Manual Verification Steps
+
+After running the setup, manually verify:
+
+1. **Dependencies installed**: `ls node_modules | wc -l` should show many packages
+2. **Build artifacts**: `ls dist/` should show built files
+3. **Server accessible**: Open http://localhost:5173 in browser
+4. **Hot reload works**: Edit a file and see changes reflect
+
+## Environment Requirements
+
+- Node.js >= 24
+- Git repository
+- Internet connection for package downloads
+- Available ports (typically 5173 for dev server)
--- a/.git-blame-ignore-revs
+++ b/.git-blame-ignore-revs
@@ -4,3 +4,24 @@

 # npm run format on litegraph merge (10,672 insertions, 7,327 deletions across 129 files)
 c53f197de2a3e0fa66b16dedc65c131235c1c4b6
+
+# Reorganize renderer components into domain-driven folder structure
+c8a83a9caede7bdb5f8598c5492b07d08c339d49
+
+# Domain-driven design (DDD) refactors - September 2025
+# These commits reorganized the codebase into domain-driven architecture
+
+# [refactor] Improve renderer domain organization (#5552)
+6349ceee6c0a57fc7992e85635def9b6e22eaeb2
+
+# [refactor] Improve settings domain organization (#5550)  
+4c8c4a1ad4f53354f700a33ea1b95262aeda2719
+
+# [refactor] Improve workflow domain organization (#5584)
+ca312fd1eab540cc4ddc0e3d244d38b3858574f0
+
+# [refactor] Move thumbnail functionality to renderer/core domain (#5586)
+e3bb29ceb8174b8bbca9e48ec7d42cd540f40efa
+
+# [refactor] Improve updates/notifications domain organization (#5590)
+27ab355f9c73415dc39f4d3f512b02308f847801
--- a/.gitattributes
+++ b/.gitattributes
@@ -9,7 +9,8 @@
 *.mts text eol=lf
 *.ts text eol=lf
 *.vue text eol=lf
+*.yaml text eol=lf

 # Generated files
 src/types/comfyRegistryTypes.ts linguist-generated=true
-src/types/generatedManagerTypes.ts linguist-generated=true
+src/workbench/extensions/manager/types/generatedManagerTypes.ts linguist-generated=true
--- a/.github/workflows/backport.yaml
+++ b/.github/workflows/backport.yaml
@@ -2,12 +2,27 @@ name: Auto Backport

 on:
  pull_request_target:
-    types: [closed]
+    types: [closed, labeled]
    branches: [main]
+  workflow_dispatch:
+    inputs:
+      pr_number:
+        description: 'PR number to backport'
+        required: true
+        type: string
+      force_rerun:
+        description: 'Force rerun even if backports exist'
+        required: false
+        type: boolean
+        default: false

 jobs:
  backport:
-    if: github.event.pull_request.merged == true && contains(github.event.pull_request.labels.*.name, 'needs-backport')
+    if: >
+      (github.event_name == 'pull_request_target' && 
+       github.event.pull_request.merged == true && 
+       contains(github.event.pull_request.labels.*.name, 'needs-backport')) ||
+      github.event_name == 'workflow_dispatch'
    runs-on: ubuntu-latest
    permissions:
      contents: write
@@ -15,6 +30,35 @@ jobs:
      issues: write

    steps:
+      - name: Validate inputs for manual triggers
+        if: github.event_name == 'workflow_dispatch'
+        run: |
+          # Validate PR number format
+          if ! [[ "${{ inputs.pr_number }}" =~ ^[0-9]+$ ]]; then
+            echo "::error::Invalid PR number format. Must be a positive integer."
+            exit 1
+          fi
+          
+          # Validate PR exists and is merged
+          if ! gh pr view "${{ inputs.pr_number }}" --json merged >/dev/null 2>&1; then
+            echo "::error::PR #${{ inputs.pr_number }} not found or inaccessible."
+            exit 1
+          fi
+          
+          MERGED=$(gh pr view "${{ inputs.pr_number }}" --json merged --jq '.merged')
+          if [ "$MERGED" != "true" ]; then
+            echo "::error::PR #${{ inputs.pr_number }} is not merged. Only merged PRs can be backported."
+            exit 1
+          fi
+          
+          # Validate PR has needs-backport label
+          if ! gh pr view "${{ inputs.pr_number }}" --json labels --jq '.labels[].name' | grep -q "needs-backport"; then
+            echo "::error::PR #${{ inputs.pr_number }} does not have 'needs-backport' label."
+            exit 1
+          fi
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
      - name: Checkout repository
        uses: actions/checkout@v4
        with:
@@ -25,13 +69,49 @@ jobs:
          git config user.name "github-actions[bot]"
          git config user.email "github-actions[bot]@users.noreply.github.com"

+      - name: Check if backports already exist
+        id: check-existing
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          PR_NUMBER: ${{ github.event_name == 'workflow_dispatch' && inputs.pr_number || github.event.pull_request.number }}
+        run: |
+          # Check for existing backport PRs for this PR number
+          EXISTING_BACKPORTS=$(gh pr list --state all --search "backport-${PR_NUMBER}-to" --json title,headRefName,baseRefName | jq -r '.[].headRefName')
+          
+          if [ -z "$EXISTING_BACKPORTS" ]; then
+            echo "skip=false" >> $GITHUB_OUTPUT
+            exit 0
+          fi
+          
+          # For manual triggers with force_rerun, proceed anyway
+          if [ "${{ github.event_name }}" = "workflow_dispatch" ] && [ "${{ inputs.force_rerun }}" = "true" ]; then
+            echo "skip=false" >> $GITHUB_OUTPUT
+            echo "::warning::Force rerun requested - existing backports will be updated"
+            exit 0
+          fi
+          
+          echo "Found existing backport PRs:"
+          echo "$EXISTING_BACKPORTS"
+          echo "skip=true" >> $GITHUB_OUTPUT
+          echo "::warning::Backport PRs already exist for PR #${PR_NUMBER}, skipping to avoid duplicates"
+
      - name: Extract version labels
+        if: steps.check-existing.outputs.skip != 'true'
        id: versions
        run: |
          # Extract version labels (e.g., "1.24", "1.22")
          VERSIONS=""
-          LABELS='${{ toJSON(github.event.pull_request.labels) }}'
-          for label in $(echo "$LABELS" | jq -r '.[].name'); do
+          
+          if [ "${{ github.event_name }}" = "workflow_dispatch" ]; then
+            # For manual triggers, get labels from the PR
+            LABELS=$(gh pr view ${{ inputs.pr_number }} --json labels | jq -r '.labels[].name')
+          else
+            # For automatic triggers, extract from PR event
+            LABELS='${{ toJSON(github.event.pull_request.labels) }}'
+            LABELS=$(echo "$LABELS" | jq -r '.[].name')
+          fi
+          
+          for label in $LABELS; do
            # Match version labels like "1.24" (major.minor only)
            if [[ "$label" =~ ^[0-9]+\.[0-9]+$ ]]; then
              # Validate the branch exists before adding to list
@@ -52,14 +132,23 @@ jobs:
          echo "Found version labels: ${VERSIONS}"

      - name: Backport commits
+        if: steps.check-existing.outputs.skip != 'true'
        id: backport
        env:
-          PR_NUMBER: ${{ github.event.pull_request.number }}
-          PR_TITLE: ${{ github.event.pull_request.title }}
-          MERGE_COMMIT: ${{ github.event.pull_request.merge_commit_sha }}
+          PR_NUMBER: ${{ github.event_name == 'workflow_dispatch' && inputs.pr_number || github.event.pull_request.number }}
        run: |
          FAILED=""
          SUCCESS=""
+          
+          # Get PR data for manual triggers
+          if [ "${{ github.event_name }}" = "workflow_dispatch" ]; then
+            PR_DATA=$(gh pr view ${{ inputs.pr_number }} --json title,mergeCommit)
+            PR_TITLE=$(echo "$PR_DATA" | jq -r '.title')
+            MERGE_COMMIT=$(echo "$PR_DATA" | jq -r '.mergeCommit.oid')
+          else
+            PR_TITLE="${{ github.event.pull_request.title }}"
+            MERGE_COMMIT="${{ github.event.pull_request.merge_commit_sha }}"
+          fi

          for version in ${{ steps.versions.outputs.versions }}; do
            echo "::group::Backporting to core/${version}"
@@ -109,14 +198,21 @@ jobs:
          fi

      - name: Create PR for each successful backport
-        if: steps.backport.outputs.success
+        if: steps.check-existing.outputs.skip != 'true' && steps.backport.outputs.success
        env:
          GH_TOKEN: ${{ secrets.PR_GH_TOKEN }}
+          PR_NUMBER: ${{ github.event_name == 'workflow_dispatch' && inputs.pr_number || github.event.pull_request.number }}
        run: |
-          PR_TITLE="${{ github.event.pull_request.title }}"
-          PR_NUMBER="${{ github.event.pull_request.number }}"
-          PR_AUTHOR="${{ github.event.pull_request.user.login }}"
-
+          # Get PR data for manual triggers
+          if [ "${{ github.event_name }}" = "workflow_dispatch" ]; then
+            PR_DATA=$(gh pr view ${{ inputs.pr_number }} --json title,author)
+            PR_TITLE=$(echo "$PR_DATA" | jq -r '.title')
+            PR_AUTHOR=$(echo "$PR_DATA" | jq -r '.author.login')
+          else
+            PR_TITLE="${{ github.event.pull_request.title }}"
+            PR_AUTHOR="${{ github.event.pull_request.user.login }}"
+          fi
+          
          for backport in ${{ steps.backport.outputs.success }}; do
            IFS=':' read -r version branch <<< "${backport}"

@@ -141,13 +237,20 @@ jobs:
          done

      - name: Comment on failures
-        if: failure() && steps.backport.outputs.failed
+        if: steps.check-existing.outputs.skip != 'true' && failure() && steps.backport.outputs.failed
        env:
          GH_TOKEN: ${{ github.token }}
        run: |
-          PR_NUMBER="${{ github.event.pull_request.number }}"
-          PR_AUTHOR="${{ github.event.pull_request.user.login }}"
-          MERGE_COMMIT="${{ github.event.pull_request.merge_commit_sha }}"
+          if [ "${{ github.event_name }}" = "workflow_dispatch" ]; then
+            PR_DATA=$(gh pr view ${{ inputs.pr_number }} --json author,mergeCommit)
+            PR_NUMBER="${{ inputs.pr_number }}"
+            PR_AUTHOR=$(echo "$PR_DATA" | jq -r '.author.login')
+            MERGE_COMMIT=$(echo "$PR_DATA" | jq -r '.mergeCommit.oid')
+          else
+            PR_NUMBER="${{ github.event.pull_request.number }}"
+            PR_AUTHOR="${{ github.event.pull_request.user.login }}"
+            MERGE_COMMIT="${{ github.event.pull_request.merge_commit_sha }}"
+          fi

          for failure in ${{ steps.backport.outputs.failed }}; do
            IFS=':' read -r version reason conflicts <<< "${failure}"
--- a/.github/workflows/chromatic.yaml
+++ b/.github/workflows/chromatic.yaml
@@ -12,9 +12,6 @@ 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
@@ -32,29 +29,6 @@ jobs:
          node-version: '20'
          cache: 'pnpm'

-      - 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
@@ -81,37 +55,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.' }}
--- a/.github/workflows/claude-pr-review.yml
+++ b/.github/workflows/claude-pr-review.yml
@@ -47,6 +47,7 @@ jobs:
    needs: wait-for-ci
    if: needs.wait-for-ci.outputs.should-proceed == 'true'
    runs-on: ubuntu-latest
+    timeout-minutes: 30
    steps:
      - name: Checkout repository
        uses: actions/checkout@v4
@@ -69,19 +70,17 @@ jobs:
          pnpm install -g typescript @vue/compiler-sfc

      - name: Run Claude PR Review
-        uses: anthropics/claude-code-action@main
+        uses: anthropics/claude-code-action@v1.0.6
        with:
          label_trigger: "claude-review"
-          direct_prompt: |
+          prompt: |
            Read the file .claude/commands/comprehensive-pr-review.md and follow ALL the instructions exactly. 
            
            CRITICAL: You must post individual inline comments using the gh api commands shown in the file. 
            DO NOT create a summary comment. 
            Each issue must be posted as a separate inline comment on the specific line of code.
          anthropic_api_key: ${{ secrets.ANTHROPIC_API_KEY }}
-          max_turns: 256
-          timeout_minutes: 30
-          allowed_tools: "Bash(git:*),Bash(gh api:*),Bash(gh pr:*),Bash(gh repo:*),Bash(jq:*),Bash(echo:*),Read,Write,Edit,Glob,Grep,WebFetch"
+          claude_args: "--max-turns 256 --allowedTools 'Bash(git:*),Bash(gh api:*),Bash(gh pr:*),Bash(gh repo:*),Bash(jq:*),Bash(echo:*),Read,Write,Edit,Glob,Grep,WebFetch'"
        env:
          PR_NUMBER: ${{ github.event.pull_request.number }}
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
--- a/.github/workflows/create-release-candidate-branch.yaml
+++ b/.github/workflows/create-release-candidate-branch.yaml
@@ -128,45 +128,6 @@ jobs:
          echo "- Critical security patches"
          echo "- Documentation updates"

-      - name: Create branch protection rules
-        if: steps.check_version.outputs.is_minor_bump == 'true' && env.branch_exists != 'true'
-        env:
-          GITHUB_TOKEN: ${{ secrets.PR_GH_TOKEN || secrets.GITHUB_TOKEN }}
-        run: |
-          BRANCH_NAME="${{ steps.check_version.outputs.branch_name }}"
-
-          # Create branch protection using GitHub API
-          echo "Setting up branch protection for $BRANCH_NAME..."
-
-          RESPONSE=$(curl -s -w "\n%{http_code}" -X PUT \
-            -H "Authorization: token $GITHUB_TOKEN" \
-            -H "Accept: application/vnd.github.v3+json" \
-            "https://api.github.com/repos/${{ github.repository }}/branches/$BRANCH_NAME/protection" \
-            -d '{
-              "required_status_checks": {
-                "strict": true,
-                "contexts": ["lint-and-format", "test", "playwright-tests"]
-              },
-              "enforce_admins": false,
-              "required_pull_request_reviews": {
-                "required_approving_review_count": 1,
-                "dismiss_stale_reviews": true
-              },
-              "restrictions": null,
-              "allow_force_pushes": false,
-              "allow_deletions": false
-            }')
-
-          HTTP_CODE=$(echo "$RESPONSE" | tail -n 1)
-          BODY=$(echo "$RESPONSE" | sed '$d')
-
-          if [[ "$HTTP_CODE" -eq 200 ]] || [[ "$HTTP_CODE" -eq 201 ]]; then
-            echo "✅ Branch protection successfully applied"
-          else
-            echo "⚠️  Failed to apply branch protection (HTTP $HTTP_CODE)"
-            echo "Response: $BODY"
-            # Don't fail the workflow, just warn
-          fi

      - name: Post summary
        if: steps.check_version.outputs.is_minor_bump == 'true'
--- a/.github/workflows/i18n-custom-nodes.yaml
+++ b/.github/workflows/i18n-custom-nodes.yaml
@@ -32,11 +32,10 @@ jobs:
      with:
        repository: Comfy-Org/ComfyUI_frontend
        path: ComfyUI_frontend
-    - name: Checkout ComfyUI_devtools
-      uses: actions/checkout@v4
-      with:
-        repository: Comfy-Org/ComfyUI_devtools
-        path: ComfyUI/custom_nodes/ComfyUI_devtools
+    - name: Copy ComfyUI_devtools from frontend repo
+      run: |
+        mkdir -p ComfyUI/custom_nodes/ComfyUI_devtools
+        cp -r ComfyUI_frontend/tools/devtools/* ComfyUI/custom_nodes/ComfyUI_devtools/
    - name: Checkout custom node repository
      uses: actions/checkout@v4
      with:
@@ -79,7 +78,7 @@ jobs:
        wait-for-it --service 127.0.0.1:8188 -t 600
      working-directory: ComfyUI
    - name: Install Playwright Browsers
-      run: npx playwright install chromium --with-deps
+      run: pnpm exec playwright install chromium --with-deps
      working-directory: ComfyUI_frontend
    - name: Start dev server
      # Run electron dev server as it is a superset of the web dev server
@@ -87,7 +86,7 @@ jobs:
      run: pnpm dev:electron &
      working-directory: ComfyUI_frontend
    - name: Capture base i18n
-      run: npx tsx scripts/diff-i18n capture
+      run: pnpm exec tsx scripts/diff-i18n capture
      working-directory: ComfyUI_frontend
    - name: Update en.json
      run: pnpm collect-i18n
@@ -100,7 +99,7 @@ jobs:
        OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
      working-directory: ComfyUI_frontend
    - name: Diff base vs updated i18n
-      run: npx tsx scripts/diff-i18n diff
+      run: pnpm exec tsx scripts/diff-i18n diff
      working-directory: ComfyUI_frontend
    - name: Update i18n in custom node repository
      run: |
--- a/.github/workflows/i18n-node-defs.yaml
+++ b/.github/workflows/i18n-node-defs.yaml
@@ -15,7 +15,7 @@ jobs:
    steps:
    - uses: Comfy-Org/ComfyUI_frontend_setup_action@v3
    - name: Install Playwright Browsers
-      run: npx playwright install chromium --with-deps
+      run: pnpm exec playwright install chromium --with-deps
      working-directory: ComfyUI_frontend
    - name: Start dev server
      # Run electron dev server as it is a superset of the web dev server
--- a/.github/workflows/i18n.yaml
+++ b/.github/workflows/i18n.yaml
@@ -25,8 +25,15 @@ jobs:
        key: i18n-tools-cache-${{ runner.os }}-${{ hashFiles('ComfyUI_frontend/pnpm-lock.yaml') }}
        restore-keys: |
          i18n-tools-cache-${{ runner.os }}-
+    - name: Cache Playwright browsers
+      uses: actions/cache@v4
+      with:
+        path: ~/.cache/ms-playwright
+        key: playwright-browsers-${{ runner.os }}-${{ hashFiles('ComfyUI_frontend/pnpm-lock.yaml') }}
+        restore-keys: |
+          playwright-browsers-${{ runner.os }}-
    - name: Install Playwright Browsers
-      run: npx playwright install chromium --with-deps
+      run: pnpm exec playwright install chromium --with-deps
      working-directory: ComfyUI_frontend
    - name: Start dev server
      # Run electron dev server as it is a superset of the web dev server
@@ -34,7 +41,7 @@ jobs:
      run: pnpm dev:electron &
      working-directory: ComfyUI_frontend
    - name: Update en.json
-      run: pnpm collect-i18n -- scripts/collect-i18n-general.ts
+      run: pnpm collect-i18n
      env:
        PLAYWRIGHT_TEST_URL: http://localhost:5173
      working-directory: ComfyUI_frontend
--- a/.github/workflows/lint-and-format.yaml
+++ b/.github/workflows/lint-and-format.yaml
@@ -16,7 +16,7 @@ jobs:
        uses: actions/checkout@v4
        with:
          token: ${{ secrets.GITHUB_TOKEN }}
-          ref: ${{ github.event.pull_request.head.sha }}
+          ref: ${{ github.event.pull_request.head.ref }}
          fetch-depth: 0

      - name: Install pnpm
--- a/.github/workflows/pr-playwright-deploy.yaml
+++ b/.github/workflows/pr-playwright-deploy.yaml
@@ -0,0 +1,92 @@
+name: PR Playwright Deploy (Forks)
+
+on:
+  workflow_run:
+    workflows: ["Tests CI"]
+    types: [requested, completed]
+
+env:
+  DATE_FORMAT: '+%m/%d/%Y, %I:%M:%S %p'
+
+jobs:
+  deploy-and-comment-forked-pr:
+    runs-on: ubuntu-latest
+    if: |
+      github.repository == 'Comfy-Org/ComfyUI_frontend' && 
+      github.event.workflow_run.event == 'pull_request' &&
+      github.event.workflow_run.head_repository != null &&
+      github.event.workflow_run.repository != null &&
+      github.event.workflow_run.head_repository.full_name != github.event.workflow_run.repository.full_name
+    permissions:
+      pull-requests: write
+      actions: read
+    steps:
+      - name: Log workflow trigger info
+        run: |
+          echo "Repository: ${{ github.repository }}"
+          echo "Event: ${{ github.event.workflow_run.event }}"
+          echo "Head repo: ${{ github.event.workflow_run.head_repository.full_name || 'null' }}"
+          echo "Base repo: ${{ github.event.workflow_run.repository.full_name || 'null' }}"
+          echo "Is forked: ${{ github.event.workflow_run.head_repository.full_name != github.event.workflow_run.repository.full_name }}"
+
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Get PR Number
+        id: pr
+        uses: actions/github-script@v7
+        with:
+          script: |
+            const { data: prs } = await github.rest.pulls.list({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              state: 'open',
+            });
+            
+            const pr = prs.find(p => p.head.sha === context.payload.workflow_run.head_sha);
+            
+            if (!pr) {
+              console.log('No PR found for SHA:', context.payload.workflow_run.head_sha);
+              return null;
+            }
+            
+            console.log(`Found PR #${pr.number} from fork: ${context.payload.workflow_run.head_repository.full_name}`);
+            return pr.number;
+
+      - name: Handle Test Start
+        if: steps.pr.outputs.result != 'null' && github.event.action == 'requested'
+        env:
+          GITHUB_TOKEN: ${{ github.token }}
+        run: |
+          chmod +x scripts/cicd/pr-playwright-deploy-and-comment.sh
+          ./scripts/cicd/pr-playwright-deploy-and-comment.sh \
+            "${{ steps.pr.outputs.result }}" \
+            "${{ github.event.workflow_run.head_branch }}" \
+            "starting" \
+            "$(date -u '${{ env.DATE_FORMAT }}')"
+
+      - name: Download and Deploy Reports
+        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: playwright-report-*
+          path: reports
+          
+      - name: Handle Test Completion
+        if: steps.pr.outputs.result != 'null' && github.event.action == 'completed'
+        env:
+          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          GITHUB_TOKEN: ${{ github.token }}
+        run: |
+          # Rename merged report if exists
+          [ -d "reports/playwright-report-chromium-merged" ] && \
+            mv reports/playwright-report-chromium-merged reports/playwright-report-chromium
+          
+          chmod +x scripts/cicd/pr-playwright-deploy-and-comment.sh
+          ./scripts/cicd/pr-playwright-deploy-and-comment.sh \
+            "${{ steps.pr.outputs.result }}" \
+            "${{ github.event.workflow_run.head_branch }}" \
+            "completed"
--- a/.github/workflows/pr-storybook-comment.yaml
+++ b/.github/workflows/pr-storybook-comment.yaml
@@ -0,0 +1,126 @@
+name: PR Storybook Comment
+
+on:
+  workflow_run:
+    workflows: ['Chromatic']
+    types: [requested, completed]
+
+jobs:
+  comment-storybook:
+    runs-on: ubuntu-latest
+    if: >-
+      github.repository == 'Comfy-Org/ComfyUI_frontend'
+      && github.event.workflow_run.event == 'pull_request'
+      && startsWith(github.event.workflow_run.head_branch, 'version-bump-')
+    permissions:
+      pull-requests: write
+      actions: read
+    steps:
+      - name: Get PR number
+        id: pr
+        uses: actions/github-script@v7
+        with:
+          script: |
+            const { data: pullRequests } = await github.rest.pulls.list({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              state: 'open',
+              head: `${context.repo.owner}:${context.payload.workflow_run.head_branch}`,
+            });
+
+            if (pullRequests.length === 0) {
+              console.log('No open PR found for this branch');
+              return null;
+            }
+
+            return pullRequests[0].number;
+
+      - name: Log when no PR found
+        if: steps.pr.outputs.result == 'null'
+        run: |
+          echo "⚠️ No open PR found for branch: ${{ github.event.workflow_run.head_branch }}"
+          echo "Workflow run ID: ${{ github.event.workflow_run.id }}"
+          echo "Repository: ${{ github.event.workflow_run.repository.full_name }}"
+          echo "Event: ${{ github.event.workflow_run.event }}"
+
+      - name: Get workflow run details
+        if: steps.pr.outputs.result != 'null' && github.event.action == 'completed'
+        id: workflow-run
+        uses: actions/github-script@v7
+        with:
+          script: |
+            const run = await github.rest.actions.getWorkflowRun({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              run_id: context.payload.workflow_run.id,
+            });
+
+            return {
+              conclusion: run.data.conclusion,
+              html_url: run.data.html_url
+            };
+
+      - name: Get completion time
+        id: completion-time
+        run: echo "time=$(date -u '+%m/%d/%Y, %I:%M:%S %p')" >> $GITHUB_OUTPUT
+
+      - name: Comment PR - Storybook Started
+        if: steps.pr.outputs.result != 'null' && github.event.action == 'requested'
+        uses: edumserrano/find-create-or-update-comment@82880b65c8a3a6e4c70aa05a204995b6c9696f53 # v3.0.0
+        with:
+          issue-number: ${{ steps.pr.outputs.result }}
+          body-includes: '<!-- STORYBOOK_BUILD_STATUS -->'
+          comment-author: 'github-actions[bot]'
+          edit-mode: replace
+          body: |
+            <!-- STORYBOOK_BUILD_STATUS -->
+            ## 🎨 Storybook Build Status
+
+            <img alt='comfy-loading-gif' src='https://github.com/user-attachments/assets/755c86ee-e445-4ea8-bc2c-cca85df48686' width='14px' height='14px' style='vertical-align: middle; margin-right: 4px;' /> **Build is starting...** 
+
+            ⏰ Started at: ${{ steps.completion-time.outputs.time }} UTC
+
+            ### 🚀 Building Storybook
+            - 📦 Installing dependencies...
+            - 🔧 Building Storybook components...
+            - 🎨 Running Chromatic visual tests...
+
+            ---
+            ⏱️ Please wait while the Storybook build is in progress...
+
+      - name: Comment PR - Storybook Complete
+        if: steps.pr.outputs.result != 'null' && github.event.action == 'completed'
+        uses: edumserrano/find-create-or-update-comment@82880b65c8a3a6e4c70aa05a204995b6c9696f53 # v3.0.0
+        with:
+          issue-number: ${{ steps.pr.outputs.result }}
+          body-includes: '<!-- STORYBOOK_BUILD_STATUS -->'
+          comment-author: 'github-actions[bot]'
+          edit-mode: replace
+          body: |
+            <!-- STORYBOOK_BUILD_STATUS -->
+            ## 🎨 Storybook Build Status
+
+            ${{
+              fromJSON(steps.workflow-run.outputs.result).conclusion == 'success' && '✅'
+              || fromJSON(steps.workflow-run.outputs.result).conclusion == 'skipped' && '⏭️'
+              || fromJSON(steps.workflow-run.outputs.result).conclusion == 'cancelled' && '🚫'
+              || '❌'
+            }} **${{
+              fromJSON(steps.workflow-run.outputs.result).conclusion == 'success' && 'Build completed successfully!'
+              || fromJSON(steps.workflow-run.outputs.result).conclusion == 'skipped' && 'Build skipped.'
+              || fromJSON(steps.workflow-run.outputs.result).conclusion == 'cancelled' && 'Build cancelled.'
+              || 'Build failed!'
+            }}**
+
+            ⏰ Completed at: ${{ steps.completion-time.outputs.time }} UTC
+
+            ### 🔗 Links
+            - [📊 View Workflow Run](${{ fromJSON(steps.workflow-run.outputs.result).html_url }})
+
+            ---
+            ${{
+              fromJSON(steps.workflow-run.outputs.result).conclusion == 'success' && '🎉 Your Storybook is ready for review!'
+              || fromJSON(steps.workflow-run.outputs.result).conclusion == 'skipped' && 'ℹ️ Chromatic was skipped for this PR.'
+              || fromJSON(steps.workflow-run.outputs.result).conclusion == 'cancelled' && 'ℹ️ The Chromatic run was cancelled.'
+              || '⚠️ Please check the workflow logs for error details.'
+            }}
--- a/.github/workflows/publish-frontend-types.yaml
+++ b/.github/workflows/publish-frontend-types.yaml
@@ -0,0 +1,139 @@
+name: Publish Frontend Types
+
+on:
+  workflow_dispatch:
+    inputs:
+      version:
+        description: 'Version to publish (e.g., 1.26.7)'
+        required: true
+        type: string
+      dist_tag:
+        description: 'npm dist-tag to use'
+        required: true
+        default: latest
+        type: string
+      ref:
+        description: 'Git ref to checkout (commit SHA, tag, or branch)'
+        required: false
+        type: string
+  workflow_call:
+    inputs:
+      version:
+        required: true
+        type: string
+      dist_tag:
+        required: false
+        type: string
+        default: latest
+      ref:
+        required: false
+        type: string
+
+concurrency:
+  group: publish-frontend-types-${{ github.workflow }}-${{ inputs.version }}-${{ inputs.dist_tag }}
+  cancel-in-progress: false
+
+jobs:
+  publish_types_manual:
+    name: Publish @comfyorg/comfyui-frontend-types
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+    steps:
+      - name: Validate inputs
+        shell: bash
+        run: |
+          set -euo pipefail
+          VERSION="${{ inputs.version }}"
+          SEMVER_REGEX='^(0|[1-9][0-9]*)\.(0|[1-9][0-9]*)\.(0|[1-9][0-9]*)(-((0|[1-9][0-9]*|[0-9]*[A-Za-z-][0-9A-Za-z-]*)(\.(0|[1-9][0-9]*|[0-9]*[A-Za-z-][0-9A-Za-z-]*))*))?(\+([0-9A-Za-z-]+(\.[0-9A-Za-z-]+)*))?$'
+          if [[ ! "$VERSION" =~ $SEMVER_REGEX ]]; then
+            echo "::error title=Invalid version::Version '$VERSION' must follow semantic versioning (x.y.z[-suffix][+build])" >&2
+            exit 1
+          fi
+
+      - name: Determine ref to checkout
+        id: resolve_ref
+        shell: bash
+        run: |
+          set -euo pipefail
+          REF="${{ inputs.ref }}"
+          VERSION="${{ inputs.version }}"
+          if [ -n "$REF" ]; then
+            if ! git check-ref-format --allow-onelevel "$REF"; then
+              echo "::error title=Invalid ref::Ref '$REF' fails git check-ref-format validation." >&2
+              exit 1
+            fi
+            echo "ref=$REF" >> "$GITHUB_OUTPUT"
+          else
+            echo "ref=refs/tags/v$VERSION" >> "$GITHUB_OUTPUT"
+          fi
+
+      - name: Checkout repository
+        uses: actions/checkout@v5
+        with:
+          ref: ${{ steps.resolve_ref.outputs.ref }}
+          fetch-depth: 1
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v5
+        with:
+          node-version: 'lts/*'
+          cache: 'pnpm'
+          registry-url: https://registry.npmjs.org
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+        env:
+          PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: '1'
+
+      - name: Build types
+        run: pnpm build:types
+
+      - name: Verify version matches input
+        id: verify
+        shell: bash
+        run: |
+          PKG_VERSION=$(node -p "require('./package.json').version")
+          TYPES_PKG_VERSION=$(node -p "require('./dist/package.json').version")
+          if [ "$PKG_VERSION" != "${{ inputs.version }}" ]; then
+            echo "Error: package.json version $PKG_VERSION does not match input ${{ inputs.version }}" >&2
+            exit 1
+          fi
+          if [ "$TYPES_PKG_VERSION" != "${{ inputs.version }}" ]; then
+            echo "Error: dist/package.json version $TYPES_PKG_VERSION does not match input ${{ inputs.version }}" >&2
+            exit 1
+          fi
+          echo "version=${{ inputs.version }}" >> $GITHUB_OUTPUT
+
+      - name: Check if version already on npm
+        id: check_npm
+        shell: bash
+        run: |
+          set -euo pipefail
+          NAME=$(node -p "require('./dist/package.json').name")
+          VER="${{ steps.verify.outputs.version }}"
+          STATUS=0
+          OUTPUT=$(npm view "${NAME}@${VER}" --json 2>&1) || STATUS=$?
+          if [ "$STATUS" -eq 0 ]; then
+            echo "exists=true" >> "$GITHUB_OUTPUT"
+            echo "::warning title=Already published::${NAME}@${VER} already exists on npm. Skipping publish."
+          else
+            if echo "$OUTPUT" | grep -q "E404"; then
+              echo "exists=false" >> "$GITHUB_OUTPUT"
+            else
+              echo "::error title=Registry lookup failed::$OUTPUT" >&2
+              exit "$STATUS"
+            fi
+          fi
+
+      - name: Publish package
+        if: steps.check_npm.outputs.exists == 'false'
+        run: pnpm publish --access public --tag "${{ inputs.dist_tag }}" --no-git-checks
+        working-directory: dist
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
--- a/.github/workflows/release.yaml
+++ b/.github/workflows/release.yaml
@@ -18,7 +18,7 @@ jobs:
      is_prerelease: ${{ steps.check_prerelease.outputs.is_prerelease }}
    steps:
      - name: Checkout code
-        uses: actions/checkout@v4
+        uses: actions/checkout@v5
      - name: Install pnpm
        uses: pnpm/action-setup@v4
        with:
@@ -73,7 +73,7 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
-        uses: actions/checkout@v4
+        uses: actions/checkout@v5
      - name: Download dist artifact
        uses: actions/download-artifact@v4
        with:
@@ -98,7 +98,7 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
-        uses: actions/checkout@v4
+        uses: actions/checkout@v5
      - name: Download dist artifact
        uses: actions/download-artifact@v4
        with:
@@ -126,34 +126,8 @@ jobs:

  publish_types:
    needs: build
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - name: Install pnpm
-        uses: pnpm/action-setup@v4
-        with:
-          version: 10
-      - uses: actions/setup-node@v4
-        with:
-          node-version: 'lts/*'
-          cache: 'pnpm'
-          registry-url: https://registry.npmjs.org
-
-      - name: Cache tool outputs
-        uses: actions/cache@v4
-        with:
-          path: |
-            .cache
-            tsconfig.tsbuildinfo
-            dist
-          key: types-tools-cache-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: |
-            types-tools-cache-${{ runner.os }}-
-
-      - run: pnpm install --frozen-lockfile
-      - run: pnpm build:types
-      - name: Publish package
-        run: pnpm publish --access public
-        working-directory: dist
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+    uses: ./.github/workflows/publish-frontend-types.yaml
+    with:
+      version: ${{ needs.build.outputs.version }}
+      ref: ${{ github.event.pull_request.merge_commit_sha }}
+    secrets: inherit
--- a/.github/workflows/test-browser-exp.yaml
+++ b/.github/workflows/test-browser-exp.yaml
@@ -11,12 +11,19 @@ jobs:
    if: github.event.label.name == 'New Browser Test Expectations'
    steps:
    - uses: Comfy-Org/ComfyUI_frontend_setup_action@v3
+    - name: Cache Playwright browsers
+      uses: actions/cache@v4
+      with:
+        path: ~/.cache/ms-playwright
+        key: playwright-browsers-${{ runner.os }}-${{ hashFiles('ComfyUI_frontend/pnpm-lock.yaml') }}
+        restore-keys: |
+          playwright-browsers-${{ runner.os }}-
    - name: Install Playwright Browsers
-      run: npx playwright install chromium --with-deps
+      run: pnpm exec playwright install chromium --with-deps
      working-directory: ComfyUI_frontend
    - name: Run Playwright tests and update snapshots
      id: playwright-tests
-      run: npx playwright test --update-snapshots
+      run: pnpm exec playwright test --update-snapshots
      continue-on-error: true
      working-directory: ComfyUI_frontend
    - uses: actions/upload-artifact@v4
--- a/.github/workflows/test-ui.yaml
+++ b/.github/workflows/test-ui.yaml
@@ -7,15 +7,12 @@ on:
    branches-ignore:
      [wip/*, draft/*, temp/*, vue-nodes-migration, sno-playwright-*]

-env:
-  DATE_FORMAT: '+%m/%d/%Y, %I:%M:%S %p'
-
 jobs:
  setup:
    runs-on: ubuntu-latest
    outputs:
      cache-key: ${{ steps.cache-key.outputs.key }}
-      sanitized-branch: ${{ steps.branch-info.outputs.sanitized }}
+      playwright-version: ${{ steps.playwright-version.outputs.PLAYWRIGHT_VERSION }}
    steps:
      - name: Checkout ComfyUI
        uses: actions/checkout@v4
@@ -30,12 +27,10 @@ jobs:
          repository: 'Comfy-Org/ComfyUI_frontend'
          path: 'ComfyUI_frontend'

-      - name: Checkout ComfyUI_devtools
-        uses: actions/checkout@v4
-        with:
-          repository: 'Comfy-Org/ComfyUI_devtools'
-          path: 'ComfyUI/custom_nodes/ComfyUI_devtools'
-          ref: 'd05fd48dd787a4192e16802d4244cfcc0e2f9684'
+      - name: Copy ComfyUI_devtools from frontend repo
+        run: |
+          mkdir -p ComfyUI/custom_nodes/ComfyUI_devtools
+          cp -r ComfyUI_frontend/tools/devtools/* ComfyUI/custom_nodes/ComfyUI_devtools/

      - name: Install pnpm
        uses: pnpm/action-setup@v4
@@ -48,30 +43,6 @@ jobs:
          cache: 'pnpm'
          cache-dependency-path: 'ComfyUI_frontend/pnpm-lock.yaml'

-      - 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
        with:
@@ -94,13 +65,12 @@ jobs:
        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: Playwright Version
+        id: playwright-version
+        run:  |
+          PLAYWRIGHT_VERSION=$(pnpm ls @playwright/test --json | jq --raw-output '.[0].devDependencies["@playwright/test"].version')
+          echo "PLAYWRIGHT_VERSION=$PLAYWRIGHT_VERSION" >> $GITHUB_OUTPUT
+        working-directory: ComfyUI_frontend

      - name: Save cache
        uses: actions/cache/save@5a3ec84eff668545956fd18022155c47e93e2684
@@ -110,17 +80,17 @@ jobs:
            ComfyUI_frontend
          key: comfyui-setup-${{ steps.cache-key.outputs.key }}

-  playwright-tests:
+  # Sharded chromium tests
+  playwright-tests-chromium-sharded:
    needs: setup
    runs-on: ubuntu-latest
    permissions:
-      pull-requests: write
-      issues: write
      contents: read
    strategy:
      fail-fast: false
      matrix:
-        browser: [chromium, chromium-2x, chromium-0.5x, mobile-chrome]
+        shardIndex: [1, 2, 3, 4, 5, 6, 7, 8]
+        shardTotal: [8]
    steps:
      - name: Wait for cache propagation
        run: sleep 10
@@ -144,32 +114,85 @@ jobs:
          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
+      - name: Install requirements
        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
+          python -m pip install --upgrade pip
+          pip install torch torchvision torchaudio --index-url https://download.pytorch.org/whl/cpu
+          pip install -r requirements.txt
+          pip install wait-for-it
+        working-directory: ComfyUI

-      - name: Comment PR - Browser Test Started
-        if: github.event_name == 'pull_request'
-        continue-on-error: true
-        uses: edumserrano/find-create-or-update-comment@v3
+
+      - name: Cache Playwright Browsers
+        uses: actions/cache@v4
+        id: cache-playwright-browsers
        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...
+          path: '~/.cache/ms-playwright'
+          key: '${{ runner.os }}-playwright-browsers-${{ needs.setup.outputs.playwright-version }}'
+
+      - name: Install Playwright Browsers
+        if: steps.cache-playwright-browsers.outputs.cache-hit != 'true'
+        run: pnpm exec playwright install chromium --with-deps
+        working-directory: ComfyUI_frontend
+
+      - name: Install Playwright Browsers (operating system dependencies)
+        if: steps.cache-playwright-browsers.outputs.cache-hit == 'true'
+        run: pnpm exec playwright install-deps
+        working-directory: ComfyUI_frontend
+
+      - name: Start ComfyUI server
+        run: |
+          python main.py --cpu --multi-user --front-end-root ../ComfyUI_frontend/dist &
+          wait-for-it --service 127.0.0.1:8188 -t 600
+        working-directory: ComfyUI
+
+      - name: Run Playwright tests (Shard ${{ matrix.shardIndex }}/${{ matrix.shardTotal }})
+        id: playwright
+        run: pnpm exec playwright test --project=chromium --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }} --reporter=blob
+        working-directory: ComfyUI_frontend
+        env:
+          PLAYWRIGHT_BLOB_OUTPUT_DIR: ../blob-report
+
+      - uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: blob-report-chromium-${{ matrix.shardIndex }}
+          path: blob-report/
+          retention-days: 1
+
+  playwright-tests:
+    # Ideally, each shard runs test in 6 minutes, but allow up to 15 minutes
+    timeout-minutes: 15
+    needs: setup
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+    strategy:
+      fail-fast: false
+      matrix:
+        browser: [chromium-2x, chromium-0.5x, mobile-chrome]
+    steps:
+      - name: Wait for cache propagation
+        run: sleep 10
+
+      - name: Restore cached setup
+        uses: actions/cache/restore@5a3ec84eff668545956fd18022155c47e93e2684
+        with:
+          fail-on-cache-miss: true
+          path: |
+            ComfyUI
+            ComfyUI_frontend
+          key: comfyui-setup-${{ needs.setup.outputs.cache-key }}
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
+
+      - uses: actions/setup-python@v4
+        with:
+          python-version: '3.10'
+          cache: 'pip'

      - name: Install requirements
        run: |
@@ -179,215 +202,156 @@ jobs:
          pip install wait-for-it
        working-directory: ComfyUI

+      - name: Cache Playwright Browsers
+        uses: actions/cache@v4
+        id: cache-playwright-browsers
+        with:
+          path: '~/.cache/ms-playwright'
+          key: '${{ runner.os }}-playwright-browsers-${{ needs.setup.outputs.playwright-version }}'
+
+      - name: Install Playwright Browsers
+        if: steps.cache-playwright-browsers.outputs.cache-hit != 'true'
+        run: pnpm exec playwright install chromium --with-deps
+        working-directory: ComfyUI_frontend
+
+      - name: Install Playwright Browsers (operating system dependencies)
+        if: steps.cache-playwright-browsers.outputs.cache-hit == 'true'
+        run: pnpm exec playwright install-deps
+        working-directory: ComfyUI_frontend
+
      - name: Start ComfyUI server
        run: |
          python main.py --cpu --multi-user --front-end-root ../ComfyUI_frontend/dist &
          wait-for-it --service 127.0.0.1:8188 -t 600
        working-directory: ComfyUI

-      - name: Cache Playwright browsers
-        uses: actions/cache@v4
-        with:
-          path: ~/.cache/ms-playwright
-          key: playwright-browsers-${{ runner.os }}-${{ hashFiles('ComfyUI_frontend/pnpm-lock.yaml') }}-${{ matrix.browser }}
-          restore-keys: |
-            playwright-browsers-${{ runner.os }}-${{ hashFiles('ComfyUI_frontend/pnpm-lock.yaml') }}-
-            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
+        run: |
+          # Run tests with both HTML and JSON reporters
+          PLAYWRIGHT_JSON_OUTPUT_NAME=playwright-report/report.json \
+          pnpm exec playwright test --project=${{ matrix.browser }} \
+            --reporter=list \
+            --reporter=html \
+            --reporter=json
        working-directory: ComfyUI_frontend

      - uses: actions/upload-artifact@v4
-        if: always() # note: use always() to allow results to be upload/report even tests failed.
+        if: always()
        with:
          name: playwright-report-${{ matrix.browser }}
          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 }}
+  # Merge sharded test reports
+  merge-reports:
+    needs: [playwright-tests-chromium-sharded]
+    runs-on: ubuntu-latest
+    if: ${{ !cancelled() }}
+    steps:
+      - name: Checkout ComfyUI_frontend
+        uses: actions/checkout@v4
+        with:
+          repository: 'Comfy-Org/ComfyUI_frontend'
+          path: 'ComfyUI_frontend'

-      - name: 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: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10

-      - name: Upload deployment info
-        if: always()
+      - uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+          cache: 'pnpm'
+          cache-dependency-path: 'ComfyUI_frontend/pnpm-lock.yaml'
+
+      - name: Install dependencies
+        run: |
+          pnpm install --frozen-lockfile
+        working-directory: ComfyUI_frontend
+
+      - name: Download blob reports
+        uses: actions/download-artifact@v4
+        with:
+          path: ComfyUI_frontend/all-blob-reports
+          pattern: blob-report-chromium-*
+          merge-multiple: true
+
+      - name: Merge into HTML Report
+        run: |
+          # Generate HTML report
+          pnpm exec playwright merge-reports --reporter=html ./all-blob-reports
+          # Generate JSON report separately with explicit output path
+          PLAYWRIGHT_JSON_OUTPUT_NAME=playwright-report/report.json \
+          pnpm exec playwright merge-reports --reporter=json ./all-blob-reports
+        working-directory: ComfyUI_frontend
+
+      - name: Upload HTML report
        uses: actions/upload-artifact@v4
        with:
-          name: deployment-info-${{ matrix.browser }}
-          path: deployment-info/
-          retention-days: 1
+          name: playwright-report-chromium
+          path: ComfyUI_frontend/playwright-report/
+          retention-days: 30

-      - name: Get completion time
-        id: completion-time
-        if: always()
-        run: echo "time=$(date -u '${{ env.DATE_FORMAT }}')" >> $GITHUB_OUTPUT
+  #### BEGIN Deployment and commenting (non-forked PRs only)
+  # when using pull_request event, we have permission to comment directly
+  # if its a forked repo, we need to use workflow_run event in a separate workflow (pr-playwright-deploy.yaml)

-      - 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
+  # Post starting comment for non-forked PRs
+  comment-on-pr-start:
    runs-on: ubuntu-latest
-    if: always() && github.event_name == 'pull_request'
+    if: github.event_name == 'pull_request' && github.event.pull_request.head.repo.fork == false
    permissions:
      pull-requests: write
    steps:
-      - name: Download all deployment info
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        
+      - name: Get start time
+        id: start-time
+        run: echo "time=$(date -u '+%m/%d/%Y, %I:%M:%S %p')" >> $GITHUB_OUTPUT
+        
+      - name: Post starting comment
+        env:
+          GITHUB_TOKEN: ${{ github.token }}
+        run: |
+          chmod +x scripts/cicd/pr-playwright-deploy-and-comment.sh
+          ./scripts/cicd/pr-playwright-deploy-and-comment.sh \
+            "${{ github.event.pull_request.number }}" \
+            "${{ github.head_ref }}" \
+            "starting" \
+            "${{ steps.start-time.outputs.time }}"
+          
+  # Deploy and comment for non-forked PRs only
+  deploy-and-comment:
+    needs: [playwright-tests, merge-reports]
+    runs-on: ubuntu-latest
+    if: always() && github.event_name == 'pull_request' && github.event.pull_request.head.repo.fork == false
+    permissions:
+      pull-requests: write
+      contents: read
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        
+      - name: Download all playwright reports
        uses: actions/download-artifact@v4
        with:
-          pattern: 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
+          pattern: playwright-report-*
+          path: reports
+          
+      - name: Make deployment script executable
+        run: chmod +x scripts/cicd/pr-playwright-deploy-and-comment.sh
+        
+      - name: Deploy reports and comment on PR
+        env:
+          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          GITHUB_TOKEN: ${{ github.token }}
        run: |
-          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
+          ./scripts/cicd/pr-playwright-deploy-and-comment.sh \
+            "${{ github.event.pull_request.number }}" \
+            "${{ github.head_ref }}" \
+            "completed"
+  #### END Deployment and commenting (non-forked PRs only)
--- a/.github/workflows/update-electron-types.yaml
+++ b/.github/workflows/update-electron-types.yaml
@@ -35,12 +35,12 @@ jobs:
            electron-types-tools-cache-${{ runner.os }}-

      - name: Update electron types
-        run: pnpm install @comfyorg/comfyui-electron-types@latest
+        run: pnpm install --workspace-root @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=$(pnpm list @comfyorg/comfyui-electron-types --json --depth=0 | jq -r '.[0].dependencies."@comfyorg/comfyui-electron-types".version')
          echo "NEW_VERSION=$NEW_VERSION" >> $GITHUB_OUTPUT

      - name: Create Pull Request
--- a/.github/workflows/update-manager-types.yaml
+++ b/.github/workflows/update-manager-types.yaml
@@ -68,7 +68,7 @@ jobs:
      - name: Generate Manager API types
        run: |
          echo "Generating TypeScript types from ComfyUI-Manager@${{ steps.manager-info.outputs.commit }}..."
-          npx openapi-typescript ./ComfyUI-Manager/openapi.yaml --output ./src/types/generatedManagerTypes.ts
+          pnpm dlx openapi-typescript ./ComfyUI-Manager/openapi.yaml --output ./src/types/generatedManagerTypes.ts

      - name: Validate generated types
        run: |
@@ -121,4 +121,4 @@ jobs:
          labels: Manager
          delete-branch: true
          add-paths: |
-            src/types/generatedManagerTypes.ts
+            src/types/generatedManagerTypes.ts
--- a/.github/workflows/update-registry-types.yaml
+++ b/.github/workflows/update-registry-types.yaml
@@ -68,7 +68,7 @@ jobs:
      - name: Generate API types
        run: |
          echo "Generating TypeScript types from comfy-api@${{ steps.api-info.outputs.commit }}..."
-          npx openapi-typescript ./comfy-api/openapi.yml --output ./src/types/comfyRegistryTypes.ts
+          pnpm dlx openapi-typescript ./comfy-api/openapi.yml --output ./src/types/comfyRegistryTypes.ts

      - name: Validate generated types
        run: |
--- a/.gitignore
+++ b/.gitignore
@@ -22,6 +22,9 @@ dist-ssr
 *.local
 # Claude configuration
 .claude/*.local.json
+.claude/*.local.md
+.claude/*.local.txt
+CLAUDE.local.md

 # Editor directories and files
 .vscode/*
@@ -43,6 +46,7 @@ components.d.ts
 tests-ui/data/*
 tests-ui/ComfyUI_examples
 tests-ui/workflows/examples
+coverage/

 # Browser tests
 /test-results/
@@ -50,6 +54,7 @@ tests-ui/workflows/examples
 /blob-report/
 /playwright/.cache/
 browser_tests/**/*-win32.png
+browser_tests/local/

 .env

@@ -76,3 +81,12 @@ vite.config.mts.timestamp-*.mjs
 *storybook.log
 storybook-static

+# MCP Servers
+.playwright-mcp/*
+
+.nx/cache
+.nx/workspace-data
+.cursor/rules/nx-rules.mdc
+.github/instructions/nx.instructions.md
+vite.config.*.timestamp*
+vitest.config.*.timestamp*
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -1,4 +1,4 @@
 #!/usr/bin/env bash

-npx lint-staged
-npx tsx scripts/check-unused-i18n-keys.ts
+pnpm exec lint-staged
+pnpm exec tsx scripts/check-unused-i18n-keys.ts
--- a/.husky/pre-push
+++ b/.husky/pre-push
@@ -0,0 +1,5 @@
+#!/usr/bin/env bash
+
+# Run Knip with cache via package script
+pnpm knip
+
--- a/.i18nrc.cjs
+++ b/.i18nrc.cjs
@@ -9,7 +9,7 @@ module.exports = defineConfig({
  entry: 'src/locales/en',
  entryLocale: 'en',
  output: 'src/locales',
-  outputLocales: ['zh', 'zh-TW', 'ru', 'ja', 'ko', 'fr', 'es', 'ar'],
+  outputLocales: ['zh', 'zh-TW', 'ru', 'ja', 'ko', 'fr', 'es', 'ar', 'tr'],
  reference: `Special names to keep untranslated: flux, photomaker, clip, vae, cfg, stable audio, stable cascade, stable zero, controlnet, lora, HiDream.
  'latent' is the short form of 'latent space'.
  'mask' is in the context of image processing.
--- a/.mcp.json
+++ b/.mcp.json
@@ -1,12 +0,0 @@
-{
-  "mcpServers": {
-    "playwright": {
-      "command": "npx",
-      "args": ["-y", "@executeautomation/playwright-mcp-server"]
-    },
-    "context7": {
-      "command": "npx",
-      "args": ["-y", "@upstash/context7-mcp"]
-    }
-  }
-}
--- a/.npmrc
+++ b/.npmrc
@@ -0,0 +1 @@
+ignore-workspace-root-check=true
--- a/.nvmrc
+++ b/.nvmrc
@@ -0,0 +1 @@
+24
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -15,26 +15,37 @@ const config: StorybookConfig = {
  async viteFinal(config) {
    // Use dynamic import to avoid CJS deprecation warning
    const { mergeConfig } = await import('vite')
+    const { default: tailwindcss } = await import('@tailwindcss/vite')

    // Filter out any plugins that might generate import maps
    if (config.plugins) {
-      config.plugins = config.plugins.filter((plugin: any) => {
-        if (plugin && plugin.name && plugin.name.includes('import-map')) {
-          return false
-        }
-        return true
-      })
+      config.plugins = config.plugins
+        // Type guard: ensure we have valid plugin objects with names
+        .filter(
+          (plugin): plugin is NonNullable<typeof plugin> & { name: string } => {
+            return (
+              plugin !== null &&
+              plugin !== undefined &&
+              typeof plugin === 'object' &&
+              'name' in plugin &&
+              typeof plugin.name === 'string'
+            )
+          }
+        )
+        // Business logic: filter out import-map plugins
+        .filter((plugin) => !plugin.name.includes('import-map'))
    }

    return mergeConfig(config, {
      // Replace plugins entirely to avoid inheritance issues
      plugins: [
        // Only include plugins we explicitly need for Storybook
+        tailwindcss(),
        Icons({
          compiler: 'vue3',
          customCollections: {
            comfy: FileSystemIconLoader(
-              process.cwd() + '/src/assets/icons/custom'
+              process.cwd() + '/packages/design-system/src/icons'
            )
          }
        }),
--- a/.storybook/preview-head.html
+++ b/.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,32 @@

  .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 */
+  li+li {
+    margin: 0;
+    padding: revert-layer;
  }
 </style>
--- a/.storybook/preview.ts
+++ b/.storybook/preview.ts
@@ -1,7 +1,7 @@
 import { definePreset } from '@primevue/themes'
 import Aura from '@primevue/themes/aura'
 import { setup } from '@storybook/vue3'
-import type { Preview } from '@storybook/vue3-vite'
+import type { Preview, StoryContext, StoryFn } from '@storybook/vue3-vite'
 import { createPinia } from 'pinia'
 import 'primeicons/primeicons.css'
 import PrimeVue from 'primevue/config'
@@ -9,11 +9,9 @@ import ConfirmationService from 'primevue/confirmationservice'
 import ToastService from 'primevue/toastservice'
 import Tooltip from 'primevue/tooltip'

-import '../src/assets/css/style.css'
-import { i18n } from '../src/i18n'
-import '../src/lib/litegraph/public/css/litegraph.css'
-import { useWidgetStore } from '../src/stores/widgetStore'
-import { useColorPaletteStore } from '../src/stores/workspace/colorPaletteStore'
+import '@/assets/css/style.css'
+import { i18n } from '@/i18n'
+import '@/lib/litegraph/public/css/litegraph.css'

 const ComfyUIPreset = definePreset(Aura, {
  semantic: {
@@ -25,13 +23,11 @@ const ComfyUIPreset = definePreset(Aura, {
 // Setup Vue app for Storybook
 setup((app) => {
  app.directive('tooltip', Tooltip)
+
+  // Create Pinia instance
  const pinia = createPinia()
+
  app.use(pinia)
-
-  // Initialize stores
-  useColorPaletteStore(pinia)
-  useWidgetStore(pinia)
-
  app.use(i18n)
  app.use(PrimeVue, {
    theme: {
@@ -50,8 +46,8 @@ setup((app) => {
  app.use(ToastService)
 })

-// Dark theme decorator
-export const withTheme = (Story: any, context: any) => {
+// Theme and dialog decorator
+export const withTheme = (Story: StoryFn, context: StoryContext) => {
  const theme = context.globals.theme || 'light'

  // Apply theme class to document root
@@ -63,7 +59,7 @@ export const withTheme = (Story: any, context: any) => {
    document.body.classList.remove('dark-theme')
  }

-  return Story()
+  return Story(context.args, context)
 }

 const preview: Preview = {
--- a/.vscode/tailwind.json
+++ b/.vscode/tailwind.json
@@ -2,12 +2,32 @@
  "version": 1.1,
  "atDirectives": [
    {
-      "name": "@tailwind",
-      "description": "Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS.",
+      "name": "@import",
+      "description": "Use the `@import` directive to inline CSS files, including Tailwind itself, into your stylesheet.",
      "references": [
        {
          "name": "Tailwind Documentation",
-          "url": "https://tailwindcss.com/docs/functions-and-directives#tailwind"
+          "url": "https://tailwindcss.com/docs/functions-and-directives#import"
+        }
+      ]
+    },
+    {
+      "name": "@theme",
+      "description": "Use the `@theme` directive to define custom design tokens like fonts, colors, and breakpoints.",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#theme"
+        }
+      ]
+    },
+    {
+      "name": "@layer",
+      "description": "Use the `@layer` directive inside `@theme` to organize custom styles into different layers like `base`, `components`, and `utilities`.",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#layer"
        }
      ]
    },
@@ -22,32 +42,32 @@
      ]
    },
    {
-      "name": "@responsive",
-      "description": "You can generate responsive variants of your own classes by wrapping their definitions in the `@responsive` directive:\n```css\n@responsive {\n  .alert {\n    background-color: #E53E3E;\n  }\n}\n```\n",
+      "name": "@config",
+      "description": "Use the `@config` directive to load a legacy JavaScript-based Tailwind configuration file.",
      "references": [
        {
          "name": "Tailwind Documentation",
-          "url": "https://tailwindcss.com/docs/functions-and-directives#responsive"
+          "url": "https://tailwindcss.com/docs/functions-and-directives#config"
        }
      ]
    },
    {
-      "name": "@screen",
-      "description": "The `@screen` directive allows you to create media queries that reference your breakpoints by **name** instead of duplicating their values in your own CSS:\n```css\n@screen sm {\n  /* ... */\n}\n```\n…gets transformed into this:\n```css\n@media (min-width: 640px) {\n  /* ... */\n}\n```\n",
+      "name": "@reference",
+      "description": "Use the `@reference` directive to import theme variables, custom utilities, and custom variants from other files without duplicating CSS.",
      "references": [
        {
          "name": "Tailwind Documentation",
-          "url": "https://tailwindcss.com/docs/functions-and-directives#screen"
+          "url": "https://tailwindcss.com/docs/functions-and-directives#reference"
        }
      ]
    },
    {
-      "name": "@variants",
-      "description": "Generate `hover`, `focus`, `active` and other **variants** of your own utilities by wrapping their definitions in the `@variants` directive:\n```css\n@variants hover, focus {\n   .btn-brand {\n    background-color: #3182CE;\n  }\n}\n```\n",
+      "name": "@plugin",
+      "description": "Use the `@plugin` directive to load a legacy JavaScript-based Tailwind plugin.",
      "references": [
        {
          "name": "Tailwind Documentation",
-          "url": "https://tailwindcss.com/docs/functions-and-directives#variants"
+          "url": "https://tailwindcss.com/docs/functions-and-directives#plugin"
        }
      ]
    }
--- a/CLAUDE.md
+++ b/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 dev`: Start development server (port 5173, via nx)
 - `pnpm typecheck`: Type checking
- `pnpm lint`: Linting
+- `pnpm build`: Build for production (via nx)
+- `pnpm lint`: Linting (via nx)
 - `pnpm format`: Prettier formatting
 - `pnpm test:component`: Run component tests with browser environment
 - `pnpm test:unit`: Run all unit tests
+- `pnpm test:browser`: Run E2E tests via Playwright
 - `pnpm test:unit -- tests-ui/tests/example.test.ts`: Run single test file
+- `pnpm storybook`: Start Storybook development server (port 6006)
+- `pnpm knip`: Detect unused code and dependencies
+
+## Monorepo Architecture
+
+The project now uses **Nx** for build orchestration and task management:
+
+- **Task Orchestration**: Commands like `dev`, `build`, `lint`, and `test:browser` run via Nx
+- **Caching**: Nx provides intelligent caching for faster rebuilds
+- **Configuration**: Managed through `nx.json` with plugins for ESLint, Storybook, Vite, and Playwright
+- **Dependencies**: Nx handles dependency graph analysis and parallel execution
+
+Key Nx features:
+- Build target caching and incremental builds
+- Parallel task execution across the monorepo
+- Plugin-based architecture for different tools

 ## 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

@@ -52,6 +82,44 @@ When referencing Comfy-Org repos:
 2. Use GitHub API for branches/PRs/metadata
 3. Curl GitHub website if needed

+## Settings and Feature Flags Quick Reference
+
+### Settings Usage
+```typescript
+const settingStore = useSettingStore()
+const value = settingStore.get('Comfy.SomeSetting')     // Get setting
+await settingStore.set('Comfy.SomeSetting', newValue)   // Update setting
+```
+
+### Dynamic Defaults
+```typescript
+{
+  id: 'Comfy.Example.Setting',
+  defaultValue: () => window.innerWidth < 1024 ? 'small' : 'large'  // Runtime context
+}
+```
+
+### Version-Based Defaults
+```typescript
+{
+  id: 'Comfy.Example.Feature',
+  defaultValue: 'legacy',
+  defaultsByInstallVersion: { '1.25.0': 'enhanced' }  // Gradual rollout
+}
+```
+
+### Feature Flags
+```typescript
+if (api.serverSupportsFeature('feature_name')) {  // Check capability
+  // Use enhanced feature
+}
+const value = api.getServerFeature('config_name', defaultValue)  // Get config
+```
+
+**Documentation:**
+- Settings system: `docs/SETTINGS.md`
+- Feature flags system: `docs/FEATURE_FLAGS.md`
+
 ## Common Pitfalls

 - NEVER use `any` type - use proper TypeScript types
@@ -59,3 +127,6 @@ When referencing Comfy-Org repos:
 - NEVER use `--no-verify` flag when committing
 - NEVER delete or disable tests to make them pass
 - NEVER circumvent quality checks
+- NEVER use `dark:` prefix - always use `dark-theme:` for dark mode styles, for example: `dark-theme:text-white dark-theme:bg-black`
+- NEVER use `:class="[]"` to merge class names - always use `import { cn } from '@/utils/tailwindUtil'`, for example: `<div :class="cn('bg-red-500', { 'bg-blue-500': condition })" />`
+
--- a/70
+++ b/70
@@ -1,17 +1,61 @@
-# Admins
-* @Comfy-Org/comfy_frontend_devs
+# Desktop/Electron
+/src/types/desktop/                               @webfiltered
+/src/constants/desktopDialogs.ts                  @webfiltered
+/src/constants/desktopMaintenanceTasks.ts         @webfiltered
+/src/stores/electronDownloadStore.ts              @webfiltered
+/src/extensions/core/electronAdapter.ts           @webfiltered
+/src/views/DesktopDialogView.vue                  @webfiltered
+/src/components/install/                          @webfiltered
+/src/components/maintenance/                      @webfiltered
+/vite.electron.config.mts                         @webfiltered

-# Maintainers
-*.md @Comfy-Org/comfy_maintainer
-/tests-ui/ @Comfy-Org/comfy_maintainer
-/browser_tests/ @Comfy-Org/comfy_maintainer
-/.env_example @Comfy-Org/comfy_maintainer
+# Common UI Components
+/src/components/chip/                             @viva-jinyi
+/src/components/card/                             @viva-jinyi
+/src/components/button/                           @viva-jinyi
+/src/components/input/                            @viva-jinyi

-# Translations (AIGODLIKE team + shinshin86)
-/src/locales/ @Yorha4D @KarryCharon @DorotaLuna @shinshin86 @Comfy-Org/comfy_maintainer
+# Topbar
+/src/components/topbar/                           @pythongosssss

-# Load 3D extension
-/src/extensions/core/load3d.ts @jtydhr88 @Comfy-Org/comfy_frontend_devs
+# Thumbnail
+/src/renderer/core/thumbnail/                     @pythongosssss

-# Mask Editor extension
-/src/extensions/core/maskeditor.ts @trsommer @Comfy-Org/comfy_frontend_devs
+# Legacy UI
+/scripts/ui/                                      @pythongosssss
+
+# Link rendering
+/src/renderer/core/canvas/links/                  @benceruleanlu
+
+# Node help system
+/src/utils/nodeHelpUtil.ts                        @benceruleanlu
+/src/stores/workspace/nodeHelpStore.ts            @benceruleanlu
+/src/services/nodeHelpService.ts                  @benceruleanlu
+
+# Selection toolbox
+/src/components/graph/selectionToolbox/           @Myestery
+
+# Minimap
+/src/renderer/extensions/minimap/                 @jtydhr88
+
+# Assets
+/src/platform/assets/                             @arjansingh
+
+# Workflow Templates
+/src/platform/workflow/templates/                 @Myestery @christian-byrne @comfyui-wiki
+/src/components/templates/                        @Myestery @christian-byrne @comfyui-wiki
+
+# Mask Editor
+/src/extensions/core/maskeditor.ts                @trsommer @brucew4yn3rp
+/src/extensions/core/maskEditorLayerFilenames.ts  @trsommer @brucew4yn3rp
+/src/extensions/core/maskEditorOld.ts             @trsommer @brucew4yn3rp
+
+# 3D
+/src/extensions/core/load3d.ts                    @jtydhr88
+/src/components/load3d/                           @jtydhr88
+
+# Manager
+/src/workbench/extensions/manager/                @viva-jinyi @christian-byrne @ltdrdata
+
+# Translations
+/src/locales/                                     @Yorha4D @KarryCharon @shinshin86 @Comfy-Org/comfy_maintainer
--- a/CONTRIBUTING.md
+++ b/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 (v18 or later to build; v24 for vite dev server) and pnpm
  - Git for version control
  - A running ComfyUI backend instance
  
@@ -265,9 +265,9 @@ The project supports three types of icons, all with automatic imports (no manual
 2. **Iconify Icons** - 200,000+ icons from various libraries: `<i-lucide:settings />`, `<i-mdi:folder />`
 3. **Custom Icons** - Your own SVG icons: `<i-comfy:workflow />`

-Icons are powered by the unplugin-icons system, which automatically discovers and imports icons as Vue components. Custom icons are stored in `src/assets/icons/custom/` and processed by `build/customIconCollection.ts` with automatic validation.
+Icons are powered by the unplugin-icons system, which automatically discovers and imports icons as Vue components. Custom icons are stored in `packages/design-system/src/icons/` and processed by `packages/design-system/src/iconCollection.ts` with automatic validation.

-For detailed instructions and code examples, see [src/assets/icons/README.md](src/assets/icons/README.md).
+For detailed instructions and code examples, see [packages/design-system/src/icons/README.md](packages/design-system/src/icons/README.md).

 ## Working with litegraph.js

--- a/browser_tests/README.md
+++ b/browser_tests/README.md
@@ -16,15 +16,20 @@ Without this flag, parallel tests will conflict and fail randomly.

 ### ComfyUI devtools

-Clone <https://github.com/Comfy-Org/ComfyUI_devtools> to your `custom_nodes` directory.  
+ComfyUI_devtools is now included in this repository under `tools/devtools/`. During CI/CD, these files are automatically copied to the `custom_nodes` directory.  
 _ComfyUI_devtools adds additional API endpoints and nodes to ComfyUI for browser testing._

+For local development, copy the devtools files to your ComfyUI installation:
+```bash
+cp -r tools/devtools/* /path/to/your/ComfyUI/custom_nodes/ComfyUI_devtools/
+```
+
 ### Node.js & Playwright Prerequisites

 Ensure you have Node.js v20 or v22 installed. Then, set up the Chromium test driver:

 ```bash
-npx playwright install chromium --with-deps
+pnpm exec playwright install chromium --with-deps
 ```

 ### Environment Configuration
@@ -51,14 +56,6 @@ TEST_COMFYUI_DIR=/path/to/your/ComfyUI

 ### Common Setup Issues

-**Most tests require the new menu system** - Add to your test:
-
-```typescript
-test.beforeEach(async ({ comfyPage }) => {
-  await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
-})
-```
-
 ### Release API Mocking

 By default, all tests mock the release API (`api.comfy.org/releases`) to prevent release notification popups from interfering with test execution. This is necessary because the release notifications can appear over UI elements and block test interactions.
@@ -76,7 +73,7 @@ For tests that specifically need to test release functionality, see the example
 **Always use UI mode for development:**

 ```bash
-npx playwright test --ui
+pnpm exec playwright test --ui
 ```

 UI mode features:
@@ -92,8 +89,8 @@ UI mode features:
 For CI or headless testing:

 ```bash
-npx playwright test                    # Run all tests
-npx playwright test widget.spec.ts     # Run specific test file
+pnpm exec playwright test                    # Run all tests
+pnpm exec playwright test widget.spec.ts     # Run specific test file
 ```

 ### Local Development Config
@@ -389,7 +386,7 @@ export default defineConfig({
 Option 2 - Generate local baselines for comparison:

 ```bash
-npx playwright test --update-snapshots
+pnpm exec playwright test --update-snapshots
 ```

 ### Creating New Screenshot Baselines
--- a/browser_tests/assets/vueNodes/simple-triple.json
+++ b/browser_tests/assets/vueNodes/simple-triple.json
@@ -0,0 +1 @@
+{"id":"4412323e-2509-4258-8abc-68ddeea8f9e1","revision":0,"last_node_id":39,"last_link_id":29,"nodes":[{"id":37,"type":"KSampler","pos":[3635.923095703125,870.237548828125],"size":[428,437],"flags":{},"order":0,"mode":0,"inputs":[{"localized_name":"model","name":"model","type":"MODEL","link":null},{"localized_name":"positive","name":"positive","type":"CONDITIONING","link":null},{"localized_name":"negative","name":"negative","type":"CONDITIONING","link":null},{"localized_name":"latent_image","name":"latent_image","type":"LATENT","link":null},{"localized_name":"seed","name":"seed","type":"INT","widget":{"name":"seed"},"link":null},{"localized_name":"steps","name":"steps","type":"INT","widget":{"name":"steps"},"link":null},{"localized_name":"cfg","name":"cfg","type":"FLOAT","widget":{"name":"cfg"},"link":null},{"localized_name":"sampler_name","name":"sampler_name","type":"COMBO","widget":{"name":"sampler_name"},"link":null},{"localized_name":"scheduler","name":"scheduler","type":"COMBO","widget":{"name":"scheduler"},"link":null},{"localized_name":"denoise","name":"denoise","type":"FLOAT","widget":{"name":"denoise"},"link":null}],"outputs":[{"localized_name":"LATENT","name":"LATENT","type":"LATENT","links":null}],"properties":{"Node name for S&R":"KSampler"},"widgets_values":[0,"randomize",20,8,"euler","simple",1]},{"id":38,"type":"VAEDecode","pos":[4164.01611328125,925.5230712890625],"size":[193.25,107],"flags":{},"order":1,"mode":0,"inputs":[{"localized_name":"samples","name":"samples","type":"LATENT","link":null},{"localized_name":"vae","name":"vae","type":"VAE","link":null}],"outputs":[{"localized_name":"IMAGE","name":"IMAGE","type":"IMAGE","links":null}],"properties":{"Node name for S&R":"VAEDecode"}},{"id":39,"type":"CLIPTextEncode","pos":[3259.289794921875,927.2508544921875],"size":[239.9375,155],"flags":{},"order":2,"mode":0,"inputs":[{"localized_name":"clip","name":"clip","type":"CLIP","link":null},{"localized_name":"text","name":"text","type":"STRING","widget":{"name":"text"},"link":null}],"outputs":[{"localized_name":"CONDITIONING","name":"CONDITIONING","type":"CONDITIONING","links":null}],"properties":{"Node name for S&R":"CLIPTextEncode"},"widgets_values":[""]}],"links":[],"groups":[],"config":{},"extra":{"ds":{"scale":1.1576250000000001,"offset":[-2808.366467322067,-478.34316506594797]}},"version":0.4}
--- a/browser_tests/assets/workflowInMedia/workflow.glb
+++ b/browser_tests/assets/workflowInMedia/workflow.glb
--- a/browser_tests/fixtures/ComfyMouse.ts
+++ b/browser_tests/fixtures/ComfyMouse.ts
@@ -10,7 +10,7 @@ import type { Position } from './types'
 * - {@link Mouse.move}
 * - {@link Mouse.up}
 */
-export interface DragOptions {
+interface DragOptions {
  button?: 'left' | 'right' | 'middle'
  clickCount?: number
  steps?: number
--- a/browser_tests/fixtures/ComfyPage.ts
+++ b/browser_tests/fixtures/ComfyPage.ts
@@ -5,13 +5,14 @@ import dotenv from 'dotenv'
 import * as fs from 'fs'

 import type { LGraphNode } from '../../src/lib/litegraph/src/litegraph'
-import type { NodeId } from '../../src/schemas/comfyWorkflowSchema'
+import type { NodeId } from '../../src/platform/workflow/validation/schemas/workflowSchema'
 import type { KeyCombo } from '../../src/schemas/keyBindingSchema'
 import type { useWorkspaceStore } from '../../src/stores/workspaceStore'
 import { NodeBadgeMode } from '../../src/types/nodeSource'
 import { ComfyActionbar } from '../helpers/actionbar'
 import { ComfyTemplates } from '../helpers/templates'
 import { ComfyMouse } from './ComfyMouse'
+import { VueNodeHelpers } from './VueNodeHelpers'
 import { ComfyNodeSearchBox } from './components/ComfyNodeSearchBox'
 import { SettingDialog } from './components/SettingDialog'
 import {
@@ -144,6 +145,7 @@ export class ComfyPage {
  public readonly templates: ComfyTemplates
  public readonly settingDialog: SettingDialog
  public readonly confirmDialog: ConfirmDialog
+  public readonly vueNodes: VueNodeHelpers

  /** Worker index to test user ID */
  public readonly userIds: string[] = []
@@ -172,6 +174,7 @@ export class ComfyPage {
    this.templates = new ComfyTemplates(page)
    this.settingDialog = new SettingDialog(page, this)
    this.confirmDialog = new ConfirmDialog(page)
+    this.vueNodes = new VueNodeHelpers(page)
  }

  convertLeafToContent(structure: FolderStructure): FolderStructure {
@@ -453,6 +456,32 @@ export class ComfyPage {
    await workflowsTab.close()
  }

+  /**
+   * Attach a screenshot to the test report.
+   * By default, screenshots are only taken in non-CI environments.
+   * @param name - Name for the screenshot attachment
+   * @param options - Optional configuration
+   * @param options.runInCI - Whether to take screenshot in CI (default: false)
+   * @param options.fullPage - Whether to capture full page (default: false)
+   */
+  async attachScreenshot(
+    name: string,
+    options: { runInCI?: boolean; fullPage?: boolean } = {}
+  ) {
+    const { runInCI = false, fullPage = false } = options
+
+    // Skip in CI unless explicitly requested
+    if (process.env.CI && !runInCI) {
+      return
+    }
+
+    const testInfo = comfyPageFixture.info()
+    await testInfo.attach(name, {
+      body: await this.page.screenshot({ fullPage }),
+      contentType: 'image/png'
+    })
+  }
+
  async resetView() {
    if (await this.resetViewButton.isVisible()) {
      await this.resetViewButton.click()
@@ -1395,7 +1424,7 @@ export class ComfyPage {
  }

  async closeDialog() {
-    await this.page.locator('.p-dialog-close-button').click()
+    await this.page.locator('.p-dialog-close-button').click({ force: true })
    await expect(this.page.locator('.p-dialog')).toBeHidden()
  }

@@ -1614,7 +1643,7 @@ export const comfyPageFixture = base.extend<{

    try {
      await comfyPage.setupSettings({
-        'Comfy.UseNewMenu': 'Disabled',
+        'Comfy.UseNewMenu': 'Top',
        // Hide canvas menu/info/selection toolbox by default.
        'Comfy.Graph.CanvasInfo': false,
        'Comfy.Graph.CanvasMenu': false,
--- a/browser_tests/fixtures/UserSelectPage.ts
+++ b/browser_tests/fixtures/UserSelectPage.ts
@@ -1,5 +1,5 @@
+import type { Page } from '@playwright/test'
 import { test as base } from '@playwright/test'
-import { Page } from 'playwright'

 export class UserSelectPage {
  constructor(
--- a/browser_tests/fixtures/VueNodeHelpers.ts
+++ b/browser_tests/fixtures/VueNodeHelpers.ts
@@ -0,0 +1,117 @@
+/**
+ * Vue Node Test Helpers
+ */
+import type { Locator, Page } from '@playwright/test'
+
+export class VueNodeHelpers {
+  constructor(private page: Page) {}
+
+  /**
+   * Get locator for all Vue node components in the DOM
+   */
+  get nodes(): Locator {
+    return this.page.locator('[data-node-id]')
+  }
+
+  /**
+   * Get locator for selected Vue node components (using visual selection indicators)
+   */
+  get selectedNodes(): Locator {
+    return this.page.locator(
+      '[data-node-id].outline-black, [data-node-id].outline-white'
+    )
+  }
+
+  /**
+   * Get locator for a Vue node by the node's title (displayed name in the header)
+   */
+  getNodeByTitle(title: string): Locator {
+    return this.page.locator(`[data-node-id]`).filter({ hasText: title })
+  }
+
+  /**
+   * Get total count of Vue nodes in the DOM
+   */
+  async getNodeCount(): Promise<number> {
+    return await this.nodes.count()
+  }
+
+  /**
+   * Get count of selected Vue nodes
+   */
+  async getSelectedNodeCount(): Promise<number> {
+    return await this.selectedNodes.count()
+  }
+
+  /**
+   * Get all Vue node IDs currently in the DOM
+   */
+  async getNodeIds(): Promise<string[]> {
+    return await this.nodes.evaluateAll((nodes) =>
+      nodes
+        .map((n) => n.getAttribute('data-node-id'))
+        .filter((id): id is string => id !== null)
+    )
+  }
+
+  /**
+   * Select a specific Vue node by ID
+   */
+  async selectNode(nodeId: string): Promise<void> {
+    await this.page.locator(`[data-node-id="${nodeId}"]`).click()
+  }
+
+  /**
+   * Select multiple Vue nodes by IDs using Ctrl+click
+   */
+  async selectNodes(nodeIds: string[]): Promise<void> {
+    if (nodeIds.length === 0) return
+
+    // Select first node normally
+    await this.selectNode(nodeIds[0])
+
+    // Add additional nodes with Ctrl+click
+    for (let i = 1; i < nodeIds.length; i++) {
+      await this.page.locator(`[data-node-id="${nodeIds[i]}"]`).click({
+        modifiers: ['Control']
+      })
+    }
+  }
+
+  /**
+   * Clear all selections by clicking empty space
+   */
+  async clearSelection(): Promise<void> {
+    await this.page.mouse.click(50, 50)
+  }
+
+  /**
+   * Delete selected Vue nodes using Delete key
+   */
+  async deleteSelected(): Promise<void> {
+    await this.page.locator('#graph-canvas').focus()
+    await this.page.keyboard.press('Delete')
+  }
+
+  /**
+   * Delete selected Vue nodes using Backspace key
+   */
+  async deleteSelectedWithBackspace(): Promise<void> {
+    await this.page.locator('#graph-canvas').focus()
+    await this.page.keyboard.press('Backspace')
+  }
+
+  /**
+   * Wait for Vue nodes to be rendered
+   */
+  async waitForNodes(expectedCount?: number): Promise<void> {
+    if (expectedCount !== undefined) {
+      await this.page.waitForFunction(
+        (count) => document.querySelectorAll('[data-node-id]').length >= count,
+        expectedCount
+      )
+    } else {
+      await this.page.waitForSelector('[data-node-id]')
+    }
+  }
+}
--- a/browser_tests/fixtures/components/ComfyNodeSearchBox.ts
+++ b/browser_tests/fixtures/components/ComfyNodeSearchBox.ts
@@ -1,4 +1,4 @@
-import { Locator, Page } from '@playwright/test'
+import type { Locator, Page } from '@playwright/test'

 export class ComfyNodeSearchFilterSelectionPanel {
  constructor(public readonly page: Page) {}
--- a/browser_tests/fixtures/components/SettingDialog.ts
+++ b/browser_tests/fixtures/components/SettingDialog.ts
@@ -1,6 +1,6 @@
-import { Page } from '@playwright/test'
+import type { Page } from '@playwright/test'

-import { ComfyPage } from '../ComfyPage'
+import type { ComfyPage } from '../ComfyPage'

 export class SettingDialog {
  constructor(
--- a/browser_tests/fixtures/components/SidebarTab.ts
+++ b/browser_tests/fixtures/components/SidebarTab.ts
@@ -1,4 +1,4 @@
-import { Locator, Page } from '@playwright/test'
+import type { Locator, Page } from '@playwright/test'

 class SidebarTab {
  constructor(
--- a/browser_tests/fixtures/components/Topbar.ts
+++ b/browser_tests/fixtures/components/Topbar.ts
@@ -1,7 +1,14 @@
-import { Locator, Page } from '@playwright/test'
+import type { Locator, Page } from '@playwright/test'
+import { expect } from '@playwright/test'

 export class Topbar {
-  constructor(public readonly page: Page) {}
+  private readonly menuLocator: Locator
+  private readonly menuTrigger: Locator
+
+  constructor(public readonly page: Page) {
+    this.menuLocator = page.locator('.comfy-command-menu')
+    this.menuTrigger = page.locator('.comfyui-logo-wrapper')
+  }

  async getTabNames(): Promise<string[]> {
    return await this.page
@@ -15,10 +22,33 @@ export class Topbar {
      .innerText()
  }

-  getMenuItem(itemLabel: string): Locator {
+  /**
+   * Get a menu item by its label, optionally within a specific parent container
+   */
+  getMenuItem(itemLabel: string, parent?: Locator): Locator {
+    if (parent) {
+      return parent.locator(`.p-tieredmenu-item:has-text("${itemLabel}")`)
+    }
+
    return this.page.locator(`.p-menubar-item-label:text-is("${itemLabel}")`)
  }

+  /**
+   * Get the visible submenu (last visible submenu in case of nested menus)
+   */
+  getVisibleSubmenu(): Locator {
+    return this.page.locator('.p-tieredmenu-submenu:visible').last()
+  }
+
+  /**
+   * Check if a menu item has an active checkmark
+   */
+  async isMenuItemActive(menuItem: Locator): Promise<boolean> {
+    const checkmark = menuItem.locator('.pi-check')
+    const classes = await checkmark.getAttribute('class')
+    return classes ? !classes.includes('invisible') : false
+  }
+
  getWorkflowTab(tabName: string): Locator {
    return this.page
      .locator(`.workflow-tabs .workflow-label:has-text("${tabName}")`)
@@ -66,10 +96,50 @@ export class Topbar {

  async openTopbarMenu() {
    await this.page.waitForTimeout(1000)
-    await this.page.locator('.comfyui-logo-wrapper').click()
-    const menu = this.page.locator('.comfy-command-menu')
-    await menu.waitFor({ state: 'visible' })
-    return menu
+    await this.menuTrigger.click()
+    await this.menuLocator.waitFor({ state: 'visible' })
+    return this.menuLocator
+  }
+
+  /**
+   * Close the topbar menu by clicking outside
+   */
+  async closeTopbarMenu() {
+    await this.page.locator('body').click({ position: { x: 10, y: 10 } })
+    await expect(this.menuLocator).not.toBeVisible()
+  }
+
+  /**
+   * Navigate to a submenu by hovering over a menu item
+   */
+  async openSubmenu(menuItemLabel: string): Promise<Locator> {
+    const menuItem = this.getMenuItem(menuItemLabel)
+    await menuItem.hover()
+    const submenu = this.getVisibleSubmenu()
+    await submenu.waitFor({ state: 'visible' })
+    return submenu
+  }
+
+  /**
+   * Get theme menu items and interact with theme switching
+   */
+  async getThemeMenuItems() {
+    const themeSubmenu = await this.openSubmenu('Theme')
+    return {
+      submenu: themeSubmenu,
+      darkTheme: this.getMenuItem('Dark (Default)', themeSubmenu),
+      lightTheme: this.getMenuItem('Light', themeSubmenu)
+    }
+  }
+
+  /**
+   * Switch to a specific theme
+   */
+  async switchTheme(theme: 'dark' | 'light') {
+    const { darkTheme, lightTheme } = await this.getThemeMenuItems()
+    const themeItem = theme === 'dark' ? darkTheme : lightTheme
+    const themeLabel = themeItem.locator('.p-menubar-item-label')
+    await themeLabel.click()
  }

  async triggerTopbarCommand(path: string[]) {
@@ -79,9 +149,7 @@ export class Topbar {

    const menu = await this.openTopbarMenu()
    const tabName = path[0]
-    const topLevelMenuItem = this.page.locator(
-      `.p-menubar-item-label:text-is("${tabName}")`
-    )
+    const topLevelMenuItem = this.getMenuItem(tabName)
    const topLevelMenu = menu
      .locator('.p-tieredmenu-item')
      .filter({ has: topLevelMenuItem })
--- a/browser_tests/fixtures/utils/litegraphUtils.ts
+++ b/browser_tests/fixtures/utils/litegraphUtils.ts
@@ -1,6 +1,6 @@
 import type { Page } from '@playwright/test'

-import type { NodeId } from '../../../src/schemas/comfyWorkflowSchema'
+import type { NodeId } from '../../../src/platform/workflow/validation/schemas/workflowSchema'
 import { ManageGroupNode } from '../../helpers/manageGroupNode'
 import type { ComfyPage } from '../ComfyPage'
 import type { Position, Size } from '../types'
@@ -134,7 +134,7 @@ export class SubgraphSlotReference {
  }
 }

-export class NodeSlotReference {
+class NodeSlotReference {
  constructor(
    readonly type: 'input' | 'output',
    readonly index: number,
@@ -201,7 +201,7 @@ export class NodeSlotReference {
  }
 }

-export class NodeWidgetReference {
+class NodeWidgetReference {
  constructor(
    readonly index: number,
    readonly node: NodeReference
--- a/browser_tests/fixtures/utils/taskHistory.ts
+++ b/browser_tests/fixtures/utils/taskHistory.ts
@@ -1,7 +1,7 @@
+import type { Request, Route } from '@playwright/test'
 import _ from 'es-toolkit/compat'
 import fs from 'fs'
 import path from 'path'
-import type { Request, Route } from 'playwright'
 import { v4 as uuidv4 } from 'uuid'

 import type {
--- a/browser_tests/fixtures/utils/vueNodeFixtures.ts
+++ b/browser_tests/fixtures/utils/vueNodeFixtures.ts
@@ -0,0 +1,131 @@
+import type { Locator, Page } from '@playwright/test'
+
+import type { NodeReference } from './litegraphUtils'
+
+/**
+ * VueNodeFixture provides Vue-specific testing utilities for interacting with
+ * Vue node components. It bridges the gap between litegraph node references
+ * and Vue UI components.
+ */
+export class VueNodeFixture {
+  constructor(
+    private readonly nodeRef: NodeReference,
+    private readonly page: Page
+  ) {}
+
+  /**
+   * Get the node's header element using data-testid
+   */
+  async getHeader(): Promise<Locator> {
+    const nodeId = this.nodeRef.id
+    return this.page.locator(`[data-testid="node-header-${nodeId}"]`)
+  }
+
+  /**
+   * Get the node's title element
+   */
+  async getTitleElement(): Promise<Locator> {
+    const header = await this.getHeader()
+    return header.locator('[data-testid="node-title"]')
+  }
+
+  /**
+   * Get the current title text
+   */
+  async getTitle(): Promise<string> {
+    const titleElement = await this.getTitleElement()
+    return (await titleElement.textContent()) || ''
+  }
+
+  /**
+   * Set a new title by double-clicking and entering text
+   */
+  async setTitle(newTitle: string): Promise<void> {
+    const titleElement = await this.getTitleElement()
+    await titleElement.dblclick()
+
+    const input = (await this.getHeader()).locator(
+      '[data-testid="node-title-input"]'
+    )
+    await input.fill(newTitle)
+    await input.press('Enter')
+  }
+
+  /**
+   * Cancel title editing
+   */
+  async cancelTitleEdit(): Promise<void> {
+    const titleElement = await this.getTitleElement()
+    await titleElement.dblclick()
+
+    const input = (await this.getHeader()).locator(
+      '[data-testid="node-title-input"]'
+    )
+    await input.press('Escape')
+  }
+
+  /**
+   * Check if the title is currently being edited
+   */
+  async isEditingTitle(): Promise<boolean> {
+    const header = await this.getHeader()
+    const input = header.locator('[data-testid="node-title-input"]')
+    return await input.isVisible()
+  }
+
+  /**
+   * Get the collapse/expand button
+   */
+  async getCollapseButton(): Promise<Locator> {
+    const header = await this.getHeader()
+    return header.locator('[data-testid="node-collapse-button"]')
+  }
+
+  /**
+   * Toggle the node's collapsed state
+   */
+  async toggleCollapse(): Promise<void> {
+    const button = await this.getCollapseButton()
+    await button.click()
+  }
+
+  /**
+   * Get the collapse icon element
+   */
+  async getCollapseIcon(): Promise<Locator> {
+    const button = await this.getCollapseButton()
+    return button.locator('i')
+  }
+
+  /**
+   * Get the collapse icon's CSS classes
+   */
+  async getCollapseIconClass(): Promise<string> {
+    const icon = await this.getCollapseIcon()
+    return (await icon.getAttribute('class')) || ''
+  }
+
+  /**
+   * Check if the collapse button is visible
+   */
+  async isCollapseButtonVisible(): Promise<boolean> {
+    const button = await this.getCollapseButton()
+    return await button.isVisible()
+  }
+
+  /**
+   * Get the node's body/content element
+   */
+  async getBody(): Promise<Locator> {
+    const nodeId = this.nodeRef.id
+    return this.page.locator(`[data-testid="node-body-${nodeId}"]`)
+  }
+
+  /**
+   * Check if the node body is visible (not collapsed)
+   */
+  async isBodyVisible(): Promise<boolean> {
+    const body = await this.getBody()
+    return await body.isVisible()
+  }
+}
--- a/browser_tests/fixtures/ws.ts
+++ b/browser_tests/fixtures/ws.ts
@@ -12,9 +12,10 @@ export const webSocketFixture = base.extend<{
          // so we can look it up to trigger messages
          const store: Record<string, WebSocket> = ((window as any).__ws__ = {})
          window.WebSocket = class extends window.WebSocket {
-            constructor() {
-              // @ts-expect-error
-              super(...arguments)
+            constructor(
+              ...rest: ConstructorParameters<typeof window.WebSocket>
+            ) {
+              super(...rest)
              store[this.url] = this
            }
          }
--- a/browser_tests/globalSetup.ts
+++ b/browser_tests/globalSetup.ts
@@ -1,4 +1,4 @@
-import { FullConfig } from '@playwright/test'
+import type { FullConfig } from '@playwright/test'
 import dotenv from 'dotenv'

 import { backupPath } from './utils/backupUtils'
--- a/browser_tests/globalTeardown.ts
+++ b/browser_tests/globalTeardown.ts
@@ -1,4 +1,4 @@
-import { FullConfig } from '@playwright/test'
+import type { FullConfig } from '@playwright/test'
 import dotenv from 'dotenv'

 import { restorePath } from './utils/backupUtils'
--- a/browser_tests/helpers/fitToView.ts
+++ b/browser_tests/helpers/fitToView.ts
@@ -0,0 +1,104 @@
+import type { ReadOnlyRect } from '../../src/lib/litegraph/src/interfaces'
+import type { ComfyPage } from '../fixtures/ComfyPage'
+
+interface FitToViewOptions {
+  selectionOnly?: boolean
+  zoom?: number
+  padding?: number
+}
+
+/**
+ * Instantly fits the canvas view to graph content without waiting for UI animation.
+ *
+ * Lives outside the shared fixture to keep the default ComfyPage interactions user-oriented.
+ */
+export async function fitToViewInstant(
+  comfyPage: ComfyPage,
+  options: FitToViewOptions = {}
+) {
+  const { selectionOnly = false, zoom = 0.75, padding = 10 } = options
+
+  const rectangles = await comfyPage.page.evaluate<
+    ReadOnlyRect[] | null,
+    { selectionOnly: boolean }
+  >(
+    ({ selectionOnly }) => {
+      const app = window['app']
+      if (!app?.canvas) return null
+
+      const canvas = app.canvas
+      const items = (() => {
+        if (selectionOnly && canvas.selectedItems?.size) {
+          return Array.from(canvas.selectedItems)
+        }
+        try {
+          return Array.from(canvas.positionableItems ?? [])
+        } catch {
+          return []
+        }
+      })()
+
+      if (!items.length) return null
+
+      const rects: ReadOnlyRect[] = []
+
+      for (const item of items) {
+        const rect = item?.boundingRect
+        if (!rect) continue
+
+        const x = Number(rect[0])
+        const y = Number(rect[1])
+        const width = Number(rect[2])
+        const height = Number(rect[3])
+
+        rects.push([x, y, width, height] as const)
+      }
+
+      return rects.length ? rects : null
+    },
+    { selectionOnly }
+  )
+
+  if (!rectangles || rectangles.length === 0) return
+
+  let minX = Infinity
+  let minY = Infinity
+  let maxX = -Infinity
+  let maxY = -Infinity
+
+  for (const [x, y, width, height] of rectangles) {
+    minX = Math.min(minX, Number(x))
+    minY = Math.min(minY, Number(y))
+    maxX = Math.max(maxX, Number(x) + Number(width))
+    maxY = Math.max(maxY, Number(y) + Number(height))
+  }
+
+  const hasFiniteBounds =
+    Number.isFinite(minX) &&
+    Number.isFinite(minY) &&
+    Number.isFinite(maxX) &&
+    Number.isFinite(maxY)
+
+  if (!hasFiniteBounds) return
+
+  const bounds: ReadOnlyRect = [
+    minX - padding,
+    minY - padding,
+    maxX - minX + 2 * padding,
+    maxY - minY + 2 * padding
+  ]
+
+  await comfyPage.page.evaluate(
+    ({ bounds, zoom }) => {
+      const app = window['app']
+      if (!app?.canvas) return
+
+      const canvas = app.canvas
+      canvas.ds.fitToBounds(bounds, { zoom })
+      canvas.setDirty(true, true)
+    },
+    { bounds, zoom }
+  )
+
+  await comfyPage.nextFrame()
+}
--- a/browser_tests/helpers/manageGroupNode.ts
+++ b/browser_tests/helpers/manageGroupNode.ts
@@ -1,4 +1,4 @@
-import { Locator, Page } from '@playwright/test'
+import type { Locator, Page } from '@playwright/test'

 export class ManageGroupNode {
  footer: Locator
--- a/browser_tests/helpers/templates.ts
+++ b/browser_tests/helpers/templates.ts
@@ -1,10 +1,10 @@
-import { Locator, Page } from '@playwright/test'
+import type { Locator, Page } from '@playwright/test'
 import path from 'path'

-import {
+import type {
  TemplateInfo,
  WorkflowTemplates
-} from '../../src/types/workflowTemplateTypes'
+} from '../../src/platform/workflow/templates/types/template'

 export class ComfyTemplates {
  readonly content: Locator
--- a/browser_tests/tests/actionbar.spec.ts
+++ b/browser_tests/tests/actionbar.spec.ts
@@ -29,9 +29,9 @@ test.describe('Actionbar', () => {

    // Intercept the prompt queue endpoint
    let promptNumber = 0
-    comfyPage.page.route('**/api/prompt', async (route, req) => {
+    await comfyPage.page.route('**/api/prompt', async (route, req) => {
      await new Promise((r) => setTimeout(r, 100))
-      route.fulfill({
+      await route.fulfill({
        status: 200,
        body: JSON.stringify({
          prompt_id: promptNumber,
--- a/browser_tests/tests/backgroundImageUpload.spec.ts
+++ b/browser_tests/tests/backgroundImageUpload.spec.ts
@@ -2,6 +2,10 @@ import { expect } from '@playwright/test'

 import { comfyPageFixture as test } from '../fixtures/ComfyPage'

+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('Background Image Upload', () => {
  test.beforeEach(async ({ comfyPage }) => {
    // Reset the background image setting before each test
--- a/browser_tests/tests/changeTracker.spec.ts
+++ b/browser_tests/tests/changeTracker.spec.ts
@@ -1,5 +1,5 @@
+import type { ComfyPage } from '../fixtures/ComfyPage'
 import {
-  ComfyPage,
  comfyExpect as expect,
  comfyPageFixture as test
 } from '../fixtures/ComfyPage'
@@ -15,6 +15,10 @@ async function afterChange(comfyPage: ComfyPage) {
  })
 }

+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('Change Tracker', () => {
  test.describe('Undo/Redo', () => {
    test.beforeEach(async ({ comfyPage }) => {
--- a/browser_tests/tests/chatHistory.spec.ts
+++ b/browser_tests/tests/chatHistory.spec.ts
@@ -1,7 +1,12 @@
-import { Page, expect } from '@playwright/test'
+import type { Page } from '@playwright/test'
+import { expect } from '@playwright/test'

 import { comfyPageFixture as test } from '../fixtures/ComfyPage'

+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 interface ChatHistoryEntry {
  prompt: string
  response: string
--- a/browser_tests/tests/colorPalette.spec.ts
+++ b/browser_tests/tests/colorPalette.spec.ts
@@ -3,6 +3,10 @@ import { expect } from '@playwright/test'
 import type { Palette } from '../../src/schemas/colorPaletteSchema'
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'

+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 const customColorPalettes: Record<string, Palette> = {
  obsidian: {
    version: 102,
--- a/browser_tests/tests/colorPalette.spec.ts-snapshots/custom-color-palette-light-red-chromium-linux.png
+++ b/browser_tests/tests/colorPalette.spec.ts-snapshots/custom-color-palette-light-red-chromium-linux.png
--- a/browser_tests/tests/colorPalette.spec.ts-snapshots/custom-color-palette-obsidian-dark-all-colors-chromium-linux.png
+++ b/browser_tests/tests/colorPalette.spec.ts-snapshots/custom-color-palette-obsidian-dark-all-colors-chromium-linux.png
--- a/browser_tests/tests/colorPalette.spec.ts-snapshots/custom-color-palette-obsidian-dark-chromium-linux.png
+++ b/browser_tests/tests/colorPalette.spec.ts-snapshots/custom-color-palette-obsidian-dark-chromium-linux.png
--- a/browser_tests/tests/colorPalette.spec.ts-snapshots/default-color-palette-chromium-linux.png
+++ b/browser_tests/tests/colorPalette.spec.ts-snapshots/default-color-palette-chromium-linux.png
--- a/browser_tests/tests/colorPalette.spec.ts-snapshots/node-lightened-colors-chromium-linux.png
+++ b/browser_tests/tests/colorPalette.spec.ts-snapshots/node-lightened-colors-chromium-linux.png
--- a/browser_tests/tests/colorPalette.spec.ts-snapshots/node-opacity-0-2-arc-theme-chromium-linux.png
+++ b/browser_tests/tests/colorPalette.spec.ts-snapshots/node-opacity-0-2-arc-theme-chromium-linux.png
--- a/browser_tests/tests/colorPalette.spec.ts-snapshots/node-opacity-0-3-color-changed-chromium-linux.png
+++ b/browser_tests/tests/colorPalette.spec.ts-snapshots/node-opacity-0-3-color-changed-chromium-linux.png
--- a/browser_tests/tests/colorPalette.spec.ts-snapshots/node-opacity-0-3-color-removed-chromium-linux.png
+++ b/browser_tests/tests/colorPalette.spec.ts-snapshots/node-opacity-0-3-color-removed-chromium-linux.png
--- a/browser_tests/tests/colorPalette.spec.ts-snapshots/node-opacity-0-5-chromium-linux.png
+++ b/browser_tests/tests/colorPalette.spec.ts-snapshots/node-opacity-0-5-chromium-linux.png
--- a/browser_tests/tests/colorPalette.spec.ts-snapshots/node-opacity-1-chromium-linux.png
+++ b/browser_tests/tests/colorPalette.spec.ts-snapshots/node-opacity-1-chromium-linux.png
--- a/browser_tests/tests/commands.spec.ts
+++ b/browser_tests/tests/commands.spec.ts
@@ -2,6 +2,10 @@ import { expect } from '@playwright/test'

 import { comfyPageFixture as test } from '../fixtures/ComfyPage'

+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('Keybindings', () => {
  test('Should execute command', async ({ comfyPage }) => {
    await comfyPage.registerCommand('TestCommand', () => {
--- a/browser_tests/tests/copyPaste.spec.ts
+++ b/browser_tests/tests/copyPaste.spec.ts
@@ -2,6 +2,10 @@ import { expect } from '@playwright/test'

 import { comfyPageFixture as test } from '../fixtures/ComfyPage'

+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('Copy Paste', () => {
  test('Can copy and paste node', async ({ comfyPage }) => {
    await comfyPage.clickEmptyLatentNode()
--- a/browser_tests/tests/copyPaste.spec.ts-snapshots/copied-node-chromium-linux.png
+++ b/browser_tests/tests/copyPaste.spec.ts-snapshots/copied-node-chromium-linux.png
--- a/browser_tests/tests/copyPaste.spec.ts-snapshots/copied-node-with-link-chromium-linux.png
+++ b/browser_tests/tests/copyPaste.spec.ts-snapshots/copied-node-with-link-chromium-linux.png
--- a/browser_tests/tests/copyPaste.spec.ts-snapshots/copied-widget-value-chromium-linux.png
+++ b/browser_tests/tests/copyPaste.spec.ts-snapshots/copied-widget-value-chromium-linux.png
--- a/browser_tests/tests/copyPaste.spec.ts-snapshots/drag-copy-copied-node-chromium-linux.png
+++ b/browser_tests/tests/copyPaste.spec.ts-snapshots/drag-copy-copied-node-chromium-linux.png
--- a/browser_tests/tests/copyPaste.spec.ts-snapshots/no-node-copied-chromium-linux.png
+++ b/browser_tests/tests/copyPaste.spec.ts-snapshots/no-node-copied-chromium-linux.png
--- a/browser_tests/tests/copyPaste.spec.ts-snapshots/paste-in-text-area-with-node-previously-copied-chromium-linux.png
+++ b/browser_tests/tests/copyPaste.spec.ts-snapshots/paste-in-text-area-with-node-previously-copied-chromium-linux.png
--- a/browser_tests/tests/dialog.spec.ts
+++ b/browser_tests/tests/dialog.spec.ts
@@ -1,8 +1,13 @@
-import { Locator, expect } from '@playwright/test'
+import type { Locator } from '@playwright/test'
+import { expect } from '@playwright/test'

 import type { Keybinding } from '../../src/schemas/keyBindingSchema'
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'

+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('Load workflow warning', () => {
  test('Should display a warning when loading a workflow with missing nodes', async ({
    comfyPage
@@ -36,6 +41,10 @@ test('Does not report warning on undo/redo', async ({ comfyPage }) => {
  await comfyPage.loadWorkflow('missing/missing_nodes')
  await comfyPage.closeDialog()

+  // Wait for any async operations to complete after dialog closes
+  await comfyPage.nextFrame()
+  await comfyPage.page.waitForTimeout(100)
+
  // Make a change to the graph
  await comfyPage.doubleClickCanvas()
  await comfyPage.searchBox.fillAndSelectFirstNode('KSampler')
@@ -59,18 +68,6 @@ test.describe('Execution error', () => {
    const executionError = comfyPage.page.locator('.comfy-error-report')
    await expect(executionError).toBeVisible()
  })
-
-  test('Can display Issue Report form', async ({ comfyPage }) => {
-    await comfyPage.loadWorkflow('nodes/execution_error')
-    await comfyPage.queueButton.click()
-    await comfyPage.nextFrame()
-
-    await comfyPage.page.getByLabel('Help Fix This').click()
-    const issueReportForm = comfyPage.page.getByText(
-      'Submit Error Report (Optional)'
-    )
-    await expect(issueReportForm).toBeVisible()
-  })
 })

 test.describe('Missing models warning', () => {
@@ -303,37 +300,16 @@ test.describe('Settings', () => {
  })
 })

-test.describe('Feedback dialog', () => {
-  test('Should open from topmenu help command', async ({ comfyPage }) => {
-    // Open feedback dialog from top menu
+test.describe('Support', () => {
+  test('Should open external zendesk link', async ({ comfyPage }) => {
    await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
-    await comfyPage.menu.topbar.triggerTopbarCommand(['Help', 'Feedback'])
+    const pagePromise = comfyPage.page.context().waitForEvent('page')
+    await comfyPage.menu.topbar.triggerTopbarCommand(['Help', 'Support'])
+    const newPage = await pagePromise

-    // Verify feedback dialog content is visible
-    const feedbackHeader = comfyPage.page.getByRole('heading', {
-      name: 'Feedback'
-    })
-    await expect(feedbackHeader).toBeVisible()
-  })
-
-  test('Should close when close button clicked', async ({ comfyPage }) => {
-    // Open feedback dialog
-    await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
-    await comfyPage.menu.topbar.triggerTopbarCommand(['Help', 'Feedback'])
-
-    const feedbackHeader = comfyPage.page.getByRole('heading', {
-      name: 'Feedback'
-    })
-
-    // Close feedback dialog
-    await comfyPage.page
-      .getByLabel('', { exact: true })
-      .getByLabel('Close')
-      .click()
-    await feedbackHeader.waitFor({ state: 'hidden' })
-
-    // Verify dialog is closed
-    await expect(feedbackHeader).not.toBeVisible()
+    await newPage.waitForLoadState('networkidle')
+    await expect(newPage).toHaveURL(/.*support\.comfy\.org.*/)
+    await newPage.close()
  })
 })

--- a/browser_tests/tests/domWidget.spec.ts
+++ b/browser_tests/tests/domWidget.spec.ts
@@ -2,6 +2,10 @@ import { expect } from '@playwright/test'

 import { comfyPageFixture as test } from '../fixtures/ComfyPage'

+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('DOM Widget', () => {
  test('Collapsed multiline textarea is not visible', async ({ comfyPage }) => {
    await comfyPage.loadWorkflow('widgets/collapsed_multiline')
--- a/browser_tests/tests/domWidget.spec.ts-snapshots/focus-mode-on-chromium-linux.png
+++ b/browser_tests/tests/domWidget.spec.ts-snapshots/focus-mode-on-chromium-linux.png
--- a/browser_tests/tests/execution.spec.ts
+++ b/browser_tests/tests/execution.spec.ts
@@ -2,6 +2,10 @@ import { expect } from '@playwright/test'

 import { comfyPageFixture as test } from '../fixtures/ComfyPage'

+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('Execution', () => {
  test('Report error on unconnected slot', async ({ comfyPage }) => {
    await comfyPage.disconnectEdge()
--- a/browser_tests/tests/execution.spec.ts-snapshots/execution-error-unconnected-slot-chromium-linux.png
+++ b/browser_tests/tests/execution.spec.ts-snapshots/execution-error-unconnected-slot-chromium-linux.png
--- a/browser_tests/tests/extensionAPI.spec.ts
+++ b/browser_tests/tests/extensionAPI.spec.ts
@@ -1,6 +1,6 @@
 import { expect } from '@playwright/test'

-import { SettingParams } from '../../src/types/settingTypes'
+import type { SettingParams } from '../../src/platform/settings/types'
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'

 test.describe('Topbar commands', () => {
@@ -247,7 +247,7 @@ test.describe('Topbar commands', () => {
  test.describe('Dialog', () => {
    test('Should allow showing a prompt dialog', async ({ comfyPage }) => {
      await comfyPage.page.evaluate(() => {
-        window['app'].extensionManager.dialog
+        void window['app'].extensionManager.dialog
          .prompt({
            title: 'Test Prompt',
            message: 'Test Prompt Message'
@@ -267,7 +267,7 @@ test.describe('Topbar commands', () => {
      comfyPage
    }) => {
      await comfyPage.page.evaluate(() => {
-        window['app'].extensionManager.dialog
+        void window['app'].extensionManager.dialog
          .confirm({
            title: 'Test Confirm',
            message: 'Test Confirm Message'
@@ -284,7 +284,7 @@ test.describe('Topbar commands', () => {
    test('Should allow dismissing a dialog', async ({ comfyPage }) => {
      await comfyPage.page.evaluate(() => {
        window['value'] = 'foo'
-        window['app'].extensionManager.dialog
+        void window['app'].extensionManager.dialog
          .confirm({
            title: 'Test Confirm',
            message: 'Test Confirm Message'
--- a/browser_tests/tests/featureFlags.spec.ts
+++ b/browser_tests/tests/featureFlags.spec.ts
@@ -2,6 +2,10 @@ import { expect } from '@playwright/test'

 import { comfyPageFixture as test } from '../fixtures/ComfyPage'

+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('Feature Flags', () => {
  test('Client and server exchange feature flags on connection', async ({
    comfyPage
--- a/browser_tests/tests/graph.spec.ts
+++ b/browser_tests/tests/graph.spec.ts
@@ -2,6 +2,10 @@ import { expect } from '@playwright/test'

 import { comfyPageFixture as test } from '../fixtures/ComfyPage'

+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('Graph', () => {
  // Should be able to fix link input slot index after swap the input order
  // Ref: https://github.com/Comfy-Org/ComfyUI_frontend/issues/3348
--- a/browser_tests/tests/graphCanvasMenu.spec.ts
+++ b/browser_tests/tests/graphCanvasMenu.spec.ts
@@ -2,6 +2,10 @@ import { expect } from '@playwright/test'

 import { comfyPageFixture as test } from '../fixtures/ComfyPage'

+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('Graph Canvas Menu', () => {
  test.beforeEach(async ({ comfyPage }) => {
    // Set link render mode to spline to make sure it's not affected by other tests'
--- a/browser_tests/tests/graphCanvasMenu.spec.ts-snapshots/canvas-with-hidden-links-chromium-linux.png
+++ b/browser_tests/tests/graphCanvasMenu.spec.ts-snapshots/canvas-with-hidden-links-chromium-linux.png
--- a/browser_tests/tests/graphCanvasMenu.spec.ts-snapshots/canvas-with-visible-links-chromium-linux.png
+++ b/browser_tests/tests/graphCanvasMenu.spec.ts-snapshots/canvas-with-visible-links-chromium-linux.png
--- a/browser_tests/tests/groupNode.spec.ts
+++ b/browser_tests/tests/groupNode.spec.ts
@@ -1,8 +1,13 @@
 import { expect } from '@playwright/test'

-import { ComfyPage, comfyPageFixture as test } from '../fixtures/ComfyPage'
+import type { ComfyPage } from '../fixtures/ComfyPage'
+import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 import type { NodeReference } from '../fixtures/utils/litegraphUtils'

+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('Group Node', () => {
  test.describe('Node library sidebar', () => {
    const groupNodeName = 'DefautWorkflowGroupNode'
--- a/browser_tests/tests/interaction.spec.ts
+++ b/browser_tests/tests/interaction.spec.ts
@@ -1,12 +1,17 @@
-import { Locator, expect } from '@playwright/test'
-import { Position } from '@vueuse/core'
+import type { Locator } from '@playwright/test'
+import { expect } from '@playwright/test'
+import type { Position } from '@vueuse/core'

 import {
  type ComfyPage,
  comfyPageFixture as test,
  testComfySnapToGridGridSize
 } from '../fixtures/ComfyPage'
-import { type NodeReference } from '../fixtures/utils/litegraphUtils'
+import type { NodeReference } from '../fixtures/utils/litegraphUtils'
+
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})

 test.describe('Item Interaction', () => {
  test('Can select/delete all items', async ({ comfyPage }) => {
@@ -1012,6 +1017,8 @@ test.describe('Canvas Navigation', () => {
  test('Shift + mouse wheel should pan canvas horizontally', async ({
    comfyPage
  }) => {
+    await comfyPage.setSetting('Comfy.Canvas.MouseWheelScroll', 'panning')
+
    await comfyPage.page.click('canvas')
    await comfyPage.nextFrame()

--- a/browser_tests/tests/interaction.spec.ts-snapshots/adjusted-widget-value-chromium-linux.png
+++ b/browser_tests/tests/interaction.spec.ts-snapshots/adjusted-widget-value-chromium-linux.png
--- a/browser_tests/tests/interaction.spec.ts-snapshots/batch-disconnect-links-disconnected-chromium-linux.png
+++ b/browser_tests/tests/interaction.spec.ts-snapshots/batch-disconnect-links-disconnected-chromium-linux.png
--- a/browser_tests/tests/interaction.spec.ts-snapshots/batch-move-links-chromium-linux.png
+++ b/browser_tests/tests/interaction.spec.ts-snapshots/batch-move-links-chromium-linux.png
--- a/browser_tests/tests/interaction.spec.ts-snapshots/batch-move-links-moved-chromium-linux.png
+++ b/browser_tests/tests/interaction.spec.ts-snapshots/batch-move-links-moved-chromium-linux.png
--- a/browser_tests/tests/interaction.spec.ts-snapshots/default-chromium-2x-linux.png
+++ b/browser_tests/tests/interaction.spec.ts-snapshots/default-chromium-2x-linux.png
--- a/browser_tests/tests/interaction.spec.ts-snapshots/default-chromium-linux.png
+++ b/browser_tests/tests/interaction.spec.ts-snapshots/default-chromium-linux.png
--- a/browser_tests/tests/interaction.spec.ts-snapshots/deleted-all-chromium-linux.png
+++ b/browser_tests/tests/interaction.spec.ts-snapshots/deleted-all-chromium-linux.png
--- a/Show More
+++ b/Show More
				`@@ -0,0 +1 @@`
				{"id":"4412323e-2509-4258-8abc-68ddeea8f9e1","revision":0,"last_node_id":39,"last_link_id":29,"nodes":[{"id":37,"type":"KSampler","pos":[3635.923095703125,870.237548828125],"size":[428,437],"flags":{},"order":0,"mode":0,"inputs":[{"localized_name":"model","name":"model","type":"MODEL","link":null},{"localized_name":"positive","name":"positive","type":"CONDITIONING","link":null},{"localized_name":"negative","name":"negative","type":"CONDITIONING","link":null},{"localized_name":"latent_image","name":"latent_image","type":"LATENT","link":null},{"localized_name":"seed","name":"seed","type":"INT","widget":{"name":"seed"},"link":null},{"localized_name":"steps","name":"steps","type":"INT","widget":{"name":"steps"},"link":null},{"localized_name":"cfg","name":"cfg","type":"FLOAT","widget":{"name":"cfg"},"link":null},{"localized_name":"sampler_name","name":"sampler_name","type":"COMBO","widget":{"name":"sampler_name"},"link":null},{"localized_name":"scheduler","name":"scheduler","type":"COMBO","widget":{"name":"scheduler"},"link":null},{"localized_name":"denoise","name":"denoise","type":"FLOAT","widget":{"name":"denoise"},"link":null}],"outputs":[{"localized_name":"LATENT","name":"LATENT","type":"LATENT","links":null}],"properties":{"Node name for S&R":"KSampler"},"widgets_values":[0,"randomize",20,8,"euler","simple",1]},{"id":38,"type":"VAEDecode","pos":[4164.01611328125,925.5230712890625],"size":[193.25,107],"flags":{},"order":1,"mode":0,"inputs":[{"localized_name":"samples","name":"samples","type":"LATENT","link":null},{"localized_name":"vae","name":"vae","type":"VAE","link":null}],"outputs":[{"localized_name":"IMAGE","name":"IMAGE","type":"IMAGE","links":null}],"properties":{"Node name for S&R":"VAEDecode"}},{"id":39,"type":"CLIPTextEncode","pos":[3259.289794921875,927.2508544921875],"size":[239.9375,155],"flags":{},"order":2,"mode":0,"inputs":[{"localized_name":"clip","name":"clip","type":"CLIP","link":null},{"localized_name":"text","name":"text","type":"STRING","widget":{"name":"text"},"link":null}],"outputs":[{"localized_name":"CONDITIONING","name":"CONDITIONING","type":"CONDITIONING","links":null}],"properties":{"Node name for S&R":"CLIPTextEncode"},"widgets_values":[""]}],"links":[],"groups":[],"config":{},"extra":{"ds":{"scale":1.1576250000000001,"offset":[-2808.366467322067,-478.34316506594797]}},"version":0.4}