Nest shot scripts under Queue jobs, keep the studio from overflowing on phones, and lighten library thumbs and polling so the UI stays responsive.

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

pages/index.vue

@@ -1,12 +1,12 @@
 <template>
-  <div class="min-h-screen">
+  <div class="min-h-screen min-w-0 overflow-x-hidden">
     <header class="sticky top-0 z-20 border-b border-white/5 bg-zinc-950/70 backdrop-blur-xl">
       <div class="mx-auto flex max-w-7xl items-center justify-between px-4 py-4 sm:px-6">
         <div class="flex items-center gap-3">
           <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-amber-400 text-zinc-950 font-display font-extrabold">A</div>
           <div>
             <h1 class="font-display text-xl font-bold leading-none">{{ instanceName }}</h1>
-            <p class="text-[11px] uppercase tracking-[0.22em] text-zinc-500">MiniMax H3 · LTX-2.3 · Flux.2 Klein</p>
+            <p class="hidden text-[11px] uppercase tracking-[0.22em] text-zinc-500 sm:block">MiniMax H3 · LTX-2.3 · Flux.2 Klein</p>
           </div>
         </div>
         <div class="flex items-center gap-3 text-sm">
@@ -34,8 +34,8 @@
       </div>
     </header>
 
-    <main class="mx-auto grid max-w-7xl gap-6 px-4 py-6 sm:px-6 lg:grid-cols-[minmax(0,1fr)_minmax(0,1fr)]">
-      <section class="glass rounded-3xl p-5 sm:p-6 space-y-5">
+    <main class="mx-auto grid min-w-0 max-w-7xl gap-6 px-4 py-6 sm:px-6 lg:grid-cols-[minmax(0,1fr)_minmax(0,1fr)]">
+      <section class="glass min-w-0 max-w-full rounded-3xl p-5 sm:p-6 space-y-5">
         <div>
           <div class="mb-3 flex flex-wrap gap-2">
             <button
@@ -176,10 +176,22 @@
           <textarea
             v-model="prompt"
             :rows="shotScriptMode || identityPrompting ? 12 : 6"
-            class="w-full rounded-2xl border border-white/10 bg-zinc-950/70 px-4 py-3 text-sm outline-none ring-amber-300/40 placeholder:text-zinc-600 focus:ring-2"
+            class="hidden max-h-[min(28rem,70vh)] w-full overflow-y-auto rounded-2xl border border-white/10 bg-zinc-950/70 px-4 py-3 text-sm outline-none ring-amber-300/40 placeholder:text-zinc-600 [overflow-wrap:anywhere] focus:ring-2 md:block"
             :placeholder="promptPlaceholder"
           />
-          <div v-if="recommendBusy || recommendText || recommendError" class="mt-3 rounded-2xl border border-amber-300/20 bg-amber-400/5 p-4">
+          <button
+            type="button"
+            class="w-full rounded-2xl border border-white/10 bg-zinc-950/70 px-4 py-3 text-left md:hidden"
+            @click="promptDrawerOpen = true"
+          >
+            <p v-if="prompt.trim()" class="line-clamp-4 whitespace-pre-wrap text-sm text-zinc-200 [overflow-wrap:anywhere]">{{ prompt }}</p>
+            <p v-else class="text-sm text-zinc-600">{{ promptPlaceholder }}</p>
+            <span class="mt-2 inline-block text-xs text-amber-200">{{ prompt.trim() ? 'View / edit prompt' : 'Write prompt' }}</span>
+          </button>
+          <p v-if="shotScriptMode && studioMode === 'video' && parsedShots.length" class="mt-2 text-xs text-zinc-500 md:hidden">
+            {{ parsedShots.length }} shot{{ parsedShots.length === 1 ? '' : 's' }} in this script. Open the prompt to scroll through them.
+          </p>
+          <div v-if="recommendBusy || recommendText || recommendError" class="mt-3 max-h-64 overflow-y-auto rounded-2xl border border-amber-300/20 bg-amber-400/5 p-4">
             <p class="text-xs font-medium uppercase tracking-wide text-amber-200/80">Recommended prompt</p>
             <p v-if="recommendBusy" class="mt-2 text-sm text-zinc-400">{{ recommendMessage || 'Sidecar Qwen VL is reading the still…' }}</p>
             <p v-else-if="recommendError" class="mt-2 text-sm text-red-300">{{ recommendError }}</p>
