Merge branch 'main' into feat/vue-widget-registration

2026-02-02 06:19:58 +00:00 · 2026-01-12 22:56:02 +01:00
parent 50db96a954 965ab674d5
commit a9503c5a2f
721 changed files with 87668 additions and 11403 deletions
--- a/.github/actions/start-comfyui-server/action.yml
+++ b/.github/actions/start-comfyui-server/action.yml
@@ -0,0 +1,23 @@
+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 }}
--- a/.github/workflows/ci-tests-e2e-forks.yaml
+++ b/.github/workflows/ci-tests-e2e-forks.yaml
@@ -1,9 +1,9 @@
 # Description: Deploys test results from forked PRs (forks can't access deployment secrets)
-name: "CI: Tests E2E (Deploy for Forks)"
+name: 'CI: Tests E2E (Deploy for Forks)'

 on:
  workflow_run:
-    workflows: ["CI: Tests E2E"]
+    workflows: ['CI: Tests E2E']
    types: [requested, completed]

 env:
@@ -81,6 +81,7 @@ jobs:
          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          GITHUB_TOKEN: ${{ github.token }}
+          GITHUB_SHA: ${{ github.event.workflow_run.head_sha }}
        run: |
          # Rename merged report if exists
          [ -d "reports/playwright-report-chromium-merged" ] && \
--- a/.github/workflows/ci-tests-e2e.yaml
+++ b/.github/workflows/ci-tests-e2e.yaml
@@ -1,5 +1,5 @@
 # Description: End-to-end testing with Playwright across multiple browsers, deploys test reports to Cloudflare Pages
-name: "CI: Tests E2E"
+name: 'CI: Tests E2E'

 on:
  push:
@@ -15,66 +15,56 @@ 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

-      # 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
+      # Upload only built dist/ (containerized test jobs will pnpm install without cache)
+      - name: Upload built frontend
+        uses: actions/upload-artifact@v4
        with:
-          path: .
-          key: comfyui-setup-${{ steps.cache-key.outputs.key }}
+          name: frontend-dist
+          path: dist/
+          retention-days: 1

  # 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.10
+      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:
-      # download built frontend repo from setup job
-      - name: Wait for cache propagation
-        run: sleep 10
-      - name: Restore cached setup
-        uses: actions/cache/restore@5a3ec84eff668545956fd18022155c47e93e2684
+      - name: Checkout repository
+        uses: actions/checkout@v5
+      - name: Download built frontend
+        uses: actions/download-artifact@v4
        with:
-          fail-on-cache-miss: true
-          path: .
-          key: comfyui-setup-${{ needs.setup.outputs.cache-key }}
+          name: frontend-dist
+          path: dist/

-      # 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: Start ComfyUI server
+        uses: ./.github/actions/start-comfyui-server

-      # Run sharded tests and upload sharded reports
+      - name: Install frontend deps
+        run: pnpm install --frozen-lockfile
+
+      # Run sharded tests (browsers pre-installed in container)
      - 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
@@ -94,39 +84,37 @@ jobs:
    timeout-minutes: 15
    needs: setup
    runs-on: ubuntu-latest
+    container:
+      image: ghcr.io/comfy-org/comfyui-ci-container:0.0.10
+      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:
-      # download built frontend repo from setup job
-      - name: Wait for cache propagation
-        run: sleep 10
-      - name: Restore cached setup
-        uses: actions/cache/restore@5a3ec84eff668545956fd18022155c47e93e2684
+      - name: Checkout repository
+        uses: actions/checkout@v5
+      - name: Download built frontend
+        uses: actions/download-artifact@v4
        with:
-          fail-on-cache-miss: true
-          path: .
-          key: comfyui-setup-${{ needs.setup.outputs.cache-key }}
+          name: frontend-dist
+          path: dist/

-      # 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: Start ComfyUI server
+        uses: ./.github/actions/start-comfyui-server

-      # Run tests and upload reports
+      - name: Install frontend deps
+        run: pnpm install --frozen-lockfile
+
+      # Run tests (browsers pre-installed in container)
      - name: Run Playwright tests (${{ matrix.browser }})
        id: playwright
-        run: |
-          # Run tests with blob reporter first
-          pnpm exec playwright test --project=${{ matrix.browser }} --reporter=blob
+        run: pnpm exec playwright test --project=${{ matrix.browser }} --reporter=blob
        env:
          PLAYWRIGHT_BLOB_OUTPUT_DIR: ./blob-report

@@ -147,7 +135,7 @@ jobs:
          path: ./playwright-report/
          retention-days: 30

-  # Merge sharded test reports
+  # Merge sharded test reports (no container needed - only runs CLI)
  merge-reports:
    needs: [playwright-tests-chromium-sharded]
    runs-on: ubuntu-latest
@@ -156,11 +144,9 @@ jobs:
      - name: Checkout repository
        uses: actions/checkout@v5

-      # Setup Test Environment, we only need playwright to merge reports
+      # Setup pnpm/node to run playwright merge-reports (no browsers needed)
      - 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
@@ -236,6 +222,7 @@ jobs:
          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          GITHUB_TOKEN: ${{ github.token }}
+          GITHUB_SHA: ${{ github.event.pull_request.head.sha }}
        run: |
          bash ./scripts/cicd/pr-playwright-deploy-and-comment.sh \
            "${{ github.event.pull_request.number }}" \
--- a/.github/workflows/pr-update-playwright-expectations.yaml
+++ b/.github/workflows/pr-update-playwright-expectations.yaml
@@ -25,7 +25,6 @@ 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 }}
@@ -64,70 +63,63 @@ jobs:
        uses: ./.github/actions/setup-frontend
        with:
          include_build_step: true
-      # 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
+
+      # Upload built dist/ (containerized test jobs will pnpm install without cache)
+      - name: Upload built frontend
+        uses: actions/upload-artifact@v4
        with:
-          path: |
-            ComfyUI
-            dist
-          key: comfyui-setup-${{ steps.cache-key.outputs.key }}
+          name: frontend-dist
+          path: dist/
+          retention-days: 1

  # Sharded snapshot updates
  update-snapshots-sharded:
    needs: setup
    runs-on: ubuntu-latest
+    container:
+      image: ghcr.io/comfy-org/comfyui-ci-container:0.0.10
+      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 }}
-
-      # Restore expensive build artifacts from setup job
-      - name: Restore cached artifacts
-        uses: actions/cache/restore@5a3ec84eff668545956fd18022155c47e93e2684
+      - name: Download built frontend
+        uses: actions/download-artifact@v4
        with:
-          fail-on-cache-miss: true
-          path: |
-            ComfyUI
-            dist
-          key: comfyui-setup-${{ needs.setup.outputs.cache-key }}
+          name: frontend-dist
+          path: dist/

-      - name: Setup ComfyUI server (from cache)
-        uses: ./.github/actions/setup-comfyui-server
-        with:
-          launch_server: true
+      - name: Start ComfyUI server
+        uses: ./.github/actions/start-comfyui-server

-      - name: Setup nodejs, pnpm, reuse built frontend
-        uses: ./.github/actions/setup-frontend
+      - name: Install frontend deps
+        run: pnpm install --frozen-lockfile

-      - name: Setup Playwright
-        uses: ./.github/actions/setup-playwright
-
-      # Run sharded tests with snapshot updates
+      # Run sharded tests with snapshot updates (browsers pre-installed in container)
      - 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
-          echo "=========================================="
-          echo "STAGING CHANGED SNAPSHOTS (Shard ${{ matrix.shardIndex }})"
-          echo "=========================================="
+
+          # Configure git safe.directory for container environment
+          git config --global --add safe.directory "$(pwd)"

          # Get list of changed snapshot files (including untracked/new files)
          changed_files=$( (
@@ -136,43 +128,25 @@ jobs:
          ) | sort -u | grep -E '\-snapshots/' || true )

          if [ -z "$changed_files" ]; then
-            echo "No snapshot changes in this shard"
+            echo "No snapshot changes in shard ${{ matrix.shardIndex }}"
            echo "has-changes=false" >> $GITHUB_OUTPUT
            exit 0
          fi

-          echo "✓ Found changed files:"
-          echo "$changed_files"
          file_count=$(echo "$changed_files" | wc -l)
-          echo "Count: $file_count"
+          echo "Shard ${{ matrix.shardIndex }}: $file_count changed snapshot(s):"
+          echo "$changed_files"
          echo "has-changes=true" >> $GITHUB_OUTPUT
-          echo ""

-          # Create staging directory
+          # Copy changed files to 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
-            # 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
+            [ -f "$file" ] || continue
            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
@@ -213,9 +187,15 @@ jobs:
          echo "=========================================="
          echo "DOWNLOADED SNAPSHOT FILES"
          echo "=========================================="
-          find ./downloaded-snapshots -type f
-          echo ""
-          echo "Total files: $(find ./downloaded-snapshots -type f | wc -l)"
+          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

      # Merge only the changed files into browser_tests
      - name: Merge changed snapshots
