feat: add TopbarBadge interface and implement cloud badge in extension

## Summary

Merges latest changes from `main` as of 10-06-2025.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5965-Merge-main-as-of-10-06-2025-into-rh-test-2856d73d3650812cb95fd8917278a770)
by [Unito](https://www.unito.io)

---------

Signed-off-by: Marcel Petrick <mail@marcelpetrick.it>
Co-authored-by: filtered <176114999+webfiltered@users.noreply.github.com>
Co-authored-by: Christian Byrne <cbyrne@comfy.org>
Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: Alexander Brown <drjkl@comfy.org>
Co-authored-by: Benjamin Lu <benceruleanlu@proton.me>
Co-authored-by: Terry Jia <terryjia88@gmail.com>
Co-authored-by: snomiao <snomiao@gmail.com>
Co-authored-by: Simula_r <18093452+simula-r@users.noreply.github.com>
Co-authored-by: Jake Schroeder <jake.schroeder@isophex.com>
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: GitHub Action <action@github.com>
Co-authored-by: Johnpaul Chiwetelu <49923152+Myestery@users.noreply.github.com>
Co-authored-by: Marcel Petrick <mail@marcelpetrick.it>
Co-authored-by: Alexander Brown <DrJKL0424@gmail.com>
Co-authored-by: Benjamin Lu <benjaminlu1107@gmail.com>
Co-authored-by: Alexander Piskun <13381981+bigcat88@users.noreply.github.com>
Co-authored-by: Rizumu Ayaka <rizumu@ayaka.moe>
Co-authored-by: JakeSchroeder <jake@axiom.co>
Co-authored-by: AustinMroz <austin@comfy.org>
Co-authored-by: DrJKL <DrJKL@users.noreply.github.com>
Co-authored-by: ComfyUI Wiki <contact@comfyui-wiki.com>

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

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

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

@@ -1,16 +1,31 @@
-name: Setup ComfyUI Frontend
-description: 'Install nodejs/pnpm/dependencies and optionally build ComfyUI_frontend'
+name: Setup Frontend
+description: 'Setup ComfyUI frontend development environment'
 inputs:
-  include_build_step:
-    description: 'Include the build step to build the frontend. Set to true for workflows that need a built frontend'
+  extra_server_params:
+    description: 'Additional parameters to pass to ComfyUI server'
     required: false
-    default: 'false'
+    default: ''
 runs:
   using: 'composite'
   steps:
-    # Note: this workflow assume frontend repo is checked out in the root of the workspace
+    - 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/
 
-    # Install pnpm, Node.js, build frontend
     - name: Install pnpm
       uses: pnpm/action-setup@v4
       with:
@@ -21,25 +36,32 @@ runs:
       with:
         node-version: 'lts/*'
         cache: 'pnpm'
-        cache-dependency-path: './pnpm-lock.yaml'
+        cache-dependency-path: 'ComfyUI_frontend/pnpm-lock.yaml'
 
-    # Restore tool caches before running any build/lint operations
-    - name: Restore tool output cache
-      uses: actions/cache/restore@v4
+    - name: Setup Python
+      uses: actions/setup-python@v4
       with:
-        path: |
-          ./.cache
-          ./tsconfig.tsbuildinfo
-        key: tool-cache-${{ runner.os }}-${{ hashFiles('./pnpm-lock.yaml') }}-${{ hashFiles('./src/**/*.{ts,vue,js,mts}', './*.config.*') }}
-        restore-keys: |
-          tool-cache-${{ runner.os }}-${{ hashFiles('./pnpm-lock.yaml') }}-
-          tool-cache-${{ runner.os }}-
+        python-version: '3.10'
 
-    - name: Install dependencies
+    - name: Install Python requirements
       shell: bash
-      run: pnpm install --frozen-lockfile
+      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: Build ComfyUI_frontend
-      if: ${{ inputs.include_build_step == 'true' }}
+    - name: Build & Install ComfyUI_frontend
       shell: bash
-      run: pnpm build
+      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

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

@@ -6,6 +6,7 @@ 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
@@ -21,8 +22,10 @@ runs:
       if: steps.cache-playwright-browsers.outputs.cache-hit != 'true'
       shell: bash
       run: pnpm exec playwright install chromium --with-deps
+      working-directory: ComfyUI_frontend
 
     - name: Install Playwright Browsers (operating system dependencies)
       if: steps.cache-playwright-browsers.outputs.cache-hit == 'true'
       shell: bash
       run: pnpm exec playwright install-deps
+      working-directory: ComfyUI_frontend

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

@@ -11,10 +11,6 @@ on:
   pull_request:
     types: [labeled]
 
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
-  cancel-in-progress: true
-
 jobs:
   wait-for-ci:
     runs-on: ubuntu-latest
@@ -77,10 +73,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'"
@@ -90,9 +86,3 @@ jobs:
           COMMIT_SHA: ${{ github.event.pull_request.head.sha }}
           BASE_SHA: ${{ github.event.pull_request.base.sha }}
           REPOSITORY: ${{ github.repository }}
-
-      - name: Remove claude-review label
-        if: always()
-        run: gh pr edit ${{ github.event.pull_request.number }} --remove-label "claude-review"
-        env:
-          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

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

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

.github/workflows/pr-storybook-deploy.yaml

@@ -0,0 +1,90 @@
+name: PR Storybook Deploy (Forks)
+
+on:
+  workflow_run:
+    workflows: ['Storybook and Chromatic CI']
+    types: [requested, completed]
+
+env:
+  DATE_FORMAT: '+%m/%d/%Y, %I:%M:%S %p'
+
+jobs:
+  deploy-and-comment-forked-pr:
+    runs-on: ubuntu-latest
+    if: |
+      github.repository == 'Comfy-Org/ComfyUI_frontend' && 
+      github.event.workflow_run.event == 'pull_request' &&
+      github.event.workflow_run.head_repository != null &&
+      github.event.workflow_run.repository != null &&
+      github.event.workflow_run.head_repository.full_name != github.event.workflow_run.repository.full_name
+    permissions:
+      pull-requests: write
+      actions: read
+    steps:
+      - name: Log workflow trigger info
+        run: |
+          echo "Repository: ${{ github.repository }}"
+          echo "Event: ${{ github.event.workflow_run.event }}"
+          echo "Head repo: ${{ github.event.workflow_run.head_repository.full_name || 'null' }}"
+          echo "Base repo: ${{ github.event.workflow_run.repository.full_name || 'null' }}"
+          echo "Is forked: ${{ github.event.workflow_run.head_repository.full_name != github.event.workflow_run.repository.full_name }}"
+
+      - name: Checkout repository
+        uses: actions/checkout@v5
+
+      - name: Get PR Number
+        id: pr
+        uses: actions/github-script@v7
+        with:
+          script: |
+            const { data: prs } = await github.rest.pulls.list({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              state: 'open',
+            });
+            
+            const pr = prs.find(p => p.head.sha === context.payload.workflow_run.head_sha);
+            
+            if (!pr) {
+              console.log('No PR found for SHA:', context.payload.workflow_run.head_sha);
+              return null;
+            }
+            
+            console.log(`Found PR #${pr.number} from fork: ${context.payload.workflow_run.head_repository.full_name}`);
+            return pr.number;
+
+      - name: Handle Storybook Start
+        if: steps.pr.outputs.result != 'null' && github.event.action == 'requested'
+        env:
+          GITHUB_TOKEN: ${{ github.token }}
+        run: |
+          chmod +x scripts/cicd/pr-storybook-deploy-and-comment.sh
+          ./scripts/cicd/pr-storybook-deploy-and-comment.sh \
+            "${{ steps.pr.outputs.result }}" \
+            "${{ github.event.workflow_run.head_branch }}" \
+            "starting" \
+            "$(date -u '${{ env.DATE_FORMAT }}')"
+
+      - name: Download and Deploy Storybook
+        if: steps.pr.outputs.result != 'null' && github.event.action == 'completed' && github.event.workflow_run.conclusion == 'success'
+        uses: actions/download-artifact@v4
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          run-id: ${{ github.event.workflow_run.id }}
+          name: storybook-static
+          path: storybook-static
+          
+      - name: Handle Storybook Completion
+        if: steps.pr.outputs.result != 'null' && github.event.action == 'completed'
+        env:
+          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          GITHUB_TOKEN: ${{ github.token }}
+          WORKFLOW_CONCLUSION: ${{ github.event.workflow_run.conclusion }}
+          WORKFLOW_URL: ${{ github.event.workflow_run.html_url }}
+        run: |
+          chmod +x scripts/cicd/pr-storybook-deploy-and-comment.sh
+          ./scripts/cicd/pr-storybook-deploy-and-comment.sh \
+            "${{ steps.pr.outputs.result }}" \
+            "${{ github.event.workflow_run.head_branch }}" \
+            "completed"

.github/workflows/tests-ci.yaml

@@ -7,37 +7,70 @@ 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 repository
+      - name: Checkout ComfyUI
         uses: actions/checkout@v5
-
-      # Setup Test Environment, build frontend but do not start server yet
-      - name: Setup ComfyUI server
-        uses: ./.github/actions/setup-comfyui-server
-      - name: Setup frontend
-        uses: ./.github/actions/setup-frontend
         with:
-          include_build_step: true
-      - name: Setup Playwright
-        uses: ./.github/actions/setup-playwright # Setup Playwright and cache browsers
+          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
 
-      # 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: .
+          path: |
+            ComfyUI
+            ComfyUI_frontend
           key: comfyui-setup-${{ steps.cache-key.outputs.key }}
 
   # Sharded chromium tests
@@ -52,35 +85,54 @@ 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@5a3ec84eff668545956fd18022155c47e93e2684
+        uses: actions/cache/restore@v4
         with:
           fail-on-cache-miss: true
-          path: .
+          path: |
+            ComfyUI
+            ComfyUI_frontend
           key: comfyui-setup-${{ needs.setup.outputs.cache-key }}
 
-      # 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
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
         with:
-          launch_server: true
-      - name: Setup nodejs, pnpm, reuse built frontend
-        uses: ./.github/actions/setup-frontend
-      - name: Setup Playwright
-        uses: ./.github/actions/setup-playwright
+          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
+
+
+      - 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
 
-      # 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
 
-      - name: Upload blob report
-        uses: actions/upload-artifact@v4
+      - uses: actions/upload-artifact@v4
         if: ${{ !cancelled() }}
         with:
           name: blob-report-chromium-${{ matrix.shardIndex }}
@@ -99,27 +151,45 @@ 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@5a3ec84eff668545956fd18022155c47e93e2684
+        uses: actions/cache/restore@v4
         with:
           fail-on-cache-miss: true
-          path: .
+          path: |
+            ComfyUI
+            ComfyUI_frontend
           key: comfyui-setup-${{ needs.setup.outputs.cache-key }}
 
-      # 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
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
         with:
-          launch_server: true
-      - name: Setup nodejs, pnpm, reuse built frontend
-        uses: ./.github/actions/setup-frontend
-      - name: Setup Playwright
-        uses: ./.github/actions/setup-playwright
+          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
+
+      - 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
 
-      # Run tests and upload reports
       - name: Run Playwright tests (${{ matrix.browser }})
         id: playwright
         run: |
@@ -129,13 +199,13 @@ jobs:
             --reporter=list \
             --reporter=html \
             --reporter=json
+        working-directory: ComfyUI_frontend
 
-      - name: Upload Playwright report
-        uses: actions/upload-artifact@v4
+      - uses: actions/upload-artifact@v4
         if: always()
         with:
           name: playwright-report-${{ matrix.browser }}
-          path: ./playwright-report/
+          path: ComfyUI_frontend/playwright-report/
           retention-days: 30
 
   # Merge sharded test reports
@@ -144,19 +214,32 @@ jobs:
     runs-on: ubuntu-latest
     if: ${{ !cancelled() }}
     steps:
-      - name: Checkout repository
+      - name: Checkout ComfyUI_frontend
         uses: actions/checkout@v5
+        with:
+          repository: 'Comfy-Org/ComfyUI_frontend'
+          path: '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: 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
 
       - name: Download blob reports
         uses: actions/download-artifact@v4
         with:
-          path: ./all-blob-reports
+          path: ComfyUI_frontend/all-blob-reports
           pattern: blob-report-chromium-*
           merge-multiple: true
 
@@ -167,12 +250,13 @@ 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: ./playwright-report/
+          path: ComfyUI_frontend/playwright-report/
           retention-days: 30
 
   #### BEGIN Deployment and commenting (non-forked PRs only)
@@ -188,11 +272,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 }}
@@ -203,7 +287,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]
@@ -215,20 +299,23 @@ 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: |
-          bash ./scripts/cicd/pr-playwright-deploy-and-comment.sh \
+          ./scripts/cicd/pr-playwright-deploy-and-comment.sh \
             "${{ github.event.pull_request.number }}" \
             "${{ github.head_ref }}" \
             "completed"

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

