Make Studio 2 the home bench with YuE2 music, LTX, and per-preview hide.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-09-15 18:19:34 -05:00
parent a216afc4ce
commit 1db62e9187
14 changed files with 413 additions and 330 deletions
@@ -1,7 +1,7 @@
 <template>
  <nav v-if="!advanced" aria-label="Generation type" class="grid grid-cols-3 gap-2 rounded-2xl border border-white/10 bg-zinc-950/50 p-2">
    <button v-for="kind in ['image', 'video'] as const" :key="kind" type="button" :aria-pressed="current === kind" class="rounded-xl px-3 py-3 font-semibold capitalize" :class="current === kind ? 'bg-amber-400 text-zinc-950' : 'text-zinc-300 hover:bg-white/5'" @click="emit('select', kind)">{{ kind }}</button>
-    <NuxtLink to="/music" class="rounded-xl px-3 py-3 text-center font-semibold" :aria-current="current === 'music' ? 'page' : undefined" :class="current === 'music' ? 'bg-amber-400 text-zinc-950' : 'text-zinc-300 hover:bg-white/5'">Music</NuxtLink>
+    <NuxtLink to="/music?engine=yue2" class="rounded-xl px-3 py-3 text-center font-semibold" :aria-current="current === 'music' ? 'page' : undefined" :class="current === 'music' ? 'bg-amber-400 text-zinc-950' : 'text-zinc-300 hover:bg-white/5'">Music</NuxtLink>
  </nav>
  <div v-else class="mb-4 grid grid-cols-3 gap-3">
    <div
@@ -89,7 +89,7 @@
      :class="current === 'music' ? 'border-amber-300 bg-amber-400/10 text-amber-50' : 'border-white/10 text-zinc-400'"
    >
      <NuxtLink
-        to="/music"
+        to="/music?engine=yue2"
        class="block w-full px-4 pb-3 pt-4 text-left transition"
        :class="current === 'music' ? '' : 'hover:text-zinc-200'"
      >
@@ -99,35 +99,7 @@
        </svg>
        <span class="mt-3 block font-display text-lg font-bold text-zinc-100">Music</span>
      </NuxtLink>
-      <div class="grid grid-cols-3 border-t border-white/10">
+      <p class="border-t border-white/10 px-4 py-2 text-xs text-zinc-400">YuE2 · 3B lyrics-to-song</p>
        <button
          type="button"
          class="border-r border-white/10 px-3 py-2.5 text-left text-sm transition"
          :class="engineBtnClass(current === 'music' && musicEngine === 'ace')"
          @click="pickMusic('ace')"
        >
          <span class="block font-semibold">ACE</span>
          <span class="text-xs opacity-80">Step</span>
        </button>
        <button
          type="button"
          class="border-r border-white/10 px-3 py-2.5 text-left text-sm transition"
          :class="engineBtnClass(current === 'music' && musicEngine === 'yue')"
          @click="pickMusic('yue')"
        >
          <span class="block font-semibold">YuE</span>
          <span class="text-xs opacity-80">v1</span>
        </button>
        <button
          type="button"
          class="px-3 py-2.5 text-left text-sm transition"
          :class="engineBtnClass(current === 'music' && musicEngine === 'yue2')"
          @click="pickMusic('yue2')"
        >
          <span class="block font-semibold">YuE2</span>
          <span class="text-xs opacity-80">3B</span>
        </button>
      </div>
    </div>
  </div>
 </template>
