feat: Add Media Assets sidebar tab for file management

- Implement new sidebar tab for managing imported/generated files
- Add separate composables for internal and cloud environments
- Display execution time from history API on generated outputs
- Support gallery view with keyboard navigation
- Auto-truncate long filenames in cloud environment
- Add utility functions for media type detection
- Enable feature only in development mode

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

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

Author: viva-jinyi

packages/design-system/src/icons/image-ai-edit.svg

@@ -474,3 +474,51 @@ export function formatDuration(milliseconds: number): string {
 
   return parts.join(' ')
 }
+
+/**
+ * Determines the media type from a filename's extension
+ * @param filename The filename to analyze
+ * @returns The media type: 'images', 'videos', 'audios', '3D' for gallery compatibility
+ */
+export function getMediaTypeFromFilename(filename: string): string {
+  if (!filename) return 'images'
+  const ext = filename.split('.').pop()?.toLowerCase()
+  if (!ext) return 'images'
+
+  const imageExts = ['png', 'jpg', 'jpeg', 'gif', 'webp', 'bmp']
+  const videoExts = ['mp4', 'webm', 'mov', 'avi']
+  const audioExts = ['mp3', 'wav', 'ogg', 'flac']
+  const threeDExts = ['obj', 'fbx', 'gltf', 'glb']
+
+  if (imageExts.includes(ext)) return 'images'
+  if (videoExts.includes(ext)) return 'videos'
+  if (audioExts.includes(ext)) return 'audios'
+  if (threeDExts.includes(ext)) return '3D'
+
+  return 'images'
+}
+
+/**
+ * Determines the media kind from a filename's extension
+ * @param filename The filename to analyze
+ * @returns The media kind: 'image', 'video', 'audio', or '3D'
+ */
+export function getMediaKindFromFilename(
+  filename: string
+): 'image' | 'video' | 'audio' | '3D' {
+  if (!filename) return 'image'
+  const ext = filename.split('.').pop()?.toLowerCase()
+  if (!ext) return 'image'
+
+  const imageExts = ['png', 'jpg', 'jpeg', 'gif', 'webp', 'bmp']
+  const videoExts = ['mp4', 'webm', 'mov', 'avi']
+  const audioExts = ['mp3', 'wav', 'ogg', 'flac']
+  const threeDExts = ['obj', 'fbx', 'gltf', 'glb']
+
+  if (imageExts.includes(ext)) return 'image'
+  if (videoExts.includes(ext)) return 'video'
+  if (audioExts.includes(ext)) return 'audio'
+  if (threeDExts.includes(ext)) return '3D'
+
+  return 'image'
+}

packages/shared-frontend-utils/src/formatUtil.ts

