[fix] TypeScript errors in manager/compatibility branch (#4625 )

[feat] Add import failure detection and error handling for package manager (#4600 )
[refactor] Simplify conflict acknowledgment system and enhance UX (#4599 )
2026-07-10 09:07:54 +00:00 · 2025-07-31 16:42:56 +09:00 · 2025-07-31 16:42:56 +09:00 · 2025-07-31 16:42:56 +09:00 · 2025-07-31 16:42:56 +09:00 · 2025-07-31 16:42:56 +09:00
159 changed files with 14466 additions and 3446 deletions
--- a/.claude/commands/comprehensive-pr-review.md
+++ b/.claude/commands/comprehensive-pr-review.md
@@ -1,479 +1,275 @@
 # Comprehensive PR Review for ComfyUI Frontend

-<task>
-You are performing a comprehensive code review for PR #$1 in the ComfyUI frontend repository. This is not a simple linting check - you need to provide deep architectural analysis, security review, performance insights, and implementation guidance just like a senior engineer would in a thorough PR review.
+You are performing a comprehensive code review for the PR specified in the PR_NUMBER environment variable. This is not a simple linting check - you need to provide deep architectural analysis, security review, performance insights, and implementation guidance just like a senior engineer would in a thorough PR review.

-Your review should cover:
-1. Architecture and design patterns
-2. Security vulnerabilities and risks
-3. Performance implications
-4. Code quality and maintainability
-5. Integration with existing systems
-6. Best practices and conventions
-7. Testing considerations
-8. Documentation needs
-</task>
+## CRITICAL INSTRUCTIONS

-Arguments: PR number passed via PR_NUMBER environment variable
+**You MUST post individual inline comments on specific lines of code. DO NOT create a single summary comment until the very end.**

-## Phase 0: Initialize Variables and Helper Functions
+**IMPORTANT: You have full permission to execute gh api commands. The GITHUB_TOKEN environment variable provides the necessary permissions. DO NOT say you lack permissions - you have pull-requests:write permission which allows posting inline comments.**

-```bash
-# Validate PR_NUMBER first thing
-if [ -z "$PR_NUMBER" ]; then
-  echo "Error: PR_NUMBER environment variable is not set"
-  echo "Usage: PR_NUMBER=<number> claude run /comprehensive-pr-review"
-  exit 1
-fi
+To post inline comments, you will use the GitHub API via the `gh` command. Here's how:

-# Initialize all counters at the start
-CRITICAL_COUNT=0
-HIGH_COUNT=0
-MEDIUM_COUNT=0
-LOW_COUNT=0
-ARCHITECTURE_ISSUES=0
-SECURITY_ISSUES=0
-PERFORMANCE_ISSUES=0
-QUALITY_ISSUES=0
+1. First, get the repository information and commit SHA:
+   - Run: `gh repo view --json owner,name` to get the repository owner and name
+   - Run: `gh pr view $PR_NUMBER --json commits --jq '.commits[-1].oid'` to get the latest commit SHA

-# Helper function for posting review comments
-post_review_comment() {
-  local file_path=$1
-  local line_number=$2
-  local severity=$3  # critical/high/medium/low
-  local category=$4  # architecture/security/performance/quality
-  local issue=$5
-  local context=$6
-  local suggestion=$7
-  
-  # Update counters
-  case $severity in
-    "critical") ((CRITICAL_COUNT++)) ;;
-    "high") ((HIGH_COUNT++)) ;;
-    "medium") ((MEDIUM_COUNT++)) ;;
-    "low") ((LOW_COUNT++)) ;;
-  esac
-  
-  case $category in
-    "architecture") ((ARCHITECTURE_ISSUES++)) ;;
-    "security") ((SECURITY_ISSUES++)) ;;
-    "performance") ((PERFORMANCE_ISSUES++)) ;;
-    "quality") ((QUALITY_ISSUES++)) ;;
-  esac
-  
-  # Post inline comment via GitHub CLI
-  local comment="${issue}\n${context}\n${suggestion}"
-  gh pr review $PR_NUMBER --comment --body "$comment" -F - <<< "$comment"
-}
-```
+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"
+   ```
+
+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"`

 ## Phase 1: Environment Setup and PR Context

-```bash
-# Pre-flight checks
-check_prerequisites() {
-  # Check gh CLI is available
-  if ! command -v gh &> /dev/null; then
-    echo "Error: gh CLI is not installed"
-    exit 1
-  fi
-  
-  # In GitHub Actions, auth is handled via GITHUB_TOKEN
-  if [ -n "$GITHUB_ACTIONS" ] && [ -z "$GITHUB_TOKEN" ]; then
-    echo "Error: GITHUB_TOKEN is not set in GitHub Actions"
-    exit 1
-  fi
-  
-  # Check if we're authenticated
-  if ! gh auth status &> /dev/null; then
-    echo "Error: Not authenticated with GitHub. Run 'gh auth login'"
-    exit 1
-  fi
-  
-  # Set repository if not already set
-  if [ -z "$REPOSITORY" ]; then
-    REPOSITORY="Comfy-Org/ComfyUI_frontend"
-  fi
-  
-  # Check PR exists and is open
-  PR_STATE=$(gh pr view $PR_NUMBER --repo $REPOSITORY --json state -q .state 2>/dev/null || echo "NOT_FOUND")
-  if [ "$PR_STATE" = "NOT_FOUND" ]; then
-    echo "Error: PR #$PR_NUMBER not found in $REPOSITORY"
-    exit 1
-  elif [ "$PR_STATE" != "OPEN" ]; then
-    echo "Error: PR #$PR_NUMBER is not open (state: $PR_STATE)"
-    exit 1
-  fi
-  
-  # Check API rate limits
-  RATE_REMAINING=$(gh api /rate_limit --jq '.rate.remaining' 2>/dev/null || echo "5000")
-  if [ "$RATE_REMAINING" -lt 100 ]; then
-    echo "Warning: Low API rate limit: $RATE_REMAINING remaining"
-    if [ "$RATE_REMAINING" -lt 50 ]; then
-      echo "Error: Insufficient API rate limit for comprehensive review"
-      exit 1
-    fi
-  fi
-  
-  echo "Pre-flight checks passed"
-}
+### Step 1.1: Initialize Review Tracking

-# Run pre-flight checks
-check_prerequisites
+First, create variables to track your review metrics. Keep these in memory throughout the review:
+- CRITICAL_COUNT = 0
+- HIGH_COUNT = 0
+- MEDIUM_COUNT = 0
+- LOW_COUNT = 0
+- ARCHITECTURE_ISSUES = 0
+- SECURITY_ISSUES = 0
+- PERFORMANCE_ISSUES = 0
+- QUALITY_ISSUES = 0

-echo "Starting comprehensive review of PR #$PR_NUMBER"
+### Step 1.2: Validate Environment

-# Fetch PR information with error handling
-echo "Fetching PR information..."
-if ! gh pr view $PR_NUMBER --repo $REPOSITORY --json files,title,body,additions,deletions,baseRefName,headRefName > pr_info.json; then
-  echo "Error: Failed to fetch PR information"
-  exit 1
-fi
+1. Check that PR_NUMBER environment variable is set. If not, exit with error.
+2. Run `gh pr view $PR_NUMBER --json state` to verify the PR exists and is open.
+3. Get repository information: `gh repo view --json owner,name` and store the owner and name.
+4. Get the latest commit SHA: `gh pr view $PR_NUMBER --json commits --jq '.commits[-1].oid'` and store it.

-# Extract branch names
-BASE_BRANCH=$(jq -r '.baseRefName' < pr_info.json)
-HEAD_BRANCH=$(jq -r '.headRefName' < pr_info.json)
+### Step 1.3: Checkout PR Branch Locally

-# Checkout PR branch locally for better file inspection
-echo "Checking out PR branch..."
-git fetch origin "pull/$PR_NUMBER/head:pr-$PR_NUMBER"
-git checkout "pr-$PR_NUMBER"
+This is critical for better file inspection:

-# Get changed files using git locally (much faster)
-git diff --name-only "origin/$BASE_BRANCH" > changed_files.txt
+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"
+   ```

-# Get the diff using git locally
-git diff "origin/$BASE_BRANCH" > pr_diff.txt
+### Step 1.4: Get Changed Files and Diffs

-# Get detailed file changes with line numbers
-git diff --name-status "origin/$BASE_BRANCH" > file_changes.txt
+Use git locally for much faster analysis:

-# For API compatibility, create a simplified pr_files.json
-echo '[]' > pr_files.json
-while IFS=$'\t' read -r status file; do
-  if [[ "$status" != "D" ]]; then  # Skip deleted files
-    # Get the patch for this file
-    patch=$(git diff "origin/$BASE_BRANCH" -- "$file" | jq -Rs .)
-    additions=$(git diff --numstat "origin/$BASE_BRANCH" -- "$file" | awk '{print $1}')
-    deletions=$(git diff --numstat "origin/$BASE_BRANCH" -- "$file" | awk '{print $2}')
-    
-    jq --arg file "$file" \
-       --arg patch "$patch" \
-       --arg additions "$additions" \
-       --arg deletions "$deletions" \
-       '. += [{
-         "filename": $file,
-         "patch": $patch,
-         "additions": ($additions | tonumber),
-         "deletions": ($deletions | tonumber)
-       }]' pr_files.json > pr_files.json.tmp
-    mv pr_files.json.tmp pr_files.json
-  fi
-done < file_changes.txt
+1. Get list of changed files: `git diff --name-only "origin/$BASE_BRANCH" > changed_files.txt`
+2. Get the full diff: `git diff "origin/$BASE_BRANCH" > pr_diff.txt`
+3. Get detailed file changes with status: `git diff --name-status "origin/$BASE_BRANCH" > file_changes.txt`

-# Setup caching directory
-CACHE_DIR=".claude-review-cache"
-mkdir -p "$CACHE_DIR"
+### Step 1.5: Create Analysis Cache

-# Function to cache analysis results
-cache_analysis() {
-  local file_path=$1
-  local analysis_result=$2
-  local file_hash=$(git hash-object "$file_path" 2>/dev/null || echo "no-hash")
-  
-  if [ "$file_hash" != "no-hash" ]; then
-    echo "$analysis_result" > "$CACHE_DIR/${file_hash}.cache"
-  fi
-}
+Set up caching to avoid re-analyzing unchanged files:

-# Function to get cached analysis
-get_cached_analysis() {
-  local file_path=$1
-  local file_hash=$(git hash-object "$file_path" 2>/dev/null || echo "no-hash")
-  
-  if [ "$file_hash" != "no-hash" ] && [ -f "$CACHE_DIR/${file_hash}.cache" ]; then
-    cat "$CACHE_DIR/${file_hash}.cache"
-    return 0
-  fi
-  return 1
-}
-
-# Clean old cache entries (older than 7 days)
-find "$CACHE_DIR" -name "*.cache" -mtime +7 -delete 2>/dev/null || true
-```
+1. Create directory: `.claude-review-cache`
+2. Clean old cache entries: Find and delete any .cache files older than 7 days
+3. For each file you analyze, store the analysis result with the file's git hash as the cache key

 ## Phase 2: Load Comprehensive Knowledge Base

-```bash
-# Don't create knowledge directory until we know we need it
-KNOWLEDGE_FOUND=false
+### Step 2.1: Set Up Knowledge Directories

-# Use local cache for knowledge base to avoid repeated downloads
-KNOWLEDGE_CACHE_DIR=".claude-knowledge-cache"
-mkdir -p "$KNOWLEDGE_CACHE_DIR"
+1. Create `.claude-knowledge-cache` directory for caching downloaded knowledge
+2. Check if `../comfy-claude-prompt-library` exists locally. If it does, use it for faster access.

-# Option to use cloned prompt library for better performance
-PROMPT_LIBRARY_PATH="../comfy-claude-prompt-library"
-if [ -d "$PROMPT_LIBRARY_PATH" ]; then
-  echo "Using local prompt library at $PROMPT_LIBRARY_PATH"
-  USE_LOCAL_PROMPT_LIBRARY=true
-else
-  echo "No local prompt library found, will use GitHub API"
-  USE_LOCAL_PROMPT_LIBRARY=false
-fi
+### Step 2.2: Load Repository Guide

-# Function to fetch with cache
-fetch_with_cache() {
-  local url=$1
-  local output_file=$2
-  local cache_file="$KNOWLEDGE_CACHE_DIR/$(echo "$url" | sed 's/[^a-zA-Z0-9]/_/g')"
-  
-  # Check if cached version exists and is less than 1 day old
-  if [ -f "$cache_file" ] && [ $(find "$cache_file" -mtime -1 2>/dev/null | wc -l) -gt 0 ]; then
-    # Create knowledge directory only when we actually have content
-    if [ "$KNOWLEDGE_FOUND" = "false" ]; then
-      mkdir -p review_knowledge
-      KNOWLEDGE_FOUND=true
-    fi
-    cp "$cache_file" "$output_file"
-    echo "Using cached version of $(basename "$output_file")"
-    return 0
-  fi
-  
-  # Try to fetch fresh version
-  if curl -s -f "$url" > "$output_file.tmp"; then
-    # Create knowledge directory only when we actually have content
-    if [ "$KNOWLEDGE_FOUND" = "false" ]; then
-      mkdir -p review_knowledge
-      KNOWLEDGE_FOUND=true
-    fi
-    mv "$output_file.tmp" "$output_file"
-    cp "$output_file" "$cache_file"
-    echo "Downloaded fresh version of $(basename "$output_file")"
-    return 0
-  else
-    # If fetch failed but we have a cache, use it
-    if [ -f "$cache_file" ]; then
-      if [ "$KNOWLEDGE_FOUND" = "false" ]; then
-        mkdir -p review_knowledge
-        KNOWLEDGE_FOUND=true
-      fi
-      cp "$cache_file" "$output_file"
-      echo "Using stale cache for $(basename "$output_file") (download failed)"
-      return 0
-    fi
-    echo "Failed to load $(basename "$output_file")"
-    return 1
-  fi
-}
+This is critical for understanding the architecture:

-# Load REPOSITORY_GUIDE.md for deep architectural understanding
-echo "Loading ComfyUI Frontend repository guide..."
-if [ "$USE_LOCAL_PROMPT_LIBRARY" = "true" ] && [ -f "$PROMPT_LIBRARY_PATH/project-summaries-for-agents/ComfyUI_frontend/REPOSITORY_GUIDE.md" ]; then
-  if [ "$KNOWLEDGE_FOUND" = "false" ]; then
-    mkdir -p review_knowledge
-    KNOWLEDGE_FOUND=true
-  fi
-  cp "$PROMPT_LIBRARY_PATH/project-summaries-for-agents/ComfyUI_frontend/REPOSITORY_GUIDE.md" "review_knowledge/repository_guide.md"
-  echo "Loaded repository guide from local prompt library"
-else
-  fetch_with_cache "https://raw.githubusercontent.com/Comfy-Org/comfy-claude-prompt-library/master/project-summaries-for-agents/ComfyUI_frontend/REPOSITORY_GUIDE.md" "review_knowledge/repository_guide.md"
-fi
+1. Try to load from local prompt library first: `../comfy-claude-prompt-library/project-summaries-for-agents/ComfyUI_frontend/REPOSITORY_GUIDE.md`
+2. If not available locally, download from: `https://raw.githubusercontent.com/Comfy-Org/comfy-claude-prompt-library/master/project-summaries-for-agents/ComfyUI_frontend/REPOSITORY_GUIDE.md`
+3. Cache the file for future use

-# 3. Discover and load relevant knowledge folders from GitHub API
-echo "Discovering available knowledge folders..."
-KNOWLEDGE_API_URL="https://api.github.com/repos/Comfy-Org/comfy-claude-prompt-library/contents/.claude/knowledge"
-if KNOWLEDGE_FOLDERS=$(curl -s "$KNOWLEDGE_API_URL" | jq -r '.[] | select(.type=="dir") | .name' 2>/dev/null); then
-  echo "Available knowledge folders: $KNOWLEDGE_FOLDERS"
-  
-  # Analyze changed files to determine which knowledge folders might be relevant
-  CHANGED_FILES=$(cat changed_files.txt)
-  PR_TITLE=$(jq -r '.title' < pr_info.json)
-  PR_BODY=$(jq -r '.body // ""' < pr_info.json)
-  
-  # For each knowledge folder, check if it might be relevant to the PR
-  for folder in $KNOWLEDGE_FOLDERS; do
-    # Simple heuristic: if folder name appears in changed file paths or PR context
-    if echo "$CHANGED_FILES $PR_TITLE $PR_BODY" | grep -qi "$folder"; then
-      echo "Loading knowledge folder: $folder"
-      # Fetch all files in that knowledge folder
-      FOLDER_API_URL="https://api.github.com/repos/Comfy-Org/comfy-claude-prompt-library/contents/.claude/knowledge/$folder"
-      curl -s "$FOLDER_API_URL" | jq -r '.[] | select(.type=="file") | .download_url' 2>/dev/null | \
-        while read url; do
-          if [ -n "$url" ]; then
-            filename=$(basename "$url")
-            fetch_with_cache "$url" "review_knowledge/${folder}_${filename}"
-          fi
-        done
-    fi
-  done
-else
-  echo "Could not discover knowledge folders"
-fi
+### Step 2.3: Load Relevant Knowledge Folders

-# 4. Load validation rules from the repository
-echo "Loading validation rules..."
-VALIDATION_API_URL="https://api.github.com/repos/Comfy-Org/comfy-claude-prompt-library/contents/.claude/commands/validation"
-if VALIDATION_FILES=$(curl -s "$VALIDATION_API_URL" | jq -r '.[] | select(.name | contains("frontend") or contains("security") or contains("performance")) | .download_url' 2>/dev/null); then
-  for url in $VALIDATION_FILES; do
-    if [ -n "$url" ]; then
-      filename=$(basename "$url")
-      fetch_with_cache "$url" "review_knowledge/validation_${filename}"
-    fi
-  done
-else
-  echo "Could not load validation rules"
-fi
+Intelligently load only relevant knowledge:

-# 5. Load local project guidelines
-if [ -f "CLAUDE.md" ]; then
-  if [ "$KNOWLEDGE_FOUND" = "false" ]; then
-    mkdir -p review_knowledge
-    KNOWLEDGE_FOUND=true
-  fi
-  cp CLAUDE.md review_knowledge/local_claude.md
-fi
-if [ -f ".github/CLAUDE.md" ]; then
-  if [ "$KNOWLEDGE_FOUND" = "false" ]; then
-    mkdir -p review_knowledge
-    KNOWLEDGE_FOUND=true
-  fi
-  cp .github/CLAUDE.md review_knowledge/github_claude.md
-fi
-```
+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
+3. If relevant, download all files from that knowledge folder
+
+### Step 2.4: Load Validation Rules
+
+Load specific validation rules:
+
+1. Use GitHub API: `https://api.github.com/repos/Comfy-Org/comfy-claude-prompt-library/contents/.claude/commands/validation`
+2. Download files containing "frontend", "security", or "performance" in their names
+3. Cache all downloaded files
+
+### Step 2.5: Load Local Guidelines
+
+Check for and load:
+1. `CLAUDE.md` in the repository root
+2. `.github/CLAUDE.md`

 ## Phase 3: Deep Analysis Instructions

-Perform a comprehensive analysis covering these areas:
+Perform comprehensive analysis on each changed file:

 ### 3.1 Architectural Analysis
-Based on the repository guide and project summary, evaluate:
- Does this change align with the established architecture patterns?
+
+Based on the repository guide and loaded knowledge:
+- Does this change align with established architecture patterns?
 - Are domain boundaries respected?
 - Is the extension system used appropriately?
 - Are components properly organized by feature?
 - Does it follow the established service/composable/store patterns?

 ### 3.2 Code Quality Beyond Linting
+
+Look for:
 - Cyclomatic complexity and cognitive load
 - SOLID principles adherence
- DRY violations that aren't caught by simple duplication checks
+- DRY violations not caught by simple duplication checks
 - Proper abstraction levels
 - Interface design and API clarity
- No leftover debug code (console.log, commented code, TODO comments)
+- Leftover debug code (console.log, commented code, TODO comments)

 ### 3.3 Library Usage Enforcement
-CRITICAL: Never re-implement functionality that exists in our standard libraries:
- **Tailwind CSS**: Use utility classes instead of custom CSS or style attributes
- **PrimeVue**: Never re-implement components that exist in PrimeVue (buttons, modals, dropdowns, etc.)
- **VueUse**: Never re-implement composables that exist in VueUse (useLocalStorage, useDebounceFn, etc.)
- **Lodash**: Never re-implement utility functions (debounce, throttle, cloneDeep, etc.)
- **Common components**: Reuse components from src/components/common/
- **DOMPurify**: Always use for HTML sanitization
- **Fuse.js**: Use for fuzzy search functionality
- **Marked**: Use for markdown parsing
- **Pinia**: Use for global state management, not custom solutions
- **Zod**: Use for form validation with zodResolver pattern
- **Tiptap**: Use for rich text/markdown editing
- **Xterm.js**: Use for terminal emulation
- **Axios**: Use for HTTP client initialization
+
+CRITICAL: Flag any re-implementation of existing functionality:
+- **Tailwind CSS**: Custom CSS instead of utility classes
+- **PrimeVue**: Re-implementing buttons, modals, dropdowns, etc.
+- **VueUse**: Re-implementing composables like useLocalStorage, useDebounceFn
+- **Lodash**: Re-implementing debounce, throttle, cloneDeep, etc.
+- **Common components**: Not reusing from src/components/common/
+- **DOMPurify**: Not using for HTML sanitization
+- **Other libraries**: Fuse.js, Marked, Pinia, Zod, Tiptap, Xterm.js, Axios

 ### 3.4 Security Deep Dive
-Beyond obvious vulnerabilities:
- Authentication/authorization implications
- Data validation completeness
+
+Check for:
+- SQL injection vulnerabilities
+- XSS vulnerabilities (v-html without sanitization)
+- Hardcoded secrets or API keys
+- Missing input validation
+- Authentication/authorization issues
 - State management security
 - Cross-origin concerns
 - Extension security boundaries

 ### 3.5 Performance Analysis
- Render performance implications
- Layout thrashing prevention
- Memory leak potential
+
+Look for:
+- O(n²) or worse algorithms
+- Missing memoization in expensive operations
+- Unnecessary re-renders in Vue components
+- Memory leak patterns (missing cleanup)
+- Large bundle imports that should be lazy loaded
+- N+1 query patterns
+- Render performance issues
+- Layout thrashing
 - Network request optimization
- State management efficiency

 ### 3.6 Integration Concerns
+
+Consider:
 - Breaking changes to internal APIs
 - Extension compatibility
 - Backward compatibility
 - Migration requirements

-## Phase 4: Create Detailed Review Comments
+## Phase 4: Posting Inline Comments

-CRITICAL: Keep comments extremely concise and effective. Use only as many words as absolutely necessary.
- NO markdown formatting (no #, ##, ###, **, etc.)
- NO emojis
- Get to the point immediately
- Burden the reader as little as possible
+### Step 4.1: Comment Format

-For each issue found, create a concise inline comment with:
-1. What's wrong (one line)
-2. Why it matters (one line)
-3. How to fix it (one line)
-4. Code example only if essential
+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
+
+### Step 4.2: Posting Comments
+
+For EACH issue:
+
+1. Identify the exact file path and line number
+2. Update your tracking counters (CRITICAL_COUNT, etc.)
+3. Construct the comment body with proper newlines
+4. Execute the gh api command as a SINGLE LINE:

 ```bash
-# Helper function for comprehensive comments
-post_review_comment() {
-  local file_path=$1
-  local line_number=$2
-  local severity=$3  # critical/high/medium/low
-  local category=$4  # architecture/security/performance/quality
-  local issue=$5
-  local context=$6
-  local suggestion=$7
-  local example=$8
-  
-  local body="### [$category] $severity Priority
-
-**Issue**: $issue
-
-**Context**: $context
-
-**Suggestion**: $suggestion"
-
-  if [ -n "$example" ]; then
-    body="$body
-
-**Example**:
-\`\`\`typescript
-$example
-\`\`\`"
-  fi
-
-  body="$body
-
-*Related: See [repository guide](https://github.com/Comfy-Org/comfy-claude-prompt-library/blob/master/project-summaries-for-agents/ComfyUI_frontend/REPOSITORY_GUIDE.md) for patterns*"
-
-  gh api -X POST /repos/$REPOSITORY/pulls/$PR_NUMBER/comments \
-    -f path="$file_path" \
-    -f line=$line_number \
-    -f body="$body" \
-    -f commit_id="$COMMIT_SHA" \
-    -f side='RIGHT' || echo "Failed to post comment at $file_path:$line_number"
-}
+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.
+
+### Example Workflow
+
+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
+   ```
+
+3. Find an issue (e.g., SQL injection on line 42 of src/db/queries.js)
+
+4. Post the inline comment:
+   ```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"
+   ```
+
+Repeat this process for every issue you find in the PR.
+
 ## Phase 5: Validation Rules Application

-Apply ALL validation rules from the loaded knowledge, but focus on the changed lines:
+Apply ALL validation rules from the loaded knowledge files:

-### From Frontend Standards
+### Frontend Standards
 - Vue 3 Composition API patterns
 - Component communication patterns
 - Proper use of composables
 - TypeScript strict mode compliance
 - Bundle optimization

-### From Security Audit
+### Security Audit
 - Input validation
 - XSS prevention
 - CSRF protection
 - Secure state management
 - API security

-### From Performance Check
+### Performance Check
 - Render optimization
 - Memory management
 - Network efficiency
@@ -481,63 +277,51 @@ Apply ALL validation rules from the loaded knowledge, but focus on the changed l

 ## Phase 6: Contextual Review Based on PR Type

-Analyze the PR description and changes to determine the type:
+Analyze the PR to determine its type:

-```bash
-# Extract PR metadata with error handling
-if [ ! -f pr_info.json ]; then
-  echo "Error: pr_info.json not found"
-  exit 1
-fi
-
-PR_TITLE=$(jq -r '.title // "Unknown"' < pr_info.json)
-PR_BODY=$(jq -r '.body // ""' < pr_info.json)
-FILE_COUNT=$(wc -l < changed_files.txt)
-ADDITIONS=$(jq -r '.additions // 0' < pr_info.json)
-DELETIONS=$(jq -r '.deletions // 0' < pr_info.json)
-
-# Determine PR type and apply specific review criteria
-if echo "$PR_TITLE $PR_BODY" | grep -qiE "(feature|feat)"; then
-  echo "Detected feature PR - applying feature review criteria"
-  # Check for tests, documentation, backward compatibility
-elif echo "$PR_TITLE $PR_BODY" | grep -qiE "(fix|bug)"; then
-  echo "Detected bug fix - checking root cause and regression tests"
-  # Verify fix addresses root cause, includes tests
-elif echo "$PR_TITLE $PR_BODY" | grep -qiE "(refactor)"; then
-  echo "Detected refactoring - ensuring behavior preservation"
-  # Check that tests still pass, no behavior changes
-fi
-```
+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

 ## Phase 7: Generate Comprehensive Summary

-After all inline comments, create a detailed summary:
+After ALL inline comments are posted, create a summary:

-```bash
-# Initialize metrics tracking
-REVIEW_START_TIME=$(date +%s)
+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

-# Create the comprehensive summary
-gh pr review $PR_NUMBER --comment --body "# Comprehensive PR Review
+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.

 ## Review Summary

-**PR**: $PR_TITLE (#$PR_NUMBER)
-**Impact**: $ADDITIONS additions, $DELETIONS deletions across $FILE_COUNT files
+**PR**: [PR TITLE] (#$PR_NUMBER)
+**Impact**: [X] additions, [Y] deletions across [Z] files

 ### Issue Distribution
- Critical: $CRITICAL_COUNT
- High: $HIGH_COUNT
- Medium: $MEDIUM_COUNT
- Low: $LOW_COUNT
+- 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
- Code Quality: $QUALITY_ISSUES issues
+- Architecture: [ARCHITECTURE_ISSUES] issues
+- Security: [SECURITY_ISSUES] issues
+- Performance: [PERFORMANCE_ISSUES] issues
+- Code Quality: [QUALITY_ISSUES] issues

 ## Key Findings

@@ -568,141 +352,27 @@ This review is generated by Claude. It may not always be accurate, as with human
 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: Think Deeply
+## Important Guidelines

-When reviewing:
-1. **Think hard** about architectural implications
-2. Consider how changes affect the entire system
-3. Look for subtle bugs and edge cases
-4. Evaluate maintainability over time
-5. Consider extension developer experience
-6. Think about migration paths
+1. **Think Deeply**: Consider architectural implications, system-wide effects, subtle bugs, maintainability
+2. **Be Specific**: Point to exact lines with concrete suggestions
+3. **Be Constructive**: Focus on improvements, not just problems
+4. **Be Concise**: Keep comments brief and actionable
+5. **No Formatting**: Don't use markdown headers in inline comments
+6. **No Emojis**: Keep comments professional

 This is a COMPREHENSIVE review, not a linting pass. Provide the same quality feedback a senior engineer would give after careful consideration.

-## Phase 8: Track Review Metrics
+## Execution Order

-After completing the review, save metrics for analysis:
+1. Phase 1: Setup and checkout PR
+2. Phase 2: Load all relevant knowledge
+3. Phase 3-5: Analyze each changed file thoroughly
+4. Phase 4: Post inline comments as you find issues
+5. Phase 6: Consider PR type for additional checks
+6. Phase 7: Post comprehensive summary ONLY after all inline comments

-```bash
-# Calculate review duration
-REVIEW_END_TIME=$(date +%s)
-REVIEW_DURATION=$((REVIEW_END_TIME - REVIEW_START_TIME))
-
-# Calculate total issues
-TOTAL_ISSUES=$((CRITICAL_COUNT + HIGH_COUNT + MEDIUM_COUNT + LOW_COUNT))
-
-# Create metrics directory if it doesn't exist
-METRICS_DIR=".claude/review-metrics"
-mkdir -p "$METRICS_DIR"
-
-# Generate metrics file
-METRICS_FILE="$METRICS_DIR/metrics-$(date +%Y%m).json"
-
-# Create or update monthly metrics file
-if [ -f "$METRICS_FILE" ]; then
-  # Append to existing file
-  jq -n \
-    --arg pr "$PR_NUMBER" \
-    --arg title "$PR_TITLE" \
-    --arg timestamp "$(date -u +%Y-%m-%dT%H:%M:%SZ)" \
-    --arg duration "$REVIEW_DURATION" \
-    --arg files "$FILE_COUNT" \
-    --arg additions "$ADDITIONS" \
-    --arg deletions "$DELETIONS" \
-    --arg total "$TOTAL_ISSUES" \
-    --arg critical "$CRITICAL_COUNT" \
-    --arg high "$HIGH_COUNT" \
-    --arg medium "$MEDIUM_COUNT" \
-    --arg low "$LOW_COUNT" \
-    --arg architecture "$ARCHITECTURE_ISSUES" \
-    --arg security "$SECURITY_ISSUES" \
-    --arg performance "$PERFORMANCE_ISSUES" \
-    --arg quality "$QUALITY_ISSUES" \
-    '{
-      pr_number: $pr,
-      pr_title: $title,
-      timestamp: $timestamp,
-      review_duration_seconds: ($duration | tonumber),
-      files_reviewed: ($files | tonumber),
-      lines_added: ($additions | tonumber),
-      lines_deleted: ($deletions | tonumber),
-      issues: {
-        total: ($total | tonumber),
-        by_severity: {
-          critical: ($critical | tonumber),
-          high: ($high | tonumber),
-          medium: ($medium | tonumber),
-          low: ($low | tonumber)
-        },
-        by_category: {
-          architecture: ($architecture | tonumber),
-          security: ($security | tonumber),
-          performance: ($performance | tonumber),
-          quality: ($quality | tonumber)
-        }
-      }
-    }' > "$METRICS_FILE.new"
-  
-  # Merge with existing data
-  jq -s '.[0] + [.[1]]' "$METRICS_FILE" "$METRICS_FILE.new" > "$METRICS_FILE.tmp"
-  mv "$METRICS_FILE.tmp" "$METRICS_FILE"
-  rm "$METRICS_FILE.new"
-else
-  # Create new file
-  jq -n \
-    --arg pr "$PR_NUMBER" \
-    --arg title "$PR_TITLE" \
-    --arg timestamp "$(date -u +%Y-%m-%dT%H:%M:%SZ)" \
-    --arg duration "$REVIEW_DURATION" \
-    --arg files "$FILE_COUNT" \
-    --arg additions "$ADDITIONS" \
-    --arg deletions "$DELETIONS" \
-    --arg total "$TOTAL_ISSUES" \
-    --arg critical "$CRITICAL_COUNT" \
-    --arg high "$HIGH_COUNT" \
-    --arg medium "$MEDIUM_COUNT" \
-    --arg low "$LOW_COUNT" \
-    --arg architecture "$ARCHITECTURE_ISSUES" \
-    --arg security "$SECURITY_ISSUES" \
-    --arg performance "$PERFORMANCE_ISSUES" \
-    --arg quality "$QUALITY_ISSUES" \
-    '[{
-      pr_number: $pr,
-      pr_title: $title,
-      timestamp: $timestamp,
-      review_duration_seconds: ($duration | tonumber),
-      files_reviewed: ($files | tonumber),
-      lines_added: ($additions | tonumber),
-      lines_deleted: ($deletions | tonumber),
-      issues: {
-        total: ($total | tonumber),
-        by_severity: {
-          critical: ($critical | tonumber),
-          high: ($high | tonumber),
-          medium: ($medium | tonumber),
-          low: ($low | tonumber)
-        },
-        by_category: {
-          architecture: ($architecture | tonumber),
-          security: ($security | tonumber),
-          performance: ($performance | tonumber),
-          quality: ($quality | tonumber)
-        }
-      }
-    }]' > "$METRICS_FILE"
-fi
-
-echo "Review metrics saved to $METRICS_FILE"
-```
-
-This creates monthly metrics files (e.g., `metrics-202407.json`) that track:
- Which PRs were reviewed
- How long reviews took
- Types and severity of issues found
- Trends over time
-
-You can later analyze these to see patterns and improve your development process.
+Remember: Individual inline comments for each issue, then one final summary. Never batch issues into a single comment.
--- a/.claude/commands/create-frontend-release.md
+++ b/.claude/commands/create-frontend-release.md
@@ -137,8 +137,7 @@ echo "Last stable release: $LAST_STABLE"
 1. Run complete test suite:
   ```bash
   npm run test:unit
-   npm run test:component  
-   npm run test:browser
+   npm run test:component
   ```
 2. Run type checking:
   ```bash
@@ -170,7 +169,79 @@ echo "Last stable release: $LAST_STABLE"
 3. Generate breaking change summary
 4. **COMPATIBILITY REVIEW**: Breaking changes documented and justified?

-### Step 7: Generate and Save Changelog
+### Step 7: Analyze Dependency Updates
+
+1. **Check for dependency version changes:**
+   ```bash
+   # Compare package.json between versions to detect dependency updates
+   PREV_PACKAGE_JSON=$(git show ${BASE_TAG}:package.json 2>/dev/null || echo '{}')
+   CURRENT_PACKAGE_JSON=$(cat package.json)
+   
+   # Extract litegraph versions
+   PREV_LITEGRAPH=$(echo "$PREV_PACKAGE_JSON" | grep -o '"@comfyorg/litegraph": "[^"]*"' | grep -o '[0-9][^"]*' || echo "not found")
+   CURRENT_LITEGRAPH=$(echo "$CURRENT_PACKAGE_JSON" | grep -o '"@comfyorg/litegraph": "[^"]*"' | grep -o '[0-9][^"]*' || echo "not found")
+   
+   echo "Litegraph version change: ${PREV_LITEGRAPH} → ${CURRENT_LITEGRAPH}"
+   ```
+
+2. **Generate litegraph changelog if version changed:**
+   ```bash
+   if [ "$PREV_LITEGRAPH" != "$CURRENT_LITEGRAPH" ] && [ "$PREV_LITEGRAPH" != "not found" ]; then
+     echo "📦 Fetching litegraph changes between v${PREV_LITEGRAPH} and v${CURRENT_LITEGRAPH}..."
+     
+     # Clone or update litegraph repo for changelog analysis
+     if [ ! -d ".temp-litegraph" ]; then
+       git clone https://github.com/comfyanonymous/litegraph.js.git .temp-litegraph
+     else
+       cd .temp-litegraph && git fetch --all && cd ..
+     fi
+     
+     # Get litegraph changelog between versions
+     LITEGRAPH_CHANGES=$(cd .temp-litegraph && git log v${PREV_LITEGRAPH}..v${CURRENT_LITEGRAPH} --oneline --no-merges 2>/dev/null || \
+       git log --oneline --no-merges --since="$(git log -1 --format=%ci ${BASE_TAG})" --until="$(git log -1 --format=%ci HEAD)" 2>/dev/null || \
+       echo "Unable to fetch litegraph changes")
+     
+     # Categorize litegraph changes
+     LITEGRAPH_FEATURES=$(echo "$LITEGRAPH_CHANGES" | grep -iE "(feat|feature|add)" || echo "")
+     LITEGRAPH_FIXES=$(echo "$LITEGRAPH_CHANGES" | grep -iE "(fix|bug)" || echo "")
+     LITEGRAPH_BREAKING=$(echo "$LITEGRAPH_CHANGES" | grep -iE "(break|breaking)" || echo "")
+     LITEGRAPH_OTHER=$(echo "$LITEGRAPH_CHANGES" | grep -viE "(feat|feature|add|fix|bug|break|breaking)" || echo "")
+     
+     # Clean up temp directory
+     rm -rf .temp-litegraph
+     
+     echo "✅ Litegraph changelog extracted"
+   else
+     echo "ℹ️  No litegraph version change detected"
+     LITEGRAPH_CHANGES=""
+   fi
+   ```
+
+3. **Check other 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
+     fi
+   done
+   ```
+
+### Step 8: Generate Comprehensive Release Notes

 1. Extract commit messages since base release:
   ```bash
@@ -185,42 +256,29 @@ echo "Last stable release: $LAST_STABLE"
       echo "WARNING: PR #$PR not on main branch!"
   done
   ```
-3. Group by type:
-   - 🚀 **Features** (feat:)
-   - 🐛 **Bug Fixes** (fix:)
-   - 💥 **Breaking Changes** (BREAKING CHANGE)
-   - 📚 **Documentation** (docs:)
-   - 🔧 **Maintenance** (chore:, refactor:)
-   - ⬆️ **Dependencies** (deps:, dependency updates)
-4. Include PR numbers and links
-5. Add issue references (Fixes #123)
-6. **Save changelog locally:**
-   ```bash
-   # Save to dated file for history
-   echo "$CHANGELOG" > release-notes-${NEW_VERSION}-$(date +%Y%m%d).md
-   
-   # Save to current for easy access
-   echo "$CHANGELOG" > CURRENT_RELEASE_NOTES.md
-   ```
-7. **CHANGELOG REVIEW**: Verify all PRs listed are actually on main branch
-
-### Step 8: Create Enhanced Release Notes
-
-1. Create comprehensive user-facing release notes including:
-   - **What's New**: Major features and improvements
-   - **Bug Fixes**: User-visible fixes
-   - **Breaking Changes**: Migration guide if applicable
-   - **Dependencies**: Major dependency updates
-   - **Performance**: Notable performance improvements
-   - **Contributors**: Thank contributors for their work
-2. Reference related documentation updates
-3. Include screenshots for UI changes (if available)
+3. Create comprehensive release notes including:
+   - **Version Change**: Show version bump details
+   - **Changelog** grouped by type:
+     - 🚀 **Features** (feat:)
+     - 🐛 **Bug Fixes** (fix:)
+     - 💥 **Breaking Changes** (BREAKING CHANGE)
+     - 📚 **Documentation** (docs:)
+     - 🔧 **Maintenance** (chore:, refactor:)
+     - ⬆️ **Dependencies** (deps:, dependency updates)
+       - **Litegraph Changes** (if version updated):
+         - 🚀 Features: ${LITEGRAPH_FEATURES}
+         - 🐛 Bug Fixes: ${LITEGRAPH_FIXES}
+         - 💥 Breaking Changes: ${LITEGRAPH_BREAKING}
+         - 🔧 Other Changes: ${LITEGRAPH_OTHER}
+       - **Other Major Dependencies**: ${OTHER_DEP_CHANGES}
+   - Include PR numbers and links
+   - Add issue references (Fixes #123)
 4. **Save release notes:**
   ```bash
-   # Enhanced release notes for GitHub
-   echo "$RELEASE_NOTES" > github-release-notes-${NEW_VERSION}.md
+   # Save release notes for PR and GitHub release
+   echo "$RELEASE_NOTES" > release-notes-${NEW_VERSION}.md
   ```
-5. **CONTENT REVIEW**: Release notes clear and helpful for users?
+5. **CONTENT REVIEW**: Release notes clear and comprehensive with dependency details?

 ### Step 9: Create Version Bump PR

@@ -258,25 +316,20 @@ echo "Workflow triggered. Waiting for PR creation..."
   
   # For manual PRs
   gh pr create --title "${NEW_VERSION}" \
-     --body-file enhanced-pr-description.md \
+     --body-file release-notes-${NEW_VERSION}.md \
     --label "Release"
   ```
-3. **Create enhanced PR description:**
+3. **Add required sections to PR body:**
   ```bash
-   cat > enhanced-pr-description.md << EOF
-   # Release v${NEW_VERSION}
-
-   ## Version Change
-   \`${CURRENT_VERSION}\` → \`${NEW_VERSION}\` (${VERSION_TYPE})
-
-   ## Changelog
-   ${CHANGELOG}
+   # Create PR body with release notes plus required sections
+   cat > pr-body.md << EOF
+   ${RELEASE_NOTES}

   ## Breaking Changes
-   ${BREAKING_CHANGES}
+   ${BREAKING_CHANGES:-None}

   ## Testing Performed
-   - ✅ Full test suite (unit, component, browser)
+   - ✅ Full test suite (unit, component)
   - ✅ TypeScript compilation
   - ✅ Linting checks
   - ✅ Build verification
@@ -295,15 +348,11 @@ echo "Workflow triggered. Waiting for PR creation..."
   ```
 4. Update PR with enhanced description:
   ```bash
-   gh pr edit ${PR_NUMBER} --body-file enhanced-pr-description.md
+   gh pr edit ${PR_NUMBER} --body-file pr-body.md
   ```
-5. Add changelog as comment for easy reference:
-   ```bash
-   gh pr comment ${PR_NUMBER} --body-file CURRENT_RELEASE_NOTES.md
-   ```
-6. **PR REVIEW**: Version bump PR created and enhanced correctly?
+5. **PR REVIEW**: Version bump PR created and enhanced correctly?

-### Step 11: Critical Release PR Verification
+### Step 10: Critical Release PR Verification

 1. **CRITICAL**: Verify PR has "Release" label:
   ```bash
@@ -325,7 +374,7 @@ echo "Workflow triggered. Waiting for PR creation..."
   ```
 7. **FINAL CODE REVIEW**: Release label present and no [skip ci]?

-### Step 12: Pre-Merge Validation
+### Step 11: Pre-Merge Validation

 1. **Review Requirements**: Release PRs require approval
 2. Monitor CI checks - watch for update-locales
@@ -333,7 +382,7 @@ echo "Workflow triggered. Waiting for PR creation..."
 4. Check no new commits to main since PR creation
 5. **DEPLOYMENT READINESS**: Ready to merge?

-### Step 13: Execute Release
+### Step 12: Execute Release

 1. **FINAL CONFIRMATION**: Merge PR to trigger release?
 2. Merge the Release PR:
@@ -358,7 +407,7 @@ echo "Workflow triggered. Waiting for PR creation..."
   gh run watch ${WORKFLOW_RUN_ID}
   ```

-### Step 14: Enhance GitHub Release
+### Step 13: Enhance GitHub Release

 1. Wait for automatic release creation:
   ```bash
@@ -371,10 +420,10 @@ echo "Workflow triggered. Waiting for PR creation..."

 2. **Enhance the GitHub release:**
   ```bash
-   # Update release with our enhanced notes
+   # Update release with our release notes
   gh release edit v${NEW_VERSION} \
     --title "🚀 ComfyUI Frontend v${NEW_VERSION}" \
-     --notes-file github-release-notes-${NEW_VERSION}.md \
+     --notes-file release-notes-${NEW_VERSION}.md \
     --latest
   
   # Add any additional assets if needed
@@ -386,7 +435,7 @@ echo "Workflow triggered. Waiting for PR creation..."
   gh release view v${NEW_VERSION}
   ```

-### Step 15: Verify Multi-Channel Distribution
+### Step 14: Verify Multi-Channel Distribution

 1. **GitHub Release:**
   ```bash
@@ -424,7 +473,7 @@ echo "Workflow triggered. Waiting for PR creation..."

 4. **DISTRIBUTION VERIFICATION**: All channels published successfully?

-### Step 16: Post-Release Monitoring Setup
+### Step 15: Post-Release Monitoring Setup

 1. **Monitor immediate release health:**
   ```bash
@@ -492,8 +541,7 @@ echo "Workflow triggered. Waiting for PR creation..."
   - Plan next release cycle

   ## Files Generated
-   - \`release-notes-${NEW_VERSION}-$(date +%Y%m%d).md\` - Detailed changelog
-   - \`github-release-notes-${NEW_VERSION}.md\` - GitHub release notes
+   - \`release-notes-${NEW_VERSION}.md\` - Comprehensive release notes
   - \`post-release-checklist.md\` - Follow-up tasks
   EOF
   ```
@@ -544,7 +592,7 @@ echo "- GitHub: Update release with warning notes"
 The command implements multiple quality gates:

 1. **🔒 Security Gate**: Vulnerability scanning, secret detection
-2. **🧪 Quality Gate**: Full test suite, linting, type checking
+2. **🧪 Quality Gate**: Unit and component tests, linting, type checking
 3. **📋 Content Gate**: Changelog accuracy, release notes quality
 4. **🔄 Process Gate**: Release timing verification
 5. **✅ Verification Gate**: Multi-channel publishing confirmation
@@ -602,6 +650,15 @@ The command implements multiple quality gates:
 gh pr view ${PR_NUMBER} --json baseRefName
 ```

+### Issue: Incomplete Dependency Changelog
+**Problem**: Litegraph or other dependency updates only show version bump, not actual changes
+**Solution**: The command now automatically:
+- Detects litegraph version changes between releases
+- Clones the litegraph repository temporarily
+- Extracts and categorizes changes between versions
+- Includes detailed litegraph changelog in release notes
+- Cleans up temporary files after analysis
+
 ### Issue: Release Failed Due to [skip ci]
 **Problem**: Release workflow didn't trigger after merge
 **Prevention**: Always avoid this scenario
@@ -622,4 +679,6 @@ Benefits: Cleaner than creating extra version numbers
 2. **Workflow Speed**: Version bump workflow typically completes in ~20-30 seconds
 3. **Update-locales Behavior**: Inconsistent - sometimes adds [skip ci], sometimes doesn't
 4. **Recovery Options**: Reverting version is cleaner than creating extra versions
+5. **Dependency Tracking**: Command now automatically includes litegraph and major dependency changes in changelogs
+6. **Litegraph Integration**: Temporary cloning of litegraph repo provides detailed change analysis between versions

--- a/.gitattributes
+++ b/.gitattributes
@@ -5,3 +5,7 @@
 *.ts text eol=lf
 *.vue text eol=lf
 *.js text eol=lf
+
+# Generated files
+src/types/comfyRegistryTypes.ts linguist-generated=true
+src/types/generatedManagerTypes.ts linguist-generated=true
--- a/.github/workflows/claude-pr-review.yml
+++ b/.github/workflows/claude-pr-review.yml
@@ -4,6 +4,8 @@ permissions:
  contents: read
  pull-requests: write
  issues: write
+  id-token: write
+  statuses: write

 on:
  pull_request:
@@ -20,7 +22,7 @@ jobs:
        uses: lewagon/wait-on-check-action@v1.3.1
        with:
          ref: ${{ github.event.pull_request.head.sha }}
-          check-regexp: '^(ESLint|Prettier Check|Tests CI|Vitest Tests)'
+          check-regexp: '^(eslint|prettier|test|playwright-tests)'
          wait-interval: 30
          repo-token: ${{ secrets.GITHUB_TOKEN }}
      
@@ -28,7 +30,7 @@ jobs:
        id: check-status
        run: |
          # Get all check runs for this commit
-          CHECK_RUNS=$(gh api repos/${{ github.repository }}/commits/${{ github.event.pull_request.head.sha }}/check-runs --jq '.check_runs[] | select(.name | test("ESLint|Prettier Check|Tests CI|Vitest Tests")) | {name, conclusion}')
+          CHECK_RUNS=$(gh api repos/${{ github.repository }}/commits/${{ github.event.pull_request.head.sha }}/check-runs --jq '.check_runs[] | select(.name | test("eslint|prettier|test|playwright-tests")) | {name, conclusion}')
          
          # Check if any required checks failed
          if echo "$CHECK_RUNS" | grep -q '"conclusion": "failure"'; then
@@ -63,10 +65,17 @@ jobs:
      - name: Run Claude PR Review
        uses: anthropics/claude-code-action@main
        with:
-          prompt_file: .claude/commands/comprehensive-pr-review.md
+          label_trigger: "claude-review"
+          direct_prompt: |
+            Read the file .claude/commands/comprehensive-pr-review.md and follow ALL the instructions exactly. 
+            
+            CRITICAL: You must post individual inline comments using the gh api commands shown in the file. 
+            DO NOT create a summary comment. 
+            Each issue must be posted as a separate inline comment on the specific line of code.
          anthropic_api_key: ${{ secrets.ANTHROPIC_API_KEY }}
-          max_turns: 1
+          max_turns: 256
          timeout_minutes: 30
+          allowed_tools: "Bash(git:*),Bash(gh api:*),Bash(gh pr:*),Bash(gh repo:*),Bash(jq:*),Bash(echo:*),Read,Write,Edit,Glob,Grep,WebFetch"
        env:
          PR_NUMBER: ${{ github.event.pull_request.number }}
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
--- a/.github/workflows/eslint.yaml
+++ b/.github/workflows/eslint.yaml
@@ -2,7 +2,7 @@ name: ESLint

 on:
  pull_request:
-    branches: [ main, master, dev*, core/*, desktop/* ]
+    branches-ignore: [ wip/*, draft/*, temp/* ]

 jobs:
  eslint:
--- a/.github/workflows/format.yaml
+++ b/.github/workflows/format.yaml
@@ -2,7 +2,7 @@ name: Prettier Check

 on:
  pull_request:
-    branches: [ main, master, dev*, core/*, desktop/* ]
+    branches-ignore: [ wip/*, draft/*, temp/* ]

 jobs:
  prettier:
--- a/.github/workflows/test-ui.yaml
+++ b/.github/workflows/test-ui.yaml
@@ -4,7 +4,7 @@ on:
  push:
    branches: [main, master, core/*, desktop/*]
  pull_request:
-    branches: [main, master, dev*, core/*, desktop/*]
+    branches-ignore: [wip/*, draft/*, temp/*]

 jobs:
  setup:
--- a/.github/workflows/vitest.yaml
+++ b/.github/workflows/vitest.yaml
@@ -4,7 +4,7 @@ on:
  push:
    branches: [ main, master, dev*, core/*, desktop/* ]
  pull_request:
-    branches: [ main, master, dev*, core/*, desktop/* ]
+    branches-ignore: [ wip/*, draft/*, temp/* ]

 jobs:
  test:
--- a/README.md
+++ b/README.md
@@ -686,6 +686,12 @@ Component test verifies Vue components in `src/components/`.

 Playwright test verifies the whole app. See <https://github.com/Comfy-Org/ComfyUI_frontend/blob/main/browser_tests/README.md> for details.

+### Custom Icons
+
+The project supports custom SVG icons through the unplugin-icons system. Custom icons are stored in `src/assets/icons/custom/` and can be used as Vue components with the `i-comfy:` prefix.
+
+For detailed instructions on adding and using custom icons, see [src/assets/icons/README.md](src/assets/icons/README.md).
+
 ### litegraph.js

 This repo is using litegraph package hosted on <https://github.com/Comfy-Org/litegraph.js>. Any changes to litegraph should be submitted in that repo instead.
--- a/browser_tests/tests/domWidget.spec.ts
+++ b/browser_tests/tests/domWidget.spec.ts
@@ -47,4 +47,42 @@ test.describe('DOM Widget', () => {
    const finalCount = await comfyPage.getDOMWidgetCount()
    expect(finalCount).toBe(initialCount + 1)
  })
+
+  test('should reposition when layout changes', async ({ comfyPage }) => {
+    // --- setup ---
+
+    const textareaWidget = comfyPage.page
+      .locator('.comfy-multiline-input')
+      .first()
+    await expect(textareaWidget).toBeVisible()
+
+    await comfyPage.setSetting('Comfy.Sidebar.Size', 'small')
+    await comfyPage.setSetting('Comfy.Sidebar.Location', 'left')
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
+    await comfyPage.nextFrame()
+
+    let oldPos: [number, number]
+    const checkBboxChange = async () => {
+      const boudningBox = (await textareaWidget.boundingBox())!
+      expect(boudningBox).not.toBeNull()
+      const position: [number, number] = [boudningBox.x, boudningBox.y]
+      expect(position).not.toEqual(oldPos)
+      oldPos = position
+    }
+    await checkBboxChange()
+
+    // --- test ---
+
+    await comfyPage.setSetting('Comfy.Sidebar.Size', 'normal')
+    await comfyPage.nextFrame()
+    await checkBboxChange()
+
+    await comfyPage.setSetting('Comfy.Sidebar.Location', 'right')
+    await comfyPage.nextFrame()
+    await checkBboxChange()
+
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Bottom')
+    await comfyPage.nextFrame()
+    await checkBboxChange()
+  })
 })
--- a/browser_tests/tests/groupNode.spec.ts
+++ b/browser_tests/tests/groupNode.spec.ts
@@ -264,10 +264,15 @@ test.describe('Group Node', () => {
    test('Copies and pastes group node after clearing workflow', async ({
      comfyPage
    }) => {
+      // Set setting
+      await comfyPage.setSetting('Comfy.ConfirmClear', false)
+
+      // Clear workflow
      await comfyPage.menu.topbar.triggerTopbarCommand([
        'Edit',
        'Clear Workflow'
      ])
+
      await comfyPage.ctrlV()
      await verifyNodeLoaded(comfyPage, 1)
    })
--- a/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/workflow-avif-chromium-linux.png
+++ b/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/workflow-avif-chromium-linux.png
--- a/browser_tests/tests/versionMismatchWarnings.spec.ts
+++ b/browser_tests/tests/versionMismatchWarnings.spec.ts
@@ -0,0 +1,117 @@
+import { expect } from '@playwright/test'
+
+import { SystemStats } from '../../src/schemas/apiSchema'
+import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+
+test.describe('Version Mismatch Warnings', () => {
+  const ALWAYS_AHEAD_OF_INSTALLED_VERSION = '100.100.100'
+  const ALWAYS_BEHIND_INSTALLED_VERSION = '0.0.0'
+
+  const createMockSystemStatsRes = (
+    requiredFrontendVersion: string
+  ): SystemStats => {
+    return {
+      system: {
+        os: 'posix',
+        ram_total: 67235385344,
+        ram_free: 13464207360,
+        comfyui_version: '0.3.46',
+        required_frontend_version: requiredFrontendVersion,
+        python_version: '3.12.3 (main, Jun 18 2025, 17:59:45) [GCC 13.3.0]',
+        pytorch_version: '2.6.0+cu124',
+        embedded_python: false,
+        argv: ['main.py']
+      },
+      devices: [
+        {
+          name: 'cuda:0 NVIDIA GeForce RTX 4070 : cudaMallocAsync',
+          type: 'cuda',
+          index: 0,
+          vram_total: 12557156352,
+          vram_free: 2439249920,
+          torch_vram_total: 0,
+          torch_vram_free: 0
+        }
+      ]
+    }
+  }
+
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
+  })
+
+  test('should show version mismatch warnings when installed version lower than required', async ({
+    comfyPage
+  }) => {
+    // Mock system_stats route to indicate that the installed version is always ahead of the required version
+    await comfyPage.page.route('**/system_stats**', async (route) => {
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify(
+          createMockSystemStatsRes(ALWAYS_AHEAD_OF_INSTALLED_VERSION)
+        )
+      })
+    })
+    await comfyPage.setup()
+
+    // Expect a warning toast to be shown
+    await expect(
+      comfyPage.page.getByText('Version Compatibility Warning')
+    ).toBeVisible()
+  })
+
+  test('should not show version mismatch warnings when installed version is ahead of required', async ({
+    comfyPage
+  }) => {
+    // Mock system_stats route to indicate that the installed version is always ahead of the required version
+    await comfyPage.page.route('**/system_stats**', async (route) => {
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify(
+          createMockSystemStatsRes(ALWAYS_BEHIND_INSTALLED_VERSION)
+        )
+      })
+    })
+    await comfyPage.setup()
+
+    // Expect no warning toast to be shown
+    await expect(
+      comfyPage.page.getByText('Version Compatibility Warning')
+    ).not.toBeVisible()
+  })
+
+  test('should persist dismissed state across sessions', async ({
+    comfyPage
+  }) => {
+    // Mock system_stats route to indicate that the installed version is always ahead of the required version
+    await comfyPage.page.route('**/system_stats**', async (route) => {
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify(
+          createMockSystemStatsRes(ALWAYS_AHEAD_OF_INSTALLED_VERSION)
+        )
+      })
+    })
+    await comfyPage.setup()
+
+    // Locate the warning toast and dismiss it
+    const warningToast = comfyPage.page
+      .locator('div')
+      .filter({ hasText: 'Version Compatibility' })
+      .nth(3)
+    await warningToast.waitFor({ state: 'visible' })
+    const dismissButton = warningToast.getByRole('button', { name: 'Close' })
+    await dismissButton.click()
+
+    // Reload the page, keeping local storage
+    await comfyPage.setup({ clearStorage: false })
+
+    // The same warning from same versions should not be shown to the user again
+    await expect(
+      comfyPage.page.getByText('Version Compatibility Warning')
+    ).not.toBeVisible()
+  })
+})
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,18 +1,18 @@
 {
  "name": "@comfyorg/comfyui-frontend",
-  "version": "1.25.1",
+  "version": "1.25.2",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "@comfyorg/comfyui-frontend",
-      "version": "1.25.1",
+      "version": "1.25.2",
      "license": "GPL-3.0-only",
      "dependencies": {
        "@alloc/quick-lru": "^5.2.0",
        "@atlaskit/pragmatic-drag-and-drop": "^1.3.1",
        "@comfyorg/comfyui-electron-types": "^0.4.43",
-        "@comfyorg/litegraph": "^0.16.18",
+        "@comfyorg/litegraph": "^0.16.20",
        "@primevue/forms": "^4.2.5",
        "@primevue/themes": "^4.2.5",
        "@sentry/vue": "^8.48.0",
@@ -42,6 +42,7 @@
        "pinia": "^2.1.7",
        "primeicons": "^7.0.0",
        "primevue": "^4.2.5",
+        "semver": "^7.7.2",
        "three": "^0.170.0",
        "tiptap-markdown": "^0.8.10",
        "vue": "^3.5.13",
@@ -64,6 +65,7 @@
        "@types/fs-extra": "^11.0.4",
        "@types/lodash": "^4.17.6",
        "@types/node": "^20.14.8",
+        "@types/semver": "^7.7.0",
        "@types/three": "^0.169.0",
        "@vitejs/plugin-vue": "^5.1.4",
        "@vue/test-utils": "^2.4.6",
@@ -86,8 +88,8 @@
        "tsx": "^4.15.6",
        "typescript": "^5.4.5",
        "typescript-eslint": "^8.0.0",
-        "unplugin-icons": "^0.19.3",
-        "unplugin-vue-components": "^0.27.4",
+        "unplugin-icons": "^0.22.0",
+        "unplugin-vue-components": "^0.28.0",
        "vite": "^5.4.19",
        "vite-plugin-dts": "^4.3.0",
        "vite-plugin-html": "^3.2.2",
@@ -439,13 +441,14 @@
      }
    },
    "node_modules/@antfu/install-pkg": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/@antfu/install-pkg/-/install-pkg-0.4.1.tgz",
-      "integrity": "sha512-T7yB5QNG29afhWVkVq7XeIMBa5U/vs9mX69YqayXypPRmYzUmzwnYltplHmPtZ4HPCn+sQKeXW8I47wCbuBOjw==",
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/@antfu/install-pkg/-/install-pkg-0.5.0.tgz",
+      "integrity": "sha512-dKnk2xlAyC7rvTkpkHmu+Qy/2Zc3Vm/l8PtNyIOGDBtXPY3kThfU4ORNEp3V7SXw5XSOb+tOJaUYpfquPzL/Tg==",
      "dev": true,
+      "license": "MIT",
      "dependencies": {
-        "package-manager-detector": "^0.2.0",
-        "tinyexec": "^0.3.0"
+        "package-manager-detector": "^0.2.5",
+        "tinyexec": "^0.3.1"
      },
      "funding": {
        "url": "https://github.com/sponsors/antfu"
@@ -559,6 +562,16 @@
        "url": "https://opencollective.com/babel"
      }
    },
+    "node_modules/@babel/core/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
    "node_modules/@babel/generator": {
      "version": "7.27.1",
      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.27.1.tgz",
@@ -603,6 +616,16 @@
        "node": ">=6.9.0"
      }
    },
+    "node_modules/@babel/helper-compilation-targets/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
    "node_modules/@babel/helper-create-class-features-plugin": {
      "version": "7.27.1",
      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.27.1.tgz",
@@ -624,6 +647,16 @@
        "@babel/core": "^7.0.0"
      }
    },
+    "node_modules/@babel/helper-create-class-features-plugin/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
    "node_modules/@babel/helper-member-expression-to-functions": {
      "version": "7.27.1",
      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.27.1.tgz",
@@ -879,9 +912,9 @@
      }
    },
    "node_modules/@babel/runtime": {
-      "version": "7.27.6",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.27.6.tgz",
-      "integrity": "sha512-vbavdySgbTTrmFE+EsiqUTzlOr5bzlnJtUv9PynGCAKvfQqjIXbvFdumPM/GxMDfyuGMJaJAU6TO4zc1Jf1i8Q==",
+      "version": "7.28.2",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.2.tgz",
+      "integrity": "sha512-KHp2IflsnGywDjBWDkR9iEqiWSpc8GIi0lgTT3mOElT0PP1tG26P4tmFI2YvAdzgq9RGyoHZQEIEdZy6Ec5xCA==",
      "license": "MIT",
      "engines": {
        "node": ">=6.9.0"
@@ -948,9 +981,9 @@
      "license": "GPL-3.0-only"
    },
    "node_modules/@comfyorg/litegraph": {
-      "version": "0.16.18",
-      "resolved": "https://registry.npmjs.org/@comfyorg/litegraph/-/litegraph-0.16.18.tgz",
-      "integrity": "sha512-5esVcBbgn8rD7vjQOUOW2lrKq4hfHqAbgjCvam+uBWWkCFz6ph8DF1zGrHwxywocxXLlbHL+iavM4U/ZxAPtZA==",
+      "version": "0.16.20",
+      "resolved": "https://registry.npmjs.org/@comfyorg/litegraph/-/litegraph-0.16.20.tgz",
+      "integrity": "sha512-8iUBhKYkr9qV6vWxC3C9Wea9K7iHwyDHxxN6OrhE9sySYfUA14XuNpVMaC8eVUaIm5KBOSmr/Q1J2XVHsHEISg==",
      "license": "MIT"
    },
    "node_modules/@cspotcode/source-map-support": {
@@ -2300,20 +2333,122 @@
      "dev": true
    },
    "node_modules/@iconify/utils": {
-      "version": "2.1.32",
-      "resolved": "https://registry.npmjs.org/@iconify/utils/-/utils-2.1.32.tgz",
-      "integrity": "sha512-LeifFZPPKu28O3AEDpYJNdEbvS4/ojAPyIW+pF/vUpJTYnbTiXUHkCh0bwgFRzKvdpb8H4Fbfd/742++MF4fPQ==",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@iconify/utils/-/utils-2.3.0.tgz",
+      "integrity": "sha512-GmQ78prtwYW6EtzXRU1rY+KwOKfz32PD7iJh6Iyqw68GiKuoZ2A6pRtzWONz5VQJbp50mEjXh/7NkumtrAgRKA==",
      "dev": true,
+      "license": "MIT",
      "dependencies": {
-        "@antfu/install-pkg": "^0.4.0",
-        "@antfu/utils": "^0.7.10",
+        "@antfu/install-pkg": "^1.0.0",
+        "@antfu/utils": "^8.1.0",
        "@iconify/types": "^2.0.0",
-        "debug": "^4.3.6",
+        "debug": "^4.4.0",
+        "globals": "^15.14.0",
        "kolorist": "^1.8.0",
-        "local-pkg": "^0.5.0",
-        "mlly": "^1.7.1"
+        "local-pkg": "^1.0.0",
+        "mlly": "^1.7.4"
      }
    },
+    "node_modules/@iconify/utils/node_modules/@antfu/install-pkg": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@antfu/install-pkg/-/install-pkg-1.1.0.tgz",
+      "integrity": "sha512-MGQsmw10ZyI+EJo45CdSER4zEb+p31LpDAFp2Z3gkSd1yqVZGi0Ebx++YTEMonJy4oChEMLsxZ64j8FH6sSqtQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "package-manager-detector": "^1.3.0",
+        "tinyexec": "^1.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@iconify/utils/node_modules/@antfu/utils": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/@antfu/utils/-/utils-8.1.1.tgz",
+      "integrity": "sha512-Mex9nXf9vR6AhcXmMrlz/HVgYYZpVGJ6YlPgwl7UnaFpnshXs6EK/oa5Gpf3CzENMjkvEx2tQtntGnb7UtSTOQ==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@iconify/utils/node_modules/confbox": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/confbox/-/confbox-0.2.2.tgz",
+      "integrity": "sha512-1NB+BKqhtNipMsov4xI/NnhCKp9XG9NamYp5PVm9klAT0fsrNPjaFICsCFhNhwZJKNh7zB/3q8qXz0E9oaMNtQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@iconify/utils/node_modules/debug": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
+      "integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@iconify/utils/node_modules/local-pkg": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-1.1.1.tgz",
+      "integrity": "sha512-WunYko2W1NcdfAFpuLUoucsgULmgDBRkdxHxWQ7mK0cQqwPiy8E1enjuRBrhLtZkB5iScJ1XIPdhVEFK8aOLSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mlly": "^1.7.4",
+        "pkg-types": "^2.0.1",
+        "quansync": "^0.2.8"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@iconify/utils/node_modules/package-manager-detector": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/package-manager-detector/-/package-manager-detector-1.3.0.tgz",
+      "integrity": "sha512-ZsEbbZORsyHuO00lY1kV3/t72yp6Ysay6Pd17ZAlNGuGwmWDLCJxFpRs0IzfXfj1o4icJOkUEioexFHzyPurSQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@iconify/utils/node_modules/pathe": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
+      "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@iconify/utils/node_modules/pkg-types": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-2.2.0.tgz",
+      "integrity": "sha512-2SM/GZGAEkPp3KWORxQZns4M+WSeXbC2HEvmOIJe3Cmiv6ieAJvdVhDldtHqM5J1Y7MrR1XhkBT/rMlhh9FdqQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "confbox": "^0.2.2",
+        "exsolve": "^1.0.7",
+        "pathe": "^2.0.3"
+      }
+    },
+    "node_modules/@iconify/utils/node_modules/tinyexec": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-1.0.1.tgz",
+      "integrity": "sha512-5uC6DDlmeqiOwCPmK9jMSdOuZTh8bU39Ys6yidB+UTt5hfZUPGAypSgFRiEp+jbi9qH40BLDvy85jIU88wKSqw==",
+      "dev": true,
+      "license": "MIT"
+    },
    "node_modules/@inkjs/ui": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/@inkjs/ui/-/ui-1.0.0.tgz",
@@ -4522,6 +4657,13 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/@types/semver": {
+      "version": "7.7.0",
+      "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.7.0.tgz",
+      "integrity": "sha512-k107IF4+Xr7UHjwDc7Cfd6PRQfbdkiRabXGRjo07b4WyPahFBZCZ1sE+BNxYIJPPg73UkfOsVOLwqVc/6ETrIA==",
+      "dev": true,
+      "license": "MIT"
+    },
    "node_modules/@types/stats.js": {
      "version": "0.17.3",
      "resolved": "https://registry.npmjs.org/@types/stats.js/-/stats.js-0.17.3.tgz",
@@ -4753,19 +4895,6 @@
        "url": "https://github.com/sponsors/isaacs"
      }
    },
-    "node_modules/@typescript-eslint/typescript-estree/node_modules/semver": {
-      "version": "7.6.3",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
-      "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
-      "dev": true,
-      "license": "ISC",
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
    "node_modules/@typescript-eslint/utils": {
      "version": "8.0.0",
      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.0.0.tgz",
@@ -5987,15 +6116,15 @@
      }
    },
    "node_modules/broker-factory": {
-      "version": "3.1.7",
-      "resolved": "https://registry.npmjs.org/broker-factory/-/broker-factory-3.1.7.tgz",
-      "integrity": "sha512-RxbMXWq/Qvw9aLZMvuooMtVTm2/SV9JEpxpBbMuFhYAnDaZxctbJ+1b9ucHxADk/eQNqDijvWQjLVARqExAeyg==",
+      "version": "3.1.8",
+      "resolved": "https://registry.npmjs.org/broker-factory/-/broker-factory-3.1.8.tgz",
+      "integrity": "sha512-xmVnYN0FZtynhPUmAnN+/MFRdbDi3syCuxWV7o7s78FcIN0pjDtn9mUrVqEgdjQkbfojRhlPWbYbXJkMCyddrg==",
      "license": "MIT",
      "dependencies": {
        "@babel/runtime": "^7.27.6",
        "fast-unique-numbers": "^9.0.22",
        "tslib": "^2.8.1",
-        "worker-factory": "^7.0.43"
+        "worker-factory": "^7.0.44"
      }
    },
    "node_modules/browserslist": {
@@ -6561,24 +6690,12 @@
      "dev": true,
      "license": "MIT"
    },
-    "node_modules/conf/node_modules/semver": {
-      "version": "7.6.3",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
-      "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
-      "dev": true,
-      "license": "ISC",
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
    "node_modules/confbox": {
-      "version": "0.1.7",
-      "resolved": "https://registry.npmjs.org/confbox/-/confbox-0.1.7.tgz",
-      "integrity": "sha512-uJcB/FKZtBMCJpK8MQji6bJHgu1tixKPxRLeGkNzBoOZzpnZUJm0jm2/sBDWcuBx1dYgxV4JU+g5hmNxCyAmdA==",
-      "dev": true
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/confbox/-/confbox-0.1.8.tgz",
+      "integrity": "sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==",
+      "dev": true,
+      "license": "MIT"
    },
    "node_modules/config-chain": {
      "version": "1.1.13",
@@ -7473,19 +7590,6 @@
        "url": "https://github.com/sponsors/isaacs"
      }
    },
-    "node_modules/editorconfig/node_modules/semver": {
-      "version": "7.6.3",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
-      "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
-      "dev": true,
-      "license": "ISC",
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
    "node_modules/ee-first": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -7876,19 +7980,6 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
-    "node_modules/eslint-plugin-vue/node_modules/semver": {
-      "version": "7.6.3",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
-      "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
-      "dev": true,
-      "license": "ISC",
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
    "node_modules/eslint-plugin-vue/node_modules/type-fest": {
      "version": "0.20.2",
      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
@@ -8334,6 +8425,13 @@
        "node": ">= 0.6"
      }
    },
+    "node_modules/exsolve": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/exsolve/-/exsolve-1.0.7.tgz",
+      "integrity": "sha512-VO5fQUzZtI6C+vx4w/4BWJpg3s/5l+6pRQEHzFRM8WFi4XffSP1Z+4qi7GbjWbvRQEbdIco5mIMq+zX4rPuLrw==",
+      "dev": true,
+      "license": "MIT"
+    },
    "node_modules/extend": {
      "version": "3.0.2",
      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
@@ -8355,53 +8453,53 @@
      }
    },
    "node_modules/extendable-media-recorder": {
-      "version": "9.2.27",
-      "resolved": "https://registry.npmjs.org/extendable-media-recorder/-/extendable-media-recorder-9.2.27.tgz",
-      "integrity": "sha512-2X+Ixi1cxLek0Cj9x9atmhQ+apG+LwJpP2p3ypP8Pxau0poDnicrg7FTfPVQV5PW/3DHFm/eQ16vbgo5Yk3HGQ==",
+      "version": "9.2.28",
+      "resolved": "https://registry.npmjs.org/extendable-media-recorder/-/extendable-media-recorder-9.2.28.tgz",
+      "integrity": "sha512-OIltlqo8rIUOcPn5c6aZ0qCvcTpXDnBgts8eRXK1VQKCI1omYBgZZyzkJ5vrQnB8xR34+GNOFs1Z+srq6tQsdQ==",
      "license": "MIT",
      "dependencies": {
        "@babel/runtime": "^7.27.6",
-        "media-encoder-host": "^9.0.20",
+        "media-encoder-host": "^9.0.21",
        "multi-buffer-data-view": "^6.0.22",
-        "recorder-audio-worklet": "^6.0.48",
+        "recorder-audio-worklet": "^6.0.49",
        "standardized-audio-context": "^25.3.77",
        "subscribable-things": "^2.1.53",
        "tslib": "^2.8.1"
      }
    },
    "node_modules/extendable-media-recorder-wav-encoder": {
-      "version": "7.0.129",
-      "resolved": "https://registry.npmjs.org/extendable-media-recorder-wav-encoder/-/extendable-media-recorder-wav-encoder-7.0.129.tgz",
-      "integrity": "sha512-/wqM2hnzvLy/iUlg/EU3JIF8MJcidy8I77Z7CCm5+CVEClDfcs6bH9PgghuisndwKTaud0Dh48RTD83gkfEjCw==",
+      "version": "7.0.130",
+      "resolved": "https://registry.npmjs.org/extendable-media-recorder-wav-encoder/-/extendable-media-recorder-wav-encoder-7.0.130.tgz",
+      "integrity": "sha512-tVroIOesnMarsm+iIRiWUEYgmQj/lGqeMVNwJla7/tTVkX3ZPamh0NW59deILANwDIJq9lARLQmsUhyDWW57PA==",
      "license": "MIT",
      "dependencies": {
        "@babel/runtime": "^7.27.6",
-        "extendable-media-recorder-wav-encoder-broker": "^7.0.119",
-        "extendable-media-recorder-wav-encoder-worker": "^8.0.116",
+        "extendable-media-recorder-wav-encoder-broker": "^7.0.120",
+        "extendable-media-recorder-wav-encoder-worker": "^8.0.117",
        "tslib": "^2.8.1"
      }
    },
    "node_modules/extendable-media-recorder-wav-encoder-broker": {
-      "version": "7.0.119",
-      "resolved": "https://registry.npmjs.org/extendable-media-recorder-wav-encoder-broker/-/extendable-media-recorder-wav-encoder-broker-7.0.119.tgz",
-      "integrity": "sha512-BLrFOnqFLpsmmNpSk/TfjNs4j6ImCSGtoryIpRlqNu5S/Avt6gRJI0s4UYvdK7h17PCi+8vaDr75blvmU1sYlw==",
+      "version": "7.0.120",
+      "resolved": "https://registry.npmjs.org/extendable-media-recorder-wav-encoder-broker/-/extendable-media-recorder-wav-encoder-broker-7.0.120.tgz",
+      "integrity": "sha512-wYRnDsHngGGR7LnEfl+tkNa7ck31KSV3PzqGLMCeKRmr02OrYxJUKyCeYf79TEe8O0EFtlBGBR9fiAj6OGDOhg==",
      "license": "MIT",
      "dependencies": {
        "@babel/runtime": "^7.27.6",
-        "broker-factory": "^3.1.7",
-        "extendable-media-recorder-wav-encoder-worker": "^8.0.116",
+        "broker-factory": "^3.1.8",
+        "extendable-media-recorder-wav-encoder-worker": "^8.0.117",
        "tslib": "^2.8.1"
      }
    },
    "node_modules/extendable-media-recorder-wav-encoder-worker": {
-      "version": "8.0.116",
-      "resolved": "https://registry.npmjs.org/extendable-media-recorder-wav-encoder-worker/-/extendable-media-recorder-wav-encoder-worker-8.0.116.tgz",
-      "integrity": "sha512-bJPR0B7ZHeoqi9YoSie+UXAfEYya3efQ9eLiWuyK4KcOv+SuYQvWCoyzX5kjvb6GqIBCUnev5xulfeHRlyCwvw==",
+      "version": "8.0.117",
+      "resolved": "https://registry.npmjs.org/extendable-media-recorder-wav-encoder-worker/-/extendable-media-recorder-wav-encoder-worker-8.0.117.tgz",
+      "integrity": "sha512-rnlIPkMB5F2sslesLXLdJ/Z0Kes4ROtdr+Kf/a6aF3233oJWK7165krWNZP5gpKZ4Z5Lhjx4fxVB12exZvlb2g==",
      "license": "MIT",
      "dependencies": {
        "@babel/runtime": "^7.27.6",
        "tslib": "^2.8.1",
-        "worker-factory": "^7.0.43"
+        "worker-factory": "^7.0.44"
      }
    },
    "node_modules/fast-deep-equal": {
@@ -9069,9 +9167,9 @@
      }
    },
    "node_modules/globals": {
-      "version": "15.9.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-15.9.0.tgz",
-      "integrity": "sha512-SmSKyLLKFbSr6rptvP8izbyxJL4ILwqO9Jg23UA0sDlGlu58V59D1//I3vlc0KJphVdUR7vMjHIplYnzBxorQA==",
+      "version": "15.15.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-15.15.0.tgz",
+      "integrity": "sha512-7ACyT3wmyp3I61S4fG682L0VA2RGD9otkqGJIwNUMF1SWUombIIk+af1unuDYgMm082aHYwD+mzJvv9Iu8dsgg==",
      "dev": true,
      "license": "MIT",
      "engines": {
@@ -10813,19 +10911,6 @@
        "node": ">=14"
      }
    },
-    "node_modules/langsmith/node_modules/semver": {
-      "version": "7.6.3",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
-      "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
-      "dev": true,
-      "license": "ISC",
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
    "node_modules/latest-version": {
      "version": "9.0.0",
      "resolved": "https://registry.npmjs.org/latest-version/-/latest-version-9.0.0.tgz",
@@ -10950,13 +11035,14 @@
      }
    },
    "node_modules/local-pkg": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-0.5.0.tgz",
-      "integrity": "sha512-ok6z3qlYyCDS4ZEU27HaU6x/xZa9Whf8jD4ptH5UZTQYZVYeb9bnZ3ojVhiJNLiXK1Hfc0GNbLXcmZ5plLDDBg==",
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-0.5.1.tgz",
+      "integrity": "sha512-9rrA30MRRP3gBD3HTGnC6cDFpaE1kVDWxWgqWJUN0RvDNAo+Nz/9GxB+nHOH0ifbVFy0hSA1V6vFDvnx54lTEQ==",
      "dev": true,
+      "license": "MIT",
      "dependencies": {
-        "mlly": "^1.4.2",
-        "pkg-types": "^1.0.3"
+        "mlly": "^1.7.3",
+        "pkg-types": "^1.2.1"
      },
      "engines": {
        "node": ">=14"
@@ -11496,40 +11582,40 @@
      "license": "MIT"
    },
    "node_modules/media-encoder-host": {
-      "version": "9.0.20",
-      "resolved": "https://registry.npmjs.org/media-encoder-host/-/media-encoder-host-9.0.20.tgz",
-      "integrity": "sha512-IyEYxw6az97RNuETOAZV4YZqNAPOiF9GKIp5mVZb4HOyWd6mhkWQ34ydOzhqAWogMyc4W05kjN/VCgTtgyFmsw==",
+      "version": "9.0.21",
+      "resolved": "https://registry.npmjs.org/media-encoder-host/-/media-encoder-host-9.0.21.tgz",
+      "integrity": "sha512-hL41jBYmTKxGB2Z82rcR2hx4JCFBR3fmSOLR+G7EEkZn+uwSXDJTRFiYd7XWKnpjiHXy7ewf0ByEpby+2mv4Qg==",
      "license": "MIT",
      "dependencies": {
        "@babel/runtime": "^7.27.6",
-        "media-encoder-host-broker": "^8.0.19",
-        "media-encoder-host-worker": "^10.0.19",
+        "media-encoder-host-broker": "^8.0.20",
+        "media-encoder-host-worker": "^10.0.20",
        "tslib": "^2.8.1"
      }
    },
    "node_modules/media-encoder-host-broker": {
-      "version": "8.0.19",
-      "resolved": "https://registry.npmjs.org/media-encoder-host-broker/-/media-encoder-host-broker-8.0.19.tgz",
-      "integrity": "sha512-lTpsNuaZdTCdtTHsOyww7Ae0Mwv+7mFS+O4YkFYWhXwVs0rm6XbRK5jRRn5JmcX3n1eTE1lQS5RgX8qbNaIjSg==",
+      "version": "8.0.20",
+      "resolved": "https://registry.npmjs.org/media-encoder-host-broker/-/media-encoder-host-broker-8.0.20.tgz",
+      "integrity": "sha512-Jab7frQx8d7Js+yBeMx7FeTrxRDjIpSmdARRkHSOtWNKJv9a+Hy2/OAPXoEJl6Y15jk1eiDwJkMMF6zvlnNMEA==",
      "license": "MIT",
      "dependencies": {
        "@babel/runtime": "^7.27.6",
-        "broker-factory": "^3.1.7",
+        "broker-factory": "^3.1.8",
        "fast-unique-numbers": "^9.0.22",
-        "media-encoder-host-worker": "^10.0.19",
+        "media-encoder-host-worker": "^10.0.20",
        "tslib": "^2.8.1"
      }
    },
    "node_modules/media-encoder-host-worker": {
-      "version": "10.0.19",
-      "resolved": "https://registry.npmjs.org/media-encoder-host-worker/-/media-encoder-host-worker-10.0.19.tgz",
-      "integrity": "sha512-I8fwc6f41peER3RFSiwDxnIHbqU7p3pc2ghQozcw9CQfL0mWEo4IjQJtyswrrlL/HO2pgVSMQbaNzE4q/0mfDQ==",
+      "version": "10.0.20",
+      "resolved": "https://registry.npmjs.org/media-encoder-host-worker/-/media-encoder-host-worker-10.0.20.tgz",
+      "integrity": "sha512-Ysqjwlcu4VP6FlM+atQJZFFJwvfrw603gnmhWfyBlcE5+pl7ctc0wo2dbPiBpz9pc1pY4N5N6PHHhywkqHxfnA==",
      "license": "MIT",
      "dependencies": {
        "@babel/runtime": "^7.27.6",
-        "extendable-media-recorder-wav-encoder-broker": "^7.0.119",
+        "extendable-media-recorder-wav-encoder-broker": "^7.0.120",
        "tslib": "^2.8.1",
-        "worker-factory": "^7.0.43"
+        "worker-factory": "^7.0.44"
      }
    },
    "node_modules/media-typer": {
@@ -12263,17 +12349,25 @@
      "dev": true
    },
    "node_modules/mlly": {
-      "version": "1.7.1",
-      "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.7.1.tgz",
-      "integrity": "sha512-rrVRZRELyQzrIUAVMHxP97kv+G786pHmOKzuFII8zDYahFBS7qnHh2AlYSl1GAHhaMPCz6/oHjVMcfFYgFYHgA==",
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.7.4.tgz",
+      "integrity": "sha512-qmdSIPC4bDJXgZTCR7XosJiNKySV7O215tsPtDN9iEO/7q/76b/ijtgRu/+epFXSJhijtTCCGp3DWS549P3xKw==",
      "dev": true,
+      "license": "MIT",
      "dependencies": {
-        "acorn": "^8.11.3",
-        "pathe": "^1.1.2",
-        "pkg-types": "^1.1.1",
-        "ufo": "^1.5.3"
+        "acorn": "^8.14.0",
+        "pathe": "^2.0.1",
+        "pkg-types": "^1.3.0",
+        "ufo": "^1.5.4"
      }
    },
+    "node_modules/mlly/node_modules/pathe": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
+      "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==",
+      "dev": true,
+      "license": "MIT"
+    },
    "node_modules/mri": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
@@ -12825,24 +12919,15 @@
      "integrity": "sha512-dATvCeZN/8wQsGywez1mzHtTlP22H8OEfPrVMLNr4/eGa+ijtLn/6M5f0dY8UKNrC2O9UCU6SSoG3qRKnt7STw==",
      "dev": true
    },
-    "node_modules/package-json/node_modules/semver": {
-      "version": "7.6.3",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
-      "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
-      "dev": true,
-      "license": "ISC",
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
    "node_modules/package-manager-detector": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/package-manager-detector/-/package-manager-detector-0.2.0.tgz",
-      "integrity": "sha512-E385OSk9qDcXhcM9LNSe4sdhx8a9mAPrZ4sMLW+tmxl5ZuGtPUcdFu+MPP2jbgiWAZ6Pfe5soGFMd+0Db5Vrog==",
-      "dev": true
+      "version": "0.2.11",
+      "resolved": "https://registry.npmjs.org/package-manager-detector/-/package-manager-detector-0.2.11.tgz",
+      "integrity": "sha512-BEnLolu+yuz22S56CU1SUKq3XC3PkwD5wv4ikR4MfGvnRVcmzXR9DwSlW2fEamyTPyXHomBJRzgapeuBvRNzJQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "quansync": "^0.2.7"
+      }
    },
    "node_modules/pako": {
      "version": "1.0.11",
@@ -13136,16 +13221,24 @@
      }
    },
    "node_modules/pkg-types": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.2.0.tgz",
-      "integrity": "sha512-+ifYuSSqOQ8CqP4MbZA5hDpb97n3E8SVWdJe+Wms9kj745lmd3b7EZJiqvmLwAlmRfjrI7Hi5z3kdBJ93lFNPA==",
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.3.1.tgz",
+      "integrity": "sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==",
      "dev": true,
+      "license": "MIT",
      "dependencies": {
-        "confbox": "^0.1.7",
-        "mlly": "^1.7.1",
-        "pathe": "^1.1.2"
+        "confbox": "^0.1.8",
+        "mlly": "^1.7.4",
+        "pathe": "^2.0.1"
      }
    },
+    "node_modules/pkg-types/node_modules/pathe": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
+      "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==",
+      "dev": true,
+      "license": "MIT"
+    },
    "node_modules/playwright": {
      "version": "1.52.0",
      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.52.0.tgz",
@@ -13734,6 +13827,23 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/quansync": {
+      "version": "0.2.10",
+      "resolved": "https://registry.npmjs.org/quansync/-/quansync-0.2.10.tgz",
+      "integrity": "sha512-t41VRkMYbkHyCYmOvx/6URnN80H7k4X0lLdBMGsz+maAwrJQYB1djpV6vHrQIBE0WBSGqhtEHrK9U3DWWH8v7A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/antfu"
+        },
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/sxzz"
+        }
+      ],
+      "license": "MIT"
+    },
    "node_modules/querystringify": {
      "version": "2.2.0",
      "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
@@ -13892,19 +14002,19 @@
      }
    },
    "node_modules/recorder-audio-worklet": {
-      "version": "6.0.48",
-      "resolved": "https://registry.npmjs.org/recorder-audio-worklet/-/recorder-audio-worklet-6.0.48.tgz",
-      "integrity": "sha512-PVlq/1hjCrPcUGqARg8rR30A303xDCao0jmlBTaUaKkN3Xme58RI7EQxurv8rw2eDwVrN+nrni0UoJoa5/v+zg==",
+      "version": "6.0.49",
+      "resolved": "https://registry.npmjs.org/recorder-audio-worklet/-/recorder-audio-worklet-6.0.49.tgz",
+      "integrity": "sha512-JLKSKh5rAWxReHqca/f3h9L8pzBF1KnB+N2oIP2jkTD37n2yupkCazKD2f20pUOGkaX6AJG998gtKNCHYJn4nw==",
      "license": "MIT",
      "dependencies": {
        "@babel/runtime": "^7.27.6",
-        "broker-factory": "^3.1.7",
+        "broker-factory": "^3.1.8",
        "fast-unique-numbers": "^9.0.22",
        "recorder-audio-worklet-processor": "^5.0.35",
        "standardized-audio-context": "^25.3.77",
        "subscribable-things": "^2.1.53",
        "tslib": "^2.8.1",
-        "worker-factory": "^7.0.43"
+        "worker-factory": "^7.0.44"
      }
    },
    "node_modules/recorder-audio-worklet-processor": {
@@ -14507,12 +14617,15 @@
      "dev": true
    },
    "node_modules/semver": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-      "dev": true,
+      "version": "7.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
+      "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
+      "license": "ISC",
      "bin": {
        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
      }
    },
    "node_modules/send": {
@@ -16215,39 +16328,34 @@
      }
    },
    "node_modules/unplugin": {
-      "version": "1.13.1",
-      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-1.13.1.tgz",
-      "integrity": "sha512-6Kq1iSSwg7KyjcThRUks9LuqDAKvtnioxbL9iEtB9ctTyBA5OmrB8gZd/d225VJu1w3UpUsKV7eGrvf59J7+VA==",
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-2.3.5.tgz",
+      "integrity": "sha512-RyWSb5AHmGtjjNQ6gIlA67sHOsWpsbWpwDokLwTcejVdOjEkJZh7QKu14J00gDDVSh8kGH4KYC/TNBceXFZhtw==",
      "dev": true,
+      "license": "MIT",
      "dependencies": {
-        "acorn": "^8.12.1",
+        "acorn": "^8.14.1",
+        "picomatch": "^4.0.2",
        "webpack-virtual-modules": "^0.6.2"
      },
      "engines": {
-        "node": ">=14.0.0"
-      },
-      "peerDependencies": {
-        "webpack-sources": "^3"
-      },
-      "peerDependenciesMeta": {
-        "webpack-sources": {
-          "optional": true
-        }
+        "node": ">=18.12.0"
      }
    },
    "node_modules/unplugin-icons": {
-      "version": "0.19.3",
-      "resolved": "https://registry.npmjs.org/unplugin-icons/-/unplugin-icons-0.19.3.tgz",
-      "integrity": "sha512-EUegRmsAI6+rrYr0vXjFlIP+lg4fSC4zb62zAZKx8FGXlWAGgEGBCa3JDe27aRAXhistObLPbBPhwa/0jYLFkQ==",
+      "version": "0.22.0",
+      "resolved": "https://registry.npmjs.org/unplugin-icons/-/unplugin-icons-0.22.0.tgz",
+      "integrity": "sha512-CP+iZq5U7doOifer5bcM0jQ9t3Is7EGybIYt3myVxceI8Zuk8EZEpe1NPtJvh7iqMs1VdbK0L41t9+um9VuuLw==",
      "dev": true,
+      "license": "MIT",
      "dependencies": {
-        "@antfu/install-pkg": "^0.4.1",
+        "@antfu/install-pkg": "^0.5.0",
        "@antfu/utils": "^0.7.10",
-        "@iconify/utils": "^2.1.29",
-        "debug": "^4.3.6",
+        "@iconify/utils": "^2.2.0",
+        "debug": "^4.4.0",
        "kolorist": "^1.8.0",
-        "local-pkg": "^0.5.0",
-        "unplugin": "^1.12.0"
+        "local-pkg": "^0.5.1",
+        "unplugin": "^2.1.0"
      },
      "funding": {
        "url": "https://github.com/sponsors/antfu"
@@ -16256,6 +16364,7 @@
        "@svgr/core": ">=7.0.0",
        "@svgx/core": "^1.0.1",
        "@vue/compiler-sfc": "^3.0.2 || ^2.7.0",
+        "svelte": "^3.0.0 || ^4.0.0 || ^5.0.0",
        "vue-template-compiler": "^2.6.12",
        "vue-template-es2015-compiler": "^1.9.0"
      },
@@ -16269,6 +16378,9 @@
        "@vue/compiler-sfc": {
          "optional": true
        },
+        "svelte": {
+          "optional": true
+        },
        "vue-template-compiler": {
          "optional": true
        },
@@ -16277,22 +16389,41 @@
        }
      }
    },
-    "node_modules/unplugin-vue-components": {
-      "version": "0.27.4",
-      "resolved": "https://registry.npmjs.org/unplugin-vue-components/-/unplugin-vue-components-0.27.4.tgz",
-      "integrity": "sha512-1XVl5iXG7P1UrOMnaj2ogYa5YTq8aoh5jwDPQhemwO/OrXW+lPQKDXd1hMz15qxQPxgb/XXlbgo3HQ2rLEbmXQ==",
+    "node_modules/unplugin-icons/node_modules/debug": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
+      "integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==",
      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/unplugin-vue-components": {
+      "version": "0.28.0",
+      "resolved": "https://registry.npmjs.org/unplugin-vue-components/-/unplugin-vue-components-0.28.0.tgz",
+      "integrity": "sha512-jiTGtJ3JsRFBjgvyilfrX7yUoGKScFgbdNw+6p6kEXU+Spf/rhxzgvdfuMcvhCcLmflB/dY3pGQshYBVGOUx7Q==",
+      "dev": true,
+      "license": "MIT",
      "dependencies": {
        "@antfu/utils": "^0.7.10",
-        "@rollup/pluginutils": "^5.1.0",
+        "@rollup/pluginutils": "^5.1.4",
        "chokidar": "^3.6.0",
-        "debug": "^4.3.6",
+        "debug": "^4.4.0",
        "fast-glob": "^3.3.2",
-        "local-pkg": "^0.5.0",
-        "magic-string": "^0.30.11",
+        "local-pkg": "^0.5.1",
+        "magic-string": "^0.30.15",
        "minimatch": "^9.0.5",
-        "mlly": "^1.7.1",
-        "unplugin": "^1.12.1"
+        "mlly": "^1.7.3",
+        "unplugin": "^2.1.0"
      },
      "engines": {
        "node": ">=14"
@@ -16323,6 +16454,24 @@
        "balanced-match": "^1.0.0"
      }
    },
+    "node_modules/unplugin-vue-components/node_modules/debug": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
+      "integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/unplugin-vue-components/node_modules/minimatch": {
      "version": "9.0.5",
      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
@@ -16338,6 +16487,19 @@
        "url": "https://github.com/sponsors/isaacs"
      }
    },
+    "node_modules/unplugin/node_modules/picomatch": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
+      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
    "node_modules/update-browserslist-db": {
      "version": "1.1.3",
      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.3.tgz",
@@ -16393,19 +16555,6 @@
        "url": "https://github.com/yeoman/update-notifier?sponsor=1"
      }
    },
-    "node_modules/update-notifier/node_modules/semver": {
-      "version": "7.6.3",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
-      "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
-      "dev": true,
-      "license": "ISC",
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
    "node_modules/uri-js": {
      "version": "4.4.1",
      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
@@ -17225,19 +17374,6 @@
        "url": "https://opencollective.com/eslint"
      }
    },
-    "node_modules/vue-eslint-parser/node_modules/semver": {
-      "version": "7.6.3",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
-      "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
-      "dev": true,
-      "license": "ISC",
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
    "node_modules/vue-i18n": {
      "version": "9.14.3",
      "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-9.14.3.tgz",
@@ -17290,19 +17426,6 @@
        "typescript": ">=5.0.0"
      }
    },
-    "node_modules/vue-tsc/node_modules/semver": {
-      "version": "7.6.3",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
-      "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
-      "dev": true,
-      "license": "ISC",
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
    "node_modules/vuefire": {
      "version": "3.2.1",
      "resolved": "https://registry.npmjs.org/vuefire/-/vuefire-3.2.1.tgz",
@@ -17381,7 +17504,8 @@
      "version": "0.6.2",
      "resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz",
      "integrity": "sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
    },
    "node_modules/websocket-driver": {
      "version": "0.7.4",
@@ -17561,9 +17685,9 @@
      }
    },
    "node_modules/worker-factory": {
-      "version": "7.0.43",
-      "resolved": "https://registry.npmjs.org/worker-factory/-/worker-factory-7.0.43.tgz",
-      "integrity": "sha512-SACVoj3gWKtMVyT9N+VD11Pd/Xe58+ZFfp8b7y/PagOvj3i8lU3Uyj+Lj7WYTmSBvNLC0JFaQkx44E6DhH5+WA==",
+      "version": "7.0.44",
+      "resolved": "https://registry.npmjs.org/worker-factory/-/worker-factory-7.0.44.tgz",
+      "integrity": "sha512-08AuUfWi+KeZI+KC7nU4pU/9tDeAFvE5NSWk+K9nIfuQc6UlOsZtjjeGVYVEn+DEchyXNJ5i10HCn0xRzFXEQA==",
      "license": "MIT",
      "dependencies": {
        "@babel/runtime": "^7.27.6",
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
  "name": "@comfyorg/comfyui-frontend",
  "private": true,
-  "version": "1.25.1",
+  "version": "1.25.2",
  "type": "module",
  "repository": "https://github.com/Comfy-Org/ComfyUI_frontend",
  "homepage": "https://comfy.org",
@@ -40,6 +40,7 @@
    "@types/fs-extra": "^11.0.4",
    "@types/lodash": "^4.17.6",
    "@types/node": "^20.14.8",
+    "@types/semver": "^7.7.0",
    "@types/three": "^0.169.0",
    "@vitejs/plugin-vue": "^5.1.4",
    "@vue/test-utils": "^2.4.6",
@@ -62,8 +63,8 @@
    "tsx": "^4.15.6",
    "typescript": "^5.4.5",
    "typescript-eslint": "^8.0.0",
-    "unplugin-icons": "^0.19.3",
-    "unplugin-vue-components": "^0.27.4",
+    "unplugin-icons": "^0.22.0",
+    "unplugin-vue-components": "^0.28.0",
    "vite": "^5.4.19",
    "vite-plugin-dts": "^4.3.0",
    "vite-plugin-html": "^3.2.2",
@@ -77,7 +78,7 @@
    "@alloc/quick-lru": "^5.2.0",
    "@atlaskit/pragmatic-drag-and-drop": "^1.3.1",
    "@comfyorg/comfyui-electron-types": "^0.4.43",
-    "@comfyorg/litegraph": "^0.16.18",
+    "@comfyorg/litegraph": "^0.16.20",
    "@primevue/forms": "^4.2.5",
    "@primevue/themes": "^4.2.5",
    "@sentry/vue": "^8.48.0",
@@ -107,6 +108,7 @@
    "pinia": "^2.1.7",
    "primeicons": "^7.0.0",
    "primevue": "^4.2.5",
+    "semver": "^7.7.2",
    "three": "^0.170.0",
    "tiptap-markdown": "^0.8.10",
    "vue": "^3.5.13",
--- a/src/App.vue
+++ b/src/App.vue
@@ -15,12 +15,14 @@ import ProgressSpinner from 'primevue/progressspinner'
 import { computed, onMounted } from 'vue'

 import GlobalDialog from '@/components/dialog/GlobalDialog.vue'
+import { useConflictDetection } from '@/composables/useConflictDetection'
 import config from '@/config'
 import { useWorkspaceStore } from '@/stores/workspaceStore'

 import { electronAPI, isElectron } from './utils/envUtil'

 const workspaceStore = useWorkspaceStore()
+const conflictDetection = useConflictDetection()
 const isLoading = computed<boolean>(() => workspaceStore.spinner)
 const handleKey = (e: KeyboardEvent) => {
  workspaceStore.shiftDown = e.shiftKey
@@ -47,5 +49,9 @@ onMounted(() => {
  if (isElectron()) {
    document.addEventListener('contextmenu', showContextMenu)
  }
+
+  // Initialize conflict detection in background
+  // This runs async and doesn't block UI setup
+  void conflictDetection.initializeConflictDetection()
 })
 </script>
--- a/src/assets/icons/README.md
+++ b/src/assets/icons/README.md
@@ -0,0 +1,184 @@
+# ComfyUI Custom Icons Guide
+
+This guide explains how to add and use custom SVG icons in the ComfyUI frontend.
+
+## Overview
+
+ComfyUI uses a hybrid icon system that supports:
+- **PrimeIcons** - Legacy icon library (CSS classes like `pi pi-plus`)
+- **Iconify** - Modern icon system with 200,000+ icons
+- **Custom Icons** - Your own SVG icons
+
+Custom icons are powered by [unplugin-icons](https://github.com/unplugin/unplugin-icons) and integrate seamlessly with Vue's component system.
+
+## Quick Start
+
+### 1. Add Your SVG Icon
+
+Place your SVG file in the `custom/` directory:
+```
+src/assets/icons/custom/
+└── your-icon.svg
+```
+
+### 2. Use in Components
+
+```vue
+<template>
+  <!-- Use as a Vue component -->
+  <i-comfy:your-icon />
+  
+  <!-- In a PrimeVue button -->
+  <Button>
+    <template #icon>
+      <i-comfy:your-icon />
+    </template>
+  </Button>
+</template>
+```
+
+## SVG Requirements
+
+### File Naming
+- Use kebab-case: `workflow-icon.svg`, `node-tree.svg`
+- Avoid special characters and spaces
+- The filename becomes the icon name
+
+### SVG Format
+```xml
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path d="..." />
+</svg>
+```
+
+**Important:**
+- Use `viewBox` for proper scaling (24x24 is standard)
+- Don't include `width` or `height` attributes
+- Use `currentColor` for theme-aware icons
+- Keep SVGs optimized and simple
+
+### Color Theming
+
+For icons that adapt to the current theme, use `currentColor`:
+
+```xml
+<!-- ✅ Good: Uses currentColor -->
+<svg viewBox="0 0 24 24">
+  <path stroke="currentColor" fill="none" d="..." />
+</svg>
+
+<!-- ❌ Bad: Hardcoded colors -->
+<svg viewBox="0 0 24 24">
+  <path stroke="white" fill="black" d="..." />
+</svg>
+```
+
+## Usage Examples
+
+### Basic Icon
+```vue
+<i-comfy:workflow />
+```
+
+### With Classes
+```vue
+<i-comfy:workflow class="text-2xl text-blue-500" />
+```
+
+### In Buttons
+```vue
+<Button severity="secondary" text>
+  <template #icon>
+    <i-comfy:workflow />
+  </template>
+</Button>
+```
+
+### Conditional Icons
+```vue
+<template #icon>
+  <i-comfy:workflow v-if="isWorkflow" />
+  <i-comfy:node v-else />
+</template>
+```
+
+## Technical Details
+
+### How It Works
+
+1. **unplugin-icons** automatically discovers SVG files in `custom/`
+2. During build, SVGs are converted to Vue components
+3. Components are tree-shaken - only used icons are bundled
+4. The `i-` prefix and `comfy:` namespace identify custom icons
+
+### Configuration
+
+The icon system is configured in `vite.config.mts`:
+
+```typescript
+Icons({
+  compiler: 'vue3',
+  customCollections: {
+    'comfy': FileSystemIconLoader('src/assets/icons/custom'),
+  }
+})
+```
+
+### TypeScript Support
+
+Icons are automatically typed. If TypeScript doesn't recognize a new icon:
+1. Restart your dev server
+2. Check that the SVG file is valid
+3. Ensure the filename follows kebab-case convention
+
+## Troubleshooting
+
+### Icon Not Showing
+1. **Check filename**: Must be kebab-case without special characters
+2. **Restart dev server**: Required after adding new icons
+3. **Verify SVG**: Ensure it's valid SVG syntax
+4. **Check console**: Look for Vue component resolution errors
+
+### Icon Wrong Color
+- Replace hardcoded colors with `currentColor`
+- Use `stroke="currentColor"` for outlines
+- Use `fill="currentColor"` for filled shapes
+
+### Icon Wrong Size
+- Remove `width` and `height` from SVG
+- Ensure `viewBox` is present
+- Use CSS classes for sizing: `class="w-6 h-6"`
+
+## Best Practices
+
+1. **Optimize SVGs**: Use tools like [SVGO](https://jakearchibald.github.io/svgomg/) to minimize file size
+2. **Consistent viewBox**: Stick to 24x24 or 16x16 for consistency
+3. **Semantic names**: Use descriptive names like `workflow-duplicate` not `icon1`
+4. **Theme support**: Always use `currentColor` for adaptable icons
+5. **Test both themes**: Verify icons look good in light and dark modes
+
+## Migration from PrimeIcons
+
+When replacing a PrimeIcon with a custom icon:
+
+```vue
+<!-- Before: PrimeIcon -->
+<Button icon="pi pi-box" />
+
+<!-- After: Custom icon -->
+<Button>
+  <template #icon>
+    <i-comfy:workflow />
+  </template>
+</Button>
+```
+
+## Adding Icon Collections
+
+To add an entire icon set from npm:
+
+1. Install the icon package
+2. Configure in `vite.config.mts`
+3. Use with the appropriate prefix
+
+See the [unplugin-icons documentation](https://github.com/unplugin/unplugin-icons) for details.
--- a/src/assets/icons/custom/workflow.svg
+++ b/src/assets/icons/custom/workflow.svg
@@ -0,0 +1,7 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 5V3C14 2.44772 13.5523 2 13 2H11C10.4477 2 10 2.44772 10 3V5C10 5.55228 10.4477 6 11 6H13C13.5523 6 14 5.55228 14 5Z" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>
+<path d="M6 5V3C6 2.44772 5.55228 2 5 2H3C2.44772 2 2 2.44772 2 3V5C2 5.55228 2.44772 6 3 6H5C5.55228 6 6 5.55228 6 5Z" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>
+<path d="M14 13V11C14 10.4477 13.5523 10 13 10H11C10.4477 10 10 10.4477 10 11V13C10 13.5523 10.4477 14 11 14H13C13.5523 14 14 13.5523 14 13Z" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>
+<path d="M10 4H6" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>
+<path d="M10 12H8C5.79086 12 4 10.2091 4 8V6" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>
+</svg>
--- a/src/components/breadcrumb/SubgraphBreadcrumb.vue
+++ b/src/components/breadcrumb/SubgraphBreadcrumb.vue
@@ -42,6 +42,7 @@ import { useOverflowObserver } from '@/composables/element/useOverflowObserver'
 import { useCanvasStore } from '@/stores/graphStore'
 import { useSubgraphNavigationStore } from '@/stores/subgraphNavigationStore'
 import { useWorkflowStore } from '@/stores/workflowStore'
+import { forEachSubgraphNode } from '@/utils/graphTraversalUtil'

 const MIN_WIDTH = 28
 const ITEM_GAP = 8
@@ -71,6 +72,14 @@ const items = computed(() => {
      if (!canvas.graph) throw new TypeError('Canvas has no graph')

      canvas.setGraph(subgraph)
+    },
+    updateTitle: (title: string) => {
+      const rootGraph = useCanvasStore().getCanvas().graph?.rootGraph
+      if (!rootGraph) return
+
+      forEachSubgraphNode(rootGraph, subgraph.id, (node) => {
+        node.title = title
+      })
    }
  }))

--- a/src/components/breadcrumb/SubgraphBreadcrumbItem.vue
+++ b/src/components/breadcrumb/SubgraphBreadcrumbItem.vue
@@ -1,7 +1,10 @@
 <template>
  <a
    ref="wrapperRef"
-    v-tooltip.bottom="item.label"
+    v-tooltip.bottom="{
+      value: item.label,
+      showDelay: 512
+    }"
    href="#"
    class="cursor-pointer p-breadcrumb-item-link"
    :class="{
@@ -78,6 +81,9 @@ const rename = async (
  initialName: string
 ) => {
  if (newName && newName !== initialName) {
+    // Synchronize the node titles with the new name
+    props.item.updateTitle?.(newName)
+
    if (workflowStore.activeSubgraph) {
      workflowStore.activeSubgraph.name = newName
    } else if (workflowStore.activeWorkflow) {
--- a/src/components/common/DotSpinner.vue
+++ b/src/components/common/DotSpinner.vue
@@ -0,0 +1,130 @@
+<template>
+  <div
+    class="inline-flex items-center justify-center"
+    :style="{ width: size + 'px', height: size + 'px' }"
+  >
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      :width="size"
+      :height="size"
+      viewBox="0 0 14 14"
+      fill="none"
+      class="animate-spin"
+      :style="{ animationDuration: duration }"
+    >
+      <g clip-path="url(#clip0_776_9582)">
+        <!-- Top dot -->
+        <path
+          class="dot-animation"
+          style="animation-delay: 0s"
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M7 2.21053C7.61042 2.21053 8.10526 1.71568 8.10526 1.10526C8.10526 0.494843 7.61042 0 7 0C6.38958 0 5.89474 0.494843 5.89474 1.10526C5.89474 1.71568 6.38958 2.21053 7 2.21053Z"
+          :fill="color"
+        />
+        <!-- Left dot -->
+        <path
+          class="dot-animation"
+          style="animation-delay: 0.25s"
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M2.21053 7C2.21053 7.61042 1.71568 8.10526 1.10526 8.10526C0.494843 8.10526 0 7.61042 0 7C0 6.38958 0.494843 5.89474 1.10526 5.89474C1.71568 5.89474 2.21053 6.38958 2.21053 7Z"
+          :fill="color"
+        />
+        <!-- Right dot -->
+        <path
+          class="dot-animation"
+          style="animation-delay: 0.5s"
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M14 7C14 7.61042 13.5052 8.10526 12.8947 8.10526C12.2843 8.10526 11.7895 7.61042 11.7895 7C11.7895 6.38958 12.2843 5.89474 12.8947 5.89474C13.5052 5.89474 14 6.38958 14 7Z"
+          :fill="color"
+        />
+        <!-- Bottom dot -->
+        <path
+          class="dot-animation"
+          style="animation-delay: 0.75s"
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M8.10526 12.8947C8.10526 13.5052 7.61041 14 6.99999 14C6.38957 14 5.89473 13.5052 5.89473 12.8947C5.89473 12.2843 6.38957 11.7895 6.99999 11.7895C7.61041 11.7895 8.10526 12.2843 8.10526 12.8947Z"
+          :fill="color"
+        />
+        <!-- Top-left dot -->
+        <path
+          class="dot-animation"
+          style="animation-delay: 0.125s"
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M2.05039 3.61349C2.48203 4.04513 3.18184 4.04513 3.61347 3.61349C4.0451 3.18186 4.0451 2.48205 3.61347 2.05042C3.18184 1.61878 2.48203 1.61878 2.05039 2.05042C1.61876 2.48205 1.61876 3.18186 2.05039 3.61349Z"
+          :fill="color"
+        />
+        <!-- Bottom-right dot -->
+        <path
+          class="dot-animation"
+          style="animation-delay: 0.625s"
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M11.9496 11.9496C11.518 12.3812 10.8182 12.3812 10.3865 11.9496C9.9549 11.5179 9.9549 10.8181 10.3865 10.3865C10.8182 9.95485 11.518 9.95485 11.9496 10.3865C12.3812 10.8181 12.3812 11.5179 11.9496 11.9496Z"
+          :fill="color"
+        />
+        <!-- Bottom-left dot -->
+        <path
+          class="dot-animation"
+          style="animation-delay: 0.875s"
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M2.05039 11.9496C2.48203 12.3812 3.18184 12.3812 3.61347 11.9496C4.0451 11.5179 4.0451 10.8181 3.61347 10.3865C3.18184 9.95485 2.48203 9.95485 2.05039 10.3865C1.61876 10.8181 1.61876 11.5179 2.05039 11.9496Z"
+          :fill="color"
+        />
+        <!-- Top-right dot -->
+        <path
+          class="dot-animation"
+          style="animation-delay: 0.375s"
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M11.9496 3.61349C11.518 4.04513 10.8182 4.04513 10.3865 3.61349C9.9549 3.18186 9.9549 2.48205 10.3865 2.05042C10.8182 1.61878 11.518 1.61878 11.9496 2.05042C12.3812 2.48205 12.3812 3.18186 11.9496 3.61349Z"
+          :fill="color"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_776_9582">
+          <rect width="14" height="14" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
+
+const { size = 24, duration = '2s' } = defineProps<{
+  size?: number
+  duration?: string
+}>()
+
+const colorPaletteStore = useColorPaletteStore()
+
+const color = computed(() =>
+  colorPaletteStore.completedActivePalette.light_theme ? '#2C2B30' : '#D4D4D4'
+)
+</script>
+
+<style scoped>
+.dot-animation {
+  animation: dot-pulse 1s ease-in-out infinite;
+}
+
+@keyframes dot-pulse {
+  0%,
+  80%,
+  100% {
+    opacity: 0.3;
+  }
+  40% {
+    opacity: 1;
+  }
+}
+</style>
--- a/src/components/dialog/GlobalDialog.vue
+++ b/src/components/dialog/GlobalDialog.vue
@@ -27,7 +27,7 @@
    />

    <template v-if="item.footerComponent" #footer>
-      <component :is="item.footerComponent" />
+      <component :is="item.footerComponent" v-bind="item.footerProps" />
    </template>
  </Dialog>
 </template>
--- a/src/components/dialog/content/LoadWorkflowWarning.vue
+++ b/src/components/dialog/content/LoadWorkflowWarning.vue
@@ -2,7 +2,7 @@
  <NoResultsPlaceholder
    class="pb-0"
    icon="pi pi-exclamation-circle"
-    title="Missing Node Types"
+    title="Some Nodes Are Missing"
    message="When loading the graph, the following node types were not found"
  />
  <MissingCoreNodesMessage :missing-core-nodes="missingCoreNodes" />
@@ -31,7 +31,7 @@
      </div>
    </template>
  </ListBox>
-  <div v-if="isManagerInstalled" class="flex justify-end py-3">
+  <div v-if="!isLegacyManager" class="flex justify-end py-3">
    <PackInstallButton
      :disabled="isLoading || !!error || missingNodePacks.length === 0"
      :node-packs="missingNodePacks"
@@ -45,14 +45,14 @@
 <script setup lang="ts">
 import Button from 'primevue/button'
 import ListBox from 'primevue/listbox'
-import { computed } from 'vue'
+import { computed, onMounted, ref } from 'vue'

 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
 import MissingCoreNodesMessage from '@/components/dialog/content/MissingCoreNodesMessage.vue'
 import PackInstallButton from '@/components/dialog/content/manager/button/PackInstallButton.vue'
 import { useMissingNodes } from '@/composables/nodePack/useMissingNodes'
+import { useComfyManagerService } from '@/services/comfyManagerService'
 import { useDialogService } from '@/services/dialogService'
-import { useAboutPanelStore } from '@/stores/aboutPanelStore'
 import type { MissingNodeType } from '@/types/comfy'
 import { ManagerTab } from '@/types/comfyManagerTypes'

@@ -60,22 +60,11 @@ const props = defineProps<{
  missingNodeTypes: MissingNodeType[]
 }>()

-const aboutPanelStore = useAboutPanelStore()
-
 // Get missing node packs from workflow with loading and error states
 const { missingNodePacks, isLoading, error, missingCoreNodes } =
  useMissingNodes()

-// Determines if ComfyUI-Manager is installed by checking for its badge in the about panel
-// This allows us to conditionally show the Manager button only when the extension is available
-// TODO: Remove this check when Manager functionality is fully migrated into core
-const isManagerInstalled = computed(() => {
-  return aboutPanelStore.badges.some(
-    (badge) =>
-      badge.label.includes('ComfyUI-Manager') ||
-      badge.url.includes('ComfyUI-Manager')
-  )
-})
+const isLegacyManager = ref(false)

 const uniqueNodes = computed(() => {
  const seenTypes = new Set()
@@ -103,6 +92,13 @@ const openManager = () => {
    initialTab: ManagerTab.Missing
  })
 }
+
+onMounted(async () => {
+  const isLegacyResponse = await useComfyManagerService().isLegacyManagerUI()
+  if (isLegacyResponse?.is_legacy_manager_ui) {
+    isLegacyManager.value = true
+  }
+})
 </script>

 <style scoped>
--- a/src/components/dialog/content/ManagerProgressDialogContent.test.ts
+++ b/src/components/dialog/content/ManagerProgressDialogContent.test.ts
@@ -30,11 +30,20 @@ const defaultMockTaskLogs = [

 vi.mock('@/stores/comfyManagerStore', () => ({
  useComfyManagerStore: vi.fn(() => ({
-    taskLogs: [...defaultMockTaskLogs]
+    taskLogs: [...defaultMockTaskLogs],
+    succeededTasksLogs: [...defaultMockTaskLogs],
+    failedTasksLogs: [...defaultMockTaskLogs],
+    managerQueue: { historyCount: 2 },
+    isLoading: false
  })),
  useManagerProgressDialogStore: vi.fn(() => ({
    isExpanded: true,
-    collapse: mockCollapse
+    activeTabIndex: 0,
+    getActiveTabIndex: vi.fn(() => 0),
+    setActiveTabIndex: vi.fn(),
+    toggle: vi.fn(),
+    collapse: mockCollapse,
+    expand: vi.fn()
  }))
 }))

--- a/src/components/dialog/content/ManagerProgressDialogContent.vue
+++ b/src/components/dialog/content/ManagerProgressDialogContent.vue
@@ -18,7 +18,7 @@
        'max-h-0': !isExpanded
      }"
    >
-      <div v-for="(panel, index) in taskPanels" :key="index">
+      <div v-for="(log, index) in focusedLogs" :key="index">
        <Panel
          :expanded="collapsedPanels[index] || false"
          toggleable
@@ -27,7 +27,7 @@
          <template #header>
            <div class="flex items-center justify-between w-full py-2">
              <div class="flex flex-col text-sm font-medium leading-normal">
-                <span>{{ panel.taskName }}</span>
+                <span>{{ log.taskName }}</span>
                <span class="text-muted">
                  {{
                    isInProgress(index)
@@ -52,24 +52,24 @@
          </template>
          <div
            :ref="
-              index === taskPanels.length - 1
+              index === focusedLogs.length - 1
                ? (el) => (lastPanelRef = el as HTMLElement)
                : undefined
            "
            class="overflow-y-auto h-64 rounded-lg bg-black"
            :class="{
-              'h-64': index !== taskPanels.length - 1,
-              'flex-grow': index === taskPanels.length - 1
+              'h-64': index !== focusedLogs.length - 1,
+              'flex-grow': index === focusedLogs.length - 1
            }"
            @scroll="handleScroll"
          >
            <div class="h-full">
              <div
-                v-for="(log, logIndex) in panel.logs"
+                v-for="(logLine, logIndex) in log.logs"
                :key="logIndex"
                class="text-neutral-400 dark-theme:text-muted"
              >
-                <pre class="whitespace-pre-wrap break-words">{{ log }}</pre>
+                <pre class="whitespace-pre-wrap break-words">{{ logLine }}</pre>
              </div>
            </div>
          </div>
@@ -90,17 +90,23 @@ import {
  useManagerProgressDialogStore
 } from '@/stores/comfyManagerStore'

-const { taskLogs } = useComfyManagerStore()
+const comfyManagerStore = useComfyManagerStore()
 const progressDialogContent = useManagerProgressDialogStore()
-const managerStore = useComfyManagerStore()

 const isInProgress = (index: number) =>
-  index === taskPanels.value.length - 1 && managerStore.uncompletedCount > 0
+  index === comfyManagerStore.managerQueue.historyCount - 1 &&
+  comfyManagerStore.isLoading

-const taskPanels = computed(() => taskLogs)
 const isExpanded = computed(() => progressDialogContent.isExpanded)
 const isCollapsed = computed(() => !isExpanded.value)

+const focusedLogs = computed(() => {
+  if (progressDialogContent.getActiveTabIndex() === 0) {
+    return comfyManagerStore.succeededTasksLogs
+  }
+  return comfyManagerStore.failedTasksLogs
+})
+
 const collapsedPanels = ref<Record<number, boolean>>({})
 const togglePanel = (index: number) => {
  collapsedPanels.value[index] = !collapsedPanels.value[index]
@@ -115,7 +121,7 @@ const { y: scrollY } = useScroll(sectionsContainerRef, {

 const lastPanelRef = ref<HTMLElement | null>(null)
 const isUserScrolling = ref(false)
-const lastPanelLogs = computed(() => taskPanels.value?.at(-1)?.logs)
+const lastPanelLogs = computed(() => focusedLogs.value?.at(-1)?.logs)

 const isAtBottom = (el: HTMLElement | null) => {
  if (!el) return false
--- a/src/components/dialog/content/manager/ManagerDialogContent.vue
+++ b/src/components/dialog/content/manager/ManagerDialogContent.vue
@@ -26,6 +26,35 @@
        }"
      >
        <div class="px-6 flex flex-col h-full">
+          <!-- Conflict Warning Banner -->
+          <div
+            v-if="shouldShowManagerBanner"
+            class="bg-yellow-600 bg-opacity-20 border border-yellow-400 rounded-lg p-4 mt-3 mb-4 flex items-center gap-6 relative"
+          >
+            <i class="pi pi-exclamation-triangle text-yellow-600 text-lg"></i>
+            <div class="flex flex-col gap-2 flex-1">
+              <p class="text-sm font-bold m-0">
+                {{ $t('manager.conflicts.warningBanner.title') }}
+              </p>
+              <p class="text-xs m-0">
+                {{ $t('manager.conflicts.warningBanner.message') }}
+              </p>
+              <p
+                class="text-sm font-bold m-0 cursor-pointer"
+                @click="onClickWarningLink"
+              >
+                {{ $t('manager.conflicts.warningBanner.button') }}
+              </p>
+            </div>
+            <button
+              type="button"
+              class="absolute top-2 right-2 w-6 h-6 border-none outline-none bg-transparent flex items-center justify-center text-yellow-600 rounded transition-colors"
+              :aria-label="$t('g.close')"
+              @click="dismissWarningBanner"
+            >
+              <i class="pi pi-times text-sm"></i>
+            </button>
+          </div>
          <RegistrySearchBar
            v-model:searchQuery="searchQuery"
            v-model:searchMode="searchMode"
@@ -34,6 +63,7 @@
            :suggestions="suggestions"
            :is-missing-tab="isMissingTab"
            :sort-options="sortOptions"
+            :is-update-available-tab="isUpdateAvailableTab"
          />
          <div class="flex-1 overflow-auto">
            <div
@@ -69,7 +99,9 @@
                    :is-selected="
                      selectedNodePacks.some((pack) => pack.id === item.id)
                    "
-                    @click.stop="(event) => selectNodePack(item, event)"
+                    @click.stop="
+                      (event: MouseEvent) => selectNodePack(item, event)
+                    "
                  />
                </template>
              </VirtualGrid>
@@ -101,7 +133,8 @@ import {
  onMounted,
  onUnmounted,
  ref,
-  watch
+  watch,
+  watchEffect
 } from 'vue'
 import { useI18n } from 'vue-i18n'

@@ -119,6 +152,7 @@ import { useManagerStatePersistence } from '@/composables/manager/useManagerStat
 import { useInstalledPacks } from '@/composables/nodePack/useInstalledPacks'
 import { usePackUpdateStatus } from '@/composables/nodePack/usePackUpdateStatus'
 import { useWorkflowPacks } from '@/composables/nodePack/useWorkflowPacks'
+import { useConflictAcknowledgment } from '@/composables/useConflictAcknowledgment'
 import { useRegistrySearch } from '@/composables/useRegistrySearch'
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
 import { useComfyRegistryStore } from '@/stores/comfyRegistryStore'
@@ -133,6 +167,7 @@ const { initialTab } = defineProps<{
 const { t } = useI18n()
 const comfyManagerStore = useComfyManagerStore()
 const { getPackById } = useComfyRegistryStore()
+const conflictAcknowledgment = useConflictAcknowledgment()
 const persistedState = useManagerStatePersistence()
 const initialState = persistedState.loadStoredState()

@@ -149,6 +184,13 @@ const {
  toggle: toggleSideNav
 } = useResponsiveCollapse()

+// Use conflict acknowledgment state from composable
+const {
+  shouldShowManagerBanner,
+  dismissWarningBanner,
+  dismissRedDotNotification
+} = conflictAcknowledgment
+
 const tabs = ref<TabItem[]>([
  { id: ManagerTab.All, label: t('g.all'), icon: 'pi-list' },
  { id: ManagerTab.Installed, label: t('g.installed'), icon: 'pi-box' },
@@ -312,6 +354,13 @@ watch([isAllTab, searchResults], () => {
  displayPacks.value = searchResults.value
 })

+const onClickWarningLink = () => {
+  window.open(
+    'https://docs.comfy.org/troubleshooting/custom-node-issues',
+    '_blank'
+  )
+}
+
 const onResultsChange = () => {
  switch (selectedTab.value?.id) {
    case ManagerTab.Installed:
@@ -440,6 +489,7 @@ whenever(selectedNodePack, async () => {
  if (hasMultipleSelections.value) return
  // Only fetch if we haven't already for this pack
  if (lastFetchedPackId.value === pack.id) return
+
  const data = await getPackById.call(pack.id)
  // If selected node hasn't changed since request, merge registry & Algolia data
  if (data?.id === pack.id) {
@@ -472,6 +522,10 @@ watch([searchQuery, selectedTab], () => {
  }
 })

+watchEffect(() => {
+  dismissRedDotNotification()
+})
+
 onBeforeUnmount(() => {
  persistedState.persistState({
    selectedTabId: selectedTab.value?.id,
--- a/src/components/dialog/content/manager/ManagerHeader.test.ts
+++ b/src/components/dialog/content/manager/ManagerHeader.test.ts
@@ -0,0 +1,82 @@
+import { mount } from '@vue/test-utils'
+import { createPinia } from 'pinia'
+import PrimeVue from 'primevue/config'
+import Tag from 'primevue/tag'
+import Tooltip from 'primevue/tooltip'
+import { describe, expect, it } from 'vitest'
+import { createI18n } from 'vue-i18n'
+
+import enMessages from '@/locales/en/main.json'
+
+import ManagerHeader from './ManagerHeader.vue'
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: {
+    en: enMessages
+  }
+})
+
+describe('ManagerHeader', () => {
+  const createWrapper = () => {
+    return mount(ManagerHeader, {
+      global: {
+        plugins: [createPinia(), PrimeVue, i18n],
+        directives: {
+          tooltip: Tooltip
+        },
+        components: {
+          Tag
+        }
+      }
+    })
+  }
+
+  it('renders the component title', () => {
+    const wrapper = createWrapper()
+
+    expect(wrapper.find('h2').text()).toBe(
+      enMessages.manager.discoverCommunityContent
+    )
+  })
+
+  it('displays the legacy manager UI tag', () => {
+    const wrapper = createWrapper()
+
+    const tag = wrapper.find('[data-pc-name="tag"]')
+    expect(tag.exists()).toBe(true)
+    expect(tag.text()).toContain(enMessages.manager.legacyManagerUI)
+  })
+
+  it('applies info severity to the tag', () => {
+    const wrapper = createWrapper()
+
+    const tag = wrapper.find('[data-pc-name="tag"]')
+    expect(tag.classes()).toContain('p-tag-info')
+  })
+
+  it('displays info icon in the tag', () => {
+    const wrapper = createWrapper()
+
+    const icon = wrapper.find('.pi-info-circle')
+    expect(icon.exists()).toBe(true)
+  })
+
+  it('has cursor-help class on the tag', () => {
+    const wrapper = createWrapper()
+
+    const tag = wrapper.find('[data-pc-name="tag"]')
+    expect(tag.classes()).toContain('cursor-help')
+  })
+
+  it('has proper structure with flex container', () => {
+    const wrapper = createWrapper()
+
+    const flexContainer = wrapper.find('.flex.justify-end.ml-auto.pr-4')
+    expect(flexContainer.exists()).toBe(true)
+
+    const tag = flexContainer.find('[data-pc-name="tag"]')
+    expect(tag.exists()).toBe(true)
+  })
+})
--- a/src/components/dialog/content/manager/ManagerHeader.vue
+++ b/src/components/dialog/content/manager/ManagerHeader.vue
@@ -4,6 +4,22 @@
      <h2 class="text-lg font-normal text-left">
        {{ $t('manager.discoverCommunityContent') }}
      </h2>
+      <div class="flex justify-end ml-auto pr-4">
+        <Tag
+          v-tooltip.left="$t('manager.legacyManagerUIDescription')"
+          severity="info"
+          icon="pi pi-info-circle"
+          :value="$t('manager.legacyManagerUI')"
+          class="cursor-help"
+          :pt="{
+            root: { class: 'text-xs' }
+          }"
+        />
+      </div>
    </div>
  </div>
 </template>
+
+<script setup lang="ts">
+import Tag from 'primevue/tag'
+</script>
--- a/src/components/dialog/content/manager/NodeConflictDialogContent.vue
+++ b/src/components/dialog/content/manager/NodeConflictDialogContent.vue
@@ -0,0 +1,231 @@
+<template>
+  <div class="w-[552px] flex flex-col">
+    <ContentDivider :width="1" />
+    <div class="px-4 py-6 w-full h-full flex flex-col gap-2">
+      <!-- Description -->
+      <div v-if="showAfterWhatsNew">
+        <p
+          class="text-sm leading-4 text-neutral-800 dark-theme:text-white m-0 mb-4"
+        >
+          {{ $t('manager.conflicts.description') }}
+          <br /><br />
+          {{ $t('manager.conflicts.info') }}
+        </p>
+      </div>
+
+      <!-- Import Failed List Wrapper -->
+      <div
+        v-if="importFailedConflicts.length > 0"
+        class="w-full flex flex-col bg-neutral-200 dark-theme:bg-black min-h-8 rounded-lg"
+      >
+        <div
+          class="w-full h-8 flex items-center justify-between gap-2 pl-4"
+          @click="toggleImportFailedPanel"
+        >
+          <div class="flex-1 flex">
+            <span
+              class="text-xs font-bold text-yellow-600 dark-theme:text-yellow-400 mr-2"
+              >{{ importFailedConflicts.length }}</span
+            >
+            <span
+              class="text-xs font-bold text-neutral-600 dark-theme:text-white"
+              >{{ $t('manager.conflicts.importFailedExtensions') }}</span
+            >
+          </div>
+          <div>
+            <Button
+              :icon="
+                importFailedExpanded
+                  ? 'pi pi-chevron-down text-xs'
+                  : 'pi pi-chevron-right text-xs'
+              "
+              text
+              class="text-neutral-600 dark-theme:text-neutral-300 !bg-transparent"
+            />
+          </div>
+        </div>
+        <!-- Import failed list -->
+        <div
+          v-if="importFailedExpanded"
+          class="py-2 px-4 flex flex-col gap-2.5 max-h-[142px] overflow-y-auto scrollbar-hide"
+        >
+          <div
+            v-for="(packageName, i) in importFailedConflicts"
+            :key="i"
+            class="flex items-center justify-between h-6 px-4 flex-shrink-0 conflict-list-item"
+          >
+            <span class="text-xs text-neutral-600 dark-theme:text-neutral-300">
+              {{ packageName }}
+            </span>
+            <span class="pi pi-info-circle text-sm"></span>
+          </div>
+        </div>
+      </div>
+      <!-- Conflict List Wrapper -->
+      <div
+        class="w-full flex flex-col bg-neutral-200 dark-theme:bg-black min-h-8 rounded-lg"
+      >
+        <div
+          class="w-full h-8 flex items-center justify-between gap-2 pl-4"
+          @click="toggleConflictsPanel"
+        >
+          <div class="flex-1 flex">
+            <span
+              class="text-xs font-bold text-yellow-600 dark-theme:text-yellow-400 mr-2"
+              >{{ allConflictDetails.length }}</span
+            >
+            <span
+              class="text-xs font-bold text-neutral-600 dark-theme:text-white"
+              >{{ $t('manager.conflicts.conflicts') }}</span
+            >
+          </div>
+          <div>
+            <Button
+              :icon="
+                conflictsExpanded
+                  ? 'pi pi-chevron-down text-xs'
+                  : 'pi pi-chevron-right text-xs'
+              "
+              text
+              class="text-neutral-600 dark-theme:text-neutral-300 !bg-transparent"
+            />
+          </div>
+        </div>
+        <!-- Conflicts list -->
+        <div
+          v-if="conflictsExpanded"
+          class="py-2 px-4 flex flex-col gap-2.5 max-h-[142px] overflow-y-auto scrollbar-hide"
+        >
+          <div
+            v-for="(conflict, i) in allConflictDetails"
+            :key="i"
+            class="flex items-center justify-between h-6 px-4 flex-shrink-0 conflict-list-item"
+          >
+            <span
+              class="text-xs text-neutral-600 dark-theme:text-neutral-300"
+              >{{ getConflictMessage(conflict, t) }}</span
+            >
+            <span class="pi pi-info-circle text-sm"></span>
+          </div>
+        </div>
+      </div>
+      <!-- Extension List Wrapper -->
+      <div
+        class="w-full flex flex-col bg-neutral-200 dark-theme:bg-black min-h-8 rounded-lg"
+      >
+        <div
+          class="w-full h-8 flex items-center justify-between gap-2 pl-4"
+          @click="toggleExtensionsPanel"
+        >
+          <div class="flex-1 flex">
+            <span
+              class="text-xs font-bold text-yellow-600 dark-theme:text-yellow-400 mr-2"
+              >{{ conflictData.length }}</span
+            >
+            <span
+              class="text-xs font-bold text-neutral-600 dark-theme:text-white"
+              >{{ $t('manager.conflicts.extensionAtRisk') }}</span
+            >
+          </div>
+          <div>
+            <Button
+              :icon="
+                extensionsExpanded
+                  ? 'pi pi-chevron-down text-xs'
+                  : 'pi pi-chevron-right text-xs'
+              "
+              text
+              class="text-neutral-600 dark-theme:text-neutral-300 !bg-transparent"
+            />
+          </div>
+        </div>
+        <!-- Extension list -->
+        <div
+          v-if="extensionsExpanded"
+          class="py-2 px-4 flex flex-col gap-2.5 max-h-[142px] overflow-y-auto scrollbar-hide"
+        >
+          <div
+            v-for="conflictResult in conflictData"
+            :key="conflictResult.package_id"
+            class="flex items-center justify-between h-6 px-4 flex-shrink-0 conflict-list-item"
+          >
+            <span class="text-xs text-neutral-600 dark-theme:text-neutral-300">
+              {{ conflictResult.package_name }}
+            </span>
+            <span class="pi pi-info-circle text-sm"></span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <ContentDivider :width="1" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { filter, flatMap, map, some } from 'lodash'
+import Button from 'primevue/button'
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import ContentDivider from '@/components/common/ContentDivider.vue'
+import { useConflictDetection } from '@/composables/useConflictDetection'
+import { getConflictMessage } from '@/utils/conflictMessageUtil'
+
+interface Props {
+  showAfterWhatsNew?: boolean
+}
+
+const { showAfterWhatsNew } = withDefaults(defineProps<Props>(), {
+  showAfterWhatsNew: false
+})
+
+const { t } = useI18n()
+const { conflictedPackages } = useConflictDetection()
+
+const conflictsExpanded = ref<boolean>(false)
+const extensionsExpanded = ref<boolean>(false)
+const importFailedExpanded = ref<boolean>(false)
+
+const conflictData = computed(() => conflictedPackages.value)
+
+const allConflictDetails = computed(() => {
+  const allConflicts = flatMap(conflictData.value, (result) => result.conflicts)
+  return filter(allConflicts, (conflict) => conflict.type !== 'import_failed')
+})
+
+const packagesWithImportFailed = computed(() => {
+  return filter(conflictData.value, (result) =>
+    some(result.conflicts, (conflict) => conflict.type === 'import_failed')
+  )
+})
+
+const importFailedConflicts = computed(() => {
+  return map(
+    packagesWithImportFailed.value,
+    (result) => result.package_name || result.package_id
+  )
+})
+
+const toggleImportFailedPanel = () => {
+  importFailedExpanded.value = !importFailedExpanded.value
+  conflictsExpanded.value = false
+  extensionsExpanded.value = false
+}
+
+const toggleConflictsPanel = () => {
+  conflictsExpanded.value = !conflictsExpanded.value
+  extensionsExpanded.value = false
+  importFailedExpanded.value = false
+}
+
+const toggleExtensionsPanel = () => {
+  extensionsExpanded.value = !extensionsExpanded.value
+  conflictsExpanded.value = false
+  importFailedExpanded.value = false
+}
+</script>
+<style scoped>
+.conflict-list-item:hover {
+  background-color: rgba(0, 122, 255, 0.2);
+}
+</style>
--- a/src/components/dialog/content/manager/NodeConflictFooter.vue
+++ b/src/components/dialog/content/manager/NodeConflictFooter.vue
@@ -0,0 +1,59 @@
+<template>
+  <div class="flex items-center justify-between w-full px-3 py-4">
+    <div class="w-full flex items-center justify-between gap-2 pr-1">
+      <Button
+        :label="$t('manager.conflicts.conflictInfoTitle')"
+        text
+        severity="secondary"
+        size="small"
+        icon="pi pi-info-circle"
+        :pt="{
+          label: { class: 'text-sm' }
+        }"
+        @click="handleConflictInfoClick"
+      />
+      <Button
+        v-if="props.buttonText"
+        :label="props.buttonText"
+        severity="secondary"
+        size="small"
+        @click="handleButtonClick"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+
+import { useDialogStore } from '@/stores/dialogStore'
+
+interface Props {
+  buttonText?: string
+  onButtonClick?: () => void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  buttonText: undefined,
+  onButtonClick: undefined
+})
+
+const dialogStore = useDialogStore()
+
+const handleConflictInfoClick = () => {
+  window.open(
+    'https://docs.comfy.org/troubleshooting/custom-node-issues',
+    '_blank'
+  )
+}
+
+const handleButtonClick = () => {
+  // Close the conflict dialog
+  dialogStore.closeDialog({ key: 'global-node-conflict' })
+
+  // Execute the custom button action if provided
+  if (props.onButtonClick) {
+    props.onButtonClick()
+  }
+}
+</script>
--- a/src/components/dialog/content/manager/NodeConflictHeader.vue
+++ b/src/components/dialog/content/manager/NodeConflictHeader.vue
@@ -0,0 +1,12 @@
+<template>
+  <div class="h-12 flex items-center justify-between w-full pl-6">
+    <div class="flex items-center gap-2">
+      <!-- Warning Icon -->
+      <i class="pi pi-exclamation-triangle text-lg"></i>
+      <!-- Title -->
+      <p class="text-base font-bold">
+        {{ $t('manager.conflicts.title') }}
+      </p>
+    </div>
+  </div>
+</template>
--- a/src/components/dialog/content/manager/PackStatusMessage.vue
+++ b/src/components/dialog/content/manager/PackStatusMessage.vue
@@ -17,9 +17,10 @@

 <script setup lang="ts">
 import Message from 'primevue/message'
-import { computed } from 'vue'
+import { computed, inject } from 'vue'

 import { components } from '@/types/comfyRegistryTypes'
+import { ImportFailedKey } from '@/types/importFailedTypes'

 type PackVersionStatus = components['schemas']['NodeVersionStatus']
 type PackStatus = components['schemas']['NodeStatus']
@@ -32,10 +33,15 @@ type StatusProps = {
  severity: MessageSeverity
 }

-const { statusType } = defineProps<{
+const { statusType, hasCompatibilityIssues } = defineProps<{
  statusType: Status
+  hasCompatibilityIssues?: boolean
 }>()

+// Inject import failed context from parent
+const importFailedContext = inject(ImportFailedKey)
+const importFailed = importFailedContext?.importFailed
+
 const statusPropsMap: Record<Status, StatusProps> = {
  NodeStatusActive: {
    label: 'active',
@@ -71,10 +77,14 @@ const statusPropsMap: Record<Status, StatusProps> = {
  }
 }

-const statusLabel = computed(
-  () => statusPropsMap[statusType]?.label || 'unknown'
-)
-const statusSeverity = computed(
-  () => statusPropsMap[statusType]?.severity || 'secondary'
-)
+const statusLabel = computed(() => {
+  if (importFailed?.value) return 'importFailed'
+  if (hasCompatibilityIssues) return 'conflicting'
+  return statusPropsMap[statusType]?.label || 'unknown'
+})
+
+const statusSeverity = computed(() => {
+  if (hasCompatibilityIssues || importFailed?.value) return 'error'
+  return statusPropsMap[statusType]?.severity || 'secondary'
+})
 </script>
--- a/src/components/dialog/content/manager/PackVersionBadge.test.ts
+++ b/src/components/dialog/content/manager/PackVersionBadge.test.ts
@@ -6,11 +6,18 @@ import { nextTick } from 'vue'
 import { createI18n } from 'vue-i18n'

 import enMessages from '@/locales/en/main.json'
-import { SelectedVersion } from '@/types/comfyManagerTypes'

 import PackVersionBadge from './PackVersionBadge.vue'
 import PackVersionSelectorPopover from './PackVersionSelectorPopover.vue'

+// Mock config to prevent __COMFYUI_FRONTEND_VERSION__ error
+vi.mock('@/config', () => ({
+  default: {
+    app_title: 'ComfyUI',
+    app_version: '1.0.0'
+  }
+}))
+
 const mockNodePack = {
  id: 'test-pack',
  name: 'Test Pack',
@@ -120,7 +127,7 @@ describe('PackVersionBadge', () => {

    const badge = wrapper.find('[role="button"]')
    expect(badge.exists()).toBe(true)
-    expect(badge.find('span').text()).toBe(SelectedVersion.NIGHTLY)
+    expect(badge.find('span').text()).toBe('nightly')
  })

  it('falls back to NIGHTLY when nodePack.id is missing', () => {
@@ -134,7 +141,7 @@ describe('PackVersionBadge', () => {

    const badge = wrapper.find('[role="button"]')
    expect(badge.exists()).toBe(true)
-    expect(badge.find('span').text()).toBe(SelectedVersion.NIGHTLY)
+    expect(badge.find('span').text()).toBe('nightly')
  })

  it('toggles the popover when button is clicked', async () => {
--- a/src/components/dialog/content/manager/PackVersionBadge.vue
+++ b/src/components/dialog/content/manager/PackVersionBadge.vue
@@ -1,8 +1,8 @@
 <template>
  <div>
    <div
-      class="inline-flex items-center gap-1 rounded-2xl text-xs cursor-pointer px-2 py-1"
-      :class="{ 'bg-gray-100 dark-theme:bg-neutral-700': fill }"
+      class="inline-flex items-center gap-1 rounded-2xl text-xs cursor-pointer py-1"
+      :class="{ 'bg-gray-100 dark-theme:bg-neutral-700 px-1.5': fill }"
      aria-haspopup="true"
      role="button"
      tabindex="0"
@@ -12,8 +12,7 @@
    >
      <i
        v-if="isUpdateAvailable"
-        class="pi pi-arrow-circle-up text-blue-600"
-        style="font-size: 8px"
+        class="pi pi-arrow-circle-up text-blue-600 text-xs"
      />
      <span>{{ installedVersion }}</span>
      <i class="pi pi-chevron-right" style="font-size: 8px" />
@@ -22,7 +21,7 @@
    <Popover
      ref="popoverRef"
      :pt="{
-        content: { class: 'px-0' }
+        content: { class: 'p-0 shadow-lg' }
      }"
    >
      <PackVersionSelectorPopover
@@ -42,8 +41,7 @@ import { computed, ref, watch } from 'vue'
 import PackVersionSelectorPopover from '@/components/dialog/content/manager/PackVersionSelectorPopover.vue'
 import { usePackUpdateStatus } from '@/composables/nodePack/usePackUpdateStatus'
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
-import { SelectedVersion } from '@/types/comfyManagerTypes'
-import { components } from '@/types/comfyRegistryTypes'
+import type { components } from '@/types/comfyRegistryTypes'
 import { isSemVer } from '@/utils/formatUtil'

 const TRUNCATED_HASH_LENGTH = 7
@@ -64,11 +62,11 @@ const popoverRef = ref()
 const managerStore = useComfyManagerStore()

 const installedVersion = computed(() => {
-  if (!nodePack.id) return SelectedVersion.NIGHTLY
+  if (!nodePack.id) return 'nightly'
  const version =
    managerStore.installedPacks[nodePack.id]?.ver ??
    nodePack.latest_version?.version ??
-    SelectedVersion.NIGHTLY
+    'nightly'

  // If Git hash, truncate to 7 characters
  return isSemVer(version) ? version : version.slice(0, TRUNCATED_HASH_LENGTH)
--- a/src/components/dialog/content/manager/PackVersionSelectorPopover.test.ts
+++ b/src/components/dialog/content/manager/PackVersionSelectorPopover.test.ts
@@ -3,18 +3,32 @@ import { createPinia } from 'pinia'
 import Button from 'primevue/button'
 import PrimeVue from 'primevue/config'
 import Listbox from 'primevue/listbox'
+import Select from 'primevue/select'
+import Tooltip from 'primevue/tooltip'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
 import { createI18n } from 'vue-i18n'

+import VerifiedIcon from '@/components/icons/VerifiedIcon.vue'
 import enMessages from '@/locales/en/main.json'
-import { SelectedVersion } from '@/types/comfyManagerTypes'
+
+// SelectedVersion is now using direct strings instead of enum

 import PackVersionSelectorPopover from './PackVersionSelectorPopover.vue'

 // Default mock versions for reference
 const defaultMockVersions = [
-  { version: '1.0.0', createdAt: '2023-01-01' },
+  {
+    version: '1.0.0',
+    createdAt: '2023-01-01',
+    supported_os: ['windows', 'linux'],
+    supported_accelerators: ['CPU'],
+    supported_comfyui_version: '>=0.1.0',
+    supported_comfyui_frontend_version: '>=1.0.0',
+    supported_python_version: '>=3.8',
+    is_banned: false,
+    has_registry_data: true
+  },
  { version: '0.9.0', createdAt: '2022-12-01' },
  { version: '0.8.0', createdAt: '2022-11-01' }
 ]
@@ -22,13 +36,24 @@ const defaultMockVersions = [
 const mockNodePack = {
  id: 'test-pack',
  name: 'Test Pack',
-  latest_version: { version: '1.0.0' },
-  repository: 'https://github.com/user/repo'
+  latest_version: {
+    version: '1.0.0',
+    supported_os: ['windows', 'linux'],
+    supported_accelerators: ['CPU'],
+    supported_comfyui_version: '>=0.1.0',
+    supported_comfyui_frontend_version: '>=1.0.0',
+    supported_python_version: '>=3.8',
+    is_banned: false,
+    has_registry_data: true
+  },
+  repository: 'https://github.com/user/repo',
+  has_registry_data: true
 }

 // Create mock functions
 const mockGetPackVersions = vi.fn()
 const mockInstallPack = vi.fn().mockResolvedValue(undefined)
+const mockCheckNodeCompatibility = vi.fn()

 // Mock the registry service
 vi.mock('@/services/comfyRegistryService', () => ({
@@ -49,6 +74,13 @@ vi.mock('@/stores/comfyManagerStore', () => ({
  }))
 }))

+// Mock the conflict detection composable
+vi.mock('@/composables/useConflictDetection', () => ({
+  useConflictDetection: vi.fn(() => ({
+    checkNodeCompatibility: mockCheckNodeCompatibility
+  }))
+}))
+
 const waitForPromises = async () => {
  await new Promise((resolve) => setTimeout(resolve, 16))
  await nextTick()
@@ -59,6 +91,9 @@ describe('PackVersionSelectorPopover', () => {
    vi.clearAllMocks()
    mockGetPackVersions.mockReset()
    mockInstallPack.mockReset().mockResolvedValue(undefined)
+    mockCheckNodeCompatibility
+      .mockReset()
+      .mockReturnValue({ hasConflict: false, conflicts: [] })
  })

  const mountComponent = ({
@@ -78,7 +113,12 @@ describe('PackVersionSelectorPopover', () => {
      global: {
        plugins: [PrimeVue, createPinia(), i18n],
        components: {
-          Listbox
+          Listbox,
+          VerifiedIcon,
+          Select
+        },
+        directives: {
+          tooltip: Tooltip
        }
      }
    })
@@ -120,14 +160,15 @@ describe('PackVersionSelectorPopover', () => {

    const options = listbox.props('options')!
    // Check that we have both special options and version options
-    expect(options.length).toBe(defaultMockVersions.length + 2) // 2 special options + version options
+    // Latest version (1.0.0) should be excluded from the version list to avoid duplication
+    expect(options.length).toBe(defaultMockVersions.length + 1) // 2 special options + version options minus 1 duplicate

    // Check that special options exist
-    expect(options.some((o) => o.value === SelectedVersion.NIGHTLY)).toBe(true)
-    expect(options.some((o) => o.value === SelectedVersion.LATEST)).toBe(true)
+    expect(options.some((o) => o.value === 'nightly')).toBe(true)
+    expect(options.some((o) => o.value === 'latest')).toBe(true)

-    // Check that version options exist
-    expect(options.some((o) => o.value === '1.0.0')).toBe(true)
+    // Check that version options exist (excluding latest version 1.0.0)
+    expect(options.some((o) => o.value === '1.0.0')).toBe(false) // Should be excluded as it's the latest
    expect(options.some((o) => o.value === '0.9.0')).toBe(true)
    expect(options.some((o) => o.value === '0.8.0')).toBe(true)
  })
@@ -304,7 +345,7 @@ describe('PackVersionSelectorPopover', () => {
      await waitForPromises()
      const listbox = wrapper.findComponent(Listbox)
      expect(listbox.exists()).toBe(true)
-      expect(listbox.props('modelValue')).toBe(SelectedVersion.NIGHTLY)
+      expect(listbox.props('modelValue')).toBe('nightly')
    })

    it('defaults to nightly when publisher name is "Unclaimed"', async () => {
@@ -325,7 +366,343 @@ describe('PackVersionSelectorPopover', () => {
      await waitForPromises()
      const listbox = wrapper.findComponent(Listbox)
      expect(listbox.exists()).toBe(true)
-      expect(listbox.props('modelValue')).toBe(SelectedVersion.NIGHTLY)
+      expect(listbox.props('modelValue')).toBe('nightly')
+    })
+  })
+
+  describe('version compatibility checking', () => {
+    it('shows warning icon for incompatible versions', async () => {
+      // Set up the mock for versions
+      mockGetPackVersions.mockResolvedValueOnce(defaultMockVersions)
+
+      // Mock compatibility check to return conflict for specific version
+      mockCheckNodeCompatibility.mockImplementation((versionData) => {
+        if (versionData.supported_os?.includes('linux')) {
+          return {
+            hasConflict: true,
+            conflicts: [
+              {
+                type: 'os',
+                current_value: 'windows',
+                required_value: 'linux'
+              }
+            ]
+          }
+        }
+        return { hasConflict: false, conflicts: [] }
+      })
+
+      const nodePackWithCompatibility = {
+        ...mockNodePack,
+        supported_os: ['linux'],
+        supported_accelerators: ['CUDA']
+      }
+
+      const wrapper = mountComponent({
+        props: { nodePack: nodePackWithCompatibility }
+      })
+      await waitForPromises()
+
+      // Check that compatibility checking function was called
+      expect(mockCheckNodeCompatibility).toHaveBeenCalled()
+
+      // The warning icon should be shown for incompatible versions
+      const warningIcons = wrapper.findAll('.pi-exclamation-triangle')
+      expect(warningIcons.length).toBeGreaterThan(0)
+    })
+
+    it('shows verified icon for compatible versions', async () => {
+      // Set up the mock for versions
+      mockGetPackVersions.mockResolvedValueOnce(defaultMockVersions)
+
+      // Mock compatibility check to return no conflicts
+      mockCheckNodeCompatibility.mockReturnValue({
+        hasConflict: false,
+        conflicts: []
+      })
+
+      const wrapper = mountComponent()
+      await waitForPromises()
+
+      // Check that compatibility checking function was called
+      expect(mockCheckNodeCompatibility).toHaveBeenCalled()
+
+      // The verified icon should be shown for compatible versions
+      // Look for the VerifiedIcon component or SVG elements
+      const verifiedIcons = wrapper.findAll('svg')
+      expect(verifiedIcons.length).toBeGreaterThan(0)
+    })
+
+    it('calls checkVersionCompatibility with correct version data', async () => {
+      // Set up the mock for versions with specific supported data
+      const versionsWithCompatibility = [
+        {
+          version: '1.0.0',
+          supported_os: ['windows', 'linux'],
+          supported_accelerators: ['CUDA', 'CPU'],
+          supported_comfyui_version: '>=0.1.0',
+          supported_comfyui_frontend_version: '>=1.0.0'
+        }
+      ]
+      mockGetPackVersions.mockResolvedValueOnce(versionsWithCompatibility)
+
+      const nodePackWithCompatibility = {
+        ...mockNodePack,
+        supported_os: ['windows'],
+        supported_accelerators: ['CPU'],
+        supported_comfyui_version: '>=0.1.0',
+        supported_comfyui_frontend_version: '>=1.0.0',
+        latest_version: {
+          version: '1.0.0',
+          supported_os: ['windows', 'linux'],
+          supported_accelerators: ['CPU'], // latest_version data takes precedence
+          supported_comfyui_version: '>=0.1.0',
+          supported_comfyui_frontend_version: '>=1.0.0',
+          supported_python_version: '>=3.8',
+          is_banned: false,
+          has_registry_data: true
+        }
+      }
+
+      const wrapper = mountComponent({
+        props: { nodePack: nodePackWithCompatibility }
+      })
+      await waitForPromises()
+
+      // Clear previous calls from component mounting/rendering
+      mockCheckNodeCompatibility.mockClear()
+
+      // Trigger compatibility check by accessing getVersionCompatibility
+      const vm = wrapper.vm as any
+      vm.getVersionCompatibility('1.0.0')
+
+      // Verify that checkNodeCompatibility was called with correct data
+      // Since 1.0.0 is the latest version, it should use latest_version data
+      expect(mockCheckNodeCompatibility).toHaveBeenCalledWith({
+        supported_os: ['windows', 'linux'],
+        supported_accelerators: ['CPU'], // latest_version data takes precedence
+        supported_comfyui_version: '>=0.1.0',
+        supported_comfyui_frontend_version: '>=1.0.0',
+        supported_python_version: '>=3.8',
+        is_banned: false,
+        has_registry_data: true,
+        version: '1.0.0'
+      })
+    })
+
+    it('shows version conflict warnings for ComfyUI and frontend versions', async () => {
+      // Set up the mock for versions
+      mockGetPackVersions.mockResolvedValueOnce(defaultMockVersions)
+
+      // Mock compatibility check to return version conflicts
+      mockCheckNodeCompatibility.mockImplementation((versionData) => {
+        const conflicts = []
+        if (versionData.supported_comfyui_version) {
+          conflicts.push({
+            type: 'comfyui_version',
+            current_value: '0.5.0',
+            required_value: versionData.supported_comfyui_version
+          })
+        }
+        if (versionData.supported_comfyui_frontend_version) {
+          conflicts.push({
+            type: 'frontend_version',
+            current_value: '1.0.0',
+            required_value: versionData.supported_comfyui_frontend_version
+          })
+        }
+        return {
+          hasConflict: conflicts.length > 0,
+          conflicts
+        }
+      })
+
+      const nodePackWithVersionRequirements = {
+        ...mockNodePack,
+        supported_comfyui_version: '>=1.0.0',
+        supported_comfyui_frontend_version: '>=2.0.0'
+      }
+
+      const wrapper = mountComponent({
+        props: { nodePack: nodePackWithVersionRequirements }
+      })
+      await waitForPromises()
+
+      // Check that compatibility checking function was called
+      expect(mockCheckNodeCompatibility).toHaveBeenCalled()
+
+      // The warning icon should be shown for version incompatible packages
+      const warningIcons = wrapper.findAll('.pi-exclamation-triangle')
+      expect(warningIcons.length).toBeGreaterThan(0)
+    })
+
+    it('handles latest and nightly versions using nodePack data', async () => {
+      // Set up the mock for versions
+      mockGetPackVersions.mockResolvedValueOnce(defaultMockVersions)
+
+      const nodePackWithCompatibility = {
+        ...mockNodePack,
+        supported_os: ['windows'],
+        supported_accelerators: ['CPU'],
+        supported_comfyui_version: '>=0.1.0',
+        supported_comfyui_frontend_version: '>=1.0.0',
+        latest_version: {
+          ...mockNodePack.latest_version,
+          supported_os: ['windows'], // Match nodePack data for test consistency
+          supported_accelerators: ['CPU'], // Match nodePack data for test consistency
+          supported_python_version: '>=3.8',
+          is_banned: false,
+          has_registry_data: true
+        }
+      }
+
+      const wrapper = mountComponent({
+        props: { nodePack: nodePackWithCompatibility }
+      })
+      await waitForPromises()
+
+      const vm = wrapper.vm as any
+
+      // Clear previous calls from component mounting/rendering
+      mockCheckNodeCompatibility.mockClear()
+
+      // Test latest version
+      vm.getVersionCompatibility('latest')
+      expect(mockCheckNodeCompatibility).toHaveBeenCalledWith({
+        supported_os: ['windows'],
+        supported_accelerators: ['CPU'],
+        supported_comfyui_version: '>=0.1.0',
+        supported_comfyui_frontend_version: '>=1.0.0',
+        supported_python_version: '>=3.8',
+        is_banned: false,
+        has_registry_data: true,
+        version: '1.0.0'
+      })
+
+      // Clear for next test call
+      mockCheckNodeCompatibility.mockClear()
+
+      // Test nightly version
+      vm.getVersionCompatibility('nightly')
+      expect(mockCheckNodeCompatibility).toHaveBeenCalledWith({
+        id: 'test-pack',
+        name: 'Test Pack',
+        supported_os: ['windows'],
+        supported_accelerators: ['CPU'],
+        supported_comfyui_version: '>=0.1.0',
+        supported_comfyui_frontend_version: '>=1.0.0',
+        repository: 'https://github.com/user/repo',
+        has_registry_data: true,
+        latest_version: {
+          supported_os: ['windows'],
+          supported_accelerators: ['CPU'],
+          supported_python_version: '>=3.8',
+          is_banned: false,
+          has_registry_data: true,
+          version: '1.0.0',
+          supported_comfyui_version: '>=0.1.0',
+          supported_comfyui_frontend_version: '>=1.0.0'
+        }
+      })
+    })
+
+    it('shows banned package warnings', async () => {
+      // Set up the mock for versions
+      mockGetPackVersions.mockResolvedValueOnce(defaultMockVersions)
+
+      // Mock compatibility check to return banned conflicts
+      mockCheckNodeCompatibility.mockImplementation((versionData) => {
+        if (versionData.is_banned === true) {
+          return {
+            hasConflict: true,
+            conflicts: [
+              {
+                type: 'banned',
+                current_value: 'installed',
+                required_value: 'not_banned'
+              }
+            ]
+          }
+        }
+        return { hasConflict: false, conflicts: [] }
+      })
+
+      const bannedNodePack = {
+        ...mockNodePack,
+        is_banned: true,
+        latest_version: {
+          ...mockNodePack.latest_version,
+          is_banned: true
+        }
+      }
+
+      const wrapper = mountComponent({
+        props: { nodePack: bannedNodePack }
+      })
+      await waitForPromises()
+
+      // Check that compatibility checking function was called
+      expect(mockCheckNodeCompatibility).toHaveBeenCalled()
+
+      // Open the dropdown to see the options
+      const select = wrapper.find('.p-select')
+      if (!select.exists()) {
+        // Try alternative selector
+        const selectButton = wrapper.find('[aria-haspopup="listbox"]')
+        if (selectButton.exists()) {
+          await selectButton.trigger('click')
+        }
+      } else {
+        await select.trigger('click')
+      }
+      await wrapper.vm.$nextTick()
+
+      // The warning icon should be shown for banned packages in the dropdown options
+      const warningIcons = wrapper.findAll('.pi-exclamation-triangle')
+      expect(warningIcons.length).toBeGreaterThan(0)
+    })
+
+    it('shows security pending warnings', async () => {
+      // Set up the mock for versions
+      mockGetPackVersions.mockResolvedValueOnce(defaultMockVersions)
+
+      // Mock compatibility check to return security pending conflicts
+      mockCheckNodeCompatibility.mockImplementation((versionData) => {
+        if (versionData.has_registry_data === false) {
+          return {
+            hasConflict: true,
+            conflicts: [
+              {
+                type: 'pending',
+                current_value: 'no_registry_data',
+                required_value: 'registry_data_available'
+              }
+            ]
+          }
+        }
+        return { hasConflict: false, conflicts: [] }
+      })
+
+      const securityPendingNodePack = {
+        ...mockNodePack,
+        has_registry_data: false,
+        latest_version: {
+          ...mockNodePack.latest_version,
+          has_registry_data: false
+        }
+      }
+
+      const wrapper = mountComponent({
+        props: { nodePack: securityPendingNodePack }
+      })
+      await waitForPromises()
+
+      // Check that compatibility checking function was called
+      expect(mockCheckNodeCompatibility).toHaveBeenCalled()
+
+      // The warning icon should be shown for security pending packages
+      const warningIcons = wrapper.findAll('.pi-exclamation-triangle')
+      expect(warningIcons.length).toBeGreaterThan(0)
    })
  })
 })
--- a/src/components/dialog/content/manager/PackVersionSelectorPopover.vue
+++ b/src/components/dialog/content/manager/PackVersionSelectorPopover.vue
@@ -1,8 +1,10 @@
 <template>
-  <div class="w-64 mt-2">
-    <span class="pl-3 text-muted text-md font-semibold opacity-70">
-      {{ $t('manager.selectVersion') }}
-    </span>
+  <div class="w-64 pt-1">
+    <div class="py-2">
+      <span class="pl-3 text-md font-semibold text-neutral-500">
+        {{ $t('manager.selectVersion') }}
+      </span>
+    </div>
    <div
      v-if="isLoadingVersions || isQueueing"
      class="text-center text-muted py-4 flex flex-col items-center"
@@ -23,24 +25,44 @@
      v-model="selectedVersion"
      option-label="label"
      option-value="value"
-      :options="versionOptions"
+      :options="processedVersionOptions"
      :highlight-on-select="false"
-      class="my-3 w-full max-h-[50vh] border-none shadow-none"
+      class="w-full max-h-[50vh] border-none shadow-none rounded-md"
+      :pt="{
+        listContainer: { class: 'scrollbar-hide' }
+      }"
    >
      <template #option="slotProps">
        <div class="flex justify-between items-center w-full p-1">
-          <span>{{ slotProps.option.label }}</span>
+          <div class="flex items-center gap-2">
+            <template v-if="slotProps.option.value === 'nightly'">
+              <div class="w-4"></div>
+            </template>
+            <template v-else>
+              <i
+                v-if="slotProps.option.hasConflict"
+                v-tooltip="{
+                  value: slotProps.option.conflictMessage,
+                  showDelay: 300
+                }"
+                class="pi pi-exclamation-triangle text-yellow-500"
+              />
+              <VerifiedIcon v-else :size="20" class="relative right-0.5" />
+            </template>
+            <span>{{ slotProps.option.label }}</span>
+          </div>
          <i
-            v-if="selectedVersion === slotProps.option.value"
+            v-if="slotProps.option.isSelected"
            class="pi pi-check text-highlight"
          />
        </div>
      </template>
    </Listbox>
    <ContentDivider class="my-2" />
-    <div class="flex justify-end gap-2 p-1 px-3">
+    <div class="flex justify-end gap-2 py-1 px-3">
      <Button
        text
+        class="text-sm"
        severity="secondary"
        :label="$t('g.cancel')"
        :disabled="isQueueing"
@@ -49,7 +71,7 @@
      <Button
        severity="secondary"
        :label="$t('g.install')"
-        class="py-3 px-4 dark-theme:bg-unset bg-black/80 dark-theme:text-unset text-neutral-100 rounded-lg"
+        class="py-2.5 px-4 text-sm dark-theme:bg-unset bg-black/80 dark-theme:text-unset text-neutral-100 rounded-lg"
        :disabled="isQueueing"
        @click="handleSubmit"
      />
@@ -62,19 +84,18 @@ import { whenever } from '@vueuse/core'
 import Button from 'primevue/button'
 import Listbox from 'primevue/listbox'
 import ProgressSpinner from 'primevue/progressspinner'
-import { onMounted, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'

 import ContentDivider from '@/components/common/ContentDivider.vue'
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
+import VerifiedIcon from '@/components/icons/VerifiedIcon.vue'
+import { useConflictDetection } from '@/composables/useConflictDetection'
 import { useComfyRegistryService } from '@/services/comfyRegistryService'
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
-import {
-  ManagerChannel,
-  ManagerDatabaseSource,
-  SelectedVersion
-} from '@/types/comfyManagerTypes'
-import { components } from '@/types/comfyRegistryTypes'
+import type { components } from '@/types/comfyRegistryTypes'
+import { components as ManagerComponents } from '@/types/generatedManagerTypes'
+import { getJoinedConflictMessages } from '@/utils/conflictMessageUtil'
 import { isSemVer } from '@/utils/formatUtil'

 const { nodePack } = defineProps<{
@@ -89,27 +110,30 @@ const emit = defineEmits<{
 const { t } = useI18n()
 const registryService = useComfyRegistryService()
 const managerStore = useComfyManagerStore()
+const { checkNodeCompatibility } = useConflictDetection()

 const isQueueing = ref(false)

-const selectedVersion = ref<string>(SelectedVersion.LATEST)
+const selectedVersion = ref<string>('latest')
+
 onMounted(() => {
-  const initialVersion = getInitialSelectedVersion() ?? SelectedVersion.LATEST
+  const initialVersion = getInitialSelectedVersion() ?? 'latest'
  selectedVersion.value =
    // Use NIGHTLY when version is a Git hash
-    isSemVer(initialVersion) ? initialVersion : SelectedVersion.NIGHTLY
+    isSemVer(initialVersion) ? initialVersion : 'nightly'
 })

 const getInitialSelectedVersion = () => {
  if (!nodePack.id) return

-  // If unclaimed, set selected version to nightly
-  if (nodePack.publisher?.name === 'Unclaimed') return SelectedVersion.NIGHTLY
-
  // If node pack is installed, set selected version to the installed version
  if (managerStore.isPackInstalled(nodePack.id))
    return managerStore.getInstalledPackVersion(nodePack.id)

+  // If unclaimed, set selected version to nightly
+  if (nodePack.publisher?.name === 'Unclaimed')
+    return 'nightly' as ManagerComponents['schemas']['SelectedVersion']
+
  // If node pack is not installed, set selected version to latest
  return nodePack.latest_version?.version
 }
@@ -126,6 +150,9 @@ const versionOptions = ref<
  }[]
 >([])

+// Store fetched versions with their full data
+const fetchedVersions = ref<components['schemas']['NodeVersion'][]>([])
+
 const isLoadingVersions = ref(false)

 const onNodePackChange = async () => {
@@ -133,26 +160,35 @@ const onNodePackChange = async () => {

  // Fetch versions from the registry
  const versions = await fetchVersions()
+  fetchedVersions.value = versions
+
+  // Get latest version number to exclude from the list
+  const latestVersionNumber = nodePack.latest_version?.version
+
  const availableVersionOptions = versions
    .map((version) => ({
      value: version.version ?? '',
      label: version.version ?? ''
    }))
-    .filter((option) => option.value)
+    .filter((option) => option.value && option.value !== latestVersionNumber) // Exclude latest version from the list
+
+  // Add Latest option with actual version number
+  const latestLabel = latestVersionNumber
+    ? `${t('manager.latestVersion')} (${latestVersionNumber})`
+    : t('manager.latestVersion')

-  // Add Latest option
  const defaultVersions = [
    {
-      value: SelectedVersion.LATEST,
-      label: t('manager.latestVersion')
+      value: 'latest' as ManagerComponents['schemas']['SelectedVersion'],
+      label: latestLabel
    }
  ]

  // Add Nightly option if there is a non-empty `repository` field
  if (nodePack.repository?.length) {
    defaultVersions.push({
-      value: SelectedVersion.NIGHTLY,
-      label: t('manager.nightlyVersion')
+      value: 'nightly' as ManagerComponents['schemas']['SelectedVersion'],
+      label: t('manager.nightlyVersion') // Keep as just "nightly" - no version number
    })
  }

@@ -172,16 +208,95 @@ whenever(

 const handleSubmit = async () => {
  isQueueing.value = true
+  if (!nodePack.id) {
+    throw new Error('Node ID is required for installation')
+  }
+
+  // Convert 'latest' to actual version number for installation
+  const actualVersion =
+    selectedVersion.value === 'latest'
+      ? nodePack.latest_version?.version ?? 'latest'
+      : selectedVersion.value
+
  await managerStore.installPack.call({
    id: nodePack.id,
+    version: actualVersion,
    repository: nodePack.repository ?? '',
-    channel: ManagerChannel.DEFAULT,
-    mode: ManagerDatabaseSource.CACHE,
-    version: selectedVersion.value,
-    selected_version: selectedVersion.value
+    channel: 'default' as ManagerComponents['schemas']['ManagerChannel'],
+    mode: 'cache' as ManagerComponents['schemas']['ManagerDatabaseSource'],
+    selected_version: actualVersion
  })

  isQueueing.value = false
  emit('submit')
 }
+
+const getVersionData = (version: string) => {
+  const latestVersionNumber = nodePack.latest_version?.version
+  const useLatestVersionData =
+    version === 'latest' || version === latestVersionNumber
+
+  if (useLatestVersionData) {
+    const latestVersionData = nodePack.latest_version
+    return {
+      ...latestVersionData
+    }
+  }
+
+  const versionData = fetchedVersions.value.find((v) => v.version === version)
+  if (versionData) {
+    return {
+      ...versionData
+    }
+  }
+
+  // Fallback to nodePack data
+  return {
+    ...nodePack
+  }
+}
+
+// Main function to get version compatibility info
+const getVersionCompatibility = (version: string) => {
+  const versionData = getVersionData(version)
+  const compatibility = checkNodeCompatibility(versionData)
+
+  const conflictMessage = compatibility.hasConflict
+    ? getJoinedConflictMessages(compatibility.conflicts, t)
+    : ''
+
+  return {
+    hasConflict: compatibility.hasConflict,
+    conflictMessage
+  }
+}
+
+// Helper to determine if an option is selected.
+const isOptionSelected = (optionValue: string) => {
+  if (selectedVersion.value === optionValue) {
+    return true
+  }
+  if (
+    optionValue === 'latest' &&
+    selectedVersion.value === nodePack.latest_version?.version
+  ) {
+    return true
+  }
+  return false
+}
+
+// Checks if an option is selected, treating 'latest' as an alias for the actual latest version number.
+const processedVersionOptions = computed(() => {
+  return versionOptions.value.map((option) => {
+    const compatibility = getVersionCompatibility(option.value)
+    const isSelected = isOptionSelected(option.value)
+
+    return {
+      ...option,
+      hasConflict: compatibility.hasConflict,
+      conflictMessage: compatibility.conflictMessage,
+      isSelected: isSelected
+    }
+  })
+})
 </script>
--- a/src/components/dialog/content/manager/button/PackActionButton.vue
+++ b/src/components/dialog/content/manager/button/PackActionButton.vue
@@ -1,18 +1,24 @@
 <template>
  <Button
    outlined
-    class="!m-0 p-0 rounded-lg text-gray-900 dark-theme:text-gray-50"
+    class="!m-0 p-0 max-w-[120px] rounded-lg text-gray-900 dark-theme:text-gray-50"
    :class="[
      variant === 'black'
        ? 'bg-neutral-900 text-white border-neutral-900'
-        : 'border-neutral-700',
+        : variant === 'red'
+          ? 'border-red-500'
+          : 'border-neutral-700',
      fullWidth ? 'w-full' : 'w-min-content'
    ]"
    :disabled="loading"
    v-bind="$attrs"
    @click="onClick"
  >
-    <span class="py-2 px-3 whitespace-nowrap">
+    <span class="py-1.5 px-3 whitespace-nowrap text-xs flex items-center gap-2">
+      <i
+        v-if="hasWarning && !loading"
+        class="pi pi-exclamation-triangle text-yellow-500"
+      ></i>
      <template v-if="loading">
        {{ loadingMessage ?? $t('g.loading') }}
      </template>
@@ -28,15 +34,18 @@ import Button from 'primevue/button'

 const {
  label,
+  loading = false,
  loadingMessage,
  fullWidth = false,
-  variant = 'default'
+  variant = 'default',
+  hasWarning = false
 } = defineProps<{
  label: string
  loading?: boolean
  loadingMessage?: string
  fullWidth?: boolean
-  variant?: 'default' | 'black'
+  variant?: 'default' | 'black' | 'red'
+  hasWarning?: boolean
 }>()

 const emit = defineEmits<{
--- a/src/components/dialog/content/manager/button/PackEnableToggle.test.ts
+++ b/src/components/dialog/content/manager/button/PackEnableToggle.test.ts
@@ -11,9 +11,22 @@ import { useComfyManagerStore } from '@/stores/comfyManagerStore'

 import PackEnableToggle from './PackEnableToggle.vue'

-// Mock debounce to execute immediately
-vi.mock('lodash', () => ({
-  debounce: <T extends (...args: any[]) => any>(fn: T) => fn
+// Mock lodash functions used throughout the app
+vi.mock('lodash', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('lodash')>()
+  return {
+    ...actual,
+    debounce: <T extends (...args: any[]) => any>(fn: T) => fn,
+    memoize: <T extends (...args: any[]) => any>(fn: T) => fn
+  }
+})
+
+// Mock config to prevent __COMFYUI_FRONTEND_VERSION__ error
+vi.mock('@/config', () => ({
+  default: {
+    app_title: 'ComfyUI',
+    app_version: '1.0.0'
+  }
 }))

 const mockNodePack = {
--- a/src/components/dialog/content/manager/button/PackEnableToggle.vue
+++ b/src/components/dialog/content/manager/button/PackEnableToggle.vue
@@ -1,6 +1,26 @@
 <template>
-  <div class="flex items-center">
+  <div class="flex items-center gap-2">
+    <div
+      v-if="hasConflict"
+      v-tooltip="{
+        value: $t('manager.conflicts.warningTooltip'),
+        showDelay: 300
+      }"
+      class="flex items-center justify-center w-6 h-6 cursor-pointer"
+      @click="showConflictModal(true)"
+    >
+      <i class="pi pi-exclamation-triangle text-yellow-500 text-xl"></i>
+    </div>
    <ToggleSwitch
+      v-if="!canToggleDirectly"
+      :model-value="isEnabled"
+      :disabled="isLoading"
+      :readonly="!canToggleDirectly"
+      aria-label="Enable or disable pack"
+      @focus="handleToggleInteraction"
+    />
+    <ToggleSwitch
+      v-else
      :model-value="isEnabled"
      :disabled="isLoading"
      aria-label="Enable or disable pack"
@@ -13,52 +33,96 @@
 import { debounce } from 'lodash'
 import ToggleSwitch from 'primevue/toggleswitch'
 import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'

+import { useConflictAcknowledgment } from '@/composables/useConflictAcknowledgment'
+import { useDialogService } from '@/services/dialogService'
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
-import {
-  InstallPackParams,
-  ManagerChannel,
-  SelectedVersion
-} from '@/types/comfyManagerTypes'
+import { useConflictDetectionStore } from '@/stores/conflictDetectionStore'
 import type { components } from '@/types/comfyRegistryTypes'
+import { components as ManagerComponents } from '@/types/generatedManagerTypes'

 const TOGGLE_DEBOUNCE_MS = 256

-const { nodePack } = defineProps<{
+const { nodePack, hasConflict } = defineProps<{
  nodePack: components['schemas']['Node']
+  hasConflict?: boolean
 }>()

-const { isPackEnabled, enablePack, disablePack, installedPacks } =
-  useComfyManagerStore()
+const { t } = useI18n()
+const { isPackEnabled, enablePack, disablePack } = useComfyManagerStore()
+const { getConflictsForPackageByID } = useConflictDetectionStore()
+const { showNodeConflictDialog } = useDialogService()
+const { acknowledgmentState, markConflictsAsSeen } = useConflictAcknowledgment()

 const isLoading = ref(false)

 const isEnabled = computed(() => isPackEnabled(nodePack.id))
-const version = computed(() => {
-  const id = nodePack.id
-  if (!id) return SelectedVersion.NIGHTLY
-  return (
-    installedPacks[id]?.ver ??
-    nodePack.latest_version?.version ??
-    SelectedVersion.NIGHTLY
+const packageConflict = computed(() =>
+  getConflictsForPackageByID(nodePack.id || '')
+)
+
+const canToggleDirectly = computed(() => {
+  return !(
+    hasConflict &&
+    !acknowledgmentState.value.modal_dismissed &&
+    packageConflict.value
  )
 })

-const handleEnable = () =>
-  enablePack.call({
-    id: nodePack.id,
-    version: version.value,
-    selected_version: version.value,
-    repository: nodePack.repository ?? '',
-    channel: ManagerChannel.DEFAULT,
-    mode: 'default' as InstallPackParams['mode']
-  })
+const showConflictModal = (skipModalDismissed: boolean) => {
+  let modal_dismissed = acknowledgmentState.value.modal_dismissed
+  if (skipModalDismissed) modal_dismissed = false
+  if (packageConflict.value && !modal_dismissed) {
+    showNodeConflictDialog({
+      conflictedPackages: [packageConflict.value],
+      buttonText: !isEnabled.value
+        ? t('manager.conflicts.enableAnyway')
+        : t('manager.conflicts.understood'),
+      onButtonClick: async () => {
+        if (!isEnabled.value) {
+          await handleEnable()
+        }
+      },
+      dialogComponentProps: {
+        onClose: () => {
+          markConflictsAsSeen()
+        }
+      }
+    })
+  }
+}

-const handleDisable = () =>
-  disablePack({
+const handleEnable = () => {
+  if (!nodePack.id) {
+    throw new Error('Node ID is required for enabling')
+  }
+  return enablePack.call({
    id: nodePack.id,
-    version: version.value
+    version:
+      nodePack.latest_version?.version ??
+      ('latest' as ManagerComponents['schemas']['SelectedVersion']),
+    selected_version:
+      nodePack.latest_version?.version ??
+      ('latest' as ManagerComponents['schemas']['SelectedVersion']),
+    repository: nodePack.repository ?? '',
+    channel: 'default' as ManagerComponents['schemas']['ManagerChannel'],
+    mode: 'cache' as ManagerComponents['schemas']['ManagerDatabaseSource'],
+    skip_post_install: false
  })
+}
+
+const handleDisable = () => {
+  if (!nodePack.id) {
+    throw new Error('Node ID is required for disabling')
+  }
+  return disablePack({
+    id: nodePack.id,
+    version:
+      nodePack.latest_version?.version ??
+      ('latest' as ManagerComponents['schemas']['SelectedVersion'])
+  })
+}

 const handleToggle = async (enable: boolean) => {
  if (isLoading.value) return
@@ -67,10 +131,23 @@ const handleToggle = async (enable: boolean) => {
  if (enable) {
    await handleEnable()
  } else {
-    handleDisable()
+    await handleDisable()
  }
  isLoading.value = false
 }

-const onToggle = debounce(handleToggle, TOGGLE_DEBOUNCE_MS, { trailing: true })
+const onToggle = debounce(
+  (enable: boolean) => {
+    void handleToggle(enable)
+  },
+  TOGGLE_DEBOUNCE_MS,
+  { trailing: true }
+)
+
+const handleToggleInteraction = async (event: Event) => {
+  if (!canToggleDirectly.value) {
+    event.preventDefault()
+    showConflictModal(false)
+  }
+}
 </script>
--- a/src/components/dialog/content/manager/button/PackInstallButton.vue
+++ b/src/components/dialog/content/manager/button/PackInstallButton.vue
@@ -9,8 +9,8 @@
    :variant="variant"
    :loading="isInstalling"
    :loading-message="$t('g.installing')"
+    :has-warning="hasConflict"
    @action="installAllPacks"
-    @click="onClick"
  />
 </template>

@@ -18,44 +18,51 @@
 import { inject, ref } from 'vue'

 import PackActionButton from '@/components/dialog/content/manager/button/PackActionButton.vue'
+import { t } from '@/i18n'
+import { useDialogService } from '@/services/dialogService'
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
-import {
-  IsInstallingKey,
-  ManagerChannel,
-  ManagerDatabaseSource,
-  SelectedVersion
-} from '@/types/comfyManagerTypes'
+import { IsInstallingKey } from '@/types/comfyManagerTypes'
 import type { components } from '@/types/comfyRegistryTypes'
+import {
+  type ConflictDetail,
+  type ConflictDetectionResult
+} from '@/types/conflictDetectionTypes'
+import { components as ManagerComponents } from '@/types/generatedManagerTypes'

 type NodePack = components['schemas']['Node']

-const { nodePacks, variant, label } = defineProps<{
+const { nodePacks, variant, label, hasConflict, conflictInfo } = defineProps<{
  nodePacks: NodePack[]
  variant?: 'default' | 'black'
  label?: string
+  hasConflict?: boolean
+  conflictInfo?: ConflictDetail[]
 }>()

 const isInstalling = inject(IsInstallingKey, ref(false))
-
-const onClick = (): void => {
-  isInstalling.value = true
-}
-
 const managerStore = useComfyManagerStore()
+const { showNodeConflictDialog } = useDialogService()
+
+const createPayload = (
+  installItem: NodePack
+): ManagerComponents['schemas']['InstallPackParams'] => {
+  if (!installItem.id) {
+    throw new Error('Node ID is required for installation')
+  }

-const createPayload = (installItem: NodePack) => {
  const isUnclaimedPack = installItem.publisher?.name === 'Unclaimed'
  const versionToInstall = isUnclaimedPack
-    ? SelectedVersion.NIGHTLY
-    : installItem.latest_version?.version ?? SelectedVersion.LATEST
+    ? ('nightly' as ManagerComponents['schemas']['SelectedVersion'])
+    : installItem.latest_version?.version ??
+      ('latest' as ManagerComponents['schemas']['SelectedVersion'])

  return {
    id: installItem.id,
+    version: versionToInstall,
    repository: installItem.repository ?? '',
-    channel: ManagerChannel.DEV,
-    mode: ManagerDatabaseSource.CACHE,
-    selected_version: versionToInstall,
-    version: versionToInstall
+    channel: 'dev' as ManagerComponents['schemas']['ManagerChannel'],
+    mode: 'cache' as ManagerComponents['schemas']['ManagerDatabaseSource'],
+    selected_version: versionToInstall
  }
 }

@@ -65,14 +72,35 @@ const installPack = (item: NodePack) =>
 const installAllPacks = async () => {
  if (!nodePacks?.length) return

+  if (hasConflict && conflictInfo) {
+    const conflictedPackages: ConflictDetectionResult[] = nodePacks.map(
+      (pack) => ({
+        package_id: pack.id || '',
+        package_name: pack.name || '',
+        has_conflict: true,
+        conflicts: conflictInfo || [],
+        is_compatible: false
+      })
+    )
+
+    showNodeConflictDialog({
+      conflictedPackages,
+      buttonText: t('manager.conflicts.installAnyway'),
+      onButtonClick: async () => {
+        // Proceed with installation
+        isInstalling.value = true
+        await performInstallation(nodePacks)
+      }
+    })
+    return
+  }
+  // No conflicts or conflicts acknowledged - proceed with installation
  isInstalling.value = true
+  await performInstallation(nodePacks)
+}

-  const uninstalledPacks = nodePacks.filter(
-    (pack) => !managerStore.isPackInstalled(pack.id)
-  )
-  if (!uninstalledPacks.length) return
-
-  await Promise.all(uninstalledPacks.map(installPack))
+const performInstallation = async (packs: NodePack[]) => {
+  await Promise.all(packs.map(installPack))
  managerStore.installPack.clear()
 }
 </script>
--- a/src/components/dialog/content/manager/button/PackUninstallButton.vue
+++ b/src/components/dialog/content/manager/button/PackUninstallButton.vue
@@ -6,7 +6,7 @@
        ? $t('manager.uninstallSelected')
        : $t('manager.uninstall')
    "
-    severity="danger"
+    variant="red"
    :loading-message="$t('manager.uninstalling')"
    @action="uninstallItems"
  />
@@ -15,7 +15,6 @@
 <script setup lang="ts">
 import PackActionButton from '@/components/dialog/content/manager/button/PackActionButton.vue'
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
-import type { ManagerPackInfo } from '@/types/comfyManagerTypes'
 import type { components } from '@/types/comfyRegistryTypes'

 type NodePack = components['schemas']['Node']
@@ -26,16 +25,16 @@ const { nodePacks } = defineProps<{

 const managerStore = useComfyManagerStore()

-const createPayload = (uninstallItem: NodePack): ManagerPackInfo => {
-  return {
-    id: uninstallItem.id,
-    version: uninstallItem.latest_version?.version
+const uninstallPack = (item: NodePack) => {
+  if (!item.id) {
+    throw new Error('Node ID is required for uninstallation')
  }
+  return managerStore.uninstallPack({
+    id: item.id,
+    version: item.latest_version?.version ?? ''
+  })
 }

-const uninstallPack = (item: NodePack) =>
-  managerStore.uninstallPack(createPayload(item))
-
 const uninstallItems = async () => {
  if (!nodePacks?.length) return
  await Promise.all(nodePacks.map(uninstallPack))
--- a/src/components/dialog/content/manager/button/PackUpdateButton.vue
+++ b/src/components/dialog/content/manager/button/PackUpdateButton.vue
@@ -0,0 +1,78 @@
+<template>
+  <PackActionButton
+    v-bind="$attrs"
+    variant="black"
+    :label="$t('manager.updateAll')"
+    :loading="isUpdating"
+    :loading-message="$t('g.updating')"
+    @action="updateAllPacks"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+import PackActionButton from '@/components/dialog/content/manager/button/PackActionButton.vue'
+import { useComfyManagerStore } from '@/stores/comfyManagerStore'
+import type { components } from '@/types/comfyRegistryTypes'
+
+type NodePack = components['schemas']['Node']
+
+const { nodePacks } = defineProps<{
+  nodePacks: NodePack[]
+}>()
+
+const isUpdating = ref<boolean>(false)
+
+const managerStore = useComfyManagerStore()
+
+const createPayload = (updateItem: NodePack) => {
+  return {
+    id: updateItem.id!,
+    version: updateItem.latest_version!.version!
+  }
+}
+
+const updatePack = async (item: NodePack) => {
+  if (!item.id || !item.latest_version?.version) {
+    console.warn('Pack missing required id or version:', item)
+    return
+  }
+  await managerStore.updatePack.call(createPayload(item))
+}
+
+const updateAllPacks = async () => {
+  if (!nodePacks?.length) {
+    console.warn('No packs provided for update')
+    return
+  }
+
+  isUpdating.value = true
+
+  const updatablePacks = nodePacks.filter((pack) =>
+    managerStore.isPackInstalled(pack.id)
+  )
+
+  if (!updatablePacks.length) {
+    console.info('No installed packs available for update')
+    isUpdating.value = false
+    return
+  }
+
+  console.info(`Starting update of ${updatablePacks.length} packs`)
+
+  try {
+    await Promise.all(updatablePacks.map(updatePack))
+    managerStore.updatePack.clear()
+    console.info('All packs updated successfully')
+  } catch (error) {
+    console.error('Pack update failed:', error)
+    console.error(
+      'Failed packs info:',
+      updatablePacks.map((p) => p.id)
+    )
+  } finally {
+    isUpdating.value = false
+  }
+}
+</script>
--- a/src/components/dialog/content/manager/infoPanel/InfoPanel.vue
+++ b/src/components/dialog/content/manager/infoPanel/InfoPanel.vue
@@ -2,20 +2,26 @@
  <template v-if="nodePack">
    <div class="flex flex-col h-full z-40 overflow-hidden relative">
      <div class="top-0 z-10 px-6 pt-6 w-full">
-        <InfoPanelHeader :node-packs="[nodePack]" />
+        <InfoPanelHeader
+          :node-packs="[nodePack]"
+          :has-conflict="hasCompatibilityIssues"
+        />
      </div>
      <div
        ref="scrollContainer"
-        class="p-6 pt-2 overflow-y-auto flex-1 text-sm hidden-scrollbar"
+        class="p-6 pt-2 overflow-y-auto flex-1 text-sm scrollbar-hide"
      >
        <div class="mb-6">
          <MetadataRow
-            v-if="isPackInstalled(nodePack.id)"
+            v-if="!importFailed && isPackInstalled(nodePack.id)"
            :label="t('manager.filter.enabled')"
            class="flex"
            style="align-items: center"
          >
-            <PackEnableToggle :node-pack="nodePack" />
+            <PackEnableToggle
+              :node-pack="nodePack"
+              :has-conflict="hasCompatibilityIssues"
+            />
          </MetadataRow>
          <MetadataRow
            v-for="item in infoItems"
@@ -29,6 +35,7 @@
              :status-type="
                nodePack.status as components['schemas']['NodeVersionStatus']
              "
+              :has-compatibility-issues="hasCompatibilityIssues"
            />
          </MetadataRow>
          <MetadataRow :label="t('manager.version')">
@@ -36,7 +43,11 @@
          </MetadataRow>
        </div>
        <div class="mb-6 overflow-hidden">
-          <InfoTabs :node-pack="nodePack" />
+          <InfoTabs
+            :node-pack="nodePack"
+            :has-compatibility-issues="hasCompatibilityIssues"
+            :conflict-result="conflictResult"
+          />
        </div>
      </div>
    </div>
@@ -59,9 +70,14 @@ import PackEnableToggle from '@/components/dialog/content/manager/button/PackEna
 import InfoPanelHeader from '@/components/dialog/content/manager/infoPanel/InfoPanelHeader.vue'
 import InfoTabs from '@/components/dialog/content/manager/infoPanel/InfoTabs.vue'
 import MetadataRow from '@/components/dialog/content/manager/infoPanel/MetadataRow.vue'
+import { useConflictDetection } from '@/composables/useConflictDetection'
+import { useImportFailedDetection } from '@/composables/useImportFailedDetection'
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
+import { useConflictDetectionStore } from '@/stores/conflictDetectionStore'
 import { IsInstallingKey } from '@/types/comfyManagerTypes'
 import { components } from '@/types/comfyRegistryTypes'
+import type { ConflictDetectionResult } from '@/types/conflictDetectionTypes'
+import { ImportFailedKey } from '@/types/importFailedTypes'

 interface InfoItem {
  key: string
@@ -75,18 +91,55 @@ const { nodePack } = defineProps<{

 const scrollContainer = ref<HTMLElement | null>(null)

-const managerStore = useComfyManagerStore()
-const isInstalled = computed(() => managerStore.isPackInstalled(nodePack.id))
+const { isPackInstalled } = useComfyManagerStore()
+const isInstalled = computed(() => isPackInstalled(nodePack.id))
 const isInstalling = ref(false)
 provide(IsInstallingKey, isInstalling)
 whenever(isInstalled, () => {
  isInstalling.value = false
 })

-const { isPackInstalled } = useComfyManagerStore()
+const { checkNodeCompatibility } = useConflictDetection()
+const { getConflictsForPackageByID } = useConflictDetectionStore()

 const { t, d, n } = useI18n()

+// Check compatibility once and pass to children
+const conflictResult = computed((): ConflictDetectionResult | null => {
+  // For installed packages, use stored conflict data
+  if (isInstalled.value && nodePack.id) {
+    return getConflictsForPackageByID(nodePack.id) || null
+  }
+
+  // For non-installed packages, perform compatibility check
+  const compatibility = checkNodeCompatibility(nodePack)
+
+  if (compatibility.hasConflict) {
+    return {
+      package_id: nodePack.id || '',
+      package_name: nodePack.name || '',
+      has_conflict: true,
+      conflicts: compatibility.conflicts,
+      is_compatible: false
+    }
+  }
+
+  return null
+})
+
+const hasCompatibilityIssues = computed(() => {
+  return conflictResult.value?.has_conflict
+})
+
+const packageId = computed(() => nodePack.id || '')
+const { importFailed, showImportFailedDialog } =
+  useImportFailedDetection(packageId)
+
+provide(ImportFailedKey, {
+  importFailed,
+  showImportFailedDialog
+})
+
 const infoItems = computed<InfoItem[]>(() => [
  {
    key: 'publisher',
@@ -128,17 +181,3 @@ whenever(
  { immediate: true }
 )
 </script>
-<style scoped>
-.hidden-scrollbar {
-  /* Firefox */
-  scrollbar-width: none;
-
-  &::-webkit-scrollbar {
-    width: 1px;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background-color: transparent;
-  }
-}
-</style>
--- a/src/components/dialog/content/manager/infoPanel/InfoPanelHeader.vue
+++ b/src/components/dialog/content/manager/infoPanel/InfoPanelHeader.vue
@@ -1,28 +1,36 @@
 <template>
-  <div v-if="nodePacks?.length" class="flex flex-col items-center mb-6">
+  <div v-if="nodePacks?.length" class="flex flex-col items-center">
    <slot name="thumbnail">
-      <PackIcon :node-pack="nodePacks[0]" width="24" height="24" />
+      <PackIcon :node-pack="nodePacks[0]" width="204" height="106" />
    </slot>
    <h2
      class="text-2xl font-bold text-center mt-4 mb-2"
      style="word-break: break-all"
    >
      <slot name="title">
-        {{ nodePacks[0].name }}
+        <span class="inline-block text-base">{{ nodePacks[0].name }}</span>
      </slot>
    </h2>
-    <div class="mt-2 mb-4 w-full max-w-xs flex justify-center">
+    <div
+      v-if="!importFailed"
+      class="mt-2 mb-4 w-full max-w-xs flex justify-center"
+    >
      <slot name="install-button">
        <PackUninstallButton
          v-if="isAllInstalled"
          v-bind="$attrs"
          :node-packs="nodePacks"
        />
-        <PackInstallButton v-else v-bind="$attrs" :node-packs="nodePacks" />
+        <PackInstallButton
+          v-else
+          v-bind="$attrs"
+          :node-packs="nodePacks"
+          :has-conflict="hasConflict"
+        />
      </slot>
    </div>
  </div>
-  <div v-else class="flex flex-col items-center mb-6">
+  <div v-else class="flex flex-col items-center">
    <NoResultsPlaceholder
      :message="$t('manager.status.unknown')"
      :title="$t('manager.tryAgainLater')"
@@ -31,7 +39,7 @@
 </template>

 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { inject, ref, watch } from 'vue'

 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
 import PackInstallButton from '@/components/dialog/content/manager/button/PackInstallButton.vue'
@@ -39,13 +47,19 @@ import PackUninstallButton from '@/components/dialog/content/manager/button/Pack
 import PackIcon from '@/components/dialog/content/manager/packIcon/PackIcon.vue'
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
 import { components } from '@/types/comfyRegistryTypes'
+import { ImportFailedKey } from '@/types/importFailedTypes'

-const { nodePacks } = defineProps<{
+const { nodePacks, hasConflict } = defineProps<{
  nodePacks: components['schemas']['Node'][]
+  hasConflict?: boolean
 }>()

 const managerStore = useComfyManagerStore()

+// Inject import failed context from parent
+const importFailedContext = inject(ImportFailedKey)
+const importFailed = importFailedContext?.importFailed
+
 const isAllInstalled = ref(false)
 watch(
  [() => nodePacks, () => managerStore.installedPacks],
--- a/src/components/dialog/content/manager/infoPanel/InfoPanelMultiItem.vue
+++ b/src/components/dialog/content/manager/infoPanel/InfoPanelMultiItem.vue
@@ -6,8 +6,12 @@
          <PackIconStacked :node-packs="nodePacks" />
        </template>
        <template #title>
-          {{ nodePacks.length }}
-          {{ $t('manager.packsSelected') }}
+          <div class="mt-5">
+            <span class="inline-block mr-2 text-blue-500 text-base">{{
+              nodePacks.length
+            }}</span>
+            <span class="text-base">{{ $t('manager.packsSelected') }}</span>
+          </div>
        </template>
        <template #install-button>
          <PackInstallButton :full-width="true" :node-packs="nodePacks" />
--- a/src/components/dialog/content/manager/infoPanel/InfoTabs.vue
+++ b/src/components/dialog/content/manager/infoPanel/InfoTabs.vue
@@ -1,15 +1,31 @@
 <template>
  <div class="overflow-hidden">
    <Tabs :value="activeTab">
-      <TabList>
-        <Tab value="description">
+      <TabList class="overflow-x-auto scrollbar-hide">
+        <Tab v-if="hasCompatibilityIssues" value="warning" class="p-2 mr-6">
+          <div class="flex items-center gap-1">
+            <span>⚠️</span>
+            {{ importFailed ? $t('g.error') : $t('g.warning') }}
+          </div>
+        </Tab>
+        <Tab value="description" class="p-2 mr-6">
          {{ $t('g.description') }}
        </Tab>
-        <Tab value="nodes">
+        <Tab value="nodes" class="p-2">
          {{ $t('g.nodes') }}
        </Tab>
      </TabList>
-      <TabPanels class="overflow-auto">
+      <TabPanels class="overflow-auto py-4 px-2">
+        <TabPanel
+          v-if="hasCompatibilityIssues"
+          value="warning"
+          class="bg-transparent"
+        >
+          <WarningTabPanel
+            :node-pack="nodePack"
+            :conflict-result="conflictResult"
+          />
+        </TabPanel>
        <TabPanel value="description">
          <DescriptionTabPanel :node-pack="nodePack" />
        </TabPanel>
@@ -27,16 +43,25 @@ import TabList from 'primevue/tablist'
 import TabPanel from 'primevue/tabpanel'
 import TabPanels from 'primevue/tabpanels'
 import Tabs from 'primevue/tabs'
-import { computed, ref } from 'vue'
+import { computed, inject, ref, watchEffect } from 'vue'

 import DescriptionTabPanel from '@/components/dialog/content/manager/infoPanel/tabs/DescriptionTabPanel.vue'
 import NodesTabPanel from '@/components/dialog/content/manager/infoPanel/tabs/NodesTabPanel.vue'
+import WarningTabPanel from '@/components/dialog/content/manager/infoPanel/tabs/WarningTabPanel.vue'
 import { components } from '@/types/comfyRegistryTypes'
+import type { ConflictDetectionResult } from '@/types/conflictDetectionTypes'
+import { ImportFailedKey } from '@/types/importFailedTypes'

-const { nodePack } = defineProps<{
+const { nodePack, hasCompatibilityIssues, conflictResult } = defineProps<{
  nodePack: components['schemas']['Node']
+  hasCompatibilityIssues?: boolean
+  conflictResult?: ConflictDetectionResult | null
 }>()

+// Inject import failed context from parent
+const importFailedContext = inject(ImportFailedKey)
+const importFailed = importFailedContext?.importFailed
+
 const nodeNames = computed(() => {
  // @ts-expect-error comfy_nodes is an Algolia-specific field
  const { comfy_nodes } = nodePack
@@ -44,4 +69,17 @@ const nodeNames = computed(() => {
 })

 const activeTab = ref('description')
+
+// Watch for compatibility issues and automatically switch to warning tab
+watchEffect(
+  () => {
+    if (hasCompatibilityIssues) {
+      activeTab.value = 'warning'
+    } else if (activeTab.value === 'warning') {
+      // If currently on warning tab but no issues, switch to description
+      activeTab.value = 'description'
+    }
+  },
+  { flush: 'post' }
+)
 </script>
--- a/src/components/dialog/content/manager/infoPanel/InfoTextSection.vue
+++ b/src/components/dialog/content/manager/infoPanel/InfoTextSection.vue
@@ -1,7 +1,7 @@
 <template>
  <div class="flex flex-col gap-4 text-sm">
    <div v-for="(section, index) in sections" :key="index" class="mb-4">
-      <div class="mb-1">
+      <div class="mb-3">
        {{ section.title }}
      </div>
      <div class="text-muted break-words">
--- a/src/components/dialog/content/manager/infoPanel/MetadataRow.vue
+++ b/src/components/dialog/content/manager/infoPanel/MetadataRow.vue
@@ -1,6 +1,6 @@
 <template>
  <div class="flex py-1.5 text-xs">
-    <div class="w-1/3 truncate pr-2 text-muted">{{ label }}:</div>
+    <div class="w-1/3 truncate pr-2 text-muted">{{ label }}</div>
    <div class="w-2/3">
      <slot>{{ value }}</slot>
    </div>
--- a/src/components/dialog/content/manager/infoPanel/tabs/DescriptionTabPanel.vue
+++ b/src/components/dialog/content/manager/infoPanel/tabs/DescriptionTabPanel.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="mt-4 overflow-hidden">
+  <div class="overflow-hidden">
    <InfoTextSection
      v-if="nodePack?.description"
      :sections="descriptionSections"
--- a/src/components/dialog/content/manager/infoPanel/tabs/NodesTabPanel.vue
+++ b/src/components/dialog/content/manager/infoPanel/tabs/NodesTabPanel.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col gap-4 mt-4 text-sm">
+  <div class="flex flex-col gap-4 text-sm">
    <template v-if="mappedNodeDefs?.length">
      <div
        v-for="nodeDef in mappedNodeDefs"
--- a/src/components/dialog/content/manager/infoPanel/tabs/WarningTabPanel.vue
+++ b/src/components/dialog/content/manager/infoPanel/tabs/WarningTabPanel.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="flex flex-col gap-3">
+    <button
+      v-if="importFailedInfo"
+      class="cursor-pointer outline-none border-none inline-flex items-center justify-end bg-transparent gap-1"
+      @click="showImportFailedDialog"
+    >
+      <i class="pi pi-code text-base"></i>
+      <span class="dark-theme:text-white text-sm">{{
+        t('serverStart.openLogs')
+      }}</span>
+    </button>
+    <div
+      v-for="(conflict, index) in conflictResult?.conflicts || []"
+      :key="index"
+      class="p-3 bg-yellow-800/20 rounded-md"
+    >
+      <div class="flex justify-between items-center">
+        <div class="text-sm break-words flex-1">
+          {{ getConflictMessage(conflict, $t) }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { useImportFailedDetection } from '@/composables/useImportFailedDetection'
+import { t } from '@/i18n'
+import { components } from '@/types/comfyRegistryTypes'
+import { ConflictDetectionResult } from '@/types/conflictDetectionTypes'
+import { getConflictMessage } from '@/utils/conflictMessageUtil'
+
+const { nodePack, conflictResult } = defineProps<{
+  nodePack: components['schemas']['Node']
+  conflictResult: ConflictDetectionResult | null | undefined
+}>()
+
+const packageId = computed(() => nodePack?.id || '')
+const { importFailedInfo, showImportFailedDialog } =
+  useImportFailedDetection(packageId)
+</script>
--- a/src/components/dialog/content/manager/packCard/PackCard.vue
+++ b/src/components/dialog/content/manager/packCard/PackCard.vue
@@ -43,7 +43,7 @@
            </span>
            <p
              v-if="nodePack.description"
-              class="flex-1 text-muted text-xs font-medium break-words overflow-hidden min-h-12 line-clamp-3 my-0 leading-4 mb-1 overflow-hidden"
+              class="flex-1 text-muted text-xs font-medium break-words overflow-hidden max-h-12 line-clamp-3 my-0 leading-4 mb-2 overflow-hidden"
            >
              {{ nodePack.description }}
            </p>
@@ -119,12 +119,20 @@ provide(IsInstallingKey, isInstalling)

 const { isPackInstalled, isPackEnabled } = useComfyManagerStore()

-const isInstalled = computed(() => isPackInstalled(nodePack?.id))
-const isDisabled = computed(
-  () => isInstalled.value && !isPackEnabled(nodePack?.id)
-)
+const isDisabled = ref(false)
+const managerStore = useComfyManagerStore()

-whenever(isInstalled, () => (isInstalling.value = false))
+// Watch the installedPacks object directly (which gets updated from WebSocket)
+whenever(
+  () => managerStore.installedPacksIds,
+  () => {
+    const isInstalled = isPackInstalled(nodePack?.id)
+    isDisabled.value = isInstalled && !isPackEnabled(nodePack?.id)
+
+    // Update isInstalling state after installation is complete
+    if (isInstalling.value && isInstalled) isInstalling.value = false
+  }
+)

 const nodesCount = computed(() =>
  isMergedNodePack(nodePack) ? nodePack.comfy_nodes?.length : undefined
--- a/src/components/dialog/content/manager/packCard/PackCardFooter.vue
+++ b/src/components/dialog/content/manager/packCard/PackCardFooter.vue
@@ -1,13 +1,39 @@
 <template>
  <div
-    class="min-h-12 flex justify-between items-center px-4 py-2 text-xs text-muted font-medium leading-3"
+    class="h-12 flex justify-between items-center px-4 text-xs text-muted font-medium leading-3"
  >
    <div v-if="nodePack.downloads" class="flex items-center gap-1.5">
      <i class="pi pi-download text-muted"></i>
      <span>{{ formattedDownloads }}</span>
    </div>
-    <PackInstallButton v-if="!isInstalled" :node-packs="[nodePack]" />
-    <PackEnableToggle v-else :node-pack="nodePack" />
+    <div class="flex justify-end items-center gap-2">
+      <template v-if="importFailed">
+        <div
+          class="flex justify-center items-center gap-2 cursor-pointer"
+          @click="showImportFailedDialog"
+        >
+          <i class="pi pi-exclamation-triangle text-red-500 text-sm"></i>
+          <span class="text-red-500 text-xs pt-0.5">{{
+            t('manager.failedToInstall')
+          }}</span>
+        </div>
+      </template>
+      <template v-else>
+        <template v-if="!isInstalled">
+          <PackInstallButton
+            :node-packs="[nodePack]"
+            :has-conflict="uninstalledPackConflict.hasConflict"
+            :conflict-info="uninstalledPackConflict.conflicts"
+          />
+        </template>
+        <template v-else>
+          <PackEnableToggle
+            :node-pack="nodePack"
+            :has-conflict="installedPackHasConflict"
+          />
+        </template>
+      </template>
+    </div>
  </div>
 </template>

@@ -17,7 +43,10 @@ import { useI18n } from 'vue-i18n'

 import PackEnableToggle from '@/components/dialog/content/manager/button/PackEnableToggle.vue'
 import PackInstallButton from '@/components/dialog/content/manager/button/PackInstallButton.vue'
+import { useConflictDetection } from '@/composables/useConflictDetection'
+import { useImportFailedDetection } from '@/composables/useImportFailedDetection'
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
+import { useConflictDetectionStore } from '@/stores/conflictDetectionStore'
 import type { components } from '@/types/comfyRegistryTypes'

 const { nodePack } = defineProps<{
@@ -27,9 +56,29 @@ const { nodePack } = defineProps<{
 const { isPackInstalled } = useComfyManagerStore()
 const isInstalled = computed(() => isPackInstalled(nodePack?.id))

-const { n } = useI18n()
+const { n, t } = useI18n()

 const formattedDownloads = computed(() =>
  nodePack.downloads ? n(nodePack.downloads) : ''
 )
+
+const { getConflictsForPackageByID } = useConflictDetectionStore()
+const { checkNodeCompatibility } = useConflictDetection()
+
+const { importFailed, showImportFailedDialog } = useImportFailedDetection(
+  nodePack.id
+)
+
+const conflicts = computed(
+  () => getConflictsForPackageByID(nodePack.id!) || null
+)
+
+const installedPackHasConflict = computed(() => {
+  if (!nodePack.id) return false
+  return !!conflicts.value
+})
+
+const uninstalledPackConflict = computed(() => {
+  return checkNodeCompatibility(nodePack)
+})
 </script>
--- a/src/components/dialog/content/manager/packCard/PackCardHeader.vue
+++ b/src/components/dialog/content/manager/packCard/PackCardHeader.vue
@@ -20,7 +20,10 @@
        {{ $n(nodePack.downloads) }}
      </div>
      <template v-if="isInstalled">
-        <PackEnableToggle :node-pack="nodePack" />
+        <PackEnableToggle
+          :node-pack="nodePack"
+          :has-conflict="!!packageConflicts"
+        />
      </template>
      <template v-else>
        <PackInstallButton :node-packs="[nodePack]" />
@@ -35,6 +38,7 @@ import { computed } from 'vue'
 import PackEnableToggle from '@/components/dialog/content/manager/button/PackEnableToggle.vue'
 import PackInstallButton from '@/components/dialog/content/manager/button/PackInstallButton.vue'
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
+import { useConflictDetectionStore } from '@/stores/conflictDetectionStore'
 import type { components } from '@/types/comfyRegistryTypes'

 const { nodePack } = defineProps<{
@@ -42,5 +46,13 @@ const { nodePack } = defineProps<{
 }>()

 const { isPackInstalled } = useComfyManagerStore()
+const { getConflictsForPackageByID } = useConflictDetectionStore()
 const isInstalled = computed(() => isPackInstalled(nodePack?.id))
+
+const packageConflicts = computed(() => {
+  if (!nodePack.id || !isInstalled.value) return null
+
+  // For installed packages, check conflicts from store
+  return getConflictsForPackageByID(nodePack.id)
+})
 </script>
--- a/src/components/dialog/content/manager/packIcon/PackIcon.vue
+++ b/src/components/dialog/content/manager/packIcon/PackIcon.vue
@@ -1,11 +1,37 @@
 <template>
-  <img
-    :src="isImageError ? DEFAULT_ICON : imgSrc"
-    :alt="nodePack.name + ' icon'"
-    class="object-contain rounded-lg max-h-72 max-w-72"
-    :style="{ width: cssWidth, height: cssHeight }"
-    @error="isImageError = true"
-  />
+  <div class="w-full max-w-[204] aspect-[2/1] rounded-lg overflow-hidden">
+    <!-- default banner show -->
+    <div v-if="showDefaultBanner" class="w-full h-full">
+      <img
+        :src="DEFAULT_BANNER"
+        alt="default banner"
+        class="w-full h-full object-cover"
+      />
+    </div>
+    <!-- banner_url or icon show -->
+    <div v-else class="relative w-full h-full">
+      <!-- blur background -->
+      <div
+        v-if="imgSrc"
+        class="absolute inset-0 bg-cover bg-center bg-no-repeat opacity-30"
+        :style="{
+          backgroundImage: `url(${imgSrc})`,
+          filter: 'blur(10px)'
+        }"
+      ></div>
+      <!-- image -->
+      <img
+        :src="isImageError ? DEFAULT_BANNER : imgSrc"
+        :alt="nodePack.name + ' banner'"
+        :class="
+          isImageError
+            ? 'relative w-full h-full object-cover z-10'
+            : 'relative w-full h-full object-contain z-10'
+        "
+        @error="isImageError = true"
+      />
+    </div>
+  </div>
 </template>

 <script setup lang="ts">
@@ -13,29 +39,14 @@ import { computed, ref } from 'vue'

 import { components } from '@/types/comfyRegistryTypes'

-const DEFAULT_ICON = '/assets/images/fallback-gradient-avatar.svg'
+const DEFAULT_BANNER = '/assets/images/fallback-gradient-avatar.svg'

-const {
-  nodePack,
-  width = '4.5rem',
-  height = '4.5rem'
-} = defineProps<{
+const { nodePack } = defineProps<{
  nodePack: components['schemas']['Node']
-  width?: string
-  height?: string
 }>()

 const isImageError = ref(false)
-const shouldShowFallback = computed(
-  () => !nodePack.icon || nodePack.icon.trim() === '' || isImageError.value
-)
-const imgSrc = computed(() =>
-  shouldShowFallback.value ? DEFAULT_ICON : nodePack.icon
-)

-const convertToCssValue = (value: string | number) =>
-  typeof value === 'number' ? `${value}rem` : value
-
-const cssWidth = computed(() => convertToCssValue(width))
-const cssHeight = computed(() => convertToCssValue(height))
+const showDefaultBanner = computed(() => !nodePack.banner_url && !nodePack.icon)
+const imgSrc = computed(() => nodePack.banner_url || nodePack.icon)
 </script>
--- a/src/components/dialog/content/manager/packIcon/PackIconStacked.vue
+++ b/src/components/dialog/content/manager/packIcon/PackIconStacked.vue
@@ -1,25 +1,19 @@
 <template>
-  <div class="relative w-24 h-24">
+  <div class="relative w-[224px] h-[104px] shadow-xl">
    <div
      v-for="(pack, index) in nodePacks.slice(0, maxVisible)"
      :key="pack.id"
-      class="absolute"
+      class="absolute w-[210px] h-[90px]"
      :style="{
        bottom: `${index * offset}px`,
        right: `${index * offset}px`,
        zIndex: maxVisible - index
      }"
    >
-      <div class="border rounded-lg p-0.5">
-        <PackIcon :node-pack="pack" width="4.5rem" height="4.5rem" />
+      <div class="border rounded-lg shadow-lg p-0.5">
+        <PackIcon :node-pack="pack" />
      </div>
    </div>
-    <div
-      v-if="nodePacks.length > maxVisible"
-      class="absolute -top-2 -right-2 bg-primary rounded-full w-7 h-7 flex items-center justify-center text-xs font-bold shadow-md z-10"
-    >
-      +{{ nodePacks.length - maxVisible }}
-    </div>
  </div>
 </template>

--- a/src/components/dialog/content/manager/registrySearchBar/RegistrySearchBar.vue
+++ b/src/components/dialog/content/manager/registrySearchBar/RegistrySearchBar.vue
@@ -33,6 +33,10 @@
        :node-packs="missingNodePacks"
        :label="$t('manager.installAllMissingNodes')"
      />
+      <PackUpdateButton
+        v-if="isUpdateAvailableTab && hasUpdateAvailable"
+        :node-packs="updateAvailableNodePacks"
+      />
    </div>
    <div class="flex mt-3 text-sm">
      <div class="flex gap-6 ml-1">
@@ -65,8 +69,10 @@ import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'

 import PackInstallButton from '@/components/dialog/content/manager/button/PackInstallButton.vue'
+import PackUpdateButton from '@/components/dialog/content/manager/button/PackUpdateButton.vue'
 import SearchFilterDropdown from '@/components/dialog/content/manager/registrySearchBar/SearchFilterDropdown.vue'
 import { useMissingNodes } from '@/composables/nodePack/useMissingNodes'
+import { useUpdateAvailableNodes } from '@/composables/nodePack/useUpdateAvailableNodes'
 import {
  type SearchOption,
  SortableAlgoliaField
@@ -83,6 +89,7 @@ const { searchResults, sortOptions } = defineProps<{
  suggestions?: QuerySuggestion[]
  sortOptions?: SortableField[]
  isMissingTab?: boolean
+  isUpdateAvailableTab?: boolean
 }>()

 const searchQuery = defineModel<string>('searchQuery')
@@ -96,6 +103,10 @@ const { t } = useI18n()
 // Get missing node packs from workflow with loading and error states
 const { missingNodePacks, isLoading, error } = useMissingNodes()

+// Use the composable to get update available nodes
+const { hasUpdateAvailable, updateAvailableNodePacks } =
+  useUpdateAvailableNodes()
+
 const hasResults = computed(
  () => searchQuery.value?.trim() && searchResults?.length
 )
--- a/src/components/dialog/footer/ManagerProgressFooter.vue
+++ b/src/components/dialog/footer/ManagerProgressFooter.vue
@@ -1,41 +1,44 @@
 <template>
  <div
-    class="w-full px-6 py-4 shadow-lg flex items-center justify-between"
+    class="w-full px-6 py-2 shadow-lg flex items-center justify-between"
    :class="{
      'rounded-t-none': progressDialogContent.isExpanded,
      'rounded-lg': !progressDialogContent.isExpanded
    }"
  >
-    <div class="justify-center text-sm font-bold leading-none">
+    <div class="flex items-center text-base leading-none">
      <div class="flex items-center">
        <template v-if="isInProgress">
-          <i class="pi pi-spin pi-spinner mr-2 text-3xl" />
+          <DotSpinner duration="1s" class="mr-2" />
+          <span>{{ currentTaskName }}</span>
+        </template>
+        <template v-else-if="isRestartCompleted">
+          <span class="mr-2">🎉</span>
          <span>{{ currentTaskName }}</span>
        </template>
        <template v-else>
-          <i class="pi pi-check-circle mr-2 text-green-500" />
-          <span class="leading-none">{{
-            $t('manager.restartToApplyChanges')
-          }}</span>
+          <span class="mr-2">✅</span>
+          <span>{{ $t('manager.restartToApplyChanges') }}</span>
        </template>
      </div>
    </div>
    <div class="flex items-center gap-4">
-      <span v-if="isInProgress" class="text-xs font-bold text-neutral-600">
-        {{ comfyManagerStore.uncompletedCount }} {{ $t('g.progressCountOf') }}
+      <span v-if="isInProgress" class="text-sm text-neutral-700">
+        {{ completedTasksCount }} {{ $t('g.progressCountOf') }}
        {{ comfyManagerStore.taskLogs.length }}
      </span>
      <div class="flex items-center">
        <Button
-          v-if="!isInProgress"
+          v-if="!isInProgress && !isRestartCompleted"
          rounded
          outlined
-          class="px-4 py-2 rounded-md mr-4"
+          class="mr-4 rounded-md border-2 px-3 text-neutral-600 border-neutral-900 hover:bg-neutral-100 !dark-theme:bg-transparent dark-theme:text-white dark-theme:border-white dark-theme:hover:bg-neutral-800"
          @click="handleRestart"
        >
-          {{ $t('g.restart') }}
+          {{ $t('manager.applyChanges') }}
        </Button>
        <Button
+          v-else-if="!isRestartCompleted"
          :icon="
            progressDialogContent.isExpanded
              ? 'pi pi-chevron-up'
@@ -44,6 +47,7 @@
          text
          rounded
          size="small"
+          class="font-bold"
          severity="secondary"
          :aria-label="progressDialogContent.isExpanded ? 'Collapse' : 'Expand'"
          @click.stop="progressDialogContent.toggle"
@@ -53,6 +57,7 @@
          text
          rounded
          size="small"
+          class="font-bold"
          severity="secondary"
          aria-label="Close"
          @click.stop="closeDialog"
@@ -65,9 +70,10 @@
 <script setup lang="ts">
 import { useEventListener } from '@vueuse/core'
 import Button from 'primevue/button'
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'

+import DotSpinner from '@/components/common/DotSpinner.vue'
 import { api } from '@/scripts/api'
 import { useComfyManagerService } from '@/services/comfyManagerService'
 import { useWorkflowService } from '@/services/workflowService'
@@ -77,41 +83,93 @@ import {
 } from '@/stores/comfyManagerStore'
 import { useCommandStore } from '@/stores/commandStore'
 import { useDialogStore } from '@/stores/dialogStore'
+import { useSettingStore } from '@/stores/settingStore'

 const { t } = useI18n()
 const dialogStore = useDialogStore()
 const progressDialogContent = useManagerProgressDialogStore()
 const comfyManagerStore = useComfyManagerStore()
+const settingStore = useSettingStore()

-const isInProgress = computed(() => comfyManagerStore.uncompletedCount > 0)
+// State management for restart process
+const isRestarting = ref<boolean>(false)
+const isRestartCompleted = ref<boolean>(false)
+
+const isInProgress = computed(
+  () => comfyManagerStore.isProcessingTasks || isRestarting.value
+)
+
+const completedTasksCount = computed(() => {
+  return (
+    comfyManagerStore.succeededTasksIds.length +
+    comfyManagerStore.failedTasksIds.length
+  )
+})

 const closeDialog = () => {
  dialogStore.closeDialog({ key: 'global-manager-progress-dialog' })
 }

-const fallbackTaskName = t('g.installing')
+const fallbackTaskName = t('manager.installingDependencies')
 const currentTaskName = computed(() => {
+  if (isRestarting.value) {
+    return t('manager.restartingBackend')
+  }
+  if (isRestartCompleted.value) {
+    return t('manager.extensionsSuccessfullyInstalled')
+  }
  if (!comfyManagerStore.taskLogs.length) return fallbackTaskName
  const task = comfyManagerStore.taskLogs.at(-1)
  return task?.taskName ?? fallbackTaskName
 })

 const handleRestart = async () => {
-  const onReconnect = async () => {
-    // Refresh manager state
+  // Store original toast setting value
+  const originalToastSetting = settingStore.get(
+    'Comfy.Toast.DisableReconnectingToast'
+  )

-    comfyManagerStore.clearLogs()
-    comfyManagerStore.setStale()
+  try {
+    await settingStore.set('Comfy.Toast.DisableReconnectingToast', true)

-    // Refresh node definitions
-    await useCommandStore().execute('Comfy.RefreshNodeDefinitions')
+    isRestarting.value = true

-    // Reload workflow
-    await useWorkflowService().reloadCurrentWorkflow()
+    const onReconnect = async () => {
+      try {
+        comfyManagerStore.setStale()
+
+        await useCommandStore().execute('Comfy.RefreshNodeDefinitions')
+
+        await useWorkflowService().reloadCurrentWorkflow()
+      } finally {
+        await settingStore.set(
+          'Comfy.Toast.DisableReconnectingToast',
+          originalToastSetting
+        )
+
+        isRestarting.value = false
+        isRestartCompleted.value = true
+
+        setTimeout(() => {
+          closeDialog()
+          comfyManagerStore.resetTaskState()
+        }, 3000)
+      }
+    }
+
+    useEventListener(api, 'reconnected', onReconnect, { once: true })
+
+    await useComfyManagerService().rebootComfyUI()
+  } catch (error) {
+    // If restart fails, restore settings and reset state
+    await settingStore.set(
+      'Comfy.Toast.DisableReconnectingToast',
+      originalToastSetting
+    )
+    isRestarting.value = false
+    isRestartCompleted.value = false
+    closeDialog() // Close dialog on error
+    throw error
  }
-  useEventListener(api, 'reconnected', onReconnect, { once: true })
-
-  await useComfyManagerService().rebootComfyUI()
-  closeDialog()
 }
 </script>
--- a/src/components/dialog/header/ManagerProgressHeader.vue
+++ b/src/components/dialog/header/ManagerProgressHeader.vue
@@ -18,16 +18,40 @@

 <script setup lang="ts">
 import TabMenu from 'primevue/tabmenu'
-import { ref } from 'vue'
+import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'

-import { useManagerProgressDialogStore } from '@/stores/comfyManagerStore'
+import {
+  useComfyManagerStore,
+  useManagerProgressDialogStore
+} from '@/stores/comfyManagerStore'

 const progressDialogContent = useManagerProgressDialogStore()
-const activeTabIndex = ref(0)
+const comfyManagerStore = useComfyManagerStore()
+const activeTabIndex = computed({
+  get: () => progressDialogContent.getActiveTabIndex(),
+  set: (value: number) => progressDialogContent.setActiveTabIndex(value)
+})
 const { t } = useI18n()
-const tabs = [
-  { label: t('manager.installationQueue') },
-  { label: t('manager.failed', { count: 0 }) }
-]
+
+const failedCount = computed(() => comfyManagerStore.failedTasksIds.length)
+
+const queueSuffix = computed(() => {
+  const queueLength = comfyManagerStore.managerQueue.queueLength
+  if (queueLength === 0) {
+    return ''
+  }
+  return ` (${queueLength})`
+})
+const failedSuffix = computed(() => {
+  if (failedCount.value === 0) {
+    return ''
+  }
+  return ` (${failedCount.value})`
+})
+
+const tabs = computed(() => [
+  { label: t('manager.installationQueue') + queueSuffix.value },
+  { label: t('manager.failed') + failedSuffix.value }
+])
 </script>
--- a/src/components/graph/GraphCanvasMenu.vue
+++ b/src/components/graph/GraphCanvasMenu.vue
@@ -1,6 +1,7 @@
 <template>
  <ButtonGroup
    class="p-buttongroup-vertical absolute bottom-[10px] right-[10px] z-[1000]"
+    @wheel="canvasInteractions.handleWheel"
  >
    <Button
      v-tooltip.left="t('graphCanvasMenu.zoomIn')"
@@ -75,6 +76,7 @@ import ButtonGroup from 'primevue/buttongroup'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'

+import { useCanvasInteractions } from '@/composables/graph/useCanvasInteractions'
 import { useCommandStore } from '@/stores/commandStore'
 import { useCanvasStore } from '@/stores/graphStore'
 import { useSettingStore } from '@/stores/settingStore'
@@ -83,6 +85,7 @@ const { t } = useI18n()
 const commandStore = useCommandStore()
 const canvasStore = useCanvasStore()
 const settingStore = useSettingStore()
+const canvasInteractions = useCanvasInteractions()

 const minimapVisible = computed(() => settingStore.get('Comfy.Minimap.Visible'))
 const linkHidden = computed(
--- a/src/components/graph/SelectionToolbox.vue
+++ b/src/components/graph/SelectionToolbox.vue
@@ -5,6 +5,7 @@
      header: 'hidden',
      content: 'p-0 flex flex-row'
    }"
+    @wheel="canvasInteractions.handleWheel"
  >
    <ExecuteButton />
    <ColorPickerButton />
@@ -39,6 +40,7 @@ import HelpButton from '@/components/graph/selectionToolbox/HelpButton.vue'
 import MaskEditorButton from '@/components/graph/selectionToolbox/MaskEditorButton.vue'
 import PinButton from '@/components/graph/selectionToolbox/PinButton.vue'
 import RefreshButton from '@/components/graph/selectionToolbox/RefreshButton.vue'
+import { useCanvasInteractions } from '@/composables/graph/useCanvasInteractions'
 import { useExtensionService } from '@/services/extensionService'
 import { type ComfyCommandImpl, useCommandStore } from '@/stores/commandStore'
 import { useCanvasStore } from '@/stores/graphStore'
@@ -46,6 +48,7 @@ import { useCanvasStore } from '@/stores/graphStore'
 const commandStore = useCommandStore()
 const canvasStore = useCanvasStore()
 const extensionService = useExtensionService()
+const canvasInteractions = useCanvasInteractions()

 const extensionToolboxCommands = computed<ComfyCommandImpl[]>(() => {
  const commandIds = new Set<string>(
--- a/src/components/graph/selectionToolbox/ConvertToSubgraphButton.vue
+++ b/src/components/graph/selectionToolbox/ConvertToSubgraphButton.vue
@@ -7,9 +7,12 @@
    }"
    severity="secondary"
    text
-    icon="pi pi-box"
    @click="() => commandStore.execute('Comfy.Graph.ConvertToSubgraph')"
-  />
+  >
+    <template #icon>
+      <i-comfy:workflow />
+    </template>
+  </Button>
 </template>

 <script setup lang="ts">
--- a/src/components/helpcenter/HelpCenterMenuContent.vue
+++ b/src/components/helpcenter/HelpCenterMenuContent.vue
@@ -14,7 +14,17 @@
        @mouseenter="onMenuItemHover(menuItem.key, $event)"
        @mouseleave="onMenuItemLeave(menuItem.key)"
      >
-        <i :class="menuItem.icon" class="help-menu-icon" />
+        <div class="help-menu-icon-container">
+          <div class="help-menu-icon">
+            <component
+              :is="menuItem.icon"
+              v-if="typeof menuItem.icon === 'object'"
+              :size="16"
+            />
+            <i v-else :class="menuItem.icon" />
+          </div>
+          <div v-if="menuItem.showRedDot" class="menu-red-dot" />
+        </div>
        <span class="menu-label">{{ menuItem.label }}</span>
        <i v-if="menuItem.key === 'more'" class="pi pi-chevron-right" />
      </button>
@@ -119,10 +129,21 @@
 </template>

 <script setup lang="ts">
+// No need to import useStorage anymore - it's in the composable
 import Button from 'primevue/button'
-import { type CSSProperties, computed, nextTick, onMounted, ref } from 'vue'
+import {
+  type CSSProperties,
+  type Component,
+  computed,
+  nextTick,
+  onMounted,
+  ref
+} from 'vue'
 import { useI18n } from 'vue-i18n'

+import PuzzleIcon from '@/components/icons/PuzzleIcon.vue'
+import { useConflictAcknowledgment } from '@/composables/useConflictAcknowledgment'
+import { useDialogService } from '@/services/dialogService'
 import { type ReleaseNote } from '@/services/releaseService'
 import { useCommandStore } from '@/stores/commandStore'
 import { useReleaseStore } from '@/stores/releaseStore'
@@ -133,12 +154,13 @@ import { formatVersionAnchor } from '@/utils/formatUtil'
 // Types
 interface MenuItem {
  key: string
-  icon?: string
+  icon?: string | Component
  label?: string
  action?: () => void
  visible?: boolean
  type?: 'item' | 'divider'
  items?: MenuItem[]
+  showRedDot?: boolean
 }

 // Constants
@@ -170,6 +192,7 @@ const { t, locale } = useI18n()
 const releaseStore = useReleaseStore()
 const commandStore = useCommandStore()
 const settingStore = useSettingStore()
+const dialogService = useDialogService()

 // Emits
 const emit = defineEmits<{
@@ -192,6 +215,10 @@ const moreMenuItem = computed(() =>
  menuItems.value.find((item) => item.key === 'more')
 )

+// Use conflict acknowledgment state from composable
+const { shouldShowRedDot: shouldShowManagerRedDot } =
+  useConflictAcknowledgment()
+
 const menuItems = computed<MenuItem[]>(() => {
  const moreItems: MenuItem[] = [
    {
@@ -271,6 +298,17 @@ const menuItems = computed<MenuItem[]>(() => {
        emit('close')
      }
    },
+    {
+      key: 'manager',
+      type: 'item',
+      icon: PuzzleIcon,
+      label: t('helpCenter.managerExtension'),
+      showRedDot: shouldShowManagerRedDot.value,
+      action: () => {
+        dialogService.showManagerDialog()
+        emit('close')
+      }
+    },
    {
      key: 'more',
      type: 'item',
@@ -505,16 +543,39 @@ onMounted(async () => {
  box-shadow: none;
 }

-.help-menu-icon {
+.help-menu-icon-container {
+  position: relative;
  margin-right: 0.75rem;
+  width: 16px;
+  flex-shrink: 0;
+}
+
+.help-menu-icon {
  font-size: 1rem;
  color: var(--p-text-muted-color);
  width: 16px;
  display: flex;
  justify-content: center;
+  align-items: center;
  flex-shrink: 0;
 }

+.help-menu-icon svg {
+  color: var(--p-text-muted-color);
+}
+
+.menu-red-dot {
+  position: absolute;
+  top: -2px;
+  right: -2px;
+  width: 8px;
+  height: 8px;
+  background: #ff3b30;
+  border-radius: 50%;
+  border: 1.5px solid var(--p-content-background);
+  z-index: 1;
+}
+
 .menu-label {
  flex: 1;
 }
--- a/src/components/helpcenter/WhatsNewPopup.vue
+++ b/src/components/helpcenter/WhatsNewPopup.vue
@@ -75,6 +75,11 @@ import { formatVersionAnchor } from '@/utils/formatUtil'
 const { locale, t } = useI18n()
 const releaseStore = useReleaseStore()

+// Emit event for parent component
+const emit = defineEmits<{
+  'whats-new-dismissed': []
+}>()
+
 // Local state for dismissed status
 const isDismissed = ref(false)

@@ -134,6 +139,10 @@ const closePopup = async () => {
    await releaseStore.handleWhatsNewSeen(latestRelease.value.version)
  }
  hide()
+
+  // Emit event to notify parent that What's New was dismissed
+  // Parent can then check if conflict modal should be shown
+  emit('whats-new-dismissed')
 }

 // Learn more handled by anchor href
--- a/src/components/icons/PuzzleIcon.vue
+++ b/src/components/icons/PuzzleIcon.vue
@@ -0,0 +1,43 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    :width="size"
+    :height="size"
+    viewBox="0 0 16 16"
+    fill="none"
+    :class="iconClass"
+  >
+    <g clip-path="url(#clip0_1099_16244)">
+      <path
+        d="M4.99992 3.00016C4.99992 2.07969 5.74611 1.3335 6.66658 1.3335C7.58706 1.3335 8.33325 2.07969 8.33325 3.00016V4.00016H8.99992C9.9318 4.00016 10.3977 4.00016 10.7653 4.1524C11.2553 4.35539 11.6447 4.74474 11.8477 5.2348C11.9999 5.60234 11.9999 6.06828 11.9999 7.00016H12.9999C13.9204 7.00016 14.6666 7.74635 14.6666 8.66683C14.6666 9.5873 13.9204 10.3335 12.9999 10.3335H11.9999V11.4668C11.9999 12.5869 11.9999 13.147 11.7819 13.5748C11.5902 13.9511 11.2842 14.2571 10.9079 14.4488C10.4801 14.6668 9.92002 14.6668 8.79992 14.6668H8.33325V13.5002C8.33325 12.6717 7.66168 12.0002 6.83325 12.0002C6.00482 12.0002 5.33325 12.6717 5.33325 13.5002V14.6668H4.53325C3.41315 14.6668 2.85309 14.6668 2.42527 14.4488C2.04895 14.2571 1.74299 13.9511 1.55124 13.5748C1.33325 13.147 1.33325 12.5869 1.33325 11.4668V10.3335H2.33325C3.25373 10.3335 3.99992 9.5873 3.99992 8.66683C3.99992 7.74635 3.25373 7.00016 2.33325 7.00016H1.33325C1.33325 6.06828 1.33325 5.60234 1.48549 5.2348C1.68848 4.74474 2.07783 4.35539 2.56789 4.1524C2.93543 4.00016 3.40137 4.00016 4.33325 4.00016H4.99992V3.00016Z"
+        :stroke="color"
+        stroke-width="1.2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_1099_16244">
+        <rect width="16" height="16" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  size?: number | string
+  color?: string
+  class?: string
+}
+
+const {
+  size = 16,
+  color = 'currentColor',
+  class: className
+} = defineProps<Props>()
+
+const iconClass = computed(() => className || '')
+</script>
--- a/src/components/icons/VerifiedIcon.vue
+++ b/src/components/icons/VerifiedIcon.vue
@@ -0,0 +1,29 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    :width="size"
+    :height="size"
+    viewBox="0 0 16 16"
+    fill="none"
+    :class="iconClass"
+  >
+    <path
+      d="M8.00049 1.3335C8.73661 1.33367 9.33332 1.93038 9.3335 2.6665V2.83447C9.82278 2.96041 10.2851 3.15405 10.7095 3.40479L10.8286 3.28564C11.3493 2.76525 12.1937 2.76519 12.7144 3.28564C13.235 3.80626 13.2348 4.65067 12.7144 5.17139L12.5952 5.29053C12.846 5.71486 13.0396 6.17725 13.1655 6.6665H13.3335C14.0699 6.6665 14.6665 7.26411 14.6665 8.00049C14.6663 8.73672 14.0698 9.3335 13.3335 9.3335H13.1655C13.0396 9.82284 12.846 10.2851 12.5952 10.7095L12.7144 10.8286C13.235 11.3493 13.235 12.1937 12.7144 12.7144C12.1937 13.235 11.3493 13.235 10.8286 12.7144L10.7095 12.5952C10.2851 12.846 9.82284 13.0396 9.3335 13.1655V13.3335C9.3335 14.0698 8.73672 14.6663 8.00049 14.6665C7.26411 14.6665 6.6665 14.0699 6.6665 13.3335V13.1655C6.17725 13.0396 5.71486 12.846 5.29053 12.5952L5.17139 12.7144C4.65067 13.2348 3.80626 13.235 3.28564 12.7144C2.76519 12.1937 2.76525 11.3493 3.28564 10.8286L3.40479 10.7095C3.15405 10.2851 2.96041 9.82278 2.83447 9.3335H2.6665C1.93038 9.33332 1.33367 8.73661 1.3335 8.00049C1.3335 7.26422 1.93027 6.66668 2.6665 6.6665H2.83447C2.96043 6.17722 3.15403 5.71488 3.40479 5.29053L3.28564 5.17139C2.76536 4.65065 2.76508 3.80621 3.28564 3.28564C3.80621 2.76508 4.65065 2.76536 5.17139 3.28564L5.29053 3.40479C5.71488 3.15403 6.17722 2.96043 6.6665 2.83447V2.6665C6.66668 1.93027 7.26422 1.3335 8.00049 1.3335ZM7.3335 8.00049L6.00049 6.6665L4.6665 8.00049L7.3335 10.6665L11.3335 6.6665L10.0005 5.3335L7.3335 8.00049Z"
+      :fill="color"
+    />
+  </svg>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  size?: number | string
+  color?: string
+  class?: string
+}
+
+const { size = 16, color = '#60A5FA', class: className } = defineProps<Props>()
+
+const iconClass = computed(() => className || '')
+</script>
--- a/src/components/sidebar/SidebarHelpCenterIcon.vue
+++ b/src/components/sidebar/SidebarHelpCenterIcon.vue
@@ -42,6 +42,7 @@
          'sidebar-right': sidebarLocation === 'right',
          'small-sidebar': sidebarSize === 'small'
        }"
+        @whats-new-dismissed="handleWhatsNewDismissed"
      />
    </Teleport>

@@ -57,12 +58,14 @@
 </template>

 <script setup lang="ts">
-import { storeToRefs } from 'pinia'
 import { computed, onMounted, ref } from 'vue'

 import HelpCenterMenuContent from '@/components/helpcenter/HelpCenterMenuContent.vue'
 import ReleaseNotificationToast from '@/components/helpcenter/ReleaseNotificationToast.vue'
 import WhatsNewPopup from '@/components/helpcenter/WhatsNewPopup.vue'
+import { useConflictAcknowledgment } from '@/composables/useConflictAcknowledgment'
+import { useConflictDetection } from '@/composables/useConflictDetection'
+import { useDialogService } from '@/services/dialogService'
 import { useReleaseStore } from '@/stores/releaseStore'
 import { useSettingStore } from '@/stores/settingStore'

@@ -70,9 +73,21 @@ import SidebarIcon from './SidebarIcon.vue'

 const settingStore = useSettingStore()
 const releaseStore = useReleaseStore()
-const { shouldShowRedDot } = storeToRefs(releaseStore)
+const conflictDetection = useConflictDetection()
+const conflictAcknowledgment = useConflictAcknowledgment()
+const { showNodeConflictDialog } = useDialogService()
 const isHelpCenterVisible = ref(false)

+// Use conflict acknowledgment state from composable
+const { shouldShowRedDot: shouldShowConflictRedDot, markConflictsAsSeen } =
+  conflictAcknowledgment
+
+// Use either release red dot or conflict red dot
+const shouldShowRedDot = computed(() => {
+  const releaseRedDot = releaseStore.shouldShowRedDot
+  return releaseRedDot || shouldShowConflictRedDot.value
+})
+
 const sidebarLocation = computed(() =>
  settingStore.get('Comfy.Sidebar.Location')
 )
@@ -87,6 +102,38 @@ const closeHelpCenter = () => {
  isHelpCenterVisible.value = false
 }

+/**
+ * Handle What's New popup dismissal
+ * Check if conflict modal should be shown after ComfyUI update
+ */
+const handleWhatsNewDismissed = async () => {
+  try {
+    // Check if conflict modal should be shown after update
+    const shouldShow =
+      await conflictDetection.shouldShowConflictModalAfterUpdate()
+
+    if (shouldShow) {
+      showConflictModal()
+    }
+  } catch (error) {
+    console.error('[HelpCenter] Error checking conflict modal:', error)
+  }
+}
+
+/**
+ * Show the node conflict dialog with current conflict data
+ */
+const showConflictModal = () => {
+  showNodeConflictDialog({
+    showAfterWhatsNew: true,
+    dialogComponentProps: {
+      onClose: () => {
+        markConflictsAsSeen()
+      }
+    }
+  })
+}
+
 // Initialize release store on mount
 onMounted(async () => {
  // Initialize release store to fetch releases for toast and popup
--- a/src/components/topbar/WorkflowTab.vue
+++ b/src/components/topbar/WorkflowTab.vue
@@ -3,7 +3,8 @@
    <span
      v-tooltip.bottom="{
        value: workflowOption.workflow.key,
-        class: 'workflow-tab-tooltip'
+        class: 'workflow-tab-tooltip',
+        showDelay: 512
      }"
      class="workflow-label text-sm max-w-[150px] min-w-[30px] truncate inline-block"
    >
--- a/src/composables/element/useAbsolutePosition.ts
+++ b/src/composables/element/useAbsolutePosition.ts
@@ -1,8 +1,9 @@
 import type { Size, Vector2 } from '@comfyorg/litegraph'
-import { CSSProperties, ref } from 'vue'
+import { CSSProperties, ref, watch } from 'vue'

 import { useCanvasPositionConversion } from '@/composables/element/useCanvasPositionConversion'
 import { useCanvasStore } from '@/stores/graphStore'
+import { useSettingStore } from '@/stores/settingStore'

 export interface PositionConfig {
  /* The position of the element on litegraph canvas */
@@ -18,9 +19,18 @@ export function useAbsolutePosition(options: { useTransform?: boolean } = {}) {

  const canvasStore = useCanvasStore()
  const lgCanvas = canvasStore.getCanvas()
-  const { canvasPosToClientPos } = useCanvasPositionConversion(
-    lgCanvas.canvas,
-    lgCanvas
+  const { canvasPosToClientPos, update: updateCanvasPosition } =
+    useCanvasPositionConversion(lgCanvas.canvas, lgCanvas)
+
+  const settingStore = useSettingStore()
+  watch(
+    [
+      () => settingStore.get('Comfy.Sidebar.Location'),
+      () => settingStore.get('Comfy.Sidebar.Size'),
+      () => settingStore.get('Comfy.UseNewMenu')
+    ],
+    () => updateCanvasPosition(),
+    { flush: 'post' }
  )

  /**
--- a/src/composables/element/useCanvasPositionConversion.ts
+++ b/src/composables/element/useCanvasPositionConversion.ts
@@ -11,7 +11,7 @@ export const useCanvasPositionConversion = (
  canvasElement: Parameters<typeof useElementBounding>[0],
  lgCanvas: LGraphCanvas
 ) => {
-  const { left, top } = useElementBounding(canvasElement)
+  const { left, top, update } = useElementBounding(canvasElement)

  const clientPosToCanvasPos = (pos: Vector2): Vector2 => {
    const { offset, scale } = lgCanvas.ds
@@ -31,6 +31,7 @@ export const useCanvasPositionConversion = (

  return {
    clientPosToCanvasPos,
-    canvasPosToClientPos
+    canvasPosToClientPos,
+    update
  }
 }
--- a/src/composables/graph/useCanvasInteractions.ts
+++ b/src/composables/graph/useCanvasInteractions.ts
@@ -0,0 +1,59 @@
+import { computed } from 'vue'
+
+import { app } from '@/scripts/app'
+import { useSettingStore } from '@/stores/settingStore'
+
+/**
+ * Composable for handling canvas interactions from Vue components.
+ * This provides a unified way to forward events to the LiteGraph canvas
+ * and will be the foundation for migrating canvas interactions to Vue.
+ */
+export function useCanvasInteractions() {
+  const settingStore = useSettingStore()
+
+  const isStandardNavMode = computed(
+    () => settingStore.get('Comfy.Canvas.NavigationMode') === 'standard'
+  )
+
+  /**
+   * Handles wheel events from UI components that should be forwarded to canvas
+   * when appropriate (e.g., Ctrl+wheel for zoom in standard mode)
+   */
+  const handleWheel = (event: WheelEvent) => {
+    // In standard mode, Ctrl+wheel should go to canvas for zoom
+    if (isStandardNavMode.value && (event.ctrlKey || event.metaKey)) {
+      event.preventDefault() // Prevent browser zoom
+      forwardEventToCanvas(event)
+      return
+    }
+
+    // In legacy mode, all wheel events go to canvas for zoom
+    if (!isStandardNavMode.value) {
+      event.preventDefault()
+      forwardEventToCanvas(event)
+      return
+    }
+
+    // Otherwise, let the component handle it normally
+  }
+
+  /**
+   * Forwards an event to the LiteGraph canvas
+   */
+  const forwardEventToCanvas = (
+    event: WheelEvent | PointerEvent | MouseEvent
+  ) => {
+    const canvasEl = app.canvas?.canvas
+    if (!canvasEl) return
+
+    // Create new event with same properties
+    const EventConstructor = event.constructor as typeof WheelEvent
+    const newEvent = new EventConstructor(event.type, event)
+    canvasEl.dispatchEvent(newEvent)
+  }
+
+  return {
+    handleWheel,
+    forwardEventToCanvas
+  }
+}
--- a/src/composables/node/useNodePricing.ts
+++ b/src/composables/node/useNodePricing.ts
@@ -30,6 +30,25 @@ function safePricingExecution(
  }
 }

+/**
+ * Helper function to calculate Runway duration-based pricing
+ * @param node - The LiteGraph node
+ * @returns Formatted price string
+ */
+const calculateRunwayDurationPrice = (node: LGraphNode): string => {
+  const durationWidget = node.widgets?.find(
+    (w) => w.name === 'duration'
+  ) as IComboWidget
+
+  if (!durationWidget) return '$0.05/second'
+
+  const duration = Number(durationWidget.value)
+  // If duration is 0 or NaN, don't fall back to 5 seconds - just use 0
+  const validDuration = isNaN(duration) ? 5 : duration
+  const cost = (0.05 * validDuration).toFixed(2)
+  return `$${cost}/Run`
+}
+
 const pixversePricingCalculator = (node: LGraphNode): string => {
  const durationWidget = node.widgets?.find(
    (w) => w.name === 'duration_seconds'
@@ -110,15 +129,27 @@ const apiNodeCosts: Record<string, { displayPrice: string | PricingFunction }> =
    FluxProUltraImageNode: {
      displayPrice: '$0.06/Run'
    },
+    FluxProKontextProNode: {
+      displayPrice: '$0.04/Run'
+    },
+    FluxProKontextMaxNode: {
+      displayPrice: '$0.08/Run'
+    },
    IdeogramV1: {
      displayPrice: (node: LGraphNode): string => {
        const numImagesWidget = node.widgets?.find(
          (w) => w.name === 'num_images'
        ) as IComboWidget
-        if (!numImagesWidget) return '$0.06 x num_images/Run'
+        const turboWidget = node.widgets?.find(
+          (w) => w.name === 'turbo'
+        ) as IComboWidget
+
+        if (!numImagesWidget) return '$0.02-0.06 x num_images/Run'

        const numImages = Number(numImagesWidget.value) || 1
-        const cost = (0.06 * numImages).toFixed(2)
+        const turbo = String(turboWidget?.value).toLowerCase() === 'true'
+        const basePrice = turbo ? 0.02 : 0.06
+        const cost = (basePrice * numImages).toFixed(2)
        return `$${cost}/Run`
      }
    },
@@ -127,10 +158,16 @@ const apiNodeCosts: Record<string, { displayPrice: string | PricingFunction }> =
        const numImagesWidget = node.widgets?.find(
          (w) => w.name === 'num_images'
        ) as IComboWidget
-        if (!numImagesWidget) return '$0.08 x num_images/Run'
+        const turboWidget = node.widgets?.find(
+          (w) => w.name === 'turbo'
+        ) as IComboWidget
+
+        if (!numImagesWidget) return '$0.05-0.08 x num_images/Run'

        const numImages = Number(numImagesWidget.value) || 1
-        const cost = (0.08 * numImages).toFixed(2)
+        const turbo = String(turboWidget?.value).toLowerCase() === 'true'
+        const basePrice = turbo ? 0.05 : 0.08
+        const cost = (basePrice * numImages).toFixed(2)
        return `$${cost}/Run`
      }
    },
@@ -651,10 +688,10 @@ const apiNodeCosts: Record<string, { displayPrice: string | PricingFunction }> =

        if (duration.includes('5')) {
          if (resolution.includes('720p')) return '$0.3/Run'
-          if (resolution.includes('1080p')) return '~$0.3/Run'
+          if (resolution.includes('1080p')) return '$0.5/Run'
        } else if (duration.includes('10')) {
-          if (resolution.includes('720p')) return '$0.25/Run'
-          if (resolution.includes('1080p')) return '$1.0/Run'
+          if (resolution.includes('720p')) return '$0.4/Run'
+          if (resolution.includes('1080p')) return '$1.5/Run'
        }

        return '$0.3/Run'
@@ -678,9 +715,9 @@ const apiNodeCosts: Record<string, { displayPrice: string | PricingFunction }> =

        if (duration.includes('5')) {
          if (resolution.includes('720p')) return '$0.2/Run'
-          if (resolution.includes('1080p')) return '~$0.45/Run'
+          if (resolution.includes('1080p')) return '$0.3/Run'
        } else if (duration.includes('10')) {
-          if (resolution.includes('720p')) return '$0.6/Run'
+          if (resolution.includes('720p')) return '$0.25/Run'
          if (resolution.includes('1080p')) return '$1.0/Run'
        }

@@ -896,18 +933,11 @@ const apiNodeCosts: Record<string, { displayPrice: string | PricingFunction }> =
        }

        const model = String(modelWidget.value)
-        const aspectRatio = String(aspectRatioWidget.value)

        if (model.includes('photon-flash-1')) {
-          if (aspectRatio.includes('1:1')) return '$0.0045/Run'
-          if (aspectRatio.includes('16:9')) return '$0.0045/Run'
-          if (aspectRatio.includes('4:3')) return '$0.0046/Run'
-          if (aspectRatio.includes('21:9')) return '$0.0047/Run'
+          return '$0.0019/Run'
        } else if (model.includes('photon-1')) {
-          if (aspectRatio.includes('1:1')) return '$0.0172/Run'
-          if (aspectRatio.includes('16:9')) return '$0.0172/Run'
-          if (aspectRatio.includes('4:3')) return '$0.0176/Run'
-          if (aspectRatio.includes('21:9')) return '$0.0182/Run'
+          return '$0.0073/Run'
        }

        return '$0.0172/Run'
@@ -918,31 +948,17 @@ const apiNodeCosts: Record<string, { displayPrice: string | PricingFunction }> =
        const modelWidget = node.widgets?.find(
          (w) => w.name === 'model'
        ) as IComboWidget
-        const aspectRatioWidget = node.widgets?.find(
-          (w) => w.name === 'aspect_ratio'
-        ) as IComboWidget

        if (!modelWidget) {
-          return '$0.0045-0.0182/Run (varies with model & aspect ratio)'
+          return '$0.0019-0.0073/Run (varies with model)'
        }

        const model = String(modelWidget.value)
-        const aspectRatio = aspectRatioWidget
-          ? String(aspectRatioWidget.value)
-          : null

        if (model.includes('photon-flash-1')) {
-          if (!aspectRatio) return '$0.0045/Run'
-          if (aspectRatio.includes('1:1')) return '~$0.0045/Run'
-          if (aspectRatio.includes('16:9')) return '~$0.0045/Run'
-          if (aspectRatio.includes('4:3')) return '~$0.0046/Run'
-          if (aspectRatio.includes('21:9')) return '~$0.0047/Run'
+          return '$0.0019/Run'
        } else if (model.includes('photon-1')) {
-          if (!aspectRatio) return '$0.0172/Run'
-          if (aspectRatio.includes('1:1')) return '~$0.0172/Run'
-          if (aspectRatio.includes('16:9')) return '~$0.0172/Run'
-          if (aspectRatio.includes('4:3')) return '~$0.0176/Run'
-          if (aspectRatio.includes('21:9')) return '~$0.0182/Run'
+          return '$0.0073/Run'
        }

        return '$0.0172/Run'
@@ -1010,53 +1026,23 @@ const apiNodeCosts: Record<string, { displayPrice: string | PricingFunction }> =
      displayPrice: '$0.08/Run'
    },
    RunwayImageToVideoNodeGen3a: {
-      displayPrice: (node: LGraphNode): string => {
-        const durationWidget = node.widgets?.find(
-          (w) => w.name === 'duration'
-        ) as IComboWidget
-
-        if (!durationWidget) return '$0.05/second'
-
-        const duration = Number(durationWidget.value) || 5
-        const cost = (0.05 * duration).toFixed(2)
-        return `$${cost}/Run`
-      }
+      displayPrice: calculateRunwayDurationPrice
    },
    RunwayImageToVideoNodeGen4: {
-      displayPrice: (node: LGraphNode): string => {
-        const durationWidget = node.widgets?.find(
-          (w) => w.name === 'duration'
-        ) as IComboWidget
-
-        if (!durationWidget) return '$0.05/second'
-
-        const duration = Number(durationWidget.value) || 5
-        const cost = (0.05 * duration).toFixed(2)
-        return `$${cost}/Run`
-      }
+      displayPrice: calculateRunwayDurationPrice
    },
    RunwayFirstLastFrameNode: {
-      displayPrice: (node: LGraphNode): string => {
-        const durationWidget = node.widgets?.find(
-          (w) => w.name === 'duration'
-        ) as IComboWidget
-
-        if (!durationWidget) return '$0.05/second'
-
-        const duration = Number(durationWidget.value) || 5
-        const cost = (0.05 * duration).toFixed(2)
-        return `$${cost}/Run`
-      }
+      displayPrice: calculateRunwayDurationPrice
    },
    // Rodin nodes - all have the same pricing structure
    Rodin3D_Regular: {
      displayPrice: '$0.4/Run'
    },
    Rodin3D_Detail: {
-      displayPrice: '$1.2/Run'
+      displayPrice: '$0.4/Run'
    },
    Rodin3D_Smooth: {
-      displayPrice: '$1.2/Run'
+      displayPrice: '$0.4/Run'
    },
    Rodin3D_Sketch: {
      displayPrice: '$0.4/Run'
@@ -1064,60 +1050,113 @@ const apiNodeCosts: Record<string, { displayPrice: string | PricingFunction }> =
    // Tripo nodes - using actual node names from ComfyUI
    TripoTextToModelNode: {
      displayPrice: (node: LGraphNode): string => {
-        const modelWidget = node.widgets?.find(
-          (w) => w.name === 'model' || w.name === 'model_version'
+        const quadWidget = node.widgets?.find(
+          (w) => w.name === 'quad'
+        ) as IComboWidget
+        const styleWidget = node.widgets?.find(
+          (w) => w.name === 'style'
+        ) as IComboWidget
+        const textureWidget = node.widgets?.find(
+          (w) => w.name === 'texture'
        ) as IComboWidget
        const textureQualityWidget = node.widgets?.find(
          (w) => w.name === 'texture_quality'
        ) as IComboWidget

-        if (!modelWidget)
-          return '$0.2-0.3/Run (varies with model & texture quality)'
+        if (!quadWidget || !styleWidget || !textureWidget)
+          return '$0.1-0.4/Run (varies with quad, style, texture & quality)'

-        const model = String(modelWidget.value)
-        const textureQuality = String(textureQualityWidget?.value || 'standard')
+        const quad = String(quadWidget.value).toLowerCase() === 'true'
+        const style = String(styleWidget.value).toLowerCase()
+        const texture = String(textureWidget.value).toLowerCase() === 'true'
+        const textureQuality = String(
+          textureQualityWidget?.value || 'standard'
+        ).toLowerCase()

-        // V2.5 pricing
-        if (model.includes('v2.5') || model.includes('2.5')) {
-          return textureQuality.includes('detailed') ? '$0.3/Run' : '$0.2/Run'
-        }
-        // V2.0 pricing
-        else if (model.includes('v2.0') || model.includes('2.0')) {
-          return textureQuality.includes('detailed') ? '$0.3/Run' : '$0.2/Run'
-        }
-        // V1.4 or legacy pricing
-        else {
-          return '$0.2/Run'
+        // Pricing logic based on CSV data
+        if (style.includes('none')) {
+          if (!quad) {
+            if (!texture) return '$0.10/Run'
+            else return '$0.15/Run'
+          } else {
+            if (textureQuality.includes('detailed')) {
+              if (!texture) return '$0.30/Run'
+              else return '$0.35/Run'
+            } else {
+              if (!texture) return '$0.20/Run'
+              else return '$0.25/Run'
+            }
+          }
+        } else {
+          // any style
+          if (!quad) {
+            if (!texture) return '$0.15/Run'
+            else return '$0.20/Run'
+          } else {
+            if (textureQuality.includes('detailed')) {
+              if (!texture) return '$0.35/Run'
+              else return '$0.40/Run'
+            } else {
+              if (!texture) return '$0.25/Run'
+              else return '$0.30/Run'
+            }
+          }
        }
      }
    },
    TripoImageToModelNode: {
      displayPrice: (node: LGraphNode): string => {
-        const modelWidget = node.widgets?.find(
-          (w) => w.name === 'model' || w.name === 'model_version'
+        const quadWidget = node.widgets?.find(
+          (w) => w.name === 'quad'
+        ) as IComboWidget
+        const styleWidget = node.widgets?.find(
+          (w) => w.name === 'style'
+        ) as IComboWidget
+        const textureWidget = node.widgets?.find(
+          (w) => w.name === 'texture'
        ) as IComboWidget
        const textureQualityWidget = node.widgets?.find(
          (w) => w.name === 'texture_quality'
        ) as IComboWidget

-        if (!modelWidget)
-          return '$0.3-0.4/Run (varies with model & texture quality)'
+        if (!quadWidget || !styleWidget || !textureWidget)
+          return '$0.2-0.5/Run (varies with quad, style, texture & quality)'

-        const model = String(modelWidget.value)
-        const textureQuality = String(textureQualityWidget?.value || 'standard')
+        const quad = String(quadWidget.value).toLowerCase() === 'true'
+        const style = String(styleWidget.value).toLowerCase()
+        const texture = String(textureWidget.value).toLowerCase() === 'true'
+        const textureQuality = String(
+          textureQualityWidget?.value || 'standard'
+        ).toLowerCase()

-        // V2.5 and V2.0 have same pricing structure
-        if (
-          model.includes('v2.5') ||
-          model.includes('2.5') ||
-          model.includes('v2.0') ||
-          model.includes('2.0')
-        ) {
-          return textureQuality.includes('detailed') ? '$0.4/Run' : '$0.3/Run'
-        }
-        // V1.4 or legacy pricing (image_to_model is always $0.3)
-        else {
-          return '$0.3/Run'
+        // Pricing logic based on CSV data for Image to Model
+        if (style.includes('none')) {
+          if (!quad) {
+            if (!texture) return '$0.20/Run'
+            else return '$0.25/Run'
+          } else {
+            if (textureQuality.includes('detailed')) {
+              if (!texture) return '$0.40/Run'
+              else return '$0.45/Run'
+            } else {
+              if (!texture) return '$0.30/Run'
+              else return '$0.35/Run'
+            }
+          }
+        } else {
+          // any style
+          if (!quad) {
+            if (!texture) return '$0.25/Run'
+            else return '$0.30/Run'
+          } else {
+            if (textureQuality.includes('detailed')) {
+              if (!texture) return '$0.45/Run'
+              else return '$0.50/Run'
+            } else {
+              if (!texture) return '$0.35/Run'
+              else return '$0.40/Run'
+            }
+          }
        }
      }
    },
@@ -1136,6 +1175,68 @@ const apiNodeCosts: Record<string, { displayPrice: string | PricingFunction }> =
        return textureQuality.includes('detailed') ? '$0.2/Run' : '$0.1/Run'
      }
    },
+    TripoConvertModelNode: {
+      displayPrice: '$0.10/Run'
+    },
+    TripoRetargetRiggedModelNode: {
+      displayPrice: '$0.10/Run'
+    },
+    TripoMultiviewToModelNode: {
+      displayPrice: (node: LGraphNode): string => {
+        const quadWidget = node.widgets?.find(
+          (w) => w.name === 'quad'
+        ) as IComboWidget
+        const styleWidget = node.widgets?.find(
+          (w) => w.name === 'style'
+        ) as IComboWidget
+        const textureWidget = node.widgets?.find(
+          (w) => w.name === 'texture'
+        ) as IComboWidget
+        const textureQualityWidget = node.widgets?.find(
+          (w) => w.name === 'texture_quality'
+        ) as IComboWidget
+
+        if (!quadWidget || !styleWidget || !textureWidget)
+          return '$0.2-0.5/Run (varies with quad, style, texture & quality)'
+
+        const quad = String(quadWidget.value).toLowerCase() === 'true'
+        const style = String(styleWidget.value).toLowerCase()
+        const texture = String(textureWidget.value).toLowerCase() === 'true'
+        const textureQuality = String(
+          textureQualityWidget?.value || 'standard'
+        ).toLowerCase()
+
+        // Pricing logic based on CSV data for Multiview to Model (same as Image to Model)
+        if (style.includes('none')) {
+          if (!quad) {
+            if (!texture) return '$0.20/Run'
+            else return '$0.25/Run'
+          } else {
+            if (textureQuality.includes('detailed')) {
+              if (!texture) return '$0.40/Run'
+              else return '$0.45/Run'
+            } else {
+              if (!texture) return '$0.30/Run'
+              else return '$0.35/Run'
+            }
+          }
+        } else {
+          // any style
+          if (!quad) {
+            if (!texture) return '$0.25/Run'
+            else return '$0.30/Run'
+          } else {
+            if (textureQuality.includes('detailed')) {
+              if (!texture) return '$0.45/Run'
+              else return '$0.50/Run'
+            } else {
+              if (!texture) return '$0.35/Run'
+              else return '$0.40/Run'
+            }
+          }
+        }
+      }
+    },
    // Google/Gemini nodes
    GeminiNode: {
      displayPrice: (node: LGraphNode): string => {
@@ -1151,9 +1252,9 @@ const apiNodeCosts: Record<string, { displayPrice: string | PricingFunction }> =
        if (model.includes('veo-2.0')) {
          return '$0.5/second'
        } else if (model.includes('gemini-2.5-pro-preview-05-06')) {
-          return '$0.0035/$0.0008 per 1K tokens'
+          return '$0.00016/$0.0006 per 1K tokens'
        } else if (model.includes('gemini-2.5-flash-preview-04-17')) {
-          return '$0.0015/$0.0004 per 1K tokens'
+          return '$0.00125/$0.01 per 1K tokens'
        }
        // For other Gemini models, show token-based pricing info
        return 'Token-based'
@@ -1233,9 +1334,11 @@ export const useNodePricing = () => {
      OpenAIDalle3: ['size', 'quality'],
      OpenAIDalle2: ['size', 'n'],
      OpenAIGPTImage1: ['quality', 'n'],
-      IdeogramV1: ['num_images'],
-      IdeogramV2: ['num_images'],
+      IdeogramV1: ['num_images', 'turbo'],
+      IdeogramV2: ['num_images', 'turbo'],
      IdeogramV3: ['rendering_speed', 'num_images'],
+      FluxProKontextProNode: [],
+      FluxProKontextMaxNode: [],
      VeoVideoGenerationNode: ['duration_seconds'],
      LumaVideoNode: ['model', 'resolution', 'duration'],
      LumaImageToVideoNode: ['model', 'resolution', 'duration'],
@@ -1269,8 +1372,8 @@ export const useNodePricing = () => {
      RunwayImageToVideoNodeGen4: ['duration'],
      RunwayFirstLastFrameNode: ['duration'],
      // Tripo nodes
-      TripoTextToModelNode: ['model', 'model_version', 'texture_quality'],
-      TripoImageToModelNode: ['model', 'model_version', 'texture_quality'],
+      TripoTextToModelNode: ['quad', 'style', 'texture', 'texture_quality'],
+      TripoImageToModelNode: ['quad', 'style', 'texture', 'texture_quality'],
      TripoTextureNode: ['texture_quality'],
      // Google/Gemini nodes
      GeminiNode: ['model'],
--- a/src/composables/nodePack/useInstalledPacks.ts
+++ b/src/composables/nodePack/useInstalledPacks.ts
@@ -20,7 +20,10 @@ export const useInstalledPacks = (options: UseNodePacksOptions = {}) => {
    packs.filter((pack) => comfyManagerStore.isPackInstalled(pack.id))

  const startFetchInstalled = async () => {
-    await comfyManagerStore.refreshInstalledList()
+    // Only refresh if store doesn't have data yet
+    if (comfyManagerStore.installedPacksIds.size === 0) {
+      await comfyManagerStore.refreshInstalledList()
+    }
    await startFetch()
  }

@@ -33,11 +36,29 @@ export const useInstalledPacks = (options: UseNodePacksOptions = {}) => {
    cleanup()
  })

+  // Create a computed property that provides installed pack info with versions
+  const installedPacksWithVersions = computed(() => {
+    const result: Array<{ id: string; version: string }> = []
+
+    for (const pack of Object.values(comfyManagerStore.installedPacks)) {
+      const id = pack.cnr_id || pack.aux_id
+      if (id) {
+        result.push({
+          id,
+          version: pack.ver
+        })
+      }
+    }
+
+    return result
+  })
+
  return {
    error,
    isLoading,
    isReady,
    installedPacks: nodePacks,
+    installedPacksWithVersions,
    startFetchInstalled,
    filterInstalledPack
  }
--- a/src/composables/nodePack/useMissingNodes.ts
+++ b/src/composables/nodePack/useMissingNodes.ts
@@ -8,6 +8,7 @@ import { app } from '@/scripts/app'
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
 import type { components } from '@/types/comfyRegistryTypes'
+import { collectAllNodes } from '@/utils/graphTraversalUtil'

 /**
 * Composable to find missing NodePacks from workflow
@@ -56,7 +57,7 @@ export const useMissingNodes = () => {
  }

  const missingCoreNodes = computed<Record<string, LGraphNode[]>>(() => {
-    const missingNodes = app.graph.nodes.filter(isMissingCoreNode)
+    const missingNodes = collectAllNodes(app.graph, isMissingCoreNode)
    return groupBy(missingNodes, (node) => String(node.properties?.ver || ''))
  })

--- a/src/composables/nodePack/useUpdateAvailableNodes.ts
+++ b/src/composables/nodePack/useUpdateAvailableNodes.ts
@@ -0,0 +1,65 @@
+import { computed, onMounted } from 'vue'
+
+import { useInstalledPacks } from '@/composables/nodePack/useInstalledPacks'
+import { useComfyManagerStore } from '@/stores/comfyManagerStore'
+import type { components } from '@/types/comfyRegistryTypes'
+import { compareVersions, isSemVer } from '@/utils/formatUtil'
+
+/**
+ * Composable to find NodePacks that have updates available
+ * Uses the same filtering approach as ManagerDialogContent.vue
+ * Automatically fetches installed pack data when initialized
+ */
+export const useUpdateAvailableNodes = () => {
+  const comfyManagerStore = useComfyManagerStore()
+  const { installedPacks, isLoading, error, startFetchInstalled } =
+    useInstalledPacks()
+
+  // Check if a pack has updates available (same logic as usePackUpdateStatus)
+  const isOutdatedPack = (pack: components['schemas']['Node']) => {
+    const isInstalled = comfyManagerStore.isPackInstalled(pack?.id)
+    if (!isInstalled) return false
+
+    const installedVersion = comfyManagerStore.getInstalledPackVersion(
+      pack.id ?? ''
+    )
+    const latestVersion = pack.latest_version?.version
+
+    const isNightlyPack = !!installedVersion && !isSemVer(installedVersion)
+
+    if (isNightlyPack || !latestVersion) {
+      return false
+    }
+
+    return compareVersions(latestVersion, installedVersion) > 0
+  }
+
+  // Same filtering logic as ManagerDialogContent.vue
+  const filterOutdatedPacks = (packs: components['schemas']['Node'][]) =>
+    packs.filter(isOutdatedPack)
+
+  // Filter only outdated packs from installed packs
+  const updateAvailableNodePacks = computed(() => {
+    if (!installedPacks.value.length) return []
+    return filterOutdatedPacks(installedPacks.value)
+  })
+
+  // Check if there are any outdated packs
+  const hasUpdateAvailable = computed(() => {
+    return updateAvailableNodePacks.value.length > 0
+  })
+
+  // Automatically fetch installed pack data when composable is used
+  onMounted(async () => {
+    if (!installedPacks.value.length && !isLoading.value) {
+      await startFetchInstalled()
+    }
+  })
+
+  return {
+    updateAvailableNodePacks,
+    hasUpdateAvailable,
+    isLoading,
+    error
+  }
+}
--- a/src/composables/nodePack/useWorkflowPacks.ts
+++ b/src/composables/nodePack/useWorkflowPacks.ts
@@ -7,8 +7,9 @@ import { app } from '@/scripts/app'
 import { useComfyRegistryStore } from '@/stores/comfyRegistryStore'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
 import { useSystemStatsStore } from '@/stores/systemStatsStore'
-import { SelectedVersion, UseNodePacksOptions } from '@/types/comfyManagerTypes'
+import { UseNodePacksOptions } from '@/types/comfyManagerTypes'
 import type { components } from '@/types/comfyRegistryTypes'
+import { collectAllNodes } from '@/utils/graphTraversalUtil'

 type WorkflowPack = {
  id:
@@ -65,8 +66,7 @@ export const useWorkflowPacks = (options: UseNodePacksOptions = {}) => {
      return {
        id: CORE_NODES_PACK_NAME,
        version:
-          systemStatsStore.systemStats?.system?.comfyui_version ??
-          SelectedVersion.NIGHTLY
+          systemStatsStore.systemStats?.system?.comfyui_version ?? 'nightly'
      }
    }

@@ -76,7 +76,7 @@ export const useWorkflowPacks = (options: UseNodePacksOptions = {}) => {
    if (pack) {
      return {
        id: pack.id,
-        version: pack.latest_version?.version ?? SelectedVersion.NIGHTLY
+        version: pack.latest_version?.version ?? 'nightly'
      }
    }

@@ -109,11 +109,13 @@ export const useWorkflowPacks = (options: UseNodePacksOptions = {}) => {
  }

  /**
-   * Get the node packs for all nodes in the workflow.
+   * Get the node packs for all nodes in the workflow (including subgraphs).
   */
  const getWorkflowPacks = async () => {
-    if (!app.graph?.nodes?.length) return []
-    const packs = await Promise.all(app.graph.nodes.map(workflowNodeToPack))
+    if (!app.graph) return []
+    const allNodes = collectAllNodes(app.graph)
+    if (!allNodes.length) return []
+    const packs = await Promise.all(allNodes.map(workflowNodeToPack))
    workflowPacks.value = packs.filter((pack) => pack !== undefined)
  }

--- a/src/composables/useConflictAcknowledgment.ts
+++ b/src/composables/useConflictAcknowledgment.ts
@@ -0,0 +1,103 @@
+import { useStorage } from '@vueuse/core'
+import { computed } from 'vue'
+
+import { useConflictDetectionStore } from '@/stores/conflictDetectionStore'
+
+/**
+ * LocalStorage keys for conflict acknowledgment tracking
+ */
+const STORAGE_KEYS = {
+  CONFLICT_MODAL_DISMISSED: 'Comfy.ConflictModalDismissed',
+  CONFLICT_RED_DOT_DISMISSED: 'Comfy.ConflictRedDotDismissed',
+  CONFLICT_WARNING_BANNER_DISMISSED: 'Comfy.ConflictWarningBannerDismissed'
+} as const
+
+/**
+ * Interface for conflict acknowledgment state
+ */
+interface ConflictAcknowledgmentState {
+  modal_dismissed: boolean
+  red_dot_dismissed: boolean
+  warning_banner_dismissed: boolean
+}
+
+/**
+ * Composable for managing conflict acknowledgment state in localStorage
+ *
+ * This handles:
+ * - Tracking whether conflict modal has been dismissed
+ * - Tracking whether red dot notification has been cleared
+ * - Managing per-package conflict acknowledgments
+ * - Detecting ComfyUI version changes to reset acknowledgment state
+ */
+export function useConflictAcknowledgment() {
+  const conflictDetectionStore = useConflictDetectionStore()
+
+  // Reactive state using VueUse's useStorage for automatic persistence
+  const modalDismissed = useStorage(
+    STORAGE_KEYS.CONFLICT_MODAL_DISMISSED,
+    false
+  )
+  const redDotDismissed = useStorage(
+    STORAGE_KEYS.CONFLICT_RED_DOT_DISMISSED,
+    false
+  )
+  const warningBannerDismissed = useStorage(
+    STORAGE_KEYS.CONFLICT_WARNING_BANNER_DISMISSED,
+    false
+  )
+
+  // Create computed state object for backward compatibility
+  const state = computed<ConflictAcknowledgmentState>(() => ({
+    modal_dismissed: modalDismissed.value,
+    red_dot_dismissed: redDotDismissed.value,
+    warning_banner_dismissed: warningBannerDismissed.value
+  }))
+
+  /**
+   * Mark red dot notification as dismissed
+   */
+  function dismissRedDotNotification(): void {
+    redDotDismissed.value = true
+  }
+
+  /**
+   * Mark manager warning banner as dismissed
+   */
+  function dismissWarningBanner(): void {
+    warningBannerDismissed.value = true
+    redDotDismissed.value = true
+  }
+
+  /**
+   * Mark conflicts as seen (unified function for help center and manager)
+   */
+  function markConflictsAsSeen(): void {
+    redDotDismissed.value = true
+    modalDismissed.value = true
+    warningBannerDismissed.value = true
+  }
+
+  const hasConflicts = computed(() => conflictDetectionStore.hasConflicts)
+  const shouldShowConflictModal = computed(() => !modalDismissed.value)
+  const shouldShowRedDot = computed(() => {
+    if (!hasConflicts.value) return false
+    return !redDotDismissed.value
+  })
+  const shouldShowManagerBanner = computed(() => {
+    return hasConflicts.value && !warningBannerDismissed.value
+  })
+
+  return {
+    // State
+    acknowledgmentState: state,
+    shouldShowConflictModal,
+    shouldShowRedDot,
+    shouldShowManagerBanner,
+
+    // Methods
+    dismissRedDotNotification,
+    dismissWarningBanner,
+    markConflictsAsSeen
+  }
+}
--- a/src/composables/useConflictDetection.ts
+++ b/src/composables/useConflictDetection.ts
--- a/src/composables/useCoreCommands.ts
+++ b/src/composables/useCoreCommands.ts
@@ -15,10 +15,11 @@ import { t } from '@/i18n'
 import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
 import { addFluxKontextGroupNode } from '@/scripts/fluxKontextEditNode'
+import { useComfyManagerService } from '@/services/comfyManagerService'
 import { useDialogService } from '@/services/dialogService'
 import { useLitegraphService } from '@/services/litegraphService'
 import { useWorkflowService } from '@/services/workflowService'
-import type { ComfyCommand } from '@/stores/commandStore'
+import { type ComfyCommand, useCommandStore } from '@/stores/commandStore'
 import { useExecutionStore } from '@/stores/executionStore'
 import { useCanvasStore, useTitleEditorStore } from '@/stores/graphStore'
 import { useQueueSettingsStore, useQueueStore } from '@/stores/queueStore'
@@ -29,6 +30,8 @@ import { useBottomPanelStore } from '@/stores/workspace/bottomPanelStore'
 import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 import { useSearchBoxStore } from '@/stores/workspace/searchBoxStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
+import { ManagerTab } from '@/types/comfyManagerTypes'
+import { getAllNonIoNodesInSubgraph } from '@/utils/graphTraversalUtil'

 const moveSelectedNodesVersionAdded = '1.22.2'

@@ -167,12 +170,17 @@ export function useCoreCommands(): ComfyCommand[] {
      function: () => {
        const settingStore = useSettingStore()
        if (
-          !settingStore.get('Comfy.ComfirmClear') ||
+          !settingStore.get('Comfy.ConfirmClear') ||
          confirm('Clear workflow?')
        ) {
          app.clean()
          if (app.canvas.subgraph) {
-            app.canvas.subgraph.clear()
+            // `clear` is not implemented on subgraphs and the parent class's
+            // (`LGraph`) `clear` breaks the subgraph structure. For subgraphs,
+            // just clear the nodes but preserve input/output nodes and structure
+            const subgraph = app.canvas.subgraph
+            const nonIoNodes = getAllNonIoNodesInSubgraph(subgraph)
+            nonIoNodes.forEach((node) => subgraph.remove(node))
          } else {
            app.graph.clear()
          }
@@ -677,12 +685,53 @@ export function useCoreCommands(): ComfyCommand[] {
      }
    },
    {
-      id: 'Comfy.Manager.CustomNodesManager',
+      id: 'Comfy.Manager.CustomNodesManager.ShowCustomNodesMenu',
      icon: 'pi pi-puzzle',
-      label: 'Toggle the Custom Nodes Manager',
+      label: 'Show the Custom Nodes Manager',
      versionAdded: '1.12.10',
+      function: async () => {
+        const { is_legacy_manager_ui } =
+          (await useComfyManagerService().isLegacyManagerUI()) ?? {}
+
+        if (is_legacy_manager_ui === true) {
+          try {
+            await useCommandStore().execute(
+              'Comfy.Manager.Menu.ToggleVisibility' // This command is registered by legacy manager FE extension
+            )
+          } catch (error) {
+            useToastStore().add({
+              severity: 'error',
+              summary: t('g.error'),
+              detail: t('manager.legacyMenuNotAvailable'),
+              life: 3000
+            })
+            dialogService.toggleManagerDialog()
+          }
+        } else {
+          dialogService.toggleManagerDialog()
+        }
+      }
+    },
+    {
+      id: 'Comfy.Manager.ShowUpdateAvailablePacks',
+      icon: 'pi pi-sync',
+      label: 'Check for Updates',
+      versionAdded: '1.17.0',
      function: () => {
-        dialogService.toggleManagerDialog()
+        dialogService.showManagerDialog({
+          initialTab: ManagerTab.UpdateAvailable
+        })
+      }
+    },
+    {
+      id: 'Comfy.Manager.ShowMissingPacks',
+      icon: 'pi pi-exclamation-circle',
+      label: 'Install Missing',
+      versionAdded: '1.17.0',
+      function: () => {
+        dialogService.showManagerDialog({
+          initialTab: ManagerTab.Missing
+        })
      }
    },
    {
@@ -771,9 +820,88 @@ export function useCoreCommands(): ComfyCommand[] {
          })
          return
        }
+
        const { node } = res
        canvas.select(node)
      }
+    },
+    {
+      id: 'Comfy.Manager.CustomNodesManager.ShowLegacyCustomNodesMenu',
+      icon: 'pi pi-bars',
+      label: 'Custom Nodes (Legacy)',
+      versionAdded: '1.16.4',
+      function: async () => {
+        try {
+          await useCommandStore().execute(
+            'Comfy.Manager.CustomNodesManager.ToggleVisibility'
+          )
+        } catch (error) {
+          useToastStore().add({
+            severity: 'error',
+            summary: t('g.error'),
+            detail: t('manager.legacyMenuNotAvailable'),
+            life: 3000
+          })
+        }
+      }
+    },
+    {
+      id: 'Comfy.Manager.ShowLegacyManagerMenu',
+      icon: 'mdi mdi-puzzle',
+      label: 'Manager Menu (Legacy)',
+      versionAdded: '1.16.4',
+      function: async () => {
+        try {
+          await useCommandStore().execute('Comfy.Manager.Menu.ToggleVisibility')
+        } catch (error) {
+          useToastStore().add({
+            severity: 'error',
+            summary: t('g.error'),
+            detail: t('manager.legacyMenuNotAvailable'),
+            life: 3000
+          })
+        }
+      }
+    },
+    {
+      id: 'Comfy.Memory.UnloadModels',
+      icon: 'mdi mdi-vacuum-outline',
+      label: 'Unload Models',
+      versionAdded: '1.16.4',
+      function: async () => {
+        if (!useSettingStore().get('Comfy.Memory.AllowManualUnload')) {
+          useToastStore().add({
+            severity: 'error',
+            summary: t('g.error'),
+            detail: t('g.commandProhibited', {
+              command: 'Comfy.Memory.UnloadModels'
+            }),
+            life: 3000
+          })
+          return
+        }
+        await api.freeMemory({ freeExecutionCache: false })
+      }
+    },
+    {
+      id: 'Comfy.Memory.UnloadModelsAndExecutionCache',
+      icon: 'mdi mdi-vacuum-outline',
+      label: 'Unload Models and Execution Cache',
+      versionAdded: '1.16.4',
+      function: async () => {
+        if (!useSettingStore().get('Comfy.Memory.AllowManualUnload')) {
+          useToastStore().add({
+            severity: 'error',
+            summary: t('g.error'),
+            detail: t('g.commandProhibited', {
+              command: 'Comfy.Memory.UnloadModelsAndExecutionCache'
+            }),
+            life: 3000
+          })
+          return
+        }
+        await api.freeMemory({ freeExecutionCache: true })
+      }
    }
  ]

--- a/src/composables/useFrontendVersionMismatchWarning.ts
+++ b/src/composables/useFrontendVersionMismatchWarning.ts
@@ -0,0 +1,94 @@
+import { whenever } from '@vueuse/core'
+import { computed, onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { useToastStore } from '@/stores/toastStore'
+import { useVersionCompatibilityStore } from '@/stores/versionCompatibilityStore'
+
+export interface UseFrontendVersionMismatchWarningOptions {
+  immediate?: boolean
+}
+
+/**
+ * Composable for handling frontend version mismatch warnings.
+ *
+ * Displays toast notifications when the frontend version is incompatible with the backend,
+ * either because the frontend is outdated or newer than the backend expects.
+ * Automatically dismisses warnings when shown and persists dismissal state for 7 days.
+ *
+ * @param options - Configuration options
+ * @param options.immediate - If true, automatically shows warning when version mismatch is detected
+ * @returns Object with methods and computed properties for managing version warnings
+ *
+ * @example
+ * ```ts
+ * // Show warning immediately when mismatch detected
+ * const { showWarning, shouldShowWarning } = useFrontendVersionMismatchWarning({ immediate: true })
+ *
+ * // Manual control
+ * const { showWarning } = useFrontendVersionMismatchWarning()
+ * showWarning() // Call when needed
+ * ```
+ */
+export function useFrontendVersionMismatchWarning(
+  options: UseFrontendVersionMismatchWarningOptions = {}
+) {
+  const { immediate = false } = options
+  const { t } = useI18n()
+  const toastStore = useToastStore()
+  const versionCompatibilityStore = useVersionCompatibilityStore()
+
+  // Track if we've already shown the warning
+  let hasShownWarning = false
+
+  const showWarning = () => {
+    // Prevent showing the warning multiple times
+    if (hasShownWarning) return
+
+    const message = versionCompatibilityStore.warningMessage
+    if (!message) return
+
+    const detailMessage = t('g.frontendOutdated', {
+      frontendVersion: message.frontendVersion,
+      requiredVersion: message.requiredVersion
+    })
+
+    const fullMessage = t('g.versionMismatchWarningMessage', {
+      warning: t('g.versionMismatchWarning'),
+      detail: detailMessage
+    })
+
+    toastStore.addAlert(fullMessage)
+    hasShownWarning = true
+
+    // Automatically dismiss the warning so it won't show again for 7 days
+    versionCompatibilityStore.dismissWarning()
+  }
+
+  onMounted(() => {
+    // Only set up the watcher if immediate is true
+    if (immediate) {
+      whenever(
+        () => versionCompatibilityStore.shouldShowWarning,
+        () => {
+          showWarning()
+        },
+        {
+          immediate: true,
+          once: true
+        }
+      )
+    }
+  })
+
+  return {
+    showWarning,
+    shouldShowWarning: computed(
+      () => versionCompatibilityStore.shouldShowWarning
+    ),
+    dismissWarning: versionCompatibilityStore.dismissWarning,
+    hasVersionMismatch: computed(
+      () => versionCompatibilityStore.hasVersionMismatch
+    )
+  }
+}
--- a/src/composables/useImportFailedDetection.ts
+++ b/src/composables/useImportFailedDetection.ts
@@ -0,0 +1,85 @@
+import { type ComputedRef, computed, unref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { useDialogService } from '@/services/dialogService'
+import { useComfyManagerStore } from '@/stores/comfyManagerStore'
+import { useConflictDetectionStore } from '@/stores/conflictDetectionStore'
+import type { ConflictDetail } from '@/types/conflictDetectionTypes'
+
+/**
+ * Extracting import failed conflicts from conflict list
+ */
+function extractImportFailedConflicts(conflicts?: ConflictDetail[] | null) {
+  if (!conflicts) return null
+
+  const importFailedConflicts = conflicts.filter(
+    (item): item is ConflictDetail => item.type === 'import_failed'
+  )
+
+  return importFailedConflicts.length > 0 ? importFailedConflicts : null
+}
+
+/**
+ * Creating import failed dialog
+ */
+function createImportFailedDialog() {
+  const { t } = useI18n()
+  const { showErrorDialog } = useDialogService()
+
+  return (importFailedInfo: ConflictDetail[] | null) => {
+    if (importFailedInfo) {
+      const errorMessage =
+        importFailedInfo
+          .map((conflict) => conflict.required_value)
+          .filter(Boolean)
+          .join('\n') || t('manager.importFailedGenericError')
+
+      const error = new Error(errorMessage)
+
+      showErrorDialog(error, {
+        title: t('manager.failedToInstall'),
+        reportType: 'importFailedError'
+      })
+    }
+  }
+}
+
+/**
+ * Composable for detecting and handling import failed conflicts
+ * @param packageId - Package ID string or computed ref
+ * @returns Object with import failed detection and dialog handler
+ */
+export function useImportFailedDetection(
+  packageId?: string | ComputedRef<string> | null
+) {
+  const { isPackInstalled } = useComfyManagerStore()
+  const { getConflictsForPackageByID } = useConflictDetectionStore()
+
+  const isInstalled = computed(() =>
+    packageId ? isPackInstalled(unref(packageId)) : false
+  )
+
+  const conflicts = computed(() => {
+    const currentPackageId = unref(packageId)
+    if (!currentPackageId || !isInstalled.value) return null
+    return getConflictsForPackageByID(currentPackageId) || null
+  })
+
+  const importFailedInfo = computed(() => {
+    return extractImportFailedConflicts(conflicts.value?.conflicts)
+  })
+
+  const importFailed = computed(() => {
+    return importFailedInfo.value !== null
+  })
+
+  const showImportFailedDialog = createImportFailedDialog()
+
+  return {
+    importFailedInfo,
+    importFailed,
+    showImportFailedDialog: () =>
+      showImportFailedDialog(importFailedInfo.value),
+    isInstalled
+  }
+}
--- a/src/composables/useManagerQueue.ts
+++ b/src/composables/useManagerQueue.ts
@@ -1,101 +1,153 @@
 import { useEventListener, whenever } from '@vueuse/core'
-import { computed, readonly, ref } from 'vue'
+import { mapKeys, pickBy } from 'lodash'
+import { Ref, computed, ref } from 'vue'

-import { api } from '@/scripts/api'
-import { ManagerWsQueueStatus } from '@/types/comfyManagerTypes'
+import { app } from '@/scripts/app'
+import { useDialogService } from '@/services/dialogService'
+import { components } from '@/types/generatedManagerTypes'

-type QueuedTask<T> = {
-  task: () => Promise<T>
-  onComplete?: () => void
-}
+type ManagerTaskHistory = Record<
+  string,
+  components['schemas']['TaskHistoryItem']
+>
+type ManagerTaskQueue = components['schemas']['TaskStateMessage']
+type ManagerWsTaskDoneMsg = components['schemas']['MessageTaskDone']
+type ManagerWsTaskStartedMsg = components['schemas']['MessageTaskStarted']
+type QueueTaskItem = components['schemas']['QueueTaskItem']
+type HistoryTaskItem = components['schemas']['TaskHistoryItem']
+type Task = QueueTaskItem | HistoryTaskItem

-const MANAGER_WS_MSG_TYPE = 'cm-queue-status'
+const MANAGER_WS_TASK_DONE_NAME = 'cm-task-completed'
+const MANAGER_WS_TASK_STARTED_NAME = 'cm-task-started'

-export const useManagerQueue = () => {
-  const clientQueueItems = ref<QueuedTask<unknown>[]>([])
-  const clientQueueLength = computed(() => clientQueueItems.value.length)
-  const onCompletedQueue = ref<((() => void) | undefined)[]>([])
-  const onCompleteWaitingCount = ref(0)
-  const uncompletedCount = computed(
-    () => clientQueueLength.value + onCompleteWaitingCount.value
+export const useManagerQueue = (
+  taskHistory: Ref<ManagerTaskHistory>,
+  taskQueue: Ref<ManagerTaskQueue>,
+  installedPacks: Ref<Record<string, any>>
+) => {
+  const { showManagerProgressDialog } = useDialogService()
+
+  // Task queue state (read-only from server)
+  const maxHistoryItems = ref(64)
+  const isLoading = ref(false)
+  const isProcessing = ref(false)
+
+  // Computed values
+  const currentQueueLength = computed(
+    () =>
+      taskQueue.value.running_queue.length +
+      taskQueue.value.pending_queue.length
  )

-  const serverQueueStatus = ref<ManagerWsQueueStatus>(ManagerWsQueueStatus.DONE)
-  const isServerIdle = computed(
-    () => serverQueueStatus.value === ManagerWsQueueStatus.DONE
-  )
+  /**
+   * Update the processing state based on the current queue length.
+   * If the queue is empty, or all tasks in the queue are associated
+   * with different clients, then this client is not processing any tasks.
+   */
+  const updateProcessingState = (): void => {
+    isProcessing.value = currentQueueLength.value > 0
+  }

-  const allTasksDone = computed(
-    () => isServerIdle.value && clientQueueLength.value === 0
-  )
-  const nextTaskReady = computed(
-    () => isServerIdle.value && clientQueueLength.value > 0
-  )
+  const allTasksDone = computed(() => currentQueueLength.value === 0)
+  const historyCount = computed(() => Object.keys(taskHistory.value).length)

-  const cleanupListener = useEventListener(
-    api,
-    MANAGER_WS_MSG_TYPE,
-    (event: CustomEvent<{ status: ManagerWsQueueStatus }>) => {
-      if (event?.type === MANAGER_WS_MSG_TYPE && event.detail?.status) {
-        serverQueueStatus.value = event.detail.status
+  /**
+   * Check if a task is associated with this client.
+   * Task can be from running queue, pending queue, or history.
+   * @param task - The task to check
+   * @returns True if the task belongs to this client
+   */
+  const isTaskFromThisClient = (task: Task): boolean =>
+    task.client_id === app.api.clientId
+
+  /**
+   * Filter queue tasks by client id.
+   * Ensures that only tasks associated with this client are processed and
+   * added to client state.
+   * @param tasks - Array of queue tasks to filter
+   * @returns Filtered array containing only tasks from this client
+   */
+  const filterQueueByClientId = (tasks: QueueTaskItem[]): QueueTaskItem[] =>
+    tasks.filter(isTaskFromThisClient)
+
+  /**
+   * Filter history tasks by client id using lodash pickBy for optimal performance.
+   * Returns a new object containing only tasks associated with this client.
+   * @param history - The history object to filter
+   * @returns Filtered history object containing only tasks from this client
+   */
+  const filterHistoryByClientId = (history: ManagerTaskHistory) =>
+    pickBy(history, isTaskFromThisClient)
+
+  /**
+   * Update task queue and history state with filtered data from server.
+   * Ensures only tasks from this client are stored in local state.
+   * @param state - The task state message from the server
+   */
+  const updateTaskState = (state: ManagerTaskQueue) => {
+    taskQueue.value.running_queue = filterQueueByClientId(state.running_queue)
+    taskQueue.value.pending_queue = filterQueueByClientId(state.pending_queue)
+    taskHistory.value = filterHistoryByClientId(state.history)
+
+    if (state.installed_packs) {
+      // The keys are 'cleaned' by stripping the version suffix.
+      // The pack object itself (the value) still contains the version info.
+      const packsWithCleanedKeys = mapKeys(
+        state.installed_packs,
+        (_value, key) => {
+          return key.split('@')[0]
+        }
+      )
+      installedPacks.value = packsWithCleanedKeys
+    }
+    updateProcessingState()
+  }
+
+  // WebSocket event listener for task done
+  const cleanupTaskDoneListener = useEventListener(
+    app.api,
+    MANAGER_WS_TASK_DONE_NAME,
+    (event: CustomEvent<ManagerWsTaskDoneMsg>) => {
+      if (event?.type === MANAGER_WS_TASK_DONE_NAME) {
+        const { state } = event.detail
+        updateTaskState(state)
      }
    }
  )

-  const startNextTask = () => {
-    const nextTask = clientQueueItems.value.shift()
-    if (!nextTask) return
-
-    const { task, onComplete } = nextTask
-    if (onComplete) {
-      // Set the task's onComplete to be executed the next time the server is idle
-      onCompletedQueue.value.push(onComplete)
-      onCompleteWaitingCount.value++
-    }
-
-    task().catch((e) => {
-      const message = `Error enqueuing task for ComfyUI Manager: ${e}`
-      console.error(message)
-    })
-  }
-
-  const enqueueTask = <T>(task: QueuedTask<T>): void => {
-    clientQueueItems.value.push(task)
-  }
-
-  const clearQueue = () => {
-    clientQueueItems.value = []
-    onCompletedQueue.value = []
-    onCompleteWaitingCount.value = 0
-  }
-
-  const cleanup = () => {
-    clearQueue()
-    cleanupListener()
-  }
-
-  whenever(nextTaskReady, startNextTask)
-  whenever(isServerIdle, () => {
-    if (onCompletedQueue.value?.length) {
-      while (
-        onCompleteWaitingCount.value > 0 &&
-        onCompletedQueue.value.length > 0
-      ) {
-        const onComplete = onCompletedQueue.value.shift()
-        onComplete?.()
-        onCompleteWaitingCount.value--
+  // WebSocket event listener for task started
+  const cleanupTaskStartedListener = useEventListener(
+    app.api,
+    MANAGER_WS_TASK_STARTED_NAME,
+    (event: CustomEvent<ManagerWsTaskStartedMsg>) => {
+      if (event?.type === MANAGER_WS_TASK_STARTED_NAME) {
+        const { state } = event.detail
+        updateTaskState(state)
      }
    }
-  })
+  )
+
+  whenever(currentQueueLength, () => showManagerProgressDialog())
+
+  const stopListening = () => {
+    cleanupTaskDoneListener()
+    cleanupTaskStartedListener()
+  }

  return {
-    allTasksDone,
-    statusMessage: readonly(serverQueueStatus),
-    queueLength: clientQueueLength,
-    uncompletedCount,
+    // Queue state (read-only from server)
+    taskHistory,
+    taskQueue,
+    maxHistoryItems,
+    isLoading,

-    enqueueTask,
-    clearQueue,
-    cleanup
+    // Computed state
+    allTasksDone,
+    isProcessing,
+    queueLength: currentQueueLength,
+    historyCount,
+
+    // Actions
+    stopListening
  }
 }
--- a/src/composables/useServerLogs.ts
+++ b/src/composables/useServerLogs.ts
@@ -1,24 +1,34 @@
 import { useEventListener } from '@vueuse/core'
-import { onUnmounted, ref } from 'vue'
+import { ref } from 'vue'

 import { LogsWsMessage } from '@/schemas/apiSchema'
 import { api } from '@/scripts/api'
+import { components } from '@/types/generatedManagerTypes'

 const LOGS_MESSAGE_TYPE = 'logs'
+const MANAGER_WS_TASK_DONE_NAME = 'cm-task-completed'
+const MANAGER_WS_TASK_STARTED_NAME = 'cm-task-started'
+
+type ManagerWsTaskDoneMsg = components['schemas']['MessageTaskDone']
+type ManagerWsTaskStartedMsg = components['schemas']['MessageTaskStarted']

 interface UseServerLogsOptions {
+  ui_id: string
  immediate?: boolean
  messageFilter?: (message: string) => boolean
 }

-export const useServerLogs = (options: UseServerLogsOptions = {}) => {
+export const useServerLogs = (options: UseServerLogsOptions) => {
  const {
    immediate = false,
    messageFilter = (msg: string) => Boolean(msg.trim())
  } = options

  const logs = ref<string[]>([])
-  let stop: ReturnType<typeof useEventListener> | null = null
+  const isTaskStarted = ref(false)
+  let stopLogs: ReturnType<typeof useEventListener> | null = null
+  let stopTaskDone: ReturnType<typeof useEventListener> | null = null
+  let stopTaskStarted: ReturnType<typeof useEventListener> | null = null

  const isValidLogEvent = (event: CustomEvent<LogsWsMessage>) =>
    event?.type === LOGS_MESSAGE_TYPE && event.detail?.entries?.length > 0
@@ -27,34 +37,81 @@ export const useServerLogs = (options: UseServerLogsOptions = {}) => {
    event.detail.entries.map((e) => e.m).filter(messageFilter)

  const handleLogMessage = (event: CustomEvent<LogsWsMessage>) => {
+    // Only capture logs if this task has started
+    if (!isTaskStarted.value) return
+
    if (isValidLogEvent(event)) {
-      logs.value.push(...parseLogMessage(event))
+      const messages = parseLogMessage(event)
+      if (messages.length > 0) {
+        logs.value.push(...messages)
+      }
    }
  }

-  const start = async () => {
+  const handleTaskStarted = (event: CustomEvent<ManagerWsTaskStartedMsg>) => {
+    if (event?.type === MANAGER_WS_TASK_STARTED_NAME) {
+      // Check if this is our task starting
+      const isOurTask = event.detail.ui_id === options.ui_id
+      if (isOurTask) {
+        isTaskStarted.value = true
+        void stopTaskStarted?.()
+      }
+    }
+  }
+
+  const handleTaskDone = (event: CustomEvent<ManagerWsTaskDoneMsg>) => {
+    if (event?.type === MANAGER_WS_TASK_DONE_NAME) {
+      const { state } = event.detail
+      // Check if our task is now in the history (completed)
+      const isOurTaskDone = state.history[options.ui_id]
+      if (isOurTaskDone) {
+        isTaskStarted.value = false
+        void stopListening()
+      }
+    }
+  }
+
+  const startListening = async () => {
    await api.subscribeLogs(true)
-    stop = useEventListener(api, LOGS_MESSAGE_TYPE, handleLogMessage)
+    stopLogs = useEventListener(api, LOGS_MESSAGE_TYPE, handleLogMessage)
+    stopTaskStarted = useEventListener(
+      api,
+      MANAGER_WS_TASK_STARTED_NAME,
+      handleTaskStarted
+    )
+    stopTaskDone = useEventListener(
+      api,
+      MANAGER_WS_TASK_DONE_NAME,
+      handleTaskDone
+    )
  }

  const stopListening = async () => {
-    stop?.()
-    stop = null
-    await api.subscribeLogs(false)
+    stopLogs?.()
+    stopTaskStarted?.()
+    stopTaskDone?.()
+    stopLogs = null
+    stopTaskStarted = null
+    stopTaskDone = null
+    // TODO: move subscribe/unsubscribe logs to useManagerQueue. Subscribe when task starts if not already subscribed.
+    // Unsubscribe ONLY when there are no tasks running or queued up and the only remaining task finishes.
+    // await api.subscribeLogs(false)
  }

  if (immediate) {
-    void start()
+    void startListening()
  }

-  onUnmounted(async () => {
+  const cleanup = async () => {
    await stopListening()
    logs.value = []
-  })
+    isTaskStarted.value = false
+  }

  return {
    logs,
-    startListening: start,
-    stopListening
+    startListening,
+    stopListening,
+    cleanup
  }
 }
--- a/src/constants/coreKeybindings.ts
+++ b/src/constants/coreKeybindings.ts
@@ -68,12 +68,6 @@ export const CORE_KEYBINDINGS: Keybinding[] = [
    },
    commandId: 'Comfy.OpenWorkflow'
  },
-  {
-    combo: {
-      key: 'Backspace'
-    },
-    commandId: 'Comfy.ClearWorkflow'
-  },
  {
    combo: {
      key: 'g',
--- a/src/constants/coreMenuCommands.ts
+++ b/src/constants/coreMenuCommands.ts
@@ -11,9 +11,24 @@ export const CORE_MENU_COMMANDS = [
    ]
  ],
  [['Edit'], ['Comfy.Undo', 'Comfy.Redo']],
-  [['Edit'], ['Comfy.RefreshNodeDefinitions']],
+  [
+    ['Edit'],
+    [
+      'Comfy.RefreshNodeDefinitions',
+      'Comfy.Memory.UnloadModels',
+      'Comfy.Memory.UnloadModelsAndExecutionCache'
+    ]
+  ],
  [['Edit'], ['Comfy.ClearWorkflow']],
  [['Edit'], ['Comfy.OpenClipspace']],
+  [
+    ['Manager'],
+    [
+      'Comfy.Manager.CustomNodesManager.ShowCustomNodesMenu',
+      'Comfy.Manager.ShowMissingPacks',
+      'Comfy.Manager.ShowUpdateAvailablePacks'
+    ]
+  ],
  [
    ['Help'],
    [
--- a/src/constants/coreSettings.ts
+++ b/src/constants/coreSettings.ts
@@ -892,5 +892,12 @@ export const CORE_SETTINGS: SettingParams[] = [
    name: 'Release seen timestamp',
    type: 'hidden',
    defaultValue: 0
+  },
+  {
+    id: 'Comfy.Memory.AllowManualUnload',
+    name: 'Allow manual unload of models and execution cache via user command',
+    type: 'hidden',
+    defaultValue: true,
+    versionAdded: '1.18.0'
  }
 ]
--- a/src/extensions/core/saveImageExtraOutput.ts
+++ b/src/extensions/core/saveImageExtraOutput.ts
@@ -35,7 +35,7 @@ app.registerExtension({
        // @ts-expect-error fixme ts strict error
        widget.serializeValue = () => {
          // @ts-expect-error fixme ts strict error
-          return applyTextReplacements(app.graph.nodes, widget.value)
+          return applyTextReplacements(app.graph, widget.value)
        }

        return r
--- a/src/extensions/core/widgetInputs.ts
+++ b/src/extensions/core/widgetInputs.ts
@@ -46,7 +46,7 @@ export class PrimitiveNode extends LGraphNode {
    ]
    let v = this.widgets?.[0].value
    if (v && this.properties[replacePropertyName]) {
-      v = applyTextReplacements(app.graph.nodes, v as string)
+      v = applyTextReplacements(app.graph, v as string)
    }

    // For each output link copy our value over the original widget value
--- a/src/locales/en/commands.json
+++ b/src/locales/en/commands.json
@@ -155,8 +155,20 @@
  "Comfy_LoadDefaultWorkflow": {
    "label": "Load Default Workflow"
  },
-  "Comfy_Manager_CustomNodesManager": {
-    "label": "Toggle the Custom Nodes Manager"
+  "Comfy_Manager_CustomNodesManager_ShowCustomNodesMenu": {
+    "label": "Show the Custom Nodes Manager"
+  },
+  "Comfy_Manager_CustomNodesManager_ShowLegacyCustomNodesMenu": {
+    "label": "Custom Nodes (Legacy)"
+  },
+  "Comfy_Manager_ShowLegacyManagerMenu": {
+    "label": "Manager Menu (Legacy)"
+  },
+  "Comfy_Manager_ShowMissingPacks": {
+    "label": "Install Missing Custom Nodes"
+  },
+  "Comfy_Manager_ShowUpdateAvailablePacks": {
+    "label": "Check for Custom Node Updates"
  },
  "Comfy_Manager_ToggleManagerProgressDialog": {
    "label": "Toggle the Custom Nodes Manager Progress Bar"
@@ -170,6 +182,12 @@
  "Comfy_MaskEditor_OpenMaskEditor": {
    "label": "Open Mask Editor for Selected Node"
  },
+  "Comfy_Memory_UnloadModels": {
+    "label": "Unload Models"
+  },
+  "Comfy_Memory_UnloadModelsAndExecutionCache": {
+    "label": "Unload Models and Execution Cache"
+  },
  "Comfy_NewBlankWorkflow": {
    "label": "New Blank Workflow"
  },
--- a/src/locales/en/main.json
+++ b/src/locales/en/main.json
@@ -98,11 +98,18 @@
    "nodes": "Nodes",
    "community": "Community",
    "all": "All",
+    "versionMismatchWarning": "Version Compatibility Warning",
+    "versionMismatchWarningMessage": "{warning}: {detail} Visit https://docs.comfy.org/installation/update_comfyui#common-update-issues for update instructions.",
+    "frontendOutdated": "Frontend version {frontendVersion} is outdated. Backend requires {requiredVersion} or higher.",
+    "frontendNewer": "Frontend version {frontendVersion} may not be compatible with backend version {backendVersion}.",
+    "updateFrontend": "Update Frontend",
+    "dismiss": "Dismiss",
    "update": "Update",
    "updated": "Updated",
    "resultsCount": "Found {count} Results",
    "status": "Status",
    "description": "Description",
+    "warning": "Warning",
    "name": "Name",
    "category": "Category",
    "sort": "Sort",
@@ -134,6 +141,7 @@
    "releaseTitle": "{package} {version} Release",
    "progressCountOf": "of",
    "keybindingAlreadyExists": "Keybinding already exists on",
+    "commandProhibited": "Command {command} is prohibited. Contact an administrator for more information.",
    "startRecording": "Start Recording",
    "stopRecording": "Stop Recording",
    "micPermissionDenied": "Microphone permission denied",
@@ -142,7 +150,13 @@
  },
  "manager": {
    "title": "Custom Nodes Manager",
-    "failed": "Failed ({count})",
+    "legacyMenuNotAvailable": "Legacy manager menu is not available, defaulting to the new manager menu.",
+    "legacyManagerUI": "Use Legacy UI",
+    "legacyManagerUIDescription": "To use the legacy Manager UI, start ComfyUI with --enable-manager-legacy-ui",
+    "failed": "Failed",
+    "failedToInstall": "Failed to Install",
+    "installError": "Install Error",
+    "importFailedGenericError": "Package failed to import. Check the console for more details.",
    "noNodesFound": "No nodes found",
    "noNodesFoundDescription": "The pack's nodes either could not be parsed, or the pack is a frontend extension only and doesn't have any nodes.",
    "installationQueue": "Installation Queue",
@@ -150,15 +164,21 @@
    "dependencies": "Dependencies",
    "inWorkflow": "In Workflow",
    "infoPanelEmpty": "Click an item to see the info",
-    "restartToApplyChanges": "To apply changes, please restart ComfyUI",
+    "applyChanges": "Apply Changes",
+    "restartToApplyChanges": "Click 'Apply Changes' to finish setup",
+    "restartingBackend": "Restarting backend to apply changes...",
+    "extensionsSuccessfullyInstalled": "Extension(s) successfully installed and are ready to use!",
    "loadingVersions": "Loading versions...",
    "selectVersion": "Select Version",
    "downloads": "Downloads",
    "repository": "Repository",
+    "installingDependencies": "Installing dependencies...",
    "uninstall": "Uninstall",
    "uninstalling": "Uninstalling",
    "update": "Update",
    "uninstallSelected": "Uninstall Selected",
+    "updateSelected": "Update Selected",
+    "updateAll": "Update All",
    "updatingAllPacks": "Updating all packages",
    "license": "License",
    "nightlyVersion": "Nightly",
@@ -177,14 +197,16 @@
    "noDescription": "No description available",
    "installSelected": "Install Selected",
    "installAllMissingNodes": "Install All Missing Nodes",
-    "packsSelected": "Packs Selected",
+    "packsSelected": "packs selected",
    "status": {
      "active": "Active",
      "pending": "Pending",
      "flagged": "Flagged",
      "deleted": "Deleted",
      "banned": "Banned",
-      "unknown": "Unknown"
+      "unknown": "Unknown",
+      "conflicting": "Conflicting",
+      "importFailed": "Install Error"
    },
    "sort": {
      "downloads": "Most Popular",
@@ -196,6 +218,34 @@
      "nodePack": "Node Pack",
      "enabled": "Enabled",
      "disabled": "Disabled"
+    },
+    "conflicts": {
+      "title": "Conflicts Detected!",
+      "description": "We’ve detected conflicts between some of your extensions and the new version of ComfyUI. By updating you risk breaking workflows that rely on those extensions.",
+      "info": "If you continue with the update, the conflicting extensions will be disabled automatically. You can review and manage them anytime in the ComfyUI Manager.",
+      "extensionAtRisk": "Extension at Risk",
+      "conflicts": "Conflicts",
+      "importFailedExtensions": "Import Failed Extensions",
+      "conflictInfoTitle": "Why is this happening?",
+      "installAnyway": "Install Anyway",
+      "enableAnyway": "Enable Anyway",
+      "understood": "Understood",
+      "warningBanner": {
+        "title": "Some extensions are disabled due to incompatibility with your current setup",
+        "message": "These extensions require versions of system packages  that differ from your current setup. Installing them may override core dependencies and affect other extensions or workflows.",
+        "button": "Learn More..."
+      },
+      "conflictMessages": {
+        "comfyui_version": "ComfyUI version mismatch (current: {current}, required: {required})",
+        "frontend_version": "Frontend version mismatch (current: {current}, required: {required})",
+        "os": "Operating system not supported (current: {current}, required: {required})",
+        "accelerator": "GPU/Accelerator not supported (available: {current}, required: {required})",
+        "generic": "Compatibility issue (current: {current}, required: {required})",
+        "banned": "This package is banned for security reasons",
+        "pending": "Security verification pending - compatibility cannot be verified",
+        "import_failed": "Import Failed"
+      },
+      "warningTooltip": "This package may have compatibility issues with your current environment"
    }
  },
  "issueReport": {
@@ -487,6 +537,7 @@
    "docs": "Docs",
    "github": "Github",
    "helpFeedback": "Help & Feedback",
+    "managerExtension": "Manager Extension",
    "more": "More...",
    "whatsNew": "What's New?",
    "clickToLearnMore": "Click to learn more →",
@@ -924,6 +975,7 @@
  "menuLabels": {
    "Workflow": "Workflow",
    "Edit": "Edit",
+    "Manager": "Manager",
    "Help": "Help",
    "Check for Updates": "Check for Updates",
    "Open Custom Nodes Folder": "Open Custom Nodes Folder",
@@ -977,11 +1029,22 @@
    "ComfyUI Issues": "ComfyUI Issues",
    "Interrupt": "Interrupt",
    "Load Default Workflow": "Load Default Workflow",
+    "Show the Custom Nodes Manager": "Show the Custom Nodes Manager",
    "Toggle the Custom Nodes Manager": "Toggle the Custom Nodes Manager",
    "Toggle the Custom Nodes Manager Progress Bar": "Toggle the Custom Nodes Manager Progress Bar",
    "Decrease Brush Size in MaskEditor": "Decrease Brush Size in MaskEditor",
    "Increase Brush Size in MaskEditor": "Increase Brush Size in MaskEditor",
+    "Custom Nodes (Beta)": "Custom Nodes (Beta)",
+    "Custom Nodes Manager": "Custom Nodes Manager",
+    "Install Missing": "Install Missing",
+    "Custom Nodes (Legacy)": "Custom Nodes (Legacy)",
+    "Manager Menu (Legacy)": "Manager Menu (Legacy)",
+    "Install Missing Custom Nodes": "Install Missing Custom Nodes",
+    "Check for Custom Node Updates": "Check for Custom Node Updates",
+    "Toggle the Custom Nodes Manager Progress Bar": "Toggle the Custom Nodes Manager Progress Bar",
    "Open Mask Editor for Selected Node": "Open Mask Editor for Selected Node",
+    "Unload Models": "Unload Models",
+    "Unload Models and Execution Cache": "Unload Models and Execution Cache",
    "New": "New",
    "Clipspace": "Clipspace",
    "Open": "Open",
@@ -1351,6 +1414,13 @@
    "outdatedVersionGeneric": "Some nodes require a newer version of ComfyUI. Please update to use all nodes.",
    "coreNodesFromVersion": "Requires ComfyUI {version}:"
  },
+  "versionMismatchWarning": {
+    "title": "Version Compatibility Warning",
+    "frontendOutdated": "Frontend version {frontendVersion} is outdated. Backend requires version {requiredVersion} or higher.",
+    "frontendNewer": "Frontend version {frontendVersion} may not be compatible with backend version {backendVersion}.",
+    "updateFrontend": "Update Frontend",
+    "dismiss": "Dismiss"
+  },
  "errorDialog": {
    "defaultTitle": "An error occurred",
    "loadWorkflowTitle": "Loading aborted due to error reloading workflow data",
--- a/src/locales/es/commands.json
+++ b/src/locales/es/commands.json
@@ -155,8 +155,20 @@
  "Comfy_LoadDefaultWorkflow": {
    "label": "Cargar flujo de trabajo predeterminado"
  },
-  "Comfy_Manager_CustomNodesManager": {
-    "label": "Administrador de nodos personalizados"
+  "Comfy_Manager_CustomNodesManager_ShowCustomNodesMenu": {
+    "label": "Nodos personalizados (Beta)"
+  },
+  "Comfy_Manager_CustomNodesManager_ShowLegacyCustomNodesMenu": {
+    "label": "Nodos personalizados (heredados)"
+  },
+  "Comfy_Manager_ShowLegacyManagerMenu": {
+    "label": "Menú del gestor (heredado)"
+  },
+  "Comfy_Manager_ShowMissingPacks": {
+    "label": "Instalar faltantes"
+  },
+  "Comfy_Manager_ShowUpdateAvailablePacks": {
+    "label": "Buscar actualizaciones"
  },
  "Comfy_Manager_ToggleManagerProgressDialog": {
    "label": "Alternar diálogo de progreso del administrador"
@@ -170,6 +182,12 @@
  "Comfy_MaskEditor_OpenMaskEditor": {
    "label": "Abrir editor de máscara para el nodo seleccionado"
  },
+  "Comfy_Memory_UnloadModels": {
+    "label": "Descargar modelos"
+  },
+  "Comfy_Memory_UnloadModelsAndExecutionCache": {
+    "label": "Descargar modelos y caché de ejecución"
+  },
  "Comfy_NewBlankWorkflow": {
    "label": "Nuevo flujo de trabajo en blanco"
  },
--- a/src/locales/es/main.json
+++ b/src/locales/es/main.json
@@ -276,6 +276,7 @@
    "color": "Color",
    "comingSoon": "Próximamente",
    "command": "Comando",
+    "commandProhibited": "El comando {command} está prohibido. Contacta a un administrador para más información.",
    "community": "Comunidad",
    "completed": "Completado",
    "confirm": "Confirmar",
@@ -296,6 +297,7 @@
    "devices": "Dispositivos",
    "disableAll": "Deshabilitar todo",
    "disabling": "Deshabilitando",
+    "dismiss": "Descartar",
    "download": "Descargar",
    "edit": "Editar",
    "empty": "Vacío",
@@ -310,6 +312,8 @@
    "filter": "Filtrar",
    "findIssues": "Encontrar problemas",
    "firstTimeUIMessage": "Esta es la primera vez que usas la nueva interfaz. Elige \"Menú > Usar nuevo menú > Desactivado\" para restaurar la antigua interfaz.",
+    "frontendNewer": "La versión del frontend {frontendVersion} puede no ser compatible con la versión del backend {backendVersion}.",
+    "frontendOutdated": "La versión del frontend {frontendVersion} está desactualizada. El backend requiere la versión {requiredVersion} o superior.",
    "goToNode": "Ir al nodo",
    "help": "Ayuda",
    "icon": "Icono",
@@ -389,11 +393,14 @@
    "unknownError": "Error desconocido",
    "update": "Actualizar",
    "updateAvailable": "Actualización Disponible",
+    "updateFrontend": "Actualizar frontend",
    "updated": "Actualizado",
    "updating": "Actualizando",
    "upload": "Subir",
    "usageHint": "Sugerencia de uso",
    "user": "Usuario",
+    "versionMismatchWarning": "Advertencia de compatibilidad de versión",
+    "versionMismatchWarningMessage": "{warning}: {detail} Visita https://docs.comfy.org/installation/update_comfyui#common-update-issues para obtener instrucciones de actualización.",
    "videoFailedToLoad": "Falló la carga del video",
    "workflow": "Flujo de trabajo"
  },
@@ -621,12 +628,14 @@
    "title": "Mantenimiento"
  },
  "manager": {
+    "applyChanges": "Aplicar cambios",
    "changingVersion": "Cambiando versión de {from} a {to}",
    "createdBy": "Creado Por",
    "dependencies": "Dependencias",
    "discoverCommunityContent": "Descubre paquetes de nodos, extensiones y más creados por la comunidad...",
    "downloads": "Descargas",
    "errorConnecting": "Error al conectar con el Registro de Nodos Comfy.",
+    "extensionsSuccessfullyInstalled": "¡Extensión(es) instalada(s) correctamente y lista(s) para usar!",
    "failed": "Falló ({count})",
    "filter": {
      "disabled": "Deshabilitado",
@@ -638,8 +647,12 @@
    "installAllMissingNodes": "Instalar todos los nodos faltantes",
    "installSelected": "Instalar Seleccionado",
    "installationQueue": "Cola de Instalación",
+    "installingDependencies": "Instalando dependencias...",
    "lastUpdated": "Última Actualización",
    "latestVersion": "Última",
+    "legacyManagerUI": "Usar UI antigua",
+    "legacyManagerUIDescription": "Para usar la UI antigua del Manager, inicia ComfyUI con --enable-manager-legacy-ui",
+    "legacyMenuNotAvailable": "El menú del administrador antiguo no está disponible en esta versión de ComfyUI. Por favor, utiliza el nuevo menú del administrador en su lugar.",
    "license": "Licencia",
    "loadingVersions": "Cargando versiones...",
    "nightlyVersion": "Nocturna",
@@ -651,6 +664,7 @@
    "packsSelected": "Paquetes Seleccionados",
    "repository": "Repositorio",
    "restartToApplyChanges": "Para aplicar los cambios, por favor reinicia ComfyUI",
+    "restartingBackend": "Reiniciando el backend para aplicar los cambios...",
    "searchPlaceholder": "Buscar",
    "selectVersion": "Seleccionar Versión",
    "sort": {
@@ -675,6 +689,8 @@
    "uninstallSelected": "Desinstalar Seleccionado",
    "uninstalling": "Desinstalando",
    "update": "Actualizar",
+    "updateAll": "Actualizar todo",
+    "updateSelected": "Actualizar seleccionados",
    "updatingAllPacks": "Actualizando todos los paquetes",
    "version": "Versión"
  },
@@ -740,6 +756,8 @@
    "Canvas Toggle Link Visibility": "Alternar visibilidad de enlace en lienzo",
    "Canvas Toggle Lock": "Alternar bloqueo en lienzo",
    "Canvas Toggle Minimap": "Lienzo: Alternar minimapa",
+    "Check for Custom Node Updates": "Buscar actualizaciones de nodos personalizados",
+    "Check for Custom Node Updates": "Buscar Actualizaciones de Nodos Personalizados",
    "Check for Updates": "Buscar actualizaciones",
    "Clear Pending Tasks": "Borrar tareas pendientes",
    "Clear Workflow": "Borrar flujo de trabajo",
@@ -753,6 +771,10 @@
    "Contact Support": "Contactar soporte",
    "Convert Selection to Subgraph": "Convertir selección en subgrafo",
    "Convert selected nodes to group node": "Convertir nodos seleccionados en nodo de grupo",
+    "Custom Nodes (Beta)": "Nodos personalizados (Beta)",
+    "Custom Nodes (Legacy)": "Nodos personalizados (Antiguo)",
+    "Custom Nodes (Legacy)": "Nodos Personalizados (Legado)",
+    "Custom Nodes Manager": "Administrador de Nodos Personalizados",
    "Decrease Brush Size in MaskEditor": "Disminuir tamaño del pincel en MaskEditor",
    "Delete Selected Items": "Eliminar elementos seleccionados",
    "Desktop User Guide": "Guía de usuario de escritorio",
@@ -766,9 +788,14 @@
    "Group Selected Nodes": "Agrupar nodos seleccionados",
    "Help": "Ayuda",
    "Increase Brush Size in MaskEditor": "Aumentar tamaño del pincel en MaskEditor",
+    "Install Missing": "Instalar Faltantes",
+    "Install Missing Custom Nodes": "Instalar nodos personalizados faltantes",
+    "Install Missing Custom Nodes": "Instalar Nodos Personalizados Faltantes",
    "Interrupt": "Interrumpir",
    "Load Default Workflow": "Cargar flujo de trabajo predeterminado",
    "Manage group nodes": "Gestionar nodos de grupo",
+    "Manager": "Administrador",
+    "Manager Menu (Legacy)": "Menú de Gestión (Legado)",
    "Move Selected Nodes Down": "Mover nodos seleccionados hacia abajo",
    "Move Selected Nodes Left": "Mover nodos seleccionados hacia la izquierda",
    "Move Selected Nodes Right": "Mover nodos seleccionados hacia la derecha",
@@ -802,6 +829,7 @@
    "Save": "Guardar",
    "Save As": "Guardar como",
    "Show Settings Dialog": "Mostrar diálogo de configuración",
+    "Show the Custom Nodes Manager": "Mostrar el Administrador de Nodos Personalizados",
    "Sign Out": "Cerrar sesión",
    "Toggle Bottom Panel": "Alternar panel inferior",
    "Toggle Focus Mode": "Alternar modo de enfoque",
@@ -813,10 +841,11 @@
    "Toggle Terminal Bottom Panel": "Alternar panel inferior de terminal",
    "Toggle Theme (Dark/Light)": "Alternar tema (Oscuro/Claro)",
    "Toggle Workflows Sidebar": "Alternar barra lateral de los flujos de trabajo",
-    "Toggle the Custom Nodes Manager": "Alternar el Administrador de Nodos Personalizados",
    "Toggle the Custom Nodes Manager Progress Bar": "Alternar la Barra de Progreso del Administrador de Nodos Personalizados",
    "Undo": "Deshacer",
    "Ungroup selected group nodes": "Desagrupar nodos de grupo seleccionados",
+    "Unload Models": "Descargar modelos",
+    "Unload Models and Execution Cache": "Descargar modelos y caché de ejecución",
    "Workflow": "Flujo de trabajo",
    "Zoom In": "Acercar",
    "Zoom Out": "Alejar"
@@ -1602,6 +1631,13 @@
    "prefix": "Debe comenzar con {prefix}",
    "required": "Requerido"
  },
+  "versionMismatchWarning": {
+    "dismiss": "Descartar",
+    "frontendNewer": "La versión del frontend {frontendVersion} puede no ser compatible con la versión del backend {backendVersion}.",
+    "frontendOutdated": "La versión del frontend {frontendVersion} está desactualizada. El backend requiere la versión {requiredVersion} o superior.",
+    "title": "Advertencia de compatibilidad de versión",
+    "updateFrontend": "Actualizar frontend"
+  },
  "welcome": {
    "getStarted": "Empezar",
    "title": "Bienvenido a ComfyUI"
--- a/src/locales/fr/commands.json
+++ b/src/locales/fr/commands.json
@@ -155,8 +155,20 @@
  "Comfy_LoadDefaultWorkflow": {
    "label": "Charger le flux de travail par défaut"
  },
-  "Comfy_Manager_CustomNodesManager": {
-    "label": "Gestionnaire de Nœuds Personnalisés"
+  "Comfy_Manager_CustomNodesManager_ShowCustomNodesMenu": {
+    "label": "Nœuds personnalisés (Beta)"
+  },
+  "Comfy_Manager_CustomNodesManager_ShowLegacyCustomNodesMenu": {
+    "label": "Nœuds personnalisés (héritage)"
+  },
+  "Comfy_Manager_ShowLegacyManagerMenu": {
+    "label": "Menu du gestionnaire (hérité)"
+  },
+  "Comfy_Manager_ShowMissingPacks": {
+    "label": "Installer manquants"
+  },
+  "Comfy_Manager_ShowUpdateAvailablePacks": {
+    "label": "Vérifier les mises à jour"
  },
  "Comfy_Manager_ToggleManagerProgressDialog": {
    "label": "Basculer la boîte de dialogue de progression"
@@ -170,6 +182,12 @@
  "Comfy_MaskEditor_OpenMaskEditor": {
    "label": "Ouvrir l'éditeur de masque pour le nœud sélectionné"
  },
+  "Comfy_Memory_UnloadModels": {
+    "label": "Décharger les modèles"
+  },
+  "Comfy_Memory_UnloadModelsAndExecutionCache": {
+    "label": "Décharger les modèles et le cache d'exécution"
+  },
  "Comfy_NewBlankWorkflow": {
    "label": "Nouveau flux de travail vierge"
  },
--- a/src/locales/fr/main.json
+++ b/src/locales/fr/main.json
@@ -276,6 +276,7 @@
    "color": "Couleur",
    "comingSoon": "Bientôt disponible",
    "command": "Commande",
+    "commandProhibited": "La commande {command} est interdite. Contactez un administrateur pour plus d'informations.",
    "community": "Communauté",
    "completed": "Terminé",
    "confirm": "Confirmer",
@@ -296,6 +297,7 @@
    "devices": "Appareils",
    "disableAll": "Désactiver tout",
    "disabling": "Désactivation",
+    "dismiss": "Fermer",
    "download": "Télécharger",
    "edit": "Modifier",
    "empty": "Vide",
@@ -310,6 +312,8 @@
    "filter": "Filtrer",
    "findIssues": "Trouver des problèmes",
    "firstTimeUIMessage": "C'est la première fois que vous utilisez la nouvelle interface utilisateur. Choisissez \"Menu > Utiliser le nouveau menu > Désactivé\" pour restaurer l'ancienne interface utilisateur.",
+    "frontendNewer": "La version du frontend {frontendVersion} peut ne pas être compatible avec la version du backend {backendVersion}.",
+    "frontendOutdated": "La version du frontend {frontendVersion} est obsolète. Le backend requiert la version {requiredVersion} ou supérieure.",
    "goToNode": "Aller au nœud",
    "help": "Aide",
    "icon": "Icône",
@@ -389,11 +393,14 @@
    "unknownError": "Erreur inconnue",
    "update": "Mettre à jour",
    "updateAvailable": "Mise à jour disponible",
+    "updateFrontend": "Mettre à jour le frontend",
    "updated": "Mis à jour",
    "updating": "Mise à jour",
    "upload": "Téléverser",
    "usageHint": "Conseil d'utilisation",
    "user": "Utilisateur",
+    "versionMismatchWarning": "Avertissement de compatibilité de version",
+    "versionMismatchWarningMessage": "{warning} : {detail} Consultez https://docs.comfy.org/installation/update_comfyui#common-update-issues pour les instructions de mise à jour.",
    "videoFailedToLoad": "Échec du chargement de la vidéo",
    "workflow": "Flux de travail"
  },
@@ -621,12 +628,14 @@
    "title": "Maintenance"
  },
  "manager": {
+    "applyChanges": "Appliquer les modifications",
    "changingVersion": "Changement de version de {from} à {to}",
    "createdBy": "Créé par",
    "dependencies": "Dépendances",
    "discoverCommunityContent": "Découvrez les packs de nœuds, extensions et plus encore créés par la communauté...",
    "downloads": "Téléchargements",
    "errorConnecting": "Erreur de connexion au registre de nœuds Comfy.",
+    "extensionsSuccessfullyInstalled": "Extension(s) installée(s) avec succès et prêtes à l'emploi !",
    "failed": "Échoué ({count})",
    "filter": {
      "disabled": "Désactivé",
@@ -638,8 +647,12 @@
    "installAllMissingNodes": "Installer tous les nœuds manquants",
    "installSelected": "Installer sélectionné",
    "installationQueue": "File d'attente d'installation",
+    "installingDependencies": "Installation des dépendances...",
    "lastUpdated": "Dernière mise à jour",
    "latestVersion": "Dernière",
+    "legacyManagerUI": "Utiliser l'interface utilisateur héritée",
+    "legacyManagerUIDescription": "Pour utiliser l'interface utilisateur de gestion héritée, démarrez ComfyUI avec --enable-manager-legacy-ui",
+    "legacyMenuNotAvailable": "Le menu du gestionnaire de l'ancienne version n'est pas disponible dans cette version de ComfyUI. Veuillez utiliser le nouveau menu du gestionnaire à la place.",
    "license": "Licence",
    "loadingVersions": "Chargement des versions...",
    "nightlyVersion": "Nocturne",
@@ -651,6 +664,7 @@
    "packsSelected": "Packs sélectionnés",
    "repository": "Référentiel",
    "restartToApplyChanges": "Pour appliquer les modifications, veuillez redémarrer ComfyUI",
+    "restartingBackend": "Redémarrage du backend pour appliquer les modifications...",
    "searchPlaceholder": "Recherche",
    "selectVersion": "Sélectionner la version",
    "sort": {
@@ -675,6 +689,8 @@
    "uninstallSelected": "Désinstaller sélectionné",
    "uninstalling": "Désinstallation",
    "update": "Mettre à jour",
+    "updateAll": "Tout mettre à jour",
+    "updateSelected": "Mettre à jour la sélection",
    "updatingAllPacks": "Mise à jour de tous les paquets",
    "version": "Version"
  },
@@ -740,7 +756,10 @@
    "Canvas Toggle Link Visibility": "Basculer la visibilité du lien de la toile",
    "Canvas Toggle Lock": "Basculer le verrouillage de la toile",
    "Canvas Toggle Minimap": "Basculer la mini-carte du canevas",
+    "Check for Custom Node Updates": "Vérifier les mises à jour des nœuds personnalisés",
    "Check for Updates": "Vérifier les mises à jour",
+    "Check for Custom Node Updates": "Vérifier les mises à jour des nœuds personnalisés",
+    "Check for Updates": "Vérifier les Mises à Jour",
    "Clear Pending Tasks": "Effacer les tâches en attente",
    "Clear Workflow": "Effacer le flux de travail",
    "Clipspace": "Espace de clip",
@@ -753,7 +772,11 @@
    "Contact Support": "Contacter le support",
    "Convert Selection to Subgraph": "Convertir la sélection en sous-graphe",
    "Convert selected nodes to group node": "Convertir les nœuds sélectionnés en nœud de groupe",
+    "Custom Nodes (Beta)": "Nœuds personnalisés (Beta)",
+    "Custom Nodes (Legacy)": "Nœuds personnalisés (Ancienne version)",
+    "Custom Nodes Manager": "Gestionnaire de Nœuds Personnalisés",
    "Decrease Brush Size in MaskEditor": "Réduire la taille du pinceau dans MaskEditor",
+    "Custom Nodes (Legacy)": "Nœuds personnalisés (héritage)",
    "Delete Selected Items": "Supprimer les éléments sélectionnés",
    "Desktop User Guide": "Guide de l'utilisateur de bureau",
    "Duplicate Current Workflow": "Dupliquer le flux de travail actuel",
@@ -766,9 +789,14 @@
    "Group Selected Nodes": "Grouper les nœuds sélectionnés",
    "Help": "Aide",
    "Increase Brush Size in MaskEditor": "Augmenter la taille du pinceau dans MaskEditor",
+    "Install Missing Custom Nodes": "Installer les nœuds personnalisés manquants",
+    "Install Missing": "Installer Manquants",
+    "Install Missing Custom Nodes": "Installer les nœuds personnalisés manquants",
    "Interrupt": "Interrompre",
    "Load Default Workflow": "Charger le flux de travail par défaut",
    "Manage group nodes": "Gérer les nœuds de groupe",
+    "Manager": "Gestionnaire",
+    "Manager Menu (Legacy)": "Menu du gestionnaire (héritage)",
    "Move Selected Nodes Down": "Déplacer les nœuds sélectionnés vers le bas",
    "Move Selected Nodes Left": "Déplacer les nœuds sélectionnés vers la gauche",
    "Move Selected Nodes Right": "Déplacer les nœuds sélectionnés vers la droite",
@@ -802,6 +830,7 @@
    "Save": "Enregistrer",
    "Save As": "Enregistrer sous",
    "Show Settings Dialog": "Afficher la boîte de dialogue des paramètres",
+    "Show the Custom Nodes Manager": "Afficher le gestionnaire de nœuds personnalisés",
    "Sign Out": "Se déconnecter",
    "Toggle Bottom Panel": "Basculer le panneau inférieur",
    "Toggle Focus Mode": "Basculer le mode focus",
@@ -813,10 +842,11 @@
    "Toggle Terminal Bottom Panel": "Basculer le panneau inférieur du terminal",
    "Toggle Theme (Dark/Light)": "Basculer le thème (Sombre/Clair)",
    "Toggle Workflows Sidebar": "Afficher/Masquer la barre latérale des workflows",
-    "Toggle the Custom Nodes Manager": "Basculer le gestionnaire de nœuds personnalisés",
    "Toggle the Custom Nodes Manager Progress Bar": "Basculer la barre de progression du gestionnaire de nœuds personnalisés",
    "Undo": "Annuler",
    "Ungroup selected group nodes": "Dégrouper les nœuds de groupe sélectionnés",
+    "Unload Models": "Décharger les modèles",
+    "Unload Models and Execution Cache": "Décharger les modèles et le cache d'exécution",
    "Workflow": "Flux de travail",
    "Zoom In": "Zoom avant",
    "Zoom Out": "Zoom arrière"
@@ -1602,6 +1632,13 @@
    "prefix": "Doit commencer par {prefix}",
    "required": "Requis"
  },
+  "versionMismatchWarning": {
+    "dismiss": "Ignorer",
+    "frontendNewer": "La version du frontend {frontendVersion} peut ne pas être compatible avec la version du backend {backendVersion}.",
+    "frontendOutdated": "La version du frontend {frontendVersion} est obsolète. Le backend nécessite la version {requiredVersion} ou supérieure.",
+    "title": "Avertissement de compatibilité de version",
+    "updateFrontend": "Mettre à jour le frontend"
+  },
  "welcome": {
    "getStarted": "Commencer",
    "title": "Bienvenue sur ComfyUI"
--- a/src/locales/ja/commands.json
+++ b/src/locales/ja/commands.json
@@ -155,8 +155,20 @@
  "Comfy_LoadDefaultWorkflow": {
    "label": "デフォルトのワークフローを読み込む"
  },
-  "Comfy_Manager_CustomNodesManager": {
-    "label": "カスタムノードマネージャ"
+  "Comfy_Manager_CustomNodesManager_ShowCustomNodesMenu": {
+    "label": "カスタムノード（ベータ版）"
+  },
+  "Comfy_Manager_CustomNodesManager_ShowLegacyCustomNodesMenu": {
+    "label": "カスタムノード（レガシー）"
+  },
+  "Comfy_Manager_ShowLegacyManagerMenu": {
+    "label": "マネージャーメニュー（レガシー）"
+  },
+  "Comfy_Manager_ShowMissingPacks": {
+    "label": "不足しているパックをインストール"
+  },
+  "Comfy_Manager_ShowUpdateAvailablePacks": {
+    "label": "更新を確認"
  },
  "Comfy_Manager_ToggleManagerProgressDialog": {
    "label": "プログレスダイアログの切り替え"
@@ -170,6 +182,12 @@
  "Comfy_MaskEditor_OpenMaskEditor": {
    "label": "選択したノードのマスクエディタを開く"
  },
+  "Comfy_Memory_UnloadModels": {
+    "label": "モデルのアンロード"
+  },
+  "Comfy_Memory_UnloadModelsAndExecutionCache": {
+    "label": "モデルと実行キャッシュのアンロード"
+  },
  "Comfy_NewBlankWorkflow": {
    "label": "新しい空のワークフロー"
  },
--- a/src/locales/ja/main.json
+++ b/src/locales/ja/main.json
@@ -276,6 +276,7 @@
    "color": "色",
    "comingSoon": "近日公開",
    "command": "コマンド",
+    "commandProhibited": "コマンド {command} は禁止されています。詳細は管理者にお問い合わせください。",
    "community": "コミュニティ",
    "completed": "完了",
    "confirm": "確認",
@@ -296,6 +297,7 @@
    "devices": "デバイス",
    "disableAll": "すべて無効にする",
    "disabling": "無効化",
+    "dismiss": "閉じる",
    "download": "ダウンロード",
    "edit": "編集",
    "empty": "空",
@@ -310,6 +312,8 @@
    "filter": "フィルタ",
    "findIssues": "問題を見つける",
    "firstTimeUIMessage": "新しいUIを初めて使用しています。「メニュー > 新しいメニューを使用 > 無効」を選択することで古いUIに戻すことが可能です。",
+    "frontendNewer": "フロントエンドのバージョン {frontendVersion} はバックエンドのバージョン {backendVersion} と互換性がない可能性があります。",
+    "frontendOutdated": "フロントエンドのバージョン {frontendVersion} は古くなっています。バックエンドは {requiredVersion} 以上が必要です。",
    "goToNode": "ノードに移動",
    "help": "ヘルプ",
    "icon": "アイコン",
@@ -389,11 +393,14 @@
    "unknownError": "不明なエラー",
    "update": "更新",
    "updateAvailable": "更新が利用可能",
+    "updateFrontend": "フロントエンドを更新",
    "updated": "更新済み",
    "updating": "更新中",
    "upload": "アップロード",
    "usageHint": "使用ヒント",
    "user": "ユーザー",
+    "versionMismatchWarning": "バージョン互換性の警告",
+    "versionMismatchWarningMessage": "{warning}: {detail} 更新手順については https://docs.comfy.org/installation/update_comfyui#common-update-issues をご覧ください。",
    "videoFailedToLoad": "ビデオの読み込みに失敗しました",
    "workflow": "ワークフロー"
  },
@@ -621,12 +628,14 @@
    "title": "メンテナンス"
  },
  "manager": {
+    "applyChanges": "変更を適用",
    "changingVersion": "バージョンを {from} から {to} に変更",
    "createdBy": "作成者",
    "dependencies": "依存関係",
    "discoverCommunityContent": "コミュニティが作成したノードパック、拡張機能などを探す...",
    "downloads": "ダウンロード",
    "errorConnecting": "Comfy Node Registryへの接続エラー。",
+    "extensionsSuccessfullyInstalled": "拡張機能のインストールが完了し、使用可能になりました！",
    "failed": "失敗しました ({count})",
    "filter": {
      "disabled": "無効",
@@ -638,8 +647,12 @@
    "installAllMissingNodes": "すべての不足しているノードをインストール",
    "installSelected": "選択したものをインストール",
    "installationQueue": "インストールキュー",
+    "installingDependencies": "依存関係をインストールしています...",
    "lastUpdated": "最終更新日",
    "latestVersion": "最新",
+    "legacyManagerUI": "レガシーUIを使用する",
+    "legacyManagerUIDescription": "レガシーManager UIを使用するには、--enable-manager-legacy-uiを付けてComfyUIを起動してください",
+    "legacyMenuNotAvailable": "このバージョンのComfyUIでは、レガシーマネージャーメニューは利用できません。新しいマネージャーメニューを使用してください。",
    "license": "ライセンス",
    "loadingVersions": "バージョンを読み込んでいます...",
    "nightlyVersion": "ナイトリー",
@@ -651,6 +664,7 @@
    "packsSelected": "選択したパック",
    "repository": "リポジトリ",
    "restartToApplyChanges": "変更を適用するには、ComfyUIを再起動してください",
+    "restartingBackend": "変更を適用するためにバックエンドを再起動しています...",
    "searchPlaceholder": "検索",
    "selectVersion": "バージョンを選択",
    "sort": {
@@ -675,6 +689,8 @@
    "uninstallSelected": "選択したものをアンインストール",
    "uninstalling": "アンインストール中",
    "update": "更新",
+    "updateAll": "すべて更新",
+    "updateSelected": "選択を更新",
    "updatingAllPacks": "すべてのパッケージを更新中",
    "version": "バージョン"
  },
@@ -740,7 +756,10 @@
    "Canvas Toggle Link Visibility": "キャンバスのリンク表示を切り替え",
    "Canvas Toggle Lock": "キャンバスのロックを切り替え",
    "Canvas Toggle Minimap": "キャンバス ミニマップの切り替え",
+    "Check for Custom Node Updates": "カスタムノードのアップデートを確認",
    "Check for Updates": "更新を確認する",
+    "Check for Custom Node Updates": "カスタムノードのアップデートを確認",
+    "Check for Updates": "更新を確認",
    "Clear Pending Tasks": "保留中のタスクをクリア",
    "Clear Workflow": "ワークフローをクリア",
    "Clipspace": "クリップスペース",
@@ -753,7 +772,11 @@
    "Contact Support": "サポートに連絡",
    "Convert Selection to Subgraph": "選択範囲をサブグラフに変換",
    "Convert selected nodes to group node": "選択したノードをグループノードに変換",
+    "Custom Nodes (Beta)": "カスタムノード（ベータ）",
+    "Custom Nodes (Legacy)": "カスタムノード（レガシー）",
+    "Custom Nodes Manager": "カスタムノードマネージャ",
    "Decrease Brush Size in MaskEditor": "マスクエディタでブラシサイズを小さくする",
+    "Custom Nodes (Legacy)": "カスタムノード（レガシー）",
    "Delete Selected Items": "選択したアイテムを削除",
    "Desktop User Guide": "デスクトップユーザーガイド",
    "Duplicate Current Workflow": "現在のワークフローを複製",
@@ -766,9 +789,14 @@
    "Group Selected Nodes": "選択したノードをグループ化",
    "Help": "ヘルプ",
    "Increase Brush Size in MaskEditor": "マスクエディタでブラシサイズを大きくする",
+    "Install Missing Custom Nodes": "不足しているカスタムノードをインストール",
+    "Install Missing": "不足しているものをインストール",
+    "Install Missing Custom Nodes": "不足しているカスタムノードをインストール",
    "Interrupt": "中断",
    "Load Default Workflow": "デフォルトワークフローを読み込む",
    "Manage group nodes": "グループノードを管理",
+    "Manager": "マネージャー",
+    "Manager Menu (Legacy)": "マネージャーメニュー（レガシー）",
    "Move Selected Nodes Down": "選択したノードを下へ移動",
    "Move Selected Nodes Left": "選択したノードを左へ移動",
    "Move Selected Nodes Right": "選択したノードを右へ移動",
@@ -802,6 +830,7 @@
    "Save": "保存",
    "Save As": "名前を付けて保存",
    "Show Settings Dialog": "設定ダイアログを表示",
+    "Show the Custom Nodes Manager": "カスタムノードマネージャーを表示",
    "Sign Out": "サインアウト",
    "Toggle Bottom Panel": "下部パネルの切り替え",
    "Toggle Focus Mode": "フォーカスモードの切り替え",
@@ -813,10 +842,11 @@
    "Toggle Terminal Bottom Panel": "ターミナルパネル下部を切り替え",
    "Toggle Theme (Dark/Light)": "テーマを切り替え（ダーク/ライト）",
    "Toggle Workflows Sidebar": "ワークフローサイドバーを切り替え",
-    "Toggle the Custom Nodes Manager": "カスタムノードマネージャーを切り替え",
    "Toggle the Custom Nodes Manager Progress Bar": "カスタムノードマネージャーの進行状況バーを切り替え",
    "Undo": "元に戻す",
    "Ungroup selected group nodes": "選択したグループノードのグループ解除",
+    "Unload Models": "モデルのアンロード",
+    "Unload Models and Execution Cache": "モデルと実行キャッシュのアンロード",
    "Workflow": "ワークフロー",
    "Zoom In": "ズームイン",
    "Zoom Out": "ズームアウト"
@@ -1602,6 +1632,13 @@
    "prefix": "{prefix}で始める必要があります",
    "required": "必須"
  },
+  "versionMismatchWarning": {
+    "dismiss": "閉じる",
+    "frontendNewer": "フロントエンドのバージョン {frontendVersion} は、バックエンドのバージョン {backendVersion} と互換性がない可能性があります。",
+    "frontendOutdated": "フロントエンドのバージョン {frontendVersion} は古くなっています。バックエンドはバージョン {requiredVersion} 以上が必要です。",
+    "title": "バージョン互換性の警告",
+    "updateFrontend": "フロントエンドを更新"
+  },
  "welcome": {
    "getStarted": "はじめる",
    "title": "ComfyUIへようこそ"
--- a/src/locales/ko/commands.json
+++ b/src/locales/ko/commands.json
@@ -99,13 +99,13 @@
    "label": "보류 중인 작업 지우기"
  },
  "Comfy_ClearWorkflow": {
-    "label": "워크플로 지우기"
+    "label": "워크플로 내용 지우기"
  },
  "Comfy_ContactSupport": {
    "label": "지원팀에 문의하기"
  },
  "Comfy_DuplicateWorkflow": {
-    "label": "현재 워크플로우 복제"
+    "label": "현재 워크플로 복제"
  },
  "Comfy_ExportWorkflow": {
    "label": "워크플로 내보내기"
@@ -155,21 +155,39 @@
  "Comfy_LoadDefaultWorkflow": {
    "label": "기본 워크플로 로드"
  },
-  "Comfy_Manager_CustomNodesManager": {
-    "label": "사용자 정의 노드 관리자"
+  "Comfy_Manager_CustomNodesManager_ShowCustomNodesMenu": {
+    "label": "사용자 정의 노드 (베타)"
+  },
+  "Comfy_Manager_CustomNodesManager_ShowLegacyCustomNodesMenu": {
+    "label": "커스텀 노드 (레거시)"
+  },
+  "Comfy_Manager_ShowLegacyManagerMenu": {
+    "label": "매니저 메뉴 (레거시)"
+  },
+  "Comfy_Manager_ShowMissingPacks": {
+    "label": "누락된 팩 설치"
+  },
+  "Comfy_Manager_ShowUpdateAvailablePacks": {
+    "label": "업데이트 확인"
  },
  "Comfy_Manager_ToggleManagerProgressDialog": {
    "label": "진행 상황 대화 상자 전환"
  },
  "Comfy_MaskEditor_BrushSize_Decrease": {
-    "label": "MaskEditor에서 브러시 크기 줄이기"
+    "label": "마스크 편집기에서 브러시 크기 줄이기"
  },
  "Comfy_MaskEditor_BrushSize_Increase": {
-    "label": "MaskEditor에서 브러시 크기 늘리기"
+    "label": "마스크 편집기에서 브러시 크기 늘리기"
  },
  "Comfy_MaskEditor_OpenMaskEditor": {
    "label": "선택한 노드 마스크 편집기 열기"
  },
+  "Comfy_Memory_UnloadModels": {
+    "label": "모델 언로드"
+  },
+  "Comfy_Memory_UnloadModelsAndExecutionCache": {
+    "label": "모델 및 실행 캐시 언로드"
+  },
  "Comfy_NewBlankWorkflow": {
    "label": "새로운 빈 워크플로"
  },
@@ -216,7 +234,7 @@
    "label": "로그아웃"
  },
  "Workspace_CloseWorkflow": {
-    "label": "현재 워크플로우 닫기"
+    "label": "현재 워크플로 닫기"
  },
  "Workspace_NextOpenedWorkflow": {
    "label": "다음 열린 워크플로"
--- a/src/locales/ko/main.json
+++ b/src/locales/ko/main.json
@@ -5,7 +5,7 @@
    "totalCost": "총 비용"
  },
  "apiNodesSignInDialog": {
-    "message": "이 워크플로우에는 API 노드가 포함되어 있으며, 실행하려면 계정에 로그인해야 합니다.",
+    "message": "이 워크플로에는 API 노드가 포함되어 있으며, 실행하려면 계정에 로그인해야 합니다.",
    "title": "API 노드 사용에 필요한 로그인"
  },
  "auth": {
@@ -83,8 +83,8 @@
    }
  },
  "breadcrumbsMenu": {
-    "clearWorkflow": "워크플로우 지우기",
-    "deleteWorkflow": "워크플로우 삭제",
+    "clearWorkflow": "워크플로 내용 지우기",
+    "deleteWorkflow": "워크플로 삭제",
    "duplicate": "복제",
    "enterNewName": "새 이름 입력"
  },
@@ -161,7 +161,7 @@
    "time": "시간",
    "topUp": {
      "buyNow": "지금 구매",
-      "insufficientMessage": "이 워크플로우를 실행하기에 크레딧이 부족합니다.",
+      "insufficientMessage": "이 워크플로를 실행하기에 크레딧이 부족합니다.",
      "insufficientTitle": "크레딧 부족",
      "maxAmount": "(최대 $1,000 USD)",
      "quickPurchase": "빠른 구매",
@@ -252,7 +252,7 @@
  "errorDialog": {
    "defaultTitle": "오류가 발생했습니다",
    "extensionFileHint": "다음 스크립트 때문일 수 있습니다",
-    "loadWorkflowTitle": "워크플로우 데이터를 다시 로드하는 중 오류로 인해 로드가 중단되었습니다",
+    "loadWorkflowTitle": "워크플로 데이터를 다시 로드하는 중 오류로 인해 로드가 중단되었습니다",
    "noStackTrace": "스택 추적을 사용할 수 없습니다",
    "promptExecutionError": "프롬프트 실행 실패"
  },
@@ -276,6 +276,7 @@
    "color": "색상",
    "comingSoon": "곧 출시 예정",
    "command": "명령",
+    "commandProhibited": "명령 {command}은 금지되었습니다. 자세한 정보는 관리자에게 문의하십시오.",
    "community": "커뮤니티",
    "completed": "완료됨",
    "confirm": "확인",
@@ -296,6 +297,7 @@
    "devices": "장치",
    "disableAll": "모두 비활성화",
    "disabling": "비활성화 중",
+    "dismiss": "닫기",
    "download": "다운로드",
    "edit": "편집",
    "empty": "비어 있음",
@@ -310,6 +312,8 @@
    "filter": "필터",
    "findIssues": "문제 찾기",
    "firstTimeUIMessage": "새 UI를 처음 사용합니다. \"메뉴 > 새 메뉴 사용 > 비활성화\"를 선택하여 이전 UI로 복원하세요.",
+    "frontendNewer": "프론트엔드 버전 {frontendVersion}이(가) 백엔드 버전 {backendVersion}과(와) 호환되지 않을 수 있습니다.",
+    "frontendOutdated": "프론트엔드 버전 {frontendVersion}이(가) 오래되었습니다. 백엔드는 {requiredVersion} 이상이 필요합니다.",
    "goToNode": "노드로 이동",
    "help": "도움말",
    "icon": "아이콘",
@@ -389,11 +393,14 @@
    "unknownError": "알 수 없는 오류",
    "update": "업데이트",
    "updateAvailable": "업데이트 가능",
+    "updateFrontend": "프론트엔드 업데이트",
    "updated": "업데이트 됨",
    "updating": "업데이트 중",
    "upload": "업로드",
    "usageHint": "사용 힌트",
    "user": "사용자",
+    "versionMismatchWarning": "버전 호환성 경고",
+    "versionMismatchWarningMessage": "{warning}: {detail} 업데이트 지침은 https://docs.comfy.org/installation/update_comfyui#common-update-issues 를 방문하세요.",
    "videoFailedToLoad": "비디오를 로드하지 못했습니다.",
    "workflow": "워크플로"
  },
@@ -621,25 +628,31 @@
    "title": "유지 보수"
  },
  "manager": {
+    "applyChanges": "변경 사항 적용",
    "changingVersion": "{from}에서 {to}(으)로 버전 변경 중",
    "createdBy": "작성자",
    "dependencies": "의존성",
    "discoverCommunityContent": "커뮤니티에서 만든 노드 팩 및 확장 프로그램을 찾아보세요...",
    "downloads": "다운로드",
    "errorConnecting": "Comfy Node Registry에 연결하는 중 오류가 발생했습니다.",
+    "extensionsSuccessfullyInstalled": "확장 프로그램이 성공적으로 설치되어 사용할 준비가 되었습니다!",
    "failed": "실패 ({count})",
    "filter": {
      "disabled": "비활성화",
      "enabled": "활성화",
      "nodePack": "노드 팩"
    },
-    "inWorkflow": "워크플로우 내",
+    "inWorkflow": "워크플로 내",
    "infoPanelEmpty": "정보를 보려면 항목을 클릭하세요",
    "installAllMissingNodes": "모든 누락된 노드 설치",
    "installSelected": "선택한 항목 설치",
    "installationQueue": "설치 대기열",
+    "installingDependencies": "의존성 설치 중...",
    "lastUpdated": "마지막 업데이트",
    "latestVersion": "최신",
+    "legacyManagerUI": "레거시 UI 사용",
+    "legacyManagerUIDescription": "레거시 매니저 UI를 사용하려면, ComfyUI를 --enable-manager-legacy-ui로 시작하세요",
+    "legacyMenuNotAvailable": "이 버전의 ComfyUI에서는 레거시 매니저 메뉴를 사용할 수 없습니다. 대신 새로운 매니저 메뉴를 사용하십시오.",
    "license": "라이선스",
    "loadingVersions": "버전 로딩 중...",
    "nightlyVersion": "최신 테스트 버전(nightly)",
@@ -651,6 +664,7 @@
    "packsSelected": "선택한 노드 팩",
    "repository": "저장소",
    "restartToApplyChanges": "변경 사항을 적용하려면 ComfyUI를 재시작해 주세요",
+    "restartingBackend": "변경 사항을 적용하기 위해 백엔드를 재시작하는 중...",
    "searchPlaceholder": "검색",
    "selectVersion": "버전 선택",
    "sort": {
@@ -675,6 +689,8 @@
    "uninstallSelected": "선택 항목 제거",
    "uninstalling": "제거 중",
    "update": "업데이트",
+    "updateAll": "전체 업데이트",
+    "updateSelected": "선택 항목 업데이트",
    "updatingAllPacks": "모든 패키지 업데이트 중",
    "version": "버전"
  },
@@ -725,8 +741,8 @@
    "refresh": "노드 정의 새로 고침",
    "resetView": "캔버스 보기 재설정",
    "run": "실행",
-    "runWorkflow": "워크플로우 실행 (시프트 키와 함께 클릭시 가장 먼저 실행)",
-    "runWorkflowFront": "워크플로우 실행 (가장 먼저 실행)",
+    "runWorkflow": "워크플로 실행 (시프트 키와 함께 클릭시 가장 먼저 실행)",
+    "runWorkflowFront": "워크플로 실행 (가장 먼저 실행)",
    "settings": "설정",
    "showMenu": "메뉴 표시",
    "theme": "테마",
@@ -740,6 +756,7 @@
    "Canvas Toggle Link Visibility": "캔버스 토글 링크 가시성",
    "Canvas Toggle Lock": "캔버스 토글 잠금",
    "Canvas Toggle Minimap": "캔버스 미니맵 전환",
+    "Check for Custom Node Updates": "커스텀 노드 업데이트 확인",
    "Check for Updates": "업데이트 확인",
    "Clear Pending Tasks": "보류 중인 작업 제거하기",
    "Clear Workflow": "워크플로 지우기",
@@ -753,7 +770,11 @@
    "Contact Support": "고객 지원 문의",
    "Convert Selection to Subgraph": "선택 영역을 서브그래프로 변환",
    "Convert selected nodes to group node": "선택한 노드를 그룹 노드로 변환",
-    "Decrease Brush Size in MaskEditor": "MaskEditor에서 브러시 크기 줄이기",
+    "Custom Nodes (Beta)": "사용자 정의 노드 (베타)",
+    "Custom Nodes (Legacy)": "사용자 정의 노드 (레거시)",
+    "Custom Nodes Manager": "사용자 정의 노드 관리자",
+    "Decrease Brush Size in MaskEditor": "마스크 편집기에서 브러시 크기 줄이기",
+    "Custom Nodes (Legacy)": "커스텀 노드 (레거시)",
    "Delete Selected Items": "선택한 항목 삭제",
    "Desktop User Guide": "데스크톱 사용자 가이드",
    "Duplicate Current Workflow": "현재 워크플로 복제",
@@ -765,10 +786,15 @@
    "Give Feedback": "피드백 제공",
    "Group Selected Nodes": "선택한 노드 그룹화",
    "Help": "도움말",
-    "Increase Brush Size in MaskEditor": "MaskEditor에서 브러시 크기 늘리기",
+    "Increase Brush Size in MaskEditor": "마스크 편집기에서 브러시 크기 늘리기",
+    "Install Missing Custom Nodes": "누락된 커스텀 노드 설치",
+    "Install Missing": "누락된 설치",
+    "Install Missing Custom Nodes": "누락된 커스텀 노드 설치",
    "Interrupt": "중단",
    "Load Default Workflow": "기본 워크플로 불러오기",
    "Manage group nodes": "그룹 노드 관리",
+    "Manager": "매니저",
+    "Manager Menu (Legacy)": "매니저 메뉴 (레거시)",
    "Move Selected Nodes Down": "선택한 노드 아래로 이동",
    "Move Selected Nodes Left": "선택한 노드 왼쪽으로 이동",
    "Move Selected Nodes Right": "선택한 노드 오른쪽으로 이동",
@@ -802,21 +828,23 @@
    "Save": "저장",
    "Save As": "다른 이름으로 저장",
    "Show Settings Dialog": "설정 대화상자 표시",
+    "Show the Custom Nodes Manager": "커스텀 노드 관리자 표시",
    "Sign Out": "로그아웃",
    "Toggle Bottom Panel": "하단 패널 전환",
    "Toggle Focus Mode": "포커스 모드 전환",
    "Toggle Logs Bottom Panel": "로그 하단 패널 전환",
    "Toggle Model Library Sidebar": "모델 라이브러리 사이드바 전환",
    "Toggle Node Library Sidebar": "노드 라이브러리 사이드바 전환",
-    "Toggle Queue Sidebar": "대기열 사이드바 전환",
+    "Toggle Queue Sidebar": "실행 대기열 사이드바 전환",
    "Toggle Search Box": "검색 상자 전환",
    "Toggle Terminal Bottom Panel": "터미널 하단 패널 전환",
    "Toggle Theme (Dark/Light)": "테마 전환 (어두운/밝은)",
    "Toggle Workflows Sidebar": "워크플로우 사이드바 전환",
-    "Toggle the Custom Nodes Manager": "커스텀 노드 매니저 전환",
    "Toggle the Custom Nodes Manager Progress Bar": "커스텀 노드 매니저 진행률 표시줄 전환",
    "Undo": "실행 취소",
    "Ungroup selected group nodes": "선택한 그룹 노드 그룹 해제",
+    "Unload Models": "모델 언로드",
+    "Unload Models and Execution Cache": "모델 및 실행 캐시 언로드",
    "Workflow": "워크플로",
    "Zoom In": "확대",
    "Zoom Out": "축소"
@@ -906,7 +934,7 @@
    "documentationPage": "문서 페이지",
    "inputs": "입력",
    "loadError": "도움말을 불러오지 못했습니다: {error}",
-    "moreHelp": "더 많은 도움말은",
+    "moreHelp": "더 자세한 도움말은",
    "outputs": "출력",
    "type": "유형"
  },
@@ -1233,11 +1261,11 @@
        "stable_zero123_example": "Stable Zero123"
      },
      "3D API": {
-        "api_rodin_image_to_model": "Rodin: 이미지 투 모델",
-        "api_rodin_multiview_to_model": "Rodin: 다중뷰 투 모델",
-        "api_tripo_image_to_model": "Tripo: 이미지 투 모델",
-        "api_tripo_multiview_to_model": "Tripo: 다중뷰 투 모델",
-        "api_tripo_text_to_model": "Tripo: 텍스트 투 모델"
+        "api_rodin_image_to_model": "Rodin: 이미지 → 모델",
+        "api_rodin_multiview_to_model": "Rodin: 다중뷰 → 모델",
+        "api_tripo_image_to_model": "Tripo: 이미지 → 모델",
+        "api_tripo_multiview_to_model": "Tripo: 다중뷰 → 모델",
+        "api_tripo_text_to_model": "Tripo: 텍스트 → 모델"
      },
      "Area Composition": {
        "area_composition": "영역 구성",
@@ -1245,15 +1273,15 @@
      },
      "Audio": {
        "audio_ace_step_1_m2m_editing": "ACE Step v1 M2M 편집",
-        "audio_ace_step_1_t2a_instrumentals": "ACE-Step v1 텍스트 투 연주곡",
-        "audio_ace_step_1_t2a_song": "ACE Step v1 텍스트 투 노래",
+        "audio_ace_step_1_t2a_instrumentals": "ACE-Step v1 텍스트 → 연주곡",
+        "audio_ace_step_1_t2a_song": "ACE Step v1 텍스트 → 노래",
        "audio_stable_audio_example": "Stable Audio"
      },
      "Basics": {
        "default": "이미지 생성",
        "embedding_example": "임베딩",
        "gligen_textbox_example": "글리젠 텍스트박스",
-        "image2image": "이미지 투 이미지",
+        "image2image": "이미지 → 이미지",
        "inpaint_example": "인페인트",
        "inpaint_model_outpainting": "아웃페인팅",
        "lora": "LoRA",
@@ -1267,62 +1295,62 @@
        "mixing_controlnets": "컨트롤넷 혼합"
      },
      "Flux": {
-        "flux_canny_model_example": "Flux 캐니 모델",
-        "flux_depth_lora_example": "Flux 깊이 로라",
-        "flux_dev_checkpoint_example": "Flux Dev fp8",
-        "flux_dev_full_text_to_image": "Flux Dev 전체 텍스트 투 이미지",
-        "flux_fill_inpaint_example": "Flux 인페인트",
-        "flux_fill_outpaint_example": "Flux 아웃페인트",
-        "flux_kontext_dev_basic": "Flux Kontext Dev(기본)",
-        "flux_kontext_dev_grouped": "Flux Kontext Dev(그룹화)",
-        "flux_redux_model_example": "Flux Redux 모델",
-        "flux_schnell": "Flux Schnell fp8",
-        "flux_schnell_full_text_to_image": "Flux Schnell 전체 텍스트 투 이미지"
+        "flux_canny_model_example": "FLUX 캐니 모델",
+        "flux_depth_lora_example": "FLUX 깊이 로라",
+        "flux_dev_checkpoint_example": "FLUX Dev fp8",
+        "flux_dev_full_text_to_image": "FLUX Dev 전체 텍스트 투 이미지",
+        "flux_fill_inpaint_example": "FLUX 인페인트",
+        "flux_fill_outpaint_example": "FLUX 아웃페인트",
+        "flux_kontext_dev_basic": "FLUX Kontext Dev(기본)",
+        "flux_kontext_dev_grouped": "FLUX Kontext Dev(그룹화)",
+        "flux_redux_model_example": "FLUX Redux 모델",
+        "flux_schnell": "FLUX Schnell fp8",
+        "flux_schnell_full_text_to_image": "FLUX Schnell Full 텍스트 → 이미지"
      },
      "Image": {
        "hidream_e1_full": "HiDream E1 Full",
        "hidream_i1_dev": "HiDream I1 Dev",
        "hidream_i1_fast": "HiDream I1 Fast",
        "hidream_i1_full": "HiDream I1 Full",
-        "image_chroma_text_to_image": "Chroma 텍스트 투 이미지",
+        "image_chroma_text_to_image": "Chroma 텍스트 → 이미지",
        "image_cosmos_predict2_2B_t2i": "Cosmos Predict2 2B T2I",
        "image_lotus_depth_v1_1": "Lotus Depth",
        "image_omnigen2_image_edit": "OmniGen2 이미지 편집",
-        "image_omnigen2_t2i": "OmniGen2 텍스트 투 이미지",
-        "sd3_5_large_blur": "SD3.5 대형 블러",
-        "sd3_5_large_canny_controlnet_example": "SD3.5 대형 캐니 컨트롤넷",
-        "sd3_5_large_depth": "SD3.5 대형 깊이",
+        "image_omnigen2_t2i": "OmniGen2 텍스트 → 이미지",
+        "sd3_5_large_blur": "SD3.5 Large 블러",
+        "sd3_5_large_canny_controlnet_example": "SD3.5 Large 캐니 컨트롤넷",
+        "sd3_5_large_depth": "SD3.5 Large 깊이",
        "sd3_5_simple_example": "SD3.5 간단 예제",
-        "sdxl_refiner_prompt_example": "SDXL 리파이너 프롬프트",
+        "sdxl_refiner_prompt_example": "SDXL Refiner 프롬프트",
        "sdxl_revision_text_prompts": "SDXL Revision 텍스트 프롬프트",
        "sdxl_revision_zero_positive": "SDXL Revision Zero Positive",
        "sdxl_simple_example": "SDXL 간단 예제",
        "sdxlturbo_example": "SDXL 터보"
      },
      "Image API": {
-        "api_bfl_flux_1_kontext_max_image": "BFL Flux.1 Kontext 맥스",
-        "api_bfl_flux_1_kontext_multiple_images_input": "BFL Flux.1 Kontext 다중 이미지 입력",
-        "api_bfl_flux_1_kontext_pro_image": "BFL Flux.1 Kontext 프로",
-        "api_bfl_flux_pro_t2i": "BFL Flux[Pro]: 텍스트 투 이미지",
-        "api_ideogram_v3_t2i": "Ideogram V3: 텍스트 투 이미지",
-        "api_luma_photon_i2i": "Luma Photon: 이미지 투 이미지",
+        "api_bfl_flux_1_kontext_max_image": "BFL FLUX.1 Kontext 맥스",
+        "api_bfl_flux_1_kontext_multiple_images_input": "BFL FLUX.1 Kontext 다중 이미지 입력",
+        "api_bfl_flux_1_kontext_pro_image": "BFL FLUX.1 Kontext 프로",
+        "api_bfl_flux_pro_t2i": "BFL FLUX[Pro]: 텍스트 → 이미지",
+        "api_ideogram_v3_t2i": "Ideogram V3: 텍스트 → 이미지",
+        "api_luma_photon_i2i": "Luma Photon: 이미지 → 이미지",
        "api_luma_photon_style_ref": "Luma Photon: 스타일 참조",
        "api_openai_dall_e_2_inpaint": "OpenAI: Dall-E 2 인페인트",
-        "api_openai_dall_e_2_t2i": "OpenAI: Dall-E 2 텍스트 투 이미지",
-        "api_openai_dall_e_3_t2i": "OpenAI: Dall-E 3 텍스트 투 이미지",
-        "api_openai_image_1_i2i": "OpenAI: GPT-Image-1 이미지 투 이미지",
+        "api_openai_dall_e_2_t2i": "OpenAI: Dall-E 2 텍스트 → 이미지",
+        "api_openai_dall_e_3_t2i": "OpenAI: Dall-E 3 텍스트 → 이미지",
+        "api_openai_image_1_i2i": "OpenAI: GPT-Image-1 이미지 → 이미지",
        "api_openai_image_1_inpaint": "OpenAI: GPT-Image-1 인페인트",
        "api_openai_image_1_multi_inputs": "OpenAI: GPT-Image-1 멀티 입력",
-        "api_openai_image_1_t2i": "OpenAI: GPT-Image-1 텍스트 투 이미지",
+        "api_openai_image_1_t2i": "OpenAI: GPT-Image-1 텍스트 → 이미지",
        "api_recraft_image_gen_with_color_control": "Recraft: 색상 제어 이미지 생성",
        "api_recraft_image_gen_with_style_control": "Recraft: 스타일 제어 이미지 생성",
        "api_recraft_vector_gen": "Recraft: 벡터 생성",
-        "api_runway_reference_to_image": "Runway: 참조 투 이미지",
-        "api_runway_text_to_image": "Runway: 텍스트 투 이미지",
-        "api_stability_ai_i2i": "Stability AI: 이미지 투 이미지",
-        "api_stability_ai_sd3_5_i2i": "Stability AI: SD3.5 이미지 투 이미지",
-        "api_stability_ai_sd3_5_t2i": "Stability AI: SD3.5 텍스트 투 이미지",
-        "api_stability_ai_stable_image_ultra_t2i": "Stability AI: Stable Image Ultra 텍스트 투 이미지"
+        "api_runway_reference_to_image": "Runway: 참조 → 이미지",
+        "api_runway_text_to_image": "Runway: 텍스트 → 이미지",
+        "api_stability_ai_i2i": "Stability AI: 이미지 → 이미지",
+        "api_stability_ai_sd3_5_i2i": "Stability AI: SD3.5 이미지 → 이미지",
+        "api_stability_ai_sd3_5_t2i": "Stability AI: SD3.5 텍스트 → 이미지",
+        "api_stability_ai_stable_image_ultra_t2i": "Stability AI: Stable Image Ultra 텍스트 → 이미지"
      },
      "LLM API": {
        "api_google_gemini": "Google Gemini: 채팅",
@@ -1330,24 +1358,24 @@
      },
      "Upscaling": {
        "esrgan_example": "ESRGAN",
-        "hiresfix_esrgan_workflow": "HiresFix ESRGAN 워크플로우",
-        "hiresfix_latent_workflow": "업스케일",
-        "latent_upscale_different_prompt_model": "Latent 업스케일 다른 프롬프트 모델"
+        "hiresfix_esrgan_workflow": "HiresFix ESRGAN 워크플로",
+        "hiresfix_latent_workflow": "이미지 확대",
+        "latent_upscale_different_prompt_model": "잠재 이미지 확대 다른 프롬프트 모델"
      },
      "Video": {
-        "hunyuan_video_text_to_video": "Hunyuan 비디오 텍스트 투 비디오",
-        "image_to_video": "SVD 이미지 투 비디오",
-        "image_to_video_wan": "Wan 2.1 이미지 투 비디오",
-        "ltxv_image_to_video": "LTXV 이미지 투 비디오",
-        "ltxv_text_to_video": "LTXV 텍스트 투 비디오",
-        "mochi_text_to_video_example": "Mochi 텍스트 투 비디오",
-        "text_to_video_wan": "Wan 2.1 텍스트 투 비디오",
-        "txt_to_image_to_video": "SVD 텍스트 투 이미지 투 비디오",
+        "hunyuan_video_text_to_video": "Hunyuan 비디오 텍스트 → 비디오",
+        "image_to_video": "SVD 이미지 → 비디오",
+        "image_to_video_wan": "Wan 2.1 이미지 → 비디오",
+        "ltxv_image_to_video": "LTXV 이미지 → 비디오",
+        "ltxv_text_to_video": "LTXV 텍스트 → 비디오",
+        "mochi_text_to_video_example": "Mochi 텍스트 → 비디오",
+        "text_to_video_wan": "Wan 2.1 텍스트 → 비디오",
+        "txt_to_image_to_video": "SVD 텍스트 → 이미지 → 비디오",
        "video_cosmos_predict2_2B_video2world_480p_16fps": "Cosmos Predict2 2B Video2World 480p 16fps",
        "video_wan2_1_fun_camera_v1_1_14B": "Wan 2.1 Fun Camera 14B",
        "video_wan2_1_fun_camera_v1_1_1_3B": "Wan 2.1 Fun Camera 1.3B",
-        "video_wan_vace_14B_ref2v": "Wan VACE 참조 투 비디오",
-        "video_wan_vace_14B_t2v": "Wan VACE 텍스트 투 비디오",
+        "video_wan_vace_14B_ref2v": "Wan VACE 참조 → 비디오",
+        "video_wan_vace_14B_t2v": "Wan VACE 텍스트 → 비디오",
        "video_wan_vace_14B_v2v": "Wan VACE 컨트롤 비디오",
        "video_wan_vace_flf2v": "Wan VACE 첫-마지막 프레임",
        "video_wan_vace_inpainting": "Wan VACE 인페인팅",
@@ -1357,24 +1385,24 @@
        "wan2_1_fun_inp": "Wan 2.1 인페인팅"
      },
      "Video API": {
-        "api_hailuo_minimax_i2v": "MiniMax: 이미지 투 비디오",
-        "api_hailuo_minimax_t2v": "MiniMax: 텍스트 투 비디오",
+        "api_hailuo_minimax_i2v": "MiniMax: 이미지 → 비디오",
+        "api_hailuo_minimax_t2v": "MiniMax: 텍스트 → 비디오",
        "api_kling_effects": "Kling: 비디오 효과",
        "api_kling_flf": "Kling: FLF2V",
-        "api_kling_i2v": "Kling: 이미지 투 비디오",
-        "api_luma_i2v": "Luma: 이미지 투 비디오",
-        "api_luma_t2v": "Luma: 텍스트 투 비디오",
-        "api_moonvalley_image_to_video": "Moonvalley: 이미지 투 비디오",
-        "api_moonvalley_text_to_video": "Moonvalley: 텍스트 투 비디오",
-        "api_pika_i2v": "Pika: 이미지 투 비디오",
-        "api_pika_scene": "Pika 장면: 이미지 투 비디오",
-        "api_pixverse_i2v": "PixVerse: 이미지 투 비디오",
-        "api_pixverse_t2v": "PixVerse: 텍스트 투 비디오",
-        "api_pixverse_template_i2v": "PixVerse 템플릿: 이미지 투 비디오",
-        "api_runway_first_last_frame": "Runway: 첫-마지막 프레임 투 비디오",
-        "api_runway_gen3a_turbo_image_to_video": "Runway: Gen3a Turbo 이미지 투 비디오",
-        "api_runway_gen4_turo_image_to_video": "Runway: Gen4 Turbo 이미지 투 비디오",
-        "api_veo2_i2v": "Veo2: 이미지 투 비디오"
+        "api_kling_i2v": "Kling: 이미지 → 비디오",
+        "api_luma_i2v": "Luma: 이미지 → 비디오",
+        "api_luma_t2v": "Luma: 텍스트 → 비디오",
+        "api_moonvalley_image_to_video": "Moonvalley: 이미지 → 비디오",
+        "api_moonvalley_text_to_video": "Moonvalley: 텍스트 → 비디오",
+        "api_pika_i2v": "Pika: 이미지 → 비디오",
+        "api_pika_scene": "Pika 장면: 이미지 → 비디오",
+        "api_pixverse_i2v": "PixVerse: 이미지 → 비디오",
+        "api_pixverse_t2v": "PixVerse: 텍스트 → 비디오",
+        "api_pixverse_template_i2v": "PixVerse 템플릿: 이미지 → 비디오",
+        "api_runway_first_last_frame": "Runway: 첫-마지막 프레임 → 비디오",
+        "api_runway_gen3a_turbo_image_to_video": "Runway: Gen3a Turbo 이미지 → 비디오",
+        "api_runway_gen4_turo_image_to_video": "Runway: Gen4 Turbo 이미지 → 비디오",
+        "api_veo2_i2v": "Veo2: 이미지 → 비디오"
      }
    },
    "templateDescription": {
@@ -1389,7 +1417,7 @@
        "api_rodin_multiview_to_model": "Rodin의 다각도 재구성으로 종합적인 3D 모델을 만듭니다.",
        "api_tripo_image_to_model": "Tripo 엔진으로 2D 이미지에서 전문가용 3D 에셋을 생성합니다.",
        "api_tripo_multiview_to_model": "Tripo의 고급 스캐너로 여러 각도에서 3D 모델을 만듭니다.",
-        "api_tripo_text_to_model": "Tripo의 텍스트 기반 모델링으로 설명에서 3D 오브젝트를 만듭니다."
+        "api_tripo_text_to_model": "Tripo의 텍스트 기반 모델링으로 설명에서 3D 객체를 만듭니다."
      },
      "Area Composition": {
        "area_composition": "정의된 영역으로 구성을 제어하여 이미지를 생성합니다.",
@@ -1412,49 +1440,49 @@
        "lora_multiple": "여러 LoRA 모델을 결합하여 이미지를 생성합니다."
      },
      "ControlNet": {
-        "2_pass_pose_worship": "ControlNet으로 포즈 참조를 활용해 이미지를 생성합니다.",
-        "controlnet_example": "ControlNet으로 스크리블 참조 이미지를 활용해 이미지를 생성합니다.",
-        "depth_controlnet": "ControlNet으로 깊이 정보를 활용해 이미지를 생성합니다.",
+        "2_pass_pose_worship": "컨트롤넷으로 포즈 참조를 활용해 이미지를 생성합니다.",
+        "controlnet_example": "컨트롤넷으로 스크리블 참조 이미지를 활용해 이미지를 생성합니다.",
+        "depth_controlnet": "컨트롤넷으로 깊이 정보를 활용해 이미지를 생성합니다.",
        "depth_t2i_adapter": "T2I 어댑터로 깊이 정보를 활용해 이미지를 생성합니다.",
-        "mixing_controlnets": "여러 ControlNet 모델을 결합해 이미지를 생성합니다."
+        "mixing_controlnets": "여러 컨트롤넷 모델을 결합해 이미지를 생성합니다."
      },
      "Flux": {
-        "flux_canny_model_example": "Flux Canny로 에지 감지에 따라 이미지를 생성합니다.",
-        "flux_depth_lora_example": "Flux LoRA로 깊이 정보를 활용해 이미지를 생성합니다.",
-        "flux_dev_checkpoint_example": "Flux Dev fp8 양자화 버전으로 이미지를 생성합니다. VRAM이 제한된 장치에 적합하며, 모델 파일 하나만 필요하지만 화질은 전체 버전보다 약간 낮습니다.",
-        "flux_dev_full_text_to_image": "Flux Dev 전체 버전으로 고품질 이미지를 생성합니다. 더 많은 VRAM과 여러 모델 파일이 필요하지만, 최고의 프롬프트 반영력과 화질을 제공합니다.",
-        "flux_fill_inpaint_example": "Flux 인페인팅으로 이미지의 누락된 부분을 채웁니다.",
-        "flux_fill_outpaint_example": "Flux 아웃페인팅으로 이미지를 경계 너머로 확장합니다.",
-        "flux_kontext_dev_basic": "Flux Kontext의 전체 노드 표시로 이미지를 편집합니다. 워크플로우 학습에 적합합니다.",
-        "flux_kontext_dev_grouped": "노드가 그룹화된 Flux Kontext의 간소화 버전으로 작업 공간이 더 깔끔합니다.",
-        "flux_redux_model_example": "Flux Redux로 참조 이미지의 스타일을 전송하여 이미지를 생성합니다.",
-        "flux_schnell": "Flux Schnell fp8 양자화 버전으로 이미지를 빠르게 생성합니다. 저사양 하드웨어에 이상적이며, 4단계만으로 이미지를 생성할 수 있습니다.",
-        "flux_schnell_full_text_to_image": "Flux Schnell 전체 버전으로 이미지를 빠르게 생성합니다. Apache2.0 라이선스를 사용하며, 4단계만으로 좋은 화질을 유지합니다."
+        "flux_canny_model_example": "FLUX 캐니 컨트롤넷으로 에지 감지에 따라 이미지를 생성합니다.",
+        "flux_depth_lora_example": "FLUX LoRA로 깊이 정보를 활용해 이미지를 생성합니다.",
+        "flux_dev_checkpoint_example": "FLUX Dev fp8 양자화 버전으로 이미지를 생성합니다. VRAM이 제한된 장치에 적합하며, 모델 파일 하나만 필요하지만 화질은 전체 버전보다 약간 낮습니다.",
+        "flux_dev_full_text_to_image": "FLUX Dev 전체 버전으로 고품질 이미지를 생성합니다. 더 많은 VRAM과 여러 모델 파일이 필요하지만, 최고의 프롬프트 반영력과 화질을 제공합니다.",
+        "flux_fill_inpaint_example": "FLUX 인페인팅으로 이미지의 누락된 부분을 채웁니다.",
+        "flux_fill_outpaint_example": "FFLUXlux 아웃페인팅으로 이미지를 경계 너머로 확장합니다.",
+        "flux_kontext_dev_basic": "FLUX Kontext의 전체 노드 표시로 이미지를 편집합니다. 워크플로 학습에 적합합니다.",
+        "flux_kontext_dev_grouped": "노드가 그룹화된 FLUX Kontext의 간소화 버전으로 작업 공간이 더 깔끔합니다.",
+        "flux_redux_model_example": "FLUX Redux로 참조 이미지의 스타일을 전송하여 이미지를 생성합니다.",
+        "flux_schnell": "FLUX Schnell fp8 양자화 버전으로 이미지를 빠르게 생성합니다. 저사양 하드웨어에 이상적이며, 4단계만으로 이미지를 생성할 수 있습니다.",
+        "flux_schnell_full_text_to_image": "FLUX Schnell Full 버전을 이용해 이미지를 빠르게 생성합니다. Apache2.0 라이선스를 사용하며, 4단계만으로 좋은 화질을 유지합니다."
      },
      "Image": {
        "hidream_e1_full": "HiDream E1 - 전문적인 자연어 이미지 편집 모델로 이미지를 편집합니다.",
        "hidream_i1_dev": "HiDream I1 Dev - 28 스텝의 균형 잡힌 버전으로, 중간급 하드웨어에 적합합니다.",
        "hidream_i1_fast": "HiDream I1 Fast - 16 스텝의 경량 버전으로, 저사양 하드웨어에서 빠른 미리보기에 적합합니다.",
        "hidream_i1_full": "HiDream I1 Full - 50 스텝의 완전 버전으로, 최고의 품질을 제공합니다.",
-        "image_chroma_text_to_image": "Chroma는 flux에서 수정된 모델로, 아키텍처에 일부 변화가 있습니다.",
+        "image_chroma_text_to_image": "Chroma는 FLUX에서 수정된 모델로, 아키텍처에 일부 변화가 있습니다.",
        "image_cosmos_predict2_2B_t2i": "Cosmos-Predict2 2B T2I로 물리적으로 정확하고 고해상도, 디테일이 풍부한 이미지를 생성합니다.",
        "image_lotus_depth_v1_1": "Lotus Depth로 고효율 단안 깊이 추정 및 디테일 보존이 뛰어난 zero-shot 이미지를 생성합니다.",
        "image_omnigen2_image_edit": "OmniGen2의 고급 이미지 편집 기능과 텍스트 렌더링 지원으로 자연어 지시로 이미지를 편집합니다.",
        "image_omnigen2_t2i": "OmniGen2의 통합 7B 멀티모달 모델과 듀얼 패스 아키텍처로 텍스트 프롬프트에서 고품질 이미지를 생성합니다.",
        "sd3_5_large_blur": "SD 3.5로 흐릿한 참조 이미지를 활용해 이미지를 생성합니다.",
-        "sd3_5_large_canny_controlnet_example": "SD 3.5 Canny ControlNet으로 에지 감지에 따라 이미지를 생성합니다.",
+        "sd3_5_large_canny_controlnet_example": "SD 3.5 캐니 컨트롤넷으로 에지 감지에 따라 이미지를 생성합니다.",
        "sd3_5_large_depth": "SD 3.5로 깊이 정보를 활용해 이미지를 생성합니다.",
        "sd3_5_simple_example": "SD 3.5로 이미지를 생성합니다.",
-        "sdxl_refiner_prompt_example": "SDXL 리파이너 모델로 이미지를 향상시킵니다.",
+        "sdxl_refiner_prompt_example": "SDXL Refiner 모델로 이미지를 향상시킵니다.",
        "sdxl_revision_text_prompts": "SDXL Revision으로 참조 이미지의 개념을 전송하여 이미지를 생성합니다.",
        "sdxl_revision_zero_positive": "SDXL Revision으로 텍스트 프롬프트와 참조 이미지를 함께 사용해 이미지를 생성합니다.",
        "sdxl_simple_example": "SDXL로 고품질 이미지를 생성합니다.",
        "sdxlturbo_example": "SDXL Turbo로 한 번에 이미지를 생성합니다."
      },
      "Image API": {
-        "api_bfl_flux_1_kontext_max_image": "Flux.1 Kontext 맥스 이미지로 이미지를 편집합니다.",
-        "api_bfl_flux_1_kontext_multiple_images_input": "여러 이미지를 입력하고 Flux.1 Kontext로 편집합니다.",
-        "api_bfl_flux_1_kontext_pro_image": "Flux.1 Kontext 프로 이미지로 이미지를 편집합니다.",
+        "api_bfl_flux_1_kontext_max_image": "FLUX.1 Kontext 맥스 이미지로 이미지를 편집합니다.",
+        "api_bfl_flux_1_kontext_multiple_images_input": "여러 이미지를 입력하고 FLUX.1 Kontext로 편집합니다.",
+        "api_bfl_flux_1_kontext_pro_image": "FLUX.1 Kontext 프로 이미지로 이미지를 편집합니다.",
        "api_bfl_flux_pro_t2i": "FLUX.1 Pro로 뛰어난 프롬프트 반영과 시각적 품질로 이미지를 생성합니다.",
        "api_ideogram_v3_t2i": "Ideogram V3로 뛰어난 프롬프트 일치, 포토리얼리즘, 텍스트 렌더링으로 전문가 수준의 이미지를 생성합니다.",
        "api_luma_photon_i2i": "이미지와 프롬프트를 조합하여 이미지 생성을 가이드합니다.",
@@ -1472,9 +1500,9 @@
        "api_runway_reference_to_image": "Runway의 AI로 참조 스타일과 구성을 기반으로 새 이미지를 생성합니다.",
        "api_runway_text_to_image": "Runway의 AI 모델로 텍스트 프롬프트에서 고품질 이미지를 생성합니다.",
        "api_stability_ai_i2i": "Stability AI로 고품질 이미지 변환 및 스타일 전환을 지원합니다.",
-        "api_stability_ai_sd3_5_i2i": "1메가픽셀 해상도에서 전문가용 고품질 이미지를 생성합니다. 프롬프트 반영이 우수합니다.",
-        "api_stability_ai_sd3_5_t2i": "1메가픽셀 해상도에서 전문가용 고품질 이미지를 생성합니다. 프롬프트 반영이 우수합니다.",
-        "api_stability_ai_stable_image_ultra_t2i": "1메가픽셀 해상도에서 전문가용 고품질 이미지를 생성합니다. 프롬프트 반영이 우수합니다."
+        "api_stability_ai_sd3_5_i2i": "1M 픽셀 해상도에서 전문가용 고품질 이미지를 생성합니다. 프롬프트 반영이 우수합니다.",
+        "api_stability_ai_sd3_5_t2i": "1M 픽셀 해상도에서 전문가용 고품질 이미지를 생성합니다. 프롬프트 반영이 우수합니다.",
+        "api_stability_ai_stable_image_ultra_t2i": "1M 픽셀 해상도에서 전문가용 고품질 이미지를 생성합니다. 프롬프트 반영이 우수합니다."
      },
      "LLM API": {
        "api_google_gemini": "Google Gemini의 멀티모달 AI와 추론 능력을 경험하세요.",
@@ -1482,9 +1510,9 @@
      },
      "Upscaling": {
        "esrgan_example": "ESRGAN 모델로 이미지 품질을 향상합니다.",
-        "hiresfix_esrgan_workflow": "중간 생성 단계에서 ESRGAN 모델로 업스케일합니다.",
-        "hiresfix_latent_workflow": "Latent 공간에서 이미지 품질을 향상합니다.",
-        "latent_upscale_different_prompt_model": "여러 번의 생성 패스에서 프롬프트를 변경하며 업스케일합니다."
+        "hiresfix_esrgan_workflow": "중간 생성 단계에서 ESRGAN 모델로 이미지를 확대합니다.",
+        "hiresfix_latent_workflow": "잠재 이미지의 확대 방식으로 이미지 품질을 향상합니다.",
+        "latent_upscale_different_prompt_model": "여러 번의 생성 패스에서 프롬프트를 변경하며 이미지를 확대합니다."
      },
      "Video": {
        "hunyuan_video_text_to_video": "Hunyuan 모델로 텍스트 프롬프트에서 비디오를 생성합니다.",
@@ -1505,7 +1533,7 @@
        "video_wan_vace_inpainting": "특정 영역을 편집하면서 주변 내용을 보존하는 비디오를 생성합니다. 객체 제거 또는 교체에 적합합니다.",
        "video_wan_vace_outpainting": "Wan VACE 아웃페인팅으로 비디오 크기를 확장하여 비디오를 생성합니다.",
        "wan2_1_flf2v_720_f16": "Wan 2.1 FLF2V로 첫 프레임과 마지막 프레임을 제어하여 비디오를 생성합니다.",
-        "wan2_1_fun_control": "Wan 2.1 ControlNet으로 포즈, 깊이, 에지 제어로 비디오를 생성합니다.",
+        "wan2_1_fun_control": "Wan 2.1 컨트롤넷으로 포즈, 깊이, 에지 제어로 적용해 비디오를 생성합니다.",
        "wan2_1_fun_inp": "Wan 2.1 인페인팅으로 시작 및 종료 프레임에서 비디오를 생성합니다."
      },
      "Video API": {
@@ -1549,7 +1577,7 @@
    "failedToFetchLogs": "서버 로그를 가져오는 데 실패했습니다",
    "failedToInitiateCreditPurchase": "크레딧 구매를 시작하지 못했습니다: {error}",
    "failedToPurchaseCredits": "크레딧 구매에 실패했습니다: {error}",
-    "fileLoadError": "{fileName}에서 워크플로우를 찾을 수 없습니다",
+    "fileLoadError": "{fileName}에서 워크플로를 찾을 수 없습니다",
    "fileUploadFailed": "파일 업로드에 실패했습니다",
    "interrupted": "실행이 중단되었습니다",
    "migrateToLitegraphReroute": "향후 버전에서는 Reroute 노드가 제거됩니다. LiteGraph 에서 자체 제공하는 경유점으로 변환하려면 클릭하세요.",
@@ -1602,6 +1630,13 @@
    "prefix": "{prefix}(으)로 시작해야 합니다",
    "required": "필수"
  },
+  "versionMismatchWarning": {
+    "dismiss": "닫기",
+    "frontendNewer": "프론트엔드 버전 {frontendVersion}이(가) 백엔드 버전 {backendVersion}과(와) 호환되지 않을 수 있습니다.",
+    "frontendOutdated": "프론트엔드 버전 {frontendVersion}이(가) 오래되었습니다. 백엔드는 {requiredVersion} 이상 버전을 필요로 합니다.",
+    "title": "버전 호환성 경고",
+    "updateFrontend": "프론트엔드 업데이트"
+  },
  "welcome": {
    "getStarted": "시작하기",
    "title": "ComfyUI에 오신 것을 환영합니다"
--- a/src/locales/ru/commands.json
+++ b/src/locales/ru/commands.json
@@ -155,8 +155,20 @@
  "Comfy_LoadDefaultWorkflow": {
    "label": "Загрузить стандартный рабочий процесс"
  },
-  "Comfy_Manager_CustomNodesManager": {
-    "label": "Менеджер Пользовательских Узлов"
+  "Comfy_Manager_CustomNodesManager_ShowCustomNodesMenu": {
+    "label": "Пользовательские узлы (Бета)"
+  },
+  "Comfy_Manager_CustomNodesManager_ShowLegacyCustomNodesMenu": {
+    "label": "Пользовательские узлы (устаревшие)"
+  },
+  "Comfy_Manager_ShowLegacyManagerMenu": {
+    "label": "Меню менеджера (устаревшее)"
+  },
+  "Comfy_Manager_ShowMissingPacks": {
+    "label": "Установить отсутствующие"
+  },
+  "Comfy_Manager_ShowUpdateAvailablePacks": {
+    "label": "Проверить наличие обновлений"
  },
  "Comfy_Manager_ToggleManagerProgressDialog": {
    "label": "Переключить диалоговое окно прогресса"
@@ -170,6 +182,12 @@
  "Comfy_MaskEditor_OpenMaskEditor": {
    "label": "Открыть редактор масок для выбранной ноды"
  },
+  "Comfy_Memory_UnloadModels": {
+    "label": "Выгрузить модели"
+  },
+  "Comfy_Memory_UnloadModelsAndExecutionCache": {
+    "label": "Выгрузить модели и кэш выполнения"
+  },
  "Comfy_NewBlankWorkflow": {
    "label": "Новый пустой рабочий процесс"
  },
--- a/src/locales/ru/main.json
+++ b/src/locales/ru/main.json
@@ -276,6 +276,7 @@
    "color": "Цвет",
    "comingSoon": "Скоро будет",
    "command": "Команда",
+    "commandProhibited": "Команда {command} запрещена. Свяжитесь с администратором для получения дополнительной информации.",
    "community": "Сообщество",
    "completed": "Завершено",
    "confirm": "Подтвердить",
@@ -296,6 +297,7 @@
    "devices": "Устройства",
    "disableAll": "Отключить все",
    "disabling": "Отключение",
+    "dismiss": "Закрыть",
    "download": "Скачать",
    "edit": "Редактировать",
    "empty": "Пусто",
@@ -310,6 +312,8 @@
    "filter": "Фильтр",
    "findIssues": "Найти проблемы",
    "firstTimeUIMessage": "Вы впервые используете новый интерфейс. Выберите \"Меню > Использовать новое меню > Отключено\", чтобы восстановить старый интерфейс.",
+    "frontendNewer": "Версия интерфейса {frontendVersion} может быть несовместима с версией сервера {backendVersion}.",
+    "frontendOutdated": "Версия интерфейса {frontendVersion} устарела. Требуется версия не ниже {requiredVersion} для работы с сервером.",
    "goToNode": "Перейти к ноде",
    "help": "Помощь",
    "icon": "Иконка",
@@ -389,11 +393,14 @@
    "unknownError": "Неизвестная ошибка",
    "update": "Обновить",
    "updateAvailable": "Доступно обновление",
+    "updateFrontend": "Обновить интерфейс",
    "updated": "Обновлено",
    "updating": "Обновление",
    "upload": "Загрузить",
    "usageHint": "Подсказка по использованию",
    "user": "Пользователь",
+    "versionMismatchWarning": "Предупреждение о несовместимости версий",
+    "versionMismatchWarningMessage": "{warning}: {detail} Посетите https://docs.comfy.org/installation/update_comfyui#common-update-issues для инструкций по обновлению.",
    "videoFailedToLoad": "Не удалось загрузить видео",
    "workflow": "Рабочий процесс"
  },
@@ -621,12 +628,14 @@
    "title": "Обслуживание"
  },
  "manager": {
+    "applyChanges": "Применить изменения",
    "changingVersion": "Изменение версии с {from} на {to}",
    "createdBy": "Создано",
    "dependencies": "Зависимости",
    "discoverCommunityContent": "Откройте для себя пакеты узлов, расширения и многое другое, созданные сообществом...",
    "downloads": "Загрузки",
    "errorConnecting": "Ошибка подключения к реестру Comfy Node.",
+    "extensionsSuccessfullyInstalled": "Расширение(я) успешно установлены и готовы к использованию!",
    "failed": "Не удалось ({count})",
    "filter": {
      "disabled": "Отключено",
@@ -638,8 +647,12 @@
    "installAllMissingNodes": "Установить все отсутствующие узлы",
    "installSelected": "Установить выбранное",
    "installationQueue": "Очередь установки",
+    "installingDependencies": "Установка зависимостей...",
    "lastUpdated": "Последнее обновление",
    "latestVersion": "Последняя",
+    "legacyManagerUI": "Использовать устаревший UI",
+    "legacyManagerUIDescription": "Чтобы использовать устаревший UI менеджера, запустите ComfyUI с --enable-manager-legacy-ui",
+    "legacyMenuNotAvailable": "Устаревшее меню менеджера недоступно в этой версии ComfyUI. Пожалуйста, используйте новое меню менеджера.",
    "license": "Лицензия",
    "loadingVersions": "Загрузка версий...",
    "nightlyVersion": "Ночная",
@@ -651,6 +664,7 @@
    "packsSelected": "Выбрано пакетов",
    "repository": "Репозиторий",
    "restartToApplyChanges": "Чтобы применить изменения, пожалуйста, перезапустите ComfyUI",
+    "restartingBackend": "Перезапуск бэкенда для применения изменений...",
    "searchPlaceholder": "Поиск",
    "selectVersion": "Выберите версию",
    "sort": {
@@ -675,6 +689,8 @@
    "uninstallSelected": "Удалить выбранное",
    "uninstalling": "Удаление",
    "update": "Обновить",
+    "updateAll": "Обновить все",
+    "updateSelected": "Обновить выбранное",
    "updatingAllPacks": "Обновление всех пакетов",
    "version": "Версия"
  },
@@ -740,7 +756,10 @@
    "Canvas Toggle Link Visibility": "Переключение видимости ссылки на холст",
    "Canvas Toggle Lock": "Переключение блокировки холста",
    "Canvas Toggle Minimap": "Показать/скрыть миникарту на холсте",
+    "Check for Custom Node Updates": "Проверить обновления пользовательских узлов",
    "Check for Updates": "Проверить наличие обновлений",
+    "Check for Custom Node Updates": "Проверить обновления пользовательских узлов",
+    "Check for Updates": "Проверить Обновления",
    "Clear Pending Tasks": "Очистить ожидающие задачи",
    "Clear Workflow": "Очистить рабочий процесс",
    "Clipspace": "Клиппространство",
@@ -753,7 +772,11 @@
    "Contact Support": "Связаться с поддержкой",
    "Convert Selection to Subgraph": "Преобразовать выделенное в подграф",
    "Convert selected nodes to group node": "Преобразовать выбранные ноды в групповую ноду",
+    "Custom Nodes (Beta)": "Пользовательские узлы (Бета)",
+    "Custom Nodes (Legacy)": "Пользовательские узлы (Устаревшие)",
+    "Custom Nodes Manager": "Менеджер Пользовательских Узлов",
    "Decrease Brush Size in MaskEditor": "Уменьшить размер кисти в MaskEditor",
+    "Custom Nodes (Legacy)": "Пользовательские узлы (устаревшие)",
    "Delete Selected Items": "Удалить выбранные элементы",
    "Desktop User Guide": "Руководство пользователя для настольных ПК",
    "Duplicate Current Workflow": "Дублировать текущий рабочий процесс",
@@ -766,9 +789,14 @@
    "Group Selected Nodes": "Сгруппировать выбранные ноды",
    "Help": "Помощь",
    "Increase Brush Size in MaskEditor": "Увеличить размер кисти в MaskEditor",
+    "Install Missing Custom Nodes": "Установить отсутствующие пользовательские узлы",
+    "Install Missing": "Установить Отсутствующие",
+    "Install Missing Custom Nodes": "Установить отсутствующие пользовательские узлы",
    "Interrupt": "Прервать",
    "Load Default Workflow": "Загрузить стандартный рабочий процесс",
    "Manage group nodes": "Управление групповыми нодами",
+    "Manager": "Менеджер",
+    "Manager Menu (Legacy)": "Меню управления (устаревшее)",
    "Move Selected Nodes Down": "Переместить выбранные узлы вниз",
    "Move Selected Nodes Left": "Переместить выбранные узлы влево",
    "Move Selected Nodes Right": "Переместить выбранные узлы вправо",
@@ -802,6 +830,7 @@
    "Save": "Сохранить",
    "Save As": "Сохранить как",
    "Show Settings Dialog": "Показать диалог настроек",
+    "Show the Custom Nodes Manager": "Показать менеджер пользовательских узлов",
    "Sign Out": "Выйти",
    "Toggle Bottom Panel": "Переключить нижнюю панель",
    "Toggle Focus Mode": "Переключить режим фокуса",
@@ -813,10 +842,11 @@
    "Toggle Terminal Bottom Panel": "Переключение нижней панели терминала",
    "Toggle Theme (Dark/Light)": "Переключение темы (Тёмная/Светлая)",
    "Toggle Workflows Sidebar": "Показать/скрыть боковую панель рабочих процессов",
-    "Toggle the Custom Nodes Manager": "Переключить менеджер пользовательских узлов",
    "Toggle the Custom Nodes Manager Progress Bar": "Переключить индикатор выполнения менеджера пользовательских узлов",
    "Undo": "Отменить",
    "Ungroup selected group nodes": "Разгруппировать выбранные групповые ноды",
+    "Unload Models": "Выгрузить модели",
+    "Unload Models and Execution Cache": "Выгрузить модели и кэш выполнения",
    "Workflow": "Рабочий процесс",
    "Zoom In": "Увеличить",
    "Zoom Out": "Уменьшить"
@@ -1602,6 +1632,13 @@
    "prefix": "Должно начинаться с {prefix}",
    "required": "Обязательно"
  },
+  "versionMismatchWarning": {
+    "dismiss": "Закрыть",
+    "frontendNewer": "Версия интерфейса {frontendVersion} может быть несовместима с версией сервера {backendVersion}.",
+    "frontendOutdated": "Версия интерфейса {frontendVersion} устарела. Для работы с сервером требуется версия {requiredVersion} или новее.",
+    "title": "Предупреждение о несовместимости версий",
+    "updateFrontend": "Обновить интерфейс"
+  },
  "welcome": {
    "getStarted": "Начать",
    "title": "Добро пожаловать в ComfyUI"
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Jin Yi	104bd43dc1	[fix] TypeScript errors in manager/compatibility branch (#4625 )	2025-07-31 16:42:56 +09:00
Jin Yi	e085bb4c0f	[feat] Add import failure detection and error handling for package manager (#4600 )	2025-07-31 16:42:56 +09:00
Jin Yi	afe0d68ae6	[refactor] Simplify conflict acknowledgment system and enhance UX (#4599 )	2025-07-31 16:42:56 +09:00
Jin Yi	4c4625bb09	[refactor] Simplify conflict detection types and improve code maintainability (#4589 )	2025-07-31 16:42:56 +09:00
Jin Yi	17dcc31585	[feat] Show conflicting status for installed packages with compatibility issues (#4579 ) Co-authored-by: Claude <noreply@anthropic.com>	2025-07-31 16:42:56 +09:00
Jin Yi	2bff313135	[debug] Conflict detection debugging (#4577 )	2025-07-31 16:42:56 +09:00
Jin Yi	9a4928974e	[Design] Update InfoPanel styling and layout (#4553 )	2025-07-31 16:42:56 +09:00
Jin Yi	25c6efca66	[feat] Add bulk import failure info API and improve conflict detection (#4550 ) Co-authored-by: Claude <noreply@anthropic.com>	2025-07-31 16:42:56 +09:00
Jin Yi	e04117cf21	[Design] Update PackVersionSelectorPopover styling (#4554 )	2025-07-31 16:42:56 +09:00
Jin Yi	964da0084d	[fix] Simplify PackEnableToggle state management (#4551 )	2025-07-31 16:42:56 +09:00
Jin Yi	9052496402	[Manager] Optimize conflict detection with bulk API and version support (#4538 )	2025-07-31 16:42:56 +09:00
Jin Yi	b912416138	[Manager] Fix version selector conflict detection and UI improvements (#4539 )	2025-07-31 16:42:56 +09:00
Jin Yi	c9ea9893ee	[Manager] Fix banned status logic to only check Registry status (#4535 )	2025-07-31 16:42:56 +09:00
Jin Yi	5edf856ce9	[Manager] Fix toggle modal dismiss bug (#4534 )	2025-07-31 16:42:56 +09:00
Jin Yi	783f39873f	chore: delete unnecessary description	2025-07-31 16:42:56 +09:00
comfy-jinyi	34adfc8bf1	[Manager] Fix package version matching in conflict detection (#4530 ) Co-authored-by: Jin Yi <jin12cc@gmail.com> Co-authored-by: Claude <noreply@anthropic.com>	2025-07-31 16:42:56 +09:00
Jin Yi	af0dde0ac8	Manager Conflict Nofitication (#4443 ) Co-authored-by: github-actions <github-actions@github.com> Co-authored-by: bymyself <cbyrne@comfy.org> Co-authored-by: Claude <noreply@anthropic.com>	2025-07-31 16:42:56 +09:00
Jin Yi	4b6739c6fb	[Manager] Compatibility Detection Logic (#4348 ) Co-authored-by: Claude <noreply@anthropic.com>	2025-07-31 16:42:56 +09:00
github-actions	6ffba22663	Update locales [skip ci]	2025-07-31 16:42:19 +09:00
github-actions	d260ae0882	Update locales [skip ci]	2025-07-31 16:42:19 +09:00
github-actions	fe7c3cea4e	Update locales [skip ci]	2025-07-31 16:42:19 +09:00
github-actions	278409e8fa	Update locales [skip ci]	2025-07-31 16:42:19 +09:00
Jin Yi	237ef9c597	[test] Update PackVersionBadge test to use role selector instead of Button component	2025-07-31 16:42:19 +09:00
github-actions	9224ffbb37	Update locales [skip ci]	2025-07-31 16:42:19 +09:00
bymyself	3017ebba13	fix rebase error	2025-07-31 16:41:53 +09:00
Jin Yi	01c2341a11	[Manager] “Restarting” state after clicking restart button (#4269 )	2025-07-31 16:41:53 +09:00
Jin Yi	3d0ae0f884	[Manager] Add update all button functionality - Add PackUpdateButton component for bulk updates - Add useUpdateAvailableNodes composable to track available updates - Integrate update all button in RegistrySearchBar - Add localization strings for update functionality - Add comprehensive tests for update functionality - Add loading state to PackActionButton	2025-07-31 16:41:53 +09:00
bymyself	c8137ab535	[tests] Update useServerLogs test after log subscription change The test was expecting subscribeLogs(false) to be called, but this was commented out in commit `33d64475` to fix logs stopping after the first of multiple queue tasks. Updated test to reflect this temporary change.	2025-07-31 16:41:53 +09:00
bymyself	642f79c20d	remove the temporary check for legacy custom node version of manager	2025-07-31 16:41:53 +09:00
bymyself	64a2d0d152	fix: logs stops listening after 1st of multiple queue tasks	2025-07-31 16:41:53 +09:00
bymyself	22d04213a4	[tests] Update useServerLogs test to handle task-started events Update test to simulate cm-task-started events before logs events to match the actual behavior of the composable.	2025-07-31 16:41:53 +09:00
Christian Byrne	6a07ead4e4	[Manager] Fix: failed tasks logs not correctly partitioned in UI (#4242 )	2025-07-31 16:41:53 +09:00
bymyself	d61c0483c4	fix failed task tab state binding	2025-07-31 16:41:53 +09:00
Christian Byrne	175b728dd9	[Manager] Filter task queue and history by client id (#4241 )	2025-07-31 16:41:53 +09:00
github-actions	8ad3a0b212	Update locales [skip ci]	2025-07-31 16:41:53 +09:00
bymyself	d8799b6a9f	fix rebase errors	2025-07-31 16:41:09 +09:00
bymyself	0177361554	[manager] Fix test failures and missing type definitions - Fix ManagerProgressDialogContent test mock to include all required store methods - Add missing MergedNodePack, RegistryPack type definitions and isMergedNodePack type guard - Ensure all unit tests (548 passed) and component tests (174 passed) are working - Fix TypeScript compilation errors related to manager store interfaces	2025-07-31 16:41:09 +09:00
bymyself	0ec9702ead	[manager] Update tests for new manager API Updated tests for manager queue composable, server logs composable, and manager store to work with the new API signatures and functionality.	2025-07-31 16:41:09 +09:00
bymyself	eef8c0408a	[manager] Update UI components for new manager interface Updated manager dialog components, pack cards, version selectors, and action buttons to work with the new manager API and state management structure.	2025-07-31 16:41:09 +09:00
bymyself	42a7deae2b	[manager] Update composables and state management Updated manager queue composable, server logs composable, workflow packs composable, and manager store to support the new manager API structure and state management patterns.	2025-07-31 16:41:09 +09:00
bymyself	3db88b7172	[manager] Update core services for new manager API Updated ComfyUI Manager service and dialog service to support the new menu items structure and API endpoints.	2025-07-31 16:41:09 +09:00
bymyself	f2cfd2a841	[manager] Update type definitions and schemas for menu items migration Updated ComfyUI Manager types and API schemas to support the new menu items structure and manager functionality.	2025-07-31 16:41:09 +09:00
github-actions	dafa767c0c	Update locales [skip ci]	2025-07-31 16:41:09 +09:00
bymyself	f10b693bbb	dont show missing nodes button in legacy manager mode	2025-07-31 16:40:53 +09:00
bymyself	efde93168e	use correct response shape	2025-07-31 16:40:53 +09:00
github-actions	a50c26fe76	Update locales [skip ci]	2025-07-31 16:40:53 +09:00
bymyself	6a87933a78	add "Check for Updates", "Install Missing" menu items	2025-07-31 16:39:00 +09:00
bymyself	f82d8d56b8	move legacy option to startup arg	2025-07-31 16:38:41 +09:00
bymyself	891593971b	await promises. update settings schema	2025-07-31 16:38:41 +09:00
github-actions	408644fe08	Update locales [skip ci]	2025-07-31 16:38:41 +09:00
bymyself	38ab2833eb	migrate manager menu items	2025-07-31 16:34:26 +09:00
github-actions	5abe2d0822	Update locales [skip ci]	2025-07-30 18:30:36 +00:00
Christian Byrne	bf9cf06de2	Fix errors from rebase (removed `Tag` component import and duplicated imports in api.ts) (#4608 ) Co-authored-by: github-actions <github-actions@github.com>	2025-07-30 11:26:05 -07:00
Christian Byrne	c7520eac3e	[fix] Fix json syntax error from rebase (#4607 )	2025-07-30 10:22:05 -07:00
Jin Yi	972160782c	Merge branch 'main' into manager/menu-items-migration	2025-07-30 19:56:49 +09:00
Christian Byrne	f987cf9dbd	[feat] Improve SubgraphNode badge with sitemap icon and primary color (#4596 )	2025-07-30 02:48:02 -07:00
Comfy Org PR Bot	2b019935a7	[chore] Update litegraph to 0.16.20 (#4594 ) Co-authored-by: christian-byrne <72887196+christian-byrne@users.noreply.github.com>	2025-07-30 02:31:50 -07:00
Christian Byrne	f8ec532f1a	[ci] Include litegraph changes in changelog during automated release process (#4595 )	2025-07-30 02:31:29 -07:00
Christian Byrne	b370b6387d	[fix] DOM widgets lose correct positioning when SubgraphNodes are nested (#4588 )	2025-07-30 02:18:58 -07:00
Christian Byrne	516eb26d3e	[feat] Add custom icon system with workflow icon (#4590 )	2025-07-30 01:27:15 -07:00
Christian Byrne	5c71854a96	[ci] Enable CI tests for all feature branch PRs (#4591 )	2025-07-30 01:27:02 -07:00
Christian Byrne	b0d05c6ef6	[chore] Mark generated TypeScript files in .gitattributes (#4592 )	2025-07-30 01:19:01 -07:00
Christian Byrne	596c51d1ef	[fix] Fix "Require confirmation before clearing workflow" setting not working (#4587 ) Co-authored-by: Claude <noreply@anthropic.com>	2025-07-30 00:08:06 -07:00
Christian Byrne	d70949dd47	[feat] Remove default `Backspace` keybinding to clear workflow (#4586 )	2025-07-29 20:42:38 -07:00
Comfy Org PR Bot	f064fec3a8	1.25.2 (#4580 ) Co-authored-by: christian-byrne <72887196+christian-byrne@users.noreply.github.com>	2025-07-29 02:04:00 -07:00
Rizumu Ayaka	abf591d122	fix: DOM widget position offset after canvas moves (#4557 )	2025-07-29 01:40:47 -07:00
Comfy Org PR Bot	e7a425eeae	[chore] Update litegraph to 0.16.19 (#4578 ) Co-authored-by: christian-byrne <72887196+christian-byrne@users.noreply.github.com>	2025-07-29 01:26:48 -07:00
Christian Byrne	7d8c56c5e6	[feat] Add comprehensive Claude PR review with inline comments (#4453 ) Co-authored-by: github-actions <github-actions@github.com>	2025-07-29 01:16:30 -07:00
Christian Byrne	cf072b8420	[fix] Fix link input slots not being updated in subgraphs (#4575 )	2025-07-29 00:32:39 -07:00
Christian Byrne	4b75528c39	[fix] Fix graph configuration callbacks not reaching subgraph nodes (#4572 )	2025-07-29 00:17:03 -07:00
Christian Byrne	dd14144f47	[fix] Update Search & Replace to support nodes in subgraphs (#4576 )	2025-07-29 00:10:56 -07:00
Christian Byrne	00cd9fadec	[feat] Prevent browser zoom on UI components with canvas wheel event forwarding (#4574 )	2025-07-28 23:51:09 -07:00
Christian Byrne	98d694f7e3	[fix] Prevent incorrect 'frontend_only' badges in subgraphs (#4571 )	2025-07-28 23:05:27 -07:00
Christian Byrne	b1fc8846a3	[fix] Update API node pricing for multiple providers (#4564 ) Co-authored-by: Claude <noreply@anthropic.com>	2025-07-28 23:01:46 -07:00
Jin Yi	680c09a584	[fix] Detect missing nodes in subgraphs (#4547 ) Co-authored-by: github-actions <github-actions@github.com>	2025-07-28 21:55:53 -07:00
Christian Byrne	7fe4c07a9c	[fix] Preserve subgraph structure when clearing workflow (#4567 ) Co-authored-by: github-actions <github-actions@github.com>	2025-07-28 20:53:05 -07:00
SHIVANSH GUPTA	577cd23c3e	Feature Implemented: Warning displayed when frontend version mismatches (#4363 ) Co-authored-by: bymyself <cbyrne@comfy.org> Co-authored-by: Claude <noreply@anthropic.com>	2025-07-28 18:23:49 -07:00
Christian Byrne	b1436a068b	[feat] sync subgraph node titles with breadcrumb renaming (#4565 )	2025-07-28 18:00:59 -07:00
Christian Byrne	b6922cf386	Add delay to breadcrumb and workflow tab tooltips (#4559 )	2025-07-28 13:09:34 -07:00
Dr.Lt.Data	6167861340	refine locales/ko (#4549 )	2025-07-27 13:10:55 -07:00
Christian Byrne	68f50670d3	[refactor] Streamline create-frontend-release command (#4546 )	2025-07-27 00:53:28 -07:00
Jennifer Weber	67277d483d	Update missing nodes dialog title (#4545 ) Co-authored-by: Jennifer Weber <weberjc@MacBookPro.attlocal.net> Co-authored-by: github-actions <github-actions@github.com>	2025-07-27 00:29:57 -07:00
github-actions	df67cdd86c	Update locales [skip ci]	2025-07-21 17:41:45 +09:00
bymyself	478499c188	[Update to v2 API] update WS done message	2025-07-21 17:41:45 +09:00
bymyself	a5efa8580e	dont show missing nodes button in legacy manager mode	2025-07-21 17:41:44 +09:00
bymyself	ab2e70b4b8	improve command names	2025-07-21 17:41:44 +09:00
bymyself	27579400bf	use correct response shape	2025-07-21 17:41:44 +09:00
github-actions	b9341ad144	Update locales [skip ci]	2025-07-21 17:41:44 +09:00
bymyself	9c68491129	add "Check for Updates", "Install Missing" menu items	2025-07-21 17:41:44 +09:00
github-actions	4f5ec0447c	Update locales [skip ci]	2025-07-21 17:41:44 +09:00
bymyself	0d1e5cb02a	Add banner indicating how to use legacy manager UI	2025-07-21 17:41:44 +09:00
bymyself	797a612227	move legacy option to startup arg	2025-07-21 17:41:44 +09:00
bymyself	0a0a2e74d5	await promises. update settings schema	2025-07-21 17:41:44 +09:00
bymyself	6824e48efe	re-arrange menu items	2025-07-21 17:41:44 +09:00
bymyself	257f618ee1	switch to v2 manager API endpoints	2025-07-21 17:41:44 +09:00
github-actions	a446483d7e	Update locales [skip ci]	2025-07-21 17:41:44 +09:00
bymyself	a3d7c59b6f	migrate manager menu items	2025-07-21 17:41:44 +09:00