Keep remaining multi-shot clips on a Queue page so prompts can be edited between shots, with process-next or overnight run-all.

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

pages/index.vue

@@ -22,6 +22,13 @@
           <button type="button" class="rounded-full border border-white/10 px-3 py-1 text-zinc-300 hover:border-amber-300/50 hover:text-white" @click="settingsOpen = true">
             Settings
           </button>
+          <NuxtLink
+            to="/queue"
+            class="rounded-full border px-3 py-1 text-zinc-300 hover:border-amber-300/50 hover:text-white"
+            :class="queuePendingCount ? 'border-amber-300/40 text-amber-100' : 'border-white/10'"
+          >
+            Queue<span v-if="queuePendingCount" class="ml-1.5 text-amber-200">{{ queuePendingCount }}</span>
+          </NuxtLink>
           <a v-if="authEnabled" href="/api/auth/logout" class="text-zinc-400 hover:text-white">Sign out</a>
         </div>
       </div>
@@ -519,6 +526,16 @@
           </div>
         </details>
 
+        <label
+          v-if="studioMode === 'video' && queuedExtensionCount > 0"
+          class="flex cursor-pointer items-start gap-3 rounded-2xl border border-white/10 bg-zinc-950/40 px-4 py-3"
+        >
+          <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>
+        </label>
         <div class="flex flex-wrap gap-3">
           <button
             type="button"
@@ -1414,6 +1431,8 @@ const renameDraft = ref('')
 const renameInput = ref<HTMLInputElement | null>(null)
 const unlockPassword = ref('')
 const settingsOpen = ref(false)
+const queueAutoRun = ref(false)
+const queuePendingCount = ref(0)
 const pickerOpen = ref(false)
 const pickerSlot = ref<'main' | 'editRef' | number>('main')
 const libraryFilter = ref<'all' | 'images' | 'videos'>('all')
@@ -1588,11 +1607,14 @@ const editBlockReason = computed(() => {
   return ''
 })
 const generateLabel = computed(() => {
-  const n = shotScriptMode.value ? Math.max(0, parsedShots.value.length - 1) : extensionQueue.value.length
+  const n = queuedExtensionCount.value
   if (videoBusy.value) return 'Generating…'
   if (!n) return 'Generate Video'
   return n === 1 ? 'Generate Initial + 1 Extension' : `Generate Initial + ${n} Extensions`
 })
+const queuedExtensionCount = computed(() => (
+  shotScriptMode.value ? Math.max(0, parsedShots.value.length - 1) : extensionQueue.value.length
+))
 const editLabel = computed(() => {
   const n = editPassQueue.value.length
   if (!n) return 'Edit image'
@@ -1889,8 +1911,12 @@ function applyLibrary(data: { folders?: LibraryFolder[]; clips?: LibraryClip[];
 }
 
 async function loadLibrary() {
-  const data = await $fetch<{ folders?: LibraryFolder[]; clips?: LibraryClip[]; stills?: LibraryStill[]; drafts?: RetryDraft[] }>('/api/library')
+  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 }))
+  ])
   applyLibrary(data)
