Move stage actions into a top chrome bar with Copy and Load menus.

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

components/studio2/Bench.vue

@@ -220,80 +220,99 @@
     </div>
 
     <div class="center-stack">
-     <div class="viewer-frame">
-      <div class="stage-chrome" aria-label="Stage controls">
-       <div class="stage-chrome-top">
+     <div class="stage-chrome" aria-label="Stage controls">
+      <button
+       type="button"
+       class="stage-library"
+       :aria-expanded="libraryOpen ? 'true' : 'false'"
+       @click="libraryOpen=true"
+      >Library<span v-if="familyStillCount" class="stage-library-count">{{ familyStillCount }}</span></button>
+      <div
+       v-if="selected && selected.kind!=='track'"
+       class="stage-actions"
+       aria-label="Selected still actions"
+      >
+       <button type="button" @click="applyUseImage">Use image</button>
+       <button type="button" @click="applyUsePrompt">Use prompt</button>
+       <div class="stage-split">
         <button
          type="button"
-         class="stage-library"
-         :aria-expanded="libraryOpen ? 'true' : 'false'"
-         @click="libraryOpen=true"
-        >Library<span v-if="familyStillCount" class="stage-library-count">{{ familyStillCount }}</span></button>
+         class="stage-split-trigger"
+         :aria-expanded="stageMenu==='copy' ? 'true' : 'false'"
+         @click="stageMenu=stageMenu==='copy'?'':'copy'"
+        >Copy</button>
+        <div v-if="stageMenu==='copy'" class="stage-split-menu" role="menu">
+         <button type="button" role="menuitem" @click="runStageMenu(copySelectedPrompt)">Copy prompt</button>
+         <button type="button" role="menuitem" @click="runStageMenu(copySelectedRawPrompt)">Copy raw prompt</button>
+        </div>
+       </div>
+       <div class="stage-split">
         <button
-         v-if="selected"
          type="button"
-         class="eye-viewer"
-         :aria-pressed="eyeOpen"
-         :aria-label="eyeOpen ? 'Hide output' : 'Show output'"
-         @click.stop="toggleReveal()"
-        >
-         <img :src="eyeOpen ? '/icons/display/eye.svg' : '/icons/display/eye-off.svg'" alt="" width="20" height="20">
-        </button>
-       </div>
-       <div
-        v-if="selected && selected.kind!=='track'"
-        class="stage-actions"
-        aria-label="Selected still actions"
-       >
-        <button type="button" @click.stop="applyUseImage">Use image</button>
-        <button type="button" @click.stop="applyUsePrompt">Use prompt</button>
-        <button type="button" @click.stop="copySelectedPrompt">Copy prompt</button>
-        <button type="button" @click.stop="copySelectedRawPrompt">Copy raw prompt</button>
-        <button type="button" @click.stop="loadInputUsed">Load input</button>
-        <button type="button" @click.stop="loadInputRaw">Load input raw</button>
-        <button type="button" class="stage-action-danger" @click.stop="deleteOutput">Delete</button>
+         class="stage-split-trigger"
+         :aria-expanded="stageMenu==='load' ? 'true' : 'false'"
+         @click="stageMenu=stageMenu==='load'?'':'load'"
+        >Load</button>
+        <div v-if="stageMenu==='load'" class="stage-split-menu" role="menu">
+         <button type="button" role="menuitem" @click="runStageMenu(loadInputUsed)">Load input</button>
+         <button type="button" role="menuitem" @click="runStageMenu(loadInputRaw)">Load input raw</button>
+        </div>
        </div>
+       <button type="button" class="stage-action-danger" @click="deleteOutput">Delete</button>
       </div>
+      <button
+       v-if="selected"
+       type="button"
+       class="eye-viewer"
+       :aria-pressed="eyeOpen"
+       :aria-label="eyeOpen ? 'Hide output' : 'Show output'"
+       @click="toggleReveal()"
+      >
+       <img :src="eyeOpen ? '/icons/display/eye.svg' : '/icons/display/eye-off.svg'" alt="" width="20" height="20">
+      </button>
+     </div>
 
