From 174d40a7dcdc2714a3f2da8492a8263f459376fe Mon Sep 17 00:00:00 2001
From: Towsty <ianjmcarr@gmail.com>
Date: Mon, 7 Sep 2026 08:36:21 -0500
Subject: [PATCH] Simplify generation controls with task navigation and
 settings drawer

---
 components/GenerationSettings.vue | 25 ++++++++++
 components/PromptPartsEditor.vue  |  7 +--
 components/StudioKindCards.vue    |  7 ++-
 composables/useStudioLayout.ts    |  6 +++
 docs/queue-and-site-review.md     | 78 +++++++++++++++++++++++++++++++
 pages/index.vue                   | 49 +++++++++++++++++--
 pages/music.vue                   | 18 +++++--
 7 files changed, 177 insertions(+), 13 deletions(-)
 create mode 100644 components/GenerationSettings.vue
 create mode 100644 composables/useStudioLayout.ts
 create mode 100644 docs/queue-and-site-review.md

diff --git a/components/GenerationSettings.vue b/components/GenerationSettings.vue
new file mode 100644
index 0000000..f2c7d5a
--- /dev/null
+++ b/components/GenerationSettings.vue
@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <button v-if="!advanced" type="button" class="rounded-xl border border-white/20 px-4 py-3 text-sm text-zinc-200 hover:border-amber-300" @click="show">Generation settings</button>
+    <div v-if="advanced" class="space-y-5"><slot /></div>
+    <dialog v-else ref="panel" aria-label="Generation settings" class="settings-drawer fixed inset-y-0 left-auto right-0 m-0 h-dvh max-h-none w-full max-w-lg overflow-y-auto border-l border-white/15 bg-zinc-950 p-5 text-zinc-100 shadow-2xl backdrop:bg-black/60" @click="backdrop" @close="restoreFocus">
+      <div class="mb-6 flex items-center justify-between gap-4">
+        <h2 class="font-display text-xl font-bold">Generation settings</h2>
+        <button type="button" class="rounded-xl border border-white/20 px-4 py-2" @click="panel?.close()">Close</button>
+      </div>
+      <div class="space-y-5"><slot /></div>
+    </dialog>
+  </div>
+</template>
+<script setup lang="ts">
+defineProps<{ advanced: boolean }>()
+const panel = ref<HTMLDialogElement | null>(null)
+let opener: HTMLElement | null = null
+function show() { opener = document.activeElement as HTMLElement; panel.value?.showModal() }
+function restoreFocus() { opener?.focus() }
+function backdrop(event: MouseEvent) {
+  if (event.target !== panel.value) return
+  const rect = panel.value.getBoundingClientRect()
+  if (event.clientX < rect.left || event.clientX > rect.right) panel.value.close()
+}
+</script>
diff --git a/components/PromptPartsEditor.vue b/components/PromptPartsEditor.vue
index 81e302d..423c059 100644
--- a/components/PromptPartsEditor.vue
+++ b/components/PromptPartsEditor.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="space-y-3">
-    <div class="flex flex-wrap items-center gap-2">
+    <div v-if="!simple" class="flex flex-wrap items-center gap-2">
       <KeepPromptMenu
         :items="keepItems"
         :heading="keepHeading"
@@ -23,7 +23,7 @@
       <span class="text-[11px] text-zinc-500">Snippets go into {{ targetLabel }}.</span>
     </div>
 
-    <label class="block text-sm">
+    <label v-if="!simple || pre.trim()" class="block text-sm">
       <span class="mb-1 block text-xs font-medium text-zinc-400">Pre-text</span>
       <textarea
         :value="pre"
@@ -67,7 +67,7 @@
       </button>
     </label>
 
-    <label class="block text-sm">
+    <label v-if="!simple || post.trim()" class="block text-sm">
       <span class="mb-1 block text-xs font-medium text-zinc-400">Post-text</span>
       <textarea
         :value="post"
