Ship extension queues, library extend, and smoother seam stitching.

Users can pre-queue extensions, extend from the library with p2 titles, blend seams with xfade, and a unreadable catalog is no longer replaced with an empty one.

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

pages/index.vue

@@ -67,6 +67,61 @@
           />
         </div>
 
+        <div class="space-y-3">
+          <div
+            v-for="(item, index) in extensionQueue"
+            :key="item.id"
+            class="rounded-2xl border border-white/10 bg-zinc-950/50 p-4"
+          >
+            <div class="mb-3 flex items-center justify-between gap-2">
+              <p class="text-sm font-medium text-zinc-200">Extension #{{ index + 1 }}</p>
+              <button
+                type="button"
+                class="text-xs text-red-300 hover:text-red-200"
+                :disabled="busy"
+                @click="removeQueuedExtension(item.id)"
+              >
+                Remove
+              </button>
+            </div>
+            <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"
+              placeholder="Motion prompt for this extension…"
+            />
+            <div class="mt-3">
+              <p class="mb-2 text-xs uppercase tracking-wider text-zinc-500">Duration</p>
+              <div class="grid grid-cols-2 gap-2">
+                <button
+                  type="button"
+                  class="rounded-xl border px-3 py-2 text-sm"
+                  :class="item.duration === 3 ? 'border-amber-300 bg-amber-400/10' : 'border-white/10'"
+                  @click="item.duration = 3"
+                >
+                  3s
+                </button>
+                <button
+                  type="button"
+                  class="rounded-xl border px-3 py-2 text-sm"
+                  :class="item.duration === 5 ? 'border-amber-300 bg-amber-400/10' : 'border-white/10'"
+                  @click="item.duration = 5"
+                >
+                  5s
+                </button>
+              </div>
+            </div>
+          </div>
+          <button
+            type="button"
+            class="w-full rounded-2xl border border-dashed border-white/15 px-4 py-2.5 text-sm text-zinc-300 transition hover:border-amber-300/40 hover:text-amber-100 disabled:cursor-not-allowed disabled:opacity-50"
+            :disabled="busy || extensionQueue.length >= MAX_EXTENSIONS"
+            @click="queueExtension"
+          >
+            + Queue Extension
+          </button>
+        </div>
+
         <div>
           <p class="mb-2 text-sm font-medium text-zinc-300">Save to library</p>
           <div class="space-y-3">
@@ -249,10 +304,10 @@
           <button
             type="button"
             class="flex-1 rounded-2xl bg-amber-400 px-5 py-3 font-semibold text-zinc-950 transition hover:bg-amber-300 disabled:cursor-not-allowed disabled:opacity-50"
-            :disabled="busy || !file || !prompt.trim() || !folderId"
+            :disabled="busy || !file || !prompt.trim() || !folderId || !queueReady"
             @click="generate"
           >
-            {{ busy ? 'Generating…' : 'Generate Video' }}
+            {{ generateLabel }}
           </button>
           <button
             v-if="busy"
@@ -275,7 +330,7 @@
             >
               <button type="button" class="min-w-0 flex-1 text-left" @click="loadDraft(draft)">
                 <p class="truncate text-sm font-medium text-zinc-100">{{ draft.name || draft.prompt }}</p>
-                <p class="mt-0.5 text-xs text-zinc-500">{{ draft.duration }}s · {{ draft.turbo ? 'turbo' : 'quality' }} · {{ draft.sound === false ? 'silent' : 'sound' }} · seed {{ draft.seed }}</p>
+                <p class="mt-0.5 text-xs text-zinc-500">{{ draft.duration }}s · {{ draft.turbo ? 'turbo' : 'quality' }} · {{ draft.sound === false ? 'silent' : 'sound' }} · seed {{ draft.seed }}{{ draft.extensions?.length ? ` · +${draft.extensions.length} ext` : '' }}</p>
               </button>
               <button type="button" class="shrink-0 text-xs text-red-300 hover:text-red-200" @click="dismissDraft(draft)">Dismiss</button>
             </li>
