Move engine pickers into the Video / Image / Music cards.

Flux/Krea, MiniMax/LTX, and ACE/YuE sit on the top kind cards so you choose the engine before the prompt form.

components/StudioKindCards.vue

@@ -1,9 +1,13 @@
 <template>
   <div class="mb-4 grid grid-cols-3 gap-3">
+    <div
+      class="overflow-hidden rounded-3xl border transition"
+      :class="current === 'video' ? 'border-amber-300 bg-amber-400/10 text-amber-50' : 'border-white/10 text-zinc-400'"
+    >
       <button
         type="button"
-      class="rounded-3xl border px-4 py-4 text-left transition"
+        class="w-full px-4 pb-3 pt-4 text-left transition"
-      :class="current === 'video' ? 'border-amber-300 bg-amber-400/10 text-amber-50' : 'border-white/10 text-zinc-400 hover:border-white/20 hover:text-zinc-200'"
+        :class="current === 'video' ? '' : 'hover:text-zinc-200'"
         @click="emit('select', 'video')"
       >
         <svg class="h-10 w-10" viewBox="0 0 40 40" fill="none" aria-hidden="true">
@@ -12,12 +16,38 @@
           <circle cx="12" cy="20" r="2" fill="currentColor" />
         </svg>
         <span class="mt-3 block font-display text-lg font-bold text-zinc-100">Video</span>
-      <span class="mt-0.5 block text-xs text-zinc-500">MiniMax H3 · LTX</span>
+      </button>
+      <div v-if="ltxEnabled" class="grid grid-cols-2 border-t border-white/10">
+        <button
+          type="button"
+          class="border-r border-white/10 px-3 py-2.5 text-left text-sm transition"
+          :class="engineBtnClass(current === 'video' && videoEngine === 'minimax')"
+          @click="pickVideo('minimax')"
+        >
+          <span class="block font-semibold">MiniMax</span>
+          <span class="text-xs opacity-80">H3</span>
         </button>
         <button
           type="button"
-      class="rounded-3xl border px-4 py-4 text-left transition"
+          class="px-3 py-2.5 text-left text-sm transition"
-      :class="current === 'image' ? 'border-amber-300 bg-amber-400/10 text-amber-50' : 'border-white/10 text-zinc-400 hover:border-white/20 hover:text-zinc-200'"
+          :class="engineBtnClass(current === 'video' && videoEngine === 'ltx')"
+          @click="pickVideo('ltx')"
+        >
+          <span class="block font-semibold">LTX</span>
+          <span class="text-xs opacity-80">2.3</span>
+        </button>
+      </div>
+      <p v-else class="border-t border-white/10 px-4 py-2 text-xs text-zinc-500">MiniMax H3</p>
+    </div>
+
+    <div
+      class="overflow-hidden rounded-3xl border transition"
+      :class="current === 'image' ? 'border-amber-300 bg-amber-400/10 text-amber-50' : 'border-white/10 text-zinc-400'"
+    >
+      <button
+        type="button"
+        class="w-full px-4 pb-3 pt-4 text-left transition"
+        :class="current === 'image' ? '' : 'hover:text-zinc-200'"
         @click="emit('select', 'image')"
       >
         <svg class="h-10 w-10" viewBox="0 0 40 40" fill="none" aria-hidden="true">
@@ -26,29 +56,109 @@
           <circle cx="15" cy="15" r="2.5" fill="currentColor" />
         </svg>
         <span class="mt-3 block font-display text-lg font-bold text-zinc-100">Image</span>
-      <span class="mt-0.5 block text-xs text-zinc-500">Flux · Krea</span>
       </button>
+      <div class="grid grid-cols-2 border-t border-white/10">
+        <button
+          type="button"
+          class="border-r border-white/10 px-3 py-2.5 text-left text-sm transition"
+          :class="engineBtnClass(current === 'image' && imageEngine === 'flux')"
+          @click="pickImage('flux')"
+        >
+          <span class="block font-semibold">Flux</span>
+          <span class="text-xs opacity-80">Klein 9B</span>
+        </button>
+        <button
+          type="button"
+          class="px-3 py-2.5 text-left text-sm transition"
+          :class="engineBtnClass(current === 'image' && imageEngine === 'krea')"
+          @click="pickImage('krea')"
+        >
+          <span class="block font-semibold">Krea</span>
+          <span class="text-xs opacity-80">2 Turbo</span>
+        </button>
+      </div>
+    </div>
+
+    <div
+      class="overflow-hidden rounded-3xl border transition"
+      :class="current === 'music' ? 'border-amber-300 bg-amber-400/10 text-amber-50' : 'border-white/10 text-zinc-400'"
+    >
       <NuxtLink
         to="/music"