@@ -0,0 +1,150 @@
+<template>
+  <SidebarTabTemplate :title="$t('sideToolbar.mediaAssets')">
+    <template #header>
+      <Tabs v-model:value="activeTab" class="w-full">
+        <TabList class="border-b border-neutral-300">
+          <Tab value="input">{{ $t('sideToolbar.labels.imported') }}</Tab>
+          <Tab value="output">{{ $t('sideToolbar.labels.generated') }}</Tab>
+        </TabList>
+      </Tabs>
+    </template>
+    <template #body>
+      <VirtualGrid
+        v-if="mediaAssets.length"
+        :items="mediaAssetsWithKey"
+        :grid-style="{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
+          padding: '0.5rem',
+          gap: '0.5rem'
+        }"
+      >
+        <template #item="{ item }">
+          <MediaAssetCard
+            :asset="item"
+            :selected="selectedAsset?.id === item.id"
+            @click="handleAssetSelect(item)"
+            @zoom="handleZoomClick(item)"
+          />
+        </template>
+      </VirtualGrid>
+      <div v-else-if="loading">
+        <ProgressSpinner
+          style="width: 50px; left: 50%; transform: translateX(-50%)"
+        />
+      </div>
+      <div v-else>
+        <NoResultsPlaceholder
+          icon="pi pi-info-circle"
+          :title="
+            $t(
+              activeTab === 'input'
+                ? 'sideToolbar.noImportedFiles'
+                : 'sideToolbar.noGeneratedFiles'
+            )
+          "
+          :message="$t('sideToolbar.noFilesFoundMessage')"
+        />
+      </div>
+    </template>
+  </SidebarTabTemplate>
+  <ResultGallery
+    v-model:active-index="galleryActiveIndex"
+    :all-gallery-items="galleryItems"
+  />
+</template>
+
+<script setup lang="ts">
+import ProgressSpinner from 'primevue/progressspinner'
+import Tab from 'primevue/tab'
+import TabList from 'primevue/tablist'
+import Tabs from 'primevue/tabs'
+import { computed, onMounted, ref, watch } from 'vue'
+
+import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
+import VirtualGrid from '@/components/common/VirtualGrid.vue'
+import SidebarTabTemplate from '@/components/sidebar/tabs/SidebarTabTemplate.vue'
+import ResultGallery from '@/components/sidebar/tabs/queue/ResultGallery.vue'
+import { useCloudMediaAssets } from '@/composables/useCloudMediaAssets'
+import { useInternalMediaAssets } from '@/composables/useInternalMediaAssets'
+import MediaAssetCard from '@/platform/assets/components/MediaAssetCard.vue'
+import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
+import { isCloud } from '@/platform/distribution/types'
+import { ResultItemImpl } from '@/stores/queueStore'
+import { getMediaTypeFromFilename } from '@/utils/formatUtil'
+
+const activeTab = ref<'input' | 'output'>('input')
+const mediaAssets = ref<AssetItem[]>([])
+const selectedAsset = ref<AssetItem | null>(null)
+
+// Use appropriate implementation based on environment
+const implementation = isCloud
+  ? useCloudMediaAssets()
+  : useInternalMediaAssets()
+const { loading, error, fetchMediaList } = implementation
+
+const galleryActiveIndex = ref(-1)
+const galleryItems = computed(() => {
+  // Convert AssetItems to ResultItemImpl format for gallery
+  return mediaAssets.value.map((asset) => {
+    const resultItem = new ResultItemImpl({
+      filename: asset.name,
+      subfolder: '',
+      type: 'output',
+      nodeId: '0',
+      mediaType: getMediaTypeFromFilename(asset.name)
+    })
+
+    // Override the url getter to use asset.preview_url
+    Object.defineProperty(resultItem, 'url', {
+      get() {
+        return asset.preview_url || ''
+      },
+      configurable: true
+    })
+
+    return resultItem
+  })
+})
+
+// Add key property for VirtualGrid
+const mediaAssetsWithKey = computed(() => {
+  return mediaAssets.value.map((asset) => ({
+    ...asset,
+    key: asset.id
+  }))
+})
+
+const refreshAssets = async () => {
+  const files = await fetchMediaList(activeTab.value)
+  mediaAssets.value = files
+  if (error.value) {
+    console.error('Failed to refresh assets:', error.value)
+  }
+}
+
+watch(activeTab, () => {
+  void refreshAssets()
+})
+
+onMounted(() => {
+  void refreshAssets()
+})
+
+const handleAssetSelect = (asset: AssetItem) => {
+  // Toggle selection
+  if (selectedAsset.value?.id === asset.id) {
+    selectedAsset.value = null
+  } else {
+    selectedAsset.value = asset
+  }
+}
+
+const handleZoomClick = (asset: AssetItem) => {
+  // Find the index of the clicked asset
+  const index = mediaAssets.value.findIndex((a) => a.id === asset.id)
+  if (index !== -1) {
+    galleryActiveIndex.value = index
+  }
+}
+</script>

src/components/sidebar/tabs/AssetsSidebarTab.vue

@@ -0,0 +1,16 @@
+import { markRaw } from 'vue'
+
+import AssetsSidebarTab from '@/components/sidebar/tabs/AssetsSidebarTab.vue'
+import type { SidebarTabExtension } from '@/types/extensionTypes'
+
+export const useAssetsSidebarTab = (): SidebarTabExtension => {
+  return {
+    id: 'assets',
+    icon: 'icon-[comfy--image-ai-edit]',
+    title: 'sideToolbar.assets',
+    tooltip: 'sideToolbar.assets',
+    label: 'sideToolbar.labels.assets',
+    component: markRaw(AssetsSidebarTab),
+    type: 'vue'
+  }
+}

