diff --git a/e2e/playwright.config.ts b/e2e/playwright.config.ts
index 4913edc2d..44f694de5 100644
--- a/e2e/playwright.config.ts
+++ b/e2e/playwright.config.ts
@@ -29,9 +29,12 @@ export default defineConfig({
     // Longer timeout for cloud operations
     actionTimeout: 30000,
     navigationTimeout: 60000,
+    // Grant camera/mic so getUserMedia() succeeds without a UI prompt
+    // (the browser launch flags below provide a synthetic feed).
+    permissions: ["camera", "microphone"],
   },
   // Global timeout per test
-  timeout: 180000, // 3 minutes for cloud streaming tests
+  timeout: 300000, // 5 minutes (cold-start fal containers can run long)
   expect: {
     timeout: 30000,
   },
@@ -40,6 +43,16 @@ export default defineConfig({
       name: "chromium",
       use: {
         ...devices["Desktop Chrome"],
+        launchOptions: {
+          // Feed getUserMedia a synthetic video source so a real WebRTC
+          // peer connection can complete end-to-end — without these
+          // flags, headless Chromium has no camera and ICE stalls.
+          args: [
+            "--use-fake-device-for-media-stream",
+            "--use-fake-ui-for-media-stream",
+            "--auto-select-desktop-capture-source=fake",
+          ],
+        },
       },
     },
   ],
diff --git a/e2e/tests/cloud-streaming.spec.ts b/e2e/tests/cloud-streaming.spec.ts
index c7360f333..e16ecb8a1 100644
--- a/e2e/tests/cloud-streaming.spec.ts
+++ b/e2e/tests/cloud-streaming.spec.ts
@@ -4,22 +4,29 @@ import { test, expect, Page } from "@playwright/test";
  * E2E tests for Scope cloud streaming via fal.ai.
  *
  * The app is started with:
- *   VITE_DAYDREAM_API_KEY=... → handles auth (shows as logged in)
- *   SCOPE_CLOUD_APP_ID=scope-pr-<N> → configures cloud endpoint
+ *   VITE_DAYDREAM_API_KEY=... → baked into the frontend, makes the app
+ *                              behave as signed-in so the cloud toggle
+ *                              is enabled
+ *   SCOPE_CLOUD_APP_ID=daydream/<app>/ws → points scope at a fal deploy
  *
- * These tests verify the full flow:
- * 1. App loads (already logged in via API key)
- * 2. Enable cloud mode
- * 3. Start a stream with the passthrough model
- * 4. Verify frames are being processed
+ * Flow:
+ * 1. App loads (already logged in via baked-in API key)
+ * 2. Switch to Perform mode (default is Workflow/graph mode after the
+ *    graph-mode redesign)
+ * 3. Toggle Remote Inference on from the settings dialog
+ * 4. Wait for cloud connection (Connection ID rendered)
+ * 5. Select the passthrough pipeline
+ * 6. Click the play overlay to start the stream
+ * 7. Verify the output <video> is actually playing
+ * 8. Stop the stream
  */
 
 test.describe("Cloud Streaming", () => {
   test("connects to cloud and runs passthrough stream", async ({ page }) => {
-    // Increase timeout for this test
-    test.setTimeout(180000); // 3 minutes
+    // Increase timeout for this test — cold-start on fal can take ~2min
+    test.setTimeout(240000);
 
-    // Mock the onboarding status API to skip onboarding in e2e tests
+    // Mock the onboarding status API to skip onboarding.
     await page.route("**/api/v1/onboarding/status", async (route) => {
       if (route.request().method() === "GET") {
         await route.fulfill({
@@ -32,31 +39,48 @@ test.describe("Cloud Streaming", () => {
       }
     });
 
-    // Navigate to the app (running at localhost:8000)
     await page.goto("/");
-    await expect(
-      page.getByRole("heading", { name: "Daydream Scope", exact: true })
-    ).toBeVisible({ timeout: 15000 });
+    await page.waitForLoadState("domcontentloaded");
 
-    // Take screenshot after initial load — app loads directly into the streaming interface
+    // App is loaded once the Workflow/Perform mode toggle is present.
+    const performToggle = page.locator('[aria-label="Perform Mode"]');
+    await expect(performToggle).toBeVisible({ timeout: 15000 });
     await page.screenshot({ path: "test-results/01-initial-load.png" });
 
-    // Step 1: Enable cloud mode (endpoint is pre-configured via SCOPE_CLOUD_APP_ID)
+    // Step 1: Switch to Perform mode. Default after the graph-mode
+    // redesign is Workflow; Perform is where the cloud toggle,
+    // pipeline selector, and start button live.
+    await performToggle.click();
+    await page.waitForTimeout(1000);
+    await page.screenshot({ path: "test-results/02-perform-mode.png" });
+
+    // Step 2: Enable cloud mode via settings dialog
     await enableCloudMode(page);
 
-    // Step 2: Wait for cloud connection
+    // Step 3: Wait for cloud connection (cold-start can be slow)
     await waitForCloudConnection(page);
 
-    // Step 3: Select passthrough model
+    // Step 4: Select passthrough pipeline
     await selectPassthroughModel(page);
 
-    // Step 4: Start streaming
+    // Step 5: Switch input source to Camera so getUserMedia() fires.
+    // Combined with the --use-fake-device-for-media-stream launch flag
+    // (see playwright.config.ts), this gives the browser a real
+    // MediaStreamTrack, which lets the browser↔local-scope WebRTC
+    // actually deliver frames — which is what triggers CloudTrack
+    // to call start_webrtc() and send the start_stream trickle
+    // message to the runner.
+    await selectCameraInput(page);
+
+    // Step 6: Start streaming
     await startStream(page);
 
-    // Step 5: Verify frames are being processed
-    await verifyStreamProcessing(page);
+    // Step 7: Verify the OUTPUT video is actually playing (frames
+    // round-tripped through the livepeer runner). Checking only
+    // "any video is playing" would false-positive on the input.
+    await verifyOutputStreamProcessing(page);
 
-    // Step 6: Stop stream
+    // Step 8: Stop stream
     await stopStream(page);
 
     console.log("✅ Cloud streaming test passed");
@@ -64,28 +88,31 @@ test.describe("Cloud Streaming", () => {
 });
 
 /**
- * Enable cloud mode by opening settings and toggling Remote Inference.
+ * Open settings via the cloud button in the header and toggle the
+ * Remote Inference switch on.
  */
 async function enableCloudMode(page: Page) {
   console.log("Enabling cloud mode...");
 
-  // Open settings dialog via the cloud icon in the header
-  const cloudIcon = page.locator('button[title*="cloud" i], button[title*="remote inference" i]');
-  await expect(cloudIcon).toBeVisible({ timeout: 10000 });
-  await cloudIcon.click();
-
+  // The cloud button in the header has title "Connect to cloud" (or
+  // "Cloud connected" once active). Match by title so we find it in
+  // any state.
+  const cloudButton = page.locator(
+    'button[title="Connect to cloud"], button[title="Cloud connected"], button[title="Connecting to cloud..."]'
+  );
+  await expect(cloudButton).toBeVisible({ timeout: 10000 });
+  await cloudButton.click();
+  await page.waitForTimeout(500);
   await page.screenshot({ path: "test-results/03-settings-opened.png" });
 
-  // Find the Remote Inference switch inside the settings dialog
+  // The Remote Inference switch lives inside the settings dialog's
+  // account tab.
   const cloudToggle = page.locator('[data-testid="cloud-toggle"]');
   await expect(cloudToggle).toBeVisible({ timeout: 10000 });
-
-  // Wait for the toggle to be enabled (auth may still be initializing)
   await expect(cloudToggle).toBeEnabled({ timeout: 30000 });
 
-  // Toggle on if not already enabled
-  const isEnabled = await cloudToggle.getAttribute("aria-checked");
-  if (isEnabled !== "true") {
+  const checked = await cloudToggle.getAttribute("aria-checked");
+  if (checked !== "true") {
     await cloudToggle.click();
     await expect(cloudToggle).toHaveAttribute("aria-checked", "true", {
       timeout: 10000,
@@ -93,83 +120,81 @@ async function enableCloudMode(page: Page) {
   }
 
   await page.screenshot({ path: "test-results/04-cloud-toggled.png" });
-  console.log("✅ Cloud mode enabled");
+  console.log("✅ Cloud mode toggled on");
 }
 
 /**
- * Wait for the cloud connection to be established.
- * The Connection ID element only appears when status.connected is true.
+ * Connection ID text only renders once `status.connected` is true.
+ * Cold starts on fal can take ~2 minutes.
  */
 async function waitForCloudConnection(page: Page) {
   console.log("Waiting for cloud connection...");
 
-  // The Connection ID text only renders when connected, so wait for it
   await expect(page.getByText(/connection id/i)).toBeVisible({
-    timeout: 120000,
+    timeout: 180000,
   });
-
   await page.screenshot({ path: "test-results/05-cloud-connected.png" });
   console.log("✅ Cloud connection established");
 
-  // Close the settings dialog
+  // Close the settings dialog so the Perform UI is fully interactive.
   await page.keyboard.press("Escape");
   await page.waitForTimeout(500);
 }
 
 /**
- * Select the passthrough pipeline in the Settings panel.
- * The pipeline selector is a Radix Select with heading "Pipeline ID".
+ * Select the passthrough pipeline from the Pipeline ID selector in
+ * the Settings panel (Perform mode).
  */
 async function selectPassthroughModel(page: Page) {
   console.log("Selecting passthrough model...");
 
-  // The pipeline selector trigger shows the current pipeline name.
-  // Find it via the "Pipeline ID" heading's sibling combobox.
-  const pipelineSection = page.locator("text=Pipeline ID").locator("..");
+  // "Pipeline ID" is an <h3>; its Radix <Select> trigger is the
+  // combobox in the same surrounding container.
+  const pipelineSection = page
+    .locator("h3")
+    .filter({ hasText: /^Pipeline ID$/ })
+    .locator("..");
   const selectTrigger = pipelineSection.getByRole("combobox");
 
   await expect(selectTrigger).toBeVisible({ timeout: 10000 });
   await selectTrigger.click();
 
-  // Wait for dropdown and select passthrough
   const passthroughOption = page.getByRole("option", {
     name: /passthrough/i,
   });
   await expect(passthroughOption).toBeVisible({ timeout: 5000 });
   await passthroughOption.click();
 
+  // Wait a moment for the pipeline to swap in the UI (loading state,
+  // config form refresh).
+  await page.waitForTimeout(1500);
   await page.screenshot({ path: "test-results/06-model-selected.png" });
   console.log("✅ Passthrough model selected");
 }
 
 /**
- * Start the video stream, retrying if the input video hasn't loaded yet.
- * If the play button is still visible after clicking (i.e. we didn't
- * transition to a connecting/loading state), try again.
+ * Start button is a PlayOverlay rendered with
+ * data-testid="start-stream-button". Retry a few times — the overlay
+ * can intercept clicks while the input video is still loading.
  */
 async function startStream(page: Page) {
   console.log("Starting stream...");
 
-  const startButton = page
-    .locator('[data-testid="start-stream-button"]')
-    .or(page.getByRole("button", { name: /start stream/i }));
+  const startButton = page.locator('[data-testid="start-stream-button"]');
 
   const MAX_ATTEMPTS = 5;
   for (let attempt = 1; attempt <= MAX_ATTEMPTS; attempt++) {
     await expect(startButton).toBeVisible({ timeout: 10000 });
     await startButton.click();
-
-    // Give the app a moment to react
     await page.waitForTimeout(2000);
 
-    // If the play button disappeared, the stream is starting
     const stillVisible = await startButton.isVisible().catch(() => false);
     if (!stillVisible) {
       break;
     }
 
     console.log(
-      `⚠️ Play button still visible after click (attempt ${attempt}/${MAX_ATTEMPTS}), retrying...`
+      `⚠️ Start button still visible after click (attempt ${attempt}/${MAX_ATTEMPTS}), retrying...`
     );
     await page.screenshot({
       path: `test-results/07-stream-retry-${attempt}.png`,
@@ -180,8 +205,6 @@ async function startStream(page: Page) {
         "Start stream button still visible after max retries — input video may not have loaded"
       );
     }
-
-    // Wait before retrying
     await page.waitForTimeout(3000);
   }
 
@@ -191,61 +214,93 @@ async function startStream(page: Page) {
 }
 
 /**
- * Verify that frames are being processed by the cloud.
- * The output video is inside the "Video Output" card and only renders
- * when a remoteStream is active.
+ * Switch the input source to Camera. Combined with the
+ * --use-fake-device-for-media-stream browser flag, this gives the
+ * browser a synthetic MediaStreamTrack via getUserMedia(), which is
+ * what enables a real WebRTC peer connection between the browser and
+ * local scope — the trigger for CloudTrack.start_webrtc() and the
+ * runner's start_stream control message in Livepeer mode.
  */
-async function verifyStreamProcessing(page: Page) {
-  console.log("Verifying stream processing...");
+async function selectCameraInput(page: Page) {
+  console.log("Switching input source to Camera...");
+  const cameraToggle = page.locator('[aria-label="Camera"]');
+  await expect(cameraToggle).toBeVisible({ timeout: 10000 });
+  await cameraToggle.click();
+  // Give the app a moment to request getUserMedia and attach the
+  // resulting stream to the input video element.
+  await page.waitForTimeout(2000);
+  await page.screenshot({ path: "test-results/06b-camera-selected.png" });
+  console.log("✅ Camera input selected");
+}
 
-  // The output <video> element is inside the "Video Output" card
-  const outputCard = page.locator("text=Video Output").locator("../..");
+/**
+ * Verify the *output* video inside the "Video Output" card is actually
+ * playing — i.e., frames round-tripped through the livepeer runner and
+ * came back to the browser. Checking any <video> would false-positive
+ * on the local input preview.
+ */
+async function verifyOutputStreamProcessing(page: Page) {
+  console.log("Verifying output stream processing...");
+
+  // The Video Output card owns the output <video>. The element is
+  // only rendered when `remoteStream` is set, so waiting for it to be
+  // visible implicitly waits for the stream to come up.
+  const outputCard = page
+    .locator("text=Video Output")
+    .locator("..")
+    .locator("..");
   const outputVideo = outputCard.locator("video");
 
-  // Wait for the video element to appear (stream needs to produce frames)
-  await expect(outputVideo).toBeVisible({ timeout: 30000 });
+  await expect(outputVideo).toBeVisible({ timeout: 120000 });
+  await page.screenshot({ path: "test-results/08a-output-rendered.png" });
 
-  // Poll until the video is actually playing (may take a few seconds for
-  // WebRTC negotiation and first frame to arrive)
-  const MAX_WAIT_MS = 30000;
+  // Poll until the output video is actually playing with a non-zero
+  // currentTime (frames arriving, not just the element attached).
+  const MAX_WAIT_MS = 60000;
   const POLL_MS = 2000;
   const start = Date.now();
-  let isPlaying = false;
 
   while (Date.now() - start < MAX_WAIT_MS) {
-    isPlaying = await outputVideo.evaluate((el) => {
+    const playing = await outputVideo.evaluate((el) => {
       const v = el as HTMLVideoElement;
-      return !v.paused && v.readyState >= 2;
+      return !v.paused && v.readyState >= 2 && v.currentTime > 0;
     });
-    if (isPlaying) break;
+    if (playing) {
+      await page.screenshot({ path: "test-results/08b-frames-flowing.png" });
+      console.log("✅ Output frames flowing");
+      // Let the stream run briefly so stream_heartbeat events fire
+      // on the runner side (frame_processor.py:707 emits roughly
+      // every ~10s while the FrameProcessor is running).
+      await page.waitForTimeout(15000);
+      return;
+    }
     await page.waitForTimeout(POLL_MS);
   }
 
-  await page.screenshot({ path: "test-results/08-stream-running.png" });
-
-  if (!isPlaying) {
-    throw new Error("Stream does not appear to be processing frames");
-  }
-
-  console.log("✅ Stream is processing frames");
+  await page.screenshot({ path: "test-results/08c-no-output-frames.png" });
+  throw new Error(
+    `Output <video> element present but not playing after ${MAX_WAIT_MS}ms — frames not round-tripping`
+  );
 }
 
 /**
- * Stop the stream.
+ * Click the start-stream-button again to stop (it's a toggle — the
+ * PlayOverlay turns into a stop overlay when the stream is running),
+ * with a fallback to a button with a stop-like aria-label.
  */
 async function stopStream(page: Page) {
   console.log("Stopping stream...");
 
-  const stopButton = page
-    .getByRole("button", { name: /stop|end|pause/i })
-    .or(page.locator('[data-testid="stop-stream-button"]'));
-
-  if (await stopButton.isVisible({ timeout: 5000 }).catch(() => false)) {
-    await stopButton.click();
-    await page.waitForTimeout(1000);
-    await page.screenshot({ path: "test-results/09-stream-stopped.png" });
-    console.log("✅ Stream stopped");
+  const stopOverlay = page.locator('[data-testid="start-stream-button"]');
+  if (await stopOverlay.isVisible().catch(() => false)) {
+    await stopOverlay.click();
   } else {
-    console.log("⚠️ Stop button not found, stream may auto-stop");
+    const stopButton = page.getByRole("button", { name: /stop/i });
+    if (await stopButton.isVisible().catch(() => false)) {
+      await stopButton.click();
+    }
   }
+  await page.waitForTimeout(1000);
+  await page.screenshot({ path: "test-results/09-stream-stopped.png" });
+  console.log("✅ Stream stopped");
 }