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>

.i18nrc.cjs

@@ -6,7 +6,6 @@ const { defineConfig } = require('@lobehub/i18n-cli');
 module.exports = defineConfig({
   modelName: 'gpt-4.1',
   splitToken: 1024,
-  saveImmediately: true,
   entry: 'src/locales/en',
   entryLocale: 'en',
   output: 'src/locales',

.storybook/main.ts

@@ -7,7 +7,7 @@ import type { InlineConfig } from 'vite'
 
 const config: StorybookConfig = {
   stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-  addons: ['@storybook/addon-docs', '@storybook/addon-mcp'],
+  addons: ['@storybook/addon-docs'],
   framework: {
     name: '@storybook/vue3-vite',
     options: {}

AGENTS.md

@@ -63,9 +63,6 @@ The project uses **Nx** for build orchestration and task management
 - Imports:
   - sorted/grouped by plugin
   - run `pnpm format` before committing
-  - use separate `import type` statements, not inline `type` in mixed imports
-    - ✅ `import type { Foo } from './foo'` + `import { bar } from './foo'`
-    - ❌ `import { bar, type Foo } from './foo'`
 - ESLint:
   - Vue + TS rules
   - no floating promises
@@ -122,10 +119,7 @@ The project uses **Nx** for build orchestration and task management
   - Prefer reactive props destructuring to `const props = defineProps<...>`
   - Do not use `withDefaults` or runtime props declaration
   - Do not import Vue macros unnecessarily
-  - Prefer `defineModel` to separately defining a prop and emit for v-model bindings
-  - Define slots via template usage, not `defineSlots`
-  - Use same-name shorthand for slot prop bindings: `:isExpanded` instead of `:is-expanded="isExpanded"`
-  - Derive component types using `vue-component-type-helpers` (`ComponentProps`, `ComponentSlots`) instead of separate type files
+  - Prefer `useModel` to separately defining a prop and emit
   - Be judicious with addition of new refs or other state
     - If it's possible to accomplish the design goals with just a prop, don't add a `ref`
     - If it's possible to use the `ref` or prop directly, don't add a `computed`
@@ -143,7 +137,7 @@ The project uses **Nx** for build orchestration and task management
 8. Implement proper error handling
 9. Follow Vue 3 style guide and naming conventions
 10. Use Vite for fast development and building
-11. Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json. Use the plurals system in i18n instead of hardcoding pluralization in templates.
+11. Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json
 12. Avoid new usage of PrimeVue components
 13. Write tests for all changes, especially bug fixes to catch future regressions
 14. Write code that is expressive and self-documenting to the furthest degree possible. This reduces the need for code comments which can get out of sync with the code itself. Try to avoid comments unless absolutely necessary
@@ -161,8 +155,6 @@ The project uses **Nx** for build orchestration and task management
 
 ## Testing Guidelines
 
-See @docs/testing/*.md for detailed patterns.
-
 - Frameworks:
   - Vitest (unit/component, happy-dom)
   - Playwright (E2E)
@@ -276,8 +268,6 @@ When referencing Comfy-Org repos:
   - Use `cn()` inline in the template when feasible instead of creating a `computed` to hold the value
 - NEVER use `!important` or the `!` important prefix for tailwind classes
   - Find existing `!important` classes that are interfering with the styling and propose corrections of those instead.
-- NEVER use arbitrary percentage values like `w-[80%]` when a Tailwind fraction utility exists
-  - Use `w-4/5` instead of `w-[80%]`, `w-1/2` instead of `w-[50%]`, etc.
 
 ## Agent-only rules
 

THIRD_PARTY_NOTICES.md

@@ -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)
   })

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.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",
@@ -65,7 +66,6 @@
     "@prettier/plugin-oxc": "catalog:",
     "@sentry/vite-plugin": "catalog:",
     "@storybook/addon-docs": "catalog:",
-    "@storybook/addon-mcp": "catalog:",
     "@storybook/vue3": "catalog:",
     "@storybook/vue3-vite": "catalog:",
     "@tailwindcss/vite": "catalog:",
@@ -163,6 +163,7 @@
     "algoliasearch": "catalog:",
     "axios": "catalog:",
     "chart.js": "^4.5.0",
+    "client-zip": "catalog:",
     "cva": "catalog:",
     "dompurify": "^3.2.5",
     "dotenv": "catalog:",
@@ -187,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-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,10 +26,9 @@ catalog:
   '@primevue/icons': 4.2.5
   '@primevue/themes': ^4.2.5
   '@sentry/vite-plugin': ^4.6.0
-  '@sentry/vue': ^8.48.0
+  '@sentry/vue': ^10.32.1
   '@sparkjsdev/spark': ^0.1.10
   '@storybook/addon-docs': ^10.1.9
-  '@storybook/addon-mcp': 0.1.6
   '@storybook/vue3': ^10.1.9
   '@storybook/vue3-vite': ^10.1.9
   '@tailwindcss/vite': ^4.1.12
@@ -40,14 +39,15 @@ 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
   '@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
@@ -60,11 +60,11 @@ catalog:
   eslint-plugin-unused-imports: ^4.3.0
   eslint-plugin-vue: ^10.6.2
   firebase: ^11.6.0
-  globals: ^15.9.0
-  happy-dom: ^15.11.0
+  globals: ^16.5.0
+  happy-dom: ^20.0.11
   husky: ^9.1.7
   jiti: 2.6.1
-  jsdom: ^26.1.0
+  jsdom: ^27.4.0
   knip: ^5.75.1
   lint-staged: ^16.2.7
   markdown-table: ^3.0.4
@@ -73,7 +73,7 @@ catalog:
   oxlint: ^1.33.0
   oxlint-tsgolint: ^0.9.1
   picocolors: ^1.1.1
-  pinia: ^2.1.7
+  pinia: ^3.0.4
   postcss-html: ^1.8.0
   prettier: ^3.7.4
   pretty-bytes: ^7.1.0
@@ -97,14 +97,15 @@ catalog:
   vite-plugin-dts: ^4.5.4
   vite-plugin-html: ^3.2.2
   vite-plugin-vue-devtools: ^8.0.0
-  vitest: ^3.2.4
+  vitest: ^4.0.16
   vue: ^3.5.13
-  vue-component-type-helpers: ^3.0.7
+  vue-component-type-helpers: ^3.2.1
   vue-eslint-parser: ^10.2.0
   vue-i18n: ^9.14.3
   vue-router: ^4.4.3
-  vue-tsc: ^3.1.8
+  vue-tsc: ^3.2.1
   vuefire: ^3.2.1
+  wwobjloader2: ^6.2.1
   yjs: ^13.6.27
   zod: ^3.23.8
   zod-to-json-schema: ^3.24.1

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/common/StatusBadge.vue

@@ -1,30 +0,0 @@
-<script setup lang="ts">
-type Severity = 'default' | 'secondary' | 'warn' | 'danger' | 'contrast'
-
-const { label, severity = 'default' } = defineProps<{
-  label: string
-  severity?: Severity
-}>()
-
-function badgeClasses(sev: Severity): string {
-  const baseClasses =
-    'inline-flex h-3.5 items-center justify-center rounded-full px-1 text-xxxs font-semibold uppercase'
-
-  switch (sev) {
-    case 'danger':
-      return `${baseClasses} bg-destructive-background text-white`
-    case 'contrast':
-      return `${baseClasses} bg-base-foreground text-base-background`
-    case 'warn':
-      return `${baseClasses} bg-warning-background text-base-background`
-    case 'secondary':
-      return `${baseClasses} bg-secondary-background text-base-foreground`
-    default:
-      return `${baseClasses} bg-primary-background text-base-foreground`
-  }
-}
-</script>
-
-<template>
-  <span :class="badgeClasses(severity)">{{ label }}</span>
-</template>

src/components/dialog/content/TopUpCreditsDialogContent.vue

@@ -1,264 +1,133 @@
 <template>
-  <div
-    class="flex min-w-[460px] flex-col rounded-2xl border border-border-default bg-base-background shadow-[1px_1px_8px_0_rgba(0,0,0,0.4)]"
-  >
+  <div class="flex w-112 flex-col gap-8 p-8">
     <!-- Header -->
-    <div class="flex py-8 items-center justify-between px-8">
-      <h2 class="text-lg font-bold text-base-foreground m-0">
+    <div class="flex flex-col gap-4">
+      <h1 class="text-2xl font-semibold text-base-foreground m-0">
         {{
           isInsufficientCredits
             ? $t('credits.topUp.addMoreCreditsToRun')
             : $t('credits.topUp.addMoreCredits')
         }}
-      </h2>
-      <button
-        class="cursor-pointer rounded border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-foreground"
-        @click="() => handleClose()"
-      >
-        <i class="icon-[lucide--x] size-6" />
-      </button>
+      </h1>
+      <div v-if="isInsufficientCredits" class="flex flex-col gap-2">
+        <p class="text-sm text-muted-foreground m-0 w-96">
+          {{ $t('credits.topUp.insufficientWorkflowMessage') }}
+        </p>
+      </div>
+      <div v-else class="flex flex-col gap-2">
+        <p class="text-sm text-muted-foreground m-0">
+          {{ $t('credits.topUp.creditsDescription') }}
+        </p>
+      </div>
     </div>
-    <p
-      v-if="isInsufficientCredits"
-      class="text-sm text-muted-foreground m-0 px-8"
+
+    <!-- Current Balance Section -->
+    <div class="flex flex-col gap-4">
+      <div class="flex items-baseline gap-2">
+        <UserCredit text-class="text-3xl font-bold" show-credits-only />
+        <span class="text-sm text-muted-foreground">{{
+          $t('credits.creditsAvailable')
+        }}</span>
+      </div>
+      <div v-if="formattedRenewalDate" class="text-sm text-muted-foreground">
+        {{ $t('credits.refreshes', { date: formattedRenewalDate }) }}
+      </div>
+    </div>
+
+    <!-- Credit Options Section -->
+    <div class="flex flex-col gap-4">
+      <span class="text-sm text-muted-foreground">
+        {{ $t('credits.topUp.howManyCredits') }}
+      </span>
+      <div class="flex flex-col gap-2">
+        <CreditTopUpOption
+          v-for="option in creditOptions"
+          :key="option.credits"
+          :credits="option.credits"
+          :description="option.description"
+          :selected="selectedCredits === option.credits"
+          @select="selectedCredits = option.credits"
+        />
+      </div>
+      <div class="text-xs text-muted-foreground w-96">
+        {{ $t('credits.topUp.templateNote') }}
+      </div>
+    </div>
+
+    <!-- Buy Button -->
+    <Button
+      :disabled="!selectedCredits || loading"
+      :loading="loading"
+      variant="primary"
+      :class="cn('w-full', (!selectedCredits || loading) && 'opacity-30')"
+      @click="handleBuy"
     >
-      {{ $t('credits.topUp.insufficientWorkflowMessage') }}
-    </p>
-
-    <!-- Preset amount buttons -->
-    <div class="px-8">
-      <h3 class="m-0 text-sm font-normal text-muted-foreground">
-        {{ $t('credits.topUp.selectAmount') }}
-      </h3>
-      <div class="flex gap-2 pt-3">
-        <Button
-          v-for="amount in PRESET_AMOUNTS"
-          :key="amount"
-          :autofocus="amount === 50"
-          variant="secondary"
-          size="lg"
-          :class="
-            cn(
-              'h-10 text-base font-medium w-full focus-visible:ring-secondary-foreground',
-              selectedPreset === amount && 'bg-secondary-background-selected'
-            )
-          "
-          @click="handlePresetClick(amount)"
-        >
-          ${{ amount }}
-        </Button>
-      </div>
-    </div>
-    <!-- Amount (USD) / Credits -->
-    <div class="flex gap-2 px-8 pt-8">
-      <!-- You Pay -->
-      <div class="flex flex-1 flex-col gap-3">
-        <div class="text-sm text-muted-foreground">
-          {{ $t('credits.topUp.youPay') }}
-        </div>
-        <FormattedNumberStepper
-          :model-value="payAmount"
-          :min="0"
-          :max="MAX_AMOUNT"
-          :step="getStepAmount"
-          @update:model-value="handlePayAmountChange"
-          @max-reached="showCeilingWarning = true"
-        >
-          <template #prefix>
-            <span class="shrink-0 text-base font-semibold text-base-foreground"
-              >$</span
-            >
-          </template>
-        </FormattedNumberStepper>
-      </div>
-
-      <!-- You Get -->
-      <div class="flex flex-1 flex-col gap-3">
-        <div class="text-sm text-muted-foreground">
-          {{ $t('credits.topUp.youGet') }}
-        </div>
-        <FormattedNumberStepper
-          v-model="creditsModel"
-          :min="0"
-          :max="usdToCredits(MAX_AMOUNT)"
-          :step="getCreditsStepAmount"
-          @max-reached="showCeilingWarning = true"
-        >
-          <template #prefix>
-            <i class="icon-[lucide--component] size-4 shrink-0 text-gold-500" />
-          </template>
-        </FormattedNumberStepper>
-      </div>
-    </div>
-
-    <!-- Warnings -->
-
-    <p
-      v-if="isBelowMin"
-      class="text-sm text-red-500 m-0 px-8 pt-4 text-center flex items-center justify-center gap-1"
-    >
-      <i class="icon-[lucide--component] size-4" />
-      {{
-        $t('credits.topUp.minRequired', {
-          credits: formatNumber(usdToCredits(MIN_AMOUNT))
-        })
-      }}
-    </p>
-    <p
-      v-if="showCeilingWarning"
-      class="text-sm text-gold-500 m-0 px-8 pt-4 text-center flex items-center justify-center gap-1"
-    >
-      <i class="icon-[lucide--component] size-4" />
-      {{
-        $t('credits.topUp.maxAllowed', {
-          credits: formatNumber(usdToCredits(MAX_AMOUNT))
-        })
-      }}
-      <span>{{ $t('credits.topUp.needMore') }}</span>
-      <a
-        href="https://www.comfy.org/cloud/enterprise"
-        target="_blank"
-        class="ml-1 text-inherit"
-        >{{ $t('credits.topUp.contactUs') }}</a
-      >
-    </p>
-
-    <div class="pt-8 pb-8 flex flex-col gap-8 px-8">
-      <Button
-        :disabled="!isValidAmount || loading"
-        :loading="loading"
-        variant="primary"
-        size="lg"
-        class="h-10 justify-center"
-        @click="handleBuy"
-      >
-        {{ $t('credits.topUp.buyCredits') }}
-      </Button>
-      <div class="flex items-center justify-center gap-1">
-        <a
-          :href="pricingUrl"
-          target="_blank"
-          class="flex items-center gap-1 text-sm text-muted-foreground no-underline transition-colors hover:text-base-foreground"
-        >
-          {{ $t('credits.topUp.viewPricing') }}
-          <i class="icon-[lucide--external-link] size-4" />
-        </a>
-      </div>
-    </div>
+      {{ $t('credits.topUp.buy') }}
+    </Button>
   </div>
 </template>
 
 <script setup lang="ts">
 import { useToast } from 'primevue/usetoast'
-import { computed, ref } from 'vue'
+import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import { creditsToUsd, usdToCredits } from '@/base/credits/comfyCredits'
+import { creditsToUsd } from '@/base/credits/comfyCredits'
+import UserCredit from '@/components/common/UserCredit.vue'
 import Button from '@/components/ui/button/Button.vue'
-import FormattedNumberStepper from '@/components/ui/stepper/FormattedNumberStepper.vue'
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
-import { useExternalLink } from '@/composables/useExternalLink'
 import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
 import { useTelemetry } from '@/platform/telemetry'
-import { clearTopupTracking } from '@/platform/telemetry/topupTracker'
-import { useDialogService } from '@/services/dialogService'
-import { useDialogStore } from '@/stores/dialogStore'
 import { cn } from '@/utils/tailwindUtil'
 
+import CreditTopUpOption from './credit/CreditTopUpOption.vue'
+
+interface CreditOption {
+  credits: number
+  description: string
+}
+
 const { isInsufficientCredits = false } = defineProps<{
   isInsufficientCredits?: boolean
 }>()
 
+const { formattedRenewalDate } = useSubscription()
+
 const { t } = useI18n()
 const authActions = useFirebaseAuthActions()
-const dialogStore = useDialogStore()
-const dialogService = useDialogService()
 const telemetry = useTelemetry()
 const toast = useToast()
-const { buildDocsUrl, docsPaths } = useExternalLink()
-const { isSubscriptionEnabled } = useSubscription()
 
-// Constants
-const PRESET_AMOUNTS = [10, 25, 50, 100]
-const MIN_AMOUNT = 5
-const MAX_AMOUNT = 10000
-
-// State
-const selectedPreset = ref<number | null>(50)
-const payAmount = ref(50)
-const showCeilingWarning = ref(false)
+const selectedCredits = ref<number | null>(null)
 const loading = ref(false)
 
-// Computed
-const pricingUrl = computed(() =>
-  buildDocsUrl(docsPaths.partnerNodesPricing, { includeLocale: true })
-)
-
-const creditsModel = computed({
-  get: () => usdToCredits(payAmount.value),
-  set: (newCredits: number) => {
-    payAmount.value = Math.round(creditsToUsd(newCredits))
-    selectedPreset.value = null
+const creditOptions: CreditOption[] = [
+  {
+    credits: 1055, // $5.00
+    description: t('credits.topUp.videosEstimate', { count: 41 })
+  },
+  {
+    credits: 2110, // $10.00
+    description: t('credits.topUp.videosEstimate', { count: 82 })
+  },
+  {
+    credits: 4220, // $20.00
+    description: t('credits.topUp.videosEstimate', { count: 184 })
+  },
+  {
+    credits: 10550, // $50.00
+    description: t('credits.topUp.videosEstimate', { count: 412 })
   }
-})
+]
 
-const isValidAmount = computed(
-  () => payAmount.value >= MIN_AMOUNT && payAmount.value <= MAX_AMOUNT
-)
-
-const isBelowMin = computed(() => payAmount.value < MIN_AMOUNT)
-
-// Utility functions
-function formatNumber(num: number): string {
-  return num.toLocaleString('en-US')
-}
-
-// Step amount functions
-function getStepAmount(currentAmount: number): number {
-  if (currentAmount < 100) return 5
-  if (currentAmount < 1000) return 50
-  return 100
-}
-
-function getCreditsStepAmount(currentCredits: number): number {
-  const usdAmount = creditsToUsd(currentCredits)
-  return usdToCredits(getStepAmount(usdAmount))
-}
-
-// Event handlers
-function handlePayAmountChange(value: number) {
-  payAmount.value = value
-  selectedPreset.value = null
-  showCeilingWarning.value = false
-}
-
-function handlePresetClick(amount: number) {
-  showCeilingWarning.value = false
-  payAmount.value = amount
-  selectedPreset.value = amount
-}
-
-function handleClose(clearTracking = true) {
-  if (clearTracking) {
-    clearTopupTracking()
-  }
-  dialogStore.closeDialog({ key: 'top-up-credits' })
-}
-
-async function handleBuy() {
-  // Prevent double-clicks
-  if (loading.value || !isValidAmount.value) return
+const handleBuy = async () => {
+  if (!selectedCredits.value) return
 
   loading.value = true
   try {
-    telemetry?.trackApiCreditTopupButtonPurchaseClicked(payAmount.value)
-    await authActions.purchaseCredits(payAmount.value)
-
-    // Close top-up dialog (keep tracking) and open credits panel to show updated balance
-    handleClose(false)
-    dialogService.showSettingsDialog(
-      isSubscriptionEnabled() ? 'subscription' : 'credits'
-    )
+    const usdAmount = creditsToUsd(selectedCredits.value)
+    telemetry?.trackApiCreditTopupButtonPurchaseClicked(usdAmount)
+    await authActions.purchaseCredits(usdAmount)
   } catch (error) {
     console.error('Purchase failed:', error)
 

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/honeyToast/HoneyToast.stories.ts

@@ -1,293 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3-vite'
-import { ref } from 'vue'
-
-import ProgressToastItem from '@/components/toast/ProgressToastItem.vue'
-import Button from '@/components/ui/button/Button.vue'
-import type { AssetDownload } from '@/stores/assetDownloadStore'
-import { cn } from '@/utils/tailwindUtil'
-
-import HoneyToast from './HoneyToast.vue'
-
-function createMockJob(overrides: Partial<AssetDownload> = {}): AssetDownload {
-  return {
-    taskId: 'task-1',
-    assetId: 'asset-1',
-    assetName: 'model-v1.safetensors',
-    bytesTotal: 1000000,
-    bytesDownloaded: 0,
-    progress: 0,
-    status: 'created',
-    lastUpdate: Date.now(),
-    ...overrides
-  }
-}
-
-const meta: Meta<typeof HoneyToast> = {
-  title: 'Toast/HoneyToast',
-  component: HoneyToast,
-  parameters: {
-    layout: 'fullscreen'
-  },
-  decorators: [
-    () => ({
-      template: '<div class="h-screen bg-base-background p-8"><story /></div>'
-    })
-  ]
-}
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  render: () => ({
-    components: { HoneyToast, Button, ProgressToastItem },
-    setup() {
-      const isExpanded = ref(false)
-      const jobs = [
-        createMockJob({
-          taskId: 'task-1',
-          assetName: 'model-v1.safetensors',
-          status: 'completed',
-          progress: 1
-        }),
-        createMockJob({
-          taskId: 'task-2',
-          assetName: 'lora-style.safetensors',
-          status: 'running',
-          progress: 0.45
-        }),
-        createMockJob({
-          taskId: 'task-3',
-          assetName: 'vae-decoder.safetensors',
-          status: 'created'
-        })
-      ]
-      return { isExpanded, cn, jobs }
-    },
-    template: `
-      <HoneyToast v-model:expanded="isExpanded" :visible="true">
-        <template #default>
-          <div class="flex h-12 items-center justify-between border-b border-border-default px-4">
-            <h3 class="text-sm font-bold text-base-foreground">Download Queue</h3>
-          </div>
-          <div class="relative max-h-[300px] overflow-y-auto px-4 py-4">
-            <div class="flex flex-col gap-2">
-              <ProgressToastItem v-for="job in jobs" :key="job.taskId" :job="job" />
-            </div>
-          </div>
-        </template>
-        
-        <template #footer="{ toggle }">
-          <div class="flex h-12 items-center justify-between border-t border-border-default px-4">
-            <div class="flex items-center gap-2 text-sm">
-              <i class="icon-[lucide--loader-circle] size-4 animate-spin text-muted-foreground" />
-              <span class="font-bold text-base-foreground">lora-style.safetensors</span>
-            </div>
-            <div class="flex items-center gap-2">
-              <span class="text-sm text-muted-foreground">1 of 3</span>
-              <div class="flex items-center">
-                <Button variant="muted-textonly" size="icon" @click.stop="toggle">
-                  <i :class="cn('size-4', isExpanded ? 'icon-[lucide--chevron-down]' : 'icon-[lucide--chevron-up]')" />
-                </Button>
-              </div>
-            </div>
-          </div>
-        </template>
-      </HoneyToast>
-    `
-  })
-}
-
-export const Expanded: Story = {
-  render: () => ({
-    components: { HoneyToast, Button, ProgressToastItem },
-    setup() {
-      const isExpanded = ref(true)
-      const jobs = [
-        createMockJob({
-          taskId: 'task-1',
-          assetName: 'model-v1.safetensors',
-          status: 'completed',
-          progress: 1
-        }),
-        createMockJob({
-          taskId: 'task-2',
-          assetName: 'lora-style.safetensors',
-          status: 'running',
-          progress: 0.45
-        }),
-        createMockJob({
-          taskId: 'task-3',
-          assetName: 'vae-decoder.safetensors',
-          status: 'created'
-        })
-      ]
-      return { isExpanded, cn, jobs }
-    },
-    template: `
-      <HoneyToast v-model:expanded="isExpanded" :visible="true">
-        <template #default>
-          <div class="flex h-12 items-center justify-between border-b border-border-default px-4">
-            <h3 class="text-sm font-bold text-base-foreground">Download Queue</h3>
-          </div>
-          <div class="relative max-h-[300px] overflow-y-auto px-4 py-4">
-            <div class="flex flex-col gap-2">
-              <ProgressToastItem v-for="job in jobs" :key="job.taskId" :job="job" />
-            </div>
-          </div>
-        </template>
-        
-        <template #footer="{ toggle }">
-          <div class="flex h-12 items-center justify-between border-t border-border-default px-4">
-            <div class="flex items-center gap-2 text-sm">
-              <i class="icon-[lucide--loader-circle] size-4 animate-spin text-muted-foreground" />
-              <span class="font-bold text-base-foreground">lora-style.safetensors</span>
-            </div>
-            <div class="flex items-center gap-2">
-              <span class="text-sm text-muted-foreground">1 of 3</span>
-              <div class="flex items-center">
-                <Button variant="muted-textonly" size="icon" @click.stop="toggle">
-                  <i :class="cn('size-4', isExpanded ? 'icon-[lucide--chevron-down]' : 'icon-[lucide--chevron-up]')" />
-                </Button>
-              </div>
-            </div>
-          </div>
-        </template>
-      </HoneyToast>
-    `
-  })
-}
-
-export const Completed: Story = {
-  render: () => ({
-    components: { HoneyToast, Button, ProgressToastItem },
-    setup() {
-      const isExpanded = ref(false)
-      const jobs = [
-        createMockJob({
-          taskId: 'task-1',
-          assetName: 'model-v1.safetensors',
-          bytesDownloaded: 1000000,
-          progress: 1,
-          status: 'completed'
-        }),
-        createMockJob({
-          taskId: 'task-2',
-          assetId: 'asset-2',
-          assetName: 'lora-style.safetensors',
-          bytesTotal: 500000,
-          bytesDownloaded: 500000,
-          progress: 1,
-          status: 'completed'
-        })
-      ]
-      return { isExpanded, cn, jobs }
-    },
-    template: `
-      <HoneyToast v-model:expanded="isExpanded" :visible="true">
-        <template #default>
-          <div class="flex h-12 items-center justify-between border-b border-border-default px-4">
-            <h3 class="text-sm font-bold text-base-foreground">Download Queue</h3>
-          </div>
-          <div class="relative max-h-[300px] overflow-y-auto px-4 py-4">
-            <div class="flex flex-col gap-2">
-              <ProgressToastItem v-for="job in jobs" :key="job.taskId" :job="job" />
-            </div>
-          </div>
-        </template>
-        
-        <template #footer="{ toggle }">
-          <div class="flex h-12 items-center justify-between border-t border-border-default px-4">
-            <div class="flex items-center gap-2 text-sm">
-              <i class="icon-[lucide--check-circle] size-4 text-jade-600" />
-              <span class="font-bold text-base-foreground">All downloads completed</span>
-            </div>
-            <div class="flex items-center">
-              <Button variant="muted-textonly" size="icon" @click.stop="toggle">
-                <i :class="cn('size-4', isExpanded ? 'icon-[lucide--chevron-down]' : 'icon-[lucide--chevron-up]')" />
-              </Button>
-              <Button variant="muted-textonly" size="icon">
-                <i class="icon-[lucide--x] size-4" />
-              </Button>
-            </div>
-          </div>
-        </template>
-      </HoneyToast>
-    `
-  })
-}
-
-export const WithError: Story = {
-  render: () => ({
-    components: { HoneyToast, Button, ProgressToastItem },
-    setup() {
-      const isExpanded = ref(true)
-      const jobs = [
-        createMockJob({
-          taskId: 'task-1',
-          assetName: 'model-v1.safetensors',
-          status: 'failed',
-          progress: 0.23
-        }),
-        createMockJob({
-          taskId: 'task-2',
-          assetName: 'lora-style.safetensors',
-          status: 'completed',
-          progress: 1
-        })
-      ]
-      return { isExpanded, cn, jobs }
-    },
-    template: `
-      <HoneyToast v-model:expanded="isExpanded" :visible="true">
-        <template #default>
-          <div class="flex h-12 items-center justify-between border-b border-border-default px-4">
-            <h3 class="text-sm font-bold text-base-foreground">Download Queue</h3>
-          </div>
-          <div class="relative max-h-[300px] overflow-y-auto px-4 py-4">
-            <div class="flex flex-col gap-2">
-              <ProgressToastItem v-for="job in jobs" :key="job.taskId" :job="job" />
-            </div>
-          </div>
-        </template>
-        
-        <template #footer="{ toggle }">
-          <div class="flex h-12 items-center justify-between border-t border-border-default px-4">
-            <div class="flex items-center gap-2 text-sm">
-              <i class="icon-[lucide--circle-alert] size-4 text-destructive-background" />
-              <span class="font-bold text-base-foreground">1 download failed</span>
-            </div>
-            <div class="flex items-center">
-              <Button variant="muted-textonly" size="icon" @click.stop="toggle">
-                <i :class="cn('size-4', isExpanded ? 'icon-[lucide--chevron-down]' : 'icon-[lucide--chevron-up]')" />
-              </Button>
-              <Button variant="muted-textonly" size="icon">
-                <i class="icon-[lucide--x] size-4" />
-              </Button>
-            </div>
-          </div>
-        </template>
-      </HoneyToast>
-    `
-  })
-}
-
-export const Hidden: Story = {
-  render: () => ({
-    components: { HoneyToast },
-    template: `
-      <div>
-        <p class="text-base-foreground">HoneyToast is hidden when visible=false. Nothing appears at the bottom.</p>
-        
-        <HoneyToast :visible="false">
-          <template #default>
-            <div class="px-4 py-4">Content</div>
-          </template>
-          <template #footer>
-            <div class="h-12 px-4">Footer</div>
-          </template>
-        </HoneyToast>
-      </div>
-    `
-  })
-}

src/components/honeyToast/HoneyToast.test.ts

@@ -1,137 +0,0 @@
-import type { VueWrapper } from '@vue/test-utils'
-import { mount } from '@vue/test-utils'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { defineComponent, h, nextTick, ref } from 'vue'
-
-import HoneyToast from './HoneyToast.vue'
-
-describe('HoneyToast', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-    document.body.innerHTML = ''
-  })
-
-  function mountComponent(
-    props: { visible: boolean; expanded?: boolean } = { visible: true }
-  ): VueWrapper {
-    return mount(HoneyToast, {
-      props,
-      slots: {
-        default: (slotProps: { isExpanded: boolean }) =>
-          h(
-            'div',
-            { 'data-testid': 'content' },
-            slotProps.isExpanded ? 'expanded' : 'collapsed'
-          ),
-        footer: (slotProps: { isExpanded: boolean; toggle: () => void }) =>
-          h(
-            'button',
-            {
-              'data-testid': 'toggle-btn',
-              onClick: slotProps.toggle
-            },
-            slotProps.isExpanded ? 'Collapse' : 'Expand'
-          )
-      },
-      attachTo: document.body
-    })
-  }
-
-  it('renders when visible is true', async () => {
-    const wrapper = mountComponent({ visible: true })
-    await nextTick()
-
-    const toast = document.body.querySelector('[role="status"]')
-    expect(toast).toBeTruthy()
-
-    wrapper.unmount()
-  })
-
-  it('does not render when visible is false', async () => {
-    const wrapper = mountComponent({ visible: false })
-    await nextTick()
-
-    const toast = document.body.querySelector('[role="status"]')
-    expect(toast).toBeFalsy()
-
-    wrapper.unmount()
-  })
-
-  it('passes is-expanded=false to slots by default', async () => {
-    const wrapper = mountComponent({ visible: true })
-    await nextTick()
-
-    const content = document.body.querySelector('[data-testid="content"]')
-    expect(content?.textContent).toBe('collapsed')
-
-    wrapper.unmount()
-  })
-
-  it('applies collapsed max-height class when collapsed', async () => {
-    const wrapper = mountComponent({ visible: true, expanded: false })
-    await nextTick()
-
-    const expandableArea = document.body.querySelector(
-      '[role="status"] > div:first-child'
-    )
-    expect(expandableArea?.classList.contains('max-h-0')).toBe(true)
-
-    wrapper.unmount()
-  })
-
-  it('has aria-live="polite" for accessibility', async () => {
-    const wrapper = mountComponent({ visible: true })
-    await nextTick()
-
-    const toast = document.body.querySelector('[role="status"]')
-    expect(toast?.getAttribute('aria-live')).toBe('polite')
-
-    wrapper.unmount()
-  })
-
-  it('supports v-model:expanded with reactive parent state', async () => {
-    const TestWrapper = defineComponent({
-      components: { HoneyToast },
-      setup() {
-        const expanded = ref(false)
-        return { expanded }
-      },
-      template: `
-        <HoneyToast :visible="true" v-model:expanded="expanded">
-          <template #default="slotProps">
-            <div data-testid="content">{{ slotProps.isExpanded ? 'expanded' : 'collapsed' }}</div>
-          </template>
-          <template #footer="slotProps">
-            <button data-testid="toggle-btn" @click="slotProps.toggle">
-              {{ slotProps.isExpanded ? 'Collapse' : 'Expand' }}
-            </button>
-          </template>
-        </HoneyToast>
-      `
-    })
-
-    const wrapper = mount(TestWrapper, { attachTo: document.body })
-    await nextTick()
-
-    const content = document.body.querySelector('[data-testid="content"]')
-    expect(content?.textContent).toBe('collapsed')
-
-    const toggleBtn = document.body.querySelector(
-      '[data-testid="toggle-btn"]'
-    ) as HTMLButtonElement
-    expect(toggleBtn?.textContent?.trim()).toBe('Expand')
-
-    toggleBtn?.click()
-    await nextTick()
-
-    expect(content?.textContent).toBe('expanded')
-    expect(toggleBtn?.textContent?.trim()).toBe('Collapse')
-
-    const expandableArea = document.body.querySelector(
-      '[role="status"] > div:first-child'
-    )
-    expect(expandableArea?.classList.contains('max-h-[400px]')).toBe(true)
-
-    wrapper.unmount()
-  })
-})

src/components/honeyToast/HoneyToast.vue

@@ -1,46 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/utils/tailwindUtil'
-
-const { visible } = defineProps<{
-  visible: boolean
-}>()
-
-const isExpanded = defineModel<boolean>('expanded', { default: false })
-
-function toggle() {
-  isExpanded.value = !isExpanded.value
-}
-</script>
-
-<template>
-  <Teleport to="body">
-    <Transition
-      enter-active-class="transition-all duration-300 ease-out"
-      enter-from-class="translate-y-full opacity-0"
-      enter-to-class="translate-y-0 opacity-100"
-      leave-active-class="transition-all duration-200 ease-in"
-      leave-from-class="translate-y-0 opacity-100"
-      leave-to-class="translate-y-full opacity-0"
-    >
-      <div
-        v-if="visible"
-        role="status"
-        aria-live="polite"
-        class="fixed inset-x-0 bottom-6 z-9999 mx-auto w-4/5 max-w-3xl overflow-hidden rounded-lg border border-border-default bg-base-background shadow-lg"
-      >
-        <div
-          :class="
-            cn(
-              'overflow-hidden transition-all duration-300',
-              isExpanded ? 'max-h-[400px]' : 'max-h-0'
-            )
-          "
-        >
-          <slot :is-expanded />
-        </div>
-
-        <slot name="footer" :is-expanded :toggle />
-      </div>
-    </Transition>
-  </Teleport>
-</template>

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/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/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/toast/ProgressToastItem.stories.ts

@@ -1,95 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3-vite'
-
-import type { AssetDownload } from '@/stores/assetDownloadStore'
-
-import ProgressToastItem from './ProgressToastItem.vue'
-
-const meta: Meta<typeof ProgressToastItem> = {
-  title: 'Toast/ProgressToastItem',
-  component: ProgressToastItem,
-  parameters: {
-    layout: 'padded'
-  },
-  decorators: [
-    () => ({
-      template: '<div class="w-[400px] bg-base-background p-4"><story /></div>'
-    })
-  ]
-}
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-function createMockJob(overrides: Partial<AssetDownload> = {}): AssetDownload {
-  return {
-    taskId: 'task-1',
-    assetId: 'asset-1',
-    assetName: 'model-v1.safetensors',
-    bytesTotal: 1000000,
-    bytesDownloaded: 0,
-    progress: 0,
-    status: 'created',
-    lastUpdate: Date.now(),
-    ...overrides
-  }
-}
-
-export const Pending: Story = {
-  args: {
-    job: createMockJob({
-      status: 'created',
-      assetName: 'sd-xl-base-1.0.safetensors'
-    })
-  }
-}
-
-export const Running: Story = {
-  args: {
-    job: createMockJob({
-      status: 'running',
-      progress: 0.45,
-      assetName: 'lora-detail-enhancer.safetensors'
-    })
-  }
-}
-
-export const RunningAlmostComplete: Story = {
-  args: {
-    job: createMockJob({
-      status: 'running',
-      progress: 0.92,
-      assetName: 'vae-ft-mse-840000.safetensors'
-    })
-  }
-}
-
-export const Completed: Story = {
-  args: {
-    job: createMockJob({
-      status: 'completed',
-      progress: 1,
-      assetName: 'controlnet-canny.safetensors'
-    })
-  }
-}
-
-export const Failed: Story = {
-  args: {
-    job: createMockJob({
-      status: 'failed',
-      progress: 0.23,
-      assetName: 'unreachable-model.safetensors'
-    })
-  }
-}
-
-export const LongFileName: Story = {
-  args: {
-    job: createMockJob({
-      status: 'running',
-      progress: 0.67,
-      assetName:
-        'very-long-model-name-with-lots-of-descriptive-text-v2.1-final-release.safetensors'
-    })
-  }
-}

src/components/toast/ProgressToastItem.vue

@@ -1,65 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import StatusBadge from '@/components/common/StatusBadge.vue'
-import type { AssetDownload } from '@/stores/assetDownloadStore'
-import { cn } from '@/utils/tailwindUtil'
-
-const { job } = defineProps<{
-  job: AssetDownload
-}>()
-
-const { t } = useI18n()
-
-const progressPercent = computed(() => Math.round(job.progress * 100))
-const isCompleted = computed(() => job.status === 'completed')
-const isFailed = computed(() => job.status === 'failed')
-const isRunning = computed(() => job.status === 'running')
-const isPending = computed(() => job.status === 'created')
-</script>
-
-<template>
-  <div
-    :class="
-      cn(
-        'flex items-center justify-between rounded-lg bg-modal-card-background px-4 py-3',
-        isCompleted && 'opacity-50'
-      )
-    "
-  >
-    <div class="min-w-0 flex-1">
-      <span class="block truncate text-sm text-base-foreground">{{
-        job.assetName
-      }}</span>
-    </div>
-
-    <div class="flex flex-shrink-0 items-center gap-2">
-      <template v-if="isFailed">
-        <i
-          class="icon-[lucide--circle-alert] size-4 text-destructive-background"
-        />
-        <StatusBadge :label="t('progressToast.failed')" severity="danger" />
-      </template>
-
-      <template v-else-if="isCompleted">
-        <StatusBadge :label="t('progressToast.finished')" severity="contrast" />
-      </template>
-
-      <template v-else-if="isRunning">
-        <i
-          class="icon-[lucide--loader-circle] size-4 animate-spin text-base-foreground"
-        />
-        <span class="text-xs text-base-foreground">
-          {{ progressPercent }}%
-        </span>
-      </template>
-
-      <template v-else-if="isPending">
-        <span class="text-xs text-muted-foreground">
-          {{ t('progressToast.pending') }}
-        </span>
-      </template>
-    </div>
-  </div>
-</template>

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

@@ -2,7 +2,7 @@ import type { VariantProps } from 'cva'
 import { cva } from 'cva'
 
 export const buttonVariants = cva({
-  base: 'relative inline-flex items-center justify-center gap-2 cursor-pointer whitespace-nowrap appearance-none border-none rounded-md text-sm font-medium font-inter transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+  base: 'inline-flex items-center justify-center gap-2 cursor-pointer whitespace-nowrap appearance-none border-none rounded-md text-sm font-medium font-inter transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
   variants: {
     variant: {
       secondary:

src/components/ui/stepper/FormattedNumberStepper.vue

@@ -1,181 +0,0 @@
-<template>
-  <label
-    :for="inputId"
-    :class="
-      cn(
-        'flex h-10 cursor-text items-center rounded-lg bg-secondary-background text-secondary-foreground hover:bg-secondary-background-hover focus-within:ring-1 focus-within:ring-secondary-foreground',
-        disabled && 'opacity-50 pointer-events-none'
-      )
-    "
-  >
-    <button
-      type="button"
-      class="flex h-full w-8 cursor-pointer items-center justify-center rounded-l-lg border-none bg-transparent text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-secondary-foreground disabled:opacity-30"
-      :disabled="disabled || modelValue <= min"
-      :aria-label="$t('g.decrement')"
-      @click="handleStep(-1)"
-    >
-      <i class="icon-[lucide--minus] size-4" />
-    </button>
-    <div
-      class="flex flex-1 items-center justify-center gap-0.5 overflow-hidden"
-    >
-      <slot name="prefix" />
-      <input
-        :id="inputId"
-        ref="inputRef"
-        v-model="inputValue"
-        type="text"
-        inputmode="numeric"
-        :style="{ width: `${inputWidth}ch` }"
-        class="min-w-0 rounded border-none bg-transparent text-center text-base-foreground font-medium text-lg focus-visible:outline-none"
-        :disabled="disabled"
-        @input="handleInputChange"
-        @blur="handleInputBlur"
-        @focus="handleInputFocus"
-      />
-      <slot name="suffix" />
-    </div>
-    <button
-      type="button"
-      class="flex h-full w-8 cursor-pointer items-center justify-center rounded-r-lg border-none bg-transparent text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-secondary-foreground disabled:opacity-30"
-      :disabled="disabled || modelValue >= max"
-      :aria-label="$t('g.increment')"
-      @click="handleStep(1)"
-    >
-      <i class="icon-[lucide--plus] size-4" />
-    </button>
-  </label>
-</template>
-
-<script setup lang="ts">
-import { computed, ref, useId, watch } from 'vue'
-
-import { cn } from '@/utils/tailwindUtil'
-
-const {
-  min = 0,
-  max = Infinity,
-  step = 1,
-  formatOptions = { useGrouping: true },
-  disabled = false
-} = defineProps<{
-  min?: number
-  max?: number
-  step?: number | ((value: number) => number)
-  formatOptions?: Intl.NumberFormatOptions
-  disabled?: boolean
-}>()
-
-const emit = defineEmits<{
-  'max-reached': []
-}>()
-
-const modelValue = defineModel<number>({ required: true })
-
-const inputId = useId()
-const inputRef = ref<HTMLInputElement | null>(null)
-const inputValue = ref(formatNumber(modelValue.value))
-
-const inputWidth = computed(() =>
-  Math.min(Math.max(inputValue.value.length, 1) + 0.5, 9)
-)
-
-watch(modelValue, (newValue) => {
-  if (document.activeElement !== inputRef.value) {
-    inputValue.value = formatNumber(newValue)
-  }
-})
-
-function formatNumber(num: number): string {
-  return num.toLocaleString('en-US', formatOptions)
-}
-
-function parseFormattedNumber(str: string): number {
-  const cleaned = str.replace(/[^0-9]/g, '')
-  return cleaned === '' ? 0 : parseInt(cleaned, 10)
-}
-
-function clamp(value: number, minVal: number, maxVal: number): number {
-  return Math.min(Math.max(value, minVal), maxVal)
-}
-
-function formatWithCursor(
-  value: string,
-  cursorPos: number
-): { formatted: string; newCursor: number } {
-  const num = parseFormattedNumber(value)
-  const formatted = formatNumber(num)
-
-  const digitsBeforeCursor = value
-    .slice(0, cursorPos)
-    .replace(/[^0-9]/g, '').length
-
-  let digitCount = 0
-  let newCursor = 0
-  for (let i = 0; i < formatted.length; i++) {
-    if (/[0-9]/.test(formatted[i])) {
-      digitCount++
-    }
-    if (digitCount >= digitsBeforeCursor) {
-      newCursor = i + 1
-      break
-    }
-  }
-
-  if (digitCount < digitsBeforeCursor) {
-    newCursor = formatted.length
-  }
-
-  return { formatted, newCursor }
-}
-
-function getStepAmount(): number {
-  return typeof step === 'function' ? step(modelValue.value) : step
-}
-
-function handleInputChange(e: Event) {
-  const input = e.target as HTMLInputElement
-  const raw = input.value
-  const cursorPos = input.selectionStart ?? raw.length
-  const num = parseFormattedNumber(raw)
-
-  const clamped = Math.min(num, max)
-  const wasClamped = num > max
-
-  if (wasClamped) {
-    emit('max-reached')
-  }
-
-  modelValue.value = clamped
-
-  const { formatted, newCursor } = formatWithCursor(
-    wasClamped ? formatNumber(clamped) : raw,
-    wasClamped ? formatNumber(clamped).length : cursorPos
-  )
-  inputValue.value = formatted
-
-  requestAnimationFrame(() => {
-    inputRef.value?.setSelectionRange(newCursor, newCursor)
-  })
-}
-
-function handleInputBlur() {
-  const clamped = clamp(modelValue.value, min, max)
-  modelValue.value = clamped
-  inputValue.value = formatNumber(clamped)
-}
-
-function handleInputFocus(e: FocusEvent) {
-  const input = e.target as HTMLInputElement
-  const len = input.value.length
-  input.setSelectionRange(len, len)
-}
-
-function handleStep(direction: 1 | -1) {
-  const stepAmount = getStepAmount()
-  const newValue = clamp(modelValue.value + stepAmount * direction, min, max)
-  modelValue.value = newValue
-  inputValue.value = formatNumber(newValue)
-}
-</script>

src/components/widget/layout/BaseModalLayout.vue

@@ -13,11 +13,10 @@
       <i class="icon-[lucide--panel-right] text-sm" />
     </Button>
     <Button
-      size="lg"
-      class="absolute top-4 right-6 z-10 transition-opacity duration-200 w-10"
+      class="absolute top-4 right-6 z-10 transition-opacity duration-200"
       @click="closeDialog"
     >
-      <i class="pi pi-times" />
+      <i class="pi pi-times text-sm"></i>
     </Button>
     <div class="flex h-full w-full">
       <Transition name="slide-panel">
@@ -81,9 +80,7 @@
             >
               {{ contentTitle }}
             </h2>
-            <div
-              class="min-h-0 flex-1 px-6 pt-0 pb-10 overflow-y-auto scrollbar-custom"
-            >
+            <div class="min-h-0 px-6 pt-0 pb-10 overflow-y-auto">
               <slot name="content"></slot>
             </div>
           </main>

src/components/widget/nav/NavIcon.vue

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

src/components/widget/nav/NavItem.vue

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

@@ -75,7 +75,6 @@ export interface VueNodeData {
   hasErrors?: boolean
   inputs?: INodeInputSlot[]
   outputs?: INodeOutputSlot[]
-  resizable?: boolean
   shape?: number
   subgraphId?: string | null
   titleMode?: TitleMode
@@ -245,10 +244,17 @@ export function useGraphNodeManager(graph: LGraph): GraphNodeManager {
     })
 
     // Update only widgets with new slot metadata, keeping other widget data intact
-    for (const widget of currentData.widgets ?? []) {
+    const updatedWidgets = currentData.widgets?.map((widget) => {
       const slotInfo = slotMetadata.get(widget.name)
-      if (slotInfo) widget.slotMetadata = slotInfo
-    }
+      return slotInfo ? { ...widget, slotMetadata: slotInfo } : widget
+    })
+
+    vueNodeData.set(nodeId, {
+      ...currentData,
+      widgets: updatedWidgets,
+      inputs: nodeRef.inputs ? [...nodeRef.inputs] : undefined,
+      outputs: nodeRef.outputs ? [...nodeRef.outputs] : undefined
+    })
   }
 
   // Extract safe data from LiteGraph node for Vue consumption
@@ -319,7 +325,6 @@ export function useGraphNodeManager(graph: LGraph): GraphNodeManager {
       flags: node.flags ? { ...node.flags } : undefined,
       color: node.color || undefined,
       bgcolor: node.bgcolor || undefined,
-      resizable: node.resizable,
       shape: node.shape
     }
   }

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

@@ -1664,41 +1664,31 @@ describe('useNodePricing', () => {
           {
             model: 'gemini-2.5-pro-preview-05-06',
             expected: creditsListLabel([0.00125, 0.01], {
-              suffix: ' per 1K tokens',
-              approximate: true,
-              separator: '-'
+              suffix: ' per 1K tokens'
             })
           },
           {
             model: 'gemini-2.5-pro',
             expected: creditsListLabel([0.00125, 0.01], {
-              suffix: ' per 1K tokens',
-              approximate: true,
-              separator: '-'
+              suffix: ' per 1K tokens'
             })
           },
           {
             model: 'gemini-3-pro-preview',
             expected: creditsListLabel([0.002, 0.012], {
-              suffix: ' per 1K tokens',
-              approximate: true,
-              separator: '-'
+              suffix: ' per 1K tokens'
             })
           },
           {
             model: 'gemini-2.5-flash-preview-04-17',
             expected: creditsListLabel([0.0003, 0.0025], {
-              suffix: ' per 1K tokens',
-              approximate: true,
-              separator: '-'
+              suffix: ' per 1K tokens'
             })
           },
           {
             model: 'gemini-2.5-flash',
             expected: creditsListLabel([0.0003, 0.0025], {
-              suffix: ' per 1K tokens',
-              approximate: true,
-              separator: '-'
+              suffix: ' per 1K tokens'
             })
           },
           { model: 'unknown-gemini-model', expected: 'Token-based' }
@@ -1712,6 +1702,16 @@ describe('useNodePricing', () => {
         })
       })
 
+      it('should return per-second pricing for Gemini Veo models', () => {
+        const { getNodeDisplayPrice } = useNodePricing()
+        const node = createMockNode('GeminiNode', [
+          { name: 'model', value: 'veo-2.0-generate-001' }
+        ])
+
+        const price = getNodeDisplayPrice(node)
+        expect(price).toBe(creditsLabel(0.5, { suffix: '/second' }))
+      })
+
       it('should return fallback for GeminiNode without model widget', () => {
         const { getNodeDisplayPrice } = useNodePricing()
         const node = createMockNode('GeminiNode', [])
@@ -1737,97 +1737,73 @@ describe('useNodePricing', () => {
           {
             model: 'o4-mini',
             expected: creditsListLabel([0.0011, 0.0044], {
-              suffix: ' per 1K tokens',
-              approximate: true,
-              separator: '-'
+              suffix: ' per 1K tokens'
             })
           },
           {
             model: 'o1-pro',
             expected: creditsListLabel([0.15, 0.6], {
-              suffix: ' per 1K tokens',
-              approximate: true,
-              separator: '-'
+              suffix: ' per 1K tokens'
             })
           },
           {
             model: 'o1',
             expected: creditsListLabel([0.015, 0.06], {
-              suffix: ' per 1K tokens',
-              approximate: true,
-              separator: '-'
+              suffix: ' per 1K tokens'
             })
           },
           {
             model: 'o3-mini',
             expected: creditsListLabel([0.0011, 0.0044], {
-              suffix: ' per 1K tokens',
-              approximate: true,
-              separator: '-'
+              suffix: ' per 1K tokens'
             })
           },
           {
             model: 'o3',
             expected: creditsListLabel([0.01, 0.04], {
-              suffix: ' per 1K tokens',
-              approximate: true,
-              separator: '-'
+              suffix: ' per 1K tokens'
             })
           },
           {
             model: 'gpt-4o',
             expected: creditsListLabel([0.0025, 0.01], {
-              suffix: ' per 1K tokens',
-              approximate: true,
-              separator: '-'
+              suffix: ' per 1K tokens'
             })
           },
           {
             model: 'gpt-4.1-nano',
             expected: creditsListLabel([0.0001, 0.0004], {
-              suffix: ' per 1K tokens',
-              approximate: true,
-              separator: '-'
+              suffix: ' per 1K tokens'
             })
           },
           {
             model: 'gpt-4.1-mini',
             expected: creditsListLabel([0.0004, 0.0016], {
-              suffix: ' per 1K tokens',
-              approximate: true,
-              separator: '-'
+              suffix: ' per 1K tokens'
             })
           },
           {
             model: 'gpt-4.1',
             expected: creditsListLabel([0.002, 0.008], {
-              suffix: ' per 1K tokens',
-              approximate: true,
-              separator: '-'
+              suffix: ' per 1K tokens'
             })
           },
           {
             model: 'gpt-5-nano',
             expected: creditsListLabel([0.00005, 0.0004], {
-              suffix: ' per 1K tokens',
-              approximate: true,
-              separator: '-'
+              suffix: ' per 1K tokens'
             })
           },
           {
             model: 'gpt-5-mini',
             expected: creditsListLabel([0.00025, 0.002], {
-              suffix: ' per 1K tokens',
-              approximate: true,
-              separator: '-'
+              suffix: ' per 1K tokens'
             })
           },
           {
             model: 'gpt-5',
             expected: creditsListLabel([0.00125, 0.01], {
-              suffix: ' per 1K tokens',
-              approximate: true,
-              separator: '-'
+              suffix: ' per 1K tokens'
             })
           }
         ]
@@ -1848,49 +1824,37 @@ describe('useNodePricing', () => {
           {
             model: 'gpt-4.1-nano-test',
             expected: creditsListLabel([0.0001, 0.0004], {
-              suffix: ' per 1K tokens',
-              approximate: true,
-              separator: '-'
+              suffix: ' per 1K tokens'
             })
           },
           {
             model: 'gpt-4.1-mini-test',
             expected: creditsListLabel([0.0004, 0.0016], {
-              suffix: ' per 1K tokens',
-              approximate: true,
-              separator: '-'
+              suffix: ' per 1K tokens'
             })
           },
           {
             model: 'gpt-4.1-test',
             expected: creditsListLabel([0.002, 0.008], {
-              suffix: ' per 1K tokens',
-              approximate: true,
-              separator: '-'
+              suffix: ' per 1K tokens'
             })
           },
           {
             model: 'o1-pro-test',
             expected: creditsListLabel([0.15, 0.6], {
-              suffix: ' per 1K tokens',
-              approximate: true,
-              separator: '-'
+              suffix: ' per 1K tokens'
             })
           },
           {
             model: 'o1-test',
             expected: creditsListLabel([0.015, 0.06], {
-              suffix: ' per 1K tokens',
-              approximate: true,
-              separator: '-'
+              suffix: ' per 1K tokens'
             })
           },
           {
             model: 'o3-mini-test',
             expected: creditsListLabel([0.0011, 0.0044], {
-              suffix: ' per 1K tokens',
-              approximate: true,
-              separator: '-'
+              suffix: ' per 1K tokens'
             })
           },
           { model: 'unknown-model', expected: 'Token-based' }

src/composables/node/useNodePricing.ts

@@ -1823,35 +1823,28 @@ const apiNodeCosts: Record<string, { displayPrice: string | PricingFunction }> =
 
         const model = String(modelWidget.value)
 
-        if (model.includes('gemini-2.5-flash-preview-04-17')) {
+        // Google Veo video generation
+        if (model.includes('veo-2.0')) {
+          return formatCreditsLabel(0.5, { suffix: '/second' })
+        } else if (model.includes('gemini-2.5-flash-preview-04-17')) {
           return formatCreditsListLabel([0.0003, 0.0025], {
-            suffix: ' per 1K tokens',
-            approximate: true,
-            separator: '-'
+            suffix: ' per 1K tokens'
           })
         } else if (model.includes('gemini-2.5-flash')) {
           return formatCreditsListLabel([0.0003, 0.0025], {
-            suffix: ' per 1K tokens',
-            approximate: true,
-            separator: '-'
+            suffix: ' per 1K tokens'
           })
         } else if (model.includes('gemini-2.5-pro-preview-05-06')) {
           return formatCreditsListLabel([0.00125, 0.01], {
-            suffix: ' per 1K tokens',
-            approximate: true,
-            separator: '-'
+            suffix: ' per 1K tokens'
           })
         } else if (model.includes('gemini-2.5-pro')) {
           return formatCreditsListLabel([0.00125, 0.01], {
-            suffix: ' per 1K tokens',
-            approximate: true,
-            separator: '-'
+            suffix: ' per 1K tokens'
           })
         } else if (model.includes('gemini-3-pro-preview')) {
           return formatCreditsListLabel([0.002, 0.012], {
-            suffix: ' per 1K tokens',
-            approximate: true,
-            separator: '-'
+            suffix: ' per 1K tokens'
           })
         }
         // For other Gemini models, show token-based pricing info
@@ -1906,75 +1899,51 @@ const apiNodeCosts: Record<string, { displayPrice: string | PricingFunction }> =
         // Specific pricing for exposed models based on official pricing data (converted to per 1K tokens)
         if (model.includes('o4-mini')) {
           return formatCreditsListLabel([0.0011, 0.0044], {
-            suffix: ' per 1K tokens',
-            approximate: true,
-            separator: '-'
+            suffix: ' per 1K tokens'
           })
         } else if (model.includes('o1-pro')) {
           return formatCreditsListLabel([0.15, 0.6], {
-            suffix: ' per 1K tokens',
-            approximate: true,
-            separator: '-'
+            suffix: ' per 1K tokens'
           })
         } else if (model.includes('o1')) {
           return formatCreditsListLabel([0.015, 0.06], {
-            suffix: ' per 1K tokens',
-            approximate: true,
-            separator: '-'
+            suffix: ' per 1K tokens'
           })
         } else if (model.includes('o3-mini')) {
           return formatCreditsListLabel([0.0011, 0.0044], {
-            suffix: ' per 1K tokens',
-            approximate: true,
-            separator: '-'
+            suffix: ' per 1K tokens'
           })
         } else if (model.includes('o3')) {
           return formatCreditsListLabel([0.01, 0.04], {
-            suffix: ' per 1K tokens',
-            approximate: true,
-            separator: '-'
+            suffix: ' per 1K tokens'
           })
         } else if (model.includes('gpt-4o')) {
           return formatCreditsListLabel([0.0025, 0.01], {
-            suffix: ' per 1K tokens',
-            approximate: true,
-            separator: '-'
+            suffix: ' per 1K tokens'
           })
         } else if (model.includes('gpt-4.1-nano')) {
           return formatCreditsListLabel([0.0001, 0.0004], {
-            suffix: ' per 1K tokens',
-            approximate: true,
-            separator: '-'
+            suffix: ' per 1K tokens'
           })
         } else if (model.includes('gpt-4.1-mini')) {
           return formatCreditsListLabel([0.0004, 0.0016], {
-            suffix: ' per 1K tokens',
-            approximate: true,
-            separator: '-'
+            suffix: ' per 1K tokens'
           })
         } else if (model.includes('gpt-4.1')) {
           return formatCreditsListLabel([0.002, 0.008], {
-            suffix: ' per 1K tokens',
-            approximate: true,
-            separator: '-'
+            suffix: ' per 1K tokens'
           })
         } else if (model.includes('gpt-5-nano')) {
           return formatCreditsListLabel([0.00005, 0.0004], {
-            suffix: ' per 1K tokens',
-            approximate: true,
-            separator: '-'
+            suffix: ' per 1K tokens'
           })
         } else if (model.includes('gpt-5-mini')) {
           return formatCreditsListLabel([0.00025, 0.002], {
-            suffix: ' per 1K tokens',
-            approximate: true,
-            separator: '-'
+            suffix: ' per 1K tokens'
           })
         } else if (model.includes('gpt-5')) {
           return formatCreditsListLabel([0.00125, 0.01], {
-            suffix: ' per 1K tokens',
-            approximate: true,
-            separator: '-'
+            suffix: ' per 1K tokens'
           })
         }
         return 'Token-based'
@@ -2132,267 +2101,6 @@ const apiNodeCosts: Record<string, { displayPrice: string | PricingFunction }> =
     },
     LtxvApiImageToVideo: {
       displayPrice: ltxvPricingCalculator
-    },
-    WanReferenceVideoApi: {
-      displayPrice: (node: LGraphNode): string => {
-        const durationWidget = node.widgets?.find(
-          (w) => w.name === 'duration'
-        ) as IComboWidget
-        const sizeWidget = node.widgets?.find(
-          (w) => w.name === 'size'
-        ) as IComboWidget
-
-        if (!durationWidget || !sizeWidget) {
-          return formatCreditsRangeLabel(0.7, 1.5, {
-            note: '(varies with size & duration)'
-          })
-        }
-
-        const seconds = parseFloat(String(durationWidget.value))
-        const sizeStr = String(sizeWidget.value).toLowerCase()
-
-        const rate = sizeStr.includes('1080p') ? 0.15 : 0.1
-        const inputMin = 2 * rate
-        const inputMax = 5 * rate
-        const outputPrice = seconds * rate
-
-        const minTotal = inputMin + outputPrice
-        const maxTotal = inputMax + outputPrice
-
-        return formatCreditsRangeLabel(minTotal, maxTotal)
-      }
-    },
-    Vidu2TextToVideoNode: {
-      displayPrice: (node: LGraphNode): string => {
-        const durationWidget = node.widgets?.find(
-          (w) => w.name === 'duration'
-        ) as IComboWidget
-        const resolutionWidget = node.widgets?.find(
-          (w) => w.name === 'resolution'
-        ) as IComboWidget
-
-        if (!durationWidget || !resolutionWidget) {
-          return formatCreditsRangeLabel(0.075, 0.6, {
-            note: '(varies with duration & resolution)'
-          })
-        }
-
-        const duration = parseFloat(String(durationWidget.value))
-        const resolution = String(resolutionWidget.value).toLowerCase()
-
-        // Text-to-Video uses Q2 model only
-        // 720P: Starts at $0.075, +$0.025/sec
-        // 1080P: Starts at $0.10, +$0.05/sec
-        let basePrice: number
-        let pricePerSecond: number
-
-        if (resolution.includes('1080')) {
-          basePrice = 0.1
-          pricePerSecond = 0.05
-        } else {
-          // 720P default
-          basePrice = 0.075
-          pricePerSecond = 0.025
-        }
-
-        if (!Number.isFinite(duration) || duration <= 0) {
-          return formatCreditsRangeLabel(0.075, 0.6, {
-            note: '(varies with duration & resolution)'
-          })
-        }
-
-        const cost = basePrice + pricePerSecond * (duration - 1)
-        return formatCreditsLabel(cost)
-      }
-    },
-    Vidu2ImageToVideoNode: {
-      displayPrice: (node: LGraphNode): string => {
-        const modelWidget = node.widgets?.find(
-          (w) => w.name === 'model'
-        ) as IComboWidget
-        const durationWidget = node.widgets?.find(
-          (w) => w.name === 'duration'
-        ) as IComboWidget
-        const resolutionWidget = node.widgets?.find(
-          (w) => w.name === 'resolution'
-        ) as IComboWidget
-
-        if (!modelWidget || !durationWidget || !resolutionWidget) {
-          return formatCreditsRangeLabel(0.04, 1.0, {
-            note: '(varies with model, duration & resolution)'
-          })
-        }
-
-        const model = String(modelWidget.value).toLowerCase()
-        const duration = parseFloat(String(durationWidget.value))
-        const resolution = String(resolutionWidget.value).toLowerCase()
-        const is1080p = resolution.includes('1080')
-
-        let basePrice: number
-        let pricePerSecond: number
-
-        if (model.includes('q2-pro-fast')) {
-          // Q2-pro-fast: 720P $0.04+$0.01/sec, 1080P $0.08+$0.02/sec
-          basePrice = is1080p ? 0.08 : 0.04
-          pricePerSecond = is1080p ? 0.02 : 0.01
-        } else if (model.includes('q2-pro')) {
-          // Q2-pro: 720P $0.075+$0.05/sec, 1080P $0.275+$0.075/sec
-          basePrice = is1080p ? 0.275 : 0.075
-          pricePerSecond = is1080p ? 0.075 : 0.05
-        } else if (model.includes('q2-turbo')) {
-          // Q2-turbo: 720P special pricing, 1080P $0.175+$0.05/sec
-          if (is1080p) {
-            basePrice = 0.175
-            pricePerSecond = 0.05
-          } else {
-            // 720P: $0.04 at 1s, $0.05 at 2s, +$0.05/sec beyond 2s
-            if (duration <= 1) {
-              return formatCreditsLabel(0.04)
-            }
-            if (duration <= 2) {
-              return formatCreditsLabel(0.05)
-            }
-            const cost = 0.05 + 0.05 * (duration - 2)
-            return formatCreditsLabel(cost)
-          }
-        } else {
-          return formatCreditsRangeLabel(0.04, 1.0, {
-            note: '(varies with model, duration & resolution)'
-          })
-        }
-
-        if (!Number.isFinite(duration) || duration <= 0) {
-          return formatCreditsRangeLabel(0.04, 1.0, {
-            note: '(varies with model, duration & resolution)'
-          })
-        }
-
-        const cost = basePrice + pricePerSecond * (duration - 1)
-        return formatCreditsLabel(cost)
-      }
-    },
-    Vidu2ReferenceVideoNode: {
-      displayPrice: (node: LGraphNode): string => {
-        const durationWidget = node.widgets?.find(
-          (w) => w.name === 'duration'
-        ) as IComboWidget
-        const resolutionWidget = node.widgets?.find(
-          (w) => w.name === 'resolution'
-        ) as IComboWidget
-        const audioWidget = node.widgets?.find(
-          (w) => w.name === 'audio'
-        ) as IComboWidget
-
-        if (!durationWidget) {
-          return formatCreditsRangeLabel(0.125, 1.5, {
-            note: '(varies with duration, resolution & audio)'
-          })
-        }
-
-        const duration = parseFloat(String(durationWidget.value))
-        const resolution = String(resolutionWidget?.value ?? '').toLowerCase()
-        const is1080p = resolution.includes('1080')
-
-        // Check if audio is enabled (adds $0.75)
-        const audioValue = audioWidget?.value
-        const hasAudio =
-          audioValue !== undefined &&
-          audioValue !== null &&
-          String(audioValue).toLowerCase() !== 'false' &&
-          String(audioValue).toLowerCase() !== 'none' &&
-          audioValue !== ''
-
-        // Reference-to-Video uses Q2 model
-        // 720P: Starts at $0.125, +$0.025/sec
-        // 1080P: Starts at $0.375, +$0.05/sec
-        let basePrice: number
-        let pricePerSecond: number
-
-        if (is1080p) {
-          basePrice = 0.375
-          pricePerSecond = 0.05
-        } else {
-          // 720P default
-          basePrice = 0.125
-          pricePerSecond = 0.025
-        }
-
-        let cost = basePrice
-        if (Number.isFinite(duration) && duration > 0) {
-          cost = basePrice + pricePerSecond * (duration - 1)
-        }
-
-        // Audio adds $0.75 on top
-        if (hasAudio) {
-          cost += 0.075
-        }
-
-        return formatCreditsLabel(cost)
-      }
-    },
-    Vidu2StartEndToVideoNode: {
-      displayPrice: (node: LGraphNode): string => {
-        const modelWidget = node.widgets?.find(
-          (w) => w.name === 'model'
-        ) as IComboWidget
-        const durationWidget = node.widgets?.find(
-          (w) => w.name === 'duration'
-        ) as IComboWidget
-        const resolutionWidget = node.widgets?.find(
-          (w) => w.name === 'resolution'
-        ) as IComboWidget
-
-        if (!modelWidget || !durationWidget || !resolutionWidget) {
-          return formatCreditsRangeLabel(0.04, 1.0, {
-            note: '(varies with model, duration & resolution)'
-          })
-        }
-
-        const model = String(modelWidget.value).toLowerCase()
-        const duration = parseFloat(String(durationWidget.value))
-        const resolution = String(resolutionWidget.value).toLowerCase()
-        const is1080p = resolution.includes('1080')
-
-        let basePrice: number
-        let pricePerSecond: number
-
-        if (model.includes('q2-pro-fast')) {
-          // Q2-pro-fast: 720P $0.04+$0.01/sec, 1080P $0.08+$0.02/sec
-          basePrice = is1080p ? 0.08 : 0.04
-          pricePerSecond = is1080p ? 0.02 : 0.01
-        } else if (model.includes('q2-pro')) {
-          // Q2-pro: 720P $0.075+$0.05/sec, 1080P $0.275+$0.075/sec
-          basePrice = is1080p ? 0.275 : 0.075
-          pricePerSecond = is1080p ? 0.075 : 0.05
-        } else if (model.includes('q2-turbo')) {
-          // Q2-turbo: 720P special pricing, 1080P $0.175+$0.05/sec
-          if (is1080p) {
-            basePrice = 0.175
-            pricePerSecond = 0.05
-          } else {
-            // 720P: $0.04 at 1s, $0.05 at 2s, +$0.05/sec beyond 2s
-            if (!Number.isFinite(duration) || duration <= 1) {
-              return formatCreditsLabel(0.04)
-            }
-            if (duration <= 2) {
-              return formatCreditsLabel(0.05)
-            }
-            const cost = 0.05 + 0.05 * (duration - 2)
-            return formatCreditsLabel(cost)
-          }
-        } else {
-          return formatCreditsRangeLabel(0.04, 1.0, {
-            note: '(varies with model, duration & resolution)'
-          })
-        }
-
-        if (!Number.isFinite(duration) || duration <= 0) {
-          return formatCreditsLabel(basePrice)
-        }
-
-        const cost = basePrice + pricePerSecond * (duration - 1)
-        return formatCreditsLabel(cost)
-      }
     }
   }
 
@@ -2546,13 +2254,8 @@ export const useNodePricing = () => {
       ByteDanceImageReferenceNode: ['model', 'duration', 'resolution'],
       WanTextToVideoApi: ['duration', 'size'],
       WanImageToVideoApi: ['duration', 'resolution'],
-      WanReferenceVideoApi: ['duration', 'size'],
       LtxvApiTextToVideo: ['model', 'duration', 'resolution'],
-      LtxvApiImageToVideo: ['model', 'duration', 'resolution'],
-      Vidu2TextToVideoNode: ['model', 'duration', 'resolution'],
-      Vidu2ImageToVideoNode: ['model', 'duration', 'resolution'],
-      Vidu2ReferenceVideoNode: ['audio', 'duration', 'resolution'],
-      Vidu2StartEndToVideoNode: ['model', 'duration', 'resolution']
+      LtxvApiImageToVideo: ['model', 'duration', 'resolution']
     }
     return widgetMap[nodeType] || []
   }

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'
@@ -423,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',
@@ -881,6 +897,15 @@ export function useCoreCommands(): ComfyCommand[] {
         })
       }
     },
+    {
+      id: 'Comfy.Manager.ToggleManagerProgressDialog',
+      icon: 'pi pi-spinner',
+      label: 'Toggle the Custom Nodes Manager Progress Bar',
+      versionAdded: '1.13.9',
+      function: () => {
+        dialogService.toggleManagerProgressDialog()
+      }
+    },
     {
       id: 'Comfy.User.OpenSignInDialog',
       icon: 'pi pi-user',

src/composables/useFeatureFlags.ts

@@ -11,12 +11,10 @@ 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_DELETION_ENABLED = 'asset_deletion_enabled',
-  ASSET_RENAME_ENABLED = 'asset_rename_enabled',
+  ASSET_UPDATE_OPTIONS_ENABLED = 'asset_update_options_enabled',
   PRIVATE_MODELS_ENABLED = 'private_models_enabled',
   ONBOARDING_SURVEY_ENABLED = 'onboarding_survey_enabled',
-  HUGGINGFACE_MODEL_IMPORT_ENABLED = 'huggingface_model_import_enabled',
-  ASYNC_MODEL_UPLOAD_ENABLED = 'async_model_upload_enabled'
+  HUGGINGFACE_MODEL_IMPORT_ENABLED = 'huggingface_model_import_enabled'
 }
 
 /**
@@ -43,16 +41,14 @@ export function useFeatureFlags() {
         )
       )
     },
-    get assetDeletionEnabled() {
+    get assetUpdateOptionsEnabled() {
+      // Check remote config first (from /api/features), fall back to websocket feature flags
       return (
-        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)
+        remoteConfig.value.asset_update_options_enabled ??
+        api.getServerFeature(
+          ServerFeatureFlag.ASSET_UPDATE_OPTIONS_ENABLED,
+          false
+        )
       )
     },
     get privateModelsEnabled() {
@@ -69,6 +65,7 @@ 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(
@@ -76,15 +73,6 @@ 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

@@ -117,7 +117,9 @@ describe('useLoad3d', () => {
       }
     }
 
-    vi.mocked(Load3d).mockImplementation(() => mockLoad3d)
+    vi.mocked(Load3d).mockImplementation(function () {
+      Object.assign(this, mockLoad3d)
+    })
 
     mockToastStore = {
       addAlert: vi.fn()
@@ -289,7 +291,7 @@ describe('useLoad3d', () => {
     })
 
     it('should handle initialization errors', async () => {
-      vi.mocked(Load3d).mockImplementationOnce(() => {
+      vi.mocked(Load3d).mockImplementationOnce(function () {
         throw new Error('Load3d creation failed')
       })
 

src/composables/useLoad3d.ts

@@ -60,6 +60,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)
@@ -357,6 +359,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 = ''
@@ -514,6 +523,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) {
@@ -573,6 +590,8 @@ export const useLoad3d = (nodeOrRef: MaybeRef<LGraphNode | null>) => {
     playing,
     selectedSpeed,
     selectedAnimation,
+    animationProgress,
+    animationDuration,
     loading,
     loadingMessage,
 
@@ -585,6 +604,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/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)
-    for (const widget of remove(node.widgets, isInGroup)) widget.onRemove?.()
+    remove(node.widgets, isInGroup)
 
     if (!newSpec) return
 
@@ -341,16 +341,10 @@ function applyMatchType(node: LGraphNode, inputSpec: InputSpecV2) {
   //TODO: instead apply on output add?
   //ensure outputs get updated
   const index = node.inputs.length - 1
-  requestAnimationFrame(() => {
-    const input = node.inputs.at(index)!
-    node.onConnectionsChange?.(
-      LiteGraph.INPUT,
-      index,
-      !!input.link,
-      input.link ? node.graph?.links?.[input.link] : undefined,
-      input
-    )
-  })
+  const input = node.inputs.at(-1)!
+  requestAnimationFrame(() =>
+    node.onConnectionsChange(LiteGraph.INPUT, index, false, undefined, input)
+  )
 }
 
 function autogrowOrdinalToName(
@@ -488,8 +482,7 @@ function autogrowInputDisconnected(index: number, node: AutogrowNode) {
   for (const input of toRemove) {
     const widgetName = input?.widget?.name
     if (!widgetName) continue
-    for (const widget of remove(node.widgets, (w) => w.name === widgetName))
-      widget.onRemove?.()
+    remove(node.widgets, (w) => w.name === widgetName)
   }
   node.size[1] = node.computeSize([...node.size])[1]
 }

src/extensions/core/load3d/AnimationManager.ts

@@ -125,6 +125,13 @@ export class AnimationManager implements AnimationManagerInterface {
     }
 
     this.animationActions = [action]
+
+    // Emit initial progress to set duration
+    this.eventManager.emitEvent('animationProgressChange', {
+      progress: 0,
+      currentTime: 0,
+      duration: clip.duration
+    })
   }
 
   toggleAnimation(play?: boolean): void {
@@ -150,8 +157,58 @@ export class AnimationManager implements AnimationManagerInterface {
   update(delta: number): void {
     if (this.currentAnimation && this.isAnimationPlaying) {
       this.currentAnimation.update(delta)
+
+      if (this.animationActions.length > 0) {
+        const action = this.animationActions[0]
+        const clip = action.getClip()
+        const progress = (action.time / clip.duration) * 100
+        this.eventManager.emitEvent('animationProgressChange', {
+          progress,
+          currentTime: action.time,
+          duration: clip.duration
+        })
+      }
     }
   }
 
+  getAnimationTime(): number {
+    if (this.animationActions.length === 0) return 0
+    return this.animationActions[0].time
+  }
+
+  getAnimationDuration(): number {
+    if (this.animationActions.length === 0) return 0
+    return this.animationActions[0].getClip().duration
+  }
+
+  setAnimationTime(time: number): void {
+    if (this.animationActions.length === 0) return
+    const duration = this.getAnimationDuration()
+    const clampedTime = Math.max(0, Math.min(time, duration))
+
+    // Temporarily unpause to allow time update, then restore
+    const wasPaused = this.animationActions.map((action) => action.paused)
+    this.animationActions.forEach((action) => {
+      action.paused = false
+      action.time = clampedTime
+    })
+
+    if (this.currentAnimation) {
+      this.currentAnimation.setTime(clampedTime)
+      this.currentAnimation.update(0)
+    }
+
+    // Restore paused state
+    this.animationActions.forEach((action, i) => {
+      action.paused = wasPaused[i]
+    })
+
+    this.eventManager.emitEvent('animationProgressChange', {
+      progress: (clampedTime / duration) * 100,
+      currentTime: clampedTime,
+      duration
+    })
+  }
+
   reset(): void {}
 }

src/extensions/core/load3d/Load3d.ts

@@ -727,6 +727,19 @@ class Load3d {
     return this.animationManager.animationClips.length > 0
   }
 
+  public getAnimationTime(): number {
+    return this.animationManager.getAnimationTime()
+  }
+
+  public getAnimationDuration(): number {
+    return this.animationManager.getAnimationDuration()
+  }
+
+  public setAnimationTime(time: number): void {
+    this.animationManager.setAnimationTime(time)
+    this.forceRender()
+  }
+
   public remove(): void {
     if (this.contextMenuAbortController) {
       this.contextMenuAbortController.abort()

src/extensions/core/load3d/Load3dUtils.ts

@@ -34,9 +34,26 @@ class Load3dUtils {
     return await resp.json()
   }
 
+  static readonly MAX_UPLOAD_SIZE_MB = 100
+
   static async uploadFile(file: File, subfolder: string) {
     let uploadPath
 
+    const fileSizeMB = file.size / 1024 / 1024
+    if (fileSizeMB > this.MAX_UPLOAD_SIZE_MB) {
+      const message = t('toastMessages.fileTooLarge', {
+        size: fileSizeMB.toFixed(1),
+        maxSize: this.MAX_UPLOAD_SIZE_MB
+      })
+      console.warn(
+        '[Load3D] uploadFile: file too large',
+        fileSizeMB.toFixed(2),
+        'MB'
+      )
+      useToastStore().addAlert(message)
+      return undefined
+    }
+
     try {
       const body = new FormData()
       body.append('image', file)
@@ -61,7 +78,7 @@ class Load3dUtils {
         useToastStore().addAlert(resp.status + ' - ' + resp.statusText)
       }
     } catch (error) {
-      console.error('Upload error:', error)
+      console.error('[Load3D] uploadFile: exception', error)
       useToastStore().addAlert(
         error instanceof Error
           ? error.message

src/extensions/core/load3d/LoaderManager.ts

@@ -3,9 +3,10 @@ import * as THREE from 'three'
 import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader'
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
 import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader'
-import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader'
 import { PLYLoader } from 'three/examples/jsm/loaders/PLYLoader'
 import { STLLoader } from 'three/examples/jsm/loaders/STLLoader'
+import { MtlObjBridge, OBJLoader2Parallel } from 'wwobjloader2'
+import OBJLoader2WorkerUrl from 'wwobjloader2/worker?url'
 
 import { t } from '@/i18n'
 import { useSettingStore } from '@/platform/settings/settingStore'
@@ -22,7 +23,7 @@ import { FastPLYLoader } from './loader/FastPLYLoader'
 
 export class LoaderManager implements LoaderManagerInterface {
   gltfLoader: GLTFLoader
-  objLoader: OBJLoader
+  objLoader: OBJLoader2Parallel
   mtlLoader: MTLLoader
   fbxLoader: FBXLoader
   stlLoader: STLLoader
@@ -41,7 +42,12 @@ export class LoaderManager implements LoaderManagerInterface {
     this.eventManager = eventManager
 
     this.gltfLoader = new GLTFLoader()
-    this.objLoader = new OBJLoader()
+    this.objLoader = new OBJLoader2Parallel()
+    // Set worker URL for Vite compatibility
+    this.objLoader.setWorkerUrl(
+      true,
+      new URL(OBJLoader2WorkerUrl, import.meta.url)
+    )
     this.mtlLoader = new MTLLoader()
     this.fbxLoader = new FBXLoader()
     this.stlLoader = new STLLoader()
@@ -160,10 +166,6 @@ export class LoaderManager implements LoaderManagerInterface {
         fbxModel.traverse((child) => {
           if (child instanceof THREE.Mesh) {
             this.modelManager.originalMaterials.set(child, child.material)
-
-            if (child instanceof THREE.SkinnedMesh) {
-              child.frustumCulled = false
-            }
           }
         })
         break
@@ -177,7 +179,9 @@ export class LoaderManager implements LoaderManagerInterface {
 
             const materials = await this.mtlLoader.loadAsync(mtlFileName)
             materials.preload()
-            this.objLoader.setMaterials(materials)
+            const materialsFromMtl =
+              MtlObjBridge.addMaterialsFromMtlLoader(materials)
+            this.objLoader.setMaterials(materialsFromMtl)
           } catch (e) {
             console.log(
               'No MTL file found or error loading it, continuing without materials'
@@ -185,8 +189,10 @@ export class LoaderManager implements LoaderManagerInterface {
           }
         }
 
-        this.objLoader.setPath(path)
-        model = await this.objLoader.loadAsync(filename)
+        // OBJLoader2Parallel uses Web Worker for parsing (non-blocking)
+        const objUrl = path + encodeURIComponent(filename)
+        model = await this.objLoader.loadAsync(objUrl)
+
         model.traverse((child) => {
           if (child instanceof THREE.Mesh) {
             this.modelManager.originalMaterials.set(child, child.material)
@@ -197,7 +203,6 @@ export class LoaderManager implements LoaderManagerInterface {
       case 'gltf':
       case 'glb':
         this.gltfLoader.setPath(path)
-
         const gltf = await this.gltfLoader.loadAsync(filename)
 
         this.modelManager.setOriginalModel(gltf)
@@ -207,10 +212,6 @@ export class LoaderManager implements LoaderManagerInterface {
           if (child instanceof THREE.Mesh) {
             child.geometry.computeVertexNormals()
             this.modelManager.originalMaterials.set(child, child.material)
-
-            if (child instanceof THREE.SkinnedMesh) {
-              child.frustumCulled = false
-            }
           }
         })
         break

src/extensions/core/load3d/interfaces.ts

@@ -4,8 +4,8 @@ import { ViewHelper } from 'three/examples/jsm/helpers/ViewHelper'
 import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader'
 import { type GLTF, GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
 import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader'
-import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader'
 import { STLLoader } from 'three/examples/jsm/loaders/STLLoader'
+import { type OBJLoader2Parallel } from 'wwobjloader2'
 
 export type MaterialMode =
   | 'original'
@@ -146,6 +146,9 @@ export interface AnimationManagerInterface extends BaseManager {
   updateSelectedAnimation(index: number): void
   toggleAnimation(play?: boolean): void
   update(delta: number): void
+  getAnimationTime(): number
+  getAnimationDuration(): number
+  setAnimationTime(time: number): void
 }
 
 export interface ModelManagerInterface {
@@ -176,7 +179,7 @@ export interface ModelManagerInterface {
 
 export interface LoaderManagerInterface {
   gltfLoader: GLTFLoader
-  objLoader: OBJLoader
+  objLoader: OBJLoader2Parallel
   mtlLoader: MTLLoader
   fbxLoader: FBXLoader
   stlLoader: STLLoader