@@ -287,13 +342,20 @@
         <div ref="outputPanel" class="glass rounded-3xl p-5 sm:p-6">
           <div class="flex items-center justify-between gap-3">
             <h2 class="font-display text-2xl font-bold">Output</h2>
-            <p class="text-xs text-zinc-500">{{ elapsedLabel }} · step {{ step }}/{{ maxStep || (turbo ? 8 : 20) }}</p>
+            <p class="text-xs text-zinc-500">
+              {{ elapsedLabel }}
+              <template v-if="chainTotal > 1"> · chain {{ chainStep }}/{{ chainTotal }}</template>
+              · step {{ step }}/{{ maxStep || (turbo ? 8 : 20) }}
+            </p>
           </div>
           <div class="mt-4">
             <div class="mb-2 flex items-center justify-between text-sm">
               <span :class="statusBusy ? 'text-amber-200' : 'text-zinc-300'">{{ statusMessage }}</span>
               <span class="text-amber-200">{{ progress }}%</span>
             </div>
+            <p v-if="chainTotal > 1" class="mb-2 text-xs text-amber-200/80">
+              Step {{ chainStep }}/{{ chainTotal }}{{ chainLabel ? `: ${chainLabel}` : '' }}
+            </p>
             <div class="h-2 overflow-hidden rounded-full bg-zinc-800">
               <div class="h-full rounded-full bg-amber-400 progress-glow transition-all duration-300" :style="{ width: progress + '%' }" />
             </div>
@@ -338,8 +400,9 @@
             Generated MP4 appears here
           </div>
           </div>
-          <div v-if="videoUrl && !awaitingReveal && !lockedSave" class="mt-4 flex flex-wrap gap-3">
+          <div v-if="videoUrl && !lockedSave" class="mt-4 flex flex-wrap gap-3">
             <a
+              v-if="!awaitingReveal"
               :href="videoUrl"
               :download="`${outputDownloadName}.mp4`"
               class="inline-flex rounded-2xl border border-white/15 px-4 py-2 text-sm hover:border-amber-300/50"
@@ -350,17 +413,16 @@
               v-if="canExtend"
               type="button"
               class="inline-flex rounded-2xl border border-amber-300/40 px-4 py-2 text-sm text-amber-100 hover:border-amber-300/70"
-              :disabled="busy"
-              @click="openExtend"
+              @click="openExtend()"
             >
               Extend Video
             </button>
           </div>
-          <div v-if="extendOpen && canExtend" class="mt-4 space-y-4 rounded-2xl border border-white/10 bg-zinc-950/50 p-4">
+          <div v-if="extendOpen" class="mt-4 space-y-4 rounded-2xl border border-white/10 bg-zinc-950/50 p-4">
             <div class="flex items-start justify-between gap-3">
               <div>
                 <h3 class="text-sm font-semibold text-amber-100">Extend this clip</h3>
-                <p class="mt-1 text-xs text-zinc-500">Continue from the last frame with a new motion prompt, then stitch the segments together.</p>
+                <p class="mt-1 text-xs text-zinc-500">Continue from the last frame with a new motion prompt, then stitch the segments together.{{ extendSaveName ? ` Saves as “${extendSaveName}”.` : '' }}</p>
               </div>
               <button type="button" class="text-xs text-zinc-400 hover:text-white" @click="closeExtend">Close</button>
             </div>
@@ -403,7 +465,7 @@
             <button
               type="button"
               class="w-full rounded-2xl bg-amber-400 px-4 py-2.5 text-sm font-semibold text-zinc-950 transition hover:bg-amber-300 disabled:cursor-not-allowed disabled:opacity-50"
-              :disabled="busy || !extendPrompt.trim() || lastFrameLoading"
+              :disabled="!extendPrompt.trim() || lastFrameLoading"
               @click="generateExtension"
             >
               Generate Extension
