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

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

components/ImagePickerModal.vue

@@ -95,7 +95,7 @@
             >
               <div class="relative h-28 overflow-hidden bg-zinc-900">
                 <img
-                  :src="`/api/library/stills/${still.id}?thumb=1`"
+                  :src="`/api/library/stills/${still.id}/thumb`"
                   alt=""
                   loading="lazy"
                   decoding="async"

components/studio2/AssetSlot.vue

@@ -55,6 +55,6 @@ defineEmits(['pick', 'remove', 'mention', 'update:role'])
 const thumbSrc = computed(() => {
  if (!props.asset) return ''
  if (props.asset.kind === 'clip') return `/api/library/clips/${props.asset.id}/thumb`
- return `/api/library/stills/${props.asset.id}`
+ return `/api/library/stills/${props.asset.id}/thumb`
 })
 </script>

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) {
+function mergeIds(prev: { id: string }[], next: { id: string }[]) {
-  folders.value = data?.folders || []
+  const map = new Map(prev.map(item => [item.id, item]))
-  clips.value = data?.clips || []
+  for (const item of next) map.set(item.id, item)
-  stills.value = data?.stills || []
+  return [...map.values()]
-  tracks.value = data?.tracks || []
+}
+
+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>
 

pages/library.vue

@@ -802,7 +802,11 @@ function applyLibrary(data: unknown) {
 }
 
 async function loadLibrary() {
-  applyLibrary(await $fetch('/api/library?light=1'))
+  // First page of metadata only — grid paints immediately; full catalog follows for grouping/search
+  const first = await $fetch<any>('/api/library?limit=50')
+  applyLibrary(first)
+  const data = await $fetch<any>('/api/library?light=1')
+  applyLibrary(data)
 }
 
 function folderChipCount(folder: LibraryFolder) {
@@ -881,7 +885,7 @@ async function toggleFocusedHidden() {
 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.parts[cardImageIndex(entry)].id}?thumb=1`
+  if (entry.stillGroup) return `/api/library/stills/${entry.stillGroup.parts[cardImageIndex(entry)].id}/thumb`
   return ''
 }
 
@@ -907,7 +911,7 @@ function partThumb(part: LibraryClip | LibraryStill) {
     // Prefer this clip’s first frame so siblings don’t all look like the Start thumb.
     return `/api/library/clips/${clip.id}/first-frame?thumb=1&v=${encodeURIComponent(clip.id)}`
   }
-  return `/api/library/stills/${part.id}?thumb=1`
+  return `/api/library/stills/${part.id}/thumb`
 }
 
 function focusPart(id: string) {
@@ -1309,10 +1313,9 @@ let resizeObserver: ResizeObserver | null = null
 let observedScroller: HTMLElement | null = null
 onMounted(async () => {
   window.addEventListener('keydown', onKey)
-  const [me] = await Promise.all([
+  // Do not block chrome/grid on the full catalog — first page paints via loadLibrary's first apply
-    $fetch<{ user?: { name?: string; email?: string }; authEnabled?: boolean; authMode?: string; instanceName?: string }>('/api/auth/me').catch(() => ({ user: null })),
+  void loadLibrary().catch(() => applyLibrary({ folders: [], clips: [], stills: [] }))
-    loadLibrary().catch(() => applyLibrary({ folders: [], clips: [], stills: [] }))
+  const me = await $fetch<{ user?: { name?: string; email?: string }; authEnabled?: boolean; authMode?: string; instanceName?: string }>('/api/auth/me').catch(() => ({ user: null }))
-  ])
   instanceName.value = me.instanceName || instanceName.value
   await nextTick()
   measure()

server/api/library/clips/[id]/thumb.get.ts

@@ -13,7 +13,7 @@ export default defineEventHandler(async (event) => {
   }
   const etag = fileEtag(path)
   setHeader(event, 'ETag', etag)
-  setHeader(event, 'Cache-Control', 'private, max-age=86400, stale-while-revalidate=604800')
+  setHeader(event, 'Cache-Control', 'public, max-age=86400')
   if (getHeader(event, 'if-none-match') === etag) {
     setResponseStatus(event, 304)
     return null

server/api/library/index.get.ts

@@ -1,5 +1,26 @@
+import { publicLibrary, publicLibraryPage } from '~/server/utils/library'
+
 export default defineEventHandler((event) => {
-  const light = String(getQuery(event).light || '') === '1'
+  const query = getQuery(event)
+  const light = String(query.light || '') === '1'
+  const limitRaw = query.limit
+  const wantsPage = limitRaw != null && String(limitRaw) !== ''
+
+  if (wantsPage) {
+    const page = publicLibraryPage(event, {
+      limit: Number(limitRaw) || 50,
+      cursor: String(query.cursor || ''),
+      folderId: String(query.folderId || query.folder || ''),
+      type: String(query.type || query.filter || 'all')
+    })
+    try {
+      const { owner } = assertLibraryOwner(event)
+      const folderId = page.folders.find(folder => folder.unlocked)?.id
+      void maintainLibrary(owner, folderId).catch(() => null)
+    } catch { /* locked or anonymous */ }
+    return page
+  }
+
   const library = publicLibrary(event, { light })
   try {
     const { owner } = assertLibraryOwner(event)

server/api/library/stills/[id].get.ts

@@ -7,13 +7,26 @@ export default defineEventHandler(async (event) => {
   const still = getStill(owner, id)
   assertFolderAccess(event, still.folderId)
   const wantThumb = String(getQuery(event).thumb || '') === '1'
-  const path = wantThumb ? await stillThumbPath(owner, id) : stillPath(owner, still.id)
+  const original = stillPath(owner, still.id)
-  if (!path || !existsSync(path)) {
+
+  let path = original
+  if (wantThumb) {
+    path = await stillThumbPath(owner, id)
+    // Never fall back to the archive PNG/JPEG for ?thumb=1
+    if (!path || path === original || !existsSync(path)) {
+      throw createError({ statusCode: 404, statusMessage: 'Thumbnail not found' })
+    }
+  } else if (!existsSync(path)) {
     throw createError({ statusCode: 404, statusMessage: 'Image file is missing' })
   }
+
   const etag = fileEtag(path)
   setHeader(event, 'ETag', etag)
-  setHeader(event, 'Cache-Control', wantThumb ? 'private, max-age=86400, stale-while-revalidate=604800' : 'private, max-age=3600')
+  setHeader(
+    event,
+    'Cache-Control',
+    wantThumb ? 'public, max-age=86400' : 'private, max-age=3600'
+  )
   if (getHeader(event, 'if-none-match') === etag) {
     setResponseStatus(event, 304)
     return null

server/api/library/stills/[id]/thumb.get.ts

@@ -0,0 +1,26 @@
+import { existsSync, createReadStream } from 'node:fs'
+import { fileEtag, stillPath, stillThumbPath } from '~/server/utils/library'
+
+export default defineEventHandler(async (event) => {
+  const { owner } = assertLibraryOwner(event)
+  const id = String(getRouterParam(event, 'id') || '')
+  const still = getStill(owner, id)
+  assertFolderAccess(event, still.folderId)
+
+  const path = await stillThumbPath(owner, id)
+  const original = stillPath(owner, still.id)
+  // Never stream the archive master as a "thumb"
+  if (!path || !existsSync(path) || path === original) {
+    throw createError({ statusCode: 404, statusMessage: 'Thumbnail not found' })
+  }
+
+  const etag = fileEtag(path)
+  setHeader(event, 'ETag', etag)
+  setHeader(event, 'Cache-Control', 'public, max-age=86400')
+  if (getHeader(event, 'if-none-match') === etag) {
+    setResponseStatus(event, 304)
+    return null
+  }
+  setHeader(event, 'Content-Type', 'image/jpeg')
+  return sendStream(event, createReadStream(path))
+})

server/api/studio-2/library.get.ts

@@ -1,9 +1,15 @@
-import { existsSync } from 'node:fs';
+import { studio2LoraCatalog } from '../../utils/studio2/lora-catalog'
-import { studio2LoraCatalog } from '../../utils/studio2/lora-catalog';
+import { publicLibrary } from '../../utils/library'
-import { publicLibrary, stillPath, clipVideoPath } from '../../utils/library';
+
-export default defineEventHandler(event => {
+export default defineEventHandler((event) => {
- const { owner } = assertLibraryOwner(event);
+  const { owner } = assertLibraryOwner(event)
- const library = publicLibrary(event);
+  // light:true — metadata only; never existsSync every still/clip on the volume
- const catalog=studio2LoraCatalog(owner);
+  const library = publicLibrary(event, { light: true })
- return {...library,loraAliases:catalog.aliases,loraTriggers:catalog.triggers, stills:library.stills.filter(s=>existsSync(stillPath(owner,s.id))), clips:library.clips.filter(c=>existsSync(clipVideoPath(owner,c.id))), tracks:library.tracks || []};
+  const catalog = studio2LoraCatalog(owner)
-});
+  return {
+    ...library,
+    loraAliases: catalog.aliases,
+    loraTriggers: catalog.triggers,
+    tracks: library.tracks || []
+  }
+})

server/utils/library.ts

@@ -615,6 +615,121 @@ export function publicLibrary(event: H3Event, opts?: { light?: boolean }) {
   }
 }
 
+/** Paginated metadata page — no file bytes, no existsSync join of the volume. */
+export function publicLibraryPage(
+  event: H3Event,
+  opts: { limit?: number; cursor?: string; folderId?: string; type?: string } = {}
+) {
+  const limit = Math.min(Math.max(Number(opts.limit) || 50, 1), 60)
+  const cursor = String(opts.cursor || '')
+  const folderId = String(opts.folderId || '')
+  const typeFilter = String(opts.type || 'all')
+  const full = publicLibrary(event, { light: true })
+
+  type Row = {
+    id: string
+    name: string
+    type: 'still' | 'clip' | 'track'
+    createdAt: number
+    thumbUrl: string
+    folderId: string
+    prompt?: string
+    promptPre?: string
+    promptPost?: string
+    width?: number
+    height?: number
+    role?: string
+    hideInput?: boolean
+    filename?: string
+    duration?: number
+    ext?: string
+  }
+
+  const rows: Row[] = []
+  for (const still of full.stills) {
+    if (folderId && folderId !== 'all' && still.folderId !== folderId) continue
+    if (typeFilter === 'videos' || typeFilter === 'music') continue
+    rows.push({
+      id: still.id,
+      name: still.name || still.filename || still.id,
+      type: 'still',
+      createdAt: still.createdAt || 0,
+      thumbUrl: `/api/library/stills/${still.id}/thumb`,
+      folderId: still.folderId,
+      prompt: still.prompt,
+      promptPre: still.promptPre,
+      promptPost: still.promptPost,
+      width: still.width,
+      height: still.height,
+      role: still.role,
+      hideInput: still.hideInput,
+      filename: still.filename
+    })
+  }
+  for (const clip of full.clips) {
+    if (folderId && folderId !== 'all' && clip.folderId !== folderId) continue
+    if (typeFilter === 'images' || typeFilter === 'music') continue
+    rows.push({
+      id: clip.id,
+      name: clip.name || clip.id,
+      type: 'clip',
+      createdAt: clip.createdAt || 0,
+      thumbUrl: `/api/library/clips/${clip.id}/thumb`,
+      folderId: clip.folderId,
+      prompt: clip.prompt,
+      promptPre: clip.promptPre,
+      promptPost: clip.promptPost,
+      width: clip.width,
+      height: clip.height,
+      duration: clip.duration
+    })
+  }
+  for (const track of full.tracks || []) {
+    if (folderId && folderId !== 'all' && track.folderId !== folderId) continue
+    if (typeFilter === 'images' || typeFilter === 'videos') continue
+    rows.push({
+      id: track.id,
+      name: track.name || track.id,
+      type: 'track',
+      createdAt: track.createdAt || 0,
+      thumbUrl: '',
+      folderId: track.folderId,
+      duration: track.duration,
+      ext: track.ext
+    })
+  }
+
+  rows.sort((a, b) => (b.createdAt || 0) - (a.createdAt || 0) || String(b.id).localeCompare(String(a.id)))
+
+  let start = 0
+  if (cursor) {
+    const idx = rows.findIndex(row => `${row.type}:${row.id}` === cursor)
+    start = idx >= 0 ? idx + 1 : 0
+  }
+  const page = rows.slice(start, start + limit)
+  const last = page[page.length - 1]
+  const nextCursor = page.length === limit && last ? `${last.type}:${last.id}` : null
+
+  const stillIds = new Set(page.filter(r => r.type === 'still').map(r => r.id))
+  const clipIds = new Set(page.filter(r => r.type === 'clip').map(r => r.id))
+  const trackIds = new Set(page.filter(r => r.type === 'track').map(r => r.id))
+
+  return {
+    folders: full.folders,
+    items: page,
+    nextCursor,
+    limit,
+    stills: full.stills.filter(s => stillIds.has(s.id)),
+    clips: full.clips.filter(c => clipIds.has(c.id)),
+    tracks: (full.tracks || []).filter(t => trackIds.has(t.id)),
+    drafts: full.drafts,
+    loraAliases: full.loraAliases,
+    loraTriggers: full.loraTriggers,
+    keepPrompts: full.keepPrompts,
+    total: rows.length
+  }
+}
+
 export function assertLibraryOwner(event: H3Event) {
   const owner = libraryOwnerKey(event)
   return { owner, catalog: readCatalog(owner) }
@@ -830,7 +945,7 @@ export async function ensureScaledThumb(source: string, dest: string) {
   if (pending) return pending
   const build = withThumbSlot(async () => {
     const ok = await buildStillThumb(source, dest)
-    return ok ? dest : source
+    return ok ? dest : ''
   }).finally(() => {
     thumbBuilds.delete(key)
   })
@@ -1130,7 +1245,7 @@ function buildStillThumb(source: string, dest: string) {
     const proc = spawn('ffmpeg', [
       '-y',
       '-i', source,
-      '-vf', 'scale=320:-2',
+      '-vf', 'scale=384:-2',
       '-frames:v', '1',
       '-q:v', '5',
       dest
@@ -1164,7 +1279,8 @@ export async function stillThumbPath(owner: string, id: string) {
   if (pending) return pending
   const build = withThumbSlot(async () => {
     const ok = await buildStillThumb(source, dest)
-    return ok ? dest : source
+    // Never return the archive master — callers must not stream originals as thumbs
+    return ok ? dest : ''
   }).finally(() => {
     thumbBuilds.delete(key)
   })