fix: incorporate Fuse search scores into template sorting

When searching templates, the Fuse.js relevance scores were being
discarded when any sort option other than 'default' was selected.
This caused templates with better search matches to be ranked lower
than templates with higher usage/popularity but worse search relevance.

Changes:
- Store Fuse search scores in a Map for use during sorting
- For 'recommended' sort with active search: weight search relevance
  at 60% and base recommendation score at 40%
- For 'popular' sort with active search: weight both equally at 50%
- For VRAM/size sorts: use search relevance as tiebreaker
- 'default' sort preserves Fuse's original relevance order

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

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

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

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

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

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

THIRD_PARTY_NOTICES.md

@@ -0,0 +1 @@
+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.4",
+  "version": "0.0.6",
   "type": "module",
   "nx": {
     "tags": [

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

@@ -0,0 +1,84 @@
+// eslint-disable-next-line storybook/no-renderer-packages
+import type { Meta, StoryObj } from '@storybook/vue3'
+import type {
+  ElectronAPI,
+  TorchDeviceType
+} from '@comfyorg/comfyui-electron-types'
+import { ref } from 'vue'
+
+import GpuPicker from './GpuPicker.vue'
+
+type Platform = ReturnType<ElectronAPI['getPlatform']>
+type ElectronAPIStub = Pick<ElectronAPI, 'getPlatform'>
+type WindowWithElectron = Window & { electronAPI?: ElectronAPIStub }
+
+const meta: Meta<typeof GpuPicker> = {
+  title: 'Desktop/Components/GpuPicker',
+  component: GpuPicker,
+  parameters: {
+    layout: 'padded',
+    backgrounds: {
+      default: 'dark',
+      values: [
+        { name: 'dark', value: '#0a0a0a' },
+        { name: 'neutral-900', value: '#171717' },
+        { name: 'neutral-950', value: '#0a0a0a' }
+      ]
+    }
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+function createElectronDecorator(platform: Platform) {
+  function getPlatform() {
+    return platform
+  }
+
+  return function ElectronDecorator() {
+    const windowWithElectron = window as WindowWithElectron
+    windowWithElectron.electronAPI = { getPlatform }
+    return { template: '<story />' }
+  }
+}
+
+function renderWithDevice(device: TorchDeviceType | null) {
+  return function Render() {
+    return {
+      components: { GpuPicker },
+      setup() {
+        const selected = ref<TorchDeviceType | null>(device)
+        return { selected }
+      },
+      template: `
+        <div class="min-h-screen bg-neutral-950 p-8">
+          <GpuPicker v-model:device="selected" />
+        </div>
+      `
+    }
+  }
+}
+
+const windowsDecorator = createElectronDecorator('win32')
+const macDecorator = createElectronDecorator('darwin')
+
+export const WindowsNvidiaSelected: Story = {
+  decorators: [windowsDecorator],
+  render: renderWithDevice('nvidia')
+}
+
+export const WindowsAmdSelected: Story = {
+  decorators: [windowsDecorator],
+  render: renderWithDevice('amd')
+}
+
+export const WindowsCpuSelected: Story = {
+  decorators: [windowsDecorator],
+  render: renderWithDevice('cpu')
+}
+
+export const MacMpsSelected: Story = {
+  decorators: [macDecorator],
+  render: renderWithDevice('mps')
+}

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

@@ -11,29 +11,32 @@
       <!-- Apple Metal / NVIDIA -->
       <HardwareOption
         v-if="platform === 'darwin'"
-        :image-path="'./assets/images/apple-mps-logo.png'"
+        image-path="./assets/images/apple-mps-logo.png"
         placeholder-text="Apple Metal"
         subtitle="Apple Metal"
-        :value="'mps'"
         :selected="selected === 'mps'"
-        :recommended="true"
         @click="pickGpu('mps')"
       />
-      <HardwareOption
-        v-else
-        :image-path="'./assets/images/nvidia-logo-square.jpg'"
-        placeholder-text="NVIDIA"
-        :subtitle="$t('install.gpuPicker.nvidiaSubtitle')"
-        :value="'nvidia'"
-        :selected="selected === 'nvidia'"
-        :recommended="true"
-        @click="pickGpu('nvidia')"
-      />
+      <template v-else>
+        <HardwareOption
+          image-path="./assets/images/nvidia-logo-square.jpg"
+          placeholder-text="NVIDIA"
+          :subtitle="$t('install.gpuPicker.nvidiaSubtitle')"
+          :selected="selected === 'nvidia'"
+          @click="pickGpu('nvidia')"
+        />
+        <HardwareOption
+          image-path="./assets/images/amd-rocm-logo.png"
+          placeholder-text="AMD"
+          :subtitle="$t('install.gpuPicker.amdSubtitle')"
+          :selected="selected === 'amd'"
+          @click="pickGpu('amd')"
+        />
+      </template>
       <!-- CPU -->
       <HardwareOption
         placeholder-text="CPU"
         :subtitle="$t('install.gpuPicker.cpuSubtitle')"
-        :value="'cpu'"
         :selected="selected === 'cpu'"
         @click="pickGpu('cpu')"
       />
@@ -41,7 +44,6 @@
       <HardwareOption
         placeholder-text="Manual Install"
         :subtitle="$t('install.gpuPicker.manualSubtitle')"
-        :value="'unsupported'"
         :selected="selected === 'unsupported'"
         @click="pickGpu('unsupported')"
       />
@@ -81,13 +83,15 @@ const selected = defineModel<TorchDeviceType | null>('device', {
 const electron = electronAPI()
 const platform = electron.getPlatform()
 
-const showRecommendedBadge = computed(
-  () => selected.value === 'mps' || selected.value === 'nvidia'
+const recommendedDevices: TorchDeviceType[] = ['mps', 'nvidia', 'amd']
+const showRecommendedBadge = computed(() =>
+  selected.value ? recommendedDevices.includes(selected.value) : false
 )
 
 const descriptionKeys = {
   mps: 'appleMetal',
   nvidia: 'nvidia',
+  amd: 'amd',
   cpu: 'cpu',
   unsupported: 'manual'
 } as const
@@ -97,7 +101,7 @@ const descriptionText = computed(() => {
   return st(`install.gpuPicker.${key}Description`, '')
 })
 
-const pickGpu = (value: TorchDeviceType) => {
+function pickGpu(value: TorchDeviceType) {
   selected.value = value
 }
 </script>

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

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

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

@@ -36,17 +36,13 @@
 </template>
 
 <script setup lang="ts">
-import type { TorchDeviceType } from '@comfyorg/comfyui-electron-types'
-
 import { cn } from '@/utils/tailwindUtil'
 
 interface Props {
   imagePath?: string
   placeholderText: string
   subtitle?: string
-  value: TorchDeviceType
   selected?: boolean
-  recommended?: boolean
 }
 
 defineProps<Props>()

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

@@ -104,8 +104,8 @@
 </template>
 
 <script setup lang="ts">
-import type { TorchDeviceType } from '@comfyorg/comfyui-electron-types'
 import { TorchMirrorUrl } from '@comfyorg/comfyui-electron-types'
+import type { TorchDeviceType } from '@comfyorg/comfyui-electron-types'
 import { isInChina } from '@comfyorg/shared-frontend-utils/networkUtil'
 import Accordion from 'primevue/accordion'
 import AccordionContent from 'primevue/accordioncontent'
@@ -155,7 +155,7 @@ const activeAccordionIndex = ref<string[] | undefined>(undefined)
 const electron = electronAPI()
 
 // Mirror configuration logic
-const getTorchMirrorItem = (device: TorchDeviceType): UVMirror => {
+function getTorchMirrorItem(device: TorchDeviceType): UVMirror {
   const settingId = 'Comfy-Desktop.UV.TorchInstallMirror'
   switch (device) {
     case 'mps':
@@ -170,6 +170,7 @@ const getTorchMirrorItem = (device: TorchDeviceType): UVMirror => {
         mirror: TorchMirrorUrl.Cuda,
         fallbackMirror: TorchMirrorUrl.Cuda
       }
+    case 'amd':
     case 'cpu':
     default:
       return {

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

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

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

@@ -143,6 +143,8 @@ const goToPreviousStep = () => {
 const electron = electronAPI()
 const router = useRouter()
 const install = async () => {
+  if (!device.value) return
+
   const options: InstallOptions = {
     installPath: installPath.value,
     autoUpdate: autoUpdate.value,
@@ -152,7 +154,6 @@ const install = async () => {
     pythonMirror: pythonMirror.value,
     pypiMirror: pypiMirror.value,
     torchMirror: torchMirror.value,
-    // @ts-expect-error fixme ts strict error
     device: device.value
   }
   electron.installComfyUI(options)
@@ -166,7 +167,11 @@ onMounted(async () => {
   if (!electron) return
 
   const detectedGpu = await electron.Config.getDetectedGpu()
-  if (detectedGpu === 'mps' || detectedGpu === 'nvidia') {
+  if (
+    detectedGpu === 'mps' ||
+    detectedGpu === 'nvidia' ||
+    detectedGpu === 'amd'
+  ) {
     device.value = detectedGpu
   }
 

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

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

browser_tests/tests/graph.spec.ts

@@ -19,6 +19,7 @@ test.describe('Graph', () => {
   })
 
   test('Validate workflow links', async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.Validation.Workflows', true)
     await comfyPage.loadWorkflow('links/bad_link')
     await expect(comfyPage.getVisibleToastCount()).resolves.toBe(2)
   })

browser_tests/tests/templates.spec.ts

@@ -83,7 +83,7 @@ test.describe('Templates', () => {
 
     await comfyPage.page
       .locator(
-        'nav > div:nth-child(2) > div > span:has-text("Getting Started")'
+        'nav > div:nth-child(3) > div > span:has-text("Getting Started")'
       )
       .click()
     await comfyPage.templates.loadTemplate('default')

docs/TEMPLATE_RANKING.md

@@ -0,0 +1,66 @@
+# Template Ranking System
+
+Usage-based ordering for workflow templates with position bias normalization.
+
+Scores are pre-computed and normalized offline and shipped as static JSON (mirrors `sorted-custom-node-map.json` pattern for node search).
+
+## Sort Modes
+
+| Mode           | Formula                                          | Description            |
+| -------------- | ------------------------------------------------ | ---------------------- |
+| `recommended`  | `usage × 0.5 + internal × 0.3 + freshness × 0.2` | Curated recommendation |
+| `popular`      | `usage × 0.9 + freshness × 0.1`                  | Pure user-driven       |
+| `newest`       | Date sort                                        | Existing               |
+| `alphabetical` | Name sort                                        | Existing               |
+
+Freshness computed at runtime from `template.date`: `1.0 / (1 + daysSinceAdded / 90)`, min 0.1.
+
+## Data Files
+
+**Usage scores** (generated from Mixpanel):
+
+```json
+// In templates/index.json, add to any template:
+{
+  "name": "some_template",
+  "usage": 1000,
+  ...
+}
+```
+
+**Search rank** (set per-template in workflow_templates repo):
+
+```json
+// In templates/index.json, add to any template:
+{
+  "name": "some_template",
+  "searchRank": 8,  // Scale 1-10, default 5
+  ...
+}
+```
+
+| searchRank | Effect                       |
+| ---------- | ---------------------------- |
+| 1-4        | Demote (bury in results)     |
+| 5          | Neutral (default if not set) |
+| 6-10       | Promote (boost in results)   |
+
+## Position Bias Correction
+
+Raw usage reflects true preference AND UI position bias. We use linear interpolation:
+
+```
+correction = 1 + (position - 1) / (maxPosition - 1)
+normalizedUsage = rawUsage × correction
+```
+
+| Position | Boost |
+| -------- | ----- |
+| 1        | 1.0×  |
+| 50       | 1.28× |
+| 100      | 1.57× |
+| 175      | 2.0×  |
+
+Templates buried at the bottom get up to 2× boost to compensate for reduced visibility.
+
+---

docs/testing/README.md

@@ -12,12 +12,17 @@ Documentation for unit tests is organized into three guides:
 
 ## Testing Structure
 
-The ComfyUI Frontend project uses a mixed approach to unit test organization:
+The ComfyUI Frontend project uses **colocated tests** - test files are placed alongside their source files:
 
-- **Component Tests**: Located directly alongside their components with a `.spec.ts` extension
-- **Unit Tests**: Located in the `tests-ui/tests/` directory
-- **Store Tests**: Located in the `tests-ui/tests/store/` directory
-- **Browser Tests**: These are located in the `browser_tests/` directory. There is a dedicated README in the `browser_tests/` directory, so it will not be covered here.
+- **Component Tests**: Located directly alongside their components (e.g., `MyComponent.test.ts` next to `MyComponent.vue`)
+- **Unit Tests**: Located alongside their source files (e.g., `myUtil.test.ts` next to `myUtil.ts`)
+- **Store Tests**: Located in `src/stores/` alongside their store files
+- **Browser Tests**: Located in the `browser_tests/` directory (see dedicated README there)
+
+### Test File Naming
+
+- Use `.test.ts` extension for test files
+- Name tests after their source file: `sourceFile.test.ts`
 
 ## Test Frameworks and Libraries
 
@@ -35,8 +40,11 @@ To run the tests locally:
 # Run unit tests
 pnpm test:unit
 
+# Run a specific test file
+pnpm test:unit -- src/path/to/file.test.ts
+
 # Run unit tests in watch mode  
 pnpm test:unit -- --watch
 ```
 
-Refer to the specific guides for more detailed information on each testing type.
+Refer to the specific guides for more detailed information on each testing type.

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comfyorg/comfyui-frontend",
   "private": true,
-  "version": "1.36.12",
+  "version": "1.37.5",
   "type": "module",
   "repository": "https://github.com/Comfy-Org/ComfyUI_frontend",
   "homepage": "https://comfy.org",
@@ -42,6 +42,7 @@
     "prepare": "husky || true && git config blame.ignoreRevsFile .git-blame-ignore-revs || true",
     "preview": "nx preview",
     "storybook": "nx storybook",
+    "storybook:desktop": "nx run @comfyorg/desktop-ui:storybook",
     "stylelint:fix": "stylelint --cache --fix '{apps,packages,src}/**/*.{css,vue}'",
     "stylelint": "stylelint --cache '{apps,packages,src}/**/*.{css,vue}'",
     "test:browser": "pnpm exec nx e2e",
@@ -186,6 +187,7 @@
     "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,6 +9,8 @@
 
 @config '../../tailwind.config.ts';
 
+@custom-variant touch (@media (hover: none));
+
 @theme {
   --text-xxs: 0.625rem;
   --text-xxs--line-height: calc(1 / 0.625);

packages/shared-frontend-utils/src/formatUtil.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest'
 
-import { getMediaTypeFromFilename, truncateFilename } from '@/utils/formatUtil'
+import { getMediaTypeFromFilename, truncateFilename } from './formatUtil'
 
 describe('formatUtil', () => {
   describe('truncateFilename', () => {

pnpm-workspace.yaml

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

src/components/TopMenuSection.vue

@@ -92,7 +92,8 @@ import { useCurrentUser } from '@/composables/auth/useCurrentUser'
 import { useErrorHandling } from '@/composables/useErrorHandling'
 import { buildTooltipConfig } from '@/composables/useTooltipConfig'
 import { app } from '@/scripts/app'
-import { useQueueStore } from '@/stores/queueStore'
+import { useCommandStore } from '@/stores/commandStore'
+import { useQueueStore, useQueueUIStore } from '@/stores/queueStore'
 import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import { isElectron } from '@/utils/envUtil'
@@ -106,8 +107,10 @@ const { isLoggedIn } = useCurrentUser()
 const isDesktop = isElectron()
 const { t } = useI18n()
 const { toastErrorHandler } = useErrorHandling()
-const isQueueOverlayExpanded = ref(false)
+const commandStore = useCommandStore()
 const queueStore = useQueueStore()
+const queueUIStore = useQueueUIStore()
+const { isOverlayExpanded: isQueueOverlayExpanded } = storeToRefs(queueUIStore)
 const isTopMenuHovered = ref(false)
 const queuedCount = computed(() => queueStore.pendingTasks.length)
 const queueHistoryTooltipConfig = computed(() =>
@@ -133,7 +136,7 @@ onMounted(() => {
 })
 
 const toggleQueueOverlay = () => {
-  isQueueOverlayExpanded.value = !isQueueOverlayExpanded.value
+  commandStore.execute('Comfy.Queue.ToggleOverlay')
 }
 
 const openCustomNodeManager = async () => {

src/components/button/IconGroup.vue

@@ -2,7 +2,8 @@
   <div
     :class="
       cn(
-        'flex justify-center items-center shrink-0 outline-hidden border-none p-0 rounded-lg bg-secondary-background shadow-sm transition-all duration-200 cursor-pointer'
+        'flex justify-center items-center shrink-0 outline-hidden border-none p-0 rounded-lg shadow-sm transition-all duration-200 cursor-pointer',
+        backgroundClass || 'bg-secondary-background'
       )
     "
   >
@@ -12,4 +13,8 @@
 
 <script setup lang="ts">
 import { cn } from '@/utils/tailwindUtil'
+
+const { backgroundClass } = defineProps<{
+  backgroundClass?: string
+}>()
 </script>

src/components/common/TreeExplorerTreeNode.vue

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

src/components/custom/widget/WorkflowTemplateSelectorDialog.vue

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

src/components/dialog/content/MissingNodesFooter.vue

@@ -22,7 +22,7 @@
 
   <!-- OSS mode: Open Manager + Install All buttons -->
   <div v-else-if="showManagerButtons" class="flex justify-end gap-1 py-2 px-4">
-    <Button variant="textonly" size="sm" @click="openManager">{{
+    <Button variant="textonly" @click="openManager">{{
       $t('g.openManager')
     }}</Button>
     <PackInstallButton

src/components/dialog/content/TopUpCreditsDialogContent.vue

@@ -49,25 +49,66 @@
           @select="selectedCredits = option.credits"
         />
       </div>
-      <div class="text-xs text-muted-foreground w-96">
-        {{ $t('credits.topUp.templateNote') }}
+      <div class="flex flex-row items-center gap-2 group pt-2">
+        <i
+          class="pi pi-question-circle text-xs text-muted-foreground group-hover:text-base-foreground"
+        />
+        <span
+          class="text-sm font-normal text-muted-foreground cursor-pointer group-hover:text-base-foreground"
+          @click="togglePopover"
+        >
+          {{ t('subscription.videoTemplateBasedCredits') }}
+        </span>
       </div>
-    </div>
 
-    <!-- Buy Button -->
-    <Button
-      :disabled="!selectedCredits || loading"
-      :loading="loading"
-      variant="primary"
-      :class="cn('w-full', (!selectedCredits || loading) && 'opacity-30')"
-      @click="handleBuy"
+      <!-- Buy Button -->
+      <Button
+        :disabled="!selectedCredits || loading"
+        :loading="loading"
+        variant="primary"
+        :class="cn('w-full', (!selectedCredits || loading) && 'opacity-30')"
+        @click="handleBuy"
+      >
+        {{ $t('credits.topUp.buy') }}
+      </Button>
+    </div>
+    <Popover
+      ref="popover"
+      append-to="body"
+      :auto-z-index="true"
+      :base-z-index="1000"
+      :dismissable="true"
+      :close-on-escape="true"
+      unstyled
+      :pt="{
+        root: {
+          class:
+            'rounded-lg border border-interface-stroke bg-interface-panel-surface shadow-lg p-4 max-w-xs'
+        }
+      }"
     >
-      {{ $t('credits.topUp.buy') }}
-    </Button>
+      <div class="flex flex-col gap-2">
+        <p class="text-sm text-base-foreground leading-normal">
+          {{ t('subscription.videoEstimateExplanation') }}
+        </p>
+        <a
+          href="https://cloud.comfy.org/?template=video_wan2_2_14B_fun_camera"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="text-sm text-azure-600 hover:text-azure-400 no-underline flex gap-1"
+        >
+          <span class="underline">
+            {{ t('subscription.videoEstimateTryTemplate') }}
+          </span>
+          <span class="no-underline" v-html="'&rarr;'"></span>
+        </a>
+      </div>
+    </Popover>
   </div>
 </template>
 
 <script setup lang="ts">
+import { Popover } from 'primevue'
 import { useToast } from 'primevue/usetoast'
 import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -101,22 +142,28 @@ const toast = useToast()
 const selectedCredits = ref<number | null>(null)
 const loading = ref(false)
 
+const popover = ref()
+
+const togglePopover = (event: Event) => {
+  popover.value.toggle(event)
+}
+
 const creditOptions: CreditOption[] = [
   {
     credits: 1055, // $5.00
-    description: t('credits.topUp.videosEstimate', { count: 41 })
+    description: t('credits.topUp.videosEstimate', { count: 30 })
   },
   {
     credits: 2110, // $10.00
-    description: t('credits.topUp.videosEstimate', { count: 82 })
+    description: t('credits.topUp.videosEstimate', { count: 60 })
   },
   {
     credits: 4220, // $20.00
-    description: t('credits.topUp.videosEstimate', { count: 184 })
+    description: t('credits.topUp.videosEstimate', { count: 120 })
   },
   {
     credits: 10550, // $50.00
-    description: t('credits.topUp.videosEstimate', { count: 412 })
+    description: t('credits.topUp.videosEstimate', { count: 301 })
   }
 ]
 

src/components/graph/modals/ZoomControlsModal.test.ts

@@ -70,7 +70,7 @@ const createWrapper = (props = {}) => {
 
 describe('ZoomControlsModal', () => {
   beforeEach(() => {
-    vi.restoreAllMocks()
+    vi.resetAllMocks()
   })
 
   it('should execute zoom in command when zoom in button is clicked', async () => {

src/components/load3d/Load3D.vue

@@ -24,6 +24,7 @@
         v-model:light-config="lightConfig"
         :is-splat-model="isSplatModel"
         :is-ply-model="isPlyModel"
+        :has-skeleton="hasSkeleton"
         @update-background-image="handleBackgroundImageUpdate"
         @export-model="handleExportModel"
       />
@@ -33,6 +34,9 @@
         v-model:playing="playing"
         v-model:selected-speed="selectedSpeed"
         v-model:selected-animation="selectedAnimation"
+        v-model:animation-progress="animationProgress"
+        v-model:animation-duration="animationDuration"
+        @seek="handleSeek"
       />
     </div>
     <div
@@ -113,12 +117,15 @@ const {
   isPreview,
   isSplatModel,
   isPlyModel,
+  hasSkeleton,
   hasRecording,
   recordingDuration,
   animations,
   playing,
   selectedSpeed,
   selectedAnimation,
+  animationProgress,
+  animationDuration,
   loading,
   loadingMessage,
 
@@ -130,6 +137,7 @@ const {
   handleStopRecording,
   handleExportRecording,
   handleClearRecording,
+  handleSeek,
   handleBackgroundImageUpdate,
   handleExportModel,
   handleModelDrop,

src/components/load3d/Load3DControls.vue

@@ -58,8 +58,10 @@
         v-if="showModelControls"
         v-model:material-mode="modelConfig!.materialMode"
         v-model:up-direction="modelConfig!.upDirection"
+        v-model:show-skeleton="modelConfig!.showSkeleton"
         :hide-material-mode="isSplatModel"
         :is-ply-model="isPlyModel"
+        :has-skeleton="hasSkeleton"
       />
 
       <CameraControls
@@ -99,9 +101,14 @@ import type {
 } from '@/extensions/core/load3d/interfaces'
 import { cn } from '@/utils/tailwindUtil'
 
-const { isSplatModel = false, isPlyModel = false } = defineProps<{
+const {
+  isSplatModel = false,
+  isPlyModel = false,
+  hasSkeleton = false
+} = defineProps<{
   isSplatModel?: boolean
   isPlyModel?: boolean
+  hasSkeleton?: boolean
 }>()
 
 const sceneConfig = defineModel<SceneConfig>('sceneConfig')

src/components/load3d/Load3DScene.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     ref="container"
-    class="relative h-full w-full"
+    class="relative h-full w-full min-h-[200px]"
     data-capture-wheel="true"
     @pointerdown.stop
     @pointermove.stop

src/components/load3d/Load3dViewerContent.vue

@@ -15,6 +15,16 @@
         @dragleave.stop="handleDragLeave"
         @drop.prevent.stop="handleDrop"
       />
+      <AnimationControls
+        v-if="viewer.animations.value && viewer.animations.value.length > 0"
+        v-model:animations="viewer.animations.value"
+        v-model:playing="viewer.playing.value"
+        v-model:selected-speed="viewer.selectedSpeed.value"
+        v-model:selected-animation="viewer.selectedAnimation.value"
+        v-model:animation-progress="viewer.animationProgress.value"
+        v-model:animation-duration="viewer.animationDuration.value"
+        @seek="viewer.handleSeek"
+      />
       <div
         v-if="isDragging"
         class="pointer-events-none absolute inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm"
@@ -85,6 +95,7 @@
 <script setup lang="ts">
 import { onBeforeUnmount, onMounted, ref, toRaw } from 'vue'
 
+import AnimationControls from '@/components/load3d/controls/AnimationControls.vue'
 import CameraControls from '@/components/load3d/controls/viewer/ViewerCameraControls.vue'
 import ExportControls from '@/components/load3d/controls/viewer/ViewerExportControls.vue'
 import LightControls from '@/components/load3d/controls/viewer/ViewerLightControls.vue'

src/components/load3d/controls/AnimationControls.vue

@@ -1,42 +1,64 @@
 <template>
   <div
     v-if="animations && animations.length > 0"
-    class="pointer-events-auto absolute top-0 left-0 z-10 flex w-full items-center justify-center gap-2 pt-2"
+    class="pointer-events-auto absolute top-0 left-0 z-10 flex w-full flex-col items-center gap-2 pt-2"
   >
-    <Button
-      size="icon"
-      variant="textonly"
-      class="rounded-full"
-      :aria-label="$t('g.playPause')"
-      @click="togglePlay"
-    >
-      <i
-        :class="['pi', playing ? 'pi-pause' : 'pi-play', 'text-lg text-white']"
+    <div class="flex items-center justify-center gap-2">
+      <Button
+        size="icon"
+        variant="textonly"
+        class="rounded-full"
+        :aria-label="$t('g.playPause')"
+        @click="togglePlay"
+      >
+        <i
+          :class="[
+            'pi',
+            playing ? 'pi-pause' : 'pi-play',
+            'text-lg text-white'
+          ]"
+        />
+      </Button>
+
+      <Select
+        v-model="selectedSpeed"
+        :options="speedOptions"
+        option-label="name"
+        option-value="value"
+        class="w-24"
       />
-    </Button>
 
-    <Select
-      v-model="selectedSpeed"
-      :options="speedOptions"
-      option-label="name"
-      option-value="value"
-      class="w-24"
-    />
+      <Select
+        v-model="selectedAnimation"
+        :options="animations"
+        option-label="name"
+        option-value="index"
+        class="w-32"
+      />
+    </div>
 
-    <Select
-      v-model="selectedAnimation"
-      :options="animations"
-      option-label="name"
-      option-value="index"
-      class="w-32"
-    />
+    <div class="flex w-full max-w-xs items-center gap-2 px-4">
+      <Slider
+        :model-value="[animationProgress]"
+        :min="0"
+        :max="100"
+        :step="0.1"
+        class="flex-1"
+        @update:model-value="handleSliderChange"
+      />
+      <span class="min-w-16 text-xs text-white">
+        {{ formatTime(currentTime) }} / {{ formatTime(animationDuration) }}
+      </span>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import Select from 'primevue/select'
+import { computed } from 'vue'
 
 import Button from '@/components/ui/button/Button.vue'
+import Slider from '@/components/ui/slider/Slider.vue'
 
 type Animation = { name: string; index: number }
 
@@ -44,6 +66,16 @@ const animations = defineModel<Animation[]>('animations')
 const playing = defineModel<boolean>('playing')
 const selectedSpeed = defineModel<number>('selectedSpeed')
 const selectedAnimation = defineModel<number>('selectedAnimation')
+const animationProgress = defineModel<number>('animationProgress', {
+  default: 0
+})
+const animationDuration = defineModel<number>('animationDuration', {
+  default: 0
+})
+
+const emit = defineEmits<{
+  seek: [progress: number]
+}>()
 
 const speedOptions = [
   { name: '0.1x', value: 0.1 },
@@ -53,7 +85,25 @@ const speedOptions = [
   { name: '2x', value: 2 }
 ]
 
-const togglePlay = () => {
+const currentTime = computed(() => {
+  if (!animationDuration.value) return 0
+  return (animationProgress.value / 100) * animationDuration.value
+})
+
+function formatTime(seconds: number): string {
+  const mins = Math.floor(seconds / 60)
+  const secs = (seconds % 60).toFixed(1)
+  return mins > 0 ? `${mins}:${secs.padStart(4, '0')}` : `${secs}s`
+}
+
+function togglePlay() {
   playing.value = !playing.value
 }
+
+function handleSliderChange(value: number[] | undefined) {
+  if (!value) return
+  const progress = value[0]
+  animationProgress.value = progress
+  emit('seek', progress)
+}
 </script>

src/components/load3d/controls/ModelControls.vue

@@ -70,6 +70,22 @@
         </div>
       </div>
     </div>
+
+    <div v-if="hasSkeleton">
+      <Button
+        v-tooltip.right="{
+          value: t('load3d.showSkeleton'),
+          showDelay: 300
+        }"
+        size="icon"
+        variant="textonly"
+        :class="cn('rounded-full', showSkeleton && 'bg-blue-500')"
+        :aria-label="t('load3d.showSkeleton')"
+        @click="showSkeleton = !showSkeleton"
+      >
+        <i class="pi pi-sitemap text-lg text-white" />
+      </Button>
+    </div>
   </div>
 </template>
 
@@ -84,13 +100,19 @@ import type {
 import { t } from '@/i18n'
 import { cn } from '@/utils/tailwindUtil'
 
-const { hideMaterialMode = false, isPlyModel = false } = defineProps<{
+const {
+  hideMaterialMode = false,
+  isPlyModel = false,
+  hasSkeleton = false
+} = defineProps<{
   hideMaterialMode?: boolean
   isPlyModel?: boolean
+  hasSkeleton?: boolean
 }>()
 
 const materialMode = defineModel<MaterialMode>('materialMode')
 const upDirection = defineModel<UpDirection>('upDirection')
+const showSkeleton = defineModel<boolean>('showSkeleton')
 
 const showUpDirection = ref(false)
 const showMaterialMode = ref(false)

src/components/maskeditor/BrushSettingsPanel.vue

@@ -1,8 +1,6 @@
 <template>
   <div class="flex flex-col gap-3 pb-3">
-    <h3
-      class="text-center text-[15px] font-sans text-[var(--descrip-text)] mt-2.5"
-    >
+    <h3 class="text-center text-[15px] font-sans text-descrip-text mt-2.5">
       {{ t('maskEditor.brushSettings') }}
     </h3>
 
@@ -10,120 +8,211 @@
       {{ t('maskEditor.resetToDefault') }}
     </button>
 
+    <!-- Brush Shape -->
     <div class="flex flex-col gap-3 pb-3">
-      <span class="text-left text-xs font-sans text-[var(--descrip-text)]">{{
-        t('maskEditor.brushShape')
-      }}</span>
+      <span class="text-left text-xs font-sans text-descrip-text">
+        {{ t('maskEditor.brushShape') }}
+      </span>
+
       <div
-        class="flex flex-row gap-2.5 items-center min-h-6 relative h-[50px] w-full rounded-[10px] bg-secondary-background-hover"
+        class="flex flex-row gap-2.5 items-center h-[50px] w-full rounded-[10px] bg-secondary-background-hover"
       >
         <div
-          class="maskEditor_sidePanelBrushShapeCircle bg-transparent hover:bg-comfy-menu-bg"
-          :class="{ active: store.brushSettings.type === BrushShape.Arc }"
-          :style="{
-            background:
+          class="maskEditor_sidePanelBrushShapeCircle hover:bg-comfy-menu-bg"
+          :class="
+            cn(
               store.brushSettings.type === BrushShape.Arc
-                ? 'var(--p-button-text-primary-color)'
-                : ''
-          }"
+                ? 'bg-[var(--p-button-text-primary-color)] active'
+                : 'bg-transparent'
+            )
+          "
           @click="setBrushShape(BrushShape.Arc)"
         ></div>
+
         <div
-          class="maskEditor_sidePanelBrushShapeSquare bg-transparent hover:bg-comfy-menu-bg"
-          :class="{ active: store.brushSettings.type === BrushShape.Rect }"
-          :style="{
-            background:
+          class="maskEditor_sidePanelBrushShapeSquare hover:bg-comfy-menu-bg"
+          :class="
+            cn(
               store.brushSettings.type === BrushShape.Rect
-                ? 'var(--p-button-text-primary-color)'
-                : ''
-          }"
+                ? 'bg-[var(--p-button-text-primary-color)] active'
+                : 'bg-transparent'
+            )
+          "
           @click="setBrushShape(BrushShape.Rect)"
         ></div>
       </div>
     </div>
 
+    <!-- Color -->
     <div class="flex flex-col gap-3 pb-3">
-      <span class="text-left text-xs font-sans text-[var(--descrip-text)]">{{
-        t('maskEditor.colorSelector')
-      }}</span>
-      <input type="color" :value="store.rgbColor" @input="onColorChange" />
+      <span class="text-left text-xs font-sans text-descrip-text">
+        {{ t('maskEditor.colorSelector') }}
+      </span>
+      <input
+        ref="colorInputRef"
+        v-model="store.rgbColor"
+        type="color"
+        class="h-10 rounded-md cursor-pointer"
+      />
     </div>
 
-    <SliderControl
-      :label="t('maskEditor.thickness')"
-      :min="1"
-      :max="500"
-      :step="1"
-      :model-value="store.brushSettings.size"
-      @update:model-value="onThicknessChange"
-    />
+    <!-- Thickness -->
+    <div class="flex flex-col gap-2">
+      <div class="flex items-center justify-between">
+        <span class="text-left text-xs font-sans text-descrip-text">
+          {{ t('maskEditor.thickness') }}
+        </span>
+        <input
+          v-model.number="brushSize"
+          type="number"
+          class="w-16 px-2 py-1 text-sm text-center border rounded-md bg-comfy-menu-bg border-p-form-field-border-color text-input-text"
+          :min="1"
+          :max="250"
+          :step="1"
+        />
+      </div>
+      <SliderControl
+        v-model="brushSize"
+        class="flex-1"
+        label=""
+        :min="1"
+        :max="250"
+        :step="1"
+      />
+    </div>
 
-    <SliderControl
-      :label="t('maskEditor.opacity')"
-      :min="0"
-      :max="1"
-      :step="0.01"
-      :model-value="store.brushSettings.opacity"
-      @update:model-value="onOpacityChange"
-    />
+    <!-- Opacity -->
+    <div class="flex flex-col gap-2">
+      <div class="flex items-center justify-between">
+        <span class="text-left text-xs font-sans text-descrip-text">
+          {{ t('maskEditor.opacity') }}
+        </span>
+        <input
+          v-model.number="brushOpacity"
+          type="number"
+          class="w-16 px-2 py-1 text-sm text-center border rounded-md bg-comfy-menu-bg border-p-form-field-border-color text-input-text"
+          :min="0"
+          :max="1"
+          :step="0.01"
+        />
+      </div>
+      <SliderControl
+        v-model="brushOpacity"
+        class="flex-1"
+        label=""
+        :min="0"
+        :max="1"
+        :step="0.01"
+      />
+    </div>
 
-    <SliderControl
-      :label="t('maskEditor.hardness')"
-      :min="0"
-      :max="1"
-      :step="0.01"
-      :model-value="store.brushSettings.hardness"
-      @update:model-value="onHardnessChange"
-    />
+    <!-- Hardness -->
+    <div class="flex flex-col gap-2">
+      <div class="flex items-center justify-between">
+        <span class="text-left text-xs font-sans text-descrip-text">
+          {{ t('maskEditor.hardness') }}
+        </span>
+        <input
+          v-model.number="brushHardness"
+          type="number"
+          class="w-16 px-2 py-1 text-sm text-center border rounded-md bg-comfy-menu-bg border-p-form-field-border-color text-input-text"
+          :min="0"
+          :max="1"
+          :step="0.01"
+        />
+      </div>
+      <SliderControl
+        v-model="brushHardness"
+        class="flex-1"
+        label=""
+        :min="0"
+        :max="1"
+        :step="0.01"
+      />
+    </div>
 
-    <SliderControl
-      :label="$t('maskEditor.stepSize')"
-      :min="1"
-      :max="100"
-      :step="1"
-      :model-value="store.brushSettings.stepSize"
-      @update:model-value="onStepSizeChange"
-    />
+    <!-- Step Size -->
+    <div class="flex flex-col gap-2">
+      <div class="flex items-center justify-between">
+        <span class="text-left text-xs font-sans text-descrip-text">
+          {{ t('maskEditor.stepSize') }}
+        </span>
+        <input
+          v-model.number="brushStepSize"
+          type="number"
+          class="w-16 px-2 py-1 text-sm text-center border rounded-md bg-comfy-menu-bg border-p-form-field-border-color text-input-text"
+          :min="1"
+          :max="100"
+          :step="1"
+        />
+      </div>
+      <SliderControl
+        v-model="brushStepSize"
+        class="flex-1"
+        label=""
+        :min="1"
+        :max="100"
+        :step="1"
+      />
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+
 import { BrushShape } from '@/extensions/core/maskeditor/types'
 import { t } from '@/i18n'
 import { useMaskEditorStore } from '@/stores/maskEditorStore'
+import { cn } from '@/utils/tailwindUtil'
 
 import SliderControl from './controls/SliderControl.vue'
 
 const store = useMaskEditorStore()
 
-const textButtonClass =
-  'h-7.5 w-32 rounded-[10px] border border-[var(--p-form-field-border-color)] text-[var(--input-text)] font-sans pointer-events-auto transition-colors duration-100 bg-[var(--comfy-menu-bg)] hover:bg-secondary-background-hover'
+const colorInputRef = ref<HTMLInputElement>()
 
+const textButtonClass =
+  'h-7.5 w-32 rounded-[10px] border border-p-form-field-border-color text-input-text font-sans transition-colors duration-100 bg-comfy-menu-bg hover:bg-secondary-background-hover'
+
+/* Computed properties that use store setters for validation */
+const brushSize = computed({
+  get: () => store.brushSettings.size,
+  set: (value: number) => store.setBrushSize(value)
+})
+
+const brushOpacity = computed({
+  get: () => store.brushSettings.opacity,
+  set: (value: number) => store.setBrushOpacity(value)
+})
+
+const brushHardness = computed({
+  get: () => store.brushSettings.hardness,
+  set: (value: number) => store.setBrushHardness(value)
+})
+
+const brushStepSize = computed({
+  get: () => store.brushSettings.stepSize,
+  set: (value: number) => store.setBrushStepSize(value)
+})
+
+/* Brush shape */
 const setBrushShape = (shape: BrushShape) => {
   store.brushSettings.type = shape
 }
 
-const onColorChange = (event: Event) => {
-  store.rgbColor = (event.target as HTMLInputElement).value
-}
-
-const onThicknessChange = (value: number) => {
-  store.setBrushSize(value)
-}
-
-const onOpacityChange = (value: number) => {
-  store.setBrushOpacity(value)
-}
-
-const onHardnessChange = (value: number) => {
-  store.setBrushHardness(value)
-}
-
-const onStepSizeChange = (value: number) => {
-  store.setBrushStepSize(value)
-}
-
+/* Reset */
 const resetToDefault = () => {
   store.resetBrushToDefault()
 }
+
+onMounted(() => {
+  if (colorInputRef.value) {
+    store.colorInput = colorInputRef.value
+  }
+})
+
+onBeforeUnmount(() => {
+  store.colorInput = null
+})
 </script>

src/components/maskeditor/MaskEditorContent.vue

@@ -202,6 +202,7 @@ onBeforeUnmount(() => {
   }
 
   store.canvasHistory.clearStates()
+
   store.resetState()
   dataStore.reset()
 })

src/components/queue/job/JobGroupsList.test.ts

@@ -22,7 +22,6 @@ const QueueJobItemStub = defineComponent({
     runningNodeName: { type: String, default: undefined },
     activeDetailsId: { type: String, default: null }
   },
-  emits: ['cancel', 'delete', 'menu', 'view', 'details-enter', 'details-leave'],
   template: '<div class="queue-job-item-stub"></div>'
 })
 

src/components/queue/job/useJobErrorReporting.test.ts

@@ -4,7 +4,10 @@ import type { ComputedRef } from 'vue'
 
 import type { ExecutionErrorWsMessage } from '@/schemas/apiSchema'
 import type { TaskItemImpl } from '@/stores/queueStore'
-import type { JobErrorDialogService } from '@/components/queue/job/useJobErrorReporting'
+import type {
+  JobErrorDialogService,
+  UseJobErrorReportingOptions
+} from '@/components/queue/job/useJobErrorReporting'
 import * as jobErrorReporting from '@/components/queue/job/useJobErrorReporting'
 
 const createExecutionErrorMessage = (
@@ -90,9 +93,9 @@ describe('extractExecutionError', () => {
 describe('useJobErrorReporting', () => {
   let taskState = ref<TaskItemImpl | null>(null)
   let taskForJob: ComputedRef<TaskItemImpl | null>
-  let copyToClipboard: ReturnType<typeof vi.fn>
-  let showExecutionErrorDialog: ReturnType<typeof vi.fn>
-  let showErrorDialog: ReturnType<typeof vi.fn>
+  let copyToClipboard: UseJobErrorReportingOptions['copyToClipboard']
+  let showExecutionErrorDialog: JobErrorDialogService['showExecutionErrorDialog']
+  let showErrorDialog: JobErrorDialogService['showErrorDialog']
   let dialog: JobErrorDialogService
   let composable: ReturnType<typeof jobErrorReporting.useJobErrorReporting>
 
@@ -146,7 +149,7 @@ describe('useJobErrorReporting', () => {
     expect(copyToClipboard).toHaveBeenCalledTimes(1)
     expect(copyToClipboard).toHaveBeenCalledWith('Clipboard failure')
 
-    copyToClipboard.mockClear()
+    vi.mocked(copyToClipboard).mockClear()
     taskState.value = createTaskWithMessages([])
     composable.copyErrorMessage()
     expect(copyToClipboard).not.toHaveBeenCalled()
@@ -174,7 +177,7 @@ describe('useJobErrorReporting', () => {
     composable.reportJobError()
     expect(showExecutionErrorDialog).not.toHaveBeenCalled()
     expect(showErrorDialog).toHaveBeenCalledTimes(1)
-    const [errorArg, optionsArg] = showErrorDialog.mock.calls[0]
+    const [errorArg, optionsArg] = vi.mocked(showErrorDialog).mock.calls[0]
     expect(errorArg).toBeInstanceOf(Error)
     expect(errorArg.message).toBe(message)
     expect(optionsArg).toEqual({ reportType: 'queueJobError' })

src/components/queue/job/useJobErrorReporting.ts

@@ -40,7 +40,7 @@ export const extractExecutionError = (
   }
 }
 
-type UseJobErrorReportingOptions = {
+export type UseJobErrorReportingOptions = {
   taskForJob: ComputedRef<TaskItemImpl | null>
   copyToClipboard: CopyHandler
   dialog: JobErrorDialogService

src/components/sidebar/tabs/AssetsSidebarTab.vue

@@ -47,11 +47,36 @@
       <MediaAssetFilterBar
         v-model:search-query="searchQuery"
         v-model:sort-by="sortBy"
+        v-model:view-mode="viewMode"
         v-model:media-type-filters="mediaTypeFilters"
         class="pb-1 px-2 2xl:px-4"
         :show-generation-time-sort="activeTab === 'output'"
       />
-      <Divider type="dashed" class="my-2" />
+      <div
+        v-if="isQueuePanelV2Enabled"
+        class="flex items-center justify-between px-2 py-2 2xl:px-4"
+      >
+        <span class="text-sm text-muted-foreground">
+          {{ activeJobsLabel }}
+        </span>
+        <div class="flex items-center gap-2">
+          <span class="text-sm text-base-foreground">
+            {{ t('sideToolbar.queueProgressOverlay.clearQueueTooltip') }}
+          </span>
+          <Button
+            variant="destructive"
+            size="icon"
+            :aria-label="
+              t('sideToolbar.queueProgressOverlay.clearQueueTooltip')
+            "
+            :disabled="queuedCount === 0"
+            @click="handleClearQueue"
+          >
+            <i class="icon-[lucide--list-x] size-4" />
+          </Button>
+        </div>
+      </div>
+      <Divider v-else type="dashed" class="my-2" />
     </template>
     <template #body>
       <div v-if="loading && !displayAssets.length">
@@ -164,7 +189,7 @@
 
 <script setup lang="ts">
 import { useDebounceFn, useElementHover, useResizeObserver } from '@vueuse/core'
-import { Divider } from 'primevue'
+import Divider from 'primevue/divider'
 import ProgressSpinner from 'primevue/progressspinner'
 import { useToast } from 'primevue/usetoast'
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
@@ -187,17 +212,26 @@ import { useMediaAssetFiltering } from '@/platform/assets/composables/useMediaAs
 import { getOutputAssetMetadata } from '@/platform/assets/schemas/assetMetadataSchema'
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
 import { isCloud } from '@/platform/distribution/types'
+import { useSettingStore } from '@/platform/settings/settingStore'
+import { useCommandStore } from '@/stores/commandStore'
 import { useDialogStore } from '@/stores/dialogStore'
-import { ResultItemImpl } from '@/stores/queueStore'
+import { ResultItemImpl, useQueueStore } from '@/stores/queueStore'
 import { formatDuration, getMediaTypeFromFilename } from '@/utils/formatUtil'
 import { cn } from '@/utils/tailwindUtil'
 
-const { t } = useI18n()
+const { t, n } = useI18n()
+const commandStore = useCommandStore()
+const queueStore = useQueueStore()
+const settingStore = useSettingStore()
 
 const activeTab = ref<'input' | 'output'>('output')
 const folderPromptId = ref<string | null>(null)
 const folderExecutionTime = ref<number | undefined>(undefined)
 const isInFolderView = computed(() => folderPromptId.value !== null)
+const viewMode = ref<'list' | 'grid'>('grid')
+const isQueuePanelV2Enabled = computed(() =>
+  settingStore.get('Comfy.Queue.QPOV2')
+)
 
 // Track which asset's context menu is open (for single-instance context menu management)
 const openContextMenuId = ref<string | null>(null)
@@ -226,6 +260,19 @@ const formattedExecutionTime = computed(() => {
   return formatDuration(folderExecutionTime.value * 1000)
 })
 
+const queuedCount = computed(() => queueStore.pendingTasks.length)
+const activeJobsCount = computed(
+  () => queueStore.pendingTasks.length + queueStore.runningTasks.length
+)
+const activeJobsLabel = computed(() => {
+  const count = activeJobsCount.value
+  return t(
+    'sideToolbar.queueProgressOverlay.activeJobs',
+    { count: n(count) },
+    count
+  )
+})
+
 const toast = useToast()
 
 const inputAssets = useMediaAssets('input')
@@ -490,6 +537,10 @@ const handleDeleteSelected = async () => {
   clearSelection()
 }
 
+const handleClearQueue = async () => {
+  await commandStore.execute('Comfy.ClearPendingTasks')
+}
+
 const handleApproachEnd = useDebounceFn(async () => {
   if (
     activeTab.value === 'output' &&

src/components/ui/button/button.variants.ts

@@ -18,7 +18,8 @@ export const buttonVariants = cva({
       'muted-textonly':
         'text-muted-foreground bg-transparent hover:bg-secondary-background-hover',
       'destructive-textonly':
-        'text-destructive-background bg-transparent hover:bg-destructive-background/10'
+        'text-destructive-background bg-transparent hover:bg-destructive-background/10',
+      'overlay-white': 'bg-white text-gray-600 hover:bg-white/90'
     },
     size: {
       sm: 'h-6 rounded-sm px-2 py-1 text-xs',
@@ -44,7 +45,8 @@ const variants = [
   'destructive',
   'textonly',
   'muted-textonly',
-  'destructive-textonly'
+  'destructive-textonly',
+  'overlay-white'
 ] as const satisfies Array<ButtonVariants['variant']>
 const sizes = ['sm', 'md', 'lg', 'icon', 'icon-sm'] as const satisfies Array<
   ButtonVariants['size']

src/components/widget/nav/NavIcon.vue

@@ -1,5 +1,5 @@
 <template>
-  <i :class="icon" class="text-neutral text-sm" />
+  <i :class="icon" class="text-neutral text-sm shrink-0" />
 </template>
 
 <script setup lang="ts">

src/components/widget/nav/NavItem.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex cursor-pointer items-center gap-2 rounded-md px-4 py-3 text-sm transition-colors text-base-foreground"
+    class="flex cursor-pointer items-start gap-2 rounded-md px-4 py-3 text-sm transition-colors text-base-foreground"
     :class="
       active
         ? 'bg-interface-menu-component-surface-selected'
@@ -9,9 +9,11 @@
     role="button"
     @click="onClick"
   >
-    <NavIcon v-if="icon" :icon="icon" />
-    <i v-else class="text-neutral icon-[lucide--folder] text-xs" />
-    <span class="flex items-center">
+    <div v-if="icon" class="py-0.5">
+      <NavIcon :icon="icon" />
+    </div>
+    <i v-else class="text-neutral icon-[lucide--folder] text-xs shrink-0" />
+    <span class="flex items-center break-all">
       <slot></slot>
     </span>
   </div>

src/composables/canvas/useSelectedLiteGraphItems.test.ts

@@ -2,12 +2,8 @@ import { createPinia, setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { useSelectedLiteGraphItems } from '@/composables/canvas/useSelectedLiteGraphItems'
-import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
-import {
-  LGraphEventMode,
-  type Positionable,
-  Reroute
-} from '@/lib/litegraph/src/litegraph'
+import type { LGraphNode, Positionable } from '@/lib/litegraph/src/litegraph'
+import { LGraphEventMode, Reroute } from '@/lib/litegraph/src/litegraph'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { app } from '@/scripts/app'
 

src/composables/graph/useGraphNodeManager.ts

@@ -34,6 +34,7 @@ import type {
 } from '@/lib/litegraph/src/litegraph'
 import type { TitleMode } from '@/lib/litegraph/src/types/globalEnums'
 import { NodeSlotType } from '@/lib/litegraph/src/types/globalEnums'
+import { app } from '@/scripts/app'
 
 export interface WidgetSlotMetadata {
   index: number
@@ -47,6 +48,7 @@ export interface SafeWidgetData {
   borderStyle?: string
   callback?: ((value: unknown) => void) | undefined
   controlWidget?: SafeControlWidget
+  hasLayoutSize?: boolean
   isDOMWidget?: boolean
   label?: string
   nodeType?: string
@@ -171,7 +173,12 @@ export function safeWidgetMapper(
       const callback = (v: unknown) => {
         const value = normalizeWidgetValue(v)
         widget.value = value ?? undefined
-        widget.callback?.(value)
+        // Match litegraph callback signature: (value, canvas, node, pos, event)
+        // Some extensions (e.g., Impact Pack) expect node as the 3rd parameter
+        widget.callback?.(value, app.canvas, node)
+        // Trigger redraw for all legacy widgets on this node (e.g., mask preview)
+        // This ensures widgets that depend on other widget values get updated
+        node.widgets?.forEach((w) => w.triggerDraw?.())
       }
 
       return {
@@ -181,6 +188,7 @@ export function safeWidgetMapper(
         borderStyle,
         callback,
         controlWidget: getControlWidget(widget),
+        hasLayoutSize: typeof widget.computeLayoutSize === 'function',
         isDOMWidget: isDOMWidget(widget),
         label: widget.label,
         nodeType: getNodeType(node, widget),

src/composables/maskeditor/useCanvasHistory.test.ts

@@ -43,7 +43,7 @@ describe('useCanvasHistory', () => {
         return rafCallCount
       }
     )
-    vi.spyOn(window, 'alert').mockImplementation(() => {})
+    vi.stubGlobal('alert', () => {})
 
     const createMockImageData = () => {
       return {

src/composables/maskeditor/useMaskEditorLoader.ts

@@ -104,7 +104,8 @@ export function useMaskEditorLoader() {
       // If we have a widget filename, we should prioritize it over the node image
       // because the node image might be stale (e.g. from a previous save)
       // while the widget value reflects the current selection.
-      if (widgetFilename) {
+      // Skip internal reference formats (e.g. "$35-0" used by some plugins like Impact-Pack)
+      if (widgetFilename && !widgetFilename.startsWith('$')) {
         try {
           // Parse the widget value which might be in format "subfolder/filename [type]" or just "filename"
           let filename = widgetFilename

src/composables/node/usePriceBadge.test.ts

@@ -2,7 +2,7 @@ import { describe, expect, vi } from 'vitest'
 
 import { LGraphNode } from '@/lib/litegraph/src/litegraph'
 
-import { subgraphTest } from '../../litegraph/subgraph/fixtures/subgraphFixtures'
+import { subgraphTest } from '@/lib/litegraph/src/subgraph/__fixtures__/subgraphFixtures'
 
 import { usePriceBadge } from '@/composables/node/usePriceBadge'
 

src/composables/queue/useJobList.test.ts

@@ -5,6 +5,9 @@ import type { Ref } from 'vue'
 
 import { useJobList } from '@/composables/queue/useJobList'
 import type { JobState } from '@/types/queue'
+import { buildJobDisplay } from '@/utils/queueDisplay'
+import type { BuildJobDisplayCtx } from '@/utils/queueDisplay'
+import type { TaskItemImpl } from '@/stores/queueStore'
 
 type TestTask = {
   promptId: string
@@ -43,19 +46,8 @@ vi.mock('vue-i18n', () => ({
   }
 }))
 
-let stMock: ReturnType<typeof vi.fn>
-const ensureStMock = () => {
-  if (!stMock) {
-    stMock = vi.fn(
-      (key: string, fallback?: string) => `i18n(${key})-${fallback}`
-    )
-  }
-  return stMock
-}
 vi.mock('@/i18n', () => ({
-  st: (...args: any[]) => {
-    return ensureStMock()(...args)
-  }
+  st: vi.fn((key: string, fallback?: string) => `i18n(${key})-${fallback}`)
 }))
 
 let totalPercent: Ref<number>
@@ -75,40 +67,24 @@ vi.mock('@/composables/queue/useQueueProgress', () => ({
   }
 }))
 
-let buildJobDisplayMock: ReturnType<typeof vi.fn>
-const ensureBuildDisplayMock = () => {
-  if (!buildJobDisplayMock) {
-    buildJobDisplayMock = vi.fn((task: any, state: JobState, options: any) => ({
+vi.mock('@/utils/queueDisplay', () => ({
+  buildJobDisplay: vi.fn(
+    (task: TaskItemImpl, state: JobState, options: BuildJobDisplayCtx) => ({
       primary: `Job ${task.promptId}`,
       secondary: `${state} meta`,
       iconName: `${state}-icon`,
       iconImageUrl: undefined,
       showClear: state === 'failed',
       options
-    }))
-  }
-  return buildJobDisplayMock
-}
-vi.mock('@/utils/queueDisplay', () => ({
-  buildJobDisplay: (...args: any[]) => {
-    return ensureBuildDisplayMock()(...args)
-  }
+    })
+  )
 }))
 
-let jobStateFromTaskMock: ReturnType<typeof vi.fn>
-const ensureJobStateMock = () => {
-  if (!jobStateFromTaskMock) {
-    jobStateFromTaskMock = vi.fn(
-      (task: TestTask, isInitializing?: boolean): JobState =>
-        task.mockState ?? (isInitializing ? 'running' : 'completed')
-    )
-  }
-  return jobStateFromTaskMock
-}
 vi.mock('@/utils/queueUtil', () => ({
-  jobStateFromTask: (...args: any[]) => {
-    return ensureJobStateMock()(...args)
-  }
+  jobStateFromTask: vi.fn(
+    (task: TestTask, isInitializing?: boolean): JobState =>
+      task.mockState ?? (isInitializing ? 'running' : 'completed')
+  )
 }))
 
 let queueStoreMock: {
@@ -137,7 +113,7 @@ let executionStoreMock: {
   executingNode: null | { title?: string; type?: string }
   isPromptInitializing: (promptId?: string | number) => boolean
 }
-let isPromptInitializingMock: ReturnType<typeof vi.fn>
+let isPromptInitializingMock: (promptId?: string | number) => boolean
 const ensureExecutionStore = () => {
   if (!isPromptInitializingMock) {
     isPromptInitializingMock = vi.fn(() => false)
@@ -221,13 +197,9 @@ const resetStores = () => {
   localeRef.value = 'en-US'
   tMock.mockClear()
 
-  if (stMock) stMock.mockClear()
-  if (buildJobDisplayMock) buildJobDisplayMock.mockClear()
-  if (jobStateFromTaskMock) jobStateFromTaskMock.mockClear()
-
   if (isPromptInitializingMock) {
-    isPromptInitializingMock.mockReset()
-    isPromptInitializingMock.mockReturnValue(false)
+    vi.mocked(isPromptInitializingMock).mockReset()
+    vi.mocked(isPromptInitializingMock).mockReturnValue(false)
   }
 }
 
@@ -240,6 +212,7 @@ describe('useJobList', () => {
   let api: ReturnType<typeof useJobList> | null = null
 
   beforeEach(() => {
+    vi.resetAllMocks()
     resetStores()
     wrapper?.unmount()
     wrapper = null
@@ -270,18 +243,18 @@ describe('useJobList', () => {
     await flush()
 
     jobItems.value
-    expect(buildJobDisplayMock).toHaveBeenCalledWith(
+    expect(buildJobDisplay).toHaveBeenCalledWith(
       expect.anything(),
       'pending',
       expect.objectContaining({ showAddedHint: true })
     )
 
-    buildJobDisplayMock.mockClear()
+    vi.mocked(buildJobDisplay).mockClear()
     await vi.advanceTimersByTimeAsync(3000)
     await flush()
 
     jobItems.value
-    expect(buildJobDisplayMock).toHaveBeenCalledWith(
+    expect(buildJobDisplay).toHaveBeenCalledWith(
       expect.anything(),
       'pending',
       expect.objectContaining({ showAddedHint: false })
@@ -303,13 +276,13 @@ describe('useJobList', () => {
     await flush()
     expect(vi.getTimerCount()).toBe(0)
 
-    buildJobDisplayMock.mockClear()
+    vi.mocked(buildJobDisplay).mockClear()
     queueStoreMock.pendingTasks = [
       createTask({ promptId: taskId, queueIndex: 2, mockState: 'pending' })
     ]
     await flush()
     jobItems.value
-    expect(buildJobDisplayMock).toHaveBeenCalledWith(
+    expect(buildJobDisplay).toHaveBeenCalledWith(
       expect.anything(),
       'pending',
       expect.objectContaining({ showAddedHint: true })

src/composables/queue/useJobMenu.test.ts

@@ -284,7 +284,7 @@ describe('useJobMenu', () => {
 
     await nextTick()
     const entry = findActionEntry(jobMenuEntries.value, 'report-error')
-    entry?.onClick?.()
+    void entry?.onClick?.()
 
     expect(dialogServiceMock.showExecutionErrorDialog).toHaveBeenCalledWith(
       error
@@ -460,7 +460,7 @@ describe('useJobMenu', () => {
 
     await nextTick()
     const entry = findActionEntry(jobMenuEntries.value, 'download')
-    entry?.onClick?.()
+    void entry?.onClick?.()
 
     expect(downloadFileMock).toHaveBeenCalledWith('https://asset')
   })
@@ -471,7 +471,7 @@ describe('useJobMenu', () => {
 
     await nextTick()
     const entry = findActionEntry(jobMenuEntries.value, 'download')
-    entry?.onClick?.()
+    void entry?.onClick?.()
 
     expect(downloadFileMock).not.toHaveBeenCalled()
   })

src/composables/useCachedRequest.test.ts

@@ -3,8 +3,11 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { useCachedRequest } from '@/composables/useCachedRequest'
 
 describe('useCachedRequest', () => {
-  let mockRequestFn: ReturnType<typeof vi.fn>
-  let abortSpy: ReturnType<typeof vi.fn>
+  let mockRequestFn: (
+    params: any,
+    signal?: AbortSignal
+  ) => Promise<unknown | null>
+  let abortSpy: () => void
 
   beforeEach(() => {
     vi.clearAllMocks()

src/composables/useCoreCommands.test.ts

@@ -9,8 +9,8 @@ import { app } from '@/scripts/app'
 
 // Mock vue-i18n for useExternalLink
 const mockLocale = ref('en')
-vi.mock('vue-i18n', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('vue-i18n')>()
+vi.mock('vue-i18n', async () => {
+  const actual = await vi.importActual('vue-i18n')
   return {
     ...actual,
     useI18n: vi.fn(() => ({

src/composables/useCoreCommands.ts

@@ -39,7 +39,11 @@ import { useLitegraphService } from '@/services/litegraphService'
 import type { ComfyCommand } from '@/stores/commandStore'
 import { useExecutionStore } from '@/stores/executionStore'
 import { useHelpCenterStore } from '@/stores/helpCenterStore'
-import { useQueueSettingsStore, useQueueStore } from '@/stores/queueStore'
+import {
+  useQueueSettingsStore,
+  useQueueStore,
+  useQueueUIStore
+} from '@/stores/queueStore'
 import { useSubgraphNavigationStore } from '@/stores/subgraphNavigationStore'
 import { useSubgraphStore } from '@/stores/subgraphStore'
 import { useBottomPanelStore } from '@/stores/workspace/bottomPanelStore'
@@ -63,7 +67,6 @@ import { useWorkflowTemplateSelectorDialog } from './useWorkflowTemplateSelector
 const { isActiveSubscription, showSubscriptionDialog } = useSubscription()
 
 const moveSelectedNodesVersionAdded = '1.22.2'
-
 export function useCoreCommands(): ComfyCommand[] {
   const workflowService = useWorkflowService()
   const workflowStore = useWorkflowStore()
@@ -75,6 +78,7 @@ export function useCoreCommands(): ComfyCommand[] {
   const executionStore = useExecutionStore()
   const telemetry = useTelemetry()
   const { staticUrls, buildDocsUrl } = useExternalLink()
+  const settingStore = useSettingStore()
 
   const bottomPanelStore = useBottomPanelStore()
 
@@ -82,6 +86,14 @@ export function useCoreCommands(): ComfyCommand[] {
     useSelectedLiteGraphItems()
   const getTracker = () => workflowStore.activeWorkflow?.changeTracker
 
+  function isQueuePanelV2Enabled() {
+    return settingStore.get('Comfy.Queue.QPOV2')
+  }
+
+  async function toggleQueuePanelV2() {
+    await settingStore.set('Comfy.Queue.QPOV2', !isQueuePanelV2Enabled())
+  }
+
   const moveSelectedNodes = (
     positionUpdater: (pos: Point, gridSize: number) => Point
   ) => {
@@ -423,6 +435,18 @@ export function useCoreCommands(): ComfyCommand[] {
       },
       active: () => useSettingStore().get('Comfy.Minimap.Visible')
     },
+    {
+      id: 'Comfy.Queue.ToggleOverlay',
+      icon: 'pi pi-history',
+      label: () => t('queue.toggleJobHistory'),
+      menubarLabel: () => t('queue.jobHistory'),
+      versionAdded: '1.37.0',
+      category: 'view-controls' as const,
+      function: () => {
+        useQueueUIStore().toggleOverlay()
+      },
+      active: () => useQueueUIStore().isOverlayExpanded
+    },
     {
       id: 'Comfy.QueuePrompt',
       icon: 'pi pi-play',
@@ -1175,6 +1199,12 @@ export function useCoreCommands(): ComfyCommand[] {
         await useWorkflowService().reloadCurrentWorkflow() // ensure changes take effect immediately
       }
     },
+    {
+      id: 'Comfy.ToggleQPOV2',
+      icon: 'pi pi-list',
+      label: 'Toggle Queue Panel V2',
+      function: toggleQueuePanelV2
+    },
     {
       id: 'Comfy.ToggleLinear',
       icon: 'pi pi-database',

src/composables/useFeatureFlags.ts

@@ -11,10 +11,12 @@ export enum ServerFeatureFlag {
   MAX_UPLOAD_SIZE = 'max_upload_size',
   MANAGER_SUPPORTS_V4 = 'extension.manager.supports_v4',
   MODEL_UPLOAD_BUTTON_ENABLED = 'model_upload_button_enabled',
-  ASSET_UPDATE_OPTIONS_ENABLED = 'asset_update_options_enabled',
+  ASSET_DELETION_ENABLED = 'asset_deletion_enabled',
+  ASSET_RENAME_ENABLED = 'asset_rename_enabled',
   PRIVATE_MODELS_ENABLED = 'private_models_enabled',
   ONBOARDING_SURVEY_ENABLED = 'onboarding_survey_enabled',
-  HUGGINGFACE_MODEL_IMPORT_ENABLED = 'huggingface_model_import_enabled'
+  HUGGINGFACE_MODEL_IMPORT_ENABLED = 'huggingface_model_import_enabled',
+  ASYNC_MODEL_UPLOAD_ENABLED = 'async_model_upload_enabled'
 }
 
 /**
@@ -41,14 +43,16 @@ export function useFeatureFlags() {
         )
       )
     },
-    get assetUpdateOptionsEnabled() {
-      // Check remote config first (from /api/features), fall back to websocket feature flags
+    get assetDeletionEnabled() {
       return (
-        remoteConfig.value.asset_update_options_enabled ??
-        api.getServerFeature(
-          ServerFeatureFlag.ASSET_UPDATE_OPTIONS_ENABLED,
-          false
-        )
+        remoteConfig.value.asset_deletion_enabled ??
+        api.getServerFeature(ServerFeatureFlag.ASSET_DELETION_ENABLED, false)
+      )
+    },
+    get assetRenameEnabled() {
+      return (
+        remoteConfig.value.asset_rename_enabled ??
+        api.getServerFeature(ServerFeatureFlag.ASSET_RENAME_ENABLED, false)
       )
     },
     get privateModelsEnabled() {
@@ -65,7 +69,6 @@ export function useFeatureFlags() {
       )
     },
     get huggingfaceModelImportEnabled() {
-      // Check remote config first (from /api/features), fall back to websocket feature flags
       return (
         remoteConfig.value.huggingface_model_import_enabled ??
         api.getServerFeature(
@@ -73,6 +76,15 @@ export function useFeatureFlags() {
           false
         )
       )
+    },
+    get asyncModelUploadEnabled() {
+      return (
+        remoteConfig.value.async_model_upload_enabled ??
+        api.getServerFeature(
+          ServerFeatureFlag.ASYNC_MODEL_UPLOAD_ENABLED,
+          false
+        )
+      )
     }
   })
 

src/composables/useLoad3d.test.ts

@@ -54,7 +54,8 @@ describe('useLoad3d', () => {
         },
         'Model Config': {
           upDirection: 'original',
-          materialMode: 'original'
+          materialMode: 'original',
+          showSkeleton: false
         },
         'Camera Config': {
           cameraType: 'perspective',
@@ -107,6 +108,8 @@ describe('useLoad3d', () => {
       exportModel: vi.fn().mockResolvedValue(undefined),
       isSplatModel: vi.fn().mockReturnValue(false),
       isPlyModel: vi.fn().mockReturnValue(false),
+      hasSkeleton: vi.fn().mockReturnValue(false),
+      setShowSkeleton: vi.fn(),
       addEventListener: vi.fn(),
       removeEventListener: vi.fn(),
       remove: vi.fn(),
@@ -117,7 +120,9 @@ describe('useLoad3d', () => {
       }
     }
 
-    vi.mocked(Load3d).mockImplementation(() => mockLoad3d)
+    vi.mocked(Load3d).mockImplementation(function () {
+      Object.assign(this, mockLoad3d)
+    })
 
     mockToastStore = {
       addAlert: vi.fn()
@@ -141,7 +146,8 @@ describe('useLoad3d', () => {
       })
       expect(composable.modelConfig.value).toEqual({
         upDirection: 'original',
-        materialMode: 'original'
+        materialMode: 'original',
+        showSkeleton: false
       })
       expect(composable.cameraConfig.value).toEqual({
         cameraType: 'perspective',
@@ -289,7 +295,7 @@ describe('useLoad3d', () => {
     })
 
     it('should handle initialization errors', async () => {
-      vi.mocked(Load3d).mockImplementationOnce(() => {
+      vi.mocked(Load3d).mockImplementationOnce(function () {
         throw new Error('Load3d creation failed')
       })
 
@@ -408,7 +414,8 @@ describe('useLoad3d', () => {
       expect(mockLoad3d.setMaterialMode).toHaveBeenCalledWith('wireframe')
       expect(mockNode.properties['Model Config']).toEqual({
         upDirection: '+y',
-        materialMode: 'wireframe'
+        materialMode: 'wireframe',
+        showSkeleton: false
       })
     })
 
@@ -694,10 +701,13 @@ describe('useLoad3d', () => {
         'backgroundImageLoadingEnd',
         'modelLoadingStart',
         'modelLoadingEnd',
+        'skeletonVisibilityChange',
         'exportLoadingStart',
         'exportLoadingEnd',
         'recordingStatusChange',
-        'animationListChange'
+        'animationListChange',
+        'animationProgressChange',
+        'cameraChanged'
       ]
 
       expectedEvents.forEach((event) => {

src/composables/useLoad3d.ts

@@ -40,9 +40,12 @@ export const useLoad3d = (nodeOrRef: MaybeRef<LGraphNode | null>) => {
 
   const modelConfig = ref<ModelConfig>({
     upDirection: 'original',
-    materialMode: 'original'
+    materialMode: 'original',
+    showSkeleton: false
   })
 
+  const hasSkeleton = ref(false)
+
   const cameraConfig = ref<CameraConfig>({
     cameraType: 'perspective',
     fov: 75
@@ -60,6 +63,8 @@ export const useLoad3d = (nodeOrRef: MaybeRef<LGraphNode | null>) => {
   const playing = ref(false)
   const selectedSpeed = ref(1)
   const selectedAnimation = ref(0)
+  const animationProgress = ref(0)
+  const animationDuration = ref(0)
   const loading = ref(false)
   const loadingMessage = ref('')
   const isPreview = ref(false)
@@ -271,6 +276,7 @@ export const useLoad3d = (nodeOrRef: MaybeRef<LGraphNode | null>) => {
         nodeRef.value.properties['Model Config'] = newValue
         load3d.setUpDirection(newValue.upDirection)
         load3d.setMaterialMode(newValue.materialMode)
+        load3d.setShowSkeleton(newValue.showSkeleton)
       }
     },
     { deep: true }
@@ -357,6 +363,13 @@ export const useLoad3d = (nodeOrRef: MaybeRef<LGraphNode | null>) => {
     }
   }
 
+  const handleSeek = (progress: number) => {
+    if (load3d && animationDuration.value > 0) {
+      const time = (progress / 100) * animationDuration.value
+      load3d.setAnimationTime(time)
+    }
+  }
+
   const handleBackgroundImageUpdate = async (file: File | null) => {
     if (!file) {
       sceneConfig.value.backgroundImage = ''
@@ -494,6 +507,12 @@ export const useLoad3d = (nodeOrRef: MaybeRef<LGraphNode | null>) => {
       loading.value = false
       isSplatModel.value = load3d?.isSplatModel() ?? false
       isPlyModel.value = load3d?.isPlyModel() ?? false
+      hasSkeleton.value = load3d?.hasSkeleton() ?? false
+      // Reset skeleton visibility when loading new model
+      modelConfig.value.showSkeleton = false
+    },
+    skeletonVisibilityChange: (value: boolean) => {
+      modelConfig.value.showSkeleton = value
     },
     exportLoadingStart: (message: string) => {
       loadingMessage.value = message || t('load3d.exportingModel')
@@ -514,6 +533,14 @@ export const useLoad3d = (nodeOrRef: MaybeRef<LGraphNode | null>) => {
     animationListChange: (newValue: AnimationItem[]) => {
       animations.value = newValue
     },
+    animationProgressChange: (data: {
+      progress: number
+      currentTime: number
+      duration: number
+    }) => {
+      animationProgress.value = data.progress
+      animationDuration.value = data.duration
+    },
     cameraChanged: (cameraState: CameraState) => {
       const rawNode = toRaw(nodeRef.value)
       if (rawNode) {
@@ -567,12 +594,15 @@ export const useLoad3d = (nodeOrRef: MaybeRef<LGraphNode | null>) => {
     isPreview,
     isSplatModel,
     isPlyModel,
+    hasSkeleton,
     hasRecording,
     recordingDuration,
     animations,
     playing,
     selectedSpeed,
     selectedAnimation,
+    animationProgress,
+    animationDuration,
     loading,
     loadingMessage,
 
@@ -585,6 +615,7 @@ export const useLoad3d = (nodeOrRef: MaybeRef<LGraphNode | null>) => {
     handleStopRecording,
     handleExportRecording,
     handleClearRecording,
+    handleSeek,
     handleBackgroundImageUpdate,
     handleExportModel,
     handleModelDrop,

src/composables/useLoad3dDrag.test.ts

@@ -35,7 +35,7 @@ function createMockDragEvent(
 
 describe('useLoad3dDrag', () => {
   let mockToastStore: any
-  let mockOnModelDrop: ReturnType<typeof vi.fn>
+  let mockOnModelDrop: (file: File) => void | Promise<void>
 
   beforeEach(() => {
     vi.clearAllMocks()
@@ -199,7 +199,7 @@ describe('useLoad3dDrag', () => {
       const extensions = ['.gltf', '.glb', '.obj', '.fbx', '.stl']
 
       for (const ext of extensions) {
-        mockOnModelDrop.mockClear()
+        vi.mocked(mockOnModelDrop).mockClear()
 
         const modelFile = new File([], `model${ext}`)
         const event = createMockDragEvent('drop', {

src/composables/useLoad3dViewer.test.ts

@@ -120,7 +120,9 @@ describe('useLoad3dViewer', () => {
       forceRender: vi.fn()
     }
 
-    vi.mocked(Load3d).mockImplementation(() => mockLoad3d)
+    vi.mocked(Load3d).mockImplementation(function () {
+      Object.assign(this, mockLoad3d)
+    })
 
     mockLoad3dService = {
       copyLoad3dState: vi.fn().mockResolvedValue(undefined),
@@ -198,7 +200,7 @@ describe('useLoad3dViewer', () => {
     })
 
     it('should handle initialization errors', async () => {
-      vi.mocked(Load3d).mockImplementationOnce(() => {
+      vi.mocked(Load3d).mockImplementationOnce(function () {
         throw new Error('Load3d creation failed')
       })
 
@@ -312,7 +314,7 @@ describe('useLoad3dViewer', () => {
     })
 
     it('should handle watcher errors gracefully', async () => {
-      mockLoad3d.setBackgroundColor.mockImplementationOnce(() => {
+      mockLoad3d.setBackgroundColor.mockImplementationOnce(function () {
         throw new Error('Color update failed')
       })
 

src/composables/useLoad3dViewer.ts

@@ -3,6 +3,7 @@ import { ref, toRaw, watch } from 'vue'
 import Load3d from '@/extensions/core/load3d/Load3d'
 import Load3dUtils from '@/extensions/core/load3d/Load3dUtils'
 import type {
+  AnimationItem,
   BackgroundRenderModeType,
   CameraState,
   CameraType,
@@ -49,6 +50,14 @@ export const useLoad3dViewer = (node?: LGraphNode) => {
   const isSplatModel = ref(false)
   const isPlyModel = ref(false)
 
+  // Animation state
+  const animations = ref<AnimationItem[]>([])
+  const playing = ref(false)
+  const selectedSpeed = ref(1)
+  const selectedAnimation = ref(0)
+  const animationProgress = ref(0)
+  const animationDuration = ref(0)
+
   let load3d: Load3d | null = null
   let sourceLoad3d: Load3d | null = null
 
@@ -174,6 +183,61 @@ export const useLoad3dViewer = (node?: LGraphNode) => {
     }
   })
 
+  // Animation watches
+  watch(playing, (newValue) => {
+    if (load3d) {
+      load3d.toggleAnimation(newValue)
+    }
+  })
+
+  watch(selectedSpeed, (newValue) => {
+    if (load3d && newValue) {
+      load3d.setAnimationSpeed(newValue)
+    }
+  })
+
+  watch(selectedAnimation, (newValue) => {
+    if (load3d && newValue !== undefined) {
+      load3d.updateSelectedAnimation(newValue)
+    }
+  })
+
+  const handleSeek = (progress: number) => {
+    if (load3d && animationDuration.value > 0) {
+      const time = (progress / 100) * animationDuration.value
+      load3d.setAnimationTime(time)
+    }
+  }
+
+  const setupAnimationEvents = () => {
+    if (!load3d) return
+
+    load3d.addEventListener(
+      'animationListChange',
+      (newValue: AnimationItem[]) => {
+        animations.value = newValue
+      }
+    )
+
+    load3d.addEventListener(
+      'animationProgressChange',
+      (data: { progress: number; currentTime: number; duration: number }) => {
+        animationProgress.value = data.progress
+        animationDuration.value = data.duration
+      }
+    )
+
+    // Initialize animation list if animations already exist
+    if (load3d.hasAnimations()) {
+      const clips = load3d.animationManager.animationClips
+      animations.value = clips.map((clip, index) => ({
+        name: clip.name || `Animation ${index + 1}`,
+        index
+      }))
+      animationDuration.value = load3d.getAnimationDuration()
+    }
+  }
+
   /**
    * Initialize viewer in node mode (with source Load3d)
    */
@@ -270,6 +334,8 @@ export const useLoad3dViewer = (node?: LGraphNode) => {
         upDirection: upDirection.value,
         materialMode: materialMode.value
       }
+
+      setupAnimationEvents()
     } catch (error) {
       console.error('Error initializing Load3d viewer:', error)
       useToastStore().addAlert(
@@ -310,6 +376,8 @@ export const useLoad3dViewer = (node?: LGraphNode) => {
       isPlyModel.value = load3d.isPlyModel()
 
       isPreview.value = true
+
+      setupAnimationEvents()
     } catch (error) {
       console.error('Error initializing standalone 3D viewer:', error)
       useToastStore().addAlert('Failed to load 3D model')
@@ -527,6 +595,14 @@ export const useLoad3dViewer = (node?: LGraphNode) => {
     isSplatModel,
     isPlyModel,
 
+    // Animation state
+    animations,
+    playing,
+    selectedSpeed,
+    selectedAnimation,
+    animationProgress,
+    animationDuration,
+
     // Methods
     initializeViewer,
     initializeStandaloneViewer,
@@ -539,6 +615,7 @@ export const useLoad3dViewer = (node?: LGraphNode) => {
     refreshViewport,
     handleBackgroundImageUpdate,
     handleModelDrop,
+    handleSeek,
     cleanup
   }
 }

src/composables/useTemplateFiltering.test.ts

@@ -1,3 +1,4 @@
+import { createPinia, setActivePinia } from 'pinia'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { nextTick, ref } from 'vue'
 
@@ -19,10 +20,22 @@ const defaultSettingStore = {
   set: vi.fn().mockResolvedValue(undefined)
 }
 
+const defaultRankingStore = {
+  computeDefaultScore: vi.fn(() => 0),
+  computePopularScore: vi.fn(() => 0),
+  getUsageScore: vi.fn(() => 0),
+  computeFreshness: vi.fn(() => 0.5),
+  isLoaded: { value: false }
+}
+
 vi.mock('@/platform/settings/settingStore', () => ({
   useSettingStore: vi.fn(() => defaultSettingStore)
 }))
 
+vi.mock('@/stores/templateRankingStore', () => ({
+  useTemplateRankingStore: vi.fn(() => defaultRankingStore)
+}))
+
 vi.mock('@/platform/telemetry', () => ({
   useTelemetry: vi.fn(() => ({
     trackTemplateFilterChanged: vi.fn()
@@ -34,6 +47,7 @@ const { useTemplateFiltering } =
 
 describe('useTemplateFiltering', () => {
   beforeEach(() => {
+    setActivePinia(createPinia())
     vi.clearAllMocks()
   })
 
@@ -258,4 +272,108 @@ describe('useTemplateFiltering', () => {
       'beta-pro'
     ])
   })
+
+  it('incorporates search relevance into recommended sorting', async () => {
+    vi.useFakeTimers()
+
+    const templates = ref<TemplateInfo[]>([
+      {
+        name: 'wan-video-exact',
+        title: 'Wan Video Template',
+        description: 'A template with Wan in title',
+        mediaType: 'image',
+        mediaSubtype: 'png',
+        date: '2024-01-01',
+        usage: 10
+      },
+      {
+        name: 'qwen-image-partial',
+        title: 'Qwen Image Editor',
+        description: 'A template that contains w, a, n scattered',
+        mediaType: 'image',
+        mediaSubtype: 'png',
+        date: '2024-01-01',
+        usage: 1000 // Higher usage but worse search match
+      },
+      {
+        name: 'wan-text-exact',
+        title: 'Wan2.5: Text to Image',
+        description: 'Another exact match for Wan',
+        mediaType: 'image',
+        mediaSubtype: 'png',
+        date: '2024-01-01',
+        usage: 50
+      }
+    ])
+
+    const { searchQuery, sortBy, filteredTemplates } =
+      useTemplateFiltering(templates)
+
+    // Search for "Wan"
+    searchQuery.value = 'Wan'
+    sortBy.value = 'recommended'
+    await nextTick()
+    await vi.runOnlyPendingTimersAsync()
+    await nextTick()
+
+    // Templates with "Wan" in title should rank higher than Qwen despite lower usage
+    // because search relevance is now factored into the recommended sort
+    const results = filteredTemplates.value.map((t) => t.name)
+
+    // Verify exact matches appear (Qwen might be filtered out by threshold)
+    expect(results).toContain('wan-video-exact')
+    expect(results).toContain('wan-text-exact')
+
+    // If Qwen appears, it should be ranked lower than exact matches
+    if (results.includes('qwen-image-partial')) {
+      const wanIndex = results.indexOf('wan-video-exact')
+      const qwenIndex = results.indexOf('qwen-image-partial')
+      expect(wanIndex).toBeLessThan(qwenIndex)
+    }
+
+    vi.useRealTimers()
+  })
+
+  it('preserves Fuse search order when using default sort', async () => {
+    vi.useFakeTimers()
+
+    const templates = ref<TemplateInfo[]>([
+      {
+        name: 'portrait-basic',
+        title: 'Basic Portrait',
+        description: 'A basic template',
+        mediaType: 'image',
+        mediaSubtype: 'png'
+      },
+      {
+        name: 'portrait-pro',
+        title: 'Portrait Pro Edition',
+        description: 'Advanced portrait features',
+        mediaType: 'image',
+        mediaSubtype: 'png'
+      },
+      {
+        name: 'landscape-view',
+        title: 'Landscape Generator',
+        description: 'Generate landscapes',
+        mediaType: 'image',
+        mediaSubtype: 'png'
+      }
+    ])
+
+    const { searchQuery, sortBy, filteredTemplates } =
+      useTemplateFiltering(templates)
+
+    searchQuery.value = 'Portrait Pro'
+    sortBy.value = 'default'
+    await nextTick()
+    await vi.runOnlyPendingTimersAsync()
+    await nextTick()
+
+    const results = filteredTemplates.value.map((t) => t.name)
+
+    // With default sort, Fuse's relevance ordering is preserved
+    // "Portrait Pro Edition" should be first as it's the best match
+    expect(results[0]).toBe('portrait-pro')
+  })
 })

src/composables/useTemplateFiltering.ts

@@ -6,12 +6,14 @@ import type { Ref } from 'vue'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useTelemetry } from '@/platform/telemetry'
 import type { TemplateInfo } from '@/platform/workflow/templates/types/template'
+import { useTemplateRankingStore } from '@/stores/templateRankingStore'
 import { debounce } from 'es-toolkit/compat'
 
 export function useTemplateFiltering(
   templates: Ref<TemplateInfo[]> | TemplateInfo[]
 ) {
   const settingStore = useSettingStore()
+  const rankingStore = useTemplateRankingStore()
 
   const searchQuery = ref('')
   const selectedModels = ref<string[]>(
@@ -25,6 +27,8 @@ export function useTemplateFiltering(
   )
   const sortBy = ref<
     | 'default'
+    | 'recommended'
+    | 'popular'
     | 'alphabetical'
     | 'newest'
     | 'vram-low-to-high'
@@ -78,13 +82,31 @@ export function useTemplateFiltering(
 
   const debouncedSearchQuery = refDebounced(searchQuery, 50)
 
-  const filteredBySearch = computed(() => {
+  // Store Fuse search results with scores for use in sorting
+  const fuseSearchResults = computed(() => {
     if (!debouncedSearchQuery.value.trim()) {
+      return null
+    }
+    return fuse.value.search(debouncedSearchQuery.value)
+  })
+
+  // Map of template name to search score (lower is better in Fuse, 0 = perfect match)
+  const searchScoreMap = computed(() => {
+    const map = new Map<string, number>()
+    if (fuseSearchResults.value) {
+      fuseSearchResults.value.forEach((result) => {
+        // Store the score (0 = perfect match, 1 = worst match)
+        map.set(result.item.name, result.score ?? 1)
+      })
+    }
+    return map
+  })
+
+  const filteredBySearch = computed(() => {
+    if (!fuseSearchResults.value) {
       return templatesArray.value
     }
-
-    const results = fuse.value.search(debouncedSearchQuery.value)
-    return results.map((result) => result.item)
+    return fuseSearchResults.value.map((result) => result.item)
   })
 
   const filteredByModels = computed(() => {
@@ -151,10 +173,77 @@ export function useTemplateFiltering(
     return Number.POSITIVE_INFINITY
   }
 
+  watch(
+    filteredByRunsOn,
+    (templates) => {
+      rankingStore.largestUsageScore = Math.max(
+        ...templates.map((t) => t.usage || 0)
+      )
+    },
+    { immediate: true }
+  )
+
+  // Helper to get search relevance score (higher is better, 0-1 range)
+  // Fuse returns scores where 0 = perfect match, 1 = worst match
+  // We invert it so higher = better for combining with other scores
+  const getSearchRelevance = (template: TemplateInfo): number => {
+    const fuseScore = searchScoreMap.value.get(template.name)
+    if (fuseScore === undefined) return 0 // Not in search results or no search
+    return 1 - fuseScore // Invert: 0 (worst) -> 1 (best)
+  }
+
+  const hasActiveSearch = computed(
+    () => debouncedSearchQuery.value.trim() !== ''
+  )
+
   const sortedTemplates = computed(() => {
     const templates = [...filteredByRunsOn.value]
 
     switch (sortBy.value) {
+      case 'recommended':
+        // When searching, heavily weight search relevance
+        // Formula with search: searchRelevance × 0.6 + (usage × 0.5 + internal × 0.3 + freshness × 0.2) × 0.4
+        // Formula without search: usage × 0.5 + internal × 0.3 + freshness × 0.2
+        return templates.sort((a, b) => {
+          const baseScoreA = rankingStore.computeDefaultScore(
+            a.date,
+            a.searchRank,
+            a.usage
+          )
+          const baseScoreB = rankingStore.computeDefaultScore(
+            b.date,
+            b.searchRank,
+            b.usage
+          )
+
+          if (hasActiveSearch.value) {
+            const searchA = getSearchRelevance(a)
+            const searchB = getSearchRelevance(b)
+            const finalA = searchA * 0.6 + baseScoreA * 0.4
+            const finalB = searchB * 0.6 + baseScoreB * 0.4
+            return finalB - finalA
+          }
+
+          return baseScoreB - baseScoreA
+        })
+      case 'popular':
+        // When searching, include search relevance
+        // Formula with search: searchRelevance × 0.5 + (usage × 0.9 + freshness × 0.1) × 0.5
+        // Formula without search: usage × 0.9 + freshness × 0.1
+        return templates.sort((a, b) => {
+          const baseScoreA = rankingStore.computePopularScore(a.date, a.usage)
+          const baseScoreB = rankingStore.computePopularScore(b.date, b.usage)
+
+          if (hasActiveSearch.value) {
+            const searchA = getSearchRelevance(a)
+            const searchB = getSearchRelevance(b)
+            const finalA = searchA * 0.5 + baseScoreA * 0.5
+            const finalB = searchB * 0.5 + baseScoreB * 0.5
+            return finalB - finalA
+          }
+
+          return baseScoreB - baseScoreA
+        })
       case 'alphabetical':
         return templates.sort((a, b) => {
           const nameA = a.title || a.name || ''
@@ -173,6 +262,12 @@ export function useTemplateFiltering(
           const vramB = getVramMetric(b)
 
           if (vramA === vramB) {
+            // Use search relevance as tiebreaker when searching
+            if (hasActiveSearch.value) {
+              const searchA = getSearchRelevance(a)
+              const searchB = getSearchRelevance(b)
+              if (searchA !== searchB) return searchB - searchA
+            }
             const nameA = a.title || a.name || ''
             const nameB = b.title || b.name || ''
             return nameA.localeCompare(nameB)
@@ -184,17 +279,25 @@ export function useTemplateFiltering(
           return vramA - vramB
         })
       case 'model-size-low-to-high':
-        return templates.sort((a: any, b: any) => {
+        return templates.sort((a, b) => {
           const sizeA =
             typeof a.size === 'number' ? a.size : Number.POSITIVE_INFINITY
           const sizeB =
             typeof b.size === 'number' ? b.size : Number.POSITIVE_INFINITY
-          if (sizeA === sizeB) return 0
+          if (sizeA === sizeB) {
+            // Use search relevance as tiebreaker when searching
+            if (hasActiveSearch.value) {
+              const searchA = getSearchRelevance(a)
+              const searchB = getSearchRelevance(b)
+              if (searchA !== searchB) return searchB - searchA
+            }
+            return 0
+          }
           return sizeA - sizeB
         })
       case 'default':
       default:
-        // Keep original order (default order)
+        // 'default' preserves Fuse's search order (already sorted by relevance)
         return templates
     }
   })
@@ -206,7 +309,7 @@ export function useTemplateFiltering(
     selectedModels.value = []
     selectedUseCases.value = []
     selectedRunsOn.value = []
-    sortBy.value = 'newest'
+    sortBy.value = 'default'
   }
 
   const removeModelFilter = (model: string) => {

src/core/graph/subgraph/proxyWidget.test.ts

@@ -8,7 +8,7 @@ import type { LGraphCanvas, SubgraphNode } from '@/lib/litegraph/src/litegraph'
 import {
   createTestSubgraph,
   createTestSubgraphNode
-} from '../litegraph/subgraph/fixtures/subgraphHelpers'
+} from '@/lib/litegraph/src/subgraph/__fixtures__/subgraphHelpers'
 
 const canvasEl: Partial<HTMLCanvasElement> = { addEventListener() {} }
 const canvas: Partial<LGraphCanvas> = { canvas: canvasEl as HTMLCanvasElement }

src/core/graph/widgets/dynamicWidgets.ts

@@ -94,7 +94,7 @@ function dynamicComboWidget(
     const newSpec = value ? options[value] : undefined
 
     const removedInputs = remove(node.inputs, isInGroup)
-    remove(node.widgets, isInGroup)
+    for (const widget of remove(node.widgets, isInGroup)) widget.onRemove?.()
 
     if (!newSpec) return
 
@@ -341,10 +341,16 @@ function applyMatchType(node: LGraphNode, inputSpec: InputSpecV2) {
   //TODO: instead apply on output add?
   //ensure outputs get updated
   const index = node.inputs.length - 1
-  const input = node.inputs.at(-1)!
-  requestAnimationFrame(() =>
-    node.onConnectionsChange(LiteGraph.INPUT, index, false, undefined, input)
-  )
+  requestAnimationFrame(() => {
+    const input = node.inputs.at(index)!
+    node.onConnectionsChange?.(
+      LiteGraph.INPUT,
+      index,
+      !!input.link,
+      input.link ? node.graph?.links?.[input.link] : undefined,
+      input
+    )
+  })
 }
 
 function autogrowOrdinalToName(
@@ -482,7 +488,8 @@ function autogrowInputDisconnected(index: number, node: AutogrowNode) {
   for (const input of toRemove) {
     const widgetName = input?.widget?.name
     if (!widgetName) continue
-    remove(node.widgets, (w) => w.name === widgetName)
+    for (const widget of remove(node.widgets, (w) => w.name === widgetName))
+      widget.onRemove?.()
   }
   node.size[1] = node.computeSize([...node.size])[1]
 }

src/extensions/core/groupNode.ts

@@ -196,8 +196,7 @@ export class GroupNodeConfig {
   primitiveToWidget: {}
   nodeInputs: {}
   outputVisibility: any[]
-  // @ts-expect-error fixme ts strict error
-  nodeDef: ComfyNodeDef
+  nodeDef: (ComfyNodeDef & { [GROUP]: GroupNodeConfig }) | undefined
   // @ts-expect-error fixme ts strict error
   inputs: any[]
   // @ts-expect-error fixme ts strict error
@@ -231,8 +230,7 @@ export class GroupNodeConfig {
       output: [],
       output_name: [],
       output_is_list: [],
-      // @ts-expect-error Unused, doesn't exist
-      output_is_hidden: [],
+      output_node: false, // This is a lie (to satisfy the interface)
       name: source + SEPARATOR + this.name,
       display_name: this.name,
       category: 'group nodes' + (SEPARATOR + source),
@@ -261,6 +259,7 @@ export class GroupNodeConfig {
     }
     // @ts-expect-error fixme ts strict error
     this.#convertedToProcess = null
+    if (!this.nodeDef) return
     await app.registerNodeDef(`${PREFIX}${SEPARATOR}` + this.name, this.nodeDef)
     useNodeDefStore().addNodeDef(this.nodeDef)
   }