@@ -495,6 +557,7 @@
                   <p class="text-xs text-zinc-500">{{ item.width && item.height ? `${item.width}×${item.height}` : 'size unknown' }} · {{ item.steps || '—' }} steps · seed {{ item.seed || '—' }}</p>
                   <div class="mt-2 flex flex-wrap items-center gap-3">
                     <button type="button" class="text-xs text-amber-300" @click="openClip(item)">Open</button>
+                    <button type="button" class="text-xs text-amber-300" @click="openExtend(item)">Extend</button>
                     <button type="button" class="text-xs text-amber-300" @click="startRename(item)">Rename</button>
                     <button type="button" class="text-xs text-amber-300" @click="rerun(item)">Rerun</button>
                     <select
@@ -621,6 +684,13 @@ interface RetryDraft {
   fps?: number
   samplerName?: string
   scheduler?: string
+  extensions?: { prompt: string; duration: number }[]
+}
+
+interface QueuedExtension {
+  id: string
+  prompt: string
+  duration: 3 | 5
 }
 
 const PRESETS: Record<Exclude<AspectId, 'auto'>, { width: number; height: number }> = {
@@ -642,6 +712,8 @@ const file = ref<File | null>(null)
 const preview = ref('')
 const dragging = ref(false)
 const prompt = ref('')
+const MAX_EXTENSIONS = 8
+const extensionQueue = ref<QueuedExtension[]>([])
 const clipName = ref('')
 const outputDownloadName = ref('aigen')
 const aspect = ref<AspectId>('auto')
@@ -680,6 +752,9 @@ const statusMessage = ref('Waiting for a still.')
 const statusBusy = ref(false)
 const step = ref(0)
 const maxStep = ref(8)
+const chainStep = ref(1)
+const chainTotal = ref(1)
+const chainLabel = ref('')
 const elapsedMs = ref(0)
 const videoUrl = ref('')
 const jobId = ref('')
@@ -689,7 +764,9 @@ const extendPrompt = ref('')
 const extendDuration = ref(5)
 const lastFrameUrl = ref('')
 const lastFrameLoading = ref(false)
+const watchingLibrary = ref(false)
 let lastFrameObjectUrl = ''
+let lastFrameGen = 0
 const awaitingReveal = ref(false)
 const concealOutput = ref(false)
 const lockedSave = ref(false)
@@ -794,9 +871,16 @@ const currentClip = computed(() => clips.value.find(clip => clip.id === currentC
 const canExtend = computed(() => Boolean(
   videoUrl.value
   && !lockedSave.value
-  && !awaitingReveal.value
   && (currentClipId.value || clipIdFromPlayer())
 ))
+const extendSaveName = computed(() => nextClipPartName(currentClip.value?.name || currentClip.value?.prompt || ''))
+const queueReady = computed(() => extensionQueue.value.every(item => item.prompt.trim()))
+const generateLabel = computed(() => {
+  const n = extensionQueue.value.length
+  if (busy.value) return 'Generating…'
+  if (!n) return 'Generate Video'
+  return n === 1 ? 'Generate Initial + 1 Extension' : `Generate Initial + ${n} Extensions`
+})
 
 const visibleClips = computed(() => clips.value.filter(clip => clip.folderId === browseFolderId.value))
 const currentFolder = computed(() => folders.value.find(folder => folder.id === folderId.value))
@@ -1140,6 +1224,16 @@ function clipFileName(name: string) {
   return name.replace(/[<>:"/\\|?*'`]/g, '-').replace(/\s+/g, ' ').trim().slice(0, 80) || 'aigen'
 }
 
+function nextClipPartName(name: string) {
+  const trimmed = (name || '').trim()
+  if (!trimmed) return ''
+  const match = trimmed.match(/^(.*)\s+p(\d+)$/i)
+  const base = (match ? match[1] : trimmed).trim() || trimmed
+  const part = match ? Number(match[2]) + 1 : 2
+  const suffix = ` p${part}`
+  return `${base.slice(0, Math.max(1, 80 - suffix.length))}${suffix}`
+}
+
 function rerun(item: LibraryClip) {
   prompt.value = item.prompt
   clipName.value = item.name || ''
@@ -1162,6 +1256,11 @@ async function loadDraft(draft: RetryDraft) {
   if (draft.hideInput) hideInputPreview.value = true
   duration.value = clampDuration(Number(draft.duration))
   durationDraft.value = formatDuration(duration.value)
+  extensionQueue.value = (draft.extensions || []).slice(0, MAX_EXTENSIONS).map(item => ({
+    id: crypto.randomUUID(),
+    prompt: String(item.prompt || ''),
+    duration: item.duration === 3 ? 3 : 5 as 3 | 5
+  }))
   try {
     const blob = await $fetch<Blob>(`/api/library/drafts/${draft.id}/still`, { responseType: 'blob' })
     const filename = draft.stillFilename || 'held-still.png'
@@ -1228,6 +1327,7 @@ function clipVideoUrl(clipId: string) {
 }
 
 function closeExtend() {
+  lastFrameGen += 1
   extendOpen.value = false
   lastFrameLoading.value = false
   if (lastFrameObjectUrl) {
@@ -1237,37 +1337,43 @@ function closeExtend() {
   lastFrameUrl.value = ''
 }
 
-async function openExtend() {
-  const id = clipIdFromPlayer()
+async function openExtend(item?: LibraryClip) {
+  if (item) openClip(item)
+  const id = item?.id || clipIdFromPlayer()
   if (!id) {
     toast('Load a generated clip before extending it.')
     return
   }
   currentClipId.value = id
-  const clip = clips.value.find(item => item.id === id)
+  const clip = clips.value.find(entry => entry.id === id)
   extendPrompt.value = clip?.prompt || prompt.value
   extendDuration.value = 5
   extendOpen.value = true
   lastFrameLoading.value = true
   lastFrameUrl.value = ''
   player.value?.pause()
+  const gen = ++lastFrameGen
   try {
     const blob = await $fetch<Blob>(`/api/library/clips/${id}/last-frame`, { responseType: 'blob' })
+    if (gen !== lastFrameGen) return
     if (lastFrameObjectUrl) URL.revokeObjectURL(lastFrameObjectUrl)
     lastFrameObjectUrl = URL.createObjectURL(blob)
     lastFrameUrl.value = lastFrameObjectUrl
   } catch (error: any) {
+    if (gen !== lastFrameGen) return
     toast(error?.data?.statusMessage || 'Could not extract the last frame')
   } finally {
-    lastFrameLoading.value = false
+    if (gen === lastFrameGen) lastFrameLoading.value = false
   }
 }
 
 async function generateExtension() {
   const id = clipIdFromPlayer()
   if (!id || !extendPrompt.value.trim()) return
+  const switching = busy.value
   statusBusy.value = false
   busy.value = true
+  watchingLibrary.value = false
   listenGen += 1
   stopListen()
   settledUi = false
@@ -1275,6 +1381,9 @@ async function generateExtension() {
   awaitingReveal.value = false
   concealOutput.value = hideThumbnail.value || currentClip.value?.hideThumbnail === true
   lockedSave.value = false
+  chainStep.value = 1
+  chainTotal.value = 1
+  chainLabel.value = ''
   statusMessage.value = 'Extracting last frame & stitching extension...'
   startTimer()
   try {
@@ -1287,6 +1396,7 @@ async function generateExtension() {
       }
     })
     closeExtend()
+    if (switching) toast('Switched to this extension. The other job will keep saving to the library.')
     jobId.value = started.jobId
     maxStep.value = started.steps
     settledUi = false
@@ -1306,6 +1416,7 @@ async function generateExtension() {
 
 function openClip(item: LibraryClip) {
   closeExtend()
+  watchingLibrary.value = true
   currentClipId.value = item.id
   lockedSave.value = false
   concealOutput.value = item.hideThumbnail
@@ -1314,8 +1425,10 @@ function openClip(item: LibraryClip) {
   playerSize.value = { width: item.width || 1344, height: item.height || 768 }
   browseFolderId.value = item.folderId
   outputDownloadName.value = clipFileName(item.name || item.prompt.split(/[.!?\n]/)[0] || 'aigen')
-  statusMessage.value = item.hideThumbnail ? 'Hidden clip ready' : 'Loaded from library'
-  progress.value = 100
+  if (!busy.value) {
+    statusMessage.value = item.hideThumbnail ? 'Hidden clip ready' : 'Loaded from library'
+    progress.value = 100
+  }
 }
 
 async function removeClip(item: LibraryClip) {
@@ -1407,8 +1520,25 @@ function revealAndPlay() {
   })
 }
 
+function queueExtension() {
+  if (extensionQueue.value.length >= MAX_EXTENSIONS) return
+  extensionQueue.value.push({
+    id: crypto.randomUUID(),
+    prompt: prompt.value.trim(),
+    duration: 5
+  })
+}
+
+function removeQueuedExtension(id: string) {
+  extensionQueue.value = extensionQueue.value.filter(item => item.id !== id)
+}
+
 async function generate() {
   if (!file.value || !prompt.value.trim()) return
+  if (!queueReady.value) {
+    toast('Each queued extension needs a prompt.')
+    return
+  }
   if (!folderId.value) {
     toast('Choose a library folder before generating.')
     return
@@ -1425,8 +1555,12 @@ async function generate() {
   awaitingReveal.value = false
   concealOutput.value = hideThumbnail.value
   lockedSave.value = false
+  watchingLibrary.value = false
   playerSize.value = outputSize.value
   statusMessage.value = 'Checking ComfyUI...'
+  chainStep.value = 1
+  chainTotal.value = 1 + extensionQueue.value.length
+  chainLabel.value = extensionQueue.value.length ? 'Initial' : ''
   startTimer()
   try {
     const body = new FormData()
@@ -1449,6 +1583,12 @@ async function generate() {
     body.append('sound', String(withSound.value))
     body.append('name', clipName.value.trim())
     if (activeDraftId) body.append('draftId', activeDraftId)
+    if (extensionQueue.value.length) {
+      body.append('extensions', JSON.stringify(extensionQueue.value.map(item => ({
+        prompt: item.prompt.trim(),
+        duration: item.duration
+      }))))
+    }
     outputDownloadName.value = clipFileName(clipName.value.trim() || prompt.value.trim().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', {
       method: 'POST',
@@ -1490,6 +1630,9 @@ function applyJobEvent(payload: Record<string, any>, hidden: boolean, folderLock
   if (typeof payload.progress === 'number') progress.value = payload.progress
   if (typeof payload.step === 'number') step.value = payload.step
   if (typeof payload.maxStep === 'number') maxStep.value = payload.maxStep
+  if (typeof payload.chainStep === 'number') chainStep.value = payload.chainStep
+  if (typeof payload.chainTotal === 'number') chainTotal.value = payload.chainTotal
+  if (payload.chainLabel) chainLabel.value = String(payload.chainLabel)
 
   const failed = payload.type === 'error' || payload.status === 'error' || payload.status === 'cancelled'
   const complete = payload.type === 'complete' || payload.status === 'complete'
@@ -1515,6 +1658,22 @@ function applyJobEvent(payload: Record<string, any>, hidden: boolean, folderLock
     const locked = dest
       ? Boolean(dest.protected && !dest.unlocked)
       : (folderLocked || payload.folderLocked === true)
+    const keepLibraryView = watchingLibrary.value && Boolean(currentClipId.value) && payload.clipId !== currentClipId.value
+    if (keepLibraryView) {
+      busy.value = false
+      statusBusy.value = false
+      stopTimer()
+      stopListen()
+      clearActiveJob()
+      activeDraftId = ''
+      loadLibrary().catch(() => null)
+      void pollComfyHealth()
+      statusMessage.value = currentClip.value?.hideThumbnail ? 'Hidden clip ready' : 'Loaded from library'
+      toast(locked
+        ? 'Saved to the locked folder. Unlock it to view.'
+        : 'New clip saved to the library')
+      return
+    }
     if (locked) {
       videoUrl.value = ''
       awaitingReveal.value = false