fix(studio,runtime,engine,compiler): 8 bug fixes — audio, render, timeline, Lottie, thumbnails, video render (#133)

## Summary

**Original 5 bugs fixed:**

- **Bug 1 — Audio silent after seek**: Added `Accept-Ranges` / `Content-Length` + `206 Partial Content` to the static asset server for byte-range seeking.
- **Bug 2 — Download 404 after restart**: Render list endpoint now registers on-disk renders into the in-memory job map.
- **Bug 3 — Timeline stops at GSAP end**: `resolveRootTimelineFromDocument` pads the GSAP timeline to match `data-duration` when the composition declares longer.
- **Bug 4 — Render stuck at 0%**: Store `jobState` reference (not spread copy) so async progress mutations reach the SSE stream.
- **Bug 5 — Lottie missing in preview/render**: Two fixes — (a) moved Lottie adapter before GSAP so `onUpdate` wins; (b) fixed bundler silently dropping external CDN `\<script src>` tags from sub-compositions (root cause: `$content(s).html()` returns `""` for external scripts).

**3 additional bugs fixed:**

- **Bug 6 — Blank thumbnails outside monorepo**: Implemented `generateThumbnail` in the CLI adapter using Puppeteer.
- **Bug 7 — Video empty in rendered sub-compositions**: Fixed `parseVideoElements` selector from `video[id][src]` to `video[src][data-start]` + auto-assign IDs.
- **Render errors**: Failed renders now show their error message in the renders panel.

## Commits

| Commit | Description |
| --- | --- |
| `3951c6f` | fix(studio): store render job reference instead of snapshot copy |
| `f331c30` | fix(studio): make previously-completed renders downloadable after restart |
| `a5e2d04` | fix(studio): add range request support for audio/video seeking in preview |
| `f24317a` | fix(runtime): pad GSAP timeline to data-duration when composition declares longer duration |
| `7cf38ca` | fix(runtime): fix Lottie adapter conflicting with GSAP-driven animations |
| `bc99209` | fix(studio): surface render error messages in the renders panel |
| `8fc9e8b` | fix(cli): implement generateThumbnail in studio adapter |
| `90277ea` | fix(engine): render videos inside sub-compositions that lack an explicit id |
| `f5bb579` | fix(compiler): preserve external CDN scripts from sub-compositions in bundle |

## Test plan

- [x] `golden-lyric-video`: seek → audio plays from seeked position
- [x] Any project: render → progress advances past 0%, reaches 100%
- [x] Any project: complete render, restart `hyperframes dev`, Download → works
- [x] `intro-vid`: play → runs full 5s (not stopping at 3s)
- [x] `hyperframe-build-up-demo`: play → rocket Lottie visible during 0-2s ✅ verified
- [x] Outside monorepo: Compositions sidebar shows thumbnail images (not blank)
- [x] `bug.zip` project: render → video in polaroid sub-composition appears in output
- [x] Trigger a failed render → error message shown

packages/studio/src/components/sidebar/AssetsTab.tsx

@@ -1,5 +1,7 @@
 import { memo, useState, useCallback, useRef } from "react";
 import { ExpandOnHover } from "../ui/ExpandOnHover";
+import { ExpandedVideoPreview } from "../ui/ExpandedVideoPreview";
+import { VideoFrameThumbnail } from "../ui/VideoFrameThumbnail";
 
 interface AssetsTabProps {
   projectId: string;
@@ -32,28 +34,13 @@ function AssetThumbnail({
           src={serveUrl}
           alt={name}
           loading="lazy"
-          className="w-full h-full object-cover"
+          className="w-full h-full object-contain"
           onError={(e) => {
             (e.target as HTMLImageElement).style.display = "none";
           }}
         />
       )}
-      {isVideo && (
-        <>
-          <video
-            src={serveUrl}
-            muted
-            playsInline
-            preload="metadata"
-            className="w-full h-full object-cover"
-          />
-          <div className="absolute inset-0 flex items-center justify-center bg-black/30">
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="white" className="opacity-80">
-              <polygon points="6,3 20,12 6,21" />
-            </svg>
-          </div>
-        </>
-      )}
+      {isVideo && <VideoFrameThumbnail src={serveUrl} />}
       {isAudio && (
         <div className="w-full h-full flex items-center justify-center bg-neutral-900">
           <svg
@@ -112,22 +99,33 @@ function ExpandedAssetPreview({
   isAudio: boolean;
   onCopy: () => void;
 }) {
+  if (isVideo) {
+    return (
+      <ExpandedVideoPreview
+        src={serveUrl}
+        name={name}
+        subtitle={asset}
+        action={
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              onCopy();
+            }}
+            className="px-4 py-1.5 text-xs font-semibold text-[#09090B] bg-[#3CE6AC] rounded-lg hover:brightness-110 transition-colors flex-shrink-0"
+          >
+            Copy Path
+          </button>
+        }
+      />
+    );
+  }
+
   return (
     <div className="w-full h-full bg-neutral-950 rounded-[16px] overflow-hidden flex flex-col">
       <div className="flex-1 min-h-0 flex items-center justify-center bg-black p-4">
         {isImage && (
           <img src={serveUrl} alt={name} className="max-w-full max-h-full object-contain rounded" />
         )}
-        {isVideo && (
-          <video
-            src={serveUrl}
-            autoPlay
-            muted
-            loop
-            playsInline
-            className="max-w-full max-h-full object-contain rounded"
-          />
-        )}
         {isAudio && (
           <div className="flex flex-col items-center gap-4">
             <svg

packages/studio/src/components/sidebar/CompositionsTab.tsx

@@ -146,7 +146,7 @@ function CompCard({
   onSelect: () => void;
 }) {
   const name = comp.replace(/^compositions\//, "").replace(/\.html$/, "");
-  const thumbnailUrl = `/api/projects/${projectId}/thumbnail/${comp}?t=0.5`;
+  const thumbnailUrl = `/api/projects/${projectId}/thumbnail/${comp}?t=2`;
   const previewUrl = `/api/projects/${projectId}/preview/comp/${comp}`;
 
   const card = (
@@ -162,7 +162,7 @@ function CompCard({
           src={thumbnailUrl}
           alt={name}
           loading="lazy"
-          className="w-full h-full object-cover"
+          className="w-full h-full object-contain"
           onError={(e) => {
             (e.target as HTMLImageElement).style.display = "none";
           }}