src/composables/sidebarTabs/useAssetsSidebarTab.ts

@@ -0,0 +1,133 @@
+import { ref } from 'vue'
+
+import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
+import { assetService } from '@/platform/assets/services/assetService'
+import type { HistoryTaskItem } from '@/schemas/apiSchema'
+import { api } from '@/scripts/api'
+import { TaskItemImpl } from '@/stores/queueStore'
+
+/**
+ * Composable for fetching media assets from cloud environment
+ * Includes execution time from history API
+ */
+export function useCloudMediaAssets() {
+  const loading = ref(false)
+  const error = ref<string | null>(null)
+
+  /**
+   * Fetch list of assets from cloud with execution time
+   * @param directory - 'input' or 'output'
+   * @returns Array of AssetItem with execution time in user_metadata
+   */
+  const fetchMediaList = async (
+    directory: 'input' | 'output'
+  ): Promise<AssetItem[]> => {
+    loading.value = true
+    error.value = null
+
+    try {
+      // For input directory, just return assets without history
+      if (directory === 'input') {
+        const assets = await assetService.getAssetsByTag(directory)
+        return assets
+      }
+
+      // For output directory, fetch history data and convert to AssetItem format
+      const historyResponse = await api.getHistory(200)
+
+      if (!historyResponse?.History) {
+        return []
+      }
+
+      // Convert history items to AssetItem format
+      const assetItems: AssetItem[] = []
+
+      historyResponse.History.forEach((historyItem: HistoryTaskItem) => {
+        // Create TaskItemImpl to use existing logic
+        const taskItem = new TaskItemImpl(
+          historyItem.taskType,
+          historyItem.prompt,
+          historyItem.status,
+          historyItem.outputs
+        )
+
+        // Only process completed tasks
+        if (taskItem.displayStatus === 'Completed' && taskItem.outputs) {
+          // Get execution time
+          const executionTimeInSeconds = taskItem.executionTimeInSeconds
+
+          // Process each output
+          taskItem.flatOutputs.forEach((output) => {
+            // Only include output type files (not temp previews)
+            if (output.type === 'output' && output.supportsPreview) {
+              // Truncate filename if longer than 15 characters
+              let displayName = output.filename
+              if (output.filename.length > 20) {
+                // Get file extension
+                const lastDotIndex = output.filename.lastIndexOf('.')
+                const nameWithoutExt =
+                  lastDotIndex > -1
+                    ? output.filename.substring(0, lastDotIndex)
+                    : output.filename
+                const extension =
+                  lastDotIndex > -1
+                    ? output.filename.substring(lastDotIndex)
+                    : ''
+
+                // If name without extension is still long, truncate it
+                if (nameWithoutExt.length > 10) {
+                  displayName =
+                    nameWithoutExt.substring(0, 10) +
+                    '...' +
+                    nameWithoutExt.substring(nameWithoutExt.length - 10) +
+                    extension
+                }
+              }
+
+              assetItems.push({
+                id: `${taskItem.promptId}-${output.nodeId}-${output.filename}`,
+                name: displayName,
+                size: 0, // We don't have size info from history
+                created_at: taskItem.executionStartTimestamp
+                  ? new Date(taskItem.executionStartTimestamp).toISOString()
+                  : new Date().toISOString(),
+                tags: ['output'],
+                preview_url: output.url,
+                user_metadata: {
+                  originalFilename: output.filename, // Store original filename
+                  promptId: taskItem.promptId,
+                  nodeId: output.nodeId,
+                  subfolder: output.subfolder,
+                  ...(executionTimeInSeconds && {
+                    executionTimeInSeconds
+                  }),
+                  ...(output.format && {
+                    format: output.format
+                  }),
+                  ...(taskItem.workflow && {
+                    workflow: taskItem.workflow
+                  })
+                }
+              })
+            }
+          })
+        }
+      })
+
+      return assetItems
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : 'Unknown error'
+      console.error(`Error fetching ${directory} cloud assets:`, errorMessage)
+      error.value = errorMessage
+      return []
+    } finally {
+      loading.value = false
+    }
+  }
+
+  return {
+    loading,
+    error,
+    fetchMediaList
+  }
+}