@@ -21,64 +21,90 @@ jobs:
   update-locales:
     runs-on: ubuntu-latest
     steps:
-    - name: Checkout repository
+    - name: Checkout ComfyUI
       uses: actions/checkout@v5
-
-    # Setup playwright environment with custom node repository
-    - name: Setup ComfyUI Server (without launching)
-      uses: ./.github/actions/setup-comfyui-server
-    - name: Setup frontend
-      uses: ./.github/actions/setup-frontend
       with:
-        include_build_step: 'true'
-    - name: Setup Playwright
-      uses: ./.github/actions/setup-playwright
-
-    # Install the custom node repository
+        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: Checkout custom node repository
       uses: actions/checkout@v5
       with:
         repository: ${{ inputs.owner }}/${{ inputs.repository }}
         path: 'ComfyUI/custom_nodes/${{ inputs.repository }}'
-    - name: Install custom node Python requirements
-      working-directory: ComfyUI/custom_nodes/${{ inputs.repository }}
+    - 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
       run: |
         if [ -f "requirements.txt" ]; then
           pip install -r requirements.txt
         fi
-
-    # Start ComfyUI Server
-    - name: Start ComfyUI Server
-      shell: bash
-      working-directory: ComfyUI
+      working-directory: ComfyUI/custom_nodes/${{ inputs.repository }}
+    - name: Build & Install ComfyUI_frontend
       run: |
-        python main.py --cpu --multi-user --front-end-root ../dist --custom-node-path ../ComfyUI/custom_nodes/${{ inputs.repository }} &
-        wait-for-it --service
-
+        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
+      working-directory: ComfyUI
+    - name: Setup Playwright
+      uses: ./ComfyUI_frontend/.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: Capture base i18n
       run: pnpm exec tsx scripts/diff-i18n capture
+      working-directory: ComfyUI_frontend
     - name: Update en.json
       run: pnpm collect-i18n
       env:
         PLAYWRIGHT_TEST_URL: http://localhost:5173
+      working-directory: ComfyUI_frontend
     - name: Update translations
       run: pnpm locale
       env:
         OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
