Update rh-test (as of 2025-10-11) (#6044)

## Summary Tested these changes and confirmed that: 1. Feedback button shows. 2. You can run workflows and switch out models. 3. You can use the mask editor. (thank you @ric-yu for helping me verify). ## Changes A lot, please see commits. Gets us up to date with `main` as of 10-11-2025. --------- Co-authored-by: Simula_r <18093452+simula-r@users.noreply.github.com> Co-authored-by: github-actions <github-actions@github.com> Co-authored-by: snomiao <snomiao@gmail.com> Co-authored-by: Christian Byrne <cbyrne@comfy.org> Co-authored-by: Claude <noreply@anthropic.com> Co-authored-by: DrJKL <DrJKL@users.noreply.github.com> Co-authored-by: Alexander Brown <drjkl@comfy.org> Co-authored-by: Marwan Ahmed <155799754+marawan206@users.noreply.github.com> Co-authored-by: DrJKL <DrJKL0424@gmail.com> Co-authored-by: Rizumu Ayaka <rizumu@ayaka.moe> Co-authored-by: Comfy Org PR Bot <snomiao+comfy-pr@gmail.com> Co-authored-by: AustinMroz <4284322+AustinMroz@users.noreply.github.com> Co-authored-by: Austin Mroz <austin@comfy.org> Co-authored-by: Johnpaul Chiwetelu <49923152+Myestery@users.noreply.github.com> Co-authored-by: GitHub Action <action@github.com> Co-authored-by: filtered <176114999+webfiltered@users.noreply.github.com> Co-authored-by: Benjamin Lu <benceruleanlu@proton.me> Co-authored-by: Jin Yi <jin12cc@gmail.com> Co-authored-by: Robin Huang <robin.j.huang@gmail.com>
2026-02-07 08:30:06 +00:00 · 2025-10-14 15:59:26 -07:00
parent ab312ce3d7
commit 0239a83da2
519 changed files with 22711 additions and 11532 deletions
--- a/.github/actions/setup-comfyui-server/action.yml
+++ b/.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
--- a/.github/actions/setup-frontend/action.yml
+++ b/.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
--- a/.github/actions/setup-playwright/action.yml
+++ b/.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
--- a/.github/workflows/claude-pr-review.yml
+++ b/.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 }}
--- a/.github/workflows/lint-and-format.yaml
+++ b/.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
--- a/.github/workflows/tests-ci.yaml
+++ b/.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"
--- a/.github/workflows/update-locales-for-given-custom-node-repository.yaml
+++ b/.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
--- a/.github/workflows/update-locales.yaml
+++ b/.github/workflows/update-locales.yaml
@@ -14,35 +14,35 @@ jobs:
    if: github.event_name == 'workflow_dispatch' || (github.event.pull_request.head.repo.full_name == github.repository && startsWith(github.head_ref, 'version-bump-'))
    runs-on: ubuntu-latest
    steps:
-    - name: Setup Frontend
+    - name: Checkout repository
+      uses: actions/checkout@v5
+
+    # Setup playwright environment
+    - name: Setup ComfyUI Frontend
      uses: ./.github/actions/setup-frontend
-    
-    - name: Cache tool outputs
-      uses: actions/cache@v4
      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 }}-
+        include_build_step: true
+    - name: Setup ComfyUI Server
+      uses: ./.github/actions/setup-comfyui-server
+      with:
+        launch_server: true
    - name: Setup Playwright
      uses: ./.github/actions/setup-playwright
+
    - name: Start dev server
      # Run electron dev server as it is a superset of the web dev server
      # We do want electron specific UIs to be translated.
      run: pnpm dev:electron &
-      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'
@@ -56,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
--- a/.github/workflows/update-node-definitions-locales.yaml
+++ b/.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
--- a/.github/workflows/update-playwright-expectations.yaml
+++ b/.github/workflows/update-playwright-expectations.yaml
@@ -3,42 +3,106 @@ name: Update Playwright Expectations

 on:
  pull_request:
-    types: [ labeled ]
+    types: [labeled]
+  issue_comment:
+    types: [created]
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true

 jobs:
  test:
    runs-on: ubuntu-latest
-    if: github.event.label.name == 'New Browser Test Expectations'
+    if: >
+      ( github.event_name == 'pull_request' && github.event.label.name == 'New Browser Test Expectations' ) ||
+      ( github.event.issue.pull_request && 
+        github.event_name == 'issue_comment' &&
+        (
+          github.event.comment.author_association == 'OWNER' ||
+          github.event.comment.author_association == 'MEMBER' ||
+          github.event.comment.author_association == 'COLLABORATOR'
+        ) &&
+        startsWith(github.event.comment.body, '/update-playwright') )
    steps:
-    - name: Checkout workflow repo
-      uses: actions/checkout@v5
-    - name: Setup Frontend
-      uses: ./.github/actions/setup-frontend
-    - name: Setup Playwright
-      uses: ./.github/actions/setup-playwright
-    - name: Run Playwright tests and update snapshots
-      id: playwright-tests
-      run: 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/
-        retention-days: 30
-    - name: Debugging info
-      run: |
-        echo "Branch: ${{ github.head_ref }}"
-        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 fetch origin ${{ github.head_ref }}
-        git checkout -B ${{ github.head_ref }} origin/${{ github.head_ref }}
-        git add browser_tests
-        git commit -m "[automated] Update test expectations"
-        git push origin HEAD:${{ github.head_ref }}
-      working-directory: ComfyUI_frontend
+      - 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
+        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
+      - uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: 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
+      - 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
+          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 }}
--- a/.github/workflows/vitest-tests.yaml
+++ b/.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
--- a/.storybook/README.md
+++ b/.storybook/README.md
@@ -211,18 +211,17 @@ This Storybook setup includes:

 ## Icon Usage in Storybook

-In this project, the `<i-lucide:... />` syntax from unplugin-icons is not supported in Storybook.  
+In this project, only the `<i class="icon-[lucide--folder]" />` syntax from unplugin-icons is supported in Storybook.  

 **Example:**

 ```vue
 <script setup lang="ts">
-import { Trophy, Settings } from 'lucide-vue-next'
 </script>

 <template>
-  <Trophy :size="16" class="text-neutral" />
-  <Settings :size="16" class="text-neutral" />
+  <i class="icon-[lucide--trophy] text-neutral size-4" />
+  <i class="icon-[lucide--settings] text-neutral size-4" />
 </template>
 ```

--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@@ -7,15 +7,15 @@
    }
  ],
  "rules": {
-    "import-notation": "url",
+    "import-notation": "string",
    "font-family-no-missing-generic-family-keyword": true,
-    "declaration-block-no-redundant-longhand-properties": true,
    "declaration-property-value-no-unknown": [
      true,
      {
        "ignoreProperties": {
          "speak": ["none"],
-          "app-region": ["drag", "no-drag"]
+          "app-region": ["drag", "no-drag"],
+          "/^(width|height)$/": ["/^v-bind/"]
        }
      }
    ],
@@ -35,7 +35,7 @@
    "selector-max-type": 2,
    "declaration-block-no-duplicate-properties": true,
    "block-no-empty": true,
-    "no-descending-specificity": true,
+    "no-descending-specificity": null,
    "no-duplicate-at-import-rules": true,
    "at-rule-no-unknown": [
      true,
@@ -57,7 +57,8 @@
      true,
      {
        "ignoreFunctions": [
-          "theme"
+          "theme",
+          "v-bind"
        ]
      }
    ]
--- a/AGENTS.md
+++ b/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.
--- a/CLAUDE.md
+++ b/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')" />`
--- a/7
+++ b/7
@@ -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
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -255,7 +255,7 @@ pnpm format
 The project supports three types of icons, all with automatic imports (no manual imports needed):

 1. **PrimeIcons** - Built-in PrimeVue icons using CSS classes: `<i class="pi pi-plus" />`
-2. **Iconify Icons** - 200,000+ icons from various libraries: `<i-lucide:settings />`, `<i-mdi:folder />`
+2. **Iconify Icons** - 200,000+ icons from various libraries: `<i class="icon-[lucide--settings]" />`, `<i class="icon-[mdi--folder]" />`
 3. **Custom Icons** - Your own SVG icons: `<i-comfy:workflow />`

 Icons are powered by the unplugin-icons system, which automatically discovers and imports icons as Vue components. Custom icons are stored in `packages/design-system/src/icons/` and processed by `packages/design-system/src/iconCollection.ts` with automatic validation.
--- a/apps/desktop-ui/src/components/install/GpuPicker.vue
+++ b/apps/desktop-ui/src/components/install/GpuPicker.vue
@@ -53,7 +53,7 @@
          :value="$t('install.gpuPicker.recommended')"
          class="bg-neutral-300 text-neutral-900 rounded-full text-sm font-bold px-2 py-[1px]"
        />
-        <i-lucide:badge-check class="text-neutral-300 text-lg" />
+        <i class="icon-[lucide--badge-check] text-neutral-300 text-lg" />
      </div>
    </div>

--- a/apps/desktop-ui/src/components/install/InstallLocationPicker.vue
+++ b/apps/desktop-ui/src/components/install/InstallLocationPicker.vue
@@ -286,6 +286,12 @@ const onFocus = async () => {
    .p-accordionheader {
      @apply rounded-t-xl rounded-b-none;
    }
+
+    .p-accordionheader-toggle-icon {
+      &::before {
+        content: '\e902';
+      }
+    }
  }

  .p-accordioncontent {
@@ -302,13 +308,5 @@ const onFocus = async () => {
      content: '\e933';
    }
  }
-
-  .p-accordionpanel-active {
-    .p-accordionheader-toggle-icon {
-      &::before {
-        content: '\e902';
-      }
-    }
-  }
 }
 </style>
