diff --git a/.dockerignore b/.dockerignore
index 50e7d30..3e4c844 100644
--- a/.dockerignore
+++ b/.dockerignore
@@ -4,3 +4,5 @@ target
 config.toml
 certs
 docs
+# The server embeds the built bundle from static/.
+sdk
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 4c1f86d..ee97a57 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -28,3 +28,27 @@ jobs:
       # The load run and the tests that need ffmpeg are ignored, so this is the
       # unit suite plus every integration suite.
       - run: cargo test
+
+  sdk:
+    runs-on: ubuntu-latest
+
+    defaults:
+      run:
+        working-directory: sdk
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: npm
+          cache-dependency-path: sdk/package-lock.json
+
+      - run: npm ci
+
+      - run: npm run check
+
+      # The server serves this file, so it has to match the sources it was
+      # built from.
+      - run: git diff --exit-code ../static/stream-viewer.js
diff --git a/CHANGELOG.md b/CHANGELOG.md
index e12096f..25f6c08 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,14 @@
 # [Unreleased]
 
+## Added
+
+- A viewer SDK for browsers, `@kimsun721/stream-viewer`: joining, playback, simulcast layers, perf reports, reconnecting, the relay and leaf sides of P2P relay, a debug log, and a player built on it. See [sdk/README.md](sdk/README.md). It does not answer the upload probe yet, so the server does not promote a browser to relay.
+- `/stream-viewer.js` serves the same SDK as one file.
+
+## Changed
+
+- `/watch` runs on the SDK.
+
 # [0.1.1]
 
 ## Added
diff --git a/README.ko.md b/README.ko.md
index 74e328f..4fc6b18 100644
--- a/README.ko.md
+++ b/README.ko.md
@@ -102,12 +102,15 @@ HTTPS `:8443`, 클라이언트가 직접 호출합니다.
 | 메서드 | 경로 | 인증 | 설명 |
 | --- | --- | --- | --- |
 | `GET` | `/watch?room={id}` | 없음 | 최소한의 시청 페이지 |
+| `GET` | `/stream-viewer.js` | 없음 | 한 파일로 묶은 뷰어 SDK. `/watch`가 이걸로 동작 |
 | `POST` | `/offer` | 없음 | 시청자 입장. SDP offer를 보내고 SDP answer를 받음 |
 | `POST` | `/whip` | 스트림 키 | 송출. `application/sdp`로 주고받음 |
 | `DELETE` | `/whip/sessions/{id}` | 스트림 키 | 송출 세션 종료 |
 
 `/whip`은 OBS로 검증했습니다. 브라우저를 포함한 다른 WHIP 클라이언트도 송출할 수 있지만, 키프레임을 주기적으로 보내는 것은 송출자의 책임입니다. 시청자의 레이어 전환은 새 레이어의 키프레임에서 일어나고, 서버는 그 키프레임을 한 번만 요청합니다.
 
+직접 만드는 페이지에서 시청자 프로토콜을 손으로 구현할 필요는 없습니다. npm의 `@kimsun721/stream-viewer`인 [뷰어 SDK](sdk/README.md)가 입장, 재생, 레이어 전환, 재접속, P2P 중계를 맡고, 플레이어도 함께 제공합니다.
+
 ## 방 상태
 
 ```
@@ -170,7 +173,7 @@ LOAD_METRICS_PORT=9464 cargo test --release --test load -- --ignored --nocapture
 
 - [Decisions](docs/decisions/): 설계가 지금 모양인 이유를 남긴 ADR
 - [Architecture](docs/architecture/overview.md): 컴포넌트, 스레드, 데이터 흐름
-- [Features](docs/feature/): simulcast, P2P relay, 뷰어 SDK 설계 문서
+- [Features](docs/feature/): simulcast, P2P relay 설계 문서
 - [Tests](docs/test/README.md): 테스트 구성, 부하 테스트, 기록된 베이스라인
 
 ## 로드맵
diff --git a/README.md b/README.md
index f5141dd..16e3f4c 100644
--- a/README.md
+++ b/README.md
@@ -102,12 +102,15 @@ HTTPS `:8443`, called by clients directly.
 | Method | Path | Auth | Description |
 | --- | --- | --- | --- |
 | `GET` | `/watch?room={id}` | none | A minimal viewer page |
+| `GET` | `/stream-viewer.js` | none | The viewer SDK as one file, which `/watch` runs on |
 | `POST` | `/offer` | none | Viewer joins. SDP offer in, SDP answer out |
 | `POST` | `/whip` | stream key | Publish. `application/sdp` in and out |
 | `DELETE` | `/whip/sessions/{id}` | stream key | End the publishing session |
 
 `/whip` is tested with OBS. Another WHIP client, a browser included, can publish as well, but sending keyframes on an interval is its job: a viewer changes layer on a keyframe of the new layer, and the server asks for that keyframe once.
 
+A page of your own does not speak the viewer protocol by hand: the [viewer SDK](sdk/README.md), `@kimsun721/stream-viewer` on npm, joins, plays, follows the layers, reconnects and relays, and comes with a player.
+
 ## Room State
 
 ```
@@ -170,7 +173,7 @@ LOAD_METRICS_PORT=9464 cargo test --release --test load -- --ignored --nocapture
 
 - [Decisions](docs/decisions/): ADRs recording why the design is what it is
 - [Architecture](docs/architecture/overview.md): components, threads and data flow
-- [Features](docs/feature/): design docs for simulcast, the P2P relay and the viewer SDK
+- [Features](docs/feature/): design docs for simulcast and the P2P relay
 - [Tests](docs/test/README.md): suites, the load run, and recorded baselines
 
 ## Roadmap
diff --git a/docs/architecture/overview.md b/docs/architecture/overview.md
index af864d5..a845365 100644
--- a/docs/architecture/overview.md
+++ b/docs/architecture/overview.md
@@ -11,7 +11,8 @@ A WebRTC SFU for low-latency live streaming. One process; persistence and horizo
 | Media loops | Each owns a share of the rooms, drives str0m for their clients and forwards RTP |
 | HTTP API | Room CRUD and JSON metrics for an external backend |
 | Metrics port | Prometheus exposition, without a key. Off unless configured |
-| HTTPS API | SDP offers from viewers, WHIP from publishers, and a minimal viewer page at `/watch` |
+| HTTPS API | SDP offers from viewers, WHIP from publishers, a minimal viewer page at `/watch`, and the viewer SDK it runs on |
+| Viewer SDK | `sdk/`, published to npm. The browser side of the viewer protocol, and a player built on it |
 | DataChannel | Per-client side band: renegotiation, simulcast layer requests, P2P relay signaling |
 
 The external backend is treated as a black box that speaks HTTP. This server makes no assumptions about its stack.
diff --git a/docs/feature/p2p-relay.md b/docs/feature/p2p-relay.md
index 96c885e..211be80 100644
--- a/docs/feature/p2p-relay.md
+++ b/docs/feature/p2p-relay.md
@@ -62,7 +62,7 @@ Before choosing the DataChannel, check that str0m's SCTP takes a few Mbps. If it
 
 **Rejected: the server as a stand-in leaf.** The server would open a peer link to the candidate as a leaf and attach the real one only after it passed. That makes the server a WebRTC client inside a media loop, decrypts the whole stream for the trial, and still measures only the path to the server.
 
-**When.** Once relays run in browsers. Today only the str0m test clients answer the relay protocol, and `watch.html` does not speak it.
+**When.** Browsers can relay through the viewer SDK, which leaves the probe unanswered until this lands. Today only the str0m test clients answer it.
 
 ## Notes
 
@@ -70,4 +70,5 @@ Before choosing the DataChannel, check that str0m's SCTP takes a few Mbps. If it
 - A relay forwards only what it receives, so its leaf watches the relay's layer.
 - One relay carries one leaf.
 - No TURN. A pair that cannot connect directly times out and stays on the SFU.
-- A browser re-encodes a track it forwards to another peer link, which costs the relay CPU and quality and changes the bitrate it sends. Passing encoded frames through needs the Encoded Transform API. The test clients forward RTP as is, so this has not come up.
+- A browser re-encodes a track it forwards to another peer link, which costs the relay CPU and quality and changes the bitrate it sends. The viewer SDK holds the encoder near the bitrate the relay receives, with a start and a floor, because a browser starts low and the rate is judged after `min_p2p_connection_age_secs`. Passing encoded frames through needs the Encoded Transform API and a keyframe from the publisher at link up, which the server has no message for. The test clients forward RTP as is.
+- A relay that changes layer while paired changes what its encoder is held to, and its rate lags behind. Seen with a headless Chrome publisher, whose layers come and go: the server demoted pairs while the relay moved between `h` and `m`.
diff --git a/docs/feature/viewer-sdk.md b/docs/feature/viewer-sdk.md
deleted file mode 100644
index 4dbc0c1..0000000
--- a/docs/feature/viewer-sdk.md
+++ /dev/null
@@ -1,33 +0,0 @@
-# Viewer SDK
-
-A browser package that plays a room, so an integrator does not reimplement the viewer protocol. Not started.
-
-## Why
-
-The viewer protocol is this server's own: an SDP offer to join, renegotiation over the DataChannel, the layer messages, and periodic perf reports. `static/watch.html` speaks all of it, but only inside that page.
-
-## Scope
-
-- Join a room and hand back a stream to attach to a `<video>`.
-- Layer status as events, and layer selection, automatic or manual.
-- Leave.
-- Perf reports, sent without the caller's involvement.
-
-Everything else, the UI included, is the caller's. `watch.html` is rebuilt on the SDK, as its first user and its example.
-
-## Needs
-
-- A protocol version, so a server and an SDK can tell whether they match. There is none today.
-- A package name under a scope, since `stream` is taken.
-- A build, type definitions and CI for the package.
-
-## Out of scope
-
-- Relay. A browser re-encodes a track it forwards. See the notes in [P2P relay](p2p-relay.md).
-- Publishing, which goes over WHIP.
-
-## Notes
-
-- WHEP, on the roadmap, complements it: plain playback in any WHEP player, while the SDK carries layer selection.
-- Client SDKs are how SFUs usually ship a protocol of their own: `livekit-client`, `mediasoup-client`, `janus.js`.
-- Messages it wraps: [Simulcast](simulcast.md).
diff --git a/docs/test/README.md b/docs/test/README.md
index ad62ad9..8dd836b 100644
--- a/docs/test/README.md
+++ b/docs/test/README.md
@@ -9,6 +9,8 @@ exercises the same paths a browser would.
 ```text
 cargo test                                        unit and integration
 cargo test --test viewer -- --include-ignored     adds the test that needs ffmpeg installed
+cd sdk && npm run check                           the viewer SDK: types, unit tests, build
+cd sdk && npm run e2e                             the SDK in headless Chrome against a release build
 ```
 
 The load run is separate and is described below.
@@ -22,6 +24,8 @@ The load run is separate and is described below.
 | `tests/control_api.rs` | API key, stream key, content type, duplicate streamer, key reissue, missing rooms, the metrics endpoints |
 | `tests/relay.rs` | Relay promotion, the upload cutoff, leaf gating, the peer link timeout |
 | `tests/load.rs` | The load baseline. Ignored by default |
+| `sdk/e2e/watch.mjs` | One viewer on `/watch`: playback, layer picks, a room going idle and back, a room that is not live |
+| `sdk/e2e/relay.mjs` | Two viewers paired as relay and leaf: the handover both ways, the relay's reports, a relay leaving. The test answers the upload probe the SDK leaves alone |
 
 Each load run worth keeping is recorded under [`baseline/`](baseline/), from
 [`_template.md`](baseline/_template.md), so a later run is compared against an