+      working-directory: ComfyUI_frontend
     - name: Diff base vs updated i18n
       run: pnpm exec tsx scripts/diff-i18n diff
+      working-directory: ComfyUI_frontend
     - name: Update i18n in custom node repository
       run: |
         LOCALE_DIR=ComfyUI/custom_nodes/${{ inputs.repository }}/locales/
         install -d "$LOCALE_DIR"
         cp -rf ComfyUI_frontend/temp/diff/* "$LOCALE_DIR"
-    
-    # Git ops for pushing changes and creating PR
     - name: Check and create fork of custom node repository
       run: |
         # Try to fork the repository

.github/workflows/update-locales.yaml

@@ -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: Checkout repository
-      uses: actions/checkout@v5
-
-    # Setup playwright environment
-    - name: Setup ComfyUI Server
-      uses: ./.github/actions/setup-comfyui-server
-      with:
-        launch_server: true
-    - name: Setup ComfyUI Frontend
+    - name: Setup Frontend
       uses: ./.github/actions/setup-frontend
+    
+    - name: Cache tool outputs
+      uses: actions/cache@v4
       with:
-        include_build_step: true
+        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 }}-
     - 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 &
-
-    # Update locales, collect new strings and update translations using OpenAI, then commit changes
+      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: Commit updated locales
       run: |
         git config --global user.name 'github-actions'
@@ -56,3 +56,4 @@ jobs:
         git add src/locales/
         git diff --staged --quiet || git commit -m "Update locales [skip ci]"
         git push origin HEAD:${{ github.head_ref }}
+      working-directory: ComfyUI_frontend

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

@@ -13,32 +13,24 @@ jobs:
   update-locales:
     runs-on: ubuntu-latest
     steps:
-    - name: Checkout repository
-      uses: actions/checkout@v5
-    # Setup playwright environment
-    - name: Setup ComfyUI Server (and start)
-      uses: ./.github/actions/setup-comfyui-server
-      with:
-        launch_server: true
-    - name: Setup frontend
-      uses: ./.github/actions/setup-frontend
-      with:
-        include_build_step: true
+    - uses: Comfy-Org/ComfyUI_frontend_setup_action@v3
     - 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:
@@ -52,3 +44,4 @@ jobs:
         branch: update-locales-node-defs-${{ github.event.inputs.trigger_type }}-${{ github.run_id }}
         base: main
         labels: dependencies
+        path: ComfyUI_frontend

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

@@ -3,106 +3,42 @@ name: Update Playwright Expectations
 
 on:
   pull_request:
-    types: [labeled]
-  issue_comment:
-    types: [created]
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
-  cancel-in-progress: true
+    types: [ labeled ]
 
 jobs:
   test:
     runs-on: ubuntu-latest
-    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') )
+    if: github.event.label.name == 'New Browser Test Expectations'
     steps:
-      - name: Find Update Comment
-        uses: peter-evans/find-comment@b30e6a3c0ed37e7c023ccd3f1db5c6c0b0c23aad
-        id: "find-update-comment"
-        with:
-          issue-number: ${{ github.event.number || github.event.issue.number }}
-          comment-author: "github-actions[bot]"
-          body-includes: "Updating Playwright Expectations"
-
-      - name: Add Starting Reaction
-        uses: peter-evans/create-or-update-comment@e8674b075228eee787fea43ef493e45ece1004c9
-        with:
-          comment-id: ${{ steps.find-update-comment.outputs.comment-id }}
-          issue-number: ${{ github.event.number || github.event.issue.number }}
-          body: |
-            Updating Playwright Expectations
-          edit-mode: replace
-          reactions: eyes
-
-      - name: Get Branch SHA
-        id: "get-branch"
-        run: echo ::set-output name=branch::$(gh pr view $PR_NO --repo $REPO --json headRefName --jq '.headRefName')
-        env:
-          REPO: ${{ github.repository }}
-          PR_NO: ${{ github.event.number || github.event.issue.number }}
-          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Initial Checkout
-        uses: actions/checkout@v5
-        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 }}
+    - 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

.github/workflows/vitest-tests.yaml

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

.storybook/README.md

@@ -211,17 +211,18 @@ This Storybook setup includes:
 
 ## Icon Usage in Storybook
 
-In this project, only the `<i class="icon-[lucide--folder]" />` syntax from unplugin-icons is supported in Storybook.  
+In this project, the `<i-lucide:... />` syntax from unplugin-icons is not supported in Storybook.  
 
 **Example:**
 
 ```vue
 <script setup lang="ts">
+import { Trophy, Settings } from 'lucide-vue-next'
 </script>
 
 <template>
-  <i class="icon-[lucide--trophy] text-neutral size-4" />
-  <i class="icon-[lucide--settings] text-neutral size-4" />
+  <Trophy :size="16" class="text-neutral" />
+  <Settings :size="16" class="text-neutral" />
 </template>
 ```
 

.stylelintrc.json

@@ -7,15 +7,15 @@
     }
   ],
   "rules": {
-    "import-notation": "string",
+    "import-notation": "url",
     "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"],
-          "/^(width|height)$/": ["/^v-bind/"]
+          "app-region": ["drag", "no-drag"]
         }
       }
     ],
@@ -35,7 +35,7 @@
     "selector-max-type": 2,
     "declaration-block-no-duplicate-properties": true,
     "block-no-empty": true,
-    "no-descending-specificity": null,
+    "no-descending-specificity": true,
     "no-duplicate-at-import-rules": true,
     "at-rule-no-unknown": [
       true,
@@ -57,8 +57,7 @@
       true,
       {
         "ignoreFunctions": [
-          "theme",
-          "v-bind"
+          "theme"
         ]
       }
     ]

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.ts`, `.prettierrc`.
+- Config: `vite.config.mts`, `vitest.config.ts`, `playwright.config.ts`, `eslint.config.js`, `.prettierrc`.
 
 ## Build, Test, and Development Commands
 - `pnpm dev`: Start Vite dev server.

CLAUDE.md

@@ -126,5 +126,6 @@ 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:` 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')" />`
+- 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 })" />`
+

CODEOWNERS

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

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 class="icon-[lucide--settings]" />`, `<i class="icon-[mdi--folder]" />`
+2. **Iconify Icons** - 200,000+ icons from various libraries: `<i-lucide:settings />`, `<i-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.

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 class="icon-[lucide--badge-check] text-neutral-300 text-lg" />
+        <i-lucide:badge-check class="text-neutral-300 text-lg" />
       </div>
     </div>
 

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

@@ -286,12 +286,6 @@ const onFocus = async () => {
     .p-accordionheader {
       @apply rounded-t-xl rounded-b-none;
     }
-
-    .p-accordionheader-toggle-icon {
-      &::before {
-        content: '\e902';
-      }
-    }
   }
 
   .p-accordioncontent {
@@ -308,5 +302,13 @@ const onFocus = async () => {
       content: '\e933';
     }
   }
+
+  .p-accordionpanel-active {
+    .p-accordionheader-toggle-icon {
+      &::before {
+        content: '\e902';
+      }
+    }
+  }
 }
 </style>

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', sans-serif;
+  font-family: 'primeicons';
   top: -2rem;
   right: 2rem;
   speak: none;
   font-style: normal;
-  font-weight: 400;
+  font-weight: normal;
   font-variant: normal;
   text-transform: none;
   line-height: 1;

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', sans-serif;
+  font-family: 'primeicons';
   top: -2rem;
   right: -2rem;
   speak: none;
   font-style: normal;
-  font-weight: 400;
+  font-weight: normal;
   font-variant: normal;
   text-transform: none;
   line-height: 1;

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

@@ -18,16 +18,16 @@
         style="
           background: radial-gradient(
             ellipse 800px 600px at center,
-            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%,
+            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%,
             transparent 100%
           );
         "

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

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

browser_tests/assets/widgets/all_load_widgets.json

@@ -218,4 +218,4 @@
     "frontendVersion": "1.28.3"
   },
   "version": 0.4
-}
+}

browser_tests/fixtures/VueNodeHelpers.ts

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

browser_tests/fixtures/utils/taskHistory.ts

@@ -34,17 +34,23 @@ const getContentType = (filename: string, fileType: OutputFileType) => {
 }
 
 const setQueueIndex = (task: TaskItem) => {
-  task.prompt[0] = TaskHistory.queueIndex++
+  task.prompt.priority = TaskHistory.queueIndex++
 }
 
 const setPromptId = (task: TaskItem) => {
-  task.prompt[1] = uuidv4()
+  if (!task.prompt.prompt_id || task.prompt.prompt_id === 'prompt-id') {
+    task.prompt.prompt_id = uuidv4()
+  }
 }
 
 export default class TaskHistory {
   static queueIndex = 0
   static readonly defaultTask: Readonly<HistoryTaskItem> = {
-    prompt: [0, 'prompt-id', {}, { client_id: uuidv4() }, []],
+    prompt: {
+      priority: 0,
+      prompt_id: 'prompt-id',
+      extra_data: { client_id: uuidv4() }
+    },
     outputs: {},
     status: {
       status_str: 'success',
@@ -66,10 +72,37 @@ export default class TaskHistory {
   )
 
   private async handleGetHistory(route: Route) {
+    const url = route.request().url()
+
+    // Handle history_v2/:prompt_id endpoint
+    const promptIdMatch = url.match(/history_v2\/([^?]+)/)
+    if (promptIdMatch) {
+      const promptId = promptIdMatch[1]
+      const task = this.tasks.find((t) => t.prompt.prompt_id === promptId)
+      const response: Record<string, any> = {}
+      if (task) {
+        response[promptId] = task
+      }
+      return route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify(response)
+      })
+    }
+
+    // Handle history_v2 list endpoint
+    // Convert HistoryTaskItem to RawHistoryItem format expected by API
+    const rawHistoryItems = this.tasks.map((task) => ({
+      prompt_id: task.prompt.prompt_id,
+      prompt: task.prompt,
+      status: task.status,
+      outputs: task.outputs,
+      ...(task.meta && { meta: task.meta })
+    }))
     return route.fulfill({
       status: 200,
       contentType: 'application/json',
-      body: JSON.stringify(this.tasks)
+      body: JSON.stringify({ history: rawHistoryItems })
     })
   }
 
@@ -93,7 +126,7 @@ export default class TaskHistory {
 
   async setupRoutes() {
     return this.comfyPage.page.route(
-      /.*\/api\/(view|history)(\?.*)?$/,
+      /.*\/api\/(view|history_v2)(\/[^?]*)?(\?.*)?$/,
       async (route) => {
         const request = route.request()
         const method = request.method()

browser_tests/tests/historyApi.spec.ts

@@ -0,0 +1,131 @@
+import {
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '../fixtures/ComfyPage'
+
+test.describe('History API v2', () => {
+  const TEST_PROMPT_ID = 'test-prompt-id'
+  const TEST_CLIENT_ID = 'test-client'
+
+  test('Can fetch history with new v2 format', async ({ comfyPage }) => {
+    // Set up mocked history with tasks
+    await comfyPage.setupHistory().withTask(['example.webp']).setupRoutes()
+
+    // Verify history_v2 API response format
+    const result = await comfyPage.page.evaluate(async () => {
+      try {
+        const response = await window['app'].api.getHistory()
+        return { success: true, data: response }
+      } catch (error) {
+        console.error('Failed to fetch history:', error)
+        return { success: false, error: error.message }
+      }
+    })
+
+    expect(result.success).toBe(true)
+    expect(result.data).toHaveProperty('History')
+    expect(Array.isArray(result.data.History)).toBe(true)
+    expect(result.data.History.length).toBeGreaterThan(0)
+
+    const historyItem = result.data.History[0]
+
+    // Verify the new prompt structure (object instead of array)
+    expect(historyItem.prompt).toHaveProperty('priority')
+    expect(historyItem.prompt).toHaveProperty('prompt_id')
+    expect(historyItem.prompt).toHaveProperty('extra_data')
+    expect(typeof historyItem.prompt.priority).toBe('number')
+    expect(typeof historyItem.prompt.prompt_id).toBe('string')
+    expect(historyItem.prompt.extra_data).toHaveProperty('client_id')
+  })
+
+  test('Can load workflow from history using history_v2 endpoint', async ({
+    comfyPage
+  }) => {
+    // Simple mock workflow for testing
+    const mockWorkflow = {
+      version: 0.4,
+      nodes: [{ id: 1, type: 'TestNode', pos: [100, 100], size: [200, 100] }],
+      links: [],
+      groups: [],
+      config: {},
+      extra: {}
+    }
+
+    // Set up history with workflow data
+    await comfyPage
+      .setupHistory()
+      .withTask(['example.webp'], 'images', {
+        prompt: {
+          priority: 0,
+          prompt_id: TEST_PROMPT_ID,
+          extra_data: {
+            client_id: TEST_CLIENT_ID,
+            extra_pnginfo: { workflow: mockWorkflow }
+          }
+        }
+      })
+      .setupRoutes()
+
+    // Load initial workflow to clear canvas
+    await comfyPage.loadWorkflow('simple_slider')
+    await comfyPage.nextFrame()
+
+    // Load workflow from history
+    const loadResult = await comfyPage.page.evaluate(async (promptId) => {
+      try {
+        const workflow =
+          await window['app'].api.getWorkflowFromHistory(promptId)
+        if (workflow) {
+          await window['app'].loadGraphData(workflow)
+          return { success: true }
+        }
+        return { success: false, error: 'No workflow found' }
+      } catch (error) {
+        console.error('Failed to load workflow from history:', error)
+        return { success: false, error: error.message }
+      }
+    }, TEST_PROMPT_ID)
+
+    expect(loadResult.success).toBe(true)
+
+    // Verify workflow loaded correctly
+    await comfyPage.nextFrame()
+    const nodeInfo = await comfyPage.page.evaluate(() => {
+      try {
+        const graph = window['app'].graph
+        return {
+          success: true,
+          nodeCount: graph.nodes?.length || 0,
+          firstNodeType: graph.nodes?.[0]?.type || null
+        }
+      } catch (error) {
+        return { success: false, error: error.message }
+      }
+    })
+
+    expect(nodeInfo.success).toBe(true)
+    expect(nodeInfo.nodeCount).toBe(1)
+    expect(nodeInfo.firstNodeType).toBe('TestNode')
+  })
+
+  test('Handles missing workflow data gracefully', async ({ comfyPage }) => {
+    // Set up empty history routes
+    await comfyPage.setupHistory().setupRoutes()
+
+    // Test loading from history with invalid prompt_id
+    const result = await comfyPage.page.evaluate(async () => {
+      try {
+        const workflow =
+          await window['app'].api.getWorkflowFromHistory('invalid-id')
+        return { success: true, workflow }
+      } catch (error) {
+        console.error('Expected error for invalid prompt_id:', error)
+        return { success: false, error: error.message }
+      }
+    })
+
+    // Should handle gracefully without throwing
+    expect(result.success).toBe(true)
+    expect(result.workflow).toBeNull()
+  })
+})

browser_tests/tests/minimap.spec.ts

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

browser_tests/tests/sidebar/workflows.spec.ts

@@ -187,6 +187,7 @@ test.describe('Workflows sidebar', () => {
 
   test('Can save workflow as with same name', async ({ comfyPage }) => {
     await comfyPage.menu.topbar.saveWorkflow('workflow5.json')
+    await comfyPage.nextFrame()
     expect(await comfyPage.menu.workflowsTab.getOpenedWorkflowNames()).toEqual([
       'workflow5.json'
     ])

browser_tests/tests/vueNodes/groups/groups.spec.ts

@@ -8,7 +8,6 @@ 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()
   })
 
@@ -16,7 +15,6 @@ 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'
     )

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

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

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

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

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

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

eslint.config.ts

@@ -1,70 +1,54 @@
 // 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 {
-  configs as tseslintConfigs,
-  parser as tseslintParser
-} from 'typescript-eslint'
+import tseslint 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: [
-      '.i18nrc.cjs',
-      'components.d.ts',
-      'lint-staged.config.js',
-      'vitest.setup.ts',
+      'src/scripts/*',
+      'src/extensions/core/*',
+      'src/types/vue-shim.d.ts',
+      'packages/registry-types/src/comfyRegistryTypes.ts',
+      'src/types/generatedManagerTypes.ts',
       '**/vite.config.*.timestamp*',
       '**/vitest.config.*.timestamp*',
