Merge branch 'main' into feature/multi-download

## Summary

Migrates all unit tests from `tests-ui/` to colocate with their source
files in `src/`, improving discoverability and maintainability.

## Changes

- **What**: Relocated all unit tests to be adjacent to the code they
test, following the `<source>.test.ts` naming convention
- **Config**: Updated `vitest.config.ts` to remove `tests-ui` include
pattern and `@tests-ui` alias
- **Docs**: Moved testing documentation to `docs/testing/` with updated
paths and patterns

## Review Focus

- Migration patterns documented in
`temp/plans/migrate-tests-ui-to-src.md`
- Tests use `@/` path aliases instead of relative imports
- Shared fixtures placed in `__fixtures__/` directories

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7811-chore-migrate-tests-from-tests-ui-to-colocate-with-source-files-2da6d73d36508147a4cce85365dee614)
by [Unito](https://www.unito.io)

---------

Co-authored-by: Amp <amp@ampcode.com>
Co-authored-by: GitHub Action <action@github.com>

.storybook/main.ts

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

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/helpers/actionbar.ts

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

browser_tests/tests/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)
   })

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.

knip.config.ts

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

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comfyorg/comfyui-frontend",
   "private": true,
-  "version": "1.37.1",
+  "version": "1.37.3",
   "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",
@@ -162,6 +163,7 @@
     "algoliasearch": "catalog:",
     "axios": "catalog:",
     "chart.js": "^4.5.0",
+    "client-zip": "catalog:",
     "cva": "catalog:",
     "dompurify": "^3.2.5",
     "dotenv": "catalog:",
@@ -186,6 +188,7 @@
     "vue-i18n": "catalog:",
     "vue-router": "catalog:",
     "vuefire": "catalog:",
+    "wwobjloader2": "catalog:",
     "yjs": "catalog:",
     "zod": "catalog:",
     "zod-validation-error": "catalog:"

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-lock.yaml

@@ -10,8 +10,8 @@ catalogs:
       specifier: ^5.2.0
       version: 5.2.0
     '@comfyorg/comfyui-electron-types':
-      specifier: 0.5.5
-      version: 0.5.5
+      specifier: 0.6.2
+      version: 0.6.2
     '@eslint/js':
       specifier: ^9.39.1
       version: 9.39.1
@@ -138,6 +138,9 @@ catalogs:
     axios:
       specifier: ^1.8.2
       version: 1.13.2
+    client-zip:
+      specifier: ^2.5.0
+      version: 2.5.0
     cross-env:
       specifier: ^10.1.0
       version: 10.1.0
@@ -309,6 +312,9 @@ catalogs:
     vuefire:
       specifier: ^3.2.1
       version: 3.2.1
+    wwobjloader2:
+      specifier: ^6.2.1
+      version: 6.2.1
     yjs:
       specifier: ^13.6.27
       version: 13.6.27
@@ -337,7 +343,7 @@ importers:
         version: 1.3.1
       '@comfyorg/comfyui-electron-types':
         specifier: 'catalog:'
-        version: 0.5.5
+        version: 0.6.2
       '@comfyorg/design-system':
         specifier: workspace:*
         version: link:packages/design-system
@@ -497,6 +503,9 @@ importers:
       vuefire:
         specifier: 'catalog:'
         version: 3.2.1(consola@3.4.2)(firebase@11.6.0)(vue@3.5.13(typescript@5.9.3))
+      wwobjloader2:
+        specifier: 'catalog:'
+        version: 6.2.1(three@0.170.0)
       yjs:
         specifier: 'catalog:'
         version: 13.6.27
@@ -737,7 +746,7 @@ importers:
     dependencies:
       '@comfyorg/comfyui-electron-types':
         specifier: 'catalog:'
-        version: 0.5.5
+        version: 0.6.2
       '@comfyorg/shared-frontend-utils':
         specifier: workspace:*
         version: link:../../packages/shared-frontend-utils
@@ -1477,8 +1486,8 @@ packages:
   '@cacheable/utils@2.3.2':
     resolution: {integrity: sha512-8kGE2P+HjfY8FglaOiW+y8qxcaQAfAhVML+i66XJR3YX5FtyDqn6Txctr3K2FrbxLKixRRYYBWMbuGciOhYNDg==}
 
-  '@comfyorg/comfyui-electron-types@0.5.5':
-    resolution: {integrity: sha512-f3XOXpMsALIwHakz7FekVPm4/Fh2pvJPEi8tRe8jYGBt8edsd4Mkkq31Yjs2Weem3BP7yNwbdNuSiQdP/pxJyg==}
+  '@comfyorg/comfyui-electron-types@0.6.2':
+    resolution: {integrity: sha512-r3By5Wbizq8jagUrhtcym79HYUTinsvoBnYkFFWbUmrURBWIaC0HduFVkRkI1PNdI76piW+JSOJJnw00YCVXeg==}
 
   '@csstools/color-helpers@5.1.0':
     resolution: {integrity: sha512-S11EXWJyy0Mz5SYvRmY8nJYTFFd1LCNV+7cXyAgQtOOuzb4EsgfqDufL+9esx72/eLhsRdGZwaldu/h+E4t4BA==}
@@ -4523,6 +4532,8 @@ packages:
     resolution: {integrity: sha512-nPdaFdQ0h/GEigbPClz11D0v/ZJEwxmeVZGeMo3Z5StPtUTkA9o1lD6QwoirYiSDzbcwn2XcjwmCp68W1IS4TA==}
     engines: {node: '>=18'}
 
+  client-zip@2.5.0:
+    resolution: {integrity: sha512-ydG4nDZesbFurnNq0VVCp/yyomIBh+X/1fZPI/P24zbnG4dtC4tQAfI5uQsomigsUMeiRO2wiTPizLWQh+IAyQ==}
   cli-truncate@5.1.1:
     resolution: {integrity: sha512-SroPvNHxUnk+vIW/dOSfNqdy1sPEFkrTk6TUtqLCnBlo3N7TNYYkzzN7uSD6+jVjrdO4+p8nH7JzH6cIvUem6A==}
     engines: {node: '>=20'}
@@ -8225,6 +8236,19 @@ packages:
     resolution: {integrity: sha512-h3Fbisa2nKGPxCpm89Hk33lBLsnaGBvctQopaBSOW/uIs6FTe1ATyAnKFJrzVs9vpGdsTe73WF3V4lIsk4Gacw==}
     engines: {node: '>=18'}
 
