Merge remote-tracking branch 'origin/main' into bl-teenage-planarian

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

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

.github/workflows/ci-tests-e2e-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,7 +81,6 @@ 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" ] && \

.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,56 +15,66 @@ concurrency:
 jobs:
   setup:
     runs-on: ubuntu-latest
+    outputs:
+      cache-key: ${{ steps.cache-key.outputs.key }}
     steps:
       - name: Checkout repository
         uses: actions/checkout@v5
+
+      # Setup Test Environment, build frontend but do not start server yet
+      - name: Setup ComfyUI server
+        uses: ./.github/actions/setup-comfyui-server
       - name: Setup frontend
         uses: ./.github/actions/setup-frontend
         with:
           include_build_step: true
+      - name: Setup Playwright
+        uses: ./.github/actions/setup-playwright  # Setup Playwright and cache browsers
 
-      # Upload only built dist/ (containerized test jobs will pnpm install without cache)
-      - name: Upload built frontend
-        uses: actions/upload-artifact@v4
+      # Save the entire workspace as cache for later test jobs to restore
+      - name: Generate cache key
+        id: cache-key
+        run: echo "key=$(date +%s)" >> $GITHUB_OUTPUT
+      - name: Save cache
+        uses: actions/cache/save@5a3ec84eff668545956fd18022155c47e93e2684
         with:
-          name: frontend-dist
-          path: dist/
-          retention-days: 1
+          path: .
+          key: comfyui-setup-${{ steps.cache-key.outputs.key }}
 
   # Sharded chromium tests
   playwright-tests-chromium-sharded:
     needs: setup
     runs-on: ubuntu-latest
     timeout-minutes: 60
-    container:
-      image: ghcr.io/comfy-org/comfyui-ci-container:0.0.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:
-      - name: Checkout repository
-        uses: actions/checkout@v5
-      - name: Download built frontend
-        uses: actions/download-artifact@v4
+      # download built frontend repo from setup job
+      - name: Wait for cache propagation
+        run: sleep 10
+      - name: Restore cached setup
+        uses: actions/cache/restore@5a3ec84eff668545956fd18022155c47e93e2684
         with:
-          name: frontend-dist
-          path: dist/
+          fail-on-cache-miss: true
+          path: .
+          key: comfyui-setup-${{ needs.setup.outputs.cache-key }}
 
-      - name: Start ComfyUI server
-        uses: ./.github/actions/start-comfyui-server
+      # Setup Test Environment for this runner, start server, use cached built frontend ./dist from 'setup' job
+      - name: Setup ComfyUI server
+        uses: ./.github/actions/setup-comfyui-server
+        with:
+          launch_server: true
+      - name: Setup nodejs, pnpm, reuse built frontend
+        uses: ./.github/actions/setup-frontend
+      - name: Setup Playwright
+        uses: ./.github/actions/setup-playwright
 
-      - name: Install frontend deps
-        run: pnpm install --frozen-lockfile
-
-      # Run sharded tests (browsers pre-installed in container)
+      # Run sharded tests and upload sharded reports
       - name: Run Playwright tests (Shard ${{ matrix.shardIndex }}/${{ matrix.shardTotal }})
         id: playwright
         run: pnpm exec playwright test --project=chromium --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }} --reporter=blob
@@ -84,37 +94,39 @@ jobs:
     timeout-minutes: 15
     needs: setup
     runs-on: ubuntu-latest
-    container:
-      image: ghcr.io/comfy-org/comfyui-ci-container:0.0.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:
-      - name: Checkout repository
-        uses: actions/checkout@v5
-      - name: Download built frontend
-        uses: actions/download-artifact@v4
+      # download built frontend repo from setup job
+      - name: Wait for cache propagation
+        run: sleep 10
+      - name: Restore cached setup
+        uses: actions/cache/restore@5a3ec84eff668545956fd18022155c47e93e2684
         with:
-          name: frontend-dist
-          path: dist/
+          fail-on-cache-miss: true
+          path: .
+          key: comfyui-setup-${{ needs.setup.outputs.cache-key }}
 
-      - name: Start ComfyUI server
-        uses: ./.github/actions/start-comfyui-server
+      # Setup Test Environment for this runner, start server, use cached built frontend ./dist from 'setup' job
+      - name: Setup ComfyUI server
+        uses: ./.github/actions/setup-comfyui-server
+        with:
+          launch_server: true
+      - name: Setup nodejs, pnpm, reuse built frontend
+        uses: ./.github/actions/setup-frontend
+      - name: Setup Playwright
+        uses: ./.github/actions/setup-playwright
 
-      - name: Install frontend deps
-        run: pnpm install --frozen-lockfile
-
-      # Run tests (browsers pre-installed in container)
+      # Run tests and upload reports
       - name: Run Playwright tests (${{ matrix.browser }})
         id: playwright
-        run: pnpm exec playwright test --project=${{ matrix.browser }} --reporter=blob
+        run: |
+          # Run tests with blob reporter first
+          pnpm exec playwright test --project=${{ matrix.browser }} --reporter=blob
         env:
           PLAYWRIGHT_BLOB_OUTPUT_DIR: ./blob-report
 
@@ -135,7 +147,7 @@ jobs:
           path: ./playwright-report/
           retention-days: 30
 
-  # Merge sharded test reports (no container needed - only runs CLI)
+  # Merge sharded test reports
   merge-reports:
     needs: [playwright-tests-chromium-sharded]
     runs-on: ubuntu-latest
@@ -144,9 +156,11 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v5
 
-      # Setup pnpm/node to run playwright merge-reports (no browsers needed)
+      # Setup Test Environment, we only need playwright to merge reports
       - name: Setup frontend
         uses: ./.github/actions/setup-frontend
+      - name: Setup Playwright
+        uses: ./.github/actions/setup-playwright
 
       - name: Download blob reports
         uses: actions/download-artifact@v4
@@ -222,7 +236,6 @@ 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 }}" \

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

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

.i18nrc.cjs

@@ -6,11 +6,10 @@ 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', 'fa'],
+  outputLocales: ['zh', 'zh-TW', 'ru', 'ja', 'ko', 'fr', 'es', 'ar', 'tr', 'pt-BR'],
   reference: `Special names to keep untranslated: flux, photomaker, clip, vae, cfg, stable audio, stable cascade, stable zero, controlnet, lora, HiDream, Civitai, Hugging Face.
   'latent' is the short form of 'latent space'.
   'mask' is in the context of image processing.
@@ -19,11 +18,5 @@ 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.
   `
 });

