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>

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

@@ -50,6 +50,7 @@
         :widget="widget.simplified"
         :model-value="widget.value"
         :node-id="nodeData?.id != null ? String(nodeData.id) : ''"
+        :node-type="nodeType"
         class="flex-1"
         @update:model-value="widget.updateHandler"
       />
@@ -162,7 +163,9 @@ const processedWidgets = computed((): ProcessedWidget[] => {
       // Update the widget value directly
       widget.value = value as WidgetValue
 
-      if (widget.callback) {
+      // Skip callback for asset widgets - their callback opens the modal,
+      // but Vue asset mode handles selection through the dropdown
+      if (widget.callback && widget.type !== 'asset') {
         widget.callback(value)
       }
     }

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

@@ -1,224 +0,0 @@
-import { createTestingPinia } from '@pinia/testing'
-import { mount } from '@vue/test-utils'
-import PrimeVue from 'primevue/config'
-import Select from 'primevue/select'
-import type { SelectProps } from 'primevue/select'
-import { describe, expect, it } from 'vitest'
-
-import type { ComboInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
-import type { SimplifiedWidget } from '@/types/simplifiedWidget'
-
-import WidgetSelect from './WidgetSelect.vue'
-import WidgetSelectDefault from './WidgetSelectDefault.vue'
-import WidgetSelectDropdown from './WidgetSelectDropdown.vue'
-
-describe('WidgetSelect Value Binding', () => {
-  const createMockWidget = (
-    value: string = 'option1',
-    options: Partial<
-      SelectProps & { values?: string[]; return_index?: boolean }
-    > = {},
-    callback?: (value: string | number | undefined) => void,
-    spec?: ComboInputSpec
-  ): SimplifiedWidget<string | number | undefined> => ({
-    name: 'test_select',
-    type: 'combo',
-    value,
-    options: {
-      values: ['option1', 'option2', 'option3'],
-      ...options
-    },
-    callback,
-    spec
-  })
-
-  const mountComponent = (
-    widget: SimplifiedWidget<string | number | undefined>,
-    modelValue: string | number | undefined,
-    readonly = false
-  ) => {
-    return mount(WidgetSelect, {
-      props: {
-        widget,
-        modelValue,
-        readonly
-      },
-      global: {
-        plugins: [PrimeVue, createTestingPinia()],
-        components: { Select }
-      }
-    })
-  }
-
-  const setSelectValueAndEmit = async (
-    wrapper: ReturnType<typeof mount>,
-    value: string
-  ) => {
-    const select = wrapper.findComponent({ name: 'Select' })
-    await select.setValue(value)
-    return wrapper.emitted('update:modelValue')
-  }
-
-  describe('Vue Event Emission', () => {
-    it('emits Vue event when selection changes', async () => {
-      const widget = createMockWidget('option1')
-      const wrapper = mountComponent(widget, 'option1')
-
-      const emitted = await setSelectValueAndEmit(wrapper, 'option2')
-
-      expect(emitted).toBeDefined()
-      expect(emitted![0]).toContain('option2')
-    })
-
-    it('emits string value for different options', async () => {
-      const widget = createMockWidget('option1')
-      const wrapper = mountComponent(widget, 'option1')
-
-      const emitted = await setSelectValueAndEmit(wrapper, 'option3')
-
-      expect(emitted).toBeDefined()
-      // Should emit the string value
-      expect(emitted![0]).toContain('option3')
-    })
-
-    it('handles custom option values', async () => {
-      const customOptions = ['custom_a', 'custom_b', 'custom_c']
-      const widget = createMockWidget('custom_a', { values: customOptions })
-      const wrapper = mountComponent(widget, 'custom_a')
-
-      const emitted = await setSelectValueAndEmit(wrapper, 'custom_b')
-
-      expect(emitted).toBeDefined()
-      expect(emitted![0]).toContain('custom_b')
-    })
-
-    it('handles missing callback gracefully', async () => {
-      const widget = createMockWidget('option1', {}, undefined)
-      const wrapper = mountComponent(widget, 'option1')
-
-      const emitted = await setSelectValueAndEmit(wrapper, 'option2')
-
-      // Should emit Vue event
-      expect(emitted).toBeDefined()
-      expect(emitted![0]).toContain('option2')
-    })
-
-    it('handles value changes gracefully', async () => {
-      const widget = createMockWidget('option1')
-      const wrapper = mountComponent(widget, 'option1')
-
-      const emitted = await setSelectValueAndEmit(wrapper, 'option2')
-
-      expect(emitted).toBeDefined()
-      expect(emitted![0]).toContain('option2')
-    })
-  })
-
-  describe('Option Handling', () => {
-    it('handles empty options array', async () => {
-      const widget = createMockWidget('', { values: [] })
-      const wrapper = mountComponent(widget, '')
-
-      const select = wrapper.findComponent({ name: 'Select' })
-      expect(select.props('options')).toEqual([])
-    })
-
-    it('handles single option', async () => {
-      const widget = createMockWidget('only_option', {
-        values: ['only_option']
-      })
-      const wrapper = mountComponent(widget, 'only_option')
-
-      const select = wrapper.findComponent({ name: 'Select' })
-      const options = select.props('options')
-      expect(options).toHaveLength(1)
-      expect(options[0]).toEqual('only_option')
-    })
-
-    it('handles options with special characters', async () => {
-      const specialOptions = [
-        'option with spaces',
-        'option@#$%',
-        'option/with\\slashes'
-      ]
-      const widget = createMockWidget(specialOptions[0], {
-        values: specialOptions
-      })
-      const wrapper = mountComponent(widget, specialOptions[0])
-
-      const emitted = await setSelectValueAndEmit(wrapper, specialOptions[1])
-
-      expect(emitted).toBeDefined()
-      expect(emitted![0]).toContain(specialOptions[1])
-    })
-  })
-
-  describe('Edge Cases', () => {
-    it('handles selection of non-existent option gracefully', async () => {
-      const widget = createMockWidget('option1')
-      const wrapper = mountComponent(widget, 'option1')
-
-      const emitted = await setSelectValueAndEmit(
-        wrapper,
-        'non_existent_option'
-      )
-
-      // Should still emit Vue event with the value
-      expect(emitted).toBeDefined()
-      expect(emitted![0]).toContain('non_existent_option')
-    })
-
-    it('handles numeric string options correctly', async () => {
-      const numericOptions = ['1', '2', '10', '100']
-      const widget = createMockWidget('1', { values: numericOptions })
-      const wrapper = mountComponent(widget, '1')
-
-      const emitted = await setSelectValueAndEmit(wrapper, '100')
-
-      // Should maintain string type in emitted event
-      expect(emitted).toBeDefined()
-      expect(emitted![0]).toContain('100')
-    })
-  })
-
-  describe('Spec-aware rendering', () => {
-    it('uses dropdown variant when combo spec enables image uploads', () => {
-      const spec: ComboInputSpec = {
-        type: 'COMBO',
-        name: 'test_select',
-        image_upload: true
-      }
-      const widget = createMockWidget('option1', {}, undefined, spec)
-      const wrapper = mountComponent(widget, 'option1')
-
-      expect(wrapper.findComponent(WidgetSelectDropdown).exists()).toBe(true)
-      expect(wrapper.findComponent(WidgetSelectDefault).exists()).toBe(false)
-    })
-
-    it('uses dropdown variant for audio uploads', (context) => {
-      context.skip('allowUpload is not false, should it be? needs diagnosis')
-      const spec: ComboInputSpec = {
-        type: 'COMBO',
-        name: 'test_select',
-        audio_upload: true
-      }
-      const widget = createMockWidget('clip.wav', {}, undefined, spec)
-      const wrapper = mountComponent(widget, 'clip.wav')
-      const dropdown = wrapper.findComponent(WidgetSelectDropdown)
-
-      expect(dropdown.exists()).toBe(true)
-      expect(dropdown.props('assetKind')).toBe('audio')
-      expect(dropdown.props('allowUpload')).toBe(false)
-    })
-
-    it('keeps default select when no spec or media hints are present', () => {
-      const widget = createMockWidget('plain', {
-        values: ['plain', 'text']
-      })
-      const wrapper = mountComponent(widget, 'plain')
-
-      expect(wrapper.findComponent(WidgetSelectDefault).exists()).toBe(true)
-      expect(wrapper.findComponent(WidgetSelectDropdown).exists()).toBe(false)
-    })
-  })
-})

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

@@ -5,11 +5,14 @@
     :asset-kind="assetKind"
     :allow-upload="allowUpload"
     :upload-folder="uploadFolder"
+    :is-asset-mode="isAssetMode"
+    :default-layout-mode="defaultLayoutMode"
     @update:model-value="handleUpdateModelValue"
   />
   <WidgetSelectDefault
     v-else
-    v-bind="props"
+    :widget="widget"
+    :model-value="modelValue"
     @update:model-value="handleUpdateModelValue"
   />
 </template>
@@ -17,18 +20,22 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
+import { assetService } from '@/platform/assets/services/assetService'
+import { isCloud } from '@/platform/distribution/types'
+import { useSettingStore } from '@/platform/settings/settingStore'
+import WidgetSelectDefault from '@/renderer/extensions/vueNodes/widgets/components/WidgetSelectDefault.vue'
+import WidgetSelectDropdown from '@/renderer/extensions/vueNodes/widgets/components/WidgetSelectDropdown.vue'
+import type { LayoutMode } from '@/renderer/extensions/vueNodes/widgets/components/form/dropdown/types'
 import type { ResultItemType } from '@/schemas/apiSchema'
 import { isComboInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import type { ComboInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 import type { AssetKind } from '@/types/widgetTypes'
 
-import WidgetSelectDefault from './WidgetSelectDefault.vue'
-import WidgetSelectDropdown from './WidgetSelectDropdown.vue'
-
 const props = defineProps<{
   widget: SimplifiedWidget<string | number | undefined>
   modelValue: string | number | undefined
+  nodeType?: string
 }>()
 
 const emit = defineEmits<{
@@ -90,10 +97,30 @@ const specDescriptor = computed<{
   }
 })
 
+const isAssetMode = computed(() => {
+  if (isCloud) {
+    const settingStore = useSettingStore()
+    const isUsingAssetAPI = settingStore.get('Comfy.Assets.UseAssetAPI')
+    const isEligible = assetService.isAssetBrowserEligible(
+      props.nodeType,
+      props.widget.name
+    )
+
+    return isUsingAssetAPI && isEligible
+  }
+
+  return false
+})
+
 const assetKind = computed(() => specDescriptor.value.kind)
-const isDropdownUIWidget = computed(() => assetKind.value !== 'unknown')
+const isDropdownUIWidget = computed(
+  () => isAssetMode.value || assetKind.value !== 'unknown'
+)
 const allowUpload = computed(() => specDescriptor.value.allowUpload)
 const uploadFolder = computed<ResultItemType>(() => {
   return specDescriptor.value.folder ?? 'input'
 })
+const defaultLayoutMode = computed<LayoutMode>(() => {
+  return isAssetMode.value ? 'list' : 'grid'
+})
 </script>

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

@@ -1,10 +1,21 @@
 <script setup lang="ts">
-import { computed, provide, ref, watch } from 'vue'
+import { capitalize } from 'es-toolkit'
+import { computed, provide, ref, toRef, watch } from 'vue'
 
 import { useWidgetValue } from '@/composables/graph/useWidgetValue'
 import { useTransformCompatOverlayProps } from '@/composables/useTransformCompatOverlayProps'
 import { t } from '@/i18n'
 import { useToastStore } from '@/platform/updates/common/toastStore'
+import FormDropdown from '@/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdown.vue'
+import { AssetKindKey } from '@/renderer/extensions/vueNodes/widgets/components/form/dropdown/types'
+import type {
+  DropdownItem,
+  FilterOption,
+  LayoutMode,
+  SelectedKey
+} from '@/renderer/extensions/vueNodes/widgets/components/form/dropdown/types'
+import WidgetLayoutField from '@/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue'
+import { useAssetWidgetData } from '@/renderer/extensions/vueNodes/widgets/composables/useAssetWidgetData'
 import type { ResultItemType } from '@/schemas/apiSchema'
 import { api } from '@/scripts/api'
 import { useAssetsStore } from '@/stores/assetsStore'
@@ -16,21 +27,15 @@ import {
   filterWidgetProps
 } from '@/utils/widgetPropFilter'
 
-import FormDropdown from './form/dropdown/FormDropdown.vue'
-import { AssetKindKey } from './form/dropdown/types'
-import type {
-  DropdownItem,
-  FilterOption,
-  SelectedKey
-} from './form/dropdown/types'
-import WidgetLayoutField from './layout/WidgetLayoutField.vue'
-
 const props = defineProps<{
   widget: SimplifiedWidget<string | number | undefined>
   modelValue: string | number | undefined
+  nodeType?: string
   assetKind?: AssetKind
   allowUpload?: boolean
   uploadFolder?: ResultItemType
+  isAssetMode?: boolean
+  defaultLayoutMode?: LayoutMode
 }>()
 
 provide(
@@ -59,12 +64,26 @@ const combinedProps = computed(() => ({
   ...transformCompatProps.value
 }))
 
+const getAssetData = () => {
+  if (props.isAssetMode && props.nodeType) {
+    return useAssetWidgetData(toRef(() => props.nodeType))
+  }
+  return null
+}
+const assetData = getAssetData()
+
 const filterSelected = ref('all')
-const filterOptions = ref<FilterOption[]>([
-  { id: 'all', name: 'All' },
-  { id: 'inputs', name: 'Inputs' },
-  { id: 'outputs', name: 'Outputs' }
-])
+const filterOptions = computed<FilterOption[]>(() => {
+  if (props.isAssetMode) {
+    const categoryName = assetData?.category.value ?? 'All'
+    return [{ id: 'all', name: capitalize(categoryName) }]
+  }
+  return [
+    { id: 'all', name: 'All' },
+    { id: 'inputs', name: 'Inputs' },
+    { id: 'outputs', name: 'Outputs' }
+  ]
+})
 
 const selectedSet = ref<Set<SelectedKey>>(new Set())
 
@@ -132,9 +151,16 @@ const outputItems = computed<DropdownItem[]>(() => {
 })
 
 const allItems = computed<DropdownItem[]>(() => {
+  if (props.isAssetMode && assetData) {
+    return assetData.dropdownItems.value
+  }
   return [...inputItems.value, ...outputItems.value]
 })
 const dropdownItems = computed<DropdownItem[]>(() => {
+  if (props.isAssetMode) {
+    return allItems.value
+  }
+
   switch (filterSelected.value) {
     case 'inputs':
       return inputItems.value
@@ -169,7 +195,10 @@ const mediaPlaceholder = computed(() => {
   return t('widgets.uploadSelect.placeholder')
 })
 
-const uploadable = computed(() => props.allowUpload === true)
+const uploadable = computed(() => {
+  if (props.isAssetMode) return false
+  return props.allowUpload === true
+})
 
 const acceptTypes = computed(() => {
   // Be permissive with accept types because backend uses libraries
@@ -186,6 +215,8 @@ const acceptTypes = computed(() => {
   }
 })
 
+const layoutMode = ref<LayoutMode>(props.defaultLayoutMode ?? 'grid')
+
 watch(
   localValue,
   (currentValue) => {
@@ -313,6 +344,7 @@ function getMediaUrl(
     <FormDropdown
       v-model:selected="selectedSet"
       v-model:filter-selected="filterSelected"
+      v-model:layout-mode="layoutMode"
       :items="dropdownItems"
       :placeholder="mediaPlaceholder"
       :multiple="false"

src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuItem.vue

@@ -124,16 +124,17 @@ function handleVideoLoad(event: Event) {
       :class="
         cn('flex gap-1', {
           'flex-col': layout === 'grid',
-          'flex-col px-4 py-1 w-full justify-center': layout === 'list',
+          'flex-col px-4 py-1 w-full justify-center min-w-0': layout === 'list',
           'flex-row p-2 items-center justify-between w-full':
             layout === 'list-small'
         })
       "
     >
       <span
+        v-tooltip="layout === 'grid' ? (label ?? name) : undefined"
         :class="
           cn(
-            'block text-[15px] line-clamp-2 wrap-break-word',
+            'block text-[15px] line-clamp-2 break-words overflow-hidden',
             'transition-colors duration-150',
             // selection
             !!selected && 'text-blue-500'

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

@@ -0,0 +1,99 @@
+import { computed, toValue, watch } from 'vue'
+import type { MaybeRefOrGetter } from 'vue'
+
+import { isCloud } from '@/platform/distribution/types'
+import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
+import type { DropdownItem } from '@/renderer/extensions/vueNodes/widgets/components/form/dropdown/types'
+import { useAssetsStore } from '@/stores/assetsStore'
+import { useModelToNodeStore } from '@/stores/modelToNodeStore'
+
+/**
+ * Composable for fetching and transforming asset data for Vue node widgets.
+ * Provides reactive asset data based on node type with automatic category detection.
+ * Uses store-based caching to avoid duplicate fetches across multiple instances.
+ *
+ * Cloud-only composable - returns empty data when not in cloud environment.
+ *
+ * @param nodeType - ComfyUI node type (ref, getter, or plain value). Can be undefined.
+ *   Accepts: ref('CheckpointLoaderSimple'), () => 'CheckpointLoaderSimple', or 'CheckpointLoaderSimple'
+ * @returns Reactive data including category, assets, dropdown items, loading state, and errors
+ */
+export function useAssetWidgetData(
+  nodeType: MaybeRefOrGetter<string | undefined>
+) {
+  if (isCloud) {
+    const assetsStore = useAssetsStore()
+    const modelToNodeStore = useModelToNodeStore()
+
+    const category = computed(() => {
+      const resolvedType = toValue(nodeType)
+      return resolvedType
+        ? modelToNodeStore.getCategoryForNodeType(resolvedType)
+        : undefined
+    })
+
+    const assets = computed<AssetItem[]>(() => {
+      const resolvedType = toValue(nodeType)
+      return resolvedType
+        ? (assetsStore.modelAssetsByNodeType.get(resolvedType) ?? [])
+        : []
+    })
+
+    const isLoading = computed(() => {
+      const resolvedType = toValue(nodeType)
+      return resolvedType
+        ? (assetsStore.modelLoadingByNodeType.get(resolvedType) ?? false)
+        : false
+    })
+
+    const error = computed<Error | null>(() => {
+      const resolvedType = toValue(nodeType)
+      return resolvedType
+        ? (assetsStore.modelErrorByNodeType.get(resolvedType) ?? null)
+        : null
+    })
+
+    const dropdownItems = computed<DropdownItem[]>(() => {
+      return assets.value.map((asset) => ({
+        id: asset.id,
+        name:
+          (asset.user_metadata?.filename as string | undefined) ?? asset.name,
+        label: asset.name,
+        mediaSrc: asset.preview_url ?? '',
+        metadata: ''
+      }))
+    })
+
+    watch(
+      () => toValue(nodeType),
+      async (currentNodeType) => {
+        if (!currentNodeType) {
+          return
+        }
+
+        const hasData = assetsStore.modelAssetsByNodeType.has(currentNodeType)
+
+        if (!hasData) {
+          await assetsStore.updateModelsForNodeType(currentNodeType)
+        }
+      },
+      { immediate: true }
+    )
+
+    return {
+      category,
+      assets,
+      dropdownItems,
+      isLoading,
+      error
+    }
+  }
+
+  return {
+    category: computed(() => undefined),
+    assets: computed(() => []),
+    dropdownItems: computed(() => []),
+    isLoading: computed(() => false),
+    error: computed(() => null)
+  }
+}

src/renderer/extensions/vueNodes/widgets/registry/widgetRegistry.ts

@@ -62,7 +62,10 @@ const coreWidgetDefinitions: Array<[string, WidgetDefinition]> = [
       essential: true
     }
   ],
-  ['combo', { component: WidgetSelect, aliases: ['COMBO'], essential: true }],
+  [
+    'combo',
+    { component: WidgetSelect, aliases: ['COMBO', 'asset'], essential: true }
+  ],
   [
     'color',
     { component: WidgetColorPicker, aliases: ['COLOR'], essential: false }

src/stores/assetsStore.ts

@@ -1,6 +1,6 @@
 import { useAsyncState } from '@vueuse/core'
 import { defineStore } from 'pinia'
-import { computed } from 'vue'
+import { computed, shallowReactive } from 'vue'
 
 import {
   mapInputFileToAssetItem,
@@ -9,6 +9,7 @@ import {
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
 import { assetService } from '@/platform/assets/services/assetService'
 import { isCloud } from '@/platform/distribution/types'
+import type { HistoryTaskItem } from '@/schemas/apiSchema'
 import { api } from '@/scripts/api'
 
 import { TaskItemImpl } from './queueStore'
@@ -47,7 +48,7 @@ async function fetchInputFilesFromCloud(): Promise<AssetItem[]> {
 /**
  * Convert history task items to asset items
  */
-function mapHistoryToAssets(historyItems: any[]): AssetItem[] {
+function mapHistoryToAssets(historyItems: HistoryTaskItem[]): AssetItem[] {
   const assetItems: AssetItem[] = []
 
   for (const item of historyItems) {
@@ -87,9 +88,13 @@ function mapHistoryToAssets(historyItems: any[]): AssetItem[] {
 export const useAssetsStore = defineStore('assets', () => {
   const maxHistoryItems = 200
 
-  const fetchInputFiles = isCloud
-    ? fetchInputFilesFromCloud
-    : fetchInputFilesFromAPI
+  const getFetchInputFiles = () => {
+    if (isCloud) {
+      return fetchInputFilesFromCloud
+    }
+    return fetchInputFilesFromAPI
+  }
+  const fetchInputFiles = getFetchInputFiles()
 
   const {
     state: inputAssets,
@@ -129,7 +134,6 @@ export const useAssetsStore = defineStore('assets', () => {
   const inputAssetsByFilename = computed(() => {
     const map = new Map<string, AssetItem>()
     for (const asset of inputAssets.value) {
-      // Use asset_hash as the key (hash-based filename)
       if (asset.asset_hash) {
         map.set(asset.asset_hash, asset)
       }
@@ -146,6 +150,96 @@ export const useAssetsStore = defineStore('assets', () => {
     return inputAssetsByFilename.value.get(filename)?.name ?? filename
   }
 
+  /**
+   * Model assets cached by node type (e.g., 'CheckpointLoaderSimple', 'LoraLoader')
+   * Used by multiple loader nodes to avoid duplicate fetches
+   * Cloud-only feature - empty Maps in desktop builds
+   */
+  const getModelState = () => {
+    if (isCloud) {
+      const modelAssetsByNodeType = shallowReactive(
+        new Map<string, AssetItem[]>()
+      )
+      const modelLoadingByNodeType = shallowReactive(new Map<string, boolean>())
+      const modelErrorByNodeType = shallowReactive(
+        new Map<string, Error | null>()
+      )
+
+      const stateByNodeType = shallowReactive(
+        new Map<string, ReturnType<typeof useAsyncState<AssetItem[]>>>()
+      )
+
+      /**
+       * Fetch and cache model assets for a specific node type
+       * Uses VueUse's useAsyncState for automatic loading/error tracking
+       * @param nodeType The node type to fetch assets for (e.g., 'CheckpointLoaderSimple')
+       * @returns Promise resolving to the fetched assets
+       */
+      async function updateModelsForNodeType(
+        nodeType: string
+      ): Promise<AssetItem[]> {
+        if (!stateByNodeType.has(nodeType)) {
+          stateByNodeType.set(
+            nodeType,
+            useAsyncState(
+              () => assetService.getAssetsForNodeType(nodeType),
+              [],
+              {
+                immediate: false,
+                resetOnExecute: false,
+                onError: (err) => {
+                  console.error(
+                    `Error fetching model assets for ${nodeType}:`,
+                    err
+                  )
+                }
+              }
+            )
+          )
+        }
+
+        const state = stateByNodeType.get(nodeType)!
+
+        modelLoadingByNodeType.set(nodeType, true)
+        modelErrorByNodeType.set(nodeType, null)
+
+        try {
+          await state.execute()
+          const assets = state.state.value
+          modelAssetsByNodeType.set(nodeType, assets)
+          modelErrorByNodeType.set(
+            nodeType,
+            state.error.value instanceof Error ? state.error.value : null
+          )
+          return assets
+        } finally {
+          modelLoadingByNodeType.set(nodeType, state.isLoading.value)
+        }
+      }
+
+      return {
+        modelAssetsByNodeType,
+        modelLoadingByNodeType,
+        modelErrorByNodeType,
+        updateModelsForNodeType
+      }
+    }
+
+    return {
+      modelAssetsByNodeType: shallowReactive(new Map<string, AssetItem[]>()),
+      modelLoadingByNodeType: shallowReactive(new Map<string, boolean>()),
+      modelErrorByNodeType: shallowReactive(new Map<string, Error | null>()),
+      updateModelsForNodeType: async () => []
+    }
+  }
+
+  const {
+    modelAssetsByNodeType,
+    modelLoadingByNodeType,
+    modelErrorByNodeType,
+    updateModelsForNodeType
+  } = getModelState()
+
   return {
     // States
     inputAssets,
@@ -161,6 +255,12 @@ export const useAssetsStore = defineStore('assets', () => {
 
     // Input mapping helpers
     inputAssetsByFilename,
-    getInputName
+    getInputName,
+
+    // Model assets
+    modelAssetsByNodeType,
+    modelLoadingByNodeType,
+    modelErrorByNodeType,
+    updateModelsForNodeType
   }
 })