[automated] Apply ESLint and Prettier fixes

- Replace console.log with process.stdout.write for JSON output
- Remove unused reportDir parameter from extractFailingTests function

Fixes eslint(no-console) and oxc(only-used-in-recursion) warnings

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

@@ -1,23 +0,0 @@
-name: Start ComfyUI Server
-description: 'Start ComfyUI server in a container environment (assumes ComfyUI is pre-installed)'
-
-inputs:
-  front_end_root:
-    description: 'Path to frontend dist directory'
-    required: false
-    default: '$GITHUB_WORKSPACE/dist'
-  timeout:
-    description: 'Timeout in seconds for server startup'
-    required: false
-    default: '600'
-
-runs:
-  using: 'composite'
-  steps:
-    - name: Copy devtools and start server
-      shell: bash
-      run: |
-        set -euo pipefail
-        cp -r ./tools/devtools/* /ComfyUI/custom_nodes/ComfyUI_devtools/
-        cd /ComfyUI && python3 main.py --cpu --multi-user --front-end-root "${{ inputs.front_end_root }}" &
-        wait-for-it --service 127.0.0.1:8188 -t ${{ inputs.timeout }}

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

@@ -15,56 +15,66 @@ concurrency:
 jobs:
   setup:
     runs-on: ubuntu-latest
+    outputs:
+      cache-key: ${{ steps.cache-key.outputs.key }}
     steps:
       - name: Checkout repository
         uses: actions/checkout@v5
+
+      # Setup Test Environment, build frontend but do not start server yet
+      - name: Setup ComfyUI server
+        uses: ./.github/actions/setup-comfyui-server
       - name: Setup frontend
         uses: ./.github/actions/setup-frontend
         with:
           include_build_step: true
+      - name: Setup Playwright
+        uses: ./.github/actions/setup-playwright  # Setup Playwright and cache browsers
 
-      # Upload only built dist/ (containerized test jobs will pnpm install without cache)
-      - name: Upload built frontend
-        uses: actions/upload-artifact@v4
+      # 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:
-          name: frontend-dist
-          path: dist/
-          retention-days: 1
+          path: .
+          key: comfyui-setup-${{ steps.cache-key.outputs.key }}
 
   # Sharded chromium tests
   playwright-tests-chromium-sharded:
     needs: setup
     runs-on: ubuntu-latest
     timeout-minutes: 60
-    container:
-      image: ghcr.io/comfy-org/comfyui-ci-container:0.0.8
-      credentials:
-        username: ${{ github.actor }}
-        password: ${{ secrets.GITHUB_TOKEN }}
     permissions:
       contents: read
-      packages: read
     strategy:
       fail-fast: false
       matrix:
         shardIndex: [1, 2, 3, 4, 5, 6, 7, 8]
         shardTotal: [8]
     steps:
-      - name: Checkout repository
-        uses: actions/checkout@v5
-      - name: Download built frontend
-        uses: actions/download-artifact@v4
+      # download built frontend repo from setup job
+      - name: Wait for cache propagation
+        run: sleep 10
+      - name: Restore cached setup
+        uses: actions/cache/restore@5a3ec84eff668545956fd18022155c47e93e2684
         with:
-          name: frontend-dist
-          path: dist/
+          fail-on-cache-miss: true
+          path: .
+          key: comfyui-setup-${{ needs.setup.outputs.cache-key }}
 
-      - name: Start ComfyUI server
-        uses: ./.github/actions/start-comfyui-server
+      # Setup Test Environment for this runner, start server, use cached built frontend ./dist from 'setup' job
+      - name: Setup ComfyUI server
+        uses: ./.github/actions/setup-comfyui-server
+        with:
+          launch_server: true
+      - name: Setup nodejs, pnpm, reuse built frontend
+        uses: ./.github/actions/setup-frontend
+      - name: Setup Playwright
+        uses: ./.github/actions/setup-playwright
 
-      - name: Install frontend deps
-        run: pnpm install --frozen-lockfile
-
-      # Run sharded tests (browsers pre-installed in container)
+      # 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
@@ -84,37 +94,39 @@ jobs:
     timeout-minutes: 15
     needs: setup
     runs-on: ubuntu-latest
-    container:
-      image: ghcr.io/comfy-org/comfyui-ci-container:0.0.8
-      credentials:
-        username: ${{ github.actor }}
-        password: ${{ secrets.GITHUB_TOKEN }}
     permissions:
       contents: read
-      packages: read
     strategy:
       fail-fast: false
       matrix:
         browser: [chromium-2x, chromium-0.5x, mobile-chrome]
     steps:
-      - name: Checkout repository
-        uses: actions/checkout@v5
-      - name: Download built frontend
-        uses: actions/download-artifact@v4
+      # download built frontend repo from setup job
+      - name: Wait for cache propagation
+        run: sleep 10
+      - name: Restore cached setup
+        uses: actions/cache/restore@5a3ec84eff668545956fd18022155c47e93e2684
         with:
-          name: frontend-dist
-          path: dist/
+          fail-on-cache-miss: true
+          path: .
+          key: comfyui-setup-${{ needs.setup.outputs.cache-key }}
 
-      - name: Start ComfyUI server
-        uses: ./.github/actions/start-comfyui-server
+      # Setup Test Environment for this runner, start server, use cached built frontend ./dist from 'setup' job
+      - name: Setup ComfyUI server
+        uses: ./.github/actions/setup-comfyui-server
+        with:
+          launch_server: true
+      - name: Setup nodejs, pnpm, reuse built frontend
+        uses: ./.github/actions/setup-frontend
+      - name: Setup Playwright
+        uses: ./.github/actions/setup-playwright
 
-      - name: Install frontend deps
-        run: pnpm install --frozen-lockfile
-
-      # Run tests (browsers pre-installed in container)
+      # Run tests and upload reports
       - name: Run Playwright tests (${{ matrix.browser }})
         id: playwright
-        run: pnpm exec playwright test --project=${{ matrix.browser }} --reporter=blob
+        run: |
+          # Run tests with blob reporter first
+          pnpm exec playwright test --project=${{ matrix.browser }} --reporter=blob
         env:
           PLAYWRIGHT_BLOB_OUTPUT_DIR: ./blob-report
 
@@ -135,7 +147,7 @@ jobs:
           path: ./playwright-report/
           retention-days: 30
 
-  # Merge sharded test reports (no container needed - only runs CLI)
+  # Merge sharded test reports
   merge-reports:
     needs: [playwright-tests-chromium-sharded]
     runs-on: ubuntu-latest
@@ -144,9 +156,11 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v5
 
-      # Setup pnpm/node to run playwright merge-reports (no browsers needed)
+      # Setup Test Environment, we only need playwright to merge reports
       - name: Setup frontend
         uses: ./.github/actions/setup-frontend
+      - name: Setup Playwright
+        uses: ./.github/actions/setup-playwright
 
       - name: Download blob reports
         uses: actions/download-artifact@v4

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

@@ -25,6 +25,7 @@ jobs:
         ) &&
         startsWith(github.event.comment.body, '/update-playwright') )
     outputs:
+      cache-key: ${{ steps.cache-key.outputs.key }}
       pr-number: ${{ steps.pr-info.outputs.pr-number }}
       branch: ${{ steps.pr-info.outputs.branch }}
       comment-id: ${{ steps.find-update-comment.outputs.comment-id }}
@@ -63,63 +64,70 @@ jobs:
         uses: ./.github/actions/setup-frontend
         with:
           include_build_step: true
-
-      # Upload built dist/ (containerized test jobs will pnpm install without cache)
-      - name: Upload built frontend
-        uses: actions/upload-artifact@v4
+      # Save expensive build artifacts (Python env, built frontend, node_modules)
+      # Source code will be checked out fresh in sharded jobs
+      - name: Generate cache key
+        id: cache-key
+        run: echo "key=$(date +%s)" >> $GITHUB_OUTPUT
+      - name: Save cache
+        uses: actions/cache/save@5a3ec84eff668545956fd18022155c47e93e2684
         with:
-          name: frontend-dist
-          path: dist/
-          retention-days: 1
+          path: |
+            ComfyUI
+            dist
+          key: comfyui-setup-${{ steps.cache-key.outputs.key }}
 
   # Sharded snapshot updates
   update-snapshots-sharded:
     needs: setup
     runs-on: ubuntu-latest
-    container:
-      image: ghcr.io/comfy-org/comfyui-ci-container:0.0.8
-      credentials:
-        username: ${{ github.actor }}
-        password: ${{ secrets.GITHUB_TOKEN }}
-    permissions:
-      contents: read
-      packages: read
     strategy:
       fail-fast: false
       matrix:
         shardIndex: [1, 2, 3, 4]
         shardTotal: [4]
     steps:
+      # Checkout source code fresh (not cached)
       - name: Checkout repository
         uses: actions/checkout@v5
         with:
           ref: ${{ needs.setup.outputs.branch }}
-      - name: Download built frontend
-        uses: actions/download-artifact@v4
+
+      # Restore expensive build artifacts from setup job
+      - name: Restore cached artifacts
+        uses: actions/cache/restore@5a3ec84eff668545956fd18022155c47e93e2684
         with:
-          name: frontend-dist
-          path: dist/
+          fail-on-cache-miss: true
+          path: |
+            ComfyUI
+            dist
+          key: comfyui-setup-${{ needs.setup.outputs.cache-key }}
 
-      - name: Start ComfyUI server
-        uses: ./.github/actions/start-comfyui-server
+      - name: Setup ComfyUI server (from cache)
+        uses: ./.github/actions/setup-comfyui-server
+        with:
+          launch_server: true
 
-      - name: Install frontend deps
-        run: pnpm install --frozen-lockfile
+      - name: Setup nodejs, pnpm, reuse built frontend
+        uses: ./.github/actions/setup-frontend
 
-      # Run sharded tests with snapshot updates (browsers pre-installed in container)
+      - name: Setup Playwright
+        uses: ./.github/actions/setup-playwright
+
+      # Run sharded tests with snapshot updates
       - name: Update snapshots (Shard ${{ matrix.shardIndex }}/${{ matrix.shardTotal }})
         id: playwright-tests
         run: pnpm exec playwright test --update-snapshots --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }}
         continue-on-error: true
 
+      # Identify and stage only changed snapshot files
       - name: Stage changed snapshot files
         id: changed-snapshots
-        shell: bash
         run: |
           set -euo pipefail
-
-          # Configure git safe.directory for container environment
-          git config --global --add safe.directory "$(pwd)"
+          echo "=========================================="
+          echo "STAGING CHANGED SNAPSHOTS (Shard ${{ matrix.shardIndex }})"
+          echo "=========================================="
 
           # Get list of changed snapshot files (including untracked/new files)
           changed_files=$( (
@@ -128,25 +136,43 @@ jobs:
           ) | sort -u | grep -E '\-snapshots/' || true )
 
           if [ -z "$changed_files" ]; then
-            echo "No snapshot changes in shard ${{ matrix.shardIndex }}"
+            echo "No snapshot changes in this shard"
             echo "has-changes=false" >> $GITHUB_OUTPUT
             exit 0
           fi
 
-          file_count=$(echo "$changed_files" | wc -l)
-          echo "Shard ${{ matrix.shardIndex }}: $file_count changed snapshot(s):"
+          echo "✓ Found changed files:"
           echo "$changed_files"
+          file_count=$(echo "$changed_files" | wc -l)
+          echo "Count: $file_count"
           echo "has-changes=true" >> $GITHUB_OUTPUT
+          echo ""
 
-          # Copy changed files to staging directory
+          # Create staging directory
           mkdir -p /tmp/changed_snapshots_shard
+
+          # Copy only changed files, preserving directory structure
+          # Strip 'browser_tests/' prefix to avoid double nesting
+          echo "Copying changed files to staging directory..."
           while IFS= read -r file; do
-            [ -f "$file" ] || continue
+            # Skip paths that no longer exist (e.g. deletions)
+            if [ ! -f "$file" ]; then
+              echo "  → (skipped; not a file) $file"
+              continue
+            fi
+            # Remove 'browser_tests/' prefix
             file_without_prefix="${file#browser_tests/}"
+            # Create parent directories
             mkdir -p "/tmp/changed_snapshots_shard/$(dirname "$file_without_prefix")"
+            # Copy file
             cp "$file" "/tmp/changed_snapshots_shard/$file_without_prefix"
+            echo "  → $file_without_prefix"
           done <<< "$changed_files"
 
+          echo ""
+          echo "Staged files for upload:"
+          find /tmp/changed_snapshots_shard -type f
+
       # Upload ONLY the changed files from this shard
       - name: Upload changed snapshots
         uses: actions/upload-artifact@v4
@@ -187,15 +213,9 @@ jobs:
           echo "=========================================="
           echo "DOWNLOADED SNAPSHOT FILES"
           echo "=========================================="
-          if [ -d "./downloaded-snapshots" ]; then
-            find ./downloaded-snapshots -type f
-            echo ""
-            echo "Total files: $(find ./downloaded-snapshots -type f | wc -l)"
-          else
-            echo "No snapshot artifacts downloaded (no changes in any shard)"
-            echo ""
-            echo "Total files: 0"
-          fi
+          find ./downloaded-snapshots -type f
+          echo ""
+          echo "Total files: $(find ./downloaded-snapshots -type f | wc -l)"
 
       # Merge only the changed files into browser_tests
       - name: Merge changed snapshots
@@ -206,16 +226,6 @@ jobs:
           echo "MERGING CHANGED SNAPSHOTS"
           echo "=========================================="
 
-          # Check if any artifacts were downloaded
-          if [ ! -d "./downloaded-snapshots" ]; then
-            echo "No snapshot artifacts to merge"
-            echo "=========================================="
-            echo "MERGE COMPLETE"
-            echo "=========================================="
-            echo "Shards merged: 0"
-            exit 0
-          fi
-
           # Verify target directory exists
           if [ ! -d "browser_tests" ]; then
             echo "::error::Target directory 'browser_tests' does not exist"

.i18nrc.cjs

@@ -10,7 +10,7 @@ module.exports = defineConfig({
   entryLocale: 'en',
   output: 'src/locales',
   outputLocales: ['zh', 'zh-TW', 'ru', 'ja', 'ko', 'fr', 'es', 'ar', 'tr', 'pt-BR'],
-  reference: `Special names to keep untranslated: flux, photomaker, clip, vae, cfg, stable audio, stable cascade, stable zero, controlnet, lora, HiDream, Civitai, Hugging Face.
+  reference: `Special names to keep untranslated: flux, photomaker, clip, vae, cfg, stable audio, stable cascade, stable zero, controlnet, lora, HiDream.
   'latent' is the short form of 'latent space'.
   'mask' is in the context of image processing.
   

.storybook/main.ts

@@ -69,32 +69,9 @@ const config: StorybookConfig = {
         allowedHosts: true
       },
       resolve: {
-        alias: [
-          {
-            find: '@/composables/queue/useJobList',
-            replacement: process.cwd() + '/src/storybook/mocks/useJobList.ts'
-          },
-          {
-            find: '@/composables/queue/useJobActions',
-            replacement: process.cwd() + '/src/storybook/mocks/useJobActions.ts'
-          },
-          {
-            find: '@/utils/formatUtil',
-            replacement:
-              process.cwd() +
-              '/packages/shared-frontend-utils/src/formatUtil.ts'
-          },
-          {
-            find: '@/utils/networkUtil',
-            replacement:
-              process.cwd() +
-              '/packages/shared-frontend-utils/src/networkUtil.ts'
-          },
-          {
-            find: '@',
-            replacement: process.cwd() + '/src'
-          }
-        ]
+        alias: {
+          '@': process.cwd() + '/src'
+        }
       },
       esbuild: {
         // Prevent minification of identifiers to preserve _sfc_main

browser_tests/fixtures/ComfyPage.ts

@@ -110,18 +110,16 @@ type KeysOfType<T, Match> = {
 }[keyof T]
 
 class ConfirmDialog {
-  private readonly root: Locator
   public readonly delete: Locator
   public readonly overwrite: Locator
   public readonly reject: Locator
   public readonly confirm: Locator
 
   constructor(public readonly page: Page) {
-    this.root = page.getByRole('dialog')
-    this.delete = this.root.getByRole('button', { name: 'Delete' })
-    this.overwrite = this.root.getByRole('button', { name: 'Overwrite' })
-    this.reject = this.root.getByRole('button', { name: 'Cancel' })
-    this.confirm = this.root.getByRole('button', { name: 'Confirm' })
+    this.delete = page.locator('button.p-button[aria-label="Delete"]')
+    this.overwrite = page.locator('button.p-button[aria-label="Overwrite"]')
+    this.reject = page.locator('button.p-button[aria-label="Cancel"]')
+    this.confirm = page.locator('button.p-button[aria-label="Confirm"]')
   }
 
   async click(locator: KeysOfType<ConfirmDialog, Locator>) {

browser_tests/fixtures/components/ComfyNodeSearchBox.ts

@@ -30,7 +30,7 @@ export class ComfyNodeSearchFilterSelectionPanel {
   async addFilter(filterValue: string, filterType: string) {
     await this.selectFilterType(filterType)
     await this.selectFilterValue(filterValue)
-    await this.page.locator('button:has-text("Add")').click()
+    await this.page.locator('.p-button-label:has-text("Add")').click()
   }
 }
 

browser_tests/helpers/actionbar.ts

@@ -1,6 +1,6 @@
 import type { Locator, Page } from '@playwright/test'
 
-import type { AutoQueueMode } from '../../src/queue/stores/queueStore'
+import type { AutoQueueMode } from '../../src/stores/queueStore'
 
 export class ComfyActionbar {
   public readonly root: Locator

browser_tests/tests/dialog.spec.ts

@@ -85,11 +85,11 @@ test.describe('Missing models warning', () => {
     const missingModelsWarning = comfyPage.page.locator('.comfy-missing-models')
     await expect(missingModelsWarning).toBeVisible()
 
-    const downloadButton = missingModelsWarning.getByText('Download')
+    const downloadButton = missingModelsWarning.getByLabel('Download')
     await expect(downloadButton).toBeVisible()
 
     // Check that the copy URL button is also visible for Desktop environment
-    const copyUrlButton = missingModelsWarning.getByText('Copy URL')
+    const copyUrlButton = missingModelsWarning.getByLabel('Copy URL')
     await expect(copyUrlButton).toBeVisible()
   })
 
@@ -102,11 +102,11 @@ test.describe('Missing models warning', () => {
     const missingModelsWarning = comfyPage.page.locator('.comfy-missing-models')
     await expect(missingModelsWarning).toBeVisible()
 
-    const downloadButton = missingModelsWarning.getByText('Download')
+    const downloadButton = missingModelsWarning.getByLabel('Download')
     await expect(downloadButton).toBeVisible()
 
     // Check that the copy URL button is also visible for Desktop environment
-    const copyUrlButton = missingModelsWarning.getByText('Copy URL')
+    const copyUrlButton = missingModelsWarning.getByLabel('Copy URL')
     await expect(copyUrlButton).toBeVisible()
   })
 
@@ -176,7 +176,7 @@ test.describe('Missing models warning', () => {
     const missingModelsWarning = comfyPage.page.locator('.comfy-missing-models')
     await expect(missingModelsWarning).toBeVisible()
 
-    const downloadButton = comfyPage.page.getByText('Download')
+    const downloadButton = comfyPage.page.getByLabel('Download')
     await expect(downloadButton).toBeVisible()
     const downloadPromise = comfyPage.page.waitForEvent('download')
     await downloadButton.click()
@@ -290,7 +290,7 @@ test.describe('Settings', () => {
     // Save keybinding
     const saveButton = comfyPage.page
       .getByLabel('New Blank Workflow')
-      .getByText('Save')
+      .getByLabel('Save')
     await saveButton.click()
 
     const request = await requestPromise

browser_tests/tests/nodeHelp.spec.ts

@@ -123,7 +123,8 @@ test.describe('Node Help', () => {
       await expect(helpPage).toContainText('KSampler')
 
       // Click the back button - use a more specific selector
-      const backButton = helpPage.getByRole('button', { name: /back/i })
+      const backButton = comfyPage.page.locator('button:has(.pi-arrow-left)')
+      await expect(backButton).toBeVisible()
       await backButton.click()
 
       // Verify that we're back to the node library view

browser_tests/tests/propertiesPanel/propertiesPanelPosition.spec.ts

@@ -1,86 +0,0 @@
-import { expect } from '@playwright/test'
-
-import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
-
-test.describe('Properties panel position', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    // Open a sidebar tab to ensure sidebar is visible
-    await comfyPage.menu.nodeLibraryTab.open()
-    await comfyPage.actionbar.propertiesButton.click()
-  })
-
-  test('positions on the right when sidebar is on the left', async ({
-    comfyPage
-  }) => {
-    await comfyPage.setSetting('Comfy.Sidebar.Location', 'left')
-    await comfyPage.nextFrame()
-
-    const propertiesPanel = comfyPage.page.getByTestId('properties-panel')
-    const sidebar = comfyPage.page.locator('.side-bar-panel').first()
-
-    await expect(propertiesPanel).toBeVisible()
-    await expect(sidebar).toBeVisible()
-
-    const propsBoundingBox = await propertiesPanel.boundingBox()
-    const sidebarBoundingBox = await sidebar.boundingBox()
-
-    expect(propsBoundingBox).not.toBeNull()
-    expect(sidebarBoundingBox).not.toBeNull()
-
-    // Properties panel should be to the right of the sidebar
-    expect(propsBoundingBox!.x).toBeGreaterThan(
-      sidebarBoundingBox!.x + sidebarBoundingBox!.width
-    )
-  })
-
-  test('positions on the left when sidebar is on the right', async ({
-    comfyPage
-  }) => {
-    await comfyPage.setSetting('Comfy.Sidebar.Location', 'right')
-    await comfyPage.nextFrame()
-
-    const propertiesPanel = comfyPage.page.getByTestId('properties-panel')
-    const sidebar = comfyPage.page.locator('.side-bar-panel').first()
-
-    await expect(propertiesPanel).toBeVisible()
-    await expect(sidebar).toBeVisible()
-
-    const propsBoundingBox = await propertiesPanel.boundingBox()
-    const sidebarBoundingBox = await sidebar.boundingBox()
-
-    expect(propsBoundingBox).not.toBeNull()
-    expect(sidebarBoundingBox).not.toBeNull()
-
-    // Properties panel should be to the left of the sidebar
-    expect(propsBoundingBox!.x + propsBoundingBox!.width).toBeLessThan(
-      sidebarBoundingBox!.x
-    )
-  })
-
-  test('close button icon updates based on sidebar location', async ({
-    comfyPage
-  }) => {
-    const propertiesPanel = comfyPage.page.getByTestId('properties-panel')
-
-    // When sidebar is on the left, panel is on the right
-    await comfyPage.setSetting('Comfy.Sidebar.Location', 'left')
-    await comfyPage.nextFrame()
-
-    await expect(propertiesPanel).toBeVisible()
-    const closeButtonLeft = propertiesPanel
-      .locator('button[aria-pressed]')
-      .locator('i')
-    await expect(closeButtonLeft).toBeVisible()
-    await expect(closeButtonLeft).toHaveClass(/lucide--panel-right/)
-
-    // When sidebar is on the right, panel is on the left
-    await comfyPage.setSetting('Comfy.Sidebar.Location', 'right')
-    await comfyPage.nextFrame()
-
-    const closeButtonRight = propertiesPanel
-      .locator('button[aria-pressed]')
-      .locator('i')
-    await expect(closeButtonRight).toBeVisible()
-    await expect(closeButtonRight).toHaveClass(/lucide--panel-left/)
-  })
-})

browser_tests/tests/sidebar/nodeLibrary.spec.ts

@@ -100,7 +100,7 @@ test.describe('Node library sidebar', () => {
     const tab = comfyPage.menu.nodeLibraryTab
 
     await tab.getFolder('foo').click({ button: 'right' })
-    await comfyPage.page.getByRole('menuitem', { name: 'New Folder' }).click()
+    await comfyPage.page.getByLabel('New Folder').click()
     const textInput = comfyPage.page.locator('.editable-text input')
     await textInput.waitFor({ state: 'visible' })
     await textInput.fill('bar')
@@ -203,7 +203,7 @@ test.describe('Node library sidebar', () => {
     await comfyPage.page
       .locator('.color-field .p-selectbutton > *:nth-child(2)')
       .click()
-    await comfyPage.page.getByRole('button', { name: 'Confirm' }).click()
+    await comfyPage.page.getByLabel('Confirm').click()
     await comfyPage.nextFrame()
     expect(
       await comfyPage.getSetting('Comfy.NodeLibrary.BookmarksCustomization')
@@ -223,7 +223,7 @@ test.describe('Node library sidebar', () => {
     await comfyPage.page
       .locator('.icon-field .p-selectbutton > *:nth-child(2)')
       .click()
-    await comfyPage.page.getByRole('button', { name: 'Confirm' }).click()
+    await comfyPage.page.getByLabel('Confirm').click()
     await comfyPage.nextFrame()
     expect(
       await comfyPage.getSetting('Comfy.NodeLibrary.BookmarksCustomization')
@@ -261,7 +261,7 @@ test.describe('Node library sidebar', () => {
     await comfyPage.page
       .locator('.icon-field .p-selectbutton > *:nth-child(2)')
       .click()
-    await comfyPage.page.getByRole('button', { name: 'Confirm' }).click()
+    await comfyPage.page.getByLabel('Confirm').click()
     await comfyPage.nextFrame()
 
     // Verify the color selection is saved

browser_tests/tests/templates.spec.ts

@@ -109,27 +109,22 @@ test.describe('Templates', () => {
   })
 
   test('Uses proper locale files for templates', async ({ comfyPage }) => {
+    // Load the templates dialog and wait for the French index file request
+    const requestPromise = comfyPage.page.waitForRequest(
+      '**/templates/index.fr.json'
+    )
+
+    // Set locale to French before opening templates
     await comfyPage.setSetting('Comfy.Locale', 'fr')
 
     await comfyPage.executeCommand('Comfy.BrowseTemplates')
 
