From 48315a45dd0d7b1e41507fa856784e5a65c7fad5 Mon Sep 17 00:00:00 2001
From: Richie McIlroy <33632126+richiemcilroy@users.noreply.github.com>
Date: Thu, 29 Oct 2026 15:06:46 +0000
Subject: [PATCH 01/28] fix(chrome-extension): restore the in-page recorder
 panel and camera preview controls

---
 apps/chrome-extension/src/content/overlay.css |  31 --
 apps/chrome-extension/src/content/overlay.tsx | 278 +++++++++++++++++-
 2 files changed, 263 insertions(+), 46 deletions(-)

diff --git a/apps/chrome-extension/src/content/overlay.css b/apps/chrome-extension/src/content/overlay.css
index 2202cb47c88..fd13f7c1136 100644
--- a/apps/chrome-extension/src/content/overlay.css
+++ b/apps/chrome-extension/src/content/overlay.css
@@ -266,37 +266,6 @@
 	border-radius: 0 0 6px;
 }
 
-.cap-extension-camera-dismiss-btn {
-	position: absolute;
-	top: 10px;
-	right: 10px;
-	z-index: 12;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	width: 26px;
-	height: 26px;
-	border: none;
-	border-radius: 50%;
-	background: rgba(18, 18, 23, 0.65);
-	color: #ffffff;
-	cursor: pointer;
-	opacity: 0;
-	pointer-events: none;
-	transition: all 140ms ease;
-	backdrop-filter: blur(8px);
-}
-
-.cap-extension-camera-window:hover .cap-extension-camera-dismiss-btn {
-	opacity: 1;
-	pointer-events: auto;
-}
-
-.cap-extension-camera-dismiss-btn:hover {
-	background: rgba(239, 68, 68, 0.9);
-	transform: scale(1.1);
-}
-
 .cap-extension-camera-iframe {
 	position: absolute;
 	inset: 0;
diff --git a/apps/chrome-extension/src/content/overlay.tsx b/apps/chrome-extension/src/content/overlay.tsx
index f7f2946cef4..7725c58c850 100644
--- a/apps/chrome-extension/src/content/overlay.tsx
+++ b/apps/chrome-extension/src/content/overlay.tsx
@@ -1,4 +1,12 @@
-import { X } from "lucide-react";
+import {
+	Circle,
+	FlipHorizontal,
+	Maximize2,
+	PictureInPicture,
+	RectangleHorizontal,
+	Square,
+	X,
+} from "lucide-react";
 import {
 	type PointerEvent as ReactPointerEvent,
 	useCallback,
@@ -48,6 +56,10 @@ import { replayStartupMessages, setStartupMessages } from "./startup-messages";
 const ROOT_ID = "cap-extension-recorder-overlay";
 const WINDOW_PADDING = 20;
 const BAR_HEIGHT = 52;
+// The iframe tokens are readable from the host page DOM (they sit in the
+// iframe src), so token checks alone cannot authenticate window messages.
+// Frames we embed always run on the extension origin; require it too.
+const EXTENSION_ORIGIN = new URL(chrome.runtime.getURL("")).origin;
 const createSecureToken = () => {
 	if (typeof crypto.randomUUID === "function") return crypto.randomUUID();
 	const bytes = new Uint8Array(16);
@@ -61,6 +73,12 @@ const PREVIEW_TOKEN = createSecureToken();
 const PREVIEW_URL = chrome.runtime.getURL("camera-preview.html");
 const PREVIEW_SRC = `${PREVIEW_URL}#${encodeURIComponent(PREVIEW_TOKEN)}`;
 const PREVIEW_ERROR_DELAY_MS = 1200;
+const PANEL_TOKEN = createSecureToken();
+const PANEL_URL = chrome.runtime.getURL("popup.html");
+const PANEL_SRC = `${PANEL_URL}#${encodeURIComponent(PANEL_TOKEN)}`;
+const PANEL_WIDTH = 300;
+const PANEL_DEFAULT_HEIGHT = 460;
+const PANEL_MARGIN = 16;
 const CAMERA_MIN_SIZE = 120;
 const CAMERA_MAX_SIZE = 420;
 const CAMERA_RESIZE_CORNERS = ["nw", "ne", "sw", "se"] as const;
@@ -78,7 +96,7 @@ let overlayTokensRegistration: Promise<boolean> | null = null;
 
 const ensureOverlayTokensRegistered = () => {
 	overlayTokensRegistration ??= Promise.all(
-		[PREVIEW_TOKEN].map((token) =>
+		[PREVIEW_TOKEN, PANEL_TOKEN].map((token) =>
 			sendServiceWorkerMessage({
 				target: "service-worker",
 				type: "register-overlay-token",
@@ -314,6 +332,127 @@ const connectCameraPreview = async (
 	};
 };
 
+type PanelFrameMessage =
+	| {
+			source: "cap-extension-panel";
+			token: string;
+			type: "size";
+			height: number;
+	  }
+	| {
+			source: "cap-extension-panel";
+			token: string;
+			type: "dismiss";
+	  };
+
+const isPanelFrameMessage = (value: unknown): value is PanelFrameMessage => {
+	if (!value || typeof value !== "object") return false;
+	const candidate = value as Partial<PanelFrameMessage>;
+	if (
+		candidate.source !== "cap-extension-panel" ||
+		candidate.token !== PANEL_TOKEN
+	) {
+		return false;
+	}
+	if (candidate.type === "dismiss") return true;
+	return (
+		candidate.type === "size" &&
+		typeof candidate.height === "number" &&
+		Number.isFinite(candidate.height)
+	);
+};
+
+function RecorderPanelOverlay({
+	open,
+	onClose,
+}: {
+	open: boolean;
+	onClose: () => void;
+}) {
+	const [pageVisible, setPageVisible] = useState(
+		() => document.visibilityState === "visible",
+	);
+	const [contentHeight, setContentHeight] = useState(PANEL_DEFAULT_HEIGHT);
+	const [viewportHeight, setViewportHeight] = useState(
+		() => window.innerHeight,
+	);
+	const [tokenReady, setTokenReady] = useState(false);
+
+	useEffect(() => {
+		if (!open || tokenReady) return;
+		let disposed = false;
+		void ensureOverlayTokensRegistered().then((registered) => {
+			if (!disposed && registered) setTokenReady(true);
+		});
+		return () => {
+			disposed = true;
+		};
+	}, [open, tokenReady]);
+
+	useEffect(() => {
+		const handleVisibility = () =>
+			setPageVisible(document.visibilityState === "visible");
+		document.addEventListener("visibilitychange", handleVisibility);
+		return () =>
+			document.removeEventListener("visibilitychange", handleVisibility);
+	}, []);
+
+	useEffect(() => {
+		const handleFrameMessage = (event: MessageEvent<unknown>) => {
+			if (event.origin !== EXTENSION_ORIGIN) return;
+			if (!isPanelFrameMessage(event.data)) return;
+			if (event.data.type === "size") {
+				setContentHeight(Math.max(320, Math.ceil(event.data.height)));
+				return;
+			}
+			onClose();
+		};
+
+		window.addEventListener("message", handleFrameMessage);
+		return () => window.removeEventListener("message", handleFrameMessage);
+	}, [onClose]);
+
+	useEffect(() => {
+		if (!open) return;
+		const handleResize = () => setViewportHeight(window.innerHeight);
+		handleResize();
+		window.addEventListener("resize", handleResize);
+		return () => window.removeEventListener("resize", handleResize);
+	}, [open]);
+
+	// Only the tab on screen renders the iframe; hidden tabs keep just the
+	// shared flag so the panel reappears instantly when they come forward.
+	// The iframe also waits for its token registration so the panel page can
+	// verify it was embedded by this extension.
+	if (!open || !pageVisible || !tokenReady) return null;
+
+	const height = Math.min(contentHeight, viewportHeight - PANEL_MARGIN * 2);
+
+	return (
+		<>
+			<button
+				type="button"
+				className="cap-extension-panel-backdrop"
+				aria-label="Dismiss Cap recorder"
+				onClick={onClose}
+			/>
+			<div
+				className="cap-extension-panel"
+				role="dialog"
+				aria-label="Cap recorder"
+				style={{ width: `${PANEL_WIDTH}px`, height: `${height}px` }}
+			>
+				<iframe
+					src={PANEL_SRC}
+					title="Cap recorder"
+					allow="camera; microphone; autoplay"
+					className="cap-extension-panel-iframe"
+				/>
+			</div>
+		</>
+	);
+}
+
 function OverlayApp() {
 	const [extensionSettings, setExtensionSettings] =
 		useState<ExtensionSettings | null>(null);
@@ -333,6 +472,7 @@ function OverlayApp() {
 	const [previewError, setPreviewError] = useState<string | null>(null);
 	const [showPreviewError, setShowPreviewError] = useState(false);
 	const [iframeReady, setIframeReady] = useState(false);
+	const [pipSupported, setPipSupported] = useState(false);
 	const [parentPipActive, setParentPipActive] = useState(false);
 	const [framePipActive, setFramePipActive] = useState(false);
 	const [previewOpen, setPreviewOpen] = useState(false);
@@ -1163,6 +1303,7 @@ function OverlayApp() {
 				return false;
 			}
 
+			setPipSupported(event.supported);
 			setFramePipActive(event.active);
 			return false;
 		};
@@ -1193,6 +1334,7 @@ function OverlayApp() {
 			setLivePreviewReady(false);
 			setPreviewError(null);
 			setShowPreviewError(false);
+			setPipSupported(false);
 			setFramePipActive(false);
 			postPreviewMessage({
 				source: "cap-extension-overlay",
@@ -1429,6 +1571,33 @@ function OverlayApp() {
 		}));
 	}, [applyWebcamSettings]);
 
+	const updateSize = useCallback(() => {
+		applyWebcamSettings((current) => ({
+			...current,
+			size: current.size <= 230 ? 400 : 230,
+		}));
+	}, [applyWebcamSettings]);
+
+	const updateMirror = useCallback(() => {
+		applyWebcamSettings((current) => ({
+			...current,
+			mirror: !current.mirror,
+		}));
+	}, [applyWebcamSettings]);
+
+	const closeRecorderPanel = useCallback(() => {
+		setRecorderPanelOpen(false);
+		void sendServiceWorkerMessage({
+			target: "service-worker",
+			type: "close-extension-ui",
+		}).catch(() => undefined);
+		void updateSharedUiState((current) => ({
+			...current,
+			panelOpen: false,
+			updatedAt: Date.now(),
+		})).catch(() => undefined);
+	}, []);
+
 	const handleTogglePictureInPicture = useCallback(() => {
 		const video = pipVideoRef.current;
 		if (video && document.pictureInPictureElement === video) {
@@ -1519,6 +1688,94 @@ function OverlayApp() {
 					className="cap-extension-camera-shell"
 					style={{ borderRadius }}
 				>
+					<div className="cap-extension-camera-bar">
+						<div
+							data-controls
+							className="cap-extension-camera-controls"
+							role="toolbar"
+							aria-label="Camera preview controls"
+							onPointerDown={(event) => event.stopPropagation()}
+							onClick={(event) => event.stopPropagation()}
+							onKeyDown={(event) => {
+								if (event.key === "Escape") {
+									event.stopPropagation();
+									handleClose();
+								}
+							}}
+						>
+							<button
+								type="button"
+								className="cap-extension-camera-control"
+								aria-label="Close camera preview"
+								title="Close"
+								onClick={handleClose}
+							>
+								<X size={22} aria-hidden />
+							</button>
+							<button
+								type="button"
+								className={classNames(
+									"cap-extension-camera-control",
+									webcam.size > 230 && "is-active",
+								)}
+								aria-label="Resize camera preview"
+								title="Resize"
+								onClick={updateSize}
+							>
+								<Maximize2 size={22} aria-hidden />
+							</button>
+							<button
+								type="button"
+								className={classNames(
+									"cap-extension-camera-control",
+									webcam.shape !== "round" && "is-active",
+								)}
+								aria-label="Change camera preview shape"
+								title="Shape"
+								onClick={updateShape}
+							>
+								{webcam.shape === "round" ? (
+									<Circle size={22} aria-hidden />
+								) : null}
+								{webcam.shape === "square" ? (
+									<Square size={22} aria-hidden />
+								) : null}
+								{webcam.shape === "full" ? (
+									<RectangleHorizontal size={22} aria-hidden />
+								) : null}
+							</button>
+							<button
+								type="button"
+								className={classNames(
+									"cap-extension-camera-control",
+									webcam.mirror && "is-active",
+								)}
+								aria-label="Mirror camera preview"
+								title="Mirror"
+								onClick={updateMirror}
+							>
+								<FlipHorizontal size={22} aria-hidden />
+							</button>
+							<button
+								type="button"
+								className={classNames(
+									"cap-extension-camera-control",
+									isInPictureInPicture && "is-active",
+								)}
+								aria-label="Toggle Picture in Picture"
+								title={
+									parentPipSupported || pipSupported
+										? "Picture in Picture"
+										: "Picture in Picture is blocked on this page"
+								}
+								disabled={!parentPipSupported && !pipSupported}
+								onClick={handleTogglePictureInPicture}
+							>
+								<PictureInPicture size={22} aria-hidden />
+							</button>
+						</div>
+					</div>
+
 					<div
 						ref={cameraFrameRef}
 						className={classNames(
@@ -1533,19 +1790,6 @@ function OverlayApp() {
 							borderRadius,
 						}}
 					>
-						<button
-							type="button"
-							className="cap-extension-camera-dismiss-btn"
-							aria-label="Close camera preview"
-							title="Close camera"
-							data-controls
-							onClick={(e) => {
-								e.stopPropagation();
-								handleClose();
-							}}
-						>
-							<X size={14} aria-hidden />
-						</button>
 						{lastPreviewFrame ? (
 							<img
 								src={lastPreviewFrame.dataUrl}
@@ -1628,6 +1872,10 @@ function OverlayApp() {
 				disablePictureInPicture={false}
 				controlsList="nodownload nofullscreen noremoteplayback"
 			/>
+			<RecorderPanelOverlay
+				open={recorderPanelOpen}
+				onClose={closeRecorderPanel}
+			/>
 			<RecordingBarOverlay
 				recorderPanelOpen={recorderPanelOpen}
 				webcam={webcam}

From 1ca846b462069e04b3fa3541bc5093a87365a798 Mon Sep 17 00:00:00 2001
From: Richie McIlroy <33632126+richiemcilroy@users.noreply.github.com>
Date: Thu, 29 Oct 2026 15:06:46 +0000
Subject: [PATCH 02/28] fix(chrome-extension): show the camera preview again
 when the recorder reopens

---
 apps/chrome-extension/src/content/overlay.tsx | 99 +++++++++++--------
 1 file changed, 58 insertions(+), 41 deletions(-)

diff --git a/apps/chrome-extension/src/content/overlay.tsx b/apps/chrome-extension/src/content/overlay.tsx
index 7725c58c850..64b430a81a2 100644
--- a/apps/chrome-extension/src/content/overlay.tsx
+++ b/apps/chrome-extension/src/content/overlay.tsx
@@ -504,6 +504,7 @@ function OverlayApp() {
 	const previewOpenRef = useRef(false);
 	const livePreviewReadyRef = useRef(false);
 	const previewDismissedRef = useRef(false);
+	const previewVisibilityGenerationRef = useRef(0);
 	const lastFrameRef = useRef<WebcamPreviewFrame | null>(null);
 	const lastFrameSavedAtRef = useRef(0);
 	const startupReplayedRef = useRef(false);
@@ -883,6 +884,7 @@ function OverlayApp() {
 			}
 
 			if (message.type === "overlay-hide") {
+				previewVisibilityGenerationRef.current += 1;
 				recordingPreviewActiveRef.current = false;
 				setRecordingPreviewActive(false);
 				stopLocalPreview();
@@ -931,48 +933,61 @@ function OverlayApp() {
 
 			if (message.type !== "overlay-settings") return false;
 
-			if (previewDismissedRef.current) return false;
-
-			const webcamSettings = message.settings;
-			const sameLivePreview =
-				previewOpenRef.current &&
-				livePreviewReadyRef.current &&
-				isSameWebcamSettings(webcamRef.current, webcamSettings);
-			if (!sameLivePreview) {
-				setLivePreviewReady(false);
-			} else {
-				// A restarted service worker loses which tab owns the live preview,
-				// so re-announce readiness whenever it pushes the same settings.
-				void sendServiceWorkerMessage({
-					target: "service-worker",
-					type: "webcam-preview-ready",
-				}).catch(() => undefined);
-			}
-			setPreviewError(null);
-			setShowPreviewError(false);
-			setPreviewOpen(true);
-			recordingPreviewActiveRef.current = message.recording;
-			setRecordingPreviewActive(message.recording);
-			if (settingsRef.current) {
-				setExtensionSettings({
-					...settingsRef.current,
-					webcam: webcamSettings,
+			// The service worker clears the dismissed flag right before it pushes
+			// these settings, but this tab only hears about that through an async
+			// storage change. Re-read the flag so a reopened recorder is not
+			// dropped as still dismissed. A hide or newer push that lands while the
+			// read is pending wins.
+			previewVisibilityGenerationRef.current += 1;
+			const generation = previewVisibilityGenerationRef.current;
+			void loadWebcamPreviewDismissed()
+				.catch(() => previewDismissedRef.current)
+				.then((dismissed) => {
+					if (previewVisibilityGenerationRef.current !== generation) return;
+					previewDismissedRef.current = dismissed;
+					if (dismissed) return;
+
+					const webcamSettings = message.settings;
+					const sameLivePreview =
+						previewOpenRef.current &&
+						livePreviewReadyRef.current &&
+						isSameWebcamSettings(webcamRef.current, webcamSettings);
+					if (!sameLivePreview) {
+						setLivePreviewReady(false);
+					} else {
+						// A restarted service worker loses which tab owns the live preview,
+						// so re-announce readiness whenever it pushes the same settings.
+						void sendServiceWorkerMessage({
+							target: "service-worker",
+							type: "webcam-preview-ready",
+						}).catch(() => undefined);
+					}
+					setPreviewError(null);
+					setShowPreviewError(false);
+					setPreviewOpen(true);
+					recordingPreviewActiveRef.current = message.recording;
+					setRecordingPreviewActive(message.recording);
+					if (settingsRef.current) {
+						setExtensionSettings({
+							...settingsRef.current,
+							webcam: webcamSettings,
+						});
+					} else {
+						sendServiceWorkerMessage({
+							target: "service-worker",
+							type: "get-overlay-settings",
+						})
+							.then((response) => {
+								if (response.ok && response.settings) {
+									setExtensionSettings({
+										...response.settings,
+										webcam: webcamSettings,
+									});
+								}
+							})
+							.catch(() => undefined);
+					}
 				});
-			} else {
-				sendServiceWorkerMessage({
-					target: "service-worker",
-					type: "get-overlay-settings",
-				})
-					.then((response) => {
-						if (response.ok && response.settings) {
-							setExtensionSettings({
-								...response.settings,
-								webcam: webcamSettings,
-							});
-						}
-					})
-					.catch(() => undefined);
-			}
 			return false;
 		};
 
@@ -1550,6 +1565,7 @@ function OverlayApp() {
 	}, [endDrag, handlePointerMove, isDragging]);
 
 	const handleClose = useCallback(() => {
+		previewVisibilityGenerationRef.current += 1;
 		previewDismissedRef.current = true;
 		stopLocalPreview();
 		setRecordingPreviewActive(false);
@@ -1883,6 +1899,7 @@ function OverlayApp() {
 				onToggleWebcam={() => {
 					if (!webcam) return;
 					const nextEnabled = !webcam.enabled;
+					previewVisibilityGenerationRef.current += 1;
 					previewDismissedRef.current = !nextEnabled;
 					setRecordingPreviewActive(nextEnabled);
 					setPreviewOpen(nextEnabled);

From 669354ea00c9660ad96833dacc1f091973f5b167 Mon Sep 17 00:00:00 2001
From: Richie McIlroy <33632126+richiemcilroy@users.noreply.github.com>
Date: Thu, 29 Oct 2026 15:06:46 +0000
Subject: [PATCH 03/28] fix(chrome-extension): keep the pre-roll countdown
 visible in the recorded tab

---
 .../src/background/service-worker.ts                 | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/apps/chrome-extension/src/background/service-worker.ts b/apps/chrome-extension/src/background/service-worker.ts
index d3d3e65f4ff..b95e1fc6e74 100644
--- a/apps/chrome-extension/src/background/service-worker.ts
+++ b/apps/chrome-extension/src/background/service-worker.ts
@@ -820,6 +820,7 @@ const broadcastOverlayHide = async () => {
 const broadcastOverlayCountdown = async (
 	seconds: number,
 	durationMs: number,
+	recordedTabId?: number,
 ) => {
 	const tabs = await getTabs();
 	await Promise.all(
@@ -827,6 +828,9 @@ const broadcastOverlayCountdown = async (
 			if (!canInjectIntoTab(tab) || tab.id === undefined) {
 				return undefined;
 			}
+			// The recorded tab may still be lazy-loading its overlay when the
+			// countdown starts, so it gets the injecting, retrying send that keeps
+			// the count visible there.
 			return sendOverlay(
 				tab.id,
 				{
@@ -834,7 +838,7 @@ const broadcastOverlayCountdown = async (
 					seconds,
 					durationMs,
 				},
-				false,
+				tab.id === recordedTabId,
 			).catch(() => undefined);
 		}),
 	);
@@ -1772,7 +1776,11 @@ const handleRequest = async (
 	}
 
 	if (message.type === "show-countdown") {
-		await broadcastOverlayCountdown(message.seconds, message.durationMs);
+		await broadcastOverlayCountdown(
+			message.seconds,
+			message.durationMs,
+			message.tabId,
+		);
 		return { ok: true };
 	}
 

From 33e4935689b290a30270516467a7e3b2d7370a17 Mon Sep 17 00:00:00 2001
From: Richie McIlroy <33632126+richiemcilroy@users.noreply.github.com>
Date: Thu, 29 Oct 2026 15:06:46 +0000
Subject: [PATCH 04/28] fix(chrome-extension): collapse the recording dock when
 the pointer leaves it

---
 .../src/content/recording-bar.tsx             | 37 +++++++++++++++++++
 1 file changed, 37 insertions(+)

diff --git a/apps/chrome-extension/src/content/recording-bar.tsx b/apps/chrome-extension/src/content/recording-bar.tsx
index 3367398c8c3..8fb9c052715 100644
--- a/apps/chrome-extension/src/content/recording-bar.tsx
+++ b/apps/chrome-extension/src/content/recording-bar.tsx
@@ -471,6 +471,43 @@ export function RecordingBarOverlay({
 		};
 	}, []);
 
+	// Swapping the pause/resume icon under the cursor can swallow the
+	// mouseleave, which left the dock stuck open, so collapse is driven by the
+	// pointer's position against the bar and dock instead.
+	useEffect(() => {
+		if (!isExpanded) return;
+		const handlePointerMove = (event: PointerEvent) => {
+			const bar = barRef.current;
+			if (!bar || isPointerDownRef.current) return;
+			const dock = bar.querySelector(".cap-extension-vertical-dock");
+			const inside = [bar, dock].some((element) => {
+				if (!element) return false;
+				const rect = element.getBoundingClientRect();
+				return (
+					event.clientX >= rect.left &&
+					event.clientX <= rect.right &&
+					event.clientY >= rect.top &&
+					event.clientY <= rect.bottom
+				);
+			});
+			if (inside) {
+				if (hoverTimeoutRef.current !== null) {
+					window.clearTimeout(hoverTimeoutRef.current);
+					hoverTimeoutRef.current = null;
+				}
+				return;
+			}
+			if (hoverTimeoutRef.current !== null) return;
+			hoverTimeoutRef.current = window.setTimeout(() => {
+				setIsExpanded(false);
+				hoverTimeoutRef.current = null;
+			}, 450);
+		};
+		window.addEventListener("pointermove", handlePointerMove, true);
+		return () =>
+			window.removeEventListener("pointermove", handlePointerMove, true);
+	}, [isExpanded]);
+
 	const handleMouseEnter = useCallback(() => {
 		if (isDragging) return;
 		if (hoverTimeoutRef.current !== null) {

From 9873a4dd3647a62debdbf8fb6c29f2b6cfc2d8b2 Mon Sep 17 00:00:00 2001
From: Richie McIlroy <33632126+richiemcilroy@users.noreply.github.com>
Date: Thu, 29 Oct 2026 15:06:46 +0000
Subject: [PATCH 05/28] test(chrome-extension): cover the recording badge and
 dock in the overlay e2e suite

---
 apps/chrome-extension/e2e/overlay-ui.spec.ts | 192 ++++++++-----------
 1 file changed, 75 insertions(+), 117 deletions(-)

diff --git a/apps/chrome-extension/e2e/overlay-ui.spec.ts b/apps/chrome-extension/e2e/overlay-ui.spec.ts
index 307609c637a..1368a295a93 100644
--- a/apps/chrome-extension/e2e/overlay-ui.spec.ts
+++ b/apps/chrome-extension/e2e/overlay-ui.spec.ts
@@ -602,13 +602,12 @@ test("an abandoned recording start clears without leaving controls behind", asyn
 
 		const devtools = await extension.context.newCDPSession(targetPage);
 		await writeStaleCreatingState(worker);
-		await expect.poll(() => readSessionRecordingPhase(worker)).toBe("creating");
 		await targetPage.waitForTimeout(500);
 		expect(
 			await getClosedShadowElementBox(
 				devtools,
 				"class",
-				"cap-extension-recording-rail",
+				"cap-extension-recording-badge",
 			),
 		).toBeNull();
 
@@ -631,7 +630,7 @@ test("an abandoned recording start clears without leaving controls behind", asyn
 			await getClosedShadowElementBox(
 				devtools,
 				"class",
-				"cap-extension-recording-rail",
+				"cap-extension-recording-badge",
 			),
 		).toBeNull();
 	} finally {
@@ -888,92 +887,74 @@ test("recording controls stay stable and the camera resizes directly", async ()
 			.toBe(true);
 
 		const devtools = await extension.context.newCDPSession(targetPage);
+		const getBadgeBox = () =>
+			getClosedShadowElementBox(
+				devtools,
+				"class",
+				"cap-extension-recording-badge",
+			);
+		const getDockBox = () =>
+			getClosedShadowElementBox(
+				devtools,
+				"class",
+				"cap-extension-vertical-dock",
+			);
+		const readPhase = async () => {
+			const response = (await sendServiceWorkerMessage(messengerPage, {
+				target: "service-worker",
+				type: "get-recording-status",
+			})) as { status?: { phase?: string } };
+			return response.status?.phase;
+		};
 		await expect
-			.poll(
-				async () =>
-					(await getClosedShadowElementBox(
-						devtools,
-						"class",
-						"cap-extension-recording-rail",
-					)) !== null,
-				{ timeout: 10_000 },
-			)
+			.poll(async () => (await getBadgeBox()) !== null, { timeout: 10_000 })
 			.toBe(true);
-		const initialBox = await getClosedShadowElementBox(
-			devtools,
-			"class",
-			"cap-extension-recording-rail",
-		);
-		if (!initialBox) throw new Error("recording bar missing");
-		expect(initialBox.x).toBeLessThanOrEqual(20);
-		expect(initialBox.width).toBeGreaterThan(100);
-		expect(initialBox.width).toBeLessThanOrEqual(128);
-		expect(initialBox.height).toBeLessThanOrEqual(44);
-		const handleBox = await getClosedShadowElementBox(
-			devtools,
-			"data-drag-handle",
-		);
-		if (!handleBox) throw new Error("recording bar drag handle missing");
+		const initialBox = await getBadgeBox();
+		if (!initialBox) throw new Error("recording badge missing");
+		expect(initialBox.x).toBeLessThanOrEqual(32);
+		expect(initialBox.height).toBeLessThanOrEqual(64);
 		const timeBox = await getClosedShadowElementBox(
 			devtools,
-			"data-recording-time",
+			"class",
+			"cap-extension-recording-badge-time",
 		);
-		if (!timeBox || timeBox.width < 30) {
+		if (!timeBox || timeBox.width < 20) {
 			throw new Error("recording time is not visible at rest");
 		}
-		expect(
-			await getClosedShadowComputedStyle(
-				devtools,
-				"data-recording-actions",
-				"opacity",
-			),
-		).toBe("0");
+		expect(await getDockBox()).toBeNull();
 
 		await targetPage.mouse.move(
-			handleBox.x + handleBox.width / 2,
-			handleBox.y + handleBox.height / 2,
+			initialBox.x + initialBox.width / 2,
+			initialBox.y + initialBox.height / 2,
 		);
+		await expect.poll(async () => (await getDockBox()) !== null).toBe(true);
+		const settledPause: { box: ElementBox | null } = { box: null };
 		await expect
-			.poll(() =>
-				getClosedShadowComputedStyle(
+			.poll(async () => {
+				const previous = settledPause.box;
+				const next = await getClosedShadowElementBox(
 					devtools,
-					"data-recording-actions",
-					"opacity",
-				),
-			)
-			.toBe("1");
-		const actionsBox = await getClosedShadowElementBox(
-			devtools,
-			"data-recording-actions",
-		);
-		if (!actionsBox) throw new Error("recording action capsule missing");
-		const actionGap = actionsBox.x - (initialBox.x + initialBox.width);
-		expect(actionGap).toBeGreaterThanOrEqual(4);
-		expect(actionGap).toBeLessThanOrEqual(8);
-		expect(
-			await getClosedShadowComputedStyle(
-				devtools,
-				"data-recording-actions",
-				"border-top-left-radius",
-			),
-		).toBe("14px");
-		const pauseBox = await getClosedShadowElementBox(
-			devtools,
-			"data-recording-pause",
-		);
+					"class",
+					"is-pause",
+				);
+				settledPause.box = next;
+				return (
+					previous !== null &&
+					next !== null &&
+					previous.x === next.x &&
+					previous.y === next.y
+				);
+			})
+			.toBe(true);
+		const pauseBox = settledPause.box;
 		if (!pauseBox) throw new Error("pause action missing on hover");
 		await targetPage.mouse.move(
 			pauseBox.x + pauseBox.width / 2,
 			pauseBox.y + pauseBox.height / 2,
+			{ steps: 4 },
 		);
 		await targetPage.waitForTimeout(300);
-		expect(
-			await getClosedShadowComputedStyle(
-				devtools,
-				"data-recording-actions",
-				"opacity",
-			),
-		).toBe("1");
+		expect(await getDockBox()).not.toBeNull();
 		await targetPage.screenshot({
 			path: "test-results/recording-bar-expanded.png",
 		});
@@ -981,57 +962,41 @@ test("recording controls stay stable and the camera resizes directly", async ()
 			pauseBox.x + pauseBox.width / 2,
 			pauseBox.y + pauseBox.height / 2,
 		);
-		await expect
-			.poll(async () => {
-				const response = (await sendServiceWorkerMessage(messengerPage, {
-					target: "service-worker",
-					type: "get-recording-status",
-				})) as { status?: { phase?: string } };
-				return response.status?.phase;
-			})
-			.toBe("paused");
-		expect(
-			await getClosedShadowComputedStyle(
-				devtools,
-				"data-recording-actions",
-				"opacity",
-			),
-		).toBe("1");
+		await expect.poll(readPhase).toBe("paused");
+		expect(await getDockBox()).not.toBeNull();
+		await targetPage.waitForTimeout(500);
+		const resumeBox = await getClosedShadowElementBox(
+			devtools,
+			"class",
+			"is-paused",
+		);
+		if (!resumeBox) throw new Error("resume action missing while paused");
 		await targetPage.mouse.click(
-			pauseBox.x + pauseBox.width / 2,
-			pauseBox.y + pauseBox.height / 2,
+			resumeBox.x + resumeBox.width / 2,
+			resumeBox.y + resumeBox.height / 2,
 		);
-		await expect
-			.poll(async () => {
-				const response = (await sendServiceWorkerMessage(messengerPage, {
-					target: "service-worker",
-					type: "get-recording-status",
-				})) as { status?: { phase?: string } };
-				return response.status?.phase;
-			})
-			.toBe("recording");
+		await expect.poll(readPhase).toBe("recording");
+
+		await targetPage.mouse.move(760, 40);
+		await expect.poll(async () => (await getDockBox()) === null).toBe(true);
 		await targetPage.mouse.move(
-			handleBox.x + handleBox.width / 2,
-			handleBox.y + handleBox.height / 2,
+			initialBox.x + initialBox.width / 2,
+			initialBox.y + initialBox.height / 2,
 		);
 		await targetPage.mouse.down();
 		await targetPage.mouse.move(
-			handleBox.x + handleBox.width / 2 + 120,
-			handleBox.y + handleBox.height / 2 - 80,
+			initialBox.x + initialBox.width / 2 + 420,
+			initialBox.y + initialBox.height / 2 - 80,
 			{ steps: 8 },
 		);
 		await targetPage.mouse.up();
 
 		await expect
 			.poll(async () => {
-				const movedBox = await getClosedShadowElementBox(
-					devtools,
-					"class",
-					"cap-extension-recording-rail",
-				);
+				const movedBox = await getBadgeBox();
 				return (
 					movedBox !== null &&
-					movedBox.x - initialBox.x > 80 &&
+					movedBox.x - initialBox.x > 380 &&
 					initialBox.y - movedBox.y > 50
 				);
 			})
@@ -1063,17 +1028,10 @@ test("recording controls stay stable and the camera resizes directly", async ()
 				),
 			)
 			.toBe(true);
+		expect(await readPhase()).toBe("recording");
 
 		await targetPage.mouse.move(760, 40);
-		await expect
-			.poll(() =>
-				getClosedShadowComputedStyle(
-					devtools,
-					"data-recording-actions",
-					"opacity",
-				),
-			)
-			.toBe("0");
+		await expect.poll(async () => (await getDockBox()) === null).toBe(true);
 		await targetPage.waitForTimeout(500);
 		await targetPage.screenshot({
 			path: "test-results/recording-bar-visible.png",

From 1f7760c267e41264d379c92584349dfb3aec954f Mon Sep 17 00:00:00 2001
From: Richie McIlroy <33632126+richiemcilroy@users.noreply.github.com>
Date: Thu, 29 Oct 2026 15:59:43 +0000
Subject: [PATCH 06/28] fix(chrome-extension): mix recording audio without an
 output device

---
 .../src/offscreen/recorder.test.ts            |  6 ++
 .../src/offscreen/recorder.ts                 | 58 ++++++++++++++-----
 2 files changed, 50 insertions(+), 14 deletions(-)

diff --git a/apps/chrome-extension/src/offscreen/recorder.test.ts b/apps/chrome-extension/src/offscreen/recorder.test.ts
index 0f1991dbfb1..cb513e16e77 100644
--- a/apps/chrome-extension/src/offscreen/recorder.test.ts
+++ b/apps/chrome-extension/src/offscreen/recorder.test.ts
@@ -51,11 +51,13 @@ class Stream {
 let onMessage: MessageListener;
 let capturedStream: Stream;
 let speakerStreams: Stream[];
+let mixContextOptions: unknown[];
 let spool: Pick<RecordingSpool, "sessionId" | "appendChunk" | "dispose">;
 
 beforeEach(async () => {
 	vi.resetModules();
 	speakerStreams = [];
+	mixContextOptions = [];
 	vi.useFakeTimers();
 	const stored: Record<string, unknown> = {};
 	const storage = {
@@ -100,7 +102,10 @@ beforeEach(async () => {
 		class {
 			destination = {};
 
+			constructor(readonly options?: unknown) {}
+
 			createMediaStreamDestination() {
+				mixContextOptions.push(this.options);
 				return { stream: new Stream([new Track("audio")]) };
 			}
 
@@ -222,6 +227,7 @@ describe("recording microphone mute", () => {
 			expect(speakerStreams).toEqual(
 				mode === "tab" && systemAudio ? [main] : [],
 			);
+			expect(mixContextOptions).toEqual([{ sinkId: { type: "none" } }]);
 
 			expect(
 				await send({ type: "toggle-microphone-mute", muted: true }),
diff --git a/apps/chrome-extension/src/offscreen/recorder.ts b/apps/chrome-extension/src/offscreen/recorder.ts
index 85b2beaf349..d456468d7cd 100644
--- a/apps/chrome-extension/src/offscreen/recorder.ts
+++ b/apps/chrome-extension/src/offscreen/recorder.ts
@@ -112,6 +112,7 @@ type ActiveRecording = {
 	mimeType: string;
 	maxDurationMs: number | null;
 	audioContext?: AudioContext;
+	playbackAudioContext?: AudioContext;
 	chunkChain: Promise<void>;
 	dataRequestInterval: number | null;
 	chunkStartGuard: number | null;
@@ -604,36 +605,59 @@ const probeMicrophone = async (
 	}
 };
 
+// The mix runs in a context with no output device. A context that renders to
+// the speakers stops producing samples when that device changes under it
+// (AirPods switching to their headset profile mid-recording), and the
+// recording then loses its audio while the video keeps going. It also means
+// nothing captured here can reach the speakers and feed back into the mic.
+const createRecordingAudioContext = () => {
+	const options: AudioContextOptions & { sinkId: { type: "none" } } = {
+		sinkId: { type: "none" },
+	};
+	try {
+		return new AudioContext(options);
+	} catch {
+		return new AudioContext();
+	}
+};
+
 const addAudioTracks = ({
 	output,
 	streams,
-	routeFirstStreamToSpeakers,
+	playbackStream,
 }: {
 	output: MediaStream;
 	streams: MediaStream[];
-	routeFirstStreamToSpeakers: boolean;
+	playbackStream: MediaStream | null;
 }) => {
 	const streamsWithAudio = streams.filter(
 		(stream) => stream.getAudioTracks().length > 0,
 	);
 	if (streamsWithAudio.length === 0) return undefined;
 
-	const audioContext = new AudioContext();
+	const audioContext = createRecordingAudioContext();
 	const destination = audioContext.createMediaStreamDestination();
 
-	streamsWithAudio.forEach((stream) => {
-		const source = audioContext.createMediaStreamSource(stream);
-		source.connect(destination);
-		if (routeFirstStreamToSpeakers && stream === streams[0]) {
-			source.connect(audioContext.destination);
-		}
-	});
+	for (const stream of streamsWithAudio) {
+		audioContext.createMediaStreamSource(stream).connect(destination);
+	}
 
 	for (const track of destination.stream.getAudioTracks()) {
 		output.addTrack(track);
 	}
 
-	return audioContext;
+	// Tab capture mutes the captured tab, so its own audio is played back here
+	// for the user to keep hearing it, from a separate context that the
+	// recording does not depend on.
+	let playbackAudioContext: AudioContext | undefined;
+	if (playbackStream && playbackStream.getAudioTracks().length > 0) {
+		playbackAudioContext = new AudioContext();
+		playbackAudioContext
+			.createMediaStreamSource(playbackStream)
+			.connect(playbackAudioContext.destination);
+	}
+
+	return { audioContext, playbackAudioContext };
 };
 
 const updateStatusDuration = () => {
@@ -681,6 +705,7 @@ const cleanupActiveRecording = async (recording: ActiveRecording) => {
 	}
 	stopTracks(recording.recordingStream);
 	await recording.audioContext?.close().catch(() => undefined);
+	await recording.playbackAudioContext?.close().catch(() => undefined);
 };
 
 // Reconcile the IndexedDB recording spool with the failed-recording metadata
@@ -853,6 +878,7 @@ const startRecording = async (request: StartRecordingRequest) => {
 	let ownedVideoId: string | null = null;
 	let ownedSpool: RecordingSpool | null = null;
 	let ownedRecording: ActiveRecording | null = null;
+	let ownedAudio: ReturnType<typeof addAudioTracks>;
 	let countdownPromise: Promise<void> | null = null;
 
 	try {
@@ -883,10 +909,10 @@ const startRecording = async (request: StartRecordingRequest) => {
 		const streams = microphoneStream
 			? [mainStream, microphoneStream]
 			: [mainStream];
-		const audioContext = addAudioTracks({
+		ownedAudio = addAudioTracks({
 			output: recordingStream,
 			streams,
-			routeFirstStreamToSpeakers: request.mode === "tab",
+			playbackStream: request.mode === "tab" ? mainStream : null,
 		});
 		const hasAudio = recordingStream.getAudioTracks().length > 0;
 		const pipeline = selectRecordingPipeline(hasAudio);
@@ -1019,7 +1045,8 @@ const startRecording = async (request: StartRecordingRequest) => {
 			subpath,
 			mimeType: pipeline.mimeType,
 			maxDurationMs,
-			audioContext,
+			audioContext: ownedAudio?.audioContext,
+			playbackAudioContext: ownedAudio?.playbackAudioContext,
 			chunkChain: Promise.resolve(),
 			dataRequestInterval: null,
 			chunkStartGuard: null,
@@ -1179,6 +1206,9 @@ const startRecording = async (request: StartRecordingRequest) => {
 				activeRecording = null;
 			}
 			await cleanupActiveRecording(ownedRecording);
+		} else {
+			await ownedAudio?.audioContext.close().catch(() => undefined);
+			await ownedAudio?.playbackAudioContext?.close().catch(() => undefined);
 		}
 		if (ownedSpool) {
 			await removeLiveRecordingManifest(ownedSpool.sessionId).catch(

From 48d98c2286579a186fb25a53d8a6cd8d1bdfa0d1 Mon Sep 17 00:00:00 2001
From: Richie McIlroy <33632126+richiemcilroy@users.noreply.github.com>
Date: Thu, 29 Oct 2026 15:59:43 +0000
Subject: [PATCH 07/28] test(chrome-extension): check uploaded audio length,
 tail and tab A/V sync in e2e

---
 .../e2e/recording-upload.spec.ts              | 317 +++++++++++++++++-
 1 file changed, 305 insertions(+), 12 deletions(-)

diff --git a/apps/chrome-extension/e2e/recording-upload.spec.ts b/apps/chrome-extension/e2e/recording-upload.spec.ts
index fcf73c51481..9e5cd3dde2c 100644
--- a/apps/chrome-extension/e2e/recording-upload.spec.ts
+++ b/apps/chrome-extension/e2e/recording-upload.spec.ts
@@ -1,4 +1,6 @@
-import { mkdtemp, rm } from "node:fs/promises";
+import { execFileSync } from "node:child_process";
+import { createHash } from "node:crypto";
+import { mkdtemp, rm, writeFile } from "node:fs/promises";
 import {
 	createServer,
 	type IncomingMessage,
@@ -32,6 +34,7 @@ type MockState = {
 	initiateBodies: unknown[];
 	presignBodies: unknown[];
 	uploadBytes: number[];
+	uploadParts: Map<number, Buffer>;
 	uploadHeaders: Record<string, string | string[] | undefined>[];
 	videoId: string;
 };
@@ -56,6 +59,13 @@ type ChromeGlobal = typeof globalThis & {
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const extensionPath = path.resolve(__dirname, "../dist");
+const unpackedExtensionId = createHash("sha256")
+	.update(extensionPath)
+	.digest("hex")
+	.slice(0, 32)
+	.replace(/[0-9a-f]/g, (digit) =>
+		String.fromCharCode(97 + Number.parseInt(digit, 16)),
+	);
 const SETTINGS_KEY = "cap-extension-settings";
 const AUTH_KEY = "cap-extension-auth";
 const BOOTSTRAP_CACHE_KEY = "cap-extension-bootstrap-cache";
@@ -150,6 +160,35 @@ const animatedCapturePage = () => `<!doctype html>
 	</body>
 </html>`;
 
+// Flashes white and beeps together once a second, both driven by the audio
+// clock, so the uploaded file shows whether audio and video stay aligned.
+const audibleCapturePage = () => `<!doctype html>
+<html>
+	<head>
+		<title>Cap E2E Capture Target</title>
+	</head>
+	<body style="margin:0;height:100vh;background:#000">
+		<script>
+			const context = new AudioContext();
+			let scheduledBeat = Math.ceil(context.currentTime);
+			const tick = () => {
+				while (scheduledBeat < context.currentTime + 0.5) {
+					const oscillator = context.createOscillator();
+					oscillator.frequency.value = 440;
+					oscillator.connect(context.destination);
+					oscillator.start(scheduledBeat);
+					oscillator.stop(scheduledBeat + 0.2);
+					scheduledBeat += 1;
+				}
+				const lit = context.currentTime % 1 < 0.2;
+				document.body.style.background = lit ? "#fff" : "#000";
+				requestAnimationFrame(tick);
+			};
+			tick();
+		</script>
+	</body>
+</html>`;
+
 const createMockCapServer = async () => {
 	const state: MockState = {
 		completeBodies: [],
@@ -157,6 +196,7 @@ const createMockCapServer = async () => {
 		initiateBodies: [],
 		presignBodies: [],
 		uploadBytes: [],
+		uploadParts: new Map(),
 		uploadHeaders: [],
 		videoId: `e2e-${Date.now()}`,
 	};
@@ -175,6 +215,11 @@ const createMockCapServer = async () => {
 				return;
 			}
 
+			if (request.method === "GET" && url.pathname === "/capture-audio.html") {
+				sendHtml(response, audibleCapturePage());
+				return;
+			}
+
 			if (
 				request.method === "GET" &&
 				url.pathname === "/api/extension/bootstrap"
@@ -246,6 +291,10 @@ const createMockCapServer = async () => {
 			if (request.method === "PUT" && url.pathname.startsWith("/mock-s3/")) {
 				const body = await readRequestBody(request);
 				state.uploadBytes.push(body.byteLength);
+				state.uploadParts.set(
+					Number(url.pathname.replace("/mock-s3/part-", "")),
+					body,
+				);
 				state.uploadHeaders.push(request.headers);
 				response.writeHead(200, {
 					"Access-Control-Allow-Origin": "*",
@@ -331,21 +380,32 @@ const createMockCapServer = async () => {
 	};
 };
 
-const launchExtensionContext = async () => {
+// Chromium's fake capture devices and fake permission UI both make tab capture
+// fail with "Requested device not found", and headless Chromium captures tab
+// audio as silence, so tab recordings launch headed without them.
+const canLaunchHeaded =
+	process.platform !== "linux" || Boolean(process.env.DISPLAY);
+
+const launchExtensionContext = async ({ tabCapture = false } = {}) => {
 	const userDataDir = await mkdtemp(path.join(tmpdir(), "cap-extension-e2e-"));
 	const context = await chromium.launchPersistentContext(userDataDir, {
 		channel: "chromium",
-		headless: true,
+		headless: !tabCapture,
 		args: [
 			`--disable-extensions-except=${extensionPath}`,
 			`--load-extension=${extensionPath}`,
+			`--allowlisted-extension-id=${unpackedExtensionId}`,
 			"--allow-http-screen-capture",
 			"--auto-select-desktop-capture-source=Cap E2E Capture Target",
 			"--auto-select-tab-capture-source-by-title=Cap E2E Capture Target",
 			"--enable-usermedia-screen-capturing",
 			"--autoplay-policy=no-user-gesture-required",
-			"--use-fake-device-for-media-stream",
-			"--use-fake-ui-for-media-stream",
+			...(!tabCapture
+				? [
+						"--use-fake-device-for-media-stream",
+						"--use-fake-ui-for-media-stream",
+					]
+				: []),
 		],
 	});
 	const cleanup = async () => {
@@ -379,15 +439,34 @@ const openExtensionMessengerPage = async (
 	return page;
 };
 
+type RecordingOptions = {
+	mode: "fullscreen" | "tab";
+	microphone: boolean;
+	systemAudio: boolean;
+	capturePath: string;
+	durationMs: number;
+};
+
+const DEFAULT_RECORDING_OPTIONS: RecordingOptions = {
+	mode: RECORDING_MODE,
+	microphone: false,
+	systemAudio: false,
+	capturePath: "/capture.html",
+	durationMs: RECORDING_MS,
+};
+
 const configureExtension = async (
 	worker: Awaited<ReturnType<typeof getServiceWorker>>,
 	apiBaseUrl: string,
+	options: RecordingOptions = DEFAULT_RECORDING_OPTIONS,
 ) => {
 	await worker.evaluate(
 		async ({
 			authKey,
 			bootstrapKey,
 			recordingMode,
+			microphone,
+			systemAudio,
 			settingsKey,
 			apiBaseUrl,
 		}) => {
@@ -442,11 +521,11 @@ const configureExtension = async (
 								mirror: false,
 							},
 							microphone: {
-								enabled: false,
+								enabled: microphone,
 								deviceId: null,
 							},
 							systemAudio: {
-								enabled: false,
+								enabled: systemAudio,
 							},
 							sounds: {
 								enabled: false,
@@ -475,7 +554,9 @@ const configureExtension = async (
 			apiBaseUrl,
 			authKey: AUTH_KEY,
 			bootstrapKey: BOOTSTRAP_CACHE_KEY,
-			recordingMode: RECORDING_MODE,
+			recordingMode: options.mode,
+			microphone: options.microphone,
+			systemAudio: options.systemAudio,
 			settingsKey: SETTINGS_KEY,
 		},
 	);
@@ -536,21 +617,165 @@ const expectSuccessfulUpload = async (page: Page, state: MockState) => {
 	).toBeGreaterThanOrEqual(1);
 };
 
+type StreamDurations = { video: number; audio: number | null };
+
+const onsets = (values: { time: number; level: number }[], threshold: number) =>
+	values
+		.filter(
+			(value, index) =>
+				value.level > threshold &&
+				(index === 0 || values[index - 1].level <= threshold),
+		)
+		.map((value) => value.time);
+
+// Pairs each white flash with the nearest beep and returns audio minus video
+// time in seconds for every pair.
+const measureFlashBeepOffsets = (
+	file: string,
+	samples: Float32Array,
+	sampleRate: number,
+) => {
+	const lines = execFileSync(
+		"ffmpeg",
+		[
+			"-v",
+			"error",
+			"-i",
+			file,
+			"-an",
+			"-vf",
+			"signalstats,metadata=print:key=lavfi.signalstats.YAVG:file=-",
+			"-f",
+			"null",
+			"-",
+		],
+		{ maxBuffer: 16 * 1024 * 1024 },
+	)
+		.toString()
+		.split("\n");
+	const frames: { time: number; level: number }[] = [];
+	let frameTime: number | null = null;
+	for (const line of lines) {
+		const time = /pts_time:([\d.]+)/.exec(line);
+		if (time) frameTime = Number(time[1]);
+		const level = /YAVG=([\d.]+)/.exec(line);
+		if (level && frameTime !== null) {
+			frames.push({ time: frameTime, level: Number(level[1]) });
+		}
+	}
+	const windowSize = sampleRate / 100;
+	const windows: { time: number; level: number }[] = [];
+	for (
+		let start = 0;
+		start + windowSize <= samples.length;
+		start += windowSize
+	) {
+		let peak = 0;
+		for (let index = start; index < start + windowSize; index += 1) {
+			peak = Math.max(peak, Math.abs(samples[index]));
+		}
+		windows.push({ time: start / sampleRate, level: peak });
+	}
+	const beeps = onsets(windows, 0.1);
+	return onsets(frames, 128).flatMap((flash) => {
+		const nearest = beeps.reduce<number | null>(
+			(best, beep) =>
+				best === null || Math.abs(beep - flash) < Math.abs(best - flash)
+					? beep
+					: best,
+			null,
+		);
+		return nearest !== null && Math.abs(nearest - flash) < 0.5
+			? [nearest - flash]
+			: [];
+	});
+};
+
+const probeUploadedRecording = async (state: MockState) => {
+	const parts = [...state.uploadParts.entries()]
+		.sort(([a], [b]) => a - b)
+		.map(([, body]) => body);
+	const directory = await mkdtemp(path.join(tmpdir(), "cap-e2e-media-"));
+	const file = path.join(directory, "recording.webm");
+	await writeFile(file, Buffer.concat(parts));
+	try {
+		const duration = (type: "v" | "a") => {
+			const output = execFileSync("ffprobe", [
+				"-v",
+				"error",
+				"-select_streams",
+				type,
+				"-show_entries",
+				"packet=pts_time",
+				"-of",
+				"csv=p=0",
+				file,
+			])
+				.toString()
+				.trim()
+				.split("\n")
+				.map(Number)
+				.filter(Number.isFinite);
+			return output.length > 0 ? Math.max(...output) : null;
+		};
+		const pcm = execFileSync(
+			"ffmpeg",
+			[
+				"-v",
+				"error",
+				"-i",
+				file,
+				"-vn",
+				"-ac",
+				"1",
+				"-ar",
+				"8000",
+				"-f",
+				"f32le",
+				"-",
+			],
+			{ maxBuffer: 64 * 1024 * 1024 },
+		);
+		const samples = new Float32Array(
+			pcm.buffer,
+			pcm.byteOffset,
+			Math.floor(pcm.byteLength / 4),
+		);
+		const tail = samples.subarray(Math.max(0, samples.length - 8000 * 1.5));
+		const tailPeak = tail.reduce(
+			(peak, value) => Math.max(peak, Math.abs(value)),
+			0,
+		);
+		const durations: StreamDurations = {
+			video: duration("v") ?? 0,
+			audio: duration("a"),
+		};
+		return {
+			durations,
+			tailPeak,
+			avOffsets: measureFlashBeepOffsets(file, samples, 8000),
+		};
+	} finally {
+		await rm(directory, { recursive: true, force: true });
+	}
+};
+
 const startRecording = async (
 	context: BrowserContext,
 	worker: Awaited<ReturnType<typeof getServiceWorker>>,
 	apiBaseUrl: string,
+	options: RecordingOptions = DEFAULT_RECORDING_OPTIONS,
 ) => {
-	await configureExtension(worker, apiBaseUrl);
+	await configureExtension(worker, apiBaseUrl, options);
 	const messengerPage = await openExtensionMessengerPage(context, worker);
 	const capturePage = await context.newPage();
-	await capturePage.goto(`${apiBaseUrl}/capture.html`);
+	await capturePage.goto(`${apiBaseUrl}${options.capturePath}`);
 	await capturePage.bringToFront();
 
 	const startResponse = await sendServiceWorkerMessage(messengerPage, {
 		target: "service-worker",
 		type: "start-recording",
-		mode: RECORDING_MODE,
+		mode: options.mode,
 	});
 	if (!startResponse.ok) {
 		throw new Error(startResponse.error);
@@ -567,7 +792,7 @@ const startRecording = async (
 		})
 		.toBe("recording");
 
-	await capturePage.waitForTimeout(RECORDING_MS);
+	await capturePage.waitForTimeout(options.durationMs);
 	return {
 		capturePage,
 		messengerPage,
@@ -608,6 +833,73 @@ test.describe("extension recording upload", () => {
 		await expectSuccessfulUpload(messengerPage, mockServer.state);
 	});
 
+	for (const options of [
+		{
+			name: "fullscreen with microphone",
+			mode: "fullscreen",
+			microphone: true,
+			systemAudio: false,
+			capturePath: "/capture.html",
+		},
+		{
+			name: "tab with tab audio",
+			mode: "tab",
+			microphone: false,
+			systemAudio: true,
+			capturePath: "/capture-audio.html",
+		},
+	] as const) {
+		test(`keeps audio for the whole ${options.name} recording`, async () => {
+			if (!extension || !mockServer)
+				throw new Error("Test harness did not start");
+			if (options.mode === "tab") {
+				test.skip(!canLaunchHeaded, "Tab audio capture needs a headed browser");
+				await extension.cleanup();
+				extension = await launchExtensionContext({ tabCapture: true });
+			}
+			const worker = await getServiceWorker(extension.context);
+			const { messengerPage } = await startRecording(
+				extension.context,
+				worker,
+				mockServer.origin,
+				{ ...options, durationMs: 6_000 },
+			);
+			const stopResponse = await sendServiceWorkerMessage(messengerPage, {
+				target: "service-worker",
+				type: "stop-recording",
+			});
+			expect(stopResponse).toMatchObject({ ok: true });
+			await expectSuccessfulUpload(messengerPage, mockServer.state);
+
+			const { durations, tailPeak, avOffsets } = await probeUploadedRecording(
+				mockServer.state,
+			);
+			if (process.env.CAP_E2E_REPORT_AV) {
+				console.log(
+					JSON.stringify({
+						name: options.name,
+						durations,
+						tailPeak,
+						avOffsets,
+					}),
+				);
+			}
+			expect(durations.video).toBeGreaterThan(5);
+			expect(durations.audio).not.toBeNull();
+			expect(Math.abs((durations.audio ?? 0) - durations.video)).toBeLessThan(
+				0.5,
+			);
+			expect(tailPeak).toBeGreaterThan(0.01);
+			if (options.mode === "tab") {
+				expect(avOffsets.length).toBeGreaterThanOrEqual(4);
+				const sorted = [...avOffsets].sort((a, b) => a - b);
+				const median = sorted[Math.floor(sorted.length / 2)];
+				expect(Math.abs(median)).toBeLessThan(0.15);
+				expect(sorted[sorted.length - 1] - sorted[0]).toBeLessThan(0.1);
+			}
+		});
+	}
+
 	test("can complete two consecutive recording uploads without stale state", async () => {
 		if (!extension || !mockServer)
 			throw new Error("Test harness did not start");
@@ -638,6 +930,7 @@ test.describe("extension recording upload", () => {
 		mockServer.state.initiateBodies = [];
 		mockServer.state.presignBodies = [];
 		mockServer.state.uploadBytes = [];
+		mockServer.state.uploadParts = new Map();
 		mockServer.state.uploadHeaders = [];
 		mockServer.state.videoId = `e2e-${Date.now()}-second`;
 

From 91ef5d23f6ef5a9ebc5b46b9cc3105d417f67084 Mon Sep 17 00:00:00 2001
From: Richie McIlroy <33632126+richiemcilroy@users.noreply.github.com>
Date: Thu, 29 Oct 2026 16:02:39 +0000
Subject: [PATCH 08/28] fix(chrome-extension): mute only the live recording
 microphone from the dock

---
 apps/chrome-extension/e2e/overlay-ui.spec.ts  | 147 +++++++++++++++++-
 .../src/background/service-worker.ts          |   3 +
 apps/chrome-extension/src/content/overlay.tsx |   5 -
 .../src/content/recording-bar.tsx             |  38 ++++-
 .../src/offscreen/recorder.test.ts            |  42 +++--
 .../src/offscreen/recorder.ts                 |  10 +-
 apps/chrome-extension/src/shared/types.ts     |   3 +
 7 files changed, 217 insertions(+), 31 deletions(-)

diff --git a/apps/chrome-extension/e2e/overlay-ui.spec.ts b/apps/chrome-extension/e2e/overlay-ui.spec.ts
index 1368a295a93..ba5f2843448 100644
--- a/apps/chrome-extension/e2e/overlay-ui.spec.ts
+++ b/apps/chrome-extension/e2e/overlay-ui.spec.ts
@@ -235,7 +235,11 @@ const getServiceWorker = async (context: BrowserContext) => {
 const configureExtension = async (
 	worker: Awaited<ReturnType<typeof getServiceWorker>>,
 	apiBaseUrl: string,
-	options: { countdownEnabled?: boolean; webcamEnabled?: boolean } = {},
+	options: {
+		countdownEnabled?: boolean;
+		webcamEnabled?: boolean;
+		microphoneEnabled?: boolean;
+	} = {},
 ) => {
 	await worker.evaluate(
 		async ({ authKey, bootstrapKey, settingsKey, apiBaseUrl, options }) => {
@@ -271,7 +275,10 @@ const configureExtension = async (
 								shape: "round",
 								mirror: false,
 							},
-							microphone: { enabled: false, deviceId: null },
+							microphone: {
+								enabled: options.microphoneEnabled ?? false,
+								deviceId: null,
+							},
 							systemAudio: { enabled: false },
 							sounds: { enabled: false },
 							countdown: {
@@ -948,6 +955,9 @@ test("recording controls stay stable and the camera resizes directly", async ()
 			.toBe(true);
 		const pauseBox = settledPause.box;
 		if (!pauseBox) throw new Error("pause action missing on hover");
+		expect(
+			await getClosedShadowElementBox(devtools, "class", "is-mic"),
+		).toBeNull();
 		await targetPage.mouse.move(
 			pauseBox.x + pauseBox.width / 2,
 			pauseBox.y + pauseBox.height / 2,
@@ -1107,3 +1117,136 @@ test("recording controls stay stable and the camera resizes directly", async ()
 		await mockServer.close();
 	}
 });
+
+test("the dock mutes the recording microphone without changing saved settings", async () => {
+	test.setTimeout(90_000);
+	const mockServer = await createMockCapServer();
+	const extension = await launchExtensionContext();
+
+	try {
+		const worker = await getServiceWorker(extension.context);
+		await configureExtension(worker, mockServer.origin, {
+			webcamEnabled: false,
+			microphoneEnabled: true,
+		});
+
+		const messengerPage = await extension.context.newPage();
+		await messengerPage.goto(
+			`chrome-extension://${new URL(worker.url()).host}/popup.html`,
+		);
+		const targetPage = await extension.context.newPage();
+		await targetPage.goto(`${mockServer.origin}/capture.html`);
+		await targetPage.bringToFront();
+
+		const startResponse = (await sendServiceWorkerMessage(messengerPage, {
+			target: "service-worker",
+			type: "start-recording",
+			mode: "fullscreen",
+		})) as { ok: boolean };
+		expect(startResponse.ok).toBe(true);
+
+		const devtools = await extension.context.newCDPSession(targetPage);
+		const readMicrophone = async () => {
+			const response = (await sendServiceWorkerMessage(messengerPage, {
+				target: "service-worker",
+				type: "get-recording-status",
+			})) as { status?: { microphone?: string } };
+			return response.status?.microphone;
+		};
+		const readSavedMicrophoneEnabled = () =>
+			worker.evaluate(
+				(settingsKey) =>
+					new Promise<boolean | undefined>((resolve) => {
+						const chromeApi = (globalThis as ChromeGlobal).chrome;
+						chromeApi.storage.local.get(settingsKey, (items) => {
+							const settings = items[settingsKey] as
+								| { microphone?: { enabled?: boolean } }
+								| undefined;
+							resolve(settings?.microphone?.enabled);
+						});
+					}),
+				SETTINGS_KEY,
+			);
+		const settledMicBox = async () => {
+			const holder: { box: ElementBox | null } = { box: null };
+			await expect
+				.poll(async () => {
+					const previous = holder.box;
+					const next = await getClosedShadowElementBox(
+						devtools,
+						"class",
+						"is-mic",
+					);
+					holder.box = next;
+					return (
+						previous !== null &&
+						next !== null &&
+						previous.x === next.x &&
+						previous.y === next.y
+					);
+				})
+				.toBe(true);
+			if (!holder.box) throw new Error("microphone action missing on hover");
+			return holder.box;
+		};
+		const clickMic = async () => {
+			const badge = await getClosedShadowElementBox(
+				devtools,
+				"class",
+				"cap-extension-recording-badge",
+			);
+			if (!badge) throw new Error("recording badge missing");
+			await targetPage.mouse.move(
+				badge.x + badge.width / 2,
+				badge.y + badge.height / 2,
+			);
+			const micBox = await settledMicBox();
+			await targetPage.mouse.move(
+				micBox.x + micBox.width / 2,
+				micBox.y + micBox.height / 2,
+				{ steps: 4 },
+			);
+			await targetPage.mouse.click(
+				micBox.x + micBox.width / 2,
+				micBox.y + micBox.height / 2,
+			);
+		};
+
+		await expect.poll(readMicrophone, { timeout: 15_000 }).toBe("live");
+		await expect
+			.poll(
+				async () =>
+					(await getClosedShadowElementBox(
+						devtools,
+						"class",
+						"cap-extension-recording-badge",
+					)) !== null,
+				{ timeout: 10_000 },
+			)
+			.toBe(true);
+
+		await clickMic();
+		await expect.poll(readMicrophone).toBe("muted");
+		await expect
+			.poll(
+				async () =>
+					(await getClosedShadowElementBox(devtools, "class", "is-muted")) !==
+					null,
+			)
+			.toBe(true);
+		expect(await readSavedMicrophoneEnabled()).toBe(true);
+
+		await clickMic();
+		await expect.poll(readMicrophone).toBe("live");
+		expect(await readSavedMicrophoneEnabled()).toBe(true);
+
+		const stopResponse = (await sendServiceWorkerMessage(messengerPage, {
+			target: "service-worker",
+			type: "stop-recording",
+		})) as { ok: boolean };
+		expect(stopResponse.ok).toBe(true);
+	} finally {
+		await extension.cleanup();
+		await mockServer.close();
+	}
+});
diff --git a/apps/chrome-extension/src/background/service-worker.ts b/apps/chrome-extension/src/background/service-worker.ts
index b95e1fc6e74..fa24411ea8a 100644
--- a/apps/chrome-extension/src/background/service-worker.ts
+++ b/apps/chrome-extension/src/background/service-worker.ts
@@ -1657,6 +1657,9 @@ const handleRequest = async (
 			type: "toggle-microphone-mute",
 			muted: message.muted,
 		});
+		if (response.ok && response.status) {
+			setRecordingStatusAndBroadcast(response.status);
+		}
 		return response;
 	}
 
diff --git a/apps/chrome-extension/src/content/overlay.tsx b/apps/chrome-extension/src/content/overlay.tsx
index 64b430a81a2..ac7ccefaa15 100644
--- a/apps/chrome-extension/src/content/overlay.tsx
+++ b/apps/chrome-extension/src/content/overlay.tsx
@@ -1929,11 +1929,6 @@ function OverlayApp() {
 							enabled: nextEnabled,
 						},
 					}).catch(() => undefined);
-					void sendServiceWorkerMessage({
-						target: "service-worker",
-						type: "toggle-microphone-mute",
-						muted: !nextEnabled,
-					}).catch(() => undefined);
 				}}
 			/>
 			<CountdownOverlay />
diff --git a/apps/chrome-extension/src/content/recording-bar.tsx b/apps/chrome-extension/src/content/recording-bar.tsx
index 8fb9c052715..88018afe73a 100644
--- a/apps/chrome-extension/src/content/recording-bar.tsx
+++ b/apps/chrome-extension/src/content/recording-bar.tsx
@@ -58,6 +58,7 @@ type BarStatus = {
 	phase: "recording" | "paused";
 	durationMs: number;
 	updatedAt: number;
+	microphone?: "live" | "muted";
 };
 
 type BarControl = "stop-recording" | "pause-recording" | "resume-recording";
@@ -78,6 +79,7 @@ const toBarStatus = (status: RecordingStatus | undefined): BarStatus | null => {
 		phase: status.phase,
 		durationMs: status.durationMs,
 		updatedAt: status.updatedAt ?? status.startedAt,
+		microphone: status.microphone,
 	};
 };
 
@@ -541,6 +543,24 @@ export function RecordingBarOverlay({
 		[applyResponse],
 	);
 
+	const toggleRecordingMicrophone = useCallback(() => {
+		const microphone = status?.microphone;
+		if (!microphone) return;
+		const muted = microphone === "live";
+		setStatus((current) =>
+			current ? { ...current, microphone: muted ? "muted" : "live" } : current,
+		);
+		sendServiceWorkerMessage({
+			target: "service-worker",
+			type: "toggle-microphone-mute",
+			muted,
+		})
+			.then((response) => {
+				if (response.ok) applyResponse(response.status, response.plan);
+			})
+			.catch(() => undefined);
+	}, [applyResponse, status?.microphone]);
+
 	const startRecording = useCallback(() => {
 		setBusy(true);
 		loadSettings()
@@ -863,21 +883,25 @@ export function RecordingBarOverlay({
 							</button>
 						) : null}
 
-						{onToggleMicrophone ? (
+						{status?.microphone ? (
 							<button
 								type="button"
 								className={classNames(
 									"cap-extension-dock-btn is-mic",
-									microphone?.enabled && "is-active",
-									!microphone?.enabled && "is-muted",
+									status.microphone === "live" && "is-active",
+									status.microphone === "muted" && "is-muted",
 								)}
 								aria-label={
-									microphone?.enabled ? "Mute microphone" : "Unmute microphone"
+									status.microphone === "live"
+										? "Mute microphone"
+										: "Unmute microphone"
 								}
-								data-tooltip={microphone?.enabled ? "Mic unmuted" : "Mic muted"}
-								onClick={onToggleMicrophone}
+								data-tooltip={
+									status.microphone === "live" ? "Mic unmuted" : "Mic muted"
+								}
+								onClick={toggleRecordingMicrophone}
 							>
-								{microphone?.enabled ? (
+								{status.microphone === "live" ? (
 									<Mic size={16} aria-hidden />
 								) : (
 									<MicOff size={16} aria-hidden />
diff --git a/apps/chrome-extension/src/offscreen/recorder.test.ts b/apps/chrome-extension/src/offscreen/recorder.test.ts
index cb513e16e77..676a7491d63 100644
--- a/apps/chrome-extension/src/offscreen/recorder.test.ts
+++ b/apps/chrome-extension/src/offscreen/recorder.test.ts
@@ -214,33 +214,45 @@ describe("recording microphone mute", () => {
 					getDisplayMedia: async () => main,
 				},
 			});
-			expect(
-				await start(
-					{
-						microphone: { enabled: microphone, deviceId: null },
-						systemAudio: { enabled: systemAudio },
-					},
-					mode,
-				),
-			).toMatchObject({ ok: true, status: { phase: "recording" } });
+			const started = await start(
+				{
+					microphone: { enabled: microphone, deviceId: null },
+					systemAudio: { enabled: systemAudio },
+				},
+				mode,
+			);
+			expect(started).toMatchObject({
+				ok: true,
+				status: { phase: "recording" },
+			});
+			const recordingMicrophone = (response: unknown) =>
+				(response as { status?: { microphone?: string } }).status?.microphone;
+			expect(recordingMicrophone(started)).toBe(
+				microphone ? "live" : undefined,
+			);
 
 			expect(speakerStreams).toEqual(
 				mode === "tab" && systemAudio ? [main] : [],
 			);
 			expect(mixContextOptions).toEqual([{ sinkId: { type: "none" } }]);
 
-			expect(
-				await send({ type: "toggle-microphone-mute", muted: true }),
-			).toEqual({ ok: true });
+			const muted = await send({ type: "toggle-microphone-mute", muted: true });
+			expect(muted).toMatchObject({ ok: true });
+			expect(recordingMicrophone(muted)).toBe(microphone ? "muted" : undefined);
 			expect(mic.enabled).toBe(!microphone);
 			expect(system.enabled).toBe(true);
 			if (systemAudio) {
 				expect(capturedStream.getAudioTracks()[0]?.enabled).toBe(true);
 			}
 
-			expect(
-				await send({ type: "toggle-microphone-mute", muted: false }),
-			).toEqual({ ok: true });
+			const unmuted = await send({
+				type: "toggle-microphone-mute",
+				muted: false,
+			});
+			expect(unmuted).toMatchObject({ ok: true });
+			expect(recordingMicrophone(unmuted)).toBe(
+				microphone ? "live" : undefined,
+			);
 			expect(mic.enabled).toBe(true);
 			expect(system.enabled).toBe(true);
 		},
diff --git a/apps/chrome-extension/src/offscreen/recorder.ts b/apps/chrome-extension/src/offscreen/recorder.ts
index d456468d7cd..d1b2c817588 100644
--- a/apps/chrome-extension/src/offscreen/recorder.ts
+++ b/apps/chrome-extension/src/offscreen/recorder.ts
@@ -1159,6 +1159,9 @@ const startRecording = async (request: StartRecordingRequest) => {
 			startedAt,
 			durationMs: 0,
 			updatedAt: startedAt,
+			...(recording.microphoneTracks.length > 0
+				? { microphone: "live" as const }
+				: {}),
 		};
 
 		try {
@@ -1817,12 +1820,15 @@ const handleRequest = async (
 
 	if (message.type === "toggle-microphone-mute") {
 		const recording = activeRecording;
-		if (recording) {
+		if (recording && recording.microphoneTracks.length > 0) {
 			for (const track of recording.microphoneTracks) {
 				track.enabled = !message.muted;
 			}
+			if (status.phase === "recording" || status.phase === "paused") {
+				status = { ...status, microphone: message.muted ? "muted" : "live" };
+			}
 		}
-		return { ok: true };
+		return { ok: true, status };
 	}
 
 	return { ok: true, status };
diff --git a/apps/chrome-extension/src/shared/types.ts b/apps/chrome-extension/src/shared/types.ts
index 38c265d1a9a..67932038218 100644
--- a/apps/chrome-extension/src/shared/types.ts
+++ b/apps/chrome-extension/src/shared/types.ts
@@ -166,6 +166,9 @@ export type RecordingStatus =
 			startedAt: number;
 			durationMs: number;
 			updatedAt: number;
+			// Set only when this recording captures a microphone, so the dock
+			// mutes the live track instead of the saved settings.
+			microphone?: "live" | "muted";
 			uploadStatus?: UploadStatus;
 			upload?: UploadSummary;
 	  }

From b4edb50c8f014e6be07b606d7dc417c1fe661249 Mon Sep 17 00:00:00 2001
From: Richie McIlroy <33632126+richiemcilroy@users.noreply.github.com>
Date: Thu, 29 Oct 2026 16:05:58 +0000
Subject: [PATCH 09/28] fix(chrome-extension): re-check a cached free plan
 before starting a recording

---
 .../e2e/recording-upload.spec.ts              | 47 +++++++++++++++++--
 .../src/background/service-worker.ts          | 33 ++++++++++++-
 2 files changed, 75 insertions(+), 5 deletions(-)

diff --git a/apps/chrome-extension/e2e/recording-upload.spec.ts b/apps/chrome-extension/e2e/recording-upload.spec.ts
index 9e5cd3dde2c..23d9317c500 100644
--- a/apps/chrome-extension/e2e/recording-upload.spec.ts
+++ b/apps/chrome-extension/e2e/recording-upload.spec.ts
@@ -37,6 +37,7 @@ type MockState = {
 	uploadParts: Map<number, Buffer>;
 	uploadHeaders: Record<string, string | string[] | undefined>[];
 	videoId: string;
+	bootstrapDelayMs: number;
 };
 
 type ChromeGlobal = typeof globalThis & {
@@ -197,6 +198,7 @@ const createMockCapServer = async () => {
 		presignBodies: [],
 		uploadBytes: [],
 		uploadParts: new Map(),
+		bootstrapDelayMs: 0,
 		uploadHeaders: [],
 		videoId: `e2e-${Date.now()}`,
 	};
@@ -224,6 +226,9 @@ const createMockCapServer = async () => {
 				request.method === "GET" &&
 				url.pathname === "/api/extension/bootstrap"
 			) {
+				await new Promise((resolve) =>
+					setTimeout(resolve, state.bootstrapDelayMs),
+				);
 				sendJson(response, 200, {
 					user: {
 						id: "user-e2e",
@@ -445,6 +450,7 @@ type RecordingOptions = {
 	systemAudio: boolean;
 	capturePath: string;
 	durationMs: number;
+	cachedPlan?: { isPro: boolean; maxRecordingSeconds: number | null };
 };
 
 const DEFAULT_RECORDING_OPTIONS: RecordingOptions = {
@@ -467,6 +473,7 @@ const configureExtension = async (
 			recordingMode,
 			microphone,
 			systemAudio,
+			cachedPlan,
 			settingsKey,
 			apiBaseUrl,
 		}) => {
@@ -498,10 +505,7 @@ const configureExtension = async (
 									id: "org-e2e",
 									name: "Extension E2E",
 								},
-								plan: {
-									isPro: true,
-									maxRecordingSeconds: 600,
-								},
+								plan: cachedPlan,
 							},
 							cachedAt: Date.now(),
 						},
@@ -557,6 +561,10 @@ const configureExtension = async (
 			recordingMode: options.mode,
 			microphone: options.microphone,
 			systemAudio: options.systemAudio,
+			cachedPlan: options.cachedPlan ?? {
+				isPro: true,
+				maxRecordingSeconds: 600,
+			},
 			settingsKey: SETTINGS_KEY,
 		},
 	);
@@ -900,6 +908,37 @@ test.describe("extension recording upload", () => {
 		});
 	}
 
+	test("re-checks a cached free plan so an upgraded account is not cut off", async () => {
+		if (!extension || !mockServer)
+			throw new Error("Test harness did not start");
+		// The popup's background plan refresh is still in flight when the
+		// recording starts, as when Start is pressed right after opening it.
+		mockServer.state.bootstrapDelayMs = 1_500;
+		const worker = await getServiceWorker(extension.context);
+		const { messengerPage } = await startRecording(
+			extension.context,
+			worker,
+			mockServer.origin,
+			{
+				...DEFAULT_RECORDING_OPTIONS,
+				durationMs: 4_000,
+				cachedPlan: { isPro: false, maxRecordingSeconds: 2 },
+			},
+		);
+		const status = await sendServiceWorkerMessage(messengerPage, {
+			target: "service-worker",
+			type: "get-recording-status",
+		});
+		expect(status).toMatchObject({ ok: true, status: { phase: "recording" } });
+
+		const stopResponse = await sendServiceWorkerMessage(messengerPage, {
+			target: "service-worker",
+			type: "stop-recording",
+		});
+		expect(stopResponse).toMatchObject({ ok: true });
+		await expectSuccessfulUpload(messengerPage, mockServer.state);
+	});
+
 	test("can complete two consecutive recording uploads without stale state", async () => {
 		if (!extension || !mockServer)
 			throw new Error("Test harness did not start");
diff --git a/apps/chrome-extension/src/background/service-worker.ts b/apps/chrome-extension/src/background/service-worker.ts
index fa24411ea8a..a6afc62040d 100644
--- a/apps/chrome-extension/src/background/service-worker.ts
+++ b/apps/chrome-extension/src/background/service-worker.ts
@@ -1051,6 +1051,36 @@ const refreshBootstrapInBackground = (
 		});
 };
 
+const START_PLAN_REFRESH_TIMEOUT_MS = 3000;
+
+// The recorder enforces the free-plan limit from the bootstrap it is started
+// with, and a cached free plan can predate an upgrade, so a free-plan start
+// re-checks the plan. A slow or failed request falls back to the cache.
+const refreshFreePlanForStart = async (
+	settings: ExtensionSettings,
+	auth: ExtensionAuth,
+	cached: BootstrapData,
+) => {
+	if (cached.plan.isPro) return cached;
+	let timer: ReturnType<typeof setTimeout> | undefined;
+	try {
+		const fresh = await Promise.race([
+			fetchBootstrap(settings, auth),
+			new Promise<null>((resolve) => {
+				timer = setTimeout(() => resolve(null), START_PLAN_REFRESH_TIMEOUT_MS);
+			}),
+		]);
+		if (!fresh) return cached;
+		bootstrapCache = fresh;
+		await saveCachedBootstrap(fresh).catch(() => undefined);
+		return fresh;
+	} catch {
+		return cached;
+	} finally {
+		clearTimeout(timer);
+	}
+};
+
 const loadSignedInState = async () => {
 	const [settings, auth, pendingAuth, authError] = await Promise.all([
 		loadSettings(),
@@ -1186,6 +1216,7 @@ const resolveMicWarning = async (
 
 const performRecordingStart = async (mode: RecordingMode) => {
 	const { settings, auth, bootstrap } = await requireSignedInState();
+	const startBootstrap = refreshFreePlanForStart(settings, auth, bootstrap);
 	externalCaptureAutoPipPending = false;
 	const recordingSettings =
 		settings.capture.recordingMode === mode
@@ -1238,7 +1269,7 @@ const performRecordingStart = async (mode: RecordingMode) => {
 			mode,
 			settings: recordingSettings,
 			auth,
-			bootstrap,
+			bootstrap: await startBootstrap,
 			tabId,
 			tabStreamId,
 		});

From 957a6cf2aef800c02713f29d1b02f9ada0f7ae33 Mon Sep 17 00:00:00 2001
From: Richie McIlroy <33632126+richiemcilroy@users.noreply.github.com>
Date: Thu, 29 Oct 2026 16:10:08 +0000
Subject: [PATCH 10/28] fix(chrome-extension): check the raw microphone signal
 before warning that it is silent

---
 .../src/offscreen/recorder.ts                 | 26 ++++++++++++++-----
 1 file changed, 20 insertions(+), 6 deletions(-)

diff --git a/apps/chrome-extension/src/offscreen/recorder.ts b/apps/chrome-extension/src/offscreen/recorder.ts
index d1b2c817588..2c5f90c195a 100644
--- a/apps/chrome-extension/src/offscreen/recorder.ts
+++ b/apps/chrome-extension/src/offscreen/recorder.ts
@@ -544,12 +544,26 @@ const getMicrophoneStream = async (
 };
 
 // How long a probe listens before declaring the mic silent, and the peak
-// amplitude (time-domain, 0..1) that counts as sound. A muted/dead device
-// flat-lines near 0; a working mic's noise floor clears this threshold, so it
-// only flags an effectively-silent input.
-const MIC_PROBE_WINDOW_MS = 250;
+// amplitude (time-domain, 0..1) that counts as sound. The probe reads the raw
+// signal: noise suppression flattens a quiet room to near zero, while a muted
+// or dead device delivers digital silence. Any real room tone sits well above
+// this threshold (about -100 dBFS). The window covers a freshly opened
+// device's leading zeros; a working mic resolves as soon as it delivers audio.
+const MIC_PROBE_WINDOW_MS = 1000;
 const MIC_PROBE_SAMPLE_INTERVAL_MS = 20;
-const MIC_SOUND_MIN_PEAK = 0.0015;
+const MIC_SOUND_MIN_PEAK = 0.00001;
+
+const getMicrophoneProbeConstraint = (
+	microphone: MicrophoneSettings,
+): MediaTrackConstraints => ({
+	...(microphone.deviceId &&
+	microphone.deviceId !== DEFAULT_MICROPHONE_DEVICE_ID
+		? { deviceId: { exact: microphone.deviceId } }
+		: {}),
+	echoCancellation: false,
+	autoGainControl: false,
+	noiseSuppression: false,
+});
 
 // Opens the selected mic and listens for any signal so the recorder can warn
 // before starting. Resolves as soon as sound is heard; only a genuinely silent
@@ -563,7 +577,7 @@ const probeMicrophone = async (
 	let stream: MediaStream;
 	try {
 		stream = await navigator.mediaDevices.getUserMedia({
-			audio: getAudioConstraint(microphone),
+			audio: getMicrophoneProbeConstraint(microphone),
 			video: false,
 		});
 	} catch {

From ec777e66ee9f8124151d91e7fb41b1c99edd97d3 Mon Sep 17 00:00:00 2001
From: Richie McIlroy <33632126+richiemcilroy@users.noreply.github.com>
Date: Thu, 29 Oct 2026 16:10:08 +0000
Subject: [PATCH 11/28] test(chrome-extension): cover the microphone check and
 stale plan in the upload e2e

---
 .../e2e/recording-upload.spec.ts              | 96 ++++++++++++++++++-
 1 file changed, 94 insertions(+), 2 deletions(-)

diff --git a/apps/chrome-extension/e2e/recording-upload.spec.ts b/apps/chrome-extension/e2e/recording-upload.spec.ts
index 23d9317c500..754db1e1669 100644
--- a/apps/chrome-extension/e2e/recording-upload.spec.ts
+++ b/apps/chrome-extension/e2e/recording-upload.spec.ts
@@ -391,7 +391,13 @@ const createMockCapServer = async () => {
 const canLaunchHeaded =
 	process.platform !== "linux" || Boolean(process.env.DISPLAY);
 
-const launchExtensionContext = async ({ tabCapture = false } = {}) => {
+const launchExtensionContext = async ({
+	tabCapture = false,
+	fakeAudioFile,
+}: {
+	tabCapture?: boolean;
+	fakeAudioFile?: string;
+} = {}) => {
 	const userDataDir = await mkdtemp(path.join(tmpdir(), "cap-extension-e2e-"));
 	const context = await chromium.launchPersistentContext(userDataDir, {
 		channel: "chromium",
@@ -409,6 +415,9 @@ const launchExtensionContext = async ({ tabCapture = false } = {}) => {
 				? [
 						"--use-fake-device-for-media-stream",
 						"--use-fake-ui-for-media-stream",
+						...(fakeAudioFile
+							? [`--use-file-for-fake-audio-capture=${fakeAudioFile}`]
+							: []),
 					]
 				: []),
 		],
@@ -451,6 +460,7 @@ type RecordingOptions = {
 	capturePath: string;
 	durationMs: number;
 	cachedPlan?: { isPro: boolean; maxRecordingSeconds: number | null };
+	microphoneWarning?: boolean;
 };
 
 const DEFAULT_RECORDING_OPTIONS: RecordingOptions = {
@@ -474,6 +484,7 @@ const configureExtension = async (
 			microphone,
 			systemAudio,
 			cachedPlan,
+			microphoneWarning,
 			settingsKey,
 			apiBaseUrl,
 		}) => {
@@ -539,7 +550,7 @@ const configureExtension = async (
 								seconds: 3,
 							},
 							microphoneWarning: {
-								enabled: false,
+								enabled: microphoneWarning,
 							},
 						},
 					},
@@ -561,6 +572,7 @@ const configureExtension = async (
 			recordingMode: options.mode,
 			microphone: options.microphone,
 			systemAudio: options.systemAudio,
+			microphoneWarning: options.microphoneWarning ?? false,
 			cachedPlan: options.cachedPlan ?? {
 				isPro: true,
 				maxRecordingSeconds: 600,
@@ -908,6 +920,86 @@ test.describe("extension recording upload", () => {
 		});
 	}
 
+	for (const input of [
+		{
+			name: "quiet room tone starts without a warning",
+			source: "anoisesrc=color=pink:amplitude=0.0005",
+			warns: false,
+		},
+		{
+			name: "a silent microphone still warns before starting",
+			source: "anullsrc=channel_layout=mono:sample_rate=48000",
+			warns: true,
+		},
+	]) {
+		test(`microphone check: ${input.name}`, async () => {
+			if (!extension || !mockServer)
+				throw new Error("Test harness did not start");
+			const audioDirectory = await mkdtemp(path.join(tmpdir(), "cap-e2e-mic-"));
+			try {
+				const audioFile = path.join(audioDirectory, "mic.wav");
+				execFileSync("ffmpeg", [
+					"-v",
+					"error",
+					"-f",
+					"lavfi",
+					"-i",
+					input.source,
+					"-t",
+					"10",
+					"-ar",
+					"48000",
+					"-ac",
+					"1",
+					audioFile,
+				]);
+				await extension.cleanup();
+				extension = await launchExtensionContext({ fakeAudioFile: audioFile });
+				const worker = await getServiceWorker(extension.context);
+				await configureExtension(worker, mockServer.origin, {
+					...DEFAULT_RECORDING_OPTIONS,
+					microphone: true,
+					microphoneWarning: true,
+				});
+				const messengerPage = await openExtensionMessengerPage(
+					extension.context,
+					worker,
+				);
+				const capturePage = await extension.context.newPage();
+				await capturePage.goto(`${mockServer.origin}/capture.html`);
+				await capturePage.bringToFront();
+				void sendServiceWorkerMessage(messengerPage, {
+					target: "service-worker",
+					type: "start-recording",
+					mode: DEFAULT_RECORDING_OPTIONS.mode,
+				}).catch(() => undefined);
+
+				const readPhase = async () => {
+					const response = await sendServiceWorkerMessage(messengerPage, {
+						target: "service-worker",
+						type: "get-recording-status",
+					});
+					return response.ok ? response.status?.phase : response.error;
+				};
+				if (input.warns) {
+					await capturePage.waitForTimeout(4_000);
+					expect(await readPhase()).toBe("idle");
+					expect(mockServer.state.initiateBodies).toHaveLength(0);
+				} else {
+					await expect.poll(readPhase, { timeout: 10_000 }).toBe("recording");
+					const stopResponse = await sendServiceWorkerMessage(messengerPage, {
+						target: "service-worker",
+						type: "stop-recording",
+					});
+					expect(stopResponse).toMatchObject({ ok: true });
+					await expectSuccessfulUpload(messengerPage, mockServer.state);
+				}
+			} finally {
+				await rm(audioDirectory, { recursive: true, force: true });
+			}
+		});
+	}
+
 	test("re-checks a cached free plan so an upgraded account is not cut off", async () => {
 		if (!extension || !mockServer)
 			throw new Error("Test harness did not start");

From e356e98052355c65cd0dbc39a1a998ae265ad90f Mon Sep 17 00:00:00 2001
From: Richie McIlroy <33632126+richiemcilroy@users.noreply.github.com>
Date: Thu, 29 Oct 2026 16:24:37 +0000
Subject: [PATCH 12/28] test(chrome-extension): run the e2e suites in installed
 Chrome, Edge and Brave, and add a seeded fuzz test

---
 apps/chrome-extension/e2e/browser.ts          |  72 ++++++
 apps/chrome-extension/e2e/overlay-ui.spec.ts  |  20 +-
 .../e2e/recording-upload.spec.ts              | 226 +++++++++++++++---
 3 files changed, 272 insertions(+), 46 deletions(-)
 create mode 100644 apps/chrome-extension/e2e/browser.ts

diff --git a/apps/chrome-extension/e2e/browser.ts b/apps/chrome-extension/e2e/browser.ts
new file mode 100644
index 00000000000..90507a49264
--- /dev/null
+++ b/apps/chrome-extension/e2e/browser.ts
@@ -0,0 +1,72 @@
+import { createHash } from "node:crypto";
+import { mkdtemp, rm } from "node:fs/promises";
+import { tmpdir } from "node:os";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { chromium } from "@playwright/test";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+export const extensionPath = path.resolve(__dirname, "../dist");
+
+// Chrome derives an unpacked extension's id from its absolute path.
+export const unpackedExtensionId = createHash("sha256")
+	.update(extensionPath)
+	.digest("hex")
+	.slice(0, 32)
+	.replace(/[0-9a-f]/g, (digit) =>
+		String.fromCharCode(97 + Number.parseInt(digit, 16)),
+	);
+
+// CAP_E2E_BROWSER points the suites at an installed browser (Chrome, Edge,
+// Brave) instead of Playwright's Chromium. Branded Chrome ignores
+// --load-extension, so installed browsers load the extension over CDP.
+const installedBrowser = process.env.CAP_E2E_BROWSER;
+
+export const launchExtensionBrowser = async ({
+	profilePrefix,
+	headless,
+	args,
+}: {
+	profilePrefix: string;
+	headless: boolean;
+	args: string[];
+}) => {
+	const userDataDir = await mkdtemp(path.join(tmpdir(), profilePrefix));
+	const context = await chromium.launchPersistentContext(
+		userDataDir,
+		installedBrowser
+			? {
+					executablePath: installedBrowser,
+					headless,
+					ignoreDefaultArgs: ["--disable-extensions"],
+					args: ["--enable-unsafe-extension-debugging", ...args],
+				}
+			: {
+					channel: "chromium",
+					headless,
+					args: [
+						`--disable-extensions-except=${extensionPath}`,
+						`--load-extension=${extensionPath}`,
+						...args,
+					],
+				},
+	);
+	if (installedBrowser) {
+		const browser = context.browser();
+		if (!browser) throw new Error("Installed browser did not expose CDP");
+		const session = await browser.newBrowserCDPSession();
+		await session.send(
+			"Extensions.loadUnpacked" as never,
+			{
+				path: extensionPath,
+			} as never,
+		);
+		await session.detach();
+	}
+	const cleanup = async () => {
+		await context.close();
+		await rm(userDataDir, { recursive: true, force: true });
+	};
+	return { context, cleanup };
+};
diff --git a/apps/chrome-extension/e2e/overlay-ui.spec.ts b/apps/chrome-extension/e2e/overlay-ui.spec.ts
index ba5f2843448..56f2a1cc2cd 100644
--- a/apps/chrome-extension/e2e/overlay-ui.spec.ts
+++ b/apps/chrome-extension/e2e/overlay-ui.spec.ts
@@ -1,20 +1,16 @@
-import { mkdtemp, rm } from "node:fs/promises";
 import {
 	createServer,
 	type IncomingMessage,
 	type ServerResponse,
 } from "node:http";
-import { tmpdir } from "node:os";
-import path from "node:path";
-import { fileURLToPath } from "node:url";
 import {
 	type BrowserContext,
 	type CDPSession,
-	chromium,
 	expect,
 	type Page,
 	test,
 } from "@playwright/test";
+import { launchExtensionBrowser } from "./browser";
 
 type ChromeGlobal = typeof globalThis & {
 	chrome: {
@@ -56,8 +52,6 @@ type ChromeGlobal = typeof globalThis & {
 	};
 };
 
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
-const extensionPath = path.resolve(__dirname, "../dist");
 const SETTINGS_KEY = "cap-extension-settings";
 const AUTH_KEY = "cap-extension-auth";
 const BOOTSTRAP_CACHE_KEY = "cap-extension-bootstrap-cache";
@@ -199,13 +193,10 @@ const createMockCapServer = async (
 };
 
 const launchExtensionContext = async () => {
-	const userDataDir = await mkdtemp(path.join(tmpdir(), "cap-close-e2e-"));
-	const context = await chromium.launchPersistentContext(userDataDir, {
-		channel: "chromium",
+	return launchExtensionBrowser({
+		profilePrefix: "cap-close-e2e-",
 		headless: true,
 		args: [
-			`--disable-extensions-except=${extensionPath}`,
-			`--load-extension=${extensionPath}`,
 			"--allow-http-screen-capture",
 			"--auto-select-tab-capture-source-by-title=Cap Close UI Target",
 			"--auto-select-desktop-capture-source=Cap Close UI Target",
@@ -215,11 +206,6 @@ const launchExtensionContext = async () => {
 			"--use-fake-ui-for-media-stream",
 		],
 	});
-	const cleanup = async () => {
-		await context.close();
-		await rm(userDataDir, { recursive: true, force: true });
-	};
-	return { context, cleanup };
 };
 
 const getServiceWorker = async (context: BrowserContext) => {
diff --git a/apps/chrome-extension/e2e/recording-upload.spec.ts b/apps/chrome-extension/e2e/recording-upload.spec.ts
index 754db1e1669..73e1d3d6fd1 100644
--- a/apps/chrome-extension/e2e/recording-upload.spec.ts
+++ b/apps/chrome-extension/e2e/recording-upload.spec.ts
@@ -1,5 +1,4 @@
 import { execFileSync } from "node:child_process";
-import { createHash } from "node:crypto";
 import { mkdtemp, rm, writeFile } from "node:fs/promises";
 import {
 	createServer,
@@ -8,15 +7,9 @@ import {
 } from "node:http";
 import { tmpdir } from "node:os";
 import path from "node:path";
-import { fileURLToPath } from "node:url";
-import {
-	type BrowserContext,
-	chromium,
-	expect,
-	type Page,
-	test,
-} from "@playwright/test";
+import { type BrowserContext, expect, type Page, test } from "@playwright/test";
 import type { RecordingStatus } from "../src/shared/types";
+import { launchExtensionBrowser, unpackedExtensionId } from "./browser";
 
 type ChromeRuntimeResponse =
 	| {
@@ -58,15 +51,6 @@ type ChromeGlobal = typeof globalThis & {
 	};
 };
 
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
-const extensionPath = path.resolve(__dirname, "../dist");
-const unpackedExtensionId = createHash("sha256")
-	.update(extensionPath)
-	.digest("hex")
-	.slice(0, 32)
-	.replace(/[0-9a-f]/g, (digit) =>
-		String.fromCharCode(97 + Number.parseInt(digit, 16)),
-	);
 const SETTINGS_KEY = "cap-extension-settings";
 const AUTH_KEY = "cap-extension-auth";
 const BOOTSTRAP_CACHE_KEY = "cap-extension-bootstrap-cache";
@@ -398,13 +382,10 @@ const launchExtensionContext = async ({
 	tabCapture?: boolean;
 	fakeAudioFile?: string;
 } = {}) => {
-	const userDataDir = await mkdtemp(path.join(tmpdir(), "cap-extension-e2e-"));
-	const context = await chromium.launchPersistentContext(userDataDir, {
-		channel: "chromium",
+	return launchExtensionBrowser({
+		profilePrefix: "cap-extension-e2e-",
 		headless: !tabCapture,
 		args: [
-			`--disable-extensions-except=${extensionPath}`,
-			`--load-extension=${extensionPath}`,
 			`--allowlisted-extension-id=${unpackedExtensionId}`,
 			"--allow-http-screen-capture",
 			"--auto-select-desktop-capture-source=Cap E2E Capture Target",
@@ -422,12 +403,6 @@ const launchExtensionContext = async ({
 				: []),
 		],
 	});
-	const cleanup = async () => {
-		await context.close();
-		await rm(userDataDir, { recursive: true, force: true });
-	};
-
-	return { context, cleanup };
 };
 
 const getServiceWorker = async (context: BrowserContext) => {
@@ -1031,6 +1006,199 @@ test.describe("extension recording upload", () => {
 		await expectSuccessfulUpload(messengerPage, mockServer.state);
 	});
 
+	// Random interleavings of everything a user or the browser can do around a
+	// recording. Run with CAP_E2E_FUZZ=<iterations> (and CAP_E2E_FUZZ_SEED to
+	// replay a failure). After every step the service worker must answer, no
+	// start may hang, and at the end a clean recording must still upload.
+	test("survives random recording interleavings", async () => {
+		const iterations = Number(process.env.CAP_E2E_FUZZ ?? 0);
+		test.skip(iterations <= 0, "Set CAP_E2E_FUZZ to run the fuzz test");
+		test.setTimeout(30 * 60_000);
+		if (!extension || !mockServer)
+			throw new Error("Test harness did not start");
+		const context = extension.context;
+		const server = mockServer;
+		let seed = Number(process.env.CAP_E2E_FUZZ_SEED ?? Date.now() % 1_000_000);
+		const random = () => {
+			seed = (seed * 1_103_515_245 + 12_345) % 2_147_483_648;
+			return seed / 2_147_483_648;
+		};
+		const initialSeed = seed;
+		const pick = <T>(values: readonly T[]) =>
+			values[Math.floor(random() * values.length)];
+
+		await configureExtension(await getServiceWorker(context), server.origin);
+		const messengerPage = await openExtensionMessengerPage(
+			context,
+			await getServiceWorker(context),
+		);
+		const capturePage = await context.newPage();
+		await capturePage.goto(`${server.origin}/capture.html`);
+		await capturePage.bringToFront();
+		let otherPage: Page | null = null;
+
+		const withTimeout = <T>(promise: Promise<T>, ms: number, label: string) =>
+			Promise.race([
+				promise,
+				new Promise<never>((_, reject) =>
+					setTimeout(() => reject(new Error(`${label} timed out`)), ms),
+				),
+			]);
+		const send = (message: Record<string, unknown>) =>
+			sendServiceWorkerMessage(messengerPage, {
+				target: "service-worker",
+				...message,
+			});
+		const liveWorker = async () => {
+			const existing = context
+				.serviceWorkers()
+				.find((worker) => worker.url().includes("assets/service-worker.js"));
+			if (existing) return existing;
+			const waiting = getServiceWorker(context);
+			await send({ type: "get-recording-status" }).catch(() => undefined);
+			return waiting;
+		};
+		const readPhase = async () => {
+			const response = await withTimeout(
+				send({ type: "get-recording-status" }),
+				5_000,
+				"get-recording-status",
+			);
+			return response.ok ? (response.status?.phase ?? "unknown") : "failed";
+		};
+
+		const pendingStarts: { startedAt: number; settled: boolean }[] = [];
+		const log: string[] = [];
+		const actions: Record<string, () => Promise<unknown>> = {
+			start: async () => {
+				const entry = { startedAt: Date.now(), settled: false };
+				pendingStarts.push(entry);
+				void send({ type: "start-recording", mode: "fullscreen" })
+					.catch(() => undefined)
+					.finally(() => {
+						entry.settled = true;
+					});
+			},
+			stop: () => send({ type: "stop-recording" }),
+			pause: () => send({ type: "pause-recording" }),
+			resume: () => send({ type: "resume-recording" }),
+			openPanel: () => send({ type: "open-recorder-panel" }),
+			closeUi: () => send({ type: "close-extension-ui" }),
+			reloadPage: () => capturePage.reload(),
+			switchTab: async () => {
+				if (otherPage && random() < 0.5) {
+					await capturePage.bringToFront();
+					return;
+				}
+				otherPage ??= await context.newPage();
+				await otherPage.goto(`${server.origin}/capture-audio.html`);
+				await otherPage.bringToFront();
+			},
+			closeOtherTab: async () => {
+				await otherPage?.close();
+				otherPage = null;
+				await capturePage.bringToFront();
+			},
+			killWorker: async () => {
+				const session = await context.newCDPSession(capturePage);
+				await session.send("ServiceWorker.enable");
+				await session.send("ServiceWorker.stopAllWorkers");
+				await session.detach();
+			},
+			closeOffscreen: async () => {
+				const worker = await liveWorker();
+				await worker.evaluate(async () => {
+					const chromeApi = (
+						globalThis as unknown as {
+							chrome: { offscreen: { closeDocument: () => Promise<void> } };
+						}
+					).chrome;
+					await chromeApi.offscreen.closeDocument().catch(() => undefined);
+				});
+			},
+			toggleMicrophone: async () => {
+				const response = await send({ type: "bootstrap" });
+				const settings = (
+					response as { settings?: { microphone?: { enabled: boolean } } }
+				).settings;
+				if (!settings?.microphone) return;
+				await send({
+					type: "settings-updated",
+					settings: {
+						...settings,
+						microphone: {
+							...settings.microphone,
+							enabled: !settings.microphone.enabled,
+						},
+					},
+				});
+			},
+		};
+		const weighted = [
+			...Array(4).fill("start"),
+			...Array(3).fill("stop"),
+			"pause",
+			"resume",
+			"openPanel",
+			"closeUi",
+			"reloadPage",
+			"switchTab",
+			"closeOtherTab",
+			"killWorker",
+			"closeOffscreen",
+			"toggleMicrophone",
+		] as const;
+
+		try {
+			for (let step = 0; step < iterations; step += 1) {
+				const action = pick(weighted);
+				const phaseBefore = await readPhase();
+				log.push(`${step}:${action}@${phaseBefore}`);
+				await withTimeout(
+					actions[action]().catch(() => undefined),
+					15_000,
+					action,
+				);
+				await capturePage.waitForTimeout(Math.floor(random() * 1_500));
+				const phase = await readPhase();
+				expect(phase).not.toBe("failed");
+				const stuck = pendingStarts.find(
+					(entry) => !entry.settled && Date.now() - entry.startedAt > 20_000,
+				);
+				expect(stuck, "a recording start never settled").toBeUndefined();
+			}
+
+			await send({ type: "stop-recording" }).catch(() => undefined);
+			await expect
+				.poll(readPhase, { timeout: 30_000 })
+				.not.toMatch(/^(creating|recording|paused|uploading)$/);
+
+			server.state.completeBodies = [];
+			server.state.progressBodies = [];
+			server.state.initiateBodies = [];
+			server.state.presignBodies = [];
+			server.state.uploadBytes = [];
+			server.state.uploadParts = new Map();
+			server.state.uploadHeaders = [];
+			server.state.videoId = `e2e-${Date.now()}-after-fuzz`;
+			await capturePage.bringToFront();
+			const started = await send({
+				type: "start-recording",
+				mode: "fullscreen",
+			});
+			expect(started).toMatchObject({ ok: true });
+			await expect.poll(readPhase).toBe("recording");
+			await capturePage.waitForTimeout(2_000);
+			expect(await send({ type: "stop-recording" })).toMatchObject({
+				ok: true,
+			});
+			await expectSuccessfulUpload(messengerPage, server.state);
+		} catch (error) {
+			console.log(`fuzz seed ${initialSeed}: ${log.join(" ")}`);
+			throw error;
+		}
+	});
+
 	test("can complete two consecutive recording uploads without stale state", async () => {
 		if (!extension || !mockServer)
 			throw new Error("Test harness did not start");

From 3fed61b43ee6d80cc93f17b600be7ec055b4947f Mon Sep 17 00:00:00 2001
From: Richie McIlroy <33632126+richiemcilroy@users.noreply.github.com>
Date: Thu, 29 Oct 2026 16:29:33 +0000
Subject: [PATCH 13/28] fix(chrome-extension): pick a camera when switching to
 Camera mode instead of greying out Start

---
 apps/chrome-extension/src/popup/main.tsx | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/apps/chrome-extension/src/popup/main.tsx b/apps/chrome-extension/src/popup/main.tsx
index be8fc9c0469..e0e514001b0 100644
--- a/apps/chrome-extension/src/popup/main.tsx
+++ b/apps/chrome-extension/src/popup/main.tsx
@@ -525,8 +525,14 @@ function App() {
 
 	const handleModeChange = (recordingMode: RecordingMode) => {
 		setMode(recordingMode);
+		const next = rememberRecordingMode(settingsRef.current, recordingMode);
+		// Camera mode records the camera itself, so pick one rather than
+		// leaving Start disabled until the user finds the camera list.
+		const firstCamera = cameraDevices[0]?.deviceId;
 		void updateSettings(
-			rememberRecordingMode(settingsRef.current, recordingMode),
+			recordingMode === "camera" && !next.webcam.deviceId && firstCamera
+				? rememberCameraSelection(next, firstCamera, cameraDevices)
+				: next,
 		);
 	};
 
@@ -686,6 +692,11 @@ function App() {
 								onStart={() => void start()}
 								onStop={() => void stop()}
 							/>
+							{!recordingActive && cameraRequired && (
+								<p className="mt-2 text-center text-xs text-gray-11">
+									Choose a camera above to record in Camera mode.
+								</p>
+							)}
 						</div>
 						{recordingBarStatus && (
 							<div className="cap-fade-up">

From fe8a61d2ebec455a16d1853f4934d8c15543c137 Mon Sep 17 00:00:00 2001
From: Richie McIlroy <33632126+richiemcilroy@users.noreply.github.com>
Date: Thu, 29 Oct 2026 16:29:33 +0000
Subject: [PATCH 14/28] test(chrome-extension): cover Camera mode start
 availability in the panel e2e

---
 apps/chrome-extension/e2e/overlay-ui.spec.ts | 57 ++++++++++++++++++++
 1 file changed, 57 insertions(+)

diff --git a/apps/chrome-extension/e2e/overlay-ui.spec.ts b/apps/chrome-extension/e2e/overlay-ui.spec.ts
index 56f2a1cc2cd..eb9aadccc74 100644
--- a/apps/chrome-extension/e2e/overlay-ui.spec.ts
+++ b/apps/chrome-extension/e2e/overlay-ui.spec.ts
@@ -1236,3 +1236,60 @@ test("the dock mutes the recording microphone without changing saved settings",
 		await mockServer.close();
 	}
 });
+
+test("choosing Camera mode picks a camera so Start stays available", async () => {
+	const mockServer = await createMockCapServer();
+	const extension = await launchExtensionContext();
+
+	try {
+		const worker = await getServiceWorker(extension.context);
+		await configureExtension(worker, mockServer.origin, {
+			webcamEnabled: false,
+		});
+		const messengerPage = await extension.context.newPage();
+		await messengerPage.goto(
+			`chrome-extension://${new URL(worker.url()).host}/popup.html`,
+		);
+		const targetPage = await extension.context.newPage();
+		await targetPage.goto(`${mockServer.origin}/capture.html`);
+		await targetPage.bringToFront();
+		await sendServiceWorkerMessage(messengerPage, {
+			target: "service-worker",
+			type: "open-recorder-panel",
+		});
+		await expect
+			.poll(() => frameWithUrl(targetPage, "popup.html") !== null, {
+				timeout: 15_000,
+			})
+			.toBe(true);
+		const panel = frameWithUrl(targetPage, "popup.html");
+		if (!panel) throw new Error("recorder panel missing");
+
+		await panel
+			.getByRole("combobox")
+			.filter({ hasText: /Full Screen/ })
+			.click();
+		await panel.getByRole("option", { name: "Camera only" }).click();
+
+		await expect(
+			panel.getByRole("button", { name: "Start recording" }),
+		).toBeEnabled();
+		const savedCamera = await worker.evaluate(
+			(settingsKey) =>
+				new Promise<string | null | undefined>((resolve) => {
+					const chromeApi = (globalThis as ChromeGlobal).chrome;
+					chromeApi.storage.local.get(settingsKey, (items) => {
+						const settings = items[settingsKey] as
+							| { webcam?: { deviceId?: string | null } }
+							| undefined;
+						resolve(settings?.webcam?.deviceId);
+					});
+				}),
+			SETTINGS_KEY,
+		);
+		expect(savedCamera).toBeTruthy();
+	} finally {
+		await extension.cleanup();
+		await mockServer.close();
+	}
+});

From d2e43bad5a25098bcdc5a4f1b18e0a49cd6cd28f Mon Sep 17 00:00:00 2001
From: Richie McIlroy <33632126+richiemcilroy@users.noreply.github.com>
Date: Thu, 29 Oct 2026 16:41:57 +0000
Subject: [PATCH 15/28] test(chrome-extension): check the panel and camera
 preview on a strict CSP page

---
 apps/chrome-extension/e2e/overlay-ui.spec.ts | 61 +++++++++++++++++++-
 1 file changed, 59 insertions(+), 2 deletions(-)

diff --git a/apps/chrome-extension/e2e/overlay-ui.spec.ts b/apps/chrome-extension/e2e/overlay-ui.spec.ts
index eb9aadccc74..1f1a43e05b6 100644
--- a/apps/chrome-extension/e2e/overlay-ui.spec.ts
+++ b/apps/chrome-extension/e2e/overlay-ui.spec.ts
@@ -97,8 +97,19 @@ const createMockCapServer = async (
 			sendJson(response, 204, {});
 			return;
 		}
-		if (request.method === "GET" && url.pathname === "/capture.html") {
-			response.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
+		if (
+			request.method === "GET" &&
+			(url.pathname === "/capture.html" || url.pathname === "/strict.html")
+		) {
+			response.writeHead(200, {
+				"Content-Type": "text/html; charset=utf-8",
+				...(url.pathname === "/strict.html"
+					? {
+							"Content-Security-Policy":
+								"default-src 'none'; frame-src 'none'; img-src 'none'; style-src 'none'; script-src 'none'",
+						}
+					: {}),
+			});
 			response.end(
 				`<!doctype html><html><head><title>Cap Close UI Target</title></head><body style="background:#321"><h1>Close UI page</h1></body></html>`,
 			);
@@ -1293,3 +1304,49 @@ test("choosing Camera mode picks a camera so Start stays available", async () =>
 		await mockServer.close();
 	}
 });
+
+test("the recorder panel and camera preview load on a page with a strict CSP", async () => {
+	const mockServer = await createMockCapServer();
+	const extension = await launchExtensionContext();
+
+	try {
+		const worker = await getServiceWorker(extension.context);
+		await configureExtension(worker, mockServer.origin);
+		const messengerPage = await extension.context.newPage();
+		await messengerPage.goto(
+			`chrome-extension://${new URL(worker.url()).host}/popup.html`,
+		);
+		const targetPage = await extension.context.newPage();
+		await targetPage.goto(`${mockServer.origin}/strict.html`);
+		await targetPage.bringToFront();
+		await sendServiceWorkerMessage(messengerPage, {
+			target: "service-worker",
+			type: "open-recorder-panel",
+		});
+		await expect
+			.poll(() => frameWithUrl(targetPage, "popup.html") !== null, {
+				timeout: 15_000,
+			})
+			.toBe(true);
+		const panel = frameWithUrl(targetPage, "popup.html");
+		if (!panel) throw new Error("recorder panel missing");
+		await expect(
+			panel.getByRole("button", { name: "Start recording" }),
+		).toBeVisible();
+		await expect
+			.poll(() => frameWithUrl(targetPage, "camera-preview.html") !== null, {
+				timeout: 15_000,
+			})
+			.toBe(true);
+		const devtools = await extension.context.newCDPSession(targetPage);
+		const panelBox = await getClosedShadowElementBox(
+			devtools,
+			"class",
+			"cap-extension-panel",
+		);
+		expect(panelBox?.width ?? 0).toBeGreaterThan(200);
+	} finally {
+		await extension.cleanup();
+		await mockServer.close();
+	}
+});

From 12369c0551f3bac76f1c929e9549187dd93efc8b Mon Sep 17 00:00:00 2001
From: Richie McIlroy <33632126+richiemcilroy@users.noreply.github.com>
Date: Thu, 29 Oct 2026 17:10:53 +0000
Subject: [PATCH 16/28] fix(chrome-extension): retry offscreen requests that
 arrive before the recorder document is listening

---
 .../src/background/service-worker.test.ts     | 28 +++++++++++++++++++
 .../src/background/service-worker.ts          |  7 ++++-
 2 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/apps/chrome-extension/src/background/service-worker.test.ts b/apps/chrome-extension/src/background/service-worker.test.ts
index fc25cca41b7..b29f474272b 100644
--- a/apps/chrome-extension/src/background/service-worker.test.ts
+++ b/apps/chrome-extension/src/background/service-worker.test.ts
@@ -175,3 +175,31 @@ describe("recording status synchronization", () => {
 		});
 	});
 });
+
+describe("offscreen messaging", () => {
+	it("retries a request that reached the extension before the offscreen listener", async () => {
+		const response = new Promise<ServiceWorkerResponse>((resolve) => {
+			onMessage(
+				{ target: "service-worker", type: "pause-recording" },
+				{},
+				resolve,
+			);
+		});
+		answerContexts(true);
+		await vi.waitFor(() => expect(pollReplies).toHaveLength(1));
+		const runtime = chrome.runtime as { lastError?: { message: string } };
+		runtime.lastError = {
+			message: "The message port closed before a response was received.",
+		};
+		pollReplies[0](undefined as unknown as OffscreenResponse);
+		runtime.lastError = undefined;
+
+		await vi.waitFor(() => expect(contextReplies).toHaveLength(1));
+		answerContexts(true);
+		await vi.waitFor(() => expect(pollReplies).toHaveLength(2));
+		const pausedStatus = { ...liveStatus, phase: "paused" as const };
+		pollReplies[1]({ ok: true, status: pausedStatus });
+
+		expect(await response).toMatchObject({ ok: true, status: pausedStatus });
+	});
+});
diff --git a/apps/chrome-extension/src/background/service-worker.ts b/apps/chrome-extension/src/background/service-worker.ts
index a6afc62040d..762c13ce016 100644
--- a/apps/chrome-extension/src/background/service-worker.ts
+++ b/apps/chrome-extension/src/background/service-worker.ts
@@ -245,12 +245,17 @@ const wait = (durationMs: number) =>
 		globalThis.setTimeout(resolve, durationMs);
 	});
 
+// A runtime message reaches every extension page. When the offscreen document
+// is still loading, the panel or welcome page can receive it first and let it
+// go unanswered, so a closed port means the same as a missing receiver: the
+// offscreen listener never kept the channel open.
 const isTransientOffscreenMessageError = (error: unknown) => {
 	if (!(error instanceof Error)) return false;
 	const message = error.message.toLowerCase();
 	return (
 		message.includes("receiving end does not exist") ||
-		message.includes("could not establish connection")
+		message.includes("could not establish connection") ||
+		message.includes("message port closed before a response was received")
 	);
 };
 

From 6b70b06b353ec321af770b265c003ba4c55190c7 Mon Sep 17 00:00:00 2001
From: Richie McIlroy <33632126+richiemcilroy@users.noreply.github.com>
Date: Thu, 29 Oct 2026 17:10:53 +0000
Subject: [PATCH 17/28] test(chrome-extension): let the quiet-room recording
 capture a chunk before stopping

---
 apps/chrome-extension/e2e/recording-upload.spec.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/chrome-extension/e2e/recording-upload.spec.ts b/apps/chrome-extension/e2e/recording-upload.spec.ts
index 73e1d3d6fd1..e50f86372c1 100644
--- a/apps/chrome-extension/e2e/recording-upload.spec.ts
+++ b/apps/chrome-extension/e2e/recording-upload.spec.ts
@@ -962,6 +962,7 @@ test.describe("extension recording upload", () => {
 					expect(mockServer.state.initiateBodies).toHaveLength(0);
 				} else {
 					await expect.poll(readPhase, { timeout: 10_000 }).toBe("recording");
+					await capturePage.waitForTimeout(1_000);
 					const stopResponse = await sendServiceWorkerMessage(messengerPage, {
 						target: "service-worker",
 						type: "stop-recording",

From 31d6a19c63e37052a3727c70c80245908ae24ffa Mon Sep 17 00:00:00 2001
From: Richie McIlroy <33632126+richiemcilroy@users.noreply.github.com>
Date: Thu, 29 Oct 2026 17:14:56 +0000
Subject: [PATCH 18/28] fix(chrome-extension): fall back to the default mic and
 retry busy devices when starting a recording

---
 .../src/offscreen/recorder.test.ts            | 141 +++++++++++++++++-
 .../src/offscreen/recorder.ts                 | 141 +++++++++---------
 2 files changed, 212 insertions(+), 70 deletions(-)

diff --git a/apps/chrome-extension/src/offscreen/recorder.test.ts b/apps/chrome-extension/src/offscreen/recorder.test.ts
index 676a7491d63..d5bbf0fabcd 100644
--- a/apps/chrome-extension/src/offscreen/recorder.test.ts
+++ b/apps/chrome-extension/src/offscreen/recorder.test.ts
@@ -205,7 +205,6 @@ describe("recording microphone mute", () => {
 			const system = new Track("audio");
 			const main = new Stream([new Track("video")]);
 			if (systemAudio) main.addTrack(system);
-			if (mode === "camera" && microphone) main.addTrack(mic);
 			vi.stubGlobal("navigator", {
 				userAgent: "Chrome/152.0.0.0",
 				mediaDevices: {
@@ -362,3 +361,143 @@ describe("recording source ending", () => {
 		);
 	});
 });
+
+describe("capture device acquisition", () => {
+	const deviceError = (name: string) => new DOMException(name, name);
+	// Runs fake timers until the start settles, so a delayed retry fires.
+	const settle = async <T>(promise: Promise<T>) => {
+		let settled = false;
+		void promise.finally(() => {
+			settled = true;
+		});
+		while (!settled) await vi.advanceTimersByTimeAsync(50);
+		return promise;
+	};
+
+	it.each(["fullscreen", "camera"] satisfies RecordingMode[])(
+		"records from the default mic when the saved one is gone in %s",
+		async (mode) => {
+			const mic = new Track("audio");
+			const requests: MediaStreamConstraints[] = [];
+			vi.stubGlobal("navigator", {
+				userAgent: "Chrome/152.0.0.0",
+				mediaDevices: {
+					getUserMedia: async (constraints: MediaStreamConstraints) => {
+						requests.push(constraints);
+						if (constraints.video) return new Stream([new Track("video")]);
+						const audio = constraints.audio as MediaTrackConstraints;
+						if (audio.deviceId) throw deviceError("OverconstrainedError");
+						return new Stream([mic]);
+					},
+					getDisplayMedia: async () => new Stream([new Track("video")]),
+				},
+			});
+			const started = await start(
+				{
+					microphone: { enabled: true, deviceId: "unplugged-mic" },
+					webcam: {
+						...(await import("../shared/storage")).defaultSettings.webcam,
+						deviceId: "camera-1",
+					},
+				},
+				mode,
+			);
+
+			expect(started).toMatchObject({
+				ok: true,
+				status: { phase: "recording", microphone: "live" },
+			});
+			expect(requests.filter((request) => request.audio)).toEqual([
+				expect.objectContaining({
+					audio: expect.objectContaining({
+						deviceId: { exact: "unplugged-mic" },
+					}),
+				}),
+				expect.objectContaining({
+					audio: expect.not.objectContaining({ deviceId: expect.anything() }),
+				}),
+			]);
+			expect(requests.filter((request) => request.video)).toEqual(
+				mode === "camera" ? [expect.objectContaining({ audio: false })] : [],
+			);
+		},
+	);
+
+	it("retries a mic that is still being released", async () => {
+		const mic = new Track("audio");
+		let micAttempts = 0;
+		vi.stubGlobal("navigator", {
+			userAgent: "Chrome/152.0.0.0",
+			mediaDevices: {
+				getUserMedia: async () => {
+					micAttempts += 1;
+					if (micAttempts === 1) throw deviceError("NotReadableError");
+					return new Stream([mic]);
+				},
+				getDisplayMedia: async () => new Stream([new Track("video")]),
+			},
+		});
+		const started = start({ microphone: { enabled: true, deviceId: null } });
+
+		expect(await settle(started)).toMatchObject({
+			ok: true,
+			status: { phase: "recording", microphone: "live" },
+		});
+		expect(micAttempts).toBe(2);
+	});
+
+	it("does not retry a mic the user has blocked", async () => {
+		let micAttempts = 0;
+		vi.stubGlobal("navigator", {
+			userAgent: "Chrome/152.0.0.0",
+			mediaDevices: {
+				getUserMedia: async () => {
+					micAttempts += 1;
+					throw deviceError("NotAllowedError");
+				},
+				getDisplayMedia: async () => new Stream([new Track("video")]),
+			},
+		});
+		const started = await start({
+			microphone: { enabled: true, deviceId: "blocked-mic" },
+		});
+
+		expect(started).toMatchObject({ ok: true, status: { phase: "recording" } });
+		expect(
+			(started as { status?: { microphone?: string } }).status?.microphone,
+		).toBeUndefined();
+		expect(micAttempts).toBe(1);
+	});
+
+	it("retries a camera that is still being released in Camera mode", async () => {
+		let cameraAttempts = 0;
+		vi.stubGlobal("navigator", {
+			userAgent: "Chrome/152.0.0.0",
+			mediaDevices: {
+				getUserMedia: async (constraints: MediaStreamConstraints) => {
+					if (!constraints.video) return new Stream([new Track("audio")]);
+					cameraAttempts += 1;
+					if (cameraAttempts === 1) throw deviceError("NotReadableError");
+					return new Stream([new Track("video")]);
+				},
+				getDisplayMedia: async () => new Stream([new Track("video")]),
+			},
+		});
+		const started = start(
+			{
+				microphone: { enabled: true, deviceId: null },
+				webcam: {
+					...(await import("../shared/storage")).defaultSettings.webcam,
+					deviceId: "__cap_default_camera__",
+				},
+			},
+			"camera",
+		);
+
+		expect(await settle(started)).toMatchObject({
+			ok: true,
+			status: { phase: "recording", microphone: "live" },
+		});
+		expect(cameraAttempts).toBe(2);
+	});
+});
diff --git a/apps/chrome-extension/src/offscreen/recorder.ts b/apps/chrome-extension/src/offscreen/recorder.ts
index 2c5f90c195a..10e1d4b87eb 100644
--- a/apps/chrome-extension/src/offscreen/recorder.ts
+++ b/apps/chrome-extension/src/offscreen/recorder.ts
@@ -49,7 +49,6 @@ import type {
 	OffscreenRequest,
 	OffscreenResponse,
 	RecordingCaptureSource,
-	RecordingMode,
 	RecordingStatus,
 	RecordingStatusBroadcast,
 	ServiceWorkerRequest,
@@ -345,7 +344,7 @@ const getCameraPreviewStream = async (
 	}
 
 	disconnectCameraPreviewsExcept(keepSessionId);
-	const promise = getCameraMediaStream(settings, false).then((stream) => {
+	const promise = getCameraMediaStream(settings).then((stream) => {
 		// The camera can take long enough to open that every waiting session
 		// may have disconnected (or moved to another device) in the meantime;
 		// adopting the stream then would leave the camera lit with no consumer.
@@ -422,39 +421,67 @@ const broadcastCaptureSource = (source: RecordingCaptureSource) => {
 	);
 };
 
-const getCameraMediaStream = async (
-	webcam: WebcamSettings,
-	audio: boolean | MediaTrackConstraints,
+// A device that another app, the previous tab's preview or the mic probe has
+// just released can briefly fail to reopen with NotReadableError (or
+// AbortError on Windows), so each constraint gets one delayed retry.
+const DEVICE_REOPEN_RETRY_MS = 300;
+
+const isBusyDeviceError = (error: unknown) =>
+	error instanceof DOMException &&
+	(error.name === "NotReadableError" || error.name === "AbortError");
+
+// Tries each constraint in order. A saved device id goes stale when the
+// device is unplugged or Chrome rotates ids, so callers list the exact device
+// first and a looser fallback after it. A denied permission fails the same way
+// for every constraint, so it ends the search.
+const openUserMedia = async (
+	constraints: MediaStreamConstraints[],
+	isUsable: (stream: MediaStream) => boolean = () => true,
 ) => {
+	let lastError: unknown = null;
+	for (const constraint of constraints) {
+		for (let attempt = 0; attempt < 2; attempt += 1) {
+			try {
+				const stream = await navigator.mediaDevices.getUserMedia(constraint);
+				if (isUsable(stream)) return stream;
+				stopTracks(stream);
+				break;
+			} catch (error) {
+				lastError = error;
+				if (error instanceof DOMException && error.name === "NotAllowedError") {
+					throw error;
+				}
+				if (attempt > 0 || !isBusyDeviceError(error)) break;
+				await new Promise<void>((resolve) => {
+					window.setTimeout(resolve, DEVICE_REOPEN_RETRY_MS);
+				});
+			}
+		}
+	}
+	throw lastError ?? new Error("Failed to open the capture device");
+};
+
+const getCameraMediaStream = (webcam: WebcamSettings) => {
 	const constraints: MediaStreamConstraints[] = [];
 	if (webcam.deviceId && webcam.deviceId !== DEFAULT_CAMERA_DEVICE_ID) {
 		constraints.push({
 			video: { deviceId: { exact: webcam.deviceId } },
-			audio,
+			audio: false,
 		});
 		constraints.push({
 			video: { deviceId: { ideal: webcam.deviceId } },
-			audio,
+			audio: false,
 		});
 	}
 	constraints.push({
 		video: true,
-		audio,
+		audio: false,
 	});
 
-	let lastError: unknown = null;
-	for (const constraint of constraints) {
-		try {
-			const stream = await navigator.mediaDevices.getUserMedia(constraint);
-			const videoTrack = stream.getVideoTracks()[0];
-			if (videoTrack && videoTrack.readyState === "live") {
-				return stream;
-			}
-		} catch (error) {
-			lastError = error;
-		}
-	}
-	throw lastError ?? new Error("Failed to acquire camera stream");
+	return openUserMedia(
+		constraints,
+		(stream) => stream.getVideoTracks()[0]?.readyState === "live",
+	);
 };
 
 const tabCaptureConstraints = (streamId: string, includeAudio: boolean) =>
@@ -489,10 +516,7 @@ const getMainStream = async (request: StartRecordingRequest) => {
 	}
 
 	if (request.mode === "camera") {
-		return getCameraMediaStream(
-			request.settings.webcam,
-			getAudioConstraint(request.settings.microphone),
-		);
+		return getCameraMediaStream(request.settings.webcam);
 	}
 
 	return captureDisplayStream(
@@ -505,39 +529,37 @@ const getMainStream = async (request: StartRecordingRequest) => {
 	);
 };
 
-const getAudioConstraint = (
+// The selected mic first, then the default one, so an unplugged or renamed
+// device records from the default mic instead of silently recording none.
+const getMicrophoneConstraints = (
 	microphone: MicrophoneSettings,
-): boolean | MediaTrackConstraints => {
-	if (!microphone.enabled) return false;
+	processing: boolean,
+): MediaStreamConstraints[] => {
+	const audio: MediaTrackConstraints = {
+		echoCancellation: processing,
+		autoGainControl: processing,
+		noiseSuppression: processing,
+	};
+	const fallback = { audio, video: false };
 	if (
 		microphone.deviceId &&
 		microphone.deviceId !== DEFAULT_MICROPHONE_DEVICE_ID
 	) {
-		return {
-			deviceId: { exact: microphone.deviceId },
-			echoCancellation: true,
-			autoGainControl: true,
-			noiseSuppression: true,
-		};
+		return [
+			{
+				audio: { ...audio, deviceId: { exact: microphone.deviceId } },
+				video: false,
+			},
+			fallback,
+		];
 	}
-	return true;
+	return [fallback];
 };
 
-const getMicrophoneStream = async (
-	microphone: MicrophoneSettings,
-	mode: RecordingMode,
-) => {
-	if (mode === "camera") return null;
+const getMicrophoneStream = async (microphone: MicrophoneSettings) => {
 	if (!microphone.enabled) return null;
-
-	const audio = getAudioConstraint(microphone);
-	const constraints: MediaStreamConstraints = {
-		audio,
-		video: false,
-	};
-
 	try {
-		return await navigator.mediaDevices.getUserMedia(constraints);
+		return await openUserMedia(getMicrophoneConstraints(microphone, true));
 	} catch {
 		return null;
 	}
@@ -553,18 +575,6 @@ const MIC_PROBE_WINDOW_MS = 1000;
 const MIC_PROBE_SAMPLE_INTERVAL_MS = 20;
 const MIC_SOUND_MIN_PEAK = 0.00001;
 
-const getMicrophoneProbeConstraint = (
-	microphone: MicrophoneSettings,
-): MediaTrackConstraints => ({
-	...(microphone.deviceId &&
-	microphone.deviceId !== DEFAULT_MICROPHONE_DEVICE_ID
-		? { deviceId: { exact: microphone.deviceId } }
-		: {}),
-	echoCancellation: false,
-	autoGainControl: false,
-	noiseSuppression: false,
-});
-
 // Opens the selected mic and listens for any signal so the recorder can warn
 // before starting. Resolves as soon as sound is heard; only a genuinely silent
 // mic waits out the full window. Unlike a popup, the offscreen AudioContext is
@@ -576,10 +586,7 @@ const probeMicrophone = async (
 
 	let stream: MediaStream;
 	try {
-		stream = await navigator.mediaDevices.getUserMedia({
-			audio: getMicrophoneProbeConstraint(microphone),
-			video: false,
-		});
+		stream = await openUserMedia(getMicrophoneConstraints(microphone, false));
 	} catch {
 		return { available: false, hasSound: false };
 	}
@@ -908,7 +915,6 @@ const startRecording = async (request: StartRecordingRequest) => {
 		countdownPromise = runStartCountdown(request);
 		const microphoneStream = await getMicrophoneStream(
 			request.settings.microphone,
-			request.mode,
 		);
 		if (microphoneStream) {
 			ownedStreams.push(microphoneStream);
@@ -1040,10 +1046,7 @@ const startRecording = async (request: StartRecordingRequest) => {
 			recorder,
 			stopPromise: Promise.resolve(),
 			streams,
-			microphoneTracks:
-				request.mode === "camera"
-					? mainStream.getAudioTracks()
-					: (microphoneStream?.getAudioTracks() ?? []),
+			microphoneTracks: microphoneStream?.getAudioTracks() ?? [],
 			recordingStream,
 			statusTimer: null,
 			spool,

From 770d95ae71e9b6beb30e3a8b4b568dac2990db78 Mon Sep 17 00:00:00 2001
From: Richie McIlroy <33632126+richiemcilroy@users.noreply.github.com>
Date: Thu, 29 Oct 2026 17:52:16 +0000
Subject: [PATCH 19/28] fix(chrome-extension): keep the camera preview in the
 recorded tab when background tabs load the overlay

---
 .../src/background/service-worker.ts                 | 12 ++++++++++++
 apps/chrome-extension/src/content/overlay.tsx        | 12 ++++++++++--
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/apps/chrome-extension/src/background/service-worker.ts b/apps/chrome-extension/src/background/service-worker.ts
index 762c13ce016..1215d083140 100644
--- a/apps/chrome-extension/src/background/service-worker.ts
+++ b/apps/chrome-extension/src/background/service-worker.ts
@@ -1471,6 +1471,18 @@ const beginAuthFlow = async (settings: ExtensionSettings) => {
 const handlePreviewReady = async (tabId?: number) => {
 	if (tabId === undefined) return;
 	if (pendingPreviewTabId !== null && pendingPreviewTabId !== tabId) return;
+	// Hand-offs to another tab always go through showOverlayInTab, which marks
+	// the tab pending. A preview that opened on its own somewhere else (a
+	// background tab whose overlay loaded when the recording started) must not
+	// take the camera away from the tab it was placed in.
+	if (
+		pendingPreviewTabId === null &&
+		activePreviewTabId !== null &&
+		activePreviewTabId !== tabId
+	) {
+		await hidePreviewTab(tabId);
+		return;
+	}
 	activePreviewTabId = tabId;
 	pendingPreviewTabId = null;
 	await hidePreviewTabsExcept(tabId);
diff --git a/apps/chrome-extension/src/content/overlay.tsx b/apps/chrome-extension/src/content/overlay.tsx
index ac7ccefaa15..a3a0b3b1651 100644
--- a/apps/chrome-extension/src/content/overlay.tsx
+++ b/apps/chrome-extension/src/content/overlay.tsx
@@ -761,8 +761,16 @@ function OverlayApp() {
 					setRecordingPreviewActive(previewActive);
 					// A replayed startup message (the lazy-load trigger) may have
 					// already opened the preview before this sync resolves, so only
-					// ever turn it on here.
-					if (!dismissed && previewActive) setPreviewOpen(true);
+					// ever turn it on here. Every open tab loads the overlay when a
+					// recording starts; only a visible one opens the camera, and a
+					// background tab picks it up when it is shown.
+					if (
+						!dismissed &&
+						previewActive &&
+						document.visibilityState === "visible"
+					) {
+						setPreviewOpen(true);
+					}
 				}
 			})
 			.catch(() => undefined);

From d7a11ed566e7938d8d52e854b23684d34de46f3a Mon Sep 17 00:00:00 2001
From: Richie McIlroy <33632126+richiemcilroy@users.noreply.github.com>
Date: Thu, 29 Oct 2026 17:52:16 +0000
Subject: [PATCH 20/28] test(chrome-extension): stress webcam and mic starts on
 synthetic devices and cover background tabs during a recording

---
 apps/chrome-extension/e2e/browser.ts          |  30 +-
 .../e2e/recording-upload.spec.ts              | 297 +++++++++++++++++-
 .../chrome-extension/e2e/webcam-start.spec.ts |  30 +-
 3 files changed, 326 insertions(+), 31 deletions(-)

diff --git a/apps/chrome-extension/e2e/browser.ts b/apps/chrome-extension/e2e/browser.ts
index 90507a49264..e6d7659f5fa 100644
--- a/apps/chrome-extension/e2e/browser.ts
+++ b/apps/chrome-extension/e2e/browser.ts
@@ -1,5 +1,5 @@
 import { createHash } from "node:crypto";
-import { mkdtemp, rm } from "node:fs/promises";
+import { mkdir, mkdtemp, rm, writeFile } from "node:fs/promises";
 import { tmpdir } from "node:os";
 import path from "node:path";
 import { fileURLToPath } from "node:url";
@@ -23,16 +23,44 @@ export const unpackedExtensionId = createHash("sha256")
 // --load-extension, so installed browsers load the extension over CDP.
 const installedBrowser = process.env.CAP_E2E_BROWSER;
 
+// Allows the extension's camera and mic in a new profile, as if the user had
+// accepted the permission prompt. Chrome refuses CDP permission grants for
+// extension origins, so the setting is written before the browser starts.
+const allowExtensionMediaInProfile = async (userDataDir: string) => {
+	const allow = { setting: 1 };
+	const exceptions = {
+		[`chrome-extension://${unpackedExtensionId}/,*`]: allow,
+		[`chrome-extension://${unpackedExtensionId},*`]: allow,
+	};
+	await mkdir(path.join(userDataDir, "Default"), { recursive: true });
+	await writeFile(
+		path.join(userDataDir, "Default", "Preferences"),
+		JSON.stringify({
+			profile: {
+				content_settings: {
+					exceptions: {
+						media_stream_camera: exceptions,
+						media_stream_mic: exceptions,
+					},
+				},
+			},
+		}),
+	);
+};
+
 export const launchExtensionBrowser = async ({
 	profilePrefix,
 	headless,
 	args,
+	allowExtensionMedia = false,
 }: {
 	profilePrefix: string;
 	headless: boolean;
 	args: string[];
+	allowExtensionMedia?: boolean;
 }) => {
 	const userDataDir = await mkdtemp(path.join(tmpdir(), profilePrefix));
+	if (allowExtensionMedia) await allowExtensionMediaInProfile(userDataDir);
 	const context = await chromium.launchPersistentContext(
 		userDataDir,
 		installedBrowser
diff --git a/apps/chrome-extension/e2e/recording-upload.spec.ts b/apps/chrome-extension/e2e/recording-upload.spec.ts
index e50f86372c1..6f71b0fc046 100644
--- a/apps/chrome-extension/e2e/recording-upload.spec.ts
+++ b/apps/chrome-extension/e2e/recording-upload.spec.ts
@@ -365,6 +365,9 @@ const createMockCapServer = async () => {
 					}
 					resolve();
 				});
+				// The share page the extension opens after an upload holds a
+				// keep-alive connection that would otherwise block close.
+				server.closeAllConnections();
 			}),
 	};
 };
@@ -375,6 +378,11 @@ const createMockCapServer = async () => {
 const canLaunchHeaded =
 	process.platform !== "linux" || Boolean(process.env.DISPLAY);
 
+// CAP_E2E_SYSTEM_DEVICES uses the machine's own camera and microphone (on CI
+// rigs, OS-level synthetic devices such as a v4l2loopback camera and a
+// PulseAudio virtual mic) instead of Chromium's built-in fake devices.
+const useSystemDevices = Boolean(process.env.CAP_E2E_SYSTEM_DEVICES);
+
 const launchExtensionContext = async ({
 	tabCapture = false,
 	fakeAudioFile,
@@ -382,9 +390,11 @@ const launchExtensionContext = async ({
 	tabCapture?: boolean;
 	fakeAudioFile?: string;
 } = {}) => {
-	return launchExtensionBrowser({
+	const extension = await launchExtensionBrowser({
 		profilePrefix: "cap-extension-e2e-",
 		headless: !tabCapture,
+		// Without the fake permission UI, grant the camera and mic up front.
+		allowExtensionMedia: tabCapture,
 		args: [
 			`--allowlisted-extension-id=${unpackedExtensionId}`,
 			"--allow-http-screen-capture",
@@ -394,8 +404,8 @@ const launchExtensionContext = async ({
 			"--autoplay-policy=no-user-gesture-required",
 			...(!tabCapture
 				? [
-						"--use-fake-device-for-media-stream",
 						"--use-fake-ui-for-media-stream",
+						...(useSystemDevices ? [] : ["--use-fake-device-for-media-stream"]),
 						...(fakeAudioFile
 							? [`--use-file-for-fake-audio-capture=${fakeAudioFile}`]
 							: []),
@@ -403,6 +413,7 @@ const launchExtensionContext = async ({
 				: []),
 		],
 	});
+	return extension;
 };
 
 const getServiceWorker = async (context: BrowserContext) => {
@@ -429,8 +440,9 @@ const openExtensionMessengerPage = async (
 };
 
 type RecordingOptions = {
-	mode: "fullscreen" | "tab";
+	mode: "fullscreen" | "tab" | "camera";
 	microphone: boolean;
+	webcam?: boolean;
 	systemAudio: boolean;
 	capturePath: string;
 	durationMs: number;
@@ -457,6 +469,7 @@ const configureExtension = async (
 			bootstrapKey,
 			recordingMode,
 			microphone,
+			webcam,
 			systemAudio,
 			cachedPlan,
 			microphoneWarning,
@@ -503,8 +516,8 @@ const configureExtension = async (
 								microphone: null,
 							},
 							webcam: {
-								enabled: false,
-								deviceId: null,
+								enabled: webcam,
+								deviceId: webcam ? "__cap_default_camera__" : null,
 								position: "bottom-left",
 								size: 230,
 								shape: "round",
@@ -546,6 +559,7 @@ const configureExtension = async (
 			bootstrapKey: BOOTSTRAP_CACHE_KEY,
 			recordingMode: options.mode,
 			microphone: options.microphone,
+			webcam: options.webcam ?? false,
 			systemAudio: options.systemAudio,
 			microphoneWarning: options.microphoneWarning ?? false,
 			cachedPlan: options.cachedPlan ?? {
@@ -686,6 +700,59 @@ const measureFlashBeepOffsets = (
 	});
 };
 
+// Frame size, mean brightness and how many frames differ from the one before,
+// so a black or frozen camera fails even when the recording has frames.
+const measureVideo = (file: string) => {
+	const [width, height] = execFileSync("ffprobe", [
+		"-v",
+		"error",
+		"-select_streams",
+		"v:0",
+		"-show_entries",
+		"stream=width,height",
+		"-of",
+		"csv=p=0",
+		file,
+	])
+		.toString()
+		.trim()
+		.split(",")
+		.map(Number);
+	const lines = execFileSync(
+		"ffmpeg",
+		[
+			"-v",
+			"error",
+			"-i",
+			file,
+			"-an",
+			"-vf",
+			"signalstats,metadata=print:file=-",
+			"-f",
+			"null",
+			"-",
+		],
+		{ maxBuffer: 16 * 1024 * 1024 },
+	)
+		.toString()
+		.split("\n");
+	const luma: number[] = [];
+	let movingFrames = 0;
+	for (const line of lines) {
+		const average = /YAVG=([\d.]+)/.exec(line);
+		if (average) luma.push(Number(average[1]));
+		const difference = /YDIF=([\d.]+)/.exec(line);
+		if (difference && Number(difference[1]) > 0.5) movingFrames += 1;
+	}
+	return {
+		width,
+		height,
+		frames: luma.length,
+		meanLuma: luma.reduce((total, value) => total + value, 0) / luma.length,
+		movingFrames,
+	};
+};
+
 const probeUploadedRecording = async (state: MockState) => {
 	const parts = [...state.uploadParts.entries()]
 		.sort(([a], [b]) => a - b)
@@ -748,6 +815,11 @@ const probeUploadedRecording = async (state: MockState) => {
 		return {
 			durations,
 			tailPeak,
+			audioPeak: samples.reduce(
+				(peak, value) => Math.max(peak, Math.abs(value)),
+				0,
+			),
+			video: measureVideo(file),
 			avOffsets: measureFlashBeepOffsets(file, samples, 8000),
 		};
 	} finally {
@@ -910,6 +982,10 @@ test.describe("extension recording upload", () => {
 		test(`microphone check: ${input.name}`, async () => {
 			if (!extension || !mockServer)
 				throw new Error("Test harness did not start");
+			test.skip(
+				useSystemDevices,
+				"Feeds the mic through Chromium's fake device",
+			);
 			const audioDirectory = await mkdtemp(path.join(tmpdir(), "cap-e2e-mic-"));
 			try {
 				const audioFile = path.join(audioDirectory, "mic.wav");
@@ -1253,3 +1329,214 @@ test.describe("extension recording upload", () => {
 		);
 	});
 });
+
+// Reports whether the in-page camera preview is showing moving frames.
+const readCameraPreview = async (page: Page) => {
+	const frame = page
+		.frames()
+		.find((candidate) => candidate.url().includes("/camera-preview.html"));
+	if (!frame) return "no preview frame";
+	return frame
+		.evaluate(
+			() =>
+				new Promise<string>((resolve) => {
+					const video = document.querySelector("video");
+					if (!video) return resolve("no video element");
+					if (video.videoWidth === 0) return resolve("no frames yet");
+					const startTime = video.currentTime;
+					const timer = window.setTimeout(() => {
+						resolve(video.currentTime > startTime ? "live" : "frozen");
+					}, 1_000);
+					video.requestVideoFrameCallback(() => {
+						window.clearTimeout(timer);
+						resolve("live");
+					});
+				}),
+		)
+		.catch((error: unknown) =>
+			error instanceof Error ? error.message : String(error),
+		);
+};
+
+// Starts and stops a recording with the webcam and microphone on, over and
+// over in one browser, as someone recording several clips back to back would.
+// Every start must show a live camera preview, report the mic as live and
+// upload a recording whose audio carries the mic signal. With
+// CAP_E2E_SYSTEM_DEVICES the camera and mic are the OS devices; set
+// CAP_E2E_DEVICE_LOOPS to hammer it harder.
+test.describe("camera and microphone start", () => {
+	const loops = Number(process.env.CAP_E2E_DEVICE_LOOPS ?? 3);
+
+	// Display capture of a virtual X screen fails, so with OS devices the
+	// screen half of the matrix records a tab instead.
+	const screenMode = useSystemDevices ? "tab" : "fullscreen";
+
+	for (const mode of [screenMode, "camera"] as const) {
+		test(`starts the webcam and microphone on every ${mode} recording`, async () => {
+			test.setTimeout(60_000 + loops * 40_000);
+			test.skip(
+				mode === "tab" && !canLaunchHeaded,
+				"Tab capture needs a headed browser",
+			);
+			const extension = await launchExtensionContext({
+				tabCapture: mode === "tab",
+			});
+			try {
+				for (let index = 0; index < loops; index += 1) {
+					const mockServer = await createMockCapServer();
+					try {
+						// Chrome stops an idle service worker between recordings, so
+						// wake it with an extension page and take a fresh handle.
+						const wakePage = await extension.context.newPage();
+						await wakePage.goto(
+							`chrome-extension://${unpackedExtensionId}/popup.html`,
+						);
+						const worker = await getServiceWorker(extension.context);
+						await wakePage.close();
+						const startedAt = Date.now();
+						const { capturePage, messengerPage } = await startRecording(
+							extension.context,
+							worker,
+							mockServer.origin,
+							{
+								...DEFAULT_RECORDING_OPTIONS,
+								mode,
+								microphone: true,
+								webcam: true,
+								durationMs: 0,
+							},
+						);
+						const recordingAfterMs = Date.now() - startedAt;
+
+						const status = await sendServiceWorkerMessage(messengerPage, {
+							target: "service-worker",
+							type: "get-recording-status",
+						});
+						expect(status).toMatchObject({
+							ok: true,
+							status: { phase: "recording", microphone: "live" },
+						});
+						await expect
+							.poll(() => readCameraPreview(capturePage), { timeout: 10_000 })
+							.toBe("live");
+						const previewAfterMs = Date.now() - startedAt;
+
+						await capturePage.waitForTimeout(3_000);
+						const stopResponse = await sendServiceWorkerMessage(messengerPage, {
+							target: "service-worker",
+							type: "stop-recording",
+						});
+						expect(stopResponse).toMatchObject({ ok: true });
+						await expectSuccessfulUpload(messengerPage, mockServer.state);
+
+						const { durations, audioPeak, video } =
+							await probeUploadedRecording(mockServer.state);
+						if (process.env.CAP_E2E_REPORT_DEVICES) {
+							console.log(
+								JSON.stringify({
+									mode,
+									loop: index,
+									recordingAfterMs,
+									previewAfterMs,
+									durations,
+									audioPeak,
+									video,
+								}),
+							);
+						}
+						expect(durations.video).toBeGreaterThan(2);
+						expect(durations.audio).not.toBeNull();
+						expect(audioPeak).toBeGreaterThan(0.01);
+						expect(video.movingFrames).toBeGreaterThan(video.frames / 4);
+						if (mode === "camera") {
+							// Black video sits at 16 in limited-range luma.
+							expect(video.meanLuma).toBeGreaterThan(20);
+							if (useSystemDevices) {
+								expect(video).toMatchObject({ width: 1280, height: 720 });
+							}
+						}
+
+						await capturePage.close();
+						await messengerPage.close();
+					} finally {
+						await mockServer.close();
+					}
+				}
+			} finally {
+				await extension.cleanup();
+			}
+		});
+	}
+
+	test("keeps the camera preview in the recorded tab when a background tab opens", async () => {
+		test.skip(
+			screenMode === "tab" && !canLaunchHeaded,
+			"Tab capture needs a headed browser",
+		);
+		const extension = await launchExtensionContext({
+			tabCapture: screenMode === "tab",
+		});
+		const mockServer = await createMockCapServer();
+		try {
+			const worker = await getServiceWorker(extension.context);
+			const { capturePage, messengerPage } = await startRecording(
+				extension.context,
+				worker,
+				mockServer.origin,
+				{
+					...DEFAULT_RECORDING_OPTIONS,
+					mode: screenMode,
+					microphone: true,
+					webcam: true,
+					durationMs: 0,
+				},
+			);
+			await expect
+				.poll(() => readCameraPreview(capturePage), { timeout: 10_000 })
+				.toBe("live");
+
+			// Links opened in the background mid-recording load the overlay
+			// while the recording is live.
+			const urls = [0, 1, 2].map(
+				(index) => `${mockServer.origin}/background-tab-${index}`,
+			);
+			await worker.evaluate(async (urls) => {
+				const chromeApi = (
+					globalThis as unknown as {
+						chrome: {
+							tabs: { create(options: object): Promise<unknown> };
+						};
+					}
+				).chrome;
+				for (const url of urls) {
+					await chromeApi.tabs.create({ url, active: false });
+				}
+			}, urls);
+			await expect
+				.poll(
+					() =>
+						extension.context
+							.pages()
+							.filter((page) => urls.includes(page.url())).length,
+				)
+				.toBe(urls.length);
+			// Give every background overlay time to load and connect.
+			await capturePage.waitForTimeout(4_000);
+			expect(await readCameraPreview(capturePage)).toBe("live");
+			for (const page of extension.context.pages()) {
+				if (!urls.includes(page.url())) continue;
+				expect(await readCameraPreview(page)).toBe("no preview frame");
+			}
+
+			const stopResponse = await sendServiceWorkerMessage(messengerPage, {
+				target: "service-worker",
+				type: "stop-recording",
+			});
+			expect(stopResponse).toMatchObject({ ok: true });
+			await expectSuccessfulUpload(messengerPage, mockServer.state);
+		} finally {
+			await extension.cleanup();
+			await mockServer.close();
+		}
+	});
+});
diff --git a/apps/chrome-extension/e2e/webcam-start.spec.ts b/apps/chrome-extension/e2e/webcam-start.spec.ts
index dc1344b00f4..eafae2b2343 100644
--- a/apps/chrome-extension/e2e/webcam-start.spec.ts
+++ b/apps/chrome-extension/e2e/webcam-start.spec.ts
@@ -1,19 +1,10 @@
-import { mkdtemp, rm } from "node:fs/promises";
 import {
 	createServer,
 	type IncomingMessage,
 	type ServerResponse,
 } from "node:http";
-import { tmpdir } from "node:os";
-import path from "node:path";
-import { fileURLToPath } from "node:url";
-import {
-	type BrowserContext,
-	chromium,
-	expect,
-	type Page,
-	test,
-} from "@playwright/test";
+import { type BrowserContext, expect, type Page, test } from "@playwright/test";
+import { launchExtensionBrowser } from "./browser";
 
 type ChromeGlobal = typeof globalThis & {
 	chrome: {
@@ -33,8 +24,6 @@ type ChromeGlobal = typeof globalThis & {
 	};
 };
 
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
-const extensionPath = path.resolve(__dirname, "../dist");
 const SETTINGS_KEY = "cap-extension-settings";
 const AUTH_KEY = "cap-extension-auth";
 const BOOTSTRAP_CACHE_KEY = "cap-extension-bootstrap-cache";
@@ -163,14 +152,11 @@ const createMockCapServer = async () => {
 	};
 };
 
-const launchExtensionContext = async () => {
-	const userDataDir = await mkdtemp(path.join(tmpdir(), "cap-repro-e2e-"));
-	const context = await chromium.launchPersistentContext(userDataDir, {
-		channel: "chromium",
+const launchExtensionContext = () =>
+	launchExtensionBrowser({
+		profilePrefix: "cap-repro-e2e-",
 		headless: true,
 		args: [
-			`--disable-extensions-except=${extensionPath}`,
-			`--load-extension=${extensionPath}`,
 			"--allow-http-screen-capture",
 			"--auto-select-tab-capture-source-by-title=Cap Repro Capture Target",
 			"--auto-select-desktop-capture-source=Cap Repro Capture Target",
@@ -180,12 +166,6 @@ const launchExtensionContext = async () => {
 			"--use-fake-ui-for-media-stream",
 		],
 	});
-	const cleanup = async () => {
-		await context.close();
-		await rm(userDataDir, { recursive: true, force: true });
-	};
-	return { context, cleanup };
-};
 
 const getServiceWorker = async (context: BrowserContext) => {
 	const existing = context

From 4766bc16340a2579192eb61e5afd530ad8744cdc Mon Sep 17 00:00:00 2001
From: Richie McIlroy <33632126+richiemcilroy@users.noreply.github.com>
Date: Thu, 29 Oct 2026 17:53:40 +0000
Subject: [PATCH 21/28] test(chrome-extension): derive the unpacked extension
 id the way Chrome does on Windows

---
 apps/chrome-extension/e2e/browser.ts | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/apps/chrome-extension/e2e/browser.ts b/apps/chrome-extension/e2e/browser.ts
index e6d7659f5fa..5308ac41509 100644
--- a/apps/chrome-extension/e2e/browser.ts
+++ b/apps/chrome-extension/e2e/browser.ts
@@ -9,9 +9,17 @@ const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
 export const extensionPath = path.resolve(__dirname, "../dist");
 
-// Chrome derives an unpacked extension's id from its absolute path.
+// Chrome derives an unpacked extension's id from its absolute path: on
+// Windows from the UTF-16 path with an upper-case drive letter.
 export const unpackedExtensionId = createHash("sha256")
-	.update(extensionPath)
+	.update(
+		process.platform === "win32"
+			? Buffer.from(
+					extensionPath.replace(/^[a-z]:/, (drive) => drive.toUpperCase()),
+					"utf16le",
+				)
+			: extensionPath,
+	)
 	.digest("hex")
 	.slice(0, 32)
 	.replace(/[0-9a-f]/g, (digit) =>

From a21b1aca0a952d51e7aa175661b2496db03dff10 Mon Sep 17 00:00:00 2001
From: Richie McIlroy <33632126+richiemcilroy@users.noreply.github.com>
Date: Thu, 29 Oct 2026 17:55:55 +0000
Subject: [PATCH 22/28] test(chrome-extension): abandon the stale start by
 stopping the worker, as a real abandoned start does

---
 apps/chrome-extension/e2e/overlay-ui.spec.ts | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/apps/chrome-extension/e2e/overlay-ui.spec.ts b/apps/chrome-extension/e2e/overlay-ui.spec.ts
index 1f1a43e05b6..46e4ed94cb7 100644
--- a/apps/chrome-extension/e2e/overlay-ui.spec.ts
+++ b/apps/chrome-extension/e2e/overlay-ui.spec.ts
@@ -605,7 +605,11 @@ test("an abandoned recording start clears without leaving controls behind", asyn
 			.toBe(true);
 
 		const devtools = await extension.context.newCDPSession(targetPage);
+		// A start is abandoned when the worker dies mid-start: session storage
+		// keeps "creating" and the next worker life has to clear it.
 		await writeStaleCreatingState(worker);
+		await devtools.send("ServiceWorker.enable");
+		await devtools.send("ServiceWorker.stopAllWorkers");
 		await targetPage.waitForTimeout(500);
 		expect(
 			await getClosedShadowElementBox(
@@ -624,7 +628,10 @@ test("an abandoned recording start clears without leaving controls behind", asyn
 			type: "get-recording-status",
 		})) as { status?: { phase?: string } };
 		expect(statusResponse.status?.phase).toBe("idle");
-		await expect.poll(() => readSessionRecordingPhase(worker)).toBe("idle");
+		const restartedWorker = await getServiceWorker(extension.context);
+		await expect
+			.poll(() => readSessionRecordingPhase(restartedWorker))
+			.toBe("idle");
 		await expect
 			.poll(() => frameWithUrl(targetPage, "popup.html") === null, {
 				timeout: 10_000,

From 7159c113a673bbe808f121ceed8890749025ad26 Mon Sep 17 00:00:00 2001
From: Richie McIlroy <33632126+richiemcilroy@users.noreply.github.com>
Date: Thu, 29 Oct 2026 18:01:27 +0000
Subject: [PATCH 23/28] test(chrome-extension): skip the OS-device tab loop in
 installed browsers that ignore seeded media grants

---
 apps/chrome-extension/e2e/recording-upload.spec.ts | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/apps/chrome-extension/e2e/recording-upload.spec.ts b/apps/chrome-extension/e2e/recording-upload.spec.ts
index 6f71b0fc046..2fe6ef0b2d3 100644
--- a/apps/chrome-extension/e2e/recording-upload.spec.ts
+++ b/apps/chrome-extension/e2e/recording-upload.spec.ts
@@ -1378,6 +1378,12 @@ test.describe("camera and microphone start", () => {
 				mode === "tab" && !canLaunchHeaded,
 				"Tab capture needs a headed browser",
 			);
+			// Tab capture cannot use the fake permission UI, and installed
+			// browsers ignore the media grant seeded into a fresh profile.
+			test.skip(
+				mode === "tab" && Boolean(process.env.CAP_E2E_BROWSER),
+				"Installed browsers need the permission page to grant the mic",
+			);
 			const extension = await launchExtensionContext({
 				tabCapture: mode === "tab",
 			});

From ed45b2e8c36429cd85ebe7a7f0f547c3e25066d5 Mon Sep 17 00:00:00 2001
From: Richie McIlroy <33632126+richiemcilroy@users.noreply.github.com>
Date: Thu, 29 Oct 2026 18:13:56 +0000
Subject: [PATCH 24/28] test(chrome-extension): run the background tab check in
 Camera mode on OS devices

---
 apps/chrome-extension/e2e/recording-upload.spec.ts | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/apps/chrome-extension/e2e/recording-upload.spec.ts b/apps/chrome-extension/e2e/recording-upload.spec.ts
index 2fe6ef0b2d3..bec8c7156eb 100644
--- a/apps/chrome-extension/e2e/recording-upload.spec.ts
+++ b/apps/chrome-extension/e2e/recording-upload.spec.ts
@@ -1475,13 +1475,9 @@ test.describe("camera and microphone start", () => {
 	}
 
 	test("keeps the camera preview in the recorded tab when a background tab opens", async () => {
-		test.skip(
-			screenMode === "tab" && !canLaunchHeaded,
-			"Tab capture needs a headed browser",
-		);
-		const extension = await launchExtensionContext({
-			tabCapture: screenMode === "tab",
-		});
+		// Camera mode keeps the fake permission UI, which tab capture cannot use.
+		const mode = useSystemDevices ? "camera" : "fullscreen";
+		const extension = await launchExtensionContext();
 		const mockServer = await createMockCapServer();
 		try {
 			const worker = await getServiceWorker(extension.context);
@@ -1491,7 +1487,7 @@ test.describe("camera and microphone start", () => {
 				mockServer.origin,
 				{
 					...DEFAULT_RECORDING_OPTIONS,
-					mode: screenMode,
+					mode,
 					microphone: true,
 					webcam: true,
 					durationMs: 0,

From 9d7e991b45b64c19e70a7fca1c49f7b64190d583 Mon Sep 17 00:00:00 2001
From: Richie McIlroy <33632126+richiemcilroy@users.noreply.github.com>
Date: Thu, 29 Oct 2026 18:59:17 +0000
Subject: [PATCH 25/28] fix(chrome-extension): register overlay frame tokens
 each time a frame mounts

---
 apps/chrome-extension/src/content/overlay.tsx | 45 ++++++++++++-------
 apps/chrome-extension/src/shared/storage.ts   |  2 +-
 2 files changed, 29 insertions(+), 18 deletions(-)

diff --git a/apps/chrome-extension/src/content/overlay.tsx b/apps/chrome-extension/src/content/overlay.tsx
index a3a0b3b1651..d3d09a6c7fb 100644
--- a/apps/chrome-extension/src/content/overlay.tsx
+++ b/apps/chrome-extension/src/content/overlay.tsx
@@ -91,10 +91,12 @@ const FRAME_PERSIST_INTERVAL_MS = 5000;
 // so the service worker only honours requests from frames whose URL-hash
 // token was registered by this content script. Registration must complete
 // before an iframe is rendered, otherwise its first camera connect races the
-// registry write.
+// registry write. The registry keeps only the most recently registered
+// tokens, so frames register again each time they mount instead of trusting
+// an old registration that other tabs may have pushed out.
 let overlayTokensRegistration: Promise<boolean> | null = null;
 
-const ensureOverlayTokensRegistered = () => {
+const registerOverlayTokens = () => {
 	overlayTokensRegistration ??= Promise.all(
 		[PREVIEW_TOKEN, PANEL_TOKEN].map((token) =>
 			sendServiceWorkerMessage({
@@ -104,16 +106,10 @@ const ensureOverlayTokensRegistered = () => {
 			}),
 		),
 	)
-		.then((responses) => {
-			const registered = responses.every((response) => response.ok);
-			if (!registered) {
-				overlayTokensRegistration = null;
-			}
-			return registered;
-		})
-		.catch(() => {
+		.then((responses) => responses.every((response) => response.ok))
+		.catch(() => false)
+		.finally(() => {
 			overlayTokensRegistration = null;
-			return false;
 		});
 	return overlayTokensRegistration;
 };
@@ -377,17 +373,22 @@ function RecorderPanelOverlay({
 		() => window.innerHeight,
 	);
 	const [tokenReady, setTokenReady] = useState(false);
+	const shown = open && pageVisible;
 
+	// Hidden tabs never mount the panel, so only register when it is shown.
 	useEffect(() => {
-		if (!open || tokenReady) return;
+		if (!shown) {
+			setTokenReady(false);
+			return;
+		}
 		let disposed = false;
-		void ensureOverlayTokensRegistered().then((registered) => {
+		void registerOverlayTokens().then((registered) => {
 			if (!disposed && registered) setTokenReady(true);
 		});
 		return () => {
 			disposed = true;
 		};
-	}, [open, tokenReady]);
+	}, [shown]);
 
 	useEffect(() => {
 		const handleVisibility = () =>
@@ -666,15 +667,25 @@ function OverlayApp() {
 	// worker knows this page's tokens; an unregistered frame is refused camera
 	// access.
 	useEffect(() => {
-		if (!previewEnabled || previewTokenReady) return;
+		if (!previewEnabled) {
+			setPreviewTokenReady(false);
+			return;
+		}
 		let disposed = false;
-		void ensureOverlayTokensRegistered().then((registered) => {
+		void registerOverlayTokens().then((registered) => {
 			if (!disposed && registered) setPreviewTokenReady(true);
 		});
+		// A live preview keeps using its token, so refresh it whenever the tab
+		// comes back into view.
+		const refresh = () => {
+			if (document.visibilityState === "visible") void registerOverlayTokens();
+		};
+		document.addEventListener("visibilitychange", refresh);
 		return () => {
 			disposed = true;
+			document.removeEventListener("visibilitychange", refresh);
 		};
-	}, [previewEnabled, previewTokenReady]);
+	}, [previewEnabled]);
 
 	useEffect(() => {
 		let disposed = false;
diff --git a/apps/chrome-extension/src/shared/storage.ts b/apps/chrome-extension/src/shared/storage.ts
index 124636644cf..00c05312a84 100644
--- a/apps/chrome-extension/src/shared/storage.ts
+++ b/apps/chrome-extension/src/shared/storage.ts
@@ -427,7 +427,7 @@ export const clearAuthError = () => removeSession(AUTH_ERROR_KEY);
 // Tokens registered by content scripts for the extension iframes they embed.
 // chrome.storage.session survives service worker restarts but clears with the
 // browser session, matching the lifetime of the iframes themselves.
-const MAX_OVERLAY_TOKENS = 64;
+const MAX_OVERLAY_TOKENS = 256;
 
 export const loadOverlayTokens = async (): Promise<Record<string, number>> => {
 	const result = await getSession([OVERLAY_TOKENS_KEY]);

From 227135c2bc6bf763594b66e3176c6f5e96d8aab5 Mon Sep 17 00:00:00 2001
From: Richie McIlroy <33632126+richiemcilroy@users.noreply.github.com>
Date: Thu, 29 Oct 2026 18:59:17 +0000
Subject: [PATCH 26/28] fix(chrome-extension): show the real mic state when a
 dock mute is not confirmed

---
 apps/chrome-extension/src/content/recording-bar.tsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/apps/chrome-extension/src/content/recording-bar.tsx b/apps/chrome-extension/src/content/recording-bar.tsx
index 88018afe73a..2af572bc792 100644
--- a/apps/chrome-extension/src/content/recording-bar.tsx
+++ b/apps/chrome-extension/src/content/recording-bar.tsx
@@ -550,16 +550,22 @@ export function RecordingBarOverlay({
 		setStatus((current) =>
 			current ? { ...current, microphone: muted ? "muted" : "live" } : current,
 		);
+		// The dock flips right away; if the recorder did not confirm, show what
+		// it is actually doing instead of a mute that never happened.
 		sendServiceWorkerMessage({
 			target: "service-worker",
 			type: "toggle-microphone-mute",
 			muted,
 		})
 			.then((response) => {
-				if (response.ok) applyResponse(response.status, response.plan);
+				if (response.ok && response.status) {
+					applyResponse(response.status, response.plan);
+				} else {
+					refresh();
+				}
 			})
-			.catch(() => undefined);
-	}, [applyResponse, status?.microphone]);
+			.catch(refresh);
+	}, [applyResponse, refresh, status?.microphone]);
 
 	const startRecording = useCallback(() => {
 		setBusy(true);

From 2e4086cc0b3f3069c58f62a6abbfeb8b7d65cebd Mon Sep 17 00:00:00 2001
From: Richie McIlroy <33632126+richiemcilroy@users.noreply.github.com>
Date: Thu, 29 Oct 2026 18:59:17 +0000
Subject: [PATCH 27/28] test(chrome-extension): check the OS camera size only
 when the rig declares it

---
 apps/chrome-extension/e2e/recording-upload.spec.ts | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/apps/chrome-extension/e2e/recording-upload.spec.ts b/apps/chrome-extension/e2e/recording-upload.spec.ts
index bec8c7156eb..becf9c65c79 100644
--- a/apps/chrome-extension/e2e/recording-upload.spec.ts
+++ b/apps/chrome-extension/e2e/recording-upload.spec.ts
@@ -1457,8 +1457,13 @@ test.describe("camera and microphone start", () => {
 						if (mode === "camera") {
 							// Black video sits at 16 in limited-range luma.
 							expect(video.meanLuma).toBeGreaterThan(20);
-							if (useSystemDevices) {
-								expect(video).toMatchObject({ width: 1280, height: 720 });
+							// Camera mode records the camera's own frames. A rig that knows
+							// its camera's size (CAP_E2E_CAMERA_SIZE=1280x720) checks it.
+							const [width, height] = (process.env.CAP_E2E_CAMERA_SIZE ?? "")
+								.split("x")
+								.map(Number);
+							if (width && height) {
+								expect(video).toMatchObject({ width, height });
 							}
 						}
 

From 7dc45d8408de675d325788f779f926f788ffb86f Mon Sep 17 00:00:00 2001
From: Richie McIlroy <33632126+richiemcilroy@users.noreply.github.com>
Date: Thu, 29 Oct 2026 18:59:17 +0000
Subject: [PATCH 28/28] test(chrome-extension): reopen the panel after its
 token is pushed out of the registry

---
 apps/chrome-extension/e2e/overlay-ui.spec.ts | 61 ++++++++++++++++++++
 1 file changed, 61 insertions(+)

diff --git a/apps/chrome-extension/e2e/overlay-ui.spec.ts b/apps/chrome-extension/e2e/overlay-ui.spec.ts
index 46e4ed94cb7..24dd119ff78 100644
--- a/apps/chrome-extension/e2e/overlay-ui.spec.ts
+++ b/apps/chrome-extension/e2e/overlay-ui.spec.ts
@@ -1312,6 +1312,67 @@ test("choosing Camera mode picks a camera so Start stays available", async () =>
 	}
 });
 
+test("the recorder panel still loads after other tabs push its token out of the registry", async () => {
+	const mockServer = await createMockCapServer();
+	const extension = await launchExtensionContext();
+
+	try {
+		const worker = await getServiceWorker(extension.context);
+		await configureExtension(worker, mockServer.origin, {
+			webcamEnabled: false,
+		});
+		const messengerPage = await extension.context.newPage();
+		await messengerPage.goto(
+			`chrome-extension://${new URL(worker.url()).host}/popup.html`,
+		);
+		const targetPage = await extension.context.newPage();
+		await targetPage.goto(`${mockServer.origin}/capture.html`);
+		await targetPage.bringToFront();
+		const togglePanel = () =>
+			sendServiceWorkerMessage(messengerPage, {
+				target: "service-worker",
+				type: "open-recorder-panel",
+			});
+		const startButton = () =>
+			frameWithUrl(targetPage, "popup.html")
+				?.getByRole("button", { name: "Start recording" })
+				.isVisible()
+				.catch(() => false) ?? false;
+
+		await togglePanel();
+		await expect.poll(startButton, { timeout: 15_000 }).toBe(true);
+		await togglePanel();
+		await expect
+			.poll(() => frameWithUrl(targetPage, "popup.html") === null)
+			.toBe(true);
+
+		// Hundreds of newer registrations, as from many tabs loading the
+		// overlay, evict this page's tokens.
+		await worker.evaluate(
+			() =>
+				new Promise<void>((resolve) => {
+					const now = Date.now();
+					const tokens = Object.fromEntries(
+						Array.from({ length: 300 }, (_, index) => [
+							`other-tab-${index}`,
+							now - 300 + index,
+						]),
+					);
+					(globalThis as ChromeGlobal).chrome.storage.session.set(
+						{ "cap-extension-overlay-tokens": tokens },
+						resolve,
+					);
+				}),
+		);
+
+		await togglePanel();
+		await expect.poll(startButton, { timeout: 15_000 }).toBe(true);
+	} finally {
+		await extension.cleanup();
+		await mockServer.close();
+	}
+});
+
 test("the recorder panel and camera preview load on a page with a strict CSP", async () => {
 	const mockServer = await createMockCapServer();
 	const extension = await launchExtensionContext();