--- a/apps/desktop-ui/src/views/DesktopUpdateView.vue
+++ b/apps/desktop-ui/src/views/DesktopUpdateView.vue
@@ -65,12 +65,12 @@ onUnmounted(() => electron.Validation.dispose())

 .download-bg::before {
  @apply m-0 absolute text-muted;
-  font-family: 'primeicons';
+  font-family: 'primeicons', sans-serif;
  top: -2rem;
  right: 2rem;
  speak: none;
  font-style: normal;
-  font-weight: normal;
+  font-weight: 400;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
--- a/apps/desktop-ui/src/views/MaintenanceView.vue
+++ b/apps/desktop-ui/src/views/MaintenanceView.vue
@@ -186,12 +186,12 @@ onUnmounted(() => electron.Validation.dispose())

 .backspan::before {
  @apply m-0 absolute text-muted;
-  font-family: 'primeicons';
+  font-family: 'primeicons', sans-serif;
  top: -2rem;
  right: -2rem;
  speak: none;
  font-style: normal;
-  font-weight: normal;
+  font-weight: 400;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
--- a/apps/desktop-ui/src/views/ServerStartView.vue
+++ b/apps/desktop-ui/src/views/ServerStartView.vue
@@ -18,16 +18,16 @@
        style="
          background: radial-gradient(
            ellipse 800px 600px at center,
-            rgba(23, 23, 23, 0.95) 0%,
-            rgba(23, 23, 23, 0.93) 10%,
-            rgba(23, 23, 23, 0.9) 20%,
-            rgba(23, 23, 23, 0.85) 30%,
-            rgba(23, 23, 23, 0.75) 40%,
-            rgba(23, 23, 23, 0.6) 50%,
-            rgba(23, 23, 23, 0.4) 60%,
-            rgba(23, 23, 23, 0.2) 70%,
-            rgba(23, 23, 23, 0.1) 80%,
-            rgba(23, 23, 23, 0.05) 90%,
+            rgb(23 23 23 / 0.95) 0%,
+            rgb(23 23 23 / 0.93) 10%,
+            rgb(23 23 23 / 0.9) 20%,
+            rgb(23 23 23 / 0.85) 30%,
+            rgb(23 23 23 / 0.75) 40%,
+            rgb(23 23 23 / 0.6) 50%,
+            rgb(23 23 23 / 0.4) 60%,
+            rgb(23 23 23 / 0.2) 70%,
+            rgb(23 23 23 / 0.1) 80%,
+            rgb(23 23 23 / 0.05) 90%,
            transparent 100%
          );
        "
--- a/browser_tests/assets/vueNodes/linked-int-widget.json
+++ b/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
+}
--- a/browser_tests/fixtures/ComfyPage.ts
+++ b/browser_tests/fixtures/ComfyPage.ts
@@ -1,6 +1,5 @@
 import type { APIRequestContext, Locator, Page } from '@playwright/test'
-import { expect } from '@playwright/test'
-import { test as base } from '@playwright/test'
+import { test as base, expect } from '@playwright/test'
 import dotenv from 'dotenv'
 import * as fs from 'fs'

@@ -130,7 +129,8 @@ export class ComfyPage {

  // Buttons
  public readonly resetViewButton: Locator
-  public readonly queueButton: Locator
+  public readonly queueButton: Locator // Run button in Legacy UI
+  public readonly runButton: Locator // Run button (renamed "Queue" -> "Run")

  // Inputs
  public readonly workflowUploadInput: Locator
@@ -165,6 +165,9 @@ export class ComfyPage {
    this.widgetTextBox = page.getByPlaceholder('text').nth(1)
    this.resetViewButton = page.getByRole('button', { name: 'Reset View' })
    this.queueButton = page.getByRole('button', { name: 'Queue Prompt' })
+    this.runButton = page
+      .getByTestId('queue-button')
+      .getByRole('button', { name: 'Run' })
    this.workflowUploadInput = page.locator('#comfy-file-input')
    this.visibleToasts = page.locator('.p-toast-message:visible')

@@ -1086,12 +1089,6 @@ export class ComfyPage {

    const targetPosition = await targetSlot.getPosition()

-    // Debug: Log the positions we're trying to use
-    console.log('Drag positions:', {
-      source: sourcePosition,
-      target: targetPosition
-    })
-
    await this.dragAndDrop(sourcePosition, targetPosition)
    await this.nextFrame()
  }
--- a/browser_tests/fixtures/VueNodeHelpers.ts
+++ b/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()
+    }
+  }
 }
--- a/browser_tests/tests/domWidget.spec.ts-snapshots/focus-mode-on-chromium-linux.png
+++ b/browser_tests/tests/domWidget.spec.ts-snapshots/focus-mode-on-chromium-linux.png
--- a/browser_tests/tests/minimap.spec.ts
+++ b/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')
  })

--- a/browser_tests/tests/rerouteNode.spec.ts-snapshots/reroute-inserted-chromium-linux.png
+++ b/browser_tests/tests/rerouteNode.spec.ts-snapshots/reroute-inserted-chromium-linux.png
--- a/browser_tests/tests/templates.spec.ts-snapshots/template-grid-varying-content-chromium-linux.png
+++ b/browser_tests/tests/templates.spec.ts-snapshots/template-grid-varying-content-chromium-linux.png
--- a/browser_tests/tests/vueNodes/groups/groups.spec.ts
+++ b/browser_tests/tests/vueNodes/groups/groups.spec.ts
@@ -8,6 +8,7 @@ const CREATE_GROUP_HOTKEY = 'Control+g'
 test.describe('Vue Node Groups', () => {
  test.beforeEach(async ({ comfyPage }) => {
    await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.setSetting('Comfy.Minimap.ShowGroups', true)
    await comfyPage.vueNodes.waitForNodes()
  })

@@ -15,6 +16,7 @@ test.describe('Vue Node Groups', () => {
    await comfyPage.page.getByText('Load Checkpoint').click()
    await comfyPage.page.getByText('KSampler').click({ modifiers: ['Control'] })
    await comfyPage.page.keyboard.press(CREATE_GROUP_HOTKEY)
+    await comfyPage.nextFrame()
    await expect(comfyPage.canvas).toHaveScreenshot(
      'vue-groups-create-group.png'
    )
--- a/browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-create-group-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-create-group-chromium-linux.png
--- a/browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-fit-to-contents-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-fit-to-contents-chromium-linux.png
--- a/browser_tests/tests/vueNodes/interactions/canvas/pan.spec.ts-snapshots/vue-nodes-paned-with-touch-mobile-chrome-linux.png
+++ b/browser_tests/tests/vueNodes/interactions/canvas/pan.spec.ts-snapshots/vue-nodes-paned-with-touch-mobile-chrome-linux.png
--- a/browser_tests/tests/vueNodes/interactions/canvas/zoom.spec.ts-snapshots/zoomed-in-ctrl-shift-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/interactions/canvas/zoom.spec.ts-snapshots/zoomed-in-ctrl-shift-chromium-linux.png
--- a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts
+++ b/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)
+    })
+  })
 })
--- a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-dragging-link-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-dragging-link-chromium-linux.png
--- a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-input-drag-ctrl-alt-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-input-drag-ctrl-alt-chromium-linux.png
--- a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-input-drag-reuses-origin-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-input-drag-reuses-origin-chromium-linux.png
--- a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-reroute-input-drag-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-reroute-input-drag-chromium-linux.png
--- a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-reroute-output-shift-drag-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-reroute-output-shift-drag-chromium-linux.png
--- a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-shift-output-multi-link-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-shift-output-multi-link-chromium-linux.png
--- a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-snap-to-node-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-snap-to-node-chromium-linux.png
--- a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-snap-to-slot-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-snap-to-slot-chromium-linux.png
--- a/browser_tests/tests/vueNodes/interactions/node/move.spec.ts-snapshots/vue-node-moved-node-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/interactions/node/move.spec.ts-snapshots/vue-node-moved-node-chromium-linux.png
--- a/browser_tests/tests/vueNodes/interactions/node/move.spec.ts-snapshots/vue-node-moved-node-touch-mobile-chrome-linux.png
+++ b/browser_tests/tests/vueNodes/interactions/node/move.spec.ts-snapshots/vue-node-moved-node-touch-mobile-chrome-linux.png
--- a/browser_tests/tests/vueNodes/interactions/node/select.spec.ts
+++ b/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)
+  })
 })
--- a/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-color-blue-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-color-blue-chromium-linux.png
--- a/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-dark-all-colors-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-dark-all-colors-chromium-linux.png
--- a/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-light-all-colors-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-light-all-colors-chromium-linux.png
--- a/browser_tests/tests/vueNodes/nodeStates/error.spec.ts
+++ b/browser_tests/tests/vueNodes/nodeStates/error.spec.ts
@@ -3,7 +3,7 @@ import {
  comfyPageFixture as test
 } from '../../../fixtures/ComfyPage'

