feat: add TopbarBadge interface and implement cloud badge in extension

feat: replace CloudBar with TopbarBadges and add topbarBadgeStore
WIP beta badge for cloud
2026-03-16 10:27:32 +00:00 · 2025-10-13 23:18:51 +01:00 · 2025-10-13 23:17:36 +01:00 · 2025-10-11 00:43:29 +01:00 · 2025-10-08 19:06:40 -07:00 · 2025-10-03 18:32:44 -04:00
1519 changed files with 121712 additions and 52974 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,24 +272,28 @@ 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

 1. Run complete test suite:
   ```bash
   pnpm test:unit
-   pnpm test:component
   ```
 2. Run type checking:
   ```bash
--- 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,157 @@
+# 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 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
+packages/registry-types/src/comfyRegistryTypes.ts linguist-generated=true
+src/workbench/extensions/manager/types/generatedManagerTypes.ts linguist-generated=true
--- a/.github/actions/setup-frontend/action.yml
+++ b/.github/actions/setup-frontend/action.yml
@@ -0,0 +1,67 @@
+name: Setup Frontend
+description: 'Setup ComfyUI frontend development environment'
+inputs:
+  extra_server_params:
+    description: 'Additional parameters to pass to ComfyUI server'
+    required: false
+    default: ''
+runs:
+  using: 'composite'
+  steps:
+    - name: Checkout ComfyUI
+      uses: actions/checkout@v4
+      with:
+        repository: 'comfyanonymous/ComfyUI'
+        path: 'ComfyUI'
+
+    - name: Checkout ComfyUI_frontend
+      uses: actions/checkout@v4
+      with:
+        repository: 'Comfy-Org/ComfyUI_frontend'
+        path: 'ComfyUI_frontend'
+
+    - name: Copy ComfyUI_devtools from frontend repo
+      shell: bash
+      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
+      with:
+        version: 10
+
+    - name: Setup Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: 'lts/*'
+        cache: 'pnpm'
+        cache-dependency-path: 'ComfyUI_frontend/pnpm-lock.yaml'
+
+    - name: Setup Python
+      uses: actions/setup-python@v4
+      with:
+        python-version: '3.10'
+
+    - name: Install Python requirements
+      shell: bash
+      working-directory: ComfyUI
+      run: |
+        python -m pip install --upgrade pip
+        pip install torch torchvision torchaudio --index-url https://download.pytorch.org/whl/cpu
+        pip install -r requirements.txt
+        pip install wait-for-it
+
+    - name: Build & Install ComfyUI_frontend
+      shell: bash
+      working-directory: ComfyUI_frontend
+      run: |
+        pnpm install --frozen-lockfile
+        pnpm build
+
+    - name: Start ComfyUI server
+      shell: bash
+      working-directory: ComfyUI
+      run: |
+        python main.py --cpu --multi-user --front-end-root ../ComfyUI_frontend/dist ${{ inputs.extra_server_params }} &
+        wait-for-it --service 127.0.0.1:8188 -t 600
--- a/.github/actions/setup-playwright/action.yml
+++ b/.github/actions/setup-playwright/action.yml
@@ -0,0 +1,31 @@
+name: Setup Playwright
+description: Cache and install Playwright browsers with dependencies
+runs:
+  using: composite
+  steps:
+    - name: Detect Playwright version
+      id: detect-version
+      shell: bash
+      working-directory: ComfyUI_frontend
+      run: |
+        PLAYWRIGHT_VERSION=$(pnpm ls @playwright/test --json | jq --raw-output '.[0].devDependencies["@playwright/test"].version')
+        echo "playwright-version=$PLAYWRIGHT_VERSION" >> $GITHUB_OUTPUT
+
+    - name: Cache Playwright Browsers
+      uses: actions/cache@v4
+      id: cache-playwright-browsers
+      with:
+        path: '~/.cache/ms-playwright'
+        key: ${{ runner.os }}-playwright-browsers-${{ steps.detect-version.outputs.playwright-version }}
+
+    - name: Install Playwright Browsers
+      if: steps.cache-playwright-browsers.outputs.cache-hit != 'true'
+      shell: bash
+      run: pnpm exec playwright install chromium --with-deps
+      working-directory: ComfyUI_frontend
+
+    - name: Install Playwright Browsers (operating system dependencies)
+      if: steps.cache-playwright-browsers.outputs.cache-hit == 'true'
+      shell: bash
+      run: pnpm exec playwright install-deps
+      working-directory: ComfyUI_frontend
--- a/.github/workflows/auto-backport.yaml
+++ b/.github/workflows/auto-backport.yaml
@@ -0,0 +1,268 @@
+name: Auto Backport
+
+on:
+  pull_request_target:
+    types: [closed, labeled]
+    branches: [main]
+  workflow_dispatch:
+    inputs:
+      pr_number:
+        description: 'PR number to backport'
+        required: true
+        type: string
+      force_rerun:
+        description: 'Force rerun even if backports exist'
+        required: false
+        type: boolean
+        default: false
+
+jobs:
+  backport:
+    if: >
+      (github.event_name == 'pull_request_target' && 
+       github.event.pull_request.merged == true && 
+       contains(github.event.pull_request.labels.*.name, 'needs-backport')) ||
+      github.event_name == 'workflow_dispatch'
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      pull-requests: write
+      issues: write
+
+    steps:
+      - name: Validate inputs for manual triggers
+        if: github.event_name == 'workflow_dispatch'
+        run: |
+          # Validate PR number format
+          if ! [[ "${{ inputs.pr_number }}" =~ ^[0-9]+$ ]]; then
+            echo "::error::Invalid PR number format. Must be a positive integer."
+            exit 1
+          fi
+          
+          # Validate PR exists and is merged
+          if ! gh pr view "${{ inputs.pr_number }}" --json merged >/dev/null 2>&1; then
+            echo "::error::PR #${{ inputs.pr_number }} not found or inaccessible."
+            exit 1
+          fi
+          
+          MERGED=$(gh pr view "${{ inputs.pr_number }}" --json merged --jq '.merged')
+          if [ "$MERGED" != "true" ]; then
+            echo "::error::PR #${{ inputs.pr_number }} is not merged. Only merged PRs can be backported."
+            exit 1
+          fi
+          
+          # Validate PR has needs-backport label
+          if ! gh pr view "${{ inputs.pr_number }}" --json labels --jq '.labels[].name' | grep -q "needs-backport"; then
+            echo "::error::PR #${{ inputs.pr_number }} does not have 'needs-backport' label."
+            exit 1
+          fi
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Checkout repository
+        uses: actions/checkout@v5
+        with:
+          fetch-depth: 0
+
+      - name: Configure git
+        run: |
+          git config user.name "github-actions[bot]"
+          git config user.email "github-actions[bot]@users.noreply.github.com"
+
+      - name: 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=""
+          
+          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
+              if git ls-remote --exit-code origin "core/${label}" >/dev/null 2>&1; then
+                VERSIONS="${VERSIONS}${label} "
+              else
+                echo "::warning::Label '${label}' found but branch 'core/${label}' does not exist"
+              fi
+            fi
+          done
+
+          if [ -z "$VERSIONS" ]; then
+            echo "::error::No version labels found (e.g., 1.24, 1.22)"
+            exit 1
+          fi
+
+          echo "versions=${VERSIONS}" >> $GITHUB_OUTPUT
+          echo "Found version labels: ${VERSIONS}"
+
+      - name: Backport commits
+        if: steps.check-existing.outputs.skip != 'true'
+        id: backport
+        env:
+          PR_NUMBER: ${{ github.event_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}"
+
+            TARGET_BRANCH="core/${version}"
+            BACKPORT_BRANCH="backport-${PR_NUMBER}-to-${version}"
+
+            # Fetch target branch (fail if doesn't exist)
+            if ! git fetch origin "${TARGET_BRANCH}"; then
+              echo "::error::Target branch ${TARGET_BRANCH} does not exist"
+              FAILED="${FAILED}${version}:branch-missing "
+              echo "::endgroup::"
+              continue
+            fi
+
+            # Create backport branch
+            git checkout -b "${BACKPORT_BRANCH}" "origin/${TARGET_BRANCH}"
+
+            # Try cherry-pick
+            if git cherry-pick "${MERGE_COMMIT}"; then
+              git push origin "${BACKPORT_BRANCH}"
+              SUCCESS="${SUCCESS}${version}:${BACKPORT_BRANCH} "
+              echo "Successfully created backport branch: ${BACKPORT_BRANCH}"
+              # Return to main (keep the branch, we need it for PR)
+              git checkout main
+            else
+              # Get conflict info
+              CONFLICTS=$(git diff --name-only --diff-filter=U | tr '\n' ',')
+              git cherry-pick --abort
+
+              echo "::error::Cherry-pick failed due to conflicts"
+              FAILED="${FAILED}${version}:conflicts:${CONFLICTS} "
+
+              # Clean up the failed branch
+              git checkout main
+              git branch -D "${BACKPORT_BRANCH}"
+            fi
+
+            echo "::endgroup::"
+          done
+
+          echo "success=${SUCCESS}" >> $GITHUB_OUTPUT
+          echo "failed=${FAILED}" >> $GITHUB_OUTPUT
+
+          if [ -n "${FAILED}" ]; then
+            exit 1
+          fi
+
+      - name: Create PR for each successful backport
+        if: steps.check-existing.outputs.skip != 'true' && steps.backport.outputs.success
+        env:
+          GH_TOKEN: ${{ secrets.PR_GH_TOKEN }}
+          PR_NUMBER: ${{ github.event_name == 'workflow_dispatch' && inputs.pr_number || github.event.pull_request.number }}
+        run: |
+          # Get PR data for manual triggers
+          if [ "${{ github.event_name }}" = "workflow_dispatch" ]; then
+            PR_DATA=$(gh pr view ${{ inputs.pr_number }} --json title,author)
+            PR_TITLE=$(echo "$PR_DATA" | jq -r '.title')
+            PR_AUTHOR=$(echo "$PR_DATA" | jq -r '.author.login')
+          else
+            PR_TITLE="${{ github.event.pull_request.title }}"
+            PR_AUTHOR="${{ github.event.pull_request.user.login }}"
+          fi
+          
+          for backport in ${{ steps.backport.outputs.success }}; do
+            IFS=':' read -r version branch <<< "${backport}"
+
+            if PR_URL=$(gh pr create \
+              --base "core/${version}" \
+              --head "${branch}" \
+              --title "[backport ${version}] ${PR_TITLE}" \
+              --body "Backport of #${PR_NUMBER} to \`core/${version}\`"$'\n\n'"Automatically created by backport workflow." \
+              --label "backport" 2>&1); then
+
+              # Extract PR number from URL
+              PR_NUM=$(echo "${PR_URL}" | grep -o '[0-9]*$')
+
+              if [ -n "${PR_NUM}" ]; then
+                gh pr comment "${PR_NUMBER}" --body "@${PR_AUTHOR} Successfully backported to #${PR_NUM}"
+              fi
+            else
+              echo "::error::Failed to create PR for ${version}: ${PR_URL}"
+              # Still try to comment on the original PR about the failure
+              gh pr comment "${PR_NUMBER}" --body "@${PR_AUTHOR} Backport branch created but PR creation failed for \`core/${version}\`. Please create the PR manually from branch \`${branch}\`"
+            fi
+          done
+
+      - name: Comment on failures
+        if: steps.check-existing.outputs.skip != 'true' && failure() && steps.backport.outputs.failed
+        env:
+          GH_TOKEN: ${{ github.token }}
+        run: |
+          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}"
+
+            if [ "${reason}" = "branch-missing" ]; then
+              gh pr comment "${PR_NUMBER}" --body "@${PR_AUTHOR} Backport failed: Branch \`core/${version}\` does not exist"
+
+            elif [ "${reason}" = "conflicts" ]; then
+              # Convert comma-separated conflicts back to newlines for display
+              CONFLICTS_LIST=$(echo "${conflicts}" | tr ',' '\n' | sed 's/^/- /')
+
+              COMMENT_BODY="@${PR_AUTHOR} Backport to \`core/${version}\` failed: Merge conflicts detected."$'\n\n'"Please manually cherry-pick commit \`${MERGE_COMMIT}\` to the \`core/${version}\` branch."$'\n\n'"<details><summary>Conflicting files</summary>"$'\n\n'"${CONFLICTS_LIST}"$'\n\n'"</details>"
+              gh pr comment "${PR_NUMBER}" --body "${COMMENT_BODY}"
+            fi
+          done
--- a/.github/workflows/backport.yaml
+++ b/.github/workflows/backport.yaml
@@ -1,165 +0,0 @@
-name: Auto Backport
-
-on:
-  pull_request_target:
-    types: [closed]
-    branches: [main]
-
-jobs:
-  backport:
-    if: github.event.pull_request.merged == true && contains(github.event.pull_request.labels.*.name, 'needs-backport')
-    runs-on: ubuntu-latest
-    permissions:
-      contents: write
-      pull-requests: write
-      issues: write
-
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-
-      - name: Configure git
-        run: |
-          git config user.name "github-actions[bot]"
-          git config user.email "github-actions[bot]@users.noreply.github.com"
-
-      - name: Extract version labels
-        id: versions
-        run: |
-          # Extract version labels (e.g., "1.24", "1.22")
-          VERSIONS=""
-          LABELS='${{ toJSON(github.event.pull_request.labels) }}'
-          for label in $(echo "$LABELS" | jq -r '.[].name'); do
-            # Match version labels like "1.24" (major.minor only)
-            if [[ "$label" =~ ^[0-9]+\.[0-9]+$ ]]; then
-              # Validate the branch exists before adding to list
-              if git ls-remote --exit-code origin "core/${label}" >/dev/null 2>&1; then
-                VERSIONS="${VERSIONS}${label} "
-              else
-                echo "::warning::Label '${label}' found but branch 'core/${label}' does not exist"
-              fi
-            fi
-          done
-
-          if [ -z "$VERSIONS" ]; then
-            echo "::error::No version labels found (e.g., 1.24, 1.22)"
-            exit 1
-          fi
-
-          echo "versions=${VERSIONS}" >> $GITHUB_OUTPUT
-          echo "Found version labels: ${VERSIONS}"
-
-      - name: Backport commits
-        id: backport
-        env:
-          PR_NUMBER: ${{ github.event.pull_request.number }}
-          PR_TITLE: ${{ github.event.pull_request.title }}
-          MERGE_COMMIT: ${{ github.event.pull_request.merge_commit_sha }}
-        run: |
-          FAILED=""
-          SUCCESS=""
-
-          for version in ${{ steps.versions.outputs.versions }}; do
-            echo "::group::Backporting to core/${version}"
-
-            TARGET_BRANCH="core/${version}"
-            BACKPORT_BRANCH="backport-${PR_NUMBER}-to-${version}"
-
-            # Fetch target branch (fail if doesn't exist)
-            if ! git fetch origin "${TARGET_BRANCH}"; then
-              echo "::error::Target branch ${TARGET_BRANCH} does not exist"
-              FAILED="${FAILED}${version}:branch-missing "
-              echo "::endgroup::"
-              continue
-            fi
-
-            # Create backport branch
-            git checkout -b "${BACKPORT_BRANCH}" "origin/${TARGET_BRANCH}"
-
-            # Try cherry-pick
-            if git cherry-pick "${MERGE_COMMIT}"; then
-              git push origin "${BACKPORT_BRANCH}"
-              SUCCESS="${SUCCESS}${version}:${BACKPORT_BRANCH} "
-              echo "Successfully created backport branch: ${BACKPORT_BRANCH}"
-              # Return to main (keep the branch, we need it for PR)
-              git checkout main
-            else
-              # Get conflict info
-              CONFLICTS=$(git diff --name-only --diff-filter=U | tr '\n' ',')
-              git cherry-pick --abort
-
-              echo "::error::Cherry-pick failed due to conflicts"
-              FAILED="${FAILED}${version}:conflicts:${CONFLICTS} "
-
-              # Clean up the failed branch
-              git checkout main
-              git branch -D "${BACKPORT_BRANCH}"
-            fi
-
-            echo "::endgroup::"
-          done
-
-          echo "success=${SUCCESS}" >> $GITHUB_OUTPUT
-          echo "failed=${FAILED}" >> $GITHUB_OUTPUT
-
-          if [ -n "${FAILED}" ]; then
-            exit 1
-          fi
-
-      - name: Create PR for each successful backport
-        if: steps.backport.outputs.success
-        env:
-          GH_TOKEN: ${{ secrets.PR_GH_TOKEN }}
-        run: |
-          PR_TITLE="${{ github.event.pull_request.title }}"
-          PR_NUMBER="${{ github.event.pull_request.number }}"
-          PR_AUTHOR="${{ github.event.pull_request.user.login }}"
-
-          for backport in ${{ steps.backport.outputs.success }}; do
-            IFS=':' read -r version branch <<< "${backport}"
-
-            if PR_URL=$(gh pr create \
-              --base "core/${version}" \
-              --head "${branch}" \
-              --title "[backport ${version}] ${PR_TITLE}" \
-              --body "Backport of #${PR_NUMBER} to \`core/${version}\`"$'\n\n'"Automatically created by backport workflow." \
-              --label "backport" 2>&1); then
-
-              # Extract PR number from URL
-              PR_NUM=$(echo "${PR_URL}" | grep -o '[0-9]*$')
-
-              if [ -n "${PR_NUM}" ]; then
-                gh pr comment "${PR_NUMBER}" --body "@${PR_AUTHOR} Successfully backported to #${PR_NUM}"
-              fi
-            else
-              echo "::error::Failed to create PR for ${version}: ${PR_URL}"
-              # Still try to comment on the original PR about the failure
-              gh pr comment "${PR_NUMBER}" --body "@${PR_AUTHOR} Backport branch created but PR creation failed for \`core/${version}\`. Please create the PR manually from branch \`${branch}\`"
-            fi
-          done
-
-      - name: Comment on failures
-        if: failure() && steps.backport.outputs.failed
-        env:
-          GH_TOKEN: ${{ github.token }}
-        run: |
-          PR_NUMBER="${{ github.event.pull_request.number }}"
-          PR_AUTHOR="${{ github.event.pull_request.user.login }}"
-          MERGE_COMMIT="${{ github.event.pull_request.merge_commit_sha }}"
-
-          for failure in ${{ steps.backport.outputs.failed }}; do
-            IFS=':' read -r version reason conflicts <<< "${failure}"
-
-            if [ "${reason}" = "branch-missing" ]; then
-              gh pr comment "${PR_NUMBER}" --body "@${PR_AUTHOR} Backport failed: Branch \`core/${version}\` does not exist"
-
-            elif [ "${reason}" = "conflicts" ]; then
-              # Convert comma-separated conflicts back to newlines for display
-              CONFLICTS_LIST=$(echo "${conflicts}" | tr ',' '\n' | sed 's/^/- /')
-
-              COMMENT_BODY="@${PR_AUTHOR} Backport to \`core/${version}\` failed: Merge conflicts detected."$'\n\n'"Please manually cherry-pick commit \`${MERGE_COMMIT}\` to the \`core/${version}\` branch."$'\n\n'"<details><summary>Conflicting files</summary>"$'\n\n'"${CONFLICTS_LIST}"$'\n\n'"</details>"
-              gh pr comment "${PR_NUMBER}" --body "${COMMENT_BODY}"
-            fi
-          done
--- a/.github/workflows/chromatic.yaml
+++ b/.github/workflows/chromatic.yaml
@@ -1,117 +0,0 @@
-name: 'Chromatic'
-
-# - [Automate Chromatic with GitHub Actions • Chromatic docs]( https://www.chromatic.com/docs/github-actions/ )
-
-on:
-  workflow_dispatch: # Allow manual triggering
-  pull_request:
-    branches: [main]
-
-jobs:
-  chromatic-deployment:
-    runs-on: ubuntu-latest
-    # Only run for PRs from version-bump-* branches or manual triggers
-    if: github.event_name == 'workflow_dispatch' || startsWith(github.head_ref, 'version-bump-')
-    permissions:
-      pull-requests: write
-      issues: write
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0 # Required for Chromatic baseline
-
-      - name: Install pnpm
-        uses: pnpm/action-setup@v4
-        with:
-          version: 10
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: '20'
-          cache: 'pnpm'
-
-      - 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
-        with:
-          path: |
-            .cache
-            storybook-static
-            tsconfig.tsbuildinfo
-          key: storybook-cache-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}-${{ hashFiles('src/**/*.{ts,vue,js}', '*.config.*', '.storybook/**/*') }}
-          restore-keys: |
-            storybook-cache-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}-
-            storybook-cache-${{ runner.os }}-
-            storybook-tools-cache-${{ runner.os }}-
-
-      - name: Install dependencies
-        run: pnpm install --frozen-lockfile
-
-      - name: Build Storybook and run Chromatic
-        id: chromatic
-        uses: chromaui/action@latest
-        with:
-          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
-          buildScriptName: build-storybook
-          autoAcceptChanges: 'main' # Auto-accept changes on main branch
-          exitOnceUploaded: true # Don't wait for UI tests to complete
-
-      - 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
@@ -29,11 +29,9 @@ jobs:
      - name: Check if we should proceed
        id: check-status
        run: |
-          # Get all check runs for this commit
-          CHECK_RUNS=$(gh api repos/${{ github.repository }}/commits/${{ github.event.pull_request.head.sha }}/check-runs --jq '.check_runs[] | select(.name | test("lint-and-format|test|playwright-tests")) | {name, conclusion}')
-          
-          # Check if any required checks failed
-          if echo "$CHECK_RUNS" | grep -q '"conclusion": "failure"'; then
+          CHECK_RUNS=$(gh api repos/${{ github.repository }}/commits/${{ github.event.pull_request.head.sha }}/check-runs --jq '.check_runs[] | select(.name | test("lint-and-format")) | {name, conclusion}')
+
+          if echo "$CHECK_RUNS" | grep -Eq '"conclusion": "(failure|cancelled|timed_out|action_required)"'; then
            echo "Some CI checks failed - skipping Claude review"
            echo "proceed=false" >> $GITHUB_OUTPUT
          else
@@ -47,11 +45,13 @@ 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
+        uses: actions/checkout@v5
        with:
          fetch-depth: 0
+          ref: refs/pull/${{ github.event.pull_request.number }}/head

      - name: Install pnpm
        uses: pnpm/action-setup@v4
@@ -69,22 +69,20 @@ 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 }}
          COMMIT_SHA: ${{ github.event.pull_request.head.sha }}
          BASE_SHA: ${{ github.event.pull_request.base.sha }}
-          REPOSITORY: ${{ github.repository }}
+          REPOSITORY: ${{ github.repository }}
--- a/.github/workflows/create-dev-pypi-package.yaml
+++ b/.github/workflows/create-dev-pypi-package.yaml
@@ -15,7 +15,7 @@ jobs:
      version: ${{ steps.current_version.outputs.version }}
    steps:
      - name: Checkout code
-        uses: actions/checkout@v4
+        uses: actions/checkout@v5
      - name: Install pnpm
        uses: pnpm/action-setup@v4
        with:
@@ -62,7 +62,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:
--- a/.github/workflows/create-release-candidate-branch.yaml
+++ b/.github/workflows/create-release-candidate-branch.yaml
@@ -18,7 +18,7 @@ jobs:

    steps:
      - name: Checkout repository
-        uses: actions/checkout@v4
+        uses: actions/checkout@v5
        with:
          fetch-depth: 0
          token: ${{ secrets.PR_GH_TOKEN || secrets.GITHUB_TOKEN }}
@@ -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/create-release-draft.yaml
+++ b/.github/workflows/create-release-draft.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/devtools-python-check.yaml
+++ b/.github/workflows/devtools-python-check.yaml
@@ -0,0 +1,26 @@
+name: Devtools Python Check
+
+on:
+  pull_request:
+    paths:
+      - 'tools/devtools/**'
+  push:
+    branches: [ main ]
+    paths:
+      - 'tools/devtools/**'
+
+jobs:
+  syntax:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v5
+
+      - name: Set up Python
+        uses: actions/setup-python@v5
+        with:
+          python-version: '3.11'
+
+      - name: Validate Python syntax
+        run: python3 -m compileall -q tools/devtools
--- a/.github/workflows/lint-and-format.yaml
+++ b/.github/workflows/lint-and-format.yaml
@@ -13,11 +13,9 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout PR
-        uses: actions/checkout@v4
+        uses: actions/checkout@v5
        with:
-          token: ${{ secrets.GITHUB_TOKEN }}
-          ref: ${{ github.event.pull_request.head.sha }}
-          fetch-depth: 0
+          ref: ${{ !github.event.pull_request.head.repo.fork && github.head_ref || github.ref }}

      - name: Install pnpm
        uses: pnpm/action-setup@v4
@@ -69,7 +67,7 @@ jobs:
          git config --local user.email "action@github.com"
          git config --local user.name "GitHub Action"
          git add .
-          git commit -m "[auto-fix] Apply ESLint and Prettier fixes"
+          git commit -m "[automated] Apply ESLint and Prettier fixes"
          git push

      - name: Final validation
@@ -102,4 +100,4 @@ jobs:
              owner: context.repo.owner,
              repo: context.repo.repo,
              body: '## ⚠️ Linting/Formatting Issues Found\n\nThis PR has linting or formatting issues that need to be fixed.\n\n**Since this PR is from a fork, auto-fix cannot be applied automatically.**\n\n### Option 1: Set up pre-commit hooks (recommended)\nRun this once to automatically format code on every commit:\n```bash\npnpm prepare\n```\n\n### Option 2: Fix manually\nRun these commands and push the changes:\n```bash\npnpm lint:fix\npnpm format\n```\n\nSee [CONTRIBUTING.md](https://github.com/Comfy-Org/ComfyUI_frontend/blob/main/CONTRIBUTING.md#git-pre-commit-hooks) for more details.'
-            })
+            })
--- a/.github/workflows/pr-playwright-deploy-forks.yaml
+++ b/.github/workflows/pr-playwright-deploy-forks.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@v5
+
+      - name: Get PR Number
+        id: pr
+        uses: actions/github-script@v7
+        with:
+          script: |
+            const { data: prs } = await github.rest.pulls.list({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              state: 'open',
+            });
+            
+            const pr = prs.find(p => p.head.sha === context.payload.workflow_run.head_sha);
+            
+            if (!pr) {
+              console.log('No PR found for SHA:', context.payload.workflow_run.head_sha);
+              return null;
+            }
+            
+            console.log(`Found PR #${pr.number} from fork: ${context.payload.workflow_run.head_repository.full_name}`);
+            return pr.number;
+
+      - name: Handle 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-deploy-forks.yaml
+++ b/.github/workflows/pr-storybook-deploy-forks.yaml
@@ -0,0 +1,90 @@
+name: PR Storybook Deploy (Forks)
+
+on:
+  workflow_run:
+    workflows: ['Storybook and Chromatic 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@v5
+
+      - name: Get PR Number
+        id: pr
+        uses: actions/github-script@v7
+        with:
+          script: |
+            const { data: prs } = await github.rest.pulls.list({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              state: 'open',
+            });
+            
+            const pr = prs.find(p => p.head.sha === context.payload.workflow_run.head_sha);
+            
+            if (!pr) {
+              console.log('No PR found for SHA:', context.payload.workflow_run.head_sha);
+              return null;
+            }
+            
+            console.log(`Found PR #${pr.number} from fork: ${context.payload.workflow_run.head_repository.full_name}`);
+            return pr.number;
+
+      - name: Handle Storybook Start
+        if: steps.pr.outputs.result != 'null' && github.event.action == 'requested'
+        env:
+          GITHUB_TOKEN: ${{ github.token }}
+        run: |
+          chmod +x scripts/cicd/pr-storybook-deploy-and-comment.sh
+          ./scripts/cicd/pr-storybook-deploy-and-comment.sh \
+            "${{ steps.pr.outputs.result }}" \
+            "${{ github.event.workflow_run.head_branch }}" \
+            "starting" \
+            "$(date -u '${{ env.DATE_FORMAT }}')"
+
+      - name: Download and Deploy Storybook
+        if: steps.pr.outputs.result != 'null' && github.event.action == 'completed' && github.event.workflow_run.conclusion == 'success'
+        uses: actions/download-artifact@v4
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          run-id: ${{ github.event.workflow_run.id }}
+          name: storybook-static
+          path: storybook-static
+          
+      - name: Handle Storybook Completion
+        if: steps.pr.outputs.result != 'null' && github.event.action == 'completed'
+        env:
+          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          GITHUB_TOKEN: ${{ github.token }}
+          WORKFLOW_CONCLUSION: ${{ github.event.workflow_run.conclusion }}
+          WORKFLOW_URL: ${{ github.event.workflow_run.html_url }}
+        run: |
+          chmod +x scripts/cicd/pr-storybook-deploy-and-comment.sh
+          ./scripts/cicd/pr-storybook-deploy-and-comment.sh \
+            "${{ steps.pr.outputs.result }}" \
+            "${{ github.event.workflow_run.head_branch }}" \
+            "completed"
--- a/.github/workflows/pr-storybook-deploy.yaml
+++ b/.github/workflows/pr-storybook-deploy.yaml
@@ -0,0 +1,90 @@
+name: PR Storybook Deploy (Forks)
+
+on:
+  workflow_run:
+    workflows: ['Storybook and Chromatic 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@v5
+
+      - name: Get PR Number
+        id: pr
+        uses: actions/github-script@v7
+        with:
+          script: |
+            const { data: prs } = await github.rest.pulls.list({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              state: 'open',
+            });
+            
+            const pr = prs.find(p => p.head.sha === context.payload.workflow_run.head_sha);
+            
+            if (!pr) {
+              console.log('No PR found for SHA:', context.payload.workflow_run.head_sha);
+              return null;
+            }
+            
+            console.log(`Found PR #${pr.number} from fork: ${context.payload.workflow_run.head_repository.full_name}`);
+            return pr.number;
+
+      - name: Handle Storybook Start
+        if: steps.pr.outputs.result != 'null' && github.event.action == 'requested'
+        env:
+          GITHUB_TOKEN: ${{ github.token }}
+        run: |
+          chmod +x scripts/cicd/pr-storybook-deploy-and-comment.sh
+          ./scripts/cicd/pr-storybook-deploy-and-comment.sh \
+            "${{ steps.pr.outputs.result }}" \
+            "${{ github.event.workflow_run.head_branch }}" \
+            "starting" \
+            "$(date -u '${{ env.DATE_FORMAT }}')"
+
+      - name: Download and Deploy Storybook
+        if: steps.pr.outputs.result != 'null' && github.event.action == 'completed' && github.event.workflow_run.conclusion == 'success'
+        uses: actions/download-artifact@v4
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          run-id: ${{ github.event.workflow_run.id }}
+          name: storybook-static
+          path: storybook-static
+          
+      - name: Handle Storybook Completion
+        if: steps.pr.outputs.result != 'null' && github.event.action == 'completed'
+        env:
+          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          GITHUB_TOKEN: ${{ github.token }}
+          WORKFLOW_CONCLUSION: ${{ github.event.workflow_run.conclusion }}
+          WORKFLOW_URL: ${{ github.event.workflow_run.html_url }}
+        run: |
+          chmod +x scripts/cicd/pr-storybook-deploy-and-comment.sh
+          ./scripts/cicd/pr-storybook-deploy-and-comment.sh \
+            "${{ steps.pr.outputs.result }}" \
+            "${{ github.event.workflow_run.head_branch }}" \
+            "completed"
--- a/.github/workflows/publish-desktop-ui-on-merge.yaml
+++ b/.github/workflows/publish-desktop-ui-on-merge.yaml
@@ -0,0 +1,59 @@
+name: Publish Desktop UI on PR Merge
+
+on:
+  pull_request:
+    types: [ closed ]
+    branches: [ main, core/* ]
+    paths:
+      - 'apps/desktop-ui/package.json'
+
+jobs:
+  resolve:
+    name: Resolve Version and Dist Tag
+    runs-on: ubuntu-latest
+    if: >
+      github.event.pull_request.merged == true &&
+      contains(github.event.pull_request.labels.*.name, 'Release')
+    outputs:
+      version: ${{ steps.get_version.outputs.version }}
+      dist_tag: ${{ steps.dist.outputs.dist_tag }}
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v5
+        with:
+          ref: ${{ github.event.pull_request.merge_commit_sha }}
+          persist-credentials: false
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v5
+        with:
+          node-version: '24.x'
+
+      - name: Read desktop-ui version
+        id: get_version
+        run: |
+          VERSION=$(node -p "require('./apps/desktop-ui/package.json').version")
+          echo "version=$VERSION" >> $GITHUB_OUTPUT
+
+      - name: Determine dist-tag
+        id: dist
+        env:
+          VERSION: ${{ steps.get_version.outputs.version }}
+        run: |
+          if [[ "$VERSION" =~ ^[0-9]+\.[0-9]+\.[0-9]+- ]]; then
+            echo "dist_tag=next" >> $GITHUB_OUTPUT
+          else
+            echo "dist_tag=latest" >> $GITHUB_OUTPUT
+          fi
+
+  publish:
+    name: Publish Desktop UI to npm
+    needs: resolve
+    uses: ./.github/workflows/publish-desktop-ui.yaml
+    with:
+      version: ${{ needs.resolve.outputs.version }}
+      dist_tag: ${{ needs.resolve.outputs.dist_tag }}
+      ref: ${{ github.event.pull_request.merge_commit_sha }}
+    secrets:
+      NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+
--- a/.github/workflows/publish-desktop-ui.yaml
+++ b/.github/workflows/publish-desktop-ui.yaml
@@ -0,0 +1,205 @@
+name: Publish Desktop UI
+
+on:
+  workflow_dispatch:
+    inputs:
+      version:
+        description: 'Version to publish (e.g., 1.2.3)'
+        required: true
+        type: string
+      dist_tag:
+        description: 'npm dist-tag to use'
+        required: true
+        default: latest
+        type: string
+      ref:
+        description: 'Git ref to checkout (commit SHA, tag, or branch)'
+        required: false
+        type: string
+  workflow_call:
+    inputs:
+      version:
+        required: true
+        type: string
+      dist_tag:
+        required: false
+        type: string
+        default: latest
+      ref:
+        required: false
+        type: string
+    secrets:
+      NPM_TOKEN:
+        required: true
+
+concurrency:
+  group: publish-desktop-ui-${{ github.workflow }}-${{ inputs.version }}-${{ inputs.dist_tag }}
+  cancel-in-progress: false
+
+jobs:
+  publish_desktop_ui:
+    name: Publish @comfyorg/desktop-ui
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+    env:
+      PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: '1'
+    steps:
+      - name: Validate inputs
+        env:
+          VERSION: ${{ inputs.version }}
+        shell: bash
+        run: |
+          set -euo pipefail
+          SEMVER_REGEX='^(0|[1-9][0-9]*)\.(0|[1-9][0-9]*)\.(0|[1-9][0-9]*)(-((0|[1-9][0-9]*|[0-9]*[A-Za-z-][0-9A-Za-z-]*)(\.(0|[1-9][0-9]*|[0-9]*[A-Za-z-][0-9A-Za-z-]*))*))?(\+([0-9A-Za-z-]+(\.[0-9A-Za-z-]+)*))?$'
+          if [[ ! "$VERSION" =~ $SEMVER_REGEX ]]; then
+            echo "::error title=Invalid version::Version '$VERSION' must follow semantic versioning (x.y.z[-suffix][+build])" >&2
+            exit 1
+          fi
+
+      - name: Determine ref to checkout
+        id: resolve_ref
+        env:
+          REF: ${{ inputs.ref }}
+          VERSION: ${{ inputs.version }}
+        shell: bash
+        run: |
+          set -euo pipefail
+          if [ -n "$REF" ]; then
+            if ! git check-ref-format --allow-onelevel "$REF"; then
+              echo "::error title=Invalid ref::Ref '$REF' fails git check-ref-format validation." >&2
+              exit 1
+            fi
+            echo "ref=$REF" >> "$GITHUB_OUTPUT"
+          else
+            echo "ref=refs/tags/v$VERSION" >> "$GITHUB_OUTPUT"
+          fi
+
+      - name: Checkout repository
+        uses: actions/checkout@v5
+        with:
+          ref: ${{ steps.resolve_ref.outputs.ref }}
+          fetch-depth: 1
+          persist-credentials: false
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v5
+        with:
+          node-version: '24.x'
+          cache: 'pnpm'
+          registry-url: https://registry.npmjs.org
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile --ignore-scripts
+
+      - name: Build Desktop UI
+        run: pnpm build:desktop
+
+      - name: Prepare npm package
+        id: pkg
+        shell: bash
+        run: |
+          set -euo pipefail
+          APP_PKG=apps/desktop-ui/package.json
+          ROOT_PKG=package.json
+
+          NAME=$(jq -r .name "$APP_PKG")
+          APP_VERSION=$(jq -r .version "$APP_PKG")
+          ROOT_LICENSE=$(jq -r .license "$ROOT_PKG")
+          REPO=$(jq -r .repository "$ROOT_PKG")
+
+          if [ -z "$NAME" ] || [ "$NAME" = "null" ]; then
+            echo "::error title=Missing name::apps/desktop-ui/package.json is missing 'name'" >&2
+            exit 1
+          fi
+
+          INPUT_VERSION="${{ inputs.version }}"
+          if [ "$APP_VERSION" != "$INPUT_VERSION" ]; then
+            echo "::error title=Version mismatch::apps/desktop-ui version $APP_VERSION does not match input $INPUT_VERSION" >&2
+            exit 1
+          fi
+
+          if [ ! -d apps/desktop-ui/dist ]; then
+            echo "::error title=Missing build::apps/desktop-ui/dist not found. Did build succeed?" >&2
+            exit 1
+          fi
+
+          PUBLISH_DIR=apps/desktop-ui/.npm-publish
+          rm -rf "$PUBLISH_DIR"
+          mkdir -p "$PUBLISH_DIR"
+          cp -R apps/desktop-ui/dist "$PUBLISH_DIR/dist"
+
+          INPUT_VERSION="${{ inputs.version }}"
+          jq -n \
+            --arg name "$NAME" \
+            --arg version "$INPUT_VERSION" \
+            --arg description "Static assets for the ComfyUI Desktop UI" \
+            --arg license "$ROOT_LICENSE" \
+            --arg repository "$REPO" \
+            '{
+              name: $name,
+              version: $version,
+              description: $description,
+              license: $license,
+              repository: $repository,
+              type: "module",
+              private: false,
+              files: ["dist"],
+              publishConfig: { access: "public" }
+            }' > "$PUBLISH_DIR/package.json"
+
+          if [ -f apps/desktop-ui/README.md ]; then
+            cp apps/desktop-ui/README.md "$PUBLISH_DIR/README.md"
+          fi
+
+          echo "publish_dir=$PUBLISH_DIR" >> "$GITHUB_OUTPUT"
+          echo "name=$NAME" >> "$GITHUB_OUTPUT"
+
+      - name: Pack (preview only)
+        shell: bash
+        working-directory: ${{ steps.pkg.outputs.publish_dir }}
+        run: |
+          set -euo pipefail
+          npm pack --json | tee pack-result.json
+
+      - name: Upload package tarball artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: desktop-ui-npm-tarball-${{ inputs.version }}
+          path: ${{ steps.pkg.outputs.publish_dir }}/*.tgz
+          if-no-files-found: error
+
+      - name: Check if version already on npm
+        id: check_npm
+        env:
+          NAME: ${{ steps.pkg.outputs.name }}
+          VER: ${{ inputs.version }}
+        shell: bash
+        run: |
+          set -euo pipefail
+          STATUS=0
+          OUTPUT=$(npm view "${NAME}@${VER}" --json 2>&1) || STATUS=$?
+          if [ "$STATUS" -eq 0 ]; then
+            echo "exists=true" >> "$GITHUB_OUTPUT"
+            echo "::warning title=Already published::${NAME}@${VER} already exists on npm. Skipping publish."
+          else
+            if echo "$OUTPUT" | grep -q "E404"; then
+              echo "exists=false" >> "$GITHUB_OUTPUT"
+            else
+              echo "::error title=Registry lookup failed::$OUTPUT" >&2
+              exit "$STATUS"
+            fi
+          fi
+
+      - name: Publish package
+        if: steps.check_npm.outputs.exists == 'false'
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+          DIST_TAG: ${{ inputs.dist_tag }}
+        run: pnpm publish --access public --tag "$DIST_TAG" --no-git-checks --ignore-scripts
+        working-directory: ${{ steps.pkg.outputs.publish_dir }}
--- 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/storybook-and-chromatic-ci.yaml
+++ b/.github/workflows/storybook-and-chromatic-ci.yaml
@@ -0,0 +1,231 @@
+name: Storybook and Chromatic CI
+
+# - [Automate Chromatic with GitHub Actions • Chromatic docs]( https://www.chromatic.com/docs/github-actions/ )
+
+on:
+  workflow_dispatch: # Allow manual triggering
+  pull_request:
+    branches: [main]
+
+jobs:
+  # Post starting comment for non-forked PRs
+  comment-on-pr-start:
+    runs-on: ubuntu-latest
+    if: github.event_name == 'pull_request' && github.event.pull_request.head.repo.fork == false
+    permissions:
+      pull-requests: write
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v5
+        
+      - name: Post starting comment
+        env:
+          GITHUB_TOKEN: ${{ github.token }}
+        run: |
+          chmod +x scripts/cicd/pr-storybook-deploy-and-comment.sh
+          ./scripts/cicd/pr-storybook-deploy-and-comment.sh \
+            "${{ github.event.pull_request.number }}" \
+            "${{ github.head_ref }}" \
+            "starting" \
+            "$(date -u '+%m/%d/%Y, %I:%M:%S %p')"
+
+  # Build Storybook for all PRs (free Cloudflare deployment)
+  storybook-build:
+    runs-on: ubuntu-latest
+    if: github.event_name == 'pull_request'
+    outputs:
+      conclusion: ${{ steps.job-status.outputs.conclusion }}
+      workflow-url: ${{ steps.workflow-url.outputs.url }}
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v5
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'pnpm'
+
+      - name: Cache tool outputs
+        uses: actions/cache@v4
+        with:
+          path: |
+            .cache
+            storybook-static
+            tsconfig.tsbuildinfo
+          key: storybook-cache-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}-${{ hashFiles('src/**/*.{ts,vue,js}', '*.config.*', '.storybook/**/*') }}
+          restore-keys: |
+            storybook-cache-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}-
+            storybook-cache-${{ runner.os }}-
+            storybook-tools-cache-${{ runner.os }}-
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build Storybook
+        run: pnpm build-storybook
+
+      - name: Set job status
+        id: job-status
+        if: always()
+        run: |
+          echo "conclusion=${{ job.status }}" >> $GITHUB_OUTPUT
+
+      - name: Get workflow URL
+        id: workflow-url
+        if: always()
+        run: |
+          echo "url=${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}" >> $GITHUB_OUTPUT
+
+      - name: Upload Storybook build
+        if: success() && github.event.pull_request.head.repo.fork == false
+        uses: actions/upload-artifact@v4
+        with:
+          name: storybook-static
+          path: storybook-static/
+          retention-days: 7
+
+  # Chromatic deployment only for version-bump-* branches or manual triggers
+  chromatic-deployment:
+    runs-on: ubuntu-latest
+    if: github.event_name == 'workflow_dispatch' || (github.event_name == 'pull_request' && startsWith(github.head_ref, 'version-bump-'))
+    outputs:
+      conclusion: ${{ steps.job-status.outputs.conclusion }}
+      workflow-url: ${{ steps.workflow-url.outputs.url }}
+      chromatic-build-url: ${{ steps.chromatic.outputs.buildUrl }}
+      chromatic-storybook-url: ${{ steps.chromatic.outputs.storybookUrl }}
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v5
+        with:
+          fetch-depth: 0 # Required for Chromatic baseline
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'pnpm'
+
+      - name: Cache tool outputs
+        uses: actions/cache@v4
+        with:
+          path: |
+            .cache
+            storybook-static
+            tsconfig.tsbuildinfo
+          key: storybook-cache-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}-${{ hashFiles('src/**/*.{ts,vue,js}', '*.config.*', '.storybook/**/*') }}
+          restore-keys: |
+            storybook-cache-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}-
+            storybook-cache-${{ runner.os }}-
+            storybook-tools-cache-${{ runner.os }}-
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build Storybook and run Chromatic
+        id: chromatic
+        uses: chromaui/action@latest
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          buildScriptName: build-storybook
+          autoAcceptChanges: 'main' # Auto-accept changes on main branch
+          exitOnceUploaded: true # Don't wait for UI tests to complete
+          onlyChanged: true # Only capture changed stories
+
+      - name: Set job status
+        id: job-status
+        if: always()
+        run: |
+          echo "conclusion=${{ job.status }}" >> $GITHUB_OUTPUT
+
+      - name: Get workflow URL
+        id: workflow-url
+        if: always()
+        run: |
+          echo "url=${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}" >> $GITHUB_OUTPUT
+
+  # Deploy and comment for non-forked PRs only
+  deploy-and-comment:
+    needs: [storybook-build]
+    runs-on: ubuntu-latest
+    if: github.event_name == 'pull_request' && github.event.pull_request.head.repo.fork == false && always()
+    permissions:
+      pull-requests: write
+      contents: read
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v5
+        
+      - name: Download Storybook build
+        if: needs.storybook-build.outputs.conclusion == 'success'
+        uses: actions/download-artifact@v4
+        with:
+          name: storybook-static
+          path: storybook-static
+          
+      - name: Make deployment script executable
+        run: chmod +x scripts/cicd/pr-storybook-deploy-and-comment.sh
+        
+      - name: Deploy Storybook and comment on PR
+        env:
+          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          GITHUB_TOKEN: ${{ github.token }}
+          WORKFLOW_CONCLUSION: ${{ needs.storybook-build.outputs.conclusion }}
+          WORKFLOW_URL: ${{ needs.storybook-build.outputs.workflow-url }}
+        run: |
+          ./scripts/cicd/pr-storybook-deploy-and-comment.sh \
+            "${{ github.event.pull_request.number }}" \
+            "${{ github.head_ref }}" \
+            "completed"
+
+  # Update comment with Chromatic URLs for version-bump branches
+  update-comment-with-chromatic:
+    needs: [chromatic-deployment, deploy-and-comment]
+    runs-on: ubuntu-latest
+    if: github.event_name == 'pull_request' && github.event.pull_request.head.repo.fork == false && startsWith(github.head_ref, 'version-bump-') && needs.chromatic-deployment.outputs.chromatic-build-url != ''
+    permissions:
+      pull-requests: write
+    steps:
+      - name: Update comment with Chromatic URLs
+        uses: actions/github-script@v7
+        with:
+          script: |
+            const buildUrl = '${{ needs.chromatic-deployment.outputs.chromatic-build-url }}';
+            const storybookUrl = '${{ needs.chromatic-deployment.outputs.chromatic-storybook-url }}';
+            
+            // Find the existing Storybook comment
+            const { data: comments } = await github.rest.issues.listComments({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              issue_number: ${{ github.event.pull_request.number }}
+            });
+            
+            const storybookComment = comments.find(comment => 
+              comment.body.includes('<!-- STORYBOOK_BUILD_STATUS -->')
+            );
+            
+            if (storybookComment && buildUrl && storybookUrl) {
+              // Append Chromatic info to existing comment
+              const updatedBody = storybookComment.body.replace(
+                /---\n(.*)$/s,
+                `---\n### 🎨 Chromatic Visual Tests\n- 📊 [View Chromatic Build](${buildUrl})\n- 📚 [View Chromatic Storybook](${storybookUrl})\n\n$1`
+              );
+              
+              await github.rest.issues.updateComment({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                comment_id: storybookComment.id,
+                body: updatedBody
+              });
+            }
--- a/.github/workflows/test-ui.yaml
+++ b/.github/workflows/test-ui.yaml
@@ -1,393 +0,0 @@
-name: Tests CI
-
-on:
-  push:
-    branches: [main, master, core/*, desktop/*]
-  pull_request:
-    branches-ignore:
-      [wip/*, draft/*, temp/*, vue-nodes-migration, sno-playwright-*]
-
-env:
-  DATE_FORMAT: '+%m/%d/%Y, %I:%M:%S %p'
-
-jobs:
-  setup:
-    runs-on: ubuntu-latest
-    outputs:
-      cache-key: ${{ steps.cache-key.outputs.key }}
-      sanitized-branch: ${{ steps.branch-info.outputs.sanitized }}
-    steps:
-      - name: Checkout ComfyUI
-        uses: actions/checkout@v4
-        with:
-          repository: 'comfyanonymous/ComfyUI'
-          path: 'ComfyUI'
-          ref: master
-
-      - name: Checkout ComfyUI_frontend
-        uses: actions/checkout@v4
-        with:
-          repository: 'Comfy-Org/ComfyUI_frontend'
-          path: 'ComfyUI_frontend'
-
-      - name: Checkout ComfyUI_devtools
-        uses: actions/checkout@v4
-        with:
-          repository: 'Comfy-Org/ComfyUI_devtools'
-          path: 'ComfyUI/custom_nodes/ComfyUI_devtools'
-          ref: 'd05fd48dd787a4192e16802d4244cfcc0e2f9684'
-
-      - name: Install pnpm
-        uses: pnpm/action-setup@v4
-        with:
-          version: 10
-
-      - uses: actions/setup-node@v4
-        with:
-          node-version: lts/*
-          cache: 'pnpm'
-          cache-dependency-path: 'ComfyUI_frontend/pnpm-lock.yaml'
-
-      - name: 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:
-          path: |
-            ComfyUI_frontend/.cache
-            ComfyUI_frontend/tsconfig.tsbuildinfo
-          key: playwright-setup-cache-${{ runner.os }}-${{ hashFiles('ComfyUI_frontend/pnpm-lock.yaml') }}-${{ hashFiles('ComfyUI_frontend/src/**/*.{ts,vue,js}', 'ComfyUI_frontend/*.config.*') }}
-          restore-keys: |
-            playwright-setup-cache-${{ runner.os }}-${{ hashFiles('ComfyUI_frontend/pnpm-lock.yaml') }}-
-            playwright-setup-cache-${{ runner.os }}-
-            playwright-tools-cache-${{ runner.os }}-
-
-      - name: Build ComfyUI_frontend
-        run: |
-          pnpm install --frozen-lockfile
-          pnpm build
-        working-directory: ComfyUI_frontend
-
-      - name: Generate cache key
-        id: cache-key
-        run: echo "key=$(date +%s)" >> $GITHUB_OUTPUT
-
-      - name: Generate sanitized branch name
-        id: branch-info
-        run: |
-          # Get branch name and sanitize it for Cloudflare branch names
-          BRANCH_NAME="${{ github.head_ref || github.ref_name }}"
-          SANITIZED_BRANCH=$(echo "$BRANCH_NAME" | tr '[:upper:]' '[:lower:]' | sed 's/[^a-z0-9-]/-/g' | sed 's/--*/-/g' | sed 's/^-\|-$//g')
-          echo "sanitized=${SANITIZED_BRANCH}" >> $GITHUB_OUTPUT
-
-      - name: Save cache
-        uses: actions/cache/save@5a3ec84eff668545956fd18022155c47e93e2684
-        with:
-          path: |
-            ComfyUI
-            ComfyUI_frontend
-          key: comfyui-setup-${{ steps.cache-key.outputs.key }}
-
-  playwright-tests:
-    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]
-    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: Get current time
-        id: current-time
-        run: echo "time=$(date -u '${{ env.DATE_FORMAT }}')" >> $GITHUB_OUTPUT
-
-      - name: Set project name
-        id: project-name
-        run: |
-          if [ "${{ matrix.browser }}" = "chromium-0.5x" ]; then
-            echo "name=comfyui-playwright-chromium-0-5x" >> $GITHUB_OUTPUT
-          else
-            echo "name=comfyui-playwright-${{ matrix.browser }}" >> $GITHUB_OUTPUT
-          fi
-          echo "branch=${{ needs.setup.outputs.sanitized-branch }}" >> $GITHUB_OUTPUT
-
-      - name: Comment PR - Browser Test Started
-        if: github.event_name == 'pull_request'
-        continue-on-error: true
-        uses: edumserrano/find-create-or-update-comment@v3
-        with:
-          issue-number: ${{ github.event.pull_request.number }}
-          body-includes: '<!-- PLAYWRIGHT_TEST_STATUS -->'
-          comment-author: 'github-actions[bot]'
-          edit-mode: append
-          body: |
-            <img alt='claude-loading-gif' src="https://github.com/user-attachments/assets/5ac382c7-e004-429b-8e35-7feb3e8f9c6f" width="14px" height="14px" style="vertical-align: middle; margin-left: 4px;" />
-            <bold>${{ matrix.browser }}</bold>: Running tests...
-
-      - name: Install requirements
-        run: |
-          python -m pip install --upgrade pip
-          pip install torch torchvision torchaudio --index-url https://download.pytorch.org/whl/cpu
-          pip install -r requirements.txt
-          pip install wait-for-it
-        working-directory: ComfyUI
-
-      - name: Start ComfyUI server
-        run: |
-          python main.py --cpu --multi-user --front-end-root ../ComfyUI_frontend/dist &
-          wait-for-it --service 127.0.0.1:8188 -t 600
-        working-directory: ComfyUI
-
-      - name: 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
-        working-directory: ComfyUI_frontend
-
-      - uses: actions/upload-artifact@v4
-        if: always() # note: use always() to allow results to be upload/report even tests failed.
-        with:
-          name: playwright-report-${{ matrix.browser }}
-          path: ComfyUI_frontend/playwright-report/
-          retention-days: 30
-
-      - name: Deploy to Cloudflare Pages (${{ matrix.browser }})
-        id: cloudflare-deploy
-        if: always()
-        continue-on-error: true
-        run: |
-          # Retry logic for wrangler deploy (3 attempts)
-          RETRY_COUNT=0
-          MAX_RETRIES=3
-          SUCCESS=false
-          
-          while [ $RETRY_COUNT -lt $MAX_RETRIES ] && [ $SUCCESS = false ]; do
-            RETRY_COUNT=$((RETRY_COUNT + 1))
-            echo "Deployment attempt $RETRY_COUNT of $MAX_RETRIES..."
-            
-            if npx wrangler pages deploy ComfyUI_frontend/playwright-report --project-name=${{ steps.project-name.outputs.name }} --branch=${{ steps.project-name.outputs.branch }}; then
-              SUCCESS=true
-              echo "Deployment successful on attempt $RETRY_COUNT"
-            else
-              echo "Deployment failed on attempt $RETRY_COUNT"
-              if [ $RETRY_COUNT -lt $MAX_RETRIES ]; then
-                echo "Retrying in 10 seconds..."
-                sleep 10
-              fi
-            fi
-          done
-          
-          if [ $SUCCESS = false ]; then
-            echo "All deployment attempts failed"
-            exit 1
-          fi
-        env:
-          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
-          CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
-
-      - name: Save deployment info for summary
-        if: always()
-        run: |
-          mkdir -p deployment-info
-          # Use step conclusion to determine test result
-          if [ "${{ steps.playwright.conclusion }}" = "success" ]; then
-            EXIT_CODE="0"
-          else
-            EXIT_CODE="1"
-          fi
-          DEPLOYMENT_URL="${{ steps.cloudflare-deploy.outputs.deployment-url || steps.cloudflare-deploy.outputs.url || format('https://{0}.{1}.pages.dev', steps.project-name.outputs.branch, steps.project-name.outputs.name) }}"
-          echo "${{ matrix.browser }}|${EXIT_CODE}|${DEPLOYMENT_URL}" > deployment-info/${{ matrix.browser }}.txt
-
-      - name: Upload deployment info
-        if: always()
-        uses: actions/upload-artifact@v4
-        with:
-          name: deployment-info-${{ matrix.browser }}
-          path: deployment-info/
-          retention-days: 1
-
-      - name: Get completion time
-        id: completion-time
-        if: always()
-        run: echo "time=$(date -u '${{ env.DATE_FORMAT }}')" >> $GITHUB_OUTPUT
-
-      - name: Comment PR - Browser Test Complete
-        if: always() && github.event_name == 'pull_request'
-        continue-on-error: true
-        uses: edumserrano/find-create-or-update-comment@v3
-        with:
-          issue-number: ${{ github.event.pull_request.number }}
-          body-includes: '<!-- PLAYWRIGHT_TEST_STATUS -->'
-          comment-author: 'github-actions[bot]'
-          edit-mode: append
-          body: |
-            ${{ steps.playwright.conclusion == 'success' && '✅' || '❌' }} **${{ matrix.browser }}**: ${{ steps.playwright.conclusion == 'success' && 'Tests passed!' || 'Tests failed!' }} [View Report](${{ steps.cloudflare-deploy.outputs.deployment-url || format('https://{0}.{1}.pages.dev', steps.project-name.outputs.branch, steps.project-name.outputs.name) }})
-
-  comment-summary:
-    needs: playwright-tests
-    runs-on: ubuntu-latest
-    if: always() && github.event_name == 'pull_request'
-    permissions:
-      pull-requests: write
-    steps:
-      - name: Download all deployment info
-        uses: actions/download-artifact@v4
-        with:
-          pattern: deployment-info-*
-          merge-multiple: true
-          path: deployment-info
-
-      - name: Get completion time
-        id: completion-time
-        run: echo "time=$(date -u '${{ env.DATE_FORMAT }}')" >> $GITHUB_OUTPUT
-
-      - name: Generate comment body
-        id: comment-body
-        run: |
-          echo "<!-- PLAYWRIGHT_TEST_STATUS -->" > comment.md
-          echo "## 🎭 Playwright Test Results" >> comment.md
-          echo "" >> comment.md
-
-          # Check if all tests passed
-          ALL_PASSED=true
-          for file in deployment-info/*.txt; do
-            if [ -f "$file" ]; then
-              browser=$(basename "$file" .txt)
-              info=$(cat "$file")
-              exit_code=$(echo "$info" | cut -d'|' -f2)
-              if [ "$exit_code" != "0" ]; then
-                ALL_PASSED=false
-                break
-              fi
-            fi
-          done
-
-          if [ "$ALL_PASSED" = "true" ]; then
-            echo "✅ **All tests passed across all browsers!**" >> comment.md
-          else
-            echo "❌ **Some tests failed!**" >> comment.md
-          fi
-
-          echo "" >> comment.md
-          echo "⏰ Completed at: ${{ steps.completion-time.outputs.time }} UTC" >> comment.md
-          echo "" >> comment.md
-          echo "### 📊 Test Reports by Browser" >> comment.md
-
-          for file in deployment-info/*.txt; do
-            if [ -f "$file" ]; then
-              browser=$(basename "$file" .txt)
-              info=$(cat "$file")
-              exit_code=$(echo "$info" | cut -d'|' -f2)
-              url=$(echo "$info" | cut -d'|' -f3)
-              
-              if [ "$exit_code" = "0" ]; then
-                status="✅"
-              else
-                status="❌"
-              fi
-              
-              echo "- $status **$browser**: [View Report]($url)" >> comment.md
-            fi
-          done
-
-          echo "" >> comment.md
-          echo "---" >> comment.md
-          if [ "$ALL_PASSED" = "true" ]; then
-            echo "🎉 Your tests are passing across all browsers!" >> comment.md
-          else
-            echo "⚠️ Please check the test reports for details on failures." >> comment.md
-          fi
-
-      - name: Comment PR - Tests Complete
-        continue-on-error: true
-        uses: edumserrano/find-create-or-update-comment@v3
-        with:
-          issue-number: ${{ github.event.pull_request.number }}
-          body-includes: '<!-- PLAYWRIGHT_TEST_STATUS -->'
-          comment-author: 'github-actions[bot]'
-          edit-mode: replace
-          body-path: comment.md
-
-      - name: Check test results and fail if needed
-        run: |
-          # Check if all tests passed and fail the job if not
-          ALL_PASSED=true
-          for file in deployment-info/*.txt; do
-            if [ -f "$file" ]; then
-              info=$(cat "$file")
-              exit_code=$(echo "$info" | cut -d'|' -f2)
-              if [ "$exit_code" != "0" ]; then
-                ALL_PASSED=false
-                break
-              fi
-            fi
-          done
-
-          if [ "$ALL_PASSED" = "false" ]; then
-            echo "❌ Tests failed in one or more browsers. Failing the CI job."
-            exit 1
-          else
-            echo "✅ All tests passed across all browsers!"
-          fi
--- a/.github/workflows/tests-ci.yaml
+++ b/.github/workflows/tests-ci.yaml
@@ -0,0 +1,322 @@
+name: Tests CI
+
+on:
+  push:
+    branches: [main, master, core/*, desktop/*]
+  pull_request:
+    branches-ignore:
+      [wip/*, draft/*, temp/*, vue-nodes-migration, sno-playwright-*]
+
+jobs:
+  setup:
+    runs-on: ubuntu-latest
+    outputs:
+      cache-key: ${{ steps.cache-key.outputs.key }}
+    steps:
+      - name: Checkout ComfyUI
+        uses: actions/checkout@v5
+        with:
+          repository: 'comfyanonymous/ComfyUI'
+          path: 'ComfyUI'
+          ref: master
+
+      - name: Checkout ComfyUI_frontend
+        uses: actions/checkout@v5
+        with:
+          repository: 'Comfy-Org/ComfyUI_frontend'
+          path: 'ComfyUI_frontend'
+
+      - 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
+        with:
+          version: 10
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+          cache: 'pnpm'
+          cache-dependency-path: 'ComfyUI_frontend/pnpm-lock.yaml'
+
+      - name: Cache tool outputs
+        uses: actions/cache@v4
+        with:
+          path: |
+            ComfyUI_frontend/.cache
+            ComfyUI_frontend/tsconfig.tsbuildinfo
+          key: playwright-setup-cache-${{ runner.os }}-${{ hashFiles('ComfyUI_frontend/pnpm-lock.yaml') }}-${{ hashFiles('ComfyUI_frontend/src/**/*.{ts,vue,js}', 'ComfyUI_frontend/*.config.*') }}
+          restore-keys: |
+            playwright-setup-cache-${{ runner.os }}-${{ hashFiles('ComfyUI_frontend/pnpm-lock.yaml') }}-
+            playwright-setup-cache-${{ runner.os }}-
+            playwright-tools-cache-${{ runner.os }}-
+
+      - name: Build ComfyUI_frontend
+        run: |
+          pnpm install --frozen-lockfile
+          pnpm build
+        working-directory: ComfyUI_frontend
+
+      - name: Generate cache key
+        id: cache-key
+        run: echo "key=$(date +%s)" >> $GITHUB_OUTPUT
+
+
+      - name: Save cache
+        uses: actions/cache/save@5a3ec84eff668545956fd18022155c47e93e2684
+        with:
+          path: |
+            ComfyUI
+            ComfyUI_frontend
+          key: comfyui-setup-${{ steps.cache-key.outputs.key }}
+
+  # Sharded chromium tests
+  playwright-tests-chromium-sharded:
+    needs: setup
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+    strategy:
+      fail-fast: false
+      matrix:
+        shardIndex: [1, 2, 3, 4, 5, 6, 7, 8]
+        shardTotal: [8]
+    steps:
+      - name: Wait for cache propagation
+        run: sleep 10
+
+      - name: Restore cached setup
+        uses: actions/cache/restore@v4
+        with:
+          fail-on-cache-miss: true
+          path: |
+            ComfyUI
+            ComfyUI_frontend
+          key: comfyui-setup-${{ needs.setup.outputs.cache-key }}
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
+
+      - uses: actions/setup-python@v4
+        with:
+          python-version: '3.10'
+          cache: 'pip'
+
+      - name: Install requirements
+        run: |
+          python -m pip install --upgrade pip
+          pip install torch torchvision torchaudio --index-url https://download.pytorch.org/whl/cpu
+          pip install -r requirements.txt
+          pip install wait-for-it
+        working-directory: ComfyUI
+
+
+      - name: Setup Playwright
+        uses: ./ComfyUI_frontend/.github/actions/setup-playwright
+
+      - 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@v4
+        with:
+          fail-on-cache-miss: true
+          path: |
+            ComfyUI
+            ComfyUI_frontend
+          key: comfyui-setup-${{ needs.setup.outputs.cache-key }}
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
+
+      - uses: actions/setup-python@v4
+        with:
+          python-version: '3.10'
+          cache: 'pip'
+
+      - name: Install requirements
+        run: |
+          python -m pip install --upgrade pip
+          pip install torch torchvision torchaudio --index-url https://download.pytorch.org/whl/cpu
+          pip install -r requirements.txt
+          pip install wait-for-it
+        working-directory: ComfyUI
+
+      - name: Setup Playwright
+        uses: ./ComfyUI_frontend/.github/actions/setup-playwright
+
+      - name: Start ComfyUI server
+        run: |
+          python main.py --cpu --multi-user --front-end-root ../ComfyUI_frontend/dist &
+          wait-for-it --service 127.0.0.1:8188 -t 600
+        working-directory: ComfyUI
+
+      - name: Run Playwright tests (${{ matrix.browser }})
+        id: playwright
+        run: |
+          # Run tests with both HTML and JSON reporters
+          PLAYWRIGHT_JSON_OUTPUT_NAME=playwright-report/report.json \
+          pnpm exec playwright test --project=${{ matrix.browser }} \
+            --reporter=list \
+            --reporter=html \
+            --reporter=json
+        working-directory: ComfyUI_frontend
+
+      - uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-report-${{ matrix.browser }}
+          path: ComfyUI_frontend/playwright-report/
+          retention-days: 30
+
+  # Merge sharded test reports
+  merge-reports:
+    needs: [playwright-tests-chromium-sharded]
+    runs-on: ubuntu-latest
+    if: ${{ !cancelled() }}
+    steps:
+      - name: Checkout ComfyUI_frontend
+        uses: actions/checkout@v5
+        with:
+          repository: 'Comfy-Org/ComfyUI_frontend'
+          path: 'ComfyUI_frontend'
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+          cache: 'pnpm'
+          cache-dependency-path: 'ComfyUI_frontend/pnpm-lock.yaml'
+
+      - name: Install dependencies
+        run: |
+          pnpm install --frozen-lockfile
+        working-directory: ComfyUI_frontend
+
+      - name: Download blob reports
+        uses: actions/download-artifact@v4
+        with:
+          path: ComfyUI_frontend/all-blob-reports
+          pattern: blob-report-chromium-*
+          merge-multiple: true
+
+      - name: Merge into HTML Report
+        run: |
+          # Generate HTML report
+          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: playwright-report-chromium
+          path: ComfyUI_frontend/playwright-report/
+          retention-days: 30
+
+  #### BEGIN Deployment and commenting (non-forked PRs only)
+  # when using pull_request event, we have permission to comment directly
+  # if its a forked repo, we need to use workflow_run event in a separate workflow (pr-playwright-deploy.yaml)
+
+  # Post starting comment for non-forked PRs
+  comment-on-pr-start:
+    runs-on: ubuntu-latest
+    if: github.event_name == 'pull_request' && github.event.pull_request.head.repo.fork == false
+    permissions:
+      pull-requests: write
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v5
+        
+      - name: Get start time
+        id: start-time
+        run: echo "time=$(date -u '+%m/%d/%Y, %I:%M:%S %p')" >> $GITHUB_OUTPUT
+        
+      - name: Post starting comment
+        env:
+          GITHUB_TOKEN: ${{ github.token }}
+        run: |
+          chmod +x scripts/cicd/pr-playwright-deploy-and-comment.sh
+          ./scripts/cicd/pr-playwright-deploy-and-comment.sh \
+            "${{ github.event.pull_request.number }}" \
+            "${{ github.head_ref }}" \
+            "starting" \
+            "${{ steps.start-time.outputs.time }}"
+          
+  # Deploy and comment for non-forked PRs only
+  deploy-and-comment:
+    needs: [playwright-tests, merge-reports]
+    runs-on: ubuntu-latest
+    if: always() && github.event_name == 'pull_request' && github.event.pull_request.head.repo.fork == false
+    permissions:
+      pull-requests: write
+      contents: read
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v5
+        
+      - name: Download all playwright reports
+        uses: actions/download-artifact@v4
+        with:
+          pattern: playwright-report-*
+          path: reports
+          
+      - name: Make deployment script executable
+        run: chmod +x scripts/cicd/pr-playwright-deploy-and-comment.sh
+        
+      - name: Deploy reports and comment on PR
+        env:
+          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          GITHUB_TOKEN: ${{ github.token }}
+        run: |
+          ./scripts/cicd/pr-playwright-deploy-and-comment.sh \
+            "${{ github.event.pull_request.number }}" \
+            "${{ github.head_ref }}" \
+            "completed"
+  #### END Deployment and commenting (non-forked PRs only)
--- a/.github/workflows/update-comfy-registry-api-types.yaml
+++ b/.github/workflows/update-comfy-registry-api-types.yaml
@@ -16,7 +16,7 @@ jobs:
      pull-requests: write
    steps:
      - name: Checkout repository
-        uses: actions/checkout@v4
+        uses: actions/checkout@v5

      - name: Install pnpm
        uses: pnpm/action-setup@v4
@@ -50,7 +50,7 @@ jobs:
            comfy-api-repo-${{ runner.os }}-

      - name: Checkout comfy-api repository
-        uses: actions/checkout@v4
+        uses: actions/checkout@v5
        with:
          repository: Comfy-Org/comfy-api
          path: comfy-api
@@ -68,17 +68,18 @@ 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
+          mkdir -p ./packages/registry-types/src
+          pnpm dlx openapi-typescript ./comfy-api/openapi.yml --output ./packages/registry-types/src/comfyRegistryTypes.ts

      - name: Validate generated types
        run: |
-          if [ ! -f ./src/types/comfyRegistryTypes.ts ]; then
+          if [ ! -f ./packages/registry-types/src/comfyRegistryTypes.ts ]; then
            echo "Error: Types file was not generated."
            exit 1
          fi

          # Check if file is not empty
-          if [ ! -s ./src/types/comfyRegistryTypes.ts ]; then
+          if [ ! -s ./packages/registry-types/src/comfyRegistryTypes.ts ]; then
            echo "Error: Generated types file is empty."
            exit 1
          fi
@@ -86,12 +87,12 @@ jobs:
      - name: Lint generated types
        run: |
          echo "Linting generated Comfy Registry API types..."
-          pnpm lint:fix:no-cache -- ./src/types/comfyRegistryTypes.ts
+          pnpm lint:fix:no-cache -- ./packages/registry-types/src/comfyRegistryTypes.ts

      - name: Check for changes
        id: check-changes
        run: |
-          if [[ -z $(git status --porcelain ./src/types/comfyRegistryTypes.ts) ]]; then
+          if [[ -z $(git status --porcelain ./packages/registry-types/src/comfyRegistryTypes.ts) ]]; then
            echo "No changes to Comfy Registry API types detected."
            echo "changed=false" >> $GITHUB_OUTPUT
            exit 0
@@ -121,4 +122,4 @@ jobs:
          labels: CNR
          delete-branch: true
          add-paths: |
-            src/types/comfyRegistryTypes.ts
+            packages/registry-types/src/comfyRegistryTypes.ts
--- a/.github/workflows/update-comfyui-manager-api-types.yaml
+++ b/.github/workflows/update-comfyui-manager-api-types.yaml
@@ -17,7 +17,7 @@ jobs:
      pull-requests: write
    steps:
      - name: Checkout repository
-        uses: actions/checkout@v4
+        uses: actions/checkout@v5

      - name: Install pnpm
        uses: pnpm/action-setup@v4
@@ -51,7 +51,7 @@ jobs:
            comfyui-manager-repo-${{ runner.os }}-

      - name: Checkout ComfyUI-Manager repository
-        uses: actions/checkout@v4
+        uses: actions/checkout@v5
        with:
          repository: Comfy-Org/ComfyUI-Manager
          path: ComfyUI-Manager
@@ -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-electron-types.yaml
+++ b/.github/workflows/update-electron-types.yaml
@@ -12,7 +12,7 @@ jobs:

    steps:
      - name: Checkout repository
-        uses: actions/checkout@v4
+        uses: actions/checkout@v5

      - name: Install pnpm
        uses: pnpm/action-setup@v4
@@ -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-locales-for-given-custom-node-repository.yaml
+++ b/.github/workflows/update-locales-for-given-custom-node-repository.yaml
@@ -22,23 +22,22 @@ jobs:
    runs-on: ubuntu-latest
    steps:
    - name: Checkout ComfyUI
-      uses: actions/checkout@v4
+      uses: actions/checkout@v5
      with:
        repository: comfyanonymous/ComfyUI
        path: ComfyUI
        ref: master
    - name: Checkout ComfyUI_frontend
-      uses: actions/checkout@v4
+      uses: actions/checkout@v5
      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
+      uses: actions/checkout@v5
      with:
        repository: ${{ inputs.owner }}/${{ inputs.repository }}
        path: 'ComfyUI/custom_nodes/${{ inputs.repository }}'
@@ -78,16 +77,15 @@ jobs:
        python main.py --cpu --multi-user &
        wait-for-it --service 127.0.0.1:8188 -t 600
      working-directory: ComfyUI
-    - name: Install Playwright Browsers
-      run: npx playwright install chromium --with-deps
-      working-directory: ComfyUI_frontend
+    - name: Setup Playwright
+      uses: ./ComfyUI_frontend/.github/actions/setup-playwright
    - name: Start dev server
      # Run electron dev server as it is a superset of the web dev server
      # We do want electron specific UIs to be translated.
      run: pnpm dev:electron &
      working-directory: ComfyUI_frontend
    - name: Capture base i18n
-      run: 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 +98,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/update-locales.yaml
+++ b/.github/workflows/update-locales.yaml
@@ -14,7 +14,8 @@ jobs:
    if: github.event_name == 'workflow_dispatch' || (github.event.pull_request.head.repo.full_name == github.repository && startsWith(github.head_ref, 'version-bump-'))
    runs-on: ubuntu-latest
    steps:
-    - uses: Comfy-Org/ComfyUI_frontend_setup_action@v3
+    - name: Setup Frontend
+      uses: ./.github/actions/setup-frontend
    
    - name: Cache tool outputs
      uses: actions/cache@v4
@@ -25,16 +26,15 @@ jobs:
        key: i18n-tools-cache-${{ runner.os }}-${{ hashFiles('ComfyUI_frontend/pnpm-lock.yaml') }}
        restore-keys: |
          i18n-tools-cache-${{ runner.os }}-
-    - name: Install Playwright Browsers
-      run: npx playwright install chromium --with-deps
-      working-directory: ComfyUI_frontend
+    - name: Setup Playwright
+      uses: ./.github/actions/setup-playwright
    - name: Start dev server
      # Run electron dev server as it is a superset of the web dev server
      # We do want electron specific UIs to be translated.
      run: pnpm dev:electron &
      working-directory: ComfyUI_frontend
    - name: Update en.json
-      run: pnpm collect-i18n -- scripts/collect-i18n-general.ts
+      run: pnpm collect-i18n
      env:
        PLAYWRIGHT_TEST_URL: http://localhost:5173
      working-directory: ComfyUI_frontend
--- a/.github/workflows/update-node-definitions-locales.yaml
+++ b/.github/workflows/update-node-definitions-locales.yaml
@@ -14,9 +14,8 @@ jobs:
    runs-on: ubuntu-latest
    steps:
    - uses: Comfy-Org/ComfyUI_frontend_setup_action@v3
-    - name: Install Playwright Browsers
-      run: npx playwright install chromium --with-deps
-      working-directory: ComfyUI_frontend
+    - name: Setup Playwright
+      uses: ./.github/actions/setup-playwright
    - name: Start dev server
      # Run electron dev server as it is a superset of the web dev server
      # We do want electron specific UIs to be translated.
--- a/.github/workflows/update-playwright-expectations.yaml
+++ b/.github/workflows/update-playwright-expectations.yaml
@@ -10,13 +10,15 @@ jobs:
    runs-on: ubuntu-latest
    if: github.event.label.name == 'New Browser Test Expectations'
    steps:
-    - uses: Comfy-Org/ComfyUI_frontend_setup_action@v3
-    - name: Install Playwright Browsers
-      run: npx playwright install chromium --with-deps
-      working-directory: ComfyUI_frontend
+    - name: Checkout workflow repo
+      uses: actions/checkout@v5
+    - name: Setup Frontend
+      uses: ./.github/actions/setup-frontend
+    - name: Setup Playwright
+      uses: ./.github/actions/setup-playwright
    - 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
@@ -37,6 +39,6 @@ jobs:
        git fetch origin ${{ github.head_ref }}
        git checkout -B ${{ github.head_ref }} origin/${{ github.head_ref }}
        git add browser_tests
-        git commit -m "Update test expectations [skip ci]"
+        git commit -m "[automated] Update test expectations"
        git push origin HEAD:${{ github.head_ref }}
      working-directory: ComfyUI_frontend
--- a/.github/workflows/validate-json.yaml
+++ b/.github/workflows/validate-json.yaml
@@ -0,0 +1,15 @@
+name: Validate JSON
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+
+jobs:
+  json-lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v5
+      - name: Validate JSON syntax
+        run: ./scripts/cicd/check-json.sh
--- a/.github/workflows/version-bump-desktop-ui.yaml
+++ b/.github/workflows/version-bump-desktop-ui.yaml
@@ -0,0 +1,71 @@
+name: Version Bump Desktop UI
+
+on:
+  workflow_dispatch:
+    inputs:
+      version_type:
+        description: 'Version increment type'
+        required: true
+        default: 'patch'
+        type: 'choice'
+        options: [patch, minor, major, prepatch, preminor, premajor, prerelease]
+      pre_release:
+        description: Pre-release ID (suffix)
+        required: false
+        default: ''
+        type: string
+
+jobs:
+  bump-version-desktop-ui:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      pull-requests: write
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v5
+        with:
+          persist-credentials: false
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v5
+        with:
+          node-version: '24.x'
+          cache: 'pnpm'
+
+      - name: Bump desktop-ui version
+        id: bump-version
+        env:
+          VERSION_TYPE: ${{ github.event.inputs.version_type }}
+          PRE_RELEASE: ${{ github.event.inputs.pre_release }}
+        run: |
+          pnpm -C apps/desktop-ui version "$VERSION_TYPE" --preid "$PRE_RELEASE" --no-git-tag-version
+          NEW_VERSION=$(node -p "require('./apps/desktop-ui/package.json').version")
+          echo "NEW_VERSION=$NEW_VERSION" >> $GITHUB_OUTPUT
+
+      - name: Format PR string
+        id: capitalised
+        env:
+          VERSION_TYPE: ${{ github.event.inputs.version_type }}
+        run: |
+          echo "capitalised=${VERSION_TYPE@u}" >> $GITHUB_OUTPUT
+
+      - name: Create Pull Request
+        uses: peter-evans/create-pull-request@271a8d0340265f705b14b6d32b9829c1cb33d45e
+        with:
+          token: ${{ secrets.PR_GH_TOKEN }}
+          commit-message: '[release] Increment desktop-ui to ${{ steps.bump-version.outputs.NEW_VERSION }}'
+          title: desktop-ui ${{ steps.bump-version.outputs.NEW_VERSION }}
+          body: |
+            ${{ steps.capitalised.outputs.capitalised }} version increment for @comfyorg/desktop-ui to ${{ steps.bump-version.outputs.NEW_VERSION }}
+          branch: desktop-ui-version-bump-${{ steps.bump-version.outputs.NEW_VERSION }}
+          base: main
+          labels: |
+            Release
+
--- a/.github/workflows/version-bump.yaml
+++ b/.github/workflows/version-bump.yaml
@@ -24,7 +24,7 @@ jobs:

    steps:
      - name: Checkout repository
-        uses: actions/checkout@v4
+        uses: actions/checkout@v5

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

 node_modules
 dist
@@ -22,12 +23,16 @@ dist-ssr
 *.local
 # Claude configuration
 .claude/*.local.json
+.claude/*.local.md
+.claude/*.local.txt
+CLAUDE.local.md

 # Editor directories and files
 .vscode/*
 *.code-workspace
 !.vscode/extensions.json
 !.vscode/tailwind.json
+!.vscode/custom-css.json
 !.vscode/settings.json.default
 !.vscode/launch.json.default
 .idea
@@ -43,6 +48,7 @@ components.d.ts
 tests-ui/data/*
 tests-ui/ComfyUI_examples
 tests-ui/workflows/examples
+coverage/

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

 .env

@@ -76,3 +83,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,2 @@
+ignore-workspace-root-check=true
+catalog-mode=prefer
--- a/.nvmrc
+++ b/.nvmrc
@@ -0,0 +1 @@
+24
--- a/.prettierignore
+++ b/.prettierignore
@@ -1,2 +1,2 @@
-src/types/comfyRegistryTypes.ts
-src/types/generatedManagerTypes.ts
+packages/registry-types/src/comfyRegistryTypes.ts
+src/types/generatedManagerTypes.ts
--- a/.storybook/CLAUDE.md
+++ b/.storybook/CLAUDE.md
@@ -4,7 +4,7 @@

 - `pnpm storybook`: Start Storybook development server
 - `pnpm build-storybook`: Build static Storybook
- `pnpm test:component`: Run component tests (includes Storybook components)
+- `pnpm test:unit`: Run unit tests (includes Storybook components)

 ## Development Workflow for Storybook

--- 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'
            )
          }
        }),
@@ -65,11 +76,6 @@ const config: StorybookConfig = {
      },
      build: {
        rollupOptions: {
-          external: () => {
-            // Don't externalize any modules in Storybook build
-            // This ensures PrimeVue and other dependencies are bundled
-            return false
-          },
          onwarn: (warning, warn) => {
            // Suppress specific warnings
            if (
--- 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/.stylelintrc.json
+++ b/.stylelintrc.json
@@ -0,0 +1,73 @@
+{
+  "extends": [],
+  "overrides": [
+    {
+      "files": ["*.vue", "**/*.vue"],
+      "customSyntax": "postcss-html"
+    }
+  ],
+  "rules": {
+    "import-notation": "url",
+    "font-family-no-missing-generic-family-keyword": true,
+    "declaration-block-no-redundant-longhand-properties": true,
+    "declaration-property-value-no-unknown": [
+      true,
+      {
+        "ignoreProperties": {
+          "speak": ["none"],
+          "app-region": ["drag", "no-drag"]
+        }
+      }
+    ],
+    "color-function-notation": "modern",
+    "shorthand-property-no-redundant-values": true,
+    "selector-pseudo-element-colon-notation": "double",
+    "no-duplicate-selectors": true,
+    "font-weight-notation": "numeric",
+    "length-zero-no-unit": true,
+    "color-no-invalid-hex": true,
+    "number-max-precision": 4,
+    "property-no-vendor-prefix": true,
+    "value-no-vendor-prefix": true,
+    "selector-no-vendor-prefix": true,
+    "media-feature-name-no-vendor-prefix": true,
+    "selector-max-universal": 1,
+    "selector-max-type": 2,
+    "declaration-block-no-duplicate-properties": true,
+    "block-no-empty": true,
+    "no-descending-specificity": true,
+    "no-duplicate-at-import-rules": true,
+    "at-rule-no-unknown": [
+      true,
+      {
+        "ignoreAtRules": [
+          "tailwind",
+          "apply",
+          "layer",
+          "config",
+          "theme",
+          "reference",
+          "plugin",
+          "custom-variant",
+          "utility"
+        ]
+      }
+    ],
+    "function-no-unknown": [
+      true,
+      {
+        "ignoreFunctions": [
+          "theme"
+        ]
+      }
+    ]
+  },
+  "ignoreFiles": [
+    "node_modules/**",
+    "dist/**",
+    "playwright-report/**",
+    "public/**",
+    "src/lib/litegraph/**"
+  ],
+  "files": ["**/*.css", "**/*.vue"]
+}
--- a/.vscode/custom-css.json
+++ b/.vscode/custom-css.json
@@ -0,0 +1,50 @@
+{
+  "version": 1.1,
+  "properties": [
+    {
+      "name": "app-region",
+      "description": "Electron-specific CSS property that defines draggable regions in custom title bar windows. Setting 'drag' marks a rectangular area as draggable for moving the window; 'no-drag' excludes areas from the draggable region.",
+      "values": [
+        {
+          "name": "drag",
+          "description": "Marks the element as draggable for moving the Electron window"
+        },
+        {
+          "name": "no-drag",
+          "description": "Excludes the element from being used to drag the Electron window"
+        }
+      ],
+      "references": [
+        {
+          "name": "Electron Window Customization",
+          "url": "https://www.electronjs.org/docs/latest/tutorial/window-customization"
+        }
+      ]
+    },
+    {
+      "name": "speak",
+      "description": "Deprecated CSS2 aural stylesheet property for controlling screen reader speech. Use ARIA attributes instead.",
+      "values": [
+        {
+          "name": "auto",
+          "description": "Content is read aurally if element is not a block and is visible"
+        },
+        {
+          "name": "never",
+          "description": "Content will not be read aurally"
+        },
+        {
+          "name": "always",
+          "description": "Content will be read aurally regardless of display settings"
+        }
+      ],
+      "references": [
+        {
+          "name": "CSS-Tricks Reference",
+          "url": "https://css-tricks.com/almanac/properties/s/speak/"
+        }
+      ],
+      "status": "obsolete"
+    }
+  ]
+}
--- a/.vscode/settings.json.default
+++ b/.vscode/settings.json.default
@@ -1,5 +1,6 @@
 {
  "css.customData": [
-    ".vscode/tailwind.json"
+    ".vscode/tailwind.json",
+    ".vscode/custom-css.json"
  ]
 }
