Let privacy-blurred stitch thumbs click-to-reveal so Start/From prev/This clip can be inspected.

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

components/ClipFrameThumbs.vue

@@ -1,73 +1,40 @@
 <template>
   <div class="shrink-0">
     <div class="flex items-start gap-1.5">
-      <div v-if="stillId && (hidden || !failed.still)" class="flex w-12 flex-col items-center gap-0.5">
-        <span v-if="hidden" class="relative h-12 w-12 overflow-hidden rounded-lg">
-          <span class="sensitive-glow block h-full w-full" />
-        </span>
+      <div
+        v-for="slot in visibleSlots"
+        :key="slot.key"
+        class="flex w-12 flex-col items-center gap-0.5"
+      >
         <button
-          v-else
           type="button"
           class="relative h-12 w-12 overflow-hidden rounded-lg bg-zinc-900"
-          aria-label="Start still"
-          @click.stop="openPreview(stillFull, 'Start')"
+          :aria-label="concealed ? `Click to reveal ${slot.label}` : slot.aria"
+          :title="concealed ? 'Click to reveal' : slot.label"
+          @click.stop="onSlotClick(slot)"
         >
+          <span v-if="concealed" class="sensitive-glow block h-full w-full" />
           <img
-            :src="stillThumb"
+            v-else
+            :src="slot.thumb"
             alt=""
             loading="lazy"
             decoding="async"
             class="h-full w-full object-cover"
-            @error="failed.still = true"
+            @error="failed[slot.key] = true"
           >
         </button>
-        <span class="text-[10px] leading-none text-zinc-500">Start</span>
+        <span class="text-[10px] leading-none text-zinc-500">{{ slot.label }}</span>
+      </div>
     </div>
-      <div v-if="fromClipId && (hidden || !failed.from)" class="flex w-12 flex-col items-center gap-0.5">
-        <span v-if="hidden" class="relative h-12 w-12 overflow-hidden rounded-lg">
-          <span class="sensitive-glow block h-full w-full" />
-        </span>
     <button
-          v-else
+      v-if="hidden"
       type="button"
-          class="relative h-12 w-12 overflow-hidden rounded-lg bg-zinc-900"
-          aria-label="Last frame of previous clip"
-          @click.stop="openPreview(fromFull, 'From prev')"
-        >
-          <img
-            :src="fromThumb"
-            alt=""
-            loading="lazy"
-            decoding="async"
-            class="h-full w-full object-cover"
-            @error="failed.from = true"
+      class="mt-1 text-xs text-amber-300 hover:text-amber-200"
+      @click.stop="toggleFrames"
     >
+      {{ revealed ? 'Hide frames' : 'Click to reveal' }}
     </button>
-        <span class="text-[10px] leading-none text-zinc-500">From prev</span>
-      </div>
-      <div v-if="showFirstFrame && clipId && (hidden || !failed.first)" class="flex w-12 flex-col items-center gap-0.5">
-        <span v-if="hidden" class="relative h-12 w-12 overflow-hidden rounded-lg">
-          <span class="sensitive-glow block h-full w-full" />
-        </span>
-        <button
-          v-else
-          type="button"
-          class="relative h-12 w-12 overflow-hidden rounded-lg bg-zinc-900"
-          aria-label="First frame of this clip"
-          @click.stop="openPreview(firstFull, 'This clip')"
-        >
-          <img
-            :src="firstThumb"
-            alt=""
-            loading="lazy"
-            decoding="async"
-            class="h-full w-full object-cover"
-            @error="failed.first = true"
-          >
-        </button>
-        <span class="text-[10px] leading-none text-zinc-500">This clip</span>
-      </div>
-    </div>
 
     <Teleport to="body">
       <div
@@ -87,23 +54,90 @@
 </template>
 
 <script setup lang="ts">
+type SlotKey = 'still' | 'from' | 'first'
+
+interface FrameSlot {
+  key: SlotKey
+  label: string
+  aria: string
+  thumb: string
+  full: string
+}
+
 const props = defineProps<{
   hidden?: boolean
+  revealed?: boolean
   stillId?: string
   fromClipId?: string
   clipId: string
   showFirstFrame?: boolean
 }>()
 
+const emit = defineEmits<{
+  'update:revealed': [value: boolean]
+}>()
+
 const failed = reactive({ still: false, from: false, first: false })
 const preview = ref<{ src: string; label: string } | null>(null)
+const localRevealed = ref(false)
 