-    const dialog = comfyPage.page.getByRole('dialog').filter({
-      has: comfyPage.page.getByRole('heading', { name: 'Modèles', exact: true })
-    })
-    await expect(dialog).toBeVisible()
+    const request = await requestPromise
 
-    // Validate that French-localized strings from the templates index are rendered
-    await expect(
-      dialog.getByRole('heading', { name: 'Modèles', exact: true })
-    ).toBeVisible()
-    await expect(
-      dialog.getByRole('button', { name: 'Tous les modèles', exact: true })
-    ).toBeVisible()
+    // Verify French index was requested
+    expect(request.url()).toContain('templates/index.fr.json')
 
-    // Ensure the English fallback copy is not shown anywhere
-    await expect(
-      comfyPage.page.getByText('All Templates', { exact: true })
-    ).toHaveCount(0)
+    await expect(comfyPage.templates.content).toBeVisible()
   })
 
   test('Falls back to English templates when locale file not found', async ({

knip.config.ts

@@ -66,8 +66,7 @@ const config: KnipConfig = {
   },
   tags: [
     '-knipIgnoreUnusedButUsedByCustomNodes',
-    '-knipIgnoreUnusedButUsedByVueNodesBranch',
-    '-knipIgnoreUnusedButUsedByStorybook'
+    '-knipIgnoreUnusedButUsedByVueNodesBranch'
   ]
 }
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comfyorg/comfyui-frontend",
   "private": true,
-  "version": "1.37.1",
+  "version": "1.36.8",
   "type": "module",
   "repository": "https://github.com/Comfy-Org/ComfyUI_frontend",
   "homepage": "https://comfy.org",

pnpm-workspace.yaml

@@ -15,7 +15,7 @@ catalog:
   '@nx/playwright': 22.2.6
   '@nx/storybook': 22.2.4
   '@nx/vite': 22.2.6
-  '@pinia/testing': ^1.0.3
+  '@pinia/testing': ^0.1.5
   '@playwright/test': ^1.57.0
   '@prettier/plugin-oxc': ^0.1.3
   '@primeuix/forms': 0.0.2
@@ -26,7 +26,7 @@ catalog:
   '@primevue/icons': 4.2.5
   '@primevue/themes': ^4.2.5
   '@sentry/vite-plugin': ^4.6.0
-  '@sentry/vue': ^10.32.1
+  '@sentry/vue': ^8.48.0
   '@sparkjsdev/spark': ^0.1.10
   '@storybook/addon-docs': ^10.1.9
   '@storybook/vue3': ^10.1.9
@@ -39,8 +39,8 @@ catalog:
   '@types/semver': ^7.7.0
   '@types/three': ^0.169.0
   '@vitejs/plugin-vue': ^6.0.0
-  '@vitest/coverage-v8': ^4.0.16
-  '@vitest/ui': ^4.0.16
+  '@vitest/coverage-v8': ^3.2.4
+  '@vitest/ui': ^3.2.0
   '@vue/test-utils': ^2.4.6
   '@vueuse/core': ^11.0.0
   '@vueuse/integrations': ^13.9.0
@@ -59,11 +59,11 @@ catalog:
   eslint-plugin-unused-imports: ^4.3.0
   eslint-plugin-vue: ^10.6.2
   firebase: ^11.6.0
-  globals: ^16.5.0
-  happy-dom: ^20.0.11
+  globals: ^15.9.0
+  happy-dom: ^15.11.0
   husky: ^9.1.7
   jiti: 2.6.1
-  jsdom: ^27.4.0
+  jsdom: ^26.1.0
   knip: ^5.75.1
   lint-staged: ^16.2.7
   markdown-table: ^3.0.4
@@ -72,7 +72,7 @@ catalog:
   oxlint: ^1.33.0
   oxlint-tsgolint: ^0.9.1
   picocolors: ^1.1.1
-  pinia: ^3.0.4
+  pinia: ^2.1.7
   postcss-html: ^1.8.0
   prettier: ^3.7.4
   pretty-bytes: ^7.1.0
@@ -96,13 +96,13 @@ catalog:
   vite-plugin-dts: ^4.5.4
   vite-plugin-html: ^3.2.2
   vite-plugin-vue-devtools: ^8.0.0
-  vitest: ^4.0.16
+  vitest: ^3.2.4
   vue: ^3.5.13
-  vue-component-type-helpers: ^3.2.1
+  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.2.1
+  vue-tsc: ^3.1.8
   vuefire: ^3.2.1
   yjs: ^13.6.27
   zod: ^3.23.8

scripts/cicd/extract-playwright-counts.ts

@@ -10,8 +10,56 @@ interface TestStats {
   finished?: number
 }
 
+interface TestLocation {
+  file: string
+  line: number
+  column: number
+}
+
+interface TestAttachment {
+  name: string
+  path?: string
+  contentType: string
+}
+
+interface TestResult {
+  status: string
+  duration: number
+  errors?: Array<{ message?: string; stack?: string }>
+  attachments?: TestAttachment[]
+}
+
+interface Test {
+  title: string
+  location?: TestLocation
+  results?: TestResult[]
+}
+
+interface Suite {
+  title: string
+  suites?: Suite[]
+  tests?: Test[]
+}
+
 interface ReportData {
   stats?: TestStats
+  suites?: Suite[]
+}
+
+interface FailingTest {
+  name: string
+  filePath: string
+  line: number
+  error: string
+  tracePath?: string
+  failureType?: 'screenshot' | 'expectation' | 'timeout' | 'other'
+}
+
+interface FailureTypeCounts {
+  screenshot: number
+  expectation: number
+  timeout: number
+  other: number
 }
 
 interface TestCounts {
@@ -20,12 +68,106 @@ interface TestCounts {
   flaky: number
   skipped: number
   total: number
+  failingTests?: FailingTest[]
+  failureTypes?: FailureTypeCounts
+}
+
+/**
+ * Categorize the failure type based on error message
+ */
+function categorizeFailureType(
+  error: string,
+  status: string
+): 'screenshot' | 'expectation' | 'timeout' | 'other' {
+  if (status === 'timedOut') {
+    return 'timeout'
+  }
+
+  const errorLower = error.toLowerCase()
+
+  // Screenshot-related errors
+  if (
+    errorLower.includes('screenshot') ||
+    errorLower.includes('snapshot') ||
+    errorLower.includes('toHaveScreenshot') ||
+    errorLower.includes('image comparison') ||
+    errorLower.includes('pixel') ||
+    errorLower.includes('visual')
+  ) {
+    return 'screenshot'
+  }
+
+  // Expectation errors
+  if (
+    errorLower.includes('expect') ||
+    errorLower.includes('assertion') ||
+    errorLower.includes('toEqual') ||
+    errorLower.includes('toBe') ||
+    errorLower.includes('toContain') ||
+    errorLower.includes('toHave') ||
+    errorLower.includes('toMatch')
+  ) {
+    return 'expectation'
+  }
+
+  return 'other'
+}
+
+/**
+ * Recursively extract failing tests from suite structure
+ */
+function extractFailingTests(suite: Suite, failingTests: FailingTest[]): void {
+  // Process tests in this suite
+  if (suite.tests) {
+    for (const test of suite.tests) {
+      if (!test.results) continue
+
+      for (const result of test.results) {
+        if (result.status === 'failed' || result.status === 'timedOut') {
+          const error =
+            result.errors?.[0]?.message ||
+            result.errors?.[0]?.stack ||
+            'Test failed'
+
+          // Find trace attachment
+          let tracePath: string | undefined
+          if (result.attachments) {
+            const traceAttachment = result.attachments.find(
+              (att) =>
+                att.name === 'trace' || att.contentType === 'application/zip'
+            )
+            if (traceAttachment?.path) {
+              tracePath = traceAttachment.path
+            }
+          }
+
+          const failureType = categorizeFailureType(error, result.status)
+
+          failingTests.push({
+            name: test.title,
+            filePath: test.location?.file || 'unknown',
+            line: test.location?.line || 0,
+            error: error.split('\n')[0], // First line of error
+            tracePath,
+            failureType
+          })
+        }
+      }
+    }
+  }
+
+  // Recursively process nested suites
+  if (suite.suites) {
+    for (const nestedSuite of suite.suites) {
+      extractFailingTests(nestedSuite, failingTests)
+    }
+  }
 }
 
 /**
  * Extract test counts from Playwright HTML report
  * @param reportDir - Path to the playwright-report directory
- * @returns Test counts { passed, failed, flaky, skipped, total }
+ * @returns Test counts { passed, failed, flaky, skipped, total, failingTests }
  */
 function extractTestCounts(reportDir: string): TestCounts {
   const counts: TestCounts = {
@@ -33,7 +175,14 @@ function extractTestCounts(reportDir: string): TestCounts {
     failed: 0,
     flaky: 0,
     skipped: 0,
-    total: 0
+    total: 0,
+    failingTests: [],
+    failureTypes: {
+      screenshot: 0,
+      expectation: 0,
+      timeout: 0,
+      other: 0
+    }
   }
 
   try {
@@ -54,6 +203,22 @@ function extractTestCounts(reportDir: string): TestCounts {
         counts.failed = stats.unexpected || 0
         counts.flaky = stats.flaky || 0
         counts.skipped = stats.skipped || 0
+
+        // Extract failing test details
+        if (reportJson.suites) {
+          for (const suite of reportJson.suites) {
+            extractFailingTests(suite, counts.failingTests)
+          }
+        }
+
+        // Count failure types
+        if (counts.failingTests) {
+          for (const test of counts.failingTests) {
+            const type = test.failureType || 'other'
+            counts.failureTypes![type]++
+          }
+        }
+
         return counts
       }
     }
@@ -86,6 +251,22 @@ function extractTestCounts(reportDir: string): TestCounts {
             counts.failed = stats.unexpected || 0
             counts.flaky = stats.flaky || 0
             counts.skipped = stats.skipped || 0
+
+            // Extract failing test details
+            if (reportData.suites) {
+              for (const suite of reportData.suites) {
+                extractFailingTests(suite, counts.failingTests!)
+              }
+            }
+
+            // Count failure types
+            if (counts.failingTests) {
+              for (const test of counts.failingTests) {
+                const type = test.failureType || 'other'
+                counts.failureTypes![type]++
+              }
+            }
+
             return counts
           }
         } catch (e) {
@@ -113,6 +294,22 @@ function extractTestCounts(reportDir: string): TestCounts {
             counts.failed = stats.unexpected || 0
             counts.flaky = stats.flaky || 0
             counts.skipped = stats.skipped || 0
+
+            // Extract failing test details
+            if (reportData.suites) {
+              for (const suite of reportData.suites) {
+                extractFailingTests(suite, counts.failingTests!)
+              }
+            }
+
+            // Count failure types
+            if (counts.failingTests) {
+              for (const test of counts.failingTests) {
+                const type = test.failureType || 'other'
+                counts.failureTypes![type]++
+              }
+            }
+
             return counts
           }
         } catch (e) {
@@ -161,7 +358,7 @@ function extractTestCounts(reportDir: string): TestCounts {
       }
     }
   } catch (error) {
-    console.error(`Error reading report from ${reportDir}:`, error)
+    process.stderr.write(`Error reading report from ${reportDir}: ${error}\n`)
   }
 
   return counts
@@ -171,13 +368,15 @@ function extractTestCounts(reportDir: string): TestCounts {
 const reportDir = process.argv[2]
 
 if (!reportDir) {
-  console.error('Usage: extract-playwright-counts.ts <report-directory>')
+  process.stderr.write(
+    'Usage: extract-playwright-counts.ts <report-directory>\n'
+  )
   process.exit(1)
 }
 
 const counts = extractTestCounts(reportDir)
 
 // Output as JSON for easy parsing in shell script
-console.log(JSON.stringify(counts))
+process.stdout.write(JSON.stringify(counts) + '\n')
 
 export { extractTestCounts }

scripts/cicd/pr-playwright-deploy-and-comment.sh

@@ -252,6 +252,10 @@ else
     total_flaky=0
     total_skipped=0
     total_tests=0
+    total_screenshot_failures=0
+    total_expectation_failures=0
+    total_timeout_failures=0
+    total_other_failures=0
     
     # Parse counts and calculate totals
     IFS='|' read -r -a counts_array <<< "$all_counts"
@@ -265,6 +269,10 @@ else
                 flaky=$(echo "$counts_json" | jq -r '.flaky // 0')
                 skipped=$(echo "$counts_json" | jq -r '.skipped // 0')
                 total=$(echo "$counts_json" | jq -r '.total // 0')
+                screenshot=$(echo "$counts_json" | jq -r '.failureTypes.screenshot // 0')
+                expectation=$(echo "$counts_json" | jq -r '.failureTypes.expectation // 0')
+                timeout=$(echo "$counts_json" | jq -r '.failureTypes.timeout // 0')
+                other=$(echo "$counts_json" | jq -r '.failureTypes.other // 0')
             else
                 # Fallback parsing without jq
                 passed=$(echo "$counts_json" | sed -n 's/.*"passed":\([0-9]*\).*/\1/p')
@@ -272,13 +280,21 @@ else
                 flaky=$(echo "$counts_json" | sed -n 's/.*"flaky":\([0-9]*\).*/\1/p')
                 skipped=$(echo "$counts_json" | sed -n 's/.*"skipped":\([0-9]*\).*/\1/p')
                 total=$(echo "$counts_json" | sed -n 's/.*"total":\([0-9]*\).*/\1/p')
+                screenshot=0
+                expectation=0
+                timeout=0
+                other=0
             fi
-            
+
             total_passed=$((total_passed + ${passed:-0}))
             total_failed=$((total_failed + ${failed:-0}))
             total_flaky=$((total_flaky + ${flaky:-0}))
             total_skipped=$((total_skipped + ${skipped:-0}))
             total_tests=$((total_tests + ${total:-0}))
+            total_screenshot_failures=$((total_screenshot_failures + ${screenshot:-0}))
+            total_expectation_failures=$((total_expectation_failures + ${expectation:-0}))
+            total_timeout_failures=$((total_timeout_failures + ${timeout:-0}))
+            total_other_failures=$((total_other_failures + ${other:-0}))
         fi
     done
     unset IFS
@@ -302,35 +318,98 @@ else
     comment="$COMMENT_MARKER
 ## 🎭 Playwright Test Results
 
-$status_icon **$status_text**
-
-⏰ Completed at: $(date -u '+%m/%d/%Y, %I:%M:%S %p') UTC"
+$status_icon **$status_text** • ⏰ $(date -u '+%m/%d/%Y, %I:%M:%S %p') UTC"
 
     # Add summary counts if we have test data
     if [ $total_tests -gt 0 ]; then
         comment="$comment
 
-### 📈 Summary
-- **Total Tests:** $total_tests
-- **Passed:** $total_passed ✅
-- **Failed:** $total_failed $([ $total_failed -gt 0 ] && echo '❌' || echo '')
-- **Flaky:** $total_flaky $([ $total_flaky -gt 0 ] && echo '⚠️' || echo '')
-- **Skipped:** $total_skipped $([ $total_skipped -gt 0 ] && echo '⏭️' || echo '')"
+**$total_passed** ✅ • **$total_failed** $([ $total_failed -gt 0 ] && echo '❌' || echo '✅') • **$total_flaky** $([ $total_flaky -gt 0 ] && echo '⚠️' || echo '✅') • **$total_skipped** ⏭️ • **$total_tests** total"
+
+        # Add failure breakdown if there are failures
+        if [ $total_failed -gt 0 ]; then
+            comment="$comment
+
+**Failure Breakdown:** 📸 $total_screenshot_failures screenshot • ✓ $total_expectation_failures expectation • ⏱️ $total_timeout_failures timeout • ❓ $total_other_failures other"
+        fi
     fi
     
-    comment="$comment
-
-### 📊 Test Reports by Browser"
-    
-    # Add browser results with individual counts
+    # Collect all failing tests across browsers
+    all_failing_tests=""
     i=0
     IFS=' ' read -r -a browser_array <<< "$BROWSERS"
+    for counts_json in "${counts_array[@]}"; do
+        [ -z "$counts_json" ] && { i=$((i + 1)); continue; }
+        browser="${browser_array[$i]:-}"
+
+        if [ "$counts_json" != "{}" ] && [ -n "$counts_json" ]; then
+            if command -v jq > /dev/null 2>&1; then
+                failing_tests=$(echo "$counts_json" | jq -r '.failingTests // [] | .[]' 2>/dev/null || echo "")
+                if [ -n "$failing_tests" ]; then
+                    # Process each failing test
+                    while IFS= read -r test_json; do
+                        [ -z "$test_json" ] && continue
+                        test_name=$(echo "$test_json" | jq -r '.name // "Unknown test"')
+                        test_file=$(echo "$test_json" | jq -r '.filePath // "unknown"')
+                        test_line=$(echo "$test_json" | jq -r '.line // 0')
+                        trace_path=$(echo "$test_json" | jq -r '.tracePath // ""')
+
+                        # Build GitHub source link (assumes ComfyUI_frontend repo)
+                        source_link="https://github.com/$GITHUB_REPOSITORY/blob/$BRANCH_NAME/$test_file#L$test_line"
+
+                        # Build trace viewer link if trace exists
+                        if [ -n "$trace_path" ] && [ "$trace_path" != "null" ]; then
+                            # Extract trace filename from path
+                            trace_file=$(basename "$trace_path")
+                            url="${url_array[$i]:-}"
+                            if [ "$url" != "failed" ] && [ -n "$url" ]; then
+                                base_url="${url%/index.html}"
+                                trace_viewer_link="${base_url}/trace/?trace=${base_url}/data/${trace_file}"
+                            fi
+                        fi
+
+                        # Format failing test entry
+                        if [ -n "$all_failing_tests" ]; then
+                            all_failing_tests="$all_failing_tests
+"
+                        fi
+
+                        if [ -n "$trace_viewer_link" ]; then
+                            all_failing_tests="${all_failing_tests}- **[$test_name]($source_link)** \`$browser\` • [View trace]($trace_viewer_link)"
+                        else
+                            all_failing_tests="${all_failing_tests}- **[$test_name]($source_link)** \`$browser\`"
+                        fi
+                    done < <(echo "$counts_json" | jq -c '.failingTests[]?' 2>/dev/null || echo "")
+                fi
+            fi
+        fi
+        i=$((i + 1))
+    done
+    unset IFS
+
+    # Add failing tests section if there are failures
+    if [ $total_failed -gt 0 ] && [ -n "$all_failing_tests" ]; then
+        comment="$comment
+
+### ❌ Failed Tests
+$all_failing_tests"
+    fi
+
+    comment="$comment
+
+<details>
+<summary>📊 Test Reports by Browser</summary>
+
+"
+
+    # Add browser results with individual counts
+    i=0
     IFS=' ' read -r -a url_array <<< "$urls"
     for counts_json in "${counts_array[@]}"; do
         [ -z "$counts_json" ] && { i=$((i + 1)); continue; }
         browser="${browser_array[$i]:-}"
         url="${url_array[$i]:-}"
-        
+
         if [ "$url" != "failed" ] && [ -n "$url" ]; then
             # Parse individual browser counts
             if [ "$counts_json" != "{}" ] && [ -n "$counts_json" ]; then
@@ -347,7 +426,7 @@ $status_icon **$status_text**
                     b_skipped=$(echo "$counts_json" | sed -n 's/.*"skipped":\([0-9]*\).*/\1/p')
                     b_total=$(echo "$counts_json" | sed -n 's/.*"total":\([0-9]*\).*/\1/p')
                 fi
-                
+
                 if [ -n "$b_total" ] && [ "$b_total" != "0" ]; then
                     counts_str=" • ✅ $b_passed / ❌ $b_failed / ⚠️ $b_flaky / ⏭️ $b_skipped"
                 else
@@ -356,21 +435,20 @@ $status_icon **$status_text**
             else
                 counts_str=""
             fi
-            
+
             comment="$comment
-- ✅ **${browser}**: [View Report](${url})${counts_str}"
+- **${browser}**: [View Report](${url})${counts_str}"
         else
             comment="$comment
-- ❌ **${browser}**: Deployment failed"
+- **${browser}**: Deployment failed"
         fi
         i=$((i + 1))
     done
     unset IFS
-    
+
     comment="$comment
 
----
-🎉 Click on the links above to view detailed test results for each browser configuration."
+</details>"
     
     post_comment "$comment"
 fi

src/components/LiteGraphCanvasSplitterOverlay.vue

@@ -22,38 +22,29 @@
         state-storage="local"
         @resizestart="onResizestart"
       >
-        <!-- First panel: sidebar when left, properties when right -->
         <SplitterPanel
-          v-if="
-            !focusMode && (sidebarLocation === 'left' || rightSidePanelVisible)
-          "
+          v-if="sidebarLocation === 'left' && !focusMode"
           :class="
-            sidebarLocation === 'left'
-              ? cn(
-                  'side-bar-panel bg-comfy-menu-bg pointer-events-auto',
-                  sidebarPanelVisible && 'min-w-78'
-                )
-              : 'bg-comfy-menu-bg pointer-events-auto'
+            cn(
+              'side-bar-panel bg-comfy-menu-bg pointer-events-auto',
+              sidebarPanelVisible && 'min-w-78'
+            )
           "
-          :min-size="sidebarLocation === 'left' ? 10 : 15"
+          :min-size="10"
           :size="20"
-          :style="firstPanelStyle"
-          :role="sidebarLocation === 'left' ? 'complementary' : undefined"
-          :aria-label="
-            sidebarLocation === 'left' ? t('sideToolbar.sidebar') : undefined
-          "
+          :style="{
+            display:
+              sidebarPanelVisible && sidebarLocation === 'left'
+                ? 'flex'
+                : 'none'
+          }"
         >
           <slot
-            v-if="sidebarLocation === 'left' && sidebarPanelVisible"
+            v-if="sidebarPanelVisible && sidebarLocation === 'left'"
             name="side-bar-panel"
           />
-          <slot
-            v-else-if="sidebarLocation === 'right'"
-            name="right-side-panel"
-          />
         </SplitterPanel>
 
-        <!-- Main panel (always present) -->
         <SplitterPanel :size="80" class="flex flex-col">
           <slot name="topmenu" :sidebar-panel-visible />
 
@@ -82,33 +73,38 @@
           </Splitter>
         </SplitterPanel>
 
-        <!-- Last panel: properties when left, sidebar when right -->
         <SplitterPanel
-          v-if="
-            !focusMode && (sidebarLocation === 'right' || rightSidePanelVisible)
-          "
+          v-if="sidebarLocation === 'right' && !focusMode"
           :class="
-            sidebarLocation === 'right'
-              ? cn(
-                  'side-bar-panel bg-comfy-menu-bg pointer-events-auto',
-                  sidebarPanelVisible && 'min-w-78'
-                )
-              : 'bg-comfy-menu-bg pointer-events-auto'
+            cn(
+              'side-bar-panel pointer-events-auto',
+              sidebarPanelVisible && 'min-w-78'
+            )
           "
-          :min-size="sidebarLocation === 'right' ? 10 : 15"
+          :min-size="10"
           :size="20"
-          :style="lastPanelStyle"
-          :role="sidebarLocation === 'right' ? 'complementary' : undefined"
-          :aria-label="
-            sidebarLocation === 'right' ? t('sideToolbar.sidebar') : undefined
-          "
+          :style="{
+            display:
+              sidebarPanelVisible && sidebarLocation === 'right'
+                ? 'flex'
+                : 'none'
+          }"
         >
-          <slot v-if="sidebarLocation === 'left'" name="right-side-panel" />
           <slot
-            v-else-if="sidebarLocation === 'right' && sidebarPanelVisible"
+            v-if="sidebarPanelVisible && sidebarLocation === 'right'"
             name="side-bar-panel"
           />
         </SplitterPanel>
+
+        <!-- Right Side Panel - independent of sidebar -->
+        <SplitterPanel
+          v-if="rightSidePanelVisible && !focusMode"
+          class="bg-comfy-menu-bg pointer-events-auto"
+          :min-size="15"
+          :size="20"
+        >
+          <slot name="right-side-panel" />
+        </SplitterPanel>
       </Splitter>
     </div>
   </div>
@@ -121,7 +117,6 @@ import Splitter from 'primevue/splitter'
 import type { SplitterResizeStartEvent } from 'primevue/splitter'
 import SplitterPanel from 'primevue/splitterpanel'
 import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
 
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useBottomPanelStore } from '@/stores/workspace/bottomPanelStore'
@@ -133,7 +128,6 @@ const workspaceStore = useWorkspaceStore()
 const settingStore = useSettingStore()
 const rightSidePanelStore = useRightSidePanelStore()
 const sidebarTabStore = useSidebarTabStore()
-const { t } = useI18n()
 const sidebarLocation = computed<'left' | 'right'>(() =>
   settingStore.get('Comfy.Sidebar.Location')
 )
@@ -165,25 +159,12 @@ function onResizestart({ originalEvent: event }: SplitterResizeStartEvent) {
 }
 
 /*
- * Force refresh the splitter when right panel visibility or sidebar location changes
- * to recalculate the width and panel order
+ * Force refresh the splitter when right panel visibility changes to recalculate the width
  */
 const splitterRefreshKey = computed(() => {
-  return `main-splitter${rightSidePanelVisible.value ? '-with-right-panel' : ''}-${sidebarLocation.value}`
-})
-
-const firstPanelStyle = computed(() => {
-  if (sidebarLocation.value === 'left') {
-    return { display: sidebarPanelVisible.value ? 'flex' : 'none' }
-  }
-  return undefined
-})
-
-const lastPanelStyle = computed(() => {
-  if (sidebarLocation.value === 'right') {
-    return { display: sidebarPanelVisible.value ? 'flex' : 'none' }
-  }
-  return undefined
+  return rightSidePanelVisible.value
+    ? 'main-splitter-with-right-panel'
+    : 'main-splitter'
 })
 </script>
 

src/components/MenuHamburger.vue

@@ -5,23 +5,23 @@
   >
     <Button
       v-tooltip="{ value: $t('menu.showMenu'), showDelay: 300 }"
-      variant="muted-textonly"
-      size="lg"
+      icon="pi pi-bars"
+      severity="secondary"
+      text
+      size="large"
       :aria-label="$t('menu.showMenu')"
       aria-live="assertive"
       @click="exitFocusMode"
       @contextmenu="showNativeSystemMenu"
-    >
-      <i class="pi pi-bars" />
-    </Button>
+    />
     <div class="window-actions-spacer" />
   </div>
 </template>
 
 <script setup lang="ts">
+import Button from 'primevue/button'
 import { watchEffect } from 'vue'
 
-import Button from '@/components/ui/button/Button.vue'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { app } from '@/scripts/app'
 import { useWorkspaceStore } from '@/stores/workspaceStore'

src/components/TopMenuSection.vue

@@ -83,7 +83,7 @@ import { useI18n } from 'vue-i18n'
 
 import ComfyActionbar from '@/components/actionbar/ComfyActionbar.vue'
 import SubgraphBreadcrumb from '@/components/breadcrumb/SubgraphBreadcrumb.vue'
-import QueueProgressOverlay from '@/queue/components/QueueProgressOverlay.vue'
+import QueueProgressOverlay from '@/components/queue/QueueProgressOverlay.vue'
 import ActionBarButtons from '@/components/topbar/ActionBarButtons.vue'
 import CurrentUserButton from '@/components/topbar/CurrentUserButton.vue'
 import LoginButton from '@/components/topbar/LoginButton.vue'
@@ -92,7 +92,7 @@ import { useCurrentUser } from '@/composables/auth/useCurrentUser'
 import { useErrorHandling } from '@/composables/useErrorHandling'
 import { buildTooltipConfig } from '@/composables/useTooltipConfig'
 import { app } from '@/scripts/app'
-import { useQueueStore } from '@/queue/stores/queueStore'
+import { useQueueStore } from '@/stores/queueStore'
 import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import { isElectron } from '@/utils/envUtil'

src/components/actionbar/BatchCountEdit.vue

@@ -38,7 +38,7 @@ import InputNumber from 'primevue/inputnumber'
 import { computed } from 'vue'
 
 import { useSettingStore } from '@/platform/settings/settingStore'
-import { useQueueSettingsStore } from '@/queue/stores/queueStore'
+import { useQueueSettingsStore } from '@/stores/queueStore'
 
 const queueSettingsStore = useQueueSettingsStore()
 const { batchCount } = storeToRefs(queueSettingsStore)

src/components/actionbar/ComfyRunButton/ComfyQueueButton.vue

@@ -22,13 +22,12 @@
             value: item.tooltip,
             showDelay: 600
           }"
