diff --git a/apps/desktop/src/main/upng.d.ts b/apps/desktop/src/main/upng.d.ts
index aa940e3..352c7c5 100644
--- a/apps/desktop/src/main/upng.d.ts
+++ b/apps/desktop/src/main/upng.d.ts
@@ -1,7 +1,7 @@
 // upng-js has no published types. Declare the slim surface the
 // screenshot-compress module uses on the Electron main side: decode a
 // PNG buffer, project to RGBA, re-encode with `cnum: 256` to get
-// Loom-class palette PNG output.
+// compact indexed-palette PNG output.
 
 declare module "upng-js" {
   type EncodeBuffer = ArrayBuffer | Uint8Array;
diff --git a/apps/extension/PLAN.md b/apps/extension/PLAN.md
index 9b20c36..15dcffa 100644
--- a/apps/extension/PLAN.md
+++ b/apps/extension/PLAN.md
@@ -1,9 +1,9 @@
 # CaptureFlow Browser Extension — Implementation Plan
 
-> Status: **Phases 0–1 built (Phase 1 pending manual verification); Phase 2+ planned.**
+> Status: **Phases 0–3 + screenshot mode built (in-page UI); pending manual end-to-end verification.**
 > Decisions below are locked unless revised in a follow-up.
 > Built with [WXT](https://wxt.dev) as a Manifest V3 extension under `apps/extension`.
-> A Loom-style screen recorder that uploads through the **existing** `/api/r/*` (recordings /
+> An instant-share screen recorder that uploads through the **existing** `/api/r/*` (recordings /
 > `recording` domain) protocol — it is recording **client #3**, alongside the web dashboard and the
 > Electron desktop app. No new backend domain.
 
@@ -69,6 +69,13 @@ is kept in reserve for a later one-click "record this tab" express mode.
 
 ### Decision 2 — Auth: how the extension gets a credential for `/api/r/*`
 
+**SUPERSEDED (as built):** tab sign-in via `externally_connectable`. A signed-out
+toolbar click opens `${WEB_BASE}/auth/callback?ext=<runtime.id>`; the callback page posts the
+device token back with `chrome.runtime.sendMessage` and the SW verifies the sender
+(`isTrustedAuthSender`: exact origin + `/auth/callback` path). Logout on the web propagates the
+same way. `launchWebAuthFlow`, the `identity` permission, and the `chromiumapp.org` return are
+gone — the original design below is kept for the decision record.
+
 **`chrome.identity.launchWebAuthFlow`**, device-token (Bearer) model, mapped 1:1 onto the
 desktop flow:
 
@@ -328,8 +335,8 @@ Quota attribution already targets the workspace owner; `isDevDevice` already exe
   — the architecture is validated (this is what ruled out `chrome.desktopCapture`, see Decision 1).
   Ship gate met: loads unpacked, popup opens, recording lands a byte count, `typecheck/build/format` green.
 - **Phase 1 — Auth + screen-only MVP (BUILT, pending manual verification).**
-  `launchWebAuthFlow` + token/device-id storage shipped; Backend Changes 1, 2 & 3 landed as
-  separate commits. The offscreen doc records the screen and streams `init → part×N → finalize`,
+  Tab sign-in via `externally_connectable` (see Decision 2) + token/device-id storage shipped;
+  Backend Changes 1, 2 & 3 landed as separate commits. The offscreen doc records the screen and streams `init → part×N → finalize`,
   and the popup shows the returned `{url}` with a copy button. Stops on the popup Stop button,
   the browser's native "Stop sharing" control, or a 30-min client cap.
   _Auth is merged into Phase 1 because `init/route.ts:75` requires a bearer token
@@ -339,21 +346,42 @@ Quota attribution already targets the workspace owner; `isDevDevice` already exe
   `device-id.test.ts` pins persistence, `return-target.test.ts` pins the callback allow-list.
   **Remaining: manual end-to-end check** (load unpacked → sign in → record → open the link) —
   the auth window + native picker can't be automated.
-- **Phase 2 — Camera + mic (dual stream) (BUILT except live preview).** Dual-stream upload client
+- **Phase 2 — Camera + mic (dual stream) (BUILT, incl. live preview).** Dual-stream upload client
   (screen required + best-effort webcam), offscreen webcam recorder (camera + mic, WebM), `hasWebcam`
   init, `webcam-part → webcam-finalize`, poster frame, camera/mic pickers + a permissions.html grant
-  page (getUserMedia only prompts from a tab). Mic rides the webcam stream (Decision 4), so it's
-  coupled to the camera. **Remaining:** the live cam-bubble preview (a content-script `<video>`) is
-  deferred to land with Phase 3's content-script work; **screen + mic without a camera** isn't
-  recorded yet (route mic to the screen track later). Ship gate (dual-track recording, `webcamState ===
-ready`) is met pending the same manual end-to-end check as Phase 1.
-- **Phase 3 — Control-bar UX & effects.** Shadow-DOM control bar (timer/stop/pause/restart/delete/
-  cam toggle), re-injection on navigation restoring state from storage, tab-audio loopback via
-  `AudioContext`, blur/effects, optional one-click `tabCapture` mode. Ship gate: recording survives
-  a full page navigation with a continuous timer.
-- **Later — Screenshot mode.** The popup's screenshot toggle captures a still and posts to
-  the **screenshot** domain (`/api/s/upload`, `apps/web/lib/screenshot/*`) — a single-shot PUT with its own
-  CORS (already allows `Authorization`). Kept forked from `recording` (no shared `lib/media/`).
+  page (getUserMedia only prompts from a tab). The live cam bubble is an extension-origin iframe
+  (`bubble.html`) injected via `chrome.scripting` (activeTab); it doubles as the grant surface and is
+  released before recording (one camera can't be opened twice). Opening the popup without a
+  camera+mic grant injects an invisible `bubble.html?grant=1` frame that asks for **both in one
+  native prompt**; on Allow both devices flip on and the bubble appears
+  (`permissions.html?video=1&audio=1` tab on restricted pages). **Screen + mic without a camera**
+  records via the engine's AAC mic track muxed into the screen fMP4.
+- **Recorder surface (BUILT).** There is no anchored action popup (a WXT
+  `build:manifestGenerated` hook strips `default_popup`): the toolbar click injects
+  `popup.html?overlay=1` as an extension iframe floating top-right over a blurred/dimmed backdrop.
+  The iframe is sized exactly to the panel — the app reports its content height through the SW
+  (`setOverlayHeight` → `chrome.scripting`; a 600ms page-side fallback shows 440px if no report
+  lands) and the page-side script carries the rounding/shadow — because iframe transparency turns
+  into an opaque white canvas when the host page's color-scheme differs. Backdrop click / Escape close it,
+  and it dismisses itself when the native picker opens. Restricted pages fall back to a standalone
+  popup window (`popup.html?window=1`). Screenshot capture hides the overlay for a frame so the
+  blur never bakes into the image.
+- **Phase 3 — Control-bar UX (BUILT except effects).** Declared content script (`http/https`) renders
+  a Shadow-DOM control bar — stop, countdown timer, pause/resume, restart, delete, draggable — from
+  `session:` recording status, so it re-mounts after navigation with a continuous timer. Pause is
+  gapless: the engine drops frames and shifts later timestamps (webcam pauses via
+  `MediaRecorder.pause()`). Remaining from the original scope: tab-audio loopback, blur/effects
+  (popup stubs), optional one-click `tabCapture` mode.
+- **Screenshot mode (BUILT).** The popup's screenshot tab captures the visible tab
+  (`chrome.tabs.captureVisibleTab`, activeTab) and posts the PNG to the **screenshot** domain
+  (`/api/s/upload`, `apps/web/lib/screenshot/*`) with width/height/title headers. Kept forked from
+  `recording` (no shared `lib/media/`).
+- **Hardening (BUILT).** `POST /api/r/abort` on failure/delete/restart + an SW startup sweep that
+  aborts a crashed upload (`local:activeUpload` marker with no offscreen doc); finalize falls back
+  to the `/api/r/state` probe when the response is lost; part pumps wait out offline windows
+  (mid-flight failures stay fatal); 429/413/401 map to friendly copy and a 401 clears the session;
+  `GET /api/r/auth/check` probes the token on popup open; a Vitest wire-drift guard
+  (`tests/wire-types.test.ts`) pins the forked types against `apps/web/lib/recording/types.ts`.
 
 ---
 
@@ -388,7 +416,7 @@ ready`) is met pending the same manual end-to-end check as Phase 1.
 - `format.ts` — `mm:ss` edge cases.
 - Web side: a CORS test asserting `Authorization` in allow-headers (Change 1); a `/auth/callback`
   return allow-list test (Change 2).
-- **Wire-compat guard:** a standalone CI script that reads `apps/extension/lib/api/types.ts` and
+- **Wire-compat guard:** `tests/wire-types.test.ts` reads `apps/extension/lib/api/types.ts` and
   `apps/web/lib/recording/types.ts` textually and flags drift — **not** a cross-app type import.
 
 **Not unit-tested (integration only):** `desktopCapture`/`getUserMedia`/`MediaRecorder`, offscreen
diff --git a/apps/extension/entrypoints/background.ts b/apps/extension/entrypoints/background.ts
index 9ede5f2..7f8318d 100644
--- a/apps/extension/entrypoints/background.ts
+++ b/apps/extension/entrypoints/background.ts
@@ -1,28 +1,37 @@
 import { onMessage, sendMessage, type StartResult } from "@/lib/messaging";
 import {
+  getActiveUpload,
   getCapturePrefs,
   saveRecordingResult,
+  setActiveUpload,
   setCameraBlocked,
   setCapturePrefs,
   setRecordingStatus,
 } from "@/lib/storage";
+import { createRecordingTransport } from "@/lib/api/client";
 import {
   isTrustedAuthSender,
   isTrustedWebOrigin,
   openSignInTab,
   parseExternalMessage,
 } from "@/lib/auth/handoff";
-import {
-  getAuthSession,
-  setAuthSession,
-  watchAuthSession,
-} from "@/lib/auth/session";
+import { getAuthSession, setAuthSession } from "@/lib/auth/session";
 import { getDeviceId } from "@/lib/auth/device-id";
 import {
   BUBBLE_FRAME_ID,
+  GRANT_FRAME_ID,
   mountCameraBubble,
+  mountGrantFrame,
   unmountCameraBubble,
 } from "@/lib/overlay/camera-bubble";
+import {
+  RECORDER_BACKDROP_ID,
+  RECORDER_FRAME_ID,
+  removeRecorderOverlay,
+  setRecorderOverlayHeight,
+  setRecorderOverlayVisible,
+  toggleRecorderOverlay,
+} from "@/lib/overlay/recorder-overlay";
 
 const OFFSCREEN_URL = "offscreen.html";
 
@@ -87,6 +96,40 @@ async function releaseCameraBubble(): Promise<void> {
   bubbleTabId = undefined;
 }
 
+// Tab hosting the invisible camera+mic grant frame (one combined prompt).
+let grantTabId: number | undefined;
+
+async function requestMediaGrant(): Promise<void> {
+  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
+  if (tab?.id === undefined) return;
+  if (isInjectable(tab.url)) {
+    await chrome.scripting.executeScript({
+      target: { tabId: tab.id },
+      func: mountGrantFrame,
+      args: [chrome.runtime.getURL("bubble.html?grant=1"), GRANT_FRAME_ID],
+    });
+    grantTabId = tab.id;
+  } else {
+    await chrome.tabs.create({
+      url: chrome.runtime.getURL("permissions.html?video=1&audio=1"),
+    });
+  }
+}
+
+async function removeGrantFrame(): Promise<void> {
+  if (grantTabId === undefined) return;
+  try {
+    await chrome.scripting.executeScript({
+      target: { tabId: grantTabId },
+      func: unmountCameraBubble,
+      args: [GRANT_FRAME_ID],
+    });
+  } catch {
+    /* tab closed or no longer injectable */
+  }
+  grantTabId = undefined;
+}
+
 // One long-lived offscreen document runs getDisplayMedia + MediaRecorder;
 // creating a second silently kills the first, so always guard on hasDocument().
 async function ensureOffscreenDocument(): Promise<void> {
@@ -104,18 +147,86 @@ function errorMessage(error: unknown): string {
   return error instanceof Error ? error.message : String(error);
 }
 
-// Signed in → the icon opens the recorder popup; signed out → it has no popup so
-// the click fires onClicked, which opens the web sign-in tab (Loom-style).
-async function syncActionPopup(): Promise<void> {
+// Tab hosting the in-page recorder overlay.
+let overlayTabId: number | undefined;
+
+/*
+ * The recorder opens as an extension iframe floating over a blurred page,
+ * injected on toolbar click (there is no anchored action popup).
+ * Restricted pages can't host it, so they get a standalone popup window.
+ */
+async function toggleOverlayOnActiveTab(): Promise<void> {
+  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
+  if (tab?.id === undefined) return;
+  if (!isInjectable(tab.url)) {
+    await chrome.windows.create({
+      url: chrome.runtime.getURL("popup.html?window=1"),
+      type: "popup",
+      width: 372,
+      height: 660,
+    });
+    return;
+  }
+  await chrome.scripting.executeScript({
+    target: { tabId: tab.id },
+    func: toggleRecorderOverlay,
+    args: [
+      chrome.runtime.getURL("popup.html?overlay=1"),
+      RECORDER_FRAME_ID,
+      RECORDER_BACKDROP_ID,
+    ],
+  });
+  overlayTabId = tab.id;
+}
+
+async function closeRecorderOverlay(tabId?: number): Promise<void> {
+  const target = tabId ?? overlayTabId;
+  if (target === undefined) return;
+  try {
+    await chrome.scripting.executeScript({
+      target: { tabId: target },
+      func: removeRecorderOverlay,
+      args: [RECORDER_FRAME_ID, RECORDER_BACKDROP_ID],
+    });
+  } catch {
+    /* tab closed or no longer injectable */
+  }
+  if (target === overlayTabId) overlayTabId = undefined;
+}
+
+async function onActionClicked(): Promise<void> {
   const session = await getAuthSession();
-  await chrome.action.setPopup({ popup: session ? "popup.html" : "" });
+  if (!session) {
+    await openSignInTab();
+    return;
+  }
+  await toggleOverlayOnActiveTab();
+}
+
+/*
+ * An active-upload marker with no offscreen document means the browser (or the
+ * offscreen doc) died mid-recording: release the server-side multipart so it
+ * doesn't sit against the user's quota. /api/r/abort authorizes by device id.
+ */
+async function sweepStaleUpload(): Promise<void> {
+  const stale = await getActiveUpload();
+  if (!stale) return;
+  if (await chrome.offscreen.hasDocument()) return;
+  await setActiveUpload(null);
+  const transport = createRecordingTransport(stale.deviceId, null);
+  await transport.abort({ slug: stale.slug }).catch(() => {});
+  await setRecordingStatus({ kind: "idle" });
 }
 
 export default defineBackground(() => {
-  void syncActionPopup();
-  watchAuthSession(() => void syncActionPopup());
+  void sweepStaleUpload();
+  // The control bar (an untrusted content-script context) renders from
+  // session-storage recording state; nothing sensitive lives in session:.
+  void chrome.storage.session.setAccessLevel({
+    accessLevel: "TRUSTED_AND_UNTRUSTED_CONTEXTS",
+  });
 
-  chrome.action.onClicked.addListener(() => void openSignInTab());
+  chrome.action.onClicked.addListener(() => void onActionClicked());
 
   /*
    * The web app posts auth (from the callback page) and logout (from any of its
@@ -165,12 +276,61 @@ export default defineBackground(() => {
     setCameraBubble(data.on, data.mic),
   );
 
+  onMessage("ensureMediaGrant", () => requestMediaGrant());
+
+  onMessage("closeRecorderOverlay", ({ sender }) =>
+    closeRecorderOverlay(sender?.tab?.id),
+  );
+
+  onMessage("setOverlayVisible", async ({ data, sender }) => {
+    const target = sender?.tab?.id ?? overlayTabId;
+    if (target === undefined) return;
+    try {
+      await chrome.scripting.executeScript({
+        target: { tabId: target },
+        func: setRecorderOverlayVisible,
+        args: [data.visible, RECORDER_FRAME_ID, RECORDER_BACKDROP_ID],
+      });
+    } catch {
+      /* tab closed or no longer injectable */
+    }
+  });
+
+  onMessage("setOverlayHeight", async ({ data, sender }) => {
+    const target = sender?.tab?.id ?? overlayTabId;
+    if (target === undefined) return;
+    try {
+      await chrome.scripting.executeScript({
+        target: { tabId: target },
+        func: setRecorderOverlayHeight,
+        args: [data.height, RECORDER_FRAME_ID],
+      });
+    } catch {
+      /* tab closed or no longer injectable */
+    }
+  });
+
+  // One combined prompt granted → both devices flip on and the live bubble
+  // appears. A dismissed prompt changes nothing.
+  onMessage("mediaGrantResult", async ({ data }) => {
+    await removeGrantFrame();
+    if (data.granted) {
+      await setCameraBlocked(false);
+      const prefs = await getCapturePrefs();
+      await setCapturePrefs({ ...prefs, camera: true, mic: true });
+      await setCameraBubble(true, true);
+    } else if (data.denied) {
+      await setCameraBlocked(true);
+    }
+  });
+
   // The bubble's getUserMedia result is the source of truth for camera access.
   onMessage("cameraStatus", async ({ data }) => {
     await setCameraBlocked(data.blocked);
     if (data.blocked) {
       const prefs = await getCapturePrefs();
-      if (prefs.camera) await setCapturePrefs({ camera: false, mic: false });
+      // A blocked camera doesn't take the mic down — it records standalone now.
+      if (prefs.camera) await setCapturePrefs({ ...prefs, camera: false });
       await releaseCameraBubble();
     }
   });
@@ -182,6 +342,8 @@ export default defineBackground(() => {
       const deviceId = await getDeviceId();
       const prefs = await getCapturePrefs();
       await setRecordingStatus({ kind: "preparing" });
+      // The panel gets out of the way before the native picker appears.
+      await closeRecorderOverlay();
       if (prefs.camera) await releaseCameraBubble();
       await ensureOffscreenDocument();
       // Fire-and-forget: the offscreen doc reports back via
@@ -191,6 +353,8 @@ export default defineBackground(() => {
         token: session.token,
         camera: prefs.camera,
         mic: prefs.mic,
+        cameraId: prefs.cameraId,
+        micId: prefs.micId,
       }).catch((error) => void reportFailure(errorMessage(error)));
       return { ok: true };
     } catch (error) {
@@ -201,14 +365,26 @@ export default defineBackground(() => {
   });
 
   onMessage("stopRecording", () => sendMessage("stopCapture", undefined));
+  onMessage("pauseRecording", () => sendMessage("pauseCapture", undefined));
+  onMessage("resumeRecording", () => sendMessage("resumeCapture", undefined));
+  onMessage("restartRecording", () => sendMessage("restartCapture", undefined));
+  onMessage("deleteRecording", () => sendMessage("deleteCapture", undefined));
 
   onMessage("recordingStatus", ({ data }) => setRecordingStatus(data));
 
+  onMessage("activeUploadChanged", ({ data }) => setActiveUpload(data));
+
   onMessage("recordingResult", async ({ data }) => {
     await saveRecordingResult(data);
     await setRecordingStatus(
       data.ok ? { kind: "done" } : { kind: "error", detail: data.error },
     );
+    if (data.ok) {
+      // Land the user on the fresh recording page.
+      await chrome.tabs.create({ url: data.url });
+    } else if (data.code === "invalid_token" || data.code === "missing_token") {
+      await setAuthSession(null);
+    }
   });
 });
 
diff --git a/apps/extension/entrypoints/bubble/main.ts b/apps/extension/entrypoints/bubble/main.ts
index b0d7cf8..0db0f81 100644
--- a/apps/extension/entrypoints/bubble/main.ts
+++ b/apps/extension/entrypoints/bubble/main.ts
@@ -1,10 +1,47 @@
 import { sendMessage } from "@/lib/messaging";
 
-// getUserMedia here seeds the grant the offscreen recorder reuses; the mic
-// track is released since only the camera is previewed.
-const audio = new URLSearchParams(location.search).get("audio") === "1";
+/*
+ * Two modes, both seeding the extension-origin grant the offscreen recorder
+ * reuses:
+ *   preview (default) — live circular camera; the mic track is released since
+ *     only the camera is previewed.
+ *   grant=1 — invisible frame that asks for camera+mic in ONE native prompt
+ *     and releases everything; the SW tears the frame down on the result
+ *     message.
+ */
+const params = new URLSearchParams(location.search);
+const audio = params.get("audio") === "1";
+const grantOnly = params.get("grant") === "1";
 
-async function run(): Promise<void> {
+async function isCameraDenied(): Promise<boolean> {
+  try {
+    const perm = await navigator.permissions.query({
+      name: "camera" as PermissionName,
+    });
+    return perm.state === "denied";
+  } catch {
+    return false;
+  }
+}
+
+async function runGrant(): Promise<void> {
+  try {
+    const stream = await navigator.mediaDevices.getUserMedia({
+      video: true,
+      audio: true,
+    });
+    for (const track of stream.getTracks()) track.stop();
+    void sendMessage("mediaGrantResult", { granted: true, denied: false });
+  } catch {
+    // A dismissed prompt is not a Block — only a real denial flags the camera.
+    void sendMessage("mediaGrantResult", {
+      granted: false,
+      denied: await isCameraDenied(),
+    });
+  }
+}
+
+async function runPreview(): Promise<void> {
   const video = document.getElementById("cam");
   if (!(video instanceof HTMLVideoElement)) return;
   try {
@@ -20,4 +57,4 @@ async function run(): Promise<void> {
   }
 }
 
-void run();
+void (grantOnly ? runGrant() : runPreview());
diff --git a/apps/extension/entrypoints/control-bar.content/index.ts b/apps/extension/entrypoints/control-bar.content/index.ts
new file mode 100644
index 0000000..0d40754
--- /dev/null
+++ b/apps/extension/entrypoints/control-bar.content/index.ts
@@ -0,0 +1,198 @@
+import { sendMessage } from "@/lib/messaging";
+import {
+  getRecordingStatus,
+  watchRecordingStatus,
+  type RecordingStatus,
+} from "@/lib/storage";
+import { formatClock } from "@/lib/format";
+import { MAX_DURATION_MS } from "@/lib/capture/limits";
+
+const HOST_ID = "captureflow-control-bar";
+
+const STOP_ICON = `<svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true"><rect x="6" y="6" width="12" height="12" rx="3" fill="#f0554f"/></svg>`;
+const PAUSE_ICON = `<svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true"><rect x="7" y="5" width="3.5" height="14" rx="1.5" fill="currentColor"/><rect x="13.5" y="5" width="3.5" height="14" rx="1.5" fill="currentColor"/></svg>`;
+const RESUME_ICON = `<svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true"><path d="M8 5.7v12.6c0 .8.9 1.3 1.6.9l10-6.3c.6-.4.6-1.4 0-1.8l-10-6.3c-.7-.4-1.6.1-1.6.9z" fill="currentColor"/></svg>`;
+const RESTART_ICON = `<svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true"><path d="M12 5V2.5L7.5 6 12 9.5V7a5.5 5.5 0 1 1-5.5 5.5H4.5A7.5 7.5 0 1 0 12 5z" fill="currentColor"/></svg>`;
+const DELETE_ICON = `<svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true"><path d="M9 3h6l1 2h4v2H4V5h4l1-2zm-2.5 6h11l-.8 11.1a2 2 0 0 1-2 1.9H9.3a2 2 0 0 1-2-1.9L6.5 9zm4 2.5v7h1.5v-7h-1.5zm3 0v7H15v-7h-1.5z" fill="currentColor"/></svg>`;
+
+const BAR_CSS = `
+  .bar {
+    position: fixed;
+    left: 16px;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 2147483647;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 4px;
+    padding: 10px 8px;
+    border-radius: 16px;
+    background: #16181d;
+    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
+    font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
+    color: #e8eaed;
+    cursor: grab;
+    user-select: none;
+  }
+  .bar.dragging { cursor: grabbing; }
+  button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 38px;
+    height: 38px;
+    border: 0;
+    border-radius: 50%;
+    background: transparent;
+    color: #e8eaed;
+    cursor: pointer;
+    padding: 0;
+  }
+  button:hover { background: #2a2e36; }
+  button:disabled { opacity: 0.4; cursor: default; }
+  button:disabled:hover { background: transparent; }
+  .stop { background: #2a2e36; }
+  .stop:hover { background: #363b45; }
+  .timer {
+    font-size: 12px;
+    font-variant-numeric: tabular-nums;
+    color: #e8eaed;
+    padding: 2px 0 4px;
+  }
+  .timer.saving { font-size: 10px; color: #9aa0aa; }
+`;
+
+type Bar = {
+  update(status: RecordingStatus): void;
+  destroy(): void;
+};
+
+function iconButton(icon: string, title: string, onClick: () => void) {
+  const button = document.createElement("button");
+  button.type = "button";
+  button.title = title;
+  button.innerHTML = icon;
+  button.addEventListener("click", (event) => {
+    event.stopPropagation();
+    onClick();
+  });
+  // Keep button presses from starting a bar drag.
+  button.addEventListener("pointerdown", (event) => event.stopPropagation());
+  return button;
+}
+
+function makeDraggable(host: HTMLElement, bar: HTMLElement): void {
+  bar.addEventListener("pointerdown", (event) => {
+    const rect = bar.getBoundingClientRect();
+    const dx = event.clientX - rect.left;
+    const dy = event.clientY - rect.top;
+    bar.classList.add("dragging");
+    const move = (ev: PointerEvent) => {
+      bar.style.left = `${Math.max(0, ev.clientX - dx)}px`;
+      bar.style.top = `${Math.max(0, ev.clientY - dy)}px`;
+      bar.style.transform = "none";
+    };
+    const up = () => {
+      bar.classList.remove("dragging");
+      host.ownerDocument.removeEventListener("pointermove", move);
+      host.ownerDocument.removeEventListener("pointerup", up);
+    };
+    host.ownerDocument.addEventListener("pointermove", move);
+    host.ownerDocument.addEventListener("pointerup", up);
+  });
+}
+
+function createBar(): Bar {
+  const host = document.createElement("div");
+  host.id = HOST_ID;
+  const shadow = host.attachShadow({ mode: "closed" });
+
+  const style = document.createElement("style");
+  style.textContent = BAR_CSS;
+  shadow.appendChild(style);
+
+  const bar = document.createElement("div");
+  bar.className = "bar";
+  shadow.appendChild(bar);
+
+  const stop = iconButton(STOP_ICON, "Stop and save", () =>
+    sendMessage("stopRecording", undefined),
+  );
+  stop.classList.add("stop");
+
+  const timer = document.createElement("div");
+  timer.className = "timer";
+
+  let paused = false;
+  const pause = iconButton(PAUSE_ICON, "Pause", () =>
+    sendMessage(paused ? "resumeRecording" : "pauseRecording", undefined),
+  );
+  const restart = iconButton(RESTART_ICON, "Restart recording", () =>
+    sendMessage("restartRecording", undefined),
+  );
+  const del = iconButton(DELETE_ICON, "Delete recording", () =>
+    sendMessage("deleteRecording", undefined),
+  );
+
+  bar.append(stop, timer, pause, restart, del);
+  makeDraggable(host, bar);
+  document.documentElement.appendChild(host);
+
+  let current: RecordingStatus = { kind: "idle" };
+  const renderTimer = (): void => {
+    if (current.kind === "recording" || current.kind === "paused") {
+      const elapsed =
+        (current.kind === "paused" ? current.pausedAt : Date.now()) -
+        current.startedAt -
+        current.pausedMs;
+      timer.textContent = formatClock(MAX_DURATION_MS - elapsed);
+    }
+  };
+  const tick = setInterval(renderTimer, 500);
+
+  return {
+    update(status: RecordingStatus) {
+      current = status;
+      const saving = status.kind === "uploading";
+      paused = status.kind === "paused";
+      pause.innerHTML = paused ? RESUME_ICON : PAUSE_ICON;
+      pause.title = paused ? "Resume" : "Pause";
+      for (const button of [stop, pause, restart, del]) {
+        button.disabled = saving;
+      }
+      timer.classList.toggle("saving", saving);
+      if (saving) {
+        timer.textContent = "Saving…";
+      } else {
+        renderTimer();
+      }
+    },
+    destroy() {
+      clearInterval(tick);
+      host.remove();
+    },
+  };
+}
+
+export default defineContentScript({
+  matches: ["http://*/*", "https://*/*"],
+  main() {
+    let bar: Bar | null = null;
+    const apply = (status: RecordingStatus): void => {
+      const visible =
+        status.kind === "recording" ||
+        status.kind === "paused" ||
+        status.kind === "uploading";
+      if (!visible) {
+        bar?.destroy();
+        bar = null;
+        return;
+      }
+      bar ??= createBar();
+      bar.update(status);
+    };
+    void getRecordingStatus().then(apply);
+    watchRecordingStatus(apply);
+  },
+});
diff --git a/apps/extension/entrypoints/offscreen/main.ts b/apps/extension/entrypoints/offscreen/main.ts
index de707db..7db5d6d 100644
--- a/apps/extension/entrypoints/offscreen/main.ts
+++ b/apps/extension/entrypoints/offscreen/main.ts
@@ -1,5 +1,12 @@
 import { onMessage, sendMessage } from "@/lib/messaging";
-import { recordAndUpload, stopActiveRecording } from "@/lib/capture/recorder";
+import {
+  deleteActiveRecording,
+  pauseActiveRecording,
+  recordAndUpload,
+  restartActiveRecording,
+  resumeActiveRecording,
+  stopActiveRecording,
+} from "@/lib/capture/recorder";
 
 /*
  * getDisplayMedia runs here in an offscreen doc created with the DISPLAY_MEDIA
@@ -10,7 +17,12 @@ onMessage("beginCapture", ({ data }) =>
   recordAndUpload(data, {
     onStatus: (status) => void sendMessage("recordingStatus", status),
     onResult: (result) => void sendMessage("recordingResult", result),
+    onActiveUpload: (upload) => void sendMessage("activeUploadChanged", upload),
   }),
 );
 
 onMessage("stopCapture", () => stopActiveRecording());
+onMessage("pauseCapture", () => pauseActiveRecording());
+onMessage("resumeCapture", () => resumeActiveRecording());
+onMessage("restartCapture", () => restartActiveRecording());
+onMessage("deleteCapture", () => deleteActiveRecording());
diff --git a/apps/extension/entrypoints/popup/App.tsx b/apps/extension/entrypoints/popup/App.tsx
index 7725c89..0da8fe3 100644
--- a/apps/extension/entrypoints/popup/App.tsx
+++ b/apps/extension/entrypoints/popup/App.tsx
@@ -2,10 +2,15 @@ import { useEffect, useState } from "react";
 import { sendMessage } from "@/lib/messaging";
 import {
   getAuthSession,
+  setAuthSession,
   watchAuthSession,
   type AuthSession,
 } from "@/lib/auth/session";
+import { getDeviceId } from "@/lib/auth/device-id";
+import { checkAuth } from "@/lib/api/client";
+import { WEB_BASE } from "@/lib/config";
 import {
+  getCameraBlocked,
   getRecordingResult,
   getRecordingStatus,
   watchRecordingResult,
@@ -13,16 +18,101 @@ import {
   type RecordingResult,
   type RecordingStatus,
 } from "@/lib/storage";
+import { closeSurface, isOverlaySurface } from "@/lib/surface";
 import { RecorderPanel } from "./RecorderPanel";
+import { ScreenshotPanel } from "./ScreenshotPanel";
+import { FooterActions } from "./FooterActions";
 import { SignInGate } from "./SignInGate";
 
 // "loading" until storage resolves, to avoid flashing the sign-in gate.
 type AuthState = AuthSession | null | "loading";
 
+type Mode = "video" | "screenshot";
+
+const LIVE_KINDS = new Set(["preparing", "recording", "paused", "uploading"]);
+
+async function hasMediaGrant(): Promise<boolean> {
+  try {
+    const [cam, mic] = await Promise.all([
+      navigator.permissions.query({ name: "camera" as PermissionName }),
+      navigator.permissions.query({ name: "microphone" as PermissionName }),
+    ]);
+    return cam.state === "granted" && mic.state === "granted";
+  } catch {
+    return false;
+  }
+}
+
+const HOME_ICON = (
+  <svg viewBox="0 0 24 24" width="17" height="17" aria-hidden>
+    <path
+      d="M4 10.5 12 4l8 6.5V20a1 1 0 0 1-1 1h-5v-6h-4v6H5a1 1 0 0 1-1-1v-9.5z"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.8"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+const VIDEO_ICON = (
+  <svg viewBox="0 0 24 24" width="17" height="17" aria-hidden>
+    <rect
+      x="3"
+      y="6.5"
+      width="12.5"
+      height="11"
+      rx="2.5"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.8"
+    />
+    <path
+      d="m16 10.5 4.2-2.4v7.8L16 13.5"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.8"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+const PHOTO_ICON = (
+  <svg viewBox="0 0 24 24" width="17" height="17" aria-hidden>
+    <path
+      d="M8.5 6.5 10 4.5h4l1.5 2H19a1.5 1.5 0 0 1 1.5 1.5v10A1.5 1.5 0 0 1 19 19.5H5A1.5 1.5 0 0 1 3.5 18V8A1.5 1.5 0 0 1 5 6.5h3.5z"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.8"
+      strokeLinejoin="round"
+    />
+    <circle
+      cx="12"
+      cy="12.7"
+      r="3.2"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.8"
+    />
+  </svg>
+);
+
+const CLOSE_ICON = (
+  <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden>
+    <path
+      d="m6 6 12 12M18 6 6 18"
+      stroke="currentColor"
+      strokeWidth="1.8"
+      strokeLinecap="round"
+    />
+  </svg>
+);
+
 export function App() {
   const [auth, setAuth] = useState<AuthState>("loading");
   const [status, setStatus] = useState<RecordingStatus>({ kind: "idle" });
   const [result, setResult] = useState<RecordingResult | null>(null);
+  const [mode, setMode] = useState<Mode>("video");
 
   useEffect(() => {
     void getAuthSession().then(setAuth);
@@ -38,22 +128,114 @@ export function App() {
     };
   }, []);
 
+  // Probe the token once per popup open; a revoked token flips the UI (and the
+  // action gating) back to signed-out instead of failing at record time.
+  useEffect(() => {
+    void (async () => {
+      const session = await getAuthSession();
+      if (!session) return;
+      const deviceId = await getDeviceId();
+      if ((await checkAuth(deviceId, session.token)) === "invalid") {
+        await setAuthSession(null);
+      }
+    })();
+  }, []);
+
+  /*
+   * Missing camera/mic grant → one combined native prompt on the page (the SW
+   * injects an invisible extension frame), instead of separate prompts behind
+   * each toggle. Skipped while recording and after an explicit Block.
+   */
+  useEffect(() => {
+    void (async () => {
+      const session = await getAuthSession();
+      if (!session) return;
+      const status = await getRecordingStatus();
+      if (LIVE_KINDS.has(status.kind)) return;
+      if (await getCameraBlocked()) return;
+      if (await hasMediaGrant()) return;
+      void sendMessage("ensureMediaGrant", undefined);
+    })();
+  }, []);
+
+  // Overlay-only: Escape closes, like clicking the blurred backdrop.
+  useEffect(() => {
+    if (!isOverlaySurface) return;
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key === "Escape") closeSurface();
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, []);
+
   if (auth === "loading") return null;
   if (!auth) return <SignInGate />;
 
+  const openHome = () => {
+    void chrome.tabs.create({ url: `${WEB_BASE}/recordings` });
+    closeSurface();
+  };
+
   // The popup closes as soon as the OS picker takes focus, so recording state
   // is read back from storage when the popup is reopened.
   const onStart = () => sendMessage("startRecording", undefined);
   const onStop = () => sendMessage("stopRecording", undefined);
-  const onSignOut = () => sendMessage("signOut", undefined);
 
   return (
-    <RecorderPanel
-      status={status}
-      result={result}
-      onStart={onStart}
-      onStop={onStop}
-      onSignOut={onSignOut}
-    />
+    <div className="cf-panel">
+      <header className="cf-topbar">
+        <button
+          type="button"
+          className="cf-iconbtn"
+          title="Open dashboard"
+          onClick={openHome}
+        >
+          {HOME_ICON}
+        </button>
+        <div className="cf-tabs" role="tablist" aria-label="Capture mode">
+          <button
+            type="button"
+            role="tab"
+            aria-selected={mode === "video"}
+            className={mode === "video" ? "cf-tab is-active" : "cf-tab"}
+            title="Record video"
+            onClick={() => setMode("video")}
+          >
+            {VIDEO_ICON}
+          </button>
+          <button
+            type="button"
+            role="tab"
+            aria-selected={mode === "screenshot"}
+            className={mode === "screenshot" ? "cf-tab is-active" : "cf-tab"}
+            title="Capture screenshot"
+            onClick={() => setMode("screenshot")}
+          >
+            {PHOTO_ICON}
+          </button>
+        </div>
+        <button
+          type="button"
+          className="cf-iconbtn"
+          title="Close"
+          onClick={() => closeSurface()}
+        >
+          {CLOSE_ICON}
+        </button>
+      </header>
+
+      {mode === "video" ? (
+        <RecorderPanel
+          status={status}
+          result={result}
+          onStart={onStart}
+          onStop={onStop}
+        />
+      ) : (
+        <ScreenshotPanel />
+      )}
+
+      <FooterActions />
+    </div>
   );
 }
diff --git a/apps/extension/entrypoints/popup/DevicePickers.tsx b/apps/extension/entrypoints/popup/DevicePickers.tsx
index 33a5645..2db7726 100644
--- a/apps/extension/entrypoints/popup/DevicePickers.tsx
+++ b/apps/extension/entrypoints/popup/DevicePickers.tsx
@@ -8,6 +8,117 @@ import {
   watchCapturePrefs,
   type CapturePrefs,
 } from "@/lib/storage";
+import {
+  useMediaDevices,
+  type MediaDeviceOption,
+} from "@/hooks/use-media-devices";
+import { MicMeter } from "./MicMeter";
+
+const CAMERA_ICON = (
+  <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden>
+    <rect
+      x="3"
+      y="6.5"
+      width="12.5"
+      height="11"
+      rx="2.5"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.8"
+    />
+    <path
+      d="m16 10.5 4.2-2.4v7.8L16 13.5"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.8"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+const MIC_ICON = (
+  <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden>
+    <rect
+      x="9"
+      y="3.5"
+      width="6"
+      height="11"
+      rx="3"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.8"
+    />
+    <path
+      d="M5.5 11.5a6.5 6.5 0 0 0 13 0M12 18v3"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.8"
+      strokeLinecap="round"
+    />
+  </svg>
+);
+
+async function isMicGranted(): Promise<boolean> {
+  try {
+    const perm = await navigator.permissions.query({
+      name: "microphone" as PermissionName,
+    });
+    return perm.state === "granted";
+  } catch {
+    return false;
+  }
+}
+
+type DeviceRowProps = {
+  icon: React.ReactNode;
+  fallbackLabel: string;
+  devices: MediaDeviceOption[];
+  selectedId: string | undefined;
+  on: boolean;
+  onToggle: () => void;
+  onSelect: (deviceId: string) => void;
+};
+
+function DeviceRow({
+  icon,
+  fallbackLabel,
+  devices,
+  selectedId,
+  on,
+  onToggle,
+  onSelect,
+}: DeviceRowProps) {
+  const hasLabels = devices.some((d) => d.label && d.deviceId);
+  return (
+    <div className={on ? "cf-row is-on" : "cf-row"}>
+      <span className="cf-row-icon" aria-hidden>
+        {icon}
+      </span>
+      {hasLabels ? (
+        <select
+          className="cf-row-select"
+          value={selectedId ?? devices[0]?.deviceId ?? ""}
+          onChange={(event) => onSelect(event.target.value)}
+        >
+          {devices.map((device) => (
+            <option key={device.deviceId} value={device.deviceId}>
+              {device.label}
+            </option>
+          ))}
+        </select>
+      ) : (
+        <span className="cf-row-label">{fallbackLabel}</span>
+      )}
+      <button
+        type="button"
+        className={on ? "cf-pill is-on" : "cf-pill"}
+        onClick={onToggle}
+      >
+        {on ? "On" : "Off"}
+      </button>
+    </div>
+  );
+}
 
 export function DevicePickers() {
   const [prefs, setPrefs] = useState<CapturePrefs>({
@@ -15,6 +126,7 @@ export function DevicePickers() {
     mic: false,
   });
   const [blocked, setBlocked] = useState(false);
+  const devices = useMediaDevices();
 
   useEffect(() => {
     void getCapturePrefs().then(setPrefs);
@@ -27,27 +139,40 @@ export function DevicePickers() {
     };
   }, []);
 
-  // Mic rides the camera stream (Decision 4), so camera-off clears it. The bubble
-  // both previews and seeds the grant, so reflect the new state on the active tab.
+  /*
+   * Camera preview + grant run through the in-page bubble (getUserMedia can't
+   * prompt from a popup). A camera-less mic needs its own grant, seeded by the
+   * permissions tab.
+   */
   const update = async (partial: Partial<CapturePrefs>) => {
     const next = { ...prefs, ...partial };
-    if (!next.camera) next.mic = false;
     setPrefs(next);
     await setCapturePrefs(next);
-    void sendMessage("setCameraBubble", { on: next.camera, mic: next.mic });
+    if (
+      partial.camera !== undefined ||
+      (next.camera && partial.mic !== undefined)
+    ) {
+      void sendMessage("setCameraBubble", { on: next.camera, mic: next.mic });
+    }
+    if (partial.mic === true && !next.camera && !(await isMicGranted())) {
+      await chrome.tabs.create({
+        url: chrome.runtime.getURL("permissions.html?audio=1"),
+      });
+    }
   };
 
-  if (blocked) {
-    return (
-      <section className="cf-section cf-pickers">
-        <div className="cf-picker">
-          <span className="cf-picker-icon" aria-hidden>
-            ◎
-          </span>
-          <select className="cf-select" value="none" disabled>
-            <option value="none">No camera</option>
-          </select>
-        </div>
+  return (
+    <section className="cf-section cf-pickers">
+      <DeviceRow
+        icon={CAMERA_ICON}
+        fallbackLabel={blocked ? "Camera blocked" : "Camera"}
+        devices={devices.cameras}
+        selectedId={prefs.cameraId}
+        on={prefs.camera && !blocked}
+        onToggle={() => void update({ camera: !prefs.camera })}
+        onSelect={(cameraId) => void update({ cameraId })}
+      />
+      {blocked && (
         <div className="cf-notice">
           <p className="cf-notice-title">Camera blocked</p>
           <p className="cf-hint">
@@ -62,40 +187,18 @@ export function DevicePickers() {
             Try again
           </button>
         </div>
-      </section>
-    );
-  }
-
-  return (
-    <section className="cf-section cf-pickers">
-      <div className="cf-picker">
-        <span className="cf-picker-icon" aria-hidden>
-          ◎
-        </span>
-        <select
-          className="cf-select"
-          value={prefs.camera ? "on" : "none"}
-          onChange={(event) => update({ camera: event.target.value === "on" })}
-        >
-          <option value="none">No camera</option>
-          <option value="on">Camera on</option>
-        </select>
-      </div>
-      <div className="cf-picker">
-        <span className="cf-picker-icon" aria-hidden>
-          ⏺
-        </span>
-        <select
-          className="cf-select"
-          value={prefs.mic ? "on" : "none"}
-          disabled={!prefs.camera}
-          onChange={(event) => update({ mic: event.target.value === "on" })}
-        >
-          <option value="none">No microphone</option>
-          <option value="on">Microphone on</option>
-        </select>
-      </div>
-      {prefs.camera && (
+      )}
+      <DeviceRow
+        icon={MIC_ICON}
+        fallbackLabel="Microphone"
+        devices={devices.mics}
+        selectedId={prefs.micId}
+        on={prefs.mic}
+        onToggle={() => void update({ mic: !prefs.mic })}
+        onSelect={(micId) => void update({ micId })}
+      />
+      <MicMeter enabled={prefs.mic} />
+      {prefs.camera && !blocked && (
         <p className="cf-hint">
           Your camera bubble appears on normal web pages — not on internal
           browser pages like this one.
diff --git a/apps/extension/entrypoints/popup/FooterActions.tsx b/apps/extension/entrypoints/popup/FooterActions.tsx
new file mode 100644
index 0000000..d6e06f5
--- /dev/null
+++ b/apps/extension/entrypoints/popup/FooterActions.tsx
@@ -0,0 +1,94 @@
+import { useState } from "react";
+import { sendMessage } from "@/lib/messaging";
+import { WEB_BASE } from "@/lib/config";
+import { closeSurface } from "@/lib/surface";
+
+const EFFECTS_ICON = (
+  <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden>
+    <path
+      d="M12 3.5a8.5 8.5 0 1 0 0 17c1.2 0 2-.9 2-2 0-.6-.2-1-.6-1.4-.3-.4-.5-.8-.5-1.3 0-1.1.9-2 2-2h2.3c1.8 0 3.3-1.5 3.3-3.3C20.5 6.6 16.7 3.5 12 3.5z"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.6"
+    />
+    <circle cx="8" cy="10" r="1.2" fill="currentColor" />
+    <circle cx="12" cy="7.5" r="1.2" fill="currentColor" />
+    <circle cx="16" cy="10" r="1.2" fill="currentColor" />
+  </svg>
+);
+
+const BLUR_ICON = (
+  <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden>
+    <path
+      d="M12 3.5s6 6.2 6 10.5a6 6 0 0 1-12 0C6 9.7 12 3.5 12 3.5z"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.6"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+const MORE_ICON = (
+  <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden>
+    <circle cx="5.5" cy="12" r="1.6" fill="currentColor" />
+    <circle cx="12" cy="12" r="1.6" fill="currentColor" />
+    <circle cx="18.5" cy="12" r="1.6" fill="currentColor" />
+  </svg>
+);
+
+export function FooterActions() {
+  const [menuOpen, setMenuOpen] = useState(false);
+
+  const openDashboard = () => {
+    void chrome.tabs.create({ url: `${WEB_BASE}/recordings` });
+    closeSurface();
+  };
+  const onSignOut = () => {
+    void sendMessage("signOut", undefined);
+    closeSurface();
+  };
+
+  return (
+    <footer className="cf-tools">
+      <button type="button" className="cf-tool" disabled title="Coming soon">
+        {EFFECTS_ICON}
+        <span>Effects</span>
+      </button>
+      <button type="button" className="cf-tool" disabled title="Coming soon">
+        {BLUR_ICON}
+        <span>Blur</span>
+      </button>
+      <div className="cf-tool-menu-anchor">
+        <button
+          type="button"
+          className="cf-tool"
+          onClick={() => setMenuOpen((open) => !open)}
+        >
+          {MORE_ICON}
+          <span>More</span>
+        </button>
+        {menuOpen && (
+          <div className="cf-menu" role="menu">
+            <button
+              type="button"
+              className="cf-menu-item"
+              role="menuitem"
+              onClick={openDashboard}
+            >
+              Open dashboard
+            </button>
+            <button
+              type="button"
+              className="cf-menu-item"
+              role="menuitem"
+              onClick={onSignOut}
+            >
+              Sign out
+            </button>
+          </div>
+        )}
+      </div>
+    </footer>
+  );
+}
diff --git a/apps/extension/entrypoints/popup/MicMeter.tsx b/apps/extension/entrypoints/popup/MicMeter.tsx
new file mode 100644
index 0000000..169850c
--- /dev/null
+++ b/apps/extension/entrypoints/popup/MicMeter.tsx
@@ -0,0 +1,64 @@
+import { useEffect, useState } from "react";
+
+/*
+ * Live input level under the mic row. Only attaches when the extension origin
+ * already holds a mic grant — getUserMedia can't prompt from a popup, so an
+ * ungranted mic renders nothing rather than a dead meter.
+ */
+export function MicMeter({ enabled }: { enabled: boolean }) {
+  const [level, setLevel] = useState(0);
+
+  useEffect(() => {
+    if (!enabled) return;
+    let cancelled = false;
+    let raf = 0;
+    let stream: MediaStream | null = null;
+    let audioContext: AudioContext | null = null;
+
+    void (async () => {
+      try {
+        const perm = await navigator.permissions.query({
+          name: "microphone" as PermissionName,
+        });
+        if (perm.state !== "granted") return;
+        stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+        if (cancelled) return;
+        audioContext = new AudioContext();
+        const analyser = audioContext.createAnalyser();
+        analyser.fftSize = 256;
+        audioContext.createMediaStreamSource(stream).connect(analyser);
+        const samples = new Uint8Array(analyser.frequencyBinCount);
+        const loop = () => {
+          analyser.getByteTimeDomainData(samples);
+          let peak = 0;
+          for (const sample of samples) {
+            peak = Math.max(peak, Math.abs(sample - 128));
+          }
+          setLevel(Math.min(1, peak / 56));
+          raf = requestAnimationFrame(loop);
+        };
+        loop();
+      } catch {
+        /* no meter — the mic still records */
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+      cancelAnimationFrame(raf);
+      for (const track of stream?.getTracks() ?? []) track.stop();
+      void audioContext?.close().catch(() => {});
+      setLevel(0);
+    };
+  }, [enabled]);
+
+  if (!enabled) return null;
+  return (
+    <div className="cf-meter" aria-hidden>
+      <div
+        className="cf-meter-fill"
+        style={{ width: `${Math.round(level * 100)}%` }}
+      />
+    </div>
+  );
+}
diff --git a/apps/extension/entrypoints/popup/RecorderPanel.tsx b/apps/extension/entrypoints/popup/RecorderPanel.tsx
index b6e4cfe..039c716 100644
--- a/apps/extension/entrypoints/popup/RecorderPanel.tsx
+++ b/apps/extension/entrypoints/popup/RecorderPanel.tsx
@@ -1,5 +1,6 @@
 import { useState } from "react";
 import type { RecordingResult, RecordingStatus } from "@/lib/storage";
+import { MAX_DURATION_MS } from "@/lib/capture/limits";
 import { DevicePickers } from "./DevicePickers";
 
 type RecorderPanelProps = {
@@ -7,9 +8,29 @@ type RecorderPanelProps = {
   result: RecordingResult | null;
   onStart: () => void;
   onStop: () => void;
-  onSignOut: () => void;
 };
 
+const SCREEN_ICON = (
+  <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden>
+    <rect
+      x="3"
+      y="5"
+      width="18"
+      height="12.5"
+      rx="2"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.8"
+    />
+    <path
+      d="M9 20.5h6"
+      stroke="currentColor"
+      strokeWidth="1.8"
+      strokeLinecap="round"
+    />
+  </svg>
+);
+
 const BUSY_LABEL: Partial<Record<RecordingStatus["kind"], string>> = {
   preparing: "Starting…",
   uploading: "Uploading…",
@@ -52,7 +73,13 @@ function StatusLine({
     case "preparing":
       return <p className="cf-status">Choose a source in the picker…</p>;
     case "recording":
-      return <p className="cf-status">Recording… stop when you’re done.</p>;
+    case "paused":
+      return (
+        <p className="cf-status">
+          {status.kind === "paused" ? "Paused" : "Recording"} — control it from
+          the bar on the page.
+        </p>
+      );
     case "uploading":
       return <p className="cf-status">Uploading your recording…</p>;
     case "cancelled":
@@ -65,11 +92,7 @@ function StatusLine({
       );
     default:
       if (result?.ok) return <RecordingLink url={result.url} />;
-      return (
-        <p className="cf-status cf-status--muted">
-          Record your screen and get an instant recording link.
-        </p>
-      );
+      return null;
   }
 }
 
@@ -78,43 +101,25 @@ export function RecorderPanel({
   result,
   onStart,
   onStop,
-  onSignOut,
 }: RecorderPanelProps) {
-  const isRecording = status.kind === "recording";
+  const isLive = status.kind === "recording" || status.kind === "paused";
   const isBusy = status.kind === "preparing" || status.kind === "uploading";
 
   return (
-    <div className="cf-panel">
-      <header className="cf-header">
-        <div className="cf-brand">
-          <span className="cf-logo" aria-hidden />
-          CaptureFlow
-        </div>
-        <div className="cf-mode" role="tablist" aria-label="Capture mode">
-          <button type="button" className="cf-mode-btn is-active" aria-selected>
-            Video
-          </button>
-          <button
-            type="button"
-            className="cf-mode-btn"
-            disabled
-            title="Coming soon"
-          >
-            Screenshot
-          </button>
-        </div>
-      </header>
-
+    <>
       <section className="cf-section">
-        <span className="cf-label">Source</span>
-        <p className="cf-source">
-          Pick a screen, window, or browser tab when recording starts.
-        </p>
+        <div className="cf-row">
+          <span className="cf-row-icon" aria-hidden>
+            {SCREEN_ICON}
+          </span>
+          <span className="cf-row-label">Screen, window, or tab</span>
+          <span className="cf-row-note">Pick at start</span>
+        </div>
       </section>
 
       <DevicePickers />
 
-      {isRecording ? (
+      {isLive ? (
         <button type="button" className="cf-start cf-stop" onClick={onStop}>
           Stop Recording
         </button>
@@ -128,14 +133,11 @@ export function RecorderPanel({
           {BUSY_LABEL[status.kind] ?? "Start Recording"}
         </button>
       )}
+      <p className="cf-limit">
+        {Math.round(MAX_DURATION_MS / 60_000)} min recording limit
+      </p>
 
       <StatusLine status={status} result={result} />
-
-      <footer className="cf-footer">
-        <button type="button" className="cf-signout" onClick={onSignOut}>
-          Sign out
-        </button>
-      </footer>
-    </div>
+    </>
   );
 }
diff --git a/apps/extension/entrypoints/popup/ScreenshotPanel.tsx b/apps/extension/entrypoints/popup/ScreenshotPanel.tsx
new file mode 100644
index 0000000..e491123
--- /dev/null
+++ b/apps/extension/entrypoints/popup/ScreenshotPanel.tsx
@@ -0,0 +1,134 @@
+import { useState } from "react";
+import { getAuthSession, setAuthSession } from "@/lib/auth/session";
+import { getDeviceId } from "@/lib/auth/device-id";
+import { uploadScreenshot } from "@/lib/api/screenshot";
+import { friendlyUploadError, isAuthFailure } from "@/lib/api/errors";
+import { sendMessage } from "@/lib/messaging";
+import { isOverlaySurface } from "@/lib/surface";
+
+type ShotState =
+  | { kind: "idle" }
+  | { kind: "busy" }
+  | { kind: "done"; viewUrl: string }
+  | { kind: "error"; detail: string };
+
+const TAB_ICON = (
+  <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden>
+    <rect
+      x="3"
+      y="4.5"
+      width="18"
+      height="15"
+      rx="2"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.8"
+    />
+    <path d="M3 9h18" stroke="currentColor" strokeWidth="1.8" />
+  </svg>
+);
+
+export function ScreenshotPanel() {
+  const [state, setState] = useState<ShotState>({ kind: "idle" });
+  const [copied, setCopied] = useState(false);
+
+  const capture = async () => {
+    setState({ kind: "busy" });
+    try {
+      const session = await getAuthSession();
+      if (!session) throw new Error("Sign in to capture.");
+      const [tab] = await chrome.tabs.query({
+        active: true,
+        currentWindow: true,
+      });
+      // The overlay (blur + panel) must not end up inside the capture.
+      let dataUrl: string;
+      if (isOverlaySurface) {
+        await sendMessage("setOverlayVisible", { visible: false });
+        await new Promise((resolve) => setTimeout(resolve, 150));
+        try {
+          dataUrl = await chrome.tabs.captureVisibleTab({ format: "png" });
+        } finally {
+          void sendMessage("setOverlayVisible", { visible: true });
+        }
+      } else {
+        dataUrl = await chrome.tabs.captureVisibleTab({ format: "png" });
+      }
+      const png = await (await fetch(dataUrl)).blob();
+      const bitmap = await createImageBitmap(png);
+      const deviceId = await getDeviceId();
+      const res = await uploadScreenshot(deviceId, session.token, {
+        png,
+        width: bitmap.width,
+        height: bitmap.height,
+        title: tab?.title ?? undefined,
+      });
+      bitmap.close();
+      setState({ kind: "done", viewUrl: res.viewUrl });
+      await chrome.tabs.create({ url: res.viewUrl });
+    } catch (err) {
+      if (isAuthFailure(err)) await setAuthSession(null);
+      setState({ kind: "error", detail: friendlyUploadError(err) });
+    }
+  };
+
+  const copy = async (url: string) => {
+    try {
+      await navigator.clipboard.writeText(url);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    } catch {
+      /* clipboard blocked — the link is still tappable */
+    }
+  };
+
+  return (
+    <>
+      <section className="cf-section">
+        <div className="cf-row">
+          <span className="cf-row-icon" aria-hidden>
+            {TAB_ICON}
+          </span>
+          <span className="cf-row-label">Current tab</span>
+        </div>
+      </section>
+
+      <button
+        type="button"
+        className="cf-start"
+        onClick={() => void capture()}
+        disabled={state.kind === "busy"}
+      >
+        {state.kind === "busy" ? "Capturing…" : "Capture Screenshot"}
+      </button>
+
+      {state.kind === "done" && (
+        <div className="cf-result">
+          <p className="cf-status cf-status--ok">
+            Your screenshot link is ready ✓
+          </p>
+          <div className="cf-linkrow">
+            <a
+              className="cf-link"
+              href={state.viewUrl}
+              target="_blank"
+              rel="noreferrer"
+            >
+              {state.viewUrl}
+            </a>
+            <button
+              type="button"
+              className="cf-copy"
+              onClick={() => void copy(state.viewUrl)}
+            >
+              {copied ? "Copied" : "Copy"}
+            </button>
+          </div>
+        </div>
+      )}
+      {state.kind === "error" && (
+        <p className="cf-status cf-status--error">{state.detail}</p>
+      )}
+    </>
+  );
+}
diff --git a/apps/extension/entrypoints/popup/SignInGate.tsx b/apps/extension/entrypoints/popup/SignInGate.tsx
index 148838e..51365dc 100644
--- a/apps/extension/entrypoints/popup/SignInGate.tsx
+++ b/apps/extension/entrypoints/popup/SignInGate.tsx
@@ -12,7 +12,7 @@ export function SignInGate() {
     <div className="cf-panel">
       <header className="cf-header">
         <div className="cf-brand">
-          <span className="cf-logo" aria-hidden />
+          <img className="cf-logo" src="/icon/32.png" alt="" />
           CaptureFlow
         </div>
       </header>
diff --git a/apps/extension/entrypoints/popup/main.tsx b/apps/extension/entrypoints/popup/main.tsx
index 34b8b32..2bc94fe 100644
--- a/apps/extension/entrypoints/popup/main.tsx
+++ b/apps/extension/entrypoints/popup/main.tsx
@@ -1,8 +1,22 @@
 import React from "react";
 import { createRoot } from "react-dom/client";
+import { isOverlaySurface } from "@/lib/surface";
+import { sendMessage } from "@/lib/messaging";
 import { App } from "./App";
 import "./popup.css";
 
+// The SW sizes the overlay iframe to the panel's content height.
+if (isOverlaySurface) {
+  document.body.classList.add("cf-overlay");
+  const reportHeight = () => {
+    const height = document.body.scrollHeight;
+    if (height > 0) {
+      void sendMessage("setOverlayHeight", { height }).catch(() => {});
+    }
+  };
+  new ResizeObserver(reportHeight).observe(document.body);
+}
+
 const container = document.getElementById("root");
 if (container) {
   createRoot(container).render(
diff --git a/apps/extension/entrypoints/popup/popup.css b/apps/extension/entrypoints/popup/popup.css
index 0b3c271..f73714d 100644
--- a/apps/extension/entrypoints/popup/popup.css
+++ b/apps/extension/entrypoints/popup/popup.css
@@ -1,6 +1,7 @@
 :root {
   --cf-bg: #16181d;
-  --cf-surface: #1f2229;
+  --cf-surface: #22252c;
+  --cf-surface-hover: #2a2e36;
   --cf-line: #2c3038;
   --cf-fg: #e8eaed;
   --cf-muted: #9aa0aa;
@@ -16,7 +17,7 @@
 
 body {
   margin: 0;
-  width: 320px;
+  width: 340px;
   font-family:
     ui-sans-serif,
     system-ui,
@@ -30,10 +31,21 @@ body {
 .cf-panel {
   display: flex;
   flex-direction: column;
-  gap: 14px;
-  padding: 16px;
+  gap: 12px;
+  padding: 14px;
 }
 
+/*
+ * Overlay surface: the iframe is sized exactly to the panel and carries the
+ * rounding/shadow page-side, so the document stays opaque (any transparency
+ * turns into a white canvas when the host page's color-scheme differs).
+ */
+body.cf-overlay {
+  width: 348px;
+}
+
+/* ---- header (sign-in gate) ---- */
+
 .cf-header {
   display: flex;
   align-items: center;
@@ -49,96 +61,165 @@ body {
 }
 
 .cf-logo {
-  width: 16px;
-  height: 16px;
+  width: 18px;
+  height: 18px;
   border-radius: 5px;
-  background: var(--cf-accent);
 }
 
-.cf-mode {
-  display: inline-flex;
-  background: var(--cf-surface);
-  border: 1px solid var(--cf-line);
-  border-radius: 8px;
-  padding: 2px;
+/* ---- top bar: home · mode tabs · close ---- */
+
+.cf-topbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
 }
 
-.cf-mode-btn {
+.cf-iconbtn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
   border: 0;
+  border-radius: 10px;
   background: transparent;
   color: var(--cf-muted);
-  font-size: 12px;
-  padding: 4px 10px;
-  border-radius: 6px;
   cursor: pointer;
 }
 
-.cf-mode-btn.is-active {
-  background: var(--cf-accent);
-  color: #fff;
+.cf-iconbtn:hover {
+  background: var(--cf-surface-hover);
+  color: var(--cf-fg);
 }
 
-.cf-mode-btn:disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
+.cf-tabs {
+  display: inline-flex;
+  gap: 2px;
+  background: var(--cf-surface);
+  border-radius: 12px;
+  padding: 3px;
 }
 
-.cf-section {
+.cf-tab {
   display: flex;
-  flex-direction: column;
-  gap: 6px;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 30px;
+  border: 0;
+  border-radius: 9px;
+  background: transparent;
+  color: var(--cf-muted);
+  cursor: pointer;
 }
 
-.cf-label {
-  font-size: 11px;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-  color: var(--cf-muted);
+.cf-tab:hover {
+  color: var(--cf-fg);
 }
 
-.cf-source {
-  margin: 0;
-  font-size: 13px;
+.cf-tab.is-active {
+  background: var(--cf-surface-hover);
   color: var(--cf-fg);
-  background: var(--cf-surface);
-  border: 1px solid var(--cf-line);
-  border-radius: 8px;
-  padding: 10px 12px;
+}
+
+/* ---- sections & rows ---- */
+
+.cf-section {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
 }
 
 .cf-pickers {
   gap: 8px;
 }
 
-.cf-picker {
+.cf-row {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 10px;
   background: var(--cf-surface);
-  border: 1px solid var(--cf-line);
-  border-radius: 8px;
-  padding: 8px 10px;
+  border-radius: 12px;
+  padding: 11px 12px;
 }
 
-.cf-picker-icon {
-  color: var(--cf-muted);
-  font-size: 14px;
-  width: 16px;
-  text-align: center;
+.cf-row.is-on {
+  outline: 1px solid var(--cf-line);
+}
+
+.cf-row-icon {
+  display: flex;
+  color: var(--cf-fg);
 }
 
-.cf-select {
+.cf-row-label {
   flex: 1;
+  font-size: 13px;
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cf-row-select {
+  flex: 1;
+  min-width: 0;
   background: transparent;
   border: 0;
   color: var(--cf-fg);
   font-size: 13px;
+  font-weight: 500;
+}
+
+.cf-row-select:focus {
+  outline: none;
 }
 
-.cf-select:disabled {
+.cf-row-note {
+  font-size: 11px;
   color: var(--cf-muted);
 }
 
+.cf-pill {
+  border: 0;
+  border-radius: 999px;
+  padding: 4px 12px;
+  font-size: 12px;
+  font-weight: 600;
+  background: var(--cf-surface-hover);
+  color: var(--cf-muted);
+  cursor: pointer;
+}
+
+.cf-pill.is-on {
+  background: var(--cf-ok);
+  color: #0b2b1e;
+}
+
+.cf-meter {
+  height: 4px;
+  border-radius: 999px;
+  background: var(--cf-surface);
+  overflow: hidden;
+}
+
+.cf-meter-fill {
+  height: 100%;
+  border-radius: 999px;
+  background: linear-gradient(90deg, var(--cf-accent), #7ea7ff);
+  transition: width 80ms linear;
+}
+
+.cf-source {
+  margin: 0;
+  font-size: 13px;
+  color: var(--cf-fg);
+  background: var(--cf-surface);
+  border-radius: 12px;
+  padding: 11px 12px;
+}
+
 .cf-hint {
   margin: 2px 0 0;
   font-size: 11px;
@@ -152,8 +233,7 @@ body {
   align-items: flex-start;
   gap: 8px;
   background: var(--cf-surface);
-  border: 1px solid var(--cf-line);
-  border-radius: 8px;
+  border-radius: 12px;
   padding: 10px 12px;
 }
 
@@ -166,7 +246,7 @@ body {
 
 .cf-try {
   border: 0;
-  border-radius: 6px;
+  border-radius: 8px;
   background: var(--cf-accent);
   color: #fff;
   font-size: 12px;
@@ -179,14 +259,16 @@ body {
   background: var(--cf-accent-hover);
 }
 
+/* ---- primary action ---- */
+
 .cf-start {
   border: 0;
-  border-radius: 10px;
+  border-radius: 12px;
   background: var(--cf-accent);
   color: #fff;
   font-size: 14px;
   font-weight: 600;
-  padding: 12px;
+  padding: 13px;
   cursor: pointer;
   transition: background 0.15s ease;
 }
@@ -208,6 +290,15 @@ body {
   background: #f37e7e;
 }
 
+.cf-limit {
+  margin: -4px 0 0;
+  text-align: center;
+  font-size: 11px;
+  color: var(--cf-muted);
+}
+
+/* ---- result & status ---- */
+
 .cf-result {
   display: flex;
   flex-direction: column;
@@ -219,8 +310,7 @@ body {
   align-items: center;
   gap: 8px;
   background: var(--cf-surface);
-  border: 1px solid var(--cf-line);
-  border-radius: 8px;
+  border-radius: 10px;
   padding: 8px 10px;
 }
 
@@ -270,22 +360,68 @@ body {
   color: var(--cf-error);
 }
 
-.cf-footer {
+/* ---- footer tools: Effects · Blur · More ---- */
+
+.cf-tools {
   display: flex;
-  justify-content: flex-end;
+  justify-content: space-around;
   border-top: 1px solid var(--cf-line);
   padding-top: 10px;
 }
 
-.cf-signout {
+.cf-tool {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
   border: 0;
+  border-radius: 10px;
   background: transparent;
   color: var(--cf-muted);
-  font-size: 12px;
-  padding: 2px 4px;
+  font-size: 11px;
+  padding: 6px 14px;
   cursor: pointer;
 }
 
-.cf-signout:hover {
+.cf-tool:hover:not(:disabled) {
+  background: var(--cf-surface-hover);
+  color: var(--cf-fg);
+}
+
+.cf-tool:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.cf-tool-menu-anchor {
+  position: relative;
+}
+
+.cf-menu {
+  position: absolute;
+  right: 0;
+  bottom: calc(100% + 6px);
+  display: flex;
+  flex-direction: column;
+  min-width: 150px;
+  background: var(--cf-surface);
+  border: 1px solid var(--cf-line);
+  border-radius: 10px;
+  padding: 4px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+}
+
+.cf-menu-item {
+  border: 0;
+  border-radius: 7px;
+  background: transparent;
   color: var(--cf-fg);
+  font-size: 12px;
+  text-align: left;
+  padding: 8px 10px;
+  cursor: pointer;
+}
+
+.cf-menu-item:hover {
+  background: var(--cf-surface-hover);
 }
diff --git a/apps/extension/hooks/use-media-devices.ts b/apps/extension/hooks/use-media-devices.ts
new file mode 100644
index 0000000..0ea4ea3
--- /dev/null
+++ b/apps/extension/hooks/use-media-devices.ts
@@ -0,0 +1,73 @@
+import { useEffect, useState } from "react";
+
+export type MediaDeviceOption = {
+  deviceId: string;
+  label: string;
+};
+
+export type MediaDevices = {
+  cameras: MediaDeviceOption[];
+  mics: MediaDeviceOption[];
+};
+
+const EMPTY: MediaDevices = { cameras: [], mics: [] };
+
+function toOption(
+  device: MediaDeviceInfo,
+  fallback: string,
+): MediaDeviceOption {
+  return {
+    deviceId: device.deviceId,
+    // Labels are empty until the extension origin holds a camera/mic grant.
+    label: device.label || fallback,
+  };
+}
+
+export function useMediaDevices(): MediaDevices {
+  const [devices, setDevices] = useState<MediaDevices>(EMPTY);
+
+  useEffect(() => {
+    let cancelled = false;
+    const refresh = async (): Promise<void> => {
+      try {
+        const all = await navigator.mediaDevices.enumerateDevices();
+        if (cancelled) return;
+        setDevices({
+          cameras: all
+            .filter((d) => d.kind === "videoinput")
+            .map((d) => toOption(d, "Camera")),
+          mics: all
+            .filter((d) => d.kind === "audioinput")
+            .map((d) => toOption(d, "Microphone")),
+        });
+      } catch {
+        if (!cancelled) setDevices(EMPTY);
+      }
+    };
+    void refresh();
+    navigator.mediaDevices.addEventListener("devicechange", refresh);
+    // Labels appear the moment the combined grant lands, without a re-open.
+    const watched: PermissionStatus[] = [];
+    void (async () => {
+      for (const name of ["camera", "microphone"]) {
+        try {
+          const perm = await navigator.permissions.query({
+            name: name as PermissionName,
+          });
+          if (cancelled) return;
+          perm.addEventListener("change", refresh);
+          watched.push(perm);
+        } catch {
+          /* permission name unsupported */
+        }
+      }
+    })();
+    return () => {
+      cancelled = true;
+      navigator.mediaDevices.removeEventListener("devicechange", refresh);
+      for (const perm of watched) perm.removeEventListener("change", refresh);
+    };
+  }, []);
+
+  return devices;
+}
diff --git a/apps/extension/lib/api/client.ts b/apps/extension/lib/api/client.ts
index 637b5a4..b245eaf 100644
--- a/apps/extension/lib/api/client.ts
+++ b/apps/extension/lib/api/client.ts
@@ -1,16 +1,21 @@
 import { WEB_BASE } from "../config";
 import type {
+  AbortRequest,
   FinalizeRequest,
   FinalizeResponse,
   InitRequest,
   InitResponse,
   PartResponse,
   RecordingApiError,
+  StateResponse,
   UploadTransport,
 } from "./types";
 
 export const RECORDING_API_BASE = `${WEB_BASE}/api/r`;
 
+export const recordingViewUrl = (slug: string): string =>
+  `${WEB_BASE}/r/${slug}`;
+
 export class RecordingApiHttpError extends Error {
   readonly status: number;
   readonly code: string | undefined;
@@ -108,6 +113,25 @@ async function postBytes<T>(
 const partPath = (route: string, slug: string, partNumber: number): string =>
   `/${route}?slug=${encodeURIComponent(slug)}&part=${partNumber}`;
 
+export type AuthCheckResult = "ok" | "invalid" | "unreachable";
+
+// 401 → sign-in revoked (clear the local session); network/5xx → inconclusive,
+// keep the session and let the next recording surface the real error.
+export async function checkAuth(
+  deviceId: string,
+  token: string,
+): Promise<AuthCheckResult> {
+  try {
+    const res = await fetch(`${RECORDING_API_BASE}/auth/check`, {
+      headers: recordingHeaders(deviceId, token),
+    });
+    if (res.ok) return "ok";
+    return res.status === 401 ? "invalid" : "unreachable";
+  } catch {
+    return "unreachable";
+  }
+}
+
 export function createRecordingTransport(
   deviceId: string,
   token: string | null,
@@ -142,5 +166,15 @@ export function createRecordingTransport(
         "image/jpeg",
       );
     },
+    abort: async (req: AbortRequest) => {
+      await postJson<{ ok: true }>("/abort", deviceId, token, req);
+    },
+    state: async (slug: string) => {
+      const res = await fetch(
+        `${RECORDING_API_BASE}/state?slug=${encodeURIComponent(slug)}`,
+      );
+      return parseResponse<StateResponse>(res, "/state");
+    },
+    viewUrl: recordingViewUrl,
   };
 }
diff --git a/apps/extension/lib/api/errors.ts b/apps/extension/lib/api/errors.ts
new file mode 100644
index 0000000..2ebfe36
--- /dev/null
+++ b/apps/extension/lib/api/errors.ts
@@ -0,0 +1,27 @@
+import { RecordingApiHttpError } from "./client";
+
+const FRIENDLY_BY_CODE: Record<string, string> = {
+  active_limit:
+    "Recording limit reached — delete old recordings or upgrade your plan.",
+  storage_limit:
+    "Storage is full — delete old recordings or upgrade your plan.",
+  duration_exceeded: "This recording exceeds your plan's duration limit.",
+  invalid_token: "Your sign-in expired. Sign in again to keep recording.",
+  missing_token: "Sign in to record.",
+};
+
+export function isAuthFailure(err: unknown): boolean {
+  return err instanceof RecordingApiHttpError && err.status === 401;
+}
+
+export function friendlyUploadError(err: unknown): string {
+  if (err instanceof RecordingApiHttpError) {
+    const friendly = err.code ? FRIENDLY_BY_CODE[err.code] : undefined;
+    if (friendly) return friendly;
+    return err.message;
+  }
+  if (err instanceof TypeError) {
+    return "Upload failed — check your connection and try again.";
+  }
+  return err instanceof Error ? err.message : String(err);
+}
diff --git a/apps/extension/lib/api/screenshot.ts b/apps/extension/lib/api/screenshot.ts
new file mode 100644
index 0000000..739ad43
--- /dev/null
+++ b/apps/extension/lib/api/screenshot.ts
@@ -0,0 +1,38 @@
+import { WEB_BASE } from "../config";
+import { parseResponse, recordingHeaders } from "./client";
+
+// The screenshot domain (`/api/s/*`) is deliberately forked from recording on
+// the server; the extension only needs its single-shot upload.
+export type ScreenshotUploadResponse = {
+  id: string;
+  viewUrl: string;
+  editUrl: string;
+};
+
+export type ScreenshotUploadInput = {
+  png: Blob;
+  width: number;
+  height: number;
+  title?: string;
+};
+
+export async function uploadScreenshot(
+  deviceId: string,
+  token: string,
+  input: ScreenshotUploadInput,
+): Promise<ScreenshotUploadResponse> {
+  const headers = recordingHeaders(deviceId, token, {
+    "content-type": "image/png",
+    "x-captureflow-screenshot-width": String(input.width),
+    "x-captureflow-screenshot-height": String(input.height),
+  });
+  if (input.title) {
+    headers["x-captureflow-screenshot-title"] = input.title;
+  }
+  const res = await fetch(`${WEB_BASE}/api/s/upload`, {
+    method: "POST",
+    headers,
+    body: input.png,
+  });
+  return parseResponse<ScreenshotUploadResponse>(res, "/s/upload");
+}
diff --git a/apps/extension/lib/api/types.ts b/apps/extension/lib/api/types.ts
index 97a69bd..9eba8e9 100644
--- a/apps/extension/lib/api/types.ts
+++ b/apps/extension/lib/api/types.ts
@@ -44,11 +44,21 @@ export type FinalizeResponse = {
   url: string;
 };
 
+export type AbortRequest = {
+  slug: string;
+};
+
 export type RecordingApiError = {
   error: string;
   code?: string;
 };
 
+// The no-auth probe: /api/r/state answers "ready" once a finalize has been
+// applied, letting the client treat a finalize lost to the network as success.
+export type StateResponse = {
+  state: string;
+};
+
 // finalizeWebcam returns void: the webcam is best-effort, so its `{ ok }` body
 // is unused.
 export type UploadTransport = {
@@ -66,4 +76,7 @@ export type UploadTransport = {
   finalizeScreen(req: FinalizeRequest): Promise<FinalizeResponse>;
   finalizeWebcam(req: FinalizeRequest): Promise<void>;
   uploadPoster(slug: string, bytes: Uint8Array): Promise<void>;
+  abort(req: AbortRequest): Promise<void>;
+  state(slug: string): Promise<StateResponse>;
+  viewUrl(slug: string): string;
 };
diff --git a/apps/extension/lib/api/upload-streamer.ts b/apps/extension/lib/api/upload-streamer.ts
index 4db4077..863d03e 100644
--- a/apps/extension/lib/api/upload-streamer.ts
+++ b/apps/extension/lib/api/upload-streamer.ts
@@ -22,11 +22,33 @@ type PartStream = {
   abort(): void;
 };
 
-// One multipart stream, one request in flight. Fail-fast: a failed part rejects
-// drain().
+export type OnlineSignal = {
+  isOnline(): boolean;
+  onOnline(cb: () => void): () => void;
+};
+
+// Offscreen documents get the standard connectivity events.
+function defaultOnlineSignal(): OnlineSignal {
+  return {
+    isOnline: () =>
+      typeof navigator === "undefined" || navigator.onLine !== false,
+    onOnline: (cb) => {
+      if (typeof window === "undefined") return () => {};
+      window.addEventListener("online", cb);
+      return () => window.removeEventListener("online", cb);
+    },
+  };
+}
+
+/*
+ * One multipart stream, one request in flight. Fail-fast: a failed part rejects
+ * drain(). Queued parts wait out an offline window instead of failing — only a
+ * request that dies mid-flight is fatal (desktop parity).
+ */
 function createPartStream(
   uploadPart: PartUploader,
   chunkBytes: number,
+  online: OnlineSignal,
 ): PartStream {
   let partNumber = 1;
   const etags: PartRef[] = [];
@@ -38,6 +60,26 @@ function createPartStream(
   // Guards part-number claiming: once draining, a late push can't race the pump.
   let draining = false;
   let failure: unknown = null;
+  let unsubOnline: (() => void) | null = null;
+
+  function pumpWhenOnline(): void {
+    if (unsubOnline) return;
+    unsubOnline = online.onOnline(() => {
+      unsubOnline?.();
+      unsubOnline = null;
+      pump();
+    });
+  }
+
+  function waitOnline(): Promise<void> {
+    if (online.isOnline()) return Promise.resolve();
+    return new Promise((resolve) => {
+      const unsub = online.onOnline(() => {
+        unsub();
+        resolve();
+      });
+    });
+  }
 
   function takePart(maxBytes: number): Uint8Array {
     const target = Math.min(bufBytes, maxBytes);
@@ -66,6 +108,10 @@ function createPartStream(
     if (aborted || draining || failure) return;
     if (inFlight) return;
     if (bufBytes < chunkBytes) return;
+    if (!online.isOnline()) {
+      pumpWhenOnline();
+      return;
+    }
     const bytes = takePart(chunkBytes);
     const n = partNumber++;
     inFlight = (async () => {
@@ -106,10 +152,12 @@ function createPartStream(
       // R2 rejects a non-trailing part that isn't CHUNK_BYTES, so split a tail
       // larger than one chunk into full parts plus one smaller trailing part.
       while (bufBytes > chunkBytes) {
+        await waitOnline();
         const res = await uploadPart(partNumber++, takePart(chunkBytes));
         etags.push({ partNumber: res.partNumber, etag: res.etag });
       }
       if (bufBytes > 0) {
+        await waitOnline();
         const res = await uploadPart(partNumber++, takePart(bufBytes));
         etags.push({ partNumber: res.partNumber, etag: res.etag });
       }
@@ -119,6 +167,8 @@ function createPartStream(
       aborted = true;
       buf = [];
       bufBytes = 0;
+      unsubOnline?.();
+      unsubOnline = null;
     },
   };
 }
@@ -126,6 +176,7 @@ function createPartStream(
 export type RecordingUploadOptions = {
   transport: UploadTransport;
   chunkBytes?: number;
+  online?: OnlineSignal;
 };
 
 export type RecordingUpload = {
@@ -149,19 +200,23 @@ export async function startRecordingUpload(
   options: RecordingUploadOptions,
 ): Promise<RecordingUpload> {
   const { transport, chunkBytes = CHUNK_BYTES } = options;
+  const online = options.online ?? defaultOnlineSignal();
   const res = await transport.init(init);
   const slug = res.slug;
 
   const screen = createPartStream(
     (n, bytes) => transport.uploadScreenPart(slug, n, bytes),
     chunkBytes,
+    online,
   );
   const webcam = res.webcamUploadId
     ? createPartStream(
         (n, bytes) => transport.uploadWebcamPart(slug, n, bytes),
         chunkBytes,
+        online,
       )
     : null;
+  let aborted = false;
 
   return {
     slug,
@@ -178,11 +233,20 @@ export async function startRecordingUpload(
     async finish(): Promise<FinalizeResponse> {
       const screenParts = await screen.drain();
       if (screenParts.length === 0) throw new Error("No screen parts uploaded");
-      const result = await transport.finalizeScreen({
-        slug,
-        parts: screenParts,
-        sizeBytes: screen.totalBytes,
-      });
+      let result: FinalizeResponse;
+      try {
+        result = await transport.finalizeScreen({
+          slug,
+          parts: screenParts,
+          sizeBytes: screen.totalBytes,
+        });
+      } catch (err) {
+        // A finalize lost to the network may still have been applied — the
+        // no-auth state probe disambiguates (finalize is idempotent).
+        const probe = await transport.state(slug).catch(() => null);
+        if (probe?.state !== "ready") throw err;
+        result = { url: transport.viewUrl(slug) };
+      }
       if (webcam) {
         try {
           const webcamParts = await webcam.drain();
@@ -202,6 +266,10 @@ export async function startRecordingUpload(
     abort(): void {
       screen.abort();
       webcam?.abort();
+      if (aborted) return;
+      aborted = true;
+      // Release the server-side multipart + pending row; best-effort.
+      void transport.abort({ slug }).catch(() => {});
     },
   };
 }
diff --git a/apps/extension/lib/capture/limits.ts b/apps/extension/lib/capture/limits.ts
new file mode 100644
index 0000000..82994aa
--- /dev/null
+++ b/apps/extension/lib/capture/limits.ts
@@ -0,0 +1,4 @@
+// The server can't cap a live stream's length (no duration known at init), so
+// the client enforces a hard ceiling. Standalone module: the control bar
+// content script needs the number without pulling in the recorder bundle.
+export const MAX_DURATION_MS = 30 * 60 * 1000;
diff --git a/apps/extension/lib/capture/recorder.ts b/apps/extension/lib/capture/recorder.ts
index 7eb0f1b..8aaef93 100644
--- a/apps/extension/lib/capture/recorder.ts
+++ b/apps/extension/lib/capture/recorder.ts
@@ -5,29 +5,60 @@ import {
   type StreamRecorder,
   type WebcamRecorder,
 } from "@captureflow/engine/web";
-import { createRecordingTransport } from "../api/client";
+import { createRecordingTransport, RecordingApiHttpError } from "../api/client";
+import { friendlyUploadError } from "../api/errors";
 import {
   startRecordingUpload,
   type RecordingUpload,
 } from "../api/upload-streamer";
 import type { CaptureContext } from "../messaging";
-import type { RecordingResultPayload, RecordingStatus } from "../storage";
-
-// The server can't cap a live stream's length (no duration known at init), so
-// enforce a hard client-side ceiling.
-const MAX_DURATION_MS = 30 * 60 * 1000;
+import type {
+  ActiveUpload,
+  RecordingResultPayload,
+  RecordingStatus,
+} from "../storage";
+import { MAX_DURATION_MS } from "./limits";
 
 type Callbacks = {
   onStatus: (status: RecordingStatus) => void;
   onResult: (result: RecordingResultPayload) => void;
+  // Relayed to the SW: chrome.storage is unavailable in offscreen documents.
+  onActiveUpload: (upload: ActiveUpload | null) => void;
+};
+
+type SessionCommands = {
+  stop(): void;
+  pause(): void;
+  resume(): void;
+  restart(): void;
+  discard(): void;
 };
 
+type SessionEnd = "done" | "restart";
+
 let sessionActive = false;
-let activeStop: (() => void) | null = null;
+let commands: SessionCommands | null = null;
 
 export function stopActiveRecording(): void {
-  activeStop?.();
+  commands?.stop();
+}
+export function pauseActiveRecording(): void {
+  commands?.pause();
+}
+export function resumeActiveRecording(): void {
+  commands?.resume();
+}
+export function restartActiveRecording(): void {
+  commands?.restart();
 }
+export function deleteActiveRecording(): void {
+  commands?.discard();
+}
+
+const deviceConstraint = (
+  deviceId: string | undefined,
+): MediaTrackConstraints | boolean =>
+  deviceId ? { deviceId: { ideal: deviceId } } : true;
 
 export async function recordAndUpload(
   ctx: CaptureContext,
@@ -55,7 +86,7 @@ export async function recordAndUpload(
     if (err instanceof DOMException && err.name === "NotAllowedError") {
       cb.onStatus({ kind: "cancelled" });
     } else {
-      cb.onResult({ ok: false, error: errorMessage(err) });
+      cb.onResult(failure(err));
     }
     return;
   }
@@ -66,13 +97,65 @@ export async function recordAndUpload(
   if (ctx.camera) {
     try {
       webcamStream = await navigator.mediaDevices.getUserMedia({
-        video: true,
-        audio: ctx.mic,
+        video: deviceConstraint(ctx.cameraId),
+        audio: ctx.mic ? deviceConstraint(ctx.micId) : false,
       });
     } catch {
       webcamStream = null;
     }
   }
+  // Without a camera the mic can't ride the webcam track, so it is muxed into
+  // the screen fMP4 as AAC instead.
+  let micStream: MediaStream | null = null;
+  if (!webcamStream && ctx.mic) {
+    try {
+      micStream = await navigator.mediaDevices.getUserMedia({
+        video: false,
+        audio: deviceConstraint(ctx.micId),
+      });
+    } catch {
+      micStream = null;
+    }
+  }
+
+  const stopAllTracks = (): void => {
+    stopTracks(screenStream);
+    if (webcamStream) stopTracks(webcamStream);
+    if (micStream) stopTracks(micStream);
+  };
+
+  // Restart discards the session's upload but keeps the acquired streams, so
+  // no picker or permission prompt re-appears.
+  try {
+    for (;;) {
+      const end = await runSession(
+        ctx,
+        cb,
+        { screenStream, webcamStream, micStream },
+        stopAllTracks,
+      );
+      if (end !== "restart") break;
+    }
+  } finally {
+    stopAllTracks();
+    commands = null;
+    sessionActive = false;
+  }
+}
+
+type SessionStreams = {
+  screenStream: MediaStream;
+  webcamStream: MediaStream | null;
+  micStream: MediaStream | null;
+};
+
+async function runSession(
+  ctx: CaptureContext,
+  cb: Callbacks,
+  streams: SessionStreams,
+  stopAllTracks: () => void,
+): Promise<SessionEnd> {
+  const { screenStream, webcamStream, micStream } = streams;
 
   let upload: RecordingUpload;
   try {
@@ -86,34 +169,37 @@ export async function recordAndUpload(
       { transport },
     );
   } catch (err) {
-    sessionActive = false;
-    stopTracks(screenStream);
-    if (webcamStream) stopTracks(webcamStream);
-    cb.onResult({ ok: false, error: errorMessage(err) });
-    return;
+    cb.onResult(failure(err));
+    return "done";
   }
+  cb.onActiveUpload({ slug: upload.slug, deviceId: ctx.deviceId });
 
-  const startedAt = Date.now();
-  let capTimer: ReturnType<typeof setTimeout> | undefined;
+  let endSession!: (end: SessionEnd) => void;
+  const sessionEnd = new Promise<SessionEnd>((resolve) => {
+    endSession = resolve;
+  });
 
+  let ended = false;
+  // `session` is created after the recorders; the ref keeps a track that ends
+  // in that window from hitting the uninitialized binding.
+  let sessionRef: SessionCommands | null = null;
   let screenRecorder: StreamRecorder;
   try {
     screenRecorder = await startStreamRecorder({
       stream: screenStream,
+      micStream,
       // fMP4 fragments are strictly appended, so position is ignorable; copy
       // because the muxer reuses its output buffer.
       output: (bytes) => upload.pushScreen(bytes.slice()),
       // Covers the browser's native "Stop sharing" control and fatal encode
       // errors — both end the whole recording.
-      onEnded: () => stopActiveRecording(),
+      onEnded: () => sessionRef?.stop(),
     });
   } catch (err) {
-    sessionActive = false;
     upload.abort();
-    stopTracks(screenStream);
-    if (webcamStream) stopTracks(webcamStream);
-    cb.onResult({ ok: false, error: errorMessage(err) });
-    return;
+    cb.onActiveUpload(null);
+    cb.onResult(failure(err));
+    return "done";
   }
 
   // A webcam recorder failure is contained to its own stream so the
@@ -128,53 +214,125 @@ export async function recordAndUpload(
         onChunk: (buf) => upload.pushWebcam(new Uint8Array(buf)),
       });
     } catch {
-      stopTracks(webcamStream);
-      webcamStream = null;
+      webcamRecorder = null;
     }
   }
 
+  const startedAt = Date.now();
+  let pausedMs = 0;
+  let pausedAt: number | null = null;
+  const activeElapsed = (): number =>
+    (pausedAt ?? Date.now()) - startedAt - pausedMs;
+
+  let capTimer = setTimeout(() => session.stop(), MAX_DURATION_MS);
+
+  const stopRecorders = async (): Promise<void> => {
+    await Promise.all([
+      screenRecorder.stop().catch(() => null),
+      webcamRecorder?.stop().catch(() => null) ?? Promise.resolve(null),
+    ]);
+  };
+
   const finalize = async (): Promise<void> => {
-    if (capTimer) clearTimeout(capTimer);
-    activeStop = null;
     cb.onStatus({ kind: "uploading" });
     try {
       await Promise.all([
         screenRecorder.stop(),
         webcamRecorder?.stop() ?? Promise.resolve(null),
       ]);
-      stopTracks(screenStream);
-      if (webcamStream) stopTracks(webcamStream);
+      // Release the capture (sharing indicator) before the tail upload.
+      stopAllTracks();
       const { url } = await upload.finish();
+      cb.onActiveUpload(null);
       cb.onResult({
         ok: true,
         url,
         bytes: upload.screenBytes + upload.webcamBytes,
-        durationMs: Date.now() - startedAt,
+        durationMs: activeElapsed(),
       });
     } catch (err) {
-      stopTracks(screenStream);
-      if (webcamStream) stopTracks(webcamStream);
+      stopAllTracks();
       upload.abort();
-      cb.onResult({ ok: false, error: errorMessage(err) });
-    } finally {
-      sessionActive = false;
+      cb.onActiveUpload(null);
+      cb.onResult(failure(err));
     }
+    endSession("done");
   };
 
-  let stopRequested = false;
-  activeStop = () => {
-    if (stopRequested) return;
-    stopRequested = true;
-    void finalize();
+  // Restart/delete path: the muxer still flushes into the (aborted) upload,
+  // where pushes are no-ops.
+  const discardSession = async (): Promise<void> => {
+    upload.abort();
+    await stopRecorders();
+    cb.onActiveUpload(null);
+  };
+
+  const session: SessionCommands = {
+    stop() {
+      if (ended) return;
+      ended = true;
+      clearTimeout(capTimer);
+      void finalize();
+    },
+    pause() {
+      if (ended || pausedAt !== null) return;
+      pausedAt = Date.now();
+      clearTimeout(capTimer);
+      void screenRecorder.pause();
+      webcamRecorder?.pause();
+      cb.onStatus({ kind: "paused", startedAt, pausedMs, pausedAt });
+    },
+    resume() {
+      if (ended || pausedAt === null) return;
+      pausedMs += Date.now() - pausedAt;
+      pausedAt = null;
+      screenRecorder.resume();
+      webcamRecorder?.resume();
+      capTimer = setTimeout(
+        () => session.stop(),
+        Math.max(1_000, MAX_DURATION_MS - activeElapsed()),
+      );
+      cb.onStatus({ kind: "recording", startedAt, pausedMs });
+    },
+    restart() {
+      if (ended) return;
+      ended = true;
+      clearTimeout(capTimer);
+      cb.onStatus({ kind: "preparing" });
+      void discardSession().then(() => endSession("restart"));
+    },
+    discard() {
+      if (ended) return;
+      ended = true;
+      clearTimeout(capTimer);
+      void discardSession().then(() => {
+        stopAllTracks();
+        cb.onStatus({ kind: "cancelled" });
+        endSession("done");
+      });
+    },
   };
+  sessionRef = session;
+  commands = session;
 
-  capTimer = setTimeout(stopActiveRecording, MAX_DURATION_MS);
-  cb.onStatus({ kind: "recording" });
+  cb.onStatus({ kind: "recording", startedAt, pausedMs: 0 });
 
   // Poster frame from the screen — best-effort, never gates the recording.
   void capturePoster(screenStream)
     .then((bytes) => (bytes ? upload.uploadPoster(bytes) : undefined))
     .catch(() => undefined);
+
+  return sessionEnd;
+}
+
+function failure(err: unknown): RecordingResultPayload {
+  return {
+    ok: false,
+    error: friendlyUploadError(err),
+    ...(err instanceof RecordingApiHttpError && err.code
+      ? { code: err.code }
+      : {}),
+  };
 }
 
 async function capturePoster(stream: MediaStream): Promise<Uint8Array | null> {
@@ -208,7 +366,3 @@ async function capturePoster(stream: MediaStream): Promise<Uint8Array | null> {
 function stopTracks(stream: MediaStream): void {
   for (const track of stream.getTracks()) track.stop();
 }
-
-function errorMessage(err: unknown): string {
-  return err instanceof Error ? err.message : String(err);
-}
diff --git a/apps/extension/lib/format.ts b/apps/extension/lib/format.ts
index 41036a1..6cad15a 100644
--- a/apps/extension/lib/format.ts
+++ b/apps/extension/lib/format.ts
@@ -1,3 +1,10 @@
+export function formatClock(ms: number): string {
+  const totalSeconds = Math.max(0, Math.floor(ms / 1000));
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+  return `${minutes}:${String(seconds).padStart(2, "0")}`;
+}
+
 const BYTE_UNITS = ["KB", "MB", "GB", "TB"] as const;
 
 export function formatBytes(bytes: number): string {
diff --git a/apps/extension/lib/messaging.ts b/apps/extension/lib/messaging.ts
index 2061e97..63afa0c 100644
--- a/apps/extension/lib/messaging.ts
+++ b/apps/extension/lib/messaging.ts
@@ -1,5 +1,9 @@
 import { defineExtensionMessaging } from "@webext-core/messaging";
-import type { RecordingResultPayload, RecordingStatus } from "./storage";
+import type {
+  ActiveUpload,
+  RecordingResultPayload,
+  RecordingStatus,
+} from "./storage";
 
 export type StartResult = { ok: true } | { ok: false; error: string };
 
@@ -8,23 +12,41 @@ export type CaptureContext = {
   token: string;
   camera: boolean;
   mic: boolean;
+  cameraId?: string;
+  micId?: string;
 };
 
 /*
- * Direction by message: popup→SW for sign-in and recording control;
- * SW→offscreen for capture control; offscreen→SW for status/result.
+ * Direction by message: popup/control-bar→SW for sign-in and recording
+ * control; SW→offscreen for capture control; offscreen→SW for status/result.
  */
 type ProtocolMap = {
   openSignIn(): void;
   signOut(): void;
   setCameraBubble(input: { on: boolean; mic: boolean }): void;
   cameraStatus(input: { blocked: boolean }): void;
+  ensureMediaGrant(): void;
+  mediaGrantResult(input: { granted: boolean; denied: boolean }): void;
+  closeRecorderOverlay(): void;
+  setOverlayVisible(input: { visible: boolean }): void;
+  setOverlayHeight(input: { height: number }): void;
   startRecording(): StartResult;
   stopRecording(): void;
+  pauseRecording(): void;
+  resumeRecording(): void;
+  restartRecording(): void;
+  deleteRecording(): void;
   beginCapture(ctx: CaptureContext): void;
   stopCapture(): void;
+  pauseCapture(): void;
+  resumeCapture(): void;
+  restartCapture(): void;
+  deleteCapture(): void;
   recordingStatus(status: RecordingStatus): void;
   recordingResult(result: RecordingResultPayload): void;
+  // Offscreen docs can't touch chrome.storage, so the crash marker is relayed
+  // to the SW.
+  activeUploadChanged(upload: ActiveUpload | null): void;
 };
 
 export const { sendMessage, onMessage } =
diff --git a/apps/extension/lib/overlay/camera-bubble.ts b/apps/extension/lib/overlay/camera-bubble.ts
index 5c794b1..53a9112 100644
--- a/apps/extension/lib/overlay/camera-bubble.ts
+++ b/apps/extension/lib/overlay/camera-bubble.ts
@@ -1,4 +1,5 @@
 export const BUBBLE_FRAME_ID = "captureflow-camera-bubble";
+export const GRANT_FRAME_ID = "captureflow-media-grant";
 
 /*
  * Injected via chrome.scripting (serialized): mounts/re-points a circular
@@ -16,12 +17,30 @@ export function mountCameraBubble(frameUrl: string, frameId: string): void {
   iframe.src = frameUrl;
   iframe.allow = "camera; microphone";
   iframe.style.cssText =
-    "position:fixed;bottom:24px;left:24px;width:160px;height:160px;border:0;" +
+    "position:fixed;bottom:24px;left:24px;width:220px;height:220px;border:0;" +
     "border-radius:50%;z-index:2147483647;background:transparent;" +
     "box-shadow:0 8px 28px rgba(0,0,0,.35);";
   document.documentElement.appendChild(iframe);
 }
 
+/*
+ * Near-invisible variant for the combined camera+mic grant: the native prompt
+ * is attributed to the extension frame, so the frame must be in the page, but
+ * nothing should render. 1×1 (not display:none — Chrome may not service
+ * getUserMedia from an undisplayed frame).
+ */
+export function mountGrantFrame(frameUrl: string, frameId: string): void {
+  if (document.getElementById(frameId)) return;
+  const iframe = document.createElement("iframe");
+  iframe.id = frameId;
+  iframe.src = frameUrl;
+  iframe.allow = "camera; microphone";
+  iframe.style.cssText =
+    "position:fixed;bottom:0;left:0;width:1px;height:1px;border:0;" +
+    "opacity:0;pointer-events:none;z-index:2147483647;";
+  document.documentElement.appendChild(iframe);
+}
+
 export function unmountCameraBubble(frameId: string): void {
   document.getElementById(frameId)?.remove();
 }
diff --git a/apps/extension/lib/overlay/recorder-overlay.ts b/apps/extension/lib/overlay/recorder-overlay.ts
new file mode 100644
index 0000000..f47dfb5
--- /dev/null
+++ b/apps/extension/lib/overlay/recorder-overlay.ts
@@ -0,0 +1,90 @@
+export const RECORDER_FRAME_ID = "captureflow-recorder-frame";
+export const RECORDER_BACKDROP_ID = "captureflow-recorder-backdrop";
+
+/*
+ * Injected via chrome.scripting (serialized): toggles the in-page recorder —
+ * a blurred/dimmed backdrop with the extension panel floating top-right. Clicking the backdrop closes it page-side (no SW round-trip).
+ * Args only — the serialized body can't close over module scope.
+ *
+ * The iframe is sized exactly to the panel (the app reports its content height
+ * through the SW), with the shadow/rounding painted page-side on the iframe
+ * element. No iframe transparency: a color-scheme mismatch with the host page
+ * would repaint any transparent area as an opaque white canvas.
+ */
+export function toggleRecorderOverlay(
+  frameUrl: string,
+  frameId: string,
+  backdropId: string,
+): void {
+  const existing = document.getElementById(frameId);
+  if (existing) {
+    existing.remove();
+    document.getElementById(backdropId)?.remove();
+    return;
+  }
+
+  const backdrop = document.createElement("div");
+  backdrop.id = backdropId;
+  backdrop.style.cssText =
+    "position:fixed;inset:0;z-index:2147483646;background:rgba(10,11,14,.45);" +
+    "backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);";
+  backdrop.addEventListener("click", () => {
+    backdrop.remove();
+    document.getElementById(frameId)?.remove();
+  });
+
+  const iframe = document.createElement("iframe");
+  iframe.id = frameId;
+  iframe.src = frameUrl;
+  iframe.allow = "camera; microphone";
+  iframe.style.cssText =
+    "position:fixed;top:14px;right:14px;width:348px;height:0;border:0;" +
+    "z-index:2147483647;background:#16181d;border-radius:16px;" +
+    "box-shadow:0 24px 64px rgba(0,0,0,.5);transition:height .15s ease;";
+
+  // If no height report ever lands, show the panel at a sane size instead of
+  // leaving a 0px (invisible) frame. Literals: serialized body, no outer scope.
+  setTimeout(() => {
+    const frame = document.getElementById(frameId);
+    if (frame instanceof HTMLIFrameElement && frame.style.height === "0px") {
+      frame.style.height = "440px";
+    }
+  }, 600);
+
+  document.documentElement.appendChild(backdrop);
+  document.documentElement.appendChild(iframe);
+}
+
+// Height reports flow app → SW → this (chrome.scripting), not postMessage:
+// runtime messaging works on every page, unlike page-window message events.
+export function setRecorderOverlayHeight(
+  height: number,
+  frameId: string,
+): void {
+  const frame = document.getElementById(frameId);
+  if (!(frame instanceof HTMLIFrameElement)) return;
+  const max = Math.round(window.innerHeight * 0.92);
+  frame.style.height = `${Math.min(Math.max(Math.round(height), 0), max)}px`;
+}
+
+export function removeRecorderOverlay(
+  frameId: string,
+  backdropId: string,
+): void {
+  document.getElementById(frameId)?.remove();
+  document.getElementById(backdropId)?.remove();
+}
+
+// Screenshot capture hides the overlay for a frame so the blur and panel
+// never end up baked into the captured image.
+export function setRecorderOverlayVisible(
+  visible: boolean,
+  frameId: string,
+  backdropId: string,
+): void {
+  const value = visible ? "visible" : "hidden";
+  const frame = document.getElementById(frameId);
+  const backdrop = document.getElementById(backdropId);
+  if (frame) frame.style.visibility = value;
+  if (backdrop) backdrop.style.visibility = value;
+}
diff --git a/apps/extension/lib/storage.ts b/apps/extension/lib/storage.ts
index e136b9a..c148b99 100644
--- a/apps/extension/lib/storage.ts
+++ b/apps/extension/lib/storage.ts
@@ -1,28 +1,39 @@
 export type CapturePrefs = {
   camera: boolean;
   mic: boolean;
+  cameraId?: string;
+  micId?: string;
 };
 
-export type RecordingStatusKind =
-  | "idle"
-  | "preparing"
-  | "recording"
-  | "uploading"
-  | "done"
-  | "cancelled"
-  | "error";
+/*
+ * Timing fields let any surface (popup, control bar) derive the live elapsed
+ * time locally: elapsed = (pausedAt ?? now) - startedAt - pausedMs.
+ */
+export type RecordingStatus =
+  | { kind: "idle" }
+  | { kind: "preparing" }
+  | { kind: "recording"; startedAt: number; pausedMs: number }
+  | { kind: "paused"; startedAt: number; pausedMs: number; pausedAt: number }
+  | { kind: "uploading" }
+  | { kind: "done" }
+  | { kind: "cancelled" }
+  | { kind: "error"; detail?: string };
 
-export type RecordingStatus = {
-  kind: RecordingStatusKind;
-  detail?: string;
-};
+export type RecordingStatusKind = RecordingStatus["kind"];
 
 export type RecordingResultPayload =
   | { ok: true; url: string; bytes: number; durationMs: number }
-  | { ok: false; error: string };
+  | { ok: false; error: string; code?: string };
 
 export type RecordingResult = RecordingResultPayload & { at: number };
 
+// Marker for the recording being uploaded right now; a marker that outlives
+// its offscreen document is a crashed upload the SW aborts server-side.
+export type ActiveUpload = {
+  slug: string;
+  deviceId: string;
+};
+
 const recordingStatusItem = storage.defineItem<RecordingStatus>(
   "session:recordingStatus",
   { fallback: { kind: "idle" } },
@@ -42,6 +53,12 @@ const cameraBlockedItem = storage.defineItem<boolean>("local:cameraBlocked", {
   fallback: false,
 });
 
+// local: (not session:) so a browser crash still leaves the marker for the sweep.
+const activeUploadItem = storage.defineItem<ActiveUpload | null>(
+  "local:activeUpload",
+  { fallback: null },
+);
+
 export const getRecordingStatus = (): Promise<RecordingStatus> =>
   recordingStatusItem.getValue();
 export const setRecordingStatus = (status: RecordingStatus): Promise<void> =>
@@ -74,3 +91,8 @@ export const setCameraBlocked = (blocked: boolean): Promise<void> =>
 export const watchCameraBlocked = (
   cb: (blocked: boolean) => void,
 ): (() => void) => cameraBlockedItem.watch(cb);
+
+export const getActiveUpload = (): Promise<ActiveUpload | null> =>
+  activeUploadItem.getValue();
+export const setActiveUpload = (upload: ActiveUpload | null): Promise<void> =>
+  activeUploadItem.setValue(upload);
diff --git a/apps/extension/lib/surface.ts b/apps/extension/lib/surface.ts
new file mode 100644
index 0000000..ba1f3c8
--- /dev/null
+++ b/apps/extension/lib/surface.ts
@@ -0,0 +1,18 @@
+import { sendMessage } from "./messaging";
+
+/*
+ * The recorder app renders on three surfaces: the in-page overlay iframe
+ * (?overlay=1, the default UX), a standalone popup window (restricted-page
+ * fallback), and the legacy anchored action popup. window.close() is a no-op
+ * inside an iframe, so closing the overlay goes through the service worker.
+ */
+export const isOverlaySurface =
+  new URLSearchParams(location.search).get("overlay") === "1";
+
+export function closeSurface(): void {
+  if (isOverlaySurface) {
+    void sendMessage("closeRecorderOverlay", undefined);
+  } else {
+    window.close();
+  }
+}
diff --git a/apps/extension/public/icon/128.png b/apps/extension/public/icon/128.png
index fc3b4de..de69f5e 100644
Binary files a/apps/extension/public/icon/128.png and b/apps/extension/public/icon/128.png differ
diff --git a/apps/extension/public/icon/16.png b/apps/extension/public/icon/16.png
index 6ecf1d4..f8902c2 100644
Binary files a/apps/extension/public/icon/16.png and b/apps/extension/public/icon/16.png differ
diff --git a/apps/extension/public/icon/32.png b/apps/extension/public/icon/32.png
index 63f16fe..dfff34d 100644
Binary files a/apps/extension/public/icon/32.png and b/apps/extension/public/icon/32.png differ
diff --git a/apps/extension/public/icon/48.png b/apps/extension/public/icon/48.png
index bf4d755..670091d 100644
Binary files a/apps/extension/public/icon/48.png and b/apps/extension/public/icon/48.png differ
diff --git a/apps/extension/tests/errors.test.ts b/apps/extension/tests/errors.test.ts
new file mode 100644
index 0000000..e3701df
--- /dev/null
+++ b/apps/extension/tests/errors.test.ts
@@ -0,0 +1,44 @@
+import { describe, expect, it } from "vitest";
+import { RecordingApiHttpError } from "../lib/api/client";
+import { friendlyUploadError, isAuthFailure } from "../lib/api/errors";
+
+describe("friendlyUploadError", () => {
+  it("maps quota codes to actionable copy", () => {
+    const err = new RecordingApiHttpError(
+      "/init: HTTP 429",
+      429,
+      "active_limit",
+    );
+    expect(friendlyUploadError(err)).toMatch(/Recording limit reached/);
+  });
+
+  it("maps a revoked token to a re-sign-in prompt", () => {
+    const err = new RecordingApiHttpError(
+      "/init: HTTP 401",
+      401,
+      "invalid_token",
+    );
+    expect(friendlyUploadError(err)).toMatch(/Sign in again/);
+  });
+
+  it("keeps the server message for unmapped codes", () => {
+    const err = new RecordingApiHttpError("/init: teapot", 418, "teapot");
+    expect(friendlyUploadError(err)).toBe("/init: teapot");
+  });
+
+  it("turns fetch-level failures into a connectivity hint", () => {
+    expect(friendlyUploadError(new TypeError("Failed to fetch"))).toMatch(
+      /connection/,
+    );
+  });
+});
+
+describe("isAuthFailure", () => {
+  it("is true only for HTTP 401", () => {
+    expect(
+      isAuthFailure(new RecordingApiHttpError("x", 401, "invalid_token")),
+    ).toBe(true);
+    expect(isAuthFailure(new RecordingApiHttpError("x", 429))).toBe(false);
+    expect(isAuthFailure(new Error("x"))).toBe(false);
+  });
+});
diff --git a/apps/extension/tests/format.test.ts b/apps/extension/tests/format.test.ts
index ff2cb01..0421edb 100644
--- a/apps/extension/tests/format.test.ts
+++ b/apps/extension/tests/format.test.ts
@@ -1,5 +1,18 @@
 import { describe, expect, it } from "vitest";
-import { formatBytes } from "../lib/format";
+import { formatBytes, formatClock } from "../lib/format";
+
+describe("formatClock", () => {
+  it("renders mm:ss with zero-padded seconds", () => {
+    expect(formatClock(0)).toBe("0:00");
+    expect(formatClock(9_000)).toBe("0:09");
+    expect(formatClock(65_000)).toBe("1:05");
+    expect(formatClock(30 * 60 * 1000)).toBe("30:00");
+  });
+
+  it("clamps negatives to zero", () => {
+    expect(formatClock(-5_000)).toBe("0:00");
+  });
+});
 
 describe("formatBytes", () => {
   it("renders bytes under 1 KiB without a decimal", () => {
diff --git a/apps/extension/tests/upload-streamer.test.ts b/apps/extension/tests/upload-streamer.test.ts
index 05a4018..e3ae07e 100644
--- a/apps/extension/tests/upload-streamer.test.ts
+++ b/apps/extension/tests/upload-streamer.test.ts
@@ -1,5 +1,8 @@
 import { describe, expect, it, vi } from "vitest";
-import { startRecordingUpload } from "../lib/api/upload-streamer";
+import {
+  startRecordingUpload,
+  type OnlineSignal,
+} from "../lib/api/upload-streamer";
 import type {
   FinalizeRequest,
   InitRequest,
@@ -16,6 +19,7 @@ type FakeTransport = UploadTransport & {
   finalizedScreen: FinalizeRequest | null;
   finalizedWebcam: FinalizeRequest | null;
   posterBytes: number | null;
+  abortedSlugs: string[];
 };
 
 function fakeTransport(
@@ -26,6 +30,7 @@ function fakeTransport(
   let finalizedScreen: FinalizeRequest | null = null;
   let finalizedWebcam: FinalizeRequest | null = null;
   let posterBytes: number | null = null;
+  const abortedSlugs: string[] = [];
 
   const base: UploadTransport = {
     init: async () => ({
@@ -57,6 +62,11 @@ function fakeTransport(
     uploadPoster: async (_slug, bytes) => {
       posterBytes = bytes.byteLength;
     },
+    abort: async (req) => {
+      abortedSlugs.push(req.slug);
+    },
+    state: async () => ({ state: "pending" }),
+    viewUrl: (slug) => `https://captureflow.xyz/r/${slug}`,
   };
 
   const transport = { ...base, ...opts.overrides };
@@ -77,11 +87,39 @@ function fakeTransport(
     get posterBytes() {
       return posterBytes;
     },
+    get abortedSlugs() {
+      return abortedSlugs;
+    },
+  };
+}
+
+// Manually driven connectivity: flip `online` and fire the queued listeners.
+function fakeOnline(initial = true) {
+  let online = initial;
+  const listeners = new Set<() => void>();
+  const signal: OnlineSignal = {
+    isOnline: () => online,
+    onOnline: (cb) => {
+      listeners.add(cb);
+      return () => listeners.delete(cb);
+    },
+  };
+  return {
+    signal,
+    set(next: boolean) {
+      online = next;
+      if (online) {
+        for (const cb of [...listeners]) cb();
+      }
+    },
   };
 }
 
 const bytes = (n: number): Uint8Array => new Uint8Array(n);
 
+const tick = (): Promise<void> =>
+  new Promise((resolve) => setTimeout(resolve, 0));
+
 describe("startRecordingUpload — screen stream", () => {
   it("buffers below the chunk size and ships one trailing part on finish", async () => {
     const transport = fakeTransport();
@@ -232,3 +270,97 @@ describe("startRecordingUpload — poster", () => {
     expect(transport.posterBytes).toBe(512);
   });
 });
+
+describe("startRecordingUpload — abort", () => {
+  it("releases the server-side upload exactly once", async () => {
+    const transport = fakeTransport();
+    const upload = await startRecordingUpload(INIT, {
+      transport,
+      chunkBytes: 100,
+    });
+    upload.pushScreen(bytes(40));
+    upload.abort();
+    upload.abort();
+    await tick();
+    expect(transport.abortedSlugs).toEqual(["abc12345"]);
+  });
+});
+
+describe("startRecordingUpload — offline handling", () => {
+  it("holds queued parts while offline and resumes on the online signal", async () => {
+    const transport = fakeTransport();
+    const net = fakeOnline(false);
+    const upload = await startRecordingUpload(INIT, {
+      transport,
+      chunkBytes: 100,
+      online: net.signal,
+    });
+
+    upload.pushScreen(bytes(250));
+    await tick();
+    expect(transport.screenParts).toHaveLength(0);
+
+    net.set(true);
+    await tick();
+    expect(transport.screenParts.map((p) => p.size)).toEqual([100, 100]);
+
+    await upload.finish();
+    expect(transport.screenParts.map((p) => p.size)).toEqual([100, 100, 50]);
+  });
+
+  it("waits for connectivity before draining the tail", async () => {
+    const transport = fakeTransport();
+    const net = fakeOnline(true);
+    const upload = await startRecordingUpload(INIT, {
+      transport,
+      chunkBytes: 100,
+      online: net.signal,
+    });
+
+    upload.pushScreen(bytes(40));
+    net.set(false);
+    const finishing = upload.finish();
+    await tick();
+    expect(transport.screenParts).toHaveLength(0);
+
+    net.set(true);
+    await finishing;
+    expect(transport.screenParts).toEqual([{ partNumber: 1, size: 40 }]);
+  });
+});
+
+describe("startRecordingUpload — finalize fallback", () => {
+  it("treats a network-lost finalize as success when the state probe says ready", async () => {
+    const transport = fakeTransport({
+      overrides: {
+        finalizeScreen: async () => {
+          throw new TypeError("fetch failed");
+        },
+        state: async () => ({ state: "ready" }),
+      },
+    });
+    const upload = await startRecordingUpload(INIT, {
+      transport,
+      chunkBytes: 100,
+    });
+    upload.pushScreen(bytes(40));
+    const res = await upload.finish();
+    expect(res.url).toBe("https://captureflow.xyz/r/abc12345");
+  });
+
+  it("rethrows the finalize failure when the recording is not ready", async () => {
+    const transport = fakeTransport({
+      overrides: {
+        finalizeScreen: async () => {
+          throw new TypeError("fetch failed");
+        },
+      },
+    });
+    const upload = await startRecordingUpload(INIT, {
+      transport,
+      chunkBytes: 100,
+    });
+    upload.pushScreen(bytes(40));
+    await expect(upload.finish()).rejects.toThrow("fetch failed");
+  });
+});
diff --git a/apps/extension/tests/wire-types.test.ts b/apps/extension/tests/wire-types.test.ts
new file mode 100644
index 0000000..a689bfa
--- /dev/null
+++ b/apps/extension/tests/wire-types.test.ts
@@ -0,0 +1,59 @@
+import { readFileSync } from "node:fs";
+import { fileURLToPath } from "node:url";
+import { describe, expect, it } from "vitest";
+
+/*
+ * Drift guard for the deliberately forked wire types (PLAN.md Decision 5): the
+ * extension may not import from apps/web, so this compares the shared type
+ * declarations textually. A mismatch means one side of the protocol changed —
+ * update both files.
+ */
+
+const SHARED_TYPES = [
+  "RecordingVisibility",
+  "InitRequest",
+  "InitResponse",
+  "PartResponse",
+  "FinalizeRequest",
+  "FinalizeResponse",
+  "AbortRequest",
+  "RecordingApiError",
+] as const;
+
+const read = (relative: string): string =>
+  readFileSync(fileURLToPath(new URL(relative, import.meta.url)), "utf8");
+
+function extractTypes(source: string): Map<string, string> {
+  const stripped = source
+    .replace(/\/\*[\s\S]*?\*\//g, "")
+    .replace(/\/\/.*$/gm, "");
+  const types = new Map<string, string>();
+  const re = /export type (\w+) =/g;
+  for (let match = re.exec(stripped); match; match = re.exec(stripped)) {
+    let index = re.lastIndex;
+    let depth = 0;
+    while (index < stripped.length) {
+      const ch = stripped[index];
+      if (ch === "{") depth++;
+      else if (ch === "}") depth--;
+      else if (ch === ";" && depth === 0) break;
+      index++;
+    }
+    types.set(
+      match[1]!,
+      stripped.slice(re.lastIndex, index).replace(/\s+/g, " ").trim(),
+    );
+  }
+  return types;
+}
+
+describe("wire types stay in sync with apps/web", () => {
+  const extension = extractTypes(read("../lib/api/types.ts"));
+  const web = extractTypes(read("../../web/lib/recording/types.ts"));
+
+  it.each([...SHARED_TYPES])("%s matches", (name) => {
+    expect(extension.get(name), `${name} missing in extension`).toBeDefined();
+    expect(web.get(name), `${name} missing in web`).toBeDefined();
+    expect(extension.get(name)).toBe(web.get(name));
+  });
+});
diff --git a/apps/extension/wxt.config.ts b/apps/extension/wxt.config.ts
index 2857578..1c651ff 100644
--- a/apps/extension/wxt.config.ts
+++ b/apps/extension/wxt.config.ts
@@ -26,20 +26,34 @@ export default defineConfig({
       permissions: isFirefox
         ? ["storage"]
         : ["storage", "offscreen", "scripting", "activeTab"],
+      /*
+       * Extension-context fetches to the API need host permission to skip
+       * CORS/Private-Network-Access checks — Brave otherwise blocks extension
+       * frames from reaching localhost in dev. Mirrors the
+       * externally_connectable dev/prod split.
+       */
+      host_permissions: matches,
       // Firefox MV3 lacks web→extension messaging, so omit it there.
       ...(isFirefox ? {} : { externally_connectable: { matches } }),
-      // The injected camera bubble (and the permission-grant fallback) load
-      // these extension pages inside a web origin.
+      // The injected camera bubble, the permission-grant fallback, and the
+      // in-page recorder overlay load these extension pages inside a web origin.
       ...(isFirefox
         ? {}
         : {
             web_accessible_resources: [
               {
-                resources: ["bubble.html", "permissions.html"],
+                resources: ["bubble.html", "permissions.html", "popup.html"],
                 matches: ["<all_urls>"],
               },
             ],
           }),
     };
   },
+  hooks: {
+    // The recorder opens as an in-page overlay from action.onClicked;
+    // an anchored default_popup would swallow the click.
+    "build:manifestGenerated": (_wxt, manifest) => {
+      if (manifest.action) delete manifest.action.default_popup;
+    },
+  },
 });
diff --git a/apps/web/app/recordings/[id]/edit/EditorToolRail.tsx b/apps/web/app/recordings/[id]/edit/EditorToolRail.tsx
index 86c3c02..3fb6ce3 100644
--- a/apps/web/app/recordings/[id]/edit/EditorToolRail.tsx
+++ b/apps/web/app/recordings/[id]/edit/EditorToolRail.tsx
@@ -26,7 +26,7 @@ type Props = {
   details: RecordingDetails;
 };
 
-// Far-right tool rail. Each tool opens its controls in a popover, Loom-style;
+// Far-right tool rail. Each tool opens its controls in a popover;
 // "Add overlay" is the one genuine placeholder (no overlay-asset pipeline yet).
 export function EditorToolRail({
   config,
diff --git a/apps/web/app/recordings/[id]/edit/EditorTranscriptPanel.tsx b/apps/web/app/recordings/[id]/edit/EditorTranscriptPanel.tsx
index c6b39c7..64363ab 100644
--- a/apps/web/app/recordings/[id]/edit/EditorTranscriptPanel.tsx
+++ b/apps/web/app/recordings/[id]/edit/EditorTranscriptPanel.tsx
@@ -4,8 +4,8 @@ import { useState } from "react";
 import { Captions, ChevronDown } from "lucide-react";
 import { cn } from "@/lib/utils";
 
-// The wide right column. Loom keeps it for the transcript only; ours is a
-// placeholder until transcripts are generated. Hidden on narrow viewports so
+// The wide right column: a transcript placeholder until transcripts are
+// generated. Hidden on narrow viewports so
 // the player + tool rail keep room.
 export function EditorTranscriptPanel() {
   const [open, setOpen] = useState(true);
diff --git a/apps/web/app/recordings/[id]/edit/RecordingEditorImpl.tsx b/apps/web/app/recordings/[id]/edit/RecordingEditorImpl.tsx
index 06d1447..2686b0d 100644
--- a/apps/web/app/recordings/[id]/edit/RecordingEditorImpl.tsx
+++ b/apps/web/app/recordings/[id]/edit/RecordingEditorImpl.tsx
@@ -14,7 +14,7 @@ import { EditorTranscriptPanel } from "./EditorTranscriptPanel";
 import { EditorToolRail } from "./EditorToolRail";
 import { EditorTimeline } from "./EditorTimeline";
 
-// Loom-style recording editor. The preview uses the same RecordingPlayer as the
+// The recording editor. The preview uses the same RecordingPlayer as the
 // public viewer, so it matches what /r/[id] renders pixel for pixel.
 export function RecordingEditorImpl(props: RecordingEditorProps) {
   const router = useRouter();
diff --git a/apps/web/app/s/[id]/page.tsx b/apps/web/app/s/[id]/page.tsx
index 9c0c99d..4df34ab 100644
--- a/apps/web/app/s/[id]/page.tsx
+++ b/apps/web/app/s/[id]/page.tsx
@@ -7,13 +7,12 @@ import {
   getScreenshot,
   getScreenshotWithOwner,
 } from "@/lib/screenshot/db";
-import { publicScreenshotUrl } from "@/lib/screenshot/r2";
+import { publicScreenshotUrlFor } from "@/lib/screenshot/r2";
 import { verifySession } from "@/lib/screenshot/verify-session";
 import { canViewResource } from "@/lib/visibility";
 import {
   APP_SITE_URL,
   APP_WEB_SITE_URL,
-  R2_PUBLIC_BASE_URL,
   screenshotViewUrlFor,
   PRODUCT_NAME,
 } from "@/lib/site";
@@ -44,7 +43,7 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
       return { title: PRODUCT_NAME, robots: { index: false, follow: false } };
     }
   }
-  const imageUrl = publicScreenshotUrl(screenshot.id, R2_PUBLIC_BASE_URL);
+  const imageUrl = await publicScreenshotUrlFor(screenshot.id);
   const title = screenshot.title ?? `${PRODUCT_NAME} screenshot`;
   return {
     title,
@@ -103,10 +102,7 @@ export default async function ScreenshotPage({ params }: Props) {
   // Cache-bust so a re-saved screenshot isn't served from the browser disk cache.
   const cacheKey =
     screenshot.editedAt ?? screenshot.updatedAt ?? screenshot.createdAt;
-  const imageUrl = `${publicScreenshotUrl(
-    screenshot.id,
-    R2_PUBLIC_BASE_URL,
-  )}?v=${cacheKey}`;
+  const imageUrl = `${await publicScreenshotUrlFor(screenshot.id)}?v=${cacheKey}`;
   // +1 so the viewer sees their own (post-read) load reflected.
   const displayViews = screenshot.viewCount + 1;
   const isOwner = !!(
diff --git a/apps/web/lib/recording/schema.sql b/apps/web/lib/recording/schema.sql
index 00d2f12..2f2aa01 100644
--- a/apps/web/lib/recording/schema.sql
+++ b/apps/web/lib/recording/schema.sql
@@ -27,7 +27,7 @@ CREATE TABLE IF NOT EXISTS recordings (
   -- Total counts (not unique) — keep MVP simple; uniqueness adds
   -- IP/cookie tracking + server-side dedupe state.
   view_count        INTEGER NOT NULL DEFAULT 0,
-  -- Loom-style header line above the player (e.g. "Brave Browser —
+  -- Header line above the player (e.g. "Brave Browser —
   -- Tab title"). Comes from the recording's selected source name; we
   -- store it verbatim and let the page layer format the date.
   title             TEXT,
diff --git a/apps/web/lib/screenshot/r2.ts b/apps/web/lib/screenshot/r2.ts
index fb744a6..74e4bd6 100644
--- a/apps/web/lib/screenshot/r2.ts
+++ b/apps/web/lib/screenshot/r2.ts
@@ -77,3 +77,14 @@ export async function putScreenshotState(
 export function publicScreenshotUrl(id: string, r2BaseUrl: string): string {
   return `${r2BaseUrl}/${screenshotStorageKey(id)}`;
 }
+
+// Resolve the base per request: in dev the binding env carries the local
+// media-proxy override (.dev.vars), which process.env never sees.
+export async function publicScreenshotUrlFor(id: string): Promise<string> {
+  const env = await getCloudflareEnv();
+  const base =
+    env?.R2_PUBLIC_BASE_URL ??
+    process.env.R2_PUBLIC_BASE_URL ??
+    "https://cdn.captureflow.xyz";
+  return publicScreenshotUrl(id, base);
+}
diff --git a/apps/web/upng.d.ts b/apps/web/upng.d.ts
index 30a414c..53522e9 100644
--- a/apps/web/upng.d.ts
+++ b/apps/web/upng.d.ts
@@ -1,7 +1,7 @@
 // upng-js ships no .d.ts. Declare the slim surface we touch — the
 // editor's encode worker calls `UPNG.encode([rgbaBuffer], w, h, cnum)`
-// to produce indexed-palette PNG bytes (`cnum: 256`) that match
-// Loom-class output size for screenshots.
+// to produce indexed-palette PNG bytes (`cnum: 256`) that keep
+// screenshot output compact.
 
 declare module "upng-js" {
   type EncodeBuffer = ArrayBuffer | Uint8Array;
diff --git a/packages/engine/native/mac/screen-recorder/main.swift b/packages/engine/native/mac/screen-recorder/main.swift
index 3e1cd7e..2d8291a 100644
--- a/packages/engine/native/mac/screen-recorder/main.swift
+++ b/packages/engine/native/mac/screen-recorder/main.swift
@@ -722,7 +722,7 @@ class StreamCapture: NSObject, SCStreamOutput, SCStreamDelegate {
     // away. The source content stretches across (height+1) rows of an
     // (height)-row output, which is a vertical scale of (h+1)/h — at
     // 1080p that's 0.09%, well below perceptual threshold. Same
-    // workaround Loom / CleanShotX / Replay use.
+    // workaround other capture apps use.
     streamConfig.destinationRect = CGRect(
       x: 0,
       y: -1,
diff --git a/packages/engine/src/web/stream-recorder.ts b/packages/engine/src/web/stream-recorder.ts
index 18b0ba3..e0b42d2 100644
--- a/packages/engine/src/web/stream-recorder.ts
+++ b/packages/engine/src/web/stream-recorder.ts
@@ -12,6 +12,9 @@ const KEYFRAME_INTERVAL_US = 2_000_000;
 // Encoder back-pressure bound: drop frames rather than queue unboundedly.
 const MAX_ENCODE_QUEUE = 2;
 
+const AAC_CODEC = "mp4a.40.2";
+const AUDIO_BITRATE = 128_000;
+
 export type StreamRecorderLog = {
   info(message: string): void;
   warn(message: string): void;
@@ -20,6 +23,8 @@ export type StreamRecorderLog = {
 export type StreamRecorderOptions = {
   /** Display capture; constrain it to the contract's max dims at getDisplayMedia time. */
   stream: MediaStream;
+  /** Mic capture muxed into the fMP4 as AAC-LC; dropped (warn) where AAC encoding is unavailable. */
+  micStream?: MediaStream | null;
   /** Receives muxed fMP4 bytes as they are written (the upload feed). */
   output(bytes: Uint8Array, position: number): void;
   /** Fires when capture ends without stop() — track ended or fatal encode error. */
@@ -36,7 +41,10 @@ export type StreamRecorderResult = {
 };
 
 export type StreamRecorder = {
-  /** Idempotent; flushes the encoder and finalizes the muxer. */
+  /** Stops encoding new media; the output timeline stays continuous across the gap. */
+  pause(): Promise<void>;
+  resume(): void;
+  /** Idempotent; flushes the encoders and finalizes the muxer. */
   stop(): Promise<StreamRecorderResult>;
 };
 
@@ -66,12 +74,26 @@ async function pickSupportedH264(probe: {
   return candidates[candidates.length - 1]!;
 }
 
+async function isAacSupported(config: AudioEncoderConfig): Promise<boolean> {
+  try {
+    const res = await AudioEncoder.isConfigSupported(config);
+    return res.supported === true;
+  } catch {
+    return false;
+  }
+}
+
 /*
  * The MediaStream frame source of the output contract: getDisplayMedia →
- * MediaStreamTrackProcessor → VideoEncoder → the shared fMP4 muxer. Stream-
- * driven (no rAF/canvas), so it keeps encoding at full rate in background
- * tabs/offscreen documents. This is also the capture path for platforms
- * without a native sidecar.
+ * MediaStreamTrackProcessor → VideoEncoder → the shared fMP4 muxer (+ an
+ * optional mic → AudioEncoder AAC track). Stream-driven (no rAF/canvas), so it
+ * keeps encoding at full rate in background tabs/offscreen documents. This is
+ * also the capture path for platforms without a native sidecar.
+ *
+ * Pause drops frames instead of stopping capture, then shifts every later
+ * chunk's timestamp back by the wall-clock pause total — the muxed timeline is
+ * gapless. Timestamps are clamped per track so the muxer always sees them
+ * monotonic even if capture and wall clocks disagree by a few ms.
  */
 export async function startStreamRecorder(
   opts: StreamRecorderOptions,
@@ -88,11 +110,36 @@ export async function startStreamRecorder(
 
   const codec = await pickSupportedH264({ width, height, framerate, bitrate });
 
+  const micTrack = opts.micStream?.getAudioTracks()[0] ?? null;
+  const micSettings = micTrack?.getSettings();
+  const audioConfig: AudioEncoderConfig | null = micTrack
+    ? {
+        codec: AAC_CODEC,
+        sampleRate: micSettings?.sampleRate ?? 48_000,
+        numberOfChannels: micSettings?.channelCount ?? 1,
+        bitrate: AUDIO_BITRATE,
+      }
+    : null;
+  const withAudio = audioConfig !== null && (await isAacSupported(audioConfig));
+  if (audioConfig && !withAudio) {
+    log.warn(
+      "stream-recorder: AAC encoding unavailable, recording without mic",
+    );
+  }
+
   const muxer = createFmp4Muxer({
     video: { width, height, frameRate: framerate },
+    audio:
+      withAudio && audioConfig
+        ? {
+            numberOfChannels: audioConfig.numberOfChannels,
+            sampleRate: audioConfig.sampleRate,
+          }
+        : null,
     output: opts.output,
-    // Capture-clock timestamps don't start at zero.
-    firstTimestampBehavior: "offset",
+    // Capture-clock timestamps don't start at zero; with a second track both
+    // must shift by the same amount to keep A/V alignment.
+    firstTimestampBehavior: withAudio ? "cross-track-offset" : "offset",
   });
 
   let encoderError: Error | null = null;
@@ -101,17 +148,34 @@ export async function startStreamRecorder(
   let firstTsUs: number | null = null;
   let lastEndUs = 0;
 
+  let paused = false;
+  let pauseStartedAtMs: number | null = null;
+  let pauseOffsetUs = 0;
+  let forceKeyframe = false;
+  let lastVideoTsUs = -Infinity;
+  let lastAudioTsUs = -Infinity;
+
   const encoder = new VideoEncoder({
     output: (chunk, meta) => {
+      const data = new Uint8Array(chunk.byteLength);
+      chunk.copyTo(data);
+      const tsUs = Math.max(chunk.timestamp - pauseOffsetUs, lastVideoTsUs + 1);
+      lastVideoTsUs = tsUs;
       try {
-        muxer.addVideoChunk(chunk, meta);
+        muxer.addVideoChunkRaw(
+          data,
+          chunk.type,
+          tsUs,
+          chunk.duration ?? 0,
+          meta,
+        );
       } catch (err) {
         encoderError = err instanceof Error ? err : new Error(String(err));
         return;
       }
       encodedFrames++;
-      if (firstTsUs === null) firstTsUs = chunk.timestamp;
-      lastEndUs = chunk.timestamp + (chunk.duration ?? 0);
+      if (firstTsUs === null) firstTsUs = tsUs;
+      lastEndUs = tsUs + (chunk.duration ?? 0);
     },
     error: (err) => {
       encoderError = err;
@@ -126,8 +190,38 @@ export async function startStreamRecorder(
     hardwareAcceleration: "prefer-hardware",
     avc: { format: "avc" },
   });
+
+  // Mic encode errors are contained: the screen capture is load-bearing, the
+  // mic track is best-effort.
+  let audioFailed = false;
+  const audioEncoder =
+    withAudio && audioConfig
+      ? new AudioEncoder({
+          output: (chunk, meta) => {
+            const data = new Uint8Array(chunk.byteLength);
+            chunk.copyTo(data);
+            const tsUs = Math.max(
+              chunk.timestamp - pauseOffsetUs,
+              lastAudioTsUs + 1,
+            );
+            lastAudioTsUs = tsUs;
+            try {
+              muxer.addAudioChunkRaw(data, tsUs, chunk.duration ?? 0, meta);
+            } catch (err) {
+              audioFailed = true;
+              log.warn(`stream-recorder: audio mux failed (${String(err)})`);
+            }
+          },
+          error: (err) => {
+            audioFailed = true;
+            log.warn(`stream-recorder: audio encode failed (${String(err)})`);
+          },
+        })
+      : null;
+  if (audioEncoder && audioConfig) audioEncoder.configure(audioConfig);
+
   log.info(
-    `stream-recorder: started (${width}x${height}@${Math.round(framerate)}fps, ${codec})`,
+    `stream-recorder: started (${width}x${height}@${Math.round(framerate)}fps, ${codec}${audioEncoder ? " + aac mic" : ""})`,
   );
 
   const reader = new MediaStreamTrackProcessor<VideoFrame>({
@@ -145,18 +239,44 @@ export async function startStreamRecorder(
         frame.close();
         break;
       }
-      if (encoder.encodeQueueSize > MAX_ENCODE_QUEUE) {
-        droppedFrames++;
+      if (paused || encoder.encodeQueueSize > MAX_ENCODE_QUEUE) {
+        if (!paused) droppedFrames++;
         frame.close();
         continue;
       }
-      const keyFrame = frame.timestamp - lastKeyUs >= KEYFRAME_INTERVAL_US;
-      if (keyFrame) lastKeyUs = frame.timestamp;
+      const keyFrame =
+        forceKeyframe || frame.timestamp - lastKeyUs >= KEYFRAME_INTERVAL_US;
+      if (keyFrame) {
+        lastKeyUs = frame.timestamp;
+        forceKeyframe = false;
+      }
       encoder.encode(frame, { keyFrame });
       frame.close();
     }
   })();
 
+  const audioReader = audioEncoder
+    ? new MediaStreamTrackProcessor<AudioData>({
+        track: micTrack!,
+      }).readable.getReader()
+    : null;
+
+  const audioReadLoop = audioReader
+    ? (async () => {
+        for (;;) {
+          const { done, value: data } = await audioReader.read();
+          if (done || !data) break;
+          if (stopping || audioFailed || paused) {
+            data.close();
+            if (stopping || audioFailed) break;
+            continue;
+          }
+          audioEncoder!.encode(data);
+          data.close();
+        }
+      })()
+    : null;
+
   async function finish(): Promise<StreamRecorderResult> {
     stopping = true;
     try {
@@ -164,7 +284,13 @@ export async function startStreamRecorder(
     } catch {
       /* already done */
     }
+    try {
+      await audioReader?.cancel();
+    } catch {
+      /* already done */
+    }
     await readLoop.catch(() => {});
+    await audioReadLoop?.catch(() => {});
     if (encoder.state === "configured") {
       await encoder.flush().catch(() => {});
     }
@@ -173,6 +299,16 @@ export async function startStreamRecorder(
     } catch {
       /* already closed */
     }
+    if (audioEncoder) {
+      if (audioEncoder.state === "configured") {
+        await audioEncoder.flush().catch(() => {});
+      }
+      try {
+        audioEncoder.close();
+      } catch {
+        /* already closed */
+      }
+    }
     if (encoderError) throw encoderError;
     muxer.finalize();
     const durationMs =
@@ -197,6 +333,29 @@ export async function startStreamRecorder(
 
   let finishPromise: Promise<StreamRecorderResult> | null = null;
   return {
+    async pause() {
+      if (paused || stopping) return;
+      paused = true;
+      pauseStartedAtMs = performance.now();
+      // Drain in-flight chunks now so none are emitted after the offset grows.
+      if (encoder.state === "configured") {
+        await encoder.flush().catch(() => {});
+      }
+      if (audioEncoder?.state === "configured") {
+        await audioEncoder.flush().catch(() => {});
+      }
+    },
+    resume() {
+      if (!paused || stopping) return;
+      if (pauseStartedAtMs !== null) {
+        pauseOffsetUs += Math.round(
+          (performance.now() - pauseStartedAtMs) * 1_000,
+        );
+        pauseStartedAtMs = null;
+      }
+      forceKeyframe = true;
+      paused = false;
+    },
     stop() {
       finishPromise ??= finish();
       return finishPromise;
diff --git a/packages/engine/src/web/webcam.ts b/packages/engine/src/web/webcam.ts
index 5b48448..81ed930 100644
--- a/packages/engine/src/web/webcam.ts
+++ b/packages/engine/src/web/webcam.ts
@@ -100,6 +100,8 @@ export type WebcamRecorderOptions = {
 };
 
 export type WebcamRecorder = {
+  pause(): void;
+  resume(): void;
   stop(): Promise<{ totalBytes: number }>;
   abort(): void;
 };
@@ -148,6 +150,13 @@ export function startWebcamRecorder(
   log.info(`webcam-recorder: started (mime=${mimeType})`);
 
   return {
+    // MediaRecorder keeps the WebM timeline continuous across pause/resume.
+    pause() {
+      if (recorder.state === "recording") recorder.pause();
+    },
+    resume() {
+      if (recorder.state === "paused") recorder.resume();
+    },
     async stop() {
       await new Promise<void>((resolve) => {
         if (recorder.state === "inactive") {
diff --git a/scripts/gen-brand-icons.py b/scripts/gen-brand-icons.py
index 53a7286..72ed725 100644
--- a/scripts/gen-brand-icons.py
+++ b/scripts/gen-brand-icons.py
@@ -44,6 +44,7 @@
 DASSETS = ROOT / "apps/desktop/src/renderer/src/assets"
 DBUILD = ROOT / "apps/desktop/build"
 DOCS = ROOT / "apps/docs/public"
+EXT = ROOT / "apps/extension/public/icon"
 
 ACTOOL = "/Applications/Xcode.app/Contents/Developer/usr/bin/actool"
 
@@ -206,6 +207,11 @@ def generate(master, icon_src):
     save_ico(master, DOCS / "favicon.ico")
     log("docs logo + favicon")
 
+    # Browser extension (WXT wires public/icon/<size>.png into the manifest)
+    for size in (16, 32, 48, 128):
+        square(master, size).save(EXT / f"{size}.png")
+    log("extension public/icon 16/32/48/128")
+
 
 def swap_og(master, og_path):
     og = Image.open(og_path).convert("RGBA")