-const stillThumb = computed(() => !props.hidden && props.stillId ? `/api/library/stills/${props.stillId}?thumb=1` : '')
-const stillFull = computed(() => !props.hidden && props.stillId ? `/api/library/stills/${props.stillId}` : '')
-const fromThumb = computed(() => !props.hidden && props.fromClipId ? `/api/library/clips/${props.fromClipId}/last-frame?thumb=1` : '')
-const fromFull = computed(() => !props.hidden && props.fromClipId ? `/api/library/clips/${props.fromClipId}/last-frame` : '')
-const firstThumb = computed(() => !props.hidden && props.clipId ? `/api/library/clips/${props.clipId}/first-frame?thumb=1` : '')
-const firstFull = computed(() => !props.hidden && props.clipId ? `/api/library/clips/${props.clipId}/first-frame` : '')
+const revealed = computed({
+  get: () => (props.revealed !== undefined ? props.revealed : localRevealed.value),
+  set: (value: boolean) => {
+    localRevealed.value = value
+    emit('update:revealed', value)
+  }
+})
+
+const concealed = computed(() => props.hidden === true && !revealed.value)
+
+const visibleSlots = computed(() => {
+  const list: FrameSlot[] = []
+  if (props.stillId) {
+    list.push({
+      key: 'still',
+      label: 'Start',
+      aria: 'Start still',
+      thumb: frameThumb('still'),
+      full: frameFull('still')
+    })
+  }
+  if (props.fromClipId) {
+    list.push({
+      key: 'from',
+      label: 'From prev',
+      aria: 'Last frame of previous clip',
+      thumb: frameThumb('from'),
+      full: frameFull('from')
+    })
+  }
+  if (props.showFirstFrame && props.clipId) {
+    list.push({
+      key: 'first',
+      label: 'This clip',
+      aria: 'First frame of this clip',
+      thumb: frameThumb('first'),
+      full: frameFull('first')
+    })
+  }
+  return list.filter(slot => concealed.value || !failed[slot.key])
+})
+
+function frameThumb(key: SlotKey) {
+  if (concealed.value) return ''
+  if (key === 'still' && props.stillId) return `/api/library/stills/${props.stillId}?thumb=1`
+  if (key === 'from' && props.fromClipId) return `/api/library/clips/${props.fromClipId}/last-frame?thumb=1`
+  if (key === 'first' && props.clipId) return `/api/library/clips/${props.clipId}/first-frame?thumb=1`
+  return ''
+}
+
+function frameFull(key: SlotKey) {
+  if (concealed.value) return ''
+  if (key === 'still' && props.stillId) return `/api/library/stills/${props.stillId}`
+  if (key === 'from' && props.fromClipId) return `/api/library/clips/${props.fromClipId}/last-frame`
+  if (key === 'first' && props.clipId) return `/api/library/clips/${props.clipId}/first-frame`
+  return ''
+}
 
 watch(
   () => [props.hidden, props.stillId, props.fromClipId, props.clipId, props.showFirstFrame],
@@ -111,13 +145,34 @@ watch(
     failed.still = false
     failed.from = false
     failed.first = false
+    localRevealed.value = false
     if (props.hidden) closePreview()
   }
 )
 