-          :variant="item.key === queueMode ? 'primary' : 'secondary'"
-          size="sm"
-          class="w-full justify-start"
-        >
-          <i v-if="item.icon" :class="item.icon" />
-          {{ String(item.label ?? '') }}
-        </Button>
+          :label="String(item.label ?? '')"
+          :icon="item.icon"
+          :severity="item.key === queueMode ? 'primary' : 'secondary'"
+          size="small"
+          text
+        />
       </template>
     </SplitButton>
     <BatchCountEdit />
@@ -37,18 +36,18 @@
 
 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
+import Button from 'primevue/button'
 import type { MenuItem } from 'primevue/menuitem'
 import SplitButton from 'primevue/splitbutton'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import Button from '@/components/ui/button/Button.vue'
 import { isCloud } from '@/platform/distribution/types'
 import { useTelemetry } from '@/platform/telemetry'
 import { app } from '@/scripts/app'
 import { useCommandStore } from '@/stores/commandStore'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
-import { useQueueSettingsStore } from '@/queue/stores/queueStore'
+import { useQueueSettingsStore } from '@/stores/queueStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import { graphHasMissingNodes } from '@/workbench/extensions/manager/utils/graphHasMissingNodes'
 

src/components/bottomPanel/BottomPanel.vue

@@ -46,22 +46,21 @@
           <div class="flex items-center gap-2">
             <Button
               v-if="isShortcutsTabActive"
