Restyle Studio task rail and bind Classic task to the same mode ref.

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

components/studio2/Bench.vue

@@ -28,42 +28,48 @@
    </div>
   </header>
 
-  <nav class="flex flex-wrap gap-2" aria-label="Tasks">
+  <div class="min-w-0 space-y-3" style="gap: var(--chrome-gap)">
-   <button
+   <label v-if="isClassic" class="block text-sm text-zinc-300">Task
-    v-for="task in tasks"
+    <select :value="form.mode" class="mt-1 w-full max-w-xs rounded-lg border border-white/10 bg-zinc-900 px-3 py-2 capitalize outline-none ring-amber-300/40 focus:ring-2" @change="chooseTask(($event.target as HTMLSelectElement).value)">
-    :key="task"
+     <option v-for="task in tasks" :key="task" :value="task" class="capitalize">{{ task }}</option>
-    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 v-if="form.mode!=='music'" class="min-w-0">
-   <label v-if="isClassic" class="block text-sm text-zinc-300">Model
-    <select v-model="form.engine" class="mt-1 w-full max-w-md rounded-lg border border-white/10 bg-zinc-900 px-3 py-2 outline-none ring-amber-300/40 focus:ring-2">
-     <option v-for="opt in engineOptions" :key="opt.value" :value="opt.value" :disabled="opt.disabled">{{ opt.label }}{{ opt.hint ? ' — '+opt.hint : '' }}</option>
     </select>
    </label>
-   <div v-else class="display-rail" role="group" aria-label="Model">
+   <nav v-else class="display-rail" aria-label="Tasks">
     <button
-     v-for="opt in engineOptions"
+     v-for="task in tasks"
-     :key="opt.value"
+     :key="task"
      type="button"
-     class="display-rail__seg"
+     class="display-rail__seg capitalize"
-     :aria-pressed="form.engine===opt.value"
+     :aria-pressed="form.mode===task"
-     :aria-disabled="opt.disabled || undefined"
+     @click="chooseTask(task)"
-     :disabled="opt.disabled"
+    >{{ task }}</button>
-     :title="opt.hint || undefined"
+   </nav>
-     @click="!opt.disabled && (form.engine=opt.value)"
+
-    >
+   <div v-if="form.mode!=='music'" class="min-w-0">
-     <span class="block">{{ opt.label }}</span>
+    <label v-if="isClassic" class="block text-sm text-zinc-300">Model
-     <span v-if="opt.hint" class="mt-0.5 block text-[11px] font-normal opacity-80">{{ opt.hint }}</span>
+     <select v-model="form.engine" class="mt-1 w-full max-w-md rounded-lg border border-white/10 bg-zinc-900 px-3 py-2 outline-none ring-amber-300/40 focus:ring-2">
-    </button>
+      <option v-for="opt in engineOptions" :key="opt.value" :value="opt.value" :disabled="opt.disabled">{{ opt.label }}{{ opt.hint ? ' — '+opt.hint : '' }}</option>
+     </select>
+    </label>
+    <div v-else class="display-rail" role="group" aria-label="Model">
+     <button
+      v-for="opt in engineOptions"
+      :key="opt.value"
+      type="button"
+      class="display-rail__seg"
+      :aria-pressed="form.engine===opt.value"
+      :aria-disabled="opt.disabled || undefined"
+      :disabled="opt.disabled"
+      :title="opt.hint || undefined"
+      @click="!opt.disabled && (form.engine=opt.value)"
+     >
+      <span class="block">{{ opt.label }}</span>
+      <span v-if="opt.hint" class="mt-0.5 block text-[11px] font-normal opacity-80">{{ opt.hint }}</span>
+     </button>
+    </div>
    </div>
+   <p v-else class="text-sm text-zinc-400">Model · YuE2</p>
   </div>
-  <p v-else class="text-sm text-zinc-400">Model · YuE2</p>
 
   <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">