feat: all-beats media chain + per-beat regen + ffmpeg stitch + download proxy

Dockerfile

@@ -10,6 +10,7 @@ ENV PYTHONUNBUFFERED=1 \
 RUN apt-get update && apt-get install -y --no-install-recommends \
         ca-certificates \
         curl \
+        ffmpeg \
     && rm -rf /var/lib/apt/lists/*
 
 WORKDIR /app

app.py

@@ -15,10 +15,10 @@ from typing import Any, Literal
 
 import httpx
 from dotenv import load_dotenv
-from fastapi import FastAPI, HTTPException
+from fastapi import FastAPI, HTTPException, Query
 from fastapi.concurrency import run_in_threadpool
 from fastapi.middleware.cors import CORSMiddleware
-from fastapi.responses import FileResponse
+from fastapi.responses import FileResponse, Response, StreamingResponse
 from fastapi.staticfiles import StaticFiles
 from pydantic import BaseModel, Field
 
@@ -50,6 +50,8 @@ log = logging.getLogger("aether_ad.app")
 PRODUCTS_DIR  = ROOT / "aether_ad" / "data" / "products"
 TENSIONS_PATH = ROOT / "aether_ad" / "data" / "tensions" / "default_tensions.json"
 STATIC_DIR    = ROOT / "static"
+OUTPUTS_DIR   = Path("/tmp/aether_outputs")
+OUTPUTS_DIR.mkdir(parents=True, exist_ok=True)
 
 CONTEXT = load_context(TENSIONS_PATH)
 
@@ -583,8 +585,121 @@ async def generate_video(req: VideoGenRequest) -> dict[str, Any]:
     return {"video_url": url}
 
 
+# ── Video stitching (ffmpeg concat) ────────────────────────────────────────
+
+class StitchRequest(BaseModel):
+    video_urls: list[str] = Field(min_length=1, max_length=12)
+
+
+def _ffmpeg_concat(video_urls: list[str]) -> str:
+    """Download N video URLs, ffmpeg-concat them, return /outputs/<name>.mp4."""
+    import subprocess
+    import uuid
+
+    job_id = uuid.uuid4().hex[:12]
+    work_dir = OUTPUTS_DIR / f"job_{job_id}"
+    work_dir.mkdir(parents=True, exist_ok=True)
+
+    local_paths: list[Path] = []
+    with httpx.Client(timeout=120.0, follow_redirects=True) as client:
+        for i, url in enumerate(video_urls):
+            r = client.get(url)
+            r.raise_for_status()
+            p = work_dir / f"clip_{i:02d}.mp4"
+            p.write_bytes(r.content)
+            local_paths.append(p)
+
+    list_file = work_dir / "concat.txt"
+    list_file.write_text(
+        "\n".join(f"file '{str(p).replace(chr(39), chr(39) + chr(92) + chr(39) + chr(39))}'"
+                  for p in local_paths),
+        encoding="utf-8",
+    )
+
+    out_file = OUTPUTS_DIR / f"stitched_{job_id}.mp4"
+
+    # First attempt: stream copy (works when all clips share codec/parameters)
+    cmd_copy = [
+        "ffmpeg", "-y", "-f", "concat", "-safe", "0",
+        "-i", str(list_file), "-c", "copy", str(out_file),
+    ]
+    proc = subprocess.run(cmd_copy, capture_output=True, text=True, timeout=180)
+    if proc.returncode != 0:
+        log.warning("ffmpeg concat -c copy failed, retrying with re-encode: %s", proc.stderr[-300:])
+        # Fallback: re-encode (slower but tolerant of mismatched parameters)
+        inputs: list[str] = []
+        filter_parts: list[str] = []
+        for i, p in enumerate(local_paths):
+            inputs += ["-i", str(p)]
+            filter_parts.append(f"[{i}:v:0][{i}:a:0?]")
+        n = len(local_paths)
+        filter_complex = "".join(filter_parts) + f"concat=n={n}:v=1:a=0[outv]"
+        cmd_reenc = [
+            "ffmpeg", "-y", *inputs,
+            "-filter_complex", filter_complex,
+            "-map", "[outv]",
+            "-c:v", "libx264", "-preset", "veryfast", "-crf", "23",
+            "-pix_fmt", "yuv420p",
+            str(out_file),
+        ]
+        proc2 = subprocess.run(cmd_reenc, capture_output=True, text=True, timeout=300)
+        if proc2.returncode != 0:
+            raise RuntimeError(f"ffmpeg re-encode failed: {proc2.stderr[-500:]}")
+
+    return f"/outputs/stitched_{job_id}.mp4"
+
+
+@app.post("/api/media/stitch")
+async def stitch_videos(req: StitchRequest) -> dict[str, Any]:
+    """Concatenate fal-generated videos into one final ad."""
+    if len(req.video_urls) < 2:
+        raise HTTPException(status_code=400, detail="Need at least 2 video URLs")
+    try:
+        served_url = await run_in_threadpool(_ffmpeg_concat, req.video_urls)
+    except Exception as e:
+        log.exception("stitch failed")
+        raise HTTPException(status_code=500, detail=f"Stitch failed: {e}") from e
+    return {"video_url": served_url}
+
+
+# ── Download proxy (forces 'attachment' so browsers actually save) ─────────
+
+@app.get("/api/media/download")
+async def download_proxy(
+    url: str = Query(..., min_length=8, max_length=2000),
+    filename: str = Query("scene.mp4", max_length=120),
+) -> StreamingResponse:
+    """Stream a remote media file with Content-Disposition: attachment.
+    Necessary because fal.media is cross-origin so the browser ignores the
+    HTML download attribute when the user clicks.
+    """
+    safe_name = re.sub(r"[^A-Za-z0-9._-]+", "_", filename)[:120] or "scene.mp4"
+    media_type = "video/mp4" if safe_name.endswith(".mp4") else "image/jpeg"
+    client = httpx.AsyncClient(timeout=120.0, follow_redirects=True)
+    upstream = await client.send(client.build_request("GET", url), stream=True)
+    if upstream.status_code != 200:
+        await upstream.aclose()
+        await client.aclose()
+        raise HTTPException(status_code=upstream.status_code, detail="upstream fetch failed")
+
+    async def _stream():
+        try:
+            async for chunk in upstream.aiter_bytes(chunk_size=64 * 1024):
+                yield chunk
+        finally:
+            await upstream.aclose()
+            await client.aclose()
+
+    return StreamingResponse(
+        _stream(),
+        media_type=upstream.headers.get("content-type") or media_type,
+        headers={"Content-Disposition": f'attachment; filename="{safe_name}"'},
+    )
+
+
 if STATIC_DIR.exists():
     app.mount("/static", StaticFiles(directory=STATIC_DIR), name="static")
+app.mount("/outputs", StaticFiles(directory=str(OUTPUTS_DIR)), name="outputs")
 
 
 if __name__ == "__main__":  # pragma: no cover

static/app.js

@@ -526,6 +526,8 @@ function renderSeedCard(s, rank) {
       `).join('')}
     </div>
 
+    <div data-stitch-host="${rank - 1}"></div>
+
     <div class="aether-provenance" title="AETHER 5-생성자가 내부에서 서로를 상생·상극으로 조율하여 이 하나의 장면을 합성했습니다.">
       ⚙️ AETHER 5-생성자 메타인지: 木(씨앗) → 火(증폭) → 土(지반) → 金(편집) → 水(통합)
     </div>
@@ -585,6 +587,7 @@ function renderSeedCard(s, rank) {
   // the card is already in the tree when we query data-media attributes.
   queueMicrotask(() => {
     seed.beats.forEach((_, bi) => renderMediaSlot(rank - 1, bi));
+    renderStitchSection(rank - 1);
   });
 
   return card;
@@ -617,70 +620,125 @@ function renderConstraints(c) {
 
 /* ── Media (fal.ai Grok Imagine) ───────────────────────────────────────── */
 
