feat(assetsStore): add updateAssetMetadata with optimistic cache update

src/platform/assets/components/AssetBrowserModal.vue

@@ -68,7 +68,7 @@
     </template>
 
     <template #rightPanel>
-      <ModelInfoPanel v-if="focusedAsset" :asset="focusedAsset" />
+      <ModelInfoPanel v-if="focusedAsset" :asset="focusedAsset" :cache-key />
     </template>
   </BaseModalLayout>
 </template>

src/platform/assets/components/modelInfo/ModelInfoPanel.vue

@@ -130,6 +130,7 @@
 </template>
 
 <script setup lang="ts">
+import { watchDebounced } from '@vueuse/core'
 import { computed, ref, watch } from 'vue'
 
 import PropertiesAccordionItem from '@/components/rightSidePanel/layout/PropertiesAccordionItem.vue'
@@ -148,13 +149,15 @@ import {
   getAssetTriggerPhrases,
   getSourceName
 } from '@/platform/assets/utils/assetMetadataUtils'
+import { useAssetsStore } from '@/stores/assetsStore'
 
 import ModelInfoField from './ModelInfoField.vue'
 
 const accordionClass = 'bg-transparent border-t border-border-default'
 
-const { asset } = defineProps<{
+const { asset, cacheKey } = defineProps<{
   asset: AssetDisplayItem
+  cacheKey?: string
 }>()
 
 const displayName = computed(() => getAssetDisplayName(asset))
@@ -180,4 +183,23 @@ const modelType = computed(() => {
   if (!typeTag) return null
   return typeTag.includes('/') ? typeTag.split('/').pop() : typeTag
 })
+
+const assetsStore = useAssetsStore()
+
+async function saveMetadata() {
+  if (isImmutable.value) return
+
+  await assetsStore.updateAssetMetadata(
+    asset.id,
+    {
+      ...asset.user_metadata,
+      base_model: baseModels.value,
+      additional_tags: additionalTags.value
+    },
+    cacheKey
+  )
+}
+
+watchDebounced(baseModels, saveMetadata, { debounce: 500 })
+watchDebounced(additionalTags, saveMetadata, { debounce: 500 })
 </script>

src/stores/assetsStore.ts

@@ -339,12 +339,58 @@ export const useAssetsStore = defineStore('assets', () => {
         return updateModelsForKey(key, () => assetService.getAssetsByTag(tag))
       }
 
+      /**
+       * Optimistically update an asset in the cache
+       * @param assetId The asset ID to update
+       * @param updates Partial asset data to merge
+       * @param cacheKey Optional cache key to target (nodeType or 'tag:xxx')
+       */
+      function updateAssetInCache(
+        assetId: string,
+        updates: Partial<AssetItem>,
+        cacheKey?: string
+      ) {
+        const keysToCheck = cacheKey
+          ? [cacheKey]
+          : Array.from(modelAssetsByNodeType.keys())
+
+        for (const key of keysToCheck) {
+          const assets = modelAssetsByNodeType.get(key)
+          if (!assets) continue
+
+          const index = assets.findIndex((a) => a.id === assetId)
+          if (index !== -1) {
+            const updatedAsset = { ...assets[index], ...updates }
+            const newAssets = [...assets]
+            newAssets[index] = updatedAsset
+            modelAssetsByNodeType.set(key, newAssets)
+            if (cacheKey) return
+          }
+        }
+      }
+
+      /**
+       * Update asset metadata with optimistic cache update
+       * @param assetId The asset ID to update
+       * @param userMetadata The user_metadata to save
+       * @param cacheKey Optional cache key to target for optimistic update
+       */
+      async function updateAssetMetadata(
+        assetId: string,
+        userMetadata: Record<string, unknown>,
+        cacheKey?: string
+      ) {
+        updateAssetInCache(assetId, { user_metadata: userMetadata }, cacheKey)
+        await assetService.updateAsset(assetId, { user_metadata: userMetadata })
+      }
+
       return {
         modelAssetsByNodeType,
         modelLoadingByNodeType,
         modelErrorByNodeType,
         updateModelsForNodeType,
-        updateModelsForTag
+        updateModelsForTag,
+        updateAssetMetadata
       }
     }
 
@@ -353,7 +399,8 @@ export const useAssetsStore = defineStore('assets', () => {
       modelLoadingByNodeType: shallowReactive(new Map<string, boolean>()),
       modelErrorByNodeType: shallowReactive(new Map<string, Error | null>()),
       updateModelsForNodeType: async () => [],
-      updateModelsForTag: async () => []
+      updateModelsForTag: async () => [],
+      updateAssetMetadata: async () => {}
     }
   }
 
@@ -362,7 +409,8 @@ export const useAssetsStore = defineStore('assets', () => {
     modelLoadingByNodeType,
     modelErrorByNodeType,
     updateModelsForNodeType,
-    updateModelsForTag
+    updateModelsForTag,
+    updateAssetMetadata
   } = getModelState()
 
   // Watch for completed downloads and refresh model caches
@@ -427,6 +475,7 @@ export const useAssetsStore = defineStore('assets', () => {
     modelLoadingByNodeType,
     modelErrorByNodeType,
     updateModelsForNodeType,
-    updateModelsForTag
+    updateModelsForTag,
+    updateAssetMetadata
   }
 })