Keep YuE2 jobs live on the bench and wire target length to semantic tokens.

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

components/studio2/Bench.vue

@@ -49,7 +49,9 @@
       <span aria-hidden="true">{{ isHidden(selected) ? 'Show' : 'Hide' }}</span>
      </button>
      <p v-if="selected && isHidden(selected)" class="text-zinc-400">{{ selected.kind==='track' ? 'Track loaded · preview hidden' : selected.role==='input' ? 'Still loaded · preview hidden' : 'Output hidden' }}</p>
-     <audio v-else-if="selected?.kind==='track'" :key="selected.id" :src="`/api/library/tracks/${selected.id}/audio`" controls class="w-full max-w-xl px-6" />
+     <div v-else-if="selected?.kind==='track'" 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>
      <video v-else-if="selected?.kind==='clip'" :key="selected.id" :src="`/api/library/clips/${selected.id}/video`" controls class="max-h-[65vh] w-full object-contain" />
      <img v-else-if="selected" :src="stillUrl(selected.id)" class="max-h-[65vh] max-w-full object-contain" alt="Current output">
      <p v-else class="text-zinc-500">Select a result to view it here</p>
@@ -128,8 +130,9 @@
       <textarea v-model="music.lyrics" rows="8" class="mt-1 w-full rounded-xl bg-zinc-900 p-3 outline-none ring-amber-300/40 focus:ring-2" :placeholder="lyricsPlaceholder" />
      </label>
      <div class="grid grid-cols-2 gap-3">
-      <label class="block text-sm">Duration (sec)
-       <input v-model.number="music.duration" type="number" min="30" max="150" class="mt-1 w-full rounded-xl bg-zinc-900 p-3 outline-none ring-amber-300/40 focus:ring-2">
+      <label class="block text-sm">Target length (sec)
+       <input v-model.number="music.duration" type="number" min="15" max="150" class="mt-1 w-full rounded-xl bg-zinc-900 p-3 outline-none ring-amber-300/40 focus:ring-2">
+       <span class="mt-1 block text-[11px] text-zinc-500">Caps semantic tokens (~25/s). Actual length follows the model end token — not an FFmpeg trim.</span>
       </label>
       <label class="block text-sm">Seed
        <input v-model="music.seed" placeholder="random" class="mt-1 w-full rounded-xl bg-zinc-900 p-3 outline-none ring-amber-300/40 focus:ring-2">
@@ -167,13 +170,14 @@
      <progress class="h-2 w-full accent-amber-300" max="100" :value="job.progress || 0" />
      <p class="text-xs text-zinc-400">{{ job.message }}</p>
     </div>
-    <div v-for="job in musicJobs" :key="job.id" class="space-y-2 rounded-xl border border-white/10 p-3 text-sm" aria-live="polite">
+    <div v-for="job in musicJobs" :key="job.id" class="space-y-2 rounded-xl border border-amber-300/25 bg-zinc-900 p-3 text-sm" aria-live="polite" role="status">
      <div class="flex justify-between gap-3">
       <strong class="truncate">{{ job.name || 'YuE2' }}</strong>
-      <span class="capitalize text-amber-200">{{ job.status }}</span>
+      <span class="capitalize text-amber-200">{{ job.live?.status || job.status }}</span>
      </div>
-     <p class="text-xs text-zinc-400">Music · {{ job.payload?.duration || '—' }}s</p>
-     <p v-if="job.lastError" role="alert" class="text-red-300">{{ job.lastError }}</p>
+     <p class="text-xs text-zinc-400">YuE2 · target {{ job.duration || '—' }}s<span v-if="job.live?.message"> · {{ job.live.message }}</span></p>
+     <progress v-if="job.live?.progress" class="h-2 w-full accent-amber-300" max="100" :value="job.live.progress || 0" />
+     <p v-if="job.lastError || job.live?.error" role="alert" class="text-red-300">{{ job.lastError || job.live?.error }}</p>
     </div>
     <Studio2JobProgress v-for="job in benchJobs" :key="job.id" :job="job" :now="now" @select="focusJob(job)" @cancel="cancel(job)" />
     <button v-if="folderJobs.some(j=>['complete','failed','cancelled'].includes(j.state)) || musicJobs.some(j=>['complete','done','error','cancelled'].includes(j.status))" type="button" class="text-sm text-zinc-400 outline-none ring-amber-300/40 focus-visible:ring-2" @click="clearFinished">Clear finished</button>
