@agent-native/core 0.70.3 → 0.72.0

package/corpus/templates/clips/chrome-extension/src/offscreen.ts

@@ -3,15 +3,21 @@
 // This document holds the getDisplayMedia()/getUserMedia() stream and the
 // MediaRecorder. Living in an offscreen document (reason DISPLAY_MEDIA) is what
 // lets a recording survive page navigations — the capture is decoupled from any
-// tab. The camera bubble and controls are rendered as on-page overlays by the
-// content script, so we no longer composite the camera into a canvas here; for
-// screen modes we record the display stream directly (+ mixed mic audio), and
-// the bubble shows up in the recording naturally when a full screen/window/tab
-// surface that contains it is captured.
+// tab. Controls render as on-page overlays. For SCREEN+CAMERA we capture the
+// camera HERE and composite it (canvas) into the recording, because the on-page
+// bubble can't get the camera on pages that send `Permissions-Policy: camera=()`
+// (an iframe can't escape its parent's policy). Screen-only records the display
+// directly; camera-only records the webcam directly.
 //
 // Lifecycle: ACQUIRE (show picker, hold stream) → BEGIN (start recorder after
 // the countdown) → PAUSE/RESUME → STOP/CANCEL, plus RESTART (discard and start
 // over on the same stream).
+//
+// MIME selection and the chunk-upload URL/param protocol are shared with the web
+// app recorder via @shared/recording-core so the server contract can't drift.
+
+import { chunkUploadUrl, pickMimeType } from "@shared/recording-core";
+import { scheduleReadyChime } from "@shared/recording-audio";
 
 type CaptureMode = "screen" | "camera";
 
@@ -21,6 +27,9 @@ type AcquireMessage = {
   mode: CaptureMode;
   surface: "browser" | "window" | "monitor";
   includeMicrophone: boolean;
+  // Screen+camera: capture the camera here and composite it into the recording
+  // (the on-page bubble can be blocked by the page's Permissions-Policy).
+  includeCamera: boolean;
 };
 
 type BeginMessage = {
@@ -94,6 +103,13 @@ type ActiveRecording = {
   restarting: boolean;
   // Pending pre-roll timer; non-null means the recorder hasn't started yet.
   startTimer: ReturnType<typeof setTimeout> | null;
+  // Canvas compositor draw loop (screen+camera only); stop it on teardown.
+  stopCompositor: (() => void) | null;
+  // Original capture streams, kept distinct so restart can re-home exactly the
+  // right ones (sourceStreams also holds the derived canvas stream).
+  displaySource: MediaStream | null;
+  cameraSource: MediaStream | null;
+  micSource: MediaStream | null;
   dimensions: { width: number; height: number };
   hasAudio: boolean;
   hasCamera: boolean;
@@ -118,20 +134,6 @@ function reportStatus(
   });
 }
 