-      'packages/registry-types/src/comfyRegistryTypes.ts',
-      'src/extensions/core/*',
-      'src/scripts/*',
-      'src/types/generatedManagerTypes.ts',
-      'src/types/vue-shim.d.ts'
+      'lint-staged.config.js',
+      'vitest.litegraph.config.ts'
     ]
   },
   {
-    files: ['./**/*.{ts,mts}'],
-    settings,
+    files: ['./**/*.js'],
     languageOptions: {
-      globals: commonGlobals,
+      globals: {
+        ...globals.browser,
+        __COMFYUI_FRONTEND_VERSION__: 'readonly'
+      },
+      ecmaVersion: 2020,
+      sourceType: 'module'
+    },
+    rules: {
+      '@typescript-eslint/no-floating-promises': 'off'
+    }
+  },
+  {
+    files: ['./**/*.{ts,mts}'],
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        __COMFYUI_FRONTEND_VERSION__: 'readonly'
+      },
       parserOptions: {
-        ...commonParserOptions,
+        parser: tseslint.parser,
         projectService: {
           allowDefaultProject: [
             'vite.config.mts',
@@ -73,33 +57,37 @@ export default defineConfig([
             'playwright.config.ts',
             'playwright.i18n.config.ts'
           ]
-        }
+        },
+        tsConfigRootDir: import.meta.dirname,
+        ecmaVersion: 2020,
+        sourceType: 'module',
+        extraFileExtensions
       }
     }
   },
   {
     files: ['./**/*.vue'],
-    settings,
     languageOptions: {
-      globals: commonGlobals,
+      globals: {
+        ...globals.browser,
+        __COMFYUI_FRONTEND_VERSION__: 'readonly'
+      },
       parser: vueParser,
-      parserOptions: commonParserOptions
+      parserOptions: {
+        parser: tseslint.parser,
+        projectService: true,
+        tsConfigRootDir: import.meta.dirname,
+        ecmaVersion: 2020,
+        sourceType: 'module',
+        extraFileExtensions
+      }
     }
   },
   pluginJs.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'],
