[feat] Add rectangular hover area tracking for queue overlay

Uses useMouse + useElementBounding from VueUse to detect hover over the
entire rectangular bounding box of the queue area (actionbar + overlay).

This approach is needed because QueueProgressOverlay has pointer-events-none
on its wrapper, which would create "holes" in hover detection with standard
mouseenter/mouseleave events.

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

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

.claude/commands/add-missing-i18n.md

@@ -3,15 +3,12 @@
 ## Task: Add English translations for all new localized strings
 
 ### Step 1: Identify new translation keys
-
 Find all translation keys that were added in the current branch's changes. These keys appear as arguments to translation functions: `t()`, `st()`, `$t()`, or similar i18n functions.
 
 ### Step 2: Add translations to English locale file
-
 For each new translation key found, add the corresponding English text to the file `src/locales/en/main.json`.
 
 ### Key-to-JSON mapping rules:
-
 - Translation keys use dot notation to represent nested JSON structure
 - Convert dot notation to nested JSON objects when adding to the locale file
 - Example: The key `g.user.name` maps to:
@@ -26,7 +23,6 @@ For each new translation key found, add the corresponding English text to the fi
   ```
 
 ### Important notes:
-
 1. **Only modify the English locale file** (`src/locales/en/main.json`)
 2. **Do not modify other locale files** - translations for other languages are automatically generated by the `i18n.yaml` workflow
 3. **Exception for manual translations**: Only add translations to non-English locale files if:
@@ -34,7 +30,6 @@ For each new translation key found, add the corresponding English text to the fi
    - The automated translation would likely be incorrect due to technical terminology or context-specific meaning
 
 ### Example workflow:
-
 1. If you added `t('settings.advanced.enable')` in a Vue component
 2. Add to `src/locales/en/main.json`:
    ```json

.claude/commands/comprehensive-pr-review.md

@@ -15,7 +15,6 @@ To post inline comments, you will use the GitHub API via the `gh` command. Here'
    - Run: `gh pr view $PR_NUMBER --json commits --jq '.commits[-1].oid'` to get the latest commit SHA
 
 2. For each issue you find, post an inline comment using this exact command structure (as a single line):
-
    ```
    gh api --method POST -H "Accept: application/vnd.github+json" -H "X-GitHub-Api-Version: 2022-11-28" /repos/OWNER/REPO/pulls/$PR_NUMBER/comments -f body="YOUR_COMMENT_BODY" -f commit_id="COMMIT_SHA" -f path="FILE_PATH" -F line=LINE_NUMBER -f side="RIGHT"
    ```
@@ -23,15 +22,13 @@ To post inline comments, you will use the GitHub API via the `gh` command. Here'
 3. Format your comment body using actual newlines in the command. Use a heredoc or construct the body with proper line breaks:
    ```
    COMMENT_BODY="**[category] severity Priority**
-   ```
 
 **Issue**: Brief description of the problem
 **Context**: Why this matters  
 **Suggestion**: How to fix it"
-
-```
-
-Then use: `-f body="$COMMENT_BODY"`
+   ```
+   
+   Then use: `-f body="$COMMENT_BODY"`
 
 ## Phase 1: Environment Setup and PR Context
 
@@ -61,12 +58,10 @@ This is critical for better file inspection:
 1. Get PR metadata: `gh pr view $PR_NUMBER --json files,title,body,additions,deletions,baseRefName,headRefName > pr_info.json`
 2. Extract branch names from pr_info.json using jq
 3. Fetch and checkout the PR branch:
-```
-
-git fetch origin "pull/$PR_NUMBER/head:pr-$PR_NUMBER"
-git checkout "pr-$PR_NUMBER"
-
-```
+   ```
+   git fetch origin "pull/$PR_NUMBER/head:pr-$PR_NUMBER"
+   git checkout "pr-$PR_NUMBER"
+   ```
 
 ### Step 1.4: Get Changed Files and Diffs
 
@@ -105,9 +100,9 @@ Intelligently load only relevant knowledge:
 
 1. Use GitHub API to discover available knowledge folders: `https://api.github.com/repos/Comfy-Org/comfy-claude-prompt-library/contents/.claude/knowledge`
 2. For each knowledge folder, check if it's relevant by searching for the folder name in:
-- Changed file paths
-- PR title
-- PR body
+   - Changed file paths
+   - PR title
+   - PR body
 3. If relevant, download all files from that knowledge folder
 
 ### Step 2.4: Load Validation Rules
@@ -198,14 +193,12 @@ Consider:
 For each issue found, create a concise inline comment with this structure:
 
 ```
-
 **[category] severity Priority**
 
 **Issue**: Brief description of the problem
 **Context**: Why this matters
 **Suggestion**: How to fix it
-
-````
+```
 
 Categories: architecture/security/performance/quality
 Severities: critical/high/medium/low
@@ -221,7 +214,7 @@ For EACH issue:
 
 ```bash
 gh api --method POST -H "Accept: application/vnd.github+json" -H "X-GitHub-Api-Version: 2022-11-28" /repos/OWNER/REPO/pulls/$PR_NUMBER/comments -f body="$COMMENT_BODY" -f commit_id="COMMIT_SHA" -f path="FILE_PATH" -F line=LINE_NUMBER -f side="RIGHT"
-````
+```
 
 CRITICAL: The entire command must be on one line. Use actual values, not placeholders.
 
@@ -230,14 +223,12 @@ CRITICAL: The entire command must be on one line. Use actual values, not placeho
 Here's an example of how to review a file with a security issue:
 
 1. First, get the repository info:
-
    ```bash
    gh repo view --json owner,name
    # Output: {"owner":{"login":"Comfy-Org"},"name":"ComfyUI_frontend"}
    ```
 
 2. Get the commit SHA:
-
    ```bash
    gh pr view $PR_NUMBER --json commits --jq '.commits[-1].oid'
    # Output: abc123def456
@@ -249,17 +240,14 @@ Here's an example of how to review a file with a security issue:
    ```bash
    # First, create the comment body with proper newlines
    COMMENT_BODY="**[security] critical Priority**
-   ```
 
 **Issue**: SQL injection vulnerability - user input directly concatenated into query
 **Context**: Allows attackers to execute arbitrary SQL commands
 **Suggestion**: Use parameterized queries or prepared statements"
-
-# Then post the comment (as a single line)
-
-gh api --method POST -H "Accept: application/vnd.github+json" -H "X-GitHub-Api-Version: 2022-11-28" /repos/Comfy-Org/ComfyUI_frontend/pulls/$PR_NUMBER/comments -f body="$COMMENT_BODY" -f commit_id="abc123def456" -f path="src/db/queries.js" -F line=42 -f side="RIGHT"
-
-```
+   
+   # Then post the comment (as a single line)
+   gh api --method POST -H "Accept: application/vnd.github+json" -H "X-GitHub-Api-Version: 2022-11-28" /repos/Comfy-Org/ComfyUI_frontend/pulls/$PR_NUMBER/comments -f body="$COMMENT_BODY" -f commit_id="abc123def456" -f path="src/db/queries.js" -F line=42 -f side="RIGHT"
+   ```
 
 Repeat this process for every issue you find in the PR.
 
@@ -294,9 +282,9 @@ Analyze the PR to determine its type:
 1. Extract PR title and body from pr_info.json
 2. Count files, additions, and deletions
 3. Determine PR type:
-- Feature: Check for tests, documentation, backward compatibility
-- Bug fix: Verify root cause addressed, includes regression tests
-- Refactor: Ensure behavior preservation, tests still pass
+   - Feature: Check for tests, documentation, backward compatibility
+   - Bug fix: Verify root cause addressed, includes regression tests
+   - Refactor: Ensure behavior preservation, tests still pass
 
 ## Phase 7: Generate Comprehensive Summary
 
@@ -304,17 +292,16 @@ After ALL inline comments are posted, create a summary:
 
 1. Calculate total issues by category and severity
 2. Use `gh pr review $PR_NUMBER --comment` to post a summary with:
-- Review disclaimer
-- Issue distribution (counts by severity)
-- Category breakdown
-- Key findings for each category
-- Positive observations
-- References to guidelines
-- Next steps
+   - Review disclaimer
+   - Issue distribution (counts by severity)
+   - Category breakdown
+   - Key findings for each category
+   - Positive observations
+   - References to guidelines
+   - Next steps
 
 Include in the summary:
 ```
-
 # Comprehensive PR Review
 
 This review is generated by Claude. It may not always be accurate, as with human reviewers. If you believe that any of the comments are invalid or incorrect, please state why for each. For others, please implement the changes in one way or another.
@@ -325,14 +312,12 @@ This review is generated by Claude. It may not always be accurate, as with human
 **Impact**: [X] additions, [Y] deletions across [Z] files
 
 ### Issue Distribution
-
 - Critical: [CRITICAL_COUNT]
 - High: [HIGH_COUNT]
 - Medium: [MEDIUM_COUNT]
 - Low: [LOW_COUNT]
 
 ### Category Breakdown
-
 - Architecture: [ARCHITECTURE_ISSUES] issues
 - Security: [SECURITY_ISSUES] issues
 - Performance: [PERFORMANCE_ISSUES] issues
@@ -341,42 +326,33 @@ This review is generated by Claude. It may not always be accurate, as with human
 ## Key Findings
 
 ### Architecture & Design
-
 [Detailed architectural analysis based on repository patterns]
 
 ### Security Considerations
-
 [Security implications beyond basic vulnerabilities]
 
 ### Performance Impact
-
 [Performance analysis including bundle size, render impact]
 
 ### Integration Points
-
 [How this affects other systems, extensions, etc.]
 
 ## Positive Observations
-
 [What was done well, good patterns followed]
 
 ## References
