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/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">
-        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.
+      <p v-else-if="!jobs.length && !orphans.length" class="glass rounded-3xl px-5 py-10 text-center text-sm text-zinc-400">
+        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"
-        :key="queue.id"
-        class="glass rounded-3xl p-5 sm:p-6 space-y-4"
+        v-for="job in jobs"
+        :key="job.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">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">
-              {{ progressLine(queue) }}
-            </p>
+            <p class="mt-1 text-sm text-zinc-300">{{ 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')
-  queues.value = mergeQueues(data.queues || [])
-  pendingCount.value = data.pendingCount || 0
-  for (const queue of queues.value) {
+  const data = await $fetch<{
+    jobs?: StudioJobRow[]
+    orphans?: Queue[]
+    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 extra = running ? ' The batch that’s generating will be left until you pause it.' : ''
-  const label = n === 1 ? 'this batch' : `all ${n} batches`
-  if (!confirm(`Remove ${label} from the queue? Saved clips stay in the library.${extra}`)) return
+  const running = jobs.value.some(job => job.status === 'running') || orphans.value.some(queue => queue.status === 'running')
+  const extra = running ? ' The job that’s generating will be left until you stop it.' : ''
+  if (!confirm(`Clear waiting and paused jobs 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(() => {