feat: Add pagination support for media assets history (#6373)

## Summary
- Implement pagination for media assets history to handle large datasets
efficiently
- Add infinite scroll support with approach-end event handler  
- Support offset parameter in history API for both V1 and V2 endpoints

## Changes
- Add offset parameter support to `api.getHistory()` method
- Update history fetchers (V1/V2) to include offset in API requests
- Implement `loadMoreHistory()` in assetsStore with pagination state
management
- Add `loadMore`, `hasMore`, and `isLoadingMore` to IAssetsProvider
interface
- Add approach-end handler in AssetsSidebarTab for infinite scroll
- Set BATCH_SIZE to 200 for efficient loading

## Implementation Improvements
Simplified offset-based pagination by removing unnecessary
reconciliation logic:
- Remove `reconcileHistory`, `taskItemsMap`, `lastKnownQueueIndex`
(offset is sufficient)
- Replace `assetItemsByPromptId` Map → `loadedIds` Set (store IDs only)
- Replace `findInsertionIndex` binary search → push + sort (faster for
batch operations)
- Replace `loadingPromise` → `isLoadingMore` boolean (simpler state
management)
- Fix memory leak by cleaning up Set together with array slice

## Test Plan
- [x] TypeScript compilation passes
- [x] ESLint and Prettier formatting applied
- [x] Test infinite scroll in media assets tab
- [x] Verify network requests include correct offset parameter
- [x] Confirm no duplicate items when loading more

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

---------

Co-authored-by: Claude <noreply@anthropic.com>

Author: 2 people

src/components/sidebar/tabs/AssetSidebarTemplate.vue

@@ -14,8 +14,8 @@
         <slot name="header" />
       </div>
     </div>
-    <!-- h-0 to force scrollpanel to grow -->
-    <ScrollPanel class="h-0 grow">
+    <!-- min-h-0 to force scrollpanel to grow -->
+    <ScrollPanel class="min-h-0 grow">
       <slot name="body" />
     </ScrollPanel>
     <div v-if="slots.footer">

src/components/sidebar/tabs/AssetsSidebarTab.vue

@@ -41,16 +41,35 @@
       </TabList>
     </template>
     <template #body>
-      <div v-if="displayAssets.length" class="relative size-full">
+      <!-- Loading state -->
+      <div v-if="loading">
+        <ProgressSpinner class="absolute left-1/2 w-[50px] -translate-x-1/2" />
+      </div>
+      <!-- Empty state -->
+      <div v-else-if="!displayAssets.length">
+        <NoResultsPlaceholder
+          icon="pi pi-info-circle"
+          :title="
+            $t(
+              activeTab === 'input'
+                ? 'sideToolbar.noImportedFiles'
+                : 'sideToolbar.noGeneratedFiles'
+            )
+          "
+          :message="$t('sideToolbar.noFilesFoundMessage')"
+        />
+      </div>
+      <!-- Content -->
+      <div v-else class="relative size-full">
         <VirtualGrid
-          v-if="displayAssets.length"
           :items="mediaAssetsWithKey"
           :grid-style="{
             display: 'grid',
             gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
             padding: '0.5rem',
             gap: '0.5rem'
           }"
+          @approach-end="handleApproachEnd"
         >
           <template #item="{ item }">
             <MediaAssetCard
@@ -66,24 +85,6 @@
             />
           </template>
         </VirtualGrid>
-        <div v-else-if="loading">
-          <ProgressSpinner
-            class="absolute left-1/2 w-[50px] -translate-x-1/2"
-          />
-        </div>
-        <div v-else>
-          <NoResultsPlaceholder
-            icon="pi pi-info-circle"
-            :title="
-              $t(
-                activeTab === 'input'
-                  ? 'sideToolbar.noImportedFiles'
-                  : 'sideToolbar.noGeneratedFiles'
-              )
-            "
-            :message="$t('sideToolbar.noFilesFoundMessage')"
-          />
-        </div>
       </div>
     </template>
     <template #footer>
@@ -147,6 +148,7 @@
 </template>
 
 <script setup lang="ts">
