Add a persistent clip library with folders, optional password, and hidden-thumbnail glow.

Generated videos save into a chosen folder, sensitive clips skip thumbnails until played, and Docker writes the catalog to a Coolify volume.

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

.env.example

@@ -9,4 +9,4 @@ NUXT_OIDC_CLIENT_SECRET=
 NUXT_OIDC_ISSUER=https://auth.carrgarage.com/application/o/aigen/
 NUXT_OIDC_AUTHORIZE_URL=https://auth.carrgarage.com/application/o/authorize/
 NUXT_OIDC_TOKEN_URL=http://192.168.77.2:9000/application/o/token/
-NUXT_OIDC_USERINFO_URL=http://192.168.77.2:9000/application/o/userinfo/
+LIBRARY_DIR=/data/library

Dockerfile

@@ -12,7 +12,8 @@ ENV HOST=0.0.0.0
 ENV PORT=3000
 ENV NITRO_HOST=0.0.0.0
 ENV NITRO_PORT=3000
+ENV LIBRARY_DIR=/data/library
 COPY --from=build /app/.output ./.output
+RUN mkdir -p /data/library
 EXPOSE 3000
-USER node
 CMD ["node", ".output/server/index.mjs"]

assets/css/main.css

@@ -35,3 +35,26 @@ body {
 .progress-glow {
   box-shadow: 0 0 24px rgba(251, 191, 36, 0.35);
 }
+
+@keyframes sensitive-pulse {
+  0%, 100% {
+    box-shadow:
+      0 0 28px rgba(251, 191, 36, 0.25),
+      0 0 90px rgba(251, 191, 36, 0.18),
+      inset 0 0 60px rgba(251, 191, 36, 0.08);
+  }
+  50% {
+    box-shadow:
+      0 0 48px rgba(251, 191, 36, 0.55),
+      0 0 140px rgba(244, 114, 182, 0.28),
+      inset 0 0 80px rgba(251, 191, 36, 0.16);
+  }
+}
+
+.sensitive-glow {
+  animation: sensitive-pulse 2.2s ease-in-out infinite;
+  background:
+    radial-gradient(circle at 50% 45%, rgba(251, 191, 36, 0.22), transparent 42%),
+    radial-gradient(circle at 50% 55%, rgba(244, 114, 182, 0.16), transparent 55%),
+    #09090b;
+}

nuxt.config.ts

@@ -32,6 +32,7 @@ export default defineNuxtConfig({
     oidcAuthorizeUrl: process.env.NUXT_OIDC_AUTHORIZE_URL || '',
     oidcTokenUrl: process.env.NUXT_OIDC_TOKEN_URL || '',
     oidcUserinfoUrl: process.env.NUXT_OIDC_USERINFO_URL || '',
+    libraryDir: process.env.LIBRARY_DIR || (process.env.NODE_ENV === 'production' ? '/data/library' : '.data/library'),
     public: {
       authEnabled: process.env.NUXT_PUBLIC_AUTH_ENABLED === 'true'
     }

pages/index.vue

@@ -76,6 +76,34 @@
           <p class="mt-2 text-xs text-zinc-500">Output {{ outputSize.width }} × {{ outputSize.height }}{{ aspect === 'auto' ? ' · matching the still' : ' · override' }}</p>
         </div>
 
+        <div>
+          <p class="mb-2 text-sm font-medium text-zinc-300">Save to library</p>
+          <div v-if="libraryLocked && !libraryUnlocked" class="rounded-2xl border border-amber-300/20 bg-zinc-950/50 px-4 py-3 text-sm text-zinc-400">
+            Unlock the library to choose a folder.
+          </div>
+          <div v-else class="space-y-3">
+            <div class="flex flex-wrap gap-2">
+              <select v-model="folderId" class="min-w-[12rem] flex-1 rounded-xl border border-white/10 bg-zinc-950 px-3 py-2 text-sm">
+                <option v-for="folder in folders" :key="folder.id" :value="folder.id">{{ folder.name }}</option>
+              </select>
+              <input
+                v-model="newFolderName"
+                class="w-40 rounded-xl border border-white/10 bg-zinc-950 px-3 py-2 text-sm"
+                placeholder="New folder"
+                @keydown.enter.prevent="addFolder"
+              >
+              <button type="button" class="rounded-xl border border-white/15 px-3 py-2 text-sm hover:border-amber-300/50" @click="addFolder">Add</button>
+            </div>
+            <label class="flex items-start gap-3 rounded-2xl border border-white/10 bg-zinc-950/40 px-4 py-3 text-sm">
+              <input v-model="hideThumbnail" type="checkbox" class="mt-1 accent-amber-400">
+              <span>
+                <span class="block font-medium text-zinc-200">Hide thumbnail</span>
+                <span class="text-xs text-zinc-500">For sensitive prompts. The preview glows when ready until you play the clip.</span>
+              </span>
+            </label>
+          </div>
+        </div>
+
         <details class="rounded-2xl border border-white/10 bg-zinc-950/40 px-4 py-3">
           <summary class="cursor-pointer text-sm font-medium">Generation settings</summary>
           <div class="mt-4 space-y-4">
@@ -106,7 +134,7 @@
           <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()"
+            :disabled="busy || !file || !prompt.trim() || (libraryLocked && !libraryUnlocked)"
             @click="generate"
           >
             {{ busy ? 'Generating…' : 'Generate Video' }}
@@ -137,23 +165,38 @@
               <div class="h-full rounded-full bg-amber-400 progress-glow transition-all duration-300" :style="{ width: progress + '%' }" />
             </div>
           </div>
-          <div class="mt-5 overflow-hidden rounded-2xl bg-black/50">
+          <div
+            class="relative mt-5 overflow-hidden rounded-2xl bg-black/50"
+            :class="{ 'sensitive-glow': awaitingReveal }"
+            :style="{ aspectRatio: `${playerSize.width} / ${playerSize.height}` }"
+          >
             <video
               v-if="videoUrl"
+              ref="player"
               :src="videoUrl"
-              class="w-full bg-black"
+              class="h-full w-full bg-black"
-              :style="{ aspectRatio: `${outputSize.width} / ${outputSize.height}` }"
+              :class="{ 'opacity-0': awaitingReveal }"
-              controls
+              :controls="!awaitingReveal"
-              autoplay
+              :autoplay="!awaitingReveal"
               loop
               playsinline
+              @play="onPlayed"
             />
-            <div v-else class="flex items-center justify-center text-sm text-zinc-500" :style="{ aspectRatio: `${outputSize.width} / ${outputSize.height}` }">
+            <button
+              v-if="awaitingReveal"
+              type="button"
+              class="absolute inset-0 flex flex-col items-center justify-center gap-2 text-amber-100"
+              @click="revealAndPlay"
+            >
+              <span class="font-display text-lg font-bold">Ready</span>
+              <span class="text-sm text-amber-100/80">Click to play · thumbnail hidden</span>
+            </button>
+            <div v-else-if="!videoUrl" class="flex h-full min-h-[12rem] items-center justify-center text-sm text-zinc-500">
               Generated MP4 appears here
             </div>
           </div>
           <a
-            v-if="videoUrl"
+            v-if="videoUrl && !awaitingReveal"
             :href="videoUrl"
             download="aigen.mp4"
             class="mt-4 inline-flex rounded-2xl border border-white/15 px-4 py-2 text-sm hover:border-amber-300/50"
@@ -163,21 +206,69 @@
         </div>
 
         <div class="glass rounded-3xl p-5 sm:p-6">
-          <h2 class="font-display text-xl font-bold">History</h2>
+          <div class="flex items-center justify-between gap-3">
-          <p v-if="!history.length" class="mt-3 text-sm text-zinc-500">Past runs stay in this browser.</p>
+            <h2 class="font-display text-xl font-bold">Library</h2>
+            <button
+              v-if="libraryUnlocked && libraryLocked"
+              type="button"
+              class="text-xs text-zinc-400 hover:text-white"
+              @click="lockLibrary"
+            >
+              Lock
+            </button>
+          </div>
+
+          <form v-if="libraryLocked && !libraryUnlocked" class="mt-4 space-y-3" @submit.prevent="unlockLibrary">
+            <p class="text-sm text-zinc-400">This library is password protected.</p>
+            <input v-model="unlockPassword" type="password" class="w-full rounded-xl border border-white/10 bg-zinc-950 px-3 py-2 text-sm" placeholder="Library password">
+            <button type="submit" class="w-full rounded-xl bg-amber-400 px-4 py-2 font-semibold text-zinc-950">Unlock</button>
+          </form>
+
+          <template v-else>
+            <div class="mt-4 flex flex-wrap gap-2">
+              <button
+                v-for="folder in folders"
+                :key="folder.id"
+                type="button"
+                class="rounded-full border px-3 py-1 text-xs"
+                :class="browseFolderId === folder.id ? 'border-amber-300 bg-amber-400/10 text-amber-100' : 'border-white/10 text-zinc-400'"
+                @click="browseFolderId = folder.id"
+              >
+                {{ folder.name }}
+                <span class="text-zinc-500">({{ clipsIn(folder.id).length }})</span>
+              </button>
+            </div>
+
+            <p v-if="!visibleClips.length" class="mt-4 text-sm text-zinc-500">Nothing in this folder yet. Generate into it from the left.</p>
             <ul class="mt-4 space-y-3">
-            <li v-for="item in history" :key="item.id" class="flex gap-3 rounded-2xl border border-white/5 bg-zinc-950/40 p-3">
+              <li v-for="item in visibleClips" :key="item.id" class="flex gap-3 rounded-2xl border border-white/5 bg-zinc-950/40 p-3">
-              <img :src="item.thumbnail" alt="" class="h-16 w-16 rounded-xl object-cover">
+                <button type="button" class="relative h-16 w-16 shrink-0 overflow-hidden rounded-xl bg-zinc-900" @click="openClip(item)">
+                  <span v-if="item.hideThumbnail" class="sensitive-glow block h-full w-full" />
+                  <img v-else :src="`/api/library/clips/${item.id}/thumb`" alt="" class="h-full w-full object-cover">
+                </button>
                 <div class="min-w-0 flex-1">
                   <p class="truncate text-sm">{{ item.prompt }}</p>
                   <p class="text-xs text-zinc-500">{{ item.width }}×{{ item.height }} · {{ item.steps }} steps · seed {{ item.seed }}</p>
-                <div class="mt-2 flex gap-2">
+                  <div class="mt-2 flex 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="rerun(item)">Rerun</button>
-                  <a v-if="item.videoUrl" :href="item.videoUrl" class="text-xs text-sky-300" target="_blank">Open</a>
+                    <button type="button" class="text-xs text-red-300" @click="removeClip(item)">Delete</button>
                   </div>
                 </div>
               </li>
             </ul>
+
+            <details class="mt-5 rounded-2xl border border-white/10 bg-zinc-950/40 px-4 py-3">
+              <summary class="cursor-pointer text-sm font-medium">Library password</summary>
+              <form class="mt-4 space-y-3" @submit.prevent="savePassword">
+                <input v-if="libraryLocked" v-model="currentPassword" type="password" class="w-full rounded-xl border border-white/10 bg-zinc-950 px-3 py-2 text-sm" placeholder="Current password">
+                <input v-model="nextPassword" type="password" class="w-full rounded-xl border border-white/10 bg-zinc-950 px-3 py-2 text-sm" :placeholder="libraryLocked ? 'New password (blank to remove)' : 'Set a password'">
+                <button type="submit" class="rounded-xl border border-white/15 px-4 py-2 text-sm hover:border-amber-300/50">
+                  {{ libraryLocked ? 'Update password' : 'Protect library' }}
+                </button>
+              </form>
+            </details>
+          </template>
         </div>
       </section>
     </main>
@@ -197,17 +288,23 @@
 <script setup lang="ts">
 type AspectId = 'auto' | '16:9' | '9:16' | '1:1'
 
-interface HistoryItem {
+interface LibraryFolder {
   id: string
+  name: string
+  createdAt: number
+}
+
+interface LibraryClip {
+  id: string
+  folderId: string
   prompt: string
-  aspect?: AspectId
+  aspect: string
   width: number
   height: number
   steps: number
   turbo: boolean
   seed: number
-  thumbnail: string
+  hideThumbnail: boolean
-  videoUrl?: string
   createdAt: number
 }
 
@@ -225,6 +322,7 @@ const aspects = [
 ]
 
 const fileInput = ref<HTMLInputElement | null>(null)
+const player = ref<HTMLVideoElement | null>(null)
 const file = ref<File | null>(null)
 const preview = ref('')
 const dragging = ref(false)
@@ -235,6 +333,7 @@ const imageHeight = ref(0)
 const turbo = ref(true)
 const duration = ref(5)
 const seedInput = ref('random')
+const hideThumbnail = ref(false)
 const busy = ref(false)
 const progress = ref(0)
 const statusMessage = ref('Waiting for a still.')
@@ -243,11 +342,22 @@ const maxStep = ref(8)
 const elapsedMs = ref(0)
 const videoUrl = ref('')
 const jobId = ref('')
+const awaitingReveal = ref(false)
+const playerSize = ref({ width: 1344, height: 768 })
 const toasts = ref<{ id: string; message: string }[]>([])
-const history = ref<HistoryItem[]>([])
 const comfyOk = ref(false)
 const userName = ref('')
 const authEnabled = ref(false)
+const libraryLocked = ref(false)
+const libraryUnlocked = ref(true)
+const folders = ref<LibraryFolder[]>([])
+const clips = ref<LibraryClip[]>([])
+const folderId = ref('')
+const browseFolderId = ref('')
+const newFolderName = ref('')
+const unlockPassword = ref('')
+const currentPassword = ref('')
+const nextPassword = ref('')
 let timer: ReturnType<typeof setInterval> | null = null
 let source: EventSource | null = null
 
@@ -288,11 +398,35 @@ const autoHint = computed(() => {
   return `${size.width} × ${size.height} · from still`
 })
 
+const visibleClips = computed(() => clips.value.filter(clip => clip.folderId === browseFolderId.value))
+
+function clipsIn(id: string) {
+  return clips.value.filter(clip => clip.folderId === id)
+}
+
+function applyLibrary(data: { locked?: boolean; unlocked?: boolean; folders?: LibraryFolder[]; clips?: LibraryClip[] }) {
+  libraryLocked.value = Boolean(data.locked)
+  libraryUnlocked.value = data.unlocked !== false
+  folders.value = data.folders || []
+  clips.value = data.clips || []
+  if (!folderId.value || !folders.value.some(folder => folder.id === folderId.value)) {
+    folderId.value = folders.value[0]?.id || ''
+  }
+  if (!browseFolderId.value || !folders.value.some(folder => folder.id === browseFolderId.value)) {
+    browseFolderId.value = folderId.value
+  }
+}
+
+async function loadLibrary() {
+  const data = await $fetch<{ locked?: boolean; unlocked?: boolean; folders?: LibraryFolder[]; clips?: LibraryClip[] }>('/api/library')
+  applyLibrary(data)
+}
+
 onMounted(async () => {
-  history.value = JSON.parse(localStorage.getItem('aigen-history') || '[]')
   const [health, me] = await Promise.all([
     $fetch<{ comfy?: { ok?: boolean } }>('/api/health').catch(() => ({ comfy: { ok: false } })),
-    $fetch<{ user?: { name?: string; email?: string }; authEnabled?: boolean }>('/api/auth/me').catch(() => ({ user: null }))
+    $fetch<{ user?: { name?: string; email?: string }; authEnabled?: boolean }>('/api/auth/me').catch(() => ({ user: null })),
+    loadLibrary().catch(() => applyLibrary({ locked: false, unlocked: true, folders: [], clips: [] }))
   ])
   comfyOk.value = Boolean(health.comfy?.ok)
   userName.value = me.user?.name || me.user?.email || ''
@@ -357,23 +491,107 @@ function stopTimer() {
   timer = null
 }
 
-function persistHistory() {
+function rerun(item: LibraryClip) {
-  localStorage.setItem('aigen-history', JSON.stringify(history.value.slice(0, 12)))
-}
-
-function rerun(item: HistoryItem) {
   prompt.value = item.prompt
   turbo.value = item.turbo
   seedInput.value = String(item.seed)
-  aspect.value = item.aspect || 'auto'
+  aspect.value = (item.aspect as AspectId) || 'auto'
+  hideThumbnail.value = item.hideThumbnail
+  folderId.value = item.folderId
   toast('Settings restored. Drop the same still if it is not already loaded.')
 }
 
+async function addFolder() {
+  const name = newFolderName.value.trim()
+  if (!name) return
+  try {
+    const folder = await $fetch<LibraryFolder>('/api/library/folders', { method: 'POST', body: { name } })
+    newFolderName.value = ''
+    await loadLibrary()
+    folderId.value = folder.id
+    browseFolderId.value = folder.id
+  } catch (error: any) {
+    toast(error?.data?.statusMessage || error?.statusMessage || 'Could not create folder')
+  }
+}
+
+async function unlockLibrary() {
+  try {
+    const data = await $fetch('/api/library/unlock', { method: 'POST', body: { password: unlockPassword.value } })
+    unlockPassword.value = ''
+    applyLibrary(data)
+  } catch (error: any) {
+    toast(error?.data?.statusMessage || error?.statusMessage || 'Unlock failed')
+  }
+}
+
+async function lockLibrary() {
+  try {
+    applyLibrary(await $fetch('/api/library/lock', { method: 'POST' }))
+  } catch {
+    await loadLibrary()
+  }
+}
+
+async function savePassword() {
+  try {
+    const data = await $fetch('/api/library/password', {
+      method: 'PUT',
+      body: { password: nextPassword.value, currentPassword: currentPassword.value }
+    })
+    currentPassword.value = ''
+    nextPassword.value = ''
+    applyLibrary(data)
+    toast(libraryLocked.value ? 'Library password updated.' : 'Library password saved.')
+  } catch (error: any) {
+    toast(error?.data?.statusMessage || error?.statusMessage || 'Could not update password')
+  }
+}
+
+function openClip(item: LibraryClip) {
+  videoUrl.value = `/api/library/clips/${item.id}/video`
+  awaitingReveal.value = item.hideThumbnail
+  playerSize.value = { width: item.width, height: item.height }
+  browseFolderId.value = item.folderId
+  statusMessage.value = item.hideThumbnail ? 'Hidden clip ready' : 'Loaded from library'
+  progress.value = 100
+}
+
+async function removeClip(item: LibraryClip) {
+  try {
+    await $fetch(`/api/library/clips/${item.id}`, { method: 'DELETE' })
+    if (videoUrl.value.includes(item.id)) {
+      videoUrl.value = ''
+      awaitingReveal.value = false
+    }
+    await loadLibrary()
+  } catch (error: any) {
+    toast(error?.data?.statusMessage || 'Could not delete clip')
+  }
+}
+
+function onPlayed() {
+  awaitingReveal.value = false
+}
+
+function revealAndPlay() {
+  awaitingReveal.value = false
+  nextTick(() => {
+    player.value?.play().catch(() => null)
+  })
+}
+
 async function generate() {
   if (!file.value || !prompt.value.trim()) return
+  if (libraryLocked.value && !libraryUnlocked.value) {
+    toast('Unlock the library before generating.')
+    return
+  }
   busy.value = true
   progress.value = 1
   videoUrl.value = ''
+  awaitingReveal.value = false
+  playerSize.value = outputSize.value
   statusMessage.value = 'Uploading image...'
   startTimer()
   try {
@@ -387,13 +605,16 @@ async function generate() {
     body.append('steps', String(turbo.value ? 8 : 20))
     body.append('duration', String(duration.value))
     body.append('seed', seedInput.value || 'random')
-    const started = await $fetch<{ jobId: string; seed: number; width: number; height: number; steps: number; turbo: boolean }>('/api/generate', {
+    body.append('folderId', folderId.value)
+    body.append('hideThumbnail', String(hideThumbnail.value))
+    const started = await $fetch<{ jobId: string; seed: number; width: number; height: number; steps: number; turbo: boolean; hideThumbnail?: boolean }>('/api/generate', {
       method: 'POST',
       body
     })
     jobId.value = started.jobId
     maxStep.value = started.steps
-    listen(started.jobId, started)
+    playerSize.value = { width: started.width, height: started.height }
+    listen(started.jobId, started.hideThumbnail === true || hideThumbnail.value)
   } catch (error: any) {
     busy.value = false
     stopTimer()
@@ -403,7 +624,7 @@ async function generate() {
   }
 }
 
-function listen(id: string, meta: { seed: number; width: number; height: number; steps: number; turbo: boolean }) {
+function listen(id: string, hidden: boolean) {
   source?.close()
   source = new EventSource(`/api/generate/${id}/stream`)
   source.onmessage = (event) => {
@@ -413,25 +634,15 @@ function listen(id: string, meta: { seed: number; width: number; height: number;
     if (typeof payload.step === 'number') step.value = payload.step
     if (typeof payload.maxStep === 'number') maxStep.value = payload.maxStep
     if (payload.type === 'complete') {
-      const url = `/api/media?filename=${encodeURIComponent(payload.filename)}&subfolder=${encodeURIComponent(payload.subfolder || 'video')}&type=${encodeURIComponent(payload.mediaType || 'output')}`
+      const clipUrl = payload.clipId
-      videoUrl.value = url
+        ? `/api/library/clips/${payload.clipId}/video`
+        : `/api/media?filename=${encodeURIComponent(payload.filename)}&subfolder=${encodeURIComponent(payload.subfolder || 'video')}&type=${encodeURIComponent(payload.mediaType || 'output')}`
+      videoUrl.value = clipUrl
+      awaitingReveal.value = Boolean(payload.hideThumbnail || hidden)
       busy.value = false
       stopTimer()
       source?.close()
-      history.value.unshift({
+      loadLibrary().catch(() => null)
-        id,
-        prompt: prompt.value.trim(),
-        aspect: aspect.value,
-        width: meta.width,
-        height: meta.height,
-        steps: meta.steps,
-        turbo: meta.turbo,
-        seed: meta.seed,
-        thumbnail: preview.value,
-        videoUrl: url,
-        createdAt: Date.now()
-      })
-      persistHistory()
     }
     if (payload.type === 'error') {
       busy.value = false

server/api/generate.post.ts

@@ -34,9 +34,31 @@ export default defineEventHandler(async (event) => {
     ? Number(fields.seed)
     : Math.floor(Math.random() * 2_147_483_647)
   const length = frameLength(Number(fields.duration || 5))
+  const hideThumbnail = fields.hideThumbnail === 'true'
+  assertLibraryAccess(event)
+  const library = publicLibrary(event)
+  const folderId = library.folders.some(folder => folder.id === fields.folderId)
+    ? fields.folderId
+    : library.folders[0]?.id
+  if (!folderId) {
+    throw createError({ statusCode: 400, statusMessage: 'Create a library folder before generating' })
+  }
 
   const job = createJob()
   job.maxStep = steps
+  job.hideThumbnail = hideThumbnail
+  job.library = {
+    folderId,
+    hideThumbnail,
+    prompt,
+    aspect: fields.aspect || 'auto',
+    width,
+    height,
+    steps,
+    turbo,
+    seed,
+    thumb: image.data
+  }
   emitJob(job, { type: 'status', message: 'Uploading image...', progress: 2 })
 
   void runGeneration(job, { prompt, image, width, height, steps, seed, turbo, length }).catch((error) => {
@@ -54,7 +76,9 @@ export default defineEventHandler(async (event) => {
     height,
     aspect: fields.aspect || 'auto',
     steps,
-    turbo
+    turbo,
+    folderId,
+    hideThumbnail
   }
 })
 

server/api/library/clips/[id].delete.ts

@@ -0,0 +1,6 @@
+export default defineEventHandler(async (event) => {
+  assertLibraryAccess(event)
+  const id = getRouterParam(event, 'id')
+  await deleteClip(String(id))
+  return { ok: true }
+})

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

@@ -0,0 +1,19 @@
+import { existsSync, readFileSync } from 'node:fs'
+
+export default defineEventHandler((event) => {
+  assertLibraryAccess(event)
+  const id = String(getRouterParam(event, 'id') || '')
+  const clip = getClip(id)
+  if (clip.hideThumbnail) {
+    throw createError({ statusCode: 404, statusMessage: 'Thumbnail hidden' })
+  }
+  const path = clipThumbPath(clip.id)
+  if (!existsSync(path)) {
+    throw createError({ statusCode: 404, statusMessage: 'Thumbnail not found' })
+  }
+  const buf = readFileSync(path)
+  const png = buf[0] === 0x89 && buf[1] === 0x50
+  setHeader(event, 'Content-Type', png ? 'image/png' : 'image/jpeg')
+  setHeader(event, 'Cache-Control', 'private, max-age=3600')
+  return buf
+})

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

@@ -0,0 +1,15 @@
+import { existsSync, readFileSync } from 'node:fs'
+
+export default defineEventHandler((event) => {
+  assertLibraryAccess(event)
+  const id = String(getRouterParam(event, 'id') || '')
+  const clip = getClip(id)
+  const path = clipVideoPath(clip.id)
+  if (!existsSync(path)) {
+    throw createError({ statusCode: 404, statusMessage: 'Video file is missing' })
+  }
+  setHeader(event, 'Content-Type', 'video/mp4')
+  setHeader(event, 'Content-Disposition', `inline; filename="${clip.id}.mp4"`)
+  setHeader(event, 'Cache-Control', 'private, max-age=3600')
+  return readFileSync(path)
+})

server/api/library/folders.post.ts

@@ -0,0 +1,6 @@
+export default defineEventHandler(async (event) => {
+  assertLibraryAccess(event)
+  const body = await readBody<{ name?: string }>(event)
+  const folder = await createFolder(String(body?.name || ''))
+  return folder
+})

server/api/library/folders/[id].delete.ts

@@ -0,0 +1,5 @@
+export default defineEventHandler(async (event) => {
+  assertLibraryAccess(event)
+  const id = getRouterParam(event, 'id')
+  return await deleteFolder(String(id))
+})

server/api/library/folders/[id].patch.ts

@@ -0,0 +1,6 @@
+export default defineEventHandler(async (event) => {
+  assertLibraryAccess(event)
+  const id = getRouterParam(event, 'id')
+  const body = await readBody<{ name?: string }>(event)
+  return await renameFolder(String(id), String(body?.name || ''))
+})

server/api/library/index.get.ts

@@ -0,0 +1,3 @@
+export default defineEventHandler((event) => {
+  return publicLibrary(event)
+})

server/api/library/lock.post.ts

@@ -0,0 +1,4 @@
+export default defineEventHandler((event) => {
+  clearLibraryUnlock(event)
+  return publicLibrary(event)
+})

server/api/library/password.put.ts

@@ -0,0 +1,14 @@
+export default defineEventHandler(async (event) => {
+  const body = await readBody<{ password?: string; currentPassword?: string }>(event)
+  if (isLibraryLocked() && !(await verifyLibraryPassword(String(body?.currentPassword || '')))) {
+    throw createError({ statusCode: 401, statusMessage: 'Current library password is incorrect' })
+  }
+  const next = String(body?.password || '').trim()
+  if (next && next.length < 4) {
+    throw createError({ statusCode: 400, statusMessage: 'Use at least 4 characters, or leave blank to remove the password' })
+  }
+  const version = await setLibraryPassword(next || null)
+  if (next) setLibraryUnlock(event, version)
+  else clearLibraryUnlock(event)
+  return publicLibrary(event)
+})

server/api/library/unlock.post.ts

@@ -0,0 +1,12 @@
+export default defineEventHandler(async (event) => {
+  const body = await readBody<{ password?: string }>(event)
+  const password = String(body?.password || '')
+  if (!password) {
+    throw createError({ statusCode: 400, statusMessage: 'Password is required' })
+  }
+  if (!(await verifyLibraryPassword(password))) {
+    throw createError({ statusCode: 401, statusMessage: 'Incorrect library password' })
+  }
+  setLibraryUnlock(event, currentPasswordVersion())
+  return publicLibrary(event)
+})

server/utils/jobs.ts

@@ -10,6 +10,8 @@ export interface JobEvent {
   filename?: string
   subfolder?: string
   mediaType?: string
+  clipId?: string
+  hideThumbnail?: boolean
   error?: string
   elapsedMs?: number
 }
@@ -25,6 +27,20 @@ export interface Job {
   maxStep: number
   startedAt: number
   video?: { filename: string; subfolder: string; type: string }
+  clipId?: string
+  hideThumbnail?: boolean
+  library?: {
+    folderId: string
+    hideThumbnail: boolean
+    prompt: string
+    aspect: string
+    width: number
+    height: number
+    steps: number
+    turbo: boolean
+    seed: number
+    thumb?: Buffer
+  }
   error?: string
   events: JobEvent[]
   listeners: Set<(event: JobEvent) => void>

server/utils/library.ts

@@ -0,0 +1,280 @@
+import { existsSync, mkdirSync, readFileSync, renameSync, rmSync, writeFileSync } from 'node:fs'
+import { join } from 'node:path'
+import { randomBytes, scrypt, timingSafeEqual } from 'node:crypto'
+import { promisify } from 'node:util'
+import type { H3Event } from 'h3'
+
+const scryptAsync = promisify(scrypt)
+
+export interface LibraryFolder {
+  id: string
+  name: string
+  createdAt: number
+}
+
+export interface LibraryClip {
+  id: string
+  folderId: string
+  prompt: string
+  aspect: string
+  width: number
+  height: number
+  steps: number
+  turbo: boolean
+  seed: number
+  hideThumbnail: boolean
+  createdAt: number
+}
+
+interface Catalog {
+  passwordHash: string | null
+  folders: LibraryFolder[]
+  clips: LibraryClip[]
+}
+
+function libraryRoot() {
+  const config = useRuntimeConfig()
+  return (config.libraryDir || process.env.LIBRARY_DIR || '/data/library').replace(/\/$/, '')
+}
+
+function catalogPath() {
+  return join(libraryRoot(), 'catalog.json')
+}
+
+function ensureRoot() {
+  const root = libraryRoot()
+  mkdirSync(join(root, 'files'), { recursive: true })
+  return root
+}
+
+function emptyCatalog(): Catalog {
+  return {
+    passwordHash: null,
+    folders: [{ id: 'inbox', name: 'Inbox', createdAt: Date.now() }],
+    clips: []
+  }
+}
+
+let writeChain = Promise.resolve()
+
+function readCatalog(): Catalog {
+  ensureRoot()
+  if (!existsSync(catalogPath())) {
+    const created = emptyCatalog()
+    writeFileSync(catalogPath(), JSON.stringify(created, null, 2))
+    return created
+  }
+  try {
+    const parsed = JSON.parse(readFileSync(catalogPath(), 'utf8')) as Catalog
+    if (!Array.isArray(parsed.folders) || !parsed.folders.length) {
+      parsed.folders = emptyCatalog().folders
+    }
+    parsed.clips = Array.isArray(parsed.clips) ? parsed.clips : []
+    parsed.passwordHash = parsed.passwordHash || null
+    return parsed
+  } catch {
+    return emptyCatalog()
+  }
+}
+
+function writeCatalog(catalog: Catalog) {
+  ensureRoot()
+  const tmp = catalogPath() + '.tmp'
+  writeFileSync(tmp, JSON.stringify(catalog, null, 2))
+  renameSync(tmp, catalogPath())
+}
+
+function mutate<T>(fn: (catalog: Catalog) => T): Promise<T> {
+  const run = writeChain.then(() => {
+    const catalog = readCatalog()
+    const result = fn(catalog)
+    writeCatalog(catalog)
+    return result
+  })
+  writeChain = run.then(() => undefined, () => undefined)
+  return run
+}
+
+export function passwordVersion(hash: string | null) {
+  return hash ? hash.slice(-24) : 'open'
+}
+
+export function currentPasswordVersion() {
+  return passwordVersion(readCatalog().passwordHash)
+}
+
+export function isLibraryLocked() {
+  return Boolean(readCatalog().passwordHash)
+}
+
+export function libraryUnlocked(event: H3Event) {
+  const catalog = readCatalog()
+  if (!catalog.passwordHash) return true
+  return getLibraryUnlockVersion(event) === passwordVersion(catalog.passwordHash)
+}
+
+export function assertLibraryAccess(event: H3Event) {
+  if (libraryUnlocked(event)) return readCatalog()
+  throw createError({ statusCode: 403, statusMessage: 'Library is locked' })
+}
+
+export async function hashLibraryPassword(password: string) {
+  const salt = randomBytes(16)
+  const hash = await scryptAsync(password, salt, 64) as Buffer
+  return `scrypt:${salt.toString('hex')}:${hash.toString('hex')}`
+}
+
+export async function verifyLibraryPassword(password: string) {
+  const stored = readCatalog().passwordHash
+  if (!stored) return true
+  const parts = stored.split(':')
+  if (parts.length !== 3 || parts[0] !== 'scrypt') return false
+  const salt = Buffer.from(parts[1], 'hex')
+  const expected = Buffer.from(parts[2], 'hex')
+  const actual = await scryptAsync(password, salt, 64) as Buffer
+  return actual.length === expected.length && timingSafeEqual(actual, expected)
+}
+
+export function publicLibrary(event: H3Event) {
+  const catalog = readCatalog()
+  const locked = Boolean(catalog.passwordHash)
+  const unlocked = libraryUnlocked(event)
+  if (locked && !unlocked) {
+    return { locked: true, unlocked: false, folders: [] as LibraryFolder[], clips: [] as LibraryClip[] }
+  }
+  return {
+    locked,
+    unlocked: true,
+    folders: catalog.folders,
+    clips: catalog.clips
+  }
+}
+
+export function createFolder(name: string) {
+  const trimmed = name.trim().slice(0, 80)
+  if (!trimmed) throw createError({ statusCode: 400, statusMessage: 'Folder name is required' })
+  return mutate((catalog) => {
+    if (catalog.folders.some(folder => folder.name.toLowerCase() === trimmed.toLowerCase())) {
+      throw createError({ statusCode: 409, statusMessage: 'A folder with that name already exists' })
+    }
+    const folder: LibraryFolder = { id: crypto.randomUUID(), name: trimmed, createdAt: Date.now() }
+    catalog.folders.push(folder)
+    return folder
+  })
+}
+
+export function renameFolder(id: string, name: string) {
+  const trimmed = name.trim().slice(0, 80)
+  if (!trimmed) throw createError({ statusCode: 400, statusMessage: 'Folder name is required' })
+  return mutate((catalog) => {
+    const folder = catalog.folders.find(item => item.id === id)
+    if (!folder) throw createError({ statusCode: 404, statusMessage: 'Folder not found' })
+    folder.name = trimmed
+    return folder
+  })
+}
+
+export function deleteFolder(id: string) {
+  return mutate((catalog) => {
+    if (catalog.folders.length <= 1) {
+      throw createError({ statusCode: 400, statusMessage: 'Keep at least one library folder' })
+    }
+    const folder = catalog.folders.find(item => item.id === id)
+    if (!folder) throw createError({ statusCode: 404, statusMessage: 'Folder not found' })
+    const clips = catalog.clips.filter(clip => clip.folderId === id)
+    catalog.folders = catalog.folders.filter(item => item.id !== id)
+    catalog.clips = catalog.clips.filter(clip => clip.folderId !== id)
+    const fallback = catalog.folders[0].id
+    for (const clip of clips) {
+      rmSync(clipDir(clip.id), { recursive: true, force: true })
+    }
+    return { fallbackFolderId: fallback }
+  })
+}
+
+export async function setLibraryPassword(password: string | null) {
+  const hash = password && password.length ? await hashLibraryPassword(password) : null
+  return mutate((catalog) => {
+    catalog.passwordHash = hash
+    return passwordVersion(hash)
+  })
+}
+
+function clipDir(id: string) {
+  return join(libraryRoot(), 'files', id)
+}
+
+export function clipVideoPath(id: string) {
+  return join(clipDir(id), 'video.mp4')
+}
+
+export function clipThumbPath(id: string) {
+  return join(clipDir(id), 'thumb')
+}
+
+export async function saveClip(params: {
+  folderId: string
+  prompt: string
+  aspect: string
+  width: number
+  height: number
+  steps: number
+  turbo: boolean
+  seed: number
+  hideThumbnail: boolean
+  video: Buffer
+  thumb?: Buffer | null
+}) {
+  const catalog = readCatalog()
+  const folder = catalog.folders.find(item => item.id === params.folderId) || catalog.folders[0]
+  if (!folder) throw createError({ statusCode: 400, statusMessage: 'No library folder available' })
+  const clip: LibraryClip = {
+    id: crypto.randomUUID(),
+    folderId: folder.id,
+    prompt: params.prompt,
+    aspect: params.aspect,
+    width: params.width,
+    height: params.height,
+    steps: params.steps,
+    turbo: params.turbo,
+    seed: params.seed,
+    hideThumbnail: params.hideThumbnail,
+    createdAt: Date.now()
+  }
+  mkdirSync(clipDir(clip.id), { recursive: true })
+  writeFileSync(clipVideoPath(clip.id), params.video)
+  if (!params.hideThumbnail && params.thumb?.length) {
+    writeFileSync(clipThumbPath(clip.id), params.thumb)
+  }
+  await mutate((next) => {
+    next.clips.unshift(clip)
+  })
+  return clip
+}
+
+export function getClip(id: string) {
+  const clip = readCatalog().clips.find(item => item.id === id)
+  if (!clip) throw createError({ statusCode: 404, statusMessage: 'Clip not found' })
+  return clip
+}
+
+export function deleteClip(id: string) {
+  return mutate((catalog) => {
+    const clip = catalog.clips.find(item => item.id === id)
+    if (!clip) throw createError({ statusCode: 404, statusMessage: 'Clip not found' })
+    catalog.clips = catalog.clips.filter(item => item.id !== id)
+    rmSync(clipDir(id), { recursive: true, force: true })
+    return clip
+  })
+}
+
+export async function downloadComfyVideo(video: { filename: string; subfolder: string; type: string }) {
+  const params = new URLSearchParams({
+    filename: video.filename,
+    subfolder: video.subfolder,
+    type: video.type
+  })
+  const res = await comfyFetch(`/view?${params.toString()}`)
+  if (!res.ok) throw new Error('Failed to fetch completed video from ComfyUI')
+  return Buffer.from(await res.arrayBuffer())
+}

server/utils/session.ts

@@ -9,6 +9,7 @@ export interface SessionUser {
 
 const COOKIE = 'aigen_session'
 const STATE_COOKIE = 'aigen_oauth_state'
+const LIBRARY_COOKIE = 'aigen_library'
 
 function secret() {
   const config = useRuntimeConfig()
@@ -78,6 +79,18 @@ export function authEnabled() {
   return Boolean(config.public.authEnabled && config.oidcClientId && config.oidcClientSecret)
 }
 
+export function setLibraryUnlock(event: H3Event, version: string) {
+  setCookie(event, LIBRARY_COOKIE, seal({ version }), cookieOpts(event))
+}
+
+export function getLibraryUnlockVersion(event: H3Event) {
+  return unseal<{ version?: string }>(getCookie(event, LIBRARY_COOKIE))?.version || null
+}
+
+export function clearLibraryUnlock(event: H3Event) {
+  deleteCookie(event, LIBRARY_COOKIE, { path: '/' })
+}
+
 export function publicBaseUrl(event: H3Event) {
   const proto = getRequestHeader(event, 'x-forwarded-proto') || getRequestProtocol(event)
   const host = getRequestHeader(event, 'x-forwarded-host') || getRequestHost(event)

server/utils/watch.ts

@@ -1,4 +1,4 @@
-import { NODE_LABELS } from '~/server/utils/workflow'
+import { NODE_LABELS, isEncodingNode } from '~/server/utils/workflow'
 import type { Job } from '~/server/utils/jobs'
 
 function classifyError(message: string) {
@@ -39,6 +39,34 @@ export async function watchComfyJob(job: Job) {
       return
     }
     job.video = video
+    if (job.library) {
+      emitJob(job, { type: 'status', message: 'Saving to library...', progress: 98 })
+      try {
+        const buffer = await downloadComfyVideo(video)
+        const clip = await saveClip({
+          folderId: job.library.folderId,
+          prompt: job.library.prompt,
+          aspect: job.library.aspect,
+          width: job.library.width,
+          height: job.library.height,
+          steps: job.library.steps,
+          turbo: job.library.turbo,
+          seed: job.library.seed,
+          hideThumbnail: job.library.hideThumbnail,
+          video: buffer,
+          thumb: job.library.hideThumbnail ? null : job.library.thumb
+        })
+        job.clipId = clip.id
+        job.hideThumbnail = clip.hideThumbnail
+        job.library.thumb = undefined
+      } catch (error) {
+        const message = error instanceof Error ? error.message : String(error)
+        job.status = 'error'
+        job.error = `Video generated but library save failed: ${message}`
+        emitJob(job, { type: 'error', error: job.error, message: job.error })
+        return
+      }
+    }
     job.status = 'complete'
     emitJob(job, {
       type: 'complete',
@@ -46,7 +74,9 @@ export async function watchComfyJob(job: Job) {
       progress: 100,
       filename: video.filename,
       subfolder: video.subfolder,
-      mediaType: video.type
+      mediaType: video.type,
+      clipId: job.clipId,
+      hideThumbnail: job.hideThumbnail
     })
   }
 
@@ -109,7 +139,7 @@ export async function watchComfyJob(job: Job) {
         return
       }
       const label = NODE_LABELS[node] || `Running node ${node}`
-      const encoding = node === '16' || node === '17'
+      const encoding = isEncodingNode(node)
       emitJob(job, {
         type: 'executing',
         node,