@@ -256,9 +260,9 @@ const uploading=ref(false),uploadMessage=ref('')
 const revealed=ref<Set<string>>(new Set())
 const measured=reactive<Record<string,{width:number;height:number}>>({}),seenOutputs=new Set<string>()
 const loraNames=ref<any>({image:[],video:[]}),now=ref(Date.now()),healthState=ref<any>(null),upscales=ref<any[]>([])
-const gpu=computed(()=>gpuStatus(jobs.value,healthState.value,upscales.value))
 const library=ref<any>({folders:[],stills:[],clips:[],tracks:[]}),jobs=ref<any[]>([]),selected=ref<any>(null)
 const studioQueue=ref<any[]>([])
+const liveMusic=ref<Record<string,any>>({})
 const form=reactive<any>({mode:'generate',engine:'flux',imageStyles:{positive:[],negative:[]},lockFace:true,lockOutfit:true,hideInput:xaigen,folderId:'',identityStillId:'',imageAId:'',imageBId:'',maskId:'',startClipId:'',endStillId:'',guides:[],promptSections:sectionsFrom({}),settings:{aspect:'auto',fps:24,steps:24,cfg:4,seed:null,seedMode:'random',duration:5,turbo:true,loraStack:[]}})
 const music=reactive({tags:DEFAULT_MUSIC_TAGS,lyrics:DEFAULT_MUSIC_LYRICS,duration:60,seed:'',name:''})
 const tagsPlaceholder=DEFAULT_MUSIC_TAGS,lyricsPlaceholder=DEFAULT_MUSIC_LYRICS
@@ -276,7 +280,10 @@ const compiled=computed(()=>compilePrompt(form.promptSections,video.value,form))
 const stillUrl=(id:string)=>`/api/library/stills/${id}`
 const folderJobs=computed(()=>jobs.value.filter(j=>j.request.folderId===form.folderId))
 const benchJobs=computed(()=>queueJobs(folderJobs.value))
-const musicJobs=computed(()=>studioQueue.value.filter((j:any)=>j.kind==='music' && j.payload?.folderId===form.folderId && !['complete','done'].includes(j.status)))
+const musicJobs=computed(()=>studioQueue.value
+ .filter((j:any)=>j.kind==='music' && j.folderId===form.folderId && !['complete','done'].includes(j.status))
+ .map((j:any)=>({...j,live:j.liveJobId?liveMusic.value[j.liveJobId]:null})))
+const gpu=computed(()=>gpuStatus(jobs.value,healthState.value,upscales.value,musicJobs.value))
 const sourceSlot=computed(()=>{const clip=clips.value.find((a:any)=>a.id===form.startClipId);return form.mode==='extend'?(clip?{...clip,kind:'clip'}:null):inputStill.value})
 const pickerAssets=computed(()=>picker.value==='startClipId'?clips.value.map((a:any)=>({...a,kind:'clip'})):stills.value.map((a:any)=>({...a,kind:'still'})))
 const inputStill=computed(()=>stills.value.find((s:any)=>s.id===form.imageAId))
@@ -365,6 +372,14 @@ async function refresh(){
  ])
  jobs.value=nextJobs;library.value=nextLibrary;upscales.value=nextUpscales
  studioQueue.value=Array.isArray(queue)?queue:(queue?.jobs||[])
+ const musicRows=studioQueue.value.filter((j:any)=>j.kind==='music' && j.liveJobId && !['complete','done'].includes(j.status))
+ const liveEntries=await Promise.all(musicRows.map(async(j:any)=>{
+  try{return [j.liveJobId,await $fetch<any>(`/api/generate/${j.liveJobId}`)] as const}
+  catch{return [j.liveJobId,null] as const}
+ }))
+ const nextLive:Record<string,any>={}
+ for(const [id,snap] of liveEntries){if(snap)nextLive[id]=snap}
+ liveMusic.value=nextLive
  const fresh=newestOutput(nextJobs,seenOutputs,form.folderId)
  for(const job of nextJobs)for(const output of job.outputs||[])seenOutputs.add(output.id)
  const existingFresh=family.value.find(a=>a.id===fresh?.id)