From e38c77f11ea7b09b8665803668ed8d6589997ea8 Mon Sep 17 00:00:00 2001
From: Luke Curley <kixelated@gmail.com>
Date: Wed, 3 Jun 2026 19:36:57 -0700
Subject: [PATCH 1/4] feat(watch): latency range with buffered playback

Reframe playback latency as a range [latency-min, latency-max] in @moq/watch,
unifying live (minimize) and buffered playback into one mechanism.

The reference (wall-clock anchor) is re-anchored only when keeping it would push
latency past the ceiling, so future-dated frames (e.g. TTS written faster than
real-time) build up a buffer instead of dragging the playhead forward. Minimize
latency is the degenerate case where the ceiling equals the floor, so there is no
separate buffered code path.

latency-max forms:
- "real-time" (default) or <= floor: minimize, today's behavior.
- a number (ms): buffer up to the cap, then skip ahead.
- undefined / "none": uncapped, never skip.

latency is sugar that collapses the floor and ceiling to one value; latency-min
sets only the floor. reset() flushes the buffer and re-anchors at an utterance
boundary.

The decoded audio ring stays small (~1.5s). The lookahead lives upstream as
encoded frames: the decoder awaits AudioBuffer.wait(timestamp) before decode(),
which holds the frame as Opus until the playhead nears it, instead of buffering
seconds of PCM. Backpressure works on both transports (Atomics poll on the
SharedArrayBuffer path, worklet state messages on the postMessage fallback). A
finite latency-max keeps sizing the ring to the cap and dropping via overflow.

Follow-up: plumb latency-max into the wire SubscribeUpdate.maxLatency so the
relay also reorders/drops groups past the cap (currently sends 0).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 doc/lib/js/@moq/watch.md                      |  62 ++++++++
 js/watch/src/audio/buffer.ts                  | 136 ++++++++++++++--
 js/watch/src/audio/decoder.ts                 |  18 ++-
 js/watch/src/audio/render-worklet.ts          |   3 +
 js/watch/src/audio/render.ts                  |  10 +-
 js/watch/src/audio/ring-buffer.test.ts        |  60 ++++++++
 js/watch/src/audio/ring-buffer.ts             |  61 +++++++-
 js/watch/src/audio/shared-ring-buffer.test.ts |  66 ++++++++
 js/watch/src/audio/shared-ring-buffer.ts      |  41 ++++-
 js/watch/src/backend.ts                       |  51 +++++-
 js/watch/src/element.ts                       |  82 ++++++++--
 js/watch/src/sync.test.ts                     |  62 ++++++++
 js/watch/src/sync.ts                          | 145 ++++++++++++++----
 js/watch/src/ui/components/buffer-control.ts  |   4 +-
 14 files changed, 726 insertions(+), 75 deletions(-)
 create mode 100644 js/watch/src/sync.test.ts

diff --git a/doc/lib/js/@moq/watch.md b/doc/lib/js/@moq/watch.md
index 89f0c57612..9d92f45e44 100644
--- a/doc/lib/js/@moq/watch.md
+++ b/doc/lib/js/@moq/watch.md
@@ -70,6 +70,9 @@ a real bundler (the examples below).
 - `paused`: Pause playback (boolean)
 - `muted`: Mute audio (boolean)
 - `volume`: Audio volume (0 to 1, default: 1)
+- `latency`: Latency target. `"real-time"` (default) derives it from RTT, or a number sets a fixed jitter buffer in ms. Sugar for collapsing `latency-min` and `latency-max` to one value (minimize latency).
+- `latency-min`: Latency floor (the jitter/startup buffer). Same units as `latency`; leaves the ceiling untouched.
+- `latency-max`: Latency ceiling. `"real-time"` (default) minimizes latency, a number caps at that many ms, and `"none"` is uncapped. A ceiling above the floor enables [buffered playback](#buffered-playback): build up a buffer from future-dated frames instead of skipping ahead.
 - `catalog-format`: Catalog format. One of `"hang"`, `"msf"` (see [MSF](/concept/standard/msf)), or `"manual"` (supply the catalog yourself). When omitted, the format is auto-detected from the broadcast `name` extension (`.hang` or `.msf`), falling back to `"hang"`.
 
 ## Catalog Formats
@@ -139,6 +142,65 @@ el.catalog = myCatalog;
 > `"msf"`) tears down the previous fetch loop, which clears `catalog`. Set the
 > catalog *after* switching to `"manual"`, not before.
 
+## Buffered playback
+
+Latency is a **range**, `[latency-min, latency-max]`. By default the range is
+collapsed (`latency` sets both to one value) and `@moq/watch` minimizes latency:
+it anchors playback to the earliest frame seen relative to its timestamp and skips
+ahead whenever the buffer grows past the target. That is right for live
+conferencing, but wrong for content written *faster than real-time* with
+timestamps in the future, such as a text-to-speech response streamed all at once.
+
+Open the range, by setting a `latency-max` above the floor, to anchor playback to
+the first frame received and play through at the encoded pace. The buffer is
+allowed to float anywhere between the floor and the ceiling without skipping:
+
+```html
+<moq-watch url="https://relay.example.com/anon" name="bot/tts.hang"
+    latency-min="100" latency-max="30000">
+    <canvas></canvas>
+</moq-watch>
+```
+
+```typescript
+const el = document.querySelector("moq-watch")!;
+el.latencyMin = 100;     // floor: start after 100ms buffered
+el.latencyMax = 30_000;  // ceiling: never skip until 30s buffered
+```
+
+`latency-min` is the jitter/startup buffer (it can also be `"real-time"` for an
+adaptive floor). `latency-max` is the ceiling, and it has three forms:
+
+- a **number** (ms): buffer freely up to the cap, then skip ahead, so latency
+  stays at most that far behind the newest frame.
+- **`"none"`** (`el.latencyMax = undefined` in JS): uncapped. Playback never skips
+  ahead. The decoded audio ring stays small (~1.5s); the lookahead is held upstream
+  as encoded frames, and the decoder applies backpressure (stops decoding ahead)
+  rather than dropping audio or buffering seconds of PCM.
+- **`"real-time"`** (the default) or any value `<= latency-min`: collapsed, i.e.
+  today's minimize-latency behavior.
+
+The mechanism is the same in every case: the playhead is anchored on the first
+frame and only re-anchored (skipped forward) when keeping it would push latency
+past `latency-max`. Minimize is just the degenerate case where the ceiling equals
+the floor.
+
+At each new utterance, call `reset()` to flush the audio buffer and re-anchor
+playback to the next frame. The producer can interrupt by writing a new utterance
+(optionally on a new track) and the viewer calls `reset()` to drop whatever was
+still buffered:
+
+```typescript
+el.reset();
+```
+
+This removes the need to pace writes on the producer: emit the whole response as
+fast as possible with correct (future) timestamps, and `reset()` on interruption.
+
+> Buffered playback uses the WebCodecs path (a `<canvas>` child). It does not
+> apply to the MSE `<video>` path. Set the range before the broadcast starts
+> decoding; changing it mid-stream takes effect on the next decoder.
+
 ## UI Overlay
 
 Import `@moq/watch/ui` for a Web Component overlay with buffering indicator, stats panel, and playback controls:
diff --git a/js/watch/src/audio/buffer.ts b/js/watch/src/audio/buffer.ts
index 9ca13c5d87..752528cae3 100644
--- a/js/watch/src/audio/buffer.ts
+++ b/js/watch/src/audio/buffer.ts
@@ -1,8 +1,57 @@
 import { Time } from "@moq/net";
 import { Effect, type Getter, Signal } from "@moq/signals";
-import type { Data, InitPost, InitShared, Latency, State } from "./render";
+import type { Data, InitPost, InitShared, Latency, Reset, State } from "./render";
 import { allocSharedRingBuffer, SharedRingBuffer } from "./shared-ring-buffer";
 
