feat: add job folder view for grouped batch outputs in media assets

- Add folder view to display all outputs from a single batch job
  - Show output count badge on assets with multiple batch outputs
  - Add job ID display and copy functionality in folder view header
  - Display execution time for batch jobs
  - Implement download functionality for output assets only
  - Add inspect action to asset more menu
  - Extract prompt ID from asset IDs using new UUID utility
  - Add comprehensive tests for UUID extraction utilities

src/components/sidebar/tabs/AssetsSidebarTab.vue

@@ -1,6 +1,39 @@
 <template>
-  <SidebarTabTemplate :title="$t('sideToolbar.mediaAssets')">
+  <SidebarTabTemplate
+    :title="isInFolderView ? '' : $t('sideToolbar.mediaAssets')"
+  >
+    <template v-if="isInFolderView" #tool-buttons>
+      <div class="flex w-full items-center gap-2">
+        <span class="font-medium"
+          >Job ID: {{ folderPromptId?.substring(0, 8) }}</span
+        >
+        <button
+          class="rounded p-1 transition-colors hover:bg-neutral-100 dark-theme:hover:bg-neutral-700"
+          :title="$t('g.copy')"
+          @click="copyJobId"
+        >
+          <i class="icon-[lucide--copy] size-4" />
+        </button>
+        <span class="ml-auto text-sm text-neutral-500">
+          {{ formatExecutionTime(folderExecutionTime) }}
+        </span>
+      </div>
+    </template>
     <template #header>
+      <!-- Job Detail View Header -->
+      <div
+        v-if="isInFolderView"
+        class="border-b border-neutral-300 px-4 pt-2 pb-3 dark-theme:border-neutral-700"
+      >
+        <button
+          class="flex items-center gap-2 rounded bg-neutral-100 px-3 py-1.5 text-sm transition-colors hover:bg-neutral-200 dark-theme:bg-neutral-700 dark-theme:hover:bg-neutral-600"
+          @click="exitFolderView"
+        >
+          <i class="icon-[lucide--arrow-left] size-4" />
+          <span>Back to all assets</span>
+        </button>
+      </div>
+      <!-- Normal Tab View -->
       <Tabs v-model:value="activeTab" class="w-full">
         <TabList class="border-b border-neutral-300">
           <Tab value="input">{{ $t('sideToolbar.labels.imported') }}</Tab>
@@ -10,7 +43,7 @@
     </template>
     <template #body>
       <VirtualGrid
-        v-if="mediaAssets.length"
+        v-if="displayAssets.length"
         :items="mediaAssetsWithKey"
         :grid-style="{
           display: 'grid',
@@ -23,8 +56,15 @@
           <MediaAssetCard
             :asset="item"
             :selected="selectedAsset?.id === item.id"
+            :show-output-count="
+              activeTab === 'output' &&
+              !isInFolderView &&
+              (item.user_metadata?.outputCount as number) > 1
+            "
+            :output-count="(item.user_metadata?.outputCount as number) || 0"
             @click="handleAssetSelect(item)"
             @zoom="handleZoomClick(item)"
+            @output-count-click="enterFolderView(item)"
           />
         </template>
       </VirtualGrid>
@@ -59,6 +99,7 @@ import ProgressSpinner from 'primevue/progressspinner'
 import Tab from 'primevue/tab'
 import TabList from 'primevue/tablist'
 import Tabs from 'primevue/tabs'
+import { useToast } from 'primevue/usetoast'
 import { computed, onMounted, ref, watch } from 'vue'
 
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
@@ -74,6 +115,11 @@ import { getMediaTypeFromFilenamePlural } from '@/utils/formatUtil'
 const activeTab = ref<'input' | 'output'>('input')
 const mediaAssets = ref<AssetItem[]>([])
 const selectedAsset = ref<AssetItem | null>(null)
+const folderPromptId = ref<string | null>(null)
+const folderExecutionTime = ref<number | undefined>(undefined)
+const isInFolderView = computed(() => folderPromptId.value !== null)
+
+const toast = useToast()
 
 // Use unified media assets implementation that handles cloud/internal automatically
 const { loading, error, fetchMediaList } = useMediaAssets()
@@ -81,7 +127,8 @@ const { loading, error, fetchMediaList } = useMediaAssets()
 const galleryActiveIndex = ref(-1)
 const galleryItems = computed(() => {
   // Convert AssetItems to ResultItemImpl format for gallery
-  return mediaAssets.value.map((asset) => {
+  // Use displayAssets instead of mediaAssets to show correct items based on view mode
+  return displayAssets.value.map((asset) => {
     const resultItem = new ResultItemImpl({
       filename: asset.name,
       subfolder: '',
@@ -102,9 +149,59 @@ 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
+})
+
+// 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
+  }
+
+  return mediaAssets.value
+})
+
 // Add key property for VirtualGrid
 const mediaAssetsWithKey = computed(() => {
-  return mediaAssets.value.map((asset) => ({
+  return displayAssets.value.map((asset) => ({
     ...asset,
     key: asset.id
   }))
@@ -137,9 +234,62 @@ const handleAssetSelect = (asset: AssetItem) => {
 
 const handleZoomClick = (asset: AssetItem) => {
   // Find the index of the clicked asset
-  const index = mediaAssets.value.findIndex((a) => a.id === asset.id)
+  const index = displayAssets.value.findIndex((a) => a.id === asset.id)
   if (index !== -1) {
     galleryActiveIndex.value = index
   }
 }
+
+const enterFolderView = (asset: AssetItem) => {
+  const promptId = asset.user_metadata?.promptId as string
+  if (promptId) {
+    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
+    }
+  }
+}
+
+const exitFolderView = () => {
+  folderPromptId.value = null
+  folderExecutionTime.value = undefined
+}
+
+const copyJobId = async () => {
+  if (folderPromptId.value) {
+    try {
+      await navigator.clipboard.writeText(folderPromptId.value)
+      toast.add({
+        severity: 'success',
+        summary: 'Copied',
+        detail: 'Job ID copied to clipboard',
+        life: 2000
+      })
+    } catch (error) {
+      toast.add({
+        severity: 'error',
+        summary: 'Error',
+        detail: 'Failed to copy Job ID',
+        life: 3000
+      })
+    }
+  }
+}
+
+const formatExecutionTime = (seconds?: number): string => {
+  if (!seconds) return ''
+
+  const minutes = Math.floor(seconds / 60)
+  const remainingSeconds = Math.floor(seconds % 60)
+
+  if (minutes > 0) {
+    return `${minutes}m ${remainingSeconds}s`
+  }
+  return `${remainingSeconds}s`
+}
 </script>