@@ -126,6 +126,7 @@ const targets = [
 ]
 
 const props = withDefaults(defineProps<{
+  simple?: boolean
   pre?: string
   prompt?: string
   post?: string
diff --git a/components/StudioKindCards.vue b/components/StudioKindCards.vue
index 3f3d8c5..a1a513f 100644
--- a/components/StudioKindCards.vue
+++ b/components/StudioKindCards.vue
@@ -1,5 +1,9 @@
 <template>
-  <div class="mb-4 grid grid-cols-3 gap-3">
+  <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>
+  </nav>
+  <div v-else 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'"
@@ -122,6 +126,7 @@
 <script setup lang="ts">
 const props = withDefaults(defineProps<{
   current: 'video' | 'image' | 'music'
+  advanced?: boolean
   ltxEnabled?: boolean
   videoEngine?: 'minimax' | 'ltx'
   videoStart?: 'still' | 'text'
diff --git a/composables/useStudioLayout.ts b/composables/useStudioLayout.ts
new file mode 100644
index 0000000..b6d65e9
--- /dev/null
+++ b/composables/useStudioLayout.ts
@@ -0,0 +1,6 @@
+export function useStudioLayout() {
+  const advanced = useState('studio-advanced-layout', () => false)
+  onMounted(() => { advanced.value = localStorage.getItem('aigen-advanced-layout') === 'true' })
+  watch(advanced, value => { if (import.meta.client) localStorage.setItem('aigen-advanced-layout', String(value)) })
+  return { advanced }
+}
diff --git a/docs/queue-and-site-review.md b/docs/queue-and-site-review.md
new file mode 100644
index 0000000..6daa729
--- /dev/null
+++ b/docs/queue-and-site-review.md
@@ -0,0 +1,78 @@
+# AIGen queue fix and codebase review
+
+Reviewed September 6, 2026. Scope: queue dispatch and recovery, Comfy lifecycle and host connector, generation pipelines, storage/authentication, and the Vue pages/components. This includes a source review, isolated regression tests, a production build, and desktop/390px phone checks of the local iteration editor. The deployed site requires an Authentik session that was unavailable in the connected browser. Its authenticated pages and an actual RTX 5080 render have not been verified. No production queue records or saved media were changed.
+
+## Queue failure: confirmed and fixed locally
+
+The dispatcher serialized work using `dispatchChain`. During its own busy check, it could recover an image/music job whose output was already saved and await `onLiveVideoSettled`. That function queued another dispatch and awaited it. The new dispatch was behind the unfinished current dispatch: neither could finish. Clearing disk records does not release this in-memory promise, which explains why repeated clear actions can fail to restore handoffs. This is a reproduced code defect consistent with the reported symptoms, not a diagnosis from production logs.
+
+Changes:
+
+- Settlement still waits for its durable queue update, but schedules the next dispatch without awaiting it. This removes the circular dependency while preserving serialized dispatch.
+- Completion callbacks must match the live job, or an unassigned row with the same shot-queue ID. An old callback can no longer finish an unrelated newer job or a newer run of the same batch.
+- The 40-item retention limit now applies only to recent finished jobs. Waiting, held, and running jobs are preserved.
+- Comfy history requests have a 12-second timeout. Failed requests leave the job unresolved rather than declaring its prompt lost; a successfully fetched empty history still permits stale-job recovery.
+
+Files: `server/utils/studioQueue.ts`, `server/utils/comfy.ts`, `tests/studio-queue.test.mjs`, `package.json`.
+
+Validation: `npm test` passes all 25 tests in the combined checkout: 10 queue recovery tests, 5 iteration tests, and 10 shared-GPU tests added in separate concurrent work. The initial seven-test suite run against the original committed queue code produced four expected failures: image deadlock, music deadlock, late callback completing a newer job, and active queue truncation. Additional tests cover a late callback within the same shot batch and failed history requests. Tests execute the real queue module against temporary disk stores with simulated Comfy responses. They do not generate media.
+
+Applying this to the running service requires rebuilding/redeploying AIGen and restarting its server process. Restarting Comfy alone cannot replace the application's deadlocked dispatcher. Preserve the existing library volume. After deployment, validate image -> image, video -> image, music -> video, and a multi-shot continuation; refresh the browser while rendering and verify each output is saved once and the next job starts once.
+
+## Highest-priority functional improvements
+
+| Priority | Finding and evidence | Recommended change |
+| --- | --- | --- |
+| High | Queue state exists independently in `studioQueue.ts`, `jobs.ts`, `pending.ts`, `shotQueue.ts`, and Comfy. `repairStaleJobs` can label a missing live job complete without proving that its output was saved. | Use one durable job record with explicit phases: waiting, waking GPU, submitting, rendering, saving, complete, failed, cancelled. Persist prompt ID, attempt ID, output IDs, and last successful contact. On restart, reconcile exact prompt IDs before claiming completion or retrying. |
+| High | `pending.ts` describes video recovery; `restoreJob` in `jobs.ts` restores jobs as video. Image/music pipelines do not share the same durable recovery record. | Give every generation type the same restart recovery contract. Persist submission intent before sending to Comfy, then attach the returned prompt ID. Resolve ambiguous submissions before resubmitting to avoid duplicates. |
+| Verify rollout | Separate concurrent work added `withSharedGpuReset` around force reset and a host reservation gate. | Verify the host-agent rollout together with the app, and test reset while a submission is already in progress. See `docs/shared-gpu-rollout.md`; do not deploy just the app against an older coordinator. |
+| High | `videoJobsBusy` returns a boolean from several partly independent checks, so the UI cannot explain which record is blocking work. Exceptions from dispatch are swallowed. | Return a structured blocker: owner-safe job ID, phase, pending count, last activity, connection state, retry time. Log state transitions and unexpected dispatcher errors. Expose a diagnostics panel with a copyable report. |
+| High | `readStore` in `studioQueue.ts` and the shot-queue reader return empty queues after parse/read errors; a later mutation can overwrite the damaged store. | Fail visibly and preserve the original file. Keep a previous known-good snapshot and add schema versions. Longer-term, replace independent JSON files with transactional storage and a single worker claim for the GPU. |
+| Medium | `jobs.ts` evicts the oldest in-memory job whenever the map exceeds 40 entries, regardless of active status. | Evict terminal jobs only. Persist older history separately. Add a regression test covering many prompt/recommendation jobs while a long render remains active. |
+| Medium | `runGeneration` in `videoChain.ts` settles in `finally`, while its caller in `studioQueue.ts` sets an escaped failure status afterward. | Establish error/cancel status before settlement inside the generation runner. Test wake failure, upload failure, and validation failure, including the queue status shown to the user. |
+| Medium | `generate/active.get.ts` ties a running job's visibility to Comfy being busy; a job saving media can disappear while the dispatcher correctly remains occupied. | Report saving/stitching as active and show its phase. Share one definition of active work between queue, header, and generator. |
+| Medium | Health, queue, and recovery polling run independently in `AppHeader.vue`, `index.vue`, `music.vue`, and `queue.vue`. | Share one client status store, deduplicate in-flight requests, slow polling for hidden tabs, and use push updates for transitions with polling as fallback. |
+| Medium | Queue fairness is owner-order based in `dispatchStudioQueue`; transient errors are repeatedly converted back to waiting. | Select work globally by explicit priority and creation time; add bounded retries with increasing delays and a visible retry action after repeated failure. |
+
+## Visual and interaction recommendations
+
+The existing dark palette, amber primary actions, reusable controls, and two-column editor/preview layout provide a good foundation. The biggest improvement would be making the active task and its status clearer, while reducing the amount of model configuration visible at once.
+
+| Priority | Area and source | Recommendation |
+| --- | --- | --- |
+| Done · September 7, 2026 | ~~Generation controls: `pages/index.vue`, `components/StudioKindCards.vue`~~ | Implemented **Image / Video / Music** navigation, **From text / From image / Edit / Extend** task shortcuts, a shared generation-settings drawer, visible size/duration and Queue controls, and a persistent Advanced mode. Music uses the same drawer. Empty prompt wrappers are hidden in Simple mode; populated wrappers remain visible. |
+| High | Status: `components/AppHeader.vue`, `pages/queue.vue` | Add a persistent status strip: **GPU asleep / Starting / Rendering / Saving / Connection lost**, current job, and waiting count. A queued item should say what it is waiting for. Rename “Poke” to “Wake GPU” consistently. |
+| High | Queue: `pages/queue.vue` | Separate one prominent current-job card from a compact upcoming list. Show queue position, media type, duration, progress, and primary action. Collapse shot details until expanded. Distinguish **Pause after this shot**, **Cancel job**, **Clear waiting jobs**, and **Reset GPU** by their actual effects. |
+| Medium | Mobile mode selection: `components/StudioKindCards.vue` | The fixed three-column cards contain nested two-column model controls. Use a compact mode switch on narrow screens and show settings only for the selected mode. Increase small secondary text and touch spacing. Verify at 360px and 390px widths. |
+| Medium | Typography: `pages/queue.vue`, `pages/library.vue`, `pages/music.vue` | Reduce repeated 10–11px uppercase metadata and low-contrast labels. Establish a small set of shared text, spacing, panel, and button styles; reserve amber for the main action and selected state. |
+| Medium | Library: `pages/library.vue` | Keep search/filter controls visible and add an optional side-by-side comparison for image variants. Provide a consistent details drawer containing prompt, seed, model, parent, and **Use as input / Make variation / Extend** actions appropriate to the asset. |
+| Medium | Dialogs: `QueuedJobModal.vue`, `ImagePickerModal.vue` | Use a shared accessible dialog component with a named dialog role, focus trap, Escape handling, initial focus, and focus restoration. Escape handling already exists, but focus behavior and dialog semantics are inconsistent. |
+| Medium | Feedback across generator and queue | Keep an always-visible Queue action near the prompt, with clear success feedback such as “Added at position 3.” Preserve the editor draft on network failure and offer an explicit retry without duplicating submissions. |
+
+Suggested desktop arrangement: a compact left navigation, central prompt/source editor, right output preview, and a collapsible queue strip below. On mobile, stack editor and preview and keep Queue plus GPU status reachable near the bottom. These are broader design proposals based on the source. The enhanced iteration editor itself was also checked visually in the isolated local preview.
+
+## Maintenance and deployment concerns
+
+- `pages/index.vue` is roughly 348 KB of source; `studioQueue.ts` roughly 71 KB. Extract generation drafts, status subscriptions, and submission into shared composables, and split mode-specific editors. Extract scheduling, reconciliation, and persistence from the queue module. Do this incrementally behind the regression tests.
+- The session and local credential modules accept a fixed development secret; backup configuration also has a fixed fallback token (`session.ts`, `localAuth.ts`, `backupStudio.ts`, `nuxt.config.ts`). In a network-exposed deployment, require explicitly configured secrets and fail startup when missing. Audit current configuration before changing any existing encryption key, because saved credentials depend on it. No secret values need to appear in logs or diagnostics.
+- `interrupt.post.ts` selects live jobs before enforcing owner matching and can target other owners' in-memory jobs. Apply owner filtering before mutations; make device-wide interruption an explicit administrative operation if multiple users share this instance.
+- `api/media.get.ts` downloads the full response before applying a byte range, while library-file routes already support streaming. Relay ranges/streams for large Comfy outputs to reduce memory use and improve playback seeking.
+- Add `npm test` and a production build to CI. Add a type-check step after establishing a baseline for Nuxt's generated types. Prefer lockfile-based installation in the Docker build so deployments use the reviewed dependency tree.
+
+Recommended order: deploy and validate the queue fix; add explicit job phases and blocker diagnostics; make reset/restart recovery consistent across media types; simplify the editor and queue presentation; then split the larger modules. Keep the current generation workflows intact while making these improvements.
+
+## Enhanced iteration mode: implemented locally
+
+In Image -> Iterate, open **Compare settings · build a sweep**. Enter steps **24, 20, 18, 19** and CFG **1.5**, then choose **Build 4 variations**. The shared prompt and first-image settings form the base. Later rows can override steps, CFG, seed, and LoRAs, or leave the prompt blank to reuse the first prompt. Krea edits can also override denoise within the workflow's supported range.
+
+The sweep uses the same seed for all images and the original input (if supplied). This makes it useful for comparing settings. Choose **Random** or a custom seed per variation when desired. An unchecked **Use shared LoRAs** option starts an independent, empty LoRA stack; add the LoRAs and strengths for that image. Custom steps/CFG take precedence over the shared Turbo preset for that variation.
+
+Multiple CFG values produce every requested steps/CFG combination in order. At most 50 images are accepted per batch. Review the count before queueing. Model, graph, dimensions, and negative prompt remain shared in this version; per-image overrides cover the requested sampling and LoRA comparisons. Existing **From original** and **From last** behavior remains available for image-based iterations.
+
+Overrides survive queue storage, queue editing, reload into the editor, and generation-log requeue. Each output records the actual settings used. The iteration worker keeps its queue slot through upload/save gaps, preventing a previous iteration's saved output from being mistaken for completion of the whole batch. The first-image seed now preserves an explicitly entered zero.
+
+Tests cover sweep construction, validation, settings/seed/LoRA propagation through the actual iteration runner with a simulated Comfy connection, saved metadata, and queue-edit round trips. The local UI check created the four requested variations and verified independent editing; it did not submit a real GPU render.
+
+## Generation controls update — September 7, 2026
+
+Completed the generation-controls recommendation above. Validation: all 35 existing tests passed and the production build passed. Local browser checks covered the simple layout, the settings drawer with Escape and focus restoration, and 390px/360px layouts without horizontal overflow. No GPU generation was submitted during these UI checks.
diff --git a/pages/index.vue b/pages/index.vue
index 504bbef..26aeee5 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="min-h-dvh min-w-0">
     <AppHeader
-      :subtitle="ltxEnabled ? 'MiniMax H3 · LTX-2.3 · Flux.2 Klein' : 'MiniMax H3 · Flux.2 Klein'"
+      :subtitle="advanced ? (ltxEnabled ? 'MiniMax H3 · LTX-2.3 · Flux.2 Klein' : 'MiniMax H3 · Flux.2 Klein') : 'Create images, video, and music'"
       current="studio"
       :queue-count="queueBadgeCount"
       @gpu="pollComfyHealth"
@@ -9,6 +9,7 @@
 
     <main class="mx-auto min-w-0 max-w-7xl space-y-6 px-4 py-6 sm:px-6">
       <StudioKindCards
+        :advanced="advanced"
         :current="imageStudio ? 'image' : 'video'"
         :ltx-enabled="ltxEnabled"
         :video-engine="videoEngine"
@@ -18,6 +19,12 @@
         @video-engine="selectVideoEngine"
         @image-engine="setV2Engine"
       />
+      <div class="flex flex-wrap items-center justify-between gap-3">
+        <div v-if="!advanced" class="flex flex-wrap gap-2" role="group" aria-label="Generation task">
+          <button v-for="task in ['From text', 'From image', 'Edit', 'Extend']" :key="task" type="button" class="rounded-full border px-4 py-2 text-sm" :class="simpleTask === task ? 'border-amber-300 bg-amber-400/10 text-amber-100' : 'border-white/15 text-zinc-300'" :aria-pressed="simpleTask === task" @click="chooseSimpleTask(task)">{{ task }}</button>
+        </div>
+        <label class="ml-auto 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">
       <section id="studio-input" class="glass min-w-0 max-w-full space-y-5 rounded-3xl p-5 sm:p-6">
         <div>
@@ -127,7 +134,7 @@
           </button>
         </div>
 
-        <div v-if="studioMode === 'editv2'" class="flex flex-wrap gap-2">
+        <div v-if="studioMode === 'editv2' && (advanced || simpleTask === 'Edit')" class="flex flex-wrap gap-2">
           <button
             type="button"
             class="rounded-full border px-3 py-1 text-xs font-medium disabled:cursor-not-allowed disabled:opacity-40"
@@ -266,7 +273,7 @@
             </div>
           </div>
           <DirectorScriptBar
-            v-if="studioMode === 'video'"
+            v-if="advanced && studioMode === 'video'"
             class="mb-2"
             :scripts="directorScripts"
             v-model:selected-id="directorScriptId"
@@ -288,6 +295,7 @@
           >
             <div class="min-w-0">
               <PromptPartsEditor
+                :simple="!advanced"
                 v-model:pre="promptPre"
                 v-model:prompt="prompt"
                 v-model:post="promptPost"
@@ -660,6 +668,11 @@
           </div>
         </div>
 
+        <div v-if="!advanced" class="space-y-4">
+          <AspectRatioPick v-if="imageStudio" :model-value="aspect" heading="Image size" :options="imageAspects" @update:model-value="setImageAspect" />
+          <template v-else><DurationField v-model="duration" label="Duration" /><AspectRatioPick v-model="aspect" heading="Video size" :options="videoAspects" /></template>
+        </div>
+        <GenerationSettings :advanced="advanced">
         <div v-if="studioMode === 'video'" class="space-y-3">
           <p class="text-xs text-zinc-500">{{ videoModelHint }}</p>
           <div v-if="showLegacyMinimaxV1 && videoEngine === 'minimax' && videoStart === 'still'">
@@ -737,6 +750,11 @@
           </details>
         </div>
 
+          <label class="block space-y-2 text-sm">
+            <span>Model</span>
+            <select v-if="imageStudio" :value="v2Engine" class="w-full rounded-xl border border-white/15 bg-zinc-900 p-3" @change="setV2Engine(($event.target as HTMLSelectElement).value as ImageV2Engine)"><option value="flux">Flux Klein 9B</option><option value="krea">Krea 2 Turbo</option></select>
+            <select v-else :value="videoEngine" class="w-full rounded-xl border border-white/15 bg-zinc-900 p-3" @change="selectVideoEngine(($event.target as HTMLSelectElement).value as VideoEngineId)"><option value="minimax">MiniMax H3</option><option v-if="ltxEnabled" value="ltx">LTX 2.3</option></select>
+          </label>
         <div v-if="studioMode === 'video'" class="max-w-md space-y-2">
           <LoraSelect
             v-model="videoLoraStack"
@@ -1126,14 +1144,15 @@
             </span>
           </label>
         </div>
-        <div class="flex flex-wrap gap-3">
+        </GenerationSettings>
+        <div class="sticky bottom-3 z-10 flex flex-wrap gap-3 rounded-2xl bg-zinc-950/95 p-2 shadow-lg">
           <button
             type="button"
             class="flex-1 rounded-2xl bg-amber-400 px-5 py-3 font-semibold text-zinc-950 transition hover:bg-amber-300 disabled:cursor-not-allowed disabled:opacity-50"
             :disabled="studioMode === 'editv2' ? editV2Blocked : (studioMode === 'edit' ? editBlocked : videoGenerateDisabled)"
             @click="studioMode === 'editv2' ? editImageV2() : (studioMode === 'edit' ? editImage() : generate())"
           >
-            {{ studioMode === 'editv2' ? editV2SubmitLabel : (studioMode === 'edit' ? editSubmitLabel : generateLabel) }}
+            {{ !advanced ? 'Queue' : studioMode === 'editv2' ? editV2SubmitLabel : (studioMode === 'edit' ? editSubmitLabel : generateLabel) }}
           </button>
           <button
             v-if="showWakeGpu"
@@ -2393,6 +2412,26 @@ import {
 const runtimeConfig = useRuntimeConfig()
 const route = useRoute()
 const router = useRouter()
+const { advanced } = useStudioLayout()
+const editingTask = ref(false)
+const simpleTask = computed(() => extendOpen.value ? 'Extend' : editingTask.value || (imageStudio.value && ['compose', 'refine'].includes(v2Mode.value)) ? 'Edit' : file.value ? 'From image' : 'From text')
+function chooseSimpleTask(task: string) {
+  if (task === 'Extend') {
+    selectStudioKind('video')
+    void openExtend()
+    return
+  }
+  closeExtend()
+  editingTask.value = task === 'Edit'
+  if (task === 'Edit') selectStudioKind('image')
+  if (task === 'From text') {
+    resetImage()
+    if (imageStudio.value) v2Mode.value = editPassQueue.value.length ? 'iterate' : 'generate'
+  } else {
+    if (imageStudio.value && !editPassQueue.value.length) v2Mode.value = 'edit'
+    if (!file.value) openPicker('main')
+  }
+}
 
 type AspectId = 'auto' | '16:9' | '9:16' | '1:1'
 
diff --git a/pages/music.vue b/pages/music.vue
index 4462f92..c1bf68f 100644
--- a/pages/music.vue
+++ b/pages/music.vue
@@ -1,18 +1,20 @@
 <template>
   <div class="min-h-dvh min-w-0">
     <AppHeader
-      :subtitle="headerSubtitle"
+      :subtitle="advanced ? headerSubtitle : 'Create music from text'"
       current="music"
       :queue-count="queueCount"
     />
 
     <main class="mx-auto min-w-0 max-w-7xl space-y-6 px-4 py-6 sm:px-6">
       <StudioKindCards
+        :advanced="advanced"
         current="music"
         :music-engine="engineFamily"
         @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">
       <section class="glass min-w-0 max-w-full space-y-5 rounded-3xl p-5 sm:p-6">
         <div>
@@ -22,6 +24,12 @@
           </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')"><option value="ace">ACE-Step</option><option value="yue">YuE</option></select></label>
+          <div v-if="!advanced" class="space-y-4">
+            <label v-if="engineFamily !== 'yue'" 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">
@@ -40,6 +48,7 @@
           </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>
 
         <label class="block text-sm">
@@ -93,7 +102,7 @@
             >
             <span class="mt-1 block text-[11px] text-zinc-500">{{ engineFamily === 'yue' ? 'YuE uses this as stage-A length' : `${durationMin}–${durationMax} seconds` }}</span>
           </label>
-          <label v-if="engineFamily !== 'yue'" class="block text-sm">
+          <label v-if="advanced && engineFamily !== 'yue'" class="block text-sm">
             <span class="mb-1 block font-medium text-zinc-300">Steps · {{ steps }}</span>
             <input
               v-model.number="steps"
@@ -108,7 +117,7 @@
         </div>
 
         <div class="grid gap-3 sm:grid-cols-2">
-          <label class="block text-sm">
+          <label v-if="advanced" class="block text-sm">
             <span class="mb-1 block font-medium text-zinc-300">Seed</span>
             <input
               v-model="seed"
@@ -144,7 +153,7 @@
             v-if="busy"
             class="h-4 w-4 animate-spin rounded-full border-2 border-zinc-950/20 border-t-zinc-950"
           />
-          {{ busy ? (status || 'Generating…') : 'Generate' }}
+          {{ busy ? (status || 'Generating…') : advanced ? 'Generate' : 'Queue' }}
         </button>
         <button
           v-if="busy || queued"
@@ -213,6 +222,7 @@
 </template>
 
 <script setup lang="ts">
+const { advanced } = useStudioLayout()
 import {
   DEFAULT_MUSIC_LYRICS,
   DEFAULT_MUSIC_TAGS,