-const ERROR_CLASS = /border-error/
+const ERROR_CLASS = /border-node-stroke-error/

 test.describe('Vue Node Error', () => {
  test.beforeEach(async ({ comfyPage }) => {
@@ -17,16 +17,21 @@ test.describe('Vue Node Error', () => {
    await comfyPage.setup()
    await comfyPage.loadWorkflow('missing/missing_nodes')

-    // Close missing nodes warning dialog
-    await comfyPage.page.getByRole('button', { name: 'Close' }).click()
-    await comfyPage.page.waitForSelector('.comfy-missing-nodes', {
-      state: 'hidden'
-    })
-
    // Expect error state on missing unknown node
    const unknownNode = comfyPage.page.locator('[data-node-id]').filter({
      hasText: 'UNKNOWN NODE'
    })
    await expect(unknownNode).toHaveClass(ERROR_CLASS)
  })
+
+  test('should display error state when node causes execution error', async ({
+    comfyPage
+  }) => {
+    await comfyPage.setup()
+    await comfyPage.loadWorkflow('nodes/execution_error')
+    await comfyPage.runButton.click()
+
+    const raiseErrorNode = comfyPage.vueNodes.getNodeByTitle('Raise Error')
+    await expect(raiseErrorNode).toHaveClass(ERROR_CLASS)
+  })
 })
--- a/browser_tests/tests/vueNodes/nodeStates/lod.spec.ts-snapshots/vue-nodes-default-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/nodeStates/lod.spec.ts-snapshots/vue-nodes-default-chromium-linux.png
--- a/browser_tests/tests/vueNodes/nodeStates/lod.spec.ts-snapshots/vue-nodes-lod-active-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/nodeStates/lod.spec.ts-snapshots/vue-nodes-lod-active-chromium-linux.png
--- a/browser_tests/tests/vueNodes/nodeStates/lod.spec.ts-snapshots/vue-nodes-lod-inactive-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/nodeStates/lod.spec.ts-snapshots/vue-nodes-lod-inactive-chromium-linux.png
--- a/browser_tests/tests/vueNodes/widgets/int/integerWidget.spec.ts
+++ b/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())
+  })
+})
--- a/browser_tests/tests/vueNodes/widgets/load/uploadWidgets.spec.ts-snapshots/vue-nodes-upload-widgets-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/widgets/load/uploadWidgets.spec.ts-snapshots/vue-nodes-upload-widgets-chromium-linux.png
--- a/browser_tests/tests/widget.spec.ts-snapshots/load-audio-widget-chromium-linux.png
+++ b/browser_tests/tests/widget.spec.ts-snapshots/load-audio-widget-chromium-linux.png
--- a/eslint.config.ts
+++ b/eslint.config.ts
@@ -1,54 +1,70 @@
 // For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
 import pluginJs from '@eslint/js'
 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*',
-      'lint-staged.config.js',
-      'vitest.litegraph.config.ts'
+      'packages/registry-types/src/comfyRegistryTypes.ts',
+      'src/extensions/core/*',
+      'src/scripts/*',
+      'src/types/generatedManagerTypes.ts',
+      'src/types/vue-shim.d.ts'
    ]
  },
-  {
-    files: ['./**/*.js'],
-    languageOptions: {
-      globals: {
-        ...globals.browser,
-        __COMFYUI_FRONTEND_VERSION__: 'readonly'
-      },
-      ecmaVersion: 2020,
-      sourceType: 'module'
-    },
-    rules: {
-      '@typescript-eslint/no-floating-promises': 'off'
-    }
-  },
  {
    files: ['./**/*.{ts,mts}'],
+    settings,
    languageOptions: {
-      globals: {
-        ...globals.browser,
-        __COMFYUI_FRONTEND_VERSION__: 'readonly'
-      },
+      globals: commonGlobals,
      parserOptions: {
-        parser: tseslint.parser,
+        ...commonParserOptions,
        projectService: {
          allowDefaultProject: [
            'vite.config.mts',
@@ -57,37 +73,33 @@ export default defineConfig([
            'playwright.config.ts',
            'playwright.i18n.config.ts'
          ]
-        },
-        tsConfigRootDir: import.meta.dirname,
-        ecmaVersion: 2020,
-        sourceType: 'module',
-        extraFileExtensions
+        }
      }
    }
  },
  {
    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
-      }
+      parserOptions: commonParserOptions
    }
  },
  pluginJs.configs.recommended,