-              variant="muted-textonly"
-              size="sm"
+              :label="$t('shortcuts.manageShortcuts')"
+              icon="pi pi-cog"
+              severity="secondary"
+              size="small"
+              text
               @click="openKeybindingSettings"
-            >
-              <i class="pi pi-cog" />
-              {{ $t('shortcuts.manageShortcuts') }}
-            </Button>
+            />
             <Button
               class="justify-self-end"
-              variant="muted-textonly"
-              size="sm"
-              :aria-label="t('g.close')"
+              icon="pi pi-times"
+              severity="secondary"
+              size="small"
+              text
               @click="closeBottomPanel"
-            >
-              <i class="pi pi-times" />
-            </Button>
+            />
           </div>
         </div>
       </TabList>
@@ -80,6 +79,7 @@
 </template>
 
 <script setup lang="ts">
+import Button from 'primevue/button'
 import Tab from 'primevue/tab'
 import type { TabPassThroughMethodOptions } from 'primevue/tab'
 import TabList from 'primevue/tablist'
@@ -88,7 +88,6 @@ import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import ExtensionSlot from '@/components/common/ExtensionSlot.vue'
-import Button from '@/components/ui/button/Button.vue'
 import { useDialogService } from '@/services/dialogService'
 import { useBottomPanelStore } from '@/stores/workspace/bottomPanelStore'
 import type { BottomPanelExtension } from '@/types/extensionTypes'

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

