Add paginated library JSON and dedicated still thumbs that never stream archive masters.

Co-authored-by: Cursor <cursoragent@cursor.com>

components/studio2/LibraryModal.vue

@@ -60,6 +60,7 @@
               v-for="entry in entries"
               :key="entry.key"
               class="lib-modal-tile"
+              :data-thumb-key="entry.key"
               :data-active="entry.key === focusedKey ? 'true' : undefined"
               @click="pickEntry(entry)"
             >
@@ -77,9 +78,10 @@
                   />
                 </div>
                 <img
-                  v-else-if="thumbSrc(entry)"
+                  v-else-if="liveThumbs.has(entry.key) && thumbSrc(entry)"
                   :src="thumbSrc(entry)"
                   alt=""
+                  loading="lazy"
                   decoding="async"
                   draggable="false"
                 >
@@ -170,6 +172,10 @@ const clips = ref<LibraryClip[]>([])
 const stills = ref<LibraryStill[]>([])
 const tracks = ref<LibraryTrack[]>([])
 const fetchedAt = ref(0)
+const nextCursor = ref<string | null>(null)
+const liveThumbs = ref(new Set<string>())
+let thumbObserver: IntersectionObserver | null = null
+let scrollLoadBound = false
 
 const activeFolderId = computed(() => props.folderId || folders.value[0]?.id || 'all')
 
@@ -209,7 +215,7 @@ const detailRows = computed(() => {
 function thumbSrc(entry: LibraryEntry) {
   if (entry.kind === 'clip' && entry.group) return `/api/library/clips/${entry.group.head.id}/thumb`
   if (entry.kind === 'track') return ''
-  if (entry.stillGroup) return `/api/library/stills/${entry.stillGroup.head.id}?thumb=1`
+  if (entry.stillGroup) return `/api/library/stills/${entry.stillGroup.head.id}/thumb`
   return ''
 }
 
@@ -259,14 +265,37 @@ function onDeleteClick() {
   window.setTimeout(() => { void fetchLibrary(true) }, 500)
 }
 
-function applyLibrary(data: any) {
-  folders.value = data?.folders || []
-  clips.value = data?.clips || []
-  stills.value = data?.stills || []
-  tracks.value = data?.tracks || []
+function mergeIds(prev: { id: string }[], next: { id: string }[]) {
+  const map = new Map(prev.map(item => [item.id, item]))
+  for (const item of next) map.set(item.id, item)
+  return [...map.values()]
+}
+
+function applyLibraryPage(data: any, replace: boolean) {
+  folders.value = data?.folders || folders.value
+  if (replace) {
+    clips.value = data?.clips || []
+    stills.value = data?.stills || []
+    tracks.value = data?.tracks || []
+  } else {
+    clips.value = mergeIds(clips.value, data?.clips || []) as LibraryClip[]
+    stills.value = mergeIds(stills.value, data?.stills || []) as LibraryStill[]
+    tracks.value = mergeIds(tracks.value, data?.tracks || []) as LibraryTrack[]
+  }
+  nextCursor.value = data?.nextCursor || null
   fetchedAt.value = Date.now()
 }
 
+async function fetchLibraryPage(cursor: string | null, replace: boolean) {
+  const folder = activeFolderId.value && activeFolderId.value !== 'all' ? activeFolderId.value : ''
+  const type = filter.value === 'all' ? 'all' : filter.value === 'images' ? 'images' : filter.value === 'videos' ? 'videos' : 'music'
+  const qs = new URLSearchParams({ limit: '50' })
+  if (folder) qs.set('folderId', folder)
+  if (type !== 'all') qs.set('type', type)
+  if (cursor) qs.set('cursor', cursor)
+  return await $fetch<any>(`/api/library?${qs.toString()}`)
+}
+
 async function fetchLibrary(force = false) {
   if (loading.value) return
   const stale = !fetchedAt.value || Date.now() - fetchedAt.value > 15_000
@@ -274,15 +303,64 @@ async function fetchLibrary(force = false) {
   if (!force && !empty && !stale) return
   loading.value = true
   loadError.value = ''
+  liveThumbs.value = new Set()
   try {
-    applyLibrary(await $fetch('/api/library?light=1'))
+    const first = await fetchLibraryPage(null, true)
+    applyLibraryPage(first, true)
+    loading.value = false
+    nextTick(() => observeThumbs())
+    // Pull remaining pages in the background — first paint already has ≤50 items
+    let cursor = first?.nextCursor || null
+    while (cursor) {
+      const more = await fetchLibraryPage(cursor, false)
+      applyLibraryPage(more, false)
+      cursor = more?.nextCursor || null
+      nextTick(() => observeThumbs())
+    }
   } catch (e: any) {
     loadError.value = e?.data?.statusMessage || e?.message || 'Could not load library'
-  } finally {
     loading.value = false
   }
 }
 
+function observeThumbs() {
+  if (!import.meta.client) return
+  const root = gridScrollEl.value
+  if (!root) return
+  if (thumbObserver) thumbObserver.disconnect()
+  thumbObserver = new IntersectionObserver((entries) => {
+    let changed = false
+    const next = new Set(liveThumbs.value)
+    for (const entry of entries) {
+      if (!entry.isIntersecting) continue
+      const key = (entry.target as HTMLElement).dataset.thumbKey
+      if (!key || next.has(key)) continue
+      next.add(key)
+      changed = true
+    }
+    if (changed) liveThumbs.value = next
+  }, { root, rootMargin: '200px 0px', threshold: 0.01 })
+  root.querySelectorAll<HTMLElement>('[data-thumb-key]').forEach((el) => thumbObserver!.observe(el))
+}
+
+function onGridScroll() {
+  const el = gridScrollEl.value
+  if (!el || !nextCursor.value || loading.value) return
+  if (el.scrollTop + el.clientHeight < el.scrollHeight - 240) return
+  void fetchMore()
+}
+
+async function fetchMore() {
+  if (!nextCursor.value || loading.value) return
+  loading.value = true
+  try {
+    const more = await fetchLibraryPage(nextCursor.value, false)
+    applyLibraryPage(more, false)
+    nextTick(() => observeThumbs())
+  } catch { /* keep what we have */ }
+  finally { loading.value = false }
+}
+
 function onTab(e: KeyboardEvent) {
   const root = dialogEl.value
   if (!root) return
@@ -308,15 +386,30 @@ watch(() => props.open, (on) => {
     void fetchLibrary(true)
     nextTick(() => {
       dialogEl.value?.focus()
-      if (gridScrollEl.value) gridScrollEl.value.scrollTop = 0
+      if (gridScrollEl.value) {
+        gridScrollEl.value.scrollTop = 0
+        if (!scrollLoadBound) {
+          gridScrollEl.value.addEventListener('scroll', onGridScroll, { passive: true })
+          scrollLoadBound = true
+        }
+        observeThumbs()
+      }
     })
   } else {
     document.body.style.overflow = ''
+    thumbObserver?.disconnect()
+    thumbObserver = null
   }
 })
 
+watch(entries, () => nextTick(() => observeThumbs()))
+
 onBeforeUnmount(() => {
-  if (import.meta.client) document.body.style.overflow = ''
+  if (import.meta.client) {
+    document.body.style.overflow = ''
+    gridScrollEl.value?.removeEventListener('scroll', onGridScroll)
+    thumbObserver?.disconnect()
+  }
 })
 </script>