+  tseslint.configs.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,
@@ -119,18 +107,13 @@ 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',

index.html

@@ -3,6 +3,8 @@
   <head>
     <meta charset="UTF-8">
     <title>ComfyUI</title>
+    <!-- All assets should be loaded from the root no matter the initial path -->
+    <base href="/">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
     <link rel="stylesheet" type="text/css" href="materialdesignicons.min.css" />
     <link rel="stylesheet" type="text/css" href="user.css" />
@@ -12,10 +14,10 @@
     <meta name="mobile-web-app-capable" content="yes">
     <!-- Status bar style (eg. black or transparent) -->
     <meta name="apple-mobile-web-app-status-bar-style" content="black">
-    
+
     <link rel="manifest" href="manifest.json">
   </head>
-  
+
   <body class="litegraph grid">
     <div id="vue-app"></div>
     <script type="module" src="src/main.ts"></script>

knip.config.ts

@@ -20,6 +20,7 @@ const config: KnipConfig = {
       project: ['src/**/*.{js,ts}', '*.{js,ts,mts}']
     },
     'packages/registry-types': {
+      entry: ['src/comfyRegistryTypes.ts'],
       project: ['src/**/*.{js,ts}']
     }
   },
@@ -44,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)]
-        .map((match) => match[0].replace(/url\(['"]?([^'"()]+)['"]?\)/, '$1'))
-        .join('\n')
+      [
+        ...text.replaceAll('plugin', 'import').matchAll(/(?<=@)import[^;]+/g)
+      ].join('\n')
   },
   vite: {
     config: ['vite?(.*).config.mts']

lint-staged.config.js

@@ -1,15 +1,8 @@
 export default {
-  './**/*.js': (stagedFiles) => formatAndEslint(stagedFiles),
+  './**/*.js': 'pnpm exec eslint --cache --fix',
 
-  './**/*.{ts,tsx,vue,mts}': (stagedFiles) => [
-    ...formatAndEslint(stagedFiles),
-    'pnpm typecheck'
-  ]
-}
-
-function formatAndEslint(fileNames) {
-  return [
-    `pnpm exec eslint --cache --fix ${fileNames.join(' ')}`,
-    `pnpm exec prettier --cache --write ${fileNames.join(' ')}`
+  './**/*.{ts,tsx,vue,mts}': [
+    'pnpm exec eslint --cache --fix',
+    'pnpm exec prettier --cache --write'
   ]
 }

lint-staged.config.mjs

@@ -0,0 +1,15 @@
+export default {
+  './**/*.js': (stagedFiles) => formatAndEslint(stagedFiles),
+
+  './**/*.{ts,tsx,vue,mts}': (stagedFiles) => [
+    ...formatAndEslint(stagedFiles),
+    'pnpm typecheck'
+  ]
+}
+
+function formatAndEslint(fileNames) {
+  return [
+    `pnpm exec eslint --cache --fix ${fileNames.join(' ')}`,
+    `pnpm exec prettier --cache --write ${fileNames.join(' ')}`
+  ]
+}

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comfyorg/comfyui-frontend",
   "private": true,
-  "version": "1.29.1",
+  "version": "1.28.6",
   "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": "cross-env NODE_OPTIONS='--max-old-space-size=8192' pnpm typecheck && nx build",
+    "build": "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 '{apps,packages,src}/**/*.{css,vue}'",
-    "stylelint": "stylelint --cache '{apps,packages,src}/**/*.{css,vue}'",
+    "stylelint:fix": "stylelint --cache --fix",
+    "stylelint": "stylelint --cache",
     "test:browser": "pnpm exec nx e2e",
     "test:unit": "nx run test",
     "typecheck": "vue-tsc --noEmit",
@@ -57,7 +57,6 @@
     "@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:",
@@ -67,14 +66,10 @@
     "@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",

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

@@ -9,6 +9,35 @@
 
 @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;
@@ -85,6 +114,9 @@
   --color-bypass: #6a246a;
   --color-error: #962a2a;
 
+  /* Comfy menu colors */
+  --color-comfy-menu-secondary: var(--comfy-menu-secondary-bg);
+
   --color-blue-selection: rgb(from var(--color-blue-100) r g b / 0.3);
   --color-node-hover-100: rgb(from var(--color-charcoal-100) r g b/ 0.15);
   --color-node-hover-200: rgb(from var(--color-charcoal-100) r g b/ 0.1);
@@ -100,35 +132,6 @@
 }
 
 :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);