-
 - [Repository Architecture Guide](https://github.com/Comfy-Org/comfy-claude-prompt-library/blob/master/project-summaries-for-agents/ComfyUI_frontend/REPOSITORY_GUIDE.md)
 - [Frontend Standards](https://github.com/Comfy-Org/comfy-claude-prompt-library/blob/master/.claude/commands/validation/frontend-code-standards.md)
 - [Security Guidelines](https://github.com/Comfy-Org/comfy-claude-prompt-library/blob/master/.claude/commands/validation/security-audit.md)
 
 ## Next Steps
-
 1. Address critical issues before merge
 2. Consider architectural feedback for long-term maintainability
 3. Add tests for uncovered scenarios
 4. Update documentation if needed
 
 ---
-
-_This is a comprehensive automated review. For architectural decisions requiring human judgment, please request additional manual review._
-
+*This is a comprehensive automated review. For architectural decisions requiring human judgment, please request additional manual review.*
 ```
 
 ## Important Guidelines
@@ -399,5 +375,4 @@ This is a COMPREHENSIVE review, not a linting pass. Provide the same quality fee
 5. Phase 6: Consider PR type for additional checks
 6. Phase 7: Post comprehensive summary ONLY after all inline comments
 
-Remember: Individual inline comments for each issue, then one final summary. Never batch issues into a single comment.
-```
+Remember: Individual inline comments for each issue, then one final summary. Never batch issues into a single comment.

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

@@ -7,9 +7,8 @@ Create a frontend release with version type: $ARGUMENTS
 
 Expected format: Version increment type and optional description
 Examples:
-
 - `patch` - Bug fixes only
-- `minor` - New features, backward compatible
+- `minor` - New features, backward compatible  
 - `major` - Breaking changes
 - `prerelease` - Alpha/beta/rc releases
 - `patch "Critical security fixes"` - With custom description
@@ -22,9 +21,8 @@ If no arguments provided, the command will always perform prerelease if the curr
 ## Prerequisites
 
 Before starting, ensure:
-
 - You have push access to the repository
-- GitHub CLI (`gh`) is authenticated
+- GitHub CLI (`gh`) is authenticated  
 - You're on a clean main branch working tree
 - All intended changes are merged to main
 - You understand the scope of changes being released
@@ -32,7 +30,6 @@ Before starting, ensure:
 ## Critical Checks Before Starting
 
 ### 1. Check Current Version Status
-
 ```bash
 # Get current version and check if it's a pre-release
 CURRENT_VERSION=$(node -p "require('./package.json').version")
@@ -43,7 +40,6 @@ fi
 ```
 
 ### 2. Find Last Stable Release
-
 ```bash
 # Get last stable release tag (no pre-release suffix)
 LAST_STABLE=$(git tag -l "v*" | grep -v "\-" | sort -V | tail -1)
@@ -53,7 +49,6 @@ echo "Last stable release: $LAST_STABLE"
 ## Configuration Options
 
 **Environment Variables:**
-
 - `RELEASE_SKIP_SECURITY_SCAN=true` - Skip security audit
 - `RELEASE_AUTO_APPROVE=true` - Skip some confirmation prompts
 - `RELEASE_DRY_RUN=true` - Simulate release without executing
@@ -134,14 +129,13 @@ echo "Last stable release: $LAST_STABLE"
 ### Step 4: Analyze Dependency Updates
 
 1. **Use pnpm's built-in dependency analysis:**
-
    ```bash
    # Get outdated dependencies with pnpm
    pnpm outdated --format table > outdated-deps-${NEW_VERSION}.txt
-
+   
    # Check for license compliance
    pnpm licenses ls --json > licenses-${NEW_VERSION}.json
-
+   
    # Analyze why specific dependencies exist
    echo "Dependency analysis:" > dep-analysis-${NEW_VERSION}.md
    MAJOR_DEPS=("vue" "vite" "@vitejs/plugin-vue" "typescript" "pinia")
@@ -153,23 +147,22 @@ echo "Last stable release: $LAST_STABLE"
    ```
 
 2. **Check for significant dependency updates:**
-
    ```bash
    # Extract all dependency changes for major version bumps
    OTHER_DEP_CHANGES=""
-
+   
    # Compare major dependency versions (you can extend this list)
    MAJOR_DEPS=("vue" "vite" "@vitejs/plugin-vue" "typescript" "pinia")
-
+   
    for dep in "${MAJOR_DEPS[@]}"; do
      PREV_VER=$(echo "$PREV_PACKAGE_JSON" | grep -o "\"$dep\": \"[^\"]*\"" | grep -o '[0-9][^"]*' | head -1 || echo "")
      CURR_VER=$(echo "$CURRENT_PACKAGE_JSON" | grep -o "\"$dep\": \"[^\"]*\"" | grep -o '[0-9][^"]*' | head -1 || echo "")
-
+     
      if [ "$PREV_VER" != "$CURR_VER" ] && [ -n "$PREV_VER" ] && [ -n "$CURR_VER" ]; then
        # Check if it's a major version change
        PREV_MAJOR=$(echo "$PREV_VER" | cut -d. -f1 | sed 's/[^0-9]//g')
        CURR_MAJOR=$(echo "$CURR_VER" | cut -d. -f1 | sed 's/[^0-9]//g')
-
+       
        if [ "$PREV_MAJOR" != "$CURR_MAJOR" ]; then
          OTHER_DEP_CHANGES="${OTHER_DEP_CHANGES}\n- **${dep}**: ${PREV_VER} → ${CURR_VER} (Major version change)"
        fi
@@ -180,12 +173,11 @@ echo "Last stable release: $LAST_STABLE"
 ### Step 5: Generate GTM Feature Summary
 
 1. **Collect PR data for analysis:**
-
    ```bash
    # Get list of PR numbers from commits
    PR_NUMBERS=$(git log ${BASE_TAG}..HEAD --oneline --no-merges --first-parent | \
      grep -oE "#[0-9]+" | tr -d '#' | sort -u)
-
+   
    # Save PR data for each PR
    echo "[" > prs-${NEW_VERSION}.json
    first=true
@@ -197,17 +189,16 @@ echo "Last stable release: $LAST_STABLE"
    ```
 
 2. **Analyze for GTM-worthy features:**
-
    ```
    <task>
    Review these PRs to identify features worthy of marketing attention.
-
+   
    A feature is GTM-worthy if it meets ALL of these criteria:
    - Introduces a NEW capability users didn't have before (not just improvements)
    - Would be a compelling reason for users to upgrade to this version
    - Can be demonstrated visually or has clear before/after comparison
    - Affects a significant portion of the user base
-
+   
    NOT GTM-worthy:
    - Bug fixes (even important ones)
    - Minor UI tweaks or color changes
@@ -215,20 +206,19 @@ echo "Last stable release: $LAST_STABLE"
    - Internal refactoring
    - Small convenience features
    - Features that only improve existing functionality marginally
-
+   
    For each GTM-worthy feature, note:
    - PR number, title, and author
    - Media links from the PR description
    - One compelling sentence on why users should care
-
+   
    If there are no GTM-worthy features, just say "No marketing-worthy features in this release."
    </task>
-
+   
    PR data: [contents of prs-${NEW_VERSION}.json]
    ```
 
 3. **Generate GTM notification using this EXACT Slack-compatible format:**
-
    ```bash
    # Only create file if GTM-worthy features exist:
    if [ "$GTM_FEATURES_FOUND" = "true" ]; then
@@ -262,8 +252,8 @@ echo "Last stable release: $LAST_STABLE"
    ```
 
    **CRITICAL Formatting Requirements:**
-   - Use single asterisk (\*) for emphasis, NOT double (\*\*)
-   - Use underscore (\_) for italics
+   - 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
@@ -273,7 +263,6 @@ echo "Last stable release: $LAST_STABLE"
 ### Step 6: Version Preview
 
 **Version Preview:**
-
 - Current: `${CURRENT_VERSION}`
 - Proposed: Show exact version number based on analysis:
   - Major version if breaking changes detected
@@ -337,7 +326,6 @@ echo "Last stable release: $LAST_STABLE"
    done
    ```
 3. Create standardized release notes using this exact template:
-
    ```bash
    cat > release-notes-${NEW_VERSION}.md << 'EOF'
    ## ⚠️ Breaking Changes
@@ -371,7 +359,6 @@ echo "Last stable release: $LAST_STABLE"
    **Full Changelog**: https://github.com/Comfy-Org/ComfyUI_frontend/compare/${BASE_TAG}...v${NEW_VERSION}
    EOF
    ```
-
 4. **Parse commits and populate template:**
    - Group commits by conventional commit type (feat:, fix:, chore:, etc.)
    - Extract PR numbers from commit messages
@@ -388,19 +375,16 @@ echo "Last stable release: $LAST_STABLE"
 ### Step 10: Create Version Bump PR
 
 **For standard version bumps (patch/minor/major):**
-
 ```bash
 # Trigger the workflow
-gh workflow run release-version-bump.yaml -f version_type=${VERSION_TYPE}
+gh workflow run version-bump.yaml -f version_type=${VERSION_TYPE}
 
 # Workflow runs quickly - usually creates PR within 30 seconds
 echo "Workflow triggered. Waiting for PR creation..."
 ```
 
 **For releasing a stable version:**
-
 1. Must manually create branch and update version:
-
    ```bash
    git checkout -b version-bump-${NEW_VERSION}
    # Edit package.json to remove pre-release suffix
@@ -410,25 +394,23 @@ echo "Workflow triggered. Waiting for PR creation..."
    ```
 
 2. Wait for PR creation (if using workflow) or create manually:
-
    ```bash
    # For workflow-created PRs - wait and find it
    sleep 30
    # Look for PR from comfy-pr-bot (not github-actions)
    PR_NUMBER=$(gh pr list --author comfy-pr-bot --limit 1 --json number --jq '.[0].number')
-
+   
    # Verify we got the PR
    if [ -z "$PR_NUMBER" ]; then
      echo "PR not found yet. Checking recent PRs..."
      gh pr list --limit 5 --json number,title,author
    fi
-
+   
    # For manual PRs
    gh pr create --title "${NEW_VERSION}" \
      --body-file release-notes-${NEW_VERSION}.md \
      --label "Release"
    ```
-
 3. **Update PR with release notes:**
    ```bash
    # For workflow-created PRs, update the body with our release notes
@@ -443,21 +425,28 @@ echo "Workflow triggered. Waiting for PR creation..."
    gh pr view ${PR_NUMBER} --json labels | jq -r '.labels[].name' | grep -q "Release" || \
      echo "ERROR: Release label missing! Add it immediately!"
    ```
-2. Verify version number in package.json
-3. Review all changed files
-4. Ensure no unintended changes included
-5. Wait for required PR checks:
+2. Check for update-locales commits:
+   ```bash
+   # WARNING: update-locales may add [skip ci] which blocks release workflow!
+   gh pr view ${PR_NUMBER} --json commits | grep -q "skip ci" && \
+     echo "WARNING: [skip ci] detected - release workflow may not trigger!"
+   ```
+3. Verify version number in package.json
+4. Review all changed files
+5. Ensure no unintended changes included
+6. Wait for required PR checks:
    ```bash
    gh pr checks ${PR_NUMBER} --watch
    ```
-6. **FINAL CODE REVIEW**: Release label present and no [skip ci]?
+7. **FINAL CODE REVIEW**: Release label present and no [skip ci]?
 
 ### Step 12: Pre-Merge Validation
 
 1. **Review Requirements**: Release PRs require approval
-2. Monitor CI checks
-3. Check no new commits to main since PR creation
-4. **DEPLOYMENT READINESS**: Ready to merge?
+2. Monitor CI checks - watch for update-locales
+3. **CRITICAL WARNING**: If update-locales adds [skip ci], the release workflow won't trigger!
+4. Check no new commits to main since PR creation
+5. **DEPLOYMENT READINESS**: Ready to merge?
 
 ### Step 13: Execute Release
 
@@ -479,14 +468,14 @@ echo "Workflow triggered. Waiting for PR creation..."
    # Monitor branch creation (for minor/major releases)
    gh run list --workflow=release-branch-create.yaml --limit=1
    ```
-5. If workflow didn't trigger due to [skip ci]:
+4. If workflow didn't trigger due to [skip ci]:
    ```bash
    echo "ERROR: Release workflow didn't trigger!"
    echo "Options:"
    echo "1. Create patch release (e.g., 1.24.1) to trigger workflow"
    echo "2. Investigate manual release options"
    ```
-6. If workflow triggered, monitor execution:
+5. If workflow triggered, monitor execution:
    ```bash
    WORKFLOW_RUN_ID=$(gh run list --workflow=release-draft-create.yaml --limit=1 --json databaseId --jq '.[0].databaseId')
    gh run watch ${WORKFLOW_RUN_ID}
@@ -495,7 +484,6 @@ echo "Workflow triggered. Waiting for PR creation..."
 ### Step 14: Enhance GitHub Release
 
 1. Wait for automatic release creation:
-
    ```bash
    # Wait for release to be created
    while ! gh release view v${NEW_VERSION} >/dev/null 2>&1; do
@@ -505,14 +493,13 @@ echo "Workflow triggered. Waiting for PR creation..."
    ```
 
 2. **Enhance the GitHub release:**
-
    ```bash
    # Update release with our release notes
    gh release edit v${NEW_VERSION} \
      --title "🚀 ComfyUI Frontend v${NEW_VERSION}" \
      --notes-file release-notes-${NEW_VERSION}.md \
      --latest
-
+   
    # Add any additional assets if needed
    # gh release upload v${NEW_VERSION} additional-assets.zip
    ```
@@ -525,17 +512,14 @@ echo "Workflow triggered. Waiting for PR creation..."
 ### Step 15: Verify Multi-Channel Distribution
 
 1. **GitHub Release:**
-
    ```bash
    gh release view v${NEW_VERSION} --json assets,body,createdAt,tagName
    ```
-
    - ✅ Check release notes
    - ✅ Verify dist.zip attachment
    - ✅ Confirm release marked as latest (for main branch)
 
 2. **PyPI Package:**
-
    ```bash
    # Check PyPI availability (may take a few minutes)
    for i in {1..10}; do
@@ -549,7 +533,6 @@ echo "Workflow triggered. Waiting for PR creation..."
    ```
 
 3. **npm Package:**
-
    ```bash
    # Check npm availability
    for i in {1..10}; do
@@ -567,17 +550,15 @@ echo "Workflow triggered. Waiting for PR creation..."
 ### Step 16: Post-Release Monitoring Setup
 
 1. **Monitor immediate release health:**
-
    ```bash
    # Check for immediate issues
    gh issue list --label "bug" --state open --limit 5 --json title,number,createdAt
-
+   
    # Monitor download metrics (if accessible)
    gh release view v${NEW_VERSION} --json assets --jq '.assets[].downloadCount'
    ```
 
 2. **Update documentation tracking:**
-
    ```bash
    cat > post-release-checklist.md << EOF
    # Post-Release Checklist for v${NEW_VERSION}
@@ -608,7 +589,6 @@ echo "Workflow triggered. Waiting for PR creation..."
    ```
 
 3. **Create release summary:**
-
    ```bash
    cat > release-summary-${NEW_VERSION}.md << EOF
    # Release Summary: ComfyUI Frontend v${NEW_VERSION}
@@ -646,7 +626,6 @@ echo "Workflow triggered. Waiting for PR creation..."
 ### Step 17: Create Release Summary
 
 1. **Create comprehensive release summary:**
-
    ```bash
    cat > release-summary-${NEW_VERSION}.md << EOF
    # Release Summary: ComfyUI Frontend v${NEW_VERSION}
@@ -686,7 +665,6 @@ echo "Workflow triggered. Waiting for PR creation..."
 ### Rollback Procedures
 
 **Pre-Merge Rollback:**
-
 ```bash
 # Close version bump PR and reset
 gh pr close ${PR_NUMBER}
@@ -695,7 +673,6 @@ git clean -fd
 ```
 
 **Post-Merge Rollback:**
-
 ```bash
 # Create immediate patch release with reverts
 git revert ${RELEASE_COMMIT}
@@ -703,7 +680,6 @@ git revert ${RELEASE_COMMIT}
 ```
 
 **Emergency Procedures:**
-
 ```bash
 # Document incident
 cat > release-incident-${NEW_VERSION}.md << EOF
@@ -737,39 +713,31 @@ The command implements multiple quality gates:
 ## Common Scenarios
 
 ### Scenario 1: Regular Feature Release
-
 ```bash
 /project:create-frontend-release minor
 ```
-
 - Analyzes features since last release
 - Generates changelog automatically
 - Creates comprehensive release notes
 
 ### Scenario 2: Critical Security Patch
-
 ```bash
 /project:create-frontend-release patch "Security fixes for CVE-2024-XXXX"
 ```
-
 - Expedited security scanning
 - Enhanced monitoring setup
 
 ### Scenario 3: Major Version with Breaking Changes
-
 ```bash
 /project:create-frontend-release major
 ```
-
 - Comprehensive breaking change analysis
 - Migration guide generation
 
 ### Scenario 4: Pre-release Testing
-
 ```bash
 /project:create-frontend-release prerelease
 ```
-
 - Creates alpha/beta/rc versions
 - Draft release status
 - Python package specs require that prereleases use alpha/beta/rc as the preid
@@ -779,12 +747,10 @@ The command implements multiple quality gates:
 When executing this release process, pay attention to these key aspects:
 
 ### Version Handling
-
 - For pre-release versions (e.g., 1.24.0-rc.1), the next stable release should be the same version without the suffix (1.24.0)
 - Never skip version numbers - follow semantic versioning strictly
 
 ### Commit History Analysis
-
 - **ALWAYS** use `--first-parent` flag with git log to avoid including commits from merged feature branches
 - Verify PR merge targets before including them in changelogs:
   ```bash
@@ -792,7 +758,6 @@ When executing this release process, pay attention to these key aspects:
   ```
 
 ### Release Workflow Triggers
-
 - The "Release" label on the PR is **CRITICAL** - without it, PyPI/npm publishing won't occur
 - Check for `[skip ci]` in commit messages before merging - this blocks the release workflow
 - If you encounter `[skip ci]`, push an empty commit to override it:
@@ -801,13 +766,11 @@ When executing this release process, pay attention to these key aspects:
   ```
 
 ### PR Creation Details
-
 - Version bump PRs come from `comfy-pr-bot`, not `github-actions`
 - The workflow typically completes in 20-30 seconds
 - Always wait for the PR to be created before trying to edit it
 
 ### Breaking Changes Detection
-
 - Analyze changes to public-facing APIs:
   - The `app` object and its methods
   - The `api` module exports
@@ -816,10 +779,9 @@ When executing this release process, pay attention to these key aspects:
 - Any modifications to these require marking as breaking changes
 
 ### Recovery Procedures
-
 If the release workflow fails to trigger:
-
 1. Create a revert PR to restore the previous version
 2. Merge the revert
 3. Re-run the version bump workflow
 4. This approach is cleaner than creating extra version numbers
+

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

@@ -3,11 +3,10 @@
 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
+4. **Create patch release** with version bump  
 5. **Publish GitHub release** (manually uncheck "latest")
 6. **Update ComfyUI requirements.txt** via PR
 
@@ -15,8 +14,7 @@ This command creates patch/hotfix releases for ComfyUI Frontend by backporting f
 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:
-
+Examples: 
 - `#1234,#5678` (PRs - preferred)
 - `abc123,def456` (commit hashes)
 - `#1234,abc123` (mixed)
@@ -27,7 +25,7 @@ If no arguments provided, the command will guide you through identifying commits
 ## Prerequisites
 
 - Push access to repository
-- GitHub CLI (`gh`) authenticated
+- GitHub CLI (`gh`) authenticated  
 - Clean working tree
 - Understanding of what fixes need backporting
 
@@ -38,13 +36,11 @@ If no arguments provided, the command will guide you through identifying commits
 **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"
@@ -52,7 +48,6 @@ If no arguments provided, the command will guide you through identifying commits
    ```
 
 3. **Check for existing backport PRs:**
-
    ```bash
    # Check for backport PRs created by automation
    PR_NUMBER=${ARGUMENTS%%,*}  # Extract first PR number from arguments
@@ -63,22 +58,18 @@ If no arguments provided, the command will guide you through identifying commits
 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)
@@ -136,7 +127,6 @@ If no arguments provided, the command will guide you through identifying commits
 ### Step 6: Cherry-pick Changes
 
 For each commit:
-
 1. Attempt cherry-pick: `git cherry-pick <commit>`
 2. If conflicts occur:
    - Display conflict details
@@ -208,7 +198,6 @@ For each commit:
    ```
 3. **CRITICAL**: Verify "Release" label is added
 4. Create standardized release notes:
-
    ```bash
    cat > release-notes-${NEW_VERSION}.md << 'EOF'
    ## ⚠️ Breaking Changes
@@ -242,14 +231,12 @@ For each commit:
    **Full Changelog**: https://github.com/Comfy-Org/ComfyUI_frontend/compare/v${CURRENT_VERSION}...v${NEW_VERSION}
    EOF
    ```
-
    - For hotfixes, typically only populate the "Bug Fixes" section
    - Include links to the cherry-picked PRs/commits
    - Update the PR body with the release notes:
      ```bash
      gh pr edit ${PR_NUMBER} --body-file release-notes-${NEW_VERSION}.md
      ```
-
 5. **CONFIRMATION REQUIRED**: Release PR has "Release" label?
 
 ### Step 12: Monitor Release Process
@@ -275,7 +262,7 @@ For each commit:
 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"
+   - 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?
@@ -285,7 +272,6 @@ For each commit:
 **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
@@ -298,32 +284,30 @@ For each commit:
    ```
 
 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}"
@@ -337,8 +321,7 @@ For each commit:
      --repo comfyanonymous/ComfyUI \
      --title "Bump frontend to ${NEW_VERSION}" \
      --body "$(cat <<EOF
-   Bump frontend to ${NEW_VERSION}
-   ```
+Bump frontend to ${NEW_VERSION}
 
 \`\`\`
 python main.py --front-end-version Comfy-Org/ComfyUI_frontend@${NEW_VERSION}
@@ -351,19 +334,15 @@ python main.py --front-end-version Comfy-Org/ComfyUI_frontend@${NEW_VERSION}
 ## Changes
 
 - Fix: [Brief description of hotfixes included]
-  EOF
-  )"
-
-  ```
-
-  ```
+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"
    ```
@@ -396,7 +375,6 @@ python main.py --front-end-version Comfy-Org/ComfyUI_frontend@${NEW_VERSION}
 ## Safety Checks
 
 Throughout the process:
-
 - Always verify core branch matches ComfyUI's requirements.txt
 - For PRs: Ensure using correct commits (merge vs individual)
 - Check version numbers follow semantic versioning
@@ -407,7 +385,6 @@ Throughout the process:
 ## Rollback Procedures
 
 If something goes wrong:
-
 - Before push: `git reset --hard origin/core/X.Y`
 - After PR creation: Close PR and start over
 - After failed release: Create new patch version with fixes
@@ -427,16 +404,16 @@ If something goes wrong:
 ## Modern Workflow Context
 
 **Primary Backport Method:** Automated via `needs-backport` + `X.YY` labels
-**This Command Usage:**
-
+**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
+**Complete Hotfix:** Includes GitHub release publishing + ComfyUI requirements.txt integration
 
 ## 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 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.
+
+This process ensures a complete hotfix release with proper GitHub publishing, ComfyUI integration, and multiple safety checkpoints.

.claude/commands/setup_repo.md

@@ -5,7 +5,6 @@ Bootstrap the ComfyUI Frontend monorepo with all necessary dependencies and veri
 ## Overview
 
 This command will:
-
 1. Install pnpm package manager (if not present)
 2. Install all project dependencies
 3. Verify the project builds successfully
@@ -94,7 +93,7 @@ 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
@@ -123,7 +122,7 @@ 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 oxfmt"
+echo "  pnpm format       - Format code with Prettier"
 echo ""
 echo "Next steps:"
 echo "1. Run 'pnpm dev' to start developing"
@@ -155,4 +154,4 @@ After running the setup, manually verify:
 - Node.js >= 24
 - Git repository
 - Internet connection for package downloads
-- Available ports (typically 5173 for dev server)
+- Available ports (typically 5173 for dev server)

.claude/commands/verify-visually.md

@@ -12,10 +12,10 @@ Follow these steps systematically to verify our changes:
 2. **Visual Testing Process**
    - Navigate to http://localhost:5173/
    - For each target page (specified in arguments or recently changed files):
-     - Navigate to the page using direct URL or site navigation
-     - Take a high-quality screenshot
-     - Analyze the screenshot for the specific changes we implemented
-     - Document any visual issues or improvements needed
+     * Navigate to the page using direct URL or site navigation
+     * Take a high-quality screenshot
+     * Analyze the screenshot for the specific changes we implemented
+     * Document any visual issues or improvements needed
 
 3. **Quality Verification**
    Check each page for:
@@ -27,7 +27,7 @@ Follow these steps systematically to verify our changes:
    - Typography and readability
    - Color scheme consistency
    - Interactive elements (buttons, links, forms)
-     </instructions>
+</instructions>
 
 <examples>
 Common issues to watch for:
@@ -48,11 +48,10 @@ For each page tested, provide:
 4. Overall assessment of visual quality
 
 If you find issues, be specific about:
-
 - Exact location of the problem
 - Expected vs actual behavior
 - Severity level (critical, important, minor)
 - Suggested fix if obvious
-  </reporting>
+</reporting>
 
-Remember: Take your time with each screenshot and analysis. Visual quality directly impacts user experience and our project's professional appearance.
+Remember: Take your time with each screenshot and analysis. Visual quality directly impacts user experience and our project's professional appearance.

.claude/skills/writing-playwright-tests/SKILL.md

@@ -1,200 +0,0 @@
----
-name: writing-playwright-tests
-description: 'Writes Playwright e2e tests for ComfyUI_frontend. Use when creating, modifying, or debugging browser tests. Triggers on: playwright, e2e test, browser test, spec file.'
----
-
-# Writing Playwright Tests for ComfyUI_frontend
-
-## Golden Rules
-
-1. **ALWAYS look at existing tests first.** Search `browser_tests/tests/` for similar patterns before writing new tests.
-
-2. **ALWAYS read the fixture code.** The APIs are in `browser_tests/fixtures/` - read them directly instead of guessing.
-
-3. **Use premade JSON workflow assets** instead of building workflows programmatically.
-   - Assets live in `browser_tests/assets/`
-   - Load with `await comfyPage.workflow.loadWorkflow('feature/my_workflow')`
-   - Create new assets by starting with `browser_tests/assets/default.json` and manually editing the JSON to match your desired graph state
-
-## Vue Nodes vs LiteGraph: Decision Guide
-
-Choose based on **what you're testing**, not personal preference:
-
-| Testing...                                     | Use                              | Why                                      |
-| ---------------------------------------------- | -------------------------------- | ---------------------------------------- |
-| Vue-rendered node UI, DOM widgets, CSS states  | `comfyPage.vueNodes.*`           | Nodes are DOM elements, use locators     |
-| Canvas interactions, connections, legacy nodes | `comfyPage.nodeOps.*`            | Canvas-based, use coordinates/references |
-| Both in same test                              | Pick primary, minimize switching | Avoid confusion                          |
-
-**Vue Nodes requires explicit opt-in:**
-
-```typescript
-await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-await comfyPage.vueNodes.waitForNodes()
-```
-
-**Vue Node state uses CSS classes:**
-
-```typescript
-const BYPASS_CLASS = /before:bg-bypass\/60/
-await expect(node).toHaveClass(BYPASS_CLASS)
-```
-
-## Common Issues
-
-These are frequent causes of flaky tests - check them first, but investigate if they don't apply:
-
-| Symptom                            | Common Cause              | Typical Fix                                                                            |
-| ---------------------------------- | ------------------------- | -------------------------------------------------------------------------------------- |
-| Test passes locally, fails in CI   | Missing nextFrame()       | Add `await comfyPage.nextFrame()` after canvas ops (not needed after `loadWorkflow()`) |
-| Keyboard shortcuts don't work      | Missing focus             | Add `await comfyPage.canvas.click()` first                                             |
-| Double-click doesn't trigger       | Timing too fast           | Add `{ delay: 5 }` option                                                              |
-| Elements end up in wrong position  | Drag animation incomplete | Use `{ steps: 10 }` not `{ steps: 1 }`                                                 |
-| Widget value wrong after drag-drop | Upload incomplete         | Add `{ waitForUpload: true }`                                                          |
-| Test fails when run with others    | Test pollution            | Add `afterEach` with `resetView()`                                                     |
-| Local screenshots don't match CI   | Platform differences      | Screenshots are Linux-only, use PR label                                               |
-
-## Test Tags
-
-Add appropriate tags to every test:
-
-| Tag           | When to Use                               |
-| ------------- | ----------------------------------------- |
-| `@smoke`      | Quick essential tests                     |
-| `@slow`       | Tests > 10 seconds                        |
-| `@screenshot` | Visual regression tests                   |
-| `@canvas`     | Canvas interactions                       |
-| `@node`       | Node-related                              |
-| `@widget`     | Widget-related                            |
-| `@mobile`     | Mobile viewport (runs on Pixel 5 project) |
-| `@2x`         | HiDPI tests (runs on 2x scale project)    |
-
-```typescript
-test.describe('Feature', { tag: ['@screenshot', '@canvas'] }, () => {
-```
-
-## Retry Patterns
-
-**Never use `waitForTimeout`** - it's always wrong.
-
-| Pattern                  | Use Case                                             |
-| ------------------------ | ---------------------------------------------------- |
-| Auto-retrying assertions | `toBeVisible()`, `toHaveText()`, etc. (prefer these) |
-| `expect.poll()`          | Single value polling                                 |
-| `expect().toPass()`      | Multiple assertions that must all pass               |
-
-```typescript
-// Prefer auto-retrying assertions when possible
-await expect(node).toBeVisible()
-
-// Single value polling
-await expect.poll(() => widget.getValue(), { timeout: 2000 }).toBe(100)
-
-// Multiple conditions
-await expect(async () => {
-  expect(await node1.getValue()).toBe('foo')
-  expect(await node2.getValue()).toBe('bar')
-}).toPass({ timeout: 2000 })
-```
-
-## Screenshot Baselines
-
-- **Screenshots are Linux-only.** Don't commit local screenshots.
-- **To update baselines:** Add PR label `New Browser Test Expectations`
-- **Mask dynamic content:**
-  ```typescript
-  await expect(comfyPage.canvas).toHaveScreenshot('page.png', {
-    mask: [page.locator('.timestamp')]
-  })
-  ```
-
-## CI Debugging
-
-1. Download artifacts from failed CI run
-2. Extract and view trace: `npx playwright show-trace trace.zip`
-3. CI deploys HTML report to Cloudflare Pages (link in PR comment)
-4. Reproduce CI: `CI=true pnpm test:browser`
-5. Local runs: `pnpm test:browser:local`
-
-## Anti-Patterns
-
-Avoid these common mistakes:
-
-1. **Arbitrary waits** - Use retrying assertions instead
-
-   ```typescript
-   // ❌ await page.waitForTimeout(500)
-   // ✅ await expect(element).toBeVisible()
-   ```
-
-2. **Implementation-tied selectors** - Use test IDs or semantic selectors
-
-   ```typescript
-   // ❌ page.locator('div.container > button.btn-primary')
-   // ✅ page.getByTestId('submit-button')
-   ```
-
-3. **Missing nextFrame after canvas ops** - Canvas needs sync time
-
-   ```typescript
-   await node.drag({ x: 50, y: 50 })
-   await comfyPage.nextFrame() // Required
-   ```
-
-4. **Shared state between tests** - Tests must be independent
-   ```typescript
-   // ❌ let sharedData  // Outside test
-   // ✅ Define state inside each test
-   ```
-
-## Quick Start Template
-
-```typescript
-// Path depends on test file location - adjust '../' segments accordingly
-import {
-  comfyPageFixture as test,
-  comfyExpect as expect
-} from '../fixtures/ComfyPage'
-
-test.describe('FeatureName', { tag: ['@canvas'] }, () => {
-  test.afterEach(async ({ comfyPage }) => {
-    await comfyPage.canvasOps.resetView()
-  })
-
-  test('should do something', async ({ comfyPage }) => {
-    await comfyPage.workflow.loadWorkflow('myWorkflow')
-
-    const node = (await comfyPage.nodeOps.getNodeRefsByTitle('KSampler'))[0]
-    // ... test logic
-
-    await expect(comfyPage.canvas).toHaveScreenshot('expected.png')
-  })
-})
-```
-
-## Finding Patterns
-
-```bash
-# Find similar tests
-grep -r "KSampler" browser_tests/tests/
-
-# Find usage of a fixture method
-grep -r "loadWorkflow" browser_tests/tests/
-
-# Find tests with specific tag
-grep -r '@screenshot' browser_tests/tests/
-```
-
-## Key Files to Read
-
-| Purpose           | Path                                       |
-| ----------------- | ------------------------------------------ |
-| Main fixture      | `browser_tests/fixtures/ComfyPage.ts`      |
-| Helper classes    | `browser_tests/fixtures/helpers/`          |
-| Component objects | `browser_tests/fixtures/components/`       |
-| Test selectors    | `browser_tests/fixtures/selectors.ts`      |
-| Vue Node helpers  | `browser_tests/fixtures/VueNodeHelpers.ts` |
-| Test assets       | `browser_tests/assets/`                    |
-| Existing tests    | `browser_tests/tests/`                     |
-
-**Read the fixture code directly** - it's the source of truth for available methods.

.coderabbit.yaml

@@ -1,7 +0,0 @@
-issue_enrichment:
-  auto_enrich:
-    enabled: true
-reviews:
-  high_level_summary: false
-  auto_review:
-    drafts: true

.cursor/rules/unit-test.mdc

@@ -0,0 +1,21 @@
+---
+description: Creating unit tests
+globs: 
+alwaysApply: false
+---
+
+# Creating unit tests
+
+- This project uses `vitest` for unit testing
+- Tests are stored in the `test/` directory
+- Tests should be cross-platform compatible; able to run on Windows, macOS, and linux
+  - e.g. the use of `path.resolve`, or `path.join` and `path.sep` to ensure that tests work the same on all platforms
+- Tests should be mocked properly
+  - Mocks should be cleanly written and easy to understand
+  - Mocks should be re-usable where possible
+
+## Unit test style
+
+- Prefer the use of `test.extend` over loose variables
+  - To achieve this, import `test as baseTest` from `vitest`
+- Never use `it`; `test` should be used in place of this

.cursorrules

@@ -0,0 +1,61 @@
+# Vue 3 Composition API Project Rules
+
+## Vue 3 Composition API Best Practices
+- Use setup() function for component logic
+- Utilize ref and reactive for reactive state
+- Implement computed properties with computed()
+- Use watch and watchEffect for side effects
+- Implement lifecycle hooks with onMounted, onUpdated, etc.
+- Utilize provide/inject for dependency injection
+- Use vue 3.5 style of default prop declaration. Example:
+
+```typescript
+const { nodes, showTotal = true } = defineProps<{
+  nodes: ApiNodeCost[]
+  showTotal?: boolean
+}>()
+```
+
+- Organize vue component in <template> <script> <style> order
+
+## Project Structure
+```
+src/
+  components/
+  constants/
+  composables/
+  views/
+  stores/
+  services/
+  App.vue
+  main.ts
+```
+
+## Styling Guidelines
+- Use Tailwind CSS for styling
+- Implement responsive design with Tailwind CSS
+
+## PrimeVue Component Guidelines
+DO NOT use deprecated PrimeVue components. Use these replacements instead:
+- Dropdown → Use Select (import from 'primevue/select')
+- OverlayPanel → Use Popover (import from 'primevue/popover')
+- Calendar → Use DatePicker (import from 'primevue/datepicker')
+- InputSwitch → Use ToggleSwitch (import from 'primevue/toggleswitch')
+- Sidebar → Use Drawer (import from 'primevue/drawer')
+- Chips → Use AutoComplete with multiple enabled and typeahead disabled
+- TabMenu → Use Tabs without panels
+- Steps → Use Stepper without panels
+- InlineMessage → Use Message component
+
+## Development Guidelines
+1. Leverage VueUse functions for performance-enhancing styles
+2. Use es-toolkit for utility functions
+3. Use TypeScript for type safety
+4. Implement proper props and emits definitions
+5. Utilize Vue 3's Teleport component when needed
+6. Use Suspense for async components
+7. Implement proper error handling
+8. Follow Vue 3 style guide and naming conventions
+9. Use Vite for fast development and building
+10. Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json
+11. Never use deprecated PrimeVue components listed above

.env_example

@@ -14,25 +14,25 @@ DEV_SERVER_COMFYUI_URL=http://127.0.0.1:8188
 # Allow dev server access from remote IP addresses.
 # If true, the vite dev server will listen on all addresses, including LAN
 # and public addresses.
-# VITE_REMOTE_DEV=true
+VITE_REMOTE_DEV=false
 
 # The directory containing the ComfyUI installation used to run Playwright tests.
 # If you aren't using a separate install for testing, point this to your regular install.
 TEST_COMFYUI_DIR=/home/ComfyUI
 
 # Whether to enable minification of the frontend code.
-# ENABLE_MINIFY=true
+ENABLE_MINIFY=true
 
 # Whether to disable proxying the `/templates` route. If true, allows you to
 # serve templates from the ComfyUI_frontend/public/templates folder (for
 # locally testing changes to templates). When false or nonexistent, the
 # templates are served via the normal method from the server's python site
 # packages.
-# DISABLE_TEMPLATES_PROXY=true
+DISABLE_TEMPLATES_PROXY=false
 
 # If playwright tests are being run via vite dev server, Vue plugins will
 # invalidate screenshots.  When `true`, vite plugins will not be loaded.
-# DISABLE_VUE_PLUGINS=true
+DISABLE_VUE_PLUGINS=false
 
 # Algolia credentials required for developing with the new custom node manager.
 ALGOLIA_APP_ID=4E0RO38HS8

.gitattributes

@@ -1,5 +1,16 @@
-# Force all text files to use LF line endings
-* text=auto eol=lf
+# Default
+* text=auto
+
+# Force TS to LF to make the unixy scripts not break on Windows
+*.cjs text eol=lf
+*.js text eol=lf
+*.json text eol=lf
+*.mjs text eol=lf
+*.mts text eol=lf
+*.snap text eol=lf
+*.ts text eol=lf
+*.vue text eol=lf
+*.yaml text eol=lf
 
 # Generated files
 packages/registry-types/src/comfyRegistryTypes.ts linguist-generated=true

.github/AGENTS.md

@@ -1,15 +0,0 @@
-# PR Review Context
-
-Context for automated PR review system.
-
-## Review Scope
-
-This automated review performs comprehensive analysis:
-
-- Architecture and design patterns
-- Security vulnerabilities
-- Performance implications
-- Code quality and maintainability
-- Integration concerns
-
-For implementation details, see `.claude/commands/comprehensive-pr-review.md`.

.github/CLAUDE.md

@@ -1,4 +1,36 @@
-<!-- A rose by any other name would smell as sweet,
-     But Claude insists on files named for its own conceit. -->
+# ComfyUI Frontend - Claude Review Context
 
-@AGENTS.md
+This file provides additional context for the automated PR review system.
+
+## Quick Reference
+
+### PrimeVue Component Migrations
+
+When reviewing, flag these deprecated components:
+- `Dropdown` → Use `Select` from 'primevue/select'
+- `OverlayPanel` → Use `Popover` from 'primevue/popover'
+- `Calendar` → Use `DatePicker` from 'primevue/datepicker'
+- `InputSwitch` → Use `ToggleSwitch` from 'primevue/toggleswitch'
+- `Sidebar` → Use `Drawer` from 'primevue/drawer'
+- `Chips` → Use `AutoComplete` with multiple enabled and typeahead disabled
+- `TabMenu` → Use `Tabs` without panels
+- `Steps` → Use `Stepper` without panels
+- `InlineMessage` → Use `Message` component
+
+### API Utilities Reference
+
+- `api.apiURL()` - Backend API calls (/prompt, /queue, /view, etc.)
+- `api.fileURL()` - Static file access (templates, extensions)
+- `$t()` / `i18n.global.t()` - Internationalization
+- `DOMPurify.sanitize()` - HTML sanitization
+
+## Review Scope
+
+This automated review performs comprehensive analysis including:
+- Architecture and design patterns
+- Security vulnerabilities
+- Performance implications
+- Code quality and maintainability
+- Integration concerns
+
+For implementation details, see `.claude/commands/comprehensive-pr-review.md`.

.github/ISSUE_TEMPLATE/bug-report.yaml

@@ -10,7 +10,10 @@ body:
       options:
         - label: I am running the latest version of ComfyUI
           required: true
-        - label: I have custom nodes enabled
+        - label: I have searched existing issues to make sure this isn't a duplicate
+          required: true
+        - label: I have tested with all custom nodes disabled ([see how](https://docs.comfy.org/troubleshooting/custom-node-issues#step-1%3A-test-with-all-custom-nodes-disabled))
+          required: true
 
   - type: textarea
     id: description
@@ -57,7 +60,7 @@ body:
     attributes:
       label: ComfyUI Frontend Version
       description: Found in Settings > About (e.g., "1.3.45")
-      placeholder: '1.3.45'
+      placeholder: "1.3.45"
     validations:
       required: true
 

.github/ISSUE_TEMPLATE/feature-request.yaml

@@ -4,6 +4,13 @@ labels: []
 type: Feature
 
 body:
+  - type: checkboxes
+    attributes:
+      label: Is there an existing issue for this?
+      description: Please search to see if an issue already exists for the problem you're experiencing, and that it's not addressed in a recent build/commit.
+      options:
+        - label: I have searched the existing issues and checked the recent builds/commits
+          required: true
   - type: markdown
     attributes:
       value: |

.github/actions/comment-release-links/action.yaml

@@ -104,14 +104,14 @@ runs:
 
     - name: Find existing comment
       id: find
-      uses: peter-evans/find-comment@b30e6a3c0ed37e7c023ccd3f1db5c6c0b0c23aad # v4.0.0
+      uses: peter-evans/find-comment@b30e6a3c0ed37e7c023ccd3f1db5c6c0b0c23aad
       with:
         issue-number: ${{ inputs.issue-number || github.event.pull_request.number }}
         comment-author: github-actions[bot]
         body-includes: ${{ steps.build.outputs.marker_search }}
 
     - name: Post or update comment
-      uses: peter-evans/create-or-update-comment@e8674b075228eee787fea43ef493e45ece1004c9 # v5.0.0
+      uses: peter-evans/create-or-update-comment@e8674b075228eee787fea43ef493e45ece1004c9
       with:
         issue-number: ${{ inputs.issue-number || github.event.pull_request.number }}
         comment-id: ${{ steps.find.outputs.comment-id }}

.github/actions/setup-comfyui-server/action.yml

@@ -16,7 +16,7 @@ runs:
 
     # Checkout ComfyUI repo, install the dev_tools node and start server
     - name: Checkout ComfyUI
-      uses: actions/checkout@v6
+      uses: actions/checkout@v5
       with:
         repository: 'comfyanonymous/ComfyUI'
         path: 'ComfyUI'
@@ -33,7 +33,7 @@ runs:
         fi
 
     - name: Setup Python
-      uses: actions/setup-python@v6
+      uses: actions/setup-python@v4
       with:
         python-version: '3.10'
 

.github/actions/setup-frontend/action.yml

@@ -12,17 +12,29 @@ runs:
 
     # Install pnpm, Node.js, build frontend
     - name: Install pnpm
-      uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
+      uses: pnpm/action-setup@v4
       with:
         version: 10
 
     - name: Setup Node.js
-      uses: actions/setup-node@v6
+      uses: actions/setup-node@v4
       with:
         node-version: 'lts/*'
         cache: 'pnpm'
         cache-dependency-path: './pnpm-lock.yaml'
 
+    # Restore tool caches before running any build/lint operations
+    - name: Restore tool output cache
+      uses: actions/cache/restore@v4
+      with:
+        path: |
+          ./.cache
+          ./tsconfig.tsbuildinfo
+        key: tool-cache-${{ runner.os }}-${{ hashFiles('./pnpm-lock.yaml') }}-${{ hashFiles('./src/**/*.{ts,vue,js,mts}', './*.config.*') }}
+        restore-keys: |
+          tool-cache-${{ runner.os }}-${{ hashFiles('./pnpm-lock.yaml') }}-
+          tool-cache-${{ runner.os }}-
+
     - name: Install dependencies
       shell: bash
       run: pnpm install --frozen-lockfile

.github/actions/setup-playwright/action.yml

@@ -11,7 +11,7 @@ runs:
         echo "playwright-version=$PLAYWRIGHT_VERSION" >> $GITHUB_OUTPUT
 
     - name: Cache Playwright Browsers
-      uses: actions/cache@v5 # v5.0.2
+      uses: actions/cache@v4
       id: cache-playwright-browsers
       with:
         path: '~/.cache/ms-playwright'

.github/actions/start-comfyui-server/action.yaml

@@ -1,23 +0,0 @@
-name: Start ComfyUI Server
-description: 'Start ComfyUI server in a container environment (assumes ComfyUI is pre-installed)'
-
-inputs:
-  front_end_root:
-    description: 'Path to frontend dist directory'
-    required: false
-    default: '$GITHUB_WORKSPACE/dist'
-  timeout:
-    description: 'Timeout in seconds for server startup'
-    required: false
-    default: '600'
-
-runs:
-  using: 'composite'
-  steps:
-    - name: Copy devtools and start server
-      shell: bash
-      run: |
-        set -euo pipefail
-        cp -r ./tools/devtools/* /ComfyUI/custom_nodes/ComfyUI_devtools/
-        cd /ComfyUI && python3 main.py --cpu --multi-user --front-end-root "${{ inputs.front_end_root }}" &
-        wait-for-it --service 127.0.0.1:8188 -t ${{ inputs.timeout }}

.github/copilot-instructions.md

@@ -34,4 +34,4 @@ Follow Vue 3 style guide and naming conventions
 
 Use Vite for fast development and building
 
-Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json.
+Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json.

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

@@ -13,15 +13,15 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
 
       - name: Install pnpm
-        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
+        uses: pnpm/action-setup@v4
         with:
           version: 10
 
       - name: Setup Node.js
-        uses: actions/setup-node@v6
+        uses: actions/setup-node@v4
         with:
           node-version: lts/*
           cache: 'pnpm'
@@ -36,7 +36,7 @@ jobs:
           echo "NEW_VERSION=$NEW_VERSION" >> $GITHUB_OUTPUT
 
       - name: Create Pull Request
-        uses: peter-evans/create-pull-request@c0f553fe549906ede9cf27b5156039d195d2ece0 # v8.1.0
+        uses: peter-evans/create-pull-request@271a8d0340265f705b14b6d32b9829c1cb33d45e
         with:
           token: ${{ secrets.PR_GH_TOKEN }}
           commit-message: '[chore] Update electron-types to ${{ steps.get-version.outputs.NEW_VERSION }}'

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

@@ -18,15 +18,15 @@ jobs:
       pull-requests: write
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
 
       - name: Install pnpm
-        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
+        uses: pnpm/action-setup@v4
         with:
           version: 10
 
       - name: Setup Node.js
-        uses: actions/setup-node@v6
+        uses: actions/setup-node@v4
         with:
           node-version: lts/*
           cache: 'pnpm'
@@ -35,7 +35,7 @@ jobs:
         run: pnpm install --frozen-lockfile
 
       - name: Checkout ComfyUI-Manager repository
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
         with:
           repository: Comfy-Org/ComfyUI-Manager
           path: ComfyUI-Manager
@@ -86,7 +86,7 @@ jobs:
 
       - name: Create Pull Request
         if: steps.check-changes.outputs.changed == 'true'
-        uses: peter-evans/create-pull-request@c0f553fe549906ede9cf27b5156039d195d2ece0 # v8.1.0
+        uses: peter-evans/create-pull-request@271a8d0340265f705b14b6d32b9829c1cb33d45e
         with:
           token: ${{ secrets.PR_GH_TOKEN }}
           commit-message: '[chore] Update ComfyUI-Manager API types from ComfyUI-Manager@${{ steps.manager-info.outputs.commit }}'

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

@@ -17,15 +17,15 @@ jobs:
       pull-requests: write
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
 
       - name: Install pnpm
-        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
+        uses: pnpm/action-setup@v4
         with:
           version: 10
 
       - name: Setup Node.js
-        uses: actions/setup-node@v6
+        uses: actions/setup-node@v4
         with:
           node-version: lts/*
           cache: 'pnpm'
@@ -34,7 +34,7 @@ jobs:
         run: pnpm install --frozen-lockfile
 
       - name: Checkout comfy-api repository
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
         with:
           repository: Comfy-Org/comfy-api
           path: comfy-api
@@ -87,7 +87,7 @@ jobs:
 
       - name: Create Pull Request
         if: steps.check-changes.outputs.changed == 'true'
-        uses: peter-evans/create-pull-request@c0f553fe549906ede9cf27b5156039d195d2ece0 # v8.1.0
+        uses: peter-evans/create-pull-request@271a8d0340265f705b14b6d32b9829c1cb33d45e
         with:
           token: ${{ secrets.PR_GH_TOKEN }}
           commit-message: '[chore] Update Comfy Registry API types from comfy-api@${{ steps.api-info.outputs.commit }}'

.github/workflows/ci-dist-telemetry-scan.yaml

@@ -1,81 +0,0 @@
-name: 'CI: Dist Telemetry Scan'
-
-on:
-  pull_request:
-    branches-ignore: [wip/*, draft/*, temp/*]
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
-  cancel-in-progress: true
-
-permissions:
-  contents: read
-
-jobs:
-  scan:
-    runs-on: ubuntu-latest
-
-    steps:
-      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
-
-      - name: Install pnpm
-        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
-        with:
-          version: 10
-
-      - name: Use Node.js
-        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
-        with:
-          node-version: 'lts/*'
-          cache: 'pnpm'
-
-      - name: Install dependencies
-        run: pnpm install --frozen-lockfile
-
-      - name: Build project
-        run: pnpm build
-        env:
-          DISTRIBUTION: localhost
-
-      - name: Scan dist for GTM telemetry references
-        run: |
-          set -euo pipefail
-          echo '🔍 Scanning for Google Tag Manager references...'
-          if rg --no-ignore -n \
-            -g '*.html' \
-            -g '*.js' \
-            -e 'Google Tag Manager' \
-            -e '(?i)\bgtm\.js\b' \
-            -e '(?i)googletagmanager\.com/gtm\.js\\?id=' \
-            -e '(?i)googletagmanager\.com/ns\.html\\?id=' \
-            dist; then
-            echo '❌ ERROR: Google Tag Manager references found in dist assets!'
-            echo 'GTM must be properly tree-shaken from OSS builds.'
-            exit 1
-          fi
-          echo '✅ No GTM references found'
-
-      - name: Scan dist for Mixpanel telemetry references
-        run: |
-          set -euo pipefail
-          echo '🔍 Scanning for Mixpanel references...'
-          if rg --no-ignore -n \
-            -g '*.html' \
-            -g '*.js' \
-            -e '(?i)mixpanel\.init' \
-            -e '(?i)mixpanel\.identify' \
-            -e 'MixpanelTelemetryProvider' \
-            -e 'mp\.comfy\.org' \
-            -e 'mixpanel-browser' \
-            -e '(?i)mixpanel\.track\(' \
-            dist; then
-            echo '❌ ERROR: Mixpanel references found in dist assets!'
-            echo 'Mixpanel must be properly tree-shaken from OSS builds.'
-            echo ''
-            echo 'To fix this:'
-            echo '1. Use the TelemetryProvider pattern (see src/platform/telemetry/)'
-            echo '2. Call telemetry via useTelemetry() hook'
-            echo '3. Use conditional dynamic imports behind isCloud checks'
-            exit 1
-          fi
-          echo '✅ No Mixpanel references found'

.github/workflows/ci-json-validation.yaml

@@ -1,5 +1,5 @@
 # Description: Validates JSON syntax in all tracked .json files (excluding tsconfig*.json) using jq
-name: 'CI: JSON Validation'
+name: "CI: JSON Validation"
 
 on:
   push:
@@ -13,6 +13,6 @@ jobs:
   json-lint:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v6
+      - uses: actions/checkout@v5
       - name: Validate JSON syntax
         run: ./scripts/cicd/check-json.sh

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

@@ -1,5 +1,5 @@
 # Description: Linting and code formatting validation for pull requests
-name: 'CI: Lint Format'
+name: "CI: Lint Format"
 
 on:
   pull_request:
@@ -18,21 +18,23 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout PR
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
         with:
           ref: ${{ !github.event.pull_request.head.repo.fork && github.head_ref || github.ref }}
-          token: ${{ !github.event.pull_request.head.repo.fork && secrets.PR_GH_TOKEN || github.token }}
 
-      - name: Setup frontend
-        uses: ./.github/actions/setup-frontend
-
-      - name: Detect browser_tests changes
-        id: changed-paths
-        uses: dorny/paths-filter@de90cc6fb38fc0963ad72b210f1f284cd68cea36 # v3.0.2
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
         with:
-          filters: |
-            browser_tests:
-              - 'browser_tests/**'
+          version: 10
+
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 'lts/*'
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
 
       - name: Run ESLint with auto-fix
         run: pnpm lint:fix
@@ -40,7 +42,7 @@ jobs:
       - name: Run Stylelint with auto-fix
         run: pnpm stylelint:fix
 
-      - name: Run oxfmt with auto-format
+      - name: Run Prettier with auto-format
         run: pnpm format
 
       - name: Check for changes
@@ -58,7 +60,7 @@ jobs:
           git config --local user.email "action@github.com"
           git config --local user.name "GitHub Action"
           git add .
-          git commit -m "[automated] Apply ESLint and Oxfmt fixes"
+          git commit -m "[automated] Apply ESLint and Prettier fixes"
           git push
 
       - name: Final validation
@@ -68,27 +70,23 @@ jobs:
           pnpm format:check
           pnpm knip
 
-      - name: Typecheck browser tests
-        if: steps.changed-paths.outputs.browser_tests == 'true'
-        run: pnpm typecheck:browser
-
       - name: Comment on PR about auto-fix
         if: steps.verify-changed-files.outputs.changed == 'true' && github.event.pull_request.head.repo.full_name == github.repository
         continue-on-error: true
-        uses: actions/github-script@v8
+        uses: actions/github-script@v7
         with:
           script: |
             github.rest.issues.createComment({
               issue_number: context.issue.number,
               owner: context.repo.owner,
               repo: context.repo.repo,
-              body: '## 🔧 Auto-fixes Applied\n\nThis PR has been automatically updated to fix linting and formatting issues.\n\n**⚠️ Important**: Your local branch is now behind. Run `git pull` before making additional changes to avoid conflicts.\n\n### Changes made:\n- ESLint auto-fixes\n- Oxfmt formatting'
+              body: '## 🔧 Auto-fixes Applied\n\nThis PR has been automatically updated to fix linting and formatting issues.\n\n**⚠️ Important**: Your local branch is now behind. Run `git pull` before making additional changes to avoid conflicts.\n\n### Changes made:\n- ESLint auto-fixes\n- Prettier formatting'
             })
 
       - name: Comment on PR about manual fix needed
         if: steps.verify-changed-files.outputs.changed == 'true' && github.event.pull_request.head.repo.full_name != github.repository
         continue-on-error: true
-        uses: actions/github-script@v8
+        uses: actions/github-script@v7
         with:
           script: |
             github.rest.issues.createComment({

.github/workflows/ci-oss-assets-validation.yaml

@@ -1,118 +0,0 @@
-name: 'CI: OSS Assets Validation'
-
-on:
-  pull_request:
-    branches-ignore: [wip/*, draft/*, temp/*]
-  push:
-    branches: [main, dev*]
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
-  cancel-in-progress: true
-
-permissions:
-  contents: read
-
-jobs:
-  validate-fonts:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
-
-      - name: Install pnpm
-        uses: pnpm/action-setup@9fd676a19091d4595eefd76e4bd31c97133911f1 # v4.2.0
-        with:
-          version: 10
-
-      - name: Use Node.js
-        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
-        with:
-          node-version: 'lts/*'
-          cache: 'pnpm'
-
-      - name: Install dependencies
-        run: pnpm install --frozen-lockfile
-
-      - name: Build project
-        run: pnpm build
-        env:
-          DISTRIBUTION: localhost
-
-      - name: Check for proprietary fonts in dist
-        run: |
-          set -euo pipefail
-          echo '🔍 Checking dist for proprietary ABCROM fonts...'
-
-          if [ ! -d "dist" ] || [ -z "$(ls -A dist)" ]; then
-            echo '❌ ERROR: dist/ directory missing or empty!'
-            exit 1
-          fi
-
-          # Check for ABCROM font files
-          if find dist/ -type f -iname '*abcrom*' \
-            \( -name '*.woff' -o -name '*.woff2' -o -name '*.ttf' -o -name '*.otf' \) \
-            -print -quit | grep -q .; then
-            echo ''
-            echo '❌ ERROR: Found proprietary ABCROM font files in dist!'
-            echo ''
-            find dist/ -type f -iname '*abcrom*' \
-              \( -name '*.woff' -o -name '*.woff2' -o -name '*.ttf' -o -name '*.otf' \)
-            echo ''
-            echo 'ABCROM fonts are proprietary and should not ship to OSS builds.'
-            echo ''
-            echo 'To fix this:'
-            echo '1. Use conditional font loading based on isCloud'
-            echo '2. Ensure fonts are dynamically imported, not bundled'
-            echo '3. Check vite config for font handling'
-            exit 1
-          fi
-
-          echo '✅ No proprietary fonts found in dist'
-
-  validate-licenses:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
-
-      - name: Install pnpm
-        uses: pnpm/action-setup@9fd676a19091d4595eefd76e4bd31c97133911f1 # v4.2.0
-        with:
-          version: 10
-
-      - name: Use Node.js
-        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
-        with:
-          node-version: 'lts/*'
-          cache: 'pnpm'
-
-      - name: Install dependencies
-        run: pnpm install --frozen-lockfile
-
-      - name: Validate production dependency licenses
-        run: |
-          set -euo pipefail
-          echo '🔍 Checking production dependency licenses...'
-
-          # Use license-checker-rseidelsohn (actively maintained fork, handles monorepos)
-          # Exclude internal @comfyorg packages from license check
-          # Run in if condition to capture exit code
-          if npx license-checker-rseidelsohn@4 \
-            --production \
-            --summary \
-            --excludePackages '@comfyorg/comfyui-frontend;@comfyorg/design-system;@comfyorg/registry-types;@comfyorg/shared-frontend-utils;@comfyorg/tailwind-utils;@comfyorg/comfyui-electron-types' \
-            --onlyAllow 'MIT;MIT*;Apache-2.0;BSD-2-Clause;BSD-3-Clause;ISC;0BSD;BlueOak-1.0.0;Python-2.0;CC0-1.0;Unlicense;(MIT OR Apache-2.0);(MIT OR GPL-3.0);(Apache-2.0 OR MIT);(MPL-2.0 OR Apache-2.0);CC-BY-4.0;CC-BY-3.0;GPL-3.0-only'; then
-            echo ''
-            echo '✅ All production dependency licenses are approved!'
-          else
-            echo ''
-            echo '❌ ERROR: Found dependencies with non-approved licenses!'
-            echo ''
-            echo 'To fix this:'
-            echo '1. Check the license of the problematic package'
-            echo '2. Find an alternative package with an approved license'
-            echo '3. If the license is safe and OSI-approved, add it to the --onlyAllow list'
-            echo ''
-            echo 'For more info on OSI-approved licenses:'
-            echo 'https://opensource.org/licenses'
-            exit 1
-          fi

.github/workflows/ci-perf-report.yaml

@@ -1,110 +0,0 @@
-name: 'CI: Performance Report'
-
-on:
-  push:
-    branches: [main, core/*]
-    paths-ignore: ['**/*.md']
-  pull_request:
-    branches-ignore: [wip/*, draft/*, temp/*]
-    paths-ignore: ['**/*.md']
-
-concurrency:
-  group: perf-${{ github.ref }}
-  cancel-in-progress: true
-
-permissions:
-  contents: read
-  pull-requests: write
-
-jobs:
-  perf-tests:
-    if: github.repository == 'Comfy-Org/ComfyUI_frontend'
-    runs-on: ubuntu-latest
-    timeout-minutes: 30
-    container:
-      image: ghcr.io/comfy-org/comfyui-ci-container:0.0.12
-      credentials:
-        username: ${{ github.actor }}
-        password: ${{ secrets.GITHUB_TOKEN }}
-    permissions:
-      contents: read
-      packages: read
-
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v6
-
-      - name: Setup frontend
-        uses: ./.github/actions/setup-frontend
-        with:
-          include_build_step: true
-
-      - name: Start ComfyUI server
-        uses: ./.github/actions/start-comfyui-server
-
-      - name: Run performance tests
-        id: perf
-        continue-on-error: true
-        run: pnpm exec playwright test --project=performance --workers=1
-
-      - name: Upload perf metrics
-        if: always()
-        uses: actions/upload-artifact@v6
-        with:
-          name: perf-metrics
-          path: test-results/perf-metrics.json
-          retention-days: 30
-          if-no-files-found: warn
-
-  report:
-    needs: perf-tests
-    if: github.event_name == 'pull_request'
-    runs-on: ubuntu-latest
-    permissions:
-      contents: read
-      pull-requests: write
-
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v6
-
-      - name: Setup Node
-        uses: actions/setup-node@v6
-        with:
-          node-version: 22
-
-      - name: Download PR perf metrics
-        continue-on-error: true
-        uses: actions/download-artifact@v7
-        with:
-          name: perf-metrics
-          path: test-results/
-
-      - name: Download baseline perf metrics
-        uses: dawidd6/action-download-artifact@0bd50d53a6d7fb5cb921e607957e9cc12b4ce392 # v12
-        with:
-          branch: ${{ github.event.pull_request.base.ref }}
-          workflow: ci-perf-report.yaml
-          event: push
-          name: perf-metrics
-          path: temp/perf-baseline/
-          if_no_artifact_found: warn
-
-      - name: Generate perf report
-        run: npx --yes tsx scripts/perf-report.ts > perf-report.md
-
-      - name: Read perf report
-        id: perf-report
-        uses: juliangruber/read-file-action@b549046febe0fe86f8cb4f93c24e284433f9ab58 # v1.1.7
-        with:
-          path: ./perf-report.md
-
-      - name: Create or update PR comment
-        uses: actions-cool/maintain-one-comment@4b2dbf086015f892dcb5e8c1106f5fccd6c1476b # v3.2.0
-        with:
-          token: ${{ secrets.GITHUB_TOKEN }}
-          number: ${{ github.event.pull_request.number }}
-          body: |
-            ${{ steps.perf-report.outputs.content }}
-            <!-- COMFYUI_FRONTEND_PERF -->
-          body-include: '<!-- COMFYUI_FRONTEND_PERF -->'

.github/workflows/ci-python-validation.yaml

@@ -1,5 +1,5 @@
 # Description: Validates Python code in tools/devtools directory
-name: 'CI: Python Validation'
+name: "CI: Python Validation"
 
 on:
   pull_request:
@@ -16,10 +16,10 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
 
       - name: Set up Python
-        uses: actions/setup-python@v6
+        uses: actions/setup-python@v5
         with:
           python-version: '3.11'
 

.github/workflows/ci-shell-validation.yaml

@@ -1,26 +0,0 @@
-# Description: Runs shellcheck on tracked shell scripts when they change
-name: 'CI: Shell Validation'
-
-on:
-  push:
-    branches:
-      - main
-    paths:
-      - '**/*.sh'
-  pull_request:
-    paths:
-      - '**/*.sh'
-
-jobs:
-  shell-lint:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v6
-
-      - name: Install shellcheck
-        run: |
-          sudo apt-get update
-          sudo apt-get install -y shellcheck
-
-      - name: Run shellcheck
-        run: bash ./scripts/cicd/check-shell.sh

.github/workflows/ci-size-data.yaml

@@ -1,4 +1,4 @@
-name: 'CI: Size Data'
+name: "CI: Size Data"
 
 on:
   push:
@@ -17,10 +17,21 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v6
+      - uses: actions/checkout@v5
 
-      - name: Setup frontend
-        uses: ./.github/actions/setup-frontend
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4.1.0
+        with:
+          version: 10
+
+      - name: Install Node.js
+        uses: actions/setup-node@v5
+        with:
+          node-version: '24.x'
+          cache: pnpm
+
+      - name: Install dependencies
+        run: pnpm install
 
       - name: Build project
         run: pnpm build
@@ -35,7 +46,7 @@ jobs:
           echo ${{ github.base_ref }} > ./temp/size/base.txt
 
       - name: Upload size data
-        uses: actions/upload-artifact@v6
+        uses: actions/upload-artifact@v4
         with:
           name: size-data
           path: temp/size

.github/workflows/ci-tests-e2e-forks.yaml

@@ -1,11 +1,14 @@
 # Description: Deploys test results from forked PRs (forks can't access deployment secrets)
-name: 'CI: Tests E2E (Deploy for Forks)'
+name: "CI: Tests E2E (Deploy for Forks)"
 
 on:
   workflow_run:
-    workflows: ['CI: Tests E2E']
+    workflows: ["CI: Tests E2E"]
     types: [requested, completed]
 
+env:
+  DATE_FORMAT: '+%m/%d/%Y, %I:%M:%S %p'
+
 jobs:
   deploy-and-comment-forked-pr:
     runs-on: ubuntu-latest
@@ -28,11 +31,11 @@ jobs:
           echo "Is forked: ${{ github.event.workflow_run.head_repository.full_name != github.event.workflow_run.repository.full_name }}"
 
       - name: Checkout repository
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
 
       - name: Get PR Number
         id: pr
-        uses: actions/github-script@v8
+        uses: actions/github-script@v7
         with:
           script: |
             const { data: prs } = await github.rest.pulls.list({
@@ -60,11 +63,12 @@ jobs:
           ./scripts/cicd/pr-playwright-deploy-and-comment.sh \
             "${{ steps.pr.outputs.result }}" \
             "${{ github.event.workflow_run.head_branch }}" \
-            "starting"
+            "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@v7
+        uses: actions/download-artifact@v4
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
           run-id: ${{ github.event.workflow_run.id }}
@@ -77,7 +81,6 @@ jobs:
           CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
           CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
           GITHUB_TOKEN: ${{ github.token }}
-          GITHUB_SHA: ${{ github.event.workflow_run.head_sha }}
         run: |
           # Rename merged report if exists
           [ -d "reports/playwright-report-chromium-merged" ] && \

.github/workflows/ci-tests-e2e.yaml

@@ -1,14 +1,12 @@
 # Description: End-to-end testing with Playwright across multiple browsers, deploys test reports to Cloudflare Pages
-name: 'CI: Tests E2E'
+name: "CI: Tests E2E"
 
 on:
   push:
     branches: [main, master, core/*, desktop/*]
-    paths-ignore: ['**/*.md']
   pull_request:
-    branches-ignore: [wip/*, draft/*, temp/*]
-    paths-ignore: ['**/*.md']
-  workflow_dispatch:
+    branches-ignore:
+      [wip/*, draft/*, temp/*, vue-nodes-migration, sno-playwright-*]
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}
@@ -17,56 +15,65 @@ concurrency:
 jobs:
   setup:
     runs-on: ubuntu-latest
+    outputs:
+      cache-key: ${{ steps.cache-key.outputs.key }}
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
+
+      # Setup Test Environment, build frontend but do not start server yet
+      - name: Setup ComfyUI server
+        uses: ./.github/actions/setup-comfyui-server
       - name: Setup frontend
         uses: ./.github/actions/setup-frontend
         with:
           include_build_step: true
+      - name: Setup Playwright
+        uses: ./.github/actions/setup-playwright  # Setup Playwright and cache browsers
 
-      # Upload only built dist/ (containerized test jobs will pnpm install without cache)
-      - name: Upload built frontend
-        uses: actions/upload-artifact@v6
+      # Save the entire workspace as cache for later test jobs to restore
+      - name: Generate cache key
+        id: cache-key
+        run: echo "key=$(date +%s)" >> $GITHUB_OUTPUT
+      - name: Save cache
+        uses: actions/cache/save@5a3ec84eff668545956fd18022155c47e93e2684
         with:
-          name: frontend-dist
-          path: dist/
-          retention-days: 1
+          path: .
+          key: comfyui-setup-${{ steps.cache-key.outputs.key }}
 
   # Sharded chromium tests
   playwright-tests-chromium-sharded:
     needs: setup
     runs-on: ubuntu-latest
-    timeout-minutes: 60
-    container:
-      image: ghcr.io/comfy-org/comfyui-ci-container:0.0.12
-      credentials:
-        username: ${{ github.actor }}
-        password: ${{ secrets.GITHUB_TOKEN }}
     permissions:
       contents: read
-      packages: read
     strategy:
       fail-fast: false
       matrix:
         shardIndex: [1, 2, 3, 4, 5, 6, 7, 8]
         shardTotal: [8]
     steps:
-      - name: Checkout repository
-        uses: actions/checkout@v6
-      - name: Download built frontend
-        uses: actions/download-artifact@v7
+      # download built frontend repo from setup job
+      - name: Wait for cache propagation
+        run: sleep 10
+      - name: Restore cached setup
+        uses: actions/cache/restore@5a3ec84eff668545956fd18022155c47e93e2684
         with:
-          name: frontend-dist
-          path: dist/
+          fail-on-cache-miss: true
+          path: .
+          key: comfyui-setup-${{ needs.setup.outputs.cache-key }}
 
-      - name: Start ComfyUI server
-        uses: ./.github/actions/start-comfyui-server
+      # Setup Test Environment for this runner, start server, use cached built frontend ./dist from 'setup' job
+      - name: Setup ComfyUI server
+        uses: ./.github/actions/setup-comfyui-server
+        with:
+          launch_server: true
+      - name: Setup nodejs, pnpm, reuse built frontend
+        uses: ./.github/actions/setup-frontend
+      - name: Setup Playwright
+        uses: ./.github/actions/setup-playwright
 
-      - name: Install frontend deps
-        run: pnpm install --frozen-lockfile
-
-      # Run sharded tests (browsers pre-installed in container)
+      # Run sharded tests and upload sharded reports
       - 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
@@ -74,7 +81,7 @@ jobs:
           PLAYWRIGHT_BLOB_OUTPUT_DIR: ./blob-report
 
       - name: Upload blob report
-        uses: actions/upload-artifact@v6
+        uses: actions/upload-artifact@v4
         if: ${{ !cancelled() }}
         with:
           name: blob-report-chromium-${{ matrix.shardIndex }}
@@ -86,70 +93,69 @@ jobs:
     timeout-minutes: 15
     needs: setup
     runs-on: ubuntu-latest
-    container:
-      image: ghcr.io/comfy-org/comfyui-ci-container:0.0.12
-      credentials:
-        username: ${{ github.actor }}
-        password: ${{ secrets.GITHUB_TOKEN }}
     permissions:
       contents: read
-      packages: read
     strategy:
       fail-fast: false
       matrix:
         browser: [chromium-2x, chromium-0.5x, mobile-chrome]
     steps:
-      - name: Checkout repository
-        uses: actions/checkout@v6
-      - name: Download built frontend
-        uses: actions/download-artifact@v7
+      # download built frontend repo from setup job
+      - name: Wait for cache propagation
+        run: sleep 10
+      - name: Restore cached setup
+        uses: actions/cache/restore@5a3ec84eff668545956fd18022155c47e93e2684
         with:
-          name: frontend-dist
-          path: dist/
+          fail-on-cache-miss: true
+          path: .
+          key: comfyui-setup-${{ needs.setup.outputs.cache-key }}
 
-      - name: Start ComfyUI server
-        uses: ./.github/actions/start-comfyui-server
+      # Setup Test Environment for this runner, start server, use cached built frontend ./dist from 'setup' job
+      - name: Setup ComfyUI server
+        uses: ./.github/actions/setup-comfyui-server
+        with:
+          launch_server: true
+      - name: Setup nodejs, pnpm, reuse built frontend
+        uses: ./.github/actions/setup-frontend
+      - name: Setup Playwright
+        uses: ./.github/actions/setup-playwright
 
-      - name: Install frontend deps
-        run: pnpm install --frozen-lockfile
-
-      # Run tests (browsers pre-installed in container)
+      # Run tests and upload reports
       - name: Run Playwright tests (${{ matrix.browser }})
         id: playwright
-        run: pnpm exec playwright test --project=${{ matrix.browser }} --reporter=blob
-        env:
-          PLAYWRIGHT_BLOB_OUTPUT_DIR: ./blob-report
-
-      - name: Generate HTML and JSON reports
-        if: always()
         run: |
-          # Generate HTML report from blob
-          pnpm exec playwright merge-reports --reporter=html ./blob-report
-          # Generate JSON report separately with explicit output path
+          # Run tests with both HTML and JSON reporters
           PLAYWRIGHT_JSON_OUTPUT_NAME=playwright-report/report.json \
-          pnpm exec playwright merge-reports --reporter=json ./blob-report
+          pnpm exec playwright test --project=${{ matrix.browser }} \
+            --reporter=list \
+            --reporter=html \
+            --reporter=json
 
       - name: Upload Playwright report
-        uses: actions/upload-artifact@v6
+        uses: actions/upload-artifact@v4
         if: always()
         with:
           name: playwright-report-${{ matrix.browser }}
           path: ./playwright-report/
           retention-days: 30
 
-  # Merge sharded test reports (no container needed - only runs CLI)
+  # Merge sharded test reports
   merge-reports:
     needs: [playwright-tests-chromium-sharded]
     runs-on: ubuntu-latest
     if: ${{ !cancelled() }}
     steps:
-      - name: Install pnpm
-        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
-        with:
-          version: 10
+      - name: Checkout repository
+        uses: actions/checkout@v5
+
+      # Setup Test Environment, we only need playwright to merge reports
+      - name: Setup frontend
+        uses: ./.github/actions/setup-frontend
+      - name: Setup Playwright
+        uses: ./.github/actions/setup-playwright
 
       - name: Download blob reports
-        uses: actions/download-artifact@v7
+        uses: actions/download-artifact@v4
         with:
           path: ./all-blob-reports
           pattern: blob-report-chromium-*
@@ -158,13 +164,13 @@ jobs:
       - name: Merge into HTML Report
         run: |
           # Generate HTML report
-          pnpm dlx @playwright/test merge-reports --reporter=html ./all-blob-reports
+          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 dlx @playwright/test merge-reports --reporter=json ./all-blob-reports
+          pnpm exec playwright merge-reports --reporter=json ./all-blob-reports
 
       - name: Upload HTML report
-        uses: actions/upload-artifact@v6
+        uses: actions/upload-artifact@v4
         with:
           name: playwright-report-chromium
           path: ./playwright-report/
@@ -182,7 +188,11 @@ jobs:
       pull-requests: write
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v6
+        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:
@@ -192,7 +202,8 @@ jobs:
           ./scripts/cicd/pr-playwright-deploy-and-comment.sh \
             "${{ github.event.pull_request.number }}" \
             "${{ github.head_ref }}" \
-            "starting"
+            "starting" \
+            "${{ steps.start-time.outputs.time }}"
 
   # Deploy and comment for non-forked PRs only
   deploy-and-comment:
@@ -204,10 +215,10 @@ jobs:
       contents: read
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
 
       - name: Download all playwright reports
-        uses: actions/download-artifact@v7
+        uses: actions/download-artifact@v4
         with:
           pattern: playwright-report-*
           path: reports
@@ -217,7 +228,6 @@ jobs:
           CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
           CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
           GITHUB_TOKEN: ${{ github.token }}
-          GITHUB_SHA: ${{ github.event.pull_request.head.sha }}
         run: |
           bash ./scripts/cicd/pr-playwright-deploy-and-comment.sh \
             "${{ github.event.pull_request.number }}" \

.github/workflows/ci-tests-storybook-forks.yaml

@@ -1,11 +1,14 @@
 # Description: Deploys Storybook previews from forked PRs (forks can't access deployment secrets)
-name: 'CI: Tests Storybook (Deploy for Forks)'
+name: "CI: Tests Storybook (Deploy for Forks)"
 
 on:
   workflow_run:
-    workflows: ['CI: Tests Storybook']
+    workflows: ["CI: Tests Storybook"]
     types: [requested, completed]
 
+env:
+  DATE_FORMAT: '+%m/%d/%Y, %I:%M:%S %p'
+
 jobs:
   deploy-and-comment-forked-pr:
     runs-on: ubuntu-latest
@@ -28,11 +31,11 @@ jobs:
           echo "Is forked: ${{ github.event.workflow_run.head_repository.full_name != github.event.workflow_run.repository.full_name }}"
 
       - name: Checkout repository
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
 
       - name: Get PR Number
         id: pr
-        uses: actions/github-script@v8
+        uses: actions/github-script@v7
         with:
           script: |
             const { data: prs } = await github.rest.pulls.list({
@@ -60,11 +63,12 @@ jobs:
           ./scripts/cicd/pr-storybook-deploy-and-comment.sh \
             "${{ steps.pr.outputs.result }}" \
             "${{ github.event.workflow_run.head_branch }}" \
-            "starting"
+            "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@v7
+        uses: actions/download-artifact@v4
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
           run-id: ${{ github.event.workflow_run.id }}

.github/workflows/ci-tests-storybook.yaml

@@ -1,8 +1,8 @@
 # Description: Builds Storybook and runs visual regression testing via Chromatic, deploys previews to Cloudflare Pages
-name: 'CI: Tests Storybook'
+name: "CI: Tests Storybook"
 
 on:
-  workflow_dispatch: # Allow manual triggering
+  workflow_dispatch:  # Allow manual triggering
   pull_request:
 
 jobs:
@@ -14,7 +14,7 @@ jobs:
       pull-requests: write
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
 
       - name: Post starting comment
         env:
@@ -24,7 +24,8 @@ jobs:
           ./scripts/cicd/pr-storybook-deploy-and-comment.sh \
             "${{ github.event.pull_request.number }}" \
             "${{ github.head_ref }}" \
-            "starting"
+            "starting" \
+            "$(date -u '+%m/%d/%Y, %I:%M:%S %p')"
 
   # Build Storybook for all PRs (free Cloudflare deployment)
   storybook-build:
@@ -35,10 +36,21 @@ jobs:
       workflow-url: ${{ steps.workflow-url.outputs.url }}
     steps:
       - name: Checkout code
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
 
-      - name: Setup frontend
-        uses: ./.github/actions/setup-frontend
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
 
       - name: Build Storybook
         run: pnpm build-storybook
@@ -57,7 +69,7 @@ jobs:
 
       - name: Upload Storybook build
         if: success() && github.event.pull_request.head.repo.fork == false
-        uses: actions/upload-artifact@v6
+        uses: actions/upload-artifact@v4
         with:
           name: storybook-static
           path: storybook-static/
@@ -74,22 +86,33 @@ jobs:
       chromatic-storybook-url: ${{ steps.chromatic.outputs.storybookUrl }}
     steps:
       - name: Checkout code
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
         with:
-          fetch-depth: 0 # Required for Chromatic baseline
+          fetch-depth: 0  # Required for Chromatic baseline
 
-      - name: Setup frontend
-        uses: ./.github/actions/setup-frontend
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
 
       - name: Build Storybook and run Chromatic
         id: chromatic
-        uses: chromaui/action@07791f8243f4cb2698bf4d00426baf4b2d1cb7e0 # v13.3.5
+        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
+          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
@@ -113,11 +136,11 @@ jobs:
       contents: read
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
 
       - name: Download Storybook build
         if: needs.storybook-build.outputs.conclusion == 'success'
-        uses: actions/download-artifact@v7
+        uses: actions/download-artifact@v4
         with:
           name: storybook-static
           path: storybook-static
@@ -147,7 +170,7 @@ jobs:
       pull-requests: write
     steps:
       - name: Update comment with Chromatic URLs
-        uses: actions/github-script@v8
+        uses: actions/github-script@v7
         with:
           script: |
             const buildUrl = '${{ needs.chromatic-deployment.outputs.chromatic-build-url }}';

.github/workflows/ci-tests-unit.yaml

@@ -1,13 +1,11 @@
 # Description: Unit and component testing with Vitest
-name: 'CI: Tests Unit'
+name: "CI: Tests Unit"
 
 on:
   push:
     branches: [main, master, dev*, core/*, desktop/*]
-    paths-ignore: ['**/*.md']
   pull_request:
     branches-ignore: [wip/*, draft/*, temp/*]
-    paths-ignore: ['**/*.md']
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}
@@ -18,10 +16,21 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v6
+      - uses: actions/checkout@v5
 
-      - name: Setup frontend
-        uses: ./.github/actions/setup-frontend
+      - 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: Install dependencies
+        run: pnpm install --frozen-lockfile
 
       - name: Run Vitest tests
         run: pnpm test:unit

.github/workflows/ci-validate-action-pins.yaml

@@ -1,21 +0,0 @@
-name: Validate Action SHA Pins
-
-on:
-  pull_request:
-    paths:
-      - '.github/workflows/**'
-      - '.github/actions/**'
-      - '.pinact.yaml'
-
-permissions:
-  contents: read
-
-jobs:
-  validate-pins:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v6
-
-      - uses: suzuki-shunsuke/pinact-action@3d49c6412901042473ffa78becddab1aea46bbea # v1.3.1
-        with:
-          skip_push: 'true'

.github/workflows/ci-yaml-validation.yaml

@@ -1,5 +1,5 @@
 # Description: Validates YAML syntax and style using yamllint with relaxed rules
-name: 'CI: YAML Validation'
+name: "CI: YAML Validation"
 
 on:
   push:
@@ -17,10 +17,10 @@ jobs:
   yaml-lint:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v6
+      - uses: actions/checkout@v5
 
       - name: Set up Python
-        uses: actions/setup-python@v6
+        uses: actions/setup-python@v5
         with:
           python-version: '3.x'
 

.github/workflows/cloud-backport-tag.yaml

@@ -1,69 +0,0 @@
----
-name: Cloud Backport Tag
-
-on:
-  pull_request:
-    types: ['closed']
-    branches: [cloud/*]
-
-jobs:
-  create-tag:
-    if: >
-      github.event.pull_request.merged == true &&
-      contains(github.event.pull_request.labels.*.name, 'backport')
-    runs-on: ubuntu-latest
-    permissions:
-      contents: write
-      pull-requests: read
-
-    steps:
-      - name: Checkout merge commit
-        uses: actions/checkout@v6
-        with:
-          ref: ${{ github.event.pull_request.merge_commit_sha }}
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v6
-        with:
-          node-version-file: '.nvmrc'
-
-      - name: Create tag for cloud backport
-        id: tag
-        run: |
-          set -euo pipefail
-
-          BRANCH="${{ github.event.pull_request.base.ref }}"
-          if [[ ! "$BRANCH" =~ ^cloud/([0-9]+)\.([0-9]+)$ ]]; then
-            echo "::error::Base branch '$BRANCH' is not a cloud/x.y branch"
-            exit 1
-          fi
-
-          MAJOR="${BASH_REMATCH[1]}"
-          MINOR="${BASH_REMATCH[2]}"
-
-          VERSION=$(node -p "require('./package.json').version")
-          if [[ "$VERSION" =~ ^${MAJOR}\.${MINOR}\.([0-9]+)(-.+)?$ ]]; then
-            PATCH="${BASH_REMATCH[1]}"
-            SUFFIX="${BASH_REMATCH[2]:-}"
-          else
-            echo "::error::Version '${VERSION}' does not match cloud branch '${BRANCH}'"
-            exit 1
-          fi
-
-          TAG="cloud/v${VERSION}"
-
-          if git ls-remote --tags origin "${TAG}" | grep -Fq "refs/tags/${TAG}"; then
-            echo "::notice::Tag ${TAG} already exists; skipping"
-            echo "tag=${TAG}" >> "$GITHUB_OUTPUT"
-            exit 0
-          fi
-
-          git tag "${TAG}" "${{ github.event.pull_request.merge_commit_sha }}"
-          git push origin "${TAG}"
-          echo "tag=${TAG}" >> "$GITHUB_OUTPUT"
-          {
-            echo "Created tag: ${TAG}"
-            echo "Branch: ${BRANCH}"
-            echo "Version: ${VERSION}"
-            echo "Commit: ${{ github.event.pull_request.merge_commit_sha }}"
-          } >> "$GITHUB_STEP_SUMMARY"

.github/workflows/i18n-update-core.yaml

@@ -1,5 +1,5 @@
 # Description: Generates and updates translations for core ComfyUI components using OpenAI
-name: 'i18n: Update Core'
+name: "i18n: Update Core"
 
 on:
   # Manual dispatch for urgent translation updates
@@ -16,9 +16,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v6
-        with:
-          token: ${{ secrets.PR_GH_TOKEN }}
+        uses: actions/checkout@v5
 
       # Setup playwright environment
       - name: Setup ComfyUI Frontend
@@ -43,7 +41,7 @@ jobs:
         env:
           PLAYWRIGHT_TEST_URL: http://localhost:5173
       - name: Update translations
-        run: pnpm locale && pnpm format
+        run: pnpm locale
         env:
           OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
       - name: Commit updated locales

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

@@ -22,7 +22,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
 
       # Setup playwright environment with custom node repository
       - name: Setup ComfyUI Server (without launching)
@@ -36,7 +36,7 @@ jobs:
 
       # Install the custom node repository
       - name: Checkout custom node repository
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
         with:
           repository: ${{ inputs.owner }}/${{ inputs.repository }}
           path: 'ComfyUI/custom_nodes/${{ inputs.repository }}'
@@ -113,7 +113,7 @@ jobs:
           git commit -m "Update locales"
 
       - name: Install SSH key For PUSH
-        uses: shimataro/ssh-key-action@d4fffb50872869abe2d9a9098a6d9c5aa7d16be4 # v2.7.0
+        uses: shimataro/ssh-key-action@d4fffb50872869abe2d9a9098a6d9c5aa7d16be4
         with:
           # PR private key from action server
           key: ${{ secrets.PR_SSH_PRIVATE_KEY }}

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

@@ -14,7 +14,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
       # Setup playwright environment
       - name: Setup ComfyUI Server (and start)
         uses: ./.github/actions/setup-comfyui-server
@@ -40,11 +40,11 @@ jobs:
         env:
           OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
       - name: Create Pull Request
-        uses: peter-evans/create-pull-request@c0f553fe549906ede9cf27b5156039d195d2ece0 # v8.1.0
+        uses: peter-evans/create-pull-request@271a8d0340265f705b14b6d32b9829c1cb33d45e
         with:
           token: ${{ secrets.PR_GH_TOKEN }}
-          commit-message: 'Update locales for node definitions'
-          title: 'Update locales for node definitions'
+          commit-message: "Update locales for node definitions"
+          title: "Update locales for node definitions"
           body: |
             Automated PR to update locales for node definitions
 

.github/workflows/pr-backport.yaml

@@ -16,10 +16,6 @@ on:
         type: boolean
         default: false
 
-concurrency:
-  group: backport-${{ github.event_name == 'workflow_dispatch' && inputs.pr_number || github.event.pull_request.number }}
-  cancel-in-progress: false
-
 jobs:
   backport:
     if: >
@@ -64,7 +60,7 @@ jobs:
           GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Checkout repository
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
         with:
           fetch-depth: 0
 
@@ -240,8 +236,8 @@ jobs:
             PR_TITLE=$(echo "$PR_DATA" | jq -r '.title')
             MERGE_COMMIT=$(echo "$PR_DATA" | jq -r '.mergeCommit.oid')
           else
-            PR_TITLE=$(jq -r '.pull_request.title' "$GITHUB_EVENT_PATH")
-            MERGE_COMMIT=$(jq -r '.pull_request.merge_commit_sha' "$GITHUB_EVENT_PATH")
+            PR_TITLE="${{ github.event.pull_request.title }}"
+            MERGE_COMMIT="${{ github.event.pull_request.merge_commit_sha }}"
           fi
 
           for target in ${{ steps.filter-targets.outputs.pending-targets }}; do
@@ -330,8 +326,8 @@ jobs:
             PR_TITLE=$(echo "$PR_DATA" | jq -r '.title')
             PR_AUTHOR=$(echo "$PR_DATA" | jq -r '.author.login')
           else
-            PR_TITLE=$(jq -r '.pull_request.title' "$GITHUB_EVENT_PATH")
-            PR_AUTHOR=$(jq -r '.pull_request.user.login' "$GITHUB_EVENT_PATH")
+            PR_TITLE="${{ github.event.pull_request.title }}"
+            PR_AUTHOR="${{ github.event.pull_request.user.login }}"
           fi
 
           for backport in ${{ steps.backport.outputs.success }}; do
@@ -361,42 +357,6 @@ jobs:
         if: steps.filter-targets.outputs.skip != 'true' && failure() && steps.backport.outputs.failed
         env:
           GH_TOKEN: ${{ github.token }}
-          BACKPORT_AGENT_PROMPT_TEMPLATE: |
-            Backport PR #${PR_NUMBER} (${PR_URL}) to ${target}.
-            Cherry-pick merge commit ${MERGE_COMMIT} onto new branch
-            ${BACKPORT_BRANCH} from origin/${target}.
-            Resolve conflicts in: ${CONFLICTS_INLINE}.
-            For test snapshots (browser_tests/**/*-snapshots/), accept PR version if
-            changed in original PR, else keep target. For package.json versions, keep
-            target branch. For pnpm-lock.yaml, regenerate with pnpm install.
-            Ask user for non-obvious conflicts.
-            Create PR titled "[backport ${target}] <original title>" with label "backport".
-            See .github/workflows/pr-backport.yaml for workflow details.
-          COMMENT_BODY_TEMPLATE: |
-            ### ⚠️ Backport to `${target}` failed
-
-            **Reason:** Merge conflicts detected during cherry-pick of `${MERGE_COMMIT_SHORT}`
-
-            <details>
-            <summary>📄 Conflicting files</summary>
-
-            ```
-            ${CONFLICTS_BLOCK}
-            ```
-
-            </details>
-
-            <details>
-            <summary>🤖 Prompt for AI Agents</summary>
-
-            ```
-            ${AGENT_PROMPT}
-            ```
-
-            </details>
-
-            ---
-            cc @${PR_AUTHOR}
         run: |
           if [ "${{ github.event_name }}" = "workflow_dispatch" ]; then
             PR_DATA=$(gh pr view ${{ inputs.pr_number }} --json author,mergeCommit)
@@ -404,9 +364,9 @@ jobs:
             PR_AUTHOR=$(echo "$PR_DATA" | jq -r '.author.login')
             MERGE_COMMIT=$(echo "$PR_DATA" | jq -r '.mergeCommit.oid')
           else
-            PR_NUMBER=$(jq -r '.pull_request.number' "$GITHUB_EVENT_PATH")
-            PR_AUTHOR=$(jq -r '.pull_request.user.login' "$GITHUB_EVENT_PATH")
-            MERGE_COMMIT=$(jq -r '.pull_request.merge_commit_sha' "$GITHUB_EVENT_PATH")
+            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
@@ -419,27 +379,10 @@ jobs:
               gh pr comment "${PR_NUMBER}" --body "@${PR_AUTHOR} Commit \`${MERGE_COMMIT}\` already exists on branch \`${target}\`. No backport needed."
 
             elif [ "${reason}" = "conflicts" ]; then
-              CONFLICTS_INLINE=$(echo "${conflicts}" | tr ',' ' ')
-              SAFE_TARGET=$(echo "$target" | tr '/' '-')
-              BACKPORT_BRANCH="backport-${PR_NUMBER}-to-${SAFE_TARGET}"
-              PR_URL="${GITHUB_SERVER_URL}/${GITHUB_REPOSITORY}/pull/${PR_NUMBER}"
-
-              export PR_NUMBER PR_URL MERGE_COMMIT target BACKPORT_BRANCH CONFLICTS_INLINE
-
-              # envsubst is provided by gettext-base
-              if ! command -v envsubst >/dev/null 2>&1; then
-                sudo apt-get update && sudo apt-get install -y gettext-base
-              fi
-
-              AGENT_PROMPT=$(envsubst '${PR_NUMBER} ${PR_URL} ${target} ${MERGE_COMMIT} ${BACKPORT_BRANCH} ${CONFLICTS_INLINE}' <<<"$BACKPORT_AGENT_PROMPT_TEMPLATE")
-
-              # Use fenced code block for conflicts to handle special chars in filenames
-              CONFLICTS_BLOCK=$(echo "${conflicts}" | tr ',' '\n')
-              MERGE_COMMIT_SHORT="${MERGE_COMMIT:0:7}"
-
-              export target MERGE_COMMIT_SHORT CONFLICTS_BLOCK AGENT_PROMPT PR_AUTHOR
-              COMMENT_BODY=$(envsubst '${target} ${MERGE_COMMIT_SHORT} ${CONFLICTS_BLOCK} ${AGENT_PROMPT} ${PR_AUTHOR}' <<<"$COMMENT_BODY_TEMPLATE")
+              # Convert comma-separated conflicts back to newlines for display
+              CONFLICTS_LIST=$(echo "${conflicts}" | tr ',' '\n' | sed 's/^/- /')
 
+              COMMENT_BODY="@${PR_AUTHOR} Backport to \`${target}\` failed: Merge conflicts detected."$'\n\n'"Please manually cherry-pick commit \`${MERGE_COMMIT}\` to the \`${target}\` 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
@@ -462,6 +405,7 @@ jobs:
             fi
           done < "$FILE"
 
+
       - name: Remove needs-backport label
         if: steps.filter-targets.outputs.skip != 'true' && success()
         run: gh pr edit ${{ github.event_name == 'workflow_dispatch' && inputs.pr_number || github.event.pull_request.number }} --remove-label "needs-backport"

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

@@ -1,5 +1,5 @@
 # Description: AI-powered code review triggered by adding the 'claude-review' label to a PR
-name: 'PR: Claude Review'
+name: "PR: Claude Review"
 
 permissions:
   contents: read
@@ -23,18 +23,18 @@ jobs:
     timeout-minutes: 30
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
         with:
           fetch-depth: 0
           ref: refs/pull/${{ github.event.pull_request.number }}/head
 
       - name: Install pnpm
-        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
+        uses: pnpm/action-setup@v4
         with:
           version: 10
 
       - name: Setup Node.js
-        uses: actions/setup-node@v6
+        uses: actions/setup-node@v4
         with:
           node-version: '20'
           cache: 'pnpm'
@@ -44,9 +44,9 @@ jobs:
           pnpm install -g typescript @vue/compiler-sfc
 
       - name: Run Claude PR Review
-        uses: anthropics/claude-code-action@ff34ce0ff04a470bd3fa56c1ef391c8f1c19f8e9 # v1.0.38
+        uses: anthropics/claude-code-action@v1.0.6
         with:
-          label_trigger: 'claude-review'
+          label_trigger: "claude-review"
           prompt: |
             Read the file .claude/commands/comprehensive-pr-review.md and follow ALL the instructions exactly.
 

.github/workflows/pr-size-report.yaml

@@ -1,4 +1,4 @@
-name: 'PR: Size Report'
+name: "PR: Size Report"
 
 on:
   workflow_run:
@@ -33,13 +33,24 @@ jobs:
         github.event_name == 'workflow_dispatch'
       )
     steps:
-      - uses: actions/checkout@v6
+      - uses: actions/checkout@v5
 
-      - name: Setup frontend
-        uses: ./.github/actions/setup-frontend
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4.1.0
+        with:
+          version: 10
+
+      - name: Install Node.js
+        uses: actions/setup-node@v5
+        with:
+          node-version: '24.x'
+          cache: pnpm
+
+      - name: Install dependencies
+        run: pnpm install
 
       - name: Download size data
-        uses: dawidd6/action-download-artifact@0bd50d53a6d7fb5cb921e607957e9cc12b4ce392 # v12
+        uses: dawidd6/action-download-artifact@v11
         with:
           name: size-data
           run_id: ${{ github.event_name == 'workflow_dispatch' && inputs.run_id || github.event.workflow_run.id }}
@@ -64,7 +75,7 @@ jobs:
           fi
 
       - name: Download previous size data
-        uses: dawidd6/action-download-artifact@0bd50d53a6d7fb5cb921e607957e9cc12b4ce392 # v12
+        uses: dawidd6/action-download-artifact@v11
         with:
           branch: ${{ steps.pr-base.outputs.content }}
           workflow: ci-size-data.yaml
@@ -78,12 +89,12 @@ jobs:
 
       - name: Read size report
         id: size-report
-        uses: juliangruber/read-file-action@b549046febe0fe86f8cb4f93c24e284433f9ab58 # v1.1.7
+        uses: juliangruber/read-file-action@v1
         with:
           path: ./size-report.md
 
       - name: Create or update PR comment
-        uses: actions-cool/maintain-one-comment@4b2dbf086015f892dcb5e8c1106f5fccd6c1476b # v3.2.0
+        uses: actions-cool/maintain-one-comment@v3
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
           number: ${{ steps.pr-number.outputs.content }}

.github/workflows/pr-update-playwright-expectations.yaml

@@ -1,5 +1,5 @@
 # Setting test expectation screenshots for Playwright
-name: 'PR: Update Playwright Expectations'
+name: "PR: Update Playwright Expectations"
 
 on:
   pull_request:
@@ -25,6 +25,7 @@ jobs:
         ) &&
         startsWith(github.event.comment.body, '/update-playwright') )
     outputs:
+      cache-key: ${{ steps.cache-key.outputs.key }}
       pr-number: ${{ steps.pr-info.outputs.pr-number }}
       branch: ${{ steps.pr-info.outputs.branch }}
       comment-id: ${{ steps.find-update-comment.outputs.comment-id }}
@@ -38,15 +39,15 @@ jobs:
           GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Find Update Comment
-        uses: peter-evans/find-comment@b30e6a3c0ed37e7c023ccd3f1db5c6c0b0c23aad # v4.0.0
-        id: 'find-update-comment'
+        uses: peter-evans/find-comment@b30e6a3c0ed37e7c023ccd3f1db5c6c0b0c23aad
+        id: "find-update-comment"
         with:
           issue-number: ${{ steps.pr-info.outputs.pr-number }}
-          comment-author: 'github-actions[bot]'
-          body-includes: 'Updating Playwright Expectations'
+          comment-author: "github-actions[bot]"
+          body-includes: "Updating Playwright Expectations"
 
       - name: Add Starting Reaction
-        uses: peter-evans/create-or-update-comment@e8674b075228eee787fea43ef493e45ece1004c9 # v5.0.0
+        uses: peter-evans/create-or-update-comment@e8674b075228eee787fea43ef493e45ece1004c9
         with:
           comment-id: ${{ steps.find-update-comment.outputs.comment-id }}
           issue-number: ${{ steps.pr-info.outputs.pr-number }}
@@ -56,100 +57,116 @@ jobs:
           reactions: eyes
 
       - name: Checkout repository
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
         with:
           ref: ${{ steps.pr-info.outputs.branch }}
       - name: Setup frontend
         uses: ./.github/actions/setup-frontend
         with:
           include_build_step: true
-
-      # Upload built dist/ (containerized test jobs will pnpm install without cache)
-      - name: Upload built frontend
-        uses: actions/upload-artifact@v6
+      # Save expensive build artifacts (Python env, built frontend, node_modules)
+      # Source code will be checked out fresh in sharded jobs
+      - name: Generate cache key
+        id: cache-key
+        run: echo "key=$(date +%s)" >> $GITHUB_OUTPUT
+      - name: Save cache
+        uses: actions/cache/save@5a3ec84eff668545956fd18022155c47e93e2684
         with:
-          name: frontend-dist
-          path: dist/
-          retention-days: 1
+          path: |
+            ComfyUI
+            dist
+          key: comfyui-setup-${{ steps.cache-key.outputs.key }}
 
   # Sharded snapshot updates
   update-snapshots-sharded:
     needs: setup
     runs-on: ubuntu-latest
-    container:
-      image: ghcr.io/comfy-org/comfyui-ci-container:0.0.12
-      credentials:
-        username: ${{ github.actor }}
-        password: ${{ secrets.GITHUB_TOKEN }}
-    permissions:
-      contents: read
-      packages: read
     strategy:
       fail-fast: false
       matrix:
         shardIndex: [1, 2, 3, 4]
         shardTotal: [4]
     steps:
+      # Checkout source code fresh (not cached)
       - name: Checkout repository
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
         with:
           ref: ${{ needs.setup.outputs.branch }}
-      - name: Download built frontend
-        uses: actions/download-artifact@v7
+
+      # Restore expensive build artifacts from setup job
+      - name: Restore cached artifacts
+        uses: actions/cache/restore@5a3ec84eff668545956fd18022155c47e93e2684
         with:
-          name: frontend-dist
-          path: dist/
+          fail-on-cache-miss: true
+          path: |
+            ComfyUI
+            dist
+          key: comfyui-setup-${{ needs.setup.outputs.cache-key }}
 
-      - name: Start ComfyUI server
-        uses: ./.github/actions/start-comfyui-server
+      - name: Setup ComfyUI server (from cache)
+        uses: ./.github/actions/setup-comfyui-server
+        with:
+          launch_server: true
 
-      - name: Install frontend deps
-        run: pnpm install --frozen-lockfile
+      - name: Setup nodejs, pnpm, reuse built frontend
+        uses: ./.github/actions/setup-frontend
 
-      # Run sharded tests with snapshot updates (browsers pre-installed in container)
+      - name: Setup Playwright
+        uses: ./.github/actions/setup-playwright
+
+      # Run sharded tests with snapshot updates
       - name: Update snapshots (Shard ${{ matrix.shardIndex }}/${{ matrix.shardTotal }})
         id: playwright-tests
-        run: pnpm exec playwright test --update-snapshots --grep @screenshot --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }}
+        run: pnpm exec playwright test --update-snapshots --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }}
         continue-on-error: true
 
+      # Identify and stage only changed snapshot files
       - name: Stage changed snapshot files
         id: changed-snapshots
-        shell: bash
         run: |
-          set -euo pipefail
+          echo "=========================================="
+          echo "STAGING CHANGED SNAPSHOTS (Shard ${{ matrix.shardIndex }})"
+          echo "=========================================="
 
-          # Configure git safe.directory for container environment
-          git config --global --add safe.directory "$(pwd)"
-
-          # Get list of changed snapshot files (including untracked/new files)
-          changed_files=$( (
-            git diff --name-only browser_tests/ 2>/dev/null || true
-            git ls-files --others --exclude-standard browser_tests/ 2>/dev/null || true
-          ) | sort -u | grep -E '\-snapshots/' || true )
+          # Get list of changed snapshot files
+          changed_files=$(git diff --name-only browser_tests/ 2>/dev/null | grep -E '\-snapshots/' || echo "")
 
           if [ -z "$changed_files" ]; then
-            echo "No snapshot changes in shard ${{ matrix.shardIndex }}"
+            echo "No snapshot changes in this shard"
             echo "has-changes=false" >> $GITHUB_OUTPUT
             exit 0
           fi
 
-          file_count=$(echo "$changed_files" | wc -l)
-          echo "Shard ${{ matrix.shardIndex }}: $file_count changed snapshot(s):"
+          echo "✓ Found changed files:"
           echo "$changed_files"
+          file_count=$(echo "$changed_files" | wc -l)
+          echo "Count: $file_count"
           echo "has-changes=true" >> $GITHUB_OUTPUT
+          echo ""
 
-          # Copy changed files to staging directory
+          # Create staging directory
           mkdir -p /tmp/changed_snapshots_shard
+
+          # Copy only changed files, preserving directory structure
+          # Strip 'browser_tests/' prefix to avoid double nesting
+          echo "Copying changed files to staging directory..."
           while IFS= read -r file; do
-            [ -f "$file" ] || continue
+            # Remove 'browser_tests/' prefix
             file_without_prefix="${file#browser_tests/}"
+            # Create parent directories
             mkdir -p "/tmp/changed_snapshots_shard/$(dirname "$file_without_prefix")"
+            # Copy file
             cp "$file" "/tmp/changed_snapshots_shard/$file_without_prefix"
+            echo "  → $file_without_prefix"
           done <<< "$changed_files"
 
+          echo ""
+          echo "Staged files for upload:"
+          find /tmp/changed_snapshots_shard -type f
+
       # Upload ONLY the changed files from this shard
       - name: Upload changed snapshots
-        uses: actions/upload-artifact@v6
+        uses: actions/upload-artifact@v4
         if: steps.changed-snapshots.outputs.has-changes == 'true'
         with:
           name: snapshots-shard-${{ matrix.shardIndex }}
@@ -157,7 +174,7 @@ jobs:
           retention-days: 1
 
       - name: Upload test report
-        uses: actions/upload-artifact@v6
+        uses: actions/upload-artifact@v4
         if: always()
         with:
           name: playwright-report-shard-${{ matrix.shardIndex }}
@@ -170,33 +187,26 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
         with:
           ref: ${{ needs.setup.outputs.branch }}
-          token: ${{ secrets.PR_GH_TOKEN }}
 
       # Download all changed snapshot files from shards
       - name: Download snapshot artifacts
-        uses: actions/download-artifact@v7
+        uses: actions/download-artifact@v4
         with:
           pattern: snapshots-shard-*
           path: ./downloaded-snapshots
-          merge-multiple: true
+          merge-multiple: false
 
       - name: List downloaded files
         run: |
           echo "=========================================="
           echo "DOWNLOADED SNAPSHOT FILES"
           echo "=========================================="
-          if [ -d "./downloaded-snapshots" ]; then
-            find ./downloaded-snapshots -type f
-            echo ""
-            echo "Total files: $(find ./downloaded-snapshots -type f | wc -l)"
-          else
-            echo "No snapshot artifacts downloaded (no changes in any shard)"
-            echo ""
-            echo "Total files: 0"
-          fi
+          find ./downloaded-snapshots -type f
+          echo ""
+          echo "Total files: $(find ./downloaded-snapshots -type f | wc -l)"
 
       # Merge only the changed files into browser_tests
       - name: Merge changed snapshots
@@ -207,45 +217,43 @@ jobs:
           echo "MERGING CHANGED SNAPSHOTS"
           echo "=========================================="
 
-          # Check if any artifacts were downloaded (merge-multiple puts files directly in path)
-          if [ ! -d "./downloaded-snapshots" ]; then
-            echo "No snapshot artifacts to merge"
-            echo "=========================================="
-            echo "MERGE COMPLETE"
-            echo "=========================================="
-            echo "Files merged: 0"
-            exit 0
-          fi
-
           # Verify target directory exists
           if [ ! -d "browser_tests" ]; then
             echo "::error::Target directory 'browser_tests' does not exist"
             exit 1
           fi
 
-          # Count files to merge
-          file_count=$(find ./downloaded-snapshots -type f | wc -l)
+          merged_count=0
 
-          if [ "$file_count" -eq 0 ]; then
-            echo "No snapshot files found in downloaded artifacts"
-            echo "=========================================="
-            echo "MERGE COMPLETE"
-            echo "=========================================="
-            echo "Files merged: 0"
-            exit 0
-          fi
+          # For each shard's changed files, copy them directly
+          for shard_dir in ./downloaded-snapshots/snapshots-shard-*/; do
+            if [ ! -d "$shard_dir" ]; then
+              continue
+            fi
 
-          echo "Merging $file_count snapshot file(s)..."
+            shard_name=$(basename "$shard_dir")
+            file_count=$(find "$shard_dir" -type f | wc -l)
 
-          # Copy all files directly, preserving directory structure
-          # With merge-multiple: true, files are directly in ./downloaded-snapshots/ without shard subdirs
-          cp -v -r ./downloaded-snapshots/* browser_tests/ 2>&1 | sed 's/^/  /'
+            if [ "$file_count" -eq 0 ]; then
+              echo "  $shard_name: no files"
+              continue
+            fi
+
+            echo "Processing $shard_name ($file_count file(s))..."
+
+            # Copy files directly, preserving directory structure
+            # Since files are already in correct structure (no browser_tests/ prefix), just copy them all
+            cp -v -r "$shard_dir"* browser_tests/ 2>&1 | sed 's/^/  /'
+
+            merged_count=$((merged_count + 1))
+            echo "  ✓ Merged"
+            echo ""
+          done
 
-          echo ""
           echo "=========================================="
           echo "MERGE COMPLETE"
           echo "=========================================="
-          echo "Files merged: $file_count"
+          echo "Shards merged: $merged_count"
 
       - name: Show changes
         run: |
@@ -253,19 +261,11 @@ jobs:
           echo "CHANGES SUMMARY"
           echo "=========================================="
           echo ""
-          echo "Changed files in browser_tests (including untracked):"
-          CHANGES=$(git status --porcelain=v1 --untracked-files=all -- browser_tests/)
-          if [ -z "$CHANGES" ]; then
-            echo "No changes"
-            echo ""
-            echo "Total changes:"
-            echo "0"
-          else
-            echo "$CHANGES" | head -50
-            echo ""
-            echo "Total changes:"
-            echo "$CHANGES" | wc -l
-          fi
+          echo "Changed files in browser_tests:"
+          git diff --name-only browser_tests/ | head -20 || echo "No changes"
+          echo ""
+          echo "Total changes:"
+          git diff --name-only browser_tests/ | wc -l || echo "0"
 
       - name: Commit updated expectations
         id: commit
@@ -273,7 +273,7 @@ jobs:
           git config --global user.name 'github-actions'
           git config --global user.email 'github-actions@github.com'
 
-          if [ -z "$(git status --porcelain=v1 --untracked-files=all -- browser_tests/)" ]; then
+          if git diff --quiet browser_tests/; then
             echo "No changes to commit"
             echo "has-changes=false" >> $GITHUB_OUTPUT
             exit 0
@@ -294,7 +294,7 @@ jobs:
           echo "✓ Commit and push successful"
 
       - name: Add Done Reaction
-        uses: peter-evans/create-or-update-comment@e8674b075228eee787fea43ef493e45ece1004c9 # v5.0.0
+        uses: peter-evans/create-or-update-comment@e8674b075228eee787fea43ef493e45ece1004c9
         if: github.event_name == 'issue_comment' && steps.commit.outputs.has-changes == 'true'
         with:
           comment-id: ${{ needs.setup.outputs.comment-id }}

.github/workflows/publish-desktop-ui-on-merge.yaml

@@ -20,13 +20,13 @@ jobs:
       dist_tag: ${{ steps.dist.outputs.dist_tag }}
     steps:
       - name: Checkout code
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
         with:
           ref: ${{ github.event.pull_request.merge_commit_sha }}
           persist-credentials: false
 
       - name: Setup Node.js
-        uses: actions/setup-node@v6
+        uses: actions/setup-node@v5
         with:
           node-version: '24.x'
 
@@ -71,7 +71,7 @@ jobs:
       pull-requests: write
     steps:
       - name: Checkout merge commit
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
         with:
           ref: ${{ github.event.pull_request.merge_commit_sha }}
           fetch-depth: 2

.github/workflows/publish-desktop-ui.yaml

@@ -77,19 +77,19 @@ jobs:
           fi
 
       - name: Checkout repository
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
         with:
           ref: ${{ steps.resolve_ref.outputs.ref }}
           fetch-depth: 1
           persist-credentials: false
 
       - name: Install pnpm
-        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
+        uses: pnpm/action-setup@v4
         with:
           version: 10
 
       - name: Setup Node.js
-        uses: actions/setup-node@v6
+        uses: actions/setup-node@v5
         with:
           node-version: '24.x'
           cache: 'pnpm'

.github/workflows/release-biweekly-comfyui.yaml

@@ -1,324 +0,0 @@
-# Automated bi-weekly workflow to bump ComfyUI frontend RC releases
-name: 'Release: Bi-weekly ComfyUI'
-
-on:
-  # Schedule for Monday at 12:00 PM PST (20:00 UTC)
-  schedule:
-    - cron: '0 20 * * 1'
-
-  # Allow manual triggering (bypasses bi-weekly check)
-  workflow_dispatch:
-    inputs:
-      comfyui_fork:
-        description: 'ComfyUI fork to use for PR (e.g., Comfy-Org/ComfyUI)'
-        required: false
-        default: 'Comfy-Org/ComfyUI'
-        type: string
-
-jobs:
-  check-release-week:
-    runs-on: ubuntu-latest
-    outputs:
-      is_release_week: ${{ steps.check.outputs.is_release_week }}
-    steps:
-      - name: Check if release week
-        id: check
-        run: |
-          # Anchor date: first bi-weekly release Monday
-          ANCHOR="2025-12-22"
-
-          ANCHOR_EPOCH=$(date -d "$ANCHOR" +%s)
-          NOW_EPOCH=$(date +%s)
-          WEEKS_SINCE=$(( (NOW_EPOCH - ANCHOR_EPOCH) / 604800 ))
-
-          if [ $((WEEKS_SINCE % 2)) -eq 0 ]; then
-            echo "Release week (week $WEEKS_SINCE since anchor $ANCHOR)"
-            echo "is_release_week=true" >> $GITHUB_OUTPUT
-          else
-            echo "Not a release week (week $WEEKS_SINCE since anchor $ANCHOR)"
-            echo "is_release_week=false" >> $GITHUB_OUTPUT
-          fi
-
-      - name: Summary
-        run: |
-          echo "## Bi-weekly Check" >> $GITHUB_STEP_SUMMARY
-          echo "" >> $GITHUB_STEP_SUMMARY
-          echo "- Is release week: ${{ steps.check.outputs.is_release_week }}" >> $GITHUB_STEP_SUMMARY
-          echo "- Manual trigger: ${{ github.event_name == 'workflow_dispatch' }}" >> $GITHUB_STEP_SUMMARY
-
-  resolve-version:
-    needs: check-release-week
-    if: needs.check-release-week.outputs.is_release_week == 'true' || github.event_name == 'workflow_dispatch'
-    runs-on: ubuntu-latest
-    outputs:
-      current_version: ${{ steps.resolve.outputs.current_version }}
-      target_version: ${{ steps.resolve.outputs.target_version }}
-      target_minor: ${{ steps.resolve.outputs.target_minor }}
-      target_branch: ${{ steps.resolve.outputs.target_branch }}
-      needs_release: ${{ steps.resolve.outputs.needs_release }}
-      diff_url: ${{ steps.resolve.outputs.diff_url }}
-      latest_patch_tag: ${{ steps.resolve.outputs.latest_patch_tag }}
-
-    steps:
-      - name: Checkout ComfyUI_frontend
-        uses: actions/checkout@v6
-        with:
-          fetch-depth: 0
-          path: frontend
-
-      - name: Checkout ComfyUI (sparse)
-        uses: actions/checkout@v6
-        with:
-          repository: Comfy-Org/ComfyUI
-          sparse-checkout: |
-            requirements.txt
-          path: comfyui
-
-      - name: Install pnpm
-        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
-        with:
-          version: 10
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v6
-        with:
-          node-version: lts/*
-
-      - name: Install dependencies
-        working-directory: frontend
-        run: pnpm install --frozen-lockfile
-
-      - name: Resolve release information
-        id: resolve
-        working-directory: frontend
-        run: |
-          set -euo pipefail
-
-          # Run the resolver script
-          if ! RESULT=$(pnpm exec tsx scripts/cicd/resolve-comfyui-release.ts ../comfyui .); then
-            echo "Failed to resolve release information"
-            exit 1
-          fi
-
-          echo "Resolver output:"
-          echo "$RESULT"
-
-          # Validate JSON output
-          if ! echo "$RESULT" | jq empty 2>/dev/null; then
-            echo "Invalid JSON output from resolver"
-            exit 1
-          fi
-
-          # Parse JSON output and set outputs
-          echo "current_version=$(echo "$RESULT" | jq -r '.current_version')" >> $GITHUB_OUTPUT
-          echo "target_version=$(echo "$RESULT" | jq -r '.target_version')" >> $GITHUB_OUTPUT
-          echo "target_minor=$(echo "$RESULT" | jq -r '.target_minor')" >> $GITHUB_OUTPUT
-          echo "target_branch=$(echo "$RESULT" | jq -r '.target_branch')" >> $GITHUB_OUTPUT
-          echo "needs_release=$(echo "$RESULT" | jq -r '.needs_release')" >> $GITHUB_OUTPUT
-          echo "diff_url=$(echo "$RESULT" | jq -r '.diff_url')" >> $GITHUB_OUTPUT
-          echo "latest_patch_tag=$(echo "$RESULT" | jq -r '.latest_patch_tag')" >> $GITHUB_OUTPUT
-
-      - name: Summary
-        run: |
-          echo "## Release Information" >> $GITHUB_STEP_SUMMARY
-          echo "" >> $GITHUB_STEP_SUMMARY
-          echo "- Current version: ${{ steps.resolve.outputs.current_version }}" >> $GITHUB_STEP_SUMMARY
-          echo "- Target version: ${{ steps.resolve.outputs.target_version }}" >> $GITHUB_STEP_SUMMARY
-          echo "- Target branch: ${{ steps.resolve.outputs.target_branch }}" >> $GITHUB_STEP_SUMMARY
-          echo "- Needs release: ${{ steps.resolve.outputs.needs_release }}" >> $GITHUB_STEP_SUMMARY
-          echo "- Diff: [${{ steps.resolve.outputs.current_version }}...${{ steps.resolve.outputs.target_version }}](${{ steps.resolve.outputs.diff_url }})" >> $GITHUB_STEP_SUMMARY
-
-  trigger-release-if-needed:
-    needs: resolve-version
-    if: needs.resolve-version.outputs.needs_release == 'true'
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Trigger release workflow
-        env:
-          GH_TOKEN: ${{ secrets.PR_GH_TOKEN }}
-        run: |
-          set -euo pipefail
-
-          echo "Triggering release workflow for branch ${{ needs.resolve-version.outputs.target_branch }}"
-
-          # Trigger the release-version-bump workflow
-          if ! gh workflow run release-version-bump.yaml \
-            --repo Comfy-Org/ComfyUI_frontend \
-            --ref main \
-            --field version_type=patch \
-            --field branch=${{ needs.resolve-version.outputs.target_branch }}; then
-            echo "Failed to trigger release workflow"
-            exit 1
-          fi
-
-          echo "Release workflow triggered successfully for ${{ needs.resolve-version.outputs.target_branch }}"
-
-      - name: Summary
-        run: |
-          echo "## Release Workflow Triggered" >> $GITHUB_STEP_SUMMARY
-          echo "" >> $GITHUB_STEP_SUMMARY
-          echo "- Branch: ${{ needs.resolve-version.outputs.target_branch }}" >> $GITHUB_STEP_SUMMARY
-          echo "- Target version: ${{ needs.resolve-version.outputs.target_version }}" >> $GITHUB_STEP_SUMMARY
-          echo "- [View workflow runs](https://github.com/Comfy-Org/ComfyUI_frontend/actions/workflows/release-version-bump.yaml)" >> $GITHUB_STEP_SUMMARY
-
-  create-comfyui-pr:
-    needs: [check-release-week, resolve-version, trigger-release-if-needed]
-    if: always() && needs.resolve-version.result == 'success' && (needs.check-release-week.outputs.is_release_week == 'true' || github.event_name == 'workflow_dispatch')
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout ComfyUI fork
-        uses: actions/checkout@v6
-        with:
-          repository: ${{ inputs.comfyui_fork || 'Comfy-Org/ComfyUI' }}
-          token: ${{ secrets.PR_GH_TOKEN }}
-          path: comfyui
-
-      - name: Sync with upstream
-        working-directory: comfyui
-        run: |
-          set -euo pipefail
-
-          # Fetch latest upstream to base our branch on fresh code
-          # Note: This only affects the local checkout, NOT the fork's master branch
-          # We only push the automation branch, leaving the fork's master untouched
-          echo "Fetching upstream master..."
-          if ! git fetch https://github.com/Comfy-Org/ComfyUI.git master; then
-            echo "Failed to fetch upstream master"
-            exit 1
-          fi
-
-          echo "Checking out upstream master..."
-          if ! git checkout FETCH_HEAD; then
-            echo "Failed to checkout FETCH_HEAD"
-            exit 1
-          fi
-
-          echo "Successfully synced with upstream master"
-
-      - name: Update requirements.txt
-        working-directory: comfyui
-        run: |
-          set -euo pipefail
-
-          TARGET_VERSION="${{ needs.resolve-version.outputs.target_version }}"
-          echo "Updating comfyui-frontend-package to ${TARGET_VERSION}"
-
-          # Update the comfyui-frontend-package version (POSIX-compatible)
-          sed -i.bak "s/comfyui-frontend-package==[0-9.][0-9.]*/comfyui-frontend-package==${TARGET_VERSION}/" requirements.txt
-          rm requirements.txt.bak
-
-          # Verify the change was made
-          if ! grep -q "comfyui-frontend-package==${TARGET_VERSION}" requirements.txt; then
-            echo "Failed to update requirements.txt"
-            exit 1
-          fi
-
-          echo "Updated requirements.txt:"
-          grep comfyui-frontend-package requirements.txt
-
-      - name: Build PR description
-        id: pr-body
-        run: |
-          BODY=$(cat <<'EOF'
-          Bumps frontend to ${{ needs.resolve-version.outputs.target_version }}
-
-          Test quickly:
-
-          ```bash
-          python main.py --front-end-version Comfy-Org/ComfyUI_frontend@${{ needs.resolve-version.outputs.target_version }}
-          ```
-
-          - Diff: [v${{ needs.resolve-version.outputs.current_version }}...v${{ needs.resolve-version.outputs.target_version }}](${{ needs.resolve-version.outputs.diff_url }})
-          - PyPI: https://pypi.org/project/comfyui-frontend-package/${{ needs.resolve-version.outputs.target_version }}/
-          - npm: https://www.npmjs.com/package/@comfyorg/comfyui-frontend-types/v/${{ needs.resolve-version.outputs.target_version }}
-          EOF
-          )
-
-          # Add release PR note if release was triggered
-          if [ "${{ needs.resolve-version.outputs.needs_release }}" = "true" ]; then
-            RELEASE_NOTE="⚠️ **Release PR must be merged first** - check [release workflow runs](https://github.com/Comfy-Org/ComfyUI_frontend/actions/workflows/release-version-bump.yaml)"
-            BODY=$''"${RELEASE_NOTE}"$'\n\n'"${BODY}"
-          fi
-
-          # Save to file for later use
-          printf '%s\n' "$BODY" > pr-body.txt
-          cat pr-body.txt
-
-      - name: Create PR to ComfyUI
-        working-directory: comfyui
-        env:
-          GH_TOKEN: ${{ secrets.PR_GH_TOKEN }}
-          COMFYUI_FORK: ${{ inputs.comfyui_fork || 'Comfy-Org/ComfyUI' }}
-        run: |
-          set -euo pipefail
-
-          # Extract fork owner from repository name
-          FORK_OWNER=$(echo "$COMFYUI_FORK" | cut -d'/' -f1)
-
-          echo "Creating PR from ${COMFYUI_FORK} to Comfy-Org/ComfyUI"
-
-          # Configure git
-          git config user.name "github-actions[bot]"
-          git config user.email "github-actions[bot]@users.noreply.github.com"
-
-          # Create/update branch (reuse same branch name each release cycle)
-          BRANCH="automation/comfyui-frontend-bump"
-          git checkout -B "$BRANCH"
-          git add requirements.txt
-
-          if ! git diff --cached --quiet; then
-            git commit -m "Bump comfyui-frontend-package to ${{ needs.resolve-version.outputs.target_version }}"
-          else
-            echo "No changes to commit"
-            exit 0
-          fi
-
-          # Force push to fork (overwrites previous release cycle's branch)
-          # Note: This intentionally destroys branch history to maintain a single PR
-          # Any review comments or manual commits will need to be re-applied
-          if ! git push -f origin "$BRANCH"; then
-            echo "Failed to push branch to fork"
-            exit 1
-          fi
-
-          # Create draft PR from fork to upstream
-          PR_BODY=$(cat ../pr-body.txt)
-
-          # Try to create PR, ignore error if it already exists
-          if ! gh pr create \
-            --repo Comfy-Org/ComfyUI \
-            --head "${FORK_OWNER}:${BRANCH}" \
-            --base master \
-            --title "Bump comfyui-frontend-package to ${{ needs.resolve-version.outputs.target_version }}" \
-            --body "$PR_BODY" \
-            --draft 2>&1; then
-
-            # Check if PR already exists
-            set +e
-            EXISTING_PR=$(gh pr list --repo Comfy-Org/ComfyUI --head "${FORK_OWNER}:${BRANCH}" --json number --jq '.[0].number' 2>&1)
-            PR_LIST_EXIT=$?
-            set -e
-
-            if [ $PR_LIST_EXIT -ne 0 ]; then
-              echo "Failed to check for existing PR: $EXISTING_PR"
-              exit 1
-            fi
-
-            if [ -n "$EXISTING_PR" ] && [ "$EXISTING_PR" != "null" ]; then
-              echo "PR already exists (#${EXISTING_PR}), updating branch will update the PR"
-            else
-              echo "Failed to create PR and no existing PR found"
-              exit 1
-            fi
-          fi
-
-      - name: Summary
-        run: |
-          echo "## ComfyUI PR Created" >> $GITHUB_STEP_SUMMARY
-          echo "" >> $GITHUB_STEP_SUMMARY
-          echo "Draft PR created in Comfy-Org/ComfyUI" >> $GITHUB_STEP_SUMMARY
-          echo "" >> $GITHUB_STEP_SUMMARY
-          echo "### PR Body:" >> $GITHUB_STEP_SUMMARY
-          cat pr-body.txt >> $GITHUB_STEP_SUMMARY

.github/workflows/release-branch-create.yaml

@@ -18,13 +18,13 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
         with:
           fetch-depth: 0
           token: ${{ secrets.PR_GH_TOKEN || secrets.GITHUB_TOKEN }}
 
       - name: Setup Node.js
-        uses: actions/setup-node@v6
+        uses: actions/setup-node@v4
         with:
           node-version: 'lts/*'
 

.github/workflows/release-draft-create.yaml

@@ -19,12 +19,12 @@ jobs:
       is_prerelease: ${{ steps.check_prerelease.outputs.is_prerelease }}
     steps:
       - name: Checkout code
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
       - name: Install pnpm
-        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
+        uses: pnpm/action-setup@v4
         with:
           version: 10
-      - uses: actions/setup-node@v6
+      - uses: actions/setup-node@v4
         with:
           node-version: 'lts/*'
           cache: 'pnpm'
@@ -50,43 +50,37 @@ jobs:
           ALGOLIA_API_KEY: ${{ secrets.ALGOLIA_API_KEY }}
           ENABLE_MINIFY: 'true'
           USE_PROD_CONFIG: 'true'
-          IS_NIGHTLY: ${{  case(github.ref == 'refs/heads/main', 'true', 'false') }}
         run: |
           pnpm install --frozen-lockfile
-
-          # Desktop-specific release artifact with desktop distribution flags.
-          DISTRIBUTION=desktop pnpm build
-          pnpm zipdist ./dist ./dist-desktop.zip
-
-          # Default release artifact for core/PyPI.
-          NX_SKIP_NX_CACHE=true pnpm build
+          pnpm build
           pnpm zipdist
       - name: Upload dist artifact
-        uses: actions/upload-artifact@v6
+        uses: actions/upload-artifact@v4
         with:
           name: dist-files
           path: |
             dist/
             dist.zip
-            dist-desktop.zip
 
   draft_release:
     needs: build
     runs-on: ubuntu-latest
     steps:
+      - name: Checkout code
+        uses: actions/checkout@v5
       - name: Download dist artifact
-        uses: actions/download-artifact@v7
+        uses: actions/download-artifact@v4
         with:
           name: dist-files
       - name: Create release
         id: create_release
-        uses: softprops/action-gh-release@a06a81a03ee405af7f2048a818ed3f03bbf83c7b # v2.5.0
+        uses: >-
+          softprops/action-gh-release@da05d552573ad5aba039eaac05058a918a7bf631
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         with:
           files: |
             dist.zip
-            dist-desktop.zip
           tag_name: v${{ needs.build.outputs.version }}
           target_commitish: ${{ github.event.pull_request.base.ref }}
           make_latest: >-
@@ -104,13 +98,13 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
       - name: Download dist artifact
-        uses: actions/download-artifact@v7
+        uses: actions/download-artifact@v4
         with:
           name: dist-files
       - name: Set up Python
-        uses: actions/setup-python@v6
+        uses: actions/setup-python@v4
         with:
           python-version: '3.x'
       - name: Install build dependencies
@@ -125,7 +119,8 @@ jobs:
         env:
           COMFYUI_FRONTEND_VERSION: ${{ needs.build.outputs.version }}
       - name: Publish pypi package
-        uses: pypa/gh-action-pypi-publish@ed0c53931b1dc9bd32cbe73a98c7f6766f8a527e # v1.13.0
+        uses: >-
+          pypa/gh-action-pypi-publish@76f52bc884231f62b9a034ebfe128415bbaabdfc
         with:
           password: ${{ secrets.PYPI_TOKEN }}
           packages-dir: comfyui_frontend_package/dist
@@ -152,7 +147,7 @@ jobs:
       pull-requests: write
     steps:
       - name: Checkout merge commit
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
         with:
           ref: ${{ github.event.pull_request.merge_commit_sha }}
           fetch-depth: 2

.github/workflows/release-npm-types.yaml

@@ -69,18 +69,18 @@ jobs:
           fi
 
       - name: Checkout repository
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
         with:
           ref: ${{ steps.resolve_ref.outputs.ref }}
           fetch-depth: 1
 
       - name: Install pnpm
-        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
+        uses: pnpm/action-setup@v4
         with:
           version: 10
 
       - name: Setup Node.js
-        uses: actions/setup-node@v6
+        uses: actions/setup-node@v5
         with:
           node-version: 'lts/*'
           cache: 'pnpm'

.github/workflows/release-pypi-dev.yaml

@@ -15,12 +15,12 @@ jobs:
       version: ${{ steps.current_version.outputs.version }}
     steps:
       - name: Checkout code
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
       - name: Install pnpm
-        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
+        uses: pnpm/action-setup@v4
         with:
           version: 10
-      - uses: actions/setup-node@v6
+      - uses: actions/setup-node@v4
         with:
           node-version: 'lts/*'
           cache: 'pnpm'
@@ -40,7 +40,7 @@ jobs:
           pnpm build
           pnpm zipdist
       - name: Upload dist artifact
-        uses: actions/upload-artifact@v6
+        uses: actions/upload-artifact@v4
         with:
           name: dist-files
           path: |
@@ -52,13 +52,13 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
       - name: Download dist artifact
-        uses: actions/download-artifact@v7
+        uses: actions/download-artifact@v4
         with:
           name: dist-files
       - name: Set up Python
-        uses: actions/setup-python@v6
+        uses: actions/setup-python@v4
         with:
           python-version: '3.x'
       - name: Install build dependencies
@@ -73,7 +73,7 @@ jobs:
         env:
           COMFYUI_FRONTEND_VERSION: ${{ format('{0}.dev{1}', needs.build.outputs.version, inputs.devVersion) }}
       - name: Publish pypi package
-        uses: pypa/gh-action-pypi-publish@ed0c53931b1dc9bd32cbe73a98c7f6766f8a527e # v1.13.0
+        uses: pypa/gh-action-pypi-publish@76f52bc884231f62b9a034ebfe128415bbaabdfc
         with:
           password: ${{ secrets.PYPI_TOKEN }}
           packages-dir: comfyui_frontend_package/dist

.github/workflows/release-version-bump.yaml

@@ -1,5 +1,5 @@
 # Description: Manual workflow to increment package version with semantic versioning support
-name: 'Release: Version Bump'
+name: "Release: Version Bump"
 
 on:
   workflow_dispatch:
@@ -20,13 +20,6 @@ on:
         required: true
         default: 'main'
         type: string
-  schedule:
-    # 00:00 UTC ≈ 4:00 PM PST / 5:00 PM PDT on the previous calendar day
-    - cron: '0 0 * * *'
-
-concurrency:
-  group: release-version-bump
-  cancel-in-progress: true
 
 jobs:
   bump-version:
@@ -36,99 +29,15 @@ jobs:
       pull-requests: write
 
     steps:
-      - name: Prepare inputs
-        id: prepared-inputs
-        shell: bash
-        env:
-          RAW_VERSION_TYPE: ${{ github.event_name == 'workflow_dispatch' && github.event.inputs.version_type || '' }}
-          RAW_PRE_RELEASE: ${{ github.event_name == 'workflow_dispatch' && github.event.inputs.pre_release || '' }}
-          RAW_BRANCH: ${{ github.event_name == 'workflow_dispatch' && github.event.inputs.branch || '' }}
-        run: |
-          set -euo pipefail
-          VERSION_TYPE="$RAW_VERSION_TYPE"
-          PRE_RELEASE="$RAW_PRE_RELEASE"
-          TARGET_BRANCH="$RAW_BRANCH"
-
-          if [[ -z "$VERSION_TYPE" ]]; then
-            VERSION_TYPE='patch'
-          fi
-
-          if [[ -z "$TARGET_BRANCH" ]]; then
-            TARGET_BRANCH='main'
-          fi
-
-          {
-            echo "version_type=$VERSION_TYPE"
-            echo "pre_release=$PRE_RELEASE"
-            echo "branch=$TARGET_BRANCH"
-          } >> "$GITHUB_OUTPUT"
-
-      - name: Close stale nightly version bump PRs
-        if: github.event_name == 'schedule'
-        uses: actions/github-script@v8
-        with:
-          github-token: ${{ github.token }}
-          script: |
-            const prefix = 'version-bump-'
-            const closed = []
-            const prs = await github.paginate(github.rest.pulls.list, {
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              state: 'open',
-              per_page: 100
-            })
-
-            for (const pr of prs) {
-              if (!pr.head?.ref?.startsWith(prefix)) {
-                continue
-              }
-
-              if (pr.user?.login !== 'github-actions[bot]') {
-                continue
-              }
-
-              // Only clean up stale nightly PRs targeting main.
-              // Adjust here if other target branches should be cleaned.
-              if (pr.base?.ref !== 'main') {
-                continue
-              }
-
-              await github.rest.pulls.update({
-                owner: context.repo.owner,
-                repo: context.repo.repo,
-                pull_number: pr.number,
-                state: 'closed'
-              })
-
-              try {
-                await github.rest.git.deleteRef({
-                  owner: context.repo.owner,
-                  repo: context.repo.repo,
-                  ref: `heads/${pr.head.ref}`
-                })
-              } catch (error) {
-                if (![404, 422].includes(error.status)) {
-                  throw error
-                }
-              }
-
-              closed.push(pr.number)
-            }
-
-            core.info(`Closed ${closed.length} stale PR(s).`)
-
       - name: Checkout repository
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
         with:
-          ref: ${{ steps.prepared-inputs.outputs.branch }}
+          ref: ${{ github.event.inputs.branch }}
           fetch-depth: 0
-          persist-credentials: false
 
       - name: Validate branch exists
-        env:
-          TARGET_BRANCH: ${{ steps.prepared-inputs.outputs.branch }}
         run: |
-          BRANCH="$TARGET_BRANCH"
+          BRANCH="${{ github.event.inputs.branch }}"
           if ! git show-ref --verify --quiet "refs/heads/$BRANCH" && ! git show-ref --verify --quiet "refs/remotes/origin/$BRANCH"; then
             echo "❌ Branch '$BRANCH' does not exist"
             echo ""
@@ -142,45 +51,30 @@ jobs:
           echo "✅ Branch '$BRANCH' exists"
 
       - name: Install pnpm
-        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
+        uses: pnpm/action-setup@v4
         with:
           version: 10
 
       - name: Setup Node.js
-        uses: actions/setup-node@v6
+        uses: actions/setup-node@v4
         with:
           node-version: lts/*
 
       - name: Bump version
         id: bump-version
-        env:
-          VERSION_TYPE: ${{ steps.prepared-inputs.outputs.version_type }}
-          PRE_RELEASE: ${{ steps.prepared-inputs.outputs.pre_release }}
         run: |
-          set -euo pipefail
-          if [[ -n "$PRE_RELEASE" && ! "$VERSION_TYPE" =~ ^pre(major|minor|patch)$ && "$VERSION_TYPE" != "prerelease" ]]; then
-            echo "❌ pre_release was provided but version_type='$VERSION_TYPE' does not support --preid"
-            exit 1
-          fi
-          if [[ -n "$PRE_RELEASE" ]]; then
-            pnpm version "$VERSION_TYPE" --preid "$PRE_RELEASE" --no-git-tag-version
-          else
-            pnpm version "$VERSION_TYPE" --no-git-tag-version
-          fi
-
+          pnpm version ${{ github.event.inputs.version_type }} --preid ${{ github.event.inputs.pre_release }} --no-git-tag-version
           NEW_VERSION=$(node -p "require('./package.json').version")
-          echo "NEW_VERSION=$NEW_VERSION" >> "$GITHUB_OUTPUT"
+          echo "NEW_VERSION=$NEW_VERSION" >> $GITHUB_OUTPUT
 
       - name: Format PR string
         id: capitalised
-        env:
-          VERSION_TYPE: ${{ steps.prepared-inputs.outputs.version_type }}
         run: |
-          CAPITALISED_TYPE="$VERSION_TYPE"
-          echo "capitalised=${CAPITALISED_TYPE@u}" >> "$GITHUB_OUTPUT"
+          CAPITALISED_TYPE=${{ github.event.inputs.version_type }}
+          echo "capitalised=${CAPITALISED_TYPE@u}" >> $GITHUB_OUTPUT
 
       - name: Create Pull Request
-        uses: peter-evans/create-pull-request@c0f553fe549906ede9cf27b5156039d195d2ece0 # v8.1.0
+        uses: peter-evans/create-pull-request@271a8d0340265f705b14b6d32b9829c1cb33d45e
         with:
           token: ${{ secrets.PR_GH_TOKEN }}
           commit-message: '[release] Increment version to ${{ steps.bump-version.outputs.NEW_VERSION }}'
@@ -188,8 +82,8 @@ jobs:
           body: |
             ${{ steps.capitalised.outputs.capitalised }} version increment to ${{ steps.bump-version.outputs.NEW_VERSION }}
 
-            **Base branch:** `${{ steps.prepared-inputs.outputs.branch }}`
+            **Base branch:** `${{ github.event.inputs.branch }}`
           branch: version-bump-${{ steps.bump-version.outputs.NEW_VERSION }}
-          base: ${{ steps.prepared-inputs.outputs.branch }}
+          base: ${{ github.event.inputs.branch }}
           labels: |
             Release

.github/workflows/version-bump-desktop-ui.yaml

@@ -29,7 +29,7 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
         with:
           ref: ${{ github.event.inputs.branch }}
           fetch-depth: 0
@@ -51,12 +51,12 @@ jobs:
           echo "✅ Branch '$BRANCH' exists"
 
       - name: Install pnpm
-        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
+        uses: pnpm/action-setup@v4
         with:
           version: 10
 
       - name: Setup Node.js
-        uses: actions/setup-node@v6
+        uses: actions/setup-node@v5
         with:
           node-version: '24.x'
           cache: 'pnpm'
@@ -79,7 +79,7 @@ jobs:
           echo "capitalised=${VERSION_TYPE@u}" >> $GITHUB_OUTPUT
 
       - name: Create Pull Request
-        uses: peter-evans/create-pull-request@c0f553fe549906ede9cf27b5156039d195d2ece0 # v8.1.0
+        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 }}'

.github/workflows/weekly-docs-check.yaml

@@ -1,5 +1,5 @@
 # Description: Automated weekly documentation accuracy check and update via Claude
-name: 'Weekly Documentation Check'
+name: "Weekly Documentation Check"
 
 permissions:
   contents: write
@@ -22,18 +22,18 @@ jobs:
     timeout-minutes: 45
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
         with:
-          fetch-depth: 50
+          fetch-depth: 0
           ref: main
 
       - name: Install pnpm
-        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
+        uses: pnpm/action-setup@v4
         with:
           version: 10
 
       - name: Setup Node.js
-        uses: actions/setup-node@v6
+        uses: actions/setup-node@v4
         with:
           node-version: '20'
           cache: 'pnpm'
@@ -49,7 +49,7 @@ jobs:
           fi
 
       - name: Run Claude Documentation Review
-        uses: anthropics/claude-code-action@ff34ce0ff04a470bd3fa56c1ef391c8f1c19f8e9 # v1.0.38
+        uses: anthropics/claude-code-action@v1.0.6
         with:
           prompt: |
             Is all documentation still 100% accurate?
@@ -130,7 +130,7 @@ jobs:
 
       - name: Create or Update Pull Request
         if: steps.check_changes.outputs.has_changes == 'true'
-        uses: peter-evans/create-pull-request@c0f553fe549906ede9cf27b5156039d195d2ece0 # v8.1.0
+        uses: peter-evans/create-pull-request@v7
         with:
           token: ${{ secrets.PR_GH_TOKEN }}
           commit-message: 'docs: weekly documentation accuracy update'

.gitignore

@@ -64,7 +64,6 @@ browser_tests/local/
 dist.zip
 
 /temp/
-/tmp/
 
 # Generated JSON Schemas
 /schemas/
@@ -97,5 +96,3 @@ vitest.config.*.timestamp*
 
 # Weekly docs check output
 /output.txt
-
-.amp

.i18nrc.cjs

@@ -1,29 +1,16 @@
 // This file is intentionally kept in CommonJS format (.cjs)
 // to resolve compatibility issues with dependencies that require CommonJS.
 // Do not convert this file to ESModule format unless all dependencies support it.
-const { defineConfig } = require('@lobehub/i18n-cli')
+const { defineConfig } = require('@lobehub/i18n-cli');
 
 module.exports = defineConfig({
   modelName: 'gpt-4.1',
   splitToken: 1024,
-  saveImmediately: true,
   entry: 'src/locales/en',
   entryLocale: 'en',
   output: 'src/locales',
-  outputLocales: [
-    'zh',
-    'zh-TW',
-    'ru',
-    'ja',
-    'ko',
-    'fr',
-    'es',
-    'ar',
-    'tr',
-    'pt-BR',
-    'fa'
-  ],
-  reference: `Special names to keep untranslated: flux, photomaker, clip, vae, cfg, stable audio, stable cascade, stable zero, controlnet, lora, HiDream, Civitai, Hugging Face.
+  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.
   
@@ -31,11 +18,5 @@ module.exports = defineConfig({
   - For 'zh' locale: Use ONLY Simplified Chinese characters (简体中文). Common examples: 节点 (not 節點), 画布 (not 畫布), 图像 (not 圖像), 选择 (not 選擇), 减小 (not 減小).
   - For 'zh-TW' locale: Use ONLY Traditional Chinese characters (繁體中文) with Taiwan-specific terminology.
   - NEVER mix Simplified and Traditional Chinese characters within the same locale.
-  
-  IMPORTANT Persian Translation Guidelines:
-  - For 'fa' locale: Use formal Persian (فارسی رسمی) for professional tone throughout the UI.
-  - Keep commonly used technical terms in English when they are standard in Persian software (e.g., node, workflow).
-  - Use Arabic-Indic numerals (۰-۹) for numbers where appropriate.
-  - Maintain consistency with terminology used in Persian software and design applications.
   `
-})
+});

.npmrc

@@ -1,3 +1,2 @@
 ignore-workspace-root-check=true
 catalog-mode=prefer
-public-hoist-pattern[]=@parcel/watcher

.oxfmtrc.json

@@ -1,14 +0,0 @@
-{
-  "$schema": "./node_modules/oxfmt/configuration_schema.json",
-  "singleQuote": true,
-  "tabWidth": 2,
-  "semi": false,
-  "trailingComma": "none",
-  "printWidth": 80,
-  "ignorePatterns": [
-    "packages/registry-types/src/comfyRegistryTypes.ts",
-    "public/materialdesignicons.min.css",
-    "src/types/generatedManagerTypes.ts",
-    "**/__fixtures__/**/*.json"
-  ]
-}

