test: intentionally break color palette test

This is an experiment to observe how GitHub CI/CD test result
comments are formatted when a test fails.

The test now expects a non-existent screenshot file which will
cause the test to fail in CI.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

.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,12 +6,11 @@ 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'],
-  reference: `Special names to keep untranslated: flux, photomaker, clip, vae, cfg, stable audio, stable cascade, stable zero, controlnet, lora, HiDream, Civitai, Hugging Face.
+  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.
   '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/colorPalette.spec.ts

@@ -171,7 +171,8 @@ test.describe('Color Palette', () => {
 
     await comfyPage.setSetting('Comfy.ColorPalette', 'dark')
     await comfyPage.nextFrame()
-    await expect(comfyPage.canvas).toHaveScreenshot('default-color-palette.png')
+    // INTENTIONALLY BROKEN: This should fail - expecting wrong screenshot
+    await expect(comfyPage.canvas).toHaveScreenshot('WRONG-SCREENSHOT-NAME.png')
   })
 
   test('Can add custom color palette', async ({ comfyPage }) => {

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/propertiesPanel/propertiesPanelPosition.spec.ts

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

browser_tests/tests/sidebar/nodeLibrary.spec.ts

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

browser_tests/tests/templates.spec.ts

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

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.8",
   "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);

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,48 +10,56 @@ interface TestStats {
   finished?: number
 }
 
-interface TestResult {
-  status: string
-  duration?: number
-  error?: {
-    message?: string
-    stack?: string
-  }
-  attachments?: Array<{
-    name: string
-    path?: string
-    contentType: string
-  }>
+interface TestLocation {
+  file: string
+  line: number
+  column: number
 }
 
-interface TestCase {
+interface TestAttachment {
+  name: string
+  path?: string
+  contentType: string
+}
+
+interface TestResult {
+  status: string
+  duration: number
+  errors?: Array<{ message?: string; stack?: string }>
+  attachments?: TestAttachment[]
+}
+
+interface Test {
   title: string
-  ok: boolean
-  outcome: string
-  results: TestResult[]
+  location?: TestLocation
+  results?: TestResult[]
 }
 
 interface Suite {
   title: string
-  file: string
-  suites?: Suite[]
-  tests?: TestCase[]
-}
-
-interface FullReportData {
-  stats?: TestStats
   suites?: Suite[]
+  tests?: Test[]
 }
 
 interface ReportData {
   stats?: TestStats
+  suites?: Suite[]
 }
 
-interface FailedTest {
+interface FailingTest {
   name: string
-  file: string
-  traceUrl?: string
-  error?: string
+  filePath: string
+  line: number
+  error: string
+  tracePath?: string
+  failureType?: 'screenshot' | 'expectation' | 'timeout' | 'other'
+}
+
+interface FailureTypeCounts {
+  screenshot: number
+  expectation: number
+  timeout: number
+  other: number
 }
 
 interface TestCounts {
@@ -60,108 +68,131 @@ interface TestCounts {
   flaky: number
   skipped: number
   total: number
-  failures?: FailedTest[]
+  failingTests?: FailingTest[]
+  failureTypes?: FailureTypeCounts
 }
 
 /**
- * Extract failed test details from Playwright report
+ * Categorize the failure type based on error message
  */
-function extractFailedTests(
-  reportData: FullReportData,
-  baseUrl?: string
-): FailedTest[] {
-  const failures: FailedTest[] = []
+function categorizeFailureType(
+  error: string,
+  status: string
+): 'screenshot' | 'expectation' | 'timeout' | 'other' {
+  if (status === 'timedOut') {
+    return 'timeout'
+  }
 
-  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'
+  const errorLower = error.toLowerCase()
 
-    if (hasFailed || isFlaky) {
-      const fullTestName = [...suitePath, test.title]
-        .filter(Boolean)
-        .join(' › ')
-      const failedResult = test.results.find(
-        (r) => r.status === 'failed' || r.status === 'timedOut'
-      )
+  // Screenshot-related errors
+  if (
+    errorLower.includes('screenshot') ||
+    errorLower.includes('snapshot') ||
+    errorLower.includes('toHaveScreenshot') ||
+    errorLower.includes('image comparison') ||
+    errorLower.includes('pixel') ||
+    errorLower.includes('visual')
+  ) {
+    return 'screenshot'
+  }
 
-      // 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)}`
+  // Expectation errors
+  if (
+    errorLower.includes('expect') ||
+    errorLower.includes('assertion') ||
+    errorLower.includes('toEqual') ||
+    errorLower.includes('toBe') ||
+    errorLower.includes('toContain') ||
+    errorLower.includes('toHave') ||
+    errorLower.includes('toMatch')
+  ) {
+    return 'expectation'
+  }
+
+  return 'other'
+}
+
+/**
+ * Recursively extract failing tests from suite structure
+ */
+function extractFailingTests(
+  suite: Suite,
+  failingTests: FailingTest[],
+  reportDir: string
+): void {
+  // Process tests in this suite
+  if (suite.tests) {
+    for (const test of suite.tests) {
+      if (!test.results) continue
+
+      for (const result of test.results) {
+        if (result.status === 'failed' || result.status === 'timedOut') {
+          const error =
+            result.errors?.[0]?.message ||
+            result.errors?.[0]?.stack ||
+            'Test failed'
+
+          // Find trace attachment
+          let tracePath: string | undefined
+          if (result.attachments) {
+            const traceAttachment = result.attachments.find(
+              (att) => att.name === 'trace' || att.contentType === 'application/zip'
+            )
+            if (traceAttachment?.path) {
+              tracePath = traceAttachment.path
+            }
           }
+
+          const failureType = categorizeFailureType(error, result.status)
+
+          failingTests.push({
+            name: test.title,
+            filePath: test.location?.file || 'unknown',
+            line: test.location?.line || 0,
+            error: error.split('\n')[0], // First line of error
+            tracePath,
+            failureType
+          })
         }
       }
-
-      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)
-      }
+  // Recursively process nested suites
+  if (suite.suites) {
+    for (const nestedSuite of suite.suites) {
+      extractFailingTests(nestedSuite, failingTests, reportDir)
     }
   }
-
-  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, failingTests }
  */