+import { useDebounceFn } from '@vueuse/core'
 import ProgressSpinner from 'primevue/progressspinner'
 import { useToast } from 'primevue/usetoast'
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
@@ -291,6 +293,7 @@ watch(
   activeTab,
   () => {
     clearSelection()
+    // Reset pagination state when tab changes
     void refreshAssets()
   },
   { immediate: true }
@@ -395,4 +398,15 @@ const handleDeleteSelected = async () => {
   await deleteMultipleAssets(selectedAssets)
   clearSelection()
 }
+
+const handleApproachEnd = useDebounceFn(async () => {
+  if (
+    activeTab.value === 'output' &&
+    !isInFolderView.value &&
+    outputAssets.hasMore.value &&
+    !outputAssets.isLoadingMore.value
+  ) {
+    await outputAssets.loadMore()
+  }
+}, 300)
 </script>

src/platform/assets/components/Media3DBottom.vue

@@ -1,7 +1,11 @@
 <template>
   <div class="flex flex-col items-center gap-1">
     <MediaTitle :file-name="fileName" />
-    <div class="flex items-center gap-2 text-xs text-zinc-400">
+    <!-- TBD: File size will be provided by backend history API -->
+    <div
+      v-if="asset.size"
+      class="flex items-center gap-2 text-xs text-zinc-400"
+    >
       <span>{{ formatSize(asset.size) }}</span>
     </div>
   </div>

src/platform/assets/components/MediaAudioBottom.vue

@@ -1,7 +1,11 @@
 <template>
   <div class="flex flex-col items-center gap-1">
     <MediaTitle :file-name="fileName" />
-    <div class="flex items-center gap-2 text-xs text-zinc-400">
+    <!-- TBD: File size will be provided by backend history API -->
+    <div
+      v-if="asset.size"
+      class="flex items-center gap-2 text-xs text-zinc-400"
+    >
       <span>{{ formatSize(asset.size) }}</span>
     </div>
   </div>

src/platform/assets/components/MediaVideoBottom.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="flex flex-col items-center gap-1">
     <MediaTitle :file-name="fileName" />
-    <div class="flex items-center text-xs text-zinc-400">
+    <!-- TBD: File size will be provided by backend history API -->
+    <div v-if="asset.size" class="flex items-center text-xs text-zinc-400">
       <span>{{ formatSize(asset.size) }}</span>
     </div>
   </div>

src/platform/assets/components/MediaVideoTop.vue

@@ -7,7 +7,11 @@
     <video
       ref="videoRef"
       :controls="shouldShowControls"
-      preload="none"
+      preload="metadata"
+      autoplay
+      muted
+      loop
+      playsinline
       :poster="asset.preview_url"
       class="relative size-full object-contain"
       @click.stop

src/platform/assets/composables/media/IAssetsProvider.ts

@@ -26,4 +26,19 @@ export interface IAssetsProvider {
    * Refresh the media list (alias for fetchMediaList)
    */
   refresh: () => Promise<AssetItem[]>
+
+  /**
+   * Load more items (for pagination)
+   */
+  loadMore: () => Promise<void>
+
+  /**
+   * Whether there are more items to load
+   */
+  hasMore: Ref<boolean>
+
+  /**
+   * Whether currently loading more items
+   */
+  isLoadingMore: Ref<boolean>
 }

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

@@ -36,11 +36,28 @@ export function useAssetsApi(directory: 'input' | 'output') {
 
   const refresh = () => fetchMediaList()
 
+  const loadMore = async (): Promise<void> => {
+    if (directory === 'output') {
+      await assetsStore.loadMoreHistory()
+    }
+  }
+
+  const hasMore = computed(() => {
+    return directory === 'output' ? assetsStore.hasMoreHistory : false
+  })
+
+  const isLoadingMore = computed(() => {
+    return directory === 'output' ? assetsStore.isLoadingMore : false
+  })
+
   return {
     media,
     loading,
     error,
     fetchMediaList,
-    refresh
+    refresh,
+    loadMore,
+    hasMore,
+    isLoadingMore
   }
 }

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

@@ -36,11 +36,28 @@ export function useInternalFilesApi(directory: 'input' | 'output') {
 
   const refresh = () => fetchMediaList()
 
+  const loadMore = async (): Promise<void> => {
+    if (directory === 'output') {
+      await assetsStore.loadMoreHistory()
+    }
+  }
+
+  const hasMore = computed(() => {
+    return directory === 'output' ? assetsStore.hasMoreHistory : false
+  })
+
+  const isLoadingMore = computed(() => {
+    return directory === 'output' ? assetsStore.isLoadingMore : false
+  })
+
   return {
     media,
     loading,
     error,
     fetchMediaList,
-    refresh
+    refresh,
+    loadMore,
+    hasMore,
+    isLoadingMore
   }
 }

src/platform/assets/schemas/assetSchema.ts

@@ -5,7 +5,7 @@ const zAsset = z.object({
   id: z.string(),
   name: z.string(),
   asset_hash: z.string().nullish(),
-  size: z.number(),
+  size: z.number().optional(), // TBD: Will be provided by history API in the future
   mime_type: z.string().nullish(),
   tags: z.array(z.string()).optional().default([]),
   preview_id: z.string().nullable().optional(),