@@ -190,10 +202,10 @@
                 class="rounded-xl border border-amber-300/15 bg-zinc-950/50 px-3 py-2"
               >
                 <p class="text-[11px] font-medium uppercase tracking-wide text-amber-200/80">shot {{ shot.n }}</p>
-                <p class="mt-1 whitespace-pre-wrap text-sm text-zinc-200">{{ shot.prompt }}</p>
+                <p class="mt-1 whitespace-pre-wrap text-sm text-zinc-200 [overflow-wrap:anywhere]">{{ shot.prompt }}</p>
               </div>
             </div>
-            <p v-else class="mt-2 whitespace-pre-wrap text-sm text-zinc-200">{{ recommendText }}</p>
+            <p v-else class="mt-2 whitespace-pre-wrap text-sm text-zinc-200 [overflow-wrap:anywhere]">{{ recommendText }}</p>
             <div v-if="recommendText && !recommendBusy" class="mt-3 flex flex-wrap gap-2">
               <button
                 type="button"
@@ -256,13 +268,13 @@
           <details v-if="identityPrompting && prompt.trim()" class="mt-2 rounded-xl border border-white/10 bg-zinc-950/40 px-3 py-2">
             <summary class="cursor-pointer text-xs text-zinc-400">Prompt sent to Reference to Video</summary>
             <p class="mt-2 text-[10px] uppercase tracking-wide text-zinc-500">Identity prefix</p>
-            <p class="mt-1 whitespace-pre-wrap text-xs text-zinc-400">{{ identityBoilerplate(extraIdentityPictures) }}</p>
+            <p class="mt-1 whitespace-pre-wrap text-xs text-zinc-400 [overflow-wrap:anywhere]">{{ identityBoilerplate(extraIdentityPictures) }}</p>
             <p class="mt-3 text-[10px] uppercase tracking-wide text-zinc-500">Dynamic action prompt</p>
-            <p class="mt-1 whitespace-pre-wrap text-xs text-zinc-300">{{ identityActionPrompt }}</p>
+            <p class="mt-1 whitespace-pre-wrap text-xs text-zinc-300 [overflow-wrap:anywhere]">{{ identityActionPrompt }}</p>
             <p class="mt-3 text-[10px] uppercase tracking-wide text-zinc-500">Concatenated result</p>
-            <p class="mt-1 whitespace-pre-wrap text-xs text-zinc-300">{{ composedIdentityPrompt }}</p>
+            <p class="mt-1 whitespace-pre-wrap text-xs text-zinc-300 [overflow-wrap:anywhere]">{{ composedIdentityPrompt }}</p>
           </details>
-          <div v-if="shotScriptMode && studioMode === 'video'" class="mt-3 space-y-2">
+          <div v-if="shotScriptMode && studioMode === 'video'" class="mt-3 hidden space-y-2 md:block">
             <p v-if="!parsedShots.length" class="text-xs text-zinc-500">Add a first shot, then <span class="text-zinc-300">shot 2</span> for an extension.</p>
             <div
               v-for="(shot, index) in parsedShots"
@@ -273,7 +285,7 @@
                 {{ index === 0 ? 'Initial' : `Extension ${index}` }}
                 <span class="font-normal text-zinc-500"> · shot {{ shot.n }} · {{ formatClipDuration(duration) }}</span>
               </p>
-              <p class="mt-1 whitespace-pre-wrap text-xs text-zinc-300">{{ identityPrompting ? buildIdentityPrompt(shot.prompt, extraIdentityPictures) : shot.prompt }}</p>
+              <p class="mt-1 whitespace-pre-wrap text-xs text-zinc-300 [overflow-wrap:anywhere]">{{ identityPrompting ? buildIdentityPrompt(shot.prompt, extraIdentityPictures) : shot.prompt }}</p>
             </div>
           </div>
         </div>
@@ -298,7 +310,7 @@
             <textarea
               v-model="item.prompt"
               rows="3"
