Ship duration control, hidden previews, job resume, and desktop file purge.

The slider never left this machine, so deploy the generate UI with separate input/output hide toggles, reconnect in-progress jobs after refresh, and delete Comfy input/output files after they are saved to the library.

.env.example

@@ -1,7 +1,9 @@
 PORT=3000
 HOST=0.0.0.0
-COMFY_HOST=http://192.168.77.7:8188
+# ComfyUI on the Windows desktop. 8188 is often taken (SSH / other Comfy).
-COMFY_PORT=8188
+# The host agent discovers the live instance (usually 8189) and proxies it on 8198.
+COMFY_HOST=http://192.168.77.7:8198
+COMFY_PORT=8198
 # Optional: command used when this server runs on the Comfy host
 COMFY_LAUNCH_CMD=
 # Windows host agent (scripts/comfy-host-agent.mjs) so Coolify can start Comfy remotely
@@ -17,10 +19,11 @@ NUXT_OIDC_AUTHORIZE_URL=https://auth.carrgarage.com/application/o/authorize/
 NUXT_OIDC_TOKEN_URL=http://192.168.77.2:9000/application/o/token/
 LIBRARY_DIR=/data/library
 
-# Private clone (xaigen): password login, isolated library, delete Comfy files after save
+# Private clone (xaigen): password login, isolated library, Comfy prefix
 # AUTH_MODE=password
 # NUXT_PUBLIC_INSTANCE_NAME=xAIGen
 # AUTH_USERNAME=
 # AUTH_PASSWORD=
-# PURGE_COMFY_OUTPUTS=true
 # COMFY_FILENAME_PREFIX=video/xAIGen
+# Desktop Comfy files are deleted after a successful library save (set false to keep them)
+# PURGE_COMFY_OUTPUTS=true

assets/css/main.css

@@ -51,6 +51,42 @@ body {
   }
 }
 