diff --git a/sdk/.gitignore b/sdk/.gitignore
new file mode 100644
index 0000000..b947077
--- /dev/null
+++ b/sdk/.gitignore
@@ -0,0 +1,2 @@
+node_modules/
+dist/
diff --git a/sdk/README.md b/sdk/README.md
new file mode 100644
index 0000000..fd51057
--- /dev/null
+++ b/sdk/README.md
@@ -0,0 +1,92 @@
+# @kimsun721/stream-viewer
+
+The browser side of [stream](https://github.com/kimsun721/stream), a WebRTC SFU for live streaming. It joins a room, plays it, follows the simulcast layers the server offers, reports link quality, and relays to another viewer when the server pairs it with one, so a page does not reimplement the viewer protocol.
+
+```sh
+npm install @kimsun721/stream-viewer
+```
+
+## A ready-made player
+
+```js
+import { createPlayer } from "@kimsun721/stream-viewer/player";
+
+const player = createPlayer(document.getElementById("player"), {
+  room: "RM_0_...",
+  server: "https://stream.example.com:8443",
+});
+
+// later
+player.destroy();
+```
+
+The player draws the video, a stats readout, layer buttons, a mute toggle and a debug log. Its colors are custom properties on `.sv-player` (`--sv-bg`, `--sv-panel`, `--sv-ink`, `--sv-accent` and the rest), so a page restyles it without touching the rules.
+
+## The core, with your own UI
+
+```js
+import { Viewer } from "@kimsun721/stream-viewer";
+
+const viewer = new Viewer({ room: "RM_0_...", server: "https://stream.example.com:8443" });
+viewer.attach(document.querySelector("video"));
+
+viewer.on("state", ({ state, reason }) => console.log(state, reason));
+viewer.on("layers", (layers) => console.log(layers.layers, layers.current, layers.mode));
+viewer.on("stats", (stats) => console.log(stats.width, stats.mbps));
+
+await viewer.connect();
+viewer.setLayer("l");
+viewer.setAutoLayer();
+viewer.close();
+```
+
+| Option | Default | |
+| --- | --- | --- |
+| `room` | | The room id |
+| `server` | the page's origin | Base URL of the server's client API, the HTTPS port |
+| `reconnect` | `true` | Join again after a dropped connection, and keep asking while the room is not live |
+| `maxRetryDelayMs` | `10000` | Ceiling for the wait between attempts, which doubles from one second |
+| `statsIntervalMs` | `1000` | How often stats are read and link quality reported |
+| `debug` | `false` | Emit `log` events, also switched with `setDebug` |
+| `rtcConfiguration` | | Passed to `RTCPeerConnection`, relay links included |
+| `relay` | `true` | Forward the stream to another viewer when the server makes this one a relay |
+
+| Event | Payload |
+| --- | --- |
+| `state` | `idle`, `connecting`, `connected`, `reconnecting`, `not-live`, `failed` or `closed`, with a `reason` |
+| `layers` | The video track's layers, the one being sent, a pending target and the mode |
+| `layerchange` | A switch, with how long it took when it answers a request |
+| `stats` | Picture size, frame rate, bitrate, round trip, freezes, loss. From the relay link while a leaf watches through it |
+| `role` | `relay`, `leaf` or `null`, and whether the peer link is up |
+| `log` | Debug mode: switches, freezes, RTP timestamp jumps, connection changes |
+| `error` | An error, retried or not |
+
+`connect()` resolves once connected. It rejects with `JoinError` for a refused offer that is not worth retrying, and when `close()` is called first.
+
+## Notes
+
+- A layer change takes effect on the next keyframe of the new layer. The server asks the publisher for one once, so a publisher has to send keyframes on an interval of its own, as OBS does.
+- Browsers start video muted to allow autoplay. The player has a button for sound; with the core, unmute the element from a user gesture.
+- The server may pair two viewers: the relay forwards what it receives to the leaf over a peer link of their own, and the server stops sending to the leaf. Either side falls back to the server's stream when the link drops or the server demotes the pair. A page needs no code for it, and the player says nothing of it outside debug mode.
+- A switch between the server's stream and a relay's keeps the old picture up until the new source has decoded a frame. A leaf whose relay goes silent for a second goes back to the server without waiting for the connection state.
+- A browser encodes a forwarded track again. The relay holds its encoder near the bitrate it receives, since the server demotes a relay that sends well under it.
+- The SDK does not answer the server's upload probe, which the server is to replace with a measurement of its own. Until then the server promotes no browser to relay, and the pairing above does not happen.
+- A leaf watches the relay's layer. Picking a layer has no effect while it does.
+- The relay link has no TURN of its own: pass ICE servers in `rtcConfiguration`, or a pair that cannot connect directly stays on the server.
+- The server serves the same code as one file at `/stream-viewer.js`, which its own `/watch` page uses.
+
+## Developing
+
+```sh
+npm ci
+npm run check    # typecheck, unit tests, build
+```
+
+`npm run build` also rewrites `../static/stream-viewer.js`. Commit it with the sources; CI fails when it drifts.
+
+```sh
+cargo build --release   # from the repository root
+npm run e2e             # or: npm run e2e -- relay
+```
+
+`e2e/` starts that build with a config of its own, publishes Chrome's fake camera over WHIP and watches it from `/watch` in headless Chrome. It takes Chrome from its usual install path, or `CHROME_PATH`, and the server from `STREAM_BIN`.
diff --git a/sdk/build.mjs b/sdk/build.mjs
new file mode 100644
index 0000000..938d28e
--- /dev/null
+++ b/sdk/build.mjs
@@ -0,0 +1,21 @@
+import { build } from "esbuild";
+
+const common = { bundle: true, format: "esm", target: "es2022", logLevel: "warning" };
+
+// The package: two entry points sharing one chunk, so a page importing both
+// gets one Viewer class.
+await build({
+  ...common,
+  entryPoints: { index: "src/index.ts", player: "src/player.ts" },
+  outdir: "dist",
+  splitting: true,
+});
+
+// The server's copy, one file. Checked in, and CI fails if it drifts from the
+// sources.
+await build({
+  ...common,
+  entryPoints: ["src/bundle.ts"],
+  outfile: "../static/stream-viewer.js",
+  banner: { js: "// Built from sdk/ by `npm run build`. Do not edit." },
+});
diff --git a/sdk/e2e/common.mjs b/sdk/e2e/common.mjs
new file mode 100644
index 0000000..fcc7530
--- /dev/null
+++ b/sdk/e2e/common.mjs
@@ -0,0 +1,124 @@
+// Helpers shared by the end to end scenarios. Each scenario is its own
+// process, started by run.mjs against a server it started.
+import { chromium } from "playwright-core";
+
+export const sdp = process.env.E2E_SDP;
+export const control = process.env.E2E_CONTROL;
+const auth = { Authorization: `Bearer ${process.env.E2E_API_KEY}` };
+
+const results = [];
+
+export function check(name, ok, detail = "") {
+  results.push({ name, ok });
+  console.log(`${ok ? "PASS" : "FAIL"}  ${name}${detail ? `  (${detail})` : ""}`);
+}
+
+/** Prints the tally and exits with its verdict. */
+export function finish() {
+  const failed = results.filter((r) => !r.ok).length;
+  console.log(`\n${results.length - failed}/${results.length} passed`);
+  process.exit(failed ? 1 : 0);
+}
+
+export const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+
+/** Polls `fn` until it returns something truthy, or null after `ms`. */
+export async function until(fn, ms, step = 200) {
+  const end = Date.now() + ms;
+  while (Date.now() < end) {
+    const value = await fn();
+    if (value) return value;
+    await sleep(step);
+  }
+  return null;
+}
+
+export async function api(method, path, body) {
+  const response = await fetch(`${control}${path}`, {
+    method,
+    headers: { ...auth, ...(body ? { "Content-Type": "application/json" } : {}) },
+    body: body ? JSON.stringify(body) : undefined,
+  });
+  const text = await response.text();
+  return text ? JSON.parse(text) : null;
+}
+
+export const metrics = async () => (await fetch(`${control}/metrics.json`, { headers: auth })).json();
+
+export function launch() {
+  return chromium.launch({
+    // Playwright's own browsers are not installed with playwright-core, so
+    // this takes Chrome from its usual place unless told otherwise.
+    ...(process.env.CHROME_PATH ? { executablePath: process.env.CHROME_PATH } : { channel: "chrome" }),
+    headless: true,
+    args: ["--use-fake-ui-for-media-stream", "--use-fake-device-for-media-stream", "--autoplay-policy=no-user-gesture-required"],
+  });
+}
+
+/**
+ * Publishes the fake camera over WHIP in three simulcast layers. Chrome as a
+ * publisher answers keyframe requests but sends no keyframes on a schedule of
+ * its own, unlike OBS.
+ */
+export async function publish(page, streamKey) {
+  await page.goto(`${sdp}/watch`);
+  return page.evaluate(
+    async ({ sdp, streamKey }) => {
+      const media = await navigator.mediaDevices.getUserMedia({ video: { width: 1280, height: 720, frameRate: 30 } });
+      const pc = new RTCPeerConnection();
+      pc.addTransceiver(media.getVideoTracks()[0], {
+        direction: "sendonly",
+        sendEncodings: [
+          { rid: "l", scaleResolutionDownBy: 4, maxBitrate: 300_000 },
+          { rid: "m", scaleResolutionDownBy: 2, maxBitrate: 800_000 },
+          { rid: "h", maxBitrate: 2_500_000 },
+        ],
+      });
+      await pc.setLocalDescription(await pc.createOffer());
+      await new Promise((resolve) => {
+        if (pc.iceGatheringState === "complete") return resolve();
+        pc.onicegatheringstatechange = () => pc.iceGatheringState === "complete" && resolve();
+        setTimeout(resolve, 2000);
+      });
+      const response = await fetch(`${sdp}/whip`, {
+        method: "POST",
+        headers: { "Content-Type": "application/sdp", Authorization: `Bearer ${streamKey}` },
+        body: pc.localDescription.sdp,
+      });
+      if (!response.ok) return `whip ${response.status}`;
+      await pc.setRemoteDescription({ type: "answer", sdp: await response.text() });
+      window.publisher = pc;
+      return "ok";
+    },
+    { sdp, streamKey },
+  );
+}
+
+/** A room with a publisher on it, live. */
+export async function liveRoom(browser) {
+  const room = await api("POST", "/rooms");
+  const publisher = await browser.newPage();
+  check("publisher connects over WHIP", (await publish(publisher, room.stream_key)) === "ok");
+  await until(async () => (await api("GET", `/rooms/${room.room_id}`))?.state === "Preview", 10_000);
+  await api("PATCH", `/rooms/${room.room_id}`, { state: "Live" });
+  return { room, publisher };
+}
+
+/** Whether the page's <video> moved on over two seconds, and at what size. */
+export async function advancing(page) {
+  const read = () =>
+    page.evaluate(() => {
+      const v = document.querySelector("video");
+      return { t: v.currentTime, w: v.videoWidth, h: v.videoHeight };
+    });
+  const a = await read();
+  await sleep(2000);
+  const b = await read();
+  return b.w > 0 && b.t - a.t > 1 ? `${b.w}x${b.h}, +${(b.t - a.t).toFixed(1)} s` : null;
+}
+
+/** Collects console errors, leaving out the 404s of offers to a room that is not live. */
+export function collectErrors(page, name, into) {
+  page.on("console", (m) => m.type() === "error" && !m.text().startsWith("Failed to load resource") && into.push(`${name}: ${m.text()}`));
+  page.on("pageerror", (e) => into.push(`${name}: ${e}`));
+}
diff --git a/sdk/e2e/relay.mjs b/sdk/e2e/relay.mjs
new file mode 100644
index 0000000..895aaf6
--- /dev/null
+++ b/sdk/e2e/relay.mjs
@@ -0,0 +1,146 @@
+// Two viewers on /watch, one promoted to relay for the other: pairing, the
+// handover both ways, the relay's reports, and a relay that leaves.
+import { advancing, api, check, collectErrors, finish, launch, liveRoom, metrics, sdp, sleep, until } from "./common.mjs";
+
+// The SDK leaves the upload probe unanswered until the server measures upload
+// itself, so the test answers it for the page meant to relay, and records what
+// the page sends.
+const answerProbe = () => {
+  const create = RTCPeerConnection.prototype.createDataChannel;
+  window.sent = [];
+  RTCPeerConnection.prototype.createDataChannel = function (...args) {
+    const channel = create.apply(this, args);
+    const send = channel.send.bind(channel);
+    channel.send = (data) => {
+      window.sent.push(JSON.parse(data));
+      send(data);
+    };
+    channel.addEventListener("message", (event) => {
+      if (JSON.parse(event.data).type === "probe_available_upload") {
+        send(JSON.stringify({ type: "available_upload", available_upload_kbps: 20_000 }));
+      }
+    });
+    return channel;
+  };
+};
+
+// Records when the page's <video> draws each frame, so a test can tell how
+// long the picture stood still.
+const recordFrames = () => {
+  window.drawn = [];
+  const watch = () => {
+    const video = document.querySelector("video");
+    if (!video) return setTimeout(watch, 100);
+    const step = (now) => {
+      window.drawn.push(now);
+      video.requestVideoFrameCallback(step);
+    };
+    video.requestVideoFrameCallback(step);
+  };
+  watch();
+};
+
+/**
+ * The longest the picture stood still within [from, to] on the page clock,
+ * counted from the last frame drawn before `from`.
+ */
+const longestGap = (page, from, to) =>
+  page.evaluate(
+    ({ from, to }) => {
+      const first = window.drawn.findLastIndex((t) => t < from);
+      const times = window.drawn.slice(Math.max(first, 0)).filter((t) => t <= to);
+      let gap = 0;
+      for (let i = 1; i < times.length; i++) gap = Math.max(gap, times[i] - times[i - 1]);
+      return Math.round(gap);
+    },
+    { from, to },
+  );
+const now = (page) => page.evaluate(() => performance.now());
+
+const browser = await launch();
+const { room } = await liveRoom(browser);
+const errors = [];
+
+async function watch(name, probe) {
+  const page = await browser.newPage();
+  collectErrors(page, name, errors);
+  if (probe) await page.addInitScript(answerProbe);
+  await page.addInitScript(recordFrames);
+  await page.goto(`${sdp}/watch?room=${room.room_id}&debug`);
+  return page;
+}
+const stats = (page) => page.textContent(".sv-stats");
+const logOf = (page) => page.textContent(".sv-log");
+
+const relay = await watch("relay", true);
+// The server's own pick moves a viewer between layers as its estimate moves,
+// and the headless publisher's layers come and go. A relay changing layer
+// mid pairing is its own case, so the relay here holds one.
+await until(async () => ((await relay.$$(".sv-layers button")).length === 4 ? true : null), 15_000);
+await sleep(2000);
+await relay.click(".sv-layers button:nth-child(3)");
+await until(async () => ((await stats(relay)).includes("layer m, manual") ? true : null), 15_000);
+
+const leaf = await watch("leaf", false);
+await until(() => advancing(leaf), 15_000, 0);
+const pairStart = await now(leaf);
+
+const paired = await until(async () => {
+  const [r, l] = [await stats(relay), await stats(leaf)];
+  return r.includes("relaying to a viewer") && l.includes("watching through a relay") ? true : null;
+}, 45_000);
+check(
+  "the server pairs the two and the link comes up",
+  !!paired,
+  paired ? "" : `${await stats(relay)} | ${await stats(leaf)}`.replace(/\n/g, " "),
+);
+await sleep(2000);
+const takeover = await longestGap(leaf, pairStart, await now(leaf));
+check("the leaf's picture does not stall when the relay takes over", takeover < 300, `longest gap ${takeover} ms`);
+
+const leafPlays = await until(() => advancing(leaf), 10_000, 0);
+check("the leaf plays the relay's stream", !!leafPlays, leafPlays ?? "stalled");
+const relayPlays = await advancing(relay);
+check("the relay keeps playing its own", !!relayPlays, relayPlays ?? "stalled");
+
+const before = await metrics();
+await sleep(10_000);
+const after = await metrics();
+const still = (await stats(leaf)).includes("watching through a relay");
+check(
+  "the pair holds for 10 s, the relay's rate passing the server's check",
+  still && after.demotions === before.demotions,
+  `demotions ${before.demotions} -> ${after.demotions}`,
+);
+check(
+  "the server counts the leaf as served by its relay",
+  after.connected_leaves === 1 && after.relays === 1,
+  `relays ${after.relays}, connected leaves ${after.connected_leaves}`,
+);
+const outgoing = (await relay.evaluate(() => window.sent.filter((m) => m.type === "relay_outgoing").map((m) => m.kbps))).slice(-5);
+check("the relay reports what it sends", outgoing.length > 0 && outgoing.every((k) => k > 0), `kbps ${outgoing.join(", ")}`);
+
+// Outside debug mode the player says nothing about the relay.
+await leaf.click(".sv-debug");
+const quiet = await stats(leaf);
+check("without debug the leaf's player does not mention the relay", !quiet.includes("relay"), quiet.replace(/\n/g, " | "));
+await leaf.click(".sv-debug");
+
+// The relay leaves without a word. The leaf notices from its media stopping.
+const leftAt = await now(leaf);
+await relay.close();
+const noticed = await until(async () => ((await logOf(leaf)).includes("lost the relay") ? await now(leaf) : null), 15_000, 50);
+check(
+  "the leaf notices its relay is gone within 2 s",
+  noticed !== null && noticed - leftAt < 2000,
+  noticed ? `${Math.round(noticed - leftAt)} ms` : "not noticed",
+);
+const leafBack = await until(() => advancing(leaf), 15_000, 0);
+check("the leaf plays the server's stream again", !!leafBack, leafBack ?? "stalled");
+console.log(`      picture stood still for ${await longestGap(leaf, leftAt, await now(leaf))} ms around the relay leaving`);
+
+check("no errors on either page", errors.length === 0, errors.slice(0, 3).join(" / "));
+
+await browser.close();
+await api("DELETE", `/rooms/${room.room_id}`);
+finish();
diff --git a/sdk/e2e/run.mjs b/sdk/e2e/run.mjs
new file mode 100644
index 0000000..646a058
--- /dev/null
+++ b/sdk/e2e/run.mjs
@@ -0,0 +1,83 @@
+// Starts a server from a release build with a config of its own, runs every
+// scenario against it in headless Chrome, and stops it.
+//
+//   cargo build --release && cd sdk && npm run e2e [-- relay]
+//
+// STREAM_BIN points at another server binary, CHROME_PATH at another Chrome.
+import { spawn } from "node:child_process";
+import { createWriteStream } from "node:fs";
+import { mkdtemp, writeFile } from "node:fs/promises";
+import { tmpdir } from "node:os";
+import { dirname, join, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const here = dirname(fileURLToPath(import.meta.url));
+const bin = resolve(process.env.STREAM_BIN ?? join(here, "../../target/release/stream"));
+const scenarios = process.argv.length > 2 ? process.argv.slice(2) : ["watch", "relay"];
+
+const ports = { sdp: 18443, control: 18080, media: 41000 };
+const apiKey = "e2e-api-key-0123456789";
+
+// Only the gates that would put a pairing minutes away are scaled down, as in
+// the Rust integration tests.
+const config = `[server]
+public_ip = "127.0.0.1"
+media_port = ${ports.media}
+https_sdp_server_port = ${ports.sdp}
+http_rest_server_port = ${ports.control}
+total_shards = 2
+
+[bitrate]
+estimate_secs = 1
+
+[perf]
+min_samples_len = 5
+
+[relay]
+min_connection_age_secs = 2
+`;
+
+const dir = await mkdtemp(join(tmpdir(), "stream-e2e-"));
+await writeFile(join(dir, "config.toml"), config);
+const logPath = join(dir, "server.log");
+const log = createWriteStream(logPath);
+
+const server = spawn(bin, [], { cwd: dir, env: { ...process.env, API_KEY: apiKey, RUST_LOG: "info" } });
+server.stdout.pipe(log);
+server.stderr.pipe(log);
+let exited = false;
+server.on("exit", () => (exited = true));
+server.on("error", (error) => {
+  console.error(`could not start ${bin}: ${error.message}`);
+  process.exit(1);
+});
+
+const control = `http://127.0.0.1:${ports.control}`;
+const deadline = Date.now() + 20_000;
+for (;;) {
+  try {
+    const response = await fetch(`${control}/metrics.json`, { headers: { Authorization: `Bearer ${apiKey}` } });
+    if (response.ok) break;
+  } catch {}
+  if (exited || Date.now() > deadline) {
+    console.error(`the server did not come up, see ${logPath}`);
+    server.kill();
+    process.exit(1);
+  }
+  await new Promise((r) => setTimeout(r, 200));
+}
+
+const env = { ...process.env, E2E_SDP: `http://127.0.0.1:${ports.sdp}`, E2E_CONTROL: control, E2E_API_KEY: apiKey };
+let failed = 0;
+
+for (const name of scenarios) {
+  console.log(`\n== ${name}`);
+  const code = await new Promise((done) => {
+    spawn(process.execPath, [join(here, `${name}.mjs`)], { env, stdio: "inherit" }).on("exit", done);
+  });
+  if (code !== 0) failed += 1;
+}
+
+server.kill();
+if (failed) console.log(`\nserver log: ${logPath}`);
+process.exit(failed ? 1 : 0);
diff --git a/sdk/e2e/watch.mjs b/sdk/e2e/watch.mjs
new file mode 100644
index 0000000..a667943
--- /dev/null
+++ b/sdk/e2e/watch.mjs
@@ -0,0 +1,94 @@
+// One viewer on /watch: playback, layers, a room going idle and back, and a
+// room that is not live.
+import { api, check, collectErrors, finish, launch, liveRoom, publish, sdp, sleep, until } from "./common.mjs";
+
+const browser = await launch();
+const { room, publisher } = await liveRoom(browser);
+
+const viewer = await browser.newPage();
+const errors = [];
+collectErrors(viewer, "viewer", errors);
+await viewer.goto(`${sdp}/watch?room=${room.room_id}&debug`);
+
+const stats = () => viewer.textContent(".sv-stats");
+const status = () => viewer.textContent(".sv-status");
+
+const playing = await until(
+  () =>
+    viewer.evaluate(() => {
+      const v = document.querySelector("video");
+      return v && v.videoWidth > 0 && v.currentTime > 0.5 ? `${v.videoWidth}x${v.videoHeight}` : null;
+    }),
+  20_000,
+);
+check("the watch page plays the stream", !!playing, playing ?? "no picture");
+check("status says watching", (await status())?.startsWith("Watching"), await status());
+
+const layerButtons = await until(async () => {
+  const texts = await viewer.$$eval(".sv-layers button", (bs) => bs.map((b) => b.textContent));
+  return texts.length === 4 ? texts : null;
+}, 10_000);
+check("Auto and three layers are offered", !!layerButtons, JSON.stringify(layerButtons));
+
+// A keyframe request for a layer is debounced for a second on the server, so
+// wait past it.
+await sleep(2000);
+const current = (await stats()).match(/layer (\w+)/)?.[1];
+const pick = current === "h" ? "m" : "h";
+await viewer.click(`.sv-layers button:nth-child(${pick === "m" ? 3 : 4})`);
+const manual = await until(async () => {
+  const s = await stats();
+  return s?.includes(`layer ${pick}, manual`) && !s.includes("waiting") ? s : null;
+}, 15_000);
+check("picking a layer switches to it on a keyframe", !!manual, (manual ?? (await stats())).replace(/\n/g, " | "));
+
+await viewer.click(".sv-layers button:nth-child(1)");
+const auto = await until(async () => ((await stats())?.includes(", auto") ? true : null), 10_000);
+check("Auto hands the choice back to the server", !!auto);
+
+await sleep(3000);
+const log = await viewer.textContent(".sv-log");
+const switched = log?.match(/switched \w+ to \w, \d+ ms after asking/)?.[0];
+check("debug log records the switch with its wait", !!switched, switched);
+check("a lone viewer is not paired", !(await stats()).includes("relay"));
+
+// The room goes idle: the viewer loses its stream and waits, then the room
+// comes back and the viewer resumes without a reload.
+await api("PATCH", `/rooms/${room.room_id}`, { state: "Idle" });
+const waiting = await until(async () => ((await status())?.includes("not live") ? await status() : null), 30_000);
+check("an idle room puts the viewer in not-live and retrying", !!waiting, waiting ?? (await status()));
+
+await publisher.evaluate(() => window.publisher.close());
+check("publisher reconnects", (await publish(publisher, room.stream_key)) === "ok");
+await until(async () => (await api("GET", `/rooms/${room.room_id}`))?.state === "Preview", 10_000);
+await api("PATCH", `/rooms/${room.room_id}`, { state: "Live" });
+const resumed = await until(
+  () =>
+    viewer.evaluate(() => {
+      const v = document.querySelector("video");
+      const s = document.querySelector(".sv-status")?.textContent ?? "";
+      return s.startsWith("Watching") && v && v.videoWidth > 0 ? s : null;
+    }),
+  30_000,
+);
+check("the viewer resumes once the room is live again", !!resumed, resumed ?? (await status()));
+
+const fresh = await browser.newPage();
+await fresh.goto(`${sdp}/watch`);
+const unknownRoom = await fresh.evaluate(async () => {
+  const { Viewer } = await import("/stream-viewer.js");
+  const v = new Viewer({ room: "RM_0_nosuchroomxx", reconnect: false });
+  try {
+    await v.connect();
+    return "connected";
+  } catch (e) {
+    return `${v.state} ${e.status}`;
+  }
+});
+check("without reconnect, a room that is not live rejects connect", unknownRoom === "failed 404", unknownRoom);
+
+check("no errors on the watch page console", errors.length === 0, errors.slice(0, 3).join(" / "));
+
+await browser.close();
+await api("DELETE", `/rooms/${room.room_id}`);
+finish();
diff --git a/sdk/package-lock.json b/sdk/package-lock.json
new file mode 100644
index 0000000..90215ba
--- /dev/null
+++ b/sdk/package-lock.json
@@ -0,0 +1,908 @@
+{
+  "name": "@kimsun721/stream-viewer",
+  "version": "0.1.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "@kimsun721/stream-viewer",
+      "version": "0.1.0",
+      "license": "MIT OR Apache-2.0",
+      "devDependencies": {
+        "@types/node": "22.20.5",
+        "esbuild": "0.28.2",
+        "playwright-core": "1.55.0",
+        "typescript": "7.0.2"
+      }
+    },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.28.2.tgz",
+      "integrity": "sha512-XExcO+dvLKvVtNTibSTBej1NCAbaGhWn9Ww1ZPx80qsahhPFe/8jgWP0IchNe0F3HwkU7n8ejhH8bjonqht8mQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.28.2.tgz",
+      "integrity": "sha512-kXXoiPVVGQcnIYGOeaovwOURpniDBpSq4A03qkQ+BMQqtGG6HYap3xne9C1O1yo4TR3qxlCX5IqqmX6fFo2Lqg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.28.2.tgz",
+      "integrity": "sha512-5YfKeeI8qWfBZIX+u2xZC3Zlb3Os/gLS2sbEKM+I4ZOcsWmHS2WLysCcQZDAFRslDUU5Oiq44gf6PYN1vGwG5A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.28.2.tgz",
+      "integrity": "sha512-O387ite7SzUyCcy3JQX4P4bLtEA7bLLkx+esve5JHnyYfNTxcVpXZo9jhdB0lTKN44gztELTdU7nS8Nr16Fs1Q==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.28.2.tgz",
+      "integrity": "sha512-n4KqkOQrraxHJcgjM1RvwbigfQKIKJVpM7xp+KsxiyUSrRdIXnt73VhrPAx0fV44hgfmIVKjxMN9J1t5jySVkw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.28.2.tgz",
+      "integrity": "sha512-uq6suIWYP37qzGddBKPw5QEQPi6HiLGsO7UmkpfyaYNQ3D+rN6w6WfwH+nuqcGXWvawGwxOEroO4YGnFh95azw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.28.2.tgz",
+      "integrity": "sha512-n+I0BTSRIoy+d6RPKnEVwql5UwBJolytvY4mAOIEJorKlqgPII8ix6slVVrfZ5Tnj7glIZvloylbB/EJPMWEXw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.28.2.tgz",
+      "integrity": "sha512-78XJTJkvPs0kz2w61301PJjXl4g7q3JqiYMZ/M/yVI73EHBrCRTgkhu9oqG7vPqq+a/yadEW8aD+agKlk5xrmg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.28.2.tgz",
+      "integrity": "sha512-XlDnu2q5yoqems+xay6wSAcg9DDD7K9RLKZEBOMZm3ckNpJBvOX20tSfby8KfrrhINDyv9V2YVZKY/SpoGJI8w==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.28.2.tgz",
+      "integrity": "sha512-pW4AC0P3it8c7do9MVM4p51FzHzdM/TZrerurgRcHJ2WTa1VQ1CIq18xncfpBJw4ojkiZZrKW2yIBWBP92j6Ug==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.28.2.tgz",
+      "integrity": "sha512-CYbnj78HsIeA+DhgUKgFCfvNsTHFhMMrinUrMZpDXJXKN8T3XViTZ/+wtHeVxEWY8ewSzTFN+nRmSwO2tZaLUQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.28.2.tgz",
+      "integrity": "sha512-buwkd8nsph4R+ajRvw0qM5Hja/TXQow3ptzWO2EbG/cqcIkHloRrdlBtQlshyYGTNFvfkfJ5tpPLVkY4DtsPfQ==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.28.2.tgz",
+      "integrity": "sha512-ZVykbDyk7519VwiNb9Lcj9m8XM6v5V9uKPvrEMkkEedVewf+0itkhahp4HDpgERXhwLRpWFypsGbG/J8s0QjJA==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.28.2.tgz",
+      "integrity": "sha512-CAXl+Dtd9UUuJd8pKKdwh6MLm3MUMiqMPmhZ3tTSXPqfyQ3vDl6R5hZdZ/kYojK4ofXtdfSv1tFq8XzWx3heNQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.28.2.tgz",
+      "integrity": "sha512-GeXCej4IQtU1B+QlDV8W/RRvbzI3O/Stss+/bCXv4lZls5WGRtu2a+3JkA3i4qIUlMXpcHebWpF8AkJhATowuA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.28.2.tgz",
+      "integrity": "sha512-3H1weTYZPxt/WOhByszQZybS9w5lKzUn1FDMsgEChbHWQwHYQQRfBxgCcZvPhjHfKyJjIievvMmEUawJrdY9Dg==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.28.2.tgz",
+      "integrity": "sha512-4xTZr1FUmSoQW4XIWmit3tzQrUTZM+N3P0XV8xROKYF50XfI7xeO90+1bZvNwxIufQ9hDQVRJH5YhgPVF8A/HQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-arm64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.28.2.tgz",
+      "integrity": "sha512-sSATRjPeDBg3pdgHoQfoYBob11Kk1FGa9lui5RIHZCoCkJa9QKlvl3/vKz2usCmYYjs7ymJR/2Nnsqe+Hjt5nw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.28.2.tgz",
+      "integrity": "sha512-lqnzCV+mM0gIADaKihiCg6ifgfU2L3h5E33rNQBN1Y4MaVGnzryzmvvf7UHxprpQdE8hpqLolJ9Rl+SkIRDpyw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-arm64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.28.2.tgz",
+      "integrity": "sha512-AL2qJILH7lNjrDmCQDvdxMfAUIv8KMNZOvrwAQ8i8//ntL9FflhOyMJ8OZSMBb8/AWXe3/5v5S20y3zCoZWKoQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.28.2.tgz",
+      "integrity": "sha512-QtiuPytchRyC4rwUKhexJdQKvDuZ6hWloi3igqPQNUJCS1/v9EiO3UTOXR6A3FoMo4fnAKbWJdqaIwhOzh8qEw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openharmony-arm64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.28.2.tgz",
+      "integrity": "sha512-WkhYDmpTjLvGlScA1rwjRUmhl4k8oXR3cIbtqWmELgU/dFeHHlEllxDvdWcNJV9rbzCexB5vz8gtNewWLgCT7Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.28.2.tgz",
+      "integrity": "sha512-GPMSkTOtMnv2U2F8gxe4Io6qmVs+YKyp832Etqqxr0hFngmXQ3rzwytelm3GIn7T4VviRUlf3sOgBOiTdvaf7g==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.28.2.tgz",
+      "integrity": "sha512-PIhhEkE9uPBleRBrQEJpUn7MBnibZzbGzYWPmY3x+YoVg/95zbjB4CxPPOQ8l5tYYM4mMaCthF8/1DIfBQQyWQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.28.2.tgz",
+      "integrity": "sha512-YmJbfTlvU7Sdn9BB+4PRES4oB6pxgS37MAONj+hBr/cpXS1aBPKXxNnDbu+QCWPj0o9dgyxeq79g6c5P8KeuYA==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.28.2.tgz",
+      "integrity": "sha512-5ebpxr3nWMzrL/rnUI755Jkuee0bHL/Gq0WTF9lvcpv73wAp5eu8MfBUgWK9bhWvZjj7yX8etf/8tI8Ney695g==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@types/node": {
+      "version": "22.20.5",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.20.5.tgz",
+      "integrity": "sha512-U2+DNr+wSjpsTS/wZGYHq7GcwfuSmKiKvoPvK22zwTlRhU91yOniN4qRR5KhIjvif7ysw/dz/hKmfDH0Ris4aA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~6.21.0"
+      }
+    },
+    "node_modules/@typescript/typescript-aix-ppc64": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-aix-ppc64/-/typescript-aix-ppc64-7.0.2.tgz",
+      "integrity": "sha512-MTKKkWB7p/0E9xi1d1tHtZ5PiLkGEMIq88pK2CubZjOsLtYTLqhgIgi6zepFa+9GHZ6h05NMCkQxGKiPXMxXtQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-darwin-arm64": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-darwin-arm64/-/typescript-darwin-arm64-7.0.2.tgz",
+      "integrity": "sha512-gowzar9MwS/aRWp6f3a4KUqzRjAZjOsmGNCM6LcTgXum+dBfgsBVMN+AgvOCCbguXyick6LJhpBszxMebJ8syA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-darwin-x64": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-darwin-x64/-/typescript-darwin-x64-7.0.2.tgz",
+      "integrity": "sha512-SZ9xZInqApNlNGc9s0W1VSsktYSOe9cFqNOIqmN1Gs8SmkjKZYFt017G4VwPxASInODuAdbTW7sXiFUf893RgA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-freebsd-arm64": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-freebsd-arm64/-/typescript-freebsd-arm64-7.0.2.tgz",
+      "integrity": "sha512-W5NH4y/J0plIIS5b2xvTEkU7JFxyqdMAOgf+Ilhl0vHQXKO5dZoxd+C/jEtq56c4F3wk71RB4BMRQ2XdI+bwYQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-freebsd-x64": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-freebsd-x64/-/typescript-freebsd-x64-7.0.2.tgz",
+      "integrity": "sha512-UMGDx5sTpzNw3WiPebH7l90IWfJggEd+egHt/q6p7/Cm3zqoV7VxkGXt+3DxPIw8CcmvAB0j3sVVfbhX+M4Tpw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-linux-arm": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-linux-arm/-/typescript-linux-arm-7.0.2.tgz",
+      "integrity": "sha512-gffT3xPz9sR7j/YJExkyPntrI0P2EP9XbOyWzth2/Gs0RstK+90RBcO0ncXoXy/beYll1SXw846Nf2zdnEz0QQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-linux-arm64": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-linux-arm64/-/typescript-linux-arm64-7.0.2.tgz",
+      "integrity": "sha512-Qh4eU4/y3yDjnfjjyPYihMj5/ODIlmt+Bzu17OI+fiSRDW57QmU5SiN63exPRNJPKUzcc1INa1NXdrJ+MqHjUQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-linux-loong64": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-linux-loong64/-/typescript-linux-loong64-7.0.2.tgz",
+      "integrity": "sha512-uEHck9i8hoAzXPiYRib1O7miOnz23SxIeVl6F4LXox+qov1K35jHcEW6VHKvZI+pyvl7fZEP4MCU5LYvIq1GuQ==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-linux-mips64el": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-linux-mips64el/-/typescript-linux-mips64el-7.0.2.tgz",
+      "integrity": "sha512-R4KvAMnE43W5Qeqb0Ly56O3mWMWIAgsMyz36DCaycd5nbg/9kzm0liw3JocfRqyJY0KPmzFjbswozXyW0DnIYA==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-linux-ppc64": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-linux-ppc64/-/typescript-linux-ppc64-7.0.2.tgz",
+      "integrity": "sha512-DORx5b3sd/4S7eayxm4FQv+A7CrkUIGRaHiwI8oiHTAI1fAPWhF4J0vAlkC8biAlHSVVwxMQ3tjZ2/DVbnQiiA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-linux-riscv64": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-linux-riscv64/-/typescript-linux-riscv64-7.0.2.tgz",
+      "integrity": "sha512-wf0jqEDOjrPRnKwYRyyJDRo11KMbvMFrU+q4zqKyChODBzvlkbhNQfKvLxQCcwTpdDaXSHZTVuh0JoCrKCUMHQ==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-linux-s390x": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-linux-s390x/-/typescript-linux-s390x-7.0.2.tgz",
+      "integrity": "sha512-IkwJc3L7yhytWd/ewjyxNDfOmswCm9GWMJT/ue/dU4aZNbwZeYAetq42VyLmsmSjvoX7z74X6ZaYCtzAr0EuGw==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-linux-x64": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-linux-x64/-/typescript-linux-x64-7.0.2.tgz",
+      "integrity": "sha512-EYdf2cNg7rgCWJnxCdJ+F3V39O8ihb37eHAu1LK8oAFizgTQbPOK7zHHXbPt8rX24COqODXeI3sIf0fCXG7H/A==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-netbsd-arm64": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-netbsd-arm64/-/typescript-netbsd-arm64-7.0.2.tgz",
+      "integrity": "sha512-+polYF4MF04aPpO5FTkHran9yUQDSXqy5GiSDKpsll5jy3l3+g9QLhpf39T+ePtefhXLOGrLl0QIjkQP6VnelA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-netbsd-x64": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-netbsd-x64/-/typescript-netbsd-x64-7.0.2.tgz",
+      "integrity": "sha512-8YIT0EHM/3dq10ZOVF/A7pc/YSMtbcecct4rWtexrnSCHOPcpC2KTLXfTCR6vDpnSiY12heNb1GiN/wu+T/FyA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-openbsd-arm64": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-openbsd-arm64/-/typescript-openbsd-arm64-7.0.2.tgz",
+      "integrity": "sha512-APT8+ClYnuYm1u9+kgGXoMj2VzWzcymwh2gNSQVySHfkRDGOTVkoWLjCmOQSaO+PoqQ57B0flRp9SA+7GnnkzQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-openbsd-x64": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-openbsd-x64/-/typescript-openbsd-x64-7.0.2.tgz",
+      "integrity": "sha512-yX7s+Q0Dln0Dt9tEzZsAjXXR/+ytBM7AlglaqyeMPxQszJ1JhlJdZ6jLA+IzldHtflX81em7lDao1xXu+aRRkg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-sunos-x64": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-sunos-x64/-/typescript-sunos-x64-7.0.2.tgz",
+      "integrity": "sha512-dLJDGaLZ1D4HPQn62u1n8mBDkJREwMsAkCdkwd4Ieqw+x3TUyTsqY0YiBCtE6H6OzzgGk3iuZ3vFWRS+E8/d1g==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-win32-arm64": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-win32-arm64/-/typescript-win32-arm64-7.0.2.tgz",
+      "integrity": "sha512-Gyl1Vy6OsWesLzmq+EP0Fb7b4Nid5232AvcA2SFcdYreldpNtYFFofPjnt62y9hQy7VTaZp65ICJjuAQRaVcIQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-win32-x64": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-win32-x64/-/typescript-win32-x64-7.0.2.tgz",
+      "integrity": "sha512-0BQ3HkAHHlKLSp1qRvf3SUhGpGsDuhB/jgFw75guyqbxJqEaS0Cw/VFO8i2nHglJUzQCRtMMR/IBAKE3ETMC4g==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/esbuild": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.28.2.tgz",
+      "integrity": "sha512-HKVLS8dvII+xoKW9kmqxbRKrnWEXfJJr/FZhhJmiqIB0e053QNYFqOBouTMO/k5sID4MvCiUCvv8b9M4h32wIA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.28.2",
+        "@esbuild/android-arm": "0.28.2",
+        "@esbuild/android-arm64": "0.28.2",
+        "@esbuild/android-x64": "0.28.2",
+        "@esbuild/darwin-arm64": "0.28.2",
+        "@esbuild/darwin-x64": "0.28.2",
+        "@esbuild/freebsd-arm64": "0.28.2",
+        "@esbuild/freebsd-x64": "0.28.2",
+        "@esbuild/linux-arm": "0.28.2",
+        "@esbuild/linux-arm64": "0.28.2",
+        "@esbuild/linux-ia32": "0.28.2",
+        "@esbuild/linux-loong64": "0.28.2",
+        "@esbuild/linux-mips64el": "0.28.2",
+        "@esbuild/linux-ppc64": "0.28.2",
+        "@esbuild/linux-riscv64": "0.28.2",
+        "@esbuild/linux-s390x": "0.28.2",
+        "@esbuild/linux-x64": "0.28.2",
+        "@esbuild/netbsd-arm64": "0.28.2",
+        "@esbuild/netbsd-x64": "0.28.2",
+        "@esbuild/openbsd-arm64": "0.28.2",
+        "@esbuild/openbsd-x64": "0.28.2",
+        "@esbuild/openharmony-arm64": "0.28.2",
+        "@esbuild/sunos-x64": "0.28.2",
+        "@esbuild/win32-arm64": "0.28.2",
+        "@esbuild/win32-ia32": "0.28.2",
+        "@esbuild/win32-x64": "0.28.2"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.55.0",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.55.0.tgz",
+      "integrity": "sha512-GvZs4vU3U5ro2nZpeiwyb0zuFaqb9sUiAJuyrWpcGouD8y9/HLgGbNRjIph7zU9D3hnPaisMl9zG9CgFi/biIg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/typescript": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-7.0.2.tgz",
+      "integrity": "sha512-8FYau96o3NKOhbjKi/qNvG/W5jhzxkbdm5sj9AbZ/5T5sWqn3hJgLfGx27sRKZWTvyzCP8dLRBTf5tBTSRVUNA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc"
+      },
+      "engines": {
+        "node": ">=16.20.0"
+      },
+      "optionalDependencies": {
+        "@typescript/typescript-aix-ppc64": "7.0.2",
+        "@typescript/typescript-darwin-arm64": "7.0.2",
+        "@typescript/typescript-darwin-x64": "7.0.2",
+        "@typescript/typescript-freebsd-arm64": "7.0.2",
+        "@typescript/typescript-freebsd-x64": "7.0.2",
+        "@typescript/typescript-linux-arm": "7.0.2",
+        "@typescript/typescript-linux-arm64": "7.0.2",
+        "@typescript/typescript-linux-loong64": "7.0.2",
+        "@typescript/typescript-linux-mips64el": "7.0.2",
+        "@typescript/typescript-linux-ppc64": "7.0.2",
+        "@typescript/typescript-linux-riscv64": "7.0.2",
+        "@typescript/typescript-linux-s390x": "7.0.2",
+        "@typescript/typescript-linux-x64": "7.0.2",
+        "@typescript/typescript-netbsd-arm64": "7.0.2",
+        "@typescript/typescript-netbsd-x64": "7.0.2",
+        "@typescript/typescript-openbsd-arm64": "7.0.2",
+        "@typescript/typescript-openbsd-x64": "7.0.2",
+        "@typescript/typescript-sunos-x64": "7.0.2",
+        "@typescript/typescript-win32-arm64": "7.0.2",
+        "@typescript/typescript-win32-x64": "7.0.2"
+      }
+    },
+    "node_modules/undici-types": {
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
+      "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
+      "dev": true,
+      "license": "MIT"
+    }
+  }
+}
diff --git a/sdk/package.json b/sdk/package.json
new file mode 100644
index 0000000..dde9e49
--- /dev/null
+++ b/sdk/package.json
@@ -0,0 +1,42 @@
+{
+  "name": "@kimsun721/stream-viewer",
+  "version": "0.1.0",
+  "description": "Browser viewer for the stream WebRTC SFU: playback, simulcast layers, perf reports and a ready-made player",
+  "license": "MIT OR Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kimsun721/stream.git",
+    "directory": "sdk"
+  },
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./player": {
+      "types": "./dist/player.d.ts",
+      "default": "./dist/player.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "node build.mjs && tsc -p tsconfig.build.json",
+    "typecheck": "tsc -p tsconfig.json && tsc -p test/tsconfig.json",
+    "test": "node --test \"test/*.test.ts\"",
+    "check": "npm run typecheck && npm test && npm run build",
+    "e2e": "node e2e/run.mjs"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@types/node": "22.20.5",
+    "esbuild": "0.28.2",
+    "playwright-core": "1.55.0",
+    "typescript": "7.0.2"
+  }
+}
diff --git a/sdk/src/bundle.ts b/sdk/src/bundle.ts
new file mode 100644
index 0000000..e87c07c
--- /dev/null
+++ b/sdk/src/bundle.ts
@@ -0,0 +1,4 @@
+// The single file the server serves at /stream-viewer.js, for pages without a
+// bundler. The npm package ships the entry points separately instead.
+export * from "./index.js";
+export { createPlayer, type Player, type PlayerOptions } from "./player.js";
diff --git a/sdk/src/emitter.ts b/sdk/src/emitter.ts
new file mode 100644
index 0000000..67cf5d3
--- /dev/null
+++ b/sdk/src/emitter.ts
@@ -0,0 +1,26 @@
+export class Emitter<Events extends Record<string, unknown>> {
+  #listeners = new Map<keyof Events, Set<(value: never) => void>>();
+
+  /** Returns a function that removes the listener. */
+  on<K extends keyof Events>(event: K, listener: (value: Events[K]) => void): () => void {
+    let set = this.#listeners.get(event);
+    if (!set) this.#listeners.set(event, (set = new Set()));
+    set.add(listener as (value: never) => void);
+    return () => this.off(event, listener);
+  }
+
+  off<K extends keyof Events>(event: K, listener: (value: Events[K]) => void): void {
+    this.#listeners.get(event)?.delete(listener as (value: never) => void);
+  }
+
+  protected emit<K extends keyof Events>(event: K, value: Events[K]): void {
+    for (const listener of this.#listeners.get(event) ?? []) {
+      // A listener that throws must not stop the others or the SDK's own work.
+      try {
+        (listener as (value: Events[K]) => void)(value);
+      } catch (error) {
+        console.error(error);
+      }
+    }
+  }
+}
diff --git a/sdk/src/index.ts b/sdk/src/index.ts
new file mode 100644
index 0000000..dbbc5ab
--- /dev/null
+++ b/sdk/src/index.ts
@@ -0,0 +1,11 @@
+export {
+  Viewer,
+  JoinError,
+  type ViewerEvents,
+  type ViewerOptions,
+  type ViewerState,
+} from "./viewer.js";
+export type { LayerState } from "./layers.js";
+export type { RelayRole } from "./relay.js";
+export type { ViewerStats } from "./stats.js";
+export type { AvailableLayer, LayerMode } from "./protocol.js";
diff --git a/sdk/src/layers.ts b/sdk/src/layers.ts
new file mode 100644
index 0000000..7191582
--- /dev/null
+++ b/sdk/src/layers.ts
@@ -0,0 +1,92 @@
+import type { AvailableLayer, ClientMessage, LayerMode, ServerMessage } from "./protocol.js";
+
+/**
+ * The simulcast layers of the video track. `current` is what the server is
+ * sending. `target` is what it will switch to once a keyframe of that layer
+ * arrives.
+ */
+export interface LayerState {
+  /** The video track's mid, or null while no track with layers is known. */
+  mid: string | null;
+  layers: AvailableLayer[];
+  current: string | null;
+  target: string | null;
+  mode: LayerMode;
+  /** Whether the server has described a track yet, layered or not. */
+  described: boolean;
+}
+
+export function initialLayers(): LayerState {
+  return { mid: null, layers: [], current: null, target: null, mode: "auto", described: false };
+}
+
+type LayerStatus = Extract<ServerMessage, { type: "layer_status" }>;
+type LayerChanged = Extract<ServerMessage, { type: "layer_changed" }>;
+
+/** Audio, and video from a publisher without simulcast, come with no layers. */
+export function applyLayerStatus(state: LayerState, message: LayerStatus): LayerState {
+  if (message.available_simulcast_layers.length === 0) {
+    return { ...state, described: true };
+  }
+
+  return {
+    mid: message.mid,
+    layers: message.available_simulcast_layers,
+    current: message.current_layer,
+    target: message.target_layer,
+    mode: message.layer_mode,
+    described: true,
+  };
+}
+
+export interface Switch {
+  from: string | null;
+  to: string;
+}
+
+export function applyLayerChanged(
+  state: LayerState,
+  message: LayerChanged,
+): { state: LayerState; switched: Switch | null } {
+  if (message.mid !== state.mid) return { state, switched: null };
+
+  // In automatic mode the server retargets without saying so, which leaves a
+  // target heard earlier stale. A switch always settles it.
+  const settled = state.mode === "auto" || state.target === message.rid;
+
+  return {
+    state: { ...state, current: message.rid, target: settled ? null : state.target },
+    switched: { from: state.current, to: message.rid },
+  };
+}
+
+/**
+ * The messages that ask for a layer, or for automatic selection when `rid` is
+ * null. The server ignores a layer request in automatic mode, so asking for a
+ * layer switches to manual first.
+ */
+export function requestLayer(
+  state: LayerState,
+  rid: string | null,
+): { state: LayerState; messages: ClientMessage[] } {
+  const mid = state.mid;
+  if (mid === null) return { state, messages: [] };
+
+  if (rid === null) {
+    return {
+      state: { ...state, mode: "auto" },
+      messages: [{ type: "set_layer_mode", mid, layer_mode: "auto" }],
+    };
+  }
+
+  if (!state.layers.some((layer) => layer.rid === rid)) return { state, messages: [] };
+
+  const messages: ClientMessage[] = [];
+  if (state.mode !== "manual") messages.push({ type: "set_layer_mode", mid, layer_mode: "manual" });
+  messages.push({ type: "set_layer", mid, rid });
+
+  return {
+    state: { ...state, mode: "manual", target: rid === state.current ? null : rid },
+    messages,
+  };
+}
diff --git a/sdk/src/player.ts b/sdk/src/player.ts
new file mode 100644
index 0000000..89ad196
--- /dev/null
+++ b/sdk/src/player.ts
@@ -0,0 +1,279 @@
+import type { LayerState } from "./layers.js";
+import type { ViewerStats } from "./stats.js";
+import { Viewer, type ViewerOptions, type ViewerState } from "./viewer.js";
+
+export interface PlayerOptions extends ViewerOptions {
+  /**
+   * Show the wall clock over the picture. Point a camera at a clock, or show
+   * one in the source, and the two side by side give the end to end delay.
+   */
+  clock?: boolean;
+  /** Show the Debug button. Defaults to true. */
+  debugToggle?: boolean;
+  /** Start muted, which browsers require to play without a click. Defaults to true. */
+  muted?: boolean;
+  /** Called when the Debug button changes the mode. */
+  onDebugChange?: (on: boolean) => void;
+}
+
+export interface Player {
+  readonly viewer: Viewer;
+  readonly element: HTMLElement;
+  /** Closes the viewer and removes the player from the page. */
+  destroy(): void;
+}
+
+const STYLE_ID = "stream-viewer-player-style";
+
+// Colors are custom properties on the player, so a page can restyle it with
+// its own values without touching the rules.
+const STYLE = `
+.sv-player {
+  --sv-bg: #0f1113;
+  --sv-panel: #181b1e;
+  --sv-line: #2b3035;
+  --sv-ink: #e7e9eb;
+  --sv-muted: #8d959c;
+  --sv-accent: #5cc2b4;
+  --sv-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+  display: grid;
+  gap: 12px;
+  color: var(--sv-ink);
+  font: 14px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
+}
+.sv-player * { box-sizing: border-box; }
+.sv-stage { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: 8px; overflow: hidden; }
+.sv-stage video { display: block; width: 100%; height: 100%; object-fit: contain; }
+.sv-readout {
+  position: absolute; top: 12px; padding: 6px 10px; border-radius: 4px;
+  background: rgba(0, 0, 0, 0.62); font: 12px/1.5 var(--sv-mono); white-space: pre;
+}
+.sv-stats { left: 12px; }
+.sv-clock { right: 12px; font-size: 18px; font-weight: 600; }
+.sv-banner {
+  position: absolute; inset: 0; display: grid; place-items: center; padding: 16px;
+  color: var(--sv-muted); text-align: center; pointer-events: none;
+}
+.sv-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
+.sv-label { color: var(--sv-muted); margin-right: 4px; }
+.sv-layers { display: flex; flex-wrap: wrap; gap: 6px; color: var(--sv-muted); }
+.sv-player button {
+  padding: 8px 14px; background: var(--sv-panel); border: 1px solid var(--sv-line); border-radius: 6px;
+  color: var(--sv-ink); font: inherit; cursor: pointer;
+}
+.sv-player button:hover { border-color: var(--sv-muted); }
+.sv-player button:focus-visible { outline: 2px solid var(--sv-accent); outline-offset: 1px; }
+.sv-player button[aria-pressed="true"] { background: var(--sv-accent); border-color: var(--sv-accent); color: #0b0d0e; }
+.sv-player button.sv-picked { border-color: var(--sv-accent); }
+.sv-player button.sv-pending { border-color: var(--sv-accent); border-style: dashed; }
+.sv-sound { margin-left: auto; }
+.sv-player .sv-debug { background: none; border-color: transparent; color: var(--sv-muted); }
+.sv-player .sv-debug:hover { border-color: var(--sv-line); }
+.sv-player .sv-debug[aria-pressed="true"] { background: none; border-color: var(--sv-line); color: var(--sv-ink); }
+.sv-status { margin: 0; color: var(--sv-muted); }
+.sv-log {
+  margin: 0; max-height: 260px; overflow: auto; padding: 10px 12px;
+  background: var(--sv-panel); border: 1px solid var(--sv-line); border-radius: 6px;
+  font: 12px/1.6 var(--sv-mono); white-space: pre-wrap;
+}
+`;
+
+/** Builds a player inside `container` and starts watching. */
+export function createPlayer(container: HTMLElement, options: PlayerOptions): Player {
+  injectStyle(container.ownerDocument);
+
+  const viewer = new Viewer(options);
+  const doc = container.ownerDocument;
+  const make = <K extends keyof HTMLElementTagNameMap>(tag: K, className: string, text = "") => {
+    const element = doc.createElement(tag);
+    element.className = className;
+    element.textContent = text;
+    return element;
+  };
+
+  const root = make("div", "sv-player");
+  const stage = make("div", "sv-stage");
+  const video = viewer.attach(make("video", ""));
+  video.muted = options.muted ?? true;
+  const stats = make("div", "sv-readout sv-stats", "no stream");
+  const clock = make("div", "sv-readout sv-clock");
+  const banner = make("div", "sv-banner");
+  stage.append(video, stats, banner);
+  if (options.clock) stage.append(clock);
+
+  const controls = make("div", "sv-controls");
+  const layersBox = make("div", "sv-layers");
+  const sound = make("button", "sv-sound", video.muted ? "Unmute" : "Mute");
+  const debugButton = make("button", "sv-debug", "Debug");
+  sound.type = "button";
+  debugButton.type = "button";
+  controls.append(make("span", "sv-label", "Layer"), layersBox, sound);
+  if (options.debugToggle ?? true) controls.append(debugButton);
+
+  const status = make("p", "sv-status");
+  const log = make("pre", "sv-log");
+
+  root.append(stage, controls, status, log);
+  container.append(root);
+
+  let lastStats: ViewerStats | null = null;
+
+  const note = (text: string, at = new Date()) => {
+    if (!viewer.debug) return;
+    log.textContent += `${clockText(at)}  ${text}\n`;
+    log.scrollTop = log.scrollHeight;
+  };
+
+  const renderStatus = (state: ViewerState, reason?: string) => {
+    const text = statusText(state, options.room, reason);
+    status.textContent = text;
+    banner.textContent = state === "connected" ? "" : text;
+  };
+
+  const renderStats = () => {
+    const layers = viewer.layers;
+    let text = lastStats?.width ? `${lastStats.width}x${lastStats.height}` : "no video";
+    if (lastStats?.framesPerSecond) text += `  ${Math.round(lastStats.framesPerSecond)} fps`;
+    if (lastStats?.mbps != null) text += `\n${lastStats.mbps.toFixed(2)} Mbps`;
+    if (layers.current) text += `\nlayer ${layers.current}, ${layers.mode}`;
+    if (layers.target) text += `\nwaiting for a keyframe of ${layers.target}`;
+    // A viewer has no reason to know where its picture comes from.
+    const relay = viewer.debug ? relayText(viewer.role) : null;
+    if (relay) text += `\n${relay}`;
+    if (viewer.debug && lastStats) {
+      text += `\nfreezes ${lastStats.freezeCount}, ${lastStats.freezeSeconds.toFixed(1)} s`;
+      if (lastStats.rttMs !== null) text += `\nrtt ${Math.round(lastStats.rttMs)} ms`;
+    }
+    stats.textContent = text;
+  };
+
+  const renderLayers = (layers: LayerState) => {
+    layersBox.replaceChildren();
+
+    if (!layers.mid) {
+      layersBox.textContent = layers.described ? "single layer" : "none yet";
+      return;
+    }
+
+    const auto = make("button", "", "Auto");
+    auto.type = "button";
+    auto.setAttribute("aria-pressed", String(layers.mode === "auto"));
+    auto.onclick = () => viewer.setAutoLayer();
+    layersBox.append(auto);
+
+    for (const { rid, bitrate_estimate } of layers.layers) {
+      const button = make("button", "", bitrate_estimate ? `${rid}  ${Math.round(bitrate_estimate / 1000)} kbps` : rid);
+      button.type = "button";
+      button.setAttribute("aria-pressed", String(layers.mode === "manual" && layers.current === rid));
+      button.classList.toggle("sv-picked", layers.mode === "auto" && layers.current === rid);
+      button.classList.toggle("sv-pending", layers.target === rid);
+      button.onclick = () => viewer.setLayer(rid);
+      layersBox.append(button);
+    }
+  };
+
+  const setDebug = (on: boolean) => {
+    viewer.setDebug(on);
+    debugButton.setAttribute("aria-pressed", String(on));
+    log.hidden = !on;
+    renderStats();
+  };
+
+  const unsubscribe = [
+    viewer.on("state", ({ state, reason }) => renderStatus(state, reason)),
+    viewer.on("layers", (layers) => {
+      renderLayers(layers);
+      renderStats();
+    }),
+    viewer.on("stats", (next) => {
+      lastStats = next;
+      renderStats();
+    }),
+    viewer.on("role", () => renderStats()),
+    viewer.on("log", ({ at, text }) => note(text, at)),
+  ];
+
+  sound.onclick = () => {
+    video.muted = !video.muted;
+    sound.textContent = video.muted ? "Unmute" : "Mute";
+    if (!video.muted) void video.play().catch(() => {});
+  };
+
+  debugButton.onclick = () => {
+    const on = !viewer.debug;
+    setDebug(on);
+    options.onDebugChange?.(on);
+  };
+
+  // Page events that explain a stall the stream itself does not.
+  const onVisibility = () => note(doc.hidden ? "page hidden" : "page visible");
+  const onBlur = () => note("window lost focus");
+  const onFocus = () => note("window focused");
+  const win = doc.defaultView;
+  doc.addEventListener("visibilitychange", onVisibility);
+  win?.addEventListener("blur", onBlur);
+  win?.addEventListener("focus", onFocus);
+
+  let frame = 0;
+  const tick = () => {
+    clock.textContent = clockText(new Date());
+    frame = requestAnimationFrame(tick);
+  };
+  if (options.clock) tick();
+
+  setDebug(options.debug ?? false);
+  renderLayers(viewer.layers);
+  renderStatus(viewer.state);
+  void viewer.connect().catch(() => {});
+
+  return {
+    viewer,
+    element: root,
+    destroy() {
+      cancelAnimationFrame(frame);
+      for (const off of unsubscribe) off();
+      doc.removeEventListener("visibilitychange", onVisibility);
+      win?.removeEventListener("blur", onBlur);
+      win?.removeEventListener("focus", onFocus);
+      viewer.close();
+      root.remove();
+    },
+  };
+}
+
+function statusText(state: ViewerState, room: string, reason?: string): string {
+  switch (state) {
+    case "idle":
+    case "connecting":
+      return "Connecting...";
+    case "connected":
+      return `Watching ${room}`;
+    case "reconnecting":
+      return reason ? `${reason}. Reconnecting...` : "Reconnecting...";
+    case "not-live":
+      return "This room is not live. Waiting for it to start...";
+    case "failed":
+      return reason ?? "Could not connect.";
+    case "closed":
+      return "Stopped.";
+  }
+}
+
+function relayText({ role, linked }: Viewer["role"]): string | null {
+  if (role === "relay") return linked ? "relaying to a viewer" : "linking to a viewer";
+  if (role === "leaf") return linked ? "watching through a relay" : "linking to a relay";
+  return null;
+}
+
+function clockText(now: Date): string {
+  const pad = (n: number, width = 2) => String(n).padStart(width, "0");
+  return `${pad(now.getHours())}:${pad(now.getMinutes())}:${pad(now.getSeconds())}.${pad(now.getMilliseconds(), 3)}`;
+}
+
+function injectStyle(doc: Document): void {
+  if (doc.getElementById(STYLE_ID)) return;
+  const style = doc.createElement("style");
+  style.id = STYLE_ID;
+  style.textContent = STYLE;
+  doc.head.append(style);
+}
diff --git a/sdk/src/protocol.ts b/sdk/src/protocol.ts
new file mode 100644
index 0000000..9175835
--- /dev/null
+++ b/sdk/src/protocol.ts
@@ -0,0 +1,50 @@
+export type LayerMode = "auto" | "manual";
+
+export interface AvailableLayer {
+  rid: string;
+  /** Bits per second the server measured for this layer, once it has a figure. */
+  bitrate_estimate: number | null;
+}
+
+/** Messages the server sends over the DataChannel. */
+export type ServerMessage =
+  | { type: "offer"; sdp: string }
+  | {
+      type: "layer_status";
+      mid: string;
+      available_simulcast_layers: AvailableLayer[];
+      current_layer: string | null;
+      target_layer: string | null;
+      layer_mode: LayerMode;
+    }
+  | { type: "layer_changed"; mid: string; rid: string }
+  // Left unanswered until the server measures upload itself, so a browser is
+  // not promoted to relay yet.
+  | { type: "probe_available_upload" }
+  | { type: "request_offer" }
+  | { type: "p2p_offer"; sdp: string }
+  | { type: "p2p_answer"; sdp: string }
+  | { type: "demote" };
+
+/** Messages the SDK sends over the DataChannel. */
+export type ClientMessage =
+  | { type: "answer"; sdp: string }
+  | { type: "set_layer"; mid: string; rid: string }
+  | { type: "set_layer_mode"; mid: string; layer_mode: LayerMode }
+  | { type: "perf_report"; rtt_ms: number; loss_pct: number }
+  | { type: "p2p_offer"; sdp: string }
+  | { type: "p2p_answer"; sdp: string }
+  | { type: "p2p_connected" }
+  | { type: "p2p_disconnected" }
+  | { type: "relay_outgoing"; kbps: number };
+
+export interface OfferRequest {
+  type: "offer";
+  sdp: string;
+  room_id: string;
+}
+
+export interface OfferAnswer {
+  type: "answer";
+  sdp: string;
+}
diff --git a/sdk/src/relay.ts b/sdk/src/relay.ts
new file mode 100644
index 0000000..f11b86e
--- /dev/null
+++ b/sdk/src/relay.ts
@@ -0,0 +1,97 @@
+/**
+ * A viewer's part in a P2P relay pair. A relay forwards what it receives from
+ * the server to one other viewer, its leaf, over a second peer link.
+ */
+export type RelayRole = "relay" | "leaf";
+
+/** The bytes a peer link has sent, from one `getStats()` call. */
+export interface SendSnapshot {
+  /** Milliseconds, from the stats report's own clock. */
+  at: number;
+  /** Summed over every outbound stream, audio included. */
+  bytesSent: number;
+}
+
+type Entry = Record<string, unknown> & { type: string };
+
+const num = (value: unknown): number => (typeof value === "number" ? value : 0);
+
+export function readSent(entries: Iterable<Entry>): SendSnapshot {
+  let at = 0;
+  let bytesSent = 0;
+
+  for (const entry of entries) {
+    at = Math.max(at, num(entry["timestamp"]));
+    if (entry.type === "outbound-rtp") bytesSent += num(entry["bytesSent"]);
+  }
+
+  return { at, bytesSent };
+}
+
+/** What the relay reports as `relay_outgoing`, over the interval between two snapshots. */
+export function outgoingKbps(previous: SendSnapshot, next: SendSnapshot): number | null {
+  const seconds = (next.at - previous.at) / 1000;
+  if (seconds <= 0) return null;
+  return Math.max(0, Math.round(((next.bytesSent - previous.bytesSent) * 8) / seconds / 1000));
+}
+
+// The server demotes a relay that sends well under the bitrate of the layer
+// it receives, and gains nothing from one that sends more. A browser encodes
+// a forwarded track again and picks its own rate, so the relay steers it
+// toward what it receives: a ceiling a little above, and a start and a floor
+// near it, since the browser otherwise starts low and the server judges the
+// rate within seconds.
+const CEILING_SHARE = 1.2;
+const FLOOR_SHARE = 0.8;
+
+/** The ceiling for the relay's video encoder, in bits per second. */
+export function relayVideoCeiling(receivedKbps: number): number {
+  return Math.round(receivedKbps * CEILING_SHARE * 1000);
+}
+
+const VIDEO_CODECS = new Set(["vp8", "vp9", "h264", "av1", "h265"]);
+
+/**
+ * Adds a start and a minimum bitrate to the video codecs of an SDP. Chrome
+ * reads them from the remote description, so the relay applies them to the
+ * leaf's answer. Other browsers ignore them.
+ */
+export function withBitrateHints(sdp: string, kbps: number): string {
+  const params = `x-google-start-bitrate=${kbps};x-google-min-bitrate=${Math.round(kbps * FLOOR_SHARE)}`;
+  const eol = sdp.includes("\r\n") ? "\r\n" : "\n";
+  const lines = sdp.split(eol);
+  const out: string[] = [];
+  let video = false;
+  const withFmtp = new Set<string>();
+
+  // Payload types that already have an fmtp line get the parameter appended.
+  for (const line of lines) {
+    if (line.startsWith("m=")) video = line.startsWith("m=video");
+    else if (video && line.startsWith("a=fmtp:")) withFmtp.add(line.slice(7, line.indexOf(" ")));
+  }
+
+  video = false;
+  for (const line of lines) {
+    if (line.startsWith("m=")) video = line.startsWith("m=video");
+    out.push(line);
+    if (!video) continue;
+
+    const rtpmap = /^a=rtpmap:(\d+) ([^/]+)\//.exec(line);
+    if (rtpmap && VIDEO_CODECS.has(rtpmap[2]!.toLowerCase()) && !withFmtp.has(rtpmap[1]!)) {
+      out.push(`a=fmtp:${rtpmap[1]} ${params}`);
+    }
+
+    const fmtp = /^a=fmtp:(\d+) /.exec(line);
+    if (fmtp && isVideoCodec(lines, fmtp[1]!)) {
+      out[out.length - 1] = `${line};${params}`;
+    }
+  }
+
+  return out.join(eol);
+}
+
+function isVideoCodec(lines: string[], pt: string): boolean {
+  const rtpmap = lines.find((l) => l.startsWith(`a=rtpmap:${pt} `));
+  const name = rtpmap ? /^a=rtpmap:\d+ ([^/]+)\//.exec(rtpmap)?.[1] : undefined;
+  return !!name && VIDEO_CODECS.has(name.toLowerCase());
+}
diff --git a/sdk/src/stats.ts b/sdk/src/stats.ts
new file mode 100644
index 0000000..7b10cab
--- /dev/null
+++ b/sdk/src/stats.ts
@@ -0,0 +1,158 @@
+/** The figures the SDK reads from one `getStats()` call. */
+export interface Snapshot {
+  /** Milliseconds, from the stats report's own clock. */
+  at: number;
+  /** Round trip time of the selected candidate pair, in milliseconds. */
+  rttMs: number | null;
+  /** Summed over every inbound stream, audio included. */
+  packetsReceived: number;
+  packetsLost: number;
+  video: {
+    width: number;
+    height: number;
+    bytesReceived: number;
+    framesPerSecond: number | null;
+    framesDecoded: number;
+    framesDropped: number;
+    freezeCount: number;
+    freezeSeconds: number;
+  } | null;
+}
+
+/** What a viewer sees, published once a second. */
+export interface ViewerStats {
+  width: number;
+  height: number;
+  framesPerSecond: number | null;
+  /** Video bitrate received since the previous figure, in megabits per second. */
+  mbps: number | null;
+  rttMs: number | null;
+  freezeCount: number;
+  freezeSeconds: number;
+  packetsLost: number;
+  framesDropped: number;
+}
+
+type Entry = Record<string, unknown> & { type: string; id: string };
+
+const num = (value: unknown): number => (typeof value === "number" ? value : 0);
+const opt = (value: unknown): number | null => (typeof value === "number" ? value : null);
+
+/** Takes the entries of an `RTCStatsReport`, as `Array.from(report.values())`. */
+export function readSnapshot(entries: Iterable<Entry>): Snapshot {
+  const all = Array.from(entries);
+  const byId = new Map(all.map((entry) => [entry.id, entry]));
+
+  let at = 0;
+  let packetsReceived = 0;
+  let packetsLost = 0;
+  let video: Snapshot["video"] = null;
+
+  for (const entry of all) {
+    at = Math.max(at, num(entry["timestamp"]));
+    if (entry.type !== "inbound-rtp") continue;
+
+    packetsReceived += num(entry["packetsReceived"]);
+    packetsLost += Math.max(0, num(entry["packetsLost"]));
+
+    if (entry["kind"] === "video") {
+      video = {
+        width: num(entry["frameWidth"]),
+        height: num(entry["frameHeight"]),
+        bytesReceived: num(entry["bytesReceived"]),
+        framesPerSecond: opt(entry["framesPerSecond"]),
+        framesDecoded: num(entry["framesDecoded"]),
+        framesDropped: num(entry["framesDropped"]),
+        freezeCount: num(entry["freezeCount"]),
+        freezeSeconds: num(entry["totalFreezesDuration"]),
+      };
+    }
+  }
+
+  return { at, rttMs: selectedRtt(all, byId), packetsReceived, packetsLost, video };
+}
+
+function selectedRtt(all: Entry[], byId: Map<string, Entry>): number | null {
+  const transport = all.find((entry) => entry.type === "transport" && entry["selectedCandidatePairId"]);
+  const pair =
+    (transport && byId.get(String(transport["selectedCandidatePairId"]))) ??
+    all.find((entry) => entry.type === "candidate-pair" && entry["nominated"] && entry["state"] === "succeeded");
+
+  const seconds = pair && opt(pair["currentRoundTripTime"]);
+  return seconds === null || seconds === undefined ? null : seconds * 1000;
+}
+
+/**
+ * The link quality the server judges relay candidates by. Loss is over the
+ * packets that arrived or went missing since the previous snapshot.
+ */
+export function perfReport(
+  previous: Snapshot,
+  next: Snapshot,
+): { rtt_ms: number; loss_pct: number } | null {
+  if (next.rttMs === null) return null;
+
+  const received = next.packetsReceived - previous.packetsReceived;
+  const lost = next.packetsLost - previous.packetsLost;
+  const expected = received + lost;
+  const lossPct = expected > 0 && lost > 0 ? (lost / expected) * 100 : 0;
+
+  return { rtt_ms: Math.round(next.rttMs), loss_pct: Math.round(lossPct * 100) / 100 };
+}
+
+export function viewerStats(previous: Snapshot | null, next: Snapshot): ViewerStats {
+  const video = next.video;
+  let mbps: number | null = null;
+
+  if (previous?.video && video) {
+    const seconds = (next.at - previous.at) / 1000;
+    if (seconds > 0) mbps = ((video.bytesReceived - previous.video.bytesReceived) * 8) / seconds / 1e6;
+  }
+
+  return {
+    width: video?.width ?? 0,
+    height: video?.height ?? 0,
+    framesPerSecond: video?.framesPerSecond ?? null,
+    mbps,
+    rttMs: next.rttMs,
+    freezeCount: video?.freezeCount ?? 0,
+    freezeSeconds: video?.freezeSeconds ?? 0,
+    packetsLost: next.packetsLost,
+    framesDropped: video?.framesDropped ?? 0,
+  };
+}
+
+/**
+ * Describes the freezes since the previous snapshot. Loss points at the
+ * network or the sender, drops at this browser, and neither at frames that
+ * simply arrived late.
+ */
+export function freezeNote(previous: Snapshot, next: Snapshot): string | null {
+  const before = previous.video;
+  const after = next.video;
+  if (!before || !after || after.freezeCount <= before.freezeCount) return null;
+
+  const times = after.freezeCount - before.freezeCount;
+  const ms = Math.round((after.freezeSeconds - before.freezeSeconds) * 1000);
+  const froze = times === 1 ? `froze ${ms} ms` : `froze ${times} times, ${ms} ms in all`;
+
+  return `${froze}, ${next.packetsLost - previous.packetsLost} packets lost, ${after.framesDropped - before.framesDropped} frames dropped`;
+}
+
+/** The signed difference between two 32 bit RTP timestamps, across a wrap. */
+export function rtpStep(from: number, to: number): number {
+  return ((((to - from + 2 ** 31) % 2 ** 32) + 2 ** 32) % 2 ** 32) - 2 ** 31;
+}
+
+/**
+ * How far the RTP timestamp moved past the wall clock between two readings, in
+ * milliseconds. Layers are separate RTP streams, so a switch can move the
+ * timestamp by far more than the time that passed.
+ */
+export function timestampDrift(
+  previous: { timestamp: number; rtpTimestamp: number },
+  next: { timestamp: number; rtpTimestamp: number },
+  clockRate = 90_000,
+): number {
+  return (rtpStep(previous.rtpTimestamp, next.rtpTimestamp) / clockRate) * 1000 - (next.timestamp - previous.timestamp);
+}
diff --git a/sdk/src/viewer.ts b/sdk/src/viewer.ts
new file mode 100644
index 0000000..de378f8
--- /dev/null
+++ b/sdk/src/viewer.ts
@@ -0,0 +1,853 @@
+import { Emitter } from "./emitter.js";
+import {
+  applyLayerChanged,
+  applyLayerStatus,
+  initialLayers,
+  requestLayer,
+  type LayerState,
+} from "./layers.js";
+import {
+  type ClientMessage,
+  type OfferAnswer,
+  type OfferRequest,
+  type ServerMessage,
+} from "./protocol.js";
+import {
+  outgoingKbps,
+  readSent,
+  relayVideoCeiling,
+  withBitrateHints,
+  type RelayRole,
+  type SendSnapshot,
+} from "./relay.js";
+import {
+  freezeNote,
+  perfReport,
+  readSnapshot,
+  timestampDrift,
+  viewerStats,
+  type Snapshot,
+  type ViewerStats,
+} from "./stats.js";
+
+export type ViewerState =
+  /** Created, `connect()` not called yet. */
+  | "idle"
+  | "connecting"
+  | "connected"
+  /** The connection dropped and the SDK is joining again. */
+  | "reconnecting"
+  /** The room exists but is not live. With `reconnect`, the SDK keeps asking. */
+  | "not-live"
+  /** Given up for good. `reason` says why. */
+  | "failed"
+  /** `close()` was called. */
+  | "closed";
+
+export interface ViewerOptions {
+  /** The room to watch, `RM_...`. */
+  room: string;
+  /** Base URL of the server's client API. Defaults to the page's own origin. */
+  server?: string;
+  /** Join again after a dropped connection or a room that is not live yet. Defaults to true. */
+  reconnect?: boolean;
+  /** Ceiling for the wait between attempts, which doubles from one second. Defaults to 10 s. */
+  maxRetryDelayMs?: number;
+  /** How often stats are read and perf reports sent. Defaults to one second. */
+  statsIntervalMs?: number;
+  /** Emit `log` events. Can be switched later with `setDebug`. */
+  debug?: boolean;
+  /** Passed to `RTCPeerConnection`, for ICE servers and the like. Also used for relay links. */
+  rtcConfiguration?: RTCConfiguration;
+  /**
+   * Forward the stream to another viewer when the server makes this one a
+   * relay. Costs this viewer upload and the CPU to encode the stream again.
+   * Defaults to true. Receiving from a relay needs no option.
+   */
+  relay?: boolean;
+}
+
+export type ViewerEvents = {
+  state: { state: ViewerState; reason?: string };
+  layers: LayerState;
+  /** The server switched layer. `waitedMs` is set when this switch answers a request. */
+  layerchange: { from: string | null; to: string; waitedMs: number | null };
+  stats: ViewerStats;
+  /**
+   * This viewer's part in a P2P relay pair, or null for none. `linked` is
+   * whether the peer link is up: a linked leaf plays its relay's stream.
+   */
+  role: { role: RelayRole | null; linked: boolean };
+  /** Debug mode only. */
+  log: { at: Date; text: string };
+  error: Error;
+};
+
+/** The server answered the offer with an error status. */
+export class JoinError extends Error {
+  override name = "JoinError";
+  constructor(
+    readonly status: number,
+    message: string,
+  ) {
+    super(message);
+  }
+}
+
+// How long a connection may sit in `disconnected` before it is given up. ICE
+// often recovers from a short outage on its own.
+const DISCONNECTED_GRACE_MS = 5000;
+// The server takes candidates from the offer itself, so gathering has to
+// finish before it is posted. Host candidates take milliseconds.
+const GATHERING_TIMEOUT_MS = 2000;
+const TIMESTAMP_PROBE_MS = 250;
+const RECEIVED_WINDOW = 5;
+// A picture is swapped only once the source taking over has decoded a frame,
+// so the viewer sees the old one meanwhile rather than a freeze. The server
+// asks the publisher for a keyframe when it takes a leaf back, and a publisher
+// on a fixed schedule, as OBS is, may take seconds to send one.
+const HANDOVER_TIMEOUT_MS = 10_000;
+const HANDOVER_POLL_MS = 100;
+// A relay that closes its page takes seconds to show in the connection state.
+// Its media stops at once, so a leaf goes by that.
+const RELAY_SILENCE_MS = 1000;
+const RELAY_WATCH_MS = 250;
+
+export class Viewer extends Emitter<ViewerEvents> {
+  /** Carries the room's tracks across reconnects, so a `<video>` is attached once. */
+  readonly stream = new MediaStream();
+
+  readonly #options: Required<Omit<ViewerOptions, "server" | "rtcConfiguration">> &
+    Pick<ViewerOptions, "server" | "rtcConfiguration">;
+
+  #state: ViewerState = "idle";
+  #layers: LayerState = initialLayers();
+  #debug: boolean;
+
+  #pc: RTCPeerConnection | null = null;
+  #channel: RTCDataChannel | null = null;
+  #sfuTracks = new Map<string, MediaStreamTrack>();
+
+  // At most one of the two links is open: a relay's to its leaf, or a leaf's
+  // from its relay.
+  #role: RelayRole | null = null;
+  #linked = false;
+  #relayLink: RTCPeerConnection | null = null;
+  #leafLink: RTCPeerConnection | null = null;
+  #relayTracks = new Map<string, MediaStreamTrack>();
+  #lastSent: SendSnapshot | null = null;
+  #linking = false;
+  #watchTimer: ReturnType<typeof setInterval> | undefined;
+  // Video received from the server over the last few seconds, which a relay
+  // holds its encoder to. The highest of them, so a freeze just before a
+  // promotion does not start the relay near zero.
+  #received: number[] = [];
+  #lastLeafSnapshot: Snapshot | null = null;
+  #messages: Promise<void> = Promise.resolve();
+
+  #attempts = 0;
+  #joinedOnce = false;
+  #retryTimer: ReturnType<typeof setTimeout> | undefined;
+  #graceTimer: ReturnType<typeof setTimeout> | undefined;
+  #statsTimer: ReturnType<typeof setInterval> | undefined;
+  #probeTimer: ReturnType<typeof setInterval> | undefined;
+
+  #lastSnapshot: Snapshot | null = null;
+  #lastSource: { timestamp: number; rtpTimestamp: number } | null = null;
+  #asked: { rid: string; at: number } | null = null;
+  #ignored = new Set<string>();
+
+  #joined: Promise<void> | null = null;
+  #settleJoined: { resolve: () => void; reject: (error: Error) => void } | null = null;
+
+  constructor(options: ViewerOptions) {
+    super();
+    this.#options = {
+      room: options.room,
+      server: options.server,
+      reconnect: options.reconnect ?? true,
+      maxRetryDelayMs: options.maxRetryDelayMs ?? 10_000,
+      statsIntervalMs: options.statsIntervalMs ?? 1000,
+      debug: options.debug ?? false,
+      rtcConfiguration: options.rtcConfiguration,
+      relay: options.relay ?? true,
+    };
+    this.#debug = this.#options.debug;
+  }
+
+  get state(): ViewerState {
+    return this.#state;
+  }
+
+  get layers(): LayerState {
+    return this.#layers;
+  }
+
+  get debug(): boolean {
+    return this.#debug;
+  }
+
+  get role(): { role: RelayRole | null; linked: boolean } {
+    return { role: this.#role, linked: this.#linked };
+  }
+
+  /**
+   * Joins the room. Resolves once the server has answered the first offer.
+   * With `reconnect`, a room that is not live yet is retried until it is, so
+   * the promise waits. Rejects on an error that is not worth retrying, or on
+   * `close()`.
+   */
+  connect(): Promise<void> {
+    if (this.#state === "closed") return Promise.reject(new Error("The viewer is closed"));
+    if (this.#joined) return this.#joined;
+
+    this.#joined = new Promise((resolve, reject) => {
+      this.#settleJoined = { resolve, reject };
+    });
+    // Callers that only listen for events need not handle the rejection.
+    this.#joined.catch(() => {});
+
+    void this.#attempt();
+    return this.#joined;
+  }
+
+  /** Points a `<video>` at this viewer's stream. */
+  attach(video: HTMLVideoElement): HTMLVideoElement {
+    video.srcObject = this.stream;
+    video.playsInline = true;
+    video.autoplay = true;
+    return video;
+  }
+
+  /** Asks for a simulcast layer. The server switches on the layer's next keyframe. */
+  setLayer(rid: string): void {
+    this.#request(rid);
+  }
+
+  /** Lets the server pick the layer from this viewer's bandwidth estimate. */
+  setAutoLayer(): void {
+    this.#request(null);
+  }
+
+  setDebug(on: boolean): void {
+    if (this.#debug === on) return;
+    this.#debug = on;
+    this.#lastSource = null;
+    this.#syncProbe();
+    if (on) this.#log("debug on");
+  }
+
+  close(): void {
+    if (this.#state === "closed") return;
+    clearTimeout(this.#retryTimer);
+    this.#teardown();
+    this.#setState("closed");
+    this.#settleJoined?.reject(new Error("The viewer was closed"));
+    this.#settleJoined = null;
+  }
+
+  async #attempt(): Promise<void> {
+    // A room that is not live stays that way in the state while it is retried,
+    // rather than flickering through "connecting" on every attempt.
+    if (this.#state !== "not-live") this.#setState(this.#joinedOnce ? "reconnecting" : "connecting");
+
+    try {
+      await this.#join();
+    } catch (error) {
+      this.#teardown();
+      if (this.#state === "closed") return;
+
+      const err = error instanceof Error ? error : new Error(String(error));
+
+      if (err instanceof JoinError && err.status === 404) {
+        this.#setState("not-live", err.message);
+        if (this.#options.reconnect) return this.#retry();
+        return this.#fail(err);
+      }
+
+      if (this.#retryable(err) && this.#options.reconnect) {
+        this.emit("error", err);
+        this.#log(`join failed: ${err.message}`);
+        return this.#retry();
+      }
+
+      return this.#fail(err);
+    }
+  }
+
+  #retryable(error: Error): boolean {
+    if (error instanceof JoinError) return error.status >= 500;
+    // A network failure in fetch, or the connection failing to come up.
+    return true;
+  }
+
+  #retry(): void {
+    const delay = Math.min(1000 * 2 ** this.#attempts, this.#options.maxRetryDelayMs);
+    this.#attempts += 1;
+    this.#log(`trying again in ${Math.round(delay / 1000)} s`);
+    this.#retryTimer = setTimeout(() => void this.#attempt(), delay);
+  }
+
+  #fail(error: Error): void {
+    this.#setState("failed", error.message);
+    this.emit("error", error);
+    this.#settleJoined?.reject(error);
+    this.#settleJoined = null;
+  }
+
+  async #join(): Promise<void> {
+    const pc = new RTCPeerConnection(this.#options.rtcConfiguration);
+    this.#pc = pc;
+    this.#layers = initialLayers();
+    this.emit("layers", this.#layers);
+
+    pc.ontrack = (event) => {
+      const track = event.track;
+      this.#sfuTracks.set(track.kind, track);
+      if (!this.#onRelayStream()) this.#show(track);
+      const sender = this.#relayLink?.getSenders().find((s) => s.track?.kind === track.kind);
+      if (sender) void sender.replaceTrack(track).catch((error) => this.emit("error", error));
+      this.#log(`receiving ${track.kind}`);
+    };
+    pc.onconnectionstatechange = () => this.#onConnectionState(pc);
+
+    // The server adds the media tracks over this channel once it opens, so
+    // the channel has to be part of the first offer.
+    const channel = pc.createDataChannel("data");
+    this.#channel = channel;
+    channel.onmessage = (event) => {
+      const message = JSON.parse(String(event.data)) as ServerMessage;
+      this.#messages = this.#messages
+        .then(() => this.#handle(pc, message))
+        .catch((error) => this.emit("error", error instanceof Error ? error : new Error(String(error))));
+    };
+
+    await pc.setLocalDescription(await pc.createOffer());
+    await gathered(pc);
+
+    const body: OfferRequest = {
+      type: "offer",
+      sdp: pc.localDescription?.sdp ?? "",
+      room_id: this.#options.room,
+    };
+
+    const response = await fetch(url(this.#options.server, "offer"), {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(body),
+    });
+
+    if (response.status === 404) throw new JoinError(404, "This room is not live");
+    if (!response.ok) throw new JoinError(response.status, `The server refused the offer: ${response.status}`);
+
+    const answer = (await response.json()) as OfferAnswer;
+
+    if (this.#pc !== pc) return;
+    await pc.setRemoteDescription({ type: "answer", sdp: answer.sdp });
+    this.#log("offer answered");
+  }
+
+  #onConnectionState(pc: RTCPeerConnection): void {
+    if (this.#pc !== pc) return;
+    const state = pc.connectionState;
+    this.#log(`connection ${state}`);
+
+    if (state === "connected") {
+      clearTimeout(this.#graceTimer);
+      this.#attempts = 0;
+      this.#joinedOnce = true;
+      this.#setState("connected");
+      this.#startStats();
+      this.#settleJoined?.resolve();
+      this.#settleJoined = null;
+    } else if (state === "disconnected") {
+      clearTimeout(this.#graceTimer);
+      this.#graceTimer = setTimeout(() => this.#lost(pc, "The connection was lost"), DISCONNECTED_GRACE_MS);
+    } else if (state === "failed") {
+      this.#lost(pc, "The connection failed");
+    }
+  }
+
+  #lost(pc: RTCPeerConnection, reason: string): void {
+    if (this.#pc !== pc || this.#state === "closed") return;
+    this.#teardown();
+
+    if (this.#options.reconnect) {
+      this.#log(reason);
+      this.#retry();
+      this.#setState("reconnecting", reason);
+    } else {
+      this.#fail(new Error(reason));
+    }
+  }
+
+  async #handle(pc: RTCPeerConnection, message: ServerMessage): Promise<void> {
+    if (this.#pc !== pc) return;
+
+    switch (message.type) {
+      case "offer": {
+        await pc.setRemoteDescription({ type: "offer", sdp: message.sdp });
+        await pc.setLocalDescription(await pc.createAnswer());
+        this.#send({ type: "answer", sdp: pc.localDescription?.sdp ?? "" });
+        break;
+      }
+
+      case "layer_status": {
+        this.#layers = applyLayerStatus(this.#layers, message);
+        this.emit("layers", this.#layers);
+        break;
+      }
+
+      case "layer_changed": {
+        const { state, switched } = applyLayerChanged(this.#layers, message);
+        if (!switched) break;
+
+        this.#layers = state;
+        const asked = this.#asked?.rid === switched.to ? this.#asked : null;
+        const waitedMs = asked ? Math.round(performance.now() - asked.at) : null;
+        if (asked) this.#asked = null;
+
+        if (waitedMs !== null) this.#log(`switched ${switched.from} to ${switched.to}, ${waitedMs} ms after asking`);
+        else this.#log(switched.from ? `switched ${switched.from} to ${switched.to}` : `started on ${switched.to}`);
+
+        this.emit("layerchange", { from: switched.from, to: switched.to, waitedMs });
+        this.emit("layers", this.#layers);
+        break;
+      }
+
+      case "probe_available_upload": {
+        // A browser cannot measure its own upload honestly. The server is to
+        // measure it instead, and until then this viewer is never promoted.
+        if (!this.#ignored.has(message.type)) {
+          this.#ignored.add(message.type);
+          this.#log("upload probe ignored, the server is to measure upload itself");
+        }
+        break;
+      }
+
+      case "request_offer": {
+        await this.#offerToLeaf();
+        break;
+      }
+
+      case "p2p_answer": {
+        const link = this.#relayLink;
+        if (!link || link.signalingState !== "have-local-offer") break;
+        const kbps = this.#receivedKbps();
+        const sdp = kbps ? withBitrateHints(message.sdp, kbps) : message.sdp;
+        await link.setRemoteDescription({ type: "answer", sdp });
+        break;
+      }
+
+      case "p2p_offer": {
+        await this.#answerRelay(message.sdp);
+        break;
+      }
+
+      case "demote": {
+        this.#dropLink("demoted, back on the server's stream");
+        break;
+      }
+    }
+  }
+
+  // The relay side. The server has promoted this viewer and pairs it with a
+  // leaf, so this viewer offers the leaf what it receives.
+  async #offerToLeaf(): Promise<void> {
+    if (!this.#options.relay) {
+      this.#log("asked to relay, declined by the relay option");
+      return;
+    }
+    this.#dropLink();
+
+    const link = new RTCPeerConnection(this.#options.rtcConfiguration);
+    this.#relayLink = link;
+    this.#setRole("relay", false);
+
+    // The browser encodes the tracks again on the way out, so its own key
+    // frame starts the leaf's picture and no request reaches the publisher.
+    const kbps = this.#receivedKbps();
+    for (const track of this.#sfuTracks.values()) {
+      const ceiling = track.kind === "video" && kbps ? relayVideoCeiling(kbps) : null;
+      link.addTransceiver(track, {
+        direction: "sendonly",
+        streams: [this.stream],
+        ...(ceiling === null ? {} : { sendEncodings: [{ maxBitrate: ceiling }] }),
+      });
+    }
+
+    link.onconnectionstatechange = () => {
+      if (this.#relayLink !== link) return;
+      const state = link.connectionState;
+      this.#log(`link to leaf ${state}`);
+      if (state === "connected") this.#setRole("relay", true);
+      // The leaf reports a lost link and the server demotes both, so the
+      // relay only waits for that.
+      else if (this.#linked) this.#setRole("relay", false);
+    };
+
+    await link.setLocalDescription(await link.createOffer());
+    await gathered(link);
+    if (this.#relayLink !== link) return;
+    this.#send({ type: "p2p_offer", sdp: link.localDescription?.sdp ?? "" });
+    this.#log("promoted to relay, offered a link to the leaf");
+  }
+
+  // Follows the layer this viewer receives, which changes with its own
+  // bandwidth and its picks.
+  async #holdRelayCeiling(link: RTCPeerConnection): Promise<void> {
+    const sender = link.getSenders().find((s) => s.track?.kind === "video");
+    const kbps = this.#receivedKbps();
+    if (!sender || !kbps) return;
+
+    const ceiling = relayVideoCeiling(kbps);
+    const parameters = sender.getParameters();
+    const encoding = parameters.encodings[0];
+    const current = encoding?.maxBitrate;
+    if (!encoding || (current && Math.abs(current - ceiling) < current * 0.1)) return;
+
+    encoding.maxBitrate = ceiling;
+    await sender.setParameters(parameters);
+  }
+
+  // The leaf side. The server has paired this viewer with a relay, which
+  // offers a link. The server keeps sending until the link is up.
+  async #answerRelay(sdp: string): Promise<void> {
+    this.#dropLink();
+
+    const link = new RTCPeerConnection(this.#options.rtcConfiguration);
+    this.#leafLink = link;
+    this.#setRole("leaf", false);
+
+    link.ontrack = (event) => {
+      this.#relayTracks.set(event.track.kind, event.track);
+      if (this.#onRelayStream()) this.#show(event.track);
+    };
+    link.onconnectionstatechange = () => void this.#onLeafLink(link);
+
+    await link.setRemoteDescription({ type: "offer", sdp });
+    await link.setLocalDescription(await link.createAnswer());
+    await gathered(link);
+    if (this.#leafLink !== link) return;
+    this.#send({ type: "p2p_answer", sdp: link.localDescription?.sdp ?? "" });
+    this.#log("paired with a relay, answered its link");
+  }
+
+  async #onLeafLink(link: RTCPeerConnection): Promise<void> {
+    if (this.#leafLink !== link) return;
+    const state = link.connectionState;
+    this.#log(`link from relay ${state}`);
+
+    if (state === "connected" && !this.#linked && !this.#linking) {
+      // The server stops sending on p2p_connected, so it goes only once the
+      // relay's picture is there to take over. Left unsent, the server gives
+      // the link up on its own.
+      this.#linking = true;
+      const ready = await decodedPast(link, 0, HANDOVER_TIMEOUT_MS);
+      this.#linking = false;
+      if (this.#leafLink !== link) return;
+      if (!ready) {
+        this.#log("the relay sent no picture, staying on the server's stream");
+        return;
+      }
+
+      for (const track of this.#relayTracks.values()) this.#show(track);
+      this.#setRole("leaf", true);
+      this.#lastLeafSnapshot = null;
+      this.#send({ type: "p2p_connected" });
+      this.#watchRelay(link);
+      this.#log("watching through the relay");
+    } else if ((state === "disconnected" || state === "failed") && this.#linked) {
+      this.#relayLost();
+    } else if (state === "failed") {
+      // The link never came up. The server gives up on it by itself.
+      this.#dropLink("could not reach the relay");
+    }
+  }
+
+  #watchRelay(link: RTCPeerConnection): void {
+    clearInterval(this.#watchTimer);
+    let packets = -1;
+    let quietSince = performance.now();
+
+    this.#watchTimer = setInterval(async () => {
+      const received = readSnapshot(Array.from((await link.getStats()).values())).packetsReceived;
+      if (this.#leafLink !== link || !this.#linked) return;
+
+      if (received !== packets) {
+        packets = received;
+        quietSince = performance.now();
+      } else if (performance.now() - quietSince >= RELAY_SILENCE_MS) {
+        this.#relayLost();
+      }
+    }, RELAY_WATCH_MS);
+  }
+
+  #relayLost(): void {
+    // Not worth the grace the server connection gets: the server's stream is
+    // one message away.
+    this.#send({ type: "p2p_disconnected" });
+    this.#dropLink("lost the relay, back on the server's stream");
+  }
+
+  /** Closes whichever relay link is open and plays the server's stream again. */
+  #dropLink(reason?: string): void {
+    if (this.#role === null) return;
+    if (reason) this.#log(reason);
+
+    const wasOnRelay = this.#onRelayStream();
+    const links = [this.#relayLink, this.#leafLink];
+    const relayTracks = [...this.#relayTracks.values()];
+    clearInterval(this.#watchTimer);
+    this.#relayLink = null;
+    this.#leafLink = null;
+    this.#relayTracks.clear();
+    this.#linking = false;
+    this.#lastSent = null;
+    this.#lastLeafSnapshot = null;
+    this.#setRole(null, false);
+
+    const close = () => {
+      for (const link of links) {
+        if (!link) continue;
+        link.ontrack = null;
+        link.onconnectionstatechange = null;
+        link.close();
+      }
+      for (const track of relayTracks) track.stop();
+    };
+
+    // Audio needs no keyframe and comes back at once.
+    const audio = this.#sfuTracks.get("audio");
+    if (audio) this.#show(audio);
+
+    const pc = this.#pc;
+    if (!wasOnRelay || !pc) {
+      for (const track of this.#sfuTracks.values()) this.#show(track);
+      close();
+      return;
+    }
+
+    // The relay's picture stays up, or its last frame if the relay is gone,
+    // until the server's stream has a frame of its own.
+    void framesDecoded(pc)
+      .then((before) => decodedPast(pc, before, HANDOVER_TIMEOUT_MS))
+      .then((ready) => {
+        const video = this.#sfuTracks.get("video");
+        if (this.#pc === pc && !this.#onRelayStream() && video) this.#show(video);
+        if (!ready) this.#log("the server's stream sent no picture in time");
+        close();
+      });
+  }
+
+  #receivedKbps(): number | null {
+    return this.#received.length ? Math.max(...this.#received) : null;
+  }
+
+  #onRelayStream(): boolean {
+    return this.#role === "leaf" && this.#linked;
+  }
+
+  /** Puts `track` in the attached stream in place of any track of its kind. */
+  #show(track: MediaStreamTrack): void {
+    for (const old of this.stream.getTracks()) {
+      if (old.kind === track.kind && old !== track) this.stream.removeTrack(old);
+    }
+    if (!this.stream.getTracks().includes(track)) this.stream.addTrack(track);
+  }
+
+  #setRole(role: RelayRole | null, linked: boolean): void {
+    if (this.#role === role && this.#linked === linked) return;
+    this.#role = role;
+    this.#linked = linked;
+    // The relay's stream has RTP timestamps of its own.
+    this.#lastSource = null;
+    this.emit("role", { role, linked });
+  }
+
+  #request(rid: string | null): void {
+    const { state, messages } = requestLayer(this.#layers, rid);
+    if (messages.length === 0) return;
+
+    this.#asked = rid !== null && rid !== this.#layers.current ? { rid, at: performance.now() } : null;
+    this.#log(rid === null ? "asked for auto" : `asked for ${rid}`);
+    this.#layers = state;
+    for (const message of messages) this.#send(message);
+    this.emit("layers", this.#layers);
+  }
+
+  #send(message: ClientMessage): void {
+    if (this.#channel?.readyState === "open") this.#channel.send(JSON.stringify(message));
+  }
+
+  #startStats(): void {
+    clearInterval(this.#statsTimer);
+    this.#lastSnapshot = null;
+    this.#statsTimer = setInterval(() => void this.#readStats(), this.#options.statsIntervalMs);
+    this.#syncProbe();
+  }
+
+  async #readStats(): Promise<void> {
+    const pc = this.#pc;
+    if (!pc) return;
+
+    const report = await pc.getStats();
+    const next = readSnapshot(Array.from(report.values()));
+    const previous = this.#lastSnapshot;
+    this.#lastSnapshot = next;
+    if (this.#pc !== pc) return;
+
+    // The server judges its own link to this viewer, so perf reports come
+    // from it even while the picture comes from a relay.
+    if (previous) {
+      const perf = perfReport(previous, next);
+      if (perf) this.#send({ type: "perf_report", ...perf });
+
+      const mbps = viewerStats(previous, next).mbps;
+      if (mbps !== null && !this.#onRelayStream()) {
+        this.#received = [...this.#received.slice(-(RECEIVED_WINDOW - 1)), Math.round(mbps * 1000)];
+      }
+    }
+
+    if (this.#relayLink) {
+      await this.#reportOutgoing(this.#relayLink);
+      await this.#holdRelayCeiling(this.#relayLink).catch((error) => this.emit("error", error));
+    }
+
+    const shown = this.#onRelayStream() && this.#leafLink ? await this.#readLeafStats(this.#leafLink) : null;
+    if (this.#pc !== pc) return;
+    if (shown) this.#describe(shown.previous, shown.next);
+    else this.#describe(previous, next);
+  }
+
+  async #readLeafStats(link: RTCPeerConnection): Promise<{ previous: Snapshot | null; next: Snapshot }> {
+    const next = readSnapshot(Array.from((await link.getStats()).values()));
+    const previous = this.#lastLeafSnapshot;
+    this.#lastLeafSnapshot = next;
+    return { previous, next };
+  }
+
+  async #reportOutgoing(link: RTCPeerConnection): Promise<void> {
+    const next = readSent(Array.from((await link.getStats()).values()));
+    const previous = this.#lastSent;
+    this.#lastSent = next;
+    if (this.#relayLink !== link || !this.#linked || !previous) return;
+
+    const kbps = outgoingKbps(previous, next);
+    if (kbps !== null) this.#send({ type: "relay_outgoing", kbps });
+  }
+
+  #describe(previous: Snapshot | null, next: Snapshot): void {
+    if (previous) {
+      const freezes = freezeNote(previous, next);
+      if (freezes) this.#log(freezes);
+
+      const before = previous.video;
+      const after = next.video;
+      if (after?.width && (before?.width !== after.width || before?.height !== after.height)) {
+        this.#log(`picture is now ${after.width}x${after.height}`);
+      }
+    }
+
+    this.emit("stats", viewerStats(previous, next));
+  }
+
+  #syncProbe(): void {
+    clearInterval(this.#probeTimer);
+    if (this.#debug && this.#pc) {
+      this.#probeTimer = setInterval(() => this.#probeTimestamp(), TIMESTAMP_PROBE_MS);
+    }
+  }
+
+  // Read from the receiver, not from drawn frames: a browser draws a window
+  // nobody can see about once a second.
+  #probeTimestamp(): void {
+    const link = this.#onRelayStream() ? this.#leafLink : this.#pc;
+    const receiver = link?.getReceivers().find((r) => r.track?.kind === "video");
+    const source = receiver?.getSynchronizationSources().sort((a, b) => b.timestamp - a.timestamp)[0];
+    if (!source || source.rtpTimestamp === undefined) return;
+
+    const now = { timestamp: source.timestamp, rtpTimestamp: source.rtpTimestamp };
+    if (!this.#lastSource) {
+      this.#log("reading RTP timestamps");
+    } else if (now.timestamp !== this.#lastSource.timestamp) {
+      const drift = timestampDrift(this.#lastSource, now);
+      if (Math.abs(drift) > 1000) {
+        this.#log(`RTP timestamp jumped ${Math.round(Math.abs(drift) / 1000)} s ${drift > 0 ? "forward" : "back"}`);
+      }
+    }
+    this.#lastSource = now;
+  }
+
+  #teardown(): void {
+    clearTimeout(this.#graceTimer);
+    clearInterval(this.#statsTimer);
+    clearInterval(this.#probeTimer);
+    clearInterval(this.#watchTimer);
+    // The server drops this viewer's pairing along with the connection.
+    this.#dropLink();
+
+    const pc = this.#pc;
+    this.#pc = null;
+    this.#channel = null;
+    this.#messages = Promise.resolve();
+    this.#lastSnapshot = null;
+    this.#lastSource = null;
+    this.#asked = null;
+    this.#received = [];
+
+    if (pc) {
+      pc.ontrack = null;
+      pc.onconnectionstatechange = null;
+      pc.close();
+    }
+    for (const track of this.stream.getTracks()) {
+      track.stop();
+      this.stream.removeTrack(track);
+    }
+    this.#sfuTracks.clear();
+  }
+
+  #setState(state: ViewerState, reason?: string): void {
+    if (this.#state === state) return;
+    this.#state = state;
+    this.emit("state", reason === undefined ? { state } : { state, reason });
+  }
+
+  #log(text: string): void {
+    if (this.#debug) this.emit("log", { at: new Date(), text });
+  }
+}
+
+function url(server: string | undefined, path: string): string {
+  const base = server ?? globalThis.location.origin;
+  return `${base.replace(/\/+$/, "")}/${path}`;
+}
+
+async function framesDecoded(pc: RTCPeerConnection): Promise<number> {
+  if (pc.connectionState === "closed") return 0;
+  return readSnapshot(Array.from((await pc.getStats()).values())).video?.framesDecoded ?? 0;
+}
+
+/** Whether `pc` decodes a video frame past `before` within `timeoutMs`. */
+async function decodedPast(pc: RTCPeerConnection, before: number, timeoutMs: number): Promise<boolean> {
+  if (!pc.getReceivers().some((r) => r.track?.kind === "video")) return true;
+  const giveUpAt = performance.now() + timeoutMs;
+  while (performance.now() < giveUpAt) {
+    if (pc.connectionState === "closed") return false;
+    if ((await framesDecoded(pc)) > before) return true;
+    await new Promise((resolve) => setTimeout(resolve, HANDOVER_POLL_MS));
+  }
+  return false;
+}
+
+function gathered(pc: RTCPeerConnection): Promise<void> {
+  if (pc.iceGatheringState === "complete") return Promise.resolve();
+  return new Promise((resolve) => {
+    const done = () => {
+      if (pc.iceGatheringState === "complete") resolve();
+    };
+    pc.addEventListener("icegatheringstatechange", done);
+    setTimeout(resolve, GATHERING_TIMEOUT_MS);
+  });
+}
diff --git a/sdk/test/layers.test.ts b/sdk/test/layers.test.ts
new file mode 100644
index 0000000..4bd8ed7
--- /dev/null
+++ b/sdk/test/layers.test.ts
@@ -0,0 +1,102 @@
+import assert from "node:assert/strict";
+import { test } from "node:test";
+
+import {
+  applyLayerChanged,
+  applyLayerStatus,
+  initialLayers,
+  requestLayer,
+  type LayerState,
+} from "../src/layers.ts";
+
+const layered = (overrides: Partial<LayerState> = {}): LayerState => ({
+  mid: "1",
+  layers: [
+    { rid: "l", bitrate_estimate: 300_000 },
+    { rid: "h", bitrate_estimate: 2_500_000 },
+  ],
+  current: "l",
+  target: null,
+  mode: "auto",
+  described: true,
+  ...overrides,
+});
+
+const status = (layers: string[]) => ({
+  type: "layer_status" as const,
+  mid: "1",
+  available_simulcast_layers: layers.map((rid) => ({ rid, bitrate_estimate: null })),
+  current_layer: null,
+  target_layer: "l",
+  layer_mode: "auto" as const,
+});
+
+test("a track without layers is described but offers no choice", () => {
+  const state = applyLayerStatus(initialLayers(), status([]));
+  assert.equal(state.described, true);
+  assert.equal(state.mid, null);
+});
+
+test("a layered track takes the server's view", () => {
+  const state = applyLayerStatus(initialLayers(), status(["l", "m", "h"]));
+  assert.equal(state.mid, "1");
+  assert.deepEqual(
+    state.layers.map((layer) => layer.rid),
+    ["l", "m", "h"],
+  );
+  assert.equal(state.target, "l");
+});
+
+test("a switch in auto mode settles any target", () => {
+  const { state, switched } = applyLayerChanged(layered({ target: "h" }), {
+    type: "layer_changed",
+    mid: "1",
+    rid: "m",
+  });
+  assert.deepEqual(switched, { from: "l", to: "m" });
+  assert.equal(state.current, "m");
+  assert.equal(state.target, null);
+});
+
+test("in manual mode a switch to another layer keeps the pending target", () => {
+  const { state } = applyLayerChanged(layered({ mode: "manual", target: "h" }), {
+    type: "layer_changed",
+    mid: "1",
+    rid: "m",
+  });
+  assert.equal(state.target, "h");
+});
+
+test("a switch on another track is ignored", () => {
+  const before = layered();
+  const { state, switched } = applyLayerChanged(before, { type: "layer_changed", mid: "2", rid: "h" });
+  assert.equal(switched, null);
+  assert.equal(state, before);
+});
+
+test("asking for a layer in auto mode goes manual first", () => {
+  const { state, messages } = requestLayer(layered(), "h");
+  assert.deepEqual(messages, [
+    { type: "set_layer_mode", mid: "1", layer_mode: "manual" },
+    { type: "set_layer", mid: "1", rid: "h" },
+  ]);
+  assert.equal(state.mode, "manual");
+  assert.equal(state.target, "h");
+});
+
+test("asking for the current layer in manual mode sets no target", () => {
+  const { state, messages } = requestLayer(layered({ mode: "manual" }), "l");
+  assert.deepEqual(messages, [{ type: "set_layer", mid: "1", rid: "l" }]);
+  assert.equal(state.target, null);
+});
+
+test("asking for auto sends the mode alone", () => {
+  const { state, messages } = requestLayer(layered({ mode: "manual" }), null);
+  assert.deepEqual(messages, [{ type: "set_layer_mode", mid: "1", layer_mode: "auto" }]);
+  assert.equal(state.mode, "auto");
+});
+
+test("nothing is asked for an unknown layer or before any track", () => {
+  assert.deepEqual(requestLayer(layered(), "x").messages, []);
+  assert.deepEqual(requestLayer(initialLayers(), "h").messages, []);
+});
diff --git a/sdk/test/relay.test.ts b/sdk/test/relay.test.ts
new file mode 100644
index 0000000..ecc4f31
--- /dev/null
+++ b/sdk/test/relay.test.ts
@@ -0,0 +1,50 @@
+import assert from "node:assert/strict";
+import { test } from "node:test";
+
+import { outgoingKbps, readSent, relayVideoCeiling, withBitrateHints } from "../src/relay.ts";
+
+test("sent bytes are summed over outbound streams only", () => {
+  const sent = readSent([
+    { type: "outbound-rtp", kind: "video", timestamp: 1000, bytesSent: 100_000 },
+    { type: "outbound-rtp", kind: "audio", timestamp: 1000, bytesSent: 5_000 },
+    { type: "inbound-rtp", kind: "video", timestamp: 1000, bytesReceived: 900_000 },
+  ]);
+  assert.deepEqual(sent, { at: 1000, bytesSent: 105_000 });
+});
+
+test("the outgoing rate is taken over the interval", () => {
+  assert.equal(outgoingKbps({ at: 1000, bytesSent: 0 }, { at: 3000, bytesSent: 250_000 }), 1000);
+  assert.equal(outgoingKbps({ at: 1000, bytesSent: 0 }, { at: 1000, bytesSent: 250_000 }), null);
+});
+
+test("a counter that went back reads as nothing sent", () => {
+  assert.equal(outgoingKbps({ at: 1000, bytesSent: 500 }, { at: 2000, bytesSent: 0 }), 0);
+});
+
+test("the relay's ceiling sits a little above what it receives", () => {
+  assert.equal(relayVideoCeiling(1000), 1_200_000);
+});
+
+const answer = [
+  "v=0",
+  "m=audio 9 UDP/TLS/RTP/SAVPF 111",
+  "a=rtpmap:111 opus/48000/2",
+  "a=fmtp:111 minptime=10;useinbandfec=1",
+  "m=video 9 UDP/TLS/RTP/SAVPF 96 97 98",
+  "a=rtpmap:96 VP8/90000",
+  "a=rtpmap:97 rtx/90000",
+  "a=fmtp:97 apt=96",
+  "a=rtpmap:98 H264/90000",
+  "a=fmtp:98 profile-level-id=42e01f",
+  "",
+].join("\r\n");
+
+test("a start and a floor are set on each video codec and nothing else", () => {
+  const params = "x-google-start-bitrate=1500;x-google-min-bitrate=1200";
+  const lines = withBitrateHints(answer, 1500).split("\r\n");
+  assert.ok(lines.includes(`a=fmtp:96 ${params}`));
+  assert.ok(lines.includes(`a=fmtp:98 profile-level-id=42e01f;${params}`));
+  assert.ok(lines.includes("a=fmtp:97 apt=96"));
+  assert.ok(lines.includes("a=fmtp:111 minptime=10;useinbandfec=1"));
+  assert.equal(lines.indexOf(`a=fmtp:96 ${params}`), lines.indexOf("a=rtpmap:96 VP8/90000") + 1);
+});
diff --git a/sdk/test/stats.test.ts b/sdk/test/stats.test.ts
new file mode 100644
index 0000000..5cebccd
--- /dev/null
+++ b/sdk/test/stats.test.ts
@@ -0,0 +1,64 @@
+import assert from "node:assert/strict";
+import { test } from "node:test";
+
+import { freezeNote, perfReport, readSnapshot, rtpStep, timestampDrift, viewerStats } from "../src/stats.ts";
+
+const report = (
+  at: number,
+  video: Record<string, number>,
+  audio: Record<string, number> = {},
+  rtt: number | null = 0.012,
+) => [
+  { id: "T", type: "transport", timestamp: at, selectedCandidatePairId: "CP" },
+  { id: "CP", type: "candidate-pair", timestamp: at, ...(rtt === null ? {} : { currentRoundTripTime: rtt }) },
+  { id: "V", type: "inbound-rtp", kind: "video", timestamp: at, ...video },
+  { id: "A", type: "inbound-rtp", kind: "audio", timestamp: at, packetsReceived: 0, packetsLost: 0, ...audio },
+];
+
+test("a snapshot reads the selected pair's round trip and sums inbound packets", () => {
+  const snapshot = readSnapshot(
+    report(1000, { packetsReceived: 90, packetsLost: 2, frameWidth: 1280, frameHeight: 720 }, { packetsReceived: 50 }),
+  );
+  assert.equal(snapshot.rttMs, 12);
+  assert.equal(snapshot.packetsReceived, 140);
+  assert.equal(snapshot.packetsLost, 2);
+  assert.equal(snapshot.video?.width, 1280);
+});
+
+test("a perf report counts loss over the interval only", () => {
+  const before = readSnapshot(report(1000, { packetsReceived: 100, packetsLost: 10 }));
+  const after = readSnapshot(report(2000, { packetsReceived: 196, packetsLost: 14 }));
+  assert.deepEqual(perfReport(before, after), { rtt_ms: 12, loss_pct: 4 });
+});
+
+test("no perf report before the pair has a round trip", () => {
+  const before = readSnapshot(report(1000, {}));
+  const after = readSnapshot(report(2000, {}, {}, null));
+  assert.equal(perfReport(before, after), null);
+});
+
+test("bitrate is taken over the interval", () => {
+  const before = readSnapshot(report(1000, { bytesReceived: 0 }));
+  const after = readSnapshot(report(2000, { bytesReceived: 250_000 }));
+  assert.equal(viewerStats(before, after).mbps, 2);
+  assert.equal(viewerStats(null, after).mbps, null);
+});
+
+test("a freeze is described with the loss and drops around it", () => {
+  const before = readSnapshot(report(1000, { freezeCount: 1, totalFreezesDuration: 0.2, packetsLost: 3 }));
+  const after = readSnapshot(
+    report(2000, { freezeCount: 2, totalFreezesDuration: 0.65, packetsLost: 8, framesDropped: 1 }),
+  );
+  assert.equal(freezeNote(before, after), "froze 450 ms, 5 packets lost, 1 frames dropped");
+  assert.equal(freezeNote(after, after), null);
+});
+
+test("the RTP step is signed across the 32 bit wrap", () => {
+  assert.equal(rtpStep(2 ** 32 - 10, 20), 30);
+  assert.equal(rtpStep(20, 2 ** 32 - 10), -30);
+});
+
+test("drift is how far the media clock outran the wall clock", () => {
+  assert.equal(timestampDrift({ timestamp: 0, rtpTimestamp: 0 }, { timestamp: 1000, rtpTimestamp: 90_000 }), 0);
+  assert.equal(timestampDrift({ timestamp: 0, rtpTimestamp: 0 }, { timestamp: 1000, rtpTimestamp: 900_000 }), 9000);
+});
diff --git a/sdk/test/tsconfig.json b/sdk/test/tsconfig.json
new file mode 100644
index 0000000..6b9d485
--- /dev/null
+++ b/sdk/test/tsconfig.json
@@ -0,0 +1,12 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "types": [
+      "node"
+    ]
+  },
+  "include": [
+    "../src",
+    "."
+  ]
+}
diff --git a/sdk/tsconfig.build.json b/sdk/tsconfig.build.json
new file mode 100644
index 0000000..9453741
--- /dev/null
+++ b/sdk/tsconfig.build.json
@@ -0,0 +1,16 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "noEmit": false,
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "outDir": "dist",
+    "rootDir": "src"
+  },
+  "include": [
+    "src"
+  ],
+  "exclude": [
+    "src/bundle.ts"
+  ]
+}
diff --git a/sdk/tsconfig.json b/sdk/tsconfig.json
new file mode 100644
index 0000000..d7f236a
--- /dev/null
+++ b/sdk/tsconfig.json
@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "es2022",
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "lib": [
+      "es2022",
+      "dom",
+      "dom.iterable"
+    ],
+    "types": [],
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "verbatimModuleSyntax": true,
+    "allowImportingTsExtensions": true,
+    "noEmit": true,
+    "skipLibCheck": true
+  },
+  "include": [
+    "src"
+  ]
+}
diff --git a/src/servers/web.rs b/src/servers/web.rs
index d234ee5..7b281d5 100644
--- a/src/servers/web.rs
+++ b/src/servers/web.rs
@@ -71,6 +71,7 @@ pub async fn run(shards: Arc<Shards>, config: WebConfig) -> anyhow::Result<()> {
 
     let https_api = Router::new()
         .route("/watch", routing::get(watch_page))
+        .route("/stream-viewer.js", routing::get(viewer_sdk))
         .route("/offer", routing::post(sdp_offer))
         .route("/whip", routing::post(whip_sdp_offer))
         .route(
@@ -408,6 +409,14 @@ async fn watch_page() -> Html<&'static str> {
     Html(include_str!("../../static/watch.html"))
 }
 
+/// The viewer SDK as one file, for the watch page and any page without a bundler.
+async fn viewer_sdk() -> impl IntoResponse {
+    (
+        [(header::CONTENT_TYPE, "text/javascript; charset=utf-8")],
+        include_str!("../../static/stream-viewer.js"),
+    )
+}
+
 async fn sdp_offer(
     State(state): State<SdpState>,
     Json(payload): Json<OfferRequest>,
diff --git a/static/stream-viewer.js b/static/stream-viewer.js
new file mode 100644
index 0000000..0fcd5fe
--- /dev/null
+++ b/static/stream-viewer.js
@@ -0,0 +1,1056 @@
+// Built from sdk/ by `npm run build`. Do not edit.
+
+// src/emitter.ts
+var Emitter = class {
+  #listeners = /* @__PURE__ */ new Map();
+  /** Returns a function that removes the listener. */
+  on(event, listener) {
+    let set = this.#listeners.get(event);
+    if (!set) this.#listeners.set(event, set = /* @__PURE__ */ new Set());
+    set.add(listener);
+    return () => this.off(event, listener);
+  }
+  off(event, listener) {
+    this.#listeners.get(event)?.delete(listener);
+  }
+  emit(event, value) {
+    for (const listener of this.#listeners.get(event) ?? []) {
+      try {
+        listener(value);
+      } catch (error) {
+        console.error(error);
+      }
+    }
+  }
+};
+
+// src/layers.ts
+function initialLayers() {
+  return { mid: null, layers: [], current: null, target: null, mode: "auto", described: false };
+}
+function applyLayerStatus(state, message) {
+  if (message.available_simulcast_layers.length === 0) {
+    return { ...state, described: true };
+  }
+  return {
+    mid: message.mid,
+    layers: message.available_simulcast_layers,
+    current: message.current_layer,
+    target: message.target_layer,
+    mode: message.layer_mode,
+    described: true
+  };
+}
+function applyLayerChanged(state, message) {
+  if (message.mid !== state.mid) return { state, switched: null };
+  const settled = state.mode === "auto" || state.target === message.rid;
+  return {
+    state: { ...state, current: message.rid, target: settled ? null : state.target },
+    switched: { from: state.current, to: message.rid }
+  };
+}
+function requestLayer(state, rid) {
+  const mid = state.mid;
+  if (mid === null) return { state, messages: [] };
+  if (rid === null) {
+    return {
+      state: { ...state, mode: "auto" },
+      messages: [{ type: "set_layer_mode", mid, layer_mode: "auto" }]
+    };
+  }
+  if (!state.layers.some((layer) => layer.rid === rid)) return { state, messages: [] };
+  const messages = [];
+  if (state.mode !== "manual") messages.push({ type: "set_layer_mode", mid, layer_mode: "manual" });
+  messages.push({ type: "set_layer", mid, rid });
+  return {
+    state: { ...state, mode: "manual", target: rid === state.current ? null : rid },
+    messages
+  };
+}
+
+// src/relay.ts
+var num = (value) => typeof value === "number" ? value : 0;
+function readSent(entries) {
+  let at = 0;
+  let bytesSent = 0;
+  for (const entry of entries) {
+    at = Math.max(at, num(entry["timestamp"]));
+    if (entry.type === "outbound-rtp") bytesSent += num(entry["bytesSent"]);
+  }
+  return { at, bytesSent };
+}
+function outgoingKbps(previous, next) {
+  const seconds = (next.at - previous.at) / 1e3;
+  if (seconds <= 0) return null;
+  return Math.max(0, Math.round((next.bytesSent - previous.bytesSent) * 8 / seconds / 1e3));
+}
+var CEILING_SHARE = 1.2;
+var FLOOR_SHARE = 0.8;
+function relayVideoCeiling(receivedKbps) {
+  return Math.round(receivedKbps * CEILING_SHARE * 1e3);
+}
+var VIDEO_CODECS = /* @__PURE__ */ new Set(["vp8", "vp9", "h264", "av1", "h265"]);
+function withBitrateHints(sdp, kbps) {
+  const params = `x-google-start-bitrate=${kbps};x-google-min-bitrate=${Math.round(kbps * FLOOR_SHARE)}`;
+  const eol = sdp.includes("\r\n") ? "\r\n" : "\n";
+  const lines = sdp.split(eol);
+  const out = [];
+  let video = false;
+  const withFmtp = /* @__PURE__ */ new Set();
+  for (const line of lines) {
+    if (line.startsWith("m=")) video = line.startsWith("m=video");
+    else if (video && line.startsWith("a=fmtp:")) withFmtp.add(line.slice(7, line.indexOf(" ")));
+  }
+  video = false;
+  for (const line of lines) {
+    if (line.startsWith("m=")) video = line.startsWith("m=video");
+    out.push(line);
+    if (!video) continue;
+    const rtpmap = /^a=rtpmap:(\d+) ([^/]+)\//.exec(line);
+    if (rtpmap && VIDEO_CODECS.has(rtpmap[2].toLowerCase()) && !withFmtp.has(rtpmap[1])) {
+      out.push(`a=fmtp:${rtpmap[1]} ${params}`);
+    }
+    const fmtp = /^a=fmtp:(\d+) /.exec(line);
+    if (fmtp && isVideoCodec(lines, fmtp[1])) {
+      out[out.length - 1] = `${line};${params}`;
+    }
+  }
+  return out.join(eol);
+}
+function isVideoCodec(lines, pt) {
+  const rtpmap = lines.find((l) => l.startsWith(`a=rtpmap:${pt} `));
+  const name = rtpmap ? /^a=rtpmap:\d+ ([^/]+)\//.exec(rtpmap)?.[1] : void 0;
+  return !!name && VIDEO_CODECS.has(name.toLowerCase());
+}
+
+// src/stats.ts
+var num2 = (value) => typeof value === "number" ? value : 0;
+var opt = (value) => typeof value === "number" ? value : null;
+function readSnapshot(entries) {
+  const all = Array.from(entries);
+  const byId = new Map(all.map((entry) => [entry.id, entry]));
+  let at = 0;
+  let packetsReceived = 0;
+  let packetsLost = 0;
+  let video = null;
+  for (const entry of all) {
+    at = Math.max(at, num2(entry["timestamp"]));
+    if (entry.type !== "inbound-rtp") continue;
+    packetsReceived += num2(entry["packetsReceived"]);
+    packetsLost += Math.max(0, num2(entry["packetsLost"]));
+    if (entry["kind"] === "video") {
+      video = {
+        width: num2(entry["frameWidth"]),
+        height: num2(entry["frameHeight"]),
+        bytesReceived: num2(entry["bytesReceived"]),
+        framesPerSecond: opt(entry["framesPerSecond"]),
+        framesDecoded: num2(entry["framesDecoded"]),
+        framesDropped: num2(entry["framesDropped"]),
+        freezeCount: num2(entry["freezeCount"]),
+        freezeSeconds: num2(entry["totalFreezesDuration"])
+      };
+    }
+  }
+  return { at, rttMs: selectedRtt(all, byId), packetsReceived, packetsLost, video };
+}
+function selectedRtt(all, byId) {
+  const transport = all.find((entry) => entry.type === "transport" && entry["selectedCandidatePairId"]);
+  const pair = (transport && byId.get(String(transport["selectedCandidatePairId"]))) ?? all.find((entry) => entry.type === "candidate-pair" && entry["nominated"] && entry["state"] === "succeeded");
+  const seconds = pair && opt(pair["currentRoundTripTime"]);
+  return seconds === null || seconds === void 0 ? null : seconds * 1e3;
+}
+function perfReport(previous, next) {
+  if (next.rttMs === null) return null;
+  const received = next.packetsReceived - previous.packetsReceived;
+  const lost = next.packetsLost - previous.packetsLost;
+  const expected = received + lost;
+  const lossPct = expected > 0 && lost > 0 ? lost / expected * 100 : 0;
+  return { rtt_ms: Math.round(next.rttMs), loss_pct: Math.round(lossPct * 100) / 100 };
+}
+function viewerStats(previous, next) {
+  const video = next.video;
+  let mbps = null;
+  if (previous?.video && video) {
+    const seconds = (next.at - previous.at) / 1e3;
+    if (seconds > 0) mbps = (video.bytesReceived - previous.video.bytesReceived) * 8 / seconds / 1e6;
+  }
+  return {
+    width: video?.width ?? 0,
+    height: video?.height ?? 0,
+    framesPerSecond: video?.framesPerSecond ?? null,
+    mbps,
+    rttMs: next.rttMs,
+    freezeCount: video?.freezeCount ?? 0,
+    freezeSeconds: video?.freezeSeconds ?? 0,
+    packetsLost: next.packetsLost,
+    framesDropped: video?.framesDropped ?? 0
+  };
+}
+function freezeNote(previous, next) {
+  const before = previous.video;
+  const after = next.video;
+  if (!before || !after || after.freezeCount <= before.freezeCount) return null;
+  const times = after.freezeCount - before.freezeCount;
+  const ms = Math.round((after.freezeSeconds - before.freezeSeconds) * 1e3);
+  const froze = times === 1 ? `froze ${ms} ms` : `froze ${times} times, ${ms} ms in all`;
+  return `${froze}, ${next.packetsLost - previous.packetsLost} packets lost, ${after.framesDropped - before.framesDropped} frames dropped`;
+}
+function rtpStep(from, to) {
+  return ((to - from + 2 ** 31) % 2 ** 32 + 2 ** 32) % 2 ** 32 - 2 ** 31;
+}
+function timestampDrift(previous, next, clockRate = 9e4) {
+  return rtpStep(previous.rtpTimestamp, next.rtpTimestamp) / clockRate * 1e3 - (next.timestamp - previous.timestamp);
+}
+
+// src/viewer.ts
+var JoinError = class extends Error {
+  constructor(status, message) {
+    super(message);
+    this.status = status;
+  }
+  status;
+  name = "JoinError";
+};
+var DISCONNECTED_GRACE_MS = 5e3;
+var GATHERING_TIMEOUT_MS = 2e3;
+var TIMESTAMP_PROBE_MS = 250;
+var RECEIVED_WINDOW = 5;
+var HANDOVER_TIMEOUT_MS = 1e4;
+var HANDOVER_POLL_MS = 100;
+var RELAY_SILENCE_MS = 1e3;
+var RELAY_WATCH_MS = 250;
+var Viewer = class extends Emitter {
+  /** Carries the room's tracks across reconnects, so a `<video>` is attached once. */
+  stream = new MediaStream();
+  #options;
+  #state = "idle";
+  #layers = initialLayers();
+  #debug;
+  #pc = null;
+  #channel = null;
+  #sfuTracks = /* @__PURE__ */ new Map();
+  // At most one of the two links is open: a relay's to its leaf, or a leaf's
+  // from its relay.
+  #role = null;
+  #linked = false;
+  #relayLink = null;
+  #leafLink = null;
+  #relayTracks = /* @__PURE__ */ new Map();
+  #lastSent = null;
+  #linking = false;
+  #watchTimer;
+  // Video received from the server over the last few seconds, which a relay
+  // holds its encoder to. The highest of them, so a freeze just before a
+  // promotion does not start the relay near zero.
+  #received = [];
+  #lastLeafSnapshot = null;
+  #messages = Promise.resolve();
+  #attempts = 0;
+  #joinedOnce = false;
+  #retryTimer;
+  #graceTimer;
+  #statsTimer;
+  #probeTimer;
+  #lastSnapshot = null;
+  #lastSource = null;
+  #asked = null;
+  #ignored = /* @__PURE__ */ new Set();
+  #joined = null;
+  #settleJoined = null;
+  constructor(options) {
+    super();
+    this.#options = {
+      room: options.room,
+      server: options.server,
+      reconnect: options.reconnect ?? true,
+      maxRetryDelayMs: options.maxRetryDelayMs ?? 1e4,
+      statsIntervalMs: options.statsIntervalMs ?? 1e3,
+      debug: options.debug ?? false,
+      rtcConfiguration: options.rtcConfiguration,
+      relay: options.relay ?? true
+    };
+    this.#debug = this.#options.debug;
+  }
+  get state() {
+    return this.#state;
+  }
+  get layers() {
+    return this.#layers;
+  }
+  get debug() {
+    return this.#debug;
+  }
+  get role() {
+    return { role: this.#role, linked: this.#linked };
+  }
+  /**
+   * Joins the room. Resolves once the server has answered the first offer.
+   * With `reconnect`, a room that is not live yet is retried until it is, so
+   * the promise waits. Rejects on an error that is not worth retrying, or on
+   * `close()`.
+   */
+  connect() {
+    if (this.#state === "closed") return Promise.reject(new Error("The viewer is closed"));
+    if (this.#joined) return this.#joined;
+    this.#joined = new Promise((resolve, reject) => {
+      this.#settleJoined = { resolve, reject };
+    });
+    this.#joined.catch(() => {
+    });
+    void this.#attempt();
+    return this.#joined;
+  }
+  /** Points a `<video>` at this viewer's stream. */
+  attach(video) {
+    video.srcObject = this.stream;
+    video.playsInline = true;
+    video.autoplay = true;
+    return video;
+  }
+  /** Asks for a simulcast layer. The server switches on the layer's next keyframe. */
+  setLayer(rid) {
+    this.#request(rid);
+  }
+  /** Lets the server pick the layer from this viewer's bandwidth estimate. */
+  setAutoLayer() {
+    this.#request(null);
+  }
+  setDebug(on) {
+    if (this.#debug === on) return;
+    this.#debug = on;
+    this.#lastSource = null;
+    this.#syncProbe();
+    if (on) this.#log("debug on");
+  }
+  close() {
+    if (this.#state === "closed") return;
+    clearTimeout(this.#retryTimer);
+    this.#teardown();
+    this.#setState("closed");
+    this.#settleJoined?.reject(new Error("The viewer was closed"));
+    this.#settleJoined = null;
+  }
+  async #attempt() {
+    if (this.#state !== "not-live") this.#setState(this.#joinedOnce ? "reconnecting" : "connecting");
+    try {
+      await this.#join();
+    } catch (error) {
+      this.#teardown();
+      if (this.#state === "closed") return;
+      const err = error instanceof Error ? error : new Error(String(error));
+      if (err instanceof JoinError && err.status === 404) {
+        this.#setState("not-live", err.message);
+        if (this.#options.reconnect) return this.#retry();
+        return this.#fail(err);
+      }
+      if (this.#retryable(err) && this.#options.reconnect) {
+        this.emit("error", err);
+        this.#log(`join failed: ${err.message}`);
+        return this.#retry();
+      }
+      return this.#fail(err);
+    }
+  }
+  #retryable(error) {
+    if (error instanceof JoinError) return error.status >= 500;
+    return true;
+  }
+  #retry() {
+    const delay = Math.min(1e3 * 2 ** this.#attempts, this.#options.maxRetryDelayMs);
+    this.#attempts += 1;
+    this.#log(`trying again in ${Math.round(delay / 1e3)} s`);
+    this.#retryTimer = setTimeout(() => void this.#attempt(), delay);
+  }
+  #fail(error) {
+    this.#setState("failed", error.message);
+    this.emit("error", error);
+    this.#settleJoined?.reject(error);
+    this.#settleJoined = null;
+  }
+  async #join() {
+    const pc = new RTCPeerConnection(this.#options.rtcConfiguration);
+    this.#pc = pc;
+    this.#layers = initialLayers();
+    this.emit("layers", this.#layers);
+    pc.ontrack = (event) => {
+      const track = event.track;
+      this.#sfuTracks.set(track.kind, track);
+      if (!this.#onRelayStream()) this.#show(track);
+      const sender = this.#relayLink?.getSenders().find((s) => s.track?.kind === track.kind);
+      if (sender) void sender.replaceTrack(track).catch((error) => this.emit("error", error));
+      this.#log(`receiving ${track.kind}`);
+    };
+    pc.onconnectionstatechange = () => this.#onConnectionState(pc);
+    const channel = pc.createDataChannel("data");
+    this.#channel = channel;
+    channel.onmessage = (event) => {
+      const message = JSON.parse(String(event.data));
+      this.#messages = this.#messages.then(() => this.#handle(pc, message)).catch((error) => this.emit("error", error instanceof Error ? error : new Error(String(error))));
+    };
+    await pc.setLocalDescription(await pc.createOffer());
+    await gathered(pc);
+    const body = {
+      type: "offer",
+      sdp: pc.localDescription?.sdp ?? "",
+      room_id: this.#options.room
+    };
+    const response = await fetch(url(this.#options.server, "offer"), {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(body)
+    });
+    if (response.status === 404) throw new JoinError(404, "This room is not live");
+    if (!response.ok) throw new JoinError(response.status, `The server refused the offer: ${response.status}`);
+    const answer = await response.json();
+    if (this.#pc !== pc) return;
+    await pc.setRemoteDescription({ type: "answer", sdp: answer.sdp });
+    this.#log("offer answered");
+  }
+  #onConnectionState(pc) {
+    if (this.#pc !== pc) return;
+    const state = pc.connectionState;
+    this.#log(`connection ${state}`);
+    if (state === "connected") {
+      clearTimeout(this.#graceTimer);
+      this.#attempts = 0;
+      this.#joinedOnce = true;
+      this.#setState("connected");
+      this.#startStats();
+      this.#settleJoined?.resolve();
+      this.#settleJoined = null;
+    } else if (state === "disconnected") {
+      clearTimeout(this.#graceTimer);
+      this.#graceTimer = setTimeout(() => this.#lost(pc, "The connection was lost"), DISCONNECTED_GRACE_MS);
+    } else if (state === "failed") {
+      this.#lost(pc, "The connection failed");
+    }
+  }
+  #lost(pc, reason) {
+    if (this.#pc !== pc || this.#state === "closed") return;
+    this.#teardown();
+    if (this.#options.reconnect) {
+      this.#log(reason);
+      this.#retry();
+      this.#setState("reconnecting", reason);
+    } else {
+      this.#fail(new Error(reason));
+    }
+  }
+  async #handle(pc, message) {
+    if (this.#pc !== pc) return;
+    switch (message.type) {
+      case "offer": {
+        await pc.setRemoteDescription({ type: "offer", sdp: message.sdp });
+        await pc.setLocalDescription(await pc.createAnswer());
+        this.#send({ type: "answer", sdp: pc.localDescription?.sdp ?? "" });
+        break;
+      }
+      case "layer_status": {
+        this.#layers = applyLayerStatus(this.#layers, message);
+        this.emit("layers", this.#layers);
+        break;
+      }
+      case "layer_changed": {
+        const { state, switched } = applyLayerChanged(this.#layers, message);
+        if (!switched) break;
+        this.#layers = state;
+        const asked = this.#asked?.rid === switched.to ? this.#asked : null;
+        const waitedMs = asked ? Math.round(performance.now() - asked.at) : null;
+        if (asked) this.#asked = null;
+        if (waitedMs !== null) this.#log(`switched ${switched.from} to ${switched.to}, ${waitedMs} ms after asking`);
+        else this.#log(switched.from ? `switched ${switched.from} to ${switched.to}` : `started on ${switched.to}`);
+        this.emit("layerchange", { from: switched.from, to: switched.to, waitedMs });
+        this.emit("layers", this.#layers);
+        break;
+      }
+      case "probe_available_upload": {
+        if (!this.#ignored.has(message.type)) {
+          this.#ignored.add(message.type);
+          this.#log("upload probe ignored, the server is to measure upload itself");
+        }
+        break;
+      }
+      case "request_offer": {
+        await this.#offerToLeaf();
+        break;
+      }
+      case "p2p_answer": {
+        const link = this.#relayLink;
+        if (!link || link.signalingState !== "have-local-offer") break;
+        const kbps = this.#receivedKbps();
+        const sdp = kbps ? withBitrateHints(message.sdp, kbps) : message.sdp;
+        await link.setRemoteDescription({ type: "answer", sdp });
+        break;
+      }
+      case "p2p_offer": {
+        await this.#answerRelay(message.sdp);
+        break;
+      }
+      case "demote": {
+        this.#dropLink("demoted, back on the server's stream");
+        break;
+      }
+    }
+  }
+  // The relay side. The server has promoted this viewer and pairs it with a
+  // leaf, so this viewer offers the leaf what it receives.
+  async #offerToLeaf() {
+    if (!this.#options.relay) {
+      this.#log("asked to relay, declined by the relay option");
+      return;
+    }
+    this.#dropLink();
+    const link = new RTCPeerConnection(this.#options.rtcConfiguration);
+    this.#relayLink = link;
+    this.#setRole("relay", false);
+    const kbps = this.#receivedKbps();
+    for (const track of this.#sfuTracks.values()) {
+      const ceiling = track.kind === "video" && kbps ? relayVideoCeiling(kbps) : null;
+      link.addTransceiver(track, {
+        direction: "sendonly",
+        streams: [this.stream],
+        ...ceiling === null ? {} : { sendEncodings: [{ maxBitrate: ceiling }] }
+      });
+    }
+    link.onconnectionstatechange = () => {
+      if (this.#relayLink !== link) return;
+      const state = link.connectionState;
+      this.#log(`link to leaf ${state}`);
+      if (state === "connected") this.#setRole("relay", true);
+      else if (this.#linked) this.#setRole("relay", false);
+    };
+    await link.setLocalDescription(await link.createOffer());
+    await gathered(link);
+    if (this.#relayLink !== link) return;
+    this.#send({ type: "p2p_offer", sdp: link.localDescription?.sdp ?? "" });
+    this.#log("promoted to relay, offered a link to the leaf");
+  }
+  // Follows the layer this viewer receives, which changes with its own
+  // bandwidth and its picks.
+  async #holdRelayCeiling(link) {
+    const sender = link.getSenders().find((s) => s.track?.kind === "video");
+    const kbps = this.#receivedKbps();
+    if (!sender || !kbps) return;
+    const ceiling = relayVideoCeiling(kbps);
+    const parameters = sender.getParameters();
+    const encoding = parameters.encodings[0];
+    const current = encoding?.maxBitrate;
+    if (!encoding || current && Math.abs(current - ceiling) < current * 0.1) return;
+    encoding.maxBitrate = ceiling;
+    await sender.setParameters(parameters);
+  }
+  // The leaf side. The server has paired this viewer with a relay, which
+  // offers a link. The server keeps sending until the link is up.
+  async #answerRelay(sdp) {
+    this.#dropLink();
+    const link = new RTCPeerConnection(this.#options.rtcConfiguration);
+    this.#leafLink = link;
+    this.#setRole("leaf", false);
+    link.ontrack = (event) => {
+      this.#relayTracks.set(event.track.kind, event.track);
+      if (this.#onRelayStream()) this.#show(event.track);
+    };
+    link.onconnectionstatechange = () => void this.#onLeafLink(link);
+    await link.setRemoteDescription({ type: "offer", sdp });
+    await link.setLocalDescription(await link.createAnswer());
+    await gathered(link);
+    if (this.#leafLink !== link) return;
+    this.#send({ type: "p2p_answer", sdp: link.localDescription?.sdp ?? "" });
+    this.#log("paired with a relay, answered its link");
+  }
+  async #onLeafLink(link) {
+    if (this.#leafLink !== link) return;
+    const state = link.connectionState;
+    this.#log(`link from relay ${state}`);
+    if (state === "connected" && !this.#linked && !this.#linking) {
+      this.#linking = true;
+      const ready = await decodedPast(link, 0, HANDOVER_TIMEOUT_MS);
+      this.#linking = false;
+      if (this.#leafLink !== link) return;
+      if (!ready) {
+        this.#log("the relay sent no picture, staying on the server's stream");
+        return;
+      }
+      for (const track of this.#relayTracks.values()) this.#show(track);
+      this.#setRole("leaf", true);
+      this.#lastLeafSnapshot = null;
+      this.#send({ type: "p2p_connected" });
+      this.#watchRelay(link);
+      this.#log("watching through the relay");
+    } else if ((state === "disconnected" || state === "failed") && this.#linked) {
+      this.#relayLost();
+    } else if (state === "failed") {
+      this.#dropLink("could not reach the relay");
+    }
+  }
+  #watchRelay(link) {
+    clearInterval(this.#watchTimer);
+    let packets = -1;
+    let quietSince = performance.now();
+    this.#watchTimer = setInterval(async () => {
+      const received = readSnapshot(Array.from((await link.getStats()).values())).packetsReceived;
+      if (this.#leafLink !== link || !this.#linked) return;
+      if (received !== packets) {
+        packets = received;
+        quietSince = performance.now();
+      } else if (performance.now() - quietSince >= RELAY_SILENCE_MS) {
+        this.#relayLost();
+      }
+    }, RELAY_WATCH_MS);
+  }
+  #relayLost() {
+    this.#send({ type: "p2p_disconnected" });
+    this.#dropLink("lost the relay, back on the server's stream");
+  }
+  /** Closes whichever relay link is open and plays the server's stream again. */
+  #dropLink(reason) {
+    if (this.#role === null) return;
+    if (reason) this.#log(reason);
+    const wasOnRelay = this.#onRelayStream();
+    const links = [this.#relayLink, this.#leafLink];
+    const relayTracks = [...this.#relayTracks.values()];
+    clearInterval(this.#watchTimer);
+    this.#relayLink = null;
+    this.#leafLink = null;
+    this.#relayTracks.clear();
+    this.#linking = false;
+    this.#lastSent = null;
+    this.#lastLeafSnapshot = null;
+    this.#setRole(null, false);
+    const close = () => {
+      for (const link of links) {
+        if (!link) continue;
+        link.ontrack = null;
+        link.onconnectionstatechange = null;
+        link.close();
+      }
+      for (const track of relayTracks) track.stop();
+    };
+    const audio = this.#sfuTracks.get("audio");
+    if (audio) this.#show(audio);
+    const pc = this.#pc;
+    if (!wasOnRelay || !pc) {
+      for (const track of this.#sfuTracks.values()) this.#show(track);
+      close();
+      return;
+    }
+    void framesDecoded(pc).then((before) => decodedPast(pc, before, HANDOVER_TIMEOUT_MS)).then((ready) => {
+      const video = this.#sfuTracks.get("video");
+      if (this.#pc === pc && !this.#onRelayStream() && video) this.#show(video);
+      if (!ready) this.#log("the server's stream sent no picture in time");
+      close();
+    });
+  }
+  #receivedKbps() {
+    return this.#received.length ? Math.max(...this.#received) : null;
+  }
+  #onRelayStream() {
+    return this.#role === "leaf" && this.#linked;
+  }
+  /** Puts `track` in the attached stream in place of any track of its kind. */
+  #show(track) {
+    for (const old of this.stream.getTracks()) {
+      if (old.kind === track.kind && old !== track) this.stream.removeTrack(old);
+    }
+    if (!this.stream.getTracks().includes(track)) this.stream.addTrack(track);
+  }
+  #setRole(role, linked) {
+    if (this.#role === role && this.#linked === linked) return;
+    this.#role = role;
+    this.#linked = linked;
+    this.#lastSource = null;
+    this.emit("role", { role, linked });
+  }
+  #request(rid) {
+    const { state, messages } = requestLayer(this.#layers, rid);
+    if (messages.length === 0) return;
+    this.#asked = rid !== null && rid !== this.#layers.current ? { rid, at: performance.now() } : null;
+    this.#log(rid === null ? "asked for auto" : `asked for ${rid}`);
+    this.#layers = state;
+    for (const message of messages) this.#send(message);
+    this.emit("layers", this.#layers);
+  }
+  #send(message) {
+    if (this.#channel?.readyState === "open") this.#channel.send(JSON.stringify(message));
+  }
+  #startStats() {
+    clearInterval(this.#statsTimer);
+    this.#lastSnapshot = null;
+    this.#statsTimer = setInterval(() => void this.#readStats(), this.#options.statsIntervalMs);
+    this.#syncProbe();
+  }
+  async #readStats() {
+    const pc = this.#pc;
+    if (!pc) return;
+    const report = await pc.getStats();
+    const next = readSnapshot(Array.from(report.values()));
+    const previous = this.#lastSnapshot;
+    this.#lastSnapshot = next;
+    if (this.#pc !== pc) return;
+    if (previous) {
+      const perf = perfReport(previous, next);
+      if (perf) this.#send({ type: "perf_report", ...perf });
+      const mbps = viewerStats(previous, next).mbps;
+      if (mbps !== null && !this.#onRelayStream()) {
+        this.#received = [...this.#received.slice(-(RECEIVED_WINDOW - 1)), Math.round(mbps * 1e3)];
+      }
+    }
+    if (this.#relayLink) {
+      await this.#reportOutgoing(this.#relayLink);
+      await this.#holdRelayCeiling(this.#relayLink).catch((error) => this.emit("error", error));
+    }
+    const shown = this.#onRelayStream() && this.#leafLink ? await this.#readLeafStats(this.#leafLink) : null;
+    if (this.#pc !== pc) return;
+    if (shown) this.#describe(shown.previous, shown.next);
+    else this.#describe(previous, next);
+  }
+  async #readLeafStats(link) {
+    const next = readSnapshot(Array.from((await link.getStats()).values()));
+    const previous = this.#lastLeafSnapshot;
+    this.#lastLeafSnapshot = next;
+    return { previous, next };
+  }
+  async #reportOutgoing(link) {
+    const next = readSent(Array.from((await link.getStats()).values()));
+    const previous = this.#lastSent;
+    this.#lastSent = next;
+    if (this.#relayLink !== link || !this.#linked || !previous) return;
+    const kbps = outgoingKbps(previous, next);
+    if (kbps !== null) this.#send({ type: "relay_outgoing", kbps });
+  }
+  #describe(previous, next) {
+    if (previous) {
+      const freezes = freezeNote(previous, next);
+      if (freezes) this.#log(freezes);
+      const before = previous.video;
+      const after = next.video;
+      if (after?.width && (before?.width !== after.width || before?.height !== after.height)) {
+        this.#log(`picture is now ${after.width}x${after.height}`);
+      }
+    }
+    this.emit("stats", viewerStats(previous, next));
+  }
+  #syncProbe() {
+    clearInterval(this.#probeTimer);
+    if (this.#debug && this.#pc) {
+      this.#probeTimer = setInterval(() => this.#probeTimestamp(), TIMESTAMP_PROBE_MS);
+    }
+  }
+  // Read from the receiver, not from drawn frames: a browser draws a window
+  // nobody can see about once a second.
+  #probeTimestamp() {
+    const link = this.#onRelayStream() ? this.#leafLink : this.#pc;
+    const receiver = link?.getReceivers().find((r) => r.track?.kind === "video");
+    const source = receiver?.getSynchronizationSources().sort((a, b) => b.timestamp - a.timestamp)[0];
+    if (!source || source.rtpTimestamp === void 0) return;
+    const now = { timestamp: source.timestamp, rtpTimestamp: source.rtpTimestamp };
+    if (!this.#lastSource) {
+      this.#log("reading RTP timestamps");
+    } else if (now.timestamp !== this.#lastSource.timestamp) {
+      const drift = timestampDrift(this.#lastSource, now);
+      if (Math.abs(drift) > 1e3) {
+        this.#log(`RTP timestamp jumped ${Math.round(Math.abs(drift) / 1e3)} s ${drift > 0 ? "forward" : "back"}`);
+      }
+    }
+    this.#lastSource = now;
+  }
+  #teardown() {
+    clearTimeout(this.#graceTimer);
+    clearInterval(this.#statsTimer);
+    clearInterval(this.#probeTimer);
+    clearInterval(this.#watchTimer);
+    this.#dropLink();
+    const pc = this.#pc;
+    this.#pc = null;
+    this.#channel = null;
+    this.#messages = Promise.resolve();
+    this.#lastSnapshot = null;
+    this.#lastSource = null;
+    this.#asked = null;
+    this.#received = [];
+    if (pc) {
+      pc.ontrack = null;
+      pc.onconnectionstatechange = null;
+      pc.close();
+    }
+    for (const track of this.stream.getTracks()) {
+      track.stop();
+      this.stream.removeTrack(track);
+    }
+    this.#sfuTracks.clear();
+  }
+  #setState(state, reason) {
+    if (this.#state === state) return;
+    this.#state = state;
+    this.emit("state", reason === void 0 ? { state } : { state, reason });
+  }
+  #log(text) {
+    if (this.#debug) this.emit("log", { at: /* @__PURE__ */ new Date(), text });
+  }
+};
+function url(server, path) {
+  const base = server ?? globalThis.location.origin;
+  return `${base.replace(/\/+$/, "")}/${path}`;
+}
+async function framesDecoded(pc) {
+  if (pc.connectionState === "closed") return 0;
+  return readSnapshot(Array.from((await pc.getStats()).values())).video?.framesDecoded ?? 0;
+}
+async function decodedPast(pc, before, timeoutMs) {
+  if (!pc.getReceivers().some((r) => r.track?.kind === "video")) return true;
+  const giveUpAt = performance.now() + timeoutMs;
+  while (performance.now() < giveUpAt) {
+    if (pc.connectionState === "closed") return false;
+    if (await framesDecoded(pc) > before) return true;
+    await new Promise((resolve) => setTimeout(resolve, HANDOVER_POLL_MS));
+  }
+  return false;
+}
+function gathered(pc) {
+  if (pc.iceGatheringState === "complete") return Promise.resolve();
+  return new Promise((resolve) => {
+    const done = () => {
+      if (pc.iceGatheringState === "complete") resolve();
+    };
+    pc.addEventListener("icegatheringstatechange", done);
+    setTimeout(resolve, GATHERING_TIMEOUT_MS);
+  });
+}
+
+// src/player.ts
+var STYLE_ID = "stream-viewer-player-style";
+var STYLE = `
+.sv-player {
+  --sv-bg: #0f1113;
+  --sv-panel: #181b1e;
+  --sv-line: #2b3035;
+  --sv-ink: #e7e9eb;
+  --sv-muted: #8d959c;
+  --sv-accent: #5cc2b4;
+  --sv-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+  display: grid;
+  gap: 12px;
+  color: var(--sv-ink);
+  font: 14px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
+}
+.sv-player * { box-sizing: border-box; }
+.sv-stage { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: 8px; overflow: hidden; }
+.sv-stage video { display: block; width: 100%; height: 100%; object-fit: contain; }
+.sv-readout {
+  position: absolute; top: 12px; padding: 6px 10px; border-radius: 4px;
+  background: rgba(0, 0, 0, 0.62); font: 12px/1.5 var(--sv-mono); white-space: pre;
+}
+.sv-stats { left: 12px; }
+.sv-clock { right: 12px; font-size: 18px; font-weight: 600; }
+.sv-banner {
+  position: absolute; inset: 0; display: grid; place-items: center; padding: 16px;
+  color: var(--sv-muted); text-align: center; pointer-events: none;
+}
+.sv-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
+.sv-label { color: var(--sv-muted); margin-right: 4px; }
+.sv-layers { display: flex; flex-wrap: wrap; gap: 6px; color: var(--sv-muted); }
+.sv-player button {
+  padding: 8px 14px; background: var(--sv-panel); border: 1px solid var(--sv-line); border-radius: 6px;
+  color: var(--sv-ink); font: inherit; cursor: pointer;
+}
+.sv-player button:hover { border-color: var(--sv-muted); }
+.sv-player button:focus-visible { outline: 2px solid var(--sv-accent); outline-offset: 1px; }
+.sv-player button[aria-pressed="true"] { background: var(--sv-accent); border-color: var(--sv-accent); color: #0b0d0e; }
+.sv-player button.sv-picked { border-color: var(--sv-accent); }
+.sv-player button.sv-pending { border-color: var(--sv-accent); border-style: dashed; }
+.sv-sound { margin-left: auto; }
+.sv-player .sv-debug { background: none; border-color: transparent; color: var(--sv-muted); }
+.sv-player .sv-debug:hover { border-color: var(--sv-line); }
+.sv-player .sv-debug[aria-pressed="true"] { background: none; border-color: var(--sv-line); color: var(--sv-ink); }
+.sv-status { margin: 0; color: var(--sv-muted); }
+.sv-log {
+  margin: 0; max-height: 260px; overflow: auto; padding: 10px 12px;
+  background: var(--sv-panel); border: 1px solid var(--sv-line); border-radius: 6px;
+  font: 12px/1.6 var(--sv-mono); white-space: pre-wrap;
+}
+`;
+function createPlayer(container, options) {
+  injectStyle(container.ownerDocument);
+  const viewer = new Viewer(options);
+  const doc = container.ownerDocument;
+  const make = (tag, className, text = "") => {
+    const element = doc.createElement(tag);
+    element.className = className;
+    element.textContent = text;
+    return element;
+  };
+  const root = make("div", "sv-player");
+  const stage = make("div", "sv-stage");
+  const video = viewer.attach(make("video", ""));
+  video.muted = options.muted ?? true;
+  const stats = make("div", "sv-readout sv-stats", "no stream");
+  const clock = make("div", "sv-readout sv-clock");
+  const banner = make("div", "sv-banner");
+  stage.append(video, stats, banner);
+  if (options.clock) stage.append(clock);
+  const controls = make("div", "sv-controls");
+  const layersBox = make("div", "sv-layers");
+  const sound = make("button", "sv-sound", video.muted ? "Unmute" : "Mute");
+  const debugButton = make("button", "sv-debug", "Debug");
+  sound.type = "button";
+  debugButton.type = "button";
+  controls.append(make("span", "sv-label", "Layer"), layersBox, sound);
+  if (options.debugToggle ?? true) controls.append(debugButton);
+  const status = make("p", "sv-status");
+  const log = make("pre", "sv-log");
+  root.append(stage, controls, status, log);
+  container.append(root);
+  let lastStats = null;
+  const note = (text, at = /* @__PURE__ */ new Date()) => {
+    if (!viewer.debug) return;
+    log.textContent += `${clockText(at)}  ${text}
+`;
+    log.scrollTop = log.scrollHeight;
+  };
+  const renderStatus = (state, reason) => {
+    const text = statusText(state, options.room, reason);
+    status.textContent = text;
+    banner.textContent = state === "connected" ? "" : text;
+  };
+  const renderStats = () => {
+    const layers = viewer.layers;
+    let text = lastStats?.width ? `${lastStats.width}x${lastStats.height}` : "no video";
+    if (lastStats?.framesPerSecond) text += `  ${Math.round(lastStats.framesPerSecond)} fps`;
+    if (lastStats?.mbps != null) text += `
+${lastStats.mbps.toFixed(2)} Mbps`;
+    if (layers.current) text += `
+layer ${layers.current}, ${layers.mode}`;
+    if (layers.target) text += `
+waiting for a keyframe of ${layers.target}`;
+    const relay = viewer.debug ? relayText(viewer.role) : null;
+    if (relay) text += `
+${relay}`;
+    if (viewer.debug && lastStats) {
+      text += `
+freezes ${lastStats.freezeCount}, ${lastStats.freezeSeconds.toFixed(1)} s`;
+      if (lastStats.rttMs !== null) text += `
+rtt ${Math.round(lastStats.rttMs)} ms`;
+    }
+    stats.textContent = text;
+  };
+  const renderLayers = (layers) => {
+    layersBox.replaceChildren();
+    if (!layers.mid) {
+      layersBox.textContent = layers.described ? "single layer" : "none yet";
+      return;
+    }
+    const auto = make("button", "", "Auto");
+    auto.type = "button";
+    auto.setAttribute("aria-pressed", String(layers.mode === "auto"));
+    auto.onclick = () => viewer.setAutoLayer();
+    layersBox.append(auto);
+    for (const { rid, bitrate_estimate } of layers.layers) {
+      const button = make("button", "", bitrate_estimate ? `${rid}  ${Math.round(bitrate_estimate / 1e3)} kbps` : rid);
+      button.type = "button";
+      button.setAttribute("aria-pressed", String(layers.mode === "manual" && layers.current === rid));
+      button.classList.toggle("sv-picked", layers.mode === "auto" && layers.current === rid);
+      button.classList.toggle("sv-pending", layers.target === rid);
+      button.onclick = () => viewer.setLayer(rid);
+      layersBox.append(button);
+    }
+  };
+  const setDebug = (on) => {
+    viewer.setDebug(on);
+    debugButton.setAttribute("aria-pressed", String(on));
+    log.hidden = !on;
+    renderStats();
+  };
+  const unsubscribe = [
+    viewer.on("state", ({ state, reason }) => renderStatus(state, reason)),
+    viewer.on("layers", (layers) => {
+      renderLayers(layers);
+      renderStats();
+    }),
+    viewer.on("stats", (next) => {
+      lastStats = next;
+      renderStats();
+    }),
+    viewer.on("role", () => renderStats()),
+    viewer.on("log", ({ at, text }) => note(text, at))
+  ];
+  sound.onclick = () => {
+    video.muted = !video.muted;
+    sound.textContent = video.muted ? "Unmute" : "Mute";
+    if (!video.muted) void video.play().catch(() => {
+    });
+  };
+  debugButton.onclick = () => {
+    const on = !viewer.debug;
+    setDebug(on);
+    options.onDebugChange?.(on);
+  };
+  const onVisibility = () => note(doc.hidden ? "page hidden" : "page visible");
+  const onBlur = () => note("window lost focus");
+  const onFocus = () => note("window focused");
+  const win = doc.defaultView;
+  doc.addEventListener("visibilitychange", onVisibility);
+  win?.addEventListener("blur", onBlur);
+  win?.addEventListener("focus", onFocus);
+  let frame = 0;
+  const tick = () => {
+    clock.textContent = clockText(/* @__PURE__ */ new Date());
+    frame = requestAnimationFrame(tick);
+  };
+  if (options.clock) tick();
+  setDebug(options.debug ?? false);
+  renderLayers(viewer.layers);
+  renderStatus(viewer.state);
+  void viewer.connect().catch(() => {
+  });
+  return {
+    viewer,
+    element: root,
+    destroy() {
+      cancelAnimationFrame(frame);
+      for (const off of unsubscribe) off();
+      doc.removeEventListener("visibilitychange", onVisibility);
+      win?.removeEventListener("blur", onBlur);
+      win?.removeEventListener("focus", onFocus);
+      viewer.close();
+      root.remove();
+    }
+  };
+}
+function statusText(state, room, reason) {
+  switch (state) {
+    case "idle":
+    case "connecting":
+      return "Connecting...";
+    case "connected":
+      return `Watching ${room}`;
+    case "reconnecting":
+      return reason ? `${reason}. Reconnecting...` : "Reconnecting...";
+    case "not-live":
+      return "This room is not live. Waiting for it to start...";
+    case "failed":
+      return reason ?? "Could not connect.";
+    case "closed":
+      return "Stopped.";
+  }
+}
+function relayText({ role, linked }) {
+  if (role === "relay") return linked ? "relaying to a viewer" : "linking to a viewer";
+  if (role === "leaf") return linked ? "watching through a relay" : "linking to a relay";
+  return null;
+}
+function clockText(now) {
+  const pad = (n, width = 2) => String(n).padStart(width, "0");
+  return `${pad(now.getHours())}:${pad(now.getMinutes())}:${pad(now.getSeconds())}.${pad(now.getMilliseconds(), 3)}`;
+}
+function injectStyle(doc) {
+  if (doc.getElementById(STYLE_ID)) return;
+  const style = doc.createElement("style");
+  style.id = STYLE_ID;
+  style.textContent = STYLE;
+  doc.head.append(style);
+}
+export {
+  JoinError,
+  Viewer,
+  createPlayer
+};
diff --git a/static/watch.html b/static/watch.html
index acd700d..f7d3f21 100644
--- a/static/watch.html
+++ b/static/watch.html
@@ -5,22 +5,12 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Watch</title>
 <style>
-  :root {
-    --bg: #0f1113;
-    --panel: #181b1e;
-    --line: #2b3035;
-    --ink: #e7e9eb;
-    --muted: #8d959c;
-    --accent: #5cc2b4;
-    --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
-  }
-
   * { box-sizing: border-box; }
 
   body {
     margin: 0;
-    background: var(--bg);
-    color: var(--ink);
+    background: #0f1113;
+    color: #e7e9eb;
     font: 14px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
   }
 
@@ -38,73 +28,27 @@
     flex: 1;
     min-width: 0;
     padding: 9px 12px;
-    background: var(--panel);
-    border: 1px solid var(--line);
+    background: #181b1e;
+    border: 1px solid #2b3035;
     border-radius: 6px;
-    color: var(--ink);
-    font: 14px var(--mono);
+    color: inherit;
+    font: 14px ui-monospace, "SF Mono", Menlo, Consolas, monospace;
   }
 
-  button {
+  form button {
     padding: 8px 14px;
-    background: var(--panel);
-    border: 1px solid var(--line);
+    background: #181b1e;
+    border: 1px solid #2b3035;
     border-radius: 6px;
-    color: var(--ink);
+    color: inherit;
     font: inherit;
     cursor: pointer;
   }
 
-  button:hover { border-color: var(--muted); }
-  button:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
-  button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #0b0d0e; }
-  button.picked { border-color: var(--accent); }
-  button.pending { border-color: var(--accent); border-style: dashed; }
-
-  .stage {
-    position: relative;
-    aspect-ratio: 16 / 9;
-    background: #000;
-    border-radius: 8px;
-    overflow: hidden;
-  }
-
-  video { display: block; width: 100%; height: 100%; object-fit: contain; }
-
-  .readout {
-    position: absolute;
-    top: 12px;
-    padding: 6px 10px;
-    background: rgba(0, 0, 0, 0.62);
-    border-radius: 4px;
-    font: 12px/1.5 var(--mono);
-    white-space: pre;
-  }
-
-  #stats { left: 12px; }
-  #clock { right: 12px; font-size: 18px; font-weight: 600; }
-
-  .controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
-  .controls .label { color: var(--muted); margin-right: 4px; }
-  #layers { display: flex; flex-wrap: wrap; gap: 6px; }
-  #sound { margin-left: auto; }
-  #debug { background: none; border-color: transparent; color: var(--muted); }
-  #debug:hover { border-color: var(--line); }
-  #debug[aria-pressed="true"] { background: none; border-color: var(--line); color: var(--ink); }
+  form button:hover { border-color: #8d959c; }
+  input:focus-visible, form button:focus-visible { outline: 2px solid #5cc2b4; outline-offset: 1px; }
 
-  #status { margin: 0; color: var(--muted); }
-
-  #log {
-    margin: 0;
-    max-height: 260px;
-    overflow: auto;
-    padding: 10px 12px;
-    background: var(--panel);
-    border: 1px solid var(--line);
-    border-radius: 6px;
-    font: 12px/1.6 var(--mono);
-    white-space: pre-wrap;
-  }
+  #hint { margin: 0; color: #8d959c; }
 </style>
 </head>
 <body>
@@ -114,345 +58,48 @@
     <button>Watch</button>
   </form>
 
-  <div class="stage">
-    <video id="video" autoplay playsinline muted></video>
-    <div class="readout" id="stats">no stream</div>
-    <div class="readout" id="clock"></div>
-  </div>
-
-  <div class="controls">
-    <span class="label">Layer</span>
-    <div id="layers"></div>
-    <button id="sound" type="button">Unmute</button>
-    <button id="debug" type="button" aria-pressed="false">Debug</button>
-  </div>
-
-  <p id="status">Enter a room id to watch.</p>
-  <pre id="log" hidden></pre>
+  <div id="player"></div>
+  <p id="hint">Enter a room id to watch.</p>
 </main>
 
-<script>
-  const $ = (id) => document.getElementById(id);
-
-  let pc = null;
-  let channel = null;
-  let messages = Promise.resolve();
-  let lastStats = null;
-  // `current` is what the server is sending. `target` is what it will switch to
-  // once a keyframe of that layer arrives.
-  const layer = { mid: null, rids: [], current: null, target: null, mode: "auto", heard: false };
+<script type="module">
+  // The page is a thin shell over the viewer SDK, which the server serves as
+  // one file. A page with a bundler imports @kimsun721/stream-viewer instead.
+  import { createPlayer } from "/stream-viewer.js";
 
-  // Debug mode logs every switch, every freeze the browser counts and every
-  // jump in the RTP timestamp, to check playback against a real publisher.
-  let debug = false;
-  let probe = null;
-  let asked = null;
-  let lastFreezes = { count: 0, seconds: 0, lost: 0, dropped: 0 };
-  let lastSource = null;
+  const query = () => new URLSearchParams(location.search);
+  let player = null;
 
-  function setStatus(text) {
-    $("status").textContent = text;
+  // The address keeps the room and the debug mode, so a reload or a shared link
+  // comes back the same.
+  function remember(update) {
+    const params = query();
+    update(params);
+    history.replaceState(null, "", params.size ? `?${params}` : location.pathname);
   }
 
-  function clockText(now) {
-    const pad = (n, width = 2) => String(n).padStart(width, "0");
-    return `${pad(now.getHours())}:${pad(now.getMinutes())}:${pad(now.getSeconds())}.${pad(now.getMilliseconds(), 3)}`;
-  }
+  function watch(room) {
+    player?.destroy();
+    document.getElementById("hint").hidden = true;
+    remember((params) => params.set("room", room));
 
-  function note(text) {
-    if (!debug) return;
-    const log = $("log");
-    log.textContent += `${clockText(new Date())}  ${text}\n`;
-    log.scrollTop = log.scrollHeight;
-  }
-
-  // Layers are separate RTP streams, so a switch can move the timestamp by far
-  // more than the time that passed. Read from the receiver, not from drawn
-  // frames: a browser draws a window nobody can see about once a second.
-  function probeTimestamp() {
-    const receiver = pc && pc.getReceivers().find((r) => r.track && r.track.kind === "video");
-    const source = receiver && receiver.getSynchronizationSources().sort((a, b) => b.timestamp - a.timestamp)[0];
-    if (!source || source.rtpTimestamp === undefined) return;
-
-    if (!lastSource) {
-      note("reading RTP timestamps");
-    } else if (source.timestamp !== lastSource.timestamp) {
-      const step = (((source.rtpTimestamp - lastSource.rtpTimestamp + 2 ** 31) % 2 ** 32) + 2 ** 32) % 2 ** 32 - 2 ** 31;
-      const ahead = step / 90 - (source.timestamp - lastSource.timestamp);
-      if (Math.abs(ahead) > 1000) {
-        note(`RTP timestamp jumped ${Math.round(Math.abs(ahead) / 1000)} s ${ahead > 0 ? "forward" : "back"}`);
-      }
-    }
-
-    lastSource = { timestamp: source.timestamp, rtpTimestamp: source.rtpTimestamp };
-  }
-
-  function send(message) {
-    if (channel && channel.readyState === "open") {
-      channel.send(JSON.stringify(message));
-    }
-  }
-
-  // The server takes candidates from the offer itself, so gathering has to
-  // finish before it is posted. Host candidates take milliseconds.
-  function gathered(peer) {
-    if (peer.iceGatheringState === "complete") return Promise.resolve();
-    return new Promise((resolve) => {
-      const done = () => peer.iceGatheringState === "complete" && resolve();
-      peer.addEventListener("icegatheringstatechange", done);
-      setTimeout(resolve, 2000);
+    player = createPlayer(document.getElementById("player"), {
+      room,
+      clock: true,
+      debug: query().has("debug"),
+      onDebugChange: (on) => remember((params) => (on ? params.set("debug", "") : params.delete("debug"))),
     });
   }
 
-  async function watch(room) {
-    if (pc) pc.close();
-    Object.assign(layer, { mid: null, rids: [], current: null, target: null, mode: "auto", heard: false });
-    lastStats = null;
-    asked = null;
-    lastFreezes = { count: 0, seconds: 0, lost: 0, dropped: 0 };
-    lastSource = null;
-    renderLayers();
-    const query = new URLSearchParams(location.search);
-    query.set("room", room);
-    history.replaceState(null, "", `?${query}`);
-    setStatus("Connecting...");
-
-    pc = new RTCPeerConnection();
-    const stream = new MediaStream();
-    $("video").srcObject = stream;
-    pc.ontrack = (event) => stream.addTrack(event.track);
-    pc.onconnectionstatechange = () => {
-      const state = pc.connectionState;
-      if (state === "connected") setStatus(`Watching ${room}`);
-      if (state === "failed" || state === "disconnected") setStatus("The stream ended or the connection was lost.");
-    };
-
-    // The server adds the media tracks over this channel once it opens, so
-    // the channel has to be part of the first offer.
-    channel = pc.createDataChannel("data");
-    channel.onmessage = (event) => {
-      const message = JSON.parse(event.data);
-      messages = messages.then(() => handle(message)).catch((e) => console.error(e));
-    };
-
-    await pc.setLocalDescription(await pc.createOffer());
-    await gathered(pc);
-
-    const response = await fetch("/offer", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ type: "offer", sdp: pc.localDescription.sdp, room_id: room }),
-    });
-
-    if (response.status === 404) {
-      pc.close();
-      setStatus("This room is not live.");
-      return;
-    }
-    if (!response.ok) {
-      pc.close();
-      setStatus(`The server refused the offer: ${response.status}`);
-      return;
-    }
-
-    await pc.setRemoteDescription(await response.json());
-  }
-
-  async function handle(message) {
-    switch (message.type) {
-      case "offer":
-        await pc.setRemoteDescription(message);
-        await pc.setLocalDescription(await pc.createAnswer());
-        send({ type: "answer", sdp: pc.localDescription.sdp });
-        break;
-
-      case "layer_status":
-        // Audio, and video from a publisher without simulcast, come with no
-        // layers to choose from.
-        layer.heard = true;
-        if (message.available_simulcast_layers.length > 0) {
-          layer.mid = message.mid;
-          layer.rids = message.available_simulcast_layers;
-          layer.current = message.current_layer;
-          layer.target = message.target_layer;
-          layer.mode = message.layer_mode;
-        }
-        renderLayers();
-        break;
-
-      case "layer_changed":
-        if (message.mid === layer.mid) {
-          if (asked && asked.rid === message.rid) {
-            note(`switched ${layer.current} to ${message.rid}, ${Math.round(performance.now() - asked.at)} ms after asking`);
-            asked = null;
-          } else {
-            note(layer.current ? `switched ${layer.current} to ${message.rid}` : `started on ${message.rid}`);
-          }
-          layer.current = message.rid;
-          // In automatic mode the server retargets without saying so, which
-          // leaves the target heard earlier stale. A switch always settles it.
-          if (layer.mode === "auto" || layer.target === message.rid) layer.target = null;
-          renderLayers();
-        }
-        break;
-
-      // Relay messages need the peer side of the protocol, which this page does
-      // not speak. Left unanswered, the server never promotes it.
-    }
-  }
-
-  // The server ignores a layer request in automatic mode, so picking one
-  // switches to manual first.
-  function choose(rid) {
-    if (!layer.mid) return;
-
-    if (rid === null) {
-      layer.mode = "auto";
-      asked = null;
-      note("asked for auto");
-      send({ type: "set_layer_mode", mid: layer.mid, layer_mode: "auto" });
-    } else {
-      asked = rid === layer.current ? null : { rid, at: performance.now() };
-      note(`asked for ${rid}`);
-      if (layer.mode !== "manual") {
-        layer.mode = "manual";
-        send({ type: "set_layer_mode", mid: layer.mid, layer_mode: "manual" });
-      }
-      send({ type: "set_layer", mid: layer.mid, rid });
-      layer.target = rid === layer.current ? null : rid;
-    }
-
-    renderLayers();
-  }
-
-  function renderLayers() {
-    const box = $("layers");
-    box.replaceChildren();
-
-    if (!layer.mid) {
-      box.textContent = layer.heard ? "single layer" : "none yet";
-      return;
-    }
-
-    const auto = document.createElement("button");
-    auto.type = "button";
-    auto.textContent = "Auto";
-    auto.setAttribute("aria-pressed", layer.mode === "auto");
-    auto.onclick = () => choose(null);
-    box.append(auto);
-
-    for (const { rid, bitrate_estimate } of layer.rids) {
-      const button = document.createElement("button");
-      button.type = "button";
-      button.textContent = bitrate_estimate
-        ? `${rid}  ${Math.round(bitrate_estimate / 1000)} kbps`
-        : rid;
-      button.setAttribute("aria-pressed", layer.mode === "manual" && layer.current === rid);
-      button.classList.toggle("picked", layer.mode === "auto" && layer.current === rid);
-      button.classList.toggle("pending", layer.target === rid);
-      button.onclick = () => choose(rid);
-      box.append(button);
-    }
-  }
-
-  async function readStats() {
-    if (!pc) return;
-
-    const video = $("video");
-    let line = video.videoWidth ? `${video.videoWidth}x${video.videoHeight}` : "no video";
-    let freezes = "";
-    const report = await pc.getStats();
-
-    report.forEach((entry) => {
-      if (entry.type !== "inbound-rtp" || entry.kind !== "video") return;
-
-      if (entry.framesPerSecond) line += `  ${Math.round(entry.framesPerSecond)} fps`;
-
-      const now = {
-        count: entry.freezeCount ?? 0,
-        seconds: entry.totalFreezesDuration ?? 0,
-        lost: entry.packetsLost ?? 0,
-        dropped: entry.framesDropped ?? 0,
-      };
-      if (debug) freezes = `\nfreezes ${now.count}, ${now.seconds.toFixed(1)} s`;
-      // Loss points at the network or the sender, drops at this browser, and
-      // neither at frames that simply arrived late.
-      if (now.count > lastFreezes.count) {
-        const ms = Math.round((now.seconds - lastFreezes.seconds) * 1000);
-        const times = now.count - lastFreezes.count;
-        const froze = times === 1 ? `froze ${ms} ms` : `froze ${times} times, ${ms} ms in all`;
-        note(`${froze}, ${now.lost - lastFreezes.lost} packets lost, ${now.dropped - lastFreezes.dropped} frames dropped`);
-      }
-      lastFreezes = now;
-
-      if (lastStats) {
-        const seconds = (entry.timestamp - lastStats.timestamp) / 1000;
-        const mbps = ((entry.bytesReceived - lastStats.bytesReceived) * 8) / seconds / 1e6;
-        if (seconds > 0) line += `\n${mbps.toFixed(2)} Mbps`;
-      }
-      lastStats = { timestamp: entry.timestamp, bytesReceived: entry.bytesReceived };
-    });
-
-    if (layer.current) line += `\nlayer ${layer.current}, ${layer.mode}`;
-    if (layer.target) line += `\nwaiting for a keyframe of ${layer.target}`;
-    line += freezes;
-    $("stats").textContent = line;
-  }
-
-  function tick() {
-    $("clock").textContent = clockText(new Date());
-    requestAnimationFrame(tick);
-  }
-
-  $("join").onsubmit = (event) => {
+  document.getElementById("join").onsubmit = (event) => {
     event.preventDefault();
-    watch($("room").value.trim()).catch((e) => setStatus(`Could not connect: ${e.message}`));
-  };
-
-  $("sound").onclick = () => {
-    const video = $("video");
-    video.muted = !video.muted;
-    $("sound").textContent = video.muted ? "Unmute" : "Mute";
+    watch(document.getElementById("room").value.trim());
   };
 
-  // The address keeps the choice, so a reload or a shared link stays in debug.
-  function setDebug(on) {
-    debug = on;
-    $("debug").setAttribute("aria-pressed", on);
-    $("log").hidden = !on;
-
-    clearInterval(probe);
-    lastSource = null;
-    if (on) probe = setInterval(probeTimestamp, 250);
-
-    const query = new URLSearchParams(location.search);
-    if (on) query.set("debug", "");
-    else query.delete("debug");
-    history.replaceState(null, "", query.size ? `?${query}` : location.pathname);
-  }
-
-  $("debug").onclick = () => setDebug(!debug);
-
-  let size = "";
-  $("video").addEventListener("resize", () => {
-    const now = `${$("video").videoWidth}x${$("video").videoHeight}`;
-    if (now !== size) note(`picture is now ${now}`);
-    size = now;
-  });
-  document.addEventListener("visibilitychange", () => note(document.hidden ? "page hidden" : "page visible"));
-  window.addEventListener("blur", () => note("window lost focus"));
-  window.addEventListener("focus", () => note("window focused"));
-
-  setDebug(new URLSearchParams(location.search).has("debug"));
-
-  renderLayers();
-  setInterval(readStats, 1000);
-  tick();
-
-  const room = new URLSearchParams(location.search).get("room");
+  const room = query().get("room");
   if (room) {
-    $("room").value = room;
-    watch(room).catch((e) => setStatus(`Could not connect: ${e.message}`));
+    document.getElementById("room").value = room;
+    watch(room);
   }
 </script>
 </body>
diff --git a/tests/viewer.rs b/tests/viewer.rs
index 967530b..16c7f79 100644
--- a/tests/viewer.rs
+++ b/tests/viewer.rs
@@ -346,7 +346,32 @@ async fn the_watch_page_is_served() {
 
     let page = response.text().await.expect("page");
     assert!(
-        page.contains("createDataChannel"),
-        "the page opens its data channel before the offer"
+        page.contains("/stream-viewer.js"),
+        "the page runs on the SDK the server serves"
+    );
+}
+
+#[tokio::test]
+async fn the_viewer_sdk_is_served() {
+    let server = Server::default();
+
+    let response = reqwest::get(server.sdp_url("/stream-viewer.js"))
+        .await
+        .expect("GET /stream-viewer.js");
+    assert_eq!(response.status(), reqwest::StatusCode::OK);
+
+    let content_type = response.headers()["content-type"]
+        .to_str()
+        .expect("content type")
+        .to_string();
+    assert!(
+        content_type.starts_with("text/javascript"),
+        "{content_type}"
+    );
+
+    let script = response.text().await.expect("script");
+    assert!(
+        script.contains("createDataChannel"),
+        "the SDK opens its data channel before the offer"
     );
 }