--- a/.vscode/tailwind.json
+++ b/.vscode/tailwind.json
@@ -2,52 +2,92 @@
  "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-directive"
+        }
+      ]
+    },
+    {
+      "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-directive"
+        }
+      ]
+    },
+    {
+      "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/theme#layers"
        }
      ]
    },
    {
      "name": "@apply",
-      "description": "Use the `@apply` directive to inline any existing utility classes into your own custom CSS. This is useful when you find a common utility pattern in your HTML that you’d like to extract to a new component.",
+      "description": "DO NOT USE. IF YOU ARE CAUGHT USING @apply YOU WILL FACE SEVERE CONSEQUENCES.",
      "references": [
        {
          "name": "Tailwind Documentation",
-          "url": "https://tailwindcss.com/docs/functions-and-directives#apply"
+          "url": "https://tailwindcss.com/docs/functions-and-directives#apply-directive"
        }
      ]
    },
    {
-      "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-directive"
        }
      ]
    },
    {
-      "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-directive"
        }
      ]
    },
    {
-      "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-directive"
+        }
+      ]
+    },
+    {
+      "name": "@custom-variant",
+      "description": "Use the `@custom-variant` directive to add a custom variant to your project. Custom variants can be used with utilities like `hover`, `focus`, and responsive breakpoints. Use `@slot` inside the variant to indicate where the utility's styles should be inserted.",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/adding-custom-styles#adding-custom-variants"
+        }
+      ]
+    },
+    {
+      "name": "@utility",
+      "description": "Use the `@utility` directive to add custom utilities to your project. Custom utilities work with all variants like `hover`, `focus`, and responsive variants. Use `--value()` to create functional utilities that accept arguments.",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/adding-custom-styles#adding-custom-utilities"
        }
      ]
    }
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -12,8 +12,7 @@
 - `pnpm dev:electron`: Dev server with Electron API mocks.
 - `pnpm build`: Type-check then production build to `dist/`.
 - `pnpm preview`: Preview the production build locally.
