fix: use WidgetSelectDropdown for models (#6607)

## Summary

As the commit says, the model loaders were broken in cloud if you
enabled Vue Nodes (not a thing I think user does yet).

This fixes it by configuring the `WidgetSelectDropdown` to load so the
user load models like they would load a input or output asset.

## Review Focus

Probably `useAssetWidgetData` to make sure it's idomatic.

This part of
[assetsStore](https://github.com/Comfy-Org/ComfyUI_frontend/pull/6607/files#diff-18a5914c9f12c16d9c9c3a9f6d0e203a9c00598414d3d1c8637da9ca77339d83R158-R234)
as well.

## Screenshots

<img width="1196" height="1005" alt="Screenshot 2025-11-05 at 5 34
22 PM"
src="https://github.com/user-attachments/assets/804cd3c4-3370-4667-b606-bed52fcd6278"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6607-fix-use-WidgetSelectDropdown-for-models-2a36d73d36508143b185d06d736e4af9)
by [Unito](https://www.unito.io)

---------

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

tests-ui/tests/composables/useAssetWidgetData.desktop.test.ts

@@ -0,0 +1,42 @@
+import { describe, expect, it, vi } from 'vitest'
+import { ref } from 'vue'
+
+import { useAssetWidgetData } from '@/renderer/extensions/vueNodes/widgets/composables/useAssetWidgetData'
+
+vi.mock('@/platform/distribution/types', () => ({
+  isCloud: false
+}))
+
+const mockUpdateModelsForNodeType = vi.fn()
+const mockGetCategoryForNodeType = vi.fn()
+
+vi.mock('@/stores/assetsStore', () => ({
+  useAssetsStore: () => ({
+    modelAssetsByNodeType: new Map(),
+    modelLoadingByNodeType: new Map(),
+    modelErrorByNodeType: new Map(),
+    updateModelsForNodeType: mockUpdateModelsForNodeType
+  })
+}))
+
+vi.mock('@/stores/modelToNodeStore', () => ({
+  useModelToNodeStore: () => ({
+    getCategoryForNodeType: mockGetCategoryForNodeType
+  })
+}))
+
+describe('useAssetWidgetData (desktop/isCloud=false)', () => {
+  it('returns empty/default values without calling stores', () => {
+    const nodeType = ref('CheckpointLoaderSimple')
+    const { category, assets, dropdownItems, isLoading, error } =
+      useAssetWidgetData(nodeType)
+
+    expect(category.value).toBeUndefined()
+    expect(assets.value).toEqual([])
+    expect(dropdownItems.value).toEqual([])
+    expect(isLoading.value).toBe(false)
+    expect(error.value).toBeNull()
+    expect(mockUpdateModelsForNodeType).not.toHaveBeenCalled()
+    expect(mockGetCategoryForNodeType).not.toHaveBeenCalled()
+  })
+})

tests-ui/tests/composables/useAssetWidgetData.test.ts

@@ -0,0 +1,245 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { nextTick, ref } from 'vue'
+
+import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
+import { useAssetWidgetData } from '@/renderer/extensions/vueNodes/widgets/composables/useAssetWidgetData'
+
+vi.mock('@/platform/distribution/types', () => ({
+  isCloud: true
+}))
+
+const mockModelAssetsByNodeType = new Map<string, AssetItem[]>()
+const mockModelLoadingByNodeType = new Map<string, boolean>()
+const mockModelErrorByNodeType = new Map<string, Error | null>()
+const mockUpdateModelsForNodeType = vi.fn()
+const mockGetCategoryForNodeType = vi.fn()
+
+vi.mock('@/stores/assetsStore', () => ({
+  useAssetsStore: () => ({
+    modelAssetsByNodeType: mockModelAssetsByNodeType,
+    modelLoadingByNodeType: mockModelLoadingByNodeType,
+    modelErrorByNodeType: mockModelErrorByNodeType,
+    updateModelsForNodeType: mockUpdateModelsForNodeType
+  })
+}))
+
+vi.mock('@/stores/modelToNodeStore', () => ({
+  useModelToNodeStore: () => ({
+    getCategoryForNodeType: mockGetCategoryForNodeType
+  })
+}))
+
+describe('useAssetWidgetData (cloud mode, isCloud=true)', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockModelAssetsByNodeType.clear()
+    mockModelLoadingByNodeType.clear()
+    mockModelErrorByNodeType.clear()
+    mockGetCategoryForNodeType.mockReturnValue(undefined)
+
+    mockUpdateModelsForNodeType.mockImplementation(
+      async (): Promise<AssetItem[]> => {
+        return []
+      }
+    )
+  })
+
+  const createMockAsset = (
+    id: string,
+    name: string,
+    filename: string,
+    previewUrl?: string
+  ): AssetItem => ({
+    id,
+    name,
+    size: 1024,
+    tags: ['models', 'checkpoints'],
+    created_at: '2025-01-01T00:00:00Z',
+    preview_url: previewUrl,
+    user_metadata: {
+      filename
+    }
+  })
+
+  it('fetches assets and transforms to dropdown items', async () => {
+    const mockAssets: AssetItem[] = [
+      createMockAsset(
+        'asset-1',
+        'Beautiful Model',
+        'models/beautiful_model.safetensors',
+        '/api/preview/asset-1'
+      ),
+      createMockAsset('asset-2', 'Model B', 'model_b.safetensors', '/preview/2')
+    ]
+
+    mockGetCategoryForNodeType.mockReturnValue('checkpoints')
+
+    mockUpdateModelsForNodeType.mockImplementation(
+      async (_nodeType: string): Promise<AssetItem[]> => {
+        mockModelAssetsByNodeType.set(_nodeType, mockAssets)
+        mockModelLoadingByNodeType.set(_nodeType, false)
+        return mockAssets
+      }
+    )
+
+    const nodeType = ref('CheckpointLoaderSimple')
+    const { category, assets, dropdownItems, isLoading } =
+      useAssetWidgetData(nodeType)
+
+    await nextTick()
+    await vi.waitFor(() => !isLoading.value)
+
+    expect(mockUpdateModelsForNodeType).toHaveBeenCalledWith(
+      'CheckpointLoaderSimple'
+    )
+    expect(category.value).toBe('checkpoints')
+    expect(assets.value).toEqual(mockAssets)
+
+    expect(dropdownItems.value).toHaveLength(2)
+    const item = dropdownItems.value[0]
+    expect(item.id).toBe('asset-1')
+    expect(item.name).toBe('models/beautiful_model.safetensors')
+    expect(item.label).toBe('Beautiful Model')
+    expect(item.mediaSrc).toBe('/api/preview/asset-1')
+  })
+
+  it('handles API errors gracefully', async () => {
+    const mockError = new Error('Network error')
+
+    mockUpdateModelsForNodeType.mockImplementation(
+      async (_nodeType: string): Promise<AssetItem[]> => {
+        mockModelErrorByNodeType.set(_nodeType, mockError)
+        mockModelAssetsByNodeType.set(_nodeType, [])
+        mockModelLoadingByNodeType.set(_nodeType, false)
+        return []
+      }
+    )
+
+    const nodeType = ref('CheckpointLoaderSimple')
+    const { assets, error, isLoading } = useAssetWidgetData(nodeType)
+
+    await nextTick()
+    await vi.waitFor(() => !isLoading.value)
+
+    expect(error.value).toBe(mockError)
+    expect(assets.value).toEqual([])
+  })
+
+  it('returns empty for unknown node type', async () => {
+    mockGetCategoryForNodeType.mockReturnValue(undefined)
+
+    mockUpdateModelsForNodeType.mockImplementation(
+      async (_nodeType: string): Promise<AssetItem[]> => {
+        mockModelAssetsByNodeType.set(_nodeType, [])
+        mockModelLoadingByNodeType.set(_nodeType, false)
+        return []
+      }
+    )
+
+    const nodeType = ref('UnknownNodeType')
+    const { category, assets } = useAssetWidgetData(nodeType)
+
+    await nextTick()
+
+    expect(category.value).toBeUndefined()
+    expect(assets.value).toEqual([])
+  })
+
+  describe('MaybeRefOrGetter parameter support', () => {
+    it('accepts plain string value', async () => {
+      const mockAssets: AssetItem[] = [
+        createMockAsset('asset-1', 'Model A', 'model_a.safetensors')
+      ]
+
+      mockGetCategoryForNodeType.mockReturnValue('checkpoints')
+      mockUpdateModelsForNodeType.mockImplementation(
+        async (_nodeType: string): Promise<AssetItem[]> => {
+          mockModelAssetsByNodeType.set(_nodeType, mockAssets)
+          mockModelLoadingByNodeType.set(_nodeType, false)
+          return mockAssets
+        }
+      )
+
+      const { category, assets, isLoading } = useAssetWidgetData(
+        'CheckpointLoaderSimple'
+      )
+
+      await nextTick()
+      await vi.waitFor(() => !isLoading.value)
+
+      expect(mockUpdateModelsForNodeType).toHaveBeenCalledWith(
+        'CheckpointLoaderSimple'
+      )
+      expect(category.value).toBe('checkpoints')
+      expect(assets.value).toEqual(mockAssets)
+    })
+
+    it('accepts getter function', async () => {
+      const mockAssets: AssetItem[] = [
+        createMockAsset('asset-1', 'Model A', 'model_a.safetensors')
+      ]
+
+      mockGetCategoryForNodeType.mockReturnValue('loras')
+      mockUpdateModelsForNodeType.mockImplementation(
+        async (_nodeType: string): Promise<AssetItem[]> => {
+          mockModelAssetsByNodeType.set(_nodeType, mockAssets)
+          mockModelLoadingByNodeType.set(_nodeType, false)
+          return mockAssets
+        }
+      )
+
+      const nodeType = ref('LoraLoader')
+      const { category, assets, isLoading } = useAssetWidgetData(
+        () => nodeType.value
+      )
+
+      await nextTick()
+      await vi.waitFor(() => !isLoading.value)
+
+      expect(mockUpdateModelsForNodeType).toHaveBeenCalledWith('LoraLoader')
+      expect(category.value).toBe('loras')
+      expect(assets.value).toEqual(mockAssets)
+    })
+
+    it('accepts ref (backward compatibility)', async () => {
+      const mockAssets: AssetItem[] = [
+        createMockAsset('asset-1', 'Model A', 'model_a.safetensors')
+      ]
+
+      mockGetCategoryForNodeType.mockReturnValue('checkpoints')
+      mockUpdateModelsForNodeType.mockImplementation(
+        async (_nodeType: string): Promise<AssetItem[]> => {
+          mockModelAssetsByNodeType.set(_nodeType, mockAssets)
+          mockModelLoadingByNodeType.set(_nodeType, false)
+          return mockAssets
+        }
+      )
+
+      const nodeTypeRef = ref('CheckpointLoaderSimple')
+      const { category, assets, isLoading } = useAssetWidgetData(nodeTypeRef)
+
+      await nextTick()
+      await vi.waitFor(() => !isLoading.value)
+
+      expect(mockUpdateModelsForNodeType).toHaveBeenCalledWith(
+        'CheckpointLoaderSimple'
+      )
+      expect(category.value).toBe('checkpoints')
+      expect(assets.value).toEqual(mockAssets)
+    })
+
+    it('handles undefined node type gracefully', async () => {
+      const { category, assets, dropdownItems, isLoading, error } =
+        useAssetWidgetData(undefined)
+
+      await nextTick()
+
+      expect(mockUpdateModelsForNodeType).not.toHaveBeenCalled()
+      expect(category.value).toBeUndefined()
+      expect(assets.value).toEqual([])
+      expect(dropdownItems.value).toEqual([])
+      expect(isLoading.value).toBe(false)
+      expect(error.value).toBeNull()
+    })
+  })
+})

