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>

assets/css/main.css

@@ -10,6 +10,8 @@ html,
 body,
 #__nuxt {
   min-height: 100%;
+  max-width: 100%;
+  overflow-x: hidden;
 }
 
 body {
@@ -21,6 +23,18 @@ body {
   color: #e4e4e7;
 }
 
+img,
+video,
+textarea,
+pre {
+  max-width: 100%;
+}
+
+textarea {
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
 .font-display {
   font-family: Syne, 'IBM Plex Sans', sans-serif;
 }
@@ -94,3 +108,8 @@ body {
     radial-gradient(circle at 50% 55%, rgba(244, 114, 182, 0.16), transparent 55%),
     #09090b;
 }
+
+.library-thumb {
+  content-visibility: auto;
+  contain-intrinsic-size: auto 11rem;
+}

components/ImagePickerModal.vue

@@ -90,12 +90,14 @@
             <article
               v-for="still in visibleStills"
               :key="still.id"
-              class="overflow-hidden rounded-2xl border border-white/10 bg-zinc-950"
+              class="library-thumb overflow-hidden rounded-2xl border border-white/10 bg-zinc-950"
             >
               <div class="relative h-28 overflow-hidden bg-zinc-900">
                 <img
-                  :src="`/api/library/stills/${still.id}`"
+                  :src="`/api/library/stills/${still.id}?thumb=1`"
                   alt=""
+                  loading="lazy"
+                  decoding="async"
                   class="h-full w-full object-cover"
                   :class="stillHidden(still) && !isRevealed(still.id) ? 'scale-110 blur-xl' : ''"
                 >

components/PromptDrawer.vue

@@ -0,0 +1,67 @@
+<template>
+  <Teleport to="body">
+    <div
+      v-if="open"
+      class="fixed inset-0 z-50 flex flex-col bg-zinc-950 px-4 pb-4 pt-[max(1rem,env(safe-area-inset-top))]"
+    >
+      <div class="mb-3 flex items-center justify-between gap-3">
+        <h2 class="min-w-0 truncate font-display text-lg font-bold">{{ title }}</h2>
+        <button
+          type="button"
+          class="shrink-0 rounded-full border border-white/15 px-3 py-1 text-sm text-zinc-300 hover:text-white"
+          @click="close"
+        >
+          Done
+        </button>
+      </div>
+      <textarea
+        v-if="editable"
+        :value="text"
+        class="min-h-0 w-full flex-1 resize-none rounded-2xl border border-white/10 bg-zinc-900 px-4 py-3 text-base leading-relaxed text-zinc-100 outline-none ring-amber-300/40 [overflow-wrap:anywhere] focus:ring-2"
+        :placeholder="placeholder"
+        @input="onInput"
+      />
+      <div
+        v-else
+        class="min-h-0 flex-1 overflow-y-auto whitespace-pre-wrap rounded-2xl border border-white/10 bg-zinc-900 px-4 py-3 text-base leading-relaxed text-zinc-200 [overflow-wrap:anywhere]"
+      >{{ text }}</div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+  open: boolean
+  title?: string
+  text?: string
+  editable?: boolean
+  placeholder?: string
+}>(), {
+  title: 'Prompt',
+  text: '',
+  editable: true,
+  placeholder: ''
+})
+
+const emit = defineEmits<{
+  'update:open': [value: boolean]
+  'update:text': [value: string]
+}>()
+
+function onInput(event: Event) {
+  emit('update:text', (event.target as HTMLTextAreaElement).value)
+}
+
+function close() {
+  emit('update:open', false)
+}
+
+watch(() => props.open, (open) => {
+  if (typeof document === 'undefined') return
+  document.body.style.overflow = open ? 'hidden' : ''
+})
+
+onBeforeUnmount(() => {
+  if (typeof document !== 'undefined') document.body.style.overflow = ''
+})
+</script>

nuxt.config.ts

@@ -8,7 +8,7 @@ export default defineNuxtConfig({
       htmlAttrs: { lang: 'en', class: 'dark' },
       meta: [
         { charset: 'utf-8' },
-        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+        { name: 'viewport', content: 'width=device-width, initial-scale=1, viewport-fit=cover' },
         { name: 'theme-color', content: '#09090b' },
         { name: 'description', content: 'Headless MiniMax H3 image-to-video studio relayed to local ComfyUI.' }
       ],

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)]">
+    <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 rounded-3xl p-5 sm:p-6 space-y-5">
+      <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>
+          <div class="flex items-start justify-between gap-3">
-          <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>
+              <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">
+      <section class="min-w-0 max-w-full space-y-5">
-        <div ref="outputPanel" class="glass rounded-3xl p-5 sm:p-6">
+        <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">
+                    <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">
-                    <video
+                    <span v-else class="block h-full w-full bg-zinc-800" />
-                      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"
-                    />
                   </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">