- `pnpm test:unit`: Run Vitest unit tests (`tests-ui/`).
- `pnpm test:component`: Run component tests (`src/components/`).
+- `pnpm test:unit`: Run Vitest unit tests.
 - `pnpm test:browser`: Run Playwright E2E tests (`browser_tests/`).
 - `pnpm lint` / `pnpm lint:fix`: Lint (ESLint). `pnpm format` / `format:check`: Prettier.
 - `pnpm typecheck`: Vue TSC type checking.
@@ -31,10 +30,9 @@
 - Playwright: place tests in `browser_tests/`; optional tags like `@mobile`, `@2x` are respected by config.

 ## Commit & Pull Request Guidelines
- Commits: Prefer Conventional Commits (e.g., `feat(ui): add sidebar`), `refactor(litegraph): …`. Use `[skip ci]` for locale-only updates when appropriate.
- PRs: Include clear description, linked issues (`Fixes #123`), and screenshots/GIFs for UI changes. Add/adjust tests and i18n strings when applicable.
+- Commits: Use `[skip ci]` for locale-only updates when appropriate.
+- PRs: Include clear description, linked issues (`- Fixes #123`), and screenshots/GIFs for UI changes.
 - Quality gates: `pnpm lint`, `pnpm typecheck`, and relevant tests must pass. Keep PRs focused and small.

 ## Security & Configuration Tips
 - Secrets: Use `.env` (see `.env_example`); do not commit secrets.