-      class="rounded-3xl border px-4 py-4 text-left transition"
+        class="block w-full px-4 pb-3 pt-4 text-left transition"
-      :class="current === 'music' ? 'border-amber-300 bg-amber-400/10 text-amber-50' : 'border-white/10 text-zinc-400 hover:border-white/20 hover:text-zinc-200'"
+        :class="current === 'music' ? '' : 'hover:text-zinc-200'"
       >
         <svg class="h-10 w-10" viewBox="0 0 40 40" fill="none" aria-hidden="true">
           <circle cx="20" cy="20" r="12" stroke="currentColor" stroke-width="2" />
           <path d="M18 14v12l10-4V12l-10 2Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round" />
         </svg>
         <span class="mt-3 block font-display text-lg font-bold text-zinc-100">Music</span>
-      <span class="mt-0.5 block text-xs text-zinc-500">ACE-Step · YuE</span>
       </NuxtLink>
+      <div class="grid grid-cols-2 border-t border-white/10">
+        <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="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">Lyrics</span>
+        </button>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-defineProps<{
+const props = withDefaults(defineProps<{
   current: 'video' | 'image' | 'music'
-}>()
+  ltxEnabled?: boolean
+  videoEngine?: 'minimax' | 'ltx'
+  imageEngine?: 'flux' | 'krea'
+  musicEngine?: 'ace' | 'yue'
+}>(), {
+  ltxEnabled: false,
+  videoEngine: 'minimax',
+  imageEngine: 'flux',
+  musicEngine: 'ace'
+})
 
 const emit = defineEmits<{
   select: [kind: 'video' | 'image']
+  'video-engine': [engine: 'minimax' | 'ltx']
+  'image-engine': [engine: 'flux' | 'krea']
+  'music-engine': [engine: 'ace' | 'yue']
 }>()
+
+function engineBtnClass(active: boolean) {
+  if (active) return 'bg-amber-400/15 text-amber-100'
+  return 'text-zinc-400 hover:bg-white/5 hover:text-zinc-200'
+}
+
+function pickVideo(engine: 'minimax' | 'ltx') {
+  emit('video-engine', engine)
+  if (props.current !== 'video') emit('select', 'video')
+}
+
+function pickImage(engine: 'flux' | 'krea') {
+  emit('image-engine', engine)
+  if (props.current !== 'image') emit('select', 'image')
+}
+
+function pickMusic(engine: 'ace' | 'yue') {
+  if (props.current === 'music') {
+    emit('music-engine', engine)
+    return
+  }
+  void navigateTo({ path: '/music', query: { engine } })
+}
 </script>

pages/index.vue

@@ -8,7 +8,15 @@
     />
 
     <main class="mx-auto min-w-0 max-w-7xl space-y-6 px-4 py-6 sm:px-6">
-      <StudioKindCards :current="imageStudio ? 'image' : 'video'" @select="selectStudioKind" />
+      <StudioKindCards
+        :current="imageStudio ? 'image' : 'video'"
+        :ltx-enabled="ltxEnabled"
+        :video-engine="videoEngine"
+        :image-engine="v2Engine"
+        @select="selectStudioKind"
+        @video-engine="selectVideoEngine"
+        @image-engine="setV2Engine"
+      />
       <div class="grid min-w-0 gap-6 lg:grid-cols-[minmax(0,1fr)_minmax(0,1fr)] lg:items-stretch">
       <section id="studio-input" class="glass min-w-0 max-w-full space-y-5 rounded-3xl p-5 sm:p-6">
         <div>
@@ -26,14 +34,10 @@
             : 'Drop a still, describe the motion, then send the job. Generate stays available — a long shot list takes one queue slot, and you can line up more while it runs.' }}</p>
         </div>
 
-        <div
-          class="overflow-hidden rounded-2xl border border-white/15 bg-zinc-950/50"
-          :class="{ 'border-amber-300/70 bg-amber-400/5': dragging }"
-        >
         <div
           v-if="!(studioMode === 'editv2' && v2Mode === 'generate')"
-            class="relative cursor-pointer border-dashed p-4 transition hover:border-amber-300/50"
+          class="relative cursor-pointer rounded-2xl border border-dashed border-white/15 bg-zinc-950/50 p-4 transition hover:border-amber-300/50"
-            :class="studioMode === 'editv2' || (studioMode === 'video' && ltxEnabled) ? 'border-b border-white/10' : ''"
+          :class="{ 'border-amber-300/70 bg-amber-400/5': dragging }"
           @dragover.prevent="dragging = true"
           @dragleave.prevent="dragging = false"
           @drop.prevent="onDrop"
@@ -65,51 +69,10 @@
         </div>
         <div
           v-else-if="studioMode === 'editv2' && v2Mode === 'generate' && (file || inputStillId)"
-            class="border-b border-white/10 px-4 py-3 text-sm text-zinc-400"
+          class="rounded-2xl border border-white/10 bg-zinc-950/40 px-4 py-3 text-sm text-zinc-400"
         >
           Still A is loaded for Edit / Compose / Refine. Generate ignores it and uses the prompt only.
         </div>