-              class="w-full rounded-xl border border-white/10 bg-zinc-950 px-3 py-2 text-sm outline-none ring-amber-300/40 placeholder:text-zinc-600 focus:ring-2"
+              class="max-h-32 w-full overflow-y-auto rounded-xl border border-white/10 bg-zinc-950 px-3 py-2 text-sm outline-none ring-amber-300/40 placeholder:text-zinc-600 [overflow-wrap:anywhere] focus:ring-2 md:max-h-none"
               placeholder="Motion prompt for this extension…"
             />
             <DurationField v-model="item.duration" class="mt-3" label="Duration" />
@@ -639,7 +651,7 @@
           <input v-model="queueAutoRun" type="checkbox" class="mt-1">
           <span>
             <span class="block text-sm font-medium text-zinc-200">Run remaining shots automatically</span>
-            <span class="mt-0.5 block text-xs text-zinc-500">Overnight set-and-forget. Leave this off to edit prompts on the Queue page and process the next shot, or the next few, when you are ready.</span>
+            <span class="mt-0.5 block text-xs text-zinc-500">Overnight set-and-forget. Leave this off to edit prompts on Queue (under this job) and process the next shot when you are ready.</span>
           </span>
         </label>
         <div class="flex flex-wrap gap-3">
@@ -664,8 +676,13 @@
         <p v-if="studioMode === 'edit' && editBlockReason" class="text-xs text-zinc-400">{{ editBlockReason }}</p>
 
         <div v-if="studioMode === 'video' && studioJobs.length" class="rounded-2xl border border-white/10 bg-zinc-950/40 p-4">
-          <h3 class="text-sm font-semibold text-zinc-100">Job queue</h3>
-          <p class="mt-1 text-xs text-zinc-500">A long shot script is one slot. Run next inserts after the current shot as its own clip, then the original sequence continues.</p>
+          <div class="flex items-start justify-between gap-3">
+            <div>
+              <h3 class="text-sm font-semibold text-zinc-100">Job queue</h3>
+              <p class="mt-1 text-xs text-zinc-500">Each submit is one job. Shots inside a job live on the Queue page.</p>
+            </div>
+            <NuxtLink to="/queue" class="shrink-0 text-xs text-amber-200 hover:text-white">Open Queue</NuxtLink>
+          </div>
           <ul class="mt-3 space-y-2">
             <li
               v-for="job in studioJobs"
@@ -681,7 +698,7 @@
                 <p class="truncate text-sm font-medium text-zinc-100">{{ job.name }}</p>
                 <p class="mt-0.5 text-xs text-zinc-500">
                   {{ studioJobStatusLabel(job) }}
-                  · {{ job.shotCount }} shot{{ job.shotCount === 1 ? '' : 's' }}
+                  · {{ studioJobShotLine(job) }}
                 </p>
               </div>
               <button
@@ -723,8 +740,8 @@
         </div>
       </section>
 
-      <section class="space-y-5">
-        <div ref="outputPanel" class="glass rounded-3xl p-5 sm:p-6">
+      <section class="min-w-0 max-w-full space-y-5">
+        <div ref="outputPanel" class="glass min-w-0 max-w-full rounded-3xl p-5 sm:p-6">
           <div class="flex items-center justify-between gap-3">
             <div class="flex items-center gap-3">
               <h2 class="font-display text-2xl font-bold">Output</h2>
@@ -811,15 +828,15 @@
 
           <div v-show="outputPreviewKind === 'video'">
           <div
-            class="relative mt-5 overflow-hidden rounded-2xl bg-black/50"
+            class="relative mx-auto mt-5 w-full max-w-full overflow-hidden rounded-2xl bg-black/50"
             :class="{ 'sensitive-glow': awaitingReveal || lockedSave }"
-            :style="{ aspectRatio: `${playerSize.width} / ${playerSize.height}` }"
+            :style="{ aspectRatio: `${playerSize.width} / ${playerSize.height}`, maxHeight: 'min(70dvh, 32rem)' }"
           >
             <video
               v-if="videoUrl && !lockedSave"
               ref="player"
               :src="videoUrl"
-              class="h-full w-full bg-black"
+              class="h-full w-full max-h-[min(70dvh,32rem)] bg-black object-contain"
               :class="{ 'opacity-0': awaitingReveal }"
               :controls="!awaitingReveal"
               :autoplay="autoplayEnabled && !awaitingReveal"