.oxlintrc.json

@@ -2,82 +2,25 @@
   "$schema": "./node_modules/oxlint/configuration_schema.json",
   "ignorePatterns": [
     ".i18nrc.cjs",
-    ".nx/*",
+    "components.d.ts",
+    "lint-staged.config.js",
+    "vitest.setup.ts",
     "**/vite.config.*.timestamp*",
     "**/vitest.config.*.timestamp*",
-    "components.d.ts",
-    "coverage/*",
-    "dist/*",
     "packages/registry-types/src/comfyRegistryTypes.ts",
-    "playwright-report/*",
     "src/extensions/core/*",
     "src/scripts/*",
     "src/types/generatedManagerTypes.ts",
-    "src/types/vue-shim.d.ts",
-    "test-results/*",
-    "vitest.setup.ts"
-  ],
-  "plugins": [
-    "eslint",
-    "import",
-    "oxc",
-    "typescript",
-    "unicorn",
-    "vitest",
-    "vue"
+    "src/types/vue-shim.d.ts"
   ],
   "rules": {
     "no-async-promise-executor": "off",
-    "no-console": [
-      "error",
-      {
-        "allow": ["warn", "error"]
-      }
-    ],
     "no-control-regex": "off",
     "no-eval": "off",
-    "no-redeclare": "error",
-    "no-restricted-imports": [
-      "error",
-      {
-        "paths": [
-          {
-            "name": "primevue/calendar",
-            "message": "Calendar is deprecated in PrimeVue 4+. Use DatePicker instead: import DatePicker from 'primevue/datepicker'"
-          },
-          {
-            "name": "primevue/dropdown",
-            "message": "Dropdown is deprecated in PrimeVue 4+. Use Select instead: import Select from 'primevue/select'"
-          },
-          {
-            "name": "primevue/inputswitch",
-            "message": "InputSwitch is deprecated in PrimeVue 4+. Use ToggleSwitch instead: import ToggleSwitch from 'primevue/toggleswitch'"
-          },
-          {
-            "name": "primevue/overlaypanel",
-            "message": "OverlayPanel is deprecated in PrimeVue 4+. Use Popover instead: import Popover from 'primevue/popover'"
-          },
-          {
-            "name": "primevue/sidebar",
-            "message": "Sidebar is deprecated in PrimeVue 4+. Use Drawer instead: import Drawer from 'primevue/drawer'"
-          }
-        ]
-      }
-    ],
     "no-self-assign": "allow",
     "no-unused-expressions": "off",
     "no-unused-private-class-members": "off",
     "no-useless-rename": "off",
-    "import/default": "error",
-    "import/export": "error",
-    "import/namespace": "error",
-    "import/no-duplicates": "error",
-    "import/consistent-type-specifier-style": ["error", "prefer-top-level"],
-    "jest/expect-expect": "off",
-    "jest/no-conditional-expect": "off",
-    "jest/no-disabled-tests": "off",
-    "jest/no-standalone-expect": "off",
-    "jest/valid-title": "off",
     "typescript/no-this-alias": "off",
     "typescript/no-unnecessary-parameter-property-assignment": "off",
     "typescript/no-unsafe-declaration-merging": "off",
@@ -95,28 +38,6 @@
     "typescript/no-redundant-type-constituents": "off",
     "typescript/restrict-template-expressions": "off",
     "typescript/unbound-method": "off",
-    "typescript/no-floating-promises": "error",
-    "typescript/no-explicit-any": "error",
-    "vue/no-import-compiler-macros": "error",
-    "vue/no-dupe-keys": "error"
-  },
-  "overrides": [
-    {
-      "files": ["**/*.{stories,test,spec}.ts", "**/*.stories.vue"],
-      "rules": {
-        "no-console": "allow"
-      }
-    },
-    {
-      "files": ["browser_tests/**/*.ts"],
-      "rules": {
-        "typescript/no-explicit-any": "error",
-        "no-async-promise-executor": "error",
-        "no-control-regex": "error",
-        "no-useless-rename": "error",
-        "no-unused-private-class-members": "error",
-        "unicorn/no-empty-file": "error"
-      }
-    }
-  ]
-}
+    "typescript/no-floating-promises": "error"
+  }
+}