@@ -11,8 +11,9 @@
         value: tooltipText,
         showDelay: 300
       }"
-      variant="secondary"
-      size="sm"
+      icon="pi pi-copy"
+      severity="secondary"
+      size="small"
       :class="
         cn('absolute top-2 right-8 transition-opacity', {
           'opacity-0 pointer-events-none select-none': !isHovered
@@ -20,20 +21,18 @@
       "
       :aria-label="tooltipText"
       @click="handleCopy"
-    >
-      <i class="pi pi-copy" />
-    </Button>
+    />
   </div>
 </template>
 
 <script setup lang="ts">
 import { useElementHover, useEventListener } from '@vueuse/core'
 import type { IDisposable } from '@xterm/xterm'
+import Button from 'primevue/button'
 import type { Ref } from 'vue'
 import { computed, onMounted, onUnmounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import Button from '@/components/ui/button/Button.vue'
 import { useTerminal } from '@/composables/bottomPanelTabs/useTerminal'
 import { electronAPI, isElectron } from '@/utils/envUtil'
 import { cn } from '@/utils/tailwindUtil'

src/components/common/BackgroundImageUpload.vue

@@ -7,24 +7,20 @@
     />
     <Button
       v-tooltip="$t('g.upload')"
-      variant="secondary"
-      size="sm"
-      :aria-label="$t('g.upload')"
+      :icon="isUploading ? 'pi pi-spin pi-spinner' : 'pi pi-upload'"
+      size="small"
       :disabled="isUploading"
       @click="triggerFileInput"
-    >
-      <i :class="isUploading ? 'pi pi-spin pi-spinner' : 'pi pi-upload'" />
-    </Button>
+    />
     <Button
       v-tooltip="$t('g.clear')"
-      variant="destructive"
-      size="sm"
-      :aria-label="$t('g.clear')"
+      outlined
+      icon="pi pi-trash"
+      severity="danger"
+      size="small"
       :disabled="!modelValue"
       @click="clearImage"
-    >
-      <i class="pi pi-trash" />
-    </Button>
+    />
     <input
       ref="fileInput"
       type="file"
@@ -36,10 +32,10 @@
 </template>
 
 <script setup lang="ts">
+import Button from 'primevue/button'
 import InputText from 'primevue/inputtext'
 import { ref } from 'vue'
 
-import Button from '@/components/ui/button/Button.vue'
 import { useToastStore } from '@/platform/updates/common/toastStore'
 import { api } from '@/scripts/api'
 

src/components/common/CustomizationDialog.vue

@@ -27,19 +27,24 @@
       </div>
     </div>
     <template #footer>
-      <Button variant="textonly" @click="resetCustomization">
-        <i class="pi pi-refresh" />
-        {{ $t('g.reset') }}
-      </Button>
-      <Button autofocus @click="confirmCustomization">
-        <i class="pi pi-check" />
-        {{ $t('g.confirm') }}
-      </Button>
+      <Button
+        :label="$t('g.reset')"
+        icon="pi pi-refresh"
+        class="p-button-text"
+        @click="resetCustomization"
+      />
+      <Button
+        :label="$t('g.confirm')"
+        icon="pi pi-check"
+        autofocus
+        @click="confirmCustomization"
+      />
     </template>
   </Dialog>
 </template>
 
 <script setup lang="ts">
+import Button from 'primevue/button'
 import Dialog from 'primevue/dialog'
 import Divider from 'primevue/divider'
 import SelectButton from 'primevue/selectbutton'
@@ -47,7 +52,6 @@ import { computed, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import ColorCustomizationSelector from '@/components/common/ColorCustomizationSelector.vue'
-import Button from '@/components/ui/button/Button.vue'
 import { useNodeBookmarkStore } from '@/stores/nodeBookmarkStore'
 
 const { t } = useI18n()

src/components/common/ElectronFileDownload.vue

@@ -16,22 +16,20 @@
         <Button
           v-if="status === null || status === 'error'"
           class="file-action-button"
-          variant="secondary"
-          size="sm"
+          :label="$t('g.download') + ' (' + fileSize + ')'"
+          size="small"
+          outlined
           :disabled="!!props.error"
+          icon="pi pi-download"
           @click="triggerDownload"
-        >
-          <i class="pi pi-download" />
-          {{ $t('g.download') + ' (' + fileSize + ')' }}
-        </Button>
+        />
         <Button
           v-if="(status === null || status === 'error') && !!props.url"
-          variant="secondary"
-          size="sm"
+          :label="$t('g.copyURL')"
+          size="small"
+          outlined
           @click="copyURL"
-        >
-          {{ $t('g.copyURL') }}
-        </Button>
+        />
       </div>
     </div>
     <div
@@ -51,48 +49,44 @@
         v-if="status === 'in_progress'"
         v-tooltip.top="t('electronFileDownload.pause')"
         class="file-action-button"
-        variant="secondary"
-        size="sm"
+        size="small"
+        outlined
         :disabled="!!props.error"
+        icon="pi pi-pause-circle"
         @click="triggerPauseDownload"
-      >
-        <i class="pi pi-pause-circle" />
-      </Button>
+      />
 
       <Button
         v-if="status === 'paused'"
         v-tooltip.top="t('electronFileDownload.resume')"
         class="file-action-button"
-        variant="secondary"
-        size="sm"
-        :aria-label="t('electronFileDownload.resume')"
+        size="small"
+        outlined
         :disabled="!!props.error"
+        icon="pi pi-play-circle"
         @click="triggerResumeDownload"
-      >
-        <i class="pi pi-play-circle" />
-      </Button>
+      />
 
       <Button
         v-tooltip.top="t('electronFileDownload.cancel')"
         class="file-action-button"
-        variant="destructive"
-        size="sm"
-        :aria-label="t('electronFileDownload.cancel')"
+        size="small"
+        outlined
         :disabled="!!props.error"
+        icon="pi pi-times-circle"
+        severity="danger"
         @click="triggerCancelDownload"
-      >
-        <i class="pi pi-times-circle" />
-      </Button>
+      />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import Button from 'primevue/button'
 import ProgressBar from 'primevue/progressbar'
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import Button from '@/components/ui/button/Button.vue'
 import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
 import { useDownload } from '@/composables/useDownload'
 import { useElectronDownloadStore } from '@/stores/electronDownloadStore'

src/components/common/FileDownload.vue

@@ -22,27 +22,31 @@
     </div>
     <div>
       <Button
-        variant="secondary"
+        :label="$t('g.download') + ' (' + fileSize + ')'"
+        size="small"
+        outlined
         :disabled="!!props.error"
         :title="props.url"
         @click="download.triggerBrowserDownload"
-      >
-        {{ $t('g.download') + ' (' + fileSize + ')' }}
-      </Button>
+      />
     </div>
     <div>
-      <Button variant="secondary" :disabled="!!props.error" @click="copyURL">
-        {{ $t('g.copyURL') }}
-      </Button>
+      <Button
+        :label="$t('g.copyURL')"
+        size="small"
+        outlined
+        :disabled="!!props.error"
+        @click="copyURL"
+      />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import Button from 'primevue/button'
 import Message from 'primevue/message'
 import { computed } from 'vue'
 
-import Button from '@/components/ui/button/Button.vue'
 import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
 import { useDownload } from '@/composables/useDownload'
 import { formatSize } from '@/utils/formatUtil'

src/components/common/FormImageUpload.vue

@@ -14,20 +14,21 @@
       </div>
 
       <div class="flex flex-col gap-2">
-        <Button size="sm" @click="triggerFileInput">
-          <i class="pi pi-upload" />
-          {{ $t('g.upload') }}
-        </Button>
+        <Button
+          icon="pi pi-upload"
+          :label="$t('g.upload')"
+          size="small"
+          @click="triggerFileInput"
+        />
         <Button
           v-if="modelValue"
           class="w-full"
-          variant="destructive"
-          size="sm"
-          :aria-label="$t('g.delete')"
+          outlined
+          icon="pi pi-trash"
+          severity="danger"
+          size="small"
           @click="clearImage"
-        >
-          <i class="pi pi-trash" />
-        </Button>
+        />
       </div>
     </div>
     <input
@@ -41,10 +42,9 @@
 </template>
 
 <script setup lang="ts">
+import Button from 'primevue/button'
 import { ref } from 'vue'
 
-import Button from '@/components/ui/button/Button.vue'
-
 defineProps<{
   modelValue: string
 }>()

src/components/common/NoResultsPlaceholder.vue

@@ -10,11 +10,10 @@
           </p>
           <Button
             v-if="buttonLabel"
-            variant="textonly"
+            :label="buttonLabel"
+            class="p-button-text"
             @click="$emit('action')"
-          >
-            {{ buttonLabel }}
-          </Button>
+          />
         </div>
       </template>
     </Card>
@@ -22,10 +21,9 @@
 </template>
 
 <script setup lang="ts">
+import Button from 'primevue/button'
 import Card from 'primevue/card'
 
-import Button from '@/components/ui/button/Button.vue'
-
 const props = defineProps<{
   class?: string
   icon?: string

src/components/dialog/content/ApiNodesSignInContent.vue

@@ -11,25 +11,24 @@
     <ApiNodesList :node-names="apiNodeNames" />
 
     <div class="flex items-center justify-between">
-      <Button variant="textonly" @click="handleLearnMoreClick">
-        {{ t('g.learnMore') }}
-      </Button>
+      <Button :label="t('g.learnMore')" link @click="handleLearnMoreClick" />
       <div class="flex gap-2">
-        <Button variant="secondary" @click="onCancel?.()">
-          {{ t('g.cancel') }}
-        </Button>
-        <Button @click="onLogin?.()">
-          {{ t('g.login') }}
-        </Button>
+        <Button
+          :label="t('g.cancel')"
+          outlined
+          severity="secondary"
+          @click="onCancel?.()"
+        />
+        <Button :label="t('g.login')" @click="onLogin?.()" />
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import Button from 'primevue/button'
 import { useI18n } from 'vue-i18n'
 
-import Button from '@/components/ui/button/Button.vue'
 import { useExternalLink } from '@/composables/useExternalLink'
 
 const { t } = useI18n()

src/components/dialog/content/ConfirmationDialogContent.vue

@@ -31,64 +31,69 @@
         }}</label>
       </div>
 
-      <Button variant="secondary" autofocus @click="onCancel">
-        <i class="pi pi-undo" />
-        {{ $t('g.cancel') }}
-      </Button>
-      <Button v-if="type === 'default'" variant="primary" @click="onConfirm">
-        <i class="pi pi-check" />
-        {{ $t('g.confirm') }}
-      </Button>
+      <Button
+        :label="$t('g.cancel')"
+        icon="pi pi-undo"
+        severity="secondary"
+        autofocus
+        @click="onCancel"
+      />
+      <Button
+        v-if="type === 'default'"
+        :label="$t('g.confirm')"
+        severity="primary"
+        icon="pi pi-check"
+        @click="onConfirm"
+      />
       <Button
         v-else-if="type === 'delete'"
-        variant="destructive"
+        :label="$t('g.delete')"
+        severity="danger"
+        icon="pi pi-trash"
         @click="onConfirm"
-      >
-        <i class="pi pi-trash" />
-        {{ $t('g.delete') }}
-      </Button>
+      />
       <Button
         v-else-if="type === 'overwrite' || type === 'overwriteBlueprint'"
-        variant="destructive"
+        :label="$t('g.overwrite')"
+        severity="warn"
+        icon="pi pi-save"
         @click="onConfirm"
-      >
-        <i class="pi pi-save" />
-        {{ $t('g.overwrite') }}
-      </Button>
+      />
       <template v-else-if="type === 'dirtyClose'">
-        <Button variant="secondary" @click="onDeny">
-          <i class="pi pi-times" />
-          {{ $t('g.no') }}
-        </Button>
-        <Button @click="onConfirm">
-          <i class="pi pi-save" />
-          {{ $t('g.save') }}
-        </Button>
+        <Button
+          :label="$t('g.no')"
+          severity="secondary"
+          icon="pi pi-times"
+          @click="onDeny"
+        />
+        <Button :label="$t('g.save')" icon="pi pi-save" @click="onConfirm" />
       </template>
       <Button
         v-else-if="type === 'reinstall'"
-        variant="destructive"
+        :label="$t('desktopMenu.reinstall')"
+        severity="warn"
+        icon="pi pi-eraser"
         @click="onConfirm"
-      >
-        <i class="pi pi-eraser" />
-        {{ $t('desktopMenu.reinstall') }}
-      </Button>
+      />
       <!-- Invalid - just show a close button. -->
-      <Button v-else variant="primary" @click="onCancel">
-        <i class="pi pi-times" />
-        {{ $t('g.close') }}
-      </Button>
+      <Button
+        v-else
+        :label="$t('g.close')"
+        severity="primary"
+        icon="pi pi-times"
+        @click="onCancel"
+      />
     </div>
   </section>
 </template>
 
 <script setup lang="ts">
+import Button from 'primevue/button'
 import Checkbox from 'primevue/checkbox'
 import Message from 'primevue/message'
 import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import Button from '@/components/ui/button/Button.vue'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import type { ConfirmationDialogType } from '@/services/dialogService'
 import { useDialogStore } from '@/stores/dialogStore'

src/components/dialog/content/ErrorDialogContent.vue

@@ -14,16 +14,18 @@
     </template>
 
     <div class="flex justify-center gap-2">
-      <Button v-show="!reportOpen" variant="textonly" @click="showReport">
-        {{ $t('g.showReport') }}
-      </Button>
       <Button
         v-show="!reportOpen"
-        variant="textonly"
+        text
+        :label="$t('g.showReport')"
+        @click="showReport"
+      />
+      <Button
+        v-show="!reportOpen"
+        text
+        :label="$t('issueReport.helpFix')"
         @click="showContactSupport"
-      >
-        {{ $t('issueReport.helpFix') }}
-      </Button>
+      />
     </div>
     <template v-if="reportOpen">
       <Divider />
@@ -38,15 +40,18 @@
         :repo-owner="repoOwner"
         :repo-name="repoName"
       />
-      <Button v-if="reportOpen" @click="copyReportToClipboard">
-        <i class="pi pi-copy" />
-        {{ $t('g.copyToClipboard') }}
-      </Button>
+      <Button
+        v-if="reportOpen"
+        :label="$t('g.copyToClipboard')"
+        icon="pi pi-copy"
+        @click="copyReportToClipboard"
+      />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import Button from 'primevue/button'
 import Divider from 'primevue/divider'
 import ScrollPanel from 'primevue/scrollpanel'
 import { useToast } from 'primevue/usetoast'
@@ -55,7 +60,6 @@ import { useI18n } from 'vue-i18n'
 
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
 import FindIssueButton from '@/components/dialog/content/error/FindIssueButton.vue'
-import Button from '@/components/ui/button/Button.vue'
 import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
 import { useTelemetry } from '@/platform/telemetry'
 import { api } from '@/scripts/api'

src/components/dialog/content/PromptDialogContent.vue

@@ -18,11 +18,11 @@
 </template>
 
 <script setup lang="ts">
+import Button from 'primevue/button'
 import FloatLabel from 'primevue/floatlabel'
 import InputText from 'primevue/inputtext'
 import { ref } from 'vue'
 
-import Button from '@/components/ui/button/Button.vue'
 import { useDialogStore } from '@/stores/dialogStore'
 
 const props = defineProps<{

src/components/dialog/content/SignInContent.vue

@@ -51,7 +51,8 @@
           <Button
             type="button"
             class="h-10"
-            variant="secondary"
+            severity="secondary"
+            outlined
             @click="signInWithGoogle"
           >
             <i class="pi pi-google mr-2"></i>
@@ -65,7 +66,8 @@
           <Button
             type="button"
             class="h-10"
-            variant="secondary"
+            severity="secondary"
+            outlined
             @click="signInWithGithub"
           >
             <i class="pi pi-github mr-2"></i>
@@ -80,7 +82,8 @@
         <Button
           type="button"
           class="h-10"
-          variant="secondary"
+          severity="secondary"
+          outlined
           @click="showApiKeyForm = true"
         >
           <img
@@ -139,12 +142,12 @@
 </template>
 
 <script setup lang="ts">
+import Button from 'primevue/button'
 import Divider from 'primevue/divider'
 import Message from 'primevue/message'
 import { computed, onMounted, onUnmounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import Button from '@/components/ui/button/Button.vue'
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
 import { getComfyPlatformBaseUrl } from '@/config/comfyApi'
 import {

src/components/dialog/content/TopUpCreditsDialogContent.vue

@@ -58,27 +58,26 @@
     <Button
       :disabled="!selectedCredits || loading"
       :loading="loading"
-      variant="primary"
-      :class="cn('w-full', (!selectedCredits || loading) && 'opacity-30')"
+      severity="primary"
+      :label="$t('credits.topUp.buy')"
+      :class="['w-full', { 'opacity-30': !selectedCredits || loading }]"
+      :pt="{ label: { class: 'text-primary-foreground' } }"
       @click="handleBuy"
-    >
-      {{ $t('credits.topUp.buy') }}
-    </Button>
+    />
   </div>
 </template>
 
 <script setup lang="ts">
+import Button from 'primevue/button'
 import { useToast } from 'primevue/usetoast'
 import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { creditsToUsd } from '@/base/credits/comfyCredits'
 import UserCredit from '@/components/common/UserCredit.vue'
-import Button from '@/components/ui/button/Button.vue'
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
 import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
 import { useTelemetry } from '@/platform/telemetry'
-import { cn } from '@/utils/tailwindUtil'
 
 import CreditTopUpOption from './credit/CreditTopUpOption.vue'
 

src/components/dialog/content/UpdatePasswordContent.vue

@@ -7,9 +7,12 @@
     <PasswordFields />
 
     <!-- Submit Button -->
-    <Button type="submit" class="mt-4 h-10 font-medium" :loading="loading">
-      {{ $t('userSettings.updatePassword') }}
-    </Button>
+    <Button
+      type="submit"
+      :label="$t('userSettings.updatePassword')"
+      class="mt-4 h-10 font-medium"
+      :loading="loading"
+    />
   </Form>
 </template>
 
@@ -17,10 +20,10 @@
 import type { FormSubmitEvent } from '@primevue/forms'
 import { Form } from '@primevue/forms'
 import { zodResolver } from '@primevue/forms/resolvers/zod'
+import Button from 'primevue/button'
 import { ref } from 'vue'
 
 import PasswordFields from '@/components/dialog/content/signin/PasswordFields.vue'
-import Button from '@/components/ui/button/Button.vue'
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
 import { updatePasswordSchema } from '@/schemas/signInSchema'
 

src/components/dialog/content/error/FindIssueButton.vue

@@ -1,14 +1,16 @@
 <template>
-  <Button variant="secondary" @click="openGitHubIssues">
-    <i class="pi pi-github" />
-    {{ $t('g.findIssues') }}
-  </Button>
+  <Button
+    :label="$t('g.findIssues')"
+    severity="secondary"
+    icon="pi pi-github"
+    @click="openGitHubIssues"
+  />
 </template>
 
 <script setup lang="ts">
+import Button from 'primevue/button'
 import { computed } from 'vue'
 
-import Button from '@/components/ui/button/Button.vue'
 import { useTelemetry } from '@/platform/telemetry'
 
 const props = defineProps<{

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

@@ -10,23 +10,15 @@
       <div>
         {{ $t('g.currentUser') }}: {{ userStore.currentUser?.username }}
       </div>
-      <Button
-        class="text-inherit"
-        variant="textonly"
-        size="icon"
-        :aria-label="$t('menuLabels.Sign Out')"
-        @click="logout"
-      >
-        <i class="pi pi-sign-out" />
-      </Button>
+      <Button icon="pi pi-sign-out" text @click="logout" />
     </div>
   </Message>
 </template>
 
 <script setup lang="ts">
+import Button from 'primevue/button'
 import Message from 'primevue/message'
 
-import Button from '@/components/ui/button/Button.vue'
 import { useUserStore } from '@/stores/userStore'
 
 const userStore = useUserStore()

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

@@ -23,33 +23,24 @@
         <template #body="slotProps">
           <div class="actions invisible flex flex-row">
             <Button
-              variant="textonly"
-              size="icon"
-              :aria-label="$t('g.edit')"
+              icon="pi pi-pencil"
+              class="p-button-text"
               @click="editKeybinding(slotProps.data)"
-            >
-              <i class="pi pi-pencil" />
-            </Button>
+            />
             <Button
-              variant="textonly"
-              size="icon"
-              :aria-label="$t('g.reset')"
+              icon="pi pi-replay"
+              class="p-button-text p-button-warn"
               :disabled="
                 !keybindingStore.isCommandKeybindingModified(slotProps.data.id)
               "
               @click="resetKeybinding(slotProps.data)"
-            >
-              <i class="pi pi-replay" />
-            </Button>
+            />
             <Button
-              variant="textonly"
-              size="icon"
-              :aria-label="$t('g.delete')"
+              icon="pi pi-trash"
+              class="p-button-text p-button-danger"
               :disabled="!slotProps.data.keybinding"
               @click="removeKeybinding(slotProps.data)"
-            >
-              <i class="pi pi-trash" />
-            </Button>
+            />
           </div>
         </template>
       </Column>
@@ -113,31 +104,30 @@
       </div>
       <template #footer>
         <Button
-          :variant="existingKeybindingOnCombo ? 'destructive' : 'primary'"
+          :label="existingKeybindingOnCombo ? 'Overwrite' : 'Save'"
+          :icon="existingKeybindingOnCombo ? 'pi pi-pencil' : 'pi pi-check'"
+          :severity="existingKeybindingOnCombo ? 'warn' : undefined"
           autofocus
           @click="saveKeybinding"
-        >
-          <i
-            :class="existingKeybindingOnCombo ? 'pi pi-pencil' : 'pi pi-check'"
-          />
-          {{ existingKeybindingOnCombo ? $t('g.overwrite') : $t('g.save') }}
-        </Button>
+        />
       </template>
     </Dialog>
     <Button
       v-tooltip="$t('g.resetAllKeybindingsTooltip')"
-      class="mt-4 w-full"
-      variant="destructive-textonly"
+      class="mt-4"
+      :label="$t('g.resetAll')"
+      icon="pi pi-replay"
+      severity="danger"
+      fluid
+      text
       @click="resetAllKeybindings"
-    >
-      <i class="pi pi-replay" />
-      {{ $t('g.resetAll') }}
-    </Button>
+    />
   </PanelTemplate>
 </template>
 
 <script setup lang="ts">
 import { FilterMatchMode } from '@primevue/core/api'
+import Button from 'primevue/button'
 import Column from 'primevue/column'
 import DataTable from 'primevue/datatable'
 import Dialog from 'primevue/dialog'
@@ -149,7 +139,6 @@ import { computed, ref, watchEffect } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import SearchBox from '@/components/common/SearchBox.vue'
-import Button from '@/components/ui/button/Button.vue'
 import { useKeybindingService } from '@/services/keybindingService'
 import { useCommandStore } from '@/stores/commandStore'
 import {

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

@@ -17,11 +17,10 @@
           <Skeleton v-if="loading" width="2rem" height="2rem" />
           <Button
             v-else-if="isActiveSubscription"
+            :label="$t('credits.purchaseCredits')"
             :loading="loading"
             @click="handlePurchaseCreditsClick"
-          >
-            {{ $t('credits.purchaseCredits') }}
-          </Button>
+          />
         </div>
         <div class="flex flex-row items-center">
           <Skeleton
@@ -34,26 +33,25 @@
             {{ $t('credits.lastUpdated') }}: {{ formattedLastUpdateTime }}
           </div>
           <Button
-            variant="muted-textonly"
-            size="icon-sm"
-            :aria-label="$t('g.refresh')"
+            icon="pi pi-refresh"
+            text
+            size="small"
+            severity="secondary"
             @click="() => authActions.fetchBalance()"
-          >
-            <i class="pi pi-refresh" />
-          </Button>
+          />
         </div>
       </div>
 
       <div class="flex items-center justify-between">
         <h3>{{ $t('credits.activity') }}</h3>
         <Button
-          variant="muted-textonly"
+          :label="$t('credits.invoiceHistory')"
+          text
+          severity="secondary"
+          icon="pi pi-arrow-up-right"
           :loading="loading"
           @click="handleCreditsHistoryClick"
-        >
-          <i class="pi pi-arrow-up-right" />
-          {{ $t('credits.invoiceHistory') }}
-        </Button>
+        />
       </div>
 
       <template v-if="creditHistory.length > 0">
@@ -88,24 +86,34 @@
       <UsageLogsTable ref="usageLogsTableRef" />
 
       <div class="flex flex-row gap-2">
-        <Button variant="muted-textonly" @click="handleFaqClick">
-          <i class="pi pi-question-circle" />
-          {{ $t('credits.faqs') }}
-        </Button>
-        <Button variant="muted-textonly" @click="handleOpenPartnerNodesInfo">
-          <i class="pi pi-question-circle" />
-          {{ $t('subscription.partnerNodesCredits') }}
-        </Button>
-        <Button variant="muted-textonly" @click="handleMessageSupport">
-          <i class="pi pi-comments" />
-          {{ $t('credits.messageSupport') }}
-        </Button>
+        <Button
+          :label="$t('credits.faqs')"
+          text
+          severity="secondary"
+          icon="pi pi-question-circle"
+          @click="handleFaqClick"
+        />
+        <Button
+          :label="$t('subscription.partnerNodesCredits')"
+          text
+          severity="secondary"
+          icon="pi pi-question-circle"
+          @click="handleOpenPartnerNodesInfo"
+        />
+        <Button
+          :label="$t('credits.messageSupport')"
+          text
+          severity="secondary"
+          icon="pi pi-comments"
+          @click="handleMessageSupport"
+        />
       </div>
     </div>
   </TabPanel>
 </template>
 
 <script setup lang="ts">
+import Button from 'primevue/button'
 import Column from 'primevue/column'
 import DataTable from 'primevue/datatable'
 import Divider from 'primevue/divider'
@@ -115,7 +123,6 @@ import { computed, ref, watch } from 'vue'
 
 import UserCredit from '@/components/common/UserCredit.vue'
 import UsageLogsTable from '@/components/dialog/content/setting/UsageLogsTable.vue'
-import Button from '@/components/ui/button/Button.vue'
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
 import { useExternalLink } from '@/composables/useExternalLink'
 import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'

src/components/dialog/content/setting/UsageLogsTable.test.ts

@@ -1,7 +1,7 @@
 import { createTestingPinia } from '@pinia/testing'
 import { mount } from '@vue/test-utils'
 import Badge from 'primevue/badge'
-import Button from '@/components/ui/button/Button.vue'
+import Button from 'primevue/button'
 import Column from 'primevue/column'
 import PrimeVue from 'primevue/config'
 import DataTable from 'primevue/datatable'

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

@@ -78,12 +78,9 @@
                 }
               }
             }"
-            variant="textonly"
-            size="icon-sm"
-            :aria-label="$t('credits.additionalInfo')"
-          >
-            <i class="pi pi-info-circle" />
-          </Button>
+            icon="pi pi-info-circle"
+            class="p-button-text p-button-sm"
+          />
         </template>
       </Column>
     </DataTable>
@@ -92,13 +89,13 @@
 
 <script setup lang="ts">
 import Badge from 'primevue/badge'
+import Button from 'primevue/button'
 import Column from 'primevue/column'
 import DataTable from 'primevue/datatable'
 import Message from 'primevue/message'
 import ProgressSpinner from 'primevue/progressspinner'
 import { computed, ref } from 'vue'
 
-import Button from '@/components/ui/button/Button.vue'
 import { useTelemetry } from '@/platform/telemetry'
 import type { AuditLog } from '@/services/customerEventsService'
 import {

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

@@ -44,12 +44,11 @@
                 value: $t('userSettings.updatePassword'),
                 showDelay: 300
               }"
-              variant="muted-textonly"
-              size="icon-sm"
+              icon="pi pi-pen-to-square"
+              severity="secondary"
+              text
               @click="dialogService.showUpdatePasswordDialog()"
-            >
-              <i class="pi pi-pen-to-square" />
-            </Button>
+            />
           </div>
         </div>
 
@@ -59,18 +58,21 @@
           style="--pc-spinner-color: #000"
         />
         <div v-else class="mt-4 flex flex-col gap-2">
-          <Button class="w-32" variant="secondary" @click="handleSignOut">
-            <i class="pi pi-sign-out" />
-            {{ $t('auth.signOut.signOut') }}
-          </Button>
+          <Button
+            class="w-32"
+            severity="secondary"
+            :label="$t('auth.signOut.signOut')"
+            icon="pi pi-sign-out"
+            @click="handleSignOut"
+          />
           <Button
             v-if="!isApiKeyLogin"
             class="w-fit"
-            variant="destructive-textonly"
+            variant="text"
+            severity="danger"
+            :label="$t('auth.deleteAccount.deleteAccount')"
             @click="handleDeleteAccount"
-          >
-            {{ $t('auth.deleteAccount.deleteAccount') }}
-          </Button>
+          />
         </div>
       </div>
 
@@ -82,25 +84,24 @@
 
         <Button
           class="w-52"
-          variant="primary"
+          severity="primary"
           :loading="loading"
+          :label="$t('auth.login.signInOrSignUp')"
+          icon="pi pi-user"
           @click="handleSignIn"
-        >
-          <i class="pi pi-user" />
-          {{ $t('auth.login.signInOrSignUp') }}
-        </Button>
+        />
       </div>
     </div>
   </TabPanel>
 </template>
 
 <script setup lang="ts">
+import Button from 'primevue/button'
 import Divider from 'primevue/divider'
 import ProgressSpinner from 'primevue/progressspinner'
 import TabPanel from 'primevue/tabpanel'
 
 import UserAvatar from '@/components/common/UserAvatar.vue'
-import Button from '@/components/ui/button/Button.vue'
 import { useCurrentUser } from '@/composables/auth/useCurrentUser'
 import { useDialogService } from '@/services/dialogService'
 

src/components/dialog/content/signin/ApiKeyForm.test.ts

@@ -1,7 +1,7 @@
 import { Form } from '@primevue/forms'
 import { mount } from '@vue/test-utils'
 import { createPinia } from 'pinia'
-import Button from '@/components/ui/button/Button.vue'
+import Button from 'primevue/button'
 import PrimeVue from 'primevue/config'
 import InputText from 'primevue/inputtext'
 import Message from 'primevue/message'
@@ -99,10 +99,9 @@ describe('ApiKeyForm', () => {
     )
     await wrapper.find('form').trigger('submit')
 
-    const buttons = wrapper.findAllComponents(Button)
-    const submitButton = buttons.find(
-      (btn) => btn.attributes('type') === 'submit'
-    )
+    const submitButton = wrapper
+      .findAllComponents(Button)
+      .find((btn) => btn.text() === 'Save')
     expect(submitButton?.props('loading')).toBe(true)
   })
 

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

@@ -67,15 +67,10 @@
       </div>
 
       <div class="mt-4 flex items-center justify-between">
-        <Button type="button" variant="textonly" @click="$emit('back')">
+        <Button type="button" link @click="$emit('back')">
           {{ t('g.back') }}
         </Button>
-        <Button
-          type="submit"
-          variant="primary"
-          :loading="loading"
-          :disabled="loading"
-        >
+        <Button type="submit" :loading="loading" :disabled="loading">
           {{ t('g.save') }}
         </Button>
       </div>
@@ -87,12 +82,12 @@
 import type { FormSubmitEvent } from '@primevue/forms'
 import { Form } from '@primevue/forms'
 import { zodResolver } from '@primevue/forms/resolvers/zod'
+import Button from 'primevue/button'
 import InputText from 'primevue/inputtext'
 import Message from 'primevue/message'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import Button from '@/components/ui/button/Button.vue'
 import { getComfyPlatformBaseUrl } from '@/config/comfyApi'
 import {
   configValueOrDefault,

src/components/dialog/content/signin/SignInForm.test.ts

@@ -1,7 +1,7 @@
 import { Form } from '@primevue/forms'
 import type { VueWrapper } from '@vue/test-utils'
 import { mount } from '@vue/test-utils'
-import Button from '@/components/ui/button/Button.vue'
+import Button from 'primevue/button'
 import PrimeVue from 'primevue/config'
 import InputText from 'primevue/inputtext'
 import Password from 'primevue/password'

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

@@ -64,11 +64,10 @@
     <Button
       v-else
       type="submit"
+      :label="t('auth.login.loginButton')"
       class="mt-4 h-10 font-medium"
       :disabled="!$form.valid"
-    >
-      {{ t('auth.login.loginButton') }}
-    </Button>
+    />
   </Form>
 </template>
 
@@ -77,6 +76,7 @@ import type { FormSubmitEvent } from '@primevue/forms'
 import { Form } from '@primevue/forms'
 import { zodResolver } from '@primevue/forms/resolvers/zod'
 import { useThrottleFn } from '@vueuse/core'
+import Button from 'primevue/button'
 import InputText from 'primevue/inputtext'
 import Password from 'primevue/password'
 import ProgressSpinner from 'primevue/progressspinner'
@@ -84,7 +84,6 @@ import { useToast } from 'primevue/usetoast'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import Button from '@/components/ui/button/Button.vue'
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
 import { signInSchema } from '@/schemas/signInSchema'
 import type { SignInData } from '@/schemas/signInSchema'

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

@@ -33,11 +33,10 @@
     <Button
       v-else
       type="submit"
+      :label="t('auth.signup.signUpButton')"
       class="mt-4 h-10 font-medium"
       :disabled="!$form.valid"
-    >
-      {{ t('auth.signup.signUpButton') }}
-    </Button>
+    />
   </Form>
 </template>
 
@@ -46,12 +45,12 @@ import type { FormSubmitEvent } from '@primevue/forms'
 import { Form, FormField } from '@primevue/forms'
 import { zodResolver } from '@primevue/forms/resolvers/zod'
 import { useThrottleFn } from '@vueuse/core'
+import Button from 'primevue/button'
 import InputText from 'primevue/inputtext'
 import ProgressSpinner from 'primevue/progressspinner'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import Button from '@/components/ui/button/Button.vue'
 import { signUpSchema } from '@/schemas/signInSchema'
 import type { SignUpData } from '@/schemas/signInSchema'
 import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'

src/components/graph/CanvasModeSelector.vue

@@ -1,19 +1,21 @@
 <template>
   <Button
     ref="buttonRef"
-    variant="secondary"
+    severity="secondary"
     class="group h-8 rounded-none! bg-comfy-menu-bg p-0 transition-none! hover:rounded-lg! hover:bg-interface-button-hover-surface!"
     :style="buttonStyles"
     @click="toggle"
   >
-    <div class="flex items-center gap-1 pr-0.5">
-      <div
-        class="rounded-lg bg-interface-panel-selected-surface p-2 group-hover:bg-interface-button-hover-surface"
-      >
-        <i :class="currentModeIcon" class="block h-4 w-4" />
+    <template #default>
+      <div class="flex items-center gap-1 pr-0.5">
+        <div
+          class="rounded-lg bg-interface-panel-selected-surface p-2 group-hover:bg-interface-button-hover-surface"
+        >
+          <i :class="currentModeIcon" class="block h-4 w-4" />
+        </div>
+        <i class="icon-[lucide--chevron-down] block h-4 w-4 pr-1.5" />
       </div>
-      <i class="icon-[lucide--chevron-down] block h-4 w-4 pr-1.5" />
-    </div>
+    </template>
   </Button>
 
   <Popover
@@ -54,10 +56,10 @@
 </template>
 
 <script setup lang="ts">
+import Button from 'primevue/button'
 import Popover from 'primevue/popover'
 import { computed, ref } from 'vue'
 
-import Button from '@/components/ui/button/Button.vue'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useCommandStore } from '@/stores/commandStore'
 

src/components/graph/GraphCanvasMenu.vue

@@ -24,18 +24,22 @@
 
       <Button
         v-tooltip.top="fitViewTooltip"
-        variant="secondary"
+        severity="secondary"
+        icon="pi pi-expand"
         :aria-label="fitViewTooltip"
         :style="stringifiedMinimapStyles.buttonStyles"
         class="h-8 w-8 bg-comfy-menu-bg p-0 hover:bg-interface-button-hover-surface!"
         @click="() => commandStore.execute('Comfy.Canvas.FitView')"
       >
-        <i class="icon-[lucide--focus] h-4 w-4" />
+        <template #icon>
+          <i class="icon-[lucide--focus] h-4 w-4" />
+        </template>
       </Button>
 
       <Button
         v-tooltip.top="t('zoomControls.label')"
-        variant="secondary"
+        severity="secondary"
+        :label="t('zoomControls.label')"
         :class="zoomButtonClass"
         :aria-label="t('zoomControls.label')"
         data-testid="zoom-controls-button"
@@ -52,14 +56,16 @@
 
       <Button
         v-tooltip.top="minimapTooltip"
-        variant="secondary"
+        severity="secondary"
         :aria-label="minimapTooltip"
         data-testid="toggle-minimap-button"
         :style="stringifiedMinimapStyles.buttonStyles"
         :class="minimapButtonClass"
         @click="onMinimapToggleClick"
       >
-        <i class="icon-[lucide--map] h-4 w-4" />
+        <template #icon>
+          <i class="icon-[lucide--map] h-4 w-4" />
+        </template>
       </Button>
 
       <Button
@@ -71,25 +77,27 @@
             }
           }
         }"
-        variant="secondary"
+        severity="secondary"
         :class="linkVisibleClass"
         :aria-label="linkVisibilityAriaLabel"
         data-testid="toggle-link-visibility-button"
         :style="stringifiedMinimapStyles.buttonStyles"
         @click="onLinkVisibilityToggleClick"
       >
-        <i class="icon-[lucide--route-off] h-4 w-4" />
+        <template #icon>
+          <i class="icon-[lucide--route-off] h-4 w-4" />
+        </template>
       </Button>
     </ButtonGroup>
   </div>
 </template>
 
 <script setup lang="ts">
+import Button from 'primevue/button'
 import ButtonGroup from 'primevue/buttongroup'
 import { computed, onBeforeUnmount, onMounted } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import Button from '@/components/ui/button/Button.vue'
 import { useZoomControls } from '@/composables/useZoomControls'
 import { LiteGraph } from '@/lib/litegraph/src/litegraph'
 import { useSettingStore } from '@/platform/settings/settingStore'

src/components/graph/selectionToolbox/BypassButton.vue

@@ -4,18 +4,21 @@
       value: $t('commands.Comfy_Canvas_ToggleSelectedNodes_Bypass.label'),
       showDelay: 1000
     }"
