Nest shot scripts under Queue jobs, keep the studio from overflowing on phones, and lighten library thumbs and polling so the UI stays responsive.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-08-27 22:27:17 -05:00
parent dec1a49bef
commit b2c59c3423
14 changed files with 634 additions and 133 deletions
@@ -0,0 +1,67 @@
+<template>
+  <Teleport to="body">
+    <div
+      v-if="open"
+      class="fixed inset-0 z-50 flex flex-col bg-zinc-950 px-4 pb-4 pt-[max(1rem,env(safe-area-inset-top))]"
+    >
+      <div class="mb-3 flex items-center justify-between gap-3">
+        <h2 class="min-w-0 truncate font-display text-lg font-bold">{{ title }}</h2>
+        <button
+          type="button"
+          class="shrink-0 rounded-full border border-white/15 px-3 py-1 text-sm text-zinc-300 hover:text-white"
+          @click="close"
+        >
+          Done
+        </button>
+      </div>
+      <textarea
+        v-if="editable"
+        :value="text"
+        class="min-h-0 w-full flex-1 resize-none rounded-2xl border border-white/10 bg-zinc-900 px-4 py-3 text-base leading-relaxed text-zinc-100 outline-none ring-amber-300/40 [overflow-wrap:anywhere] focus:ring-2"
+        :placeholder="placeholder"
+        @input="onInput"
+      />
+      <div
+        v-else
+        class="min-h-0 flex-1 overflow-y-auto whitespace-pre-wrap rounded-2xl border border-white/10 bg-zinc-900 px-4 py-3 text-base leading-relaxed text-zinc-200 [overflow-wrap:anywhere]"
+      >{{ text }}</div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+  open: boolean
+  title?: string
+  text?: string
+  editable?: boolean
+  placeholder?: string
+}>(), {
+  title: 'Prompt',
+  text: '',
+  editable: true,
+  placeholder: ''
+})
+
+const emit = defineEmits<{
+  'update:open': [value: boolean]
+  'update:text': [value: string]
+}>()
+
+function onInput(event: Event) {
+  emit('update:text', (event.target as HTMLTextAreaElement).value)
+}
+
+function close() {
+  emit('update:open', false)
+}
+
+watch(() => props.open, (open) => {
+  if (typeof document === 'undefined') return
+  document.body.style.overflow = open ? 'hidden' : ''
+})
+
+onBeforeUnmount(() => {
+  if (typeof document !== 'undefined') document.body.style.overflow = ''
+})
+</script>