.pinact.yaml

@@ -1,24 +0,0 @@
-# pinact configuration
-# https://github.com/suzuki-shunsuke/pinact
-version: 3
-
-files:
-  - pattern: .github/workflows/*.yaml
-  - pattern: .github/actions/**/*.yaml
-
-# Actions that don't need SHA pinning (official GitHub actions are trusted)
-ignore_actions:
-  - name: actions/cache
-    ref: v5
-  - name: actions/checkout
-    ref: v6
-  - name: actions/setup-node
-    ref: v6
-  - name: actions/setup-python
-    ref: v6
-  - name: actions/upload-artifact
-    ref: v6
-  - name: actions/download-artifact
-    ref: v7
-  - name: actions/github-script
-    ref: v8

.prettierignore

@@ -0,0 +1,2 @@
+packages/registry-types/src/comfyRegistryTypes.ts
+src/types/generatedManagerTypes.ts

.prettierrc

@@ -0,0 +1,11 @@
+{
+  "singleQuote": true,
+  "tabWidth": 2,
+  "semi": false,
+  "trailingComma": "none",
+  "printWidth": 80,
+  "importOrder": ["^@core/(.*)$", "<THIRD_PARTY_MODULES>", "^@/(.*)$", "^[./]"],
+  "importOrderSeparation": true,
+  "importOrderSortSpecifiers": true,
+  "plugins": ["@prettier/plugin-oxc", "@trivago/prettier-plugin-sort-imports"]
+}