@@ -140,20 +112,19 @@ const props = withDefaults(defineProps<{
  videoEngine?: 'minimax' | 'ltx'
  videoStart?: 'still' | 'text'
  imageEngine?: 'flux' | 'krea'
-  musicEngine?: 'ace' | 'yue' | 'yue2'
+  musicEngine?: 'yue2'
 }>(), {
  ltxEnabled: false,
  videoEngine: 'minimax',
  videoStart: 'still',
  imageEngine: 'flux',
-  musicEngine: 'ace'
+  musicEngine: 'yue2'
 })
 const emit = defineEmits<{
  select: [kind: 'video' | 'image']
  'video-engine': [engine: 'minimax' | 'ltx']
  'image-engine': [engine: 'flux' | 'krea']
  'music-engine': [engine: 'ace' | 'yue' | 'yue2']
 }>()
 function engineBtnClass(active: boolean) {
@@ -170,12 +141,4 @@ function pickImage(engine: 'flux' | 'krea') {
  emit('image-engine', engine)
  if (props.current !== 'image') emit('select', 'image')
 }
 function pickMusic(engine: 'ace' | 'yue' | 'yue2') {
  if (props.current === 'music') {
    emit('music-engine', engine)
    return
  }
  void navigateTo({ path: '/music', query: { engine } })
 }
 </script>
@@ -1,101 +1,309 @@
 <template>
 <main class="w-full min-w-0 space-y-5 p-4 md:p-6 xl:p-8">
-  <header class="flex flex-wrap items-center justify-between gap-4">
+  <header class="flex flex-wrap items-end justify-between gap-4">
-   <div><h1 class="font-display text-3xl font-bold">Studio 2</h1><p class="text-sm text-zinc-400">One hero. Every shot.</p></div>
+   <div>
    <h1 class="font-display text-3xl font-bold tracking-tight text-zinc-50">Studio 2</h1>
    <p class="mt-1 text-sm text-zinc-400">One hero. Every shot.</p>
   </div>
   <div class="flex flex-wrap items-center gap-3">
-    <label class="text-sm">Folder <select v-model="form.folderId" class="rounded-lg bg-zinc-800 p-2"><option v-for="f in library.folders" :value="f.id" :key="f.id">{{ f.name }}</option></select></label>
+    <label class="text-sm text-zinc-300">Folder
-    <label class="text-sm"><input v-model="form.lockFace" type="checkbox"> Lock face <span class="block text-xs text-zinc-500">Face, hair, glasses, body</span></label><label class="text-sm"><input v-model="form.lockOutfit" type="checkbox"> Lock outfit <span class="block text-xs text-zinc-500">Wardrobe from hero</span></label>
+     <select v-model="form.folderId" class="ml-2 rounded-lg border border-white/10 bg-zinc-900 px-3 py-2 outline-none ring-amber-300/40 focus:ring-2">
-    <NuxtLink to="/library" class="text-sm text-amber-200">Library</NuxtLink><NuxtLink to="/" class="text-sm text-zinc-400">Studio 1</NuxtLink>
+      <option v-for="f in library.folders" :key="f.id" :value="f.id">{{ f.name }}</option>
     </select>
    </label>
    <nav class="flex flex-wrap items-center gap-3 text-sm" aria-label="Studio links">
     <NuxtLink to="/library" class="text-amber-200 outline-none ring-amber-300/40 focus-visible:ring-2">Library</NuxtLink>
     <NuxtLink to="/queue" class="text-zinc-300 outline-none ring-amber-300/40 focus-visible:ring-2">Queue</NuxtLink>
     <NuxtLink to="/settings" class="text-zinc-300 outline-none ring-amber-300/40 focus-visible:ring-2">Settings</NuxtLink>
    </nav>
   </div>
  </header>
-  <div class="flex flex-wrap justify-between gap-3 rounded-xl border border-white/10 px-4 py-2 text-sm"><Studio2GpuStatus :status="gpu" /><div v-if="xaigen" class="flex gap-4"><label><input v-model="form.hideInput" type="checkbox"> Hide input stills</label><label><input v-model="hideOutput" type="checkbox"> Hide output preview</label></div></div>
+
-  <nav class="flex flex-wrap gap-2"><button v-for="task in tasks" :key="task" class="rounded-full border px-4 py-2 capitalize" :class="form.mode===task?'border-amber-300 bg-amber-300 text-black':'border-white/15'" @click="chooseTask(task)">{{ task }}</button></nav>
+  <div class="flex flex-wrap items-center justify-between gap-3 rounded-xl border border-white/10 px-4 py-2 text-sm">
   <Studio2GpuStatus :status="gpu" />
  </div>
  <nav class="flex flex-wrap gap-2" aria-label="Tasks">
   <button
    v-for="task in tasks"
    :key="task"
    type="button"
    class="rounded-full border px-4 py-2 capitalize outline-none ring-amber-300/50 focus-visible:ring-2"
    :class="form.mode===task ? 'border-amber-300 bg-amber-300 text-black' : 'border-white/15 text-zinc-200 hover:border-white/30'"
    :aria-pressed="form.mode===task"
    @click="chooseTask(task)"
   >{{ task }}</button>
  </nav>
  <div class="grid min-w-0 gap-6 xl:grid-cols-[minmax(0,3fr)_minmax(24rem,2fr)] 2xl:gap-8">
   <section class="min-w-0 space-y-4">
-    <div class="flex min-h-80 items-center justify-center overflow-hidden rounded-3xl border border-white/10 bg-black">
+    <div class="relative flex min-h-80 items-center justify-center overflow-hidden rounded-3xl border border-white/10 bg-black">
-     <p v-if="selected && xaigen && (hideOutput || (selected.role==='input' && form.hideInput))" class="text-zinc-400">Output loaded · preview hidden</p>
+     <button
      v-if="selected && xaigen"
      type="button"
      class="absolute right-3 top-3 z-10 rounded-full border border-white/20 bg-zinc-950/80 p-2 text-zinc-200 outline-none ring-amber-300/50 hover:border-amber-300/50 focus-visible:ring-2"
      :aria-pressed="!isHidden(selected)"
      :aria-label="isHidden(selected) ? 'Show preview' : 'Hide preview'"
      @click.stop="toggleReveal(selected.id)"
     >
      <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" />
     <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>
    </div>
    <div v-if="selected" class="flex flex-wrap items-start gap-3"><button class="rounded-full border border-white/20 px-4 py-2 text-sm" @click="restore(selected)">Use as input</button><button v-if="selected.kind==='still'" class="rounded-full border border-white/20 px-4 py-2 text-sm" @click="Object.assign(form,useAsSource(form,selected))">Use as source still</button><button v-if="selected.kind==='still'" class="rounded-full border border-white/20 px-4 py-2 text-sm" @click="Object.assign(form,useAsHero(form,selected))">Use as hero</button><button class="rounded-full border border-white/20 px-4 py-2 text-sm" @click="detailsOpen=true">Details</button><button class="rounded-full border border-red-400/40 px-4 py-2 text-sm text-red-200" @click="deleteOutput">Delete</button><VideoUpscaleControl v-if="selected.kind==='clip'" :clip-id="selected.id" queue-only @complete="refresh" /></div>
    <div class="flex min-w-0 max-w-full gap-2 overflow-x-auto" aria-label="Current family outputs"><button v-for="o in family" :key="o.id" @click="selectOutput(o)" class="shrink-0 rounded-lg border p-1" :class="selected?.id===o.id?'border-amber-300':'border-white/10'"><span v-if="previewHidden(o,xaigen,form.hideInput,hideOutput)" class="flex h-20 w-24 items-center justify-center p-1 text-xs text-zinc-400">{{ o.role==='input'?'Still loaded · preview hidden':'Output hidden' }}</span><img v-else :src="o.kind==='clip'?`/api/library/clips/${o.id}/thumb`:stillUrl(o.id)" class="h-20 w-24 rounded object-cover" alt="Family output"></button></div>
    <section aria-label="Source" class="rounded-2xl border border-white/10 p-3"><h2 class="mb-3 text-xs uppercase tracking-wider text-zinc-400">Source</h2><div class="flex flex-wrap gap-4">
     <Studio2AssetSlot label="Hero" :asset="stills.find((a:any)=>a.id===form.identityStillId)" :hidden="inputHidden" upload :disabled="uploading" @pick="picker='identityStillId'" @upload="upload($event,'hero')" />
     <Studio2AssetSlot :label="form.mode==='extend'?'Previous clip':'Start still'" :asset="sourceSlot" :hidden="inputHidden" upload :disabled="uploading" @pick="picker=form.mode==='extend'?'startClipId':'imageAId'" @upload="upload($event,'source')" />
     <Studio2AssetSlot v-if="form.mode==='compose'" label="Second still" :asset="stills.find((a:any)=>a.id===form.imageBId)" :hidden="inputHidden" @pick="picker='imageBId'" />
     <Studio2AssetSlot v-if="form.mode==='refine'" label="Mask" :asset="stills.find((a:any)=>a.id===form.maskId)" :hidden="inputHidden" @pick="picker='maskId'" />
     <Studio2AssetSlot v-if="video" label="End still" :asset="stills.find((a:any)=>a.id===form.endStillId)" :hidden="inputHidden" @pick="picker='endStillId'" />
    </div><label v-if="form.mode==='refine'" class="mt-3 block text-sm">Mask still (white = change). On-canvas mask comes later.<select v-model="form.maskId" class="mt-1 w-full rounded-xl bg-zinc-800 p-2"><option value="">Choose mask still</option><option v-for="a in stills" :key="a.id" :value="a.id">{{ assetLabel(a) }}</option></select></label><p v-if="uploading || uploadMessage" role="status" class="mt-2 text-sm text-amber-200">{{ uploading?'Uploading image…':uploadMessage }}</p></section>
    <details v-if="video" class="rounded-xl border border-white/10 p-3"><summary>Add Guide stills</summary><div v-for="(g,i) in form.guides" :key="i" class="mt-2 flex gap-2"><Studio2AssetSlot label="Guide" :asset="stills.find((a:any)=>a.id===g.stillId)" :hidden="inputHidden" @pick="picker='guide:'+i" /><input v-model.number="g.frame" type="number" min="1" aria-label="Guide frame" class="w-20 bg-zinc-800 p-2"><button @click="form.guides.splice(i,1)">Remove</button></div><button class="mt-3 text-amber-200" @click="form.guides.push({stillId:'',frame:24})">Add guide</button></details>
   </section>
   <section class="min-w-0 space-y-4">
-    <label class="block">Prompt<textarea v-model="form.promptSections.action" rows="4" class="mt-1 w-full rounded-xl bg-zinc-900 p-3" placeholder="Describe the image or the shot." /></label>
+    <div v-if="selected" class="flex flex-wrap items-start gap-3">
-    <Studio2PromptControls v-if="video" v-model="form.promptSections" /><Studio2StyleChips v-else v-model="form.imageStyles" />
+     <button v-if="selected.kind!=='track'" class="rounded-full border border-white/20 px-4 py-2 text-sm outline-none ring-amber-300/40 focus-visible:ring-2" @click="restore(selected)">Use as input</button>
-    <label v-if="video" class="block">Extra constraints (optional) — do not repeat the Prompt. Example: keep the black glasses, no extra people.<textarea v-model="form.promptSections.locks" rows="2" class="mt-1 w-full rounded-xl bg-zinc-900 p-3" /></label>
+     <button v-if="selected.kind==='still'" class="rounded-full border border-white/20 px-4 py-2 text-sm outline-none ring-amber-300/40 focus-visible:ring-2" @click="Object.assign(form,useAsSource(form,selected))">Use as source still</button>
-    <details v-if="video || form.mode==='edit'" class="rounded-xl border border-white/10 p-3"><summary>{{ video?'Queue more shots':'Queue extra edit passes' }}</summary><p class="mt-2 text-xs text-zinc-400">Each blank-line-separated block is another job. Hero and settings stay. Press Enter twice between shots. A wrapped sentence is still one shot.{{ video?'':' Each extra pass edits the previous result with Klein.' }}</p><textarea v-model="batchText" rows="5" class="mt-2 w-full rounded-xl bg-zinc-900 p-3" placeholder="First additional prompt&#10;&#10;Next additional prompt" /></details>
+     <button v-if="selected.kind==='still'" class="rounded-full border border-white/20 px-4 py-2 text-sm outline-none ring-amber-300/40 focus-visible:ring-2" @click="Object.assign(form,useAsHero(form,selected))">Use as hero</button>
-    <button class="text-sm text-amber-200" @click="settingsOpen=true">Generation settings</button>
+     <button v-if="selected.kind!=='track'" class="rounded-full border border-white/20 px-4 py-2 text-sm outline-none ring-amber-300/40 focus-visible:ring-2" @click="detailsOpen=true">Details</button>
-    <p v-if="error" role="alert" class="text-sm text-red-300">{{ error }}</p>
+     <button class="rounded-full border border-red-400/40 px-4 py-2 text-sm text-red-200 outline-none ring-amber-300/40 focus-visible:ring-2" @click="deleteOutput">Delete</button>
-    <p v-if="form.mode==='extend'" class="text-sm text-amber-200">{{ form.startClipId ? 'Extend · '+(clips.find((c:any)=>c.id===form.startClipId)?.name || form.startClipId)+' · last frame' : 'Select the clip in the family strip or Previous clip.' }}</p>
+     <VideoUpscaleControl v-if="selected.kind==='clip'" :clip-id="selected.id" queue-only @complete="refresh" />
    </div>
    <div class="flex min-w-0 max-w-full gap-2 overflow-x-auto" aria-label="Current family outputs">
     <div
      v-for="o in family"
      :key="o.id"
      class="relative shrink-0 rounded-lg border p-1"
      :class="selected?.id===o.id ? 'border-amber-300' : 'border-white/10'"
     >
      <button type="button" class="block outline-none ring-amber-300/40 focus-visible:ring-2" @click="selectOutput(o)">
       <span v-if="isHidden(o)" class="flex h-20 w-24 items-center justify-center p-1 text-xs text-zinc-400">{{ o.kind==='track' ? 'Audio hidden' : o.role==='input' ? 'Still loaded · preview hidden' : 'Output hidden' }}</span>
       <span v-else-if="o.kind==='track'" class="flex h-20 w-24 items-center justify-center rounded bg-zinc-900 text-xs text-amber-100">Audio</span>
       <img v-else :src="o.kind==='clip' ? `/api/library/clips/${o.id}/thumb` : stillUrl(o.id)" class="h-20 w-24 rounded object-cover" alt="Family output">
      </button>
      <button
       v-if="xaigen"
       type="button"
       class="absolute right-1 top-1 rounded-md border border-white/20 bg-zinc-950/80 px-1.5 py-0.5 text-[10px] text-zinc-200 outline-none ring-amber-300/50 focus-visible:ring-2"
       :aria-label="isHidden(o) ? 'Show tile' : 'Hide tile'"
       :aria-pressed="!isHidden(o)"
       @click.stop="toggleReveal(o.id)"
      >{{ isHidden(o) ? 'Show' : 'Hide' }}</button>
     </div>
    </div>
    <section v-if="form.mode!=='music'" aria-label="Source" class="rounded-2xl border border-white/10 p-3">
     <div class="mb-3 flex flex-wrap items-start justify-between gap-3">
      <h2 class="text-xs uppercase tracking-wider text-zinc-400">Source</h2>
      <div class="flex flex-wrap gap-4 text-sm text-zinc-300" aria-label="Identity locks">
       <label class="flex items-start gap-2"><input v-model="form.lockFace" type="checkbox" class="mt-1 accent-amber-400"><span>Lock face<span class="block text-xs text-zinc-500">Face, hair, glasses, body</span></span></label>
       <label class="flex items-start gap-2"><input v-model="form.lockOutfit" type="checkbox" class="mt-1 accent-amber-400"><span>Lock outfit<span class="block text-xs text-zinc-500">Wardrobe from hero</span></span></label>
      </div>
     </div>
     <div class="flex flex-wrap gap-4">
      <Studio2AssetSlot label="Hero" :asset="stills.find((a:any)=>a.id===form.identityStillId)" :hidden="slotHidden(form.identityStillId)" upload :disabled="uploading" @pick="picker='identityStillId'" @upload="upload($event,'hero')" />
      <Studio2AssetSlot :label="form.mode==='extend'?'Previous clip':'Start still'" :asset="sourceSlot" :hidden="slotHidden(form.mode==='extend'?form.startClipId:form.imageAId)" upload :disabled="uploading" @pick="picker=form.mode==='extend'?'startClipId':'imageAId'" @upload="upload($event,'source')" />
      <Studio2AssetSlot v-if="form.mode==='compose'" label="Second still" :asset="stills.find((a:any)=>a.id===form.imageBId)" :hidden="slotHidden(form.imageBId)" @pick="picker='imageBId'" />
      <Studio2AssetSlot v-if="form.mode==='refine'" label="Mask" :asset="stills.find((a:any)=>a.id===form.maskId)" :hidden="slotHidden(form.maskId)" @pick="picker='maskId'" />
      <Studio2AssetSlot v-if="video" label="End still" :asset="stills.find((a:any)=>a.id===form.endStillId)" :hidden="slotHidden(form.endStillId)" @pick="picker='endStillId'" />
     </div>
     <label v-if="form.mode==='refine'" class="mt-3 block text-sm">Mask still (white = change). On-canvas mask comes later.
      <select v-model="form.maskId" class="mt-1 w-full rounded-xl bg-zinc-800 p-2"><option value="">Choose mask still</option><option v-for="a in stills" :key="a.id" :value="a.id">{{ assetLabel(a) }}</option></select>
     </label>
     <p v-if="uploading || uploadMessage" role="status" class="mt-2 text-sm text-amber-200">{{ uploading?'Uploading image…':uploadMessage }}</p>
    </section>
    <details v-if="video" class="rounded-xl border border-white/10 p-3"><summary>Add Guide stills</summary>
     <div v-for="(g,i) in form.guides" :key="i" class="mt-2 flex gap-2">
      <Studio2AssetSlot label="Guide" :asset="stills.find((a:any)=>a.id===g.stillId)" :hidden="slotHidden(g.stillId)" @pick="picker='guide:'+i" />
      <input v-model.number="g.frame" type="number" min="1" aria-label="Guide frame" class="w-20 bg-zinc-800 p-2">
      <button type="button" @click="form.guides.splice(i,1)">Remove</button>
     </div>
     <button type="button" class="mt-3 text-amber-200" @click="form.guides.push({stillId:'',frame:24})">Add guide</button>
    </details>
   </section>
   <section class="min-w-0 space-y-4">
    <template v-if="form.mode==='music'">
     <p class="text-sm text-zinc-400">YuE2 · lyrics-to-song · plan → synthesize → decode</p>
     <label class="block text-sm">Genre / style tags
      <textarea v-model="music.tags" rows="3" class="mt-1 w-full rounded-xl bg-zinc-900 p-3 outline-none ring-amber-300/40 focus:ring-2" :placeholder="tagsPlaceholder" />
     </label>
     <label class="block text-sm">Lyrics
      <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>
      <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">
      </label>
     </div>
     <label class="block text-sm">Track name (optional)
      <input v-model="music.name" class="mt-1 w-full rounded-xl bg-zinc-900 p-3 outline-none ring-amber-300/40 focus:ring-2" placeholder="Optional track name">
     </label>
    </template>
    <template v-else>
     <label class="block">Prompt<textarea v-model="form.promptSections.action" rows="4" class="mt-1 w-full rounded-xl bg-zinc-900 p-3 outline-none ring-amber-300/40 focus:ring-2" placeholder="Describe the image or the shot." /></label>
     <Studio2PromptControls v-if="video" v-model="form.promptSections" />
     <Studio2StyleChips v-else v-model="form.imageStyles" />
     <label v-if="video" class="block">Extra constraints (optional) — do not repeat the Prompt. Example: keep the black glasses, no extra people.
      <textarea v-model="form.promptSections.locks" rows="2" class="mt-1 w-full rounded-xl bg-zinc-900 p-3 outline-none ring-amber-300/40 focus:ring-2" />
     </label>
     <details v-if="video || form.mode==='edit'" class="rounded-xl border border-white/10 p-3">
      <summary>{{ video?'Queue more shots':'Queue extra edit passes' }}</summary>
      <p class="mt-2 text-xs text-zinc-400">Each blank-line-separated block is another job. Hero and settings stay. Press Enter twice between shots. A wrapped sentence is still one shot.{{ video?'':' Each extra pass edits the previous result with Klein.' }}</p>
      <textarea v-model="batchText" rows="5" class="mt-2 w-full rounded-xl bg-zinc-900 p-3 outline-none ring-amber-300/40 focus:ring-2" placeholder="First additional prompt&#10;&#10;Next additional prompt" />
     </details>
     <button type="button" class="text-sm text-amber-200 outline-none ring-amber-300/40 focus-visible:ring-2" @click="settingsOpen=true">Generation settings</button>
     <p v-if="!video && form.engine==='krea'" class="text-sm text-zinc-400">Krea does not attach the hero identity reference.</p>
-    <button :disabled="submitting" @click="queue" class="w-full rounded-2xl bg-amber-300 p-4 font-semibold text-black disabled:opacity-50">{{ submitting?'Queuing…':'Queue' }}</button>
+     <p v-if="form.mode==='extend'" class="text-sm text-amber-200">{{ form.startClipId ? 'Extend · '+(clips.find((c:any)=>c.id===form.startClipId)?.name || form.startClipId)+' · last frame' : 'Select the clip in the family strip or Previous clip.' }}</p>
    </template>
    <p v-if="error" role="alert" class="text-sm text-red-300">{{ error }}</p>
    <button type="button" :disabled="submitting" class="w-full rounded-2xl bg-amber-300 p-4 font-semibold text-black outline-none ring-amber-300/60 focus-visible:ring-2 disabled:opacity-50" @click="queue">{{ submitting?'Queuing…':'Queue' }}</button>
    <h2 class="text-sm font-semibold text-zinc-300">Job queue</h2>
-    <div v-for="job in upscales.filter(j=>j.folderId===form.folderId && ['queued','running'].includes(j.status))" :key="job.id" class="space-y-2 rounded-xl border border-amber-300/25 bg-zinc-900 p-4 text-sm" role="status"><div class="flex justify-between gap-3"><strong>Video upscale</strong><span class="capitalize text-amber-200">{{ job.status }}</span></div><p class="truncate text-zinc-300">{{ job.name }}</p><p class="text-xs text-zinc-400">{{ job.width?job.width+' × '+job.height+' · ':'' }}{{ Math.round((job.elapsedMs||0)/1000) }}s elapsed</p><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 upscales.filter(j=>j.folderId===form.folderId && ['queued','running'].includes(j.status))" :key="job.id" class="space-y-2 rounded-xl border border-amber-300/25 bg-zinc-900 p-4 text-sm" role="status">
     <div class="flex justify-between gap-3"><strong>Video upscale</strong><span class="capitalize text-amber-200">{{ job.status }}</span></div>
     <p class="truncate text-zinc-300">{{ job.name }}</p>
     <p class="text-xs text-zinc-400">{{ job.width?job.width+' × '+job.height+' · ':'' }}{{ Math.round((job.elapsedMs||0)/1000) }}s elapsed</p>
     <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 class="flex justify-between gap-3">
      <strong class="truncate">{{ job.name || 'YuE2' }}</strong>
      <span class="capitalize text-amber-200">{{ 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>
    </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))" class="text-sm text-zinc-400" @click="clearFinished">Clear finished</button>
+    <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>
   </section>
  </div>
  <div v-if="settingsOpen || detailsOpen" class="fixed inset-0 z-50 bg-black/70" @click.self="settingsOpen=false;detailsOpen=false">
-   <aside class="absolute inset-y-0 right-0 w-full max-w-md overflow-auto border-l border-white/15 bg-zinc-950 p-6"><button class="float-right" @click="settingsOpen=false;detailsOpen=false">Close</button>
+   <aside class="absolute inset-y-0 right-0 w-full max-w-md overflow-auto border-l border-white/15 bg-zinc-950 p-6">
-    <template v-if="settingsOpen"><h2 class="mb-6 text-xl font-semibold">Generation settings</h2><label class="mb-4 block">Engine<select v-model="form.engine" class="mt-1 w-full rounded bg-zinc-800 p-2"><template v-if="video"><option value="minimax">MiniMax H3</option></template><template v-else><option value="flux">Flux Klein 9B Base</option><option value="krea" :disabled="['edit','compose','iterate'].includes(form.mode)">Krea 2 (Generate / Refine)</option></template></select></label><AspectRatioPick v-model="form.settings.aspect" heading="Aspect" :options="aspectOptions" /><p class="my-3 text-sm text-zinc-400">{{ resolvedSize.width }} × {{ resolvedSize.height }} · fit with padding, never stretch</p><label v-for="key in ['steps','cfg',...(video?['duration','fps']:[])]" :key="key" class="mb-4 block capitalize">{{ key }}<input v-model.number="form.settings[key]" type="number" class="mt-1 w-full rounded bg-zinc-800 p-2"></label><label class="mb-4 block">Seed · {{ form.settings.seedMode==='locked'?'Locked':'Random each job' }}<input :value="form.settings.seed" type="number" min="0" max="2147483647" class="mt-1 w-full rounded bg-zinc-800 p-2" @input="form.settings.seed=Number(($event.target as HTMLInputElement).value);form.settings.seedMode='locked'"></label><button class="mb-4 text-sm text-amber-200" @click="form.settings.seedMode='random';form.settings.seed=randomSeed()">Random</button><label v-if="video"><input v-model="form.settings.turbo" type="checkbox"> Turbo</label><LoraSelect v-model="form.settings.loraStack" class="mt-5" :names="pickerLoras" :use="currentLoraUse" :clip-strength="true" filename-subtitle :aliases="{...loraNames.aliases,...library.loraAliases}" :triggers="{...loraNames.triggers,...library.loraTriggers}" missing-label="No cached LoRAs yet — Refresh to check Comfy" @insert-trigger="form.promptSections.action += ' '+$event" /><button class="mt-2 text-sm text-amber-200" @click="loadLoras(true)">Refresh LoRAs</button><details class="mt-6"><summary>Compiled prompt</summary><pre class="whitespace-pre-wrap text-xs text-zinc-400">{{ compiled }}</pre><p v-if="!video" class="mt-3 text-xs text-zinc-400">Negative: {{ stylePrompt(form.imageStyles,true) || 'None' }}</p></details></template>
+    <button type="button" class="float-right outline-none ring-amber-300/40 focus-visible:ring-2" @click="settingsOpen=false;detailsOpen=false">Close</button>
-    <template v-else><h2 class="mb-6 text-xl font-semibold">Output details</h2><Studio2Details :metadata="selected?.studio2" /></template>
+    <template v-if="settingsOpen">
     <h2 class="mb-6 text-xl font-semibold">Generation settings</h2>
     <label class="mb-4 block">Engine
      <select v-model="form.engine" class="mt-1 w-full rounded bg-zinc-800 p-2 outline-none ring-amber-300/40 focus:ring-2">
       <template v-if="video">
        <option value="minimax">MiniMax H3</option>
        <option v-if="xaigen" value="ltx">LTX Pink Cherry</option>
       </template>
       <template v-else>
        <option value="flux">Flux Klein 9B Base</option>
        <option value="krea" :disabled="['edit','compose','iterate'].includes(form.mode)">Krea 2 (Generate / Refine)</option>
       </template>
      </select>
     </label>
     <AspectRatioPick v-model="form.settings.aspect" heading="Aspect" :options="aspectOptions" />
     <p class="my-3 text-sm text-zinc-400">{{ resolvedSize.width }} × {{ resolvedSize.height }} · fit with padding, never stretch</p>
     <label v-for="key in ['steps','cfg',...(video?['duration','fps']:[])]" :key="key" class="mb-4 block capitalize">{{ key }}
      <input v-model.number="form.settings[key]" type="number" class="mt-1 w-full rounded bg-zinc-800 p-2 outline-none ring-amber-300/40 focus:ring-2">
     </label>
     <label class="mb-4 block">Seed · {{ form.settings.seedMode==='locked'?'Locked':'Random each job' }}
      <input :value="form.settings.seed" type="number" min="0" max="2147483647" class="mt-1 w-full rounded bg-zinc-800 p-2 outline-none ring-amber-300/40 focus:ring-2" @input="form.settings.seed=Number(($event.target as HTMLInputElement).value);form.settings.seedMode='locked'">
     </label>
     <button type="button" class="mb-4 text-sm text-amber-200 outline-none ring-amber-300/40 focus-visible:ring-2" @click="form.settings.seedMode='random';form.settings.seed=randomSeed()">Random</button>
     <label v-if="video"><input v-model="form.settings.turbo" type="checkbox" class="accent-amber-400"> Turbo</label>
     <LoraSelect v-model="form.settings.loraStack" class="mt-5" :names="pickerLoras" :use="currentLoraUse" :clip-strength="true" filename-subtitle :aliases="{...loraNames.aliases,...library.loraAliases}" :triggers="{...loraNames.triggers,...library.loraTriggers}" missing-label="No cached LoRAs yet — Refresh to check Comfy" @insert-trigger="form.promptSections.action += ' '+$event" />
     <button type="button" class="mt-2 text-sm text-amber-200 outline-none ring-amber-300/40 focus-visible:ring-2" @click="loadLoras(true)">Refresh LoRAs</button>
     <details class="mt-6"><summary>Compiled prompt</summary>
      <pre class="whitespace-pre-wrap text-xs text-zinc-400">{{ compiled }}</pre>
      <p v-if="!video" class="mt-3 text-xs text-zinc-400">Negative: {{ stylePrompt(form.imageStyles,true) || 'None' }}</p>
     </details>
    </template>
    <template v-else>
     <h2 class="mb-6 text-xl font-semibold">Output details</h2>
     <Studio2Details :metadata="selected?.studio2" />
    </template>
   </aside>
  </div>
  <div v-if="picker" class="fixed inset-0 z-50 flex items-center justify-center bg-black/80 p-6" @click.self="picker=''">
-   <section role="dialog" aria-modal="true" aria-label="Choose source asset" class="max-h-[80vh] w-full max-w-4xl overflow-auto rounded-2xl border border-white/15 bg-zinc-950 p-5"><div class="mb-4 flex justify-between"><h2>Choose {{ picker==='identityStillId'?'hero':'source' }}</h2><button @click="picker=''">Close</button></div><button class="mb-4 text-sm text-zinc-400" @click="pickAsset(null)">Clear slot</button><div class="grid grid-cols-2 gap-3 sm:grid-cols-4 lg:grid-cols-5"><button v-for="a in pickerAssets" :key="a.id" class="rounded-xl border border-white/15 p-2 text-left" @click="pickAsset(a)"><span v-if="inputHidden" class="flex h-24 items-center text-xs text-zinc-400">Still loaded · preview hidden</span><img v-else :src="a.kind==='clip'?'/api/library/clips/'+a.id+'/thumb':stillUrl(a.id)" class="h-24 w-full object-contain" alt="Source option"><span class="mt-2 block truncate text-xs">{{ assetLabel(a) }}</span></button></div></section>
+   <section role="dialog" aria-modal="true" aria-label="Choose source asset" class="max-h-[80vh] w-full max-w-4xl overflow-auto rounded-2xl border border-white/15 bg-zinc-950 p-5">
    <div class="mb-4 flex justify-between"><h2>Choose {{ picker==='identityStillId'?'hero':'source' }}</h2><button type="button" @click="picker=''">Close</button></div>
    <button type="button" class="mb-4 text-sm text-zinc-400" @click="pickAsset(null)">Clear slot</button>
    <div class="grid grid-cols-2 gap-3 sm:grid-cols-4 lg:grid-cols-5">
     <button v-for="a in pickerAssets" :key="a.id" type="button" class="rounded-xl border border-white/15 p-2 text-left outline-none ring-amber-300/40 focus-visible:ring-2" @click="pickAsset(a)">
      <span v-if="isHidden(a)" class="flex h-24 items-center text-xs text-zinc-400">Still loaded · preview hidden</span>
      <img v-else :src="a.kind==='clip'?'/api/library/clips/'+a.id+'/thumb':stillUrl(a.id)" class="h-24 w-full object-contain" alt="Source option">
      <span class="mt-2 block truncate text-xs">{{ assetLabel(a) }}</span>
     </button>
    </div>
   </section>
  </div>
 </main>
 </template>
 <script setup lang="ts">
 import {createLoraMemory,loraUse} from '~/shared/studio2/lora-memory.mjs'
 import {filterLorasForStudio,filterLorasForUse} from '~/utils/loras'
 import {compilePrompt,sectionsFrom} from '~/shared/studio2/contracts.mjs'
-import {aspectOptions,resolveSize,bindClip,restoreAsset,extendSelected,changeSource,restoreAll,useAsHero,useAsSource} from '~/shared/studio2/input.mjs'
+import {aspectOptions,resolveSize,bindClip,changeSource,restoreAll,useAsHero,useAsSource} from '~/shared/studio2/input.mjs'
-import {folderAssets,newestOutput,assetLabel,reconcileSelection,activeJobs,previewHidden} from '~/shared/studio2/viewer.mjs'
+import {folderAssets,newestOutput,assetLabel,reconcileSelection,previewHidden} from '~/shared/studio2/viewer.mjs'
 import {queueJobs} from '~/shared/studio2/queue-view.mjs'
 import {gpuStatus} from '~/shared/studio2/status.mjs'
 import {applyUploadedStill} from '~/shared/studio2/upload.mjs'
 const xaigen=useRuntimeConfig().public.studio==='xaigen',hideOutput=ref(false),picker=ref('')
 const inputHidden=computed(()=>xaigen && form.hideInput)
 const uploading=ref(false),uploadMessage=ref('')
 import {parseBatch,stylePrompt} from '~/shared/studio2/styles.mjs'
 import {randomSeed} from '~/shared/studio2/seed.mjs'
 import {DEFAULT_MUSIC_LYRICS,DEFAULT_MUSIC_TAGS} from '~/utils/music'
 const xaigen=useRuntimeConfig().public.studio==='xaigen'
 const picker=ref('')
 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:[]}),jobs=ref<any[]>([]),selected=ref<any>(null)