+.aigen-slider {
+  -webkit-appearance: none;
+  appearance: none;
+  height: 6px;
+  border-radius: 999px;
+  background: #27272a;
+  outline: none;
+}
+
+.aigen-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 16px;
+  height: 16px;
+  border-radius: 999px;
+  background: #fbbf24;
+  border: 0;
+  cursor: pointer;
+  box-shadow: 0 0 12px rgba(251, 191, 36, 0.45);
+}
+
+.aigen-slider::-moz-range-track {
+  height: 6px;
+  border-radius: 999px;
+  background: #27272a;
+}
+
+.aigen-slider::-moz-range-thumb {
+  width: 16px;
+  height: 16px;
+  border-radius: 999px;
+  background: #fbbf24;
+  border: 0;
+  cursor: pointer;
+}
+
 .sensitive-glow {
   animation: sensitive-pulse 2.2s ease-in-out infinite;
   background:

components/ImagePickerModal.vue

@@ -25,24 +25,25 @@
         </div>
 
         <form v-if="current && current.protected && !current.unlocked" class="mt-6 space-y-3" @submit.prevent="unlock">
-          <p class="text-sm text-zinc-400">This folder is password protected.</p>
+          <p class="text-sm text-zinc-400">This folder is locked. You can still upload a new still to generate into it; unlock to browse saved images.</p>
           <input v-model="password" type="password" class="w-full rounded-xl border border-white/10 bg-zinc-950 px-3 py-2 text-sm" placeholder="Folder password">
           <button type="submit" class="rounded-xl bg-amber-400 px-4 py-2 text-sm font-semibold text-zinc-950">Unlock folder</button>
         </form>
 
-        <template v-else>
+        <div
-          <div
+          class="mt-5 cursor-pointer rounded-2xl border border-dashed border-white/15 bg-zinc-950/40 p-6 text-center transition hover:border-amber-300/50"
-            class="mt-5 cursor-pointer rounded-2xl border border-dashed border-white/15 bg-zinc-950/40 p-6 text-center transition hover:border-amber-300/50"
+          :class="{ 'border-amber-300/70 bg-amber-400/5': dragging }"
-            :class="{ 'border-amber-300/70 bg-amber-400/5': dragging }"
+          @dragover.prevent="dragging = true"
-            @dragover.prevent="dragging = true"
+          @dragleave.prevent="dragging = false"
-            @dragleave.prevent="dragging = false"
+          @drop.prevent="onDrop"
-            @drop.prevent="onDrop"
+          @click="fileInput?.click()"
-            @click="fileInput?.click()"
+        >
-          >
+          <p class="font-medium">Upload a new still</p>
-            <p class="font-medium">Upload a new still</p>
+          <p class="mt-1 text-sm text-zinc-500">PNG, JPG, or WEBP · saved into {{ current?.name || 'this folder' }}</p>
-            <p class="mt-1 text-sm text-zinc-500">PNG, JPG, or WEBP · saved into {{ current?.name || 'this folder' }}</p>
+          <input ref="fileInput" type="file" accept="image/*" class="hidden" @change="onFile">
-            <input ref="fileInput" type="file" accept="image/*" class="hidden" @change="onFile">
+        </div>
-          </div>
+
+        <template v-if="current && (!current.protected || current.unlocked)">
 
           <p v-if="!visibleStills.length && !visibleClipThumbs.length" class="mt-6 text-sm text-zinc-500">No uploaded stills in this folder yet.</p>
           <div v-if="visibleStills.length || visibleClipThumbs.length" class="mt-5 grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4">

components/SettingsModal.vue

@@ -5,7 +5,7 @@
         <div class="flex items-start justify-between gap-3">
           <div>
             <h2 class="font-display text-2xl font-bold">Settings</h2>
-            <p class="mt-1 text-sm text-zinc-400">Library folders, passwords, and thumbnail defaults for this account.</p>
+            <p class="mt-1 text-sm text-zinc-400">Library folders, passwords, and image-preview defaults for this account.</p>
           </div>
           <button type="button" class="rounded-full border border-white/10 px-3 py-1 text-sm text-zinc-400 hover:text-white" @click="emit('close')">Close</button>
         </div>
@@ -45,7 +45,7 @@
 
             <div class="grid gap-2 sm:grid-cols-2">
               <label class="flex cursor-pointer items-center justify-between gap-3 rounded-xl border border-white/10 px-3 py-2 text-sm">
-                <span>Thumbnail default</span>
+                <span>Show output preview</span>
                 <input
                   type="checkbox"
                   class="peer sr-only"
@@ -96,7 +96,7 @@
               </button>
             </form>
             <p v-if="folder.protected && folder.unlocked" class="text-xs text-emerald-300">Unlocked in this session.</p>
-            <p v-else-if="folder.protected" class="text-xs text-amber-200">Locked · clips and stills stay hidden until you unlock it.</p>
+            <p v-else-if="folder.protected" class="text-xs text-amber-200">Locked · you can generate into it, but clips stay hidden until you unlock.</p>
             </template>
           </div>
 

nuxt.config.ts

@@ -40,7 +40,7 @@ export default defineNuxtConfig({
     authMode: process.env.NUXT_AUTH_MODE || process.env.AUTH_MODE || '',
     authUsername: process.env.AUTH_USERNAME || '',
     authPassword: process.env.AUTH_PASSWORD || '',
-    purgeComfyOutputs: process.env.PURGE_COMFY_OUTPUTS === 'true',
+    purgeComfyOutputs: process.env.PURGE_COMFY_OUTPUTS !== 'false',
     comfyFilenamePrefix: process.env.COMFY_FILENAME_PREFIX || 'video/MiniMax_H3',
     public: {
       authEnabled: process.env.NUXT_PUBLIC_AUTH_ENABLED === 'true',

pages/index.vue

@@ -41,10 +41,16 @@
           @drop.prevent="onDrop"
           @click="pickerOpen = true"
         >
-          <div v-if="preview" class="relative">
+          <div v-if="preview && !hideInputPreview" class="relative">
             <img :src="preview" alt="Source still" class="max-h-72 w-full rounded-xl object-contain bg-black/40">
             <button type="button" class="absolute right-3 top-3 rounded-full bg-zinc-950/80 px-3 py-1 text-xs" @click.stop="resetImage">Reset</button>
           </div>
+          <div v-else-if="preview && hideInputPreview" class="relative flex min-h-44 flex-col items-center justify-center text-center">
+            <span class="sensitive-glow absolute inset-3 rounded-xl" />
+            <p class="relative font-medium">Still loaded · preview hidden</p>
+            <p class="relative mt-1 text-sm text-zinc-500">Toggle Hide input still off to show it</p>
+            <button type="button" class="relative mt-3 rounded-full bg-zinc-950/80 px-3 py-1 text-xs" @click.stop="resetImage">Reset</button>
+          </div>
           <div v-else class="flex min-h-44 flex-col items-center justify-center text-center">
             <p class="font-medium">Choose an image</p>
             <p class="mt-1 text-sm text-zinc-500">Browse the library or upload a new PNG, JPG, or WEBP</p>
@@ -97,21 +103,29 @@
               >
             </label>
             <form v-if="currentFolder?.protected && !currentFolder.unlocked" class="space-y-2" @submit.prevent="unlockFolder(folderId)">
-              <p class="text-sm text-zinc-400">Unlock this folder to generate into it.</p>
+              <p class="text-sm text-zinc-400">This folder is locked. You can still generate into it; unlock to view clips.</p>
               <div class="flex gap-2">
                 <input v-model="unlockPassword" type="password" class="min-w-0 flex-1 rounded-xl border border-white/10 bg-zinc-950 px-3 py-2 text-sm" placeholder="Folder password">
                 <button type="submit" class="rounded-xl bg-amber-400 px-3 py-2 text-sm font-semibold text-zinc-950">Unlock</button>
               </div>
             </form>
             <label class="flex cursor-pointer items-center justify-between gap-3 rounded-2xl border border-white/10 bg-zinc-950/40 px-4 py-3 text-sm">
-              <span class="font-medium text-zinc-200">Thumbnail</span>
+              <span class="font-medium text-zinc-200">Hide input still</span>
               <span class="relative inline-flex h-6 w-11 shrink-0 items-center">
-                <input v-model="showThumbnail" type="checkbox" class="peer sr-only" role="switch">
+                <input v-model="hideInputPreview" type="checkbox" class="peer sr-only" role="switch">
                 <span class="absolute inset-0 rounded-full bg-zinc-700 transition peer-checked:bg-amber-400" />
                 <span class="absolute left-0.5 top-0.5 h-5 w-5 rounded-full bg-white transition peer-checked:translate-x-5" />
               </span>
             </label>
-            <p class="text-xs text-zinc-500">Defaults to this folder’s thumbnail setting whenever you pick a new still. You can override it for this job.</p>
+            <label class="flex cursor-pointer items-center justify-between gap-3 rounded-2xl border border-white/10 bg-zinc-950/40 px-4 py-3 text-sm">
+              <span class="font-medium text-zinc-200">Hide output preview</span>
+              <span class="relative inline-flex h-6 w-11 shrink-0 items-center">
+                <input v-model="hideThumbnail" type="checkbox" class="peer sr-only" role="switch">
+                <span class="absolute inset-0 rounded-full bg-zinc-700 transition peer-checked:bg-amber-400" />
+                <span class="absolute left-0.5 top-0.5 h-5 w-5 rounded-full bg-white transition peer-checked:translate-x-5" />
+              </span>
+            </label>
+            <p class="text-xs text-zinc-500">Output preview hides library thumbs and autoplay. Click the player to reveal; click anywhere else on the page to hide it again. Folder default applies to output preview when you pick a new still.</p>
           </div>
         </div>
 
@@ -126,13 +140,37 @@
               </div>
             </div>
             <div class="grid grid-cols-2 gap-3">
-              <label class="text-sm">
+              <div class="text-sm">
                 <span class="mb-1 block text-zinc-400">Duration</span>
-                <select v-model.number="duration" class="w-full rounded-xl border border-white/10 bg-zinc-950 px-3 py-2">
+                <div class="relative">
-                  <option :value="5">5 seconds</option>
+                  <input
-                  <option :value="10">10 seconds</option>
+                    v-model="durationDraft"
-                </select>
+                    type="text"
-              </label>
+                    inputmode="decimal"
+                    class="w-full rounded-xl border border-white/10 bg-zinc-950 px-3 py-2 pr-8 cursor-ns-resize outline-none ring-amber-300/40 placeholder:text-zinc-600 focus:cursor-text focus:ring-2"
+                    :class="{ 'select-none caret-transparent': durationScrubbing }"
+                    placeholder="seconds"
+                    autocomplete="off"
+                    spellcheck="false"
+                    @blur="commitDuration"
+                    @keydown.enter.prevent="commitDuration"
+                    @pointerdown="onDurationPointerDown"
+                  >
+                  <span class="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-xs text-zinc-500">s</span>
+                </div>
+                <input
+                  class="aigen-slider mt-3 w-full"
+                  type="range"
+                  :min="DURATION_SLIDER_MIN"
+                  :max="DURATION_SLIDER_MAX"
+                  :step="0.1"
+                  :value="durationSlider"
+                  :style="{ background: `linear-gradient(to right, #fbbf24 ${durationSliderPct}%, #27272a ${durationSliderPct}%)` }"
+                  aria-label="Duration in seconds"
+                  @input="onDurationSlider"
+                >
+                <p class="mt-1 text-[11px] text-zinc-500">Type any length, use the slider, or drag up/down in the box.</p>
+              </div>
               <label class="text-sm">
                 <span class="mb-1 block text-zinc-400">Seed</span>
                 <input v-model="seedInput" class="w-full rounded-xl border border-white/10 bg-zinc-950 px-3 py-2" placeholder="random">
@@ -145,7 +183,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() || !currentFolder?.unlocked"
+            :disabled="busy || !file || !prompt.trim() || !folderId"
             @click="generate"
           >
             {{ busy ? 'Generating…' : 'Generate Video' }}
@@ -162,7 +200,7 @@
       </section>
 
       <section class="space-y-5">
-        <div class="glass rounded-3xl p-5 sm:p-6">
+        <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>
@@ -178,11 +216,11 @@
           </div>
           <div
             class="relative mt-5 overflow-hidden rounded-2xl bg-black/50"
-            :class="{ 'sensitive-glow': awaitingReveal }"
+            :class="{ 'sensitive-glow': awaitingReveal || lockedSave }"
             :style="{ aspectRatio: `${playerSize.width} / ${playerSize.height}` }"
           >
             <video
-              v-if="videoUrl"
+              v-if="videoUrl && !lockedSave"
               ref="player"
               :src="videoUrl"
               class="h-full w-full bg-black"
@@ -194,20 +232,27 @@
               @play="onPlayed"
             />
             <button
-              v-if="awaitingReveal"
+              v-if="awaitingReveal && !lockedSave"
               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>
+              <span class="text-sm text-amber-100/80">Click to play · preview hidden</span>
             </button>
+            <div
+              v-else-if="lockedSave"
+              class="absolute inset-0 flex flex-col items-center justify-center gap-2 px-6 text-center text-amber-100"
+            >
+              <span class="font-display text-lg font-bold">Saved to a locked folder</span>
+              <span class="text-sm text-amber-100/80">Unlock that folder in the library to view this clip</span>
+            </div>
             <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 && !awaitingReveal"
+            v-if="videoUrl && !awaitingReveal && !lockedSave"
             :href="videoUrl"
             :download="`${outputDownloadName}.mp4`"
             class="mt-4 inline-flex rounded-2xl border border-white/15 px-4 py-2 text-sm hover:border-amber-300/50"
@@ -230,7 +275,7 @@
           </div>
 
           <form v-if="browseFolder?.protected && !browseFolder.unlocked" class="mt-4 space-y-3" @submit.prevent="unlockFolder(browseFolderId)">
-            <p class="text-sm text-zinc-400">This folder is password protected.</p>
+            <p class="text-sm text-zinc-400">This folder is locked. Unlock to view {{ browseFolder.clipCount || 0 }} clip{{ browseFolder.clipCount === 1 ? '' : 's' }}.</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="Folder password">
             <button type="submit" class="w-full rounded-xl bg-amber-400 px-4 py-2 font-semibold text-zinc-950">Unlock</button>
           </form>
@@ -246,7 +291,7 @@
                 @click="browseFolderId = folder.id"
               >
                 {{ folder.name }}
-                <span class="text-zinc-500">({{ clipsIn(folder.id).length }})</span>
+                <span class="text-zinc-500">({{ folder.unlocked ? clipsIn(folder.id).length : folder.clipCount }})</span>
                 <span v-if="folder.protected">{{ folder.unlocked ? '' : ' · lock' }}</span>
               </button>
             </div>
@@ -343,6 +388,7 @@ interface LibraryFolder {
   thumbnailDefault: boolean
   protected: boolean
   unlocked: boolean
+  clipCount?: number
 }
 
 interface LibraryStill {
@@ -384,6 +430,7 @@ const aspects = [
 ]
 
 const player = ref<HTMLVideoElement | null>(null)
+const outputPanel = ref<HTMLElement | null>(null)
 const file = ref<File | null>(null)
 const preview = ref('')
 const dragging = ref(false)
@@ -394,13 +441,21 @@ const aspect = ref<AspectId>('auto')
 const imageWidth = ref(0)
 const imageHeight = ref(0)
 const turbo = ref(true)
+const DURATION_MIN = 0.5
+const DURATION_MAX = 120
+const DURATION_SLIDER_MIN = 1
+const DURATION_SLIDER_MAX = 30
 const duration = ref(5)
+const durationDraft = ref('5')
+const durationScrubbing = ref(false)
+const durationSlider = computed(() => Math.min(DURATION_SLIDER_MAX, Math.max(DURATION_SLIDER_MIN, duration.value)))
+const durationSliderPct = computed(() => {
+  return ((durationSlider.value - DURATION_SLIDER_MIN) / (DURATION_SLIDER_MAX - DURATION_SLIDER_MIN)) * 100
+})
 const seedInput = ref('random')
 const hideThumbnail = ref(false)
-const showThumbnail = computed({
+const hideInputPreview = ref(false)
-  get: () => !hideThumbnail.value,
+const JOB_STORE = 'aigen-active-job'
-  set: (value: boolean) => { hideThumbnail.value = !value }
-})
 const busy = ref(false)
 const progress = ref(0)
 const statusMessage = ref('Waiting for a still.')
@@ -411,6 +466,8 @@ const elapsedMs = ref(0)
 const videoUrl = ref('')
 const jobId = ref('')
 const awaitingReveal = ref(false)
+const concealOutput = ref(false)
+const lockedSave = ref(false)
 const playerSize = ref({ width: 1344, height: 768 })
 const toasts = ref<{ id: string; message: string }[]>([])
 const comfyOk = ref(false)
@@ -499,6 +556,10 @@ async function loadLibrary() {
 }
 
 onMounted(async () => {
+  try {
+    hideInputPreview.value = localStorage.getItem('aigen-hide-input-preview') === 'true'
+  } catch { /* ignore */ }
+  window.addEventListener('pointerdown', onSitePointerDown, true)
   const [health, me] = await Promise.all([
     $fetch<{ comfy?: { ok?: boolean } }>('/api/health').catch(() => ({ comfy: { ok: false } })),
     $fetch<{ user?: { name?: string; email?: string }; authEnabled?: boolean; authMode?: string; instanceName?: string }>('/api/auth/me').catch(() => ({ user: null })),
@@ -509,9 +570,11 @@ onMounted(async () => {
   authEnabled.value = Boolean(me.authEnabled)
   authMode.value = me.authMode || ''
   instanceName.value = me.instanceName || 'AIGen'
+  await resumeActiveJob()
 })
 
 onBeforeUnmount(() => {
+  window.removeEventListener('pointerdown', onSitePointerDown, true)
   stopTimer()
   stopListen()
 })
@@ -520,6 +583,67 @@ watch(folderId, () => {
   applyThumbnailDefault()
 })
 
+watch(hideInputPreview, (value) => {
+  try {
+    localStorage.setItem('aigen-hide-input-preview', String(value))
+  } catch { /* ignore */ }
+})
+
+watch(duration, (value) => {
+  if (!durationScrubbing.value) durationDraft.value = formatDuration(value)
+})
+
+function clampDuration(value: number) {
+  if (!Number.isFinite(value)) return 5
+  return Math.min(DURATION_MAX, Math.max(DURATION_MIN, Math.round(value * 10) / 10))
+}
+
+function formatDuration(value: number) {
+  return Number.isInteger(value) ? String(value) : value.toFixed(1).replace(/\.0$/, '')
+}
+
+function commitDuration() {
+  const parsed = Number.parseFloat(durationDraft.value.replace(',', '.').trim())
+  duration.value = clampDuration(parsed)
+  durationDraft.value = formatDuration(duration.value)
+}
+
+function onDurationSlider(event: Event) {
+  duration.value = clampDuration(Number((event.target as HTMLInputElement).value))
+  durationDraft.value = formatDuration(duration.value)
+}
+
+function onDurationPointerDown(event: PointerEvent) {
+  if (event.button !== 0) return
+  const input = event.currentTarget as HTMLInputElement
+  const startY = event.clientY
+  const startValue = duration.value
+  let moved = false
+  const onMove = (move: PointerEvent) => {
+    const delta = startY - move.clientY
+    if (!moved && Math.abs(delta) < 5) return
+    if (!moved) {
+      moved = true
+      durationScrubbing.value = true
+      input.setPointerCapture(move.pointerId)
+      input.blur()
+    }
+    move.preventDefault()
+    const next = clampDuration(startValue + delta / 18)
+    duration.value = next
+    durationDraft.value = formatDuration(next)
+  }
+  const onUp = () => {
+    input.removeEventListener('pointermove', onMove)
+    input.removeEventListener('pointerup', onUp)
+    input.removeEventListener('pointercancel', onUp)
+    durationScrubbing.value = false
+  }
+  input.addEventListener('pointermove', onMove)
+  input.addEventListener('pointerup', onUp)
+  input.addEventListener('pointercancel', onUp)
+}
+
 function toast(message: string) {
   const id = crypto.randomUUID()
   toasts.value.push({ id, message })
@@ -553,10 +677,6 @@ function onPickedImage(next: File) {
 }
 
 async function persistDroppedStill(next: File) {
-  if (!currentFolder.value?.unlocked) {
-    toast('Unlock this folder before adding stills.')
-    return
-  }
   const body = new FormData()
   body.append('image', next)
   body.append('folderId', folderId.value)
@@ -575,15 +695,83 @@ function onDrop(event: DragEvent) {
   void persistDroppedStill(next)
 }
 
-function startTimer() {
+function startTimer(offset = 0) {
-  elapsedMs.value = 0
+  elapsedMs.value = offset
   stopTimer()
-  const started = Date.now()
+  const started = Date.now() - offset
   timer = setInterval(() => {
     elapsedMs.value = Date.now() - started
   }, 250)
 }
 
+function persistActiveJob(id: string, hidden: boolean, folderLocked: boolean) {
+  try {
+    localStorage.setItem(JOB_STORE, JSON.stringify({ jobId: id, hideThumbnail: hidden, folderLocked, savedAt: Date.now() }))
+  } catch { /* ignore */ }
+}
+
+function clearActiveJob() {
+  try {
+    localStorage.removeItem(JOB_STORE)
+  } catch { /* ignore */ }
+}
+
+function readStoredJob() {
+  try {
+    const raw = localStorage.getItem(JOB_STORE)
+    if (!raw) return null
+    const parsed = JSON.parse(raw) as { jobId?: string; hideThumbnail?: boolean; folderLocked?: boolean }
+    return parsed?.jobId ? parsed : null
+  } catch {
+    return null
+  }
+}
+
+async function resumeActiveJob() {
+  const stored = readStoredJob()
+  const active = await $fetch<{ jobId?: string | null; hideThumbnail?: boolean; folderLocked?: boolean; status?: string; elapsedMs?: number } | null>('/api/generate/active').catch(() => null)
+  const id = stored?.jobId || active?.jobId
+  if (!id) return
+  const hidden = Boolean(stored?.hideThumbnail || active?.hideThumbnail)
+  const locked = Boolean(stored?.folderLocked || active?.folderLocked)
+  try {
+    const snap = await $fetch<Record<string, any>>(`/api/generate/${id}`)
+    jobId.value = id
+    concealOutput.value = hidden
+    settledUi = false
+    applyJobEvent(snap, hidden, locked)
+    const running = snap.status === 'queued' || snap.status === 'uploading' || snap.status === 'running' || snap.type === 'snapshot'
+    if (running && !settledUi) {
+      busy.value = true
+      statusMessage.value = snap.message || 'Reconnecting to ComfyUI...'
+      startTimer(Number(snap.elapsedMs || 0))
+      persistActiveJob(id, hidden, locked)
+      listen(id, hidden, locked)
+    } else if (settledUi) {
+      clearActiveJob()
+    }
+  } catch {
+    clearActiveJob()
+  }
+}
+
+function onSitePointerDown(event: PointerEvent) {
+  if (!concealOutput.value || awaitingReveal.value || lockedSave.value || !videoUrl.value) return
+  const root = outputPanel.value
+  const target = event.target as Node | null
+  if (root && target && root.contains(target)) return
+  concealAndPause()
+}
+
+function concealAndPause() {
+  awaitingReveal.value = true
+  const el = player.value
+  if (el) {
+    el.pause()
+    el.currentTime = 0
+  }
+}
+
 function stopTimer() {
   if (timer) clearInterval(timer)
   timer = null
@@ -609,6 +797,16 @@ async function unlockFolder(id: string) {
     const data = await $fetch('/api/library/unlock', { method: 'POST', body: { password: unlockPassword.value, folderId: id } })
     unlockPassword.value = ''
     applyLibrary(data)
+    if (lockedSave.value) {
+      const dest = folders.value.find(folder => folder.id === folderId.value)
+      if (dest?.unlocked) {
+        lockedSave.value = false
+        const newest = clips.value
+          .filter(clip => clip.folderId === folderId.value)
+          .sort((a, b) => b.createdAt - a.createdAt)[0]
+        if (newest) openClip(newest)
+      }
+    }
   } catch (error: any) {
     toast(error?.data?.statusMessage || error?.statusMessage || 'Unlock failed')
   }
@@ -620,9 +818,19 @@ async function lockFolder(id: string) {
   } catch {
     await loadLibrary()
   }
+  const stillVisible = clips.value.some(clip => videoUrl.value.includes(clip.id))
+  if (videoUrl.value && !stillVisible) {
+    videoUrl.value = ''
+    awaitingReveal.value = false
+    lockedSave.value = false
+    concealOutput.value = false
+    statusMessage.value = 'Folder locked'
+  }
 }
 
 function openClip(item: LibraryClip) {
+  lockedSave.value = false
+  concealOutput.value = item.hideThumbnail
   videoUrl.value = `/api/library/clips/${item.id}/video`
   awaitingReveal.value = item.hideThumbnail
   playerSize.value = { width: item.width || 1344, height: item.height || 768 }
@@ -638,6 +846,8 @@ async function removeClip(item: LibraryClip) {
     if (videoUrl.value.includes(item.id)) {
       videoUrl.value = ''
       awaitingReveal.value = false
+      concealOutput.value = false
+      lockedSave.value = false
     }
     await loadLibrary()
   } catch (error: any) {
@@ -658,8 +868,8 @@ function revealAndPlay() {
 
 async function generate() {
   if (!file.value || !prompt.value.trim()) return
-  if (!currentFolder.value?.unlocked) {
+  if (!folderId.value) {
-    toast('Unlock the selected folder before generating.')
+    toast('Choose a library folder before generating.')
     return
   }
   statusBusy.value = false
@@ -668,6 +878,8 @@ async function generate() {
   progress.value = 1
   videoUrl.value = ''
   awaitingReveal.value = false
+  concealOutput.value = hideThumbnail.value
+  lockedSave.value = false
   playerSize.value = outputSize.value
   statusMessage.value = 'Checking ComfyUI...'
   startTimer()
@@ -686,18 +898,20 @@ async function generate() {
     body.append('hideThumbnail', String(hideThumbnail.value))
     body.append('name', clipName.value.trim())
     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 }>('/api/generate', {
+    const started = await $fetch<{ jobId: string; seed: number; width: number; height: number; steps: number; turbo: boolean; hideThumbnail?: boolean; folderLocked?: boolean }>('/api/generate', {
       method: 'POST',
       body
     })
     jobId.value = started.jobId
     maxStep.value = started.steps
     playerSize.value = { width: started.width, height: started.height }
-    listen(started.jobId, started.hideThumbnail === true || hideThumbnail.value)
+    persistActiveJob(started.jobId, started.hideThumbnail === true || hideThumbnail.value, started.folderLocked === true)
+    listen(started.jobId, started.hideThumbnail === true || hideThumbnail.value, started.folderLocked === true)
   } catch (error: any) {
     busy.value = false
     statusBusy.value = false
     stopTimer()
+    clearActiveJob()
     const message = error?.data?.statusMessage || error?.statusMessage || error?.message || 'Failed to start generation'
     statusMessage.value = message
     toast(message)
@@ -713,7 +927,7 @@ function stopListen() {
   }
 }
 
-function applyJobEvent(payload: Record<string, any>, hidden: boolean) {
+function applyJobEvent(payload: Record<string, any>, hidden: boolean, folderLocked: boolean) {
   if (payload.message) statusMessage.value = payload.message
   statusBusy.value = payload.type === 'busy' || payload.busy === true
   if (typeof payload.progress === 'number') progress.value = payload.progress
@@ -726,15 +940,33 @@ function applyJobEvent(payload: Record<string, any>, hidden: boolean) {
 
   if (complete && (payload.clipId || payload.filename)) {
     settledUi = true
-    const clipUrl = payload.clipId
+    const dest = folders.value.find(folder => folder.id === folderId.value)
-      ? `/api/library/clips/${payload.clipId}/video`
+    const locked = dest
-      : `/api/media?filename=${encodeURIComponent(payload.filename)}&subfolder=${encodeURIComponent(payload.subfolder || 'video')}&type=${encodeURIComponent(payload.mediaType || 'output')}`
+      ? Boolean(dest.protected && !dest.unlocked)
-    videoUrl.value = clipUrl
+      : (folderLocked || payload.folderLocked === true)
-    awaitingReveal.value = Boolean(payload.hideThumbnail || hidden)
+    if (locked) {
+      videoUrl.value = ''
+      awaitingReveal.value = false
+      concealOutput.value = false
+      lockedSave.value = true
+      browseFolderId.value = folderId.value
+      statusMessage.value = 'Saved to the locked folder. Unlock it to view.'
+    } else if (payload.clipId) {
+      videoUrl.value = `/api/library/clips/${payload.clipId}/video`
+      awaitingReveal.value = Boolean(payload.hideThumbnail || hidden)
+      concealOutput.value = awaitingReveal.value
+      lockedSave.value = false
+    } else {
+      videoUrl.value = `/api/media?filename=${encodeURIComponent(payload.filename)}&subfolder=${encodeURIComponent(payload.subfolder || 'video')}&type=${encodeURIComponent(payload.mediaType || 'output')}`
+      awaitingReveal.value = Boolean(payload.hideThumbnail || hidden)
+      concealOutput.value = awaitingReveal.value
+      lockedSave.value = false
+    }
     busy.value = false
     statusBusy.value = false
     stopTimer()
     stopListen()
+    clearActiveJob()
     loadLibrary().catch(() => null)
     return
   }
@@ -745,15 +977,16 @@ function applyJobEvent(payload: Record<string, any>, hidden: boolean) {
     statusBusy.value = false
     stopTimer()
     stopListen()
+    clearActiveJob()
     toast(payload.error || payload.message || 'Generation failed')
   }
 }
 
-function listen(id: string, hidden: boolean) {
+function listen(id: string, hidden: boolean, folderLocked = false) {
   stopListen()
   source = new EventSource(`/api/generate/${id}/stream`)
   source.onmessage = (event) => {
-    applyJobEvent(JSON.parse(event.data), hidden)
+    applyJobEvent(JSON.parse(event.data), hidden, folderLocked)
   }
   const tick = async () => {
     if (settledUi) {
@@ -762,14 +995,14 @@ function listen(id: string, hidden: boolean) {
     }
     try {
       const snap = await $fetch<Record<string, any>>(`/api/generate/${id}`)
-      applyJobEvent(snap, hidden)
+      applyJobEvent(snap, hidden, folderLocked)
     } catch {
       try {
         const recovered = await $fetch<Record<string, any>>('/api/generate/recover', {
           method: 'POST',
           body: { jobId: id }
         })
-        applyJobEvent(recovered, hidden)
+        applyJobEvent(recovered, hidden, folderLocked)
       } catch {
         // Job snapshot can 404 briefly after a restart; keep polling while busy.
       }

scripts/comfy-host-agent.mjs

@@ -1,11 +1,15 @@
 import http from 'node:http'
+import net from 'node:net'
 import { execFile, spawn } from 'node:child_process'
 import { promisify } from 'node:util'
+import { readdirSync, existsSync, rmSync } from 'node:fs'
+import { basename, join } from 'node:path'
 
 const execFileAsync = promisify(execFile)
 const port = Number(process.env.COMFY_CONTROL_PORT || 8199)
+const proxyPort = Number(process.env.COMFY_PROXY_PORT || 8198)
 const token = process.env.COMFY_CONTROL_TOKEN || ''
-const comfyHttp = (process.env.COMFY_HOST || 'http://127.0.0.1:8188').replace(/\/$/, '')
+const defaultHttp = (process.env.COMFY_HOST || 'http://127.0.0.1:8188').replace(/\/$/, '')
 
 function json(res, status, body) {
   const payload = JSON.stringify(body)
@@ -19,15 +23,68 @@ function authorized(req) {
   return header === `Bearer ${token}`
 }
 
-async function httpUp() {
+function candidatePorts() {
+  const ports = new Set([8188, 8189])
   try {
-    const res = await fetch(`${comfyHttp}/system_stats`, { signal: AbortSignal.timeout(2500) })
+    const url = new URL(defaultHttp.includes('://') ? defaultHttp : `http://${defaultHttp}`)
+    if (url.port) ports.add(Number(url.port))
+  } catch { /* ignore */ }
+  try {
+    const dir = join(process.env.APPDATA || '', 'Comfy Desktop', 'port-locks')
+    for (const name of readdirSync(dir)) {
+      const match = name.match(/^port-(\d+)\.json$/)
+      if (match) ports.add(Number(match[1]))
+    }
+  } catch { /* ignore */ }
+  return [...ports]
+}
+
+async function probe(portNum) {
+  try {
+    const res = await fetch(`http://127.0.0.1:${portNum}/system_stats`, { signal: AbortSignal.timeout(2500) })
     return res.ok
   } catch {
     return false
   }
 }
 
+async function findHealthyPort() {
+  for (const next of candidatePorts()) {
+    if (await probe(next)) return next
+  }
+  return 0
+}
+
+let proxyServer = null
+let proxyTarget = 0
+
+function ensureProxy(targetPort) {
+  if (!targetPort) return
+  if (proxyServer && proxyTarget === targetPort) return
+  proxyTarget = targetPort
+  if (proxyServer) {
+    try { proxyServer.close() } catch { /* ignore */ }
+    proxyServer = null
+  }
+  proxyServer = net.createServer((client) => {
+    const upstream = net.connect(proxyTarget, '127.0.0.1')
+    const fail = () => {
+      try { client.destroy() } catch { /* ignore */ }
+      try { upstream.destroy() } catch { /* ignore */ }
+    }
+    client.on('error', fail)
+    upstream.on('error', fail)
+    client.pipe(upstream)
+    upstream.pipe(client)
+  })
+  proxyServer.on('error', (error) => {
+    console.log(JSON.stringify({ src: 'comfy-host-agent', event: 'proxy-error', error: String(error.message || error) }))
+  })
+  proxyServer.listen(proxyPort, '0.0.0.0', () => {
+    console.log(JSON.stringify({ src: 'comfy-host-agent', event: 'proxy', listen: proxyPort, target: proxyTarget }))
+  })
+}
+
 async function processUp() {
   try {
     const { stdout } = await execFileAsync('tasklist', ['/FO', 'CSV', '/NH'], { windowsHide: true, timeout: 4000 })
@@ -58,21 +115,100 @@ function startComfy() {
   return { started: true, command }
 }
 
+function sharedRoots() {
+  const local = process.env.LOCALAPPDATA || ''
+  return {
+    input: process.env.COMFY_INPUT_DIR || join(local, 'Comfy-Desktop', 'ComfyUI-Shared', 'input'),
+    output: process.env.COMFY_OUTPUT_DIR || join(local, 'Comfy-Desktop', 'ComfyUI-Shared', 'output')
+  }
+}
+
+function safeFile(root, subfolder, filename) {
+  const name = basename(String(filename || ''))
+  if (!name || name === '.' || name === '..') return null
+  const target = join(root, String(subfolder || '').replace(/\.\./g, ''), name)
+  if (!target.startsWith(root)) return null
+  return target
+}
+
+function removeFile(path) {
+  if (!path || !existsSync(path)) return false
+  rmSync(path, { force: true })
+  return true
+}
+
+function readJson(req) {
+  return new Promise((resolve) => {
+    const chunks = []
+    req.on('data', (chunk) => chunks.push(chunk))
+    req.on('end', () => {
+      try {
+        resolve(JSON.parse(Buffer.concat(chunks).toString('utf8') || '{}'))
+      } catch {
+        resolve({})
+      }
+    })
+    req.on('error', () => resolve({}))
+  })
+}
+
+function purgeDesktopFiles(body) {
+  const roots = sharedRoots()
+  const deleted = []
+  const imageName = String(body?.imageName || body?.filename || '')
+  if (imageName) {
+    const inputPath = safeFile(roots.input, '', imageName)
+    if (removeFile(inputPath)) deleted.push(inputPath)
+  }
+  const video = body?.video || null
+  const videoName = String(video?.filename || '')
+  if (videoName) {
+    const outputPath = safeFile(roots.output, video.subfolder || 'video', videoName)
+    if (removeFile(outputPath)) deleted.push(outputPath)
+  }
+  console.log(JSON.stringify({ src: 'comfy-host-agent', event: 'purge', deleted: deleted.length, files: deleted.map((path) => basename(path)) }))
+  return { ok: true, deleted }
+}
+
 const server = http.createServer(async (req, res) => {
   if (!authorized(req)) return json(res, 401, { ok: false, error: 'unauthorized' })
   const url = new URL(req.url || '/', 'http://localhost')
   if (req.method === 'GET' && url.pathname === '/status') {
-    const [httpReady, process] = await Promise.all([httpUp(), processUp()])
+    const [healthyPort, process] = await Promise.all([findHealthyPort(), processUp()])
-    return json(res, 200, { ok: true, http: httpReady, process })
+    if (healthyPort) ensureProxy(healthyPort)
+    return json(res, 200, {
+      ok: true,
+      http: Boolean(healthyPort),
+      process,
+      port: healthyPort || null,
+      proxyPort: healthyPort ? proxyPort : null
+    })
   }
   if (req.method === 'POST' && url.pathname === '/start') {
-    if (await httpUp()) return json(res, 200, { ok: true, started: false, already: true })
+    const healthyPort = await findHealthyPort()
+    if (healthyPort) {
+      ensureProxy(healthyPort)
+      return json(res, 200, { ok: true, started: false, already: true, port: healthyPort, proxyPort })
+    }
     const launched = startComfy()
     return json(res, 200, { ok: true, ...launched })
   }
+  if (req.method === 'POST' && url.pathname === '/purge') {
+    const body = await readJson(req)
+    return json(res, 200, purgeDesktopFiles(body))
+  }
   json(res, 404, { ok: false, error: 'not found' })
 })
 
-server.listen(port, '0.0.0.0', () => {
+server.listen(port, '0.0.0.0', async () => {
-  console.log(JSON.stringify({ src: 'comfy-host-agent', event: 'listen', port, comfyHttp }))
+  const healthyPort = await findHealthyPort()
+  if (healthyPort) ensureProxy(healthyPort)
+  console.log(JSON.stringify({
+    src: 'comfy-host-agent',
+    event: 'listen',
+    port,
+    proxyPort,
+    comfyPort: healthyPort || null,
+    candidates: candidatePorts()
+  }))
 })

server/api/generate.post.ts

@@ -1,3 +1,9 @@
+function parseDuration(raw: string) {
+  const seconds = Number(raw)
+  if (!Number.isFinite(seconds)) return 5
+  return Math.min(120, Math.max(0.5, seconds))
+}
+
 function frameLength(seconds: number) {
   const raw = Math.max(5, Math.round(seconds * 24))
   return raw + (5 - (raw % 17) + 17) % 17
@@ -33,7 +39,7 @@ export default defineEventHandler(async (event) => {
   const seed = fields.seed && fields.seed !== 'random'
     ? Number(fields.seed)
     : Math.floor(Math.random() * 2_147_483_647)
-  const length = frameLength(Number(fields.duration || 5))
+  const length = frameLength(parseDuration(fields.duration || '5'))
   const hideThumbnail = fields.hideThumbnail === 'true'
   const clipName = (fields.name || '').trim().slice(0, 80)
   const ownerKey = libraryOwnerKey(event)
@@ -44,7 +50,9 @@ export default defineEventHandler(async (event) => {
   if (!folderId) {
     throw createError({ statusCode: 400, statusMessage: 'Create a library folder before generating' })
   }
-  assertFolderAccess(event, folderId)
+  const destFolder = library.folders.find(folder => folder.id === folderId)
+  const folderLocked = Boolean(destFolder?.protected && !destFolder.unlocked)
+  assertFolderExists(event, folderId)
   await saveStill({
     ownerKey,
     folderId,
@@ -61,6 +69,7 @@ export default defineEventHandler(async (event) => {
     ownerKey,
     folderId,
     hideThumbnail,
+    folderLocked,
     name: clipName,
     prompt,
     aspect: fields.aspect || 'auto',
@@ -90,7 +99,8 @@ export default defineEventHandler(async (event) => {
     steps,
     turbo,
     folderId,
-    hideThumbnail
+    hideThumbnail,
+    folderLocked
   }
 })
 
@@ -149,6 +159,7 @@ async function runGeneration(
       ownerKey: job.library.ownerKey,
       folderId: job.library.folderId,
       hideThumbnail: job.library.hideThumbnail,
+      folderLocked: job.library.folderLocked,
       name: job.library.name,
       prompt: job.library.prompt,
       aspect: job.library.aspect,

server/api/generate/active.get.ts

@@ -0,0 +1,33 @@
+export default defineEventHandler((event) => {
+  const owner = libraryOwnerKey(event)
+  const live = listJobs()
+    .filter(job => job.library?.ownerKey === owner && (job.status === 'queued' || job.status === 'uploading' || job.status === 'running'))
+    .sort((a, b) => b.startedAt - a.startedAt)[0]
+  if (live) {
+    return {
+      jobId: live.id,
+      hideThumbnail: live.hideThumbnail === true,
+      folderLocked: live.library?.folderLocked === true,
+      ...jobSnapshot(live)
+    }
+  }
+
+  const pending = listPendingJobs()
+    .filter(job => job.ownerKey === owner)
+    .sort((a, b) => b.startedAt - a.startedAt)[0]
+  if (pending) {
+    return {
+      jobId: pending.jobId,
+      type: 'snapshot',
+      status: 'running',
+      message: 'Reconnecting to ComfyUI...',
+      progress: Math.max(8, Math.min(90, Math.round((Date.now() - pending.startedAt) / 1000))),
+      promptId: pending.promptId,
+      elapsedMs: Date.now() - pending.startedAt,
+      hideThumbnail: pending.hideThumbnail === true,
+      folderLocked: pending.folderLocked === true
+    }
+  }
+
+  return { jobId: null }
+})

server/api/library/stills.post.ts

@@ -23,7 +23,7 @@ export default defineEventHandler(async (event) => {
   if (!folderId) {
     throw createError({ statusCode: 400, statusMessage: 'Create a library folder first' })
   }
-  assertFolderAccess(event, folderId)
+  assertFolderExists(event, folderId)
   const still = await saveStill({
     ownerKey: owner,
     folderId,

server/utils/comfy.ts

@@ -1,4 +1,11 @@
+let comfyHostOverride = ''
+
+export function setComfyHostOverride(url: string) {
+  comfyHostOverride = String(url || '').replace(/\/$/, '')
+}
+
 function comfyBase() {
+  if (comfyHostOverride) return comfyHostOverride
   const config = useRuntimeConfig()
   let host = String(config.comfyHost || process.env.COMFY_HOST || '').trim().replace(/\/$/, '')
   const port = String(config.comfyPort || process.env.COMFY_PORT || '').trim()
@@ -204,7 +211,34 @@ export function isOurComfyVideo(video: { filename: string; subfolder: string })
 }
 
 export function purgeComfyEnabled() {
-  return Boolean(useRuntimeConfig().purgeComfyOutputs)
+  return useRuntimeConfig().purgeComfyOutputs !== false
+}
+
+async function purgeOnDesktop(opts: {
+  video?: { filename: string; subfolder: string; type: string }
+  imageName?: string
+}) {
+  const config = useRuntimeConfig()
+  const controlUrl = String(config.comfyControlUrl || process.env.COMFY_CONTROL_URL || '').replace(/\/$/, '')
+  const token = String(config.comfyControlToken || process.env.COMFY_CONTROL_TOKEN || '')
+  if (!controlUrl) return
+  try {
+    await fetch(`${controlUrl}/purge`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Accept: 'application/json',
+        ...(token ? { Authorization: `Bearer ${token}` } : {})
+      },
+      body: JSON.stringify({
+        imageName: opts.imageName || '',
+        video: opts.video || null
+      }),
+      signal: AbortSignal.timeout(8000)
+    })
+  } catch {
+    // Host agent may be down; Comfy HTTP purge is the fallback.
+  }
 }
 
 export async function purgeComfyArtifacts(opts: {
@@ -213,6 +247,7 @@ export async function purgeComfyArtifacts(opts: {
   promptId?: string
 }) {
   if (!purgeComfyEnabled()) return
+  await purgeOnDesktop(opts)
   const files: { filename: string; subfolder: string; type: string }[] = []
   if (opts.video?.filename) files.push(opts.video)
   if (opts.imageName) files.push({ filename: opts.imageName, subfolder: '', type: 'input' })

server/utils/comfyLifecycle.ts

@@ -1,5 +1,6 @@
 import { execFile, spawn } from 'node:child_process'
 import { promisify } from 'node:util'
+import { getComfyHost, setComfyHostOverride } from '~/server/utils/comfy'
 
 const execFileAsync = promisify(execFile)
 
@@ -40,15 +41,14 @@ function settings() {
     controlUrl: String(config.comfyControlUrl || process.env.COMFY_CONTROL_URL || '').replace(/\/$/, ''),
     controlToken: String(config.comfyControlToken || process.env.COMFY_CONTROL_TOKEN || ''),
     healthTimeoutMs: 2500,
-    bootPollAttempts: 5,
+    bootPollAttempts: Number(process.env.COMFY_BOOT_POLL_ATTEMPTS || 20),
-    bootPollDelayMs: 2000,
+    bootPollDelayMs: 3000,
-    startTimeoutMs: 30_000,
+    startTimeoutMs: Number(process.env.COMFY_START_TIMEOUT_MS || 180_000),
     busyWaitMs: Number(process.env.COMFY_BUSY_WAIT_MS || 180_000)
   }
 }
 
-export async function checkComfyHttp(timeoutMs = 2500) {
+export async function checkComfyHttp(timeoutMs = 2500, host = getComfyHost()) {
-  const host = getComfyHost()
   try {
     const res = await fetch(`${host}/system_stats`, { signal: AbortSignal.timeout(timeoutMs) })
     if (!res.ok) return { ok: false as const, host, status: res.status, stats: null }
@@ -93,6 +93,9 @@ async function controlRequest(path: string, method = 'GET') {
       process?: boolean
       pid?: number
       started?: boolean
+      already?: boolean
+      port?: number | null
+      proxyPort?: number | null
     }
   } catch {
     return null
@@ -200,6 +203,16 @@ async function waitWhileBusy(onStatus: StatusFn) {
   })
 }
 
+function hostWithPort(host: string, port: number) {
+  try {
+    const url = new URL(host)
+    url.port = String(port)
+    return url.origin
+  } catch {
+    return host
+  }
+}
+
 async function ensureUnlocked(onStatus: StatusFn) {
   const cfg = settings()
   const host = cfg.host
@@ -214,6 +227,31 @@ async function ensureUnlocked(onStatus: StatusFn) {
   }
 
   log('http-fail', { host })
+  const remote = await controlRequest('/status')
+  if (remote?.http && remote.proxyPort) {
+    const proxyUrl = hostWithPort(host, remote.proxyPort)
+    onStatus({
+      state: 'booting',
+      message: `Configured Comfy port is blocked. Trying the desktop LAN proxy on ${remote.proxyPort}...`,
+      host: proxyUrl,
+      processRunning: true
+    })
+    const viaProxy = await checkComfyHttp(cfg.healthTimeoutMs, proxyUrl)
+    if (viaProxy.ok) {
+      setComfyHostOverride(proxyUrl)
+      log('http-ok-proxy', { host: proxyUrl, localPort: remote.port || null })
+      await waitWhileBusy(onStatus)
+      onStatus({ state: 'online', message: 'ComfyUI online', host: proxyUrl, processRunning: true })
+      return
+    }
+  }
+  if (remote?.http) {
+    const localPort = remote.port ? ` Port ${remote.port} is healthy on the desktop.` : ''
+    throw createError({
+      statusCode: 503,
+      statusMessage: `Comfy Desktop is open and the local API is up, but this server cannot reach ${host}.${localPort} Open the MiniMax instance “ComfyUI (1)” and wait until the graph editor loads — the instance picker is not enough.`
+    })
+  }
   const running = await processRunning()
   if (running) {
     onStatus({
@@ -273,7 +311,7 @@ async function ensureUnlocked(onStatus: StatusFn) {
 
   throw createError({
     statusCode: 503,
-    statusMessage: 'Started ComfyUI but it did not become healthy within 30 seconds.'
+    statusMessage: 'Started Comfy Desktop but the API never answered. If the instance picker is showing, click “ComfyUI (1)” (MiniMax) and wait until the graph editor is loaded. Cold start can take a couple of minutes.'
   })
 }
 

server/utils/jobs.ts

@@ -17,6 +17,7 @@ export interface JobEvent {
   busy?: boolean
   queueRunning?: number
   queuePending?: number
+  folderLocked?: boolean
 }
 
 export interface Job {
@@ -36,6 +37,7 @@ export interface Job {
     ownerKey: string
     folderId: string
     hideThumbnail: boolean
+    folderLocked?: boolean
     name?: string
     prompt: string
     aspect: string
@@ -81,6 +83,10 @@ export function getJob(id: string) {
   return jobs.get(id)
 }
 
+export function listJobs() {
+  return [...jobs.values()]
+}
+
 export function jobSnapshot(job: Job) {
   return {
     type: 'snapshot' as const,
@@ -91,12 +97,13 @@ export function jobSnapshot(job: Job) {
     maxStep: job.maxStep,
     promptId: job.promptId,
     elapsedMs: Date.now() - job.startedAt,
-    filename: job.video?.filename,
+    filename: job.library?.folderLocked ? undefined : job.video?.filename,
-    subfolder: job.video?.subfolder,
+    subfolder: job.library?.folderLocked ? undefined : job.video?.subfolder,
-    mediaType: job.video?.type,
+    mediaType: job.library?.folderLocked ? undefined : job.video?.type,
     clipId: job.clipId,
     hideThumbnail: job.hideThumbnail,
-    error: job.error
+    error: job.error,
+    folderLocked: job.library?.folderLocked
   }
 }
 

server/utils/library.ts

@@ -49,6 +49,7 @@ export interface PublicFolder {
   thumbnailDefault: boolean
   protected: boolean
   unlocked: boolean
+  clipCount: number
 }
 
 interface Catalog {
@@ -221,21 +222,26 @@ export function folderUnlocked(event: H3Event, folder: LibraryFolder) {
   return folderUnlocks(event)[folder.id] === passwordVersion(folder.passwordHash)
 }
 
-export function publicFolder(event: H3Event, folder: LibraryFolder): PublicFolder {
+export function publicFolder(event: H3Event, folder: LibraryFolder, clipCount = 0): PublicFolder {
   return {
     id: folder.id,
     name: folder.name,
     createdAt: folder.createdAt,
     thumbnailDefault: folder.thumbnailDefault,
     protected: Boolean(folder.passwordHash),
-    unlocked: folderUnlocked(event, folder)
+    unlocked: folderUnlocked(event, folder),
+    clipCount
   }
 }
 
 export function publicLibrary(event: H3Event) {
   const owner = libraryOwnerKey(event)
   const catalog = readCatalog(owner)
-  const folders = catalog.folders.map(folder => publicFolder(event, folder))
+  const folders = catalog.folders.map(folder => publicFolder(
+    event,
+    folder,
+    catalog.clips.filter(clip => clip.folderId === folder.id).length
+  ))
   const unlockedIds = new Set(folders.filter(folder => folder.unlocked).map(folder => folder.id))
   return {
     folders,
@@ -253,10 +259,15 @@ export function assertLibraryOwner(event: H3Event) {
   return { owner, catalog: readCatalog(owner) }
 }
 
-export function assertFolderAccess(event: H3Event, folderId: string) {
+export function assertFolderExists(event: H3Event, folderId: string) {
   const { owner, catalog } = assertLibraryOwner(event)
   const folder = catalog.folders.find(item => item.id === folderId)
   if (!folder) throw createError({ statusCode: 404, statusMessage: 'Folder not found' })
+  return { owner, catalog, folder }
+}
+
+export function assertFolderAccess(event: H3Event, folderId: string) {
+  const { owner, catalog, folder } = assertFolderExists(event, folderId)
   if (!folderUnlocked(event, folder)) {
     throw createError({ statusCode: 403, statusMessage: 'Folder is locked' })
   }

server/utils/pending.ts

@@ -8,6 +8,7 @@ export interface PendingJob {
   ownerKey: string
   folderId: string
   hideThumbnail: boolean
+  folderLocked?: boolean
   name?: string
   prompt: string
   aspect: string
@@ -88,12 +89,13 @@ export async function completePendingIfReady(pending: PendingJob) {
   return {
     type: 'complete' as const,
     status: 'complete' as const,
-    message: 'Video ready',
+    message: pending.folderLocked ? 'Saved to the locked folder. Unlock it to view.' : 'Video ready',
     progress: 100,
     clipId: clip.id,
-    filename: video.filename,
+    filename: pending.folderLocked ? undefined : video.filename,
-    subfolder: video.subfolder,
+    subfolder: pending.folderLocked ? undefined : video.subfolder,
-    mediaType: video.type,
+    mediaType: pending.folderLocked ? undefined : video.type,
-    hideThumbnail: pending.hideThumbnail
+    hideThumbnail: pending.hideThumbnail,
+    folderLocked: pending.folderLocked
   }
 }

server/utils/watch.ts

@@ -85,13 +85,14 @@ export function watchComfyJob(job: Job): Promise<void> {
         job.status = 'complete'
         emitJob(job, {
           type: 'complete',
-          message: 'Video ready',
+          message: job.library?.folderLocked ? 'Saved to the locked folder. Unlock it to view.' : 'Video ready',
           progress: 100,
-          filename: video.filename,
+          filename: job.library?.folderLocked ? undefined : video.filename,
-          subfolder: video.subfolder,
+          subfolder: job.library?.folderLocked ? undefined : video.subfolder,
-          mediaType: video.type,
+          mediaType: job.library?.folderLocked ? undefined : video.type,
           clipId: job.clipId,
-          hideThumbnail: job.hideThumbnail
+          hideThumbnail: job.hideThumbnail,
+          folderLocked: job.library?.folderLocked
         })
         deletePendingJob(job.id)
       } catch (saveError) {