.storybook/AGENTS.md

@@ -1,18 +0,0 @@
-# Storybook Guidelines
-
-See `@docs/guidance/storybook.md` for story patterns (auto-loaded for `*.stories.ts`).
-
-## Available Context
-
-Stories have access to:
-
-- All ComfyUI stores
-- PrimeVue with ComfyUI theming
-- i18n system
-- CSS variables and styling
-
-## Troubleshooting
-
-1. **Import Errors**: Verify `@/` alias works
-2. **Missing Styles**: Check CSS imports in `preview.ts`
-3. **Store Errors**: Check store initialization in setup

.storybook/CLAUDE.md

@@ -1,4 +1,197 @@
-<!-- Though standards bloom in open fields so wide,
-     Anthropic walks a path of lonely pride. -->
+# Storybook Development Guidelines for Claude
 
-@AGENTS.md
+## Quick Commands
+
+- `pnpm storybook`: Start Storybook development server
+- `pnpm build-storybook`: Build static Storybook
+- `pnpm test:unit`: Run unit tests (includes Storybook components)
+
+## Development Workflow for Storybook
+
+1. **Creating New Stories**:
+   - Place `*.stories.ts` files alongside components
+   - Follow the naming pattern: `ComponentName.stories.ts`
+   - Use realistic mock data that matches ComfyUI schemas
+
+2. **Testing Stories**:
+   - Verify stories render correctly in Storybook UI
+   - Test different component states and edge cases
+   - Ensure proper theming and styling
+
+3. **Code Quality**:
+   - Run `pnpm typecheck` to verify TypeScript
+   - Run `pnpm lint` to check for linting issues
+   - Follow existing story patterns and conventions
+
+## Story Creation Guidelines
+
+### Basic Story Structure
+
+```typescript
+import type { Meta, StoryObj } from '@storybook/vue3'
+import ComponentName from './ComponentName.vue'
+
+const meta: Meta<typeof ComponentName> = {
+  title: 'Category/ComponentName',
+  component: ComponentName,
+  parameters: {
+    layout: 'centered' // or 'fullscreen', 'padded'
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    // Component props
+  }
+}
+```
+
+### Mock Data Patterns
+
+For ComfyUI components, use realistic mock data:
+
+```typescript
+// Node definition mock
+const mockNodeDef = {
+  input: {
+    required: {
+      prompt: ["STRING", { multiline: true }]
+    }
+  },
+  output: ["CONDITIONING"],
+  output_is_list: [false],
+  category: "conditioning"
+}
+
+// Component instance mock
+const mockComponent = {
+  id: "1",
+  type: "CLIPTextEncode",
+  // ... other properties
+}
+```
+
+### Common Story Variants
+
+Always include these story variants when applicable:
+
+- **Default**: Basic component with minimal props
+- **WithData**: Component with realistic data
+- **Loading**: Component in loading state
+- **Error**: Component with error state
+- **LongContent**: Component with edge case content
+- **Empty**: Component with no data
+
+### Storybook-Specific Code Patterns
+
+#### Store Access
+```typescript
+// In stories, access stores through the setup function
+export const WithStore: Story = {
+  render: () => ({
+    setup() {
+      const store = useMyStore()
+      return { store }
+    },
+    template: '<MyComponent :data="store.data" />'
+  })
+}
+```
+
+#### Event Testing
+```typescript
+export const WithEvents: Story = {
+  args: {
+    onUpdate: fn() // Use Storybook's fn() for action logging
+  }
+}
+```
+
+## Configuration Notes
+
+### Vue App Setup
+The Storybook preview is configured with:
+- Pinia stores initialized
+- PrimeVue with ComfyUI theme
+- i18n internationalization
+- All necessary CSS imports
+
+### Build Configuration
+- Vite integration with proper alias resolution
+- Manual chunking for better performance
+- TypeScript support with strict checking
+- CSS processing for Vue components
+
+## Troubleshooting
+
+### Common Issues
+
+1. **Import Errors**: Verify `@/` alias is working correctly
+2. **Missing Styles**: Ensure CSS imports are in `preview.ts`
+3. **Store Errors**: Check store initialization in setup
+4. **Type Errors**: Use proper TypeScript types for story args
+
+### Debug Commands
+
+```bash
+# Check TypeScript issues
+pnpm typecheck
+
+# Lint Storybook files
+pnpm lint .storybook/
+
+# Build to check for production issues
+pnpm build-storybook
+```
+
+## File Organization
+
+```
+.storybook/
+├── main.ts          # Core configuration
+├── preview.ts       # Global setup and decorators
+├── README.md        # User documentation
+└── CLAUDE.md        # This file - Claude guidelines
+
+src/
+├── components/
+│   └── MyComponent/
+│       ├── MyComponent.vue
+│       └── MyComponent.stories.ts
+```
+
+## Integration with ComfyUI
+
+### Available Context
+
+Stories have access to:
+- All ComfyUI stores (widgetStore, colorPaletteStore, etc.)
+- PrimeVue components with ComfyUI theming
+- Internationalization system
+- ComfyUI CSS variables and styling
+
+### Testing Components
+
+When testing ComfyUI-specific components:
+1. Use realistic node definitions and data structures
+2. Test with different node types (sampling, conditioning, etc.)
+3. Verify proper CSS theming and dark/light modes
+4. Check component behavior with various input combinations
+
+### Performance Considerations
+
+- Use manual chunking for large dependencies
+- Minimize bundle size by avoiding unnecessary imports
+- Leverage Storybook's lazy loading capabilities
+- Profile build times and optimize as needed
+
+## Best Practices
+
+1. **Keep Stories Focused**: Each story should demonstrate one specific use case
+2. **Use Descriptive Names**: Story names should clearly indicate what they show
+3. **Document Complex Props**: Use JSDoc comments for complex prop types
+4. **Test Edge Cases**: Create stories for unusual but valid use cases
+5. **Maintain Consistency**: Follow established patterns in existing stories