+  wtd-core@3.0.0:
+    resolution: {integrity: sha512-LSPfAQ5ULSV5vPhipcjdQvV5xOx25QesYK23jwUOF99xOx6fuulk7CMQerERRwA4uoQooNmRd8AT6IPBwORlWQ==}
+
+  wtd-three-ext@3.0.0:
+    resolution: {integrity: sha512-PLZJipCAiinot8D1uB4A7+XHxPAYeZXDhczbbazK7pKdqpE77zMizQH4rSZsaNbzktgnIfpgK/ODqhJTdrUjUw==}
+    peerDependencies:
+      three: '>= 0.137.5 < 1'
+
+  wwobjloader2@6.2.1:
+    resolution: {integrity: sha512-/v/sfUX0PMQAI8souzCs6xsO9LR3RyL+ujnOiS/1pngUlakKyHYC5XMQvu77pTeWzY3rzNyt5Q/bg5O3RukA+g==}
+    peerDependencies:
+      three: '>= 0.137.5 < 1'
+
   xdg-basedir@5.1.0:
     resolution: {integrity: sha512-GCPAHLvrIH13+c0SuacwvRYj2SxJXQ4kaVTT5xgL3kPrz56XxkF21IGhjSE1+W0aw7gpBWRGXLCPnPby6lSpmQ==}
     engines: {node: '>=12'}
@@ -9179,7 +9203,7 @@ snapshots:
       hashery: 1.3.0
       keyv: 5.5.5
 
-  '@comfyorg/comfyui-electron-types@0.5.5': {}
+  '@comfyorg/comfyui-electron-types@0.6.2': {}
 
   '@csstools/color-helpers@5.1.0': {}
 
@@ -17125,6 +17149,19 @@ snapshots:
     dependencies:
       is-wsl: 3.1.0
 
+  wtd-core@3.0.0: {}
+
+  wtd-three-ext@3.0.0(three@0.170.0):
+    dependencies:
+      three: 0.170.0
+      wtd-core: 3.0.0
+
+  wwobjloader2@6.2.1(three@0.170.0):
+    dependencies:
+      three: 0.170.0
+      wtd-core: 3.0.0
+      wtd-three-ext: 3.0.0(three@0.170.0)
+
   xdg-basedir@5.1.0: {}
 
   xml-name-validator@4.0.0: {}

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
@@ -47,6 +47,7 @@ catalog:
   '@webgpu/types': ^0.1.66
   algoliasearch: ^5.21.0
   axios: ^1.8.2
+  client-zip: ^2.5.0
   cross-env: ^10.1.0
   cva: 1.0.0-beta.4
   dotenv: ^16.4.5
@@ -104,6 +105,7 @@ catalog:
   vue-router: ^4.4.3
   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

@@ -83,7 +83,7 @@ import { useI18n } from 'vue-i18n'
 
 import ComfyActionbar from '@/components/actionbar/ComfyActionbar.vue'
 import SubgraphBreadcrumb from '@/components/breadcrumb/SubgraphBreadcrumb.vue'
-import QueueProgressOverlay from '@/queue/components/QueueProgressOverlay.vue'
+import QueueProgressOverlay from '@/components/queue/QueueProgressOverlay.vue'
 import ActionBarButtons from '@/components/topbar/ActionBarButtons.vue'
 import CurrentUserButton from '@/components/topbar/CurrentUserButton.vue'
 import LoginButton from '@/components/topbar/LoginButton.vue'
@@ -92,7 +92,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 '@/queue/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/actionbar/BatchCountEdit.vue

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

src/components/actionbar/ComfyRunButton/ComfyQueueButton.vue

@@ -48,7 +48,7 @@ import { useTelemetry } from '@/platform/telemetry'
 import { app } from '@/scripts/app'
 import { useCommandStore } from '@/stores/commandStore'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
-import { useQueueSettingsStore } from '@/queue/stores/queueStore'
+import { useQueueSettingsStore } from '@/stores/queueStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import { graphHasMissingNodes } from '@/workbench/extensions/manager/utils/graphHasMissingNodes'
 

src/components/load3d/Load3D.vue

