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.
2026-08-25 20:25:36 -05:00
parent 1a271c05a4
commit c5ed4d7ac4
16 changed files with 651 additions and 104 deletions
@@ -1,7 +1,9 @@
 PORT=3000
 HOST=0.0.0.0
-COMFY_HOST=http://192.168.77.7:8188
-COMFY_PORT=8188
+# ComfyUI on the Windows desktop. 8188 is often taken (SSH / other Comfy).
+# 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
@@ -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:
@@ -25,12 +25,11 @@
        </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
          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 }"
@@ -44,6 +43,8 @@
          <input ref="fileInput" type="file" accept="image/*" class="hidden" @change="onFile">
        </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">
            <button
@@ -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>

@@ -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',
@@ -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">
-                  <option :value="5">5 seconds</option>
-                  <option :value="10">10 seconds</option>
-                </select>
-              </label>
+                <div class="relative">
+                  <input
+                    v-model="durationDraft"
+                    type="text"
+                    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({
-  get: () => !hideThumbnail.value,
-  set: (value: boolean) => { hideThumbnail.value = !value }
-})
+const hideInputPreview = ref(false)
+const JOB_STORE = 'aigen-active-job'
 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() {
-  elapsedMs.value = 0
+function startTimer(offset = 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) {
-    toast('Unlock the selected folder before generating.')
+  if (!folderId.value) {
+    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
-      ? `/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
+    const dest = folders.value.find(folder => folder.id === folderId.value)
+    const locked = dest
+      ? Boolean(dest.protected && !dest.unlocked)
+      : (folderLocked || payload.folderLocked === true)
+    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.
      }
@@ -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()])
-    return json(res, 200, { ok: true, http: httpReady, process })
+    const [healthyPort, process] = await Promise.all([findHealthyPort(), processUp()])
+    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', () => {
-  console.log(JSON.stringify({ src: 'comfy-host-agent', event: 'listen', port, comfyHttp }))
+server.listen(port, '0.0.0.0', async () => {
+  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()
+  }))
 })
@@ -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,
@@ -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 }
+})
@@ -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,
@@ -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' })
@@ -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,
-    bootPollDelayMs: 2000,
-    startTimeoutMs: 30_000,
+    bootPollAttempts: Number(process.env.COMFY_BOOT_POLL_ATTEMPTS || 20),
+    bootPollDelayMs: 3000,
+    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) {
-  const host = getComfyHost()
+export async function checkComfyHttp(timeoutMs = 2500, 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.'
  })
 }

@@ -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,
-    subfolder: job.video?.subfolder,
-    mediaType: job.video?.type,
+    filename: job.library?.folderLocked ? undefined : job.video?.filename,
+    subfolder: job.library?.folderLocked ? undefined : job.video?.subfolder,
+    mediaType: job.library?.folderLocked ? undefined : job.video?.type,
    clipId: job.clipId,
    hideThumbnail: job.hideThumbnail,
-    error: job.error
+    error: job.error,
+    folderLocked: job.library?.folderLocked
  }
 }

@@ -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' })
  }
@@ -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,
-    subfolder: video.subfolder,
-    mediaType: video.type,
-    hideThumbnail: pending.hideThumbnail
+    filename: pending.folderLocked ? undefined : video.filename,
+    subfolder: pending.folderLocked ? undefined : video.subfolder,
+    mediaType: pending.folderLocked ? undefined : video.type,
+    hideThumbnail: pending.hideThumbnail,
+    folderLocked: pending.folderLocked
  }
 }
@@ -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,
-          subfolder: video.subfolder,
-          mediaType: video.type,
+          filename: job.library?.folderLocked ? undefined : video.filename,
+          subfolder: job.library?.folderLocked ? undefined : video.subfolder,
+          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) {