-
-  /* --- */
-
   --backdrop: var(--color-white);
   --dialog-surface: var(--color-neutral-200);
   --node-component-border: var(--color-gray-400);
@@ -150,9 +153,7 @@
   --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);
 }
@@ -498,7 +499,7 @@ body {
 
 /* Strong and emphasis */
 .comfy-markdown-content strong {
-  font-weight: 700;
+  font-weight: bold;
 }
 
 .comfy-markdown-content em {
@@ -509,7 +510,7 @@ body {
   display: none; /* Hidden by default */
   position: fixed; /* Stay in place */
   z-index: 100; /* Sit on top */
-  padding: 30px 30px 10px;
+  padding: 30px 30px 10px 30px;
   background-color: var(--comfy-menu-bg); /* Modal background */
   color: var(--error-text);
   box-shadow: 0 0 20px #888888;
@@ -557,8 +558,8 @@ body {
   background-color: var(--comfy-menu-bg);
   font-family: sans-serif;
   padding: 10px;
-  border-radius: 0 8px 8px;
-  box-shadow: 3px 3px 8px rgb(0 0 0 / 0.4);
+  border-radius: 0 8px 8px 8px;
+  box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.4);
 }
 
 .comfy-menu-header {
@@ -576,7 +577,7 @@ body {
 }
 
 .comfy-menu .comfy-menu-actions button {
-  background-color: rgb(0 0 0 / 0);
+  background-color: rgba(0, 0, 0, 0);
   padding: 0;
   border: none;
   cursor: pointer;
@@ -645,10 +646,13 @@ 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;
@@ -688,7 +692,7 @@ span.drag-handle::after {
   min-width: 160px;
   margin: 0;
   padding: 3px;
-  font-weight: 400;
+  font-weight: normal;
 }
 
 .comfy-list-items button {
@@ -805,7 +809,7 @@ dialog {
 }
 
 dialog::backdrop {
-  background: rgb(0 0 0 / 0.5);
+  background: rgba(0, 0, 0, 0.5);
 }
 
 .comfy-dialog.comfyui-dialog.comfy-modal {
@@ -1011,6 +1015,9 @@ 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,
@@ -1037,6 +1044,7 @@ 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;
@@ -1046,11 +1054,6 @@ 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;
 }

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 class="icon-[lucide--download]" />
-  <i class="icon-[lucide--settings]" />
-  <i class="icon-[lucide--workflow]" class="text-2xl" />
+  <i-lucide:download />
+  <i-lucide:settings />
+  <i-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 class="icon-[lucide--save]" class="w-6 h-6 text-blue-500" />
+  <i-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 class="icon-[lucide--save]" />
+      <i-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 class="icon-[lucide--eye]" v-if="isVisible" />
-  <i class="icon-[lucide--eye-off]" v-else />
+  <i-lucide:eye v-if="isVisible" />
+  <i-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 class="icon-[lucide--info]"
+  <i-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 class="icon-[lucide--plus]" class="w-4 h-4" />
+  <i-lucide:plus class="w-4 h-4" />
   <!-- 16px -->
-  <i class="icon-[lucide--plus]" class="w-6 h-6" />
+  <i-lucide:plus class="w-6 h-6" />
   <!-- 24px (default) -->
-  <i class="icon-[lucide--plus]" class="w-8 h-8" />
+  <i-lucide:plus class="w-8 h-8" />
   <!-- 32px -->
 
   <!-- Or text size -->
-  <i class="icon-[lucide--plus]" class="text-sm" />
-  <i class="icon-[lucide--plus]" class="text-2xl" />
+  <i-lucide:plus class="text-sm" />
+  <i-lucide:plus class="text-2xl" />
 
   <!-- Colors -->
-  <i class="icon-[lucide--check]" class="text-green-500" />
-  <i class="icon-[lucide--x]" class="text-red-500" />
+  <i-lucide:check class="text-green-500" />
+  <i-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 class="icon-[lucide--download]" />
+      <i-lucide:download />
     </template>
   </Button>
 </template>

packages/design-system/tailwind.config.ts

@@ -4,13 +4,22 @@ 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'
     })
   ]

packages/shared-frontend-utils/package.json

@@ -14,9 +14,9 @@
     "./networkUtil": "./src/networkUtil.ts"
   },
   "dependencies": {
-    "axios": "catalog:"
+    "axios": "^1.11.0"
   },
   "devDependencies": {
-    "typescript": "catalog:"
+    "typescript": "^5.9.2"
   }
 }

pnpm-workspace.yaml

