diff --git a/python/sglang/multimodal_gen/apps/realtime_webui/app.js b/python/sglang/multimodal_gen/apps/realtime_webui/app.js
index 02f0ee997..a605cea49 100644
--- a/python/sglang/multimodal_gen/apps/realtime_webui/app.js
+++ b/python/sglang/multimodal_gen/apps/realtime_webui/app.js
@@ -4,21 +4,26 @@ const RAW_RGB_DELTA_GZIP_CONTENT_TYPE = "application/x-raw-rgb-delta-gzip";
 const RAW_RGBA_DELTA_GZIP_CONTENT_TYPE = "application/x-raw-rgba-delta-gzip";
 const WEBP_FRAME_CONTENT_TYPE = "image/webp";
 const JPEG_FRAME_CONTENT_TYPE = "image/jpeg";
-const DECODER_WORKER_URL = "./decoder_worker.js?v=rgb-worker-v6";
+const DECODER_WORKER_URL = "./decoder_worker.js?v=rgb-worker-v10";
 const DEFAULT_PREVIEW_OUTPUT_FORMAT = "webp";
-const DEFAULT_PREVIEW_OUTPUT_QUALITY = 95;
+const DEFAULT_PREVIEW_OUTPUT_QUALITY = 80;
+const MAX_WEBP_PREVIEW_OUTPUT_QUALITY = 80;
+const SMOOTH_PREVIEW_OUTPUT_QUALITY = 70;
+const SR_PREVIEW_OUTPUT_QUALITY = 70;
+const HEAVY_PREVIEW_OUTPUT_QUALITY = 60;
 const DEFAULT_TARGET_FPS = 25;
 const DEFAULT_FRAME_INTERPOLATION_EXP = 1;
 const DEFAULT_FRAME_INTERPOLATION_SCALE = 1.0;
 const DEFAULT_UPSCALING_SCALE = 2;
+const DEFAULT_UPSCALING_MODEL =
+  "https://github.com/xinntao/Real-ESRGAN/releases/download/v0.2.5.0/realesr-general-x4v3.pth";
 const DEFAULT_PREVIEW_SCALE = 120;
 const RECONNECT_CLOSE_TIMEOUT_MS = 15000;
-const LIVE_QUEUE_SECONDS = 0.45;
-const LOW_LATENCY_FPS_FLOOR = 10;
-const LOW_LATENCY_QUEUE_SECONDS = 0.35;
-const MAX_CATCHUP_FPS = 30;
-const EVENT_QUEUE_SECONDS = 0.25;
+const DECODE_QUEUE_SECONDS = 2.0;
+const STARTUP_DECODE_QUEUE_SECONDS = 2.5;
+const RECENT_DROP_DISPLAY_MS = 1800;
 const CONTROL_BUFFERED_AMOUNT_LIMIT = 1 << 20;