+const library=ref<any>({folders:[],stills:[],clips:[],tracks:[]}),jobs=ref<any[]>([]),selected=ref<any>(null)
-const form=reactive<any>({mode:'generate',engine:'flux',imageStyles:{positive:[],negative:[]},lockFace:true,lockOutfit:true,hideInput:false,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 studioQueue=ref<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
 let loraMemory=createLoraMemory(xaigen)
 const currentLoraUse=computed(()=>loraUse(form))
 const pickerLoras=computed(()=>!xaigen && currentLoraUse.value==='ltx'?[]:filterLorasForUse(filterLorasForStudio([...loraNames.value.image,...loraNames.value.video],xaigen),currentLoraUse.value))
 watch(()=>[currentLoraUse.value,form.settings.loraStack],()=>loraMemory.sync(form),{deep:true,flush:'sync'})
 const route=useRoute()
-const tasks=['generate','edit','compose','refine','video','extend'],settingsOpen=ref(false),detailsOpen=ref(false),submitting=ref(false),error=ref(''),batchText=ref('')
+const tasks=['generate','edit','compose','refine','video','extend','music']
-const video=computed(()=>['video','extend'].includes(form.mode)),stills=computed(()=>library.value.stills.filter((s:any)=>s.folderId===form.folderId)),clips=computed(()=>library.value.clips.filter((s:any)=>s.folderId===form.folderId)),compiled=computed(()=>compilePrompt(form.promptSections,video.value,form))
+const settingsOpen=ref(false),detailsOpen=ref(false),submitting=ref(false),error=ref(''),batchText=ref('')
 const video=computed(()=>['video','extend'].includes(form.mode))
 const stills=computed(()=>library.value.stills.filter((s:any)=>s.folderId===form.folderId))
 const clips=computed(()=>library.value.clips.filter((s:any)=>s.folderId===form.folderId))
 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 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 activeJob=computed(()=>folderJobs.value.find(j=>!['complete','failed','cancelled'].includes(j.state)))
 const inputStill=computed(()=>stills.value.find((s:any)=>s.id===form.imageAId))
 const family=computed(()=>folderAssets(library.value,jobs.value,form.folderId))
 const sourceAsset=computed(()=>form.startClipId?clips.value.find((c:any)=>c.id===form.startClipId):stills.value.find((s:any)=>s.id===(form.imageAId||form.identityStillId)))
 const sourceSize=computed(()=>measured[sourceAsset.value?.id] || sourceAsset.value)
 const resolvedSize=computed(()=>resolveSize(form.settings.aspect,sourceSize.value))
 function isHidden(asset:any){return previewHidden(asset,revealed.value,xaigen)}
 function slotHidden(id:string){return xaigen && !!id && !revealed.value.has(id)}
 function toggleReveal(id:string){
 if(!id)return
 const next=new Set(revealed.value)
 if(next.has(id))next.delete(id);else next.add(id)
 revealed.value=next
 if(import.meta.client)localStorage.setItem(`studio2-revealed:${form.folderId}`,JSON.stringify([...next]))
 }
 function loadRevealed(folderId:string){
 if(!import.meta.client||!xaigen){revealed.value=new Set();return}
 try{revealed.value=new Set(JSON.parse(localStorage.getItem(`studio2-revealed:${folderId}`)||'[]'))}
 catch{revealed.value=new Set()}
 }
 watch(()=>sourceAsset.value?.id,id=>{const asset=sourceAsset.value;if(!import.meta.client||!asset||measured[id])return;const media=asset.id===form.startClipId?document.createElement('video'):new Image();if(media.tagName==='VIDEO')(media as HTMLVideoElement).preload='metadata';const done=()=>{measured[asset.id]={width:(media as HTMLVideoElement).videoWidth||(media as HTMLImageElement).naturalWidth,height:(media as HTMLVideoElement).videoHeight||(media as HTMLImageElement).naturalHeight}};media.addEventListener(media.tagName==='VIDEO'?'loadedmetadata':'load',done,{once:true});media.src=media.tagName==='VIDEO'?`/api/library/clips/${asset.id}/video`:stillUrl(asset.id)})
 function chooseTask(task:string){
 if(task==='music'){form.mode='music';return}
 if(task==='extend'){
  form.mode='extend'
  form.engine=xaigen && form.engine==='ltx'?'ltx':'minimax'
@@ -106,42 +314,78 @@ function chooseTask(task:string){
  }
  return
 }
-  const was=video.value;form.mode=task;form.startClipId='';if(video.value!==was){form.engine=video.value?'minimax':'flux';form.settings.steps=video.value?8:24;form.settings.cfg=video.value?1.5:4}
+ const was=video.value;form.mode=task;form.startClipId='';if(video.value!==was){form.engine=video.value?(xaigen && form.engine==='ltx'?'ltx':'minimax'):'flux';form.settings.steps=video.value?8:24;form.settings.cfg=video.value?1.5:4}
 }
 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 sourceChanged(){Object.assign(form,changeSource(form))}
 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)}
 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.'}}
 function pickAsset(asset:any){const key=picker.value;if(key.startsWith('guide:'))form.guides[Number(key.split(':')[1])].stillId=asset?.id||'';else if(key==='startClipId')chooseClip(asset?.id||'');else form[key]=asset?.id||'';picker.value=''}
 async function clearFinished(){await $fetch('/api/studio-2/clear-finished',{method:'POST'});await refresh()}