@@ -33,6 +33,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
@@ -119,6 +122,8 @@ const {
   playing,
   selectedSpeed,
   selectedAnimation,
+  animationProgress,
+  animationDuration,
   loading,
   loadingMessage,
 
@@ -130,6 +135,7 @@ const {
   handleStopRecording,
   handleExportRecording,
   handleClearRecording,
+  handleSeek,
   handleBackgroundImageUpdate,
   handleExportModel,
   handleModelDrop,

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/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/CompletionSummaryBanner.vue

@@ -89,7 +89,7 @@ import Button from '@/components/ui/button/Button.vue'
 import type {
   CompletionSummary,
   CompletionSummaryMode
-} from '@/queue/composables/useCompletionSummary'
+} from '@/composables/queue/useCompletionSummary'
 
 type Props = {
   mode: CompletionSummaryMode

src/components/queue/QueueOverlayEmpty.test.ts

@@ -3,7 +3,7 @@ import { describe, expect, it } from 'vitest'
 import { createI18n } from 'vue-i18n'
 
 import QueueOverlayEmpty from './QueueOverlayEmpty.vue'
-import type { CompletionSummary } from '@/queue/composables/useCompletionSummary'
+import type { CompletionSummary } from '@/composables/queue/useCompletionSummary'
 
 const i18n = createI18n({
   legacy: false,

src/components/queue/QueueOverlayEmpty.vue

@@ -14,8 +14,8 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
 
-import CompletionSummaryBanner from '@/queue/components/CompletionSummaryBanner.vue'
-import type { CompletionSummary } from '@/queue/composables/useCompletionSummary'
+import CompletionSummaryBanner from '@/components/queue/CompletionSummaryBanner.vue'
+import type { CompletionSummary } from '@/composables/queue/useCompletionSummary'
 
 defineProps<{ summary: CompletionSummary }>()
 

src/components/queue/QueueOverlayExpanded.vue

@@ -79,9 +79,9 @@ import type {
   JobListItem,
   JobSortMode,
   JobTab
-} from '@/queue/composables/useJobList'
-import type { MenuEntry } from '@/queue/composables/useJobMenu'
-import { useJobMenu } from '@/queue/composables/useJobMenu'
+} from '@/composables/queue/useJobList'
+import type { MenuEntry } from '@/composables/queue/useJobMenu'
+import { useJobMenu } from '@/composables/queue/useJobMenu'
 
 import QueueOverlayHeader from './QueueOverlayHeader.vue'
 import JobContextMenu from './job/JobContextMenu.vue'

src/components/queue/QueueProgressOverlay.vue

@@ -63,16 +63,16 @@
 import { computed, nextTick, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import QueueOverlayActive from '@/queue/components/QueueOverlayActive.vue'
-import QueueOverlayEmpty from '@/queue/components/QueueOverlayEmpty.vue'
-import QueueOverlayExpanded from '@/queue/components/QueueOverlayExpanded.vue'
-import QueueClearHistoryDialog from '@/queue/components/dialogs/QueueClearHistoryDialog.vue'
+import QueueOverlayActive from '@/components/queue/QueueOverlayActive.vue'
+import QueueOverlayEmpty from '@/components/queue/QueueOverlayEmpty.vue'
+import QueueOverlayExpanded from '@/components/queue/QueueOverlayExpanded.vue'
+import QueueClearHistoryDialog from '@/components/queue/dialogs/QueueClearHistoryDialog.vue'
 import ResultGallery from '@/components/sidebar/tabs/queue/ResultGallery.vue'
-import { useCompletionSummary } from '@/queue/composables/useCompletionSummary'
-import { useJobList } from '@/queue/composables/useJobList'
-import type { JobListItem } from '@/queue/composables/useJobList'
-import { useQueueProgress } from '@/queue/composables/useQueueProgress'
-import { useResultGallery } from '@/queue/composables/useResultGallery'
+import { useCompletionSummary } from '@/composables/queue/useCompletionSummary'
+import { useJobList } from '@/composables/queue/useJobList'
+import type { JobListItem } from '@/composables/queue/useJobList'
+import { useQueueProgress } from '@/composables/queue/useQueueProgress'
+import { useResultGallery } from '@/composables/queue/useResultGallery'
 import { useErrorHandling } from '@/composables/useErrorHandling'
 import { useAssetSelectionStore } from '@/platform/assets/composables/useAssetSelectionStore'
 import { isCloud } from '@/platform/distribution/types'
@@ -81,7 +81,7 @@ import { useAssetsStore } from '@/stores/assetsStore'
 import { useCommandStore } from '@/stores/commandStore'
 import { useDialogStore } from '@/stores/dialogStore'
 import { useExecutionStore } from '@/stores/executionStore'
-import { useQueueStore } from '@/queue/stores/queueStore'
+import { useQueueStore } from '@/stores/queueStore'
 import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
 
 type OverlayState = 'hidden' | 'empty' | 'active' | 'expanded'

src/components/queue/dialogs/QueueClearHistoryDialog.vue

@@ -53,7 +53,7 @@ import { useI18n } from 'vue-i18n'
 import Button from '@/components/ui/button/Button.vue'
 import { useErrorHandling } from '@/composables/useErrorHandling'
 import { useDialogStore } from '@/stores/dialogStore'
-import { useQueueStore } from '@/queue/stores/queueStore'
+import { useQueueStore } from '@/stores/queueStore'
 
 const dialogStore = useDialogStore()
 const queueStore = useQueueStore()

src/components/queue/job/JobContextMenu.vue

@@ -47,7 +47,7 @@ import Popover from 'primevue/popover'
 import { ref } from 'vue'
 
 import Button from '@/components/ui/button/Button.vue'
-import type { MenuEntry } from '@/queue/composables/useJobMenu'
+import type { MenuEntry } from '@/composables/queue/useJobMenu'
 
 defineProps<{ entries: MenuEntry[] }>()
 

src/components/queue/job/JobDetailsPopover.stories.ts

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
 import type { TaskStatus } from '@/schemas/apiSchema'
 import { useExecutionStore } from '@/stores/executionStore'
-import { TaskItemImpl, useQueueStore } from '@/queue/stores/queueStore'
+import { TaskItemImpl, useQueueStore } from '@/stores/queueStore'
 
 import JobDetailsPopover from './JobDetailsPopover.vue'
 

src/components/queue/job/JobDetailsPopover.vue

@@ -101,10 +101,10 @@ import { isCloud } from '@/platform/distribution/types'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import { useDialogService } from '@/services/dialogService'
 import { useExecutionStore } from '@/stores/executionStore'
-import { useQueueStore } from '@/queue/stores/queueStore'
-import type { TaskItemImpl } from '@/queue/stores/queueStore'
+import { useQueueStore } from '@/stores/queueStore'
+import type { TaskItemImpl } from '@/stores/queueStore'
 import { formatClockTime } from '@/utils/dateTimeUtil'
-import { jobStateFromTask } from '@/queue/utils/queueUtil'
+import { jobStateFromTask } from '@/utils/queueUtil'
 
 import { useJobErrorReporting } from './useJobErrorReporting'
 import { formatElapsedTime, useQueueEstimates } from './useQueueEstimates'

src/components/queue/job/JobFiltersBar.vue

@@ -137,8 +137,8 @@ import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import Button from '@/components/ui/button/Button.vue'
-import { jobSortModes, jobTabs } from '@/queue/composables/useJobList'
-import type { JobSortMode, JobTab } from '@/queue/composables/useJobList'
+import { jobSortModes, jobTabs } from '@/composables/queue/useJobList'
+import type { JobSortMode, JobTab } from '@/composables/queue/useJobList'
 import { buildTooltipConfig } from '@/composables/useTooltipConfig'
 import { isCloud } from '@/platform/distribution/types'
 

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

@@ -2,8 +2,8 @@ import { mount } from '@vue/test-utils'
 import { afterEach, describe, expect, it, vi } from 'vitest'
 import { defineComponent, nextTick } from 'vue'
 
-import JobGroupsList from '@/queue/components/job/JobGroupsList.vue'
-import type { JobGroup, JobListItem } from '@/queue/composables/useJobList'
+import JobGroupsList from '@/components/queue/job/JobGroupsList.vue'
+import type { JobGroup, JobListItem } from '@/composables/queue/useJobList'
 
 const QueueJobItemStub = defineComponent({
   name: 'QueueJobItemStub',

src/components/queue/job/JobGroupsList.vue

@@ -38,8 +38,8 @@
 <script setup lang="ts">
 import { onBeforeUnmount, ref, watch } from 'vue'
 
-import QueueJobItem from '@/queue/components/job/QueueJobItem.vue'
-import type { JobGroup, JobListItem } from '@/queue/composables/useJobList'
+import QueueJobItem from '@/components/queue/job/QueueJobItem.vue'
+import type { JobGroup, JobListItem } from '@/composables/queue/useJobList'
 
 const props = defineProps<{ displayedJobGroups: JobGroup[] }>()
 

src/components/queue/job/QueueJobItem.vue

@@ -198,12 +198,12 @@
 import { computed, nextTick, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import JobDetailsPopover from '@/queue/components/job/JobDetailsPopover.vue'
-import QueueAssetPreview from '@/queue/components/job/QueueAssetPreview.vue'
+import JobDetailsPopover from '@/components/queue/job/JobDetailsPopover.vue'
+import QueueAssetPreview from '@/components/queue/job/QueueAssetPreview.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { buildTooltipConfig } from '@/composables/useTooltipConfig'
-import type { JobState } from '@/queue/types/queue'
-import { iconForJobState } from '@/queue/utils/queueDisplay'
+import type { JobState } from '@/types/queue'
+import { iconForJobState } from '@/utils/queueDisplay'
 import { cn } from '@/utils/tailwindUtil'
 
 const props = withDefaults(

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

@@ -3,12 +3,12 @@ import { computed, ref } from 'vue'
 import type { ComputedRef } from 'vue'
 
 import type { ExecutionErrorWsMessage } from '@/schemas/apiSchema'
-import type { TaskItemImpl } from '@/queue/stores/queueStore'
+import type { TaskItemImpl } from '@/stores/queueStore'
 import type {
   JobErrorDialogService,
   UseJobErrorReportingOptions
-} from '@/queue/components/job/useJobErrorReporting'
-import * as jobErrorReporting from '@/queue/components/job/useJobErrorReporting'
+} from '@/components/queue/job/useJobErrorReporting'
+import * as jobErrorReporting from '@/components/queue/job/useJobErrorReporting'
 
 const createExecutionErrorMessage = (
   overrides: Partial<ExecutionErrorWsMessage> = {}

src/components/queue/job/useJobErrorReporting.ts

@@ -2,7 +2,7 @@ import { computed } from 'vue'
 import type { ComputedRef } from 'vue'
 
 import type { ExecutionErrorWsMessage } from '@/schemas/apiSchema'
-import type { TaskItemImpl } from '@/queue/stores/queueStore'
+import type { TaskItemImpl } from '@/stores/queueStore'
 
 type CopyHandler = (value: string) => void | Promise<void>
 

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

@@ -1,8 +1,8 @@
 import { computed, ref } from 'vue'
 import { describe, expect, it } from 'vitest'
 
-import type { TaskItemImpl } from '@/queue/stores/queueStore'
-import type { JobState } from '@/queue/types/queue'
+import type { TaskItemImpl } from '@/stores/queueStore'
+import type { JobState } from '@/types/queue'
 
 import { formatElapsedTime, useQueueEstimates } from './useQueueEstimates'
 import type { UseQueueEstimatesOptions } from './useQueueEstimates'

src/components/queue/job/useQueueEstimates.ts

@@ -2,8 +2,8 @@ import { computed } from 'vue'
 import type { ComputedRef, Ref } from 'vue'
 
 import type { useExecutionStore } from '@/stores/executionStore'
-import type { TaskItemImpl, useQueueStore } from '@/queue/stores/queueStore'
-import type { JobState } from '@/queue/types/queue'
+import type { TaskItemImpl, useQueueStore } from '@/stores/queueStore'
+import type { JobState } from '@/types/queue'
 
 type QueueStore = ReturnType<typeof useQueueStore>
 type ExecutionStore = ReturnType<typeof useExecutionStore>

src/components/sidebar/tabs/AssetsSidebarListView.stories.ts

@@ -1,155 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3-vite'
-
-import type { JobAction } from '@/queue/composables/useJobActions'
-import type { JobListItem } from '@/queue/composables/useJobList'
-import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
-import { setMockJobActions } from '@/storybook/mocks/useJobActions'
-import { setMockJobItems } from '@/storybook/mocks/useJobList'
-import { iconForJobState } from '@/queue/utils/queueDisplay'
-
-import AssetsSidebarListView from './AssetsSidebarListView.vue'
-
-type StoryArgs = {
-  assets: AssetItem[]
-  jobs: JobListItem[]
-  selectedAssetIds?: string[]
-  actionsByJobId?: Record<string, JobAction[]>
-}
-
-function baseDecorator() {
-  return {
-    template: `
-        <div class="bg-base-background p-6">
-          <story />
-        </div>
-      `
-  }
-}
-
-const meta: Meta<StoryArgs> = {
-  title: 'Components/Sidebar/AssetsSidebarListView',
-  component: AssetsSidebarListView,
-  parameters: {
-    layout: 'centered'
-  },
-  decorators: [baseDecorator]
-}
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-const baseTimestamp = '2024-01-15T10:00:00Z'
-
-const sampleJobs: JobListItem[] = [
-  {
-    id: 'job-pending-1',
-    title: 'In queue',
-    meta: '8:59:30pm',
-    state: 'pending',
-    iconName: iconForJobState('pending'),
-    showClear: true
-  },
-  {
-    id: 'job-init-1',
-    title: 'Initializing...',
-    meta: '8:59:35pm',
-    state: 'initialization',
-    iconName: iconForJobState('initialization'),
-    showClear: true
-  },
-  {
-    id: 'job-running-1',
-    title: 'Total: 30%',
-    meta: 'KSampler: 70%',
-    state: 'running',
-    iconName: iconForJobState('running'),
-    showClear: true,
-    progressTotalPercent: 30,
-    progressCurrentPercent: 70
-  }
-]
-
-const sampleAssets: AssetItem[] = [
-  {
-    id: 'asset-image-1',
-    name: 'image-032.png',
-    created_at: baseTimestamp,
-    preview_url: '/assets/images/comfy-logo-single.svg',
-    size: 1887437,
-    tags: [],
-    user_metadata: {
-      promptId: 'job-running-1',
-      nodeId: 12,
-      executionTimeInSeconds: 1.84
-    }
-  },
-  {
-    id: 'asset-video-1',
-    name: 'clip-01.mp4',
-    created_at: baseTimestamp,
-    preview_url: '/assets/images/default-template.png',
-    size: 8394820,
-    tags: [],
-    user_metadata: {
-      duration: 132000
-    }
-  },
-  {
-    id: 'asset-audio-1',
-    name: 'soundtrack-01.mp3',
-    created_at: baseTimestamp,
-    size: 5242880,
-    tags: [],
-    user_metadata: {
-      duration: 200000
-    }
-  },
-  {
-    id: 'asset-3d-1',
-    name: 'scene-01.glb',
-    created_at: baseTimestamp,
-    size: 134217728,
-    tags: []
-  }
-]
-
-const cancelAction: JobAction = {
-  key: 'cancel',
-  icon: 'icon-[lucide--x]',
-  label: 'Cancel',
-  variant: 'destructive'
-}
-
-export const RunningAndGenerated: Story = {
-  args: {
-    assets: sampleAssets,
-    jobs: sampleJobs,
-    actionsByJobId: {
-      'job-pending-1': [cancelAction],
-      'job-init-1': [cancelAction],
-      'job-running-1': [cancelAction]
-    }
-  },
-  render: renderAssetsSidebarListView
-}
-
-function renderAssetsSidebarListView(args: StoryArgs) {
-  return {
-    components: { AssetsSidebarListView },
-    setup() {
-      setMockJobItems(args.jobs)
-      setMockJobActions(args.actionsByJobId ?? {})
-      const selectedIds = new Set(args.selectedAssetIds ?? [])
-      function isSelected(assetId: string) {
-        return selectedIds.has(assetId)
-      }
-
-      return { args, isSelected }
-    },
-    template: `
-      <div class="h-[520px] w-[320px] overflow-hidden rounded-lg border border-panel-border">
-        <AssetsSidebarListView :assets="args.assets" :is-selected="isSelected" />
-      </div>
-    `
-  }
-}

src/components/sidebar/tabs/AssetsSidebarListView.vue

@@ -1,241 +0,0 @@
-<template>
-  <div class="flex h-full flex-col">
-    <div v-if="activeJobItems.length" class="flex flex-col gap-2 px-2">
-      <AssetsListCard
-        v-for="job in activeJobItems"
-        :key="job.id"
-        :class="getJobCardClass()"
-        :preview-url="job.iconImageUrl"
-        :preview-alt="job.title"
-        :icon-name="job.iconName"
-        :icon-class="getJobIconClass(job)"
-        :primary-text="job.title"
-        :secondary-text="job.meta"
-        :progress-total-percent="job.progressTotalPercent"
-        :progress-current-percent="job.progressCurrentPercent"
-        @mouseenter="onJobEnter(job.id)"
-        @mouseleave="onJobLeave(job.id)"
-        @click.stop
-      >
-        <template
-          v-if="hoveredJobId === job.id && getJobActions(job).length"
-          #actions
-        >
-          <Button
-            v-for="action in getJobActions(job)"
-            :key="action.key"
-            :variant="action.variant"
-            size="icon"
-            :aria-label="action.label"
-            @click.stop="handleJobAction(action, job)"
-          >
-            <i :class="action.icon" class="size-4" />
-          </Button>
-        </template>
-      </AssetsListCard>
-    </div>
-
-    <div
-      v-if="assets.length"
-      :class="cn('px-2', activeJobItems.length && 'mt-2')"
-    >
-      <div
-        class="flex items-center py-2 text-sm font-normal leading-normal text-muted-foreground font-inter"
-      >
-        {{ t('sideToolbar.generatedAssetsHeader') }}
-      </div>
-    </div>
-
-    <VirtualGrid
-      class="flex-1"
-      :items="assetItems"
-      :grid-style="listGridStyle"
-      @approach-end="emit('approach-end')"
-    >
-      <template #item="{ item }">
-        <AssetsListCard
-          role="button"
-          tabindex="0"
-          :aria-label="
-            t('assetBrowser.ariaLabel.assetCard', {
-              name: item.asset.name,
-              type: getMediaTypeFromFilename(item.asset.name)
-            })
-          "
-          :class="getAssetCardClass(isSelected(item.asset.id))"
-          :preview-url="item.asset.preview_url"
-          :preview-alt="item.asset.name"
-          :icon-name="getAssetIconName(item.asset)"
-          :primary-text="getAssetPrimaryText(item.asset)"
-          :secondary-text="getAssetSecondaryText(item.asset)"
-          @mouseenter="onAssetEnter(item.asset.id)"
-          @mouseleave="onAssetLeave(item.asset.id)"
-          @contextmenu.prevent="handleAssetMenuClick($event, item.asset)"
-          @click.stop="emit('select-asset', item.asset)"
-        >
-          <template v-if="hoveredAssetId === item.asset.id" #actions>
-            <Button
-              variant="secondary"
-              size="icon"
-              :aria-label="t('g.moreOptions')"
-              @click.stop="handleAssetMenuClick($event, item.asset)"
-            >
-              <i class="icon-[lucide--ellipsis] size-4" />
-            </Button>
-          </template>
-        </AssetsListCard>
-      </template>
-    </VirtualGrid>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import VirtualGrid from '@/components/common/VirtualGrid.vue'
-import Button from '@/components/ui/button/Button.vue'
-import type { JobAction } from '@/queue/composables/useJobActions'
-import { useJobActions } from '@/queue/composables/useJobActions'
-import type { JobListItem } from '@/queue/composables/useJobList'
-import { useJobList } from '@/queue/composables/useJobList'
-import AssetsListCard from '@/platform/assets/components/AssetsListCard.vue'
-import { getOutputAssetMetadata } from '@/platform/assets/schemas/assetMetadataSchema'
-import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
-import type { JobState } from '@/queue/types/queue'
-import {
-  formatDuration,
-  formatSize,
-  getMediaTypeFromFilename,
-  truncateFilename
-} from '@/utils/formatUtil'
-import { iconForJobState } from '@/queue/utils/queueDisplay'
-import { cn } from '@/utils/tailwindUtil'
-
-const { assets, isSelected } = defineProps<{
-  assets: AssetItem[]
-  isSelected: (assetId: string) => boolean
-}>()
-
-const emit = defineEmits<{
-  (e: 'select-asset', asset: AssetItem): void
-  (e: 'context-menu', event: MouseEvent, asset: AssetItem): void
-  (e: 'approach-end'): void
-}>()
-
-const { t } = useI18n()
-const { jobItems } = useJobList()
-const { getJobActions, runJobAction } = useJobActions()
-const hoveredJobId = ref<string | null>(null)
-const hoveredAssetId = ref<string | null>(null)
-
-type AssetListItem = { key: string; asset: AssetItem }
-
-const activeJobItems = computed(() =>
-  jobItems.value.filter((item) => isActiveJobState(item.state))
-)
-
-const assetItems = computed<AssetListItem[]>(() =>
-  assets.map((asset) => ({
-    key: `asset-${asset.id}`,
-    asset
-  }))
-)
-
-const listGridStyle = {
-  display: 'grid',
-  gridTemplateColumns: 'minmax(0, 1fr)',
-  padding: '0 0.5rem',
-  gap: '0.5rem'
-}
-
-const listCardBaseClass =
-  'w-full text-text-primary transition-colors hover:bg-secondary-background-hover'
-
-function isActiveJobState(state: JobState): boolean {
-  return (
-    state === 'pending' || state === 'initialization' || state === 'running'
-  )
-}
-
-function getAssetPrimaryText(asset: AssetItem): string {
-  return truncateFilename(asset.name)
-}
-
-function getAssetSecondaryText(asset: AssetItem): string {
-  const metadata = getOutputAssetMetadata(asset.user_metadata)
-  if (typeof metadata?.executionTimeInSeconds === 'number') {
-    return `${metadata.executionTimeInSeconds.toFixed(2)}s`
-  }
-
-  const duration = asset.user_metadata?.duration
-  if (typeof duration === 'number') {
-    return formatDuration(duration)
-  }
-
-  if (typeof asset.size === 'number') {
-    return formatSize(asset.size)
-  }
-
-  return ''
-}
-
-function getAssetIconName(asset: AssetItem): string {
-  const mediaType = getMediaTypeFromFilename(asset.name)
-  if (mediaType === 'video') return 'icon-[lucide--video]'
-  if (mediaType === 'audio') return 'icon-[lucide--music]'
-  if (mediaType === '3D') return 'icon-[lucide--box]'
-  return 'icon-[lucide--image]'
-}
-
-function getAssetCardClass(selected: boolean): string {
-  return cn(
-    listCardBaseClass,
-    'cursor-pointer',
-    selected &&
-      'bg-secondary-background-hover ring-1 ring-inset ring-modal-card-border-highlighted'
-  )
-}
-
-function getJobCardClass(): string {
-  return cn(listCardBaseClass, 'cursor-default')
-}
-
-function onJobEnter(jobId: string) {
-  hoveredJobId.value = jobId
-}
-
-function onJobLeave(jobId: string) {
-  if (hoveredJobId.value === jobId) {
-    hoveredJobId.value = null
-  }
-}
-
-function onAssetEnter(assetId: string) {
-  hoveredAssetId.value = assetId
-}
-
-function onAssetLeave(assetId: string) {
-  if (hoveredAssetId.value === assetId) {
-    hoveredAssetId.value = null
-  }
-}
-
-function getJobIconClass(job: JobListItem): string | undefined {
-  const classes = []
-  const iconName = job.iconName ?? iconForJobState(job.state)
-  if (!job.iconImageUrl && iconName === iconForJobState('pending')) {
-    classes.push('animate-spin')
-  }
-  return classes.length ? classes.join(' ') : undefined
-}
-
-function handleJobAction(action: JobAction, job: JobListItem) {
-  void runJobAction(action, job)
-}
-
-function handleAssetMenuClick(event: MouseEvent, asset: AssetItem) {
-  event.stopPropagation()
-  emit('context-menu', event, asset)
-}
-</script>

src/components/sidebar/tabs/AssetsSidebarTab.vue

@@ -47,42 +47,17 @@
       <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'"
       />
-      <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" />
+      <Divider type="dashed" class="my-2" />
     </template>
     <template #body>
-      <div v-if="showLoadingState">
+      <div v-if="loading && !displayAssets.length">
         <ProgressSpinner class="absolute left-1/2 w-[50px] -translate-x-1/2" />
       </div>
-      <div v-else-if="showEmptyState">
+      <div v-else-if="!loading && !displayAssets.length">
         <NoResultsPlaceholder
           icon="pi pi-info-circle"
           :title="
@@ -96,16 +71,7 @@
         />
       </div>
       <div v-else class="relative size-full" @click="handleEmptySpaceClick">
-        <AssetsSidebarListView
-          v-if="isListView"
-          :assets="displayAssets"
-          :is-selected="isSelected"
-          @select-asset="handleAssetSelect"
-          @context-menu="handleAssetContextMenu"
-          @approach-end="handleApproachEnd"
-        />
         <VirtualGrid
-          v-else
           :items="mediaAssetsWithKey"
           :grid-style="{
             display: 'grid',
@@ -121,10 +87,13 @@
               :selected="isSelected(item.id)"
               :show-output-count="shouldShowOutputCount(item)"
               :output-count="getOutputCount(item)"
+              :show-delete-button="shouldShowDeleteButton"
+              :open-context-menu-id="openContextMenuId"
               @click="handleAssetSelect(item)"
               @zoom="handleZoomClick(item)"
               @output-count-click="enterFolderView(item)"
-              @context-menu="handleAssetContextMenu($event, item)"
+              @asset-deleted="refreshAssets"
+              @context-menu-opened="openContextMenuId = item.id"
             />
           </template>
         </VirtualGrid>
@@ -191,71 +160,47 @@
     v-model:active-index="galleryActiveIndex"
     :all-gallery-items="galleryItems"
   />
-  <MediaAssetContextMenu
-    v-if="contextMenuAsset"
-    ref="contextMenuRef"
-    :asset="contextMenuAsset"
-    :asset-type="contextMenuAssetType"
-    :file-kind="contextMenuFileKind"
-    :show-delete-button="shouldShowDeleteButton"
-    @zoom="handleContextMenuZoom"
-    @asset-deleted="refreshAssets"
-  />
 </template>
 
 <script setup lang="ts">
 import { useDebounceFn, useElementHover, useResizeObserver } from '@vueuse/core'
+import { Divider } from 'primevue'
 import ProgressSpinner from 'primevue/progressspinner'
 import { useToast } from 'primevue/usetoast'
-import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
 import VirtualGrid from '@/components/common/VirtualGrid.vue'
 import Load3dViewerContent from '@/components/load3d/Load3dViewerContent.vue'
-import AssetsSidebarListView from '@/components/sidebar/tabs/AssetsSidebarListView.vue'
 import SidebarTabTemplate from '@/components/sidebar/tabs/SidebarTabTemplate.vue'
 import ResultGallery from '@/components/sidebar/tabs/queue/ResultGallery.vue'
 import Tab from '@/components/tab/Tab.vue'
 import TabList from '@/components/tab/TabList.vue'
 import Button from '@/components/ui/button/Button.vue'
 import MediaAssetCard from '@/platform/assets/components/MediaAssetCard.vue'
-import MediaAssetContextMenu from '@/platform/assets/components/MediaAssetContextMenu.vue'
 import MediaAssetFilterBar from '@/platform/assets/components/MediaAssetFilterBar.vue'
-import { getAssetType } from '@/platform/assets/composables/media/assetMappers'
 import { useMediaAssets } from '@/platform/assets/composables/media/useMediaAssets'
 import { useAssetSelection } from '@/platform/assets/composables/useAssetSelection'
 import { useMediaAssetActions } from '@/platform/assets/composables/useMediaAssetActions'
 import { useMediaAssetFiltering } from '@/platform/assets/composables/useMediaAssetFiltering'
 import { getOutputAssetMetadata } from '@/platform/assets/schemas/assetMetadataSchema'
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
-import type { MediaKind } from '@/platform/assets/schemas/mediaAssetSchema'
 import { isCloud } from '@/platform/distribution/types'
-import { useSettingStore } from '@/platform/settings/settingStore'
-import { useCommandStore } from '@/stores/commandStore'
 import { useDialogStore } from '@/stores/dialogStore'
-import { ResultItemImpl, useQueueStore } from '@/queue/stores/queueStore'
+import { ResultItemImpl } from '@/stores/queueStore'
 import { formatDuration, getMediaTypeFromFilename } from '@/utils/formatUtil'
 import { cn } from '@/utils/tailwindUtil'
 
 const { t } = 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')
-)
-const isListView = computed(
-  () => isQueuePanelV2Enabled.value && viewMode.value === 'list'
-)
-const contextMenuRef = ref<InstanceType<typeof MediaAssetContextMenu>>()
-const contextMenuAsset = ref<AssetItem | null>(null)
+
+// Track which asset's context menu is open (for single-instance context menu management)
+const openContextMenuId = ref<string | null>(null)
 
 // Determine if delete button should be shown
 // Hide delete button when in input tab and not in cloud (OSS mode - files are from local folders)
@@ -264,14 +209,6 @@ const shouldShowDeleteButton = computed(() => {
   return true
 })
 
-const contextMenuAssetType = computed(() =>
-  contextMenuAsset.value ? getAssetType(contextMenuAsset.value.tags) : 'input'
-)
-
-const contextMenuFileKind = computed<MediaKind>(() =>
-  getMediaTypeFromFilename(contextMenuAsset.value?.name ?? '')
-)
-
 const getOutputCount = (item: AssetItem): number => {
   const count = item.user_metadata?.outputCount
   return typeof count === 'number' && count > 0 ? count : 1
@@ -289,15 +226,6 @@ 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(
-  () =>
-    `${activeJobsCount.value} ${t('sideToolbar.queueProgressOverlay.activeJobsSuffix')}`
-)
-
 const toast = useToast()
 
 const inputAssets = useMediaAssets('input')
@@ -372,20 +300,6 @@ const displayAssets = computed(() => {
   return filteredAssets.value
 })
 
-const showLoadingState = computed(
-  () =>
-    loading.value &&
-    displayAssets.value.length === 0 &&
-    (!isListView.value || activeJobsCount.value === 0)
-)
-
-const showEmptyState = computed(
-  () =>
-    !loading.value &&
-    displayAssets.value.length === 0 &&
-    (!isListView.value || activeJobsCount.value === 0)
-)
-
 watch(displayAssets, (newAssets) => {
   if (currentGalleryAssetId.value && galleryActiveIndex.value !== -1) {
     const newIndex = newAssets.findIndex(
@@ -457,18 +371,6 @@ const handleAssetSelect = (asset: AssetItem) => {
   handleAssetClick(asset, index, displayAssets.value)
 }
 
-function handleAssetContextMenu(event: MouseEvent, asset: AssetItem) {
-  contextMenuAsset.value = asset
-  void nextTick(() => {
-    contextMenuRef.value?.show(event)
-  })
-}
-
-function handleContextMenuZoom() {
-  if (!contextMenuAsset.value) return
-  handleZoomClick(contextMenuAsset.value)
-}
-
 const handleZoomClick = (asset: AssetItem) => {
   const mediaType = getMediaTypeFromFilename(asset.name)
 
@@ -588,11 +490,6 @@ const handleDeleteSelected = async () => {
   clearSelection()
 }
 
-const handleClearQueue = async () => {
-  if (queuedCount.value === 0) return
-  await commandStore.execute('Comfy.ClearPendingTasks')
-}
-
 const handleApproachEnd = useDebounceFn(async () => {
   if (
     activeTab.value === 'output' &&

src/components/sidebar/tabs/queue/ResultAudio.vue

@@ -8,7 +8,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
-import type { ResultItemImpl } from '@/queue/stores/queueStore'
+import type { ResultItemImpl } from '@/stores/queueStore'
 
 const { result } = defineProps<{
   result: ResultItemImpl

src/components/sidebar/tabs/queue/ResultGallery.test.ts

@@ -5,7 +5,7 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { createApp, nextTick } from 'vue'
 
 import type { NodeId } from '@/platform/workflow/validation/schemas/workflowSchema'
-import type { ResultItemImpl } from '@/queue/stores/queueStore'
+import type { ResultItemImpl } from '@/stores/queueStore'
 
 import ResultGallery from './ResultGallery.vue'
 

src/components/sidebar/tabs/queue/ResultGallery.vue

@@ -45,7 +45,7 @@ import Galleria from 'primevue/galleria'
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 
 import ComfyImage from '@/components/common/ComfyImage.vue'
-import type { ResultItemImpl } from '@/queue/stores/queueStore'
+import type { ResultItemImpl } from '@/stores/queueStore'
 
 import ResultAudio from './ResultAudio.vue'
 import ResultVideo from './ResultVideo.vue'

src/components/sidebar/tabs/queue/ResultVideo.vue

@@ -10,7 +10,7 @@ import { computed } from 'vue'
 
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useExtensionStore } from '@/stores/extensionStore'
-import type { ResultItemImpl } from '@/queue/stores/queueStore'
+import type { ResultItemImpl } from '@/stores/queueStore'
 
 const props = defineProps<{
   result: ResultItemImpl

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/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/useCompletionSummary.test.ts

@@ -1,9 +1,9 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { nextTick, reactive } from 'vue'
 
-import { useCompletionSummary } from '@/queue/composables/useCompletionSummary'
+import { useCompletionSummary } from '@/composables/queue/useCompletionSummary'
 import { useExecutionStore } from '@/stores/executionStore'
-import { useQueueStore } from '@/queue/stores/queueStore'
+import { useQueueStore } from '@/stores/queueStore'
 
 type MockTask = {
   displayStatus: 'Completed' | 'Failed' | 'Cancelled' | 'Running' | 'Pending'
@@ -14,7 +14,7 @@ type MockTask = {
   }
 }
 
-vi.mock('@/queue/stores/queueStore', () => {
+vi.mock('@/stores/queueStore', () => {
   const state = reactive({
     runningTasks: [] as MockTask[],
     historyTasks: [] as MockTask[]

src/composables/queue/useCompletionSummary.ts

@@ -1,8 +1,8 @@
 import { computed, ref, watch } from 'vue'
 
 import { useExecutionStore } from '@/stores/executionStore'
-import { useQueueStore } from '@/queue/stores/queueStore'
-import { jobStateFromTask } from '@/queue/utils/queueUtil'
+import { useQueueStore } from '@/stores/queueStore'
+import { jobStateFromTask } from '@/utils/queueUtil'
 
 export type CompletionSummaryMode = 'allSuccess' | 'mixed' | 'allFailed'
 

src/composables/queue/useJobList.test.ts

@@ -3,11 +3,11 @@ import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest'
 import { nextTick, reactive, ref } from 'vue'
 import type { Ref } from 'vue'
 
-import { useJobList } from '@/queue/composables/useJobList'
-import type { JobState } from '@/queue/types/queue'
-import { buildJobDisplay } from '@/queue/utils/queueDisplay'
-import type { BuildJobDisplayCtx } from '@/queue/utils/queueDisplay'
-import type { TaskItemImpl } from '@/queue/stores/queueStore'
+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
@@ -57,7 +57,7 @@ const ensureProgressRefs = () => {
   if (!currentNodePercent) currentNodePercent = ref(0) as Ref<number>
   return { totalPercent, currentNodePercent }
 }
-vi.mock('@/queue/composables/useQueueProgress', () => ({
+vi.mock('@/composables/queue/useQueueProgress', () => ({
   useQueueProgress: () => {
     ensureProgressRefs()
     return {
@@ -67,7 +67,7 @@ vi.mock('@/queue/composables/useQueueProgress', () => ({
   }
 }))
 
-vi.mock('@/queue/utils/queueDisplay', () => ({
+vi.mock('@/utils/queueDisplay', () => ({
   buildJobDisplay: vi.fn(
     (task: TaskItemImpl, state: JobState, options: BuildJobDisplayCtx) => ({
       primary: `Job ${task.promptId}`,
@@ -80,7 +80,7 @@ vi.mock('@/queue/utils/queueDisplay', () => ({
   )
 }))
 
-vi.mock('@/queue/utils/queueUtil', () => ({
+vi.mock('@/utils/queueUtil', () => ({
   jobStateFromTask: vi.fn(
     (task: TestTask, isInitializing?: boolean): JobState =>
       task.mockState ?? (isInitializing ? 'running' : 'completed')
@@ -102,7 +102,7 @@ const ensureQueueStore = () => {
   }
   return queueStoreMock
 }
-vi.mock('@/queue/stores/queueStore', () => ({
+vi.mock('@/stores/queueStore', () => ({
   useQueueStore: () => {
     return ensureQueueStore()
   }

src/composables/queue/useJobList.ts

@@ -1,14 +1,14 @@
 import { computed, onUnmounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import { useQueueProgress } from '@/queue/composables/useQueueProgress'
+import { useQueueProgress } from '@/composables/queue/useQueueProgress'
 import { st } from '@/i18n'
 import { isCloud } from '@/platform/distribution/types'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import { useExecutionStore } from '@/stores/executionStore'
-import { useQueueStore } from '@/queue/stores/queueStore'
-import type { TaskItemImpl } from '@/queue/stores/queueStore'
-import type { JobState } from '@/queue/types/queue'
+import { useQueueStore } from '@/stores/queueStore'
+import type { TaskItemImpl } from '@/stores/queueStore'
+import type { JobState } from '@/types/queue'
 import {
   dateKey,
   formatClockTime,
@@ -17,8 +17,8 @@ import {
   isYesterday
 } from '@/utils/dateTimeUtil'
 import { normalizeI18nKey } from '@/utils/formatUtil'
-import { buildJobDisplay } from '@/queue/utils/queueDisplay'
-import { jobStateFromTask } from '@/queue/utils/queueUtil'
+import { buildJobDisplay } from '@/utils/queueDisplay'
+import { jobStateFromTask } from '@/utils/queueUtil'
 
 /** Tabs for job list filtering */
 export const jobTabs = ['All', 'Completed', 'Failed'] as const

src/composables/queue/useJobMenu.test.ts

@@ -2,8 +2,8 @@ import { describe, it, expect, beforeEach, vi } from 'vitest'
 import { nextTick, ref } from 'vue'
 import type { Ref } from 'vue'
 
-import type { JobListItem } from '@/queue/composables/useJobList'
-import type { MenuEntry } from '@/queue/composables/useJobMenu'
+import type { JobListItem } from '@/composables/queue/useJobList'
+import type { MenuEntry } from '@/composables/queue/useJobMenu'
 
 const downloadFileMock = vi.fn()
 vi.mock('@/base/common/downloadUtil', () => ({
@@ -99,7 +99,7 @@ const queueStoreMock = {
   update: vi.fn(),
   delete: vi.fn()
 }
-vi.mock('@/queue/stores/queueStore', () => ({
+vi.mock('@/stores/queueStore', () => ({
   useQueueStore: () => queueStoreMock
 }))
 
@@ -116,7 +116,7 @@ vi.mock('@/utils/formatUtil', () => ({
     appendJsonExtMock(...args)
 }))
 
-import { useJobMenu } from '@/queue/composables/useJobMenu'
+import { useJobMenu } from '@/composables/queue/useJobMenu'
 
 const createJobItem = (overrides: Partial<JobListItem> = {}): JobListItem => ({
   id: overrides.id ?? 'job-1',
@@ -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/queue/useJobMenu.ts

@@ -1,7 +1,7 @@
 import { computed } from 'vue'
 
 import { downloadFile } from '@/base/common/downloadUtil'
-import type { JobListItem } from '@/queue/composables/useJobList'
+import type { JobListItem } from '@/composables/queue/useJobList'
 import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
 import { st, t } from '@/i18n'
 import { mapTaskOutputToAssetItem } from '@/platform/assets/composables/media/assetMappers'
@@ -19,8 +19,8 @@ import { downloadBlob } from '@/scripts/utils'
 import { useDialogService } from '@/services/dialogService'
 import { useLitegraphService } from '@/services/litegraphService'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
-import { useQueueStore } from '@/queue/stores/queueStore'
-import type { ResultItemImpl, TaskItemImpl } from '@/queue/stores/queueStore'
+import { useQueueStore } from '@/stores/queueStore'
+import type { ResultItemImpl, TaskItemImpl } from '@/stores/queueStore'
 import { createAnnotatedPath } from '@/utils/createAnnotatedPath'
 import { appendJsonExt } from '@/utils/formatUtil'
 

src/composables/queue/useQueueProgress.test.ts

@@ -4,7 +4,7 @@ import { nextTick, ref } from 'vue'
 import type { Ref } from 'vue'
 import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest'
 
-import { useQueueProgress } from '@/queue/composables/useQueueProgress'
+import { useQueueProgress } from '@/composables/queue/useQueueProgress'
 import { formatPercent0 } from '@/utils/numberUtil'
 
 type ProgressValue = number | null

src/composables/queue/useResultGallery.test.ts

@@ -1,7 +1,7 @@
 import { describe, it, expect } from 'vitest'
 
-import { useResultGallery } from '@/queue/composables/useResultGallery'
-import type { JobListItem } from '@/queue/composables/useJobList'
+import { useResultGallery } from '@/composables/queue/useResultGallery'
+import type { JobListItem } from '@/composables/queue/useJobList'
 
 type PreviewLike = { url: string; supportsPreview: boolean }
 

src/composables/queue/useResultGallery.ts

@@ -1,7 +1,7 @@
 import { ref, shallowRef } from 'vue'
 
-import type { JobListItem } from '@/queue/composables/useJobList'
-import type { ResultItemImpl } from '@/queue/stores/queueStore'
+import type { JobListItem } from '@/composables/queue/useJobList'
+import type { ResultItemImpl } from '@/stores/queueStore'
 
 /**
  * Manages result gallery state and activation for queue items.

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 '@/queue/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,6 +67,7 @@ import { useWorkflowTemplateSelectorDialog } from './useWorkflowTemplateSelector
 const { isActiveSubscription, showSubscriptionDialog } = useSubscription()
 
 const moveSelectedNodesVersionAdded = '1.22.2'
+
 export function useCoreCommands(): ComfyCommand[] {
   const workflowService = useWorkflowService()
   const workflowStore = useWorkflowStore()
@@ -74,7 +79,6 @@ export function useCoreCommands(): ComfyCommand[] {
   const executionStore = useExecutionStore()
   const telemetry = useTelemetry()
   const { staticUrls, buildDocsUrl } = useExternalLink()
-  const settingStore = useSettingStore()
 
   const bottomPanelStore = useBottomPanelStore()
 
@@ -82,14 +86,6 @@ 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
   ) => {
@@ -431,6 +427,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',
@@ -1183,12 +1191,6 @@ 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',