feat: Add pagination support for media assets history

- Add offset parameter to history API endpoints
- Implement loadMore functionality in assetsStore
- Add approach-end handler in AssetsSidebarTab for infinite scroll
- Update composables to support pagination state
- Support both V1 and V2 history APIs with offset

This enables efficient loading of large history lists by fetching
items in batches as the user scrolls.

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

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

Author: viva-jinyi

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

@@ -43,14 +43,15 @@
     <template #body>
       <div v-if="displayAssets.length" class="relative size-full">
         <VirtualGrid
-          v-if="displayAssets.length"
+          v-if="!loading"
           :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 +67,24 @@
             />
           </template>
         </VirtualGrid>
-        <div v-else-if="loading">
+        <div v-else>
           <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>
+      <div v-else>
+        <NoResultsPlaceholder
+          icon="pi pi-info-circle"
+          :title="
+            $t(
+              activeTab === 'input'
+                ? 'sideToolbar.noImportedFiles'
+                : 'sideToolbar.noGeneratedFiles'
+            )
+          "
+          :message="$t('sideToolbar.noFilesFoundMessage')"
+        />
       </div>
     </template>
     <template #footer>
@@ -291,6 +292,7 @@ watch(
   activeTab,
   () => {
     clearSelection()
+    // Reset pagination state when tab changes
     void refreshAssets()
   },
   { immediate: true }
@@ -395,4 +397,16 @@ const handleDeleteSelected = async () => {
   await deleteMultipleAssets(selectedAssets)
   clearSelection()
 }
+
+const handleApproachEnd = async () => {
+  if (
+    activeTab.value === 'output' &&
+    !isInFolderView.value &&
+    outputAssets.loadMore &&
+    outputAssets.hasMore?.value &&
+    !outputAssets.isLoadingMore?.value
+  ) {
+    await outputAssets.loadMore()
+  }
+}
 </script>

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/remote/comfyui/history/fetchers/fetchHistoryV1.ts

@@ -19,9 +19,14 @@ import type {
  */
 export async function fetchHistoryV1(
   fetchApi: (url: string) => Promise<Response>,
-  maxItems: number = 200
+  maxItems: number = 200,
+  offset?: number
 ): Promise<HistoryV1Response> {
-  const res = await fetchApi(`/history?max_items=${maxItems}`)
+  let url = `/history?max_items=${maxItems}`
+  if (offset !== undefined) {
+    url += `&offset=${offset}`
+  }
+  const res = await fetchApi(url)
   const json: Record<
     string,
     Omit<HistoryTaskItem, 'taskType'>

src/platform/remote/comfyui/history/fetchers/fetchHistoryV2.ts

@@ -18,9 +18,14 @@ import type { HistoryResponseV2 } from '../types/historyV2Types'
  */
 export async function fetchHistoryV2(
   fetchApi: (url: string) => Promise<Response>,
-  maxItems: number = 200
+  maxItems: number = 200,
+  offset?: number
 ): Promise<HistoryV1Response> {
-  const res = await fetchApi(`/history_v2?max_items=${maxItems}`)
+  let url = `/history_v2?max_items=${maxItems}`
+  if (offset !== undefined) {
+    url += `&offset=${offset}`
+  }
+  const res = await fetchApi(url)
   const rawData: HistoryResponseV2 = await res.json()
   const adaptedHistory = mapHistoryV2toHistory(rawData)
   return { History: adaptedHistory }

src/scripts/api.ts

@@ -898,10 +898,15 @@ export class ComfyApi extends EventTarget {
    * @returns Prompt history including node outputs
    */
   async getHistory(
-    max_items: number = 200
+    max_items: number = 200,
+    options?: { offset?: number }
   ): Promise<{ History: HistoryTaskItem[] }> {
     try {
-      return await fetchHistory(this.fetchApi.bind(this), max_items)
+      return await fetchHistory(
+        this.fetchApi.bind(this),
+        max_items,
+        options?.offset
+      )
     } catch (error) {
       console.error(error)
       return { History: [] }

src/stores/assetsStore.ts

@@ -1,5 +1,6 @@
 import { useAsyncState } from '@vueuse/core'
 import { defineStore } from 'pinia'
+import { ref } from 'vue'
 
 import {
   mapInputFileToAssetItem,
@@ -79,8 +80,13 @@ function mapHistoryToAssets(historyItems: any[]): AssetItem[] {
   )
 }
 
+const BATCH_SIZE = 200
+
 export const useAssetsStore = defineStore('assets', () => {
-  const maxHistoryItems = 200
+  const historyOffset = ref(0)
+  const hasMoreHistory = ref(true)
+  const isLoadingMore = ref(false)
+  const allHistoryItems = ref<AssetItem[]>([])
 
   const fetchInputFiles = isCloud
     ? fetchInputFilesFromCloud
@@ -99,23 +105,66 @@ export const useAssetsStore = defineStore('assets', () => {
     }
   })
 
-  const fetchHistoryAssets = async (): Promise<AssetItem[]> => {
-    const history = await api.getHistory(maxHistoryItems)
-    return mapHistoryToAssets(history.History)
+  const fetchHistoryAssets = async (loadMore = false): Promise<AssetItem[]> => {
+    if (!loadMore) {
+      historyOffset.value = 0
+      hasMoreHistory.value = true
+      allHistoryItems.value = []
+    }
+
+    const history = await api.getHistory(BATCH_SIZE, {
+      offset: historyOffset.value
+    })
+    const newAssets = mapHistoryToAssets(history.History)
+
+    if (loadMore) {
+      const existingIds = new Set(allHistoryItems.value.map((item) => item.id))
+      const uniqueNewAssets = newAssets.filter(
+        (item) => !existingIds.has(item.id)
+      )
+      allHistoryItems.value = [...allHistoryItems.value, ...uniqueNewAssets]
+    } else {
+      allHistoryItems.value = newAssets
+    }
+
+    hasMoreHistory.value = newAssets.length === BATCH_SIZE
+    historyOffset.value += newAssets.length
+
+    return allHistoryItems.value
   }
 
-  const {
-    state: historyAssets,
-    isLoading: historyLoading,
-    error: historyError,
-    execute: updateHistory
-  } = useAsyncState(fetchHistoryAssets, [], {
-    immediate: false,
-    resetOnExecute: false,
-    onError: (err) => {
+  const historyAssets = ref<AssetItem[]>([])
+  const historyLoading = ref(false)
+  const historyError = ref<unknown>(null)
+
+  const updateHistory = async () => {
+    historyLoading.value = true
+    historyError.value = null
+    try {
+      const assets = await fetchHistoryAssets(false)
+      historyAssets.value = assets
+    } catch (err) {
       console.error('Error fetching history assets:', err)
+      historyError.value = err
+    } finally {
+      historyLoading.value = false
     }
-  })
+  }
+
+  const loadMoreHistory = async () => {
+    if (!hasMoreHistory.value || isLoadingMore.value) return
+
+    isLoadingMore.value = true
+    try {
+      const updatedAssets = await fetchHistoryAssets(true)
+      historyAssets.value = updatedAssets
+    } catch (err) {
+      console.error('Error loading more history:', err)
+      historyError.value = err
+    } finally {
+      isLoadingMore.value = false
+    }
+  }
 
   return {
     // States
@@ -125,9 +174,12 @@ export const useAssetsStore = defineStore('assets', () => {
     historyLoading,
     inputError,
     historyError,
+    hasMoreHistory,
+    isLoadingMore,
 
     // Actions
     updateInputs,
-    updateHistory
+    updateHistory,
+    loadMoreHistory
   }
 })