- Backend: Dev server expects ComfyUI backend at `localhost:8188` by default; configure via `.env`.
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -1,22 +1,51 @@
 # 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 +81,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 +126,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/65
+++ b/65
@@ -1,17 +1,56 @@
-# Admins
-* @Comfy-Org/comfy_frontend_devs
+# Desktop/Electron
+/apps/desktop-ui/                                 @webfiltered
+/src/stores/electronDownloadStore.ts              @webfiltered
+/src/extensions/core/electronAdapter.ts           @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
  
@@ -213,12 +213,6 @@ Here's how Claude Code can use the Playwright MCP server to inspect the interfac
 - `pnpm i` to install all dependencies
 - `pnpm test:unit` to execute all unit tests

-### Component Tests
-
-Component tests verify Vue components in `src/components/`.
-
- `pnpm test:component` to execute all component tests
-
 ### Playwright Tests

 Playwright tests verify the whole app. See [browser_tests/README.md](browser_tests/README.md) for details.
@@ -229,7 +223,6 @@ Before submitting a PR, ensure all tests pass:

 ```bash
 pnpm test:unit
-pnpm test:component
 pnpm test:browser
 pnpm typecheck
 pnpm lint
@@ -265,9 +258,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/apps/desktop-ui/.storybook/main.ts
+++ b/apps/desktop-ui/.storybook/main.ts
@@ -0,0 +1,103 @@
+import type { StorybookConfig } from '@storybook/vue3-vite'
+import { FileSystemIconLoader } from 'unplugin-icons/loaders'
+import IconsResolver from 'unplugin-icons/resolver'
+import Icons from 'unplugin-icons/vite'
+import Components from 'unplugin-vue-components/vite'
+import type { InlineConfig } from 'vite'
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: ['@storybook/addon-docs'],
+  framework: {
+    name: '@storybook/vue3-vite',
+    options: {}
+  },
+  staticDirs: [{ from: '../public', to: '/' }],
+  async viteFinal(config) {
+    // Use dynamic import to avoid CJS deprecation warning
+    const { mergeConfig } = await import('vite')
+    const { default: tailwindcss } = await import('@tailwindcss/vite')
+
+    // Filter out any plugins that might generate import maps
+    if (config.plugins) {
+      config.plugins = config.plugins
+        // Type guard: ensure we have valid plugin objects with names
+        .filter(
+          (plugin): plugin is NonNullable<typeof plugin> & { name: string } => {
+            return (
+              plugin !== null &&
+              plugin !== undefined &&
+              typeof plugin === 'object' &&
+              'name' in plugin &&
+              typeof plugin.name === 'string'
+            )
+          }
+        )
+        // Business logic: filter out import-map plugins
+        .filter((plugin) => !plugin.name.includes('import-map'))
+    }
+
+    return mergeConfig(config, {
+      // Replace plugins entirely to avoid inheritance issues
+      plugins: [
+        // Only include plugins we explicitly need for Storybook
+        tailwindcss(),
+        Icons({
+          compiler: 'vue3',
+          customCollections: {
+            comfy: FileSystemIconLoader(
+              process.cwd() + '/../../packages/design-system/src/icons'
+            )
+          }
+        }),
+        Components({
+          dts: false, // Disable dts generation in Storybook
+          resolvers: [
+            IconsResolver({
+              customCollections: ['comfy']
+            })
+          ],
+          dirs: [
+            process.cwd() + '/src/components',
+            process.cwd() + '/src/views'
+          ],
+          deep: true,
+          extensions: ['vue'],
+          directoryAsNamespace: true
+        })
+      ],
+      server: {
+        allowedHosts: true
+      },
+      resolve: {
+        alias: {
+          '@': process.cwd() + '/src',
+          '@frontend-locales': process.cwd() + '/../../src/locales'
+        }
+      },
+      build: {
+        rollupOptions: {
+          onwarn: (warning, warn) => {
+            // Suppress specific warnings
+            if (
+              warning.code === 'UNUSED_EXTERNAL_IMPORT' &&
+              warning.message?.includes('resolveComponent')
+            ) {
+              return
+            }
+            // Suppress Storybook font asset warnings
+            if (
+              warning.code === 'UNRESOLVED_IMPORT' &&
+              warning.message?.includes('nunito-sans')
+            ) {
+              return
+            }
+            warn(warning)
+          }
+        },
+        chunkSizeWarningLimit: 1000
+      }
+    } satisfies InlineConfig)
+  }
+}
+export default config
--- a/apps/desktop-ui/.storybook/preview.ts
+++ b/apps/desktop-ui/.storybook/preview.ts
@@ -0,0 +1,88 @@
+import { definePreset } from '@primevue/themes'
+import Aura from '@primevue/themes/aura'
+import { setup } from '@storybook/vue3'
+import type { Preview, StoryContext, StoryFn } from '@storybook/vue3-vite'
+import { createPinia } from 'pinia'
+import 'primeicons/primeicons.css'
+import PrimeVue from 'primevue/config'
+import ConfirmationService from 'primevue/confirmationservice'
+import ToastService from 'primevue/toastservice'
+import Tooltip from 'primevue/tooltip'
+
+import '@/assets/css/style.css'
+import { i18n } from '@/i18n'
+
+const ComfyUIPreset = definePreset(Aura, {
+  semantic: {
+    // @ts-expect-error prime type quirk
+    primary: Aura['primitive'].blue
+  }
+})
+
+setup((app) => {
+  app.directive('tooltip', Tooltip)
+
+  const pinia = createPinia()
+
+  app.use(pinia)
+  app.use(i18n)
+  app.use(PrimeVue, {
+    theme: {
+      preset: ComfyUIPreset,
+      options: {
+        prefix: 'p',
+        cssLayer: { name: 'primevue', order: 'primevue, tailwind-utilities' },
+        darkModeSelector: '.dark-theme, :root:has(.dark-theme)'
+      }
+    }
+  })
+  app.use(ConfirmationService)
+  app.use(ToastService)
+})
+
+export const withTheme = (Story: StoryFn, context: StoryContext) => {
+  const theme = context.globals.theme || 'light'
+  if (theme === 'dark') {
+    document.documentElement.classList.add('dark-theme')
+    document.body.classList.add('dark-theme')
+  } else {
+    document.documentElement.classList.remove('dark-theme')
+    document.body.classList.remove('dark-theme')
+  }
+
+  return Story(context.args, context)
+}
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: { color: /(background|color)$/i, date: /Date$/i }
+    },
+    backgrounds: {
+      default: 'light',
+      values: [
+        { name: 'light', value: '#ffffff' },
+        { name: 'dark', value: '#0a0a0a' }
+      ]
+    }
+  },
+  globalTypes: {
+    theme: {
+      name: 'Theme',
+      description: 'Global theme for components',
+      defaultValue: 'light',
+      toolbar: {
+        icon: 'circlehollow',
+        items: [
+          { value: 'light', icon: 'sun', title: 'Light' },
+          { value: 'dark', icon: 'moon', title: 'Dark' }
+        ],
+        showName: true,
+        dynamicTitle: true
+      }
+    }
+  },
+  decorators: [withTheme]
+}
+
+export default preview
--- a/apps/desktop-ui/index.html
+++ b/apps/desktop-ui/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>ComfyUI Desktop</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
+  </head>
+  <body>
+    <div id="desktop-app"></div>
+    <script type="module" src="src/main.ts"></script>
+  </body>
+</html>
--- a/apps/desktop-ui/package.json
+++ b/apps/desktop-ui/package.json
@@ -0,0 +1,117 @@
+{
+  "name": "@comfyorg/desktop-ui",
+  "version": "0.0.1",
+  "type": "module",
+  "nx": {
+    "tags": [
+      "scope:desktop",
+      "type:app"
+    ],
+    "targets": {
+      "dev": {
+        "executor": "nx:run-commands",
+        "continuous": true,
+        "options": {
+          "cwd": "apps/desktop-ui",
+          "command": "vite --config vite.config.mts"
+        }
+      },
+      "serve": {
+        "executor": "nx:run-commands",
+        "continuous": true,
+        "options": {
+          "cwd": "apps/desktop-ui",
+          "command": "vite --config vite.config.mts"
+        }
+      },
+      "build": {
+        "executor": "nx:run-commands",
+        "cache": true,
+        "dependsOn": [
+          "^build"
+        ],
+        "options": {
+          "cwd": "apps/desktop-ui",
+          "command": "vite build --config vite.config.mts"
+        },
+        "outputs": [
+          "{projectRoot}/dist"
+        ]
+      },
+      "preview": {
+        "executor": "nx:run-commands",
+        "continuous": true,
+        "dependsOn": [
+          "build"
+        ],
+        "options": {
+          "cwd": "apps/desktop-ui",
+          "command": "vite preview --config vite.config.mts"
+        }
+      },
+      "storybook": {
+        "executor": "nx:run-commands",
+        "continuous": true,
+        "options": {
+          "cwd": "apps/desktop-ui",
+          "command": "storybook dev -p 6007"
+        }
+      },
+      "build-storybook": {
+        "executor": "nx:run-commands",
+        "cache": true,
+        "options": {
+          "cwd": "apps/desktop-ui",
+          "command": "storybook build -o dist/storybook"
+        },
+        "outputs": [
+          "{projectRoot}/dist/storybook"
+        ]
+      },
+      "lint": {
+        "executor": "nx:run-commands",
+        "cache": true,
+        "options": {
+          "cwd": "apps/desktop-ui",
+          "command": "eslint src --cache"
+        }
+      },
+      "typecheck": {
+        "executor": "nx:run-commands",
+        "cache": true,
+        "options": {
+          "cwd": "apps/desktop-ui",
+          "command": "vue-tsc --noEmit -p tsconfig.json"
+        }
+      }
+    }
+  },
+  "scripts": {
+    "storybook": "storybook dev -p 6007",
+    "build-storybook": "storybook build -o dist/storybook"
+  },
+  "dependencies": {
+    "@comfyorg/comfyui-electron-types": "0.4.73-0",
+    "@comfyorg/shared-frontend-utils": "workspace:*",
+    "@primevue/core": "catalog:",
+    "@primevue/themes": "catalog:",
+    "@vueuse/core": "catalog:",
+    "pinia": "catalog:",
+    "primeicons": "catalog:",
+    "primevue": "catalog:",
+    "vue": "catalog:",
+    "vue-i18n": "catalog:",
+    "vue-router": "catalog:"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "catalog:",
+    "@vitejs/plugin-vue": "catalog:",
+    "dotenv": "catalog:",
+    "unplugin-icons": "catalog:",
+    "unplugin-vue-components": "catalog:",
+    "vite": "catalog:",
+    "vite-plugin-html": "catalog:",
+    "vite-plugin-vue-devtools": "catalog:",
+    "vue-tsc": "catalog:"
+  }
+}
--- a/apps/desktop-ui/public/assets/images/Git-Logo-White.svg
+++ b/apps/desktop-ui/public/assets/images/Git-Logo-White.svg
--- a/apps/desktop-ui/public/assets/images/apple-mps-logo.png
+++ b/apps/desktop-ui/public/assets/images/apple-mps-logo.png
--- a/apps/desktop-ui/public/assets/images/comfy-brand-mark.svg
+++ b/apps/desktop-ui/public/assets/images/comfy-brand-mark.svg
--- a/apps/desktop-ui/public/assets/images/nvidia-logo-square.jpg
+++ b/apps/desktop-ui/public/assets/images/nvidia-logo-square.jpg
--- a/apps/desktop-ui/public/assets/images/sad_girl.png
+++ b/apps/desktop-ui/public/assets/images/sad_girl.png
--- a/apps/desktop-ui/src/App.vue
+++ b/apps/desktop-ui/src/App.vue
@@ -0,0 +1,7 @@
+<template>
+  <RouterView />
+</template>
+
+<script setup lang="ts">
+import { RouterView } from 'vue-router'
+</script>
--- a/apps/desktop-ui/src/assets/css/style.css
+++ b/apps/desktop-ui/src/assets/css/style.css
@@ -0,0 +1,6 @@
+@import '@comfyorg/design-system/css/style.css';
+
+#desktop-app {
+  position: absolute;
+  inset: 0;
+}
--- a/apps/desktop-ui/src/components/bottomPanel/tabs/terminal/BaseTerminal.vue
+++ b/apps/desktop-ui/src/components/bottomPanel/tabs/terminal/BaseTerminal.vue
@@ -0,0 +1,113 @@
+<template>
+  <div
+    ref="rootEl"
+    class="relative overflow-hidden h-full w-full bg-neutral-900"
+  >
+    <div class="p-terminal rounded-none h-full w-full p-2">
+      <div ref="terminalEl" class="h-full terminal-host" />
+    </div>
+    <Button
+      v-tooltip.left="{
+        value: tooltipText,
+        showDelay: 300
+      }"
+      icon="pi pi-copy"
+      severity="secondary"
+      size="small"
+      :class="
+        cn('absolute top-2 right-8 transition-opacity', {
+          'opacity-0 pointer-events-none select-none': !isHovered
+        })
+      "
+      :aria-label="tooltipText"
+      @click="handleCopy"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useElementHover, useEventListener } from '@vueuse/core'
+import type { IDisposable } from '@xterm/xterm'
+import Button from 'primevue/button'
+import type { Ref } from 'vue'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { useTerminal } from '@/composables/bottomPanelTabs/useTerminal'
+import { electronAPI, isElectron } from '@/utils/envUtil'
+import { cn } from '@/utils/tailwindUtil'
+
+const { t } = useI18n()
+
+const emit = defineEmits<{
+  created: [ReturnType<typeof useTerminal>, Ref<HTMLElement | undefined>]
+  unmounted: []
+}>()
+const terminalEl = ref<HTMLElement | undefined>()
+const rootEl = ref<HTMLElement | undefined>()
+const hasSelection = ref(false)
+
+const isHovered = useElementHover(rootEl)
+
+const terminalData = useTerminal(terminalEl)
+emit('created', terminalData, ref(rootEl))
+
+const { terminal } = terminalData
+let selectionDisposable: IDisposable | undefined
+
+const tooltipText = computed(() => {
+  return hasSelection.value
+    ? t('serverStart.copySelectionTooltip')
+    : t('serverStart.copyAllTooltip')
+})
+
+const handleCopy = async () => {
+  const existingSelection = terminal.getSelection()
+  const shouldSelectAll = !existingSelection
+  if (shouldSelectAll) terminal.selectAll()
+
+  const selectedText = shouldSelectAll
+    ? terminal.getSelection()
+    : existingSelection
+
+  if (selectedText) {
+    await navigator.clipboard.writeText(selectedText)
+
+    if (shouldSelectAll) {
+      terminal.clearSelection()
+    }
+  }
+}
+
+const showContextMenu = (event: MouseEvent) => {
+  event.preventDefault()
+  electronAPI()?.showContextMenu({ type: 'text' })
+}
+
+if (isElectron()) {
+  useEventListener(terminalEl, 'contextmenu', showContextMenu)
+}
+
+onMounted(() => {
+  selectionDisposable = terminal.onSelectionChange(() => {
+    hasSelection.value = terminal.hasSelection()
+  })
+})
+
+onUnmounted(() => {
+  selectionDisposable?.dispose()
+  emit('unmounted')
+})
+</script>
+
+<style scoped>
+@reference '../../../../assets/css/style.css';
+
+:deep(.p-terminal) .xterm {
+  @apply overflow-hidden;
+}
+
+:deep(.p-terminal) .xterm-screen {
+  @apply bg-neutral-900 overflow-hidden;
+}
+</style>
--- a/apps/desktop-ui/src/components/common/RefreshButton.vue
+++ b/apps/desktop-ui/src/components/common/RefreshButton.vue
@@ -32,7 +32,7 @@
 import Button from 'primevue/button'
 import ProgressSpinner from 'primevue/progressspinner'

-import { PrimeVueSeverity } from '@/types/primeVueTypes'
+import type { PrimeVueSeverity } from '@/types/primeVueTypes'

 const {
  disabled,
--- a/apps/desktop-ui/src/components/common/StartupDisplay.vue
+++ b/apps/desktop-ui/src/components/common/StartupDisplay.vue
@@ -0,0 +1,71 @@
+<template>
+  <div :class="wrapperClass">
+    <div class="grid grid-rows-2 gap-8">
+      <!-- Top container: Logo -->
+      <div class="flex items-end justify-center">
+        <img
+          src="/assets/images/comfy-brand-mark.svg"
+          :alt="t('g.logoAlt')"
+          class="w-60"
+        />
+      </div>
+      <!-- Bottom container: Progress and text -->
+      <div class="flex flex-col items-center justify-center gap-4">
+        <ProgressBar
+          v-if="!hideProgress"
+          :mode="progressMode"
+          :value="progressPercentage ?? 0"
+          :show-value="false"
+          class="w-90 h-2 mt-8"
+          :pt="{ value: { class: 'bg-brand-yellow' } }"
+        />
+        <h1 v-if="title" class="font-inter font-bold text-3xl text-neutral-300">
+          {{ title }}
+        </h1>
+        <p v-if="statusText" class="text-lg text-neutral-400">
+          {{ statusText }}
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import ProgressBar from 'primevue/progressbar'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+
+/** Props for the StartupDisplay component */
+interface StartupDisplayProps {
+  /** Progress: 0-100 for determinate, undefined for indeterminate */
+  progressPercentage?: number
+  /** Main title text */
+  title?: string
+  /** Status text shown below the title */
+  statusText?: string
+  /** Hide the progress bar */
+  hideProgress?: boolean
+  /** Use full screen wrapper (default: true) */
+  fullScreen?: boolean
+}
+
+const {
+  progressPercentage,
+  title,
+  statusText,
+  hideProgress = false,
+  fullScreen = true
+} = defineProps<StartupDisplayProps>()
+
+const progressMode = computed(() =>
+  progressPercentage === undefined ? 'indeterminate' : 'determinate'
+)
+
+const wrapperClass = computed(() =>
+  fullScreen
+    ? 'flex items-center justify-center min-h-screen'
+    : 'flex items-center justify-center'
+)
+</script>
--- a/apps/desktop-ui/src/components/common/UrlInput.vue
+++ b/apps/desktop-ui/src/components/common/UrlInput.vue
@@ -0,0 +1,129 @@
+<template>
+  <IconField class="w-full">
+    <InputText
+      v-bind="$attrs"
+      :model-value="internalValue"
+      class="w-full"
+      :invalid="validationState === ValidationState.INVALID"
+      @update:model-value="handleInput"
+      @blur="handleBlur"
+    />
+    <InputIcon
+      :class="{
+        'pi pi-spin pi-spinner text-neutral-400':
+          validationState === ValidationState.LOADING,
+        'pi pi-check text-green-500 cursor-pointer':
+          validationState === ValidationState.VALID,
+        'pi pi-times text-red-500 cursor-pointer':
+          validationState === ValidationState.INVALID
+      }"
+      @click="validateUrl(props.modelValue)"
+    />
+  </IconField>
+</template>
+
+<script setup lang="ts">
+import { isValidUrl } from '@comfyorg/shared-frontend-utils/formatUtil'
+import { checkUrlReachable } from '@comfyorg/shared-frontend-utils/networkUtil'
+import IconField from 'primevue/iconfield'
+import InputIcon from 'primevue/inputicon'
+import InputText from 'primevue/inputtext'
+import { onMounted, ref, watch } from 'vue'
+
+import { ValidationState } from '@/utils/validationUtil'
+
+const props = defineProps<{
+  modelValue: string
+  validateUrlFn?: (url: string) => Promise<boolean>
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+  'state-change': [state: ValidationState]
+}>()
+
+const validationState = ref<ValidationState>(ValidationState.IDLE)
+
+const cleanInput = (value: string): string =>
+  value ? value.replace(/\s+/g, '') : ''
+
+// Add internal value state
+const internalValue = ref(cleanInput(props.modelValue))
+
+// Watch for external modelValue changes
+watch(
+  () => props.modelValue,
+  async (newValue: string) => {
+    internalValue.value = cleanInput(newValue)
+    await validateUrl(newValue)
+  }
+)
+
+watch(validationState, (newState) => {
+  emit('state-change', newState)
+})
+
+// Validate on mount
+onMounted(async () => {
+  await validateUrl(props.modelValue)
+})
+
+const handleInput = (value: string | undefined) => {
+  // Update internal value without emitting
+  internalValue.value = cleanInput(value ?? '')
+  // Reset validation state when user types
+  validationState.value = ValidationState.IDLE
+}
+
+const handleBlur = async () => {
+  const input = cleanInput(internalValue.value)
+
+  let normalizedUrl = input
+  try {
+    const url = new URL(input)
+    normalizedUrl = url.toString()
+  } catch {
+    // If URL parsing fails, just use the cleaned input
+  }
+
+  // Emit the update only on blur
+  emit('update:modelValue', normalizedUrl)
+}
+
+// Default validation implementation
+const defaultValidateUrl = async (url: string): Promise<boolean> => {
+  if (!isValidUrl(url)) return false
+  try {
+    return await checkUrlReachable(url)
+  } catch {
+    return false
+  }
+}
+
+const validateUrl = async (value: string) => {
+  if (validationState.value === ValidationState.LOADING) return
+
+  const url = cleanInput(value)
+
+  // Reset state
+  validationState.value = ValidationState.IDLE
+
+  // Skip validation if empty
+  if (!url) return
+
+  validationState.value = ValidationState.LOADING
+  try {
+    const isValid = await (props.validateUrlFn ?? defaultValidateUrl)(url)
+    validationState.value = isValid
+      ? ValidationState.VALID
+      : ValidationState.INVALID
+  } catch {
+    validationState.value = ValidationState.INVALID
+  }
+}
+
+// Add inheritAttrs option to prevent attrs from being applied to root element
+defineOptions({
+  inheritAttrs: false
+})
+</script>
--- a/apps/desktop-ui/src/components/install/DesktopSettingsConfiguration.vue
+++ b/apps/desktop-ui/src/components/install/DesktopSettingsConfiguration.vue
@@ -10,14 +10,14 @@
      </p>
    </div>

-    <div class="flex flex-col bg-neutral-800 p-4 rounded-lg">
+    <div class="flex flex-col bg-neutral-800 p-4 rounded-lg text-sm">
      <!-- Auto Update Setting -->
      <div class="flex items-center gap-4">
        <div class="flex-1">
          <h3 class="text-lg font-medium text-neutral-100">
            {{ $t('install.settings.autoUpdate') }}
          </h3>
-          <p class="text-sm text-neutral-400 mt-1">
+          <p class="text-neutral-400 mt-1">
            {{ $t('install.settings.autoUpdateDescription') }}
          </p>
        </div>
@@ -32,14 +32,10 @@
          <h3 class="text-lg font-medium text-neutral-100">
            {{ $t('install.settings.allowMetrics') }}
          </h3>
-          <p class="text-sm text-neutral-400 mt-1">
+          <p class="text-neutral-400">
            {{ $t('install.settings.allowMetricsDescription') }}
          </p>
-          <a
-            href="#"
-            class="text-sm text-blue-400 hover:text-blue-300 mt-1 inline-block"
-            @click.prevent="showMetricsInfo"
-          >
+          <a href="#" @click.prevent="showMetricsInfo">
            {{ $t('install.settings.learnMoreAboutData') }}
          </a>
        </div>
@@ -51,7 +47,9 @@
    <Dialog
      v-model:visible="showDialog"
      modal
+      dismissable-mask
      :header="$t('install.settings.dataCollectionDialog.title')"
+      class="select-none"
    >
      <div class="text-neutral-300">
        <h4 class="font-medium mb-2">
@@ -110,11 +108,7 @@
        </ul>

        <div class="mt-4">
-          <a
-            href="https://comfy.org/privacy"
-            target="_blank"
-            class="text-blue-400 hover:text-blue-300 underline"
-          >
+          <a href="https://comfy.org/privacy" target="_blank">
            {{ $t('install.settings.dataCollectionDialog.viewFullPolicy') }}
          </a>
        </div>
--- a/apps/desktop-ui/src/components/install/GpuPicker.vue
+++ b/apps/desktop-ui/src/components/install/GpuPicker.vue
@@ -0,0 +1,103 @@
+<template>
+  <div
+    class="grid grid-rows-[1fr_auto_auto_1fr] w-full max-w-3xl mx-auto h-[40rem] select-none"
+  >
+    <h2 class="font-inter font-bold text-3xl text-neutral-100 text-center">
+      {{ $t('install.gpuPicker.title') }}
+    </h2>
+
+    <!-- GPU Selection buttons - takes up remaining space and centers content -->
+    <div class="flex-1 flex gap-8 justify-center items-center">
+      <!-- Apple Metal / NVIDIA -->
+      <HardwareOption
+        v-if="platform === 'darwin'"
+        :image-path="'/assets/images/apple-mps-logo.png'"
+        placeholder-text="Apple Metal"
+        subtitle="Apple Metal"
+        :value="'mps'"
+        :selected="selected === 'mps'"
+        :recommended="true"
+        @click="pickGpu('mps')"
+      />
+      <HardwareOption
+        v-else
+        :image-path="'/assets/images/nvidia-logo-square.jpg'"
+        placeholder-text="NVIDIA"
+        :subtitle="$t('install.gpuPicker.nvidiaSubtitle')"
+        :value="'nvidia'"
+        :selected="selected === 'nvidia'"
+        :recommended="true"
+        @click="pickGpu('nvidia')"
+      />
+      <!-- CPU -->
+      <HardwareOption
+        placeholder-text="CPU"
+        :subtitle="$t('install.gpuPicker.cpuSubtitle')"
+        :value="'cpu'"
+        :selected="selected === 'cpu'"
+        @click="pickGpu('cpu')"
+      />
+      <!-- Manual Install -->
+      <HardwareOption
+        placeholder-text="Manual Install"
+        :subtitle="$t('install.gpuPicker.manualSubtitle')"
+        :value="'unsupported'"
+        :selected="selected === 'unsupported'"
+        @click="pickGpu('unsupported')"
+      />
+    </div>
+
+    <div class="pt-12 px-24 h-16">
+      <div v-show="showRecommendedBadge" class="flex items-center gap-2">
+        <Tag
+          :value="$t('install.gpuPicker.recommended')"
+          class="bg-neutral-300 text-neutral-900 rounded-full text-sm font-bold px-2 py-[1px]"
+        />
+        <i-lucide:badge-check class="text-neutral-300 text-lg" />
+      </div>
+    </div>
+
+    <div class="text-neutral-300 px-24">
+      <p v-show="descriptionText" class="leading-relaxed">
+        {{ descriptionText }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { TorchDeviceType } from '@comfyorg/comfyui-electron-types'
+import Tag from 'primevue/tag'
+import { computed } from 'vue'
+
+import HardwareOption from '@/components/install/HardwareOption.vue'
+import { st } from '@/i18n'
+import { electronAPI } from '@/utils/envUtil'
+
+const selected = defineModel<TorchDeviceType | null>('device', {
+  required: true
+})
+
+const electron = electronAPI()
+const platform = electron.getPlatform()
+
+const showRecommendedBadge = computed(
+  () => selected.value === 'mps' || selected.value === 'nvidia'
+)
+
+const descriptionKeys = {
+  mps: 'appleMetal',
+  nvidia: 'nvidia',
+  cpu: 'cpu',
+  unsupported: 'manual'
+} as const
+
+const descriptionText = computed(() => {
+  const key = selected.value ? descriptionKeys[selected.value] : undefined
+  return st(`install.gpuPicker.${key}Description`, '')
+})
+
+const pickGpu = (value: TorchDeviceType) => {
+  selected.value = value
+}
+</script>
--- a/apps/desktop-ui/src/components/install/HardwareOption.stories.ts
+++ b/apps/desktop-ui/src/components/install/HardwareOption.stories.ts
@@ -0,0 +1,73 @@
+// eslint-disable-next-line storybook/no-renderer-packages
+import type { Meta, StoryObj } from '@storybook/vue3'
+
+import HardwareOption from './HardwareOption.vue'
+
+const meta: Meta<typeof HardwareOption> = {
+  title: 'Desktop/Components/HardwareOption',
+  component: HardwareOption,
+  parameters: {
+    layout: 'centered',
+    backgrounds: {
+      default: 'dark',
+      values: [{ name: 'dark', value: '#1a1a1a' }]
+    }
+  },
+  argTypes: {
+    selected: { control: 'boolean' },
+    imagePath: { control: 'text' },
+    placeholderText: { control: 'text' },
+    subtitle: { control: 'text' }
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const AppleMetalSelected: Story = {
+  args: {
+    imagePath: '/assets/images/apple-mps-logo.png',
+    placeholderText: 'Apple Metal',
+    subtitle: 'Apple Metal',
+    value: 'mps',
+    selected: true
+  }
+}
+
+export const AppleMetalUnselected: Story = {
+  args: {
+    imagePath: '/assets/images/apple-mps-logo.png',
+    placeholderText: 'Apple Metal',
+    subtitle: 'Apple Metal',
+    value: 'mps',
+    selected: false
+  }
+}
+
+export const CPUOption: Story = {
+  args: {
+    placeholderText: 'CPU',
+    subtitle: 'Subtitle',
+    value: 'cpu',
+    selected: false
+  }
+}
+
+export const ManualInstall: Story = {
+  args: {
+    placeholderText: 'Manual Install',
+    subtitle: 'Subtitle',
+    value: 'unsupported',
+    selected: false
+  }
+}
+
+export const NvidiaSelected: Story = {
+  args: {
+    imagePath: '/assets/images/nvidia-logo-square.jpg',
+    placeholderText: 'NVIDIA',
+    subtitle: 'NVIDIA',
+    value: 'nvidia',
+    selected: true
+  }
+}
--- a/apps/desktop-ui/src/components/install/HardwareOption.vue
+++ b/apps/desktop-ui/src/components/install/HardwareOption.vue
@@ -0,0 +1,55 @@
+<template>
+  <div class="relative">
+    <!-- Recommended Badge -->
+    <button
+      :class="
+        cn(
+          'hardware-option w-[170px] h-[190px] p-5 flex flex-col items-center rounded-3xl transition-all duration-200 bg-neutral-900/70 border-4',
+          selected ? 'border-solid border-brand-yellow' : 'border-transparent'
+        )
+      "
+      @click="$emit('click')"
+    >
+      <!-- Icon/Logo Area - Rounded square container -->
+      <div
+        class="icon-container w-[110px] h-[110px] shrink-0 rounded-2xl bg-neutral-800 flex items-center justify-center overflow-hidden"
+      >
+        <img
+          v-if="imagePath"
+          :src="imagePath"
+          :alt="placeholderText"
+          class="w-full h-full object-cover"
+          style="object-position: 57% center"
+          draggable="false"
+        />
+        <span v-else class="text-xl font-medium text-neutral-400">
+          {{ placeholderText }}
+        </span>
+      </div>
+
+      <!-- Text Content -->
+      <div v-if="subtitle" class="text-center mt-4">
+        <div class="text-sm text-neutral-500">{{ subtitle }}</div>
+      </div>
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { TorchDeviceType } from '@comfyorg/comfyui-electron-types'
+
+import { cn } from '@/utils/tailwindUtil'
+
+interface Props {
+  imagePath?: string
+  placeholderText: string
+  subtitle?: string
+  value: TorchDeviceType
+  selected?: boolean
+  recommended?: boolean
+}
+
+defineProps<Props>()
+
+defineEmits<{ click: [] }>()
+</script>
--- a/apps/desktop-ui/src/components/install/InstallFooter.vue
+++ b/apps/desktop-ui/src/components/install/InstallFooter.vue
@@ -0,0 +1,79 @@
+<template>
+  <div class="grid grid-cols-[1fr_auto_1fr] items-center gap-4">
+    <!-- Back button -->
+    <Button
+      v-if="currentStep !== '1'"
+      :label="$t('g.back')"
+      severity="secondary"
+      icon="pi pi-arrow-left"
+      class="font-inter rounded-lg border-0 px-6 py-2 justify-self-start"
+      @click="$emit('previous')"
+    />
+    <div v-else></div>
+
+    <!-- Step indicators in center -->
+    <StepList class="flex justify-center items-center gap-3 select-none">
+      <Step value="1" :pt="stepPassthrough">
+        {{ $t('install.gpu') }}
+      </Step>
+      <Step value="2" :disabled="disableLocationStep" :pt="stepPassthrough">
+        {{ $t('install.installLocation') }}
+      </Step>
+      <Step value="3" :disabled="disableSettingsStep" :pt="stepPassthrough">
+        {{ $t('install.desktopSettings') }}
+      </Step>
+    </StepList>
+
+    <!-- Next/Install button -->
+    <Button
+      :label="currentStep !== '3' ? $t('g.next') : $t('g.install')"
+      class="px-8 py-2 bg-brand-yellow hover:bg-brand-yellow/90 font-inter rounded-lg border-0 transition-colors justify-self-end"
+      :pt="{
+        label: { class: 'text-neutral-900 font-inter font-black' }
+      }"
+      :disabled="!canProceed"
+      @click="currentStep !== '3' ? $emit('next') : $emit('install')"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { PassThrough } from '@primevue/core'
+import Button from 'primevue/button'
+import Step, { type StepPassThroughOptions } from 'primevue/step'
+import StepList from 'primevue/steplist'
+
+defineProps<{
+  /** Current step index as string ('1', '2', '3', '4') */
+  currentStep: string
+  /** Whether the user can proceed to the next step */
+  canProceed: boolean
+  /** Whether the location step should be disabled */
+  disableLocationStep: boolean
+  /** Whether the migration step should be disabled */
+  disableMigrationStep: boolean
+  /** Whether the settings step should be disabled */
+  disableSettingsStep: boolean
+}>()
+
+defineEmits<{
+  previous: []
+  next: []
+  install: []
+}>()
+
+const stepPassthrough: PassThrough<StepPassThroughOptions> = {
+  root: { class: 'flex-none p-0 m-0' },
+  header: ({ context }) => ({
+    class: [
+      'h-2.5 p-0 m-0 border-0 rounded-full transition-all duration-300',
+      context.active
+        ? 'bg-brand-yellow w-8 rounded-sm'
+        : 'bg-neutral-700 w-2.5',
+      context.disabled ? 'opacity-60 cursor-not-allowed' : ''
+    ].join(' ')
+  }),
+  number: { class: 'hidden' },
+  title: { class: 'hidden' }
+}
+</script>
--- a/apps/desktop-ui/src/components/install/InstallLocationPicker.stories.ts
+++ b/apps/desktop-ui/src/components/install/InstallLocationPicker.stories.ts
@@ -0,0 +1,148 @@
+// eslint-disable-next-line storybook/no-renderer-packages
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { ref } from 'vue'
+
+import InstallLocationPicker from './InstallLocationPicker.vue'
+
+const meta: Meta<typeof InstallLocationPicker> = {
+  title: 'Desktop/Components/InstallLocationPicker',
+  component: InstallLocationPicker,
+  parameters: {
+    layout: 'padded',
+    backgrounds: {
+      default: 'dark',
+      values: [
+        { name: 'dark', value: '#0a0a0a' },
+        { name: 'neutral-900', value: '#171717' },
+        { name: 'neutral-950', value: '#0a0a0a' }
+      ]
+    }
+  },
+  decorators: [
+    () => {
+      // Mock electron API
+      ;(window as any).electronAPI = {
+        getSystemPaths: () =>
+          Promise.resolve({
+            defaultInstallPath: '/Users/username/ComfyUI'
+          }),
+        validateInstallPath: () =>
+          Promise.resolve({
+            isValid: true,
+            exists: false,
+            canWrite: true,
+            freeSpace: 100000000000,
+            requiredSpace: 10000000000,
+            isNonDefaultDrive: false
+          }),
+        validateComfyUISource: () =>
+          Promise.resolve({
+            isValid: true
+          }),
+        showDirectoryPicker: () => Promise.resolve('/Users/username/ComfyUI')
+      }
+      return { template: '<story />' }
+    }
+  ]
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+// Default story with accordion expanded
+export const Default: Story = {
+  render: (args) => ({
+    components: { InstallLocationPicker },
+    setup() {
+      const installPath = ref('/Users/username/ComfyUI')
+      const pathError = ref('')
+      const migrationSourcePath = ref('/Users/username/ComfyUI-old')
+      const migrationItemIds = ref<string[]>(['models', 'custom_nodes'])
+
+      return {
+        args,
+        installPath,
+        pathError,
+        migrationSourcePath,
+        migrationItemIds
+      }
+    },
+    template: `
+      <div class="min-h-screen bg-neutral-950 p-8">
+        <InstallLocationPicker
+          v-model:installPath="installPath"
+          v-model:pathError="pathError"
+          v-model:migrationSourcePath="migrationSourcePath"
+          v-model:migrationItemIds="migrationItemIds"
+        />
+      </div>
+    `
+  })
+}
+
+// Story with different background to test transparency
+export const OnNeutral900: Story = {
+  render: (args) => ({
+    components: { InstallLocationPicker },
+    setup() {
+      const installPath = ref('/Users/username/ComfyUI')
+      const pathError = ref('')
+      const migrationSourcePath = ref('/Users/username/ComfyUI-old')
+      const migrationItemIds = ref<string[]>(['models', 'custom_nodes'])
+
+      return {
+        args,
+        installPath,
+        pathError,
+        migrationSourcePath,
+        migrationItemIds
+      }
+    },
+    template: `
+      <div class="min-h-screen bg-neutral-900 p-8">
+        <InstallLocationPicker
+          v-model:installPath="installPath"
+          v-model:pathError="pathError"
+          v-model:migrationSourcePath="migrationSourcePath"
+          v-model:migrationItemIds="migrationItemIds"
+        />
+      </div>
+    `
+  })
+}
+
+// Story with debug overlay showing background colors
+export const DebugBackgrounds: Story = {
+  render: (args) => ({
+    components: { InstallLocationPicker },
+    setup() {
+      const installPath = ref('/Users/username/ComfyUI')
+      const pathError = ref('')
+      const migrationSourcePath = ref('/Users/username/ComfyUI-old')
+      const migrationItemIds = ref<string[]>(['models', 'custom_nodes'])
+
+      return {
+        args,
+        installPath,
+        pathError,
+        migrationSourcePath,
+        migrationItemIds
+      }
+    },
+    template: `
+      <div class="min-h-screen bg-neutral-950 p-8 relative">
+        <div class="absolute top-4 right-4 text-white text-xs space-y-2 z-50">
+          <div>Parent bg: neutral-950 (#0a0a0a)</div>
+          <div>Accordion content: bg-transparent</div>
+          <div>Migration options: bg-transparent + p-4 rounded-lg</div>
+        </div>
+        <InstallLocationPicker
+          v-model:installPath="installPath"
+          v-model:pathError="pathError"
+          v-model:migrationSourcePath="migrationSourcePath"
+          v-model:migrationItemIds="migrationItemIds"
+        />
+      </div>
+    `
+  })
+}
--- a/apps/desktop-ui/src/components/install/InstallLocationPicker.vue
+++ b/apps/desktop-ui/src/components/install/InstallLocationPicker.vue
@@ -0,0 +1,314 @@
+<template>
+  <div class="flex flex-col gap-8 w-full max-w-3xl mx-auto select-none">
+    <!-- Installation Path Section -->
+    <div class="grow flex flex-col gap-6 text-neutral-300">
+      <h2 class="font-inter font-bold text-3xl text-neutral-100 text-center">
+        {{ $t('install.locationPicker.title') }}
+      </h2>
+
+      <p class="text-center text-neutral-400 px-12">
+        {{ $t('install.locationPicker.subtitle') }}
+      </p>
+
+      <!-- Path Input -->
+      <div class="flex gap-2 px-12">
+        <InputText
+          v-model="installPath"
+          :placeholder="$t('install.locationPicker.pathPlaceholder')"
+          class="flex-1 bg-neutral-800/50 border-neutral-700 text-neutral-200 placeholder:text-neutral-500"
+          :class="{ 'p-invalid': pathError }"
+          @update:model-value="validatePath"
+          @focus="onFocus"
+        />
+        <Button
+          icon="pi pi-folder-open"
+          severity="secondary"
+          class="bg-neutral-700 hover:bg-neutral-600 border-0"
+          @click="browsePath"
+        />
+      </div>
+
+      <!-- Error Messages -->
+      <div v-if="pathError || pathExists || nonDefaultDrive" class="px-12">
+        <Message
+          v-if="pathError"
+          severity="error"
+          class="whitespace-pre-line w-full"
+        >
+          {{ pathError }}
+        </Message>
+        <Message v-if="pathExists" severity="warn" class="w-full">
+          {{ $t('install.pathExists') }}
+        </Message>
+        <Message v-if="nonDefaultDrive" severity="warn" class="w-full">
+          {{ $t('install.nonDefaultDrive') }}
+        </Message>
+      </div>
+
+      <!-- Collapsible Sections using PrimeVue Accordion -->
+      <Accordion
+        v-model:value="activeAccordionIndex"
+        :multiple="true"
+        class="location-picker-accordion"
+        :pt="{
+          root: 'bg-transparent border-0',
+          panel: {
+            root: 'border-0 mb-0'
+          },
+          header: {
+            root: 'border-0',
+            content:
+              'text-neutral-400 hover:text-neutral-300 px-4 py-2 flex items-center gap-3',
+            toggleicon: 'text-xs order-first mr-0'
+          },
+          content: {
+            root: 'bg-transparent border-0',
+            content: 'text-neutral-500 text-sm pl-11 pb-3 pt-0'
+          }
+        }"
+      >
+        <AccordionPanel value="0">
+          <AccordionHeader>
+            {{ $t('install.locationPicker.migrateFromExisting') }}
+          </AccordionHeader>
+          <AccordionContent>
+            <MigrationPicker
+              v-model:source-path="migrationSourcePath"
+              v-model:migration-item-ids="migrationItemIds"
+            />
+          </AccordionContent>
+        </AccordionPanel>
+
+        <AccordionPanel value="1">
+          <AccordionHeader>
+            {{ $t('install.locationPicker.chooseDownloadServers') }}
+          </AccordionHeader>
+          <AccordionContent>
+            <template
+              v-for="([item, modelValue], index) in mirrors"
+              :key="item.settingId + item.mirror"
+            >
+              <Divider v-if="index > 0" class="my-8" />
+
+              <MirrorItem
+                v-model="modelValue.value"
+                :item="item"
+                @state-change="validationStates[index] = $event"
+              />
+            </template>
+          </AccordionContent>
+        </AccordionPanel>
+      </Accordion>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { TorchDeviceType } from '@comfyorg/comfyui-electron-types'
+import { TorchMirrorUrl } from '@comfyorg/comfyui-electron-types'
+import { isInChina } from '@comfyorg/shared-frontend-utils/networkUtil'
+import Accordion from 'primevue/accordion'
+import AccordionContent from 'primevue/accordioncontent'
+import AccordionHeader from 'primevue/accordionheader'
+import AccordionPanel from 'primevue/accordionpanel'
+import Button from 'primevue/button'
+import Divider from 'primevue/divider'
+import InputText from 'primevue/inputtext'
+import Message from 'primevue/message'
+import { type ModelRef, computed, onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import MigrationPicker from '@/components/install/MigrationPicker.vue'
+import MirrorItem from '@/components/install/mirror/MirrorItem.vue'
+import {
+  PYPI_MIRROR,
+  PYTHON_MIRROR,
+  type UVMirror
+} from '@/constants/uvMirrors'
+import { electronAPI } from '@/utils/envUtil'
+import { ValidationState } from '@/utils/validationUtil'
+
+const { t } = useI18n()
+
+const installPath = defineModel<string>('installPath', { required: true })
+const pathError = defineModel<string>('pathError', { required: true })
+const migrationSourcePath = defineModel<string>('migrationSourcePath')
+const migrationItemIds = defineModel<string[]>('migrationItemIds')
+const pythonMirror = defineModel<string>('pythonMirror', {
+  default: ''
+})
+const pypiMirror = defineModel<string>('pypiMirror', {
+  default: ''
+})
+const torchMirror = defineModel<string>('torchMirror', {
+  default: ''
+})
+
+const { device } = defineProps<{ device: TorchDeviceType | null }>()
+
+const pathExists = ref(false)
+const nonDefaultDrive = ref(false)
+const inputTouched = ref(false)
+
+// Accordion state - array of active panel values
+const activeAccordionIndex = ref<string[] | undefined>(undefined)
+
+const electron = electronAPI()
+
+// Mirror configuration logic
+const getTorchMirrorItem = (device: TorchDeviceType): UVMirror => {
+  const settingId = 'Comfy-Desktop.UV.TorchInstallMirror'
+  switch (device) {
+    case 'mps':
+      return {
+        settingId,
+        mirror: TorchMirrorUrl.NightlyCpu,
+        fallbackMirror: TorchMirrorUrl.NightlyCpu
+      }
+    case 'nvidia':
+      return {
+        settingId,
+        mirror: TorchMirrorUrl.Cuda,
+        fallbackMirror: TorchMirrorUrl.Cuda
+      }
+    case 'cpu':
+    default:
+      return {
+        settingId,
+        mirror: PYPI_MIRROR.mirror,
+        fallbackMirror: PYPI_MIRROR.fallbackMirror
+      }
+  }
+}
+
+const userIsInChina = ref(false)
+const useFallbackMirror = (mirror: UVMirror) => ({
+  ...mirror,
+  mirror: mirror.fallbackMirror
+})
+
+const mirrors = computed<[UVMirror, ModelRef<string>][]>(() =>
+  (
+    [
+      [PYTHON_MIRROR, pythonMirror],
+      [PYPI_MIRROR, pypiMirror],
+      [getTorchMirrorItem(device ?? 'cpu'), torchMirror]
+    ] as [UVMirror, ModelRef<string>][]
+  ).map(([item, modelValue]) => [
+    userIsInChina.value ? useFallbackMirror(item) : item,
+    modelValue
+  ])
+)
+
+const validationStates = ref<ValidationState[]>(
+  mirrors.value.map(() => ValidationState.IDLE)
+)
+
+// Get default install path on component mount
+onMounted(async () => {
+  const paths = await electron.getSystemPaths()
+  installPath.value = paths.defaultInstallPath
+  await validatePath(paths.defaultInstallPath)
+  userIsInChina.value = await isInChina()
+})
+
+const validatePath = async (path: string | undefined) => {
+  try {
+    pathError.value = ''
+    pathExists.value = false
+    nonDefaultDrive.value = false
+    const validation = await electron.validateInstallPath(path ?? '')
+
+    // Create a pre-formatted list of errors
+    if (!validation.isValid) {
+      const errors: string[] = []
+      if (validation.cannotWrite) errors.push(t('install.cannotWrite'))
+      if (validation.freeSpace < validation.requiredSpace) {
+        const requiredGB = validation.requiredSpace / 1024 / 1024 / 1024
+        errors.push(`${t('install.insufficientFreeSpace')}: ${requiredGB} GB`)
+      }
+      if (validation.parentMissing) errors.push(t('install.parentMissing'))
+      if (validation.isOneDrive) errors.push(t('install.isOneDrive'))
+
+      if (validation.error)
+        errors.push(`${t('install.unhandledError')}: ${validation.error}`)
+      pathError.value = errors.join('\n')
+    }
+
+    if (validation.isNonDefaultDrive) nonDefaultDrive.value = true
+    if (validation.exists) pathExists.value = true
+  } catch (error) {
+    pathError.value = t('install.pathValidationFailed')
+  }
+}
+
+const browsePath = async () => {
+  try {
+    const result = await electron.showDirectoryPicker()
+    if (result) {
+      installPath.value = result
+      await validatePath(result)
+    }
+  } catch (error) {
+    pathError.value = t('install.failedToSelectDirectory')
+  }
+}
+
+const onFocus = async () => {
+  if (!inputTouched.value) {
+    inputTouched.value = true
+    return
+  }
+  // Refresh validation on re-focus
+  await validatePath(installPath.value)
+}
+</script>
+
+<style scoped>
+@reference '../../assets/css/style.css';
+
+:deep(.location-picker-accordion) {
+  @apply px-12;
+
+  .p-accordionpanel {
+    @apply border-0 bg-transparent;
+  }
+
+  .p-accordionheader {
+    @apply bg-neutral-800/50 border-0 rounded-xl mt-2 hover:bg-neutral-700/50;
+    transition:
+      background-color 0.2s ease,
+      border-radius 0.5s ease;
+  }
+
+  /* When panel is expanded, adjust header border radius */
+  .p-accordionpanel-active {
+    .p-accordionheader {
+      @apply rounded-t-xl rounded-b-none;
+    }
+  }
+
+  .p-accordioncontent {
+    @apply bg-neutral-800/50 border-0 rounded-b-xl rounded-t-none;
+  }
+
+  .p-accordioncontent-content {
+    @apply bg-transparent pt-3 pr-5 pb-5 pl-5;
+  }
+
+  /* Override default chevron icons to use up/down */
+  .p-accordionheader-toggle-icon {
+    &::before {
+      content: '\e933';
+    }
+  }
+
+  .p-accordionpanel-active {
+    .p-accordionheader-toggle-icon {
+      &::before {
+        content: '\e902';
+      }
+    }
+  }
+}
+</style>
--- a/apps/desktop-ui/src/components/install/MigrationPicker.stories.ts
+++ b/apps/desktop-ui/src/components/install/MigrationPicker.stories.ts
@@ -0,0 +1,45 @@
+// eslint-disable-next-line storybook/no-renderer-packages
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { ref } from 'vue'
+
+import MigrationPicker from './MigrationPicker.vue'
+
+const meta: Meta<typeof MigrationPicker> = {
+  title: 'Desktop/Components/MigrationPicker',
+  component: MigrationPicker,
+  parameters: {
+    backgrounds: {
+      default: 'dark',
+      values: [
+        { name: 'dark', value: '#0a0a0a' },
+        { name: 'neutral-900', value: '#171717' }
+      ]
+    }
+  },
+  decorators: [
+    () => {
+      ;(window as any).electronAPI = {
+        validateComfyUISource: () => Promise.resolve({ isValid: true }),
+        showDirectoryPicker: () => Promise.resolve('/Users/username/ComfyUI')
+      }
+
+      return { template: '<story />' }
+    }
+  ]
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: () => ({
+    components: { MigrationPicker },
+    setup() {
+      const sourcePath = ref('')
+      const migrationItemIds = ref<string[]>([])
+      return { sourcePath, migrationItemIds }
+    },
+    template:
+      '<MigrationPicker v-model:sourcePath="sourcePath" v-model:migrationItemIds="migrationItemIds" />'
+  })
+}
--- a/apps/desktop-ui/src/components/install/MigrationPicker.vue
+++ b/apps/desktop-ui/src/components/install/MigrationPicker.vue
@@ -2,10 +2,6 @@
  <div class="flex flex-col gap-6 w-[600px]">
    <!-- Source Location Section -->
    <div class="flex flex-col gap-4">
-      <h2 class="text-2xl font-semibold text-neutral-100">
-        {{ $t('install.migrateFromExistingInstallation') }}
-      </h2>
-
      <p class="text-neutral-400 my-0">
        {{ $t('install.migrationSourcePathDescription') }}
      </p>
@@ -13,7 +9,7 @@
      <div class="flex gap-2">
        <InputText
          v-model="sourcePath"
-          placeholder="Select existing ComfyUI installation (optional)"
+          :placeholder="$t('install.locationPicker.migrationPathPlaceholder')"
          class="flex-1"
          :class="{ 'p-invalid': pathError }"
          @update:model-value="validateSource"
@@ -27,10 +23,7 @@
    </div>

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

 <style scoped>
+@reference '../../assets/css/style.css';
+
 .task-card-ok {
  @apply text-green-500 absolute -right-4 -bottom-4 opacity-100 row-span-full col-span-full transition-opacity;

--- a/apps/desktop-ui/src/components/maintenance/TaskListItem.vue
+++ b/apps/desktop-ui/src/components/maintenance/TaskListItem.vue
@@ -47,7 +47,7 @@ import { computed, ref } from 'vue'

 import { useMaintenanceTaskStore } from '@/stores/maintenanceTaskStore'
 import type { MaintenanceTask } from '@/types/desktop/maintenanceTypes'
-import { PrimeVueSeverity } from '@/types/primeVueTypes'
+import type { PrimeVueSeverity } from '@/types/primeVueTypes'
 import { useMinLoadingDurationRef } from '@/utils/refUtil'

 import TaskListStatusIcon from './TaskListStatusIcon.vue'
--- a/apps/desktop-ui/src/components/maintenance/TaskListPanel.vue
+++ b/apps/desktop-ui/src/components/maintenance/TaskListPanel.vue
--- a/apps/desktop-ui/src/components/maintenance/TaskListStatusIcon.vue
+++ b/apps/desktop-ui/src/components/maintenance/TaskListStatusIcon.vue
@@ -8,7 +8,8 @@
 <script setup lang="ts">
 import { PrimeIcons } from '@primevue/core/api'
 import ProgressSpinner from 'primevue/progressspinner'
-import { MaybeRef, computed } from 'vue'
+import type { MaybeRef } from 'vue'
+import { computed } from 'vue'

 import { t } from '@/i18n'

--- a/apps/desktop-ui/src/components/maintenance/TerminalOutputDrawer.vue
+++ b/apps/desktop-ui/src/components/maintenance/TerminalOutputDrawer.vue
@@ -10,9 +10,10 @@
 </template>

 <script setup lang="ts">
-import { Terminal } from '@xterm/xterm'
+import type { Terminal } from '@xterm/xterm'
 import Drawer from 'primevue/drawer'
-import { Ref, onMounted } from 'vue'
+import type { Ref } from 'vue'
+import { onMounted } from 'vue'

 import BaseTerminal from '@/components/bottomPanel/tabs/terminal/BaseTerminal.vue'
 import type { useTerminal } from '@/composables/bottomPanelTabs/useTerminal'
--- a/apps/desktop-ui/src/composables/bottomPanelTabs/useTerminal.ts
+++ b/apps/desktop-ui/src/composables/bottomPanelTabs/useTerminal.ts
@@ -0,0 +1,105 @@
+import { FitAddon } from '@xterm/addon-fit'
+import { Terminal } from '@xterm/xterm'
+import '@xterm/xterm/css/xterm.css'
+import { debounce } from 'es-toolkit/compat'
+import type { Ref } from 'vue'
+import { markRaw, onMounted, onUnmounted } from 'vue'
+
+export function useTerminal(element: Ref<HTMLElement | undefined>) {
+  const fitAddon = new FitAddon()
+  const terminal = markRaw(
+    new Terminal({
+      convertEol: true,
+      theme: { background: '#171717' }
+    })
+  )
+  terminal.loadAddon(fitAddon)
+
+  terminal.attachCustomKeyEventHandler((event) => {
+    // Allow default browser copy/paste handling
+    if (
+      event.type === 'keydown' &&
+      (event.ctrlKey || event.metaKey) &&
+      ((event.key === 'c' && terminal.hasSelection()) || event.key === 'v')
+    ) {
+      // TODO: Deselect text after copy/paste; use IPC.
+      return false
+    }
+    return true
+  })
+
+  onMounted(async () => {
+    if (element.value) {
+      terminal.open(element.value)
+    }
+  })
+
+  onUnmounted(() => {
+    terminal.dispose()
+  })
+
+  return {
+    terminal,
+    useAutoSize({
+      root,
+      autoRows = true,
+      autoCols = true,
+      minCols = Number.NEGATIVE_INFINITY,
+      minRows = Number.NEGATIVE_INFINITY,
+      onResize
+    }: {
+      root: Ref<HTMLElement | undefined>
+      autoRows?: boolean
+      autoCols?: boolean
+      minCols?: number
+      minRows?: number
+      onResize?: () => void
+    }) {
+      const ensureValidRows = (rows: number | undefined): number => {
+        if (rows == null || isNaN(rows)) {
+          return (root.value?.clientHeight ?? 80) / 20
+        }
+        return rows
+      }
+
+      const ensureValidCols = (cols: number | undefined): number => {
+        if (cols == null || isNaN(cols)) {
+          // Sometimes this is NaN if so, estimate.
+          return (root.value?.clientWidth ?? 80) / 8
+        }
+        return cols
+      }
+
+      const resize = () => {
+        const dims = fitAddon.proposeDimensions()
+        // Sometimes propose returns NaN, so we may need to estimate.
+        terminal.resize(
+          Math.max(
+            autoCols ? ensureValidCols(dims?.cols) : terminal.cols,
+            minCols
+          ),
+          Math.max(
+            autoRows ? ensureValidRows(dims?.rows) : terminal.rows,
+            minRows
+          )
+        )
+        onResize?.()
+      }
+
+      const resizeObserver = new ResizeObserver(debounce(resize, 25))
+
+      onMounted(async () => {
+        if (root.value) {
+          resizeObserver.observe(root.value)
+          resize()
+        }
+      })
+
+      onUnmounted(() => {
+        resizeObserver.disconnect()
+      })
+
+      return { resize }
+    }
+  }
+}
--- a/apps/desktop-ui/src/composables/bottomPanelTabs/useTerminalBuffer.ts
+++ b/apps/desktop-ui/src/composables/bottomPanelTabs/useTerminalBuffer.ts
--- a/apps/desktop-ui/src/constants/desktopDialogs.ts
+++ b/apps/desktop-ui/src/constants/desktopDialogs.ts
@@ -0,0 +1,75 @@
+export interface DialogAction {
+  readonly label: string
+  readonly action: 'openUrl' | 'close' | 'cancel'
+  readonly url?: string
+  readonly severity?: 'danger' | 'primary' | 'secondary' | 'warn'
+  readonly returnValue: string
+}
+
+interface DesktopDialog {
+  readonly title: string
+  readonly message: string
+  readonly buttons: DialogAction[]
+}
+
+export const DESKTOP_DIALOGS = {
+  /** Shown when a corrupt venv is detected. */
+  reinstallVenv: {
+    title: 'Reinstall ComfyUI (Fresh Start)?',
+    message: `Sorry, we can't launch ComfyUI because some installed packages aren't compatible.
+
+Click Reinstall to restore ComfyUI and get back up and running.
+
+Please note: if you've added custom nodes, you'll need to reinstall them after this process.`,
+    buttons: [
+      {
+        label: 'Learn More',
+        action: 'openUrl',
+        url: 'https://docs.comfy.org',
+        returnValue: 'openDocs'
+      },
+      {
+        label: 'Reinstall',
+        action: 'close',
+        severity: 'danger',
+        returnValue: 'resetVenv'
+      }
+    ]
+  },
+  /** A dialog that is shown when an invalid dialog ID is provided. */
+  invalidDialog: {
+    title: 'Invalid Dialog',
+    message: `Invalid dialog ID was provided.`,
+    buttons: [
+      {
+        label: 'Close',
+        action: 'cancel',
+        returnValue: 'cancel'
+      }
+    ]
+  }
+} as const satisfies { [K: string]: DesktopDialog }
+
+/** The ID of a desktop dialog. */
+type DesktopDialogId = keyof typeof DESKTOP_DIALOGS
+
+/**
+ * Checks if {@link id} is a valid dialog ID.
+ * @param id The string to check
+ * @returns `true` if the ID is a valid dialog ID, otherwise `false`
+ */
+function isDialogId(id: unknown): id is DesktopDialogId {
+  return typeof id === 'string' && id in DESKTOP_DIALOGS
+}
+
+/**
+ * Gets the dialog with the given ID.
+ * @param dialogId The ID of the dialog to get
+ * @returns The dialog with the given ID
+ */
+export function getDialog(
+  dialogId: string | string[]
+): DesktopDialog & { id: DesktopDialogId } {
+  const id = isDialogId(dialogId) ? dialogId : 'invalidDialog'
+  return { id, ...structuredClone(DESKTOP_DIALOGS[id]) }
+}
--- a/apps/desktop-ui/src/constants/desktopMaintenanceTasks.ts
+++ b/apps/desktop-ui/src/constants/desktopMaintenanceTasks.ts
--- a/apps/desktop-ui/src/constants/uvMirrors.ts
+++ b/apps/desktop-ui/src/constants/uvMirrors.ts
@@ -0,0 +1,34 @@
+export interface UVMirror {
+  /**
+   * The setting id defined for the mirror.
+   */
+  settingId: string
+  /**
+   * The default mirror to use.
+   */
+  mirror: string
+  /**
+   * The fallback mirror to use.
+   */
+  fallbackMirror: string
+  /**
+   * The path suffix to validate the mirror is reachable.
+   */
+  validationPathSuffix?: string
+}
+
+export const PYTHON_MIRROR: UVMirror = {
+  settingId: 'Comfy-Desktop.UV.PythonInstallMirror',
+  mirror:
+    'https://github.com/astral-sh/python-build-standalone/releases/download',
+  fallbackMirror:
+    'https://python-standalone.org/mirror/astral-sh/python-build-standalone',
+  validationPathSuffix:
+    '/20250115/cpython-3.10.16+20250115-aarch64-apple-darwin-debug-full.tar.zst.sha256'
+}
+
+export const PYPI_MIRROR: UVMirror = {
+  settingId: 'Comfy-Desktop.UV.PypiInstallMirror',
+  mirror: 'https://pypi.org/simple/',
+  fallbackMirror: 'https://mirrors.tuna.tsinghua.edu.cn/pypi/web/simple'
+}
--- a/apps/desktop-ui/src/i18n.ts
+++ b/apps/desktop-ui/src/i18n.ts
@@ -0,0 +1,88 @@
+import arCommands from '@frontend-locales/ar/commands.json' with { type: 'json' }
+import ar from '@frontend-locales/ar/main.json' with { type: 'json' }
+import arNodes from '@frontend-locales/ar/nodeDefs.json' with { type: 'json' }
+import arSettings from '@frontend-locales/ar/settings.json' with { type: 'json' }
+import enCommands from '@frontend-locales/en/commands.json' with { type: 'json' }
+import en from '@frontend-locales/en/main.json' with { type: 'json' }
+import enNodes from '@frontend-locales/en/nodeDefs.json' with { type: 'json' }
+import enSettings from '@frontend-locales/en/settings.json' with { type: 'json' }
+import esCommands from '@frontend-locales/es/commands.json' with { type: 'json' }
+import es from '@frontend-locales/es/main.json' with { type: 'json' }
+import esNodes from '@frontend-locales/es/nodeDefs.json' with { type: 'json' }
+import esSettings from '@frontend-locales/es/settings.json' with { type: 'json' }
+import frCommands from '@frontend-locales/fr/commands.json' with { type: 'json' }
+import fr from '@frontend-locales/fr/main.json' with { type: 'json' }
+import frNodes from '@frontend-locales/fr/nodeDefs.json' with { type: 'json' }
+import frSettings from '@frontend-locales/fr/settings.json' with { type: 'json' }
+import jaCommands from '@frontend-locales/ja/commands.json' with { type: 'json' }
+import ja from '@frontend-locales/ja/main.json' with { type: 'json' }
+import jaNodes from '@frontend-locales/ja/nodeDefs.json' with { type: 'json' }
+import jaSettings from '@frontend-locales/ja/settings.json' with { type: 'json' }
+import koCommands from '@frontend-locales/ko/commands.json' with { type: 'json' }
+import ko from '@frontend-locales/ko/main.json' with { type: 'json' }
+import koNodes from '@frontend-locales/ko/nodeDefs.json' with { type: 'json' }
+import koSettings from '@frontend-locales/ko/settings.json' with { type: 'json' }
+import ruCommands from '@frontend-locales/ru/commands.json' with { type: 'json' }
+import ru from '@frontend-locales/ru/main.json' with { type: 'json' }
+import ruNodes from '@frontend-locales/ru/nodeDefs.json' with { type: 'json' }
+import ruSettings from '@frontend-locales/ru/settings.json' with { type: 'json' }
+import trCommands from '@frontend-locales/tr/commands.json' with { type: 'json' }
+import tr from '@frontend-locales/tr/main.json' with { type: 'json' }
+import trNodes from '@frontend-locales/tr/nodeDefs.json' with { type: 'json' }
+import trSettings from '@frontend-locales/tr/settings.json' with { type: 'json' }
+import zhTWCommands from '@frontend-locales/zh-TW/commands.json' with { type: 'json' }
+import zhTW from '@frontend-locales/zh-TW/main.json' with { type: 'json' }
+import zhTWNodes from '@frontend-locales/zh-TW/nodeDefs.json' with { type: 'json' }
+import zhTWSettings from '@frontend-locales/zh-TW/settings.json' with { type: 'json' }
+import zhCommands from '@frontend-locales/zh/commands.json' with { type: 'json' }
+import zh from '@frontend-locales/zh/main.json' with { type: 'json' }
+import zhNodes from '@frontend-locales/zh/nodeDefs.json' with { type: 'json' }
+import zhSettings from '@frontend-locales/zh/settings.json' with { type: 'json' }
+import { createI18n } from 'vue-i18n'
+
+function buildLocale<M, N, C, S>(main: M, nodes: N, commands: C, settings: S) {
+  return {
+    ...main,
+    nodeDefs: nodes,
+    commands: commands,
+    settings: settings
+  }
+}
+
+const messages = {
+  en: buildLocale(en, enNodes, enCommands, enSettings),
+  zh: buildLocale(zh, zhNodes, zhCommands, zhSettings),
+  'zh-TW': buildLocale(zhTW, zhTWNodes, zhTWCommands, zhTWSettings),
+  ru: buildLocale(ru, ruNodes, ruCommands, ruSettings),
+  ja: buildLocale(ja, jaNodes, jaCommands, jaSettings),
+  ko: buildLocale(ko, koNodes, koCommands, koSettings),
+  fr: buildLocale(fr, frNodes, frCommands, frSettings),
+  es: buildLocale(es, esNodes, esCommands, esSettings),
+  ar: buildLocale(ar, arNodes, arCommands, arSettings),
+  tr: buildLocale(tr, trNodes, trCommands, trSettings)
+}
+
+export const i18n = createI18n({
+  // Must set `false`, as Vue I18n Legacy API is for Vue 2
+  legacy: false,
+  locale: navigator.language.split('-')[0] || 'en',
+  fallbackLocale: 'en',
+  messages,
+  // Ignore warnings for locale options as each option is in its own language.
+  // e.g. "English", "中文", "Русский", "日本語", "한국어", "Français", "Español"
+  missingWarn: /^(?!settings\.Comfy_Locale\.options\.).+/,
+  fallbackWarn: /^(?!settings\.Comfy_Locale\.options\.).+/
+})
+
+/** Convenience shorthand: i18n.global */
+export const { t, te } = i18n.global
+
+/**
+ * Safe translation function that returns the fallback message if the key is not found.
+ *
+ * @param key - The key to translate.
+ * @param fallbackMessage - The fallback message to use if the key is not found.
+ */
+export function st(key: string, fallbackMessage: string) {
+  return te(key) ? t(key) : fallbackMessage
+}
--- a/apps/desktop-ui/src/main.ts
+++ b/apps/desktop-ui/src/main.ts
@@ -0,0 +1,46 @@
+import { definePreset } from '@primevue/themes'
+import Aura from '@primevue/themes/aura'
+import { createPinia } from 'pinia'
+import 'primeicons/primeicons.css'
+import PrimeVue from 'primevue/config'
+import ConfirmationService from 'primevue/confirmationservice'
+import ToastService from 'primevue/toastservice'
+import Tooltip from 'primevue/tooltip'
+import { createApp } from 'vue'
+
+import App from './App.vue'
+import './assets/css/style.css'
+import { i18n } from './i18n'
+import router from './router'
+
+const ComfyUIPreset = definePreset(Aura, {
+  semantic: {
+    // @ts-expect-error fixme ts strict error
+    primary: Aura['primitive'].blue
+  }
+})
+
+const app = createApp(App)
+const pinia = createPinia()
+
+app.directive('tooltip', Tooltip)
+app
+  .use(router)
+  .use(PrimeVue, {
+    theme: {
+      preset: ComfyUIPreset,
+      options: {
+        prefix: 'p',
+        cssLayer: {
+          name: 'primevue',
+          order: 'theme, base, primevue'
+        },
+        darkModeSelector: '.dark-theme, :root:has(.dark-theme)'
+      }
+    }
+  })
+  .use(ConfirmationService)
+  .use(ToastService)
+  .use(pinia)
+  .use(i18n)
+  .mount('#desktop-app')
--- a/apps/desktop-ui/src/router.ts
+++ b/apps/desktop-ui/src/router.ts
@@ -0,0 +1,92 @@
+import {
+  createRouter,
+  createWebHashHistory,
+  createWebHistory
+} from 'vue-router'
+
+import { isElectron } from '@/utils/envUtil'
+import LayoutDefault from '@/views/layouts/LayoutDefault.vue'
+
+const isFileProtocol = window.location.protocol === 'file:'
+const basePath = isElectron() ? '/' : window.location.pathname
+
+const router = createRouter({
+  history: isFileProtocol ? createWebHashHistory() : createWebHistory(basePath),
+  routes: [
+    {
+      path: '/',
+      component: LayoutDefault,
+      children: [
+        {
+          path: '',
+          name: 'WelcomeView',
+          component: () => import('@/views/WelcomeView.vue')
+        },
+        {
+          path: 'welcome',
+          name: 'WelcomeViewAlias',
+          component: () => import('@/views/WelcomeView.vue')
+        },
+        {
+          path: 'install',
+          name: 'InstallView',
+          component: () => import('@/views/InstallView.vue')
+        },
+        {
+          path: 'download-git',
+          name: 'DownloadGitView',
+          component: () => import('@/views/DownloadGitView.vue')
+        },
+        {
+          path: 'desktop-start',
+          name: 'DesktopStartView',
+          component: () => import('@/views/DesktopStartView.vue')
+        },
+        {
+          path: 'desktop-update',
+          name: 'DesktopUpdateView',
+          component: () => import('@/views/DesktopUpdateView.vue')
+        },
+        {
+          path: 'server-start',
+          name: 'ServerStartView',
+          component: () => import('@/views/ServerStartView.vue')
+        },
+        {
+          path: 'manual-configuration',
+          name: 'ManualConfigurationView',
+          component: () => import('@/views/ManualConfigurationView.vue')
+        },
+        {
+          path: 'metrics-consent',
+          name: 'MetricsConsentView',
+          component: () => import('@/views/MetricsConsentView.vue')
+        },
+        {
+          path: 'maintenance',
+          name: 'MaintenanceView',
+          component: () => import('@/views/MaintenanceView.vue')
+        },
+        {
+          path: 'not-supported',
+          name: 'NotSupportedView',
+          component: () => import('@/views/NotSupportedView.vue')
+        },
+        {
+          path: 'desktop-dialog/:dialogId',
+          name: 'DesktopDialogView',
+          component: () => import('@/views/DesktopDialogView.vue')
+        }
+      ]
+    }
+  ],
+  scrollBehavior(_to, _from, savedPosition) {
+    if (savedPosition) {
+      return savedPosition
+    }
+
+    return { top: 0 }
+  }
+})
+
+export default router
--- a/apps/desktop-ui/src/stores/maintenanceTaskStore.ts
+++ b/apps/desktop-ui/src/stores/maintenanceTaskStore.ts
@@ -151,7 +151,6 @@ export const useMaintenanceTaskStore = defineStore('maintenanceTask', () => {
  /** @todo Refreshes Electron tasks only. */
  const refreshDesktopTasks = async () => {
    isRefreshing.value = true
-    console.log('Refreshing desktop tasks')
    await electron.Validation.validateInstallation(processUpdate)
  }

--- a/apps/desktop-ui/src/types/desktop/index.d.ts
+++ b/apps/desktop-ui/src/types/desktop/index.d.ts
--- a/apps/desktop-ui/src/types/desktop/maintenanceTypes.ts
+++ b/apps/desktop-ui/src/types/desktop/maintenanceTypes.ts
--- a/Show More
+++ b/Show More