-/** Auto-chain: top 3 seeds' first beats → 3 images (ref-chained) → final video. */
+const STITCH_STATE = {};   // STITCH_STATE[seedIdx] = { status, video_url, message }
+
+/** Auto-pipeline (top seed only):
+ *   Phase 1 — generate images for ALL beats with sliding-window ref chain
+ *             (each new image gets the previous up-to-3 images as references)
+ *   Phase 2 — generate i2v video for each image, sequentially
+ *   Phase 3 — show "stitch all clips" button when ≥2 videos ready
+ */
 async function autoMediaChain(seeds) {
   if (!seeds || !seeds.length) return;
-  const top = seeds.slice(0, Math.min(3, seeds.length));
-  const refUrls = [];
-
-  for (let i = 0; i < top.length; i++) {
-    const beat = top[i].seed.beats[0];
-    if (!beat || !beat.content) continue;
-    const scene = beat.content;
-    _setMediaState(i, 0, {
-      status: 'loading',
-      kind: 'image',
-      message: i === 0
-        ? '🖼 텍스트 → 이미지 생성 중…'
-        : `🖼 이미지 편집 중 (참조 ${refUrls.length}개)…`,
-    });
+  const sIdx = 0;                     // top_k=1 ⇒ only seed
+  const beats = seeds[sIdx].seed.beats || [];
+  if (!beats.length) return;
+
+  // Phase 1 — image chain
+  for (let i = 0; i < beats.length; i++) {
+    const ok = await _genImageForBeat(sIdx, i, /*useChain*/ true);
+    if (!ok) break;     // stop the image chain on error; user can retry per-beat
+  }
 
-    try {
-      const body = { scene };
-      if (refUrls.length > 0) body.ref_image_urls = [...refUrls];
-      const r = await fetch('/api/media/image', {
-        method: 'POST',
-        headers: {'Content-Type': 'application/json'},
-        body: JSON.stringify(body),
-      });
-      const data = await r.json();
-      if (!r.ok) throw new Error(data.detail || `HTTP ${r.status}`);
-      refUrls.push(data.image_url);
-      _setMediaState(i, 0, { image_url: data.image_url, status: 'ready' });
-    } catch (e) {
-      _setMediaState(i, 0, {
-        status: 'error',
-        message: `이미지 실패: ${e.message || e}`,
-      });
-      return;  // stop chain on error
+  // Phase 2 — per-image i2v, sequential
+  for (let i = 0; i < beats.length; i++) {
+    if (!MEDIA_STATE[sIdx]?.[i]?.image_url) continue;
+    if (MEDIA_STATE[sIdx]?.[i]?.video_url)  continue;
+    await _genVideoForBeat(sIdx, i);
+    // continue even if one fails — user can regen
+  }
+
+  // Phase 3 — show stitch UI
+  renderStitchSection(sIdx);
+}
+
+/** Generate image for one beat. If useChain, attach last 3 prior images as refs. */
+async function _genImageForBeat(sIdx, bIdx, useChain) {
+  const beat = LATEST_RESULTS?.seeds?.[sIdx]?.seed?.beats?.[bIdx];
+  if (!beat?.content) return false;
+  const total = LATEST_RESULTS.seeds[sIdx].seed.beats.length;
+
+  const refs = [];
+  if (useChain) {
+    for (let k = Math.max(0, bIdx - 3); k < bIdx; k++) {
+      const u = MEDIA_STATE[sIdx]?.[k]?.image_url;
+      if (u) refs.push(u);
     }
   }
 
-  // Final: image-to-video on the last seed's first-beat image
-  if (refUrls.length === 0) return;
-  const lastIdx = refUrls.length - 1;
-  const lastScene = top[lastIdx].seed.beats[0]?.content || '';
-  _setMediaState(lastIdx, 0, {
+  _setMediaState(sIdx, bIdx, {
     status: 'loading',
-    kind: 'video',
-    message: '🎬 최종 이미지 → 비디오 생성 중… (60-180초)',
+    kind: 'image',
+    message: refs.length
+      ? `🖼 이미지 ${bIdx + 1}/${total} (참조 ${refs.length})…`
+      : `🖼 이미지 ${bIdx + 1}/${total} 생성 중…`,
+  });
+  try {
+    const body = { scene: beat.content };
+    if (refs.length) body.ref_image_urls = refs;
+    const r = await fetch('/api/media/image', {
+      method: 'POST',
+      headers: {'Content-Type': 'application/json'},
+      body: JSON.stringify(body),
+    });
+    const data = await r.json();
+    if (!r.ok) throw new Error(data.detail || `HTTP ${r.status}`);
+    _setMediaState(sIdx, bIdx, { image_url: data.image_url, status: 'ready' });
+    return true;
+  } catch (e) {
+    _setMediaState(sIdx, bIdx, {
+      status: 'error', kind: 'image',
+      message: `���미지 실패: ${e.message || e}`,
+    });
+    return false;
+  }
+}
+
+async function _genVideoForBeat(sIdx, bIdx) {
+  const beat = LATEST_RESULTS?.seeds?.[sIdx]?.seed?.beats?.[bIdx];
+  if (!beat?.content) return false;
+  const imgUrl = MEDIA_STATE[sIdx]?.[bIdx]?.image_url;
+  if (!imgUrl) return false;
+  const total = LATEST_RESULTS.seeds[sIdx].seed.beats.length;
+
+  _setMediaState(sIdx, bIdx, {
+    status: 'loading', kind: 'video',
+    message: `🎬 비디오 ${bIdx + 1}/${total} 생성 중… (60-180초)`,
   });
   try {
     const r = await fetch('/api/media/video', {
       method: 'POST',
       headers: {'Content-Type': 'application/json'},
-      body: JSON.stringify({scene: lastScene, image_url: refUrls[lastIdx]}),
+      body: JSON.stringify({scene: beat.content, image_url: imgUrl}),
     });
     const data = await r.json();
     if (!r.ok) throw new Error(data.detail || `HTTP ${r.status}`);
-    _setMediaState(lastIdx, 0, { video_url: data.video_url, status: 'ready' });
+    _setMediaState(sIdx, bIdx, { video_url: data.video_url, status: 'ready' });
+    return true;
   } catch (e) {
-    _setMediaState(lastIdx, 0, {
-      status: 'error',
-      kind: 'video',
+    _setMediaState(sIdx, bIdx, {
+      status: 'error', kind: 'video',
       message: `비디오 실패: ${e.message || e}`,
     });
+    return false;
+  }
+}
+
+/** Manual handlers — buttons call these. */
+async function manualGenerateImage(sIdx, bIdx) {
+  await _genImageForBeat(sIdx, bIdx, /*useChain*/ true);
+  // re-render stitch in case state changed
+  renderStitchSection(sIdx);
+}
+
+async function manualGenerateVideo(sIdx, bIdx) {
+  let imgUrl = MEDIA_STATE[sIdx]?.[bIdx]?.image_url;
+  if (!imgUrl) {
+    const ok = await _genImageForBeat(sIdx, bIdx, /*useChain*/ true);
+    if (!ok) return;
   }
+  await _genVideoForBeat(sIdx, bIdx);
+  renderStitchSection(sIdx);
 }
 
 /** Manual: text-to-image for any beat (no refs). */
@@ -763,20 +821,24 @@ function renderMediaSlot(sIdx, bIdx) {
   slot.innerHTML = mediaSlotHtml(sIdx, bIdx, st, isAuto);
 }
 
-function mediaSlotHtml(sIdx, bIdx, st, isAuto) {
+function mediaSlotHtml(sIdx, bIdx, st, _isAuto) {
   const parts = [];
-  // Status message (loading or error)
+  // Status (loading / error)
   if (st.status === 'loading' && st.message) {
     parts.push(`<div class="media-status media-loading">${escapeHtml(st.message)}</div>`);
   } else if (st.status === 'error' && st.message) {
     parts.push(`<div class="media-status media-error-msg">${escapeHtml(st.message)}</div>`);
   }
+  const fname = (kind) => `aether_${sIdx}_${String(bIdx).padStart(2,'0')}.${kind}`;
+
   // Image preview
   if (st.image_url) {
     parts.push(`
       <div class="media-thumb">
-        <img src="${escapeAttr(st.image_url)}" alt="scene image" loading="lazy" />
-        <a class="media-download" href="${escapeAttr(st.image_url)}" target="_blank" rel="noopener" title="원본 열기">↗</a>
+        <img src="${escapeAttr(st.image_url)}" alt="scene ${bIdx + 1}" loading="lazy" />
+        <a class="media-download"
+           href="/api/media/download?url=${encodeURIComponent(st.image_url)}&filename=${encodeURIComponent(fname('jpg'))}"
+           title="이미지 다운로드">↓</a>
       </div>
     `);
   }
@@ -785,16 +847,18 @@ function mediaSlotHtml(sIdx, bIdx, st, isAuto) {
     parts.push(`
       <div class="media-thumb">
         <video src="${escapeAttr(st.video_url)}" controls playsinline preload="metadata"></video>
-        <a class="media-download" href="${escapeAttr(st.video_url)}" target="_blank" rel="noopener" title="원본 열기">↗</a>
+        <a class="media-download"
+           href="/api/media/download?url=${encodeURIComponent(st.video_url)}&filename=${encodeURIComponent(fname('mp4'))}"
+           title="비디오 다운로드">↓</a>
       </div>
     `);
   }
-  // Controls — only for non-auto beats
-  if (!isAuto && HAS_FAL) {
+  // Controls — always render when fal is available; labels switch to 재생성
+  if (HAS_FAL) {
     const imgDisabled = st.status === 'loading' ? 'disabled' : '';
     const vidDisabled = st.status === 'loading' ? 'disabled' : '';
-    const imgLabel = st.image_url ? '🖼 이미지 재생성' : '🖼 이미지 생성';
-    const vidLabel = st.video_url ? '🎬 비디오 재생성' : '🎬 비디오 생성';
+    const imgLabel = st.image_url ? '🔄 이미지 재생성' : '🖼 이미지 생성';
+    const vidLabel = st.video_url ? '🔄 비디오 재생성' : '🎬 비디오 생성';
     parts.push(`
       <div class="media-controls">
         <button type="button" class="btn-media" data-media-btn="image" data-seed="${sIdx}" data-beat="${bIdx}" ${imgDisabled}>${imgLabel}</button>
@@ -802,19 +866,106 @@ function mediaSlotHtml(sIdx, bIdx, st, isAuto) {
       </div>
     `);
   }
-  // If the auto beat hasn't started yet, show a faint placeholder
-  if (isAuto && !st.status && !st.image_url && !st.video_url) {
-    parts.push(`<div class="media-status media-idle">🎨 자동 생성 대기 중…</div>`);
-  }
   return parts.join('');
 }
 
+/** Render the "stitch all videos" section at the bottom of the seed card. */
+function renderStitchSection(sIdx) {
+  const host = document.querySelector(`[data-stitch-host="${sIdx}"]`);
+  if (!host) return;
+  const seed = LATEST_RESULTS?.seeds?.[sIdx]?.seed;
+  if (!seed) { host.innerHTML = ''; return; }
+
+  const videoUrls = [];
+  for (let i = 0; i < seed.beats.length; i++) {
+    const u = MEDIA_STATE[sIdx]?.[i]?.video_url;
+    if (u) videoUrls.push(u);
+  }
+
+  const stitch = STITCH_STATE[sIdx] || {};
+  const html = [];
+
+  html.push(`<div class="seed-section-title">🎬 최종 영상 (모든 비트 합치기)</div>`);
+  html.push(`<div class="final-stitch">`);
+
+  if (stitch.status === 'loading') {
+    html.push(`<div class="media-status media-loading">${escapeHtml(stitch.message || '🎬 ffmpeg 합치는 중…')}</div>`);
+  } else if (stitch.status === 'error') {
+    html.push(`<div class="media-status media-error-msg">${escapeHtml(stitch.message || '합치기 실패')}</div>`);
+  }
+
+  if (stitch.video_url) {
+    html.push(`
+      <div class="media-thumb stitch-thumb">
+        <video src="${escapeAttr(stitch.video_url)}" controls playsinline preload="metadata"></video>
+      </div>
+      <div class="stitch-actions">
+        <a class="btn-stitch-download"
+           href="/api/media/download?url=${encodeURIComponent(stitch.video_url)}&filename=aether_final_seed${sIdx}.mp4"
+           title="최종 영상 다운로드">↓ 최종 영상 다운로드</a>
+        <button type="button" class="btn-stitch" data-stitch-seed="${sIdx}">🔄 다시 합치기</button>
+      </div>
+    `);
+  } else {
+    const ready = videoUrls.length;
+    const total = seed.beats.length;
+    const enough = ready >= 2;
+    const disabled = !enough || stitch.status === 'loading' ? 'disabled' : '';
+    html.push(`
+      <div class="stitch-progress">비트 비디오 ${ready}/${total} 준비 ${enough ? '· 합칠 수 있습니다' : '— 최소 2개 필요'}</div>
+      <button type="button" class="btn-stitch" data-stitch-seed="${sIdx}" ${disabled}>
+        🎬 모든 비트 영상 하나로 합치기
+      </button>
+    `);
+  }
+
+  html.push(`</div>`);
+  host.innerHTML = html.join('');
+}
+
+/** Stitch handler. */
+async function stitchAllVideos(sIdx) {
+  const seed = LATEST_RESULTS?.seeds?.[sIdx]?.seed;
+  if (!seed) return;
+  const urls = [];
+  for (let i = 0; i < seed.beats.length; i++) {
+    const u = MEDIA_STATE[sIdx]?.[i]?.video_url;
+    if (u) urls.push(u);
+  }
+  if (urls.length < 2) {
+    STITCH_STATE[sIdx] = { status: 'error', message: '최소 2개의 비트 비디오가 필요합니다.' };
+    renderStitchSection(sIdx);
+    return;
+  }
+  STITCH_STATE[sIdx] = { status: 'loading', message: `🎬 ${urls.length}개 비디오 합치는 중… (다운로드 + ffmpeg)` };
+  renderStitchSection(sIdx);
+  try {
+    const r = await fetch('/api/media/stitch', {
+      method: 'POST',
+      headers: {'Content-Type': 'application/json'},
+      body: JSON.stringify({video_urls: urls}),
+    });
+    const data = await r.json();
+    if (!r.ok) throw new Error(data.detail || `HTTP ${r.status}`);
+    STITCH_STATE[sIdx] = { status: 'ready', video_url: data.video_url };
+  } catch (e) {
+    STITCH_STATE[sIdx] = { status: 'error', message: `합치기 실패: ${e.message || e}` };
+  }
+  renderStitchSection(sIdx);
+}
+
 function escapeAttr(s) {
   return String(s || '').replace(/"/g, '&quot;').replace(/</g, '&lt;');
 }
 
-/* Delegate clicks on generate buttons */
+/* Delegate clicks on generate / stitch buttons */
 document.addEventListener('click', (e) => {
+  const stitchBtn = e.target.closest('.btn-stitch');
+  if (stitchBtn && !stitchBtn.disabled) {
+    const sIdx = parseInt(stitchBtn.dataset.stitchSeed, 10);
+    stitchAllVideos(sIdx);
+    return;
+  }
   const btn = e.target.closest('.btn-media');
   if (!btn) return;
   const sIdx = parseInt(btn.dataset.seed, 10);

static/index.html

@@ -10,7 +10,7 @@
 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet" />
 <link href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css" rel="stylesheet" />
 <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.6/dist/chart.umd.min.js"></script>
-<link rel="stylesheet" href="/static/styles.css?v=1.0.0" />
+<link rel="stylesheet" href="/static/styles.css?v=1.1.0" />
 </head>
 <body>
 <header class="hero">
@@ -249,6 +249,6 @@
   </div>
 </footer>
 
-<script src="/static/app.js?v=1.0.0"></script>
+<script src="/static/app.js?v=1.1.0"></script>
 </body>
 </html>

static/styles.css

@@ -890,6 +890,72 @@ input[type="range"] { padding: 0; width: 100%; accent-color: var(--primary); }
   .beat-media       { grid-column: 1 / 3; }
 }
 
+/* ── FINAL STITCH (combine all beat videos) ──────────────────── */
+.final-stitch {
+  margin: 6px 0 14px;
+  padding: 14px 16px;
+  background: linear-gradient(135deg, #f5f3ff 0%, #ffffff 100%);
+  border: 1px solid #c4b5fd;
+  border-radius: 12px;
+  display: flex; flex-direction: column; gap: 10px;
+}
+.stitch-progress {
+  font-size: 12px; color: var(--text-muted);
+}
+.btn-stitch {
+  align-self: flex-start;
+  padding: 9px 16px;
+  border: none;
+  border-radius: 8px;
+  background: linear-gradient(135deg, var(--primary), var(--accent));
+  color: white;
+  font-weight: 700; font-size: 13px;
+  cursor: pointer;
+  font-family: inherit;
+  transition: all 0.15s;
+  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25);
+}
+.btn-stitch:hover:not(:disabled) {
+  transform: translateY(-1px);
+  box-shadow: 0 6px 18px rgba(79, 70, 229, 0.35);
+}
+.btn-stitch:disabled {
+  opacity: 0.5; cursor: not-allowed;
+  background: var(--surface-2); color: var(--text-subtle);
+  box-shadow: none;
+}
+.stitch-thumb { max-width: 100%; }
+.stitch-thumb video {
+  width: 100%; max-height: 360px; height: auto;
+  object-fit: contain;
+  background: #0f172a;
+}
+.stitch-actions {
+  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
+}
+.btn-stitch-download {
+  display: inline-flex; align-items: center; gap: 6px;
+  padding: 8px 14px;
+  background: var(--success);
+  color: white;
+  border-radius: 8px;
+  text-decoration: none;
+  font-size: 13px; font-weight: 700;
+  font-family: inherit;
+  box-shadow: 0 3px 10px rgba(16, 185, 129, 0.28);
+  transition: all 0.15s;
+}
+.btn-stitch-download:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 5px 16px rgba(16, 185, 129, 0.4);
+}
+
+/* Per-beat regen download button — replaces the old ↗ open icon */
+.media-download {
+  /* upgrade existing style: now a download (proxy) anchor */
+  font-weight: 800;
+}
+
 /* AETHER 5-generator metacognitive provenance (compact one-liner) */
 .aether-provenance {
   margin-top: 14px;