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,13 +28,18 @@
    </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)">
+   <label v-if="isClassic" class="block text-sm text-zinc-300">Task
+    <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)">
+     <option v-for="task in tasks" :key="task" :value="task" class="capitalize">{{ task }}</option>
+    </select>
+   </label>
+   <nav v-else class="display-rail" 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'"
+     class="display-rail__seg capitalize"
      :aria-pressed="form.mode===task"
      @click="chooseTask(task)"
     >{{ task }}</button>
@@ -64,6 +69,7 @@
     </div>
    </div>
    <p v-else class="text-sm text-zinc-400">Model · YuE2</p>
+  </div>
 
   <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">