-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: []
+    failingTests: [],
+    failureTypes: {
+      screenshot: 0,
+      expectation: 0,
+      timeout: 0,
+      other: 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) {
@@ -176,9 +207,19 @@ function extractTestCounts(reportDir: string, baseUrl?: string): TestCounts {
         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)
+        // Extract failing test details
+        if (reportJson.suites) {
+          for (const suite of reportJson.suites) {
+            extractFailingTests(suite, counts.failingTests, reportDir)
+          }
+        }
+
+        // Count failure types
+        if (counts.failingTests) {
+          for (const test of counts.failingTests) {
+            const type = test.failureType || 'other'
+            counts.failureTypes![type]++
+          }
         }
 
         return counts
@@ -213,6 +254,22 @@ function extractTestCounts(reportDir: string, baseUrl?: string): TestCounts {
             counts.failed = stats.unexpected || 0
             counts.flaky = stats.flaky || 0
             counts.skipped = stats.skipped || 0
+
+            // Extract failing test details
+            if (reportData.suites) {
+              for (const suite of reportData.suites) {
+                extractFailingTests(suite, counts.failingTests!, reportDir)
+              }
+            }
+
+            // Count failure types
+            if (counts.failingTests) {
+              for (const test of counts.failingTests) {
+                const type = test.failureType || 'other'
+                counts.failureTypes![type]++
+              }
+            }
+
             return counts
           }
         } catch (e) {
@@ -240,6 +297,22 @@ function extractTestCounts(reportDir: string, baseUrl?: string): TestCounts {
             counts.failed = stats.unexpected || 0
             counts.flaky = stats.flaky || 0
             counts.skipped = stats.skipped || 0
+
+            // Extract failing test details
+            if (reportData.suites) {
+              for (const suite of reportData.suites) {
+                extractFailingTests(suite, counts.failingTests!, reportDir)
+              }
+            }
+
+            // Count failure types
+            if (counts.failingTests) {
+              for (const test of counts.failingTests) {
+                const type = test.failureType || 'other'
+                counts.failureTypes![type]++
+              }
+            }
+
             return counts
           }
         } catch (e) {
@@ -296,18 +369,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
@@ -252,6 +252,10 @@ else
     total_flaky=0
     total_skipped=0
     total_tests=0
+    total_screenshot_failures=0
+    total_expectation_failures=0
+    total_timeout_failures=0
+    total_other_failures=0
     
     # Parse counts and calculate totals
     IFS='|' read -r -a counts_array <<< "$all_counts"
@@ -265,6 +269,10 @@ else
                 flaky=$(echo "$counts_json" | jq -r '.flaky // 0')
                 skipped=$(echo "$counts_json" | jq -r '.skipped // 0')
                 total=$(echo "$counts_json" | jq -r '.total // 0')
+                screenshot=$(echo "$counts_json" | jq -r '.failureTypes.screenshot // 0')
+                expectation=$(echo "$counts_json" | jq -r '.failureTypes.expectation // 0')
+                timeout=$(echo "$counts_json" | jq -r '.failureTypes.timeout // 0')
+                other=$(echo "$counts_json" | jq -r '.failureTypes.other // 0')
             else
                 # Fallback parsing without jq
                 passed=$(echo "$counts_json" | sed -n 's/.*"passed":\([0-9]*\).*/\1/p')
@@ -272,13 +280,21 @@ else
                 flaky=$(echo "$counts_json" | sed -n 's/.*"flaky":\([0-9]*\).*/\1/p')
                 skipped=$(echo "$counts_json" | sed -n 's/.*"skipped":\([0-9]*\).*/\1/p')
                 total=$(echo "$counts_json" | sed -n 's/.*"total":\([0-9]*\).*/\1/p')
+                screenshot=0
+                expectation=0
+                timeout=0
+                other=0
             fi
-            
+
             total_passed=$((total_passed + ${passed:-0}))
             total_failed=$((total_failed + ${failed:-0}))
             total_flaky=$((total_flaky + ${flaky:-0}))
             total_skipped=$((total_skipped + ${skipped:-0}))
             total_tests=$((total_tests + ${total:-0}))
+            total_screenshot_failures=$((total_screenshot_failures + ${screenshot:-0}))
+            total_expectation_failures=$((total_expectation_failures + ${expectation:-0}))
+            total_timeout_failures=$((total_timeout_failures + ${timeout:-0}))
+            total_other_failures=$((total_other_failures + ${other:-0}))
         fi
     done
     unset IFS
@@ -286,82 +302,114 @@ 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** • ⏰ $(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
+**$total_passed** ✅ • **$total_failed** $([ $total_failed -gt 0 ] && echo '❌' || echo '✅') • **$total_flaky** $([ $total_flaky -gt 0 ] && echo '⚠️' || echo '✅') • **$total_skipped** ⏭️ • **$total_tests** total"
 
-    # Extract and display failed tests from all browsers
-    if [ $total_failed -gt 0 ] || [ $total_flaky -gt 0 ]; then
-        comment="$comment
+        # Add failure breakdown if there are failures
+        if [ $total_failed -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
+**Failure Breakdown:** 📸 $total_screenshot_failures screenshot • ✓ $total_expectation_failures expectation • ⏱️ $total_timeout_failures timeout • ❓ $total_other_failures other"
+        fi
     fi
     
-    # Add browser reports in collapsible section
+    # Collect all failing tests across browsers
+    all_failing_tests=""
+    i=0
+    IFS=' ' read -r -a browser_array <<< "$BROWSERS"
+    for counts_json in "${counts_array[@]}"; do
+        [ -z "$counts_json" ] && { i=$((i + 1)); continue; }
+        browser="${browser_array[$i]:-}"
+
+        if [ "$counts_json" != "{}" ] && [ -n "$counts_json" ]; then
+            if command -v jq > /dev/null 2>&1; then
+                failing_tests=$(echo "$counts_json" | jq -r '.failingTests // [] | .[]' 2>/dev/null || echo "")
+                if [ -n "$failing_tests" ]; then
+                    # Process each failing test
+                    while IFS= read -r test_json; do
+                        [ -z "$test_json" ] && continue
+                        test_name=$(echo "$test_json" | jq -r '.name // "Unknown test"')
+                        test_file=$(echo "$test_json" | jq -r '.filePath // "unknown"')
+                        test_line=$(echo "$test_json" | jq -r '.line // 0')
+                        trace_path=$(echo "$test_json" | jq -r '.tracePath // ""')
+
+                        # Build GitHub source link (assumes ComfyUI_frontend repo)
+                        source_link="https://github.com/$GITHUB_REPOSITORY/blob/$BRANCH_NAME/$test_file#L$test_line"
+
+                        # Build trace viewer link if trace exists
+                        if [ -n "$trace_path" ] && [ "$trace_path" != "null" ]; then
+                            # Extract trace filename from path
+                            trace_file=$(basename "$trace_path")
+                            url="${url_array[$i]:-}"
+                            if [ "$url" != "failed" ] && [ -n "$url" ]; then
+                                base_url="${url%/index.html}"
+                                trace_viewer_link="${base_url}/trace/?trace=${base_url}/data/${trace_file}"
+                            fi
+                        fi
+
+                        # Format failing test entry
+                        if [ -n "$all_failing_tests" ]; then
+                            all_failing_tests="$all_failing_tests
+"
+                        fi
+
+                        if [ -n "$trace_viewer_link" ]; then
+                            all_failing_tests="${all_failing_tests}- **[$test_name]($source_link)** \`$browser\` • [View trace]($trace_viewer_link)"
+                        else
+                            all_failing_tests="${all_failing_tests}- **[$test_name]($source_link)** \`$browser\`"
+                        fi
+                    done < <(echo "$counts_json" | jq -c '.failingTests[]?' 2>/dev/null || echo "")
+                fi
+            fi
+        fi
+        i=$((i + 1))
+    done
+    unset IFS
+
+    # Add failing tests section if there are failures
+    if [ $total_failed -gt 0 ] && [ -n "$all_failing_tests" ]; then
+        comment="$comment
+
+### ❌ Failed Tests
+$all_failing_tests"
+    fi
+
     comment="$comment
 
 <details>
-<summary>📊 Browser Reports</summary>
+<summary>📊 Test Reports by Browser</summary>
 
 "
-    
-    # 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"
     for counts_json in "${counts_array[@]}"; do
         [ -z "$counts_json" ] && { i=$((i + 1)); continue; }
         browser="${browser_array[$i]:-}"
         url="${url_array[$i]:-}"
-        
+
         if [ "$url" != "failed" ] && [ -n "$url" ]; then
             # Parse individual browser counts
             if [ "$counts_json" != "{}" ] && [ -n "$counts_json" ]; then
@@ -378,26 +426,26 @@ $test_line"
                     b_skipped=$(echo "$counts_json" | sed -n 's/.*"skipped":\([0-9]*\).*/\1/p')
                     b_total=$(echo "$counts_json" | sed -n 's/.*"total":\([0-9]*\).*/\1/p')
                 fi
-                
+
                 if [ -n "$b_total" ] && [ "$b_total" != "0" ]; then
-                    counts_str=" (✅ $b_passed / ❌ $b_failed / ⚠️ $b_flaky / ⏭️ $b_skipped)"
+                    counts_str=" • ✅ $b_passed / ❌ $b_failed / ⚠️ $b_flaky / ⏭️ $b_skipped"
                 else
                     counts_str=""
                 fi
             else
                 counts_str=""
             fi
-            
+
             comment="$comment
 - **${browser}**: [View Report](${url})${counts_str}"
         else
             comment="$comment
-- **${browser}**: ❌ Deployment failed"
+- **${browser}**: Deployment failed"
         fi
         i=$((i + 1))
     done
     unset IFS
-    
+
     comment="$comment
 
 </details>"

src/components/LiteGraphCanvasSplitterOverlay.vue

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

src/components/MenuHamburger.vue

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

src/components/TopMenuSection.vue

@@ -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/auth/WorkspaceAuthGate.test.ts

@@ -1,206 +0,0 @@
-import { flushPromises, mount } from '@vue/test-utils'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { ref } from 'vue'
-
-import WorkspaceAuthGate from './WorkspaceAuthGate.vue'
-
-const mockIsInitialized = ref(false)
-const mockCurrentUser = ref<object | null>(null)
-
-vi.mock('@/stores/firebaseAuthStore', () => ({
-  useFirebaseAuthStore: () => ({
-    isInitialized: mockIsInitialized,
-    currentUser: mockCurrentUser
-  })
-}))
-
-const mockRefreshRemoteConfig = vi.fn()
-vi.mock('@/platform/remoteConfig/refreshRemoteConfig', () => ({
-  refreshRemoteConfig: (options: unknown) => mockRefreshRemoteConfig(options)
-}))
-
-const mockTeamWorkspacesEnabled = vi.hoisted(() => ({ value: false }))
-vi.mock('@/composables/useFeatureFlags', () => ({
-  useFeatureFlags: () => ({
-    flags: {
-      get teamWorkspacesEnabled() {
-        return mockTeamWorkspacesEnabled.value
-      }
-    }
-  })
-}))
-
-const mockWorkspaceStoreInitialize = vi.fn()
-const mockWorkspaceStoreInitState = vi.hoisted(() => ({
-  value: 'uninitialized' as string
-}))
-vi.mock('@/platform/workspace/stores/teamWorkspaceStore', () => ({
-  useTeamWorkspaceStore: () => ({
-    get initState() {
-      return mockWorkspaceStoreInitState.value
-    },
-    initialize: mockWorkspaceStoreInitialize
-  })
-}))
-
-const mockIsCloud = vi.hoisted(() => ({ value: true }))
-vi.mock('@/platform/distribution/types', () => ({
-  get isCloud() {
-    return mockIsCloud.value
-  }
-}))
-
-vi.mock('primevue/progressspinner', () => ({
-  default: { template: '<div class="progress-spinner" />' }
-}))
-
-describe('WorkspaceAuthGate', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-    mockIsCloud.value = true
-    mockIsInitialized.value = false
-    mockCurrentUser.value = null
-    mockTeamWorkspacesEnabled.value = false
-    mockWorkspaceStoreInitState.value = 'uninitialized'
-    mockRefreshRemoteConfig.mockResolvedValue(undefined)
-    mockWorkspaceStoreInitialize.mockResolvedValue(undefined)
-  })
-
-  const mountComponent = () =>
-    mount(WorkspaceAuthGate, {
-      slots: {
-        default: '<div data-testid="slot-content">App Content</div>'
-      }
-    })
-
-  describe('non-cloud builds', () => {
-    it('renders slot immediately when isCloud is false', async () => {
-      mockIsCloud.value = false
-
-      const wrapper = mountComponent()
-      await flushPromises()
-
-      expect(wrapper.find('[data-testid="slot-content"]').exists()).toBe(true)
-      expect(wrapper.find('.progress-spinner').exists()).toBe(false)
-      expect(mockRefreshRemoteConfig).not.toHaveBeenCalled()
-    })
-  })
-
-  describe('cloud builds - unauthenticated user', () => {
-    it('shows spinner while waiting for Firebase auth', () => {
-      mockIsInitialized.value = false
-
-      const wrapper = mountComponent()
-
-      expect(wrapper.find('.progress-spinner').exists()).toBe(true)
-      expect(wrapper.find('[data-testid="slot-content"]').exists()).toBe(false)
-    })
-
-    it('renders slot when Firebase initializes with no user', async () => {
-      mockIsInitialized.value = false
-
-      const wrapper = mountComponent()
-      expect(wrapper.find('.progress-spinner').exists()).toBe(true)
-
-      mockIsInitialized.value = true
-      mockCurrentUser.value = null
-      await flushPromises()
-
-      expect(wrapper.find('[data-testid="slot-content"]').exists()).toBe(true)
-      expect(mockRefreshRemoteConfig).not.toHaveBeenCalled()
-    })
-  })
-
-  describe('cloud builds - authenticated user', () => {
-    beforeEach(() => {
-      mockIsInitialized.value = true
-      mockCurrentUser.value = { uid: 'user-123' }
-    })
-
-    it('refreshes remote config with auth after Firebase init', async () => {
-      mountComponent()
-      await flushPromises()
-
-      expect(mockRefreshRemoteConfig).toHaveBeenCalledWith({ useAuth: true })
-    })
-
-    it('renders slot when teamWorkspacesEnabled is false', async () => {
-      mockTeamWorkspacesEnabled.value = false
-
-      const wrapper = mountComponent()
-      await flushPromises()
-
-      expect(wrapper.find('[data-testid="slot-content"]').exists()).toBe(true)
-      expect(mockWorkspaceStoreInitialize).not.toHaveBeenCalled()
-    })
-
-    it('initializes workspace store when teamWorkspacesEnabled is true', async () => {
-      mockTeamWorkspacesEnabled.value = true
-
-      const wrapper = mountComponent()
-      await flushPromises()
-
-      expect(mockWorkspaceStoreInitialize).toHaveBeenCalled()
-      expect(wrapper.find('[data-testid="slot-content"]').exists()).toBe(true)
-    })
-
-    it('skips workspace init when store is already initialized', async () => {
-      mockTeamWorkspacesEnabled.value = true
-      mockWorkspaceStoreInitState.value = 'ready'
-
-      const wrapper = mountComponent()
-      await flushPromises()
-
-      expect(mockWorkspaceStoreInitialize).not.toHaveBeenCalled()
-      expect(wrapper.find('[data-testid="slot-content"]').exists()).toBe(true)
-    })
-  })
-
-  describe('error handling - graceful degradation', () => {
-    beforeEach(() => {
-      mockIsInitialized.value = true
-      mockCurrentUser.value = { uid: 'user-123' }
-    })
-
-    it('renders slot when remote config refresh fails', async () => {
-      mockRefreshRemoteConfig.mockRejectedValue(new Error('Network error'))
-
-      const wrapper = mountComponent()
-      await flushPromises()
-
-      expect(wrapper.find('[data-testid="slot-content"]').exists()).toBe(true)
-    })
-
-    it('renders slot when remote config refresh times out', async () => {
-      vi.useFakeTimers()
-      // Never-resolving promise simulates a hanging request
-      mockRefreshRemoteConfig.mockReturnValue(new Promise(() => {}))
-
-      const wrapper = mountComponent()
-      await flushPromises()
-
-      // Still showing spinner before timeout
-      expect(wrapper.find('.progress-spinner').exists()).toBe(true)
-
-      // Advance past the 10 second timeout
-      await vi.advanceTimersByTimeAsync(10_001)
-      await flushPromises()
-
-      // Should render slot after timeout (graceful degradation)
-      expect(wrapper.find('[data-testid="slot-content"]').exists()).toBe(true)
-      vi.useRealTimers()
-    })
-
-    it('renders slot when workspace store initialization fails', async () => {
-      mockTeamWorkspacesEnabled.value = true
-      mockWorkspaceStoreInitialize.mockRejectedValue(
-        new Error('Workspace init failed')
-      )
-
-      const wrapper = mountComponent()
-      await flushPromises()
-
-      expect(wrapper.find('[data-testid="slot-content"]').exists()).toBe(true)
-    })
-  })
-})