@@ -3,19 +3,60 @@ packages:
   - packages/**
 
 catalog:
-  '@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
+  # Core frameworks
+  typescript: ^5.9.2
+  vue: ^3.5.13
+
+  # Build tools
   '@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
@@ -23,87 +64,58 @@ catalog:
   '@primevue/forms': ^4.2.5
   '@primevue/icons': 4.2.5
   '@primevue/themes': ^4.2.5
-  '@sentry/vue': ^8.48.0
+  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
   '@storybook/addon-docs': ^9.1.1
+  storybook: ^9.1.6
   '@storybook/vue3': ^9.1.1
   '@storybook/vue3-vite': ^9.1.1
-  '@tailwindcss/vite': ^4.1.12
-  '@trivago/prettier-plugin-sort-imports': ^5.2.0
-  '@types/eslint-plugin-tailwindcss': ^3.17.0
+
+  # 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
   '@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
-  '@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
+  'vue-component-type-helpers': ^3.0.7
+  'zod-to-json-schema': ^3.24.1
 
-cleanupUnusedCatalogs: true
-
-overrides:
-  '@types/eslint': '-'
+  # i18n
+  '@alloc/quick-lru': ^5.2.0
+  '@lobehub/i18n-cli': ^1.25.1
+  '@trivago/prettier-plugin-sort-imports': ^5.2.0
 
 ignoredBuiltDependencies:
   - '@firebase/util'
   - protobufjs
-  - unrs-resolver
   - vue-demi
 
 onlyBuiltDependencies:

src/App.vue

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

src/api/auth.ts

@@ -0,0 +1,365 @@
+import * as Sentry from '@sentry/vue'
+import { isEmpty } from 'es-toolkit/compat'
+
+import { api } from '@/scripts/api'
+
+interface UserCloudStatus {
+  status: 'active' | 'waitlisted'
+}
+
+const ONBOARDING_SURVEY_KEY = 'onboarding_survey'
+
+/**
+ * Helper function to capture API errors with Sentry
+ */
+function captureApiError(
+  error: Error,
+  endpoint: string,
+  errorType: 'http_error' | 'network_error',
+  httpStatus?: number,
+  operation?: string,
+  extraContext?: Record<string, any>
+) {
+  const tags: Record<string, any> = {
+    api_endpoint: endpoint,
+    error_type: errorType
+  }
+
+  if (httpStatus !== undefined) {
+    tags.http_status = httpStatus
+  }
+
+  if (operation) {
+    tags.operation = operation
+  }
+
+  const sentryOptions: any = {
+    tags,
+    extra: extraContext ? { ...extraContext } : undefined
+  }
+
+  Sentry.captureException(error, sentryOptions)
+}
+
+/**
+ * Helper function to check if error is already handled HTTP error
+ */
+function isHttpError(error: unknown, errorMessagePrefix: string): boolean {
+  return error instanceof Error && error.message.startsWith(errorMessagePrefix)
+}
+
+export async function getUserCloudStatus(): Promise<UserCloudStatus> {
+  try {
+    const response = await api.fetchApi('/user', {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    })
+    if (!response.ok) {
+      const error = new Error(`Failed to get user: ${response.statusText}`)
+      captureApiError(
+        error,
+        '/user',
+        'http_error',
+        response.status,
+        undefined,
+        {
+          api: {
+            method: 'GET',
+            endpoint: '/user',
+            status_code: response.status,
+            status_text: response.statusText
+          }
+        }
+      )
+      throw error
+    }
+
+    return response.json()
+  } catch (error) {
+    // Only capture network errors (not HTTP errors we already captured)
+    if (!isHttpError(error, 'Failed to get user:')) {
+      captureApiError(error as Error, '/user', 'network_error')
+    }
+    throw error
+  }
+}
+
+export async function getInviteCodeStatus(
+  inviteCode: string
+): Promise<{ claimed: boolean; expired: boolean }> {
+  try {
+    const response = await api.fetchApi(
+      `/invite_code/${encodeURIComponent(inviteCode)}/status`,
+      {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json'
+        }
+      }
+    )
+    if (!response.ok) {
+      const error = new Error(
+        `Failed to get invite code status: ${response.statusText}`
+      )
+      captureApiError(
+        error,
+        '/invite_code/{code}/status',
+        'http_error',
+        response.status,
+        undefined,
+        {
+          api: {
+            method: 'GET',
+            endpoint: `/invite_code/${inviteCode}/status`,
+            status_code: response.status,
+            status_text: response.statusText
+          },
+          extra: {
+            invite_code_length: inviteCode.length
+          },
+          route_template: '/invite_code/{code}/status',
+          route_actual: `/invite_code/${inviteCode}/status`
+        }
+      )
+      throw error
+    }
+
+    return response.json()
+  } catch (error) {
+    // Only capture network errors (not HTTP errors we already captured)
+    if (!isHttpError(error, 'Failed to get invite code status:')) {
+      captureApiError(
+        error as Error,
+        '/invite_code/{code}/status',
+        'network_error',
+        undefined,
+        undefined,
+        {
+          route_template: '/invite_code/{code}/status',
+          route_actual: `/invite_code/${inviteCode}/status`
+        }
+      )
+    }
+    throw error
+  }
+}
+
+export async function getSurveyCompletedStatus(): Promise<boolean> {
+  try {
+    const response = await api.fetchApi(`/settings/${ONBOARDING_SURVEY_KEY}`, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    })
+    if (!response.ok) {
+      // Not an error case - survey not completed is a valid state
+      Sentry.addBreadcrumb({
+        category: 'auth',
+        message: 'Survey status check returned non-ok response',
+        level: 'info',
+        data: {
+          status: response.status,
+          endpoint: `/settings/${ONBOARDING_SURVEY_KEY}`
+        }
+      })
+      return false
+    }
+    const data = await response.json()
+    // Check if data exists and is not empty
+    return !isEmpty(data.value)
+  } catch (error) {
+    // Network error - still capture it as it's not thrown from above
+    Sentry.captureException(error, {
+      tags: {
+        api_endpoint: '/settings/{key}',
+        error_type: 'network_error'
+      },
+      extra: {
+        route_template: '/settings/{key}',
+        route_actual: `/settings/${ONBOARDING_SURVEY_KEY}`
+      },
+      level: 'warning'
+    })
+    return false
+  }
+}
+
+// @ts-expect-error - Unused function kept for future use
+async function postSurveyStatus(): Promise<void> {
+  try {
+    const response = await api.fetchApi(`/settings/${ONBOARDING_SURVEY_KEY}`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({ [ONBOARDING_SURVEY_KEY]: undefined })
+    })
+
+    if (!response.ok) {
+      const error = new Error(
+        `Failed to post survey status: ${response.statusText}`
+      )
+      captureApiError(
+        error,
+        '/settings/{key}',
+        'http_error',
+        response.status,
+        'post_survey_status',
+        {
+          route_template: '/settings/{key}',
+          route_actual: `/settings/${ONBOARDING_SURVEY_KEY}`
+        }
+      )
+      throw error
+    }
+  } catch (error) {
+    // Only capture network errors (not HTTP errors we already captured)
+    if (!isHttpError(error, 'Failed to post survey status:')) {
+      captureApiError(
+        error as Error,
+        '/settings/{key}',
+        'network_error',
+        undefined,
+        'post_survey_status',
+        {
+          route_template: '/settings/{key}',
+          route_actual: `/settings/${ONBOARDING_SURVEY_KEY}`
+        }
+      )
+    }
+    throw error
+  }
+}
+
+export async function submitSurvey(
+  survey: Record<string, unknown>
+): Promise<void> {
+  try {
+    Sentry.addBreadcrumb({
+      category: 'auth',
+      message: 'Submitting survey',
+      level: 'info',
+      data: {
+        survey_fields: Object.keys(survey)
+      }
+    })
+
+    const response = await api.fetchApi('/settings', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({ [ONBOARDING_SURVEY_KEY]: survey })
+    })
+
+    if (!response.ok) {
+      const error = new Error(`Failed to submit survey: ${response.statusText}`)
+      captureApiError(
+        error,
+        '/settings',
+        'http_error',
+        response.status,
+        'submit_survey',
+        {
+          survey: {
+            field_count: Object.keys(survey).length,
+            field_names: Object.keys(survey)
+          }
+        }
+      )
+      throw error
+    }
+
+    // Log successful survey submission
+    Sentry.addBreadcrumb({
+      category: 'auth',
+      message: 'Survey submitted successfully',
+      level: 'info'
+    })
+  } catch (error) {
+    // Only capture network errors (not HTTP errors we already captured)
+    if (!isHttpError(error, 'Failed to submit survey:')) {
+      captureApiError(
+        error as Error,
+        '/settings',
+        'network_error',
+        undefined,
+        'submit_survey'
+      )
+    }
+    throw error
+  }
+}
+
+export async function claimInvite(
+  code: string
+): Promise<{ success: boolean; message: string }> {
+  try {
+    Sentry.addBreadcrumb({
+      category: 'auth',
+      message: 'Attempting to claim invite',
+      level: 'info',
+      data: {
+        code_length: code.length
+      }
+    })
+
+    const res = await api.fetchApi(
+      `/invite_code/${encodeURIComponent(code)}/claim`,
+      {
+        method: 'POST'
+      }
+    )
+
+    if (!res.ok) {
+      const error = new Error(
+        `Failed to claim invite: ${res.status} ${res.statusText}`
+      )
+      captureApiError(
+        error,
+        '/invite_code/{code}/claim',
+        'http_error',
+        res.status,
+        'claim_invite',
+        {
+          invite: {
+            code_length: code.length,
+            status_code: res.status,
+            status_text: res.statusText
+          },
+          route_template: '/invite_code/{code}/claim',
+          route_actual: `/invite_code/${encodeURIComponent(code)}/claim`
+        }
+      )
+      throw error
+    }
+
+    // Log successful invite claim
+    Sentry.addBreadcrumb({
+      category: 'auth',
+      message: 'Invite claimed successfully',
+      level: 'info'
+    })
+
+    return res.json()
+  } catch (error) {
+    // Only capture network errors (not HTTP errors we already captured)
+    if (!isHttpError(error, 'Failed to claim invite:')) {
+      captureApiError(
+        error as Error,
+        '/invite_code/{code}/claim',
+        'network_error',
+        undefined,
+        'claim_invite',
+        {
+          route_template: '/invite_code/{code}/claim',
+          route_actual: `/invite_code/${encodeURIComponent(code)}/claim`
+        }
+      )
+    }
+    throw error
+  }
+}