-          <div v-if="studioMode === 'editv2'" class="grid grid-cols-2">
-            <button
-              type="button"
-              class="border-r border-white/10 px-3 py-2.5 text-left text-sm transition"
-              :class="v2Engine === 'flux' ? 'bg-amber-400/10 text-amber-100' : 'text-zinc-400 hover:bg-white/5 hover:text-zinc-200'"
-              @click="setV2Engine('flux')"
-            >
-              <span class="block font-semibold">Flux</span>
-              <span class="text-xs opacity-80">Klein 9B</span>
-            </button>
-            <button
-              type="button"
-              class="px-3 py-2.5 text-left text-sm transition"
-              :class="v2Engine === 'krea' ? 'bg-amber-400/10 text-amber-100' : 'text-zinc-400 hover:bg-white/5 hover:text-zinc-200'"
-              @click="setV2Engine('krea')"
-            >
-              <span class="block font-semibold">Krea</span>
-              <span class="text-xs opacity-80">Krea 2 Turbo</span>
-            </button>
-          </div>
-          <div v-else-if="studioMode === 'video' && ltxEnabled" class="grid grid-cols-2">
-            <button
-              type="button"
-              class="border-r border-white/10 px-3 py-2.5 text-left text-sm transition"
-              :class="videoEngine === 'minimax' ? 'bg-amber-400/10 text-amber-100' : 'text-zinc-400 hover:bg-white/5 hover:text-zinc-200'"
-              @click="selectVideoEngine('minimax')"
-            >
-              <span class="block font-semibold">MiniMax H3</span>
-              <span class="text-xs opacity-80">Stereo · identity refs</span>
-            </button>
-            <button
-              type="button"
-              class="px-3 py-2.5 text-left text-sm transition"
-              :class="videoEngine === 'ltx' ? 'bg-amber-400/10 text-amber-100' : 'text-zinc-400 hover:bg-white/5 hover:text-zinc-200'"
-              @click="selectVideoEngine('ltx')"
-            >
-              <span class="block font-semibold">LTX-2.3</span>
-              <span class="text-xs opacity-80">PinkCherry</span>
-            </button>
-          </div>
-        </div>
 
         <div v-if="file || inputStillId" class="mt-2 flex min-w-0 items-center gap-2">
           <input

pages/music.vue

@@ -7,43 +7,20 @@
     />
 
     <main class="mx-auto min-w-0 max-w-7xl space-y-6 px-4 py-6 sm:px-6">
-      <StudioKindCards current="music" @select="goStudio" />
+      <StudioKindCards
+        current="music"
+        :music-engine="engineFamily"
+        @select="goStudio"
+        @music-engine="selectEngineFamily"
+      />
       <div class="grid min-w-0 gap-6 lg:grid-cols-[minmax(0,1fr)_minmax(0,1fr)] lg:items-stretch">
       <section class="glass min-w-0 max-w-full space-y-5 rounded-3xl p-5 sm:p-6">
-        <div class="overflow-hidden rounded-2xl border border-white/15 bg-zinc-950/50">
+        <div>
-          <div class="border-b border-white/10 px-4 py-3">
           <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.
           </p>
         </div>
-          <div class="grid grid-cols-2">
-            <button
-              type="button"
-              class="border-r border-white/10 px-3 py-2.5 text-left text-sm transition"
-              :class="engineFamily === 'ace' ? 'bg-amber-400/10 text-amber-100' : 'text-zinc-400 hover:bg-white/5 hover:text-zinc-200'"
-              @click="selectEngineFamily('ace')"
-            >
-              <span class="block font-semibold">ACE-Step</span>
-              <span class="text-xs opacity-80">Fast vocals</span>
-            </button>
-            <button
-              type="button"
-              class="px-3 py-2.5 text-left text-sm transition"
-              :class="engineFamily === 'yue' ? 'bg-amber-400/10 text-amber-100' : 'text-zinc-400 hover:bg-white/5 hover:text-zinc-200'"
-              @click="selectEngineFamily('yue')"
-            >
-              <span class="flex items-center gap-2">
-                <span class="font-semibold">YuE</span>
-                <InfoTip
-                  aria-label="What YuE does"
-                  text="YuE is a separate lyrics-to-song engine (stage-1 7B + stage-2 1B + xcodec). It needs the ComfyUI_YuE custom node on Beast and is slower and heavier than ACE-Step. Use it when you want a full sung track from lyrics rather than ACE-Step’s tag-conditioned sampler."
-                />
-              </span>
-              <span class="text-xs opacity-80">Lyrics-to-song</span>
-            </button>
-          </div>
-        </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">
@@ -746,12 +723,15 @@ function applyPreset() {
 onMounted(async () => {
   await loadLibrary()
   await loadMusicPresets()
+  const route = useRoute()
+  const engineQ = String(route.query.engine || '').toLowerCase()
+  if (engineQ === 'yue' || engineQ === 'ace') selectEngineFamily(engineQ)
   applyIncomingMusic()
   await resumeActiveMusic()
   await refreshStudioQueue()
   stopQueuePoll()
   queuePoll = setInterval(() => { void refreshStudioQueue() }, 8000)
-  const query = useRoute().query
+  const query = route.query
   if (typeof query.track === 'string' && query.track) {
     audioUrl.value = `/api/library/tracks/${query.track}/audio`
     trackId.value = query.track