@@ -917,7 +934,7 @@
               v-if="editResultUrl && !editLockedSave"
               :src="editResultUrl"
               alt="Edited still"
-              class="max-h-96 w-full bg-black object-contain"
+              class="mx-auto max-h-[min(70dvh,24rem)] w-full bg-black object-contain"
               :class="{ 'opacity-0': editAwaitingReveal }"
             >
             <button
@@ -1064,15 +1081,8 @@
                   </label>
                   <button type="button" class="relative h-16 w-16 shrink-0 overflow-hidden rounded-xl bg-zinc-900" @click="openClip(entry.group.head)">
                     <span v-if="entry.group.head.hideThumbnail" class="sensitive-glow block h-full w-full" />
-                    <img v-else-if="entry.group.head.hasThumbnail" :src="`/api/library/clips/${entry.group.head.id}/thumb`" alt="" class="h-full w-full object-cover">
-                    <video
-                      v-else
-                      :src="`/api/library/clips/${entry.group.head.id}/video#t=0.1`"
-                      class="h-full w-full object-cover"
-                      muted
-                      playsinline
-                      preload="metadata"
-                    />
+                    <img v-else-if="entry.group.head.hasThumbnail" :src="`/api/library/clips/${entry.group.head.id}/thumb`" alt="" loading="lazy" decoding="async" class="h-full w-full object-cover">
+                    <span v-else class="block h-full w-full bg-zinc-800" />
                   </button>
                   <div class="min-w-0 flex-1">
                     <div class="flex items-start gap-2">
@@ -1100,7 +1110,7 @@
                             <path d="M12 16v-4M12 8h.01" stroke-linecap="round" />
                           </svg>
                         </button>
-                        <div class="pointer-events-none invisible absolute right-0 top-7 z-20 w-64 whitespace-pre-wrap rounded-xl border border-white/10 bg-zinc-950 p-3 text-xs leading-relaxed text-zinc-300 shadow-2xl group-hover:visible group-focus-within:visible">
+                        <div class="pointer-events-none invisible absolute right-0 top-7 z-20 max-h-48 w-64 max-w-[calc(100vw-2rem)] overflow-y-auto whitespace-pre-wrap break-words rounded-xl border border-white/10 bg-zinc-950 p-3 text-xs leading-relaxed text-zinc-300 shadow-2xl group-hover:visible group-focus-within:visible">
                           {{ familyScript(entry.group.parts) }}
                         </div>
                       </div>
@@ -1141,15 +1151,8 @@
                   >
                     <button type="button" class="relative h-12 w-12 shrink-0 overflow-hidden rounded-lg bg-zinc-900" @click="openClip(item)">
                       <span v-if="item.hideThumbnail" class="sensitive-glow block h-full w-full" />
-                      <img v-else-if="item.hasThumbnail" :src="`/api/library/clips/${item.id}/thumb`" alt="" class="h-full w-full object-cover">
-                      <video
-                        v-else
-                        :src="`/api/library/clips/${item.id}/video#t=0.1`"
-                        class="h-full w-full object-cover"
-                        muted
-                        playsinline
-                        preload="metadata"
-                      />
+                      <img v-else-if="item.hasThumbnail" :src="`/api/library/clips/${item.id}/thumb`" alt="" loading="lazy" decoding="async" class="h-full w-full object-cover">
+                      <span v-else class="block h-full w-full bg-zinc-800" />
                     </button>
                     <div class="min-w-0 flex-1">
                       <div class="flex items-start gap-2">
@@ -1205,8 +1208,10 @@
                     <span v-if="entry.stillGroup.head.hideInput" class="sensitive-glow block h-full w-full" />
                     <img
                       v-else
-                      :src="`/api/library/stills/${entry.stillGroup.head.id}`"
+                      :src="`/api/library/stills/${entry.stillGroup.head.id}?thumb=1`"
                       alt=""
+                      loading="lazy"
+                      decoding="async"
                       class="h-full w-full object-cover"
                     >
                   </button>
@@ -1235,7 +1240,7 @@
                             <path d="M12 16v-4M12 8h.01" stroke-linecap="round" />
                           </svg>
                         </button>
