Add batch still arrows, hide output only on tap, and cut studio lag.

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

components/AppHeader.vue

@@ -1,5 +1,5 @@
 <template>
-  <header class="sticky top-0 z-20 border-b border-white/5 bg-zinc-950/70 backdrop-blur-xl">
+  <header class="sticky top-0 z-20 border-b border-white/5 bg-zinc-950/90 sm:bg-zinc-950/80 sm:backdrop-blur-md">
     <div
       class="mx-auto flex items-center justify-between px-4 py-4 sm:px-6"
       :class="wide ? 'max-w-[90rem]' : 'max-w-7xl'"
@@ -30,7 +30,7 @@
         </div>
         <div
           v-if="menuOpen"
-          class="absolute left-0 top-full z-30 mt-2 w-52 rounded-2xl border border-white/10 bg-zinc-950/95 p-1 shadow-xl shadow-black/40 backdrop-blur-xl"
+          class="absolute left-0 top-full z-30 mt-2 w-52 rounded-2xl border border-white/10 bg-zinc-950/95 p-1 shadow-xl shadow-black/40"
           role="menu"
           @click.stop
         >
@@ -285,7 +285,7 @@ onMounted(async () => {
   healthTimer = setInterval(() => {
     if (typeof document !== 'undefined' && document.hidden) return
     void pollHealth()
-  }, 5000)
+  }, 15000)
 })
 
 onBeforeUnmount(() => {

components/FamilyNav.vue

@@ -0,0 +1,42 @@
+<template>
+  <div v-if="count > 1" class="pointer-events-none absolute inset-0 z-20">
+    <button
+      type="button"
+      class="family-nav family-nav-prev pointer-events-auto"
+      :aria-label="prevLabel"
+      @click.stop="$emit('step', -1)"
+      @pointerdown.stop
+    >
+      <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+        <path d="M15 5 8 12l7 7" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" />
+      </svg>
+    </button>
+    <button
+      type="button"
+      class="family-nav family-nav-next pointer-events-auto"
+      :aria-label="nextLabel"
+      @click.stop="$emit('step', 1)"
+      @pointerdown.stop
+    >
+      <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+        <path d="m9 5 7 7-7 7" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" />
+      </svg>
+    </button>
+    <span class="pointer-events-none absolute bottom-2 left-1/2 -translate-x-1/2 rounded-full bg-zinc-950/75 px-2 py-0.5 text-[11px] tabular-nums text-amber-100">
+      {{ index + 1 }} / {{ count }}
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+withDefaults(defineProps<{
+  count: number
+  index: number
+  prevLabel?: string
+  nextLabel?: string
+}>(), {
+  prevLabel: 'Previous image',
+  nextLabel: 'Next image'
+})
+defineEmits<{ step: [delta: number] }>()
+</script>