tests-ui/tests/renderer/extensions/vueNodes/widgets/components/WidgetSelect.asset-mode.test.ts

@@ -0,0 +1,89 @@
+import { createTestingPinia } from '@pinia/testing'
+import { flushPromises, mount } from '@vue/test-utils'
+import PrimeVue from 'primevue/config'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+
+import WidgetSelect from '@/renderer/extensions/vueNodes/widgets/components/WidgetSelect.vue'
+
+// Mock modules
+vi.mock('@/platform/distribution/types', () => ({
+  isCloud: true
+}))
+
+vi.mock('@/platform/assets/services/assetService', () => ({
+  assetService: {
+    isAssetBrowserEligible: vi.fn(() => true)
+  }
+}))
+
+const mockSettingStoreGet = vi.fn()
+
+vi.mock('@/platform/settings/settingStore', () => ({
+  useSettingStore: vi.fn(() => ({
+    get: mockSettingStoreGet
+  }))
+}))
+
+// Import after mocks are defined
+import { assetService } from '@/platform/assets/services/assetService'
+const mockAssetServiceEligible = vi.mocked(assetService.isAssetBrowserEligible)
+
+describe('WidgetSelect asset mode', () => {
+  const createWidget = (): SimplifiedWidget<string | number | undefined> => ({
+    name: 'ckpt_name',
+    type: 'combo',
+    value: undefined,
+    options: {
+      values: []
+    }
+  })
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockAssetServiceEligible.mockReturnValue(true)
+    mockSettingStoreGet.mockReturnValue(true) // Default to true for UseAssetAPI
+  })
+
+  // Helper to mount with common setup
+  const mountWidget = () => {
+    return mount(WidgetSelect, {
+      props: {
+        widget: createWidget(),
+        modelValue: undefined,
+        nodeType: 'CheckpointLoaderSimple'
+      },
+      global: {
+        plugins: [PrimeVue, createTestingPinia()]
+      }
+    })
+  }
+
+  it('uses dropdown when isCloud && UseAssetAPI && isEligible', async () => {
+    const wrapper = mountWidget()
+    await flushPromises()
+
+    expect(
+      wrapper.findComponent({ name: 'WidgetSelectDropdown' }).exists()
+    ).toBe(true)
+  })
+
+  it('uses default widget when UseAssetAPI setting is false', () => {
+    mockSettingStoreGet.mockReturnValue(false)
+    const wrapper = mountWidget()
+
+    expect(
+      wrapper.findComponent({ name: 'WidgetSelectDefault' }).exists()
+    ).toBe(true)
+  })
+
+  it('uses default widget when node is not eligible', () => {
+    mockAssetServiceEligible.mockReturnValue(false)
+    const wrapper = mountWidget()
+
+    expect(
+      wrapper.findComponent({ name: 'WidgetSelectDefault' }).exists()
+    ).toBe(true)
+  })
+})