-    variant="muted-textonly"
-    :aria-label="$t('commands.Comfy_Canvas_ToggleSelectedNodes_Bypass.label')"
+    severity="secondary"
+    text
     data-testid="bypass-button"
     class="hover:bg-secondary-background"
     @click="toggleBypass"
   >
-    <i class="icon-[lucide--redo-dot] size-4" />
+    <template #icon>
+      <i class="icon-[lucide--redo-dot] h-4 w-4" />
+    </template>
   </Button>
 </template>
 
 <script setup lang="ts">
-import Button from '@/components/ui/button/Button.vue'
+import Button from 'primevue/button'
+
 import { useCommandStore } from '@/stores/commandStore'
 
 const commandStore = useCommandStore()

src/components/graph/selectionToolbox/ColorPickerButton.vue

@@ -6,13 +6,19 @@
         showDelay: 1000
       }"
       data-testid="color-picker-button"
-      variant="muted-textonly"
-      :aria-label="t('g.color')"
+      severity="secondary"
+      text
       @click="() => (showColorPicker = !showColorPicker)"
     >
       <div class="flex items-center gap-1 px-0">
-        <i class="pi pi-circle-fill" :style="{ color: currentColor ?? '' }" />
-        <i class="icon-[lucide--chevron-down]" />
+        <i
+          class="pi pi-circle-fill h-4 w-4"
+          :style="{ color: currentColor ?? '' }"
+        />
+        <i
+          class="pi pi-chevron-down h-4 w-4 py-1"
+          :style="{ fontSize: '0.5rem' }"
+        />
       </div>
     </Button>
     <div
