diff --git a/Cargo.lock b/Cargo.lock
index 0fb67bc..c840591 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -456,6 +456,14 @@ dependencies = [
  "thiserror",
 ]
 
+[[package]]
+name = "tellur-live"
+version = "0.1.0"
+dependencies = [
+ "tellur-core",
+ "tellur-renderer",
+]
+
 [[package]]
 name = "tellur-macros"
 version = "0.1.0"
diff --git a/Cargo.toml b/Cargo.toml
index 6d4642d..b744eba 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -1,3 +1,3 @@
 [workspace]
-members = ["tellur-core", "tellur-macros", "tellur-renderer"]
+members = ["tellur-core", "tellur-live", "tellur-macros", "tellur-renderer"]
 resolver = "2"
diff --git a/tellur-live/Cargo.toml b/tellur-live/Cargo.toml
new file mode 100644
index 0000000..06318d7
--- /dev/null
+++ b/tellur-live/Cargo.toml
@@ -0,0 +1,17 @@
+[package]
+name = "tellur-live"
+version = "0.1.0"
+edition = "2021"
+build = "build.rs"
+
+[dependencies]
+tellur-core = { path = "../tellur-core" }
+tellur-renderer = { path = "../tellur-renderer" }
+
+[[example]]
+name = "demo_timeline_plugin"
+crate-type = ["cdylib"]
+
+[[example]]
+name = "demo_timeline_mp4"
+path = "examples/demo_timeline_mp4.rs"
diff --git a/tellur-live/README.md b/tellur-live/README.md
new file mode 100644
index 0000000..058550d
--- /dev/null
+++ b/tellur-live/README.md
@@ -0,0 +1,112 @@
+# tellur-live
+
+`tellur-live` is a local preview host for editing tellur timelines. It loads a
+timeline plugin from a Rust `cdylib`, keeps the render process alive across
+frame requests, and reuses one `CachingRenderContext` for the session.
+
+The dynamic-library boundary is a Rust-internal ABI. Build the host and plugin
+from the same workspace/toolchain; this is not intended as a stable C ABI.
+
+## Build a Plugin
+
+```rust
+use tellur_core::timeline::{timeline, Timeline};
+
+fn build_timeline() -> impl Timeline {
+    timeline(5.0, move |t, target, ctx| {
+        // build and render a RasterComponent here
+        todo!()
+    })
+}
+
+tellur_live::export_timeline!("main", "Main", build_timeline);
+```
+
+The bundled demo plugin can be built with:
+
+```sh
+cargo build --release -p tellur-live --example demo_timeline_plugin
+```
+
+Cargo writes it to:
+
+```text
+target/release/examples/libdemo_timeline_plugin.so
+```
+
+## Run the Preview Host
+
+```sh
+cargo run -p tellur-live -- serve \
+  -p tellur-live \
+  --example demo_timeline_plugin \
+  --host 127.0.0.1 \
+  --port 4317 \
+  --fps 30
+```
+
+Open `http://127.0.0.1:4317/` for the minimal browser client.
+Use `--host 0.0.0.0` when the preview server should be reachable from other
+devices on the network.
+Pass `--verbose` to print per-frame timing and cache statistics to stdout.
+
+Passing `-p <package> --example <example>` makes `tellur-live` infer the release
+cdylib path (`target/release/examples/lib<example>.so`) and run
+`cargo build --release -p <package> --example <example>` when watched source
+files change. `--examples` is accepted as an alias for `--example`.
+
+```sh
+cargo run -p tellur-live -- serve \
+  -p tellur-live \
+  --examples demo_timeline_plugin
+```
+
+By default, watch paths are inferred from the package: its `Cargo.toml`, `src`,
+the selected example file, the workspace lockfile/manifest, and local `path`
+dependencies. Use `--plugin <path>` or repeated `--watch-path <path>` arguments
+to override those inferred values.
+
+When a release build succeeds and the cdylib contents change, `tellur-live`
+reloads the plugin, clears the server render cache, and publishes a new
+`cacheKey` to the browser. The browser uses that key in image/video URLs,
+stores media responses as blobs in IndexedDB, and records the green cache
+ranges separately. Old IndexedDB media entries and green ranges are revoked
+only after a successful cdylib update. Failed builds leave the previous plugin
+and cache key in place. Video cache entries are variable-length ranges. Starting
+playback inside a cached range seeks within that blob instead of creating a
+duplicate cache entry. Missing video ranges fall back to direct streaming
+immediately; playback does not wait for IndexedDB cache fill. During playback
+the client scans the continuous cached range from the current position and
+starts one background stream from the next cache gap. When that stream finishes,
+its full range is saved to IndexedDB. When stopped, it fills only the next
+three seconds from the current position.
+
+The browser UI is intentionally a thin validation client. It requests
+coalesced PNG frames for still previews and seeking, and fragmented MP4/H.264
+for playback. The Size and FPS controls lower the request resolution and frame
+rate when full-resolution playback is too expensive. The Size control sends an
+explicit `width` and `height` selected from browser presets, including low,
+HD, 4K, and vertical variants. While idle, the client
+preloads the beginning of the MP4 stream for the current position so the play
+button can reuse already-buffered video data.
+
+## HTTP Endpoints
+
+- `GET /api/info` returns resolution, fps, the current media `cacheKey`,
+  compile status (`compiled`, `compiling`, or `failed`), hot-reload errors, and
+  timeline metadata.
+- `GET /api/events` streams the same info payload as Server-Sent Events. The
+  browser client uses this instead of polling `/api/info`.
+- `GET /api/frame?time=1.25&timeline=main` returns one PNG frame.
+- `GET /api/frame?frame=42&timeline=main` returns one PNG frame by frame index.
+- `GET /api/frame?time=1.25&timeline=main&format=rgba` returns raw RGBA8 bytes
+  with `X-Tellur-Width` / `X-Tellur-Height` headers.
+- `GET /api/video.mp4?time=1.25&timeline=main&fps=60&gop=12&crf=23`
+  streams fragmented MP4/H.264 through `ffmpeg`. The browser client uses this
+  path for playback so `<video>` handles decode and presentation timing.
+  `duration=<seconds>` limits the generated stream length and is used for
+  IndexedDB video cache segments.
+  Frame and stream endpoints also accept `width=<pixels>&height=<pixels>` or
+  `scale=<ratio>` to override the default preview resolution.
+- `GET /api/stream?time=0&timeline=main&fps=30` returns a simple multipart PNG
+  stream. This endpoint is useful for experiments.
diff --git a/tellur-live/build.rs b/tellur-live/build.rs
new file mode 100644
index 0000000..8753ee8
--- /dev/null
+++ b/tellur-live/build.rs
@@ -0,0 +1,110 @@
+// Ensure the Vite-built web bundle exists before compiling the Rust
+// server, which embeds index.html / assets/index.js / assets/index.css
+// via include_bytes!. When the bundle is missing we run `npm install`
+// (if needed) and `npm run build` in tellur-live/web. The opt-out
+// variable TELLUR_SKIP_WEB_BUILD=1 skips the npm step entirely; in that
+// case we synthesise placeholder files so include_bytes! still compiles.
+use std::path::{Path, PathBuf};
+use std::process::Command;
+
+fn main() {
+    let manifest_dir = PathBuf::from(env_var("CARGO_MANIFEST_DIR"));
+    let web_dir = manifest_dir.join("web");
+    let dist_dir = web_dir.join("dist");
+
+    println!("cargo:rerun-if-changed=build.rs");
+    println!("cargo:rerun-if-env-changed=TELLUR_SKIP_WEB_BUILD");
+    println!("cargo:rerun-if-changed={}", web_dir.join("package.json").display());
+    println!("cargo:rerun-if-changed={}", web_dir.join("vite.config.ts").display());
+    println!("cargo:rerun-if-changed={}", web_dir.join("index.html").display());
+    track_dir(&web_dir.join("src"));
+
+    if has_required_assets(&dist_dir) {
+        return;
+    }
+
+    if std::env::var_os("TELLUR_SKIP_WEB_BUILD").is_some() {
+        ensure_placeholder_bundle(&dist_dir);
+        return;
+    }
+
+    build_web(&web_dir);
+
+    if !has_required_assets(&dist_dir) {
+        panic!(
+            "web build did not produce expected files under {}. \
+             Set TELLUR_SKIP_WEB_BUILD=1 to bypass and embed placeholders.",
+            dist_dir.display()
+        );
+    }
+}
+
+fn env_var(name: &str) -> String {
+    std::env::var(name)
+        .unwrap_or_else(|e| panic!("missing required env var {name}: {e}"))
+}
+
+fn has_required_assets(dist: &Path) -> bool {
+    dist.join("index.html").is_file()
+        && dist.join("assets/index.js").is_file()
+        && dist.join("assets/index.css").is_file()
+}
+
+fn ensure_placeholder_bundle(dist: &Path) {
+    let assets = dist.join("assets");
+    std::fs::create_dir_all(&assets).expect("create dist/assets");
+    write_if_missing(
+        &dist.join("index.html"),
+        "<!doctype html><meta charset=utf-8><title>tellur-live</title>\
+         <body><p>web bundle missing; rebuild without TELLUR_SKIP_WEB_BUILD.</p></body>",
+    );
+    write_if_missing(&assets.join("index.js"), "");
+    write_if_missing(&assets.join("index.css"), "");
+}
+
+fn write_if_missing(path: &Path, contents: &str) {
+    if path.exists() {
+        return;
+    }
+    std::fs::write(path, contents).unwrap_or_else(|e| {
+        panic!("failed to write placeholder {}: {e}", path.display())
+    });
+}
+
+fn build_web(web_dir: &Path) {
+    if !web_dir.join("node_modules").exists() {
+        run("npm", &["install", "--no-audit", "--no-fund"], web_dir);
+    }
+    run("npm", &["run", "build"], web_dir);
+}
+
+fn run(program: &str, args: &[&str], cwd: &Path) {
+    let status = Command::new(program)
+        .args(args)
+        .current_dir(cwd)
+        .status()
+        .unwrap_or_else(|e| {
+            panic!(
+                "failed to spawn {program} {}: {e}. \
+                 Install node/npm or set TELLUR_SKIP_WEB_BUILD=1 to skip.",
+                args.join(" ")
+            )
+        });
+    if !status.success() {
+        panic!("{program} {} failed with status {status}", args.join(" "));
+    }
+}
+
+fn track_dir(dir: &Path) {
+    let Ok(entries) = std::fs::read_dir(dir) else {
+        return;
+    };
+    for entry in entries.flatten() {
+        let path = entry.path();
+        if path.is_dir() {
+            track_dir(&path);
+        } else {
+            println!("cargo:rerun-if-changed={}", path.display());
+        }
+    }
+}
diff --git a/tellur-live/examples/demo_scene/mod.rs b/tellur-live/examples/demo_scene/mod.rs
new file mode 100644
index 0000000..096f895
--- /dev/null
+++ b/tellur-live/examples/demo_scene/mod.rs
@@ -0,0 +1,1880 @@
+use std::f32::consts::{PI, TAU};
+use std::hash::{Hash, Hasher};
+
+use tellur_core::color::Color;
+use tellur_core::dyn_compare::hash_f32;
+use tellur_core::geometry::{Anchor, Constraints, Rect, Transform, Vec2};
+use tellur_core::layer::{Layer, VectorLayer};
+use tellur_core::layout::raster::RasterLayoutExt;
+use tellur_core::phase::Phase;
+use tellur_core::placement::{RasterPlacement, VectorPlacement};
+use tellur_core::raster::{RasterComponent, Resolution};
+use tellur_core::shapes::{Circle, Rectangle};
+use tellur_core::text::{Text, TextSpan, Weight, MONOSPACE};
+use tellur_core::time::Time;
+use tellur_core::timeline::{timeline, Timeline};
+use tellur_core::vector::{Group, Node, Paint, Stroke, VectorComponent, VectorGraphic};
+use tellur_renderer::{DropShadow, Rasterizable};
+
+const DURATION: f32 = 7.6;
+const SCENE_SIZE: Vec2 = Vec2(1920.0, 1080.0);
+const CX: f32 = 960.0;
+const CY: f32 = 540.0;
+
+// Restrained palette: a deep ink bg, a warm paper for the scaffolding /
+// typography, and two saturated accents (a hot pink and an electric cyan).
+// Holding to three foreground tones gives the piece a deliberate,
+// design-system feel instead of a confetti palette.
+//
+// `PartialEq + Hash` so structs holding a `Palette` (like `Hud`) compose
+// into a `CachingRenderContext`-friendly key without manual plumbing.
+#[derive(Clone, Copy, PartialEq, Hash)]
+struct Palette {
+    bg: Color,
+    paper: Color,
+    pink: Color,
+    cyan: Color,
+}
+
+// Composable rotation + non-uniform scale + opacity wrapper.
+struct Fx {
+    angle: f32,
+    sx: f32,
+    sy: f32,
+    opacity: f32,
+    child: Box<dyn VectorComponent>,
+}
+
+impl PartialEq for Fx {
+    fn eq(&self, other: &Self) -> bool {
+        self.angle.to_bits() == other.angle.to_bits()
+            && self.sx.to_bits() == other.sx.to_bits()
+            && self.sy.to_bits() == other.sy.to_bits()
+            && self.opacity.to_bits() == other.opacity.to_bits()
+            && *self.child == *other.child
+    }
+}
+
+impl Hash for Fx {
+    fn hash<H: Hasher>(&self, state: &mut H) {
+        hash_f32(self.angle, state);
+        hash_f32(self.sx, state);
+        hash_f32(self.sy, state);
+        hash_f32(self.opacity, state);
+        self.child.hash(state);
+    }
+}
+
+impl VectorComponent for Fx {
+    fn layout(&self, constraints: Constraints) -> Vec2 {
+        self.child.layout(constraints)
+    }
+
+    fn paint_bounds(&self, size: Vec2) -> Rect {
+        Rect {
+            origin: Vec2(-size.0 * 2.0, -size.1 * 2.0),
+            size: Vec2(size.0 * 5.0, size.1 * 5.0),
+        }
+    }
+
+    fn render(&self, size: Vec2) -> VectorGraphic {
+        let inner = self.child.render(size);
+        let sx = self.sx.max(0.0001);
+        let sy = self.sy.max(0.0001);
+        let cos = self.angle.cos();
+        let sin = self.angle.sin();
+        let a = cos * sx;
+        let b = sin * sx;
+        let c = -sin * sy;
+        let d = cos * sy;
+        let center = Vec2(size.0 * 0.5, size.1 * 0.5);
+        let tx = center.0 - (a * center.0 + c * center.1);
+        let ty = center.1 - (b * center.0 + d * center.1);
+
+        VectorGraphic {
+            view_box: Rect {
+                origin: Vec2(-size.0 * 2.0, -size.1 * 2.0),
+                size: Vec2(size.0 * 5.0, size.1 * 5.0),
+            },
+            root: Node::Group(Group {
+                transform: Transform { a, b, c, d, tx, ty },
+                opacity: self.opacity.clamp(0.0, 1.0),
+                children: vec![inner.root],
+            }),
+        }
+    }
+}
+
+fn solid(color: Color) -> Paint {
+    Paint::Solid(color)
+}
+
+fn alpha(color: Color, value: f32) -> Color {
+    Color {
+        a: value.clamp(0.0, 1.0),
+        ..color
+    }
+}
+
+fn lerp(from: f32, to: f32, p: f32) -> f32 {
+    from + (to - from) * p
+}
+
+// --- easing functions ---
+
+fn ease_out_cubic(p: Phase) -> f32 {
+    1.0 - (1.0 - p.get()).powi(3)
+}
+
+fn ease_out_quint(p: Phase) -> f32 {
+    1.0 - (1.0 - p.get()).powi(5)
+}
+
+fn ease_in_out_quint(p: Phase) -> f32 {
+    let x = p.get();
+    if x < 0.5 {
+        16.0 * x.powi(5)
+    } else {
+        1.0 - (-2.0 * x + 2.0).powi(5) * 0.5
+    }
+}
+
+fn ease_in_out_expo(p: Phase) -> f32 {
+    let x = p.get();
+    if x <= 0.0 {
+        0.0
+    } else if x >= 1.0 {
+        1.0
+    } else if x < 0.5 {
+        2.0_f32.powf(20.0 * x - 10.0) * 0.5
+    } else {
+        (2.0 - 2.0_f32.powf(-20.0 * x + 10.0)) * 0.5
+    }
+}
+
+fn ease_in_back(p: Phase) -> f32 {
+    let x = p.get();
+    let c1 = 1.70158;
+    let c3 = c1 + 1.0;
+    c3 * x.powi(3) - c1 * x.powi(2)
+}
+
+fn ease_out_elastic(p: Phase) -> f32 {
+    let x = p.get();
+    if x <= 0.0 {
+        0.0
+    } else if x >= 1.0 {
+        1.0
+    } else {
+        let c4 = (2.0 * PI) / 3.0;
+        2.0_f32.powf(-10.0 * x) * ((x * 10.0 - 0.75) * c4).sin() + 1.0
+    }
+}
+
+fn wave<T: Time>(time: T, period: f32, offset: f32) -> f32 {
+    ((time.seconds() / period + offset) * TAU).sin()
+}
+
+// Time-bracketed envelope: rises with `rise`, holds, falls with `fall`.
+fn envelope<T: Time, R, F>(
+    time: T,
+    rise_span: (f32, f32),
+    fall_span: (f32, f32),
+    rise: R,
+    fall: F,
+) -> f32
+where
+    R: Fn(Phase) -> f32,
+    F: Fn(Phase) -> f32,
+{
+    let r = rise(time.phase(rise_span.0, rise_span.1));
+    let f = fall(time.phase(fall_span.0, fall_span.1));
+    (r * (1.0 - f)).clamp(0.0, 1.0)
+}
+
+// --- drawing primitives ---
+
+fn add_rect(scene: &mut VectorLayer, position: Vec2, size: Vec2, color: Color) {
+    if size.0 <= 0.0 || size.1 <= 0.0 || color.a <= 0.0 {
+        return;
+    }
+    scene.add(
+        Rectangle {
+            size,
+            fill: solid(color).into(),
+            stroke: None,
+        }
+        .at(position),
+    );
+}
+
+// `Circle::layout` clamps its bounding box to the parent's `Constraints`, so
+// any circle whose diameter exceeds the scene's shorter side (1080) gets
+// axis-squashed into an ellipse. `TrueCircle` overrides `layout` to always
+// return the intrinsic `2 * radius` size — the scene's clip handles overflow,
+// not the layout. Used by `add_circle` so every circle stays a real circle
+// regardless of how big it grows (e.g. the outward pulse in RESOLVE).
+struct TrueCircle {
+    radius: f32,
+    fill: Option<Color>,
+    stroke_color: Option<Color>,
+    stroke_width: f32,
+}
+
+impl PartialEq for TrueCircle {
+    fn eq(&self, other: &Self) -> bool {
+        self.radius.to_bits() == other.radius.to_bits()
+            && self.fill == other.fill
+            && self.stroke_color == other.stroke_color
+            && self.stroke_width.to_bits() == other.stroke_width.to_bits()
+    }
+}
+
+impl Hash for TrueCircle {
+    fn hash<H: Hasher>(&self, state: &mut H) {
+        hash_f32(self.radius, state);
+        self.fill.hash(state);
+        self.stroke_color.hash(state);
+        hash_f32(self.stroke_width, state);
+    }
+}
+
+impl VectorComponent for TrueCircle {
+    fn layout(&self, _constraints: Constraints) -> Vec2 {
+        // Intentionally ignore the parent's constraints.
+        let d = self.radius * 2.0;
+        Vec2(d, d)
+    }
+
+    fn paint_bounds(&self, size: Vec2) -> Rect {
+        Rect {
+            origin: Vec2::ZERO,
+            size,
+        }
+    }
+
+    fn render(&self, _size: Vec2) -> VectorGraphic {
+        let d = self.radius * 2.0;
+        let inner = Circle {
+            radius: self.radius,
+            fill: self.fill.map(solid).map(Into::into),
+            stroke: self.stroke_color.map(|c| Stroke {
+                paint: solid(c),
+                width: self.stroke_width,
+            }),
+        };
+        inner.render(Vec2(d, d))
+    }
+}
+
+fn add_circle(
+    scene: &mut VectorLayer,
+    center: Vec2,
+    radius: f32,
+    fill: Option<Color>,
+    stroke: Option<(Color, f32)>,
+) {
+    if radius <= 0.0 {
+        return;
+    }
+    let fill = fill.filter(|c| c.a > 0.0);
+    let stroke = stroke.filter(|(c, w)| c.a > 0.0 && *w > 0.0);
+    if fill.is_none() && stroke.is_none() {
+        return;
+    }
+    let (stroke_color, stroke_width) = stroke.map_or((None, 0.0), |(c, w)| (Some(c), w));
+    scene.add(
+        TrueCircle {
+            radius,
+            fill,
+            stroke_color,
+            stroke_width,
+        }
+        .anchored(Anchor::CENTER)
+        .snap_to(center),
+    );
+}
+
+// Anchor-and-position text helper. Uses the system monospace face for that
+// "instrument readout" feel. Skips zero-alpha calls so an animated label can
+// be added inside a tight loop without branching at every call site.
+fn add_label(
+    scene: &mut VectorLayer,
+    position: Vec2,
+    anchor: Anchor,
+    text: &str,
+    size: f32,
+    color: Color,
+    weight: Weight,
+) {
+    if color.a <= 0.0 || text.is_empty() {
+        return;
+    }
+    scene.add(
+        Text {
+            font: MONOSPACE.clone(),
+            size,
+            weight,
+            fill: solid(color),
+            spans: vec![TextSpan::plain(text)],
+        }
+        .anchored(anchor)
+        .snap_to(position),
+    );
+}
+
+fn add_fx_rect(
+    scene: &mut VectorLayer,
+    center: Vec2,
+    size: Vec2,
+    angle: f32,
+    color: Color,
+    opacity: f32,
+    scale: Vec2,
+) {
+    if size.0 <= 0.0 || size.1 <= 0.0 || opacity <= 0.0 || color.a <= 0.0 {
+        return;
+    }
+    if scale.0 <= 0.0 || scale.1 <= 0.0 {
+        return;
+    }
+    scene.add(
+        Fx {
+            angle,
+            sx: scale.0,
+            sy: scale.1,
+            opacity,
+            child: Box::new(Rectangle {
+                size,
+                fill: solid(color).into(),
+                stroke: None,
+            }),
+        }
+        .anchored(Anchor::CENTER)
+        .snap_to(center),
+    );
+}
+
+fn add_fx_outline_rect(
+    scene: &mut VectorLayer,
+    center: Vec2,
+    size: Vec2,
+    angle: f32,
+    color: Color,
+    opacity: f32,
+    scale: Vec2,
+    width: f32,
+) {
+    if size.0 <= 0.0 || size.1 <= 0.0 || opacity <= 0.0 || color.a <= 0.0 || width <= 0.0 {
+        return;
+    }
+    if scale.0 <= 0.0 || scale.1 <= 0.0 {
+        return;
+    }
+    scene.add(
+        Fx {
+            angle,
+            sx: scale.0,
+            sy: scale.1,
+            opacity,
+            child: Box::new(Rectangle {
+                size,
+                fill: None,
+                stroke: Some(Stroke {
+                    paint: solid(color),
+                    width,
+                }),
+            }),
+        }
+        .anchored(Anchor::CENTER)
+        .snap_to(center),
+    );
+}
+
+// --- scenes ---
+
+fn draw_backdrop<T: Time>(scene: &mut VectorLayer, time: T, p: Palette) {
+    // bg color is painted by the outer `.background(...)`. This layer carries
+    // only the faintest ambient texture so the foreground reads as the
+    // intended subject.
+    //
+    // All animation here is time-windowed `reveal` only — no continuous wave
+    // — so once the reveals saturate (~0.6s) the layer becomes byte-for-byte
+    // identical every frame and `CachingRenderContext` returns the cached
+    // raster instead of re-rendering it.
+    for i in 0..18 {
+        let y = 64.0 + i as f32 * 56.0;
+        let reveal =
+            ease_in_out_expo(time.phase(0.05 + i as f32 * 0.008, 0.45 + i as f32 * 0.008));
+        add_rect(
+            scene,
+            Vec2(lerp(-1920.0, 0.0, reveal), y),
+            Vec2(1920.0, 1.0),
+            alpha(p.paper, 0.022 * reveal),
+        );
+    }
+
+    // Two extremely dim "field boundary" rings — just inside the HUD frame
+    // and just outside it. They suggest "this scene happens inside a
+    // measured field" and pull the eye toward center without actually
+    // darkening the corners.
+    let ring_reveal = ease_in_out_expo(time.phase(0.6, 1.1));
+    if ring_reveal > 0.0 {
+        for (r, a_mult) in [(720.0_f32, 1.0_f32), (860.0_f32, 0.55_f32)] {
+            add_circle(
+                scene,
+                Vec2(CX, CY),
+                r * ring_reveal,
+                None,
+                Some((alpha(p.paper, 0.05 * a_mult), 1.0)),
+            );
+        }
+    }
+
+    // 12 micro tick marks along the outer "field boundary" at 30° spacing —
+    // subliminal "graduated horizon" detail.
+    for i in 0..12 {
+        let a = i as f32 / 12.0 * TAU - PI * 0.5;
+        let reveal = ease_in_out_expo(time.phase(0.75 + i as f32 * 0.012, 1.2 + i as f32 * 0.012));
+        if reveal <= 0.0 {
+            continue;
+        }
+        let major = i % 3 == 0;
+        let r_base = 720.0;
+        let length = if major { 16.0 } else { 8.0 };
+        let mid_r = r_base + length * 0.5;
+        let mid = Vec2(CX + a.cos() * mid_r, CY + a.sin() * mid_r);
+        add_fx_rect(
+            scene,
+            mid,
+            Vec2(if major { 2.0 } else { 1.4 }, length * reveal),
+            a + PI * 0.5,
+            alpha(p.paper, if major { 0.16 } else { 0.1 }),
+            1.0,
+            Vec2(1.0, 1.0),
+        );
+    }
+}
+
+// HUD intro/outro time windows. All bracket/tick/label staggers fit inside
+// `INTRO`; everything saturates by `INTRO_END` and the component becomes
+// byte-identical between frames.
+const HUD_INTRO_START: f32 = 0.15;
+const HUD_INTRO_END: f32 = 1.24;
+const HUD_OUTRO_START: f32 = 7.1;
+const HUD_OUTRO_END: f32 = 7.55;
+const HUD_INTRO_WIDTH: f32 = HUD_INTRO_END - HUD_INTRO_START;
+const HUD_OUTRO_WIDTH: f32 = HUD_OUTRO_END - HUD_OUTRO_START;
+
+fn section_marker(section: u8, p: Palette) -> (&'static str, Color) {
+    match section {
+        0 => ("01 / OVERTURE", p.pink),
+        1 => ("02 / FIELD", p.cyan),
+        2 => ("03 / SCAN", p.pink),
+        _ => ("04 / RESOLVE", p.cyan),
+    }
+}
+
+fn section_index_at(t: f32) -> u8 {
+    if t < 1.85 {
+        0
+    } else if t < 3.4 {
+        1
+    } else if t < 5.0 {
+        2
+    } else {
+        3
+    }
+}
+
+// Phase-local helper: returns the sub-phase reached at virtual time
+// `virtual_t` (measured from the intro/outro start) for an event spanning
+// `[start, end]` in that same virtual frame.
+fn local_phase(virtual_t: f32, start: f32, end: f32) -> Phase {
+    Phase::saturating((virtual_t - start) / (end - start))
+}
+
+// Persistent UI scaffolding — the "instrument panel" framing that keeps the
+// piece reading as a deliberate system rather than free-floating shapes.
+//
+// Implemented as a `VectorComponent` whose state is reduced to three small,
+// stable values: a `Palette` and two `Phase`s plus a `section` discriminator.
+// Once the intro phase saturates to 1.0 (after ~1.24s), and as long as
+// `section` hasn't ticked over, the struct hashes and compares equal across
+// frames — so wrapping `Hud` in `.rasterize()` lets `CachingRenderContext`
+// reuse the rasterized image for the full steady-state span instead of
+// re-rendering every frame.
+#[derive(Clone, Copy)]
+struct Hud {
+    palette: Palette,
+    intro: Phase,
+    outro: Phase,
+    section: u8,
+}
+
+impl PartialEq for Hud {
+    fn eq(&self, other: &Self) -> bool {
+        self.section == other.section
+            && self.intro == other.intro
+            && self.outro == other.outro
+            && self.palette == other.palette
+    }
+}
+
+impl Hash for Hud {
+    fn hash<H: Hasher>(&self, state: &mut H) {
+        self.section.hash(state);
+        hash_f32(self.intro.get(), state);
+        hash_f32(self.outro.get(), state);
+        self.palette.hash(state);
+    }
+}
+
+impl VectorComponent for Hud {
+    fn layout(&self, constraints: Constraints) -> Vec2 {
+        constraints.constrain(SCENE_SIZE)
+    }
+
+    // paint_bounds defaults to (0, 0)..size — the HUD doesn't paint outside
+    // its own scene rect, so the default is exactly right.
+
+    fn render(&self, size: Vec2) -> VectorGraphic {
+        let mut layer = VectorLayer::new(size);
+        self.draw_into(&mut layer);
+        layer.render(size)
+    }
+}
+
+impl Hud {
+    fn draw_into(&self, scene: &mut VectorLayer) {
+        // `intro_t` / `outro_t` are virtual elapsed seconds inside the intro
+        // / outro window. Each sub-event below is expressed relative to that
+        // virtual frame — so when `intro = 1.0` (saturated), every
+        // sub-phase is also fully saturated, and the resulting `VectorLayer`
+        // is structurally identical to last frame's.
+        let intro_t = self.intro.get() * HUD_INTRO_WIDTH;
+        let outro_t = self.outro.get() * HUD_OUTRO_WIDTH;
+
+        let alpha_in = ease_in_out_expo(local_phase(intro_t, 0.0, 0.4));
+        let alpha_out = ease_in_out_expo(local_phase(outro_t, 0.0, HUD_OUTRO_WIDTH));
+        let life = (alpha_in * (1.0 - alpha_out)).clamp(0.0, 1.0);
+        if life <= 0.0 {
+            return;
+        }
+
+        let p = self.palette;
+        let stroke_w = 3.0_f32;
+        let inset = 96.0_f32;
+        let bracket_len = 92.0_f32;
+
+        let corners = [
+            (inset, inset, 1.0_f32, 1.0_f32),
+            (SCENE_SIZE.0 - inset, inset, -1.0, 1.0),
+            (inset, SCENE_SIZE.1 - inset, 1.0, -1.0),
+            (SCENE_SIZE.0 - inset, SCENE_SIZE.1 - inset, -1.0, -1.0),
+        ];
+        for (i, &(ax, ay, dx, dy)) in corners.iter().enumerate() {
+            let stagger = i as f32 * 0.05;
+            let pop = ease_out_cubic(local_phase(intro_t, 0.1 + stagger, 0.6 + stagger));
+            let len = bracket_len * pop;
+            let color = alpha(p.paper, 0.55 * life);
+            let hx = if dx > 0.0 { ax } else { ax - len };
+            let vy = if dy > 0.0 { ay } else { ay - len };
+            add_rect(scene, Vec2(hx, ay - stroke_w * 0.5), Vec2(len, stroke_w), color);
+            add_rect(scene, Vec2(ax - stroke_w * 0.5, vy), Vec2(stroke_w, len), color);
+        }
+
+        let label_in = ease_in_out_expo(local_phase(intro_t, 0.4, 0.8));
+        let label_alpha = 0.95 * life * label_in;
+
+        add_label(
+            scene,
+            Vec2(inset, inset - 22.0),
+            Anchor::BOTTOM_LEFT,
+            "TELLUR",
+            20.0,
+            alpha(p.paper, label_alpha),
+            Weight::BOLD,
+        );
+        add_label(
+            scene,
+            Vec2(inset + 96.0, inset - 22.0),
+            Anchor::BOTTOM_LEFT,
+            "kinetic-motion · 7.6s",
+            13.0,
+            alpha(p.paper, 0.5 * life * label_in),
+            Weight::NORMAL,
+        );
+
+        let (idx_text, idx_color) = section_marker(self.section, p);
+        let marker_x = SCENE_SIZE.0 - inset;
+        add_label(
+            scene,
+            Vec2(marker_x, inset - 22.0),
+            Anchor::BOTTOM_RIGHT,
+            idx_text,
+            14.0,
+            alpha(p.paper, 0.75 * life * label_in),
+            Weight::NORMAL,
+        );
+        add_circle(
+            scene,
+            Vec2(marker_x - 128.0, inset - 28.0),
+            4.5 * label_in,
+            Some(alpha(idx_color, life * label_in)),
+            None,
+        );
+
+        // Static "OBS" badge sits below the section marker — reads as a
+        // "live observation" tag without animating per frame (so it stays
+        // inside the cached HUD raster).
+        add_label(
+            scene,
+            Vec2(marker_x, inset + 4.0),
+            Anchor::TOP_RIGHT,
+            "OBS · TELLUR-04",
+            11.0,
+            alpha(p.paper, 0.4 * life * label_in),
+            Weight::NORMAL,
+        );
+
+        // Bottom edge tick ruler — every 4th tick is taller.
+        let tick_count = 17;
+        let tick_y_top = SCENE_SIZE.1 - inset + 28.0;
+        let bar_left = inset + 24.0;
+        let bar_right = SCENE_SIZE.0 - inset - 24.0;
+        for i in 0..tick_count {
+            let stagger = i as f32 * 0.018;
+            let pop = ease_out_cubic(local_phase(intro_t, 0.3 + stagger, 0.8 + stagger));
+            if pop <= 0.0 {
+                continue;
+            }
+            let frac = i as f32 / (tick_count - 1) as f32;
+            let x = lerp(bar_left, bar_right, frac);
+            let major = i % 4 == 0;
+            let height = if major { 18.0 } else { 8.0 };
+            let color = alpha(p.paper, if major { 0.55 } else { 0.35 } * life);
+            add_rect(scene, Vec2(x - 1.0, tick_y_top), Vec2(2.0, height * pop), color);
+        }
+
+        // Left + right edge tick rulers — completes the four-sided instrument
+        // frame so the scaffold reads as a full HUD rather than a desk lamp.
+        let v_tick_count = 11;
+        let v_bar_top = inset + 60.0;
+        let v_bar_bottom = SCENE_SIZE.1 - inset - 60.0;
+        for i in 0..v_tick_count {
+            let stagger = i as f32 * 0.02;
+            let pop = ease_out_cubic(local_phase(intro_t, 0.55 + stagger, 1.0 + stagger));
+            if pop <= 0.0 {
+                continue;
+            }
+            let frac = i as f32 / (v_tick_count - 1) as f32;
+            let y = lerp(v_bar_top, v_bar_bottom, frac);
+            let major = i % 5 == 0;
+            let width = if major { 16.0 } else { 7.0 };
+            let color = alpha(p.paper, if major { 0.5 } else { 0.3 } * life);
+            // Left side ticks point inward.
+            add_rect(scene, Vec2(inset - 28.0, y - 1.0), Vec2(width * pop, 2.0), color);
+            // Right side ticks point inward.
+            add_rect(
+                scene,
+                Vec2(SCENE_SIZE.0 - inset + 28.0 - width * pop, y - 1.0),
+                Vec2(width * pop, 2.0),
+                color,
+            );
+        }
+
+        add_label(
+            scene,
+            Vec2(inset, SCENE_SIZE.1 - inset + 20.0),
+            Anchor::TOP_LEFT,
+            "RUNTIME 7600MS · 60FPS",
+            12.0,
+            alpha(p.paper, 0.45 * life * label_in),
+            Weight::NORMAL,
+        );
+        add_label(
+            scene,
+            Vec2(SCENE_SIZE.0 - inset, SCENE_SIZE.1 - inset + 20.0),
+            Anchor::TOP_RIGHT,
+            "1920 × 1080 · RGBA",
+            12.0,
+            alpha(p.paper, 0.45 * life * label_in),
+            Weight::NORMAL,
+        );
+    }
+}
+
+fn draw_overture<T: Time>(scene: &mut VectorLayer, time: T, p: Palette) {
+    if time.during(0.0, 2.2).is_none() {
+        return;
+    }
+
+    // Two clamp bars — one cyan above, one pink below — that frame the
+    // central hero. Snappy ease_in_out_expo in, ease_in_back out (lifts off
+    // the center toward their respective edges). End-cap mini bracket ticks
+    // turn each bar into a "measurement span" instead of an anonymous slab.
+    let bars: [(f32, f32, Color); 2] = [(-200.0, -1.0, p.cyan), (200.0, 1.0, p.pink)];
+    let bar_w = 1200.0_f32;
+    let bar_h = 24.0_f32;
+    for (i, &(dy, side, color)) in bars.iter().enumerate() {
+        let stagger = i as f32 * 0.06;
+        let enter = ease_in_out_expo(time.phase(0.32 + stagger, 0.92 + stagger));
+        let leave = ease_in_back(time.phase(1.55 + stagger * 0.5, 2.05 + stagger * 0.5));
+        let bar_x = lerp(side * 2400.0 + CX, CX, enter);
+        let exit_dy = leave * if side > 0.0 { 320.0 } else { -320.0 };
+        let alpha_factor = (enter * (1.0 - leave)).clamp(0.0, 1.0) * 0.92;
+        let y_center = CY + dy + exit_dy;
+
+        add_fx_rect(
+            scene,
+            Vec2(bar_x, y_center),
+            Vec2(bar_w, bar_h),
+            0.0,
+            color,
+            alpha_factor,
+            Vec2(1.0, 1.0),
+        );
+
+        // End-cap mini brackets at each bar end — small perpendicular
+        // ticks that turn the bar into a clear measurement span. Same color
+        // as the bar; staggered tiny so they "arrive" with the bar.
+        let cap_pop = ease_out_cubic(time.phase(0.65 + stagger, 1.05 + stagger))
+            * (1.0 - ease_in_back(time.phase(1.55 + stagger * 0.5, 1.95 + stagger * 0.5)));
+        if cap_pop > 0.0 {
+            let cap_h = 28.0;
+            let cap_w = 3.0;
+            for &cap_side in &[-1.0_f32, 1.0] {
+                let cap_x = bar_x + cap_side * (bar_w * 0.5 + 1.0);
+                add_rect(
+                    scene,
+                    Vec2(cap_x - cap_w * 0.5, y_center - cap_h * 0.5),
+                    Vec2(cap_w, cap_h * cap_pop),
+                    alpha(color, alpha_factor),
+                );
+            }
+        }
+    }
+
+    // Hero square: controlled ease_out_cubic pop (no rubbery elastic),
+    // a slow drift-spin, and an ease_in_back dismissal.
+    let hero_in = ease_out_cubic(time.phase(0.55, 1.2));
+    let hero_out = ease_in_back(time.phase(1.7, 2.15));
+    let hero_life = (hero_in * (1.0 - hero_out)).clamp(0.0, 1.0);
+    let spin = time.seconds() * 0.35 + PI * 0.25;
+    let scale = (0.55 + hero_in * 0.45) * (1.0 - hero_out);
+
+    let s_clamped = scale.max(0.001);
+
+    add_fx_rect(
+        scene,
+        Vec2(CX, CY),
+        Vec2(280.0, 280.0),
+        spin,
+        p.paper,
+        hero_life,
+        Vec2(s_clamped, s_clamped),
+    );
+    add_fx_outline_rect(
+        scene,
+        Vec2(CX, CY),
+        Vec2(420.0, 420.0),
+        -spin * 0.4,
+        alpha(p.pink, hero_life * 0.82),
+        1.0,
+        Vec2(s_clamped, s_clamped),
+        3.0,
+    );
+
+    // Registration markings inside the hero square — a reticle (cross arms +
+    // a center ring + gap dashes) plus four small corner dots, all painted
+    // in the bg color so they read as "cut into the paper". They rotate
+    // with the square via the same `spin`.
+    let mark_color = alpha(p.bg, hero_life * 0.55);
+    let cross_arm = 38.0 * s_clamped;
+
+    // Crosshair arms — note the gap in the middle (drawn as 4 short
+    // segments) so the reticle reads as a scope mark, not a solid plus.
+    let arm_inner_gap = 8.0 * s_clamped;
+    let arm_outer = cross_arm;
+    let arm_segment = arm_outer - arm_inner_gap;
+    let arm_mid = (arm_inner_gap + arm_outer) * 0.5;
+    let cs2 = spin.cos();
+    let sn2 = spin.sin();
+    // Four offset directions: +x, -x, +y, -y in local space.
+    for &(dx, dy, vertical) in &[
+        (1.0_f32, 0.0_f32, false),
+        (-1.0, 0.0, false),
+        (0.0, 1.0, true),
+        (0.0, -1.0, true),
+    ] {
+        let lx = dx * arm_mid;
+        let ly = dy * arm_mid;
+        let pos = Vec2(CX + lx * cs2 - ly * sn2, CY + lx * sn2 + ly * cs2);
+        let (w, h) = if vertical { (2.0, arm_segment) } else { (arm_segment, 2.0) };
+        add_fx_rect(scene, pos, Vec2(w, h), spin, mark_color, 1.0, Vec2(1.0, 1.0));
+    }
+
+    // Small open ring at the center of the reticle.
+    add_circle(
+        scene,
+        Vec2(CX, CY),
+        6.0 * s_clamped,
+        None,
+        Some((mark_color, 1.5)),
+    );
+    // A tiny solid dot at the very center for the bullseye.
+    add_circle(
+        scene,
+        Vec2(CX, CY),
+        1.5 * s_clamped,
+        Some(mark_color),
+        None,
+    );
+    // Four corner dots inside the paper square, offset 110 from center then
+    // rotated by `spin` to follow the square's orientation.
+    let corner_off = 110.0 * s_clamped;
+    let cs = spin.cos();
+    let sn = spin.sin();
+    for &(dx, dy) in &[(-1.0_f32, -1.0_f32), (1.0, -1.0), (-1.0, 1.0), (1.0, 1.0)] {
+        let lx = dx * corner_off;
+        let ly = dy * corner_off;
+        let pos = Vec2(CX + lx * cs - ly * sn, CY + lx * sn + ly * cs);
+        add_circle(scene, pos, 3.5 * hero_life, Some(mark_color), None);
+    }
+
+    // Four registration dots locked onto the outline corners, alternating
+    // pink/cyan so the framing reads as intentional design pairs. Each is
+    // linked back to the center by a dim hairline ray, which turns the
+    // outside dots from "floating decorations" into "axis terminators" —
+    // a small move that pushes the composition toward "instrument layout".
+    let ray_in = ease_out_cubic(time.phase(0.85, 1.4)) * (1.0 - hero_out);
+    for s in 0..4 {
+        let a = s as f32 * PI * 0.5 + spin * 0.5 + PI * 0.25;
+        let r = 230.0;
+        let pos = Vec2(CX + a.cos() * r, CY + a.sin() * r);
+
+        if ray_in > 0.0 {
+            // Hairline from outside the paper-square corner (~200) to just
+            // inside the outside dot. The outline frame's diagonal corner
+            // sits at ~297, so the ray crosses through it visually.
+            let inner_r = 200.0;
+            let outer_r = r - 10.0;
+            let length = (outer_r - inner_r) * ray_in;
+            let mid_r = inner_r + length * 0.5;
+            let mid = Vec2(CX + a.cos() * mid_r, CY + a.sin() * mid_r);
+            add_fx_rect(
+                scene,
+                mid,
+                Vec2(1.5, length),
+                a + PI * 0.5,
+                alpha(p.paper, hero_life * 0.45),
+                1.0,
+                Vec2(1.0, 1.0),
+            );
+        }
+
+        add_circle(
+            scene,
+            pos,
+            6.0 * hero_life,
+            Some(alpha(if s % 2 == 0 { p.pink } else { p.cyan }, hero_life)),
+            None,
+        );
+
+        // Small index tag next to each outside dot. The tag follows the
+        // dot's rotated position so it always reads on the outside.
+        let label_in = ease_out_cubic(time.phase(1.0 + s as f32 * 0.04, 1.4 + s as f32 * 0.04));
+        let label_alpha = hero_life * label_in
+            * (1.0 - ease_in_back(time.phase(1.7, 2.05)))
+            * 0.6;
+        if label_alpha > 0.0 {
+            let label_r = r + 18.0;
+            let lpos = Vec2(CX + a.cos() * label_r, CY + a.sin() * label_r);
+            let tag_text = format!("0{}", s + 1);
+            // Anchor toward the outward direction.
+            let anchor = if a.cos().abs() > a.sin().abs() {
+                if a.cos() > 0.0 { Anchor::CENTER_LEFT } else { Anchor::CENTER_RIGHT }
+            } else if a.sin() > 0.0 {
+                Anchor::TOP_CENTER
+            } else {
+                Anchor::BOTTOM_CENTER
+            };
+            add_label(
+                scene,
+                lpos,
+                anchor,
+                &tag_text,
+                10.0,
+                alpha(p.paper, label_alpha.clamp(0.0, 1.0)),
+                Weight::NORMAL,
+            );
+        }
+    }
+
+    // Length tag beneath the central composition — small data-design touch
+    // that gives the OVERTURE a "measurement readout" character.
+    let tag_in = ease_in_out_expo(time.phase(0.95, 1.35)) * (1.0 - ease_in_out_expo(time.phase(1.55, 2.0)));
+    if tag_in > 0.0 {
+        let y = CY + 280.0;
+        // End ticks of the measurement line.
+        let tick_h = 8.0;
+        let half_span = 90.0;
+        add_rect(
+            scene,
+            Vec2(CX - half_span - 1.0, y - tick_h * 0.5),
+            Vec2(2.0, tick_h),
+            alpha(p.paper, hero_life * tag_in * 0.65),
+        );
+        add_rect(
+            scene,
+            Vec2(CX + half_span - 1.0, y - tick_h * 0.5),
+            Vec2(2.0, tick_h),
+            alpha(p.paper, hero_life * tag_in * 0.65),
+        );
+        // The measurement bar itself.
+        add_rect(
+            scene,
+            Vec2(CX - half_span * tag_in, y - 1.0),
+            Vec2(half_span * 2.0 * tag_in, 2.0),
+            alpha(p.paper, hero_life * tag_in * 0.55),
+        );
+        add_label(
+            scene,
+            Vec2(CX, y + 18.0),
+            Anchor::TOP_CENTER,
+            "L = 280 PX",
+            12.0,
+            alpha(p.paper, hero_life * tag_in * 0.75),
+            Weight::NORMAL,
+        );
+    }
+
+    // Pink horizontal scan stripe sweeping vertically as the scene exits —
+    // a transition wipe that hands the frame off to FIELD.
+    let sweep = ease_in_out_expo(time.phase(1.45, 2.0));
+    if sweep > 0.0 && sweep < 1.0 {
+        let y = lerp(-80.0, SCENE_SIZE.1 + 80.0, sweep);
+        let visibility = 4.0 * sweep * (1.0 - sweep);
+        add_rect(
+            scene,
+            Vec2(0.0, y - 3.0),
+            Vec2(SCENE_SIZE.0, 6.0),
+            alpha(p.pink, visibility * 0.88),
+        );
+    }
+}
+
+fn draw_field<T: Time>(scene: &mut VectorLayer, time: T, p: Palette) {
+    if time.during(1.7, 3.6).is_none() {
+        return;
+    }
+
+    let life = envelope(
+        time,
+        (1.9, 2.25),
+        (3.2, 3.55),
+        ease_in_out_expo,
+        ease_in_out_expo,
+    );
+
+    // A tight, deliberate 5×3 grid — fewer dots, more breathing room, more
+    // alignment. Columns alternate pink / cyan so the palette reads as
+    // intentional pairs rather than a confetti.
+    let rows = 3_i32;
+    let cols = 5_i32;
+    let spacing_x = 220.0;
+    let spacing_y = 200.0;
+
+    for r in 0..rows {
+        for c in 0..cols {
+            let dx = (c as f32 - (cols as f32 - 1.0) * 0.5) * spacing_x;
+            let dy = (r as f32 - (rows as f32 - 1.0) * 0.5) * spacing_y;
+            let stagger = c as f32 * 0.05 + r as f32 * 0.025;
+            let pop = ease_out_cubic(time.phase(1.95 + stagger, 2.45 + stagger));
+            let collapse = ease_in_back(time.phase(3.05 + stagger * 0.4, 3.5 + stagger * 0.4));
+            let s = (pop * (1.0 - collapse)).clamp(0.0, 1.0);
+
+            let breathe = 1.0 + wave(time, 1.6, stagger) * 0.15;
+            let cx = CX + dx;
+            let cy = CY + dy * (1.0 - collapse * 0.45);
+
+            let color = if c % 2 == 0 { p.pink } else { p.cyan };
+            add_circle(
+                scene,
+                Vec2(cx, cy),
+                14.0 * breathe * s,
+                Some(alpha(color, life * 0.92)),
+                None,
+            );
+
+            // The four corner dots get an accent outline ring — that small
+            // hierarchy cue costs nothing and pulls the eye to the frame.
+            if (r == 0 || r == rows - 1) && (c == 0 || c == cols - 1) {
+                let ring_in = ease_out_cubic(time.phase(2.4 + stagger, 2.9 + stagger));
+                add_circle(
+                    scene,
+                    Vec2(cx, cy),
+                    26.0 * ring_in * s,
+                    None,
+                    Some((alpha(color, life * 0.55), 2.0)),
+                );
+            }
+        }
+    }
+
+    // Row labels on the left side of the grid — tiny "R00/R01/R02" marks
+    // that make the grid feel like a numbered coordinate space rather than
+    // just dots. Fade in with the grid itself.
+    for r in 0..rows {
+        let dy = (r as f32 - (rows as f32 - 1.0) * 0.5) * spacing_y;
+        let label_in = ease_out_cubic(time.phase(2.1 + r as f32 * 0.04, 2.55 + r as f32 * 0.04));
+        let label_out = ease_in_back(time.phase(3.1, 3.5));
+        let row_alpha = (label_in * (1.0 - label_out)).clamp(0.0, 1.0) * life * 0.55;
+        if row_alpha > 0.0 {
+            add_label(
+                scene,
+                Vec2(CX - 720.0, CY + dy),
+                Anchor::CENTER_RIGHT,
+                &format!("R{:02}", r),
+                12.0,
+                alpha(p.paper, row_alpha),
+                Weight::NORMAL,
+            );
+        }
+    }
+
+    // Column labels along the top of the grid — symmetric with the rows so
+    // the grid reads as a proper coordinate field.
+    for c in 0..cols {
+        let dx = (c as f32 - (cols as f32 - 1.0) * 0.5) * spacing_x;
+        let label_in = ease_out_cubic(time.phase(2.05 + c as f32 * 0.04, 2.5 + c as f32 * 0.04));
+        let label_out = ease_in_back(time.phase(3.1, 3.5));
+        let col_alpha = (label_in * (1.0 - label_out)).clamp(0.0, 1.0) * life * 0.55;
+        if col_alpha > 0.0 {
+            add_label(
+                scene,
+                Vec2(CX + dx, CY - (rows as f32 - 1.0) * 0.5 * spacing_y - 38.0),
+                Anchor::BOTTOM_CENTER,
+                &format!("C{:02}", c),
+                12.0,
+                alpha(p.paper, col_alpha),
+                Weight::NORMAL,
+            );
+        }
+    }
+
+    // Vertical scan line sweeping left-to-right through the grid. Bright
+    // head + dimmer trailing wash, with a small "SCAN" data tag at the top
+    // and a running-position readout at the bottom.
+    let sweep = ease_in_out_expo(time.phase(2.35, 3.0));
+    if sweep > 0.0 && sweep < 1.0 {
+        let x = lerp(CX - 580.0, CX + 580.0, sweep);
+        let visibility = 4.0 * sweep * (1.0 - sweep);
+        let height = (rows as f32 + 0.3) * spacing_y * 0.5 * 2.0;
+        let top_y = CY - height * 0.5;
+        let bottom_y = top_y + height;
+
+        // Trailing wash — a soft pink band behind the leading line that
+        // gives the sweep a feeling of "leaving a trace".
+        let trail_w = 120.0;
+        add_rect(
+            scene,
+            Vec2(x - trail_w, top_y),
+            Vec2(trail_w, height),
+            alpha(p.pink, visibility * life * 0.14),
+        );
+        // Inner brighter trail.
+        let inner_trail_w = 32.0;
+        add_rect(
+            scene,
+            Vec2(x - inner_trail_w, top_y),
+            Vec2(inner_trail_w, height),
+            alpha(p.pink, visibility * life * 0.22),
+        );
+
+        // The crisp leading line.
+        add_rect(
+            scene,
+            Vec2(x - 2.0, top_y),
+            Vec2(4.0, height),
+            alpha(p.pink, visibility * life * 0.95),
+        );
+
+        // Bright head dot at the top of the sweep — like a phosphor pixel.
+        add_circle(
+            scene,
+            Vec2(x, top_y),
+            7.0,
+            Some(alpha(p.paper, visibility * life)),
+            Some((alpha(p.pink, visibility * life), 2.0)),
+        );
+
+        // Mirror head dot at the bottom for symmetry.
+        add_circle(
+            scene,
+            Vec2(x, bottom_y),
+            7.0,
+            Some(alpha(p.paper, visibility * life)),
+            Some((alpha(p.pink, visibility * life), 2.0)),
+        );
+
+        // Top tag.
+        add_label(
+            scene,
+            Vec2(x + 16.0, top_y - 8.0),
+            Anchor::BOTTOM_LEFT,
+            "SCAN →",
+            14.0,
+            alpha(p.pink, visibility * life),
+            Weight::BOLD,
+        );
+
+        // Bottom percentage readout — "treats this as data" cue.
+        let pct = (sweep * 100.0) as i32;
+        let pct_text = format!("{:03}%", pct);
+        add_label(
+            scene,
+            Vec2(x + 16.0, bottom_y + 8.0),
+            Anchor::TOP_LEFT,
+            &pct_text,
+            13.0,
+            alpha(p.paper, visibility * life * 0.95),
+            Weight::BOLD,
+        );
+    }
+}
+
+fn draw_scan<T: Time>(scene: &mut VectorLayer, time: T, p: Palette) {
+    if time.during(3.4, 5.5).is_none() {
+        return;
+    }
+
+    let life = envelope(
+        time,
+        (3.4, 3.8),
+        (5.05, 5.45),
+        ease_in_out_expo,
+        ease_in_out_expo,
+    );
+
+    // Cyan horizontal scan stripe sweeping vertically — the matching
+    // transition wipe between FIELD and SCAN. Echoes the pink stripe at
+    // the OVERTURE→FIELD handoff so the structure rhymes.
+    let intro_sweep = ease_in_out_expo(time.phase(3.35, 3.85));
+    if intro_sweep > 0.0 && intro_sweep < 1.0 {
+        let y = lerp(-80.0, SCENE_SIZE.1 + 80.0, intro_sweep);
+        let visibility = 4.0 * intro_sweep * (1.0 - intro_sweep);
+        add_rect(
+            scene,
+            Vec2(0.0, y - 3.0),
+            Vec2(SCENE_SIZE.0, 6.0),
+            alpha(p.cyan, visibility * 0.88),
+        );
+    }
+
+    // Center reticle: a small crosshair + cyan dot. Reads as "this is the
+    // origin", not "this is a hero blob".
+    let reticle = ease_out_cubic(time.phase(3.5, 3.95));
+    let cross_arm = 64.0 * reticle;
+    add_rect(
+        scene,
+        Vec2(CX - cross_arm, CY - 1.0),
+        Vec2(cross_arm * 2.0, 2.0),
+        alpha(p.paper, life * 0.7),
+    );
+    add_rect(
+        scene,
+        Vec2(CX - 1.0, CY - cross_arm),
+        Vec2(2.0, cross_arm * 2.0),
+        alpha(p.paper, life * 0.7),
+    );
+    add_circle(
+        scene,
+        Vec2(CX, CY),
+        9.0 * reticle,
+        Some(alpha(p.cyan, life)),
+        None,
+    );
+
+    // Single hero ring — this is the scene's one elastic moment.
+    let ring_pop = ease_out_elastic(time.phase(3.6, 4.4)).max(0.0);
+    let ring_r = lerp(80.0, 300.0, ring_pop);
+    add_circle(
+        scene,
+        Vec2(CX, CY),
+        ring_r,
+        None,
+        Some((alpha(p.cyan, life * 0.75), 3.5)),
+    );
+
+    // Inner secondary reticle — a thinner cyan ring at ~120 + 4 cardinal
+    // mini-ticks. Layers visual depth between the crosshair and the hero ring.
+    let inner_ring_in = ease_out_cubic(time.phase(3.7, 4.15));
+    if inner_ring_in > 0.0 {
+        let inner_r2 = 116.0;
+        add_circle(
+            scene,
+            Vec2(CX, CY),
+            inner_r2 * inner_ring_in,
+            None,
+            Some((alpha(p.cyan, life * 0.35), 1.5)),
+        );
+        for i in 0..4 {
+            let a = i as f32 * PI * 0.5 - PI * 0.5;
+            let mid_r = inner_r2 - 6.0;
+            let mid = Vec2(CX + a.cos() * mid_r, CY + a.sin() * mid_r);
+            add_fx_rect(
+                scene,
+                mid,
+                Vec2(2.0, 10.0 * inner_ring_in),
+                a + PI * 0.5,
+                alpha(p.paper, life * 0.45),
+                1.0,
+                Vec2(1.0, 1.0),
+            );
+        }
+    }
+
+    // 12 tick marks at the ring (every 30°). Every 3rd is taller (a
+    // graduated dial look). Quartz-watch fidelity.
+    const ANGLE_LABELS: [&str; 12] = [
+        "000", "030", "060", "090", "120", "150", "180", "210", "240", "270", "300", "330",
+    ];
+    for i in 0..12 {
+        let a = i as f32 / 12.0 * TAU - PI * 0.5;
+        let stagger = i as f32 * 0.025;
+        let tk = ease_out_cubic(time.phase(3.85 + stagger, 4.3 + stagger));
+        if tk <= 0.0 {
+            continue;
+        }
+        let major = i % 3 == 0;
+        let inner_off = if major { 22.0 } else { 12.0 };
+        let outer_off = if major { 22.0 } else { 12.0 };
+        let inner_r = ring_r - inner_off;
+        let outer_r = ring_r + outer_off;
+        let mid_r = (inner_r + outer_r) * 0.5;
+        let length = outer_r - inner_r;
+        let mid = Vec2(CX + a.cos() * mid_r, CY + a.sin() * mid_r);
+        add_fx_rect(
+            scene,
+            mid,
+            Vec2(if major { 3.0 } else { 2.0 }, length * tk),
+            a + PI * 0.5,
+            alpha(p.paper, life * if major { 0.85 } else { 0.55 }),
+            1.0,
+            Vec2(1.0, 1.0),
+        );
+
+        // Angle label outside major ticks — that gradicule-numeral detail
+        // pushes the SCAN scene from "geometric" to "instrument readout".
+        // We skip i=3 (090°) — dedicated `R = 300 PX` readout — and
+        // i=9 (270°) — dedicated `θ = NNN°` readout sits there.
+        if major && i != 3 && i != 9 {
+            let label_in = ease_out_cubic(time.phase(4.1 + i as f32 * 0.012, 4.5 + i as f32 * 0.012));
+            let label_alpha =
+                life * label_in * (1.0 - ease_in_out_expo(time.phase(5.0, 5.35)));
+            if label_alpha > 0.0 {
+                let label_r = outer_r + 32.0;
+                add_label(
+                    scene,
+                    Vec2(CX + a.cos() * label_r, CY + a.sin() * label_r),
+                    Anchor::CENTER,
+                    ANGLE_LABELS[i],
+                    11.0,
+                    alpha(p.paper, label_alpha * 0.7),
+                    Weight::NORMAL,
+                );
+            }
+        }
+    }
+
+    // 8 satellites at the cardinal / intercardinal points on the ring,
+    // each tagged with a tiny zero-padded index — "01..08" — that gives
+    // the SCAN a "nodes are individually identified" sense.
+    let sat_label_in = ease_in_out_expo(time.phase(4.35, 4.75))
+        * (1.0 - ease_in_out_expo(time.phase(4.9, 5.2)));
+    for i in 0..8 {
+        let a = i as f32 / 8.0 * TAU - PI * 0.5;
+        let stagger = i as f32 * 0.04;
+        let sp = ease_out_cubic(time.phase(4.05 + stagger, 4.55 + stagger));
+        let pos = Vec2(CX + a.cos() * ring_r, CY + a.sin() * ring_r);
+        let color = if i % 2 == 0 { p.pink } else { p.cyan };
+        add_circle(scene, pos, 12.0 * sp, Some(alpha(color, life)), None);
+
+        // Tag position: offset slightly outward from each satellite.
+        // i=2 (right cardinal) and i=6 (left cardinal) directions are
+        // already occupied by the `R = 300 PX` / `θ = NNN°` readouts, so
+        // we skip those two indices to avoid label collisions.
+        let skip_label = i == 2 || i == 6;
+        if sat_label_in > 0.0 && !skip_label {
+            let label_r = ring_r + 22.0;
+            let lpos = Vec2(CX + a.cos() * label_r, CY + a.sin() * label_r);
+            // Choose anchor based on quadrant so labels read toward the
+            // empty side (away from center).
+            let anchor = if a.cos().abs() > a.sin().abs() {
+                if a.cos() > 0.0 { Anchor::CENTER_LEFT } else { Anchor::CENTER_RIGHT }
+            } else if a.sin() > 0.0 {
+                Anchor::TOP_CENTER
+            } else {
+                Anchor::BOTTOM_CENTER
+            };
+            // Slight push along the chosen axis to avoid the satellite.
+            let push = 6.0;
+            let lpos = Vec2(lpos.0 + a.cos() * push, lpos.1 + a.sin() * push);
+            let label_text = format!("0{}", i + 1);
+            add_label(
+                scene,
+                lpos,
+                anchor,
+                &label_text,
+                10.0,
+                alpha(p.paper, life * sat_label_in * 0.55),
+                Weight::NORMAL,
+            );
+        }
+    }
+
+    // Radar-style angular sweep: a fan of N narrowing rectangles whose
+    // leading edge sweeps clockwise once, fading along its trail.
+    let sweep_in = ease_in_out_expo(time.phase(3.9, 4.2));
+    let sweep_out = ease_in_out_expo(time.phase(5.05, 5.4));
+    let sweep_life = (sweep_in * (1.0 - sweep_out)).clamp(0.0, 1.0);
+    if sweep_life > 0.0 {
+        // Slower rotation (~2.4s per full revolution) with a wider, longer
+        // trail so the sweep reads as deliberate observation rather than a
+        // quick flyby.
+        let base_angle = (time.seconds() - 3.95).max(0.0) * (TAU / 2.4) - PI * 0.5;
+        let trail_count = 32_i32;
+        let trail_span = PI * 0.75;
+        for j in 0..trail_count {
+            let frac = j as f32 / (trail_count - 1) as f32;
+            let a = base_angle - frac * trail_span;
+            let fade = (1.0 - frac).powi(2);
+            let r = ring_r * 0.95;
+            let mid = Vec2(CX + a.cos() * r * 0.5, CY + a.sin() * r * 0.5);
+            add_fx_rect(
+                scene,
+                mid,
+                Vec2(4.0, r),
+                a + PI * 0.5,
+                alpha(p.pink, life * sweep_life * fade * 0.6),
+                1.0,
+                Vec2(1.0, 1.0),
+            );
+        }
+    }
+
+    // Single numeric annotation, attached to the ring at 0°. Small detail,
+    // big payoff for "instrumentation" feel.
+    let annot = ease_in_out_expo(time.phase(4.15, 4.5)) * (1.0 - ease_in_out_expo(time.phase(4.85, 5.2)));
+    if annot > 0.0 {
+        // Mini connector tick from the ring to the label.
+        add_rect(
+            scene,
+            Vec2(CX + ring_r, CY - 1.0),
+            Vec2(28.0, 2.0),
+            alpha(p.paper, life * annot * 0.7),
+        );
+        add_label(
+            scene,
+            Vec2(CX + ring_r + 36.0, CY - 6.0),
+            Anchor::CENTER_LEFT,
+            "R = 300 PX",
+            13.0,
+            alpha(p.paper, life * annot * 0.85),
+            Weight::NORMAL,
+        );
+        // Sub-label one line down (smaller, dimmer) — extra-instrument feel.
+        add_label(
+            scene,
+            Vec2(CX + ring_r + 36.0, CY + 10.0),
+            Anchor::CENTER_LEFT,
+            "NODES = 08",
+            11.0,
+            alpha(p.paper, life * annot * 0.55),
+            Weight::NORMAL,
+        );
+    }
+
+    // "θ" readout in the 270° direction, where there was room left after
+    // skipping the angle numeral there. Tracks the radar sweep's current
+    // angle so the SCAN scene has a live data feel.
+    let theta_in = ease_in_out_expo(time.phase(4.2, 4.55))
+        * (1.0 - ease_in_out_expo(time.phase(4.95, 5.25)));
+    if theta_in > 0.0 {
+        let sweep_in = ease_in_out_expo(time.phase(3.9, 4.2));
+        let sweep_active = sweep_in > 0.05;
+        if sweep_active {
+            let base_angle = (time.seconds() - 3.95).max(0.0) * (TAU / 2.4);
+            // Convert to degrees and wrap to [0, 360).
+            let deg = (base_angle.to_degrees().rem_euclid(360.0)) as i32;
+            let theta_text = format!("θ = {:03}°", deg);
+            add_rect(
+                scene,
+                Vec2(CX - ring_r - 28.0, CY - 1.0),
+                Vec2(28.0, 2.0),
+                alpha(p.paper, life * theta_in * 0.7),
+            );
+            add_label(
+                scene,
+                Vec2(CX - ring_r - 36.0, CY - 6.0),
+                Anchor::CENTER_RIGHT,
+                &theta_text,
+                13.0,
+                alpha(p.paper, life * theta_in * 0.85),
+                Weight::NORMAL,
+            );
+        }
+    }
+
+    // SCAN's exit burst — 24 short radial spokes shoot outward from the
+    // hero ring just as the scene flashes white into RESOLVE. Acts as a
+    // physical "ignition" punctuation: the ring snaps, sparks fly, the
+    // flash takes over.
+    let burst_kick = ease_out_quint(time.phase(4.88, 5.02));
+    let burst_fade = ease_in_out_expo(time.phase(5.05, 5.25));
+    let burst_life = (burst_kick * (1.0 - burst_fade)).clamp(0.0, 1.0);
+    if burst_life > 0.0 {
+        for i in 0..24 {
+            let a = i as f32 / 24.0 * TAU;
+            let inner_r = ring_r + 6.0;
+            let length = 40.0 + burst_kick * 110.0;
+            let mid_r = inner_r + length * 0.5;
+            let mid = Vec2(CX + a.cos() * mid_r, CY + a.sin() * mid_r);
+            let color = if i % 3 == 0 { p.paper } else { p.cyan };
+            add_fx_rect(
+                scene,
+                mid,
+                Vec2(2.5, length),
+                a + PI * 0.5,
+                alpha(color, life * burst_life * 0.9),
+                1.0,
+                Vec2(1.0, 1.0),
+            );
+        }
+    }
+}
+
+fn draw_resolve<T: Time>(scene: &mut VectorLayer, time: T, p: Palette) {
+    if time.during(4.9, DURATION).is_none() {
+        return;
+    }
+
+    let life = ease_in_out_expo(time.phase(5.05, 5.5));
+
+    // Aperture-close finale. SCAN's R=300 cyan ring + 8 satellites are
+    // inherited and pulled toward the center, leaving a single dot that
+    // emits an outward ripple — the gesture that "settles" the whole piece.
+
+    // Phase 1: contracting hero ring (same R=300 that SCAN ended on).
+    let contract = ease_in_out_expo(time.phase(5.2, 6.3));
+    let ring_r = lerp(300.0, 22.0, contract);
+    let ring_alpha = (1.0 - contract * 0.55) * life;
+    if ring_r > 4.0 {
+        add_circle(
+            scene,
+            Vec2(CX, CY),
+            ring_r,
+            None,
+            Some((alpha(p.cyan, ring_alpha * 0.9), 3.5)),
+        );
+    }
+
+    // Phase 2: 8 satellites slide along their angular rays toward center.
+    // They settle into two interleaved layers — cardinals further out, the
+    // intercardinals closer in — so the final cluster reads as a deliberate
+    // double-ring composition instead of a flat ring of dots.
+    let sats_in = ease_in_out_expo(time.phase(5.25, 6.35));
+    // Slow continuous rotation that only becomes perceptible after the
+    // satellites have settled. Starts at 0 (no rotation during collapse) and
+    // ramps in after 6.4s. The cluster keeps "feeling alive" until fade out.
+    let cluster_spin = ease_out_cubic(time.phase(6.35, 7.0)) * (time.seconds() - 6.35).max(0.0) * 0.18;
+    for i in 0..8 {
+        let cardinal = i % 2 == 0;
+        let base_a = i as f32 / 8.0 * TAU - PI * 0.5;
+        let final_r = if cardinal { 46.0 } else { 22.0 };
+        let target_r = lerp(300.0, final_r, sats_in);
+        let a = base_a + cluster_spin;
+        let pos = Vec2(CX + a.cos() * target_r, CY + a.sin() * target_r);
+        let color = if cardinal { p.pink } else { p.cyan };
+        let size = lerp(12.0, if cardinal { 6.0 } else { 4.5 }, sats_in);
+        let sat_alpha = (1.0 - sats_in * 0.4) * life;
+        add_circle(scene, pos, size, Some(alpha(color, sat_alpha)), None);
+    }
+
+    // Phase 3: "memory" rings — ghosts of where the contracting ring used
+    // to be. Three after-images spawn as the ring sweeps inward, each
+    // fading slowly. Subtle texture for the contraction.
+    let memory_rings: [(f32, f32); 3] = [(5.55, 230.0), (5.85, 160.0), (6.12, 95.0)];
+    for &(start, r) in memory_rings.iter() {
+        let ghost_in = ease_out_cubic(time.phase(start, start + 0.08));
+        let ghost_out = ease_in_out_expo(time.phase(start + 0.25, start + 1.3));
+        let ghost = (ghost_in * (1.0 - ghost_out)).clamp(0.0, 1.0);
+        if ghost > 0.0 {
+            add_circle(
+                scene,
+                Vec2(CX, CY),
+                r,
+                None,
+                Some((alpha(p.cyan, life * ghost * 0.32), 1.8)),
+            );
+        }
+    }
+
+    // Phase 4: the singularity flash — a brief paper bloom at the moment
+    // everything collapses to the center, plus a burst of short radial
+    // shards emitted right at the impact so the moment hits with real
+    // energy instead of just "a circle gets bigger".
+    let sing = ease_out_quint(time.phase(6.2, 6.32))
+        * (1.0 - ease_in_out_expo(time.phase(6.32, 6.62)));
+    if sing > 0.0 {
+        add_circle(
+            scene,
+            Vec2(CX, CY),
+            46.0 + sing * 20.0,
+            Some(alpha(p.paper, sing * life * 0.95)),
+            None,
+        );
+    }
+
+    // 16 short radial shards — emit-then-fade exactly at the singularity.
+    // Length peaks then collapses inward as they vanish, giving the impact
+    // a real "sparks flying outward" sensation.
+    let shard_kick = ease_out_quint(time.phase(6.22, 6.36));
+    let shard_fade = ease_in_out_expo(time.phase(6.36, 6.6));
+    let shard_life = (shard_kick * (1.0 - shard_fade)).clamp(0.0, 1.0);
+    if shard_life > 0.0 {
+        for i in 0..16 {
+            let a = i as f32 / 16.0 * TAU;
+            let inner_r = 32.0 + shard_kick * 30.0;
+            let length = 26.0 + shard_kick * 50.0;
+            let mid_r = inner_r + length * 0.5;
+            let mid = Vec2(CX + a.cos() * mid_r, CY + a.sin() * mid_r);
+            let color = if i % 2 == 0 { p.pink } else { p.paper };
+            add_fx_rect(
+                scene,
+                mid,
+                Vec2(2.0, length),
+                a + PI * 0.5,
+                alpha(color, life * shard_life * 0.9),
+                1.0,
+                Vec2(1.0, 1.0),
+            );
+        }
+    }
+
+    // Phase 5: the outward ripple. The scene's one elastic moment — the
+    // ring kicks out from center with an elastic-eased launch, then a
+    // quint-eased growth carries it past the edge. Stroke alpha decays
+    // along the expansion so it reads as a fading wavefront.
+    let pulse_kick = ease_out_elastic(time.phase(6.22, 6.55)).max(0.0);
+    let pulse_grow = ease_out_quint(time.phase(6.3, 7.15));
+    let pulse_fade = 1.0 - ease_in_out_expo(time.phase(6.7, 7.25));
+    let pulse_r = pulse_kick * 600.0 * (0.05 + pulse_grow * 0.95);
+    if pulse_r > 12.0 && pulse_fade > 0.0 {
+        add_circle(
+            scene,
+            Vec2(CX, CY),
+            pulse_r,
+            None,
+            Some((alpha(p.cyan, life * pulse_fade * 0.9), 3.5)),
+        );
+    }
+
+    // Secondary, smaller, delayed ripple in pink for rhythm.
+    let pulse2_grow = ease_out_quint(time.phase(6.6, 7.3));
+    let pulse2_fade = 1.0 - ease_in_out_expo(time.phase(6.95, 7.4));
+    let pulse2_r = pulse2_grow * 420.0;
+    if pulse2_r > 12.0 && pulse2_fade > 0.0 {
+        add_circle(
+            scene,
+            Vec2(CX, CY),
+            pulse2_r,
+            None,
+            Some((alpha(p.pink, life * pulse2_fade * 0.55), 2.0)),
+        );
+    }
+
+    // Phase 6: the surviving central composition — a deliberate layered
+    // mark, not just a lone dot. Hub + pink hairline collar + 4 axis rays +
+    // a dim outer field ring with hash marks. All keyed to a slow
+    // post-settle rotation shared with the satellites.
+
+    let comp_in = ease_out_cubic(time.phase(6.28, 6.7));
+    if comp_in > 0.0 {
+        let breath = 1.0 + wave(time, 1.4, 0.0) * 0.06;
+
+        // (a) the hub: a filled cyan core.
+        add_circle(
+            scene,
+            Vec2(CX, CY),
+            7.5 * comp_in * breath,
+            Some(alpha(p.cyan, life)),
+            None,
+        );
+
+        // (b) pink hairline collar one step out from the hub.
+        add_circle(
+            scene,
+            Vec2(CX, CY),
+            14.0 * comp_in,
+            None,
+            Some((alpha(p.pink, life * 0.9), 1.6)),
+        );
+
+        // (c) four axis rays at the cardinals, rotating with the cluster.
+        // They start just outside the collar and end just inside the outer
+        // field ring — visually connecting the inner core to the outer field.
+        let ray_in = ease_out_cubic(time.phase(6.5, 6.95));
+        if ray_in > 0.0 {
+            for k in 0..4 {
+                let a = k as f32 * PI * 0.5 + cluster_spin;
+                let inner = 19.0;
+                let outer = 38.0 + ray_in * 22.0;
+                let mid_r = (inner + outer) * 0.5;
+                let length = outer - inner;
+                let mid = Vec2(CX + a.cos() * mid_r, CY + a.sin() * mid_r);
+                add_fx_rect(
+                    scene,
+                    mid,
+                    Vec2(1.5, length),
+                    a + PI * 0.5,
+                    alpha(p.paper, life * 0.55),
+                    1.0,
+                    Vec2(1.0, 1.0),
+                );
+            }
+        }
+
+        // (d) outer "field" ring with 12 micro-hash-marks — echoes the SCAN
+        // graduated dial at miniature scale. Reads as "still observing".
+        let field_in = ease_out_cubic(time.phase(6.65, 7.1));
+        if field_in > 0.0 {
+            let field_r = 78.0 + (1.0 - breath) * 4.0;
+            add_circle(
+                scene,
+                Vec2(CX, CY),
+                field_r * field_in,
+                None,
+                Some((alpha(p.paper, life * 0.25), 1.0)),
+            );
+            for k in 0..12 {
+                let a = k as f32 / 12.0 * TAU - PI * 0.5 + cluster_spin * 0.5;
+                let inner_r = field_r - 4.0;
+                let outer_r = field_r + 4.0;
+                let mid_r = (inner_r + outer_r) * 0.5;
+                let mid = Vec2(CX + a.cos() * mid_r, CY + a.sin() * mid_r);
+                let major = k % 3 == 0;
+                add_fx_rect(
+                    scene,
+                    mid,
+                    Vec2(if major { 2.0 } else { 1.2 }, 8.0 * field_in),
+                    a + PI * 0.5,
+                    alpha(p.paper, life * if major { 0.6 } else { 0.35 }),
+                    1.0,
+                    Vec2(1.0, 1.0),
+                );
+            }
+
+            // (e) a single small "scan dot" orbiting the field ring — like
+            // a slow second-hand. Period ~3.6s. Adds a quiet pulse of life
+            // to the otherwise-static central mark.
+            let orbit_in = ease_out_cubic(time.phase(6.8, 7.2));
+            if orbit_in > 0.0 {
+                let orbit_period = 3.6;
+                let orbit_a =
+                    (time.seconds() - 6.8).max(0.0) * (TAU / orbit_period) - PI * 0.5;
+                let orbit_pos =
+                    Vec2(CX + orbit_a.cos() * field_r, CY + orbit_a.sin() * field_r);
+                add_circle(
+                    scene,
+                    orbit_pos,
+                    3.0 * orbit_in,
+                    Some(alpha(p.cyan, life * orbit_in)),
+                    None,
+                );
+                // Tiny leading whisker — a 1px hairline behind the dot for
+                // motion sense.
+                let trail_count = 4_i32;
+                let trail_span = PI * 0.04;
+                for j in 1..=trail_count {
+                    let frac = j as f32 / trail_count as f32;
+                    let a_t = orbit_a - frac * trail_span;
+                    let pos = Vec2(CX + a_t.cos() * field_r, CY + a_t.sin() * field_r);
+                    let fade = (1.0 - frac).powi(2);
+                    add_circle(
+                        scene,
+                        pos,
+                        1.5 * orbit_in,
+                        Some(alpha(p.cyan, life * orbit_in * fade * 0.5)),
+                        None,
+                    );
+                }
+            }
+        }
+    }
+
+    // Four alignment ticks at the cardinals just outside the field ring,
+    // making the central mark a fully four-way-symmetric axis indicator.
+    let tick_in = ease_out_cubic(time.phase(6.85, 7.15));
+    if tick_in > 0.0 {
+        let tick_alpha = alpha(p.paper, life * 0.5);
+        let arm_len = 22.0 * tick_in;
+        let offset = 96.0;
+        // Down + up vertical ticks.
+        add_rect(
+            scene,
+            Vec2(CX - 1.0, CY + offset),
+            Vec2(2.0, arm_len),
+            tick_alpha,
+        );
+        add_rect(
+            scene,
+            Vec2(CX - 1.0, CY - offset - arm_len),
+            Vec2(2.0, arm_len),
+            tick_alpha,
+        );
+        // Right + left horizontal ticks.
+        add_rect(
+            scene,
+            Vec2(CX + offset, CY - 1.0),
+            Vec2(arm_len, 2.0),
+            tick_alpha,
+        );
+        add_rect(
+            scene,
+            Vec2(CX - offset - arm_len, CY - 1.0),
+            Vec2(arm_len, 2.0),
+            tick_alpha,
+        );
+    }
+}
+
+fn draw_overlay<T: Time>(scene: &mut VectorLayer, time: T, p: Palette) {
+    // Pre-OVERTURE "boot screen" — a big monospace timecode + tiny init
+    // subtitle briefly appears at center then fades, before the HUD has
+    // finished assembling. Reads as a system startup flash.
+    let boot_in = ease_in_out_expo(time.phase(0.05, 0.18));
+    let boot_out = ease_in_out_expo(time.phase(0.32, 0.55));
+    let boot_life = (boot_in * (1.0 - boot_out)).clamp(0.0, 1.0);
+    if boot_life > 0.0 {
+        add_label(
+            scene,
+            Vec2(CX, CY - 18.0),
+            Anchor::BOTTOM_CENTER,
+            "TELLUR",
+            42.0,
+            alpha(p.paper, boot_life * 0.95),
+            Weight::BOLD,
+        );
+        add_label(
+            scene,
+            Vec2(CX, CY + 4.0),
+            Anchor::TOP_CENTER,
+            "00:00:00.000 · INIT",
+            13.0,
+            alpha(p.paper, boot_life * 0.7),
+            Weight::NORMAL,
+        );
+        // A tiny pink underline dash to the right of "INIT".
+        add_rect(
+            scene,
+            Vec2(CX + 88.0, CY + 18.0),
+            Vec2(20.0 * boot_in, 2.0),
+            alpha(p.pink, boot_life),
+        );
+    }
+
+    // Crisp white flash at the SCAN → RESOLVE transition. Lives in the
+    // unshadowed overlay so it doesn't smear into a grey haze through the
+    // foreground shadow pass.
+    let flash = ease_out_quint(time.phase(4.9, 5.05))
+        * (1.0 - ease_in_out_expo(time.phase(5.05, 5.35)));
+    if flash > 0.0 {
+        add_rect(scene, Vec2::ZERO, SCENE_SIZE, alpha(p.paper, flash * 0.22));
+    }
+
+    // Exit fade — gentle quint ease into the bg color.
+    let fade = ease_in_out_quint(time.phase(7.25, DURATION));
+    if fade > 0.0 {
+        add_rect(scene, Vec2::ZERO, SCENE_SIZE, alpha(p.bg, fade));
+    }
+}
+
+pub fn build_timeline() -> impl Timeline + Send {
+    timeline(DURATION, move |t, target: Resolution, ctx| {
+        let palette = Palette {
+            bg: Color::rgb_u8(12, 11, 24),
+            paper: Color::rgb_u8(247, 240, 224),
+            pink: Color::rgb_u8(255, 79, 138),
+            cyan: Color::rgb_u8(73, 222, 226),
+        };
+
+        // backdrop is shadow-free and time-stable after its reveal animation
+        // saturates (~0.6s), so it caches as its own raster child.
+        let mut backdrop = VectorLayer::new(SCENE_SIZE);
+        draw_backdrop(&mut backdrop, t, palette);
+
+        // HUD is a dedicated component whose Hash/Eq is driven by a tiny set
+        // of inputs (palette + two `Phase`s + section index). After the intro
+        // saturates and between section-marker switches, the struct compares
+        // equal across frames, so `Rasterize<Hud>` lookup in
+        // `CachingRenderContext` hits the cache and returns the previously
+        // rendered raster instead of re-shaping all the text + re-drawing
+        // every bracket / tick.
+        let hud = Hud {
+            palette,
+            intro: t.phase(HUD_INTRO_START, HUD_INTRO_END),
+            outro: t.phase(HUD_OUTRO_START, HUD_OUTRO_END),
+            section: section_index_at(t.seconds()),
+        };
+
+        let mut foreground = VectorLayer::new(SCENE_SIZE);
+        draw_overture(&mut foreground, t, palette);
+        draw_field(&mut foreground, t, palette);
+        draw_scan(&mut foreground, t, palette);
+        draw_resolve(&mut foreground, t, palette);
+
+        let mut overlay = VectorLayer::new(SCENE_SIZE);
+        draw_overlay(&mut overlay, t, palette);
+
+        // Two stacked shadows on the foreground: a soft paper-tinted halo
+        // (no offset → ambient backlight) directly behind the shapes, then
+        // a deeper dark drop shadow further back. The outer DropShadow
+        // paints first, then the inner, then the child — so the shape
+        // itself stays crisp on top.
+        let shadowed_foreground = DropShadow {
+            offset: Vec2(0.0, 22.0),
+            blur: 26.0,
+            color: Color::rgba_u8(0, 0, 0, 170),
+            child: Box::new(DropShadow {
+                offset: Vec2(0.0, 0.0),
+                blur: 18.0,
+                color: alpha(palette.paper, 0.26),
+                child: Box::new(foreground.rasterize()),
+            }),
+        };
+
+        let mut stage = Layer::new(SCENE_SIZE);
+        stage.add(backdrop.rasterize().at(Vec2::ZERO));
+        stage.add(shadowed_foreground.at(Vec2::ZERO));
+        stage.add(hud.rasterize().at(Vec2::ZERO));
+        stage.add(overlay.rasterize().at(Vec2::ZERO));
+
+        // `.background(palette.bg)` paints the bg fill and — critically —
+        // pins the paint_bounds to `(0, 0)..SCENE_SIZE`, clipping the
+        // shadow's outward spill so the final frame isn't squished. See
+        // the DecoratedBox docstring in tellur_core::layout::raster.
+        stage
+            .background(palette.bg)
+            .render(SCENE_SIZE, target, ctx)
+    })
+}
+
+pub const TITLE: &str = "Kinetic Motion";
+
+// Consumed by `demo_timeline_mp4` but not by the plugin entry; tell the
+// per-binary dead-code lint to allow it.
+#[allow(dead_code)]
+pub const SCENE_RESOLUTION: (u32, u32) = (1920, 1080);
diff --git a/tellur-live/examples/demo_timeline_mp4.rs b/tellur-live/examples/demo_timeline_mp4.rs
new file mode 100644
index 0000000..2dd3d50
--- /dev/null
+++ b/tellur-live/examples/demo_timeline_mp4.rs
@@ -0,0 +1,58 @@
+//! Encode the shared `demo_scene` timeline to an mp4 file via ffmpeg.
+//!
+//! The scene logic is the same one served by the `demo_timeline_plugin`
+//! cdylib — both pull from `demo_scene/mod.rs` so the live preview and
+//! the offline render stay in lock-step.
+//!
+//! Run with:
+//! ```text
+//! cargo run --release --example demo_timeline_mp4 -- /tmp/demo.mp4
+//! ```
+//! The output path argument is optional; it defaults to `./demo_timeline.mp4`.
+
+use std::path::PathBuf;
+use std::process::ExitCode;
+
+use tellur_core::raster::Resolution;
+use tellur_renderer::FfmpegEncoder;
+
+#[path = "demo_scene/mod.rs"]
+mod scene;
+
+const FPS: u32 = 60;
+
+fn main() -> ExitCode {
+    let output = std::env::args_os()
+        .nth(1)
+        .map(PathBuf::from)
+        .unwrap_or_else(|| PathBuf::from("demo_timeline.mp4"));
+
+    let (width, height) = scene::SCENE_RESOLUTION;
+    let timeline = scene::build_timeline();
+
+    println!(
+        "Rendering \"{}\" at {}x{}@{}fps → {}",
+        scene::TITLE,
+        width,
+        height,
+        FPS,
+        output.display(),
+    );
+
+    let result = FfmpegEncoder::new(Resolution::new(width, height), FPS)
+        // libx264 + yuv420p keeps the file widely playable; crf 18 is
+        // visually-lossless-ish and small enough for a demo deliverable.
+        .args(["-c:v", "libx264", "-pix_fmt", "yuv420p", "-crf", "18"])
+        .encode(&timeline, &output);
+
+    match result {
+        Ok(()) => {
+            println!("Wrote {}", output.display());
+            ExitCode::SUCCESS
+        }
+        Err(err) => {
+            eprintln!("encode failed: {err}");
+            ExitCode::FAILURE
+        }
+    }
+}
diff --git a/tellur-live/examples/demo_timeline_plugin.rs b/tellur-live/examples/demo_timeline_plugin.rs
new file mode 100644
index 0000000..ad0941a
--- /dev/null
+++ b/tellur-live/examples/demo_timeline_plugin.rs
@@ -0,0 +1,9 @@
+//! Live-preview plugin entry for the shared `demo_scene` timeline.
+//!
+//! The actual scene logic lives in `demo_scene/mod.rs` so the same
+//! timeline can also be encoded to mp4 by `demo_timeline_mp4`.
+
+#[path = "demo_scene/mod.rs"]
+mod scene;
+
+tellur_live::export_timeline!("main", scene::TITLE, scene::build_timeline);
diff --git a/tellur-live/src/build_watch.rs b/tellur-live/src/build_watch.rs
new file mode 100644
index 0000000..64bf995
--- /dev/null
+++ b/tellur-live/src/build_watch.rs
@@ -0,0 +1,269 @@
+use std::fs;
+use std::io;
+use std::path::{Path, PathBuf};
+use std::process::Command;
+use std::sync::{Arc, Mutex};
+use std::thread;
+use std::time::{Duration, SystemTime, UNIX_EPOCH};
+
+#[derive(Debug, Clone)]
+pub struct AutoBuildOptions {
+    pub package: Option<String>,
+    pub example: String,
+    pub manifest_path: Option<PathBuf>,
+    pub watch_paths: Vec<PathBuf>,
+    pub poll_interval: Duration,
+}
+
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum CompileStatus {
+    Compiled,
+    Compiling,
+    Failed,
+}
+
+impl CompileStatus {
+    pub fn as_str(self) -> &'static str {
+        match self {
+            Self::Compiled => "compiled",
+            Self::Compiling => "compiling",
+            Self::Failed => "failed",
+        }
+    }
+}
+
+#[derive(Debug, Clone)]
+pub struct CompileSnapshot {
+    pub status: CompileStatus,
+    pub last_error: Option<String>,
+}
+
+impl CompileSnapshot {
+    pub fn compiled() -> Self {
+        Self {
+            status: CompileStatus::Compiled,
+            last_error: None,
+        }
+    }
+}
+
+#[derive(Clone)]
+pub struct CompileState {
+    inner: Arc<Mutex<CompileSnapshot>>,
+}
+
+impl CompileState {
+    pub fn compiled() -> Self {
+        Self {
+            inner: Arc::new(Mutex::new(CompileSnapshot::compiled())),
+        }
+    }
+
+    pub fn snapshot(&self) -> CompileSnapshot {
+        self.inner
+            .lock()
+            .map(|state| state.clone())
+            .unwrap_or_else(|_| CompileSnapshot {
+                status: CompileStatus::Failed,
+                last_error: Some("compile state lock poisoned".to_owned()),
+            })
+    }
+
+    fn set(&self, status: CompileStatus, last_error: Option<String>) {
+        if let Ok(mut state) = self.inner.lock() {
+            *state = CompileSnapshot { status, last_error };
+        }
+    }
+}
+
+pub fn start_build_watcher(options: AutoBuildOptions) -> CompileState {
+    let state = CompileState::compiled();
+    let state_for_thread = state.clone();
+    thread::spawn(move || watch_loop(options, state_for_thread));
+    state
+}
+
+pub fn run_release_build_once(options: &AutoBuildOptions) -> Result<(), String> {
+    run_release_build(options)
+}
+
+fn watch_loop(options: AutoBuildOptions, state: CompileState) {
+    let watch_paths = if options.watch_paths.is_empty() {
+        vec![std::env::current_dir().unwrap_or_else(|_| PathBuf::from("."))]
+    } else {
+        options.watch_paths.clone()
+    };
+    let poll_interval = options.poll_interval.max(Duration::from_millis(200));
+    eprintln!("watching {} source path(s):", watch_paths.len());
+    for path in &watch_paths {
+        eprintln!("  {}", path.display());
+    }
+    let mut last_seen = scan_paths(&watch_paths).ok();
+
+    loop {
+        thread::sleep(poll_interval);
+        let fingerprint = match scan_paths(&watch_paths) {
+            Ok(fingerprint) => fingerprint,
+            Err(e) => {
+                state.set(
+                    CompileStatus::Failed,
+                    Some(format!("failed to scan watched source files: {e}")),
+                );
+                continue;
+            }
+        };
+        if last_seen == Some(fingerprint) {
+            continue;
+        }
+
+        state.set(CompileStatus::Compiling, None);
+        eprintln!("source change detected; running release build");
+        match run_release_build(&options) {
+            Ok(()) => {
+                eprintln!("release build finished");
+                state.set(CompileStatus::Compiled, None)
+            }
+            Err(e) => {
+                eprintln!("release build failed: {e}");
+                state.set(CompileStatus::Failed, Some(e))
+            }
+        }
+        last_seen = Some(fingerprint);
+    }
+}
+
+fn run_release_build(options: &AutoBuildOptions) -> Result<(), String> {
+    let mut command = Command::new("cargo");
+    command.arg("build").arg("--release");
+    if let Some(manifest_path) = &options.manifest_path {
+        command.arg("--manifest-path").arg(manifest_path);
+    }
+    if let Some(package) = &options.package {
+        command.arg("-p").arg(package);
+    }
+    command.arg("--example").arg(&options.example);
+
+    let description = describe_command(&command);
+    eprintln!("{description}");
+    let status = command
+        .status()
+        .map_err(|e| format!("failed to run {description}: {e}"))?;
+    if status.success() {
+        return Ok(());
+    }
+
+    Err(format!(
+        "{description} failed with {status}; see tellur-live stderr for diagnostics"
+    ))
+}
+
+fn describe_command(command: &Command) -> String {
+    let mut parts = vec![command.get_program().to_string_lossy().into_owned()];
+    parts.extend(
+        command
+            .get_args()
+            .map(|arg| arg.to_string_lossy().into_owned()),
+    );
+    parts.join(" ")
+}
+
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+struct WatchFingerprint {
+    files: u64,
+    len: u64,
+    hash: u64,
+}
+
+impl Default for WatchFingerprint {
+    fn default() -> Self {
+        Self {
+            files: 0,
+            len: 0,
+            hash: FNV_OFFSET,
+        }
+    }
+}
+
+fn scan_paths(paths: &[PathBuf]) -> io::Result<WatchFingerprint> {
+    let mut fingerprint = WatchFingerprint::default();
+    for path in paths {
+        scan_path(path, &mut fingerprint)?;
+    }
+    Ok(fingerprint)
+}
+
+fn scan_path(path: &Path, fingerprint: &mut WatchFingerprint) -> io::Result<()> {
+    let metadata = match fs::metadata(path) {
+        Ok(metadata) => metadata,
+        Err(e) if e.kind() == io::ErrorKind::NotFound => return Ok(()),
+        Err(e) => return Err(e),
+    };
+
+    if metadata.is_dir() {
+        if is_ignored_dir(path) {
+            return Ok(());
+        }
+        let mut entries = fs::read_dir(path)?
+            .filter_map(Result::ok)
+            .map(|entry| entry.path())
+            .collect::<Vec<_>>();
+        entries.sort();
+        for entry in entries {
+            scan_path(&entry, fingerprint)?;
+        }
+        return Ok(());
+    }
+
+    if !metadata.is_file() {
+        return Ok(());
+    }
+
+    fingerprint.files = fingerprint.files.wrapping_add(1);
+    fingerprint.len = fingerprint.len.wrapping_add(metadata.len());
+    mix_path(&mut fingerprint.hash, path);
+    mix_u64(&mut fingerprint.hash, metadata.len());
+    mix_u128(&mut fingerprint.hash, modified_nanos(&metadata));
+    Ok(())
+}
+
+fn is_ignored_dir(path: &Path) -> bool {
+    matches!(
+        path.file_name().and_then(|s| s.to_str()),
+        Some("target" | ".git" | "node_modules" | "dist" | ".direnv")
+    )
+}
+
+fn modified_nanos(metadata: &fs::Metadata) -> u128 {
+    metadata
+        .modified()
+        .unwrap_or(SystemTime::UNIX_EPOCH)
+        .duration_since(UNIX_EPOCH)
+        .unwrap_or_default()
+        .as_nanos()
+}
+
+fn mix_path(hash: &mut u64, path: &Path) {
+    for byte in path.to_string_lossy().as_bytes() {
+        mix_byte(hash, *byte);
+    }
+}
+
+fn mix_u64(hash: &mut u64, value: u64) {
+    for byte in value.to_le_bytes() {
+        mix_byte(hash, byte);
+    }
+}
+
+fn mix_u128(hash: &mut u64, value: u128) {
+    for byte in value.to_le_bytes() {
+        mix_byte(hash, byte);
+    }
+}
+
+fn mix_byte(hash: &mut u64, byte: u8) {
+    *hash ^= u64::from(byte);
+    *hash = hash.wrapping_mul(FNV_PRIME);
+}
+
+const FNV_OFFSET: u64 = 0xcbf29ce484222325;
+const FNV_PRIME: u64 = 0x100000001b3;
diff --git a/tellur-live/src/lib.rs b/tellur-live/src/lib.rs
new file mode 100644
index 0000000..532495e
--- /dev/null
+++ b/tellur-live/src/lib.rs
@@ -0,0 +1,10 @@
+pub mod build_watch;
+pub mod plugin;
+pub mod server;
+
+pub use build_watch::{AutoBuildOptions, CompileSnapshot, CompileState, CompileStatus};
+pub use plugin::{
+    single_timeline, HotReloadPlugin, PluginLoadError, SingleTimeline, TimelineCollection,
+    TimelineInfo,
+};
+pub use server::{serve, ServerOptions};
diff --git a/tellur-live/src/main.rs b/tellur-live/src/main.rs
new file mode 100644
index 0000000..c64f37a
--- /dev/null
+++ b/tellur-live/src/main.rs
@@ -0,0 +1,334 @@
+use std::env;
+use std::error::Error;
+use std::fs;
+use std::path::{Path, PathBuf};
+use std::time::Duration;
+
+use tellur_core::raster::Resolution;
+use tellur_live::{serve, AutoBuildOptions, ServerOptions};
+
+fn main() -> Result<(), Box<dyn Error>> {
+    let args: Vec<String> = env::args().skip(1).collect();
+    if args.is_empty() || matches!(args[0].as_str(), "-h" | "--help") {
+        println!("{}", usage());
+        return Ok(());
+    }
+    let options = parse_args(args.into_iter())?;
+    serve(options)
+}
+
+fn parse_args(mut args: impl Iterator<Item = String>) -> Result<ServerOptions, Box<dyn Error>> {
+    let Some(command) = args.next() else {
+        return Err(usage().into());
+    };
+    if command != "serve" {
+        return Err(usage().into());
+    }
+
+    let mut plugin_path: Option<PathBuf> = None;
+    let mut bind: Option<String> = None;
+    let mut host = "127.0.0.1".to_owned();
+    let mut port = 4317u16;
+    let mut resolution = Resolution::new(1280, 720);
+    let mut fps = 30u32;
+    let mut verbose = false;
+    let mut auto_build_requested = false;
+    let mut build_package: Option<String> = None;
+    let mut build_example: Option<String> = None;
+    let mut build_manifest: Option<PathBuf> = None;
+    let mut watch_paths: Vec<PathBuf> = Vec::new();
+    let mut explicit_watch_paths = false;
+
+    while let Some(arg) = args.next() {
+        match arg.as_str() {
+            "--plugin" => {
+                plugin_path = Some(PathBuf::from(
+                    args.next().ok_or("--plugin requires a path")?,
+                ));
+            }
+            "--bind" => {
+                bind = Some(args.next().ok_or("--bind requires an address")?);
+            }
+            "--host" => {
+                host = args.next().ok_or("--host requires an address")?;
+            }
+            "--port" => {
+                port = args
+                    .next()
+                    .ok_or("--port requires a value")?
+                    .parse()
+                    .map_err(|_| "--port must be a TCP port")?;
+            }
+            "--size" => {
+                resolution = parse_resolution(&args.next().ok_or("--size requires WxH")?)?;
+            }
+            "--fps" => {
+                fps = args
+                    .next()
+                    .ok_or("--fps requires a value")?
+                    .parse()
+                    .map_err(|_| "--fps must be a positive integer")?;
+                if fps == 0 {
+                    return Err("--fps must be greater than zero".into());
+                }
+            }
+            "--verbose" => {
+                verbose = true;
+            }
+            "--watch" => {
+                auto_build_requested = true;
+            }
+            "--watch-path" => {
+                auto_build_requested = true;
+                explicit_watch_paths = true;
+                watch_paths.push(PathBuf::from(
+                    args.next().ok_or("--watch-path requires a path")?,
+                ));
+            }
+            "-p" | "--package" | "--build-package" => {
+                auto_build_requested = true;
+                build_package = Some(args.next().ok_or("--build-package requires a name")?);
+            }
+            "--example" | "--examples" | "--build-example" => {
+                auto_build_requested = true;
+                build_example = Some(args.next().ok_or("--build-example requires a name")?);
+            }
+            "--build-manifest" => {
+                auto_build_requested = true;
+                build_manifest = Some(PathBuf::from(
+                    args.next().ok_or("--build-manifest requires a path")?,
+                ));
+            }
+            "-h" | "--help" => return Err(usage().into()),
+            other if plugin_path.is_none() => plugin_path = Some(PathBuf::from(other)),
+            other => return Err(format!("unknown argument: {other}\n\n{}", usage()).into()),
+        }
+    }
+
+    let plugin_path = plugin_path
+        .or_else(|| build_example.as_deref().map(infer_plugin_path))
+        .ok_or_else(usage)?;
+    let auto_build = if auto_build_requested {
+        let example = build_example
+            .or_else(|| infer_example_name(&plugin_path))
+            .ok_or("--watch requires --build-example when it cannot be inferred from --plugin")?;
+        if watch_paths.is_empty() && !explicit_watch_paths {
+            watch_paths = infer_watch_paths(
+                build_package.as_deref(),
+                &example,
+                build_manifest.as_deref(),
+            );
+        }
+        Some(AutoBuildOptions {
+            package: build_package,
+            example,
+            manifest_path: build_manifest,
+            watch_paths,
+            poll_interval: Duration::from_millis(250),
+        })
+    } else {
+        None
+    };
+
+    Ok(ServerOptions {
+        plugin_path,
+        bind: bind.unwrap_or_else(|| format!("{host}:{port}")),
+        resolution,
+        fps,
+        verbose,
+        auto_build,
+    })
+}
+
+fn parse_resolution(s: &str) -> Result<Resolution, Box<dyn Error>> {
+    let (w, h) = s.split_once('x').ok_or("resolution must be WIDTHxHEIGHT")?;
+    Ok(Resolution::new(w.parse()?, h.parse()?))
+}
+
+fn infer_example_name(path: &Path) -> Option<String> {
+    let stem = path.file_stem()?.to_str()?;
+    if cfg!(target_os = "windows") {
+        Some(stem.to_owned())
+    } else {
+        Some(stem.strip_prefix("lib").unwrap_or(stem).to_owned())
+    }
+}
+
+fn infer_plugin_path(example: &str) -> PathBuf {
+    target_root()
+        .join("release")
+        .join("examples")
+        .join(dynamic_library_file_name(example))
+}
+
+fn dynamic_library_file_name(example: &str) -> String {
+    if cfg!(target_os = "windows") {
+        format!("{example}.dll")
+    } else if cfg!(target_os = "macos") {
+        format!("lib{example}.dylib")
+    } else {
+        format!("lib{example}.so")
+    }
+}
+
+fn target_root() -> PathBuf {
+    if let Some(target_dir) = env::var_os("CARGO_TARGET_DIR") {
+        return PathBuf::from(target_dir);
+    }
+    let cwd = env::current_dir().unwrap_or_else(|_| PathBuf::from("."));
+    find_workspace_root(&cwd).unwrap_or(cwd).join("target")
+}
+
+fn infer_watch_paths(
+    package: Option<&str>,
+    example: &str,
+    manifest_path: Option<&Path>,
+) -> Vec<PathBuf> {
+    let cwd = env::current_dir().unwrap_or_else(|_| PathBuf::from("."));
+    let workspace_root = find_workspace_root(&cwd);
+    let mut paths = Vec::new();
+
+    let package_dir = manifest_path
+        .and_then(Path::parent)
+        .map(Path::to_path_buf)
+        .or_else(|| {
+            package.and_then(|name| find_workspace_package_dir(name, workspace_root.as_deref()))
+        });
+    let Some(package_dir) = package_dir else {
+        return paths;
+    };
+
+    if let Some(root) = &workspace_root {
+        push_if_exists(&mut paths, root.join("Cargo.toml"));
+        push_if_exists(&mut paths, root.join("Cargo.lock"));
+    }
+
+    push_if_exists(&mut paths, package_dir.join("Cargo.toml"));
+    push_if_exists(&mut paths, package_dir.join("src"));
+    let example_file = package_dir.join("examples").join(format!("{example}.rs"));
+    if example_file.exists() {
+        paths.push(example_file);
+    } else {
+        push_if_exists(&mut paths, package_dir.join("examples"));
+    }
+    collect_path_dependency_watch_paths(&package_dir.join("Cargo.toml"), &mut paths);
+
+    paths
+}
+
+fn find_workspace_root(start: &Path) -> Option<PathBuf> {
+    for dir in start.ancestors() {
+        let manifest = dir.join("Cargo.toml");
+        let Ok(contents) = fs::read_to_string(&manifest) else {
+            continue;
+        };
+        if contents.contains("[workspace]") {
+            return Some(dir.to_path_buf());
+        }
+    }
+    None
+}
+
+fn find_workspace_package_dir(package: &str, workspace_root: Option<&Path>) -> Option<PathBuf> {
+    let root = workspace_root?;
+    for member in workspace_members(root) {
+        let dir = root.join(member);
+        if package_name_from_manifest(&dir.join("Cargo.toml")).as_deref() == Some(package) {
+            return Some(dir);
+        }
+    }
+    None
+}
+
+fn workspace_members(root: &Path) -> Vec<String> {
+    let Ok(contents) = fs::read_to_string(root.join("Cargo.toml")) else {
+        return Vec::new();
+    };
+    let Some(start) = contents.find("members") else {
+        return Vec::new();
+    };
+    let Some(open) = contents[start..].find('[').map(|i| start + i) else {
+        return Vec::new();
+    };
+    let Some(close) = contents[open..].find(']').map(|i| open + i) else {
+        return Vec::new();
+    };
+    quoted_values(&contents[open + 1..close])
+}
+
+fn package_name_from_manifest(manifest: &Path) -> Option<String> {
+    let contents = fs::read_to_string(manifest).ok()?;
+    let mut in_package = false;
+    for line in contents.lines() {
+        let line = line.trim();
+        if line.starts_with('[') {
+            in_package = line == "[package]";
+            continue;
+        }
+        if in_package && line.starts_with("name") {
+            let (_, value) = line.split_once('=')?;
+            return first_quoted_value(value);
+        }
+    }
+    None
+}
+
+fn collect_path_dependency_watch_paths(manifest: &Path, paths: &mut Vec<PathBuf>) {
+    let Some(package_dir) = manifest.parent() else {
+        return;
+    };
+    let Ok(contents) = fs::read_to_string(manifest) else {
+        return;
+    };
+    for dep in path_dependency_values(&contents) {
+        let dep_dir = package_dir.join(dep);
+        push_if_exists(paths, dep_dir.join("Cargo.toml"));
+        push_if_exists(paths, dep_dir.join("src"));
+    }
+}
+
+fn path_dependency_values(contents: &str) -> Vec<String> {
+    contents
+        .lines()
+        .filter_map(|line| {
+            let line = line.trim();
+            let (_, rest) = line.split_once("path")?;
+            let (_, value) = rest.split_once('=')?;
+            first_quoted_value(value)
+        })
+        .collect()
+}
+
+fn quoted_values(value: &str) -> Vec<String> {
+    let mut values = Vec::new();
+    let mut rest = value;
+    while let Some(next) = first_quoted_value(rest) {
+        let Some(start) = rest.find('"') else {
+            break;
+        };
+        let tail = &rest[start + 1..];
+        let Some(end) = tail.find('"') else {
+            break;
+        };
+        values.push(next);
+        rest = &tail[end + 1..];
+    }
+    values
+}
+
+fn first_quoted_value(value: &str) -> Option<String> {
+    let start = value.find('"')?;
+    let tail = &value[start + 1..];
+    let end = tail.find('"')?;
+    Some(tail[..end].to_owned())
+}
+
+fn push_if_exists(paths: &mut Vec<PathBuf>, path: PathBuf) {
+    if path.exists() {
+        paths.push(path);
+    }
+}
+
+fn usage() -> String {
+    "usage: tellur-live serve (--plugin <path-to-cdylib> | -p <package> --example <example>) [--host 127.0.0.1] [--port 4317] [--bind 127.0.0.1:4317] [--fps 30] [--verbose] [--watch] [--watch-path <path>] [--build-manifest <Cargo.toml>]".to_owned()
+}
diff --git a/tellur-live/src/plugin.rs b/tellur-live/src/plugin.rs
new file mode 100644
index 0000000..205f196
--- /dev/null
+++ b/tellur-live/src/plugin.rs
@@ -0,0 +1,395 @@
+//! Rust-internal timeline plugin ABI and hot-reload loader.
+//!
+//! This module intentionally uses Rust types across the dynamic-library
+//! boundary. That is suitable for local editing when the host and plugin are
+//! built from the same workspace/toolchain; it is not a stable C ABI.
+
+use std::error::Error;
+use std::ffi::{CStr, CString};
+use std::fmt;
+use std::fs;
+use std::io::Read;
+use std::os::raw::{c_char, c_int, c_void};
+use std::path::{Path, PathBuf};
+use std::time::{SystemTime, UNIX_EPOCH};
+
+use tellur_core::raster::{RasterImage, Resolution};
+use tellur_core::render_context::RenderContext;
+use tellur_core::time::TimelineTime;
+use tellur_core::timeline::Timeline;
+
+pub const ENTRY_SYMBOL: &[u8] = b"tellur_timeline_collection_v1\0";
+
+type EntryFn = unsafe extern "Rust" fn() -> Box<dyn TimelineCollection>;
+
+/// Metadata for one timeline exposed by a plugin.
+#[derive(Debug, Clone, PartialEq)]
+pub struct TimelineInfo {
+    pub id: String,
+    pub title: String,
+    pub duration: f32,
+}
+
+/// A collection of timelines exported by one dynamic library.
+pub trait TimelineCollection: Send {
+    fn timelines(&self) -> Vec<TimelineInfo>;
+
+    fn build(
+        &self,
+        id: &str,
+        t: TimelineTime,
+        target: Resolution,
+        ctx: &mut dyn RenderContext,
+    ) -> Option<RasterImage>;
+}
+
+/// Wraps a single [`Timeline`] as a one-entry collection.
+pub struct SingleTimeline<T: Timeline + Send> {
+    id: &'static str,
+    title: &'static str,
+    timeline: T,
+}
+
+pub fn single_timeline<T: Timeline + Send>(
+    id: &'static str,
+    title: &'static str,
+    timeline: T,
+) -> SingleTimeline<T> {
+    SingleTimeline {
+        id,
+        title,
+        timeline,
+    }
+}
+
+impl<T: Timeline + Send> TimelineCollection for SingleTimeline<T> {
+    fn timelines(&self) -> Vec<TimelineInfo> {
+        vec![TimelineInfo {
+            id: self.id.to_owned(),
+            title: self.title.to_owned(),
+            duration: self.timeline.duration(),
+        }]
+    }
+
+    fn build(
+        &self,
+        id: &str,
+        t: TimelineTime,
+        target: Resolution,
+        ctx: &mut dyn RenderContext,
+    ) -> Option<RasterImage> {
+        (id == self.id).then(|| self.timeline.build(t, target, ctx))
+    }
+}
+
+/// Exports a single timeline builder from a `cdylib`.
+///
+/// ```ignore
+/// fn build() -> impl tellur_core::timeline::Timeline { ... }
+/// tellur_live::export_timeline!("main", "Main", build);
+/// ```
+#[macro_export]
+macro_rules! export_timeline {
+    ($id:expr, $title:expr, $builder:path) => {
+        #[no_mangle]
+        pub extern "Rust" fn tellur_timeline_collection_v1(
+        ) -> ::std::boxed::Box<dyn $crate::TimelineCollection> {
+            ::std::boxed::Box::new($crate::single_timeline($id, $title, $builder()))
+        }
+    };
+}
+
+/// Exports a custom [`TimelineCollection`] builder from a `cdylib`.
+#[macro_export]
+macro_rules! export_timeline_collection {
+    ($builder:path) => {
+        #[no_mangle]
+        pub extern "Rust" fn tellur_timeline_collection_v1(
+        ) -> ::std::boxed::Box<dyn $crate::TimelineCollection> {
+            ::std::boxed::Box::new($builder())
+        }
+    };
+}
+
+#[derive(Debug)]
+pub enum PluginLoadError {
+    Io(std::io::Error),
+    InvalidPath(PathBuf),
+    Open { path: PathBuf, message: String },
+    Symbol { symbol: String, message: String },
+    MissingPlugin,
+}
+
+impl fmt::Display for PluginLoadError {
+    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
+        match self {
+            Self::Io(e) => write!(f, "{e}"),
+            Self::InvalidPath(path) => write!(f, "invalid plugin path: {}", path.display()),
+            Self::Open { path, message } => {
+                write!(f, "failed to open plugin {}: {message}", path.display())
+            }
+            Self::Symbol { symbol, message } => {
+                write!(f, "failed to load symbol {symbol}: {message}")
+            }
+            Self::MissingPlugin => write!(f, "plugin is not loaded"),
+        }
+    }
+}
+
+impl Error for PluginLoadError {
+    fn source(&self) -> Option<&(dyn Error + 'static)> {
+        match self {
+            Self::Io(e) => Some(e),
+            _ => None,
+        }
+    }
+}
+
+impl From<std::io::Error> for PluginLoadError {
+    fn from(value: std::io::Error) -> Self {
+        Self::Io(value)
+    }
+}
+
+#[derive(Clone, Copy, PartialEq, Eq)]
+struct SourceStamp {
+    modified: SystemTime,
+    len: u64,
+    hash: u64,
+}
+
+impl SourceStamp {
+    fn cache_key(self) -> String {
+        format!("{:016x}-{:x}", self.hash, self.len)
+    }
+
+    fn same_content(self, other: Self) -> bool {
+        self.len == other.len && self.hash == other.hash
+    }
+}
+
+struct LoadedPlugin {
+    stamp: SourceStamp,
+    cache_key: String,
+    staged_path: PathBuf,
+    collection: Box<dyn TimelineCollection>,
+    library: DynamicLibrary,
+}
+
+/// Maintains one loaded timeline plugin and reloads it when the source
+/// library changes on disk.
+pub struct HotReloadPlugin {
+    source_path: PathBuf,
+    loaded: Option<LoadedPlugin>,
+    retired_libraries: Vec<DynamicLibrary>,
+    last_error: Option<String>,
+}
+
+impl HotReloadPlugin {
+    pub fn new(source_path: impl Into<PathBuf>) -> Self {
+        Self {
+            source_path: source_path.into(),
+            loaded: None,
+            retired_libraries: Vec::new(),
+            last_error: None,
+        }
+    }
+
+    pub fn source_path(&self) -> &Path {
+        &self.source_path
+    }
+
+    pub fn staged_path(&self) -> Option<&Path> {
+        self.loaded
+            .as_ref()
+            .map(|loaded| loaded.staged_path.as_path())
+    }
+
+    pub fn cache_key(&self) -> Option<&str> {
+        self.loaded.as_ref().map(|loaded| loaded.cache_key.as_str())
+    }
+
+    pub fn last_error(&self) -> Option<&str> {
+        self.last_error.as_deref()
+    }
+
+    pub fn reload_if_changed(&mut self) -> Result<bool, PluginLoadError> {
+        let stamp = source_stamp(&self.source_path)?;
+        let changed = self
+            .loaded
+            .as_ref()
+            .map(|loaded| !loaded.stamp.same_content(stamp))
+            .unwrap_or(true);
+
+        if !changed {
+            return Ok(false);
+        }
+
+        match load_plugin(&self.source_path, stamp) {
+            Ok(next) => {
+                if let Some(previous) = self.loaded.replace(next) {
+                    drop(previous.collection);
+                    self.retired_libraries.push(previous.library);
+                }
+                self.last_error = None;
+                Ok(true)
+            }
+            Err(e) if self.loaded.is_some() => {
+                self.last_error = Some(e.to_string());
+                Ok(false)
+            }
+            Err(e) => Err(e),
+        }
+    }
+
+    pub fn collection(&self) -> Result<&dyn TimelineCollection, PluginLoadError> {
+        self.loaded
+            .as_ref()
+            .map(|loaded| loaded.collection.as_ref())
+            .ok_or(PluginLoadError::MissingPlugin)
+    }
+}
+
+fn source_stamp(path: &Path) -> Result<SourceStamp, PluginLoadError> {
+    let metadata = fs::metadata(path)?;
+    Ok(SourceStamp {
+        modified: metadata.modified()?,
+        len: metadata.len(),
+        hash: file_hash(path)?,
+    })
+}
+
+fn load_plugin(path: &Path, stamp: SourceStamp) -> Result<LoadedPlugin, PluginLoadError> {
+    let staged_path = stage_library(path, stamp)?;
+    let library = unsafe { DynamicLibrary::open(&staged_path)? };
+    let entry: EntryFn = unsafe { library.symbol(ENTRY_SYMBOL)? };
+    let collection = unsafe { entry() };
+    Ok(LoadedPlugin {
+        stamp,
+        cache_key: stamp.cache_key(),
+        staged_path,
+        collection,
+        library,
+    })
+}
+
+fn stage_library(path: &Path, stamp: SourceStamp) -> Result<PathBuf, PluginLoadError> {
+    let file_name = path
+        .file_name()
+        .and_then(|s| s.to_str())
+        .ok_or_else(|| PluginLoadError::InvalidPath(path.to_owned()))?;
+    let ext = path.extension().and_then(|s| s.to_str()).unwrap_or("so");
+    let stem = file_name
+        .strip_suffix(&format!(".{ext}"))
+        .unwrap_or(file_name);
+    let modified = stamp
+        .modified
+        .duration_since(UNIX_EPOCH)
+        .unwrap_or_default()
+        .as_nanos();
+    let dir = std::env::temp_dir().join("tellur-live");
+    fs::create_dir_all(&dir)?;
+    let staged = dir.join(format!(
+        "{stem}-{modified}-{}-{:016x}.{ext}",
+        stamp.len, stamp.hash
+    ));
+    fs::copy(path, &staged)?;
+    Ok(staged)
+}
+
+fn file_hash(path: &Path) -> Result<u64, PluginLoadError> {
+    let mut file = fs::File::open(path)?;
+    let mut hash = FNV_OFFSET;
+    let mut buf = [0u8; 64 * 1024];
+    loop {
+        let n = file.read(&mut buf)?;
+        if n == 0 {
+            break;
+        }
+        for byte in &buf[..n] {
+            hash ^= u64::from(*byte);
+            hash = hash.wrapping_mul(FNV_PRIME);
+        }
+    }
+    Ok(hash)
+}
+
+const FNV_OFFSET: u64 = 0xcbf29ce484222325;
+const FNV_PRIME: u64 = 0x100000001b3;
+
+struct DynamicLibrary {
+    handle: *mut c_void,
+}
+
+unsafe impl Send for DynamicLibrary {}
+
+impl DynamicLibrary {
+    unsafe fn open(path: &Path) -> Result<Self, PluginLoadError> {
+        let c_path = CString::new(path.as_os_str().to_string_lossy().as_bytes())
+            .map_err(|_| PluginLoadError::InvalidPath(path.to_owned()))?;
+        clear_dlerror();
+        let handle = dlopen(c_path.as_ptr(), RTLD_NOW | RTLD_LOCAL);
+        if handle.is_null() {
+            return Err(PluginLoadError::Open {
+                path: path.to_owned(),
+                message: dlerror_message(),
+            });
+        }
+        Ok(Self { handle })
+    }
+
+    unsafe fn symbol<T>(&self, symbol: &[u8]) -> Result<T, PluginLoadError> {
+        clear_dlerror();
+        let ptr = dlsym(self.handle, symbol.as_ptr().cast());
+        if ptr.is_null() {
+            return Err(PluginLoadError::Symbol {
+                symbol: String::from_utf8_lossy(symbol)
+                    .trim_end_matches('\0')
+                    .to_owned(),
+                message: dlerror_message(),
+            });
+        }
+        Ok(std::mem::transmute_copy::<*mut c_void, T>(&ptr))
+    }
+}
+
+impl Drop for DynamicLibrary {
+    fn drop(&mut self) {
+        unsafe {
+            dlclose(self.handle);
+        }
+    }
+}
+
+const RTLD_NOW: c_int = 2;
+const RTLD_LOCAL: c_int = 0;
+
+#[cfg(target_os = "linux")]
+#[link(name = "dl")]
+unsafe extern "C" {
+    fn dlopen(filename: *const c_char, flags: c_int) -> *mut c_void;
+    fn dlsym(handle: *mut c_void, symbol: *const c_char) -> *mut c_void;
+    fn dlclose(handle: *mut c_void) -> c_int;
+    fn dlerror() -> *const c_char;
+}
+
+#[cfg(not(target_os = "linux"))]
+unsafe extern "C" {
+    fn dlopen(filename: *const c_char, flags: c_int) -> *mut c_void;
+    fn dlsym(handle: *mut c_void, symbol: *const c_char) -> *mut c_void;
+    fn dlclose(handle: *mut c_void) -> c_int;
+    fn dlerror() -> *const c_char;
+}
+
+unsafe fn clear_dlerror() {
+    let _ = dlerror();
+}
+
+unsafe fn dlerror_message() -> String {
+    let err = dlerror();
+    if err.is_null() {
+        "unknown dynamic loader error".to_owned()
+    } else {
+        CStr::from_ptr(err).to_string_lossy().into_owned()
+    }
+}
diff --git a/tellur-live/src/server.rs b/tellur-live/src/server.rs
new file mode 100644
index 0000000..1d14e52
--- /dev/null
+++ b/tellur-live/src/server.rs
@@ -0,0 +1,1131 @@
+use std::collections::HashMap;
+use std::error::Error;
+use std::io::{Read, Write};
+use std::net::{TcpListener, TcpStream};
+use std::path::PathBuf;
+use std::process::{Command, Stdio};
+use std::sync::{
+    atomic::{AtomicBool, Ordering},
+    Arc, Mutex,
+};
+use std::thread;
+use std::time::{Duration, Instant};
+
+use tellur_core::raster::{PixelFormat, RasterImage, Resolution};
+use tellur_core::time::TimelineTime;
+use tellur_renderer::CachingRenderContext;
+
+use crate::build_watch::{
+    run_release_build_once, start_build_watcher, AutoBuildOptions, CompileSnapshot, CompileState,
+};
+use crate::plugin::{HotReloadPlugin, TimelineInfo};
+
+#[derive(Debug, Clone)]
+pub struct ServerOptions {
+    pub plugin_path: PathBuf,
+    pub bind: String,
+    pub resolution: Resolution,
+    pub fps: u32,
+    pub verbose: bool,
+    pub auto_build: Option<AutoBuildOptions>,
+}
+
+pub fn serve(options: ServerOptions) -> Result<(), Box<dyn Error>> {
+    let listener = TcpListener::bind(&options.bind)?;
+    let local_addr = listener.local_addr()?;
+    eprintln!("tellur live listening on http://{local_addr}");
+    eprintln!("plugin: {}", options.plugin_path.display());
+    if let Some(auto_build) = &options.auto_build {
+        eprintln!(
+            "auto build: cargo build --release{} --example {}",
+            auto_build
+                .package
+                .as_ref()
+                .map(|package| format!(" -p {package}"))
+                .unwrap_or_default(),
+            auto_build.example
+        );
+        if !options.plugin_path.is_file() {
+            eprintln!("plugin is missing; running initial release build");
+            run_release_build_once(auto_build).map_err(|e| -> Box<dyn Error> { e.into() })?;
+        }
+    }
+
+    let compile_state = options
+        .auto_build
+        .clone()
+        .map(start_build_watcher)
+        .unwrap_or_else(CompileState::compiled);
+
+    let app = Arc::new(Mutex::new(PreviewApp {
+        plugin: HotReloadPlugin::new(options.plugin_path),
+        ctx: CachingRenderContext::new(),
+        resolution: options.resolution,
+        fps: options.fps,
+        verbose: options.verbose,
+        compile_state,
+    }));
+    {
+        let mut app = app
+            .lock()
+            .map_err(|_| -> Box<dyn Error> { "preview app lock poisoned".into() })?;
+        app.reload_plugin_if_changed()?;
+    }
+
+    for stream in listener.incoming() {
+        match stream {
+            Ok(stream) => {
+                let app = Arc::clone(&app);
+                thread::spawn(move || {
+                    if let Err(e) = handle_connection(app, stream) {
+                        if !is_client_disconnect(e.as_ref()) {
+                            eprintln!("request failed: {e}");
+                        }
+                    }
+                });
+            }
+            Err(e) => eprintln!("accept failed: {e}"),
+        }
+    }
+    Ok(())
+}
+
+fn handle_connection(
+    app: Arc<Mutex<PreviewApp>>,
+    mut stream: TcpStream,
+) -> Result<(), Box<dyn Error>> {
+    let request = match read_request(&mut stream)? {
+        Some(request) => request,
+        None => return Ok(()),
+    };
+
+    if request.method != "GET" {
+        return write_response(
+            &mut stream,
+            405,
+            "Method Not Allowed",
+            "text/plain; charset=utf-8",
+            b"method not allowed",
+        );
+    }
+
+    let path = request.path.clone();
+    match path.as_str() {
+        "/api/video.mp4" | "/api/video" => handle_video_stream(app, stream, request.query),
+        "/api/events" => handle_event_stream(app, stream),
+        "/api/info" | "/api/frame" | "/api/stream" => {
+            let mut app = app
+                .lock()
+                .map_err(|_| -> Box<dyn Error> { "preview app lock poisoned".into() })?;
+            app.handle_api(stream, request)
+        }
+        other => serve_static(&mut stream, other),
+    }
+}
+
+fn handle_event_stream(
+    app: Arc<Mutex<PreviewApp>>,
+    mut stream: TcpStream,
+) -> Result<(), Box<dyn Error>> {
+    write!(
+        stream,
+        "HTTP/1.1 200 OK\r\n\
+         Content-Type: text/event-stream; charset=utf-8\r\n\
+         Cache-Control: no-store\r\n\
+         Connection: close\r\n\r\n"
+    )?;
+
+    let mut last_body = String::new();
+    loop {
+        let body = {
+            let mut app = app
+                .lock()
+                .map_err(|_| -> Box<dyn Error> { "preview app lock poisoned".into() })?;
+            app.info_body()?
+        };
+        if body != last_body {
+            write!(stream, "event: info\ndata: {body}\n\n")?;
+            stream.flush()?;
+            last_body = body;
+        }
+        thread::sleep(Duration::from_millis(250));
+    }
+}
+
+fn serve_static(stream: &mut TcpStream, path: &str) -> Result<(), Box<dyn Error>> {
+    let asset = match path {
+        "/" | "/index.html" => Some(StaticAsset {
+            body: WEB_INDEX_HTML,
+            mime: "text/html; charset=utf-8",
+        }),
+        "/assets/index.js" => Some(StaticAsset {
+            body: WEB_INDEX_JS,
+            mime: "application/javascript; charset=utf-8",
+        }),
+        "/assets/index.css" => Some(StaticAsset {
+            body: WEB_INDEX_CSS,
+            mime: "text/css; charset=utf-8",
+        }),
+        _ => None,
+    };
+    match asset {
+        Some(asset) => write_response(stream, 200, "OK", asset.mime, asset.body),
+        None => write_response(
+            stream,
+            404,
+            "Not Found",
+            "text/plain; charset=utf-8",
+            b"not found",
+        ),
+    }
+}
+
+struct StaticAsset {
+    body: &'static [u8],
+    mime: &'static str,
+}
+
+const WEB_INDEX_HTML: &[u8] = include_bytes!("../web/dist/index.html");
+const WEB_INDEX_JS: &[u8] = include_bytes!("../web/dist/assets/index.js");
+const WEB_INDEX_CSS: &[u8] = include_bytes!("../web/dist/assets/index.css");
+
+fn is_client_disconnect(error: &(dyn Error + 'static)) -> bool {
+    let mut current = Some(error);
+    while let Some(error) = current {
+        if let Some(io) = error.downcast_ref::<std::io::Error>() {
+            return matches!(
+                io.kind(),
+                std::io::ErrorKind::BrokenPipe
+                    | std::io::ErrorKind::ConnectionReset
+                    | std::io::ErrorKind::ConnectionAborted
+            );
+        }
+        current = error.source();
+    }
+    false
+}
+
+struct PreviewApp {
+    plugin: HotReloadPlugin,
+    ctx: CachingRenderContext,
+    resolution: Resolution,
+    fps: u32,
+    verbose: bool,
+    compile_state: CompileState,
+}
+
+impl PreviewApp {
+    fn reload_plugin_if_changed(&mut self) -> Result<bool, Box<dyn Error>> {
+        let changed = self.plugin.reload_if_changed()?;
+        if changed {
+            self.ctx.clear();
+            self.ctx.clear_metrics();
+        }
+        Ok(changed)
+    }
+
+    fn is_media_cacheable(&self, query: &HashMap<String, String>) -> bool {
+        matches!(
+            (query.get("v").map(String::as_str), self.plugin.cache_key()),
+            (Some(requested), Some(current)) if requested == current
+        )
+    }
+
+    fn media_cache_control(&self, query: &HashMap<String, String>) -> &'static str {
+        if self.is_media_cacheable(query) {
+            "public, max-age=31536000, immutable"
+        } else {
+            "no-store"
+        }
+    }
+
+    fn handle_api(&mut self, stream: TcpStream, request: Request) -> Result<(), Box<dyn Error>> {
+        match request.path.as_str() {
+            "/api/info" => self.handle_info(stream),
+            "/api/frame" => self.handle_frame(stream, &request.query),
+            "/api/stream" => self.handle_stream(stream, &request.query),
+            _ => unreachable!("non-api routes are handled before acquiring the preview lock"),
+        }
+    }
+
+    fn handle_info(&mut self, mut stream: TcpStream) -> Result<(), Box<dyn Error>> {
+        let body = self.info_body()?;
+        write_response(
+            &mut stream,
+            200,
+            "OK",
+            "application/json; charset=utf-8",
+            body.as_bytes(),
+        )
+    }
+
+    fn info_body(&mut self) -> Result<String, Box<dyn Error>> {
+        self.reload_plugin_if_changed()?;
+        let timelines = self.plugin.collection()?.timelines();
+        let compile = self.compile_state.snapshot();
+        Ok(info_json(
+            self.resolution,
+            self.fps,
+            &timelines,
+            self.plugin.last_error(),
+            self.plugin.cache_key().unwrap_or(""),
+            &compile,
+        ))
+    }
+
+    fn handle_frame(
+        &mut self,
+        mut stream: TcpStream,
+        query: &HashMap<String, String>,
+    ) -> Result<(), Box<dyn Error>> {
+        match FrameFormat::from_query(query) {
+            FrameFormat::Png => {
+                let rendered = self.render_png(query)?;
+                if self.verbose {
+                    log_frame_stats(&rendered.stats);
+                }
+                let headers = rendered.stats.headers();
+                write_response_with_headers_and_cache_control(
+                    &mut stream,
+                    200,
+                    "OK",
+                    "image/png",
+                    &headers,
+                    &rendered.body,
+                    self.media_cache_control(query),
+                )
+            }
+            FrameFormat::Rgba => {
+                let rendered = self.render_rgba(query)?;
+                if self.verbose {
+                    log_frame_stats(&rendered.stats);
+                }
+                let headers = rendered.stats.headers();
+                write_response_with_headers_and_cache_control(
+                    &mut stream,
+                    200,
+                    "OK",
+                    "application/vnd.tellur.rgba",
+                    &headers,
+                    &rendered.body,
+                    self.media_cache_control(query),
+                )
+            }
+        }
+    }
+
+    fn handle_stream(
+        &mut self,
+        stream: TcpStream,
+        query: &HashMap<String, String>,
+    ) -> Result<(), Box<dyn Error>> {
+        match FrameFormat::from_query(query) {
+            FrameFormat::Png => self.handle_png_stream(stream, query),
+            FrameFormat::Rgba => self.handle_rgba_stream(stream, query),
+        }
+    }
+
+    fn handle_png_stream(
+        &mut self,
+        mut stream: TcpStream,
+        query: &HashMap<String, String>,
+    ) -> Result<(), Box<dyn Error>> {
+        let fps = request_fps(query, self.fps.max(1));
+        let resolution = request_resolution(query, self.resolution);
+        let timeline_id = query.get("timeline").cloned();
+        let mut seconds = query
+            .get("time")
+            .and_then(|v| v.parse::<f32>().ok())
+            .unwrap_or(0.0);
+
+        write!(
+            stream,
+            "HTTP/1.1 200 OK\r\n\
+             Content-Type: multipart/x-mixed-replace; boundary=tellur-frame\r\n\
+             Cache-Control: no-store\r\n\
+             Connection: close\r\n\r\n"
+        )?;
+
+        let frame_step = 1.0 / fps as f32;
+        let frame_duration = Duration::from_secs_f32(frame_step);
+        loop {
+            let frame_start = Instant::now();
+            let mut q = HashMap::new();
+            q.insert("time".to_owned(), seconds.to_string());
+            q.insert("width".to_owned(), resolution.width.to_string());
+            q.insert("height".to_owned(), resolution.height.to_string());
+            if let Some(id) = &timeline_id {
+                q.insert("timeline".to_owned(), id.clone());
+            }
+            let rendered = self.render_png(&q)?;
+            if self.verbose {
+                log_frame_stats(&rendered.stats);
+            }
+            write!(
+                stream,
+                "--tellur-frame\r\n\
+                 Content-Type: image/png\r\n\
+                 Content-Length: {}\r\n\r\n",
+                rendered.body.len()
+            )?;
+            stream.write_all(&rendered.body)?;
+            stream.write_all(b"\r\n")?;
+            stream.flush()?;
+            seconds += frame_step;
+            sleep_remainder(frame_duration, frame_start.elapsed());
+        }
+    }
+
+    fn handle_rgba_stream(
+        &mut self,
+        mut stream: TcpStream,
+        query: &HashMap<String, String>,
+    ) -> Result<(), Box<dyn Error>> {
+        let fps = request_fps(query, self.fps.max(1));
+        let resolution = request_resolution(query, self.resolution);
+        let timeline_id = query.get("timeline").cloned();
+        let mut seconds = query
+            .get("time")
+            .and_then(|v| v.parse::<f32>().ok())
+            .unwrap_or(0.0);
+        let frame_bytes = (resolution.width as usize) * (resolution.height as usize) * 4;
+
+        write!(
+            stream,
+            "HTTP/1.1 200 OK\r\n\
+             Content-Type: application/vnd.tellur.rgba-stream\r\n\
+             X-Tellur-Width: {}\r\n\
+             X-Tellur-Height: {}\r\n\
+             X-Tellur-Fps: {}\r\n\
+             X-Tellur-Frame-Bytes: {}\r\n\
+             Cache-Control: no-store\r\n\
+             Connection: close\r\n\r\n",
+            resolution.width, resolution.height, fps, frame_bytes,
+        )?;
+
+        let frame_step = 1.0 / fps as f32;
+        let frame_duration = Duration::from_secs_f32(frame_step);
+        loop {
+            let frame_start = Instant::now();
+            let mut q = HashMap::new();
+            q.insert("time".to_owned(), seconds.to_string());
+            q.insert("format".to_owned(), "rgba".to_owned());
+            q.insert("width".to_owned(), resolution.width.to_string());
+            q.insert("height".to_owned(), resolution.height.to_string());
+            if let Some(id) = &timeline_id {
+                q.insert("timeline".to_owned(), id.clone());
+            }
+            let rendered = self.render_rgba(&q)?;
+            if self.verbose {
+                log_frame_stats(&rendered.stats);
+            }
+            stream.write_all(&rendered.body)?;
+            stream.flush()?;
+            seconds += frame_step;
+            sleep_remainder(frame_duration, frame_start.elapsed());
+        }
+    }
+
+    fn render_video_rgba(
+        &mut self,
+        timeline_id: &str,
+        seconds: f32,
+        resolution: Resolution,
+    ) -> Result<VideoFrame, Box<dyn Error>> {
+        let before = self.ctx.metrics();
+        let render_start = Instant::now();
+        let image = self
+            .plugin
+            .collection()?
+            .build(
+                timeline_id,
+                TimelineTime::new(seconds),
+                resolution,
+                &mut self.ctx,
+            )
+            .ok_or("timeline did not produce a frame")?;
+        let render_time = render_start.elapsed();
+        if image.format != PixelFormat::Rgba8 {
+            return Err(format!("h264 stream requires Rgba8, got {:?}", image.format).into());
+        }
+        let after = self.ctx.metrics();
+
+        Ok(VideoFrame {
+            image,
+            render_time,
+            cache_hits: after.hits.saturating_sub(before.hits),
+            cache_misses: after.misses.saturating_sub(before.misses),
+            bytes_cached: after.bytes_cached,
+        })
+    }
+
+    fn render_png(
+        &mut self,
+        query: &HashMap<String, String>,
+    ) -> Result<RenderedFrame, Box<dyn Error>> {
+        let rendered = self.render_image(query)?;
+
+        let encode_start = Instant::now();
+        let mut body = Vec::new();
+        rendered.image.export_png(&mut body)?;
+        let encode_time = encode_start.elapsed();
+
+        let mut stats = rendered.stats;
+        stats.output_format = FrameFormat::Png;
+        stats.encode_time = encode_time;
+        stats.total_time = rendered.total_start.elapsed();
+        stats.output_bytes = body.len();
+
+        Ok(RenderedFrame { body, stats })
+    }
+
+    fn render_rgba(
+        &mut self,
+        query: &HashMap<String, String>,
+    ) -> Result<RenderedFrame, Box<dyn Error>> {
+        let rendered = self.render_image(query)?;
+        if rendered.image.format != PixelFormat::Rgba8 {
+            return Err(format!(
+                "raw rgba output requires Rgba8, got {:?}",
+                rendered.image.format
+            )
+            .into());
+        }
+
+        let encode_start = Instant::now();
+        let body = rendered.image.pixels.as_ref().to_vec();
+        let encode_time = encode_start.elapsed();
+        let mut stats = rendered.stats;
+        stats.output_format = FrameFormat::Rgba;
+        stats.encode_time = encode_time;
+        stats.total_time = rendered.total_start.elapsed();
+        stats.output_bytes = body.len();
+
+        Ok(RenderedFrame { body, stats })
+    }
+
+    fn render_image(
+        &mut self,
+        query: &HashMap<String, String>,
+    ) -> Result<RenderedImage, Box<dyn Error>> {
+        let total_start = Instant::now();
+        self.reload_plugin_if_changed()?;
+        let timelines = self.plugin.collection()?.timelines();
+        let Some(info) = select_timeline(&timelines, query.get("timeline")) else {
+            return Err("timeline not found".into());
+        };
+        let seconds = query
+            .get("frame")
+            .and_then(|v| v.parse::<u64>().ok())
+            .map(|frame| frame as f32 / request_fps(query, self.fps.max(1)) as f32)
+            .or_else(|| query.get("time").and_then(|v| v.parse::<f32>().ok()))
+            .unwrap_or(0.0)
+            .clamp(0.0, info.duration.max(0.0));
+        let resolution = request_resolution(query, self.resolution);
+
+        let before = self.ctx.metrics();
+        let render_start = Instant::now();
+        let image = self
+            .plugin
+            .collection()?
+            .build(
+                &info.id,
+                TimelineTime::new(seconds),
+                resolution,
+                &mut self.ctx,
+            )
+            .ok_or("timeline did not produce a frame")?;
+        let render_time = render_start.elapsed();
+        let after = self.ctx.metrics();
+
+        Ok(RenderedImage {
+            image,
+            stats: FrameRenderStats {
+                timeline_id: info.id.clone(),
+                seconds,
+                resolution,
+                render_time,
+                encode_time: Duration::ZERO,
+                total_time: render_time,
+                output_format: FrameFormat::Rgba,
+                output_bytes: 0,
+                cache_hits: after.hits.saturating_sub(before.hits),
+                cache_misses: after.misses.saturating_sub(before.misses),
+                bytes_cached: after.bytes_cached,
+            },
+            total_start,
+        })
+    }
+}
+
+struct VideoStreamSetup {
+    timeline_id: String,
+    duration: f32,
+    fps: u32,
+    resolution: Resolution,
+    gop: u32,
+    crf: u8,
+    start_seconds: f32,
+    cache_control: &'static str,
+    realtime: bool,
+}
+
+struct VideoFrame {
+    image: RasterImage,
+    render_time: Duration,
+    cache_hits: u64,
+    cache_misses: u64,
+    bytes_cached: usize,
+}
+
+fn handle_video_stream(
+    app: Arc<Mutex<PreviewApp>>,
+    mut stream: TcpStream,
+    query: HashMap<String, String>,
+) -> Result<(), Box<dyn Error>> {
+    let setup = {
+        let mut app = app
+            .lock()
+            .map_err(|_| -> Box<dyn Error> { "preview app lock poisoned".into() })?;
+        app.reload_plugin_if_changed()?;
+        let timelines = app.plugin.collection()?.timelines();
+        let Some(info) = select_timeline(&timelines, query.get("timeline")) else {
+            return Err("timeline not found".into());
+        };
+
+        let fps = request_fps(&query, app.fps.max(1));
+        let resolution = request_resolution(&query, app.resolution);
+        let gop = query
+            .get("gop")
+            .and_then(|v| v.parse::<u32>().ok())
+            .filter(|gop| *gop > 0)
+            .unwrap_or((fps / 4).max(1));
+        let crf = query
+            .get("crf")
+            .and_then(|v| v.parse::<u8>().ok())
+            .unwrap_or(23);
+        let start_seconds = query
+            .get("time")
+            .and_then(|v| v.parse::<f32>().ok())
+            .unwrap_or(0.0)
+            .clamp(0.0, info.duration.max(0.0));
+        let remaining = (info.duration - start_seconds).max(0.0);
+        let duration = query
+            .get("duration")
+            .and_then(|v| v.parse::<f32>().ok())
+            .filter(|v| v.is_finite() && *v > 0.0)
+            .map(|v| v.min(remaining))
+            .unwrap_or(remaining);
+
+        let cacheable = app.is_media_cacheable(&query);
+        VideoStreamSetup {
+            timeline_id: info.id.clone(),
+            duration,
+            fps,
+            resolution,
+            gop,
+            crf,
+            start_seconds,
+            cache_control: if cacheable {
+                "public, max-age=31536000, immutable"
+            } else {
+                "no-store"
+            },
+            realtime: !cacheable,
+        }
+    };
+
+    write!(
+        stream,
+        "HTTP/1.1 200 OK\r\n\
+         Content-Type: video/mp4\r\n\
+         X-Tellur-Width: {}\r\n\
+         X-Tellur-Height: {}\r\n\
+         X-Tellur-Fps: {}\r\n\
+         X-Tellur-Gop: {}\r\n\
+         Cache-Control: {}\r\n\
+         Connection: close\r\n\r\n",
+        setup.resolution.width, setup.resolution.height, setup.fps, setup.gop, setup.cache_control,
+    )?;
+
+    let mut child = Command::new("ffmpeg")
+        .arg("-hide_banner")
+        .arg("-loglevel")
+        .arg("error")
+        .args(["-f", "rawvideo"])
+        .args(["-pix_fmt", "rgba"])
+        .args([
+            "-s",
+            &format!("{}x{}", setup.resolution.width, setup.resolution.height),
+        ])
+        .args(["-r", &setup.fps.to_string()])
+        .args(["-i", "-"])
+        .arg("-an")
+        .args(["-c:v", "libx264"])
+        .args(["-preset", "ultrafast"])
+        .args(["-tune", "zerolatency"])
+        .args(["-pix_fmt", "yuv420p"])
+        .args(["-g", &setup.gop.to_string()])
+        .args(["-keyint_min", &setup.gop.to_string()])
+        .args(["-sc_threshold", "0"])
+        .args(["-bf", "0"])
+        .args(["-refs", "1"])
+        .args(["-flags", "low_delay"])
+        .args(["-crf", &setup.crf.to_string()])
+        .args(["-muxdelay", "0"])
+        .args(["-muxpreload", "0"])
+        .args(["-flush_packets", "1"])
+        .args(["-f", "mp4"])
+        .args([
+            "-movflags",
+            "frag_keyframe+frag_every_frame+empty_moov+default_base_moof",
+        ])
+        .arg("pipe:1")
+        .stdin(Stdio::piped())
+        .stdout(Stdio::piped())
+        .stderr(Stdio::piped())
+        .spawn()?;
+
+    let mut stdin = child.stdin.take().ok_or("ffmpeg stdin was not piped")?;
+    let mut stdout = child.stdout.take().ok_or("ffmpeg stdout was not piped")?;
+    let mut stderr = child.stderr.take().ok_or("ffmpeg stderr was not piped")?;
+    let mut stream_out = stream.try_clone()?;
+    let client_alive = Arc::new(AtomicBool::new(true));
+    let client_alive_for_stdout = Arc::clone(&client_alive);
+
+    let stdout_thread = thread::spawn(move || {
+        let mut buf = [0u8; 64 * 1024];
+        loop {
+            let n = match stdout.read(&mut buf) {
+                Ok(0) => break,
+                Ok(n) => n,
+                Err(_) => {
+                    client_alive_for_stdout.store(false, Ordering::Relaxed);
+                    break;
+                }
+            };
+            if stream_out.write_all(&buf[..n]).is_err() {
+                client_alive_for_stdout.store(false, Ordering::Relaxed);
+                break;
+            }
+        }
+    });
+
+    let stderr_thread = thread::spawn(move || {
+        let mut text = String::new();
+        let _ = stderr.read_to_string(&mut text);
+        text
+    });
+
+    let frame_step = 1.0 / setup.fps as f32;
+    let frame_duration = Duration::from_secs_f32(frame_step);
+    let total_frames = (setup.duration * setup.fps as f32).ceil() as u64;
+
+    for frame in 0..total_frames {
+        if !client_alive.load(Ordering::Relaxed) {
+            break;
+        }
+
+        let frame_start = Instant::now();
+        let seconds = setup.start_seconds + frame as f32 * frame_step;
+        let image = {
+            let mut app = app
+                .lock()
+                .map_err(|_| -> Box<dyn Error> { "preview app lock poisoned".into() })?;
+            let frame = app.render_video_rgba(&setup.timeline_id, seconds, setup.resolution)?;
+            if app.verbose {
+                println!(
+                    "video timeline={} t={:.3}s size={}x{} fps={} gop={} render={:.2}ms bytes={} cache_delta={}h/{}m cache_size={}",
+                    setup.timeline_id,
+                    seconds,
+                    setup.resolution.width,
+                    setup.resolution.height,
+                    setup.fps,
+                    setup.gop,
+                    ms(frame.render_time),
+                    frame.image.pixels.len(),
+                    frame.cache_hits,
+                    frame.cache_misses,
+                    format_bytes(frame.bytes_cached as u64),
+                );
+            }
+            frame.image
+        };
+
+        if stdin.write_all(&image.pixels).is_err() {
+            client_alive.store(false, Ordering::Relaxed);
+            break;
+        }
+        if setup.realtime {
+            sleep_remainder(frame_duration, frame_start.elapsed());
+        }
+    }
+
+    drop(stdin);
+    if !client_alive.load(Ordering::Relaxed) {
+        let _ = child.kill();
+    }
+    let _ = stdout_thread.join();
+    let stderr_text = stderr_thread.join().unwrap_or_default();
+    let status = child.wait()?;
+    if !status.success() && client_alive.load(Ordering::Relaxed) {
+        return Err(format!("ffmpeg exited with {status}: {stderr_text}").into());
+    }
+
+    Ok(())
+}
+
+struct RenderedFrame {
+    body: Vec<u8>,
+    stats: FrameRenderStats,
+}
+
+struct RenderedImage {
+    image: RasterImage,
+    stats: FrameRenderStats,
+    total_start: Instant,
+}
+
+struct FrameRenderStats {
+    timeline_id: String,
+    seconds: f32,
+    resolution: Resolution,
+    render_time: Duration,
+    encode_time: Duration,
+    total_time: Duration,
+    output_format: FrameFormat,
+    output_bytes: usize,
+    cache_hits: u64,
+    cache_misses: u64,
+    bytes_cached: usize,
+}
+
+impl FrameRenderStats {
+    fn headers(&self) -> Vec<(&'static str, String)> {
+        vec![
+            ("X-Tellur-Render-Ms", format!("{:.2}", ms(self.render_time))),
+            ("X-Tellur-Encode-Ms", format!("{:.2}", ms(self.encode_time))),
+            ("X-Tellur-Total-Ms", format!("{:.2}", ms(self.total_time))),
+            (
+                "X-Tellur-Output-Format",
+                self.output_format.as_str().to_owned(),
+            ),
+            ("X-Tellur-Output-Bytes", self.output_bytes.to_string()),
+            ("X-Tellur-Width", self.resolution.width.to_string()),
+            ("X-Tellur-Height", self.resolution.height.to_string()),
+            ("X-Tellur-Cache-Hits", self.cache_hits.to_string()),
+            ("X-Tellur-Cache-Misses", self.cache_misses.to_string()),
+        ]
+    }
+}
+
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+enum FrameFormat {
+    Png,
+    Rgba,
+}
+
+impl FrameFormat {
+    fn from_query(query: &HashMap<String, String>) -> Self {
+        match query.get("format").map(String::as_str) {
+            Some("rgba") | Some("raw") => Self::Rgba,
+            _ => Self::Png,
+        }
+    }
+
+    fn as_str(self) -> &'static str {
+        match self {
+            Self::Png => "png",
+            Self::Rgba => "rgba",
+        }
+    }
+}
+
+fn log_frame_stats(stats: &FrameRenderStats) {
+    println!(
+        "frame timeline={} t={:.3}s size={}x{} format={} render={:.2}ms encode={:.2}ms total={:.2}ms bytes={} cache_delta={}h/{}m cache_size={}",
+        stats.timeline_id,
+        stats.seconds,
+        stats.resolution.width,
+        stats.resolution.height,
+        stats.output_format.as_str(),
+        ms(stats.render_time),
+        ms(stats.encode_time),
+        ms(stats.total_time),
+        stats.output_bytes,
+        stats.cache_hits,
+        stats.cache_misses,
+        format_bytes(stats.bytes_cached as u64),
+    );
+}
+
+fn ms(d: Duration) -> f64 {
+    d.as_secs_f64() * 1000.0
+}
+
+fn sleep_remainder(frame_duration: Duration, elapsed: Duration) {
+    if let Some(remaining) = frame_duration.checked_sub(elapsed) {
+        thread::sleep(remaining);
+    }
+}
+
+fn select_timeline<'a>(
+    timelines: &'a [TimelineInfo],
+    requested: Option<&String>,
+) -> Option<&'a TimelineInfo> {
+    requested
+        .and_then(|id| timelines.iter().find(|info| &info.id == id))
+        .or_else(|| timelines.first())
+}
+
+fn request_fps(query: &HashMap<String, String>, default_fps: u32) -> u32 {
+    query
+        .get("fps")
+        .and_then(|v| v.parse::<u32>().ok())
+        .filter(|fps| *fps > 0)
+        .unwrap_or(default_fps.max(1))
+}
+
+fn request_resolution(query: &HashMap<String, String>, default: Resolution) -> Resolution {
+    if let (Some(width), Some(height)) = (
+        query
+            .get("width")
+            .and_then(|v| v.parse::<u32>().ok())
+            .filter(|v| *v > 0),
+        query
+            .get("height")
+            .and_then(|v| v.parse::<u32>().ok())
+            .filter(|v| *v > 0),
+    ) {
+        return Resolution::new(width, height);
+    }
+
+    let Some(scale) = query
+        .get("scale")
+        .and_then(|v| v.parse::<f32>().ok())
+        .filter(|v| v.is_finite() && *v > 0.0)
+    else {
+        return default;
+    };
+
+    Resolution::new(
+        scaled_dimension(default.width, scale),
+        scaled_dimension(default.height, scale),
+    )
+}
+
+fn scaled_dimension(value: u32, scale: f32) -> u32 {
+    ((value as f32) * scale).round().clamp(1.0, u32::MAX as f32) as u32
+}
+
+struct Request {
+    method: String,
+    path: String,
+    query: HashMap<String, String>,
+}
+
+fn read_request(stream: &mut TcpStream) -> Result<Option<Request>, Box<dyn Error>> {
+    let mut buf = Vec::with_capacity(8192);
+    let mut chunk = [0u8; 1024];
+    loop {
+        let n = stream.read(&mut chunk)?;
+        if n == 0 {
+            if buf.is_empty() {
+                return Ok(None);
+            }
+            break;
+        }
+        buf.extend_from_slice(&chunk[..n]);
+        if buf.windows(4).any(|w| w == b"\r\n\r\n") || buf.len() > 64 * 1024 {
+            break;
+        }
+    }
+
+    let request = String::from_utf8_lossy(&buf);
+    let first_line = request.lines().next().ok_or("empty request")?;
+    let mut parts = first_line.split_whitespace();
+    let method = parts.next().ok_or("missing method")?.to_owned();
+    let target = parts.next().ok_or("missing request target")?;
+    let (path, query) = split_target(target);
+    Ok(Some(Request {
+        method,
+        path,
+        query,
+    }))
+}
+
+fn split_target(target: &str) -> (String, HashMap<String, String>) {
+    let (path, query) = target.split_once('?').unwrap_or((target, ""));
+    let mut params = HashMap::new();
+    for pair in query.split('&').filter(|s| !s.is_empty()) {
+        let (k, v) = pair.split_once('=').unwrap_or((pair, ""));
+        params.insert(percent_decode(k), percent_decode(v));
+    }
+    (path.to_owned(), params)
+}
+
+fn percent_decode(s: &str) -> String {
+    let bytes = s.as_bytes();
+    let mut out = Vec::with_capacity(bytes.len());
+    let mut i = 0;
+    while i < bytes.len() {
+        match bytes[i] {
+            b'+' => {
+                out.push(b' ');
+                i += 1;
+            }
+            b'%' if i + 2 < bytes.len() => {
+                if let Ok(hex) = std::str::from_utf8(&bytes[i + 1..i + 3]) {
+                    if let Ok(v) = u8::from_str_radix(hex, 16) {
+                        out.push(v);
+                        i += 3;
+                        continue;
+                    }
+                }
+                out.push(bytes[i]);
+                i += 1;
+            }
+            b => {
+                out.push(b);
+                i += 1;
+            }
+        }
+    }
+    String::from_utf8_lossy(&out).into_owned()
+}
+
+fn write_response(
+    stream: &mut TcpStream,
+    status: u16,
+    reason: &str,
+    content_type: &str,
+    body: &[u8],
+) -> Result<(), Box<dyn Error>> {
+    write_response_with_headers(stream, status, reason, content_type, &[], body)
+}
+
+fn write_response_with_headers(
+    stream: &mut TcpStream,
+    status: u16,
+    reason: &str,
+    content_type: &str,
+    extra_headers: &[(&str, String)],
+    body: &[u8],
+) -> Result<(), Box<dyn Error>> {
+    write_response_with_headers_and_cache_control(
+        stream,
+        status,
+        reason,
+        content_type,
+        extra_headers,
+        body,
+        "no-store",
+    )
+}
+
+fn write_response_with_headers_and_cache_control(
+    stream: &mut TcpStream,
+    status: u16,
+    reason: &str,
+    content_type: &str,
+    extra_headers: &[(&str, String)],
+    body: &[u8],
+    cache_control: &str,
+) -> Result<(), Box<dyn Error>> {
+    write!(
+        stream,
+        "HTTP/1.1 {status} {reason}\r\n\
+         Content-Type: {content_type}\r\n\
+         Content-Length: {}\r\n\
+         Cache-Control: {cache_control}\r\n\
+         Connection: close\r\n",
+        body.len()
+    )?;
+    for (name, value) in extra_headers {
+        write!(stream, "{name}: {value}\r\n")?;
+    }
+    stream.write_all(b"\r\n")?;
+    stream.write_all(body)?;
+    Ok(())
+}
+
+fn format_bytes(b: u64) -> String {
+    const KIB: f64 = 1024.0;
+    const MIB: f64 = KIB * 1024.0;
+    const GIB: f64 = MIB * 1024.0;
+    let bf = b as f64;
+    if bf >= GIB {
+        format!("{:.2} GiB", bf / GIB)
+    } else if bf >= MIB {
+        format!("{:.2} MiB", bf / MIB)
+    } else if bf >= KIB {
+        format!("{:.2} KiB", bf / KIB)
+    } else {
+        format!("{b} B")
+    }
+}
+
+fn info_json(
+    resolution: Resolution,
+    fps: u32,
+    timelines: &[TimelineInfo],
+    last_error: Option<&str>,
+    cache_key: &str,
+    compile: &CompileSnapshot,
+) -> String {
+    let timelines_json = timelines
+        .iter()
+        .map(|info| {
+            format!(
+                "{{\"id\":\"{}\",\"title\":\"{}\",\"duration\":{}}}",
+                json_escape(&info.id),
+                json_escape(&info.title),
+                finite_json_number(info.duration),
+            )
+        })
+        .collect::<Vec<_>>()
+        .join(",");
+    let last_error = match last_error {
+        Some(e) => format!("\"{}\"", json_escape(e)),
+        None => "null".to_owned(),
+    };
+    let compile_error = match compile.last_error.as_deref() {
+        Some(e) => format!("\"{}\"", json_escape(e)),
+        None => "null".to_owned(),
+    };
+    format!(
+        "{{\"width\":{},\"height\":{},\"fps\":{},\"lastError\":{},\"cacheKey\":\"{}\",\"compileStatus\":\"{}\",\"compileError\":{},\"timelines\":[{}]}}",
+        resolution.width,
+        resolution.height,
+        fps,
+        last_error,
+        json_escape(cache_key),
+        compile.status.as_str(),
+        compile_error,
+        timelines_json
+    )
+}
+
+fn finite_json_number(v: f32) -> String {
+    if v.is_finite() {
+        v.to_string()
+    } else {
+        "0".to_owned()
+    }
+}
+
+fn json_escape(s: &str) -> String {
+    let mut out = String::with_capacity(s.len());
+    for ch in s.chars() {
+        match ch {
+            '"' => out.push_str("\\\""),
+            '\\' => out.push_str("\\\\"),
+            '\n' => out.push_str("\\n"),
+            '\r' => out.push_str("\\r"),
+            '\t' => out.push_str("\\t"),
+            ch if ch.is_control() => out.push_str(&format!("\\u{:04x}", ch as u32)),
+            ch => out.push(ch),
+        }
+    }
+    out
+}
diff --git a/tellur-live/web/.gitignore b/tellur-live/web/.gitignore
new file mode 100644
index 0000000..be79465
--- /dev/null
+++ b/tellur-live/web/.gitignore
@@ -0,0 +1,4 @@
+node_modules
+dist
+*.log
+*.tsbuildinfo
diff --git a/tellur-live/web/index.html b/tellur-live/web/index.html
new file mode 100644
index 0000000..c966355
--- /dev/null
+++ b/tellur-live/web/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Tellur</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/tellur-live/web/package-lock.json b/tellur-live/web/package-lock.json
new file mode 100644
index 0000000..78a9f93
--- /dev/null
+++ b/tellur-live/web/package-lock.json
@@ -0,0 +1,1865 @@
+{
+  "name": "tellur-live-web",
+  "version": "0.1.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "tellur-live-web",
+      "version": "0.1.0",
+      "dependencies": {
+        "lucide-react": "^1.16.0",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1"
+      },
+      "devDependencies": {
+        "@types/react": "^18.3.12",
+        "@types/react-dom": "^18.3.1",
+        "@vitejs/plugin-react": "^4.3.4",
+        "typescript": "^5.7.2",
+        "vite": "^6.0.7"
+      }
+    },
+    "node_modules/@babel/code-frame": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.7.tgz",
+      "integrity": "sha512-Aup7aUOfpbAUg2ROOJN6Iw5f9DMBlzu0mIkm/malLQFN/YQgO48wCj0Kxa3sEHJvPVFg7siR+qRInwXd2qhQKw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.29.7",
+        "js-tokens": "^4.0.0",
+        "picocolors": "^1.1.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/compat-data": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.29.7.tgz",
+      "integrity": "sha512-locTkQyKvwIEgBzVrn8693ebc97F2U8ZHjbXwDXJ5Fn2TCpNwTlKcaKLkdHop5c/icOFE7qt7Q9JC5hnKNa6Gg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/core": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.29.7.tgz",
+      "integrity": "sha512-RgHBCvtjbOK2gXSNBNIkNoEc9qoVEtau3hj8gEqKQuL3HZAibKarWFEI3Lfm6EYKkLalOh8eSrj9b+ch9H/VBA==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.29.7",
+        "@babel/generator": "^7.29.7",
+        "@babel/helper-compilation-targets": "^7.29.7",
+        "@babel/helper-module-transforms": "^7.29.7",
+        "@babel/helpers": "^7.29.7",
+        "@babel/parser": "^7.29.7",
+        "@babel/template": "^7.29.7",
+        "@babel/traverse": "^7.29.7",
+        "@babel/types": "^7.29.7",
+        "@jridgewell/remapping": "^2.3.5",
+        "convert-source-map": "^2.0.0",
+        "debug": "^4.1.0",
+        "gensync": "^1.0.0-beta.2",
+        "json5": "^2.2.3",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/babel"
+      }
+    },
+    "node_modules/@babel/generator": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.29.7.tgz",
+      "integrity": "sha512-DkXD5OJQaAQIdZ1bt3UZdEnHAn9Imd3IVBdX03UFe+ony9Ojw5pzr9YVKGDY1jt+Gcn/FnGkNf8r+Vj5NOJWtQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.29.7",
+        "@babel/types": "^7.29.7",
+        "@jridgewell/gen-mapping": "^0.3.12",
+        "@jridgewell/trace-mapping": "^0.3.28",
+        "jsesc": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.29.7.tgz",
+      "integrity": "sha512-wem6WaBj4NaVYVdNhLPPVacES6ZJ+KBBfSkTMD3YZxbP3rm3Di85tJU5ljaUNhaOynt+Aj0xruhYuzQBt8n71g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/compat-data": "^7.29.7",
+        "@babel/helper-validator-option": "^7.29.7",
+        "browserslist": "^4.24.0",
+        "lru-cache": "^5.1.1",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-globals": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.29.7.tgz",
+      "integrity": "sha512-3nQVUAtvkKH9zahfWgw96Jc/uFOmjACE1kQz82E2lqWmHBgjzbNlsC22nuQTfahmWeQtTq5nQ/4Nnd2A1wj4zA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-imports": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.29.7.tgz",
+      "integrity": "sha512-ejHwrQQYcm9xnTivShn2IDOlIzInN34AXskvq9QicvCtEzq1Vzclu/tKF8Jq1Cg8JG2GL6/EmjgsCT7lXepE3g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/traverse": "^7.29.7",
+        "@babel/types": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-transforms": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.29.7.tgz",
+      "integrity": "sha512-UPUVSyXbOh627KiCIGQSgwWzGeBKLkaJ9PJEdrngIwMSzxLR4jS4+f1f1jb7VzBbg8nFLaYotvVPFCTqdrmTAg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.29.7",
+        "@babel/helper-validator-identifier": "^7.29.7",
+        "@babel/traverse": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-plugin-utils": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.29.7.tgz",
+      "integrity": "sha512-G7sHYigPY17oO5SYWnfD/0MTBwVR781S/JI643e/JhUYgVgWE/61SoW3NH9KWUKyKq5LVh3npif99Wkt6j86Jw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.29.7.tgz",
+      "integrity": "sha512-Pb5ijPrZ89GDH8223L4UP8i6QApWxs04RbPQJTeWDV0/keR2E36MeKnyr6LYmUUvqRRI+Iv87SuF1W6ErINzYw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.29.7.tgz",
+      "integrity": "sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-option": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.29.7.tgz",
+      "integrity": "sha512-N9ZErrD+yW5geCDtBqnOoxmR8+tNKiGuxKlDpuJxfsqpa2dFcexaziGAE/qoHLiDDreVNMupxGmSoNlyvsA3gw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helpers": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.29.7.tgz",
+      "integrity": "sha512-1k2lAGRMfHTcwuNYcCNUmaUffmQv8KWMfh2iJUUeRlwlwH4FdNG7mfPI10NPfLHJFThE4Tyr4mv7kTNZOiPuBg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/template": "^7.29.7",
+        "@babel/types": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.7.tgz",
+      "integrity": "sha512-hnORnjP/1P/zFEndoeX+n+t1RwWRJiJpM/jO7FW32Kn9r5+sJB2JWOdYo4L6k78j15eCwY3Gm/7364B1EMwtNg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.29.7"
+      },
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-jsx-self": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.29.7.tgz",
+      "integrity": "sha512-TL0hMc9xzy86VD31nUiwzd5otRAcyEPcsegCxolO0PvcXuH1v0kECe/UIznYFihpkvU5wg/jk4v0TTEFfm53fw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-jsx-source": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.29.7.tgz",
+      "integrity": "sha512-06IyK09H3wi4cGbhDBwp5gUGo0IKtnYa8tyTiephirPCK6fbobVGiXMMI5zLQ4aKEYP3wZ3ArU44o+8KMrSG/Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/template": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.29.7.tgz",
+      "integrity": "sha512-puq+Gf35oI24FeN11LkoUQFqv9uwNeWpxXZi/Ji3rRIoKAzKnxRaZ+Gkj0vKS9ZCiTESfng1N9LyOyXvo+m+Gg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.29.7",
+        "@babel/parser": "^7.29.7",
+        "@babel/types": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/traverse": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.29.7.tgz",
+      "integrity": "sha512-EhlfNQtZ+NK22w5BM61ciuiq1m58ed33Wr1Xan//ZRTy6hgjnwyCffRYwzsGXdASJSUJ1guZILsErh1eQcl+zw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.29.7",
+        "@babel/generator": "^7.29.7",
+        "@babel/helper-globals": "^7.29.7",
+        "@babel/parser": "^7.29.7",
+        "@babel/template": "^7.29.7",
+        "@babel/types": "^7.29.7",
+        "debug": "^4.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/types": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.7.tgz",
+      "integrity": "sha512-4zBIxpPzowiZpusoFkyGVwakdRJUyuH5PxQ/PrqghfdFWWasvnCdPfQXHrenDai+gyLARulZjZowCOj6fjT4pA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.29.7",
+        "@babel/helper-validator-identifier": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.12.tgz",
+      "integrity": "sha512-Hhmwd6CInZ3dwpuGTF8fJG6yoWmsToE+vYgD4nytZVxcu1ulHpUQRAB1UJ8+N1Am3Mz4+xOByoQoSZf4D+CpkA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.25.12.tgz",
+      "integrity": "sha512-VJ+sKvNA/GE7Ccacc9Cha7bpS8nyzVv0jdVgwNDaR4gDMC/2TTRc33Ip8qrNYUcpkOHUT5OZ0bUcNNVZQ9RLlg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.25.12.tgz",
+      "integrity": "sha512-6AAmLG7zwD1Z159jCKPvAxZd4y/VTO0VkprYy+3N2FtJ8+BQWFXU+OxARIwA46c5tdD9SsKGZ/1ocqBS/gAKHg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.25.12.tgz",
+      "integrity": "sha512-5jbb+2hhDHx5phYR2By8GTWEzn6I9UqR11Kwf22iKbNpYrsmRB18aX/9ivc5cabcUiAT/wM+YIZ6SG9QO6a8kg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.25.12.tgz",
+      "integrity": "sha512-N3zl+lxHCifgIlcMUP5016ESkeQjLj/959RxxNYIthIg+CQHInujFuXeWbWMgnTo4cp5XVHqFPmpyu9J65C1Yg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.25.12.tgz",
+      "integrity": "sha512-HQ9ka4Kx21qHXwtlTUVbKJOAnmG1ipXhdWTmNXiPzPfWKpXqASVcWdnf2bnL73wgjNrFXAa3yYvBSd9pzfEIpA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.25.12.tgz",
+      "integrity": "sha512-gA0Bx759+7Jve03K1S0vkOu5Lg/85dou3EseOGUes8flVOGxbhDDh/iZaoek11Y8mtyKPGF3vP8XhnkDEAmzeg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.25.12.tgz",
+      "integrity": "sha512-TGbO26Yw2xsHzxtbVFGEXBFH0FRAP7gtcPE7P5yP7wGy7cXK2oO7RyOhL5NLiqTlBh47XhmIUXuGciXEqYFfBQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.25.12.tgz",
+      "integrity": "sha512-lPDGyC1JPDou8kGcywY0YILzWlhhnRjdof3UlcoqYmS9El818LLfJJc3PXXgZHrHCAKs/Z2SeZtDJr5MrkxtOw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.25.12.tgz",
+      "integrity": "sha512-8bwX7a8FghIgrupcxb4aUmYDLp8pX06rGh5HqDT7bB+8Rdells6mHvrFHHW2JAOPZUbnjUpKTLg6ECyzvas2AQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.25.12.tgz",
+      "integrity": "sha512-0y9KrdVnbMM2/vG8KfU0byhUN+EFCny9+8g202gYqSSVMonbsCfLjUO+rCci7pM0WBEtz+oK/PIwHkzxkyharA==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.25.12.tgz",
+      "integrity": "sha512-h///Lr5a9rib/v1GGqXVGzjL4TMvVTv+s1DPoxQdz7l/AYv6LDSxdIwzxkrPW438oUXiDtwM10o9PmwS/6Z0Ng==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.25.12.tgz",
+      "integrity": "sha512-iyRrM1Pzy9GFMDLsXn1iHUm18nhKnNMWscjmp4+hpafcZjrr2WbT//d20xaGljXDBYHqRcl8HnxbX6uaA/eGVw==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.25.12.tgz",
+      "integrity": "sha512-9meM/lRXxMi5PSUqEXRCtVjEZBGwB7P/D4yT8UG/mwIdze2aV4Vo6U5gD3+RsoHXKkHCfSxZKzmDssVlRj1QQA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.25.12.tgz",
+      "integrity": "sha512-Zr7KR4hgKUpWAwb1f3o5ygT04MzqVrGEGXGLnj15YQDJErYu/BGg+wmFlIDOdJp0PmB0lLvxFIOXZgFRrdjR0w==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.25.12.tgz",
+      "integrity": "sha512-MsKncOcgTNvdtiISc/jZs/Zf8d0cl/t3gYWX8J9ubBnVOwlk65UIEEvgBORTiljloIWnBzLs4qhzPkJcitIzIg==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.25.12.tgz",
+      "integrity": "sha512-uqZMTLr/zR/ed4jIGnwSLkaHmPjOjJvnm6TVVitAa08SLS9Z0VM8wIRx7gWbJB5/J54YuIMInDquWyYvQLZkgw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.25.12.tgz",
+      "integrity": "sha512-xXwcTq4GhRM7J9A8Gv5boanHhRa/Q9KLVmcyXHCTaM4wKfIpWkdXiMog/KsnxzJ0A1+nD+zoecuzqPmCRyBGjg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.25.12.tgz",
+      "integrity": "sha512-Ld5pTlzPy3YwGec4OuHh1aCVCRvOXdH8DgRjfDy/oumVovmuSzWfnSJg+VtakB9Cm0gxNO9BzWkj6mtO1FMXkQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.25.12.tgz",
+      "integrity": "sha512-fF96T6KsBo/pkQI950FARU9apGNTSlZGsv1jZBAlcLL1MLjLNIWPBkj5NlSz8aAzYKg+eNqknrUJ24QBybeR5A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.25.12.tgz",
+      "integrity": "sha512-MZyXUkZHjQxUvzK7rN8DJ3SRmrVrke8ZyRusHlP+kuwqTcfWLyqMOE3sScPPyeIXN/mDJIfGXvcMqCgYKekoQw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openharmony-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.25.12.tgz",
+      "integrity": "sha512-rm0YWsqUSRrjncSXGA7Zv78Nbnw4XL6/dzr20cyrQf7ZmRcsovpcRBdhD43Nuk3y7XIoW2OxMVvwuRvk9XdASg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.25.12.tgz",
+      "integrity": "sha512-3wGSCDyuTHQUzt0nV7bocDy72r2lI33QL3gkDNGkod22EsYl04sMf0qLb8luNKTOmgF/eDEDP5BFNwoBKH441w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.25.12.tgz",
+      "integrity": "sha512-rMmLrur64A7+DKlnSuwqUdRKyd3UE7oPJZmnljqEptesKM8wx9J8gx5u0+9Pq0fQQW8vqeKebwNXdfOyP+8Bsg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.25.12.tgz",
+      "integrity": "sha512-HkqnmmBoCbCwxUKKNPBixiWDGCpQGVsrQfJoVGYLPT41XWF8lHuE5N6WhVia2n4o5QK5M4tYr21827fNhi4byQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.25.12.tgz",
+      "integrity": "sha512-alJC0uCZpTFrSL0CCDjcgleBXPnCrEAhTBILpeAp7M/OFgoqtAetfBzX0xM00MUsVVPpVjlPuMbREqnZCXaTnA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.13",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/remapping": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
+      "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
+      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.31",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@rolldown/pluginutils": {
+      "version": "1.0.0-beta.27",
+      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.27.tgz",
+      "integrity": "sha512-+d0F4MKMCbeVUJwG96uQ4SgAznZNSq93I3V+9NHA4OpvqG8mRCpGdKmK8l/dl02h2CCDHwW2FqilnTyDcAnqjA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@rollup/rollup-android-arm-eabi": {
+      "version": "4.60.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.60.4.tgz",
+      "integrity": "sha512-F5QXMSiFebS9hKZj02XhWLLnRpJ3B3AROP0tWbFBSj+6kCbg5m9j5JoHKd4mmSVy5mS/IMQloYgYxCuJC0fxEQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-android-arm64": {
+      "version": "4.60.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.60.4.tgz",
+      "integrity": "sha512-GxxTKApUpzRhof7poWvCJHRF51C67u1R7D6DiluBE8wKU1u5GWE8t+v81JvJYtbawoBFX1hLv5Ei4eVjkWokaw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-arm64": {
+      "version": "4.60.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.60.4.tgz",
+      "integrity": "sha512-tua0TaJxMOB1R0V0RS1jFZ/RpURFDJIOR2A6jWwQeawuFyS4gBW+rntLRaQd0EQ4bd6Vp44Z2rXW+YYDBsj6IA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-x64": {
+      "version": "4.60.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.60.4.tgz",
+      "integrity": "sha512-CSKq7MsP+5PFIcydhAiR1K0UhEI1A2jWXVKHPCBZ151yOutENwvnPocgVHkivu2kviURtCEB6zUQw0vs8RrhMg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-arm64": {
+      "version": "4.60.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.60.4.tgz",
+      "integrity": "sha512-+O8OkVdyvXMtJEciu2wS/pzm1IxntEEQx3z5TAVy4l32G0etZn+RsA48ARRrFm6Ri8fvqPQfgrvNxSjKAbnd3g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-x64": {
+      "version": "4.60.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.60.4.tgz",
+      "integrity": "sha512-Iw3oMskH3AfNuhU0MSN7vNbdi4me/NiYo2azqPz/Le16zHSa+3RRmliCMWWQmh4lcndccU40xcJuTYJZxNo/lw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
+      "version": "4.60.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.60.4.tgz",
+      "integrity": "sha512-EIPRXTVQpHyF8WOo219AD2yEltPehLTcTMz2fn6JsatLYSzQf00hj3rulF+yauOlF9/FtM2WpkT/hJh/KJFGhA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-musleabihf": {
+      "version": "4.60.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.60.4.tgz",
+      "integrity": "sha512-J3Yh9PzzF1Ovah2At+lHiGQdsYgArxBbXv/zHfSyaiFQEqvNv7DcW98pCrmdjCZBrqBiKrKKe2V+aaSGWuBe/w==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-gnu": {
+      "version": "4.60.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.60.4.tgz",
+      "integrity": "sha512-BFDEZMYfUvLn37ONE1yMBojPxnMlTFsdyNoqncT0qFq1mAfllL+ATMMJd8TeuVMiX84s1KbcxcZbXInmcO2mRg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-musl": {
+      "version": "4.60.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.60.4.tgz",
+      "integrity": "sha512-pc9EYOSlOgdQ2uPl1o9PF6/kLSgaUosia7gOuS8mB69IxJvlclko1MECXysjs5ryez1/5zjYqx3+xYU0TU6R1A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-loong64-gnu": {
+      "version": "4.60.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.60.4.tgz",
+      "integrity": "sha512-NxnomyxYerDh5n4iLrNa+sH+Z+U4BMEE46V2PgQ/hoB909i8gV1M5wPojWg9fk1jWpO3IQnOs20K4wyZuFLEFQ==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-loong64-musl": {
+      "version": "4.60.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-musl/-/rollup-linux-loong64-musl-4.60.4.tgz",
+      "integrity": "sha512-nbJnQ8a3z1mtmrwImCYhc6BGpThAyYVRQxw9uKSKG4wR6aAYno9sVjJ0zaZcW9BPJX1GbrDPf+SvdWjgTuDmnw==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-ppc64-gnu": {
+      "version": "4.60.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.60.4.tgz",
+      "integrity": "sha512-2EU6acNrQLd8tYvo/LXW535wupT3m6fo7HKo6lr7ktQoItxTyOL1ZCR/GfGCuXl2vR+zmfI6eRXkSemafv+iVg==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-ppc64-musl": {
+      "version": "4.60.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-musl/-/rollup-linux-ppc64-musl-4.60.4.tgz",
+      "integrity": "sha512-WeBtoMuaMxiiIrO2IYP3xs6GMWkJP2C0EoT8beTLkUPmzV1i/UcOSVw1d5r9KBODtHKilG5yFxsGRnBbK3wJ4A==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-gnu": {
+      "version": "4.60.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.60.4.tgz",
+      "integrity": "sha512-FJHFfqpKUI3A10WrWKiFbBZ7yVbGT4q4B5o1qKFFojqpaYoh9LrQgqWCmmcxQzVSXYtyB5bzkXrYzlHTs21MYA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-musl": {
+      "version": "4.60.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.60.4.tgz",
+      "integrity": "sha512-mcEl6CUT5IAUmQf1m9FYSmVqCJlpQ8r8eyftFUHG8i9OhY7BkBXSUdnLH5DOf0wCOjcP9v/QO93zpmF1SptCCw==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-s390x-gnu": {
+      "version": "4.60.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.60.4.tgz",
+      "integrity": "sha512-ynt3JxVd2w2buzoKDWIyiV1pJW93xlQic1THVLXilz429oijRpSHivZAgp65KBu+cMcgf1eVVjdnTLvPxgCuoQ==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-gnu": {
+      "version": "4.60.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.60.4.tgz",
+      "integrity": "sha512-Boiz5+MsaROEWDf+GGEwF8VMHGhlUoQMtIPjOgA5fv4osupqTVnJteQNKJwUcnUog2G55jYXH7KZFFiJe0TEzQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-musl": {
+      "version": "4.60.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.60.4.tgz",
+      "integrity": "sha512-+qfSY27qIrFfI/Hom04KYFw3GKZSGU4lXus51wsb5EuySfFlWRwjkKWoE9emgRw/ukoT4Udsj4W/+xxG8VbPKg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-openbsd-x64": {
+      "version": "4.60.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openbsd-x64/-/rollup-openbsd-x64-4.60.4.tgz",
+      "integrity": "sha512-VpTfOPHgVXEBeeR8hZ2O0F3aSso+JDWqTWmTmzcQKted54IAdUVbxE+j/MVxUsKa8L20HJhv3vUezVPoquqWjA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-openharmony-arm64": {
+      "version": "4.60.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.60.4.tgz",
+      "integrity": "sha512-IPOsh5aRYuLv/nkU51X10Bf75Bsf6+gZdx1X+QP5QM6lIJFHHqbHLG0uJn/hWthzo13UAc2umiUorqZy3axoZg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-arm64-msvc": {
+      "version": "4.60.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.60.4.tgz",
+      "integrity": "sha512-4QzE9E81OohJ/HKzHhsqU+zcYYojVOXlFMs1DdyMT6qXl/niOH7AVElmmEdUNHHS/oRkc++d5k6Vy85zFs0DEw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-ia32-msvc": {
+      "version": "4.60.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.60.4.tgz",
+      "integrity": "sha512-zTPgT1YuHHcd+Tmx7h8aml0FWFVelV5N54oHow9SLj+GfoDy/huQ+UV396N/C7KpMDMiPspRktzM1/0r1usYEA==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-gnu": {
+      "version": "4.60.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.60.4.tgz",
+      "integrity": "sha512-DRS4G7mi9lJxqEDezIkKCaUIKCrLUUDCUaCsTPCi/rtqaC6D/jjwslMQyiDU50Ka0JKpeXeRBFBAXwArY52vBw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-msvc": {
+      "version": "4.60.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.60.4.tgz",
+      "integrity": "sha512-QVTUovf40zgTqlFVrKA1uXMVvU2QWEFWfAH8Wdc48IxLvrJMQVMBRjuQyUpzZCDkakImib9eVazbWlC6ksWtJw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@types/babel__core": {
+      "version": "7.20.5",
+      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
+      "integrity": "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.20.7",
+        "@babel/types": "^7.20.7",
+        "@types/babel__generator": "*",
+        "@types/babel__template": "*",
+        "@types/babel__traverse": "*"
+      }
+    },
+    "node_modules/@types/babel__generator": {
+      "version": "7.27.0",
+      "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.27.0.tgz",
+      "integrity": "sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "node_modules/@types/babel__template": {
+      "version": "7.4.4",
+      "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.4.tgz",
+      "integrity": "sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.1.0",
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "node_modules/@types/babel__traverse": {
+      "version": "7.28.0",
+      "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.28.0.tgz",
+      "integrity": "sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.28.2"
+      }
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
+      "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/prop-types": {
+      "version": "15.7.15",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz",
+      "integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/react": {
+      "version": "18.3.29",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.29.tgz",
+      "integrity": "sha512-ch0qJdr2JY0r04NXSprbK6TXOgnaJ1Tz23fm5W+z0/CBah6BSBc3n96h7K9GOtwh0HrilNWHIBzE1Ko4Dcw/Wg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@types/prop-types": "*",
+        "csstype": "^3.2.2"
+      }
+    },
+    "node_modules/@types/react-dom": {
+      "version": "18.3.7",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.7.tgz",
+      "integrity": "sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "^18.0.0"
+      }
+    },
+    "node_modules/@vitejs/plugin-react": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.7.0.tgz",
+      "integrity": "sha512-gUu9hwfWvvEDBBmgtAowQCojwZmJ5mcLn3aufeCsitijs3+f2NsrPtlAWIR6OPiqljl96GVCUbLe0HyqIpVaoA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.28.0",
+        "@babel/plugin-transform-react-jsx-self": "^7.27.1",
+        "@babel/plugin-transform-react-jsx-source": "^7.27.1",
+        "@rolldown/pluginutils": "1.0.0-beta.27",
+        "@types/babel__core": "^7.20.5",
+        "react-refresh": "^0.17.0"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"
+      }
+    },
+    "node_modules/baseline-browser-mapping": {
+      "version": "2.10.32",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.32.tgz",
+      "integrity": "sha512-wbPvpyjJPC0zdfdKXxqEL3Ea+bOMD/87X4lftiJkkaBiuG6ALQy1SLmEd7BSmVCuwCQsBrCamgBoLyfFDD1EPg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "baseline-browser-mapping": "dist/cli.cjs"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/browserslist": {
+      "version": "4.28.2",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.2.tgz",
+      "integrity": "sha512-48xSriZYYg+8qXna9kwqjIVzuQxi+KYWp2+5nCYnYKPTr0LvD89Jqk2Or5ogxz0NUMfIjhh2lIUX/LyX9B4oIg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "baseline-browser-mapping": "^2.10.12",
+        "caniuse-lite": "^1.0.30001782",
+        "electron-to-chromium": "^1.5.328",
+        "node-releases": "^2.0.36",
+        "update-browserslist-db": "^1.2.3"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      }
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001793",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001793.tgz",
+      "integrity": "sha512-iwSsYWaCOoh26cV8NwNRViHlrfUvYsHDfRVcbtmw0Kg6PJIZZXwMkj1442FYLBGkeUf1juAsU3DTfxW579mrPA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "CC-BY-4.0"
+    },
+    "node_modules/convert-source-map": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
+      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/csstype": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/electron-to-chromium": {
+      "version": "1.5.362",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.362.tgz",
+      "integrity": "sha512-PUY2DrLvkjkUuWqq+KPL2iWshrJsZOcIojzRQ7eXFacc9dWga7MGMJAa15VbiejSZB1PAXaRLAiKgruHP8LB1w==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/esbuild": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.12.tgz",
+      "integrity": "sha512-bbPBYYrtZbkt6Os6FiTLCTFxvq4tt3JKall1vRwshA3fdVztsLAatFaZobhkBC8/BrPetoa0oksYoKXoG4ryJg==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.25.12",
+        "@esbuild/android-arm": "0.25.12",
+        "@esbuild/android-arm64": "0.25.12",
+        "@esbuild/android-x64": "0.25.12",
+        "@esbuild/darwin-arm64": "0.25.12",
+        "@esbuild/darwin-x64": "0.25.12",
+        "@esbuild/freebsd-arm64": "0.25.12",
+        "@esbuild/freebsd-x64": "0.25.12",
+        "@esbuild/linux-arm": "0.25.12",
+        "@esbuild/linux-arm64": "0.25.12",
+        "@esbuild/linux-ia32": "0.25.12",
+        "@esbuild/linux-loong64": "0.25.12",
+        "@esbuild/linux-mips64el": "0.25.12",
+        "@esbuild/linux-ppc64": "0.25.12",
+        "@esbuild/linux-riscv64": "0.25.12",
+        "@esbuild/linux-s390x": "0.25.12",
+        "@esbuild/linux-x64": "0.25.12",
+        "@esbuild/netbsd-arm64": "0.25.12",
+        "@esbuild/netbsd-x64": "0.25.12",
+        "@esbuild/openbsd-arm64": "0.25.12",
+        "@esbuild/openbsd-x64": "0.25.12",
+        "@esbuild/openharmony-arm64": "0.25.12",
+        "@esbuild/sunos-x64": "0.25.12",
+        "@esbuild/win32-arm64": "0.25.12",
+        "@esbuild/win32-ia32": "0.25.12",
+        "@esbuild/win32-x64": "0.25.12"
+      }
+    },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/fdir": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/gensync": {
+      "version": "1.0.0-beta.2",
+      "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
+      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "license": "MIT"
+    },
+    "node_modules/jsesc": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
+      "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jsesc": "bin/jsesc"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/json5": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "json5": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
+    "node_modules/lru-cache": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
+      "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^3.0.2"
+      }
+    },
+    "node_modules/lucide-react": {
+      "version": "1.16.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-1.16.0.tgz",
+      "integrity": "sha512-dYwyPzb4MEKpGUmNYk3WKWPnMrHs3FKM+q94kAnJrcDIqqn1hq2xY8scaS2ovsOCM5D51ey2gaRG3PBb1vgoYQ==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.12",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.12.tgz",
+      "integrity": "sha512-ZB9RH/39qpq5Vu6Y+NmUaFhQR6pp+M2Xt76XBnEwDaGcVAqhlvxrl3B2bKS5D3NH3QR76v3aSrKaF/Kiy7lEtQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/node-releases": {
+      "version": "2.0.46",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.46.tgz",
+      "integrity": "sha512-GYVXHE2KnrzAfsAjl4uP++evGFCrAU1jta4ubEjIG7YWt/64Gqv66a30yKwWczVjA6j3bM4nBwH7Pk1JmDHaxQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/picomatch": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
+      "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.5.15",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.15.tgz",
+      "integrity": "sha512-FfR8sjd4em2T6fb3I2MwAJU7HWVMr9zba+enmQeeWFfCbm+UOC/0X4DS8XtpUTMwWMGbjKYP7xjfNekzyGmB3A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.12",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/react": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
+      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
+      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "scheduler": "^0.23.2"
+      },
+      "peerDependencies": {
+        "react": "^18.3.1"
+      }
+    },
+    "node_modules/react-refresh": {
+      "version": "0.17.0",
+      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",
+      "integrity": "sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/rollup": {
+      "version": "4.60.4",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.60.4.tgz",
+      "integrity": "sha512-WHeFSbZYsPu3+bLoNRUuAO+wavNlocOPf3wSHTP7hcFKVnJeWsYlCDbr3mTS14FCizf9ccIxXA8sGL8zKeQN3g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "1.0.8"
+      },
+      "bin": {
+        "rollup": "dist/bin/rollup"
+      },
+      "engines": {
+        "node": ">=18.0.0",
+        "npm": ">=8.0.0"
+      },
+      "optionalDependencies": {
+        "@rollup/rollup-android-arm-eabi": "4.60.4",
+        "@rollup/rollup-android-arm64": "4.60.4",
+        "@rollup/rollup-darwin-arm64": "4.60.4",
+        "@rollup/rollup-darwin-x64": "4.60.4",
+        "@rollup/rollup-freebsd-arm64": "4.60.4",
+        "@rollup/rollup-freebsd-x64": "4.60.4",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.60.4",
+        "@rollup/rollup-linux-arm-musleabihf": "4.60.4",
+        "@rollup/rollup-linux-arm64-gnu": "4.60.4",
+        "@rollup/rollup-linux-arm64-musl": "4.60.4",
+        "@rollup/rollup-linux-loong64-gnu": "4.60.4",
+        "@rollup/rollup-linux-loong64-musl": "4.60.4",
+        "@rollup/rollup-linux-ppc64-gnu": "4.60.4",
+        "@rollup/rollup-linux-ppc64-musl": "4.60.4",
+        "@rollup/rollup-linux-riscv64-gnu": "4.60.4",
+        "@rollup/rollup-linux-riscv64-musl": "4.60.4",
+        "@rollup/rollup-linux-s390x-gnu": "4.60.4",
+        "@rollup/rollup-linux-x64-gnu": "4.60.4",
+        "@rollup/rollup-linux-x64-musl": "4.60.4",
+        "@rollup/rollup-openbsd-x64": "4.60.4",
+        "@rollup/rollup-openharmony-arm64": "4.60.4",
+        "@rollup/rollup-win32-arm64-msvc": "4.60.4",
+        "@rollup/rollup-win32-ia32-msvc": "4.60.4",
+        "@rollup/rollup-win32-x64-gnu": "4.60.4",
+        "@rollup/rollup-win32-x64-msvc": "4.60.4",
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/scheduler": {
+      "version": "0.23.2",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
+      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      }
+    },
+    "node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/tinyglobby": {
+      "version": "0.2.16",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.16.tgz",
+      "integrity": "sha512-pn99VhoACYR8nFHhxqix+uvsbXineAasWm5ojXoN8xEwK5Kd3/TrhNn1wByuD52UxWRLy8pu+kRMniEi6Eq9Zg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.4"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/typescript": {
+      "version": "5.9.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
+      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/update-browserslist-db": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz",
+      "integrity": "sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "escalade": "^3.2.0",
+        "picocolors": "^1.1.1"
+      },
+      "bin": {
+        "update-browserslist-db": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
+      }
+    },
+    "node_modules/vite": {
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-6.4.2.tgz",
+      "integrity": "sha512-2N/55r4JDJ4gdrCvGgINMy+HH3iRpNIz8K6SFwVsA+JbQScLiC+clmAxBgwiSPgcG9U15QmvqCGWzMbqda5zGQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "esbuild": "^0.25.0",
+        "fdir": "^6.4.4",
+        "picomatch": "^4.0.2",
+        "postcss": "^8.5.3",
+        "rollup": "^4.34.9",
+        "tinyglobby": "^0.2.13"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^18.0.0 || ^20.0.0 || >=22.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0",
+        "jiti": ">=1.21.0",
+        "less": "*",
+        "lightningcss": "^1.21.0",
+        "sass": "*",
+        "sass-embedded": "*",
+        "stylus": "*",
+        "sugarss": "*",
+        "terser": "^5.16.0",
+        "tsx": "^4.8.1",
+        "yaml": "^2.4.2"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "jiti": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "lightningcss": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        },
+        "tsx": {
+          "optional": true
+        },
+        "yaml": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/yallist": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
+      "dev": true,
+      "license": "ISC"
+    }
+  }
+}
diff --git a/tellur-live/web/package.json b/tellur-live/web/package.json
new file mode 100644
index 0000000..efa8ee4
--- /dev/null
+++ b/tellur-live/web/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "tellur-live-web",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "lucide-react": "^1.16.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.4",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.7"
+  }
+}
diff --git a/tellur-live/web/src/App.tsx b/tellur-live/web/src/App.tsx
new file mode 100644
index 0000000..3f65c13
--- /dev/null
+++ b/tellur-live/web/src/App.tsx
@@ -0,0 +1,336 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { fetchInfo } from "./api";
+import { Header } from "./components/Header";
+import { Preview } from "./components/Preview";
+import { PreviewScrubber } from "./components/PreviewScrubber";
+import { TabsRow } from "./components/TabsRow";
+import { Timeline } from "./components/Timeline";
+import { TimelineViewportBar } from "./components/TimelineViewportBar";
+import { Transport } from "./components/Transport";
+import { usePreview } from "./preview/usePreview";
+import { cleanupLegacyMediaCaches } from "./cache";
+import {
+  clampTimelineViewport,
+  type TimelineViewport,
+  type TimelineViewportChange,
+} from "./timelineViewport";
+import type { PreviewResolution, ServerInfo, TimelineInfo } from "./types";
+
+const FALLBACK_TIMELINE: TimelineInfo = {
+  id: "demo",
+  title: "Demo Timeline",
+  duration: 150,
+};
+const INFO_FALLBACK_POLL_MS = 2000;
+const LEGACY_CACHE_RELOAD_KEY = "tellur-live:legacy-cache-reloaded";
+const DEFAULT_PREVIEW_RESOLUTION: PreviewResolution = {
+  width: 1280,
+  height: 720,
+};
+const PREVIEW_RESOLUTION_OPTIONS = [
+  { width: 3840, height: 2160, label: "3840 × 2160" },
+  { width: 1920, height: 1080, label: "1920 × 1080" },
+  { width: 1280, height: 720, label: "1280 × 720" },
+  { width: 854, height: 480, label: "854 × 480" },
+  { width: 640, height: 360, label: "640 × 360" },
+  { width: 426, height: 240, label: "426 × 240" },
+  { width: 2160, height: 3840, label: "2160 × 3840" },
+  { width: 1080, height: 1920, label: "1080 × 1920" },
+  { width: 720, height: 1280, label: "720 × 1280" },
+  { width: 480, height: 854, label: "480 × 854" },
+  { width: 360, height: 640, label: "360 × 640" },
+  { width: 240, height: 426, label: "240 × 426" },
+];
+
+export function App() {
+  const [info, setInfo] = useState<ServerInfo | null>(null);
+  const [loadError, setLoadError] = useState<string | null>(null);
+  const [resolution, setResolution] = useState<PreviewResolution>(
+    DEFAULT_PREVIEW_RESOLUTION,
+  );
+  const [fps, setFps] = useState(30);
+  const [timelineViewport, setTimelineViewport] = useState<TimelineViewport>({
+    start: 0,
+    zoom: 1,
+  });
+  const [measuredFps, setMeasuredFps] = useState(0);
+  const fpsCounterRef = useRef({ frames: 0, last: performance.now() });
+  const userSelectedResolutionRef = useRef(false);
+
+  useEffect(() => {
+    cleanupLegacyMediaCaches()
+      .then((needsReload) => {
+        if (
+          !needsReload ||
+          typeof window === "undefined" ||
+          window.sessionStorage.getItem(LEGACY_CACHE_RELOAD_KEY)
+        ) {
+          return;
+        }
+        window.sessionStorage.setItem(LEGACY_CACHE_RELOAD_KEY, "1");
+        window.location.reload();
+      })
+      .catch((e) => {
+        console.warn("tellur-live legacy media cache cleanup failed", e);
+      });
+  }, []);
+
+  useEffect(() => {
+    let cancelled = false;
+    let timer: ReturnType<typeof setTimeout> | null = null;
+    let source: EventSource | null = null;
+
+    const applyInfo = (next: ServerInfo) => {
+      if (cancelled) return;
+      setInfo((prev) => {
+        if (!prev) {
+          setFps((current) => Math.max(next.fps || current, 1));
+          if (!userSelectedResolutionRef.current) {
+            setResolution({ width: next.width, height: next.height });
+          }
+        }
+        return next;
+      });
+      setLoadError(null);
+    };
+
+    const tick = async () => {
+      try {
+        applyInfo(await fetchInfo());
+      } catch (e) {
+        if (!cancelled) setLoadError(String(e));
+      } finally {
+        if (!cancelled) timer = setTimeout(tick, INFO_FALLBACK_POLL_MS);
+      }
+    };
+
+    if ("EventSource" in window) {
+      source = new EventSource("/api/events");
+      source.addEventListener("info", (event: MessageEvent) => {
+        try {
+          applyInfo(JSON.parse(event.data) as ServerInfo);
+        } catch (e) {
+          if (!cancelled) setLoadError(String(e));
+        }
+      });
+      source.onerror = () => {
+        if (cancelled) return;
+        source?.close();
+        source = null;
+        tick();
+      };
+    } else {
+      tick();
+    }
+
+    return () => {
+      cancelled = true;
+      if (timer) clearTimeout(timer);
+      source?.close();
+    };
+  }, []);
+
+  const timeline = info?.timelines[0] ?? null;
+
+  const preview = usePreview({
+    info,
+    timeline,
+    resolution,
+    fps,
+  });
+
+  useEffect(() => {
+    const isInteractiveTarget = (target: EventTarget | null) => {
+      if (!(target instanceof HTMLElement)) return false;
+      return Boolean(
+        target.closest(
+          'button, input, textarea, select, a[href], [contenteditable="true"], [role="textbox"]',
+        ),
+      );
+    };
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (
+        event.defaultPrevented ||
+        event.altKey ||
+        event.ctrlKey ||
+        event.metaKey ||
+        isInteractiveTarget(event.target)
+      ) {
+        return;
+      }
+
+      if (
+        event.code === "Space" ||
+        event.key === " " ||
+        event.key === "Spacebar"
+      ) {
+        event.preventDefault();
+        if (!event.repeat) preview.togglePlay();
+        return;
+      }
+
+      if (event.key === "ArrowLeft") {
+        event.preventDefault();
+        preview.stepFrame(-1);
+        return;
+      }
+
+      if (event.key === "ArrowRight") {
+        event.preventDefault();
+        preview.stepFrame(1);
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [preview.stepFrame, preview.togglePlay]);
+
+  useEffect(() => {
+    const counter = fpsCounterRef.current;
+    if (!preview.state.playing) {
+      counter.frames = 0;
+      counter.last = performance.now();
+      return;
+    }
+    counter.frames += 1;
+    const now = performance.now();
+    const dt = now - counter.last;
+    if (dt > 500) {
+      setMeasuredFps((counter.frames / dt) * 1000);
+      counter.frames = 0;
+      counter.last = now;
+    }
+  }, [preview.state.seconds, preview.state.playing]);
+
+  const aspect = resolution.width / resolution.height;
+  const displayTimeline = timeline ?? FALLBACK_TIMELINE;
+  const timelineDuration = displayTimeline.duration;
+  const resolutionOptions = previewResolutionOptions(resolution);
+  const changeResolution = useCallback((next: PreviewResolution) => {
+    userSelectedResolutionRef.current = true;
+    setResolution(next);
+  }, []);
+  const updateTimelineViewport = useCallback(
+    (next: TimelineViewportChange) => {
+      setTimelineViewport((current) => {
+        const nextViewport =
+          typeof next === "function" ? next(current) : next;
+        return clampTimelineViewport(nextViewport, timelineDuration);
+      });
+    },
+    [timelineDuration],
+  );
+
+  useEffect(() => {
+    setTimelineViewport((current) =>
+      clampTimelineViewport(current, timelineDuration),
+    );
+  }, [timelineDuration]);
+
+  const url =
+    typeof window !== "undefined" && window.location.origin
+      ? window.location.origin
+      : "";
+
+  return (
+    <div className="app">
+      <Header
+        projectName="Project Name"
+        url={url}
+        compileStatus={
+          loadError ? "disconnected" : info?.compileStatus ?? "compiled"
+        }
+        compileError={loadError ?? info?.compileError ?? null}
+      />
+      <div className="workspace">
+        <section className="viewer-panel">
+          <Preview
+            imageSrc={preview.state.imageSrc}
+            imageVisible={preview.state.imageVisible}
+            videoVisible={preview.state.videoVisible}
+            activeVideoSlot={preview.state.activeVideoSlot}
+            aspect={aspect}
+            error={loadError ?? info?.lastError ?? preview.state.error}
+            videoRefs={preview.videoRefs}
+            imgRef={preview.imgRef}
+          />
+          <PreviewScrubber
+            seconds={preview.state.seconds}
+            duration={displayTimeline.duration}
+            onSeek={preview.setSeconds}
+          />
+          <Transport
+            seconds={preview.state.seconds}
+            duration={displayTimeline.duration}
+            fps={fps}
+            measuredFps={preview.state.playing ? measuredFps : fps}
+            resolution={resolution}
+            resolutionOptions={resolutionOptions}
+            playing={preview.state.playing}
+            onTogglePlay={preview.togglePlay}
+            onStep={preview.stepFrame}
+            onRewind={preview.rewindToStart}
+            onResolutionChange={changeResolution}
+            onFpsChange={setFps}
+          />
+        </section>
+        <section className="timeline-panel">
+          <TabsRow
+            timeline={displayTimeline}
+            seconds={preview.state.seconds}
+            fps={fps}
+            cacheRanges={preview.state.cacheRanges}
+            viewport={timelineViewport}
+            primaryLabel="Timeline"
+            secondaryLabel={displayTimeline.title}
+            onSeek={preview.setSeconds}
+          />
+          <Timeline
+            timeline={displayTimeline}
+            seconds={preview.state.seconds}
+            viewport={timelineViewport}
+            onSeek={preview.setSeconds}
+            onViewportChange={updateTimelineViewport}
+          />
+          <TimelineViewportBar
+            duration={timelineDuration}
+            viewport={timelineViewport}
+            onViewportChange={updateTimelineViewport}
+          />
+        </section>
+      </div>
+    </div>
+  );
+}
+
+interface PreviewResolutionOption extends PreviewResolution {
+  label: string;
+}
+
+function previewResolutionOptions(
+  resolution: PreviewResolution,
+): PreviewResolutionOption[] {
+  if (
+    PREVIEW_RESOLUTION_OPTIONS.some((option) =>
+      sameResolution(option, resolution),
+    )
+  ) {
+    return PREVIEW_RESOLUTION_OPTIONS;
+  }
+
+  return [
+    {
+      ...resolution,
+      label: `${resolution.width} × ${resolution.height}`,
+    },
+    ...PREVIEW_RESOLUTION_OPTIONS,
+  ];
+}
+
+function sameResolution(
+  a: PreviewResolution,
+  b: PreviewResolution,
+): boolean {
+  return a.width === b.width && a.height === b.height;
+}
diff --git a/tellur-live/web/src/api.ts b/tellur-live/web/src/api.ts
new file mode 100644
index 0000000..ae11204
--- /dev/null
+++ b/tellur-live/web/src/api.ts
@@ -0,0 +1,54 @@
+import type { ServerInfo } from "./types";
+
+export async function fetchInfo(signal?: AbortSignal): Promise<ServerInfo> {
+  const response = await fetch("/api/info", { cache: "no-store", signal });
+  if (!response.ok) {
+    throw new Error(`/api/info failed: ${response.status}`);
+  }
+  return (await response.json()) as ServerInfo;
+}
+
+export interface FrameRequestParams {
+  timelineId: string;
+  time: number;
+  width: number;
+  height: number;
+  fps: number;
+  cacheKey: string;
+}
+
+export function frameUrl(params: FrameRequestParams): string {
+  const query = new URLSearchParams({
+    timeline: params.timelineId,
+    time: params.time.toFixed(4),
+    width: String(params.width),
+    height: String(params.height),
+    fps: String(params.fps),
+    format: "png",
+    v: params.cacheKey,
+  });
+  return `/api/frame?${query}`;
+}
+
+export interface VideoRequestParams extends FrameRequestParams {
+  gop: number;
+  crf: number;
+  duration?: number;
+}
+
+export function videoUrl(params: VideoRequestParams): string {
+  const query = new URLSearchParams({
+    timeline: params.timelineId,
+    time: params.time.toFixed(4),
+    width: String(params.width),
+    height: String(params.height),
+    fps: String(params.fps),
+    gop: String(params.gop),
+    crf: String(params.crf),
+    v: params.cacheKey,
+  });
+  if (params.duration != null) {
+    query.set("duration", params.duration.toFixed(4));
+  }
+  return `/api/video.mp4?${query}`;
+}
diff --git a/tellur-live/web/src/cache.ts b/tellur-live/web/src/cache.ts
new file mode 100644
index 0000000..cc6191b
--- /dev/null
+++ b/tellur-live/web/src/cache.ts
@@ -0,0 +1,789 @@
+import type { CacheRange } from "./types";
+
+const EPSILON = 1e-4;
+const RANGE_PREFIX = "tellur-live:cache-ranges:";
+const RANGE_SCOPE_VERSION = "video-ranges-v1";
+const MEDIA_DB_NAME = "tellur-live-media";
+const MEDIA_DB_VERSION = 3;
+const MEDIA_STORE = "media";
+const LEGACY_MEDIA_CACHE_PREFIX = "tellur-live-media-v1-";
+
+interface MediaCacheEntry {
+  id: string;
+  cacheKey: string;
+  url: string;
+  blob: Blob;
+  createdAt: number;
+  kind?: "exact" | "video-range";
+  group?: string;
+  start?: number;
+  end?: number;
+}
+
+export interface CachedMediaObjectUrl {
+  objectUrl: string;
+  persisted: boolean;
+  fromCache: boolean;
+}
+
+export interface CachedVideoRange {
+  start: number;
+  end: number;
+  url: string;
+}
+
+export interface CachedVideoRangeObjectUrl extends CachedVideoRange {
+  objectUrl: string;
+}
+
+export interface CachedVideoRangeBlob extends CachedVideoRange {
+  blob: Blob;
+}
+
+let dbPromise: Promise<IDBDatabase> | null = null;
+let activeMediaCacheKey = "";
+let legacyCleanupPromise: Promise<boolean> | null = null;
+
+// Merge a new [start, end] range into an existing sorted, disjoint list.
+// Adjacent or overlapping ranges (within EPSILON) are coalesced so the
+// rendered green bar stays continuous when playback walks forward frame
+// by frame.
+export function mergeCacheRange(
+  ranges: CacheRange[],
+  start: number,
+  end: number,
+): CacheRange[] {
+  if (!(end > start)) return ranges;
+  const next: CacheRange[] = [];
+  let cur: CacheRange = { start, end };
+  let inserted = false;
+  for (const range of ranges) {
+    if (range.end < cur.start - EPSILON) {
+      next.push(range);
+      continue;
+    }
+    if (range.start > cur.end + EPSILON) {
+      if (!inserted) {
+        next.push(cur);
+        inserted = true;
+      }
+      next.push(range);
+      continue;
+    }
+    cur = {
+      start: Math.min(cur.start, range.start),
+      end: Math.max(cur.end, range.end),
+    };
+  }
+  if (!inserted) next.push(cur);
+  return next;
+}
+
+export function cacheScopeKey(parts: {
+  cacheKey: string;
+  timelineId: string;
+  width: number;
+  height: number;
+  fps: number;
+  gop: number;
+  crf: number;
+  videoSegmentSeconds: number;
+}): string {
+  return [
+    parts.cacheKey,
+    RANGE_SCOPE_VERSION,
+    parts.timelineId,
+    `${parts.width}x${parts.height}`,
+    String(parts.fps),
+    String(parts.gop),
+    String(parts.crf),
+    String(parts.videoSegmentSeconds),
+  ].join("|");
+}
+
+export function loadCacheRanges(scope: string): CacheRange[] {
+  if (!scope || typeof window === "undefined") return [];
+  try {
+    const raw = window.localStorage.getItem(`${RANGE_PREFIX}${scope}`);
+    if (!raw) return [];
+    const parsed = JSON.parse(raw);
+    if (!Array.isArray(parsed)) return [];
+    return parsed
+      .map((range) => ({
+        start: Number(range?.start),
+        end: Number(range?.end),
+      }))
+      .filter(
+        (range) =>
+          Number.isFinite(range.start) &&
+          Number.isFinite(range.end) &&
+          range.end > range.start,
+      );
+  } catch {
+    return [];
+  }
+}
+
+export function saveCacheRanges(scope: string, ranges: CacheRange[]): void {
+  if (!scope || typeof window === "undefined") return;
+  try {
+    window.localStorage.setItem(`${RANGE_PREFIX}${scope}`, JSON.stringify(ranges));
+  } catch {
+    // Browser storage is opportunistic; the in-memory cache display still works.
+  }
+}
+
+export function revokeStaleCacheRanges(currentCacheKey: string): void {
+  if (!currentCacheKey || typeof window === "undefined") return;
+  try {
+    const keepPrefix = `${RANGE_PREFIX}${currentCacheKey}|${RANGE_SCOPE_VERSION}|`;
+    for (let i = window.localStorage.length - 1; i >= 0; i--) {
+      const key = window.localStorage.key(i);
+      if (key?.startsWith(RANGE_PREFIX) && !key.startsWith(keepPrefix)) {
+        window.localStorage.removeItem(key);
+      }
+    }
+  } catch {
+    // ignore
+  }
+}
+
+export async function loadCachedMediaObjectUrl(
+  url: string,
+  cacheKey: string,
+  signal?: AbortSignal,
+): Promise<CachedMediaObjectUrl> {
+  if (!cacheKey) throw new Error("media cache key is empty");
+
+  const cached = await getCachedMediaObjectUrl(url, cacheKey);
+  if (cached) return cached;
+
+  const response = await fetch(url, { cache: "no-store", signal });
+  if (!response.ok) {
+    throw new Error(`${url} failed: ${response.status}`);
+  }
+
+  const blob = await response.blob();
+  let persisted = false;
+  if (!activeMediaCacheKey || activeMediaCacheKey === cacheKey) {
+    try {
+      persisted = await putMediaEntry(url, cacheKey, blob);
+      persisted &&= !activeMediaCacheKey || activeMediaCacheKey === cacheKey;
+      if (!persisted) {
+        await deleteMediaEntriesByCacheKey(cacheKey);
+      }
+    } catch (e) {
+      console.warn("tellur-live IndexedDB media cache write failed", e);
+    }
+  }
+
+  return {
+    objectUrl: URL.createObjectURL(blob),
+    persisted,
+    fromCache: false,
+  };
+}
+
+export async function ensureMediaCached(
+  url: string,
+  cacheKey: string,
+  signal?: AbortSignal,
+): Promise<boolean> {
+  if (!cacheKey) return false;
+  if (await getMediaEntry(url, cacheKey)) return true;
+
+  const response = await fetch(url, { cache: "no-store", signal });
+  if (!response.ok) {
+    throw new Error(`${url} failed: ${response.status}`);
+  }
+
+  const blob = await response.blob();
+  if (activeMediaCacheKey && activeMediaCacheKey !== cacheKey) {
+    return false;
+  }
+  try {
+    const persisted = await putMediaEntry(url, cacheKey, blob);
+    if (activeMediaCacheKey && activeMediaCacheKey !== cacheKey) {
+      await deleteMediaEntriesByCacheKey(cacheKey);
+      return false;
+    }
+    return persisted;
+  } catch (e) {
+    console.warn("tellur-live IndexedDB media cache write failed", e);
+    return false;
+  }
+}
+
+export async function ensureVideoRangeCached(
+  url: string,
+  cacheKey: string,
+  group: string,
+  start: number,
+  end: number,
+  signal?: AbortSignal,
+): Promise<boolean> {
+  return Boolean(
+    await ensureVideoRangeCachedObjectUrl(
+      url,
+      cacheKey,
+      group,
+      start,
+      end,
+      signal,
+    ),
+  );
+}
+
+export async function ensureVideoRangeCachedObjectUrl(
+  url: string,
+  cacheKey: string,
+  group: string,
+  start: number,
+  end: number,
+  signal?: AbortSignal,
+): Promise<CachedVideoRangeObjectUrl | null> {
+  if (!cacheKey || !group || !(end > start)) return null;
+  const existing = await getCachedVideoRange(group, cacheKey, start);
+  if (existing && existing.end >= end - EPSILON) {
+    return getCachedVideoRangeObjectUrl(group, cacheKey, start);
+  }
+
+  const response = await fetch(url, { cache: "no-store", signal });
+  if (!response.ok) {
+    throw new Error(`${url} failed: ${response.status}`);
+  }
+
+  const blob = await response.blob();
+  if (activeMediaCacheKey && activeMediaCacheKey !== cacheKey) {
+    return null;
+  }
+  try {
+    const persisted = await putVideoRangeBlob(
+      url,
+      cacheKey,
+      group,
+      start,
+      end,
+      blob,
+    );
+    if (activeMediaCacheKey && activeMediaCacheKey !== cacheKey) {
+      await deleteMediaEntriesByCacheKey(cacheKey);
+      return null;
+    }
+    if (!persisted) return null;
+    return {
+      start,
+      end,
+      url,
+      objectUrl: URL.createObjectURL(blob),
+    };
+  } catch (e) {
+    console.warn("tellur-live IndexedDB video range cache write failed", e);
+    return null;
+  }
+}
+
+export async function putVideoRangeBlob(
+  url: string,
+  cacheKey: string,
+  group: string,
+  start: number,
+  end: number,
+  blob: Blob,
+): Promise<boolean> {
+  if (!cacheKey || !group || !(end > start)) return false;
+  const existing = await findVideoRangeEntry(group, cacheKey, start);
+  if (existing && Number(existing.end) >= end - EPSILON) {
+    return true;
+  }
+  if (activeMediaCacheKey && activeMediaCacheKey !== cacheKey) {
+    return false;
+  }
+  const id = videoRangeEntryId(cacheKey, group, start, end);
+  const persisted = await putVideoRangeEntry(url, cacheKey, group, start, end, blob);
+  if (activeMediaCacheKey && activeMediaCacheKey !== cacheKey) {
+    await deleteMediaEntriesByCacheKey(cacheKey);
+    return false;
+  }
+  if (persisted) {
+    await deleteSubsumedVideoRangeEntries(cacheKey, group, start, end, id);
+  }
+  return persisted;
+}
+
+export async function getCachedMediaObjectUrl(
+  url: string,
+  cacheKey: string,
+): Promise<CachedMediaObjectUrl | null> {
+  if (!cacheKey) return null;
+  const stored = await getMediaEntry(url, cacheKey);
+  if (!stored) return null;
+  return {
+    objectUrl: URL.createObjectURL(stored.blob),
+    persisted: true,
+    fromCache: true,
+  };
+}
+
+export async function getCachedVideoRange(
+  group: string,
+  cacheKey: string,
+  seconds: number,
+): Promise<CachedVideoRange | null> {
+  const entry = await findVideoRangeEntry(group, cacheKey, seconds);
+  if (!entry) return null;
+  return {
+    start: Number(entry.start),
+    end: Number(entry.end),
+    url: entry.url,
+  };
+}
+
+export async function getNextCachedVideoRange(
+  group: string,
+  cacheKey: string,
+  seconds: number,
+): Promise<CachedVideoRange | null> {
+  const entry = await findNextVideoRangeEntry(group, cacheKey, seconds);
+  if (!entry) return null;
+  return {
+    start: Number(entry.start),
+    end: Number(entry.end),
+    url: entry.url,
+  };
+}
+
+export async function getCachedVideoRangeObjectUrl(
+  group: string,
+  cacheKey: string,
+  seconds: number,
+): Promise<CachedVideoRangeObjectUrl | null> {
+  const entry = await findVideoRangeEntry(group, cacheKey, seconds);
+  if (!entry) return null;
+  return {
+    start: Number(entry.start),
+    end: Number(entry.end),
+    url: entry.url,
+    objectUrl: URL.createObjectURL(entry.blob),
+  };
+}
+
+export async function getCachedVideoRangeBlob(
+  group: string,
+  cacheKey: string,
+  seconds: number,
+): Promise<CachedVideoRangeBlob | null> {
+  const entry = await findVideoRangeEntry(group, cacheKey, seconds);
+  if (!entry) return null;
+  return {
+    start: Number(entry.start),
+    end: Number(entry.end),
+    url: entry.url,
+    blob: entry.blob,
+  };
+}
+
+export async function hasMediaCached(
+  url: string,
+  cacheKey: string,
+): Promise<boolean> {
+  return Boolean(await getMediaEntry(url, cacheKey));
+}
+
+export async function revokeStaleMediaCacheEntries(
+  currentCacheKey: string,
+): Promise<void> {
+  if (!currentCacheKey) {
+    return;
+  }
+  activeMediaCacheKey = currentCacheKey;
+  await Promise.all([
+    deleteStaleMediaEntries(currentCacheKey),
+    cleanupLegacyMediaCaches(),
+  ]);
+}
+
+export async function cleanupLegacyMediaCaches(): Promise<boolean> {
+  if (!legacyCleanupPromise) {
+    const controllerWasLegacy = isLegacyMediaCacheWorker(
+      navigatorWithServiceWorker()?.serviceWorker.controller ?? null,
+    );
+    legacyCleanupPromise = Promise.all([
+      deleteLegacyCacheStorageBuckets(),
+      unregisterLegacyMediaCacheWorker(),
+    ]).then(([, unregistered]) => controllerWasLegacy || unregistered);
+  }
+  return legacyCleanupPromise;
+}
+
+async function getMediaEntry(
+  url: string,
+  cacheKey: string,
+): Promise<MediaCacheEntry | null> {
+  if (!canUseIndexedDb()) return null;
+  try {
+    const db = await openMediaDb();
+    return await requestToPromise<MediaCacheEntry | undefined>(
+      db
+        .transaction(MEDIA_STORE, "readonly")
+        .objectStore(MEDIA_STORE)
+        .get(mediaEntryId(url, cacheKey)),
+    ).then((entry) =>
+      entry && entry.cacheKey === cacheKey ? entry : null,
+    );
+  } catch (e) {
+    console.warn("tellur-live IndexedDB media cache read failed", e);
+    return null;
+  }
+}
+
+async function putMediaEntry(
+  url: string,
+  cacheKey: string,
+  blob: Blob,
+): Promise<boolean> {
+  if (!canUseIndexedDb()) return false;
+  const db = await openMediaDb();
+  const entry: MediaCacheEntry = {
+    id: mediaEntryId(url, cacheKey),
+    cacheKey,
+    url,
+    blob,
+    createdAt: Date.now(),
+    kind: "exact",
+  };
+  const tx = db.transaction(MEDIA_STORE, "readwrite");
+  const done = transactionDone(tx);
+  await requestToPromise(tx.objectStore(MEDIA_STORE).put(entry));
+  await done;
+  return true;
+}
+
+async function putVideoRangeEntry(
+  url: string,
+  cacheKey: string,
+  group: string,
+  start: number,
+  end: number,
+  blob: Blob,
+): Promise<boolean> {
+  if (!canUseIndexedDb()) return false;
+  const db = await openMediaDb();
+  const entry: MediaCacheEntry = {
+    id: videoRangeEntryId(cacheKey, group, start, end),
+    cacheKey,
+    url,
+    blob,
+    createdAt: Date.now(),
+    kind: "video-range",
+    group,
+    start,
+    end,
+  };
+  const tx = db.transaction(MEDIA_STORE, "readwrite");
+  const done = transactionDone(tx);
+  await requestToPromise(tx.objectStore(MEDIA_STORE).put(entry));
+  await done;
+  return true;
+}
+
+async function findVideoRangeEntry(
+  group: string,
+  cacheKey: string,
+  seconds: number,
+): Promise<MediaCacheEntry | null> {
+  if (!group || !cacheKey || !Number.isFinite(seconds) || !canUseIndexedDb()) {
+    return null;
+  }
+  try {
+    const db = await openMediaDb();
+    return await new Promise<MediaCacheEntry | null>((resolve, reject) => {
+      let best: MediaCacheEntry | null = null;
+      const tx = db.transaction(MEDIA_STORE, "readonly");
+      const request = tx
+        .objectStore(MEDIA_STORE)
+        .index("cacheKey")
+        .openCursor(IDBKeyRange.only(cacheKey));
+      request.onerror = () =>
+        reject(request.error ?? new Error("IndexedDB cursor failed"));
+      request.onsuccess = () => {
+        const cursor = request.result;
+        if (!cursor) {
+          resolve(best);
+          return;
+        }
+        const entry = cursor.value as Partial<MediaCacheEntry>;
+        const start = Number(entry.start);
+        const end = Number(entry.end);
+        if (
+          entry.kind === "video-range" &&
+          entry.group === group &&
+          Number.isFinite(start) &&
+          Number.isFinite(end) &&
+          start <= seconds + EPSILON &&
+          end > seconds + EPSILON &&
+          (!best || start > Number(best.start))
+        ) {
+          best = cursor.value as MediaCacheEntry;
+        }
+        cursor.continue();
+      };
+    });
+  } catch (e) {
+    console.warn("tellur-live IndexedDB video range cache read failed", e);
+    return null;
+  }
+}
+
+async function findNextVideoRangeEntry(
+  group: string,
+  cacheKey: string,
+  seconds: number,
+): Promise<MediaCacheEntry | null> {
+  if (!group || !cacheKey || !Number.isFinite(seconds) || !canUseIndexedDb()) {
+    return null;
+  }
+  try {
+    const db = await openMediaDb();
+    return await new Promise<MediaCacheEntry | null>((resolve, reject) => {
+      let best: MediaCacheEntry | null = null;
+      const tx = db.transaction(MEDIA_STORE, "readonly");
+      const request = tx
+        .objectStore(MEDIA_STORE)
+        .index("cacheKey")
+        .openCursor(IDBKeyRange.only(cacheKey));
+      request.onerror = () =>
+        reject(request.error ?? new Error("IndexedDB cursor failed"));
+      request.onsuccess = () => {
+        const cursor = request.result;
+        if (!cursor) {
+          resolve(best);
+          return;
+        }
+        const entry = cursor.value as Partial<MediaCacheEntry>;
+        const start = Number(entry.start);
+        const end = Number(entry.end);
+        if (
+          entry.kind === "video-range" &&
+          entry.group === group &&
+          Number.isFinite(start) &&
+          Number.isFinite(end) &&
+          end > seconds + EPSILON &&
+          start > seconds + EPSILON &&
+          (!best || start < Number(best.start))
+        ) {
+          best = cursor.value as MediaCacheEntry;
+        }
+        cursor.continue();
+      };
+    });
+  } catch (e) {
+    console.warn("tellur-live IndexedDB next video range read failed", e);
+    return null;
+  }
+}
+
+async function deleteStaleMediaEntries(keepCacheKey: string): Promise<void> {
+  if (!canUseIndexedDb()) return;
+  const db = await openMediaDb();
+  await new Promise<void>((resolve, reject) => {
+    const tx = db.transaction(MEDIA_STORE, "readwrite");
+    tx.oncomplete = () => resolve();
+    tx.onerror = () => reject(tx.error ?? new Error("IndexedDB delete failed"));
+    tx.onabort = () => reject(tx.error ?? new Error("IndexedDB delete aborted"));
+
+    const cursorRequest = tx.objectStore(MEDIA_STORE).openCursor();
+    cursorRequest.onerror = () =>
+      reject(cursorRequest.error ?? new Error("IndexedDB cursor failed"));
+    cursorRequest.onsuccess = () => {
+      const cursor = cursorRequest.result;
+      if (!cursor) return;
+      const entry = cursor.value as Partial<MediaCacheEntry>;
+      if (entry.cacheKey !== keepCacheKey || entry.kind !== "video-range") {
+        cursor.delete();
+      }
+      cursor.continue();
+    };
+  });
+}
+
+async function deleteMediaEntriesByCacheKey(cacheKey: string): Promise<void> {
+  if (!cacheKey || !canUseIndexedDb()) return;
+  const db = await openMediaDb();
+  await new Promise<void>((resolve, reject) => {
+    const tx = db.transaction(MEDIA_STORE, "readwrite");
+    tx.oncomplete = () => resolve();
+    tx.onerror = () => reject(tx.error ?? new Error("IndexedDB delete failed"));
+    tx.onabort = () => reject(tx.error ?? new Error("IndexedDB delete aborted"));
+
+    const cursorRequest = tx
+      .objectStore(MEDIA_STORE)
+      .index("cacheKey")
+      .openCursor(IDBKeyRange.only(cacheKey));
+    cursorRequest.onerror = () =>
+      reject(cursorRequest.error ?? new Error("IndexedDB cursor failed"));
+    cursorRequest.onsuccess = () => {
+      const cursor = cursorRequest.result;
+      if (!cursor) return;
+      cursor.delete();
+      cursor.continue();
+    };
+  });
+}
+
+async function deleteSubsumedVideoRangeEntries(
+  cacheKey: string,
+  group: string,
+  start: number,
+  end: number,
+  keepId: string,
+): Promise<void> {
+  if (!cacheKey || !group || !canUseIndexedDb()) return;
+  const db = await openMediaDb();
+  await new Promise<void>((resolve, reject) => {
+    const tx = db.transaction(MEDIA_STORE, "readwrite");
+    tx.oncomplete = () => resolve();
+    tx.onerror = () => reject(tx.error ?? new Error("IndexedDB delete failed"));
+    tx.onabort = () => reject(tx.error ?? new Error("IndexedDB delete aborted"));
+
+    const cursorRequest = tx
+      .objectStore(MEDIA_STORE)
+      .index("cacheKey")
+      .openCursor(IDBKeyRange.only(cacheKey));
+    cursorRequest.onerror = () =>
+      reject(cursorRequest.error ?? new Error("IndexedDB cursor failed"));
+    cursorRequest.onsuccess = () => {
+      const cursor = cursorRequest.result;
+      if (!cursor) return;
+      const entry = cursor.value as Partial<MediaCacheEntry>;
+      const entryStart = Number(entry.start);
+      const entryEnd = Number(entry.end);
+      if (
+        entry.id !== keepId &&
+        entry.kind === "video-range" &&
+        entry.group === group &&
+        Number.isFinite(entryStart) &&
+        Number.isFinite(entryEnd) &&
+        entryStart >= start - EPSILON &&
+        entryEnd <= end + EPSILON
+      ) {
+        cursor.delete();
+      }
+      cursor.continue();
+    };
+  });
+}
+
+function openMediaDb(): Promise<IDBDatabase> {
+  if (dbPromise) return dbPromise;
+  dbPromise = new Promise((resolve, reject) => {
+    const request = indexedDB.open(MEDIA_DB_NAME, MEDIA_DB_VERSION);
+    request.onerror = () =>
+      reject(request.error ?? new Error("IndexedDB open failed"));
+    request.onblocked = () => reject(new Error("IndexedDB upgrade blocked"));
+    request.onupgradeneeded = (event) => {
+      const db = request.result;
+      const oldVersion = event.oldVersion;
+      if (
+        oldVersion > 0 &&
+        oldVersion < MEDIA_DB_VERSION &&
+        db.objectStoreNames.contains(MEDIA_STORE)
+      ) {
+        db.deleteObjectStore(MEDIA_STORE);
+      }
+      const store = db.objectStoreNames.contains(MEDIA_STORE)
+        ? request.transaction!.objectStore(MEDIA_STORE)
+        : db.createObjectStore(MEDIA_STORE, { keyPath: "id" });
+      if (!store.indexNames.contains("cacheKey")) {
+        store.createIndex("cacheKey", "cacheKey", { unique: false });
+      }
+      if (!store.indexNames.contains("group")) {
+        store.createIndex("group", "group", { unique: false });
+      }
+    };
+    request.onsuccess = () => {
+      const db = request.result;
+      db.onversionchange = () => {
+        db.close();
+        dbPromise = null;
+      };
+      resolve(db);
+    };
+  });
+  dbPromise.catch(() => {
+    dbPromise = null;
+  });
+  return dbPromise;
+}
+
+function requestToPromise<T>(request: IDBRequest<T>): Promise<T> {
+  return new Promise((resolve, reject) => {
+    request.onerror = () =>
+      reject(request.error ?? new Error("IndexedDB request failed"));
+    request.onsuccess = () => resolve(request.result);
+  });
+}
+
+function transactionDone(tx: IDBTransaction): Promise<void> {
+  return new Promise((resolve, reject) => {
+    tx.oncomplete = () => resolve();
+    tx.onerror = () => reject(tx.error ?? new Error("IndexedDB transaction failed"));
+    tx.onabort = () => reject(tx.error ?? new Error("IndexedDB transaction aborted"));
+  });
+}
+
+function canUseIndexedDb(): boolean {
+  return typeof indexedDB !== "undefined" && typeof Blob !== "undefined";
+}
+
+function mediaEntryId(url: string, cacheKey: string): string {
+  return `${cacheKey}\n${url}`;
+}
+
+function videoRangeEntryId(
+  cacheKey: string,
+  group: string,
+  start: number,
+  end: number,
+): string {
+  return `${cacheKey}\nvideo-range\n${group}\n${start.toFixed(4)}\n${end.toFixed(4)}`;
+}
+
+async function deleteLegacyCacheStorageBuckets(): Promise<void> {
+  if (typeof window === "undefined" || !("caches" in window)) return;
+  const names = await window.caches.keys();
+  await Promise.all(
+    names
+      .filter((name) => name.startsWith(LEGACY_MEDIA_CACHE_PREFIX))
+      .map((name) => window.caches.delete(name)),
+  );
+}
+
+async function unregisterLegacyMediaCacheWorker(): Promise<boolean> {
+  const serviceWorker = navigatorWithServiceWorker()?.serviceWorker;
+  if (!serviceWorker) return false;
+  const registrations = await serviceWorker.getRegistrations();
+  const legacyRegistrations = registrations.filter((registration) =>
+    [
+      registration.active,
+      registration.installing,
+      registration.waiting,
+    ].some(isLegacyMediaCacheWorker),
+  );
+  const results = await Promise.all(
+    legacyRegistrations.map((registration) => registration.unregister()),
+  );
+  return results.some(Boolean);
+}
+
+function navigatorWithServiceWorker(): Navigator | null {
+  return typeof navigator !== "undefined" && "serviceWorker" in navigator
+    ? navigator
+    : null;
+}
+
+function isLegacyMediaCacheWorker(
+  worker: ServiceWorker | null | undefined,
+): boolean {
+  return Boolean(worker?.scriptURL.endsWith("/tellur-live-sw.js"));
+}
diff --git a/tellur-live/web/src/components/Header.tsx b/tellur-live/web/src/components/Header.tsx
new file mode 100644
index 0000000..071059b
--- /dev/null
+++ b/tellur-live/web/src/components/Header.tsx
@@ -0,0 +1,71 @@
+import {
+  AreaChart,
+  CircleCheck,
+  LoaderCircle,
+  TriangleAlert,
+} from "lucide-react";
+import type { ServerInfo } from "../types";
+
+type CompileStatus = ServerInfo["compileStatus"] | "disconnected";
+
+interface HeaderProps {
+  projectName: string;
+  url: string;
+  compileStatus: CompileStatus;
+  compileError: string | null;
+}
+
+export function Header({
+  projectName,
+  url,
+  compileStatus,
+  compileError,
+}: HeaderProps) {
+  const status = compileStatusView(compileStatus);
+  const Icon = status.Icon;
+
+  return (
+    <header className="header">
+      <span className="header__logo">
+        <AreaChart
+          className="header__logo-mark"
+          size={14}
+          strokeWidth={2.4}
+          aria-hidden="true"
+        />
+        Tellur
+      </span>
+      <span className="header__project">
+        <span className="header__project-name">{projectName}</span>
+        <span className="header__project-divider">—</span>
+        <span className="header__project-url">{url}</span>
+        <span
+          className={`header__compile header__compile--${compileStatus}`}
+          title={compileError ?? status.label}
+        >
+          <Icon
+            className="header__compile-icon"
+            size={13}
+            strokeWidth={2.2}
+            aria-hidden="true"
+          />
+          <span>{status.label}</span>
+        </span>
+      </span>
+      <span className="header__spacer" />
+    </header>
+  );
+}
+
+function compileStatusView(status: CompileStatus) {
+  switch (status) {
+    case "compiling":
+      return { label: "Compiling...", Icon: LoaderCircle };
+    case "failed":
+      return { label: "Failed", Icon: TriangleAlert };
+    case "disconnected":
+      return { label: "Disconnected", Icon: TriangleAlert };
+    case "compiled":
+      return { label: "Compiled", Icon: CircleCheck };
+  }
+}
diff --git a/tellur-live/web/src/components/Preview.tsx b/tellur-live/web/src/components/Preview.tsx
new file mode 100644
index 0000000..9c52d37
--- /dev/null
+++ b/tellur-live/web/src/components/Preview.tsx
@@ -0,0 +1,67 @@
+import { forwardRef, type CSSProperties } from "react";
+
+interface PreviewProps {
+  imageSrc: string | null;
+  imageVisible: boolean;
+  videoVisible: boolean;
+  activeVideoSlot: 0 | 1;
+  aspect: number;
+  error: string | null;
+}
+
+interface PreviewRefs {
+  videoRefs: [
+    React.RefObject<HTMLVideoElement>,
+    React.RefObject<HTMLVideoElement>,
+  ];
+  imgRef: React.RefObject<HTMLImageElement>;
+}
+
+export const Preview = forwardRef<HTMLDivElement, PreviewProps & PreviewRefs>(
+  function Preview(
+    {
+      imageSrc,
+      imageVisible,
+      videoVisible,
+      activeVideoSlot,
+      aspect,
+      error,
+      videoRefs,
+      imgRef,
+    },
+    ref,
+  ) {
+    const safeAspect = Number.isFinite(aspect) && aspect > 0 ? aspect : 16 / 9;
+    const previewStyle: CSSProperties & { "--preview-aspect": string } = {
+      "--preview-aspect": String(safeAspect),
+    };
+
+    return (
+      <section className="preview" ref={ref} style={previewStyle}>
+        <div className="preview__frame">
+          <div className="preview__media">
+            {videoRefs.map((videoRef, slot) => (
+              <video
+                key={slot}
+                ref={videoRef}
+                className={
+                  videoVisible && activeVideoSlot === slot ? "" : "hidden"
+                }
+                muted
+                playsInline
+                preload="auto"
+              />
+            ))}
+            <img
+              ref={imgRef}
+              className={imageVisible ? "" : "hidden"}
+              alt=""
+              src={imageSrc ?? undefined}
+            />
+          </div>
+          {error ? <div className="preview__error">{error}</div> : null}
+        </div>
+      </section>
+    );
+  },
+);
diff --git a/tellur-live/web/src/components/PreviewScrubber.tsx b/tellur-live/web/src/components/PreviewScrubber.tsx
new file mode 100644
index 0000000..2857999
--- /dev/null
+++ b/tellur-live/web/src/components/PreviewScrubber.tsx
@@ -0,0 +1,83 @@
+import { useCallback, useRef, useState } from "react";
+
+interface PreviewScrubberProps {
+  seconds: number;
+  duration: number;
+  onSeek: (seconds: number) => void;
+}
+
+export function PreviewScrubber(props: PreviewScrubberProps) {
+  const { seconds, duration, onSeek } = props;
+  const scrubberRef = useRef<HTMLDivElement>(null);
+  const draggingRef = useRef(false);
+  const [dragging, setDragging] = useState(false);
+  const safeDuration = Math.max(duration, 0.001);
+  const progress = Math.max(0, Math.min(1, seconds / safeDuration));
+
+  const seekFromClientX = useCallback(
+    (clientX: number) => {
+      const scrubber = scrubberRef.current;
+      if (!scrubber || !duration) return;
+      const rect = scrubber.getBoundingClientRect();
+      const ratio = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+      onSeek(Math.max(0, Math.min(duration, ratio * duration)));
+    },
+    [duration, onSeek],
+  );
+
+  const beginDrag = useCallback((e: React.PointerEvent<HTMLDivElement>) => {
+    if (e.button !== 0) return;
+    e.preventDefault();
+    draggingRef.current = true;
+    setDragging(true);
+    seekFromClientX(e.clientX);
+    e.currentTarget.setPointerCapture(e.pointerId);
+  }, [seekFromClientX]);
+
+  const handlePointerMove = useCallback(
+    (e: React.PointerEvent<HTMLDivElement>) => {
+      if (!draggingRef.current) return;
+      e.preventDefault();
+      seekFromClientX(e.clientX);
+    },
+    [seekFromClientX],
+  );
+
+  const endDrag = useCallback((e: React.PointerEvent<HTMLDivElement>) => {
+    if (!draggingRef.current) return;
+    draggingRef.current = false;
+    setDragging(false);
+    if (e.currentTarget.hasPointerCapture(e.pointerId)) {
+      e.currentTarget.releasePointerCapture(e.pointerId);
+    }
+  }, []);
+
+  return (
+    <div
+      className={
+        dragging
+          ? "preview-scrubber preview-scrubber--dragging"
+          : "preview-scrubber"
+      }
+      ref={scrubberRef}
+      onPointerDown={beginDrag}
+      onPointerMove={handlePointerMove}
+      onPointerUp={endDrag}
+      onPointerCancel={endDrag}
+      onLostPointerCapture={endDrag}
+    >
+      <div className="preview-scrubber__rail">
+        <span
+          className="preview-scrubber__progress"
+          style={{ width: `${progress * 100}%` }}
+        />
+        <span className="preview-scrubber__cap preview-scrubber__cap--start" />
+        <span
+          className="preview-scrubber__thumb"
+          style={{ left: `${progress * 100}%` }}
+        />
+        <span className="preview-scrubber__cap preview-scrubber__cap--end" />
+      </div>
+    </div>
+  );
+}
diff --git a/tellur-live/web/src/components/TabsRow.tsx b/tellur-live/web/src/components/TabsRow.tsx
new file mode 100644
index 0000000..4f93152
--- /dev/null
+++ b/tellur-live/web/src/components/TabsRow.tsx
@@ -0,0 +1,207 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { CornerUpRight, SquareMenu } from "lucide-react";
+import { formatTimelineStart, formatTimecode } from "../formatTime";
+import {
+  clamp,
+  clampTimelineViewport,
+  getVisibleDuration,
+  type TimelineViewport,
+} from "../timelineViewport";
+import type { CacheRange, TimelineInfo } from "../types";
+
+interface TabsRowProps {
+  timeline: TimelineInfo | null;
+  seconds: number;
+  fps: number;
+  cacheRanges: CacheRange[];
+  viewport: TimelineViewport;
+  primaryLabel: string;
+  secondaryLabel?: string;
+  onSeek: (seconds: number) => void;
+}
+
+// Compound row that holds the panel tabs on the left and the timeline
+// "cursor strip" (playhead chip + green cache bar) on the right. Both
+// halves are aligned via the same side-width grid as the timeline body
+// below so the cursor strip's pixel coordinates match the clip area.
+export function TabsRow(props: TabsRowProps) {
+  const {
+    timeline,
+    seconds,
+    fps,
+    cacheRanges,
+    viewport,
+    primaryLabel,
+    secondaryLabel,
+    onSeek,
+  } = props;
+
+  const cursorRef = useRef<HTMLDivElement>(null);
+  const draggingSeekRef = useRef(false);
+  const [width, setWidth] = useState(0);
+  const [draggingSeek, setDraggingSeek] = useState(false);
+
+  useEffect(() => {
+    const el = cursorRef.current;
+    if (!el) return;
+    const observer = new ResizeObserver(() => setWidth(el.clientWidth));
+    observer.observe(el);
+    setWidth(el.clientWidth);
+    return () => observer.disconnect();
+  }, []);
+
+  const duration = Math.max(timeline?.duration ?? 0.001, 0.001);
+  const normalizedViewport = clampTimelineViewport(viewport, duration);
+  const visibleDuration = getVisibleDuration(
+    duration,
+    normalizedViewport.zoom,
+  );
+  const viewportEnd = normalizedViewport.start + visibleDuration;
+  const x =
+    ((seconds - normalizedViewport.start) / visibleDuration) * width;
+  const playheadVisible = x >= 0 && x <= width;
+  const frame = Math.max(0, Math.round(seconds * fps));
+  const viewportStartFrame = Math.max(
+    0,
+    Math.round(normalizedViewport.start * fps),
+  );
+
+  const seekFromClientX = useCallback(
+    (clientX: number) => {
+      const cursor = cursorRef.current;
+      if (!cursor || !timeline) return;
+      const rect = cursor.getBoundingClientRect();
+      const ratio = clamp((clientX - rect.left) / rect.width, 0, 1);
+      onSeek(
+        clamp(
+          normalizedViewport.start + ratio * visibleDuration,
+          0,
+          duration,
+        ),
+      );
+    },
+    [
+      duration,
+      normalizedViewport.start,
+      onSeek,
+      timeline,
+      visibleDuration,
+    ],
+  );
+
+  const handleSeekPointerDown = useCallback(
+    (e: React.PointerEvent<HTMLDivElement>) => {
+      if (e.button !== 0) return;
+      e.preventDefault();
+      draggingSeekRef.current = true;
+      setDraggingSeek(true);
+      seekFromClientX(e.clientX);
+      e.currentTarget.setPointerCapture(e.pointerId);
+    },
+    [seekFromClientX],
+  );
+
+  const handleSeekPointerMove = useCallback(
+    (e: React.PointerEvent<HTMLDivElement>) => {
+      if (!draggingSeekRef.current) return;
+      e.preventDefault();
+      seekFromClientX(e.clientX);
+    },
+    [seekFromClientX],
+  );
+
+  const endSeekDrag = useCallback((e: React.PointerEvent<HTMLDivElement>) => {
+    if (!draggingSeekRef.current) return;
+    draggingSeekRef.current = false;
+    setDraggingSeek(false);
+    if (e.currentTarget.hasPointerCapture(e.pointerId)) {
+      e.currentTarget.releasePointerCapture(e.pointerId);
+    }
+  }, []);
+
+  return (
+    <div className="tabsrow">
+      <div className="tabsrow__left">
+        <span className="tabsrow__tab tabsrow__tab--primary tabsrow__tab--active">
+          {primaryLabel}
+        </span>
+        {secondaryLabel ? (
+          <span className="tabsrow__tab tabsrow__tab--secondary">
+            <SquareMenu size={13} strokeWidth={1.8} />
+            {secondaryLabel}
+          </span>
+        ) : null}
+      </div>
+      <div
+        className={
+          draggingSeek
+            ? "tabsrow__cursor tabsrow__cursor--dragging"
+            : "tabsrow__cursor"
+        }
+        ref={cursorRef}
+        onPointerDown={handleSeekPointerDown}
+        onPointerMove={handleSeekPointerMove}
+        onPointerUp={endSeekDrag}
+        onPointerCancel={endSeekDrag}
+        onLostPointerCapture={endSeekDrag}
+      >
+        <div className="tabsrow__cursor-inner">
+          <span className="tabsrow__viewport-start">
+            <CornerUpRight
+              className="tabsrow__viewport-start-icon"
+              size={18}
+              strokeWidth={1.8}
+            />
+            <span className="tabsrow__viewport-start-text">
+              <span>
+                {formatTimelineStart(normalizedViewport.start, fps)}
+              </span>
+              <span className="tabsrow__viewport-start-frame">
+                {viewportStartFrame}F
+              </span>
+            </span>
+          </span>
+          {cacheRanges.map((range, i) => {
+            const visibleStart = Math.max(
+              range.start,
+              normalizedViewport.start,
+            );
+            const visibleEnd = Math.min(range.end, viewportEnd);
+            if (visibleEnd <= visibleStart) return null;
+
+            const left =
+              ((visibleStart - normalizedViewport.start) /
+                visibleDuration) *
+              width;
+            const w = Math.max(
+              2,
+              ((visibleEnd - visibleStart) / visibleDuration) * width,
+            );
+            return (
+              <div
+                className="tabsrow__cache"
+                key={i}
+                style={{ left: `${left}px`, width: `${w}px` }}
+              />
+            );
+          })}
+          {playheadVisible ? (
+            <>
+              <span
+                className="tabsrow__playhead-line"
+                style={{ left: `${x}px` }}
+              />
+              <span
+                className="tabsrow__chip"
+                style={{ left: `${x}px` }}
+              >
+                <span>{formatTimecode(seconds, fps)}</span>
+                <span className="tabsrow__chip-sub">{frame}F</span>
+              </span>
+            </>
+          ) : null}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/tellur-live/web/src/components/Timeline.tsx b/tellur-live/web/src/components/Timeline.tsx
new file mode 100644
index 0000000..6fb80e5
--- /dev/null
+++ b/tellur-live/web/src/components/Timeline.tsx
@@ -0,0 +1,268 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import {
+  MIN_TIMELINE_ZOOM,
+  MAX_TIMELINE_ZOOM,
+  clamp,
+  clampTimelineViewport,
+  getVisibleDuration,
+  type TimelineViewport,
+  type TimelineViewportChange,
+} from "../timelineViewport";
+import type { TimelineInfo } from "../types";
+
+interface TimelineProps {
+  timeline: TimelineInfo | null;
+  seconds: number;
+  viewport: TimelineViewport;
+  onSeek: (seconds: number) => void;
+  onViewportChange: (next: TimelineViewportChange) => void;
+}
+
+interface TrackDef {
+  id: string;
+  name: string;
+  alt: boolean;
+  muteActive?: boolean;
+  color?: string;
+}
+
+const TRACKS: TrackDef[] = [
+  { id: "video-1", name: "Video 1", alt: false, color: "#7292e8" },
+  { id: "extra-1", name: "", alt: true },
+];
+
+export function Timeline(props: TimelineProps) {
+  const { timeline, seconds, viewport, onSeek, onViewportChange } = props;
+  const duration = Math.max(timeline?.duration ?? 0.001, 0.001);
+
+  const bodyRef = useRef<HTMLDivElement>(null);
+  const draggingSeekRef = useRef(false);
+  const [bodyWidth, setBodyWidth] = useState(0);
+  const [draggingSeek, setDraggingSeek] = useState(false);
+
+  useEffect(() => {
+    const el = bodyRef.current;
+    if (!el) return;
+    const observer = new ResizeObserver(() => setBodyWidth(el.clientWidth));
+    observer.observe(el);
+    setBodyWidth(el.clientWidth);
+    return () => observer.disconnect();
+  }, []);
+
+  const normalizedViewport = clampTimelineViewport(viewport, duration);
+  const visibleDuration = getVisibleDuration(
+    duration,
+    normalizedViewport.zoom,
+  );
+  const innerWidth = Math.max(
+    bodyWidth * normalizedViewport.zoom,
+    bodyWidth,
+  );
+  const viewportX = clamp(
+    (normalizedViewport.start / duration) * innerWidth,
+    0,
+    Math.max(0, innerWidth - bodyWidth),
+  );
+  const playheadX = Math.max(
+    0,
+    Math.min(innerWidth, (seconds / duration) * innerWidth),
+  );
+
+  const seekFromClientX = useCallback(
+    (clientX: number) => {
+      const body = bodyRef.current;
+      if (!body || bodyWidth <= 0) return;
+      const rect = body.getBoundingClientRect();
+      const x = clientX - rect.left;
+      onSeek(
+        clamp(
+          normalizedViewport.start + (x / bodyWidth) * visibleDuration,
+          0,
+          duration,
+        ),
+      );
+    },
+    [
+      bodyWidth,
+      duration,
+      normalizedViewport.start,
+      onSeek,
+      visibleDuration,
+    ],
+  );
+
+  const handleSeekPointerDown = useCallback(
+    (e: React.PointerEvent<HTMLDivElement>) => {
+      if (e.button !== 0) return;
+      e.preventDefault();
+      draggingSeekRef.current = true;
+      setDraggingSeek(true);
+      seekFromClientX(e.clientX);
+      e.currentTarget.setPointerCapture(e.pointerId);
+    },
+    [seekFromClientX],
+  );
+
+  const handleSeekPointerMove = useCallback(
+    (e: React.PointerEvent<HTMLDivElement>) => {
+      if (!draggingSeekRef.current) return;
+      e.preventDefault();
+      seekFromClientX(e.clientX);
+    },
+    [seekFromClientX],
+  );
+
+  const endSeekDrag = useCallback((e: React.PointerEvent<HTMLDivElement>) => {
+    if (!draggingSeekRef.current) return;
+    draggingSeekRef.current = false;
+    setDraggingSeek(false);
+    if (e.currentTarget.hasPointerCapture(e.pointerId)) {
+      e.currentTarget.releasePointerCapture(e.pointerId);
+    }
+  }, []);
+
+  const handleWheel = useCallback(
+    (e: React.WheelEvent<HTMLDivElement>) => {
+      if (!e.shiftKey || bodyWidth <= 0) return;
+
+      e.preventDefault();
+      e.stopPropagation();
+
+      const rect = e.currentTarget.getBoundingClientRect();
+      const pointerRatio = clamp((e.clientX - rect.left) / bodyWidth, 0, 1);
+      const delta = normalizeWheelDelta(e, bodyWidth);
+
+      if (e.metaKey || e.ctrlKey) {
+        const anchorSeconds =
+          normalizedViewport.start + pointerRatio * visibleDuration;
+        const nextZoom = clamp(
+          normalizedViewport.zoom * Math.exp(-delta * 0.0025),
+          MIN_TIMELINE_ZOOM,
+          MAX_TIMELINE_ZOOM,
+        );
+        const nextVisibleDuration = getVisibleDuration(duration, nextZoom);
+
+        onViewportChange({
+          start: anchorSeconds - pointerRatio * nextVisibleDuration,
+          zoom: nextZoom,
+        });
+        return;
+      }
+
+      onViewportChange({
+        start:
+          normalizedViewport.start + delta * (visibleDuration / bodyWidth),
+        zoom: normalizedViewport.zoom,
+      });
+    },
+    [
+      bodyWidth,
+      duration,
+      normalizedViewport.start,
+      normalizedViewport.zoom,
+      onViewportChange,
+      visibleDuration,
+    ],
+  );
+
+  return (
+    <section className="timeline">
+      <aside className="timeline__side">
+        {TRACKS.map((track) =>
+          track.name ? (
+            <div className="track-head" key={track.id}>
+              <span className="track-head__name">{track.name}</span>
+              <button
+                className={
+                  track.muteActive
+                    ? "track-head__btn track-head__btn--active"
+                    : "track-head__btn"
+                }
+                type="button"
+                title="Mute"
+              >
+                M
+              </button>
+              <button
+                className="track-head__btn"
+                type="button"
+                title="Solo"
+              >
+                S
+              </button>
+              <span
+                className="track-head__color"
+                style={{ background: track.color }}
+              />
+            </div>
+          ) : (
+            <div
+              key={track.id}
+              className="track-head track-head--empty"
+            />
+          ),
+        )}
+      </aside>
+      <div
+        className={
+          draggingSeek
+            ? "timeline__body timeline__body--dragging"
+            : "timeline__body"
+        }
+        ref={bodyRef}
+        onWheel={handleWheel}
+        onPointerDown={handleSeekPointerDown}
+        onPointerMove={handleSeekPointerMove}
+        onPointerUp={endSeekDrag}
+        onPointerCancel={endSeekDrag}
+        onLostPointerCapture={endSeekDrag}
+      >
+        <div
+          className="timeline__tracks"
+          style={{
+            width: `${innerWidth}px`,
+            transform: `translateX(${-viewportX}px)`,
+          }}
+        >
+          {TRACKS.map((track) => (
+            <div
+              key={track.id}
+              className={
+                track.alt
+                  ? "timeline__track timeline__track--alt"
+                  : "timeline__track"
+              }
+            >
+              {timeline && track.id === "video-1" ? (
+                <div
+                  className="timeline__clip"
+                  style={{ left: 0, width: `${innerWidth}px` }}
+                >
+                  <span className="timeline__clip-label">
+                    {timeline.title}
+                  </span>
+                </div>
+              ) : null}
+            </div>
+          ))}
+          <div
+            className="timeline__playhead"
+            style={{ left: `${playheadX}px` }}
+          />
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function normalizeWheelDelta(
+  e: React.WheelEvent<HTMLDivElement>,
+  pageSize: number,
+): number {
+  const rawDelta =
+    Math.abs(e.deltaX) > Math.abs(e.deltaY) ? e.deltaX : e.deltaY;
+
+  if (e.deltaMode === 1) return rawDelta * 16;
+  if (e.deltaMode === 2) return rawDelta * pageSize;
+  return rawDelta;
+}
diff --git a/tellur-live/web/src/components/TimelineViewportBar.tsx b/tellur-live/web/src/components/TimelineViewportBar.tsx
new file mode 100644
index 0000000..0484b76
--- /dev/null
+++ b/tellur-live/web/src/components/TimelineViewportBar.tsx
@@ -0,0 +1,171 @@
+import { useRef, useState } from "react";
+import {
+  MAX_TIMELINE_ZOOM,
+  clamp,
+  clampTimelineViewport,
+  getSafeDuration,
+  getVisibleDuration,
+  type TimelineViewport,
+  type TimelineViewportChange,
+} from "../timelineViewport";
+
+interface TimelineViewportBarProps {
+  duration: number;
+  viewport: TimelineViewport;
+  onViewportChange: (next: TimelineViewportChange) => void;
+}
+
+type DragKind = "move" | "start" | "end";
+
+interface DragState {
+  kind: DragKind;
+  grabRatio: number;
+}
+
+const MIN_WINDOW_RATIO = 1 / MAX_TIMELINE_ZOOM;
+
+export function TimelineViewportBar(props: TimelineViewportBarProps) {
+  const { duration, viewport, onViewportChange } = props;
+  const railRef = useRef<HTMLDivElement>(null);
+  const dragRef = useRef<DragState | null>(null);
+  const [dragging, setDragging] = useState<DragKind | null>(null);
+
+  const safeDuration = getSafeDuration(duration);
+  const normalizedViewport = clampTimelineViewport(viewport, safeDuration);
+  const visibleDuration = getVisibleDuration(
+    safeDuration,
+    normalizedViewport.zoom,
+  );
+  const windowRatio = visibleDuration / safeDuration;
+  const startRatio = normalizedViewport.start / safeDuration;
+  const endRatio = Math.min(1, startRatio + windowRatio);
+
+  const ratioFromEvent = (e: React.PointerEvent<HTMLDivElement>) => {
+    const rail = railRef.current;
+    if (!rail) return 0;
+    const rect = rail.getBoundingClientRect();
+    return clamp((e.clientX - rect.left) / rect.width, 0, 1);
+  };
+
+  const beginDrag = (
+    kind: DragKind,
+    e: React.PointerEvent<HTMLDivElement>,
+  ) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    const ratio = ratioFromEvent(e);
+    dragRef.current = {
+      kind,
+      grabRatio:
+        kind === "move" ? clamp(ratio - startRatio, 0, windowRatio) : 0,
+    };
+    setDragging(kind);
+    railRef.current?.setPointerCapture(e.pointerId);
+  };
+
+  const handleRailPointerDown = (e: React.PointerEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    const ratio = ratioFromEvent(e);
+    const nextStartRatio = clamp(ratio - windowRatio / 2, 0, 1 - windowRatio);
+
+    onViewportChange({
+      start: nextStartRatio * safeDuration,
+      zoom: normalizedViewport.zoom,
+    });
+
+    dragRef.current = { kind: "move", grabRatio: windowRatio / 2 };
+    setDragging("move");
+    e.currentTarget.setPointerCapture(e.pointerId);
+  };
+
+  const handlePointerMove = (e: React.PointerEvent<HTMLDivElement>) => {
+    const drag = dragRef.current;
+    if (!drag) return;
+    e.preventDefault();
+
+    const ratio = ratioFromEvent(e);
+
+    if (drag.kind === "move") {
+      const nextStartRatio = clamp(
+        ratio - drag.grabRatio,
+        0,
+        1 - windowRatio,
+      );
+      onViewportChange({
+        start: nextStartRatio * safeDuration,
+        zoom: normalizedViewport.zoom,
+      });
+      return;
+    }
+
+    if (drag.kind === "start") {
+      const nextStartRatio = clamp(ratio, 0, endRatio - MIN_WINDOW_RATIO);
+      const nextWindowRatio = endRatio - nextStartRatio;
+      onViewportChange({
+        start: nextStartRatio * safeDuration,
+        zoom: 1 / nextWindowRatio,
+      });
+      return;
+    }
+
+    const nextEndRatio = clamp(
+      ratio,
+      startRatio + MIN_WINDOW_RATIO,
+      1,
+    );
+    const nextWindowRatio = nextEndRatio - startRatio;
+    onViewportChange({
+      start: normalizedViewport.start,
+      zoom: 1 / nextWindowRatio,
+    });
+  };
+
+  const endDrag = (e: React.PointerEvent<HTMLDivElement>) => {
+    if (!dragRef.current) return;
+    dragRef.current = null;
+    setDragging(null);
+    if (e.currentTarget.hasPointerCapture(e.pointerId)) {
+      e.currentTarget.releasePointerCapture(e.pointerId);
+    }
+  };
+
+  return (
+    <div className="zoom-bar">
+      <div
+        className={
+          dragging
+            ? "zoom-bar__rail zoom-bar__rail--dragging"
+            : "zoom-bar__rail"
+        }
+        ref={railRef}
+        onPointerDown={handleRailPointerDown}
+        onPointerMove={handlePointerMove}
+        onPointerUp={endDrag}
+        onPointerCancel={endDrag}
+      >
+        <div
+          className={
+            dragging === "move"
+              ? "zoom-bar__viewport zoom-bar__viewport--dragging"
+              : "zoom-bar__viewport"
+          }
+          style={{
+            left: `${startRatio * 100}%`,
+            width: `${windowRatio * 100}%`,
+          }}
+          onPointerDown={(e) => beginDrag("move", e)}
+        >
+          <div
+            className="zoom-bar__handle zoom-bar__handle--start"
+            onPointerDown={(e) => beginDrag("start", e)}
+          />
+          <div
+            className="zoom-bar__handle zoom-bar__handle--end"
+            onPointerDown={(e) => beginDrag("end", e)}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/tellur-live/web/src/components/Transport.tsx b/tellur-live/web/src/components/Transport.tsx
new file mode 100644
index 0000000..07102dd
--- /dev/null
+++ b/tellur-live/web/src/components/Transport.tsx
@@ -0,0 +1,131 @@
+import { Pause, Play, SkipBack, SkipForward } from "lucide-react";
+import { formatTimecode } from "../formatTime";
+import type { PreviewResolution } from "../types";
+
+interface ResolutionOption extends PreviewResolution {
+  label: string;
+}
+
+interface TransportProps {
+  seconds: number;
+  duration: number;
+  fps: number;
+  measuredFps: number;
+  resolution: PreviewResolution;
+  resolutionOptions: ResolutionOption[];
+  playing: boolean;
+  onTogglePlay: () => void;
+  onStep: (delta: number) => void;
+  onRewind: () => void;
+  onResolutionChange: (resolution: PreviewResolution) => void;
+  onFpsChange: (fps: number) => void;
+}
+
+const FPS_OPTIONS = [60, 30, 24, 15, 12];
+
+export function Transport(props: TransportProps) {
+  const {
+    seconds,
+    duration,
+    fps,
+    measuredFps,
+    resolution,
+    resolutionOptions,
+    playing,
+    onTogglePlay,
+    onStep,
+    onRewind,
+    onResolutionChange,
+    onFpsChange,
+  } = props;
+  const selectedResolutionKey = resolutionKey(resolution);
+
+  return (
+    <div className="transport">
+      <div className="transport__left">
+        <span className="transport__timecode">
+          <span className="transport__timecode-cur">
+            {formatTimecode(seconds, fps)}
+          </span>
+          <span className="transport__timecode-sep">/</span>
+          <span className="transport__timecode-total">
+            {formatTimecode(duration, fps)}
+          </span>
+        </span>
+        <span className="transport__fps-readout">
+          {measuredFps.toFixed(2)} fps
+        </span>
+      </div>
+      <div className="transport__center">
+        <button
+          type="button"
+          className="transport__btn"
+          aria-label="Rewind"
+          onClick={onRewind}
+        >
+          <SkipBack size={14} strokeWidth={1.6} />
+        </button>
+        <button
+          type="button"
+          className="transport__btn transport__btn--play"
+          aria-label={playing ? "Pause" : "Play"}
+          onClick={onTogglePlay}
+        >
+          {playing ? (
+            <Pause size={18} strokeWidth={1.4} fill="currentColor" />
+          ) : (
+            <Play size={18} strokeWidth={1.4} fill="currentColor" />
+          )}
+        </button>
+        <button
+          type="button"
+          className="transport__btn"
+          aria-label="Step forward"
+          onClick={() => onStep(1)}
+        >
+          <SkipForward size={14} strokeWidth={1.6} />
+        </button>
+      </div>
+      <div className="transport__right">
+        <label className="transport__control">
+          <select
+            value={fps}
+            onChange={(e) => onFpsChange(Number(e.target.value))}
+          >
+            {FPS_OPTIONS.map((value) => (
+              <option key={value} value={value}>
+                {value} fps
+              </option>
+            ))}
+          </select>
+        </label>
+        <label className="transport__control">
+          <select
+            value={selectedResolutionKey}
+            onChange={(e) => {
+              const option = resolutionOptions.find(
+                (candidate) => resolutionKey(candidate) === e.target.value,
+              );
+              if (option) {
+                onResolutionChange({
+                  width: option.width,
+                  height: option.height,
+                });
+              }
+            }}
+          >
+            {resolutionOptions.map((option) => (
+              <option key={resolutionKey(option)} value={resolutionKey(option)}>
+                {option.label}
+              </option>
+            ))}
+          </select>
+        </label>
+      </div>
+    </div>
+  );
+}
+
+function resolutionKey(resolution: PreviewResolution): string {
+  return `${resolution.width}x${resolution.height}`;
+}
diff --git a/tellur-live/web/src/formatTime.ts b/tellur-live/web/src/formatTime.ts
new file mode 100644
index 0000000..8ff20fa
--- /dev/null
+++ b/tellur-live/web/src/formatTime.ts
@@ -0,0 +1,42 @@
+// Format seconds as HH:MM:SS.FF where FF is centi-frames (subseconds * 100).
+// Mirrors the readout in the reference UI (e.g. "00:00:07.18").
+export function formatTimecode(seconds: number, fps: number): string {
+  if (!Number.isFinite(seconds) || seconds < 0) seconds = 0;
+  const totalFrames = Math.round(seconds * fps);
+  const ff = totalFrames % fps;
+  const totalSec = Math.floor(totalFrames / fps);
+  const ss = totalSec % 60;
+  const mm = Math.floor(totalSec / 60) % 60;
+  const hh = Math.floor(totalSec / 3600);
+  return `${pad(hh)}:${pad(mm)}:${pad(ss)}.${pad(ff)}`;
+}
+
+// Same as formatTimecode but uses a `:` between seconds and frame index
+// — matches the chip label "00:00:07:18" sitting on the playhead.
+export function formatTimecodeColon(seconds: number, fps: number): string {
+  if (!Number.isFinite(seconds) || seconds < 0) seconds = 0;
+  const totalFrames = Math.round(seconds * fps);
+  const ff = totalFrames % fps;
+  const totalSec = Math.floor(totalFrames / fps);
+  const ss = totalSec % 60;
+  const mm = Math.floor(totalSec / 60) % 60;
+  const hh = Math.floor(totalSec / 3600);
+  return `${pad(hh)}:${pad(mm)}:${pad(ss)}:${pad(ff)}`;
+}
+
+export function formatTimelineStart(seconds: number, fps: number): string {
+  if (!Number.isFinite(seconds) || seconds < 0) seconds = 0;
+  const totalFrames = Math.round(seconds * fps);
+  const ff = totalFrames % fps;
+  const totalSec = Math.floor(totalFrames / fps);
+  const ss = totalSec % 60;
+  const mm = Math.floor(totalSec / 60) % 60;
+  const hh = Math.floor(totalSec / 3600);
+
+  if (hh > 0) return `${pad(hh)}:${pad(mm)}:${pad(ss)}.${pad(ff)}`;
+  return `${pad(mm)}:${pad(ss)}.${pad(ff)}`;
+}
+
+function pad(n: number): string {
+  return n.toString().padStart(2, "0");
+}
diff --git a/tellur-live/web/src/main.tsx b/tellur-live/web/src/main.tsx
new file mode 100644
index 0000000..83bb441
--- /dev/null
+++ b/tellur-live/web/src/main.tsx
@@ -0,0 +1,12 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { App } from "./App";
+import "./styles/global.css";
+
+const root = document.getElementById("root");
+if (!root) throw new Error("root element missing");
+createRoot(root).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);
diff --git a/tellur-live/web/src/preview/usePreview.ts b/tellur-live/web/src/preview/usePreview.ts
new file mode 100644
index 0000000..e1b1d72
--- /dev/null
+++ b/tellur-live/web/src/preview/usePreview.ts
@@ -0,0 +1,2005 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import type { RefObject } from "react";
+import { frameUrl, videoUrl } from "../api";
+import {
+  cacheScopeKey,
+  getCachedVideoRangeBlob,
+  getCachedVideoRange,
+  getNextCachedVideoRange,
+  loadCacheRanges,
+  mergeCacheRange,
+  putVideoRangeBlob,
+  revokeStaleCacheRanges,
+  revokeStaleMediaCacheEntries,
+  saveCacheRanges,
+} from "../cache";
+import type { CachedVideoRangeBlob } from "../cache";
+import type {
+  CacheRange,
+  PreviewResolution,
+  ServerInfo,
+  TimelineInfo,
+} from "../types";
+
+const EPSILON = 0.001;
+const PRELOAD_DELAY_MS = 260;
+const STOPPED_STREAM_CACHE_SECONDS = 3;
+const DEBUG_STORAGE_KEY = "tellur-live:debug";
+const MP4_MIME_TYPES = [
+  'video/mp4; codecs="avc1.42E01E"',
+  'video/mp4; codecs="avc1.4D401E"',
+  'video/mp4; codecs="avc1.64001E"',
+  "video/mp4",
+];
+
+type VideoSlot = 0 | 1;
+type StreamingMode = "stopped" | "playback";
+type StreamCacheOwner =
+  | { kind: "session"; id: number }
+  | { kind: "pipeline"; id: number };
+
+interface PlaybackState {
+  kind: "cache" | "stream" | "pipeline";
+  slot: VideoSlot;
+  start: number;
+}
+
+interface PlaybackPipeline {
+  id: number;
+  token: number;
+  slot: VideoSlot;
+  start: number;
+  group: string;
+  cacheKey: string;
+  mediaSource: MediaSource;
+  controller: AbortController;
+  sourceBuffer: SourceBuffer | null;
+  appendChain: Promise<void>;
+  started: boolean;
+  starting: Promise<void> | null;
+  saveOnAbort: boolean;
+  liveSegment: LivePipelineSegment | null;
+}
+
+interface LivePipelineSegment {
+  start: number;
+  end: number;
+  url: string;
+  chunks: ArrayBuffer[];
+  bufferedEnd: number;
+  saved: boolean;
+}
+
+interface StreamingSession {
+  id: number;
+  token: number;
+  mode: StreamingMode;
+  slot: VideoSlot;
+  start: number;
+  end: number;
+  stoppedTargetEnd: number | null;
+  url: string;
+  cacheKey: string;
+  group: string;
+  mediaSource: MediaSource;
+  controller: AbortController;
+  chunks: ArrayBuffer[];
+  sourceBuffer: SourceBuffer | null;
+  appendChain: Promise<void>;
+  opened: Promise<void>;
+  bufferedSeconds: number;
+  saveOnFinalize: boolean;
+  clearOnFinalize: boolean;
+}
+
+export interface PreviewState {
+  seconds: number;
+  playing: boolean;
+  cacheRanges: CacheRange[];
+  error: string | null;
+  imageSrc: string | null;
+  imageVisible: boolean;
+  videoVisible: boolean;
+  activeVideoSlot: VideoSlot;
+}
+
+export interface PreviewControls {
+  state: PreviewState;
+  videoRefs: [RefObject<HTMLVideoElement>, RefObject<HTMLVideoElement>];
+  videoRef: RefObject<HTMLVideoElement>;
+  imgRef: RefObject<HTMLImageElement>;
+  setSeconds: (s: number) => void;
+  togglePlay: () => void;
+  stepFrame: (delta: number) => void;
+  rewindToStart: () => void;
+}
+
+export interface PreviewSettings {
+  info: ServerInfo | null;
+  timeline: TimelineInfo | null;
+  resolution: PreviewResolution;
+  fps: number;
+}
+
+export function usePreview(settings: PreviewSettings): PreviewControls {
+  const { info, timeline, resolution, fps } = settings;
+  const hasServerInfo = info != null;
+  const timelineId = timeline?.id ?? "";
+  const timelineDuration = timeline?.duration ?? 0;
+  const pluginCacheKey = info?.cacheKey ?? "";
+
+  const videoARef = useRef<HTMLVideoElement>(null);
+  const videoBRef = useRef<HTMLVideoElement>(null);
+  const imgRef = useRef<HTMLImageElement>(null);
+
+  const [seconds, setSecondsState] = useState(0);
+  const [playing, setPlaying] = useState(false);
+  const [cacheRanges, setCacheRanges] = useState<CacheRange[]>([]);
+  const [streamCacheRanges, setStreamCacheRanges] = useState<CacheRange[]>([]);
+  const [error, setError] = useState<string | null>(null);
+  const [imageSrc, setImageSrc] = useState<string | null>(null);
+  const [imageVisible, setImageVisible] = useState(true);
+  const [videoVisible, setVideoVisible] = useState(false);
+  const [activeVideoSlot, setActiveVideoSlotState] = useState<VideoSlot>(0);
+
+  const secondsRef = useRef(0);
+  const playingRef = useRef(false);
+  const displayTokenRef = useRef(0);
+  const pngTokenRef = useRef(0);
+  const pendingPngRef = useRef(false);
+  const pendingPngUrlRef = useRef<string | null>(null);
+  const queuedPngRef = useRef(false);
+  const preloadTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const playbackTokenRef = useRef(0);
+  const rafRef = useRef<number | null>(null);
+  const cacheScopeRef = useRef("");
+  const lastCacheKeyRef = useRef("");
+  const immediatePreloadRef = useRef(false);
+  const imageObjectUrlRef = useRef<string | null>(null);
+  const videoObjectUrlsRef = useRef<[string | null, string | null]>([
+    null,
+    null,
+  ]);
+  const activeVideoSlotRef = useRef<VideoSlot>(0);
+  const heldVideoSlotRef = useRef<VideoSlot | null>(null);
+  const playbackRef = useRef<PlaybackState | null>(null);
+  const streamingSessionRef = useRef<StreamingSession | null>(null);
+  const playbackPipelineRef = useRef<PlaybackPipeline | null>(null);
+  const streamCacheOwnerRef = useRef<StreamCacheOwner | null>(null);
+  const streamIdRef = useRef(0);
+  const pipelineIdRef = useRef(0);
+  const startStoppedStreamRef = useRef<
+    (fromSeconds: number, targetEnd?: number) => void
+  >(() => {});
+
+  const resolvedResolution = useCallback(() => {
+    return {
+      width: Math.max(1, Math.round(resolution.width)),
+      height: Math.max(1, Math.round(resolution.height)),
+    };
+  }, [resolution.height, resolution.width]);
+
+  const videoGop = useCallback(() => Math.max(1, Math.floor(fps / 4)), [fps]);
+
+  const currentCacheScope = useCallback((): string => {
+    if (!timelineId || !pluginCacheKey) return "";
+    const r = resolvedResolution();
+    return cacheScopeKey({
+      cacheKey: pluginCacheKey,
+      timelineId,
+      width: r.width,
+      height: r.height,
+      fps,
+      gop: videoGop(),
+      crf: 23,
+      videoSegmentSeconds: 0,
+    });
+  }, [timelineId, pluginCacheKey, resolvedResolution, fps, videoGop]);
+
+  const videoRangeGroup = useCallback((): string => {
+    if (!timelineId) return "";
+    const r = resolvedResolution();
+    return [
+      "range-v1",
+      timelineId,
+      `${r.width}x${r.height}`,
+      String(fps),
+      String(videoGop()),
+      "23",
+    ].join("|");
+  }, [timelineId, resolvedResolution, fps, videoGop]);
+
+  const cachedVideoUrl = useCallback(
+    (start: number, end?: number): string => {
+      if (!timelineId || !pluginCacheKey) return "";
+      const r = resolvedResolution();
+      const duration =
+        end != null && end < timelineDuration - EPSILON
+          ? Math.max(0, end - start)
+          : undefined;
+      return videoUrl({
+        timelineId,
+        time: start,
+        width: r.width,
+        height: r.height,
+        fps,
+        gop: videoGop(),
+        crf: 23,
+        duration,
+        cacheKey: pluginCacheKey,
+      });
+    },
+    [
+      timelineId,
+      pluginCacheKey,
+      timelineDuration,
+      resolvedResolution,
+      fps,
+      videoGop,
+    ],
+  );
+
+  const liveVideoUrl = useCallback(
+    (start: number, end?: number): string => {
+      if (!timelineId) return "";
+      const r = resolvedResolution();
+      const duration =
+        end != null && end < timelineDuration - EPSILON
+          ? Math.max(0, end - start)
+          : undefined;
+      return videoUrl({
+        timelineId,
+        time: start,
+        width: r.width,
+        height: r.height,
+        fps,
+        gop: videoGop(),
+        crf: 23,
+        duration,
+        cacheKey: "",
+      });
+    },
+    [timelineId, timelineDuration, fps, resolvedResolution, videoGop],
+  );
+
+  const videoElement = useCallback(
+    (slot: VideoSlot): HTMLVideoElement | null =>
+      slot === 0 ? videoARef.current : videoBRef.current,
+    [],
+  );
+
+  const setActiveVideoSlot = useCallback((slot: VideoSlot) => {
+    activeVideoSlotRef.current = slot;
+    setActiveVideoSlotState(slot);
+  }, []);
+
+  const clampSeconds = useCallback(
+    (value: number) =>
+      Math.max(0, Math.min(Number.isFinite(value) ? value : 0, timelineDuration)),
+    [timelineDuration],
+  );
+
+  const setPreviewSecondsState = useCallback(
+    (value: number) => {
+      const next = clampSeconds(value);
+      secondsRef.current = next;
+      setSecondsState(next);
+    },
+    [clampSeconds],
+  );
+
+  const setPreviewPlayingState = useCallback((value: boolean) => {
+    playingRef.current = value;
+    setPlaying(value);
+    previewDebug("playing", {
+      value,
+      seconds: secondsRef.current,
+      displayToken: displayTokenRef.current,
+    });
+  }, []);
+
+  const streamCacheOwnerMatches = useCallback((owner: StreamCacheOwner) => {
+    const current = streamCacheOwnerRef.current;
+    return current?.kind === owner.kind && current.id === owner.id;
+  }, []);
+
+  const setOwnedStreamCacheRange = useCallback(
+    (owner: StreamCacheOwner, range: CacheRange) => {
+      streamCacheOwnerRef.current = owner;
+      setStreamCacheRanges([range]);
+      previewDebug("stream-cache:set", { owner, range });
+    },
+    [],
+  );
+
+  const clearOwnedStreamCacheRange = useCallback(
+    (owner: StreamCacheOwner) => {
+      if (!streamCacheOwnerMatches(owner)) {
+        previewDebug("stream-cache:clear:ignored", {
+          owner,
+          current: streamCacheOwnerRef.current,
+        });
+        return;
+      }
+      streamCacheOwnerRef.current = null;
+      setStreamCacheRanges([]);
+      previewDebug("stream-cache:clear", { owner });
+    },
+    [streamCacheOwnerMatches],
+  );
+
+  const recordCacheRanges = useCallback((ranges: CacheRange[]) => {
+    if (ranges.length === 0) return;
+    setCacheRanges((prev) => {
+      let next = prev;
+      for (const range of ranges) {
+        next = mergeCacheRange(next, range.start, range.end);
+      }
+      saveCacheRanges(cacheScopeRef.current, next);
+      previewDebug("cache-ranges:record", { ranges, next });
+      return next;
+    });
+  }, []);
+
+  const recordCacheRange = useCallback(
+    (start: number, end: number) => {
+      recordCacheRanges([{ start, end }]);
+    },
+    [recordCacheRanges],
+  );
+
+  const visibleCacheRanges = useMemo(() => {
+    let next = cacheRanges;
+    for (const range of streamCacheRanges) {
+      next = mergeCacheRange(next, range.start, range.end);
+    }
+    return next;
+  }, [cacheRanges, streamCacheRanges]);
+
+  const setImageObjectUrl = useCallback((url: string) => {
+    const previous = imageObjectUrlRef.current;
+    imageObjectUrlRef.current = url;
+    setImageSrc(url);
+    if (previous && previous !== url) {
+      URL.revokeObjectURL(previous);
+    }
+  }, []);
+
+  const clearVideoSlot = useCallback(
+    (slot: VideoSlot) => {
+      previewDebug("video-slot:clear", {
+        slot,
+        held: heldVideoSlotRef.current,
+        active: activeVideoSlotRef.current,
+      });
+      if (heldVideoSlotRef.current === slot) {
+        heldVideoSlotRef.current = null;
+      }
+      const video = videoElement(slot);
+      if (video) {
+        video.pause();
+        video.onloadedmetadata = null;
+        video.onloadeddata = null;
+        video.onerror = null;
+        video.onended = null;
+        video.removeAttribute("src");
+      }
+      const previous = videoObjectUrlsRef.current[slot];
+      videoObjectUrlsRef.current[slot] = null;
+      if (previous) URL.revokeObjectURL(previous);
+      if (video) {
+        try {
+          video.load();
+        } catch {
+          // ignore
+        }
+      }
+    },
+    [videoElement],
+  );
+
+  const releaseHeldVideoSlotSoon = useCallback(() => {
+    const slot = heldVideoSlotRef.current;
+    if (slot == null) return;
+    heldVideoSlotRef.current = null;
+    requestAnimationFrame(() => {
+      if (playbackRef.current?.slot === slot) return;
+      if (streamingSessionRef.current?.slot === slot) return;
+      clearVideoSlot(slot);
+    });
+  }, [clearVideoSlot]);
+
+  const setVideoObjectUrl = useCallback(
+    (slot: VideoSlot, url: string) => {
+      const video = videoElement(slot);
+      if (!video) return;
+      const previous = videoObjectUrlsRef.current[slot];
+      videoObjectUrlsRef.current[slot] = url;
+      video.src = url;
+      previewDebug("video-slot:set-url", {
+        slot,
+        replaced: Boolean(previous && previous !== url),
+      });
+      if (previous && previous !== url) {
+        URL.revokeObjectURL(previous);
+      }
+    },
+    [videoElement],
+  );
+
+  const stopRaf = useCallback(() => {
+    if (rafRef.current != null) {
+      cancelAnimationFrame(rafRef.current);
+      rafRef.current = null;
+    }
+  }, []);
+
+  const abortStreamingSession = useCallback(
+    (save: boolean, clear: boolean = true) => {
+      const session = streamingSessionRef.current;
+      if (!session) return;
+      previewDebug("session:abort", {
+        id: session.id,
+        mode: session.mode,
+        start: session.start,
+        end: session.end,
+        bufferedSeconds: session.bufferedSeconds,
+        save,
+        clear,
+      });
+      session.saveOnFinalize = save;
+      streamingSessionRef.current = null;
+      session.controller.abort();
+      if (clear) {
+        session.clearOnFinalize = false;
+        clearVideoSlot(session.slot);
+      } else {
+        session.clearOnFinalize = false;
+      }
+      if (!save) clearOwnedStreamCacheRange({ kind: "session", id: session.id });
+    },
+    [clearOwnedStreamCacheRange, clearVideoSlot],
+  );
+
+  const savePipelineLiveSegment = useCallback(
+    async (
+      pipeline: PlaybackPipeline,
+      live: LivePipelineSegment,
+    ): Promise<void> => {
+      if (live.saved || live.chunks.length === 0) return;
+      const videoSeconds = videoElement(pipeline.slot)?.currentTime ?? 0;
+      const playedEnd =
+        videoSeconds >= live.start - EPSILON && videoSeconds <= live.end + EPSILON
+          ? videoSeconds
+          : live.bufferedEnd;
+      const end = Math.min(live.end, Math.max(live.bufferedEnd, playedEnd));
+      if (end <= live.start + EPSILON) return;
+      const cacheUrl = cachedVideoUrl(live.start, end);
+      if (!cacheUrl) return;
+      live.saved = true;
+      previewDebug("pipeline:live-save", {
+        id: pipeline.id,
+        liveStart: live.start,
+        liveEnd: live.end,
+        bufferedEnd: live.bufferedEnd,
+        playedEnd,
+        saveEnd: end,
+        chunks: live.chunks.length,
+        aborted: pipeline.controller.signal.aborted,
+      });
+      const blob = new Blob(live.chunks, { type: "video/mp4" });
+      const persisted = await putVideoRangeBlob(
+        cacheUrl,
+        pipeline.cacheKey,
+        pipeline.group,
+        live.start,
+        end,
+        blob,
+      );
+      if (persisted) recordCacheRange(live.start, end);
+    },
+    [cachedVideoUrl, recordCacheRange, videoElement],
+  );
+
+  const abortPlaybackPipeline = useCallback(
+    (save: boolean, clear: boolean = true) => {
+      const pipeline = playbackPipelineRef.current;
+      if (!pipeline) return;
+      previewDebug("pipeline:abort", {
+        id: pipeline.id,
+        start: pipeline.start,
+        live: pipeline.liveSegment
+          ? {
+              start: pipeline.liveSegment.start,
+              end: pipeline.liveSegment.end,
+              bufferedEnd: pipeline.liveSegment.bufferedEnd,
+            }
+          : null,
+        save,
+        clear,
+      });
+      pipeline.saveOnAbort = save;
+      playbackPipelineRef.current = null;
+      pipeline.controller.abort();
+      if (clear) clearVideoSlot(pipeline.slot);
+      if (!save) {
+        clearOwnedStreamCacheRange({ kind: "pipeline", id: pipeline.id });
+      }
+    },
+    [clearOwnedStreamCacheRange, clearVideoSlot],
+  );
+
+  const clearAllVideo = useCallback(() => {
+    heldVideoSlotRef.current = null;
+    abortPlaybackPipeline(false);
+    abortStreamingSession(false);
+    playbackRef.current = null;
+    clearVideoSlot(0);
+    clearVideoSlot(1);
+  }, [abortPlaybackPipeline, abortStreamingSession, clearVideoSlot]);
+
+  const findFirstCacheGap = useCallback(
+    async (fromSeconds: number): Promise<number> => {
+      const group = videoRangeGroup();
+      if (!group || !pluginCacheKey) return clampSeconds(fromSeconds);
+      let gap = clampSeconds(fromSeconds);
+      while (gap < timelineDuration - EPSILON) {
+        const cached = await getCachedVideoRange(group, pluginCacheKey, gap);
+        if (!cached || cached.end <= gap + EPSILON) break;
+        gap = Math.min(cached.end, timelineDuration);
+      }
+      return gap;
+    },
+    [videoRangeGroup, pluginCacheKey, timelineDuration, clampSeconds],
+  );
+
+  const findNextCacheStart = useCallback(
+    async (fromSeconds: number): Promise<number> => {
+      const group = videoRangeGroup();
+      if (!group || !pluginCacheKey) return timelineDuration;
+      const next = await getNextCachedVideoRange(
+        group,
+        pluginCacheKey,
+        clampSeconds(fromSeconds),
+      );
+      return next ? Math.min(next.start, timelineDuration) : timelineDuration;
+    },
+    [videoRangeGroup, pluginCacheKey, timelineDuration, clampSeconds],
+  );
+
+  const startStreamingSession = useCallback(
+    (
+      startSeconds: number,
+      endSeconds: number,
+      slot: VideoSlot,
+      mode: StreamingMode,
+      token: number,
+      stoppedTargetEnd: number | null = null,
+    ): StreamingSession | null => {
+      const video = videoElement(slot);
+      const group = videoRangeGroup();
+      const sessionEnd = mode === "stopped" ? timelineDuration : endSeconds;
+      const url =
+        mode === "stopped"
+          ? liveVideoUrl(startSeconds)
+          : liveVideoUrl(startSeconds, endSeconds);
+      if (
+        !video ||
+        !group ||
+        !pluginCacheKey ||
+        !url ||
+        sessionEnd <= startSeconds + EPSILON ||
+        typeof MediaSource === "undefined"
+      ) {
+        previewDebug("session:start:skipped", {
+          hasVideo: Boolean(video),
+          hasGroup: Boolean(group),
+          hasCacheKey: Boolean(pluginCacheKey),
+          hasUrl: Boolean(url),
+          start: startSeconds,
+          end: sessionEnd,
+          mediaSource: typeof MediaSource !== "undefined",
+        });
+        return null;
+      }
+
+      const controller = new AbortController();
+      const mediaSource = new MediaSource();
+      const objectUrl = URL.createObjectURL(mediaSource);
+      let resolveOpened!: () => void;
+      let rejectOpened!: (reason?: unknown) => void;
+      const opened = new Promise<void>((resolve, reject) => {
+        resolveOpened = resolve;
+        rejectOpened = reject;
+      });
+      const session: StreamingSession = {
+        id: ++streamIdRef.current,
+        token,
+        mode,
+        slot,
+        start: startSeconds,
+        end: sessionEnd,
+        stoppedTargetEnd,
+        url,
+        cacheKey: pluginCacheKey,
+        group,
+        mediaSource,
+        controller,
+        chunks: [],
+        sourceBuffer: null,
+        appendChain: Promise.resolve(),
+        opened,
+        bufferedSeconds: 0,
+        saveOnFinalize: true,
+        clearOnFinalize: mode === "stopped",
+      };
+      previewDebug("session:start", {
+        id: session.id,
+        mode,
+        slot,
+        start: startSeconds,
+        end: sessionEnd,
+        stoppedTargetEnd,
+        token,
+      });
+
+      setVideoObjectUrl(slot, objectUrl);
+      try {
+        video.load();
+      } catch {
+        // ignore
+      }
+
+      void (async () => {
+        try {
+          await waitForMediaSourceOpen(mediaSource);
+          if (controller.signal.aborted) {
+            rejectOpened(new DOMException("Aborted", "AbortError"));
+            return;
+          }
+          const sourceBuffer = mediaSource.addSourceBuffer(selectMp4MimeType());
+          session.sourceBuffer = sourceBuffer;
+          resolveOpened();
+          previewDebug("session:opened", {
+            id: session.id,
+            mode: session.mode,
+            readyState: mediaSource.readyState,
+          });
+
+          const response = await fetch(url, {
+            cache: "no-store",
+            signal: controller.signal,
+          });
+          if (!response.ok) {
+            throw new Error(`${url} failed: ${response.status}`);
+          }
+          const reader = response.body?.getReader();
+          if (!reader) throw new Error("video stream has no body");
+
+          for (;;) {
+            const { done, value } = await reader.read();
+            if (done || !value) break;
+            const chunk = value.buffer.slice(
+              value.byteOffset,
+              value.byteOffset + value.byteLength,
+            ) as ArrayBuffer;
+            session.chunks.push(chunk);
+            session.appendChain = session.appendChain.then(() =>
+              appendSourceBuffer(sourceBuffer, chunk.slice(0)),
+            );
+            await session.appendChain;
+            session.bufferedSeconds = Math.max(
+              session.bufferedSeconds,
+              sourceBufferEnd(sourceBuffer),
+            );
+            setOwnedStreamCacheRange(
+              { kind: "session", id: session.id },
+              {
+                start: session.start,
+                end: Math.min(
+                  session.end,
+                  session.start + session.bufferedSeconds,
+                ),
+              },
+            );
+            if (
+              session.mode === "stopped" &&
+              session.stoppedTargetEnd != null &&
+              session.start + session.bufferedSeconds >=
+                session.stoppedTargetEnd - EPSILON
+            ) {
+              previewDebug("session:stopped-target-hit", {
+                id: session.id,
+                start: session.start,
+                bufferedSeconds: session.bufferedSeconds,
+                targetEnd: session.stoppedTargetEnd,
+              });
+              controller.abort();
+              break;
+            }
+          }
+        } catch (e) {
+          if (!controller.signal.aborted && !isAbortError(e)) {
+            previewDebug("session:error", { id: session.id, error: String(e) });
+            rejectOpened(e);
+            if (session.token === displayTokenRef.current) setError(String(e));
+          }
+        } finally {
+          try {
+            await session.appendChain;
+          } catch {
+            // The source may already have been detached by a user action.
+          }
+          if (mediaSource.readyState === "open") {
+            try {
+              mediaSource.endOfStream();
+            } catch {
+              // ignore
+            }
+          }
+
+          const videoDuration = videoElement(slot)?.currentTime ?? 0;
+          const duration = Math.max(session.bufferedSeconds, videoDuration);
+          const end = Math.min(session.end, session.start + duration);
+          previewDebug("session:finalize", {
+            id: session.id,
+            mode: session.mode,
+            start: session.start,
+            end,
+            sessionEnd: session.end,
+            bufferedSeconds: session.bufferedSeconds,
+            videoDuration,
+            chunks: session.chunks.length,
+            save: session.saveOnFinalize,
+            clear: session.clearOnFinalize,
+            aborted: session.controller.signal.aborted,
+            token: session.token,
+            currentToken: displayTokenRef.current,
+          });
+          if (
+            session.saveOnFinalize &&
+            session.chunks.length > 0 &&
+            end > session.start + EPSILON
+          ) {
+            const cacheUrl = cachedVideoUrl(session.start, end);
+            if (cacheUrl) {
+              const blob = new Blob(session.chunks, { type: "video/mp4" });
+              const persisted = await putVideoRangeBlob(
+                cacheUrl,
+                session.cacheKey,
+                session.group,
+                session.start,
+                end,
+                blob,
+              );
+              if (persisted) recordCacheRange(session.start, end);
+            }
+          }
+
+          clearOwnedStreamCacheRange({ kind: "session", id: session.id });
+          if (streamingSessionRef.current?.id === session.id) {
+            streamingSessionRef.current = null;
+          }
+          if (session.clearOnFinalize) {
+            clearVideoSlot(slot);
+          }
+          if (
+            session.mode === "stopped" &&
+            session.stoppedTargetEnd != null &&
+            !session.controller.signal.aborted &&
+            end < session.stoppedTargetEnd - EPSILON &&
+            session.token === displayTokenRef.current
+          ) {
+            startStoppedStreamRef.current(end, session.stoppedTargetEnd);
+          }
+        }
+      })();
+
+      return session;
+    },
+    [
+      cachedVideoUrl,
+      clearVideoSlot,
+      clearOwnedStreamCacheRange,
+      liveVideoUrl,
+      pluginCacheKey,
+      recordCacheRange,
+      setOwnedStreamCacheRange,
+      setVideoObjectUrl,
+      timelineDuration,
+      videoElement,
+      videoRangeGroup,
+    ],
+  );
+
+  const startStoppedStream = useCallback(
+    (
+      fromSeconds: number,
+      targetEnd: number = Math.min(
+        fromSeconds + STOPPED_STREAM_CACHE_SECONDS,
+        timelineDuration,
+      ),
+    ) => {
+      if (!timelineId || !hasServerInfo || !pluginCacheKey || playingRef.current) {
+        previewDebug("stopped-stream:skip-sync", {
+          fromSeconds,
+          targetEnd,
+          hasTimeline: Boolean(timelineId),
+          hasServerInfo,
+          hasCacheKey: Boolean(pluginCacheKey),
+          playing: playingRef.current,
+        });
+        return;
+      }
+      const token = displayTokenRef.current;
+      previewDebug("stopped-stream:plan", { fromSeconds, targetEnd, token });
+      void (async () => {
+        const cappedTargetEnd = Math.min(targetEnd, timelineDuration);
+        const gap = await findFirstCacheGap(fromSeconds);
+        const nextCacheStart = await findNextCacheStart(gap);
+        const streamEnd = Math.min(cappedTargetEnd, nextCacheStart);
+        if (
+          token !== displayTokenRef.current ||
+          playingRef.current ||
+          gap >= cappedTargetEnd - EPSILON ||
+          streamEnd <= gap + EPSILON
+        ) {
+          previewDebug("stopped-stream:skip-async", {
+            fromSeconds,
+            targetEnd,
+            cappedTargetEnd,
+            gap,
+            nextCacheStart,
+            streamEnd,
+            token,
+            currentToken: displayTokenRef.current,
+            playing: playingRef.current,
+          });
+          return;
+        }
+        const current = streamingSessionRef.current;
+        if (
+          current &&
+          current.mode === "stopped" &&
+          !current.controller.signal.aborted
+        ) {
+          const currentBufferedEnd = current.start + current.bufferedSeconds;
+          if (
+            Math.abs(current.start - gap) <= EPSILON ||
+            (current.start <= gap + EPSILON &&
+              currentBufferedEnd >= gap - EPSILON)
+          ) {
+            if (current.stoppedTargetEnd != null) {
+              current.stoppedTargetEnd = Math.max(
+                current.stoppedTargetEnd,
+                cappedTargetEnd,
+              );
+            }
+            previewDebug("stopped-stream:reuse", {
+              currentId: current.id,
+              currentStart: current.start,
+              currentBufferedEnd,
+              gap,
+              cappedTargetEnd,
+            });
+            return;
+          }
+        }
+        previewDebug("stopped-stream:start", {
+          fromSeconds,
+          gap,
+          streamEnd,
+          cappedTargetEnd,
+          nextCacheStart,
+          slot: activeVideoSlotRef.current,
+          abortCurrent: Boolean(streamingSessionRef.current),
+        });
+        abortStreamingSession(false);
+        const session = startStreamingSession(
+          gap,
+          streamEnd,
+          activeVideoSlotRef.current,
+          "stopped",
+          token,
+          cappedTargetEnd,
+        );
+        if (session) streamingSessionRef.current = session;
+      })();
+    },
+    [
+      timelineId,
+      timelineDuration,
+      hasServerInfo,
+      pluginCacheKey,
+      findFirstCacheGap,
+      findNextCacheStart,
+      abortStreamingSession,
+      startStreamingSession,
+    ],
+  );
+  startStoppedStreamRef.current = startStoppedStream;
+
+  useEffect(() => {
+    const scope = currentCacheScope();
+    const cacheKeyChanged =
+      Boolean(pluginCacheKey) && lastCacheKeyRef.current !== pluginCacheKey;
+    lastCacheKeyRef.current = pluginCacheKey;
+    immediatePreloadRef.current = cacheKeyChanged;
+    cacheScopeRef.current = scope;
+    setCacheRanges(scope ? loadCacheRanges(scope) : []);
+    streamCacheOwnerRef.current = null;
+    setStreamCacheRanges([]);
+    revokeStaleCacheRanges(pluginCacheKey);
+    revokeStaleMediaCacheEntries(pluginCacheKey).catch((e) => {
+      console.warn("tellur-live media cache revoke failed", e);
+    });
+    clearAllVideo();
+  }, [currentCacheScope, pluginCacheKey, clearAllVideo]);
+
+  const schedulePreload = useCallback(
+    (delay: number = PRELOAD_DELAY_MS) => {
+      if (preloadTimerRef.current) clearTimeout(preloadTimerRef.current);
+      if (!timelineId || !hasServerInfo || !pluginCacheKey || playingRef.current) {
+        previewDebug("preload:skip", {
+          delay,
+          hasTimeline: Boolean(timelineId),
+          hasServerInfo,
+          hasCacheKey: Boolean(pluginCacheKey),
+          playing: playingRef.current,
+        });
+        return;
+      }
+      previewDebug("preload:schedule", { delay, seconds: secondsRef.current });
+      preloadTimerRef.current = setTimeout(() => {
+        preloadTimerRef.current = null;
+        const currentSeconds = secondsRef.current;
+        previewDebug("preload:fire", { seconds: currentSeconds });
+        startStoppedStream(currentSeconds);
+      }, delay);
+    },
+    [
+      timelineId,
+      hasServerInfo,
+      pluginCacheKey,
+      startStoppedStream,
+    ],
+  );
+
+  const requestPngFrame = useCallback(
+    (force: boolean = false, atSeconds?: number) => {
+      if (!timelineId || !hasServerInfo || !pluginCacheKey) return;
+      const res = resolvedResolution();
+      const frameSeconds = clampSeconds(atSeconds ?? secondsRef.current);
+      const url = frameUrl({
+        timelineId,
+        time: frameSeconds,
+        width: res.width,
+        height: res.height,
+        fps,
+        cacheKey: pluginCacheKey,
+      });
+      if (pendingPngRef.current) {
+        if (pendingPngUrlRef.current === url && !queuedPngRef.current) {
+          if (preloadTimerRef.current) clearTimeout(preloadTimerRef.current);
+          return;
+        }
+        queuedPngRef.current = true;
+        if (force) displayTokenRef.current += 1;
+        if (preloadTimerRef.current) clearTimeout(preloadTimerRef.current);
+        return;
+      }
+      pendingPngRef.current = true;
+      queuedPngRef.current = false;
+      if (preloadTimerRef.current) clearTimeout(preloadTimerRef.current);
+      const id = ++displayTokenRef.current;
+      const pngId = ++pngTokenRef.current;
+      pendingPngUrlRef.current = url;
+
+      loadUncachedMediaObjectUrl(url)
+        .then((objectUrl) => {
+          const img = new Image();
+          img.onload = () => {
+            if (id === displayTokenRef.current) {
+              setImageObjectUrl(objectUrl);
+              setImageVisible(true);
+              setVideoVisible(false);
+              releaseHeldVideoSlotSoon();
+              setError(null);
+            } else {
+              URL.revokeObjectURL(objectUrl);
+            }
+            finish();
+          };
+          img.onerror = () => {
+            URL.revokeObjectURL(objectUrl);
+            if (id === displayTokenRef.current) {
+              setError("frame request failed");
+            }
+            finish();
+          };
+          img.src = objectUrl;
+        })
+        .catch((e) => {
+          if (id === displayTokenRef.current) {
+            setError(String(e));
+          }
+          finish();
+        });
+
+      function finish() {
+        if (pngId === pngTokenRef.current) {
+          pendingPngRef.current = false;
+          pendingPngUrlRef.current = null;
+        }
+        if (queuedPngRef.current && !playingRef.current) {
+          queuedPngRef.current = false;
+          requestPngFrame(true);
+        } else if (!playingRef.current) {
+          const delay = force || immediatePreloadRef.current ? 0 : undefined;
+          immediatePreloadRef.current = false;
+          schedulePreload(delay);
+        }
+      }
+    },
+    [
+      timelineId,
+      hasServerInfo,
+      pluginCacheKey,
+      resolvedResolution,
+      clampSeconds,
+      fps,
+      setImageObjectUrl,
+      schedulePreload,
+      releaseHeldVideoSlotSoon,
+    ],
+  );
+
+  const currentPlaybackSeconds = useCallback(() => {
+    const playback = playbackRef.current;
+    if (!playback) return secondsRef.current;
+    const video = videoElement(playback.slot);
+    const videoSeconds = video?.currentTime;
+    if (playback.kind === "pipeline") {
+      return clampSeconds(videoSeconds ?? secondsRef.current);
+    }
+    return clampSeconds(
+      videoSeconds == null ? secondsRef.current : playback.start + videoSeconds,
+    );
+  }, [clampSeconds, videoElement]);
+
+  const stopPlayback = useCallback(
+    (saveStream: boolean, keepCurrentFrame: boolean = false) => {
+      stopRaf();
+      playbackTokenRef.current += 1;
+      const playback = playbackRef.current;
+      previewDebug("playback:stop", {
+        playback,
+        saveStream,
+        keepCurrentFrame,
+        seconds: secondsRef.current,
+      });
+      playbackRef.current = null;
+      if (playback?.kind === "cache") {
+        const video = videoElement(playback.slot);
+        video?.pause();
+        if (keepCurrentFrame) {
+          heldVideoSlotRef.current = playback.slot;
+          setActiveVideoSlot(playback.slot);
+        } else {
+          clearVideoSlot(playback.slot);
+        }
+        const session = streamingSessionRef.current;
+        if (session?.mode === "playback") {
+          abortStreamingSession(saveStream);
+        }
+      } else if (playback?.kind === "stream") {
+        const video = videoElement(playback.slot);
+        video?.pause();
+        if (keepCurrentFrame) {
+          heldVideoSlotRef.current = playback.slot;
+          setActiveVideoSlot(playback.slot);
+        }
+        abortStreamingSession(saveStream, !keepCurrentFrame);
+      } else if (playback?.kind === "pipeline") {
+        const video = videoElement(playback.slot);
+        video?.pause();
+        if (keepCurrentFrame) {
+          heldVideoSlotRef.current = playback.slot;
+          setActiveVideoSlot(playback.slot);
+        }
+        abortPlaybackPipeline(saveStream, !keepCurrentFrame);
+      }
+      if (keepCurrentFrame && playback) {
+        setVideoVisible(true);
+        setImageVisible(false);
+      } else {
+        setVideoVisible(false);
+        setImageVisible(true);
+      }
+    },
+    [
+      abortStreamingSession,
+      abortPlaybackPipeline,
+      clearVideoSlot,
+      setActiveVideoSlot,
+      stopRaf,
+      videoElement,
+    ],
+  );
+
+  const startVideoPlayback = useCallback(() => {
+    if (!timelineId || !hasServerInfo || !pluginCacheKey) {
+      previewDebug("playback:start:skipped", {
+        hasTimeline: Boolean(timelineId),
+        hasServerInfo,
+        hasCacheKey: Boolean(pluginCacheKey),
+      });
+      return;
+    }
+    const group = videoRangeGroup();
+    const slot = activeVideoSlotRef.current;
+    const video = videoElement(slot);
+    if (!group || !video || typeof MediaSource === "undefined") {
+      previewDebug("playback:start:skipped", {
+        hasGroup: Boolean(group),
+        hasVideo: Boolean(video),
+        mediaSource: typeof MediaSource !== "undefined",
+      });
+      return;
+    }
+    if (preloadTimerRef.current) {
+      clearTimeout(preloadTimerRef.current);
+      preloadTimerRef.current = null;
+    }
+    stopRaf();
+    const token = ++displayTokenRef.current;
+    heldVideoSlotRef.current = null;
+    const startSeconds = clampSeconds(secondsRef.current);
+    previewDebug("playback:start", {
+      startSeconds,
+      token,
+      slot,
+      stoppedSession: streamingSessionRef.current
+        ? {
+            id: streamingSessionRef.current.id,
+            mode: streamingSessionRef.current.mode,
+            start: streamingSessionRef.current.start,
+            end: streamingSessionRef.current.end,
+            bufferedSeconds: streamingSessionRef.current.bufferedSeconds,
+            aborted: streamingSessionRef.current.controller.signal.aborted,
+          }
+        : null,
+      pipeline: playbackPipelineRef.current?.id ?? null,
+    });
+
+    const fail = (e: unknown) => {
+      if (token !== displayTokenRef.current) return;
+      previewDebug("playback:fail", { token, error: String(e) });
+      setPreviewPlayingState(false);
+      setError(String(e));
+      stopPlayback(true);
+    };
+
+    const startTicker = () => {
+      const playbackToken = ++playbackTokenRef.current;
+      stopRaf();
+      const tick = () => {
+        if (playbackToken !== playbackTokenRef.current) return;
+        const current = videoElement(slot);
+        if (!current) return;
+        setPreviewSecondsState(current.currentTime);
+        rafRef.current = requestAnimationFrame(tick);
+      };
+      rafRef.current = requestAnimationFrame(tick);
+    };
+
+    const startOffsetTicker = (slot: VideoSlot, baseSeconds: number) => {
+      const playbackToken = ++playbackTokenRef.current;
+      stopRaf();
+      const tick = () => {
+        if (playbackToken !== playbackTokenRef.current) return;
+        const current = videoElement(slot);
+        if (!current) return;
+        setPreviewSecondsState(baseSeconds + current.currentTime);
+        rafRef.current = requestAnimationFrame(tick);
+      };
+      rafRef.current = requestAnimationFrame(tick);
+    };
+
+    const promoteStoppedStream = (session: StreamingSession): boolean => {
+      const streamVideo = videoElement(session.slot);
+      if (
+        !streamVideo ||
+        session.mode !== "stopped" ||
+        session.start > startSeconds + EPSILON ||
+        session.end <= startSeconds + EPSILON ||
+        session.controller.signal.aborted
+      ) {
+        previewDebug("session:promote:reject", {
+          id: session.id,
+          hasVideo: Boolean(streamVideo),
+          mode: session.mode,
+          sessionStart: session.start,
+          sessionEnd: session.end,
+          startSeconds,
+          aborted: session.controller.signal.aborted,
+        });
+        return false;
+      }
+
+      previewDebug("session:promote", {
+        id: session.id,
+        sessionStart: session.start,
+        sessionEnd: session.end,
+        bufferedSeconds: session.bufferedSeconds,
+        startSeconds,
+        offset: Math.max(0, startSeconds - session.start),
+      });
+      session.mode = "playback";
+      session.saveOnFinalize = true;
+      session.clearOnFinalize = true;
+      session.token = token;
+      playbackRef.current = {
+        kind: "stream",
+        slot: session.slot,
+        start: session.start,
+      };
+      const offset = Math.max(0, startSeconds - session.start);
+      streamVideo.onerror = () => fail("video stream failed");
+      streamVideo.onended = () => {
+        if (token !== displayTokenRef.current) return;
+        stopRaf();
+        const end = clampSeconds(session.start + streamVideo.currentTime);
+        previewDebug("session:playback-ended", {
+          id: session.id,
+          end,
+          videoCurrentTime: streamVideo.currentTime,
+        });
+        playbackRef.current = null;
+        if (end >= timelineDuration - EPSILON) {
+          setPreviewPlayingState(false);
+          setPreviewSecondsState(timelineDuration);
+          heldVideoSlotRef.current = session.slot;
+          setActiveVideoSlot(session.slot);
+          setVideoVisible(true);
+          setImageVisible(false);
+          requestPngFrame(true, timelineDuration);
+        } else {
+          setPreviewSecondsState(end);
+        }
+      };
+      session.opened
+        .then(async () => {
+          while (
+            token === displayTokenRef.current &&
+            !session.controller.signal.aborted &&
+            session.bufferedSeconds + EPSILON < offset
+          ) {
+            await delay(16);
+          }
+          if (token !== displayTokenRef.current || session.controller.signal.aborted) {
+            return;
+          }
+          await waitForVideoMetadata(streamVideo);
+          if (offset > EPSILON) {
+            streamVideo.currentTime = offset;
+            await waitForVideoSeeked(streamVideo);
+          }
+          await waitForVideoCurrentData(streamVideo);
+          if (token !== displayTokenRef.current || session.controller.signal.aborted) {
+            return;
+          }
+          await streamVideo.play();
+          if (token !== displayTokenRef.current || session.controller.signal.aborted) {
+            return;
+          }
+          previewDebug("session:promote-playing", {
+            id: session.id,
+            currentTime: streamVideo.currentTime,
+            start: session.start,
+          });
+          setActiveVideoSlot(session.slot);
+          setImageVisible(false);
+          setVideoVisible(true);
+          startOffsetTicker(session.slot, session.start);
+        })
+        .catch(fail);
+      return true;
+    };
+
+    const stoppedSession = streamingSessionRef.current;
+    if (stoppedSession && promoteStoppedStream(stoppedSession)) {
+      abortPlaybackPipeline(false);
+      return;
+    }
+
+    abortStreamingSession(false);
+    abortPlaybackPipeline(false);
+    clearVideoSlot(slot);
+
+    const mediaSource = new MediaSource();
+    const objectUrl = URL.createObjectURL(mediaSource);
+    const controller = new AbortController();
+    const pipeline: PlaybackPipeline = {
+      id: ++pipelineIdRef.current,
+      token,
+      slot,
+      start: startSeconds,
+      group,
+      cacheKey: pluginCacheKey,
+      mediaSource,
+      controller,
+      sourceBuffer: null,
+      appendChain: Promise.resolve(),
+      started: false,
+      starting: null,
+      saveOnAbort: true,
+      liveSegment: null,
+    };
+    playbackPipelineRef.current = pipeline;
+    playbackRef.current = { kind: "pipeline", slot, start: 0 };
+    previewDebug("pipeline:start", { id: pipeline.id, startSeconds, slot });
+    setVideoObjectUrl(slot, objectUrl);
+
+    const maybeStart = async () => {
+      const sourceBuffer = pipeline.sourceBuffer;
+      if (
+        pipeline.started ||
+        pipeline.starting ||
+        !sourceBuffer ||
+        !bufferedContains(sourceBuffer.buffered, startSeconds)
+      ) {
+        return pipeline.starting ?? Promise.resolve();
+      }
+      pipeline.starting = (async () => {
+        await waitForVideoMetadata(video);
+        if (controller.signal.aborted || token !== displayTokenRef.current) return;
+        if (Math.abs(video.currentTime - startSeconds) > EPSILON) {
+          video.currentTime = startSeconds;
+          await waitForVideoSeeked(video);
+        }
+        await waitForVideoCurrentData(video);
+        if (controller.signal.aborted || token !== displayTokenRef.current) return;
+        await video.play();
+        if (controller.signal.aborted || token !== displayTokenRef.current) return;
+        pipeline.started = true;
+        previewDebug("pipeline:playing", {
+          id: pipeline.id,
+          videoCurrentTime: video.currentTime,
+          startSeconds,
+        });
+        setActiveVideoSlot(slot);
+        setImageVisible(false);
+        setVideoVisible(true);
+        startTicker();
+      })().finally(() => {
+        pipeline.starting = null;
+      });
+      return pipeline.starting;
+    };
+
+    const appendCachedRange = async (range: CachedVideoRangeBlob) => {
+      const sourceBuffer = pipeline.sourceBuffer;
+      if (!sourceBuffer) return;
+      previewDebug("pipeline:cache-append:start", {
+        id: pipeline.id,
+        range: { start: range.start, end: range.end },
+        cursorContainsStart: range.start <= startSeconds && range.end > startSeconds,
+      });
+      const data = await range.blob.arrayBuffer();
+      pipeline.appendChain = pipeline.appendChain.then(() =>
+        appendTimestampedSourceBuffer(sourceBuffer, range.start, range.end, data),
+      );
+      await pipeline.appendChain;
+      recordCacheRange(range.start, range.end);
+      previewDebug("pipeline:cache-append:end", {
+        id: pipeline.id,
+        range: { start: range.start, end: range.end },
+        buffered: bufferedDebug(sourceBuffer.buffered),
+      });
+      await maybeStart();
+    };
+
+    const saveLiveSegment = async (live: LivePipelineSegment) => {
+      if (pipeline.saveOnAbort || !controller.signal.aborted) {
+        await savePipelineLiveSegment(pipeline, live);
+      }
+    };
+
+    const appendLiveRange = async (start: number, end: number) => {
+      const sourceBuffer = pipeline.sourceBuffer;
+      if (!sourceBuffer || end <= start + EPSILON) return;
+      const url = liveVideoUrl(start, end);
+      if (!url) return;
+      previewDebug("pipeline:live:start", {
+        id: pipeline.id,
+        start,
+        end,
+        currentTime: video.currentTime,
+      });
+      const live: LivePipelineSegment = {
+        start,
+        end,
+        url,
+        chunks: [],
+        bufferedEnd: start,
+        saved: false,
+      };
+      pipeline.liveSegment = live;
+      pipeline.appendChain = pipeline.appendChain.then(() =>
+        prepareSourceBufferSegment(sourceBuffer, start, end),
+      );
+      await pipeline.appendChain;
+      try {
+        const response = await fetch(url, {
+          cache: "no-store",
+          signal: controller.signal,
+        });
+        if (!response.ok) {
+          throw new Error(`${url} failed: ${response.status}`);
+        }
+        const reader = response.body?.getReader();
+        if (!reader) throw new Error("video stream has no body");
+        for (;;) {
+          const { done, value } = await reader.read();
+          if (done || !value) break;
+          const chunk = value.buffer.slice(
+            value.byteOffset,
+            value.byteOffset + value.byteLength,
+          ) as ArrayBuffer;
+          live.chunks.push(chunk);
+          pipeline.appendChain = pipeline.appendChain.then(() =>
+            appendSourceBuffer(sourceBuffer, chunk.slice(0)),
+          );
+          await pipeline.appendChain;
+          live.bufferedEnd = Math.min(end, sourceBufferEnd(sourceBuffer));
+          setOwnedStreamCacheRange(
+            { kind: "pipeline", id: pipeline.id },
+            { start: live.start, end: live.bufferedEnd },
+          );
+          await maybeStart();
+        }
+      } finally {
+        await pipeline.appendChain.catch(() => undefined);
+        previewDebug("pipeline:live:finalize", {
+          id: pipeline.id,
+          start: live.start,
+          end: live.end,
+          bufferedEnd: live.bufferedEnd,
+          chunks: live.chunks.length,
+          aborted: controller.signal.aborted,
+          saveOnAbort: pipeline.saveOnAbort,
+        });
+        await saveLiveSegment(live);
+        if (pipeline.liveSegment === live) pipeline.liveSegment = null;
+        clearOwnedStreamCacheRange({ kind: "pipeline", id: pipeline.id });
+      }
+    };
+
+    const run = async () => {
+      try {
+        setError(null);
+        video.onerror = () => fail("video pipeline failed");
+        video.onended = () => {
+          if (token !== displayTokenRef.current) return;
+          stopRaf();
+          previewDebug("pipeline:ended", {
+            id: pipeline.id,
+            currentTime: video.currentTime,
+          });
+          setPreviewSecondsState(timelineDuration);
+          setPreviewPlayingState(false);
+          playbackRef.current = null;
+          playbackPipelineRef.current = null;
+          heldVideoSlotRef.current = slot;
+          setActiveVideoSlot(slot);
+          setVideoVisible(true);
+          setImageVisible(false);
+          requestPngFrame(true, timelineDuration);
+        };
+        setVideoObjectUrl(slot, objectUrl);
+        try {
+          video.load();
+        } catch {
+          // ignore
+        }
+        await waitForMediaSourceOpen(mediaSource);
+        if (controller.signal.aborted || token !== displayTokenRef.current) return;
+        const sourceBuffer = mediaSource.addSourceBuffer(selectMp4MimeType());
+        try {
+          sourceBuffer.mode = "segments";
+        } catch {
+          // Some browsers expose mode as readonly for this SourceBuffer.
+        }
+        pipeline.sourceBuffer = sourceBuffer;
+        mediaSource.duration = timelineDuration;
+        previewDebug("pipeline:opened", {
+          id: pipeline.id,
+          duration: timelineDuration,
+        });
+
+        let cursor = startSeconds;
+        while (
+          cursor < timelineDuration - EPSILON &&
+          !controller.signal.aborted &&
+          token === displayTokenRef.current
+        ) {
+          const cached = await getCachedVideoRangeBlob(
+            group,
+            pluginCacheKey,
+            cursor,
+          );
+          if (cached && cached.end > cursor + EPSILON) {
+            previewDebug("pipeline:cursor:cache-hit", {
+              id: pipeline.id,
+              cursor,
+              cached: { start: cached.start, end: cached.end },
+            });
+            await appendCachedRange(cached);
+            cursor = Math.min(cached.end, timelineDuration);
+            continue;
+          }
+
+          const nextCacheStart = await findNextCacheStart(cursor);
+          const liveEnd = Math.min(nextCacheStart, timelineDuration);
+          previewDebug("pipeline:cursor:cache-miss", {
+            id: pipeline.id,
+            cursor,
+            nextCacheStart,
+            liveEnd,
+          });
+          if (liveEnd <= cursor + EPSILON) {
+            cursor = Math.min(liveEnd, timelineDuration);
+            continue;
+          }
+          await appendLiveRange(cursor, liveEnd);
+          cursor = liveEnd;
+        }
+
+        await pipeline.appendChain;
+        if (mediaSource.readyState === "open") {
+          try {
+            mediaSource.endOfStream();
+          } catch {
+            // ignore
+          }
+        }
+      } catch (e) {
+        if (!controller.signal.aborted && token === displayTokenRef.current) {
+          fail(e);
+        }
+      } finally {
+        previewDebug("pipeline:run-finalize", {
+          id: pipeline.id,
+          currentPipeline: playbackPipelineRef.current?.id ?? null,
+          aborted: controller.signal.aborted,
+          token,
+          currentToken: displayTokenRef.current,
+        });
+        if (playbackPipelineRef.current?.id === pipeline.id) {
+          playbackPipelineRef.current = null;
+        }
+      }
+    };
+
+    void run();
+  }, [
+    timelineId,
+    timelineDuration,
+    hasServerInfo,
+    pluginCacheKey,
+    clampSeconds,
+    videoRangeGroup,
+    videoElement,
+    stopRaf,
+    stopPlayback,
+    findNextCacheStart,
+    abortStreamingSession,
+    abortPlaybackPipeline,
+    setActiveVideoSlot,
+    clearVideoSlot,
+    clearOwnedStreamCacheRange,
+    setVideoObjectUrl,
+    recordCacheRange,
+    liveVideoUrl,
+    savePipelineLiveSegment,
+    setOwnedStreamCacheRange,
+    setPreviewPlayingState,
+    setPreviewSecondsState,
+    requestPngFrame,
+  ]);
+
+  useEffect(() => {
+    if (!timelineId || !hasServerInfo) return;
+    if (playing) return;
+    requestPngFrame(true);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    timelineId,
+    hasServerInfo,
+    info?.width,
+    info?.height,
+    info?.cacheKey,
+    resolution.width,
+    resolution.height,
+    fps,
+    seconds,
+    playing,
+  ]);
+
+  useEffect(
+    () => () => {
+      stopRaf();
+      if (preloadTimerRef.current) clearTimeout(preloadTimerRef.current);
+      clearAllVideo();
+      if (imageObjectUrlRef.current) {
+        URL.revokeObjectURL(imageObjectUrlRef.current);
+        imageObjectUrlRef.current = null;
+      }
+    },
+    [clearAllVideo, stopRaf],
+  );
+
+  const setSeconds = useCallback(
+    (s: number) => {
+      const next = clampSeconds(s);
+      previewDebug("seek", {
+        requested: s,
+        next,
+        wasPlaying: playingRef.current,
+        previousSeconds: secondsRef.current,
+        streamingSession: streamingSessionRef.current
+          ? {
+              id: streamingSessionRef.current.id,
+              mode: streamingSessionRef.current.mode,
+              start: streamingSessionRef.current.start,
+              end: streamingSessionRef.current.end,
+              bufferedSeconds: streamingSessionRef.current.bufferedSeconds,
+              aborted: streamingSessionRef.current.controller.signal.aborted,
+            }
+          : null,
+      });
+      if (playingRef.current) {
+        const stoppedSeconds = currentPlaybackSeconds();
+        setPreviewSecondsState(stoppedSeconds);
+        setPreviewPlayingState(false);
+        stopPlayback(true);
+      } else {
+        const session = streamingSessionRef.current;
+        const keepStoppedStream =
+          session?.mode === "stopped" &&
+          !session.controller.signal.aborted &&
+          session.start <= next + EPSILON &&
+          session.start + session.bufferedSeconds >= next - EPSILON;
+        if (keepStoppedStream) {
+          if (session.stoppedTargetEnd != null) {
+            session.stoppedTargetEnd = Math.max(
+              session.stoppedTargetEnd,
+              clampSeconds(next + STOPPED_STREAM_CACHE_SECONDS),
+            );
+          }
+          clearVideoSlot(session.slot === 0 ? 1 : 0);
+        } else {
+          abortStreamingSession(false);
+          clearVideoSlot(0);
+          clearVideoSlot(1);
+        }
+      }
+      setPreviewSecondsState(next);
+      immediatePreloadRef.current = true;
+    },
+    [
+      clampSeconds,
+      currentPlaybackSeconds,
+      stopPlayback,
+      abortStreamingSession,
+      clearVideoSlot,
+      setPreviewPlayingState,
+      setPreviewSecondsState,
+    ],
+  );
+
+  const togglePlay = useCallback(() => {
+    if (!timelineId || !hasServerInfo) return;
+    previewDebug("toggle-play", {
+      playing: playingRef.current,
+      seconds: secondsRef.current,
+      playback: playbackRef.current,
+      stream: streamingSessionRef.current
+        ? {
+            id: streamingSessionRef.current.id,
+            mode: streamingSessionRef.current.mode,
+            start: streamingSessionRef.current.start,
+            end: streamingSessionRef.current.end,
+            bufferedSeconds: streamingSessionRef.current.bufferedSeconds,
+            aborted: streamingSessionRef.current.controller.signal.aborted,
+          }
+        : null,
+      pipeline: playbackPipelineRef.current?.id ?? null,
+    });
+    if (!playingRef.current) {
+      displayTokenRef.current += 1;
+      if (preloadTimerRef.current) {
+        clearTimeout(preloadTimerRef.current);
+        preloadTimerRef.current = null;
+      }
+      setPreviewPlayingState(true);
+      requestAnimationFrame(() => startVideoPlayback());
+    } else {
+      const stoppedSeconds = currentPlaybackSeconds();
+      setPreviewSecondsState(stoppedSeconds);
+      setPreviewPlayingState(false);
+      stopPlayback(true, true);
+      immediatePreloadRef.current = true;
+    }
+  }, [
+    timelineId,
+    hasServerInfo,
+    startVideoPlayback,
+    currentPlaybackSeconds,
+    stopPlayback,
+    setPreviewPlayingState,
+    setPreviewSecondsState,
+  ]);
+
+  const stepFrame = useCallback(
+    (delta: number) => {
+      if (!timelineId) return;
+      const step = 1 / Math.max(fps, 1);
+      setSeconds(secondsRef.current + delta * step);
+    },
+    [timelineId, fps, setSeconds],
+  );
+
+  const rewindToStart = useCallback(() => {
+    setSeconds(0);
+  }, [setSeconds]);
+
+  return {
+    state: {
+      seconds,
+      playing,
+      cacheRanges: visibleCacheRanges,
+      error,
+      imageSrc,
+      imageVisible,
+      videoVisible,
+      activeVideoSlot,
+    },
+    videoRefs: [videoARef, videoBRef],
+    videoRef: videoARef,
+    imgRef,
+    setSeconds,
+    togglePlay,
+    stepFrame,
+    rewindToStart,
+  };
+}
+
+async function loadUncachedMediaObjectUrl(url: string): Promise<string> {
+  const response = await fetch(url, { cache: "no-store" });
+  if (!response.ok) {
+    throw new Error(`${url} failed: ${response.status}`);
+  }
+  return URL.createObjectURL(await response.blob());
+}
+
+function selectMp4MimeType(): string {
+  for (const mimeType of MP4_MIME_TYPES) {
+    if (MediaSource.isTypeSupported(mimeType)) return mimeType;
+  }
+  return "video/mp4";
+}
+
+function waitForMediaSourceOpen(mediaSource: MediaSource): Promise<void> {
+  if (mediaSource.readyState === "open") return Promise.resolve();
+  return new Promise((resolve, reject) => {
+    const onOpen = () => {
+      cleanup();
+      resolve();
+    };
+    const onError = () => {
+      cleanup();
+      reject(new Error("MediaSource failed to open"));
+    };
+    const cleanup = () => {
+      mediaSource.removeEventListener("sourceopen", onOpen);
+      mediaSource.removeEventListener("sourceended", onError);
+      mediaSource.removeEventListener("sourceclose", onError);
+    };
+    mediaSource.addEventListener("sourceopen", onOpen);
+    mediaSource.addEventListener("sourceended", onError);
+    mediaSource.addEventListener("sourceclose", onError);
+  });
+}
+
+function waitForVideoMetadata(video: HTMLVideoElement): Promise<void> {
+  if (video.readyState >= HTMLMediaElement.HAVE_METADATA) {
+    return Promise.resolve();
+  }
+  return new Promise((resolve, reject) => {
+    const onLoadedMetadata = () => {
+      cleanup();
+      resolve();
+    };
+    const onError = () => {
+      cleanup();
+      reject(new Error("video metadata failed"));
+    };
+    const cleanup = () => {
+      video.removeEventListener("loadedmetadata", onLoadedMetadata);
+      video.removeEventListener("error", onError);
+    };
+    video.addEventListener("loadedmetadata", onLoadedMetadata);
+    video.addEventListener("error", onError);
+  });
+}
+
+function waitForVideoSeeked(video: HTMLVideoElement): Promise<void> {
+  return new Promise((resolve, reject) => {
+    const onSeeked = () => {
+      cleanup();
+      resolve();
+    };
+    const onError = () => {
+      cleanup();
+      reject(new Error("video seek failed"));
+    };
+    const cleanup = () => {
+      video.removeEventListener("seeked", onSeeked);
+      video.removeEventListener("error", onError);
+    };
+    video.addEventListener("seeked", onSeeked, { once: true });
+    video.addEventListener("error", onError, { once: true });
+  });
+}
+
+function waitForVideoCurrentData(video: HTMLVideoElement): Promise<void> {
+  if (video.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA) {
+    return Promise.resolve();
+  }
+  return new Promise((resolve, reject) => {
+    const onReady = () => {
+      cleanup();
+      resolve();
+    };
+    const onError = () => {
+      cleanup();
+      reject(new Error("video frame failed"));
+    };
+    const cleanup = () => {
+      video.removeEventListener("loadeddata", onReady);
+      video.removeEventListener("canplay", onReady);
+      video.removeEventListener("error", onError);
+    };
+    video.addEventListener("loadeddata", onReady, { once: true });
+    video.addEventListener("canplay", onReady, { once: true });
+    video.addEventListener("error", onError, { once: true });
+  });
+}
+
+function bufferedContains(buffered: TimeRanges, seconds: number): boolean {
+  for (let i = 0; i < buffered.length; i++) {
+    if (buffered.start(i) <= seconds + EPSILON && buffered.end(i) > seconds + EPSILON) {
+      return true;
+    }
+  }
+  return false;
+}
+
+async function waitForSourceBufferIdle(sourceBuffer: SourceBuffer): Promise<void> {
+  if (!sourceBuffer.updating) return;
+  await new Promise<void>((resolve) => {
+    sourceBuffer.addEventListener("updateend", () => resolve(), { once: true });
+  });
+}
+
+async function prepareSourceBufferSegment(
+  sourceBuffer: SourceBuffer,
+  start: number,
+  end: number,
+): Promise<void> {
+  await waitForSourceBufferIdle(sourceBuffer);
+  sourceBuffer.timestampOffset = start;
+  sourceBuffer.appendWindowStart = Math.max(0, start - EPSILON);
+  sourceBuffer.appendWindowEnd = end + EPSILON;
+}
+
+async function appendTimestampedSourceBuffer(
+  sourceBuffer: SourceBuffer,
+  start: number,
+  end: number,
+  data: ArrayBuffer,
+): Promise<void> {
+  await prepareSourceBufferSegment(sourceBuffer, start, end);
+  await appendSourceBuffer(sourceBuffer, data);
+}
+
+function appendSourceBuffer(
+  sourceBuffer: SourceBuffer,
+  data: ArrayBuffer,
+): Promise<void> {
+  if (sourceBuffer.updating) {
+    return new Promise<void>((resolve) => {
+      sourceBuffer.addEventListener("updateend", () => resolve(), {
+        once: true,
+      });
+    }).then(() => appendSourceBuffer(sourceBuffer, data));
+  }
+  return new Promise((resolve, reject) => {
+    const cleanup = () => {
+      sourceBuffer.removeEventListener("updateend", onUpdateEnd);
+      sourceBuffer.removeEventListener("error", onError);
+    };
+    const onUpdateEnd = () => {
+      cleanup();
+      resolve();
+    };
+    const onError = () => {
+      cleanup();
+      reject(new Error("SourceBuffer append failed"));
+    };
+    sourceBuffer.addEventListener("updateend", onUpdateEnd);
+    sourceBuffer.addEventListener("error", onError);
+    try {
+      sourceBuffer.appendBuffer(data);
+    } catch (e) {
+      cleanup();
+      reject(e);
+    }
+  });
+}
+
+function sourceBufferEnd(sourceBuffer: SourceBuffer): number {
+  const buffered = sourceBuffer.buffered;
+  if (buffered.length === 0) return 0;
+  return buffered.end(buffered.length - 1);
+}
+
+function isAbortError(e: unknown): boolean {
+  return e instanceof DOMException && e.name === "AbortError";
+}
+
+function delay(ms: number): Promise<void> {
+  return new Promise((resolve) => window.setTimeout(resolve, ms));
+}
+
+function previewDebug(
+  event: string,
+  fields: Record<string, unknown> = {},
+): void {
+  if (!previewDebugEnabled()) return;
+  const at =
+    typeof performance !== "undefined"
+      ? Math.round(performance.now() * 10) / 10
+      : Date.now();
+  console.debug(`[tellur-live preview] ${event}`, { at, ...fields });
+}
+
+function previewDebugEnabled(): boolean {
+  if (typeof window === "undefined") return false;
+  try {
+    const params = new URLSearchParams(window.location.search);
+    const value =
+      params.get("debug") ??
+      params.get("previewDebug") ??
+      params.get("tellurDebug");
+    if (value === "1" || value === "true" || value === "preview") {
+      return true;
+    }
+    return window.localStorage.getItem(DEBUG_STORAGE_KEY) === "1";
+  } catch {
+    return false;
+  }
+}
+
+function bufferedDebug(buffered: TimeRanges): CacheRange[] {
+  const ranges: CacheRange[] = [];
+  for (let i = 0; i < buffered.length; i++) {
+    ranges.push({
+      start: buffered.start(i),
+      end: buffered.end(i),
+    });
+  }
+  return ranges;
+}
diff --git a/tellur-live/web/src/styles/global.css b/tellur-live/web/src/styles/global.css
new file mode 100644
index 0000000..8b9dda2
--- /dev/null
+++ b/tellur-live/web/src/styles/global.css
@@ -0,0 +1,854 @@
+:root {
+  color-scheme: dark;
+
+  --bg-app: #111111;
+  --bg-panel: #151515;
+  --bg-panel-soft: #181818;
+  --bg-control: #2f2f31;
+  --bg-control-hover: #3b3b3e;
+  --bg-track: #151515;
+  --bg-track-head: #070707;
+
+  --border-panel: #3b3b3d;
+  --border-subtle: #252528;
+  --text-primary: #e4e4e7;
+  --text-secondary: #b5b5ba;
+  --text-muted: #7d7d83;
+  --text-faint: #505055;
+
+  --accent-pink: #ff4c82;
+  --accent-pink-soft: #9a4b5f;
+  --timeline-marker: #f03168;
+  --accent-cache: #31d99b;
+  --accent-clip: #7d98df;
+  --accent-track-dot: #7392e8;
+
+  --header-h: 30px;
+  --viewer-w: 682px;
+  --viewer-h: 448px;
+  --scrubber-h: 18px;
+  --transport-h: 46px;
+  --tabs-h: 56px;
+  --track-h: 28px;
+  --footer-h: 34px;
+  --side-w: 220px;
+
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans CJK JP",
+    "Noto Sans", sans-serif;
+  font-size: 12px;
+  line-height: 1.4;
+  color: var(--text-primary);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body,
+#root {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  width: 100%;
+  background: var(--bg-app);
+  color: var(--text-primary);
+  overflow: hidden;
+}
+
+button {
+  font-family: inherit;
+  font-size: inherit;
+  color: inherit;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+}
+
+input,
+select {
+  font-family: inherit;
+  font-size: inherit;
+  color: inherit;
+}
+
+select {
+  appearance: none;
+  background: transparent;
+  border: none;
+  color: var(--text-secondary);
+  cursor: pointer;
+  font-size: 11px;
+  font-weight: 650;
+  padding: 0 16px 0 0;
+  background-image: linear-gradient(45deg, transparent 50%, var(--text-secondary) 50%),
+    linear-gradient(135deg, var(--text-secondary) 50%, transparent 50%);
+  background-position: calc(100% - 6px) 50%, calc(100% - 2px) 50%;
+  background-size: 4px 4px, 4px 4px;
+  background-repeat: no-repeat;
+}
+
+select:hover {
+  color: var(--text-primary);
+}
+
+select option {
+  background: var(--bg-control);
+  color: var(--text-primary);
+}
+
+.app {
+  display: grid;
+  grid-template-rows: var(--header-h) minmax(0, 1fr);
+  height: 100vh;
+  min-height: 100vh;
+  background: var(--bg-app);
+}
+
+.header {
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: var(--header-h);
+  padding: 0 11px;
+  background: var(--bg-app);
+  border-bottom: 1px solid #171717;
+}
+
+.header__logo {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  color: #ff5a8e;
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0;
+}
+
+.header__logo-mark {
+  width: 14px;
+  height: 14px;
+  fill: none;
+  stroke: currentColor;
+}
+
+.header__project {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  display: inline-flex;
+  align-items: center;
+  max-width: min(68vw, 760px);
+  min-width: 0;
+  gap: 12px;
+  color: var(--text-secondary);
+  font-size: 11px;
+  white-space: nowrap;
+}
+
+.header__project-name {
+  flex: 0 0 auto;
+  color: var(--text-primary);
+  font-weight: 700;
+}
+
+.header__project-divider {
+  flex: 0 0 auto;
+  display: inline-block;
+  width: 13px;
+  height: 1px;
+  color: var(--text-muted);
+  background: currentColor;
+  font-size: 0;
+  line-height: 0;
+}
+
+.header__project-url {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  color: #d4d4d8;
+  font-variant-numeric: tabular-nums;
+  text-overflow: ellipsis;
+}
+
+.header__compile {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  height: 20px;
+  color: var(--text-secondary);
+  font-size: 11px;
+  font-weight: 700;
+  white-space: nowrap;
+}
+
+.header__compile-icon {
+  flex: 0 0 auto;
+}
+
+.header__compile--compiled {
+  color: var(--accent-cache);
+}
+
+.header__compile--compiling {
+  color: #f2bf5e;
+}
+
+.header__compile--compiling .header__compile-icon {
+  animation: tellur-spin 1s linear infinite;
+}
+
+.header__compile--failed {
+  color: #ff8b8b;
+}
+
+.header__compile--disconnected {
+  color: #ff8b8b;
+}
+
+@keyframes tellur-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.workspace {
+  display: grid;
+  grid-template-rows: minmax(0, min(var(--viewer-h), 61vh)) minmax(0, 1fr);
+  row-gap: 6px;
+  height: calc(100vh - var(--header-h));
+  min-height: 0;
+  padding: 1px 1px 5px 10px;
+  background: var(--bg-app);
+}
+
+.viewer-panel {
+  display: grid;
+  grid-template-rows: minmax(0, 1fr) var(--scrubber-h) var(--transport-h);
+  align-self: stretch;
+  width: min(var(--viewer-w), 100%);
+  min-width: 0;
+  overflow: hidden;
+  background: var(--bg-panel);
+  border: 1px solid var(--border-panel);
+  border-radius: 8px;
+}
+
+.preview {
+  display: grid;
+  min-height: 0;
+  padding: 16px 13px 4px 18px;
+  --preview-aspect: 1.7777777778;
+  container-type: inline-size;
+  place-items: center;
+}
+
+.preview__frame {
+  position: relative;
+  display: grid;
+  width: 100%;
+  max-width: 100%;
+  max-height: 100%;
+  overflow: hidden;
+  aspect-ratio: var(--preview-aspect);
+  background: #020202;
+  border-radius: 3px;
+  place-items: center;
+}
+
+@supports (width: 1cqw) {
+  .preview__frame {
+    width: auto;
+    height: min(100%, calc(100cqw / var(--preview-aspect)));
+  }
+}
+
+.preview__media {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+}
+
+.preview__media img,
+.preview__media video {
+  display: block;
+  grid-area: 1 / 1;
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}
+
+.preview__media .hidden {
+  visibility: hidden;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.preview__error {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  max-width: calc(100% - 20px);
+  padding: 5px 8px;
+  color: #ffd6d6;
+  background: rgba(70, 22, 26, 0.92);
+  border: 1px solid #8f4f4f;
+  border-radius: 3px;
+  font-size: 11px;
+}
+
+.preview-scrubber {
+  display: flex;
+  align-items: center;
+  height: var(--scrubber-h);
+  padding: 0 18px;
+  cursor: grab;
+  touch-action: none;
+}
+
+.preview-scrubber--dragging {
+  cursor: grabbing;
+}
+
+.preview-scrubber__rail {
+  position: relative;
+  width: 100%;
+  height: 6px;
+  background: #292929;
+  border-radius: 4px;
+}
+
+.preview-scrubber__progress {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  min-width: 1px;
+  background: var(--accent-pink);
+  border-radius: inherit;
+}
+
+.preview-scrubber__cap,
+.preview-scrubber__thumb {
+  position: absolute;
+  top: 50%;
+  width: 7px;
+  height: 7px;
+  background: var(--bg-panel);
+  border: 1px solid #e9e9ee;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 2;
+}
+
+.preview-scrubber__cap--start {
+  left: 0;
+}
+
+.preview-scrubber__cap--end {
+  left: 100%;
+}
+
+.preview-scrubber__thumb {
+  background: var(--accent-pink);
+  border-color: #f4f4f6;
+}
+
+.transport {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+  align-items: center;
+  height: var(--transport-h);
+  padding: 5px 18px 8px;
+  gap: 12px;
+  background: var(--bg-panel);
+}
+
+.transport__left {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-width: 0;
+  gap: 0;
+}
+
+.transport__timecode {
+  color: var(--text-secondary);
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+  font-weight: 700;
+  letter-spacing: 0;
+}
+
+.transport__timecode-cur {
+  color: var(--accent-pink);
+  font-size: 13px;
+}
+
+.transport__timecode-sep {
+  margin: 0 4px;
+  color: #d7d7da;
+}
+
+.transport__timecode-total {
+  color: #d7d7da;
+}
+
+.transport__fps-readout {
+  color: #e06b8d;
+  font-size: 10px;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: 0;
+}
+
+.transport__center {
+  display: inline-flex;
+  align-items: center;
+  gap: 11px;
+  color: var(--text-secondary);
+}
+
+.transport__btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 24px;
+  color: #96969b;
+  border-radius: 4px;
+  transition: color 0.12s, background 0.12s;
+}
+
+.transport__btn:hover {
+  color: var(--text-primary);
+  background: var(--bg-control);
+}
+
+.transport__btn--play {
+  width: 26px;
+  height: 30px;
+  color: #d4d4d8;
+}
+
+.transport__right {
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 18px;
+}
+
+.transport__control {
+  display: inline-flex;
+  align-items: center;
+  color: var(--text-secondary);
+}
+
+.timeline-panel {
+  display: grid;
+  grid-template-rows: var(--tabs-h) minmax(0, 1fr) var(--footer-h);
+  min-height: 0;
+  overflow: hidden;
+  background: var(--bg-panel);
+  border: 1px solid var(--border-panel);
+  border-radius: 8px;
+}
+
+.tabsrow {
+  display: grid;
+  grid-template-columns: var(--side-w) minmax(0, 1fr);
+  height: var(--tabs-h);
+  background: var(--bg-panel);
+}
+
+.tabsrow__left {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  gap: 14px;
+  padding-left: 10px;
+}
+
+.tabsrow__tab {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+  color: var(--text-secondary);
+  font-size: 11px;
+  letter-spacing: 0;
+  white-space: nowrap;
+}
+
+.tabsrow__tab--primary {
+  height: 18px;
+  padding: 0 9px;
+  color: #f2f2f4;
+  background: #3f3f42;
+  border-radius: 4px;
+  font-weight: 700;
+}
+
+.tabsrow__tab--secondary {
+  gap: 6px;
+  color: var(--text-muted);
+  font-size: 11px;
+}
+
+.tabsrow__tab--secondary svg {
+  color: #6c6c72;
+  flex: 0 0 auto;
+}
+
+.tabsrow__cursor {
+  position: relative;
+  min-width: 0;
+  overflow: visible;
+  background: var(--bg-panel);
+  cursor: grab;
+  touch-action: none;
+}
+
+.tabsrow__cursor--dragging {
+  cursor: grabbing;
+}
+
+.tabsrow__cursor-inner {
+  position: relative;
+  height: 100%;
+}
+
+.tabsrow__viewport-start {
+  position: absolute;
+  top: 6px;
+  left: 0;
+  z-index: 1;
+  display: inline-flex;
+  align-items: flex-start;
+  gap: 2px;
+  color: var(--text-muted);
+  pointer-events: none;
+  white-space: nowrap;
+}
+
+.tabsrow__viewport-start-text {
+  display: inline-flex;
+  flex-direction: column;
+  font-size: 10px;
+  font-variant-numeric: tabular-nums;
+  font-weight: 800;
+  letter-spacing: 0;
+  line-height: 1.08;
+}
+
+.tabsrow__viewport-start-frame {
+  margin-top: 2px;
+}
+
+.tabsrow__viewport-start-icon {
+  flex: 0 0 auto;
+  margin-top: 10px;
+  color: #66666c;
+  transform: translateX(-3px);
+}
+
+.tabsrow__cache {
+  position: absolute;
+  right: auto;
+  bottom: 7px;
+  height: 2px;
+  background: var(--accent-cache);
+  border-radius: 2px;
+  z-index: 1;
+}
+
+.tabsrow__playhead-line {
+  position: absolute;
+  top: 40px;
+  bottom: 0;
+  width: 1px;
+  background: var(--timeline-marker);
+  z-index: 2;
+}
+
+.tabsrow__chip {
+  position: absolute;
+  top: 8px;
+  z-index: 3;
+  display: inline-flex;
+  flex-direction: column;
+  justify-content: center;
+  min-width: 73px;
+  height: 30px;
+  padding: 4px 7px 4px 6px;
+  color: #fff;
+  background: var(--timeline-marker);
+  border-radius: 1px 0 0 1px;
+  font-size: 10px;
+  font-weight: 800;
+  font-variant-numeric: tabular-nums;
+  line-height: 1.05;
+  letter-spacing: 0;
+  white-space: nowrap;
+  transform: translateX(-4px);
+}
+
+.tabsrow__chip::before {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: 8px;
+  height: 6px;
+  content: "";
+  background: var(--timeline-marker);
+  clip-path: polygon(0 0, 100% 0, 50% 100%);
+}
+
+.tabsrow__chip::after {
+  position: absolute;
+  top: 0;
+  left: 100%;
+  width: 0;
+  height: 0;
+  content: "";
+  border-top: 15px solid transparent;
+  border-bottom: 15px solid transparent;
+  border-left: 9px solid var(--timeline-marker);
+}
+
+.tabsrow__chip-sub {
+  margin-top: 2px;
+  font-size: 10px;
+  font-weight: 800;
+  line-height: 1.05;
+}
+
+.timeline {
+  display: grid;
+  grid-template-columns: var(--side-w) minmax(0, 1fr);
+  min-height: 0;
+  overflow: hidden;
+  background: var(--bg-panel);
+}
+
+.timeline__side {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  background: var(--bg-panel);
+}
+
+.timeline__body {
+  position: relative;
+  min-width: 0;
+  overflow: hidden;
+  background: var(--bg-track);
+  cursor: grab;
+  touch-action: none;
+}
+
+.timeline__body--dragging {
+  cursor: grabbing;
+}
+
+.track-head {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto auto auto;
+  align-items: center;
+  height: var(--track-h);
+  margin: 0 10px;
+  padding: 0 10px;
+  gap: 5px;
+  background: var(--bg-track-head);
+  border-radius: 5px;
+}
+
+.track-head--empty {
+  visibility: hidden;
+}
+
+.track-head__name {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--text-secondary);
+  font-size: 11px;
+  font-weight: 400;
+  letter-spacing: 0;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.track-head__btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 21px;
+  height: 20px;
+  color: #b2b2b7;
+  background: #2c2c2f;
+  border-radius: 3px;
+  font-size: 10px;
+  font-weight: 750;
+  letter-spacing: 0;
+}
+
+.track-head__btn:hover {
+  color: #fff;
+  background: var(--bg-control-hover);
+}
+
+.track-head__btn--active {
+  color: #fff;
+  background: var(--bg-control-hover);
+}
+
+.track-head__color {
+  width: 14px;
+  height: 14px;
+  margin-left: 5px;
+  border-radius: 50%;
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
+}
+
+.timeline__tracks {
+  position: relative;
+  height: 100%;
+  overflow: hidden;
+  background: var(--bg-track);
+  transform-origin: left top;
+}
+
+.timeline__track {
+  position: relative;
+  height: var(--track-h);
+  background: var(--bg-track);
+}
+
+.timeline__track--alt {
+  background: var(--bg-track);
+}
+
+.timeline__clip {
+  position: absolute;
+  top: 5px;
+  bottom: 3px;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  padding: 0 10px;
+  background: var(--accent-clip);
+  border-radius: 4px;
+}
+
+.timeline__clip-label {
+  min-width: 0;
+  overflow: hidden;
+  color: #12121c;
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.timeline__playhead {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 1px;
+  background: var(--timeline-marker);
+  pointer-events: none;
+  z-index: 3;
+}
+
+.zoom-bar {
+  display: grid;
+  grid-template-columns: var(--side-w) minmax(0, 1fr);
+  align-items: center;
+  height: var(--footer-h);
+  background: var(--bg-panel);
+}
+
+.zoom-bar__rail {
+  grid-column: 2;
+  position: relative;
+  height: 6px;
+  margin: 0 18px 0 0;
+  cursor: pointer;
+  background: #2a2a2a;
+  border-radius: 4px;
+  touch-action: none;
+}
+
+.zoom-bar__viewport {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  background: var(--accent-pink-soft);
+  border-radius: inherit;
+  cursor: grab;
+}
+
+.zoom-bar__viewport--dragging,
+.zoom-bar__rail--dragging {
+  cursor: grabbing;
+}
+
+.zoom-bar__handle {
+  position: absolute;
+  top: 50%;
+  z-index: 2;
+  width: 8px;
+  height: 8px;
+  cursor: ew-resize;
+  background: var(--bg-panel);
+  border: 1px solid #e0e0e5;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.zoom-bar__handle--start {
+  left: 0;
+}
+
+.zoom-bar__handle--end {
+  left: 100%;
+}
+
+.zoom-bar__handle:hover {
+  border-color: #fff;
+}
+
+@media (max-width: 760px) {
+  :root {
+    --side-w: 160px;
+  }
+
+  .workspace {
+    grid-template-rows: minmax(0, 50vh) minmax(0, 1fr);
+  }
+
+  .header__project-url {
+    display: none;
+  }
+
+  .header__project-divider {
+    display: none;
+  }
+
+  .transport {
+    grid-template-columns: minmax(0, 1fr) auto;
+  }
+
+  .transport__right {
+    display: none;
+  }
+}
diff --git a/tellur-live/web/src/timelineViewport.ts b/tellur-live/web/src/timelineViewport.ts
new file mode 100644
index 0000000..520cb39
--- /dev/null
+++ b/tellur-live/web/src/timelineViewport.ts
@@ -0,0 +1,45 @@
+export const MIN_TIMELINE_ZOOM = 1;
+export const MAX_TIMELINE_ZOOM = 20;
+
+export interface TimelineViewport {
+  start: number;
+  zoom: number;
+}
+
+export type TimelineViewportChange =
+  | TimelineViewport
+  | ((current: TimelineViewport) => TimelineViewport);
+
+export function clampTimelineViewport(
+  viewport: TimelineViewport,
+  duration: number,
+): TimelineViewport {
+  const safeDuration = getSafeDuration(duration);
+  const zoom = clamp(
+    viewport.zoom,
+    MIN_TIMELINE_ZOOM,
+    MAX_TIMELINE_ZOOM,
+  );
+  const visibleDuration = getVisibleDuration(safeDuration, zoom);
+  const maxStart = Math.max(0, safeDuration - visibleDuration);
+
+  return {
+    start: clamp(viewport.start, 0, maxStart),
+    zoom,
+  };
+}
+
+export function getVisibleDuration(duration: number, zoom: number): number {
+  const safeDuration = getSafeDuration(duration);
+  const safeZoom = clamp(zoom, MIN_TIMELINE_ZOOM, MAX_TIMELINE_ZOOM);
+  return safeDuration / safeZoom;
+}
+
+export function getSafeDuration(duration: number): number {
+  return Math.max(duration, 0.001);
+}
+
+export function clamp(value: number, min: number, max: number): number {
+  if (!Number.isFinite(value)) return min;
+  return Math.min(max, Math.max(min, value));
+}
diff --git a/tellur-live/web/src/types.ts b/tellur-live/web/src/types.ts
new file mode 100644
index 0000000..6992a1a
--- /dev/null
+++ b/tellur-live/web/src/types.ts
@@ -0,0 +1,26 @@
+export interface TimelineInfo {
+  id: string;
+  title: string;
+  duration: number;
+}
+
+export interface PreviewResolution {
+  width: number;
+  height: number;
+}
+
+export interface ServerInfo {
+  width: number;
+  height: number;
+  fps: number;
+  lastError: string | null;
+  cacheKey: string;
+  compileStatus: "compiled" | "compiling" | "failed";
+  compileError: string | null;
+  timelines: TimelineInfo[];
+}
+
+export interface CacheRange {
+  start: number;
+  end: number;
+}
diff --git a/tellur-live/web/src/vite-env.d.ts b/tellur-live/web/src/vite-env.d.ts
new file mode 100644
index 0000000..39fc679
--- /dev/null
+++ b/tellur-live/web/src/vite-env.d.ts
@@ -0,0 +1,3 @@
+/// <reference types="vite/client" />
+
+declare module "*.css";
diff --git a/tellur-live/web/tsconfig.json b/tellur-live/web/tsconfig.json
new file mode 100644
index 0000000..b627fa4
--- /dev/null
+++ b/tellur-live/web/tsconfig.json
@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": false,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}
diff --git a/tellur-live/web/vite.config.ts b/tellur-live/web/vite.config.ts
new file mode 100644
index 0000000..aa69b22
--- /dev/null
+++ b/tellur-live/web/vite.config.ts
@@ -0,0 +1,29 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+const backend = process.env.TELLUR_BACKEND ?? "http://127.0.0.1:4317";
+
+export default defineConfig({
+  plugins: [react()],
+  build: {
+    outDir: "dist",
+    emptyOutDir: true,
+    target: "es2022",
+    rollupOptions: {
+      output: {
+        entryFileNames: "assets/index.js",
+        chunkFileNames: "assets/[name].js",
+        assetFileNames: "assets/[name][extname]",
+      },
+    },
+  },
+  server: {
+    port: 4318,
+    proxy: {
+      "/api": {
+        target: backend,
+        changeOrigin: true,
+      },
+    },
+  },
+});