-  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'],
+  // @ts-expect-error Bad types in the plugin
+  importX.flatConfigs.recommended,
+  // @ts-expect-error Bad types in the plugin
+  importX.flatConfigs.typescript,
  {
    plugins: {
      'unused-imports': unusedImports,
@@ -107,13 +119,18 @@ export default defineConfig([
          allowInterfaces: 'always'
        }
      ],
+      'import-x/consistent-type-specifier-style': ['error', 'prefer-top-level'],
+      'import-x/no-useless-path-segments': 'error',
+      '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:/'],
      'vue/multi-word-component-names': 'off', // TODO: fix
      'vue/no-template-shadow': 'off', // TODO: fix
+      'vue/match-component-import-name': 'error',
      /* Toggle on to do additional until we can clean up existing violations.
      'vue/no-unused-emit-declarations': 'error',
      'vue/no-unused-properties': 'error',
--- a/knip.config.ts
+++ b/knip.config.ts
@@ -45,9 +45,9 @@ const config: KnipConfig = {
  compilers: {
    // https://github.com/webpro-nl/knip/issues/1008#issuecomment-3207756199
    css: (text: string) =>
-      [
-        ...text.replaceAll('plugin', 'import').matchAll(/(?<=@)import[^;]+/g)
-      ].join('\n')
+      [...text.replaceAll('plugin', 'import').matchAll(/(?<=@)import[^;]+/g)]
+        .map((match) => match[0].replace(/url\(['"]?([^'"()]+)['"]?\)/, '$1'))
+        .join('\n')
  },
  vite: {
    config: ['vite?(.*).config.mts']
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
  "name": "@comfyorg/comfyui-frontend",
  "private": true,
-  "version": "1.28.6",
+  "version": "1.29.1",
  "type": "module",
  "repository": "https://github.com/Comfy-Org/ComfyUI_frontend",
  "homepage": "https://comfy.org",
@@ -11,7 +11,7 @@
    "build:desktop": "nx build @comfyorg/desktop-ui",
    "build-storybook": "storybook build",
    "build:types": "nx build --config vite.types.config.mts && node scripts/prepare-types.js",
-    "build": "pnpm typecheck && nx build",
+    "build": "cross-env NODE_OPTIONS='--max-old-space-size=8192' pnpm typecheck && nx build",
    "collect-i18n": "pnpm exec playwright test --config=playwright.i18n.config.ts",
    "dev:desktop": "nx dev @comfyorg/desktop-ui",
    "dev:electron": "nx serve --config vite.electron.config.mts",
@@ -35,8 +35,8 @@
    "prepare": "husky || true && git config blame.ignoreRevsFile .git-blame-ignore-revs || true",
    "preview": "nx preview",
    "storybook": "nx storybook -p 6006",
-    "stylelint:fix": "stylelint --cache --fix",
-    "stylelint": "stylelint --cache",
+    "stylelint:fix": "stylelint --cache --fix '{apps,packages,src}/**/*.{css,vue}'",
+    "stylelint": "stylelint --cache '{apps,packages,src}/**/*.{css,vue}'",
    "test:browser": "pnpm exec nx e2e",
    "test:unit": "nx run test",
    "typecheck": "vue-tsc --noEmit",
@@ -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:",
@@ -66,10 +67,14 @@
    "@vitest/coverage-v8": "catalog:",
    "@vitest/ui": "catalog:",
    "@vue/test-utils": "catalog:",
+    "cross-env": "catalog:",
    "eslint": "catalog:",
    "eslint-config-prettier": "catalog:",
+    "eslint-import-resolver-typescript": "catalog:",
+    "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",
--- a/packages/design-system/src/css/style.css
+++ b/packages/design-system/src/css/style.css
@@ -9,35 +9,6 @@

@config '../../tailwind.config.ts';

-:root {
-  --fg-color: #000;
-  --bg-color: #fff;
-  --comfy-menu-bg: #353535;
-  --comfy-menu-secondary-bg: #292929;
-  --comfy-topbar-height: 2.5rem;
-  --comfy-input-bg: #222;
-  --input-text: #ddd;
-  --descrip-text: #999;
-  --drag-text: #ccc;
-  --error-text: #ff4444;
-  --border-color: #4e4e4e;
-  --tr-even-bg-color: #222;
-  --tr-odd-bg-color: #353535;
-  --primary-bg: #236692;
-  --primary-fg: #ffffff;
-  --primary-hover-bg: #3485bb;
-  --primary-hover-fg: #ffffff;
-  --content-bg: #e0e0e0;
-  --content-fg: #000;
-  --content-hover-bg: #adadad;
-  --content-hover-fg: #000;
-
-  /* Code styling colors for help menu*/
-  --code-text-color: rgba(0, 122, 255, 1);
-  --code-bg-color: rgba(96, 165, 250, 0.2);
-  --code-block-bg-color: rgba(60, 60, 60, 0.12);
-}
-
@media (prefers-color-scheme: dark) {
  :root {
    --fg-color: #fff;
@@ -129,6 +100,36 @@
 }

 :root {
+  --fg-color: #000;
+  --bg-color: #fff;
+  --comfy-menu-bg: #353535;
+  --comfy-menu-secondary-bg: #292929;
+  --comfy-topbar-height: 2.5rem;
+  --comfy-input-bg: #222;
+  --input-text: #ddd;
+  --descrip-text: #999;
+  --drag-text: #ccc;
+  --error-text: #ff4444;
+  --border-color: #4e4e4e;
+  --tr-even-bg-color: #222;
+  --tr-odd-bg-color: #353535;
+  --primary-bg: #236692;
+  --primary-fg: #ffffff;
+  --primary-hover-bg: #3485bb;
+  --primary-hover-fg: #ffffff;
+  --content-bg: #e0e0e0;
+  --content-fg: #000;
+  --content-hover-bg: #adadad;
+  --content-hover-fg: #000;
+
+  /* Code styling colors for help menu*/
+  --code-text-color: rgb(0 122 255 / 1);
+  --code-bg-color: rgb(96 165 250 / 0.2);
+  --code-block-bg-color: rgb(60 60 60 / 0.12);
+
+  /* --- */
+
+  --accent-primary: var(--color-charcoal-700);
  --backdrop: var(--color-white);
  --dialog-surface: var(--color-neutral-200);
  --node-component-border: var(--color-gray-400);
@@ -150,15 +151,24 @@
  --node-component-tooltip-border: var(--color-sand-100);
  --node-component-tooltip-surface: var(--color-white);
  --node-component-widget-input: var(--fg-color);
-  --node-component-widget-input-surface: rgb(from var(--color-zinc-500) r g b / 10%);
+  --node-component-widget-input-surface: rgb(
+    from var(--color-zinc-500) r g b / 10%
+  );
  --node-component-widget-skeleton-surface: var(--color-zinc-300);
-  --node-stroke: var(--color-stone-100);
+  --node-stroke: var(--color-gray-400);
+  --node-stroke-selected: var(--color-accent-primary);
+  --node-stroke-error: var(--color-error);
+  --node-stroke-executing: var(--color-blue-100);
 }

 .dark-theme {
+  --accent-primary: var(--color-pure-white);
  --backdrop: var(--color-neutral-900);
  --dialog-surface: var(--color-neutral-700);
  --node-component-border: var(--color-stone-200);
+  --node-component-border-error: var(--color-danger-100);
+  --node-component-border-executing: var(--color-blue-500);
+  --node-component-border-selected: var(--color-charcoal-200);
  --node-component-header-icon: var(--color-slate-300);
  --node-component-header-surface: var(--color-charcoal-800);
  --node-component-outline: var(--color-white);
@@ -174,7 +184,10 @@
  --node-component-tooltip-border: var(--color-slate-300);
  --node-component-tooltip-surface: var(--color-charcoal-800);
  --node-component-widget-skeleton-surface: var(--color-zinc-800);
-  --node-stroke: var(--color-slate-100);
+  --node-stroke: var(--color-stone-200);
+  --node-stroke-selected: var(--color-pure-white);
+  --node-stroke-error: var(--color-error);
+  --node-stroke-executing: var(--color-blue-100);
 }

@theme inline {
@@ -212,6 +225,9 @@
    --node-component-widget-skeleton-surface
  );
  --color-node-stroke: var(--node-stroke);
+  --color-node-stroke-selected: var(--node-stroke-selected);
+  --color-node-stroke-error: var(--node-stroke-error);
+  --color-node-stroke-executing: var(--node-stroke-executing);
 }

@custom-variant dark-theme {
@@ -496,7 +512,7 @@ body {

 /* Strong and emphasis */
 .comfy-markdown-content strong {
-  font-weight: bold;
+  font-weight: 700;
 }

 .comfy-markdown-content em {
@@ -507,7 +523,7 @@ body {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 100; /* Sit on top */
-  padding: 30px 30px 10px 30px;
+  padding: 30px 30px 10px;
  background-color: var(--comfy-menu-bg); /* Modal background */
  color: var(--error-text);
  box-shadow: 0 0 20px #888888;
@@ -555,8 +571,8 @@ body {
  background-color: var(--comfy-menu-bg);
  font-family: sans-serif;
  padding: 10px;
-  border-radius: 0 8px 8px 8px;
-  box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.4);
+  border-radius: 0 8px 8px;
+  box-shadow: 3px 3px 8px rgb(0 0 0 / 0.4);
 }

 .comfy-menu-header {
@@ -574,7 +590,7 @@ body {
 }

 .comfy-menu .comfy-menu-actions button {
-  background-color: rgba(0, 0, 0, 0);
+  background-color: rgb(0 0 0 / 0);
  padding: 0;
  border: none;
  cursor: pointer;
@@ -643,13 +659,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;
@@ -689,7 +702,7 @@ span.drag-handle::after {
  min-width: 160px;
  margin: 0;
  padding: 3px;
-  font-weight: normal;
+  font-weight: 400;
 }

 .comfy-list-items button {
@@ -806,7 +819,7 @@ dialog {
 }

 dialog::backdrop {
-  background: rgba(0, 0, 0, 0.5);
+  background: rgb(0 0 0 / 0.5);
 }

 .comfy-dialog.comfyui-dialog.comfy-modal {
@@ -1012,9 +1025,6 @@ audio.comfy-audio.empty-audio-widget {
 .lg-node {
  /* Disable text selection on all nodes */
  user-select: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
 }

 .lg-node .lg-slot,
@@ -1041,7 +1051,6 @@ audio.comfy-audio.empty-audio-widget {
  filter: none;
  backdrop-filter: none;
  text-shadow: none;
-  -webkit-mask-image: none;
  mask-image: none;
  clip-path: none;
  background-image: none;
@@ -1051,6 +1060,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;
 }
--- a/packages/design-system/src/icons/README.md
+++ b/packages/design-system/src/icons/README.md
@@ -26,9 +26,9 @@ ComfyUI supports three types of icons that can be used throughout the interface.
 ```vue
 <template>
  <!-- Primary icon set: Lucide -->
-  <i-lucide:download />
-  <i-lucide:settings />
-  <i-lucide:workflow class="text-2xl" />
+  <i class="icon-[lucide--download]" />
+  <i class="icon-[lucide--settings]" />
+  <i class="icon-[lucide--workflow]" class="text-2xl" />

  <!-- Other popular icon sets -->
  <i-mdi:folder-open />
@@ -41,7 +41,7 @@ ComfyUI supports three types of icons that can be used throughout the interface.
  <!-- Carbon Icons -->

  <!-- With styling -->
-  <i-lucide:save class="w-6 h-6 text-blue-500" />
+  <i class="icon-[lucide--save]" class="w-6 h-6 text-blue-500" />
 </template>
 ```

@@ -77,7 +77,7 @@ ComfyUI supports three types of icons that can be used throughout the interface.
  <!-- Iconify/Custom in button (template) -->
  <Button>
    <template #icon>
-      <i-lucide:save />
+      <i class="icon-[lucide--save]" />
    </template>
    Save File
  </Button>
@@ -88,8 +88,8 @@ ComfyUI supports three types of icons that can be used throughout the interface.

 ```vue
 <template>
-  <i-lucide:eye v-if="isVisible" />
-  <i-lucide:eye-off v-else />
+  <i class="icon-[lucide--eye]" v-if="isVisible" />
+  <i class="icon-[lucide--eye-off]" v-else />

  <!-- Or with ternary -->
  <component :is="isLocked ? 'i-lucide:lock' : 'i-lucide:lock-open'" />
@@ -100,7 +100,7 @@ ComfyUI supports three types of icons that can be used throughout the interface.

 ```vue
 <template>
-  <i-lucide:info
+  <i class="icon-[lucide--info]"
    v-tooltip="'Click for more information'"
    class="cursor-pointer"
  />
@@ -174,20 +174,20 @@ No imports needed - icons are auto-discovered!
 ```vue
 <template>
  <!-- Size with Tailwind classes -->
-  <i-lucide:plus class="w-4 h-4" />
+  <i class="icon-[lucide--plus]" class="w-4 h-4" />
  <!-- 16px -->
-  <i-lucide:plus class="w-6 h-6" />
+  <i class="icon-[lucide--plus]" class="w-6 h-6" />
  <!-- 24px (default) -->
-  <i-lucide:plus class="w-8 h-8" />
+  <i class="icon-[lucide--plus]" class="w-8 h-8" />
  <!-- 32px -->

  <!-- Or text size -->
-  <i-lucide:plus class="text-sm" />
-  <i-lucide:plus class="text-2xl" />
+  <i class="icon-[lucide--plus]" class="text-sm" />
+  <i class="icon-[lucide--plus]" class="text-2xl" />

  <!-- Colors -->
-  <i-lucide:check class="text-green-500" />
-  <i-lucide:x class="text-red-500" />
+  <i class="icon-[lucide--check]" class="text-green-500" />
+  <i class="icon-[lucide--x]" class="text-red-500" />
 </template>
 ```

@@ -219,7 +219,7 @@ Always use `currentColor` in SVGs for automatic theme adaptation:
  <!-- After -->
  <Button>
    <template #icon>
-      <i-lucide:download />
+      <i class="icon-[lucide--download]" />
    </template>
  </Button>
 </template>
--- a/packages/design-system/src/icons/play.svg
+++ b/packages/design-system/src/icons/play.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3" d="m4 2 9.333 6L4 14V2Z"/></svg>
--- a/packages/design-system/tailwind.config.ts
+++ b/packages/design-system/tailwind.config.ts
@@ -4,22 +4,13 @@ import { addDynamicIconSelectors } from '@iconify/tailwind'
 import { iconCollection } from './src/iconCollection'

 export default {
-  content: [],
-  safelist: [
-    'icon-[lucide--folder]',
-    'icon-[lucide--package]',
-    'icon-[lucide--image]',
-    'icon-[lucide--video]',
-    'icon-[lucide--box]',
-    'icon-[lucide--audio-waveform]',
-    'icon-[lucide--message-circle]'
-  ],
  plugins: [
    addDynamicIconSelectors({
      iconSets: {
        comfy: iconCollection,
        lucide
      },
+      scale: 1.2,
      prefix: 'icon'
    })
  ]
--- a/packages/shared-frontend-utils/src/formatUtil.ts
+++ b/packages/shared-frontend-utils/src/formatUtil.ts
@@ -82,7 +82,7 @@ export function formatSize(value?: number) {
 * - filename: 'file'
 * - suffix: 'txt'
 */
-function getFilenameDetails(fullFilename: string) {
+export function getFilenameDetails(fullFilename: string) {
  if (fullFilename.includes('.')) {
    return {
      filename: fullFilename.split('.').slice(0, -1).join('.'),
@@ -451,3 +451,26 @@ export function stringToLocale(locale: string): SupportedLocale {
    ? (locale as SupportedLocale)
    : 'en'
 }
+
+export function formatDuration(milliseconds: number): string {
+  if (!milliseconds || milliseconds < 0) return '0s'
+
+  const totalSeconds = Math.floor(milliseconds / 1000)
+  const hours = Math.floor(totalSeconds / 3600)
+  const minutes = Math.floor((totalSeconds % 3600) / 60)
+  const remainingSeconds = Math.floor(totalSeconds % 60)
+
+  const parts: string[] = []
+
+  if (hours > 0) {
+    parts.push(`${hours}h`)
+  }
+  if (minutes > 0) {
+    parts.push(`${minutes}m`)
+  }
+  if (remainingSeconds > 0 || parts.length === 0) {
+    parts.push(`${remainingSeconds}s`)
+  }
+
+  return parts.join(' ')
+}
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -3,60 +3,19 @@ packages:
  - packages/**

 catalog:
-  # Core frameworks
-  typescript: ^5.9.2
-  vue: ^3.5.13
-
-  # Build tools
+  '@alloc/quick-lru': ^5.2.0
+  '@eslint/js': ^9.35.0
+  '@iconify-json/lucide': ^1.1.178
+  '@iconify/json': ^2.2.380
+  '@iconify/tailwind': ^1.1.3
+  '@intlify/eslint-plugin-vue-i18n': ^4.1.0
+  '@lobehub/i18n-cli': ^1.25.1
  '@nx/eslint': 21.4.1
  '@nx/playwright': 21.4.1
  '@nx/storybook': 21.4.1
  '@nx/vite': 21.4.1
-  nx: 21.4.1
-  tsx: ^4.15.6
-  vite: ^5.4.19
-  '@vitejs/plugin-vue': ^5.1.4
-  'vite-plugin-dts': ^4.5.4
-  vue-tsc: ^3.0.7
-
-  # Testing
-  'happy-dom': ^15.11.0
-  jsdom: ^26.1.0
  '@pinia/testing': ^0.1.5
  '@playwright/test': ^1.52.0
-  '@vitest/coverage-v8': ^3.2.4
-  '@vitest/ui': ^3.0.0
-  vitest: ^3.2.4
-  '@vue/test-utils': ^2.4.6
-
-  # Linting & Formatting
-  '@eslint/js': ^9.35.0
-  eslint: ^9.34.0
-  'eslint-config-prettier': ^10.1.8
-  'eslint-plugin-prettier': ^5.5.4
-  'eslint-plugin-storybook': ^9.1.6
-  'eslint-plugin-unused-imports': ^4.2.0
-  'eslint-plugin-vue': ^10.4.0
-  globals: ^15.9.0
-  '@intlify/eslint-plugin-vue-i18n': ^4.1.0
-  postcss-html: ^1.8.0
-  prettier: ^3.3.2
-  stylelint: ^16.24.0
-  'typescript-eslint': ^8.44.0
-  'vue-eslint-parser': ^10.2.0
-
-  # Vue ecosystem
-  '@sentry/vue': ^8.48.0
-  '@vueuse/core': ^11.0.0
-  '@vueuse/integrations': ^13.9.0
-  'vite-plugin-html': ^3.2.2
-  'vite-plugin-vue-devtools': ^7.7.6
-  pinia: ^2.1.7
-  'vue-i18n': ^9.14.3
-  'vue-router': ^4.4.3
-  vuefire: ^3.2.1
-
-  # PrimeVue UI framework
  '@primeuix/forms': 0.0.2
  '@primeuix/styled': 0.3.2
  '@primeuix/utils': ^0.3.2
@@ -64,58 +23,87 @@ catalog:
  '@primevue/forms': ^4.2.5
  '@primevue/icons': 4.2.5
  '@primevue/themes': ^4.2.5
-  primeicons: ^7.0.0
-  primevue: ^4.2.5
-
-  # Tailwind CSS and design
-  '@iconify/json': ^2.2.380
-  '@iconify-json/lucide': ^1.1.178
-  '@iconify/tailwind': ^1.1.3
-  '@tailwindcss/vite': ^4.1.12
-  tailwindcss: ^4.1.12
-  'tailwindcss-primeui': ^0.6.1
-  'tw-animate-css': ^1.3.8
-  'unplugin-icons': ^0.22.0
-  'unplugin-vue-components': ^0.28.0
-
-  # Storybook
+  '@sentry/vue': ^8.48.0
  '@storybook/addon-docs': ^9.1.1
-  storybook: ^9.1.6
  '@storybook/vue3': ^9.1.1
  '@storybook/vue3-vite': ^9.1.1
-
-  # Data and validation
-  algoliasearch: ^5.21.0
-  axios: ^1.11.0
-  firebase: ^11.6.0
-  yjs: ^13.6.27
-  zod: ^3.23.8
-  'zod-validation-error': ^3.3.0
-
-  # Dev tools
-  dotenv: ^16.4.5
-  husky: ^9.0.11
-  jiti: 2.4.2
-  knip: ^5.62.0
-  'lint-staged': ^15.2.7
-
-  # Type definitions
+  '@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
  '@types/semver': ^7.7.0
  '@types/three': ^0.169.0
-  'vue-component-type-helpers': ^3.0.7
-  'zod-to-json-schema': ^3.24.1
+  '@vitejs/plugin-vue': ^5.1.4
+  '@vitest/coverage-v8': ^3.2.4
+  '@vitest/ui': ^3.0.0
+  '@vue/test-utils': ^2.4.6
+  '@vueuse/core': ^11.0.0
+  '@vueuse/integrations': ^13.9.0
+  algoliasearch: ^5.21.0
+  axios: ^1.8.2
+  cross-env: ^10.1.0
+  dotenv: ^16.4.5
+  eslint: ^9.34.0
+  eslint-config-prettier: ^10.1.8
+  eslint-import-resolver-typescript: ^4.4.4
+  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
+  globals: ^15.9.0
+  happy-dom: ^15.11.0
+  husky: ^9.0.11
+  jiti: 2.4.2
+  jsdom: ^26.1.0
+  knip: ^5.62.0
+  lint-staged: ^15.2.7
+  nx: 21.4.1
+  pinia: ^2.1.7
+  postcss-html: ^1.8.0
+  prettier: ^3.3.2
+  primeicons: ^7.0.0
+  primevue: ^4.2.5
+  storybook: ^9.1.6
+  stylelint: ^16.24.0
+  tailwindcss: ^4.1.12
+  tailwindcss-primeui: ^0.6.1
+  tsx: ^4.15.6
+  tw-animate-css: ^1.3.8
+  typescript: ^5.9.2
+  typescript-eslint: ^8.44.0
+  unplugin-icons: ^0.22.0
+  unplugin-vue-components: ^0.28.0
+  vite: ^5.4.19
+  vite-plugin-dts: ^4.5.4
+  vite-plugin-html: ^3.2.2
+  vite-plugin-vue-devtools: ^7.7.6
+  vitest: ^3.2.4
+  vue: ^3.5.13
+  vue-component-type-helpers: ^3.0.7
+  vue-eslint-parser: ^10.2.0
+  vue-i18n: ^9.14.3
+  vue-router: ^4.4.3
+  vue-tsc: ^3.0.7
+  vuefire: ^3.2.1
+  yjs: ^13.6.27
+  zod: ^3.23.8
+  zod-to-json-schema: ^3.24.1
+  zod-validation-error: ^3.3.0

-  # i18n
-  '@alloc/quick-lru': ^5.2.0
-  '@lobehub/i18n-cli': ^1.25.1
-  '@trivago/prettier-plugin-sort-imports': ^5.2.0
+cleanupUnusedCatalogs: true
+
+overrides:
+  '@types/eslint': '-'

 ignoredBuiltDependencies:
  - '@firebase/util'
  - protobufjs
+  - unrs-resolver
  - vue-demi

 onlyBuiltDependencies:
--- a/src/App.vue
+++ b/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" />
--- a/src/components/actionbar/ComfyActionbar.vue
+++ b/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>
--- a/src/components/actionbar/ComfyQueueButton.vue
+++ b/src/components/actionbar/ComfyQueueButton.vue
@@ -16,10 +16,16 @@
      @click="queuePrompt"
    >
      <template #icon>
-        <i-lucide:list-start v-if="workspaceStore.shiftDown" />
-        <i-lucide:play v-else-if="queueMode === 'disabled'" />
-        <i-lucide:fast-forward v-else-if="queueMode === 'instant'" />
-        <i-lucide:step-forward v-else-if="queueMode === 'change'" />
+        <i v-if="workspaceStore.shiftDown" class="icon-[lucide--list-start]" />
+        <i v-else-if="queueMode === 'disabled'" class="icon-[lucide--play]" />
+        <i
+          v-else-if="queueMode === 'instant'"
+          class="icon-[lucide--fast-forward]"
+        />
+        <i
+          v-else-if="queueMode === 'change'"
+          class="icon-[lucide--step-forward]"
+        />
      </template>
      <template #item="{ item }">
        <Button
--- a/src/components/bottomPanel/BottomPanel.vue
+++ b/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 &&
--- a/src/components/bottomPanel/tabs/shortcuts/EssentialsPanel.vue
+++ b/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"
--- a/src/components/bottomPanel/tabs/shortcuts/ShortcutsList.vue
+++ b/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>
--- a/src/components/bottomPanel/tabs/shortcuts/ViewControlsPanel.vue
+++ b/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"
--- a/src/components/bottomPanel/tabs/terminal/BaseTerminal.vue
+++ b/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="{
--- a/src/components/bottomPanel/tabs/terminal/LogsTerminal.vue
+++ b/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>
--- a/src/components/breadcrumb/SubgraphBreadcrumbItem.vue
+++ b/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)"
--- a/src/components/button/IconGroup.vue
+++ b/src/components/button/IconGroup.vue
@@ -12,6 +12,7 @@ const iconGroupClasses = cn(
  'outline-hidden border-none p-0 rounded-lg',
  'bg-white dark-theme:bg-zinc-700',
  'text-neutral-950 dark-theme:text-white',
+  'transition-all duration-200',
  'cursor-pointer'
 )
 </script>
--- a/src/components/button/MoreButton.vue
+++ b/src/components/button/MoreButton.vue
@@ -1,7 +1,8 @@
 <template>
  <div class="relative inline-flex items-center">
-    <IconButton @click="toggle">
-      <i-lucide:more-vertical class="text-sm" />
+    <IconButton :size="size" :type="type" @click="toggle">
+      <i v-if="!isVertical" class="icon-[lucide--ellipsis] text-sm" />
+      <i v-else class="icon-[lucide--more-vertical] text-sm" />
    </IconButton>

    <Popover
@@ -13,8 +14,10 @@
      :close-on-escape="true"
      unstyled
      :pt="pt"
+      @show="$emit('menuOpened')"
+      @hide="$emit('menuClosed')"
    >
-      <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>
@@ -25,12 +28,28 @@
 import Popover from 'primevue/popover'
 import { computed, ref } from 'vue'

+import type { BaseButtonProps } from '@/types/buttonTypes'
 import { cn } from '@/utils/tailwindUtil'

 import IconButton from './IconButton.vue'

+interface MoreButtonProps extends BaseButtonProps {
+  isVertical?: boolean
+}
+
 const popover = ref<InstanceType<typeof Popover>>()

+const {
+  size = 'md',
+  type = 'secondary',
+  isVertical = false
+} = defineProps<MoreButtonProps>()
+
+defineEmits<{
+  menuOpened: []
+  menuClosed: []
+}>()
+
 const toggle = (event: Event) => {
  popover.value?.toggle(event)
 }
@@ -45,7 +64,7 @@ const pt = computed(() => ({
  },
  content: {
    class: cn(
-      'mt-2 rounded-lg',
+      'mt-1 rounded-lg',
      'bg-white dark-theme:bg-zinc-800',
      'text-neutral dark-theme:text-white',
      'shadow-lg',
--- a/src/components/card/Card.stories.ts
+++ b/src/components/card/Card.stories.ts
@@ -11,7 +11,15 @@ import CardTop from './CardTop.vue'

 interface CardStoryArgs {
  // CardContainer props
-  containerRatio: 'square' | 'portrait' | 'tallPortrait'
+  containerSize: 'mini' | 'compact' | 'regular' | 'portrait' | 'tall'
+  variant: 'default' | 'ghost' | 'outline'
+  rounded: 'none' | 'sm' | 'lg' | 'xl'
+  customAspectRatio?: string
+  hasBorder: boolean
+  hasBackground: boolean
+  hasShadow: boolean
+  hasCursor: boolean
+  customClass: string
  maxWidth: number
  minWidth: number

@@ -44,10 +52,44 @@ interface CardStoryArgs {
 const meta: Meta<CardStoryArgs> = {
  title: 'Components/Card/Card',
  argTypes: {
-    containerRatio: {
+    containerSize: {
      control: 'select',
-      options: ['square', 'portrait', 'tallPortrait'],
-      description: 'Card container aspect ratio'
+      options: ['mini', 'compact', 'regular', 'portrait', 'tall'],
+      description: 'Card container size preset'
+    },
+    variant: {
+      control: 'select',
+      options: ['default', 'ghost', 'outline'],
+      description: 'Card visual variant'
+    },
+    rounded: {
+      control: 'select',
+      options: ['none', 'sm', 'lg', 'xl'],
+      description: 'Border radius size'
+    },
+    customAspectRatio: {
+      control: 'text',
+      description: 'Custom aspect ratio (e.g., "16/9")'
+    },
+    hasBorder: {
+      control: 'boolean',
+      description: 'Add border styling'
+    },
+    hasBackground: {
+      control: 'boolean',
+      description: 'Add background styling'
+    },
+    hasShadow: {
+      control: 'boolean',
+      description: 'Add shadow styling'
+    },
+    hasCursor: {
+      control: 'boolean',
+      description: 'Add cursor pointer'
+    },
+    customClass: {
+      control: 'text',
+      description: 'Additional custom CSS classes'
    },
    topRatio: {
      control: 'select',
@@ -149,8 +191,15 @@ const createCardTemplate = (args: CardStoryArgs) => ({
  template: `
    <div class="min-h-screen">
      <CardContainer 
-        :ratio="args.containerRatio" 
-        class="max-w-[320px] mx-auto"
+        :size="args.containerSize"
+        :variant="args.variant"
+        :rounded="args.rounded"
+        :custom-aspect-ratio="args.customAspectRatio"
+        :has-border="args.hasBorder"
+        :has-background="args.hasBackground"
+        :has-shadow="args.hasShadow"
+        :has-cursor="args.hasCursor"
+        :class="args.customClass || 'max-w-[320px] mx-auto'"
      >
        <template #top>
          <CardTop :ratio="args.topRatio">
@@ -205,7 +254,7 @@ const createCardTemplate = (args: CardStoryArgs) => ({
        </template>
        
        <template #bottom>
-          <CardBottom class="p-3 bg-neutral-100">
+          <CardBottom>
            <CardTitle v-if="args.showTitle">{{ args.title }}</CardTitle>
            <CardDescription v-if="args.showDescription">{{ args.description }}</CardDescription>
          </CardBottom>
@@ -218,7 +267,15 @@ const createCardTemplate = (args: CardStoryArgs) => ({
 export const Default: Story = {
  render: (args: CardStoryArgs) => createCardTemplate(args),
  args: {
-    containerRatio: 'portrait',
+    containerSize: 'portrait',
+    variant: 'default',
+    rounded: 'lg',
+    customAspectRatio: '',
+    hasBorder: true,
+    hasBackground: true,
+    hasShadow: true,
+    hasCursor: true,
+    customClass: '',
    topRatio: 'square',
    showTopLeft: false,
    showTopRight: true,
@@ -243,7 +300,15 @@ export const Default: Story = {
 export const SquareCard: Story = {
  render: (args: CardStoryArgs) => createCardTemplate(args),
  args: {
-    containerRatio: 'square',
+    containerSize: 'regular',
+    variant: 'default',
+    rounded: 'lg',
+    customAspectRatio: '',
+    hasBorder: true,
+    hasBackground: true,
+    hasShadow: true,
+    hasCursor: true,
+    customClass: '',
    topRatio: 'landscape',
    showTopLeft: false,
    showTopRight: true,
@@ -268,7 +333,15 @@ export const SquareCard: Story = {
 export const TallPortraitCard: Story = {
  render: (args: CardStoryArgs) => createCardTemplate(args),
  args: {
-    containerRatio: 'tallPortrait',
+    containerSize: 'tall',
+    variant: 'default',
+    rounded: 'lg',
+    customAspectRatio: '',
+    hasBorder: true,
+    hasBackground: true,
+    hasShadow: true,
+    hasCursor: true,
+    customClass: '',
    topRatio: 'square',
    showTopLeft: true,
    showTopRight: true,
@@ -293,7 +366,15 @@ export const TallPortraitCard: Story = {
 export const ImageCard: Story = {
  render: (args: CardStoryArgs) => createCardTemplate(args),
  args: {
-    containerRatio: 'portrait',
+    containerSize: 'portrait',
+    variant: 'default',
+    rounded: 'lg',
+    customAspectRatio: '',
+    hasBorder: true,
+    hasBackground: true,
+    hasShadow: true,
+    hasCursor: true,
+    customClass: '',
    topRatio: 'square',
    showTopLeft: false,
    showTopRight: true,
@@ -314,10 +395,50 @@ export const ImageCard: Story = {
  }
 }

+export const MiniCard: Story = {
+  render: (args: CardStoryArgs) => createCardTemplate(args),
+  args: {
+    containerSize: 'mini',
+    variant: 'default',
+    rounded: 'lg',
+    customAspectRatio: '',
+    hasBorder: true,
+    hasBackground: true,
+    hasShadow: true,
+    hasCursor: true,
+    customClass: '',
+    topRatio: 'square',
+    showTopLeft: false,
+    showTopRight: false,
+    showBottomLeft: false,
+    showBottomRight: true,
+    showTitle: true,
+    showDescription: false,
+    title: 'Mini Asset',
+    description: '',
+    backgroundColor: '#06b6d4',
+    showImage: false,
+    imageUrl: '',
+    tags: ['Asset'],
+    showFileSize: true,
+    fileSize: '124 KB',
+    showFileType: false,
+    fileType: ''
+  }
+}
+
 export const MinimalCard: Story = {
  render: (args: CardStoryArgs) => createCardTemplate(args),
  args: {
-    containerRatio: 'square',
+    containerSize: 'regular',
+    variant: 'default',
+    rounded: 'lg',
+    customAspectRatio: '',
+    hasBorder: true,
+    hasBackground: true,
+    hasShadow: true,
+    hasCursor: true,
+    customClass: '',
    topRatio: 'landscape',
    showTopLeft: false,
    showTopRight: false,
@@ -338,10 +459,209 @@ export const MinimalCard: Story = {
  }
 }

+export const GhostVariant: Story = {
+  render: (args: CardStoryArgs) => createCardTemplate(args),
+  args: {
+    containerSize: 'compact',
+    variant: 'ghost',
+    rounded: 'lg',
+    customAspectRatio: '',
+    hasBorder: true,
+    hasBackground: true,
+    hasShadow: true,
+    hasCursor: true,
+    customClass: '',
+    topRatio: 'square',
+    showTopLeft: false,
+    showTopRight: false,
+    showBottomLeft: false,
+    showBottomRight: true,
+    showTitle: true,
+    showDescription: true,
+    title: 'Workflow Template',
+    description: 'Ghost variant for workflow templates',
+    backgroundColor: '#10b981',
+    showImage: false,
+    imageUrl: '',
+    tags: ['Template'],
+    showFileSize: false,
+    fileSize: '',
+    showFileType: false,
+    fileType: ''
+  }
+}
+
+export const OutlineVariant: Story = {
+  render: (args: CardStoryArgs) => createCardTemplate(args),
+  args: {
+    containerSize: 'regular',
+    variant: 'outline',
+    rounded: 'lg',
+    customAspectRatio: '',
+    hasBorder: true,
+    hasBackground: true,
+    hasShadow: true,
+    hasCursor: true,
+    customClass: '',
+    topRatio: 'landscape',
+    showTopLeft: false,
+    showTopRight: true,
+    showBottomLeft: false,
+    showBottomRight: false,
+    showTitle: true,
+    showDescription: true,
+    title: 'Outline Card',
+    description: 'Card with outline variant styling',
+    backgroundColor: '#f59e0b',
+    showImage: false,
+    imageUrl: '',
+    tags: [],
+    showFileSize: false,
+    fileSize: '',
+    showFileType: false,
+    fileType: ''
+  }
+}
+
+export const CustomAspectRatio: Story = {
+  render: (args: CardStoryArgs) => createCardTemplate(args),
+  args: {
+    containerSize: 'regular',
+    variant: 'default',
+    customAspectRatio: '16/9',
+    hasBorder: true,
+    hasBackground: true,
+    hasShadow: true,
+    hasCursor: true,
+    customClass: '',
+    topRatio: 'landscape',
+    showTopLeft: false,
+    showTopRight: false,
+    showBottomLeft: false,
+    showBottomRight: true,
+    showTitle: true,
+    showDescription: false,
+    title: 'Wide Format Card',
+    description: '',
+    backgroundColor: '#8b5cf6',
+    showImage: false,
+    imageUrl: '',
+    tags: ['Wide'],
+    showFileSize: false,
+    fileSize: '',
+    showFileType: false,
+    fileType: ''
+  }
+}
+
+export const RoundedNone: Story = {
+  render: (args: CardStoryArgs) => createCardTemplate(args),
+  args: {
+    containerSize: 'regular',
+    variant: 'default',
+    rounded: 'none',
+    customAspectRatio: '',
+    hasBorder: true,
+    hasBackground: true,
+    hasShadow: true,
+    hasCursor: true,
+    customClass: '',
+    topRatio: 'square',
+    showTopLeft: false,
+    showTopRight: false,
+    showBottomLeft: false,
+    showBottomRight: false,
+    showTitle: true,
+    showDescription: true,
+    title: 'Sharp Corners',
+    description: 'Card with no border radius',
+    backgroundColor: '#dc2626',
+    showImage: false,
+    imageUrl: '',
+    tags: [],
+    showFileSize: false,
+    fileSize: '',
+    showFileType: false,
+    fileType: ''
+  }
+}
+
+export const RoundedXL: Story = {
+  render: (args: CardStoryArgs) => createCardTemplate(args),
+  args: {
+    containerSize: 'regular',
+    variant: 'default',
+    rounded: 'xl',
+    customAspectRatio: '',
+    hasBorder: true,
+    hasBackground: true,
+    hasShadow: true,
+    hasCursor: true,
+    customClass: '',
+    topRatio: 'square',
+    showTopLeft: false,
+    showTopRight: false,
+    showBottomLeft: false,
+    showBottomRight: false,
+    showTitle: true,
+    showDescription: true,
+    title: 'Extra Rounded',
+    description: 'Card with extra large border radius',
+    backgroundColor: '#059669',
+    showImage: false,
+    imageUrl: '',
+    tags: [],
+    showFileSize: false,
+    fileSize: '',
+    showFileType: false,
+    fileType: ''
+  }
+}
+
+export const NoStylesCard: Story = {
+  render: (args: CardStoryArgs) => createCardTemplate(args),
+  args: {
+    containerSize: 'regular',
+    variant: 'default',
+    rounded: 'lg',
+    customAspectRatio: '',
+    hasBorder: false,
+    hasBackground: false,
+    hasShadow: false,
+    hasCursor: true,
+    customClass: 'bg-gradient-to-br from-blue-500 to-purple-600',
+    topRatio: 'square',
+    showTopLeft: false,
+    showTopRight: false,
+    showBottomLeft: false,
+    showBottomRight: false,
+    showTitle: true,
+    showDescription: true,
+    title: 'Custom Styled Card',
+    description: 'Card with all default styles removed and custom gradient',
+    backgroundColor: 'transparent',
+    showImage: false,
+    imageUrl: '',
+    tags: [],
+    showFileSize: false,
+    fileSize: '',
+    showFileType: false,
+    fileType: ''
+  }
+}
+
 export const FullFeaturedCard: Story = {
  render: (args: CardStoryArgs) => createCardTemplate(args),
  args: {
-    containerRatio: 'tallPortrait',
+    containerSize: 'tall',
+    variant: 'default',
+    rounded: 'lg',
+    customAspectRatio: '',
+    hasBorder: true,
+    hasBackground: true,
+    hasShadow: true,
+    hasCursor: true,
+    customClass: '',
    topRatio: 'square',
    showTopLeft: true,
    showTopRight: true,
--- a/src/components/card/CardContainer.vue
+++ b/src/components/card/CardContainer.vue
@@ -8,26 +8,78 @@
 <script setup lang="ts">
 import { computed } from 'vue'

-const { ratio = 'square', type } = defineProps<{
-  ratio?: 'smallSquare' | 'square' | 'portrait' | 'tallPortrait'
-  type?: string
+import { cn } from '@/utils/tailwindUtil'
+
+const {
+  size = 'regular',
+  variant = 'default',
+  rounded = 'md',
+  customAspectRatio,
+  hasBorder = true,
+  hasBackground = true,
+  hasShadow = true,
+  hasCursor = true,
+  class: customClass = ''
+} = defineProps<{
+  size?: 'mini' | 'compact' | 'regular' | 'portrait' | 'tall'
+  variant?: 'default' | 'ghost' | 'outline'
+  rounded?: 'none' | 'md' | 'lg' | 'xl'
+  customAspectRatio?: string
+  hasBorder?: boolean
+  hasBackground?: boolean
+  hasShadow?: boolean
+  hasCursor?: boolean
+  class?: string
 }>()

+// Base structure classes
+const structureClasses = 'flex flex-col overflow-hidden'
+
+// Rounded corners
+const roundedClasses = {
+  none: 'rounded-none',
+  md: 'rounded',
+  lg: 'rounded-lg',
+  xl: 'rounded-xl'
+} as const
+
 const containerClasses = computed(() => {
-  const baseClasses =
-    'cursor-pointer flex flex-col bg-white dark-theme:bg-zinc-800 rounded-lg shadow-sm border border-zinc-200 dark-theme:border-zinc-700 overflow-hidden'
-
-  if (type === 'workflow-template-card') {
-    return `cursor-pointer p-2 flex flex-col hover:bg-white dark-theme:hover:bg-zinc-800 rounded-lg transition-background duration-200 ease-in-out`
+  // Variant styles
+  const variantClasses = {
+    default: cn(
+      hasBackground && 'bg-white dark-theme:bg-zinc-800',
+      hasBorder && 'border border-zinc-200 dark-theme:border-zinc-700',
+      hasShadow && 'shadow-sm',
+      hasCursor && 'cursor-pointer'
+    ),
+    ghost: cn(
+      hasCursor && 'cursor-pointer',
+      'p-2 transition-colors duration-200'
+    ),
+    outline: cn(
+      hasBorder && 'border-2 border-zinc-300 dark-theme:border-zinc-600',
+      hasCursor && 'cursor-pointer',
+      'hover:border-zinc-400 dark-theme:hover:border-zinc-500 transition-colors'
+    )
  }

-  const ratioClasses = {
-    smallSquare: 'aspect-240/311',
-    square: 'aspect-256/308',
-    portrait: 'aspect-256/325',
-    tallPortrait: 'aspect-256/353'
-  }
+  // Size/aspect ratio
+  const aspectRatio = customAspectRatio
+    ? `aspect-[${customAspectRatio}]`
+    : {
+        mini: 'aspect-100/120',
+        compact: 'aspect-240/311',
+        regular: 'aspect-256/308',
+        portrait: 'aspect-256/325',
+        tall: 'aspect-256/353'
+      }[size]

-  return `${baseClasses} ${ratioClasses[ratio]}`
+  return cn(
+    structureClasses,
+    roundedClasses[rounded],
+    variantClasses[variant],
+    aspectRatio,
+    customClass
+  )
 })
 </script>
--- a/src/components/card/CardDescription.vue
+++ b/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>
--- a/src/components/card/CardTop.vue
+++ b/src/components/card/CardTop.vue
@@ -1,32 +1,28 @@
 <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"
-    >
+    <div v-if="slots['top-left']" :class="slotClasses['top-left']">
      <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"
-    >
+    <div v-if="slots['top-right']" :class="slotClasses['top-right']">
      <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"
-    >
+    <div v-if="slots['center-left']" :class="slotClasses['center-left']">
+      <slot name="center-left"></slot>
+    </div>
+
+    <div v-if="slots['center-right']" :class="slotClasses['center-right']">
+      <slot name="center-right"></slot>
+    </div>
+
+    <div v-if="slots['bottom-left']" :class="slotClasses['bottom-left']">
      <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"
-    >
+    <div v-if="slots['bottom-right']" :class="slotClasses['bottom-right']">
      <slot name="bottom-right"></slot>
    </div>
  </div>
@@ -35,10 +31,26 @@
 <script setup lang="ts">
 import { computed, useSlots } from 'vue'

+import { cn } from '@/utils/tailwindUtil'
+
 const slots = useSlots()

-const { ratio = 'square' } = defineProps<{
+const {
+  ratio = 'square',
+  topLeftClass,
+  topRightClass,
+  centerLeftClass,
+  centerRightClass,
+  bottomLeftClass,
+  bottomRightClass
+} = defineProps<{
  ratio?: 'square' | 'landscape'
+  topLeftClass?: string
+  topRightClass?: string
+  centerLeftClass?: string
+  centerRightClass?: string
+  bottomLeftClass?: string
+  bottomRightClass?: string
 }>()

 const topStyle = computed(() => {
@@ -51,4 +63,26 @@ const topStyle = computed(() => {

  return `${baseClasses} ${ratioClasses[ratio]}`
 })
+
+// Get default classes for each slot position
+const defaultSlotClasses = {
+  'top-left': 'absolute top-2 left-2 flex flex-wrap justify-start gap-2',
+  'top-right': 'absolute top-2 right-2 flex flex-wrap justify-end gap-2',
+  'center-left':
+    'absolute top-1/2 left-2 flex -translate-y-1/2 flex-wrap justify-start gap-2',
+  'center-right':
+    'absolute top-1/2 right-2 flex -translate-y-1/2 flex-wrap justify-end gap-2',
+  'bottom-left': 'absolute bottom-2 left-2 flex flex-wrap justify-start gap-2',
+  'bottom-right': 'absolute right-2 bottom-2 flex flex-wrap justify-end gap-2'
+}
+
+// Compute all slot classes once and cache them
+const slotClasses = computed(() => ({
+  'top-left': cn(defaultSlotClasses['top-left'], topLeftClass),
+  'top-right': cn(defaultSlotClasses['top-right'], topRightClass),
+  'center-left': cn(defaultSlotClasses['center-left'], centerLeftClass),
+  'center-right': cn(defaultSlotClasses['center-right'], centerRightClass),
+  'bottom-left': cn(defaultSlotClasses['bottom-left'], bottomLeftClass),
+  'bottom-right': cn(defaultSlotClasses['bottom-right'], bottomRightClass)
+}))
 </script>
--- a/src/components/chip/SquareChip.vue
+++ b/src/components/chip/SquareChip.vue
@@ -1,13 +1,28 @@
 <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"
-  >
-    <slot name="icon" class="text-xs text-white/90"></slot>
+  <div :class="chipClasses">
+    <slot name="icon"></slot>
    <span>{{ label }}</span>
  </div>
 </template>
 <script setup lang="ts">
-const { label } = defineProps<{
+import { computed } from 'vue'
+
+import { cn } from '@/utils/tailwindUtil'
+
+const { label, variant = 'dark' } = defineProps<{
  label: string
+  variant?: 'dark' | 'light'
 }>()
+
+const baseClasses =
+  'inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold'
+
+const variantStyles = {
+  dark: 'bg-zinc-500/40 text-white/90',
+  light: 'backdrop-blur-[2px] bg-white/50 text-zinc-900 dark-theme:text-white'
+}
+
+const chipClasses = computed(() => {
+  return cn(baseClasses, variantStyles[variant])
+})
 </script>
--- a/src/components/common/FileDownload.vue
+++ b/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' }
--- a/src/components/common/FormImageUpload.vue
+++ b/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">
--- a/src/components/common/FormItem.vue
+++ b/src/components/common/FormItem.vue
@@ -34,7 +34,8 @@ import InputNumber from 'primevue/inputnumber'
 import InputText from 'primevue/inputtext'
 import Select from 'primevue/select'
 import ToggleSwitch from 'primevue/toggleswitch'
-import { type Component, markRaw } from 'vue'
+import { markRaw } from 'vue'
+import type { Component } from 'vue'

 import BackgroundImageUpload from '@/components/common/BackgroundImageUpload.vue'
 import CustomFormValue from '@/components/common/CustomFormValue.vue'
--- a/src/components/common/LazyImage.vue
+++ b/src/components/common/LazyImage.vue
@@ -1,7 +1,8 @@
 <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"
+    :class="containerClass"
  >
    <Skeleton
      v-if="!isImageLoaded"
@@ -22,7 +23,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"
@@ -41,17 +42,20 @@ import { computed, onUnmounted, ref, watch } from 'vue'

 import { useIntersectionObserver } from '@/composables/useIntersectionObserver'
 import { useMediaCache } from '@/services/mediaCacheService'
+import type { ClassValue } from '@/utils/tailwindUtil'

 const {
  src,
  alt = '',
+  containerClass = '',
  imageClass = '',
  imageStyle,
  rootMargin = '300px'
 } = defineProps<{
  src: string
  alt?: string
-  imageClass?: string | string[] | Record<string, boolean>
+  containerClass?: ClassValue
+  imageClass?: ClassValue
  imageStyle?: Record<string, any>
  rootMargin?: string
 }>()
--- a/src/components/common/NoResultsPlaceholder.vue
+++ b/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
--- a/src/components/common/SearchBox.vue
+++ b/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"
--- a/src/components/common/SystemStatsPanel.vue
+++ b/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">
--- a/src/components/common/TreeExplorer.vue
+++ b/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"
@@ -47,9 +47,11 @@ import { useTreeFolderOperations } from '@/composables/tree/useTreeFolderOperati
 import { useErrorHandling } from '@/composables/useErrorHandling'
 import {
  InjectKeyExpandedKeys,
-  InjectKeyHandleEditLabelFunction,
-  type RenderedTreeExplorerNode,
-  type TreeExplorerNode
+  InjectKeyHandleEditLabelFunction
+} from '@/types/treeExplorerTypes'
+import type {
+  RenderedTreeExplorerNode,
+  TreeExplorerNode
 } from '@/types/treeExplorerTypes'
 import { combineTrees, findNodeByKey } from '@/utils/treeUtil'

--- a/src/components/common/TreeExplorerTreeNode.vue
+++ b/src/components/common/TreeExplorerTreeNode.vue
@@ -45,10 +45,10 @@ import {
  usePragmaticDraggable,
  usePragmaticDroppable
 } from '@/composables/usePragmaticDragAndDrop'
-import {
-  InjectKeyHandleEditLabelFunction,
-  type RenderedTreeExplorerNode,
-  type TreeExplorerDragAndDropData
+import { InjectKeyHandleEditLabelFunction } from '@/types/treeExplorerTypes'
+import type {
+  RenderedTreeExplorerNode,
+  TreeExplorerDragAndDropData
 } from '@/types/treeExplorerTypes'

 const props = defineProps<{
--- a/src/components/common/UrlInput.vue
+++ b/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)"
--- a/src/components/common/UserCredit.vue
+++ b/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>
--- a/src/components/common/VirtualGrid.vue
+++ b/src/components/common/VirtualGrid.vue
@@ -17,7 +17,8 @@
 <script setup lang="ts" generic="T">
 import { useElementSize, useScroll, whenever } from '@vueuse/core'
 import { clamp, debounce } from 'es-toolkit/compat'
-import { type CSSProperties, computed, onBeforeUnmount, ref, watch } from 'vue'
+import { computed, onBeforeUnmount, ref, watch } from 'vue'
+import type { CSSProperties } from 'vue'

 type GridState = {
  start: number
--- a/src/components/custom/widget/WorkflowTemplateSelectorDialog.vue
+++ b/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>
@@ -29,14 +29,14 @@
          @click="resetFilters"
        >
          <template #icon>
-            <i-lucide:filter-x />
+            <i class="icon-[lucide--filter-x]" />
          </template>
        </IconTextButton>
      </div>
    </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"
@@ -49,7 +49,7 @@
          :show-clear-button="true"
        >
          <template #icon>
-            <i-lucide:cpu />
+            <i class="icon-[lucide--cpu]" />
          </template>
        </MultiSelect>

@@ -63,7 +63,7 @@
          :show-clear-button="true"
        >
          <template #icon>
-            <i-lucide:target />
+            <i class="icon-[lucide--target]" />
          </template>
        </MultiSelect>

@@ -77,7 +77,7 @@
          :show-clear-button="true"
        >
          <template #icon>
-            <i-lucide:file-text />
+            <i class="icon-[lucide--file-text]" />
          </template>
        </MultiSelect>

@@ -87,17 +87,17 @@
            v-model="sortBy"
            :label="$t('templateWorkflows.sorting', 'Sort by')"
            :options="sortOptions"
-            class="min-w-[270px]"
+            class="w-62.5"
          >
            <template #icon>
-              <i-lucide:arrow-up-down />
+              <i class="icon-[lucide--arrow-up-down]" />
            </template>
          </SingleSelect>
        </div>
      </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-lucide:search class="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 -->
@@ -141,14 +141,16 @@
          <CardContainer
            v-for="n in isLoading ? 12 : 0"
            :key="`initial-skeleton-${n}`"
-            ratio="smallSquare"
-            type="workflow-template-card"
+            size="compact"
+            variant="ghost"
+            rounded="lg"
+            class="hover:bg-white dark-theme:hover:bg-zinc-800"
          >
            <template #top>
              <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 +159,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>
@@ -172,9 +174,11 @@
            v-for="template in isLoading ? [] : displayTemplates"
            :key="template.name"
            ref="cardRefs"
-            ratio="smallSquare"
-            type="workflow-template-card"
+            size="compact"
+            variant="ghost"
+            rounded="lg"
            :data-testid="`template-workflow-${template.name}`"
+            class="hover:bg-white dark-theme:hover:bg-zinc-800"
            @mouseenter="hoveredTemplate = template.name"
            @mouseleave="hoveredTemplate = null"
            @click="onLoadWorkflow(template)"
@@ -184,7 +188,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 +252,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 +271,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 +289,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) }}
@@ -316,14 +320,16 @@
          <CardContainer
            v-for="n in isLoadingMore ? 6 : 0"
            :key="`skeleton-${n}`"
-            ratio="smallSquare"
-            type="workflow-template-card"
+            size="compact"
+            variant="ghost"
+            rounded="lg"
+            class="hover:bg-white dark-theme:hover:bg-zinc-800"
          >
            <template #top>
              <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 +338,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 +354,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 +626,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'
  },
  {
--- a/src/components/dialog/content/ApiNodesSignInContent.vue
+++ b/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
--- a/src/components/dialog/content/ConfirmationDialogContent.vue
+++ b/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
        />
--- a/src/components/dialog/content/ErrorDialogContent.vue
+++ b/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"
@@ -65,10 +65,8 @@ import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
 import { useCommandStore } from '@/stores/commandStore'
 import { useSystemStatsStore } from '@/stores/systemStatsStore'
-import {
-  type ErrorReportData,
-  generateErrorReport
-} from '@/utils/errorReportUtil'
+import { generateErrorReport } from '@/utils/errorReportUtil'
+import type { ErrorReportData } from '@/utils/errorReportUtil'

 const { error } = defineProps<{
  error: Omit<ErrorReportData, 'workflow' | 'systemStats' | 'serverLogs'> & {
--- a/src/components/dialog/content/LoadWorkflowWarning.vue
+++ b/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
--- a/Show More
+++ b/Show More
				`@@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3" d="m4 2 9.333 6L4 14V2Z"/></svg>`