@@ -42,12 +48,12 @@
 </template>
 
 <script setup lang="ts">
+import Button from 'primevue/button'
 import SelectButton from 'primevue/selectbutton'
 import type { Raw } from 'vue'
 import { computed, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import Button from '@/components/ui/button/Button.vue'
 import type {
   ColorOption as CanvasColorOption,
   Positionable

src/components/graph/selectionToolbox/ConfigureSubgraph.vue

@@ -4,15 +4,15 @@
       value: $t('commands.Comfy_Graph_EditSubgraphWidgets.label'),
       showDelay: 1000
     }"
-    variant="muted-textonly"
-    :aria-label="$t('commands.Comfy_Graph_EditSubgraphWidgets.label')"
+    severity="secondary"
+    text
+    icon="icon-[lucide--settings-2]"
     @click="handleClick"
-  >
-    <i class="icon-[lucide--settings-2]" />
-  </Button>
+  />
 </template>
 <script setup lang="ts">
-import Button from '@/components/ui/button/Button.vue'
+import Button from 'primevue/button'
+
 import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
 
 const rightSidePanelStore = useRightSidePanelStore()

src/components/graph/selectionToolbox/ConvertToSubgraphButton.vue

@@ -5,12 +5,14 @@
       value: $t('commands.Comfy_Graph_UnpackSubgraph.label'),
       showDelay: 1000
     }"
