feature: queue tab

Under a combination of many edge cases, the `widget_values` migration
code added in #3326 would cause the progress text on a "Recraft Text to
Image" node to incorrectly deserialize into the `control_after_generate`
- widgets_values is of length 1 greater than it should be because
progress text serializes
  - It should not, there is no code to deserialize it
- negative_prompt has force_input set and skips serialization
- Migration only applies when `widgets_values` is equal to actual inputs
length. The two above edge cases cancel to make this true
- Seed is accounted for when calculating the length of widgets, but not
when applying the migration
- Migration occurs even though we track workflow version now and have an
accurate way of determining that it can not be needed

The two primary edge cases which cause the bug are both addressed
- `options.serialize` does nothing and has never done anything. I've
been guilty of making the same mistake in the ancient past, and want to
clean up the misconception where I can.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8625-Fix-incorrect-widgetValue-migration-2fe6d73d365081a683b4c675eaeebb6c)
by [Unito](https://www.unito.io)

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

@@ -109,7 +109,7 @@ jobs:
       # Run sharded tests with snapshot updates (browsers pre-installed in container)
       - name: Update snapshots (Shard ${{ matrix.shardIndex }}/${{ matrix.shardTotal }})
         id: playwright-tests
-        run: pnpm exec playwright test --update-snapshots --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }}
+        run: pnpm exec playwright test --update-snapshots --grep @screenshot --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }}
         continue-on-error: true
 
       - name: Stage changed snapshot files

apps/desktop-ui/src/views/InstallView.stories.ts

@@ -1,6 +1,8 @@
 // eslint-disable-next-line storybook/no-renderer-packages
 import type { Meta, StoryObj } from '@storybook/vue3'
+import type { ElectronAPI } from '@comfyorg/comfyui-electron-types'
 import { nextTick, provide } from 'vue'
+import type { ElectronWindow } from '@/utils/envUtil'
 import { createMemoryHistory, createRouter } from 'vue-router'
 
 import InstallView from './InstallView.vue'