+  queuePendingCount.value = queued.pendingCount || 0
 }
 
 function applyComfyHealth(health: {
@@ -3113,6 +3139,7 @@ async function generate() {
     if (activeDraftId) body.append('draftId', activeDraftId)
     if (queued.length) {
       body.append('extensions', JSON.stringify(queued))
+      body.append('queueAutoRun', String(queueAutoRun.value))
     }
     videoDownloadName.value = clipFileName(clipName.value.trim() || initialPrompt.split(/[.!?\n]/)[0] || 'aigen')
     const started = await $fetch<{ jobId: string; seed: number; width: number; height: number; steps: number; turbo: boolean; hideThumbnail?: boolean; folderLocked?: boolean }>('/api/generate', {
@@ -3295,7 +3322,8 @@ function applyVideoEvent(payload: Record<string, any>, hidden: boolean, folderLo
   if (complete && (payload.clipId || payload.filename)) {
     const total = Math.max(1, Number(payload.chainTotal || 0) || 0, Number(chainTotal.value || 0) || 0)
     const step = Math.max(1, Number(payload.chainStep || 0) || 0, Number(chainStep.value || 0) || 0)
-    if (total > 1 && step < total) {
+    const remaining = Number(payload.queuedRemaining || 0)
+    if (remaining > 0 || (total > 1 && step < total)) {
       completedChainStep.value = Math.max(completedChainStep.value, step)
       loadLibrary().catch(() => null)
       const dest = folders.value.find(folder => folder.id === folderId.value)
@@ -3307,9 +3335,11 @@ function applyVideoEvent(payload: Record<string, any>, hidden: boolean, folderLo
         videoUrl.value = clipVideoUrl(payload.clipId)
         concealOutput.value = hidden || payload.hideThumbnail === true
       }
-      statusMessage.value = `Shot ${step} of ${total} saved, but the remaining shots did not start.`
-      progress.value = Math.min(Number(payload.progress || progress.value || 99), 99)
-      toast(`Shot ${step} of ${total} saved. Remaining shots did not run — extend this clip from the library.`)
+      const left = remaining || Math.max(0, total - step)
+      statusMessage.value = `Shot ${step} of ${total} saved. ${left} waiting on Queue.`
+      progress.value = Number(payload.progress || progress.value || 100)
+      toast(`Shot ${step} of ${total} saved. ${left} shot${left === 1 ? '' : 's'} waiting on Queue — edit prompts or process next.`)
+      queuePendingCount.value = left
       videoBusy.value = false
       statusBusy.value = false
       stopTimer('video')

pages/queue.vue

@@ -0,0 +1,266 @@
+<template>
+  <div class="min-h-screen">
+    <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>
+          </div>
+        </div>
+        <div class="flex items-center gap-3 text-sm">
+          <NuxtLink to="/" class="rounded-full border border-white/10 px-3 py-1 text-zinc-300 hover:border-amber-300/50 hover:text-white">
+            Studio
+          </NuxtLink>
+          <a v-if="authEnabled" href="/api/auth/logout" class="text-zinc-400 hover:text-white">Sign out</a>
+        </div>
+      </div>
+    </header>
+
+    <main class="mx-auto 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">
+            Multi-shot batches wait here after the first clip. Edit remaining prompts, process the next shot, the next few, or run the rest overnight.
+          </p>
+        </div>
+        <p v-if="pendingCount" class="text-sm text-amber-100">{{ pendingCount }} shot{{ pendingCount === 1 ? '' : 's' }} waiting</p>
+      </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>
+
+      <section
+        v-for="queue in queues"
+        :key="queue.id"
+        class="glass 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">
+            <h3 class="truncate font-display text-lg font-semibold text-zinc-100">{{ queue.name }}</h3>
+            <p class="mt-1 text-xs text-zinc-500">
+              Shot {{ queue.completedCount }} of {{ queue.totalCount }}
+              <span v-if="queue.status === 'running'"> · processing</span>
+              <span v-else-if="queue.status === 'paused'"> · paused</span>
+              <span v-else-if="queue.status === 'complete'"> · finished</span>
+              <span v-else-if="queue.status === 'error'"> · needs attention</span>
+            </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>
+          <div class="flex flex-wrap gap-2">
+            <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 === queue.id || queue.status === 'running' || queue.status === 'complete' || queue.pendingCount === 0"
+              @click="process(queue, 1)"
+            >
+              Process next
+            </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 === queue.id || queue.status === 'running' || queue.status === 'complete' || queue.pendingCount < 2"
+              @click="process(queue, Math.min(3, queue.pendingCount))"
+            >
+              Next {{ Math.min(3, queue.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 === queue.id || queue.status === 'running' || queue.status === 'complete' || queue.pendingCount === 0"
+              @click="process(queue, 'all')"
+            >
+              Run remaining
+            </button>
+            <button
+              v-if="queue.status === 'running'"
+              type="button"
+              class="rounded-full border border-red-400/40 px-3 py-1.5 text-xs text-red-200"
+              @click="pause(queue)"
+            >
+              Pause after this shot
+            </button>
+            <button
+              v-if="queue.status !== 'running'"
+              type="button"
+              class="rounded-full border border-white/10 px-3 py-1.5 text-xs text-zinc-400 hover:text-red-200"
+              @click="remove(queue)"
+            >
+              Dismiss
+            </button>
+          </div>
+        </div>
+
+        <div class="space-y-3">
+          <article
+            v-for="segment in queue.segments"
+            :key="segment.index"
+            class="rounded-2xl border px-4 py-3"
+            :class="segmentClass(segment.status)"
+          >
+            <div class="mb-2 flex flex-wrap items-center justify-between gap-2">
+              <p class="text-sm font-medium text-zinc-200">
+                {{ segment.index === 0 ? 'Shot 1 · initial' : `Shot ${segment.index + 1}` }}
+                <span class="font-normal text-zinc-500"> · {{ segment.status }}</span>
+              </p>
+              <span class="text-xs text-zinc-500">{{ segment.duration }}s</span>
+            </div>
+            <textarea
+              v-model="segment.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 disabled:opacity-70"
+              :disabled="segment.status === 'complete' || segment.status === 'running' || queue.status === 'running'"
+              @change="saveSegment(queue, segment)"
+            />
+            <DurationField
+              v-if="segment.status !== 'complete' && segment.status !== 'running'"
+              v-model="segment.duration"
+              class="mt-3"
+              label="Duration"
+              @update:modelValue="saveSegment(queue, segment)"
+            />
+            <p v-if="segment.error" class="mt-2 text-xs text-red-300">{{ segment.error }}</p>
+          </article>
+        </div>
+      </section>
+    </main>
+  </div>
+</template>
+
+<script setup lang="ts">
+type Segment = {
+  index: number
+  prompt: string
+  duration: number
+  status: 'pending' | 'running' | 'complete' | 'error'
+  clipId?: string
+  error?: string
+}
+
+type Queue = {
+  id: string
+  name: string
+  status: string
+  lastError?: string
+  pendingCount: number
+  completedCount: number
+  totalCount: number
+  currentJobId?: string
+  segments: Segment[]
+}
+
+const instanceName = ref(String(useRuntimeConfig().public.instanceName || 'AIGen'))
+const authEnabled = ref(false)
+const queues = ref<Queue[]>([])
+const pendingCount = ref(0)
+const error = ref('')
+const busyId = ref('')
+const liveMessage = ref<Record<string, string>>({})
+const sources = new Map<string, EventSource>()
+let pollTimer: ReturnType<typeof setInterval> | null = null
+
+function segmentClass(status: Segment['status']) {
+  if (status === 'complete') return 'border-emerald-400/20 bg-emerald-400/5'
+  if (status === 'running') return 'border-amber-300/40 bg-amber-400/5'
+  if (status === 'error') return 'border-red-400/30 bg-red-400/5'
+  return 'border-white/10 bg-zinc-950/50'
+}
+
+async function loadQueues() {
+  const data = await $fetch<{ queues?: Queue[]; pendingCount?: number }>('/api/queues')
+  queues.value = data.queues || []
+  pendingCount.value = data.pendingCount || 0
+  for (const queue of queues.value) {
+    if (queue.status === 'running' && queue.currentJobId) listen(queue)
+  }
+}
+
+function listen(queue: Queue) {
+  if (!queue.currentJobId || sources.has(queue.id)) return
+  const source = new EventSource(`/api/generate/${queue.currentJobId}/stream`)
+  sources.set(queue.id, source)
+  source.onmessage = (event) => {
+    try {
+      const payload = JSON.parse(event.data) as { message?: string; type?: string }
+      if (payload.message) liveMessage.value = { ...liveMessage.value, [queue.id]: payload.message }
+      if (payload.type === 'complete' || payload.type === 'error') {
+        source.close()
+        sources.delete(queue.id)
+        void loadQueues()
+      }
+    } catch { /* ignore */ }
+  }
+}
+
+async function process(queue: Queue, count: number | 'all') {
+  busyId.value = queue.id
+  error.value = ''
+  try {
+    await $fetch(`/api/queues/${queue.id}`, {
+      method: 'PATCH',
+      body: {
+        segments: queue.segments
+          .filter(segment => segment.status !== 'complete')
+          .map(segment => ({ index: segment.index, prompt: segment.prompt, duration: segment.duration }))
+      }
+    }).catch(() => null)
+    const started = await $fetch<{ jobId: string }>(`/api/queues/${queue.id}/process`, {
+      method: 'POST',
+      body: { count }
+    })
+    queue.currentJobId = started.jobId
+    listen({ ...queue, currentJobId: started.jobId })
+    await loadQueues()
+  } catch (err: any) {
+    error.value = err?.data?.statusMessage || err?.statusMessage || err?.message || 'Could not start the next shot'
+  } finally {
+    busyId.value = ''
+  }
+}
+
+async function pause(queue: Queue) {
+  await $fetch(`/api/queues/${queue.id}/pause`, { method: 'POST' }).catch(() => null)
+  await loadQueues()
+}
+
+async function remove(queue: Queue) {
+  if (!confirm('Remove this batch from the queue? Saved clips stay in the library.')) return
+  await $fetch(`/api/queues/${queue.id}`, { method: 'DELETE' }).catch((err: any) => {
+    error.value = err?.data?.statusMessage || err?.message || 'Could not remove that batch'
+  })
+  await loadQueues()
+}
+
+let saveTimer: ReturnType<typeof setTimeout> | null = null
+function saveSegment(queue: Queue, segment: Segment) {
+  if (saveTimer) clearTimeout(saveTimer)
+  saveTimer = setTimeout(() => {
+    void $fetch(`/api/queues/${queue.id}`, {
+      method: 'PATCH',
+      body: { segments: [{ index: segment.index, prompt: segment.prompt, duration: segment.duration }] }
+    }).catch(() => null)
+  }, 400)
+}
+
+onMounted(async () => {
+  const me = await $fetch<{ user?: { name?: string }; authEnabled?: boolean; instanceName?: string }>('/api/auth/me').catch(() => ({ user: null }))
+  authEnabled.value = Boolean(me.authEnabled)
+  instanceName.value = me.instanceName || instanceName.value
+  await loadQueues().catch((err: any) => {
+    error.value = err?.data?.statusMessage || err?.message || 'Could not load the queue'
+  })
+  pollTimer = setInterval(() => { void loadQueues().catch(() => null) }, 4000)
+})
+
+onBeforeUnmount(() => {
+  if (pollTimer) clearInterval(pollTimer)
+  if (saveTimer) clearTimeout(saveTimer)
+  for (const source of sources.values()) source.close()
+  sources.clear()
+})
+</script>