make Vue nodes' outputs/previews responsively sized and work with node resizing (#5970)

## Summary

Added dedicated component for sampling previews and change all image
outputs (outputs, videos, previews) to be responsive and respond to node
resizing.



https://github.com/user-attachments/assets/7e683d32-4914-460c-ba08-4573c40aef24

## Changes

- **What**: Implemented `LivePreview` component for mid-execution
sampling visualization with responsive layout system
- **Dependencies**: Added resize handle composable and transform state
integration

## Review Focus

Node resize interaction conflicts with canvas dragging, and image
dimension calculation performance during rapid sampling updates.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5970-make-Vue-nodes-outputs-previews-responsively-sized-and-work-with-node-resizing-2866d73d365081508d53e6e286a9a3fe)
by [Unito](https://www.unito.io)

---------

Co-authored-by: DrJKL <DrJKL@users.noreply.github.com>
Co-authored-by: GitHub Action <action@github.com>
Co-authored-by: github-actions <github-actions@github.com>

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

@@ -0,0 +1,55 @@
+name: Setup ComfyUI Server
+description: 'Setup ComfyUI server for continuous integration (with ComfyUI_devtools node installed)'
+inputs:
+  extra_server_params:
+    description: 'Additional parameters to pass to ComfyUI server'
+    required: false
+    default: ''
+  launch_server:
+    description: 'Whether to launch the server after setup'
+    required: false
+    default: 'false'
+runs:
+  using: 'composite'
+  steps:
+    # Note: this workflow assume frontend repo is checked out and is built in ../dist
+
+    # Checkout ComfyUI repo, install the dev_tools node and start server
+    - name: Checkout ComfyUI
+      uses: actions/checkout@v5
+      with:
+        repository: 'comfyanonymous/ComfyUI'
+        path: 'ComfyUI'
+
+    - name: Install ComfyUI_devtools from frontend repo
+      shell: bash
+      run: |
+        mkdir -p ComfyUI/custom_nodes/ComfyUI_devtools
+        if ! cp -r ./tools/devtools/* ComfyUI/custom_nodes/ComfyUI_devtools/; then
+          echo "::error::Failed to copy ComfyUI_devtools from ./tools/devtools/"
+          echo "::error::This action assumes the ComfyUI_frontend repository is checked out in the current working directory."
+          echo "::error::Please ensure you have run 'actions/checkout@v5' before calling this action."
+          exit 1
+        fi
+
+    - name: Setup Python
+      uses: actions/setup-python@v4
+      with:
+        python-version: '3.10'
+
+    - name: Install Python requirements
+      shell: bash
+      working-directory: ComfyUI
+      run: |
+        python -m pip install --upgrade pip
+        pip install torch torchvision torchaudio --index-url https://download.pytorch.org/whl/cpu
+        pip install -r requirements.txt
+        pip install wait-for-it
+
+    - name: Start ComfyUI server
+      if: ${{ inputs.launch_server == 'true' }}
+      shell: bash
+      working-directory: ComfyUI
+      run: |
+        python main.py --cpu --multi-user --front-end-root ../dist ${{ inputs.extra_server_params }} &
+        wait-for-it --service 127.0.0.1:8188 -t 600

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

@@ -1,31 +1,16 @@
-name: Setup Frontend
-description: 'Setup ComfyUI frontend development environment'
+name: Setup ComfyUI Frontend
+description: 'Install nodejs/pnpm/dependencies and optionally build ComfyUI_frontend'
 inputs:
-  extra_server_params:
-    description: 'Additional parameters to pass to ComfyUI server'
+  include_build_step:
+    description: 'Include the build step to build the frontend. Set to true for workflows that need a built frontend'
     required: false
-    default: ''
+    default: 'false'
 runs:
   using: 'composite'
   steps:
-    - name: Checkout ComfyUI
-      uses: actions/checkout@v4
-      with:
-        repository: 'comfyanonymous/ComfyUI'
-        path: 'ComfyUI'
-
-    - name: Checkout ComfyUI_frontend
-      uses: actions/checkout@v4
-      with:
-        repository: 'Comfy-Org/ComfyUI_frontend'
-        path: 'ComfyUI_frontend'
-
-    - name: Copy ComfyUI_devtools from frontend repo
-      shell: bash
-      run: |
-        mkdir -p ComfyUI/custom_nodes/ComfyUI_devtools
-        cp -r ComfyUI_frontend/tools/devtools/* ComfyUI/custom_nodes/ComfyUI_devtools/
+    # Note: this workflow assume frontend repo is checked out in the root of the workspace
 
+    # Install pnpm, Node.js, build frontend
     - name: Install pnpm
       uses: pnpm/action-setup@v4
       with:
@@ -36,32 +21,25 @@ runs:
       with:
         node-version: 'lts/*'
         cache: 'pnpm'
-        cache-dependency-path: 'ComfyUI_frontend/pnpm-lock.yaml'
+        cache-dependency-path: './pnpm-lock.yaml'
 
-    - name: Setup Python
-      uses: actions/setup-python@v4
+    # Restore tool caches before running any build/lint operations
+    - name: Restore tool output cache
+      uses: actions/cache/restore@v4
       with:
-        python-version: '3.10'
+        path: |
+          ./.cache
+          ./tsconfig.tsbuildinfo
+        key: tool-cache-${{ runner.os }}-${{ hashFiles('./pnpm-lock.yaml') }}-${{ hashFiles('./src/**/*.{ts,vue,js,mts}', './*.config.*') }}
+        restore-keys: |
+          tool-cache-${{ runner.os }}-${{ hashFiles('./pnpm-lock.yaml') }}-
+          tool-cache-${{ runner.os }}-
 
-    - name: Install Python requirements
+    - name: Install dependencies
       shell: bash
-      working-directory: ComfyUI
-      run: |
-        python -m pip install --upgrade pip
-        pip install torch torchvision torchaudio --index-url https://download.pytorch.org/whl/cpu
-        pip install -r requirements.txt
-        pip install wait-for-it
+      run: pnpm install --frozen-lockfile
 
-    - name: Build & Install ComfyUI_frontend
+    - name: Build ComfyUI_frontend
+      if: ${{ inputs.include_build_step == 'true' }}
       shell: bash
-      working-directory: ComfyUI_frontend
-      run: |
-        pnpm install --frozen-lockfile
-        pnpm build
-
-    - name: Start ComfyUI server
-      shell: bash
-      working-directory: ComfyUI
-      run: |
-        python main.py --cpu --multi-user --front-end-root ../ComfyUI_frontend/dist ${{ inputs.extra_server_params }} &
-        wait-for-it --service 127.0.0.1:8188 -t 600
+      run: pnpm build

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

@@ -6,7 +6,6 @@ runs:
     - name: Detect Playwright version
       id: detect-version
       shell: bash
-      working-directory: ComfyUI_frontend
       run: |
         PLAYWRIGHT_VERSION=$(pnpm ls @playwright/test --json | jq --raw-output '.[0].devDependencies["@playwright/test"].version')
         echo "playwright-version=$PLAYWRIGHT_VERSION" >> $GITHUB_OUTPUT
@@ -22,10 +21,8 @@ runs:
       if: steps.cache-playwright-browsers.outputs.cache-hit != 'true'
       shell: bash
       run: pnpm exec playwright install chromium --with-deps
-      working-directory: ComfyUI_frontend
 
     - name: Install Playwright Browsers (operating system dependencies)
       if: steps.cache-playwright-browsers.outputs.cache-hit == 'true'
       shell: bash
       run: pnpm exec playwright install-deps
-      working-directory: ComfyUI_frontend

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

@@ -11,6 +11,10 @@ on:
   pull_request:
     types: [labeled]
 
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
 jobs:
   wait-for-ci:
     runs-on: ubuntu-latest
@@ -73,10 +77,10 @@ jobs:
         with:
           label_trigger: "claude-review"
           prompt: |
-            Read the file .claude/commands/comprehensive-pr-review.md and follow ALL the instructions exactly. 
-            
-            CRITICAL: You must post individual inline comments using the gh api commands shown in the file. 
-            DO NOT create a summary comment. 
+            Read the file .claude/commands/comprehensive-pr-review.md and follow ALL the instructions exactly.
+
+            CRITICAL: You must post individual inline comments using the gh api commands shown in the file.
+            DO NOT create a summary comment.
             Each issue must be posted as a separate inline comment on the specific line of code.
           anthropic_api_key: ${{ secrets.ANTHROPIC_API_KEY }}
           claude_args: "--max-turns 256 --allowedTools 'Bash(git:*),Bash(gh api:*),Bash(gh pr:*),Bash(gh repo:*),Bash(jq:*),Bash(echo:*),Read,Write,Edit,Glob,Grep,WebFetch'"
@@ -86,3 +90,9 @@ jobs:
           COMMIT_SHA: ${{ github.event.pull_request.head.sha }}
           BASE_SHA: ${{ github.event.pull_request.base.sha }}
           REPOSITORY: ${{ github.repository }}
+
+      - name: Remove claude-review label
+        if: always()
+        run: gh pr edit ${{ github.event.pull_request.number }} --remove-label "claude-review"
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

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

@@ -4,6 +4,10 @@ on:
   pull_request:
     branches-ignore: [wip/*, draft/*, temp/*]
 
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
 permissions:
   contents: write
   pull-requests: write

.github/workflows/tests-ci.yaml

@@ -7,70 +7,37 @@ on:
     branches-ignore:
       [wip/*, draft/*, temp/*, vue-nodes-migration, sno-playwright-*]
 
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
 jobs:
   setup:
     runs-on: ubuntu-latest
     outputs:
       cache-key: ${{ steps.cache-key.outputs.key }}
     steps:
-      - name: Checkout ComfyUI
+      - name: Checkout repository
         uses: actions/checkout@v5
+
+      # Setup Test Environment, build frontend but do not start server yet
+      - name: Setup ComfyUI server
+        uses: ./.github/actions/setup-comfyui-server
+      - name: Setup frontend
+        uses: ./.github/actions/setup-frontend
         with:
-          repository: 'comfyanonymous/ComfyUI'
-          path: 'ComfyUI'
-          ref: master
-
-      - name: Checkout ComfyUI_frontend
-        uses: actions/checkout@v5
-        with:
-          repository: 'Comfy-Org/ComfyUI_frontend'
-          path: 'ComfyUI_frontend'
-
-      - name: Copy ComfyUI_devtools from frontend repo
-        run: |
-          mkdir -p ComfyUI/custom_nodes/ComfyUI_devtools
-          cp -r ComfyUI_frontend/tools/devtools/* ComfyUI/custom_nodes/ComfyUI_devtools/
-
-      - name: Install pnpm
-        uses: pnpm/action-setup@v4
-        with:
-          version: 10
-
-      - uses: actions/setup-node@v4
-        with:
-          node-version: lts/*
-          cache: 'pnpm'
-          cache-dependency-path: 'ComfyUI_frontend/pnpm-lock.yaml'
-
-      - name: Cache tool outputs
-        uses: actions/cache@v4
-        with:
-          path: |
-            ComfyUI_frontend/.cache
-            ComfyUI_frontend/tsconfig.tsbuildinfo
-          key: playwright-setup-cache-${{ runner.os }}-${{ hashFiles('ComfyUI_frontend/pnpm-lock.yaml') }}-${{ hashFiles('ComfyUI_frontend/src/**/*.{ts,vue,js}', 'ComfyUI_frontend/*.config.*') }}
-          restore-keys: |
-            playwright-setup-cache-${{ runner.os }}-${{ hashFiles('ComfyUI_frontend/pnpm-lock.yaml') }}-
-            playwright-setup-cache-${{ runner.os }}-
-            playwright-tools-cache-${{ runner.os }}-
-
-      - name: Build ComfyUI_frontend
-        run: |
-          pnpm install --frozen-lockfile
-          pnpm build
-        working-directory: ComfyUI_frontend
+          include_build_step: true
+      - name: Setup Playwright
+        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
         id: cache-key
         run: echo "key=$(date +%s)" >> $GITHUB_OUTPUT
-
-
       - name: Save cache
         uses: actions/cache/save@5a3ec84eff668545956fd18022155c47e93e2684
         with:
-          path: |
-            ComfyUI
-            ComfyUI_frontend
+          path: .
           key: comfyui-setup-${{ steps.cache-key.outputs.key }}
 
   # Sharded chromium tests
@@ -85,54 +52,35 @@ jobs:
         shardIndex: [1, 2, 3, 4, 5, 6, 7, 8]
         shardTotal: [8]
     steps:
+      # download built frontend repo from setup job
       - name: Wait for cache propagation
         run: sleep 10
-
       - name: Restore cached setup
-        uses: actions/cache/restore@v4
+        uses: actions/cache/restore@5a3ec84eff668545956fd18022155c47e93e2684
         with:
           fail-on-cache-miss: true
-          path: |
-            ComfyUI
-            ComfyUI_frontend
+          path: .
           key: comfyui-setup-${{ needs.setup.outputs.cache-key }}
 
-      - name: Install pnpm
-        uses: pnpm/action-setup@v4
+      # Setup Test Environment for this runner, start server, use cached built frontend ./dist from 'setup' job
+      - name: Setup ComfyUI server
+        uses: ./.github/actions/setup-comfyui-server
         with:
-          version: 10
-
-      - uses: actions/setup-python@v4
-        with:
-          python-version: '3.10'
-          cache: 'pip'
-
-      - name: Install requirements
-        run: |
-          python -m pip install --upgrade pip
-          pip install torch torchvision torchaudio --index-url https://download.pytorch.org/whl/cpu
-          pip install -r requirements.txt
-          pip install wait-for-it
-        working-directory: ComfyUI
-
-
+          launch_server: true
+      - name: Setup nodejs, pnpm, reuse built frontend
+        uses: ./.github/actions/setup-frontend
       - name: Setup Playwright
-        uses: ./ComfyUI_frontend/.github/actions/setup-playwright
-
-      - name: Start ComfyUI server
-        run: |
-          python main.py --cpu --multi-user --front-end-root ../ComfyUI_frontend/dist &
-          wait-for-it --service 127.0.0.1:8188 -t 600
-        working-directory: ComfyUI
+        uses: ./.github/actions/setup-playwright
 
+      # Run sharded tests and upload sharded reports
       - name: Run Playwright tests (Shard ${{ matrix.shardIndex }}/${{ matrix.shardTotal }})
         id: playwright
         run: pnpm exec playwright test --project=chromium --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }} --reporter=blob
-        working-directory: ComfyUI_frontend
         env:
-          PLAYWRIGHT_BLOB_OUTPUT_DIR: ../blob-report
+          PLAYWRIGHT_BLOB_OUTPUT_DIR: ./blob-report
 
-      - uses: actions/upload-artifact@v4
+      - name: Upload blob report
+        uses: actions/upload-artifact@v4
         if: ${{ !cancelled() }}
         with:
           name: blob-report-chromium-${{ matrix.shardIndex }}
@@ -151,45 +99,27 @@ jobs:
       matrix:
         browser: [chromium-2x, chromium-0.5x, mobile-chrome]
     steps:
+      # download built frontend repo from setup job
       - name: Wait for cache propagation
         run: sleep 10
-
       - name: Restore cached setup
-        uses: actions/cache/restore@v4
+        uses: actions/cache/restore@5a3ec84eff668545956fd18022155c47e93e2684
         with:
           fail-on-cache-miss: true
-          path: |
-            ComfyUI
-            ComfyUI_frontend
+          path: .
           key: comfyui-setup-${{ needs.setup.outputs.cache-key }}
 
-      - name: Install pnpm
-        uses: pnpm/action-setup@v4
+      # Setup Test Environment for this runner, start server, use cached built frontend ./dist from 'setup' job
+      - name: Setup ComfyUI server
+        uses: ./.github/actions/setup-comfyui-server
         with:
-          version: 10
-
-      - uses: actions/setup-python@v4
-        with:
-          python-version: '3.10'
-          cache: 'pip'
-
-      - name: Install requirements
-        run: |
-          python -m pip install --upgrade pip
-          pip install torch torchvision torchaudio --index-url https://download.pytorch.org/whl/cpu
-          pip install -r requirements.txt
-          pip install wait-for-it
-        working-directory: ComfyUI
-
+          launch_server: true
+      - name: Setup nodejs, pnpm, reuse built frontend
+        uses: ./.github/actions/setup-frontend
       - name: Setup Playwright
-        uses: ./ComfyUI_frontend/.github/actions/setup-playwright
-
-      - name: Start ComfyUI server
-        run: |
-          python main.py --cpu --multi-user --front-end-root ../ComfyUI_frontend/dist &
-          wait-for-it --service 127.0.0.1:8188 -t 600
-        working-directory: ComfyUI
+        uses: ./.github/actions/setup-playwright
 
+      # Run tests and upload reports
       - name: Run Playwright tests (${{ matrix.browser }})
         id: playwright
         run: |
@@ -199,13 +129,13 @@ jobs:
             --reporter=list \
             --reporter=html \
             --reporter=json
-        working-directory: ComfyUI_frontend
 
-      - uses: actions/upload-artifact@v4
+      - name: Upload Playwright report
+        uses: actions/upload-artifact@v4
         if: always()
         with:
           name: playwright-report-${{ matrix.browser }}
-          path: ComfyUI_frontend/playwright-report/
+          path: ./playwright-report/
           retention-days: 30
 
   # Merge sharded test reports
@@ -214,32 +144,19 @@ jobs:
     runs-on: ubuntu-latest
     if: ${{ !cancelled() }}
     steps:
-      - name: Checkout ComfyUI_frontend
+      - name: Checkout repository
         uses: actions/checkout@v5
-        with:
-          repository: 'Comfy-Org/ComfyUI_frontend'
-          path: 'ComfyUI_frontend'
 
-      - name: Install pnpm
-        uses: pnpm/action-setup@v4
-        with:
-          version: 10
-
-      - uses: actions/setup-node@v4
-        with:
-          node-version: lts/*
-          cache: 'pnpm'
-          cache-dependency-path: 'ComfyUI_frontend/pnpm-lock.yaml'
-
-      - name: Install dependencies
-        run: |
-          pnpm install --frozen-lockfile
-        working-directory: ComfyUI_frontend
+      # Setup Test Environment, we only need playwright to merge reports
+      - name: Setup frontend
+        uses: ./.github/actions/setup-frontend
+      - name: Setup Playwright
+        uses: ./.github/actions/setup-playwright
 
       - name: Download blob reports
         uses: actions/download-artifact@v4
         with:
-          path: ComfyUI_frontend/all-blob-reports
+          path: ./all-blob-reports
           pattern: blob-report-chromium-*
           merge-multiple: true
 
@@ -250,13 +167,12 @@ jobs:
           # Generate JSON report separately with explicit output path
           PLAYWRIGHT_JSON_OUTPUT_NAME=playwright-report/report.json \
           pnpm exec playwright merge-reports --reporter=json ./all-blob-reports
-        working-directory: ComfyUI_frontend
 
       - name: Upload HTML report
         uses: actions/upload-artifact@v4
         with:
           name: playwright-report-chromium
-          path: ComfyUI_frontend/playwright-report/
+          path: ./playwright-report/
           retention-days: 30
 
   #### BEGIN Deployment and commenting (non-forked PRs only)
@@ -272,11 +188,11 @@ jobs:
     steps:
       - name: Checkout repository
         uses: actions/checkout@v5
-        
+
       - name: Get start time
         id: start-time
         run: echo "time=$(date -u '+%m/%d/%Y, %I:%M:%S %p')" >> $GITHUB_OUTPUT
-        
+
       - name: Post starting comment
         env:
           GITHUB_TOKEN: ${{ github.token }}
@@ -287,7 +203,7 @@ jobs:
             "${{ github.head_ref }}" \
             "starting" \
             "${{ steps.start-time.outputs.time }}"
-          
+
   # Deploy and comment for non-forked PRs only
   deploy-and-comment:
     needs: [playwright-tests, merge-reports]
@@ -299,23 +215,20 @@ jobs:
     steps:
       - name: Checkout repository
         uses: actions/checkout@v5
-        
+
       - name: Download all playwright reports
         uses: actions/download-artifact@v4
         with:
           pattern: playwright-report-*
           path: reports
-          
-      - name: Make deployment script executable
-        run: chmod +x scripts/cicd/pr-playwright-deploy-and-comment.sh
-        
+
       - name: Deploy reports and comment on PR
         env:
           CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
           CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
           GITHUB_TOKEN: ${{ github.token }}
         run: |
-          ./scripts/cicd/pr-playwright-deploy-and-comment.sh \
+          bash ./scripts/cicd/pr-playwright-deploy-and-comment.sh \
             "${{ github.event.pull_request.number }}" \
             "${{ github.head_ref }}" \
             "completed"

.github/workflows/update-locales-for-given-custom-node-repository.yaml

@@ -21,90 +21,64 @@ jobs:
   update-locales:
     runs-on: ubuntu-latest
     steps:
-    - name: Checkout ComfyUI
+    - 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:
-        repository: comfyanonymous/ComfyUI
-        path: ComfyUI
-        ref: master
-    - name: Checkout ComfyUI_frontend
-      uses: actions/checkout@v5
-      with:
-        repository: Comfy-Org/ComfyUI_frontend
-        path: ComfyUI_frontend
-    - name: Copy ComfyUI_devtools from frontend repo
-      run: |
-        mkdir -p ComfyUI/custom_nodes/ComfyUI_devtools
-        cp -r ComfyUI_frontend/tools/devtools/* ComfyUI/custom_nodes/ComfyUI_devtools/
+        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 pnpm
-      uses: pnpm/action-setup@v4
-      with:
-        version: 10
-    - uses: actions/setup-node@v4
-      with:
-        node-version: 'lts/*'
-        cache: 'pnpm'
-    - uses: actions/setup-python@v4
-      with:
-        python-version: '3.10'
-    - name: Install ComfyUI requirements
-      run: |
-        python -m pip install --upgrade pip
-        pip install torch torchvision torchaudio --index-url https://download.pytorch.org/whl/cpu
-        pip install -r requirements.txt
-        pip install wait-for-it
-      working-directory: ComfyUI
-    - name: Install custom node requirements
+    - 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
-      working-directory: ComfyUI/custom_nodes/${{ inputs.repository }}
-    - name: Build & Install ComfyUI_frontend
-      run: |
-        pnpm install --frozen-lockfile
-        pnpm build
-        rm -rf ../ComfyUI/web/*
-        mv dist/* ../ComfyUI/web/
-      working-directory: ComfyUI_frontend
-    - name: Start ComfyUI server
-      run: |
-        python main.py --cpu --multi-user &
-        wait-for-it --service 127.0.0.1:8188 -t 600
+
+    # Start ComfyUI Server
+    - name: Start ComfyUI Server
+      shell: bash
       working-directory: ComfyUI
-    - name: Setup Playwright
-      uses: ./ComfyUI_frontend/.github/actions/setup-playwright
+      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 &
-      working-directory: ComfyUI_frontend
+      
     - name: Capture base i18n
       run: pnpm exec tsx scripts/diff-i18n capture
-      working-directory: ComfyUI_frontend
     - name: Update en.json
       run: pnpm collect-i18n
       env:
         PLAYWRIGHT_TEST_URL: http://localhost:5173
-      working-directory: ComfyUI_frontend
     - name: Update translations
       run: pnpm locale
       env:
         OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
-      working-directory: ComfyUI_frontend
     - name: Diff base vs updated i18n
       run: pnpm exec tsx scripts/diff-i18n diff
-      working-directory: ComfyUI_frontend
     - 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

.github/workflows/update-locales.yaml

@@ -16,36 +16,33 @@ jobs:
     steps:
     - name: Checkout repository
       uses: actions/checkout@v5
-    
-    - name: Setup Frontend
-      uses: ./.github/actions/setup-frontend
-    
-    - name: Cache tool outputs
-      uses: actions/cache@v4
+
+    # Setup playwright environment
+    - name: Setup ComfyUI Server
+      uses: ./.github/actions/setup-comfyui-server
       with:
-        path: |
-          ComfyUI_frontend/.cache
-          ComfyUI_frontend/.cache
-        key: i18n-tools-cache-${{ runner.os }}-${{ hashFiles('ComfyUI_frontend/pnpm-lock.yaml') }}
-        restore-keys: |
-          i18n-tools-cache-${{ runner.os }}-
+        launch_server: true
+    - name: Setup ComfyUI 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 &
-      working-directory: ComfyUI_frontend
+
+    # 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
-      working-directory: ComfyUI_frontend
     - name: Update translations
       run: pnpm locale
       env:
         OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
-      working-directory: ComfyUI_frontend
     - name: Commit updated locales
       run: |
         git config --global user.name 'github-actions'
@@ -59,4 +56,3 @@ jobs:
         git add src/locales/
         git diff --staged --quiet || git commit -m "Update locales [skip ci]"
         git push origin HEAD:${{ github.head_ref }}
-      working-directory: ComfyUI_frontend

.github/workflows/update-node-definitions-locales.yaml

@@ -13,24 +13,32 @@ jobs:
   update-locales:
     runs-on: ubuntu-latest
     steps:
-    - uses: Comfy-Org/ComfyUI_frontend_setup_action@v3
+    - 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 &
-      working-directory: ComfyUI_frontend
     - name: Update en.json
       run: pnpm collect-i18n -- scripts/collect-i18n-node-defs.ts
       env:
         PLAYWRIGHT_TEST_URL: http://localhost:5173
-      working-directory: ComfyUI_frontend
     - name: Update translations
       run: pnpm locale
       env:
         OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
-      working-directory: ComfyUI_frontend
     - name: Create Pull Request
       uses: peter-evans/create-pull-request@271a8d0340265f705b14b6d32b9829c1cb33d45e
       with:
@@ -44,4 +52,3 @@ jobs:
         branch: update-locales-node-defs-${{ github.event.inputs.trigger_type }}-${{ github.run_id }}
         base: main
         labels: dependencies
-        path: ComfyUI_frontend

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

@@ -7,6 +7,10 @@ on:
   issue_comment:
     types: [created]
 
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
 jobs:
   test:
     runs-on: ubuntu-latest
@@ -21,40 +25,84 @@ jobs:
         ) &&
         startsWith(github.event.comment.body, '/update-playwright') )
     steps:
+      - name: Find Update Comment
+        uses: peter-evans/find-comment@b30e6a3c0ed37e7c023ccd3f1db5c6c0b0c23aad
+        id: "find-update-comment"
+        with:
+          issue-number: ${{ github.event.number || github.event.issue.number }}
+          comment-author: "github-actions[bot]"
+          body-includes: "Updating Playwright Expectations"
+
+      - name: Add Starting Reaction
+        uses: peter-evans/create-or-update-comment@e8674b075228eee787fea43ef493e45ece1004c9
+        with:
+          comment-id: ${{ steps.find-update-comment.outputs.comment-id }}
+          issue-number: ${{ github.event.number || github.event.issue.number }}
+          body: |
+            Updating Playwright Expectations
+          edit-mode: replace
+          reactions: eyes
+
+      - name: Get Branch SHA
+        id: "get-branch"
+        run: echo ::set-output name=branch::$(gh pr view $PR_NO --repo $REPO --json headRefName --jq '.headRefName')
+        env:
+          REPO: ${{ github.repository }}
+          PR_NO: ${{ github.event.number || github.event.issue.number }}
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
       - name: Initial Checkout
         uses: actions/checkout@v5
-      - name: Pull Request Checkout
-        run: gh pr checkout ${{ github.event.issue.number }}
-        if: github.event.issue.pull_request && github.event_name == 'issue_comment'
-        env:
-          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          ref: ${{ steps.get-branch.outputs.branch }}
       - name: Setup 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: Run Playwright tests and update snapshots
         id: playwright-tests
         run: pnpm exec playwright test --update-snapshots
         continue-on-error: true
-        working-directory: ComfyUI_frontend
       - uses: actions/upload-artifact@v4
         if: always()
         with:
           name: playwright-report
-          path: ComfyUI_frontend/playwright-report/
+          path: ./playwright-report/
           retention-days: 30
       - name: Debugging info
         run: |
           echo "PR: ${{ github.event.issue.number }}"
+          echo "Branch: ${{ steps.get-branch.outputs.branch }}"
           git status
-        working-directory: ComfyUI_frontend
       - name: Commit updated expectations
         run: |
           git config --global user.name 'github-actions'
           git config --global user.email 'github-actions@github.com'
           git add browser_tests
-          git diff --cached --quiet || git commit -m "[automated] Update test expectations"
-          git push
+          if git diff --cached --quiet; then
+            echo "No changes to commit"
+          else
+            git commit -m "[automated] Update test expectations"
+            git push origin ${{ steps.get-branch.outputs.branch }}
+          fi
+
+      - name: Add Done Reaction
+        uses: peter-evans/create-or-update-comment@e8674b075228eee787fea43ef493e45ece1004c9
+        if: github.event_name == 'issue_comment'
+        with:
+          comment-id: ${{ steps.find-update-comment.outputs.comment-id }}
+          issue-number: ${{ github.event.number || github.event.issue.number }}
+          reactions: +1
+          reactions-edit-mode: replace
+
+      - name: Remove New Browser Test Expectations label
+        if: always() && github.event_name == 'pull_request'
+        run: gh pr edit ${{ github.event.pull_request.number }} --remove-label "New Browser Test Expectations"
         env:
           GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        working-directory: ComfyUI_frontend

.github/workflows/vitest-tests.yaml

@@ -6,6 +6,10 @@ on:
   pull_request:
     branches-ignore: [wip/*, draft/*, temp/*]
 
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
 jobs:
   test:
     runs-on: ubuntu-latest

AGENTS.md

@@ -5,7 +5,7 @@
 - Routing/i18n/entry: `src/router.ts`, `src/i18n.ts`, `src/main.ts`.
 - Tests: unit/component in `tests-ui/` and `src/components/**/*.{test,spec}.ts`; E2E in `browser_tests/`.
 - Public assets: `public/`. Build output: `dist/`.
-- Config: `vite.config.mts`, `vitest.config.ts`, `playwright.config.ts`, `eslint.config.js`, `.prettierrc`.
+- Config: `vite.config.mts`, `vitest.config.ts`, `playwright.config.ts`, `eslint.config.ts`, `.prettierrc`.
 
 ## Build, Test, and Development Commands
 - `pnpm dev`: Start Vite dev server.

CLAUDE.md

@@ -126,6 +126,5 @@ const value = api.getServerFeature('config_name', defaultValue)  // Get config
 - NEVER use `--no-verify` flag when committing
 - NEVER delete or disable tests to make them pass
 - NEVER circumvent quality checks
-- NEVER use `dark:` prefix - always use `dark-theme:` for dark mode styles, for example: `dark-theme:text-white dark-theme:bg-black`
-- NEVER use `:class="[]"` to merge class names - always use `import { cn } from '@/utils/tailwindUtil'`, for example: `<div :class="cn('bg-red-500', { 'bg-blue-500': condition })" />`
-
+- NEVER use `dark:` or `dark-theme:` tailwind variants. Instead use a semantic value from the `style.css` theme, e.g. `bg-node-component-surface`
+- NEVER use `:class="[]"` to merge class names - always use `import { cn } from '@/utils/tailwindUtil'`, for example: `<div :class="cn('text-node-component-header-icon', hasError && 'text-danger')" />`

CODEOWNERS

@@ -54,3 +54,10 @@
 
 # Translations
 /src/locales/                                     @Yorha4D @KarryCharon @shinshin86 @Comfy-Org/comfy_maintainer
+
+# LLM Instructions (blank on purpose)
+.claude/
+.cursor/
+.cursorrules
+**/AGENTS.md
+**/CLAUDE.md

browser_tests/assets/vueNodes/linked-int-widget.json

@@ -0,0 +1,90 @@
+{
+  "id": "95ea19ba-456c-46e8-aa40-dc3ff135b746",
+  "revision": 0,
+  "last_node_id": 11,
+  "last_link_id": 10,
+  "nodes": [
+    {
+      "id": 10,
+      "type": "KSampler",
+      "pos": [494.3333740234375, 142.3333282470703],
+      "size": [444, 399],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "model",
+          "type": "MODEL",
+          "link": null
+        },
+        {
+          "name": "positive",
+          "type": "CONDITIONING",
+          "link": null
+        },
+        {
+          "name": "negative",
+          "type": "CONDITIONING",
+          "link": null
+        },
+        {
+          "name": "latent_image",
+          "type": "LATENT",
+          "link": null
+        },
+        {
+          "name": "seed",
+          "type": "INT",
+          "widget": {
+            "name": "seed"
+          },
+          "link": 10
+        }
+      ],
+      "outputs": [
+        {
+          "name": "LATENT",
+          "type": "LATENT",
+          "links": null
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "KSampler"
+      },
+      "widgets_values": [67, "randomize", 20, 8, "euler", "simple", 1]
+    },
+    {
+      "id": 11,
+      "type": "PrimitiveInt",
+      "pos": [24.333343505859375, 149.6666717529297],
+      "size": [444, 125],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "INT",
+          "type": "INT",
+          "links": [10]
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "PrimitiveInt"
+      },
+      "widgets_values": [67, "randomize"]
+    }
+  ],
+  "links": [[10, 11, 0, 10, 4, "INT"]],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 1,
+      "offset": [0, 0]
+    },
+    "frontendVersion": "1.28.6"
+  },
+  "version": 0.4
+}

browser_tests/fixtures/VueNodeHelpers.ts

@@ -119,4 +119,24 @@ export class VueNodeHelpers {
       await this.page.waitForSelector('[data-node-id]')
     }
   }
+
+  /**
+   * Get a specific widget by node title and widget name
+   */
+  getWidgetByName(nodeTitle: string, widgetName: string): Locator {
+    return this.getNodeByTitle(nodeTitle).locator(
+      `_vue=[widget.name="${widgetName}"]`
+    )
+  }
+
+  /**
+   * Get controls for input number widgets (increment/decrement buttons and input)
+   */
+  getInputNumberControls(widget: Locator) {
+    return {
+      input: widget.locator('input'),
+      incrementButton: widget.locator('button').first(),
+      decrementButton: widget.locator('button').last()
+    }
+  }
 }

browser_tests/tests/minimap.spec.ts

@@ -66,12 +66,22 @@ test.describe('Minimap', () => {
     await comfyPage.nextFrame()
 
     await expect(minimapContainer).not.toBeVisible()
+
+    // Open zoom controls dropdown again
+    await zoomControlsButton.click()
+    await comfyPage.nextFrame()
+
     await expect(toggleButton).toContainText('Show Minimap')
 
     await toggleButton.click()
     await comfyPage.nextFrame()
 
     await expect(minimapContainer).toBeVisible()
+
+    // Open zoom controls dropdown again to verify button text
+    await zoomControlsButton.click()
+    await comfyPage.nextFrame()
+
     await expect(toggleButton).toContainText('Hide Minimap')
   })
 

browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts

@@ -788,4 +788,171 @@ test.describe('Vue Node Link Interaction', () => {
       targetSlot: 2
     })
   })
+
+  test.describe('Release actions (Shift-drop)', () => {
+    test('Context menu opens and endpoint is pinned on Shift-drop', async ({
+      comfyPage,
+      comfyMouse
+    }) => {
+      await comfyPage.setSetting(
+        'Comfy.LinkRelease.ActionShift',
+        'context menu'
+      )
+
+      const samplerNode = (await comfyPage.getNodeRefsByType('KSampler'))[0]
+      expect(samplerNode).toBeTruthy()
+
+      const outputCenter = await getSlotCenter(
+        comfyPage.page,
+        samplerNode.id,
+        0,
+        false
+      )
+
+      const dropPos = { x: outputCenter.x + 180, y: outputCenter.y - 140 }
+
+      await comfyMouse.move(outputCenter)
+      await comfyPage.page.keyboard.down('Shift')
+      try {
+        await comfyMouse.drag(dropPos)
+        await comfyMouse.drop()
+      } finally {
+        await comfyPage.page.keyboard.up('Shift').catch(() => {})
+      }
+
+      // Context menu should be visible
+      const contextMenu = comfyPage.page.locator('.litecontextmenu')
+      await expect(contextMenu).toBeVisible()
+
+      // Pinned endpoint should not change with mouse movement while menu is open
+      const before = await comfyPage.page.evaluate(() => {
+        const snap = window['app']?.canvas?.linkConnector?.state?.snapLinksPos
+        return Array.isArray(snap) ? [snap[0], snap[1]] : null
+      })
+      expect(before).not.toBeNull()
+
+      // Move mouse elsewhere and verify snap position is unchanged
+      await comfyMouse.move({ x: dropPos.x + 160, y: dropPos.y + 100 })
+      const after = await comfyPage.page.evaluate(() => {
+        const snap = window['app']?.canvas?.linkConnector?.state?.snapLinksPos
+        return Array.isArray(snap) ? [snap[0], snap[1]] : null
+      })
+      expect(after).toEqual(before)
+    })
+
+    test('Context menu -> Search pre-filters by link type and connects after selection', async ({
+      comfyPage,
+      comfyMouse
+    }) => {
+      await comfyPage.setSetting(
+        'Comfy.LinkRelease.ActionShift',
+        'context menu'
+      )
+      await comfyPage.setSetting('Comfy.NodeSearchBoxImpl', 'default')
+
+      const samplerNode = (await comfyPage.getNodeRefsByType('KSampler'))[0]
+      expect(samplerNode).toBeTruthy()
+
+      const outputCenter = await getSlotCenter(
+        comfyPage.page,
+        samplerNode.id,
+        0,
+        false
+      )
+      const dropPos = { x: outputCenter.x + 200, y: outputCenter.y - 120 }
+
+      await comfyMouse.move(outputCenter)
+      await comfyPage.page.keyboard.down('Shift')
+      try {
+        await comfyMouse.drag(dropPos)
+        await comfyMouse.drop()
+      } finally {
+        await comfyPage.page.keyboard.up('Shift').catch(() => {})
+      }
+
+      // Open Search from the context menu
+      await comfyPage.clickContextMenuItem('Search')
+
+      // Search box opens with prefilled type filter based on link type (LATENT)
+      await expect(comfyPage.searchBox.input).toBeVisible()
+      const chips = comfyPage.searchBox.filterChips
+      // Ensure at least one filter chip exists and it matches the link type
+      const chipCount = await chips.count()
+      expect(chipCount).toBeGreaterThan(0)
+      await expect(chips.first()).toContainText('LATENT')
+
+      // Choose a compatible node and verify it auto-connects
+      await comfyPage.searchBox.fillAndSelectFirstNode('VAEDecode')
+      await comfyPage.nextFrame()
+
+      // KSampler output should now have an outgoing link
+      const samplerOutput = await samplerNode.getOutput(0)
+      expect(await samplerOutput.getLinkCount()).toBe(1)
+
+      // One of the VAEDecode nodes should have an incoming link on input[0]
+      const vaeNodes = await comfyPage.getNodeRefsByType('VAEDecode')
+      let linked = false
+      for (const vae of vaeNodes) {
+        const details = await getInputLinkDetails(comfyPage.page, vae.id, 0)
+        if (details) {
+          expect(details.originId).toBe(samplerNode.id)
+          linked = true
+          break
+        }
+      }
+      expect(linked).toBe(true)
+    })
+
+    test('Search box opens on Shift-drop and connects after selection', async ({
+      comfyPage,
+      comfyMouse
+    }) => {
+      await comfyPage.setSetting('Comfy.LinkRelease.ActionShift', 'search box')
+
+      const samplerNode = (await comfyPage.getNodeRefsByType('KSampler'))[0]
+      expect(samplerNode).toBeTruthy()
+
+      const outputCenter = await getSlotCenter(
+        comfyPage.page,
+        samplerNode.id,
+        0,
+        false
+      )
+      const dropPos = { x: outputCenter.x + 140, y: outputCenter.y - 100 }
+
+      await comfyMouse.move(outputCenter)
+      await comfyPage.page.keyboard.down('Shift')
+      try {
+        await comfyMouse.drag(dropPos)
+        await comfyMouse.drop()
+      } finally {
+        await comfyPage.page.keyboard.up('Shift').catch(() => {})
+      }
+
+      // Search box should open directly
+      await expect(comfyPage.searchBox.input).toBeVisible()
+      await expect(comfyPage.searchBox.filterChips.first()).toContainText(
+        'LATENT'
+      )
+
+      // Select a compatible node and verify connection
+      await comfyPage.searchBox.fillAndSelectFirstNode('VAEDecode')
+      await comfyPage.nextFrame()
+
+      const samplerOutput = await samplerNode.getOutput(0)
+      expect(await samplerOutput.getLinkCount()).toBe(1)
+
+      const vaeNodes = await comfyPage.getNodeRefsByType('VAEDecode')
+      let linked = false
+      for (const vae of vaeNodes) {
+        const details = await getInputLinkDetails(comfyPage.page, vae.id, 0)
+        if (details) {
+          expect(details.originId).toBe(samplerNode.id)
+          linked = true
+          break
+        }
+      }
+      expect(linked).toBe(true)
+    })
+  })
 })

browser_tests/tests/vueNodes/interactions/node/select.spec.ts

@@ -49,4 +49,36 @@ test.describe('Vue Node Selection', () => {
       expect(await comfyPage.vueNodes.getSelectedNodeCount()).toBe(0)
     })
   }
+
+  test('should select pinned node without dragging', async ({ comfyPage }) => {
+    const PIN_HOTKEY = 'p'
+    const PIN_INDICATOR = '[data-testid="node-pin-indicator"]'
+
+    // Select a node by clicking its title
+    const checkpointNodeHeader = comfyPage.page.getByText('Load Checkpoint')
+    await checkpointNodeHeader.click()
+
+    // Pin it using the hotkey (as a user would)
+    await comfyPage.page.keyboard.press(PIN_HOTKEY)
+
+    const checkpointNode = comfyPage.vueNodes.getNodeByTitle('Load Checkpoint')
+    const pinIndicator = checkpointNode.locator(PIN_INDICATOR)
+    await expect(pinIndicator).toBeVisible()
+
+    expect(await comfyPage.vueNodes.getSelectedNodeCount()).toBe(1)
+
+    const initialPos = await checkpointNodeHeader.boundingBox()
+    if (!initialPos) throw new Error('Failed to get header position')
+
+    await comfyPage.dragAndDrop(
+      { x: initialPos.x + 10, y: initialPos.y + 10 },
+      { x: initialPos.x + 100, y: initialPos.y + 100 }
+    )
+
+    const finalPos = await checkpointNodeHeader.boundingBox()
+    if (!finalPos) throw new Error('Failed to get header position after drag')
+    expect(finalPos).toEqual(initialPos)
+
+    expect(await comfyPage.vueNodes.getSelectedNodeCount()).toBe(1)
+  })
 })

browser_tests/tests/vueNodes/widgets/int/integerWidget.spec.ts

@@ -0,0 +1,42 @@
+import {
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '../../../../fixtures/ComfyPage'
+
+test.describe('Vue Integer Widget', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.setup()
+  })
+
+  test('should be disabled and not allow changing value when link connected to slot', async ({
+    comfyPage
+  }) => {
+    await comfyPage.loadWorkflow('vueNodes/linked-int-widget')
+    await comfyPage.vueNodes.waitForNodes()
+
+    const seedWidget = comfyPage.vueNodes.getWidgetByName('KSampler', 'seed')
+    const controls = comfyPage.vueNodes.getInputNumberControls(seedWidget)
+    const initialValue = Number(await controls.input.inputValue())
+
+    // Verify widget is disabled when linked
+    await controls.incrementButton.click({ force: true })
+    await expect(controls.input).toHaveValue(initialValue.toString())
+
+    await controls.decrementButton.click({ force: true })
+    await expect(controls.input).toHaveValue(initialValue.toString())
+
+    await expect(seedWidget).toBeVisible()
+
+    // Delete the node that is linked to the slot (freeing up the widget)
+    await comfyPage.vueNodes.getNodeByTitle('Int').click()
+    await comfyPage.vueNodes.deleteSelected()
+
+    // Test widget works when unlinked
+    await controls.incrementButton.click()
+    await expect(controls.input).toHaveValue((initialValue + 1).toString())
+
+    await controls.decrementButton.click()
+    await expect(controls.input).toHaveValue(initialValue.toString())
+  })
+})

eslint.config.ts

@@ -4,36 +4,67 @@ import pluginI18n from '@intlify/eslint-plugin-vue-i18n'
 import { importX } from 'eslint-plugin-import-x'
 import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'
 import storybook from 'eslint-plugin-storybook'
+import tailwind from 'eslint-plugin-tailwindcss'
 import unusedImports from 'eslint-plugin-unused-imports'
 import pluginVue from 'eslint-plugin-vue'
 import { defineConfig } from 'eslint/config'
 import globals from 'globals'
-import tseslint from 'typescript-eslint'
+import {
+  configs as tseslintConfigs,
+  parser as tseslintParser
+} from 'typescript-eslint'
 import vueParser from 'vue-eslint-parser'
 
 const extraFileExtensions = ['.vue']
 
+const commonGlobals = {
+  ...globals.browser,
+  __COMFYUI_FRONTEND_VERSION__: 'readonly'
+} as const
+
+const settings = {
+  'import/resolver': {
+    typescript: true,
+    node: true
+  },
+  tailwindcss: {
+    config: `${import.meta.dirname}/packages/design-system/src/css/style.css`,
+    functions: ['cn', 'clsx', 'tw']
+  }
+} as const
+
+const commonParserOptions = {
+  parser: tseslintParser,
+  projectService: true,
+  tsConfigRootDir: import.meta.dirname,
+  ecmaVersion: 2020,
+  sourceType: 'module',
+  extraFileExtensions
+} as const
+
 export default defineConfig([
   {
     ignores: [
-      'src/scripts/*',
-      'src/extensions/core/*',
-      'src/types/vue-shim.d.ts',
-      'packages/registry-types/src/comfyRegistryTypes.ts',
-      'src/types/generatedManagerTypes.ts',
+      '.i18nrc.cjs',
+      'components.d.ts',
+      'lint-staged.config.js',
+      'vitest.setup.ts',
       '**/vite.config.*.timestamp*',
-      '**/vitest.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'
     ]
   },
   {
     files: ['./**/*.{ts,mts}'],
+    settings,
     languageOptions: {
-      globals: {
-        ...globals.browser,
-        __COMFYUI_FRONTEND_VERSION__: 'readonly'
-      },
+      globals: commonGlobals,
       parserOptions: {
-        parser: tseslint.parser,
+        ...commonParserOptions,
         projectService: {
           allowDefaultProject: [
             'vite.config.mts',
@@ -42,47 +73,26 @@ export default defineConfig([
             'playwright.config.ts',
             'playwright.i18n.config.ts'
           ]
-        },
-        tsConfigRootDir: import.meta.dirname,
-        ecmaVersion: 2020,
-        sourceType: 'module',
-        extraFileExtensions
-      }
-    },
-    settings: {
-      'import/resolver': {
-        typescript: true,
-        node: true
+        }
       }
     }
   },
   {
     files: ['./**/*.vue'],
+    settings,
     languageOptions: {
-      globals: {
-        ...globals.browser,
-        __COMFYUI_FRONTEND_VERSION__: 'readonly'
-      },
+      globals: commonGlobals,
       parser: vueParser,
-      parserOptions: {
-        parser: tseslint.parser,
-        projectService: true,
-        tsConfigRootDir: import.meta.dirname,
-        ecmaVersion: 2020,
-        sourceType: 'module',
-        extraFileExtensions
-      }
-    },
-    settings: {
-      'import/resolver': {
-        typescript: true,
-        node: true
-      }
+      parserOptions: commonParserOptions
     }
   },
   pluginJs.configs.recommended,
-  // eslint-disable-next-line import-x/no-named-as-default-member
-  tseslint.configs.recommended,
+
+  tseslintConfigs.recommended,
+  // Difference in typecheck on CI vs Local
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore Bad types in the plugin
+  tailwind.configs['flat/recommended'],
   pluginVue.configs['flat/recommended'],
   eslintPluginPrettierRecommended,
   storybook.configs['flat/recommended'],
@@ -114,6 +124,7 @@ export default defineConfig([
       'import-x/no-relative-packages': 'error',
       'unused-imports/no-unused-imports': 'error',
       'no-console': ['error', { allow: ['warn', 'error'] }],
+      'tailwindcss/no-custom-classname': 'off', // TODO: fix
       'vue/no-v-html': 'off',
       // Enforce dark-theme: instead of dark: prefix
       'vue/no-restricted-class': ['error', '/^dark:/'],

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comfyorg/comfyui-frontend",
   "private": true,
-  "version": "1.29.0",
+  "version": "1.29.1",
   "type": "module",
   "repository": "https://github.com/Comfy-Org/ComfyUI_frontend",
   "homepage": "https://comfy.org",
@@ -57,6 +57,7 @@
     "@storybook/vue3-vite": "catalog:",
     "@tailwindcss/vite": "catalog:",
     "@trivago/prettier-plugin-sort-imports": "catalog:",
+    "@types/eslint-plugin-tailwindcss": "catalog:",
     "@types/fs-extra": "catalog:",
     "@types/jsdom": "catalog:",
     "@types/node": "catalog:",
@@ -73,6 +74,7 @@
     "eslint-plugin-import-x": "catalog:",
     "eslint-plugin-prettier": "catalog:",
     "eslint-plugin-storybook": "catalog:",
+    "eslint-plugin-tailwindcss": "catalog:",
     "eslint-plugin-unused-imports": "catalog:",
     "eslint-plugin-vue": "catalog:",
     "fs-extra": "^11.2.0",

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

@@ -645,13 +645,10 @@ button.comfy-close-menu-btn {
 }
 
 span.drag-handle {
-  width: 10px;
-  height: 20px;
   display: inline-block;
   overflow: hidden;
   line-height: 5px;
   padding: 3px 4px;
-  cursor: move;
   vertical-align: middle;
   margin-top: -0.4em;
   margin-left: -0.2em;
@@ -1049,6 +1046,11 @@ audio.comfy-audio.empty-audio-widget {
   transition: none;
 }
 
+.isLOD .lg-node-header {
+  border-radius: 0px;
+  pointer-events: none;
+}
+
 .isLOD .lg-node-widgets {
   pointer-events: none;
 }

pnpm-lock.yaml

@@ -84,6 +84,9 @@ catalogs:
     '@trivago/prettier-plugin-sort-imports':
       specifier: ^5.2.0
       version: 5.2.2
+    '@types/eslint-plugin-tailwindcss':
+      specifier: ^3.17.0
+      version: 3.17.0
     '@types/fs-extra':
       specifier: ^11.0.4
       version: 11.0.4
@@ -147,6 +150,9 @@ catalogs:
     eslint-plugin-storybook:
       specifier: ^9.1.6
       version: 9.1.6
+    eslint-plugin-tailwindcss:
+      specifier: 4.0.0-beta.0
+      version: 4.0.0-beta.0
     eslint-plugin-unused-imports:
       specifier: ^4.2.0
       version: 4.2.0
@@ -274,6 +280,9 @@ catalogs:
       specifier: ^3.3.0
       version: 3.3.0
 
+overrides:
+  '@types/eslint': '-'
+
 importers:
 
   .:
@@ -489,6 +498,9 @@ importers:
       '@trivago/prettier-plugin-sort-imports':
         specifier: 'catalog:'
         version: 5.2.2(@vue/compiler-sfc@3.5.13)(prettier@3.3.2)
+      '@types/eslint-plugin-tailwindcss':
+        specifier: 'catalog:'
+        version: 3.17.0
       '@types/fs-extra':
         specifier: 'catalog:'
         version: 11.0.4
@@ -537,6 +549,9 @@ importers:
       eslint-plugin-storybook:
         specifier: 'catalog:'
         version: 9.1.6(eslint@9.35.0(jiti@2.4.2))(storybook@9.1.6(@testing-library/dom@10.4.1)(prettier@3.3.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)))(typescript@5.9.2)
+      eslint-plugin-tailwindcss:
+        specifier: 'catalog:'
+        version: 4.0.0-beta.0(tailwindcss@4.1.12)
       eslint-plugin-unused-imports:
         specifier: 'catalog:'
         version: 4.2.0(@typescript-eslint/eslint-plugin@8.44.0(@typescript-eslint/parser@8.44.0(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2))(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2))(eslint@9.35.0(jiti@2.4.2))
@@ -2990,6 +3005,9 @@ packages:
   '@types/diff-match-patch@1.0.36':
     resolution: {integrity: sha512-xFdR6tkm0MWvBfO8xXCSsinYxHcqkQUlcHeSpMC2ukzOb6lwQAfDmW+Qt0AvlGd8HpsS28qKsB+oPeJn9I39jg==}
 
+  '@types/eslint-plugin-tailwindcss@3.17.0':
+    resolution: {integrity: sha512-ucQGf2YIdTcndYcxRU3UdZgmhUHsOlbIF4BaRtl0op+7k2JmqM2i3aXZ6XIcfZgVq1ZKov7VM5c/BR81ukmkyg==}
+
   '@types/estree@1.0.5':
     resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==}
 
@@ -4508,7 +4526,7 @@ packages:
     resolution: {integrity: sha512-swNtI95SToIz05YINMA6Ox5R057IMAmWZ26GqPxusAp1TZzj+IdY9tXNWWD3vkF/wEqydCONcwjTFpxybBqZsg==}
     engines: {node: ^14.18.0 || >=16.0.0}
     peerDependencies:
-      '@types/eslint': '>=8.0.0'
+      '@types/eslint': '*'
       eslint: '>=8.0.0'
       eslint-config-prettier: '>= 7.0.0 <10.0.0 || >=10.1.0'
       prettier: '>=3.0.0'
@@ -4525,6 +4543,12 @@ packages:
       eslint: '>=8'
       storybook: ^9.1.6
 
+  eslint-plugin-tailwindcss@4.0.0-beta.0:
+    resolution: {integrity: sha512-WWCajZgQu38Sd67ZCl2W6i3MRzqB0d+H8s4qV9iB6lBJbsDOIpIlj6R1Fj2FXkoWErbo05pZnZYbCGIU9o/DsA==}
+    engines: {node: '>=18.12.0'}
+    peerDependencies:
+      tailwindcss: ^3.4.0 || ^4.0.0
+
   eslint-plugin-unused-imports@4.2.0:
     resolution: {integrity: sha512-hLbJ2/wnjKq4kGA9AUaExVFIbNzyxYdVo49QZmKCnhk5pc9wcYRbfgLHvWJ8tnsdcseGhoUAddm9gn/lt+d74w==}
     peerDependencies:
@@ -6966,6 +6990,11 @@ packages:
     resolution: {integrity: sha512-9kY+CygyYM6j02t5YFHbNz2FN5QmYGv9zAjVp4lCDjlCw7amdckXlEt/bjMhUIfj4ThGRE4gCUH5+yGnNuPo5A==}
     engines: {node: '>=10.0.0'}
 
+  tailwind-api-utils@1.0.3:
+    resolution: {integrity: sha512-KpzUHkH1ug1sq4394SLJX38ZtpeTiqQ1RVyFTTSY2XuHsNSTWUkRo108KmyyrMWdDbQrLYkSHaNKj/a3bmA4sQ==}
+    peerDependencies:
+      tailwindcss: ^3.3.0 || ^4.0.0 || ^4.0.0-beta
+
   tailwind-merge@2.6.0:
     resolution: {integrity: sha512-P+Vu1qXfzediirmHOC3xKGAYeZtPcV9g76X+xg2FD4tYgR71ewMA35Y3sCz3zhiN/dwefRpJX0yBcgwi1fXNQA==}
 
@@ -10336,6 +10365,8 @@ snapshots:
 
   '@types/diff-match-patch@1.0.36': {}
 
+  '@types/eslint-plugin-tailwindcss@3.17.0': {}
+
   '@types/estree@1.0.5': {}
 
   '@types/estree@1.0.8': {}
@@ -10748,7 +10779,7 @@ snapshots:
       '@vue/shared': 3.5.13
       estree-walker: 2.0.2
       magic-string: 0.30.19
-      postcss: 8.5.1
+      postcss: 8.5.6
       source-map-js: 1.2.1
 
   '@vue/compiler-ssr@3.5.13':
@@ -12097,6 +12128,14 @@ snapshots:
       - supports-color
       - typescript
 
+  eslint-plugin-tailwindcss@4.0.0-beta.0(tailwindcss@4.1.12):
+    dependencies:
+      fast-glob: 3.3.3
+      postcss: 8.5.6
+      synckit: 0.11.11
+      tailwind-api-utils: 1.0.3(tailwindcss@4.1.12)
+      tailwindcss: 4.1.12
+
   eslint-plugin-unused-imports@4.2.0(@typescript-eslint/eslint-plugin@8.44.0(@typescript-eslint/parser@8.44.0(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2))(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2))(eslint@9.35.0(jiti@2.4.2)):
     dependencies:
       eslint: 9.35.0(jiti@2.4.2)
@@ -15115,6 +15154,13 @@ snapshots:
       string-width: 4.2.3
       strip-ansi: 6.0.1
 
+  tailwind-api-utils@1.0.3(tailwindcss@4.1.12):
+    dependencies:
+      enhanced-resolve: 5.18.3
+      jiti: 2.5.1
+      local-pkg: 1.1.2
+      tailwindcss: 4.1.12
+
   tailwind-merge@2.6.0: {}
 
   tailwindcss-primeui@0.6.1(tailwindcss@4.1.12):

pnpm-workspace.yaml

@@ -29,6 +29,7 @@ catalog:
   '@storybook/vue3-vite': ^9.1.1
   '@tailwindcss/vite': ^4.1.12
   '@trivago/prettier-plugin-sort-imports': ^5.2.0
+  '@types/eslint-plugin-tailwindcss': ^3.17.0
   '@types/fs-extra': ^11.0.4
   '@types/jsdom': ^21.1.7
   '@types/node': ^20.14.8
@@ -50,6 +51,7 @@ catalog:
   eslint-plugin-import-x: ^4.16.1
   eslint-plugin-prettier: ^5.5.4
   eslint-plugin-storybook: ^9.1.6
+  eslint-plugin-tailwindcss: 4.0.0-beta.0
   eslint-plugin-unused-imports: ^4.2.0
   eslint-plugin-vue: ^10.4.0
   firebase: ^11.6.0
@@ -95,6 +97,9 @@ catalog:
 
 cleanupUnusedCatalogs: true
 
+overrides:
+  '@types/eslint': '-'
+
 ignoredBuiltDependencies:
   - '@firebase/util'
   - protobufjs

src/App.vue

@@ -2,7 +2,7 @@
   <router-view />
   <ProgressSpinner
     v-if="isLoading"
-    class="absolute inset-0 flex justify-center items-center h-[unset]"
+    class="absolute inset-0 flex h-[unset] items-center justify-center"
   />
   <GlobalDialog />
   <BlockUI full-screen :blocked="isLoading" />

src/components/actionbar/ComfyActionbar.vue

@@ -5,7 +5,15 @@
     :class="{ 'is-dragging': isDragging, 'is-docked': isDocked }"
   >
     <div ref="panelRef" class="actionbar-content flex items-center select-none">
-      <span ref="dragHandleRef" class="drag-handle cursor-move mr-2" />
+      <span
+        ref="dragHandleRef"
+        :class="
+          cn(
+            'drag-handle cursor-grab w-3 h-max mr-2',
+            isDragging && 'cursor-grabbing'
+          )
+        "
+      />
       <ComfyQueueButton />
     </div>
   </Panel>
@@ -26,6 +34,7 @@ import type { Ref } from 'vue'
 import { computed, inject, nextTick, onMounted, ref, watch } from 'vue'
 
 import { useSettingStore } from '@/platform/settings/settingStore'
+import { cn } from '@/utils/tailwindUtil'
 
 import ComfyQueueButton from './ComfyQueueButton.vue'
 
@@ -257,8 +266,4 @@ watch([isDragging, isOverlappingWithTopMenu], ([dragging, overlapping]) => {
 :deep(.p-panel-header) {
   display: none;
 }
-
-.drag-handle {
-  @apply w-3 h-max;
-}
 </style>

src/components/bottomPanel/BottomPanel.vue

@@ -1,17 +1,17 @@
 <template>
-  <div class="flex flex-col h-full">
+  <div class="flex h-full flex-col">
     <Tabs
       :key="$i18n.locale"
       v-model:value="bottomPanelStore.activeBottomPanelTabId"
     >
       <TabList pt:tab-list="border-none">
-        <div class="w-full flex justify-between">
+        <div class="flex w-full justify-between">
           <div class="tabs-container">
             <Tab
               v-for="tab in bottomPanelStore.bottomPanelTabs"
               :key="tab.id"
               :value="tab.id"
-              class="p-3 border-none"
+              class="border-none p-3"
             >
               <span class="font-bold">
                 {{ getTabDisplayTitle(tab) }}
@@ -41,7 +41,7 @@
       </TabList>
     </Tabs>
     <!-- h-0 to force the div to grow -->
-    <div class="grow h-0">
+    <div class="h-0 grow">
       <ExtensionSlot
         v-if="
           bottomPanelStore.bottomPanelVisible &&

src/components/bottomPanel/tabs/shortcuts/EssentialsPanel.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="h-full flex flex-col p-4">
-    <div class="flex-1 min-h-0 overflow-auto">
+  <div class="flex h-full flex-col p-4">
+    <div class="min-h-0 flex-1 overflow-auto">
       <ShortcutsList
         :commands="essentialsCommands"
         :subcategories="essentialsSubcategories"

src/components/bottomPanel/tabs/shortcuts/ShortcutsList.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="shortcuts-list flex justify-center">
-    <div class="grid gap-4 md:gap-24 h-full grid-cols-1 md:grid-cols-3 w-[90%]">
+    <div class="grid h-full w-[90%] grid-cols-1 gap-4 md:grid-cols-3 md:gap-24">
       <div
         v-for="(subcategoryCommands, subcategory) in filteredSubcategories"
         :key="subcategory"
         class="flex flex-col"
       >
         <h3
-          class="subcategory-title text-xs font-bold uppercase tracking-wide text-surface-600 dark-theme:text-surface-400 mb-4"
+          class="subcategory-title mb-4 text-xs font-bold tracking-wide text-surface-600 uppercase dark-theme:text-surface-400"
         >
           {{ getSubcategoryTitle(subcategory) }}
         </h3>
@@ -16,7 +16,7 @@
           <div
             v-for="command in subcategoryCommands"
             :key="command.id"
-            class="shortcut-item flex justify-between items-center py-2 rounded hover:bg-surface-100 dark-theme:hover:bg-surface-700 transition-colors duration-200"
+            class="shortcut-item flex items-center justify-between rounded py-2 transition-colors duration-200 hover:bg-surface-100 dark-theme:hover:bg-surface-700"
           >
             <div class="shortcut-info grow pr-4">
               <div class="shortcut-name text-sm font-medium">
@@ -32,7 +32,7 @@
                 <span
                   v-for="key in command.keybinding!.combo.getKeySequences()"
                   :key="key"
-                  class="key-badge px-2 py-1 text-xs font-mono bg-surface-200 dark-theme:bg-surface-600 rounded border min-w-6 text-center"
+                  class="key-badge min-w-6 rounded border bg-surface-200 px-2 py-1 text-center font-mono text-xs dark-theme:bg-surface-600"
                 >
                   {{ formatKey(key) }}
                 </span>

src/components/bottomPanel/tabs/shortcuts/ViewControlsPanel.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="h-full flex flex-col p-4">
-    <div class="flex-1 min-h-0 overflow-auto">
+  <div class="flex h-full flex-col p-4">
+    <div class="min-h-0 flex-1 overflow-auto">
       <ShortcutsList
         :commands="viewControlsCommands"
         :subcategories="viewControlsSubcategories"

src/components/bottomPanel/tabs/terminal/BaseTerminal.vue

@@ -1,10 +1,10 @@
 <template>
   <div
     ref="rootEl"
-    class="relative overflow-hidden h-full w-full bg-neutral-900"
+    class="relative h-full w-full overflow-hidden bg-neutral-900"
   >
-    <div class="p-terminal rounded-none h-full w-full p-2">
-      <div ref="terminalEl" class="h-full terminal-host" />
+    <div class="p-terminal h-full w-full rounded-none p-2">
+      <div ref="terminalEl" class="terminal-host h-full" />
     </div>
     <Button
       v-tooltip.left="{

src/components/bottomPanel/tabs/terminal/LogsTerminal.vue

@@ -1,11 +1,11 @@
 <template>
-  <div class="bg-black h-full w-full">
+  <div class="h-full w-full bg-black">
     <p v-if="errorMessage" class="p-4 text-center">
       {{ errorMessage }}
     </p>
     <ProgressSpinner
       v-else-if="loading"
-      class="relative inset-0 flex justify-center items-center h-full z-10"
+      class="relative inset-0 z-10 flex h-full items-center justify-center"
     />
     <BaseTerminal v-show="!loading" @created="terminalCreated" />
   </div>

src/components/breadcrumb/SubgraphBreadcrumbItem.vue

@@ -6,7 +6,7 @@
       showDelay: 512
     }"
     href="#"
-    class="cursor-pointer p-breadcrumb-item-link"
+    class="p-breadcrumb-item-link cursor-pointer"
     :class="{
       'flex items-center gap-1': isActive,
       'p-breadcrumb-item-link-menu-visible': menu?.overlayVisible,
@@ -37,7 +37,7 @@
     v-if="isEditing"
     ref="itemInputRef"
     v-model="itemLabel"
-    class="fixed z-10000 text-[.8rem] px-2 py-2"
+    class="fixed z-10000 px-2 py-2 text-[.8rem]"
     @blur="inputBlur(true)"
     @click.stop
     @keydown.enter="inputBlur(true)"

src/components/button/MoreButton.vue

@@ -14,7 +14,7 @@
       unstyled
       :pt="pt"
     >
-      <div class="flex flex-col gap-2 p-2 min-w-40">
+      <div class="flex min-w-40 flex-col gap-2 p-2">
         <slot :close="hide" />
       </div>
     </Popover>

src/components/card/CardDescription.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="text-zinc-500 dark-theme:text-zinc-400 text-xs line-clamp-2 h-7">
+  <div class="line-clamp-2 h-7 text-xs text-zinc-500 dark-theme:text-zinc-400">
     <slot></slot>
   </div>
 </template>

src/components/card/CardTop.vue

@@ -1,31 +1,31 @@
 <template>
   <div :class="topStyle">
-    <slot class="absolute top-0 left-0 w-full h-full"></slot>
+    <slot class="absolute top-0 left-0 h-full w-full"></slot>
 
     <div
       v-if="slots['top-left']"
-      class="absolute top-2 left-2 flex gap-2 flex-wrap justify-start"
+      class="absolute top-2 left-2 flex flex-wrap justify-start gap-2"
     >
       <slot name="top-left"></slot>
     </div>
 
     <div
       v-if="slots['top-right']"
-      class="absolute top-2 right-2 flex gap-2 flex-wrap justify-end"
+      class="absolute top-2 right-2 flex flex-wrap justify-end gap-2"
     >
       <slot name="top-right"></slot>
     </div>
 
     <div
       v-if="slots['bottom-left']"
-      class="absolute bottom-2 left-2 flex gap-2 flex-wrap justify-start"
+      class="absolute bottom-2 left-2 flex flex-wrap justify-start gap-2"
     >
       <slot name="bottom-left"></slot>
     </div>
 
     <div
       v-if="slots['bottom-right']"
-      class="absolute bottom-2 right-2 flex gap-2 flex-wrap justify-end"
+      class="absolute right-2 bottom-2 flex flex-wrap justify-end gap-2"
     >
       <slot name="bottom-right"></slot>
     </div>

src/components/chip/SquareChip.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="inline-flex justify-center items-center gap-1 shrink-0 py-1 px-2 text-xs bg-[#D9D9D966]/40 rounded font-bold text-white/90"
+    class="inline-flex shrink-0 items-center justify-center gap-1 rounded bg-[#D9D9D966]/40 px-2 py-1 text-xs font-bold text-white/90"
   >
     <slot name="icon" class="text-xs text-white/90"></slot>
     <span>{{ label }}</span>

src/components/common/FileDownload.vue

@@ -11,7 +11,7 @@
         icon="pi pi-exclamation-triangle"
         size="small"
         variant="outlined"
-        class="h-min my-2 px-1 max-w-xs"
+        class="my-2 h-min max-w-xs px-1"
         :title="props.error"
         :pt="{
           text: { class: 'overflow-hidden text-ellipsis' }

src/components/common/FormImageUpload.vue

@@ -1,16 +1,16 @@
 <template>
   <div class="image-upload-wrapper">
-    <div class="flex gap-2 items-center">
+    <div class="flex items-center gap-2">
       <div
-        class="preview-box border rounded p-2 w-16 h-16 flex items-center justify-center"
+        class="preview-box flex h-16 w-16 items-center justify-center rounded border p-2"
         :class="{ 'bg-gray-100 dark-theme:bg-gray-800': !modelValue }"
       >
         <img
           v-if="modelValue"
           :src="modelValue"
-          class="max-w-full max-h-full object-contain"
+          class="max-h-full max-w-full object-contain"
         />
-        <i v-else class="pi pi-image text-gray-400 text-xl" />
+        <i v-else class="pi pi-image text-xl text-gray-400" />
       </div>
 
       <div class="flex flex-col gap-2">

src/components/common/LazyImage.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     ref="containerRef"
-    class="relative overflow-hidden w-full h-full flex items-center justify-center"
+    class="relative flex h-full w-full items-center justify-center overflow-hidden"
   >
     <Skeleton
       v-if="!isImageLoaded"
@@ -22,7 +22,7 @@
     />
     <div
       v-if="hasError"
-      class="absolute inset-0 flex items-center justify-center bg-surface-50 dark-theme:bg-surface-800 text-muted"
+      class="absolute inset-0 flex items-center justify-center bg-surface-50 text-muted dark-theme:bg-surface-800"
     >
       <img
         src="/assets/images/default-template.png"

src/components/common/NoResultsPlaceholder.vue

@@ -1,11 +1,11 @@
 <template>
-  <div class="no-results-placeholder p-8 h-full" :class="props.class">
+  <div class="no-results-placeholder h-full p-8" :class="props.class">
     <Card>
       <template #content>
         <div class="flex flex-col items-center">
           <i :class="icon" style="font-size: 3rem; margin-bottom: 1rem" />
           <h3>{{ title }}</h3>
-          <p :class="textClass" class="whitespace-pre-line text-center">
+          <p :class="textClass" class="text-center whitespace-pre-line">
             {{ message }}
           </p>
           <Button

src/components/common/SearchBox.vue

@@ -28,7 +28,7 @@
     </IconField>
     <div
       v-if="filters?.length"
-      class="search-filters pt-2 flex flex-wrap gap-2"
+      class="search-filters flex flex-wrap gap-2 pt-2"
     >
       <SearchFilterChip
         v-for="filter in filters"

src/components/common/SystemStatsPanel.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="system-stats">
     <div class="mb-6">
-      <h2 class="text-2xl font-semibold mb-4">
+      <h2 class="mb-4 text-2xl font-semibold">
         {{ $t('g.systemInfo') }}
       </h2>
       <div class="grid grid-cols-2 gap-2">
@@ -17,7 +17,7 @@
     <Divider />
 
     <div>
-      <h2 class="text-2xl font-semibold mb-4">
+      <h2 class="mb-4 text-2xl font-semibold">
         {{ $t('g.devices') }}
       </h2>
       <TabView v-if="props.stats.devices.length > 1">

src/components/common/TreeExplorer.vue

@@ -2,7 +2,7 @@
   <Tree
     v-model:expanded-keys="expandedKeys"
     v-model:selection-keys="selectionKeys"
-    class="tree-explorer py-0 px-2 2xl:px-4"
+    class="tree-explorer px-2 py-0 2xl:px-4"
     :class="props.class"
     :value="renderedRoot.children"
     selection-mode="single"

src/components/common/UrlInput.vue

@@ -12,9 +12,9 @@
       :class="{
         'pi pi-spin pi-spinner text-neutral-400':
           validationState === ValidationState.LOADING,
-        'pi pi-check text-green-500 cursor-pointer':
+        'pi pi-check cursor-pointer text-green-500':
           validationState === ValidationState.VALID,
-        'pi pi-times text-red-500 cursor-pointer':
+        'pi pi-times cursor-pointer text-red-500':
           validationState === ValidationState.INVALID
       }"
       @click="validateUrl(props.modelValue)"

src/components/common/UserCredit.vue

@@ -11,7 +11,7 @@
       severity="secondary"
       icon="pi pi-dollar"
       rounded
-      class="text-amber-400 p-1"
+      class="p-1 text-amber-400"
     />
     <div :class="textClass">{{ formattedBalance }}</div>
   </div>

src/components/custom/widget/WorkflowTemplateSelectorDialog.vue

@@ -17,7 +17,7 @@
     </template>
 
     <template #header>
-      <SearchBox v-model="searchQuery" class="max-w-[384px]" />
+      <SearchBox v-model="searchQuery" size="lg" class="max-w-[384px]" />
     </template>
 
     <template #header-right-area>
@@ -36,7 +36,7 @@
     </template>
 
     <template #contentFilter>
-      <div class="relative px-6 pt-2 pb-4 flex gap-2 flex-wrap">
+      <div class="relative flex flex-wrap gap-2 px-6 pt-2 pb-4">
         <!-- Model Filter -->
         <MultiSelect
           v-model="selectedModelObjects"
@@ -87,7 +87,7 @@
             v-model="sortBy"
             :label="$t('templateWorkflows.sorting', 'Sort by')"
             :options="sortOptions"
-            class="min-w-[270px]"
+            class="w-62.5"
           >
             <template #icon>
               <i class="icon-[lucide--arrow-up-down]" />
@@ -97,7 +97,7 @@
       </div>
       <div
         v-if="!isLoading"
-        class="px-6 pt-4 pb-2 text-2xl font-semibold text-neutral"
+        class="text-neutral px-6 pt-4 pb-2 text-2xl font-semibold"
       >
         <span>
           {{ pageTitle }}
@@ -109,10 +109,10 @@
       <!-- No Results State (only show when loaded and no results) -->
       <div
         v-if="!isLoading && filteredTemplates.length === 0"
-        class="flex flex-col items-center justify-center h-64 text-neutral-500"
+        class="flex h-64 flex-col items-center justify-center text-neutral-500"
       >
-        <i class="icon-[lucide--search] w-12 h-12 mb-4 opacity-50" />
-        <p class="text-lg mb-2">
+        <i class="mb-4 icon-[lucide--search] h-12 w-12 opacity-50" />
+        <p class="mb-2 text-lg">
           {{ $t('templateWorkflows.noResults', 'No templates found') }}
         </p>
         <p class="text-sm">
@@ -128,7 +128,7 @@
         <!-- Title -->
         <span
           v-if="isLoading"
-          class="inline-block h-8 w-48 bg-dialog-surface rounded animate-pulse"
+          class="inline-block h-8 w-48 animate-pulse rounded bg-dialog-surface"
         ></span>
 
         <!-- Template Cards Grid -->
@@ -148,7 +148,7 @@
               <CardTop ratio="landscape">
                 <template #default>
                   <div
-                    class="w-full h-full bg-dialog-surface animate-pulse"
+                    class="h-full w-full animate-pulse bg-dialog-surface"
                   ></div>
                 </template>
               </CardTop>
@@ -157,10 +157,10 @@
               <CardBottom>
                 <div class="px-4 py-3">
                   <div
-                    class="h-6 bg-dialog-surface rounded animate-pulse mb-2"
+                    class="mb-2 h-6 animate-pulse rounded bg-dialog-surface"
                   ></div>
                   <div
-                    class="h-4 bg-dialog-surface rounded animate-pulse"
+                    class="h-4 animate-pulse rounded bg-dialog-surface"
                   ></div>
                 </div>
               </CardBottom>
@@ -184,7 +184,7 @@
                 <template #default>
                   <!-- Template Thumbnail -->
                   <div
-                    class="w-full h-full relative rounded-lg overflow-hidden"
+                    class="relative h-full w-full overflow-hidden rounded-lg"
                   >
                     <template v-if="template.mediaType === 'audio'">
                       <AudioThumbnail :src="getBaseThumbnailSrc(template)" />
@@ -248,7 +248,7 @@
                     </template>
                     <ProgressSpinner
                       v-if="loadingTemplate === template.name"
-                      class="absolute inset-0 z-10 w-12 h-12 m-auto"
+                      class="absolute inset-0 z-10 m-auto h-12 w-12"
                     />
                   </div>
                 </template>
@@ -267,7 +267,7 @@
               <CardBottom>
                 <div class="flex flex-col gap-2 pt-3">
                   <h3
-                    class="line-clamp-1 text-sm m-0"
+                    class="m-0 line-clamp-1 text-sm"
                     :title="
                       getTemplateTitle(
                         template,
@@ -285,7 +285,7 @@
                   <div class="flex justify-between gap-2">
                     <div class="flex-1">
                       <p
-                        class="line-clamp-2 text-sm text-muted m-0"
+                        class="m-0 line-clamp-2 text-sm text-muted"
                         :title="getTemplateDescription(template)"
                       >
                         {{ getTemplateDescription(template) }}
@@ -323,7 +323,7 @@
               <CardTop ratio="square">
                 <template #default>
                   <div
-                    class="w-full h-full bg-dialog-surface animate-pulse"
+                    class="h-full w-full animate-pulse bg-dialog-surface"
                   ></div>
                 </template>
               </CardTop>
@@ -332,10 +332,10 @@
               <CardBottom>
                 <div class="px-4 py-3">
                   <div
-                    class="h-6 bg-dialog-surface rounded animate-pulse mb-2"
+                    class="mb-2 h-6 animate-pulse rounded bg-dialog-surface"
                   ></div>
                   <div
-                    class="h-4 bg-dialog-surface rounded animate-pulse"
+                    class="h-4 animate-pulse rounded bg-dialog-surface"
                   ></div>
                 </div>
               </CardBottom>
@@ -348,7 +348,7 @@
       <div
         v-if="!isLoading && hasMoreTemplates"
         ref="loadTrigger"
-        class="w-full h-4 flex justify-center items-center mt-4"
+        class="mt-4 flex h-4 w-full items-center justify-center"
       >
         <div v-if="isLoadingMore" class="text-sm text-muted">
           {{ $t('templateWorkflows.loadingMore', 'Loading more...') }}
@@ -620,10 +620,7 @@ const sortOptions = computed(() => [
     value: 'default'
   },
   {
-    name: t(
-      'templateWorkflows.sort.vramLowToHigh',
-      'VRAM Utilization (Low to High)'
-    ),
+    name: t('templateWorkflows.sort.vramLowToHigh', 'VRAM Usage (Low to High)'),
     value: 'vram-low-to-high'
   },
   {

src/components/dialog/content/ApiNodesSignInContent.vue

@@ -1,16 +1,16 @@
 <template>
-  <div class="flex flex-col gap-4 max-w-96 h-110 p-2">
-    <div class="text-2xl font-medium mb-2">
+  <div class="flex h-110 max-w-96 flex-col gap-4 p-2">
+    <div class="mb-2 text-2xl font-medium">
       {{ t('apiNodesSignInDialog.title') }}
     </div>
 
-    <div class="text-base mb-4">
+    <div class="mb-4 text-base">
       {{ t('apiNodesSignInDialog.message') }}
     </div>
 
     <ApiNodesList :node-names="apiNodeNames" />
 
-    <div class="flex justify-between items-center">
+    <div class="flex items-center justify-between">
       <Button :label="t('g.learnMore')" link @click="handleLearnMoreClick" />
       <div class="flex gap-2">
         <Button

src/components/dialog/content/ConfirmationDialogContent.vue

@@ -1,7 +1,7 @@
 <template>
-  <section class="prompt-dialog-content flex flex-col gap-6 m-2 mt-4">
+  <section class="prompt-dialog-content m-2 mt-4 flex flex-col gap-6">
     <span>{{ message }}</span>
-    <ul v-if="itemList?.length" class="pl-4 m-0 flex flex-col gap-2">
+    <ul v-if="itemList?.length" class="m-0 flex flex-col gap-2 pl-4">
       <li v-for="item of itemList" :key="item">
         {{ item }}
       </li>
@@ -15,14 +15,14 @@
     >
       {{ hint }}
     </Message>
-    <div class="flex gap-4 justify-end">
+    <div class="flex justify-end gap-4">
       <div
         v-if="type === 'overwriteBlueprint'"
-        class="flex gap-4 justify-start"
+        class="flex justify-start gap-4"
       >
         <Checkbox
           v-model="doNotAskAgain"
-          class="flex gap-4 justify-start"
+          class="flex justify-start gap-4"
           input-id="doNotAskAgain"
           binary
         />

src/components/dialog/content/ErrorDialogContent.vue

@@ -13,7 +13,7 @@
       <span class="font-bold">{{ error.extensionFile }}</span>
     </template>
 
-    <div class="flex gap-2 justify-center">
+    <div class="flex justify-center gap-2">
       <Button
         v-show="!reportOpen"
         text
@@ -29,12 +29,12 @@
     </div>
     <template v-if="reportOpen">
       <Divider />
-      <ScrollPanel class="w-full h-[400px] max-w-[80vw]">
-        <pre class="whitespace-pre-wrap break-words">{{ reportContent }}</pre>
+      <ScrollPanel class="h-[400px] w-full max-w-[80vw]">
+        <pre class="break-words whitespace-pre-wrap">{{ reportContent }}</pre>
       </ScrollPanel>
       <Divider />
     </template>
-    <div class="flex gap-4 justify-end">
+    <div class="flex justify-end gap-4">
       <FindIssueButton
         :error-message="error.exceptionMessage"
         :repo-owner="repoOwner"

src/components/dialog/content/LoadWorkflowWarning.vue

@@ -16,7 +16,7 @@
     }"
   >
     <template #option="slotProps">
-      <div class="flex align-items-center">
+      <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

src/components/dialog/content/MissingCoreNodesMessage.vue

@@ -3,7 +3,7 @@
     v-if="hasMissingCoreNodes"
     severity="info"
     icon="pi pi-info-circle"
-    class="my-2 mx-2"
+    class="mx-2 my-2"
     :pt="{
       root: { class: 'flex-col' },
       text: { class: 'flex-1' }

src/components/dialog/content/MissingModelsWarning.vue

@@ -5,7 +5,7 @@
     :title="t('missingModelsDialog.missingModels')"
     :message="t('missingModelsDialog.missingModelsMessage')"
   />
-  <div class="flex gap-1 mb-4">
+  <div class="mb-4 flex gap-1">
     <Checkbox v-model="doNotAskAgain" binary input-id="doNotAskAgain" />
     <label for="doNotAskAgain">{{
       t('missingModelsDialog.doNotAskAgain')

src/components/dialog/content/SignInContent.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-96 p-2 overflow-x-hidden">
+  <div class="w-96 overflow-x-hidden p-2">
     <ApiKeyForm
       v-if="showApiKeyForm"
       @back="showApiKeyForm = false"
@@ -7,11 +7,11 @@
     />
     <template v-else>
       <!-- Header -->
-      <div class="flex flex-col gap-4 mb-8">
-        <h1 class="text-2xl font-medium leading-normal my-0">
+      <div class="mb-8 flex flex-col gap-4">
+        <h1 class="my-0 text-2xl leading-normal font-medium">
           {{ isSignIn ? t('auth.login.title') : t('auth.signup.title') }}
         </h1>
-        <p class="text-base my-0">
+        <p class="my-0 text-base">
           <span class="text-muted">{{
             isSignIn
               ? t('auth.login.newUser')
@@ -88,17 +88,17 @@
         >
           <img
             src="/assets/images/comfy-logo-mono.svg"
-            class="w-5 h-5 mr-2"
+            class="mr-2 h-5 w-5"
             alt="Comfy"
           />
           {{ t('auth.login.useApiKey') }}
         </Button>
-        <small class="text-muted text-center">
+        <small class="text-center text-muted">
           {{ t('auth.apiKey.helpText') }}
           <a
             :href="`${COMFY_PLATFORM_BASE_URL}/login`"
             target="_blank"
-            class="text-blue-500 cursor-pointer"
+            class="cursor-pointer text-blue-500"
           >
             {{ t('auth.apiKey.generateKey') }}
           </a>
@@ -115,12 +115,12 @@
       </div>
 
       <!-- Terms & Contact -->
-      <p class="text-xs text-muted mt-8">
+      <p class="mt-8 text-xs text-muted">
         {{ t('auth.login.termsText') }}
         <a
           href="https://www.comfy.org/terms-of-service"
           target="_blank"
-          class="text-blue-500 cursor-pointer"
+          class="cursor-pointer text-blue-500"
         >
           {{ t('auth.login.termsLink') }}
         </a>
@@ -128,12 +128,12 @@
         <a
           href="https://www.comfy.org/privacy"
           target="_blank"
-          class="text-blue-500 cursor-pointer"
+          class="cursor-pointer text-blue-500"
         >
           {{ t('auth.login.privacyLink') }} </a
         >.
         {{ t('auth.login.questionsContactPrefix') }}
-        <a href="mailto:hello@comfy.org" class="text-blue-500 cursor-pointer">
+        <a href="mailto:hello@comfy.org" class="cursor-pointer text-blue-500">
           hello@comfy.org</a
         >.
       </p>

src/components/dialog/content/TopUpCreditsDialogContent.vue

@@ -1,21 +1,21 @@
 <template>
-  <div class="flex flex-col w-96 p-2 gap-10">
+  <div class="flex w-96 flex-col gap-10 p-2">
     <div v-if="isInsufficientCredits" class="flex flex-col gap-4">
-      <h1 class="text-2xl font-medium leading-normal my-0">
+      <h1 class="my-0 text-2xl leading-normal font-medium">
         {{ $t('credits.topUp.insufficientTitle') }}
       </h1>
-      <p class="text-base my-0">
+      <p class="my-0 text-base">
         {{ $t('credits.topUp.insufficientMessage') }}
       </p>
     </div>
 
     <!-- Balance Section -->
-    <div class="flex justify-between items-center">
-      <div class="flex flex-col gap-2 w-full">
-        <div class="text-muted text-base">
+    <div class="flex items-center justify-between">
+      <div class="flex w-full flex-col gap-2">
+        <div class="text-base text-muted">
           {{ $t('credits.yourCreditBalance') }}
         </div>
-        <div class="flex items-center justify-between w-full">
+        <div class="flex w-full items-center justify-between">
           <UserCredit text-class="text-2xl" />
           <Button
             outlined
@@ -30,7 +30,7 @@
 
     <!-- Amount Input Section -->
     <div class="flex flex-col gap-2">
-      <span class="text-muted text-sm"
+      <span class="text-sm text-muted"
         >{{ $t('credits.topUp.quickPurchase') }}:</span
       >
       <div class="grid grid-cols-[2fr_1fr] gap-2">

src/components/dialog/content/UpdatePasswordContent.vue

@@ -1,6 +1,6 @@
 <template>
   <Form
-    class="flex flex-col gap-6 w-96"
+    class="flex w-96 flex-col gap-6"
     :resolver="zodResolver(updatePasswordSchema)"
     @submit="onSubmit"
   >
@@ -10,7 +10,7 @@
     <Button
       type="submit"
       :label="$t('userSettings.updatePassword')"
-      class="h-10 font-medium mt-4"
+      class="mt-4 h-10 font-medium"
       :loading="loading"
     />
   </Form>

src/components/dialog/content/credit/CreditTopUpOption.vue

@@ -4,7 +4,7 @@
       severity="secondary"
       icon="pi pi-dollar"
       rounded
-      class="text-amber-400 p-1"
+      class="p-1 text-amber-400"
     />
     <InputNumber
       v-if="editable"
@@ -21,7 +21,7 @@
     />
     <span v-else class="text-xl">{{ amount }}</span>
   </div>
-  <ProgressSpinner v-if="loading" class="w-8 h-8" />
+  <ProgressSpinner v-if="loading" class="h-8 w-8" />
   <Button
     v-else
     :severity="preselected ? 'primary' : 'secondary'"

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

@@ -1,6 +1,6 @@
 <template>
   <PanelTemplate value="About" class="about-container">
-    <h2 class="text-2xl font-bold mb-2">
+    <h2 class="mb-2 text-2xl font-bold">
       {{ $t('g.about') }}
     </h2>
     <div class="space-y-2">

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

@@ -1,7 +1,7 @@
 <template>
   <TabPanel value="Credits" class="credits-container h-full">
-    <div class="flex flex-col h-full">
-      <h2 class="text-2xl font-bold mb-2">
+    <div class="flex h-full flex-col">
+      <h2 class="mb-2 text-2xl font-bold">
         {{ $t('credits.credits') }}
       </h2>
 
@@ -11,7 +11,7 @@
         <h3 class="text-sm font-medium text-muted">
           {{ $t('credits.yourCreditBalance') }}
         </h3>
-        <div class="flex justify-between items-center">
+        <div class="flex items-center justify-between">
           <UserCredit text-class="text-3xl font-bold" />
           <Skeleton v-if="loading" width="2rem" height="2rem" />
           <Button
@@ -41,7 +41,7 @@
         </div>
       </div>
 
-      <div class="flex justify-between items-center">
+      <div class="flex items-center justify-between">
         <h3>{{ $t('credits.activity') }}</h3>
         <Button
           :label="$t('credits.invoiceHistory')"
@@ -66,7 +66,7 @@
               <template #body="{ data }">
                 <div
                   :class="[
-                    'text-base font-medium text-center',
+                    'text-center text-base font-medium',
                     data.isPositive ? 'text-sky-500' : 'text-red-400'
                   ]"
                 >

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

@@ -51,10 +51,7 @@
         class="max-w-64 2xl:max-w-full"
       >
         <template #body="slotProps">
-          <div
-            class="overflow-hidden text-ellipsis whitespace-nowrap"
-            :title="slotProps.data.id"
-          >
+          <div class="truncate" :title="slotProps.data.id">
             {{ slotProps.data.label }}
           </div>
         </template>

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

@@ -1,8 +1,8 @@
 <template>
   <TabPanel :value="props.value" class="h-full w-full" :class="props.class">
-    <div class="flex flex-col h-full w-full gap-2">
+    <div class="flex h-full w-full flex-col gap-2">
       <slot name="header" />
-      <ScrollPanel class="grow h-0 pr-2">
+      <ScrollPanel class="h-0 grow pr-2">
         <slot />
       </ScrollPanel>
       <slot name="footer" />

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

@@ -30,7 +30,7 @@
           <div class="event-details">
             <!-- Credits Added -->
             <template v-if="data.event_type === EventType.CREDIT_ADDED">
-              <div class="text-green-500 font-semibold">
+              <div class="font-semibold text-green-500">
                 {{ $t('credits.added') }} ${{
                   customerEventService.formatAmount(data.params?.amount)
                 }}

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

@@ -1,7 +1,7 @@
 <template>
   <TabPanel value="User" class="user-settings-container h-full">
-    <div class="flex flex-col h-full">
-      <h2 class="text-2xl font-bold mb-2">{{ $t('userSettings.title') }}</h2>
+    <div class="flex h-full flex-col">
+      <h2 class="mb-2 text-2xl font-bold">{{ $t('userSettings.title') }}</h2>
       <Divider class="mb-3" />
 
       <!-- Normal User Panel -->
@@ -35,7 +35,7 @@
           <h3 class="font-medium">
             {{ $t('userSettings.provider') }}
           </h3>
-          <div class="text-muted flex items-center gap-1">
+          <div class="flex items-center gap-1 text-muted">
             <i :class="providerIcon" />
             {{ providerName }}
             <Button
@@ -54,7 +54,7 @@
 
         <ProgressSpinner
           v-if="loading"
-          class="w-8 h-8 mt-4"
+          class="mt-4 h-8 w-8"
           style="--pc-spinner-color: #000"
         />
         <div v-else class="mt-4 flex flex-col gap-2">

src/components/dialog/content/signin/ApiKeyForm.vue

@@ -1,17 +1,17 @@
 <template>
   <div class="flex flex-col gap-6">
-    <div class="flex flex-col gap-4 mb-8">
-      <h1 class="text-2xl font-medium leading-normal my-0">
+    <div class="mb-8 flex flex-col gap-4">
+      <h1 class="my-0 text-2xl leading-normal font-medium">
         {{ t('auth.apiKey.title') }}
       </h1>
       <div class="flex flex-col gap-2">
-        <p class="text-base my-0 text-muted">
+        <p class="my-0 text-base text-muted">
           {{ t('auth.apiKey.description') }}
         </p>
         <a
           href="https://docs.comfy.org/interface/user#logging-in-with-an-api-key"
           target="_blank"
-          class="text-blue-500 cursor-pointer"
+          class="cursor-pointer text-blue-500"
         >
           {{ t('g.learnMore') }}
         </a>
@@ -30,7 +30,7 @@
 
       <div class="flex flex-col gap-2">
         <label
-          class="opacity-80 text-base font-medium mb-2"
+          class="mb-2 text-base font-medium opacity-80"
           for="comfy-org-api-key"
         >
           {{ t('auth.apiKey.label') }}
@@ -50,7 +50,7 @@
             <a
               :href="`${COMFY_PLATFORM_BASE_URL}/login`"
               target="_blank"
-              class="text-blue-500 cursor-pointer"
+              class="cursor-pointer text-blue-500"
             >
               {{ t('auth.apiKey.generateKey') }}
             </a>
@@ -58,7 +58,7 @@
             <a
               href="https://docs.comfy.org/tutorials/api-nodes/overview#log-in-with-api-key-on-non-whitelisted-websites"
               target="_blank"
-              class="text-blue-500 cursor-pointer"
+              class="cursor-pointer text-blue-500"
             >
               {{ t('auth.apiKey.whitelistInfo') }}
             </a>
@@ -66,7 +66,7 @@
         </div>
       </div>
 
-      <div class="flex justify-between items-center mt-4">
+      <div class="mt-4 flex items-center justify-between">
         <Button type="button" link @click="$emit('back')">
           {{ t('g.back') }}
         </Button>

src/components/dialog/content/signin/PasswordFields.vue

@@ -1,9 +1,9 @@
 <template>
   <!-- Password Field -->
   <FormField v-slot="$field" name="password" class="flex flex-col gap-2">
-    <div class="flex justify-between items-center mb-2">
+    <div class="mb-2 flex items-center justify-between">
       <label
-        class="opacity-80 text-base font-medium"
+        class="text-base font-medium opacity-80"
         for="comfy-org-sign-up-password"
       >
         {{ t('auth.signup.passwordLabel') }}
@@ -68,7 +68,7 @@
   <!-- Confirm Password Field -->
   <FormField v-slot="$field" name="confirmPassword" class="flex flex-col gap-2">
     <label
-      class="opacity-80 text-base font-medium mb-2"
+      class="mb-2 text-base font-medium opacity-80"
       for="comfy-org-sign-up-confirm-password"
     >
       {{ t('auth.login.confirmPasswordLabel') }}

src/components/dialog/content/signin/SignInForm.vue

@@ -7,7 +7,7 @@
   >
     <!-- Email Field -->
     <div class="flex flex-col gap-2">
-      <label class="opacity-80 text-base font-medium mb-2" :for="emailInputId">
+      <label class="mb-2 text-base font-medium opacity-80" :for="emailInputId">
         {{ t('auth.login.emailLabel') }}
       </label>
       <InputText
@@ -26,15 +26,15 @@
 
     <!-- Password Field -->
     <div class="flex flex-col gap-2">
-      <div class="flex justify-between items-center mb-2">
+      <div class="mb-2 flex items-center justify-between">
         <label
-          class="opacity-80 text-base font-medium"
+          class="text-base font-medium opacity-80"
           for="comfy-org-sign-in-password"
         >
           {{ t('auth.login.passwordLabel') }}
         </label>
         <span
-          class="text-muted text-base font-medium cursor-pointer select-none"
+          class="cursor-pointer text-base font-medium text-muted select-none"
           :class="{
             'text-link-disabled': !$form.email?.value || $form.email?.invalid
           }"
@@ -60,12 +60,12 @@
     </div>
 
     <!-- Submit Button -->
-    <ProgressSpinner v-if="loading" class="w-8 h-8" />
+    <ProgressSpinner v-if="loading" class="h-8 w-8" />
     <Button
       v-else
       type="submit"
       :label="t('auth.login.loginButton')"
-      class="h-10 font-medium mt-4"
+      class="mt-4 h-10 font-medium"
     />
   </Form>
 </template>

src/components/dialog/content/signin/SignUpForm.vue

@@ -7,7 +7,7 @@
     <!-- Email Field -->
     <FormField v-slot="$field" name="email" class="flex flex-col gap-2">
       <label
-        class="opacity-80 text-base font-medium mb-2"
+        class="mb-2 text-base font-medium opacity-80"
         for="comfy-org-sign-up-email"
       >
         {{ t('auth.signup.emailLabel') }}
@@ -40,11 +40,11 @@
       />
       <label
         for="comfy-org-sign-up-personal-data-consent"
-        class="opacity-80 text-base font-medium"
+        class="text-base font-medium opacity-80"
       >
         {{ t('auth.signup.personalDataConsentLabel') }}
       </label>
-      <small v-if="$field.error" class="text-red-500 -mt-4">{{
+      <small v-if="$field.error" class="-mt-4 text-red-500">{{
         $field.error.message
       }}</small>
     </FormField>
@@ -53,7 +53,7 @@
     <Button
       type="submit"
       :label="t('auth.signup.signUpButton')"
-      class="h-10 font-medium mt-4"
+      class="mt-4 h-10 font-medium"
     />
   </Form>
 </template>

src/components/graph/GraphCanvas.vue

@@ -10,7 +10,7 @@
       <BottomPanel />
     </template>
     <template #graph-canvas-panel>
-      <div class="absolute top-0 left-0 w-auto max-w-full pointer-events-auto">
+      <div class="pointer-events-auto absolute top-0 left-0 w-auto max-w-full">
         <SecondRowWorkflowTabs
           v-if="workflowTabsPosition === 'Topbar (2nd-row)'"
         />
@@ -113,7 +113,6 @@ import { useWorkflowStore } from '@/platform/workflow/management/stores/workflow
 import { useWorkflowAutoSave } from '@/platform/workflow/persistence/composables/useWorkflowAutoSave'
 import { useWorkflowPersistence } from '@/platform/workflow/persistence/composables/useWorkflowPersistence'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
-import { attachSlotLinkPreviewRenderer } from '@/renderer/core/canvas/links/slotLinkPreviewRenderer'
 import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteractions'
 import TransformPane from '@/renderer/core/layout/transform/TransformPane.vue'
 import MiniMap from '@/renderer/extensions/minimap/MiniMap.vue'
@@ -401,7 +400,6 @@ onMounted(async () => {
 
   // @ts-expect-error fixme ts strict error
   await comfyApp.setup(canvasRef.value)
-  attachSlotLinkPreviewRenderer(comfyApp.canvas)
   canvasStore.canvas = comfyApp.canvas
   canvasStore.canvas.render_canvas_border = false
   workspaceStore.spinner = false

src/components/graph/GraphCanvasMenu.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <ZoomControlsModal :visible="isModalVisible" />
+    <ZoomControlsModal :visible="isModalVisible" @close="hideModal" />
 
     <!-- Backdrop -->
     <div
@@ -10,7 +10,7 @@
     ></div>
 
     <ButtonGroup
-      class="p-buttongroup-vertical p-1 absolute bottom-4 right-2 md:right-4"
+      class="p-buttongroup-vertical absolute right-2 bottom-4 p-1 md:right-4"
       :style="stringifiedMinimapStyles.buttonGroupStyles"
       @wheel="canvasInteractions.handleWheel"
     >
@@ -44,7 +44,7 @@
       </Button>
 
       <!-- vertical line with bg E1DED5 -->
-      <div class="w-px my-1 bg-[#E1DED5] dark-theme:bg-[#2E3037] mx-2" />
+      <div class="mx-2 my-1 w-px bg-[#E1DED5] dark-theme:bg-[#2E3037]" />
 
       <Button
         v-tooltip.top="fitViewTooltip"
@@ -52,7 +52,7 @@
         icon="pi pi-expand"
         :aria-label="fitViewTooltip"
         :style="stringifiedMinimapStyles.buttonStyles"
-        class="dark-theme:hover:bg-[#444444]! hover:bg-[#E7E6E6]!"
+        class="hover:bg-[#E7E6E6]! dark-theme:hover:bg-[#444444]!"
         @click="() => commandStore.execute('Comfy.Canvas.FitView')"
       >
         <template #icon>
@@ -77,7 +77,7 @@
         </span>
       </Button>
 
-      <div class="w-px my-1 bg-[#E1DED5] dark-theme:bg-[#2E3037] mx-2" />
+      <div class="mx-2 my-1 w-px bg-[#E1DED5] dark-theme:bg-[#2E3037]" />
 
       <Button
         ref="focusButton"

src/components/graph/SelectionToolbox.vue

@@ -2,12 +2,12 @@
   <div
     ref="toolboxRef"
     style="transform: translate(var(--tb-x), var(--tb-y))"
-    class="fixed left-0 top-0 z-40 pointer-events-none"
+    class="pointer-events-none fixed top-0 left-0 z-40"
   >
     <Transition name="slide-up">
       <Panel
         v-if="visible"
-        class="rounded-lg selection-toolbox pointer-events-auto"
+        class="selection-toolbox pointer-events-auto rounded-lg"
         :style="`backgroundColor: ${containerStyles.backgroundColor};`"
         :pt="{
           header: 'hidden',

src/components/graph/modals/ZoomControlsModal.vue

@@ -1,10 +1,10 @@
 <template>
   <div
     v-if="visible"
-    class="w-[250px] absolute flex justify-center right-2 md:right-11 z-1300 bottom-[66px] bg-inherit! border-0!"
+    class="absolute right-2 bottom-[66px] z-1300 flex w-[250px] justify-center border-0! bg-inherit! md:right-11"
   >
     <div
-      class="bg-white dark-theme:bg-[#2b2b2b] border border-gray-200 dark-theme:border-gray-700 rounded-lg shadow-lg p-4 w-4/5"
+      class="w-4/5 rounded-lg border border-gray-200 bg-white p-4 shadow-lg dark-theme:border-gray-700 dark-theme:bg-[#2b2b2b]"
       :style="filteredMinimapStyles"
       @click.stop
     >
@@ -26,10 +26,10 @@
           @mouseleave="stopRepeat"
         >
           <template #default>
-            <span class="text-sm font-medium block">{{
+            <span class="block text-sm font-medium">{{
               $t('graphCanvasMenu.zoomIn')
             }}</span>
-            <span class="text-sm text-gray-500 block">{{
+            <span class="block text-sm text-gray-500">{{
               zoomInCommandText
             }}</span>
           </template>
@@ -52,10 +52,10 @@
           @mouseleave="stopRepeat"
         >
           <template #default>
-            <span class="text-sm font-medium block">{{
+            <span class="block text-sm font-medium">{{
               $t('graphCanvasMenu.zoomOut')
             }}</span>
-            <span class="text-sm text-gray-500 block">{{
+            <span class="block text-sm text-gray-500">{{
               zoomOutCommandText
             }}</span>
           </template>
@@ -76,15 +76,15 @@
           @click="executeCommand('Comfy.Canvas.FitView')"
         >
           <template #default>
-            <span class="text-sm font-medium block">{{
+            <span class="block text-sm font-medium">{{
               $t('zoomControls.zoomToFit')
             }}</span>
-            <span class="text-sm text-gray-500 block">{{
+            <span class="block text-sm text-gray-500">{{
               zoomToFitCommandText
             }}</span>
           </template>
         </Button>
-        <hr class="border-[#E1DED5] mb-1 dark-theme:border-[#2E3037]" />
+        <hr class="mb-1 border-[#E1DED5] dark-theme:border-[#2E3037]" />
         <Button
           severity="secondary"
           text
@@ -101,18 +101,18 @@
           @click="executeCommand('Comfy.Canvas.ToggleMinimap')"
         >
           <template #default>
-            <span class="text-sm font-medium block">{{
+            <span class="block text-sm font-medium">{{
               minimapToggleText
             }}</span>
-            <span class="text-sm text-gray-500 block">{{
+            <span class="block text-sm text-gray-500">{{
               showMinimapCommandText
             }}</span>
           </template>
         </Button>
-        <hr class="border-[#E1DED5] mt-1 dark-theme:border-[#2E3037]" />
+        <hr class="mt-1 border-[#E1DED5] dark-theme:border-[#2E3037]" />
         <div
           ref="zoomInputContainer"
-          class="flex items-center px-2 bg-[#E7E6E6] focus-within:bg-[#F3F3F3] dark-theme:bg-[#8282821A] rounded p-2 zoomInputContainer"
+          class="zoomInputContainer flex items-center rounded bg-[#E7E6E6] p-2 px-2 focus-within:bg-[#F3F3F3] dark-theme:bg-[#8282821A]"
         >
           <InputNumber
             ref="zoomInput"
@@ -127,7 +127,7 @@
             @input="applyZoom"
             @keyup.enter="applyZoom"
           />
-          <span class="text-sm text-gray-500 -ml-4">%</span>
+          <span class="-ml-4 text-sm text-gray-500">%</span>
         </div>
       </div>
     </div>
@@ -158,6 +158,10 @@ interface Props {
 
 const props = defineProps<Props>()
 
+const emit = defineEmits<{
+  close: []
+}>()
+
 const interval = ref<number | null>(null)
 
 // Computed properties for reactive states
@@ -177,6 +181,9 @@ const applyZoom = (val: InputNumberInputEvent) => {
 
 const executeCommand = (command: string) => {
   void commandStore.execute(command)
+  if (command === 'Comfy.Canvas.ToggleMinimap') {
+    emit('close')
+  }
 }
 
 const startRepeat = (command: string) => {

src/components/graph/selectionToolbox/BypassButton.vue

@@ -7,11 +7,11 @@
     severity="secondary"
     text
     data-testid="bypass-button"
-    class="hover:dark-theme:bg-charcoal-600 hover:bg-[#E7E6E6]"
+    class="hover:bg-[#E7E6E6] hover:dark-theme:bg-charcoal-600"
     @click="toggleBypass"
   >
     <template #icon>
-      <i class="icon-[lucide--ban] w-4 h-4" />
+      <i class="icon-[lucide--ban] h-4 w-4" />
     </template>
   </Button>
 </template>

src/components/graph/selectionToolbox/ColorPickerButton.vue

@@ -12,11 +12,11 @@
     >
       <div class="flex items-center gap-1 px-0">
         <i
-          class="w-4 h-4 pi pi-circle-fill"
+          class="pi pi-circle-fill h-4 w-4"
           :style="{ color: currentColor ?? '' }"
         />
         <i
-          class="w-4 h-4 pi pi-chevron-down py-1"
+          class="pi pi-chevron-down h-4 w-4 py-1"
           :style="{ fontSize: '0.5rem' }"
         />
       </div>

src/components/graph/selectionToolbox/ConvertToSubgraphButton.vue

@@ -11,7 +11,7 @@
     @click="() => commandStore.execute('Comfy.Graph.UnpackSubgraph')"
   >
     <template #icon>
-      <i class="icon-[lucide--expand] w-4 h-4" />
+      <i class="icon-[lucide--expand] h-4 w-4" />
     </template>
   </Button>
   <Button

src/components/graph/selectionToolbox/ExecuteButton.vue

@@ -4,13 +4,13 @@
       value: t('selectionToolbox.executeButton.tooltip'),
       showDelay: 1000
     }"
-    class="dark-theme:bg-[#0B8CE9] bg-[#31B9F4] size-8 !p-0"
+    class="size-8 bg-[#31B9F4] !p-0 dark-theme:bg-[#0B8CE9]"
     text
     @mouseenter="() => handleMouseEnter()"
     @mouseleave="() => handleMouseLeave()"
     @click="handleClick"
   >
-    <i class="icon-[lucide--play] fill-path-white w-4 h-4" />
+    <i class="icon-[lucide--play] size-4 text-white" />
   </Button>
 </template>
 
@@ -64,9 +64,3 @@ const handleClick = async () => {
   await commandStore.execute('Comfy.QueueSelectedOutputNodes')
 }
 </script>
-<style scoped>
-:deep.fill-path-white > path {
-  fill: white;
-  stroke: unset;
-}
-</style>

src/components/graph/selectionToolbox/FrameNodes.vue

@@ -9,7 +9,7 @@
     severity="secondary"
     @click="frameNodes"
   >
-    <i class="icon-[lucide--frame] w-4 h-4" />
+    <i class="icon-[lucide--frame] h-4 w-4" />
   </Button>
 </template>
 

src/components/graph/selectionToolbox/InfoButton.vue

@@ -9,7 +9,7 @@
     severity="secondary"
     @click="toggleHelp"
   >
-    <i class="icon-[lucide--info] w-4 h-4" />
+    <i class="icon-[lucide--info] h-4 w-4" />
   </Button>
 </template>
 

src/components/graph/selectionToolbox/MaskEditorButton.vue

@@ -9,7 +9,7 @@
     text
     @click="openMaskEditor"
   >
-    <i-comfy:mask class="!w-4 !h-4" />
+    <i-comfy:mask class="!h-4 !w-4" />
   </Button>
 </template>
 

src/components/graph/selectionToolbox/MenuOptionItem.vue

@@ -1,15 +1,15 @@
 <template>
   <div
     v-if="option.type === 'divider'"
-    class="h-px bg-gray-200 dark-theme:bg-zinc-700 my-1"
+    class="my-1 h-px bg-gray-200 dark-theme:bg-zinc-700"
   />
   <div
     v-else
     role="button"
-    class="flex items-center gap-2 px-3 py-1.5 text-sm text-left hover:bg-gray-100 dark-theme:hover:bg-zinc-700 rounded cursor-pointer"
+    class="flex cursor-pointer items-center gap-2 rounded px-3 py-1.5 text-left text-sm hover:bg-gray-100 dark-theme:hover:bg-zinc-700"
     @click="handleClick"
   >
-    <i v-if="option.icon" :class="[option.icon, 'w-4 h-4']" />
+    <i v-if="option.icon" :class="[option.icon, 'h-4 w-4']" />
     <span class="flex-1">{{ option.label }}</span>
     <span v-if="option.shortcut" class="text-xs opacity-60">
       {{ option.shortcut }}
@@ -24,11 +24,11 @@
       :severity="option.badge === 'new' ? 'info' : 'secondary'"
       :value="t(option.badge)"
       :class="{
-        'bg-[#31B9F4] dark-theme:bg-[#0B8CE9] rounded-4xl':
+        'rounded-4xl bg-[#31B9F4] dark-theme:bg-[#0B8CE9]':
           option.badge === 'new',
-        'bg-[#9C9EAB] dark-theme:bg-[#000] rounded-4xl':
+        'rounded-4xl bg-[#9C9EAB] dark-theme:bg-[#000]':
           option.badge === 'deprecated',
-        'text-white uppercase text-[9px] h-4 px-1 gap-2.5': true
+        'h-4 gap-2.5 px-1 text-[9px] text-white uppercase': true
       }"
     />
   </div>