.storybook/README.md

@@ -12,17 +12,16 @@ Storybook is a frontend workshop for building UI components and pages in isolati
 
 ## Storybook vs Other Testing Tools
 
-| Tool                    | Purpose                             | Use Case                                                     |
-| ----------------------- | ----------------------------------- | ------------------------------------------------------------ |
-| **Storybook**           | Component isolation & documentation | Developing, testing, and showcasing individual UI components |
-| **Playwright**          | End-to-end testing                  | Full user workflow testing across multiple pages             |
-| **Vitest**              | Unit testing                        | Testing business logic, utilities, and component behavior    |
-| **Vue Testing Library** | Component testing                   | Testing component interactions and DOM output                |
+| Tool | Purpose | Use Case |
+|------|---------|----------|
+| **Storybook** | Component isolation & documentation | Developing, testing, and showcasing individual UI components |
+| **Playwright** | End-to-end testing | Full user workflow testing across multiple pages |
+| **Vitest** | Unit testing | Testing business logic, utilities, and component behavior |
+| **Vue Testing Library** | Component testing | Testing component interactions and DOM output |
 
 ### When to Use Storybook
 
 **✅ Use Storybook for:**
-
 - Developing new UI components in isolation
 - Creating component documentation and examples
 - Testing different component states and props
@@ -31,7 +30,6 @@ Storybook is a frontend workshop for building UI components and pages in isolati
 - Building a component library or design system
 
 **❌ Don't use Storybook for:**
-
 - Testing complex user workflows (use Playwright)
 - Testing business logic (use Vitest)
 - Integration testing between components (use Vue Testing Library)
