feat: Improve media asset display with file format tags and filename truncation

- Add file format tags (PNG, JPG, etc.) for input directory assets
- Truncate long filenames in input assets with originalFilename preservation
- Show file format chip independently from duration chip
- Fix conditional display logic for chips in MediaAssetCard
- Apply consistent filename truncation (20 chars) across cloud assets

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>

Author: viva-jinyi

src/components/card/CardTop.vue

@@ -54,7 +54,7 @@ const {
 }>()
 
 const topStyle = computed(() => {
-  const baseClasses = 'relative p-0'
+  const baseClasses = 'relative p-0 overflow-hidden'
 
   const ratioClasses = {
     square: 'aspect-square',

src/platform/assets/components/MediaAssetCard.vue

@@ -62,13 +62,17 @@
         </template>
 
         <!-- Duration/Format chips (bottom-left) - show on hover even when playing -->
-        <template v-if="showDurationChips" #bottom-left>
+        <template v-if="showDurationChips || showFileFormatChip" #bottom-left>
           <div
             class="flex flex-wrap items-center gap-1"
             @mouseenter="handleOverlayMouseEnter"
             @mouseleave="handleOverlayMouseLeave"
           >
-            <SquareChip variant="light" :label="formattedDuration" />
+            <SquareChip
+              v-if="formattedDuration"
+              variant="light"
+              :label="formattedDuration"
+            />
             <SquareChip v-if="fileFormat" variant="light" :label="fileFormat" />
           </div>
         </template>
@@ -291,6 +295,14 @@ const showDurationChips = computed(
     (!isVideoPlaying.value || isCardOrOverlayHovered.value)
 )
 
+const showFileFormatChip = computed(
+  () =>
+    !loading &&
+    !!asset &&
+    !!fileFormat.value &&
+    (!isVideoPlaying.value || isCardOrOverlayHovered.value)
+)
+
 const showOutputCount = computed(
   () => false // Remove output count for simplified version
 )

src/platform/assets/components/MediaVideoBottom.vue

@@ -7,15 +7,15 @@
       {{ fileName }}
     </h3>
     <div class="flex items-center text-xs text-zinc-400">
-      <span>{{ asset.dimensions?.width }}x{{ asset.dimensions?.height }}</span>
+      <span>{{ formatSize(asset.size) }}</span>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue'
 
-import { getFilenameDetails } from '@/utils/formatUtil'
+import { formatSize, getFilenameDetails } from '@/utils/formatUtil'
 
 import type { AssetContext, AssetMeta } from '../schemas/mediaAssetSchema'
 

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

@@ -5,6 +5,7 @@ import { assetService } from '@/platform/assets/services/assetService'
 import type { HistoryTaskItem } from '@/schemas/apiSchema'
 import { api } from '@/scripts/api'
 import { TaskItemImpl } from '@/stores/queueStore'
+import { truncateFilename } from '@/utils/formatUtil'
 
 import { mapTaskOutputToAssetItem } from './assetMappers'
 
@@ -31,7 +32,15 @@ export function useAssetsApi() {
       // For input directory, just return assets without history
       if (directory === 'input') {
         const assets = await assetService.getAssetsByTag(directory)
-        return assets
+        // Process assets to truncate long filenames for display
+        return assets.map((asset) => ({
+          ...asset,
+          name: truncateFilename(asset.name, 20),
+          user_metadata: {
+            ...asset.user_metadata,
+            originalFilename: asset.name.length > 20 ? asset.name : undefined
+          }
+        }))
       }
 
       // For output directory, fetch history data and convert to AssetItem format