-function openPreview(src: string, label: string) {
-  if (props.hidden || !src) return
-  preview.value = { src, label }
+watch(
+  () => props.revealed,
+  (value) => {
+    if (value) localRevealed.value = true
+    else {
+      localRevealed.value = false
+      closePreview()
+    }
+  }
+)
+
+function onSlotClick(slot: FrameSlot) {
+  if (concealed.value) {
+    revealed.value = true
+    return
+  }
+  if (!slot.full) return
+  preview.value = { src: slot.full, label: slot.label }
+}
+
+function toggleFrames() {
+  revealed.value = !revealed.value
+  if (!revealed.value) closePreview()
 }
 
 function closePreview() {

pages/index.vue

@@ -1154,7 +1154,12 @@
                       @click.prevent="onSelectClick(entry.key, $event)"
                     >
                   </label>
-                  <button type="button" class="relative h-16 w-16 shrink-0 overflow-hidden rounded-xl bg-zinc-900" @click="openClip(entry.group.head)">
+                  <button
+                    type="button"
+                    class="relative h-16 w-16 shrink-0 overflow-hidden rounded-xl bg-zinc-900"
+                    :title="entry.group.head.hideThumbnail ? 'Preview hidden · click to open' : undefined"
+                    @click="openClip(entry.group.head)"
+                  >
                     <span v-if="entry.group.head.hideThumbnail" class="sensitive-glow block h-full w-full" />
                     <img v-else-if="entry.group.head.hasThumbnail" :src="`/api/library/clips/${entry.group.head.id}/thumb`" alt="" loading="lazy" decoding="async" class="h-full w-full object-cover">
                     <span v-else class="block h-full w-full bg-zinc-800" />
@@ -1194,6 +1199,14 @@
                       <button v-if="entry.group.parts.length > 1" type="button" class="text-xs text-amber-200" @click="toggleFamily(entry.group.key)">
                         {{ expandedFamilies[entry.group.key] ? 'Collapse' : `Expand ${entry.group.parts.length} parts` }}
                       </button>
+                      <button
+                        v-if="entry.group.parts.length > 1 && entry.group.parts.some(part => part.hideThumbnail)"
+                        type="button"
+                        class="text-xs text-amber-300"
+                        @click="toggleFamilyFrames(entry.group)"
+                      >
+                        {{ familyFramesRevealed(entry.group.parts) ? 'Hide frames' : 'Click to reveal' }}
+                      </button>
                       <button type="button" class="text-xs text-amber-300" @click="openClip(entry.group.head)">Open</button>
                       <button type="button" class="text-xs text-amber-300" @click="openExtend(entry.group.head)">Extend</button>
                       <button type="button" class="text-xs text-amber-300" @click="startRename(entry.group.head, true)">Rename</button>
@@ -1225,10 +1238,12 @@
                   >
                     <ClipFrameThumbs
                       :hidden="item.hideThumbnail"
+                      :revealed="!!stitchReveal[item.id]"
                       :still-id="partIndex === 0 ? item.stillId : undefined"
                       :from-clip-id="previousChronoClipId(entry.group.parts, partIndex)"
                       :clip-id="item.id"
                       :show-first-frame="partIndex > 0 || !item.stillId"
+                      @update:revealed="stitchReveal[item.id] = $event"
                     />
                     <div class="min-w-0 flex-1">
                       <div class="flex items-start gap-2">
@@ -1255,6 +1270,14 @@
                         @update-label="(refIndex, label) => updateClipRefLabel(item, refIndex, label)"
                       />
                       <div class="mt-1.5 flex flex-wrap items-center gap-3">
+                        <button
+                          v-if="item.hideThumbnail"
+                          type="button"
+                          class="text-xs text-amber-300"
+                          @click="stitchReveal[item.id] = !stitchReveal[item.id]"
+                        >
+                          {{ stitchReveal[item.id] ? 'Hide frames' : 'Click to reveal' }}
+                        </button>
                         <button type="button" class="text-xs text-amber-300" @click="openClip(item)">Open</button>
                         <button type="button" class="text-xs text-amber-300" @click="openExtend(item)">Extend</button>
                         <button type="button" class="text-xs text-amber-300" @click="startRename(item)">Rename</button>
@@ -1735,6 +1758,7 @@ const overallProgress = ref(0)
 const completedChainStep = ref(0)
 const activeChainPlan = ref<{ label: string; prompt: string; duration: number }[]>([])
 const expandedFamilies = ref<Record<string, boolean>>({})
+const stitchReveal = reactive<Record<string, boolean>>({})
 const elapsedMs = ref(0)
 const videoUrl = ref('')
 const videoSeekable = ref(true)
@@ -2351,6 +2375,21 @@ function toggleFamily(key: string) {
   expandedFamilies.value = { ...expandedFamilies.value, [key]: !expandedFamilies.value[key] }
 }
 
+function familyFramesRevealed(parts: LibraryClip[]) {
+  const hidden = parts.filter(part => part.hideThumbnail)
+  return hidden.length > 0 && hidden.every(part => stitchReveal[part.id])
+}
+
+function toggleFamilyFrames(group: { key: string; parts: LibraryClip[] }) {
+  const hidden = group.parts.filter(part => part.hideThumbnail)
+  if (!hidden.length) return
+  const next = !familyFramesRevealed(group.parts)
+  if (next && group.parts.length > 1) {
+    expandedFamilies.value = { ...expandedFamilies.value, [group.key]: true }
+  }
+  for (const part of hidden) stitchReveal[part.id] = next
+}
+
 function chainPartDone(index: number) {
   return index < completedChainStep.value
 }