@@ -98,7 +96,6 @@ export const WithVariant: Story = {
 ## ComfyUI Storybook Guidelines
 
 ### Scope – When to Create Stories
-
 - **PrimeVue components**:  
   No need to create stories. Just refer to the official PrimeVue documentation.
 - **Custom shared components (design system components)**:  
@@ -107,7 +104,6 @@ export const WithVariant: Story = {
   Do not create stories. Only the underlying pure UI components should be included in Storybook.
 
 ### Maintenance Philosophy
-
 - Stories are lightweight and generally stable.  
   Once created, they rarely need updates unless:
   - The design changes
@@ -115,12 +111,10 @@ export const WithVariant: Story = {
 - For existing usage patterns, simply copy real code examples into Storybook to create stories.
 
 ### File Placement
-
-- Keep `*.stories.ts` files at the **same level as the component** (similar to test files).
+- Keep `*.stories.ts` files at the **same level as the component** (similar to test files).  
 - This makes it easier to check usage examples without navigating to another directory.
 
 ### Developer/Designer Workflow
-
 - **UI vs Container**: Separate pure UI components from container components.  
   Only UI components should live in Storybook.
 - **Communication Tool**: Storybook is not just about code quality—it enables designers and developers to see:
@@ -132,10 +126,9 @@ export const WithVariant: Story = {
   → Only create a story for the base UI button, not for the wrapper.
 
 ### Suggested Workflow
-
-1. Use PrimeVue docs for standard components
-2. Use Storybook for **shared/custom components** that define our design system
-3. Keep story files alongside components
+1. Use PrimeVue docs for standard components  
+2. Use Storybook for **shared/custom components** that define our design system  
+3. Keep story files alongside components  
 4. When in doubt, focus on components reused across the app or those that need to be showcased to designers
 
 ### Best Practices
@@ -218,12 +211,13 @@ This Storybook setup includes:
 
 ## Icon Usage in Storybook
 
-In this project, only the `<i class="icon-[lucide--folder]" />` syntax from unplugin-icons is supported in Storybook.
+In this project, only the `<i class="icon-[lucide--folder]" />` syntax from unplugin-icons is supported in Storybook.  
 
 **Example:**
 
 ```vue
-<script setup lang="ts"></script>
+<script setup lang="ts">
+</script>
 
 <template>
   <i class="icon-[lucide--trophy] text-neutral size-4" />
@@ -232,3 +226,4 @@ In this project, only the `<i class="icon-[lucide--folder]" />` syntax from unpl
 ```
 
 This approach ensures icons render correctly in Storybook and remain consistent with the rest of the app.
+

.storybook/main.ts

@@ -7,7 +7,7 @@ import type { InlineConfig } from 'vite'
 
 const config: StorybookConfig = {
   stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-  addons: ['@storybook/addon-docs', '@storybook/addon-mcp'],
+  addons: ['@storybook/addon-docs'],
   framework: {
     name: '@storybook/vue3-vite',
     options: {}
@@ -64,45 +64,25 @@ const config: StorybookConfig = {
           deep: true,
           extensions: ['vue']
         })
+        // Note: Explicitly NOT including generateImportMapPlugin to avoid externalization
       ],
       server: {
         allowedHosts: true
       },
       resolve: {
-        alias: [
-          {
-            find: '@/composables/queue/useJobList',
-            replacement: process.cwd() + '/src/storybook/mocks/useJobList.ts'
-          },
-          {
-            find: '@/composables/queue/useJobActions',
-            replacement: process.cwd() + '/src/storybook/mocks/useJobActions.ts'
-          },
-          {
-            find: '@/utils/formatUtil',
-            replacement:
-              process.cwd() +
-              '/packages/shared-frontend-utils/src/formatUtil.ts'
-          },
-          {
-            find: '@/utils/networkUtil',
-            replacement:
-              process.cwd() +
-              '/packages/shared-frontend-utils/src/networkUtil.ts'
-          },
-          {
-            find: '@',
-            replacement: process.cwd() + '/src'
-          }
-        ]
+        alias: {
+          '@': process.cwd() + '/src'
+        }
+      },
+      esbuild: {
+        // Prevent minification of identifiers to preserve _sfc_main
+        minifyIdentifiers: false,
+        keepNames: true
       },
       build: {
-        rolldownOptions: {
+        rollupOptions: {
+          // Disable tree-shaking for Storybook to prevent Vue SFC exports from being removed
           treeshake: false,
-          output: {
-            keepNames: true,
-            strictExecutionOrder: true
-          },
           onwarn: (warning, warn) => {
             // Suppress specific warnings
             if (

.storybook/preview-head.html

@@ -1,9 +1,7 @@
 <style>
   body {
     overflow-y: auto !important;
-    transition:
-      background-color 0.3s ease,
-      color 0.3s ease;
+    transition: background-color 0.3s ease, color 0.3s ease;
   }
 
   /* Light theme default - with explicit color to override media queries */
@@ -59,8 +57,8 @@
 
   /* Override Storybook's problematic & selector styles */
   /* Reset only the specific properties that Storybook injects */
-  li + li {
+  li+li {
     margin: 0;
     padding: revert-layer;
   }
-</style>
+</style>

.storybook/preview.ts

@@ -9,9 +9,9 @@ import ConfirmationService from 'primevue/confirmationservice'
 import ToastService from 'primevue/toastservice'
 import Tooltip from 'primevue/tooltip'
 
+import '@/assets/css/style.css'
 import { i18n } from '@/i18n'
 import '@/lib/litegraph/public/css/litegraph.css'
-import '@/assets/css/style.css'
 
 const ComfyUIPreset = definePreset(Aura, {
   semantic: {
@@ -58,7 +58,6 @@ export const withTheme = (Story: StoryFn, context: StoryContext) => {
     document.documentElement.classList.remove('dark-theme')
     document.body.classList.remove('dark-theme')
   }
-  document.body.classList.add('[&_*]:!font-inter')
 
   return Story(context.args, context)
 }
@@ -90,6 +89,7 @@ const preview: Preview = {
           { value: 'light', icon: 'sun', title: 'Light' },
           { value: 'dark', icon: 'moon', title: 'Dark' }
         ],
+        showName: true,
         dynamicTitle: true
       }
     }

.stylelintrc.json

@@ -12,9 +12,6 @@
     "declaration-property-value-no-unknown": [
       true,
       {
-        "typesSyntax": {
-          "radial-gradient()": "| <any-value>"
-        },
         "ignoreProperties": {
           "speak": ["none"],
           "app-region": ["drag", "no-drag"],
@@ -40,27 +37,29 @@
     "block-no-empty": true,
     "no-descending-specificity": null,
     "no-duplicate-at-import-rules": true,
-    "at-rule-disallowed-list": ["apply"],
     "at-rule-no-unknown": [
       true,
       {
         "ignoreAtRules": [
           "tailwind",
+          "apply",
           "layer",
           "config",
           "theme",
           "reference",
           "plugin",
           "custom-variant",
-          "utility",
-          "source"
+          "utility"
         ]
       }
     ],
     "function-no-unknown": [
       true,
       {
-        "ignoreFunctions": ["theme", "v-bind", "from-folder", "from-json"]
+        "ignoreFunctions": [
+          "theme",
+          "v-bind"
+        ]
       }
     ]
   },

.vscode/custom-css.json

@@ -47,4 +47,4 @@
       "status": "obsolete"
     }
   ]
-}
+}

.vscode/extensions.json

@@ -1,22 +1,25 @@
 {
   "recommendations": [
-    "antfu.vite",
     "austenc.tailwind-docs",
     "bradlc.vscode-tailwindcss",
     "davidanson.vscode-markdownlint",
     "dbaeumer.vscode-eslint",
-    "donjayamanne.githistory",
     "eamodio.gitlens",
+    "esbenp.prettier-vscode",
+    "figma.figma-vscode-extension",
     "github.vscode-github-actions",
     "github.vscode-pull-request-github",
     "hbenl.vscode-test-explorer",
-    "kisstkondoros.vscode-codemetrics",
     "lokalise.i18n-ally",
     "ms-playwright.playwright",
-    "oxc.oxc-vscode",
-    "sonarsource.sonarlint-vscode",
     "vitest.explorer",
     "vue.volar",
-    "wix.vscode-import-cost"
+    "sonarsource.sonarlint-vscode",
+    "deque-systems.vscode-axe-linter",
+    "kisstkondoros.vscode-codemetrics",
+    "donjayamanne.githistory",
+    "wix.vscode-import-cost",
+    "prograhammer.tslint-vue",
+    "antfu.vite"
   ]
 }

.yamllint

@@ -8,6 +8,3 @@ rules:
   line-length: disable
   document-start: disable
   truthy: disable
-  comments: 
-    min-spaces-from-content: 1
-  

AGENTS.md

@@ -1,318 +1,38 @@
 # Repository Guidelines
 
-See @docs/guidance/\*.md for file-type-specific conventions (auto-loaded by glob).
-
 ## Project Structure & Module Organization
-
-- Source: `src/`
-  - Vue 3.5+
-  - TypeScript
-  - Tailwind 4
-  - Key areas:
-    - `components/`
-    - `views/`
-    - `stores/` (Pinia)
-    - `composables/`
-    - `services/`
-    - `utils/`
-    - `assets/`
-    - `locales/`
-- Routing: `src/router.ts`,
-- i18n: `src/i18n.ts`,
-- Entry Point: `src/main.ts`.
-- Tests:
-  - unit/component in `src/**/*.test.ts`
-  - E2E (Playwright) in `browser_tests/**/*.spec.ts`
-- Public assets: `public/`
-- Build output: `dist/`
-- Configs
-  - `vite.config.mts`
-  - `playwright.config.ts`
-  - `eslint.config.ts`
-  - `.oxfmtrc.json`
-  - `.oxlintrc.json`
-  - etc.
-
-## Monorepo Architecture
-
-The project uses **Nx** for build orchestration and task management
-
-## Package Manager
-
-This project uses **pnpm**. Always prefer scripts defined in `package.json` (e.g., `pnpm test:unit`, `pnpm lint`). To run arbitrary packages not in scripts, use `pnpx` or `pnpm dlx` — never `npx`.
+- Source: `src/` (Vue 3 + TypeScript). Key areas: `components/`, `views/`, `stores/` (Pinia), `composables/`, `services/`, `utils/`, `assets/`, `locales/`.
+- Routing/i18n/entry: `src/router.ts`, `src/i18n.ts`, `src/main.ts`.
+- Tests: unit/component in `tests-ui/` and `src/components/**/*.{test,spec}.ts`; E2E in `browser_tests/`.
+- Public assets: `public/`. Build output: `dist/`.
+- Config: `vite.config.mts`, `vitest.config.ts`, `playwright.config.ts`, `eslint.config.ts`, `.prettierrc`.
 
 ## Build, Test, and Development Commands
-
 - `pnpm dev`: Start Vite dev server.
-- `pnpm dev:electron`: Dev server with Electron API mocks
-- `pnpm build`: Type-check then production build to `dist/`
-- `pnpm preview`: Preview the production build locally
-- `pnpm test:unit`: Run Vitest unit tests
-- `pnpm test:browser:local`: Run Playwright E2E tests (`browser_tests/`)
-- `pnpm lint` / `pnpm lint:fix`: Lint (ESLint)
-- `pnpm format` / `pnpm format:check`: oxfmt
-- `pnpm typecheck`: Vue TSC type checking
-- `pnpm storybook`: Start Storybook development server
-
-## Development Workflow
-
-1. Make code changes
-2. Run relevant tests
-3. Run `pnpm typecheck`, `pnpm lint`, `pnpm format`
-4. Check if README updates are needed
-5. Suggest docs.comfy.org updates for user-facing changes
-
-## Git Conventions
-
-- Use `prefix:` format: `feat:`, `fix:`, `test:`
-- Add "Fixes #n" to PR descriptions
-- Never mention Claude/AI in commits
+- `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.
+- `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.
 
 ## Coding Style & Naming Conventions
-
-- Language:
-  - TypeScript (exclusive, no new JavaScript)
-  - Vue 3 SFCs (`.vue`)
-    - Composition API only
-  - Tailwind 4 styling
-    - Avoid `<style>` blocks
-- Style: (see `.oxfmtrc.json`)
-  - Indent 2 spaces
-  - single quotes
-  - no trailing semicolons
-  - width 80
-- Imports:
-  - sorted/grouped by plugin
-  - run `pnpm format` before committing
-  - use separate `import type` statements, not inline `type` in mixed imports
-    - ✅ `import type { Foo } from './foo'` + `import { bar } from './foo'`
-    - ❌ `import { bar, type Foo } from './foo'`
-- ESLint:
-  - Vue + TS rules
-  - no floating promises
-  - unused imports disallowed
-  - i18n raw text restrictions in templates
-- Naming:
-  - Vue components in PascalCase (e.g., `MenuHamburger.vue`)
-  - composables `useXyz.ts`
-  - Pinia stores `*Store.ts`
-
-## Commit & Pull Request Guidelines
-
-- PRs:
-  - Include clear description
-  - Reference linked issues (e.g. `- Fixes #123`)
-  - Keep it extremely concise and information-dense
-  - Don't use emojis or add excessive headers/sections
-  - Follow the PR description template in the `.github/` folder.
-- Quality gates:
-  - `pnpm lint`
-  - `pnpm typecheck`
-  - `pnpm knip`
-  - Relevant tests must pass
-- Never use `--no-verify` to bypass failing tests
-  - Identify the issue and present root cause analysis and possible solutions if you are unable to solve quickly yourself
-- Keep PRs focused and small
-  - If it looks like the current changes will have 300+ lines of non-test code, suggest ways it could be broken into multiple PRs
-
-## Security & Configuration Tips
-
-- Secrets: Use `.env` (see `.env_example`); do not commit secrets.
-
-## Vue 3 Composition API Best Practices
-
-- Use `<script setup lang="ts">` for component logic
-- Utilize `ref` for reactive state
-- Implement computed properties with computed()
-- Use watch and watchEffect for side effects
-  - Avoid using a `ref` and a `watch` if a `computed` would work instead
-- Implement lifecycle hooks with onMounted, onUpdated, etc.
-- Utilize provide/inject for dependency injection
-  - Do not use dependency injection if a Store or a shared composable would be simpler
-- Use Vue 3.5 TypeScript style of default prop declaration
-  - Example:
-
-    ```typescript
-    const { nodes, showTotal = true } = defineProps<{
-      nodes: ApiNodeCost[]
-      showTotal?: boolean
-    }>()
-    ```
-
-  - Prefer reactive props destructuring to `const props = defineProps<...>`
-  - Do not use `withDefaults` or runtime props declaration
-  - Do not import Vue macros unnecessarily
-  - Prefer `defineModel` to separately defining a prop and emit for v-model bindings
-  - Define slots via template usage, not `defineSlots`
-  - Use same-name shorthand for slot prop bindings: `:isExpanded` instead of `:is-expanded="isExpanded"`
-  - Derive component types using `vue-component-type-helpers` (`ComponentProps`, `ComponentSlots`) instead of separate type files
-  - Be judicious with addition of new refs or other state
-    - If it's possible to accomplish the design goals with just a prop, don't add a `ref`
-    - If it's possible to use the `ref` or prop directly, don't add a `computed`
-    - If it's possible to use a `computed` to name and reuse a derived value, don't use a `watch`
-
-## Development Guidelines
-
-1. Leverage VueUse functions for performance-enhancing styles
-2. Use es-toolkit for utility functions
-3. Use TypeScript for type safety
-4. If a complex type definition is inlined in multiple related places, extract and name it for reuse
-5. In Vue Components, implement proper props and emits definitions
-6. Utilize Vue 3's Teleport component when needed
-7. Use Suspense for async components
-8. Implement proper error handling
-9. Follow Vue 3 style guide and naming conventions
-10. Use Vite for fast development and building
-11. Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json. Use the plurals system in i18n instead of hardcoding pluralization in templates.
-12. Avoid new usage of PrimeVue components
-13. Write tests for all changes, especially bug fixes to catch future regressions
-14. Write code that is expressive and self-documenting to the furthest degree possible. This reduces the need for code comments which can get out of sync with the code itself. Try to avoid comments unless absolutely necessary
-15. Do not add or retain redundant comments, clean as you go
-16. Whenever a new piece of code is written, the author should ask themselves 'is there a simpler way to introduce the same functionality?'. If the answer is yes, the simpler course should be chosen
-17. [Refactoring](https://refactoring.com/catalog/) should be used to make complex code simpler
-18. Try to minimize the surface area (exported values) of each module and composable
-19. Don't use barrel files, e.g. `/some/package/index.ts` to re-export within `/src`
-20. Keep functions short and functional
-21. Minimize [nesting](https://wiki.c2.com/?ArrowAntiPattern), e.g. `if () { ... }` or `for () { ... }`
-22. Avoid mutable state, prefer immutability and assignment at point of declaration
-23. Favor pure functions (especially testable ones)
-24. Do not use function expressions if it's possible to use function declarations instead
-25. Watch out for [Code Smells](https://wiki.c2.com/?CodeSmell) and refactor to avoid them
+- Language: TypeScript, Vue SFCs (`.vue`). Indent 2 spaces; single quotes; no semicolons; width 80 (see `.prettierrc`).
+- Imports: sorted/grouped by plugin; run `pnpm format` before committing.
+- ESLint: Vue + TS rules; no floating promises; unused imports disallowed; i18n raw text restrictions in templates.
+- Naming: Vue components in PascalCase (e.g., `MenuHamburger.vue`); composables `useXyz.ts`; Pinia stores `*Store.ts`.
 
 ## Testing Guidelines
+- Frameworks: Vitest (unit/component, happy-dom) and Playwright (E2E).
+- Test files: `**/*.{test,spec}.{ts,tsx,js}` under `tests-ui/`, `src/components/`, and `src/lib/litegraph/test/`.
+- Coverage: text/json/html reporters enabled; aim to cover critical logic and new features.
+- Playwright: place tests in `browser_tests/`; optional tags like `@mobile`, `@2x` are respected by config.
 
-See @docs/testing/\*.md for detailed patterns.
+## Commit & Pull Request Guidelines
+- 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.
 
-- Frameworks:
-  - Vitest (unit/component, happy-dom)
-  - Playwright (E2E)
-- Test files:
-  - Unit/Component: `**/*.test.ts`
-  - E2E: `browser_tests/**/*.spec.ts`
-  - Litegraph Specific: `src/lib/litegraph/test/`
-
-### General
-
-1. Do not write change detector tests  
-   e.g. a test that just asserts that the defaults are certain values
-2. Do not write tests that are dependent on non-behavioral features like utility classes or styles
-3. Be parsimonious in testing, do not write redundant tests  
-   See <https://tidyfirst.substack.com/p/composable-tests>
-4. [Don’t Mock What You Don’t Own](https://hynek.me/articles/what-to-mock-in-5-mins/)
-
-### Vitest / Unit Tests
-
-1. Do not write tests that just test the mocks  
-   Ensure that the tests fail when the code itself would behave in a way that was not expected or desired
-2. For mocking, leverage [Vitest's utilities](https://vitest.dev/guide/mocking.html) where possible
-3. Keep your module mocks contained  
-   Do not use global mutable state within the test file  
-   Use `vi.hoisted()` if necessary to allow for per-test Arrange phase manipulation of deeper mock state
-4. For Component testing, use [Vue Test Utils](https://test-utils.vuejs.org/) and especially follow the advice [about making components easy to test](https://test-utils.vuejs.org/guide/essentials/easy-to-test.html)
-5. Aim for behavioral coverage of critical and new features
-
-### Playwright / Browser / E2E Tests
-
-1. Follow the Best Practices described [in the Playwright documentation](https://playwright.dev/docs/best-practices)
-2. Do not use waitForTimeout, use Locator actions and [retrying assertions](https://playwright.dev/docs/test-assertions#auto-retrying-assertions)
-3. Tags like `@mobile`, `@2x` are respected by config and should be used for relevant tests
-
-## External Resources
-
-- Vue: <https://vuejs.org/api/>
-- Tailwind: <https://tailwindcss.com/docs/styling-with-utility-classes>
-- VueUse: <https://vueuse.org/functions.html>
-- shadcn/vue: <https://www.shadcn-vue.com/>
-- Reka UI: <https://reka-ui.com/>
-- PrimeVue: <https://primevue.org>
-- ComfyUI: <https://docs.comfy.org>
-- Electron: <https://www.electronjs.org/docs/latest/>
-- Wiki: <https://deepwiki.com/Comfy-Org/ComfyUI_frontend/1-overview>
-- Nx: <https://nx.dev/docs/reference/nx-commands>
-- [Practical Test Pyramid](https://martinfowler.com/articles/practical-test-pyramid.html)
-
-## Project Philosophy
-
-- Follow good software engineering principles
-  - YAGNI
-  - AHA
-  - DRY
-  - SOLID
-- Clean, stable public APIs
-- Domain-driven design
-- Thousands of users and extensions
-- Prioritize clean interfaces that restrict extension access
-
-### Code Review
-
-In doing a code review, you should make sure that:
-
-- The code is well-designed.
-- The functionality is good for the users of the code.
-- Any UI changes are sensible and look good.
-- Any parallel programming is done safely.
-- The code isn’t more complex than it needs to be.
-- The developer isn’t implementing things they might need in the future but don’t know they need now.
-- Code has appropriate unit tests.
-- Tests are well-designed.
-- The developer used clear names for everything.
-- Comments are clear and useful, and mostly explain why instead of what.
-- Code is appropriately documented (generally in g3doc).
-- The code conforms to our style guides.
-
-#### [Complexity](https://google.github.io/eng-practices/review/reviewer/looking-for.html#complexity)
-
-Is the CL more complex than it should be? Check this at every level of the CL—are individual lines too complex? Are functions too complex? Are classes too complex? “Too complex” usually means “can’t be understood quickly by code readers.” It can also mean “developers are likely to introduce bugs when they try to call or modify this code.”
-
-A particular type of complexity is over-engineering, where developers have made the code more generic than it needs to be, or added functionality that isn’t presently needed by the system. Reviewers should be especially vigilant about over-engineering. Encourage developers to solve the problem they know needs to be solved now, not the problem that the developer speculates might need to be solved in the future. The future problem should be solved once it arrives and you can see its actual shape and requirements in the physical universe.
-
-## Repository Navigation
-
-- Check README files in key folders (browser_tests, composables, etc.)
-- Prefer running single tests for performance
-- Use --help for unfamiliar CLI tools
-
-## GitHub Integration
-
-When referencing Comfy-Org repos:
-
-1. Check for local copy
-2. Use GitHub API for branches/PRs/metadata
-3. Curl GitHub website if needed
-
-## Common Pitfalls
-
-- NEVER use `any` type - use proper TypeScript types
-- NEVER use `as any` type assertions - fix the underlying type issue
-- NEVER use `--no-verify` flag when committing
-- NEVER delete or disable tests to make them pass
-- NEVER circumvent quality checks
-- NEVER use the `dark:` tailwind variant
-  - Instead use a semantic value from the `style.css` theme
-    - e.g. `bg-node-component-surface`
-- NEVER use `:class="[]"` to merge class names
-  - Always use `import { cn } from '@/utils/tailwindUtil'`
-    - e.g. `<div :class="cn('text-node-component-header-icon', hasError && 'text-danger')" />`
-  - Use `cn()` inline in the template when feasible instead of creating a `computed` to hold the value
-- NEVER use `!important` or the `!` important prefix for tailwind classes
-  - Find existing `!important` classes that are interfering with the styling and propose corrections of those instead.
-- NEVER use arbitrary percentage values like `w-[80%]` when a Tailwind fraction utility exists
-  - Use `w-4/5` instead of `w-[80%]`, `w-1/2` instead of `w-[50%]`, etc.
-
-## Agent-only rules
-
-Rules for agent-based coding tasks.
-
-### Chrome DevTools MCP
-
-When using `take_snapshot` to inspect dropdowns, listboxes, or other components with dynamic options:
-
-- Use `verbose: true` to see the full accessibility tree including list items
-- Non-verbose snapshots often omit nested options in comboboxes/listboxes
-
-### Temporary Files
-
-- Put planning documents under `/temp/plans/`
-- Put scripts used under `/temp/scripts/`
-- Put summaries of work performed under `/temp/summaries/`
-- Put TODOs and status updates under `/temp/in_progress/`
+## Security & Configuration Tips
+- Secrets: Use `.env` (see `.env_example`); do not commit secrets.

CLAUDE.md

@@ -1 +1,136 @@
-@AGENTS.md
+# ComfyUI Frontend Project Guidelines
+
+## Repository Setup
+
+For first-time setup, use the Claude command:
+```
+/setup_repo
+```
+This bootstraps the monorepo with dependencies, builds, tests, and dev server verification.
+
+**Prerequisites:** Node.js >= 24, Git repository, available ports (5173, 6006)
+
+## Quick Commands
+
+- `pnpm`: See all available commands
+- `pnpm dev`: Start development server (port 5173, via nx)
+- `pnpm typecheck`: Type checking
+- `pnpm build`: Build for production (via nx)
+- `pnpm lint`: Linting (via nx)
+- `pnpm oxlint`: Fast Rust-based linting with Oxc
+- `pnpm format`: Prettier formatting
+- `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. **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
+
+- Use [prefix] format: [feat], [bugfix], [docs]
+- Add "Fixes #n" to PR descriptions
+- Never mention Claude/AI in commits
+
+## External Resources
+
+- PrimeVue docs: <https://primevue.org>
+- ComfyUI docs: <https://docs.comfy.org>
+- Electron: <https://www.electronjs.org/docs/latest/>
+- Wiki: <https://deepwiki.com/Comfy-Org/ComfyUI_frontend/1-overview>
+
+## Project Philosophy
+
+- Follow good software engineering principles
+  - YAGNI
+  - AHA
+  - DRY
+  - SOLID
+- Clean, stable public APIs
+- Domain-driven design
+- Thousands of users and extensions
+- Prioritize clean interfaces that restrict extension access
+
+## Repository Navigation
+
+- Check README files in key folders (tests-ui, browser_tests, composables, etc.)
+- Prefer running single tests for performance
+- Use --help for unfamiliar CLI tools
+
+## GitHub Integration
+
+When referencing Comfy-Org repos:
+
+1. Check for local copy
+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
+- NEVER use `as any` type assertions - fix the underlying type issue
+- NEVER use `--no-verify` flag when committing
+- NEVER delete or disable tests to make them pass
+- NEVER circumvent quality checks
+- NEVER use `dark:` or `dark-theme:` tailwind variants. Instead use a semantic value from the `style.css` theme, e.g. `bg-node-component-surface`
+- NEVER use `:class="[]"` to merge class names - always use `import { cn } from '@/utils/tailwindUtil'`, for example: `<div :class="cn('text-node-component-header-icon', hasError && 'text-danger')" />`

CODEOWNERS

@@ -1,65 +1,63 @@
-# Global Ownership
-*                                                 @Comfy-org/comfy_frontend_devs
-
 # Desktop/Electron
-/apps/desktop-ui/                                 @benceruleanlu @Comfy-org/comfy_frontend_devs
-/src/stores/electronDownloadStore.ts              @benceruleanlu @Comfy-org/comfy_frontend_devs
-/src/extensions/core/electronAdapter.ts           @benceruleanlu @Comfy-org/comfy_frontend_devs
-/vite.electron.config.mts                         @benceruleanlu @Comfy-org/comfy_frontend_devs
+/apps/desktop-ui/                                 @webfiltered
+/src/stores/electronDownloadStore.ts              @webfiltered
+/src/extensions/core/electronAdapter.ts           @webfiltered
+/vite.electron.config.mts                         @webfiltered
 
 # Common UI Components
-/src/components/chip/                             @viva-jinyi @Comfy-org/comfy_frontend_devs
-/src/components/card/                             @viva-jinyi @Comfy-org/comfy_frontend_devs
-/src/components/button/                           @viva-jinyi @Comfy-org/comfy_frontend_devs
-/src/components/input/                            @viva-jinyi @Comfy-org/comfy_frontend_devs
+/src/components/chip/                             @viva-jinyi
+/src/components/card/                             @viva-jinyi
+/src/components/button/                           @viva-jinyi
+/src/components/input/                            @viva-jinyi
 
 # Topbar
-/src/components/topbar/                           @pythongosssss @Comfy-org/comfy_frontend_devs
+/src/components/topbar/                           @pythongosssss
 
 # Thumbnail
-/src/renderer/core/thumbnail/                     @pythongosssss @Comfy-org/comfy_frontend_devs
+/src/renderer/core/thumbnail/                     @pythongosssss
 
 # Legacy UI
-/scripts/ui/                                      @pythongosssss @Comfy-org/comfy_frontend_devs
+/scripts/ui/                                      @pythongosssss
 
 # Link rendering
-/src/renderer/core/canvas/links/                  @benceruleanlu @Comfy-org/comfy_frontend_devs
-
-# Partner Nodes
-/src/composables/node/useNodePricing.ts           @jojodecayz @bigcat88 @Comfy-org/comfy_frontend_devs
+/src/renderer/core/canvas/links/                  @benceruleanlu
 
 # Node help system
-/src/utils/nodeHelpUtil.ts                        @benceruleanlu @Comfy-org/comfy_frontend_devs
-/src/stores/workspace/nodeHelpStore.ts            @benceruleanlu @Comfy-org/comfy_frontend_devs
-/src/services/nodeHelpService.ts                  @benceruleanlu @Comfy-org/comfy_frontend_devs
+/src/utils/nodeHelpUtil.ts                        @benceruleanlu
+/src/stores/workspace/nodeHelpStore.ts            @benceruleanlu
+/src/services/nodeHelpService.ts                  @benceruleanlu
 
 # Selection toolbox
-/src/components/graph/selectionToolbox/           @Myestery @Comfy-org/comfy_frontend_devs
+/src/components/graph/selectionToolbox/           @Myestery
 
 # Minimap
-/src/renderer/extensions/minimap/                 @jtydhr88 @Myestery @Comfy-org/comfy_frontend_devs
+/src/renderer/extensions/minimap/                 @jtydhr88
+
+# Assets
+/src/platform/assets/                             @arjansingh
 
 # Workflow Templates
-/src/platform/workflow/templates/                 @Myestery @christian-byrne @comfyui-wiki @Comfy-org/comfy_frontend_devs
-/src/components/templates/                        @Myestery @christian-byrne @comfyui-wiki @Comfy-org/comfy_frontend_devs
+/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 @Comfy-org/comfy_frontend_devs
-/src/extensions/core/maskEditorLayerFilenames.ts  @trsommer @brucew4yn3rp @Comfy-org/comfy_frontend_devs
+/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 @Comfy-org/comfy_frontend_devs
-/src/components/load3d/                           @jtydhr88 @Comfy-org/comfy_frontend_devs
+/src/extensions/core/load3d.ts                    @jtydhr88
+/src/components/load3d/                           @jtydhr88
 
 # Manager
-/src/workbench/extensions/manager/                @viva-jinyi @christian-byrne @ltdrdata @Comfy-org/comfy_frontend_devs
+/src/workbench/extensions/manager/                @viva-jinyi @christian-byrne @ltdrdata
 
 # Translations
-/src/locales/                                     @Comfy-Org/comfy_maintainer @Comfy-org/comfy_frontend_devs
+/src/locales/                                     @Yorha4D @KarryCharon @shinshin86 @Comfy-Org/comfy_maintainer
 
 # LLM Instructions (blank on purpose)
 .claude/
 .cursor/
 .cursorrules
 **/AGENTS.md
-**/CLAUDE.md
+**/CLAUDE.md

CONTRIBUTING.md

@@ -17,21 +17,27 @@ Have another idea? Drop into Discord or open an issue, and let's chat!
 ### Prerequisites & Technology Stack
 
 - **Required Software**:
-  - Node.js (v24) 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 (otherwise, you can use `pnpm dev:cloud`)
+  - A running ComfyUI backend instance
+  
+- **Tech Stack**:
+  - [Vue 3.5 Composition API](https://vuejs.org/) with [TypeScript](https://www.typescriptlang.org/)
+  - [Pinia](https://pinia.vuejs.org/) for state management
+  - [PrimeVue](https://primevue.org/) with [TailwindCSS](https://tailwindcss.com/) for UI
+  - litegraph.js (integrated in src/lib) for node editor
+  - [zod](https://zod.dev/) for schema validation
+  - [vue-i18n](https://github.com/intlify/vue-i18n) for internationalization
 
 ### Initial Setup
 
 1. Clone the repository:
-
    ```bash
    git clone https://github.com/Comfy-Org/ComfyUI_frontend.git
    cd ComfyUI_frontend
    ```
 
 2. Install dependencies:
-
    ```bash
    pnpm install
    ```
@@ -49,18 +55,15 @@ To launch ComfyUI and have it connect to your development server:
 python main.py --port 8188
 ```
 
-If you are on Mac or a low-spec machine, you can run the server in CPU mode
+### Git pre-commit hooks
 
-```bash
-python main.py --port 8188 --cpu
-```
+Run `pnpm prepare` to install Git pre-commit hooks. Currently, the pre-commit hook is used to auto-format code on commit.
 
 ### Dev Server
 
 - Start local ComfyUI backend at `localhost:8188`
 - Run `pnpm dev` to start the dev server
 - Run `pnpm dev:electron` to start the dev server with electron API mocked
-- Run `pnpm dev:cloud` to start the dev server against the cloud backend (instead of local ComfyUI server)
 
 #### Access dev server on touch devices
 
@@ -85,7 +88,8 @@ Make sure your desktop machine and touch device are on the same network. On your
 navigate to `http://<server_ip>:5173` (e.g. `http://192.168.2.20:5173` here), to access the ComfyUI frontend.
 
 > ⚠️ IMPORTANT:
-> The dev server will NOT load JavaScript extensions from custom nodes. Only core extensions (built into the frontend) will be loaded. This is because the shim system that allows custom node JavaScript to import frontend modules only works in production builds. Python custom nodes still function normally. See [Extension Development Guide](docs/extensions/development.md) for details and workarounds. And See [Extension Overview](docs/extensions/README.md) for extensions overview.
+The dev server will NOT load JavaScript extensions from custom nodes. Only core extensions (built into the frontend) will be loaded. This is because the shim system that allows custom node JavaScript to import frontend modules only works in production builds. Python custom nodes still function normally. See [Extension Development Guide](docs/extensions/development.md) for details and workarounds. And See [Extension Overview](docs/extensions/README.md) for extensions overview.
+
 
 ## Development Workflow
 
@@ -109,7 +113,8 @@ When you fix a bug that affects a version in feature freeze, we use an automated
 1. Create your PR fixing the bug on `main` branch as usual
 2. Before merging, add these labels to your PR:
    - `needs-backport` - triggers the automated backport workflow
-   - `core/1.24` - targets the `core/1.24` release candidate branch
+   - `1.24` - targets the `core/1.24` release candidate branch
+   
 3. Merge your PR normally
 4. The automated workflow will:
    - Create a new branch from `core/1.24`
@@ -127,7 +132,6 @@ When you fix a bug that affects a version in feature freeze, we use an automated
 #### Handling Conflicts
 
 If the automated cherry-pick fails due to conflicts, the workflow will comment on your PR with:
-
 - The list of conflicting files
 - Instructions to manually cherry-pick to the release candidate branch
 
@@ -141,6 +145,67 @@ This project includes `.vscode/launch.json.default` and `.vscode/settings.json.d
 
 We've also included a list of recommended extensions in `.vscode/extensions.json`. Your editor should detect this file and show a human friendly list in the Extensions panel, linking each entry to its marketplace page.
 
+### MCP Integrations
+
+#### Playwright Browser Automation
+
+The Playwright MCP server enables LLM coding assistants (like Copilot, Claude Code, etc.) to control and inspect web browsers programmatically. This allows assistants to navigate websites, take screenshots, and interact with web pages on your behalf.
+
+For ComfyUI_frontend development, you can ask coding assistants to use Playwright screenshots to continuously verify that your code changes produce the expected visual results.
+
+##### Setup for Claude Code
+
+After installing dependencies with `pnpm i`, the Playwright MCP server will be automatically available when you start Claude Code locally.
+
+Here's how Claude Code can use the Playwright MCP server to inspect the interface of the local development server (assuming you're running the dev server at `localhost:5173`):
+
+```
+> navigate to localhost:5173 and take a screenshot.
+   tell me the items in the menubar
+
+● I'll navigate to localhost:5173 and take a
+  screenshot to see the menubar items.
+
+● playwright:playwright_navigate (MCP)(url:       …
+                                      "http://local
+                                      host:5173")
+  ⎿  Navigated to http://localhost:5173
+
+● playwright:playwright_screenshot (MCP)(name: "lo…
+                                        alhost_5173
+                                        _menubar")
+
+  ⎿ Screenshot saved to: ../../../Downloads/localho
+    st_5173_menubar-2025-05-30T17-23-00-942Z.png
+  ⎿  Screenshot also stored in memory with name:
+     'localhost_5173_menubar'
+
+● Read(../../../Downloads/localhost_5173_menubar-2…
+      25-05-30T17-23-00-942Z.png)
+  ⎿  Read image (94.3KB)
+
+● Based on the screenshot, I can see the menubar at
+   the top of the ComfyUI interface contains the
+  following items:
+
+  Main Menubar Items:
+  - Workflow - Menu for workflow-related actions
+  - Edit - Menu for editing operations
+  - Help - Menu for help and documentation
+
+  Additional UI Elements:
+  - ComfyUI Logo - On the far left
+  - Workflow Tab - Shows "Unsaved Workflow" with a
+  dropdown and close button
+  - Layout Controls - On the far right (grid view
+  and hamburger menu icons)
+
+  The interface shows a typical ComfyUI workflow
+  graph with nodes like "Load Checkpoint", "CLIP
+  Text Encode (Prompt)", "KSampler", and "Empty
+  Latent Image" connected with colored cables.
+```
+
 ## Testing
 
 ### Unit Tests
@@ -150,7 +215,7 @@ We've also included a list of recommended extensions in `.vscode/extensions.json
 
 ### Playwright Tests
 
-Playwright tests verify the whole app. See [browser_tests/README.md](browser_tests/README.md) for details. The snapshots are generated in the GH actions runner, not locally.
+Playwright tests verify the whole app. See [browser_tests/README.md](browser_tests/README.md) for details.
 
 ### Running All Tests
 
@@ -158,6 +223,7 @@ Before submitting a PR, ensure all tests pass:
 
 ```bash
 pnpm test:unit
+pnpm test:browser
 pnpm typecheck
 pnpm lint
 pnpm format
@@ -166,32 +232,23 @@ pnpm format
 ## Code Style Guidelines
 
 ### TypeScript
-
 - Use TypeScript for all new code
 - Avoid `any` types - use proper type definitions
 - Never use `@ts-expect-error` - fix the underlying type issue
 
 ### Vue 3 Patterns
-
 - Use Composition API for all components
 - Follow Vue 3.5+ patterns (props destructuring is reactive)
 - Use `<script setup>` syntax
 
 ### Styling
-
 - Use Tailwind CSS classes instead of custom CSS
-- NEVER use `dark:` or `dark-theme:` tailwind variants. Instead use a semantic value from the [style.css](packages/design-system/src/css/style.css) like `bg-node-component-surface`
-
-## Design Team Approval (Required for Notable UI Changes)
-
-Changes that materially affect the default UI must be approved or requested by our design team before they can be merged. This is generally a blocking requirement and applies to internal contributors and OSS contributors alike.
+- NEVER use `dark:` or `dark-theme:` tailwind variants. Instead use a semantic value from the `style.css` theme, e.g. `bg-node-component-surface`
 
 ### Internationalization
-
 - All user-facing strings must use vue-i18n
-- Add translations to [src/locales/en/main.json](src/locales/en/main.json)
+- Add translations to `src/locales/en/main.json`
 - Use translation keys: `const { t } = useI18n(); t('key.path')`
-- The corresponding values in other locales is generated automatically on releases, PR authors only need to edit [src/locales/en/main.json](src/locales/en/main.json)
 
 ## Icons
 
@@ -201,7 +258,7 @@ The project supports three types of icons, all with automatic imports (no manual
 2. **Iconify Icons** - 200,000+ icons from various libraries: `<i class="icon-[lucide--settings]" />`, `<i class="icon-[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. Tailwind CSS icon classes (`icon-[comfy--template]`) are provided by `@iconify/tailwind4`, configured in `packages/design-system/src/css/style.css`. Custom icons are stored in `packages/design-system/src/icons/` and loaded via `from-folder` at build time.
+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 [packages/design-system/src/icons/README.md](packages/design-system/src/icons/README.md).
 
@@ -225,12 +282,34 @@ The original litegraph repository (https://github.com/Comfy-Org/litegraph.js) is
 2. Run all tests and ensure they pass
 3. Create a pull request with a clear title and description
 4. Use conventional commit format for PR titles:
-   - `feat:` for new features
-   - `fix:` for bug fixes
-   - `docs:` for documentation
-   - `refactor:` for code refactoring
-   - `test:` for test additions/changes
-   - `chore:` for maintenance tasks
+   - `[feat]` for new features
+   - `[fix]` for bug fixes
+   - `[docs]` for documentation
+   - `[refactor]` for code refactoring
+   - `[test]` for test additions/changes
+   - `[chore]` for maintenance tasks
+
+### PR Description Template
+
+```
+## Description
+Brief description of the changes
+
+## Type of Change
+- [ ] Bug fix
+- [ ] New feature
+- [ ] Breaking change
+- [ ] Documentation update
+
+## Testing
+- [ ] Unit tests pass
+- [ ] Component tests pass
+- [ ] Browser tests pass (if applicable)
+- [ ] Manual testing completed
+
+## Screenshots (if applicable)
+Add screenshots for UI changes
+```
 
 ### Review Process
 
@@ -242,9 +321,8 @@ The original litegraph repository (https://github.com/Comfy-Org/litegraph.js) is
 ## Questions?
 
 If you have questions about contributing:
-
 - Check existing issues and discussions
 - Ask in our [Discord](https://discord.com/invite/comfyorg)
 - Open a new issue for clarification
 
-Thank you for contributing to the ComfyUI Frontend!
+Thank you for contributing to ComfyUI Frontend!

README.md

@@ -13,6 +13,7 @@
 [![][github-downloads-shield]][github-downloads-link]
 [![][github-downloads-latest-shield]][github-downloads-link]
 
+
 [github-release-shield]: https://img.shields.io/github/v/release/Comfy-Org/ComfyUI_frontend?style=flat&sort=semver
 [github-release-link]: https://github.com/Comfy-Org/ComfyUI_frontend/releases
 [github-release-date-shield]: https://img.shields.io/github/release-date/Comfy-Org/ComfyUI_frontend?style=flat
@@ -32,11 +33,11 @@
 
 The project follows a structured release process for each minor version, consisting of three distinct phases:
 
-1. **Development Phase** - 2 weeks
+1. **Development Phase** - 1 week
    - Active development of new features
    - Code changes merged to the development branch
 
-2. **Feature Freeze** - 2 weeks
+2. **Feature Freeze** - 1 week
    - No new features accepted
    - Only bug fixes are cherry-picked to the release branch
    - Testing and stabilization of the codebase
@@ -46,7 +47,6 @@ The project follows a structured release process for each minor version, consist
    - Version is finalized and made available to all users
 
 ### Nightly Releases
-
 Nightly releases are published daily at [https://github.com/Comfy-Org/ComfyUI_frontend/releases](https://github.com/Comfy-Org/ComfyUI_frontend/releases).
 
 To use the latest nightly release, add the following command line argument to your ComfyUI launch script:
@@ -56,17 +56,16 @@ To use the latest nightly release, add the following command line argument to yo
 ```
 
 ## Overlapping Release Cycles
-
-The development of successive minor versions overlaps. For example, while version 1.1 is in feature freeze, development for version 1.2 begins simultaneously. Each feature has approximately 4 weeks from merge to ComfyUI stable release (2 weeks on main, 2 weeks frozen on RC).
+The development of successive minor versions overlaps. For example, while version 1.1 is in feature freeze, development for version 1.2 begins simultaneously.
 
 ### Example Release Cycle
 
-| Week | Date Range    | Version 1.1    | Version 1.2    | Version 1.3    | Patch Releases                                  |
-| ---- | ------------- | -------------- | -------------- | -------------- | ----------------------------------------------- |
-| 1-2  | Mar 1-14      | Development    | -              | -              | -                                               |
-| 3-4  | Mar 15-28     | Feature Freeze | Development    | -              | 1.1.0 through 1.1.13 (daily)                    |
-| 5-6  | Mar 29-Apr 11 | Released       | Feature Freeze | Development    | 1.1.14+ (daily)<br>1.2.0 through 1.2.13 (daily) |
-| 7-8  | Apr 12-25     | -              | Released       | Feature Freeze | 1.2.14+ (daily)<br>1.3.0 through 1.3.13 (daily) |
+| Week | Date Range | Version 1.1 | Version 1.2 | Version 1.3 | Patch Releases |
+|------|------------|-------------|-------------|-------------|----------------|
+| 1 | Mar 1-7 | Development | - | - | - |
+| 2 | Mar 8-14 | Feature Freeze | Development | - | 1.1.0 through 1.1.6 (daily) |
+| 3 | Mar 15-21 | Released | Feature Freeze | Development | 1.1.7 through 1.1.13 (daily)<br>1.2.0 through 1.2.6 (daily) |
+| 4 | Mar 22-28 | - | Released | Feature Freeze | 1.2.7 through 1.2.13 (daily)<br>1.3.0 through 1.3.6 (daily) |
 
 ## Release Summary
 
@@ -75,21 +74,19 @@ The development of successive minor versions overlaps. For example, while versio
 <details id='feature-native-translation'>
   <summary>v1.5: Native translation (i18n)</summary>
 
-ComfyUI now includes built-in translation support, replacing the need for third-party translation extensions. Select your language
-in `Comfy > Locale > Language` to translate the interface into English, Chinese (Simplified), Russian, Japanese, Korean, or Arabic. This native
-implementation offers better performance, reliability, and maintainability compared to previous solutions.<br>
-
-More details available here: https://blog.comfy.org/p/native-localization-support-i18n
+  ComfyUI now includes built-in translation support, replacing the need for third-party translation extensions. Select your language
+  in `Comfy > Locale > Language` to translate the interface into English, Chinese (Simplified), Russian, Japanese, Korean, or Arabic. This native
+  implementation offers better performance, reliability, and maintainability compared to previous solutions.<br>
 
+  More details available here: https://blog.comfy.org/p/native-localization-support-i18n
 </details>
 
 <details id='feature-mask-editor'>
   <summary>v1.4: New mask editor</summary>
 
-https://github.com/Comfy-Org/ComfyUI_frontend/pull/1284 implements a new mask editor.
-
-![image](https://github.com/user-attachments/assets/f0ea6ee5-00ee-4e5d-a09c-6938e86a1f17)
+  https://github.com/Comfy-Org/ComfyUI_frontend/pull/1284 implements a new mask editor.
 
+  ![image](https://github.com/user-attachments/assets/f0ea6ee5-00ee-4e5d-a09c-6938e86a1f17)
 </details>
 
 <details id='feature-integrated-server-terminal'>
@@ -98,22 +95,18 @@ https://github.com/Comfy-Org/ComfyUI_frontend/pull/1284 implements a new mask ed
 Press Ctrl + ` to toggle integrated terminal.
 
 https://github.com/user-attachments/assets/eddedc6a-07a3-4a83-9475-63b3977f6d94
-
 </details>
 
 <details id='feature-keybinding-customization'>
   <summary>v1.3.7: Keybinding customization</summary>
 
 ## Basic UI
-
 ![image](https://github.com/user-attachments/assets/c84a1609-3880-48e0-a746-011f36beda68)
 
 ## Reset button
-
 ![image](https://github.com/user-attachments/assets/4d2922da-bb4f-4f90-8017-a8e4a0db07c7)
 
 ## Edit Keybinding
-
 ![image](https://github.com/user-attachments/assets/77626b7a-cb46-48f8-9465-e03120aac66a)
 ![image](https://github.com/user-attachments/assets/79131a4e-75c6-4715-bd11-c6aaed887779)
 
@@ -124,34 +117,27 @@ https://github.com/user-attachments/assets/eddedc6a-07a3-4a83-9475-63b3977f6d94
 <details id='feature-node-library-sidebar'>
   <summary>v1.2.4: Node library sidebar tab</summary>
 
-#### Drag & Drop
-
+  #### Drag & Drop
 https://github.com/user-attachments/assets/853e20b7-bc0e-49c9-bbce-a2ba7566f92f
 
-#### Filter
-
+  #### Filter
 https://github.com/user-attachments/assets/4bbca3ee-318f-4cf0-be32-a5a5541066cf
-
 </details>
 
 <details id='feature-queue-sidebar'>
   <summary>v1.2.0: Queue/History sidebar tab</summary>
 
-https://github.com/user-attachments/assets/86e264fe-4d26-4f07-aa9a-83bdd2d02b8f
-
+  https://github.com/user-attachments/assets/86e264fe-4d26-4f07-aa9a-83bdd2d02b8f
 </details>
 
 <details id='feature-node-search'>
   <summary>v1.1.0: Node search box</summary>
 
-#### Fuzzy search & Node preview
-
-![image](https://github.com/user-attachments/assets/94733e32-ea4e-4a9c-b321-c1a05db48709)
-
-#### Release link with shift
-
-https://github.com/user-attachments/assets/a1b2b5c3-10d1-4256-b620-345de6858f25
+  #### Fuzzy search & Node preview
+  ![image](https://github.com/user-attachments/assets/94733e32-ea4e-4a9c-b321-c1a05db48709)
 
+  #### Release link with shift
+  https://github.com/user-attachments/assets/a1b2b5c3-10d1-4256-b620-345de6858f25
 </details>
 
 ### QoL changes
@@ -160,14 +146,12 @@ https://github.com/user-attachments/assets/a1b2b5c3-10d1-4256-b620-345de6858f25
   <summary>v1.3.32: **Litegraph** Nested group</summary>
 
 https://github.com/user-attachments/assets/f51adeb1-028e-40af-81e4-0ac13075198a
-
 </details>
 
 <details id='feature-group-selection'>
   <summary>v1.3.24: **Litegraph** Group selection</summary>
 
 https://github.com/user-attachments/assets/e6230a94-411e-4fba-90cb-6c694200adaa
-
 </details>
 
 <details id='feature-toggle-link-visibility'>
@@ -243,21 +227,17 @@ https://github.com/user-attachments/assets/c142c43f-2fe9-4030-8196-b3bfd4c6977d
 <details id='feature-auto-connect-link'>
   <summary>v1.2.2: **Litegraph** auto connects to correct slot</summary>
 
-#### Before
-
-https://github.com/user-attachments/assets/c253f778-82d5-4e6f-aec0-ea2ccf421651
-
-#### After
-
-https://github.com/user-attachments/assets/b6360ac0-f0d2-447c-9daa-8a2e20c0dc1d
+  #### Before
+  https://github.com/user-attachments/assets/c253f778-82d5-4e6f-aec0-ea2ccf421651
 
+  #### After
+  https://github.com/user-attachments/assets/b6360ac0-f0d2-447c-9daa-8a2e20c0dc1d
 </details>
 
 <details id='feature-hide-text-overflow'>
   <summary>v1.1.8: **Litegraph** hides text overflow on widget value</summary>
 
-https://github.com/user-attachments/assets/5696a89d-4a47-4fcc-9e8c-71e1264943f2
-
+  https://github.com/user-attachments/assets/5696a89d-4a47-4fcc-9e8c-71e1264943f2
 </details>
 
 ### Developer APIs
@@ -303,7 +283,8 @@ window['app'].extensionManager.dialog
 
 ```js
 // window.alert
-window['app'].extensionManager.toast.addAlert('Test Alert')
+window['app'].extensionManager.toast
+  .addAlert("Test Alert")
 ```
 
 ![image](https://github.com/user-attachments/assets/9b18bdca-76ef-4432-95de-5cd2369684f2)
@@ -402,28 +383,28 @@ app.extensionManager.setting.set('TestSetting', 'Hello, universe!')
 <details id='extension-api-commands-keybindings'>
   <summary>v1.3.7: Register commands and keybindings</summary>
 
-Extensions can call the following API to register commands and keybindings. Do
-note that keybindings defined in core cannot be overwritten, and some keybindings
-are reserved by the browser.
+  Extensions can call the following API to register commands and keybindings. Do
+  note that keybindings defined in core cannot be overwritten, and some keybindings
+  are reserved by the browser.
 
 ```js
-app.registerExtension({
-  name: 'TestExtension1',
-  commands: [
-    {
-      id: 'TestCommand',
-      function: () => {
-        alert('TestCommand')
+  app.registerExtension({
+    name: 'TestExtension1',
+    commands: [
+      {
+        id: 'TestCommand',
+        function: () => {
+          alert('TestCommand')
+        }
       }
-    }
-  ],
-  keybindings: [
-    {
-      combo: { key: 'k' },
-      commandId: 'TestCommand'
-    }
-  ]
-})
+    ],
+    keybindings: [
+      {
+        combo: { key: 'k' },
+        commandId: 'TestCommand'
+      }
+    ]
+  })
 ```
 
 </details>
@@ -431,69 +412,66 @@ app.registerExtension({
 <details id='extension-api-topbar-menu'>
   <summary>v1.3.1: Extension API to register custom topbar menu items</summary>
 
-Extensions can call the following API to register custom topbar menu items.
+  Extensions can call the following API to register custom topbar menu items.
 
 ```js
-app.registerExtension({
-  name: 'TestExtension1',
-  commands: [
-    {
-      id: 'foo-id',
-      label: 'foo',
-      function: () => {
-        alert(1)
+  app.registerExtension({
+    name: 'TestExtension1',
+    commands: [
+      {
+        id: 'foo-id',
+        label: 'foo',
+        function: () => {
+          alert(1)
+        }
       }
-    }
-  ],
-  menuCommands: [
-    {
-      path: ['ext', 'ext2'],
-      commands: ['foo-id']
-    }
-  ]
-})
+    ],
+    menuCommands: [
+      {
+        path: ['ext', 'ext2'],
+        commands: ['foo-id']
+      }
+    ]
+  })
 ```
 
 ![image](https://github.com/user-attachments/assets/ae7b082f-7ce9-4549-a446-4563567102fe)
-
 </details>
 
 <details id='extension-api-toast'>
   <summary>v1.2.27: Extension API to add toast message</summary>i
 
-Extensions can call the following API to add toast messages.
+  Extensions can call the following API to add toast messages.
 
 ```js
-app.extensionManager.toast.add({
-  severity: 'info',
-  summary: 'Loaded!',
-  detail: 'Extension loaded!',
-  life: 3000
-})
+  app.extensionManager.toast.add({
+    severity: 'info',
+    summary: 'Loaded!',
+    detail: 'Extension loaded!',
+    life: 3000
+  })
 ```
-
 Documentation of all supported options can be found here: <https://primevue.org/toast/#api.toast.interfaces.ToastMessageOptions>
 
 ![image](https://github.com/user-attachments/assets/de02cd7e-cd81-43d1-a0b0-bccef92ff487)
-
 </details>
 
 <details id='extension-api-sidebar-tab'>
   <summary>v1.2.4: Extension API to register custom sidebar tab</summary>
 
-Extensions now can call the following API to register a sidebar tab.
+  Extensions now can call the following API to register a sidebar tab.
 
 ```js
-app.extensionManager.registerSidebarTab({
-  id: 'search',
-  icon: 'pi pi-search',
-  title: 'search',
-  tooltip: 'search',
-  type: 'custom',
-  render: (el) => {
-    el.innerHTML = '<div>Custom search tab</div>'
-  }
-})
+  app.extensionManager.registerSidebarTab({
+    id: "search",
+    icon: "pi pi-search",
+    title: "search",
+    tooltip: "search",
+    type: "custom",
+    render: (el) => {
+      el.innerHTML = "<div>Custom search tab</div>";
+    },
+  });
 ```
 
 The list of supported icons can be found here: <https://primevue.org/icons/#list>
@@ -501,7 +479,6 @@ The list of supported icons can be found here: <https://primevue.org/icons/#list
 We will support custom icons later.
 
 ![image](https://github.com/user-attachments/assets/7bff028a-bf91-4cab-bf97-55c243b3f5e0)
-
 </details>
 
 <details id='extension-api-selection-toolbox'>
@@ -562,4 +539,4 @@ For comprehensive troubleshooting and technical support, please refer to our off
 
 - **[General Troubleshooting Guide](https://docs.comfy.org/troubleshooting/overview)** - Common issues, performance optimization, and reporting bugs
 - **[Custom Node Issues](https://docs.comfy.org/troubleshooting/custom-node-issues)** - Debugging custom node problems and conflicts
-- **[Desktop Installation Guide](https://docs.comfy.org/installation/desktop/windows)** - Desktop-specific installation and troubleshooting
+- **[Desktop Installation Guide](https://docs.comfy.org/installation/desktop/windows)** - Desktop-specific installation and troubleshooting

THIRD_PARTY_NOTICES.md

@@ -1 +0,0 @@
-AMD and the AMD Arrow logo are trademarks of Advanced Micro Devices, Inc.

apps/desktop-ui/index.html

@@ -1,12 +1,9 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <title>ComfyUI</title>
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1.0, user-scalable=no"
-    />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
   </head>
   <body>
     <div id="desktop-app"></div>

apps/desktop-ui/package.json

@@ -1,37 +1,7 @@
 {
   "name": "@comfyorg/desktop-ui",
-  "version": "0.0.6",
+  "version": "0.0.3",
   "type": "module",
-  "scripts": {
-    "lint": "nx run @comfyorg/desktop-ui:lint",
-    "typecheck": "nx run @comfyorg/desktop-ui:typecheck",
-    "storybook": "storybook dev -p 6007",
-    "build-storybook": "storybook build -o dist/storybook"
-  },
-  "dependencies": {
-    "@comfyorg/comfyui-electron-types": "catalog:",
-    "@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:"
-  },
   "nx": {
     "tags": [
       "scope:desktop",
@@ -61,7 +31,8 @@
           "^build"
         ],
         "options": {
-          "command": "vite build --config apps/desktop-ui/vite.config.mts"
+          "cwd": "apps/desktop-ui",
+          "command": "vite build --config vite.config.mts"
         },
         "outputs": [
           "{projectRoot}/dist"
@@ -114,5 +85,33 @@
         }
       }
     }
+  },
+  "scripts": {
+    "storybook": "storybook dev -p 6007",
+    "build-storybook": "storybook build -o dist/storybook"
+  },
+  "dependencies": {
+    "@comfyorg/comfyui-electron-types": "catalog:",
+    "@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:"
   }
 }

apps/desktop-ui/src/assets/css/style.css

@@ -4,39 +4,3 @@
   position: absolute;
   inset: 0;
 }
-
-.p-button-secondary {
-  border: none;
-  background-color: var(--color-neutral-600);
-  color: var(--color-white);
-}
-
-.p-button-secondary:hover {
-  background-color: var(--color-neutral-550);
-}
-
-.p-button-secondary:active {
-  background-color: var(--color-neutral-500);
-}
-
-.p-button-danger {
-  background-color: var(--color-coral-red-600);
-}
-
-.p-button-danger:hover {
-  background-color: var(--color-coral-red-500);
-}
-
-.p-button-danger:active {
-  background-color: var(--color-coral-red-400);
-}
-
-.task-div .p-card {
-  transition: opacity var(--default-transition-duration);
-  --p-card-background: var(--p-button-secondary-background);
-  opacity: 0.9;
-}
-
-.task-div .p-card:hover {
-  opacity: 1;
-}

apps/desktop-ui/src/components/bottomPanel/tabs/terminal/BaseTerminal.vue

@@ -101,15 +101,13 @@ onUnmounted(() => {
 </script>
 
 <style scoped>
-/* xterm renders its internal DOM outside Vue templates, so :deep selectors are
- * required to style those generated nodes.
- */
+@reference '../../../../assets/css/style.css';
+
 :deep(.p-terminal) .xterm {
-  overflow: hidden;
+  @apply overflow-hidden;
 }
 
 :deep(.p-terminal) .xterm-screen {
-  overflow: hidden;
-  background-color: var(--color-neutral-900);
+  @apply bg-neutral-900 overflow-hidden;
 }
 </style>

apps/desktop-ui/src/components/common/LanguageSelector.vue

@@ -7,7 +7,7 @@
     option-value="value"
     :disabled="isSwitching"
     :pt="dropdownPt"
-    :size="size"
+    :size="props.size"
     class="language-selector"
     @change="onLocaleChange"
   >
@@ -36,10 +36,16 @@ import { i18n, loadLocale, st } from '@/i18n'
 type VariantKey = 'dark' | 'light'
 type SizeKey = 'small' | 'large'
 
-const { variant = 'dark', size = 'small' } = defineProps<{
-  variant?: VariantKey
-  size?: SizeKey
-}>()
+const props = withDefaults(
+  defineProps<{
+    variant?: VariantKey
+    size?: SizeKey
+  }>(),
+  {
+    variant: 'dark',
+    size: 'small'
+  }
+)
 
 const dropdownId = `language-select-${Math.random().toString(36).slice(2)}`
 
@@ -53,8 +59,7 @@ const LOCALES = [
   ['fr', 'Français'],
   ['es', 'Español'],
   ['ar', 'عربي'],
-  ['tr', 'Türkçe'],
-  ['pt-BR', 'Português (BR)']
+  ['tr', 'Türkçe']
 ] as const satisfies ReadonlyArray<[string, string]>
 
 type SupportedLocale = (typeof LOCALES)[number][0]
@@ -98,8 +103,10 @@ const VARIANT_PRESETS = {
 const selectedLocale = ref<string>(i18n.global.locale.value)
 const isSwitching = ref(false)
 
-const sizePreset = computed(() => SIZE_PRESETS[size])
-const variantPreset = computed(() => VARIANT_PRESETS[variant])
+const sizePreset = computed(() => SIZE_PRESETS[props.size as SizeKey])
+const variantPreset = computed(
+  () => VARIANT_PRESETS[props.variant as VariantKey]
+)
 
 const dropdownPt = computed(() => ({
   root: {
@@ -187,17 +194,13 @@ async function onLocaleChange(event: SelectChangeEvent) {
 </script>
 
 <style scoped>
+@reference '../../assets/css/style.css';
+
 :deep(.p-dropdown-panel .p-dropdown-item) {
-  transition-property: color, background-color, border-color;
-  transition-duration: var(--default-transition-duration);
+  @apply transition-colors;
 }
 
 :deep(.p-dropdown) {
-  &:focus-visible {
-    outline: none;
-    box-shadow:
-      0 0 0 2px var(--color-neutral-900),
-      0 0 0 4px color-mix(in srgb, var(--color-brand-yellow) 60%, transparent);
-  }
+  @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-yellow/60 focus-visible:ring-offset-2;
 }
 </style>

apps/desktop-ui/src/components/install/GpuPicker.stories.ts

@@ -1,84 +0,0 @@
-// eslint-disable-next-line storybook/no-renderer-packages
-import type { Meta, StoryObj } from '@storybook/vue3'
-import type {
-  ElectronAPI,
-  TorchDeviceType
-} from '@comfyorg/comfyui-electron-types'
-import { ref } from 'vue'
-
-import GpuPicker from './GpuPicker.vue'
-
-type Platform = ReturnType<ElectronAPI['getPlatform']>
-type ElectronAPIStub = Pick<ElectronAPI, 'getPlatform'>
-type WindowWithElectron = Window & { electronAPI?: ElectronAPIStub }
-
-const meta: Meta<typeof GpuPicker> = {
-  title: 'Desktop/Components/GpuPicker',
-  component: GpuPicker,
-  parameters: {
-    layout: 'padded',
-    backgrounds: {
-      default: 'dark',
-      values: [
-        { name: 'dark', value: '#0a0a0a' },
-        { name: 'neutral-900', value: '#171717' },
-        { name: 'neutral-950', value: '#0a0a0a' }
-      ]
-    }
-  }
-}
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-function createElectronDecorator(platform: Platform) {
-  function getPlatform() {
-    return platform
-  }
-
-  return function ElectronDecorator() {
-    const windowWithElectron = window as WindowWithElectron
-    windowWithElectron.electronAPI = { getPlatform }
-    return { template: '<story />' }
-  }
-}
-
-function renderWithDevice(device: TorchDeviceType | null) {
-  return function Render() {
-    return {
-      components: { GpuPicker },
-      setup() {
-        const selected = ref<TorchDeviceType | null>(device)
-        return { selected }
-      },
-      template: `
-        <div class="min-h-screen bg-neutral-950 p-8">
-          <GpuPicker v-model:device="selected" />
-        </div>
-      `
-    }
-  }
-}
-
-const windowsDecorator = createElectronDecorator('win32')
-const macDecorator = createElectronDecorator('darwin')
-
-export const WindowsNvidiaSelected: Story = {
-  decorators: [windowsDecorator],
-  render: renderWithDevice('nvidia')
-}
-
-export const WindowsAmdSelected: Story = {
-  decorators: [windowsDecorator],
-  render: renderWithDevice('amd')
-}
-
-export const WindowsCpuSelected: Story = {
-  decorators: [windowsDecorator],
-  render: renderWithDevice('cpu')
-}
-
-export const MacMpsSelected: Story = {
-  decorators: [macDecorator],
-  render: renderWithDevice('mps')
-}

apps/desktop-ui/src/components/install/GpuPicker.vue

@@ -11,32 +11,29 @@
       <!-- Apple Metal / NVIDIA -->
       <HardwareOption
         v-if="platform === 'darwin'"
-        image-path="./assets/images/apple-mps-logo.png"
+        :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')"
       />
-      <template v-else>
-        <HardwareOption
-          image-path="./assets/images/nvidia-logo-square.jpg"
-          placeholder-text="NVIDIA"
-          :subtitle="$t('install.gpuPicker.nvidiaSubtitle')"
-          :selected="selected === 'nvidia'"
-          @click="pickGpu('nvidia')"
-        />
-        <HardwareOption
-          image-path="./assets/images/amd-rocm-logo.png"
-          placeholder-text="AMD"
-          :subtitle="$t('install.gpuPicker.amdSubtitle')"
-          :selected="selected === 'amd'"
-          @click="pickGpu('amd')"
-        />
-      </template>
+      <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')"
       />
@@ -44,6 +41,7 @@
       <HardwareOption
         placeholder-text="Manual Install"
         :subtitle="$t('install.gpuPicker.manualSubtitle')"
+        :value="'unsupported'"
         :selected="selected === 'unsupported'"
         @click="pickGpu('unsupported')"
       />
@@ -83,15 +81,13 @@ const selected = defineModel<TorchDeviceType | null>('device', {
 const electron = electronAPI()
 const platform = electron.getPlatform()
 
-const recommendedDevices: TorchDeviceType[] = ['mps', 'nvidia', 'amd']
-const showRecommendedBadge = computed(() =>
-  selected.value ? recommendedDevices.includes(selected.value) : false
+const showRecommendedBadge = computed(
+  () => selected.value === 'mps' || selected.value === 'nvidia'
 )
 
 const descriptionKeys = {
   mps: 'appleMetal',
   nvidia: 'nvidia',
-  amd: 'amd',
   cpu: 'cpu',
   unsupported: 'manual'
 } as const
@@ -101,7 +97,7 @@ const descriptionText = computed(() => {
   return st(`install.gpuPicker.${key}Description`, '')
 })
 
-function pickGpu(value: TorchDeviceType) {
+const pickGpu = (value: TorchDeviceType) => {
   selected.value = value
 }
 </script>

apps/desktop-ui/src/components/install/HardwareOption.stories.ts

@@ -29,6 +29,7 @@ export const AppleMetalSelected: Story = {
     imagePath: '/assets/images/apple-mps-logo.png',
     placeholderText: 'Apple Metal',
     subtitle: 'Apple Metal',
+    value: 'mps',
     selected: true
   }
 }
@@ -38,6 +39,7 @@ export const AppleMetalUnselected: Story = {
     imagePath: '/assets/images/apple-mps-logo.png',
     placeholderText: 'Apple Metal',
     subtitle: 'Apple Metal',
+    value: 'mps',
     selected: false
   }
 }
@@ -46,6 +48,7 @@ export const CPUOption: Story = {
   args: {
     placeholderText: 'CPU',
     subtitle: 'Subtitle',
+    value: 'cpu',
     selected: false
   }
 }
@@ -54,6 +57,7 @@ export const ManualInstall: Story = {
   args: {
     placeholderText: 'Manual Install',
     subtitle: 'Subtitle',
+    value: 'unsupported',
     selected: false
   }
 }
@@ -63,6 +67,7 @@ export const NvidiaSelected: Story = {
     imagePath: '/assets/images/nvidia-logo-square.jpg',
     placeholderText: 'NVIDIA',
     subtitle: 'NVIDIA',
+    value: 'nvidia',
     selected: true
   }
 }

apps/desktop-ui/src/components/install/HardwareOption.vue

@@ -36,13 +36,17 @@
 </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>()

apps/desktop-ui/src/components/install/InstallFooter.vue

@@ -40,8 +40,7 @@
 <script setup lang="ts">
 import type { PassThrough } from '@primevue/core'
 import Button from 'primevue/button'
-import Step from 'primevue/step'
-import type { StepPassThroughOptions } from 'primevue/step'
+import Step, { type StepPassThroughOptions } from 'primevue/step'
 import StepList from 'primevue/steplist'
 
 defineProps<{
@@ -51,6 +50,8 @@ defineProps<{
   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
 }>()

apps/desktop-ui/src/components/install/InstallLocationPicker.vue

@@ -104,8 +104,8 @@
 </template>
 
 <script setup lang="ts">
-import { TorchMirrorUrl } from '@comfyorg/comfyui-electron-types'
 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'
@@ -155,7 +155,7 @@ const activeAccordionIndex = ref<string[] | undefined>(undefined)
 const electron = electronAPI()
 
 // Mirror configuration logic
-function getTorchMirrorItem(device: TorchDeviceType): UVMirror {
+const getTorchMirrorItem = (device: TorchDeviceType): UVMirror => {
   const settingId = 'Comfy-Desktop.UV.TorchInstallMirror'
   switch (device) {
     case 'mps':
@@ -170,7 +170,6 @@ function getTorchMirrorItem(device: TorchDeviceType): UVMirror {
         mirror: TorchMirrorUrl.Cuda,
         fallbackMirror: TorchMirrorUrl.Cuda
       }
-    case 'amd':
     case 'cpu':
     default:
       return {
@@ -269,43 +268,26 @@ const onFocus = async () => {
 </script>
 
 <style scoped>
+@reference '../../assets/css/style.css';
+
 :deep(.location-picker-accordion) {
-  padding-inline: calc(var(--spacing) * 12);
+  @apply px-12;
 
   .p-accordionpanel {
-    border: 0;
-    background-color: transparent;
+    @apply border-0 bg-transparent;
   }
 
   .p-accordionheader {
-    margin-top: calc(var(--spacing) * 2);
-    border: 0;
-    border-radius: var(--radius-xl);
-    background-color: color-mix(
-      in srgb,
-      var(--color-neutral-800) 50%,
-      transparent
-    );
+    @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;
-
-    &:hover {
-      background-color: color-mix(
-        in srgb,
-        var(--color-neutral-700) 50%,
-        transparent
-      );
-    }
   }
 
   /* When panel is expanded, adjust header border radius */
   .p-accordionpanel-active {
     .p-accordionheader {
-      border-top-left-radius: var(--radius-xl);
-      border-top-right-radius: var(--radius-xl);
-      border-bottom-right-radius: 0;
-      border-bottom-left-radius: 0;
+      @apply rounded-t-xl rounded-b-none;
     }
 
     .p-accordionheader-toggle-icon {
@@ -316,24 +298,11 @@ const onFocus = async () => {
   }
 
   .p-accordioncontent {
-    border: 0;
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-    border-bottom-right-radius: var(--radius-xl);
-    border-bottom-left-radius: var(--radius-xl);
-    background-color: color-mix(
-      in srgb,
-      var(--color-neutral-800) 50%,
-      transparent
-    );
+    @apply bg-neutral-800/50 border-0 rounded-b-xl rounded-t-none;
   }
 
   .p-accordioncontent-content {
-    background-color: transparent;
-    padding-top: calc(var(--spacing) * 3);
-    padding-right: calc(var(--spacing) * 5);
-    padding-bottom: calc(var(--spacing) * 5);
-    padding-left: calc(var(--spacing) * 5);
+    @apply bg-transparent pt-3 pr-5 pb-5 pl-5;
   }
 
   /* Override default chevron icons to use up/down */

apps/desktop-ui/src/components/maintenance/TaskCard.vue

@@ -1,20 +1,11 @@
 <template>
   <div
-    :class="
-      cn(
-        'task-div group/task-card relative grid min-h-52 max-w-48',
-        isLoading && 'opacity-75'
-      )
-    "
+    class="task-div relative grid min-h-52 max-w-48"
+    :class="{ 'opacity-75': isLoading }"
   >
     <Card
-      :class="
-        cn(
-          'relative h-full max-w-48 overflow-hidden',
-          runner.state !== 'error' && 'opacity-65'
-        )
-      "
-      :pt="cardPt"
+      class="relative h-full max-w-48 overflow-hidden"
+      :class="{ 'opacity-65': runner.state !== 'error' }"
       v-bind="(({ onClick, ...rest }) => rest)($attrs)"
     >
       <template #header>
@@ -52,7 +43,7 @@
 
     <i
       v-if="!isLoading && runner.state === 'OK'"
-      class="pi pi-check pointer-events-none absolute -right-4 -bottom-4 col-span-full row-span-full z-10 text-[4rem] text-green-500 opacity-100 transition-opacity group-hover/task-card:opacity-20 [text-shadow:0.25rem_0_0.5rem_black]"
+      class="task-card-ok pi pi-check"
     />
   </div>
 </template>
@@ -64,7 +55,6 @@ import { computed } from 'vue'
 
 import { useMaintenanceTaskStore } from '@/stores/maintenanceTaskStore'
 import type { MaintenanceTask } from '@/types/desktop/maintenanceTypes'
-import { cn } from '@/utils/tailwindUtil'
 import { useMinLoadingDurationRef } from '@/utils/refUtil'
 
 const taskStore = useMaintenanceTaskStore()
@@ -93,9 +83,51 @@ const reactiveExecuting = computed(() => !!runner.value.executing)
 
 const isLoading = useMinLoadingDurationRef(reactiveLoading, 250)
 const isExecuting = useMinLoadingDurationRef(reactiveExecuting, 250)
-
-const cardPt = {
-  header: { class: 'z-0' },
-  body: { class: 'z-[1] grow justify-between' }
-}
 </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;
+
+  font-size: 4rem;
+  text-shadow: 0.25rem 0 0.5rem black;
+  z-index: 10;
+}
+
+.p-card {
+  @apply transition-opacity;
+
+  --p-card-background: var(--p-button-secondary-background);
+  opacity: 0.9;
+
+  &.opacity-65 {
+    opacity: 0.4;
+  }
+
+  &:hover {
+    opacity: 1;
+  }
+}
+
+:deep(.p-card-header) {
+  z-index: 0;
+}
+
+:deep(.p-card-body) {
+  z-index: 1;
+  flex-grow: 1;
+  justify-content: space-between;
+}
+
+.task-div {
+  > i {
+    pointer-events: none;
+  }
+
+  &:hover > i {
+    opacity: 0.2;
+  }
+}
+</style>

apps/desktop-ui/src/components/maintenance/TaskListPanel.vue

@@ -63,6 +63,7 @@ const taskStore = useMaintenanceTaskStore()
 defineProps<{
   displayAsList: string
   filter: MaintenanceFilter
+  isRefreshing: boolean
 }>()
 
 const executeTask = async (task: MaintenanceTask) => {

apps/desktop-ui/src/i18n.ts

@@ -1,13 +1,13 @@
 // Import only English locale eagerly as the default/fallback
 // ESLint cannot statically resolve dynamic imports with path aliases (@frontend-locales/*),
 // but these are properly configured in tsconfig.json and resolved by Vite at build time.
-
+// eslint-disable-next-line import-x/no-unresolved
 import enCommands from '@frontend-locales/en/commands.json' with { type: 'json' }
-
+// eslint-disable-next-line import-x/no-unresolved
 import en from '@frontend-locales/en/main.json' with { type: 'json' }
-
+// eslint-disable-next-line import-x/no-unresolved
 import enNodes from '@frontend-locales/en/nodeDefs.json' with { type: 'json' }
-
+// eslint-disable-next-line import-x/no-unresolved
 import enSettings from '@frontend-locales/en/settings.json' with { type: 'json' }
 import { createI18n } from 'vue-i18n'
 
@@ -27,7 +27,7 @@ function buildLocale<
 
 // Locale loader map - dynamically import locales only when needed
 // ESLint cannot statically resolve these dynamic imports, but they are valid at build time
-
+/* eslint-disable import-x/no-unresolved */
 const localeLoaders: Record<
   string,
   () => Promise<{ default: Record<string, unknown> }>
@@ -40,8 +40,7 @@ const localeLoaders: Record<
   ru: () => import('@frontend-locales/ru/main.json'),
   tr: () => import('@frontend-locales/tr/main.json'),
   zh: () => import('@frontend-locales/zh/main.json'),
-  'zh-TW': () => import('@frontend-locales/zh-TW/main.json'),
-  'pt-BR': () => import('@frontend-locales/pt-BR/main.json')
+  'zh-TW': () => import('@frontend-locales/zh-TW/main.json')
 }
 
 const nodeDefsLoaders: Record<
@@ -56,8 +55,7 @@ const nodeDefsLoaders: Record<
   ru: () => import('@frontend-locales/ru/nodeDefs.json'),
   tr: () => import('@frontend-locales/tr/nodeDefs.json'),
   zh: () => import('@frontend-locales/zh/nodeDefs.json'),
-  'zh-TW': () => import('@frontend-locales/zh-TW/nodeDefs.json'),
-  'pt-BR': () => import('@frontend-locales/pt-BR/nodeDefs.json')
+  'zh-TW': () => import('@frontend-locales/zh-TW/nodeDefs.json')
 }
 
 const commandsLoaders: Record<
@@ -72,8 +70,7 @@ const commandsLoaders: Record<
   ru: () => import('@frontend-locales/ru/commands.json'),
   tr: () => import('@frontend-locales/tr/commands.json'),
   zh: () => import('@frontend-locales/zh/commands.json'),
-  'zh-TW': () => import('@frontend-locales/zh-TW/commands.json'),
-  'pt-BR': () => import('@frontend-locales/pt-BR/commands.json')
+  'zh-TW': () => import('@frontend-locales/zh-TW/commands.json')
 }
 
 const settingsLoaders: Record<
@@ -88,8 +85,7 @@ const settingsLoaders: Record<
   ru: () => import('@frontend-locales/ru/settings.json'),
   tr: () => import('@frontend-locales/tr/settings.json'),
   zh: () => import('@frontend-locales/zh/settings.json'),
-  'zh-TW': () => import('@frontend-locales/zh-TW/settings.json'),
-  'pt-BR': () => import('@frontend-locales/pt-BR/settings.json')
+  'zh-TW': () => import('@frontend-locales/zh-TW/settings.json')
 }
 
 // Track which locales have been loaded
@@ -155,14 +151,12 @@ export async function loadLocale(locale: string): Promise<void> {
 }
 
 // Only include English in the initial bundle
-const enMessages = buildLocale(en, enNodes, enCommands, enSettings)
+const messages = {
+  en: buildLocale(en, enNodes, enCommands, enSettings)
+}
 
 // Type for locale messages - inferred from the English locale structure
-type LocaleMessages = typeof enMessages
-
-const messages: Record<string, LocaleMessages> = {
-  en: enMessages
-}
+type LocaleMessages = typeof messages.en
 
 export const i18n = createI18n({
   // Must set `false`, as Vue I18n Legacy API is for Vue 2

apps/desktop-ui/src/utils/refUtil.ts

@@ -1,6 +1,5 @@
 import { useTimeout } from '@vueuse/core'
-import { computed, ref, watch } from 'vue'
-import type { Ref } from 'vue'
+import { type Ref, computed, ref, watch } from 'vue'
 
 /**
  * Vue boolean ref (writable computed) with one difference: when set to `true` it stays that way for at least {@link minDuration}.

apps/desktop-ui/src/views/DesktopDialogView.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="w-full h-full flex flex-col rounded-lg p-6 justify-between">
     <h1 class="font-inter font-semibold text-xl m-0 italic">
-      {{ $t(`desktopDialogs.${id}.title`, title) }}
+      {{ t(`desktopDialogs.${id}.title`, title) }}
     </h1>
     <p class="whitespace-pre-wrap">
-      {{ $t(`desktopDialogs.${id}.message`, message) }}
+      {{ t(`desktopDialogs.${id}.message`, message) }}
     </p>
     <div class="flex w-full gap-2">
       <Button
@@ -12,7 +12,7 @@
         :key="button.label"
         class="rounded-lg first:mr-auto"
         :label="
-          $t(
+          t(
             `desktopDialogs.${id}.buttons.${normalizeI18nKey(button.label)}`,
             button.label
           )
@@ -29,8 +29,8 @@ import { normalizeI18nKey } from '@comfyorg/shared-frontend-utils/formatUtil'
 import Button from 'primevue/button'
 import { useRoute } from 'vue-router'
 
-import { getDialog } from '@/constants/desktopDialogs'
-import type { DialogAction } from '@/constants/desktopDialogs'
+import { type DialogAction, getDialog } from '@/constants/desktopDialogs'
+import { t } from '@/i18n'
 import { electronAPI } from '@/utils/envUtil'
 
 const route = useRoute()
@@ -40,3 +40,31 @@ const handleButtonClick = async (button: DialogAction) => {
   await electronAPI().Dialog.clickButton(button.returnValue)
 }
 </script>
+
+<style scoped>
+@reference '../assets/css/style.css';
+
+.p-button-secondary {
+  @apply text-white border-none bg-neutral-600;
+}
+
+.p-button-secondary:hover {
+  @apply bg-neutral-550;
+}
+
+.p-button-secondary:active {
+  @apply bg-neutral-500;
+}
+
+.p-button-danger {
+  @apply bg-coral-red-600;
+}
+
+.p-button-danger:hover {
+  @apply bg-coral-red-500;
+}
+
+.p-button-danger:active {
+  @apply bg-coral-red-400;
+}
+</style>

apps/desktop-ui/src/views/DesktopUpdateView.vue

@@ -6,11 +6,11 @@
       <div class="relative m-8 text-center">
         <!-- Header -->
         <h1 class="download-bg pi-download text-4xl font-bold">
-          {{ $t('desktopUpdate.title') }}
+          {{ t('desktopUpdate.title') }}
         </h1>
 
         <div class="m-8">
-          <span>{{ $t('desktopUpdate.description') }}</span>
+          <span>{{ t('desktopUpdate.description') }}</span>
         </div>
 
         <ProgressSpinner class="m-8 w-48 h-48" />
@@ -19,7 +19,7 @@
         <Button
           style="transform: translateX(-50%)"
           class="fixed bottom-0 left-1/2 my-8"
-          :label="$t('maintenance.consoleLogs')"
+          :label="t('maintenance.consoleLogs')"
           icon="pi pi-desktop"
           icon-pos="left"
           severity="secondary"
@@ -28,8 +28,8 @@
 
         <TerminalOutputDrawer
           v-model="terminalVisible"
-          :header="$t('g.terminal')"
-          :default-message="$t('desktopUpdate.terminalDefaultMessage')"
+          :header="t('g.terminal')"
+          :default-message="t('desktopUpdate.terminalDefaultMessage')"
         />
       </div>
     </div>
@@ -44,6 +44,7 @@ import Toast from 'primevue/toast'
 import { onUnmounted, ref } from 'vue'
 
 import TerminalOutputDrawer from '@/components/maintenance/TerminalOutputDrawer.vue'
+import { t } from '@/i18n'
 import { electronAPI } from '@/utils/envUtil'
 
 import BaseViewTemplate from './templates/BaseViewTemplate.vue'
@@ -60,10 +61,10 @@ onUnmounted(() => electron.Validation.dispose())
 </script>
 
 <style scoped>
+@reference '../assets/css/style.css';
+
 .download-bg::before {
-  position: absolute;
-  margin: 0;
-  color: var(--muted-foreground);
+  @apply m-0 absolute text-muted;
   font-family: 'primeicons', sans-serif;
   top: -2rem;
   right: 2rem;