+     <div class="stage-media-row">
       <button
        v-if="family.length > 1"
        type="button"
        class="stage-nav stage-nav-prev"
        aria-label="Previous"
-       @click.stop="stepFamily(-1)"
+       @click="stepFamily(-1)"
       >‹</button>
+      <div class="viewer-frame">
+       <template v-if="selected && isHidden(selected)">
+        <p class="placeholder-still">{{ selected.kind==='track' ? 'Track loaded · preview hidden' : 'Output hidden' }}</p>
+       </template>
+       <template v-else-if="selected?.kind==='track'">
+        <div class="w-full max-w-xl px-6 py-4">
+         <AudioPlayer :src="`/api/library/tracks/${selected.id}/audio`" :download-name="`${selected.name || 'track'}.${selected.ext || 'wav'}`" :label="selected.name || 'Track'" />
+        </div>
+       </template>
+       <template v-else-if="selected?.kind==='clip'">
+        <video
+         ref="viewerVideo"
+         :key="selected.id"
+         :src="`/api/library/clips/${selected.id}/video`"
+         :muted="viewerMuted"
+         @timeupdate="onVideoTime"
+         @loadedmetadata="onVideoTime"
+        />
+       </template>
+       <template v-else-if="selected">
+        <img :src="stillUrl(selected.id)" alt="Selected still">
+       </template>
+       <template v-else>
+        <p class="placeholder-still">Open Library to pick a still or clip</p>
+       </template>
+      </div>
       <button
        v-if="family.length > 1"
        type="button"
        class="stage-nav stage-nav-next"
        aria-label="Next"
-       @click.stop="stepFamily(1)"
+       @click="stepFamily(1)"
       >›</button>
-
-      <template v-if="selected && isHidden(selected)">
-       <p class="placeholder-still">{{ selected.kind==='track' ? 'Track loaded · preview hidden' : 'Output hidden' }}</p>
-      </template>
-      <template v-else-if="selected?.kind==='track'">
-       <div class="w-full max-w-xl px-6 py-4">
-        <AudioPlayer :src="`/api/library/tracks/${selected.id}/audio`" :download-name="`${selected.name || 'track'}.${selected.ext || 'wav'}`" :label="selected.name || 'Track'" />
-       </div>
-      </template>
-      <template v-else-if="selected?.kind==='clip'">
-       <video
-        ref="viewerVideo"
-        :key="selected.id"
-        :src="`/api/library/clips/${selected.id}/video`"
-        :muted="viewerMuted"
-        @timeupdate="onVideoTime"
-        @loadedmetadata="onVideoTime"
-       />
-      </template>
-      <template v-else-if="selected">
-       <img :src="stillUrl(selected.id)" alt="Selected still">
-      </template>
-      <template v-else>
-       <p class="placeholder-still">Open Library to pick a still or clip</p>
-      </template>
      </div>
 
      <div v-if="selected?.kind==='clip'" class="transport">
@@ -576,6 +595,7 @@ const studioQueue=ref<any[]>([])
 const liveMusic=ref<Record<string,any>>({})
 const negativeDraft=ref('')
 const libraryOpen=ref(false)
+const stageMenu=ref<'copy'|'load'|''>('')
 const eyeOpen=ref(!xaigen)
 const hideInputs=ref(!!xaigen)
 const form=reactive<any>({mode:'generate',engine:'flux',enhancePrompt:readStoredEnhancePrompt(),turbo:readStoredTurbo(),imageStyles:{positive:[],negative:readStoredNegatives()},lockFace:true,lockOutfit:true,hideInput:xaigen,folderId:'',identityStillId:'',imageAId:'',imageBId:'',maskId:'',startClipId:'',endStillId:'',guides:[],photos:[],promptSections:sectionsFrom({}),settings:{aspect:'auto',fps:24,steps:24,cfg:4,seed:null,seedMode:'random',duration:5,turbo:true,loraStack:[]}})
@@ -1066,6 +1086,10 @@ function stepFamily(delta:number){
  const next=list[(from + delta + list.length) % list.length]
  if(next) selectOutput(next)
 }
