Keep the Extend panel put and name sibling clips as branches.

A finished job no longer closes a draft or jumps the page, and a second extend from the same part saves as p8b instead of another p8.

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

pages/library.vue

@@ -261,6 +261,7 @@
           >
           <h2 v-else class="mt-3 font-display text-lg font-bold leading-snug">{{ focused.name }}</h2>
           <p class="mt-1 text-xs text-zinc-500">{{ detailMeta }}</p>
+          <p v-if="focusedBranchHint" class="mt-1 text-xs text-amber-200/80">{{ focusedBranchHint }}</p>
           <p v-if="detailPrompt" class="mt-3 max-h-32 overflow-y-auto whitespace-pre-wrap text-xs text-zinc-400">{{ detailPrompt }}</p>
           <div class="mt-4 flex flex-wrap gap-2">
             <button type="button" class="rounded-full border border-amber-300/40 px-3 py-1.5 text-xs text-amber-100" @click="openInStudio(focused)">Open in Studio</button>
@@ -357,10 +358,12 @@
 <script setup lang="ts">
 import {
   buildLibraryEntries,
-  chronologicalParts,
   chronologicalStills,
+  clipBranchFromLabel,
+  familyBranchHint,
   formatClipDuration,
   formatWhen,
+  treeOrderedParts,
   type LibraryClip,
   type LibraryEntry,
   type LibraryFilter,
@@ -501,7 +504,13 @@ const focusedNavParts = computed(() => {
   const parts = focusedParts.value
   if (parts.length < 2) return []
   if (focused.value?.kind === 'still') return chronologicalStills(parts as LibraryStill[])
-  return chronologicalParts(parts as LibraryClip[])
+  return treeOrderedParts(parts as LibraryClip[]).map(node => node.clip)
+})
+const focusedBranchHint = computed(() => {
+  if (focused.value?.kind !== 'clip' || !focused.value.group) return ''
+  const parts = focused.value.group.parts
+  const current = parts.find(part => part.id === focusedPartId.value)
+  return (current && clipBranchFromLabel(current, parts)) || familyBranchHint(parts)
 })
 const focusedNavIndex = computed(() => {
   const id = focusedPartId.value
@@ -667,7 +676,8 @@ function partCount(entry: LibraryEntry) {
 
 function cardMeta(entry: LibraryEntry) {
   if (entry.kind === 'clip' && entry.group) {
-    return [formatClipDuration(entry.group.head.duration), formatWhen(entry.createdAt)].filter(Boolean).join(' · ')
+    const branches = familyBranchHint(entry.group.parts)
+    return [formatClipDuration(entry.group.head.duration), formatWhen(entry.createdAt), branches].filter(Boolean).join(' · ')
   }
   return formatWhen(entry.createdAt)
 }