-                        <div class="pointer-events-none invisible absolute right-0 top-7 z-20 w-64 whitespace-pre-wrap rounded-xl border border-white/10 bg-zinc-950 p-3 text-xs leading-relaxed text-zinc-300 shadow-2xl group-hover:visible group-focus-within:visible">
+                        <div class="pointer-events-none invisible absolute right-0 top-7 z-20 max-h-48 w-64 max-w-[calc(100vw-2rem)] overflow-y-auto whitespace-pre-wrap break-words rounded-xl border border-white/10 bg-zinc-950 p-3 text-xs leading-relaxed text-zinc-300 shadow-2xl group-hover:visible group-focus-within:visible">
                           {{ stillFamilyScript(entry.stillGroup.parts) }}
                         </div>
                       </div>
@@ -1280,7 +1285,7 @@
                   >
                     <button type="button" class="relative h-12 w-12 shrink-0 overflow-hidden rounded-lg bg-zinc-900" @click="openStill(item)">
                       <span v-if="item.hideInput" class="sensitive-glow block h-full w-full" />
-                      <img v-else :src="`/api/library/stills/${item.id}`" alt="" class="h-full w-full object-cover">
+                      <img v-else :src="`/api/library/stills/${item.id}?thumb=1`" alt="" loading="lazy" decoding="async" class="h-full w-full object-cover">
                     </button>
                     <div class="min-w-0 flex-1">
                       <div class="flex items-start gap-2">
@@ -1339,6 +1344,13 @@
       @error="toast"
       @renamed="userName = $event"
     />
+    <PromptDrawer
+      :open="promptDrawerOpen"
+      v-model:text="prompt"
+      :title="studioMode === 'edit' ? 'Edit prompt' : (shotScriptMode ? 'Shot script' : 'Prompt')"
+      :placeholder="promptPlaceholder"
+      @update:open="promptDrawerOpen = $event"
+    />
     <ImagePickerModal
       v-if="pickerOpen"
       :folders="folders"
@@ -1356,7 +1368,7 @@
       <div
         v-for="toast in toasts"
         :key="toast.id"
-        class="pointer-events-auto w-80 rounded-2xl border border-red-400/30 bg-zinc-950/90 px-4 py-3 text-sm text-red-100 shadow-2xl"
+        class="pointer-events-auto max-w-[min(20rem,calc(100vw-2rem))] rounded-2xl border border-red-400/30 bg-zinc-950/90 px-4 py-3 text-sm text-red-100 shadow-2xl [overflow-wrap:anywhere]"
       >
         {{ toast.message }}
       </div>
@@ -1496,6 +1508,7 @@ const file = ref<File | null>(null)
 const preview = ref('')
 const dragging = ref(false)
 const prompt = ref('')