+function runStageMenu(fn:()=>void|Promise<void>){
+ stageMenu.value=''
+ void fn()
+}
 function onLibraryUseImage(item:any){
  if(item)selectOutput(item)
  applyUseImage(item)
@@ -1099,6 +1123,11 @@ function onStageHotkey(e:KeyboardEvent){
  const t=e.target as HTMLElement|null
  if(t && (t.tagName==='INPUT'||t.tagName==='TEXTAREA'||t.isContentEditable))return
  if(libraryOpen.value||picker.value)return
+ if(e.key==='Escape' && stageMenu.value){
+  e.preventDefault()
+  stageMenu.value=''
+  return
+ }
  if(e.key==='l' || e.key==='L'){
   e.preventDefault()
   libraryOpen.value=true
@@ -1114,6 +1143,12 @@ function onStageHotkey(e:KeyboardEvent){
   stepFamily(1)
  }
 }
+function onStagePointerDown(e:PointerEvent){
+ if(!stageMenu.value)return
+ const t=e.target as HTMLElement|null
+ if(t?.closest?.('.stage-split'))return
+ stageMenu.value=''
+}
 function closePicker(){
  const key=picker.value
  if(key.startsWith('photo:'))discardEmptyPhotoDraft(Number(key.slice(6)))
@@ -1204,7 +1239,7 @@ function chooseTask(task:string){
 }
 function onTaskSelect(event:Event){chooseTask((event.target as HTMLSelectElement).value)}
 function chooseClip(id:string){if(!id){form.startClipId='';return}const clip=clips.value.find((c:any)=>c.id===id);if(clip){try{Object.assign(form,bindClip(form,clip,xaigen,loraMemory))}catch(e:any){error.value=e?.message||'Could not copy clip settings.';form.startClipId=clip.id;form.mode='extend';form.engine=xaigen && form.engine==='ltx'?'ltx':'minimax'}}}
-function selectOutput(item:any){selected.value=item;if(form.mode==='extend' && item?.kind==='clip')chooseClip(item.id)}
+function selectOutput(item:any){stageMenu.value='';selected.value=item;if(form.mode==='extend' && item?.kind==='clip')chooseClip(item.id)}
 function restore(item:any){Object.assign(form,restoreAll(form,item,xaigen,loraMemory));form.guides=form.guides||[];batchText.value=''}
 function focusJob(job:any){selectOutput(job.outputs?.at(-1)||null);focusedJobId.value=job.id}
 async function loadLoras(fresh=false){try{loraNames.value=await $fetch('/api/studio-2/loras'+(fresh?'?fresh=1':''))}catch{error.value='Could not refresh LoRAs. The last loaded list is still available.'}}
@@ -1289,7 +1324,10 @@ onMounted(async()=>{
  if(asset){selected.value={...asset,kind:route.query.clip?'clip':route.query.track?'track':'still'};if(route.query.use==='1'&&selected.value.kind!=='track')restore(selected.value);if(xaigen)toggleReveal(asset.id)}
  if(route.query.task==='music')form.mode='music'
  const poll=async()=>{try{await refresh();const health=await $fetch<any>('/api/health');healthState.value=health}catch(e:any){healthState.value=null;error.value=e.data?.statusMessage||e.message}if(!disposed)timer=setTimeout(poll,3000)};void poll()
- if(import.meta.client)window.addEventListener('keydown',onStageHotkey)
+ if(import.meta.client){
+  window.addEventListener('keydown',onStageHotkey)
+  window.addEventListener('pointerdown',onStagePointerDown,true)
+ }
 })
 onBeforeUnmount(()=>{
  disposed=true;clearTimeout(timer);clearInterval(clock)
@@ -1297,6 +1335,7 @@ onBeforeUnmount(()=>{
  if(import.meta.client){
   saveBenchDraft(true)
   window.removeEventListener('keydown',onStageHotkey)
+  window.removeEventListener('pointerdown',onStagePointerDown,true)
  }
 })