-function chooseMimeType(): string {
-  const preferred = [
-    "video/webm;codecs=vp9,opus",
-    "video/webm;codecs=vp8,opus",
-    "video/webm;codecs=opus",
-    "video/webm",
-  ];
-  if (typeof MediaRecorder === "undefined") return "video/webm";
-  return (
-    preferred.find((type) => MediaRecorder.isTypeSupported(type)) ??
-    "video/webm"
-  );
-}
-
 function waitForMetadata(video: HTMLVideoElement): Promise<void> {
   if (video.readyState >= HTMLMediaElement.HAVE_METADATA) {
     return Promise.resolve();
@@ -194,22 +196,140 @@ function displayConstraints(
   } as MediaStreamConstraints;
 }
 
-async function getMicStream(): Promise<MediaStream | null> {
+// The user's chosen camera/mic devices (set in the popup, saved to storage).
+async function readDeviceIds(): Promise<{ video: string; audio: string }> {
   try {
-    return await navigator.mediaDevices.getUserMedia({
-      audio: {
-        echoCancellation: true,
-        noiseSuppression: true,
-        autoGainControl: true,
-        channelCount: 1,
-      },
-      video: false,
-    });
+    const v = await chrome.storage.sync.get(["videoDeviceId", "audioDeviceId"]);
+    return {
+      video: typeof v.videoDeviceId === "string" ? v.videoDeviceId : "",
+      audio: typeof v.audioDeviceId === "string" ? v.audioDeviceId : "",
+    };
+  } catch {
+    return { video: "", audio: "" };
+  }
+}
+
+function cameraConstraints(deviceId: string): MediaTrackConstraints {
+  const base: MediaTrackConstraints = {
+    width: { ideal: 1280 },
+    height: { ideal: 720 },
+  };
+  if (deviceId) base.deviceId = { exact: deviceId };
+  else base.facingMode = "user";
+  return base;
+}
+
+async function getMicStream(deviceId: string): Promise<MediaStream | null> {
+  const audio: MediaTrackConstraints = {
+    echoCancellation: true,
+    noiseSuppression: true,
+    autoGainControl: true,
+    channelCount: 1,
+  };
+  if (deviceId) audio.deviceId = { exact: deviceId };
+  try {
+    return await navigator.mediaDevices.getUserMedia({ audio, video: false });
   } catch {
     return null;
   }
 }
 
+/* ----------------------------------------------------- camera compositing --- */
+
+// On many pages the on-page camera bubble can't run (the page sets
+// `Permissions-Policy: camera=()`, which an iframe cannot escape). So for
+// screen+camera we capture the camera HERE in the offscreen document (extension
+// origin — always allowed) and draw it into a canvas on top of the screen, then
+// record the canvas. The face ends up in the video on every page.
+
+async function readyVideo(stream: MediaStream): Promise<HTMLVideoElement> {
+  const video = document.createElement("video");
+  video.muted = true;
+  video.playsInline = true;
+  video.srcObject = stream;
+  await waitForMetadata(video).catch(() => undefined);
+  await video.play().catch(() => undefined);
+  return video;
+}
+
+function drawCameraBubble(
+  ctx: CanvasRenderingContext2D,
+  camera: HTMLVideoElement,
+  canvas: HTMLCanvasElement,
+): void {
+  const size = Math.round(Math.min(canvas.width, canvas.height) * 0.22);
+  const margin = Math.round(Math.min(canvas.width, canvas.height) * 0.035);
+  const cx = margin + size / 2;
+  const cy = canvas.height - margin - size / 2;
+  const r = size / 2;
+  const vw = camera.videoWidth || size;
+  const vh = camera.videoHeight || size;
+  const scale = Math.max(size / vw, size / vh);
+  const dw = vw * scale;
+  const dh = vh * scale;
+
+  ctx.save();
+  ctx.beginPath();
+  ctx.arc(cx, cy, r, 0, Math.PI * 2);
+  ctx.closePath();
+  ctx.clip();
+  // Mirror the camera horizontally to match how people expect to see themselves.
+  ctx.translate(cx, cy);
+  ctx.scale(-1, 1);
+  ctx.drawImage(camera, -dw / 2, -dh / 2, dw, dh);
+  ctx.restore();
+
+  ctx.save();
+  ctx.beginPath();
+  ctx.arc(cx, cy, r - 1, 0, Math.PI * 2);
+  ctx.lineWidth = Math.max(3, Math.round(size * 0.03));
+  ctx.strokeStyle = "rgba(255,255,255,0.92)";
+  ctx.stroke();
+  ctx.restore();
+}
+
+type Compositor = {
+  videoTrack: MediaStreamTrack;
+  canvasStream: MediaStream;
+  stop: () => void;
+};
+
+async function buildCompositor(
+  displayStream: MediaStream,
+  cameraStream: MediaStream,
+  dims: { width: number; height: number },
+): Promise<Compositor> {
+  const displayVideo = await readyVideo(displayStream);
+  const cameraVideo = await readyVideo(cameraStream);
+  const canvas = document.createElement("canvas");
+  canvas.width = dims.width;
+  canvas.height = dims.height;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) throw new Error("Canvas 2D context unavailable for compositing.");
+
+  let running = true;
+  let raf = 0;
+  const draw = () => {
+    if (!running) return;
+    ctx.drawImage(displayVideo, 0, 0, canvas.width, canvas.height);
+    if (cameraVideo.readyState >= 2) drawCameraBubble(ctx, cameraVideo, canvas);
+    raf = requestAnimationFrame(draw);
+  };
+  raf = requestAnimationFrame(draw);
+
+  const canvasStream = canvas.captureStream(30);
+  return {
+    videoTrack: canvasStream.getVideoTracks()[0],
+    canvasStream,
+    stop: () => {
+      running = false;
+      cancelAnimationFrame(raf);
+      displayVideo.srcObject = null;
+      cameraVideo.srcObject = null;
+    },
+  };
+}
+
 async function createMixedAudio(
   streams: MediaStream[],
 ): Promise<{ audioContext: AudioContext | null; tracks: MediaStreamTrack[] }> {
@@ -230,21 +350,6 @@ async function createMixedAudio(
   return { audioContext, tracks: destination.stream.getAudioTracks() };
 }
 
-function appendUploadParams(
-  uploadUrl: string,
-  params: Record<string, string | number | boolean | undefined>,
-): string {
-  const url = new URL(uploadUrl);
-  for (const [key, value] of Object.entries(params)) {
-    if (value === undefined) continue;
-    url.searchParams.set(
-      key,
-      typeof value === "boolean" ? (value ? "1" : "0") : String(value),
-    );
-  }
-  return url.toString();
-}
-
 async function uploadChunk(
   recording: ActiveRecording,
   blob: Blob,
@@ -259,10 +364,10 @@ async function uploadChunk(
     hasCamera?: boolean;
   } = {},
 ): Promise<UploadResult> {
-  const url = appendUploadParams(recording.uploadUrl, {
+  const url = chunkUploadUrl(recording.uploadUrl, {
     index,
     total: extra.total,
-    isFinal: extra.isFinal ? 1 : 0,
+    isFinal: extra.isFinal,
     mimeType: recording.mimeType,
     durationMs: extra.durationMs,
     width: extra.width,
@@ -287,6 +392,13 @@ async function uploadChunk(
   const text = await res.text().catch(() => "");
   const data = text ? (JSON.parse(text) as UploadResult) : {};
   if (!res.ok) {
+    console.error(
+      "[clips-offscreen] chunk upload failed",
+      res.status,
+      "hadAuth:",
+      Boolean(recording.authToken),
+      text.slice(0, 200),
+    );
     throw new Error(
       data?.error || `Upload failed (${res.status}): ${text || res.statusText}`,
     );
@@ -310,6 +422,7 @@ function disposePrepared(): void {
 }
 
 function cleanup(recording: ActiveRecording): void {
+  recording.stopCompositor?.();
   stopStreams([recording.outputStream, ...recording.sourceStreams]);
   void recording.audioContext?.close().catch(() => undefined);
 }
@@ -329,22 +442,29 @@ async function acquire(message: AcquireMessage): Promise<{
   let displayStream: MediaStream | null = null;
   let micStream: MediaStream | null = null;
   let cameraStream: MediaStream | null = null;
+  const devices = await readDeviceIds();
 
   if (message.mode === "camera") {
     cameraStream = await navigator.mediaDevices.getUserMedia({
-      video: {
-        width: { ideal: 1280 },
-        height: { ideal: 720 },
-        facingMode: "user",
-      },
-      audio: message.includeMicrophone,
+      video: cameraConstraints(devices.video),
+      audio: message.includeMicrophone
+        ? devices.audio
+          ? { deviceId: { exact: devices.audio } }
+          : true
+        : false,
     });
   } else {
     // Native "Choose what to share" picker. This is the screenshot Steve showed.
     displayStream = await navigator.mediaDevices.getDisplayMedia(
       displayConstraints(message.surface),
     );
-    if (message.includeMicrophone) micStream = await getMicStream();
+    if (message.includeMicrophone)
+      micStream = await getMicStream(devices.audio);
+    // The screen+camera face comes from the on-page bubble (captured in the
+    // display pixels), NOT composited here: canvas/requestAnimationFrame does
+    // not run in a hidden offscreen document, so compositing produced an empty
+    // recording ("No chunks found"). We record the display stream directly.
+    void message.includeCamera;
   }
 
   const videoStream = displayStream ?? cameraStream;
@@ -401,8 +521,24 @@ async function begin(message: BeginMessage): Promise<{
   if (activeRecording) throw new Error("Clips is already recording.");
 
   const videoStream = ready.displayStream ?? ready.cameraStream;
-  const videoTrack = videoStream?.getVideoTracks()[0];
-  if (!videoTrack) throw new Error("Capture video track was lost.");
+  const directVideoTrack = videoStream?.getVideoTracks()[0];
+  if (!directVideoTrack) throw new Error("Capture video track was lost.");
+
+  // Screen + camera → composite the camera bubble into a canvas and record that,
+  // so the face is in the video even on pages that block the on-page bubble.
+  let compositor: Compositor | null = null;
+  let videoTrack = directVideoTrack;
+  if (ready.displayStream && ready.cameraStream) {
+    compositor = await buildCompositor(
+      ready.displayStream,
+      ready.cameraStream,
+      {
+        width: ready.width,
+        height: ready.height,
+      },
+    );
+    videoTrack = compositor.videoTrack;
+  }
 
   const audioInputs = [
     ...(ready.displayStream ? [ready.displayStream] : []),
@@ -414,7 +550,7 @@ async function begin(message: BeginMessage): Promise<{
   const mixedAudio = await createMixedAudio(audioInputs);
 
   const outputStream = new MediaStream([videoTrack, ...mixedAudio.tracks]);
-  const mimeType = chooseMimeType();
+  const mimeType = pickMimeType() || "video/webm";
   const recorder = new MediaRecorder(outputStream, {
     mimeType,
     // Crisp 1080p capture — matches the web/desktop recorders. Files upload
@@ -444,6 +580,7 @@ async function begin(message: BeginMessage): Promise<{
       ...(ready.displayStream ? [ready.displayStream] : []),
       ...(ready.micStream ? [ready.micStream] : []),
       ...(ready.cameraStream ? [ready.cameraStream] : []),
+      ...(compositor ? [compositor.canvasStream] : []),
     ],
     audioContext: mixedAudio.audioContext,
     chunkIndex: 0,
@@ -452,6 +589,10 @@ async function begin(message: BeginMessage): Promise<{
     cancelled: false,
     restarting: false,
     startTimer: null,
+    stopCompositor: compositor?.stop ?? null,
+    displaySource: ready.displayStream,
+    cameraSource: ready.cameraStream,
+    micSource: ready.micStream,
     dimensions: { width: ready.width, height: ready.height },
     hasAudio: outputStream.getAudioTracks().length > 0,
     hasCamera:
@@ -476,6 +617,10 @@ async function begin(message: BeginMessage): Promise<{
       return;
     }
     const index = recording.chunkIndex++;
+    // Record the failure and stop, but do NOT re-throw: re-throwing leaves a
+    // rejected promise that surfaces as an "Uncaught (in promise)" error (bad
+    // look in a Chrome Web Store review). finalizeStop reads recording.upload-
+    // Failure and surfaces it through the normal error path instead.
     const upload = uploadChunk(recording, event.data, index).catch((err) => {
       recording.uploadFailure =
         err instanceof Error ? err : new Error(String(err));
@@ -483,7 +628,6 @@ async function begin(message: BeginMessage): Promise<{
         error: recording.uploadFailure.message,
       });
       if (recorder.state !== "inactive") recorder.stop();
-      throw recording.uploadFailure;
     });
     recording.uploadPromises.push(upload);
   });
@@ -513,11 +657,28 @@ async function begin(message: BeginMessage): Promise<{
   };
 }
 
+// The canonical Clips "ready" chime when recording starts — shared with the web
+// app recorder (and matching the desktop app) so every surface sounds the same.
+function playStartChime(): void {
+  try {
+    const ctx = new AudioContext();
+    void ctx.resume().catch(() => undefined);
+    void scheduleReadyChime(ctx).finally(() => {
+      void ctx.close().catch(() => undefined);
+    });
+  } catch {
+    /* audio unavailable */
+  }
+}
+
 function startRecorderNow(recording: ActiveRecording): void {
   if (recording.cancelled) return;
   try {
+    // Chime first (on "Go") so it mostly lands before the recording begins.
+    playStartChime();
     recording.recorder.start(2000);
     recording.startedAtMs = Date.now();
+    console.log("[clips-offscreen] recorder.start ok");
     reportStatus(recording.sessionId, "recording", {
       recordingId: recording.recordingId,
       width: recording.dimensions.width,
@@ -559,6 +720,27 @@ async function finalizeStop(recording: ActiveRecording): Promise<void> {
         : new Error(String(rejected.reason));
     }
     const durationMs = Math.max(0, Date.now() - recording.startedAtMs);
+    // Surface WHY a finalize might fail before the server's cryptic "No chunks
+    // found": 0 chunks means the recorder emitted no non-empty data (empty
+    // capture / never started), which is a different problem than an auth 401.
+    if (recording.chunkIndex === 0) {
+      console.warn(
+        "[clips-offscreen] finalizing with 0 chunks — empty recording.",
+        "recorderStarted:",
+        recording.startedAtMs > 0,
+        "durationMs:",
+        durationMs,
+        "hadAuth:",
+        Boolean(recording.authToken),
+      );
+    } else {
+      console.log(
+        "[clips-offscreen] finalizing",
+        recording.chunkIndex,
+        "chunk(s), durationMs:",
+        durationMs,
+      );
+    }
     const result = await uploadChunk(
       recording,
       new Blob([], { type: recording.mimeType }),
@@ -685,22 +867,18 @@ async function restart(
   recording.restarting = true;
   recording.cancelled = true;
   if (recording.recorder.state !== "inactive") recording.recorder.stop();
-  // Close only the old mixing context; keep the capture tracks alive.
+  // Tear down the old compositor + mixing context; keep the capture tracks alive
+  // so the next BEGIN can build a fresh compositor/recorder on the same streams.
+  recording.stopCompositor?.();
   void recording.audioContext?.close().catch(() => undefined);
   activeRecording = null;
 
-  const videoStream =
-    recording.sourceStreams.find((s) => s.getVideoTracks().length) ?? null;
-  const isCamera = recording.mode === "camera";
   prepared = {
     sessionId: recording.sessionId,
     mode: recording.mode,
-    displayStream: isCamera ? null : videoStream,
-    cameraStream: isCamera ? videoStream : null,
-    micStream:
-      recording.sourceStreams.find(
-        (s) => s.getAudioTracks().length && s !== videoStream,
-      ) ?? null,
+    displayStream: recording.displaySource,
+    cameraStream: recording.cameraSource,
+    micStream: recording.micSource,
     width: recording.dimensions.width,
     height: recording.dimensions.height,
     endedListener: null,

package/corpus/templates/clips/chrome-extension/src/overlay.css

@@ -1,5 +1,8 @@
 :root {
-  color-scheme: light dark;
+  /* "dark" to match the dark overlay: a declared color-scheme always paints an
+     opaque iframe canvas, so we keep it dark rather than white. Shaped parts clip
+     the canvas away (see content-script styleFrame); the countdown uses it. */
+  color-scheme: dark;
 }
 
 * {
@@ -39,10 +42,8 @@ body {
   height: 100%;
   border-radius: 50%;
   overflow: hidden;
-  background: #0f172a;
-  box-shadow:
-    0 10px 30px rgba(15, 23, 42, 0.35),
-    0 0 0 4px rgba(255, 255, 255, 0.92);
+  background: #18181b;
+  border: 3px solid rgba(255, 255, 255, 0.92);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -75,7 +76,7 @@ body {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: rgba(2, 6, 23, 0.55);
+  background: rgba(9, 9, 11, 0.55);
   backdrop-filter: blur(2px);
 }
 
@@ -126,9 +127,9 @@ body {
   font-size: clamp(96px, 22vmin, 240px);
   font-weight: 700;
   color: #fff;
-  text-shadow: 0 6px 30px rgba(2, 6, 23, 0.6);
+  text-shadow: 0 6px 30px rgba(9, 9, 11, 0.6);
   line-height: 1;
-  animation: countdown-pop 1s ease-out forwards;
+  animation: countdown-pop 0.45s ease-out forwards;
 }
 
 .countdown-go {
@@ -138,21 +139,17 @@ body {
 
 @keyframes countdown-pop {
   0% {
-    transform: scale(0.45);
+    transform: scale(0.55);
     opacity: 0;
   }
-  25% {
-    transform: scale(1);
+  45% {
+    transform: scale(1.08);
     opacity: 1;
   }
-  70% {
+  100% {
     transform: scale(1);
     opacity: 1;
   }
-  100% {
-    transform: scale(1.25);
-    opacity: 0;
-  }
 }
 
 .countdown-hint {
@@ -163,7 +160,7 @@ body {
   color: rgba(255, 255, 255, 0.85);
   font-size: 15px;
   font-weight: 500;
-  background: rgba(2, 6, 23, 0.45);
+  background: rgba(9, 9, 11, 0.45);
   padding: 8px 16px;
   border-radius: 999px;
 }
@@ -181,19 +178,22 @@ body {
 }
 
 .toolbar-v {
+  /* Fill the iframe so the (opaque) iframe canvas is fully covered by the pill —
+     the iframe is clipped to this same 20px radius in styleFrame, so no canvas
+     box shows. Top-anchored content (justify-content:flex-start) keeps Stop/time/
+     pause put as the pill grows DOWNWARD on hover (centering caused misclicks).
+     Shadow lives on the iframe element so the clip doesn't cut it off. */
   position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
+  inset: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
+  justify-content: flex-start;
   gap: 8px;
   padding: 9px;
   border-radius: 20px;
-  background: rgba(15, 23, 42, 0.94);
+  background: rgba(24, 24, 27, 0.94);
   border: 1px solid rgba(255, 255, 255, 0.1);
-  box-shadow: 0 10px 28px rgba(2, 6, 23, 0.45);
   color: #fff;
   -webkit-user-select: none;
   user-select: none;
@@ -323,30 +323,11 @@ body {
   gap: 9px;
   padding: 14px 16px;
   border-radius: 14px;
-  background: rgba(15, 23, 42, 0.95);
+  background: rgba(24, 24, 27, 0.95);
   border: 1px solid rgba(255, 255, 255, 0.1);
-  box-shadow: 0 10px 28px rgba(2, 6, 23, 0.45);
   color: #fff;
 }
 
-.saving-card .saving-spinner {
-  position: absolute;
-  top: 14px;
-  right: 14px;
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-  border: 2px solid rgba(255, 255, 255, 0.25);
-  border-top-color: #fff;
-  animation: saving-spin 0.8s linear infinite;
-}
-
-@keyframes saving-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
 .saving-caption {
   font-size: 14px;
   font-weight: 600;
@@ -363,7 +344,7 @@ body {
   height: 100%;
   width: 40%;
   border-radius: 999px;
-  background: #6366f1;
+  background: #d4d4d8;
   animation: saving-indeterminate 1.1s ease-in-out infinite;
 }
 
@@ -375,3 +356,56 @@ body {
     margin-left: 100%;
   }
 }
+
+/* Bubble size dots (small / large), revealed on hover — desktop-style. */
+.bubble-sizes {
+  position: absolute;
+  bottom: 7%;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  padding: 5px 9px;
+  border-radius: 999px;
+  background: rgba(9, 9, 11, 0.55);
+  -webkit-backdrop-filter: blur(4px);
+  backdrop-filter: blur(4px);
+  opacity: 0;
+  transition: opacity 0.15s ease;
+  pointer-events: none;
+}
+
+.bubble:hover .bubble-sizes {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.bubble-size-dot {
+  border: none;
+  padding: 0;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.55);
+  cursor: pointer;
+  transition:
+    background 0.12s ease,
+    transform 0.1s ease;
+}
+
+.bubble-size-dot:hover {
+  background: #fff;
+}
+
+.bubble-size-dot:active {
+  transform: scale(0.9);
+}
+
+.bubble-size-sm {
+  width: 8px;
+  height: 8px;
+}
+
+.bubble-size-lg {
+  width: 13px;
+  height: 13px;
+}

package/corpus/templates/clips/chrome-extension/src/overlay.html

@@ -2,7 +2,13 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="color-scheme" content="light dark" />
+    <!-- A declared color-scheme always makes Chrome paint an OPAQUE iframe canvas
+         (white for light, dark for dark) — it can't be made transparent. The
+         overlay is dark-themed, so we use "dark" to keep that canvas dark rather
+         than a jarring white. The shaped parts (bubble/toolbar/saving) clip their
+         iframe to the content shape so the canvas never shows; only the
+         full-screen countdown relies on this dark value. -->
+    <meta name="color-scheme" content="dark" />
     <title>Clips overlay</title>
   </head>
   <body>