call test

.github/ISSUE_TEMPLATE/bug-report.yaml

@@ -36,9 +36,9 @@ body:
         3. Click Queue Prompt
         4. See error
       value: |
-        1.
-        2.
-        3.
+        1. 
+        2. 
+        3. 
     validations:
       required: true
 

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

@@ -28,7 +28,7 @@ runs:
         REPO="${{ github.repository }}"
 
         if [[ -z "$VERSION_FILE" ]]; then
-          echo "::error::version_file input is required" >&2
+          echo '::error::version_file input is required' >&2
           exit 1
         fi
 
@@ -55,13 +55,11 @@ runs:
 
         case "$VERSION_FILE" in
           package.json)
-            LINKS_VALUE=$(printf '%s\n%s' \
-              'PyPI|https://pypi.org/project/comfyui-frontend-package/{{version}}/' \
-              'npm types|https://www.npmjs.com/package/@comfyorg/comfyui-frontend-types/v/{{version}}')
+            LINKS_VALUE=$'PyPI|https://pypi.org/project/comfyui-frontend-package/{{version}}/\n''npm types|https://npm.im/@comfyorg/comfyui-frontend-types@{{version}}'
             ;;
           apps/desktop-ui/package.json)
             MARKER='desktop-release-summary'
-            LINKS_VALUE='npm desktop UI|https://www.npmjs.com/package/@comfyorg/desktop-ui/v/{{version}}'
+            LINKS_VALUE='npm desktop UI|https://npm.im/@comfyorg/desktop-ui@{{version}}'
             ;;
         esac
 
@@ -71,13 +69,12 @@ runs:
         COMMENT_FILE=$(mktemp)
 
         {
-          echo "<!--$MARKER:$DIFF_PREFIX$NEW_VERSION-->"
-          echo "$MESSAGE"
-          echo ""
-          echo "- $DIFF_LABEL: [\`$DIFF_PREFIX$PREV_VERSION...$DIFF_PREFIX$NEW_VERSION\`]($DIFF_URL)"
+          printf '<!--%s:%s%s-->\n' "$MARKER" "$DIFF_PREFIX" "$NEW_VERSION"
+          printf '%s\n\n' "$MESSAGE"
+          printf -- '- %s: [%s%s...%s%s](%s)\n' "$DIFF_LABEL" "$DIFF_PREFIX" "$PREV_VERSION" "$DIFF_PREFIX" "$NEW_VERSION" "$DIFF_URL"
 
           while IFS= read -r RAW_LINE; do
-            LINE=$(echo "$RAW_LINE" | sed 's/^[[:space:]]*//;s/[[:space:]]*$//')
+            LINE=$(printf '%s' "$RAW_LINE" | sed 's/^[[:space:]]*//;s/[[:space:]]*$//')
             [[ -z "$LINE" ]] && continue
             if [[ "$LINE" != *"|"* ]]; then
               echo "::warning::Skipping malformed link entry: $LINE" >&2
@@ -87,16 +84,16 @@ runs:
             URL_TEMPLATE=${LINE#*|}
             URL=${URL_TEMPLATE//\{\{version\}\}/$NEW_VERSION}
             URL=${URL//\{\{prev_version\}\}/$PREV_VERSION}
-            echo "- $LABEL: [\`$NEW_VERSION\`]($URL)"
+            printf -- '- %s: %s\n' "$LABEL" "$URL"
           done <<< "$LINKS_VALUE"
 
-          echo ""
+          printf '\n'
         } > "$COMMENT_FILE"
 
         {
-          echo "body<<COMMENT_BODY_END_MARKER"
+          echo "body<<'EOF'"
           cat "$COMMENT_FILE"
-          echo "COMMENT_BODY_END_MARKER"
+          echo 'EOF'
         } >> "$GITHUB_OUTPUT"
         echo "prev_version=$PREV_VERSION" >> "$GITHUB_OUTPUT"
         echo "marker_search=<!--$MARKER:" >> "$GITHUB_OUTPUT"

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

@@ -105,4 +105,4 @@ jobs:
           labels: Manager
           delete-branch: true
           add-paths: |
-            src/types/generatedManagerTypes.ts
+            src/types/generatedManagerTypes.ts

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

@@ -6,8 +6,6 @@ on:
     branches:
       - main
   pull_request:
-    paths:
-      - '**/*.json'
 
 jobs:
   json-lint:

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

@@ -51,7 +51,7 @@ jobs:
           if [ -n "$(git status --porcelain)" ]; then
             echo "changed=true" >> $GITHUB_OUTPUT
           else
-            echo "changed=false" >> $GITHUB_OUTPUT
+            echo "changed=false" >> $GITHUB_OUTPUT  
           fi
 
       - name: Commit changes

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

@@ -6,7 +6,7 @@ on:
     paths:
       - 'tools/devtools/**'
   push:
-    branches: [main]
+    branches: [ main ]
     paths:
       - 'tools/devtools/**'
 

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

@@ -13,7 +13,7 @@ jobs:
   deploy-and-comment-forked-pr:
     runs-on: ubuntu-latest
     if: |
-      github.repository == 'Comfy-Org/ComfyUI_frontend' &&
+      github.repository == 'Comfy-Org/ComfyUI_frontend' && 
       github.event.workflow_run.event == 'pull_request' &&
       github.event.workflow_run.head_repository != null &&
       github.event.workflow_run.repository != null &&
@@ -43,14 +43,14 @@ jobs:
               repo: context.repo.repo,
               state: 'open',
             });
-
+            
             const pr = prs.find(p => p.head.sha === context.payload.workflow_run.head_sha);
-
+            
             if (!pr) {
               console.log('No PR found for SHA:', context.payload.workflow_run.head_sha);
               return null;
             }
-
+            
             console.log(`Found PR #${pr.number} from fork: ${context.payload.workflow_run.head_repository.full_name}`);
             return pr.number;
 
@@ -74,7 +74,7 @@ jobs:
           run-id: ${{ github.event.workflow_run.id }}
           pattern: playwright-report-*
           path: reports
-
+          
       - name: Handle Test Completion
         if: steps.pr.outputs.result != 'null' && github.event.action == 'completed'
         env:
@@ -85,9 +85,9 @@ jobs:
           # Rename merged report if exists
           [ -d "reports/playwright-report-chromium-merged" ] && \
             mv reports/playwright-report-chromium-merged reports/playwright-report-chromium
-
+          
           chmod +x scripts/cicd/pr-playwright-deploy-and-comment.sh
           ./scripts/cicd/pr-playwright-deploy-and-comment.sh \
             "${{ steps.pr.outputs.result }}" \
             "${{ github.event.workflow_run.head_branch }}" \
-            "completed"
+            "completed"

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

@@ -29,7 +29,7 @@ jobs:
         with:
           include_build_step: true
       - name: Setup Playwright
-        uses: ./.github/actions/setup-playwright  # Setup Playwright and cache browsers
+        uses: ./.github/actions/setup-playwright # Setup Playwright and cache browsers
 
       # Save the entire workspace as cache for later test jobs to restore
       - name: Generate cache key

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

@@ -13,7 +13,7 @@ jobs:
   deploy-and-comment-forked-pr:
     runs-on: ubuntu-latest
     if: |
-      github.repository == 'Comfy-Org/ComfyUI_frontend' &&
+      github.repository == 'Comfy-Org/ComfyUI_frontend' && 
       github.event.workflow_run.event == 'pull_request' &&
       github.event.workflow_run.head_repository != null &&
       github.event.workflow_run.repository != null &&
@@ -43,14 +43,14 @@ jobs:
               repo: context.repo.repo,
               state: 'open',
             });
-
+            
             const pr = prs.find(p => p.head.sha === context.payload.workflow_run.head_sha);
-
+            
             if (!pr) {
               console.log('No PR found for SHA:', context.payload.workflow_run.head_sha);
               return null;
             }
-
+            
             console.log(`Found PR #${pr.number} from fork: ${context.payload.workflow_run.head_repository.full_name}`);
             return pr.number;
 
@@ -74,7 +74,7 @@ jobs:
           run-id: ${{ github.event.workflow_run.id }}
           name: storybook-static
           path: storybook-static
-
+          
       - name: Handle Storybook Completion
         if: steps.pr.outputs.result != 'null' && github.event.action == 'completed'
         env:
@@ -88,4 +88,4 @@ jobs:
           ./scripts/cicd/pr-storybook-deploy-and-comment.sh \
             "${{ steps.pr.outputs.result }}" \
             "${{ github.event.workflow_run.head_branch }}" \
-            "completed"
+            "completed"

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

@@ -2,7 +2,7 @@ name: "CI: Tests Storybook"
 description: "Builds Storybook and runs visual regression testing via Chromatic, deploys previews to Cloudflare Pages"
 
 on:
-  workflow_dispatch:  # Allow manual triggering
+  workflow_dispatch: # Allow manual triggering
   pull_request:
     branches: [main]
 
@@ -16,7 +16,7 @@ jobs:
     steps:
       - name: Checkout repository
         uses: actions/checkout@v5
-
+        
       - name: Post starting comment
         env:
           GITHUB_TOKEN: ${{ github.token }}
@@ -89,7 +89,7 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@v5
         with:
-          fetch-depth: 0  # Required for Chromatic baseline
+          fetch-depth: 0 # Required for Chromatic baseline
 
       - name: Install pnpm
         uses: pnpm/action-setup@v4
@@ -111,9 +111,9 @@ jobs:
         with:
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
           buildScriptName: build-storybook
-          autoAcceptChanges: 'main'  # Auto-accept changes on main branch
-          exitOnceUploaded: true  # Don't wait for UI tests to complete
-          onlyChanged: true  # Only capture changed stories
+          autoAcceptChanges: 'main' # Auto-accept changes on main branch
+          exitOnceUploaded: true # Don't wait for UI tests to complete
+          onlyChanged: true # Only capture changed stories
 
       - name: Set job status
         id: job-status
@@ -138,17 +138,17 @@ jobs:
     steps:
       - name: Checkout repository
         uses: actions/checkout@v5
-
+        
       - name: Download Storybook build
         if: needs.storybook-build.outputs.conclusion == 'success'
         uses: actions/download-artifact@v4
         with:
           name: storybook-static
           path: storybook-static
-
+          
       - name: Make deployment script executable
         run: chmod +x scripts/cicd/pr-storybook-deploy-and-comment.sh
-
+        
       - name: Deploy Storybook and comment on PR
         env:
           CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
@@ -176,25 +176,25 @@ jobs:
           script: |
             const buildUrl = '${{ needs.chromatic-deployment.outputs.chromatic-build-url }}';
             const storybookUrl = '${{ needs.chromatic-deployment.outputs.chromatic-storybook-url }}';
-
+            
             // Find the existing Storybook comment
             const { data: comments } = await github.rest.issues.listComments({
               owner: context.repo.owner,
               repo: context.repo.repo,
               issue_number: ${{ github.event.pull_request.number }}
             });
