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 <noreply@anthropic.com>

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

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 9.99996L11.9427 7.94263C11.6926 7.69267 11.3536 7.55225 11 7.55225C10.6464 7.55225 10.3074 7.69267 10.0573 7.94263L9 9M8 14H12.6667C13.403 14 14 13.403 14 12.6667V3.33333C14 2.59695 13.403 2 12.6667 2H3.33333C2.59695 2 2 2.59695 2 3.33333V8" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5.51377 12.671L4.77612 14.3921C4.67222 14.6346 4.32853 14.6346 4.22463 14.3921L3.48699 12.671C3.45664 12.6002 3.40022 12.5437 3.32942 12.5134L1.60825 11.7757C1.36581 11.6718 1.36581 11.3282 1.60825 11.2243L3.32942 10.4866C3.40022 10.4563 3.45664 10.3998 3.48699 10.329L4.22463 8.60787C4.32853 8.36544 4.67222 8.36544 4.77612 8.60787L5.51377 10.329C5.54411 10.3998 5.60053 10.4563 5.67134 10.4866L7.39251 11.2243C7.63494 11.3282 7.63494 11.6718 7.39251 11.7757L5.67134 12.5134C5.60053 12.5437 5.54411 12.6002 5.51377 12.671Z" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>
+<path d="M5 5H5.0001" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+</svg>

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

@@ -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'
+}