-    variant="muted-textonly"
-    :aria-label="$t('commands.Comfy_Graph_UnpackSubgraph.label')"
+    severity="secondary"
     data-testid="convert-to-subgraph-button"
+    text
     @click="() => commandStore.execute('Comfy.Graph.UnpackSubgraph')"
   >
-    <i class="icon-[lucide--expand] size-4" />
+    <template #icon>
+      <i class="icon-[lucide--expand] h-4 w-4" />
+    </template>
   </Button>
   <Button
     v-else-if="isConvertVisible"
@@ -18,20 +20,21 @@
       value: $t('commands.Comfy_Graph_ConvertToSubgraph.label'),
       showDelay: 1000
     }"
-    variant="muted-textonly"
-    size="icon"
-    :aria-label="$t('commands.Comfy_Graph_ConvertToSubgraph.label')"
+    severity="secondary"
     data-testid="convert-to-subgraph-button"
+    text
     @click="() => commandStore.execute('Comfy.Graph.ConvertToSubgraph')"
   >
-    <i class="icon-[lucide--shrink] size-4" />
+    <template #icon>
+      <i class="icon-[lucide--shrink]" />
+    </template>
   </Button>
 </template>
 
 <script setup lang="ts">
+import Button from 'primevue/button'
 import { computed } from 'vue'
 
-import Button from '@/components/ui/button/Button.vue'
 import { useSelectionState } from '@/composables/graph/useSelectionState'
 import { useCommandStore } from '@/stores/commandStore'
 

src/components/graph/selectionToolbox/DeleteButton.vue

@@ -5,19 +5,19 @@
       value: $t('commands.Comfy_Canvas_DeleteSelectedItems.label'),
       showDelay: 1000
     }"
-    variant="muted-textonly"
-    :aria-label="$t('commands.Comfy_Canvas_DeleteSelectedItems.label')"
+    severity="secondary"
+    text
+    icon-class="w-4 h-4"
+    icon="pi pi-trash"
     data-testid="delete-button"
     @click="() => commandStore.execute('Comfy.Canvas.DeleteSelectedItems')"
-  >
-    <i class="icon-[lucide--trash-2]" />
-  </Button>
+  />
 </template>
 
 <script setup lang="ts">
+import Button from 'primevue/button'
 import { computed } from 'vue'
 
-import Button from '@/components/ui/button/Button.vue'
 import { useSelectionState } from '@/composables/graph/useSelectionState'
 import type { Positionable } from '@/lib/litegraph/src/interfaces'
 import { useCommandStore } from '@/stores/commandStore'

src/components/graph/selectionToolbox/ExecuteButton.vue

@@ -4,21 +4,21 @@
       value: t('selectionToolbox.executeButton.tooltip'),
       showDelay: 1000
     }"
-    variant="primary"
-    :aria-label="t('selectionToolbox.executeButton.tooltip')"
+    class="size-8 bg-primary-background text-white p-0"
+    text
     @mouseenter="() => handleMouseEnter()"
     @mouseleave="() => handleMouseLeave()"
     @click="handleClick"
   >
-    <i class="icon-[lucide--play]" />
+    <i class="icon-[lucide--play] size-4" />
   </Button>
 </template>
 
 <script setup lang="ts">
+import Button from 'primevue/button'
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import Button from '@/components/ui/button/Button.vue'
 import { useSelectionState } from '@/composables/graph/useSelectionState'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'

src/components/graph/selectionToolbox/ExtensionCommandButton.vue

@@ -5,20 +5,17 @@
         st(`commands.${normalizeI18nKey(command.id)}.label`, '') || undefined,
       showDelay: 1000
     }"
-    variant="muted-textonly"
-    :aria-label="st(`commands.${normalizeI18nKey(command.id)}.label`, '')"
+    severity="secondary"
+    text
+    icon-class="w-4 h-4"
+    :icon="typeof command.icon === 'function' ? command.icon() : command.icon"
     @click="() => commandStore.execute(command.id)"
-  >
-    <i
-      :class="[
-        typeof command.icon === 'function' ? command.icon() : command.icon
-      ]"
-    />
-  </Button>
+  />
 </template>
 
 <script setup lang="ts">
-import Button from '@/components/ui/button/Button.vue'
+import Button from 'primevue/button'
+
 import { st } from '@/i18n'
 import type { ComfyCommand } from '@/stores/commandStore'
 import { useCommandStore } from '@/stores/commandStore'

src/components/graph/selectionToolbox/FrameNodes.vue

@@ -4,16 +4,18 @@
       value: $t('g.frameNodes'),
       showDelay: 1000
     }"
-    variant="muted-textonly"
-    :aria-label="$t('g.frameNodes')"
+    class="frame-nodes-button"
+    text
+    severity="secondary"
     @click="frameNodes"
   >
-    <i class="icon-[lucide--frame]" />
+    <i class="icon-[lucide--frame] h-4 w-4" />
   </Button>
 </template>
 
 <script setup lang="ts">
-import Button from '@/components/ui/button/Button.vue'
+import Button from 'primevue/button'
+
 import { useFrameNodes } from '@/composables/graph/useFrameNodes'
 
 const { frameNodes } = useFrameNodes()