.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', '@storybook/addon-mcp'],
+  addons: ['@storybook/addon-docs'],
   framework: {
     name: '@storybook/vue3-vite',
     options: {}
@@ -69,32 +69,9 @@ const config: StorybookConfig = {
         allowedHosts: true
       },
       resolve: {
-        alias: [
-          {
-            find: '@/composables/queue/useJobList',
-            replacement: process.cwd() + '/src/storybook/mocks/useJobList.ts'
-          },
-          {
-            find: '@/composables/queue/useJobActions',
-            replacement: process.cwd() + '/src/storybook/mocks/useJobActions.ts'
-          },
-          {
-            find: '@/utils/formatUtil',
-            replacement:
-              process.cwd() +
-              '/packages/shared-frontend-utils/src/formatUtil.ts'
-          },
-          {
-            find: '@/utils/networkUtil',
-            replacement:
-              process.cwd() +
-              '/packages/shared-frontend-utils/src/networkUtil.ts'
-          },
-          {
-            find: '@',
-            replacement: process.cwd() + '/src'
-          }
-        ]
+        alias: {
+          '@': process.cwd() + '/src'
+        }
       },
       esbuild: {
         // Prevent minification of identifiers to preserve _sfc_main

AGENTS.md

@@ -63,9 +63,6 @@ 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
@@ -122,10 +119,7 @@ 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 `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
+  - Prefer `useModel` to separately defining a prop and emit
   - 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`
@@ -143,7 +137,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. Use the plurals system in i18n instead of hardcoding pluralization in templates.
+11. Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json
 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
@@ -161,8 +155,6 @@ 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)
@@ -276,8 +268,6 @@ When referencing Comfy-Org repos:
   - 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
 

THIRD_PARTY_NOTICES.md

@@ -1 +0,0 @@
-AMD and the AMD Arrow logo are trademarks of Advanced Micro Devices, Inc.

apps/desktop-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comfyorg/desktop-ui",
-  "version": "0.0.6",
+  "version": "0.0.4",
   "type": "module",
   "nx": {
     "tags": [

apps/desktop-ui/src/components/install/GpuPicker.stories.ts

@@ -1,84 +0,0 @@
-// 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')
-}

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

@@ -11,32 +11,29 @@
       <!-- 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')"
       />
-      <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>
+      <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')"
+      />
       <!-- CPU -->
       <HardwareOption
         placeholder-text="CPU"
         :subtitle="$t('install.gpuPicker.cpuSubtitle')"
+        :value="'cpu'"
         :selected="selected === 'cpu'"
         @click="pickGpu('cpu')"
       />
@@ -44,6 +41,7 @@
       <HardwareOption
         placeholder-text="Manual Install"
         :subtitle="$t('install.gpuPicker.manualSubtitle')"
+        :value="'unsupported'"
         :selected="selected === 'unsupported'"
         @click="pickGpu('unsupported')"
       />
@@ -83,15 +81,13 @@ const selected = defineModel<TorchDeviceType | null>('device', {
 const electron = electronAPI()
 const platform = electron.getPlatform()
 
-const recommendedDevices: TorchDeviceType[] = ['mps', 'nvidia', 'amd']
-const showRecommendedBadge = computed(() =>
-  selected.value ? recommendedDevices.includes(selected.value) : false
+const showRecommendedBadge = computed(
+  () => selected.value === 'mps' || selected.value === 'nvidia'
 )
 
 const descriptionKeys = {
   mps: 'appleMetal',
   nvidia: 'nvidia',
-  amd: 'amd',
   cpu: 'cpu',
   unsupported: 'manual'
 } as const
@@ -101,7 +97,7 @@ const descriptionText = computed(() => {
   return st(`install.gpuPicker.${key}Description`, '')
 })
 
-function pickGpu(value: TorchDeviceType) {
+const pickGpu = (value: TorchDeviceType) => {
   selected.value = value
 }
 </script>

apps/desktop-ui/src/components/install/HardwareOption.stories.ts

@@ -29,6 +29,7 @@ export const AppleMetalSelected: Story = {
     imagePath: '/assets/images/apple-mps-logo.png',
     placeholderText: 'Apple Metal',
     subtitle: 'Apple Metal',
+    value: 'mps',
     selected: true
   }
 }
@@ -38,6 +39,7 @@ export const AppleMetalUnselected: Story = {
     imagePath: '/assets/images/apple-mps-logo.png',
     placeholderText: 'Apple Metal',
     subtitle: 'Apple Metal',
+    value: 'mps',
     selected: false
   }
 }
@@ -46,6 +48,7 @@ export const CPUOption: Story = {
   args: {
     placeholderText: 'CPU',
     subtitle: 'Subtitle',
+    value: 'cpu',
     selected: false
   }
 }
@@ -54,6 +57,7 @@ export const ManualInstall: Story = {
   args: {
     placeholderText: 'Manual Install',
     subtitle: 'Subtitle',
+    value: 'unsupported',
     selected: false
   }
 }
@@ -63,6 +67,7 @@ export const NvidiaSelected: Story = {
     imagePath: '/assets/images/nvidia-logo-square.jpg',
     placeholderText: 'NVIDIA',
     subtitle: 'NVIDIA',
+    value: 'nvidia',
     selected: true
   }
 }

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

@@ -36,13 +36,17 @@
 </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>()

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

@@ -104,8 +104,8 @@
 </template>
 
 <script setup lang="ts">
-import { TorchMirrorUrl } from '@comfyorg/comfyui-electron-types'
 import type { TorchDeviceType } from '@comfyorg/comfyui-electron-types'
+import { TorchMirrorUrl } 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
-function getTorchMirrorItem(device: TorchDeviceType): UVMirror {
+const getTorchMirrorItem = (device: TorchDeviceType): UVMirror => {
   const settingId = 'Comfy-Desktop.UV.TorchInstallMirror'
   switch (device) {
     case 'mps':
@@ -170,7 +170,6 @@ function getTorchMirrorItem(device: TorchDeviceType): UVMirror {
         mirror: TorchMirrorUrl.Cuda,
         fallbackMirror: TorchMirrorUrl.Cuda
       }
-    case 'amd':
     case 'cpu':
     default:
       return {

apps/desktop-ui/src/components/maintenance/TaskListPanel.vue

@@ -63,6 +63,7 @@ const taskStore = useMaintenanceTaskStore()
 defineProps<{
   displayAsList: string
   filter: MaintenanceFilter
+  isRefreshing: boolean
 }>()
 
 const executeTask = async (task: MaintenanceTask) => {

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

@@ -143,8 +143,6 @@ const goToPreviousStep = () => {
 const electron = electronAPI()
 const router = useRouter()
 const install = async () => {
-  if (!device.value) return
-
   const options: InstallOptions = {
     installPath: installPath.value,
     autoUpdate: autoUpdate.value,
@@ -154,6 +152,7 @@ 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)
@@ -167,11 +166,7 @@ onMounted(async () => {
   if (!electron) return
 
   const detectedGpu = await electron.Config.getDetectedGpu()
-  if (
-    detectedGpu === 'mps' ||
-    detectedGpu === 'nvidia' ||
-    detectedGpu === 'amd'
-  ) {
+  if (detectedGpu === 'mps' || detectedGpu === 'nvidia') {
     device.value = detectedGpu
   }
 

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

@@ -74,6 +74,7 @@
           class="border-neutral-700 border-solid border-x-0 border-y"
           :filter
           :display-as-list
+          :is-refreshing
         />
 
         <!-- Actions -->

browser_tests/fixtures/ComfyPage.ts

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

browser_tests/fixtures/components/ComfyNodeSearchBox.ts

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

browser_tests/tests/dialog.spec.ts

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

browser_tests/tests/graph.spec.ts

@@ -19,7 +19,6 @@ 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)
   })

browser_tests/tests/menu.spec.ts

@@ -133,11 +133,8 @@ test.describe('Menu', () => {
       // Checkmark should be invisible again (panel is hidden)
       await expect(checkmark).toHaveClass(/invisible/)
 
-      // Click in top-right corner to close menu (avoid hamburger menu at top-left)
-      const viewport = comfyPage.page.viewportSize()!
-      await comfyPage.page
-        .locator('body')
-        .click({ position: { x: viewport.width - 10, y: 10 } })
+      // Click outside to close menu
+      await comfyPage.page.locator('body').click({ position: { x: 10, y: 10 } })
 
       // Verify menu is now closed
       await expect(menu).not.toBeVisible()

browser_tests/tests/nodeHelp.spec.ts

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

browser_tests/tests/propertiesPanel/propertiesPanel.spec.ts

@@ -9,7 +9,7 @@ test.describe('Properties panel', () => {
     const { propertiesPanel } = comfyPage.menu
 
     await expect(propertiesPanel.panelTitle).toContainText(
-      'No item(s) selected'
+      'No node(s) selected'
     )
 
     await comfyPage.selectNodes(['KSampler', 'CLIP Text Encode (Prompt)'])

browser_tests/tests/sidebar/nodeLibrary.spec.ts

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

browser_tests/tests/templates.spec.ts

@@ -82,7 +82,9 @@ test.describe('Templates', () => {
     await expect(comfyPage.templates.content).toBeVisible()
 
     await comfyPage.page
-      .getByRole('button', { name: 'Getting Started' })
+      .locator(
+        'nav > div:nth-child(2) > div > span:has-text("Getting Started")'
+      )
       .click()
     await comfyPage.templates.loadTemplate('default')
     await expect(comfyPage.templates.content).toBeHidden()
@@ -187,7 +189,9 @@ test.describe('Templates', () => {
     const templateGrid = comfyPage.page.locator(
       '[data-testid="template-workflows-content"]'
     )
-    const nav = comfyPage.page.locator('header', { hasText: 'Templates' })
+    const nav = comfyPage.page
+      .locator('header')
+      .filter({ hasText: 'Templates' })
 
     await comfyPage.templates.waitForMinimumCardCount(1)
     await expect(templateGrid).toBeVisible()
@@ -197,8 +201,7 @@ test.describe('Templates', () => {
     await comfyPage.page.setViewportSize(mobileSize)
     await comfyPage.templates.waitForMinimumCardCount(1)
     await expect(templateGrid).toBeVisible()
-    // Nav header is clipped by overflow-hidden parent at mobile size
-    await expect(nav).not.toBeInViewport()
+    await expect(nav).not.toBeVisible() // Nav should collapse at mobile size
 
     const tabletSize = { width: 1024, height: 800 }
     await comfyPage.page.setViewportSize(tabletSize)

browser_tests/tests/widget.spec.ts

@@ -194,10 +194,7 @@ test.describe('Image widget', () => {
     const comboEntry = comfyPage.page.getByRole('menuitem', {
       name: 'image32x32.webp'
     })
-    await comboEntry.click()
-
-    // Stabilization for the image swap
-    await comfyPage.nextFrame()
+    await comboEntry.click({ noWaitAfter: true })
 
     // Expect the image preview to change automatically
     await expect(comfyPage.canvas).toHaveScreenshot(

docs/TEMPLATE_RANKING.md

@@ -1,66 +0,0 @@
-# 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.
-
----

docs/testing/vitest-patterns.md

@@ -1,142 +0,0 @@
----
-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.
-
-## i18n in Component Tests
-
-Use real `createI18n` with empty messages instead of mocking `vue-i18n`. See `SearchBox.test.ts` for example.
-
-## 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'
-})
-```

initial-report.md

@@ -0,0 +1,43 @@
+# Parallel Workflow Execution - Initial Findings
+
+## Cloud PR 1743 behavior
+
+- The PR enables parallel execution by making the per-user concurrency limit
+  dynamic: `DispatchConfig.MaxConcurrentJobsPerUser` is added and read at runtime.
+- Dispatcher passes the runtime value into the state machine via
+  `TriggerEventGloballyWithArgs`, so changes apply without restart.
+- State machine uses the runtime limit to move jobs from `queued_limited` to
+  `queued_waiting`, which is the gate for concurrent execution.
+- Environment defaults set local/ephemeral/dev to 5 and staging/prod to 1.
+
+Key references:
+- `common/dynamicconfig/types.go`
+- `services/dispatcher/server/services/job_dispatch/dispatcher.go`
+- `common/jobstate/state.go`
+- `common/dynamicconfig/defaults/ephemeral.json`
+- `infrastructure/dynamicconfig/prod/config.json`
+- `infrastructure/dynamicconfig/staging/config.json`
+- `infrastructure/dynamicconfig/dev/config.json`
+
+## Frontend audit notes (current behavior)
+
+- Queue fetching already supports multiple running/pending jobs via `/jobs`,
+  mapping to `Running`/`Pending` lists.
+  - `src/platform/remote/comfyui/jobs/fetchJobs.ts`
+  - `src/stores/queueStore.ts`
+- The concurrency indicator is based on `runningWorkflowCount`, which counts
+  prompts with running nodes and should reflect parallel execution.
+  - `src/stores/executionStore.ts`
+  - `src/components/queue/QueueProgressOverlay.vue`
+- The progress overlay is single-prompt focused:
+  - `executionStore.activePromptId` tracks one prompt.
+  - `nodeProgressStates` is overwritten per `progress_state`, so the progress
+    bar and current node are effectively “last prompt wins.”
+  - `src/stores/executionStore.ts`
+  - `src/components/queue/QueueProgressOverlay.vue`
+
+## Implication
+
+If the frontend is expected to show per-job progress for multiple concurrent
+workflows, the execution store and progress overlay will need to evolve beyond
+the single-active-prompt assumption.

knip.config.ts

@@ -8,8 +8,7 @@ const config: KnipConfig = {
         'src/assets/css/style.css',
         'src/main.ts',
         'src/scripts/ui/menu/index.ts',
-        'src/types/index.ts',
-        'src/storybook/mocks/**/*.ts'
+        'src/types/index.ts'
       ],
       project: ['**/*.{js,ts,vue}', '*.{js,ts,mts}']
     },

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comfyorg/comfyui-frontend",
   "private": true,
-  "version": "1.37.10",
+  "version": "1.36.12",
   "type": "module",
   "repository": "https://github.com/Comfy-Org/ComfyUI_frontend",
   "homepage": "https://comfy.org",
@@ -42,7 +42,6 @@
     "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",
@@ -66,7 +65,6 @@
     "@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:",
@@ -188,7 +186,6 @@
     "vue-i18n": "catalog:",
     "vue-router": "catalog:",
     "vuefire": "catalog:",
-    "wwobjloader2": "catalog:",
     "yjs": "catalog:",
     "zod": "catalog:",
     "zod-validation-error": "catalog:"

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

@@ -9,8 +9,6 @@
 
 @config '../../tailwind.config.ts';
 
-@custom-variant touch (@media (hover: none));
-
 @theme {
   --text-xxs: 0.625rem;
   --text-xxs--line-height: calc(1 / 0.625);
@@ -247,7 +245,6 @@
   --inverted-background-hover: var(--color-charcoal-600);
   --warning-background: var(--color-gold-400);
   --warning-background-hover: var(--color-gold-500);
-  --success-background: var(--color-jade-600);
   --border-default: var(--color-smoke-600);
   --border-subtle: var(--color-smoke-400);
   --muted-background: var(--color-smoke-700);
@@ -282,7 +279,7 @@
    --modal-card-border-highlighted: var(--secondary-background-selected);
    --modal-card-button-surface: var(--color-smoke-300);
    --modal-card-placeholder-background: var(--color-smoke-600);
-   --modal-card-tag-background: var(--color-smoke-200);
+   --modal-card-tag-background: var(--color-smoke-400);
    --modal-card-tag-foreground: var(--base-foreground);
    --modal-panel-background: var(--color-white);
 }
@@ -373,7 +370,6 @@
   --inverted-background-hover: var(--color-smoke-200);
   --warning-background: var(--color-gold-600);
   --warning-background-hover: var(--color-gold-500);
-  --success-background: var(--color-jade-600);
   --border-default: var(--color-charcoal-200);
   --border-subtle: var(--color-charcoal-300);
   --muted-background: var(--color-charcoal-100);
@@ -518,7 +514,6 @@
   --color-inverted-background-hover: var(--inverted-background-hover);
   --color-warning-background: var(--warning-background);
   --color-warning-background-hover: var(--warning-background-hover);
-  --color-success-background: var(--success-background);
   --color-border-default: var(--border-default);
   --color-border-subtle: var(--border-subtle);
   --color-muted-background: var(--muted-background);

plan.md

@@ -0,0 +1,107 @@
+# Parallel Execution Implementation Plan
+
+## Goals
+- Support multiple simultaneous workflow executions across:
+  - Separate browser tabs (multiple clients).
+  - In-app workflow tabs (multiple workflows).
+- Show correct progress, outputs, and errors per workflow/job.
+- Avoid regressions for single-run behavior and existing UI.
+
+## Non-goals (initial scope)
+- Redesign the queue UI beyond enabling per-job progress indicators.
+- New backend features beyond prompt context for WS events (see dependencies).
+
+## Dependencies / coordination (verified vs `../cloud-3` + `../backend-3`)
+- Prompt-scoped data is already available for core execution events:
+  - `execution_start`, `execution_success`, `execution_error`, `execution_interrupted`,
+    `executed`, `progress`, `progress_state`, and `executing` include `prompt_id` in
+    `../backend-3` and are forwarded unchanged through `../cloud-3`.
+  - Frontend currently *drops* `prompt_id` for `executing`; this can be fixed
+    without backend changes.
+- `progress_text` is a binary message containing only `nodeId` + text in
+  `../backend-3` (`send_progress_text`); `../cloud-3` forwards it as raw binary.
+  - Per-prompt progress text is **not possible** without backend changes.
+  - If we want it, we need to extend ComfyUI/backend to include `prompt_id` in
+    the binary payload or add a parallel JSON event.
+- `b_preview_with_metadata` includes `prompt_id` and is forwarded as binary; usable
+  as-is for prompt/workflow scoping.
+- Decide whether UI should filter by `client_id` (current tab only) or show all
+  user jobs; document and apply consistently.
+
+## Phase 1: Data model and execution state
+1. Refactor execution store to be prompt-centric:
+   - Replace `activePromptId` single value with:
+     - `promptStates: Record<promptId, PromptExecutionState>`.
+     - `runningPromptIds` derived from prompt states.
+     - `promptIdToWorkflowId` remains the primary routing map.
+   - Provide selectors:
+     - `getPromptProgress(promptId)`
+     - `getPromptNodeProgressStates(promptId)`
+     - `getWorkflowRunningPromptIds(workflowId)`
+     - `getActivePromptForWorkflow(workflowId)` (if needed)
+   - Redefine `isIdle` as `runningPromptIds.length === 0`.
+   - Keep backward-compat getters but scope to:
+     - active workflow tab, or
+     - "most recently started prompt".
+
+2. Update event handlers to write prompt-scoped state:
+   - `execution_start` creates prompt state.
+   - `progress_state` merges into `promptStates[promptId].nodeProgressStates`.
+   - `execution_success/error/interrupted` remove prompt state only for that id.
+   - Preserve initialization tracking per prompt.
+
+## Phase 2: Prompt-aware node progress and canvas updates
+1. Update graph/node progress to be scoped to the active workflow tab:
+   - Derive `nodeLocationProgressStates` from the prompt(s) mapped to the
+     active workflow only.
+   - Ensure `GraphCanvas.vue` applies progress for active workflow only.
+2. Update vue-node execution composables to use workflow-scoped progress.
+3. Update `groupNode` progress rendering to use prompt-scoped state.
+
+## Phase 3: Outputs and previews isolation
+1. Introduce per-workflow output maps in `imagePreviewStore`:
+   - `outputsByWorkflowId[workflowId][nodeLocatorId]`.
+   - `previewsByWorkflowId[workflowId][nodeLocatorId]`.
+2. When switching active workflow tab:
+   - Swap `app.nodeOutputs` and `app.nodePreviewImages` to the selected map.
+3. Update `executed` and `b_preview_with_metadata` handlers to:
+   - Use `prompt_id -> workflowId` mapping to store outputs/previews in the
+     correct workflow bucket.
+4. Update `ChangeTracker` and history loading paths to restore per-workflow
+   outputs without overwriting other workflows.
+
+## Phase 4: UI updates for multi-run visibility
+1. Queue overlay:
+   - `useQueueProgress` to compute per-job progress for all running tasks.
+   - `useJobList` to attach progress to each running item, not just one.
+   - `QueueOverlayActive` to show aggregated or multi-job state.
+2. Actionbar interrupt:
+   - Route interrupt to prompt(s) for the active workflow tab.
+   - Optionally add a "stop all running" action.
+3. Browser tab title + favicon:
+   - Use aggregate progress (e.g., max or average of running jobs) or show
+     count of running jobs with a generic progress indicator.
+
+## Phase 5: Browser-tab concurrency policy
+1. Decide and implement filtering:
+   - Option A: show only jobs for the current `client_id` in the UI.
+   - Option B: show all jobs for the user, but mark which client started them.
+2. Apply consistent filtering in:
+   - queue overlay,
+   - completion summary,
+   - progress favicon/title.
+
+## Phase 6: Tests and validation
+- Unit tests:
+  - `executionStore` selectors and lifecycle per prompt.
+  - `useQueueProgress` and `useJobList` showing per-job progress.
+- Update existing stories/tests that assume single `activePromptId`.
+- Manual validation checklist:
+  - Two workflows running in two in-app tabs: progress and outputs isolated.
+  - Two browser tabs running distinct workflows: no cross-talk in UI.
+  - Interrupt from actionbar affects intended prompt(s).
+
+## Phase 7: Rollout and cleanup
+- Remove deprecated single-prompt fields after migration is stable.
+- Update documentation/comments where prompt-scoped behavior is required.
+- Coordinate backend/WS schema changes with `../backend-3` and `../cloud-3`.

pnpm-workspace.yaml

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

scripts/cicd/extract-playwright-counts.ts

@@ -10,158 +10,37 @@ 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
- * @param baseUrl - Base URL of the deployed report (for trace links)
- * @returns Test counts { passed, failed, flaky, skipped, total, failures }
+ * @returns Test counts { passed, failed, flaky, skipped, total }
  */
-function extractTestCounts(reportDir: string, baseUrl?: string): TestCounts {
+function extractTestCounts(reportDir: string): TestCounts {
   const counts: TestCounts = {
     passed: 0,
     failed: 0,
     flaky: 0,
     skipped: 0,
-    total: 0,
-    failures: []
+    total: 0
   }
 
   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: FullReportData = JSON.parse(
+      const reportJson: ReportData = JSON.parse(
         fs.readFileSync(jsonReportFile, 'utf-8')
       )
       if (reportJson.stats) {
@@ -175,12 +54,6 @@ function extractTestCounts(reportDir: string, baseUrl?: 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
       }
     }
@@ -296,18 +169,15 @@ function extractTestCounts(reportDir: string, baseUrl?: 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> [base-url]'
-  )
+  console.error('Usage: extract-playwright-counts.ts <report-directory>')
   process.exit(1)
 }
 
-const counts = extractTestCounts(reportDir, baseUrl)
+const counts = extractTestCounts(reportDir)
 
 // Output as JSON for easy parsing in shell script
-process.stdout.write(JSON.stringify(counts) + '\n')
+console.log(JSON.stringify(counts))
 
-export { extractTestCounts, extractFailedTests }
+export { extractTestCounts }

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

@@ -134,22 +134,23 @@ post_comment() {
 
 # Main execution
 if [ "$STATUS" = "starting" ]; then
-    # Post concise starting comment
+    # Post starting comment
     comment=$(cat <<EOF
 $COMMENT_MARKER
-## 🎭 Playwright Tests: ⏳ Running...
+## 🎭 Playwright Test Results
 
-Tests started at $START_TIME UTC
+<img alt='loading' src='https://github.com/user-attachments/assets/755c86ee-e445-4ea8-bc2c-cca85df48686' width='14px' height='14px'/> **Tests are starting...**
 
-<details>
-<summary>📊 Browser Tests</summary>
+⏰ Started at: $START_TIME UTC
 
-- **chromium**: Running...
-- **chromium-0.5x**: Running...
-- **chromium-2x**: Running...
-- **mobile-chrome**: Running...
+### 🚀 Running Tests
+- 🧪 **chromium**: Running tests...
+- 🧪 **chromium-0.5x**: Running tests...
+- 🧪 **chromium-2x**: Running tests...
+- 🧪 **mobile-chrome**: Running tests...
 
-</details>
+---
+⏱️ Please wait while tests are running...
 EOF
 )
     post_comment "$comment"
@@ -188,8 +189,7 @@ else
                 
                 if command -v tsx > /dev/null 2>&1 && [ -f "$EXTRACT_SCRIPT" ]; then
                     echo "Extracting counts from $REPORT_DIR using $EXTRACT_SCRIPT" >&2
-                    # Pass the base URL so we can generate trace links
-                    counts=$(tsx "$EXTRACT_SCRIPT" "$REPORT_DIR" "$url" 2>&1 || echo '{}')
+                    counts=$(tsx "$EXTRACT_SCRIPT" "$REPORT_DIR" 2>&1 || echo '{}')
                     echo "Extracted counts for $browser: $counts" >&2
                     echo "$counts" > "$temp_dir/$i.counts"
                 else
@@ -286,74 +286,43 @@ else
     # Determine overall status
     if [ $total_failed -gt 0 ]; then
         status_icon="❌"
-        status_text="Failed"
+        status_text="Some tests failed"
     elif [ $total_flaky -gt 0 ]; then
         status_icon="⚠️"
-        status_text="Passed with flaky tests"
+        status_text="Tests passed with flaky tests"
     elif [ $total_tests -gt 0 ]; then
         status_icon="✅"
-        status_text="Passed"
+        status_text="All tests passed!"
     else
         status_icon="🕵🏻"
-        status_text="No test results"
+        status_text="No test results found"
     fi
     
-    # Generate concise completion comment
+    # Generate completion comment
     comment="$COMMENT_MARKER
-## 🎭 Playwright Tests: $status_icon **$status_text**"
+## 🎭 Playwright Test Results
+
+$status_icon **$status_text**
+
+⏰ Completed at: $(date -u '+%m/%d/%Y, %I:%M:%S %p') UTC"
 
     # Add summary counts if we have test data
     if [ $total_tests -gt 0 ]; then
         comment="$comment
 
-**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
+### 📈 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 '')"
     fi
     
-    # Add browser reports in collapsible section
     comment="$comment
 
-<details>
-<summary>📊 Browser Reports</summary>
-
-"
+### 📊 Test Reports by Browser"
     
-    # Add browser results
+    # Add browser results with individual counts
     i=0
     IFS=' ' read -r -a browser_array <<< "$BROWSERS"
     IFS=' ' read -r -a url_array <<< "$urls"
@@ -380,7 +349,7 @@ $test_line"
                 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
@@ -389,10 +358,10 @@ $test_line"
             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
@@ -400,7 +369,8 @@ $test_line"
     
     comment="$comment
 
-</details>"
+---
+🎉 Click on the links above to view detailed test results for each browser configuration."
     
     post_comment "$comment"
 fi

src/components/MenuHamburger.vue

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

src/components/TopMenuSection.vue

@@ -20,14 +20,9 @@
             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>
 
@@ -54,16 +49,13 @@
             <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-base-foreground"
+              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"
             >
               {{ queuedCount }}
             </span>
           </Button>
-          <CurrentUserButton
-            v-if="isLoggedIn && !isIntegratedTabBar"
-            class="shrink-0"
-          />
-          <LoginButton v-else-if="isDesktop && !isIntegratedTabBar" />
+          <CurrentUserButton v-if="isLoggedIn" class="shrink-0" />
+          <LoginButton v-else-if="isDesktop" />
           <Button
             v-if="!isRightSidePanelOpen"
             v-tooltip.bottom="rightSidePanelTooltipConfig"
@@ -99,19 +91,14 @@ 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 { useCommandStore } from '@/stores/commandStore'
-import { useQueueStore, useQueueUIStore } from '@/stores/queueStore'
+import { useQueueStore } 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()
@@ -119,19 +106,10 @@ const { isLoggedIn } = useCurrentUser()
 const isDesktop = isElectron()
 const { t } = useI18n()
 const { toastErrorHandler } = useErrorHandling()
-const commandStore = useCommandStore()
+const isQueueOverlayExpanded = ref(false)
 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'))
 )
@@ -139,12 +117,6 @@ 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(() =>
@@ -161,7 +133,7 @@ onMounted(() => {
 })
 
 const toggleQueueOverlay = () => {
-  commandStore.execute('Comfy.Queue.ToggleOverlay')
+  isQueueOverlayExpanded.value = !isQueueOverlayExpanded.value
 }
 
 const openCustomNodeManager = async () => {

src/components/actionbar/ComfyRunButton/ComfyQueueButton.vue

@@ -22,13 +22,12 @@
             value: item.tooltip,
             showDelay: 600
           }"
-          :variant="item.key === queueMode ? 'primary' : 'secondary'"
-          size="sm"
-          class="w-full justify-start"
-        >
-          <i v-if="item.icon" :class="item.icon" />
-          {{ String(item.label ?? '') }}
-        </Button>
+          :label="String(item.label ?? '')"
+          :icon="item.icon"
+          :severity="item.key === queueMode ? 'primary' : 'secondary'"
+          size="small"
+          text
+        />
       </template>
     </SplitButton>
     <BatchCountEdit />
@@ -37,12 +36,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'

src/components/bottomPanel/BottomPanel.vue

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

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

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

src/components/breadcrumb/SubgraphBreadcrumb.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="subgraph-breadcrumb flex w-auto drop-shadow-[var(--interface-panel-drop-shadow)]"
+    class="subgraph-breadcrumb w-auto drop-shadow-[var(--interface-panel-drop-shadow)]"
     :class="{
       'subgraph-breadcrumb-collapse': collapseTabs,
       'subgraph-breadcrumb-overflow': overflowingTabs
@@ -13,37 +13,17 @@
       '--p-breadcrumb-icon-width': `${ICON_WIDTH}px`
     }"
   >
-    <Button
-      class="context-menu-button pointer-events-auto h-8 w-8 shrink-0 border border-transparent bg-transparent p-0 transition-all hover:rounded-lg hover:border-interface-stroke hover:bg-comfy-menu-bg"
-      icon="pi pi-bars"
-      text
-      severity="secondary"
-      size="small"
-      @click="handleMenuClick"
-    />
-    <Button
-      v-if="isInSubgraph"
-      class="back-button pointer-events-auto h-8 w-8 shrink-0 border border-transparent bg-transparent p-0 transition-all hover:rounded-lg hover:border-interface-stroke hover:bg-comfy-menu-bg"
-      text
-      severity="secondary"
-      size="small"
-      @click="handleBackClick"
-    >
-      <i class="icon-[lucide--undo-2]" />
-    </Button>
     <Breadcrumb
       ref="breadcrumbRef"
       class="w-fit rounded-lg p-0"
-      :class="{ hidden: !isInSubgraph }"
       :model="items"
       :pt="{ item: { class: 'pointer-events-auto' } }"
       :aria-label="$t('g.graphNavigation')"
     >
       <template #item="{ item }">
         <SubgraphBreadcrumbItem
-          :ref="(el) => setItemRef(item, el)"
           :item="item"
-          :is-active="item.key === activeItemKey"
+          :is-active="item === items.at(-1)"
         />
       </template>
       <template #separator
@@ -55,7 +35,6 @@
 
 <script setup lang="ts">
 import Breadcrumb from 'primevue/breadcrumb'
-import Button from 'primevue/button'
 import type { MenuItem } from 'primevue/menuitem'
 import { computed, onUpdated, ref, watch } from 'vue'
 
@@ -64,7 +43,6 @@ import { useOverflowObserver } from '@/composables/element/useOverflowObserver'
 import { useTelemetry } from '@/platform/telemetry'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
-import { useCommandStore } from '@/stores/commandStore'
 import { useSubgraphNavigationStore } from '@/stores/subgraphNavigationStore'
 import { useSubgraphStore } from '@/stores/subgraphStore'
 import { forEachSubgraphNode } from '@/utils/graphTraversalUtil'
@@ -77,12 +55,6 @@ const ICON_WIDTH = 20
 const workflowStore = useWorkflowStore()
 const navigationStore = useSubgraphNavigationStore()
 const breadcrumbRef = ref<InstanceType<typeof Breadcrumb>>()
-const rootItemRef = ref<InstanceType<typeof SubgraphBreadcrumbItem>>()
-const setItemRef = (item: MenuItem, el: unknown) => {
-  if (item.key === 'root') {
-    rootItemRef.value = el as InstanceType<typeof SubgraphBreadcrumbItem>
-  }
-}
 const workflowName = computed(() => workflowStore.activeWorkflow?.filename)
 const isBlueprint = computed(() =>
   useSubgraphStore().isSubgraphBlueprint(workflowStore.activeWorkflow)
@@ -90,28 +62,17 @@ const isBlueprint = computed(() =>
 const collapseTabs = ref(false)
 const overflowingTabs = ref(false)
 
-const isInSubgraph = computed(() => navigationStore.navigationStack.length > 0)
+const breadcrumbElement = computed(() => {
+  if (!breadcrumbRef.value) return null
 
-const home = computed(() => ({
-  label: workflowName.value,
-  icon: 'pi pi-home',
-  key: 'root',
-  isBlueprint: isBlueprint.value,
-  command: () => {
-    useTelemetry()?.trackUiButtonClicked({
-      button_id: 'breadcrumb_subgraph_root_selected'
-    })
-    const canvas = useCanvasStore().getCanvas()
-    if (!canvas.graph) throw new TypeError('Canvas has no graph')
-
-    canvas.setGraph(canvas.graph.rootGraph)
-  }
-}))
+  const el = (breadcrumbRef.value as unknown as { $el: HTMLElement }).$el
+  const list = el?.querySelector('.p-breadcrumb-list') as HTMLElement
+  return list
+})
 
 const items = computed(() => {
   const items = navigationStore.navigationStack.map<MenuItem>((subgraph) => ({
     label: subgraph.name,
-    key: `subgraph-${subgraph.id}`,
     command: () => {
       useTelemetry()?.trackUiButtonClicked({
         button_id: 'breadcrumb_subgraph_item_selected'
@@ -134,26 +95,21 @@ const items = computed(() => {
   return [home.value, ...items]
 })
 
-const activeItemKey = computed(() => items.value.at(-1)?.key)
+const home = computed(() => ({
+  label: workflowName.value,
+  icon: 'pi pi-home',
+  key: 'root',
+  isBlueprint: isBlueprint.value,
+  command: () => {
+    useTelemetry()?.trackUiButtonClicked({
+      button_id: 'breadcrumb_subgraph_root_selected'
+    })
+    const canvas = useCanvasStore().getCanvas()
+    if (!canvas.graph) throw new TypeError('Canvas has no graph')
 
-const handleMenuClick = (event: MouseEvent) => {
-  useTelemetry()?.trackUiButtonClicked({
-    button_id: 'breadcrumb_subgraph_menu_selected'
-  })
-  rootItemRef.value?.toggleMenu(event)
-}
-
-const handleBackClick = () => {
-  void useCommandStore().execute('Comfy.Graph.ExitSubgraph')
-}
-
-const breadcrumbElement = computed(() => {
-  if (!breadcrumbRef.value) return null
-
-  const el = (breadcrumbRef.value as unknown as { $el: HTMLElement }).$el
-  const list = el?.querySelector('.p-breadcrumb-list') as HTMLElement
-  return list
-})
+    canvas.setGraph(canvas.graph.rootGraph)
+  }
+}))
 
 // Check for overflow on breadcrumb items and collapse/expand the breadcrumb to fit
 let overflowObserver: ReturnType<typeof useOverflowObserver> | undefined
@@ -233,18 +189,13 @@ onUpdated(() => {
 }
 
 :deep(.p-breadcrumb-item) {
-  @apply flex items-center overflow-hidden h-8;
+  @apply flex items-center overflow-hidden;
   min-width: calc(var(--p-breadcrumb-item-min-width) + 1rem);
-  border: 1px solid transparent;
-  background-color: transparent;
-  transition: all 0.2s;
   /* Collapse middle items first */
   flex-shrink: 10000;
 }
 
 :deep(.p-breadcrumb-separator) {
-  border: 1px solid transparent;
-  background-color: transparent;
   display: flex;
   padding: 0 var(--p-breadcrumb-item-margin);
 }
@@ -254,9 +205,11 @@ onUpdated(() => {
     calc(var(--p-breadcrumb-item-margin) + var(--p-breadcrumb-item-padding));
 }
 
-:deep(.p-breadcrumb-item:hover) {
-  @apply rounded-lg;
-  border-color: var(--interface-stroke);
+:deep(.p-breadcrumb-separator),
+:deep(.p-breadcrumb-item) {
+  @apply h-12;
+  border-top: 1px solid var(--interface-stroke);
+  border-bottom: 1px solid var(--interface-stroke);
   background-color: var(--comfy-menu-bg);
 }
 
@@ -265,8 +218,10 @@ onUpdated(() => {
 }
 
 :deep(.p-breadcrumb-item:first-child) {
+  @apply rounded-l-lg;
   /* Then collapse the root workflow */
   flex-shrink: 5000;
+  border-left: 1px solid var(--interface-stroke);
 
   .p-breadcrumb-item-link {
     padding-left: var(--p-breadcrumb-item-padding);
@@ -274,10 +229,13 @@ onUpdated(() => {
 }
 
 :deep(.p-breadcrumb-item:last-child) {
+  @apply rounded-r-lg;
   /* Then collapse the active item */
   flex-shrink: 1;
+  border-right: 1px solid var(--interface-stroke);
 }
 
+:deep(.p-breadcrumb-item-link:hover),
 :deep(.p-breadcrumb-item-link-menu-visible) {
   background-color: color-mix(
     in srgb,

src/components/breadcrumb/SubgraphBreadcrumbItem.vue

@@ -7,7 +7,7 @@
     }"
     draggable="false"
     href="#"
-    class="p-breadcrumb-item-link h-8 cursor-pointer px-2"
+    class="p-breadcrumb-item-link h-12 cursor-pointer px-2"
     :class="{
       'flex items-center gap-1': isActive,
       'p-breadcrumb-item-link-menu-visible': menu?.overlayVisible,
@@ -25,7 +25,7 @@
     <i v-if="isActive" class="pi pi-angle-down text-[10px]"></i>
   </a>
   <Menu
-    v-if="isActive || isRoot"
+    v-if="isActive"
     ref="menu"
     :model="menuItems"
     :popup="true"
@@ -59,7 +59,6 @@ import Tag from 'primevue/tag'
 import { computed, nextTick, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import { useWorkflowActionsMenu } from '@/composables/useWorkflowActionsMenu'
 import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
 import {
   ComfyWorkflow,
@@ -136,28 +135,79 @@ const tooltipText = computed(() => {
   return props.item.label
 })
 
-const startRename = async () => {
-  // Check if element is hidden (collapsed breadcrumb)
-  // When collapsed, root item is hidden via CSS display:none, so use rename command
-  if (isRoot && wrapperRef.value?.offsetParent === null) {
-    await useCommandStore().execute('Comfy.RenameWorkflow')
-    return
-  }
-
-  isEditing.value = true
-  itemLabel.value = props.item.label as string
-  void nextTick(() => {
-    if (itemInputRef.value?.$el) {
-      itemInputRef.value.$el.focus()
-      itemInputRef.value.$el.select()
-      if (wrapperRef.value) {
-        itemInputRef.value.$el.style.width = `${Math.max(200, wrapperRef.value.offsetWidth)}px`
+const menuItems = computed<MenuItem[]>(() => {
+  return [
+    {
+      label: t('g.rename'),
+      icon: 'pi pi-pencil',
+      command: startRename
+    },
+    {
+      label: t('breadcrumbsMenu.duplicate'),
+      icon: 'pi pi-copy',
+      command: async () => {
+        await workflowService.duplicateWorkflow(workflowStore.activeWorkflow!)
+      },
+      visible: isRoot && !props.item.isBlueprint
+    },
+    {
+      separator: true,
+      visible: isRoot
+    },
+    {
+      label: t('menuLabels.Save'),
+      icon: 'pi pi-save',
+      command: async () => {
+        await useCommandStore().execute('Comfy.SaveWorkflow')
+      },
+      visible: isRoot
+    },
+    {
+      label: t('menuLabels.Save As'),
+      icon: 'pi pi-save',
+      command: async () => {
+        await useCommandStore().execute('Comfy.SaveWorkflowAs')
+      },
+      visible: isRoot
+    },
+    {
+      separator: true
+    },
+    {
+      label: t('breadcrumbsMenu.clearWorkflow'),
+      icon: 'pi pi-trash',
+      command: async () => {
+        await useCommandStore().execute('Comfy.ClearWorkflow')
       }
+    },
+    {
+      separator: true,
+      visible: props.item.key === 'root' && props.item.isBlueprint
+    },
+    {
+      label: t('subgraphStore.publish'),
+      icon: 'pi pi-copy',
+      command: async () => {
+        await workflowService.saveWorkflowAs(workflowStore.activeWorkflow!)
+      },
+      visible: props.item.key === 'root' && props.item.isBlueprint
+    },
+    {
+      separator: true,
+      visible: isRoot
+    },
+    {
+      label: props.item.isBlueprint
+        ? t('breadcrumbsMenu.deleteBlueprint')
+        : t('breadcrumbsMenu.deleteWorkflow'),
+      icon: 'pi pi-times',
+      command: async () => {
+        await workflowService.deleteWorkflow(workflowStore.activeWorkflow!)
+      },
+      visible: isRoot
     }
-  })
-}
-
-const { menuItems } = useWorkflowActionsMenu(startRename, { isRoot })
+  ]
+})
 
 const handleClick = (event: MouseEvent) => {
   if (isEditing.value) {
@@ -178,6 +228,20 @@ const handleClick = (event: MouseEvent) => {
   }
 }
 
+const startRename = () => {
+  isEditing.value = true
+  itemLabel.value = props.item.label as string
+  void nextTick(() => {
+    if (itemInputRef.value?.$el) {
+      itemInputRef.value.$el.focus()
+      itemInputRef.value.$el.select()
+      if (wrapperRef.value) {
+        itemInputRef.value.$el.style.width = `${Math.max(200, wrapperRef.value.offsetWidth)}px`
+      }
+    }
+  })
+}
+
 const inputBlur = async (doRename: boolean) => {
   if (doRename) {
     await rename(itemLabel.value, props.item.label as string)
@@ -185,14 +249,6 @@ const inputBlur = async (doRename: boolean) => {
 
   isEditing.value = false
 }
-
-const toggleMenu = (event: MouseEvent) => {
-  menu.value?.toggle(event)
-}
-
-defineExpose({
-  toggleMenu
-})
 </script>
 
 <style scoped>

src/components/button/IconGroup.vue

@@ -2,8 +2,7 @@
   <div
     :class="
       cn(
-        '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
+        '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'
       )
     "
   >
@@ -13,8 +12,4 @@
 
 <script setup lang="ts">
 import { cn } from '@/utils/tailwindUtil'
-
-const { backgroundClass } = defineProps<{
-  backgroundClass?: string
-}>()
 </script>

src/components/common/BackgroundImageUpload.vue

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

src/components/common/CustomizationDialog.vue

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

src/components/common/EditableText.test.ts

@@ -51,7 +51,7 @@ describe('EditableText', () => {
       isEditing: true
     })
     await wrapper.findComponent(InputText).setValue('New Text')
-    await wrapper.findComponent(InputText).trigger('keydown.enter')
+    await wrapper.findComponent(InputText).trigger('keyup.enter')
     // Blur event should have been triggered
     expect(wrapper.findComponent(InputText).element).not.toBe(
       document.activeElement
@@ -79,7 +79,7 @@ describe('EditableText', () => {
     await wrapper.findComponent(InputText).setValue('Modified Text')
 
     // Press escape
-    await wrapper.findComponent(InputText).trigger('keydown.escape')
+    await wrapper.findComponent(InputText).trigger('keyup.escape')
 
     // Should emit cancel event
     expect(wrapper.emitted('cancel')).toBeTruthy()
@@ -103,7 +103,7 @@ describe('EditableText', () => {
     await wrapper.findComponent(InputText).setValue('Modified Text')
 
     // Press escape (which triggers blur internally)
-    await wrapper.findComponent(InputText).trigger('keydown.escape')
+    await wrapper.findComponent(InputText).trigger('keyup.escape')
 
     // Manually trigger blur to simulate the blur that happens after escape
     await wrapper.findComponent(InputText).trigger('blur')
@@ -120,7 +120,7 @@ describe('EditableText', () => {
       isEditing: true
     })
     await enterWrapper.findComponent(InputText).setValue('Saved Text')
-    await enterWrapper.findComponent(InputText).trigger('keydown.enter')
+    await enterWrapper.findComponent(InputText).trigger('keyup.enter')
     // Trigger blur that happens after enter
     await enterWrapper.findComponent(InputText).trigger('blur')
     expect(enterWrapper.emitted('edit')).toBeTruthy()
@@ -133,7 +133,7 @@ describe('EditableText', () => {
       isEditing: true
     })
     await escapeWrapper.findComponent(InputText).setValue('Cancelled Text')
-    await escapeWrapper.findComponent(InputText).trigger('keydown.escape')
+    await escapeWrapper.findComponent(InputText).trigger('keyup.escape')
     expect(escapeWrapper.emitted('cancel')).toBeTruthy()
     expect(escapeWrapper.emitted('edit')).toBeFalsy()
   })

src/components/common/EditableText.vue

@@ -3,7 +3,7 @@
     <span v-if="!isEditing">
       {{ modelValue }}
     </span>
-    <!-- Avoid double triggering finishEditing event when keydown.enter is triggered -->
+    <!-- Avoid double triggering finishEditing event when keyup.enter is triggered -->
     <InputText
       v-else
       ref="inputRef"
@@ -18,8 +18,8 @@
           ...inputAttrs
         }
       }"
-      @keydown.enter.capture.stop="blurInputElement"
-      @keydown.escape.capture.stop="cancelEditing"
+      @keyup.enter.capture.stop="blurInputElement"
+      @keyup.escape.stop="cancelEditing"
       @click.stop
       @contextmenu.stop
       @pointerdown.stop.capture

src/components/common/ElectronFileDownload.vue

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

src/components/common/FileDownload.vue

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

src/components/common/FormImageUpload.vue

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

src/components/common/NoResultsPlaceholder.vue

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

src/components/common/OverlayIcon.vue

@@ -1,65 +0,0 @@
-<template>
-  <span class="relative inline-flex items-center justify-center size-[1em]">
-    <i :class="mainIcon" class="text-[1em]" />
-    <i
-      :class="
-        cn(
-          subIcon,
-          'absolute leading-none pointer-events-none',
-          positionX === 'left' ? 'left-0' : 'right-0',
-          positionY === 'top' ? 'top-0' : 'bottom-0'
-        )
-      "
-      :style="subIconStyle"
-    />
-  </span>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-
-import { cn } from '@/utils/tailwindUtil'
-
-type Position = 'top' | 'bottom' | 'left' | 'right'
-
-export interface OverlayIconProps {
-  mainIcon: string
-  subIcon: string
-  positionX?: Position
-  positionY?: Position
-  offsetX?: number
-  offsetY?: number
-  subIconScale?: number
-}
-const {
-  mainIcon,
-  subIcon,
-  positionX = 'right',
-  positionY = 'bottom',
-  offsetX = 0,
-  offsetY = 0,
-  subIconScale = 0.6
-} = defineProps<OverlayIconProps>()
-
-const textShadow = [
-  `-1px -1px 0 rgba(0, 0, 0, 0.7)`,
-  `1px -1px 0 rgba(0, 0, 0, 0.7)`,
-  `-1px 1px 0 rgba(0, 0, 0, 0.7)`,
-  `1px 1px 0 rgba(0, 0, 0, 0.7)`,
-  `-1px 0 0 rgba(0, 0, 0, 0.7)`,
-  `1px 0 0 rgba(0, 0, 0, 0.7)`,
-  `0 -1px 0 rgba(0, 0, 0, 0.7)`,
-  `0 1px 0 rgba(0, 0, 0, 0.7)`
-].join(', ')
-
-const subIconStyle = computed(() => ({
-  fontSize: `${subIconScale}em`,
-  textShadow,
-  ...(offsetX !== 0 && {
-    [positionX === 'left' ? 'left' : 'right']: `${offsetX}px`
-  }),
-  ...(offsetY !== 0 && {
-    [positionY === 'top' ? 'top' : 'bottom']: `${offsetY}px`
-  })
-}))
-</script>

src/components/common/StatusBadge.stories.ts

@@ -1,95 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3-vite'
-
-import StatusBadge from './StatusBadge.vue'
-
-const meta = {
-  title: 'Common/StatusBadge',
-  component: StatusBadge,
-  tags: ['autodocs'],
-  argTypes: {
-    label: { control: 'text' },
-    severity: {
-      control: 'select',
-      options: ['default', 'secondary', 'warn', 'danger', 'contrast']
-    },
-    variant: {
-      control: 'select',
-      options: ['label', 'dot', 'circle']
-    }
-  },
-  args: {
-    label: 'Status',
-    severity: 'default'
-  }
-} satisfies Meta<typeof StatusBadge>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {}
-
-export const Failed: Story = {
-  args: {
-    label: 'Failed',
-    severity: 'danger'
-  }
-}
-
-export const Finished: Story = {
-  args: {
-    label: 'Finished',
-    severity: 'contrast'
-  }
-}
-
-export const Dot: Story = {
-  args: {
-    label: undefined,
-    variant: 'dot',
-    severity: 'danger'
-  }
-}
-
-export const Circle: Story = {
-  args: {
-    label: '3',
-    variant: 'circle'
-  }
-}
-
-export const AllSeverities: Story = {
-  render: () => ({
-    components: { StatusBadge },
-    template: `
-      <div class="flex items-center gap-2">
-        <StatusBadge label="Default" severity="default" />
-        <StatusBadge label="Secondary" severity="secondary" />
-        <StatusBadge label="Warn" severity="warn" />
-        <StatusBadge label="Danger" severity="danger" />
-        <StatusBadge label="Contrast" severity="contrast" />
-      </div>
-    `
-  })
-}
-
-export const AllVariants: Story = {
-  render: () => ({
-    components: { StatusBadge },
-    template: `
-      <div class="flex items-center gap-4">
-        <div class="flex flex-col items-center gap-1">
-          <StatusBadge label="Label" variant="label" />
-          <span class="text-xs text-muted">label</span>
-        </div>
-        <div class="flex flex-col items-center gap-1">
-          <StatusBadge variant="dot" severity="danger" />
-          <span class="text-xs text-muted">dot</span>
-        </div>
-        <div class="flex flex-col items-center gap-1">
-          <StatusBadge label="5" variant="circle" />
-          <span class="text-xs text-muted">circle</span>
-        </div>
-      </div>
-    `
-  })
-}

src/components/common/StatusBadge.vue

@@ -1,27 +0,0 @@
-<script setup lang="ts">
-import { statusBadgeVariants } from './statusBadge.variants'
-import type { StatusBadgeVariants } from './statusBadge.variants'
-
-const {
-  label,
-  severity = 'default',
-  variant
-} = defineProps<{
-  label?: string | number
-  severity?: StatusBadgeVariants['severity']
-  variant?: StatusBadgeVariants['variant']
-}>()
-</script>
-
-<template>
-  <span
-    :class="
-      statusBadgeVariants({
-        severity,
-        variant: variant ?? (label == null ? 'dot' : 'label')
-      })
-    "
-  >
-    {{ label }}
-  </span>
-</template>

src/components/common/TreeExplorerTreeNode.vue

@@ -28,7 +28,7 @@
       />
     </div>
     <div
-      class="node-actions touch:opacity-100 motion-safe:opacity-0 motion-safe:group-hover/tree-node:opacity-100"
+      class="node-actions motion-safe:opacity-0 motion-safe:group-hover/tree-node:opacity-100"
     >
       <slot name="actions" :node="props.node" />
     </div>

src/components/common/VirtualGrid.vue

@@ -1,20 +1,16 @@
 <template>
-  <div
-    ref="container"
-    class="h-full overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-(--dialog-surface)"
-  >
-    <div :style="topSpacerStyle" />
-    <div :style="mergedGridStyle">
-      <div
-        v-for="item in renderedItems"
-        :key="item.key"
-        class="transition-[width] duration-150 ease-out"
-        data-virtual-grid-item
-      >
+  <div ref="container" class="scroll-container">
+    <div :style="{ height: `${(state.start / cols) * itemHeight}px` }" />
+    <div :style="gridStyle">
+      <div v-for="item in renderedItems" :key="item.key" data-virtual-grid-item>
         <slot name="item" :item="item" />
       </div>
     </div>
-    <div :style="bottomSpacerStyle" />
+    <div
+      :style="{
+        height: `${((items.length - state.end) / cols) * itemHeight}px`
+      }"
+    />
   </div>
 </template>
 
@@ -32,22 +28,19 @@ type GridState = {
 
 const {
   items,
-  gridStyle,
   bufferRows = 1,
   scrollThrottle = 64,
   resizeDebounce = 64,
   defaultItemHeight = 200,
-  defaultItemWidth = 200,
-  maxColumns = Infinity
+  defaultItemWidth = 200
 } = defineProps<{
   items: (T & { key: string })[]
-  gridStyle: CSSProperties
+  gridStyle: Partial<CSSProperties>
   bufferRows?: number
   scrollThrottle?: number
   resizeDebounce?: number
   defaultItemHeight?: number
   defaultItemWidth?: number
-  maxColumns?: number
 }>()
 
 const emit = defineEmits<{
@@ -66,18 +59,7 @@ const { y: scrollY } = useScroll(container, {
   eventListenerOptions: { passive: true }
 })
 
-const cols = computed(() =>
-  Math.min(Math.floor(width.value / itemWidth.value) || 1, maxColumns)
-)
-
-const mergedGridStyle = computed<CSSProperties>(() => {
-  if (maxColumns === Infinity) return gridStyle
-  return {
-    ...gridStyle,
-    gridTemplateColumns: `repeat(${maxColumns}, minmax(0, 1fr))`
-  }
-})
-
+const cols = computed(() => Math.floor(width.value / itemWidth.value) || 1)
 const viewRows = computed(() => Math.ceil(height.value / itemHeight.value))
 const offsetRows = computed(() => Math.floor(scrollY.value / itemHeight.value))
 const isValidGrid = computed(() => height.value && width.value && items?.length)
@@ -101,16 +83,6 @@ const renderedItems = computed(() =>
   isValidGrid.value ? items.slice(state.value.start, state.value.end) : []
 )
 
-function rowsToHeight(rows: number): string {
-  return `${(rows / cols.value) * itemHeight.value}px`
-}
-const topSpacerStyle = computed<CSSProperties>(() => ({
-  height: rowsToHeight(state.value.start)
-}))
-const bottomSpacerStyle = computed<CSSProperties>(() => ({
-  height: rowsToHeight(items.length - state.value.end)
-}))
-
 whenever(
   () => state.value.isNearEnd,
   () => {
@@ -137,6 +109,15 @@ const onResize = debounce(updateItemSize, resizeDebounce)
 watch([width, height], onResize, { flush: 'post' })
 whenever(() => items, updateItemSize, { flush: 'post' })
 onBeforeUnmount(() => {
-  onResize.cancel()
+  onResize.cancel() // Clear pending debounced calls
 })
 </script>
+
+<style scoped>
+.scroll-container {
+  height: 100%;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--dialog-surface) transparent;
+}
+</style>

src/components/common/WorkspaceProfilePic.vue

@@ -1,43 +0,0 @@
-<template>
-  <div
-    class="flex size-8 items-center justify-center rounded-md text-base font-semibold text-white"
-    :style="{
-      background: gradient,
-      textShadow: '0 1px 2px rgba(0, 0, 0, 0.2)'
-    }"
-  >
-    {{ letter }}
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-
-const { workspaceName } = defineProps<{
-  workspaceName: string
-}>()
-
-const letter = computed(() => workspaceName?.charAt(0)?.toUpperCase() ?? '?')
-
-const gradient = computed(() => {
-  const seed = letter.value.charCodeAt(0)
-
-  function mulberry32(a: number) {
-    return function () {
-      let t = (a += 0x6d2b79f5)
-      t = Math.imul(t ^ (t >>> 15), t | 1)
-      t ^= t + Math.imul(t ^ (t >>> 7), t | 61)
-      return ((t ^ (t >>> 14)) >>> 0) / 4294967296
-    }
-  }
-
-  const rand = mulberry32(seed)
-
-  const hue1 = Math.floor(rand() * 360)
-  const hue2 = (hue1 + 40 + Math.floor(rand() * 80)) % 360
-  const sat = 65 + Math.floor(rand() * 20)
-  const light = 55 + Math.floor(rand() * 15)
-
-  return `linear-gradient(135deg, hsl(${hue1}, ${sat}%, ${light}%), hsl(${hue2}, ${sat}%, ${light}%))`
-})
-</script>

src/components/common/statusBadge.variants.ts

@@ -1,26 +0,0 @@
-import type { VariantProps } from 'cva'
-import { cva } from 'cva'
-
-export const statusBadgeVariants = cva({
-  base: 'inline-flex items-center justify-center rounded-full',
-  variants: {
-    severity: {
-      default: 'bg-primary-background text-base-foreground',
-      secondary: 'bg-secondary-background text-base-foreground',
-      warn: 'bg-warning-background text-base-background',
-      danger: 'bg-destructive-background text-white',
-      contrast: 'bg-base-foreground text-base-background'
-    },
-    variant: {
-      label: 'h-3.5 px-1 text-xxxs font-semibold uppercase',
-      dot: 'size-2',
-      circle: 'size-3.5 text-xxxs font-semibold'
-    }
-  },
-  defaultVariants: {
-    severity: 'default',
-    variant: 'label'
-  }
-})
-
-export type StatusBadgeVariants = VariantProps<typeof statusBadgeVariants>

src/components/custom/widget/WorkflowTemplateSelectorDialog.vue

@@ -3,14 +3,17 @@
     :content-title="$t('templateWorkflows.title', 'Workflow Templates')"
     class="workflow-template-selector-dialog"
   >
-    <template #leftPanelHeaderTitle>
-      <i class="icon-[comfy--template]" />
-      <h2 class="text-neutral text-base">
-        {{ $t('sideToolbar.templates', 'Templates') }}
-      </h2>
-    </template>
     <template #leftPanel>
-      <LeftSidePanel v-model="selectedNavItem" :nav-items="navItems" />
+      <LeftSidePanel v-model="selectedNavItem" :nav-items="navItems">
+        <template #header-icon>
+          <i class="icon-[comfy--template]" />
+        </template>
+        <template #header-title>
+          <span class="text-neutral text-base">{{
+            $t('sideToolbar.templates', 'Templates')
+          }}</span>
+        </template>
+      </LeftSidePanel>
     </template>
 
     <template #header>
@@ -172,7 +175,6 @@
           <!-- Actual Template Cards -->
           <CardContainer
             v-for="template in isLoading ? [] : displayTemplates"
-            v-show="isTemplateVisibleOnDistribution(template)"
             :key="template.name"
             ref="cardRefs"
             size="compact"
@@ -403,8 +405,6 @@ import { useTelemetry } from '@/platform/telemetry'
 import { useTemplateWorkflows } from '@/platform/workflow/templates/composables/useTemplateWorkflows'
 import { useWorkflowTemplatesStore } from '@/platform/workflow/templates/repositories/workflowTemplatesStore'
 import type { TemplateInfo } from '@/platform/workflow/templates/types/template'
-import { TemplateIncludeOnDistributionEnum } from '@/platform/workflow/templates/types/template'
-import { useSystemStatsStore } from '@/stores/systemStatsStore'
 import type { NavGroupData, NavItemData } from '@/types/navTypes'
 import { OnCloseKey } from '@/types/widgetTypes'
 import { createGridStyle } from '@/utils/gridUtil'
@@ -423,30 +423,6 @@ onMounted(() => {
   sessionStartTime.value = Date.now()
 })
 
-const systemStatsStore = useSystemStatsStore()
-
-const distributions = computed(() => {
-  // eslint-disable-next-line no-undef
-  switch (__DISTRIBUTION__) {
-    case 'cloud':
-      return [TemplateIncludeOnDistributionEnum.Cloud]
-    case 'localhost':
-      return [TemplateIncludeOnDistributionEnum.Local]
-    case 'desktop':
-    default:
-      if (systemStatsStore.systemStats?.system.os === 'darwin') {
-        return [
-          TemplateIncludeOnDistributionEnum.Desktop,
-          TemplateIncludeOnDistributionEnum.Mac
-        ]
-      }
-      return [
-        TemplateIncludeOnDistributionEnum.Desktop,
-        TemplateIncludeOnDistributionEnum.Windows
-      ]
-  }
-})
-
 // Wrap onClose to track session end
 const onClose = () => {
   if (isCloud) {
@@ -535,9 +511,6 @@ const allTemplates = computed(() => {
   return workflowTemplatesStore.enhancedTemplates
 })
 
-// Navigation
-const selectedNavItem = ref<string | null>('all')
-
 // Filter templates based on selected navigation item
 const navigationFilteredTemplates = computed(() => {
   if (!selectedNavItem.value) {
@@ -560,40 +533,9 @@ const {
   availableRunsOn,
   filteredCount,
   totalCount,
-  resetFilters,
-  loadFuseOptions
+  resetFilters
 } = useTemplateFiltering(navigationFilteredTemplates)
 
-/**
- * Coordinates state between the selected navigation item and the sort order to
- * create deterministic, predictable behavior.
- * @param source The origin of the change ('nav' or 'sort').
- */
-const coordinateNavAndSort = (source: 'nav' | 'sort') => {
-  const isPopularNav = selectedNavItem.value === 'popular'
-  const isPopularSort = sortBy.value === 'popular'
-
-  if (source === 'nav') {
-    if (isPopularNav && !isPopularSort) {
-      // When navigating to 'Popular' category, automatically set sort to 'Popular'.
-      sortBy.value = 'popular'
-    } else if (!isPopularNav && isPopularSort) {
-      // When navigating away from 'Popular' category while sort is 'Popular', reset sort to default.
-      sortBy.value = 'default'
-    }
-  } else if (source === 'sort') {
-    // When sort is changed away from 'Popular' while in the 'Popular' category,
-    // reset the category to 'All Templates' to avoid a confusing state.
-    if (isPopularNav && !isPopularSort) {
-      selectedNavItem.value = 'all'
-    }
-  }
-}
-
-// Watch for changes from the two sources ('nav' and 'sort') and trigger the coordinator.
-watch(selectedNavItem, () => coordinateNavAndSort('nav'))
-watch(sortBy, () => coordinateNavAndSort('sort'))
-
 // Convert between string array and object array for MultiSelect component
 const selectedModelObjects = computed({
   get() {
@@ -636,6 +578,9 @@ const cardRefs = ref<HTMLElement[]>([])
 // Force re-render key for templates when sorting changes
 const templateListKey = ref(0)
 
+// Navigation
+const selectedNavItem = ref<string | null>('all')
+
 // Search text for model filter
 const modelSearchText = ref<string>('')
 
@@ -700,19 +645,11 @@ const runsOnFilterLabel = computed(() => {
 
 // Sort options
 const sortOptions = computed(() => [
+  { name: t('templateWorkflows.sort.newest', 'Newest'), value: 'newest' },
   {
     name: t('templateWorkflows.sort.default', 'Default'),
     value: 'default'
   },
-  {
-    name: t('templateWorkflows.sort.recommended', 'Recommended'),
-    value: 'recommended'
-  },
-  {
-    name: t('templateWorkflows.sort.popular', 'Popular'),
-    value: 'popular'
-  },
-  { name: t('templateWorkflows.sort.newest', 'Newest'), value: 'newest' },
   {
     name: t('templateWorkflows.sort.vramLowToHigh', 'VRAM Usage (Low to High)'),
     value: 'vram-low-to-high'
@@ -813,10 +750,10 @@ const pageTitle = computed(() => {
 // Initialize templates loading with useAsyncState
 const { isLoading } = useAsyncState(
   async () => {
+    // Run both operations in parallel for better performance
     await Promise.all([
       loadTemplates(),
-      workflowTemplatesStore.loadWorkflowTemplates(),
-      loadFuseOptions()
+      workflowTemplatesStore.loadWorkflowTemplates()
     ])
     return true
   },
@@ -826,14 +763,6 @@ const { isLoading } = useAsyncState(
   }
 )
 
-const isTemplateVisibleOnDistribution = (template: TemplateInfo) => {
-  return (template.includeOnDistributions?.length ?? 0) > 0
-    ? distributions.value.some((d) =>
-        template.includeOnDistributions?.includes(d)
-      )
-    : true
-}
-
 onBeforeUnmount(() => {
   cardRefs.value = [] // Release DOM refs
 })