@@ -226,6 +206,16 @@ 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"
--- a/.i18nrc.cjs
+++ b/.i18nrc.cjs
@@ -6,11 +6,12 @@ const { defineConfig } = require('@lobehub/i18n-cli');
 module.exports = defineConfig({
  modelName: 'gpt-4.1',
  splitToken: 1024,
+  saveImmediately: true,
  entry: 'src/locales/en',
  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.
+  outputLocales: ['zh', 'zh-TW', 'ru', 'ja', 'ko', 'fr', 'es', 'ar', 'tr', 'pt-BR', 'fa'],
+  reference: `Special names to keep untranslated: flux, photomaker, clip, vae, cfg, stable audio, stable cascade, stable zero, controlnet, lora, HiDream, Civitai, Hugging Face.
  'latent' is the short form of 'latent space'.
  'mask' is in the context of image processing.
  
@@ -18,5 +19,11 @@ module.exports = defineConfig({
  - For 'zh' locale: Use ONLY Simplified Chinese characters (简体中文). Common examples: 节点 (not 節點), 画布 (not 畫布), 图像 (not 圖像), 选择 (not 選擇), 减小 (not 減小).
  - For 'zh-TW' locale: Use ONLY Traditional Chinese characters (繁體中文) with Taiwan-specific terminology.
  - NEVER mix Simplified and Traditional Chinese characters within the same locale.
+  
+  IMPORTANT Persian Translation Guidelines:
+  - For 'fa' locale: Use formal Persian (فارسی رسمی) for professional tone throughout the UI.
+  - Keep commonly used technical terms in English when they are standard in Persian software (e.g., node, workflow).
+  - Use Arabic-Indic numerals (۰-۹) for numbers where appropriate.
+  - Maintain consistency with terminology used in Persian software and design applications.
  `
 });
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -7,7 +7,7 @@ import type { InlineConfig } from 'vite'

 const config: StorybookConfig = {
  stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-  addons: ['@storybook/addon-docs'],
+  addons: ['@storybook/addon-docs', '@storybook/addon-mcp'],
  framework: {
    name: '@storybook/vue3-vite',
    options: {}
@@ -69,9 +69,32 @@ const config: StorybookConfig = {
        allowedHosts: true
      },
      resolve: {
-        alias: {
-          '@': process.cwd() + '/src'
-        }
+        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'
+          }
+        ]
      },
      esbuild: {
        // Prevent minification of identifiers to preserve _sfc_main
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -63,6 +63,9 @@ The project uses **Nx** for build orchestration and task management
 - Imports:
  - sorted/grouped by plugin
  - run `pnpm format` before committing
+  - use separate `import type` statements, not inline `type` in mixed imports
+    - ✅ `import type { Foo } from './foo'` + `import { bar } from './foo'`
+    - ❌ `import { bar, type Foo } from './foo'`
 - ESLint:
  - Vue + TS rules
  - no floating promises
@@ -119,7 +122,10 @@ The project uses **Nx** for build orchestration and task management
  - Prefer reactive props destructuring to `const props = defineProps<...>`
  - Do not use `withDefaults` or runtime props declaration
  - Do not import Vue macros unnecessarily
-  - Prefer `useModel` to separately defining a prop and emit
+  - Prefer `defineModel` to separately defining a prop and emit for v-model bindings
+  - Define slots via template usage, not `defineSlots`
+  - Use same-name shorthand for slot prop bindings: `:isExpanded` instead of `:is-expanded="isExpanded"`
+  - Derive component types using `vue-component-type-helpers` (`ComponentProps`, `ComponentSlots`) instead of separate type files
  - Be judicious with addition of new refs or other state
    - If it's possible to accomplish the design goals with just a prop, don't add a `ref`
    - If it's possible to use the `ref` or prop directly, don't add a `computed`
@@ -137,7 +143,7 @@ The project uses **Nx** for build orchestration and task management
 8. Implement proper error handling
 9. Follow Vue 3 style guide and naming conventions
 10. Use Vite for fast development and building
-11. Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json
+11. Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json. Use the plurals system in i18n instead of hardcoding pluralization in templates.
 12. Avoid new usage of PrimeVue components
 13. Write tests for all changes, especially bug fixes to catch future regressions
 14. Write code that is expressive and self-documenting to the furthest degree possible. This reduces the need for code comments which can get out of sync with the code itself. Try to avoid comments unless absolutely necessary
@@ -155,6 +161,8 @@ The project uses **Nx** for build orchestration and task management

 ## Testing Guidelines

+See @docs/testing/*.md for detailed patterns.
+
 - Frameworks:
  - Vitest (unit/component, happy-dom)
  - Playwright (E2E)
@@ -266,3 +274,18 @@ When referencing Comfy-Org repos:
  - Always use `import { cn } from '@/utils/tailwindUtil'`
    - e.g. `<div :class="cn('text-node-component-header-icon', hasError && 'text-danger')" />`
  - Use `cn()` inline in the template when feasible instead of creating a `computed` to hold the value
+- NEVER use `!important` or the `!` important prefix for tailwind classes
+  - Find existing `!important` classes that are interfering with the styling and propose corrections of those instead.
+- NEVER use arbitrary percentage values like `w-[80%]` when a Tailwind fraction utility exists
+  - Use `w-4/5` instead of `w-[80%]`, `w-1/2` instead of `w-[50%]`, etc.
+
+## Agent-only rules
+
+Rules for agent-based coding tasks.
+
+### Temporary Files
+
+- Put planning documents under `/temp/plans/`
+- Put scripts used under `/temp/scripts/`
+- Put summaries of work performed under `/temp/summaries/`
+- Put TODOs and status updates under `/temp/in_progress/`
--- a/1
+++ b/1
@@ -46,7 +46,6 @@
 # Mask Editor
 /src/extensions/core/maskeditor.ts                @trsommer @brucew4yn3rp
 /src/extensions/core/maskEditorLayerFilenames.ts  @trsommer @brucew4yn3rp
-/src/extensions/core/maskEditorOld.ts             @trsommer @brucew4yn3rp

 # 3D
 /src/extensions/core/load3d.ts                    @jtydhr88
--- a/THIRD_PARTY_NOTICES.md
+++ b/THIRD_PARTY_NOTICES.md
@@ -0,0 +1 @@
+AMD and the AMD Arrow logo are trademarks of Advanced Micro Devices, Inc.
--- a/apps/desktop-ui/package.json
+++ b/apps/desktop-ui/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@comfyorg/desktop-ui",
-  "version": "0.0.4",
+  "version": "0.0.6",
  "type": "module",
  "nx": {
    "tags": [
--- a/apps/desktop-ui/public/assets/images/amd-rocm-logo.png
+++ b/apps/desktop-ui/public/assets/images/amd-rocm-logo.png
--- a/apps/desktop-ui/src/components/install/GpuPicker.stories.ts
+++ b/apps/desktop-ui/src/components/install/GpuPicker.stories.ts
@@ -0,0 +1,84 @@
+// eslint-disable-next-line storybook/no-renderer-packages
+import type { Meta, StoryObj } from '@storybook/vue3'
+import type {
+  ElectronAPI,
+  TorchDeviceType
+} from '@comfyorg/comfyui-electron-types'
+import { ref } from 'vue'
+
+import GpuPicker from './GpuPicker.vue'
+
+type Platform = ReturnType<ElectronAPI['getPlatform']>
+type ElectronAPIStub = Pick<ElectronAPI, 'getPlatform'>
+type WindowWithElectron = Window & { electronAPI?: ElectronAPIStub }
+
+const meta: Meta<typeof GpuPicker> = {
+  title: 'Desktop/Components/GpuPicker',
+  component: GpuPicker,
+  parameters: {
+    layout: 'padded',
+    backgrounds: {
+      default: 'dark',
+      values: [
+        { name: 'dark', value: '#0a0a0a' },
+        { name: 'neutral-900', value: '#171717' },
+        { name: 'neutral-950', value: '#0a0a0a' }
+      ]
+    }
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+function createElectronDecorator(platform: Platform) {
+  function getPlatform() {
+    return platform
+  }
+
+  return function ElectronDecorator() {
+    const windowWithElectron = window as WindowWithElectron
+    windowWithElectron.electronAPI = { getPlatform }
+    return { template: '<story />' }
+  }
+}
+
+function renderWithDevice(device: TorchDeviceType | null) {
+  return function Render() {
+    return {
+      components: { GpuPicker },
+      setup() {
+        const selected = ref<TorchDeviceType | null>(device)
+        return { selected }
+      },
+      template: `
+        <div class="min-h-screen bg-neutral-950 p-8">
+          <GpuPicker v-model:device="selected" />
+        </div>
+      `
+    }
+  }
+}
+
+const windowsDecorator = createElectronDecorator('win32')
+const macDecorator = createElectronDecorator('darwin')
+
+export const WindowsNvidiaSelected: Story = {
+  decorators: [windowsDecorator],
+  render: renderWithDevice('nvidia')
+}
+
+export const WindowsAmdSelected: Story = {
+  decorators: [windowsDecorator],
+  render: renderWithDevice('amd')
+}
+
+export const WindowsCpuSelected: Story = {
+  decorators: [windowsDecorator],
+  render: renderWithDevice('cpu')
+}
+
+export const MacMpsSelected: Story = {
+  decorators: [macDecorator],
+  render: renderWithDevice('mps')
+}
--- a/apps/desktop-ui/src/components/install/GpuPicker.vue
+++ b/apps/desktop-ui/src/components/install/GpuPicker.vue
@@ -11,29 +11,32 @@
      <!-- Apple Metal / NVIDIA -->
      <HardwareOption
        v-if="platform === 'darwin'"
-        :image-path="'./assets/images/apple-mps-logo.png'"
+        image-path="./assets/images/apple-mps-logo.png"
        placeholder-text="Apple Metal"
        subtitle="Apple Metal"
-        :value="'mps'"
        :selected="selected === 'mps'"
-        :recommended="true"
        @click="pickGpu('mps')"
      />
-      <HardwareOption
-        v-else
-        :image-path="'./assets/images/nvidia-logo-square.jpg'"
-        placeholder-text="NVIDIA"
-        :subtitle="$t('install.gpuPicker.nvidiaSubtitle')"
-        :value="'nvidia'"
-        :selected="selected === 'nvidia'"
-        :recommended="true"
-        @click="pickGpu('nvidia')"
-      />
+      <template v-else>
+        <HardwareOption
+          image-path="./assets/images/nvidia-logo-square.jpg"
+          placeholder-text="NVIDIA"
+          :subtitle="$t('install.gpuPicker.nvidiaSubtitle')"
+          :selected="selected === 'nvidia'"
+          @click="pickGpu('nvidia')"
+        />
+        <HardwareOption
+          image-path="./assets/images/amd-rocm-logo.png"
+          placeholder-text="AMD"
+          :subtitle="$t('install.gpuPicker.amdSubtitle')"
+          :selected="selected === 'amd'"
+          @click="pickGpu('amd')"
+        />
+      </template>
      <!-- CPU -->
      <HardwareOption
        placeholder-text="CPU"
        :subtitle="$t('install.gpuPicker.cpuSubtitle')"
-        :value="'cpu'"
        :selected="selected === 'cpu'"
        @click="pickGpu('cpu')"
      />
@@ -41,7 +44,6 @@
      <HardwareOption
        placeholder-text="Manual Install"
        :subtitle="$t('install.gpuPicker.manualSubtitle')"
-        :value="'unsupported'"
        :selected="selected === 'unsupported'"
        @click="pickGpu('unsupported')"
      />
@@ -81,13 +83,15 @@ const selected = defineModel<TorchDeviceType | null>('device', {
 const electron = electronAPI()
 const platform = electron.getPlatform()

-const showRecommendedBadge = computed(
-  () => selected.value === 'mps' || selected.value === 'nvidia'
+const recommendedDevices: TorchDeviceType[] = ['mps', 'nvidia', 'amd']
+const showRecommendedBadge = computed(() =>
+  selected.value ? recommendedDevices.includes(selected.value) : false
 )

 const descriptionKeys = {
  mps: 'appleMetal',
  nvidia: 'nvidia',
+  amd: 'amd',
  cpu: 'cpu',
  unsupported: 'manual'
 } as const
@@ -97,7 +101,7 @@ const descriptionText = computed(() => {
  return st(`install.gpuPicker.${key}Description`, '')
 })

-const pickGpu = (value: TorchDeviceType) => {
+function pickGpu(value: TorchDeviceType) {
  selected.value = value
 }
 </script>
--- a/apps/desktop-ui/src/components/install/HardwareOption.stories.ts
+++ b/apps/desktop-ui/src/components/install/HardwareOption.stories.ts
@@ -29,7 +29,6 @@ export const AppleMetalSelected: Story = {
    imagePath: '/assets/images/apple-mps-logo.png',
    placeholderText: 'Apple Metal',
    subtitle: 'Apple Metal',
-    value: 'mps',
    selected: true
  }
 }
@@ -39,7 +38,6 @@ export const AppleMetalUnselected: Story = {
    imagePath: '/assets/images/apple-mps-logo.png',
    placeholderText: 'Apple Metal',
    subtitle: 'Apple Metal',
-    value: 'mps',
    selected: false
  }
 }
@@ -48,7 +46,6 @@ export const CPUOption: Story = {
  args: {
    placeholderText: 'CPU',
    subtitle: 'Subtitle',
-    value: 'cpu',
    selected: false
  }
 }
@@ -57,7 +54,6 @@ export const ManualInstall: Story = {
  args: {
    placeholderText: 'Manual Install',
    subtitle: 'Subtitle',
-    value: 'unsupported',
    selected: false
  }
 }
@@ -67,7 +63,6 @@ export const NvidiaSelected: Story = {
    imagePath: '/assets/images/nvidia-logo-square.jpg',
    placeholderText: 'NVIDIA',
    subtitle: 'NVIDIA',
-    value: 'nvidia',
    selected: true
  }
 }
--- a/apps/desktop-ui/src/components/install/HardwareOption.vue
+++ b/apps/desktop-ui/src/components/install/HardwareOption.vue
@@ -36,17 +36,13 @@
 </template>

 <script setup lang="ts">
-import type { TorchDeviceType } from '@comfyorg/comfyui-electron-types'
-
 import { cn } from '@/utils/tailwindUtil'

 interface Props {
  imagePath?: string
  placeholderText: string
  subtitle?: string
-  value: TorchDeviceType
  selected?: boolean
-  recommended?: boolean
 }

 defineProps<Props>()
--- a/apps/desktop-ui/src/components/install/InstallLocationPicker.vue
+++ b/apps/desktop-ui/src/components/install/InstallLocationPicker.vue
@@ -104,8 +104,8 @@
 </template>

 <script setup lang="ts">
-import type { TorchDeviceType } from '@comfyorg/comfyui-electron-types'
 import { TorchMirrorUrl } from '@comfyorg/comfyui-electron-types'
+import type { TorchDeviceType } from '@comfyorg/comfyui-electron-types'
 import { isInChina } from '@comfyorg/shared-frontend-utils/networkUtil'
 import Accordion from 'primevue/accordion'
 import AccordionContent from 'primevue/accordioncontent'
@@ -155,7 +155,7 @@ const activeAccordionIndex = ref<string[] | undefined>(undefined)
 const electron = electronAPI()

 // Mirror configuration logic
-const getTorchMirrorItem = (device: TorchDeviceType): UVMirror => {
+function getTorchMirrorItem(device: TorchDeviceType): UVMirror {
  const settingId = 'Comfy-Desktop.UV.TorchInstallMirror'
  switch (device) {
    case 'mps':
@@ -170,6 +170,7 @@ const getTorchMirrorItem = (device: TorchDeviceType): UVMirror => {
        mirror: TorchMirrorUrl.Cuda,
        fallbackMirror: TorchMirrorUrl.Cuda
      }
+    case 'amd':
    case 'cpu':
    default:
      return {
--- a/apps/desktop-ui/src/components/maintenance/TaskListPanel.vue
+++ b/apps/desktop-ui/src/components/maintenance/TaskListPanel.vue
@@ -63,7 +63,6 @@ const taskStore = useMaintenanceTaskStore()
 defineProps<{
  displayAsList: string
  filter: MaintenanceFilter
-  isRefreshing: boolean
 }>()

 const executeTask = async (task: MaintenanceTask) => {
--- a/apps/desktop-ui/src/views/InstallView.vue
+++ b/apps/desktop-ui/src/views/InstallView.vue
@@ -143,6 +143,8 @@ const goToPreviousStep = () => {
 const electron = electronAPI()
 const router = useRouter()
 const install = async () => {
+  if (!device.value) return
+
  const options: InstallOptions = {
    installPath: installPath.value,
    autoUpdate: autoUpdate.value,
@@ -152,7 +154,6 @@ const install = async () => {
    pythonMirror: pythonMirror.value,
    pypiMirror: pypiMirror.value,
    torchMirror: torchMirror.value,
-    // @ts-expect-error fixme ts strict error
    device: device.value
  }
  electron.installComfyUI(options)
@@ -166,7 +167,11 @@ onMounted(async () => {
  if (!electron) return

  const detectedGpu = await electron.Config.getDetectedGpu()
-  if (detectedGpu === 'mps' || detectedGpu === 'nvidia') {
+  if (
+    detectedGpu === 'mps' ||
+    detectedGpu === 'nvidia' ||
+    detectedGpu === 'amd'
+  ) {
    device.value = detectedGpu
  }

--- a/apps/desktop-ui/src/views/MaintenanceView.vue
+++ b/apps/desktop-ui/src/views/MaintenanceView.vue
@@ -74,7 +74,6 @@
          class="border-neutral-700 border-solid border-x-0 border-y"
          :filter
          :display-as-list
-          :is-refreshing
        />

        <!-- Actions -->
--- a/browser_tests/fixtures/ComfyPage.ts
+++ b/browser_tests/fixtures/ComfyPage.ts
@@ -110,16 +110,18 @@ 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.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"]')
+    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' })
  }

  async click(locator: KeysOfType<ConfirmDialog, Locator>) {
--- a/browser_tests/fixtures/components/ComfyNodeSearchBox.ts
+++ b/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('.p-button-label:has-text("Add")').click()
+    await this.page.locator('button:has-text("Add")').click()
  }
 }

--- a/browser_tests/tests/dialog.spec.ts
+++ b/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.getByLabel('Download')
+    const downloadButton = missingModelsWarning.getByText('Download')
    await expect(downloadButton).toBeVisible()

    // Check that the copy URL button is also visible for Desktop environment
-    const copyUrlButton = missingModelsWarning.getByLabel('Copy URL')
+    const copyUrlButton = missingModelsWarning.getByText('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.getByLabel('Download')
+    const downloadButton = missingModelsWarning.getByText('Download')
    await expect(downloadButton).toBeVisible()

    // Check that the copy URL button is also visible for Desktop environment
-    const copyUrlButton = missingModelsWarning.getByLabel('Copy URL')
+    const copyUrlButton = missingModelsWarning.getByText('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.getByLabel('Download')
+    const downloadButton = comfyPage.page.getByText('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')
-      .getByLabel('Save')
+      .getByText('Save')
    await saveButton.click()

    const request = await requestPromise
--- a/browser_tests/tests/domWidget.spec.ts-snapshots/focus-mode-on-chromium-linux.png
+++ b/browser_tests/tests/domWidget.spec.ts-snapshots/focus-mode-on-chromium-linux.png
--- a/browser_tests/tests/graph.spec.ts
+++ b/browser_tests/tests/graph.spec.ts
@@ -19,6 +19,7 @@ test.describe('Graph', () => {
  })

  test('Validate workflow links', async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.Validation.Workflows', true)
    await comfyPage.loadWorkflow('links/bad_link')
    await expect(comfyPage.getVisibleToastCount()).resolves.toBe(2)
  })
--- a/browser_tests/tests/graphCanvasMenu.spec.ts-snapshots/canvas-with-hidden-links-chromium-linux.png
+++ b/browser_tests/tests/graphCanvasMenu.spec.ts-snapshots/canvas-with-hidden-links-chromium-linux.png
--- a/browser_tests/tests/graphCanvasMenu.spec.ts-snapshots/canvas-with-visible-links-chromium-linux.png
+++ b/browser_tests/tests/graphCanvasMenu.spec.ts-snapshots/canvas-with-visible-links-chromium-linux.png
--- a/browser_tests/tests/interaction.spec.ts-snapshots/panned-touch-mobile-chrome-linux.png
+++ b/browser_tests/tests/interaction.spec.ts-snapshots/panned-touch-mobile-chrome-linux.png
--- a/browser_tests/tests/mobileBaseline.spec.ts-snapshots/mobile-default-workflow-mobile-chrome-linux.png
+++ b/browser_tests/tests/mobileBaseline.spec.ts-snapshots/mobile-default-workflow-mobile-chrome-linux.png
--- a/browser_tests/tests/mobileBaseline.spec.ts-snapshots/mobile-empty-canvas-mobile-chrome-linux.png
+++ b/browser_tests/tests/mobileBaseline.spec.ts-snapshots/mobile-empty-canvas-mobile-chrome-linux.png
--- a/browser_tests/tests/mobileBaseline.spec.ts-snapshots/mobile-settings-dialog-mobile-chrome-linux.png
+++ b/browser_tests/tests/mobileBaseline.spec.ts-snapshots/mobile-settings-dialog-mobile-chrome-linux.png
--- a/browser_tests/tests/nodeHelp.spec.ts
+++ b/browser_tests/tests/nodeHelp.spec.ts
@@ -123,8 +123,7 @@ test.describe('Node Help', () => {
      await expect(helpPage).toContainText('KSampler')

      // Click the back button - use a more specific selector
-      const backButton = comfyPage.page.locator('button:has(.pi-arrow-left)')
-      await expect(backButton).toBeVisible()
+      const backButton = helpPage.getByRole('button', { name: /back/i })
      await backButton.click()

      // Verify that we're back to the node library view
--- a/browser_tests/tests/propertiesPanel/propertiesPanelPosition.spec.ts
+++ b/browser_tests/tests/propertiesPanel/propertiesPanelPosition.spec.ts
@@ -0,0 +1,86 @@
+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/)
+  })
+})
--- a/browser_tests/tests/rerouteNode.spec.ts-snapshots/reroute-inserted-chromium-linux.png
+++ b/browser_tests/tests/rerouteNode.spec.ts-snapshots/reroute-inserted-chromium-linux.png
--- a/browser_tests/tests/selectionToolbox.spec.ts-snapshots/selection-toolbox-multiple-nodes-border-chromium-linux.png
+++ b/browser_tests/tests/selectionToolbox.spec.ts-snapshots/selection-toolbox-multiple-nodes-border-chromium-linux.png
--- a/browser_tests/tests/selectionToolbox.spec.ts-snapshots/selection-toolbox-multiple-selections-border-chromium-linux.png
+++ b/browser_tests/tests/selectionToolbox.spec.ts-snapshots/selection-toolbox-multiple-selections-border-chromium-linux.png
--- a/browser_tests/tests/selectionToolbox.spec.ts-snapshots/selection-toolbox-single-node-no-border-chromium-linux.png
+++ b/browser_tests/tests/selectionToolbox.spec.ts-snapshots/selection-toolbox-single-node-no-border-chromium-linux.png
--- a/browser_tests/tests/sidebar/nodeLibrary.spec.ts
+++ b/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.getByLabel('New Folder').click()
+    await comfyPage.page.getByRole('menuitem', { name: '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.getByLabel('Confirm').click()
+    await comfyPage.page.getByRole('button', { name: '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.getByLabel('Confirm').click()
+    await comfyPage.page.getByRole('button', { name: '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.getByLabel('Confirm').click()
+    await comfyPage.page.getByRole('button', { name: 'Confirm' }).click()
    await comfyPage.nextFrame()

    // Verify the color selection is saved
--- a/browser_tests/tests/templates.spec.ts
+++ b/browser_tests/tests/templates.spec.ts
@@ -83,7 +83,7 @@ test.describe('Templates', () => {

    await comfyPage.page
      .locator(
-        'nav > div:nth-child(2) > div > span:has-text("Getting Started")'
+        'nav > div:nth-child(3) > div > span:has-text("Getting Started")'
      )
      .click()
    await comfyPage.templates.loadTemplate('default')
@@ -109,22 +109,27 @@ 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 request = await requestPromise
+    const dialog = comfyPage.page.getByRole('dialog').filter({
+      has: comfyPage.page.getByRole('heading', { name: 'Modèles', exact: true })
+    })
+    await expect(dialog).toBeVisible()

-    // Verify French index was requested
-    expect(request.url()).toContain('templates/index.fr.json')
+    // 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()

-    await expect(comfyPage.templates.content).toBeVisible()
+    // Ensure the English fallback copy is not shown anywhere
+    await expect(
+      comfyPage.page.getByText('All Templates', { exact: true })
+    ).toHaveCount(0)
  })

  test('Falls back to English templates when locale file not found', async ({
--- a/browser_tests/tests/viewport.spec.ts-snapshots/viewport-fits-when-saved-offscreen-chromium-linux.png
+++ b/browser_tests/tests/viewport.spec.ts-snapshots/viewport-fits-when-saved-offscreen-chromium-linux.png
--- a/browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-create-group-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-create-group-chromium-linux.png
--- a/browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-fit-to-contents-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-fit-to-contents-chromium-linux.png
--- a/browser_tests/tests/vueNodes/interactions/canvas/pan.spec.ts-snapshots/vue-nodes-paned-with-touch-mobile-chrome-linux.png
+++ b/browser_tests/tests/vueNodes/interactions/canvas/pan.spec.ts-snapshots/vue-nodes-paned-with-touch-mobile-chrome-linux.png
--- a/browser_tests/tests/vueNodes/interactions/canvas/zoom.spec.ts-snapshots/zoomed-in-ctrl-shift-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/interactions/canvas/zoom.spec.ts-snapshots/zoomed-in-ctrl-shift-chromium-linux.png
--- a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-dragging-link-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-dragging-link-chromium-linux.png
--- a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-input-drag-ctrl-alt-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-input-drag-ctrl-alt-chromium-linux.png
--- a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-input-drag-reuses-origin-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-input-drag-reuses-origin-chromium-linux.png
--- a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-reroute-input-drag-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-reroute-input-drag-chromium-linux.png
--- a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-reroute-output-shift-drag-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-reroute-output-shift-drag-chromium-linux.png
--- a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-shift-output-multi-link-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-shift-output-multi-link-chromium-linux.png
--- a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-snap-to-node-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-snap-to-node-chromium-linux.png
--- a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-snap-to-slot-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-snap-to-slot-chromium-linux.png
--- a/browser_tests/tests/vueNodes/interactions/node/bringToFront.spec.ts-snapshots/bring-to-front-overlapped-after-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/interactions/node/bringToFront.spec.ts-snapshots/bring-to-front-overlapped-after-chromium-linux.png
--- a/browser_tests/tests/vueNodes/interactions/node/bringToFront.spec.ts-snapshots/bring-to-front-overlapped-before-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/interactions/node/bringToFront.spec.ts-snapshots/bring-to-front-overlapped-before-chromium-linux.png
--- a/browser_tests/tests/vueNodes/interactions/node/bringToFront.spec.ts-snapshots/bring-to-front-widget-overlapped-after-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/interactions/node/bringToFront.spec.ts-snapshots/bring-to-front-widget-overlapped-after-chromium-linux.png
--- a/browser_tests/tests/vueNodes/interactions/node/bringToFront.spec.ts-snapshots/bring-to-front-widget-overlapped-before-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/interactions/node/bringToFront.spec.ts-snapshots/bring-to-front-widget-overlapped-before-chromium-linux.png
--- a/browser_tests/tests/vueNodes/interactions/node/move.spec.ts-snapshots/vue-node-moved-node-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/interactions/node/move.spec.ts-snapshots/vue-node-moved-node-chromium-linux.png
--- a/browser_tests/tests/vueNodes/interactions/node/move.spec.ts-snapshots/vue-node-moved-node-touch-mobile-chrome-linux.png
+++ b/browser_tests/tests/vueNodes/interactions/node/move.spec.ts-snapshots/vue-node-moved-node-touch-mobile-chrome-linux.png
--- a/browser_tests/tests/vueNodes/nodeStates/bypass.spec.ts-snapshots/vue-node-bypassed-state-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/nodeStates/bypass.spec.ts-snapshots/vue-node-bypassed-state-chromium-linux.png
--- a/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-color-blue-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-color-blue-chromium-linux.png
--- a/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-dark-all-colors-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-dark-all-colors-chromium-linux.png
--- a/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-light-all-colors-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-light-all-colors-chromium-linux.png
--- a/browser_tests/tests/vueNodes/nodeStates/mute.spec.ts-snapshots/vue-node-muted-state-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/nodeStates/mute.spec.ts-snapshots/vue-node-muted-state-chromium-linux.png
--- a/browser_tests/tests/vueNodes/widgets/load/uploadWidgets.spec.ts-snapshots/vue-nodes-upload-widgets-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/widgets/load/uploadWidgets.spec.ts-snapshots/vue-nodes-upload-widgets-chromium-linux.png
--- a/browser_tests/tests/widget.spec.ts-snapshots/ksampler-resized-min-width-chromium-linux.png
+++ b/browser_tests/tests/widget.spec.ts-snapshots/ksampler-resized-min-width-chromium-linux.png
--- a/browser_tests/tests/widget.spec.ts-snapshots/resized-to-original-chromium-linux.png
+++ b/browser_tests/tests/widget.spec.ts-snapshots/resized-to-original-chromium-linux.png
--- a/build/plugins/comfyAPIPlugin.ts
+++ b/build/plugins/comfyAPIPlugin.ts
@@ -9,11 +9,7 @@ interface ShimResult {
 const SKIP_WARNING_FILES = new Set(['scripts/app', 'scripts/api'])

 /** Files that will be removed in v1.34 */
-const DEPRECATED_FILES = [
-  'scripts/ui',
-  'extensions/core/maskEditorOld',
-  'extensions/core/groupNode'
-] as const
+const DEPRECATED_FILES = ['scripts/ui', 'extensions/core/groupNode'] as const

 function getWarningMessage(
  fileKey: string,
--- a/docs/TEMPLATE_RANKING.md
+++ b/docs/TEMPLATE_RANKING.md
@@ -0,0 +1,66 @@
+# Template Ranking System
+
+Usage-based ordering for workflow templates with position bias normalization.
+
+Scores are pre-computed and normalized offline and shipped as static JSON (mirrors `sorted-custom-node-map.json` pattern for node search).
+
+## Sort Modes
+
+| Mode           | Formula                                          | Description            |
+| -------------- | ------------------------------------------------ | ---------------------- |
+| `recommended`  | `usage × 0.5 + internal × 0.3 + freshness × 0.2` | Curated recommendation |
+| `popular`      | `usage × 0.9 + freshness × 0.1`                  | Pure user-driven       |
+| `newest`       | Date sort                                        | Existing               |
+| `alphabetical` | Name sort                                        | Existing               |
+
+Freshness computed at runtime from `template.date`: `1.0 / (1 + daysSinceAdded / 90)`, min 0.1.
+
+## Data Files
+
+**Usage scores** (generated from Mixpanel):
+
+```json
+// In templates/index.json, add to any template:
+{
+  "name": "some_template",
+  "usage": 1000,
+  ...
+}
+```
+
+**Search rank** (set per-template in workflow_templates repo):
+
+```json
+// In templates/index.json, add to any template:
+{
+  "name": "some_template",
+  "searchRank": 8,  // Scale 1-10, default 5
+  ...
+}
+```
+
+| searchRank | Effect                       |
+| ---------- | ---------------------------- |
+| 1-4        | Demote (bury in results)     |
+| 5          | Neutral (default if not set) |
+| 6-10       | Promote (boost in results)   |
+
+## Position Bias Correction
+
+Raw usage reflects true preference AND UI position bias. We use linear interpolation:
+
+```
+correction = 1 + (position - 1) / (maxPosition - 1)
+normalizedUsage = rawUsage × correction
+```
+
+| Position | Boost |
+| -------- | ----- |
+| 1        | 1.0×  |
+| 50       | 1.28× |
+| 100      | 1.57× |
+| 175      | 2.0×  |
+
+Templates buried at the bottom get up to 2× boost to compensate for reduced visibility.
+
+---
--- a/docs/extensions/core.md
+++ b/docs/extensions/core.md
@@ -41,7 +41,6 @@ The following table lists ALL core extensions in the system as of 2025-01-30:
 | groupOptions.ts | Handles group node configuration options | Graph |
 | index.ts | Main extension registration and coordination | Core |
 | load3d.ts | Supports 3D model loading and visualization | 3D |
-| maskEditorOld.ts | Legacy mask editor implementation | Image |
 | maskeditor.ts | Implements the mask editor for image masking operations | Image |
 | nodeTemplates.ts | Provides node template functionality | Templates |
 | noteNode.ts | Adds note nodes for documentation within workflows | Graph |
@@ -178,4 +177,4 @@ For more detailed information about ComfyUI's extension system, refer to the off
 - [JavaScript Settings](https://docs.comfy.org/custom-nodes/js/javascript_settings)
 - [JavaScript Examples](https://docs.comfy.org/custom-nodes/js/javascript_examples)

-Also, check the main [README.md](https://github.com/Comfy-Org/ComfyUI_frontend#developer-apis) section on Developer APIs for the latest information on extension APIs and features.
+Also, check the main [README.md](https://github.com/Comfy-Org/ComfyUI_frontend#developer-apis) section on Developer APIs for the latest information on extension APIs and features.
--- a/docs/testing/README.md
+++ b/docs/testing/README.md
@@ -12,12 +12,17 @@ Documentation for unit tests is organized into three guides:

 ## Testing Structure

-The ComfyUI Frontend project uses a mixed approach to unit test organization:
+The ComfyUI Frontend project uses **colocated tests** - test files are placed alongside their source files:

- **Component Tests**: Located directly alongside their components with a `.spec.ts` extension
- **Unit Tests**: Located in the `tests-ui/tests/` directory
- **Store Tests**: Located in the `tests-ui/tests/store/` directory
- **Browser Tests**: These are located in the `browser_tests/` directory. There is a dedicated README in the `browser_tests/` directory, so it will not be covered here.
+- **Component Tests**: Located directly alongside their components (e.g., `MyComponent.test.ts` next to `MyComponent.vue`)
+- **Unit Tests**: Located alongside their source files (e.g., `myUtil.test.ts` next to `myUtil.ts`)
+- **Store Tests**: Located in `src/stores/` alongside their store files
+- **Browser Tests**: Located in the `browser_tests/` directory (see dedicated README there)
+
+### Test File Naming
+
+- Use `.test.ts` extension for test files
+- Name tests after their source file: `sourceFile.test.ts`

 ## Test Frameworks and Libraries

@@ -35,8 +40,11 @@ To run the tests locally:
 # Run unit tests
 pnpm test:unit

-# Run unit tests in watch mode
-pnpm test:unit:dev
+# Run a specific test file
+pnpm test:unit -- src/path/to/file.test.ts
+
+# Run unit tests in watch mode  
+pnpm test:unit -- --watch
 ```

-Refer to the specific guides for more detailed information on each testing type.
+Refer to the specific guides for more detailed information on each testing type.
--- a/docs/testing/component-testing.md
+++ b/docs/testing/component-testing.md
--- a/docs/testing/store-testing.md
+++ b/docs/testing/store-testing.md
--- a/docs/testing/unit-testing.md
+++ b/docs/testing/unit-testing.md
--- a/docs/testing/vitest-patterns.md
+++ b/docs/testing/vitest-patterns.md
@@ -0,0 +1,138 @@
+---
+globs:
+  - '**/*.test.ts'
+  - '**/*.spec.ts'
+---
+
+# Vitest Patterns
+
+## Setup
+
+Use `createTestingPinia` from `@pinia/testing`, not `createPinia`:
+
+```typescript
+import { createTestingPinia } from '@pinia/testing'
+import { setActivePinia } from 'pinia'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+describe('MyStore', () => {
+  beforeEach(() => {
+    setActivePinia(createTestingPinia({ stubActions: false }))
+    vi.useFakeTimers()
+    vi.resetAllMocks()
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+})
+```
+
+**Why `stubActions: false`?** By default, testing pinia stubs all actions. Set to `false` when testing actual store behavior.
+
+## Mock Patterns
+
+### Reset all mocks at once
+
+```typescript
+beforeEach(() => {
+  vi.resetAllMocks()  // Not individual mock.mockReset() calls
+})
+```
+
+### Module mocks with vi.mock()
+
+```typescript
+vi.mock('@/scripts/api', () => ({
+  api: {
+    addEventListener: vi.fn(),
+    fetchData: vi.fn()
+  }
+}))
+
+vi.mock('@/services/myService', () => ({
+  myService: {
+    doThing: vi.fn()
+  }
+}))
+```
+
+### Configure mocks in tests
+
+```typescript
+import { api } from '@/scripts/api'
+import { myService } from '@/services/myService'
+
+it('handles success', () => {
+  vi.mocked(myService.doThing).mockResolvedValue({ data: 'test' })
+  // ... test code
+})
+```
+
+## Testing Event Listeners
+
+When a store registers event listeners at module load time:
+
+```typescript
+function getEventHandler() {
+  const call = vi.mocked(api.addEventListener).mock.calls.find(
+    ([event]) => event === 'my_event'
+  )
+  return call?.[1] as (e: CustomEvent<MyEventType>) => void
+}
+
+function dispatch(data: MyEventType) {
+  const handler = getEventHandler()
+  handler(new CustomEvent('my_event', { detail: data }))
+}
+
+it('handles events', () => {
+  const store = useMyStore()
+  dispatch({ field: 'value' })
+  expect(store.items).toHaveLength(1)
+})
+```
+
+## Testing with Fake Timers
+
+For stores with intervals, timeouts, or polling:
+
+```typescript
+beforeEach(() => {
+  vi.useFakeTimers()
+})
+
+afterEach(() => {
+  vi.useRealTimers()
+})
+
+it('polls after delay', async () => {
+  const store = useMyStore()
+  store.startPolling()
+
+  await vi.advanceTimersByTimeAsync(30000)
+
+  expect(mockService.fetch).toHaveBeenCalled()
+})
+```
+
+## Assertion Style
+
+Prefer `.toHaveLength()` over `.length.toBe()`:
+
+```typescript
+// Good
+expect(store.items).toHaveLength(1)
+
+// Avoid
+expect(store.items.length).toBe(1)
+```
+
+Use `.toMatchObject()` for partial matching:
+
+```typescript
+expect(store.completedItems[0]).toMatchObject({
+  id: 'task-123',
+  status: 'done'
+})
+```
--- a/knip.config.ts
+++ b/knip.config.ts
@@ -8,7 +8,8 @@ const config: KnipConfig = {
        'src/assets/css/style.css',
        'src/main.ts',
        'src/scripts/ui/menu/index.ts',
-        'src/types/index.ts'
+        'src/types/index.ts',
+        'src/storybook/mocks/**/*.ts'
      ],
      project: ['**/*.{js,ts,vue}', '*.{js,ts,mts}']
    },
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
  "name": "@comfyorg/comfyui-frontend",
  "private": true,
-  "version": "1.36.7",
+  "version": "1.37.10",
  "type": "module",
  "repository": "https://github.com/Comfy-Org/ComfyUI_frontend",
  "homepage": "https://comfy.org",
@@ -42,6 +42,7 @@
    "prepare": "husky || true && git config blame.ignoreRevsFile .git-blame-ignore-revs || true",
    "preview": "nx preview",
    "storybook": "nx storybook",
+    "storybook:desktop": "nx run @comfyorg/desktop-ui:storybook",
    "stylelint:fix": "stylelint --cache --fix '{apps,packages,src}/**/*.{css,vue}'",
    "stylelint": "stylelint --cache '{apps,packages,src}/**/*.{css,vue}'",
    "test:browser": "pnpm exec nx e2e",
@@ -65,6 +66,7 @@
    "@prettier/plugin-oxc": "catalog:",
    "@sentry/vite-plugin": "catalog:",
    "@storybook/addon-docs": "catalog:",
+    "@storybook/addon-mcp": "catalog:",
    "@storybook/vue3": "catalog:",
    "@storybook/vue3-vite": "catalog:",
    "@tailwindcss/vite": "catalog:",
@@ -186,6 +188,7 @@
    "vue-i18n": "catalog:",
    "vue-router": "catalog:",
    "vuefire": "catalog:",
+    "wwobjloader2": "catalog:",
    "yjs": "catalog:",
    "zod": "catalog:",
    "zod-validation-error": "catalog:"
--- a/packages/design-system/src/css/style.css
+++ b/packages/design-system/src/css/style.css
@@ -9,6 +9,8 @@

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

+@custom-variant touch (@media (hover: none));
+
@theme {
  --text-xxs: 0.625rem;
  --text-xxs--line-height: calc(1 / 0.625);
--- a/packages/registry-types/src/comfyRegistryTypes.ts
+++ b/packages/registry-types/src/comfyRegistryTypes.ts
@@ -217,6 +217,28 @@ export interface paths {
        patch?: never;
        trace?: never;
    };
+    "/admin/verify-api-key": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Verify a ComfyUI API key and return customer details
+         * @description Validates a ComfyUI API key and returns the associated customer information.
+         *     This endpoint is used by cloud.comfy.org to authenticate users via API keys
+         *     instead of Firebase tokens.
+         */
+        post: operations["VerifyApiKey"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
    "/admin/customers/{customer_id}/cloud-subscription-status": {
        parameters: {
            query?: never;
@@ -3931,6 +3953,11 @@ export interface components {
         * @enum {string}
         */
        SubscriptionTier: "STANDARD" | "CREATOR" | "PRO" | "FOUNDERS_EDITION";
+        /**
+         * @description The subscription billing duration
+         * @enum {string}
+         */
+        SubscriptionDuration: "MONTHLY" | "ANNUAL";
        FeaturesResponse: {
            /**
             * @description The conversion rate for partner nodes
@@ -11883,6 +11910,8 @@ export interface operations {
                "application/json": {
                    /** @description Optional URL to redirect the customer after they're done with the billing portal */
                    return_url?: string;
+                    /** @description Optional target subscription tier. When provided, creates a deep link directly to the subscription update confirmation screen with this tier pre-selected. */
+                    target_tier?: "standard" | "creator" | "pro" | "standard-yearly" | "creator-yearly" | "pro-yearly";
                };
            };
        };
@@ -12046,6 +12075,7 @@ export interface operations {
                        /** @description The active subscription ID if one exists */
                        subscription_id?: string | null;
                        subscription_tier?: components["schemas"]["SubscriptionTier"] | null;
+                        subscription_duration?: components["schemas"]["SubscriptionDuration"] | null;
                        /** @description Whether the customer has funds/credits available */
                        has_fund?: boolean;
                        /**
@@ -12079,6 +12109,72 @@ export interface operations {
            };
        };
    };
+    VerifyApiKey: {
+        parameters: {
+            query?: never;
+            header: {
+                /** @description Admin API secret used to authorize this request */
+                "X-Comfy-Admin-Secret": string;
+            };
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": {
+                    /** @description The ComfyUI API key to verify (e.g., comfy_xxx...) */
+                    api_key: string;
+                };
+            };
+        };
+        responses: {
+            /** @description API key is valid */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        /** @description Whether the API key is valid */
+                        valid: boolean;
+                        /** @description The Firebase UID of the user */
+                        firebase_uid: string;
+                        /** @description The customer's email address */
+                        email?: string;
+                        /** @description The customer's name */
+                        name?: string;
+                        /** @description Whether the customer is an admin */
+                        is_admin?: boolean;
+                    };
+                };
+            };
+            /** @description Unauthorized or missing admin API secret */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description API key not found or invalid */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
    GetAdminCustomerCloudSubscriptionStatus: {
        parameters: {
            query?: never;
@@ -12106,6 +12202,7 @@ export interface operations {
                        /** @description The active subscription ID if one exists */
                        subscription_id?: string | null;
                        subscription_tier?: components["schemas"]["SubscriptionTier"] | null;
+                        subscription_duration?: components["schemas"]["SubscriptionDuration"] | null;
                        /** @description Whether the customer has funds/credits available */
                        has_fund?: boolean;
                        /**
--- a/packages/shared-frontend-utils/src/formatUtil.test.ts
+++ b/packages/shared-frontend-utils/src/formatUtil.test.ts
@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest'

-import { getMediaTypeFromFilename, truncateFilename } from '@/utils/formatUtil'
+import { getMediaTypeFromFilename, truncateFilename } from './formatUtil'

 describe('formatUtil', () => {
  describe('truncateFilename', () => {
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -4,7 +4,7 @@ packages:

 catalog:
  '@alloc/quick-lru': ^5.2.0
-  '@comfyorg/comfyui-electron-types': 0.5.5
+  '@comfyorg/comfyui-electron-types': 0.6.2
  '@eslint/js': ^9.39.1
  '@iconify-json/lucide': ^1.1.178
  '@iconify/json': ^2.2.380
@@ -15,7 +15,7 @@ catalog:
  '@nx/playwright': 22.2.6
  '@nx/storybook': 22.2.4
  '@nx/vite': 22.2.6
-  '@pinia/testing': ^0.1.5
+  '@pinia/testing': ^1.0.3
  '@playwright/test': ^1.57.0
  '@prettier/plugin-oxc': ^0.1.3
  '@primeuix/forms': 0.0.2
@@ -26,9 +26,10 @@ catalog:
  '@primevue/icons': 4.2.5
  '@primevue/themes': ^4.2.5
  '@sentry/vite-plugin': ^4.6.0
-  '@sentry/vue': ^8.48.0
+  '@sentry/vue': ^10.32.1
  '@sparkjsdev/spark': ^0.1.10
  '@storybook/addon-docs': ^10.1.9
+  '@storybook/addon-mcp': 0.1.6
  '@storybook/vue3': ^10.1.9
  '@storybook/vue3-vite': ^10.1.9
  '@tailwindcss/vite': ^4.1.12
@@ -39,8 +40,8 @@ catalog:
  '@types/semver': ^7.7.0
  '@types/three': ^0.169.0
  '@vitejs/plugin-vue': ^6.0.0
-  '@vitest/coverage-v8': ^3.2.4
-  '@vitest/ui': ^3.2.0
+  '@vitest/coverage-v8': ^4.0.16
+  '@vitest/ui': ^4.0.16
  '@vue/test-utils': ^2.4.6
  '@vueuse/core': ^11.0.0
  '@vueuse/integrations': ^13.9.0
@@ -59,11 +60,11 @@ catalog:
  eslint-plugin-unused-imports: ^4.3.0
  eslint-plugin-vue: ^10.6.2
  firebase: ^11.6.0
-  globals: ^15.9.0
-  happy-dom: ^15.11.0
+  globals: ^16.5.0
+  happy-dom: ^20.0.11
  husky: ^9.1.7
  jiti: 2.6.1
-  jsdom: ^26.1.0
+  jsdom: ^27.4.0
  knip: ^5.75.1
  lint-staged: ^16.2.7
  markdown-table: ^3.0.4
@@ -72,7 +73,7 @@ catalog:
  oxlint: ^1.33.0
  oxlint-tsgolint: ^0.9.1
  picocolors: ^1.1.1
-  pinia: ^2.1.7
+  pinia: ^3.0.4
  postcss-html: ^1.8.0
  prettier: ^3.7.4
  pretty-bytes: ^7.1.0
@@ -96,14 +97,15 @@ catalog:
  vite-plugin-dts: ^4.5.4
  vite-plugin-html: ^3.2.2
  vite-plugin-vue-devtools: ^8.0.0
-  vitest: ^3.2.4
+  vitest: ^4.0.16
  vue: ^3.5.13
-  vue-component-type-helpers: ^3.0.7
+  vue-component-type-helpers: ^3.2.1
  vue-eslint-parser: ^10.2.0
  vue-i18n: ^9.14.3
  vue-router: ^4.4.3
-  vue-tsc: ^3.1.8
+  vue-tsc: ^3.2.1
  vuefire: ^3.2.1
+  wwobjloader2: ^6.2.1
  yjs: ^13.6.27
  zod: ^3.23.8
  zod-to-json-schema: ^3.24.1
--- a/public/assets/images/hf-logo.svg
+++ b/public/assets/images/hf-logo.svg
--- a/scripts/cicd/extract-playwright-counts.ts
+++ b/scripts/cicd/extract-playwright-counts.ts
@@ -10,37 +10,158 @@ interface TestStats {
  finished?: number
 }

+interface TestResult {
+  status: string
+  duration?: number
+  error?: {
+    message?: string
+    stack?: string
+  }
+  attachments?: Array<{
+    name: string
+    path?: string
+    contentType: string
+  }>
+}
+
+interface TestCase {
+  title: string
+  ok: boolean
+  outcome: string
+  results: TestResult[]
+}
+
+interface Suite {
+  title: string
+  file: string
+  suites?: Suite[]
+  tests?: TestCase[]
+}
+
+interface FullReportData {
+  stats?: TestStats
+  suites?: Suite[]
+}
+
 interface ReportData {
  stats?: TestStats
 }

+interface FailedTest {
+  name: string
+  file: string
+  traceUrl?: string
+  error?: string
+}
+
 interface TestCounts {
  passed: number
  failed: number
  flaky: number
  skipped: number
  total: number
+  failures?: FailedTest[]
+}
+
+/**
+ * Extract failed test details from Playwright report
+ */
+function extractFailedTests(
+  reportData: FullReportData,
+  baseUrl?: string
+): FailedTest[] {
+  const failures: FailedTest[] = []
+
+  function processTest(test: TestCase, file: string, suitePath: string[]) {
+    // Check if test failed or is flaky
+    const hasFailed = test.results.some(
+      (r) => r.status === 'failed' || r.status === 'timedOut'
+    )
+    const isFlaky = test.outcome === 'flaky'
+
+    if (hasFailed || isFlaky) {
+      const fullTestName = [...suitePath, test.title]
+        .filter(Boolean)
+        .join(' › ')
+      const failedResult = test.results.find(
+        (r) => r.status === 'failed' || r.status === 'timedOut'
+      )
+
+      // Find trace attachment
+      let traceUrl: string | undefined
+      if (failedResult?.attachments) {
+        const traceAttachment = failedResult.attachments.find(
+          (a) => a.name === 'trace' && a.contentType === 'application/zip'
+        )
+        if (traceAttachment?.path) {
+          // Convert local path to URL path
+          const tracePath = traceAttachment.path.replace(/\\/g, '/')
+          const traceFile = path.basename(tracePath)
+          if (baseUrl) {
+            // Construct trace viewer URL
+            const traceDataUrl = `${baseUrl}/data/${traceFile}`
+            traceUrl = `${baseUrl}/trace/?trace=${encodeURIComponent(traceDataUrl)}`
+          }
+        }
+      }
+
+      failures.push({
+        name: fullTestName,
+        file: file,
+        traceUrl,
+        error: failedResult?.error?.message
+      })
+    }
+  }
+
+  function processSuite(suite: Suite, parentPath: string[] = []) {
+    const suitePath = suite.title ? [...parentPath, suite.title] : parentPath
+
+    // Process tests in this suite
+    if (suite.tests) {
+      for (const test of suite.tests) {
+        processTest(test, suite.file, suitePath)
+      }
+    }
+
+    // Recursively process nested suites
+    if (suite.suites) {
+      for (const childSuite of suite.suites) {
+        processSuite(childSuite, suitePath)
+      }
+    }
+  }
+
+  if (reportData.suites) {
+    for (const suite of reportData.suites) {
+      processSuite(suite)
+    }
+  }
+
+  return failures
 }

 /**
 * Extract test counts from Playwright HTML report
 * @param reportDir - Path to the playwright-report directory
- * @returns Test counts { passed, failed, flaky, skipped, total }
+ * @param baseUrl - Base URL of the deployed report (for trace links)
+ * @returns Test counts { passed, failed, flaky, skipped, total, failures }
 */
-function extractTestCounts(reportDir: string): TestCounts {
+function extractTestCounts(reportDir: string, baseUrl?: string): TestCounts {
  const counts: TestCounts = {
    passed: 0,
    failed: 0,
    flaky: 0,
    skipped: 0,
-    total: 0
+    total: 0,
+    failures: []
  }

  try {
    // First, try to find report.json which Playwright generates with JSON reporter
    const jsonReportFile = path.join(reportDir, 'report.json')
    if (fs.existsSync(jsonReportFile)) {
-      const reportJson: ReportData = JSON.parse(
+      const reportJson: FullReportData = JSON.parse(
        fs.readFileSync(jsonReportFile, 'utf-8')
      )
      if (reportJson.stats) {
@@ -54,6 +175,12 @@ function extractTestCounts(reportDir: string): TestCounts {
        counts.failed = stats.unexpected || 0
        counts.flaky = stats.flaky || 0
        counts.skipped = stats.skipped || 0
+
+        // Extract detailed failure information
+        if (counts.failed > 0 || counts.flaky > 0) {
+          counts.failures = extractFailedTests(reportJson, baseUrl)
+        }
+
        return counts
      }
    }
@@ -169,15 +296,18 @@ function extractTestCounts(reportDir: string): TestCounts {

 // Main execution
 const reportDir = process.argv[2]
+const baseUrl = process.argv[3] // Optional: base URL for trace links

 if (!reportDir) {
-  console.error('Usage: extract-playwright-counts.ts <report-directory>')
+  console.error(
+    'Usage: extract-playwright-counts.ts <report-directory> [base-url]'
+  )
  process.exit(1)
 }

-const counts = extractTestCounts(reportDir)
+const counts = extractTestCounts(reportDir, baseUrl)

 // Output as JSON for easy parsing in shell script
-console.log(JSON.stringify(counts))
+process.stdout.write(JSON.stringify(counts) + '\n')

-export { extractTestCounts }
+export { extractTestCounts, extractFailedTests }
--- a/scripts/cicd/pr-playwright-deploy-and-comment.sh
+++ b/scripts/cicd/pr-playwright-deploy-and-comment.sh
@@ -134,23 +134,22 @@ post_comment() {

 # Main execution
 if [ "$STATUS" = "starting" ]; then
-    # Post starting comment
+    # Post concise starting comment
    comment=$(cat <<EOF
 $COMMENT_MARKER
-## 🎭 Playwright Test Results
+## 🎭 Playwright Tests: ⏳ Running...

-<img alt='loading' src='https://github.com/user-attachments/assets/755c86ee-e445-4ea8-bc2c-cca85df48686' width='14px' height='14px'/> **Tests are starting...**
+Tests started at $START_TIME UTC

-⏰ Started at: $START_TIME UTC
+<details>
+<summary>📊 Browser Tests</summary>

-### 🚀 Running Tests
- 🧪 **chromium**: Running tests...
- 🧪 **chromium-0.5x**: Running tests...
- 🧪 **chromium-2x**: Running tests...
- 🧪 **mobile-chrome**: Running tests...
+- **chromium**: Running...
+- **chromium-0.5x**: Running...
+- **chromium-2x**: Running...
+- **mobile-chrome**: Running...

---
-⏱️ Please wait while tests are running...
+</details>
 EOF
 )
    post_comment "$comment"
@@ -189,7 +188,8 @@ else
                
                if command -v tsx > /dev/null 2>&1 && [ -f "$EXTRACT_SCRIPT" ]; then
                    echo "Extracting counts from $REPORT_DIR using $EXTRACT_SCRIPT" >&2
-                    counts=$(tsx "$EXTRACT_SCRIPT" "$REPORT_DIR" 2>&1 || echo '{}')
+                    # Pass the base URL so we can generate trace links
+                    counts=$(tsx "$EXTRACT_SCRIPT" "$REPORT_DIR" "$url" 2>&1 || echo '{}')
                    echo "Extracted counts for $browser: $counts" >&2
                    echo "$counts" > "$temp_dir/$i.counts"
                else
@@ -286,43 +286,74 @@ else
    # Determine overall status
    if [ $total_failed -gt 0 ]; then
        status_icon="❌"
-        status_text="Some tests failed"
+        status_text="Failed"
    elif [ $total_flaky -gt 0 ]; then
        status_icon="⚠️"
-        status_text="Tests passed with flaky tests"
+        status_text="Passed with flaky tests"
    elif [ $total_tests -gt 0 ]; then
        status_icon="✅"
-        status_text="All tests passed!"
+        status_text="Passed"
    else
        status_icon="🕵🏻"
-        status_text="No test results found"
+        status_text="No test results"
    fi
    
-    # Generate completion comment
+    # Generate concise completion comment
    comment="$COMMENT_MARKER
-## 🎭 Playwright Test Results
-
-$status_icon **$status_text**
-
-⏰ Completed at: $(date -u '+%m/%d/%Y, %I:%M:%S %p') UTC"
+## 🎭 Playwright Tests: $status_icon **$status_text**"

    # 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 '')"
+**Results:** $total_passed passed, $total_failed failed, $total_flaky flaky, $total_skipped skipped (Total: $total_tests)"
+    fi
+
+    # Extract and display failed tests from all browsers
+    if [ $total_failed -gt 0 ] || [ $total_flaky -gt 0 ]; then
+        comment="$comment
+
+### ❌ Failed Tests"
+        
+        # Process each browser's failures
+        for counts_json in "${counts_array[@]}"; do
+            [ -z "$counts_json" ] || [ "$counts_json" = "{}" ] && continue
+            
+            if command -v jq > /dev/null 2>&1; then
+                # Extract failures array from JSON
+                failures=$(echo "$counts_json" | jq -r '.failures // [] | .[]? | "\(.name)|\(.file)|\(.traceUrl // "")"')
+                
+                if [ -n "$failures" ]; then
+                    while IFS='|' read -r test_name test_file trace_url; do
+                        [ -z "$test_name" ] && continue
+                        
+                        # Convert file path to GitHub URL (relative to repo root)
+                        github_file_url="https://github.com/$GITHUB_REPOSITORY/blob/$GITHUB_SHA/$test_file"
+                        
+                        # Build the failed test line
+                        test_line="- [$test_name]($github_file_url)"
+                        
+                        if [ -n "$trace_url" ] && [ "$trace_url" != "null" ]; then
+                            test_line="$test_line: [View trace]($trace_url)"
+                        fi
+                        
+                        comment="$comment
+$test_line"
+                    done <<< "$failures"
+                fi
+            fi
+        done
    fi
    
+    # Add browser reports in collapsible section
    comment="$comment

-### 📊 Test Reports by Browser"
+<details>
+<summary>📊 Browser Reports</summary>
+
+"
    
-    # Add browser results with individual counts
+    # Add browser results
    i=0
    IFS=' ' read -r -a browser_array <<< "$BROWSERS"
    IFS=' ' read -r -a url_array <<< "$urls"
@@ -349,7 +380,7 @@ $status_icon **$status_text**
                fi
                
                if [ -n "$b_total" ] && [ "$b_total" != "0" ]; then
-                    counts_str=" • ✅ $b_passed / ❌ $b_failed / ⚠️ $b_flaky / ⏭️ $b_skipped"
+                    counts_str=" (✅ $b_passed / ❌ $b_failed / ⚠️ $b_flaky / ⏭️ $b_skipped)"
                else
                    counts_str=""
                fi
@@ -358,10 +389,10 @@ $status_icon **$status_text**
            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
@@ -369,8 +400,7 @@ $status_icon **$status_text**
    
    comment="$comment

---
-🎉 Click on the links above to view detailed test results for each browser configuration."
+</details>"
    
    post_comment "$comment"
 fi
--- a/tests-ui/tests/base/common/downloadUtil.test.ts
+++ b/tests-ui/tests/base/common/downloadUtil.test.ts
--- a/tests-ui/tests/base/credits/comfyCredits.test.ts
+++ b/tests-ui/tests/base/credits/comfyCredits.test.ts
--- a/src/components/LiteGraphCanvasSplitterOverlay.vue
+++ b/src/components/LiteGraphCanvasSplitterOverlay.vue
@@ -22,29 +22,38 @@
        state-storage="local"
        @resizestart="onResizestart"
      >
+        <!-- First panel: sidebar when left, properties when right -->
        <SplitterPanel
-          v-if="sidebarLocation === 'left' && !focusMode"
-          :class="
-            cn(
-              'side-bar-panel bg-comfy-menu-bg pointer-events-auto',
-              sidebarPanelVisible && 'min-w-78'
-            )
+          v-if="
+            !focusMode && (sidebarLocation === 'left' || rightSidePanelVisible)
          "
-          :min-size="10"
+          :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'
+          "
+          :min-size="sidebarLocation === 'left' ? 10 : 15"
          :size="20"
-          :style="{
-            display:
-              sidebarPanelVisible && sidebarLocation === 'left'
-                ? 'flex'
-                : 'none'
-          }"
+          :style="firstPanelStyle"
+          :role="sidebarLocation === 'left' ? 'complementary' : undefined"
+          :aria-label="
+            sidebarLocation === 'left' ? t('sideToolbar.sidebar') : undefined
+          "
        >
          <slot
-            v-if="sidebarPanelVisible && sidebarLocation === 'left'"
+            v-if="sidebarLocation === 'left' && sidebarPanelVisible"
            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 />

@@ -73,38 +82,33 @@
          </Splitter>
        </SplitterPanel>

+        <!-- Last panel: properties when left, sidebar when right -->
        <SplitterPanel
-          v-if="sidebarLocation === 'right' && !focusMode"
-          :class="
-            cn(
-              'side-bar-panel pointer-events-auto',
-              sidebarPanelVisible && 'min-w-78'
-            )
+          v-if="
+            !focusMode && (sidebarLocation === 'right' || rightSidePanelVisible)
          "
-          :min-size="10"
+          :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'
+          "
+          :min-size="sidebarLocation === 'right' ? 10 : 15"
          :size="20"
-          :style="{
-            display:
-              sidebarPanelVisible && sidebarLocation === 'right'
-                ? 'flex'
-                : 'none'
-          }"
+          :style="lastPanelStyle"
+          :role="sidebarLocation === 'right' ? 'complementary' : undefined"
+          :aria-label="
+            sidebarLocation === 'right' ? t('sideToolbar.sidebar') : undefined
+          "
        >
+          <slot v-if="sidebarLocation === 'left'" name="right-side-panel" />
          <slot
-            v-if="sidebarPanelVisible && sidebarLocation === 'right'"
+            v-else-if="sidebarLocation === 'right' && sidebarPanelVisible"
            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>
@@ -117,6 +121,7 @@ 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'
@@ -128,6 +133,7 @@ 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')
 )
@@ -159,12 +165,25 @@ function onResizestart({ originalEvent: event }: SplitterResizeStartEvent) {
 }

 /*
- * Force refresh the splitter when right panel visibility changes to recalculate the width
+ * Force refresh the splitter when right panel visibility or sidebar location changes
+ * to recalculate the width and panel order
 */
 const splitterRefreshKey = computed(() => {
-  return rightSidePanelVisible.value
-    ? 'main-splitter-with-right-panel'
-    : 'main-splitter'
+  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
 })
 </script>

--- a/src/components/MenuHamburger.vue
+++ b/src/components/MenuHamburger.vue
@@ -5,23 +5,23 @@
  >
    <Button
      v-tooltip="{ value: $t('menu.showMenu'), showDelay: 300 }"
-      icon="pi pi-bars"
-      severity="secondary"
-      text
-      size="large"
+      variant="muted-textonly"
+      size="lg"
      :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'
--- a/tests-ui/tests/components/TopMenuSection.test.ts
+++ b/tests-ui/tests/components/TopMenuSection.test.ts
--- a/src/components/TopMenuSection.vue
+++ b/src/components/TopMenuSection.vue
@@ -20,9 +20,14 @@
            variant="secondary"
            size="icon"
            :aria-label="t('menu.customNodesManager')"
+            class="relative"
            @click="openCustomNodeManager"
          >
            <i class="icon-[lucide--puzzle] size-4" />
+            <span
+              v-if="shouldShowRedDot"
+              class="absolute top-0.5 right-1 size-2 rounded-full bg-red-500"
+            />
          </Button>
        </div>

@@ -49,13 +54,16 @@
            <i class="icon-[lucide--history] size-4" />
            <span
              v-if="queuedCount > 0"
-              class="absolute -top-1 -right-1 min-w-[16px] rounded-full bg-primary-background py-0.25 text-[10px] font-medium leading-[14px] text-white"
+              class="absolute -top-1 -right-1 min-w-[16px] rounded-full bg-primary-background py-0.25 text-[10px] font-medium leading-[14px] text-base-foreground"
            >
              {{ queuedCount }}
            </span>
          </Button>
-          <CurrentUserButton v-if="isLoggedIn" class="shrink-0" />
-          <LoginButton v-else-if="isDesktop" />
+          <CurrentUserButton
+            v-if="isLoggedIn && !isIntegratedTabBar"
+            class="shrink-0"
+          />
+          <LoginButton v-else-if="isDesktop && !isIntegratedTabBar" />
          <Button
            v-if="!isRightSidePanelOpen"
            v-tooltip.bottom="rightSidePanelTooltipConfig"
@@ -91,14 +99,19 @@ import Button from '@/components/ui/button/Button.vue'
 import { useCurrentUser } from '@/composables/auth/useCurrentUser'
 import { useErrorHandling } from '@/composables/useErrorHandling'
 import { buildTooltipConfig } from '@/composables/useTooltipConfig'
+import { useSettingStore } from '@/platform/settings/settingStore'
+import { useReleaseStore } from '@/platform/updates/common/releaseStore'
 import { app } from '@/scripts/app'
-import { useQueueStore } from '@/stores/queueStore'
+import { useCommandStore } from '@/stores/commandStore'
+import { useQueueStore, useQueueUIStore } from '@/stores/queueStore'
 import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import { isElectron } from '@/utils/envUtil'
+import { useConflictAcknowledgment } from '@/workbench/extensions/manager/composables/useConflictAcknowledgment'
 import { useManagerState } from '@/workbench/extensions/manager/composables/useManagerState'
 import { ManagerTab } from '@/workbench/extensions/manager/types/comfyManagerTypes'

+const settingStore = useSettingStore()
 const workspaceStore = useWorkspaceStore()
 const rightSidePanelStore = useRightSidePanelStore()
 const managerState = useManagerState()
@@ -106,10 +119,19 @@ const { isLoggedIn } = useCurrentUser()
 const isDesktop = isElectron()
 const { t } = useI18n()
 const { toastErrorHandler } = useErrorHandling()
-const isQueueOverlayExpanded = ref(false)
+const commandStore = useCommandStore()
 const queueStore = useQueueStore()
+const queueUIStore = useQueueUIStore()
+const { isOverlayExpanded: isQueueOverlayExpanded } = storeToRefs(queueUIStore)
+const releaseStore = useReleaseStore()
+const { shouldShowRedDot: showReleaseRedDot } = storeToRefs(releaseStore)
+const { shouldShowRedDot: shouldShowConflictRedDot } =
+  useConflictAcknowledgment()
 const isTopMenuHovered = ref(false)
 const queuedCount = computed(() => queueStore.pendingTasks.length)
+const isIntegratedTabBar = computed(
+  () => settingStore.get('Comfy.UI.TabBarLayout') === 'Integrated'
+)
 const queueHistoryTooltipConfig = computed(() =>
  buildTooltipConfig(t('sideToolbar.queueProgressOverlay.viewJobHistory'))
 )
@@ -117,6 +139,12 @@ const customNodesManagerTooltipConfig = computed(() =>
  buildTooltipConfig(t('menu.customNodesManager'))
 )

+// Use either release red dot or conflict red dot
+const shouldShowRedDot = computed((): boolean => {
+  const releaseRedDot = showReleaseRedDot.value
+  return releaseRedDot || shouldShowConflictRedDot.value
+})
+
 // Right side panel toggle
 const { isOpen: isRightSidePanelOpen } = storeToRefs(rightSidePanelStore)
 const rightSidePanelTooltipConfig = computed(() =>
@@ -133,7 +161,7 @@ onMounted(() => {
 })

 const toggleQueueOverlay = () => {
-  isQueueOverlayExpanded.value = !isQueueOverlayExpanded.value
+  commandStore.execute('Comfy.Queue.ToggleOverlay')
 }

 const openCustomNodeManager = async () => {
--- a/src/components/actionbar/ComfyRunButton/ComfyQueueButton.vue
+++ b/src/components/actionbar/ComfyRunButton/ComfyQueueButton.vue
@@ -22,12 +22,13 @@
            value: item.tooltip,
            showDelay: 600
          }"
-          :label="String(item.label ?? '')"
-          :icon="item.icon"
-          :severity="item.key === queueMode ? 'primary' : 'secondary'"
-          size="small"
-          text
-        />
+          :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>
      </template>
    </SplitButton>
    <BatchCountEdit />
@@ -36,12 +37,12 @@

 <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'
--- a/src/components/bottomPanel/BottomPanel.vue
+++ b/src/components/bottomPanel/BottomPanel.vue
@@ -46,21 +46,22 @@
          <div class="flex items-center gap-2">
            <Button
              v-if="isShortcutsTabActive"
-              :label="$t('shortcuts.manageShortcuts')"
-              icon="pi pi-cog"
-              severity="secondary"
-              size="small"
-              text
+              variant="muted-textonly"
+              size="sm"
              @click="openKeybindingSettings"
-            />
+            >
+              <i class="pi pi-cog" />
+              {{ $t('shortcuts.manageShortcuts') }}
+            </Button>
            <Button
              class="justify-self-end"
-              icon="pi pi-times"
-              severity="secondary"
-              size="small"
-              text
+              variant="muted-textonly"
+              size="sm"
+              :aria-label="t('g.close')"
              @click="closeBottomPanel"
-            />
+            >
+              <i class="pi pi-times" />
+            </Button>
          </div>
        </div>
      </TabList>
@@ -79,7 +80,6 @@
 </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,6 +88,7 @@ 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'
--- a/src/components/bottomPanel/tabs/shortcuts/EssentialsPanel.test.ts
+++ b/src/components/bottomPanel/tabs/shortcuts/EssentialsPanel.test.ts
--- a/src/components/bottomPanel/tabs/shortcuts/ShortcutsList.test.ts
+++ b/src/components/bottomPanel/tabs/shortcuts/ShortcutsList.test.ts
--- a/tests-ui/tests/components/bottomPanel/tabs/terminal/BaseTerminal.test.ts
+++ b/tests-ui/tests/components/bottomPanel/tabs/terminal/BaseTerminal.test.ts
--- a/src/components/bottomPanel/tabs/terminal/BaseTerminal.vue
+++ b/src/components/bottomPanel/tabs/terminal/BaseTerminal.vue
@@ -11,9 +11,8 @@
        value: tooltipText,
        showDelay: 300
      }"
-      icon="pi pi-copy"
-      severity="secondary"
-      size="small"
+      variant="secondary"
+      size="sm"
      :class="
        cn('absolute top-2 right-8 transition-opacity', {
          'opacity-0 pointer-events-none select-none': !isHovered
@@ -21,18 +20,20 @@
      "
      :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'
--- a/src/components/button/IconGroup.vue
+++ b/src/components/button/IconGroup.vue
@@ -2,7 +2,8 @@
  <div
    :class="
      cn(
-        'flex justify-center items-center shrink-0 outline-hidden border-none p-0 rounded-lg bg-secondary-background shadow-sm transition-all duration-200 cursor-pointer'
+        'flex justify-center items-center shrink-0 outline-hidden border-none p-0 rounded-lg shadow-sm transition-all duration-200 cursor-pointer bg-secondary-background',
+        backgroundClass
      )
    "
  >
@@ -12,4 +13,8 @@

 <script setup lang="ts">
 import { cn } from '@/utils/tailwindUtil'
+
+const { backgroundClass } = defineProps<{
+  backgroundClass?: string
+}>()
 </script>
--- a/src/components/common/BackgroundImageUpload.vue
+++ b/src/components/common/BackgroundImageUpload.vue
@@ -7,20 +7,24 @@
    />
    <Button
      v-tooltip="$t('g.upload')"
-      :icon="isUploading ? 'pi pi-spin pi-spinner' : 'pi pi-upload'"
-      size="small"
+      variant="secondary"
+      size="sm"
+      :aria-label="$t('g.upload')"
      :disabled="isUploading"
      @click="triggerFileInput"
-    />
+    >
+      <i :class="isUploading ? 'pi pi-spin pi-spinner' : 'pi pi-upload'" />
+    </Button>
    <Button
      v-tooltip="$t('g.clear')"
-      outlined
-      icon="pi pi-trash"
-      severity="danger"
-      size="small"
+      variant="destructive"
+      size="sm"
+      :aria-label="$t('g.clear')"
      :disabled="!modelValue"
      @click="clearImage"
-    />
+    >
+      <i class="pi pi-trash" />
+    </Button>
    <input
      ref="fileInput"
      type="file"
@@ -32,10 +36,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'

--- a/src/components/common/CustomizationDialog.vue
+++ b/src/components/common/CustomizationDialog.vue
@@ -27,24 +27,19 @@
      </div>
    </div>
    <template #footer>
-      <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"
-      />
+      <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>
    </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'
@@ -52,6 +47,7 @@ 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()
--- a/src/components/common/ElectronFileDownload.vue
+++ b/src/components/common/ElectronFileDownload.vue
@@ -16,20 +16,22 @@
        <Button
          v-if="status === null || status === 'error'"
          class="file-action-button"
-          :label="$t('g.download') + ' (' + fileSize + ')'"
-          size="small"
-          outlined
+          variant="secondary"
+          size="sm"
          :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"
-          :label="$t('g.copyURL')"
-          size="small"
-          outlined
+          variant="secondary"
+          size="sm"
          @click="copyURL"
-        />
+        >
+          {{ $t('g.copyURL') }}
+        </Button>
      </div>
    </div>
    <div
@@ -49,44 +51,48 @@
        v-if="status === 'in_progress'"
        v-tooltip.top="t('electronFileDownload.pause')"
        class="file-action-button"
-        size="small"
-        outlined
+        variant="secondary"
+        size="sm"
        :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"
-        size="small"
-        outlined
+        variant="secondary"
+        size="sm"
+        :aria-label="t('electronFileDownload.resume')"
        :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"
-        size="small"
-        outlined
+        variant="destructive"
+        size="sm"
+        :aria-label="t('electronFileDownload.cancel')"
        :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'
--- a/src/components/common/FileDownload.vue
+++ b/src/components/common/FileDownload.vue
@@ -22,31 +22,27 @@
    </div>
    <div>
      <Button
-        :label="$t('g.download') + ' (' + fileSize + ')'"
-        size="small"
-        outlined
+        variant="secondary"
        :disabled="!!props.error"
        :title="props.url"
        @click="download.triggerBrowserDownload"
-      />
+      >
+        {{ $t('g.download') + ' (' + fileSize + ')' }}
+      </Button>
    </div>
    <div>
-      <Button
-        :label="$t('g.copyURL')"
-        size="small"
-        outlined
-        :disabled="!!props.error"
-        @click="copyURL"
-      />
+      <Button variant="secondary" :disabled="!!props.error" @click="copyURL">
+        {{ $t('g.copyURL') }}
+      </Button>
    </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'
--- a/Show More
+++ b/Show More
				`@@ -0,0 +1 @@`
				`AMD and the AMD Arrow logo are trademarks of Advanced Micro Devices, Inc.`