-async function deleteOutput(){if(!selected.value)return;try{await $fetch('/api/library/'+(selected.value.kind==='clip'?'clips/':'stills/')+selected.value.id,{method:'DELETE'});await refresh()}catch(e:any){error.value=e.data?.statusMessage||e.message}}
+async function deleteOutput(){
-async function queue(){submitting.value=true;error.value='';try{if(form.settings.seedMode!=='locked')form.settings.seed=randomSeed();const queued=await $fetch<any>('/api/studio-2/jobs',{method:'POST',body:{...form,mode:form.mode==='edit' && parseBatch(batchText.value).length?'iterate':form.mode,hideInput:inputHidden.value,hideOutput:xaigen && hideOutput.value,promptSections:video.value?form.promptSections:{action:form.promptSections.action},settings:{...form.settings,...resolvedSize.value},batch:video.value || form.mode==='edit'?parseBatch(batchText.value):[]}});form.settings.seed=queued.seed;form.settings.width=queued.width;form.settings.height=queued.height;await refresh()}catch(e:any){error.value=e.data?.statusMessage||e.message}finally{submitting.value=false}}
+ if(!selected.value)return
 try{
  const kind=selected.value.kind==='clip'?'clips/':selected.value.kind==='track'?'tracks/':'stills/'
  await $fetch('/api/library/'+kind+selected.value.id,{method:'DELETE'})
  await refresh()
 }catch(e:any){error.value=e.data?.statusMessage||e.message}
 }
 async function queue(){
 submitting.value=true;error.value=''
 try{
  if(form.mode==='music'){
   await $fetch('/api/generate/music',{method:'POST',body:{engine:'yue2',tags:music.tags,lyrics:music.lyrics,duration:music.duration,seed:music.seed||'random',folderId:form.folderId,name:music.name}})
   await refresh()
   return
  }
  if(form.settings.seedMode!=='locked')form.settings.seed=randomSeed()
  const queued=await $fetch<any>('/api/studio-2/jobs',{method:'POST',body:{...form,mode:form.mode==='edit' && parseBatch(batchText.value).length?'iterate':form.mode,hideInput:xaigen,hideOutput:false,promptSections:video.value?form.promptSections:{action:form.promptSections.action},settings:{...form.settings,...resolvedSize.value},batch:video.value || form.mode==='edit'?parseBatch(batchText.value):[]}})
  form.settings.seed=queued.seed;form.settings.width=queued.width;form.settings.height=queued.height
  await refresh()
 }catch(e:any){error.value=e.data?.statusMessage||e.message}
 finally{submitting.value=false}
 }
 async function cancel(job:any){await $fetch('/api/studio-2/cancel',{method:'POST',body:{id:job.id}});await refresh()}
 async function upload(event:Event,target:'source'|'hero'){
 const input=event.target as HTMLInputElement,file=input.files?.[0];if(!file)return
 uploading.value=true;uploadMessage.value='';error.value=''
- const body=new FormData();body.append('image',file);body.append('folderId',form.folderId);body.append('hideInput',String(form.hideInput))
+ const body=new FormData();body.append('image',file);body.append('folderId',form.folderId);body.append('hideInput',String(xaigen))
 try{const response=await $fetch<any>('/api/studio-2/stills',{method:'POST',body});library.value=response;Object.assign(form,applyUploadedStill(form,response,target));measured[response.still.id]={width:response.still.width,height:response.still.height};uploadMessage.value=`Loaded ${response.still.name || file.name} as ${target==='hero'?'hero identity':'start still'}.`}
 catch(e:any){error.value=e.data?.statusMessage||e.message}
 finally{uploading.value=false;input.value=''}
 }
 async function refresh(){
- const [nextJobs,nextLibrary,nextUpscales]=await Promise.all([$fetch<any[]>('/api/studio-2/jobs'),$fetch<any>('/api/studio-2/library'),$fetch<any[]>('/api/studio-2/upscales')])
+ const [nextJobs,nextLibrary,nextUpscales,queue]=await Promise.all([
  $fetch<any[]>('/api/studio-2/jobs'),
  $fetch<any>('/api/studio-2/library'),
  $fetch<any[]>('/api/studio-2/upscales'),
  $fetch<any>('/api/studio-queue?full=1').catch(()=>({jobs:[]}))
 ])
 jobs.value=nextJobs;library.value=nextLibrary;upscales.value=nextUpscales
 studioQueue.value=Array.isArray(queue)?queue:(queue?.jobs||[])
 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)
 const newestTrack=(library.value.tracks||[]).filter((t:any)=>t.folderId===form.folderId).sort((a:any,b:any)=>(b.createdAt||0)-(a.createdAt||0))[0]
 if(newestTrack && !seenOutputs.has(newestTrack.id)){seenOutputs.add(newestTrack.id);selected.value={...newestTrack,kind:'track'};return}
 selected.value=existingFresh || reconcileSelection(selected.value,family.value)
 }