@@ -42,16 +44,21 @@ const meta: Meta<typeof InstallView> = {
       const router = createMockRouter()
 
       // Mock electron API
-      ;(window as any).electronAPI = {
+      ;(window as ElectronWindow).electronAPI = {
         getPlatform: () => 'darwin',
         Config: {
           getDetectedGpu: () => Promise.resolve('mps')
         },
         Events: {
-          trackEvent: (_eventName: string, _data?: any) => {}
+          trackEvent: (
+            _eventName: string,
+            _data?: Record<string, unknown>
+          ) => {}
         },
-        installComfyUI: (_options: any) => {},
-        changeTheme: (_theme: any) => {},
+        installComfyUI: (
+          _options: Parameters<ElectronAPI['installComfyUI']>[0]
+        ) => {},
+        changeTheme: (_theme: Parameters<ElectronAPI['changeTheme']>[0]) => {},
         getSystemPaths: () =>
           Promise.resolve({
             defaultInstallPath: '/Users/username/ComfyUI'
@@ -240,8 +247,8 @@ export const DesktopSettings: Story = {
 export const WindowsPlatform: Story = {
   render: () => {
     // Override the platform to Windows
-    ;(window as any).electronAPI.getPlatform = () => 'win32'
-    ;(window as any).electronAPI.Config.getDetectedGpu = () =>
+    ;(window as ElectronWindow).electronAPI.getPlatform = () => 'win32'
+    ;(window as ElectronWindow).electronAPI.Config.getDetectedGpu = () =>
       Promise.resolve('nvidia')
 
     return {
@@ -259,8 +266,8 @@ export const MacOSPlatform: Story = {
   name: 'macOS Platform',
   render: () => {
     // Override the platform to macOS
-    ;(window as any).electronAPI.getPlatform = () => 'darwin'
-    ;(window as any).electronAPI.Config.getDetectedGpu = () =>
+    ;(window as ElectronWindow).electronAPI.getPlatform = () => 'darwin'
+    ;(window as ElectronWindow).electronAPI.Config.getDetectedGpu = () =>
       Promise.resolve('mps')
 
     return {
@@ -327,7 +334,7 @@ export const ManualInstall: Story = {
 export const ErrorState: Story = {
   render: () => {
     // Override validation to return an error
-    ;(window as any).electronAPI.validateInstallPath = () =>
+    ;(window as ElectronWindow).electronAPI.validateInstallPath = () =>
       Promise.resolve({
         isValid: false,
         exists: false,
@@ -375,7 +382,7 @@ export const ErrorState: Story = {
 export const WarningState: Story = {
   render: () => {
     // Override validation to return a warning about non-default drive
-    ;(window as any).electronAPI.validateInstallPath = () =>
+    ;(window as ElectronWindow).electronAPI.validateInstallPath = () =>
       Promise.resolve({
         isValid: true,
         exists: false,

browser_tests/assets/missing/replaceable_nodes.json

@@ -1,59 +0,0 @@
-{
-  "last_node_id": 3,
-  "last_link_id": 1,
-  "nodes": [
-    {
-      "id": 1,
-      "type": "T2IAdapterLoader",
-      "pos": [100, 100],
-      "size": { "0": 300, "1": 58 },
-      "flags": {},
-      "order": 0,
-      "mode": 0,
-      "inputs": [],
-      "outputs": [
-        {
-          "name": "CONTROL_NET",
-          "type": "CONTROL_NET",
-          "links": null
-        }
-      ],
-      "properties": { "Node name for S&R": "T2IAdapterLoader" },
-      "widgets_values": ["t2iadapter_model.safetensors"]
-    },
-    {
-      "id": 2,
-      "type": "ImageBatch",
-      "pos": [100, 200],
-      "size": { "0": 210, "1": 46 },
-      "flags": {},
-      "order": 1,
-      "mode": 0,
-      "inputs": [
-        { "name": "image1", "type": "IMAGE", "link": null },
-        { "name": "image2", "type": "IMAGE", "link": null }
-      ],
-      "outputs": [{ "name": "IMAGE", "type": "IMAGE", "links": [1] }],
-      "properties": { "Node name for S&R": "ImageBatch" }
-    },
-    {
-      "id": 3,
-      "type": "UNKNOWN_NO_REPLACEMENT",
-      "pos": [100, 300],
-      "size": { "0": 210, "1": 46 },
-      "flags": {},
-      "order": 2,
-      "mode": 0,
-      "inputs": [{ "name": "image", "type": "IMAGE", "link": 1 }],
-      "outputs": [{ "name": "IMAGE", "type": "IMAGE", "links": null }],
-      "properties": { "Node name for S&R": "UNKNOWN_NO_REPLACEMENT" }
-    }
-  ],
-  "links": [[1, 2, 0, 3, 0, "IMAGE"]],
-  "groups": [],
-  "config": {},
-  "extra": {
-    "ds": { "scale": 1, "offset": [0, 0] }
-  },
-  "version": 0.4
-}

browser_tests/fixtures/ws.ts

@@ -1,5 +1,9 @@
 import { test as base } from '@playwright/test'
 
+interface TestWindow extends Window {
+  __ws__?: Record<string, WebSocket>
+}
+
 export const webSocketFixture = base.extend<{
   ws: { trigger(data: unknown, url?: string): Promise<void> }
 }>({

browser_tests/tests/dialog.spec.ts

@@ -34,33 +34,6 @@ test.describe('Load workflow warning', { tag: '@ui' }, () => {
     expect(warningText).toContain('MISSING_NODE_TYPE_IN_SUBGRAPH')
     expect(warningText).toContain('in subgraph')
   })
-
-  test('Should show replacement UI for replaceable missing nodes', async ({
-    comfyPage
-  }) => {
-    await comfyPage.settings.setSetting('Comfy.NodeReplacement.Enabled', true)
-    await comfyPage.workflow.loadWorkflow('missing/replaceable_nodes')
-
-    const missingNodesWarning = comfyPage.page.locator('.comfy-missing-nodes')
-    await expect(missingNodesWarning).toBeVisible()
-
-    // Verify "Replaceable" badges appear for nodes with replacements
-    const replaceableBadges = missingNodesWarning.getByText('Replaceable')
-    await expect(replaceableBadges.first()).toBeVisible()
-    expect(await replaceableBadges.count()).toBeGreaterThanOrEqual(2)
-
-    // Verify individual "Replace" buttons appear
-    const replaceButtons = missingNodesWarning.getByRole('button', {
-      name: 'Replace'
-    })
-    expect(await replaceButtons.count()).toBeGreaterThanOrEqual(2)
-
-    // Verify "Replace All" button appears in footer
-    const replaceAllButton = comfyPage.page.getByRole('button', {
-      name: 'Replace All'
-    })
-    await expect(replaceAllButton).toBeVisible()
-  })
 })
 
 test('Does not report warning on undo/redo', async ({ comfyPage }) => {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comfyorg/comfyui-frontend",
-  "version": "1.39.7",
+  "version": "1.39.8",
   "private": true,
   "description": "Official front-end implementation of ComfyUI",
   "homepage": "https://comfy.org",

packages/design-system/src/icons/extensions-blocks.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path d="M6.66667 14V5.33333C6.66667 5.15652 6.59643 4.98695 6.4714 4.86193C6.34638 4.7369 6.17681 4.66667 6 4.66667H2.66667C2.48986 4.66667 2.32029 4.7369 2.19526 4.86193C2.07024 4.98695 2 5.15652 2 5.33333V13.3333C2 13.5101 2.07024 13.6797 2.19526 13.8047C2.32029 13.9298 2.48986 14 2.66667 14H10.6667C10.8435 14 11.013 13.9298 11.1381 13.8047C11.2631 13.6797 11.3333 13.5101 11.3333 13.3333V10C11.3333 9.82319 11.2631 9.65362 11.1381 9.5286C11.013 9.40357 10.8435 9.33333 10.6667 9.33333H2M10 2H13.3333C13.7015 2 14 2.29848 14 2.66667V6C14 6.36819 13.7015 6.66667 13.3333 6.66667H10C9.63181 6.66667 9.33333 6.36819 9.33333 6V2.66667C9.33333 2.29848 9.63181 2 10 2Z" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>

scripts/check-unused-i18n-keys.ts

@@ -2,10 +2,7 @@
 import { execSync } from 'child_process'
 import * as fs from 'fs'
 import { globSync } from 'glob'
-
-interface LocaleData {
-  [key: string]: any
-}
+import type { LocaleData } from './i18n-types'
 
 // Configuration
 const SOURCE_PATTERNS = ['src/**/*.{js,ts,vue}', '!src/locales/**/*']
@@ -45,7 +42,7 @@ function getStagedLocaleFiles(): string[] {
 }
 
 // Extract all keys from a nested object
-function extractKeys(obj: any, prefix = ''): string[] {
+function extractKeys(obj: LocaleData, prefix = ''): string[] {
   const keys: string[] = []
 
   for (const [key, value] of Object.entries(obj)) {
@@ -166,17 +163,17 @@ async function checkNewUnusedKeys() {
 
   // Report results
   if (unusedNewKeys.length > 0) {
-    console.log('\n⚠️  Warning: Found unused NEW i18n keys:\n')
+    console.warn('\n⚠️  Warning: Found unused NEW i18n keys:\n')
 
     for (const key of unusedNewKeys.sort()) {
-      console.log(`  - ${key}`)
+      console.warn(`  - ${key}`)
     }
 
-    console.log(`\n✨ Total unused new keys: ${unusedNewKeys.length}`)
-    console.log(
+    console.warn(`\n✨ Total unused new keys: ${unusedNewKeys.length}`)
+    console.warn(
       '\nThese keys were added but are not used anywhere in the codebase.'
     )
-    console.log('Consider using them or removing them in a future update.')
+    console.warn('Consider using them or removing them in a future update.')
 
     // Changed from process.exit(1) to process.exit(0) for warning only
     process.exit(0)

scripts/diff-i18n.ts

@@ -7,6 +7,7 @@ import {
   writeFileSync
 } from 'fs'
 import { dirname, join } from 'path'
+import type { LocaleData } from './i18n-types'
 
 // Ensure directories exist
 function ensureDir(dir: string) {
@@ -41,8 +42,8 @@ function getAllJsonFiles(dir: string): string[] {
 }
 
 // Find additions in new object compared to base
-function findAdditions(base: any, updated: any): Record<string, any> {
-  const additions: Record<string, any> = {}
+function findAdditions(base: LocaleData, updated: LocaleData): LocaleData {
+  const additions: LocaleData = {}
 
   for (const key in updated) {
     if (!(key in base)) {
@@ -74,7 +75,7 @@ function capture(srcLocaleDir: string, tempBaseDir: string) {
     ensureDir(dirname(targetPath))
     writeFileSync(targetPath, readFileSync(file, 'utf8'))
   }
-  console.log('Captured current locale files to temp/base/')
+  console.warn('Captured current locale files to temp/base/')
 }
 
 // Diff command
@@ -94,7 +95,7 @@ function diff(srcLocaleDir: string, tempBaseDir: string, tempDiffDir: string) {
     if (Object.keys(additions).length > 0) {
       ensureDir(dirname(diffPath))
       writeFileSync(diffPath, JSON.stringify(additions, null, 2))
-      console.log(`Wrote diff to ${diffPath}`)
+      console.warn(`Wrote diff to ${diffPath}`)
     }
   }
 }
@@ -116,9 +117,9 @@ switch (command) {
     // Remove temp directory recursively
     if (existsSync('temp')) {
       rmSync('temp', { recursive: true, force: true })
-      console.log('Removed temp directory')
+      console.warn('Removed temp directory')
     }
     break
   default:
-    console.log('Please specify either "capture" or "diff" command')
+    console.error('Please specify either "capture" or "diff" command')
 }

scripts/i18n-types.ts

@@ -0,0 +1,5 @@
+/**
+ * Shared types for i18n-related scripts
+ */
+
+export type LocaleData = { [key: string]: string | LocaleData }

src/components/TopMenuSection.vue

@@ -19,12 +19,14 @@
             <Button
               v-tooltip.bottom="customNodesManagerTooltipConfig"
               variant="secondary"
-              size="icon"
-              :aria-label="t('menu.customNodesManager')"
+              :aria-label="t('menu.manageExtensions')"
               class="relative"
               @click="openCustomNodeManager"
             >
-              <i class="icon-[lucide--puzzle] size-4" />
+              <i class="icon-[comfy--extensions-blocks] size-4" />
+              <span class="not-md:hidden">
+                {{ t('menu.manageExtensions') }}
+              </span>
               <span
                 v-if="shouldShowRedDot"
                 class="absolute top-0.5 right-1 size-2 rounded-full bg-red-500"
@@ -220,7 +222,7 @@ const queueHistoryTooltipConfig = computed(() =>
   buildTooltipConfig(t('sideToolbar.queueProgressOverlay.viewJobHistory'))
 )
 const customNodesManagerTooltipConfig = computed(() =>
-  buildTooltipConfig(t('menu.customNodesManager'))
+  buildTooltipConfig(t('menu.manageExtensions'))
 )
 const queueContextMenu = ref<InstanceType<typeof ContextMenu> | null>(null)
 const queueContextMenuItems = computed<MenuItem[]>(() => [

src/components/common/LazyImage.vue

@@ -38,6 +38,7 @@
 <script setup lang="ts">
 import Skeleton from 'primevue/skeleton'
 import { computed, onUnmounted, ref, watch } from 'vue'
+import type { StyleValue } from 'vue'
 
 import { useIntersectionObserver } from '@/composables/useIntersectionObserver'
 import { useMediaCache } from '@/services/mediaCacheService'
@@ -55,7 +56,7 @@ const {
   alt?: string
   containerClass?: ClassValue
   imageClass?: ClassValue
-  imageStyle?: Record<string, any>
+  imageStyle?: StyleValue
   rootMargin?: string
 }>()
 

src/components/common/VirtualGrid.vue

@@ -1,8 +1,5 @@
 <template>
-  <div
-    ref="container"
-    class="h-full overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-(--dialog-surface)"
-  >
+  <div ref="container" class="h-full scrollbar-custom">
     <div :style="topSpacerStyle" />
     <div :style="mergedGridStyle">
       <div

src/components/dialog/content/MissingNodesContent.vue

@@ -25,25 +25,10 @@
           :key="i"
           class="flex min-h-8 items-center justify-between px-4 py-2 bg-secondary-background text-muted-foreground"
         >
-          <div class="flex items-center gap-2">
-            <StatusBadge
-              v-if="node.isReplaceable"
-              :label="$t('nodeReplacement.replaceable')"
-              severity="default"
-            />
-            <span class="text-xs">{{ node.label }}</span>
-            <span v-if="node.hint" class="text-xs text-muted-foreground">
-              {{ node.hint }}
-            </span>
-          </div>
-          <Button
-            v-if="node.isReplaceable"
-            variant="secondary"
-            size="sm"
-            @click="emit('replace', node.label)"
-          >
-            {{ $t('nodeReplacement.replace') }}
-          </Button>
+          <span class="text-xs">
+            {{ node.label }}
+          </span>
+          <span v-if="node.hint" class="text-xs">{{ node.hint }}</span>
         </div>
       </div>
 
@@ -64,9 +49,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
-import StatusBadge from '@/components/common/StatusBadge.vue'
 import MissingCoreNodesMessage from '@/components/dialog/content/MissingCoreNodesMessage.vue'
-import Button from '@/components/ui/button/Button.vue'
 import { isCloud } from '@/platform/distribution/types'
 import type { MissingNodeType } from '@/types/comfy'
 import { useMissingNodes } from '@/workbench/extensions/manager/composables/nodePack/useMissingNodes'
@@ -75,10 +58,6 @@ const props = defineProps<{
   missingNodeTypes: MissingNodeType[]
 }>()
 
-const emit = defineEmits<{
-  (e: 'replace', nodeType: string): void
-}>()
-
 // Get missing core nodes for OSS mode
 const { missingCoreNodes } = useMissingNodes()
 
@@ -96,12 +75,10 @@ const uniqueNodes = computed(() => {
         return {
           label: node.type,
           hint: node.hint,
-          action: node.action,
-          isReplaceable: node.isReplaceable ?? false,
-          replacement: node.replacement
+          action: node.action
         }
       }
-      return { label: node, isReplaceable: false }
+      return { label: node }
     })
 })
 </script>

src/components/dialog/content/MissingNodesFooter.vue

@@ -1,5 +1,5 @@
 <template>
-  <!-- Cloud mode: Learn More + Replace All + Got It buttons -->
+  <!-- Cloud mode: Learn More + Got It buttons -->
   <div
     v-if="isCloud"
     class="flex w-full items-center justify-between gap-2 py-2 px-4"
@@ -15,34 +15,16 @@
       <i class="icon-[lucide--info]"></i>
       <span>{{ $t('missingNodes.cloud.learnMore') }}</span>
     </Button>
-    <div class="flex gap-1">
-      <Button
-        v-if="hasReplaceableNodes"
-        variant="primary"
-        size="md"
-        @click="emit('replaceAll')"
-      >
-        {{ $t('nodeReplacement.replaceAll') }}
-      </Button>
-      <Button variant="secondary" size="md" @click="handleGotItClick">{{
-        $t('missingNodes.cloud.gotIt')
-      }}</Button>
-    </div>
+    <Button variant="secondary" size="md" @click="handleGotItClick">{{
+      $t('missingNodes.cloud.gotIt')
+    }}</Button>
   </div>
 
-  <!-- OSS mode: Open Manager + Replace All + Install All buttons -->
+  <!-- OSS mode: Open Manager + Install All buttons -->
   <div v-else-if="showManagerButtons" class="flex justify-end gap-1 py-2 px-4">
     <Button variant="textonly" @click="openManager">{{
       $t('g.openManager')
     }}</Button>
-    <Button
-      v-if="hasReplaceableNodes"
-      variant="primary"
-      size="md"
-      @click="emit('replaceAll')"
-    >
-      {{ $t('nodeReplacement.replaceAll') }}
-    </Button>
     <PackInstallButton
       v-if="showInstallAllButton"
       type="secondary"
@@ -69,25 +51,12 @@ import Button from '@/components/ui/button/Button.vue'
 import { isCloud } from '@/platform/distribution/types'
 import { useToastStore } from '@/platform/updates/common/toastStore'
 import { useDialogStore } from '@/stores/dialogStore'
-import type { MissingNodeType } from '@/types/comfy'
 import PackInstallButton from '@/workbench/extensions/manager/components/manager/button/PackInstallButton.vue'
 import { useMissingNodes } from '@/workbench/extensions/manager/composables/nodePack/useMissingNodes'
 import { useManagerState } from '@/workbench/extensions/manager/composables/useManagerState'
 import { useComfyManagerStore } from '@/workbench/extensions/manager/stores/comfyManagerStore'
 import { ManagerTab } from '@/workbench/extensions/manager/types/comfyManagerTypes'
 
-const { missingNodeTypes = [] } = defineProps<{
-  missingNodeTypes?: MissingNodeType[]
-}>()
-
-const emit = defineEmits<{
-  (e: 'replaceAll'): void
-}>()
-
-const hasReplaceableNodes = computed(() =>
-  missingNodeTypes.some((n) => typeof n === 'object' && n.isReplaceable)
-)
-
 const dialogStore = useDialogStore()
 const { t } = useI18n()
 

src/components/load3d/Load3dViewerContent.vue

@@ -131,7 +131,7 @@ const { isDragging, dragMessage, handleDragOver, handleDragLeave, handleDrop } =
     onModelDrop: async (file) => {
       await viewer.handleModelDrop(file)
     },
-    disabled: viewer.isPreview.value || isStandaloneMode
+    disabled: viewer.isPreview.value || !!isStandaloneMode
   })
 
 onMounted(async () => {

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

@@ -158,7 +158,7 @@ export const Queued: Story = {
             prompt_id: 'p1'
           }
         }
-      } as any
+      }
 
       return { args: { ...args, jobId } }
     },
@@ -217,7 +217,7 @@ export const QueuedParallel: Story = {
             prompt_id: 'p2'
           }
         }
-      } as any
+      }
 
       return { args: { ...args, jobId } }
     },
@@ -258,7 +258,7 @@ export const Running: Story = {
             prompt_id: 'p1'
           }
         }
-      } as any
+      }
 
       return { args: { ...args, jobId } }
     },
@@ -303,7 +303,7 @@ export const QueuedZeroAheadSingleRunning: Story = {
             prompt_id: 'p1'
           }
         }
-      } as any
+      }
 
       return { args: { ...args, jobId } }
     },
@@ -360,7 +360,7 @@ export const QueuedZeroAheadMultiRunning: Story = {
             prompt_id: 'p2'
           }
         }
-      } as any
+      }
 
       return { args: { ...args, jobId } }
     },

src/components/rightSidePanel/shared.test.ts

@@ -138,7 +138,6 @@ describe('flatAndCategorizeSelectedItems', () => {
     expect(result.nodes).toEqual([testNode1])
     expect(result.groups).toEqual([testGroup1, testGroup2])
     expect(result.nodeToParentGroup.get(testNode1)).toBe(testGroup2)
-    expect(result.nodeToParentGroup.has(testGroup2 as any)).toBe(false)
   })
 
   it('should handle mixed selection of nodes and groups', () => {

src/components/sidebar/ComfyMenuButton.vue

@@ -230,7 +230,7 @@ const extraMenuItems = computed(() => [
   {
     key: 'manage-extensions',
     label: t('menu.manageExtensions'),
-    icon: 'icon-[lucide--puzzle]',
+    icon: 'icon-[comfy--extensions-blocks]',
     command: showManageExtensions
   }
 ])

src/components/sidebar/tabs/AssetsSidebarGridView.vue

@@ -1,23 +1,7 @@
 <template>
   <div class="flex h-full flex-col">
-    <!-- Active Jobs Grid -->
-    <div
-      v-if="!isInFolderView && isQueuePanelV2Enabled && activeJobItems.length"
-      class="grid max-h-[50%] scrollbar-custom overflow-y-auto"
-      :style="gridStyle"
-    >
-      <ActiveMediaAssetCard
-        v-for="job in activeJobItems"
-        :key="job.id"
-        :job="job"
-      />
-    </div>
-
     <!-- Assets Header -->
-    <div
-      v-if="assets.length"
-      :class="cn('px-2 2xl:px-4', activeJobItems.length && 'mt-2')"
-    >
+    <div v-if="assets.length" class="px-2 2xl:px-4">
       <div
         class="flex items-center py-2 text-sm font-normal leading-normal text-muted-foreground font-inter"
       >
@@ -59,25 +43,18 @@ import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import VirtualGrid from '@/components/common/VirtualGrid.vue'
-import ActiveMediaAssetCard from '@/platform/assets/components/ActiveMediaAssetCard.vue'
-import { useJobList } from '@/composables/queue/useJobList'
 import MediaAssetCard from '@/platform/assets/components/MediaAssetCard.vue'
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
-import { isActiveJobState } from '@/utils/queueUtil'
-import { cn } from '@/utils/tailwindUtil'
-import { useSettingStore } from '@/platform/settings/settingStore'
 
 const {
   assets,
   isSelected,
-  isInFolderView = false,
   assetType = 'output',
   showOutputCount,
   getOutputCount
 } = defineProps<{
   assets: AssetItem[]
   isSelected: (assetId: string) => boolean
-  isInFolderView?: boolean
   assetType?: 'input' | 'output'
   showOutputCount: (asset: AssetItem) => boolean
   getOutputCount: (asset: AssetItem) => number
@@ -92,19 +69,9 @@ const emit = defineEmits<{
 }>()
 
 const { t } = useI18n()
-const { jobItems } = useJobList()
-const settingStore = useSettingStore()
-
-const isQueuePanelV2Enabled = computed(() =>
-  settingStore.get('Comfy.Queue.QPOV2')
-)
 
 type AssetGridItem = { key: string; asset: AssetItem }
 
-const activeJobItems = computed(() =>
-  jobItems.value.filter((item) => isActiveJobState(item.state)).toReversed()
-)
-
 const assetItems = computed<AssetGridItem[]>(() =>
   assets.map((asset) => ({
     key: `asset-${asset.id}`,

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

@@ -1,6 +1,5 @@
 import { mount } from '@vue/test-utils'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { ref } from 'vue'
 
 import AssetsSidebarListView from './AssetsSidebarListView.vue'
 
@@ -10,51 +9,12 @@ vi.mock('vue-i18n', () => ({
   })
 }))
 
-vi.mock('@/composables/queue/useJobActions', () => ({
-  useJobActions: () => ({
-    cancelAction: { variant: 'ghost', label: 'Cancel', icon: 'pi pi-times' },
-    canCancelJob: ref(false),
-    runCancelJob: vi.fn()
-  })
-}))
-
-const mockJobItems = ref<
-  Array<{
-    id: string
-    title: string
-    meta: string
-    state: string
-    createTime?: number
-  }>
->([])
-
-vi.mock('@/composables/queue/useJobList', () => ({
-  useJobList: () => ({
-    jobItems: mockJobItems
-  })
-}))
-
 vi.mock('@/stores/assetsStore', () => ({
   useAssetsStore: () => ({
     isAssetDeleting: () => false
   })
 }))
 
-vi.mock('@/platform/settings/settingStore', () => ({
-  useSettingStore: () => ({
-    get: (key: string) => key === 'Comfy.Queue.QPOV2'
-  })
-}))
-
-vi.mock('@/utils/queueUtil', () => ({
-  isActiveJobState: (state: string) =>
-    state === 'pending' || state === 'running'
-}))
-
-vi.mock('@/utils/queueDisplay', () => ({
-  iconForJobState: () => 'pi pi-spinner'
-}))
-
 vi.mock('@/platform/assets/schemas/assetMetadataSchema', () => ({
   getOutputAssetMetadata: () => undefined
 }))
@@ -73,7 +33,6 @@ vi.mock('@/utils/formatUtil', () => ({
 describe('AssetsSidebarListView', () => {
   beforeEach(() => {
     vi.clearAllMocks()
-    mockJobItems.value = []
   })
 
   const defaultProps = {
@@ -84,67 +43,14 @@ describe('AssetsSidebarListView', () => {
     toggleStack: async () => {}
   }
 
-  it('displays active jobs in oldest-first order (FIFO)', () => {
-    mockJobItems.value = [
-      {
-        id: 'newest',
-        title: 'Newest Job',
-        meta: '',
-        state: 'pending',
-        createTime: 3000
-      },
-      {
-        id: 'middle',
-        title: 'Middle Job',
-        meta: '',
-        state: 'running',
-        createTime: 2000
-      },
-      {
-        id: 'oldest',
-        title: 'Oldest Job',
-        meta: '',
-        state: 'pending',
-        createTime: 1000
-      }
-    ]
-
+  it('renders without errors with empty assets', () => {
     const wrapper = mount(AssetsSidebarListView, {
       props: defaultProps,
       shallow: true
     })
 
-    const jobListItems = wrapper.findAllComponents({ name: 'AssetsListItem' })
-    expect(jobListItems).toHaveLength(3)
-
-    const displayedTitles = jobListItems.map((item) =>
-      item.props('primaryText')
-    )
-    expect(displayedTitles).toEqual(['Oldest Job', 'Middle Job', 'Newest Job'])
-  })
-
-  it('excludes completed and failed jobs from active jobs section', () => {
-    mockJobItems.value = [
-      { id: 'pending', title: 'Pending', meta: '', state: 'pending' },
-      { id: 'completed', title: 'Completed', meta: '', state: 'completed' },
-      { id: 'failed', title: 'Failed', meta: '', state: 'failed' },
-      { id: 'running', title: 'Running', meta: '', state: 'running' }
-    ]
-
-    const wrapper = mount(AssetsSidebarListView, {
-      props: defaultProps,
-      shallow: true
-    })
-
-    const jobListItems = wrapper.findAllComponents({ name: 'AssetsListItem' })
-    expect(jobListItems).toHaveLength(2)
-
-    const displayedTitles = jobListItems.map((item) =>
-      item.props('primaryText')
-    )
-    expect(displayedTitles).toContain('Running')
-    expect(displayedTitles).toContain('Pending')
-    expect(displayedTitles).not.toContain('Completed')
-    expect(displayedTitles).not.toContain('Failed')
+    expect(wrapper.exists()).toBe(true)
+    const listItems = wrapper.findAllComponents({ name: 'AssetsListItem' })
+    expect(listItems).toHaveLength(0)
   })
 })

src/components/sidebar/tabs/AssetsSidebarListView.vue

@@ -1,48 +1,6 @@
 <template>
   <div class="flex h-full flex-col">
-    <div
-      v-if="isQueuePanelV2Enabled && activeJobItems.length"
-      class="flex max-h-[50%] scrollbar-custom flex-col gap-2 overflow-y-auto px-2"
-    >
-      <AssetsListItem
-        v-for="job in activeJobItems"
-        :key="job.id"
-        :class="
-          cn(
-            'w-full shrink-0 text-text-primary transition-colors hover:bg-secondary-background-hover',
-            'cursor-default'
-          )
-        "
-        :preview-url="job.iconImageUrl"
-        :preview-alt="job.title"
-        :icon-name="job.iconName"
-        :icon-class="getJobIconClass(job)"
-        :primary-text="job.title"
-        :secondary-text="job.meta"
-        :progress-total-percent="job.progressTotalPercent"
-        :progress-current-percent="job.progressCurrentPercent"
-        @mouseenter="onJobEnter(job.id)"
-        @mouseleave="onJobLeave(job.id)"
-        @click.stop
-      >
-        <template v-if="hoveredJobId === job.id" #actions>
-          <Button
-            v-if="canCancelJob"
-            :variant="cancelAction.variant"
-            size="icon"
-            :aria-label="cancelAction.label"
-            @click.stop="runCancelJob()"
-          >
-            <i :class="cancelAction.icon" class="size-4" />
-          </Button>
-        </template>
-      </AssetsListItem>
-    </div>
-
-    <div
-      v-if="assetItems.length"
-      :class="cn('px-2', activeJobItems.length && 'mt-2')"
-    >
+    <div v-if="assetItems.length" class="px-2">
       <div
         class="flex items-center p-2 text-sm font-normal leading-normal text-muted-foreground font-inter"
       >
@@ -119,31 +77,25 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import LoadingOverlay from '@/components/common/LoadingOverlay.vue'
 import VirtualGrid from '@/components/common/VirtualGrid.vue'
 import Button from '@/components/ui/button/Button.vue'
-import { useJobActions } from '@/composables/queue/useJobActions'
-import type { JobListItem } from '@/composables/queue/useJobList'
-import { useJobList } from '@/composables/queue/useJobList'
 import AssetsListItem from '@/platform/assets/components/AssetsListItem.vue'
 import type { OutputStackListItem } from '@/platform/assets/composables/useOutputStacks'
 import { getOutputAssetMetadata } from '@/platform/assets/schemas/assetMetadataSchema'
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
 import { iconForMediaType } from '@/platform/assets/utils/mediaIconUtil'
 import { useAssetsStore } from '@/stores/assetsStore'
-import { isActiveJobState } from '@/utils/queueUtil'
 import {
   formatDuration,
   formatSize,
   getMediaTypeFromFilename,
   truncateFilename
 } from '@/utils/formatUtil'
-import { iconForJobState } from '@/utils/queueDisplay'
 import { cn } from '@/utils/tailwindUtil'
-import { useSettingStore } from '@/platform/settings/settingStore'
 
 const {
   assetItems,
@@ -170,24 +122,8 @@ const emit = defineEmits<{
 }>()
 
 const { t } = useI18n()
-const { jobItems } = useJobList()
-const settingStore = useSettingStore()
 
-const isQueuePanelV2Enabled = computed(() =>
-  settingStore.get('Comfy.Queue.QPOV2')
-)
-const hoveredJobId = ref<string | null>(null)
 const hoveredAssetId = ref<string | null>(null)
-const activeJobItems = computed(() =>
-  jobItems.value.filter((item) => isActiveJobState(item.state)).toReversed()
-)
-const hoveredJob = computed(() =>
-  hoveredJobId.value
-    ? (activeJobItems.value.find((job) => job.id === hoveredJobId.value) ??
-      null)
-    : null
-)
-const { cancelAction, canCancelJob, runCancelJob } = useJobActions(hoveredJob)
 
 const listGridStyle = {
   display: 'grid',
@@ -240,16 +176,6 @@ function getAssetCardClass(selected: boolean): string {
   )
 }
 
-function onJobEnter(jobId: string) {
-  hoveredJobId.value = jobId
-}
-
-function onJobLeave(jobId: string) {
-  if (hoveredJobId.value === jobId) {
-    hoveredJobId.value = null
-  }
-}
-
 function onAssetEnter(assetId: string) {
   hoveredAssetId.value = assetId
 }
@@ -259,13 +185,4 @@ function onAssetLeave(assetId: string) {
     hoveredAssetId.value = null
   }
 }
-
-function getJobIconClass(job: JobListItem): string | undefined {
-  const classes = []
-  const iconName = job.iconName ?? iconForJobState(job.state)
-  if (!job.iconImageUrl && iconName === iconForJobState('pending')) {
-    classes.push('animate-spin')
-  }
-  return classes.length ? classes.join(' ') : undefined
-}
 </script>

src/components/sidebar/tabs/AssetsSidebarTab.vue

@@ -26,6 +26,15 @@
     <template #tool-buttons>
       <!-- Normal Tab View -->
       <TabList v-if="!isInFolderView" v-model="activeTab">
+        <Tab v-if="isQueuePanelV2Enabled" class="font-inter" value="queue">
+          {{ $t('sideToolbar.labels.queue') }}
+          <span
+            v-if="activeJobsCount > 0"
+            class="ml-1 inline-flex items-center justify-center rounded-full bg-primary px-1.5 text-xs text-base-foreground font-medium h-5"
+          >
+            {{ activeJobsCount }}
+          </span>
+        </Tab>
         <Tab class="font-inter" value="output">{{
           $t('sideToolbar.labels.generated')
         }}</Tab>
@@ -43,8 +52,9 @@
         </Button>
       </div>
 
-      <!-- Filter Bar -->
+      <!-- Filter Bar (hidden on queue tab) -->
       <MediaAssetFilterBar
+        v-if="!isQueueTab"
         v-model:search-query="searchQuery"
         v-model:sort-by="sortBy"
         v-model:view-mode="viewMode"
@@ -53,13 +63,14 @@
         :show-generation-time-sort="activeTab === 'output'"
       />
       <div
-        v-if="isQueuePanelV2Enabled && !isInFolderView"
-        class="flex items-center justify-between px-2 py-2 2xl:px-4"
+        v-if="isQueueTab && !isInFolderView"
+        class="flex items-center justify-between px-4 2xl:px-6"
       >
         <span class="text-sm text-muted-foreground">
           {{ activeJobsLabel }}
         </span>
         <div class="flex items-center gap-2">
+          <MediaAssetViewModeToggle v-model:view-mode="viewMode" />
           <span class="text-sm text-base-foreground">
             {{ t('sideToolbar.queueProgressOverlay.clearQueueTooltip') }}
           </span>
@@ -76,7 +87,7 @@
           </Button>
         </div>
       </div>
-      <Divider v-else type="dashed" class="my-2" />
+      <Divider v-else-if="!isQueueTab" type="dashed" class="my-2" />
     </template>
     <template #body>
       <div v-if="showLoadingState">
@@ -87,23 +98,32 @@
           icon="pi pi-info-circle"
           :title="
             $t(
-              activeTab === 'input'
-                ? 'sideToolbar.noImportedFiles'
-                : 'sideToolbar.noGeneratedFiles'
+              isQueueTab
+                ? 'sideToolbar.noQueueItems'
+                : activeTab === 'input'
+                  ? 'sideToolbar.noImportedFiles'
+                  : 'sideToolbar.noGeneratedFiles'
+            )
+          "
+          :message="
+            $t(
+              isQueueTab
+                ? 'sideToolbar.noQueueItemsMessage'
+                : 'sideToolbar.noFilesFoundMessage'
             )
           "
-          :message="$t('sideToolbar.noFilesFoundMessage')"
         />
       </div>
       <div v-else class="relative size-full" @click="handleEmptySpaceClick">
+        <QueueAssetView v-if="isQueueTab" :view-mode="viewMode" />
         <AssetsSidebarListView
-          v-if="isListView"
+          v-else-if="isListView"
           :asset-items="listViewAssetItems"
           :is-selected="isSelected"
           :selectable-assets="listViewSelectableAssets"
           :is-stack-expanded="isListViewStackExpanded"
           :toggle-stack="toggleListViewStack"
-          :asset-type="activeTab"
+          :asset-type="assetTabType"
           @select-asset="handleAssetSelect"
           @context-menu="handleAssetContextMenu"
           @approach-end="handleApproachEnd"
@@ -112,8 +132,7 @@
           v-else
           :assets="displayAssets"
           :is-selected="isSelected"
-          :is-in-folder-view="isInFolderView"
-          :asset-type="activeTab"
+          :asset-type="assetTabType"
           :show-output-count="shouldShowOutputCount"
           :get-output-count="getOutputCount"
           @select-asset="handleAssetSelect"
@@ -224,6 +243,7 @@ const Load3dViewerContent = () =>
   import('@/components/load3d/Load3dViewerContent.vue')
 import AssetsSidebarGridView from '@/components/sidebar/tabs/AssetsSidebarGridView.vue'
 import AssetsSidebarListView from '@/components/sidebar/tabs/AssetsSidebarListView.vue'
+import QueueAssetView from '@/components/sidebar/tabs/QueueAssetView.vue'
 import SidebarTabTemplate from '@/components/sidebar/tabs/SidebarTabTemplate.vue'
 import ResultGallery from '@/components/sidebar/tabs/queue/ResultGallery.vue'
 import Tab from '@/components/tab/Tab.vue'
@@ -231,6 +251,7 @@ import TabList from '@/components/tab/TabList.vue'
 import Button from '@/components/ui/button/Button.vue'
 import MediaAssetContextMenu from '@/platform/assets/components/MediaAssetContextMenu.vue'
 import MediaAssetFilterBar from '@/platform/assets/components/MediaAssetFilterBar.vue'
+import MediaAssetViewModeToggle from '@/platform/assets/components/MediaAssetViewModeToggle.vue'
 import { getAssetType } from '@/platform/assets/composables/media/assetMappers'
 import { useMediaAssets } from '@/platform/assets/composables/media/useMediaAssets'
 import { useAssetSelection } from '@/platform/assets/composables/useAssetSelection'
@@ -257,7 +278,7 @@ const { activeJobsCount } = storeToRefs(queueStore)
 const executionStore = useExecutionStore()
 const settingStore = useSettingStore()
 
-const activeTab = ref<'input' | 'output'>('output')
+const activeTab = ref<'input' | 'output' | 'queue'>('output')
 const folderPromptId = ref<string | null>(null)
 const folderExecutionTime = ref<number | undefined>(undefined)
 const isInFolderView = computed(() => folderPromptId.value !== null)
@@ -268,6 +289,10 @@ const viewMode = useStorage<'list' | 'grid'>(
 const isQueuePanelV2Enabled = computed(() =>
   settingStore.get('Comfy.Queue.QPOV2')
 )
+const isQueueTab = computed(() => activeTab.value === 'queue')
+const assetTabType = computed<'input' | 'output'>(() =>
+  activeTab.value === 'input' ? 'input' : 'output'
+)
 const isListView = computed(
   () => isQueuePanelV2Enabled.value && viewMode.value === 'list'
 )
@@ -415,18 +440,15 @@ const isBulkMode = computed(
 )
 
 const showLoadingState = computed(
-  () =>
-    loading.value &&
-    displayAssets.value.length === 0 &&
-    activeJobsCount.value === 0
+  () => !isQueueTab.value && loading.value && displayAssets.value.length === 0
 )
 
-const showEmptyState = computed(
-  () =>
-    !loading.value &&
-    displayAssets.value.length === 0 &&
-    activeJobsCount.value === 0
-)
+const showEmptyState = computed(() => {
+  if (isQueueTab.value) {
+    return activeJobsCount.value === 0
+  }
+  return !loading.value && displayAssets.value.length === 0
+})
 
 watch(visibleAssets, (newAssets) => {
   // Alternative: keep hidden selections and surface them in UI; for now prune
@@ -483,12 +505,21 @@ watch(
     clearSelection()
     // Clear search when switching tabs
     searchQuery.value = ''
-    // Reset pagination state when tab changes
-    void refreshAssets()
+    // Skip asset fetch for queue tab
+    if (activeTab.value !== 'queue') {
+      void refreshAssets()
+    }
   },
   { immediate: true }
 )
 
+// Reset to output tab if QPOV2 is disabled while on queue tab
+watch(isQueuePanelV2Enabled, (enabled) => {
+  if (!enabled && activeTab.value === 'queue') {
+    activeTab.value = 'output'
+  }
+})
+
 function handleAssetSelect(asset: AssetItem, assets?: AssetItem[]) {
   const assetList = assets ?? visibleAssets.value
   const index = assetList.findIndex((a) => a.id === asset.id)

src/components/sidebar/tabs/QueueAssetView.vue

@@ -0,0 +1,123 @@
+<template>
+  <div class="flex h-full flex-col">
+    <!-- Grid View -->
+    <VirtualGrid
+      v-if="viewMode === 'grid'"
+      class="flex-1"
+      :items="gridItems"
+      :grid-style="gridStyle"
+    >
+      <template #item="{ item }">
+        <ActiveMediaAssetCard :job="item.job" />
+      </template>
+    </VirtualGrid>
+
+    <!-- List View -->
+    <div
+      v-else
+      class="flex flex-1 scrollbar-custom flex-col gap-2 overflow-y-auto px-2"
+    >
+      <AssetsListItem
+        v-for="job in activeJobItems"
+        :key="job.id"
+        :class="
+          cn(
+            'w-full shrink-0 text-text-primary transition-colors hover:bg-secondary-background-hover',
+            'cursor-default'
+          )
+        "
+        :preview-url="job.iconImageUrl"
+        :preview-alt="job.title"
+        :icon-name="job.iconName"
+        :icon-class="getJobIconClass(job)"
+        :primary-text="job.title"
+        :secondary-text="job.meta"
+        :progress-total-percent="job.progressTotalPercent"
+        :progress-current-percent="job.progressCurrentPercent"
+        @mouseenter="onJobEnter(job.id)"
+        @mouseleave="onJobLeave(job.id)"
+        @click.stop
+      >
+        <template v-if="hoveredJobId === job.id" #actions>
+          <Button
+            v-if="canCancelJob"
+            :variant="cancelAction.variant"
+            size="icon"
+            :aria-label="cancelAction.label"
+            @click.stop="runCancelJob()"
+          >
+            <i :class="cancelAction.icon" class="size-4" />
+          </Button>
+        </template>
+      </AssetsListItem>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+import VirtualGrid from '@/components/common/VirtualGrid.vue'
+import Button from '@/components/ui/button/Button.vue'
+import { useJobActions } from '@/composables/queue/useJobActions'
+import type { JobListItem } from '@/composables/queue/useJobList'
+import { useJobList } from '@/composables/queue/useJobList'
+import ActiveMediaAssetCard from '@/platform/assets/components/ActiveMediaAssetCard.vue'
+import AssetsListItem from '@/platform/assets/components/AssetsListItem.vue'
+import { isActiveJobState } from '@/utils/queueUtil'
+import { iconForJobState } from '@/utils/queueDisplay'
+import { cn } from '@/utils/tailwindUtil'
+
+const { viewMode = 'grid' } = defineProps<{
+  viewMode?: 'list' | 'grid'
+}>()
+
+const { jobItems } = useJobList()
+
+const activeJobItems = computed(() =>
+  jobItems.value.filter((item) => isActiveJobState(item.state)).toReversed()
+)
+
+const gridItems = computed(() =>
+  activeJobItems.value.map((job) => ({
+    key: `queue-${job.id}`,
+    job
+  }))
+)
+
+const gridStyle = {
+  display: 'grid',
+  gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
+  padding: '0 0.5rem',
+  gap: '0.5rem'
+}
+
+// List view hover & cancel logic
+const hoveredJobId = ref<string | null>(null)
+const hoveredJob = computed(() =>
+  hoveredJobId.value
+    ? (activeJobItems.value.find((job) => job.id === hoveredJobId.value) ??
+      null)
+    : null
+)
+const { cancelAction, canCancelJob, runCancelJob } = useJobActions(hoveredJob)
+
+function onJobEnter(jobId: string) {
+  hoveredJobId.value = jobId
+}
+
+function onJobLeave(jobId: string) {
+  if (hoveredJobId.value === jobId) {
+    hoveredJobId.value = null
+  }
+}
+
+function getJobIconClass(job: JobListItem): string | undefined {
+  const classes = []
+  const iconName = job.iconName ?? iconForJobState(job.state)
+  if (!job.iconImageUrl && iconName === iconForJobState('pending')) {
+    classes.push('animate-spin')
+  }
+  return classes.length ? classes.join(' ') : undefined
+}
+</script>

src/composables/graph/useGraphNodeManager.ts

@@ -52,7 +52,7 @@ export interface SafeWidgetData {
   isDOMWidget?: boolean
   label?: string
   nodeType?: string
-  options?: IWidgetOptions<unknown>
+  options?: IWidgetOptions
   spec?: InputSpec
   slotMetadata?: WidgetSlotMetadata
 }
@@ -145,7 +145,7 @@ interface SharedWidgetEnhancements {
   /** Widget label */
   label?: string
   /** Widget options */
-  options?: Record<string, any>
+  options?: IWidgetOptions
 }
 
 /**
@@ -170,7 +170,7 @@ export function getSharedWidgetEnhancements(
         ? 'ring ring-component-node-widget-advanced'
         : undefined,
     label: widget.label,
-    options: widget.options
+    options: widget.options as IWidgetOptions
   }
 }
 
@@ -432,7 +432,7 @@ export function useGraphNodeManager(graph: LGraph): GraphNodeManager {
     } else {
       // Not during workflow loading - initialize layout immediately
       // This handles individual node additions during normal operation
-      requestAnimationFrame(initializeVueNodeLayout)
+      initializeVueNodeLayout()
     }
 
     // Call original callback if provided

src/composables/node/useWatchWidget.ts

@@ -47,7 +47,7 @@ export const useComputedWithWidgetWatch = (
   const { widgetNames, triggerCanvasRedraw = false } = options
 
   // Create a reactive trigger based on widget values
-  const widgetValues = ref<Record<string, any>>({})
+  const widgetValues = ref<Record<string, unknown>>({})
 
   // Initialize widget observers
   if (node.widgets) {
@@ -56,7 +56,7 @@ export const useComputedWithWidgetWatch = (
       : node.widgets
 
     // Initialize current values
-    const currentValues: Record<string, any> = {}
+    const currentValues: Record<string, unknown> = {}
     widgetsToObserve.forEach((widget) => {
       currentValues[widget.name] = widget.value
     })

src/composables/useCanvasDrop.ts

@@ -2,7 +2,7 @@ import type { Ref } from 'vue'
 
 import { useSharedCanvasPositionConversion } from '@/composables/element/useCanvasPositionConversion'
 import { usePragmaticDroppable } from '@/composables/usePragmaticDragAndDrop'
-import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type { LGraphNode, Point } from '@/lib/litegraph/src/litegraph'
 import { LiteGraph } from '@/lib/litegraph/src/litegraph'
 import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
 import { ComfyWorkflow } from '@/platform/workflow/management/stores/workflowStore'
@@ -33,7 +33,7 @@ export const useCanvasDrop = (canvasRef: Ref<HTMLCanvasElement | null>) => {
 
         if (node.data instanceof ComfyNodeDefImpl) {
           const nodeDef = node.data
-          const pos = [...basePos]
+          const pos: Point = [...basePos]
           // Add an offset on y to make sure after adding the node, the cursor
           // is on the node (top left corner)
           pos[1] += LiteGraph.NODE_TITLE_HEIGHT

src/lib/litegraph/src/infrastructure/CustomEventTarget.ts

@@ -2,7 +2,7 @@ import type { NeverNever, PickNevers } from '@/lib/litegraph/src/types/utility'
 
 type EventListeners<T> = {
   readonly [K in keyof T]:
-    | ((this: EventTarget, ev: CustomEvent<T[K]>) => any)
+    | ((this: EventTarget, ev: CustomEvent<T[K]>) => unknown)
     | EventListenerObject
     | null
 }

src/lib/litegraph/src/subgraph/subgraphUtils.test.ts

@@ -68,7 +68,7 @@ describe.skip('subgraphUtils', () => {
   describe.skip('findUsedSubgraphIds', () => {
     it('should handle graph with no subgraphs', () => {
       const graph = new LGraph()
-      const registry = new Map<UUID, any>()
+      const registry = new Map<UUID, LGraph>()
 
       const result = findUsedSubgraphIds(graph, registry)
       expect(result.size).toBe(0)
@@ -87,7 +87,7 @@ describe.skip('subgraphUtils', () => {
       const node2 = createTestSubgraphNode(subgraph2)
       subgraph1.add(node2)
 
-      const registry = new Map<UUID, any>([
+      const registry = new Map<UUID, LGraph>([
         [subgraph1.id, subgraph1],
         [subgraph2.id, subgraph2]
       ])
@@ -115,7 +115,7 @@ describe.skip('subgraphUtils', () => {
       const node3 = createTestSubgraphNode(subgraph1, { id: 3 })
       subgraph2.add(node3)
 
-      const registry = new Map<UUID, any>([
+      const registry = new Map<UUID, LGraph>([
         [subgraph1.id, subgraph1],
         [subgraph2.id, subgraph2]
       ])
@@ -139,7 +139,7 @@ describe.skip('subgraphUtils', () => {
       rootGraph.add(node2)
 
       // Only register subgraph1
-      const registry = new Map<UUID, any>([[subgraph1.id, subgraph1]])
+      const registry = new Map<UUID, LGraph>([[subgraph1.id, subgraph1]])
 
       const result = findUsedSubgraphIds(rootGraph, registry)
       expect(result.size).toBe(2)

src/lib/litegraph/src/types/widgets.ts

@@ -37,6 +37,14 @@ export interface IWidgetOptions<TValues = unknown[]> {
   getOptionLabel?: (value?: string | null) => string
   callback?: IWidget['callback']
   iconClass?: string
+
+  // Vue widget options
+  disabled?: boolean
+  useGrouping?: boolean
+  placeholder?: string
+  showThumbnails?: boolean
+  showItemNavigators?: boolean
+  hidden?: boolean
 }
 
 interface IWidgetSliderOptions extends IWidgetOptions<number[]> {

src/lib/litegraph/src/widgets/ComboWidget.ts

@@ -35,11 +35,10 @@ export class ComboWidget
   override get _displayValue() {
     if (this.computedDisabled) return ''
 
-    if (this.options.getOptionLabel) {
+    const getOptionLabel = this.options.getOptionLabel
+    if (getOptionLabel) {
       try {
-        return this.options.getOptionLabel(
-          this.value ? String(this.value) : null
-        )
+        return getOptionLabel(this.value ? String(this.value) : null)
       } catch (e) {
         console.error('Failed to map value:', e)
         return this.value ? String(this.value) : ''
@@ -155,9 +154,12 @@ export class ComboWidget
       }
       const menu = new LiteGraph.ContextMenu([], menuOptions)
 
+      const getOptionLabel = this.options.getOptionLabel
       for (const value of values_list) {
         try {
-          const label = this.options.getOptionLabel(String(value))
+          const label = getOptionLabel
+            ? getOptionLabel(String(value))
+            : String(value)
           menu.addItem(label, value, menuOptions)
         } catch (err) {
           console.error('Failed to map value:', err)

src/locales/ar/nodeDefs.json

@@ -2018,6 +2018,20 @@
       }
     }
   },
+  "CreateList": {
+    "display_name": "إنشاء قائمة",
+    "inputs": {
+      "inputs": {
+        "name": "المدخلات"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "قائمة",
+        "tooltip": null
+      }
+    }
+  },
   "CreateVideo": {
     "description": "إنشاء فيديو من الصور.",
     "display_name": "إنشاء فيديو",
@@ -13940,6 +13954,9 @@
       "bpm": {
         "name": "الإيقاع (BPM)"
       },
+      "cfg_scale": {
+        "name": "cfg_scale"
+      },
       "clip": {
         "name": "clip"
       },
@@ -13949,6 +13966,10 @@
       "duration": {
         "name": "المدة"
       },
+      "generate_audio_codes": {
+        "name": "توليد رموز الصوت",
+        "tooltip": "تفعيل نموذج اللغة الكبير (LLM) الذي يولد رموز الصوت. قد يكون بطيئًا لكنه سيزيد من جودة الصوت الناتج. قم بإيقاف هذا الخيار إذا كنت تقدم مرجعًا صوتيًا للنموذج."
+      },
       "keyscale": {
         "name": "المقام الموسيقي"
       },
@@ -13964,8 +13985,17 @@
       "tags": {
         "name": "الوسوم"
       },
+      "temperature": {
+        "name": "درجة الحرارة"
+      },
       "timesignature": {
         "name": "توقيع الإيقاع"
+      },
+      "top_k": {
+        "name": "top_k"
+      },
+      "top_p": {
+        "name": "top_p"
       }
     },
     "outputs": {
@@ -14900,6 +14930,28 @@
       }
     }
   },
+  "VAEDecodeAudioTiled": {
+    "display_name": "فك ترميز الصوت بواسطة VAE (مجزأ)",
+    "inputs": {
+      "overlap": {
+        "name": "تداخل"
+      },
+      "samples": {
+        "name": "عينات"
+      },
+      "tile_size": {
+        "name": "حجم التجزئة"
+      },
+      "vae": {
+        "name": "vae"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
   "VAEDecodeHunyuan3D": {
     "display_name": "فك ترميز VAE Hunyuan3D",
     "inputs": {

src/locales/en/main.json

@@ -10,6 +10,7 @@
     "download": "Download",
     "downloadImage": "Download image",
     "downloadVideo": "Download video",
+    "downloadAudio": "Download audio",
     "editOrMaskImage": "Edit or mask image",
     "editImage": "Edit image",
     "decrement": "Decrement",
@@ -754,6 +755,8 @@
     "noFilesFound": "No files found",
     "noImportedFiles": "No imported files found",
     "noGeneratedFiles": "No generated files found",
+    "noQueueItems": "No active jobs",
+    "noQueueItemsMessage": "Queue a prompt to see active jobs here",
     "generatedAssetsHeader": "Generated assets",
     "importedAssetsHeader": "Imported assets",
     "activeJobStatus": "Active job: {status}",
@@ -2806,14 +2809,6 @@
       "replacementInstruction": "Install these nodes to run this workflow, or replace them with installed alternatives. Missing nodes are highlighted in red on the canvas."
     }
   },
-  "nodeReplacement": {
-    "replaceable": "Replaceable",
-    "replace": "Replace",
-    "replaceAll": "Replace All",
-    "replacedNode": "Replaced node: {nodeType}",
-    "replacedAllNodes": "Replaced {count} node type(s)",
-    "replaceFailed": "Failed to replace nodes"
-  },
   "rightSidePanel": {
     "togglePanel": "Toggle properties panel",
     "noSelection": "Select a node to see its properties and info.",

src/locales/en/nodeDefs.json

@@ -2020,6 +2020,20 @@
       }
     }
   },
+  "CreateList": {
+    "display_name": "Create List",
+    "inputs": {
+      "inputs": {
+        "name": "inputs"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "list",
+        "tooltip": null
+      }
+    }
+  },
   "CreateVideo": {
     "display_name": "Create Video",
     "description": "Create a video from images.",
@@ -11492,8 +11506,8 @@
     }
   },
   "ReferenceTimbreAudio": {
-    "display_name": "ReferenceTimbreAudio",
-    "description": "This node sets the reference audio for timbre (for ace step 1.5)",
+    "display_name": "Reference Audio",
+    "description": "This node sets the reference audio for ace step 1.5",
     "inputs": {
       "conditioning": {
         "name": "conditioning"
@@ -14057,6 +14071,22 @@
       "keyscale": {
         "name": "keyscale"
       },
+      "generate_audio_codes": {
+        "name": "generate_audio_codes",
+        "tooltip": "Enable the LLM that generates audio codes. This can be slow but will increase the quality of the generated audio. Turn this off if you are giving the model an audio reference."
+      },
+      "cfg_scale": {
+        "name": "cfg_scale"
+      },
+      "temperature": {
+        "name": "temperature"
+      },
+      "top_p": {
+        "name": "top_p"
+      },
+      "top_k": {
+        "name": "top_k"
+      },
       "control_after_generate": {
         "name": "control after generate"
       }
@@ -15060,6 +15090,28 @@
       }
     }
   },
+  "VAEDecodeAudioTiled": {
+    "display_name": "VAE Decode Audio (Tiled)",
+    "inputs": {
+      "samples": {
+        "name": "samples"
+      },
+      "vae": {
+        "name": "vae"
+      },
+      "tile_size": {
+        "name": "tile_size"
+      },
+      "overlap": {
+        "name": "overlap"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
   "VAEDecodeHunyuan3D": {
     "display_name": "VAEDecodeHunyuan3D",
     "inputs": {

src/locales/es/nodeDefs.json

@@ -2018,6 +2018,20 @@
       }
     }
   },
+  "CreateList": {
+    "display_name": "Crear lista",
+    "inputs": {
+      "inputs": {
+        "name": "entradas"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "lista",
+        "tooltip": null
+      }
+    }
+  },
   "CreateVideo": {
     "description": "Crea un video a partir de imágenes.",
     "display_name": "Crear video",
@@ -6418,9 +6432,7 @@
   "Load3D": {
     "display_name": "Cargar 3D",
     "inputs": {
-      "clear": {
-        "": "limpiar"
-      },
+      "clear": {},
       "height": {
         "name": "alto"
       },
@@ -6431,10 +6443,10 @@
         "name": "archivo_modelo"
       },
       "upload 3d model": {
-        "": "subir modelo 3D"
+        "es": "Subir modelo 3D"
       },
       "upload extra resources": {
-        "": "subir recursos adicionales"
+        "es": "Subir recursos adicionales"
       },
       "width": {
         "name": "ancho"
@@ -13946,6 +13958,9 @@
       "bpm": {
         "name": "bpm"
       },
+      "cfg_scale": {
+        "name": "cfg_scale"
+      },
       "clip": {
         "name": "clip"
       },
@@ -13955,6 +13970,10 @@
       "duration": {
         "name": "duración"
       },
+      "generate_audio_codes": {
+        "name": "generar_códigos_de_audio",
+        "tooltip": "Activa el LLM que genera códigos de audio. Esto puede ser lento, pero aumentará la calidad del audio generado. Desactívalo si proporcionas una referencia de audio al modelo."
+      },
       "keyscale": {
         "name": "escala tonal"
       },
@@ -13970,8 +13989,17 @@
       "tags": {
         "name": "etiquetas"
       },
+      "temperature": {
+        "name": "temperatura"
+      },
       "timesignature": {
         "name": "compás"
+      },
+      "top_k": {
+        "name": "top_k"
+      },
+      "top_p": {
+        "name": "top_p"
       }
     },
     "outputs": {
@@ -14906,6 +14934,28 @@
       }
     }
   },
+  "VAEDecodeAudioTiled": {
+    "display_name": "VAE Decodificar audio (en mosaico)",
+    "inputs": {
+      "overlap": {
+        "name": "superposición"
+      },
+      "samples": {
+        "name": "muestras"
+      },
+      "tile_size": {
+        "name": "tamaño_de_mosaico"
+      },
+      "vae": {
+        "name": "vae"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
   "VAEDecodeHunyuan3D": {
     "display_name": "VAEDecodeHunyuan3D",
     "inputs": {

src/locales/fa/nodeDefs.json

@@ -2020,6 +2020,20 @@
       }
     }
   },
+  "CreateList": {
+    "display_name": "ایجاد لیست",
+    "inputs": {
+      "inputs": {
+        "name": "ورودی‌ها"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "لیست",
+        "tooltip": null
+      }
+    }
+  },
   "CreateVideo": {
     "description": "ایجاد ویدیو از تصاویر.",
     "display_name": "ایجاد ویدیو",
@@ -6427,7 +6441,9 @@
   "Load3D": {
     "display_name": "بارگذاری ۳بعدی و انیمیشن",
     "inputs": {
-      "clear": {},
+      "clear": {
+        "": "پاک‌سازی"
+      },
       "height": {
         "name": "ارتفاع"
       },
@@ -6437,8 +6453,12 @@
       "model_file": {
         "name": "فایل مدل"
       },
-      "upload 3d model": {},
-      "upload extra resources": {},
+      "upload 3d model": {
+        "": "بارگذاری مدل سه‌بعدی"
+      },
+      "upload extra resources": {
+        "": "بارگذاری منابع اضافی"
+      },
       "width": {
         "name": "عرض"
       }
@@ -13953,6 +13973,9 @@
       "bpm": {
         "name": "ضرب در دقیقه (BPM)"
       },
+      "cfg_scale": {
+        "name": "cfg_scale"
+      },
       "clip": {
         "name": "clip"
       },
@@ -13962,6 +13985,10 @@
       "duration": {
         "name": "مدت زمان"
       },
+      "generate_audio_codes": {
+        "name": "تولید کدهای صوتی",
+        "tooltip": "فعال‌سازی LLM برای تولید کدهای صوتی. این کار ممکن است کند باشد اما کیفیت صدای تولیدشده را افزایش می‌دهد. اگر به مدل یک مرجع صوتی می‌دهید، این گزینه را غیرفعال کنید."
+      },
       "keyscale": {
         "name": "گام"
       },
@@ -13977,8 +14004,17 @@
       "tags": {
         "name": "برچسب‌ها"
       },
+      "temperature": {
+        "name": "temperature"
+      },
       "timesignature": {
         "name": "امضای زمانی"
+      },
+      "top_k": {
+        "name": "top_k"
+      },
+      "top_p": {
+        "name": "top_p"
       }
     },
     "outputs": {
@@ -14913,6 +14949,28 @@
       }
     }
   },
+  "VAEDecodeAudioTiled": {
+    "display_name": "رمزگشایی VAE صوتی (کاشی‌بندی‌شده)",
+    "inputs": {
+      "overlap": {
+        "name": "همپوشانی"
+      },
+      "samples": {
+        "name": "نمونه‌ها"
+      },
+      "tile_size": {
+        "name": "اندازه کاشی"
+      },
+      "vae": {
+        "name": "vae"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
   "VAEDecodeHunyuan3D": {
     "display_name": "VAEDecodeHunyuan3D",
     "inputs": {

src/locales/fr/nodeDefs.json

@@ -2018,6 +2018,20 @@
       }
     }
   },
+  "CreateList": {
+    "display_name": "Créer une liste",
+    "inputs": {
+      "inputs": {
+        "name": "entrées"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "liste",
+        "tooltip": null
+      }
+    }
+  },
   "CreateVideo": {
     "description": "Créer une vidéo à partir d’images.",
     "display_name": "Créer une vidéo",
@@ -13946,6 +13960,9 @@
       "bpm": {
         "name": "bpm"
       },
+      "cfg_scale": {
+        "name": "cfg_scale"
+      },
       "clip": {
         "name": "clip"
       },
@@ -13955,6 +13972,10 @@
       "duration": {
         "name": "durée"
       },
+      "generate_audio_codes": {
+        "name": "générer des codes audio",
+        "tooltip": "Activez le LLM qui génère des codes audio. Cela peut être lent mais augmentera la qualité de l’audio généré. Désactivez cette option si vous fournissez une référence audio au modèle."
+      },
       "keyscale": {
         "name": "tonalité"
       },
@@ -13970,8 +13991,17 @@
       "tags": {
         "name": "tags"
       },
+      "temperature": {
+        "name": "température"
+      },
       "timesignature": {
         "name": "signature rythmique"
+      },
+      "top_k": {
+        "name": "top_k"
+      },
+      "top_p": {
+        "name": "top_p"
       }
     },
     "outputs": {
@@ -14906,6 +14936,28 @@
       }
     }
   },
+  "VAEDecodeAudioTiled": {
+    "display_name": "Décoder Audio VAE (par tuiles)",
+    "inputs": {
+      "overlap": {
+        "name": "chevauchement"
+      },
+      "samples": {
+        "name": "échantillons"
+      },
+      "tile_size": {
+        "name": "taille de tuile"
+      },
+      "vae": {
+        "name": "vae"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
   "VAEDecodeHunyuan3D": {
     "display_name": "VAEDecodeHunyuan3D",
     "inputs": {

src/locales/ja/nodeDefs.json

@@ -2018,6 +2018,20 @@
       }
     }
   },
+  "CreateList": {
+    "display_name": "リストを作成",
+    "inputs": {
+      "inputs": {
+        "name": "入力"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "リスト",
+        "tooltip": null
+      }
+    }
+  },
   "CreateVideo": {
     "description": "画像から動画を作成します。",
     "display_name": "動画を作成",
@@ -6418,9 +6432,7 @@
   "Load3D": {
     "display_name": "3Dを読み込む",
     "inputs": {
-      "clear": {
-        "": "クリア"
-      },
+      "clear": "クリア",
       "height": {
         "name": "高さ"
       },
@@ -6430,12 +6442,8 @@
       "model_file": {
         "name": "モデルファイル"
       },
-      "upload 3d model": {
-        "": "3Dモデルをアップロード"
-      },
-      "upload extra resources": {
-        "": "追加リソースをアップロード"
-      },
+      "upload 3d model": "3Dモデルをアップロード",
+      "upload extra resources": "追加リソースをアップロード",
       "width": {
         "name": "幅"
       }
@@ -13946,6 +13954,9 @@
       "bpm": {
         "name": "BPM"
       },
+      "cfg_scale": {
+        "name": "cfgスケール"
+      },
       "clip": {
         "name": "clip"
       },
@@ -13955,6 +13966,10 @@
       "duration": {
         "name": "長さ"
       },
+      "generate_audio_codes": {
+        "name": "オーディオコードを生成",
+        "tooltip": "オーディオコードを生成するLLMを有効にします。これにより生成されるオーディオの品質が向上しますが、処理が遅くなる場合があります。モデルにオーディオリファレンスを与える場合はオフにしてください。"
+      },
       "keyscale": {
         "name": "キー"
       },
@@ -13970,8 +13985,17 @@
       "tags": {
         "name": "タグ"
       },
+      "temperature": {
+        "name": "温度"
+      },
       "timesignature": {
         "name": "拍子"
+      },
+      "top_k": {
+        "name": "top_k"
+      },
+      "top_p": {
+        "name": "top_p"
       }
     },
     "outputs": {
@@ -14906,6 +14930,28 @@
       }
     }
   },
+  "VAEDecodeAudioTiled": {
+    "display_name": "VAEデコードオーディオ（タイル）",
+    "inputs": {
+      "overlap": {
+        "name": "オーバーラップ"
+      },
+      "samples": {
+        "name": "サンプル"
+      },
+      "tile_size": {
+        "name": "タイルサイズ"
+      },
+      "vae": {
+        "name": "vae"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
   "VAEDecodeHunyuan3D": {
     "display_name": "VAEDecodeHunyuan3D",
     "inputs": {

src/locales/ko/nodeDefs.json

@@ -2018,6 +2018,20 @@
       }
     }
   },
+  "CreateList": {
+    "display_name": "목록 만들기",
+    "inputs": {
+      "inputs": {
+        "name": "입력값"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "목록",
+        "tooltip": null
+      }
+    }
+  },
   "CreateVideo": {
     "description": "이미지로부터 비디오를 생성합니다.",
     "display_name": "비디오 생성",
@@ -6418,7 +6432,7 @@
   "Load3D": {
     "display_name": "3D 불러오기",
     "inputs": {
-      "clear": {},
+      "clear": "지우기",
       "height": {
         "name": "높이"
       },
@@ -6428,12 +6442,8 @@
       "model_file": {
         "name": "모델 파일"
       },
-      "upload 3d model": {
-        "ko": "3D 모델 업로드"
-      },
-      "upload extra resources": {
-        "ko": "추가 리소스 업로드"
-      },
+      "upload 3d model": "3D 모델 업로드",
+      "upload extra resources": "추가 리소스 업로드",
       "width": {
         "name": "너비"
       }
@@ -13944,6 +13954,9 @@
       "bpm": {
         "name": "BPM"
       },
+      "cfg_scale": {
+        "name": "cfg_scale"
+      },
       "clip": {
         "name": "clip"
       },
@@ -13953,6 +13966,10 @@
       "duration": {
         "name": "길이"
       },
+      "generate_audio_codes": {
+        "name": "오디오 코드 생성",
+        "tooltip": "오디오 코드를 생성하는 LLM을 활성화합니다. 느릴 수 있지만 생성된 오디오의 품질이 향상됩니다. 모델에 오디오 참조를 제공하는 경우 이 옵션을 끄세요."
+      },
       "keyscale": {
         "name": "조성"
       },
@@ -13968,8 +13985,17 @@
       "tags": {
         "name": "태그"
       },
+      "temperature": {
+        "name": "temperature"
+      },
       "timesignature": {
         "name": "박자"
+      },
+      "top_k": {
+        "name": "top_k"
+      },
+      "top_p": {
+        "name": "top_p"
       }
     },
     "outputs": {
@@ -14904,6 +14930,28 @@
       }
     }
   },
+  "VAEDecodeAudioTiled": {
+    "display_name": "VAE 오디오 디코드 (타일)",
+    "inputs": {
+      "overlap": {
+        "name": "오버랩"
+      },
+      "samples": {
+        "name": "샘플"
+      },
+      "tile_size": {
+        "name": "타일 크기"
+      },
+      "vae": {
+        "name": "vae"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
   "VAEDecodeHunyuan3D": {
     "display_name": "VAEDecodeHunyuan3D",
     "inputs": {

src/locales/pt-BR/nodeDefs.json

@@ -2020,6 +2020,20 @@
       }
     }
   },
+  "CreateList": {
+    "display_name": "Criar Lista",
+    "inputs": {
+      "inputs": {
+        "name": "entradas"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "lista",
+        "tooltip": null
+      }
+    }
+  },
   "CreateVideo": {
     "description": "Crie um vídeo a partir de imagens.",
     "display_name": "Criar Vídeo",
@@ -6427,7 +6441,9 @@
   "Load3D": {
     "display_name": "Carregar 3D & Animação",
     "inputs": {
-      "clear": {},
+      "clear": {
+        "": "limpar"
+      },
       "height": {
         "name": "altura"
       },
@@ -6437,8 +6453,12 @@
       "model_file": {
         "name": "arquivo_do_modelo"
       },
-      "upload 3d model": {},
-      "upload extra resources": {},
+      "upload 3d model": {
+        "": "enviar modelo 3D"
+      },
+      "upload extra resources": {
+        "": "enviar recursos extras"
+      },
       "width": {
         "name": "largura"
       }
@@ -13953,6 +13973,9 @@
       "bpm": {
         "name": "bpm"
       },
+      "cfg_scale": {
+        "name": "cfg_scale"
+      },
       "clip": {
         "name": "clip"
       },
@@ -13962,6 +13985,10 @@
       "duration": {
         "name": "duração"
       },
+      "generate_audio_codes": {
+        "name": "gerar_códigos_de_áudio",
+        "tooltip": "Ativa o LLM que gera códigos de áudio. Isso pode ser lento, mas aumentará a qualidade do áudio gerado. Desative se você fornecer uma referência de áudio ao modelo."
+      },
       "keyscale": {
         "name": "escala tonal"
       },
@@ -13977,8 +14004,17 @@
       "tags": {
         "name": "tags"
       },
+      "temperature": {
+        "name": "temperatura"
+      },
       "timesignature": {
         "name": "fórmula de compasso"
+      },
+      "top_k": {
+        "name": "top_k"
+      },
+      "top_p": {
+        "name": "top_p"
       }
     },
     "outputs": {
@@ -14913,6 +14949,28 @@
       }
     }
   },
+  "VAEDecodeAudioTiled": {
+    "display_name": "VAE Decodificar Áudio (Em Blocos)",
+    "inputs": {
+      "overlap": {
+        "name": "sobreposição"
+      },
+      "samples": {
+        "name": "amostras"
+      },
+      "tile_size": {
+        "name": "tamanho_do_bloco"
+      },
+      "vae": {
+        "name": "vae"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
   "VAEDecodeHunyuan3D": {
     "display_name": "VAEDecodeHunyuan3D",
     "inputs": {

src/locales/ru/nodeDefs.json

@@ -2018,6 +2018,20 @@
       }
     }
   },
+  "CreateList": {
+    "display_name": "Создать список",
+    "inputs": {
+      "inputs": {
+        "name": "входные данные"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "список",
+        "tooltip": null
+      }
+    }
+  },
   "CreateVideo": {
     "description": "Создайте видео из изображений.",
     "display_name": "Создать видео",
@@ -6418,7 +6432,9 @@
   "Load3D": {
     "display_name": "Загрузить 3D",
     "inputs": {
-      "clear": "Очистить",
+      "clear": {
+        "": "Очистить"
+      },
       "height": {
         "name": "высота"
       },
@@ -6428,8 +6444,12 @@
       "model_file": {
         "name": "файл модели"
       },
-      "upload 3d model": "Загрузить 3D-модель",
-      "upload extra resources": "Загрузить дополнительные ресурсы",
+      "upload 3d model": {
+        "": "Загрузить 3D-модель"
+      },
+      "upload extra resources": {
+        "": "Загрузить дополнительные ресурсы"
+      },
       "width": {
         "name": "ширина"
       }
@@ -13940,6 +13960,9 @@
       "bpm": {
         "name": "bpm"
       },
+      "cfg_scale": {
+        "name": "cfg_scale"
+      },
       "clip": {
         "name": "clip"
       },
@@ -13949,6 +13972,10 @@
       "duration": {
         "name": "длительность"
       },
+      "generate_audio_codes": {
+        "name": "генерировать аудиокоды",
+        "tooltip": "Включить LLM, который генерирует аудиокоды. Это может быть медленно, но повысит качество сгенерированного аудио. Отключите, если вы предоставляете модели аудиореференс."
+      },
       "keyscale": {
         "name": "тональность"
       },
@@ -13964,8 +13991,17 @@
       "tags": {
         "name": "теги"
       },
+      "temperature": {
+        "name": "температура"
+      },
       "timesignature": {
         "name": "размер"
+      },
+      "top_k": {
+        "name": "top_k"
+      },
+      "top_p": {
+        "name": "top_p"
       }
     },
     "outputs": {
@@ -14900,6 +14936,28 @@
       }
     }
   },
+  "VAEDecodeAudioTiled": {
+    "display_name": "VAE декодирование аудио (плитками)",
+    "inputs": {
+      "overlap": {
+        "name": "перекрытие"
+      },
+      "samples": {
+        "name": "образцы"
+      },
+      "tile_size": {
+        "name": "размер плитки"
+      },
+      "vae": {
+        "name": "vae"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
   "VAEDecodeHunyuan3D": {
     "display_name": "VAEDecodeHunyuan3D",
     "inputs": {

src/locales/tr/nodeDefs.json

@@ -2018,6 +2018,20 @@
       }
     }
   },
+  "CreateList": {
+    "display_name": "Liste Oluştur",
+    "inputs": {
+      "inputs": {
+        "name": "girdiler"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "liste",
+        "tooltip": null
+      }
+    }
+  },
   "CreateVideo": {
     "description": "Görüntülerden bir video oluşturun.",
     "display_name": "Video Oluştur",
@@ -13946,6 +13960,9 @@
       "bpm": {
         "name": "bpm"
       },
+      "cfg_scale": {
+        "name": "cfg ölçeği"
+      },
       "clip": {
         "name": "clip"
       },
@@ -13955,6 +13972,10 @@
       "duration": {
         "name": "süre"
       },
+      "generate_audio_codes": {
+        "name": "ses kodlarını üret",
+        "tooltip": "Ses kodlarını üreten LLM'i etkinleştir. Bu işlem yavaş olabilir ancak üretilen sesin kalitesini artırır. Eğer modele bir ses referansı veriyorsanız bunu kapatın."
+      },
       "keyscale": {
         "name": "ton anahtarı"
       },
@@ -13970,8 +13991,17 @@
       "tags": {
         "name": "etiketler"
       },
+      "temperature": {
+        "name": "sıcaklık"
+      },
       "timesignature": {
         "name": "zaman imzası"
+      },
+      "top_k": {
+        "name": "top_k"
+      },
+      "top_p": {
+        "name": "top_p"
       }
     },
     "outputs": {
@@ -14906,6 +14936,28 @@
       }
     }
   },
+  "VAEDecodeAudioTiled": {
+    "display_name": "VAE Sesini Çöz (Döşemeli)",
+    "inputs": {
+      "overlap": {
+        "name": "örtüşme"
+      },
+      "samples": {
+        "name": "örnekler"
+      },
+      "tile_size": {
+        "name": "döşeme boyutu"
+      },
+      "vae": {
+        "name": "vae"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
   "VAEDecodeHunyuan3D": {
     "display_name": "VAEKodÇözmeHunyuan3D",
     "inputs": {

src/locales/zh-TW/nodeDefs.json

@@ -2018,6 +2018,20 @@
       }
     }
   },
+  "CreateList": {
+    "display_name": "建立清單",
+    "inputs": {
+      "inputs": {
+        "name": "輸入"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "清單",
+        "tooltip": null
+      }
+    }
+  },
   "CreateVideo": {
     "description": "從圖片建立影片。",
     "display_name": "建立影片",
@@ -13944,6 +13958,9 @@
       "bpm": {
         "name": "每分鐘節拍數"
       },
+      "cfg_scale": {
+        "name": "cfg_scale"
+      },
       "clip": {
         "name": "clip"
       },
@@ -13953,6 +13970,10 @@
       "duration": {
         "name": "時長"
       },
+      "generate_audio_codes": {
+        "name": "產生音訊編碼",
+        "tooltip": "啟用產生音訊編碼的 LLM。這可能會較慢，但能提升產生音訊的品質。如果你已提供模型音訊參考，請關閉此選項。"
+      },
       "keyscale": {
         "name": "調性"
       },
@@ -13968,8 +13989,17 @@
       "tags": {
         "name": "標籤"
       },
+      "temperature": {
+        "name": "temperature"
+      },
       "timesignature": {
         "name": "拍號"
+      },
+      "top_k": {
+        "name": "top_k"
+      },
+      "top_p": {
+        "name": "top_p"
       }
     },
     "outputs": {
@@ -14904,6 +14934,28 @@
       }
     }
   },
+  "VAEDecodeAudioTiled": {
+    "display_name": "VAE 解碼音訊（分塊）",
+    "inputs": {
+      "overlap": {
+        "name": "重疊"
+      },
+      "samples": {
+        "name": "樣本"
+      },
+      "tile_size": {
+        "name": "分塊大小"
+      },
+      "vae": {
+        "name": "vae"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
   "VAEDecodeHunyuan3D": {
     "display_name": "VAE 解碼 Hunyuan3D",
     "inputs": {

src/locales/zh/nodeDefs.json

@@ -2020,6 +2020,20 @@
       }
     }
   },
+  "CreateList": {
+    "display_name": "创建列表",
+    "inputs": {
+      "inputs": {
+        "name": "输入"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "列表",
+        "tooltip": null
+      }
+    }
+  },
   "CreateVideo": {
     "description": "从图像创建视频。",
     "display_name": "创建视频",
@@ -13953,6 +13967,9 @@
       "bpm": {
         "name": "每分钟节拍数"
       },
+      "cfg_scale": {
+        "name": "cfg_scale"
+      },
       "clip": {
         "name": "clip"
       },
@@ -13962,6 +13979,10 @@
       "duration": {
         "name": "时长"
       },
+      "generate_audio_codes": {
+        "name": "生成音频代码",
+        "tooltip": "启用生成音频代码的LLM。这可能较慢，但会提升生成音频的质量。如果你为模型提供了音频参考，请关闭此选项。"
+      },
       "keyscale": {
         "name": "调式"
       },
@@ -13977,8 +13998,17 @@
       "tags": {
         "name": "标签"
       },
+      "temperature": {
+        "name": "temperature"
+      },
       "timesignature": {
         "name": "拍号"
+      },
+      "top_k": {
+        "name": "top_k"
+      },
+      "top_p": {
+        "name": "top_p"
       }
     },
     "outputs": {
@@ -14913,6 +14943,28 @@
       }
     }
   },
+  "VAEDecodeAudioTiled": {
+    "display_name": "VAE解码音频（分块）",
+    "inputs": {
+      "overlap": {
+        "name": "重叠"
+      },
+      "samples": {
+        "name": "样本"
+      },
+      "tile_size": {
+        "name": "分块大小"
+      },
+      "vae": {
+        "name": "vae"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
   "VAEDecodeHunyuan3D": {
     "display_name": "VAE解码（Hunyuan3D）",
     "inputs": {

src/platform/assets/composables/useMediaAssetActions.ts

@@ -65,15 +65,8 @@ export function useMediaAssetActions() {
 
     try {
       const filename = targetAsset.name
-      let downloadUrl: string
-
-      // In cloud, use preview_url directly (from cloud storage)
-      // In OSS/localhost, use the /view endpoint
-      if (isCloud && targetAsset.preview_url) {
-        downloadUrl = targetAsset.preview_url
-      } else {
-        downloadUrl = getAssetUrl(targetAsset)
-      }
+      // Prefer preview_url (already includes subfolder) with getAssetUrl as fallback
+      const downloadUrl = targetAsset.preview_url || getAssetUrl(targetAsset)
 
       downloadFile(downloadUrl, filename)
 
@@ -103,15 +96,8 @@ export function useMediaAssetActions() {
     try {
       assets.forEach((asset) => {
         const filename = asset.name
-        let downloadUrl: string
-
-        // In cloud, use preview_url directly (from GCS or other cloud storage)
-        // In OSS/localhost, use the /view endpoint
-        if (isCloud && asset.preview_url) {
-          downloadUrl = asset.preview_url
-        } else {
-          downloadUrl = getAssetUrl(asset)
-        }
+        // Prefer preview_url (already includes subfolder) with getAssetUrl as fallback
+        const downloadUrl = asset.preview_url || getAssetUrl(asset)
         downloadFile(downloadUrl, filename)
       })
 

src/platform/assets/services/assetService.ts

@@ -487,7 +487,7 @@ function createAssetService() {
     url: string
     name: string
     tags?: string[]
-    user_metadata?: Record<string, any>
+    user_metadata?: Record<string, unknown>
     preview_id?: string
   }): Promise<AssetItem & { created_new: boolean }> {
     const res = await api.fetchApi(ASSETS_ENDPOINT, {
@@ -525,7 +525,7 @@ function createAssetService() {
     data: string
     name: string
     tags?: string[]
-    user_metadata?: Record<string, any>
+    user_metadata?: Record<string, unknown>
   }): Promise<AssetItem & { created_new: boolean }> {
     // Validate that data is a data URL
     if (!params.data || !params.data.startsWith('data:')) {

src/platform/assets/utils/assetUrlUtil.ts

@@ -8,7 +8,7 @@ import { getAssetType } from './assetTypeUtil'
 
 /**
  * Get the download/view URL for an asset
- * Constructs the proper URL with filename encoding and type parameter
+ * Constructs the proper URL with filename encoding, type, and subfolder parameters
  *
  * @param asset The asset to get URL for
  * @param defaultType Default type if asset doesn't have tags (default: 'output')
@@ -23,7 +23,12 @@ export function getAssetUrl(
   defaultType: 'input' | 'output' = 'output'
 ): string {
   const assetType = getAssetType(asset, defaultType)
-  return api.apiURL(
-    `/view?filename=${encodeURIComponent(asset.name)}&type=${assetType}`
-  )
+  const subfolder = asset.user_metadata?.subfolder
+  const params = new URLSearchParams()
+  params.set('filename', asset.name)
+  params.set('type', assetType)
+  if (typeof subfolder === 'string' && subfolder) {
+    params.set('subfolder', subfolder)
+  }
+  return api.apiURL(`/view?${params}`)
 }

src/platform/cloud/subscription/composables/useSubscription.test.ts

@@ -38,7 +38,7 @@ vi.mock('@/composables/useErrorHandling', () => ({
   useErrorHandling: vi.fn(() => ({
     wrapWithErrorHandlingAsync: vi.fn(
       (fn, errorHandler) =>
-        async (...args: any[]) => {
+        async (...args: Parameters<typeof fn>) => {
           try {
             return await fn(...args)
           } catch (error) {

src/platform/nodeReplacement/nodeReplacementStore.test.ts

@@ -22,7 +22,8 @@ function mockSettingStore(enabled: boolean) {
         return enabled
       }
       return false
-    })
+    }),
+    load: vi.fn().mockResolvedValue(undefined)
   })
 }
 
@@ -227,6 +228,16 @@ describe('useNodeReplacementStore', () => {
       consoleErrorSpy.mockRestore()
     })
 
+    it('should not fetch when feature is disabled', async () => {
+      vi.mocked(fetchNodeReplacements).mockResolvedValue({})
+      store = createStore(false)
+
+      await store.load()
+
+      expect(fetchNodeReplacements).not.toHaveBeenCalled()
+      expect(store.isLoaded).toBe(false)
+    })
+
     it('should not re-fetch when called twice', async () => {
       vi.mocked(fetchNodeReplacements).mockResolvedValue(mockReplacements)
       store = createStore()
@@ -236,15 +247,5 @@ describe('useNodeReplacementStore', () => {
 
       expect(fetchNodeReplacements).toHaveBeenCalledOnce()
     })
-
-    it('should not call API when setting is disabled', async () => {
-      vi.mocked(fetchNodeReplacements).mockResolvedValue(mockReplacements)
-      store = createStore(false)
-
-      await store.load()
-
-      expect(fetchNodeReplacements).not.toHaveBeenCalled()
-      expect(store.isLoaded).toBe(false)
-    })
   })
 })

src/platform/nodeReplacement/nodeReplacementStore.ts

@@ -15,7 +15,7 @@ export const useNodeReplacementStore = defineStore('nodeReplacement', () => {
   )
 
   async function load() {
-    if (!isEnabled.value || isLoaded.value) return
+    if (isLoaded.value || !isEnabled.value) return
 
     try {
       replacements.value = await fetchNodeReplacements()

src/platform/nodeReplacement/useNodeReplacement.ts

@@ -1,195 +0,0 @@
-import { clone } from 'es-toolkit/compat'
-
-import { t } from '@/i18n'
-import { useToastStore } from '@/platform/updates/common/toastStore'
-import type { ComfyWorkflowJSON } from '@/platform/workflow/validation/schemas/workflowSchema'
-import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
-import { app } from '@/scripts/app'
-import type { MissingNodeType } from '@/types/comfy'
-
-import { useNodeReplacementStore } from './nodeReplacementStore'
-
-/**
- * Modify workflow data to replace missing node types with their replacements
- * @param graphData The workflow JSON data
- * @param replacements Map of old node type to new node type
- * @returns Modified workflow data with node types replaced
- */
-function applyNodeReplacements(
-  graphData: ComfyWorkflowJSON,
-  replacements: Map<string, string>
-): ComfyWorkflowJSON {
-  const modifiedData = clone(graphData)
-
-  // Helper function to process nodes array
-  function processNodes(nodes: ComfyWorkflowJSON['nodes']) {
-    if (!Array.isArray(nodes)) return
-
-    for (const node of nodes) {
-      const replacement = replacements.get(node.type)
-      if (replacement) {
-        node.type = replacement
-      }
-    }
-  }
-
-  // Process top-level nodes
-  processNodes(modifiedData.nodes)
-
-  // Process nodes in subgraphs
-  if (modifiedData.definitions?.subgraphs) {
-    for (const subgraph of modifiedData.definitions.subgraphs) {
-      if (subgraph && 'nodes' in subgraph) {
-        processNodes(subgraph.nodes as ComfyWorkflowJSON['nodes'])
-      }
-    }
-  }
-
-  return modifiedData
-}
-
-export function useNodeReplacement() {
-  const nodeReplacementStore = useNodeReplacementStore()
-  const workflowStore = useWorkflowStore()
-  const toastStore = useToastStore()
-
-  /**
-   * Build a map of replacements from missing node types
-   */
-  function buildReplacementMap(
-    missingNodeTypes: MissingNodeType[]
-  ): Map<string, string> {
-    const replacements = new Map<string, string>()
-
-    for (const nodeType of missingNodeTypes) {
-      if (typeof nodeType === 'object' && nodeType.isReplaceable) {
-        const replacement = nodeType.replacement
-        if (replacement) {
-          replacements.set(nodeType.type, replacement.new_node_id)
-        }
-      }
-    }
-
-    return replacements
-  }
-
-  /**
-   * Replace a single node type with its replacement
-   * This reloads the entire workflow with the replacement applied
-   * @param nodeType The type of the missing node to replace
-   * @returns true if replacement was successful
-   */
-  async function replaceNode(nodeType: string): Promise<boolean> {
-    const replacement = nodeReplacementStore.getReplacementFor(nodeType)
-    if (!replacement) {
-      console.warn(`No replacement found for node type: ${nodeType}`)
-      return false
-    }
-
-    const activeWorkflow = workflowStore.activeWorkflow
-    if (!activeWorkflow?.isLoaded) {
-      console.error('No active workflow or workflow not loaded')
-      return false
-    }
-
-    try {
-      // Use current graph state, not originalContent, to preserve prior replacements
-      const currentData =
-        app.rootGraph.serialize() as unknown as ComfyWorkflowJSON
-
-      // Create replacement map for single node
-      const replacements = new Map<string, string>()
-      replacements.set(nodeType, replacement.new_node_id)
-
-      // Apply replacements
-      const modifiedData = applyNodeReplacements(currentData, replacements)
-
-      // Reload the workflow with modified data
-      await app.loadGraphData(modifiedData, true, false, activeWorkflow, {
-        showMissingNodesDialog: true,
-        showMissingModelsDialog: true
-      })
-
-      toastStore.add({
-        severity: 'success',
-        summary: t('g.success'),
-        detail: t('nodeReplacement.replacedNode', { nodeType }),
-        life: 3000
-      })
-
-      return true
-    } catch (error) {
-      console.error('Failed to replace node:', error)
-      toastStore.add({
-        severity: 'error',
-        summary: t('g.error'),
-        detail: t('nodeReplacement.replaceFailed'),
-        life: 5000
-      })
-      return false
-    }
-  }
-
-  /**
-   * Replace all replaceable missing nodes
-   * This reloads the entire workflow with all replacements applied
-   * @param missingNodeTypes Array of missing node types (from dialog props)
-   * @returns Number of node types that were replaced
-   */
-  async function replaceAllNodes(
-    missingNodeTypes: MissingNodeType[]
-  ): Promise<number> {
-    const replacements = buildReplacementMap(missingNodeTypes)
-
-    if (replacements.size === 0) {
-      console.warn('No replaceable nodes found')
-      return 0
-    }
-
-    const activeWorkflow = workflowStore.activeWorkflow
-    if (!activeWorkflow?.isLoaded) {
-      console.error('No active workflow or workflow not loaded')
-      return 0
-    }
-
-    try {
-      // Use current graph state, not originalContent, to preserve any prior changes
-      const currentData =
-        app.rootGraph.serialize() as unknown as ComfyWorkflowJSON
-
-      // Apply all replacements
-      const modifiedData = applyNodeReplacements(currentData, replacements)
-
-      // Reload the workflow with modified data
-      await app.loadGraphData(modifiedData, true, false, activeWorkflow, {
-        showMissingNodesDialog: true,
-        showMissingModelsDialog: true
-      })
-
-      toastStore.add({
-        severity: 'success',
-        summary: t('g.success'),
-        detail: t('nodeReplacement.replacedAllNodes', {
-          count: replacements.size
-        }),
-        life: 3000
-      })
-
-      return replacements.size
-    } catch (error) {
-      console.error('Failed to replace nodes:', error)
-      toastStore.add({
-        severity: 'error',
-        summary: t('g.error'),
-        detail: t('nodeReplacement.replaceFailed'),
-        life: 5000
-      })
-      return 0
-    }
-  }
-
-  return {
-    replaceNode,
-    replaceAllNodes
-  }
-}

src/platform/settings/constants/coreSettings.ts

@@ -1198,7 +1198,7 @@ export const CORE_SETTINGS: SettingParams[] = [
     tooltip:
       'When enabled, missing nodes can be automatically replaced with their newer equivalents if a replacement mapping exists.',
     type: 'boolean',
-    defaultValue: true,
+    defaultValue: false,
     experimental: true,
     versionAdded: '1.40.0'
   }

src/platform/settings/settingStore.ts

@@ -46,7 +46,7 @@ function onChange(
 }
 
 export const useSettingStore = defineStore('setting', () => {
-  const settingValues = ref<Record<string, any>>({})
+  const settingValues = ref<Partial<Settings>>({})
   const settingsById = ref<Record<string, SettingParams>>({})
 
   const {
@@ -87,7 +87,7 @@ export const useSettingStore = defineStore('setting', () => {
    * @param key - The key of the setting to check.
    * @returns Whether the setting exists.
    */
-  function exists(key: string) {
+  function exists<K extends keyof Settings>(key: K) {
     return settingValues.value[key] !== undefined
   }
 
@@ -118,7 +118,7 @@ export const useSettingStore = defineStore('setting', () => {
    */
   function get<K extends keyof Settings>(key: K): Settings[K] {
     // Clone the value when returning to prevent external mutations
-    return _.cloneDeep(settingValues.value[key] ?? getDefaultValue(key))
+    return _.cloneDeep(settingValues.value[key] ?? getDefaultValue(key)!)
   }
 
   /**

src/platform/workflow/management/stores/workflowStore.ts

@@ -222,7 +222,7 @@ interface WorkflowStore {
   activeSubgraph: Subgraph | undefined
   /** Updates the {@link subgraphNamePath} and {@link isSubgraphActive} values. */
   updateActiveGraph: () => void
-  executionIdToCurrentId: (id: string) => any
+  executionIdToCurrentId: (id: string) => string | undefined
   nodeIdToNodeLocatorId: (nodeId: NodeId, subgraph?: Subgraph) => NodeLocatorId
   nodeToNodeLocatorId: (node: LGraphNode) => NodeLocatorId
   nodeExecutionIdToNodeLocatorId: (
@@ -718,7 +718,7 @@ export const useWorkflowStore = defineStore('workflow', () => {
   }
 
   //FIXME: use existing util function
-  const executionIdToCurrentId = (id: string) => {
+  const executionIdToCurrentId = (id: string): string | undefined => {
     const subgraph = activeSubgraph.value
 
     // Short-circuit: ID belongs to the parent workflow / no active subgraph

src/platform/workflow/persistence/composables/useWorkflowPersistence.test.ts

@@ -4,6 +4,7 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import type * as I18n from 'vue-i18n'
 
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
+import type { WorkflowDraftSnapshot } from '@/platform/workflow/persistence/base/draftCache'
 import { useWorkflowPersistence } from '@/platform/workflow/persistence/composables/useWorkflowPersistence'
 import { useWorkflowDraftStore } from '@/platform/workflow/persistence/stores/workflowDraftStore'
 import { defaultGraphJSON } from '@/scripts/defaultGraph'
@@ -191,7 +192,7 @@ describe('useWorkflowPersistence', () => {
 
     const drafts = JSON.parse(
       localStorage.getItem('Comfy.Workflow.Drafts') ?? '{}'
-    ) as Record<string, any>
+    ) as Record<string, WorkflowDraftSnapshot>
 
     expect(Object.keys(drafts).length).toBe(32)
     expect(drafts['workflows/Draft0.json']).toBeUndefined()

src/renderer/extensions/vueNodes/components/LGraphNode.test.ts

@@ -184,7 +184,7 @@ describe('LGraphNode', () => {
 
     const wrapper = mountLGraphNode({ nodeData: mockNodeData })
 
-    expect(wrapper.classes()).toContain('outline-2')
+    expect(wrapper.classes()).toContain('outline-3')
     expect(wrapper.classes()).toContain('outline-node-component-outline')
   })
 

src/renderer/extensions/vueNodes/components/LGraphNode.vue

@@ -17,7 +17,7 @@
         // hover (only when node should handle events)
         shouldHandleNodePointerEvents &&
           'hover:ring-7 ring-node-component-ring',
-        'outline-transparent outline-2 focus-visible:outline-node-component-outline',
+        'outline-transparent outline-3 focus-visible:outline-node-component-outline',
         borderClass,
         outlineClass,
         cursorClass,

src/renderer/extensions/vueNodes/components/LGraphNodePreview.vue

@@ -36,6 +36,7 @@ import type {
   INodeInputSlot,
   INodeOutputSlot
 } from '@/lib/litegraph/src/interfaces'
+import type { IWidgetOptions } from '@/lib/litegraph/src/types/widgets'
 import { RenderShape } from '@/lib/litegraph/src/litegraph'
 import NodeHeader from '@/renderer/extensions/vueNodes/components/NodeHeader.vue'
 import NodeSlots from '@/renderer/extensions/vueNodes/components/NodeSlots.vue'
@@ -69,8 +70,11 @@ const nodeData = computed<VueNodeData>(() => {
       options: {
         hidden: input.hidden,
         advanced: input.advanced,
-        values: input.type === 'COMBO' ? input.options : undefined // For combo widgets
-      }
+        values:
+          input.type === 'COMBO' && Array.isArray(input.options)
+            ? input.options
+            : undefined
+      } satisfies IWidgetOptions
     }))
 
   const inputs: INodeInputSlot[] = Object.entries(nodeDef.inputs || {})

src/renderer/extensions/vueNodes/widgets/components/WidgetChart.vue

@@ -16,10 +16,12 @@ import type { ChartData } from 'chart.js'
 import Chart from 'primevue/chart'
 import { computed } from 'vue'
 
+import type { IWidgetOptions } from '@/lib/litegraph/src/types/widgets'
 import type { ChartInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 
-type ChartWidgetOptions = NonNullable<ChartInputSpec['options']>
+type ChartWidgetOptions = NonNullable<ChartInputSpec['options']> &
+  IWidgetOptions
 
 const value = defineModel<ChartData>({ required: true })
 

src/renderer/extensions/vueNodes/widgets/components/WidgetColorPicker.vue

@@ -38,10 +38,12 @@ import {
   filterWidgetProps
 } from '@/utils/widgetPropFilter'
 
+import type { IWidgetOptions } from '@/lib/litegraph/src/types/widgets'
+
 import { WidgetInputBaseClass } from './layout'
 import WidgetLayoutField from './layout/WidgetLayoutField.vue'
 
-type WidgetOptions = { format?: ColorFormat } & Record<string, unknown>
+type WidgetOptions = IWidgetOptions & { format?: ColorFormat }
 
 const props = defineProps<{
   widget: SimplifiedWidget<string, WidgetOptions>

src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberInput.vue

@@ -67,30 +67,40 @@ function updateValue(e: UIEvent) {
   const { target } = e
   if (!(target instanceof HTMLInputElement)) return
   const parsed = evaluateInput(unformatValue(target.value))
-  if (parsed !== undefined)
-    modelValue.value = Math.min(
-      filteredProps.value.max,
-      Math.max(filteredProps.value.min, parsed)
-    )
-  else target.value = formattedValue.value
+  if (parsed !== undefined) {
+    const max = filteredProps.value.max ?? Number.MAX_VALUE
+    const min = filteredProps.value.min ?? -Number.MAX_VALUE
+    modelValue.value = Math.min(max, Math.max(min, parsed))
+  } else target.value = formattedValue.value
 
   textEdit.value = false
 }
 
-const canDecrement = computed(
-  () =>
-    modelValue.value > filteredProps.value.min &&
-    !props.widget.options?.disabled
-)
-const canIncrement = computed(
-  () =>
-    modelValue.value < filteredProps.value.max &&
-    !props.widget.options?.disabled
-)
+interface NumericWidgetOptions {
+  min: number
+  max: number
+  step?: number
+  step2?: number
+  precision?: number
+  disabled?: boolean
+  useGrouping?: boolean
+}
 
-const filteredProps = computed(() =>
-  filterWidgetProps(props.widget.options, INPUT_EXCLUDED_PROPS)
-)
+const filteredProps = computed(() => {
+  const filtered = filterWidgetProps(props.widget.options, INPUT_EXCLUDED_PROPS)
+  return filtered as Partial<NumericWidgetOptions>
+})
+
+const isDisabled = computed(() => props.widget.options?.disabled ?? false)
+
+const canDecrement = computed(() => {
+  const min = filteredProps.value.min ?? -Number.MAX_VALUE
+  return modelValue.value > min && !isDisabled.value
+})
+const canIncrement = computed(() => {
+  const max = filteredProps.value.max ?? Number.MAX_VALUE
+  return modelValue.value < max && !isDisabled.value
+})
 
 // Get the precision value for proper number formatting
 const precision = computed(() => {
@@ -108,7 +118,7 @@ const stepValue = computed(() => {
   // Use step / 10 for custom large step values (> 10) to match litegraph behavior
   // This is important for extensions like Impact Pack that use custom step values (e.g., 640)
   // We skip default step values (1, 10) to avoid affecting normal widgets
-  const step = props.widget.options?.step
+  const step = props.widget.options?.step as number | undefined
   if (step !== undefined && step > 10) {
     return Number(step) / 10
   }
@@ -140,17 +150,16 @@ const buttonsDisabled = computed(() => {
 })
 
 function updateValueBy(delta: number) {
-  modelValue.value = Math.min(
-    filteredProps.value.max,
-    Math.max(filteredProps.value.min, modelValue.value + delta)
-  )
+  const max = filteredProps.value.max ?? Number.MAX_VALUE
+  const min = filteredProps.value.min ?? -Number.MAX_VALUE
+  modelValue.value = Math.min(max, Math.max(min, modelValue.value + delta))
 }
 
 const dragValue = ref<number>()
 const dragDelta = ref(0)
 function handleMouseDown(e: PointerEvent) {
   if (e.button > 0) return
-  if (props.widget.options?.disabled) return
+  if (isDisabled.value) return
   const { target } = e
   if (!(target instanceof HTMLElement)) return
   target.setPointerCapture(e.pointerId)
@@ -163,10 +172,9 @@ function handleMouseMove(e: PointerEvent) {
   const unclippedValue =
     dragValue.value + ((dragDelta.value / 10) | 0) * stepValue.value
   dragDelta.value %= 10
-  dragValue.value = Math.min(
-    filteredProps.value.max,
-    Math.max(filteredProps.value.min, unclippedValue)
-  )
+  const max = filteredProps.value.max ?? Number.MAX_VALUE
+  const min = filteredProps.value.min ?? -Number.MAX_VALUE
+  dragValue.value = Math.min(max, Math.max(min, unclippedValue))
 }
 function handleMouseUp() {
   const newValue = dragValue.value
@@ -248,7 +256,7 @@ const sliderWidth = computed(() => {
           :value="formattedValue"
           role="spinbutton"
           tabindex="0"
-          :disabled="widget.options?.disabled"
+          :disabled="isDisabled"
           autocomplete="off"
           autocorrect="off"
           spellcheck="false"

src/renderer/extensions/vueNodes/widgets/components/WidgetInputText.test.ts

@@ -5,6 +5,7 @@ import type { InputTextProps } from 'primevue/inputtext'
 import Textarea from 'primevue/textarea'
 import { describe, expect, it } from 'vitest'
 
+import type { IWidgetOptions } from '@/lib/litegraph/src/types/widgets'
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 
 import WidgetInputText from './WidgetInputText.vue'
@@ -18,7 +19,7 @@ describe('WidgetInputText Value Binding', () => {
     name: 'test_input',
     type: 'string',
     value,
-    options,
+    options: options as IWidgetOptions,
     callback
   })
 

src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDefault.vue

@@ -53,7 +53,7 @@ const props = defineProps<Props>()
 
 const modelValue = defineModel<string | undefined>({
   default(props: Props) {
-    return props.widget.options?.values?.[0] || ''
+    return props.widget.options?.values?.[0] ?? ''
   }
 })
 

src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDropdown.test.ts

@@ -31,7 +31,7 @@ describe('WidgetSelectDropdown custom label mapping', () => {
     value: string = 'img_001.png',
     options: {
       values?: string[]
-      getOptionLabel?: (value: string | null) => string
+      getOptionLabel?: (value?: string | null) => string
     } = {},
     spec?: ComboInputSpec
   ): SimplifiedWidget<string | undefined> => ({
@@ -82,7 +82,7 @@ describe('WidgetSelectDropdown custom label mapping', () => {
 
   describe('when custom labels are provided via getOptionLabel', () => {
     it('displays custom labels while preserving original values', () => {
-      const getOptionLabel = vi.fn((value: string | null) => {
+      const getOptionLabel = vi.fn((value?: string | null) => {
         if (!value) return 'No file'
         const mapping: Record<string, string> = {
           'img_001.png': 'Vacation Photo',
@@ -112,7 +112,7 @@ describe('WidgetSelectDropdown custom label mapping', () => {
     })
 
     it('emits original values when items with custom labels are selected', async () => {
-      const getOptionLabel = vi.fn((value: string | null) => {
+      const getOptionLabel = vi.fn((value?: string | null) => {
         if (!value) return 'No file'
         return `Custom: ${value}`
       })
@@ -134,7 +134,7 @@ describe('WidgetSelectDropdown custom label mapping', () => {
     })
 
     it('falls back to original value when label mapping fails', () => {
-      const getOptionLabel = vi.fn((value: string | null) => {
+      const getOptionLabel = vi.fn((value?: string | null) => {
         if (value === 'photo_abc.jpg') {
           throw new Error('Mapping failed')
         }
@@ -163,7 +163,7 @@ describe('WidgetSelectDropdown custom label mapping', () => {
     })
 
     it('falls back to original value when label mapping returns empty string', () => {
-      const getOptionLabel = vi.fn((value: string | null) => {
+      const getOptionLabel = vi.fn((value?: string | null) => {
         if (value === 'photo_abc.jpg') {
           return ''
         }
@@ -185,7 +185,7 @@ describe('WidgetSelectDropdown custom label mapping', () => {
     })
 
     it('falls back to original value when label mapping returns undefined', () => {
-      const getOptionLabel = vi.fn((value: string | null) => {
+      const getOptionLabel = vi.fn((value?: string | null) => {
         if (value === 'hash789.png') {
           return undefined as unknown as string
         }
@@ -209,7 +209,7 @@ describe('WidgetSelectDropdown custom label mapping', () => {
 
   describe('output items with custom label mapping', () => {
     it('applies custom label mapping to output items from queue history', () => {
-      const getOptionLabel = vi.fn((value: string | null) => {
+      const getOptionLabel = vi.fn((value?: string | null) => {
         if (!value) return 'No file'
         return `Output: ${value}`
       })

src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDropdown.vue

@@ -57,7 +57,7 @@ provide(
 
 const modelValue = defineModel<string | undefined>({
   default(props: Props) {
-    return props.widget.options?.values?.[0] || ''
+    return props.widget.options?.values?.[0] ?? ''
   }
 })
 
@@ -73,7 +73,8 @@ const combinedProps = computed(() => ({
 }))
 
 const getAssetData = () => {
-  const nodeType = props.widget.options?.nodeType ?? props.nodeType
+  const nodeType: string | undefined =
+    props.widget.options?.nodeType ?? props.nodeType
   if (props.isAssetMode && nodeType) {
     return useAssetWidgetData(toRef(nodeType))
   }
@@ -134,11 +135,11 @@ const inputItems = computed<FormDropdownItem[]>(() => {
     return []
   }
 
-  return values.map((value: string, index: number) => ({
+  return values.map((value, index) => ({
     id: `input-${index}`,
-    preview_url: getMediaUrl(value, 'input'),
-    name: value,
-    label: getDisplayLabel(value)
+    preview_url: getMediaUrl(String(value), 'input'),
+    name: String(value),
+    label: getDisplayLabel(String(value))
   }))
 })
 const outputItems = computed<FormDropdownItem[]>(() => {

src/renderer/extensions/vueNodes/widgets/components/WidgetTextarea.vue

@@ -15,8 +15,8 @@
       v-model="modelValue"
       :class="cn(WidgetInputBaseClass, 'size-full text-xs resize-none')"
       :placeholder
-      :readonly="widget.options?.read_only"
-      :disabled="widget.options?.read_only"
+      :readonly="isReadOnly"
+      :disabled="isReadOnly"
       fluid
       data-capture-wheel="true"
       @pointerdown.capture.stop
@@ -58,4 +58,6 @@ const filteredProps = computed(() =>
 
 const displayName = computed(() => widget.label || widget.name)
 const id = useId()
+
+const isReadOnly = computed(() => widget.options?.read_only ?? false)
 </script>

src/renderer/extensions/vueNodes/widgets/components/audio/AudioPreviewPlayer.test.ts

@@ -0,0 +1,86 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it, vi } from 'vitest'
+import { createI18n } from 'vue-i18n'
+
+import Button from '@/components/ui/button/Button.vue'
+import AudioPreviewPlayer from '@/renderer/extensions/vueNodes/widgets/components/audio/AudioPreviewPlayer.vue'
+
+const mockToastAdd = vi.fn()
+
+vi.mock('primevue/usetoast', () => ({
+  useToast: () => ({ add: mockToastAdd })
+}))
+
+vi.mock('@/base/common/downloadUtil', () => ({
+  downloadFile: vi.fn()
+}))
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: { en: {} }
+})
+
+function mountPlayer(modelValue?: string) {
+  return mount(AudioPreviewPlayer, {
+    props: {
+      modelValue,
+      hideWhenEmpty: false
+    },
+    global: {
+      plugins: [i18n],
+      components: { Button },
+      stubs: {
+        TieredMenu: true,
+        Slider: true
+      }
+    }
+  })
+}
+
+function findDownloadButton(wrapper: ReturnType<typeof mountPlayer>) {
+  return wrapper.find('[aria-label="g.downloadAudio"]')
+}
+
+describe('AudioPreviewPlayer', () => {
+  describe('download button', () => {
+    it('shows download button when audio is loaded', () => {
+      const wrapper = mountPlayer('http://example.com/audio.mp3')
+
+      expect(findDownloadButton(wrapper).exists()).toBe(true)
+    })
+
+    it('hides download button when no audio is loaded', () => {
+      const wrapper = mountPlayer()
+
+      expect(findDownloadButton(wrapper).exists()).toBe(false)
+    })
+
+    it('calls downloadFile when download button is clicked', async () => {
+      const { downloadFile } = await import('@/base/common/downloadUtil')
+
+      const wrapper = mountPlayer('http://example.com/audio.mp3')
+      await findDownloadButton(wrapper).trigger('click')
+
+      expect(downloadFile).toHaveBeenCalledWith('http://example.com/audio.mp3')
+    })
+
+    it('shows toast on download failure', async () => {
+      const { downloadFile } = await import('@/base/common/downloadUtil')
+      vi.mocked(downloadFile).mockImplementation(() => {
+        throw new Error('download failed')
+      })
+
+      const wrapper = mountPlayer('http://example.com/audio.mp3')
+      await findDownloadButton(wrapper).trigger('click')
+
+      expect(mockToastAdd).toHaveBeenCalledWith(
+        expect.objectContaining({
+          severity: 'error'
+        })
+      )
+
+      vi.mocked(downloadFile).mockReset()
+    })
+  })
+})

src/renderer/extensions/vueNodes/widgets/components/audio/AudioPreviewPlayer.vue

@@ -16,11 +16,11 @@
       <!-- Left Actions -->
       <div class="relative flex shrink-0 items-center justify-start gap-2">
         <!-- Play/Pause Button -->
-        <div
-          role="button"
-          :tabindex="0"
+        <Button
+          variant="textonly"
+          size="unset"
           :aria-label="$t('g.playPause')"
-          class="flex size-6 cursor-pointer items-center justify-center rounded hover:bg-interface-menu-component-surface-hovered"
+          class="size-6 rounded"
           @click="togglePlayPause"
         >
           <i
@@ -28,7 +28,7 @@
             class="text-secondary icon-[lucide--play] size-4"
           />
           <i v-else class="text-secondary icon-[lucide--pause] size-4" />
-        </div>
+        </Button>
 
         <!-- Time Display -->
         <div class="text-sm font-normal text-nowrap text-base-foreground">
@@ -57,11 +57,11 @@
       <!-- Right Actions -->
       <div class="relative flex shrink-0 items-center justify-start gap-2">
         <!-- Volume Button -->
-        <div
-          role="button"
-          :tabindex="0"
+        <Button
+          variant="textonly"
+          size="unset"
           :aria-label="$t('g.volume')"
-          class="flex size-6 cursor-pointer items-center justify-center rounded hover:bg-interface-menu-component-surface-hovered"
+          class="size-6 rounded"
           @click="toggleMute"
         >
           <i
@@ -73,19 +73,32 @@
             class="text-secondary icon-[lucide--volume-1] size-4"
           />
           <i v-else class="text-secondary icon-[lucide--volume-x] size-4" />
-        </div>
+        </Button>
+
+        <!-- Download Button -->
+        <Button
+          v-if="modelValue"
+          size="icon-sm"
+          variant="textonly"
+          :aria-label="$t('g.downloadAudio')"
+          :title="$t('g.downloadAudio')"
+          class="size-6 hover:bg-interface-menu-component-surface-hovered"
+          @click="handleDownload"
+        >
+          <i class="text-secondary icon-[lucide--download] size-4" />
+        </Button>
 
         <!-- Options Button -->
-        <div
+        <Button
           v-if="showOptionsButton"
-          role="button"
-          :tabindex="0"
+          variant="textonly"
+          size="unset"
           :aria-label="$t('g.moreOptions')"
-          class="flex size-6 cursor-pointer items-center justify-center rounded hover:bg-interface-menu-component-surface-hovered"
+          class="size-6 rounded"
           @click="toggleOptionsMenu"
         >
           <i class="text-secondary icon-[lucide--more-vertical] size-4" />
-        </div>
+        </Button>
       </div>
 
       <!-- Options Menu -->
@@ -137,11 +150,16 @@ import { computed, ref, useTemplateRef } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { whenever } from '@vueuse/core'
 
+import { useToast } from 'primevue/usetoast'
+
+import { downloadFile } from '@/base/common/downloadUtil'
+import Button from '@/components/ui/button/Button.vue'
 import { cn } from '@/utils/tailwindUtil'
 
 import { formatTime } from '../../utils/audioUtils'
 
 const { t } = useI18n()
+const toast = useToast()
 
 const props = withDefaults(
   defineProps<{
@@ -187,6 +205,20 @@ const togglePlayPause = () => {
   isPlaying.value = !isPlaying.value
 }
 
+const handleDownload = () => {
+  if (!modelValue.value) return
+  try {
+    downloadFile(modelValue.value)
+  } catch {
+    toast.add({
+      severity: 'error',
+      summary: t('g.error'),
+      detail: t('g.failedToDownloadFile'),
+      life: 3000
+    })
+  }
+}
+
 const toggleMute = () => {
   if (audioRef.value) {
     isMuted.value = !isMuted.value

src/renderer/extensions/vueNodes/widgets/composables/useProgressTextWidget.ts

@@ -42,11 +42,11 @@ export function useTextPreviewWidget(
           widgetValue.value = typeof value === 'string' ? value : String(value)
         },
         getMinHeight: () => options.minHeight ?? 42 + PADDING,
-        serialize: false,
         read_only: true
       },
       type: inputSpec.type
     })
+    widget.serialize = false
     addWidget(node, widget)
     return widget
   }

src/renderer/extensions/vueNodes/widgets/composables/useRemoteWidget.ts

@@ -32,7 +32,7 @@ async function getAuthHeaders() {
   return {}
 }
 
-const dataCache = new Map<string, CacheEntry<any>>()
+const dataCache = new Map<string, CacheEntry<unknown>>()
 
 const createCacheKey = (config: RemoteWidgetConfig): string => {
   const { route, query_params = {}, refresh = 0 } = config
@@ -49,7 +49,9 @@ const getBackoff = (retryCount: number) =>
   Math.min(1000 * Math.pow(2, retryCount), 512)
 
 const isInitialized = (entry: CacheEntry<unknown> | undefined) =>
-  entry?.data && entry?.timestamp && entry.timestamp > 0
+  entry?.data !== undefined &&
+  entry?.timestamp !== undefined &&
+  entry.timestamp > 0
 
 const isStale = (entry: CacheEntry<unknown> | undefined, ttl: number) =>
   entry?.timestamp && Date.now() - entry.timestamp >= ttl
@@ -128,9 +130,11 @@ export function useRemoteWidget<
     return !isLoaded && isInitialized(dataCache.get(cacheKey))
   }
 
-  const onFirstLoad = (data: T[]) => {
+  const onFirstLoad = (data: T | T[]) => {
     isLoaded = true
-    widget.value = data[0]
+    const nextValue =
+      Array.isArray(data) && data.length > 0 ? data[0] : undefined
+    widget.value = nextValue ?? (Array.isArray(data) ? defaultValue : data)
     widget.callback?.(widget.value)
     node.graph?.setDirtyCanvas(true)
   }
@@ -138,13 +142,16 @@ export function useRemoteWidget<
   const fetchValue = async () => {
     const entry = dataCache.get(cacheKey)
 
-    if (isFailed(entry)) return entry!.data
+    if (isFailed(entry)) return entry!.data as T
 
     const isValid =
       isInitialized(entry) && (isPermanent || !isStale(entry, refresh))
-    if (isValid || isBackingOff(entry) || isFetching(entry)) return entry!.data
+    if (isValid || isBackingOff(entry) || isFetching(entry))
+      return entry!.data as T
 
-    const currentEntry: CacheEntry<T> = entry || { data: defaultValue }
+    const currentEntry: CacheEntry<T> = (entry as
+      | CacheEntry<T>
+      | undefined) || { data: defaultValue }
     dataCache.set(cacheKey, currentEntry)
 
     try {

src/scripts/app.ts

@@ -1137,25 +1137,25 @@ export class ComfyApp {
         return
       }
       for (let n of nodes) {
+        // Patch T2IAdapterLoader to ControlNetLoader since they are the same node now
+        if (n.type == 'T2IAdapterLoader') n.type = 'ControlNetLoader'
+        if (n.type == 'ConditioningAverage ') n.type = 'ConditioningAverage' //typo fix
+        if (n.type == 'SDV_img2vid_Conditioning')
+          n.type = 'SVD_img2vid_Conditioning' //typo fix
+        if (n.type == 'Load3DAnimation') n.type = 'Load3D' // Animation node merged into Load3D
+        if (n.type == 'Preview3DAnimation') n.type = 'Preview3D' // Animation node merged into Load3D
+
         // Find missing node types
         if (!(n.type in LiteGraph.registered_node_types)) {
-          const nodeReplacementStore = useNodeReplacementStore()
-          const replacement = nodeReplacementStore.getReplacementFor(n.type)
-
-          // TODO: Remove debug log
-          console.log('[MissingNode]', n.type, {
-            isReplaceable: replacement !== null,
-            replacement,
-            allReplacements: nodeReplacementStore.replacements
-          })
-
-          missingNodeTypes.push({
-            type: n.type,
-            ...(path && { hint: `in subgraph '${path}'` }),
-            isReplaceable: replacement !== null,
-            replacement: replacement ?? undefined
-          })
-
+          // Include context about subgraph location if applicable
+          if (path) {
+            missingNodeTypes.push({
+              type: n.type,
+              hint: `in subgraph '${path}'`
+            })
+          } else {
+            missingNodeTypes.push(n.type)
+          }
           n.type = sanitizeNodeName(n.type)
         }
 

src/services/colorPaletteService.ts

@@ -188,7 +188,7 @@ export const useColorPaletteService = () => {
    * @param schema - The Zod schema object to analyze.
    * @returns Array of optional key names.
    */
-  const getOptionalKeys = (schema: z.ZodObject<any, any>) => {
+  const getOptionalKeys = (schema: z.ZodObject<z.ZodRawShape>) => {
     const optionalKeys: string[] = []
     const shape = schema.shape
 

src/services/dialogService.ts

@@ -7,7 +7,6 @@ import PromptDialogContent from '@/components/dialog/content/PromptDialogContent
 import { t } from '@/i18n'
 import { useTelemetry } from '@/platform/telemetry'
 import { isCloud } from '@/platform/distribution/types'
-import { useNodeReplacement } from '@/platform/nodeReplacement/useNodeReplacement'
 import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
 import { useDialogStore } from '@/stores/dialogStore'
 import type {
@@ -15,7 +14,6 @@ import type {
   ShowDialogOptions
 } from '@/stores/dialogStore'
 
-import type { MissingNodeType } from '@/types/comfy'
 import type { ConflictDetectionResult } from '@/workbench/extensions/manager/types/conflictDetectionTypes'
 import type { ComponentAttrs } from 'vue-component-type-helpers'
 
@@ -96,17 +94,6 @@ export const useDialogService = () => {
       lazyMissingNodesFooter()
     ])
 
-    const { replaceNode, replaceAllNodes } = useNodeReplacement()
-
-    const handleReplace = async (nodeType: string) => {
-      await replaceNode(nodeType)
-    }
-
-    const handleReplaceAll = async () => {
-      await replaceAllNodes(props.missingNodeTypes as MissingNodeType[])
-      dialogStore.closeDialog({ key: 'global-missing-nodes' })
-    }
-
     dialogStore.showDialog({
       key: 'global-missing-nodes',
       headerComponent: MissingNodesHeader,
@@ -126,14 +113,7 @@ export const useDialogService = () => {
           }
         }
       },
-      props: {
-        ...props,
-        onReplace: handleReplace
-      },
-      footerProps: {
-        missingNodeTypes: props.missingNodeTypes,
-        onReplaceAll: handleReplaceAll
-      }
+      props
     })
   }
 

src/services/litegraphService.ts

@@ -162,7 +162,7 @@ export const useLitegraphService = () => {
       const state =
         useExecutionStore().nodeLocationProgressStates[nodeLocatorId]?.state
       if (state === 'running') {
-        return { color: '#0f0' }
+        return { color: '#0f0', lineWidth: 3 }
       }
     }
     node.strokeStyles['dragOver'] = function (this: LGraphNode) {
@@ -172,7 +172,7 @@ export const useLitegraphService = () => {
     }
     node.strokeStyles['executionError'] = function (this: LGraphNode) {
       if (app.lastExecutionError?.node_id == this.id) {
-        return { color: '#f0f', lineWidth: 2 }
+        return { color: '#f0f', lineWidth: 3 }
       }
     }
   }
@@ -849,7 +849,7 @@ export const useLitegraphService = () => {
 
   function addNodeOnGraph(
     nodeDef: ComfyNodeDefV1 | ComfyNodeDefV2,
-    options: Record<string, any> = {}
+    options: Record<string, unknown> & { pos?: Point } = {}
   ): LGraphNode {
     options.pos ??= getCanvasCenter()
 

src/services/load3dService.ts

@@ -32,7 +32,6 @@ type UseLoad3dViewerFn = (node?: LGraphNode) => {
   handleModelDrop: (file: File) => Promise<void>
   handleSeek: (progress: number) => void
   needApplyChanges: { value: boolean }
-  [key: string]: unknown
 }
 
 // Type for SkeletonUtils module
@@ -81,7 +80,7 @@ interface Load3DNode extends LGraphNode {
   syncLoad3dConfig?: () => void
 }
 
-const viewerInstances = new Map<NodeId, any>()
+const viewerInstances = new Map<NodeId, ReturnType<UseLoad3dViewerFn>>()
 
 export class Load3dService {
   private static instance: Load3dService
@@ -165,12 +164,15 @@ export class Load3dService {
    * Only works after useLoad3dViewer has been loaded.
    * Returns null if module not yet loaded - use async version instead.
    */
-  getOrCreateViewerSync(node: LGraphNode, useLoad3dViewer: UseLoad3dViewerFn) {
+  getOrCreateViewerSync<T extends UseLoad3dViewerFn>(
+    node: LGraphNode,
+    useLoad3dViewer: T
+  ): ReturnType<T> {
     if (!viewerInstances.has(node.id)) {
       viewerInstances.set(node.id, useLoad3dViewer(node))
     }
 
-    return viewerInstances.get(node.id)
+    return viewerInstances.get(node.id) as ReturnType<T>
   }
 
   removeViewer(node: LGraphNode) {
@@ -288,6 +290,7 @@ export class Load3dService {
 
   async handleViewerClose(node: LGraphNode) {
     const viewer = await useLoad3dService().getOrCreateViewer(node)
+    if (!viewer) return
 
     if (viewer.needApplyChanges.value) {
       await viewer.applyChanges()

src/stores/maskEditorStore.ts

@@ -1,6 +1,7 @@
 import { defineStore } from 'pinia'
 import { computed, ref, watch } from 'vue'
 import _ from 'es-toolkit/compat'
+import type { TgpuRoot } from 'typegpu'
 
 import {
   BrushShape,
@@ -71,7 +72,7 @@ export const useMaskEditorStore = defineStore('maskEditor', () => {
 
   const canvasHistory = useCanvasHistory(20)
 
-  const tgpuRoot = ref<any>(null)
+  const tgpuRoot = ref<TgpuRoot | null>(null)
 
   const colorInput = ref<HTMLInputElement | null>(null)
 

src/stores/nodeDefStore.ts

@@ -86,7 +86,7 @@ export class ComfyNodeDefImpl
   // V2 fields
   readonly inputs: Record<string, InputSpecV2>
   readonly outputs: OutputSpecV2[]
-  readonly hidden?: Record<string, any>
+  readonly hidden?: Record<string, boolean>
 
   // ComfyNodeDefImpl fields
   readonly nodeSource: NodeSource

src/types/algoliaTypes.ts

@@ -72,7 +72,7 @@ export interface NodesIndexSuggestion {
     exact_nb_hits: number
     facets: {
       exact_matches: Record<string, number>
-      analytics: Record<string, any>
+      analytics: Record<string, unknown>
     }
   }
   objectID: RegistryNodePack['id']

src/types/comfy.ts

@@ -3,7 +3,6 @@ import type {
   Positionable
 } from '@/lib/litegraph/src/interfaces'
 import type { LGraphCanvas, LGraphNode } from '@/lib/litegraph/src/litegraph'
-import type { NodeReplacement } from '@/platform/nodeReplacement/types'
 import type { SettingParams } from '@/platform/settings/types'
 import type { ComfyWorkflowJSON } from '@/platform/workflow/validation/schemas/workflowSchema'
 import type { Keybinding } from '@/platform/keybindings/types'
@@ -94,8 +93,6 @@ export type MissingNodeType =
         text: string
         callback: () => void
       }
-      isReplaceable?: boolean
-      replacement?: NodeReplacement
     }
 
 export interface ComfyExtension {

src/types/simplifiedWidget.ts

@@ -3,6 +3,7 @@
  * Removes all DOM manipulation and positioning concerns
  */
 import type { InputSpec as InputSpecV2 } from '@/schemas/nodeDef/nodeDefSchemaV2'
+import type { IWidgetOptions } from '@/lib/litegraph/src/types/widgets'
 
 /** Valid types for widget values */
 export type WidgetValue =
@@ -39,7 +40,7 @@ export type SafeControlWidget = {
 
 export interface SimplifiedWidget<
   T extends WidgetValue = WidgetValue,
-  O = Record<string, any>
+  O extends IWidgetOptions = IWidgetOptions
 > {
   /** Display name of the widget */
   name: string
@@ -68,7 +69,7 @@ export interface SimplifiedWidget<
   nodeType?: string
 
   /** Optional serialization method for custom value handling */
-  serializeValue?: () => any
+  serializeValue?: () => unknown
 
   /** Optional input specification backing this widget */
   spec?: InputSpecV2
@@ -78,7 +79,7 @@ export interface SimplifiedWidget<
 
 export interface SimplifiedControlWidget<
   T extends WidgetValue = WidgetValue,
-  O = Record<string, any>
+  O extends IWidgetOptions = IWidgetOptions
 > extends SimplifiedWidget<T, O> {
   controlWidget: SafeControlWidget
 }

src/utils/envUtil.ts

@@ -1,7 +1,11 @@
 import type { ElectronAPI } from '@comfyorg/comfyui-electron-types'
 
-// Extend Window interface to include electronAPI
-type ElectronWindow = typeof window & {
+/**
+ * Extend Window interface to include electronAPI
+ * Used by desktop-ui app storybook stories
+ * @public
+ */
+export type ElectronWindow = typeof window & {
   electronAPI?: ElectronAPI
 }
 

src/utils/litegraphUtil.test.ts

@@ -89,6 +89,30 @@ describe('migrateWidgetsValues', () => {
     const result = migrateWidgetsValues(inputDefs, widgets, widgetValues)
     expect(result).toEqual(['first value', 'last value'])
   })
+  it('should correctly handle seed with unexpected value', () => {
+    const inputDefs: Record<string, InputSpec> = {
+      normalInput: {
+        type: 'INT',
+        name: 'normalInput',
+        control_after_generate: true
+      },
+      forceInputField: {
+        type: 'STRING',
+        name: 'forceInputField',
+        forceInput: true
+      }
+    }
+
+    const widgets = [
+      { name: 'normalInput', type: 'number' },
+      { name: 'control_after_generate', type: 'string' }
+    ] as Partial<IWidget>[] as IWidget[]
+
+    const widgetValues = [42, 'fixed', 'unexpected widget value']
+
+    const result = migrateWidgetsValues(inputDefs, widgets, widgetValues)
+    expect(result).toEqual([42, 'fixed'])
+  })
 })
 
 describe('compressWidgetInputSlots', () => {

src/utils/litegraphUtil.ts

@@ -112,23 +112,17 @@ export function migrateWidgetsValues<TWidgetValue>(
   const originalWidgetsInputs = Object.values(inputDefs).filter(
     (input) => widgetNames.has(input.name) || input.forceInput
   )
-  // Count the number of original widgets inputs.
-  const numOriginalWidgets = _.sum(
-    originalWidgetsInputs.map((input) =>
-      // If the input has control, it will have 2 widgets.
-      input.control_after_generate ||
-      ['seed', 'noise_seed'].includes(input.name)
-        ? 2
-        : 1
-    )
+
+  const widgetIndexHasForceInput = originalWidgetsInputs.flatMap((input) =>
+    input.control_after_generate
+      ? [!!input.forceInput, false]
+      : [!!input.forceInput]
   )
 
-  if (numOriginalWidgets === widgetsValues?.length) {
-    return _.zip(originalWidgetsInputs, widgetsValues)
-      .filter(([input]) => !input?.forceInput)
-      .map(([_, value]) => value as TWidgetValue)
-  }
-  return widgetsValues
+  if (widgetIndexHasForceInput.length !== widgetsValues?.length)
+    return widgetsValues
+
+  return widgetsValues.filter((_, index) => !widgetIndexHasForceInput[index])
 }
 
 /**

src/utils/queueDisplay.ts

@@ -4,7 +4,7 @@ import { formatDuration } from '@/utils/formatUtil'
 import { clampPercentInt, formatPercent0 } from '@/utils/numberUtil'
 
 export type BuildJobDisplayCtx = {
-  t: (k: string, v?: Record<string, any>) => string
+  t: (k: string, v?: Record<string, unknown>) => string
   locale: string
   formatClockTimeFn: (ts: number, locale: string) => string
   isActive: boolean

src/utils/widgetPropFilter.ts

@@ -55,13 +55,13 @@ export const BADGE_EXCLUDED_PROPS = [
  * @param excludeList - List of property names to exclude
  * @returns Filtered props object
  */
-export function filterWidgetProps<T extends Record<string, any>>(
+export function filterWidgetProps<T extends object>(
   props: T | undefined,
   excludeList: readonly string[]
 ): Partial<T> {
   if (!props) return {}
 
-  const filtered: Record<string, any> = {}
+  const filtered: Record<string, unknown> = {}
   for (const [key, value] of Object.entries(props)) {
     if (!excludeList.includes(key)) {
       filtered[key] = value

src/workbench/extensions/manager/components/manager/ManagerDialog.vue

@@ -6,7 +6,7 @@
     class="manager-dialog"
   >
     <template #leftPanelHeaderTitle>
-      <i class="icon-[lucide--puzzle]" />
+      <i class="icon-[comfy--extensions-blocks]" />
       <h2 class="text-neutral text-base">{{ $t('manager.title') }}</h2>
     </template>
     <template #leftPanel>

src/workbench/extensions/manager/components/manager/skeleton/PackCardGridSkeleton.test.ts

@@ -5,6 +5,7 @@ import PrimeVue from 'primevue/config'
 import { describe, expect, it } from 'vitest'
 import { nextTick } from 'vue'
 import { createI18n } from 'vue-i18n'
+import type { ComponentProps } from 'vue-component-type-helpers'
 
 import enMessages from '@/locales/en/main.json' with { type: 'json' }
 
@@ -12,9 +13,11 @@ import GridSkeleton from './GridSkeleton.vue'
 import PackCardSkeleton from './PackCardSkeleton.vue'
 
 describe('GridSkeleton', () => {
-  const mountComponent = ({
+  function mountComponent({
     props = {}
-  }: Record<string, any> = {}): VueWrapper => {
+  }: {
+    props?: Partial<ComponentProps<typeof GridSkeleton>>
+  } = {}): VueWrapper {
     const i18n = createI18n({
       legacy: false,
       locale: 'en',