+                      <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">
-                      <video
+                      <span v-else class="block h-full w-full bg-zinc-800" />
-                        v-else
-                        :src="`/api/library/clips/${item.id}/video#t=0.1`"
-                        class="h-full w-full object-cover"
-                        muted
-                        playsinline
-                        preload="metadata"
-                      />
                     </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() {
+async function loadLibrary(light = false) {
-  const [data, queued] = await Promise.all([
+  const data = await $fetch<{ folders?: LibraryFolder[]; clips?: LibraryClip[]; stills?: LibraryStill[]; drafts?: RetryDraft[] }>(light ? '/api/library?light=1' : '/api/library')
-    $fetch<{ folders?: LibraryFolder[]; clips?: LibraryClip[]; stills?: LibraryStill[]; drafts?: RetryDraft[] }>('/api/library'),
-    $fetch<{ pendingCount?: number }>('/api/queues').catch(() => ({ pendingCount: 0 }))
-  ])
   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
 }

pages/queue.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">
           <NuxtLink to="/" class="flex h-10 w-10 items-center justify-center rounded-xl bg-amber-400 text-zinc-950 font-display font-extrabold">A</NuxtLink>
           <div>
             <h1 class="font-display text-xl font-bold leading-none">{{ instanceName }}</h1>
-            <p class="text-[11px] uppercase tracking-[0.22em] text-zinc-500">Shot queue</p>
+            <p class="text-[11px] uppercase tracking-[0.22em] text-zinc-500">Queue</p>
           </div>
         </div>
         <div class="flex items-center gap-3 text-sm">
@@ -18,16 +18,17 @@
       </div>
     </header>
 
-    <main class="mx-auto max-w-7xl space-y-6 px-4 py-6 sm:px-6">
+    <main class="mx-auto min-w-0 max-w-7xl space-y-6 px-4 py-6 sm:px-6">
       <div class="flex flex-wrap items-end justify-between gap-3">
         <div>
           <h2 class="font-display text-2xl font-bold">Queue</h2>
           <p class="mt-1 max-w-2xl text-sm text-zinc-400">
-            Each shot ticks off when it saves. If a run stops, continue from the next unchecked scene.
+            Jobs you submitted from Studio. A long shot script is one job; its shots are the list underneath. Run next inserts a waiting job after the current shot as its own clip.
           </p>
         </div>
         <div class="flex flex-wrap items-center gap-3">
-          <p v-if="pendingCount" class="text-sm text-amber-100">{{ pendingCount }} shot{{ pendingCount === 1 ? '' : 's' }} waiting</p>
+          <p v-if="waitingCount" class="text-sm text-amber-100">{{ waitingCount }} job{{ waitingCount === 1 ? '' : 's' }} waiting</p>
+          <p v-else-if="pendingCount" class="text-sm text-amber-100">{{ pendingCount }} shot{{ pendingCount === 1 ? '' : 's' }} waiting</p>
           <button
             type="button"
             class="rounded-full border border-red-400/40 px-3 py-1.5 text-xs text-red-200 hover:border-red-300 hover:text-red-100 disabled:cursor-not-allowed disabled:opacity-50"
@@ -40,21 +41,153 @@
       </div>
 
       <p v-if="error" class="rounded-2xl border border-red-400/30 bg-red-400/10 px-4 py-3 text-sm text-red-200">{{ error }}</p>
-      <p v-else-if="!queues.length" class="glass rounded-3xl px-5 py-10 text-center text-sm text-zinc-400">
+      <p v-else-if="!jobs.length && !orphans.length" class="glass rounded-3xl px-5 py-10 text-center text-sm text-zinc-400">
-        No batches yet. Queue extensions or paste a shot script on the studio page, generate the first shot, then come back here for the rest.
+        Nothing queued. Generate from Studio — a 30-shot script takes one slot, and you can line up more jobs behind it.
       </p>
 
       <section
-        v-for="queue in queues"
+        v-for="job in jobs"
-        :key="queue.id"
+        :key="job.id"
-        class="glass rounded-3xl p-5 sm:p-6 space-y-4"
+        class="glass min-w-0 max-w-full rounded-3xl p-5 sm:p-6 space-y-4"
       >
         <div class="flex flex-wrap items-start justify-between gap-3">
           <div class="min-w-0">
+            <p class="text-[11px] uppercase tracking-[0.18em] text-zinc-500">Job</p>
+            <h3 class="truncate font-display text-lg font-semibold text-zinc-100">{{ job.name }}</h3>
+            <p class="mt-1 text-sm text-zinc-300">{{ jobLine(job) }}</p>
+            <p v-if="job.shots && liveMessage[job.shots.id]" class="mt-1 text-xs text-amber-100">{{ liveMessage[job.shots.id] }}</p>
+            <p v-if="job.lastError" class="mt-1 text-xs text-red-300">{{ job.lastError }}</p>
+          </div>
+          <div class="flex flex-wrap gap-2">
+            <button
+              v-if="job.status === 'waiting' && canCutIn"
+              type="button"
+              class="rounded-full border border-sky-300/40 px-3 py-1.5 text-xs text-sky-100 hover:border-sky-200 disabled:cursor-not-allowed disabled:opacity-50"
+              :disabled="Boolean(busyId)"
+              @click="cutIn(job)"
+            >
+              {{ job.cutIn ? 'Next after current shot' : 'Run next' }}
+            </button>
+            <template v-if="job.shots">
+              <button
+                type="button"
+                class="rounded-full bg-amber-400 px-3 py-1.5 text-xs font-semibold text-zinc-950 disabled:cursor-not-allowed disabled:opacity-50"
+                :disabled="busyId === job.shots.id || job.shots.status === 'running' || job.shots.status === 'complete' || job.shots.pendingCount === 0"
+                @click="process(job.shots, 1)"
+              >
+                {{ continueLabel(job.shots) }}
+              </button>
+              <button
+                type="button"
+                class="rounded-full border border-white/10 px-3 py-1.5 text-xs text-zinc-200 hover:border-amber-300/40 disabled:cursor-not-allowed disabled:opacity-50"
+                :disabled="busyId === job.shots.id || job.shots.status === 'running' || job.shots.status === 'complete' || job.shots.pendingCount < 2"
+                @click="process(job.shots, Math.min(3, job.shots.pendingCount))"
+              >
+                Next {{ Math.min(3, job.shots.pendingCount) || 3 }}
+              </button>
+              <button
+                type="button"
+                class="rounded-full border border-white/10 px-3 py-1.5 text-xs text-zinc-200 hover:border-amber-300/40 disabled:cursor-not-allowed disabled:opacity-50"
+                :disabled="busyId === job.shots.id || job.shots.status === 'running' || job.shots.status === 'complete' || job.shots.pendingCount === 0"
+                @click="process(job.shots, 'all')"
+              >
+                Run remaining
+              </button>
+              <button
+                v-if="job.shots.status === 'running'"
+                type="button"
+                class="rounded-full border border-red-400/40 px-3 py-1.5 text-xs text-red-200"
+                @click="pause(job.shots)"
+              >
+                Pause after this shot
+              </button>
+            </template>
+            <button
+              v-if="job.status === 'waiting' || job.status === 'held'"
+              type="button"
+              class="rounded-full border border-white/10 px-3 py-1.5 text-xs text-zinc-400 hover:text-red-200"
+              @click="removeJob(job)"
+            >
+              Remove job
+            </button>
+          </div>
+        </div>
+
+        <ol v-if="job.shots" class="space-y-2">
+          <li
+            v-for="segment in job.shots.segments"
+            :key="segment.index"
+            class="rounded-2xl border px-4 py-3"
+            :class="segmentClass(job.shots, segment)"
+          >
+            <div class="flex items-start gap-3">
+              <span
+                class="mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-xs font-bold"
+                :class="markClass(job.shots, segment)"
+              >{{ markLabel(job.shots, segment) }}</span>
+              <div class="min-w-0 flex-1">
+                <div class="flex flex-wrap items-center justify-between gap-2">
+                  <p class="text-sm font-medium text-zinc-100">
+                    Shot {{ segment.index + 1 }}
+                    <span class="font-normal text-zinc-500">{{ segmentCaption(job.shots, segment) }}</span>
+                  </p>
+                  <span class="text-xs text-zinc-500">{{ segment.duration }}s</span>
+                </div>
+                <p
+                  v-if="segment.status === 'complete'"
+                  class="mt-1 truncate text-xs text-zinc-400"
+                >{{ segment.prompt }}</p>
+                <textarea
+                  v-else
+                  v-model="segment.prompt"
+                  rows="3"
+                  class="mt-2 max-h-36 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 disabled:opacity-70"
+                  :disabled="segment.status === 'running' || job.shots.status === 'running'"
+                  @focus="markDirty(job.shots.id, segment.index)"
+                  @change="saveSegment(job.shots, segment)"
+                />
+                <DurationField
+                  v-if="segment.status !== 'complete' && segment.status !== 'running'"
+                  v-model="segment.duration"
+                  class="mt-3"
+                  label="Duration"
+                  @update:modelValue="saveSegment(job.shots, segment)"
+                />
+                <div v-if="segment.clipId" class="mt-2">
+                  <a
+                    class="text-xs text-amber-200 hover:text-amber-100"
+                    :href="`/api/library/clips/${segment.clipId}/video`"
+                    target="_blank"
+                    rel="noreferrer"
+                  >Open saved clip</a>
+                </div>
+                <p v-if="segment.error" class="mt-2 text-xs text-red-300">{{ segment.error }}</p>
+              </div>
+            </div>
+          </li>
+        </ol>
+        <ol v-else-if="job.plannedShots?.length" class="space-y-2">
+          <li
+            v-for="(shot, index) in job.plannedShots"
+            :key="index"
+            class="rounded-2xl border border-white/10 bg-zinc-950/50 px-4 py-3"
+          >
+            <p class="text-sm font-medium text-zinc-100">Shot {{ index + 1 }} <span class="font-normal text-zinc-500">· queued with this job</span></p>
+            <p class="mt-1 max-h-24 overflow-y-auto whitespace-pre-wrap text-xs text-zinc-400 [overflow-wrap:anywhere]">{{ shot.prompt }}</p>
+          </li>
+        </ol>
+      </section>
+
+      <section
+        v-for="queue in orphans"
+        :key="queue.id"
+        class="glass min-w-0 max-w-full rounded-3xl p-5 sm:p-6 space-y-4"
+      >
+        <div class="flex flex-wrap items-start justify-between gap-3">
+          <div class="min-w-0">
+            <p class="text-[11px] uppercase tracking-[0.18em] text-zinc-500">Shot batch</p>
             <h3 class="truncate font-display text-lg font-semibold text-zinc-100">{{ queue.name }}</h3>
-            <p class="mt-1 text-sm text-zinc-300">
+            <p class="mt-1 text-sm text-zinc-300">{{ progressLine(queue) }}</p>
-              {{ progressLine(queue) }}
-            </p>
             <p v-if="liveMessage[queue.id]" class="mt-1 text-xs text-amber-100">{{ liveMessage[queue.id] }}</p>
             <p v-if="queue.lastError" class="mt-1 text-xs text-red-300">{{ queue.lastError }}</p>
           </div>
@@ -130,7 +263,7 @@
                   v-else
                   v-model="segment.prompt"
                   rows="3"
-                  class="mt-2 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 disabled:opacity-70"
+                  class="mt-2 max-h-36 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 disabled:opacity-70"
                   :disabled="segment.status === 'running' || queue.status === 'running'"
                   @focus="markDirty(queue.id, segment.index)"
                   @change="saveSegment(queue, segment)"
@@ -182,9 +315,26 @@ type Queue = {
   segments: Segment[]
 }
 
+type StudioJobRow = {
+  id: string
+  status: string
+  name: string
+  shotCount: number
+  liveJobId?: string
+  shotQueueId?: string
+  cutIn?: boolean
+  holdForCutIn?: boolean
+  lastError?: string
+  shots?: Queue | null
+  plannedShots?: { prompt: string; duration: number }[]
+  completedCount?: number
+}
+
 const instanceName = ref(String(useRuntimeConfig().public.instanceName || 'AIGen'))
 const authEnabled = ref(false)
-const queues = ref<Queue[]>([])
+const jobs = ref<StudioJobRow[]>([])
+const orphans = ref<Queue[]>([])
+const waitingCount = ref(0)
 const pendingCount = ref(0)
 const error = ref('')
 const busyId = ref('')
@@ -193,7 +343,11 @@ const dirty = new Set<string>()
 const sources = new Map<string, EventSource>()
 let pollTimer: ReturnType<typeof setInterval> | null = null
 
-const clearableCount = computed(() => queues.value.filter(queue => queue.status !== 'running').length)
+const canCutIn = computed(() => jobs.value.some(job => job.status === 'running' || job.status === 'held'))
+const clearableCount = computed(() => (
+  jobs.value.filter(job => job.status === 'waiting' || job.status === 'held').length
+  + orphans.value.filter(queue => queue.status !== 'running').length
+))
 
 function dirtyKey(queueId: string, index: number) {
   return `${queueId}:${index}`
@@ -219,6 +373,18 @@ function progressLine(queue: Queue) {
   return `Shot ${queue.completedCount} of ${queue.totalCount}`
 }
 
+function jobLine(job: StudioJobRow) {
+  if (job.status === 'waiting') {
+    return job.cutIn
+      ? `Next after the current shot · ${job.shotCount} shot${job.shotCount === 1 ? '' : 's'} · own clip, not part of the current sequence`
+      : `Waiting · ${job.shotCount} shot${job.shotCount === 1 ? '' : 's'}`
+  }
+  if (job.shots) return progressLine(job.shots)
+  if (job.status === 'held') return job.holdForCutIn ? 'Paused so another job can cut in' : 'Paused'
+  if (job.status === 'running') return `Generating · ${job.shotCount} shot${job.shotCount === 1 ? '' : 's'}`
+  return job.status
+}
+
 function continueLabel(queue: Queue) {
   const next = nextSegment(queue)
   if (!next) return 'Process next'
@@ -258,7 +424,12 @@ function markLabel(queue: Queue, segment: Segment) {
 }
 
 function mergeQueues(incoming: Queue[]) {
-  const previous = new Map(queues.value.map(queue => [queue.id, queue]))
+  const previous = new Map(
+    [
+      ...jobs.value.flatMap(job => job.shots ? [job.shots] : []),
+      ...orphans.value
+    ].map(queue => [queue.id, queue])
+  )
   return incoming.map((next) => {
     const old = previous.get(next.id)
     if (!old) return next
@@ -278,10 +449,22 @@ function mergeQueues(incoming: Queue[]) {
 }
 
 async function loadQueues() {
-  const data = await $fetch<{ queues?: Queue[]; pendingCount?: number }>('/api/queues')
+  const data = await $fetch<{
-  queues.value = mergeQueues(data.queues || [])
+    jobs?: StudioJobRow[]
-  pendingCount.value = data.pendingCount || 0
+    orphans?: Queue[]
-  for (const queue of queues.value) {
+    waitingCount?: number
+  }>('/api/studio-queue?full=1')
+  const nextJobs = (data.jobs || []).map((job) => (
+    job.shots ? { ...job, shots: mergeQueues([job.shots])[0] } : job
+  ))
+  jobs.value = nextJobs
+  orphans.value = mergeQueues(data.orphans || [])
+  waitingCount.value = data.waitingCount || 0
+  pendingCount.value = [
+    ...nextJobs.flatMap(job => job.shots ? [job.shots] : []),
+    ...orphans.value
+  ].reduce((sum, queue) => sum + (queue.status === 'complete' ? 0 : queue.pendingCount), 0)
+  for (const queue of [...nextJobs.map(job => job.shots).filter(Boolean), ...orphans.value] as Queue[]) {
     if (queue.status === 'running' && queue.currentJobId) listen(queue)
   }
 }
@@ -305,6 +488,27 @@ function listen(queue: Queue) {
   }
 }
 
+async function cutIn(job: StudioJobRow) {
+  busyId.value = job.id
+  error.value = ''
+  try {
+    await $fetch(`/api/studio-queue/${job.id}/cut-in`, { method: 'POST' })
+    await loadQueues()
+  } catch (err: any) {
+    error.value = err?.data?.statusMessage || err?.statusMessage || err?.message || 'Could not move that job next'
+  } finally {
+    busyId.value = ''
+  }
+}
+
+async function removeJob(job: StudioJobRow) {
+  if (!confirm('Remove this job from the queue? Saved clips stay in the library.')) return
+  await $fetch(`/api/studio-queue/${job.id}`, { method: 'DELETE' }).catch((err: any) => {
+    error.value = err?.data?.statusMessage || err?.message || 'Could not remove that job'
+  })
+  await loadQueues()
+}
+
 async function process(queue: Queue, count: number | 'all') {
   busyId.value = queue.id
   error.value = ''
@@ -354,15 +558,17 @@ async function remove(queue: Queue) {
 async function clearAll() {
   const n = clearableCount.value
   if (!n) {
-    error.value = 'Pause the batch that’s generating before clearing the queue.'
+    error.value = 'Pause the job that’s generating before clearing the queue.'
     return
   }
-  const running = queues.value.some(queue => queue.status === 'running')
+  const running = jobs.value.some(job => job.status === 'running') || orphans.value.some(queue => queue.status === 'running')
-  const extra = running ? ' The batch that’s generating will be left until you pause it.' : ''
+  const extra = running ? ' The job that’s generating will be left until you stop it.' : ''
-  const label = n === 1 ? 'this batch' : `all ${n} batches`
+  if (!confirm(`Clear waiting and paused jobs from the queue? Saved clips stay in the library.${extra}`)) return
-  if (!confirm(`Remove ${label} from the queue? Saved clips stay in the library.${extra}`)) return
   error.value = ''
   try {
+    for (const job of jobs.value.filter(item => item.status === 'waiting' || item.status === 'held')) {
+      await $fetch(`/api/studio-queue/${job.id}`, { method: 'DELETE' }).catch(() => null)
+    }
     await $fetch('/api/queues', { method: 'DELETE' })
     await loadQueues()
   } catch (err: any) {
@@ -391,7 +597,10 @@ onMounted(async () => {
   await loadQueues().catch((err: any) => {
     error.value = err?.data?.statusMessage || err?.message || 'Could not load the queue'
   })
-  pollTimer = setInterval(() => { void loadQueues().catch(() => null) }, 4000)
+  pollTimer = setInterval(() => {
+    if (typeof document !== 'undefined' && document.hidden) return
+    void loadQueues().catch(() => null)
+  }, 4000)
 })
 
 onBeforeUnmount(() => {

server/api/library/clips/[id]/last-frame.get.ts

@@ -1,4 +1,5 @@
-import { existsSync, readFileSync } from 'node:fs'
+import { existsSync, createReadStream } from 'node:fs'
+import { clipLastFramePath, clipVideoPath, fileEtag, sniffImageType } from '~/server/utils/library'
 
 export default defineEventHandler(async (event) => {
   const { owner } = assertLibraryOwner(event)
@@ -18,8 +19,13 @@ export default defineEventHandler(async (event) => {
       throw createError({ statusCode: 500, statusMessage: `Could not extract the last frame: ${message}` })
     }
   }
-  const buf = readFileSync(framePath)
+  const etag = fileEtag(framePath)
-  setHeader(event, 'Content-Type', 'image/png')
+  setHeader(event, 'ETag', etag)
-  setHeader(event, 'Cache-Control', 'private, no-store')
+  setHeader(event, 'Cache-Control', 'private, max-age=86400, stale-while-revalidate=604800')
-  return buf
+  if (getHeader(event, 'if-none-match') === etag) {
+    setResponseStatus(event, 304)
+    return null
+  }
+  setHeader(event, 'Content-Type', sniffImageType(framePath))
+  return sendStream(event, createReadStream(framePath))
 })

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

@@ -1,4 +1,5 @@
-import { existsSync, readFileSync } from 'node:fs'
+import { existsSync, createReadStream } from 'node:fs'
+import { clipThumbPath, fileEtag, sniffImageType } from '~/server/utils/library'
 
 export default defineEventHandler((event) => {
   const { owner } = assertLibraryOwner(event)
@@ -9,8 +10,13 @@ export default defineEventHandler((event) => {
   if (!existsSync(path)) {
     throw createError({ statusCode: 404, statusMessage: 'Thumbnail not found' })
   }
-  const buf = readFileSync(path)
+  const etag = fileEtag(path)
-  setHeader(event, 'Content-Type', imageContentType(buf))
+  setHeader(event, 'ETag', etag)
-  setHeader(event, 'Cache-Control', 'private, max-age=3600')
+  setHeader(event, 'Cache-Control', 'private, max-age=86400, stale-while-revalidate=604800')
-  return buf
+  if (getHeader(event, 'if-none-match') === etag) {
+    setResponseStatus(event, 304)
+    return null
+  }
+  setHeader(event, 'Content-Type', sniffImageType(path))
+  return sendStream(event, createReadStream(path))
 })

server/api/library/index.get.ts

@@ -1,13 +1,12 @@
-export default defineEventHandler(async (event) => {
+export default defineEventHandler((event) => {
   const library = publicLibrary(event)
-  try {
+  const light = String(getQuery(event).light || '') === '1'
-    const { owner } = assertLibraryOwner(event)
+  if (!light) {
-    const folderId = library.folders.find(folder => folder.unlocked)?.id
+    try {
-    if (folderId) await importMissingComfyVideos(owner, folderId)
+      const { owner } = assertLibraryOwner(event)
-    await ensureClipThumbnails(owner)
+      const folderId = library.folders.find(folder => folder.unlocked)?.id
-    await sweepOwnerExtensionStills(owner)
+      void maintainLibrary(owner, folderId).catch(() => null)
-  } catch {
+    } catch { /* locked or anonymous — still return what we can */ }
-    return publicLibrary(event)
   }
-  return publicLibrary(event)
+  return library
 })

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

@@ -1,16 +1,23 @@
-import { existsSync, readFileSync } from 'node:fs'
+import { existsSync, createReadStream } from 'node:fs'
+import { fileEtag, stillPath, stillThumbPath, sniffImageType } from '~/server/utils/library'
 
-export default defineEventHandler((event) => {
+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 = stillPath(owner, still.id)
+  const wantThumb = String(getQuery(event).thumb || '') === '1'
-  if (!existsSync(path)) {
+  const path = wantThumb ? await stillThumbPath(owner, id) : stillPath(owner, still.id)
+  if (!path || !existsSync(path)) {
     throw createError({ statusCode: 404, statusMessage: 'Image file is missing' })
   }
-  const buf = readFileSync(path)
+  const etag = fileEtag(path)
-  setHeader(event, 'Content-Type', imageContentType(buf))
+  setHeader(event, 'ETag', etag)
-  setHeader(event, 'Cache-Control', 'private, max-age=3600')
+  setHeader(event, 'Cache-Control', wantThumb ? 'private, max-age=86400, stale-while-revalidate=604800' : 'private, max-age=3600')
-  return buf
+  if (getHeader(event, 'if-none-match') === etag) {
+    setResponseStatus(event, 304)
+    return null
+  }
+  setHeader(event, 'Content-Type', wantThumb ? 'image/jpeg' : sniffImageType(path))
+  return sendStream(event, createReadStream(path))
 })

server/api/studio-queue.get.ts

@@ -1,12 +1,40 @@
+import { listShotQueues, summarizeQueue } from '~/server/utils/shotQueue'
 import { listStudioJobs, summarizeStudioJob } from '~/server/utils/studioQueue'
 
 export default defineEventHandler((event) => {
   const { owner } = assertLibraryOwner(event)
-  const jobs = listStudioJobs(owner)
+  const full = String(getQuery(event).full || '') === '1'
+  const active = listStudioJobs(owner)
     .filter(job => job.status === 'waiting' || job.status === 'running' || job.status === 'held')
-    .map(summarizeStudioJob)
+  const claimed = new Set(active.map(job => job.shotQueueId).filter(Boolean) as string[])
+  const queues = listShotQueues(owner)
+  const byId = new Map(queues.map(queue => [queue.id, queue]))
+  const jobs = active.map((job) => {
+    const shots = job.shotQueueId ? byId.get(job.shotQueueId) || null : null
+    const shotSummary = shots ? summarizeQueue(shots) : null
+    const plannedShots = shotSummary
+      ? undefined
+      : [
+        { prompt: job.payload.prompt, duration: job.payload.duration },
+        ...(job.payload.extensions || [])
+      ]
+    return {
+      ...summarizeStudioJob(job),
+      ...(full ? {
+        shots: shotSummary,
+        plannedShots: plannedShots && plannedShots.length > 1 ? plannedShots : undefined
+      } : {}),
+      completedCount: shotSummary?.completedCount || 0,
+      pendingCount: shotSummary?.pendingCount ?? job.shotCount
+    }
+  })
   return {
     jobs,
+    orphans: full
+      ? queues
+        .filter(queue => !claimed.has(queue.id) && queue.status !== 'complete')
+        .map(summarizeQueue)
+      : [],
     waitingCount: jobs.filter(job => job.status === 'waiting').length
   }
 })

server/utils/comfy.ts

@@ -127,7 +127,7 @@ export async function fetchHistory(promptId: string) {
 }
 
 export async function fetchHistoryAll() {
-  const res = await comfyFetch('/history')
+  const res = await comfyFetch('/history', { signal: AbortSignal.timeout(12000) })
   if (!res.ok) return {}
   return (await res.json()) as Record<string, unknown>
 }

server/utils/library.ts

@@ -1,5 +1,5 @@
 import { createHash } from 'node:crypto'
-import { existsSync, mkdirSync, readdirSync, readFileSync, renameSync, rmSync, writeFileSync } from 'node:fs'
+import { existsSync, mkdirSync, readdirSync, readFileSync, renameSync, rmSync, writeFileSync, statSync, createReadStream, openSync, readSync, closeSync } from 'node:fs'
 import { join } from 'node:path'
 import { spawn } from 'node:child_process'
 import { randomBytes, scrypt, timingSafeEqual } from 'node:crypto'
@@ -483,7 +483,7 @@ export function deleteFolder(owner: string, id: string) {
       rmSync(clipDir(owner, clip.id), { recursive: true, force: true })
     }
     for (const still of stills) {
-      rmSync(stillPath(owner, still.id), { force: true })
+      removeStillFiles(owner, still.id)
     }
     return { fallbackFolderId: catalog.folders[0].id }
   })
@@ -641,9 +641,9 @@ function probeVideoSize(videoPath: string) {
   })
 }
 
-export async function ensureClipThumbnails(owner: string) {
+export async function ensureClipThumbnails(owner: string, opts?: { skipHistory?: boolean }) {
   const catalog = readCatalog(owner)
-  const needsHistory = catalog.clips.some(clip => clip.comfyFilename && (!clip.steps || !clip.seed))
+  const needsHistory = !opts?.skipHistory && catalog.clips.some(clip => clip.comfyFilename && (!clip.steps || !clip.seed))
   const history = needsHistory
     ? await fetchHistoryAll().catch(() => ({} as Record<string, unknown>))
     : {}
@@ -731,6 +731,110 @@ export function stillPath(owner: string, id: string) {
   return join(ownerRoot(owner), 'stills', id)
 }
 
+export function stillThumbFile(owner: string, id: string) {
+  return join(ownerRoot(owner), 'stills', `${id}.thumb.jpg`)
+}
+
+function removeStillFiles(owner: string, id: string) {
+  rmSync(stillPath(owner, id), { force: true })
+  rmSync(stillThumbFile(owner, id), { force: true })
+}
+
+let thumbSlots = 0
+const thumbWaiters: Array<() => void> = []
+const thumbBuilds = new Map<string, Promise<string>>()
+
+function withThumbSlot<T>(fn: () => Promise<T>) {
+  return new Promise<T>((resolve, reject) => {
+    const run = () => {
+      thumbSlots += 1
+      fn().then(resolve, reject).finally(() => {
+        thumbSlots -= 1
+        const next = thumbWaiters.shift()
+        if (next) next()
+      })
+    }
+    if (thumbSlots < 2) run()
+    else thumbWaiters.push(run)
+  })
+}
+
+function buildStillThumb(source: string, dest: string) {
+  return new Promise<boolean>((resolve) => {
+    const proc = spawn('ffmpeg', [
+      '-y',
+      '-i', source,
+      '-vf', 'scale=320:-2',
+      '-frames:v', '1',
+      '-q:v', '5',
+      dest
+    ], { stdio: 'ignore' })
+    const timer = setTimeout(() => {
+      try { proc.kill('SIGKILL') } catch { /* ignore */ }
+      resolve(false)
+    }, 20000)
+    proc.on('close', (code) => {
+      clearTimeout(timer)
+      resolve(code === 0 && existsSync(dest))
+    })
+    proc.on('error', () => {
+      clearTimeout(timer)
+      resolve(false)
+    })
+  })
+}
+
+export async function stillThumbPath(owner: string, id: string) {
+  const source = stillPath(owner, id)
+  const dest = stillThumbFile(owner, id)
+  if (!existsSync(source)) return ''
+  if (existsSync(dest)) {
+    try {
+      if (statSync(dest).mtimeMs >= statSync(source).mtimeMs) return dest
+    } catch { /* rebuild */ }
+  }
+  const key = `${owner}:${id}`
+  const pending = thumbBuilds.get(key)
+  if (pending) return pending
+  const build = withThumbSlot(async () => {
+    const ok = await buildStillThumb(source, dest)
+    return ok ? dest : source
+  }).finally(() => {
+    thumbBuilds.delete(key)
+  })
+  thumbBuilds.set(key, build)
+  return build
+}
+
+export async function ensureStillThumbnails(owner: string) {
+  const catalog = readCatalog(owner)
+  for (const still of catalog.stills) {
+    if (isPipelineStill(catalog, still)) continue
+    await stillThumbPath(owner, still.id)
+  }
+}
+
+const lastMaintain = new Map<string, number>()
+
+export async function maintainLibrary(owner: string, folderId?: string) {
+  const prev = lastMaintain.get(owner) || 0
+  if (Date.now() - prev < 20000) return
+  lastMaintain.set(owner, Date.now())
+  void ensureStillThumbnails(owner).catch(() => null)
+  const live = await fetchLiveQueue().catch(() => null)
+  const busy = Boolean(live && live.running > 0)
+  if (!busy) {
+    await importMissingComfyVideos(owner, folderId).catch(() => [])
+  }
+  await ensureClipThumbnails(owner, { skipHistory: busy })
+  if (!busy) await sweepOwnerExtensionStills(owner)
+}
+
+export function fileEtag(path: string) {
+  const st = statSync(path)
+  return `W/"${st.size}-${Math.round(st.mtimeMs)}"`
+}
+
 function bytesHash(data: Buffer) {
   return createHash('sha256').update(data).digest('hex')
 }
@@ -820,7 +924,7 @@ function purgeStrayExtensionStills(owner: string, catalog: Catalog) {
   if (!drop.length) return { count: 0, filenames: [] as string[] }
   catalog.stills = keep
   for (const still of drop) {
-    rmSync(stillPath(owner, still.id), { force: true })
+    removeStillFiles(owner, still.id)
   }
   return { count: drop.length, filenames: drop.map(still => still.filename) }
 }
@@ -923,6 +1027,7 @@ export async function saveStill(params: {
   await mutate(params.ownerKey, (next) => {
     next.stills.unshift(still)
   })
+  void stillThumbPath(params.ownerKey, still.id).catch(() => null)
   return still
 }
 
@@ -1029,7 +1134,7 @@ export function deleteStill(owner: string, id: string) {
     const still = catalog.stills.find(item => item.id === id)
     if (!still) throw createError({ statusCode: 404, statusMessage: 'Image not found' })
     catalog.stills = catalog.stills.filter(item => item.id !== id)
-    rmSync(stillPath(owner, id), { force: true })
+    removeStillFiles(owner, id)
     return still
   })
 }
@@ -1053,7 +1158,7 @@ export function deleteStillFamily(owner: string, id: string) {
     const ids = new Set(family.map(item => item.id))
     catalog.stills = catalog.stills.filter(item => !ids.has(item.id))
     for (const item of family) {
-      rmSync(stillPath(owner, item.id), { force: true })
+      removeStillFiles(owner, item.id)
     }
     return family
   })
@@ -1103,6 +1208,17 @@ export function renameStillFamily(owner: string, id: string, name: string) {
   })
 }
 
+export function sniffImageType(path: string) {
+  const buf = Buffer.alloc(16)
+  const fd = openSync(path, 'r')
+  try {
+    readSync(fd, buf, 0, 16, 0)
+  } finally {
+    closeSync(fd)
+  }
+  return imageContentType(buf)
+}
+
 export function imageContentType(buf: Buffer) {
   if (buf[0] === 0x89 && buf[1] === 0x50) return 'image/png'
   if (buf[0] === 0xff && buf[1] === 0xd8) return 'image/jpeg'

server/utils/studioQueue.ts

@@ -202,6 +202,10 @@ export async function cancelStudioJob(owner: string, id: string) {
     }
     return structuredClone(job)
   })
+  if (result.shotQueueId) {
+    const { deleteShotQueue } = await import('~/server/utils/shotQueue')
+    await deleteShotQueue(owner, result.shotQueueId).catch(() => null)
+  }
   const jobs = readJobs(owner)
   if (!jobs.some(item => item.status === 'waiting' && item.cutIn)) {
     const running = jobs.find(item => item.status === 'running')