tests-ui/tests/store/assetsStore.test.ts

@@ -1,8 +1,23 @@
 import { createPinia, setActivePinia } from 'pinia'
-import { beforeEach, describe, expect, it } from 'vitest'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
 import { useAssetsStore } from '@/stores/assetsStore'
+import { useModelToNodeStore } from '@/stores/modelToNodeStore'
+
+// Mock isCloud to be true for these tests
+vi.mock('@/platform/distribution/types', () => ({
+  isCloud: true
+}))
+
+// Mock assetService
+const mockGetAssetsForNodeType = vi.hoisted(() => vi.fn())
+
+vi.mock('@/platform/assets/services/assetService', () => ({
+  assetService: {
+    getAssetsForNodeType: mockGetAssetsForNodeType
+  }
+}))
 
 const HASH_FILENAME =
   '72e786ff2a44d682c4294db0b7098e569832bc394efc6dad644e6ec85a78efb7.png'
@@ -24,6 +39,7 @@ function createMockAssetItem(overrides: Partial<AssetItem> = {}): AssetItem {
 describe('assetsStore', () => {
   beforeEach(() => {
     setActivePinia(createPinia())
+    vi.clearAllMocks()
   })
 
   describe('input asset mapping helpers', () => {
@@ -154,4 +170,56 @@ describe('assetsStore', () => {
       expect(store.inputAssetsByFilename.size).toBe(0)
     })
   })
+
+  describe('model assets caching', () => {
+    beforeEach(() => {
+      const modelToNodeStore = useModelToNodeStore()
+      modelToNodeStore.registerDefaults()
+    })
+
+    it('should cache assets by node type', async () => {
+      const store = useAssetsStore()
+      const mockAssets: AssetItem[] = [
+        createMockAssetItem({ id: '1', name: 'model_a.safetensors' }),
+        createMockAssetItem({ id: '2', name: 'model_b.safetensors' })
+      ]
+      mockGetAssetsForNodeType.mockResolvedValue(mockAssets)
+
+      await store.updateModelsForNodeType('CheckpointLoaderSimple')
+
+      expect(mockGetAssetsForNodeType).toHaveBeenCalledWith(
+        'CheckpointLoaderSimple'
+      )
+      expect(store.modelAssetsByNodeType.get('CheckpointLoaderSimple')).toEqual(
+        mockAssets
+      )
+    })
+
+    it('should track loading state', async () => {
+      const store = useAssetsStore()
+      mockGetAssetsForNodeType.mockImplementation(
+        () => new Promise((resolve) => setTimeout(() => resolve([]), 100))
+      )
+
+      const promise = store.updateModelsForNodeType('LoraLoader')
+
+      expect(store.modelLoadingByNodeType.get('LoraLoader')).toBe(true)
+
+      await promise
+
+      expect(store.modelLoadingByNodeType.get('LoraLoader')).toBe(false)
+    })
+
+    it('should handle errors gracefully', async () => {
+      const store = useAssetsStore()
+      const mockError = new Error('Network error')
+      mockGetAssetsForNodeType.mockRejectedValue(mockError)
+
+      await store.updateModelsForNodeType('VAELoader')
+
+      expect(store.modelErrorByNodeType.get('VAELoader')).toBe(mockError)
+      expect(store.modelAssetsByNodeType.get('VAELoader')).toEqual([])
+      expect(store.modelLoadingByNodeType.get('VAELoader')).toBe(false)
+    })
+  })
 })