-watch(()=>form.folderId,id=>{selected.value=null;form.imageAId='';form.startClipId='';if(import.meta.client)form.identityStillId=localStorage.getItem(`studio2-hero:${id}`)||''},{flush:'sync'})
+watch(()=>form.folderId,id=>{selected.value=null;form.imageAId='';form.startClipId='';loadRevealed(id);if(import.meta.client)form.identityStillId=localStorage.getItem(`studio2-hero:${id}`)||''},{flush:'sync'})
 watch(()=>form.identityStillId,id=>{if(import.meta.client&&form.folderId)localStorage.setItem(`studio2-hero:${form.folderId}`,id)})
 watch(hideOutput,value=>{if(import.meta.client)localStorage.setItem('studio2-hide-output',String(value))})
 watch(()=>form.hideInput,value=>{if(import.meta.client)localStorage.setItem('studio2-hide-input',String(value))})
 let timer:ReturnType<typeof setTimeout>,clock:ReturnType<typeof setInterval>,disposed=false
-onMounted(async()=>{let storage;try{storage=localStorage}catch{};loraMemory=createLoraMemory(xaigen,storage);loraMemory.sync(form);form.settings.seed=randomSeed();form.hideInput=xaigen && localStorage.getItem('studio2-hide-input')==='true';hideOutput.value=xaigen && localStorage.getItem('studio2-hide-output')==='true';clock=setInterval(()=>{now.value=Date.now()},1000);void loadLoras();library.value=await $fetch('/api/studio-2/library');form.folderId=library.value.folders[0]?.id||'';const id=String(route.query.still||route.query.clip||'');const asset=[...library.value.stills,...library.value.clips].find((a:any)=>a.id===id);if(asset){selected.value={...asset,kind:route.query.clip?'clip':'still'};if(route.query.use==='1')restore(selected.value)};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()})
+onMounted(async()=>{
 let storage;try{storage=localStorage}catch{}
 loraMemory=createLoraMemory(xaigen,storage);loraMemory.sync(form);form.settings.seed=randomSeed()
 clock=setInterval(()=>{now.value=Date.now()},1000);void loadLoras()
 library.value=await $fetch('/api/studio-2/library');form.folderId=library.value.folders[0]?.id||'';loadRevealed(form.folderId)
 const id=String(route.query.still||route.query.clip||route.query.track||'')
 const asset=[...library.value.stills,...library.value.clips,...(library.value.tracks||[])].find((a:any)=>a.id===id)
 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()
 })
 onBeforeUnmount(()=>{disposed=true;clearTimeout(timer);clearInterval(clock)})
 </script>
@@ -0,0 +1,3 @@
 <template>
  <Studio2Bench />
 </template>
@@ -1,7 +1,7 @@
 <template>
  <div class="min-h-dvh min-w-0">
    <AppHeader
-      :subtitle="advanced ? headerSubtitle : 'Create music from text'"
+      :subtitle="advanced ? 'YuE2 · lyrics-to-song' : 'Create music from text'"
      current="music"
      :queue-count="queueCount"
    />
@@ -10,9 +10,8 @@
      <StudioKindCards
        :advanced="advanced"
        current="music"
-        :music-engine="engineFamily"
+        music-engine="yue2"
        @select="goStudio"
        @music-engine="selectEngineFamily"
      />
      <div class="flex items-center justify-between gap-3"><span class="rounded-full border border-amber-300/60 px-4 py-2 text-sm text-amber-100">From text</span><label class="flex items-center gap-2 text-sm text-zinc-300"><input v-model="advanced" type="checkbox" class="accent-amber-400">Advanced mode</label></div>
      <div class="grid min-w-0 gap-6 lg:grid-cols-[minmax(0,1fr)_minmax(0,1fr)] lg:items-stretch">
@@ -20,43 +19,15 @@
        <div>
          <h2 class="font-display text-2xl font-bold">Music Generator</h2>
          <p class="mt-1 text-sm text-zinc-400">
-            Tags describe style and voice. Lyrics use structure chips. Instrumental skips the vocal line.
+            Tags describe style and voice. Lyrics use structure chips. Multiple sections are OK.
          </p>
        </div>
        <GenerationSettings :advanced="advanced">
-          <label class="block space-y-2 text-sm"><span>Model</span><select :value="engineFamily" class="w-full rounded-xl border border-white/15 bg-zinc-900 p-3" @change="selectEngineFamily(($event.target as HTMLSelectElement).value as 'ace' | 'yue' | 'yue2')"><option value="ace">ACE-Step</option><option value="yue">YuE</option><option value="yue2">YuE2</option></select></label>
+          <p class="text-xs text-zinc-400">YuE2-3B · lyrics with section tags · plan → synthesize → decode · no score editor</p>
          <label v-if="engineFamily === 'yue'" class="block space-y-2 text-sm">
            <span>YuEGP profile</span>
            <select v-model.number="yueProfile" class="w-full rounded-xl border border-white/15 bg-zinc-900 p-3">
              <option :value="1">1 · Full quality · 16GB (default)</option>
              <option :value="3">3 · Lower memory · Manual fallback</option>
            </select>
            <span class="block text-xs text-zinc-400">One lyric section. Compile off. Profile 3 is never selected automatically.</span>
          </label>
          <p v-else-if="engineFamily === 'yue2'" class="text-xs text-zinc-400">YuE2-3B · lyrics with section tags · plan → synthesize → decode · no score editor</p>
          <div v-if="!advanced" class="space-y-4">
            <label v-if="engineFamily === 'ace'" class="block text-sm">Steps<input v-model.number="steps" type="number" :min="stepsMin" :max="stepsMax" class="mt-2 w-full rounded-xl border border-white/15 bg-zinc-900 p-3"></label>
            <label class="block text-sm">Seed<input v-model="seed" placeholder="random" class="mt-2 w-full rounded-xl border border-white/15 bg-zinc-900 p-3"></label>
          </div>
        <div v-if="engineFamily === 'ace'" class="flex items-center justify-between gap-3 rounded-2xl border border-white/10 bg-zinc-950/40 px-4 py-3 text-sm">
          <span class="min-w-0">
            <span class="flex items-center gap-2">
              <span class="block font-medium text-zinc-200">ACE-Step 1.5</span>
              <InfoTip
                aria-label="What ACE-Step 1.5 does"
                :text="ace15Info"
              />
            </span>
            <span class="mt-0.5 block text-xs text-zinc-500">Turbo AIO checkpoint. Different graph than v1, usually 8 steps.</span>
          </span>
          <label class="relative inline-flex h-6 w-11 shrink-0 cursor-pointer items-center" title="Toggle ACE-Step 1.5">
            <input v-model="ace15" 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" />
          </label>
        </div>
        </GenerationSettings>
        <p v-if="error" class="rounded-2xl border border-red-400/30 bg-red-400/10 px-4 py-3 text-sm text-red-200">{{ error }}</p>