src/components/auth/WorkspaceAuthGate.vue

@@ -1,129 +0,0 @@
-<template>
-  <slot v-if="isReady" />
-  <div
-    v-else
-    class="fixed inset-0 z-[1100] flex items-center justify-center bg-[var(--p-mask-background)]"
-  >
-    <ProgressSpinner />
-  </div>
-</template>
-
-<script setup lang="ts">
-/**
- * WorkspaceAuthGate - Conditional auth checkpoint for workspace mode.
- *
- * This gate ensures proper initialization order for workspace-scoped auth:
- * 1. Wait for Firebase auth to resolve
- * 2. Check if teamWorkspacesEnabled feature flag is on
- * 3. If YES: Initialize workspace token and store before rendering
- * 4. If NO: Render immediately using existing Firebase auth
- *
- * This prevents race conditions where API calls use Firebase tokens
- * instead of workspace tokens when the workspace feature is enabled.
- */
-import { promiseTimeout, until } from '@vueuse/core'
-import { storeToRefs } from 'pinia'
-import ProgressSpinner from 'primevue/progressspinner'
-import { onMounted, ref } from 'vue'
-
-import { useFeatureFlags } from '@/composables/useFeatureFlags'
-import { isCloud } from '@/platform/distribution/types'
-import { refreshRemoteConfig } from '@/platform/remoteConfig/refreshRemoteConfig'
-import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
-import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
-
-const FIREBASE_INIT_TIMEOUT_MS = 16_000
-const CONFIG_REFRESH_TIMEOUT_MS = 10_000
-
-const isReady = ref(!isCloud)
-
-async function initialize(): Promise<void> {
-  if (!isCloud) return
-
-  const authStore = useFirebaseAuthStore()
-  const { isInitialized, currentUser } = storeToRefs(authStore)
-
-  try {
-    // Step 1: Wait for Firebase auth to resolve
-    // This is shared with router guard - both wait for the same thing,
-    // but this gate blocks rendering while router guard blocks navigation
-    if (!isInitialized.value) {
-      await until(isInitialized).toBe(true, {
-        timeout: FIREBASE_INIT_TIMEOUT_MS
-      })
-    }
-
-    // Step 2: If not authenticated, nothing more to do
-    // Unauthenticated users don't have workspace context
-    if (!currentUser.value) {
-      isReady.value = true
-      return
-    }
-
-    // Step 3: Refresh feature flags with auth context
-    // This ensures teamWorkspacesEnabled reflects the authenticated user's state
-    // Timeout prevents hanging if server is slow/unresponsive
-    try {
-      await Promise.race([
-        refreshRemoteConfig({ useAuth: true }),
-        promiseTimeout(CONFIG_REFRESH_TIMEOUT_MS).then(() => {
-          throw new Error('Config refresh timeout')
-        })
-      ])
-    } catch (error) {
-      console.warn(
-        '[WorkspaceAuthGate] Failed to refresh remote config:',
-        error
-      )
-      // Continue - feature flags will use defaults (teamWorkspacesEnabled=false)
-      // App will render with Firebase auth fallback
-    }
-
-    // Step 4: THE CHECKPOINT - Are we in workspace mode?
-    const { flags } = useFeatureFlags()
-    if (!flags.teamWorkspacesEnabled) {
-      // Not in workspace mode - use existing Firebase auth flow
-      // No additional initialization needed
-      isReady.value = true
-      return
-    }
-
-    // Step 5: WORKSPACE MODE - Full initialization
-    await initializeWorkspaceMode()
-  } catch (error) {
-    console.error('[WorkspaceAuthGate] Initialization failed:', error)
-  } finally {
-    // Always render (graceful degradation)
-    // If workspace init failed, API calls fall back to Firebase token
-    isReady.value = true
-  }
-}
-
-async function initializeWorkspaceMode(): Promise<void> {
-  // Initialize the full workspace store which handles:
-  // - Restoring workspace token from session (fast path for refresh)
-  // - Fetching workspace list
-  // - Switching to last used workspace if needed
-  // - Setting active workspace
-  try {
-    const workspaceStore = useTeamWorkspaceStore()
-    if (workspaceStore.initState === 'uninitialized') {
-      await workspaceStore.initialize()
-    }
-  } catch (error) {
-    // Log but don't block - workspace UI features may not work but app will render
-    // API calls will fall back to Firebase token
-    console.warn(
-      '[WorkspaceAuthGate] Failed to initialize workspace store:',
-      error
-    )
-  }
-}
-
-// Initialize on mount. This gate should be placed on the authenticated layout
-// (LayoutDefault) so it mounts fresh after login and unmounts on logout.
-// The router guard ensures only authenticated users reach this layout.
-onMounted(() => {
-  void initialize()
-})
-</script>

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