+const CONTROL_TRANSITION_FLUSH_DELAY_MS = 140;
 const CONTROL_KEY_ACTIONS = new Map([
   ["w", "w"],
   ["a", "a"],
@@ -58,7 +63,7 @@ const reactorPresets = [
     tone: "green",
     size: "832x480",
     fps: 25,
-    prompt: "A first-person perspective from the back of a colossal obsidian-black dragon in mid-flight, looking over its horned head and outstretched wings toward an ancient moss-covered castle rising above a dense jungle canopy, with mist, river gorges, and golden humid light.",
+    prompt: "A locked first-person dragon-rider view matching the reference image: both tan forearms in brown leather gloves stay visible at the bottom, gripping leather reins around the green-brown scaled dragon neck; the dragon head, horns, and both wide wings frame the jungle valley, waterfalls, mist, and tall castle on the right. Smooth forward flight only, keep the same rider hands, dragon body, wing silhouette, castle placement, and humid daylight colors in every frame.",
     referenceUrl: `${REACTOR_PRESET_BASE_URL}/dragon-ride.jpg`,
     source: "Reactor LingBot preset",
   },
@@ -180,7 +185,7 @@ const examplePresets = [
   { name: "Urban Tilt", tone: "accent", size: "832x480", fps: 25, prompt: "A cinematic urban wall shot with a slow tilt and slight forward movement, warm backlight, stable architecture.", referenceUrl: "https://raw.githubusercontent.com/robbyant/lingbot-world/main/examples/02/image.jpg", source: "LingBot example 02" },
   { name: "Lake Scout", tone: "green", size: "832x480", fps: 25, prompt: "A calm scouting shot across the lake, gentle camera drift, crisp mountains, stable reflections.", referenceUrl: "https://raw.githubusercontent.com/robbyant/lingbot-world/main/examples/03/image.jpg", source: "LingBot example 03" },
   { name: "Ziggy Stardust", tone: "accent", size: "832x480", fps: 25, prompt: "A static night view of a narrow London alley in soft rain, wet pavement reflecting a yellow streetlamp, the blue K. West sign glowing above a doorway, cardboard boxes near the wall, a pale parked car in the distance, and a slender glam-rock figure holding a guitar under the lamp; preserve the album-cover composition, brick storefronts, muted teal and amber colors, subtle rain shimmer only.", referenceUrl: "https://upload.wikimedia.org/wikipedia/en/0/01/ZiggyStardust.jpg", source: "David Bowie Ziggy Stardust artwork", mime: "image/jpeg" },
-  { name: "Plastic Beach", tone: "blue", size: "832x480", fps: 25, prompt: "A static locked-off view of the back side of Plastic Beach: a pastel toy-like island hotel built from plastic debris and washed-up junk in the open ocean, turquoise water in the foreground, distant horizon, clouds slowly drifting behind the island, tiny stars gently twinkling in the dusk sky, an occasional shooting star, and tiny distant pigeons crossing the sky; subtle water shimmer only, keep the island geometry fixed, no camera orbit, no dolly, no zoom.", referenceUrl: "https://is1-ssl.mzstatic.com/image/thumb/Music/v4/b8/f9/b9/b8f9b9f8-a609-bde2-0302-349436ffc508/825646291038.jpg/600x600bb.jpg", source: "Gorillaz Plastic Beach artwork", mime: "image/jpeg" },
+  { name: "Plastic Beach", tone: "blue", size: "832x480", fps: 25, prompt: "A static album-cover view matching the reference image: the Plastic Beach island stays centered above a dark midnight-blue ocean, the lighthouse remains on the left with its white reflection path, the starry navy sky stays unchanged, and the large white Plastic Beach title graphic stays in the lower foreground. Keep the original camera height, horizon, waterline, island silhouette, and deep blue color palette fixed; only tiny water shimmer, lighthouse glint, and subtle star twinkle, with no camera descent, no push-in, no orbit, and no turquoise color shift.", referenceUrl: "https://is1-ssl.mzstatic.com/image/thumb/Music/v4/b8/f9/b9/b8f9b9f8-a609-bde2-0302-349436ffc508/825646291038.jpg/600x600bb.jpg", source: "Gorillaz Plastic Beach artwork", mime: "image/jpeg" },
   { name: "Plastic Ono Band", tone: "green", size: "832x480", fps: 25, prompt: "A quiet sunlit park under a massive tree, a solitary figure resting in the grass, soft summer haze, restrained documentary camera, intimate and naturalistic.", referenceUrl: "https://upload.wikimedia.org/wikipedia/en/a/a4/JLPOBCover.jpg", source: "John Lennon/Plastic Ono Band artwork", mime: "image/jpeg" },
   { name: "Kid A", tone: "accent", size: "832x480", fps: 25, prompt: "A cold surreal mountain range with sharp icy peaks, black-red storm clouds, glacial light, slow lateral pan, abstract digital texture, uneasy atmospheric scale.", referenceUrl: "https://is1-ssl.mzstatic.com/image/thumb/Music122/v4/bd/8e/13/bd8e1358-b367-a689-cb84-cebd0b067dc4/634904078263.png/600x600bb.jpg", source: "Radiohead Kid A artwork", mime: "image/jpeg" },
 ];
@@ -191,28 +196,23 @@ const presets = [
 ];
 
 let ws = null;
-const referenceCache = new Map();
 let selectedPreset = null;
 let selectedReferenceBytes = null;
+let selectedReferenceUrl = "";
 let selectedReferenceLabel = "";
 let pendingHeader = null;
-let queue = [];
 let frames = 0;
 let bytes = 0;
-let lastFrameAt = 0;
-let chunkWaitStartedAt = 0;
 let clearQueueOnClose = false;
 let fpsSamples = [];
-let playbackFps = 0;
-let droppedFrames = 0;
-let decodeChain = Promise.resolve();
+let decodeQueue = [];
+let queuedDecodeFrames = 0;
+let decodeInProgress = false;
 let pendingDecodeBatches = 0;
+let droppedDecodeFrames = 0;
+let lastDecodeDropAt = 0;
+let lastDecodeDropCount = 0;
 let nextEventId = 1;
-let awaitedEventId = 0;
-let awaitedEventSentAt = 0;
-let chunkReceiveStartedAt = 0;
-let currentReceiveChunk = null;
-let currentReceiveChunkFrames = 0;
 let lastRawRgbFrame = null;
 let decoderWorker = null;
 let decodeWorkerUnavailable = false;
@@ -226,6 +226,17 @@ let socketCloseExpected = false;
 let socketServerError = "";
 let renderedPreviewFrames = 0;
 let previewScaleFrame = 0;
+let recordingActive = false;
+let recordingSamples = [];
+let recordingEncoder = null;
+let recordingEncoderReady = null;
+let recordingEncoderConfig = null;
+let recordingFrameIndex = 0;
+let recordingStartedAt = 0;
+let recordingFirstFrameAt = 0;
+let recordingTimer = 0;
+let recordingSaving = false;
+let recordingEncodeChain = Promise.resolve();
 const decodeRequests = new Map();
 let controlStateController = null;
 
@@ -235,6 +246,9 @@ const canvas = $("viewport");
 const ctx = canvas.getContext("2d", { alpha: false });
 const scratchCanvas = document.createElement("canvas");
 const scratchCtx = scratchCanvas.getContext("2d", { alpha: false });
+const playbackController = new RealtimePlaybackController({
+  targetFps: DEFAULT_TARGET_FPS,
+});
 
 function setStatus(text, kind = "") {
   $("statusText").textContent = text;
@@ -269,20 +283,18 @@ function drawIdle() {
 function resetStreamStats() {
   pendingHeader = null;
   clearFrameQueue();
+  playbackController.reset({ targetFps: previewPlaybackTargetFps() });
   frames = 0;
   bytes = 0;
   fpsSamples = [];
-  chunkWaitStartedAt = 0;
   clearQueueOnClose = false;
-  playbackFps = Number($("fps").value || DEFAULT_TARGET_FPS);
-  droppedFrames = 0;
-  decodeChain = Promise.resolve();
+  decodeQueue = [];
+  queuedDecodeFrames = 0;
+  decodeInProgress = false;
   pendingDecodeBatches = 0;
-  awaitedEventId = 0;
-  awaitedEventSentAt = 0;
-  chunkReceiveStartedAt = 0;
-  currentReceiveChunk = null;
-  currentReceiveChunkFrames = 0;
+  droppedDecodeFrames = 0;
+  lastDecodeDropAt = 0;
+  lastDecodeDropCount = 0;
   encodedDecodeErrors = 0;
   renderedPreviewFrames = 0;
   controlStateController?.reset({ sendRelease: false });
@@ -370,15 +382,19 @@ async function decodeFrameBatch(header, data) {
   const payload = await payloadToArrayBuffer(data);
   const id = decodeRequestId++;
   const decodeHeader = { ...header, __decode_id: id };
-  const useTransfer = isWorkerDecodableRawContentType(header.content_type);
+  const useTransfer =
+    isWorkerDecodableRawContentType(header.content_type) ||
+    isEncodedPreviewContentType(header.content_type);
   try {
     return await new Promise((resolve, reject) => {
       decodeRequests.set(id, {
         resolve: (message) => {
           const decodedAt = performance.now();
           lastDecodeMs = decodedAt - decodeStartedAt;
-          resolve(message.frames.map((buffer) => ({
-            image: new ImageData(new Uint8ClampedArray(buffer), message.width, message.height),
+          resolve(message.frames.map((frame) => ({
+            image: message.frame_type === "bitmap"
+              ? frame
+              : new ImageData(new Uint8ClampedArray(frame), message.width, message.height),
             chunk: message.chunk,
             receivedAt: header.__received_at,
             decodedAt,
@@ -398,7 +414,7 @@ async function decodeFrameBatch(header, data) {
       }
     });
   } catch (error) {
-    if (isEncodedPreviewContentType(header.content_type)) {
+    if (isEncodedPreviewContentType(header.content_type) && !useTransfer) {
       const items = await framePayloadToImageData(header, data);
       const decodedAt = performance.now();
       lastDecodeMs = decodedAt - decodeStartedAt;
@@ -428,50 +444,560 @@ function isWorkerDecodableRawContentType(contentType) {
   );
 }
 
-function updateStats(header) {
-  $("queueText").textContent = droppedFrames
-    ? `queue ${queue.length} · drop ${droppedFrames}`
-    : `queue ${queue.length}`;
+function updateStats() {
+  const playback = playbackController.snapshot();
+  const queueParts = [`buffer ${formatMs(playback.bufferMs)}`];
+  queueParts.push(`q ${playback.queueFrames}`);
+  if (playback.buffering && playback.queueFrames) queueParts.push("hold");
+  if (pendingDecodeBatches) queueParts.push(`decode ${pendingDecodeBatches}`);
+  const now = performance.now();
+  if (playback.lastDropAt && now - playback.lastDropAt < RECENT_DROP_DISPLAY_MS) {
+    const reason = playback.lastDropReason ? ` ${playback.lastDropReason}` : "";
+    queueParts.push(`drop +${playback.lastDropCount}${reason}`);
+  }
+  if (lastDecodeDropAt && now - lastDecodeDropAt < RECENT_DROP_DISPLAY_MS) {
+    queueParts.push(`decode drop +${lastDecodeDropCount}`);
+  }
+  $("queueText").textContent = queueParts.join(" · ");
   $("frameText").textContent = `frames ${frames}`;
   $("byteText").textContent = `${(bytes / 1048576).toFixed(1)} MB`;
+  $("stageLatencyText").textContent =
+    `${formatMs(playback.bufferMs)} / ${formatMs(playback.targetLeadMs)}`;
 }
 
-function trimLiveQueue(latestFrameCount) {
-  const targetFps = Number($("fps").value || DEFAULT_TARGET_FPS);
-  const maxQueue = Math.max(
-    Number(latestFrameCount || 0),
-    Math.round(targetFps * LIVE_QUEUE_SECONDS),
-  );
-  if (queue.length <= maxQueue) return;
-  const dropCount = queue.length - maxQueue;
-  dropQueuedFrames(dropCount);
-  droppedFrames += dropCount;
+function requestedInputFps() {
+  return Number($("fps").value || DEFAULT_TARGET_FPS);
 }
 
-function liveQueueFrameFloor(header, decodedFrameCount) {
-  const frameBatchCount = Number(header.num_frame_batches || 1);
-  if (!isEncodedPreviewContentType(header.content_type) || frameBatchCount <= 1) {
-    return decodedFrameCount;
-  }
-  return Math.max(decodedFrameCount, frameBatchCount * decodedFrameCount);
+function frameInterpolationMultiplier() {
+  return $("frameInterpolation").checked ? 2 ** DEFAULT_FRAME_INTERPOLATION_EXP : 1;
 }
 
-function trimQueueForPendingEvent() {
-  const targetFps = playbackFps || Number($("fps").value || DEFAULT_TARGET_FPS);
-  const keep = Math.max(1, Math.round(targetFps * EVENT_QUEUE_SECONDS));
-  if (queue.length <= keep) return;
-  const dropCount = queue.length - keep;
-  dropQueuedFrames(dropCount);
-  droppedFrames += dropCount;
+function previewPlaybackTargetFps() {
+  return requestedInputFps() * frameInterpolationMultiplier();
+}
+
+function syncPlaybackTargetFps() {
+  playbackController.setTargetFps(previewPlaybackTargetFps());
+  updateStats();
 }
 
 function clearFrameQueue() {
-  for (const item of queue) item.image?.close?.();
-  queue = [];
+  closeFrames(playbackController.clear());
 }
 
-function dropQueuedFrames(count) {
-  for (const item of queue.splice(0, count)) item.image?.close?.();
+function closeFrames(items) {
+  for (const item of items || []) item.image?.close?.();
+}
+
+function recordingFileName() {
+  const stamp = new Date().toISOString().replace(/[:.]/g, "-");
+  return `sglang-realtime-${stamp}.mp4`;
+}
+
+function updateRecordButton() {
+  const button = $("recordBtn");
+  button.classList.toggle("is-recording", recordingActive);
+  button.classList.toggle("is-saving", recordingSaving);
+  button.disabled = recordingSaving;
+  button.setAttribute("aria-pressed", recordingActive ? "true" : "false");
+  $("recordLabel").textContent = recordingSaving
+    ? "Saving"
+    : recordingActive ? "Stop" : "Record";
+  const elapsedMs = recordingActive ? performance.now() - recordingStartedAt : 0;
+  $("recordDuration").textContent = formatRecordingDuration(elapsedMs);
+}
+
+function formatRecordingDuration(elapsedMs) {
+  const seconds = Math.max(0, Math.floor(elapsedMs / 1000));
+  const minutes = Math.floor(seconds / 60);
+  const rest = seconds % 60;
+  return `${String(minutes).padStart(2, "0")}:${String(rest).padStart(2, "0")}`;
+}
+
+function startRecording() {
+  if (recordingActive || recordingSaving) return;
+  if (!window.VideoEncoder || !window.VideoFrame) {
+    setStatus("MP4 unsupported", "error");
+    addHistory("MP4 recording requires WebCodecs H.264 support");
+    return;
+  }
+  recordingActive = true;
+  recordingSamples = [];
+  recordingEncoder = null;
+  recordingEncoderReady = null;
+  recordingEncoderConfig = null;
+  recordingFrameIndex = 0;
+  recordingStartedAt = performance.now();
+  recordingFirstFrameAt = 0;
+  recordingEncodeChain = Promise.resolve();
+  recordingTimer = window.setInterval(updateRecordButton, 250);
+  updateRecordButton();
+  addHistory("recording started");
+}
+
+async function stopRecording() {
+  if (!recordingActive || recordingSaving) return;
+  recordingActive = false;
+  if (recordingTimer) {
+    window.clearInterval(recordingTimer);
+    recordingTimer = 0;
+  }
+  recordingSaving = true;
+  updateRecordButton();
+
+  let fileHandle = null;
+  const fileName = recordingFileName();
+  try {
+    if (window.showSaveFilePicker) {
+      fileHandle = await window.showSaveFilePicker({
+        suggestedName: fileName,
+        types: [{
+          description: "MP4 video",
+          accept: { "video/mp4": [".mp4"] },
+        }],
+      });
+    }
+    await recordingEncodeChain;
+    if (!recordingEncoder || !recordingSamples.length) throw new Error("No frames were recorded");
+    await recordingEncoder.flush();
+    const mp4Blob = buildRecordingMp4();
+    if (fileHandle) {
+      const writable = await fileHandle.createWritable();
+      await writable.write(mp4Blob);
+      await writable.close();
+    } else {
+      downloadBlob(mp4Blob, fileName);
+    }
+    addHistory(`saved ${recordingSamples.length} frames as mp4`);
+  } catch (error) {
+    if (error?.name === "AbortError") {
+      addHistory("recording save canceled");
+    } else {
+      addHistory(error.message || "recording save failed");
+      setStatus("Save failed", "error");
+    }
+  } finally {
+    recordingEncoder?.close?.();
+    recordingEncoder = null;
+    recordingEncoderReady = null;
+    recordingSaving = false;
+    recordingSamples = [];
+    updateRecordButton();
+  }
+}
+
+function captureRecordingFrame(item, now) {
+  if (!recordingActive) return;
+  if (!recordingFirstFrameAt) recordingFirstFrameAt = now;
+  const timestamp = Math.max(0, Math.round((now - recordingFirstFrameAt) * 1000));
+  const duration = Math.round(1_000_000 / Math.max(1, previewPlaybackTargetFps()));
+  let frame;
+  try {
+    frame = new VideoFrame(canvas, { timestamp, duration });
+  } catch (error) {
+    recordingActive = false;
+    addHistory(error.message || "recording frame capture failed");
+    updateRecordButton();
+    return;
+  }
+  const index = recordingFrameIndex++;
+  recordingEncodeChain = recordingEncodeChain
+    .then(async () => {
+      await ensureRecordingEncoder(frame.displayWidth, frame.displayHeight);
+      recordingEncoder.encode(frame, { keyFrame: index === 0 || index % 120 === 0 });
+      frame.close();
+    })
+    .catch((error) => {
+      frame.close();
+      recordingActive = false;
+      addHistory(error.message || "recording encode failed");
+      updateRecordButton();
+    });
+}
+
+async function ensureRecordingEncoder(width, height) {
+  if (recordingEncoderReady) return recordingEncoderReady;
+  recordingEncoderReady = createRecordingEncoder(width, height);
+  return recordingEncoderReady;
+}
+
+async function createRecordingEncoder(width, height) {
+  const fps = Math.max(1, previewPlaybackTargetFps());
+  const bitrate = Math.round(Math.min(
+    180_000_000,
+    Math.max(24_000_000, width * height * fps * 0.8),
+  ));
+  const configs = [
+    { codec: "avc1.640028", width, height, bitrate, framerate: fps },
+    { codec: "avc1.4d4028", width, height, bitrate, framerate: fps },
+    { codec: "avc1.42e028", width, height, bitrate, framerate: fps },
+  ];
+  let supported = null;
+  for (const config of configs) {
+    const candidate = {
+      ...config,
+      avc: { format: "avc" },
+      bitrateMode: "variable",
+      hardwareAcceleration: "prefer-hardware",
+      latencyMode: "realtime",
+    };
+    const result = await VideoEncoder.isConfigSupported(candidate);
+    if (result.supported) {
+      supported = result.config;
+      break;
+    }
+  }
+  if (!supported) throw new Error("This browser cannot encode H.264 MP4");
+  recordingEncoderConfig = supported;
+  recordingEncoder = new VideoEncoder({
+    output: (chunk, metadata) => recordEncodedChunk(chunk, metadata),
+    error: (error) => {
+      recordingActive = false;
+      addHistory(error.message || "recording encoder failed");
+      updateRecordButton();
+    },
+  });
+  recordingEncoder.configure(supported);
+}
+
+function recordEncodedChunk(chunk, metadata) {
+  if (metadata?.decoderConfig?.description) {
+    recordingEncoderConfig.description = metadata.decoderConfig.description;
+  }
+  const data = new Uint8Array(chunk.byteLength);
+  chunk.copyTo(data);
+  recordingSamples.push({
+    data,
+    timestamp: chunk.timestamp,
+    duration: chunk.duration || 0,
+    key: chunk.type === "key",
+  });
+}
+
+function downloadBlob(blob, fileName) {
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = fileName;
+  document.body.appendChild(link);
+  link.click();
+  link.remove();
+  window.setTimeout(() => URL.revokeObjectURL(url), 1000);
+}
+
+function buildRecordingMp4() {
+  if (!recordingEncoderConfig.description) {
+    throw new Error("H.264 encoder did not return MP4 decoder config");
+  }
+  const width = recordingEncoderConfig.width;
+  const height = recordingEncoderConfig.height;
+  const samples = normalizeRecordingSamples(recordingSamples);
+  const mdatPayload = concatBytes(samples.map((sample) => sample.data));
+  const ftyp = mp4Box("ftyp", ascii("isom"), u32(0x200), ascii("isom"), ascii("iso2"), ascii("avc1"), ascii("mp41"));
+  const mdat = mp4Box("mdat", mdatPayload);
+  const firstSampleOffset = ftyp.byteLength + 8;
+  const moov = buildMoovBox({
+    width,
+    height,
+    samples,
+    firstSampleOffset,
+    avcConfig: new Uint8Array(recordingEncoderConfig.description),
+  });
+  return new Blob([ftyp, mdat, moov], { type: "video/mp4" });
+}
+
+function normalizeRecordingSamples(samples) {
+  const ordered = [...samples].sort((left, right) => left.timestamp - right.timestamp);
+  const timescale = 90_000;
+  const fallbackDuration = Math.round(timescale / Math.max(1, previewPlaybackTargetFps()));
+  const normalized = ordered.map((sample) => ({
+    ...sample,
+    time: Math.round(sample.timestamp * timescale / 1_000_000),
+  }));
+  for (let i = 0; i < normalized.length; i++) {
+    const next = normalized[i + 1];
+    normalized[i].duration = next
+      ? Math.max(1, next.time - normalized[i].time)
+      : Math.max(1, Math.round((ordered[i].duration || 0) * timescale / 1_000_000) || fallbackDuration);
+  }
+  return normalized;
+}
+
+function buildMoovBox({ width, height, samples, firstSampleOffset, avcConfig }) {
+  const timescale = 90_000;
+  const duration = samples.reduce((sum, sample) => sum + sample.duration, 0);
+  const movieTimescale = 1000;
+  const movieDuration = Math.ceil(duration * movieTimescale / timescale);
+  return mp4Box(
+    "moov",
+    buildMvhdBox(movieTimescale, movieDuration),
+    mp4Box(
+      "trak",
+      buildTkhdBox(width, height, movieDuration),
+      mp4Box(
+        "mdia",
+        buildMdhdBox(timescale, duration),
+        buildHdlrBox(),
+        mp4Box(
+          "minf",
+          buildVmhdBox(),
+          buildDinfBox(),
+          buildStblBox({ width, height, samples, firstSampleOffset, avcConfig }),
+        ),
+      ),
+    ),
+  );
+}
+
+function buildMvhdBox(timescale, duration) {
+  return mp4Box(
+    "mvhd",
+    u32(0),
+    u32(0),
+    u32(0),
+    u32(timescale),
+    u32(duration),
+    u32(0x00010000),
+    u16(0x0100),
+    u16(0),
+    zeros(8),
+    u32(0x00010000), u32(0), u32(0),
+    u32(0), u32(0x00010000), u32(0),
+    u32(0), u32(0), u32(0x40000000),
+    zeros(24),
+    u32(2),
+  );
+}
+
+function buildTkhdBox(width, height, duration) {
+  return mp4Box(
+    "tkhd",
+    u32(0x00000007),
+    u32(0),
+    u32(0),
+    u32(1),
+    u32(0),
+    u32(duration),
+    zeros(8),
+    u16(0),
+    u16(0),
+    u16(0),
+    u16(0),
+    u32(0x00010000), u32(0), u32(0),
+    u32(0), u32(0x00010000), u32(0),
+    u32(0), u32(0), u32(0x40000000),
+    u32(width << 16),
+    u32(height << 16),
+  );
+}
+
+function buildMdhdBox(timescale, duration) {
+  return mp4Box(
+    "mdhd",
+    u32(0),
+    u32(0),
+    u32(0),
+    u32(timescale),
+    u32(duration),
+    u16(0x55c4),
+    u16(0),
+  );
+}
+
+function buildHdlrBox() {
+  return mp4Box("hdlr", u32(0), u32(0), ascii("vide"), zeros(12), ascii("VideoHandler\0"));
+}
+
+function buildVmhdBox() {
+  return mp4Box("vmhd", u32(0x00000001), u16(0), u16(0), u16(0), u16(0));
+}
+
+function buildDinfBox() {
+  return mp4Box(
+    "dinf",
+    mp4Box(
+      "dref",
+      u32(0),
+      u32(1),
+      mp4Box("url ", u32(0x00000001)),
+    ),
+  );
+}
+
+function buildStblBox({ width, height, samples, firstSampleOffset, avcConfig }) {
+  return mp4Box(
+    "stbl",
+    buildStsdBox(width, height, avcConfig),
+    buildSttsBox(samples),
+    buildStssBox(samples),
+    buildStscBox(samples.length),
+    buildStszBox(samples),
+    buildStcoBox(firstSampleOffset),
+  );
+}
+
+function buildStsdBox(width, height, avcConfig) {
+  const compressor = new Uint8Array(32);
+  return mp4Box(
+    "stsd",
+    u32(0),
+    u32(1),
+    mp4Box(
+      "avc1",
+      zeros(6),
+      u16(1),
+      zeros(16),
+      u16(width),
+      u16(height),
+      u32(0x00480000),
+      u32(0x00480000),
+      u32(0),
+      u16(1),
+      compressor,
+      u16(24),
+      u16(0xffff),
+      mp4Box("avcC", avcConfig),
+    ),
+  );
+}
+
+function buildSttsBox(samples) {
+  const entries = [];
+  for (const sample of samples) {
+    const last = entries[entries.length - 1];
+    if (last && last.duration === sample.duration) {
+      last.count += 1;
+    } else {
+      entries.push({ count: 1, duration: sample.duration });
+    }
+  }
+  return mp4Box("stts", u32(0), u32(entries.length), ...entries.flatMap((entry) => [u32(entry.count), u32(entry.duration)]));
+}
+
+function buildStssBox(samples) {
+  const keySamples = samples
+    .map((sample, index) => sample.key ? index + 1 : 0)
+    .filter(Boolean);
+  if (!keySamples.length && samples.length) keySamples.push(1);
+  return mp4Box("stss", u32(0), u32(keySamples.length), ...keySamples.map(u32));
+}
+
+function buildStscBox(sampleCount) {
+  return mp4Box("stsc", u32(0), u32(1), u32(1), u32(sampleCount), u32(1));
+}
+
+function buildStszBox(samples) {
+  return mp4Box("stsz", u32(0), u32(0), u32(samples.length), ...samples.map((sample) => u32(sample.data.byteLength)));
+}
+
+function buildStcoBox(firstSampleOffset) {
+  return mp4Box("stco", u32(0), u32(1), u32(firstSampleOffset));
+}
+
+function mp4Box(type, ...payloads) {
+  const size = 8 + payloads.reduce((sum, payload) => sum + payload.byteLength, 0);
+  const output = new Uint8Array(size);
+  const view = new DataView(output.buffer);
+  view.setUint32(0, size, false);
+  output.set(ascii(type), 4);
+  let offset = 8;
+  for (const payload of payloads) {
+    output.set(payload, offset);
+    offset += payload.byteLength;
+  }
+  return output;
+}
+
+function concatBytes(parts) {
+  const output = new Uint8Array(parts.reduce((sum, part) => sum + part.byteLength, 0));
+  let offset = 0;
+  for (const part of parts) {
+    output.set(part, offset);
+    offset += part.byteLength;
+  }
+  return output;
+}
+
+function ascii(text) {
+  const output = new Uint8Array(text.length);
+  for (let i = 0; i < text.length; i++) output[i] = text.charCodeAt(i);
+  return output;
+}
+
+function zeros(length) {
+  return new Uint8Array(length);
+}
+
+function u16(value) {
+  const output = new Uint8Array(2);
+  new DataView(output.buffer).setUint16(0, value, false);
+  return output;
+}
+
+function u32(value) {
+  const output = new Uint8Array(4);
+  new DataView(output.buffer).setUint32(0, value >>> 0, false);
+  return output;
+}
+
+function hasPendingPlaybackInput() {
+  return (
+    pendingDecodeBatches > 0 ||
+    decodeInProgress ||
+    decodeQueue.length > 0 ||
+    Boolean(ws && ws.readyState === WebSocket.OPEN)
+  );
+}
+
+function enqueueDecodeBatch(header, data, epoch) {
+  const frameCount = Number(header.num_frames || 1);
+  decodeQueue.push({ header, data, epoch, frameCount });
+  queuedDecodeFrames += frameCount;
+  pendingDecodeBatches += 1;
+  trimDecodeQueue();
+  pumpDecodeQueue();
+  updateStats();
+}
+
+function trimDecodeQueue() {
+  if (!decodeQueue.length) return;
+  const playback = playbackController.snapshot();
+  const decodeWindowSeconds = renderedPreviewFrames
+    ? Math.max(DECODE_QUEUE_SECONDS, (playback.maxLeadMs || 0) / 1000)
+    : STARTUP_DECODE_QUEUE_SECONDS;
+  const maxQueuedFrames = Math.max(
+    2,
+    Math.round(previewPlaybackTargetFps() * decodeWindowSeconds),
+  );
+  while (queuedDecodeFrames > maxQueuedFrames && decodeQueue.length > 1) {
+    const item = decodeQueue[0];
+    if (!isEncodedPreviewContentType(item.header.content_type)) break;
+    decodeQueue.shift();
+    queuedDecodeFrames = Math.max(0, queuedDecodeFrames - item.frameCount);
+    pendingDecodeBatches = Math.max(0, pendingDecodeBatches - 1);
+    droppedDecodeFrames += item.frameCount;
+    lastDecodeDropAt = performance.now();
+    lastDecodeDropCount = item.frameCount;
+  }
+}
+
+async function pumpDecodeQueue() {
+  if (decodeInProgress) return;
+  const item = decodeQueue.shift();
+  if (!item) return;
+  queuedDecodeFrames = Math.max(0, queuedDecodeFrames - item.frameCount);
+  decodeInProgress = true;
+  try {
+    await decodeAndEnqueueFrameBatch(item.header, item.data, item.epoch);
+  } catch (error) {
+    handleReceiveError(error, item.epoch);
+  } finally {
+    pendingDecodeBatches = Math.max(0, pendingDecodeBatches - 1);
+    decodeInProgress = false;
+    updateStats();
+    if (decodeQueue.length) pumpDecodeQueue();
+  }
 }
 
 function rgbToImageData(header, payload) {
@@ -582,22 +1108,47 @@ function isEncodedPreviewContentType(contentType) {
 }
 
 async function encodedImageToImageData(header, payload) {
-  const blob = new Blob([payload], { type: header.content_type });
+  const framePayloads = splitEncodedPayload(header, payload);
   if (typeof createImageBitmap === "function") {
     try {
-      const bitmap = await createImageBitmap(blob);
-      return [{ image: bitmap, chunk: header.chunk_index }];
+      return await Promise.all(framePayloads.map(async (framePayload) => ({
+        image: await createImageBitmap(new Blob([framePayload], { type: header.content_type })),
+        chunk: header.chunk_index,
+      })));
     } catch (error) {
-      return [await encodedImageElementFallback(blob, header, error)];
+      return Promise.all(framePayloads.map((framePayload) => (
+        encodedImageElementFallback(
+          new Blob([framePayload], { type: header.content_type }),
+          header,
+          error,
+        )
+      )));
     }
   }
-  return [
-    await encodedImageElementFallback(
-      blob,
+  return Promise.all(framePayloads.map((framePayload) => (
+    encodedImageElementFallback(
+      new Blob([framePayload], { type: header.content_type }),
       header,
       new Error("createImageBitmap unavailable"),
-    ),
-  ];
+    )
+  )));
+}
+
+function splitEncodedPayload(header, payload) {
+  const bytes = payload instanceof Uint8Array ? payload : new Uint8Array(payload);
+  const lengths = Array.isArray(header.payload_lengths) && header.payload_lengths.length
+    ? header.payload_lengths.map(Number)
+    : [bytes.byteLength];
+  const payloads = [];
+  let offset = 0;
+  for (const length of lengths) {
+    payloads.push(bytes.buffer.slice(
+      bytes.byteOffset + offset,
+      bytes.byteOffset + offset + length,
+    ));
+    offset += length;
+  }
+  return payloads;
 }
 
 async function encodedImageElementFallback(blob, header, createBitmapError) {
@@ -691,20 +1242,14 @@ function drawFrame(image) {
 }
 
 function renderLoop(now) {
-  const targetFps = playbackFps || Number($("fps").value || DEFAULT_TARGET_FPS);
-  const queueSeconds = queue.length / Math.max(1, targetFps);
-  const catchupFps = !$("superResolution").checked && queueSeconds > LOW_LATENCY_QUEUE_SECONDS
-    ? Math.min(MAX_CATCHUP_FPS, Math.ceil(queue.length / LOW_LATENCY_QUEUE_SECONDS))
-    : targetFps;
-  const targetMs = 1000 / Math.max(1, catchupFps);
-  const elapsedMs = lastFrameAt ? now - lastFrameAt : targetMs;
-  if (queue.length && elapsedMs >= targetMs) {
-    const item = queue.shift();
+  const decision = playbackController.render(now, {
+    hasPendingInput: hasPendingPlaybackInput(),
+  });
+  closeFrames(decision.droppedFrames);
+  if (decision.action === "draw") {
+    const item = decision.frame;
     drawFrame(item.image);
-    // preserve remainder so 25fps is not quantized to 20fps on 60Hz rAF
-    lastFrameAt = !lastFrameAt || elapsedMs > targetMs * 4
-      ? now
-      : now - (elapsedMs % targetMs);
+    captureRecordingFrame(item, now);
     fpsSamples.push(now);
     fpsSamples = fpsSamples.filter((t) => now - t < 1000);
     const renderedFps = String(fpsSamples.length);
@@ -714,6 +1259,8 @@ function renderLoop(now) {
     $("decodeText").textContent = `${Math.round(item.decodeMs || lastDecodeMs)} ms`;
     $("displayLagText").textContent = `${(lastDisplayLagMs / 1000).toFixed(1)} s`;
     updateStats();
+  } else if (decision.action === "hold") {
+    updateStats();
   }
   requestAnimationFrame(renderLoop);
 }
@@ -721,7 +1268,7 @@ function renderLoop(now) {
 async function readFirstFrame() {
   const file = $("firstFrame").files[0];
   if (file) return new Uint8Array(await file.arrayBuffer());
-  return selectedReferenceBytes || undefined;
+  return selectedReferenceBytes || selectedReferenceUrl || undefined;
 }
 
 function drawReferencePreviewFromImageSource(src, label) {
@@ -746,30 +1293,18 @@ function drawReferencePreviewFromImageSource(src, label) {
 
 function drawReferencePreview(file) {
   selectedReferenceBytes = null;
+  selectedReferenceUrl = "";
   selectedReferenceLabel = file ? file.name : "";
   if (!file) return;
   drawReferencePreviewFromImageSource(URL.createObjectURL(file), file.name);
 }
 
-async function fetchPresetReference(preset) {
-  if (!referenceCache.has(preset.referenceUrl)) {
-    referenceCache.set(preset.referenceUrl, fetch(preset.referenceUrl).then(async (response) => {
-      if (!response.ok) throw new Error(`failed to load ${preset.source}`);
-      return new Uint8Array(await response.arrayBuffer());
-    }).catch((error) => {
-      referenceCache.delete(preset.referenceUrl);
-      throw error;
-    }));
-  }
-  return referenceCache.get(preset.referenceUrl);
-}
-
 async function setPresetReference(preset) {
-  selectedReferenceBytes = await fetchPresetReference(preset);
+  selectedReferenceBytes = null;
+  selectedReferenceUrl = preset.referenceUrl;
   selectedReferenceLabel = preset.source;
   $("firstFrame").value = "";
-  const blob = new Blob([selectedReferenceBytes], { type: preset.mime || "image/jpeg" });
-  drawReferencePreviewFromImageSource(URL.createObjectURL(blob), selectedReferenceLabel);
+  drawReferencePreviewFromImageSource(preset.referenceUrl, selectedReferenceLabel);
 }
 
 function showError(error) {
@@ -847,7 +1382,7 @@ async function connect() {
     }
     resetStreamStats();
     const epoch = ++streamEpoch;
-    if (!$("firstFrame").files[0] && !selectedReferenceBytes) {
+    if (!$("firstFrame").files[0] && !selectedReferenceBytes && !selectedReferenceUrl) {
       await setPresetReference(presets[0]);
     }
     const firstFrame = await readFirstFrame();
@@ -890,7 +1425,6 @@ async function connect() {
     socketServerError = "";
     socket.onopen = () => {
       if (epoch !== streamEpoch) return;
-      chunkWaitStartedAt = performance.now();
       socket.send(pack(init));
       setStatus("Starting", "live");
       addHistory(
@@ -972,13 +1506,7 @@ function receive(data, epoch) {
     if (message.type === "frame_batch") {
       const payload = message.payload;
       delete message.payload;
-      pendingDecodeBatches += 1;
-      decodeChain = decodeChain
-        .then(() => decodeAndEnqueueFrameBatch(message, payload, epoch))
-        .catch((error) => handleReceiveError(error, epoch))
-        .finally(() => {
-          pendingDecodeBatches = Math.max(0, pendingDecodeBatches - 1);
-        });
+      enqueueDecodeBatch(message, payload, epoch);
       setStatus("Live", "live");
       return;
     }
@@ -988,20 +1516,12 @@ function receive(data, epoch) {
   }
   const header = pendingHeader;
   pendingHeader = null;
-  pendingDecodeBatches += 1;
-  decodeChain = decodeChain
-    .then(() => decodeAndEnqueueFrameBatch(header, data, epoch))
-    .catch((error) => handleReceiveError(error, epoch))
-    .finally(() => {
-      pendingDecodeBatches = Math.max(0, pendingDecodeBatches - 1);
-    });
+  enqueueDecodeBatch(header, data, epoch);
 }
 
 async function decodeAndEnqueueFrameBatch(header, data, epoch) {
-  const eventId = Number(header.event_id || 0);
   const chunkFrameCount = Number(header.num_frames || 0);
   const payloadBytes = data.byteLength || data.size || 0;
-  const isEventCutover = awaitedEventId && eventId >= awaitedEventId;
   let decodedFrames;
   try {
     decodedFrames = await decodeFrameBatch(header, data);
@@ -1015,27 +1535,19 @@ async function decodeAndEnqueueFrameBatch(header, data, epoch) {
     for (const item of decodedFrames) item.image?.close?.();
     return;
   }
-  if (isEventCutover) {
-    droppedFrames += queue.length;
-    clearFrameQueue();
-    lastFrameAt = 0;
-    if (awaitedEventSentAt) {
-      const eventLatency = (performance.now() - awaitedEventSentAt) / 1000;
-      $("latencyText").textContent = `${eventLatency.toFixed(1)}s · event`;
-      $("stageLatencyText").textContent = `${eventLatency.toFixed(1)}s · event`;
-    }
-    awaitedEventId = 0;
-    awaitedEventSentAt = 0;
+  const now = performance.now();
+  const enqueueResult = playbackController.enqueueDecodedFrames(header, decodedFrames, now);
+  closeFrames(enqueueResult.droppedFrames);
+  if (enqueueResult.cutover?.latencyMs) {
+    const eventLatency = enqueueResult.cutover.latencyMs / 1000;
+    $("latencyText").textContent = `${eventLatency.toFixed(1)}s · event`;
   }
-  queue.push(...decodedFrames);
-  trimLiveQueue(liveQueueFrameFloor(header, chunkFrameCount));
   frames += chunkFrameCount;
   bytes += payloadBytes;
   $("payloadMode").textContent = header.encoding || "raw RGB";
   updateOutputSizeFromHeader(header);
-  updatePlaybackPace(header, performance.now(), chunkFrameCount);
   setStatus("Live", "live");
-  updateStats(header);
+  updateStats();
 }
 
 function updateServerChunkStats(stats) {
@@ -1043,51 +1555,26 @@ function updateServerChunkStats(stats) {
   const wsWrite = Number(stats.ws_write_ms || 0) / 1000;
   const chunkTotal = Number(stats.chunk_total_ms || 0) / 1000;
   const numFrames = Number(stats.num_frames || 0);
-  const requestedFps = Number($("fps").value || DEFAULT_TARGET_FPS);
+  const chunkIndex = Number(stats.chunk_index || 0);
+  const targetFps = previewPlaybackTargetFps();
   const theoreticalFps = chunkTotal > 0 ? numFrames / chunkTotal : 0;
-  const realtimeRatio = requestedFps > 0 ? theoreticalFps / requestedFps : 0;
+  const playback = playbackController.observeServerStats(stats, performance.now());
+  const realtimeRatio = targetFps > 0 ? theoreticalFps / targetFps : 0;
+  const isWarmupChunk =
+    chunkIndex === 0 && theoreticalFps > 0 && theoreticalFps < targetFps * 0.8;
   $("serverSendText").textContent = `raw ${rawWrite.toFixed(2)}s · ws ${wsWrite.toFixed(2)}s`;
   $("chunkPayloadText").textContent = `${formatBytes(stats.ws_payload_bytes || 0)} · ${numFrames}f`;
-  $("theoreticalFpsText").textContent = theoreticalFps > 0
-    ? `${theoreticalFps.toFixed(1)} fps · ${realtimeRatio.toFixed(2)}x`
+  $("theoreticalFpsText").textContent = isWarmupChunk
+    ? `warmup · ${chunkTotal.toFixed(2)}s`
+    : theoreticalFps > 0
+    ? `${playback.sourceFps.toFixed(1)} fps · ${realtimeRatio.toFixed(2)}x`
     : "-";
+  if (chunkTotal > 0) {
+    $("latencyText").textContent = `${chunkTotal.toFixed(2)}s · ${playback.sourceFps.toFixed(1)}fps`;
+  }
   if (stats.content_type) $("payloadMode").textContent = shortPayloadMode(stats.content_type);
 }
 
-function updatePlaybackPace(header, now, frameCount) {
-  const chunkIndex = Number(header.chunk_index || 0);
-  if (currentReceiveChunk !== chunkIndex) {
-    currentReceiveChunk = chunkIndex;
-    currentReceiveChunkFrames = 0;
-    chunkReceiveStartedAt = chunkWaitStartedAt || now;
-  }
-  currentReceiveChunkFrames += Number(frameCount || 0);
-  const frameBatchIndex = Number(header.frame_batch_index || 0);
-  const numFrameBatches = Number(header.num_frame_batches || 1);
-  const isFinalFrameBatch =
-    Boolean(header.is_final_frame_batch) ||
-    frameBatchIndex + 1 >= numFrameBatches;
-  if (!isFinalFrameBatch || !chunkWaitStartedAt) return;
-
-  const waitSeconds = (now - chunkWaitStartedAt) / 1000;
-  if (waitSeconds > 0) {
-    const generatedFps = currentReceiveChunkFrames / Math.max(0.001, waitSeconds);
-    const requestedFps = Number($("fps").value || DEFAULT_TARGET_FPS);
-    const playbackFloor = $("superResolution").checked ? 1 : LOW_LATENCY_FPS_FLOOR;
-    playbackFps = Math.min(
-      requestedFps,
-      Math.max(playbackFloor, generatedFps * 1.05),
-    );
-    const latencyText = `${waitSeconds.toFixed(1)}s · ${playbackFps.toFixed(1)}fps`;
-    $("latencyText").textContent = latencyText;
-    $("stageLatencyText").textContent = latencyText;
-  }
-  chunkWaitStartedAt = performance.now();
-  chunkReceiveStartedAt = chunkWaitStartedAt;
-  currentReceiveChunk = null;
-  currentReceiveChunkFrames = 0;
-}
-
 function sendEvent(kind, payload, historyText = null) {
   if (!ws || ws.readyState !== WebSocket.OPEN) {
     addHistory(`${historyText || `${kind} event`} · socket not open`);
@@ -1096,9 +1583,9 @@ function sendEvent(kind, payload, historyText = null) {
   const eventId = nextEventId++;
   ws.send(pack({ type: "event", kind, payload, event_id: eventId }));
   if (kind === "camera_actions" || kind === "prompt") {
-    awaitedEventId = eventId;
-    awaitedEventSentAt = performance.now();
-    trimQueueForPendingEvent();
+    playbackController.noteInputEvent(eventId, performance.now(), {
+      cutoverMode: cameraActionHasActiveMotion(payload) || kind === "prompt" ? "motion" : "settle",
+    });
     updateStats();
     setStatus("Updating", "live");
   }
@@ -1106,6 +1593,12 @@ function sendEvent(kind, payload, historyText = null) {
   return eventId;
 }
 
+function cameraActionHasActiveMotion(payload) {
+  const transitions = payload?.transitions || [];
+  const finalTransition = transitions[transitions.length - 1];
+  return Array.isArray(finalTransition?.actions) && finalTransition.actions.length > 0;
+}
+
 function sendCameraControlTransitions(transitions) {
   if (!transitions.length) return null;
   const payload = {
@@ -1130,6 +1623,7 @@ async function applyPreset(preset, options = {}) {
   $("size").value = preset.size;
   $("fps").value = preset.fps;
   updateOutputSizeText();
+  syncPlaybackTargetFps();
   await setPresetReference(preset);
   if (sendRuntimeEvents) {
     sendEvent("prompt", preset.prompt, `prompt update · ${preset.name}`);
@@ -1249,13 +1743,34 @@ function readPreviewTransportParams() {
   const outputFormat = $("transportFormat").value;
   const outputQuality = Number($("transportQuality").value || DEFAULT_PREVIEW_OUTPUT_QUALITY);
   if (!outputFormat) return {};
-  const params = { realtime_output_format: outputFormat };
+  const params = {
+    realtime_output_format: outputFormat,
+    realtime_output_pacing: true,
+  };
   if (outputFormat === "webp" || outputFormat === "jpeg") {
     params.output_compression = outputQuality;
+    if ($("superResolution").checked && $("frameInterpolation").checked) {
+      const baseSize = parseSizeValue($("size").value);
+      if (baseSize?.width) params.realtime_preview_max_width = baseSize.width;
+    }
   }
   return params;
 }
 
+function tunePreviewQualityForPostprocess() {
+  if ($("transportFormat").value !== "webp") return;
+  const currentQuality = Number($("transportQuality").value || DEFAULT_PREVIEW_OUTPUT_QUALITY);
+  let qualityCap = MAX_WEBP_PREVIEW_OUTPUT_QUALITY;
+  if ($("frameInterpolation").checked && $("superResolution").checked) {
+    qualityCap = HEAVY_PREVIEW_OUTPUT_QUALITY;
+  } else if ($("frameInterpolation").checked) {
+    qualityCap = SMOOTH_PREVIEW_OUTPUT_QUALITY;
+  } else if ($("superResolution").checked) {
+    qualityCap = SR_PREVIEW_OUTPUT_QUALITY;
+  }
+  if (currentQuality > qualityCap) $("transportQuality").value = String(qualityCap);
+}
+
 function readFrameInterpolationParams() {
   if (!$("frameInterpolation").checked) return {};
   return {
@@ -1271,10 +1786,13 @@ function readUpscalingScale() {
 
 function readSuperResolutionParams() {
   if (!$("superResolution").checked) return {};
-  return {
+  const params = {
     enable_upscaling: true,
     upscaling_scale: readUpscalingScale(),
   };
+  const modelPath = $("upscalingModel").value;
+  if (modelPath) params.upscaling_model_path = modelPath;
+  return params;
 }
 
 function parseSizeValue(sizeText) {
@@ -1304,13 +1822,19 @@ function updateOutputSizeText(width = null, height = null) {
 }
 
 function updateOutputSizeFromHeader(header) {
-  const width = Number(header.width || 0);
-  const height = Number(header.height || 0);
-  if (width && height) updateOutputSizeText(width, height);
+  const width = Number(header.source_width || header.width || 0);
+  const height = Number(header.source_height || header.height || 0);
+  if (!width || !height) return;
+  updateOutputSizeText(width, height);
+  if (header.preview_width && header.preview_height) {
+    $("outputSizeText").textContent += ` · preview ${header.preview_width}x${header.preview_height}`;
+  }
 }
 
 function updateSuperResolutionControls() {
-  $("upscalingScale").disabled = !$("superResolution").checked;
+  const disabled = !$("superResolution").checked;
+  $("upscalingScale").disabled = disabled;
+  $("upscalingModel").disabled = disabled;
   updateOutputSizeText();
 }
 
@@ -1343,6 +1867,12 @@ function formatBytes(value) {
   return `${(Number(value || 0) / 1048576).toFixed(1)} MB`;
 }
 
+function formatMs(value) {
+  const ms = Number(value || 0);
+  if (ms >= 1000) return `${(ms / 1000).toFixed(1)}s`;
+  return `${Math.round(ms)}ms`;
+}
+
 function renderPresets() {
   $("presetList").innerHTML = "";
   presets.forEach((preset) => {
@@ -1357,6 +1887,23 @@ function renderPresets() {
 
 async function applyQueryParams() {
   const params = new URLSearchParams(window.location.search);
+  const server = params.get("server");
+  if (server) $("serverUrl").value = server;
+  const model = params.get("model");
+  if (model) $("model").value = model;
+  $("transportFormat").value = params.get("transport") || DEFAULT_PREVIEW_OUTPUT_FORMAT;
+  $("transportQuality").value = params.get("quality") || String(DEFAULT_PREVIEW_OUTPUT_QUALITY);
+  const srParam = params.get("sr");
+  $("superResolution").checked = srParam === "1" || srParam === "true";
+  const smoothParam = params.get("smooth");
+  $("frameInterpolation").checked = smoothParam === "1" || smoothParam === "true";
+  $("upscalingScale").value = params.get("sr_scale") || String(DEFAULT_UPSCALING_SCALE);
+  $("upscalingModel").value = params.get("sr_model") || DEFAULT_UPSCALING_MODEL;
+  tunePreviewQualityForPostprocess();
+  setPreviewScale(params.get("preview_scale") || params.get("zoom"));
+  updateSuperResolutionControls();
+  syncPlaybackTargetFps();
+
   const presetKey = params.get("preset");
   let appliedPreset = false;
   if (presetKey) {
@@ -1370,17 +1917,6 @@ async function applyQueryParams() {
       appliedPreset = true;
     }
   }
-  const server = params.get("server");
-  if (server) $("serverUrl").value = server;
-  const model = params.get("model");
-  if (model) $("model").value = model;
-  $("transportFormat").value = params.get("transport") || DEFAULT_PREVIEW_OUTPUT_FORMAT;
-  $("transportQuality").value = params.get("quality") || String(DEFAULT_PREVIEW_OUTPUT_QUALITY);
-  const srParam = params.get("sr");
-  $("superResolution").checked = srParam === "1" || srParam === "true";
-  $("upscalingScale").value = params.get("sr_scale") || String(DEFAULT_UPSCALING_SCALE);
-  setPreviewScale(params.get("preview_scale") || params.get("zoom"));
-  updateSuperResolutionControls();
   return {
     model: Boolean(model),
     preset: Boolean(presetKey && appliedPreset),
@@ -1459,6 +1995,12 @@ function unpack(buf) {
         (buf[i++] * 16777216) + (buf[i++] << 16) + (buf[i++] << 8) + buf[i++],
       );
     }
+    if (b === 0xdc) return Array.from({ length: (buf[i++] << 8) | buf[i++] }, read);
+    if (b === 0xdd) {
+      return Array.from({
+        length: (buf[i++] * 16777216) + (buf[i++] << 16) + (buf[i++] << 8) + buf[i++],
+      }, read);
+    }
     if (b === 0xd9) return readStr(buf[i++]);
     if (b === 0xda) return readStr((buf[i++] << 8) | buf[i++]);
     if (b === 0xde) return readMap((buf[i++] << 8) | buf[i++]);
@@ -1478,21 +2020,38 @@ renderPresets();
 drawIdle();
 setPreviewScale(DEFAULT_PREVIEW_SCALE);
 updateSuperResolutionControls();
-applyPreset(presets[0], { sendRuntimeEvents: false })
-  .then(applyQueryParams)
+applyQueryParams()
+  .then(async (query) => {
+    if (!query.preset) await applyPreset(presets[0], { sendRuntimeEvents: false });
+    return query;
+  })
   .then((query) => queryServerModelInfo({
     applyPresetForModel: !query.model && !query.preset,
   }))
   .catch(showError);
 requestAnimationFrame(renderLoop);
+updateRecordButton();
 $("connectBtn").onclick = connect;
 $("stopBtn").onclick = () => closeSession();
 $("sendPromptBtn").onclick = () => sendEvent("prompt", $("prompt").value);
 $("enhanceBtn").onclick = enhancePrompt;
+$("recordBtn").onclick = () => {
+  if (recordingActive) {
+    stopRecording();
+  } else {
+    startRecording();
+  }
+};
 $("firstFrame").onchange = () => drawReferencePreview($("firstFrame").files[0]);
 $("size").addEventListener("input", () => updateOutputSizeText());
+$("fps").addEventListener("input", syncPlaybackTargetFps);
 $("superResolution").addEventListener("change", updateSuperResolutionControls);
 $("upscalingScale").addEventListener("change", () => updateOutputSizeText());
+$("frameInterpolation").addEventListener("change", () => {
+  tunePreviewQualityForPostprocess();
+  syncPlaybackTargetFps();
+});
+$("superResolution").addEventListener("change", tunePreviewQualityForPostprocess);
 $("previewScale").addEventListener("input", () => setPreviewScale($("previewScale").value));
 $("serverUrl").addEventListener("change", () => {
   queryServerModelInfo({ applyPresetForModel: true }).catch(showError);
@@ -1536,14 +2095,14 @@ class ControlStateController {
   constructor() {
     this.activeActions = new Set();
     this.pendingTransitions = [];
-    this.flushScheduled = false;
+    this.flushTimer = 0;
   }
 
   reset({ sendRelease = false } = {}) {
     const hadActions = this.activeActions.size > 0;
     this.activeActions.clear();
     this.pendingTransitions = [];
-    this.flushScheduled = false;
+    this.clearFlushTimer();
     this.updateButtons();
     if (sendRelease && hadActions) {
       this.enqueueTransition();
@@ -1579,15 +2138,15 @@ class ControlStateController {
   }
 
   scheduleFlush() {
-    if (this.flushScheduled) return;
-    this.flushScheduled = true;
-    queueMicrotask(() => {
-      this.flushScheduled = false;
+    if (this.flushTimer) return;
+    this.flushTimer = window.setTimeout(() => {
+      this.flushTimer = 0;
       this.flush();
-    });
+    }, CONTROL_TRANSITION_FLUSH_DELAY_MS);
   }
 
   flush() {
+    this.clearFlushTimer();
     if (!this.pendingTransitions.length) return;
     if (ws && ws.bufferedAmount > CONTROL_BUFFERED_AMOUNT_LIMIT) {
       this.compactPendingToLatestPulse();
@@ -1623,6 +2182,12 @@ class ControlStateController {
   sameActions(left, right) {
     return left.length === right.length && left.every((item, idx) => item === right[idx]);
   }
+
+  clearFlushTimer() {
+    if (!this.flushTimer) return;
+    window.clearTimeout(this.flushTimer);
+    this.flushTimer = 0;
+  }
 }
 
 const CONTROL_ACTION_META_KEYS = Object.keys(CONTROL_ACTION_META);
diff --git a/python/sglang/multimodal_gen/apps/realtime_webui/decoder_worker.js b/python/sglang/multimodal_gen/apps/realtime_webui/decoder_worker.js
index 5aa10a2f2..5695f310d 100644
--- a/python/sglang/multimodal_gen/apps/realtime_webui/decoder_worker.js
+++ b/python/sglang/multimodal_gen/apps/realtime_webui/decoder_worker.js
@@ -80,24 +80,36 @@ function rawFramesToRgbaBuffers(header, payload) {
   return buffers;
 }
 
-async function encodedFrameToRgbaBuffers(header, payload) {
-  if (typeof createImageBitmap === "undefined" || typeof OffscreenCanvas === "undefined") {
+function splitEncodedPayload(header, payload) {
+  const bytes = payload instanceof Uint8Array ? payload : new Uint8Array(payload);
+  const lengths = Array.isArray(header.payload_lengths) && header.payload_lengths.length
+    ? header.payload_lengths.map(Number)
+    : [bytes.byteLength];
+  const payloads = [];
+  let offset = 0;
+  for (const length of lengths) {
+    payloads.push(bytes.buffer.slice(
+      bytes.byteOffset + offset,
+      bytes.byteOffset + offset + length,
+    ));
+    offset += length;
+  }
+  return payloads;
+}
+
+async function encodedFramesToImageBitmaps(header, payload) {
+  if (typeof createImageBitmap === "undefined") {
     throw new Error("This browser does not support worker image decoding");
   }
 
-  const blob = new Blob([payload], { type: header.content_type });
-  const bitmap = await createImageBitmap(blob);
-  const width = bitmap.width;
-  const height = bitmap.height;
-  const canvas = new OffscreenCanvas(width, height);
-  const ctx = canvas.getContext("2d", { alpha: false });
-  ctx.drawImage(bitmap, 0, 0);
-  const image = ctx.getImageData(0, 0, width, height);
-  bitmap.close?.();
+  const frames = await Promise.all(splitEncodedPayload(header, payload).map((framePayload) => (
+    createImageBitmap(new Blob([framePayload], { type: header.content_type }))
+  )));
   return {
-    width,
-    height,
-    frames: [image.data.buffer],
+    width: frames[0]?.width || 0,
+    height: frames[0]?.height || 0,
+    frame_type: "bitmap",
+    frames,
   };
 }
 
@@ -107,12 +119,13 @@ async function decode(header, payload) {
     header.content_type === WEBP_FRAME_CONTENT_TYPE ||
     header.content_type === JPEG_FRAME_CONTENT_TYPE
   ) {
-    const decoded = await encodedFrameToRgbaBuffers(header, payload);
+    const decoded = await encodedFramesToImageBitmaps(header, payload);
     return {
       id: header.__decode_id,
       width: decoded.width,
       height: decoded.height,
       chunk: Number(header.chunk_index),
+      frame_type: decoded.frame_type,
       frames: decoded.frames,
     };
   } else if (header.content_type === RAW_RGB_CONTENT_TYPE) {
@@ -148,10 +161,7 @@ self.onmessage = async (event) => {
       return;
     }
     const result = await decode(message.header, message.payload);
-    self.postMessage(
-      { type: "decoded", ...result },
-      result.frames,
-    );
+    self.postMessage({ type: "decoded", ...result }, result.frames);
   } catch (error) {
     self.postMessage({
       type: "error",
diff --git a/python/sglang/multimodal_gen/apps/realtime_webui/index.html b/python/sglang/multimodal_gen/apps/realtime_webui/index.html
index 804d33358..52ead9561 100644
--- a/python/sglang/multimodal_gen/apps/realtime_webui/index.html
+++ b/python/sglang/multimodal_gen/apps/realtime_webui/index.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>sglang-diffusion Realtime Studio</title>
-    <link rel="stylesheet" href="./styles.css?v=realtime-sr-v38" />
+    <link rel="stylesheet" href="./styles.css?v=realtime-record-v49" />
   </head>
   <body>
     <main class="shell">
@@ -60,6 +60,18 @@
             </select>
           </label>
         </div>
+        <label>SR model
+          <select id="upscalingModel">
+            <option value="">Quality x2</option>
+            <option
+              value="https://github.com/xinntao/Real-ESRGAN/releases/download/v0.2.5.0/realesr-general-x4v3.pth"
+              selected
+            >
+              Fast general
+            </option>
+            <option value="/scratch/realesr-animevideov3.pth">Fast anime</option>
+          </select>
+        </label>
         <label class="toggle-row"><input id="frameInterpolation" type="checkbox" />Smooth 2x frames</label>
         <label class="toggle-row"><input id="continuous" type="checkbox" checked />Continuous session</label>
         <div class="actions">
@@ -75,6 +87,11 @@
             <span id="statusDot" class="dot"></span>
             <span id="statusText">Idle</span>
             <span id="chunkText">chunk -</span>
+            <button id="recordBtn" class="record-button" type="button" aria-pressed="false" title="Record preview">
+              <span class="record-button-icon" aria-hidden="true"></span>
+              <span id="recordLabel">Record</span>
+              <span id="recordDuration" class="record-button-duration">00:00</span>
+            </button>
             <span class="topbar-spacer"></span>
             <label class="preview-scale-control">Preview
               <input id="previewScale" type="range" min="80" max="170" value="120" />
@@ -82,8 +99,8 @@
             </label>
             <span class="stage-stat">output <b id="outputSizeText">832x480</b></span>
             <span class="stage-stat">render <b id="renderFps">0</b> fps</span>
-            <span class="stage-stat">theoretical <b id="theoreticalFpsText">-</b></span>
-            <span class="stage-stat">wait <b id="stageLatencyText">-</b></span>
+            <span class="stage-stat">source <b id="theoreticalFpsText">-</b></span>
+            <span class="stage-stat">buffer <b id="stageLatencyText">-</b></span>
           </div>
           <div class="preview-frame">
             <canvas id="viewport" width="1280" height="720"></canvas>
@@ -145,6 +162,7 @@
         </section>
       </section>
     </main>
-    <script src="./app.js?v=realtime-sr-v38"></script>
-  </body>
+  <script src="./playback_controller.js?v=realtime-playback-v13"></script>
+  <script src="./app.js?v=realtime-record-v72"></script>
+</body>
 </html>
diff --git a/python/sglang/multimodal_gen/apps/realtime_webui/playback_controller.js b/python/sglang/multimodal_gen/apps/realtime_webui/playback_controller.js
new file mode 100644
index 000000000..ee8cca08f
--- /dev/null
+++ b/python/sglang/multimodal_gen/apps/realtime_webui/playback_controller.js
@@ -0,0 +1,517 @@
+(function attachRealtimePlaybackController(global) {
+  const DEFAULT_CONFIG = {
+    targetFps: 25,
+    minSourceFps: 1,
+    serverFpsAlphaUp: 0.28,
+    serverFpsAlphaDown: 0.2,
+    deliveryFpsAlphaUp: 0.08,
+    deliveryFpsAlphaDown: 0.55,
+    targetLeadChunkRatio: 1.5,
+    minTargetLeadMs: 1500,
+    maxTargetLeadMs: 2600,
+    maxLeadExtraChunkRatio: 8.0,
+    startLeadChunkRatio: 1.85,
+    minStartLeadMs: 1700,
+    resumeLeadChunkRatio: 2.5,
+    minResumeLeadMs: 1000,
+    maxResumeLeadMs: 1800,
+    rebufferLeadBoostMs: 250,
+    rebufferLeadBoostDecayMsPerSecond: 120,
+    deliveryLeadBoostDecayMsPerSecond: 80,
+    maxDeliveryLeadBoostMs: 2000,
+    deliveryStallExpectedMultiplier: 1.25,
+    receiveStallPlaybackRateMin: 0.65,
+    receiveStallPlaybackRateSlewPerSecond: 0.5,
+    lowWaterRatio: 0.4,
+    playbackRateGain: 0.14,
+    playbackRateMin: 0.92,
+    playbackRateMax: 1.08,
+    emergencyPlaybackRateMin: 0.9,
+    emergencyPlaybackRateMax: 1.12,
+    playbackRateSlewPerSecond: 0.08,
+    eventCutoverMaxMs: 420,
+    eventCutoverMaxFrames: 10,
+    settleEventCutoverMaxMs: 720,
+    settleEventCutoverMaxFrames: 18,
+    startupWarmupMinMs: 1500,
+    startupWarmupExpectedMultiplier: 3,
+  };
+
+  function clamp(value, min, max) {
+    return Math.min(max, Math.max(min, value));
+  }
+
+  function finitePositive(value) {
+    return Number.isFinite(value) && value > 0;
+  }
+
+  class RealtimePlaybackController {
+    constructor(config = {}) {
+      this.config = { ...DEFAULT_CONFIG, ...config };
+      this.reset({ targetFps: this.config.targetFps });
+    }
+
+    reset({ targetFps } = {}) {
+      this.targetFps = Math.max(1, Number(targetFps || this.config.targetFps));
+      this.sourceFps = this.targetFps;
+      this.serverFps = this.targetFps;
+      this.deliveryFps = this.targetFps;
+      this.hasServerSample = false;
+      this.hasDeliverySample = false;
+      this.latestChunkDurationMs = 1000 / this.targetFps;
+      this.latestChunkFrames = 1;
+      this.playbackRate = 1;
+      this.renderFps = this.targetFps;
+      this.queue = [];
+      this.lastDrawAt = 0;
+      this.lastRateUpdateAt = 0;
+      this.renderedFrames = 0;
+      this.droppedFrames = 0;
+      this.buffering = true;
+      this.pendingEventId = 0;
+      this.pendingEventSentAt = 0;
+      this.pendingEventCutoverMode = "motion";
+      this.lastDropReason = "";
+      this.lastDropAt = 0;
+      this.lastDropCount = 0;
+      this.rebufferLeadBoostMs = 0;
+      this.deliveryLeadBoostMs = 0;
+      this.chunkReceives = new Map();
+      this.serverStatChunks = new Set();
+      this.lastFinalReceiveAt = 0;
+      this.receiveStalled = false;
+    }
+
+    setTargetFps(targetFps) {
+      const nextTargetFps = Math.max(1, Number(targetFps || this.config.targetFps));
+      this.targetFps = nextTargetFps;
+      if (!this.hasServerSample && !this.hasDeliverySample) {
+        this.serverFps = nextTargetFps;
+        this.deliveryFps = nextTargetFps;
+        this.sourceFps = nextTargetFps;
+        this.renderFps = nextTargetFps;
+      } else {
+        this.serverFps = clamp(this.serverFps, this.config.minSourceFps, nextTargetFps);
+        this.deliveryFps = clamp(this.deliveryFps, this.config.minSourceFps, nextTargetFps);
+        this.sourceFps = clamp(this.sourceFps, this.config.minSourceFps, nextTargetFps);
+        this.renderFps = this.sourceFps * this.playbackRate;
+      }
+      this.latestChunkDurationMs = Math.max(this.latestChunkDurationMs, 1000 / this.targetFps);
+    }
+
+    clear() {
+      const frames = this.queue.splice(0);
+      this.lastDrawAt = 0;
+      this.buffering = true;
+      return frames;
+    }
+
+    noteInputEvent(eventId, now, { cutoverMode = "motion" } = {}) {
+      this.pendingEventId = Number(eventId || 0);
+      this.pendingEventSentAt = Number(now || 0);
+      this.pendingEventCutoverMode = cutoverMode;
+    }
+
+    observeServerStats(stats, now) {
+      const chunkIndex = Number(stats.chunk_index || 0);
+      const numFrames = Number(stats.num_frames || 0);
+      const chunkTotalMs = Number(stats.chunk_total_ms || 0);
+      if (numFrames > 0 && chunkTotalMs > 0) {
+        this.serverStatChunks.add(chunkIndex);
+        if (this.serverStatChunks.size > 128) {
+          this.serverStatChunks.delete(this.serverStatChunks.values().next().value);
+        }
+        const expectedMs = numFrames / Math.max(1, this.targetFps) * 1000;
+        const isStartupWarmup =
+          chunkIndex === 0 &&
+          chunkTotalMs > Math.max(
+            this.config.startupWarmupMinMs,
+            expectedMs * this.config.startupWarmupExpectedMultiplier,
+          );
+        if (isStartupWarmup) return this.snapshot();
+        this.#observeFpsSample("server", {
+          fps: numFrames / (chunkTotalMs / 1000),
+          frameCount: numFrames,
+          durationMs: chunkTotalMs,
+          now,
+        });
+      }
+      return this.snapshot();
+    }
+
+    enqueueDecodedFrames(header, frames, now) {
+      const chunkIndex = Number(header.chunk_index || 0);
+      const eventId = Number(header.event_id || 0);
+      const receivedAt = Number(header.__received_at || now);
+      const preparedFrames = frames.map((frame) => ({
+        ...frame,
+        chunk: Number(frame.chunk ?? chunkIndex),
+        chunkIndex,
+        eventId,
+      }));
+      const droppedFrames = [];
+      let cutover = null;
+
+      if (this.pendingEventId && eventId >= this.pendingEventId) {
+        const oldEventFrameCount = this.#oldEventFrameCount(eventId);
+        const graceFrames = this.#eventGraceFrames();
+        const dropCount = Math.max(0, oldEventFrameCount - graceFrames);
+        if (dropCount > 0) {
+          droppedFrames.push(...this.queue.splice(graceFrames, dropCount));
+          this.#recordDrop(dropCount, "event cutover", now);
+        }
+        cutover = {
+          eventId,
+          latencyMs: this.pendingEventSentAt ? now - this.pendingEventSentAt : 0,
+        };
+        this.pendingEventId = 0;
+        this.pendingEventSentAt = 0;
+        this.pendingEventCutoverMode = "motion";
+      }
+
+      this.queue.push(...preparedFrames);
+      this.#observeChunkArrival(header, preparedFrames.length, receivedAt, now);
+      droppedFrames.push(...this.#trimBacklog(now));
+      return { droppedFrames, cutover, snapshot: this.snapshot() };
+    }
+
+    render(now, { hasPendingInput = true } = {}) {
+      this.#decayRebufferBoost(now);
+      this.#updateReceiveStallGuard(now);
+      const droppedFrames = this.#trimBacklog(now);
+      if (!this.queue.length) {
+        if (this.renderedFrames && hasPendingInput && !this.buffering) {
+          this.buffering = true;
+          this.rebufferLeadBoostMs = Math.max(
+            this.rebufferLeadBoostMs,
+            this.config.rebufferLeadBoostMs,
+          );
+        }
+        return { action: "hold", droppedFrames, snapshot: this.snapshot() };
+      }
+
+      const bufferMs = this.bufferDurationMs;
+      if (
+        hasPendingInput &&
+        this.receiveStalled &&
+        this.renderedFrames &&
+        bufferMs < this.targetLeadMs
+      ) {
+        this.buffering = true;
+        this.lastDrawAt = 0;
+        return { action: "hold", droppedFrames, snapshot: this.snapshot() };
+      }
+
+      if (
+        hasPendingInput &&
+        this.buffering &&
+        bufferMs < (this.renderedFrames ? this.#resumeLeadMs() : this.#startLeadMs())
+      ) {
+        this.buffering = true;
+        this.lastDrawAt = 0;
+        return { action: "hold", droppedFrames, snapshot: this.snapshot() };
+      }
+
+      if (this.buffering) {
+        this.buffering = false;
+        this.lastDrawAt = 0;
+      }
+
+      this.#updatePlaybackRate(now);
+      const targetMs = 1000 / Math.max(1, this.renderFps);
+      const elapsedMs = this.lastDrawAt ? now - this.lastDrawAt : targetMs;
+      if (elapsedMs < targetMs) {
+        return { action: "wait", droppedFrames, snapshot: this.snapshot() };
+      }
+
+      const frame = this.queue.shift();
+      this.renderedFrames += 1;
+      this.lastDrawAt = !this.lastDrawAt || elapsedMs > targetMs * 4
+        ? now
+        : now - (elapsedMs % targetMs);
+      return { action: "draw", frame, droppedFrames, snapshot: this.snapshot() };
+    }
+
+    get queuedFrames() {
+      return this.queue.length;
+    }
+
+    get bufferDurationMs() {
+      return this.queue.length / Math.max(1, this.sourceFps) * 1000;
+    }
+
+    get targetLeadMs() {
+      const base = clamp(
+        this.latestChunkDurationMs * this.config.targetLeadChunkRatio,
+        this.config.minTargetLeadMs,
+        this.config.maxTargetLeadMs,
+      );
+      return clamp(
+        base + this.rebufferLeadBoostMs + this.deliveryLeadBoostMs,
+        this.config.minTargetLeadMs,
+        this.config.maxTargetLeadMs +
+          this.config.rebufferLeadBoostMs +
+          this.config.maxDeliveryLeadBoostMs,
+      );
+    }
+
+    get maxLeadMs() {
+      return this.targetLeadMs + this.latestChunkDurationMs * this.config.maxLeadExtraChunkRatio;
+    }
+
+    snapshot() {
+      return {
+        queueFrames: this.queue.length,
+        bufferMs: this.bufferDurationMs,
+        targetLeadMs: this.targetLeadMs,
+        maxLeadMs: this.maxLeadMs,
+        sourceFps: this.sourceFps,
+        serverFps: this.serverFps,
+        deliveryFps: this.deliveryFps,
+        targetFps: this.targetFps,
+        renderFps: this.renderFps,
+        playbackRate: this.playbackRate,
+        droppedFrames: this.droppedFrames,
+        lastDropAt: this.lastDropAt,
+        lastDropCount: this.lastDropCount,
+        buffering: this.buffering,
+        lastDropReason: this.lastDropReason,
+      };
+    }
+
+    #observeFpsSample(kind, { fps, frameCount, durationMs, now }) {
+      if (!finitePositive(fps)) return;
+      const cappedFps = clamp(fps, this.config.minSourceFps, this.targetFps);
+      const isDelivery = kind === "delivery";
+      const currentFps = isDelivery ? this.deliveryFps : this.serverFps;
+      const hasSample = isDelivery ? this.hasDeliverySample : this.hasServerSample;
+      let nextFps;
+      if (!hasSample) {
+        nextFps = cappedFps;
+      } else {
+        const alpha = cappedFps > currentFps
+          ? (isDelivery ? this.config.deliveryFpsAlphaUp : this.config.serverFpsAlphaUp)
+          : (isDelivery ? this.config.deliveryFpsAlphaDown : this.config.serverFpsAlphaDown);
+        nextFps = currentFps * (1 - alpha) + cappedFps * alpha;
+      }
+      if (isDelivery) {
+        this.deliveryFps = nextFps;
+        this.hasDeliverySample = true;
+        this.#observeDeliveryJitter(frameCount, durationMs);
+      } else {
+        this.serverFps = nextFps;
+        this.hasServerSample = true;
+      }
+      const effectiveFps = this.hasServerSample
+        ? this.serverFps
+        : (this.hasDeliverySample ? this.deliveryFps : this.targetFps);
+      this.sourceFps = clamp(effectiveFps, this.config.minSourceFps, this.targetFps);
+      if (!isDelivery || !this.hasServerSample) {
+        this.latestChunkFrames = Math.max(1, Number(frameCount || this.latestChunkFrames));
+        this.latestChunkDurationMs = clamp(
+          Number(durationMs || (this.latestChunkFrames / Math.max(1, this.sourceFps) * 1000)),
+          1000 / Math.max(1, this.targetFps),
+          2500,
+        );
+      }
+      this.#updatePlaybackRate(now);
+    }
+
+    #observeDeliveryJitter(frameCount, durationMs) {
+      if (!this.hasServerSample || !finitePositive(durationMs)) return;
+      const expectedMs = Number(frameCount || 0) / Math.max(1, this.serverFps) * 1000;
+      if (expectedMs <= 0) return;
+      if (durationMs <= expectedMs * this.config.deliveryStallExpectedMultiplier) return;
+      const boostMs = clamp(
+        durationMs - expectedMs,
+        0,
+        this.config.maxDeliveryLeadBoostMs,
+      );
+      this.deliveryLeadBoostMs = Math.max(this.deliveryLeadBoostMs, boostMs);
+    }
+
+    #updateReceiveStallGuard(now) {
+      this.receiveStalled = false;
+      if (!this.lastFinalReceiveAt || !this.hasServerSample) return;
+      const elapsedMs = now - this.lastFinalReceiveAt;
+      const expectedMs = Math.max(
+        this.latestChunkDurationMs,
+        this.latestChunkFrames / Math.max(1, this.serverFps) * 1000,
+      );
+      if (elapsedMs <= expectedMs * this.config.deliveryStallExpectedMultiplier) return;
+      this.receiveStalled = true;
+      this.deliveryLeadBoostMs = Math.max(
+        this.deliveryLeadBoostMs,
+        clamp(elapsedMs - expectedMs, 0, this.config.maxDeliveryLeadBoostMs),
+      );
+    }
+
+    #observeChunkArrival(header, frameCount, receivedAt, now) {
+      const chunkIndex = Number(header.chunk_index || 0);
+      const state = this.chunkReceives.get(chunkIndex) || {
+        firstAt: receivedAt,
+        frames: 0,
+      };
+      state.frames += Number(frameCount || 0);
+      state.lastAt = receivedAt;
+      this.chunkReceives.set(chunkIndex, state);
+
+      const frameBatchIndex = Number(header.frame_batch_index || 0);
+      const numFrameBatches = Number(header.num_frame_batches || 1);
+      const isFinalFrameBatch =
+        Boolean(header.is_final_frame_batch) ||
+        frameBatchIndex + 1 >= numFrameBatches;
+      if (!isFinalFrameBatch) return;
+      const durationMs = this.lastFinalReceiveAt
+        ? receivedAt - this.lastFinalReceiveAt
+        : 0;
+      this.lastFinalReceiveAt = receivedAt;
+      if (state.frames > 0 && durationMs > 0) {
+        this.#observeFpsSample("delivery", {
+          fps: state.frames / (durationMs / 1000),
+          frameCount: state.frames,
+          durationMs,
+          now,
+        });
+      }
+      this.chunkReceives.delete(chunkIndex);
+    }
+
+    #updatePlaybackRate(now) {
+      const bufferMs = this.bufferDurationMs;
+      const targetLeadMs = Math.max(1, this.targetLeadMs);
+      const error = (bufferMs - targetLeadMs) / targetLeadMs;
+      const emergency =
+        bufferMs > this.maxLeadMs ||
+        bufferMs < targetLeadMs * this.config.lowWaterRatio ||
+        (this.receiveStalled && bufferMs < targetLeadMs);
+      const minRate = emergency
+        ? (
+            this.receiveStalled
+              ? this.config.receiveStallPlaybackRateMin
+              : this.config.emergencyPlaybackRateMin
+          )
+        : this.config.playbackRateMin;
+      const maxRate = this.receiveStalled && bufferMs < targetLeadMs
+        ? 1
+        : emergency
+        ? this.config.emergencyPlaybackRateMax
+        : this.config.playbackRateMax;
+      const desiredRate = clamp(
+        1 + error * this.config.playbackRateGain,
+        minRate,
+        maxRate,
+      );
+
+      if (!this.lastRateUpdateAt) {
+        this.playbackRate = desiredRate;
+      } else {
+        const dtSeconds = Math.max(0.001, (now - this.lastRateUpdateAt) / 1000);
+        const slewPerSecond = this.receiveStalled
+          ? this.config.receiveStallPlaybackRateSlewPerSecond
+          : this.config.playbackRateSlewPerSecond;
+        const maxDelta = slewPerSecond * dtSeconds;
+        this.playbackRate = clamp(
+          desiredRate,
+          this.playbackRate - maxDelta,
+          this.playbackRate + maxDelta,
+        );
+      }
+      this.lastRateUpdateAt = now;
+      this.renderFps = clamp(
+        this.sourceFps * this.playbackRate,
+        this.config.minSourceFps,
+        this.targetFps * this.config.emergencyPlaybackRateMax,
+      );
+    }
+
+    #trimBacklog(now) {
+      const droppedFrames = [];
+      while (this.queue.length && this.bufferDurationMs > this.maxLeadMs) {
+        const firstChunk = this.queue[0].chunkIndex;
+        let dropCount = 0;
+        while (
+          dropCount < this.queue.length &&
+          this.queue[dropCount].chunkIndex === firstChunk
+        ) {
+          dropCount += 1;
+        }
+        if (!dropCount || dropCount >= this.queue.length) break;
+        droppedFrames.push(...this.queue.splice(0, dropCount));
+        this.#recordDrop(dropCount, "backlog", now);
+      }
+      return droppedFrames;
+    }
+
+    #oldEventFrameCount(nextEventId) {
+      let count = 0;
+      while (count < this.queue.length && this.queue[count].eventId < nextEventId) {
+        count += 1;
+      }
+      return count;
+    }
+
+    #eventGraceFrames() {
+      const byTime = Math.max(
+        1,
+        Math.round(this.sourceFps * this.#eventCutoverMaxMs() / 1000),
+      );
+      const byChunkRatio = this.pendingEventCutoverMode === "settle" ? 1.5 : 0.85;
+      const byChunk = Math.max(1, Math.round(this.latestChunkFrames * byChunkRatio));
+      return Math.min(this.#eventCutoverMaxFrames(), byTime, byChunk);
+    }
+
+    #eventCutoverMaxMs() {
+      return this.pendingEventCutoverMode === "settle"
+        ? this.config.settleEventCutoverMaxMs
+        : this.config.eventCutoverMaxMs;
+    }
+
+    #eventCutoverMaxFrames() {
+      return this.pendingEventCutoverMode === "settle"
+        ? this.config.settleEventCutoverMaxFrames
+        : this.config.eventCutoverMaxFrames;
+    }
+
+    #startLeadMs() {
+      return Math.max(
+        this.config.minStartLeadMs,
+        this.latestChunkDurationMs * this.config.startLeadChunkRatio,
+        this.targetLeadMs,
+      );
+    }
+
+    #resumeLeadMs() {
+      return clamp(
+        this.latestChunkDurationMs * this.config.resumeLeadChunkRatio,
+        this.config.minResumeLeadMs,
+        this.config.maxResumeLeadMs,
+      );
+    }
+
+    #decayRebufferBoost(now) {
+      if ((!this.rebufferLeadBoostMs && !this.deliveryLeadBoostMs) || !this.lastRateUpdateAt) return;
+      const dtSeconds = Math.max(0, (now - this.lastRateUpdateAt) / 1000);
+      this.rebufferLeadBoostMs = Math.max(
+        0,
+        this.rebufferLeadBoostMs - dtSeconds * this.config.rebufferLeadBoostDecayMsPerSecond,
+      );
+      this.deliveryLeadBoostMs = Math.max(
+        0,
+        this.deliveryLeadBoostMs - dtSeconds * this.config.deliveryLeadBoostDecayMsPerSecond,
+      );
+    }
+
+    #recordDrop(count, reason, now) {
+      this.droppedFrames += count;
+      this.lastDropAt = Number(now || 0);
+      this.lastDropCount = count;
+      this.lastDropReason = reason;
+    }
+  }
+
+  global.RealtimePlaybackController = RealtimePlaybackController;
+  if (typeof module !== "undefined" && module.exports) {
+    module.exports = { RealtimePlaybackController };
+  }
+})(typeof globalThis !== "undefined" ? globalThis : window);
diff --git a/python/sglang/multimodal_gen/apps/realtime_webui/playback_controller_test.js b/python/sglang/multimodal_gen/apps/realtime_webui/playback_controller_test.js
new file mode 100644
index 000000000..634dc06f5
--- /dev/null
+++ b/python/sglang/multimodal_gen/apps/realtime_webui/playback_controller_test.js
@@ -0,0 +1,116 @@
+const assert = require("node:assert/strict");
+const { RealtimePlaybackController } = require("./playback_controller.js");
+
+function frames(count, chunk) {
+  return Array.from({ length: count }, (_, index) => ({
+    image: { close() {} },
+    chunk,
+    index,
+  }));
+}
+
+function enqueueChunk(controller, {
+  chunk,
+  eventId = 0,
+  frameCount = 12,
+  durationMs = 480,
+  now,
+}) {
+  controller.observeServerStats({
+    chunk_index: chunk,
+    num_frames: frameCount,
+    chunk_total_ms: durationMs,
+  }, now);
+  return controller.enqueueDecodedFrames({
+    chunk_index: chunk,
+    event_id: eventId,
+    num_frames: frameCount,
+    __received_at: now,
+    is_final_frame_batch: true,
+  }, frames(frameCount, chunk), now);
+}
+
+function renderFor(controller, startMs, durationMs) {
+  let rendered = 0;
+  for (let now = startMs; now <= startMs + durationMs; now += 16.67) {
+    const decision = controller.render(now, { hasPendingInput: true });
+    if (decision.action === "draw") rendered += 1;
+  }
+  return rendered;
+}
+
+function stableSourceDoesNotDrop() {
+  const controller = new RealtimePlaybackController({ targetFps: 25 });
+  let now = 0;
+  for (let chunk = 0; chunk < 8; chunk += 1) {
+    now += 480;
+    enqueueChunk(controller, { chunk, now });
+    renderFor(controller, now, 480);
+  }
+  const snapshot = controller.snapshot();
+  assert.equal(snapshot.droppedFrames, 0);
+  assert.ok(snapshot.sourceFps > 24 && snapshot.sourceFps <= 25);
+}
+
+function slowServerCapsRenderFps() {
+  const controller = new RealtimePlaybackController({ targetFps: 25 });
+  let now = 0;
+  for (let chunk = 0; chunk < 8; chunk += 1) {
+    now += 1360;
+    enqueueChunk(controller, { chunk, durationMs: 1360, now });
+    renderFor(controller, now, 1360);
+  }
+  const snapshot = controller.snapshot();
+  assert.ok(snapshot.sourceFps > 8 && snapshot.sourceFps < 10);
+  assert.ok(snapshot.renderFps <= 10);
+}
+
+function backlogDropsContiguousOldFrames() {
+  const controller = new RealtimePlaybackController({ targetFps: 25 });
+  let now = 100;
+  for (let chunk = 0; chunk < 13; chunk += 1) {
+    enqueueChunk(controller, { chunk, now, durationMs: 480 });
+    now += 20;
+  }
+  const snapshot = controller.snapshot();
+  assert.ok(snapshot.droppedFrames > 0);
+  assert.equal(snapshot.lastDropReason, "backlog");
+}
+
+function eventCutoverKeepsShortGrace() {
+  const controller = new RealtimePlaybackController({ targetFps: 25 });
+  enqueueChunk(controller, { chunk: 1, frameCount: 24, durationMs: 960, now: 1000 });
+  controller.noteInputEvent(5, 1050);
+  const result = enqueueChunk(controller, {
+    chunk: 2,
+    eventId: 5,
+    frameCount: 12,
+    durationMs: 480,
+    now: 1150,
+  });
+  assert.ok(result.cutover);
+  assert.ok(result.droppedFrames.length >= 14);
+  assert.equal(controller.queue[0].chunk, 1);
+  assert.equal(controller.queue[0].index, 0);
+}
+
+function settleEventCutoverKeepsWiderGrace() {
+  const controller = new RealtimePlaybackController({ targetFps: 25 });
+  enqueueChunk(controller, { chunk: 1, frameCount: 24, durationMs: 960, now: 1000 });
+  controller.noteInputEvent(5, 1050, { cutoverMode: "settle" });
+  const result = enqueueChunk(controller, {
+    chunk: 2,
+    eventId: 5,
+    frameCount: 12,
+    durationMs: 480,
+    now: 1150,
+  });
+  assert.ok(result.cutover);
+  assert.ok(result.droppedFrames.length <= 12);
+}
+
+stableSourceDoesNotDrop();
+slowServerCapsRenderFps();
+backlogDropsContiguousOldFrames();
+eventCutoverKeepsShortGrace();
+settleEventCutoverKeepsWiderGrace();
diff --git a/python/sglang/multimodal_gen/apps/realtime_webui/styles.css b/python/sglang/multimodal_gen/apps/realtime_webui/styles.css
index 0e937e678..1b1a6042d 100644
--- a/python/sglang/multimodal_gen/apps/realtime_webui/styles.css
+++ b/python/sglang/multimodal_gen/apps/realtime_webui/styles.css
@@ -17,6 +17,7 @@
 
 body {
   margin: 0;
+  overflow-x: hidden;
   min-height: 100vh;
   background:
     linear-gradient(90deg, rgba(23, 26, 22, 0.035) 1px, transparent 1px),
@@ -32,8 +33,10 @@ button:disabled { cursor: wait; opacity: 0.64; transform: none; }
 
 .shell {
   display: grid;
-  grid-template-columns: minmax(260px, 320px) minmax(560px, 1fr);
+  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
   gap: 18px;
+  width: 100%;
+  max-width: 100vw;
   min-height: 100vh;
   padding: 18px;
 }
@@ -219,6 +222,7 @@ button:focus-visible {
   display: grid;
   gap: 18px;
   min-width: 0;
+  max-width: 100%;
 }
 
 .stage {
@@ -227,6 +231,7 @@ button:focus-visible {
   grid-template-rows: auto auto auto auto auto;
   align-self: start;
   justify-self: center;
+  min-width: 0;
   width: 100%;
   max-width: min(1500px, 100%);
   overflow: hidden;
@@ -273,12 +278,15 @@ button:focus-visible {
 .topbar, .timeline {
   display: flex;
   align-items: center;
-  gap: 14px;
+  gap: 10px;
+  min-width: 0;
   height: 44px;
   padding: 0 14px;
   color: #e8eadf;
   background: rgba(17, 20, 15, 0.88);
   font-size: 12px;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
 }
 
 .topbar > * {
@@ -287,11 +295,76 @@ button:focus-visible {
 }
 
 .topbar-spacer { flex: 1; }
+.record-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  flex: 0 0 118px;
+  width: 118px;
+  min-height: 28px;
+  height: 28px;
+  padding: 0 9px;
+  border-color: rgba(232, 234, 223, 0.22);
+  background: rgba(238, 241, 236, 0.08);
+  color: #e8eadf;
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+}
+.record-button:hover:not(:disabled) {
+  border-color: rgba(232, 234, 223, 0.44);
+  background: rgba(238, 241, 236, 0.14);
+  box-shadow: none;
+  transform: none;
+}
+.record-button:active:not(:disabled),
+.record-button.is-pressed:not(:disabled),
+.record-button:focus-visible {
+  transform: none;
+}
+.record-button.is-recording {
+  border-color: color-mix(in oklch, var(--accent), white 18%);
+  background: var(--accent);
+  color: #fffdf7;
+}
+.record-button.is-saving {
+  cursor: wait;
+  opacity: 0.76;
+}
+#recordLabel {
+  flex: 0 0 36px;
+  text-align: left;
+}
+.record-button-icon {
+  flex: 0 0 9px;
+  width: 9px;
+  height: 9px;
+  min-width: 9px;
+  border-radius: 50%;
+  background: var(--accent);
+  box-shadow: 0 0 0 3px rgba(185, 84, 60, 0.16);
+}
+.record-button.is-recording .record-button-icon {
+  border-radius: 2px;
+  background: #fffdf7;
+  box-shadow: none;
+}
+.record-button-duration {
+  display: inline-block;
+  flex: 0 0 34px;
+  min-width: 34px;
+  text-align: right;
+  color: rgba(232, 234, 223, 0.7);
+}
+.record-button.is-recording .record-button-duration {
+  color: rgba(255, 253, 247, 0.86);
+}
 .preview-scale-control {
   display: inline-flex;
   align-items: center;
   gap: 8px;
-  min-width: 190px;
+  flex: 0 0 170px;
+  min-width: 170px;
   margin: 0;
   color: rgba(232, 234, 223, 0.72);
   font-size: 11px;
@@ -324,13 +397,36 @@ button:focus-visible {
   display: inline-flex;
   align-items: center;
   gap: 5px;
-  min-width: max-content;
+  flex: 0 1 auto;
+  min-width: 0;
   color: rgba(232, 234, 223, 0.72);
   line-height: 1;
 }
 .stage-stat b {
+  display: inline-block;
   color: #fffdf7;
   font-weight: 650;
+  font-variant-numeric: tabular-nums;
+}
+
+#outputSizeText { min-width: 206px; }
+#renderFps { min-width: 2ch; text-align: right; }
+#theoreticalFpsText { min-width: 116px; }
+#stageLatencyText { min-width: 120px; }
+
+@media (max-width: 1180px) {
+  .topbar {
+    flex-wrap: wrap;
+    height: auto;
+    min-height: 44px;
+    padding: 8px 14px;
+    row-gap: 7px;
+  }
+  .topbar-spacer { display: none; }
+  .preview-scale-control { flex-basis: 170px; min-width: 170px; }
+  #outputSizeText { min-width: 156px; }
+  #theoreticalFpsText { min-width: 100px; }
+  #stageLatencyText { min-width: 108px; }
 }
 
 .timeline { justify-content: flex-end; border-top: 1px solid rgba(232, 234, 223, 0.12); }
diff --git a/python/sglang/multimodal_gen/runtime/entrypoints/diffusion_generator.py b/python/sglang/multimodal_gen/runtime/entrypoints/diffusion_generator.py
index 25d0d6f15..e9f5de9aa 100644
--- a/python/sglang/multimodal_gen/runtime/entrypoints/diffusion_generator.py
+++ b/python/sglang/multimodal_gen/runtime/entrypoints/diffusion_generator.py
@@ -43,8 +43,10 @@ from sglang.multimodal_gen.runtime.utils.logging_utils import (
     log_batch_completion,
     log_generation_timer,
 )
-from sglang.multimodal_gen.runtime.utils.trace_wrapper import trace_req
-from sglang.srt.observability.trace import process_tracing_init, trace_set_thread_info
+from sglang.multimodal_gen.runtime.utils.trace_wrapper import (
+    init_diffusion_tracing,
+    trace_req,
+)
 
 logger = init_logger(__name__)
 
@@ -123,9 +125,7 @@ class DiffGenerator:
         instance = cls(
             server_args=server_args,
         )
-        if server_args.enable_trace:
-            process_tracing_init(server_args.otlp_traces_endpoint, "sglang-diffusion")
-            trace_set_thread_info("DiffGenerator")
+        init_diffusion_tracing(server_args, "DiffGenerator")
 
         logger.info(f"Local mode: {local_mode}")
         if local_mode:
diff --git a/python/sglang/multimodal_gen/runtime/entrypoints/openai/protocol.py b/python/sglang/multimodal_gen/runtime/entrypoints/openai/protocol.py
index b029a648c..f3f651149 100644
--- a/python/sglang/multimodal_gen/runtime/entrypoints/openai/protocol.py
+++ b/python/sglang/multimodal_gen/runtime/entrypoints/openai/protocol.py
@@ -151,6 +151,8 @@ class RealtimeVideoGenerationsRequest(VideoGenerationsRequest):
     num_profiled_timesteps: Optional[int] = None
     profile_all_stages: Optional[bool] = False
     realtime_output_format: Optional[Literal["raw", "webp", "jpeg"]] = None
+    realtime_preview_max_width: Optional[int] = None
+    realtime_output_pacing: Optional[bool] = False
     realtime_causal_sink_size: Optional[int] = None
     realtime_causal_kv_cache_num_frames: Optional[int] = None
 
diff --git a/python/sglang/multimodal_gen/runtime/entrypoints/openai/realtime/adapters/lingbot_world_realtime_adapter.py b/python/sglang/multimodal_gen/runtime/entrypoints/openai/realtime/adapters/lingbot_world_realtime_adapter.py
index b78df7f12..6514c6fdb 100644
--- a/python/sglang/multimodal_gen/runtime/entrypoints/openai/realtime/adapters/lingbot_world_realtime_adapter.py
+++ b/python/sglang/multimodal_gen/runtime/entrypoints/openai/realtime/adapters/lingbot_world_realtime_adapter.py
@@ -430,6 +430,10 @@ class LingBotWorldRealtimeAdapter(RealtimeModelAdapter):
         batch.realtime_event_id = self._state(session).latest_sampled_event_id
         if session.request is not None:
             batch.realtime_output_format = session.request.realtime_output_format
+            batch.realtime_preview_max_width = (
+                session.request.realtime_preview_max_width
+            )
+            batch.realtime_output_pacing = bool(session.request.realtime_output_pacing)
             batch.realtime_causal_sink_size = session.request.realtime_causal_sink_size
             batch.realtime_causal_kv_cache_num_frames = (
                 session.request.realtime_causal_kv_cache_num_frames
diff --git a/python/sglang/multimodal_gen/runtime/entrypoints/openai/realtime/generate_session.py b/python/sglang/multimodal_gen/runtime/entrypoints/openai/realtime/generate_session.py
index af362fd4d..6df62efa7 100644
--- a/python/sglang/multimodal_gen/runtime/entrypoints/openai/realtime/generate_session.py
+++ b/python/sglang/multimodal_gen/runtime/entrypoints/openai/realtime/generate_session.py
@@ -36,6 +36,8 @@ class GenerateSession:
         self.realtime_session = RealtimeSession()
         self.adapter: RealtimeModelAdapter | None = None
         self.adapter_state: Any = None
+        self.output_pace_next_send_at: float | None = None
+        self.output_pace_last_event_id: int | None = None
 
     def set_adapter(self, adapter: RealtimeModelAdapter):
         self.adapter = adapter
@@ -53,6 +55,8 @@ class GenerateSession:
         self.current_chunk = None
         self.adapter = None
         self.adapter_state = None
+        self.output_pace_next_send_at = None
+        self.output_pace_last_event_id = None
         self.realtime_session.dispose()
 
     def new_chunk(self) -> RealtimeChunkContext:
diff --git a/python/sglang/multimodal_gen/runtime/entrypoints/openai/realtime/realtime_output_adapter.py b/python/sglang/multimodal_gen/runtime/entrypoints/openai/realtime/realtime_output_adapter.py
index 35eb10c34..e036a1d86 100644
--- a/python/sglang/multimodal_gen/runtime/entrypoints/openai/realtime/realtime_output_adapter.py
+++ b/python/sglang/multimodal_gen/runtime/entrypoints/openai/realtime/realtime_output_adapter.py
@@ -48,6 +48,7 @@ class RealtimeFrameBatchHeader(TypedDict, total=False):
     raw_size: int
     encoding: str
     delta_reference: str
+    payload_lengths: list[int]
     event_id: int
     frame_batch_index: int
     num_frame_batches: int
@@ -64,6 +65,7 @@ class RealtimeFrameSendStats(TypedDict):
     raw_payload_build_ms: float
     raw_write_ms: float
     ws_write_ms: float
+    pace_wait_ms: float
     raw_bytes: int
     ws_payload_bytes: int
     num_frames: int
@@ -79,6 +81,7 @@ def empty_frame_send_stats(content_type: str = "") -> RealtimeFrameSendStats:
         "raw_payload_build_ms": 0.0,
         "raw_write_ms": 0.0,
         "ws_write_ms": 0.0,
+        "pace_wait_ms": 0.0,
         "raw_bytes": 0,
         "ws_payload_bytes": 0,
         "num_frames": 0,
@@ -135,7 +138,7 @@ ENCODED_PREVIEW_FORMATS = {"webp", "jpeg"}
 class _TransportPayload:
     content_type: str
     payload: bytes
-    metadata: dict[str, int | str | bool]
+    metadata: dict[str, int | str | bool | list[int]]
     last_raw_rgb_frame: bytes | None = None
     last_event_id: int | None = None
 
@@ -155,9 +158,14 @@ def _encode_rgb_frame_to_webp(
     width: int,
     height: int,
     quality: int,
+    preview_max_width: int | None,
 ) -> bytes:
     buffer = io.BytesIO()
-    Image.frombytes("RGB", (width, height), frame).save(
+    image = _resize_preview_image(
+        Image.frombytes("RGB", (width, height), frame),
+        preview_max_width=preview_max_width,
+    )
+    image.save(
         buffer,
         format="WEBP",
         quality=quality,
@@ -172,9 +180,14 @@ def _encode_rgb_frame_to_jpeg(
     width: int,
     height: int,
     quality: int,
+    preview_max_width: int | None,
 ) -> bytes:
     buffer = io.BytesIO()
-    Image.frombytes("RGB", (width, height), frame).save(
+    image = _resize_preview_image(
+        Image.frombytes("RGB", (width, height), frame),
+        preview_max_width=preview_max_width,
+    )
+    image.save(
         buffer,
         format="JPEG",
         quality=quality,
@@ -183,6 +196,39 @@ def _encode_rgb_frame_to_jpeg(
     return buffer.getvalue()
 
 
+def _preview_dimensions(
+    *,
+    width: int,
+    height: int,
+    preview_max_width: int | None,
+) -> tuple[int, int]:
+    if (
+        preview_max_width is None
+        or preview_max_width <= 0
+        or width <= preview_max_width
+    ):
+        return width, height
+    preview_width = int(preview_max_width)
+    preview_height = max(1, round(height * preview_width / width))
+    return preview_width, preview_height
+
+
+def _resize_preview_image(
+    image: Image.Image,
+    *,
+    preview_max_width: int | None,
+) -> Image.Image:
+    width, height = image.size
+    preview_width, preview_height = _preview_dimensions(
+        width=width,
+        height=height,
+        preview_max_width=preview_max_width,
+    )
+    if (preview_width, preview_height) == image.size:
+        return image
+    return image.resize((preview_width, preview_height), Image.Resampling.BICUBIC)
+
+
 def _pack_frame_batch_message(
     header: RealtimeFrameBatchHeader,
     payload: bytes,
@@ -202,11 +248,12 @@ def _build_transport_payload(
     metadata: dict[str, int | str],
     output_format: str | None,
     transport_quality: int | None,
+    preview_max_width: int | None,
     reference_frame: bytes | None,
     event_id: int | None,
 ) -> _TransportPayload:
     payload_content_type = content_type
-    payload_metadata: dict[str, int | str | bool] = {}
+    payload_metadata: dict[str, int | str | bool | list[int]] = {}
     raw_payload = b""
 
     if (
@@ -215,24 +262,45 @@ def _build_transport_payload(
         and transport_frames
     ):
         if output_format == "webp":
-            raw_payload = _encode_rgb_frame_to_webp(
-                transport_frames[0],
-                width=int(metadata["width"]),
-                height=int(metadata["height"]),
-                quality=int(transport_quality or WEBP_DEFAULT_QUALITY),
-            )
+            encoded_frames = [
+                _encode_rgb_frame_to_webp(
+                    frame,
+                    width=int(metadata["width"]),
+                    height=int(metadata["height"]),
+                    quality=int(transport_quality or WEBP_DEFAULT_QUALITY),
+                    preview_max_width=preview_max_width,
+                )
+                for frame in transport_frames
+            ]
             payload_content_type = WEBP_FRAME_CONTENT_TYPE
         else:
-            raw_payload = _encode_rgb_frame_to_jpeg(
-                transport_frames[0],
-                width=int(metadata["width"]),
-                height=int(metadata["height"]),
-                quality=int(transport_quality or JPEG_DEFAULT_QUALITY),
-            )
+            encoded_frames = [
+                _encode_rgb_frame_to_jpeg(
+                    frame,
+                    width=int(metadata["width"]),
+                    height=int(metadata["height"]),
+                    quality=int(transport_quality or JPEG_DEFAULT_QUALITY),
+                    preview_max_width=preview_max_width,
+                )
+                for frame in transport_frames
+            ]
             payload_content_type = JPEG_FRAME_CONTENT_TYPE
+        raw_payload = b"".join(encoded_frames)
+        preview_width, preview_height = _preview_dimensions(
+            width=int(metadata["width"]),
+            height=int(metadata["height"]),
+            preview_max_width=preview_max_width,
+        )
         payload_metadata = {
             "format": output_format,
             "encoding": output_format,
+            "source_width": int(metadata["width"]),
+            "source_height": int(metadata["height"]),
+            "preview_width": preview_width,
+            "preview_height": preview_height,
+            "width": preview_width,
+            "height": preview_height,
+            "payload_lengths": [len(frame) for frame in encoded_frames],
         }
     elif (
         output_format == RAW_LOSSLESS_OUTPUT_FORMAT
@@ -302,20 +370,18 @@ async def _build_encoded_preview_payloads(
     metadata: dict[str, int | str],
     output_format: str,
     transport_quality: int | None,
+    preview_max_width: int | None,
     event_id: int | None,
 ) -> list[_TransportPayload]:
     return list(
         await asyncio.gather(
             *(
-                asyncio.to_thread(
-                    _build_transport_payload,
+                _build_encoded_preview_payload(
                     transport_frames,
-                    content_type=content_type,
                     metadata=metadata,
                     output_format=output_format,
                     transport_quality=transport_quality,
-                    reference_frame=None,
-                    event_id=event_id,
+                    preview_max_width=preview_max_width,
                 )
                 for transport_frames in split_batches
             )
@@ -323,6 +389,73 @@ async def _build_encoded_preview_payloads(
     )
 
 
+async def _build_encoded_preview_payload(
+    transport_frames: list[bytes],
+    *,
+    metadata: dict[str, int | str],
+    output_format: str,
+    transport_quality: int | None,
+    preview_max_width: int | None,
+) -> _TransportPayload:
+    width = int(metadata["width"])
+    height = int(metadata["height"])
+    if output_format == "webp":
+        encoded_frames = list(
+            await asyncio.gather(
+                *(
+                    asyncio.to_thread(
+                        _encode_rgb_frame_to_webp,
+                        frame,
+                        width=width,
+                        height=height,
+                        quality=int(transport_quality or WEBP_DEFAULT_QUALITY),
+                        preview_max_width=preview_max_width,
+                    )
+                    for frame in transport_frames
+                )
+            )
+        )
+        payload_content_type = WEBP_FRAME_CONTENT_TYPE
+    else:
+        encoded_frames = list(
+            await asyncio.gather(
+                *(
+                    asyncio.to_thread(
+                        _encode_rgb_frame_to_jpeg,
+                        frame,
+                        width=width,
+                        height=height,
+                        quality=int(transport_quality or JPEG_DEFAULT_QUALITY),
+                        preview_max_width=preview_max_width,
+                    )
+                    for frame in transport_frames
+                )
+            )
+        )
+        payload_content_type = JPEG_FRAME_CONTENT_TYPE
+
+    preview_width, preview_height = _preview_dimensions(
+        width=width,
+        height=height,
+        preview_max_width=preview_max_width,
+    )
+    return _TransportPayload(
+        content_type=payload_content_type,
+        payload=b"".join(encoded_frames),
+        metadata={
+            "format": output_format,
+            "encoding": output_format,
+            "source_width": width,
+            "source_height": height,
+            "preview_width": preview_width,
+            "preview_height": preview_height,
+            "width": preview_width,
+            "height": preview_height,
+            "payload_lengths": [len(frame) for frame in encoded_frames],
+        },
+    )
+
+
 class RawRGBRealtimeOutputAdapter:
     """send raw RGB over WebSocket using lossless transport compression"""
 
@@ -354,6 +487,7 @@ class RawRGBRealtimeOutputAdapter:
             else {}
         )
         output_format = getattr(batch, "realtime_output_format", None)
+        preview_max_width = getattr(batch, "realtime_preview_max_width", None)
         stats = await self._send_frame_batches(
             ws,
             result.raw_frame_batches,
@@ -364,6 +498,7 @@ class RawRGBRealtimeOutputAdapter:
             frame_metadata=frame_metadata,
             output_format=output_format,
             transport_quality=getattr(batch, "output_compression", None),
+            preview_max_width=preview_max_width,
         )
         stats["frame_shape"] = _frame_shape_from_metadata(frame_metadata)
         return stats
@@ -380,13 +515,14 @@ class RawRGBRealtimeOutputAdapter:
         frame_metadata: dict[str, int | str] | None = None,
         output_format: str | None = None,
         transport_quality: int | None = None,
+        preview_max_width: int | None = None,
     ) -> RealtimeFrameSendStats:
         chunk_index = chunk_index_start
         metadata = frame_metadata or {}
         stats = empty_frame_send_stats(content_type)
         for frames in frame_batches:
             split_batches = (
-                [[frame] for frame in frames]
+                [frames]
                 if _is_encoded_preview_transport(
                     content_type=content_type,
                     output_format=output_format,
@@ -410,6 +546,7 @@ class RawRGBRealtimeOutputAdapter:
                     metadata=metadata,
                     output_format=output_format,
                     transport_quality=transport_quality,
+                    preview_max_width=preview_max_width,
                     event_id=event_id,
                 )
                 stats["raw_payload_build_ms"] += timer.mark_ms()
@@ -434,6 +571,7 @@ class RawRGBRealtimeOutputAdapter:
                             metadata=metadata,
                             output_format=output_format,
                             transport_quality=transport_quality,
+                            preview_max_width=preview_max_width,
                             reference_frame=reference_frame,
                             event_id=event_id,
                         )
@@ -444,6 +582,7 @@ class RawRGBRealtimeOutputAdapter:
                             metadata=metadata,
                             output_format=output_format,
                             transport_quality=transport_quality,
+                            preview_max_width=preview_max_width,
                             reference_frame=reference_frame,
                             event_id=event_id,
                         )
diff --git a/python/sglang/multimodal_gen/runtime/entrypoints/openai/realtime/realtime_video_api.py b/python/sglang/multimodal_gen/runtime/entrypoints/openai/realtime/realtime_video_api.py
index 39152a36c..e7598bfc5 100644
--- a/python/sglang/multimodal_gen/runtime/entrypoints/openai/realtime/realtime_video_api.py
+++ b/python/sglang/multimodal_gen/runtime/entrypoints/openai/realtime/realtime_video_api.py
@@ -41,7 +41,7 @@ if TYPE_CHECKING:
 logger = init_logger(__name__)
 router = APIRouter(prefix="/v1/realtime_video", tags=["realtime"])
 _ACTIVE_SESSION_IDS: set[str] = set()
-_ACTIVE_SESSION_WAIT_SECONDS = 15.0
+_ACTIVE_SESSION_WAIT_SECONDS = 1.0
 _ACTIVE_SESSION_WAIT_INTERVAL_SECONDS = 0.1
 
 
@@ -73,6 +73,7 @@ def _log_realtime_chunk_timing(
         "realtime chunk timing: session_id=%s request_id=%s "
         "chunk_idx=%s event_id=%s condition_kinds=%s "
         "request_prepare=%.2fms scheduler_forward=%.2fms "
+        "output_pace=%.2fms "
         "header_pack=%.2fms "
         "header_write=%.2fms raw_payload_build=%.2fms raw_write=%.2fms "
         "ws_write=%.2fms chunk_total=%.2fms batches=%d frames=%d "
@@ -84,6 +85,7 @@ def _log_realtime_chunk_timing(
         sorted(batch.condition_inputs) if batch.condition_inputs else [],
         request_prepare_ms,
         scheduler_forward_ms,
+        send_stats["pace_wait_ms"],
         send_stats["header_pack_ms"],
         send_stats["header_write_ms"],
         send_stats["raw_payload_build_ms"],
@@ -119,6 +121,7 @@ async def _send_realtime_chunk_stats(
                 "event_id": getattr(batch, "realtime_event_id", None),
                 "request_prepare_ms": _transport_ms(request_prepare_ms),
                 "scheduler_forward_ms": _transport_ms(scheduler_forward_ms),
+                "pace_wait_ms": _transport_ms(send_stats["pace_wait_ms"]),
                 "header_write_ms": _transport_ms(send_stats["header_write_ms"]),
                 "raw_payload_build_ms": _transport_ms(
                     send_stats["raw_payload_build_ms"]
@@ -178,8 +181,8 @@ async def _generate_loop(ws: WebSocket, session: GenerateSession):
             adapter.on_chunk_complete(session, result)
             if pending_send_task is not None:
                 await pending_send_task
-            pending_send_task = asyncio.create_task(
-                _send_output_and_log(
+            if batch.realtime_output_pacing:
+                await _send_output_and_log(
                     ws,
                     session,
                     chunk,
@@ -189,7 +192,20 @@ async def _generate_loop(ws: WebSocket, session: GenerateSession):
                     scheduler_forward_ms,
                     chunk_started,
                 )
-            )
+                pending_send_task = None
+            else:
+                pending_send_task = asyncio.create_task(
+                    _send_output_and_log(
+                        ws,
+                        session,
+                        chunk,
+                        batch,
+                        result,
+                        request_prepare_ms,
+                        scheduler_forward_ms,
+                        chunk_started,
+                    )
+                )
 
         except asyncio.CancelledError:
             if pending_send_task is not None:
@@ -241,12 +257,14 @@ async def _send_output_and_log(
 ) -> RealtimeFrameSendStats:
     if session.adapter is None:
         raise ValueError("realtime adapter is not initialized")
+    pace_wait_ms = await _wait_for_realtime_output_slot(session, batch, result)
     send_stats = await session.adapter.send_output(
         ws,
         session,
         result,
         batch,
     )
+    send_stats["pace_wait_ms"] = pace_wait_ms
     chunk_total_ms = (time.perf_counter() - chunk_started) * 1000
     _log_realtime_chunk_timing(
         session,
@@ -270,6 +288,54 @@ async def _send_output_and_log(
     return send_stats
 
 
+def _result_num_frames(result) -> int:
+    if result.raw_frame_batches is None:
+        return 0
+    return sum(len(frames) for frames in result.raw_frame_batches)
+
+
+def _output_pacing_fps(batch: "Req") -> float:
+    fps = float(batch.fps or 0)
+    if batch.enable_frame_interpolation:
+        fps *= 2 ** int(batch.frame_interpolation_exp or 1)
+    return fps
+
+
+async def _wait_for_realtime_output_slot(
+    session: GenerateSession,
+    batch: "Req",
+    result,
+) -> float:
+    if not batch.realtime_output_pacing:
+        return 0.0
+
+    frame_count = _result_num_frames(result)
+    output_fps = _output_pacing_fps(batch)
+    if frame_count <= 0 or output_fps <= 0:
+        return 0.0
+
+    now = time.perf_counter()
+    next_send_at = session.output_pace_next_send_at
+    if next_send_at is None:
+        next_send_at = now
+    if (
+        batch.realtime_event_id is not None
+        and batch.realtime_event_id != session.output_pace_last_event_id
+    ):
+        next_send_at = min(next_send_at, now)
+        session.output_pace_last_event_id = batch.realtime_event_id
+
+    wait_s = max(0.0, next_send_at - now)
+    if wait_s > 0:
+        await asyncio.sleep(wait_s)
+
+    send_started_at = time.perf_counter()
+    session.output_pace_next_send_at = (
+        max(next_send_at, send_started_at) + frame_count / output_fps
+    )
+    return wait_s * 1000
+
+
 async def _await_realtime_task(task: asyncio.Task | None) -> None:
     if task is None:
         return
diff --git a/python/sglang/multimodal_gen/runtime/launch_server.py b/python/sglang/multimodal_gen/runtime/launch_server.py
index 9a17a17c9..675c93859 100644
--- a/python/sglang/multimodal_gen/runtime/launch_server.py
+++ b/python/sglang/multimodal_gen/runtime/launch_server.py
@@ -23,7 +23,7 @@ from sglang.multimodal_gen.runtime.server_args import (
 )
 from sglang.multimodal_gen.runtime.utils.common import is_port_available
 from sglang.multimodal_gen.runtime.utils.logging_utils import configure_logger, logger
-from sglang.srt.observability.trace import process_tracing_init, trace_set_thread_info
+from sglang.multimodal_gen.runtime.utils.trace_wrapper import init_diffusion_tracing
 
 
 def _find_available_port(
@@ -443,9 +443,7 @@ def _run_disagg_role_process(
 
 
 def launch_http_server_only(server_args):
-    if server_args.enable_trace:
-        process_tracing_init(server_args.otlp_traces_endpoint, "sglang-diffusion")
-        trace_set_thread_info("DiffHTTPServer")
+    init_diffusion_tracing(server_args, "DiffHTTPServer")
 
     # set for endpoints to access global_server_args
     set_global_server_args(server_args)
diff --git a/python/sglang/multimodal_gen/runtime/managers/gpu_worker.py b/python/sglang/multimodal_gen/runtime/managers/gpu_worker.py
index e9a6af9e4..145611797 100644
--- a/python/sglang/multimodal_gen/runtime/managers/gpu_worker.py
+++ b/python/sglang/multimodal_gen/runtime/managers/gpu_worker.py
@@ -72,8 +72,11 @@ from sglang.multimodal_gen.runtime.utils.realtime_video import (
     RAW_RGB_CONTENT_TYPE,
     build_raw_rgb_frame_batches,
 )
-from sglang.multimodal_gen.runtime.utils.trace_wrapper import DiffStage, trace_slice
-from sglang.srt.observability.trace import process_tracing_init, trace_set_thread_info
+from sglang.multimodal_gen.runtime.utils.trace_wrapper import (
+    DiffStage,
+    init_diffusion_tracing,
+    trace_slice,
+)
 from sglang.srt.utils.network import NetworkAddress
 
 logger = init_logger(__name__)
@@ -989,9 +992,7 @@ def run_scheduler_process(
     elif current_platform.is_musa():
         set_musa_arch()
 
-    if server_args.enable_trace:
-        process_tracing_init(server_args.otlp_traces_endpoint, "sglang-diffusion")
-        trace_set_thread_info(f"DiffWorker_rank{rank}")
+    init_diffusion_tracing(server_args, f"DiffWorker_rank{rank}")
 
     port_args = PortArgs.from_server_args(server_args)
 
diff --git a/python/sglang/multimodal_gen/runtime/pipelines_core/schedule_batch.py b/python/sglang/multimodal_gen/runtime/pipelines_core/schedule_batch.py
index de4b14a9a..66a765aef 100644
--- a/python/sglang/multimodal_gen/runtime/pipelines_core/schedule_batch.py
+++ b/python/sglang/multimodal_gen/runtime/pipelines_core/schedule_batch.py
@@ -211,6 +211,8 @@ class Req:
     realtime_chunk_size: int | None = None
     realtime_event_id: int | None = None
     realtime_output_format: str | None = None
+    realtime_preview_max_width: int | None = None
+    realtime_output_pacing: bool = False
     realtime_causal_sink_size: int | None = None
     realtime_causal_kv_cache_num_frames: int | None = None
     # return websocket-friendly raw RGB frame bytes instead of rwa tensors
diff --git a/python/sglang/multimodal_gen/runtime/postprocess/realesrgan_upscaler.py b/python/sglang/multimodal_gen/runtime/postprocess/realesrgan_upscaler.py
index 83d5295f7..a7df28eb5 100644
--- a/python/sglang/multimodal_gen/runtime/postprocess/realesrgan_upscaler.py
+++ b/python/sglang/multimodal_gen/runtime/postprocess/realesrgan_upscaler.py
@@ -12,7 +12,9 @@ The ImageUpscaler wrapper and integration code are original work.
 import math
 import os
 import time
+from hashlib import sha256
 from typing import Optional
+from urllib.parse import unquote, urlparse
 
 import numpy as np
 import torch
@@ -689,6 +691,7 @@ def _resolve_model_path(model_path: str) -> str:
 
     Accepts:
     - An existing local file path (pass-through).
+    - An http(s) URL to a .pth file, downloaded into the local cache.
     - A HuggingFace ``repo_id`` → downloads the default weight file
       (``RealESRGAN_x4.pth``).
     - A HuggingFace ``repo_id:filename`` → downloads *filename* from *repo_id*,
@@ -702,6 +705,25 @@ def _resolve_model_path(model_path: str) -> str:
         _RESOLVED_MODEL_PATH_CACHE[model_path] = model_path
         return model_path
 
+    parsed_url = urlparse(model_path)
+    if parsed_url.scheme in ("http", "https"):
+        filename = (
+            os.path.basename(unquote(parsed_url.path)) or _DEFAULT_REALESRGAN_FILENAME
+        )
+        cache_dir = os.path.join(
+            os.path.expanduser("~"), ".cache", "sglang", "realesrgan"
+        )
+        os.makedirs(cache_dir, exist_ok=True)
+        cache_key = sha256(model_path.encode("utf-8")).hexdigest()[:12]
+        local_path = os.path.join(cache_dir, f"{cache_key}-{filename}")
+        if not os.path.isfile(local_path):
+            tmp_path = f"{local_path}.tmp"
+            logger.info("Downloading Real-ESRGAN weights from URL %s", model_path)
+            torch.hub.download_url_to_file(model_path, tmp_path, progress=False)
+            os.replace(tmp_path, local_path)
+        _RESOLVED_MODEL_PATH_CACHE[model_path] = local_path
+        return local_path
+
     # Parse optional "repo_id:filename" syntax; fall back to default filename.
     if ":" in model_path and not model_path.startswith("/"):
         repo_id, filename = model_path.split(":", 1)
diff --git a/python/sglang/multimodal_gen/runtime/postprocess/rife_interpolator.py b/python/sglang/multimodal_gen/runtime/postprocess/rife_interpolator.py
index 1d722e065..04c9831c0 100644
--- a/python/sglang/multimodal_gen/runtime/postprocess/rife_interpolator.py
+++ b/python/sglang/multimodal_gen/runtime/postprocess/rife_interpolator.py
@@ -11,6 +11,7 @@ The FrameInterpolator wrapper and integration code are original work.
 """
 
 import os
+import time
 from typing import Optional
 
 import numpy as np
@@ -28,6 +29,7 @@ _DEFAULT_RIFE_HF_REPO = "elfgum/RIFE-4.22.lite"
 
 # Module-level cache: model_path -> Model instance
 _MODEL_CACHE: dict[str, "Model"] = {}
+_MAX_RIFE_BATCH_PAIRS = 16
 
 
 # ---------------------------------------------------------------------------
@@ -392,6 +394,20 @@ class FrameInterpolator:
         arr = t.squeeze(0).permute(1, 2, 0).clamp(0.0, 1.0).cpu().numpy()
         return (arr * 255.0).astype(np.uint8)
 
+    @staticmethod
+    def _frames_to_tensor(
+        frames: list[np.ndarray], device: torch.device
+    ) -> torch.Tensor:
+        t = torch.from_numpy(np.stack(frames, axis=0))
+        t = t.permute(0, 3, 1, 2).contiguous().float() / 255.0
+        return t.to(device, non_blocking=True)
+
+    @staticmethod
+    def _tensor_to_frames(t: torch.Tensor) -> list[np.ndarray]:
+        arr = t.permute(0, 2, 3, 1).clamp(0.0, 1.0).cpu().numpy()
+        arr = (arr * 255.0).astype(np.uint8)
+        return [arr[i] for i in range(arr.shape[0])]
+
     def _make_inference(
         self, model: Model, I0: torch.Tensor, I1: torch.Tensor, n: int, scale: float
     ) -> list[torch.Tensor]:
@@ -409,6 +425,30 @@ class FrameInterpolator:
             + self._make_inference(model, mid, I1, n // 2, scale)
         )
 
+    def _interpolate_2x_batched(
+        self, model: Model, frames: list[np.ndarray], scale: float
+    ) -> list[np.ndarray]:
+        device = model.device()
+        source = self._frames_to_tensor(frames, device)
+        intermediate_frames: list[np.ndarray] = []
+
+        with torch.inference_mode():
+            for start in range(0, len(frames) - 1, _MAX_RIFE_BATCH_PAIRS):
+                end = min(start + _MAX_RIFE_BATCH_PAIRS, len(frames) - 1)
+                mids = model.inference(
+                    source[start:end],
+                    source[start + 1 : end + 1],
+                    scale=scale,
+                )
+                intermediate_frames.extend(self._tensor_to_frames(mids))
+
+        result: list[np.ndarray] = []
+        for i, mid in enumerate(intermediate_frames):
+            result.append(frames[i])
+            result.append(mid)
+        result.append(frames[-1])
+        return result
+
     def interpolate(
         self,
         frames: list[np.ndarray],
@@ -436,6 +476,16 @@ class FrameInterpolator:
         device = model.device()
 
         n_intermediate = 2**exp // 2  # intermediates per adjacent pair
+        start_time = time.perf_counter()
+
+        if n_intermediate == 1:
+            result = self._interpolate_2x_batched(model, frames, scale)
+            logger.info(
+                "RIFE batched interpolation completed in %.3f seconds for %d frames",
+                time.perf_counter() - start_time,
+                len(frames),
+            )
+            return result, 2**exp
 
         result: list[np.ndarray] = []
         for i in range(len(frames) - 1):
@@ -452,6 +502,11 @@ class FrameInterpolator:
 
         result.append(frames[-1])
         multiplier = 2**exp
+        logger.info(
+            "RIFE interpolation completed in %.3f seconds for %d frames",
+            time.perf_counter() - start_time,
+            len(frames),
+        )
         return result, multiplier
 
 
diff --git a/python/sglang/multimodal_gen/runtime/utils/trace_wrapper.py b/python/sglang/multimodal_gen/runtime/utils/trace_wrapper.py
index e8a0ecb3c..8288261d3 100644
--- a/python/sglang/multimodal_gen/runtime/utils/trace_wrapper.py
+++ b/python/sglang/multimodal_gen/runtime/utils/trace_wrapper.py
@@ -10,6 +10,8 @@ from __future__ import annotations
 from contextlib import contextmanager
 from dataclasses import dataclass
 
+DIFFUSION_TRACE_MODULE = "diffusion"
+
 
 @dataclass(frozen=True)
 class DiffStageConfig:
@@ -26,6 +28,39 @@ class DiffStage:
     GPU_FORWARD = DiffStageConfig("gpu_forward", level=2)
 
 
+def init_diffusion_tracing(server_args, thread_label: str):
+    if not server_args.enable_trace:
+        return
+
+    from types import SimpleNamespace
+
+    from sglang.srt import server_args as srt_server_args_module
+    from sglang.srt.observability.trace import (
+        process_tracing_init,
+        trace_set_thread_info,
+    )
+    from sglang.srt.server_args import set_global_server_args_for_scheduler
+
+    # srt owns TraceReqContext and filters spans through its global trace_modules
+    try:
+        srt_server_args = srt_server_args_module.get_global_server_args()
+    except ValueError:
+        srt_server_args = SimpleNamespace(trace_modules=DIFFUSION_TRACE_MODULE)
+        set_global_server_args_for_scheduler(srt_server_args)
+
+    trace_modules = [
+        module.strip()
+        for module in getattr(srt_server_args, "trace_modules", "").split(",")
+        if module.strip()
+    ]
+    if DIFFUSION_TRACE_MODULE not in trace_modules:
+        trace_modules.append(DIFFUSION_TRACE_MODULE)
+        srt_server_args.trace_modules = ",".join(trace_modules)
+
+    process_tracing_init(server_args.otlp_traces_endpoint, "sglang-diffusion")
+    trace_set_thread_info(thread_label)
+
+
 @contextmanager
 def trace_req(trace_ctx):
     """Ensure ``trace_req_finish()`` is called when a request scope exits.
diff --git a/python/sglang/multimodal_gen/test/unit/test_disagg_trace.py b/python/sglang/multimodal_gen/test/unit/test_disagg_trace.py
index 0cb314234..2f2d4e48a 100644
--- a/python/sglang/multimodal_gen/test/unit/test_disagg_trace.py
+++ b/python/sglang/multimodal_gen/test/unit/test_disagg_trace.py
@@ -19,6 +19,8 @@ from __future__ import annotations
 
 import json
 import unittest
+from contextlib import contextmanager
+from types import SimpleNamespace
 
 import torch
 
@@ -28,8 +30,10 @@ from sglang.multimodal_gen.runtime.disaggregation.scheduler_mixin import (
 )
 from sglang.multimodal_gen.runtime.disaggregation.transport.codec import pack_tensors
 from sglang.multimodal_gen.runtime.pipelines_core import Req
+from sglang.srt import server_args as srt_server_args_module
 from sglang.srt.observability import trace as srt_trace
 from sglang.srt.observability.trace import TraceNullContext, TraceReqContext
+from sglang.srt.server_args import set_global_server_args_for_scheduler
 
 try:
     from opentelemetry import propagate as otel_propagate
@@ -56,6 +60,16 @@ def _enable_minimal_otel() -> None:
     srt_trace.trace_set_thread_info("TestThread")
 
 
+@contextmanager
+def _srt_trace_server_args():
+    prev_server_args = srt_server_args_module._global_server_args
+    set_global_server_args_for_scheduler(SimpleNamespace(trace_modules="request"))
+    try:
+        yield
+    finally:
+        srt_server_args_module._global_server_args = prev_server_args
+
+
 def _traceparent_from(ctx) -> str | None:
     """Re-inject a W3C carrier from an OTel Context and return the traceparent.
 
@@ -133,35 +147,37 @@ class TestDisaggTracePropagation(unittest.TestCase):
         TraceReqContext with an OTel Context (not the raw dict)."""
         _enable_minimal_otel()
 
-        ctx = TraceReqContext(rid="test-on", role="server", module_name="request")
-        ctx.trace_req_start()
-        self.assertTrue(ctx.tracing_enable)
-        self.assertFalse(ctx.is_copy)
+        with _srt_trace_server_args():
+            ctx = TraceReqContext(rid="test-on", role="server", module_name="request")
+            ctx.trace_req_start()
+            self.assertTrue(ctx.tracing_enable)
+            self.assertFalse(ctx.is_copy)
 
-        req = Req(request_id="test-on", prompt="x")
-        req.trace_ctx = ctx
+            req = Req(request_id="test-on", prompt="x")
+            req.trace_ctx = ctx
 
-        _, scalar_fields = extract_transfer_fields(req)
-        self.assertNotIn("trace_ctx", scalar_fields)
-        self.assertIn("_trace_state", scalar_fields)
-        state = scalar_fields["_trace_state"]
-        self.assertTrue(state.get("tracing_enable"))
-        # W3C carrier must be present so downstream roles can nest spans.
-        self.assertIn("traceparent", state.get("root_span_context", {}))
+            _, scalar_fields = extract_transfer_fields(req)
+            self.assertNotIn("trace_ctx", scalar_fields)
+            self.assertIn("_trace_state", scalar_fields)
+            state = scalar_fields["_trace_state"]
+            self.assertTrue(state.get("tracing_enable"))
+            # W3C carrier must be present so downstream roles can nest spans.
+            self.assertIn("traceparent", state.get("root_span_context", {}))
 
-        decoded = _roundtrip_scalar_fields(scalar_fields)
-        self.assertEqual(decoded["_trace_state"], state)
+            decoded = _roundtrip_scalar_fields(scalar_fields)
+            self.assertEqual(decoded["_trace_state"], state)
 
-        rebuilt = object.__new__(TraceReqContext)
-        rebuilt.__setstate__(decoded["_trace_state"])
-        self.assertTrue(rebuilt.tracing_enable)
-        self.assertTrue(rebuilt.is_copy)
-        # The sender's traceparent must survive into the rebuilt Context so
-        # downstream role spans nest under the original trace_id.
-        self.assertEqual(
-            _traceparent_from(rebuilt.root_span_context),
-            state["root_span_context"]["traceparent"],
-        )
+            rebuilt = object.__new__(TraceReqContext)
+            rebuilt.__setstate__(decoded["_trace_state"])
+            self.assertTrue(rebuilt.tracing_enable)
+            self.assertTrue(rebuilt.is_copy)
+            # The sender's traceparent must survive into the rebuilt Context so
+            # downstream role spans nest under the original trace_id.
+            self.assertEqual(
+                _traceparent_from(rebuilt.root_span_context),
+                state["root_span_context"]["traceparent"],
+            )
+            ctx.trace_req_finish()
 
     @unittest.skipUnless(_OTEL_AVAILABLE, "opentelemetry SDK not installed")
     def test_build_disagg_req_installs_rebuilt_ctx(self):
@@ -170,22 +186,26 @@ class TestDisaggTracePropagation(unittest.TestCase):
         the Req as a stray attribute."""
         _enable_minimal_otel()
 
-        ctx = TraceReqContext(rid="test-brq", role="server", module_name="request")
-        ctx.trace_req_start()
+        with _srt_trace_server_args():
+            ctx = TraceReqContext(rid="test-brq", role="server", module_name="request")
+            ctx.trace_req_start()
 
-        req = Req(request_id="test-brq", prompt="x")
-        req.trace_ctx = ctx
-        _, scalar_fields = extract_transfer_fields(req)
-        self.assertIn("_trace_state", scalar_fields)
+            req = Req(request_id="test-brq", prompt="x")
+            req.trace_ctx = ctx
+            _, scalar_fields = extract_transfer_fields(req)
+            self.assertIn("_trace_state", scalar_fields)
 
-        # _build_disagg_req is an instance method but its body does not touch
-        # ``self``; call via __func__ to avoid needing a real Scheduler.
-        rebuilt = SchedulerDisaggMixin._build_disagg_req(None, dict(scalar_fields), {})
+            # _build_disagg_req is an instance method but its body does not
+            # touch ``self``; call via __func__ to avoid needing a real Scheduler.
+            rebuilt = SchedulerDisaggMixin._build_disagg_req(
+                None, dict(scalar_fields), {}
+            )
 
-        self.assertIsInstance(rebuilt.trace_ctx, TraceReqContext)
-        self.assertTrue(rebuilt.trace_ctx.tracing_enable)
-        self.assertTrue(rebuilt.trace_ctx.is_copy)
-        self.assertFalse(hasattr(rebuilt, "_trace_state"))
+            self.assertIsInstance(rebuilt.trace_ctx, TraceReqContext)
+            self.assertTrue(rebuilt.trace_ctx.tracing_enable)
+            self.assertTrue(rebuilt.trace_ctx.is_copy)
+            self.assertFalse(hasattr(rebuilt, "_trace_state"))
+            ctx.trace_req_finish()
 
     @unittest.skipUnless(_OTEL_AVAILABLE, "opentelemetry SDK not installed")
     def test_build_disagg_req_falls_back_when_tracing_off(self):