feat: Implement centralized AssetsStore for reactive assets updates

- Create AssetsStore following QueueStore pattern for history-based assets
- Use useAsyncState for async state management (loading/error handling)
- Support both cloud and local environments (via isCloud flag)
- Auto-update history assets on status events in GraphView
- Refactor useMediaAssets composables to use AssetsStore

src/platform/assets/composables/useMediaAssets/useAssetsApi.ts

@@ -1,70 +1,39 @@
-import { useAsyncState } from '@vueuse/core'
+import { computed } from 'vue'
 
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
-import { assetService } from '@/platform/assets/services/assetService'
-import { useQueueStore } from '@/stores/queueStore'
-
-import { mapTaskOutputToAssetItem } from './assetMappers'
-
-/**
- * Fetch input assets from cloud service
- */
-async function fetchInputAssets(directory: string): Promise<AssetItem[]> {
-  const assets = await assetService.getAssetsByTag(directory, false)
-  return assets
-}
+import { useAssetsStore } from '@/stores/assetsStore'
 
 /**
- * Fetch output assets from queue store
+ * Composable for fetching media assets from cloud environment
+ * Uses AssetsStore for centralized state management
  */
-function fetchOutputAssets(): AssetItem[] {
-  const queueStore = useQueueStore()
-
-  const assetItems: AssetItem[] = queueStore.tasks
-    .filter((task) => task.previewOutput && task.displayStatus === 'Completed')
-    .map((task) => {
-      const output = task.previewOutput!
-      const assetItem = mapTaskOutputToAssetItem(task, output)
+export function useAssetsApi(directory: 'input' | 'output') {
+  const assetsStore = useAssetsStore()
 
-      // Add output count and all outputs for folder view
-      assetItem.user_metadata = {
-        ...assetItem.user_metadata,
-        outputCount: task.flatOutputs.filter((o) => o.supportsPreview).length,
-        allOutputs: task.flatOutputs.filter((o) => o.supportsPreview)
-      }
+  const media = computed(() =>
+    directory === 'input' ? assetsStore.inputAssets : assetsStore.historyAssets
+  )
 
-      return assetItem
-    })
+  const loading = computed(() =>
+    directory === 'input'
+      ? assetsStore.inputLoading
+      : assetsStore.historyLoading
+  )
 
-  return assetItems
-}
+  const error = computed(() =>
+    directory === 'input' ? assetsStore.inputError : assetsStore.historyError
+  )
 
-/**
- * Composable for fetching media assets from cloud environment
- * Creates an independent instance for each directory
- */
-export function useAssetsApi(directory: 'input' | 'output') {
-  const fetchAssets = async (): Promise<AssetItem[]> => {
+  const fetchMediaList = async (): Promise<AssetItem[]> => {
     if (directory === 'input') {
-      return fetchInputAssets(directory)
+      await assetsStore.updateInputs()
+      return assetsStore.inputAssets
     } else {
-      return fetchOutputAssets()
+      await assetsStore.updateHistory()
+      return assetsStore.historyAssets
     }
   }
 
-  const {
-    state: media,
-    isLoading: loading,
-    error,
-    execute: fetchMediaList
-  } = useAsyncState(fetchAssets, [], {
-    immediate: false,
-    resetOnExecute: false,
-    onError: (err) => {
-      console.error(`Error fetching ${directory} cloud assets:`, err)
-    }
-  })
-
   const refresh = () => fetchMediaList()
 
   return {

src/platform/assets/composables/useMediaAssets/useInternalFilesApi.ts

@@ -1,90 +1,39 @@
-import { useAsyncState } from '@vueuse/core'
+import { computed } from 'vue'
 
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
-import { api } from '@/scripts/api'
-import { useQueueStore } from '@/stores/queueStore'
-
-import {
-  mapInputFileToAssetItem,
-  mapTaskOutputToAssetItem
-} from './assetMappers'
+import { useAssetsStore } from '@/stores/assetsStore'
 
 /**
- * Fetch input directory files from the internal API
+ * Composable for fetching media assets from local environment
+ * Uses AssetsStore for centralized state management
  */
-async function fetchInputFiles(directory: string): Promise<AssetItem[]> {
-  const response = await fetch(api.internalURL(`/files/${directory}`), {
-    headers: {
-      'Comfy-User': api.user
-    }
-  })
-
-  if (!response.ok) {
-    throw new Error(`Failed to fetch ${directory} files`)
-  }
+export function useInternalFilesApi(directory: 'input' | 'output') {
+  const assetsStore = useAssetsStore()
 
-  const filenames: string[] = await response.json()
-  return filenames.map((name, index) =>
-    mapInputFileToAssetItem(name, index, directory as 'input')
+  const media = computed(() =>
+    directory === 'input' ? assetsStore.inputAssets : assetsStore.historyAssets
   )
-}
-
-/**
- * Fetch output files from the queue store
- */
-function fetchOutputFiles(): AssetItem[] {
-  const queueStore = useQueueStore()
-
-  // Use tasks (already grouped by promptId) instead of flatTasks
-  const assetItems: AssetItem[] = queueStore.tasks
-    .filter((task) => task.previewOutput && task.displayStatus === 'Completed')
-    .map((task) => {
-      const output = task.previewOutput!
-      const assetItem = mapTaskOutputToAssetItem(task, output)
 
-      // Add output count and all outputs for folder view
-      assetItem.user_metadata = {
-        ...assetItem.user_metadata,
-        outputCount: task.flatOutputs.filter((o) => o.supportsPreview).length,
-        allOutputs: task.flatOutputs.filter((o) => o.supportsPreview)
-      }
-
-      return assetItem
-    })
+  const loading = computed(() =>
+    directory === 'input'
+      ? assetsStore.inputLoading
+      : assetsStore.historyLoading
+  )
 
-  // Sort by creation date (newest first)
-  return assetItems.sort(
-    (a, b) =>
-      new Date(b.created_at).getTime() - new Date(a.created_at).getTime()
+  const error = computed(() =>
+    directory === 'input' ? assetsStore.inputError : assetsStore.historyError
   )
-}
 
-/**
- * Composable for fetching media assets from local environment
- * Creates an independent instance for each directory
- */
-export function useInternalFilesApi(directory: 'input' | 'output') {
-  const fetchAssets = async (): Promise<AssetItem[]> => {
+  const fetchMediaList = async (): Promise<AssetItem[]> => {
     if (directory === 'input') {
-      return fetchInputFiles(directory)
+      await assetsStore.updateInputs()
+      return assetsStore.inputAssets
     } else {
-      return fetchOutputFiles()
+      await assetsStore.updateHistory()
+      return assetsStore.historyAssets
     }
   }
 
-  const {
-    state: media,
-    isLoading: loading,
-    error,
-    execute: fetchMediaList
-  } = useAsyncState(fetchAssets, [], {
-    immediate: false,
-    resetOnExecute: false,
-    onError: (err) => {
-      console.error(`Error fetching ${directory} assets:`, err)
-    }
-  })
-
   const refresh = () => fetchMediaList()
 
   return {

src/stores/assetsStore.ts

@@ -0,0 +1,142 @@
+import { useAsyncState } from '@vueuse/core'
+import { defineStore } from 'pinia'
+import { computed } from 'vue'
+
+import {
+  mapInputFileToAssetItem,
+  mapTaskOutputToAssetItem
+} from '@/platform/assets/composables/useMediaAssets/assetMappers'
+import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
+import { assetService } from '@/platform/assets/services/assetService'
+import { isCloud } from '@/platform/distribution/types'
+import { api } from '@/scripts/api'
+
+import { TaskItemImpl } from './queueStore'
+
+/**
+ * Fetch input files from the internal API (OSS version)
+ */
+async function fetchInputFilesFromAPI(): Promise<AssetItem[]> {
+  const response = await fetch(api.internalURL('/files/input'), {
+    headers: {
+      'Comfy-User': api.user
+    }
+  })
+
+  if (!response.ok) {
+    throw new Error('Failed to fetch input files')
+  }
+
+  const filenames: string[] = await response.json()
+  return filenames.map((name, index) =>
+    mapInputFileToAssetItem(name, index, 'input')
+  )
+}
+
+/**
+ * Fetch input files from cloud service
+ */
+async function fetchInputFilesFromCloud(): Promise<AssetItem[]> {
+  return await assetService.getAssetsByTag('input', false)
+}
+
+/**
+ * Convert history task items to asset items
+ */
+function mapHistoryToAssets(historyItems: any[]): AssetItem[] {
+  const assetItems: AssetItem[] = []
+
+  for (const item of historyItems) {
+    if (!item.outputs || !item.status || item.status?.status_str === 'error') {
+      continue
+    }
+
+    const task = new TaskItemImpl(
+      'History',
+      item.prompt,
+      item.status,
+      item.outputs
+    )
+
+    if (!task.previewOutput) {
+      continue
+    }
+
+    const assetItem = mapTaskOutputToAssetItem(task, task.previewOutput)
+
+    const supportedOutputs = task.flatOutputs.filter((o) => o.supportsPreview)
+    assetItem.user_metadata = {
+      ...assetItem.user_metadata,
+      outputCount: supportedOutputs.length,
+      allOutputs: supportedOutputs
+    }
+
+    assetItems.push(assetItem)
+  }
+
+  return assetItems.sort(
+    (a, b) =>
+      new Date(b.created_at).getTime() - new Date(a.created_at).getTime()
+  )
+}
+
+export const useAssetsStore = defineStore('assets', () => {
+  const maxHistoryItems = 200
+
+  const fetchInputFiles = isCloud
+    ? fetchInputFilesFromCloud
+    : fetchInputFilesFromAPI
+
+  const {
+    state: inputAssets,
+    isLoading: inputLoading,
+    error: inputError,
+    execute: updateInputs
+  } = useAsyncState(fetchInputFiles, [], {
+    immediate: false,
+    resetOnExecute: false,
+    onError: (err) => {
+      console.error('Error fetching input assets:', err)
+    }
+  })
+
+  const fetchHistoryAssets = async (): Promise<AssetItem[]> => {
+    const history = await api.getHistory(maxHistoryItems)
+    return mapHistoryToAssets(history.History)
+  }
+
+  const {
+    state: historyAssets,
+    isLoading: historyLoading,
+    error: historyError,
+    execute: updateHistory
+  } = useAsyncState(fetchHistoryAssets, [], {
+    immediate: false,
+    resetOnExecute: false,
+    onError: (err) => {
+      console.error('Error fetching history assets:', err)
+    }
+  })
+
+  const isLoading = computed(() => inputLoading.value || historyLoading.value)
+
+  const update = async () => {
+    await Promise.all([updateInputs(), updateHistory()])
+  }
+
+  return {
+    // States
+    inputAssets,
+    historyAssets,
+    inputLoading,
+    historyLoading,
+    inputError,
+    historyError,
+    isLoading,
+
+    // Actions
+    updateInputs,
+    updateHistory,
+    update
+  }
+})

src/views/GraphView.vue

@@ -54,6 +54,7 @@ import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
 import { setupAutoQueueHandler } from '@/services/autoQueueService'
 import { useKeybindingService } from '@/services/keybindingService'
+import { useAssetsStore } from '@/stores/assetsStore'
 import { useCommandStore } from '@/stores/commandStore'
 import { useExecutionStore } from '@/stores/executionStore'
 import { useMenuItemStore } from '@/stores/menuItemStore'
@@ -80,6 +81,7 @@ const settingStore = useSettingStore()
 const executionStore = useExecutionStore()
 const colorPaletteStore = useColorPaletteStore()
 const queueStore = useQueueStore()
+const assetsStore = useAssetsStore()
 const versionCompatibilityStore = useVersionCompatibilityStore()
 const graphCanvasContainerRef = ref<HTMLDivElement | null>(null)
 
@@ -188,11 +190,17 @@ const init = () => {
 const queuePendingTaskCountStore = useQueuePendingTaskCountStore()
 const onStatus = async (e: CustomEvent<StatusWsMessageStatus>) => {
   queuePendingTaskCountStore.update(e)
-  await queueStore.update()
+  await Promise.all([
+    queueStore.update(),
+    assetsStore.updateHistory() // Update history assets when status changes
+  ])
 }
 
 const onExecutionSuccess = async () => {
-  await queueStore.update()
+  await Promise.all([
+    queueStore.update(),
+    assetsStore.updateHistory() // Update history assets on execution success
+  ])
 }
 
 const reconnectingMessage: ToastMessageOptions = {