src/components/actionbar/ComfyActionbar.vue

@@ -5,15 +5,7 @@
     :class="{ 'is-dragging': isDragging, 'is-docked': isDocked }"
   >
     <div ref="panelRef" class="actionbar-content flex items-center select-none">
-      <span
-        ref="dragHandleRef"
-        :class="
-          cn(
-            'drag-handle cursor-grab w-3 h-max mr-2',
-            isDragging && 'cursor-grabbing'
-          )
-        "
-      />
+      <span ref="dragHandleRef" class="drag-handle cursor-move mr-2" />
       <ComfyQueueButton />
     </div>
   </Panel>
@@ -34,7 +26,6 @@ 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'
 
@@ -266,4 +257,8 @@ watch([isDragging, isOverlappingWithTopMenu], ([dragging, overlapping]) => {
 :deep(.p-panel-header) {
   display: none;
 }
+
+.drag-handle {
+  @apply w-3 h-max;
+}
 </style>

src/components/actionbar/ComfyQueueButton.vue

@@ -16,16 +16,10 @@
       @click="queuePrompt"
     >
       <template #icon>
-        <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]"
-        />
+        <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'" />
       </template>
       <template #item="{ item }">
         <Button

src/components/bottomPanel/BottomPanel.vue

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

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

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

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

@@ -1,13 +1,13 @@
 <template>
   <div class="shortcuts-list flex justify-center">
-    <div class="grid h-full w-[90%] grid-cols-1 gap-4 md:grid-cols-3 md:gap-24">
+    <div class="grid gap-4 md:gap-24 h-full grid-cols-1 md:grid-cols-3 w-[90%]">
       <div
         v-for="(subcategoryCommands, subcategory) in filteredSubcategories"
         :key="subcategory"
         class="flex flex-col"
       >
         <h3
-          class="subcategory-title mb-4 text-xs font-bold tracking-wide text-surface-600 uppercase dark-theme:text-surface-400"
+          class="subcategory-title text-xs font-bold uppercase tracking-wide text-surface-600 dark-theme:text-surface-400 mb-4"
         >
           {{ getSubcategoryTitle(subcategory) }}
         </h3>
@@ -16,7 +16,7 @@
           <div
             v-for="command in subcategoryCommands"
             :key="command.id"
-            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"
+            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"
           >
             <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 min-w-6 rounded border bg-surface-200 px-2 py-1 text-center font-mono text-xs dark-theme:bg-surface-600"
+                  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"
                 >
                   {{ formatKey(key) }}
                 </span>

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

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

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

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

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

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

src/components/breadcrumb/SubgraphBreadcrumbItem.vue

@@ -6,7 +6,7 @@
       showDelay: 512
     }"
     href="#"
-    class="p-breadcrumb-item-link cursor-pointer"
+    class="cursor-pointer p-breadcrumb-item-link"
     :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 px-2 py-2 text-[.8rem]"
+    class="fixed z-10000 text-[.8rem] px-2 py-2"
     @blur="inputBlur(true)"
     @click.stop
     @keydown.enter="inputBlur(true)"

src/components/button/MoreButton.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="relative inline-flex items-center">
     <IconButton @click="toggle">
-      <i class="icon-[lucide--more-vertical] text-sm" />
+      <i-lucide:more-vertical class="text-sm" />
     </IconButton>
 
     <Popover
@@ -14,7 +14,7 @@
       unstyled
       :pt="pt"
     >
-      <div class="flex min-w-40 flex-col gap-2 p-2">
+      <div class="flex flex-col gap-2 p-2 min-w-40">
         <slot :close="hide" />
       </div>
     </Popover>

src/components/card/CardDescription.vue

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

src/components/card/CardTop.vue

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

src/components/chip/SquareChip.vue

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

src/components/common/FileDownload.vue

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

src/components/common/FormImageUpload.vue

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

src/components/common/FormItem.vue

@@ -34,8 +34,7 @@ import InputNumber from 'primevue/inputnumber'
 import InputText from 'primevue/inputtext'
 import Select from 'primevue/select'
 import ToggleSwitch from 'primevue/toggleswitch'
-import { markRaw } from 'vue'
-import type { Component } from 'vue'
+import { type Component, markRaw } from 'vue'
 
 import BackgroundImageUpload from '@/components/common/BackgroundImageUpload.vue'
 import CustomFormValue from '@/components/common/CustomFormValue.vue'

src/components/common/LazyImage.vue

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

src/components/common/NoResultsPlaceholder.vue

@@ -1,11 +1,11 @@
 <template>
-  <div class="no-results-placeholder h-full p-8" :class="props.class">
+  <div class="no-results-placeholder p-8 h-full" :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="text-center whitespace-pre-line">
+          <p :class="textClass" class="whitespace-pre-line text-center">
             {{ message }}
           </p>
           <Button

src/components/common/SearchBox.vue

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

src/components/common/SystemStatsPanel.vue

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

src/components/common/TreeExplorer.vue

@@ -2,7 +2,7 @@
   <Tree
     v-model:expanded-keys="expandedKeys"
     v-model:selection-keys="selectionKeys"
-    class="tree-explorer px-2 py-0 2xl:px-4"
+    class="tree-explorer py-0 px-2 2xl:px-4"
     :class="props.class"
     :value="renderedRoot.children"
     selection-mode="single"
@@ -47,11 +47,9 @@ import { useTreeFolderOperations } from '@/composables/tree/useTreeFolderOperati
 import { useErrorHandling } from '@/composables/useErrorHandling'
 import {
   InjectKeyExpandedKeys,
-  InjectKeyHandleEditLabelFunction
-} from '@/types/treeExplorerTypes'
-import type {
-  RenderedTreeExplorerNode,
-  TreeExplorerNode
+  InjectKeyHandleEditLabelFunction,
+  type RenderedTreeExplorerNode,
+  type TreeExplorerNode
 } from '@/types/treeExplorerTypes'
 import { combineTrees, findNodeByKey } from '@/utils/treeUtil'
 

src/components/common/TreeExplorerTreeNode.vue

@@ -45,10 +45,10 @@ import {
   usePragmaticDraggable,
   usePragmaticDroppable
 } from '@/composables/usePragmaticDragAndDrop'
-import { InjectKeyHandleEditLabelFunction } from '@/types/treeExplorerTypes'
-import type {
-  RenderedTreeExplorerNode,
-  TreeExplorerDragAndDropData
+import {
+  InjectKeyHandleEditLabelFunction,
+  type RenderedTreeExplorerNode,
+  type TreeExplorerDragAndDropData
 } from '@/types/treeExplorerTypes'
 
 const props = defineProps<{

src/components/common/UrlInput.vue

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

src/components/common/UserCredit.vue

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

src/components/common/VirtualGrid.vue

@@ -17,8 +17,7 @@
 <script setup lang="ts" generic="T">
 import { useElementSize, useScroll, whenever } from '@vueuse/core'
 import { clamp, debounce } from 'es-toolkit/compat'
-import { computed, onBeforeUnmount, ref, watch } from 'vue'
-import type { CSSProperties } from 'vue'
+import { type CSSProperties, computed, onBeforeUnmount, ref, watch } from 'vue'
 
 type GridState = {
   start: number

src/components/custom/widget/WorkflowTemplateSelectorDialog.vue

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

src/components/dialog/content/ApiNodesSignInContent.vue

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