@@ -73,18 +44,13 @@
        <div>
          <div class="mb-1 flex flex-wrap items-center justify-between gap-2">
            <span class="text-sm font-medium text-zinc-300">Lyrics</span>
            <label class="flex cursor-pointer items-center gap-2 text-xs text-zinc-400">
              <input v-model="instrumental" :disabled="engineFamily === 'yue' || engineFamily === 'yue2'" type="checkbox" class="accent-amber-400">
              Instrumental
            </label>
          </div>
          <div class="mb-2 flex flex-wrap gap-1.5">
            <button
              v-for="chip in chips"
              :key="chip"
              type="button"
-              class="rounded-full border border-white/10 px-2.5 py-1 text-[11px] text-zinc-300 hover:border-amber-300/50 hover:text-white disabled:opacity-40"
+              class="rounded-full border border-white/10 px-2.5 py-1 text-[11px] text-zinc-300 hover:border-amber-300/50 hover:text-white"
              :disabled="instrumental"
              @click="insertChip(chip)"
            >{{ chip }}</button>
          </div>
@@ -92,8 +58,7 @@
            ref="lyricsEl"
            v-model="lyrics"
            rows="12"
-            class="max-h-[min(28rem,50vh)] w-full overflow-y-auto rounded-2xl border border-white/10 bg-zinc-950/70 px-4 py-3 text-sm outline-none ring-amber-300/40 placeholder:text-zinc-600 [overflow-wrap:anywhere] focus:ring-2 disabled:opacity-50"
+            class="max-h-[min(28rem,50vh)] w-full overflow-y-auto rounded-2xl border border-white/10 bg-zinc-950/70 px-4 py-3 text-sm outline-none ring-amber-300/40 placeholder:text-zinc-600 [overflow-wrap:anywhere] focus:ring-2"
            :disabled="instrumental"
            :placeholder="lyricsPlaceholder"
          />
        </div>
@@ -109,19 +74,7 @@
              :max="durationMax"
              step="5"
            >
-            <span class="mt-1 block text-[11px] text-zinc-500">{{ engineFamily === 'yue' ? 'Approximate length · one lyric section' : engineFamily === 'yue2' ? 'Approximate length · multiple sections OK' : `${durationMin}–${durationMax} seconds` }}</span>
+            <span class="mt-1 block text-[11px] text-zinc-500">Approximate length · multiple sections OK</span>
          </label>
          <label v-if="advanced && engineFamily === 'ace'" class="block text-sm">
            <span class="mb-1 block font-medium text-zinc-300">Steps · {{ steps }}</span>
            <input
              v-model.number="steps"
              type="range"
              class="aigen-slider w-full"
              :min="stepsMin"
              :max="stepsMax"
              step="1"
            >
            <span class="mt-1 block text-[11px] text-zinc-500">{{ ace15 ? '8 is the usual 1.5 turbo range' : '30–50 is the usual range' }}</span>
          </label>
        </div>
@@ -209,7 +162,7 @@
        </div>
        <p v-if="busy && !queued && jobId" class="text-xs text-zinc-400">
          {{ musicElapsed }} elapsed · {{ musicActivityText }}
-          <span v-if="(activeMusicEngine === 'yue' || activeMusicEngine === 'yue2') && !indeterminateMusic" class="mt-1 block">Progress is for the current stage.</span>
+          <span v-if="!indeterminateMusic" class="mt-1 block">Progress is for the current stage.</span>
          <span v-if="indeterminateMusic" class="mt-1 block">Waiting for a progress report.</span>
        </p>
        <AudioPlayer
@@ -236,18 +189,10 @@ const { advanced } = useStudioLayout()
 import {
  DEFAULT_MUSIC_LYRICS,
  DEFAULT_MUSIC_TAGS,
  MUSIC_CFG_DEFAULT,
  MUSIC_CFG_DEFAULT_15,
  MUSIC_DURATION_DEFAULT,
  MUSIC_DURATION_MAX,
  MUSIC_DURATION_MIN,
  MUSIC_STEPS_DEFAULT,
  MUSIC_STEPS_DEFAULT_15,
  MUSIC_STEPS_MAX,
  MUSIC_STEPS_MIN,
  MUSIC_STRUCTURE_CHIPS,
  parseMusicEngine,
  type MusicEngine,
  yueLyricsProblem,
 } from '~/utils/music'
 import { ensureGenerationNotifyPermission, notifyGenerationComplete } from '~/utils/generationNotify'
@@ -259,25 +204,16 @@ const tagsPlaceholder = DEFAULT_MUSIC_TAGS
 const lyricsPlaceholder = DEFAULT_MUSIC_LYRICS
 const chips = MUSIC_STRUCTURE_CHIPS
 const durationMin = MUSIC_DURATION_MIN
-const durationMax = computed(() => (engineFamily.value === 'yue' || engineFamily.value === 'yue2') ? 150 : MUSIC_DURATION_MAX)
+const durationMax = MUSIC_DURATION_MAX
 const stepsMin = MUSIC_STEPS_MIN
 const stepsMax = MUSIC_STEPS_MAX
 const ace15Info = 'Turns on ACE-Step 1.5 Turbo, the all-in-one checkpoint already on Beast. 1.5 uses a different Comfy graph than v1: a 1.5 text encoder (tags, BPM, key, duration) and EmptyAceStep1.5LatentAudio, usually with 8 sampler steps and CFG 1. Songs often come back faster and cleaner. Lyrics-strength from v1 does not apply. Leave this off to stay on ACE-Step v1 3.5B, which is the graph that already generated on this GPU.'
 const tags = ref(DEFAULT_MUSIC_TAGS)
 const lyrics = ref(DEFAULT_MUSIC_LYRICS)
 const instrumental = ref(false)
 const duration = ref(MUSIC_DURATION_DEFAULT)
 const steps = ref(MUSIC_STEPS_DEFAULT)
 const seed = ref('')
 const name = ref('')
 const folderId = ref('')
 const folders = ref<LibraryFolder[]>([])
 const lyricsEl = ref<HTMLTextAreaElement | null>(null)
 const ace15 = ref(false)
 const engineFamily = ref<'ace' | 'yue' | 'yue2'>('ace')
 const yueProfile = ref<1 | 3>(1)
 const busy = ref(false)
 const forceClearing = ref(false)
 const error = ref('')
@@ -285,10 +221,9 @@ const status = ref('')
 const progress = ref(0)
 const musicClock = ref(Date.now())
 const musicStartedAt = ref(0)
 const activeMusicEngine = ref('')
 const musicActivity = ref<{ checkedAt: number; running: boolean } | null>(null)
 let musicClockTimer: ReturnType<typeof setInterval> | null = null
