Add a viewer-first mobile shell that swaps in under 768px without restyling desktop Bench.

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

components/studio2/Bench.vue

@@ -1,5 +1,8 @@
 <template>
- <div class="bench-root" :data-display="displayMode">
+ <div class="bench-root" :data-display="displayMode" :data-mobile="isMobile ? '1' : undefined">
+  <Studio2Mobile v-if="isMobile" :ctx="mobileCtx" />
+
+  <template v-else>
   <header class="bench-header">
    <div class="bench-brand">{{ instanceName }}</div>
    <div class="bench-crumb" aria-label="Folder">
@@ -262,6 +265,7 @@
     </div>
    </aside>
   </div>
+  </template>
 
   <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-[var(--line)] bg-[var(--bg)] p-6">
@@ -318,6 +322,7 @@ import {DEFAULT_MUSIC_LYRICS,DEFAULT_MUSIC_TAGS} from '~/utils/music'
 const xaigen=useRuntimeConfig().public.studio==='xaigen'
 const instanceName=String(useRuntimeConfig().public.instanceName || 'AIGen')
 const {displayMode,isClassic}=useDisplayMode()
+const {isMobile}=useIsMobile()
 const classicHideInput=ref(true)
 const classicHideOutput=ref(true)
 const picker=ref('')
@@ -591,4 +596,55 @@ onMounted(async()=>{
  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)})
+
+function randomizeSeed(){form.settings.seedMode='random';form.settings.seed=randomSeed()}
+function setPicker(key:string){picker.value=key}
+
+const mobileCtx=computed(()=>({
+ instanceName,
+ xaigen,
+ form,
+ music,
+ library:library.value,
+ stills:stills.value,
+ tasks,
+ engineOptions:engineOptions.value,
+ gpu:gpu.value,
+ gpuChipLabel:gpuChipLabel.value,
+ queueCount:queueCount.value,
+ queueCards:queueCards.value,
+ focusedJobId:focusedJobId.value,
+ canClearFinished:canClearFinished.value,
+ selected:selected.value,
+ family:family.value,
+ sourceSlot:sourceSlot.value,
+ video:video.value,
+ submitting:submitting.value,
+ uploading:uploading.value,
+ uploadMessage:uploadMessage.value,
+ error:error.value,
+ batchText:batchText.value,
+ negativeChips:negativeChips.value,
+ pickerLoras:pickerLoras.value,
+ currentLoraUse:currentLoraUse.value,
+ loraAliases:{...loraNames.value.aliases,...library.value.loraAliases},
+ loraTriggers:{...loraNames.value.triggers,...library.value.loraTriggers},
+ aspectOptions,
+ stillUrl,
+ isHidden,
+ slotHidden,
+ toggleReveal,
+ chooseTask,
+ selectOutput,
+ deleteOutput,
+ queue,
+ upload,
+ cancel,
+ focusQueueCard,
+ clearFinished,
+ removeNegative,
+ randomizeSeed,
+ setPicker,
+ setBatchText:(v:string)=>{batchText.value=v},
+}))
 </script>