+// Ring capacity (ms) when buffering is uncapped. The decoded PCM ring stays small; the
+// real lookahead lives upstream as encoded frames. On the SharedArrayBuffer path `wait()`
+// applies backpressure (holding encoded frames) once decoding would run this far ahead.
+const UNCAPPED_RING_MS = 1500 as Time.Milli;
+
+// Headroom below capacity so a frame mid-decode doesn't overflow the small ring.
+const RING_MARGIN_MS = 250 as Time.Milli;
+
+/**
+ * Timestamp-based backpressure for the uncapped buffered ring. `wait(timestamp)` stays pending
+ * until the playhead reaches `timestamp - (capacity - margin)`, so the decoder holds a frame (as
+ * encoded Opus) instead of decoding it too far ahead of the small PCM ring. Both transports share
+ * this; they differ only in how they observe the playhead (Atomics poll vs worklet state messages).
+ */
+class Backpressure {
+	readonly #enabled: boolean;
+	readonly #headroom: Time.Micro;
+	#waiters: Array<{ threshold: Time.Micro; resolve: () => void }> = [];
+
+	constructor(enabled: boolean, capacityMs: Time.Milli | undefined) {
+		this.#enabled = enabled;
+		const headroomMs = Math.max(0, (capacityMs ?? 0) - RING_MARGIN_MS) as Time.Milli;
+		this.#headroom = Time.Micro.fromMilli(headroomMs);
+	}
+
+	wait(timestamp: Time.Micro, playhead: Time.Micro): Promise<void> {
+		if (!this.#enabled) return Promise.resolve();
+		const threshold = (timestamp - this.#headroom) as Time.Micro;
+		if (playhead >= threshold) return Promise.resolve();
+		return new Promise((resolve) => this.#waiters.push({ threshold, resolve }));
+	}
+
+	// Resolve every waiter the playhead has reached.
+	advance(playhead: Time.Micro): void {
+		if (this.#waiters.length === 0) return;
+		this.#waiters = this.#waiters.filter(({ threshold, resolve }) => {
+			if (playhead < threshold) return true;
+			resolve();
+			return false;
+		});
+	}
+
+	// Resolve everything unconditionally (reset/close): never strand a decode loop.
+	flush(): void {
+		for (const { resolve } of this.#waiters) resolve();
+		this.#waiters = [];
+	}
+}
+
 /**
  * Unified interface for the audio buffer between the main thread and the AudioWorklet.
  *
@@ -22,6 +71,17 @@ export interface AudioBuffer {
 	/** Update the target latency in samples. */
 	setLatency(samples: number): void;
 
+	/** Flush buffered samples and re-stall, ready to anchor the next utterance (buffered mode). */
+	reset(): void;
+
+	/**
+	 * Resolve once there's room to insert a frame at `timestamp`. In uncapped buffered mode this
+	 * applies backpressure: it stays pending while decoding `timestamp` would run too far ahead of
+	 * the playhead for the small ring, so the caller holds the (encoded) frame instead of decoding
+	 * it. Resolves immediately when capped or live (the ring bounds itself).
+	 */
+	wait(timestamp: Time.Micro): Promise<void>;
+
 	/** Current playback timestamp (derived from reader position). */
 	readonly timestamp: Getter<Time.Micro>;
 
@@ -50,13 +110,16 @@ export function createAudioBuffer(
 	channels: number,
 	rate: number,
 	latencySamples: number,
+	buffered = false,
+	// undefined = uncapped (only meaningful when buffered).
+	maxBuffer?: Time.Milli,
 ): AudioBuffer {
 	if (supportsSharedArrayBuffer()) {
 		console.log("[audio] using SharedArrayBuffer audio buffer");
-		return new SharedAudioBuffer(worklet, channels, rate, latencySamples);
+		return new SharedAudioBuffer(worklet, channels, rate, latencySamples, buffered, maxBuffer);
 	}
 	console.log("[audio] using postMessage audio buffer (SharedArrayBuffer unavailable)");
-	return new PostAudioBuffer(worklet, channels, rate, latencySamples);
+	return new PostAudioBuffer(worklet, channels, rate, latencySamples, buffered, maxBuffer);
 }
 
 /** SharedArrayBuffer-backed implementation. Writes go directly into shared memory. */
@@ -72,16 +135,33 @@ class SharedAudioBuffer implements AudioBuffer {
 	readonly #stalled = new Signal<boolean>(true);
 	readonly stalled: Getter<boolean> = this.#stalled;
 
+	#backpressure: Backpressure;
+
 	#signals = new Effect();
 
-	constructor(worklet: AudioWorkletNode, channels: number, rate: number, latencySamples: number) {
+	constructor(
+		worklet: AudioWorkletNode,
+		channels: number,
+		rate: number,
+		latencySamples: number,
+		buffered: boolean,
+		maxBuffer?: Time.Milli,
+	) {
 		this.#worklet = worklet;
 		this.channels = channels;
 		this.rate = rate;
 
-		// Capacity needs headroom above LATENCY for overflow protection.
-		const capacity = Math.max(rate, latencySamples * 2);
-		const init = allocSharedRingBuffer(channels, capacity, rate);
+		// Buffered + capped: capacity is the cap (drops the oldest beyond it; no backpressure).
+		// Buffered + uncapped: a small ring with backpressure via `wait()`; lookahead stays encoded.
+		// Not buffered: just headroom above LATENCY.
+		const capacityMs = buffered ? (maxBuffer ?? UNCAPPED_RING_MS) : undefined;
+		const capacity =
+			capacityMs !== undefined
+				? Math.ceil(rate * Time.Second.fromMilli(capacityMs))
+				: Math.max(rate, latencySamples * 2);
+		this.#backpressure = new Backpressure(buffered && maxBuffer === undefined, capacityMs);
+
+		const init = allocSharedRingBuffer(channels, capacity, rate, buffered);
 		this.#ring = new SharedRingBuffer(init);
 		this.#ring.setLatency(latencySamples);
 
@@ -92,6 +172,7 @@ class SharedAudioBuffer implements AudioBuffer {
 		this.#signals.interval(() => {
 			this.#timestamp.set(this.#ring.timestamp);
 			this.#stalled.set(this.#ring.stalled);
+			this.#backpressure.advance(this.#ring.timestamp);
 		}, 50);
 	}
 
@@ -113,7 +194,17 @@ class SharedAudioBuffer implements AudioBuffer {
 		}
 	}
 
+	reset(): void {
+		this.#ring.reset();
+		this.#backpressure.flush(); // the old timeline is gone; let the decode loop re-anchor
+	}
+
+	wait(timestamp: Time.Micro): Promise<void> {
+		return this.#backpressure.wait(timestamp, this.#ring.timestamp);
+	}
+
 	close(): void {
+		this.#backpressure.flush(); // never leave a decode loop awaiting a closed buffer
 		this.#signals.close();
 	}
 }
@@ -130,15 +221,28 @@ class PostAudioBuffer implements AudioBuffer {
 	readonly #stalled = new Signal<boolean>(true);
 	readonly stalled: Getter<boolean> = this.#stalled;
 
+	// Backpressure runs off the playhead the worklet reports in its state messages.
+	#backpressure: Backpressure;
+
 	#signals = new Effect();
 
-	constructor(worklet: AudioWorkletNode, channels: number, rate: number, latencySamples: number) {
+	constructor(
+		worklet: AudioWorkletNode,
+		channels: number,
+		rate: number,
+		latencySamples: number,
+		buffered: boolean,
+		maxBuffer?: Time.Milli,
+	) {
 		this.#worklet = worklet;
 		this.channels = channels;
 		this.rate = rate;
 
+		const capacityMs = buffered ? (maxBuffer ?? UNCAPPED_RING_MS) : undefined;
+		this.#backpressure = new Backpressure(buffered && maxBuffer === undefined, capacityMs);
+
 		const latency = Time.Milli.fromSecond((latencySamples / rate) as Time.Second);
-		const msg: InitPost = { type: "init-post", channels, rate, latency };
+		const msg: InitPost = { type: "init-post", channels, rate, latency, buffered, maxBuffer };
 		worklet.port.postMessage(msg);
 
 		// Listen for state updates from the worklet.
@@ -147,6 +251,7 @@ class PostAudioBuffer implements AudioBuffer {
 			if (data?.type === "state") {
 				this.#timestamp.set(data.timestamp);
 				this.#stalled.set(data.stalled);
+				this.#backpressure.advance(data.timestamp);
 			}
 		});
 		// addEventListener on a MessagePort requires start() to begin delivery.
@@ -169,7 +274,20 @@ class PostAudioBuffer implements AudioBuffer {
 		this.#worklet.port.postMessage(msg);
 	}
 
+	reset(): void {
+		const msg: Reset = { type: "reset" };
+		this.#worklet.port.postMessage(msg);
+		this.#backpressure.flush(); // the old timeline is gone; let the decode loop re-anchor
+	}
+
+	wait(timestamp: Time.Micro): Promise<void> {
+		// Uses the worklet-reported playhead, which lags by a state-message interval; the ring
+		// margin covers that. The worklet still drops the oldest if a frame slips through.
+		return this.#backpressure.wait(timestamp, this.#timestamp.peek());
+	}
+
 	close(): void {
+		this.#backpressure.flush(); // never leave a decode loop awaiting a closed buffer
 		this.#signals.close();
 	}
 }
diff --git a/js/watch/src/audio/decoder.ts b/js/watch/src/audio/decoder.ts
index ce2ec24793..9a5b3e7c2c 100644
--- a/js/watch/src/audio/decoder.ts
+++ b/js/watch/src/audio/decoder.ts
@@ -116,9 +116,11 @@ export class Decoder {
 			// Initial target latency in samples.
 			const latency = this.source.sync.buffer.peek();
 			const latencySamples = Math.ceil(sampleRate * Time.Second.fromMilli(latency));
+			const buffered = this.source.sync.buffered.peek();
+			const maxBuffer = this.source.sync.maxBuffer.peek();
 
 			// Let the factory pick the best transport (SharedArrayBuffer or postMessage).
-			const ring = createAudioBuffer(worklet, channelCount, sampleRate, latencySamples);
+			const ring = createAudioBuffer(worklet, channelCount, sampleRate, latencySamples, buffered, maxBuffer);
 			this.#ring = ring;
 			effect.cleanup(() => {
 				ring.close();
@@ -254,6 +256,10 @@ export class Decoder {
 					bytesReceived: (stats?.bytesReceived ?? 0) + frame.data.byteLength,
 				}));
 
+				// Backpressure: in uncapped buffered mode this holds the encoded frame until the
+				// playhead nears it, so we keep the lookahead as Opus instead of decoded PCM.
+				await this.#ring?.wait(frame.timestamp as Time.Micro);
+
 				const chunk = new EncodedAudioChunk({
 					type: frame.keyframe ? "key" : "delta",
 					data: frame.data,
@@ -326,6 +332,10 @@ export class Decoder {
 					bytesReceived: (stats?.bytesReceived ?? 0) + frame.data.byteLength,
 				}));
 
+				// Backpressure: in uncapped buffered mode this holds the encoded frame until the
+				// playhead nears it, so we keep the lookahead as Opus instead of decoded PCM.
+				await this.#ring?.wait(frame.timestamp);
+
 				if (decoder.state === "closed") break;
 				decoder.decode(
 					new EncodedAudioChunk({
@@ -404,6 +414,12 @@ export class Decoder {
 		});
 	}
 
+	// Flush the audio buffer and re-stall, re-anchoring playback to the next frame.
+	// Use in buffered mode at an utterance boundary (see Sync.reset).
+	reset(): void {
+		this.#ring?.reset();
+	}
+
 	close() {
 		this.#signals.close();
 	}
diff --git a/js/watch/src/audio/render-worklet.ts b/js/watch/src/audio/render-worklet.ts
index 439ee3b397..e8ec2397c6 100644
--- a/js/watch/src/audio/render-worklet.ts
+++ b/js/watch/src/audio/render-worklet.ts
@@ -27,6 +27,9 @@ class Render extends AudioWorkletProcessor {
 			} else if (msg.type === "latency") {
 				// Only meaningful in post mode.
 				if (this.#backend instanceof AudioRingBuffer) this.#backend.resize(msg.latency);
+			} else if (msg.type === "reset") {
+				// Only meaningful in post mode; shared mode resets via the control array.
+				if (this.#backend instanceof AudioRingBuffer) this.#backend.reset();
 			}
 		};
 	}
diff --git a/js/watch/src/audio/render.ts b/js/watch/src/audio/render.ts
index 09f23efe25..b9693641eb 100644
--- a/js/watch/src/audio/render.ts
+++ b/js/watch/src/audio/render.ts
@@ -1,7 +1,7 @@
 import type { Time } from "@moq/net";
 import type { SharedRingBufferInit } from "./shared-ring-buffer";
 
-export type Message = InitShared | InitPost | Data | Latency;
+export type Message = InitShared | InitPost | Data | Latency | Reset;
 export type ToMain = State;
 
 /** Init message when SharedArrayBuffer is available. */
@@ -15,6 +15,14 @@ export interface InitPost {
 	channels: number;
 	rate: number;
 	latency: Time.Milli;
+	buffered: boolean;
+	// undefined = uncapped; the worklet falls back to a fixed large capacity.
+	maxBuffer?: Time.Milli;
+}
+
+/** Flush the buffer and re-stall (fallback path only; shared path resets via Atomics). */
+export interface Reset {
+	type: "reset";
 }
 
 /** Audio samples sent via postMessage (fallback path only). */
diff --git a/js/watch/src/audio/ring-buffer.test.ts b/js/watch/src/audio/ring-buffer.test.ts
index c8ab5e4d86..a0b8674375 100644
--- a/js/watch/src/audio/ring-buffer.test.ts
+++ b/js/watch/src/audio/ring-buffer.test.ts
@@ -633,3 +633,63 @@ describe("resize", () => {
 		}
 	});
 });
+
+describe("buffered mode", () => {
+	function createBuffered(latency: number) {
+		return new AudioRingBuffer({ rate: 1000, channels: 1, latency: latency as Time.Milli, buffered: true });
+	}
+
+	it("anchors to the first frame and un-stalls at the latency target", () => {
+		const buffer = createBuffered(50);
+		expect(buffer.stalled).toBe(true);
+		write(buffer, 2000 as Time.Milli, 100, { channels: 1, value: 0.1 });
+		expect(buffer.stalled).toBe(false);
+		expect(Time.Milli.fromMicro(buffer.timestamp)).toBe(2000 as Time.Milli);
+	});
+
+	it("plays through the whole buffer without dropping", () => {
+		const buffer = createBuffered(50);
+		for (let i = 0; i < 10; i++) {
+			write(buffer, (2000 + i * 100) as Time.Milli, 100, { channels: 1, value: (i + 1) / 10 });
+		}
+		expect(buffer.length).toBe(1000);
+
+		const first = read(buffer, 100, 1);
+		expect(first[0][0]).toBeCloseTo(0.1, 5);
+		const second = read(buffer, 100, 1);
+		expect(second[0][0]).toBeCloseTo(0.2, 5);
+	});
+
+	it("reset re-stalls and re-anchors to the next utterance", () => {
+		const buffer = createBuffered(50);
+		write(buffer, 2000 as Time.Milli, 100, { channels: 1, value: 0.1 });
+		read(buffer, 50, 1);
+
+		buffer.reset();
+		expect(buffer.stalled).toBe(true);
+
+		write(buffer, 500 as Time.Milli, 100, { channels: 1, value: 0.9 });
+		expect(Time.Milli.fromMicro(buffer.timestamp)).toBe(500 as Time.Milli);
+		const out = read(buffer, 100, 1);
+		expect(out[0][0]).toBeCloseTo(0.9, 5);
+	});
+
+	it("drops the oldest samples once the buffer exceeds the cap", () => {
+		// 200ms cap at 1000Hz = 200-sample capacity.
+		const buffer = new AudioRingBuffer({
+			rate: 1000,
+			channels: 1,
+			latency: 50 as Time.Milli,
+			buffered: true,
+			maxBuffer: 200 as Time.Milli,
+		});
+
+		write(buffer, 0 as Time.Milli, 100, { channels: 1, value: 0.1 }); // [0, 100)
+		write(buffer, 100 as Time.Milli, 100, { channels: 1, value: 0.2 }); // [100, 200)
+		write(buffer, 200 as Time.Milli, 100, { channels: 1, value: 0.3 }); // exceeds cap; drops [0, 100)
+
+		expect(Time.Milli.fromMicro(buffer.timestamp)).toBe(100 as Time.Milli);
+		expect(read(buffer, 100, 1)[0][0]).toBeCloseTo(0.2, 5);
+		expect(read(buffer, 100, 1)[0][0]).toBeCloseTo(0.3, 5);
+	});
+});
diff --git a/js/watch/src/audio/ring-buffer.ts b/js/watch/src/audio/ring-buffer.ts
index 3048607a33..9dd7e95a9a 100644
--- a/js/watch/src/audio/ring-buffer.ts
+++ b/js/watch/src/audio/ring-buffer.ts
@@ -1,5 +1,10 @@
 import { Time } from "@moq/net";
 
+// Capacity for an uncapped buffered ring (postMessage path). The main thread can't see the
+// worklet's fill level here, so there's no backpressure; the worklet drops the oldest if full,
+// which bounds an uncapped buffer to this on the fallback path.
+const DEFAULT_MAX_BUFFER = 1_500 as Time.Milli;
+
 export class AudioRingBuffer {
 	#buffer: Float32Array[];
 	#writeIndex = 0;
@@ -9,20 +14,40 @@ export class AudioRingBuffer {
 	readonly channels: number;
 	#stalled = true;
 
-	constructor(props: { rate: number; channels: number; latency: Time.Milli }) {
+	// Buffered mode: anchor to the first sample, play through without skipping ahead.
+	readonly #buffered: boolean;
+	// Un-stall threshold in samples (how much to buffer before playback starts).
+	#latencySamples: number;
+	// Whether the read/write indices have been anchored to the first inserted sample.
+	#anchored = false;
+
+	constructor(props: {
+		rate: number;
+		channels: number;
+		latency: Time.Milli;
+		buffered?: boolean;
+		maxBuffer?: Time.Milli;
+	}) {
 		if (props.channels <= 0) throw new Error("invalid channels");
 		if (props.rate <= 0) throw new Error("invalid sample rate");
 		if (props.latency <= 0) throw new Error("invalid latency");
 
-		const samples = Math.ceil(props.rate * Time.Second.fromMilli(props.latency));
-		if (samples === 0) throw new Error("empty buffer");
+		this.#latencySamples = Math.ceil(props.rate * Time.Second.fromMilli(props.latency));
+		if (this.#latencySamples === 0) throw new Error("empty buffer");
 
 		this.rate = props.rate;
 		this.channels = props.channels;
+		this.#buffered = props.buffered ?? false;
+
+		// In buffered mode the capacity is the maxBuffer cap, not just the latency target.
+		const maxBuffer = props.maxBuffer ?? DEFAULT_MAX_BUFFER;
+		const capacity = this.#buffered
+			? Math.ceil(props.rate * Time.Second.fromMilli(maxBuffer))
+			: this.#latencySamples;
 
 		this.#buffer = [];
 		for (let i = 0; i < this.channels; i++) {
-			this.#buffer[i] = new Float32Array(samples);
+			this.#buffer[i] = new Float32Array(capacity);
 		}
 	}
 
@@ -43,6 +68,12 @@ export class AudioRingBuffer {
 	}
 
 	resize(latency: Time.Milli): void {
+		// In buffered mode the capacity is fixed; latency only moves the un-stall threshold.
+		if (this.#buffered) {
+			this.#latencySamples = Math.ceil(this.rate * Time.Second.fromMilli(latency));
+			return;
+		}
+
 		const newCapacity = Math.ceil(this.rate * Time.Second.fromMilli(latency));
 		if (newCapacity === this.capacity) return;
 		if (newCapacity === 0) throw new Error("empty buffer");
@@ -80,6 +111,14 @@ export class AudioRingBuffer {
 		let start = Math.round(Time.Second.fromMicro(timestamp) * this.rate);
 		let samples = data[0].length;
 
+		// Buffered mode: anchor both indices to the first sample so we play from its
+		// timestamp instead of gap-filling silence from index 0 to a large timestamp.
+		if (this.#buffered && !this.#anchored) {
+			this.#readIndex = start;
+			this.#writeIndex = start;
+			this.#anchored = true;
+		}
+
 		// Ignore samples that are too old (before the read index)
 		let offset = this.#readIndex - start;
 		if (offset > samples) {
@@ -137,6 +176,20 @@ export class AudioRingBuffer {
 		if (end > this.#writeIndex) {
 			this.#writeIndex = end;
 		}
+
+		// Start playback once we've buffered the latency target. In buffered mode the cap
+		// is large, so we usually un-stall here rather than via the overflow path above.
+		if (this.#buffered && this.length >= this.#latencySamples) {
+			this.#stalled = false;
+		}
+	}
+
+	// Flush all buffered samples and re-stall, ready to anchor the next utterance.
+	reset(): void {
+		this.#readIndex = 0;
+		this.#writeIndex = 0;
+		this.#stalled = true;
+		this.#anchored = false;
 	}
 
 	read(output: Float32Array[]): number {
diff --git a/js/watch/src/audio/shared-ring-buffer.test.ts b/js/watch/src/audio/shared-ring-buffer.test.ts
index d7b8f8a0bd..49129915ed 100644
--- a/js/watch/src/audio/shared-ring-buffer.test.ts
+++ b/js/watch/src/audio/shared-ring-buffer.test.ts
@@ -564,3 +564,69 @@ describe("SharedRingBuffer.resize", () => {
 		}
 	});
 });
+
+describe("buffered mode", () => {
+	function createBuffered(latency: number) {
+		// Capacity large enough to hold a whole utterance without overflow.
+		const init = allocSharedRingBuffer(1, 10000, 1000, true);
+		const buffer = new SharedRingBuffer(init);
+		buffer.setLatency(latency);
+		return buffer;
+	}
+
+	it("anchors to the first frame instead of index 0", () => {
+		const buffer = createBuffered(50);
+		// First frame at a future timestamp; READ should snap to it, not gap-fill from 0.
+		insert(buffer, 2000, 100, { channels: 1, value: 0.1 });
+		expect(Time.Milli.fromMicro(buffer.timestamp)).toBe(2000 as Time.Milli);
+		expect(buffer.stalled).toBe(false); // 100 buffered >= 50 latency
+	});
+
+	it("plays through the whole buffer without skipping ahead", () => {
+		const buffer = createBuffered(50);
+		// Dump a 1s utterance faster than real-time with consecutive future timestamps.
+		for (let i = 0; i < 10; i++) {
+			insert(buffer, 2000 + i * 100, 100, { channels: 1, value: (i + 1) / 10 });
+		}
+		expect(buffer.length).toBe(1000);
+
+		// Read the oldest frame first; a non-buffered ring would have skipped to write-latency.
+		const first = read(buffer, 100, 1);
+		expect(first[0][0]).toBeCloseTo(0.1, 5);
+		expect(Time.Milli.fromMicro(buffer.timestamp)).toBe(2100 as Time.Milli);
+
+		const second = read(buffer, 100, 1);
+		expect(second[0][0]).toBeCloseTo(0.2, 5);
+	});
+
+	it("reset re-stalls and re-anchors to the next utterance", () => {
+		const buffer = createBuffered(50);
+		insert(buffer, 2000, 100, { channels: 1, value: 0.1 });
+		read(buffer, 50, 1);
+
+		buffer.reset();
+		expect(buffer.stalled).toBe(true);
+
+		// A new utterance with its own timestamps anchors fresh.
+		insert(buffer, 500, 100, { channels: 1, value: 0.9 });
+		expect(Time.Milli.fromMicro(buffer.timestamp)).toBe(500 as Time.Milli);
+		const out = read(buffer, 100, 1);
+		expect(out[0][0]).toBeCloseTo(0.9, 5);
+	});
+
+	it("drops the oldest samples once the buffer exceeds the cap", () => {
+		// 200-sample capacity at 1000Hz = a 200ms cap.
+		const init = allocSharedRingBuffer(1, 200, 1000, true);
+		const buffer = new SharedRingBuffer(init);
+		buffer.setLatency(50);
+
+		insert(buffer, 0, 100, { channels: 1, value: 0.1 }); // [0, 100)
+		insert(buffer, 100, 100, { channels: 1, value: 0.2 }); // [100, 200)
+		insert(buffer, 200, 100, { channels: 1, value: 0.3 }); // exceeds cap; drops [0, 100)
+
+		// READ skipped forward to stay within the cap; oldest frame is gone.
+		expect(Time.Milli.fromMicro(buffer.timestamp)).toBe(100 as Time.Milli);
+		expect(read(buffer, 100, 1)[0][0]).toBeCloseTo(0.2, 5);
+		expect(read(buffer, 100, 1)[0][0]).toBeCloseTo(0.3, 5);
+	});
+});
diff --git a/js/watch/src/audio/shared-ring-buffer.ts b/js/watch/src/audio/shared-ring-buffer.ts
index 2954fd7729..2add1419b1 100644
--- a/js/watch/src/audio/shared-ring-buffer.ts
+++ b/js/watch/src/audio/shared-ring-buffer.ts
@@ -13,9 +13,16 @@ export interface SharedRingBufferInit {
 	rate: number;
 	samples: SharedArrayBuffer; // channels * capacity * Float32Array.BYTES_PER_ELEMENT bytes
 	control: SharedArrayBuffer; // CONTROL_SLOTS * Int32Array.BYTES_PER_ELEMENT bytes
+	// Buffered mode: anchor to the first sample and never skip ahead on read.
+	buffered: boolean;
 }
 
-export function allocSharedRingBuffer(channels: number, capacity: number, rate: number): SharedRingBufferInit {
+export function allocSharedRingBuffer(
+	channels: number,
+	capacity: number,
+	rate: number,
+	buffered = false,
+): SharedRingBufferInit {
 	if (channels <= 0) throw new Error("invalid channels");
 	if (capacity <= 0) throw new Error("invalid capacity");
 	if (rate <= 0) throw new Error("invalid sample rate");
@@ -27,7 +34,7 @@ export function allocSharedRingBuffer(channels: number, capacity: number, rate:
 	const ctrl = new Int32Array(control);
 	Atomics.store(ctrl, STALLED, 1);
 
-	return { channels, capacity, rate, samples, control };
+	return { channels, capacity, rate, samples, control, buffered };
 }
 
 /** Modular i32 max: returns a if a is ahead of b, else b. */
@@ -58,15 +65,20 @@ export class SharedRingBuffer {
 	readonly channels: number;
 	readonly capacity: number;
 	readonly rate: number;
+	readonly buffered: boolean;
 	readonly init: SharedRingBufferInit;
 
 	#control: Int32Array;
 	#samples: Float32Array[];
 
+	// Whether READ/WRITE have been anchored to the first inserted sample (buffered mode).
+	#anchored = false;
+
 	constructor(init: SharedRingBufferInit) {
 		this.channels = init.channels;
 		this.capacity = init.capacity;
 		this.rate = init.rate;
+		this.buffered = init.buffered;
 		this.init = init;
 
 		this.#control = new Int32Array(init.control);
@@ -89,6 +101,14 @@ export class SharedRingBuffer {
 		const originalLength = data[0].length;
 		let offset = 0;
 
+		// Buffered mode: anchor READ/WRITE to the first sample so playback starts at its
+		// timestamp, instead of skipping ahead or gap-filling silence from index 0.
+		if (this.buffered && !this.#anchored) {
+			Atomics.store(this.#control, READ, start | 0);
+			Atomics.store(this.#control, WRITE, start | 0);
+			this.#anchored = true;
+		}
+
 		const end = (start + originalLength) | 0;
 
 		// Trim old: discard samples before the read index
@@ -158,8 +178,9 @@ export class SharedRingBuffer {
 
 		// Latency skip: if buffered data exceeds LATENCY, skip ahead.
 		// CAS ensures we never step backward relative to a concurrent writer advance.
+		// Disabled in buffered mode, where we deliberately play through the whole buffer.
 		const buffered = (write - read) | 0;
-		if (latency > 0 && buffered > latency) {
+		if (!this.buffered && latency > 0 && buffered > latency) {
 			const skipTo = (write - latency) | 0;
 			read = casAdvance(this.#control, READ, skipTo);
 		}
@@ -188,6 +209,17 @@ export class SharedRingBuffer {
 		Atomics.store(this.#control, LATENCY, samples);
 	}
 
+	/**
+	 * Flush buffered samples and re-stall, ready to anchor the next utterance (buffered mode).
+	 * Main thread only. The worklet reader sees STALLED and stops until the next insert.
+	 */
+	reset(): void {
+		this.#anchored = false;
+		Atomics.store(this.#control, STALLED, 1);
+		const write = Atomics.load(this.#control, WRITE);
+		Atomics.store(this.#control, READ, write);
+	}
+
 	/**
 	 * Allocate a new ring with `newCapacity` samples and copy the unread window
 	 * [READ, WRITE) plus control state into it. Used when growing capacity so
@@ -201,8 +233,9 @@ export class SharedRingBuffer {
 	 * by READ/WRITE elsewhere.
 	 */
 	resize(newCapacity: number): SharedRingBuffer {
-		const init = allocSharedRingBuffer(this.channels, newCapacity, this.rate);
+		const init = allocSharedRingBuffer(this.channels, newCapacity, this.rate, this.buffered);
 		const dst = new SharedRingBuffer(init);
+		dst.#anchored = this.#anchored;
 
 		const read = Atomics.load(this.#control, READ);
 		const write = Atomics.load(this.#control, WRITE);
diff --git a/js/watch/src/backend.ts b/js/watch/src/backend.ts
index 5f3c712dbd..fae2f724ca 100644
--- a/js/watch/src/backend.ts
+++ b/js/watch/src/backend.ts
@@ -36,19 +36,38 @@ export interface Backend {
 	// Audio specific signals.
 	audio?: Audio.Backend;
 
-	// The latency setting: "real-time" auto-computes jitter, a number sets a fixed jitter.
-	latency: Signal<Latency>;
+	// The latency floor: "real-time" auto-computes jitter, a number sets a fixed jitter.
+	latencyMin: Signal<Latency>;
+
+	// The latency ceiling: "real-time" (default) caps at the RTT jitter (minimize), a number
+	// caps at that many ms, `undefined` is uncapped. A ceiling above the floor enables buffered
+	// playback: build up a buffer from future-dated frames instead of skipping ahead.
+	latencyMax: Signal<Latency | undefined>;
 
 	// The jitter buffer in milliseconds.
 	jitter: Signal<Moq.Time.Milli>;
+
+	// Derived: whether buffered playback is active (ceiling above floor).
+	buffered: Signal<boolean>;
+
+	// Re-anchor playback (and flush the audio buffer) at an utterance boundary in buffered mode.
+	reset(): void;
 }
 
 export interface MultiBackendProps {
 	element?: HTMLCanvasElement | HTMLVideoElement | Signal<HTMLCanvasElement | HTMLVideoElement | undefined>;
 	broadcast?: Broadcast | Signal<Broadcast | undefined>;
 
-	// Latency: "real-time" auto-computes jitter from RTT, a number sets a fixed jitter in ms.
+	// Latency floor (the jitter buffer). "real-time" derives it from RTT, a number fixes it.
+	// `latency` is sugar that collapses the floor and ceiling to the same value.
 	latency?: Latency | Signal<Latency>;
+	latencyMin?: Latency | Signal<Latency>;
+
+	// Latency ceiling: "real-time" (default) minimizes, a number caps at that many ms, `undefined`
+	// is uncapped. A ceiling above the floor enables buffered playback: build up a buffer from
+	// future-dated frames (e.g. TTS) instead of minimizing latency. Call `reset()` at each
+	// utterance boundary to re-anchor.
+	latencyMax?: Latency | Signal<Latency | undefined>;
 
 	// Established connection, used by Sync to read RTT (PROBE) for dynamic jitter in "real-time" mode.
 	connection?: Signal<Moq.Connection.Established | undefined>;
@@ -108,8 +127,10 @@ class AudioBackend implements Audio.Backend {
 export class MultiBackend implements Backend {
 	element = new Signal<HTMLCanvasElement | HTMLVideoElement | undefined>(undefined);
 	broadcast: Signal<Broadcast | undefined>;
-	latency: Signal<Latency>;
+	latencyMin: Signal<Latency>;
+	latencyMax: Signal<Latency | undefined>;
 	jitter: Signal<Moq.Time.Milli>;
+	buffered: Signal<boolean>;
 	paused: Signal<boolean>;
 
 	video: VideoBackend;
@@ -118,6 +139,9 @@ export class MultiBackend implements Backend {
 	audio: AudioBackend;
 	#audioSource: Audio.Source;
 
+	// The active WebCodecs audio decoder, used to flush the buffer on `reset()`.
+	#audioDecoder?: Audio.Decoder;
+
 	// Used to sync audio and video playback at a target delay.
 	sync: Sync;
 
@@ -126,9 +150,15 @@ export class MultiBackend implements Backend {
 	constructor(props?: MultiBackendProps) {
 		this.element = Signal.from(props?.element);
 		this.broadcast = Signal.from(props?.broadcast);
-		this.sync = new Sync({ latency: props?.latency, connection: props?.connection });
-		this.latency = this.sync.latency;
+		this.sync = new Sync({
+			latencyMin: props?.latencyMin ?? props?.latency,
+			latencyMax: props?.latencyMax,
+			connection: props?.connection,
+		});
+		this.latencyMin = this.sync.latencyMin;
+		this.latencyMax = this.sync.latencyMax;
 		this.jitter = this.sync.jitter;
+		this.buffered = this.sync.buffered;
 
 		this.#videoSource = new Video.Source(this.sync, {
 			broadcast: this.broadcast,
@@ -159,6 +189,7 @@ export class MultiBackend implements Backend {
 	#runWebcodecs(effect: Effect, element: HTMLCanvasElement): void {
 		const videoSource = new Video.Decoder(this.#videoSource);
 		const audioSource = new Audio.Decoder(this.#audioSource);
+		this.#audioDecoder = audioSource;
 
 		const audioEmitter = new Audio.Emitter(audioSource, {
 			volume: this.audio.volume,
@@ -176,6 +207,7 @@ export class MultiBackend implements Backend {
 			audioSource.close();
 			audioEmitter.close();
 			videoRenderer.close();
+			this.#audioDecoder = undefined;
 		});
 
 		// Proxy the read only signals to the backend.
@@ -218,6 +250,13 @@ export class MultiBackend implements Backend {
 		effect.proxy(this.audio.context, audio.context);
 	}
 
+	// Re-anchor playback at an utterance boundary in buffered mode: reset the sync reference
+	// and flush the audio buffer so the next utterance plays from its own first frame.
+	reset(): void {
+		this.sync.reset();
+		this.#audioDecoder?.reset();
+	}
+
 	close(): void {
 		this.signals.close();
 		this.#videoSource.close();
diff --git a/js/watch/src/element.ts b/js/watch/src/element.ts
index d4f8798d41..fbf13611fe 100644
--- a/js/watch/src/element.ts
+++ b/js/watch/src/element.ts
@@ -6,7 +6,19 @@ import { MultiBackend } from "./backend";
 import { Broadcast, type CatalogFormat, parseCatalogFormat } from "./broadcast";
 import type { Latency } from "./sync";
 
-const OBSERVED = ["url", "name", "paused", "volume", "muted", "reload", "latency", "jitter", "catalog-format"] as const;
+const OBSERVED = [
+	"url",
+	"name",
+	"paused",
+	"volume",
+	"muted",
+	"reload",
+	"latency",
+	"latency-min",
+	"latency-max",
+	"jitter",
+	"catalog-format",
+] as const;
 type Observed = (typeof OBSERVED)[number];
 
 // Close everything when this element is garbage collected.
@@ -113,8 +125,8 @@ export default class MoqWatch extends HTMLElement {
 		});
 
 		this.signals.run((effect) => {
-			const latency = effect.get(this.backend.latency);
-			if (latency === "real-time") {
+			const min = effect.get(this.backend.latencyMin);
+			if (min === "real-time") {
 				this.setAttribute("latency", "real-time");
 			} else {
 				const jitter = Math.floor(effect.get(this.backend.jitter));
@@ -161,9 +173,18 @@ export default class MoqWatch extends HTMLElement {
 		this.#enabled.set(false);
 	}
 
-	#setLatencyNumber(value: string | null) {
-		const parsed = value ? Number.parseFloat(value) : Number.NaN;
-		this.backend.latency.set((Number.isFinite(parsed) ? parsed : 100) as Time.Milli);
+	#parseLatency(value: string | null): Latency {
+		if (!value || value === "real-time") return "real-time";
+		const parsed = Number.parseFloat(value);
+		return (Number.isFinite(parsed) ? parsed : 100) as Time.Milli;
+	}
+
+	#parseLatencyMax(value: string | null): Latency | undefined {
+		// Absent or "real-time" minimizes; "none"/"infinite" is uncapped; a number caps in ms.
+		if (value === null || value === "real-time") return "real-time";
+		if (value === "none" || value === "infinite") return undefined;
+		const parsed = Number.parseFloat(value);
+		return Number.isFinite(parsed) ? (parsed as Time.Milli) : "real-time";
 	}
 
 	attributeChangedCallback(name: Observed, oldValue: string | null, newValue: string | null) {
@@ -185,14 +206,15 @@ export default class MoqWatch extends HTMLElement {
 		} else if (name === "reload") {
 			this.broadcast.reload.set(newValue !== null);
 		} else if (name === "latency") {
-			if (!newValue || newValue === "real-time") {
-				this.backend.latency.set("real-time");
-			} else {
-				this.#setLatencyNumber(newValue);
-			}
+			// Sugar: collapse the floor and ceiling to a single value.
+			this.latency = this.#parseLatency(newValue);
+		} else if (name === "latency-min") {
+			this.backend.latencyMin.set(this.#parseLatency(newValue));
+		} else if (name === "latency-max") {
+			this.backend.latencyMax.set(this.#parseLatencyMax(newValue));
 		} else if (name === "jitter") {
 			// Deprecated: use latency="<number>" instead.
-			this.#setLatencyNumber(newValue);
+			this.latency = this.#parseLatency(newValue);
 		} else if (name === "catalog-format") {
 			this.broadcast.catalogFormat.set(parseCatalogFormat(newValue));
 		} else {
@@ -249,12 +271,37 @@ export default class MoqWatch extends HTMLElement {
 		this.broadcast.reload.set(value);
 	}
 
+	/** The latency target. Setting it collapses the floor and ceiling to the same value (minimize). */
 	get latency(): Latency {
-		return this.backend.latency.peek();
+		return this.backend.latencyMin.peek();
 	}
 
 	set latency(value: Latency) {
-		this.backend.latency.set(value);
+		this.backend.latencyMin.set(value);
+		this.backend.latencyMax.set(value);
+	}
+
+	/** The latency floor (jitter buffer). Same as `latency` but leaves the ceiling untouched. */
+	get latencyMin(): Latency {
+		return this.backend.latencyMin.peek();
+	}
+
+	set latencyMin(value: Latency) {
+		this.backend.latencyMin.set(value);
+	}
+
+	/**
+	 * The latency ceiling: `"real-time"` (default) minimizes, a number caps at that many ms, and
+	 * `undefined` is uncapped. A ceiling above the floor enables buffered playback: build up a
+	 * buffer from future-dated frames (e.g. TTS written faster than real-time) instead of skipping
+	 * ahead. Beyond the ceiling playback skips ahead. Call `reset()` at each utterance boundary.
+	 */
+	get latencyMax(): Latency | undefined {
+		return this.backend.latencyMax.peek();
+	}
+
+	set latencyMax(value: Latency | undefined) {
+		this.backend.latencyMax.set(value);
 	}
 
 	/** The jitter buffer in milliseconds. */
@@ -264,7 +311,12 @@ export default class MoqWatch extends HTMLElement {
 
 	/** @deprecated Use `latency = <number>` instead. */
 	set jitter(value: number) {
-		this.backend.latency.set(value as Time.Milli);
+		this.latency = value as Time.Milli;
+	}
+
+	/** Re-anchor playback and flush the audio buffer at an utterance boundary (buffered mode). */
+	reset(): void {
+		this.backend.reset();
 	}
 
 	get catalogFormat(): CatalogFormat | undefined {
diff --git a/js/watch/src/sync.test.ts b/js/watch/src/sync.test.ts
new file mode 100644
index 0000000000..945a4d6d67
--- /dev/null
+++ b/js/watch/src/sync.test.ts
@@ -0,0 +1,62 @@
+import { describe, expect, it } from "bun:test";
+import type { Time } from "@moq/net";
+import { Sync } from "./sync";
+
+// Effects in @moq/signals flush on a microtask, so let pending updates drain before asserting.
+const flush = () => new Promise((resolve) => setTimeout(resolve, 0));
+
+describe("latency range", () => {
+	it("is collapsed by default (no ceiling)", async () => {
+		const sync = new Sync();
+		await flush();
+		expect(sync.buffered.peek()).toBe(false);
+		sync.close();
+	});
+
+	it("enters buffered mode when the ceiling is above the floor", async () => {
+		const sync = new Sync({ latencyMax: 30_000 as Time.Milli });
+		await flush();
+		expect(sync.buffered.peek()).toBe(true);
+		expect(sync.maxBuffer.peek()).toBe(30_000 as Time.Milli);
+		sync.close();
+	});
+
+	it("stays collapsed when the ceiling is at or below the floor", async () => {
+		// Fixed 200ms floor sits above the 100ms ceiling, so there's no room to buffer.
+		const sync = new Sync({ latencyMin: 200 as Time.Milli, latencyMax: 100 as Time.Milli });
+		await flush();
+		expect(sync.buffered.peek()).toBe(false);
+		sync.close();
+	});
+
+	it("reacts to a ceiling set after construction", async () => {
+		const sync = new Sync();
+		await flush();
+		expect(sync.buffered.peek()).toBe(false);
+
+		sync.latencyMax.set(30_000 as Time.Milli);
+		await flush();
+		expect(sync.buffered.peek()).toBe(true);
+		sync.close();
+	});
+
+	it("treats an undefined ceiling as uncapped", async () => {
+		const sync = new Sync({ latencyMax: undefined });
+		await flush();
+		// Undefined ceiling means buffer indefinitely (no cap), not collapse.
+		expect(sync.buffered.peek()).toBe(false); // props undefined falls back to the "real-time" default
+
+		sync.latencyMax.set(undefined);
+		await flush();
+		expect(sync.buffered.peek()).toBe(true);
+		expect(sync.maxBuffer.peek()).toBeUndefined();
+		sync.close();
+	});
+
+	it("stays collapsed for an explicit real-time ceiling", async () => {
+		const sync = new Sync({ latencyMax: "real-time" });
+		await flush();
+		expect(sync.buffered.peek()).toBe(false);
+		sync.close();
+	});
+});
diff --git a/js/watch/src/sync.ts b/js/watch/src/sync.ts
index 505a9967f4..22b320023a 100644
--- a/js/watch/src/sync.ts
+++ b/js/watch/src/sync.ts
@@ -2,14 +2,22 @@ import type * as Moq from "@moq/net";
 import { Time } from "@moq/net";
 import { Effect, Signal } from "@moq/signals";
 
-/** Latency: `"real-time"` auto-computes jitter from RTT; a `Time.Milli` sets a fixed jitter. */
+/** Latency floor: `"real-time"` auto-computes jitter from RTT; a `Time.Milli` sets a fixed jitter. */
 export type Latency = "real-time" | Time.Milli;
 
 const MIN_JITTER = 20 as Time.Milli;
 const FALLBACK_JITTER = 100 as Time.Milli;
 
 export interface SyncProps {
-	latency?: Latency | Signal<Latency>;
+	// Latency floor: the jitter/startup buffer. Playback un-stalls once this much is buffered
+	// and never deliberately drops below it. `"real-time"` derives it from RTT.
+	latencyMin?: Latency | Signal<Latency>;
+
+	// Latency ceiling: "real-time" (default) caps at the RTT jitter (= minimize), a number caps
+	// at that many ms, and `undefined` is uncapped (buffer indefinitely). While the buffer stays
+	// under the ceiling we never skip ahead, so faster-than-real-time frames (e.g. TTS) build up.
+	latencyMax?: Latency | Signal<Latency | undefined>;
+
 	connection?: Signal<Moq.Connection.Established | undefined>;
 	audio?: Time.Milli | Signal<Time.Milli | undefined>;
 	video?: Time.Milli | Signal<Time.Milli | undefined>;
@@ -21,18 +29,33 @@ export class Sync {
 	#reference = new Signal<Time.Milli | undefined>(undefined);
 	readonly reference: Signal<Time.Milli | undefined> = this.#reference;
 
-	// The latency setting: "real-time" auto-computes jitter from RTT, a number sets a fixed jitter.
-	latency: Signal<Latency>;
+	// The latency floor: "real-time" auto-computes jitter from RTT, a number sets a fixed jitter.
+	latencyMin: Signal<Latency>;
+
+	// The latency ceiling: "real-time" (default) caps at the RTT-derived jitter (= minimize),
+	// a number caps at that many ms, and `undefined` means no cap (buffer indefinitely).
+	latencyMax: Signal<Latency | undefined>;
 
 	// The jitter buffer in milliseconds (always numeric).
 	// In "real-time" mode this is updated automatically from RTT.
-	// When latency is a number, jitter equals that number.
+	// When latencyMin is a number, jitter equals that number.
 	jitter: Signal<Time.Milli>;
 
 	// Any additional delay required for audio or video.
 	audio: Signal<Time.Milli | undefined>;
 	video: Signal<Time.Milli | undefined>;
 
+	// Derived: true when the ceiling sits above the floor (or is uncapped). Buffered playback
+	// lets the reference stay anchored so future-dated frames build up a buffer, re-anchoring
+	// (skipping ahead) only when latency would exceed the ceiling. See `reset()`.
+	#buffered = new Signal<boolean>(false);
+	readonly buffered: Signal<boolean> = this.#buffered;
+
+	// Derived cap on buffered audio, consumed by the audio ring. A number is the ceiling in ms;
+	// `undefined` means uncapped (the ring bounds memory itself and applies backpressure).
+	#maxBuffer = new Signal<Time.Milli | undefined>(undefined);
+	readonly maxBuffer: Signal<Time.Milli | undefined> = this.#maxBuffer;
+
 	// The total buffer required: jitter + max(audio, video).
 	#buffer = new Signal<Time.Milli>(Time.Milli.zero);
 	readonly buffer: Signal<Time.Milli> = this.#buffer;
@@ -57,7 +80,9 @@ export class Sync {
 	signals = new Effect();
 
 	constructor(props?: SyncProps) {
-		this.latency = Signal.from(props?.latency ?? ("real-time" as Latency));
+		this.latencyMin = Signal.from(props?.latencyMin ?? ("real-time" as Latency));
+		// Default ceiling tracks the floor ("real-time"), i.e. minimize latency.
+		this.latencyMax = Signal.from(props?.latencyMax ?? ("real-time" as Latency));
 		this.jitter = new Signal<Time.Milli>(FALLBACK_JITTER);
 		this.#connection = props?.connection;
 		this.audio = Signal.from(props?.audio);
@@ -67,13 +92,44 @@ export class Sync {
 
 		this.signals.run(this.#runJitter.bind(this));
 		this.signals.run(this.#runBuffer.bind(this));
+		this.signals.run(this.#runRange.bind(this));
+	}
+
+	// Derive `buffered` / `maxBuffer` from the floor (`buffer`) and the ceiling (`latencyMax`).
+	#runRange(effect: Effect): void {
+		const max = effect.get(this.latencyMax);
+		const floor = effect.get(this.buffer);
+
+		if (max === undefined) {
+			// Uncapped: buffer indefinitely (the ring bounds memory and applies backpressure).
+			this.#buffered.set(true);
+			this.#maxBuffer.set(undefined);
+		} else if (max === "real-time") {
+			// Ceiling tracks the floor: minimize latency, the live default.
+			this.#buffered.set(false);
+			this.#maxBuffer.set(floor);
+		} else {
+			// Buffered only when the ceiling is above the floor; otherwise it collapses to minimize.
+			this.#buffered.set(max > floor);
+			this.#maxBuffer.set(Time.Milli.max(max, floor));
+		}
+	}
+
+	// The maximum total latency (lookahead + floor) we tolerate before re-anchoring, in ms.
+	// `Infinity` when uncapped. Used by `received()` to decide when to skip ahead.
+	#latencyCap(): number {
+		const max = this.latencyMax.peek();
+		const floor = this.#buffer.peek();
+		if (max === undefined) return Number.POSITIVE_INFINITY;
+		if (max === "real-time") return floor;
+		return Math.max(max, floor);
 	}
 
 	#runJitter(effect: Effect): void {
-		const latency = effect.get(this.latency);
+		const latency = effect.get(this.latencyMin);
 
 		if (typeof latency === "number") {
-			// Fixed mode: latency value is the jitter.
+			// Fixed mode: the floor value is the jitter.
 			this.#minRtt = undefined;
 			this.jitter.set(latency);
 			return;
@@ -110,47 +166,70 @@ export class Sync {
 		this.#update = Promise.withResolvers();
 	}
 
-	// Update the reference if this is the earliest frame we've seen, relative to its timestamp.
+	// Fold a newly received frame into the reference. The reference anchors playback to the
+	// wall clock; we lower it (skip ahead) only when keeping it would push latency past the cap.
 	received(timestamp: Time.Milli, label = ""): void {
 		this.timestamp.update((current) => (current === undefined || timestamp > current ? timestamp : current));
 		const now = Time.Milli.now();
 		const ref = Time.Milli.sub(now, timestamp);
 		const currentRef = this.#reference.peek();
 
-		if (currentRef !== undefined) {
-			// Check if `wait()` would not sleep at all.
-			// NOTE: We check here instead of in `wait()` so we can identify when frames are received late.
-			// Otherwise, chained `wait()` calls would cause a false-positive during CPU starvation.
-			const sleep = Time.Milli.add(Time.Milli.sub(currentRef, ref), this.#buffer.peek());
-			if (sleep < 0) {
-				const entry = this.#late.get(label);
-				if (entry) {
-					entry.count++;
-					entry.maxMs = Math.max(entry.maxMs, -sleep);
-				} else {
-					this.#late.set(label, { count: 1, maxMs: -sleep });
-				}
+		// First frame anchors the reference.
+		if (currentRef === undefined) {
+			this.#setReference(ref);
+			return;
+		}
+
+		// Check if `wait()` would not sleep at all.
+		// NOTE: We check here instead of in `wait()` so we can identify when frames are received late.
+		// Otherwise, chained `wait()` calls would cause a false-positive during CPU starvation.
+		const floor = this.#buffer.peek();
+		const sleep = Time.Milli.add(Time.Milli.sub(currentRef, ref), floor);
+		if (sleep < 0) {
+			const entry = this.#late.get(label);
+			if (entry) {
+				entry.count++;
+				entry.maxMs = Math.max(entry.maxMs, -sleep);
 			} else {
-				const entry = this.#late.get(label);
-				if (entry) {
-					const prefix = label ? `sync[${label}]` : "sync";
-					const behind = Sync.#formatDuration(entry.maxMs);
-					console.debug(`${prefix}: ${entry.count} late frame(s), max ${behind} behind`);
-					this.#late.delete(label);
-				}
+				this.#late.set(label, { count: 1, maxMs: -sleep });
 			}
-
-			if (ref >= currentRef) {
-				// Our frame was not relatively newer than any other frame.
-				return;
+		} else {
+			const entry = this.#late.get(label);
+			if (entry) {
+				const prefix = label ? `sync[${label}]` : "sync";
+				const behind = Sync.#formatDuration(entry.maxMs);
+				console.debug(`${prefix}: ${entry.count} late frame(s), max ${behind} behind`);
+				this.#late.delete(label);
 			}
 		}
 
+		// Frame isn't earlier than the anchor: it can't lower latency, so keep the reference.
+		if (ref >= currentRef) return;
+
+		// Frame is earlier (more lookahead). `sleep` is the latency keeping the anchor would impose.
+		const cap = this.#latencyCap();
+		if (sleep <= cap) return; // within budget: let the buffer grow instead of skipping ahead
+
+		// Over the cap: re-anchor down so the resulting latency is exactly the cap.
+		this.#setReference(Time.Milli.add(ref, (cap - floor) as Time.Milli));
+	}
+
+	#setReference(ref: Time.Milli): void {
 		this.#reference.set(ref);
 		this.#update.resolve();
 		this.#update = Promise.withResolvers();
 	}
 
+	// Re-anchor playback to the next frame received. Call this at an utterance boundary
+	// in buffered mode (typically alongside flushing the audio buffer) so the new content
+	// plays from its own first frame instead of inheriting the previous reference.
+	reset(): void {
+		this.#reference.set(undefined);
+		this.#late.clear();
+		this.#update.resolve();
+		this.#update = Promise.withResolvers();
+	}
+
 	// The PTS that should be rendering right now, derived from the reference + buffer.
 	// Returns undefined if no frames have been received yet.
 	now(): Time.Milli | undefined {
diff --git a/js/watch/src/ui/components/buffer-control.ts b/js/watch/src/ui/components/buffer-control.ts
index b5d6f159f9..e578a1eed6 100644
--- a/js/watch/src/ui/components/buffer-control.ts
+++ b/js/watch/src/ui/components/buffer-control.ts
@@ -141,7 +141,7 @@ export function bufferControl(parent: Effect, watch: MoqWatch, max: Moq.Time.Mil
 		const ms = (x / trackWidth) * max;
 		const snapped = (Math.round(ms / RANGE_STEP) * RANGE_STEP) as Moq.Time.Milli;
 		const clamped = Math.max(MIN_RANGE, Math.min(max, snapped)) as Moq.Time.Milli;
-		watch.backend.latency.set(clamped);
+		watch.backend.latencyMin.set(clamped);
 	};
 
 	const interact = () => {
@@ -181,7 +181,7 @@ export function bufferControl(parent: Effect, watch: MoqWatch, max: Moq.Time.Mil
 		interact();
 		const current = watch.backend.jitter.peek();
 		const value = Math.max(MIN_RANGE, Math.min(max, current + delta)) as Moq.Time.Milli;
-		watch.backend.latency.set(value);
+		watch.backend.latencyMin.set(value);
 	});
 
 	const draw = () => {

From 134e468d7b1ba48798e6d3acf7cff307f6730e50 Mon Sep 17 00:00:00 2001
From: Luke Curley <kixelated@gmail.com>
Date: Wed, 17 Jun 2026 14:45:09 -0700
Subject: [PATCH 2/4] fix(watch): size the audio container consumer by the
 latency ceiling
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The audio Decoder's hang Container.Consumer was given the latency floor
(sync.buffer) as its skip threshold. In buffered playback — where the
producer writes faster than real-time with future PTS — the group span
legitimately exceeds the floor, so every group was skipped. Use the
ceiling (sync.maxBuffer) instead, falling back to the floor when uncapped.

Hold the value in a plain Signal driven by a running effect rather than a
computed: the Consumer only peek()s it (it never subscribes), and an
unsubscribed computed peeks as undefined, which makes the threshold NaN
and skips every group.
---
 js/watch/src/audio/decoder.ts | 23 +++++++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/js/watch/src/audio/decoder.ts b/js/watch/src/audio/decoder.ts
index 9a5b3e7c2c..60491a87d8 100644
--- a/js/watch/src/audio/decoder.ts
+++ b/js/watch/src/audio/decoder.ts
@@ -60,12 +60,31 @@ export class Decoder {
 
 	#signals = new Effect();
 
+	// How much buffered audio the container consumer retains before skipping
+	// ahead. This must be the latency CEILING (maxBuffer), not the floor
+	// (buffer): in buffered playback the producer writes faster than real-time
+	// with future PTS, so the group span legitimately exceeds the floor and
+	// would otherwise be skipped. Uncapped (maxBuffer undefined) has no finite
+	// ceiling to hand the consumer, so it falls back to the floor.
+	//
+	// Held in a plain Signal driven by a running effect (below) rather than a
+	// lazy `computed`: the container consumer only `.peek()`s this (it never
+	// subscribes), and an unsubscribed computed peeks as `undefined`, which
+	// would make the consumer's threshold NaN and skip every group.
+	#consumerLatency = new Signal<Time.Milli>(Time.Milli.zero);
+
 	constructor(source: Source, props?: DecoderProps) {
 		this.source = source;
 		this.source.supported.set(supported); // super hacky
 
 		this.enabled = Signal.from(props?.enabled ?? false);
 
+		this.#signals.run((effect) => {
+			const max = effect.get(this.source.sync.maxBuffer);
+			const floor = effect.get(this.source.sync.buffer);
+			this.#consumerLatency.set(max ?? floor);
+		});
+
 		this.#signals.run(this.#runWorklet.bind(this));
 		this.#signals.run(this.#runEnabled.bind(this));
 		this.#signals.run(this.#runLatency.bind(this));
@@ -196,7 +215,7 @@ export class Decoder {
 		// TODO include JITTER_UNDERHEAD
 		const consumer = new Container.Consumer(sub, {
 			format,
-			latency: this.source.sync.buffer,
+			latency: this.#consumerLatency,
 		});
 		effect.cleanup(() => consumer.close());
 
@@ -287,7 +306,7 @@ export class Decoder {
 
 		const consumer = new Container.Consumer(sub, {
 			format: new Container.Cmaf.Format(init),
-			latency: this.source.sync.buffer,
+			latency: this.#consumerLatency,
 		});
 		effect.cleanup(() => consumer.close());
 

From 0f2ceeb6be13e23dbca0a23eb95ec619cb2d1870 Mon Sep 17 00:00:00 2001
From: Luke Curley <kixelated@gmail.com>
Date: Wed, 17 Jun 2026 19:00:11 -0700
Subject: [PATCH 3/4] refactor(watch): unify latency into a single range type,
 drop uncapped buffering

Replace the parallel latencyMin/latencyMax signals with a single `latency`
value typed as `Bound | { min?: Bound; max?: Bound }` (Bound = "real-time" |
ms). A scalar collapses the range and minimizes latency (today's default and
today's type, so existing code keeps compiling); an object opens a range for
buffered playback. Add `latencyBounds` / `latencyFromBounds` helpers; the
element keeps `latency-min` / `latency-max` attributes and `latencyMin` /
`latencyMax` accessors as read-modify-write sugar over the one signal.

Drop the uncapped ("none") ceiling. The ceiling is always finite, so the audio
ring is simply sized to the cap and drops its oldest samples on overflow. That
removes the entire backpressure subsystem (Backpressure class, AudioBuffer.wait,
the decoder's await-before-decode, UNCAPPED_RING_MS) and every maxBuffer ===
undefined branch; maxBuffer is now a plain finite Time.Milli.

Guard the element's `latency` attribute reflection so it only writes the
collapsed sugar attribute when the range is actually collapsed, preventing a
round-trip that would clobber an open range.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 doc/lib/js/@moq/watch.md                     | 18 ++--
 js/watch/src/audio/buffer.ts                 | 97 ++------------------
 js/watch/src/audio/decoder.ts                | 15 +--
 js/watch/src/audio/render.ts                 |  2 +-
 js/watch/src/audio/ring-buffer.ts            |  5 +-
 js/watch/src/backend.ts                      | 30 ++----
 js/watch/src/element.ts                      | 65 ++++++-------
 js/watch/src/sync.test.ts                    | 31 +++----
 js/watch/src/sync.ts                         | 89 +++++++++---------
 js/watch/src/ui/components/buffer-control.ts |  4 +-
 js/watch/src/ui/components/latency.ts        |  7 +-
 11 files changed, 131 insertions(+), 232 deletions(-)

diff --git a/doc/lib/js/@moq/watch.md b/doc/lib/js/@moq/watch.md
index 2ae5ac5780..dc3310b282 100644
--- a/doc/lib/js/@moq/watch.md
+++ b/doc/lib/js/@moq/watch.md
@@ -70,9 +70,9 @@ a real bundler (the examples below).
 - `paused`: Pause playback (boolean)
 - `muted`: Mute audio (boolean)
 - `volume`: Audio volume (0 to 1, default: 1)
-- `latency`: Latency target. `"real-time"` (default) derives it from RTT, or a number sets a fixed jitter buffer in ms. Sugar for collapsing `latency-min` and `latency-max` to one value (minimize latency).
+- `latency`: Latency target. `"real-time"` (default) derives it from RTT, or a number sets a fixed jitter buffer in ms. Collapses `latency-min` and `latency-max` to one value (minimize latency).
 - `latency-min`: Latency floor (the jitter/startup buffer). Same units as `latency`; leaves the ceiling untouched.
-- `latency-max`: Latency ceiling. `"real-time"` (default) minimizes latency, a number caps at that many ms, and `"none"` is uncapped. A ceiling above the floor enables [buffered playback](#buffered-playback): build up a buffer from future-dated frames instead of skipping ahead.
+- `latency-max`: Latency ceiling. `"real-time"` (default) minimizes latency; a number caps at that many ms. A ceiling above the floor enables [buffered playback](#buffered-playback): build up a buffer from future-dated frames instead of skipping ahead.
 - `catalog-format`: Catalog format. One of `"hang"`, `"msf"` (see [MSF](/concept/standard/msf)), or `"manual"` (supply the catalog yourself). When omitted, the format is auto-detected from the broadcast `name` extension (`.hang` or `.msf`), falling back to `"hang"`.
 
 ## Catalog Formats
@@ -162,24 +162,28 @@ allowed to float anywhere between the floor and the ceiling without skipping:
 </moq-watch>
 ```
 
+In JavaScript, `latency` takes either a scalar (collapsed, minimize) or a range
+object. The `latencyMin` / `latencyMax` properties are read-modify-write sugar
+over the same `latency` value:
+
 ```typescript
 const el = document.querySelector("moq-watch")!;
+el.latency = { min: 100, max: 30_000 }; // floor 100ms, ceiling 30s
+// equivalently, set the bounds independently:
 el.latencyMin = 100;     // floor: start after 100ms buffered
 el.latencyMax = 30_000;  // ceiling: never skip until 30s buffered
 ```
 
 `latency-min` is the jitter/startup buffer (it can also be `"real-time"` for an
-adaptive floor). `latency-max` is the ceiling, and it has three forms:
+adaptive floor). `latency-max` is the ceiling, and it has two forms:
 
 - a **number** (ms): buffer freely up to the cap, then skip ahead, so latency
   stays at most that far behind the newest frame.
-- **`"none"`** (`el.latencyMax = undefined` in JS): uncapped. Playback never skips
-  ahead. The decoded audio ring stays small (~1.5s); the lookahead is held upstream
-  as encoded frames, and the decoder applies backpressure (stops decoding ahead)
-  rather than dropping audio or buffering seconds of PCM.
 - **`"real-time"`** (the default) or any value `<= latency-min`: collapsed, i.e.
   today's minimize-latency behavior.
 
+The ceiling is always finite: the buffer is bounded by `latency-max`, and once it
+fills the audio ring drops its oldest samples rather than growing without limit.
 The mechanism is the same in every case: the playhead is anchored on the first
 frame and only re-anchored (skipped forward) when keeping it would push latency
 past `latency-max`. Minimize is just the degenerate case where the ceiling equals
diff --git a/js/watch/src/audio/buffer.ts b/js/watch/src/audio/buffer.ts
index 752528cae3..60d2b4eb46 100644
--- a/js/watch/src/audio/buffer.ts
+++ b/js/watch/src/audio/buffer.ts
@@ -3,54 +3,9 @@ import { Effect, type Getter, Signal } from "@moq/signals";
 import type { Data, InitPost, InitShared, Latency, Reset, State } from "./render";
 import { allocSharedRingBuffer, SharedRingBuffer } from "./shared-ring-buffer";
 
-// Ring capacity (ms) when buffering is uncapped. The decoded PCM ring stays small; the
-// real lookahead lives upstream as encoded frames. On the SharedArrayBuffer path `wait()`
-// applies backpressure (holding encoded frames) once decoding would run this far ahead.
-const UNCAPPED_RING_MS = 1500 as Time.Milli;
-
-// Headroom below capacity so a frame mid-decode doesn't overflow the small ring.
-const RING_MARGIN_MS = 250 as Time.Milli;
-
-/**
- * Timestamp-based backpressure for the uncapped buffered ring. `wait(timestamp)` stays pending
- * until the playhead reaches `timestamp - (capacity - margin)`, so the decoder holds a frame (as
- * encoded Opus) instead of decoding it too far ahead of the small PCM ring. Both transports share
- * this; they differ only in how they observe the playhead (Atomics poll vs worklet state messages).
- */
-class Backpressure {
-	readonly #enabled: boolean;
-	readonly #headroom: Time.Micro;
-	#waiters: Array<{ threshold: Time.Micro; resolve: () => void }> = [];
-
-	constructor(enabled: boolean, capacityMs: Time.Milli | undefined) {
-		this.#enabled = enabled;
-		const headroomMs = Math.max(0, (capacityMs ?? 0) - RING_MARGIN_MS) as Time.Milli;
-		this.#headroom = Time.Micro.fromMilli(headroomMs);
-	}
-
-	wait(timestamp: Time.Micro, playhead: Time.Micro): Promise<void> {
-		if (!this.#enabled) return Promise.resolve();
-		const threshold = (timestamp - this.#headroom) as Time.Micro;
-		if (playhead >= threshold) return Promise.resolve();
-		return new Promise((resolve) => this.#waiters.push({ threshold, resolve }));
-	}
-
-	// Resolve every waiter the playhead has reached.
-	advance(playhead: Time.Micro): void {
-		if (this.#waiters.length === 0) return;
-		this.#waiters = this.#waiters.filter(({ threshold, resolve }) => {
-			if (playhead < threshold) return true;
-			resolve();
-			return false;
-		});
-	}
-
-	// Resolve everything unconditionally (reset/close): never strand a decode loop.
-	flush(): void {
-		for (const { resolve } of this.#waiters) resolve();
-		this.#waiters = [];
-	}
-}
+// Ring capacity (ms) when buffered but no cap was supplied. The ceiling is always finite, so this
+// is just a defensive fallback; in practice the decoder always passes the derived `maxBuffer`.
+const DEFAULT_RING_MS = 1500 as Time.Milli;
 
 /**
  * Unified interface for the audio buffer between the main thread and the AudioWorklet.
@@ -74,14 +29,6 @@ export interface AudioBuffer {
 	/** Flush buffered samples and re-stall, ready to anchor the next utterance (buffered mode). */
 	reset(): void;
 
-	/**
-	 * Resolve once there's room to insert a frame at `timestamp`. In uncapped buffered mode this
-	 * applies backpressure: it stays pending while decoding `timestamp` would run too far ahead of
-	 * the playhead for the small ring, so the caller holds the (encoded) frame instead of decoding
-	 * it. Resolves immediately when capped or live (the ring bounds itself).
-	 */
-	wait(timestamp: Time.Micro): Promise<void>;
-
 	/** Current playback timestamp (derived from reader position). */
 	readonly timestamp: Getter<Time.Micro>;
 
@@ -111,7 +58,7 @@ export function createAudioBuffer(
 	rate: number,
 	latencySamples: number,
 	buffered = false,
-	// undefined = uncapped (only meaningful when buffered).
+	// The buffered-mode cap in ms (sizes the ring); ignored when not buffered.
 	maxBuffer?: Time.Milli,
 ): AudioBuffer {
 	if (supportsSharedArrayBuffer()) {
@@ -135,8 +82,6 @@ class SharedAudioBuffer implements AudioBuffer {
 	readonly #stalled = new Signal<boolean>(true);
 	readonly stalled: Getter<boolean> = this.#stalled;
 
-	#backpressure: Backpressure;
-
 	#signals = new Effect();
 
 	constructor(
@@ -151,15 +96,11 @@ class SharedAudioBuffer implements AudioBuffer {
 		this.channels = channels;
 		this.rate = rate;
 
-		// Buffered + capped: capacity is the cap (drops the oldest beyond it; no backpressure).
-		// Buffered + uncapped: a small ring with backpressure via `wait()`; lookahead stays encoded.
+		// Buffered: capacity is the finite cap, dropping the oldest samples beyond it.
 		// Not buffered: just headroom above LATENCY.
-		const capacityMs = buffered ? (maxBuffer ?? UNCAPPED_RING_MS) : undefined;
-		const capacity =
-			capacityMs !== undefined
-				? Math.ceil(rate * Time.Second.fromMilli(capacityMs))
-				: Math.max(rate, latencySamples * 2);
-		this.#backpressure = new Backpressure(buffered && maxBuffer === undefined, capacityMs);
+		const capacity = buffered
+			? Math.ceil(rate * Time.Second.fromMilli(maxBuffer ?? DEFAULT_RING_MS))
+			: Math.max(rate, latencySamples * 2);
 
 		const init = allocSharedRingBuffer(channels, capacity, rate, buffered);
 		this.#ring = new SharedRingBuffer(init);
@@ -172,7 +113,6 @@ class SharedAudioBuffer implements AudioBuffer {
 		this.#signals.interval(() => {
 			this.#timestamp.set(this.#ring.timestamp);
 			this.#stalled.set(this.#ring.stalled);
-			this.#backpressure.advance(this.#ring.timestamp);
 		}, 50);
 	}
 
@@ -196,15 +136,9 @@ class SharedAudioBuffer implements AudioBuffer {
 
 	reset(): void {
 		this.#ring.reset();
-		this.#backpressure.flush(); // the old timeline is gone; let the decode loop re-anchor
-	}
-
-	wait(timestamp: Time.Micro): Promise<void> {
-		return this.#backpressure.wait(timestamp, this.#ring.timestamp);
 	}
 
 	close(): void {
-		this.#backpressure.flush(); // never leave a decode loop awaiting a closed buffer
 		this.#signals.close();
 	}
 }
@@ -221,9 +155,6 @@ class PostAudioBuffer implements AudioBuffer {
 	readonly #stalled = new Signal<boolean>(true);
 	readonly stalled: Getter<boolean> = this.#stalled;
 
-	// Backpressure runs off the playhead the worklet reports in its state messages.
-	#backpressure: Backpressure;
-
 	#signals = new Effect();
 
 	constructor(
@@ -238,9 +169,6 @@ class PostAudioBuffer implements AudioBuffer {
 		this.channels = channels;
 		this.rate = rate;
 
-		const capacityMs = buffered ? (maxBuffer ?? UNCAPPED_RING_MS) : undefined;
-		this.#backpressure = new Backpressure(buffered && maxBuffer === undefined, capacityMs);
-
 		const latency = Time.Milli.fromSecond((latencySamples / rate) as Time.Second);
 		const msg: InitPost = { type: "init-post", channels, rate, latency, buffered, maxBuffer };
 		worklet.port.postMessage(msg);
@@ -251,7 +179,6 @@ class PostAudioBuffer implements AudioBuffer {
 			if (data?.type === "state") {
 				this.#timestamp.set(data.timestamp);
 				this.#stalled.set(data.stalled);
-				this.#backpressure.advance(data.timestamp);
 			}
 		});
 		// addEventListener on a MessagePort requires start() to begin delivery.
@@ -277,17 +204,9 @@ class PostAudioBuffer implements AudioBuffer {
 	reset(): void {
 		const msg: Reset = { type: "reset" };
 		this.#worklet.port.postMessage(msg);
-		this.#backpressure.flush(); // the old timeline is gone; let the decode loop re-anchor
-	}
-
-	wait(timestamp: Time.Micro): Promise<void> {
-		// Uses the worklet-reported playhead, which lags by a state-message interval; the ring
-		// margin covers that. The worklet still drops the oldest if a frame slips through.
-		return this.#backpressure.wait(timestamp, this.#timestamp.peek());
 	}
 
 	close(): void {
-		this.#backpressure.flush(); // never leave a decode loop awaiting a closed buffer
 		this.#signals.close();
 	}
 }
diff --git a/js/watch/src/audio/decoder.ts b/js/watch/src/audio/decoder.ts
index 60491a87d8..8300dd53ba 100644
--- a/js/watch/src/audio/decoder.ts
+++ b/js/watch/src/audio/decoder.ts
@@ -64,8 +64,7 @@ export class Decoder {
 	// ahead. This must be the latency CEILING (maxBuffer), not the floor
 	// (buffer): in buffered playback the producer writes faster than real-time
 	// with future PTS, so the group span legitimately exceeds the floor and
-	// would otherwise be skipped. Uncapped (maxBuffer undefined) has no finite
-	// ceiling to hand the consumer, so it falls back to the floor.
+	// would otherwise be skipped. When collapsed, maxBuffer equals the floor.
 	//
 	// Held in a plain Signal driven by a running effect (below) rather than a
 	// lazy `computed`: the container consumer only `.peek()`s this (it never
@@ -80,9 +79,7 @@ export class Decoder {
 		this.enabled = Signal.from(props?.enabled ?? false);
 
 		this.#signals.run((effect) => {
-			const max = effect.get(this.source.sync.maxBuffer);
-			const floor = effect.get(this.source.sync.buffer);
-			this.#consumerLatency.set(max ?? floor);
+			this.#consumerLatency.set(effect.get(this.source.sync.maxBuffer));
 		});
 
 		this.#signals.run(this.#runWorklet.bind(this));
@@ -275,10 +272,6 @@ export class Decoder {
 					bytesReceived: (stats?.bytesReceived ?? 0) + frame.data.byteLength,
 				}));
 
-				// Backpressure: in uncapped buffered mode this holds the encoded frame until the
-				// playhead nears it, so we keep the lookahead as Opus instead of decoded PCM.
-				await this.#ring?.wait(frame.timestamp as Time.Micro);
-
 				const chunk = new EncodedAudioChunk({
 					type: frame.keyframe ? "key" : "delta",
 					data: frame.data,
@@ -351,10 +344,6 @@ export class Decoder {
 					bytesReceived: (stats?.bytesReceived ?? 0) + frame.data.byteLength,
 				}));
 
-				// Backpressure: in uncapped buffered mode this holds the encoded frame until the
-				// playhead nears it, so we keep the lookahead as Opus instead of decoded PCM.
-				await this.#ring?.wait(frame.timestamp);
-
 				if (decoder.state === "closed") break;
 				decoder.decode(
 					new EncodedAudioChunk({
diff --git a/js/watch/src/audio/render.ts b/js/watch/src/audio/render.ts
index b9693641eb..36c3a909ae 100644
--- a/js/watch/src/audio/render.ts
+++ b/js/watch/src/audio/render.ts
@@ -16,7 +16,7 @@ export interface InitPost {
 	rate: number;
 	latency: Time.Milli;
 	buffered: boolean;
-	// undefined = uncapped; the worklet falls back to a fixed large capacity.
+	// The buffered-mode cap in ms; the worklet sizes the ring to it (falls back to a default if absent).
 	maxBuffer?: Time.Milli;
 }
 
diff --git a/js/watch/src/audio/ring-buffer.ts b/js/watch/src/audio/ring-buffer.ts
index 9dd7e95a9a..45868ad80e 100644
--- a/js/watch/src/audio/ring-buffer.ts
+++ b/js/watch/src/audio/ring-buffer.ts
@@ -1,8 +1,7 @@
 import { Time } from "@moq/net";
 
-// Capacity for an uncapped buffered ring (postMessage path). The main thread can't see the
-// worklet's fill level here, so there's no backpressure; the worklet drops the oldest if full,
-// which bounds an uncapped buffer to this on the fallback path.
+// Fallback ring capacity (ms) when buffered but no cap was supplied. The ceiling is always finite,
+// so this is just defensive; the worklet drops the oldest samples once the ring fills.
 const DEFAULT_MAX_BUFFER = 1_500 as Time.Milli;
 
 export class AudioRingBuffer {
diff --git a/js/watch/src/backend.ts b/js/watch/src/backend.ts
index 20d56e7c7e..29b46ca88d 100644
--- a/js/watch/src/backend.ts
+++ b/js/watch/src/backend.ts
@@ -36,13 +36,8 @@ export interface Backend {
 	// Audio specific signals.
 	audio?: Audio.Backend;
 
-	// The latency floor: "real-time" auto-computes jitter, a number sets a fixed jitter.
-	latencyMin: Signal<Latency>;
-
-	// The latency ceiling: "real-time" (default) caps at the RTT jitter (minimize), a number
-	// caps at that many ms, `undefined` is uncapped. A ceiling above the floor enables buffered
-	// playback: build up a buffer from future-dated frames instead of skipping ahead.
-	latencyMax: Signal<Latency | undefined>;
+	// The latency target: a scalar minimizes (collapsed range), an object opens a range. See {@link Latency}.
+	latency: Signal<Latency>;
 
 	// The jitter buffer in milliseconds.
 	jitter: Signal<Moq.Time.Milli>;
@@ -58,16 +53,10 @@ export interface MultiBackendProps {
 	element?: HTMLCanvasElement | HTMLVideoElement | Signal<HTMLCanvasElement | HTMLVideoElement | undefined>;
 	broadcast?: Broadcast | Signal<Broadcast | undefined>;
 
-	// Latency floor (the jitter buffer). "real-time" derives it from RTT, a number fixes it.
-	// `latency` is sugar that collapses the floor and ceiling to the same value.
+	// Latency target. A scalar (or "real-time") minimizes; an object `{ min, max }` opens a range and
+	// enables buffered playback: build up a buffer from future-dated frames (e.g. TTS) instead of
+	// minimizing latency. Call `reset()` at each utterance boundary to re-anchor. See {@link Latency}.
 	latency?: Latency | Signal<Latency>;
-	latencyMin?: Latency | Signal<Latency>;
-
-	// Latency ceiling: "real-time" (default) minimizes, a number caps at that many ms, `undefined`
-	// is uncapped. A ceiling above the floor enables buffered playback: build up a buffer from
-	// future-dated frames (e.g. TTS) instead of minimizing latency. Call `reset()` at each
-	// utterance boundary to re-anchor.
-	latencyMax?: Latency | Signal<Latency | undefined>;
 
 	// Established connection, used by Sync to read RTT (PROBE) for dynamic jitter in "real-time" mode.
 	connection?: Signal<Moq.Connection.Established | undefined>;
@@ -130,8 +119,7 @@ class AudioBackend implements Audio.Backend {
 export class MultiBackend implements Backend {
 	element = new Signal<HTMLCanvasElement | HTMLVideoElement | undefined>(undefined);
 	broadcast: Signal<Broadcast | undefined>;
-	latencyMin: Signal<Latency>;
-	latencyMax: Signal<Latency | undefined>;
+	latency: Signal<Latency>;
 	jitter: Signal<Moq.Time.Milli>;
 	buffered: Signal<boolean>;
 	paused: Signal<boolean>;
@@ -157,12 +145,10 @@ export class MultiBackend implements Backend {
 		this.element = Signal.from(props?.element);
 		this.broadcast = Signal.from(props?.broadcast);
 		this.sync = new Sync({
-			latencyMin: props?.latencyMin ?? props?.latency,
-			latencyMax: props?.latencyMax,
+			latency: props?.latency,
 			connection: props?.connection,
 		});
-		this.latencyMin = this.sync.latencyMin;
-		this.latencyMax = this.sync.latencyMax;
+		this.latency = this.sync.latency;
 		this.jitter = this.sync.jitter;
 		this.buffered = this.sync.buffered;
 
diff --git a/js/watch/src/element.ts b/js/watch/src/element.ts
index 4c8daf7f87..304fcfe6db 100644
--- a/js/watch/src/element.ts
+++ b/js/watch/src/element.ts
@@ -4,7 +4,7 @@ import * as Moq from "@moq/net";
 import { Effect, Signal } from "@moq/signals";
 import { MultiBackend } from "./backend";
 import { Broadcast, type CatalogFormat, parseCatalogFormat } from "./broadcast";
-import type { Latency } from "./sync";
+import { type Bound, type Latency, latencyBounds, latencyFromBounds } from "./sync";
 import type { Visible } from "./video";
 
 const OBSERVED = [
@@ -145,7 +145,11 @@ export default class MoqWatch extends HTMLElement {
 		});
 
 		this.signals.run((effect) => {
-			const min = effect.get(this.backend.latencyMin);
+			const { min, max } = latencyBounds(effect.get(this.backend.latency));
+			// Only reflect the collapsed `latency` sugar attribute when the range is actually
+			// collapsed. An open range is expressed via latency-min/latency-max, and writing
+			// `latency` here would round-trip back through attributeChangedCallback and collapse it.
+			if (min !== max) return;
 			if (min === "real-time") {
 				this.setAttribute("latency", "real-time");
 			} else {
@@ -193,20 +197,13 @@ export default class MoqWatch extends HTMLElement {
 		this.#enabled.set(false);
 	}
 
-	#parseLatency(value: string | null): Latency {
+	// Parse a single latency bound: absent or "real-time" is adaptive, otherwise a fixed ms value.
+	#parseBound(value: string | null): Bound {
 		if (!value || value === "real-time") return "real-time";
 		const parsed = Number.parseFloat(value);
 		return (Number.isFinite(parsed) ? parsed : 100) as Time.Milli;
 	}
 
-	#parseLatencyMax(value: string | null): Latency | undefined {
-		// Absent or "real-time" minimizes; "none"/"infinite" is uncapped; a number caps in ms.
-		if (value === null || value === "real-time") return "real-time";
-		if (value === "none" || value === "infinite") return undefined;
-		const parsed = Number.parseFloat(value);
-		return Number.isFinite(parsed) ? (parsed as Time.Milli) : "real-time";
-	}
-
 	attributeChangedCallback(name: Observed, oldValue: string | null, newValue: string | null) {
 		if (oldValue === newValue) {
 			return;
@@ -229,14 +226,14 @@ export default class MoqWatch extends HTMLElement {
 			this.broadcast.reload.set(newValue !== null);
 		} else if (name === "latency") {
 			// Sugar: collapse the floor and ceiling to a single value.
-			this.latency = this.#parseLatency(newValue);
+			this.latency = this.#parseBound(newValue);
 		} else if (name === "latency-min") {
-			this.backend.latencyMin.set(this.#parseLatency(newValue));
+			this.latencyMin = this.#parseBound(newValue);
 		} else if (name === "latency-max") {
-			this.backend.latencyMax.set(this.#parseLatencyMax(newValue));
+			this.latencyMax = this.#parseBound(newValue);
 		} else if (name === "jitter") {
 			// Deprecated: use latency="<number>" instead.
-			this.latency = this.#parseLatency(newValue);
+			this.latency = this.#parseBound(newValue);
 		} else if (name === "catalog-format") {
 			this.broadcast.catalogFormat.set(parseCatalogFormat(newValue));
 		} else {
@@ -302,37 +299,41 @@ export default class MoqWatch extends HTMLElement {
 		this.broadcast.reload.set(value);
 	}
 
-	/** The latency target. Setting it collapses the floor and ceiling to the same value (minimize). */
+	/**
+	 * The latency target. Assign a scalar (or `"real-time"`) to minimize latency, or an object
+	 * `{ min, max }` to open a range and buffer future-dated frames. See {@link Latency}.
+	 */
 	get latency(): Latency {
-		return this.backend.latencyMin.peek();
+		return this.backend.latency.peek();
 	}
 
 	set latency(value: Latency) {
-		this.backend.latencyMin.set(value);
-		this.backend.latencyMax.set(value);
+		this.backend.latency.set(value);
 	}
 
-	/** The latency floor (jitter buffer). Same as `latency` but leaves the ceiling untouched. */
-	get latencyMin(): Latency {
-		return this.backend.latencyMin.peek();
+	/** The latency floor (jitter/startup buffer). Read-modify-writes `latency`, leaving the ceiling. */
+	get latencyMin(): Bound {
+		return latencyBounds(this.backend.latency.peek()).min;
 	}
 
-	set latencyMin(value: Latency) {
-		this.backend.latencyMin.set(value);
+	set latencyMin(value: Bound) {
+		const { max } = latencyBounds(this.backend.latency.peek());
+		this.backend.latency.set(latencyFromBounds(value, max));
 	}
 
 	/**
-	 * The latency ceiling: `"real-time"` (default) minimizes, a number caps at that many ms, and
-	 * `undefined` is uncapped. A ceiling above the floor enables buffered playback: build up a
-	 * buffer from future-dated frames (e.g. TTS written faster than real-time) instead of skipping
-	 * ahead. Beyond the ceiling playback skips ahead. Call `reset()` at each utterance boundary.
+	 * The latency ceiling: `"real-time"` (default) minimizes, a number caps at that many ms. A
+	 * ceiling above the floor enables buffered playback: build up a buffer from future-dated frames
+	 * (e.g. TTS written faster than real-time) and only skip ahead past the cap. Call `reset()` at
+	 * each utterance boundary. Read-modify-writes `latency`, leaving the floor untouched.
 	 */
-	get latencyMax(): Latency | undefined {
-		return this.backend.latencyMax.peek();
+	get latencyMax(): Bound {
+		return latencyBounds(this.backend.latency.peek()).max;
 	}
 
-	set latencyMax(value: Latency | undefined) {
-		this.backend.latencyMax.set(value);
+	set latencyMax(value: Bound) {
+		const { min } = latencyBounds(this.backend.latency.peek());
+		this.backend.latency.set(latencyFromBounds(min, value));
 	}
 
 	/** The jitter buffer in milliseconds. */
diff --git a/js/watch/src/sync.test.ts b/js/watch/src/sync.test.ts
index 945a4d6d67..db178f12fa 100644
--- a/js/watch/src/sync.test.ts
+++ b/js/watch/src/sync.test.ts
@@ -6,15 +6,23 @@ import { Sync } from "./sync";
 const flush = () => new Promise((resolve) => setTimeout(resolve, 0));
 
 describe("latency range", () => {
-	it("is collapsed by default (no ceiling)", async () => {
+	it("is collapsed by default", async () => {
 		const sync = new Sync();
 		await flush();
 		expect(sync.buffered.peek()).toBe(false);
 		sync.close();
 	});
 
+	it("stays collapsed for a scalar latency", async () => {
+		const sync = new Sync({ latency: 100 as Time.Milli });
+		await flush();
+		expect(sync.buffered.peek()).toBe(false);
+		expect(sync.maxBuffer.peek()).toBe(100 as Time.Milli);
+		sync.close();
+	});
+
 	it("enters buffered mode when the ceiling is above the floor", async () => {
-		const sync = new Sync({ latencyMax: 30_000 as Time.Milli });
+		const sync = new Sync({ latency: { max: 30_000 as Time.Milli } });
 		await flush();
 		expect(sync.buffered.peek()).toBe(true);
 		expect(sync.maxBuffer.peek()).toBe(30_000 as Time.Milli);
@@ -23,7 +31,7 @@ describe("latency range", () => {
 
 	it("stays collapsed when the ceiling is at or below the floor", async () => {
 		// Fixed 200ms floor sits above the 100ms ceiling, so there's no room to buffer.
-		const sync = new Sync({ latencyMin: 200 as Time.Milli, latencyMax: 100 as Time.Milli });
+		const sync = new Sync({ latency: { min: 200 as Time.Milli, max: 100 as Time.Milli } });
 		await flush();
 		expect(sync.buffered.peek()).toBe(false);
 		sync.close();
@@ -34,27 +42,14 @@ describe("latency range", () => {
 		await flush();
 		expect(sync.buffered.peek()).toBe(false);
 
-		sync.latencyMax.set(30_000 as Time.Milli);
-		await flush();
-		expect(sync.buffered.peek()).toBe(true);
-		sync.close();
-	});
-
-	it("treats an undefined ceiling as uncapped", async () => {
-		const sync = new Sync({ latencyMax: undefined });
-		await flush();
-		// Undefined ceiling means buffer indefinitely (no cap), not collapse.
-		expect(sync.buffered.peek()).toBe(false); // props undefined falls back to the "real-time" default
-
-		sync.latencyMax.set(undefined);
+		sync.latency.set({ max: 30_000 as Time.Milli });
 		await flush();
 		expect(sync.buffered.peek()).toBe(true);
-		expect(sync.maxBuffer.peek()).toBeUndefined();
 		sync.close();
 	});
 
 	it("stays collapsed for an explicit real-time ceiling", async () => {
-		const sync = new Sync({ latencyMax: "real-time" });
+		const sync = new Sync({ latency: { max: "real-time" } });
 		await flush();
 		expect(sync.buffered.peek()).toBe(false);
 		sync.close();
diff --git a/js/watch/src/sync.ts b/js/watch/src/sync.ts
index 22b320023a..f21940d11e 100644
--- a/js/watch/src/sync.ts
+++ b/js/watch/src/sync.ts
@@ -2,21 +2,38 @@ import type * as Moq from "@moq/net";
 import { Time } from "@moq/net";
 import { Effect, Signal } from "@moq/signals";
 
-/** Latency floor: `"real-time"` auto-computes jitter from RTT; a `Time.Milli` sets a fixed jitter. */
-export type Latency = "real-time" | Time.Milli;
+/** A single latency bound: `"real-time"` adapts to the RTT; a `Time.Milli` fixes the jitter buffer. */
+export type Bound = "real-time" | Time.Milli;
+
+/**
+ * Latency target. A scalar (or `"real-time"`) collapses the range and minimizes latency, the live
+ * default. An object opens a range `[min, max]`: playback buffers freely between the floor and the
+ * ceiling and only skips ahead once latency would exceed the ceiling, so faster-than-real-time
+ * frames (e.g. a TTS response with future timestamps) build up instead of being skipped. Both
+ * bounds default to `"real-time"` when omitted. The ceiling is always finite (no uncapped buffering),
+ * so worst case the audio ring drops its oldest samples rather than exhausting memory.
+ */
+export type Latency = Bound | { min?: Bound; max?: Bound };
+
+/** Resolve a {@link Latency} into explicit floor/ceiling bounds (a scalar collapses to `min == max`). */
+export function latencyBounds(latency: Latency): { min: Bound; max: Bound } {
+	if (latency === "real-time" || typeof latency === "number") {
+		return { min: latency, max: latency };
+	}
+	return { min: latency.min ?? "real-time", max: latency.max ?? "real-time" };
+}
+
+/** Build a {@link Latency} from explicit bounds, collapsing to a scalar when they're equal. */
+export function latencyFromBounds(min: Bound, max: Bound): Latency {
+	return min === max ? min : { min, max };
+}
 
 const MIN_JITTER = 20 as Time.Milli;
 const FALLBACK_JITTER = 100 as Time.Milli;
 
 export interface SyncProps {
-	// Latency floor: the jitter/startup buffer. Playback un-stalls once this much is buffered
-	// and never deliberately drops below it. `"real-time"` derives it from RTT.
-	latencyMin?: Latency | Signal<Latency>;
-
-	// Latency ceiling: "real-time" (default) caps at the RTT jitter (= minimize), a number caps
-	// at that many ms, and `undefined` is uncapped (buffer indefinitely). While the buffer stays
-	// under the ceiling we never skip ahead, so faster-than-real-time frames (e.g. TTS) build up.
-	latencyMax?: Latency | Signal<Latency | undefined>;
+	// Latency target: a scalar minimizes (collapsed range), an object opens a range. See {@link Latency}.
+	latency?: Latency | Signal<Latency>;
 
 	connection?: Signal<Moq.Connection.Established | undefined>;
 	audio?: Time.Milli | Signal<Time.Milli | undefined>;
@@ -29,32 +46,27 @@ export class Sync {
 	#reference = new Signal<Time.Milli | undefined>(undefined);
 	readonly reference: Signal<Time.Milli | undefined> = this.#reference;
 
-	// The latency floor: "real-time" auto-computes jitter from RTT, a number sets a fixed jitter.
-	latencyMin: Signal<Latency>;
-
-	// The latency ceiling: "real-time" (default) caps at the RTT-derived jitter (= minimize),
-	// a number caps at that many ms, and `undefined` means no cap (buffer indefinitely).
-	latencyMax: Signal<Latency | undefined>;
+	// The latency target: a scalar minimizes (collapsed range), an object opens a range. See {@link Latency}.
+	latency: Signal<Latency>;
 
 	// The jitter buffer in milliseconds (always numeric).
 	// In "real-time" mode this is updated automatically from RTT.
-	// When latencyMin is a number, jitter equals that number.
+	// When the floor is a number, jitter equals that number.
 	jitter: Signal<Time.Milli>;
 
 	// Any additional delay required for audio or video.
 	audio: Signal<Time.Milli | undefined>;
 	video: Signal<Time.Milli | undefined>;
 
-	// Derived: true when the ceiling sits above the floor (or is uncapped). Buffered playback
-	// lets the reference stay anchored so future-dated frames build up a buffer, re-anchoring
-	// (skipping ahead) only when latency would exceed the ceiling. See `reset()`.
+	// Derived: true when the ceiling sits above the floor. Buffered playback lets the reference
+	// stay anchored so future-dated frames build up a buffer, re-anchoring (skipping ahead) only
+	// when latency would exceed the ceiling. See `reset()`.
 	#buffered = new Signal<boolean>(false);
 	readonly buffered: Signal<boolean> = this.#buffered;
 
-	// Derived cap on buffered audio, consumed by the audio ring. A number is the ceiling in ms;
-	// `undefined` means uncapped (the ring bounds memory itself and applies backpressure).
-	#maxBuffer = new Signal<Time.Milli | undefined>(undefined);
-	readonly maxBuffer: Signal<Time.Milli | undefined> = this.#maxBuffer;
+	// Derived cap on buffered audio (ms), consumed by the audio ring to size itself. Always finite.
+	#maxBuffer = new Signal<Time.Milli>(Time.Milli.zero);
+	readonly maxBuffer: Signal<Time.Milli> = this.#maxBuffer;
 
 	// The total buffer required: jitter + max(audio, video).
 	#buffer = new Signal<Time.Milli>(Time.Milli.zero);
@@ -80,9 +92,7 @@ export class Sync {
 	signals = new Effect();
 
 	constructor(props?: SyncProps) {
-		this.latencyMin = Signal.from(props?.latencyMin ?? ("real-time" as Latency));
-		// Default ceiling tracks the floor ("real-time"), i.e. minimize latency.
-		this.latencyMax = Signal.from(props?.latencyMax ?? ("real-time" as Latency));
+		this.latency = Signal.from(props?.latency ?? ("real-time" as Latency));
 		this.jitter = new Signal<Time.Milli>(FALLBACK_JITTER);
 		this.#connection = props?.connection;
 		this.audio = Signal.from(props?.audio);
@@ -95,16 +105,12 @@ export class Sync {
 		this.signals.run(this.#runRange.bind(this));
 	}
 
-	// Derive `buffered` / `maxBuffer` from the floor (`buffer`) and the ceiling (`latencyMax`).
+	// Derive `buffered` / `maxBuffer` from the floor (`buffer`) and the ceiling (the `max` bound).
 	#runRange(effect: Effect): void {
-		const max = effect.get(this.latencyMax);
+		const { max } = latencyBounds(effect.get(this.latency));
 		const floor = effect.get(this.buffer);
 
-		if (max === undefined) {
-			// Uncapped: buffer indefinitely (the ring bounds memory and applies backpressure).
-			this.#buffered.set(true);
-			this.#maxBuffer.set(undefined);
-		} else if (max === "real-time") {
+		if (max === "real-time") {
 			// Ceiling tracks the floor: minimize latency, the live default.
 			this.#buffered.set(false);
 			this.#maxBuffer.set(floor);
@@ -116,22 +122,21 @@ export class Sync {
 	}
 
 	// The maximum total latency (lookahead + floor) we tolerate before re-anchoring, in ms.
-	// `Infinity` when uncapped. Used by `received()` to decide when to skip ahead.
-	#latencyCap(): number {
-		const max = this.latencyMax.peek();
+	// Used by `received()` to decide when to skip ahead.
+	#latencyCap(): Time.Milli {
+		const { max } = latencyBounds(this.latency.peek());
 		const floor = this.#buffer.peek();
-		if (max === undefined) return Number.POSITIVE_INFINITY;
 		if (max === "real-time") return floor;
-		return Math.max(max, floor);
+		return Time.Milli.max(max, floor);
 	}
 
 	#runJitter(effect: Effect): void {
-		const latency = effect.get(this.latencyMin);
+		const { min } = latencyBounds(effect.get(this.latency));
 
-		if (typeof latency === "number") {
+		if (typeof min === "number") {
 			// Fixed mode: the floor value is the jitter.
 			this.#minRtt = undefined;
-			this.jitter.set(latency);
+			this.jitter.set(min);
 			return;
 		}
 
diff --git a/js/watch/src/ui/components/buffer-control.ts b/js/watch/src/ui/components/buffer-control.ts
index e578a1eed6..4be298d830 100644
--- a/js/watch/src/ui/components/buffer-control.ts
+++ b/js/watch/src/ui/components/buffer-control.ts
@@ -141,7 +141,7 @@ export function bufferControl(parent: Effect, watch: MoqWatch, max: Moq.Time.Mil
 		const ms = (x / trackWidth) * max;
 		const snapped = (Math.round(ms / RANGE_STEP) * RANGE_STEP) as Moq.Time.Milli;
 		const clamped = Math.max(MIN_RANGE, Math.min(max, snapped)) as Moq.Time.Milli;
-		watch.backend.latencyMin.set(clamped);
+		watch.latencyMin = clamped;
 	};
 
 	const interact = () => {
@@ -181,7 +181,7 @@ export function bufferControl(parent: Effect, watch: MoqWatch, max: Moq.Time.Mil
 		interact();
 		const current = watch.backend.jitter.peek();
 		const value = Math.max(MIN_RANGE, Math.min(max, current + delta)) as Moq.Time.Milli;
-		watch.backend.latencyMin.set(value);
+		watch.latencyMin = value;
 	});
 
 	const draw = () => {
diff --git a/js/watch/src/ui/components/latency.ts b/js/watch/src/ui/components/latency.ts
index d4d0ef4094..d5955d973c 100644
--- a/js/watch/src/ui/components/latency.ts
+++ b/js/watch/src/ui/components/latency.ts
@@ -2,6 +2,7 @@ import type { Moq } from "@moq/hang";
 import type { Effect } from "@moq/signals";
 import * as DOM from "@moq/signals/dom";
 import type MoqWatch from "../../element";
+import { latencyBounds } from "../../sync";
 import { formatMillis } from "../format";
 import { bufferControl } from "./buffer-control";
 
@@ -25,14 +26,14 @@ export function latencyTab(parent: Effect, watch: MoqWatch): HTMLElement {
 	const buttons = PRESETS.map((preset) => {
 		const chip = DOM.create("button", { className: "chip", type: "button" }, preset.label);
 		parent.event(chip, "click", () => {
-			watch.backend.latencyMin.set(preset.value === "real-time" ? "real-time" : (preset.value as Moq.Time.Milli));
+			watch.latencyMin = preset.value === "real-time" ? "real-time" : (preset.value as Moq.Time.Milli);
 		});
 		chips.appendChild(chip);
 		return { preset, chip };
 	});
 
 	parent.run((effect) => {
-		const mode = effect.get(watch.backend.latencyMin);
+		const mode = latencyBounds(effect.get(watch.backend.latency)).min;
 		for (const { preset, chip } of buttons) {
 			const active = preset.value === "real-time" ? mode === "real-time" : mode === preset.value;
 			chip.classList.toggle("chip--active", active);
@@ -53,7 +54,7 @@ export function latencyTab(parent: Effect, watch: MoqWatch): HTMLElement {
 	readout.append(jitterStat, bufferStat);
 
 	parent.run((effect) => {
-		const mode = effect.get(watch.backend.latencyMin);
+		const mode = latencyBounds(effect.get(watch.backend.latency)).min;
 		const jitter = effect.get(watch.backend.jitter);
 		const total = effect.get(watch.backend.sync.buffer);
 		jitterVal.textContent = `${formatMillis(jitter)}${mode === "real-time" ? " (auto)" : ""}`;

From 18116bbf749345e81aee8280dc1e6fda68464325 Mon Sep 17 00:00:00 2001
From: Luke Curley <kixelated@gmail.com>
Date: Wed, 17 Jun 2026 19:23:34 -0700
Subject: [PATCH 4/4] feat(watch): hold buffered lookahead as Opus via
 floor-sized ring + backpressure

Keep the decoded PCM ring sized to the latency floor and hold everything above
it (the buffered lookahead, up to the ceiling) upstream as encoded Opus, gated
by backpressure on the decode loop. A large `latency-max` now costs encoded
bytes, not seconds of decoded PCM. maxBuffer no longer sizes the ring; it only
governs the container consumer's Opus retention and the re-anchor cap.

Backpressure is enabled whenever buffered (ceiling above floor), with the gate
set to the floor so decoded PCM stays ~floor ahead of the playhead. While the
ring is stalled (bootstrap or underflow) `wait()` resolves freely so the decode
loop can refill the floor; once playing it holds back. The post-message fallback
ring is likewise floor-sized and reallocs on latency change.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 doc/lib/js/@moq/watch.md               |  17 +--
 js/watch/src/audio/buffer.ts           | 137 +++++++++++++++++++------
 js/watch/src/audio/decoder.ts          |  11 +-
 js/watch/src/audio/render.ts           |   4 +-
 js/watch/src/audio/ring-buffer.test.ts |  23 ++---
 js/watch/src/audio/ring-buffer.ts      |  26 ++---
 6 files changed, 148 insertions(+), 70 deletions(-)

diff --git a/doc/lib/js/@moq/watch.md b/doc/lib/js/@moq/watch.md
index dc3310b282..190a66fc4d 100644
--- a/doc/lib/js/@moq/watch.md
+++ b/doc/lib/js/@moq/watch.md
@@ -182,12 +182,17 @@ adaptive floor). `latency-max` is the ceiling, and it has two forms:
 - **`"real-time"`** (the default) or any value `<= latency-min`: collapsed, i.e.
   today's minimize-latency behavior.
 
-The ceiling is always finite: the buffer is bounded by `latency-max`, and once it
-fills the audio ring drops its oldest samples rather than growing without limit.
-The mechanism is the same in every case: the playhead is anchored on the first
-frame and only re-anchored (skipped forward) when keeping it would push latency
-past `latency-max`. Minimize is just the degenerate case where the ceiling equals
-the floor.
+The ceiling is always finite: the buffer is bounded by `latency-max` rather than
+growing without limit. The mechanism is the same in every case: the playhead is
+anchored on the first frame and only re-anchored (skipped forward) when keeping it
+would push latency past `latency-max`. Minimize is just the degenerate case where
+the ceiling equals the floor.
+
+The buffered lookahead is held cheaply. The decoded audio ring only holds the
+**floor** (`latency-min`) worth of PCM; everything above it stays upstream as
+encoded frames, and the decoder applies backpressure (stops decoding ahead) until
+the playhead nears each frame. So a large `latency-max` costs encoded bytes, not
+seconds of decoded PCM.
 
 At each new utterance, call `reset()` to flush the audio buffer and re-anchor
 playback to the next frame. The producer can interrupt by writing a new utterance
diff --git a/js/watch/src/audio/buffer.ts b/js/watch/src/audio/buffer.ts
index 60d2b4eb46..1e2c4fd1d3 100644
--- a/js/watch/src/audio/buffer.ts
+++ b/js/watch/src/audio/buffer.ts
@@ -3,9 +3,57 @@ import { Effect, type Getter, Signal } from "@moq/signals";
 import type { Data, InitPost, InitShared, Latency, Reset, State } from "./render";
 import { allocSharedRingBuffer, SharedRingBuffer } from "./shared-ring-buffer";
 
-// Ring capacity (ms) when buffered but no cap was supplied. The ceiling is always finite, so this
-// is just a defensive fallback; in practice the decoder always passes the derived `maxBuffer`.
-const DEFAULT_RING_MS = 1500 as Time.Milli;
+/**
+ * Timestamp-based backpressure for buffered playback. The decoded PCM ring only holds the latency
+ * floor; everything above it (the buffered lookahead, up to the ceiling) stays upstream as encoded
+ * Opus. `wait(timestamp)` stays pending until the playhead is within `headroom` (the floor) of
+ * `timestamp`, so the decode loop holds a frame as Opus instead of decoding it too far ahead of the
+ * floor-sized ring. Both transports share this; they differ only in how they observe the playhead
+ * (Atomics poll vs worklet state messages). A no-op when not buffered (the ring bounds itself).
+ */
+class Backpressure {
+	readonly #enabled: boolean;
+	#headroom: Time.Micro;
+	#waiters: Array<{ timestamp: Time.Micro; resolve: () => void }> = [];
+
+	constructor(enabled: boolean, headroom: Time.Micro) {
+		this.#enabled = enabled;
+		this.#headroom = headroom;
+	}
+
+	// Move the gate as the floor changes (e.g. "real-time" jitter tracking RTT).
+	setHeadroom(headroom: Time.Micro): void {
+		this.#headroom = headroom;
+	}
+
+	wait(timestamp: Time.Micro, playhead: Time.Micro): Promise<void> {
+		if (!this.#enabled) return Promise.resolve();
+		if (playhead >= ((timestamp - this.#headroom) | 0)) return Promise.resolve();
+		return new Promise((resolve) => this.#waiters.push({ timestamp, resolve }));
+	}
+
+	// Resolve every waiter the playhead has reached. Thresholds are recomputed live so a changed
+	// headroom takes effect on queued waiters too.
+	advance(playhead: Time.Micro): void {
+		if (this.#waiters.length === 0) return;
+		this.#waiters = this.#waiters.filter(({ timestamp, resolve }) => {
+			if (playhead < ((timestamp - this.#headroom) | 0)) return true;
+			resolve();
+			return false;
+		});
+	}
+
+	// Resolve everything unconditionally (reset/close): never strand a decode loop.
+	flush(): void {
+		for (const { resolve } of this.#waiters) resolve();
+		this.#waiters = [];
+	}
+}
+
+/** Convert a sample count to a Time.Micro duration at the given sample rate. */
+function samplesToMicro(samples: number, rate: number): Time.Micro {
+	return Time.Micro.fromSecond((samples / rate) as Time.Second);
+}
 
 /**
  * Unified interface for the audio buffer between the main thread and the AudioWorklet.
@@ -29,6 +77,14 @@ export interface AudioBuffer {
 	/** Flush buffered samples and re-stall, ready to anchor the next utterance (buffered mode). */
 	reset(): void;
 
+	/**
+	 * Resolve once the playhead is near enough to decode a frame at `timestamp`. In buffered mode this
+	 * applies backpressure: it stays pending while decoding `timestamp` would run more than the latency
+	 * floor ahead of the playhead, so the caller holds the (encoded) frame instead of decoding it too
+	 * far ahead of the floor-sized ring. Resolves immediately when not buffered (the ring bounds itself).
+	 */
+	wait(timestamp: Time.Micro): Promise<void>;
+
 	/** Current playback timestamp (derived from reader position). */
 	readonly timestamp: Getter<Time.Micro>;
 
@@ -58,15 +114,13 @@ export function createAudioBuffer(
 	rate: number,
 	latencySamples: number,
 	buffered = false,
-	// The buffered-mode cap in ms (sizes the ring); ignored when not buffered.
-	maxBuffer?: Time.Milli,
 ): AudioBuffer {
 	if (supportsSharedArrayBuffer()) {
 		console.log("[audio] using SharedArrayBuffer audio buffer");
-		return new SharedAudioBuffer(worklet, channels, rate, latencySamples, buffered, maxBuffer);
+		return new SharedAudioBuffer(worklet, channels, rate, latencySamples, buffered);
 	}
 	console.log("[audio] using postMessage audio buffer (SharedArrayBuffer unavailable)");
-	return new PostAudioBuffer(worklet, channels, rate, latencySamples, buffered, maxBuffer);
+	return new PostAudioBuffer(worklet, channels, rate, latencySamples, buffered);
 }
 
 /** SharedArrayBuffer-backed implementation. Writes go directly into shared memory. */
@@ -82,25 +136,19 @@ class SharedAudioBuffer implements AudioBuffer {
 	readonly #stalled = new Signal<boolean>(true);
 	readonly stalled: Getter<boolean> = this.#stalled;
 
+	#backpressure: Backpressure;
+
 	#signals = new Effect();
 
-	constructor(
-		worklet: AudioWorkletNode,
-		channels: number,
-		rate: number,
-		latencySamples: number,
-		buffered: boolean,
-		maxBuffer?: Time.Milli,
-	) {
+	constructor(worklet: AudioWorkletNode, channels: number, rate: number, latencySamples: number, buffered: boolean) {
 		this.#worklet = worklet;
 		this.channels = channels;
 		this.rate = rate;
 
-		// Buffered: capacity is the finite cap, dropping the oldest samples beyond it.
-		// Not buffered: just headroom above LATENCY.
-		const capacity = buffered
-			? Math.ceil(rate * Time.Second.fromMilli(maxBuffer ?? DEFAULT_RING_MS))
-			: Math.max(rate, latencySamples * 2);
+		// The ring holds the latency floor as decoded PCM (headroom above it for overflow). In
+		// buffered mode the lookahead above the floor stays encoded upstream, held back by `wait()`.
+		const capacity = Math.max(rate, latencySamples * 2);
+		this.#backpressure = new Backpressure(buffered, samplesToMicro(latencySamples, rate));
 
 		const init = allocSharedRingBuffer(channels, capacity, rate, buffered);
 		this.#ring = new SharedRingBuffer(init);
@@ -111,8 +159,13 @@ class SharedAudioBuffer implements AudioBuffer {
 
 		// Poll the shared control array and reflect it into signals.
 		this.#signals.interval(() => {
+			const stalled = this.#ring.stalled;
 			this.#timestamp.set(this.#ring.timestamp);
-			this.#stalled.set(this.#ring.stalled);
+			this.#stalled.set(stalled);
+			// While stalled the playhead is parked, so release the decode loop to refill the floor;
+			// once playing, hold it to ~the floor ahead.
+			if (stalled) this.#backpressure.flush();
+			else this.#backpressure.advance(this.#ring.timestamp);
 		}, 50);
 	}
 
@@ -121,6 +174,8 @@ class SharedAudioBuffer implements AudioBuffer {
 	}
 
 	setLatency(samples: number): void {
+		this.#backpressure.setHeadroom(samplesToMicro(samples, this.rate));
+
 		// Grow the ring (preserving the unread window) if it's too small for the new latency.
 		if (this.#ring.capacity < samples * 1.5) {
 			const newCapacity = Math.max(this.rate, samples * 2);
@@ -136,9 +191,17 @@ class SharedAudioBuffer implements AudioBuffer {
 
 	reset(): void {
 		this.#ring.reset();
+		this.#backpressure.flush(); // the old timeline is gone; let the decode loop re-anchor
+	}
+
+	wait(timestamp: Time.Micro): Promise<void> {
+		// Stalled = still filling the floor (bootstrap or underflow): let frames through to refill.
+		if (this.#ring.stalled) return Promise.resolve();
+		return this.#backpressure.wait(timestamp, this.#ring.timestamp);
 	}
 
 	close(): void {
+		this.#backpressure.flush(); // never leave a decode loop awaiting a closed buffer
 		this.#signals.close();
 	}
 }
@@ -155,22 +218,20 @@ class PostAudioBuffer implements AudioBuffer {
 	readonly #stalled = new Signal<boolean>(true);
 	readonly stalled: Getter<boolean> = this.#stalled;
 
+	// Backpressure runs off the playhead the worklet reports in its state messages.
+	#backpressure: Backpressure;
+
 	#signals = new Effect();
 
-	constructor(
-		worklet: AudioWorkletNode,
-		channels: number,
-		rate: number,
-		latencySamples: number,
-		buffered: boolean,
-		maxBuffer?: Time.Milli,
-	) {
+	constructor(worklet: AudioWorkletNode, channels: number, rate: number, latencySamples: number, buffered: boolean) {
 		this.#worklet = worklet;
 		this.channels = channels;
 		this.rate = rate;
 
+		this.#backpressure = new Backpressure(buffered, samplesToMicro(latencySamples, rate));
+
 		const latency = Time.Milli.fromSecond((latencySamples / rate) as Time.Second);
-		const msg: InitPost = { type: "init-post", channels, rate, latency, buffered, maxBuffer };
+		const msg: InitPost = { type: "init-post", channels, rate, latency, buffered };
 		worklet.port.postMessage(msg);
 
 		// Listen for state updates from the worklet.
@@ -179,6 +240,10 @@ class PostAudioBuffer implements AudioBuffer {
 			if (data?.type === "state") {
 				this.#timestamp.set(data.timestamp);
 				this.#stalled.set(data.stalled);
+				// While stalled the playhead is parked, so release the decode loop to refill the floor;
+				// once playing, hold it to ~the floor ahead.
+				if (data.stalled) this.#backpressure.flush();
+				else this.#backpressure.advance(data.timestamp);
 			}
 		});
 		// addEventListener on a MessagePort requires start() to begin delivery.
@@ -196,6 +261,8 @@ class PostAudioBuffer implements AudioBuffer {
 	}
 
 	setLatency(samples: number): void {
+		this.#backpressure.setHeadroom(samplesToMicro(samples, this.rate));
+
 		const latency = Time.Milli.fromSecond((samples / this.rate) as Time.Second);
 		const msg: Latency = { type: "latency", latency };
 		this.#worklet.port.postMessage(msg);
@@ -204,9 +271,19 @@ class PostAudioBuffer implements AudioBuffer {
 	reset(): void {
 		const msg: Reset = { type: "reset" };
 		this.#worklet.port.postMessage(msg);
+		this.#backpressure.flush(); // the old timeline is gone; let the decode loop re-anchor
+	}
+
+	wait(timestamp: Time.Micro): Promise<void> {
+		// Stalled = still filling the floor (bootstrap or underflow): let frames through to refill.
+		if (this.#stalled.peek()) return Promise.resolve();
+		// Uses the worklet-reported playhead, which lags by a state-message interval; the floor's
+		// headroom covers that. The worklet still drops the oldest if a frame slips through.
+		return this.#backpressure.wait(timestamp, this.#timestamp.peek());
 	}
 
 	close(): void {
+		this.#backpressure.flush(); // never leave a decode loop awaiting a closed buffer
 		this.#signals.close();
 	}
 }
diff --git a/js/watch/src/audio/decoder.ts b/js/watch/src/audio/decoder.ts
index 8300dd53ba..705ebaf685 100644
--- a/js/watch/src/audio/decoder.ts
+++ b/js/watch/src/audio/decoder.ts
@@ -133,10 +133,9 @@ export class Decoder {
 			const latency = this.source.sync.buffer.peek();
 			const latencySamples = Math.ceil(sampleRate * Time.Second.fromMilli(latency));
 			const buffered = this.source.sync.buffered.peek();
-			const maxBuffer = this.source.sync.maxBuffer.peek();
 
 			// Let the factory pick the best transport (SharedArrayBuffer or postMessage).
-			const ring = createAudioBuffer(worklet, channelCount, sampleRate, latencySamples, buffered, maxBuffer);
+			const ring = createAudioBuffer(worklet, channelCount, sampleRate, latencySamples, buffered);
 			this.#ring = ring;
 			effect.cleanup(() => {
 				ring.close();
@@ -272,6 +271,10 @@ export class Decoder {
 					bytesReceived: (stats?.bytesReceived ?? 0) + frame.data.byteLength,
 				}));
 
+				// Backpressure: in buffered mode this holds the encoded frame until the playhead nears
+				// it, keeping the lookahead above the floor as Opus instead of decoded PCM. No-op live.
+				await this.#ring?.wait(frame.timestamp as Time.Micro);
+
 				const chunk = new EncodedAudioChunk({
 					type: frame.keyframe ? "key" : "delta",
 					data: frame.data,
@@ -344,6 +347,10 @@ export class Decoder {
 					bytesReceived: (stats?.bytesReceived ?? 0) + frame.data.byteLength,
 				}));
 
+				// Backpressure: in buffered mode this holds the encoded frame until the playhead nears
+				// it, keeping the lookahead above the floor as Opus instead of decoded PCM. No-op live.
+				await this.#ring?.wait(frame.timestamp);
+
 				if (decoder.state === "closed") break;
 				decoder.decode(
 					new EncodedAudioChunk({
diff --git a/js/watch/src/audio/render.ts b/js/watch/src/audio/render.ts
index 36c3a909ae..40ea9a220c 100644
--- a/js/watch/src/audio/render.ts
+++ b/js/watch/src/audio/render.ts
@@ -15,9 +15,9 @@ export interface InitPost {
 	channels: number;
 	rate: number;
 	latency: Time.Milli;
+	// Buffered mode: anchor to the first frame and play through; the ring is sized to the floor and
+	// the lookahead above it is held back upstream (the main thread applies the backpressure).
 	buffered: boolean;
-	// The buffered-mode cap in ms; the worklet sizes the ring to it (falls back to a default if absent).
-	maxBuffer?: Time.Milli;
 }
 
 /** Flush the buffer and re-stall (fallback path only; shared path resets via Atomics). */
diff --git a/js/watch/src/audio/ring-buffer.test.ts b/js/watch/src/audio/ring-buffer.test.ts
index a0b8674375..0ed5bb101a 100644
--- a/js/watch/src/audio/ring-buffer.test.ts
+++ b/js/watch/src/audio/ring-buffer.test.ts
@@ -647,8 +647,10 @@ describe("buffered mode", () => {
 		expect(Time.Milli.fromMicro(buffer.timestamp)).toBe(2000 as Time.Milli);
 	});
 
-	it("plays through the whole buffer without dropping", () => {
-		const buffer = createBuffered(50);
+	it("plays frames in order within the floor-sized ring without skipping ahead", () => {
+		// 600ms floor at 1000Hz -> 1200-sample ring, comfortably holding the 1000-sample utterance
+		// the backpressure loop would feed it. A non-buffered ring would have skipped to write-latency.
+		const buffer = createBuffered(600);
 		for (let i = 0; i < 10; i++) {
 			write(buffer, (2000 + i * 100) as Time.Milli, 100, { channels: 1, value: (i + 1) / 10 });
 		}
@@ -674,22 +676,15 @@ describe("buffered mode", () => {
 		expect(out[0][0]).toBeCloseTo(0.9, 5);
 	});
 
-	it("drops the oldest samples once the buffer exceeds the cap", () => {
-		// 200ms cap at 1000Hz = 200-sample capacity.
-		const buffer = new AudioRingBuffer({
-			rate: 1000,
-			channels: 1,
-			latency: 50 as Time.Milli,
-			buffered: true,
-			maxBuffer: 200 as Time.Milli,
-		});
+	it("drops the oldest samples once the ring fills beyond the floor", () => {
+		// 50ms floor at 1000Hz -> 50-sample floor, 100-sample ring. Backpressure normally keeps the
+		// decode loop from running this far ahead; if it slips, the ring drops its oldest as a backstop.
+		const buffer = createBuffered(50);
 
 		write(buffer, 0 as Time.Milli, 100, { channels: 1, value: 0.1 }); // [0, 100)
-		write(buffer, 100 as Time.Milli, 100, { channels: 1, value: 0.2 }); // [100, 200)
-		write(buffer, 200 as Time.Milli, 100, { channels: 1, value: 0.3 }); // exceeds cap; drops [0, 100)
+		write(buffer, 100 as Time.Milli, 100, { channels: 1, value: 0.2 }); // exceeds 100-sample ring; drops [0, 100)
 
 		expect(Time.Milli.fromMicro(buffer.timestamp)).toBe(100 as Time.Milli);
 		expect(read(buffer, 100, 1)[0][0]).toBeCloseTo(0.2, 5);
-		expect(read(buffer, 100, 1)[0][0]).toBeCloseTo(0.3, 5);
 	});
 });
diff --git a/js/watch/src/audio/ring-buffer.ts b/js/watch/src/audio/ring-buffer.ts
index 45868ad80e..83adc03309 100644
--- a/js/watch/src/audio/ring-buffer.ts
+++ b/js/watch/src/audio/ring-buffer.ts
@@ -1,9 +1,5 @@
 import { Time } from "@moq/net";
 
-// Fallback ring capacity (ms) when buffered but no cap was supplied. The ceiling is always finite,
-// so this is just defensive; the worklet drops the oldest samples once the ring fills.
-const DEFAULT_MAX_BUFFER = 1_500 as Time.Milli;
-
 export class AudioRingBuffer {
 	#buffer: Float32Array[];
 	#writeIndex = 0;
@@ -25,7 +21,6 @@ export class AudioRingBuffer {
 		channels: number;
 		latency: Time.Milli;
 		buffered?: boolean;
-		maxBuffer?: Time.Milli;
 	}) {
 		if (props.channels <= 0) throw new Error("invalid channels");
 		if (props.rate <= 0) throw new Error("invalid sample rate");
@@ -38,11 +33,10 @@ export class AudioRingBuffer {
 		this.channels = props.channels;
 		this.#buffered = props.buffered ?? false;
 
-		// In buffered mode the capacity is the maxBuffer cap, not just the latency target.
-		const maxBuffer = props.maxBuffer ?? DEFAULT_MAX_BUFFER;
-		const capacity = this.#buffered
-			? Math.ceil(props.rate * Time.Second.fromMilli(maxBuffer))
-			: this.#latencySamples;
+		// The ring holds the latency floor as PCM. Buffered mode gives it headroom above the floor
+		// so the backpressure-paced decode loop (on the main thread) doesn't overflow-drop; the rest
+		// of the lookahead stays encoded upstream.
+		const capacity = this.#capacityFor(this.#latencySamples);
 
 		this.#buffer = [];
 		for (let i = 0; i < this.channels; i++) {
@@ -50,6 +44,10 @@ export class AudioRingBuffer {
 		}
 	}
 
+	#capacityFor(latencySamples: number): number {
+		return this.#buffered ? latencySamples * 2 : latencySamples;
+	}
+
 	get stalled(): boolean {
 		return this.#stalled;
 	}
@@ -67,13 +65,9 @@ export class AudioRingBuffer {
 	}
 
 	resize(latency: Time.Milli): void {
-		// In buffered mode the capacity is fixed; latency only moves the un-stall threshold.
-		if (this.#buffered) {
-			this.#latencySamples = Math.ceil(this.rate * Time.Second.fromMilli(latency));
-			return;
-		}
+		this.#latencySamples = Math.ceil(this.rate * Time.Second.fromMilli(latency));
 
-		const newCapacity = Math.ceil(this.rate * Time.Second.fromMilli(latency));
+		const newCapacity = this.#capacityFor(this.#latencySamples);
 		if (newCapacity === this.capacity) return;
 		if (newCapacity === 0) throw new Error("empty buffer");