refactor: use Queuestore.tasks for grouped media assets

src/components/sidebar/tabs/AssetsSidebarTab.vue

@@ -157,53 +157,17 @@ const galleryItems = computed(() => {
   })
 })
 
-// Group assets by promptId for output tab
-const groupedAssets = computed(() => {
-  if (activeTab.value !== 'output' || isInFolderView.value) {
-    return null
-  }
-
-  const groups = new Map<string, AssetItem[]>()
-
-  mediaAssets.value.forEach((asset) => {
-    const promptId = asset.user_metadata?.promptId as string
-    if (promptId) {
-      if (!groups.has(promptId)) {
-        groups.set(promptId, [])
-      }
-      groups.get(promptId)!.push(asset)
-    }
-  })
-
-  return groups
-})
+// Store folder view assets separately
+const folderAssets = ref<AssetItem[]>([])
 
 // Get display assets based on view mode
 const displayAssets = computed(() => {
-  if (isInFolderView.value && folderPromptId.value) {
-    // Show all assets from the selected prompt
-    return mediaAssets.value.filter(
-      (asset) => asset.user_metadata?.promptId === folderPromptId.value
-    )
-  }
-
-  if (activeTab.value === 'output' && groupedAssets.value) {
-    // Show only the first asset from each prompt group
-    const firstAssets: AssetItem[] = []
-    groupedAssets.value.forEach((assets) => {
-      if (assets.length > 0) {
-        // Add output count to the first asset
-        const firstAsset = { ...assets[0] }
-        firstAsset.user_metadata = {
-          ...firstAsset.user_metadata,
-          outputCount: assets.length
-        }
-        firstAssets.push(firstAsset)
-      }
-    })
-    return firstAssets
+  if (isInFolderView.value) {
+    // Show all assets from the folder view
+    return folderAssets.value
   }
 
+  // Normal view: show grouped assets (already have outputCount from API)
   return mediaAssets.value
 })
 
@@ -250,22 +214,36 @@ const handleZoomClick = (asset: AssetItem) => {
 
 const enterFolderView = (asset: AssetItem) => {
   const promptId = asset.user_metadata?.promptId as string
-  if (promptId) {
+  const allOutputs = asset.user_metadata?.allOutputs as any[]
+
+  if (promptId && allOutputs) {
     folderPromptId.value = promptId
-    // Get execution time from the first asset of this prompt
-    const promptAssets = mediaAssets.value.filter(
-      (a) => a.user_metadata?.promptId === promptId
-    )
-    if (promptAssets.length > 0) {
-      folderExecutionTime.value = promptAssets[0].user_metadata
-        ?.executionTimeInSeconds as number
-    }
+    folderExecutionTime.value = asset.user_metadata
+      ?.executionTimeInSeconds as number
+
+    // Convert all outputs to AssetItem format for folder view
+    folderAssets.value = allOutputs.map((output) => ({
+      id: `${promptId}-${output.nodeId}-${output.filename}`,
+      name: output.filename,
+      size: 0,
+      created_at: asset.created_at, // Use parent asset's created_at
+      tags: ['output'],
+      preview_url: output.url,
+      user_metadata: {
+        promptId,
+        nodeId: output.nodeId,
+        subfolder: output.subfolder,
+        executionTimeInSeconds: asset.user_metadata?.executionTimeInSeconds,
+        workflow: asset.user_metadata?.workflow
+      }
+    }))
   }
 }
 
 const exitFolderView = () => {
   folderPromptId.value = null
   folderExecutionTime.value = undefined
+  folderAssets.value = []
 }
 
 const copyJobId = async () => {

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

@@ -41,21 +41,29 @@ export function useAssetsApi() {
         }))
       }
 
-      // For output directory, use QueueStore's flatTasks
       const queueStore = useQueueStore()
 
-      // Get all flat tasks that have preview outputs
-      const assetItems: AssetItem[] = queueStore.flatTasks
+      const assetItems: AssetItem[] = queueStore.tasks
         .filter(
           (task) => task.previewOutput && task.displayStatus === 'Completed'
         )
         .map((task) => {
           const output = task.previewOutput!
-          return mapTaskOutputToAssetItem(
+          const assetItem = mapTaskOutputToAssetItem(
             task,
             output,
             true // Use display name for cloud
           )
+
+          // 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
         })
 
       return assetItems

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

@@ -48,17 +48,28 @@ export function useInternalFilesApi() {
 
       const queueStore = useQueueStore()
 
-      const assetItems: AssetItem[] = queueStore.flatTasks
+      // 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!
-          return mapTaskOutputToAssetItem(
+          const assetItem = mapTaskOutputToAssetItem(
             task,
             output,
             false // Don't use display name for internal
           )
+
+          // 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
         })
 
       // Sort by creation date (newest first)