-const indeterminateMusic = computed(() => !queued.value && (activeMusicEngine.value === 'yue' || activeMusicEngine.value === 'yue2') && progress.value < 98 && !musicActivity.value?.running)
+const indeterminateMusic = computed(() => !queued.value && progress.value < 98 && !musicActivity.value?.running)
 const recentMusicCheck = computed(() => Boolean(musicActivity.value?.running && musicClock.value - musicActivity.value.checkedAt < 15000))
 const musicElapsed = computed(() => {
  const seconds = musicStartedAt.value ? Math.max(0, Math.floor((musicClock.value - musicStartedAt.value) / 1000)) : 0
@@ -318,64 +253,19 @@ let queuePoll: ReturnType<typeof setInterval> | null = null
 let recoverPoll: ReturnType<typeof setInterval> | null = null
 const blocked = computed(() => Boolean(blockReason.value))
 const headerSubtitle = computed(() => {
  if (engineFamily.value === 'yue2') return 'YuE2 · lyrics-to-song'
  if (engineFamily.value === 'yue') return 'YuE · lyrics-to-song'
  return ace15.value ? 'ACE-Step 1.5 · vocals' : 'ACE-Step · vocals'
 })
 const selectedEngine = computed<MusicEngine>(() => {
  if (engineFamily.value === 'yue2') return 'yue2'
  if (engineFamily.value === 'yue') return 'yue'
  return ace15.value ? 'ace-step-1.5' : 'ace-step'
 })
 const blockReason = computed(() => {
  if (!folderId.value) return 'Choose a library folder before generating.'
-  if ((engineFamily.value === 'yue' || engineFamily.value === 'yue2') && instrumental.value) return 'YuE requires lyrics. Use ACE for instrumental music.'
+  if (duration.value > 150) return 'YuE2 supports up to 150 seconds.'
  if ((engineFamily.value === 'yue' || engineFamily.value === 'yue2') && duration.value > 150) return 'YuE supports up to 150 seconds per section.'
  if (!tags.value.trim()) return 'Add genre and style tags.'
-  if (engineFamily.value === 'yue') { const problem = yueLyricsProblem(lyrics.value); if (problem) return problem }
+  const problem = yueLyricsProblem(lyrics.value)
-  if (engineFamily.value === 'yue2' && !lyrics.value.trim()) return 'Write lyrics for YuE2.'
+  if (problem) return problem
  if (!instrumental.value && !lyrics.value.trim()) return 'Write lyrics, or turn on Instrumental.'
  return ''
 })
 function selectEngineFamily(family: 'ace' | 'yue' | 'yue2') {
  engineFamily.value = family
  if (family === 'yue' || family === 'yue2') { instrumental.value = false; duration.value = Math.min(150, duration.value) }
  if (family === 'yue' && lyrics.value === DEFAULT_MUSIC_LYRICS) lyrics.value = '[Verse 1]\n'
  if (family === 'ace' && ace15.value && steps.value === MUSIC_STEPS_DEFAULT) {
    steps.value = MUSIC_STEPS_DEFAULT_15
  }
  if (family === 'ace' && !ace15.value && steps.value === MUSIC_STEPS_DEFAULT_15) {
    steps.value = MUSIC_STEPS_DEFAULT
  }
 }
 function goStudio(kind: 'video' | 'image') {
  void navigateTo({ path: '/', query: { studio: kind } })
 }
 function applyEngine(engine: MusicEngine) {
  if (engine === 'yue2') {
    engineFamily.value = 'yue2'
    ace15.value = false
    return
  }
  if (engine === 'yue') {
    engineFamily.value = 'yue'
    ace15.value = false
    return
  }
  engineFamily.value = 'ace'
  ace15.value = engine === 'ace-step-1.5'
 }
 watch(ace15, (on) => {
  if (engineFamily.value !== 'ace') return
  if (on && (steps.value === MUSIC_STEPS_DEFAULT || steps.value >= 30)) steps.value = MUSIC_STEPS_DEFAULT_15
  if (!on && steps.value === MUSIC_STEPS_DEFAULT_15) steps.value = MUSIC_STEPS_DEFAULT
 })
 function insertChip(chip: string) {
  const el = lyricsEl.value
  const token = `${chip}\n`
@@ -461,11 +351,7 @@ async function attachLiveMusic(opts: {
  if (typeof opts.progress === 'number') progress.value = opts.progress
  if (opts.message) status.value = opts.message
  else if (!status.value || /queueing|waiting for a generate|waiting in the job queue|waiting for gpu/i.test(status.value)) {
-    status.value = selectedEngine.value === 'yue'
+    status.value = 'YuE2 is generating your song'
      ? 'YuEGP is generating your song'
      : selectedEngine.value === 'yue2'
        ? 'YuE2 is generating your song'
        : 'Generating…'
  }
  if (jobId.value !== liveId) {
    musicActivity.value = null
@@ -508,11 +394,7 @@ async function refreshStudioQueue() {
    busy.value = true
    status.value = musicRow.status === 'held'
      ? 'Paused in the job queue'
-      : (selectedEngine.value === 'yue'
+      : 'Waiting for the GPU to run YuE2'
        ? 'Waiting for the GPU to run YuEGP'
        : selectedEngine.value === 'yue2'
          ? 'Waiting for the GPU to run YuE2'
          : 'Waiting in the job queue…')
  }
  if (!studioJobId.value) return
@@ -522,11 +404,7 @@ async function refreshStudioQueue() {
      queued.value = false
    }
    if (jobId.value && /waiting in the job queue/i.test(status.value)) {
-      status.value = selectedEngine.value === 'yue'
+      status.value = 'YuE2 is generating your song'
        ? 'YuEGP is generating your song'
        : selectedEngine.value === 'yue2'
          ? 'YuE2 is generating your song'
          : 'Generating…'
    }
    return
  }
@@ -535,11 +413,7 @@ async function refreshStudioQueue() {
    busy.value = true
    status.value = row.status === 'held'
      ? 'Paused in the job queue'
-      : (selectedEngine.value === 'yue'
+      : 'Waiting for the GPU to run YuE2'
        ? 'Waiting for the GPU to run YuEGP'
        : selectedEngine.value === 'yue2'
          ? 'Waiting for the GPU to run YuE2'
          : 'Waiting in the job queue…')
    return
  }
  if (row.status === 'running' && row.liveJobId) {
@@ -574,7 +448,6 @@ async function resumeActiveMusic() {
 function applyEvent(payload: Record<string, any>) {
  if (typeof payload.elapsedMs === 'number') musicStartedAt.value = Date.now() - payload.elapsedMs
  if (payload.engine) activeMusicEngine.value = payload.engine
  if (payload.musicActivity) musicActivity.value = payload.musicActivity
  if (payload.message) status.value = payload.message
  if (typeof payload.progress === 'number') progress.value = payload.progress
@@ -682,13 +555,7 @@ async function generate() {
  trackId.value = ''
  jobId.value = ''
  studioJobId.value = ''
-  status.value = engineFamily.value === 'yue'
+  status.value = 'Queueing YuE2…'
    ? 'Queueing YuE…'
    : engineFamily.value === 'yue2'
      ? 'Queueing YuE2…'
      : ace15.value
        ? 'Queueing ACE-Step 1.5…'
        : 'Queueing ACE-Step…'
  try {
    const started = await $fetch<{ jobId: string; studioJobId?: string; queued?: boolean; name?: string }>(
      '/api/generate/music',
@@ -698,14 +565,10 @@ async function generate() {
          tags: tags.value,
          lyrics: lyrics.value,
          duration: duration.value,
          steps: steps.value,
          seed: seed.value || 'random',
          cfg: selectedEngine.value === 'ace-step-1.5' ? MUSIC_CFG_DEFAULT_15 : MUSIC_CFG_DEFAULT,
          instrumental: instrumental.value,
          folderId: folderId.value,
          name: name.value.trim(),
-          engine: selectedEngine.value,
+          engine: 'yue2'
          ...(engineFamily.value === 'yue' ? { yueProfile: yueProfile.value } : {})
        }
      }
    )
@@ -731,10 +594,6 @@ async function generate() {
  }
 }
 watch(instrumental, (on) => {
  if (on && !lyrics.value.trim()) lyrics.value = DEFAULT_MUSIC_LYRICS
 })
 function applyIncomingMusic() {
  try {
    const genRaw = sessionStorage.getItem(LOAD_GENERATION_PAYLOAD_KEY)
@@ -745,14 +604,10 @@ function applyIncomingMusic() {
        const payload = loaded.payload
        if (typeof payload.prompt === 'string') tags.value = payload.prompt
        if (typeof payload.lyrics === 'string') lyrics.value = payload.lyrics
-        instrumental.value = payload.instrumental === true
+        if (typeof payload.duration === 'number') duration.value = Math.min(MUSIC_DURATION_MAX, payload.duration)
        if (typeof payload.duration === 'number') duration.value = payload.duration
        if (typeof payload.steps === 'number') steps.value = payload.steps
        if (payload.seed != null) seed.value = String(payload.seed)
        if (typeof payload.name === 'string') name.value = payload.name
        if (payload.folderId && folders.value.some(folder => folder.id === payload.folderId)) folderId.value = payload.folderId
        if (payload.yueProfile === 1 || payload.yueProfile === 3) yueProfile.value = payload.yueProfile
        if (payload.musicEngine || payload.engine) applyEngine(parseMusicEngine(payload.musicEngine || payload.engine))
        status.value = 'Loaded from generation log'
        return
      }
@@ -767,24 +622,16 @@ function applyIncomingMusic() {
      name?: string
      tags?: string
      lyrics?: string
      instrumental?: boolean
      duration?: number
      steps?: number
      seed?: string
      folderId?: string
      engine?: string
      yueProfile?: 1 | 3
    }
    if (typeof loaded.tags === 'string') tags.value = loaded.tags
    if (typeof loaded.lyrics === 'string') lyrics.value = loaded.lyrics
-    instrumental.value = loaded.instrumental === true
+    if (typeof loaded.duration === 'number') duration.value = Math.min(MUSIC_DURATION_MAX, loaded.duration)
    if (typeof loaded.duration === 'number') duration.value = loaded.duration
    if (typeof loaded.steps === 'number') steps.value = loaded.steps
    if (typeof loaded.seed === 'string') seed.value = loaded.seed
    if (typeof loaded.name === 'string') name.value = loaded.name
    if (loaded.folderId && folders.value.some(folder => folder.id === loaded.folderId)) folderId.value = loaded.folderId
    if (loaded.engine) applyEngine(parseMusicEngine(loaded.engine))
    yueProfile.value = loaded.yueProfile === 3 ? 3 : 1
    status.value = 'Loaded from the queue'
  } catch { /* ignore */ }
 }
@@ -800,12 +647,8 @@ function applyPreset() {
  const settings = preset.settings as MusicPresetSettings
  if (typeof settings.tags === 'string') tags.value = settings.tags
  if (typeof settings.lyrics === 'string') lyrics.value = settings.lyrics
-  instrumental.value = settings.instrumental === true
+  if (typeof settings.duration === 'number') duration.value = Math.min(MUSIC_DURATION_MAX, settings.duration)
  if (typeof settings.duration === 'number') duration.value = settings.duration
  if (typeof settings.steps === 'number') steps.value = settings.steps
  if (typeof settings.seed === 'number') seed.value = String(settings.seed)
  if (settings.engine) applyEngine(settings.engine)
  yueProfile.value = settings.yueProfile === 3 ? 3 : 1
  name.value = preset.name
 }
@@ -813,14 +656,12 @@ onMounted(async () => {
  musicClockTimer = setInterval(() => { musicClock.value = Date.now() }, 1000)
  await loadLibrary()
  await loadMusicPresets()
  const route = useRoute()
  const engineQ = String(route.query.engine || '').toLowerCase()
  if (engineQ === 'yue' || engineQ === 'yue2' || engineQ === 'ace') selectEngineFamily(engineQ as 'ace' | 'yue' | 'yue2')
  applyIncomingMusic()
  await resumeActiveMusic()
  await refreshStudioQueue()
  stopQueuePoll()
  queuePoll = setInterval(() => { void refreshStudioQueue() }, 8000)
  const route = useRoute()
  const query = route.query
  if (typeof query.track === 'string' && query.track) {
    audioUrl.value = `/api/library/tracks/${query.track}/audio`
@@ -834,7 +675,7 @@ onMounted(async () => {
      if (recovered?.trackId && /recovered/i.test(String(recovered.message || ''))) {
        applyEvent({ ...recovered, type: 'complete' })
      }
-    } catch { /* nothing waiting in ComfyUI */ }
+    } catch { /* nothing waiting */ }
  }
 })
@@ -663,7 +663,7 @@ function progressLine(queue: Queue) {
 function jobLine(job: StudioJobRow) {
  if (job.kind === 'music') {
-    if (job.status === 'waiting') return job.cutIn ? 'Next after the current shot · ACE-Step' : 'Waiting · ACE-Step'
+    if (job.status === 'waiting') return job.cutIn ? 'Next after the current shot · YuE2' : 'Waiting · YuE2'
    if (job.status === 'held') return 'Paused'
    if (job.status === 'error') return job.lastError || 'Failed'
    return 'Generating track'
@@ -1237,7 +1237,7 @@ async function clearAll() {
 async function forceClearAll() {
  if (forceClearing.value) return
  if (!confirm(
-    'Force clear cancels every running and waiting job (including stuck YuE/music), wipes shot batches, and kills Comfy if it is wedged. Saved library clips stay. Continue?'
+    'Force clear cancels every running and waiting job (including stuck YuE2/music), wipes shot batches, and kills Comfy if it is wedged. Saved library clips stay. Continue?'
  )) return
  forceClearing.value = true
  error.value = ''
@@ -5408,7 +5408,7 @@ function studioJobStatusLabel(job: { status: string; cutIn?: boolean; holdForCut
 function studioJobShotLine(job: { kind?: string; shotCount: number; completedCount?: number; status: string }) {
  if (job.kind === 'music') {
-    return String(job.payload?.engine || '').toLowerCase() === 'yue' ? 'YuE' : 'ACE-Step'
+    return 'YuE2'
  }
  if (job.kind === 'edit') {
    const total = job.shotCount || 1
@@ -1,7 +1,6 @@
 <template>
-  <div v-if="config.public.studio === 'xaigen'" class="border-b border-amber-400/20 bg-zinc-950 px-6 py-3 text-sm text-amber-100">xAIGen 2.0 development preview · Image and MiniMax tools are available here. <NuxtLink to="/" class="underline">Open the existing studio for LTX and music</NuxtLink>.</div>
+  <div />
  <Studio2Bench />
 </template>
 <script setup lang="ts">
-const config = useRuntimeConfig()
+await navigateTo('/', { replace: true })
 </script>
@@ -14,8 +14,6 @@ export default defineEventHandler(async (event) => {
        throw createError({ statusCode: e.statusCode || 400, statusMessage: e.message });
    }
    const video = ['video', 'extend'].includes(request.mode);
    if (video && request.engine !== 'minimax')
        throw createError({ statusCode: 400, statusMessage: 'Use the existing xAIGen studio for LTX. Studio 2 video currently supports MiniMax.' });
    request.settings.loraStack = parsePostedLoraStack(request.settings.loraStack, video ? 'video' : 'image');
    request.settings.loraStack = filterLoraStackForUse(request.settings.loraStack, request.engine, useRuntimeConfig().public.studio === 'xaigen');
    if (!video)
@@ -5,5 +5,5 @@ export default defineEventHandler(event => {
 const { owner } = assertLibraryOwner(event);
 const library = publicLibrary(event);
 const catalog=studio2LoraCatalog(owner);
- return {...library,loraAliases:catalog.aliases,loraTriggers:catalog.triggers, stills:library.stills.filter(s=>existsSync(stillPath(owner,s.id))), clips:library.clips.filter(c=>existsSync(clipVideoPath(owner,c.id)))};
+ return {...library,loraAliases:catalog.aliases,loraTriggers:catalog.triggers, stills:library.stills.filter(s=>existsSync(stillPath(owner,s.id))), clips:library.clips.filter(c=>existsSync(clipVideoPath(owner,c.id))), tracks:library.tracks || []};
 });
@@ -50,10 +50,6 @@ export default defineEventHandler(async (event) => {
      payload.prompt = text(body.tags, 2000)
      row.prompt = payload.prompt
    }
    if (body.yueProfile != null && row.kind === 'music' && payload.musicEngine === 'yue') {
      if (body.yueProfile !== 1 && body.yueProfile !== 3) throw createError({ statusCode: 400, statusMessage: 'Choose YuEGP profile 1 or 3.' })
      payload.yueProfile = body.yueProfile
    }
    if (body.lyrics != null) payload.lyrics = text(body.lyrics)
    const instrumental = optionalBool(body.instrumental)
    if (instrumental != null) payload.instrumental = instrumental
@@ -63,8 +59,8 @@ export default defineEventHandler(async (event) => {
    if (body.negative != null) payload.negative = text(body.negative, 2000)
    const duration = optionalNumber(body.duration)
    if (duration != null) {
-      if (row.kind === 'music' && payload.musicEngine === 'yue') {
+      if (row.kind === 'music') {
-        if (!Number.isInteger(duration) || duration < 30 || duration > 150) throw createError({ statusCode: 400, statusMessage: 'YuEGP duration must be 30–150 seconds.' })
+        if (!Number.isInteger(duration) || duration < 30 || duration > 150) throw createError({ statusCode: 400, statusMessage: 'YuE2 duration must be 30–150 seconds.' })
        payload.duration = duration
      } else payload.duration = Math.min(120, Math.max(0.5, duration))
    }
@@ -74,8 +74,6 @@ async function prepareGraph(r: any) {
    let graph: any;
    if (['video', 'extend'].includes(q.mode)) {
        if (q.engine !== 'minimax')
            throw new Error('Studio 2 native identity video currently requires MiniMax. Use the existing xAIGen studio for LTX.');
        let start = a;
        if (q.startClipId) {
            const dir = join(studio2Root(), r.id);
@@ -86,6 +84,37 @@ async function prepareGraph(r: any) {
            start = await upload(r, 'start', readFileSync(dest));
            unlinkSync(dest);
        }
        if (q.engine === 'ltx') {
            const { buildWorkflow } = await import('../workflow');
            const { frameLength } = await import('../videoChain');
            const { ltxWorkflowEnabled, LTX_DISABLED_MESSAGE } = await import('~/utils/videoModels');
            if (!ltxWorkflowEnabled()) throw new Error(LTX_DISABLED_MESSAGE);
            if (!start) throw new Error('Choose a start still for LTX video.');
            const fps = s.fps || 24;
            graph = buildWorkflow({
                workflow: 'ltx',
                imageName: start,
                prompt: q.compiledPrompt,
                width: s.width,
                height: s.height,
                length: frameLength(s.duration || 5, fps),
                fps,
                steps: s.steps,
                cfg: s.cfg,
                seed: s.seed,
                samplerName: 'euler',
                scheduler: 'simple',
                turbo: false,
                duration: s.duration || 5,
                filenamePrefix: prefix + '/video',
                loraStack: s.loraStack,
                useIdentityRefs: false
            });
            await ensureComfyLoraNames('video');
            r.graphId = 'workflow_ltx_video.json';
        } else {
            if (q.engine !== 'minimax')
                throw new Error('Studio 2 video supports MiniMax H3 and LTX (xAIGen).');
            const end = await load(q.endStillId, 'end'), guides = [];
            for (const [i, g] of q.guides.entries())
                guides.push({ image: await load(g.stillId, `guide${i}`), frame: g.frame });
@@ -95,6 +124,7 @@ async function prepareGraph(r: any) {
            applyUserLoraToGraph(graph, s.loraStack);
            r.graphId = 'studio2_minimax_native.json';
        }
    }
    else {
        const mode = identityPlan?.mode ?? (q.mode === 'iterate' ? (a ? 'edit' : 'generate') : q.mode);
        const found = q.engine === 'krea' ? await resolveKreaGenerateAssets() : null;
@@ -1,12 +1,22 @@
 export function folderAssets(library, jobs, folderId) {
 const metadata=new Map(jobs.flatMap(j=>j.outputs || []).map(a=>[a.id,a.studio2]))
- return ['still','clip'].flatMap(kind=>(library[kind==='still'?'stills':'clips'] || []).filter(a=>a.id && a.folderId===folderId && a.hasVideo!==false && a.available!==false).map(a=>({...a,kind,studio2:a.studio2 || metadata.get(a.id)}))).sort((a,b)=>(a.createdAt || a.studio2?.savedAt || 0)-(b.createdAt || b.studio2?.savedAt || 0))
+ const kinds=[['still','stills'],['clip','clips'],['track','tracks']]
 return kinds.flatMap(([kind,key])=>(library[key] || []).filter(a=>a.id && a.folderId===folderId && a.hasVideo!==false && a.available!==false).map(a=>({...a,kind,studio2:a.studio2 || metadata.get(a.id)}))).sort((a,b)=>(a.createdAt || a.studio2?.savedAt || 0)-(b.createdAt || b.studio2?.savedAt || 0))
 }
 export function newestOutput(jobs, seen, folderId) {
 return jobs.filter(j=>j.request.folderId===folderId).flatMap(j=>j.outputs || []).filter(a=>!seen.has(a.id)).sort((a,b)=>(a.studio2?.savedAt || 0)-(b.studio2?.savedAt || 0)).at(-1) || null
 }
 export function reconcileSelection(selected, assets) { return assets.find(a=>a.id===selected?.id) || assets.at(-1) || null }
 export function activeJobs(jobs) { return jobs.filter(j=>['waking','submitting','rendering','saving'].includes(j.state)) }
-export function previewHidden(asset, xaigen, hideInput, hideOutput) { return !!xaigen && (asset?.role==='input' ? !!hideInput : !!hideOutput) }
+export function previewHidden(asset, revealed, xaigen) {
 if (!xaigen || !asset?.id) return false
 return !revealed?.has?.(asset.id)
 }
 export function selectResult(state, asset) { return {...state,selected:asset} }
-export function assetLabel(asset) { return asset?.name || asset?.originalName || asset?.filename || (asset ? (asset.kind==='clip'?'Clip ':'Still ')+asset.id.slice(0,8) : 'None') }
+export function assetLabel(asset) {
 if (!asset) return 'None'
 if (asset.name || asset.originalName || asset.filename) return asset.name || asset.originalName || asset.filename
 if (asset.kind==='track') return 'Track '+asset.id.slice(0,8)
 if (asset.kind==='clip') return 'Clip '+asset.id.slice(0,8)
 return 'Still '+asset.id.slice(0,8)
 }
@@ -1,9 +1,6 @@
 import test from 'node:test'
 import assert from 'node:assert/strict'
 import {readFileSync} from 'node:fs'
 import * as Vue from 'vue'
 import {compile} from '@vue/compiler-dom'
 import {renderToString} from '@vue/server-renderer'
 import ts from 'typescript'
 import {folderAssets,reconcileSelection,activeJobs,previewHidden} from '../shared/studio2/viewer.mjs'
 import {useAsHero,useAsSource,restoreAll} from '../shared/studio2/input.mjs'
@@ -24,14 +21,15 @@ test('bench includes only active execution phases and clear finished retains int
 assert.equal(fn({}).cleared,1);assert.equal(rows[0].dismissed,true);assert.equal(rows[0].cleanupPending.length,1);assert.equal(rows[1].dismissed,undefined)
 })
 test('hidden xAIGen canvas and family render no image or video elements',async()=>{
 const revealed=new Set()
 assert.equal(previewHidden({id:'a',role:'input'},revealed,true),true)
 assert.equal(previewHidden({id:'a',role:'input'},new Set(['a']),true),false)
 assert.equal(previewHidden({id:'a'},revealed,false),false)
 const src=readFileSync(new URL('../components/studio2/Bench.vue',import.meta.url),'utf8')
- const stage=src.slice(src.indexOf('    <div class="flex min-h-80'),src.indexOf('    <div v-if="selected"'))
+ assert.match(src,/aria-label="Current family outputs"/)
- const strip=src.split('\n').find(line=>line.includes('aria-label="Current family outputs"'))
+ assert.match(src,/preview hidden/)
- const render=new Function('Vue',compile('<section>'+stage+strip+'</section>',{mode:'function',prefixIdentifiers:true}).code)(Vue)
+ assert.doesNotMatch(src,/Hide input stills/)
- const state={selected:{id:'a',kind:'still'},hideOutput:true,xaigen:true,family:[{id:'a',kind:'still'}],form:{hideInput:true},previewHidden,stillUrl:id=>'/image/'+id,selectOutput(){}}
+ assert.doesNotMatch(src,/Hide output preview/)
 const hidden=await renderToString(Vue.createSSRApp({render,data:()=>state}));assert.doesNotMatch(hidden,/<img|<video/);assert.match(hidden,/preview hidden/)
 const visible=await renderToString(Vue.createSSRApp({render,data:()=>({...state,xaigen:false})}));assert.match(visible,/<img/)
 assert.equal(previewHidden({role:'input'},true,true,false),true)
 })
 test('cached LoRAs survive sleeping GPU and failed explicit refresh',async()=>{
 const cache={image:['Klein/portrait.safetensors'],video:['motion.safetensors']};let queried=0
@@ -91,9 +91,10 @@ test('music workflow refuses yue and yue2 while ACE graphs still build', () => {
  assert.equal(existsSync(new URL('../server/assets/workflow_yue.json', import.meta.url)), false)
 })
-test('musicChain routes yue2 to startYue2Job and leaves yue on YuEGP', () => {
+test('musicChain is YuE2-only', () => {
  const source = readFileSync(new URL('../server/utils/musicChain.ts', import.meta.url), 'utf8')
-  assert.match(source, /engine === 'yue'\) return startYueGpJob/)
+  assert.match(source, /startYue2Job/)
  assert.match(source, /engine === 'yue2'\) return startYue2Job/)
  assert.match(source, /from '\.\/yue2'/)
  assert.doesNotMatch(source, /startYueGpJob/)
  assert.doesNotMatch(source, /buildMusicWorkflow/)
 })