+const promptDrawerOpen = ref(false)
 const shotScriptMode = ref(false)
 const recommendPresetId = ref('enhance')
 const promptPresets = ref<Array<{ id: string; name: string; description?: string; builtin?: boolean }>>([
@@ -1649,6 +1662,8 @@ const studioJobs = ref<Array<{
   cutIn?: boolean
   holdForCutIn?: boolean
   lastError?: string
+  completedCount?: number
+  pendingCount?: number
 }>>([])
 const outputStudioJobId = ref('')
 const pickerOpen = ref(false)
@@ -1863,7 +1878,7 @@ const generateLabel = computed(() => {
   return n === 1 ? 'Generate Initial + 1 Extension' : `Generate Initial + ${n} Extensions`
 })
 const studioWaitingCount = computed(() => studioJobs.value.filter(job => job.status === 'waiting').length)
-const queueBadgeCount = computed(() => studioWaitingCount.value + queuePendingCount.value)
+const queueBadgeCount = computed(() => studioWaitingCount.value || queuePendingCount.value)
 const canCutInStudioJob = computed(() => studioJobs.value.some(job => job.status === 'running' || job.status === 'held') || videoBusy.value)
 const outputRestoreId = computed(() => (
   outputStudioJobId.value
@@ -2224,17 +2239,25 @@ function applyLibrary(data: { folders?: LibraryFolder[]; clips?: LibraryClip[];
   }
 }
 
-async function loadLibrary() {
-  const [data, queued] = await Promise.all([
-    $fetch<{ folders?: LibraryFolder[]; clips?: LibraryClip[]; stills?: LibraryStill[]; drafts?: RetryDraft[] }>('/api/library'),
-    $fetch<{ pendingCount?: number }>('/api/queues').catch(() => ({ pendingCount: 0 }))
-  ])
+async function loadLibrary(light = false) {
+  const data = await $fetch<{ folders?: LibraryFolder[]; clips?: LibraryClip[]; stills?: LibraryStill[]; drafts?: RetryDraft[] }>(light ? '/api/library?light=1' : '/api/library')
   applyLibrary(data)
+  if (light) return
+  const queued = await $fetch<{ pendingCount?: number }>('/api/queues').catch(() => ({ pendingCount: 0 }))
   queuePendingCount.value = queued.pendingCount || 0
   await refreshStudioQueue()
   await refreshLiveQueue()
 }
 
+let libraryRefreshTimer: ReturnType<typeof setTimeout> | null = null
+function scheduleLibraryRefresh() {
+  if (libraryRefreshTimer) return
+  libraryRefreshTimer = setTimeout(() => {
+    libraryRefreshTimer = null
+    loadLibrary(true).catch(() => null)
+  }, 1500)
+}
+
 function applyComfyHealth(health: {
   comfy?: { ok?: boolean; busy?: boolean }
   imageComfy?: {
@@ -2303,8 +2326,10 @@ onMounted(async () => {
   authMode.value = me.authMode || ''
   instanceName.value = me.instanceName || instanceName.value || 'AIGen'
   applyInstancePrivacy()
+  setTimeout(() => { void loadLibrary(true).catch(() => null) }, 6000)
   healthTimer = setInterval(() => {
-    void pollComfyHealth()
+    if (typeof document !== 'undefined' && document.hidden) return
+    if (!videoBusy.value && !editBusy.value) void pollComfyHealth()
     void refreshStudioQueue()
     if (activeQueueId.value) void refreshLiveQueue()
   }, 5000)
@@ -2318,6 +2343,8 @@ onBeforeUnmount(() => {
   window.removeEventListener('pointerdown', onSitePointerDown, true)
   if (healthTimer) clearInterval(healthTimer)
   healthTimer = null
+  if (libraryRefreshTimer) clearTimeout(libraryRefreshTimer)
+  libraryRefreshTimer = null
   stopTimer()
   stopListen()
   closeExtend()
@@ -2737,6 +2764,14 @@ function studioJobStatusLabel(job: { status: string; cutIn?: boolean; holdForCut
   return job.status
 }
 
+function studioJobShotLine(job: { shotCount: number; completedCount?: number; status: string }) {
+  const total = job.shotCount || 1
+  const done = job.completedCount || 0
+  if (total <= 1) return '1 clip'
+  if (job.status === 'waiting') return `${total} shots`
+  return `shot ${Math.min(total, done + 1)} of ${total}`
+}
+
 async function refreshStudioQueue() {
   const data = await $fetch<{
     jobs?: Array<{
@@ -2753,6 +2788,8 @@ async function refreshStudioQueue() {
       cutIn?: boolean
       holdForCutIn?: boolean
       lastError?: string
+      completedCount?: number
+      pendingCount?: number
     }>
   }>('/api/studio-queue').catch(() => ({ jobs: [] }))
   studioJobs.value = data.jobs || []
@@ -3939,7 +3976,7 @@ function applyEditEvent(payload: Record<string, any>, hidden: boolean, folderLoc
 
   if (payload.type === 'checkpoint' && payload.stillId) {
     editCompletedChainStep.value = Math.max(editCompletedChainStep.value, Number(payload.chainStep || editChainStep.value) || 0)
-    loadLibrary().catch(() => null)
+    scheduleLibraryRefresh()
     return
   }
 
@@ -3948,7 +3985,7 @@ function applyEditEvent(payload: Record<string, any>, hidden: boolean, folderLoc
     const step = Math.max(1, Number(payload.chainStep || 0) || 0, Number(editChainStep.value || 0) || 0)
     if (total > 1 && step < total) {
       editCompletedChainStep.value = Math.max(editCompletedChainStep.value, step)
-      loadLibrary().catch(() => null)
+      scheduleLibraryRefresh()
       if (locked) {
         editResultUrl.value = ''
         editLockedSave.value = true
@@ -3984,7 +4021,7 @@ function applyEditEvent(payload: Record<string, any>, hidden: boolean, folderLoc
     stopTimer('edit')
     stopListen('edit')
     clearActiveJob('edit')
-    loadLibrary().catch(() => null)
+    scheduleLibraryRefresh()
     void pollComfyHealth()
     return
   }
@@ -3996,7 +4033,7 @@ function applyEditEvent(payload: Record<string, any>, hidden: boolean, folderLoc
     stopTimer('edit')
     stopListen('edit')
     clearActiveJob('edit')
-    loadLibrary().catch(() => null)
+    scheduleLibraryRefresh()
     void pollComfyHealth()
     toast(payload.error || payload.message || 'Image edit failed')
   }
@@ -4022,7 +4059,7 @@ function applyVideoEvent(payload: Record<string, any>, hidden: boolean, folderLo
 
   if (payload.type === 'checkpoint' && payload.clipId) {
     completedChainStep.value = Math.max(completedChainStep.value, Number(payload.chainStep || chainStep.value) || 0)
-    loadLibrary().catch(() => null)
+    scheduleLibraryRefresh()
     void refreshLiveQueue()
     const locked = folderLocked || payload.folderLocked === true
     if (!watchingLibrary.value && !locked) {
@@ -4040,7 +4077,7 @@ function applyVideoEvent(payload: Record<string, any>, hidden: boolean, folderLo
     stopTimer('video')
     stopListen('video')
     clearActiveJob('video')
-    loadLibrary().catch(() => null)
+    scheduleLibraryRefresh()
     void pollComfyHealth()
     void refreshStudioQueue()
     toast(payload.message || 'Comfy was still busy. This job was saved under Held jobs.')
@@ -4053,7 +4090,7 @@ function applyVideoEvent(payload: Record<string, any>, hidden: boolean, folderLo
     const remaining = Number(payload.queuedRemaining || 0)
     if (remaining > 0 || (total > 1 && step < total)) {
       completedChainStep.value = Math.max(completedChainStep.value, step)
-      loadLibrary().catch(() => null)
+      scheduleLibraryRefresh()
       const dest = folders.value.find(folder => folder.id === folderId.value)
       const locked = dest
         ? Boolean(dest.protected && !dest.unlocked)
@@ -4093,7 +4130,7 @@ function applyVideoEvent(payload: Record<string, any>, hidden: boolean, folderLo
       stopListen('video')
       clearActiveJob('video')
       activeDraftId = ''
-      loadLibrary().catch(() => null)
+      scheduleLibraryRefresh()
       void pollComfyHealth()
       void refreshStudioQueue()
       statusMessage.value = currentClip.value?.hideThumbnail ? 'Hidden clip ready' : 'Loaded from library'
@@ -4128,7 +4165,7 @@ function applyVideoEvent(payload: Record<string, any>, hidden: boolean, folderLo
     stopListen('video')
     clearActiveJob('video')
     activeDraftId = ''
-    loadLibrary().catch(() => null)
+    scheduleLibraryRefresh()
     void pollComfyHealth()
     void refreshStudioQueue()
     return
@@ -4141,7 +4178,7 @@ function applyVideoEvent(payload: Record<string, any>, hidden: boolean, folderLo
     stopTimer('video')
     stopListen('video')
     clearActiveJob('video')
-    loadLibrary().catch(() => null)
+    scheduleLibraryRefresh()
     void pollComfyHealth()
     void refreshStudioQueue()
     toast(payload.error || payload.message || 'Generation failed')
@@ -4214,8 +4251,9 @@ function listen(kind: 'video' | 'edit', id: string, hidden: boolean, folderLocke
   }
   void tick()
   const poll = setInterval(() => {
+    if (typeof document !== 'undefined' && document.hidden) return
     void tick()
-  }, 1000)
+  }, 4000)
   if (isEdit) editPollTimer = poll
   else videoPollTimer = poll
 }