From 22da5866bf9f717d08f0bcd7b2f4db6f752d3399 Mon Sep 17 00:00:00 2001
From: Max Holland <max@livepeer.org>
Date: Tue, 11 Nov 2025 12:37:12 +0000
Subject: [PATCH 01/11] Daydream whip connection

---
 frontend/src/components/SettingsPanel.tsx |  21 ++++
 frontend/src/hooks/useStreamState.ts      |   1 +
 frontend/src/hooks/useWebRTC.ts           |  18 ++-
 frontend/src/lib/daydream.ts              |  76 +++++++++++++
 frontend/src/lib/whip.ts                  | 104 +++++++++++++++++
 frontend/src/pages/StreamPage.tsx         | 130 +++++++++++++++++++++-
 frontend/src/types/index.ts               |   1 +
 7 files changed, 344 insertions(+), 7 deletions(-)
 create mode 100644 frontend/src/lib/daydream.ts
 create mode 100644 frontend/src/lib/whip.ts

diff --git a/frontend/src/components/SettingsPanel.tsx b/frontend/src/components/SettingsPanel.tsx
index 3e36974f9..73b982c0a 100644
--- a/frontend/src/components/SettingsPanel.tsx
+++ b/frontend/src/components/SettingsPanel.tsx
@@ -35,6 +35,8 @@ interface SettingsPanelProps {
   onPipelineIdChange?: (pipelineId: PipelineId) => void;
   isStreaming?: boolean;
   isDownloading?: boolean;
+  cloudMode?: boolean;
+  onCloudModeChange?: (enabled: boolean) => void;
   resolution?: {
     height: number;
     width: number;
@@ -63,6 +65,8 @@ export function SettingsPanel({
   onPipelineIdChange,
   isStreaming = false,
   isDownloading = false,
+  cloudMode = false,
+  onCloudModeChange,
   resolution,
   onResolutionChange,
   seed = 42,
@@ -197,6 +201,23 @@ export function SettingsPanel({
         <CardTitle className="text-base font-medium">Settings</CardTitle>
       </CardHeader>
       <CardContent className="space-y-6 overflow-y-auto flex-1 [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-gray-300 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:transition-colors [&::-webkit-scrollbar-thumb:hover]:bg-gray-400">
+        <div className="space-y-2">
+          <h3 className="text-sm font-medium">Cloud mode</h3>
+          <div className="flex items-center justify-between gap-2">
+            <span className="text-sm text-foreground">Use Daydream (WebRTC)</span>
+            <Toggle
+              pressed={cloudMode}
+              onPressedChange={onCloudModeChange || (() => {})}
+              variant="outline"
+              size="sm"
+              className="h-7"
+              disabled={isStreaming || isDownloading}
+            >
+              {cloudMode ? "ON" : "OFF"}
+            </Toggle>
+          </div>
+        </div>
+
         <div className="space-y-2">
           <h3 className="text-sm font-medium">Pipeline ID</h3>
           <Select
diff --git a/frontend/src/hooks/useStreamState.ts b/frontend/src/hooks/useStreamState.ts
index 707f5ceb1..fac43c7b4 100644
--- a/frontend/src/hooks/useStreamState.ts
+++ b/frontend/src/hooks/useStreamState.ts
@@ -33,6 +33,7 @@ export function useStreamState() {
     quantization: null,
     kvCacheAttentionBias: 0.3, // Default cache bias
     paused: false, // Default to not paused (generating)
+    cloudMode: false,
   });
 
   const [promptData, setPromptData] = useState<PromptData>({
diff --git a/frontend/src/hooks/useWebRTC.ts b/frontend/src/hooks/useWebRTC.ts
index 3f26675fa..2dbbb5a53 100644
--- a/frontend/src/hooks/useWebRTC.ts
+++ b/frontend/src/hooks/useWebRTC.ts
@@ -20,6 +20,14 @@ interface InitialParameters {
 interface UseWebRTCOptions {
   /** Callback function called when the stream stops on the backend */
   onStreamStop?: () => void;
+  /** Custom offer sender (e.g., Daydream). Defaults to local sendWebRTCOffer */
+  sendOffer?: (
+    req: {
+      sdp?: string;
+      type?: string;
+      initialParameters?: InitialParameters;
+    }
+  ) => Promise<RTCSessionDescriptionInit>;
 }
 
 /**
@@ -159,7 +167,15 @@ export function useWebRTC(options?: UseWebRTCOptions) {
             // ICE gathering complete - now send the offer
             console.log("ICE gathering complete, sending offer to server");
             try {
-              const answer = await sendWebRTCOffer({
+              const offerSender =
+                options?.sendOffer ||
+                (async (req: {
+                  sdp?: string;
+                  type?: string;
+                  initialParameters?: InitialParameters;
+                }) => sendWebRTCOffer(req));
+
+              const answer = await offerSender({
                 sdp: pc.localDescription!.sdp,
                 type: pc.localDescription!.type,
                 initialParameters,
diff --git a/frontend/src/lib/daydream.ts b/frontend/src/lib/daydream.ts
new file mode 100644
index 000000000..f697dbf94
--- /dev/null
+++ b/frontend/src/lib/daydream.ts
@@ -0,0 +1,76 @@
+const DAYDREAM_API_BASE =
+  (import.meta as any).env?.VITE_DAYDREAM_API_BASE || "https://api.daydream.live";
+const DAYDREAM_API_KEY = (import.meta as any).env?.VITE_DAYDREAM_API_KEY;
+
+interface CreateStreamRequest {
+  pipeline_id: string;
+  load_params?: Record<string, unknown> | null;
+}
+
+interface CreateStreamResponse {
+  id: string;
+  whip_url?: string;
+  // other fields may exist; we mainly need id and whip_url
+}
+
+export interface DaydreamWebRTCOfferRequest {
+  sdp?: string;
+  type?: string;
+  initialParameters?: Record<string, unknown>;
+}
+
+export async function createCloudStream(req: CreateStreamRequest) {
+  if (!DAYDREAM_API_KEY) {
+    throw new Error("VITE_DAYDREAM_API_KEY is not set");
+  }
+
+  const response = await fetch(`${DAYDREAM_API_BASE}/v1/streams`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${DAYDREAM_API_KEY}`,
+    },
+    body: JSON.stringify(req),
+  });
+
+  if (!response.ok) {
+    const errorText = await response.text();
+    throw new Error(
+      `Daydream create stream failed: ${response.status} ${response.statusText}: ${errorText}`
+    );
+  }
+
+  const result = (await response.json()) as CreateStreamResponse;
+  return result;
+}
+
+export async function sendDaydreamWebRTCOffer(
+  streamId: string,
+  data: DaydreamWebRTCOfferRequest
+): Promise<RTCSessionDescriptionInit> {
+  if (!DAYDREAM_API_KEY) {
+    throw new Error("VITE_DAYDREAM_API_KEY is not set");
+  }
+
+  const response = await fetch(
+    `${DAYDREAM_API_BASE}/v1/streams/${encodeURIComponent(streamId)}/webrtc/offer`,
+    {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${DAYDREAM_API_KEY}`,
+      },
+      body: JSON.stringify(data),
+    }
+  );
+
+  if (!response.ok) {
+    const errorText = await response.text();
+    throw new Error(
+      `Daydream WebRTC offer failed: ${response.status} ${response.statusText}: ${errorText}`
+    );
+  }
+
+  const result = await response.json();
+  return result;
+}
diff --git a/frontend/src/lib/whip.ts b/frontend/src/lib/whip.ts
new file mode 100644
index 000000000..c31cea86c
--- /dev/null
+++ b/frontend/src/lib/whip.ts
@@ -0,0 +1,104 @@
+export interface StartWhipOptions {
+  endpoint: string;
+  token?: string;
+  localStream?: MediaStream;
+  iceServers?: RTCIceServer[];
+  /** Max time to wait for ICE gathering before sending (ms). Defaults to 2500ms. */
+  maxIceGatherMs?: number;
+}
+
+export async function startWhip(options: StartWhipOptions) {
+  const { endpoint, token, localStream, iceServers, maxIceGatherMs } = options;
+
+  const peerConnection = new RTCPeerConnection({
+    iceServers: iceServers ?? [{ urls: "stun:stun.l.google.com:19302" }],
+  });
+
+  // Attach upstream if provided; otherwise be recv-only
+  if (localStream) {
+    localStream.getTracks().forEach(track => {
+      peerConnection.addTrack(track, localStream);
+    });
+  } else {
+    peerConnection.addTransceiver("video");
+  }
+
+  // Collect remote stream
+  const remoteStream = new MediaStream();
+  peerConnection.ontrack = evt => {
+    if (evt.streams && evt.streams[0]) {
+      evt.streams[0].getTracks().forEach(track => remoteStream.addTrack(track));
+    } else {
+      remoteStream.addTrack(evt.track);
+    }
+  };
+
+  // Create offer and wait for ICE complete (non-trickle)
+  const offer = await peerConnection.createOffer();
+  await peerConnection.setLocalDescription(offer);
+  await waitForIceGatheringComplete(peerConnection, maxIceGatherMs ?? 2500);
+
+  const sdp = peerConnection.localDescription?.sdp || offer.sdp || "";
+  const response = await fetch(endpoint, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/sdp",
+      ...(token ? { Authorization: `Bearer ${token}` } : {}),
+    },
+    body: sdp,
+  });
+
+  if (!response.ok) {
+    const text = await response.text();
+    peerConnection.close();
+    throw new Error(
+      `WHIP offer failed: ${response.status} ${response.statusText}: ${text}`
+    );
+  }
+
+  const resourceUrl = response.headers.get("location") || undefined;
+  const answerSdp = await response.text();
+
+  await peerConnection.setRemoteDescription({
+    type: "answer",
+    sdp: answerSdp,
+  });
+
+  const stop = async () => {
+    try {
+      peerConnection.close();
+      if (resourceUrl) {
+        await fetch(resourceUrl, {
+          method: "DELETE",
+          headers: {
+            ...(token ? { Authorization: `Bearer ${token}` } : {}),
+          },
+        });
+      }
+    } catch {
+      // ignore
+    }
+  };
+
+  return { peerConnection, remoteStream, resourceUrl, stop };
+}
+
+async function waitForIceGatheringComplete(
+  pc: RTCPeerConnection,
+  timeoutMs: number
+): Promise<void> {
+  if (pc.iceGatheringState === "complete") return;
+
+  await Promise.race<void>([
+    new Promise<void>(resolve => {
+      const listener = () => {
+        if (pc.iceGatheringState === "complete") {
+          pc.removeEventListener("icegatheringstatechange", listener);
+          resolve();
+        }
+      };
+      pc.addEventListener("icegatheringstatechange", listener);
+    }),
+    new Promise<void>(resolve => setTimeout(resolve, timeoutMs)),
+  ]);
+}
diff --git a/frontend/src/pages/StreamPage.tsx b/frontend/src/pages/StreamPage.tsx
index 38694d503..2c966a612 100644
--- a/frontend/src/pages/StreamPage.tsx
+++ b/frontend/src/pages/StreamPage.tsx
@@ -17,6 +17,8 @@ import { getDefaultDenoisingSteps, getDefaultResolution } from "../lib/utils";
 import type { PipelineId } from "../types";
 import type { PromptItem, PromptTransition } from "../lib/api";
 import { checkModelStatus, downloadPipelineModels } from "../lib/api";
+import { createCloudStream } from "../lib/daydream";
+import { startWhip } from "../lib/whip";
 
 export function StreamPage() {
   // Use the stream state hook for settings management
@@ -41,6 +43,14 @@ export function StreamPage() {
   const [selectedTimelinePrompt, setSelectedTimelinePrompt] =
     useState<TimelinePrompt | null>(null);
 
+  // Cloud mode state (WHIP)
+  const [isCloudLoading, setIsCloudLoading] = useState(false);
+  const [isConnectingCloud, setIsConnectingCloud] = useState(false);
+  const [isStreamingCloud, setIsStreamingCloud] = useState(false);
+  const [cloudRemoteStream, setCloudRemoteStream] = useState<MediaStream | null>(null);
+  const cloudStopRef = useRef<null | (() => Promise<void>)>(null);
+  const cloudStreamIdRef = useRef<string | null>(null);
+
   // Timeline state for left panel
   const [timelinePrompts, setTimelinePrompts] = useState<TimelinePrompt[]>([]);
   const [timelineCurrentTime, setTimelineCurrentTime] = useState(0);
@@ -421,15 +431,104 @@ export function StreamPage() {
   const handleStartStream = async (
     overridePipelineId?: PipelineId
   ): Promise<boolean> => {
-    if (isStreaming) {
-      stopStream();
-      return true;
+    if (!settings.cloudMode) {
+      if (isStreaming) {
+        stopStream();
+        return true;
+      }
+    } else {
+      if (isStreamingCloud) {
+        if (cloudStopRef.current) {
+          await cloudStopRef.current();
+          cloudStopRef.current = null;
+        }
+        setCloudRemoteStream(null);
+        setIsStreamingCloud(false);
+        setIsConnectingCloud(false);
+        return true;
+      }
+      // Ignore new start requests while a cloud connection is being established
+      if (isConnectingCloud) {
+        return false;
+      }
     }
 
     // Use override pipeline ID if provided, otherwise use current settings
     const pipelineIdToUse = overridePipelineId || settings.pipelineId;
 
     try {
+      // Cloud mode via WHIP
+      if (settings.cloudMode) {
+        // Prepare load parameters based on pipeline
+        let loadParams: Record<string, unknown> | null = null;
+        const resolution = settings.resolution || videoResolution;
+        if (pipelineIdToUse === "streamdiffusionv2" && resolution) {
+          loadParams = {
+            height: resolution.height,
+            width: resolution.width,
+            seed: settings.seed ?? 42,
+          };
+        } else if (pipelineIdToUse === "passthrough" && resolution) {
+          loadParams = {
+            height: resolution.height,
+            width: resolution.width,
+          };
+        } else if (pipelineIdToUse === "longlive" && resolution) {
+          loadParams = {
+            height: resolution.height,
+            width: resolution.width,
+            seed: settings.seed ?? 42,
+          };
+        } else if (settings.pipelineId === "krea-realtime-video" && resolution) {
+          loadParams = {
+            height: resolution.height,
+            width: resolution.width,
+            seed: settings.seed ?? 42,
+            quantization:
+              settings.quantization !== undefined
+                ? settings.quantization
+                : "fp8_e4m3fn",
+          };
+        }
+
+        setIsCloudLoading(true);
+        setIsConnectingCloud(true);
+        const created = await createCloudStream({
+          pipeline_id: 'pip_SDXL-turbo',
+          load_params: loadParams || undefined,
+        });
+        cloudStreamIdRef.current = created.id;
+        setIsCloudLoading(false);
+
+        const needsVideoInput =
+          PIPELINES[pipelineIdToUse]?.category === "video-input";
+        const streamToSend = needsVideoInput ? localStream || undefined : undefined;
+        if (needsVideoInput && !localStream) {
+          console.error("Video input required but no local stream available");
+          setIsConnectingCloud(false);
+          return false;
+        }
+
+        const endpoint = created.whip_url;
+        if (!endpoint) {
+          console.error("Create stream response missing whip_url");
+          setIsConnectingCloud(false);
+          return false;
+        }
+
+        const { remoteStream: cloudStream, stop } = await startWhip({
+          endpoint,
+          localStream: streamToSend,
+        });
+        cloudStopRef.current = stop;
+        setCloudRemoteStream(cloudStream);
+
+        updateSettings({ paused: false });
+        setIsConnectingCloud(false);
+        setIsStreamingCloud(true);
+        return true;
+      }
+
       // Check if models are needed but not downloaded
       const pipelineInfo = PIPELINES[pipelineIdToUse];
       if (pipelineInfo?.requiresModels) {
@@ -628,9 +727,11 @@ export function StreamPage() {
           <div className="flex-1 min-h-0">
             <VideoOutput
               className="h-full"
-              remoteStream={remoteStream}
-              isPipelineLoading={isPipelineLoading}
-              isConnecting={isConnecting}
+              remoteStream={settings.cloudMode ? cloudRemoteStream : remoteStream}
+              isPipelineLoading={
+                settings.cloudMode ? isCloudLoading : isPipelineLoading
+              }
+              isConnecting={settings.cloudMode ? isConnectingCloud : isConnecting}
               pipelineError={pipelineError}
               isPlaying={!settings.paused}
               isDownloading={isDownloading}
@@ -770,6 +871,23 @@ export function StreamPage() {
             onPipelineIdChange={handlePipelineIdChange}
             isStreaming={isStreaming}
             isDownloading={isDownloading}
+            cloudMode={settings.cloudMode ?? false}
+            onCloudModeChange={enabled => {
+              // Stop any active stream when switching modes to avoid mixed state
+              (async () => {
+                if (isStreaming) {
+                  stopStream();
+                }
+                if (isStreamingCloud && cloudStopRef.current) {
+                  await cloudStopRef.current();
+                  cloudStopRef.current = null;
+                  setCloudRemoteStream(null);
+                  setIsStreamingCloud(false);
+                  setIsConnectingCloud(false);
+                }
+              })();
+              updateSettings({ cloudMode: enabled });
+            }}
             resolution={
               settings.resolution || getDefaultResolution(settings.pipelineId)
             }
diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts
index 5980c70e4..f3b8cda97 100644
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@@ -37,6 +37,7 @@ export interface SettingsState {
   quantization?: "fp8_e4m3fn" | null;
   kvCacheAttentionBias?: number;
   paused?: boolean;
+  cloudMode?: boolean;
 }
 
 export type PipelineCategory = "video-input" | "no-video-input";

From 8061b4f4aba1809bb780d97ccd8fc067d30e24d5 Mon Sep 17 00:00:00 2001
From: Max Holland <max@livepeer.org>
Date: Wed, 12 Nov 2025 14:48:39 +0000
Subject: [PATCH 02/11] Switch over to daydream app WhipConnection

---
 frontend/package-lock.json                    |  40 +-
 frontend/package.json                         |   3 +-
 frontend/src/App.tsx                          |  11 +-
 .../components/PromptInputWithTimeline.tsx    |  45 +-
 frontend/src/components/WhipConnection.tsx    | 106 ++
 frontend/src/hooks/usePlaybackUrl.ts          |  15 +
 frontend/src/lib/WhipClient.ts                | 699 +++++++++++++
 frontend/src/main.tsx                         |   4 +-
 frontend/src/muxer/README.md                  |  46 +
 frontend/src/muxer/core.ts                    | 953 ++++++++++++++++++
 frontend/src/muxer/index.tsx                  | 128 +++
 frontend/src/muxer/types.ts                   |  52 +
 frontend/src/pages/StreamPage.tsx             |  82 +-
 13 files changed, 2132 insertions(+), 52 deletions(-)
 create mode 100644 frontend/src/components/WhipConnection.tsx
 create mode 100644 frontend/src/hooks/usePlaybackUrl.ts
 create mode 100644 frontend/src/lib/WhipClient.ts
 create mode 100644 frontend/src/muxer/README.md
 create mode 100644 frontend/src/muxer/core.ts
 create mode 100644 frontend/src/muxer/index.tsx
 create mode 100644 frontend/src/muxer/types.ts

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index cf45e47ba..f7516238c 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -22,7 +22,8 @@
         "react": "^19.1.1",
         "react-dom": "^19.1.1",
         "sonner": "^2.0.7",
-        "tailwind-merge": "^3.3.1"
+        "tailwind-merge": "^3.3.1",
+        "zustand": "^4.5.2"
       },
       "devDependencies": {
         "@eslint/js": "^9.33.0",
@@ -5143,6 +5144,43 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/zustand": {
+      "version": "4.5.2",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.2.tgz",
+      "integrity": "sha512-2cN1tPkDVkwCy5ickKrI7vijSjPksFRfqS6237NzT0vqSsztTNnQdHw9mmN7uBdk3gceVXU0a+21jFzFzAc9+g==",
+      "license": "MIT",
+      "dependencies": {
+        "use-sync-external-store": "1.2.0"
+      },
+      "engines": {
+        "node": ">=12.7.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.8",
+        "immer": ">=9.0.6",
+        "react": ">=16.8"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/zustand/node_modules/use-sync-external-store": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
+      "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
     }
   }
 }
diff --git a/frontend/package.json b/frontend/package.json
index 1ff5b34cd..ddd984206 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -28,7 +28,8 @@
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "sonner": "^2.0.7",
-    "tailwind-merge": "^3.3.1"
+    "tailwind-merge": "^3.3.1",
+    "zustand": "^4.5.2"
   },
   "devDependencies": {
     "@eslint/js": "^9.33.0",
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 74fb3fa47..94648ca0c 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,13 +1,16 @@
 import { StreamPage } from "./pages/StreamPage";
 import { Toaster } from "./components/ui/sonner";
 import "./index.css";
+import { MuxerProvider } from "@/muxer";
 
 function App() {
   return (
-    <>
-      <StreamPage />
-      <Toaster />
-    </>
+    <MuxerProvider width={512} height={512} fps={30} sendFps={30}>
+      <>
+        <StreamPage />
+        <Toaster />
+      </>
+    </MuxerProvider>
   );
 }
 
diff --git a/frontend/src/components/PromptInputWithTimeline.tsx b/frontend/src/components/PromptInputWithTimeline.tsx
index f6d3cf7fd..09913d380 100644
--- a/frontend/src/components/PromptInputWithTimeline.tsx
+++ b/frontend/src/components/PromptInputWithTimeline.tsx
@@ -19,6 +19,9 @@ interface PromptInputWithTimelineProps {
   ) => void;
   disabled?: boolean;
   isStreaming?: boolean;
+  isStreamingCloud?: boolean;
+  isConnectingCloud?: boolean;
+  isStartingCloud?: boolean;
   isVideoPaused?: boolean;
   timelineRef?: React.RefObject<{
     getCurrentTimelinePrompt: () => string;
@@ -54,6 +57,9 @@ export function PromptInputWithTimeline({
   onPromptItemsSubmit,
   disabled = false,
   isStreaming = false,
+  isStreamingCloud = false,
+  isConnectingCloud = false,
+  isStartingCloud = false,
   isVideoPaused = false,
   timelineRef,
   selectedPrompt: _selectedPrompt = null,
@@ -246,7 +252,8 @@ export function PromptInputWithTimeline({
 
   // Initialize stream if needed
   const initializeStream = useCallback(async (): Promise<boolean> => {
-    if (!isStreaming && onStartStream) {
+    console.log("[PromptInputWithTimeline] initializeStream", isStreaming, isStreamingCloud, isConnectingCloud);
+    if (!isStreaming && !isStreamingCloud && !isConnectingCloud && !isStartingCloud && onStartStream) {
       const result = await onStartStream();
       const started = result === true; // Treat undefined/void as false
       if (started) {
@@ -255,8 +262,8 @@ export function PromptInputWithTimeline({
       }
       return false;
     }
-    return isStreaming; // Already streaming
-  }, [isStreaming, onStartStream]);
+    return true; // Already streaming
+  }, [isStreaming, isStreamingCloud, isConnectingCloud, isStartingCloud, onStartStream]);
 
   // Check if at end of timeline
   const isAtTimelineEnd = useCallback(() => {
@@ -285,22 +292,22 @@ export function PromptInputWithTimeline({
 
     const isAtEnd = isAtTimelineEnd();
 
-    if (isAtEnd) {
-      setIsLive(true);
-      onLiveStateChange?.(true);
-
-      // Only create a new live prompt if there are no prompts at all in the timeline
-      if (prompts.length === 0) {
-        const streamStartedAgain = await initializeStream();
-        if (streamStartedAgain) {
-          const livePrompt = buildLivePromptFromCurrent(
-            currentTime,
-            currentTime
-          );
-          setPrompts(prevPrompts => [...prevPrompts, livePrompt]);
-        }
-      }
-    }
+    // if (isAtEnd) {
+    //   setIsLive(true);
+    //   onLiveStateChange?.(true);
+
+    //   // Only create a new live prompt if there are no prompts at all in the timeline
+    //   if (prompts.length === 0) {
+    //     const streamStartedAgain = await initializeStream();
+    //     if (streamStartedAgain) {
+    //       const livePrompt = buildLivePromptFromCurrent(
+    //         currentTime,
+    //         currentTime
+    //       );
+    //       setPrompts(prevPrompts => [...prevPrompts, livePrompt]);
+    //     }
+    //   }
+    // }
 
     // Set callback to start playback when video actually starts playing
     if (onVideoPlayingCallbackRef) {
diff --git a/frontend/src/components/WhipConnection.tsx b/frontend/src/components/WhipConnection.tsx
new file mode 100644
index 000000000..69008c10d
--- /dev/null
+++ b/frontend/src/components/WhipConnection.tsx
@@ -0,0 +1,106 @@
+"use client";
+
+import { usePlaybackUrl } from "@/hooks/usePlaybackUrl";
+import { useMuxer } from "@/muxer";
+import { memo, useEffect, useRef } from "react";
+import { WhipClient } from "@/lib/WhipClient";
+
+interface WhipConnectionProps {
+  whipUrl: string;
+  stream: MediaStream | null;
+  onConnectionStateChange?: (state: RTCPeerConnectionState) => void;
+  onRetryLimitExceeded?: () => void;
+  iceServers?: RTCIceServer[];
+  sdpTimeout?: number;
+  enableRetry?: boolean;
+  accessKey?: string;
+  jwt?: string;
+  debugStats?: boolean;
+}
+
+export const WhipConnection = memo(
+  ({
+    whipUrl,
+    stream,
+    onConnectionStateChange,
+    onRetryLimitExceeded,
+    iceServers,
+    sdpTimeout = 10000,
+    enableRetry = true,
+    accessKey,
+    jwt,
+    debugStats,
+  }: WhipConnectionProps) => {
+    const { setPlaybackUrl, setLoading } = usePlaybackUrl();
+    const muxer = useMuxer();
+    const clientRef = useRef<WhipClient | null>(null);
+    const streamRef = useRef<MediaStream | null>(stream);
+
+    useEffect(() => {
+      streamRef.current = stream || null;
+      const client = clientRef.current;
+      if (client && stream) {
+        void client.setStream(stream);
+        void client.connect();
+      }
+    }, [stream]);
+
+    useEffect(() => {
+      console.log("[WhipConnection] Re-rendering WhipConnection");
+      if (!whipUrl) return;
+      console.log("[WhipConnection] WhipUrl:", whipUrl, "stream:", streamRef.current?.getVideoTracks().length);
+
+      const client = new WhipClient({
+        whipUrl,
+        getStream: () => streamRef.current,
+        onConnectionStateChange,
+        onRetryLimitExceeded,
+        onPlaybackUrl: (url: string) => {
+          setPlaybackUrl(url);
+          setLoading(false);
+        },
+        iceServers,
+        sdpTimeout,
+        enableRetry,
+        accessKey,
+        jwt,
+        debugStats,
+        initialMaxFramerate: 30,
+      });
+      clientRef.current = client;
+      console.log("[WhipConnection] WhipClient created");
+      void client.connect();
+      console.log("[WhipConnection] WhipClient connected");
+      return () => {
+        console.log("[WhipConnection] WhipClient stoppe, now sleeping");
+        setTimeout(() => {
+          console.log("[WhipConnection] WhipClient stopped, now waking up");
+          void client.stop();
+          clientRef.current = null;
+        }, 2000); // 2s
+      };
+    }, [
+      whipUrl,
+      onConnectionStateChange,
+      onRetryLimitExceeded,
+      iceServers,
+      sdpTimeout,
+      enableRetry,
+      accessKey,
+      jwt,
+      debugStats,
+      setPlaybackUrl,
+      setLoading,
+    ]);
+
+    useEffect(() => {
+      const client = clientRef.current;
+      if (!client) return;
+      client.setMaxFramerate(muxer.sendFps);
+    }, [muxer.sendFps]);
+
+    return null;
+  },
+);
+
+WhipConnection.displayName = "WhipConnection";
diff --git a/frontend/src/hooks/usePlaybackUrl.ts b/frontend/src/hooks/usePlaybackUrl.ts
new file mode 100644
index 000000000..9dd2420f2
--- /dev/null
+++ b/frontend/src/hooks/usePlaybackUrl.ts
@@ -0,0 +1,15 @@
+import { create } from "zustand";
+
+interface PlaybackUrlState {
+  loading: boolean;
+  playbackUrl: string | null;
+  setPlaybackUrl: (url: string | null) => void;
+  setLoading: (loading: boolean) => void;
+}
+
+export const usePlaybackUrl = create<PlaybackUrlState>(set => ({
+  loading: true,
+  playbackUrl: null,
+  setPlaybackUrl: url => set({ playbackUrl: url }),
+  setLoading: (loading: boolean) => set({ loading }),
+}));
diff --git a/frontend/src/lib/WhipClient.ts b/frontend/src/lib/WhipClient.ts
new file mode 100644
index 000000000..34468158c
--- /dev/null
+++ b/frontend/src/lib/WhipClient.ts
@@ -0,0 +1,699 @@
+export type GetStream = () => MediaStream | null;
+
+type AccessControlParams = {
+  accessKey?: string;
+  jwt?: string;
+};
+
+type WhipClientOptions = {
+  whipUrl: string;
+  getStream: GetStream;
+  onConnectionStateChange?: (state: RTCPeerConnectionState) => void;
+  onRetryLimitExceeded?: () => void;
+  onPlaybackUrl?: (url: string) => void;
+  iceServers?: RTCIceServer[];
+  sdpTimeout?: number;
+  enableRetry?: boolean;
+  accessKey?: string;
+  jwt?: string;
+  debugStats?: boolean;
+  initialMaxFramerate?: number;
+  maxRetries?: number;
+  retryDelayBaseMs?: number;
+};
+
+const VIDEO_BITRATE = 300000;
+const AUDIO_BITRATE = 64000;
+
+const MAX_REDIRECT_CACHE_SIZE = 10;
+const redirectUrlCache = new Map<string, URL>();
+const playbackIdPattern = /([/+])([^/+?]+)$/;
+const REPLACE_PLACEHOLDER = "PLAYBACK_ID";
+
+function getCachedTemplate(key: string): URL | undefined {
+  const cachedItem = redirectUrlCache.get(key);
+  if (cachedItem) {
+    redirectUrlCache.delete(key);
+    redirectUrlCache.set(key, cachedItem);
+  }
+  return cachedItem;
+}
+
+function setCachedTemplate(key: string, value: URL): void {
+  if (redirectUrlCache.has(key)) {
+    redirectUrlCache.delete(key);
+  } else if (redirectUrlCache.size >= MAX_REDIRECT_CACHE_SIZE) {
+    const oldestKey = redirectUrlCache.keys().next().value;
+    if (oldestKey) redirectUrlCache.delete(oldestKey);
+  }
+  redirectUrlCache.set(key, value);
+}
+
+function preferCodec(sdp: string, codec: string): string {
+  const lines = sdp.split("\r\n");
+  const mLineIndex = lines.findIndex(line => line.startsWith("m=video"));
+  if (mLineIndex === -1) return sdp;
+  const codecRegex = new RegExp(`a=rtpmap:(\\d+) ${codec}(/\\d+)+`);
+  const codecLine = lines.find(line => codecRegex.test(line));
+  if (!codecLine) return sdp;
+  const codecPayload = codecRegex.exec(codecLine)?.[1];
+  if (!codecPayload) return sdp;
+  const mLineElements = lines[mLineIndex].split(" ");
+  const reorderedMLine = [
+    ...mLineElements.slice(0, 3),
+    codecPayload,
+    ...mLineElements.slice(3).filter(payload => payload !== codecPayload),
+  ];
+  lines[mLineIndex] = reorderedMLine.join(" ");
+  return lines.join("\r\n");
+}
+
+function getRTCPeerConnectionConstructor(): typeof RTCPeerConnection | null {
+  if (typeof window === "undefined") return null;
+  return (
+    window.RTCPeerConnection ||
+    (window as any).webkitRTCPeerConnection ||
+    (window as any).mozRTCPeerConnection ||
+    null
+  );
+}
+
+async function waitToCompleteICEGathering(
+  peerConnection: RTCPeerConnection,
+  timeoutMs: number,
+): Promise<RTCSessionDescription | null> {
+  return new Promise<RTCSessionDescription | null>(resolve => {
+    const timeout = setTimeout(() => {
+      resolve(peerConnection.localDescription);
+    }, timeoutMs);
+    peerConnection.onicegatheringstatechange = () => {
+      if (peerConnection.iceGatheringState === "complete") {
+        clearTimeout(timeout);
+        resolve(peerConnection.localDescription);
+      }
+    };
+  });
+}
+
+async function constructClientOffer(
+  peerConnection: RTCPeerConnection,
+  noIceGathering?: boolean,
+): Promise<RTCSessionDescription | null> {
+  const originalOffer = await peerConnection.createOffer({
+    offerToReceiveAudio: false,
+    offerToReceiveVideo: false,
+  });
+  const enhancedOffer = new RTCSessionDescription({
+    type: originalOffer.type,
+    sdp: preferCodec(originalOffer.sdp || "", "H264"),
+  });
+  await peerConnection.setLocalDescription(enhancedOffer);
+  if (noIceGathering) return peerConnection.localDescription;
+  const ofr = await waitToCompleteICEGathering(peerConnection, 1000);
+  if (!ofr) throw Error("Failed to gather ICE candidates for offer");
+  return ofr;
+}
+
+async function postSDPOffer(
+  endpoint: string,
+  data: string,
+  controller: AbortController,
+  accessControl: AccessControlParams,
+  sdpTimeout: number,
+  onPlaybackUrl?: (url: string) => void,
+): Promise<Response> {
+  const id = setTimeout(() => controller.abort(), sdpTimeout);
+  const urlForPost = new URL(endpoint);
+  const parsedMatches = urlForPost.pathname.match(playbackIdPattern);
+  const currentPlaybackId = parsedMatches?.[2];
+  const cachedTemplateUrl = getCachedTemplate(endpoint);
+  if (cachedTemplateUrl && currentPlaybackId) {
+    urlForPost.host = cachedTemplateUrl.host;
+    urlForPost.pathname = cachedTemplateUrl.pathname.replace(
+      REPLACE_PLACEHOLDER,
+      currentPlaybackId,
+    );
+    urlForPost.search = cachedTemplateUrl.search;
+  }
+  try {
+    const response = await fetch(urlForPost.toString(), {
+      method: "POST",
+      mode: "cors",
+      headers: {
+        "Content-Type": "application/sdp",
+        ...(accessControl.accessKey && {
+          "Livepeer-Access-Key": accessControl.accessKey,
+        }),
+        ...(accessControl.jwt && {
+          "Livepeer-Jwt": accessControl.jwt,
+        }),
+      },
+      body: data,
+      signal: controller.signal,
+    });
+    clearTimeout(id);
+    const playbackUrl = response.headers.get("livepeer-playback-url");
+    if (playbackUrl && onPlaybackUrl) onPlaybackUrl(playbackUrl);
+    if (response.url !== urlForPost.toString()) {
+      const actualRedirectedUrl = new URL(response.url);
+      const templateForCache = new URL(actualRedirectedUrl);
+      templateForCache.pathname = templateForCache.pathname.replace(
+        playbackIdPattern,
+        `$1${REPLACE_PLACEHOLDER}`,
+      );
+      if (
+        !templateForCache.searchParams.has("ingestpb") ||
+        templateForCache.searchParams.get("ingestpb") !== "true"
+      ) {
+        setCachedTemplate(endpoint, templateForCache);
+      }
+    }
+    return response;
+  } catch (error) {
+    clearTimeout(id);
+    throw error;
+  }
+}
+
+async function applyBitrateConstraints(
+  peerConnection: RTCPeerConnection,
+  maxFramerate?: number,
+) {
+  const senders = peerConnection.getSenders();
+  for (const sender of senders) {
+    if (!sender.track) continue;
+    const params = sender.getParameters();
+    const trackKind = sender.track.kind;
+    if (trackKind === "video") {
+      if (!params.encodings) params.encodings = [{}];
+      params.degradationPreference = "maintain-resolution";
+      const encoding = params.encodings[0];
+      encoding.maxBitrate = VIDEO_BITRATE;
+      if (typeof maxFramerate === "number" && maxFramerate > 0) {
+        encoding.maxFramerate = maxFramerate;
+      }
+      encoding.scaleResolutionDownBy = 1.0;
+      encoding.priority = "high";
+      encoding.networkPriority = "high";
+
+      try {
+        await sender.setParameters(params);
+      } catch {}
+    } else if (trackKind === "audio") {
+      if (!params.encodings) params.encodings = [{}];
+      const encoding = params.encodings[0];
+      encoding.maxBitrate = AUDIO_BITRATE;
+      encoding.priority = "medium";
+      encoding.networkPriority = "medium";
+      try {
+        await sender.setParameters(params);
+      } catch {}
+    }
+  }
+}
+
+function debounceBitrate(
+  fn: (pc: RTCPeerConnection, fps?: number) => Promise<void>,
+  wait: number,
+) {
+  let t: ReturnType<typeof setTimeout> | null = null;
+  let resolvers: Array<() => void> = [];
+  let lastArgs: [RTCPeerConnection, number?] | null = null;
+
+  return (pc: RTCPeerConnection, fps?: number) => {
+    lastArgs = [pc, fps];
+    if (t) {
+      clearTimeout(t);
+      resolvers.forEach(r => r());
+      resolvers = [];
+    }
+    return new Promise<void>(resolve => {
+      resolvers.push(resolve);
+      t = setTimeout(() => {
+        const [p, f] = lastArgs!;
+        fn(p, f)
+          .catch(() => {})
+          .finally(() => {
+            resolvers.forEach(r => r());
+            resolvers = [];
+            t = null;
+          });
+      }, wait);
+    });
+  };
+}
+
+const applyBitrateConstraintsDebounced = debounceBitrate(
+  applyBitrateConstraints,
+  50,
+);
+
+export class WhipClient {
+  private whipUrl: string;
+  private getStream: GetStream;
+  private onConnectionStateChange?: (state: RTCPeerConnectionState) => void;
+  private onRetryLimitExceeded?: () => void;
+  private onPlaybackUrl?: (url: string) => void;
+  private iceServers?: RTCIceServer[];
+  private sdpTimeout: number;
+  private enableRetry: boolean;
+  private accessKey?: string;
+  private jwt?: string;
+  private debugStats?: boolean;
+  private pc: RTCPeerConnection | null = null;
+  private videoSender: RTCRtpSender | null = null;
+  private audioSender: RTCRtpSender | null = null;
+  private videoTransceiver: RTCRtpTransceiver | null = null;
+  private audioTransceiver: RTCRtpTransceiver | null = null;
+  private abortController: AbortController | null = null;
+  private isConnecting = false;
+  private connectionEstablished = false;
+  private retryTimeout: ReturnType<typeof setTimeout> | null = null;
+  private retryCount = 0;
+  private maxRetries: number;
+  private retryDelayBaseMs: number;
+  private stopped = false;
+  private disconnectedGraceTimeout: ReturnType<typeof setTimeout> | null = null;
+  private maxFramerate?: number;
+
+  constructor(options: WhipClientOptions) {
+    this.whipUrl = options.whipUrl;
+    this.getStream = options.getStream;
+    this.onConnectionStateChange = options.onConnectionStateChange;
+    this.onRetryLimitExceeded = options.onRetryLimitExceeded;
+    this.onPlaybackUrl = options.onPlaybackUrl;
+    this.iceServers = options.iceServers;
+    this.sdpTimeout = options.sdpTimeout ?? 10000;
+    this.enableRetry = options.enableRetry ?? true;
+    this.accessKey = options.accessKey;
+    this.jwt = options.jwt;
+    this.debugStats = options.debugStats;
+    this.maxRetries = options.maxRetries ?? 2;
+    this.retryDelayBaseMs = options.retryDelayBaseMs ?? 1000;
+    this.maxFramerate = options.initialMaxFramerate;
+  }
+
+  async connect(): Promise<void> {
+    if (this.stopped) return;
+    const stream = this.getStream();
+    if (!stream || !stream.active) return;
+    const v = stream.getVideoTracks()[0];
+    if (!v || v.readyState !== "live") return;
+    if (this.connectionEstablished && this.pc) {
+      const replaced = await this.replaceTracks(stream).catch(() => false);
+      if (replaced) return;
+    }
+    if (this.isConnecting) return;
+    this.isConnecting = true;
+    if (this.abortController) {
+      try {
+        this.abortController.abort();
+      } catch {}
+    }
+    if (this.disconnectedGraceTimeout) {
+      clearTimeout(this.disconnectedGraceTimeout);
+      this.disconnectedGraceTimeout = null;
+    }
+    this.abortController = new AbortController();
+    try {
+      if (this.pc) {
+        try {
+          this.pc.close();
+        } catch {}
+        this.pc = null;
+        this.connectionEstablished = false;
+        this.videoSender = null;
+        this.audioSender = null;
+        this.videoTransceiver = null;
+        this.audioTransceiver = null;
+      }
+      const pc = this.createPeerConnection();
+      this.pc = pc;
+      await this.attachStream(stream, pc);
+      try {
+        if (this.videoTransceiver) {
+          const caps = RTCRtpSender.getCapabilities("video");
+          if (caps?.codecs?.length) {
+            const h264 = caps.codecs.filter(c =>
+              c.mimeType.toLowerCase().includes("h264"),
+            );
+            if (h264.length && this.videoTransceiver.setCodecPreferences) {
+              this.videoTransceiver.setCodecPreferences(h264);
+            }
+          }
+        }
+      } catch {}
+      if (this.pc)
+        await applyBitrateConstraintsDebounced(this.pc, this.maxFramerate);
+      const offer = await constructClientOffer(pc, false);
+      if (!offer?.sdp) throw new Error("Failed to create valid offer");
+      const accessControl: AccessControlParams = {
+        accessKey: this.accessKey,
+        jwt: this.jwt,
+      };
+      const response = await postSDPOffer(
+        this.whipUrl,
+        offer.sdp,
+        this.abortController,
+        accessControl,
+        this.sdpTimeout,
+        this.onPlaybackUrl,
+      );
+      if (!response.ok) {
+        const msg = await response.text().catch(() => "");
+        throw new Error(
+          `WHIP request failed: ${response.status} ${response.statusText} - ${msg}`,
+        );
+      }
+      const answerSdp = await response.text();
+      await pc.setRemoteDescription({ type: "answer", sdp: answerSdp });
+      if (this.pc)
+        await applyBitrateConstraintsDebounced(this.pc, this.maxFramerate);
+      this.retryCount = 0;
+      this.connectionEstablished = true;
+    } catch (e) {
+      if (this.pc) {
+        try {
+          this.pc.close();
+        } catch {}
+        this.pc = null;
+      }
+      this.connectionEstablished = false;
+      this.scheduleRetry();
+    } finally {
+      this.isConnecting = false;
+    }
+  }
+
+  async stop(): Promise<void> {
+    this.stopped = true;
+    if (this.retryTimeout) {
+      clearTimeout(this.retryTimeout);
+      this.retryTimeout = null;
+    }
+    if (this.disconnectedGraceTimeout) {
+      clearTimeout(this.disconnectedGraceTimeout);
+      this.disconnectedGraceTimeout = null;
+    }
+    if (this.abortController) {
+      try {
+        this.abortController.abort();
+      } catch {}
+      this.abortController = null;
+    }
+    if (this.pc) {
+      try {
+        this.pc.getTransceivers().forEach(t => {
+          try {
+            t.stop();
+          } catch {}
+        });
+      } catch {}
+      try {
+        this.pc.close();
+      } catch {}
+      this.pc = null;
+    }
+    this.videoSender = null;
+    this.audioSender = null;
+    this.videoTransceiver = null;
+    this.audioTransceiver = null;
+  }
+
+  setMaxFramerate(fps?: number) {
+    this.maxFramerate = fps;
+    const pc = this.pc;
+    if (!pc) return;
+    void applyBitrateConstraintsDebounced(pc, this.maxFramerate);
+  }
+
+  setWhipUrl(url: string) {
+    this.whipUrl = url;
+  }
+
+  async setStream(_: MediaStream | null) {
+    if (!this.pc || !this.connectionEstablished) return;
+    const s = this.getStream();
+    if (!s) return;
+    await this.replaceTracks(s).catch(() => {});
+  }
+
+  private createPeerConnection(): RTCPeerConnection {
+    const RTCPeerConnectionConstructor = getRTCPeerConnectionConstructor();
+    if (!RTCPeerConnectionConstructor)
+      throw new Error("No RTCPeerConnection constructor");
+    const defaultIceServers: RTCIceServer[] = [
+      { urls: "stun:stun.l.google.com:19302" },
+      { urls: "stun:stun1.l.google.com:19302" },
+      { urls: "stun:stun.cloudflare.com:3478" },
+    ];
+    const pc = new RTCPeerConnectionConstructor({
+      iceServers: this.iceServers || defaultIceServers,
+      iceCandidatePoolSize: 10,
+    });
+    try {
+      const v = pc.addTransceiver("video", { direction: "sendonly" });
+      const a = pc.addTransceiver("audio", { direction: "sendonly" });
+      this.videoTransceiver = v;
+      this.audioTransceiver = a;
+      this.videoSender = v.sender || null;
+      this.audioSender = a.sender || null;
+    } catch {}
+    pc.onconnectionstatechange = () => {
+      this.onConnectionStateChange?.(pc.connectionState);
+      if (this.pc !== pc) return;
+      switch (pc.connectionState) {
+        case "connected":
+          this.connectionEstablished = true;
+          if (this.disconnectedGraceTimeout) {
+            clearTimeout(this.disconnectedGraceTimeout);
+            this.disconnectedGraceTimeout = null;
+          }
+          break;
+        case "disconnected":
+          this.connectionEstablished = false;
+          if (this.disconnectedGraceTimeout) {
+            clearTimeout(this.disconnectedGraceTimeout);
+            this.disconnectedGraceTimeout = null;
+          }
+          try {
+            pc.restartIce();
+          } catch {}
+          this.disconnectedGraceTimeout = setTimeout(() => {
+            if (this.stopped || this.pc !== pc) return;
+            if (pc.connectionState === "disconnected") {
+              this.scheduleRetry();
+            }
+          }, 2000);
+          break;
+        case "failed":
+          this.connectionEstablished = false;
+          this.isConnecting = false;
+          if (this.disconnectedGraceTimeout) {
+            clearTimeout(this.disconnectedGraceTimeout);
+            this.disconnectedGraceTimeout = null;
+          }
+          this.scheduleRetry();
+          break;
+        case "closed":
+          this.connectionEstablished = false;
+          this.isConnecting = false;
+          if (this.disconnectedGraceTimeout) {
+            clearTimeout(this.disconnectedGraceTimeout);
+            this.disconnectedGraceTimeout = null;
+          }
+          break;
+      }
+    };
+    pc.oniceconnectionstatechange = () => {
+      if (
+        (pc.iceConnectionState === "failed" ||
+          pc.iceConnectionState === "disconnected") &&
+        this.enableRetry
+      ) {
+        try {
+          pc.restartIce();
+        } catch {}
+      }
+      void applyBitrateConstraintsDebounced(pc, this.maxFramerate);
+    };
+    if (this.debugStats) this.setupDebugStats(pc);
+    return pc;
+  }
+
+  private async attachStream(mediaStream: MediaStream, pc: RTCPeerConnection) {
+    const videoTrack = mediaStream.getVideoTracks()[0] || null;
+    const audioTrack = mediaStream.getAudioTracks()[0] || null;
+    if (this.videoSender) {
+      const current = this.videoSender.track || null;
+      const same = current && videoTrack && current.id === videoTrack.id;
+      if (!same) {
+        try {
+          await this.videoSender.replaceTrack(videoTrack);
+        } catch {}
+      }
+      if (videoTrack && videoTrack.contentHint == null) {
+        try {
+          videoTrack.contentHint = "motion";
+        } catch {}
+      }
+    }
+    if (this.audioSender) {
+      if (audioTrack) {
+        const current = this.audioSender.track || null;
+        const same = current && current.id === audioTrack.id;
+        try {
+          if (!same) await this.audioSender.replaceTrack(audioTrack);
+        } catch {}
+      }
+    }
+  }
+
+  private async replaceTracks(newStream: MediaStream) {
+    if (!this.pc) return false;
+    const tasks: Promise<void>[] = [];
+    const videoTrack = newStream.getVideoTracks()[0] || null;
+    const audioTrack = newStream.getAudioTracks()[0] || null;
+    if (this.videoSender) {
+      tasks.push(this.videoSender.replaceTrack(videoTrack).catch(() => {}));
+    }
+    if (this.audioSender) {
+      if (audioTrack) {
+        const current = this.audioSender.track || null;
+        const same = current && current.id === audioTrack.id;
+        if (!same)
+          tasks.push(this.audioSender.replaceTrack(audioTrack).catch(() => {}));
+      }
+    }
+    await Promise.allSettled(tasks);
+    if (this.pc)
+      await applyBitrateConstraintsDebounced(this.pc, this.maxFramerate);
+    return true;
+  }
+
+  private scheduleRetry() {
+    if (!this.enableRetry) return;
+    if (this.retryCount >= this.maxRetries) {
+      this.onRetryLimitExceeded?.();
+      return;
+    }
+    if (this.retryTimeout) {
+      clearTimeout(this.retryTimeout);
+      this.retryTimeout = null;
+    }
+    const delay = this.retryDelayBaseMs * Math.pow(2, this.retryCount);
+    this.retryTimeout = setTimeout(() => {
+      if (this.stopped) return;
+      this.retryCount++;
+      void this.connect();
+    }, delay);
+  }
+
+  private setupDebugStats(pc: RTCPeerConnection) {
+    let interval: ReturnType<typeof setInterval> | null = null;
+    let lastVideoBytes = 0;
+    let lastAudioBytes = 0;
+    let lastFrames = 0;
+    let videoBaseFrames = 0;
+    let videoBaseFramesSet = false;
+    let videoFpsEma: number | null = null;
+    const fpsAlpha = 0.3;
+    let audioBaseDuration = 0;
+    let audioBaseDurationSet = false;
+    const tick = async () => {
+      try {
+        const senders = pc.getSenders();
+        const videoSender = senders.find(s => s.track?.kind === "video");
+        const audioSender = senders.find(s => s.track?.kind === "audio");
+        let videoRelTimeSec: number | undefined;
+        let audioRelTimeSec: number | undefined;
+        if (videoSender?.getStats) {
+          const stats = await videoSender.getStats();
+          stats.forEach(report => {
+            if (report.type === "outbound-rtp" && report.kind === "video") {
+              const bytes = report.bytesSent || 0;
+              const frames = report.framesEncoded || report.framesSent || 0;
+              const width = report.frameWidth;
+              const height = report.frameHeight;
+              const rtt = report.roundTripTime;
+              const bytesDelta = bytes - lastVideoBytes;
+              const framesDelta = frames - lastFrames;
+              lastVideoBytes = bytes;
+              lastFrames = frames;
+              if (!videoBaseFramesSet && frames > 0) {
+                videoBaseFrames = frames;
+                videoBaseFramesSet = true;
+              }
+              const relFrames = frames - videoBaseFrames;
+              const fpsInstant = Math.max(0, framesDelta);
+              videoFpsEma =
+                videoFpsEma == null
+                  ? fpsInstant
+                  : videoFpsEma * (1 - fpsAlpha) + fpsInstant * fpsAlpha;
+              if (videoFpsEma && videoFpsEma > 0) {
+                videoRelTimeSec = relFrames / videoFpsEma;
+              }
+              if (bytesDelta >= 0 || framesDelta >= 0) {
+                const size = width && height ? `${width}x${height}` : undefined;
+                const visibility =
+                  typeof document !== "undefined"
+                    ? document.visibilityState
+                    : undefined;
+                console.log("WHIP video tx", {
+                  kbps: Math.round((bytesDelta * 8) / 1000),
+                  framesDelta,
+                  size,
+                  rtt,
+                  visibility,
+                });
+              }
+            }
+          });
+        }
+        if (audioSender?.getStats) {
+          const stats = await audioSender.getStats();
+          stats.forEach(report => {
+            if (report.type === "outbound-rtp" && report.kind === "audio") {
+              const bytes = report.bytesSent || 0;
+              const bytesDelta = bytes - lastAudioBytes;
+              lastAudioBytes = bytes;
+              console.debug("WHIP audio tx", {
+                kbps: Math.round((bytesDelta * 8) / 1000),
+              });
+            }
+            if (report.type === "media-source" && report.kind === "audio") {
+              const dur = report.totalSamplesDuration;
+              if (typeof dur === "number") {
+                if (!audioBaseDurationSet) {
+                  audioBaseDuration = dur;
+                  audioBaseDurationSet = true;
+                }
+                audioRelTimeSec = dur - audioBaseDuration;
+              }
+            }
+          });
+        }
+        if (
+          typeof videoRelTimeSec === "number" &&
+          typeof audioRelTimeSec === "number"
+        ) {
+          const delta = audioRelTimeSec - videoRelTimeSec;
+          console.log("WHIP av sync", {
+            audio_time_s: Math.round(audioRelTimeSec * 1000) / 1000,
+            video_time_s: Math.round(videoRelTimeSec * 1000) / 1000,
+            delta_s: Math.round(delta * 1000) / 1000,
+          });
+        }
+      } catch {}
+    };
+    interval = setInterval(tick, 1000);
+    const stop = () => {
+      if (interval) clearInterval(interval);
+    };
+    const origClose = pc.close.bind(pc);
+    pc.close = () => {
+      stop();
+      origClose();
+    };
+  }
+}
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index 10ed13e0c..73c029101 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -4,7 +4,7 @@ import "./index.css";
 import App from "./App.tsx";
 
 createRoot(document.getElementById("root")!).render(
-  <StrictMode>
+  // <StrictMode>
     <App />
-  </StrictMode>
+  // </StrictMode>
 );
diff --git a/frontend/src/muxer/README.md b/frontend/src/muxer/README.md
new file mode 100644
index 000000000..84c6c9ea1
--- /dev/null
+++ b/frontend/src/muxer/README.md
@@ -0,0 +1,46 @@
+### Muxer
+
+Lightweight canvas muxer for 2D compositing and smooth source crossfades.
+
+_This muxer will be extracted into a separate library soon_
+
+### Quick start
+
+```tsx
+import { PropsWithChildren, useEffect, useRef } from "react";
+import { MuxerProvider, useMuxer } from "@/muxer";
+
+function App({ children }: PropsWithChildren) {
+  return (
+    <MuxerProvider width={512} height={512} fps={30} sendFps={30}>
+      <MySource />
+      {children}
+    </MuxerProvider>
+  );
+}
+
+function MySource() {
+  const { setCanvasSize, setSource } = useMuxer();
+  const videoRef = useRef<HTMLVideoElement>(null);
+
+  useEffect(() => {
+    if (!videoRef.current) return;
+    setCanvasSize(1280, 720);
+    setSource({
+      kind: "video",
+      element: videoRef.current,
+      contentHint: "motion",
+      fit: "cover",
+    });
+  }, [muxer]);
+
+  return <video ref={videoRef} autoPlay muted />;
+}
+```
+
+### API
+
+- **stream**: `MediaStream`
+- **setCanvasSize(w, h, dpr?)**
+- **setFps(fps)**, **setSendFps(fps)**
+- **setSource(source)**, **clearSource()**
diff --git a/frontend/src/muxer/core.ts b/frontend/src/muxer/core.ts
new file mode 100644
index 000000000..8d21d3b8b
--- /dev/null
+++ b/frontend/src/muxer/core.ts
@@ -0,0 +1,953 @@
+import type {
+  CanvasSize,
+  Ctx2D,
+  CustomSource,
+  FitMode,
+  MuxerSource,
+} from "./types";
+
+export type MuxerOptions = {
+  width: number;
+  height: number;
+  fps: number;
+  dpr?: number;
+  crossfadeMs?: number;
+  keepalive?: boolean;
+  sendFps?: number;
+  onSendFpsChange?: (fps: number) => void;
+  autoUnlockAudio?: boolean;
+  unlockEvents?: string[];
+  disableSilentAudio?: boolean;
+};
+
+export class Muxer {
+  private captureCanvas: HTMLCanvasElement | null = null;
+  private captureCtx: Ctx2D | null = null;
+  private offscreen: OffscreenCanvas | HTMLCanvasElement | null = null;
+  private offscreenCtx: Ctx2D | null = null;
+  private outputStream: MediaStream | null = null;
+
+  private currentSource: MuxerSource | null = null;
+  private pendingSource: MuxerSource | null = null;
+  private cleanupRef: (() => void) | void | undefined;
+
+  private lastFrameAt = 0;
+  private fps: number;
+  private sendFps: number;
+  private size: CanvasSize;
+  private crossfadeMs: number;
+  private crossfadeStart: number | null = null;
+  private keepalive: boolean;
+  private onSendFpsChange?: (fps: number) => void;
+
+  private rafId: number | null = null;
+  private videoFrameRequestId: number | null = null;
+  private videoFrameSource: HTMLVideoElement | null = null;
+  private rafFallbackActive = false;
+
+  private backgroundIntervalId: number | null = null;
+  private visibilityListener: (() => void) | null = null;
+  private lastVisibleSendFps: number | null = null;
+  private externalAudioTrackIds: Set<string> = new Set();
+  private frameIndex = 0;
+  private audioCtx: AudioContext | null = null;
+  private silentOsc: OscillatorNode | null = null;
+  private silentGain: GainNode | null = null;
+  private audioDst: MediaStreamAudioDestinationNode | null = null;
+  private silentAudioTrack: MediaStreamTrack | null = null;
+  private externalAudioEndHandlers: Map<string, (ev: Event) => void> =
+    new Map();
+
+  private audioAutoUnlock: boolean = true;
+  private audioUnlockEvents: string[] = [];
+  private audioUnlockHandler: ((ev: Event) => void) | null = null;
+  private audioUnlockAttached = false;
+  private audioStateListenerAttached = false;
+  private disableSilentAudio: boolean = false;
+
+  private rectCache: WeakMap<
+    HTMLCanvasElement | HTMLVideoElement,
+    {
+      canvasW: number;
+      canvasH: number;
+      sourceW: number;
+      sourceH: number;
+      dx: number;
+      dy: number;
+      dw: number;
+      dh: number;
+      fit: FitMode;
+    }
+  > = new WeakMap();
+
+  constructor(options: MuxerOptions) {
+    const dpr = Math.min(
+      2,
+      options.dpr ??
+        (typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1),
+    );
+    this.size = { width: options.width, height: options.height, dpr };
+    this.fps = Math.max(1, options.fps);
+    this.sendFps = Math.max(1, options.sendFps ?? options.fps);
+    this.crossfadeMs = options.crossfadeMs ?? 500;
+    this.keepalive = options.keepalive ?? true;
+    this.onSendFpsChange = options.onSendFpsChange;
+    this.disableSilentAudio = options.disableSilentAudio ?? false;
+    this.initCanvas();
+    this.setupVisibilityHandling();
+    this.audioAutoUnlock = options.autoUnlockAudio ?? true;
+    this.audioUnlockEvents =
+      options.unlockEvents && options.unlockEvents.length > 0
+        ? options.unlockEvents
+        : ["pointerdown", "click", "touchstart", "keydown"];
+    this.setupAudioAutoUnlock();
+  }
+
+  private initCanvas() {
+    const canvas = document.createElement("canvas");
+    canvas.style.display = "none";
+    const pxW = Math.round(this.size.width * this.size.dpr);
+    const pxH = Math.round(this.size.height * this.size.dpr);
+    const outW = Math.round(this.size.width);
+    const outH = Math.round(this.size.height);
+    canvas.width = outW;
+    canvas.height = outH;
+    const ctx = canvas.getContext("2d", {
+      alpha: false,
+      desynchronized: true,
+    }) as Ctx2D | null;
+    if (!ctx) throw new Error("2D context not available");
+
+    this.captureCanvas = canvas;
+    this.captureCtx = ctx;
+
+    try {
+      const off = new OffscreenCanvas(pxW, pxH);
+      this.offscreen = off;
+      const offCtx = off.getContext("2d", { alpha: false }) as Ctx2D | null;
+      if (!offCtx) throw new Error("2D context not available for Offscreen");
+      offCtx.imageSmoothingEnabled = true;
+      this.offscreenCtx = offCtx;
+    } catch (_) {
+      const off = document.createElement("canvas");
+      off.width = pxW;
+      off.height = pxH;
+      const offCtx = off.getContext("2d", { alpha: false }) as Ctx2D | null;
+      if (!offCtx)
+        throw new Error("2D context not available for Offscreen fallback");
+      offCtx.imageSmoothingEnabled = true;
+      this.offscreen = off;
+      this.offscreenCtx = offCtx;
+    }
+
+    const stream = canvas.captureStream(this.fps);
+    this.outputStream = stream;
+
+    this.ensureSilentAudioTrack();
+
+    try {
+      const vtrack = stream.getVideoTracks()[0];
+      if (vtrack) {
+        try {
+          if (vtrack.contentHint !== undefined) {
+            vtrack.contentHint = "detail";
+          }
+        } catch (_) {}
+        this.applyVideoTrackConstraints();
+      }
+    } catch (_) {}
+
+    const offCtx = this.offscreenCtx!;
+    offCtx.fillStyle = "#111";
+    offCtx.fillRect(0, 0, pxW, pxH);
+    this.captureCtx!.drawImage(
+      this.offscreen as any,
+      0,
+      0,
+      pxW,
+      pxH,
+      0,
+      0,
+      outW,
+      outH,
+    );
+  }
+
+  private recreateStream() {
+    if (!this.captureCanvas) return;
+    const newStream = this.captureCanvas.captureStream(this.fps);
+    const prev = this.outputStream;
+    if (prev && prev !== newStream) {
+      try {
+        prev.getAudioTracks().forEach(t => {
+          try {
+            newStream.addTrack(t);
+          } catch (_) {}
+        });
+      } catch (_) {}
+    }
+    this.outputStream = newStream;
+
+    if (this.outputStream && this.outputStream.getAudioTracks().length === 0) {
+      this.ensureSilentAudioTrack();
+    }
+
+    try {
+      const w = this.captureCanvas.width;
+      const h = this.captureCanvas.height;
+      const vtrack = newStream.getVideoTracks()[0];
+      if (vtrack) {
+        try {
+          if (vtrack.contentHint !== undefined) {
+            vtrack.contentHint = "detail";
+          }
+        } catch (_) {}
+        this.applyVideoTrackConstraints();
+      }
+    } catch (_) {}
+
+    if (prev && prev !== newStream) {
+      try {
+        prev.getVideoTracks().forEach(t => {
+          try {
+            t.stop();
+          } catch (_) {}
+        });
+      } catch (_) {}
+    }
+  }
+
+  get stream(): MediaStream | null {
+    return this.outputStream;
+  }
+
+  get canvasSize(): CanvasSize {
+    return this.size;
+  }
+
+  get currentFps(): number {
+    return this.fps;
+  }
+
+  get currentSendFps(): number {
+    return this.sendFps;
+  }
+
+  setFps(fps: number) {
+    const next = Math.max(1, fps);
+    if (this.fps === next) return;
+    this.fps = next;
+    this.recreateStream();
+  }
+
+  setSendFps(fps: number) {
+    const next = Math.max(1, fps);
+    if (this.sendFps === next) return;
+    this.sendFps = next;
+    try {
+      if (typeof this.onSendFpsChange === "function") {
+        this.onSendFpsChange(this.sendFps);
+      }
+    } catch (_) {}
+    this.applyVideoTrackConstraints();
+  }
+
+  setCanvasSize(w: number, h: number, dpr?: number) {
+    const nextDpr = Math.min(
+      2,
+      dpr ?? (typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1),
+    );
+    if (
+      this.size.width === w &&
+      this.size.height === h &&
+      this.size.dpr === nextDpr
+    )
+      return;
+
+    this.size = { width: w, height: h, dpr: nextDpr };
+
+    const pxW = Math.round(w * nextDpr);
+    const pxH = Math.round(h * nextDpr);
+
+    if (this.captureCanvas) {
+      const outW = Math.round(w);
+      const outH = Math.round(h);
+      this.captureCanvas.width = outW;
+      this.captureCanvas.height = outH;
+    }
+
+    if (this.offscreen instanceof HTMLCanvasElement) {
+      this.offscreen.width = pxW;
+      this.offscreen.height = pxH;
+    } else if (this.offscreen instanceof OffscreenCanvas) {
+      this.offscreen.width = pxW;
+      this.offscreen.height = pxH;
+    }
+
+    this.recreateStream();
+    this.rectCache = new WeakMap();
+  }
+
+  setCrossfade(ms: number) {
+    this.crossfadeMs = Math.max(0, ms);
+  }
+
+  setBackgroundKeepalive(enabled: boolean) {
+    this.keepalive = !!enabled;
+  }
+
+  getSource(): MuxerSource | null {
+    return this.currentSource;
+  }
+
+  setSource(source: MuxerSource) {
+    this.cancelSchedulers();
+    this.cleanupRef?.();
+    this.cleanupRef = undefined;
+    this.pendingSource = source;
+    this.crossfadeStart = null;
+
+    const track = this.outputStream?.getVideoTracks()[0];
+
+    if (source.kind === "custom") {
+      const off = this.offscreenCtx;
+      if (off) {
+        const cleanup = (source as CustomSource).onStart(off);
+        this.cleanupRef = cleanup || undefined;
+      }
+    }
+
+    this.lastFrameAt = 0;
+    this.scheduleForCurrentSource();
+  }
+
+  clearSource() {
+    this.cancelSchedulers();
+    this.cleanupRef?.();
+    this.cleanupRef = undefined;
+    this.currentSource = null;
+    this.pendingSource = null;
+    this.crossfadeStart = null;
+  }
+
+  addAudioTrack(track: MediaStreamTrack) {
+    if (!this.outputStream) return;
+    try {
+      if (this.silentAudioTrack) {
+        try {
+          this.outputStream.removeTrack(this.silentAudioTrack);
+        } catch (_) {}
+      }
+      const exists = this.outputStream
+        .getAudioTracks()
+        .some(t => t.id === track.id);
+      if (!exists) {
+        this.outputStream.addTrack(track);
+      }
+      this.externalAudioTrackIds.add(track.id);
+      try {
+        const onEnded = (_ev: Event) => {
+          try {
+            if (!this.outputStream) return;
+            this.outputStream.getAudioTracks().forEach(t => {
+              if (t.id === track.id) {
+                try {
+                  this.outputStream!.removeTrack(t);
+                } catch (_) {}
+              }
+            });
+            this.externalAudioTrackIds.delete(track.id);
+            this.externalAudioEndHandlers.delete(track.id);
+            if (this.outputStream.getAudioTracks().length === 0) {
+              this.ensureSilentAudioTrack();
+            }
+          } catch (_) {}
+          try {
+            track.removeEventListener("ended", onEnded);
+          } catch (_) {}
+        };
+        track.addEventListener("ended", onEnded);
+        this.externalAudioEndHandlers.set(track.id, onEnded);
+      } catch (_) {}
+    } catch (_) {}
+  }
+
+  removeAudioTrack(trackId: string) {
+    if (!this.outputStream) return;
+    this.outputStream.getAudioTracks().forEach(t => {
+      if (t.id === trackId) this.outputStream!.removeTrack(t);
+    });
+    this.externalAudioTrackIds.delete(trackId);
+    try {
+      const handler = this.externalAudioEndHandlers.get(trackId);
+      const tracks = this.outputStream.getAudioTracks();
+      const tr = tracks.find(t => t.id === trackId);
+      if (tr && handler) {
+        try {
+          tr.removeEventListener("ended", handler);
+        } catch (_) {}
+      }
+    } catch (_) {}
+    this.externalAudioEndHandlers.delete(trackId);
+    if (this.outputStream.getAudioTracks().length === 0) {
+      this.ensureSilentAudioTrack();
+    }
+  }
+
+  destroy() {
+    this.cancelSchedulers();
+    this.cleanupRef?.();
+    this.cleanupRef = undefined;
+    this.cleanupVisibilityHandling();
+    this.cleanupAudioAutoUnlock();
+    try {
+      if (this.audioCtx && (this.audioCtx as any).onstatechange) {
+        (this.audioCtx as any).onstatechange = null;
+      }
+    } catch (_) {}
+    this.audioStateListenerAttached = false;
+    this.onSendFpsChange = undefined;
+    const s = this.outputStream;
+    if (s) {
+      try {
+        s.getVideoTracks().forEach(t => {
+          try {
+            t.stop();
+          } catch (_) {}
+        });
+      } catch (_) {}
+    }
+    this.removeSilentAudioTrack();
+    try {
+      this.externalAudioEndHandlers.forEach((handler, id) => {
+        try {
+          const tr = s?.getAudioTracks().find(t => t.id === id);
+          if (tr) tr.removeEventListener("ended", handler);
+        } catch (_) {}
+      });
+    } catch (_) {}
+    this.externalAudioEndHandlers.clear();
+    this.outputStream = null;
+    this.captureCanvas = null;
+    this.captureCtx = null;
+    this.offscreen = null;
+    this.offscreenCtx = null;
+  }
+
+  async unlockAudio(): Promise<boolean> {
+    try {
+      if (typeof window === "undefined") return false;
+      if (!this.audioCtx || this.audioCtx.state === "closed") {
+        this.audioCtx = new (window.AudioContext ||
+          (window as any).webkitAudioContext)({ sampleRate: 48000 });
+      }
+      const ac = this.audioCtx;
+      if (!ac) return false;
+      try {
+        await ac.resume();
+      } catch (_) {}
+      this.attachAudioCtxStateListener();
+      if (ac.state === "running") {
+        this.rebuildSilentAudioTrack();
+        this.cleanupAudioAutoUnlock();
+        return true;
+      }
+      return false;
+    } catch (_) {
+      return false;
+    }
+  }
+
+  private scheduleForCurrentSource() {
+    const videoEl = this.chooseVideoElement();
+    if (videoEl && typeof videoEl.requestVideoFrameCallback === "function") {
+      this.videoFrameSource = videoEl;
+      const cb = () => {
+        this.renderFrame();
+        if (this.videoFrameSource === videoEl) {
+          try {
+            this.videoFrameRequestId = videoEl.requestVideoFrameCallback(cb);
+          } catch (_) {}
+        }
+      };
+      try {
+        this.videoFrameRequestId = videoEl.requestVideoFrameCallback(cb);
+      } catch (_) {}
+      this.scheduleWithRaf(true);
+      return;
+    }
+    this.scheduleWithRaf(false);
+  }
+
+  private ensureSilentAudioTrack() {
+    if (this.disableSilentAudio) return;
+    try {
+      if (!this.outputStream) return;
+      const alreadyHasAudio = this.outputStream.getAudioTracks().length > 0;
+      if (alreadyHasAudio) return;
+      if (
+        this.silentAudioTrack &&
+        this.silentAudioTrack.readyState === "live"
+      ) {
+        try {
+          this.outputStream.addTrack(this.silentAudioTrack);
+        } catch (_) {}
+        return;
+      }
+      if (!this.audioCtx) {
+        this.audioCtx = new (window.AudioContext ||
+          (window as any).webkitAudioContext)({ sampleRate: 48000 });
+        try {
+          this.audioCtx.resume().catch(() => {});
+        } catch (_) {}
+        this.attachAudioCtxStateListener();
+      }
+      const ac = this.audioCtx;
+      if (!ac) return;
+      this.silentOsc = ac.createOscillator();
+      this.silentGain = ac.createGain();
+      this.audioDst = ac.createMediaStreamDestination();
+      this.silentGain.gain.setValueAtTime(0.0001, ac.currentTime);
+      this.silentOsc.frequency.setValueAtTime(440, ac.currentTime);
+      this.silentOsc.type = "sine";
+      this.silentOsc.connect(this.silentGain);
+      this.silentGain.connect(this.audioDst);
+      this.silentOsc.start();
+      const track = this.audioDst.stream.getAudioTracks()[0];
+      if (track) {
+        this.silentAudioTrack = track;
+        try {
+          this.outputStream.addTrack(track);
+        } catch (_) {}
+      }
+    } catch (_) {}
+  }
+
+  private removeSilentAudioTrack() {
+    try {
+      if (this.outputStream && this.silentAudioTrack) {
+        try {
+          this.outputStream.removeTrack(this.silentAudioTrack);
+        } catch (_) {}
+      }
+      try {
+        if (this.silentOsc) this.silentOsc.stop();
+      } catch (_) {}
+      try {
+        if (this.silentOsc) this.silentOsc.disconnect();
+      } catch (_) {}
+      try {
+        if (this.silentGain) this.silentGain.disconnect();
+      } catch (_) {}
+      this.silentOsc = null;
+      this.silentGain = null;
+      this.audioDst = null;
+      this.silentAudioTrack = null;
+      if (this.audioCtx) {
+        try {
+          this.audioCtx.close();
+        } catch (_) {}
+      }
+      this.audioCtx = null;
+    } catch (_) {}
+  }
+
+  private scheduleWithRaf(isFallback: boolean) {
+    if (isFallback) {
+      if (this.rafFallbackActive) return;
+      this.rafFallbackActive = true;
+    }
+    const loop = () => {
+      this.renderFrame();
+      this.rafId = requestAnimationFrame(loop);
+    };
+    this.rafId = requestAnimationFrame(loop);
+  }
+
+  private cancelSchedulers() {
+    if (this.rafId != null) {
+      cancelAnimationFrame(this.rafId);
+      this.rafId = null;
+    }
+    this.rafFallbackActive = false;
+    if (this.videoFrameRequestId && this.videoFrameSource) {
+      try {
+        if (
+          typeof this.videoFrameSource.cancelVideoFrameCallback === "function"
+        ) {
+          this.videoFrameSource.cancelVideoFrameCallback(
+            this.videoFrameRequestId,
+          );
+        }
+      } catch (_) {}
+    }
+    this.videoFrameRequestId = null;
+    this.videoFrameSource = null;
+  }
+
+  private chooseVideoElement(): HTMLVideoElement | null {
+    const pending = this.pendingSource;
+    if (pending && pending.kind === "video" && this.isSourceReady(pending))
+      return pending.element as HTMLVideoElement;
+    const current = this.currentSource;
+    if (current && current.kind === "video" && this.isSourceReady(current))
+      return current.element as HTMLVideoElement;
+    return null;
+  }
+
+  private isSourceReady(source: MuxerSource): boolean {
+    if (source.kind === "video") {
+      const v = source.element as HTMLVideoElement;
+      return (
+        typeof v.readyState === "number" &&
+        v.readyState >= 2 &&
+        (v.videoWidth || 0) > 0 &&
+        (v.videoHeight || 0) > 0
+      );
+    }
+    if (source.kind === "canvas") {
+      const c = source.element as HTMLCanvasElement;
+      return (c.width || 0) > 0 && (c.height || 0) > 0;
+    }
+    return true;
+  }
+
+  private renderFrame() {
+    const off = this.offscreenCtx;
+    const cap = this.captureCtx;
+    const capCanvas = this.captureCanvas;
+    if (!off || !cap || !capCanvas) return;
+
+    const now =
+      typeof performance !== "undefined" ? performance.now() : Date.now();
+
+    if (this.pendingSource && this.isSourceReady(this.pendingSource)) {
+      if (this.crossfadeStart === null) this.crossfadeStart = now;
+    }
+
+    const minIntervalMs = 1000 / Math.max(1, this.sendFps);
+    if (this.lastFrameAt !== 0 && now - this.lastFrameAt < minIntervalMs)
+      return;
+
+    off.globalCompositeOperation = "source-over";
+    const willDraw = !!(
+      (this.pendingSource && this.isSourceReady(this.pendingSource)) ||
+      this.currentSource
+    );
+    if (willDraw) {
+      off.fillStyle = "#000";
+      off.fillRect(0, 0, off.canvas.width, off.canvas.height);
+    }
+
+    const fading =
+      this.pendingSource && this.crossfadeStart !== null && this.currentSource;
+    if (fading) {
+      const t = Math.min(
+        1,
+        (now - (this.crossfadeStart as number)) / this.crossfadeMs,
+      );
+      this.blitSource(this.currentSource as MuxerSource, 1 - t);
+      this.blitSource(this.pendingSource as MuxerSource, t);
+      if (t >= 1) {
+        this.currentSource = this.pendingSource;
+        this.pendingSource = null;
+        this.crossfadeStart = null;
+      }
+    } else if (this.pendingSource && !this.currentSource) {
+      if (this.isSourceReady(this.pendingSource)) {
+        this.blitSource(this.pendingSource, 1);
+        this.currentSource = this.pendingSource;
+        this.pendingSource = null;
+        this.crossfadeStart = null;
+      }
+    } else if (this.currentSource) {
+      this.blitSource(this.currentSource, 1);
+    }
+
+    if (this.keepalive) {
+      const w = off.canvas.width,
+        h = off.canvas.height;
+      const prevAlpha = off.globalAlpha;
+      const prevFill = off.fillStyle;
+      try {
+        off.globalAlpha = 0.08;
+        off.fillStyle = this.frameIndex % 2 ? "#101010" : "#0e0e0e";
+        off.fillRect(w - 16, h - 16, 16, 16);
+      } catch (_) {
+      } finally {
+        off.globalAlpha = prevAlpha;
+        off.fillStyle = prevFill;
+      }
+    }
+
+    this.frameIndex++;
+
+    cap.drawImage(
+      off.canvas,
+      0,
+      0,
+      off.canvas.width,
+      off.canvas.height,
+      0,
+      0,
+      capCanvas.width,
+      capCanvas.height,
+    );
+
+    const track = this.outputStream?.getVideoTracks()[0];
+    if (track && typeof (track as any).requestFrame === "function") {
+      try {
+        (track as any).requestFrame();
+      } catch (_) {}
+    }
+    this.lastFrameAt = now;
+  }
+
+  private applyVideoTrackConstraints() {
+    try {
+      const track = this.outputStream?.getVideoTracks()[0];
+      const canvas = this.captureCanvas;
+      if (!track || !canvas) return;
+      const constraints: MediaTrackConstraints = {
+        width: canvas.width,
+        height: canvas.height,
+        frameRate: Math.max(1, this.sendFps || this.fps),
+      };
+      try {
+        (track as any).contentHint !== undefined &&
+          ((track as any).contentHint = "detail");
+      } catch (_) {}
+      track.applyConstraints(constraints).catch(() => {});
+    } catch (_) {}
+  }
+
+  private requestVideoTrackFrameOnce() {
+    const track = this.outputStream?.getVideoTracks()[0];
+    if (track && typeof (track as any).requestFrame === "function") {
+      try {
+        (track as any).requestFrame();
+      } catch (_) {}
+    }
+  }
+
+  private setupVisibilityHandling() {
+    if (typeof document === "undefined") return;
+    this.visibilityListener = () => {
+      this.onVisibilityChange();
+    };
+    document.addEventListener("visibilitychange", this.visibilityListener);
+    this.onVisibilityChange();
+  }
+
+  private cleanupVisibilityHandling() {
+    if (typeof document !== "undefined" && this.visibilityListener) {
+      try {
+        document.removeEventListener(
+          "visibilitychange",
+          this.visibilityListener,
+        );
+      } catch (_) {}
+      this.visibilityListener = null;
+    }
+    if (this.backgroundIntervalId != null) {
+      clearInterval(this.backgroundIntervalId);
+      this.backgroundIntervalId = null;
+    }
+    this.lastVisibleSendFps = null;
+  }
+
+  private setupAudioAutoUnlock() {
+    if (!this.audioAutoUnlock) return;
+    if (typeof document === "undefined") return;
+    if (this.audioUnlockAttached) return;
+    const handler = (_ev: Event) => {
+      this.unlockAudio();
+    };
+    this.audioUnlockHandler = handler;
+    this.audioUnlockEvents.forEach(evt => {
+      try {
+        document.addEventListener(
+          evt as any,
+          handler as any,
+          { capture: true } as any,
+        );
+      } catch (_) {}
+    });
+    this.audioUnlockAttached = true;
+  }
+
+  private cleanupAudioAutoUnlock() {
+    if (!this.audioUnlockAttached) return;
+    if (typeof document !== "undefined" && this.audioUnlockHandler) {
+      this.audioUnlockEvents.forEach(evt => {
+        try {
+          document.removeEventListener(
+            evt as any,
+            this.audioUnlockHandler as any,
+            { capture: true } as any,
+          );
+        } catch (_) {}
+      });
+    }
+    this.audioUnlockAttached = false;
+    this.audioUnlockHandler = null;
+  }
+
+  private attachAudioCtxStateListener() {
+    try {
+      const ac = this.audioCtx;
+      if (!ac || this.audioStateListenerAttached) return;
+      const onStateChange = () => {
+        try {
+          if (this.audioCtx && this.audioCtx.state === "running") {
+            this.rebuildSilentAudioTrack();
+            this.cleanupAudioAutoUnlock();
+          }
+        } catch (_) {}
+      };
+      try {
+        (ac as any).onstatechange = onStateChange as any;
+        this.audioStateListenerAttached = true;
+      } catch (_) {}
+    } catch (_) {}
+  }
+
+  private onVisibilityChange() {
+    if (typeof document === "undefined") return;
+    const hidden = document.visibilityState === "hidden";
+    if (hidden) {
+      if (this.lastVisibleSendFps == null)
+        this.lastVisibleSendFps = this.sendFps;
+      if (this.sendFps !== 5) this.setSendFps(5);
+      if (this.backgroundIntervalId == null) {
+        this.backgroundIntervalId = setInterval(() => {
+          this.renderFrame();
+          this.requestVideoTrackFrameOnce();
+        }, 1000) as unknown as number;
+      }
+    } else {
+      if (this.backgroundIntervalId != null) {
+        clearInterval(this.backgroundIntervalId);
+        this.backgroundIntervalId = null;
+      }
+      if (
+        this.lastVisibleSendFps != null &&
+        this.sendFps !== this.lastVisibleSendFps
+      ) {
+        this.setSendFps(this.lastVisibleSendFps);
+      }
+      this.lastVisibleSendFps = null;
+    }
+  }
+
+  private blitSource(source: MuxerSource, alpha: number) {
+    if (!this.offscreenCtx) return;
+    const ctx = this.offscreenCtx;
+    if (source.kind === "custom") {
+      if (source.onFrame) source.onFrame(ctx, this.lastFrameAt);
+      return;
+    }
+    const el = source.element as HTMLCanvasElement | HTMLVideoElement;
+    const rect = this.getDrawRect(el, (source.fit as FitMode) ?? "contain");
+    if (!rect) return;
+    const prev = ctx.globalAlpha;
+    try {
+      ctx.globalAlpha = Math.max(0, Math.min(1, alpha));
+      ctx.drawImage(el as any, rect.dx, rect.dy, rect.dw, rect.dh);
+    } catch (_) {
+    } finally {
+      ctx.globalAlpha = prev;
+    }
+  }
+
+  private getDrawRect(
+    el: HTMLCanvasElement | HTMLVideoElement,
+    fit: FitMode,
+  ): { dx: number; dy: number; dw: number; dh: number } | null {
+    const canvas = this.offscreenCtx?.canvas;
+    if (!canvas) return null;
+    const canvasW = canvas.width;
+    const canvasH = canvas.height;
+    const sourceW = (el as any).videoWidth ?? el.width;
+    const sourceH = (el as any).videoHeight ?? el.height;
+    if (!sourceW || !sourceH) return null;
+    const cached = this.rectCache.get(el);
+    if (
+      cached &&
+      cached.canvasW === canvasW &&
+      cached.canvasH === canvasH &&
+      cached.sourceW === sourceW &&
+      cached.sourceH === sourceH &&
+      cached.fit === fit
+    ) {
+      const { dx, dy, dw, dh } = cached;
+      return { dx, dy, dw, dh };
+    }
+    const scale =
+      fit === "cover"
+        ? Math.max(canvasW / sourceW, canvasH / sourceH)
+        : Math.min(canvasW / sourceW, canvasH / sourceH);
+    const dw = Math.floor(sourceW * scale);
+    const dh = Math.floor(sourceH * scale);
+    const dx = Math.floor((canvasW - dw) / 2);
+    const dy = Math.floor((canvasH - dh) / 2);
+    const computed = {
+      canvasW,
+      canvasH,
+      sourceW,
+      sourceH,
+      dx,
+      dy,
+      dw,
+      dh,
+      fit,
+    };
+    this.rectCache.set(el, computed);
+    return { dx, dy, dw, dh };
+  }
+
+  private rebuildSilentAudioTrack() {
+    if (this.disableSilentAudio) return;
+    try {
+      if (!this.outputStream) return;
+      if (this.externalAudioTrackIds.size > 0) return;
+      if (this.silentAudioTrack) {
+        try {
+          this.outputStream.removeTrack(this.silentAudioTrack);
+        } catch (_) {}
+      }
+      try {
+        if (this.silentOsc) this.silentOsc.stop();
+      } catch (_) {}
+      try {
+        if (this.silentOsc) this.silentOsc.disconnect();
+      } catch (_) {}
+      try {
+        if (this.silentGain) this.silentGain.disconnect();
+      } catch (_) {}
+      this.silentOsc = null;
+      this.silentGain = null;
+      this.audioDst = null;
+      this.silentAudioTrack = null;
+      const ac = this.audioCtx;
+      if (!ac || ac.state !== "running") return;
+      this.attachAudioCtxStateListener();
+      this.silentOsc = ac.createOscillator();
+      this.silentGain = ac.createGain();
+      this.audioDst = ac.createMediaStreamDestination();
+      this.silentGain.gain.setValueAtTime(0.0001, ac.currentTime);
+      this.silentOsc.frequency.setValueAtTime(440, ac.currentTime);
+      this.silentOsc.type = "sine";
+      this.silentOsc.connect(this.silentGain);
+      this.silentGain.connect(this.audioDst);
+      this.silentOsc.start();
+      const track = this.audioDst.stream.getAudioTracks()[0];
+      if (track) {
+        this.silentAudioTrack = track;
+        try {
+          this.outputStream.addTrack(track);
+        } catch (_) {}
+      }
+    } catch (_) {}
+  }
+}
diff --git a/frontend/src/muxer/index.tsx b/frontend/src/muxer/index.tsx
new file mode 100644
index 000000000..2e6a56433
--- /dev/null
+++ b/frontend/src/muxer/index.tsx
@@ -0,0 +1,128 @@
+"use client";
+
+import {
+  createContext,
+  PropsWithChildren,
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { Muxer } from "./core";
+import type { MuxerApi, MuxerSource } from "./types";
+
+const MuxerCtx = createContext<MuxerApi | null>(null);
+
+export function useMuxer(): MuxerApi {
+  const ctx = useContext(MuxerCtx);
+  if (!ctx) throw new Error("useMuxer must be used within <MuxerProvider>");
+  return ctx;
+}
+
+export const MuxerProvider = ({
+  children,
+  width = 512,
+  height = 512,
+  fps: initialFps = 30,
+  crossfadeMs = 500,
+  sendFps = initialFps,
+  dpr,
+}: PropsWithChildren<{
+  width?: number;
+  height?: number;
+  fps?: number;
+  crossfadeMs?: number;
+  sendFps?: number;
+  dpr?: number;
+}>) => {
+  const engineRef = useRef<Muxer | null>(null);
+  const pendingSourceRef = useRef<MuxerSource | null>(null);
+  const [stream, setStream] = useState<MediaStream | null>(null);
+  const [size, setSize] = useState({
+    width,
+    height,
+    dpr: Math.min(
+      2,
+      typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1,
+    ),
+  });
+  const [fps, setFps] = useState(initialFps);
+  const [currentSendFps, setCurrentSendFps] = useState(sendFps);
+
+  useLayoutEffect(() => {
+    const engine = new Muxer({
+      width,
+      height,
+      fps: initialFps,
+      crossfadeMs,
+      sendFps,
+      dpr,
+      onSendFpsChange: (nfps: number) => setCurrentSendFps(nfps),
+      disableSilentAudio: true,
+    });
+    engineRef.current = engine;
+    setStream(engine.stream);
+    setSize(engine.canvasSize);
+    if (pendingSourceRef.current) {
+      try {
+        engine.setSource(pendingSourceRef.current);
+      } finally {
+        pendingSourceRef.current = null;
+      }
+    }
+    return () => {
+      engine.destroy();
+      engineRef.current = null;
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!engineRef.current) return;
+    engineRef.current.setCanvasSize(size.width, size.height, size.dpr);
+    setStream(engineRef.current.stream);
+  }, [size.width, size.height, size.dpr]);
+
+  useEffect(() => {
+    if (!engineRef.current) return;
+    engineRef.current.setFps(fps);
+    setStream(engineRef.current.stream);
+  }, [fps]);
+
+  useEffect(() => {
+    if (!engineRef.current) return;
+    engineRef.current.setSendFps(currentSendFps);
+  }, [currentSendFps]);
+
+  const api = useMemo<MuxerApi>(
+    () => ({
+      getSource: () => engineRef.current?.getSource() ?? null,
+      setSource: (source: MuxerSource) => {
+        const eng = engineRef.current;
+        if (eng) eng.setSource(source);
+        else pendingSourceRef.current = source;
+      },
+      clearSource: () => engineRef.current?.clearSource(),
+      stream,
+      canvasSize: size,
+      setCanvasSize: (w: number, h: number, dpr?: number) =>
+        setSize({ width: w, height: h, dpr: dpr ?? size.dpr }),
+      fps,
+      setFps,
+      addAudioTrack: (track: MediaStreamTrack) =>
+        engineRef.current?.addAudioTrack(track),
+      removeAudioTrack: (trackId: string) =>
+        engineRef.current?.removeAudioTrack(trackId),
+      sendFps: currentSendFps,
+      setSendFps: (nfps: number) => setCurrentSendFps(nfps),
+      unlockAudio: () =>
+        engineRef.current?.unlockAudio() ?? Promise.resolve(false),
+    }),
+    [stream, size, fps, currentSendFps],
+  );
+
+  return <MuxerCtx.Provider value={api}>{children}</MuxerCtx.Provider>;
+};
+
+export type { FitMode, MuxerApi, MuxerSource } from "./types";
diff --git a/frontend/src/muxer/types.ts b/frontend/src/muxer/types.ts
new file mode 100644
index 000000000..3261a0725
--- /dev/null
+++ b/frontend/src/muxer/types.ts
@@ -0,0 +1,52 @@
+export type Ctx2D = CanvasRenderingContext2D;
+
+export type FitMode = "contain" | "cover";
+
+export type ElementSource =
+  | {
+      kind: "video";
+      element: HTMLVideoElement;
+      fit?: FitMode;
+      contentHint?: "detail" | "motion" | "";
+    }
+  | {
+      kind: "canvas";
+      element: HTMLCanvasElement;
+      fit?: FitMode;
+      contentHint?: "detail" | "motion" | "";
+    };
+
+export type StartFn = (ctx: Ctx2D) => void | (() => void);
+export type FrameFn = (ctx: Ctx2D, t: number) => void;
+
+export type CustomSource = {
+  kind: "custom";
+  onStart: StartFn;
+  onFrame?: FrameFn;
+};
+
+export type MuxerSource = ElementSource | CustomSource;
+
+export type MuxerSourceSpec = {
+  id: string;
+  onStart: StartFn;
+  onFrame?: FrameFn;
+};
+
+export type CanvasSize = { width: number; height: number; dpr: number };
+
+export type MuxerApi = {
+  getSource: () => MuxerSource | null;
+  setSource: (source: MuxerSource) => void;
+  clearSource: () => void;
+  stream: MediaStream | null;
+  canvasSize: CanvasSize;
+  setCanvasSize: (w: number, h: number, dpr?: number) => void;
+  fps: number;
+  setFps: (fps: number) => void;
+  addAudioTrack: (track: MediaStreamTrack) => void;
+  removeAudioTrack: (trackId: string) => void;
+  sendFps: number;
+  setSendFps: (fps: number) => void;
+  unlockAudio: () => Promise<boolean>;
+};
diff --git a/frontend/src/pages/StreamPage.tsx b/frontend/src/pages/StreamPage.tsx
index 2c966a612..b2451afff 100644
--- a/frontend/src/pages/StreamPage.tsx
+++ b/frontend/src/pages/StreamPage.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef } from "react";
+import { useState, useEffect, useRef, useCallback } from "react";
 import { Header } from "../components/Header";
 import { InputAndControlsPanel } from "../components/InputAndControlsPanel";
 import { VideoOutput } from "../components/VideoOutput";
@@ -18,11 +18,14 @@ import type { PipelineId } from "../types";
 import type { PromptItem, PromptTransition } from "../lib/api";
 import { checkModelStatus, downloadPipelineModels } from "../lib/api";
 import { createCloudStream } from "../lib/daydream";
-import { startWhip } from "../lib/whip";
+import { WhipConnection } from "../components/WhipConnection";
+import { useMuxer } from "@/muxer";
 
 export function StreamPage() {
   // Use the stream state hook for settings management
   const { settings, updateSettings } = useStreamState();
+  const muxer = useMuxer();
+
 
   // Prompt state
   const [promptItems, setPromptItems] = useState<PromptItem[]>([
@@ -48,8 +51,31 @@ export function StreamPage() {
   const [isConnectingCloud, setIsConnectingCloud] = useState(false);
   const [isStreamingCloud, setIsStreamingCloud] = useState(false);
   const [cloudRemoteStream, setCloudRemoteStream] = useState<MediaStream | null>(null);
-  const cloudStopRef = useRef<null | (() => Promise<void>)>(null);
+  const [cloudWhipUrl, setCloudWhipUrl] = useState<string | null>(null);
   const cloudStreamIdRef = useRef<string | null>(null);
+  const isStartingCloudRef = useRef(false);
+
+  // Stable callbacks for WHIP to avoid effect churn in WhipConnection
+  const onWhipConnectionStateChange = useCallback((state: RTCPeerConnectionState) => {
+    if (state === "connected") {
+      console.log("[StreamPage] WHIP connected");
+      setIsStreamingCloud(true);
+      setIsConnectingCloud(false);
+    } else if (state === "connecting" || state === "new") {
+      console.log("[StreamPage] WHIP connecting");
+      setIsConnectingCloud(true);
+    } else if (state === "failed" || state === "disconnected" || state === "closed") {
+      setIsStreamingCloud(false);
+      setIsConnectingCloud(false);
+      console.log("[StreamPage] WHIP disconnected");
+    }
+  }, [setIsStreamingCloud, setIsConnectingCloud]);
+
+  const onWhipRetryLimitExceeded = useCallback(() => {
+    setIsStreamingCloud(false);
+    setIsConnectingCloud(false);
+    setCloudWhipUrl(null);
+  }, [setIsStreamingCloud, setIsConnectingCloud, setCloudWhipUrl]);
 
   // Timeline state for left panel
   const [timelinePrompts, setTimelinePrompts] = useState<TimelinePrompt[]>([]);
@@ -438,17 +464,14 @@ export function StreamPage() {
       }
     } else {
       if (isStreamingCloud) {
-        if (cloudStopRef.current) {
-          await cloudStopRef.current();
-          cloudStopRef.current = null;
-        }
+        setCloudWhipUrl(null);
         setCloudRemoteStream(null);
         setIsStreamingCloud(false);
         setIsConnectingCloud(false);
         return true;
       }
       // Ignore new start requests while a cloud connection is being established
-      if (isConnectingCloud) {
+      if (isConnectingCloud || isStartingCloudRef.current) {
         return false;
       }
     }
@@ -493,6 +516,7 @@ export function StreamPage() {
 
         setIsCloudLoading(true);
         setIsConnectingCloud(true);
+        isStartingCloudRef.current = true;
         const created = await createCloudStream({
           pipeline_id: 'pip_SDXL-turbo',
           load_params: loadParams || undefined,
@@ -502,7 +526,6 @@ export function StreamPage() {
 
         const needsVideoInput =
           PIPELINES[pipelineIdToUse]?.category === "video-input";
-        const streamToSend = needsVideoInput ? localStream || undefined : undefined;
         if (needsVideoInput && !localStream) {
           console.error("Video input required but no local stream available");
           setIsConnectingCloud(false);
@@ -510,22 +533,18 @@ export function StreamPage() {
         }
 
         const endpoint = created.whip_url;
+        // const endpoint = "https://ai.livepeer.monster/aiWebrtc/foo3-out/whip";
         if (!endpoint) {
           console.error("Create stream response missing whip_url");
           setIsConnectingCloud(false);
           return false;
         }
 
-        const { remoteStream: cloudStream, stop } = await startWhip({
-          endpoint,
-          localStream: streamToSend,
-        });
-        cloudStopRef.current = stop;
-        setCloudRemoteStream(cloudStream);
+        // Mount WHIP connection component via state; it will manage the connection lifecycle
+        setCloudWhipUrl(endpoint);
 
         updateSettings({ paused: false });
-        setIsConnectingCloud(false);
-        setIsStreamingCloud(true);
+        // Keep connecting state true until RTCPeerConnection reports connected
         return true;
       }
 
@@ -613,7 +632,6 @@ export function StreamPage() {
       const streamToSend = needsVideoInput
         ? localStream || undefined
         : undefined;
-
       if (needsVideoInput && !localStream) {
         console.error("Video input required but no local stream available");
         return false;
@@ -670,6 +688,9 @@ export function StreamPage() {
       console.error("Error during stream start:", error);
       return false;
     }
+    finally {
+      isStartingCloudRef.current = false;
+    }
   };
 
   return (
@@ -859,6 +880,9 @@ export function StreamPage() {
               onTimelineCurrentTimeChange={handleTimelineCurrentTimeChange}
               onTimelinePlayingChange={handleTimelinePlayingChange}
               isDownloading={isDownloading}
+              isStreamingCloud={isStreamingCloud}
+              isConnectingCloud={isConnectingCloud}
+              isStartingCloud={isStartingCloudRef.current}
             />
           </div>
         </div>
@@ -878,13 +902,12 @@ export function StreamPage() {
                 if (isStreaming) {
                   stopStream();
                 }
-                if (isStreamingCloud && cloudStopRef.current) {
-                  await cloudStopRef.current();
-                  cloudStopRef.current = null;
-                  setCloudRemoteStream(null);
-                  setIsStreamingCloud(false);
-                  setIsConnectingCloud(false);
-                }
+              if (isStreamingCloud) {
+                setCloudWhipUrl(null);
+                setCloudRemoteStream(null);
+                setIsStreamingCloud(false);
+                setIsConnectingCloud(false);
+              }
               })();
               updateSettings({ cloudMode: enabled });
             }}
@@ -927,6 +950,15 @@ export function StreamPage() {
           onDownload={handleDownloadModels}
         />
       )}
+      {/* WHIP Connection Mount Point (cloud mode) */}
+      {settings.cloudMode && cloudWhipUrl ? (
+        <WhipConnection
+          whipUrl={cloudWhipUrl}
+          stream={localStream ?? muxer.stream ?? null}
+          onConnectionStateChange={onWhipConnectionStateChange}
+          onRetryLimitExceeded={onWhipRetryLimitExceeded}
+        />
+      ) : null}
     </div>
   );
 }

From ad6e994d6ce13d64e2d608b46a06889cce7bbbf6 Mon Sep 17 00:00:00 2001
From: Max Holland <max@livepeer.org>
Date: Thu, 13 Nov 2025 15:16:14 +0000
Subject: [PATCH 03/11] Playback working

---
 frontend/src/components/VideoOutput.tsx |  42 ++++-
 frontend/src/lib/WhepClient.ts          | 239 ++++++++++++++++++++++++
 frontend/src/lib/daydream.ts            |   1 +
 frontend/src/pages/StreamPage.tsx       |   9 +-
 4 files changed, 284 insertions(+), 7 deletions(-)
 create mode 100644 frontend/src/lib/WhepClient.ts

diff --git a/frontend/src/components/VideoOutput.tsx b/frontend/src/components/VideoOutput.tsx
index 4ed6bb610..8a4f1a2b1 100644
--- a/frontend/src/components/VideoOutput.tsx
+++ b/frontend/src/components/VideoOutput.tsx
@@ -1,7 +1,9 @@
-import { useEffect, useRef, useState, useCallback } from "react";
+import { useEffect, useRef, useState, useCallback, type RefObject } from "react";
 import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
 import { Spinner } from "./ui/spinner";
 import { PlayOverlay } from "./ui/play-overlay";
+import { usePlaybackUrl } from "@/hooks/usePlaybackUrl";
+import { WhepClient } from "@/lib/WhepClient";
 
 interface VideoOutputProps {
   className?: string;
@@ -16,6 +18,7 @@ interface VideoOutputProps {
   onVideoPlaying?: () => void;
 }
 
+
 export function VideoOutput({
   className = "",
   remoteStream,
@@ -28,7 +31,9 @@ export function VideoOutput({
   onStartStream,
   onVideoPlaying,
 }: VideoOutputProps) {
+  const { playbackUrl } = usePlaybackUrl();
   const videoRef = useRef<HTMLVideoElement>(null);
+
   const [showOverlay, setShowOverlay] = useState(false);
   const [isFadingOut, setIsFadingOut] = useState(false);
   const overlayTimeoutRef = useRef<number | null>(null);
@@ -126,13 +131,15 @@ export function VideoOutput({
     };
   }, []);
 
+  useWhepConnection(playbackUrl, videoRef);
+
   return (
     <Card className={`h-full flex flex-col ${className}`}>
       <CardHeader className="flex-shrink-0">
         <CardTitle className="text-base font-medium">Video Output</CardTitle>
       </CardHeader>
       <CardContent className="flex-1 flex items-center justify-center min-h-0 p-4">
-        {remoteStream ? (
+        {remoteStream || playbackUrl ? (
           <div
             className="relative w-full h-full cursor-pointer flex items-center justify-center"
             onClick={handleVideoClick}
@@ -189,3 +196,34 @@ export function VideoOutput({
     </Card>
   );
 }
+
+export const useWhepConnection = (
+  playbackUrl: string | null | undefined,
+  videoRef: RefObject<HTMLVideoElement | null>,
+  depsKey?: number,
+) => {
+  const clientRef = useRef<WhepClient | null>(null);
+
+  useEffect(() => {
+    if (!playbackUrl) {
+      if (clientRef.current) {
+        void clientRef.current.stop();
+        clientRef.current = null;
+      }
+      return;
+    }
+
+    const client = new WhepClient(playbackUrl, () => videoRef.current);
+    clientRef.current = client;
+    client.start();
+
+    return () => {
+      if (clientRef.current) {
+        void clientRef.current.stop();
+        clientRef.current = null;
+      }
+    };
+  }, [playbackUrl, videoRef, depsKey]);
+
+  return null;
+};
diff --git a/frontend/src/lib/WhepClient.ts b/frontend/src/lib/WhepClient.ts
new file mode 100644
index 000000000..a0beb57de
--- /dev/null
+++ b/frontend/src/lib/WhepClient.ts
@@ -0,0 +1,239 @@
+export type GetVideoElement = () => HTMLVideoElement | null;
+
+export class WhepClient {
+  private playbackUrl: string;
+  private getVideoElement: GetVideoElement;
+  private pc: RTCPeerConnection | null = null;
+  private remoteStream: MediaStream | null = null;
+  private reconnectTimeout: ReturnType<typeof setTimeout> | null = null;
+  private retryCount = 0;
+  private abortController: AbortController | null = null;
+  private stopped = false;
+  private disconnectedGraceTimeout: ReturnType<typeof setTimeout> | null = null;
+
+  constructor(playbackUrl: string, getVideoElement: GetVideoElement) {
+    this.playbackUrl = playbackUrl;
+    this.getVideoElement = getVideoElement;
+  }
+
+  start(): void {
+    this.stopped = false;
+    if (this.reconnectTimeout) {
+      clearTimeout(this.reconnectTimeout);
+      this.reconnectTimeout = null;
+    }
+    void this.connect();
+  }
+
+  async connect(): Promise<void> {
+    if (!this.playbackUrl || this.stopped) return;
+    await this.cleanupPeerConnection();
+
+    const iceServers: RTCIceServer[] = [
+      { urls: "stun:stun.l.google.com:19302" },
+      { urls: "stun:stun1.l.google.com:19302" },
+      { urls: "stun:stun.cloudflare.com:3478" },
+    ];
+
+    const pc = new RTCPeerConnection({ iceServers });
+    this.pc = pc;
+
+    const remoteStream = new MediaStream();
+    this.remoteStream = remoteStream;
+    const videoEl = this.getVideoElement();
+    if (videoEl) {
+      videoEl.srcObject = remoteStream;
+    }
+
+    pc.addEventListener("track", event => {
+      const [stream] = event.streams;
+      if (stream) {
+        this.remoteStream = stream;
+        const el = this.getVideoElement();
+        if (el) {
+          el.srcObject = stream;
+          void el.play().catch(() => {});
+        }
+      } else if (this.remoteStream) {
+        this.remoteStream.addTrack(event.track);
+      }
+    });
+
+    pc.addEventListener("iceconnectionstatechange", () => {
+      if (this.pc !== pc) return;
+      const state = pc.iceConnectionState;
+      if (state === "connected" || state === "completed") {
+        if (this.disconnectedGraceTimeout) {
+          clearTimeout(this.disconnectedGraceTimeout);
+          this.disconnectedGraceTimeout = null;
+        }
+        return;
+      }
+      if (state === "disconnected") {
+        if (this.disconnectedGraceTimeout) {
+          clearTimeout(this.disconnectedGraceTimeout);
+          this.disconnectedGraceTimeout = null;
+        }
+        try {
+          pc.restartIce();
+        } catch {}
+        this.disconnectedGraceTimeout = setTimeout(() => {
+          if (this.stopped || this.pc !== pc) return;
+          const current = pc.iceConnectionState;
+          if (current === "disconnected") {
+            this.scheduleReconnect();
+          }
+        }, 2000);
+        return;
+      }
+      if (state === "failed" || state === "closed") {
+        if (this.disconnectedGraceTimeout) {
+          clearTimeout(this.disconnectedGraceTimeout);
+          this.disconnectedGraceTimeout = null;
+        }
+        this.scheduleReconnect();
+      }
+    });
+
+    try {
+      pc.addTransceiver("video", { direction: "recvonly" });
+      pc.addTransceiver("audio", { direction: "recvonly" });
+
+      const offer = await pc.createOffer();
+      await pc.setLocalDescription(offer);
+
+      const localDesc = await this.waitForIceGatheringComplete(pc, 2000);
+      if (!localDesc.sdp) throw new Error("No local SDP generated");
+
+      const controller = new AbortController();
+      this.abortController = controller;
+
+      const response = await fetch(this.playbackUrl, {
+        method: "POST",
+        headers: { "Content-Type": "application/sdp" },
+        body: localDesc.sdp,
+        signal: controller.signal,
+      });
+
+      if (!response.ok) {
+        const errorText = await response.text().catch(() => "");
+        throw new Error(
+          `WHEP request failed: ${response.status} ${response.statusText} ${errorText}`,
+        );
+      }
+
+      const answerSdp = await response.text();
+      await pc.setRemoteDescription({ type: "answer", sdp: answerSdp });
+
+      this.retryCount = 0;
+    } catch {
+      this.scheduleReconnect();
+    }
+  }
+
+  async stop(): Promise<void> {
+    this.stopped = true;
+    if (this.reconnectTimeout) {
+      clearTimeout(this.reconnectTimeout);
+      this.reconnectTimeout = null;
+    }
+    await this.cleanupPeerConnection();
+  }
+
+  private scheduleReconnect(): void {
+    if (this.stopped) return;
+    if (this.reconnectTimeout) {
+      clearTimeout(this.reconnectTimeout);
+      this.reconnectTimeout = null;
+    }
+    const attempt = this.retryCount;
+    const delay = this.calculateDelay(attempt);
+    this.reconnectTimeout = setTimeout(() => {
+      if (this.stopped) return;
+      this.retryCount = attempt + 1;
+      void this.connect();
+    }, delay);
+  }
+
+  private async cleanupPeerConnection(): Promise<void> {
+    if (this.disconnectedGraceTimeout) {
+      clearTimeout(this.disconnectedGraceTimeout);
+      this.disconnectedGraceTimeout = null;
+    }
+    if (this.abortController) {
+      try {
+        this.abortController.abort();
+      } catch {}
+      this.abortController = null;
+    }
+    if (this.pc) {
+      const currentPc = this.pc;
+      this.pc = null;
+      try {
+        currentPc.getTransceivers().forEach(t => {
+          try {
+            t.stop();
+          } catch {}
+        });
+      } catch {}
+      try {
+        currentPc.close();
+      } catch {}
+    }
+    const el = this.getVideoElement();
+    if (el) {
+      try {
+        el.srcObject = null;
+      } catch {}
+    }
+    this.remoteStream = null;
+  }
+
+  private calculateDelay(count: number): number {
+    const initialDelay = 500;
+    const linearPhaseDelay = 300;
+    const linearPhaseEndCount = 10;
+    const baseExponentialDelay = 500;
+    const maxExponentialDelay = 60 * 1000;
+    const exponentFactor = 2;
+    if (count === 0) return initialDelay;
+    if (count > 0 && count <= linearPhaseEndCount) return linearPhaseDelay;
+    const exponentialAttemptNumber = count - linearPhaseEndCount;
+    const delay =
+      baseExponentialDelay *
+      Math.pow(exponentFactor, exponentialAttemptNumber - 1);
+    return Math.min(delay, maxExponentialDelay);
+  }
+
+  private waitForIceGatheringComplete(
+    pc: RTCPeerConnection,
+    timeoutMs: number,
+  ): Promise<RTCSessionDescriptionInit> {
+    return new Promise((resolve, reject) => {
+      if (pc.iceGatheringState === "complete" && pc.localDescription) {
+        resolve(pc.localDescription);
+        return;
+      }
+      const onChange = () => {
+        if (pc.iceGatheringState === "complete" && pc.localDescription) {
+          cleanup();
+          resolve(pc.localDescription);
+        }
+      };
+      const onTimeout = () => {
+        cleanup();
+        if (pc.localDescription) {
+          resolve(pc.localDescription);
+        } else {
+          reject(new Error("ICE gathering timeout without localDescription"));
+        }
+      };
+      const cleanup = () => {
+        pc.removeEventListener("icegatheringstatechange", onChange);
+        clearTimeout(timerId);
+      };
+      pc.addEventListener("icegatheringstatechange", onChange);
+      const timerId = setTimeout(onTimeout, timeoutMs);
+    });
+  }
+}
diff --git a/frontend/src/lib/daydream.ts b/frontend/src/lib/daydream.ts
index f697dbf94..e0ed463a1 100644
--- a/frontend/src/lib/daydream.ts
+++ b/frontend/src/lib/daydream.ts
@@ -10,6 +10,7 @@ interface CreateStreamRequest {
 interface CreateStreamResponse {
   id: string;
   whip_url?: string;
+  stream_key?: string;
   // other fields may exist; we mainly need id and whip_url
 }
 
diff --git a/frontend/src/pages/StreamPage.tsx b/frontend/src/pages/StreamPage.tsx
index b2451afff..7e1c8b46e 100644
--- a/frontend/src/pages/StreamPage.tsx
+++ b/frontend/src/pages/StreamPage.tsx
@@ -19,13 +19,10 @@ import type { PromptItem, PromptTransition } from "../lib/api";
 import { checkModelStatus, downloadPipelineModels } from "../lib/api";
 import { createCloudStream } from "../lib/daydream";
 import { WhipConnection } from "../components/WhipConnection";
-import { useMuxer } from "@/muxer";
 
 export function StreamPage() {
   // Use the stream state hook for settings management
   const { settings, updateSettings } = useStreamState();
-  const muxer = useMuxer();
-
 
   // Prompt state
   const [promptItems, setPromptItems] = useState<PromptItem[]>([
@@ -518,7 +515,7 @@ export function StreamPage() {
         setIsConnectingCloud(true);
         isStartingCloudRef.current = true;
         const created = await createCloudStream({
-          pipeline_id: 'pip_SDXL-turbo',
+          pipeline_id: 'pip_SD-turbo',
           load_params: loadParams || undefined,
         });
         cloudStreamIdRef.current = created.id;
@@ -532,6 +529,7 @@ export function StreamPage() {
           return false;
         }
 
+        console.log("[StreamPage] created:", created.stream_key);
         const endpoint = created.whip_url;
         // const endpoint = "https://ai.livepeer.monster/aiWebrtc/foo3-out/whip";
         if (!endpoint) {
@@ -954,9 +952,10 @@ export function StreamPage() {
       {settings.cloudMode && cloudWhipUrl ? (
         <WhipConnection
           whipUrl={cloudWhipUrl}
-          stream={localStream ?? muxer.stream ?? null}
+          stream={localStream ?? null}
           onConnectionStateChange={onWhipConnectionStateChange}
           onRetryLimitExceeded={onWhipRetryLimitExceeded}
+          debugStats  // TODO remove later
         />
       ) : null}
     </div>

From 8c5d3ff8a558f45092b799a9972b551a8c53a7f9 Mon Sep 17 00:00:00 2001
From: Max Holland <max@livepeer.org>
Date: Fri, 14 Nov 2025 16:24:12 +0000
Subject: [PATCH 04/11] tidy up

---
 .../components/PromptInputWithTimeline.tsx    | 41 ++++++++-----------
 frontend/src/components/WhipConnection.tsx    | 10 ++---
 frontend/src/hooks/useWebRTC.ts               | 18 +-------
 frontend/src/pages/StreamPage.tsx             | 17 +++-----
 4 files changed, 27 insertions(+), 59 deletions(-)

diff --git a/frontend/src/components/PromptInputWithTimeline.tsx b/frontend/src/components/PromptInputWithTimeline.tsx
index 09913d380..cdbb6efcf 100644
--- a/frontend/src/components/PromptInputWithTimeline.tsx
+++ b/frontend/src/components/PromptInputWithTimeline.tsx
@@ -20,8 +20,6 @@ interface PromptInputWithTimelineProps {
   disabled?: boolean;
   isStreaming?: boolean;
   isStreamingCloud?: boolean;
-  isConnectingCloud?: boolean;
-  isStartingCloud?: boolean;
   isVideoPaused?: boolean;
   timelineRef?: React.RefObject<{
     getCurrentTimelinePrompt: () => string;
@@ -58,8 +56,6 @@ export function PromptInputWithTimeline({
   disabled = false,
   isStreaming = false,
   isStreamingCloud = false,
-  isConnectingCloud = false,
-  isStartingCloud = false,
   isVideoPaused = false,
   timelineRef,
   selectedPrompt: _selectedPrompt = null,
@@ -252,8 +248,7 @@ export function PromptInputWithTimeline({
 
   // Initialize stream if needed
   const initializeStream = useCallback(async (): Promise<boolean> => {
-    console.log("[PromptInputWithTimeline] initializeStream", isStreaming, isStreamingCloud, isConnectingCloud);
-    if (!isStreaming && !isStreamingCloud && !isConnectingCloud && !isStartingCloud && onStartStream) {
+    if (!isStreaming && !isStreamingCloud && onStartStream) {
       const result = await onStartStream();
       const started = result === true; // Treat undefined/void as false
       if (started) {
@@ -263,7 +258,7 @@ export function PromptInputWithTimeline({
       return false;
     }
     return true; // Already streaming
-  }, [isStreaming, isStreamingCloud, isConnectingCloud, isStartingCloud, onStartStream]);
+  }, [isStreaming, isStreamingCloud, onStartStream]);
 
   // Check if at end of timeline
   const isAtTimelineEnd = useCallback(() => {
@@ -292,22 +287,22 @@ export function PromptInputWithTimeline({
 
     const isAtEnd = isAtTimelineEnd();
 
-    // if (isAtEnd) {
-    //   setIsLive(true);
-    //   onLiveStateChange?.(true);
-
-    //   // Only create a new live prompt if there are no prompts at all in the timeline
-    //   if (prompts.length === 0) {
-    //     const streamStartedAgain = await initializeStream();
-    //     if (streamStartedAgain) {
-    //       const livePrompt = buildLivePromptFromCurrent(
-    //         currentTime,
-    //         currentTime
-    //       );
-    //       setPrompts(prevPrompts => [...prevPrompts, livePrompt]);
-    //     }
-    //   }
-    // }
+    if (isAtEnd && !(settings?.cloudMode ?? false)) { // Don't think we need to create another stream for cloud mode
+      setIsLive(true);
+      onLiveStateChange?.(true);
+
+      // Only create a new live prompt if there are no prompts at all in the timeline
+      if (prompts.length === 0) {
+        const streamStartedAgain = await initializeStream();
+        if (streamStartedAgain) {
+          const livePrompt = buildLivePromptFromCurrent(
+            currentTime,
+            currentTime
+          );
+          setPrompts(prevPrompts => [...prevPrompts, livePrompt]);
+        }
+      }
+    }
 
     // Set callback to start playback when video actually starts playing
     if (onVideoPlayingCallbackRef) {
diff --git a/frontend/src/components/WhipConnection.tsx b/frontend/src/components/WhipConnection.tsx
index 69008c10d..be1afddcd 100644
--- a/frontend/src/components/WhipConnection.tsx
+++ b/frontend/src/components/WhipConnection.tsx
@@ -48,7 +48,6 @@ export const WhipConnection = memo(
     useEffect(() => {
       console.log("[WhipConnection] Re-rendering WhipConnection");
       if (!whipUrl) return;
-      console.log("[WhipConnection] WhipUrl:", whipUrl, "stream:", streamRef.current?.getVideoTracks().length);
 
       const client = new WhipClient({
         whipUrl,
@@ -72,12 +71,9 @@ export const WhipConnection = memo(
       void client.connect();
       console.log("[WhipConnection] WhipClient connected");
       return () => {
-        console.log("[WhipConnection] WhipClient stoppe, now sleeping");
-        setTimeout(() => {
-          console.log("[WhipConnection] WhipClient stopped, now waking up");
-          void client.stop();
-          clientRef.current = null;
-        }, 2000); // 2s
+        console.log("[WhipConnection] WhipClient stopped");
+        void client.stop();
+        clientRef.current = null;
       };
     }, [
       whipUrl,
diff --git a/frontend/src/hooks/useWebRTC.ts b/frontend/src/hooks/useWebRTC.ts
index 2dbbb5a53..3f26675fa 100644
--- a/frontend/src/hooks/useWebRTC.ts
+++ b/frontend/src/hooks/useWebRTC.ts
@@ -20,14 +20,6 @@ interface InitialParameters {
 interface UseWebRTCOptions {
   /** Callback function called when the stream stops on the backend */
   onStreamStop?: () => void;
-  /** Custom offer sender (e.g., Daydream). Defaults to local sendWebRTCOffer */
-  sendOffer?: (
-    req: {
-      sdp?: string;
-      type?: string;
-      initialParameters?: InitialParameters;
-    }
-  ) => Promise<RTCSessionDescriptionInit>;
 }
 
 /**
@@ -167,15 +159,7 @@ export function useWebRTC(options?: UseWebRTCOptions) {
             // ICE gathering complete - now send the offer
             console.log("ICE gathering complete, sending offer to server");
             try {
-              const offerSender =
-                options?.sendOffer ||
-                (async (req: {
-                  sdp?: string;
-                  type?: string;
-                  initialParameters?: InitialParameters;
-                }) => sendWebRTCOffer(req));
-
-              const answer = await offerSender({
+              const answer = await sendWebRTCOffer({
                 sdp: pc.localDescription!.sdp,
                 type: pc.localDescription!.type,
                 initialParameters,
diff --git a/frontend/src/pages/StreamPage.tsx b/frontend/src/pages/StreamPage.tsx
index 7e1c8b46e..d7ddf6aa8 100644
--- a/frontend/src/pages/StreamPage.tsx
+++ b/frontend/src/pages/StreamPage.tsx
@@ -19,6 +19,7 @@ import type { PromptItem, PromptTransition } from "../lib/api";
 import { checkModelStatus, downloadPipelineModels } from "../lib/api";
 import { createCloudStream } from "../lib/daydream";
 import { WhipConnection } from "../components/WhipConnection";
+import { usePlaybackUrl } from "@/hooks/usePlaybackUrl";
 
 export function StreamPage() {
   // Use the stream state hook for settings management
@@ -44,13 +45,11 @@ export function StreamPage() {
     useState<TimelinePrompt | null>(null);
 
   // Cloud mode state (WHIP)
-  const [isCloudLoading, setIsCloudLoading] = useState(false);
   const [isConnectingCloud, setIsConnectingCloud] = useState(false);
   const [isStreamingCloud, setIsStreamingCloud] = useState(false);
-  const [cloudRemoteStream, setCloudRemoteStream] = useState<MediaStream | null>(null);
   const [cloudWhipUrl, setCloudWhipUrl] = useState<string | null>(null);
-  const cloudStreamIdRef = useRef<string | null>(null);
   const isStartingCloudRef = useRef(false);
+  const { setPlaybackUrl } = usePlaybackUrl();
 
   // Stable callbacks for WHIP to avoid effect churn in WhipConnection
   const onWhipConnectionStateChange = useCallback((state: RTCPeerConnectionState) => {
@@ -462,7 +461,6 @@ export function StreamPage() {
     } else {
       if (isStreamingCloud) {
         setCloudWhipUrl(null);
-        setCloudRemoteStream(null);
         setIsStreamingCloud(false);
         setIsConnectingCloud(false);
         return true;
@@ -511,15 +509,12 @@ export function StreamPage() {
           };
         }
 
-        setIsCloudLoading(true);
         setIsConnectingCloud(true);
         isStartingCloudRef.current = true;
         const created = await createCloudStream({
           pipeline_id: 'pip_SD-turbo',
           load_params: loadParams || undefined,
         });
-        cloudStreamIdRef.current = created.id;
-        setIsCloudLoading(false);
 
         const needsVideoInput =
           PIPELINES[pipelineIdToUse]?.category === "video-input";
@@ -746,9 +741,9 @@ export function StreamPage() {
           <div className="flex-1 min-h-0">
             <VideoOutput
               className="h-full"
-              remoteStream={settings.cloudMode ? cloudRemoteStream : remoteStream}
+              remoteStream={remoteStream}
               isPipelineLoading={
-                settings.cloudMode ? isCloudLoading : isPipelineLoading
+                settings.cloudMode ? false : isPipelineLoading
               }
               isConnecting={settings.cloudMode ? isConnectingCloud : isConnecting}
               pipelineError={pipelineError}
@@ -879,8 +874,6 @@ export function StreamPage() {
               onTimelinePlayingChange={handleTimelinePlayingChange}
               isDownloading={isDownloading}
               isStreamingCloud={isStreamingCloud}
-              isConnectingCloud={isConnectingCloud}
-              isStartingCloud={isStartingCloudRef.current}
             />
           </div>
         </div>
@@ -902,9 +895,9 @@ export function StreamPage() {
                 }
               if (isStreamingCloud) {
                 setCloudWhipUrl(null);
-                setCloudRemoteStream(null);
                 setIsStreamingCloud(false);
                 setIsConnectingCloud(false);
+                setPlaybackUrl(null);
               }
               })();
               updateSettings({ cloudMode: enabled });

From f31dd417c586aaf6cd032a59ce87c2e4a83e10bc Mon Sep 17 00:00:00 2001
From: Max Holland <max@livepeer.org>
Date: Wed, 19 Nov 2025 13:00:03 +0000
Subject: [PATCH 05/11] Remove unnecessary muxer and make pipeline list update
 based on cloud mode

---
 frontend/src/App.tsx                       |  11 +-
 frontend/src/components/SettingsPanel.tsx  |  25 +-
 frontend/src/components/WhipConnection.tsx |   8 -
 frontend/src/data/pipelines.ts             |  18 +
 frontend/src/lib/whip.ts                   | 104 ---
 frontend/src/main.tsx                      |   4 +-
 frontend/src/muxer/README.md               |  46 -
 frontend/src/muxer/core.ts                 | 953 ---------------------
 frontend/src/muxer/index.tsx               | 128 ---
 frontend/src/muxer/types.ts                |  52 --
 10 files changed, 47 insertions(+), 1302 deletions(-)
 delete mode 100644 frontend/src/lib/whip.ts
 delete mode 100644 frontend/src/muxer/README.md
 delete mode 100644 frontend/src/muxer/core.ts
 delete mode 100644 frontend/src/muxer/index.tsx
 delete mode 100644 frontend/src/muxer/types.ts

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 94648ca0c..74fb3fa47 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,16 +1,13 @@
 import { StreamPage } from "./pages/StreamPage";
 import { Toaster } from "./components/ui/sonner";
 import "./index.css";
-import { MuxerProvider } from "@/muxer";
 
 function App() {
   return (
-    <MuxerProvider width={512} height={512} fps={30} sendFps={30}>
-      <>
-        <StreamPage />
-        <Toaster />
-      </>
-    </MuxerProvider>
+    <>
+      <StreamPage />
+      <Toaster />
+    </>
   );
 }
 
diff --git a/frontend/src/components/SettingsPanel.tsx b/frontend/src/components/SettingsPanel.tsx
index 73b982c0a..344c7fc53 100644
--- a/frontend/src/components/SettingsPanel.tsx
+++ b/frontend/src/components/SettingsPanel.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useEffect, useMemo } from "react";
 import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
 import {
   Select,
@@ -100,6 +100,27 @@ export function SettingsPanel({
   const [widthError, setWidthError] = useState<string | null>(null);
   const [seedError, setSeedError] = useState<string | null>(null);
 
+  // Get filtered pipeline IDs based on cloudMode
+  const filteredPipelineIds = useMemo(() => {
+    return Object.keys(PIPELINES).filter(id => {
+      const pipeline = PIPELINES[id];
+      const compatibility = pipeline.pipelineCompatibility || "local";
+
+      if (cloudMode) {
+        return compatibility === "cloud" || compatibility === "both";
+      } else {
+        return compatibility === "local" || compatibility === "both";
+      }
+    });
+  }, [cloudMode]);
+
+  // Auto-select first available pipeline if current selection is no longer available
+  useEffect(() => {
+    if (filteredPipelineIds.length > 0 && !filteredPipelineIds.includes(pipelineId)) {
+      onPipelineIdChange?.(filteredPipelineIds[0] as PipelineId);
+    }
+  }, [cloudMode, filteredPipelineIds, pipelineId, onPipelineIdChange]);
+
   const handlePipelineIdChange = (value: string) => {
     if (value in PIPELINES) {
       onPipelineIdChange?.(value as PipelineId);
@@ -229,7 +250,7 @@ export function SettingsPanel({
               <SelectValue placeholder="Select a pipeline" />
             </SelectTrigger>
             <SelectContent>
-              {Object.keys(PIPELINES).map(id => (
+              {filteredPipelineIds.map(id => (
                 <SelectItem key={id} value={id}>
                   {id}
                 </SelectItem>
diff --git a/frontend/src/components/WhipConnection.tsx b/frontend/src/components/WhipConnection.tsx
index be1afddcd..7d15f0480 100644
--- a/frontend/src/components/WhipConnection.tsx
+++ b/frontend/src/components/WhipConnection.tsx
@@ -1,7 +1,6 @@
 "use client";
 
 import { usePlaybackUrl } from "@/hooks/usePlaybackUrl";
-import { useMuxer } from "@/muxer";
 import { memo, useEffect, useRef } from "react";
 import { WhipClient } from "@/lib/WhipClient";
 
@@ -32,7 +31,6 @@ export const WhipConnection = memo(
     debugStats,
   }: WhipConnectionProps) => {
     const { setPlaybackUrl, setLoading } = usePlaybackUrl();
-    const muxer = useMuxer();
     const clientRef = useRef<WhipClient | null>(null);
     const streamRef = useRef<MediaStream | null>(stream);
 
@@ -89,12 +87,6 @@ export const WhipConnection = memo(
       setLoading,
     ]);
 
-    useEffect(() => {
-      const client = clientRef.current;
-      if (!client) return;
-      client.setMaxFramerate(muxer.sendFps);
-    }, [muxer.sendFps]);
-
     return null;
   },
 );
diff --git a/frontend/src/data/pipelines.ts b/frontend/src/data/pipelines.ts
index 3cb3857e6..1e0db7777 100644
--- a/frontend/src/data/pipelines.ts
+++ b/frontend/src/data/pipelines.ts
@@ -1,4 +1,5 @@
 export type PipelineCategory = "video-input" | "no-video-input";
+export type PipelineCompatibility = "local" | "cloud" | "both";
 
 export interface PipelineInfo {
   name: string;
@@ -11,6 +12,7 @@ export interface PipelineInfo {
   requiresModels?: boolean; // Whether this pipeline requires models to be downloaded
   defaultTemporalInterpolationMethod?: "linear" | "slerp"; // Default method for temporal interpolation
   defaultTemporalInterpolationSteps?: number; // Default number of steps for temporal interpolation
+  pipelineCompatibility?: PipelineCompatibility;
 }
 
 export const PIPELINES: Record<string, PipelineInfo> = {
@@ -58,6 +60,22 @@ export const PIPELINES: Record<string, PipelineInfo> = {
     defaultTemporalInterpolationMethod: "linear",
     defaultTemporalInterpolationSteps: 4,
   },
+  "sd-turbo": {
+    name: "SD-turbo",
+    docsUrl:
+      "",
+    about:
+      "",
+    modified: true,
+    category: "video-input",
+    defaultPrompt:
+      "",
+    estimatedVram: 32,
+    requiresModels: true,
+    defaultTemporalInterpolationMethod: "linear",
+    defaultTemporalInterpolationSteps: 4,
+    pipelineCompatibility: "cloud",
+  },
   passthrough: {
     name: "Passthrough",
     about:
diff --git a/frontend/src/lib/whip.ts b/frontend/src/lib/whip.ts
deleted file mode 100644
index c31cea86c..000000000
--- a/frontend/src/lib/whip.ts
+++ /dev/null
@@ -1,104 +0,0 @@
-export interface StartWhipOptions {
-  endpoint: string;
-  token?: string;
-  localStream?: MediaStream;
-  iceServers?: RTCIceServer[];
-  /** Max time to wait for ICE gathering before sending (ms). Defaults to 2500ms. */
-  maxIceGatherMs?: number;
-}
-
-export async function startWhip(options: StartWhipOptions) {
-  const { endpoint, token, localStream, iceServers, maxIceGatherMs } = options;
-
-  const peerConnection = new RTCPeerConnection({
-    iceServers: iceServers ?? [{ urls: "stun:stun.l.google.com:19302" }],
-  });
-
-  // Attach upstream if provided; otherwise be recv-only
-  if (localStream) {
-    localStream.getTracks().forEach(track => {
-      peerConnection.addTrack(track, localStream);
-    });
-  } else {
-    peerConnection.addTransceiver("video");
-  }
-
-  // Collect remote stream
-  const remoteStream = new MediaStream();
-  peerConnection.ontrack = evt => {
-    if (evt.streams && evt.streams[0]) {
-      evt.streams[0].getTracks().forEach(track => remoteStream.addTrack(track));
-    } else {
-      remoteStream.addTrack(evt.track);
-    }
-  };
-
-  // Create offer and wait for ICE complete (non-trickle)
-  const offer = await peerConnection.createOffer();
-  await peerConnection.setLocalDescription(offer);
-  await waitForIceGatheringComplete(peerConnection, maxIceGatherMs ?? 2500);
-
-  const sdp = peerConnection.localDescription?.sdp || offer.sdp || "";
-  const response = await fetch(endpoint, {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/sdp",
-      ...(token ? { Authorization: `Bearer ${token}` } : {}),
-    },
-    body: sdp,
-  });
-
-  if (!response.ok) {
-    const text = await response.text();
-    peerConnection.close();
-    throw new Error(
-      `WHIP offer failed: ${response.status} ${response.statusText}: ${text}`
-    );
-  }
-
-  const resourceUrl = response.headers.get("location") || undefined;
-  const answerSdp = await response.text();
-
-  await peerConnection.setRemoteDescription({
-    type: "answer",
-    sdp: answerSdp,
-  });
-
-  const stop = async () => {
-    try {
-      peerConnection.close();
-      if (resourceUrl) {
-        await fetch(resourceUrl, {
-          method: "DELETE",
-          headers: {
-            ...(token ? { Authorization: `Bearer ${token}` } : {}),
-          },
-        });
-      }
-    } catch {
-      // ignore
-    }
-  };
-
-  return { peerConnection, remoteStream, resourceUrl, stop };
-}
-
-async function waitForIceGatheringComplete(
-  pc: RTCPeerConnection,
-  timeoutMs: number
-): Promise<void> {
-  if (pc.iceGatheringState === "complete") return;
-
-  await Promise.race<void>([
-    new Promise<void>(resolve => {
-      const listener = () => {
-        if (pc.iceGatheringState === "complete") {
-          pc.removeEventListener("icegatheringstatechange", listener);
-          resolve();
-        }
-      };
-      pc.addEventListener("icegatheringstatechange", listener);
-    }),
-    new Promise<void>(resolve => setTimeout(resolve, timeoutMs)),
-  ]);
-}
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index 73c029101..10ed13e0c 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -4,7 +4,7 @@ import "./index.css";
 import App from "./App.tsx";
 
 createRoot(document.getElementById("root")!).render(
-  // <StrictMode>
+  <StrictMode>
     <App />
-  // </StrictMode>
+  </StrictMode>
 );
diff --git a/frontend/src/muxer/README.md b/frontend/src/muxer/README.md
deleted file mode 100644
index 84c6c9ea1..000000000
--- a/frontend/src/muxer/README.md
+++ /dev/null
@@ -1,46 +0,0 @@
-### Muxer
-
-Lightweight canvas muxer for 2D compositing and smooth source crossfades.
-
-_This muxer will be extracted into a separate library soon_
-
-### Quick start
-
-```tsx
-import { PropsWithChildren, useEffect, useRef } from "react";
-import { MuxerProvider, useMuxer } from "@/muxer";
-
-function App({ children }: PropsWithChildren) {
-  return (
-    <MuxerProvider width={512} height={512} fps={30} sendFps={30}>
-      <MySource />
-      {children}
-    </MuxerProvider>
-  );
-}
-
-function MySource() {
-  const { setCanvasSize, setSource } = useMuxer();
-  const videoRef = useRef<HTMLVideoElement>(null);
-
-  useEffect(() => {
-    if (!videoRef.current) return;
-    setCanvasSize(1280, 720);
-    setSource({
-      kind: "video",
-      element: videoRef.current,
-      contentHint: "motion",
-      fit: "cover",
-    });
-  }, [muxer]);
-
-  return <video ref={videoRef} autoPlay muted />;
-}
-```
-
-### API
-
-- **stream**: `MediaStream`
-- **setCanvasSize(w, h, dpr?)**
-- **setFps(fps)**, **setSendFps(fps)**
-- **setSource(source)**, **clearSource()**
diff --git a/frontend/src/muxer/core.ts b/frontend/src/muxer/core.ts
deleted file mode 100644
index 8d21d3b8b..000000000
--- a/frontend/src/muxer/core.ts
+++ /dev/null
@@ -1,953 +0,0 @@
-import type {
-  CanvasSize,
-  Ctx2D,
-  CustomSource,
-  FitMode,
-  MuxerSource,
-} from "./types";
-
-export type MuxerOptions = {
-  width: number;
-  height: number;
-  fps: number;
-  dpr?: number;
-  crossfadeMs?: number;
-  keepalive?: boolean;
-  sendFps?: number;
-  onSendFpsChange?: (fps: number) => void;
-  autoUnlockAudio?: boolean;
-  unlockEvents?: string[];
-  disableSilentAudio?: boolean;
-};
-
-export class Muxer {
-  private captureCanvas: HTMLCanvasElement | null = null;
-  private captureCtx: Ctx2D | null = null;
-  private offscreen: OffscreenCanvas | HTMLCanvasElement | null = null;
-  private offscreenCtx: Ctx2D | null = null;
-  private outputStream: MediaStream | null = null;
-
-  private currentSource: MuxerSource | null = null;
-  private pendingSource: MuxerSource | null = null;
-  private cleanupRef: (() => void) | void | undefined;
-
-  private lastFrameAt = 0;
-  private fps: number;
-  private sendFps: number;
-  private size: CanvasSize;
-  private crossfadeMs: number;
-  private crossfadeStart: number | null = null;
-  private keepalive: boolean;
-  private onSendFpsChange?: (fps: number) => void;
-
-  private rafId: number | null = null;
-  private videoFrameRequestId: number | null = null;
-  private videoFrameSource: HTMLVideoElement | null = null;
-  private rafFallbackActive = false;
-
-  private backgroundIntervalId: number | null = null;
-  private visibilityListener: (() => void) | null = null;
-  private lastVisibleSendFps: number | null = null;
-  private externalAudioTrackIds: Set<string> = new Set();
-  private frameIndex = 0;
-  private audioCtx: AudioContext | null = null;
-  private silentOsc: OscillatorNode | null = null;
-  private silentGain: GainNode | null = null;
-  private audioDst: MediaStreamAudioDestinationNode | null = null;
-  private silentAudioTrack: MediaStreamTrack | null = null;
-  private externalAudioEndHandlers: Map<string, (ev: Event) => void> =
-    new Map();
-
-  private audioAutoUnlock: boolean = true;
-  private audioUnlockEvents: string[] = [];
-  private audioUnlockHandler: ((ev: Event) => void) | null = null;
-  private audioUnlockAttached = false;
-  private audioStateListenerAttached = false;
-  private disableSilentAudio: boolean = false;
-
-  private rectCache: WeakMap<
-    HTMLCanvasElement | HTMLVideoElement,
-    {
-      canvasW: number;
-      canvasH: number;
-      sourceW: number;
-      sourceH: number;
-      dx: number;
-      dy: number;
-      dw: number;
-      dh: number;
-      fit: FitMode;
-    }
-  > = new WeakMap();
-
-  constructor(options: MuxerOptions) {
-    const dpr = Math.min(
-      2,
-      options.dpr ??
-        (typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1),
-    );
-    this.size = { width: options.width, height: options.height, dpr };
-    this.fps = Math.max(1, options.fps);
-    this.sendFps = Math.max(1, options.sendFps ?? options.fps);
-    this.crossfadeMs = options.crossfadeMs ?? 500;
-    this.keepalive = options.keepalive ?? true;
-    this.onSendFpsChange = options.onSendFpsChange;
-    this.disableSilentAudio = options.disableSilentAudio ?? false;
-    this.initCanvas();
-    this.setupVisibilityHandling();
-    this.audioAutoUnlock = options.autoUnlockAudio ?? true;
-    this.audioUnlockEvents =
-      options.unlockEvents && options.unlockEvents.length > 0
-        ? options.unlockEvents
-        : ["pointerdown", "click", "touchstart", "keydown"];
-    this.setupAudioAutoUnlock();
-  }
-
-  private initCanvas() {
-    const canvas = document.createElement("canvas");
-    canvas.style.display = "none";
-    const pxW = Math.round(this.size.width * this.size.dpr);
-    const pxH = Math.round(this.size.height * this.size.dpr);
-    const outW = Math.round(this.size.width);
-    const outH = Math.round(this.size.height);
-    canvas.width = outW;
-    canvas.height = outH;
-    const ctx = canvas.getContext("2d", {
-      alpha: false,
-      desynchronized: true,
-    }) as Ctx2D | null;
-    if (!ctx) throw new Error("2D context not available");
-
-    this.captureCanvas = canvas;
-    this.captureCtx = ctx;
-
-    try {
-      const off = new OffscreenCanvas(pxW, pxH);
-      this.offscreen = off;
-      const offCtx = off.getContext("2d", { alpha: false }) as Ctx2D | null;
-      if (!offCtx) throw new Error("2D context not available for Offscreen");
-      offCtx.imageSmoothingEnabled = true;
-      this.offscreenCtx = offCtx;
-    } catch (_) {
-      const off = document.createElement("canvas");
-      off.width = pxW;
-      off.height = pxH;
-      const offCtx = off.getContext("2d", { alpha: false }) as Ctx2D | null;
-      if (!offCtx)
-        throw new Error("2D context not available for Offscreen fallback");
-      offCtx.imageSmoothingEnabled = true;
-      this.offscreen = off;
-      this.offscreenCtx = offCtx;
-    }
-
-    const stream = canvas.captureStream(this.fps);
-    this.outputStream = stream;
-
-    this.ensureSilentAudioTrack();
-
-    try {
-      const vtrack = stream.getVideoTracks()[0];
-      if (vtrack) {
-        try {
-          if (vtrack.contentHint !== undefined) {
-            vtrack.contentHint = "detail";
-          }
-        } catch (_) {}
-        this.applyVideoTrackConstraints();
-      }
-    } catch (_) {}
-
-    const offCtx = this.offscreenCtx!;
-    offCtx.fillStyle = "#111";
-    offCtx.fillRect(0, 0, pxW, pxH);
-    this.captureCtx!.drawImage(
-      this.offscreen as any,
-      0,
-      0,
-      pxW,
-      pxH,
-      0,
-      0,
-      outW,
-      outH,
-    );
-  }
-
-  private recreateStream() {
-    if (!this.captureCanvas) return;
-    const newStream = this.captureCanvas.captureStream(this.fps);
-    const prev = this.outputStream;
-    if (prev && prev !== newStream) {
-      try {
-        prev.getAudioTracks().forEach(t => {
-          try {
-            newStream.addTrack(t);
-          } catch (_) {}
-        });
-      } catch (_) {}
-    }
-    this.outputStream = newStream;
-
-    if (this.outputStream && this.outputStream.getAudioTracks().length === 0) {
-      this.ensureSilentAudioTrack();
-    }
-
-    try {
-      const w = this.captureCanvas.width;
-      const h = this.captureCanvas.height;
-      const vtrack = newStream.getVideoTracks()[0];
-      if (vtrack) {
-        try {
-          if (vtrack.contentHint !== undefined) {
-            vtrack.contentHint = "detail";
-          }
-        } catch (_) {}
-        this.applyVideoTrackConstraints();
-      }
-    } catch (_) {}
-
-    if (prev && prev !== newStream) {
-      try {
-        prev.getVideoTracks().forEach(t => {
-          try {
-            t.stop();
-          } catch (_) {}
-        });
-      } catch (_) {}
-    }
-  }
-
-  get stream(): MediaStream | null {
-    return this.outputStream;
-  }
-
-  get canvasSize(): CanvasSize {
-    return this.size;
-  }
-
-  get currentFps(): number {
-    return this.fps;
-  }
-
-  get currentSendFps(): number {
-    return this.sendFps;
-  }
-
-  setFps(fps: number) {
-    const next = Math.max(1, fps);
-    if (this.fps === next) return;
-    this.fps = next;
-    this.recreateStream();
-  }
-
-  setSendFps(fps: number) {
-    const next = Math.max(1, fps);
-    if (this.sendFps === next) return;
-    this.sendFps = next;
-    try {
-      if (typeof this.onSendFpsChange === "function") {
-        this.onSendFpsChange(this.sendFps);
-      }
-    } catch (_) {}
-    this.applyVideoTrackConstraints();
-  }
-
-  setCanvasSize(w: number, h: number, dpr?: number) {
-    const nextDpr = Math.min(
-      2,
-      dpr ?? (typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1),
-    );
-    if (
-      this.size.width === w &&
-      this.size.height === h &&
-      this.size.dpr === nextDpr
-    )
-      return;
-
-    this.size = { width: w, height: h, dpr: nextDpr };
-
-    const pxW = Math.round(w * nextDpr);
-    const pxH = Math.round(h * nextDpr);
-
-    if (this.captureCanvas) {
-      const outW = Math.round(w);
-      const outH = Math.round(h);
-      this.captureCanvas.width = outW;
-      this.captureCanvas.height = outH;
-    }
-
-    if (this.offscreen instanceof HTMLCanvasElement) {
-      this.offscreen.width = pxW;
-      this.offscreen.height = pxH;
-    } else if (this.offscreen instanceof OffscreenCanvas) {
-      this.offscreen.width = pxW;
-      this.offscreen.height = pxH;
-    }
-
-    this.recreateStream();
-    this.rectCache = new WeakMap();
-  }
-
-  setCrossfade(ms: number) {
-    this.crossfadeMs = Math.max(0, ms);
-  }
-
-  setBackgroundKeepalive(enabled: boolean) {
-    this.keepalive = !!enabled;
-  }
-
-  getSource(): MuxerSource | null {
-    return this.currentSource;
-  }
-
-  setSource(source: MuxerSource) {
-    this.cancelSchedulers();
-    this.cleanupRef?.();
-    this.cleanupRef = undefined;
-    this.pendingSource = source;
-    this.crossfadeStart = null;
-
-    const track = this.outputStream?.getVideoTracks()[0];
-
-    if (source.kind === "custom") {
-      const off = this.offscreenCtx;
-      if (off) {
-        const cleanup = (source as CustomSource).onStart(off);
-        this.cleanupRef = cleanup || undefined;
-      }
-    }
-
-    this.lastFrameAt = 0;
-    this.scheduleForCurrentSource();
-  }
-
-  clearSource() {
-    this.cancelSchedulers();
-    this.cleanupRef?.();
-    this.cleanupRef = undefined;
-    this.currentSource = null;
-    this.pendingSource = null;
-    this.crossfadeStart = null;
-  }
-
-  addAudioTrack(track: MediaStreamTrack) {
-    if (!this.outputStream) return;
-    try {
-      if (this.silentAudioTrack) {
-        try {
-          this.outputStream.removeTrack(this.silentAudioTrack);
-        } catch (_) {}
-      }
-      const exists = this.outputStream
-        .getAudioTracks()
-        .some(t => t.id === track.id);
-      if (!exists) {
-        this.outputStream.addTrack(track);
-      }
-      this.externalAudioTrackIds.add(track.id);
-      try {
-        const onEnded = (_ev: Event) => {
-          try {
-            if (!this.outputStream) return;
-            this.outputStream.getAudioTracks().forEach(t => {
-              if (t.id === track.id) {
-                try {
-                  this.outputStream!.removeTrack(t);
-                } catch (_) {}
-              }
-            });
-            this.externalAudioTrackIds.delete(track.id);
-            this.externalAudioEndHandlers.delete(track.id);
-            if (this.outputStream.getAudioTracks().length === 0) {
-              this.ensureSilentAudioTrack();
-            }
-          } catch (_) {}
-          try {
-            track.removeEventListener("ended", onEnded);
-          } catch (_) {}
-        };
-        track.addEventListener("ended", onEnded);
-        this.externalAudioEndHandlers.set(track.id, onEnded);
-      } catch (_) {}
-    } catch (_) {}
-  }
-
-  removeAudioTrack(trackId: string) {
-    if (!this.outputStream) return;
-    this.outputStream.getAudioTracks().forEach(t => {
-      if (t.id === trackId) this.outputStream!.removeTrack(t);
-    });
-    this.externalAudioTrackIds.delete(trackId);
-    try {
-      const handler = this.externalAudioEndHandlers.get(trackId);
-      const tracks = this.outputStream.getAudioTracks();
-      const tr = tracks.find(t => t.id === trackId);
-      if (tr && handler) {
-        try {
-          tr.removeEventListener("ended", handler);
-        } catch (_) {}
-      }
-    } catch (_) {}
-    this.externalAudioEndHandlers.delete(trackId);
-    if (this.outputStream.getAudioTracks().length === 0) {
-      this.ensureSilentAudioTrack();
-    }
-  }
-
-  destroy() {
-    this.cancelSchedulers();
-    this.cleanupRef?.();
-    this.cleanupRef = undefined;
-    this.cleanupVisibilityHandling();
-    this.cleanupAudioAutoUnlock();
-    try {
-      if (this.audioCtx && (this.audioCtx as any).onstatechange) {
-        (this.audioCtx as any).onstatechange = null;
-      }
-    } catch (_) {}
-    this.audioStateListenerAttached = false;
-    this.onSendFpsChange = undefined;
-    const s = this.outputStream;
-    if (s) {
-      try {
-        s.getVideoTracks().forEach(t => {
-          try {
-            t.stop();
-          } catch (_) {}
-        });
-      } catch (_) {}
-    }
-    this.removeSilentAudioTrack();
-    try {
-      this.externalAudioEndHandlers.forEach((handler, id) => {
-        try {
-          const tr = s?.getAudioTracks().find(t => t.id === id);
-          if (tr) tr.removeEventListener("ended", handler);
-        } catch (_) {}
-      });
-    } catch (_) {}
-    this.externalAudioEndHandlers.clear();
-    this.outputStream = null;
-    this.captureCanvas = null;
-    this.captureCtx = null;
-    this.offscreen = null;
-    this.offscreenCtx = null;
-  }
-
-  async unlockAudio(): Promise<boolean> {
-    try {
-      if (typeof window === "undefined") return false;
-      if (!this.audioCtx || this.audioCtx.state === "closed") {
-        this.audioCtx = new (window.AudioContext ||
-          (window as any).webkitAudioContext)({ sampleRate: 48000 });
-      }
-      const ac = this.audioCtx;
-      if (!ac) return false;
-      try {
-        await ac.resume();
-      } catch (_) {}
-      this.attachAudioCtxStateListener();
-      if (ac.state === "running") {
-        this.rebuildSilentAudioTrack();
-        this.cleanupAudioAutoUnlock();
-        return true;
-      }
-      return false;
-    } catch (_) {
-      return false;
-    }
-  }
-
-  private scheduleForCurrentSource() {
-    const videoEl = this.chooseVideoElement();
-    if (videoEl && typeof videoEl.requestVideoFrameCallback === "function") {
-      this.videoFrameSource = videoEl;
-      const cb = () => {
-        this.renderFrame();
-        if (this.videoFrameSource === videoEl) {
-          try {
-            this.videoFrameRequestId = videoEl.requestVideoFrameCallback(cb);
-          } catch (_) {}
-        }
-      };
-      try {
-        this.videoFrameRequestId = videoEl.requestVideoFrameCallback(cb);
-      } catch (_) {}
-      this.scheduleWithRaf(true);
-      return;
-    }
-    this.scheduleWithRaf(false);
-  }
-
-  private ensureSilentAudioTrack() {
-    if (this.disableSilentAudio) return;
-    try {
-      if (!this.outputStream) return;
-      const alreadyHasAudio = this.outputStream.getAudioTracks().length > 0;
-      if (alreadyHasAudio) return;
-      if (
-        this.silentAudioTrack &&
-        this.silentAudioTrack.readyState === "live"
-      ) {
-        try {
-          this.outputStream.addTrack(this.silentAudioTrack);
-        } catch (_) {}
-        return;
-      }
-      if (!this.audioCtx) {
-        this.audioCtx = new (window.AudioContext ||
-          (window as any).webkitAudioContext)({ sampleRate: 48000 });
-        try {
-          this.audioCtx.resume().catch(() => {});
-        } catch (_) {}
-        this.attachAudioCtxStateListener();
-      }
-      const ac = this.audioCtx;
-      if (!ac) return;
-      this.silentOsc = ac.createOscillator();
-      this.silentGain = ac.createGain();
-      this.audioDst = ac.createMediaStreamDestination();
-      this.silentGain.gain.setValueAtTime(0.0001, ac.currentTime);
-      this.silentOsc.frequency.setValueAtTime(440, ac.currentTime);
-      this.silentOsc.type = "sine";
-      this.silentOsc.connect(this.silentGain);
-      this.silentGain.connect(this.audioDst);
-      this.silentOsc.start();
-      const track = this.audioDst.stream.getAudioTracks()[0];
-      if (track) {
-        this.silentAudioTrack = track;
-        try {
-          this.outputStream.addTrack(track);
-        } catch (_) {}
-      }
-    } catch (_) {}
-  }
-
-  private removeSilentAudioTrack() {
-    try {
-      if (this.outputStream && this.silentAudioTrack) {
-        try {
-          this.outputStream.removeTrack(this.silentAudioTrack);
-        } catch (_) {}
-      }
-      try {
-        if (this.silentOsc) this.silentOsc.stop();
-      } catch (_) {}
-      try {
-        if (this.silentOsc) this.silentOsc.disconnect();
-      } catch (_) {}
-      try {
-        if (this.silentGain) this.silentGain.disconnect();
-      } catch (_) {}
-      this.silentOsc = null;
-      this.silentGain = null;
-      this.audioDst = null;
-      this.silentAudioTrack = null;
-      if (this.audioCtx) {
-        try {
-          this.audioCtx.close();
-        } catch (_) {}
-      }
-      this.audioCtx = null;
-    } catch (_) {}
-  }
-
-  private scheduleWithRaf(isFallback: boolean) {
-    if (isFallback) {
-      if (this.rafFallbackActive) return;
-      this.rafFallbackActive = true;
-    }
-    const loop = () => {
-      this.renderFrame();
-      this.rafId = requestAnimationFrame(loop);
-    };
-    this.rafId = requestAnimationFrame(loop);
-  }
-
-  private cancelSchedulers() {
-    if (this.rafId != null) {
-      cancelAnimationFrame(this.rafId);
-      this.rafId = null;
-    }
-    this.rafFallbackActive = false;
-    if (this.videoFrameRequestId && this.videoFrameSource) {
-      try {
-        if (
-          typeof this.videoFrameSource.cancelVideoFrameCallback === "function"
-        ) {
-          this.videoFrameSource.cancelVideoFrameCallback(
-            this.videoFrameRequestId,
-          );
-        }
-      } catch (_) {}
-    }
-    this.videoFrameRequestId = null;
-    this.videoFrameSource = null;
-  }
-
-  private chooseVideoElement(): HTMLVideoElement | null {
-    const pending = this.pendingSource;
-    if (pending && pending.kind === "video" && this.isSourceReady(pending))
-      return pending.element as HTMLVideoElement;
-    const current = this.currentSource;
-    if (current && current.kind === "video" && this.isSourceReady(current))
-      return current.element as HTMLVideoElement;
-    return null;
-  }
-
-  private isSourceReady(source: MuxerSource): boolean {
-    if (source.kind === "video") {
-      const v = source.element as HTMLVideoElement;
-      return (
-        typeof v.readyState === "number" &&
-        v.readyState >= 2 &&
-        (v.videoWidth || 0) > 0 &&
-        (v.videoHeight || 0) > 0
-      );
-    }
-    if (source.kind === "canvas") {
-      const c = source.element as HTMLCanvasElement;
-      return (c.width || 0) > 0 && (c.height || 0) > 0;
-    }
-    return true;
-  }
-
-  private renderFrame() {
-    const off = this.offscreenCtx;
-    const cap = this.captureCtx;
-    const capCanvas = this.captureCanvas;
-    if (!off || !cap || !capCanvas) return;
-
-    const now =
-      typeof performance !== "undefined" ? performance.now() : Date.now();
-
-    if (this.pendingSource && this.isSourceReady(this.pendingSource)) {
-      if (this.crossfadeStart === null) this.crossfadeStart = now;
-    }
-
-    const minIntervalMs = 1000 / Math.max(1, this.sendFps);
-    if (this.lastFrameAt !== 0 && now - this.lastFrameAt < minIntervalMs)
-      return;
-
-    off.globalCompositeOperation = "source-over";
-    const willDraw = !!(
-      (this.pendingSource && this.isSourceReady(this.pendingSource)) ||
-      this.currentSource
-    );
-    if (willDraw) {
-      off.fillStyle = "#000";
-      off.fillRect(0, 0, off.canvas.width, off.canvas.height);
-    }
-
-    const fading =
-      this.pendingSource && this.crossfadeStart !== null && this.currentSource;
-    if (fading) {
-      const t = Math.min(
-        1,
-        (now - (this.crossfadeStart as number)) / this.crossfadeMs,
-      );
-      this.blitSource(this.currentSource as MuxerSource, 1 - t);
-      this.blitSource(this.pendingSource as MuxerSource, t);
-      if (t >= 1) {
-        this.currentSource = this.pendingSource;
-        this.pendingSource = null;
-        this.crossfadeStart = null;
-      }
-    } else if (this.pendingSource && !this.currentSource) {
-      if (this.isSourceReady(this.pendingSource)) {
-        this.blitSource(this.pendingSource, 1);
-        this.currentSource = this.pendingSource;
-        this.pendingSource = null;
-        this.crossfadeStart = null;
-      }
-    } else if (this.currentSource) {
-      this.blitSource(this.currentSource, 1);
-    }
-
-    if (this.keepalive) {
-      const w = off.canvas.width,
-        h = off.canvas.height;
-      const prevAlpha = off.globalAlpha;
-      const prevFill = off.fillStyle;
-      try {
-        off.globalAlpha = 0.08;
-        off.fillStyle = this.frameIndex % 2 ? "#101010" : "#0e0e0e";
-        off.fillRect(w - 16, h - 16, 16, 16);
-      } catch (_) {
-      } finally {
-        off.globalAlpha = prevAlpha;
-        off.fillStyle = prevFill;
-      }
-    }
-
-    this.frameIndex++;
-
-    cap.drawImage(
-      off.canvas,
-      0,
-      0,
-      off.canvas.width,
-      off.canvas.height,
-      0,
-      0,
-      capCanvas.width,
-      capCanvas.height,
-    );
-
-    const track = this.outputStream?.getVideoTracks()[0];
-    if (track && typeof (track as any).requestFrame === "function") {
-      try {
-        (track as any).requestFrame();
-      } catch (_) {}
-    }
-    this.lastFrameAt = now;
-  }
-
-  private applyVideoTrackConstraints() {
-    try {
-      const track = this.outputStream?.getVideoTracks()[0];
-      const canvas = this.captureCanvas;
-      if (!track || !canvas) return;
-      const constraints: MediaTrackConstraints = {
-        width: canvas.width,
-        height: canvas.height,
-        frameRate: Math.max(1, this.sendFps || this.fps),
-      };
-      try {
-        (track as any).contentHint !== undefined &&
-          ((track as any).contentHint = "detail");
-      } catch (_) {}
-      track.applyConstraints(constraints).catch(() => {});
-    } catch (_) {}
-  }
-
-  private requestVideoTrackFrameOnce() {
-    const track = this.outputStream?.getVideoTracks()[0];
-    if (track && typeof (track as any).requestFrame === "function") {
-      try {
-        (track as any).requestFrame();
-      } catch (_) {}
-    }
-  }
-
-  private setupVisibilityHandling() {
-    if (typeof document === "undefined") return;
-    this.visibilityListener = () => {
-      this.onVisibilityChange();
-    };
-    document.addEventListener("visibilitychange", this.visibilityListener);
-    this.onVisibilityChange();
-  }
-
-  private cleanupVisibilityHandling() {
-    if (typeof document !== "undefined" && this.visibilityListener) {
-      try {
-        document.removeEventListener(
-          "visibilitychange",
-          this.visibilityListener,
-        );
-      } catch (_) {}
-      this.visibilityListener = null;
-    }
-    if (this.backgroundIntervalId != null) {
-      clearInterval(this.backgroundIntervalId);
-      this.backgroundIntervalId = null;
-    }
-    this.lastVisibleSendFps = null;
-  }
-
-  private setupAudioAutoUnlock() {
-    if (!this.audioAutoUnlock) return;
-    if (typeof document === "undefined") return;
-    if (this.audioUnlockAttached) return;
-    const handler = (_ev: Event) => {
-      this.unlockAudio();
-    };
-    this.audioUnlockHandler = handler;
-    this.audioUnlockEvents.forEach(evt => {
-      try {
-        document.addEventListener(
-          evt as any,
-          handler as any,
-          { capture: true } as any,
-        );
-      } catch (_) {}
-    });
-    this.audioUnlockAttached = true;
-  }
-
-  private cleanupAudioAutoUnlock() {
-    if (!this.audioUnlockAttached) return;
-    if (typeof document !== "undefined" && this.audioUnlockHandler) {
-      this.audioUnlockEvents.forEach(evt => {
-        try {
-          document.removeEventListener(
-            evt as any,
-            this.audioUnlockHandler as any,
-            { capture: true } as any,
-          );
-        } catch (_) {}
-      });
-    }
-    this.audioUnlockAttached = false;
-    this.audioUnlockHandler = null;
-  }
-
-  private attachAudioCtxStateListener() {
-    try {
-      const ac = this.audioCtx;
-      if (!ac || this.audioStateListenerAttached) return;
-      const onStateChange = () => {
-        try {
-          if (this.audioCtx && this.audioCtx.state === "running") {
-            this.rebuildSilentAudioTrack();
-            this.cleanupAudioAutoUnlock();
-          }
-        } catch (_) {}
-      };
-      try {
-        (ac as any).onstatechange = onStateChange as any;
-        this.audioStateListenerAttached = true;
-      } catch (_) {}
-    } catch (_) {}
-  }
-
-  private onVisibilityChange() {
-    if (typeof document === "undefined") return;
-    const hidden = document.visibilityState === "hidden";
-    if (hidden) {
-      if (this.lastVisibleSendFps == null)
-        this.lastVisibleSendFps = this.sendFps;
-      if (this.sendFps !== 5) this.setSendFps(5);
-      if (this.backgroundIntervalId == null) {
-        this.backgroundIntervalId = setInterval(() => {
-          this.renderFrame();
-          this.requestVideoTrackFrameOnce();
-        }, 1000) as unknown as number;
-      }
-    } else {
-      if (this.backgroundIntervalId != null) {
-        clearInterval(this.backgroundIntervalId);
-        this.backgroundIntervalId = null;
-      }
-      if (
-        this.lastVisibleSendFps != null &&
-        this.sendFps !== this.lastVisibleSendFps
-      ) {
-        this.setSendFps(this.lastVisibleSendFps);
-      }
-      this.lastVisibleSendFps = null;
-    }
-  }
-
-  private blitSource(source: MuxerSource, alpha: number) {
-    if (!this.offscreenCtx) return;
-    const ctx = this.offscreenCtx;
-    if (source.kind === "custom") {
-      if (source.onFrame) source.onFrame(ctx, this.lastFrameAt);
-      return;
-    }
-    const el = source.element as HTMLCanvasElement | HTMLVideoElement;
-    const rect = this.getDrawRect(el, (source.fit as FitMode) ?? "contain");
-    if (!rect) return;
-    const prev = ctx.globalAlpha;
-    try {
-      ctx.globalAlpha = Math.max(0, Math.min(1, alpha));
-      ctx.drawImage(el as any, rect.dx, rect.dy, rect.dw, rect.dh);
-    } catch (_) {
-    } finally {
-      ctx.globalAlpha = prev;
-    }
-  }
-
-  private getDrawRect(
-    el: HTMLCanvasElement | HTMLVideoElement,
-    fit: FitMode,
-  ): { dx: number; dy: number; dw: number; dh: number } | null {
-    const canvas = this.offscreenCtx?.canvas;
-    if (!canvas) return null;
-    const canvasW = canvas.width;
-    const canvasH = canvas.height;
-    const sourceW = (el as any).videoWidth ?? el.width;
-    const sourceH = (el as any).videoHeight ?? el.height;
-    if (!sourceW || !sourceH) return null;
-    const cached = this.rectCache.get(el);
-    if (
-      cached &&
-      cached.canvasW === canvasW &&
-      cached.canvasH === canvasH &&
-      cached.sourceW === sourceW &&
-      cached.sourceH === sourceH &&
-      cached.fit === fit
-    ) {
-      const { dx, dy, dw, dh } = cached;
-      return { dx, dy, dw, dh };
-    }
-    const scale =
-      fit === "cover"
-        ? Math.max(canvasW / sourceW, canvasH / sourceH)
-        : Math.min(canvasW / sourceW, canvasH / sourceH);
-    const dw = Math.floor(sourceW * scale);
-    const dh = Math.floor(sourceH * scale);
-    const dx = Math.floor((canvasW - dw) / 2);
-    const dy = Math.floor((canvasH - dh) / 2);
-    const computed = {
-      canvasW,
-      canvasH,
-      sourceW,
-      sourceH,
-      dx,
-      dy,
-      dw,
-      dh,
-      fit,
-    };
-    this.rectCache.set(el, computed);
-    return { dx, dy, dw, dh };
-  }
-
-  private rebuildSilentAudioTrack() {
-    if (this.disableSilentAudio) return;
-    try {
-      if (!this.outputStream) return;
-      if (this.externalAudioTrackIds.size > 0) return;
-      if (this.silentAudioTrack) {
-        try {
-          this.outputStream.removeTrack(this.silentAudioTrack);
-        } catch (_) {}
-      }
-      try {
-        if (this.silentOsc) this.silentOsc.stop();
-      } catch (_) {}
-      try {
-        if (this.silentOsc) this.silentOsc.disconnect();
-      } catch (_) {}
-      try {
-        if (this.silentGain) this.silentGain.disconnect();
-      } catch (_) {}
-      this.silentOsc = null;
-      this.silentGain = null;
-      this.audioDst = null;
-      this.silentAudioTrack = null;
-      const ac = this.audioCtx;
-      if (!ac || ac.state !== "running") return;
-      this.attachAudioCtxStateListener();
-      this.silentOsc = ac.createOscillator();
-      this.silentGain = ac.createGain();
-      this.audioDst = ac.createMediaStreamDestination();
-      this.silentGain.gain.setValueAtTime(0.0001, ac.currentTime);
-      this.silentOsc.frequency.setValueAtTime(440, ac.currentTime);
-      this.silentOsc.type = "sine";
-      this.silentOsc.connect(this.silentGain);
-      this.silentGain.connect(this.audioDst);
-      this.silentOsc.start();
-      const track = this.audioDst.stream.getAudioTracks()[0];
-      if (track) {
-        this.silentAudioTrack = track;
-        try {
-          this.outputStream.addTrack(track);
-        } catch (_) {}
-      }
-    } catch (_) {}
-  }
-}
diff --git a/frontend/src/muxer/index.tsx b/frontend/src/muxer/index.tsx
deleted file mode 100644
index 2e6a56433..000000000
--- a/frontend/src/muxer/index.tsx
+++ /dev/null
@@ -1,128 +0,0 @@
-"use client";
-
-import {
-  createContext,
-  PropsWithChildren,
-  useContext,
-  useEffect,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-import { Muxer } from "./core";
-import type { MuxerApi, MuxerSource } from "./types";
-
-const MuxerCtx = createContext<MuxerApi | null>(null);
-
-export function useMuxer(): MuxerApi {
-  const ctx = useContext(MuxerCtx);
-  if (!ctx) throw new Error("useMuxer must be used within <MuxerProvider>");
-  return ctx;
-}
-
-export const MuxerProvider = ({
-  children,
-  width = 512,
-  height = 512,
-  fps: initialFps = 30,
-  crossfadeMs = 500,
-  sendFps = initialFps,
-  dpr,
-}: PropsWithChildren<{
-  width?: number;
-  height?: number;
-  fps?: number;
-  crossfadeMs?: number;
-  sendFps?: number;
-  dpr?: number;
-}>) => {
-  const engineRef = useRef<Muxer | null>(null);
-  const pendingSourceRef = useRef<MuxerSource | null>(null);
-  const [stream, setStream] = useState<MediaStream | null>(null);
-  const [size, setSize] = useState({
-    width,
-    height,
-    dpr: Math.min(
-      2,
-      typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1,
-    ),
-  });
-  const [fps, setFps] = useState(initialFps);
-  const [currentSendFps, setCurrentSendFps] = useState(sendFps);
-
-  useLayoutEffect(() => {
-    const engine = new Muxer({
-      width,
-      height,
-      fps: initialFps,
-      crossfadeMs,
-      sendFps,
-      dpr,
-      onSendFpsChange: (nfps: number) => setCurrentSendFps(nfps),
-      disableSilentAudio: true,
-    });
-    engineRef.current = engine;
-    setStream(engine.stream);
-    setSize(engine.canvasSize);
-    if (pendingSourceRef.current) {
-      try {
-        engine.setSource(pendingSourceRef.current);
-      } finally {
-        pendingSourceRef.current = null;
-      }
-    }
-    return () => {
-      engine.destroy();
-      engineRef.current = null;
-    };
-  }, []);
-
-  useEffect(() => {
-    if (!engineRef.current) return;
-    engineRef.current.setCanvasSize(size.width, size.height, size.dpr);
-    setStream(engineRef.current.stream);
-  }, [size.width, size.height, size.dpr]);
-
-  useEffect(() => {
-    if (!engineRef.current) return;
-    engineRef.current.setFps(fps);
-    setStream(engineRef.current.stream);
-  }, [fps]);
-
-  useEffect(() => {
-    if (!engineRef.current) return;
-    engineRef.current.setSendFps(currentSendFps);
-  }, [currentSendFps]);
-
-  const api = useMemo<MuxerApi>(
-    () => ({
-      getSource: () => engineRef.current?.getSource() ?? null,
-      setSource: (source: MuxerSource) => {
-        const eng = engineRef.current;
-        if (eng) eng.setSource(source);
-        else pendingSourceRef.current = source;
-      },
-      clearSource: () => engineRef.current?.clearSource(),
-      stream,
-      canvasSize: size,
-      setCanvasSize: (w: number, h: number, dpr?: number) =>
-        setSize({ width: w, height: h, dpr: dpr ?? size.dpr }),
-      fps,
-      setFps,
-      addAudioTrack: (track: MediaStreamTrack) =>
-        engineRef.current?.addAudioTrack(track),
-      removeAudioTrack: (trackId: string) =>
-        engineRef.current?.removeAudioTrack(trackId),
-      sendFps: currentSendFps,
-      setSendFps: (nfps: number) => setCurrentSendFps(nfps),
-      unlockAudio: () =>
-        engineRef.current?.unlockAudio() ?? Promise.resolve(false),
-    }),
-    [stream, size, fps, currentSendFps],
-  );
-
-  return <MuxerCtx.Provider value={api}>{children}</MuxerCtx.Provider>;
-};
-
-export type { FitMode, MuxerApi, MuxerSource } from "./types";
diff --git a/frontend/src/muxer/types.ts b/frontend/src/muxer/types.ts
deleted file mode 100644
index 3261a0725..000000000
--- a/frontend/src/muxer/types.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-export type Ctx2D = CanvasRenderingContext2D;
-
-export type FitMode = "contain" | "cover";
-
-export type ElementSource =
-  | {
-      kind: "video";
-      element: HTMLVideoElement;
-      fit?: FitMode;
-      contentHint?: "detail" | "motion" | "";
-    }
-  | {
-      kind: "canvas";
-      element: HTMLCanvasElement;
-      fit?: FitMode;
-      contentHint?: "detail" | "motion" | "";
-    };
-
-export type StartFn = (ctx: Ctx2D) => void | (() => void);
-export type FrameFn = (ctx: Ctx2D, t: number) => void;
-
-export type CustomSource = {
-  kind: "custom";
-  onStart: StartFn;
-  onFrame?: FrameFn;
-};
-
-export type MuxerSource = ElementSource | CustomSource;
-
-export type MuxerSourceSpec = {
-  id: string;
-  onStart: StartFn;
-  onFrame?: FrameFn;
-};
-
-export type CanvasSize = { width: number; height: number; dpr: number };
-
-export type MuxerApi = {
-  getSource: () => MuxerSource | null;
-  setSource: (source: MuxerSource) => void;
-  clearSource: () => void;
-  stream: MediaStream | null;
-  canvasSize: CanvasSize;
-  setCanvasSize: (w: number, h: number, dpr?: number) => void;
-  fps: number;
-  setFps: (fps: number) => void;
-  addAudioTrack: (track: MediaStreamTrack) => void;
-  removeAudioTrack: (trackId: string) => void;
-  sendFps: number;
-  setSendFps: (fps: number) => void;
-  unlockAudio: () => Promise<boolean>;
-};

From 94467251dc0fc165c773adbc1975da0e75157cf9 Mon Sep 17 00:00:00 2001
From: Max Holland <max@livepeer.org>
Date: Wed, 19 Nov 2025 17:52:15 +0000
Subject: [PATCH 06/11] Implement param updates

---
 frontend/src/components/SettingsPanel.tsx |  40 ++--
 frontend/src/data/pipelines.ts            |  23 ++-
 frontend/src/lib/WhipClient.ts            |  10 +-
 frontend/src/lib/daydream.ts              | 227 +++++++++++++++++++++-
 frontend/src/pages/StreamPage.tsx         | 185 ++++++++++++------
 frontend/src/types/index.ts               |   4 +-
 6 files changed, 401 insertions(+), 88 deletions(-)

diff --git a/frontend/src/components/SettingsPanel.tsx b/frontend/src/components/SettingsPanel.tsx
index 344c7fc53..f507afb3a 100644
--- a/frontend/src/components/SettingsPanel.tsx
+++ b/frontend/src/components/SettingsPanel.tsx
@@ -222,22 +222,24 @@ export function SettingsPanel({
         <CardTitle className="text-base font-medium">Settings</CardTitle>
       </CardHeader>
       <CardContent className="space-y-6 overflow-y-auto flex-1 [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-gray-300 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:transition-colors [&::-webkit-scrollbar-thumb:hover]:bg-gray-400">
-        <div className="space-y-2">
-          <h3 className="text-sm font-medium">Cloud mode</h3>
-          <div className="flex items-center justify-between gap-2">
-            <span className="text-sm text-foreground">Use Daydream (WebRTC)</span>
-            <Toggle
-              pressed={cloudMode}
-              onPressedChange={onCloudModeChange || (() => {})}
-              variant="outline"
-              size="sm"
-              className="h-7"
-              disabled={isStreaming || isDownloading}
-            >
-              {cloudMode ? "ON" : "OFF"}
-            </Toggle>
+        {(import.meta as any).env?.VITE_DAYDREAM_API_KEY && (
+          <div className="space-y-2">
+            <h3 className="text-sm font-medium">Cloud mode</h3>
+            <div className="flex items-center justify-between gap-2">
+              <span className="text-sm text-foreground">Use Daydream (WebRTC)</span>
+              <Toggle
+                pressed={cloudMode}
+                onPressedChange={onCloudModeChange || (() => {})}
+                variant="outline"
+                size="sm"
+                className="h-7"
+                disabled={isStreaming || isDownloading}
+              >
+                {cloudMode ? "ON" : "OFF"}
+              </Toggle>
+            </div>
           </div>
-        </div>
+        )}
 
         <div className="space-y-2">
           <h3 className="text-sm font-medium">Pipeline ID</h3>
@@ -334,7 +336,9 @@ export function SettingsPanel({
 
         {(pipelineId === "longlive" ||
           pipelineId === "streamdiffusionv2" ||
-          pipelineId === "krea-realtime-video") && (
+          pipelineId === "krea-realtime-video" ||
+          pipelineId === "sd-turbo" ||
+          pipelineId === "sdxl-turbo") && (
           <div className="space-y-4">
             <div className="space-y-2">
               <h3 className="text-sm font-medium">Parameters</h3>
@@ -555,7 +559,9 @@ export function SettingsPanel({
 
         {(pipelineId === "longlive" ||
           pipelineId === "streamdiffusionv2" ||
-          pipelineId === "krea-realtime-video") && (
+          pipelineId === "krea-realtime-video" ||
+          pipelineId === "sd-turbo" ||
+          pipelineId === "sdxl-turbo") && (
           <DenoisingStepsSlider
             value={denoisingSteps}
             onChange={onDenoisingStepsChange || (() => {})}
diff --git a/frontend/src/data/pipelines.ts b/frontend/src/data/pipelines.ts
index 1e0db7777..99c37eb61 100644
--- a/frontend/src/data/pipelines.ts
+++ b/frontend/src/data/pipelines.ts
@@ -13,6 +13,7 @@ export interface PipelineInfo {
   defaultTemporalInterpolationMethod?: "linear" | "slerp"; // Default method for temporal interpolation
   defaultTemporalInterpolationSteps?: number; // Default number of steps for temporal interpolation
   pipelineCompatibility?: PipelineCompatibility;
+  cloudModelId?: string;
 }
 
 export const PIPELINES: Record<string, PipelineInfo> = {
@@ -61,7 +62,7 @@ export const PIPELINES: Record<string, PipelineInfo> = {
     defaultTemporalInterpolationSteps: 4,
   },
   "sd-turbo": {
-    name: "SD-turbo",
+    name: "SDTurbo",
     docsUrl:
       "",
     about:
@@ -70,11 +71,27 @@ export const PIPELINES: Record<string, PipelineInfo> = {
     category: "video-input",
     defaultPrompt:
       "",
-    estimatedVram: 32,
-    requiresModels: true,
+    requiresModels: false,
+    defaultTemporalInterpolationMethod: "linear",
+    defaultTemporalInterpolationSteps: 4,
+    pipelineCompatibility: "cloud",
+    cloudModelId: "stabilityai/sd-turbo",
+  },
+  "sdxl-turbo": {
+    name: "SDXL Turbo",
+    docsUrl:
+      "",
+    about:
+      "",
+    modified: true,
+    category: "video-input",
+    defaultPrompt:
+      "",
+    requiresModels: false,
     defaultTemporalInterpolationMethod: "linear",
     defaultTemporalInterpolationSteps: 4,
     pipelineCompatibility: "cloud",
+    cloudModelId: "stabilityai/sdxl-turbo",
   },
   passthrough: {
     name: "Passthrough",
diff --git a/frontend/src/lib/WhipClient.ts b/frontend/src/lib/WhipClient.ts
index 34468158c..3f04d3db3 100644
--- a/frontend/src/lib/WhipClient.ts
+++ b/frontend/src/lib/WhipClient.ts
@@ -264,7 +264,7 @@ export class WhipClient {
   private videoSender: RTCRtpSender | null = null;
   private audioSender: RTCRtpSender | null = null;
   private videoTransceiver: RTCRtpTransceiver | null = null;
-  private audioTransceiver: RTCRtpTransceiver | null = null;
+  // private audioTransceiver: RTCRtpTransceiver | null = null;
   private abortController: AbortController | null = null;
   private isConnecting = false;
   private connectionEstablished = false;
@@ -325,7 +325,7 @@ export class WhipClient {
         this.videoSender = null;
         this.audioSender = null;
         this.videoTransceiver = null;
-        this.audioTransceiver = null;
+        // this.audioTransceiver = null;
       }
       const pc = this.createPeerConnection();
       this.pc = pc;
@@ -417,7 +417,7 @@ export class WhipClient {
     this.videoSender = null;
     this.audioSender = null;
     this.videoTransceiver = null;
-    this.audioTransceiver = null;
+    // this.audioTransceiver = null;
   }
 
   setMaxFramerate(fps?: number) {
@@ -455,7 +455,7 @@ export class WhipClient {
       const v = pc.addTransceiver("video", { direction: "sendonly" });
       const a = pc.addTransceiver("audio", { direction: "sendonly" });
       this.videoTransceiver = v;
-      this.audioTransceiver = a;
+      // this.audioTransceiver = a;
       this.videoSender = v.sender || null;
       this.audioSender = a.sender || null;
     } catch {}
@@ -521,7 +521,7 @@ export class WhipClient {
     return pc;
   }
 
-  private async attachStream(mediaStream: MediaStream, pc: RTCPeerConnection) {
+  private async attachStream(mediaStream: MediaStream, _: RTCPeerConnection) {
     const videoTrack = mediaStream.getVideoTracks()[0] || null;
     const audioTrack = mediaStream.getAudioTracks()[0] || null;
     if (this.videoSender) {
diff --git a/frontend/src/lib/daydream.ts b/frontend/src/lib/daydream.ts
index e0ed463a1..84b4a601e 100644
--- a/frontend/src/lib/daydream.ts
+++ b/frontend/src/lib/daydream.ts
@@ -2,16 +2,194 @@ const DAYDREAM_API_BASE =
   (import.meta as any).env?.VITE_DAYDREAM_API_BASE || "https://api.daydream.live";
 const DAYDREAM_API_KEY = (import.meta as any).env?.VITE_DAYDREAM_API_KEY;
 
+/**
+ * Prompt can be a single string or weighted list of (prompt, weight) tuples
+ */
+export type PromptInput =
+  | string
+  | Array<[string, number]>;
+
+/**
+ * Seed can be a single integer or weighted list of (seed, weight) tuples
+ */
+export type SeedInput =
+  | number
+  | Array<[number, number]>;
+
+/**
+ * ControlNet configuration for guided generation
+ */
+export interface ControlNetConfig {
+  /** ControlNet model identifier. Must be unique and compatible with base model */
+  model_id: string;
+  /** Strength of ControlNet's influence (0.0-1.0) */
+  conditioning_scale: number;
+  /** Preprocessor to apply to input frames */
+  preprocessor:
+    | "pose_tensorrt"
+    | "soft_edge"
+    | "canny"
+    | "depth_tensorrt"
+    | "passthrough"
+    | "feedback";
+  /** Additional parameters for the preprocessor */
+  preprocessor_params?: Record<string, unknown>;
+  /** Whether this ControlNet is active */
+  enabled: boolean;
+  /** Fraction of denoising process (0.0-1.0) when guidance begins */
+  control_guidance_start?: number;
+  /** Fraction of denoising process (0.0-1.0) when guidance ends */
+  control_guidance_end?: number;
+}
+
+/**
+ * IP Adapter configuration for style conditioning
+ */
+export interface IPAdapterConfig {
+  /** Type of IP adapter: 'faceid' for SDXL-faceid models, 'regular' for others */
+  type: "regular" | "faceid";
+  /** Whether IP adapter is enabled */
+  enabled: boolean;
+  /** Strength of IP adapter style conditioning */
+  scale: number;
+  /** Weight interpolation method for IP adapter */
+  weight_type:
+    | "linear"
+    | "ease in"
+    | "ease out"
+    | "ease in-out"
+    | "reverse in-out"
+    | "weak input"
+    | "weak output"
+    | "weak middle"
+    | "strong middle"
+    | "style transfer"
+    | "composition"
+    | "strong style transfer"
+    | "style and composition"
+    | "style transfer precise"
+    | "composition precise";
+}
+
+/**
+ * Pipeline parameters for stream updates. Structure depends on model_id.
+ * Based on Daydream API documentation for SDTurbo, SDXL, and SD1.5 models.
+ */
+export interface StreamParams {
+  /** Model identifier */
+  model_id?: string;
+  /** Text prompt describing the desired image */
+  prompt?: PromptInput;
+  /** Method for interpolating between multiple prompts */
+  prompt_interpolation_method?: "linear" | "slerp";
+  /** Whether to normalize prompt weights to sum to 1.0 */
+  normalize_prompt_weights?: boolean;
+  /** Whether to normalize seed weights to sum to 1.0 */
+  normalize_seed_weights?: boolean;
+  /** Text describing what to avoid in the generated image */
+  negative_prompt?: string;
+  /** Strength of prompt adherence. Higher values make model follow prompt more strictly */
+  guidance_scale?: number;
+  /** Delta sets per-frame denoising progress */
+  delta?: number;
+  /** Builds the full denoising schedule. Typical range 10-200, default 50 */
+  num_inference_steps?: number;
+  /** Ordered list of step indices from num_inference_steps schedule to execute per frame (1-4 elements) */
+  t_index_list?: number[];
+  /** Whether to use safety checker for content filtering */
+  use_safety_checker?: boolean;
+  /** Output image width in pixels. Must be divisible by 64 and between 384-1024 */
+  width?: number;
+  /** Output image height in pixels. Must be divisible by 64 and between 384-1024 */
+  height?: number;
+  /** Dictionary mapping LoRA model paths to their weights */
+  lora_dict?: Record<string, number> | null;
+  /** Whether to use Latent Consistency Model LoRA for faster inference */
+  use_lcm_lora?: boolean;
+  /** Identifier for the LCM LoRA model to use */
+  lcm_lora_id?: string;
+  /** Acceleration method for inference */
+  acceleration?: "none" | "xformers" | "tensorrt";
+  /** Whether to process multiple denoising steps in a single batch */
+  use_denoising_batch?: boolean;
+  /** Whether to add noise to input frames before processing */
+  do_add_noise?: boolean;
+  /** Random seed for generation */
+  seed?: SeedInput;
+  /** Method for interpolating between multiple seeds */
+  seed_interpolation_method?: "linear" | "slerp";
+  /** Whether to skip frames that are too similar to previous output */
+  enable_similar_image_filter?: boolean;
+  /** Similarity threshold for the image filter (0.0-1.0) */
+  similar_image_filter_threshold?: number;
+  /** Maximum number of consecutive frames that can be skipped */
+  similar_image_filter_max_skip_frame?: number;
+  /** List of ControlNet configurations for guided generation */
+  controlnets?: ControlNetConfig[];
+  /** IP adapter configuration (available for SDXL, SDXL-faceid, SD1.5) */
+  ip_adapter?: IPAdapterConfig;
+  /** HTTPS URL or base64-encoded data URI of style image for IP adapter */
+  ip_adapter_style_image_url?: string;
+}
+
+/**
+ * Request payload for creating a new stream via the Daydream API.
+ *
+ * @see https://api.daydream.live/v1/streams
+ */
 interface CreateStreamRequest {
-  pipeline_id: string;
-  load_params?: Record<string, unknown> | null;
+  /** Pipeline type to use for the stream. Currently only "streamdiffusion" is supported. */
+  pipeline: string;
+  /** Pipeline configuration parameters. The structure depends on the model_id selected. */
+  params?: StreamParams;
+  /** Human-readable name for the stream */
+  name?: string;
+  /** Custom RTMP URL for stream output destination */
+  output_rtmp_url?: string;
 }
 
-interface CreateStreamResponse {
+export interface CreateStreamResponse {
+  pipeline: string;
+  params: Record<string, unknown>;
   id: string;
+  stream_key: string;
+  created_at: string;
+  output_playback_id: string;
+  name?: string;
+  author?: string;
+  from_playground?: boolean;
+  gateway_host?: string;
+  is_smoke_test?: boolean;
   whip_url?: string;
-  stream_key?: string;
-  // other fields may exist; we mainly need id and whip_url
+  // other fields may exist
+}
+
+/**
+ * Request payload for updating an existing stream via the Daydream API.
+ *
+ * @see https://api.daydream.live/v1/streams/{id}
+ */
+export interface UpdateStreamRequest {
+  /** Updated pipeline parameters for the stream */
+  params?: StreamParams;
+  /** Updated prompt to apply to the stream processing */
+  prompt?: string;
+}
+
+interface UpdateStreamResponse {
+  pipeline: string;
+  params: Record<string, unknown>;
+  id: string;
+  stream_key: string;
+  created_at: string;
+  output_playback_id: string;
+  name?: string;
+  author?: string;
+  from_playground?: boolean;
+  gateway_host?: string;
+  is_smoke_test?: boolean;
+  whip_url?: string;
+  // other fields may exist
 }
 
 export interface DaydreamWebRTCOfferRequest {
@@ -45,6 +223,45 @@ export async function createCloudStream(req: CreateStreamRequest) {
   return result;
 }
 
+/**
+ * Updates pipeline parameters for an existing video processing stream.
+ *
+ * @param streamId - ID of the stream to update
+ * @param req - Update request containing params and/or prompt
+ * @returns Updated stream information
+ * @see https://api.daydream.live/v1/streams/{id}
+ */
+export async function updateCloudStream(
+  streamId: string,
+  req: UpdateStreamRequest
+): Promise<UpdateStreamResponse> {
+  if (!DAYDREAM_API_KEY) {
+    throw new Error("VITE_DAYDREAM_API_KEY is not set");
+  }
+
+  const response = await fetch(
+    `${DAYDREAM_API_BASE}/v1/streams/${encodeURIComponent(streamId)}`,
+    {
+      method: "PATCH",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${DAYDREAM_API_KEY}`,
+      },
+      body: JSON.stringify(req),
+    }
+  );
+
+  if (!response.ok) {
+    const errorText = await response.text();
+    throw new Error(
+      `Daydream update stream failed: ${response.status} ${response.statusText}: ${errorText}`
+    );
+  }
+
+  const result = (await response.json()) as UpdateStreamResponse;
+  return result;
+}
+
 export async function sendDaydreamWebRTCOffer(
   streamId: string,
   data: DaydreamWebRTCOfferRequest
diff --git a/frontend/src/pages/StreamPage.tsx b/frontend/src/pages/StreamPage.tsx
index d7ddf6aa8..a02b6c498 100644
--- a/frontend/src/pages/StreamPage.tsx
+++ b/frontend/src/pages/StreamPage.tsx
@@ -17,7 +17,7 @@ import { getDefaultDenoisingSteps, getDefaultResolution } from "../lib/utils";
 import type { PipelineId } from "../types";
 import type { PromptItem, PromptTransition } from "../lib/api";
 import { checkModelStatus, downloadPipelineModels } from "../lib/api";
-import { createCloudStream } from "../lib/daydream";
+import { createCloudStream, updateCloudStream, type CreateStreamResponse, type StreamParams } from "../lib/daydream";
 import { WhipConnection } from "../components/WhipConnection";
 import { usePlaybackUrl } from "@/hooks/usePlaybackUrl";
 
@@ -47,7 +47,7 @@ export function StreamPage() {
   // Cloud mode state (WHIP)
   const [isConnectingCloud, setIsConnectingCloud] = useState(false);
   const [isStreamingCloud, setIsStreamingCloud] = useState(false);
-  const [cloudWhipUrl, setCloudWhipUrl] = useState<string | null>(null);
+  const [activeStream, setActiveStream] = useState<CreateStreamResponse | null>(null);
   const isStartingCloudRef = useRef(false);
   const { setPlaybackUrl } = usePlaybackUrl();
 
@@ -70,8 +70,9 @@ export function StreamPage() {
   const onWhipRetryLimitExceeded = useCallback(() => {
     setIsStreamingCloud(false);
     setIsConnectingCloud(false);
-    setCloudWhipUrl(null);
-  }, [setIsStreamingCloud, setIsConnectingCloud, setCloudWhipUrl]);
+    setActiveStream(null);
+    setPlaybackUrl(null);
+  }, [setIsStreamingCloud, setIsConnectingCloud, setPlaybackUrl]);
 
   // Timeline state for left panel
   const [timelinePrompts, setTimelinePrompts] = useState<TimelinePrompt[]>([]);
@@ -122,6 +123,86 @@ export function StreamPage() {
     sendParameterUpdate,
   } = useWebRTC();
 
+  // Convert local params to Daydream API StreamParams format
+  const convertToStreamParams = useCallback((
+    prompts?: PromptItem[] | string | string[] | Array<[string, number]>,
+    denoisingSteps?: number[],
+    height?: number,
+    width?: number,
+    seed?: number
+  ): Partial<StreamParams> => {
+    const streamParams: Partial<StreamParams> = {};
+
+    // Convert denoising_step_list to t_index_list
+    // Scale from 0-1000 range to 0-50 range
+    if (denoisingSteps && Array.isArray(denoisingSteps)) {
+      streamParams.t_index_list = [...denoisingSteps]
+        .reverse()
+        .map(step => Math.round(step * (50 / 1000)));
+    }
+
+    // Map prompts - convert PromptItem[] to [string, number][]
+    if (prompts) {
+      if (Array.isArray(prompts) && prompts.length > 0) {
+        // Handle PromptItem[] format (most common case)
+        if (typeof prompts[0] === 'object' && prompts[0] !== null && 'text' in prompts[0]) {
+          const converted = (prompts as PromptItem[])
+            .map(item => [item.text, item.weight] as [string, number])
+            .filter(([text]) => text.trim() !== '');
+          if (converted.length > 0) {
+            streamParams.prompt = converted;
+          }
+        } else if (Array.isArray(prompts[0])) {
+          // Already in tuple format [string, number][]
+          const filtered = (prompts as Array<[string, number]>).filter(([text]) => text.trim() !== '');
+          if (filtered.length > 0) {
+            streamParams.prompt = filtered;
+          }
+        } else if (typeof prompts[0] === 'string' && prompts[0].trim() !== '') {
+          // string[] - use first non-empty string
+          streamParams.prompt = prompts[0];
+        }
+      } else if (typeof prompts === 'string' && prompts.trim() !== '') {
+        streamParams.prompt = prompts;
+      }
+    }
+
+    // Include height, width, and seed if provided
+    if (height !== undefined) {
+      streamParams.height = height;
+    }
+    if (width !== undefined) {
+      streamParams.width = width;
+    }
+    if (seed !== undefined) {
+      streamParams.seed = seed;
+    }
+
+    return streamParams;
+  }, []);
+
+  // Handle parameter updates - cloud mode vs local mode
+  const handleParameterUpdate = useCallback((params: Parameters<typeof sendParameterUpdate>[0]) => {
+    if (settings.cloudMode) {
+      if (!activeStream?.id) {
+        return;
+      }
+
+      // Convert local params format to Daydream API format
+      const streamParams = convertToStreamParams(
+        'prompts' in params ? params.prompts : undefined,
+        'denoising_step_list' in params && Array.isArray(params.denoising_step_list) ? params.denoising_step_list : undefined,
+      );
+
+      updateCloudStream(activeStream.id, {
+        params: streamParams as StreamParams,
+      });
+
+    } else {
+      sendParameterUpdate(params);
+    }
+  }, [settings.cloudMode, sendParameterUpdate, activeStream, convertToStreamParams]);
+
   // Get WebRTC stats for FPS
   const webrtcStats = useWebRTCStats({
     peerConnectionRef,
@@ -157,7 +238,7 @@ export function StreamPage() {
     }
 
     // Send transition to backend
-    sendParameterUpdate({
+    handleParameterUpdate({
       transition,
     });
   };
@@ -167,6 +248,12 @@ export function StreamPage() {
     if (isStreaming) {
       stopStream();
     }
+    if (isStreamingCloud) {
+      setActiveStream(null);
+      setIsStreamingCloud(false);
+      setIsConnectingCloud(false);
+      setPlaybackUrl(null);
+    }
 
     // Check if we're switching from no-video-input to video-input pipeline
     const currentPipelineCategory = PIPELINES[settings.pipelineId]?.category;
@@ -297,7 +384,7 @@ export function StreamPage() {
   const handleDenoisingStepsChange = (denoisingSteps: number[]) => {
     updateSettings({ denoisingSteps });
     // Send denoising steps update to backend
-    sendParameterUpdate({
+    handleParameterUpdate({
       denoising_step_list: denoisingSteps,
     });
   };
@@ -305,7 +392,7 @@ export function StreamPage() {
   const handleNoiseScaleChange = (noiseScale: number) => {
     updateSettings({ noiseScale });
     // Send noise scale update to backend
-    sendParameterUpdate({
+    handleParameterUpdate({
       noise_scale: noiseScale,
     });
   };
@@ -313,7 +400,7 @@ export function StreamPage() {
   const handleNoiseControllerChange = (enabled: boolean) => {
     updateSettings({ noiseController: enabled });
     // Send noise controller update to backend
-    sendParameterUpdate({
+    handleParameterUpdate({
       noise_controller: enabled,
     });
   };
@@ -321,7 +408,7 @@ export function StreamPage() {
   const handleManageCacheChange = (enabled: boolean) => {
     updateSettings({ manageCache: enabled });
     // Send manage cache update to backend
-    sendParameterUpdate({
+    handleParameterUpdate({
       manage_cache: enabled,
     });
   };
@@ -334,14 +421,14 @@ export function StreamPage() {
   const handleKvCacheAttentionBiasChange = (bias: number) => {
     updateSettings({ kvCacheAttentionBias: bias });
     // Send KV cache attention bias update to backend
-    sendParameterUpdate({
+    handleParameterUpdate({
       kv_cache_attention_bias: bias,
     });
   };
 
   const handleResetCache = () => {
     // Send reset cache command to backend
-    sendParameterUpdate({
+    handleParameterUpdate({
       reset_cache: true,
     });
   };
@@ -354,7 +441,7 @@ export function StreamPage() {
 
     // Also send the updated parameters to the backend immediately
     // Preserve the full blend while live
-    sendParameterUpdate({
+    handleParameterUpdate({
       prompts,
       prompt_interpolation_method: interpolationMethod,
       denoising_step_list: settings.denoisingSteps || [700, 500],
@@ -418,7 +505,7 @@ export function StreamPage() {
   const handlePlayPauseToggle = () => {
     const newPausedState = !settings.paused;
     updateSettings({ paused: newPausedState });
-    sendParameterUpdate({
+    handleParameterUpdate({
       paused: newPausedState,
     });
 
@@ -460,9 +547,10 @@ export function StreamPage() {
       }
     } else {
       if (isStreamingCloud) {
-        setCloudWhipUrl(null);
+        setActiveStream(null);
         setIsStreamingCloud(false);
         setIsConnectingCloud(false);
+        setPlaybackUrl(null);
         return true;
       }
       // Ignore new start requests while a cloud connection is being established
@@ -477,43 +565,27 @@ export function StreamPage() {
     try {
       // Cloud mode via WHIP
       if (settings.cloudMode) {
-        // Prepare load parameters based on pipeline
-        let loadParams: Record<string, unknown> | null = null;
         const resolution = settings.resolution || videoResolution;
-        if (pipelineIdToUse === "streamdiffusionv2" && resolution) {
-          loadParams = {
-            height: resolution.height,
-            width: resolution.width,
-            seed: settings.seed ?? 42,
-          };
-        } else if (pipelineIdToUse === "passthrough" && resolution) {
-          loadParams = {
-            height: resolution.height,
-            width: resolution.width,
-          };
-        } else if (pipelineIdToUse === "longlive" && resolution) {
-          loadParams = {
-            height: resolution.height,
-            width: resolution.width,
-            seed: settings.seed ?? 42,
-          };
-        } else if (settings.pipelineId === "krea-realtime-video" && resolution) {
-          loadParams = {
-            height: resolution.height,
-            width: resolution.width,
-            seed: settings.seed ?? 42,
-            quantization:
-              settings.quantization !== undefined
-                ? settings.quantization
-                : "fp8_e4m3fn",
-          };
-        }
+
+        // Convert prompts and denoising steps to StreamParams format
+        const streamParams = convertToStreamParams(
+          promptItems,
+          settings.denoisingSteps,
+          resolution?.height,
+          resolution?.width,
+          settings.seed ?? 42
+        );
+
+        let params: StreamParams = {
+          model_id: PIPELINES[pipelineIdToUse]?.cloudModelId as StreamParams["model_id"],
+          ...streamParams,
+        };
 
         setIsConnectingCloud(true);
         isStartingCloudRef.current = true;
         const created = await createCloudStream({
-          pipeline_id: 'pip_SD-turbo',
-          load_params: loadParams || undefined,
+          pipeline: 'streamdiffusion',
+          params: params,
         });
 
         const needsVideoInput =
@@ -533,8 +605,8 @@ export function StreamPage() {
           return false;
         }
 
-        // Mount WHIP connection component via state; it will manage the connection lifecycle
-        setCloudWhipUrl(endpoint);
+        // Store the full stream response for access to all fields
+        setActiveStream(created);
 
         updateSettings({ paused: false });
         // Keep connecting state true until RTCPeerConnection reports connected
@@ -771,7 +843,7 @@ export function StreamPage() {
             />
           </div>
           {/* Timeline area - compact, always visible */}
-          <div className="flex-shrink-0 mt-2">
+          <div className={`flex-shrink-0 mt-2 ${(settings?.cloudMode ?? false) ? 'hidden' : ''}`}>
             <PromptInputWithTimeline
               currentPrompt={promptItems[0]?.text || ""}
               currentPromptItems={promptItems}
@@ -784,7 +856,7 @@ export function StreamPage() {
 
                 // Send to backend - use transition if streaming and transition steps > 0
                 if (isStreaming && transitionSteps > 0) {
-                  sendParameterUpdate({
+                  handleParameterUpdate({
                     transition: {
                       target_prompts: prompts,
                       num_steps: transitionSteps,
@@ -794,7 +866,7 @@ export function StreamPage() {
                   });
                 } else {
                   // Send direct prompts without transition
-                  sendParameterUpdate({
+                  handleParameterUpdate({
                     prompts,
                     prompt_interpolation_method: interpolationMethod,
                     denoising_step_list: settings.denoisingSteps || [700, 500],
@@ -828,7 +900,7 @@ export function StreamPage() {
 
                 // Send to backend - use transition if streaming and transition steps > 0
                 if (isStreaming && effectiveTransitionSteps > 0) {
-                  sendParameterUpdate({
+                  handleParameterUpdate({
                     transition: {
                       target_prompts: prompts,
                       num_steps: effectiveTransitionSteps,
@@ -838,7 +910,7 @@ export function StreamPage() {
                   });
                 } else {
                   // Send direct prompts without transition
-                  sendParameterUpdate({
+                  handleParameterUpdate({
                     prompts,
                     prompt_interpolation_method: interpolationMethod,
                     denoising_step_list: settings.denoisingSteps || [700, 500],
@@ -894,7 +966,7 @@ export function StreamPage() {
                   stopStream();
                 }
               if (isStreamingCloud) {
-                setCloudWhipUrl(null);
+                setActiveStream(null);
                 setIsStreamingCloud(false);
                 setIsConnectingCloud(false);
                 setPlaybackUrl(null);
@@ -942,13 +1014,12 @@ export function StreamPage() {
         />
       )}
       {/* WHIP Connection Mount Point (cloud mode) */}
-      {settings.cloudMode && cloudWhipUrl ? (
+      {settings.cloudMode && activeStream?.whip_url ? (
         <WhipConnection
-          whipUrl={cloudWhipUrl}
+          whipUrl={activeStream.whip_url}
           stream={localStream ?? null}
           onConnectionStateChange={onWhipConnectionStateChange}
           onRetryLimitExceeded={onWhipRetryLimitExceeded}
-          debugStats  // TODO remove later
         />
       ) : null}
     </div>
diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts
index f3b8cda97..e1e385b1d 100644
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@@ -3,7 +3,9 @@ export type PipelineId =
   | "passthrough"
   | "vod"
   | "longlive"
-  | "krea-realtime-video";
+  | "krea-realtime-video"
+  | "sd-turbo"
+  | "sdxl-turbo";
 
 export interface SystemMetrics {
   cpu: number;

From e88ef51b99525064fe5d7a07ab611b8d05f90f21 Mon Sep 17 00:00:00 2001
From: Max Holland <max@livepeer.org>
Date: Fri, 21 Nov 2025 16:26:18 +0000
Subject: [PATCH 07/11] debugging timeline

---
 .../components/PromptInputWithTimeline.tsx    | 47 +++++++++++++++++--
 frontend/src/data/pipelines.ts                |  4 +-
 frontend/src/hooks/useTimelinePlayback.ts     |  9 ++++
 frontend/src/pages/StreamPage.tsx             | 10 ++--
 frontend/src/types/index.ts                   |  3 +-
 .../src/utils/timelinePromptSubmission.ts     | 22 +++++++++
 6 files changed, 82 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/PromptInputWithTimeline.tsx b/frontend/src/components/PromptInputWithTimeline.tsx
index cdbb6efcf..cc1d2f6ca 100644
--- a/frontend/src/components/PromptInputWithTimeline.tsx
+++ b/frontend/src/components/PromptInputWithTimeline.tsx
@@ -107,13 +107,34 @@ export function PromptInputWithTimeline({
   } = useTimelinePlayback({
     onPromptChange: onPromptSubmit,
     onPromptItemsChange: onPromptItemsSubmit,
-    isStreaming,
+    isStreaming: isStreaming || isStreamingCloud,
     isVideoPaused,
     onPromptsChange: onTimelinePromptsChange,
     onCurrentTimeChange: onTimelineCurrentTimeChange,
     onPlayingChange: onTimelinePlayingChange,
   });
 
+  // Debug: Log prompt changes
+  useEffect(() => {
+    console.log("[PromptInputWithTimeline] Prompts changed:", {
+      prompts,
+      promptCount: prompts.length,
+      isStreaming,
+      isStreamingCloud,
+      disabled,
+    });
+  }, [prompts, isStreaming, isStreamingCloud, disabled]);
+
+  // Debug: Log when callbacks are called
+  useEffect(() => {
+    console.log("[PromptInputWithTimeline] Callbacks:", {
+      hasOnPromptSubmit: !!onPromptSubmit,
+      hasOnPromptItemsSubmit: !!onPromptItemsSubmit,
+      isStreaming,
+      isStreamingCloud,
+    });
+  }, [onPromptSubmit, onPromptItemsSubmit, isStreaming, isStreamingCloud]);
+
   // Compute actual playing state - timeline is playing AND video is not paused
   const isActuallyPlaying = isPlaying && !isVideoPaused;
 
@@ -206,10 +227,25 @@ export function PromptInputWithTimeline({
 
   // Reset hasStartedPlayback when stream stops
   React.useEffect(() => {
-    if (!isStreaming) {
+    if (!isStreaming && !isStreamingCloud) {
       setHasStartedPlayback(false);
     }
-  }, [isStreaming]);
+  }, [isStreaming, isStreamingCloud]);
+
+  // Debug: Log component props and state
+  useEffect(() => {
+    console.log("[PromptInputWithTimeline] Component state:", {
+      disabled,
+      isStreaming,
+      isStreamingCloud,
+      isVideoPaused,
+      isActuallyPlaying,
+      promptsCount: prompts.length,
+      currentTime,
+      hasOnPromptSubmit: !!onPromptSubmit,
+      hasOnPromptItemsSubmit: !!onPromptItemsSubmit,
+    });
+  }, [disabled, isStreaming, isStreamingCloud, isVideoPaused, isActuallyPlaying, prompts.length, currentTime, onPromptSubmit, onPromptItemsSubmit]);
 
   const buildLivePromptFromCurrent = useCallback(
     (start: number, end: number): TimelinePrompt => {
@@ -287,12 +323,13 @@ export function PromptInputWithTimeline({
 
     const isAtEnd = isAtTimelineEnd();
 
-    if (isAtEnd && !(settings?.cloudMode ?? false)) { // Don't think we need to create another stream for cloud mode
+    if (isAtEnd) {
       setIsLive(true);
       onLiveStateChange?.(true);
 
       // Only create a new live prompt if there are no prompts at all in the timeline
       if (prompts.length === 0) {
+        console.log("[PromptInputWithTimeline] Creating new live prompt ", prompts);
         const streamStartedAgain = await initializeStream();
         if (streamStartedAgain) {
           const livePrompt = buildLivePromptFromCurrent(
@@ -565,7 +602,7 @@ export function PromptInputWithTimeline({
         settings={settings}
         onSettingsImport={onSettingsImport}
         onScrollToTime={scrollFn => setScrollToTimeFn(() => scrollFn)}
-        isStreaming={isStreaming}
+        isStreaming={isStreaming || isStreamingCloud}
         isDownloading={isDownloading}
       />
     </div>
diff --git a/frontend/src/data/pipelines.ts b/frontend/src/data/pipelines.ts
index 88a869379..2a3e50d79 100644
--- a/frontend/src/data/pipelines.ts
+++ b/frontend/src/data/pipelines.ts
@@ -74,7 +74,7 @@ export const PIPELINES: Record<string, PipelineInfo> = {
     modified: true,
     category: "video-input",
     defaultPrompt:
-      "",
+      "A dog in the grass looking around, photorealistic",
     requiresModels: false,
     defaultTemporalInterpolationMethod: "linear",
     defaultTemporalInterpolationSteps: 4,
@@ -90,7 +90,7 @@ export const PIPELINES: Record<string, PipelineInfo> = {
     modified: true,
     category: "video-input",
     defaultPrompt:
-      "",
+      "A dog in the grass looking around, photorealistic",
     requiresModels: false,
     defaultTemporalInterpolationMethod: "linear",
     defaultTemporalInterpolationSteps: 4,
diff --git a/frontend/src/hooks/useTimelinePlayback.ts b/frontend/src/hooks/useTimelinePlayback.ts
index 504036c98..b95178af1 100644
--- a/frontend/src/hooks/useTimelinePlayback.ts
+++ b/frontend/src/hooks/useTimelinePlayback.ts
@@ -57,6 +57,14 @@ const createUpdateTimeFunction = (
       (activePrompt.id !== lastAppliedPromptIdRef.current ||
         activePrompt.text !== lastAppliedPromptTextRef.current)
     ) {
+      console.log("[useTimelinePlayback] Active prompt changed:", {
+        promptId: activePrompt.id,
+        text: activePrompt.text,
+        previousId: lastAppliedPromptIdRef.current,
+        previousText: lastAppliedPromptTextRef.current,
+        hasOnPromptChange: !!optionsRef.current?.onPromptChange,
+        hasOnPromptItemsChange: !!optionsRef.current?.onPromptItemsChange,
+      });
       submitTimelinePrompt(activePrompt, {
         onPromptSubmit: optionsRef.current?.onPromptChange,
         onPromptItemsSubmit: optionsRef.current?.onPromptItemsChange,
@@ -65,6 +73,7 @@ const createUpdateTimeFunction = (
       lastAppliedPromptTextRef.current = activePrompt.text;
     } else if (!activePrompt && lastAppliedPromptIdRef.current !== null) {
       // No active prompt, reset the last applied prompt
+      console.log("[useTimelinePlayback] No active prompt, resetting");
       lastAppliedPromptIdRef.current = null;
       lastAppliedPromptTextRef.current = null;
     }
diff --git a/frontend/src/pages/StreamPage.tsx b/frontend/src/pages/StreamPage.tsx
index 0eb9ab6f9..c3522bb6e 100644
--- a/frontend/src/pages/StreamPage.tsx
+++ b/frontend/src/pages/StreamPage.tsx
@@ -887,7 +887,7 @@ export function StreamPage() {
             />
           </div>
           {/* Timeline area - compact, always visible */}
-          <div className={`flex-shrink-0 mt-2 ${(settings?.cloudMode ?? false) ? 'hidden' : ''}`}>
+          <div className={`flex-shrink-0 mt-2`}>
             <PromptInputWithTimeline
               currentPrompt={promptItems[0]?.text || ""}
               currentPromptItems={promptItems}
@@ -898,8 +898,8 @@ export function StreamPage() {
                 const prompts = [{ text, weight: 100 }];
                 setPromptItems(prompts);
 
-                // Send to backend - use transition if streaming and transition steps > 0
-                if (isStreaming && transitionSteps > 0) {
+                // Send to backend - use transition if streaming (local or cloud) and transition steps > 0
+                if ((isStreaming || isStreamingCloud) && transitionSteps > 0) {
                   handleParameterUpdate({
                     transition: {
                       target_prompts: prompts,
@@ -942,8 +942,8 @@ export function StreamPage() {
                   );
                 }
 
-                // Send to backend - use transition if streaming and transition steps > 0
-                if (isStreaming && effectiveTransitionSteps > 0) {
+                // Send to backend - use transition if streaming (local or cloud) and transition steps > 0
+                if ((isStreaming || isStreamingCloud) && effectiveTransitionSteps > 0) {
                   handleParameterUpdate({
                     transition: {
                       target_prompts: prompts,
diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts
index a43069d14..8e495a211 100644
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@@ -4,7 +4,8 @@ export type PipelineId =
   | "longlive"
   | "krea-realtime-video"
   | "sd-turbo"
-  | "sdxl-turbo";
+  | "sdxl-turbo"
+  | "sd15";
 
 export interface SystemMetrics {
   cpu: number;
diff --git a/frontend/src/utils/timelinePromptSubmission.ts b/frontend/src/utils/timelinePromptSubmission.ts
index e4a5032fb..255dedbec 100644
--- a/frontend/src/utils/timelinePromptSubmission.ts
+++ b/frontend/src/utils/timelinePromptSubmission.ts
@@ -23,6 +23,15 @@ export function submitTimelinePrompt(
   prompt: TimelinePrompt,
   callbacks: PromptSubmissionCallbacks
 ): void {
+  console.log("[submitTimelinePrompt] Submitting prompt:", {
+    promptId: prompt.id,
+    text: prompt.text,
+    hasPrompts: !!prompt.prompts,
+    promptsLength: prompt.prompts?.length || 0,
+    hasOnPromptItemsSubmit: !!callbacks.onPromptItemsSubmit,
+    hasOnPromptSubmit: !!callbacks.onPromptSubmit,
+  });
+
   if (
     prompt.prompts &&
     prompt.prompts.length > 0 &&
@@ -32,6 +41,11 @@ export function submitTimelinePrompt(
       text: p.text,
       weight: p.weight,
     }));
+    console.log("[submitTimelinePrompt] Calling onPromptItemsSubmit with:", {
+      promptItems,
+      transitionSteps: prompt.transitionSteps,
+      temporalInterpolationMethod: prompt.temporalInterpolationMethod,
+    });
     callbacks.onPromptItemsSubmit(
       promptItems,
       prompt.transitionSteps,
@@ -39,12 +53,20 @@ export function submitTimelinePrompt(
     );
   } else if (callbacks.onPromptItemsSubmit) {
     const promptItems: PromptItem[] = [{ text: prompt.text, weight: 100 }];
+    console.log("[submitTimelinePrompt] Calling onPromptItemsSubmit (fallback) with:", {
+      promptItems,
+      transitionSteps: prompt.transitionSteps,
+      temporalInterpolationMethod: prompt.temporalInterpolationMethod,
+    });
     callbacks.onPromptItemsSubmit(
       promptItems,
       prompt.transitionSteps,
       prompt.temporalInterpolationMethod
     );
   } else if (callbacks.onPromptSubmit) {
+    console.log("[submitTimelinePrompt] Calling onPromptSubmit with:", prompt.text);
     callbacks.onPromptSubmit(prompt.text);
+  } else {
+    console.warn("[submitTimelinePrompt] No callback available to submit prompt!");
   }
 }

From d11c181270995a4c4d91594dc4e9efca15abc4e9 Mon Sep 17 00:00:00 2001
From: Max Holland <max@livepeer.org>
Date: Mon, 24 Nov 2025 17:28:47 +0000
Subject: [PATCH 08/11] Start on getting timeline working for cloud

---
 .../components/PromptInputWithTimeline.tsx    | 72 +++++++++----------
 frontend/src/components/VideoOutput.tsx       | 13 ++--
 frontend/src/hooks/useTimelinePlayback.ts     |  1 +
 frontend/src/pages/StreamPage.tsx             | 11 ++-
 4 files changed, 50 insertions(+), 47 deletions(-)

diff --git a/frontend/src/components/PromptInputWithTimeline.tsx b/frontend/src/components/PromptInputWithTimeline.tsx
index cc1d2f6ca..a7ffdc761 100644
--- a/frontend/src/components/PromptInputWithTimeline.tsx
+++ b/frontend/src/components/PromptInputWithTimeline.tsx
@@ -19,7 +19,6 @@ interface PromptInputWithTimelineProps {
   ) => void;
   disabled?: boolean;
   isStreaming?: boolean;
-  isStreamingCloud?: boolean;
   isVideoPaused?: boolean;
   timelineRef?: React.RefObject<{
     getCurrentTimelinePrompt: () => string;
@@ -55,7 +54,6 @@ export function PromptInputWithTimeline({
   onPromptItemsSubmit,
   disabled = false,
   isStreaming = false,
-  isStreamingCloud = false,
   isVideoPaused = false,
   timelineRef,
   selectedPrompt: _selectedPrompt = null,
@@ -107,7 +105,7 @@ export function PromptInputWithTimeline({
   } = useTimelinePlayback({
     onPromptChange: onPromptSubmit,
     onPromptItemsChange: onPromptItemsSubmit,
-    isStreaming: isStreaming || isStreamingCloud,
+    isStreaming,
     isVideoPaused,
     onPromptsChange: onTimelinePromptsChange,
     onCurrentTimeChange: onTimelineCurrentTimeChange,
@@ -115,25 +113,23 @@ export function PromptInputWithTimeline({
   });
 
   // Debug: Log prompt changes
-  useEffect(() => {
-    console.log("[PromptInputWithTimeline] Prompts changed:", {
-      prompts,
-      promptCount: prompts.length,
-      isStreaming,
-      isStreamingCloud,
-      disabled,
-    });
-  }, [prompts, isStreaming, isStreamingCloud, disabled]);
+  // useEffect(() => {
+  //   console.log("[PromptInputWithTimeline] Prompts changed:", {
+  //     prompts,
+  //     promptCount: prompts.length,
+  //     isStreaming,
+  //     disabled,
+  //   });
+  // }, [prompts, isStreaming, disabled]);
 
   // Debug: Log when callbacks are called
-  useEffect(() => {
-    console.log("[PromptInputWithTimeline] Callbacks:", {
-      hasOnPromptSubmit: !!onPromptSubmit,
-      hasOnPromptItemsSubmit: !!onPromptItemsSubmit,
-      isStreaming,
-      isStreamingCloud,
-    });
-  }, [onPromptSubmit, onPromptItemsSubmit, isStreaming, isStreamingCloud]);
+  // useEffect(() => {
+  //   console.log("[PromptInputWithTimeline] Callbacks:", {
+  //     hasOnPromptSubmit: !!onPromptSubmit,
+  //     hasOnPromptItemsSubmit: !!onPromptItemsSubmit,
+  //     isStreaming,
+  //   });
+  // }, [onPromptSubmit, onPromptItemsSubmit, isStreaming]);
 
   // Compute actual playing state - timeline is playing AND video is not paused
   const isActuallyPlaying = isPlaying && !isVideoPaused;
@@ -227,25 +223,24 @@ export function PromptInputWithTimeline({
 
   // Reset hasStartedPlayback when stream stops
   React.useEffect(() => {
-    if (!isStreaming && !isStreamingCloud) {
+    if (!isStreaming) {
       setHasStartedPlayback(false);
     }
-  }, [isStreaming, isStreamingCloud]);
+  }, [isStreaming]);
 
   // Debug: Log component props and state
-  useEffect(() => {
-    console.log("[PromptInputWithTimeline] Component state:", {
-      disabled,
-      isStreaming,
-      isStreamingCloud,
-      isVideoPaused,
-      isActuallyPlaying,
-      promptsCount: prompts.length,
-      currentTime,
-      hasOnPromptSubmit: !!onPromptSubmit,
-      hasOnPromptItemsSubmit: !!onPromptItemsSubmit,
-    });
-  }, [disabled, isStreaming, isStreamingCloud, isVideoPaused, isActuallyPlaying, prompts.length, currentTime, onPromptSubmit, onPromptItemsSubmit]);
+  // useEffect(() => {
+  //   console.log("[PromptInputWithTimeline] Component state:", {
+  //     disabled,
+  //     isStreaming,
+  //     isVideoPaused,
+  //     isActuallyPlaying,
+  //     promptsCount: prompts.length,
+  //     currentTime,
+  //     hasOnPromptSubmit: !!onPromptSubmit,
+  //     hasOnPromptItemsSubmit: !!onPromptItemsSubmit,
+  //   });
+  // }, [disabled, isStreaming, isVideoPaused, isActuallyPlaying, prompts.length, currentTime, onPromptSubmit, onPromptItemsSubmit]);
 
   const buildLivePromptFromCurrent = useCallback(
     (start: number, end: number): TimelinePrompt => {
@@ -284,7 +279,7 @@ export function PromptInputWithTimeline({
 
   // Initialize stream if needed
   const initializeStream = useCallback(async (): Promise<boolean> => {
-    if (!isStreaming && !isStreamingCloud && onStartStream) {
+    if (!isStreaming && onStartStream) {
       const result = await onStartStream();
       const started = result === true; // Treat undefined/void as false
       if (started) {
@@ -294,7 +289,7 @@ export function PromptInputWithTimeline({
       return false;
     }
     return true; // Already streaming
-  }, [isStreaming, isStreamingCloud, onStartStream]);
+  }, [isStreaming, onStartStream]);
 
   // Check if at end of timeline
   const isAtTimelineEnd = useCallback(() => {
@@ -327,6 +322,7 @@ export function PromptInputWithTimeline({
       setIsLive(true);
       onLiveStateChange?.(true);
 
+      console.log("[PromptInputWithTimeline] handleStartPlayback", prompts.length);
       // Only create a new live prompt if there are no prompts at all in the timeline
       if (prompts.length === 0) {
         console.log("[PromptInputWithTimeline] Creating new live prompt ", prompts);
@@ -602,7 +598,7 @@ export function PromptInputWithTimeline({
         settings={settings}
         onSettingsImport={onSettingsImport}
         onScrollToTime={scrollFn => setScrollToTimeFn(() => scrollFn)}
-        isStreaming={isStreaming || isStreamingCloud}
+        isStreaming={isStreaming}
         isDownloading={isDownloading}
       />
     </div>
diff --git a/frontend/src/components/VideoOutput.tsx b/frontend/src/components/VideoOutput.tsx
index 8a4f1a2b1..d616b1378 100644
--- a/frontend/src/components/VideoOutput.tsx
+++ b/frontend/src/components/VideoOutput.tsx
@@ -47,7 +47,7 @@ export function VideoOutput({
   // Listen for video playing event to notify parent
   useEffect(() => {
     const video = videoRef.current;
-    if (!video || !remoteStream) return;
+    if (!video || !(remoteStream || playbackUrl)) return;
 
     const handlePlaying = () => {
       onVideoPlaying?.();
@@ -64,10 +64,11 @@ export function VideoOutput({
     return () => {
       video.removeEventListener("playing", handlePlaying);
     };
-  }, [onVideoPlaying, remoteStream]);
+  }, [onVideoPlaying, remoteStream, playbackUrl]);
 
   const triggerPlayPause = useCallback(() => {
-    if (onPlayPauseToggle && remoteStream) {
+    // Allow play/pause when we have either a direct MediaStream or a cloud playback URL
+    if (onPlayPauseToggle && (remoteStream || playbackUrl)) {
       onPlayPauseToggle();
 
       // Show overlay and immediately start fade out animation
@@ -89,7 +90,7 @@ export function VideoOutput({
         setIsFadingOut(false);
       }, 400);
     }
-  }, [onPlayPauseToggle, remoteStream]);
+  }, [onPlayPauseToggle, remoteStream, playbackUrl]);
 
   const handleVideoClick = () => {
     triggerPlayPause();
@@ -99,7 +100,7 @@ export function VideoOutput({
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
       // Only trigger if spacebar is pressed and stream is active
-      if (e.code === "Space" && remoteStream) {
+      if (e.code === "Space" && (remoteStream || playbackUrl)) {
         // Don't trigger if user is typing in an input/textarea/select or any contenteditable element
         const target = e.target as HTMLElement;
         const isInputFocused =
@@ -120,7 +121,7 @@ export function VideoOutput({
     return () => {
       window.removeEventListener("keydown", handleKeyDown);
     };
-  }, [remoteStream, triggerPlayPause]);
+  }, [remoteStream, playbackUrl, triggerPlayPause]);
 
   // Cleanup timeout on unmount
   useEffect(() => {
diff --git a/frontend/src/hooks/useTimelinePlayback.ts b/frontend/src/hooks/useTimelinePlayback.ts
index b95178af1..52dbf6436 100644
--- a/frontend/src/hooks/useTimelinePlayback.ts
+++ b/frontend/src/hooks/useTimelinePlayback.ts
@@ -178,6 +178,7 @@ export function useTimelinePlayback(options?: UseTimelinePlaybackOptions) {
 
   // Start playback
   const startPlayback = useCallback(() => {
+    console.log("[useTimelinePlayback] Starting playback");
     setIsPlaying(true);
     startTimeRef.current = performance.now() - currentTime * 1000;
 
diff --git a/frontend/src/pages/StreamPage.tsx b/frontend/src/pages/StreamPage.tsx
index c3522bb6e..71c097813 100644
--- a/frontend/src/pages/StreamPage.tsx
+++ b/frontend/src/pages/StreamPage.tsx
@@ -195,14 +195,17 @@ export function StreamPage() {
 
   // Handle parameter updates - cloud mode vs local mode
   const handleParameterUpdate = useCallback((params: Parameters<typeof sendParameterUpdate>[0]) => {
+    console.trace("[StreamPage] handleParameterUpdate", params);
     if (settings.cloudMode) {
       if (!activeStream?.id) {
         return;
       }
 
+      const prompts = params.prompts || params.transition?.target_prompts || undefined;
+
       // Convert local params format to Daydream API format
       const streamParams = convertToStreamParams(
-        'prompts' in params ? params.prompts : undefined,
+        prompts,
         'denoising_step_list' in params && Array.isArray(params.denoising_step_list) ? params.denoising_step_list : undefined,
       );
 
@@ -475,6 +478,7 @@ export function StreamPage() {
   };
 
   const handleLivePromptSubmit = (prompts: PromptItem[]) => {
+    console.log("[StreamPage] handleLivePromptSubmit", prompts);
     // Use the timeline ref to submit the prompt
     if (timelineRef.current) {
       timelineRef.current.submitLivePrompt(prompts);
@@ -894,6 +898,7 @@ export function StreamPage() {
               transitionSteps={transitionSteps}
               temporalInterpolationMethod={temporalInterpolationMethod}
               onPromptSubmit={text => {
+                console.log("[StreamPage] onPromptSubmit", text);
                 // Update the left panel's prompt state to reflect current timeline prompt
                 const prompts = [{ text, weight: 100 }];
                 setPromptItems(prompts);
@@ -922,6 +927,7 @@ export function StreamPage() {
                 blockTransitionSteps,
                 blockTemporalInterpolationMethod
               ) => {
+                console.log("[StreamPage] onPromptItemsSubmit", prompts);
                 // Update the left panel's prompt state to reflect current timeline prompt blend
                 setPromptItems(prompts);
 
@@ -967,7 +973,7 @@ export function StreamPage() {
                 isConnecting ||
                 showDownloadDialog
               }
-              isStreaming={isStreaming}
+              isStreaming={isStreaming || isStreamingCloud}
               isVideoPaused={settings.paused}
               timelineRef={timelineRef}
               onLiveStateChange={setIsLive}
@@ -988,7 +994,6 @@ export function StreamPage() {
               onTimelineCurrentTimeChange={handleTimelineCurrentTimeChange}
               onTimelinePlayingChange={handleTimelinePlayingChange}
               isDownloading={isDownloading}
-              isStreamingCloud={isStreamingCloud}
             />
           </div>
         </div>

From 7becd700e8261f5e1c5322e4a2d503e24ac72788 Mon Sep 17 00:00:00 2001
From: Max Holland <max@livepeer.org>
Date: Tue, 25 Nov 2025 15:24:20 +0000
Subject: [PATCH 09/11] Remove debug logs

---
 .../components/PromptInputWithTimeline.tsx    | 33 -------------------
 frontend/src/components/VideoOutput.tsx       |  1 -
 frontend/src/components/WhipConnection.tsx    |  1 +
 frontend/src/hooks/useTimelinePlayback.ts     | 10 ------
 frontend/src/lib/WhepClient.ts                |  1 +
 frontend/src/lib/WhipClient.ts                |  1 +
 .../src/utils/timelinePromptSubmission.ts     | 22 -------------
 7 files changed, 3 insertions(+), 66 deletions(-)

diff --git a/frontend/src/components/PromptInputWithTimeline.tsx b/frontend/src/components/PromptInputWithTimeline.tsx
index a7ffdc761..d4a52991a 100644
--- a/frontend/src/components/PromptInputWithTimeline.tsx
+++ b/frontend/src/components/PromptInputWithTimeline.tsx
@@ -112,25 +112,6 @@ export function PromptInputWithTimeline({
     onPlayingChange: onTimelinePlayingChange,
   });
 
-  // Debug: Log prompt changes
-  // useEffect(() => {
-  //   console.log("[PromptInputWithTimeline] Prompts changed:", {
-  //     prompts,
-  //     promptCount: prompts.length,
-  //     isStreaming,
-  //     disabled,
-  //   });
-  // }, [prompts, isStreaming, disabled]);
-
-  // Debug: Log when callbacks are called
-  // useEffect(() => {
-  //   console.log("[PromptInputWithTimeline] Callbacks:", {
-  //     hasOnPromptSubmit: !!onPromptSubmit,
-  //     hasOnPromptItemsSubmit: !!onPromptItemsSubmit,
-  //     isStreaming,
-  //   });
-  // }, [onPromptSubmit, onPromptItemsSubmit, isStreaming]);
-
   // Compute actual playing state - timeline is playing AND video is not paused
   const isActuallyPlaying = isPlaying && !isVideoPaused;
 
@@ -228,20 +209,6 @@ export function PromptInputWithTimeline({
     }
   }, [isStreaming]);
 
-  // Debug: Log component props and state
-  // useEffect(() => {
-  //   console.log("[PromptInputWithTimeline] Component state:", {
-  //     disabled,
-  //     isStreaming,
-  //     isVideoPaused,
-  //     isActuallyPlaying,
-  //     promptsCount: prompts.length,
-  //     currentTime,
-  //     hasOnPromptSubmit: !!onPromptSubmit,
-  //     hasOnPromptItemsSubmit: !!onPromptItemsSubmit,
-  //   });
-  // }, [disabled, isStreaming, isVideoPaused, isActuallyPlaying, prompts.length, currentTime, onPromptSubmit, onPromptItemsSubmit]);
-
   const buildLivePromptFromCurrent = useCallback(
     (start: number, end: number): TimelinePrompt => {
       const basePrompt = {
diff --git a/frontend/src/components/VideoOutput.tsx b/frontend/src/components/VideoOutput.tsx
index d616b1378..2bcd5ac5b 100644
--- a/frontend/src/components/VideoOutput.tsx
+++ b/frontend/src/components/VideoOutput.tsx
@@ -18,7 +18,6 @@ interface VideoOutputProps {
   onVideoPlaying?: () => void;
 }
 
-
 export function VideoOutput({
   className = "",
   remoteStream,
diff --git a/frontend/src/components/WhipConnection.tsx b/frontend/src/components/WhipConnection.tsx
index 7d15f0480..2c3c178b5 100644
--- a/frontend/src/components/WhipConnection.tsx
+++ b/frontend/src/components/WhipConnection.tsx
@@ -1,3 +1,4 @@
+// from http://github.com/livepeer/pipelines/blob/main/apps/streamdiffusion/src/components/WhipConnection.tsx
 "use client";
 
 import { usePlaybackUrl } from "@/hooks/usePlaybackUrl";
diff --git a/frontend/src/hooks/useTimelinePlayback.ts b/frontend/src/hooks/useTimelinePlayback.ts
index 52dbf6436..504036c98 100644
--- a/frontend/src/hooks/useTimelinePlayback.ts
+++ b/frontend/src/hooks/useTimelinePlayback.ts
@@ -57,14 +57,6 @@ const createUpdateTimeFunction = (
       (activePrompt.id !== lastAppliedPromptIdRef.current ||
         activePrompt.text !== lastAppliedPromptTextRef.current)
     ) {
-      console.log("[useTimelinePlayback] Active prompt changed:", {
-        promptId: activePrompt.id,
-        text: activePrompt.text,
-        previousId: lastAppliedPromptIdRef.current,
-        previousText: lastAppliedPromptTextRef.current,
-        hasOnPromptChange: !!optionsRef.current?.onPromptChange,
-        hasOnPromptItemsChange: !!optionsRef.current?.onPromptItemsChange,
-      });
       submitTimelinePrompt(activePrompt, {
         onPromptSubmit: optionsRef.current?.onPromptChange,
         onPromptItemsSubmit: optionsRef.current?.onPromptItemsChange,
@@ -73,7 +65,6 @@ const createUpdateTimeFunction = (
       lastAppliedPromptTextRef.current = activePrompt.text;
     } else if (!activePrompt && lastAppliedPromptIdRef.current !== null) {
       // No active prompt, reset the last applied prompt
-      console.log("[useTimelinePlayback] No active prompt, resetting");
       lastAppliedPromptIdRef.current = null;
       lastAppliedPromptTextRef.current = null;
     }
@@ -178,7 +169,6 @@ export function useTimelinePlayback(options?: UseTimelinePlaybackOptions) {
 
   // Start playback
   const startPlayback = useCallback(() => {
-    console.log("[useTimelinePlayback] Starting playback");
     setIsPlaying(true);
     startTimeRef.current = performance.now() - currentTime * 1000;
 
diff --git a/frontend/src/lib/WhepClient.ts b/frontend/src/lib/WhepClient.ts
index a0beb57de..c6814c13e 100644
--- a/frontend/src/lib/WhepClient.ts
+++ b/frontend/src/lib/WhepClient.ts
@@ -1,3 +1,4 @@
+// from https://github.com/livepeer/pipelines/blob/main/apps/streamdiffusion/src/lib/WhepClient.ts
 export type GetVideoElement = () => HTMLVideoElement | null;
 
 export class WhepClient {
diff --git a/frontend/src/lib/WhipClient.ts b/frontend/src/lib/WhipClient.ts
index 3f04d3db3..a137b2a32 100644
--- a/frontend/src/lib/WhipClient.ts
+++ b/frontend/src/lib/WhipClient.ts
@@ -1,3 +1,4 @@
+// from https://github.com/livepeer/pipelines/blob/main/apps/streamdiffusion/src/lib/WhipClient.ts
 export type GetStream = () => MediaStream | null;
 
 type AccessControlParams = {
diff --git a/frontend/src/utils/timelinePromptSubmission.ts b/frontend/src/utils/timelinePromptSubmission.ts
index 255dedbec..e4a5032fb 100644
--- a/frontend/src/utils/timelinePromptSubmission.ts
+++ b/frontend/src/utils/timelinePromptSubmission.ts
@@ -23,15 +23,6 @@ export function submitTimelinePrompt(
   prompt: TimelinePrompt,
   callbacks: PromptSubmissionCallbacks
 ): void {
-  console.log("[submitTimelinePrompt] Submitting prompt:", {
-    promptId: prompt.id,
-    text: prompt.text,
-    hasPrompts: !!prompt.prompts,
-    promptsLength: prompt.prompts?.length || 0,
-    hasOnPromptItemsSubmit: !!callbacks.onPromptItemsSubmit,
-    hasOnPromptSubmit: !!callbacks.onPromptSubmit,
-  });
-
   if (
     prompt.prompts &&
     prompt.prompts.length > 0 &&
@@ -41,11 +32,6 @@ export function submitTimelinePrompt(
       text: p.text,
       weight: p.weight,
     }));
-    console.log("[submitTimelinePrompt] Calling onPromptItemsSubmit with:", {
-      promptItems,
-      transitionSteps: prompt.transitionSteps,
-      temporalInterpolationMethod: prompt.temporalInterpolationMethod,
-    });
     callbacks.onPromptItemsSubmit(
       promptItems,
       prompt.transitionSteps,
@@ -53,20 +39,12 @@ export function submitTimelinePrompt(
     );
   } else if (callbacks.onPromptItemsSubmit) {
     const promptItems: PromptItem[] = [{ text: prompt.text, weight: 100 }];
-    console.log("[submitTimelinePrompt] Calling onPromptItemsSubmit (fallback) with:", {
-      promptItems,
-      transitionSteps: prompt.transitionSteps,
-      temporalInterpolationMethod: prompt.temporalInterpolationMethod,
-    });
     callbacks.onPromptItemsSubmit(
       promptItems,
       prompt.transitionSteps,
       prompt.temporalInterpolationMethod
     );
   } else if (callbacks.onPromptSubmit) {
-    console.log("[submitTimelinePrompt] Calling onPromptSubmit with:", prompt.text);
     callbacks.onPromptSubmit(prompt.text);
-  } else {
-    console.warn("[submitTimelinePrompt] No callback available to submit prompt!");
   }
 }

From a136d6f2068225abf370e7733a6d1ebd57e3f207 Mon Sep 17 00:00:00 2001
From: Max Holland <max@livepeer.org>
Date: Tue, 25 Nov 2025 18:04:49 +0000
Subject: [PATCH 10/11] Play / pause toggling

---
 frontend/src/components/VideoOutput.tsx | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/frontend/src/components/VideoOutput.tsx b/frontend/src/components/VideoOutput.tsx
index 2bcd5ac5b..2d38b39ff 100644
--- a/frontend/src/components/VideoOutput.tsx
+++ b/frontend/src/components/VideoOutput.tsx
@@ -43,6 +43,27 @@ export function VideoOutput({
     }
   }, [remoteStream]);
 
+  // Sync video element play/pause state with isPlaying prop
+  useEffect(() => {
+    const video = videoRef.current;
+    // playbackUrl indicates a cloud stream is playing
+    if (!video || !playbackUrl) return;
+
+    // Check if video state is out of sync with prop
+    const shouldBePlaying = isPlaying;
+    const isActuallyPlaying = !video.paused;
+
+    if (shouldBePlaying !== isActuallyPlaying) {
+      if (shouldBePlaying) {
+        video.play().catch((err) => {
+          console.error("[VideoOutput] Error playing video:", err);
+        });
+      } else {
+        video.pause();
+      }
+    }
+  }, [isPlaying, remoteStream, playbackUrl]);
+
   // Listen for video playing event to notify parent
   useEffect(() => {
     const video = videoRef.current;

From ac3d30a53f896cd61ea791e793923dd2147b8da8 Mon Sep 17 00:00:00 2001
From: Max Holland <max@livepeer.org>
Date: Thu, 27 Nov 2025 12:32:32 +0000
Subject: [PATCH 11/11] Fixes

Disconnect cloud stream on timeline reset
Keep resolution to multiples of 64 for cloud
---
 .../src/components/InputAndControlsPanel.tsx  |   3 +
 frontend/src/components/PromptInput.tsx       | 130 ++++++++++--------
 frontend/src/components/SettingsPanel.tsx     |  35 ++++-
 frontend/src/components/VideoOutput.tsx       |  16 ++-
 frontend/src/data/pipelines.ts                |  12 +-
 frontend/src/hooks/useStreamState.ts          |   1 +
 frontend/src/hooks/useWebRTCStats.ts          |  18 ++-
 frontend/src/lib/WhepClient.ts                |   4 +
 frontend/src/pages/StreamPage.tsx             |  52 ++++---
 9 files changed, 176 insertions(+), 95 deletions(-)

diff --git a/frontend/src/components/InputAndControlsPanel.tsx b/frontend/src/components/InputAndControlsPanel.tsx
index ac28dc21f..710bc7144 100644
--- a/frontend/src/components/InputAndControlsPanel.tsx
+++ b/frontend/src/components/InputAndControlsPanel.tsx
@@ -49,6 +49,7 @@ interface InputAndControlsPanelProps {
   timelinePrompts?: TimelinePrompt[];
   transitionSteps: number;
   onTransitionStepsChange: (steps: number) => void;
+  cloudMode?: boolean;
 }
 
 export function InputAndControlsPanel({
@@ -84,6 +85,7 @@ export function InputAndControlsPanel({
   timelinePrompts: _timelinePrompts = [],
   transitionSteps,
   onTransitionStepsChange,
+  cloudMode = false,
 }: InputAndControlsPanelProps) {
   // Helper function to determine if playhead is at the end of timeline
   const isAtEndOfTimeline = () => {
@@ -271,6 +273,7 @@ export function InputAndControlsPanel({
                     transitionSteps={transitionSteps}
                     onTransitionStepsChange={onTransitionStepsChange}
                     timelinePrompts={_timelinePrompts}
+                    cloudMode={cloudMode}
                   />
                 )}
               </div>
diff --git a/frontend/src/components/PromptInput.tsx b/frontend/src/components/PromptInput.tsx
index 7d1ffc23b..6e59f890b 100644
--- a/frontend/src/components/PromptInput.tsx
+++ b/frontend/src/components/PromptInput.tsx
@@ -32,6 +32,7 @@ interface PromptInputProps {
   transitionSteps?: number;
   onTransitionStepsChange?: (steps: number) => void;
   timelinePrompts?: TimelinePrompt[];
+  cloudMode?: boolean;
 }
 
 export function PromptInput({
@@ -51,6 +52,7 @@ export function PromptInput({
   transitionSteps = 4,
   onTransitionStepsChange,
   timelinePrompts = [],
+  cloudMode = false,
 }: PromptInputProps) {
   const [isProcessing, setIsProcessing] = useState(false);
   const [focusedIndex, setFocusedIndex] = useState<number | null>(null);
@@ -160,7 +162,8 @@ export function PromptInput({
           />
         </div>
 
-        <div className="space-y-2">
+      <div className="space-y-2">
+        {!cloudMode && (
           <TemporalTransitionControls
             transitionSteps={transitionSteps}
             onTransitionStepsChange={steps => onTransitionStepsChange?.(steps)}
@@ -171,42 +174,43 @@ export function PromptInput({
             disabled={disabled || !isStreaming || timelinePrompts.length === 0}
             className="space-y-2"
           />
+        )}
 
-          {/* Add/Submit buttons - Bottom row */}
-          <div className="flex items-center justify-end gap-2">
-            {managedPrompts.length < 4 && (
-              <Button
-                onMouseDown={e => {
-                  e.preventDefault();
-                  handleAddPrompt();
-                }}
-                disabled={disabled}
-                size="sm"
-                variant="ghost"
-                className="rounded-full w-8 h-8 p-0"
-              >
-                <Plus className="h-4 w-4" />
-              </Button>
-            )}
+        {/* Add/Submit buttons - Bottom row */}
+        <div className="flex items-center justify-end gap-2">
+          {managedPrompts.length < 4 && (
             <Button
               onMouseDown={e => {
                 e.preventDefault();
-                handleSubmit();
+                handleAddPrompt();
               }}
-              disabled={
-                disabled ||
-                !managedPrompts.some(p => p.text.trim()) ||
-                isProcessing
-              }
+              disabled={disabled}
               size="sm"
-              className="rounded-full w-8 h-8 p-0 bg-black hover:bg-gray-800 text-white disabled:opacity-50 disabled:cursor-not-allowed"
+              variant="ghost"
+              className="rounded-full w-8 h-8 p-0"
             >
-              {isProcessing ? "..." : <ArrowUp className="h-4 w-4" />}
+              <Plus className="h-4 w-4" />
             </Button>
-          </div>
+          )}
+          <Button
+            onMouseDown={e => {
+              e.preventDefault();
+              handleSubmit();
+            }}
+            disabled={
+              disabled ||
+              !managedPrompts.some(p => p.text.trim()) ||
+              isProcessing
+            }
+            size="sm"
+            className="rounded-full w-8 h-8 p-0 bg-black hover:bg-gray-800 text-white disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            {isProcessing ? "..." : <ArrowUp className="h-4 w-4" />}
+          </Button>
         </div>
       </div>
-    );
+    </div>
+  );
   }
 
   // Multiple prompts mode: show weights and controls
@@ -241,43 +245,47 @@ export function PromptInput({
       })}
 
       <div className="space-y-2">
-        {/* Spatial Blend - only for multiple prompts */}
-        {managedPrompts.length >= 2 && (
-          <div className="flex items-center justify-between gap-2">
-            <span className="text-xs text-muted-foreground">
-              Spatial Blend:
-            </span>
-            <Select
-              value={interpolationMethod}
-              onValueChange={value =>
-                onInterpolationMethodChange?.(value as "linear" | "slerp")
+        {!cloudMode && (
+          <>
+            {/* Spatial Blend - only for multiple prompts */}
+            {managedPrompts.length >= 2 && (
+              <div className="flex items-center justify-between gap-2">
+                <span className="text-xs text-muted-foreground">
+                  Spatial Blend:
+                </span>
+                <Select
+                  value={interpolationMethod}
+                  onValueChange={value =>
+                    onInterpolationMethodChange?.(value as "linear" | "slerp")
+                  }
+                  disabled={disabled}
+                >
+                  <SelectTrigger className="w-24 h-6 text-xs">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="linear">Linear</SelectItem>
+                    <SelectItem value="slerp" disabled={managedPrompts.length > 2}>
+                      Slerp
+                    </SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+            )}
+
+            <TemporalTransitionControls
+              transitionSteps={transitionSteps}
+              onTransitionStepsChange={steps => onTransitionStepsChange?.(steps)}
+              temporalInterpolationMethod={temporalInterpolationMethod}
+              onTemporalInterpolationMethodChange={method =>
+                onTemporalInterpolationMethodChange?.(method)
               }
-              disabled={disabled}
-            >
-              <SelectTrigger className="w-24 h-6 text-xs">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="linear">Linear</SelectItem>
-                <SelectItem value="slerp" disabled={managedPrompts.length > 2}>
-                  Slerp
-                </SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
+              disabled={disabled || !isStreaming || timelinePrompts.length === 0}
+              className="space-y-2"
+            />
+          </>
         )}
 
-        <TemporalTransitionControls
-          transitionSteps={transitionSteps}
-          onTransitionStepsChange={steps => onTransitionStepsChange?.(steps)}
-          temporalInterpolationMethod={temporalInterpolationMethod}
-          onTemporalInterpolationMethodChange={method =>
-            onTemporalInterpolationMethodChange?.(method)
-          }
-          disabled={disabled || !isStreaming || timelinePrompts.length === 0}
-          className="space-y-2"
-        />
-
         {/* Add/Submit buttons - Bottom row */}
         <div className="flex items-center justify-end gap-2">
           {managedPrompts.length < 4 && (
diff --git a/frontend/src/components/SettingsPanel.tsx b/frontend/src/components/SettingsPanel.tsx
index 1db5001e4..0df1c5eb3 100644
--- a/frontend/src/components/SettingsPanel.tsx
+++ b/frontend/src/components/SettingsPanel.tsx
@@ -161,6 +161,13 @@ export function SettingsPanel({
       } else {
         setWidthError(`Must be at most ${maxValue}`);
       }
+    } else if (cloudMode && value % 64 !== 0) {
+      // In cloud mode, dimension must be a multiple of 64
+      if (dimension === "height") {
+        setHeightError(`Must be a multiple of 64 in cloud mode`);
+      } else {
+        setWidthError(`Must be a multiple of 64 in cloud mode`);
+      }
     } else {
       // Clear error if valid
       if (dimension === "height") {
@@ -179,7 +186,18 @@ export function SettingsPanel({
 
   const incrementResolution = (dimension: "height" | "width") => {
     const maxValue = 2048;
-    const newValue = Math.min(maxValue, effectiveResolution[dimension] + 1);
+    const currentValue = effectiveResolution[dimension];
+
+    let newValue: number;
+    if (cloudMode && currentValue % 64 !== 0) {
+      // Snap to next multiple of 64
+      newValue = Math.ceil(currentValue / 64) * 64;
+    } else {
+      const step = cloudMode ? 64 : 1;
+      newValue = currentValue + step;
+    }
+
+    newValue = Math.min(maxValue, newValue);
     handleResolutionChange(dimension, newValue);
   };
 
@@ -190,7 +208,18 @@ export function SettingsPanel({
       pipelineId === "krea-realtime-video"
         ? MIN_DIMENSION
         : 1;
-    const newValue = Math.max(minValue, effectiveResolution[dimension] - 1);
+    const currentValue = effectiveResolution[dimension];
+
+    let newValue: number;
+    if (cloudMode && currentValue % 64 !== 0) {
+      // Snap to previous multiple of 64
+      newValue = Math.floor(currentValue / 64) * 64;
+    } else {
+      const step = cloudMode ? 64 : 1;
+      newValue = currentValue - step;
+    }
+
+    newValue = Math.max(minValue, newValue);
     handleResolutionChange(dimension, newValue);
   };
 
@@ -453,6 +482,7 @@ export function SettingsPanel({
                         className="text-center border-0 focus-visible:ring-0 focus-visible:ring-offset-0 h-8 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
                         min={MIN_DIMENSION}
                         max={2048}
+                        step={cloudMode ? 64 : 1}
                       />
                       <Button
                         variant="ghost"
@@ -502,6 +532,7 @@ export function SettingsPanel({
                         className="text-center border-0 focus-visible:ring-0 focus-visible:ring-offset-0 h-8 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
                         min={MIN_DIMENSION}
                         max={2048}
+                        step={cloudMode ? 64 : 1}
                       />
                       <Button
                         variant="ghost"
diff --git a/frontend/src/components/VideoOutput.tsx b/frontend/src/components/VideoOutput.tsx
index 2d38b39ff..499045a32 100644
--- a/frontend/src/components/VideoOutput.tsx
+++ b/frontend/src/components/VideoOutput.tsx
@@ -16,6 +16,7 @@ interface VideoOutputProps {
   onPlayPauseToggle?: () => void;
   onStartStream?: () => void;
   onVideoPlaying?: () => void;
+  whepClientRef?: React.MutableRefObject<WhepClient | null>;
 }
 
 export function VideoOutput({
@@ -29,6 +30,7 @@ export function VideoOutput({
   onPlayPauseToggle,
   onStartStream,
   onVideoPlaying,
+  whepClientRef,
 }: VideoOutputProps) {
   const { playbackUrl } = usePlaybackUrl();
   const videoRef = useRef<HTMLVideoElement>(null);
@@ -152,7 +154,14 @@ export function VideoOutput({
     };
   }, []);
 
-  useWhepConnection(playbackUrl, videoRef);
+  // Callback to sync whepClientRef when the client is created
+  const handleClientCreated = useCallback((client: WhepClient | null) => {
+    if (whepClientRef) {
+      whepClientRef.current = client;
+    }
+  }, [whepClientRef]);
+
+  useWhepConnection(playbackUrl, videoRef, handleClientCreated);
 
   return (
     <Card className={`h-full flex flex-col ${className}`}>
@@ -221,6 +230,7 @@ export function VideoOutput({
 export const useWhepConnection = (
   playbackUrl: string | null | undefined,
   videoRef: RefObject<HTMLVideoElement | null>,
+  onClientCreated?: (client: WhepClient | null) => void,
   depsKey?: number,
 ) => {
   const clientRef = useRef<WhepClient | null>(null);
@@ -231,12 +241,14 @@ export const useWhepConnection = (
         void clientRef.current.stop();
         clientRef.current = null;
       }
+      onClientCreated?.(null);
       return;
     }
 
     const client = new WhepClient(playbackUrl, () => videoRef.current);
     clientRef.current = client;
     client.start();
+    onClientCreated?.(client);
 
     return () => {
       if (clientRef.current) {
@@ -246,5 +258,5 @@ export const useWhepConnection = (
     };
   }, [playbackUrl, videoRef, depsKey]);
 
-  return null;
+  return clientRef;
 };
diff --git a/frontend/src/data/pipelines.ts b/frontend/src/data/pipelines.ts
index 2a3e50d79..bb89adbba 100644
--- a/frontend/src/data/pipelines.ts
+++ b/frontend/src/data/pipelines.ts
@@ -65,8 +65,8 @@ export const PIPELINES: Record<string, PipelineInfo> = {
     defaultTemporalInterpolationSteps: 4,
     supportsLoRA: true,
   },
-  "sd-turbo": {
-    name: "SDTurbo",
+  "sdxl-turbo": {
+    name: "SDXL Turbo",
     docsUrl:
       "",
     about:
@@ -79,10 +79,10 @@ export const PIPELINES: Record<string, PipelineInfo> = {
     defaultTemporalInterpolationMethod: "linear",
     defaultTemporalInterpolationSteps: 4,
     pipelineCompatibility: "cloud",
-    cloudModelId: "stabilityai/sd-turbo",
+    cloudModelId: "stabilityai/sdxl-turbo",
   },
-  "sdxl-turbo": {
-    name: "SDXL Turbo",
+  "sd-turbo": {
+    name: "SDTurbo",
     docsUrl:
       "",
     about:
@@ -95,7 +95,7 @@ export const PIPELINES: Record<string, PipelineInfo> = {
     defaultTemporalInterpolationMethod: "linear",
     defaultTemporalInterpolationSteps: 4,
     pipelineCompatibility: "cloud",
-    cloudModelId: "stabilityai/sdxl-turbo",
+    cloudModelId: "stabilityai/sd-turbo",
   },
   passthrough: {
     name: "Passthrough",
diff --git a/frontend/src/hooks/useStreamState.ts b/frontend/src/hooks/useStreamState.ts
index d59a11bbc..c95e1125b 100644
--- a/frontend/src/hooks/useStreamState.ts
+++ b/frontend/src/hooks/useStreamState.ts
@@ -54,6 +54,7 @@ export function useStreamState() {
         const info = await getHardwareInfo();
         setHardwareInfo(info);
       } catch (error) {
+        // TODO disable local gpu mode if this fails and only allow cloud?
         console.error("Failed to fetch hardware info:", error);
       }
     };
diff --git a/frontend/src/hooks/useWebRTCStats.ts b/frontend/src/hooks/useWebRTCStats.ts
index 05fb9184d..262b2e232 100644
--- a/frontend/src/hooks/useWebRTCStats.ts
+++ b/frontend/src/hooks/useWebRTCStats.ts
@@ -1,4 +1,5 @@
 import { useState, useEffect, useRef, useCallback } from "react";
+import type { WhepClient } from "@/lib/WhepClient";
 
 interface WebRTCStats {
   fps: number;
@@ -8,11 +9,13 @@ interface WebRTCStats {
 interface UseWebRTCStatsProps {
   peerConnectionRef: React.MutableRefObject<RTCPeerConnection | null>;
   isStreaming: boolean;
+  whepClientRef?: React.MutableRefObject<WhepClient | null>;
 }
 
 export function useWebRTCStats({
   peerConnectionRef,
   isStreaming,
+  whepClientRef,
 }: UseWebRTCStatsProps) {
   const [stats, setStats] = useState<WebRTCStats>({
     fps: 0,
@@ -30,7 +33,10 @@ export function useWebRTCStats({
   const bitrateHistoryRef = useRef<number[]>([]);
 
   const calculateStats = useCallback(async () => {
-    const peerConnection = peerConnectionRef.current;
+    // Try to get peer connection from whepClientRef first (cloud mode), then fall back to local
+    const cloudPeerConnection = whepClientRef?.current?.getPeerConnection();
+    const localPeerConnection = peerConnectionRef.current;
+    const peerConnection = cloudPeerConnection || localPeerConnection;
 
     if (!peerConnection || !isStreaming) {
       setStats(prev => ({ ...prev, fps: 0, bitrate: 0 }));
@@ -116,11 +122,15 @@ export function useWebRTCStats({
     } catch (error) {
       console.error("Error getting WebRTC stats:", error);
     }
-  }, [peerConnectionRef, isStreaming]);
+  }, [peerConnectionRef, isStreaming, whepClientRef]);
 
   // Start/stop stats collection based on streaming state
   useEffect(() => {
-    const peerConnection = peerConnectionRef.current;
+    // Check for peer connection from either source
+    const cloudPeerConnection = whepClientRef?.current?.getPeerConnection();
+    const localPeerConnection = peerConnectionRef.current;
+    const peerConnection = cloudPeerConnection || localPeerConnection;
+
     if (isStreaming && peerConnection) {
       // Start collecting stats immediately
       calculateStats();
@@ -150,7 +160,7 @@ export function useWebRTCStats({
         statsIntervalRef.current = null;
       }
     };
-  }, [isStreaming, peerConnectionRef, calculateStats]);
+  }, [isStreaming, peerConnectionRef, whepClientRef, calculateStats]);
 
   return stats;
 }
diff --git a/frontend/src/lib/WhepClient.ts b/frontend/src/lib/WhepClient.ts
index c6814c13e..7ec985f68 100644
--- a/frontend/src/lib/WhepClient.ts
+++ b/frontend/src/lib/WhepClient.ts
@@ -141,6 +141,10 @@ export class WhepClient {
     await this.cleanupPeerConnection();
   }
 
+  getPeerConnection(): RTCPeerConnection | null {
+    return this.pc;
+  }
+
   private scheduleReconnect(): void {
     if (this.stopped) return;
     if (this.reconnectTimeout) {
diff --git a/frontend/src/pages/StreamPage.tsx b/frontend/src/pages/StreamPage.tsx
index 71c097813..5d559dca7 100644
--- a/frontend/src/pages/StreamPage.tsx
+++ b/frontend/src/pages/StreamPage.tsx
@@ -21,6 +21,7 @@ import { createCloudStream, updateCloudStream, type CreateStreamResponse, type S
 import { WhipConnection } from "../components/WhipConnection";
 import { usePlaybackUrl } from "@/hooks/usePlaybackUrl";
 import { sendLoRAScaleUpdates } from "../utils/loraHelpers";
+import type { WhepClient } from "@/lib/WhepClient";
 
 function buildLoRAParams(
   loras?: LoRAConfig[],
@@ -61,6 +62,15 @@ export function StreamPage() {
   const [activeStream, setActiveStream] = useState<CreateStreamResponse | null>(null);
   const isStartingCloudRef = useRef(false);
   const { setPlaybackUrl } = usePlaybackUrl();
+  const whepClientRef = useRef<WhepClient | null>(null);
+
+  // Reusable function to disconnect/cleanup cloud stream state
+  const disconnectCloudStream = useCallback(() => {
+    setActiveStream(null);
+    setIsStreamingCloud(false);
+    setIsConnectingCloud(false);
+    setPlaybackUrl(null);
+  }, [setPlaybackUrl]);
 
   // Stable callbacks for WHIP to avoid effect churn in WhipConnection
   const onWhipConnectionStateChange = useCallback((state: RTCPeerConnectionState) => {
@@ -79,11 +89,8 @@ export function StreamPage() {
   }, [setIsStreamingCloud, setIsConnectingCloud]);
 
   const onWhipRetryLimitExceeded = useCallback(() => {
-    setIsStreamingCloud(false);
-    setIsConnectingCloud(false);
-    setActiveStream(null);
-    setPlaybackUrl(null);
-  }, [setIsStreamingCloud, setIsConnectingCloud, setPlaybackUrl]);
+    disconnectCloudStream();
+  }, [disconnectCloudStream]);
 
   // Timeline state for left panel
   const [timelinePrompts, setTimelinePrompts] = useState<TimelinePrompt[]>([]);
@@ -221,7 +228,8 @@ export function StreamPage() {
   // Get WebRTC stats for FPS
   const webrtcStats = useWebRTCStats({
     peerConnectionRef,
-    isStreaming,
+    isStreaming: isStreaming || isStreamingCloud,
+    whepClientRef,
   });
 
   // Video source for preview (camera or video)
@@ -264,10 +272,7 @@ export function StreamPage() {
       stopStream();
     }
     if (isStreamingCloud) {
-      setActiveStream(null);
-      setIsStreamingCloud(false);
-      setIsConnectingCloud(false);
-      setPlaybackUrl(null);
+      disconnectCloudStream();
     }
 
     // Check if we're switching from no-video-input to video-input pipeline
@@ -582,6 +587,17 @@ export function StreamPage() {
     }
   }, [videoResolution, isStreaming, settings.pipelineId, updateSettings]);
 
+  // Unified disconnect handler for both local and cloud streams
+  const handleDisconnect = useCallback(() => {
+    if (settings.cloudMode) {
+      // Disconnect cloud stream
+      disconnectCloudStream();
+    } else {
+      // Disconnect local WebRTC stream
+      stopStream();
+    }
+  }, [settings.cloudMode, stopStream, disconnectCloudStream]);
+
   const handleStartStream = async (
     overridePipelineId?: PipelineId
   ): Promise<boolean> => {
@@ -592,10 +608,7 @@ export function StreamPage() {
       }
     } else {
       if (isStreamingCloud) {
-        setActiveStream(null);
-        setIsStreamingCloud(false);
-        setIsConnectingCloud(false);
-        setPlaybackUrl(null);
+        disconnectCloudStream();
         return true;
       }
       // Ignore new start requests while a cloud connection is being established
@@ -852,6 +865,7 @@ export function StreamPage() {
             timelinePrompts={timelinePrompts}
             transitionSteps={transitionSteps}
             onTransitionStepsChange={setTransitionSteps}
+            cloudMode={settings.cloudMode}
           />
         </div>
 
@@ -888,6 +902,7 @@ export function StreamPage() {
                   onVideoPlayingCallbackRef.current = null; // Clear after execution
                 }
               }}
+              whepClientRef={whepClientRef}
             />
           </div>
           {/* Timeline area - compact, always visible */}
@@ -978,7 +993,7 @@ export function StreamPage() {
               timelineRef={timelineRef}
               onLiveStateChange={setIsLive}
               onLivePromptSubmit={handleLivePromptSubmit}
-              onDisconnect={stopStream}
+              onDisconnect={handleDisconnect}
               onStartStream={handleStartStream}
               onVideoPlayPauseToggle={handlePlayPauseToggle}
               onPromptEdit={handleTimelinePromptEdit}
@@ -1004,7 +1019,7 @@ export function StreamPage() {
             className="h-full"
             pipelineId={settings.pipelineId}
             onPipelineIdChange={handlePipelineIdChange}
-            isStreaming={isStreaming}
+            isStreaming={isStreaming || isStreamingCloud}
             isDownloading={isDownloading}
             cloudMode={settings.cloudMode ?? false}
             onCloudModeChange={enabled => {
@@ -1014,10 +1029,7 @@ export function StreamPage() {
                   stopStream();
                 }
               if (isStreamingCloud) {
-                setActiveStream(null);
-                setIsStreamingCloud(false);
-                setIsConnectingCloud(false);
-                setPlaybackUrl(null);
+                disconnectCloudStream();
               }
               })();
               updateSettings({ cloudMode: enabled });