-
-            const storybookComment = comments.find(comment =>
+            
+            const storybookComment = comments.find(comment => 
               comment.body.includes('<!-- STORYBOOK_BUILD_STATUS -->')
             );
-
+            
             if (storybookComment && buildUrl && storybookUrl) {
               // Append Chromatic info to existing comment
               const updatedBody = storybookComment.body.replace(
                 /---\n(.*)$/s,
                 `---\n### 🎨 Chromatic Visual Tests\n- 📊 [View Chromatic Build](${buildUrl})\n- 📚 [View Chromatic Storybook](${storybookUrl})\n\n$1`
               );
-
+              
               await github.rest.issues.updateComment({
                 owner: context.repo.owner,
                 repo: context.repo.repo,

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

@@ -1,33 +0,0 @@
-name: "CI: YAML Validation"
-description: "Validates YAML syntax and style using yamllint with relaxed rules"
-
-on:
-  push:
-    branches:
-      - main
-    paths:
-      - '**/*.yml'
-      - '**/*.yaml'
-  pull_request:
-    paths:
-      - '**/*.yml'
-      - '**/*.yaml'
-
-jobs:
-  yaml-lint:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v5
-
-      - name: Set up Python
-        uses: actions/setup-python@v5
-        with:
-          python-version: '3.x'
-
-      - name: Install yamllint
-        run: |
-          python -m pip install --upgrade pip
-          python -m pip install yamllint
-
-      - name: Validate YAML syntax and style
-        run: ./scripts/cicd/check-yaml.sh

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

@@ -2,11 +2,11 @@ name: "i18n: Update Core"
 description: "Generates and updates translations for core ComfyUI components using OpenAI"
 
 on:
-  # Manual dispatch for urgent translation updates
+  # Manual dispatch for urgent translation updates  
   workflow_dispatch:
   # Only trigger on PRs to main/master - additional branch filtering in job condition
   pull_request:
-    branches: [main]
+    branches: [ main ]
     types: [opened, synchronize, reopened]
 
 jobs:
@@ -15,45 +15,45 @@ jobs:
     if: github.event_name == 'workflow_dispatch' || (github.event.pull_request.head.repo.full_name == github.repository && startsWith(github.head_ref, 'version-bump-'))
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout repository
-        uses: actions/checkout@v5
+    - name: Checkout repository
+      uses: actions/checkout@v5
 
-      # Setup playwright environment
-      - name: Setup ComfyUI Frontend
-        uses: ./.github/actions/setup-frontend
-        with:
-          include_build_step: true
-      - name: Setup ComfyUI Server
-        uses: ./.github/actions/setup-comfyui-server
-        with:
-          launch_server: true
-      - name: Setup Playwright
-        uses: ./.github/actions/setup-playwright
+    # Setup playwright environment
+    - name: Setup ComfyUI Frontend
+      uses: ./.github/actions/setup-frontend
+      with:
+        include_build_step: true
+    - name: Setup ComfyUI Server
+      uses: ./.github/actions/setup-comfyui-server
+      with:
+        launch_server: true
+    - name: Setup Playwright
+      uses: ./.github/actions/setup-playwright
 
-      - name: Start dev server
-        # Run electron dev server as it is a superset of the web dev server
-        # We do want electron specific UIs to be translated.
-        run: pnpm dev:electron &
+    - name: Start dev server
+      # Run electron dev server as it is a superset of the web dev server
+      # We do want electron specific UIs to be translated.
+      run: pnpm dev:electron &
 
-      # Update locales, collect new strings and update translations using OpenAI, then commit changes
-      - name: Update en.json
-        run: pnpm collect-i18n
-        env:
-          PLAYWRIGHT_TEST_URL: http://localhost:5173
-      - name: Update translations
-        run: pnpm locale
-        env:
-          OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
-      - name: Commit updated locales
-        run: |
-          git config --global user.name 'github-actions'
-          git config --global user.email 'github-actions@github.com'
-          git fetch origin ${{ github.head_ref }}
-          # Stash any local changes before checkout
-          git stash -u
-          git checkout -B ${{ github.head_ref }} origin/${{ github.head_ref }}
-          # Apply the stashed changes if any
-          git stash pop || true
-          git add src/locales/
-          git diff --staged --quiet || git commit -m "Update locales"
-          git push origin HEAD:${{ github.head_ref }}
+    # Update locales, collect new strings and update translations using OpenAI, then commit changes
+    - name: Update en.json
+      run: pnpm collect-i18n
+      env:
+        PLAYWRIGHT_TEST_URL: http://localhost:5173
+    - name: Update translations
+      run: pnpm locale
+      env:
+        OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
+    - name: Commit updated locales
+      run: |
+        git config --global user.name 'github-actions'
+        git config --global user.email 'github-actions@github.com'
+        git fetch origin ${{ github.head_ref }}
+        # Stash any local changes before checkout
+        git stash -u
+        git checkout -B ${{ github.head_ref }} origin/${{ github.head_ref }}
+        # Apply the stashed changes if any
+        git stash pop || true
+        git add src/locales/
+        git diff --staged --quiet || git commit -m "Update locales"
+        git push origin HEAD:${{ github.head_ref }}

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

@@ -21,116 +21,116 @@ jobs:
   update-locales:
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout repository
-        uses: actions/checkout@v5
+    - name: Checkout repository
+      uses: actions/checkout@v5
 
-      # Setup playwright environment with custom node repository
-      - name: Setup ComfyUI Server (without launching)
-        uses: ./.github/actions/setup-comfyui-server
-      - name: Setup frontend
-        uses: ./.github/actions/setup-frontend
-        with:
-          include_build_step: 'true'
-      - name: Setup Playwright
-        uses: ./.github/actions/setup-playwright
+    # Setup playwright environment with custom node repository
+    - name: Setup ComfyUI Server (without launching)
+      uses: ./.github/actions/setup-comfyui-server
+    - name: Setup frontend
+      uses: ./.github/actions/setup-frontend
+      with:
+        include_build_step: 'true'
+    - name: Setup Playwright
+      uses: ./.github/actions/setup-playwright
 
-      # Install the custom node repository
-      - name: Checkout custom node repository
-        uses: actions/checkout@v5
-        with:
-          repository: ${{ inputs.owner }}/${{ inputs.repository }}
-          path: 'ComfyUI/custom_nodes/${{ inputs.repository }}'
-      - name: Install custom node Python requirements
-        working-directory: ComfyUI/custom_nodes/${{ inputs.repository }}
-        run: |
-          if [ -f "requirements.txt" ]; then
-            pip install -r requirements.txt
-          fi
+    # Install the custom node repository
+    - name: Checkout custom node repository
+      uses: actions/checkout@v5
+      with:
+        repository: ${{ inputs.owner }}/${{ inputs.repository }}
+        path: 'ComfyUI/custom_nodes/${{ inputs.repository }}'
+    - name: Install custom node Python requirements
+      working-directory: ComfyUI/custom_nodes/${{ inputs.repository }}
+      run: |
+        if [ -f "requirements.txt" ]; then
+          pip install -r requirements.txt
+        fi
 
-      # Start ComfyUI Server
-      - name: Start ComfyUI Server
-        shell: bash
-        working-directory: ComfyUI
-        run: |
-          python main.py --cpu --multi-user --front-end-root ../dist --custom-node-path ../ComfyUI/custom_nodes/${{ inputs.repository }} &
-          wait-for-it --service
+    # Start ComfyUI Server
+    - name: Start ComfyUI Server
+      shell: bash
+      working-directory: ComfyUI
+      run: |
+        python main.py --cpu --multi-user --front-end-root ../dist --custom-node-path ../ComfyUI/custom_nodes/${{ inputs.repository }} &
+        wait-for-it --service
 
-      - name: Start dev server
-        # Run electron dev server as it is a superset of the web dev server
-        # We do want electron specific UIs to be translated.
-        run: pnpm dev:electron &
+    - name: Start dev server
+      # Run electron dev server as it is a superset of the web dev server
+      # We do want electron specific UIs to be translated.
+      run: pnpm dev:electron &
+      
+    - name: Capture base i18n
+      run: pnpm exec tsx scripts/diff-i18n capture
+    - name: Update en.json
+      run: pnpm collect-i18n
+      env:
+        PLAYWRIGHT_TEST_URL: http://localhost:5173
+    - name: Update translations
+      run: pnpm locale
+      env:
+        OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
+    - name: Diff base vs updated i18n
+      run: pnpm exec tsx scripts/diff-i18n diff
+    - name: Update i18n in custom node repository
+      run: |
+        LOCALE_DIR=ComfyUI/custom_nodes/${{ inputs.repository }}/locales/
+        install -d "$LOCALE_DIR"
+        cp -rf ComfyUI_frontend/temp/diff/* "$LOCALE_DIR"
+    
+    # Git ops for pushing changes and creating PR
+    - name: Check and create fork of custom node repository
+      run: |
+        # Try to fork the repository
+        gh repo fork ${{ inputs.owner }}/${{ inputs.repository }} --clone=false || {
+          echo "Fork failed - repository might already be forked"
+          # Exit 0 to prevent the workflow from failing
+          exit 0
+        }
 
-      - name: Capture base i18n
-        run: pnpm exec tsx scripts/diff-i18n capture
-      - name: Update en.json
-        run: pnpm collect-i18n
-        env:
-          PLAYWRIGHT_TEST_URL: http://localhost:5173
-      - name: Update translations
-        run: pnpm locale
-        env:
-          OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
-      - name: Diff base vs updated i18n
-        run: pnpm exec tsx scripts/diff-i18n diff
-      - name: Update i18n in custom node repository
-        run: |
-          LOCALE_DIR=ComfyUI/custom_nodes/${{ inputs.repository }}/locales/
-          install -d "$LOCALE_DIR"
-          cp -rf ComfyUI_frontend/temp/diff/* "$LOCALE_DIR"
+        # Enable workflows on the forked repository
+        gh api \
+          --method PUT \
+          -H "Accept: application/vnd.github+json" \
+          "/repos/${{ inputs.fork_owner }}/${{ inputs.repository }}/actions/permissions/workflow" \
+          -F can_approve_pull_request_reviews=true \
+          -F default_workflow_permissions="write" \
+          -F enabled=true
+      env:
+        GH_TOKEN: ${{ secrets.PR_GH_TOKEN }}
 
-      # Git ops for pushing changes and creating PR
-      - name: Check and create fork of custom node repository
-        run: |
-          # Try to fork the repository
-          gh repo fork ${{ inputs.owner }}/${{ inputs.repository }} --clone=false || {
-            echo "Fork failed - repository might already be forked"
-            # Exit 0 to prevent the workflow from failing
-            exit 0
-          }
+    - name: Commit changes
+      working-directory: ComfyUI/custom_nodes/${{ inputs.repository }}
+      run: |
+        git config --global user.name 'github-actions'
+        git config --global user.email 'github-actions@github.com'
 
-          # Enable workflows on the forked repository
-          gh api \
-            --method PUT \
-            -H "Accept: application/vnd.github+json" \
-            "/repos/${{ inputs.fork_owner }}/${{ inputs.repository }}/actions/permissions/workflow" \
-            -F can_approve_pull_request_reviews=true \
-            -F default_workflow_permissions="write" \
-            -F enabled=true
-        env:
-          GH_TOKEN: ${{ secrets.PR_GH_TOKEN }}
+        # Create and switch to new branch
+        git checkout -b update-locales
 
-      - name: Commit changes
-        working-directory: ComfyUI/custom_nodes/${{ inputs.repository }}
-        run: |
-          git config --global user.name 'github-actions'
-          git config --global user.email 'github-actions@github.com'
+        # Stage and commit changes
+        git add -A
+        git commit -m "Update locales"
 
-          # Create and switch to new branch
-          git checkout -b update-locales
+    - name: Install SSH key For PUSH
+      uses: shimataro/ssh-key-action@d4fffb50872869abe2d9a9098a6d9c5aa7d16be4
+      with:
+        # PR private key from action server
+        key: ${{ secrets.PR_SSH_PRIVATE_KEY }}
+        # github public key to confirm it's github server
+        known_hosts: github.com ssh-rsa AAAAB3NzaC1yc2EAAAABIwAAAQEAq2A7hRGmdnm9tUDbO9IDSwBK6TbQa+PXYPCPy6rbTrTtw7PHkccKrpp0yVhp5HdEIcKr6pLlVDBfOLX9QUsyCOV0wzfjIJNlGEYsdlLJizHhbn2mUjvSAHQqZETYP81eFzLQNnPHt4EVVUh7VfDESU84KezmD5QlWpXLmvU31/yMf+Se8xhHTvKSCZIFImWwoG6mbUoWf9nzpIoaSjB+weqqUUmpaaasXVal72J+UX2B+2RPW3RcT0eOzQgqlJL3RKrTJvdsjE3JEAvGq3lGHSZXy28G3skua2SmVi/w4yCE6gbODqnTWlg7+wC604ydGXA8VJiS5ap43JXiUFFAaQ==
 
-          # Stage and commit changes
-          git add -A
-          git commit -m "Update locales"
+    - name: Push changes
+      working-directory: ComfyUI/custom_nodes/${{ inputs.repository }}
+      run: |
+        # Force push to create the branch
+        echo "Pushing changes to ${{ inputs.fork_owner }}/${{ inputs.repository }}"
+        git push -f git@github.com:${{ inputs.fork_owner }}/${{ inputs.repository }}.git update-locales
 
-      - name: Install SSH key For PUSH
-        uses: shimataro/ssh-key-action@d4fffb50872869abe2d9a9098a6d9c5aa7d16be4
-        with:
-          # PR private key from action server
-          key: ${{ secrets.PR_SSH_PRIVATE_KEY }}
-          # github public key to confirm it's github server
-          known_hosts: github.com ssh-rsa AAAAB3NzaC1yc2EAAAABIwAAAQEAq2A7hRGmdnm9tUDbO9IDSwBK6TbQa+PXYPCPy6rbTrTtw7PHkccKrpp0yVhp5HdEIcKr6pLlVDBfOLX9QUsyCOV0wzfjIJNlGEYsdlLJizHhbn2mUjvSAHQqZETYP81eFzLQNnPHt4EVVUh7VfDESU84KezmD5QlWpXLmvU31/yMf+Se8xhHTvKSCZIFImWwoG6mbUoWf9nzpIoaSjB+weqqUUmpaaasXVal72J+UX2B+2RPW3RcT0eOzQgqlJL3RKrTJvdsjE3JEAvGq3lGHSZXy28G3skua2SmVi/w4yCE6gbODqnTWlg7+wC604ydGXA8VJiS5ap43JXiUFFAaQ==
-
-      - name: Push changes
-        working-directory: ComfyUI/custom_nodes/${{ inputs.repository }}
-        run: |
-          # Force push to create the branch
-          echo "Pushing changes to ${{ inputs.fork_owner }}/${{ inputs.repository }}"
-          git push -f git@github.com:${{ inputs.fork_owner }}/${{ inputs.repository }}.git update-locales
-
-      - name: Create PR
-        working-directory: ComfyUI/custom_nodes/${{ inputs.repository }}
-        run: |
-          # Create PR using gh cli
-          gh pr create --title "Update locales for ${{ inputs.repository }}" --repo ${{ inputs.owner }}/${{ inputs.repository }} --head ${{ inputs.fork_owner }}:update-locales --body "Update locales for ${{ inputs.repository }}"
-        env:
-          GH_TOKEN: ${{ secrets.PR_GH_TOKEN }}
+    - name: Create PR
+      working-directory: ComfyUI/custom_nodes/${{ inputs.repository }}
+      run: |
+        # Create PR using gh cli
+        gh pr create --title "Update locales for ${{ inputs.repository }}" --repo ${{ inputs.owner }}/${{ inputs.repository }} --head ${{ inputs.fork_owner }}:update-locales --body "Update locales for ${{ inputs.repository }}"
+      env:
+        GH_TOKEN: ${{ secrets.PR_GH_TOKEN }}

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

@@ -13,42 +13,42 @@ jobs:
   update-locales:
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout repository
-        uses: actions/checkout@v5
-      # Setup playwright environment
-      - name: Setup ComfyUI Server (and start)
-        uses: ./.github/actions/setup-comfyui-server
-        with:
-          launch_server: true
-      - name: Setup frontend
-        uses: ./.github/actions/setup-frontend
-        with:
-          include_build_step: true
-      - name: Setup Playwright
-        uses: ./.github/actions/setup-playwright
+    - name: Checkout repository
+      uses: actions/checkout@v5
+    # Setup playwright environment
+    - name: Setup ComfyUI Server (and start)
+      uses: ./.github/actions/setup-comfyui-server
+      with:
+        launch_server: true
+    - name: Setup frontend
+      uses: ./.github/actions/setup-frontend
+      with:
+        include_build_step: true
+    - name: Setup Playwright
+      uses: ./.github/actions/setup-playwright
 
-      - name: Start dev server
-        # Run electron dev server as it is a superset of the web dev server
-        # We do want electron specific UIs to be translated.
-        run: pnpm dev:electron &
-      - name: Update en.json
-        run: pnpm collect-i18n -- scripts/collect-i18n-node-defs.ts
-        env:
-          PLAYWRIGHT_TEST_URL: http://localhost:5173
-      - name: Update translations
-        run: pnpm locale
-        env:
-          OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
-      - name: Create Pull Request
-        uses: peter-evans/create-pull-request@271a8d0340265f705b14b6d32b9829c1cb33d45e
-        with:
-          token: ${{ secrets.PR_GH_TOKEN }}
-          commit-message: "Update locales for node definitions"
-          title: "Update locales for node definitions"
-          body: |
-            Automated PR to update locales for node definitions
+    - name: Start dev server
+      # Run electron dev server as it is a superset of the web dev server
+      # We do want electron specific UIs to be translated.
+      run: pnpm dev:electron &
+    - name: Update en.json
+      run: pnpm collect-i18n -- scripts/collect-i18n-node-defs.ts
+      env:
+        PLAYWRIGHT_TEST_URL: http://localhost:5173
+    - name: Update translations
+      run: pnpm locale
+      env:
+        OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
+    - name: Create Pull Request
+      uses: peter-evans/create-pull-request@271a8d0340265f705b14b6d32b9829c1cb33d45e
+      with:
+        token: ${{ secrets.PR_GH_TOKEN }}
+        commit-message: "Update locales for node definitions"
+        title: "Update locales for node definitions"
+        body: |
+          Automated PR to update locales for node definitions
 
-            This PR was created automatically by the frontend update workflow.
-          branch: update-locales-node-defs-${{ github.event.inputs.trigger_type }}-${{ github.run_id }}
-          base: main
-          labels: dependencies
+          This PR was created automatically by the frontend update workflow.
+        branch: update-locales-node-defs-${{ github.event.inputs.trigger_type }}-${{ github.run_id }}
+        base: main
+        labels: dependencies

.github/workflows/pr-backport.yaml

@@ -19,8 +19,8 @@ on:
 jobs:
   backport:
     if: >
-      (github.event_name == 'pull_request_target' &&
-       github.event.pull_request.merged == true &&
+      (github.event_name == 'pull_request_target' && 
+       github.event.pull_request.merged == true && 
        contains(github.event.pull_request.labels.*.name, 'needs-backport')) ||
       github.event_name == 'workflow_dispatch'
     runs-on: ubuntu-latest
@@ -38,19 +38,19 @@ jobs:
             echo "::error::Invalid PR number format. Must be a positive integer."
             exit 1
           fi
-
+          
           # Validate PR exists and is merged
           if ! gh pr view "${{ inputs.pr_number }}" --json merged >/dev/null 2>&1; then
             echo "::error::PR #${{ inputs.pr_number }} not found or inaccessible."
             exit 1
           fi
-
+          
           MERGED=$(gh pr view "${{ inputs.pr_number }}" --json merged --jq '.merged')
           if [ "$MERGED" != "true" ]; then
             echo "::error::PR #${{ inputs.pr_number }} is not merged. Only merged PRs can be backported."
             exit 1
           fi
-
+          
           # Validate PR has needs-backport label
           if ! gh pr view "${{ inputs.pr_number }}" --json labels --jq '.labels[].name' | grep -q "needs-backport"; then
             echo "::error::PR #${{ inputs.pr_number }} does not have 'needs-backport' label."
@@ -164,7 +164,6 @@ jobs:
 
           PENDING=()
           SKIPPED=()
-          REUSED=()
 
           for target in $REQUESTED_TARGETS; do
             SAFE_TARGET=$(echo "$target" | tr '/' '-')
@@ -177,22 +176,10 @@ jobs:
 
             if printf '%s\n' "${EXISTING_BRANCHES[@]:-}" |
               grep -Fq "refs/heads/${BACKPORT_BRANCH}"; then
-              OPEN_PR=$(
-                gh pr list \
-                  --state open \
-                  --head "${BACKPORT_BRANCH}" \
-                  --json number \
-                  --jq 'if length > 0 then .[0].number else "" end'
-              )
-              if [ -n "$OPEN_PR" ]; then
-                SKIPPED+=("${target} (PR #${OPEN_PR})")
-                continue
-              fi
-
-              REUSED+=("$BACKPORT_BRANCH")
+              SKIPPED+=("$target")
+            else
+              PENDING+=("$target")
             fi
-
-            PENDING+=("$target")
           done
 
           SKIPPED_JOINED="${SKIPPED[*]:-}"
@@ -200,20 +187,16 @@ jobs:
 
           echo "already-exists=${SKIPPED_JOINED}" >> $GITHUB_OUTPUT
           echo "pending-targets=${PENDING_JOINED}" >> $GITHUB_OUTPUT
-          echo "reused-branches=${REUSED[*]:-}" >> $GITHUB_OUTPUT
 
           if [ -z "$PENDING_JOINED" ]; then
             echo "skip=true" >> $GITHUB_OUTPUT
             if [ -n "$SKIPPED_JOINED" ]; then
-              echo "::warning::Backport branches exist: ${SKIPPED_JOINED}"
+              echo "::warning::Backport branches already exist for: ${SKIPPED_JOINED}"
             fi
           else
             echo "skip=false" >> $GITHUB_OUTPUT
             if [ -n "$SKIPPED_JOINED" ]; then
-              echo "::notice::Skipping backport targets: ${SKIPPED_JOINED}"
-            fi
-            if [ "${#REUSED[@]}" -gt 0 ]; then
-              echo "::notice::Reusing backport branches: ${REUSED[*]}"
+              echo "::notice::Skipping already backported targets: ${SKIPPED_JOINED}"
             fi
           fi
 
@@ -225,12 +208,7 @@ jobs:
         run: |
           FAILED=""
           SUCCESS=""
-
-          CREATED_BRANCHES_FILE="$(
-            mktemp "$RUNNER_TEMP/backport-branches-XXXXXX"
-          )"
-          echo "CREATED_BRANCHES_FILE=$CREATED_BRANCHES_FILE" >> "$GITHUB_ENV"
-
+          
           # Get PR data for manual triggers
           if [ "${{ github.event_name }}" = "workflow_dispatch" ]; then
             PR_DATA=$(gh pr view ${{ inputs.pr_number }} --json title,mergeCommit)
@@ -245,12 +223,6 @@ jobs:
             TARGET_BRANCH="${target}"
             SAFE_TARGET=$(echo "$TARGET_BRANCH" | tr '/' '-')
             BACKPORT_BRANCH="backport-${PR_NUMBER}-to-${SAFE_TARGET}"
-            REMOTE_BACKPORT_EXISTS=false
-
-            if git ls-remote --exit-code origin "${BACKPORT_BRANCH}" >/dev/null 2>&1; then
-              REMOTE_BACKPORT_EXISTS=true
-              echo "::notice::Updating existing branch ${BACKPORT_BRANCH}"
-            fi
 
             echo "::group::Backporting to ${TARGET_BRANCH}"
 
@@ -275,12 +247,7 @@ jobs:
 
             # Try cherry-pick
             if git cherry-pick "${MERGE_COMMIT}"; then
-              if [ "$REMOTE_BACKPORT_EXISTS" = true ]; then
-                git push --force-with-lease origin "${BACKPORT_BRANCH}"
-              else
-                git push origin "${BACKPORT_BRANCH}"
-              fi
-              echo "${BACKPORT_BRANCH}" >> "$CREATED_BRANCHES_FILE"
+              git push origin "${BACKPORT_BRANCH}"
               SUCCESS="${SUCCESS}${TARGET_BRANCH}:${BACKPORT_BRANCH} "
               echo "Successfully created backport branch: ${BACKPORT_BRANCH}"
               # Return to main (keep the branch, we need it for PR)
@@ -304,13 +271,6 @@ jobs:
           echo "success=${SUCCESS}" >> $GITHUB_OUTPUT
           echo "failed=${FAILED}" >> $GITHUB_OUTPUT
 
-          if [ -s "$CREATED_BRANCHES_FILE" ]; then
-            CREATED_LIST=$(paste -sd' ' "$CREATED_BRANCHES_FILE")
-            echo "created-branches=${CREATED_LIST}" >> $GITHUB_OUTPUT
-          else
-            echo "created-branches=" >> $GITHUB_OUTPUT
-          fi
-
           if [ -n "${FAILED}" ]; then
             exit 1
           fi
@@ -330,7 +290,7 @@ jobs:
             PR_TITLE="${{ github.event.pull_request.title }}"
             PR_AUTHOR="${{ github.event.pull_request.user.login }}"
           fi
-
+          
           for backport in ${{ steps.backport.outputs.success }}; do
             IFS=':' read -r target branch <<< "${backport}"
 
@@ -388,25 +348,6 @@ jobs:
             fi
           done
 
-      - name: Cleanup stranded backport branches
-        if: steps.filter-targets.outputs.skip != 'true' && failure()
-        run: |
-          FILE="${CREATED_BRANCHES_FILE:-}"
-
-          if [ -z "$FILE" ] || [ ! -f "$FILE" ]; then
-            echo "No backport branches recorded for cleanup"
-            exit 0
-          fi
-
-          while IFS= read -r branch; do
-            [ -z "$branch" ] && continue
-            printf 'Deleting branch %s\n' "${branch}"
-            if ! git push origin --delete "$branch"; then
-              echo "::warning::Failed to delete ${branch}"
-            fi
-          done < "$FILE"
-
-
       - name: Remove needs-backport label
         if: steps.filter-targets.outputs.skip != 'true' && success()
         run: gh pr edit ${{ github.event_name == 'workflow_dispatch' && inputs.pr_number || github.event.pull_request.number }} --remove-label "needs-backport"

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

@@ -127,26 +127,26 @@ jobs:
           echo "=========================================="
           echo "STAGING CHANGED SNAPSHOTS (Shard ${{ matrix.shardIndex }})"
           echo "=========================================="
-
+          
           # Get list of changed snapshot files
           changed_files=$(git diff --name-only browser_tests/ 2>/dev/null | grep -E '\-snapshots/' || echo "")
-
+          
           if [ -z "$changed_files" ]; then
             echo "No snapshot changes in this shard"
             echo "has-changes=false" >> $GITHUB_OUTPUT
             exit 0
           fi
-
+          
           echo "✓ Found changed files:"
           echo "$changed_files"
           file_count=$(echo "$changed_files" | wc -l)
           echo "Count: $file_count"
           echo "has-changes=true" >> $GITHUB_OUTPUT
           echo ""
-
+          
           # Create staging directory
           mkdir -p /tmp/changed_snapshots_shard
-
+          
           # Copy only changed files, preserving directory structure
           # Strip 'browser_tests/' prefix to avoid double nesting
           echo "Copying changed files to staging directory..."
@@ -159,7 +159,7 @@ jobs:
             cp "$file" "/tmp/changed_snapshots_shard/$file_without_prefix"
             echo "  → $file_without_prefix"
           done <<< "$changed_files"
-
+          
           echo ""
           echo "Staged files for upload:"
           find /tmp/changed_snapshots_shard -type f
@@ -233,18 +233,18 @@ jobs:
 
             shard_name=$(basename "$shard_dir")
             file_count=$(find "$shard_dir" -type f | wc -l)
-
+            
             if [ "$file_count" -eq 0 ]; then
               echo "  $shard_name: no files"
               continue
             fi
 
             echo "Processing $shard_name ($file_count file(s))..."
-
+            
             # Copy files directly, preserving directory structure
             # Since files are already in correct structure (no browser_tests/ prefix), just copy them all
             cp -v -r "$shard_dir"* browser_tests/ 2>&1 | sed 's/^/  /'
-
+            
             merged_count=$((merged_count + 1))
             echo "  ✓ Merged"
             echo ""
@@ -272,25 +272,25 @@ jobs:
         run: |
           git config --global user.name 'github-actions'
           git config --global user.email 'github-actions@github.com'
-
+          
           if git diff --quiet browser_tests/; then
             echo "No changes to commit"
             echo "has-changes=false" >> $GITHUB_OUTPUT
             exit 0
           fi
-
+          
           echo "=========================================="
           echo "COMMITTING CHANGES"
           echo "=========================================="
-
+          
           echo "has-changes=true" >> $GITHUB_OUTPUT
-
+          
           git add browser_tests/
           git commit -m "[automated] Update test expectations"
-
+          
           echo "Pushing to ${{ needs.setup.outputs.branch }}..."
           git push origin ${{ needs.setup.outputs.branch }}
-
+          
           echo "✓ Commit and push successful"
 
       - name: Add Done Reaction
@@ -306,4 +306,4 @@ jobs:
         if: always() && github.event_name == 'pull_request'
         run: gh pr edit ${{ needs.setup.outputs.pr-number }} --remove-label "New Browser Test Expectations"
         env:
-          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

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

@@ -153,78 +153,8 @@ jobs:
             echo "EOF"
           } >> $GITHUB_OUTPUT
 
-      - name: Ensure release labels
-        if: steps.check_version.outputs.is_minor_bump == 'true'
-        env:
-          GH_TOKEN: ${{ secrets.PR_GH_TOKEN || secrets.GITHUB_TOKEN }}
-        run: |
-          set -euo pipefail
-
-          BRANCH_BASE="${{ steps.check_version.outputs.branch_base }}"
-
-          if [[ -z "$BRANCH_BASE" ]]; then
-            echo "::error::Branch base not set; unable to manage labels"
-            exit 1
-          fi
-
-          declare -A COLORS=(
-            [core]="4361ee"
-            [cloud]="4f6ef5"
-          )
-
-          for PREFIX in core cloud; do
-            LABEL="${PREFIX}/${BRANCH_BASE}"
-            COLOR="${COLORS[$PREFIX]}"
-            DESCRIPTION="Backport PRs for ${PREFIX} ${BRANCH_BASE}"
-
-            if gh label view "$LABEL" >/dev/null 2>&1; then
-              gh label edit "$LABEL" \
-                --color "$COLOR" \
-                --description "$DESCRIPTION"
-              echo "🔄 Updated label $LABEL"
-            else
-              gh label create "$LABEL" \
-                --color "$COLOR" \
-                --description "$DESCRIPTION"
-              echo "✨ Created label $LABEL"
-            fi
-          done
-
-          MIN_LABELS_TO_KEEP=3
-          MAX_LABELS_TO_FETCH=200
-
-          for PREFIX in core cloud; do
-            mapfile -t LABELS < <(
-              gh label list \
-                --json name \
-                --limit "$MAX_LABELS_TO_FETCH" \
-                --jq '.[].name' |
-              grep -E "^${PREFIX}/[0-9]+\.[0-9]+$" |
-              sort -t/ -k2,2V
-            )
-
-            TOTAL=${#LABELS[@]}
-
-            if (( TOTAL <= MIN_LABELS_TO_KEEP )); then
-              echo "ℹ️  Nothing to prune for $PREFIX labels"
-              continue
-            fi
-
-            REMOVE_COUNT=$((TOTAL - MIN_LABELS_TO_KEEP))
-
-            if (( REMOVE_COUNT > 1 )); then
-              REMOVE_COUNT=1
-            fi
-
-            for ((i=0; i<REMOVE_COUNT; i++)); do
-              OLD_LABEL="${LABELS[$i]}"
-              gh label delete "$OLD_LABEL" --yes
-              echo "🗑️ Removed old label $OLD_LABEL"
-            done
-          done
-
       - name: Post summary
-        if: always() && steps.check_version.outputs.is_minor_bump == 'true'
+        if: steps.check_version.outputs.is_minor_bump == 'true'
         run: |
           CURRENT_VERSION="${{ steps.check_version.outputs.current_version }}"
           RESULTS="${{ steps.create_branches.outputs.results }}"

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

@@ -59,7 +59,6 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: lts/*
-          cache: 'pnpm'
 
       - name: Bump version
         id: bump-version

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

@@ -92,3 +92,4 @@ jobs:
           base: ${{ github.event.inputs.branch }}
           labels: |
             Release
+

.oxlintrc.json

@@ -1,43 +0,0 @@
-{
-  "$schema": "./node_modules/oxlint/configuration_schema.json",
-  "ignorePatterns": [
-    ".i18nrc.cjs",
-    "components.d.ts",
-    "lint-staged.config.js",
-    "vitest.setup.ts",
-    "**/vite.config.*.timestamp*",
-    "**/vitest.config.*.timestamp*",
-    "packages/registry-types/src/comfyRegistryTypes.ts",
-    "src/extensions/core/*",
-    "src/scripts/*",
-    "src/types/generatedManagerTypes.ts",
-    "src/types/vue-shim.d.ts"
-  ],
-  "rules": {
-    "no-async-promise-executor": "off",
-    "no-control-regex": "off",
-    "no-eval": "off",
-    "no-self-assign": "allow",
-    "no-unused-expressions": "off",
-    "no-unused-private-class-members": "off",
-    "no-useless-rename": "off",
-    "typescript/no-this-alias": "off",
-    "typescript/no-unnecessary-parameter-property-assignment": "off",
-    "typescript/no-unsafe-declaration-merging": "off",
-    "typescript/no-unused-vars": "off",
-    "unicorn/no-empty-file": "off",
-    "unicorn/no-new-array": "off",
-    "unicorn/no-single-promise-in-promise-methods": "off",
-    "unicorn/no-useless-fallback-in-spread": "off",
-    "unicorn/no-useless-spread": "off",
-    "typescript/await-thenable": "off",
-    "typescript/no-base-to-string": "off",
-    "typescript/no-duplicate-type-constituents": "off",
-    "typescript/no-for-in-array": "off",
-    "typescript/no-meaningless-void-operator": "off",
-    "typescript/no-redundant-type-constituents": "off",
-    "typescript/restrict-template-expressions": "off",
-    "typescript/unbound-method": "off",
-    "typescript/no-floating-promises": "error"
-  }
-}

.yamllint

@@ -1,10 +0,0 @@
-extends: default
-
-ignore: |
-  node_modules/
-  dist/
-
-rules:
-  line-length: disable
-  document-start: disable
-  truthy: disable

CLAUDE.md

@@ -17,7 +17,6 @@ This bootstraps the monorepo with dependencies, builds, tests, and dev server ve
 - `pnpm typecheck`: Type checking
 - `pnpm build`: Build for production (via nx)
 - `pnpm lint`: Linting (via nx)
-- `pnpm oxlint`: Fast Rust-based linting with Oxc
 - `pnpm format`: Prettier formatting
 - `pnpm test:unit`: Run all unit tests
 - `pnpm test:browser`: Run E2E tests via Playwright

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

@@ -71,8 +71,8 @@ const updateConsent = async () => {
   } catch (error) {
     toast.add({
       severity: 'error',
-      summary: t('install.settings.errorUpdatingConsent'),
-      detail: t('install.settings.errorUpdatingConsentDetail'),
+      summary: t('install.errorUpdatingConsent'),
+      detail: t('install.errorUpdatingConsentDetail'),
       life: 3000
     })
   } finally {

apps/desktop-ui/tsconfig.json

@@ -3,8 +3,9 @@
   "compilerOptions": {
     "noEmit": true,
     "allowImportingTsExtensions": true,
+    "baseUrl": ".",
     "paths": {
-      "@/*": ["./src/*"],
+      "@/*": ["src/*"],
       "@frontend-locales/*": ["../../src/locales/*"]
     }
   },

browser_tests/tests/dialog.spec.ts

@@ -88,10 +88,6 @@ test.describe('Missing models warning', () => {
 
     const downloadButton = missingModelsWarning.getByLabel('Download')
     await expect(downloadButton).toBeVisible()
-
-    // Check that the copy URL button is also visible for Desktop environment
-    const copyUrlButton = missingModelsWarning.getByLabel('Copy URL')
-    await expect(copyUrlButton).toBeVisible()
   })
 
   test('Should display a warning when missing models are found in node properties', async ({
@@ -105,10 +101,6 @@ test.describe('Missing models warning', () => {
 
     const downloadButton = missingModelsWarning.getByLabel('Download')
     await expect(downloadButton).toBeVisible()
-
-    // Check that the copy URL button is also visible for Desktop environment
-    const copyUrlButton = missingModelsWarning.getByLabel('Copy URL')
-    await expect(copyUrlButton).toBeVisible()
   })
 
   test('Should not display a warning when no missing models are found', async ({

eslint.config.ts

@@ -3,7 +3,6 @@ import pluginJs from '@eslint/js'
 import pluginI18n from '@intlify/eslint-plugin-vue-i18n'
 import { createTypeScriptImportResolver } from 'eslint-import-resolver-typescript'
 import { importX } from 'eslint-plugin-import-x'
-import oxlint from 'eslint-plugin-oxlint'
 import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'
 import storybook from 'eslint-plugin-storybook'
 import unusedImports from 'eslint-plugin-unused-imports'
@@ -34,18 +33,7 @@ const settings = {
       ],
       noWarnOnMultipleProjects: true
     })
-  ],
-  'vue-i18n': {
-    localeDir: [
-      {
-        pattern: './src/locales/**/*.json',
-        localeKey: 'path',
-        localePattern:
-          /^\.?\/?src\/locales\/(?<locale>[A-Za-z0-9-]+)\/.+\.json$/
-      }
-    ],
-    messageSyntaxVersion: '^9.0.0'
-  }
+  ]
 } as const
 
 const commonParserOptions = {
@@ -106,23 +94,19 @@ export default defineConfig([
   // @ts-ignore Bad types in the plugin
   pluginVue.configs['flat/recommended'],
   eslintPluginPrettierRecommended,
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore Type incompatibility between import-x plugin and ESLint config types
   storybook.configs['flat/recommended'],
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore Type incompatibility between import-x plugin and ESLint config types
+  // @ts-expect-error Bad types in the plugin
   importX.flatConfigs.recommended,
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore Type incompatibility between import-x plugin and ESLint config types
+  // @ts-expect-error Bad types in the plugin
   importX.flatConfigs.typescript,
   {
     plugins: {
       'unused-imports': unusedImports,
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore Type incompatibility in i18n plugin
+      // @ts-expect-error Bad types in the plugin
       '@intlify/vue-i18n': pluginI18n
     },
     rules: {
+      '@typescript-eslint/no-floating-promises': 'error',
       '@typescript-eslint/no-explicit-any': 'off',
       '@typescript-eslint/no-unused-vars': 'off',
       '@typescript-eslint/prefer-as-const': 'off',
@@ -275,7 +259,5 @@ export default defineConfig([
       '@typescript-eslint/no-floating-promises': 'off',
       'no-console': 'off'
     }
-  },
-  // Turn off ESLint rules that are already handled by oxlint
-  ...oxlint.buildFromOxlintConfigFile('./.oxlintrc.json')
+  }
 ])

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comfyorg/comfyui-frontend",
   "private": true,
-  "version": "1.32.5",
+  "version": "1.32.4",
   "type": "module",
   "repository": "https://github.com/Comfy-Org/ComfyUI_frontend",
   "homepage": "https://comfy.org",
@@ -28,14 +28,13 @@
     "json-schema": "tsx scripts/generate-json-schema.ts",
     "knip:no-cache": "knip",
     "knip": "knip --cache",
-    "lint:fix:no-cache": "oxlint src --type-aware --fix && eslint src --fix",
-    "lint:fix": "oxlint src --type-aware --fix && eslint src --cache --fix",
-    "lint:no-cache": "oxlint src --type-aware && eslint src",
+    "lint:fix:no-cache": "eslint src --fix",
+    "lint:fix": "eslint src --cache --fix",
+    "lint:no-cache": "eslint src",
     "lint:unstaged:fix": "git diff --name-only HEAD | grep -E '\\.(js|ts|vue|mts)$' | xargs -r eslint --cache --fix",
     "lint:unstaged": "git diff --name-only HEAD | grep -E '\\.(js|ts|vue|mts)$' | xargs -r eslint --cache",
-    "lint": "oxlint src --type-aware && eslint src --cache",
+    "lint": "eslint src --cache",
     "locale": "lobe-i18n locale",
-    "oxlint": "oxlint src --type-aware",
     "preinstall": "pnpm dlx only-allow pnpm",
     "prepare": "husky || true && git config blame.ignoreRevsFile .git-blame-ignore-revs || true",
     "preview": "nx preview",
@@ -43,7 +42,6 @@
     "stylelint:fix": "stylelint --cache --fix '{apps,packages,src}/**/*.{css,vue}'",
     "stylelint": "stylelint --cache '{apps,packages,src}/**/*.{css,vue}'",
     "test:browser": "pnpm exec nx e2e",
-    "test:browser:local": "cross-env PLAYWRIGHT_LOCAL=1 pnpm test:browser",
     "test:unit": "nx run test",
     "typecheck": "vue-tsc --noEmit",
     "zipdist": "node scripts/zipdist.js",
@@ -80,7 +78,6 @@
     "eslint-config-prettier": "catalog:",
     "eslint-import-resolver-typescript": "catalog:",
     "eslint-plugin-import-x": "catalog:",
-    "eslint-plugin-oxlint": "catalog:",
     "eslint-plugin-prettier": "catalog:",
     "eslint-plugin-storybook": "catalog:",
     "eslint-plugin-unused-imports": "catalog:",
@@ -96,8 +93,6 @@
     "markdown-table": "catalog:",
     "mixpanel-browser": "catalog:",
     "nx": "catalog:",
-    "oxlint": "catalog:",
-    "oxlint-tsgolint": "catalog:",
     "picocolors": "catalog:",
     "postcss-html": "catalog:",
     "prettier": "catalog:",

packages/design-system/src/css/style.css

@@ -1346,466 +1346,3 @@ audio.comfy-audio.empty-audio-widget {
   border-radius: 0;
 }
 /* END LOD specific styles */
-
-/* ===================== Mask Editor Styles ===================== */
-/* To be migrated to Tailwind later */
-  #maskEditor_brush {
-    position: absolute;
-    backgroundColor: transparent;
-    z-index: 8889;
-    pointer-events: none;
-    border-radius: 50%;
-    overflow: visible;
-    outline: 1px dashed black;
-    box-shadow: 0 0 0 1px white;
-  }
-  #maskEditor_brushPreviewGradient {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    border-radius: 50%;
-    display: none;
-  }
-  .maskEditor_sidePanelTitle {
-    text-align: center;
-    font-size: 15px;
-    font-family: sans-serif;
-    color: var(--descrip-text);
-    margin-top: 10px;
-  }
-  .maskEditor_sidePanelBrushShapeCircle {
-    width: 35px;
-    height: 35px;
-    border-radius: 50%;
-    border: 1px solid var(--border-color);
-    pointer-events: auto;
-    transition: background 0.1s;
-    margin-left: 7.5px;
-  }
-  .maskEditor_sidePanelBrushRange {
-    width: 180px;
-    appearance: none;
-    background: transparent;
-    cursor: pointer;
-  }
-  .maskEditor_sidePanelBrushRange::-webkit-slider-thumb {
-    height: 20px;
-    width: 20px;
-    border-radius: 50%;
-    cursor: grab;
-    margin-top: -8px;
-    background: var(--p-surface-700);
-    border: 1px solid var(--border-color);
-  }
-  .maskEditor_sidePanelBrushRange::-moz-range-thumb {
-    height: 20px;
-    width: 20px;
-    border-radius: 50%;
-    cursor: grab;
-    background: var(--p-surface-800);
-    border: 1px solid var(--border-color);
-  }
-  .maskEditor_sidePanelBrushRange::-webkit-slider-runnable-track {
-    background: var(--p-surface-700);
-    height: 3px;
-  }
-  .maskEditor_sidePanelBrushRange::-moz-range-track {
-    background: var(--p-surface-700);
-    height: 3px;
-  }
-
-  .maskEditor_sidePanelBrushShapeSquare {
-    width: 35px;
-    height: 35px;
-    margin: 5px;
-    border: 1px solid var(--border-color);
-    pointer-events: auto;
-    transition: background 0.1s;
-  }
-
-  .maskEditor_brushShape_dark {
-    background: transparent;
-  }
-
-  .maskEditor_brushShape_dark:hover {
-    background: var(--p-surface-900);
-  }
-
-  .maskEditor_brushShape_light {
-    background: transparent;
-  }
-
-  .maskEditor_brushShape_light:hover {
-    background: var(--comfy-menu-bg);
-  }
-
-  .maskEditor_sidePanelLayer {
-    display: flex;
-    width: 100%;
-    height: 50px;
-  }
-  .maskEditor_sidePanelLayerVisibilityContainer {
-    width: 50px;
-    height: 50px;
-    border-radius: 8px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-  .maskEditor_sidePanelVisibilityToggle {
-    width: 12px;
-    height: 12px;
-    border-radius: 50%;
-    pointer-events: auto;
-  }
-  .maskEditor_sidePanelLayerIconContainer {
-    width: 60px;
-    height: 50px;
-    border-radius: 8px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    fill: var(--input-text);
-  }
-  .maskEditor_sidePanelLayerIconContainer svg {
-    width: 30px;
-    height: 30px;
-  }
-  .maskEditor_sidePanelBigButton {
-    width: 85px;
-    height: 30px;
-    background: rgb(0 0 0 / 0.2);
-    border: 1px solid var(--border-color);
-    color: var(--input-text);
-    font-family: sans-serif;
-    font-size: 15px;
-    pointer-events: auto;
-    transition: background-color 0.1s;
-  }
-  .maskEditor_sidePanelBigButton:hover {
-    background-color: var(--p-overlaybadge-outline-color);
-    border: none;
-  }
-  .maskEditor_toolPanelContainer {
-    width: 4rem;
-    height: 4rem;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    position: relative;
-    transition: background-color 0.2s;
-  }
-  .maskEditor_toolPanelContainerSelected svg {
-    fill: var(--p-button-text-primary-color) !important;
-  }
-  .maskEditor_toolPanelContainerSelected .maskEditor_toolPanelIndicator {
-    display: block;
-  }
-  .maskEditor_toolPanelContainer svg {
-    width: 75%;
-    aspect-ratio: 1/1;
-    fill: var(--p-button-text-secondary-color);
-  }
-
-  .maskEditor_toolPanelContainerDark:hover {
-    background-color: var(--p-surface-800);
-  }
-
-  .maskEditor_toolPanelContainerLight:hover {
-    background-color: var(--p-surface-300);
-  }
-
-  .maskEditor_toolPanelIndicator {
-    display: none;
-    height: 100%;
-    width: 4px;
-    position: absolute;
-    left: 0;
-    background: var(--p-button-text-primary-color);
-  }
-  .maskEditor_sidePanelSeparator {
-    width: 100%;
-    height: 2px;
-    background: var(--border-color);
-    margin-top: 1.5em;
-    margin-bottom: 5px;
-  }
-  #maskEditorCanvasContainer {
-    position: absolute;
-    width: 1000px;
-    height: 667px;
-    left: 359px;
-    top: 280px;
-  }
-
-  .maskEditor_topPanelIconButton_dark {
-    width: 50px;
-    height: 30px;
-    pointer-events: auto;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    transition: background-color 0.1s;
-    background: var(--p-surface-800);
-    border: 1px solid var(--p-form-field-border-color);
-    border-radius: 10px;
-  }
-
-  .maskEditor_topPanelIconButton_dark:hover {
-      background-color: var(--p-surface-900);
-  }
-
-  .maskEditor_topPanelIconButton_dark svg {
-    width: 25px;
-    height: 25px;
-    pointer-events: none;
-    fill: var(--input-text);
-  }
-
-  .maskEditor_topPanelIconButton_light {
-    width: 50px;
-    height: 30px;
-    pointer-events: auto;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    transition: background-color 0.1s;
-    background: var(--comfy-menu-bg);
-    border: 1px solid var(--p-form-field-border-color);
-    border-radius: 10px;
-  }
-
-  .maskEditor_topPanelIconButton_light:hover {
-      background-color: var(--p-surface-300);
-  }
-
-  .maskEditor_topPanelIconButton_light svg {
-    width: 25px;
-    height: 25px;
-    pointer-events: none;
-    fill: var(--input-text);
-  }
-
-  .maskEditor_topPanelButton_dark {
-    height: 30px;
-    background: var(--p-surface-800);
-    border: 1px solid var(--p-form-field-border-color);
-    border-radius: 10px;
-    color: var(--input-text);
-    font-family: sans-serif;
-    pointer-events: auto;
-    transition: 0.1s;
-    width: 60px;
-  }
-
-  .maskEditor_topPanelButton_dark:hover {
-    background-color: var(--p-surface-900);
-  }
-
-  .maskEditor_topPanelButton_light {
-    height: 30px;
-    background: var(--comfy-menu-bg);
-    border: 1px solid var(--p-form-field-border-color);
-    border-radius: 10px;
-    color: var(--input-text);
-    font-family: sans-serif;
-    pointer-events: auto;
-    transition: 0.1s;
-    width: 60px;
-  }
-
-  .maskEditor_topPanelButton_light:hover {
-    background-color: var(--p-surface-300);
-  }
-
-  .maskEditor_sidePanel_paintBucket_Container {
-    width: 180px;
-    display: flex;
-    flex-direction: column;
-    position: relative;
-  }
-
-  .maskEditor_sidePanel_colorSelect_Container {
-    display: flex;
-    width: 180px;
-    align-items: center;
-    gap: 5px;
-    height: 30px;
-  }
-
-  .maskEditor_sidePanel_colorSelect_tolerance_container {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-    margin-bottom: 10px;
-  }
-
-  .maskEditor_sidePanelContainerColumn {
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-    padding-bottom: 12px;
-  }
-
-  .maskEditor_sidePanelContainerRow {
-    display: flex;
-    flex-direction: row;
-    gap: 10px;
-    align-items: center;
-    min-height: 24px;
-    position: relative;
-  }
-
-  .maskEditor_accent_bg_dark {
-    background: var(--p-surface-800);
-  }
-
-  .maskEditor_accent_bg_very_dark {
-    background: var(--p-surface-900);
-  }
-
-  .maskEditor_accent_bg_light {
-    background: var(--p-surface-300);
-  }
-
-  .maskEditor_accent_bg_very_light {
-    background: var(--comfy-menu-bg);
-  }
-
-
-  .maskEditor_sidePanelToggleContainer {
-    cursor: pointer;
-    display: inline-block;
-    position: absolute;
-    right: 0;
-  }
-
-  .maskEditor_sidePanelToggleSwitch {
-    display: inline-block;
-    border-radius: 16px;
-    width: 40px;
-    height: 24px;
-    position: relative;
-    vertical-align: middle;
-    transition: background 0.25s;
-    background: var(--p-surface-300);
-  }
-
-  .dark-theme .maskEditor_sidePanelToggleSwitch {
-    background: var(--p-surface-700);
-  }
-
-  .maskEditor_sidePanelToggleSwitch::before, .maskEditor_sidePanelToggleSwitch::after {
-    content: "";
-  }
-  .maskEditor_sidePanelToggleSwitch::before {
-    display: block;
-    background: linear-gradient(to bottom, #fff 0%, #eee 100%);
-    border-radius: 50%;
-    width: 16px;
-    height: 16px;
-    position: absolute;
-    top: 4px;
-    left: 4px;
-    transition: ease 0.2s;
-  }
-  .maskEditor_sidePanelToggleContainer:hover .maskEditor_sidePanelToggleSwitch::before {
-    background: linear-gradient(to bottom, #fff 0%, #fff 100%);
-  }
-  .maskEditor_sidePanelToggleCheckbox:checked + .maskEditor_sidePanelToggleSwitch {
-    background: var(--p-button-text-primary-color);
-  }
-  .maskEditor_sidePanelToggleCheckbox:checked + .maskEditor_sidePanelToggleSwitch::before {
-    background: var(--comfy-menu-bg);
-    left: 20px;
-  }
-  .dark-theme .maskEditor_sidePanelToggleCheckbox:checked + .maskEditor_sidePanelToggleSwitch::before {
-    background: var(--p-surface-900);
-  }
-
-  .maskEditor_sidePanelToggleCheckbox {
-    position: absolute;
-    visibility: hidden;
-  }
-
-  .maskEditor_sidePanelDropdown {
-    border: 1px solid var(--p-form-field-border-color);
-    background: var(--comfy-menu-bg);
-    height: 24px;
-    padding-left: 5px;
-    padding-right: 5px;
-    border-radius: 6px;
-    transition: background 0.1s;
-  }
-
-  .maskEditor_sidePanelDropdown option {
-    background: var(--comfy-menu-bg);
-  }
-
-  .maskEditor_sidePanelDropdown:focus {
-    outline: 1px solid var(--p-surface-300);
-  }
-
-  .maskEditor_sidePanelDropdown option:hover {
-    background: white;
-  }
-  .maskEditor_sidePanelDropdown option:active {
-    background: var(--p-surface-300);
-  }
-
-  .dark-theme .maskEditor_sidePanelDropdown {
-    background: var(--p-surface-900);
-  }
-
-  .dark-theme .maskEditor_sidePanelDropdown option {
-    background: var(--p-surface-900);
-  }
-
-  .dark-theme .maskEditor_sidePanelDropdown:focus {
-    outline: 1px solid var(--p-button-text-primary-color);
-  }
-
-  .dark-theme .maskEditor_sidePanelDropdown option:active {
-    background: var(--p-highlight-background);
-  }
-
-  .maskEditor_layerRow {
-    height: 50px;
-    width: 100%;
-    border-radius: 10px;
-  }
-
-  .maskEditor_sidePanelLayerPreviewContainer {
-    width: 40px;
-    height: 30px;
-  }
-
-  .maskEditor_sidePanelLayerPreviewContainer > svg{
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
-    fill: var(--p-surface-100);
-  }
-
-  .maskEditor_sidePanelImageLayerImage {
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
-  }
-
-  .maskEditor_sidePanelSubTitle {
-    text-align: left;
-    font-size: 12px;
-    font-family: sans-serif;
-    color: var(--descrip-text);
-  }
-
-  .maskEditor_containerDropdown {
-    position: absolute;
-    right: 0;
-  }
-
-  .maskEditor_sidePanelLayerCheckbox {
-    margin-left: 15px;
-  }
-/* ===================== End of Mask Editor Styles ===================== */

playwright.config.ts

@@ -1,32 +1,27 @@
 import { defineConfig, devices } from '@playwright/test'
-import type { PlaywrightTestConfig } from '@playwright/test'
-
-const maybeLocalOptions: PlaywrightTestConfig = process.env.PLAYWRIGHT_LOCAL
-  ? {
-      // VERY HELPFUL: Skip screenshot tests locally
-      // grep: process.env.CI ? undefined : /^(?!.*screenshot).*$/,
-      timeout: 30_000, // Longer timeout for breakpoints
-      retries: 0, // No retries while debugging. Increase if writing new tests. that may be flaky.
-      workers: 1, // Single worker for easier debugging. Increase to match CPU cores if you want to run a lot of tests in parallel.
-
-      use: {
-        trace: 'on', // Always capture traces (CI uses 'on-first-retry')
-        video: 'on' // Always record video (CI uses 'retain-on-failure')
-      }
-    }
-  : {
-      retries: process.env.CI ? 3 : 0,
-      use: {
-        trace: 'on-first-retry'
-      }
-    }
 
 export default defineConfig({
   testDir: './browser_tests',
   fullyParallel: true,
   forbidOnly: !!process.env.CI,
   reporter: 'html',
-  ...maybeLocalOptions,
+  // /* // Toggle for [LOCAL] testing.
+  retries: process.env.CI ? 3 : 0,
+  use: {
+    trace: 'on-first-retry'
+  },
+  /*/ // [LOCAL]
+  // VERY HELPFUL: Skip screenshot tests locally
+  // grep: process.env.CI ? undefined : /^(?!.*screenshot).*$/,
+  timeout: 30_000, // Longer timeout for breakpoints
+  retries: 0, // No retries while debugging. Increase if writing new tests. that may be flaky.
+  workers: 4, // Single worker for easier debugging. Increase to match CPU cores if you want to run a lot of tests in parallel.
+
+  use: {
+    trace: 'on', // Always capture traces (CI uses 'on-first-retry')
+    video: 'on' // Always record video (CI uses 'retain-on-failure')
+  },
+  //*/
 
   globalSetup: './browser_tests/globalSetup.ts',
   globalTeardown: './browser_tests/globalTeardown.ts',

pnpm-lock.yaml

@@ -12,15 +12,9 @@ catalogs:
     '@eslint/js':
       specifier: ^9.35.0
       version: 9.35.0
-    '@iconify-json/lucide':
-      specifier: ^1.1.178
-      version: 1.2.66
     '@iconify/json':
       specifier: ^2.2.380
       version: 2.2.380
-    '@iconify/tailwind':
-      specifier: ^1.1.3
-      version: 1.2.0
     '@intlify/eslint-plugin-vue-i18n':
       specifier: ^4.1.0
       version: 4.1.0
@@ -147,9 +141,6 @@ catalogs:
     eslint-plugin-import-x:
       specifier: ^4.16.1
       version: 4.16.1
-    eslint-plugin-oxlint:
-      specifier: 1.25.0
-      version: 1.25.0
     eslint-plugin-prettier:
       specifier: ^5.5.4
       version: 5.5.4
@@ -195,12 +186,6 @@ catalogs:
     nx:
       specifier: 21.4.1
       version: 21.4.1
-    oxlint:
-      specifier: ^1.25.0
-      version: 1.28.0
-    oxlint-tsgolint:
-      specifier: ^0.4.0
-      version: 0.4.0
     picocolors:
       specifier: ^1.1.1
       version: 1.1.1
@@ -570,9 +555,6 @@ importers:
       eslint-plugin-import-x:
         specifier: 'catalog:'
         version: 4.16.1(@typescript-eslint/utils@8.44.0(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2))(eslint-import-resolver-node@0.3.9)(eslint@9.35.0(jiti@2.4.2))
-      eslint-plugin-oxlint:
-        specifier: 'catalog:'
-        version: 1.25.0
       eslint-plugin-prettier:
         specifier: 'catalog:'
         version: 5.5.4(eslint-config-prettier@10.1.8(eslint@9.35.0(jiti@2.4.2)))(eslint@9.35.0(jiti@2.4.2))(prettier@3.6.2)
@@ -618,12 +600,6 @@ importers:
       nx:
         specifier: 'catalog:'
         version: 21.4.1
-      oxlint:
-        specifier: 'catalog:'
-        version: 1.28.0(oxlint-tsgolint@0.4.0)
-      oxlint-tsgolint:
-        specifier: 'catalog:'
-        version: 0.4.0
       picocolors:
         specifier: 'catalog:'
         version: 1.1.1
@@ -2553,76 +2529,6 @@ packages:
     cpu: [x64]
     os: [win32]
 
-  '@oxlint-tsgolint/darwin-arm64@0.4.0':
-    resolution: {integrity: sha512-2jNvhxs6JJy93Z4SQ/VErODBzZtFKxQ+sybcKYcw5/K41tXOiBbJSwBMZ2PPvivCVkVcyOkJvfs5UXWW7o79uw==}
-    cpu: [arm64]
-    os: [darwin]
-
-  '@oxlint-tsgolint/darwin-x64@0.4.0':
-    resolution: {integrity: sha512-6A+YBecdZhk2NJ8Dh3kRkR6htNekDmAopFkdyrtNvsHJs5qNNuwUv5RZlVMYiaQTh/Y/tZ0YWE4+cVdqPIEyxQ==}
-    cpu: [x64]
-    os: [darwin]
-
-  '@oxlint-tsgolint/linux-arm64@0.4.0':
-    resolution: {integrity: sha512-JaX8JfQnY3UwX7l6BXIjhEaJAVeKVASELLFCdoo5+DOHgPuiiSKcxCVgTl92WPAuS0TYFXOgqOg31WXkvdi8bQ==}
-    cpu: [arm64]
-    os: [linux]
-
-  '@oxlint-tsgolint/linux-x64@0.4.0':
-    resolution: {integrity: sha512-iu106lxV1O64O4vK2eRoIuY2iHuil/hyDNKLRNVaTg1un+yoxN6/C5uxrJix/EJ+1O27P9c+sXmMplcmbXujtg==}
-    cpu: [x64]
-    os: [linux]
-
-  '@oxlint-tsgolint/win32-arm64@0.4.0':
-    resolution: {integrity: sha512-KTp9EzkTCGAh4/sL3l5a9otX63TvTs5riBcrcqu0jYS3P762rZSezzMMDc0Ld51x+I37125p9+bue2vmlH/KbQ==}
-    cpu: [arm64]
-    os: [win32]
-
-  '@oxlint-tsgolint/win32-x64@0.4.0':
-    resolution: {integrity: sha512-ioyBLHx0HA+hn5of8mhnA8W8DWQyJEHc7SBvwku0EW9bWt7zvBtWRJfx1YilvM+KVBdLVX731qeofdJT1fbJiQ==}
-    cpu: [x64]
-    os: [win32]
-
-  '@oxlint/darwin-arm64@1.28.0':
-    resolution: {integrity: sha512-H7J41/iKbgm7tTpdSnA/AtjEAhxyzNzCMKWtKU5wDuP2v39jrc3fasQEJruk6hj1YXPbJY4N+1nK/jE27GMGDQ==}
-    cpu: [arm64]
-    os: [darwin]
-
-  '@oxlint/darwin-x64@1.28.0':
-    resolution: {integrity: sha512-bGsSDEwpyYzNc6FIwhTmbhSK7piREUjMlmWBt7eoR3ract0+RfhZYYG4se1Ngs+4WOFC0B3gbv23fyF+cnbGGQ==}
-    cpu: [x64]
-    os: [darwin]
-
-  '@oxlint/linux-arm64-gnu@1.28.0':
-    resolution: {integrity: sha512-eNH/evMpV3xAA4jIS8dMLcGkM/LK0WEHM0RO9bxrHPAwfS72jhyPJtd0R7nZhvhG6U1bhn5jhoXbk1dn27XIAQ==}
-    cpu: [arm64]
-    os: [linux]
-
-  '@oxlint/linux-arm64-musl@1.28.0':
-    resolution: {integrity: sha512-ickvpcekNeRLND3llndiZOtJBb6LDZqNnZICIDkovURkOIWPGJGmAxsHUOI6yW6iny9gLmIEIGl/c1b5nFk6Ag==}
-    cpu: [arm64]
-    os: [linux]
-
-  '@oxlint/linux-x64-gnu@1.28.0':
-    resolution: {integrity: sha512-DkgAh4LQ8NR3DwTT7/LGMhaMau0RtZkih91Ez5Usk7H7SOxo1GDi84beE7it2Q+22cAzgY4hbw3c6svonQTjxg==}
-    cpu: [x64]
-    os: [linux]
-
-  '@oxlint/linux-x64-musl@1.28.0':
-    resolution: {integrity: sha512-VBnMi3AJ2w5p/kgeyrjcGOKNY8RzZWWvlGHjCJwzqPgob4MXu6T+5Yrdi7EVJyIlouL8E3LYPYjmzB9NBi9gZw==}
-    cpu: [x64]
-    os: [linux]
-
-  '@oxlint/win32-arm64@1.28.0':
-    resolution: {integrity: sha512-tomhIks+4dKs8axB+s4GXHy+ZWXhUgptf1XnG5cZg8CzRfX4JFX9k8l2fPUgFwytWnyyvZaaXLRPWGzoZ6yoHQ==}
-    cpu: [arm64]
-    os: [win32]
-
-  '@oxlint/win32-x64@1.28.0':
-    resolution: {integrity: sha512-4+VO5P/UJ2nq9sj6kQToJxFy5cKs7dGIN2DiUSQ7cqyUi7EKYNQKe+98HFcDOjtm33jQOQnc4kw8Igya5KPozg==}
-    cpu: [x64]
-    os: [win32]
-
   '@phenomnomnominal/tsquery@5.0.1':
     resolution: {integrity: sha512-3nVv+e2FQwsW8Aw6qTU6f+1rfcJ3hrcnvH/mu9i8YhxO+9sqbOfpL8m6PbET5+xKOlz/VSbp0RoYWYCtIsnmuA==}
     peerDependencies:
@@ -4826,9 +4732,6 @@ packages:
       '@typescript-eslint/parser':
         optional: true
 
-  eslint-plugin-oxlint@1.25.0:
-    resolution: {integrity: sha512-grS4KdR9FAxoQC+wMkepeQHL4osMhoYfUI11Pot6Gitqr4wWi+JZrX0Shr8Bs9fjdWhEjtaZIV6cr4mbfytmyw==}
-
   eslint-plugin-prettier@5.5.4:
     resolution: {integrity: sha512-swNtI95SToIz05YINMA6Ox5R057IMAmWZ26GqPxusAp1TZzj+IdY9tXNWWD3vkF/wEqydCONcwjTFpxybBqZsg==}
     engines: {node: ^14.18.0 || >=16.0.0}
@@ -5789,9 +5692,6 @@ packages:
   jsonc-parser@3.2.0:
     resolution: {integrity: sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==}
 
-  jsonc-parser@3.3.1:
-    resolution: {integrity: sha512-HUgH65KyejrUFPvHFPbqOY0rsFip3Bo5wb4ngvdi1EpCYWUQDC5V+Y7mZws+DLkr4M//zQJoanu1SP+87Dv1oQ==}
-
   jsondiffpatch@0.6.0:
     resolution: {integrity: sha512-3QItJOXp2AP1uv7waBkao5nCvhEv+QmJAd38Ybq7wNI74Q+BBmnLn4EDKz6yI9xGAIQoUF87qHt+kc1IVxB4zQ==}
     engines: {node: ^18.0.0 || >=20.0.0}
@@ -6486,20 +6386,6 @@ packages:
   oxc-resolver@11.6.1:
     resolution: {integrity: sha512-WQgmxevT4cM5MZ9ioQnEwJiHpPzbvntV5nInGAKo9NQZzegcOonHvcVcnkYqld7bTG35UFHEKeF7VwwsmA3cZg==}
 
-  oxlint-tsgolint@0.4.0:
-    resolution: {integrity: sha512-RpvLxPvSt0Xzr3frTiw5rP6HUW0djZ2uNdzHc8Pv556sbTnFWXmLdK8FRqqy7vVXZTkoVSdY3PsvOsVAqGjc+Q==}
-    hasBin: true
-
-  oxlint@1.28.0:
-    resolution: {integrity: sha512-gE97d0BcIlTTSJrim395B49mIbQ9VO8ZVoHdWai7Svl+lEeUAyCLTN4d7piw1kcB8VfgTp1JFVlAvMPD9GewMA==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    hasBin: true
-    peerDependencies:
-      oxlint-tsgolint: '>=0.4.0'
-    peerDependenciesMeta:
-      oxlint-tsgolint:
-        optional: true
-
   p-limit@3.1.0:
     resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
     engines: {node: '>=10'}
@@ -7812,8 +7698,8 @@ packages:
   vue-component-type-helpers@3.1.1:
     resolution: {integrity: sha512-B0kHv7qX6E7+kdc5nsaqjdGZ1KwNKSUQDWGy7XkTYT7wFsOpkEyaJ1Vq79TjwrrtuLRgizrTV7PPuC4rRQo+vw==}
 
-  vue-component-type-helpers@3.1.3:
-    resolution: {integrity: sha512-V1dOD8XYfstOKCnXbWyEJIrhTBMwSyNjv271L1Jlx9ExpNlCSuqOs3OdWrGJ0V544zXufKbcYabi/o+gK8lyfQ==}
+  vue-component-type-helpers@3.1.2:
+    resolution: {integrity: sha512-ch3/SKBtxdZq18vsEntiGCdSszCRNfhX5QaTxjSacCAXLlNQRXfXo+ANjoQEYJMsJOJy1/vHF6Tkc4s85MS+zw==}
 
   vue-demi@0.14.10:
     resolution: {integrity: sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==}
@@ -10206,48 +10092,6 @@ snapshots:
   '@oxc-resolver/binding-win32-x64-msvc@11.6.1':
     optional: true
 
-  '@oxlint-tsgolint/darwin-arm64@0.4.0':
-    optional: true
-
-  '@oxlint-tsgolint/darwin-x64@0.4.0':
-    optional: true
-
-  '@oxlint-tsgolint/linux-arm64@0.4.0':
-    optional: true
-
-  '@oxlint-tsgolint/linux-x64@0.4.0':
-    optional: true
-
-  '@oxlint-tsgolint/win32-arm64@0.4.0':
-    optional: true
-
-  '@oxlint-tsgolint/win32-x64@0.4.0':
-    optional: true
-
-  '@oxlint/darwin-arm64@1.28.0':
-    optional: true
-
-  '@oxlint/darwin-x64@1.28.0':
-    optional: true
-
-  '@oxlint/linux-arm64-gnu@1.28.0':
-    optional: true
-
-  '@oxlint/linux-arm64-musl@1.28.0':
-    optional: true
-
-  '@oxlint/linux-x64-gnu@1.28.0':
-    optional: true
-
-  '@oxlint/linux-x64-musl@1.28.0':
-    optional: true
-
-  '@oxlint/win32-arm64@1.28.0':
-    optional: true
-
-  '@oxlint/win32-x64@1.28.0':
-    optional: true
-
   '@phenomnomnominal/tsquery@5.0.1(typescript@5.9.2)':
     dependencies:
       esquery: 1.6.0
@@ -10614,7 +10458,7 @@ snapshots:
       storybook: 9.1.6(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2))
       type-fest: 2.19.0
       vue: 3.5.13(typescript@5.9.2)
-      vue-component-type-helpers: 3.1.3
+      vue-component-type-helpers: 3.1.2
 
   '@swc/helpers@0.5.17':
     dependencies:
@@ -12672,10 +12516,6 @@ snapshots:
       - supports-color
     optional: true
 
-  eslint-plugin-oxlint@1.25.0:
-    dependencies:
-      jsonc-parser: 3.3.1
-
   eslint-plugin-prettier@5.5.4(eslint-config-prettier@10.1.8(eslint@9.35.0(jiti@2.4.2)))(eslint@9.35.0(jiti@2.4.2))(prettier@3.6.2):
     dependencies:
       eslint: 9.35.0(jiti@2.4.2)
@@ -13741,8 +13581,6 @@ snapshots:
 
   jsonc-parser@3.2.0: {}
 
-  jsonc-parser@3.3.1: {}
-
   jsondiffpatch@0.6.0:
     dependencies:
       '@types/diff-match-patch': 1.0.36
@@ -14710,27 +14548,6 @@ snapshots:
       '@oxc-resolver/binding-win32-ia32-msvc': 11.6.1
       '@oxc-resolver/binding-win32-x64-msvc': 11.6.1
 
-  oxlint-tsgolint@0.4.0:
-    optionalDependencies:
-      '@oxlint-tsgolint/darwin-arm64': 0.4.0
-      '@oxlint-tsgolint/darwin-x64': 0.4.0
-      '@oxlint-tsgolint/linux-arm64': 0.4.0
-      '@oxlint-tsgolint/linux-x64': 0.4.0
-      '@oxlint-tsgolint/win32-arm64': 0.4.0
-      '@oxlint-tsgolint/win32-x64': 0.4.0
-
-  oxlint@1.28.0(oxlint-tsgolint@0.4.0):
-    optionalDependencies:
-      '@oxlint/darwin-arm64': 1.28.0
-      '@oxlint/darwin-x64': 1.28.0
-      '@oxlint/linux-arm64-gnu': 1.28.0
-      '@oxlint/linux-arm64-musl': 1.28.0
-      '@oxlint/linux-x64-gnu': 1.28.0
-      '@oxlint/linux-x64-musl': 1.28.0
-      '@oxlint/win32-arm64': 1.28.0
-      '@oxlint/win32-x64': 1.28.0
-      oxlint-tsgolint: 0.4.0
-
   p-limit@3.1.0:
     dependencies:
       yocto-queue: 0.1.0
@@ -16340,7 +16157,7 @@ snapshots:
 
   vue-component-type-helpers@3.1.1: {}
 
-  vue-component-type-helpers@3.1.3: {}
+  vue-component-type-helpers@3.1.2: {}
 
   vue-demi@0.14.10(vue@3.5.13(typescript@5.9.2)):
     dependencies:

pnpm-workspace.yaml

@@ -50,7 +50,6 @@ catalog:
   eslint-config-prettier: ^10.1.8
   eslint-import-resolver-typescript: ^4.4.4
   eslint-plugin-import-x: ^4.16.1
-  eslint-plugin-oxlint: 1.25.0
   eslint-plugin-prettier: ^5.5.4
   eslint-plugin-storybook: ^9.1.6
   eslint-plugin-unused-imports: ^4.2.0
@@ -66,8 +65,6 @@ catalog:
   markdown-table: ^3.0.4
   mixpanel-browser: ^2.71.0
   nx: 21.4.1
-  oxlint: ^1.25.0
-  oxlint-tsgolint: ^0.4.0
   picocolors: ^1.1.1
   pinia: ^2.1.7
   postcss-html: ^1.8.0

scripts/cicd/check-yaml.sh

@@ -1,14 +0,0 @@
-#!/usr/bin/env bash
-set -euo pipefail
-
-ROOT_DIR="$(git rev-parse --show-toplevel)"
-cd "$ROOT_DIR"
-
-mapfile -t yaml_files < <(git ls-files '*.yml' '*.yaml')
-
-if [[ ${#yaml_files[@]} -eq 0 ]]; then
-  echo "No YAML files found to lint"
-  exit 0
-fi
-
-yamllint --config-file .yamllint "${yaml_files[@]}"

src/components/button/IconTextButton.vue

@@ -32,7 +32,7 @@ defineOptions({
 interface IconTextButtonProps extends BaseButtonProps {
   iconPosition?: 'left' | 'right'
   label: string
-  onClick?: () => void
+  onClick: () => void
 }
 
 const {

src/components/common/ElectronFileDownload.vue

@@ -12,7 +12,7 @@
         </div>
       </div>
 
-      <div class="file-action flex flex-row items-center gap-2">
+      <div class="file-action">
         <Button
           v-if="status === null || status === 'error'"
           class="file-action-button"
@@ -23,13 +23,6 @@
           icon="pi pi-download"
           @click="triggerDownload"
         />
-        <Button
-          v-if="(status === null || status === 'error') && !!props.url"
-          :label="$t('g.copyURL')"
-          size="small"
-          outlined
-          @click="copyURL"
-        />
       </div>
     </div>
     <div
@@ -87,7 +80,6 @@ import ProgressBar from 'primevue/progressbar'
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
 import { useDownload } from '@/composables/useDownload'
 import { useElectronDownloadStore } from '@/stores/electronDownloadStore'
 import { formatSize } from '@/utils/formatUtil'
@@ -108,7 +100,6 @@ const status = ref<string | null>(null)
 const fileSize = computed(() =>
   download.fileSize.value ? formatSize(download.fileSize.value) : '?'
 )
-const { copyToClipboard } = useCopyToClipboard()
 const electronDownloadStore = useElectronDownloadStore()
 // @ts-expect-error fixme ts strict error
 const [savePath, filename] = props.label.split('/')
@@ -135,8 +126,4 @@ const triggerDownload = async () => {
 const triggerCancelDownload = () => electronDownloadStore.cancel(props.url)
 const triggerPauseDownload = () => electronDownloadStore.pause(props.url)
 const triggerResumeDownload = () => electronDownloadStore.resume(props.url)
-
-const copyURL = async () => {
-  await copyToClipboard(props.url)
-}
 </script>

src/components/dialog/content/ApiNodesSignInContent.vue

@@ -29,10 +29,7 @@
 import Button from 'primevue/button'
 import { useI18n } from 'vue-i18n'
 
-import { useExternalLink } from '@/composables/useExternalLink'
-
 const { t } = useI18n()
-const { buildDocsUrl } = useExternalLink()
 
 const { apiNodeNames, onLogin, onCancel } = defineProps<{
   apiNodeNames: string[]
@@ -41,9 +38,6 @@ const { apiNodeNames, onLogin, onCancel } = defineProps<{
 }>()
 
 const handleLearnMoreClick = () => {
-  window.open(
-    buildDocsUrl('/tutorials/api-nodes/faq', { includeLocale: true }),
-    '_blank'
-  )
+  window.open('https://docs.comfy.org/tutorials/api-nodes/faq', '_blank')
 }
 </script>

src/components/dialog/content/LoadWorkflowWarning.vue

@@ -1,42 +1,39 @@
 <template>
-  <!-- Cloud mode: Learn More + Got It buttons -->
-  <div
-    v-if="isCloud"
-    class="flex w-full items-center justify-between gap-2 py-2 px-4"
+  <NoResultsPlaceholder
+    class="pb-0"
+    icon="pi pi-exclamation-circle"
+    :title="$t('loadWorkflowWarning.missingNodesTitle')"
+    :message="$t('loadWorkflowWarning.missingNodesDescription')"
+  />
+  <MissingCoreNodesMessage :missing-core-nodes="missingCoreNodes" />
+  <ListBox
+    :options="uniqueNodes"
+    option-label="label"
+    scroll-height="100%"
+    class="comfy-missing-nodes"
+    :pt="{
+      list: { class: 'border-none' }
+    }"
   >
-    <IconTextButton
-      :label="$t('missingNodes.cloud.learnMore')"
-      type="transparent"
-      size="sm"
-      icon-position="left"
-      as="a"
-      href="https://www.comfy.org/cloud"
-      target="_blank"
-      rel="noopener noreferrer"
-    >
-      <template #icon>
-        <i class="icon-[lucide--info]"></i>
-      </template>
-    </IconTextButton>
-    <TextButton
-      :label="$t('missingNodes.cloud.gotIt')"
-      type="secondary"
-      size="md"
-      @click="handleGotItClick"
-    />
-  </div>
-
-  <!-- OSS mode: Open Manager + Install All buttons -->
-  <div v-else-if="showManagerButtons" class="flex justify-end gap-1 py-2 px-4">
-    <TextButton
-      :label="$t('g.openManager')"
-      type="transparent"
-      size="sm"
-      @click="openManager"
-    />
+    <template #option="slotProps">
+      <div class="align-items-center flex">
+        <span class="node-type">{{ slotProps.option.label }}</span>
+        <span v-if="slotProps.option.hint" class="node-hint">{{
+          slotProps.option.hint
+        }}</span>
+        <Button
+          v-if="slotProps.option.action"
+          :label="slotProps.option.action.text"
+          size="small"
+          outlined
+          @click="slotProps.option.action.callback"
+        />
+      </div>
+    </template>
+  </ListBox>
+  <div v-if="showManagerButtons" class="flex justify-end py-3">
     <PackInstallButton
       v-if="showInstallAllButton"
-      type="secondary"
       size="md"
       :disabled="
         isLoading || !!error || missingNodePacks.length === 0 || isInstalling
@@ -49,32 +46,40 @@
           : $t('manager.installAllMissingNodes')
       "
     />
+    <Button
+      :label="$t('g.openManager')"
+      size="small"
+      outlined
+      @click="openManager"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
+import Button from 'primevue/button'
+import ListBox from 'primevue/listbox'
 import { computed, nextTick, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import IconTextButton from '@/components/button/IconTextButton.vue'
-import TextButton from '@/components/button/TextButton.vue'
-import { isCloud } from '@/platform/distribution/types'
+import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
+import MissingCoreNodesMessage from '@/components/dialog/content/MissingCoreNodesMessage.vue'
 import { useToastStore } from '@/platform/updates/common/toastStore'
 import { useDialogStore } from '@/stores/dialogStore'
+import type { MissingNodeType } from '@/types/comfy'
 import PackInstallButton from '@/workbench/extensions/manager/components/manager/button/PackInstallButton.vue'
 import { useMissingNodes } from '@/workbench/extensions/manager/composables/nodePack/useMissingNodes'
 import { useManagerState } from '@/workbench/extensions/manager/composables/useManagerState'
 import { useComfyManagerStore } from '@/workbench/extensions/manager/stores/comfyManagerStore'
 import { ManagerTab } from '@/workbench/extensions/manager/types/comfyManagerTypes'
 
-const dialogStore = useDialogStore()
-const { t } = useI18n()
+const props = defineProps<{
+  missingNodeTypes: MissingNodeType[]
+}>()
 
-const handleGotItClick = () => {
-  dialogStore.closeDialog({ key: 'global-missing-nodes' })
-}
+// Get missing node packs from workflow with loading and error states
+const { missingNodePacks, isLoading, error, missingCoreNodes } =
+  useMissingNodes()
 
-const { missingNodePacks, isLoading, error } = useMissingNodes()
 const comfyManagerStore = useComfyManagerStore()
 const managerState = useManagerState()
 
@@ -86,6 +91,27 @@ const isInstalling = computed(() => {
   )
 })
 
+const uniqueNodes = computed(() => {
+  const seenTypes = new Set()
+  return props.missingNodeTypes
+    .filter((node) => {
+      const type = typeof node === 'object' ? node.type : node
+      if (seenTypes.has(type)) return false
+      seenTypes.add(type)
+      return true
+    })
+    .map((node) => {
+      if (typeof node === 'object') {
+        return {
+          label: node.type,
+          hint: node.hint,
+          action: node.action
+        }
+      }
+      return { label: node }
+    })
+})
+
 // Show manager buttons unless manager is disabled
 const showManagerButtons = computed(() => {
   return managerState.shouldShowManagerButtons.value
@@ -103,6 +129,9 @@ const openManager = async () => {
   })
 }
 
+const { t } = useI18n()
+const dialogStore = useDialogStore()
+
 // Computed to check if all missing nodes have been installed
 const allMissingNodesInstalled = computed(() => {
   return (
@@ -111,14 +140,13 @@ const allMissingNodesInstalled = computed(() => {
     missingNodePacks.value?.length === 0
   )
 })
-
-// Watch for completion and close dialog (OSS mode only)
+// Watch for completion and close dialog
 watch(allMissingNodesInstalled, async (allInstalled) => {
-  if (!isCloud && allInstalled && showInstallAllButton.value) {
+  if (allInstalled && showInstallAllButton.value) {
     // Use nextTick to ensure state updates are complete
     await nextTick()
 
-    dialogStore.closeDialog({ key: 'global-missing-nodes' })
+    dialogStore.closeDialog({ key: 'global-load-workflow-warning' })
 
     // Show success toast
     useToastStore().add({
@@ -130,3 +158,20 @@ watch(allMissingNodesInstalled, async (allInstalled) => {
   }
 })
 </script>
+
+<style scoped>
+.comfy-missing-nodes {
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+.node-hint {
+  margin-left: 0.5rem;
+  font-style: italic;
+  color: var(--text-color-secondary);
+}
+
+:deep(.p-button) {
+  margin-left: auto;
+}
+</style>

src/components/dialog/content/MissingCoreNodesMessage.vue

@@ -49,14 +49,14 @@ import { computed } from 'vue'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { useSystemStatsStore } from '@/stores/systemStatsStore'
 
-const { missingCoreNodes } = defineProps<{
+const props = defineProps<{
   missingCoreNodes: Record<string, LGraphNode[]>
 }>()
 
 const systemStatsStore = useSystemStatsStore()
 
 const hasMissingCoreNodes = computed(() => {
-  return Object.keys(missingCoreNodes).length > 0
+  return Object.keys(props.missingCoreNodes).length > 0
 })
 
 // Use computed for reactive version tracking
@@ -66,7 +66,7 @@ const currentComfyUIVersion = computed<string | null>(() => {
 })
 
 const sortedMissingCoreNodes = computed(() => {
-  return Object.entries(missingCoreNodes).sort(([a], [b]) => {
+  return Object.entries(props.missingCoreNodes).sort(([a], [b]) => {
     // Sort by version in descending order (newest first)
     return compare(b, a) // Reversed for descending order
   })

src/components/dialog/content/MissingNodesContent.vue

@@ -1,83 +0,0 @@
-<template>
-  <div
-    class="flex w-[490px] flex-col border-t-1 border-b-1 border-border-default"
-  >
-    <div class="flex h-full w-full flex-col gap-4 p-4">
-      <!-- Description -->
-      <div>
-        <p class="m-0 text-sm leading-4 text-muted-foreground">
-          {{
-            isCloud
-              ? $t('missingNodes.cloud.description')
-              : $t('missingNodes.oss.description')
-          }}
-        </p>
-      </div>
-      <MissingCoreNodesMessage v-if="!isCloud" :missing-core-nodes />
-
-      <!-- Missing Nodes List Wrapper -->
-      <div
-        class="comfy-missing-nodes flex flex-col max-h-[256px] rounded-lg py-2 scrollbar-custom bg-secondary-background"
-      >
-        <div
-          v-for="(node, i) in uniqueNodes"
-          :key="i"
-          class="flex min-h-8 items-center justify-between px-4 py-2 bg-secondary-background text-muted-foreground"
-        >
-          <span class="text-xs">
-            {{ node.label }}
-          </span>
-          <span v-if="node.hint" class="text-xs">{{ node.hint }}</span>
-        </div>
-      </div>
-
-      <!-- Bottom instruction -->
-      <div>
-        <p class="m-0 text-sm leading-4 text-muted-foreground">
-          {{
-            isCloud
-              ? $t('missingNodes.cloud.replacementInstruction')
-              : $t('missingNodes.oss.replacementInstruction')
-          }}
-        </p>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-
-import MissingCoreNodesMessage from '@/components/dialog/content/MissingCoreNodesMessage.vue'
-import { isCloud } from '@/platform/distribution/types'
-import type { MissingNodeType } from '@/types/comfy'
-import { useMissingNodes } from '@/workbench/extensions/manager/composables/nodePack/useMissingNodes'
-
-const props = defineProps<{
-  missingNodeTypes: MissingNodeType[]
-}>()
-
-// Get missing core nodes for OSS mode
-const { missingCoreNodes } = useMissingNodes()
-
-const uniqueNodes = computed(() => {
-  const seenTypes = new Set()
-  return props.missingNodeTypes
-    .filter((node) => {
-      const type = typeof node === 'object' ? node.type : node
-      if (seenTypes.has(type)) return false
-      seenTypes.add(type)
-      return true
-    })
-    .map((node) => {
-      if (typeof node === 'object') {
-        return {
-          label: node.type,
-          hint: node.hint,
-          action: node.action
-        }
-      }
-      return { label: node }
-    })
-})
-</script>

src/components/dialog/content/MissingNodesHeader.vue

@@ -1,18 +0,0 @@
-<template>
-  <div class="flex w-full items-center justify-between p-4">
-    <div class="flex items-center gap-2">
-      <i class="icon-[lucide--triangle-alert] text-gold-600"></i>
-      <p class="m-0 text-sm">
-        {{
-          isCloud
-            ? $t('missingNodes.cloud.title')
-            : $t('missingNodes.oss.title')
-        }}
-      </p>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { isCloud } from '@/platform/distribution/types'
-</script>

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

@@ -123,7 +123,6 @@ import { computed, ref, watch } from 'vue'
 import UserCredit from '@/components/common/UserCredit.vue'
 import UsageLogsTable from '@/components/dialog/content/setting/UsageLogsTable.vue'
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
-import { useExternalLink } from '@/composables/useExternalLink'
 import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
 import { useTelemetry } from '@/platform/telemetry'
 import { useDialogService } from '@/services/dialogService'
@@ -138,7 +137,6 @@ interface CreditHistoryItemData {
   isPositive: boolean
 }
 
-const { buildDocsUrl } = useExternalLink()
 const dialogService = useDialogService()
 const authStore = useFirebaseAuthStore()
 const authActions = useFirebaseAuthActions()
@@ -185,17 +183,12 @@ const handleMessageSupport = async () => {
 }
 
 const handleFaqClick = () => {
-  window.open(
-    buildDocsUrl('/tutorials/api-nodes/faq', { includeLocale: true }),
-    '_blank'
-  )
+  window.open('https://docs.comfy.org/tutorials/api-nodes/faq', '_blank')
 }
 
 const handleOpenPartnerNodesInfo = () => {
   window.open(
-    buildDocsUrl('/tutorials/api-nodes/overview#api-nodes', {
-      includeLocale: true
-    }),
+    'https://docs.comfy.org/tutorials/api-nodes/overview#api-nodes',
     '_blank'
   )
 }

src/components/graph/GraphCanvas.vue

@@ -452,13 +452,10 @@ onMounted(async () => {
     'Comfy.CustomColorPalettes'
   )
 
-  // Restore saved workflow and workflow tabs state
-  await workflowPersistence.initializeWorkflow()
+  // Restore workflow and workflow tabs state from storage
+  await workflowPersistence.restorePreviousWorkflow()
   workflowPersistence.restoreWorkflowTabsState()
 
-  // Load template from URL if present
-  await workflowPersistence.loadTemplateFromUrlIfPresent()
-
   // Initialize release store to fetch releases from comfy-api (fire-and-forget)
   const { useReleaseStore } = await import(
     '@/platform/updates/common/releaseStore'

src/components/graph/selectionToolbox/BypassButton.vue

@@ -1,7 +1,7 @@
 <template>
   <Button
     v-tooltip.top="{
-      value: $t('commands.Comfy_Canvas_ToggleSelectedNodes_Bypass.label'),
+      value: t('commands.Comfy_Canvas_ToggleSelectedNodes_Bypass.label'),
       showDelay: 1000
     }"
     severity="secondary"
@@ -18,9 +18,11 @@
 
 <script setup lang="ts">
 import Button from 'primevue/button'
+import { useI18n } from 'vue-i18n'
 
 import { useCommandStore } from '@/stores/commandStore'
 
+const { t } = useI18n()
 const commandStore = useCommandStore()
 
 const toggleBypass = async () => {

src/components/graph/selectionToolbox/ConfigureSubgraph.vue

@@ -1,7 +1,7 @@
 <template>
   <Button
     v-tooltip.top="{
-      value: $t('commands.Comfy_Graph_EditSubgraphWidgets.label'),
+      value: $t('Edit Subgraph Widgets'),
       showDelay: 1000
     }"
     severity="secondary"

src/components/graph/selectionToolbox/ConvertToSubgraphButton.vue

@@ -2,7 +2,7 @@
   <Button
     v-if="isUnpackVisible"
     v-tooltip.top="{
-      value: $t('commands.Comfy_Graph_UnpackSubgraph.label'),
+      value: t('commands.Comfy_Graph_UnpackSubgraph.label'),
       showDelay: 1000
     }"
     severity="secondary"
@@ -17,7 +17,7 @@
   <Button
     v-else-if="isConvertVisible"
     v-tooltip.top="{
-      value: $t('commands.Comfy_Graph_ConvertToSubgraph.label'),
+      value: t('commands.Comfy_Graph_ConvertToSubgraph.label'),
       showDelay: 1000
     }"
     severity="secondary"
@@ -34,10 +34,12 @@
 <script setup lang="ts">
 import Button from 'primevue/button'
 import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import { useSelectionState } from '@/composables/graph/useSelectionState'
 import { useCommandStore } from '@/stores/commandStore'
 
+const { t } = useI18n()
 const commandStore = useCommandStore()
 const { isSingleSubgraph, hasAnySelection } = useSelectionState()
 

src/components/graph/selectionToolbox/DeleteButton.vue

@@ -2,7 +2,7 @@
   <Button
     v-show="isDeletable"
     v-tooltip.top="{
-      value: $t('commands.Comfy_Canvas_DeleteSelectedItems.label'),
+      value: t('commands.Comfy_Canvas_DeleteSelectedItems.label'),
       showDelay: 1000
     }"
     severity="secondary"
@@ -17,11 +17,13 @@
 <script setup lang="ts">
 import Button from 'primevue/button'
 import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import { useSelectionState } from '@/composables/graph/useSelectionState'
 import type { Positionable } from '@/lib/litegraph/src/interfaces'
 import { useCommandStore } from '@/stores/commandStore'
 
+const { t } = useI18n()
 const commandStore = useCommandStore()
 const { selectedItems } = useSelectionState()
 

src/components/graph/selectionToolbox/Load3DViewerButton.vue

@@ -1,7 +1,7 @@
 <template>
   <Button
     v-tooltip.top="{
-      value: $t('commands.Comfy_3DViewer_Open3DViewer.label'),
+      value: t('commands.Comfy_3DViewer_Open3DViewer.label'),
       showDelay: 1000
     }"
     severity="secondary"
@@ -15,6 +15,7 @@
 <script setup lang="ts">
 import Button from 'primevue/button'
 
+import { t } from '@/i18n'
 import { useCommandStore } from '@/stores/commandStore'
 
 const commandStore = useCommandStore()

src/components/graph/selectionToolbox/MaskEditorButton.vue

@@ -2,7 +2,7 @@
   <Button
     v-show="isSingleImageNode"
     v-tooltip.top="{
-      value: $t('commands.Comfy_MaskEditor_OpenMaskEditor.label'),
+      value: t('commands.Comfy_MaskEditor_OpenMaskEditor.label'),
       showDelay: 1000
     }"
     severity="secondary"
@@ -17,6 +17,7 @@
 import Button from 'primevue/button'
 
 import { useSelectionState } from '@/composables/graph/useSelectionState'
+import { t } from '@/i18n'
 import { useCommandStore } from '@/stores/commandStore'
 
 const commandStore = useCommandStore()

src/components/graph/selectionToolbox/SaveToSubgraphLibrary.vue

@@ -2,7 +2,7 @@
   <Button
     v-show="isVisible"
     v-tooltip.top="{
-      value: $t('commands.Comfy_PublishSubgraph.label'),
+      value: t('commands.Comfy_PublishSubgraph.label'),
       showDelay: 1000
     }"
     severity="secondary"
@@ -18,11 +18,13 @@
 <script setup lang="ts">
 import Button from 'primevue/button'
 import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import { SubgraphNode } from '@/lib/litegraph/src/litegraph'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useCommandStore } from '@/stores/commandStore'
 
+const { t } = useI18n()
 const commandStore = useCommandStore()
 const canvasStore = useCanvasStore()
 

src/components/helpcenter/HelpCenterMenuContent.vue

@@ -143,7 +143,6 @@ import type { CSSProperties, Component } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import PuzzleIcon from '@/components/icons/PuzzleIcon.vue'
-import { useExternalLink } from '@/composables/useExternalLink'
 import { isCloud } from '@/platform/distribution/types'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useTelemetry } from '@/platform/telemetry'
@@ -169,6 +168,15 @@ interface MenuItem {
 }
 
 // Constants
+const EXTERNAL_LINKS = {
+  DOCS: 'https://docs.comfy.org/',
+  DISCORD: 'https://www.comfy.org/discord',
+  GITHUB: 'https://github.com/comfyanonymous/ComfyUI',
+  DESKTOP_GUIDE_WINDOWS: 'https://docs.comfy.org/installation/desktop/windows',
+  DESKTOP_GUIDE_MACOS: 'https://docs.comfy.org/installation/desktop/macos',
+  UPDATE_GUIDE: 'https://docs.comfy.org/installation/update_comfyui'
+} as const
+
 const TIME_UNITS = {
   MINUTE: 60 * 1000,
   HOUR: 60 * 60 * 1000,
@@ -185,8 +193,7 @@ const SUBMENU_CONFIG = {
 } as const
 
 // Composables
-const { t } = useI18n()
-const { staticUrls, buildDocsUrl } = useExternalLink()
+const { t, locale } = useI18n()
 const releaseStore = useReleaseStore()
 const commandStore = useCommandStore()
 const settingStore = useSettingStore()
@@ -223,12 +230,11 @@ const moreItems = computed<MenuItem[]>(() => {
       visible: isElectron(),
       action: () => {
         trackResourceClick('docs', true)
-        openExternalLink(
-          buildDocsUrl('/installation/desktop', {
-            includeLocale: true,
-            platform: true
-          })
-        )
+        const docsUrl =
+          electronAPI().getPlatform() === 'darwin'
+            ? EXTERNAL_LINKS.DESKTOP_GUIDE_MACOS
+            : EXTERNAL_LINKS.DESKTOP_GUIDE_WINDOWS
+        openExternalLink(docsUrl)
         emit('close')
       }
     },
@@ -280,7 +286,7 @@ const menuItems = computed<MenuItem[]>(() => {
       label: t('helpCenter.docs'),
       action: () => {
         trackResourceClick('docs', true)
-        openExternalLink(buildDocsUrl('/', { includeLocale: true }))
+        openExternalLink(EXTERNAL_LINKS.DOCS)
         emit('close')
       }
     },
@@ -291,7 +297,7 @@ const menuItems = computed<MenuItem[]>(() => {
       label: 'Discord',
       action: () => {
         trackResourceClick('discord', true)
-        openExternalLink(staticUrls.discord)
+        openExternalLink(EXTERNAL_LINKS.DISCORD)
         emit('close')
       }
     },
@@ -302,7 +308,7 @@ const menuItems = computed<MenuItem[]>(() => {
       label: t('helpCenter.github'),
       action: () => {
         trackResourceClick('github', true)
-        openExternalLink(staticUrls.github)
+        openExternalLink(EXTERNAL_LINKS.GITHUB)
         emit('close')
       }
     },
@@ -527,19 +533,25 @@ const onReleaseClick = (release: ReleaseNote): void => {
   trackResourceClick('release_notes', true)
   void releaseStore.handleShowChangelog(release.version)
   const versionAnchor = formatVersionAnchor(release.version)
-  const changelogUrl = `${buildDocsUrl('/changelog', { includeLocale: true })}#${versionAnchor}`
+  const changelogUrl = `${getChangelogUrl()}#${versionAnchor}`
   openExternalLink(changelogUrl)
   emit('close')
 }
 
 const onUpdate = (_: ReleaseNote): void => {
   trackResourceClick('docs', true)
-  openExternalLink(
-    buildDocsUrl('/installation/update_comfyui', { includeLocale: true })
-  )
+  openExternalLink(EXTERNAL_LINKS.UPDATE_GUIDE)
   emit('close')
 }
 
+// Generate language-aware changelog URL
+const getChangelogUrl = (): string => {
+  const isChineseLocale = locale.value === 'zh'
+  return isChineseLocale
+    ? 'https://docs.comfy.org/zh-CN/changelog'
+    : 'https://docs.comfy.org/changelog'
+}
+
 // Lifecycle
 onMounted(async () => {
   telemetry?.trackHelpCenterOpened({ source: 'sidebar' })

src/components/load3d/Load3D.vue

@@ -103,7 +103,7 @@ if (isComponentWidget(props.widget)) {
 const load3DSceneRef = ref<InstanceType<typeof Load3DScene> | null>(null)
 
 const {
-  // configs
+  // config
   sceneConfig,
   modelConfig,
   cameraConfig,

src/components/load3d/Load3DControls.vue

@@ -39,8 +39,6 @@
         v-model:show-grid="sceneConfig!.showGrid"
         v-model:background-color="sceneConfig!.backgroundColor"
         v-model:background-image="sceneConfig!.backgroundImage"
-        v-model:background-render-mode="sceneConfig!.backgroundRenderMode"
-        v-model:fov="cameraConfig!.fov"
         @update-background-image="handleBackgroundImageUpdate"
       />
 

src/components/load3d/Load3dViewerContent.vue

@@ -34,10 +34,7 @@
             <SceneControls
               v-model:background-color="viewer.backgroundColor.value"
               v-model:show-grid="viewer.showGrid.value"
-              v-model:background-render-mode="viewer.backgroundRenderMode.value"
-              v-model:fov="viewer.fov.value"
               :has-background-image="viewer.hasBackgroundImage.value"
-              :disable-background-upload="viewer.isStandaloneMode.value"
               @update-background-image="viewer.handleBackgroundImageUpdate"
             />
           </div>
@@ -92,15 +89,13 @@ import LightControls from '@/components/load3d/controls/viewer/ViewerLightContro
 import ModelControls from '@/components/load3d/controls/viewer/ViewerModelControls.vue'
 import SceneControls from '@/components/load3d/controls/viewer/ViewerSceneControls.vue'
 import { useLoad3dDrag } from '@/composables/useLoad3dDrag'
-import { useLoad3dViewer } from '@/composables/useLoad3dViewer'
 import { t } from '@/i18n'
 import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
 import { useLoad3dService } from '@/services/load3dService'
 import { useDialogStore } from '@/stores/dialogStore'
 
 const props = defineProps<{
-  node?: LGraphNode
-  modelUrl?: string
+  node: LGraphNode
 }>()
 
 const viewerContentRef = ref<HTMLDivElement>()
@@ -109,30 +104,20 @@ const mainContentRef = ref<HTMLDivElement>()
 const maximized = ref(false)
 const mutationObserver = ref<MutationObserver | null>(null)
 
-const isStandaloneMode = !props.node && props.modelUrl
-
-const viewer = props.node
-  ? useLoad3dService().getOrCreateViewer(toRaw(props.node))
-  : useLoad3dViewer()
+const viewer = useLoad3dService().getOrCreateViewer(toRaw(props.node))
 
 const { isDragging, dragMessage, handleDragOver, handleDragLeave, handleDrop } =
   useLoad3dDrag({
     onModelDrop: async (file) => {
       await viewer.handleModelDrop(file)
     },
-    disabled: viewer.isPreview.value || isStandaloneMode
+    disabled: viewer.isPreview
   })
 
 onMounted(async () => {
-  if (!containerRef.value) return
-
-  if (isStandaloneMode && props.modelUrl) {
-    await viewer.initializeStandaloneViewer(containerRef.value, props.modelUrl)
-  } else if (props.node) {
-    const source = useLoad3dService().getLoad3d(props.node)
-    if (source) {
-      await viewer.initializeViewer(containerRef.value, source)
-    }
+  const source = useLoad3dService().getLoad3d(props.node)
+  if (source && containerRef.value) {
+    await viewer.initializeViewer(containerRef.value, source)
   }
 
   if (viewerContentRef.value) {
@@ -163,9 +148,7 @@ onMounted(async () => {
 })
 
 const handleCancel = () => {
-  if (!isStandaloneMode) {
-    viewer.restoreInitialState()
-  }
+  viewer.restoreInitialState()
   useDialogStore().closeDialog()
 }
 

src/components/load3d/controls/CameraControls.vue

@@ -6,30 +6,65 @@
           value: $t('load3d.switchCamera'),
           showDelay: 300
         }"
-        :class="['pi', 'pi-camera', 'text-lg text-white']"
+        :class="['pi', getCameraIcon, 'text-lg text-white']"
       />
     </Button>
-    <PopupSlider
-      v-if="showFOVButton"
-      v-model="fov"
-      :tooltip-text="$t('load3d.fov')"
-    />
+    <div v-if="showFOVButton" class="show-fov relative">
+      <Button class="p-button-rounded p-button-text" @click="toggleFOV">
+        <i
+          v-tooltip.right="{ value: $t('load3d.fov'), showDelay: 300 }"
+          class="pi pi-expand text-lg text-white"
+        />
+      </Button>
+      <div
+        v-show="showFOV"
+        class="absolute top-0 left-12 rounded-lg bg-black/50 p-4 shadow-lg"
+        style="width: 150px"
+      >
+        <Slider v-model="fov" class="w-full" :min="10" :max="150" :step="1" />
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import Button from 'primevue/button'
-import { computed } from 'vue'
+import Slider from 'primevue/slider'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
 
-import PopupSlider from '@/components/load3d/controls/PopupSlider.vue'
 import type { CameraType } from '@/extensions/core/load3d/interfaces'
 
+const showFOV = ref(false)
+
 const cameraType = defineModel<CameraType>('cameraType')
 const fov = defineModel<number>('fov')
 const showFOVButton = computed(() => cameraType.value === 'perspective')
+const getCameraIcon = computed(() => {
+  return cameraType.value === 'perspective' ? 'pi-camera' : 'pi-camera'
+})
+
+const toggleFOV = () => {
+  showFOV.value = !showFOV.value
+}
 
 const switchCamera = () => {
   cameraType.value =
     cameraType.value === 'perspective' ? 'orthographic' : 'perspective'
 }
+
+const closeCameraSlider = (e: MouseEvent) => {
+  const target = e.target as HTMLElement
+
+  if (!target.closest('.show-fov')) {
+    showFOV.value = false
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('click', closeCameraSlider)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', closeCameraSlider)
+})
 </script>

src/components/load3d/controls/PopupSlider.vue

@@ -1,64 +0,0 @@
-<template>
-  <div class="relative show-slider">
-    <Button class="p-button-rounded p-button-text" @click="toggleSlider">
-      <i
-        v-tooltip.right="{ value: tooltipText, showDelay: 300 }"
-        :class="['pi', icon, 'text-lg text-white']"
-      />
-    </Button>
-    <div
-      v-show="showSlider"
-      class="absolute top-0 left-12 rounded-lg bg-black/50 p-4 shadow-lg w-[150px]"
-    >
-      <Slider
-        v-model="value"
-        class="w-full"
-        :min="min"
-        :max="max"
-        :step="step"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import Button from 'primevue/button'
-import Slider from 'primevue/slider'
-import { onMounted, onUnmounted, ref } from 'vue'
-
-const {
-  icon = 'pi-expand',
-  min = 10,
-  max = 150,
-  step = 1
-} = defineProps<{
-  icon?: string
-  tooltipText: string
-  min?: number
-  max?: number
-  step?: number
-}>()
-
-const value = defineModel<number>()
-const showSlider = ref(false)
-
-const toggleSlider = () => {
-  showSlider.value = !showSlider.value
-}
-
-const closeSlider = (e: MouseEvent) => {
-  const target = e.target as HTMLElement
-
-  if (!target.closest('.show-slider')) {
-    showSlider.value = false
-  }
-}
-
-onMounted(() => {
-  document.addEventListener('click', closeSlider)
-})
-
-onUnmounted(() => {
-  document.removeEventListener('click', closeSlider)
-})
-</script>

src/components/load3d/controls/SceneControls.vue

@@ -51,28 +51,6 @@
       </Button>
     </div>
 
-    <div v-if="hasBackgroundImage">
-      <Button
-        class="p-button-rounded p-button-text"
-        :class="{ 'p-button-outlined': backgroundRenderMode === 'panorama' }"
-        @click="toggleBackgroundRenderMode"
-      >
-        <i
-          v-tooltip.right="{
-            value: $t('load3d.panoramaMode'),
-            showDelay: 300
-          }"
-          class="pi pi-globe text-lg text-white"
-        />
-      </Button>
-    </div>
-
-    <PopupSlider
-      v-if="hasBackgroundImage && backgroundRenderMode === 'panorama'"
-      v-model="fov"
-      :tooltip-text="$t('load3d.fov')"
-    />
-
     <div v-if="hasBackgroundImage">
       <Button
         class="p-button-rounded p-button-text"
@@ -94,9 +72,6 @@
 import Button from 'primevue/button'
 import { computed, ref } from 'vue'
 
-import PopupSlider from '@/components/load3d/controls/PopupSlider.vue'
-import type { BackgroundRenderModeType } from '@/extensions/core/load3d/interfaces'
-
 const emit = defineEmits<{
   (e: 'updateBackgroundImage', file: File | null): void
 }>()
@@ -104,11 +79,6 @@ const emit = defineEmits<{
 const showGrid = defineModel<boolean>('showGrid')
 const backgroundColor = defineModel<string>('backgroundColor')
 const backgroundImage = defineModel<string>('backgroundImage')
-const backgroundRenderMode = defineModel<BackgroundRenderModeType>(
-  'backgroundRenderMode',
-  { default: 'tiled' }
-)
-const fov = defineModel<number>('fov')
 const hasBackgroundImage = computed(
   () => backgroundImage.value && backgroundImage.value !== ''
 )
@@ -143,9 +113,4 @@ const uploadBackgroundImage = (event: Event) => {
 const removeBackgroundImage = () => {
   emit('updateBackgroundImage', null)
 }
-
-const toggleBackgroundRenderMode = () => {
-  backgroundRenderMode.value =
-    backgroundRenderMode.value === 'panorama' ? 'tiled' : 'panorama'
-}
 </script>

src/components/load3d/controls/viewer/ViewerCameraControls.vue

@@ -1,28 +1,26 @@
 <template>
   <div class="space-y-4">
-    <div class="space-y-4">
-      <label>
-        {{ t('load3d.viewer.cameraType') }}
-      </label>
-      <Select
-        v-model="cameraType"
-        :options="cameras"
-        option-label="title"
-        option-value="value"
-      >
-      </Select>
-    </div>
+    <label>
+      {{ t('load3d.viewer.cameraType') }}
+    </label>
+    <Select
+      v-model="cameraType"
+      :options="cameras"
+      option-label="title"
+      option-value="value"
+    >
+    </Select>
+  </div>
 
-    <div v-if="showFOVButton" class="space-y-4">
-      <label>{{ t('load3d.fov') }}</label>
-      <Slider
-        v-model="fov"
-        :min="10"
-        :max="150"
-        :step="1"
-        :aria-label="t('load3d.fov')"
-      />
-    </div>
+  <div v-if="showFOVButton" class="space-y-4">
+    <label>{{ t('load3d.fov') }}</label>
+    <Slider
+      v-model="fov"
+      :min="10"
+      :max="150"
+      :step="1"
+      :aria-label="t('load3d.fov')"
+    />
   </div>
 </template>
 

src/components/load3d/controls/viewer/ViewerExportControls.vue

@@ -1,22 +1,15 @@
 <template>
-  <div class="space-y-4">
-    <Select
-      v-model="exportFormat"
-      :options="exportFormats"
-      option-label="label"
-      option-value="value"
-    >
-    </Select>
+  <Select
+    v-model="exportFormat"
+    :options="exportFormats"
+    option-label="label"
+    option-value="value"
+  >
+  </Select>
 
-    <Button
-      severity="secondary"
-      text
-      rounded
-      @click="exportModel(exportFormat)"
-    >
-      {{ $t('load3d.export') }}
-    </Button>
-  </div>
+  <Button severity="secondary" text rounded @click="exportModel(exportFormat)">
+    {{ $t('load3d.export') }}
+  </Button>
 </template>
 
 <script setup lang="ts">

src/components/load3d/controls/viewer/ViewerLightControls.vue

@@ -1,15 +1,13 @@
 <template>
-  <div class="space-y-4">
-    <label>{{ $t('load3d.lightIntensity') }}</label>
+  <label>{{ $t('load3d.lightIntensity') }}</label>
 
-    <Slider
-      v-model="lightIntensity"
-      class="w-full"
-      :min="lightIntensityMinimum"
-      :max="lightIntensityMaximum"
-      :step="lightAdjustmentIncrement"
-    />
-  </div>
+  <Slider
+    v-model="lightIntensity"
+    class="w-full"
+    :min="lightIntensityMinimum"
+    :max="lightIntensityMaximum"
+    :step="lightAdjustmentIncrement"
+  />
 </template>
 
 <script setup lang="ts">

src/components/load3d/controls/viewer/ViewerSceneControls.vue

@@ -14,7 +14,7 @@
       </label>
     </div>
 
-    <div v-if="!hasBackgroundImage && !disableBackgroundUpload">
+    <div v-if="!hasBackgroundImage">
       <Button
         severity="secondary"
         :label="$t('load3d.uploadBackgroundImage')"
@@ -32,24 +32,6 @@
     </div>
 
     <div v-if="hasBackgroundImage" class="space-y-2">
-      <div class="flex gap-2">
-        <Button
-          :severity="backgroundRenderMode === 'tiled' ? 'primary' : 'secondary'"
-          :label="$t('load3d.tiledMode')"
-          icon="pi pi-th-large"
-          class="flex-1"
-          @click="setBackgroundRenderMode('tiled')"
-        />
-        <Button
-          :severity="
-            backgroundRenderMode === 'panorama' ? 'primary' : 'secondary'
-          "
-          :label="$t('load3d.panoramaMode')"
-          icon="pi pi-globe"
-          class="flex-1"
-          @click="setBackgroundRenderMode('panorama')"
-        />
-      </div>
       <Button
         severity="secondary"
         :label="$t('load3d.removeBackgroundImage')"
@@ -68,13 +50,9 @@ import { ref } from 'vue'
 
 const backgroundColor = defineModel<string>('backgroundColor')
 const showGrid = defineModel<boolean>('showGrid')
-const backgroundRenderMode = defineModel<'tiled' | 'panorama'>(
-  'backgroundRenderMode'
-)
 
 defineProps<{
   hasBackgroundImage?: boolean
-  disableBackgroundUpload?: boolean
 }>()
 
 const emit = defineEmits<{
@@ -99,8 +77,4 @@ const handleImageUpload = (event: Event) => {
 const removeBackgroundImage = () => {
   emit('updateBackgroundImage', null)
 }
-
-const setBackgroundRenderMode = (mode: 'tiled' | 'panorama') => {
-  backgroundRenderMode.value = mode
-}
 </script>

src/components/maskeditor/BrushCursor.vue

@@ -1,97 +0,0 @@
-<template>
-  <div
-    id="maskEditor_brush"
-    :style="{
-      position: 'absolute',
-      opacity: brushOpacity,
-      width: `${brushSize}px`,
-      height: `${brushSize}px`,
-      left: `${brushLeft}px`,
-      top: `${brushTop}px`,
-      borderRadius: borderRadius,
-      pointerEvents: 'none',
-      zIndex: 1000
-    }"
-  >
-    <div
-      id="maskEditor_brushPreviewGradient"
-      :style="{
-        display: gradientVisible ? 'block' : 'none',
-        background: gradientBackground
-      }"
-    ></div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-
-import { BrushShape } from '@/extensions/core/maskeditor/types'
-import { useMaskEditorStore } from '@/stores/maskEditorStore'
-
-const { containerRef } = defineProps<{
-  containerRef?: HTMLElement
-}>()
-
-const store = useMaskEditorStore()
-
-const brushOpacity = computed(() => {
-  return store.brushVisible ? '1' : '0'
-})
-
-const brushRadius = computed(() => {
-  return store.brushSettings.size * store.zoomRatio
-})
-
-const brushSize = computed(() => {
-  return brushRadius.value * 2
-})
-
-const brushLeft = computed(() => {
-  const dialogRect = containerRef?.getBoundingClientRect()
-  const dialogOffsetLeft = dialogRect?.left || 0
-  return (
-    store.cursorPoint.x +
-    store.panOffset.x -
-    brushRadius.value -
-    dialogOffsetLeft
-  )
-})
-
-const brushTop = computed(() => {
-  const dialogRect = containerRef?.getBoundingClientRect()
-  const dialogOffsetTop = dialogRect?.top || 0
-  return (
-    store.cursorPoint.y +
-    store.panOffset.y -
-    brushRadius.value -
-    dialogOffsetTop
-  )
-})
-
-const borderRadius = computed(() => {
-  return store.brushSettings.type === BrushShape.Rect ? '0%' : '50%'
-})
-
-const gradientVisible = computed(() => {
-  return store.brushPreviewGradientVisible
-})
-
-const gradientBackground = computed(() => {
-  const hardness = store.brushSettings.hardness
-
-  if (hardness === 1) {
-    return 'rgba(255, 0, 0, 0.5)'
-  }
-
-  const midStop = hardness * 100
-  const outerStop = 100
-
-  return `radial-gradient(
-    circle,
-    rgba(255, 0, 0, 0.5) 0%,
-    rgba(255, 0, 0, 0.25) ${midStop}%,
-    rgba(255, 0, 0, 0) ${outerStop}%
-  )`
-})
-</script>

src/components/maskeditor/BrushSettingsPanel.vue

@@ -1,129 +0,0 @@
-<template>
-  <div class="flex flex-col gap-3 pb-3">
-    <h3
-      class="text-center text-[15px] font-sans text-[var(--descrip-text)] mt-2.5"
-    >
-      {{ t('maskEditor.brushSettings') }}
-    </h3>
-
-    <button
-      class="w-45 h-7.5 border-none bg-black/20 border border-[var(--border-color)] text-[var(--input-text)] font-sans text-[15px] pointer-events-auto transition-colors duration-100 hover:bg-[var(--p-overlaybadge-outline-color)] hover:border-none"
-      @click="resetToDefault"
-    >
-      {{ t('maskEditor.resetToDefault') }}
-    </button>
-
-    <div class="flex flex-col gap-3 pb-3">
-      <span class="text-left text-xs font-sans text-[var(--descrip-text)]">{{
-        t('maskEditor.brushShape')
-      }}</span>
-      <div
-        class="flex flex-row gap-2.5 items-center min-h-6 relative h-[50px] w-full rounded-[10px] bg-[var(--p-surface-300)] dark-theme:bg-[var(--p-surface-800)]"
-      >
-        <div
-          class="maskEditor_sidePanelBrushShapeCircle bg-transparent hover:bg-[var(--comfy-menu-bg)] dark-theme:hover:bg-[var(--p-surface-900)]"
-          :class="{ active: store.brushSettings.type === BrushShape.Arc }"
-          :style="{
-            background:
-              store.brushSettings.type === BrushShape.Arc
-                ? 'var(--p-button-text-primary-color)'
-                : ''
-          }"
-          @click="setBrushShape(BrushShape.Arc)"
-        ></div>
-        <div
-          class="maskEditor_sidePanelBrushShapeSquare bg-transparent hover:bg-[var(--comfy-menu-bg)] dark-theme:hover:bg-[var(--p-surface-900)]"
-          :class="{ active: store.brushSettings.type === BrushShape.Rect }"
-          :style="{
-            background:
-              store.brushSettings.type === BrushShape.Rect
-                ? 'var(--p-button-text-primary-color)'
-                : ''
-          }"
-          @click="setBrushShape(BrushShape.Rect)"
-        ></div>
-      </div>
-    </div>
-
-    <div class="flex flex-col gap-3 pb-3">
-      <span class="text-left text-xs font-sans text-[var(--descrip-text)]">{{
-        t('maskEditor.colorSelector')
-      }}</span>
-      <input type="color" :value="store.rgbColor" @input="onColorChange" />
-    </div>
-
-    <SliderControl
-      :label="t('maskEditor.thickness')"
-      :min="1"
-      :max="100"
-      :step="1"
-      :model-value="store.brushSettings.size"
-      @update:model-value="onThicknessChange"
-    />
-
-    <SliderControl
-      :label="t('maskEditor.opacity')"
-      :min="0"
-      :max="1"
-      :step="0.01"
-      :model-value="store.brushSettings.opacity"
-      @update:model-value="onOpacityChange"
-    />
-
-    <SliderControl
-      :label="t('maskEditor.hardness')"
-      :min="0"
-      :max="1"
-      :step="0.01"
-      :model-value="store.brushSettings.hardness"
-      @update:model-value="onHardnessChange"
-    />
-
-    <SliderControl
-      :label="t('maskEditor.smoothingPrecision')"
-      :min="1"
-      :max="100"
-      :step="1"
-      :model-value="store.brushSettings.smoothingPrecision"
-      @update:model-value="onSmoothingPrecisionChange"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { BrushShape } from '@/extensions/core/maskeditor/types'
-import { t } from '@/i18n'
-import { useMaskEditorStore } from '@/stores/maskEditorStore'
-
-import SliderControl from './controls/SliderControl.vue'
-
-const store = useMaskEditorStore()
-
-const setBrushShape = (shape: BrushShape) => {
-  store.brushSettings.type = shape
-}
-
-const onColorChange = (event: Event) => {
-  store.rgbColor = (event.target as HTMLInputElement).value
-}
-
-const onThicknessChange = (value: number) => {
-  store.setBrushSize(value)
-}
-
-const onOpacityChange = (value: number) => {
-  store.setBrushOpacity(value)
-}
-
-const onHardnessChange = (value: number) => {
-  store.setBrushHardness(value)
-}
-
-const onSmoothingPrecisionChange = (value: number) => {
-  store.setBrushSmoothingPrecision(value)
-}
-
-const resetToDefault = () => {
-  store.resetBrushToDefault()
-}
-</script>

src/components/maskeditor/ColorSelectSettingsPanel.vue

@@ -1,103 +0,0 @@
-<template>
-  <div class="flex flex-col gap-3 pb-3">
-    <h3
-      class="text-center text-[15px] font-sans text-[var(--descrip-text)] mt-2.5"
-    >
-      {{ t('maskEditor.colorSelectSettings') }}
-    </h3>
-
-    <SliderControl
-      :label="t('maskEditor.tolerance')"
-      :min="0"
-      :max="255"
-      :step="1"
-      :model-value="store.colorSelectTolerance"
-      @update:model-value="onToleranceChange"
-    />
-
-    <SliderControl
-      :label="t('maskEditor.selectionOpacity')"
-      :min="0"
-      :max="100"
-      :step="1"
-      :model-value="store.selectionOpacity"
-      @update:model-value="onSelectionOpacityChange"
-    />
-
-    <ToggleControl
-      :label="t('maskEditor.livePreview')"
-      :model-value="store.colorSelectLivePreview"
-      @update:model-value="onLivePreviewChange"
-    />
-
-    <ToggleControl
-      :label="t('maskEditor.applyToWholeImage')"
-      :model-value="store.applyWholeImage"
-      @update:model-value="onWholeImageChange"
-    />
-
-    <DropdownControl
-      :label="t('maskEditor.method')"
-      :options="methodOptions"
-      :model-value="store.colorComparisonMethod"
-      @update:model-value="onMethodChange"
-    />
-
-    <ToggleControl
-      :label="t('maskEditor.stopAtMask')"
-      :model-value="store.maskBoundary"
-      @update:model-value="onMaskBoundaryChange"
-    />
-
-    <SliderControl
-      :label="t('maskEditor.maskTolerance')"
-      :min="0"
-      :max="255"
-      :step="1"
-      :model-value="store.maskTolerance"
-      @update:model-value="onMaskToleranceChange"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ColorComparisonMethod } from '@/extensions/core/maskeditor/types'
-import { t } from '@/i18n'
-import { useMaskEditorStore } from '@/stores/maskEditorStore'
-
-import DropdownControl from './controls/DropdownControl.vue'
-import SliderControl from './controls/SliderControl.vue'
-import ToggleControl from './controls/ToggleControl.vue'
-
-const store = useMaskEditorStore()
-
-const methodOptions = Object.values(ColorComparisonMethod)
-
-const onToleranceChange = (value: number) => {
-  store.setColorSelectTolerance(value)
-}
-
-const onSelectionOpacityChange = (value: number) => {
-  store.setSelectionOpacity(value)
-}
-
-const onLivePreviewChange = (value: boolean) => {
-  store.colorSelectLivePreview = value
-}
-
-const onWholeImageChange = (value: boolean) => {
-  store.applyWholeImage = value
-}
-
-const onMethodChange = (value: string | number) => {
-  store.colorComparisonMethod = value as ColorComparisonMethod
-}
-
-const onMaskBoundaryChange = (value: boolean) => {
-  store.maskBoundary = value
-}
-
-const onMaskToleranceChange = (value: number) => {
-  store.setMaskTolerance(value)
-}
-</script>

src/components/maskeditor/ImageLayerSettingsPanel.vue

@@ -1,227 +0,0 @@
-<template>
-  <div class="flex flex-col gap-3 pb-3">
-    <h3
-      class="text-center text-[15px] font-sans text-[var(--descrip-text)] mt-2.5"
-    >
-      {{ t('maskEditor.layers') }}
-    </h3>
-
-    <SliderControl
-      :label="t('maskEditor.maskOpacity')"
-      :min="0"
-      :max="1"
-      :step="0.01"
-      :model-value="store.maskOpacity"
-      @update:model-value="onMaskOpacityChange"
-    />
-
-    <span class="text-left text-xs font-sans text-[var(--descrip-text)]">{{
-      t('maskEditor.maskBlendingOptions')
-    }}</span>
-
-    <div
-      class="flex flex-row gap-2.5 items-center min-h-6 relative h-[50px] w-full rounded-[10px] -mt-2 -mb-1.5"
-    >
-      <select
-        class="maskEditor_sidePanelDropdown"
-        :value="store.maskBlendMode"
-        @change="onBlendModeChange"
-      >
-        <option value="black">{{ t('maskEditor.black') }}</option>
-        <option value="white">{{ t('maskEditor.white') }}</option>
-        <option value="negative">{{ t('maskEditor.negative') }}</option>
-      </select>
-    </div>
-
-    <span class="text-left text-xs font-sans text-[var(--descrip-text)]">{{
-      t('maskEditor.maskLayer')
-    }}</span>
-    <div
-      class="flex flex-row gap-2.5 items-center min-h-6 relative h-[50px] w-full rounded-[10px] bg-[var(--p-surface-300)] dark-theme:bg-[var(--p-surface-800)]"
-      :style="{
-        border: store.activeLayer === 'mask' ? '2px solid #007acc' : 'none'
-      }"
-    >
-      <input
-        type="checkbox"
-        class="maskEditor_sidePanelLayerCheckbox"
-        :checked="maskLayerVisible"
-        @change="onMaskLayerVisibilityChange"
-      />
-      <div class="maskEditor_sidePanelLayerPreviewContainer">
-        <svg viewBox="0 0 20 20" style="">
-          <path
-            class="cls-1"
-            d="M1.31,5.32v9.36c0,.55.45,1,1,1h15.38c.55,0,1-.45,1-1V5.32c0-.55-.45-1-1-1H2.31c-.55,0-1,.45-1,1ZM11.19,13.44c-2.91.94-5.57-1.72-4.63-4.63.34-1.05,1.19-1.9,2.24-2.24,2.91-.94,5.57,1.72,4.63,4.63-.34,1.05-1.19-1.9-2.24,2.24Z"
-          />
-        </svg>
-      </div>
-      <button
-        style="font-size: 12px"
-        :style="{ opacity: store.activeLayer === 'mask' ? '0.5' : '1' }"
-        :disabled="store.activeLayer === 'mask'"
-        @click="setActiveLayer('mask')"
-      >
-        {{ t('maskEditor.activateLayer') }}
-      </button>
-    </div>
-
-    <span class="text-left text-xs font-sans text-[var(--descrip-text)]">{{
-      t('maskEditor.paintLayer')
-    }}</span>
-    <div
-      class="flex flex-row gap-2.5 items-center min-h-6 relative h-[50px] w-full rounded-[10px] bg-[var(--p-surface-300)] dark-theme:bg-[var(--p-surface-800)]"
-      :style="{
-        border: store.activeLayer === 'rgb' ? '2px solid #007acc' : 'none'
-      }"
-    >
-      <input
-        type="checkbox"
-        class="maskEditor_sidePanelLayerCheckbox"
-        :checked="paintLayerVisible"
-        @change="onPaintLayerVisibilityChange"
-      />
-      <div class="maskEditor_sidePanelLayerPreviewContainer">
-        <svg viewBox="0 0 20 20">
-          <path
-            class="cls-1"
-            d="M 17 6.965 c 0 0.235 -0.095 0.47 -0.275 0.655 l -6.51 6.52 c -0.045 0.035 -0.09 0.075 -0.135 0.11 c -0.035 -0.695 -0.605 -1.24 -1.305 -1.245 c 0.035 -0.06 0.08 -0.12 0.135 -0.17 l 6.52 -6.52 c 0.36 -0.36 0.945 -0.36 1.3 0 c 0.175 0.175 0.275 0.415 0.275 0.65 Z"
-          />
-          <path
-            class="cls-1"
-            d="M 9.82 14.515 c 0 2.23 -3.23 1.59 -4.82 0 c 1.65 -0.235 2.375 -1.29 3.53 -1.29 c 0.715 0 1.29 0.58 1.29 1.29 Z"
-          />
-        </svg>
-      </div>
-      <button
-        style="font-size: 12px"
-        :style="{
-          opacity: store.activeLayer === 'rgb' ? '0.5' : '1',
-          display: showLayerButtons ? 'block' : 'none'
-        }"
-        :disabled="store.activeLayer === 'rgb'"
-        @click="setActiveLayer('rgb')"
-      >
-        {{ t('maskEditor.activateLayer') }}
-      </button>
-    </div>
-
-    <span class="text-left text-xs font-sans text-[var(--descrip-text)]">{{
-      t('maskEditor.baseImageLayer')
-    }}</span>
-    <div
-      class="flex flex-row gap-2.5 items-center min-h-6 relative h-[50px] w-full rounded-[10px] bg-[var(--p-surface-300)] dark-theme:bg-[var(--p-surface-800)]"
-    >
-      <input
-        type="checkbox"
-        class="maskEditor_sidePanelLayerCheckbox"
-        :checked="baseImageLayerVisible"
-        @change="onBaseImageLayerVisibilityChange"
-      />
-      <div class="maskEditor_sidePanelLayerPreviewContainer">
-        <img
-          class="maskEditor_sidePanelImageLayerImage"
-          :src="baseImageSrc"
-          :alt="t('maskEditor.baseLayerPreview')"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, ref } from 'vue'
-
-import { useCanvasManager } from '@/composables/maskeditor/useCanvasManager'
-import type { useToolManager } from '@/composables/maskeditor/useToolManager'
-import type { ImageLayer } from '@/extensions/core/maskeditor/types'
-import { MaskBlendMode, Tools } from '@/extensions/core/maskeditor/types'
-import { t } from '@/i18n'
-import { useMaskEditorStore } from '@/stores/maskEditorStore'
-
-import SliderControl from './controls/SliderControl.vue'
-
-const { toolManager } = defineProps<{
-  toolManager?: ReturnType<typeof useToolManager>
-}>()
-
-const store = useMaskEditorStore()
-const canvasManager = useCanvasManager()
-
-const maskLayerVisible = ref(true)
-const paintLayerVisible = ref(true)
-const baseImageLayerVisible = ref(true)
-
-const baseImageSrc = computed(() => {
-  return store.image?.src ?? ''
-})
-
-const showLayerButtons = computed(() => {
-  return store.currentTool === Tools.Eraser
-})
-
-const onMaskLayerVisibilityChange = (event: Event) => {
-  const checked = (event.target as HTMLInputElement).checked
-  maskLayerVisible.value = checked
-
-  const maskCanvas = store.maskCanvas
-  if (maskCanvas) {
-    maskCanvas.style.opacity = checked ? String(store.maskOpacity) : '0'
-  }
-}
-
-const onPaintLayerVisibilityChange = (event: Event) => {
-  const checked = (event.target as HTMLInputElement).checked
-  paintLayerVisible.value = checked
-
-  const rgbCanvas = store.rgbCanvas
-  if (rgbCanvas) {
-    rgbCanvas.style.opacity = checked ? '1' : '0'
-  }
-}
-
-const onBaseImageLayerVisibilityChange = (event: Event) => {
-  const checked = (event.target as HTMLInputElement).checked
-  baseImageLayerVisible.value = checked
-
-  const imgCanvas = store.imgCanvas
-  if (imgCanvas) {
-    imgCanvas.style.opacity = checked ? '1' : '0'
-  }
-}
-
-const onMaskOpacityChange = (value: number) => {
-  store.setMaskOpacity(value)
-
-  const maskCanvas = store.maskCanvas
-  if (maskCanvas) {
-    maskCanvas.style.opacity = String(value)
-  }
-
-  maskLayerVisible.value = value !== 0
-}
-
-const onBlendModeChange = async (event: Event) => {
-  const value = (event.target as HTMLSelectElement).value
-  let blendMode: MaskBlendMode
-
-  switch (value) {
-    case 'white':
-      blendMode = MaskBlendMode.White
-      break
-    case 'negative':
-      blendMode = MaskBlendMode.Negative
-      break
-    default:
-      blendMode = MaskBlendMode.Black
-  }
-
-  store.maskBlendMode = blendMode
-
-  await canvasManager.updateMaskColor()
-}
-
-const setActiveLayer = (layer: ImageLayer) => {
-  toolManager?.setActiveLayer(layer)
-}
-</script>

src/components/maskeditor/MaskEditorContent.vue

@@ -1,209 +0,0 @@
-<template>
-  <div
-    ref="containerRef"
-    class="maskEditor-dialog-root flex h-full w-full flex-col"
-    @contextmenu.prevent
-    @dragstart="handleDragStart"
-  >
-    <div
-      id="maskEditorCanvasContainer"
-      ref="canvasContainerRef"
-      @contextmenu.prevent
-    >
-      <canvas
-        ref="imgCanvasRef"
-        class="absolute top-0 left-0 w-full h-full"
-        @contextmenu.prevent
-      />
-      <canvas
-        ref="rgbCanvasRef"
-        class="absolute top-0 left-0 w-full h-full"
-        @contextmenu.prevent
-      />
-      <canvas
-        ref="maskCanvasRef"
-        class="absolute top-0 left-0 w-full h-full"
-        @contextmenu.prevent
-      />
-      <div ref="canvasBackgroundRef" class="bg-white w-full h-full" />
-    </div>
-
-    <div class="maskEditor-ui-container flex min-h-0 flex-1 flex-col">
-      <div class="flex min-h-0 flex-1 overflow-hidden">
-        <ToolPanel
-          v-if="initialized"
-          ref="toolPanelRef"
-          :tool-manager="toolManager!"
-        />
-
-        <PointerZone
-          v-if="initialized"
-          :tool-manager="toolManager!"
-          :pan-zoom="panZoom!"
-        />
-
-        <SidePanel
-          v-if="initialized"
-          ref="sidePanelRef"
-          :tool-manager="toolManager!"
-        />
-      </div>
-    </div>
-
-    <BrushCursor v-if="initialized" :container-ref="containerRef" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { onBeforeUnmount, onMounted, ref } from 'vue'
-
-import { useImageLoader } from '@/composables/maskeditor/useImageLoader'
-import { useKeyboard } from '@/composables/maskeditor/useKeyboard'
-import { useMaskEditorLoader } from '@/composables/maskeditor/useMaskEditorLoader'
-import { usePanAndZoom } from '@/composables/maskeditor/usePanAndZoom'
-import { useToolManager } from '@/composables/maskeditor/useToolManager'
-import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
-import { useDialogStore } from '@/stores/dialogStore'
-import { useMaskEditorDataStore } from '@/stores/maskEditorDataStore'
-import { useMaskEditorStore } from '@/stores/maskEditorStore'
-
-import BrushCursor from './BrushCursor.vue'
-import PointerZone from './PointerZone.vue'
-import SidePanel from './SidePanel.vue'
-import ToolPanel from './ToolPanel.vue'
-
-const { node } = defineProps<{
-  node: LGraphNode
-}>()
-
-const store = useMaskEditorStore()
-const dataStore = useMaskEditorDataStore()
-const dialogStore = useDialogStore()
-
-const loader = useMaskEditorLoader()
-
-const containerRef = ref<HTMLElement>()
-const canvasContainerRef = ref<HTMLDivElement>()
-const imgCanvasRef = ref<HTMLCanvasElement>()
-const maskCanvasRef = ref<HTMLCanvasElement>()
-const rgbCanvasRef = ref<HTMLCanvasElement>()
-const canvasBackgroundRef = ref<HTMLDivElement>()
-
-const toolPanelRef = ref<InstanceType<typeof ToolPanel>>()
-const sidePanelRef = ref<InstanceType<typeof SidePanel>>()
-
-const initialized = ref(false)
-
-const keyboard = useKeyboard()
-const panZoom = usePanAndZoom()
-
-let toolManager: ReturnType<typeof useToolManager> | null = null
-
-let resizeObserver: ResizeObserver | null = null
-
-const handleDragStart = (event: DragEvent) => {
-  if (event.ctrlKey) {
-    event.preventDefault()
-  }
-}
-
-const initUI = async () => {
-  if (!containerRef.value) {
-    console.error(
-      '[MaskEditorContent] Cannot initialize - missing required refs'
-    )
-    return
-  }
-
-  if (
-    !imgCanvasRef.value ||
-    !maskCanvasRef.value ||
-    !rgbCanvasRef.value ||
-    !canvasContainerRef.value ||
-    !canvasBackgroundRef.value
-  ) {
-    console.error('[MaskEditorContent] Cannot initialize - missing canvas refs')
-    return
-  }
-
-  store.maskCanvas = maskCanvasRef.value
-  store.rgbCanvas = rgbCanvasRef.value
-  store.imgCanvas = imgCanvasRef.value
-  store.canvasContainer = canvasContainerRef.value
-  store.canvasBackground = canvasBackgroundRef.value
-
-  try {
-    await loader.loadFromNode(node)
-
-    toolManager = useToolManager(keyboard, panZoom)
-
-    const imageLoader = useImageLoader()
-    const image = await imageLoader.loadImages()
-
-    await panZoom.initializeCanvasPanZoom(
-      image,
-      containerRef.value,
-      toolPanelRef.value?.$el as HTMLElement | undefined,
-      sidePanelRef.value?.$el as HTMLElement | undefined
-    )
-
-    store.canvasHistory.saveInitialState()
-
-    initialized.value = true
-  } catch (error) {
-    console.error('[MaskEditorContent] Initialization failed:', error)
-    dialogStore.closeDialog()
-  }
-}
-
-onMounted(() => {
-  keyboard.addListeners()
-
-  if (containerRef.value) {
-    resizeObserver = new ResizeObserver(async () => {
-      if (panZoom) {
-        await panZoom.invalidatePanZoom()
-      }
-    })
-    resizeObserver.observe(containerRef.value)
-  }
-
-  void initUI()
-})
-
-onBeforeUnmount(() => {
-  toolManager?.brushDrawing.saveBrushSettings()
-
-  keyboard?.removeListeners()
-
-  if (resizeObserver) {
-    resizeObserver.disconnect()
-    resizeObserver = null
-  }
-
-  store.canvasHistory.clearStates()
-  store.resetState()
-  dataStore.reset()
-})
-</script>
-
-<style scoped>
-.maskEditor-dialog-root {
-  position: relative;
-  overflow: hidden;
-}
-
-.maskEditor-ui-container {
-  position: relative;
-  z-index: 1;
-}
-
-:deep(#maskEditorCanvasContainer) {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 0;
-}
-</style>

src/components/maskeditor/PaintBucketSettingsPanel.vue

@@ -1,44 +0,0 @@
-<template>
-  <div class="flex flex-col gap-3 pb-3">
-    <h3
-      class="text-center text-[15px] font-sans text-[var(--descrip-text)] mt-2.5"
-    >
-      {{ t('maskEditor.paintBucketSettings') }}
-    </h3>
-
-    <SliderControl
-      :label="t('maskEditor.tolerance')"
-      :min="0"
-      :max="255"
-      :step="1"
-      :model-value="store.paintBucketTolerance"
-      @update:model-value="onToleranceChange"
-    />
-
-    <SliderControl
-      :label="t('maskEditor.fillOpacity')"
-      :min="0"
-      :max="100"
-      :step="1"
-      :model-value="store.fillOpacity"
-      @update:model-value="onFillOpacityChange"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { t } from '@/i18n'
-import { useMaskEditorStore } from '@/stores/maskEditorStore'
-
-import SliderControl from './controls/SliderControl.vue'
-
-const store = useMaskEditorStore()
-
-const onToleranceChange = (value: number) => {
-  store.setPaintBucketTolerance(value)
-}
-
-const onFillOpacityChange = (value: number) => {
-  store.setFillOpacity(value)
-}
-</script>

src/components/maskeditor/PointerZone.vue

@@ -1,95 +0,0 @@
-<template>
-  <div
-    ref="pointerZoneRef"
-    class="w-[calc(100%-4rem-220px)] h-full"
-    @pointerdown="handlePointerDown"
-    @pointermove="handlePointerMove"
-    @pointerup="handlePointerUp"
-    @pointerleave="handlePointerLeave"
-    @pointerenter="handlePointerEnter"
-    @touchstart="handleTouchStart"
-    @touchmove="handleTouchMove"
-    @touchend="handleTouchEnd"
-    @wheel="handleWheel"
-    @contextmenu.prevent
-  />
-</template>
-
-<script setup lang="ts">
-import { onMounted, ref, watch } from 'vue'
-
-import type { usePanAndZoom } from '@/composables/maskeditor/usePanAndZoom'
-import type { useToolManager } from '@/composables/maskeditor/useToolManager'
-import { useMaskEditorStore } from '@/stores/maskEditorStore'
-
-const { toolManager, panZoom } = defineProps<{
-  toolManager: ReturnType<typeof useToolManager>
-  panZoom: ReturnType<typeof usePanAndZoom>
-}>()
-
-const store = useMaskEditorStore()
-const pointerZoneRef = ref<HTMLDivElement>()
-
-onMounted(() => {
-  if (!pointerZoneRef.value) {
-    console.error('[PointerZone] Pointer zone ref not initialized')
-    return
-  }
-
-  store.pointerZone = pointerZoneRef.value
-})
-
-watch(
-  () => store.isPanning,
-  (isPanning) => {
-    if (!pointerZoneRef.value) return
-
-    if (isPanning) {
-      pointerZoneRef.value.style.cursor = 'grabbing'
-    } else {
-      toolManager.updateCursor()
-    }
-  }
-)
-
-const handlePointerDown = async (event: PointerEvent) => {
-  await toolManager.handlePointerDown(event)
-}
-
-const handlePointerMove = async (event: PointerEvent) => {
-  await toolManager.handlePointerMove(event)
-}
-
-const handlePointerUp = (event: PointerEvent) => {
-  void toolManager.handlePointerUp(event)
-}
-
-const handlePointerLeave = () => {
-  store.brushVisible = false
-  if (pointerZoneRef.value) {
-    pointerZoneRef.value.style.cursor = ''
-  }
-}
-
-const handlePointerEnter = () => {
-  toolManager.updateCursor()
-}
-
-const handleTouchStart = (event: TouchEvent) => {
-  panZoom.handleTouchStart(event)
-}
-
-const handleTouchMove = async (event: TouchEvent) => {
-  await panZoom.handleTouchMove(event)
-}
-
-const handleTouchEnd = (event: TouchEvent) => {
-  panZoom.handleTouchEnd(event)
-}
-
-const handleWheel = async (event: WheelEvent) => {
-  await panZoom.zoom(event)
-  const newCursorPoint = { x: event.clientX, y: event.clientY }
-  panZoom.updateCursorPosition(newCursorPoint)
-}
-</script>

src/components/maskeditor/SettingsPanelContainer.vue

@@ -1,31 +0,0 @@
-<template>
-  <div class="maskEditor_sidePanel">
-    <div class="maskEditor_sidePanelContainer">
-      <component :is="currentPanelComponent" />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import type { Component } from 'vue'
-
-import { Tools } from '@/extensions/core/maskeditor/types'
-import { useMaskEditorStore } from '@/stores/maskEditorStore'
-
-import BrushSettingsPanel from './BrushSettingsPanel.vue'
-import ColorSelectSettingsPanel from './ColorSelectSettingsPanel.vue'
-import PaintBucketSettingsPanel from './PaintBucketSettingsPanel.vue'
-
-const currentPanelComponent = computed<Component>(() => {
-  const tool = useMaskEditorStore().currentTool
-
-  if (tool === Tools.MaskBucket) {
-    return PaintBucketSettingsPanel
-  } else if (tool === Tools.MaskColorFill) {
-    return ColorSelectSettingsPanel
-  } else {
-    return BrushSettingsPanel
-  }
-})
-</script>

src/components/maskeditor/SidePanel.vue

@@ -1,24 +0,0 @@
-<template>
-  <div
-    class="flex flex-col gap-3 pb-3 h-full !items-stretch bg-[var(--comfy-menu-bg)] overflow-y-auto w-55 px-2.5"
-  >
-    <div class="w-full min-h-full">
-      <SettingsPanelContainer />
-
-      <div class="w-full h-0.5 bg-[var(--border-color)] mt-6 mb-1.5" />
-
-      <ImageLayerSettingsPanel :tool-manager="toolManager" />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { useToolManager } from '@/composables/maskeditor/useToolManager'
-
-import ImageLayerSettingsPanel from './ImageLayerSettingsPanel.vue'
-import SettingsPanelContainer from './SettingsPanelContainer.vue'
-
-const { toolManager } = defineProps<{
-  toolManager?: ReturnType<typeof useToolManager>
-}>()
-</script>

src/components/maskeditor/ToolPanel.vue

@@ -1,69 +0,0 @@
-<template>
-  <div
-    class="h-full z-[8888] flex flex-col justify-between bg-[var(--comfy-menu-bg)]"
-  >
-    <div class="flex flex-col">
-      <div
-        v-for="tool in allTools"
-        :key="tool"
-        :class="[
-          'maskEditor_toolPanelContainer hover:bg-[var(--p-surface-300)] dark-theme:hover:bg-[var(--p-surface-800)]',
-          { maskEditor_toolPanelContainerSelected: currentTool === tool }
-        ]"
-        @click="onToolSelect(tool)"
-      >
-        <div
-          class="flex items-center justify-center"
-          v-html="iconsHtml[tool]"
-        ></div>
-        <div class="maskEditor_toolPanelIndicator"></div>
-      </div>
-    </div>
-
-    <div
-      class="flex flex-col items-center cursor-pointer rounded-md mb-2 transition-colors duration-200 hover:bg-[var(--p-surface-300)] dark-theme:hover:bg-[var(--p-surface-800)]"
-      :title="t('maskEditor.clickToResetZoom')"
-      @click="onResetZoom"
-    >
-      <span class="text-sm text-[var(--p-button-text-secondary-color)]">{{
-        zoomText
-      }}</span>
-      <span class="text-xs text-[var(--p-button-text-secondary-color)]">{{
-        dimensionsText
-      }}</span>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-
-import type { useToolManager } from '@/composables/maskeditor/useToolManager'
-import { iconsHtml } from '@/extensions/core/maskeditor/constants'
-import type { Tools } from '@/extensions/core/maskeditor/types'
-import { allTools } from '@/extensions/core/maskeditor/types'
-import { t } from '@/i18n'
-import { useMaskEditorStore } from '@/stores/maskEditorStore'
-
-const { toolManager } = defineProps<{
-  toolManager: ReturnType<typeof useToolManager>
-}>()
-
-const store = useMaskEditorStore()
-
-const onToolSelect = (tool: Tools) => {
-  toolManager.switchTool(tool)
-}
-
-const currentTool = computed(() => store.currentTool)
-
-const zoomText = computed(() => `${Math.round(store.displayZoomRatio * 100)}%`)
-const dimensionsText = computed(() => {
-  const img = store.image
-  return img ? `${img.width}x${img.height}` : ' '
-})
-
-const onResetZoom = () => {
-  store.resetZoom()
-}
-</script>

src/components/maskeditor/controls/DropdownControl.vue

@@ -1,55 +0,0 @@
-<template>
-  <div class="flex flex-row gap-2.5 items-center min-h-6 relative">
-    <span class="text-left text-xs font-sans text-[var(--descrip-text)]">{{
-      label
-    }}</span>
-    <select
-      class="absolute right-0 h-6 px-1.5 rounded-md border border-[var(--p-form-field-border-color)] transition-colors duration-100 bg-[var(--comfy-menu-bg)] focus:outline focus:outline-1 focus:outline-[var(--p-surface-300)] dark-theme:bg-[var(--p-surface-900)] dark-theme:focus:outline-[var(--p-button-text-primary-color)]"
-      :value="modelValue"
-      @change="onChange"
-    >
-      <option
-        v-for="option in normalizedOptions"
-        :key="option.value"
-        :value="option.value"
-      >
-        {{ option.label }}
-      </option>
-    </select>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-
-interface DropdownOption {
-  label: string
-  value: string | number
-}
-
-interface Props {
-  label: string
-  options: string[] | DropdownOption[]
-  modelValue: string | number
-}
-
-const props = defineProps<Props>()
-
-const emit = defineEmits<{
-  'update:modelValue': [value: string | number]
-}>()
-
-const normalizedOptions = computed((): DropdownOption[] => {
-  return props.options.map((option) => {
-    if (typeof option === 'string') {
-      return { label: option, value: option }
-    }
-    return option
-  })
-})
-
-const onChange = (event: Event) => {
-  const value = (event.target as HTMLSelectElement).value
-  emit('update:modelValue', value)
-}
-</script>

src/components/maskeditor/controls/SliderControl.vue

@@ -1,39 +0,0 @@
-<template>
-  <div class="flex flex-col gap-3 pb-3">
-    <span class="text-left text-xs font-sans text-[var(--descrip-text)]">{{
-      label
-    }}</span>
-    <input
-      type="range"
-      class="maskEditor_sidePanelBrushRange"
-      :min="min"
-      :max="max"
-      :step="step"
-      :value="modelValue"
-      @input="onInput"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-interface Props {
-  label: string
-  min: number
-  max: number
-  step?: number
-  modelValue: number
-}
-
-withDefaults(defineProps<Props>(), {
-  step: 1
-})
-
-const emit = defineEmits<{
-  'update:modelValue': [value: number]
-}>()
-
-const onInput = (event: Event) => {
-  const value = Number((event.target as HTMLInputElement).value)
-  emit('update:modelValue', value)
-}
-</script>

src/components/maskeditor/controls/ToggleControl.vue

@@ -1,34 +0,0 @@
-<template>
-  <div class="flex flex-row gap-2.5 items-center min-h-6 relative">
-    <span class="text-left text-xs font-sans text-[var(--descrip-text)]">{{
-      label
-    }}</span>
-    <label class="maskEditor_sidePanelToggleContainer">
-      <input
-        type="checkbox"
-        class="maskEditor_sidePanelToggleCheckbox"
-        :checked="modelValue"
-        @change="onChange"
-      />
-      <div class="maskEditor_sidePanelToggleSwitch"></div>
-    </label>
-  </div>
-</template>
-
-<script setup lang="ts">
-interface Props {
-  label: string
-  modelValue: boolean
-}
-
-defineProps<Props>()
-
-const emit = defineEmits<{
-  'update:modelValue': [value: boolean]
-}>()
-
-const onChange = (event: Event) => {
-  const checked = (event.target as HTMLInputElement).checked
-  emit('update:modelValue', checked)
-}
-</script>

src/components/maskeditor/dialog/TopBarHeader.vue

@@ -1,126 +0,0 @@
-<template>
-  <div class="flex w-full items-center justify-between gap-3">
-    <div class="flex items-center gap-3">
-      <h3 class="m-0 text-lg font-semibold">{{ t('maskEditor.title') }}</h3>
-
-      <div class="flex items-center gap-4">
-        <button
-          :class="iconButtonClass"
-          :title="t('maskEditor.undo')"
-          @click="onUndo"
-        >
-          <svg
-            viewBox="0 0 15 15"
-            class="h-6.25 w-6.25 pointer-events-none fill-[var(--input-text)]"
-          >
-            <path
-              d="M8.77,12.18c-.25,0-.46-.2-.46-.46s.2-.46.46-.46c1.47,0,2.67-1.2,2.67-2.67,0-1.57-1.34-2.67-3.26-2.67h-3.98l1.43,1.43c.18.18.18.47,0,.64-.18.18-.47.18-.64,0l-2.21-2.21c-.18-.18-.18-.47,0-.64l2.21-2.21c.18-.18.47-.18.64,0,.18.18.18.47,0,.64l-1.43,1.43h3.98c2.45,0,4.17,1.47,4.17,3.58,0,1.97-1.61,3.58-3.58,3.58Z"
-            />
-          </svg>
-        </button>
-
-        <button
-          :class="iconButtonClass"
-          :title="t('maskEditor.redo')"
-          @click="onRedo"
-        >
-          <svg
-            viewBox="0 0 15 15"
-            class="h-6.25 w-6.25 pointer-events-none fill-[var(--input-text)]"
-          >
-            <path
-              class="cls-1"
-              d="M6.23,12.18c-1.97,0-3.58-1.61-3.58-3.58,0-2.11,1.71-3.58,4.17-3.58h3.98l-1.43-1.43c-.18-.18-.18-.47,0-.64.18-.18.46-.18.64,0l2.21,2.21c.09.09.13.2.13.32s-.05.24-.13.32l-2.21,2.21c-.18.18-.47.18-.64,0-.18-.18-.18-.47,0-.64l1.43-1.43h-3.98c-1.92,0-3.26,1.1-3.26,2.67,0,1.47,1.2,2.67,2.67,2.67.25,0,.46.2.46.46s-.2.46-.46.46Z"
-            />
-          </svg>
-        </button>
-
-        <button :class="textButtonClass" @click="onInvert">
-          {{ t('maskEditor.invert') }}
-        </button>
-
-        <button :class="textButtonClass" @click="onClear">
-          {{ t('maskEditor.clear') }}
-        </button>
-      </div>
-    </div>
-
-    <div class="flex gap-3">
-      <Button
-        :label="saveButtonText"
-        icon="pi pi-check"
-        size="small"
-        :disabled="!saveEnabled"
-        @click="handleSave"
-      />
-      <Button
-        :label="t('g.cancel')"
-        icon="pi pi-times"
-        size="small"
-        severity="secondary"
-        @click="handleCancel"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import Button from 'primevue/button'
-import { ref } from 'vue'
-
-import { useCanvasTools } from '@/composables/maskeditor/useCanvasTools'
-import { useMaskEditorSaver } from '@/composables/maskeditor/useMaskEditorSaver'
-import { t } from '@/i18n'
-import { useDialogStore } from '@/stores/dialogStore'
-import { useMaskEditorStore } from '@/stores/maskEditorStore'
-
-const store = useMaskEditorStore()
-const dialogStore = useDialogStore()
-const canvasTools = useCanvasTools()
-const saver = useMaskEditorSaver()
-
-const saveButtonText = ref(t('g.save'))
-const saveEnabled = ref(true)
-
-const iconButtonClass =
-  'flex h-7.5 w-12.5 items-center justify-center rounded-[10px] border border-[var(--p-form-field-border-color)] pointer-events-auto transition-colors duration-100 bg-[var(--comfy-menu-bg)] hover:bg-[var(--p-surface-300)] dark-theme:bg-[var(--p-surface-800)] dark-theme:hover:bg-[var(--p-surface-900)]'
-
-const textButtonClass =
-  'h-7.5 w-15 rounded-[10px] border border-[var(--p-form-field-border-color)] text-[var(--input-text)] font-sans pointer-events-auto transition-colors duration-100 bg-[var(--comfy-menu-bg)] hover:bg-[var(--p-surface-300)] dark-theme:bg-[var(--p-surface-800)] dark-theme:hover:bg-[var(--p-surface-900)]'
-
-const onUndo = () => {
-  store.canvasHistory.undo()
-}
-
-const onRedo = () => {
-  store.canvasHistory.redo()
-}
-
-const onInvert = () => {
-  canvasTools.invertMask()
-}
-
-const onClear = () => {
-  canvasTools.clearMask()
-}
-
-const handleSave = async () => {
-  saveButtonText.value = t('g.saving')
-  saveEnabled.value = false
-
-  try {
-    store.brushVisible = false
-    await saver.save()
-    dialogStore.closeDialog()
-  } catch (error) {
-    console.error('[TopBarHeader] Save failed:', error)
-    store.brushVisible = true
-    saveButtonText.value = t('g.save')
-    saveEnabled.value = true
-  }
-}
-
-const handleCancel = () => {
-  dialogStore.closeDialog({ key: 'global-mask-editor' })
-}
-</script>

src/components/sidebar/ComfyMenuButton.vue

@@ -1,6 +1,5 @@
 <template>
   <div
-    ref="menuButtonRef"
     v-tooltip="{
       value: t('sideToolbar.labels.menu'),
       showDelay: 300,
@@ -30,7 +29,6 @@
   >
     <template #item="{ item, props }">
       <a
-        v-if="item.key !== 'nodes-2.0-toggle'"
         class="p-menubar-item-link px-4 py-2"
         v-bind="props.action"
         :href="item.url"
@@ -67,34 +65,6 @@
         </span>
         <i v-if="item.items" class="pi pi-angle-right ml-auto" />
       </a>
-      <div
-        v-else
-        class="flex items-center justify-between px-4 py-2"
-        @click.stop="handleNodes2ToggleClick"
-      >
-        <span class="p-menubar-item-label text-nowrap">{{ item.label }}</span>
-        <ToggleSwitch
-          v-model="nodes2Enabled"
-          class="ml-4"
-          :aria-label="item.label"
-          :pt="{
-            root: {
-              style: {
-                width: '38px',
-                height: '20px'
-              }
-            },
-            handle: {
-              style: {
-                width: '16px',
-                height: '16px'
-              }
-            }
-          }"
-          @click.stop
-          @update:model-value="onNodes2ToggleChange"
-        />
-      </div>
     </template>
   </TieredMenu>
 </template>
@@ -103,7 +73,6 @@
 import type { MenuItem } from 'primevue/menuitem'
 import TieredMenu from 'primevue/tieredmenu'
 import type { TieredMenuMethods, TieredMenuState } from 'primevue/tieredmenu'
-import ToggleSwitch from 'primevue/toggleswitch'
 import { computed, nextTick, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -111,7 +80,6 @@ import SettingDialogHeader from '@/components/dialog/header/SettingDialogHeader.
 import ComfyLogo from '@/components/icons/ComfyLogo.vue'
 import { useWorkflowTemplateSelectorDialog } from '@/composables/useWorkflowTemplateSelectorDialog'
 import SettingDialogContent from '@/platform/settings/components/SettingDialogContent.vue'
-import { useSettingStore } from '@/platform/settings/settingStore'
 import { useTelemetry } from '@/platform/telemetry'
 import { useColorPaletteService } from '@/services/colorPaletteService'
 import { useCommandStore } from '@/stores/commandStore'
@@ -130,19 +98,10 @@ const colorPaletteStore = useColorPaletteStore()
 const colorPaletteService = useColorPaletteService()
 const dialogStore = useDialogStore()
 const managerState = useManagerState()
-const settingStore = useSettingStore()
 
 const menuRef = ref<
   ({ dirty: boolean } & TieredMenuMethods & TieredMenuState) | null
 >(null)
-const menuButtonRef = ref<HTMLElement | null>(null)
-
-const nodes2Enabled = computed({
-  get: () => settingStore.get('Comfy.VueNodes.Enabled') ?? false,
-  set: async (value: boolean) => {
-    await settingStore.set('Comfy.VueNodes.Enabled', value)
-  }
-})
 
 const telemetry = useTelemetry()
 
@@ -205,10 +164,6 @@ const extraMenuItems = computed(() => [
     label: t('menu.theme'),
     items: themeMenuItems.value
   },
-  {
-    key: 'nodes-2.0-toggle',
-    label: 'Nodes 2.0'
-  },
   { separator: true },
   {
     key: 'browse-templates',
@@ -326,17 +281,6 @@ const hasActiveStateSiblings = (item: MenuItem): boolean => {
       menuItemStore.menuItemHasActiveStateChildren[item.parentPath])
   )
 }
-
-const handleNodes2ToggleClick = () => {
-  return false
-}
-
-const onNodes2ToggleChange = async (value: boolean) => {
-  await settingStore.set('Comfy.VueNodes.Enabled', value)
-  telemetry?.trackUiButtonClicked({
-    button_id: `menu_nodes_2.0_toggle_${value ? 'enabled' : 'disabled'}`
-  })
-}
 </script>
 
 <style scoped>

src/components/sidebar/SideToolbar.vue

@@ -1,7 +1,7 @@
 <template>
   <nav
     ref="sideToolbarRef"
-    class="side-tool-bar-container flex h-full flex-col items-center bg-transparent [.floating-sidebar]:-mr-2 pointer-events-auto"
+    class="side-tool-bar-container flex h-full flex-col items-center bg-transparent [.floating-sidebar]:-mr-2"
     :class="{
       'small-sidebar': isSmall,
       'connected-sidebar': isConnected,
@@ -145,7 +145,7 @@ const getTabTooltipSuffix = (tab: SidebarTabExtension) => {
 const isOverflowing = ref(false)
 const groupClasses = computed(() =>
   cn(
-    'sidebar-item-group flex flex-col items-center overflow-hidden flex-shrink-0' +
+    'sidebar-item-group pointer-events-auto flex flex-col items-center overflow-hidden flex-shrink-0' +
       (isConnected.value ? '' : ' rounded-lg shadow-interface')
   )
 )

src/components/sidebar/tabs/AssetSidebarTemplate.vue

@@ -10,12 +10,12 @@
       >
         <slot name="top" />
       </div>
-      <div v-if="slots.header" class="px-4 pb-4">
+      <div v-if="slots.header" class="px-4">
         <slot name="header" />
       </div>
     </div>
-    <!-- min-h-0 to force scrollpanel to grow -->
-    <ScrollPanel class="min-h-0 grow">
+    <!-- h-0 to force scrollpanel to grow -->
+    <ScrollPanel class="h-0 grow">
       <slot name="body" />
     </ScrollPanel>
     <div v-if="slots.footer">