From 0e3c500325208a2e0bc7c1167390f89a250cdb88 Mon Sep 17 00:00:00 2001
From: Lukas Boehler <lukas@gleap.io>
Date: Wed, 30 Sep 2026 21:49:05 -0400
Subject: [PATCH 01/11] fix: classic screen recording stops cleanly on "Stop
 sharing" and is not uploaded twice

- "Stop sharing" in the browser ended only the screen track: the timer kept running and the
  microphone stayed open (the recorder went on recording audio). The track's end now stops the
  recording like the Stop button, releasing the timer and every track.
- The recording stayed in the global data after the report that carried it was sent, so a later
  silent crash report uploaded it again. It is cleared once a report with it was sent, and silent
  reports never take the feedback form's recording along.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/GleapFeedback.js       | 20 ++++++++++++++++++--
 src/GleapScreenRecorder.js | 23 ++++++++++++++++++++---
 2 files changed, 38 insertions(+), 5 deletions(-)

diff --git a/src/GleapFeedback.js b/src/GleapFeedback.js
index 791f1f0c..6d714e76 100644
--- a/src/GleapFeedback.js
+++ b/src/GleapFeedback.js
@@ -73,6 +73,8 @@ export default class GleapFeedback {
   screenshotData = undefined;
   webReplay = undefined;
   screenRecordingUrl = undefined;
+  // The form's recording this report uploads (see forgetSentScreenRecording).
+  screenRecordingData = undefined;
   spamToken = undefined;
 
   constructor(type, priority, formData, isSilent, excludeData, outboundId, spamToken) {
@@ -102,9 +104,11 @@ export default class GleapFeedback {
       this.webReplay = webReplay;
     }
 
-    // Prepare screen recording
-    var screenRecordingData = gleapInstance.getGlobalDataItem('screenRecordingData');
+    // Prepare screen recording. It was made in the feedback form, so a silent (crash) report never
+    // takes it along.
+    var screenRecordingData = this.isSilent ? null : gleapInstance.getGlobalDataItem('screenRecordingData');
     if (screenRecordingData != null) {
+      this.screenRecordingData = screenRecordingData;
       var recordingUrlPromise = GleapScreenRecorder.uploadScreenRecording(screenRecordingData).then((recordingUrl) => {
         if (recordingUrl) {
           this.screenRecordingUrl = recordingUrl;
@@ -199,7 +203,18 @@ export default class GleapFeedback {
     });
   }
 
+  // The recording went out with this report: a later report must not upload it again.
+  forgetSentScreenRecording() {
+    try {
+      const gleapInstance = Gleap.getInstance();
+      if (this.screenRecordingData && gleapInstance.getGlobalDataItem('screenRecordingData') === this.screenRecordingData) {
+        gleapInstance.setGlobalDataItem('screenRecordingData', null);
+      }
+    } catch (exp) {}
+  }
+
   sendFeedback() {
+    const self = this;
     return new Promise((resolve, reject) => {
       this.takeSnapshot()
         .then(() => {
@@ -216,6 +231,7 @@ export default class GleapFeedback {
             http.onreadystatechange = function (e) {
               if (http.readyState === 4) {
                 if (http.status === 200 || http.status === 201) {
+                  self.forgetSentScreenRecording();
                   try {
                     const feedback = JSON.parse(http.responseText);
                     resolve(feedback);
diff --git a/src/GleapScreenRecorder.js b/src/GleapScreenRecorder.js
index 52170bc3..d331966a 100644
--- a/src/GleapScreenRecorder.js
+++ b/src/GleapScreenRecorder.js
@@ -158,6 +158,19 @@ export class GleapScreenRecorder {
       this.mediaRecorder.stop();
     } catch (_) {}
 
+    this.releaseCapture();
+
+    this.rerender();
+  }
+
+  // Stops the timer and every captured track: the screen (what Chrome uses for the recording
+  // indicator), the composed stream and the microphone.
+  releaseCapture() {
+    if (this.recordingTimer) {
+      clearInterval(this.recordingTimer);
+      this.recordingTimer = null;
+    }
+
     // Stop composed stream tracks
     this.stopStreamTracks(this.stream);
 
@@ -174,8 +187,6 @@ export class GleapScreenRecorder {
     }
 
     this._displayVideoTrack = null;
-
-    this.rerender();
   }
 
   async startAudioRecording() {
@@ -309,8 +320,14 @@ export class GleapScreenRecorder {
 
     const videoTrack = this.getFirstVideoTrack(stream);
     if (videoTrack) {
+      // The browser's "Stop sharing" ends the screen track: stop like the Stop button does, so the
+      // timer and the microphone stop too (the recorder's onstop prepares the recording).
       videoTrack.onended = function () {
-        self.prepareRecording(recordedChunks);
+        if (self.isRecording) {
+          self.stopScreenRecording();
+        } else {
+          self.releaseCapture();
+        }
       };
     }
 

From b30b0d41f7e04fb322f9c776f45783af30b4895d Mon Sep 17 00:00:00 2001
From: Lukas Boehler <lukas@gleap.io>
Date: Wed, 30 Sep 2026 21:49:10 -0400
Subject: [PATCH 02/11] feat: session replay can pause while a capture request
 records the page

rrweb records one session per page. A capture request's page recording (phones and tablets, where
there is no screen capture) pauses the running replay, keeping its buffer, and resumes it in a new
checkpoint afterwards. A config apply meanwhile doesn't restart it; stop() ends the pause.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/GleapReplayRecorder.js | 64 +++++++++++++++++++++++++++++++++++---
 1 file changed, 59 insertions(+), 5 deletions(-)

diff --git a/src/GleapReplayRecorder.js b/src/GleapReplayRecorder.js
index 058357e1..94a29b9b 100644
--- a/src/GleapReplayRecorder.js
+++ b/src/GleapReplayRecorder.js
@@ -66,6 +66,8 @@ export default class GleapReplayRecorder {
   forcedCheckoutTimeout = undefined;
   stopFunction = undefined;
   customOptions = {};
+  // A capture request's page recording runs rrweb itself, and rrweb records one session per page.
+  pausedForCapture = false;
 
   // GleapReplayRecorder singleton
   static instance;
@@ -93,13 +95,33 @@ export default class GleapReplayRecorder {
 
   /**
    * Start replays
+   * @param {boolean} keepBuffer Continue the current buffer in a new checkpoint (after a capture
+   * request's page recording) instead of starting over.
    * @returns
    */
-  start() {
-    this.stop();
+  start(keepBuffer = false) {
+    if (keepBuffer && this.startDate) {
+      if (this.stopFunction) {
+        try {
+          this.stopFunction();
+        } catch (e) {}
+        this.stopFunction = undefined;
+      }
+      // The new recording opens with its own full snapshot, so it is a checkpoint of its own.
+      if (this.segments[this.segments.length - 1].length > 0) {
+        this.segments.push([]);
+        this.segmentSizes.push(0);
+        this.incrementalSize = 0;
+        while (this.segments.length > MAX_CHECKPOINTS) {
+          this.dropOldestSegment();
+        }
+      }
+    } else {
+      this.stop();
 
-    this.startDate = Date.now();
-    this.resetBuffer();
+      this.startDate = Date.now();
+      this.resetBuffer();
+    }
 
     var options = {
       inlineStylesheet: true,
@@ -190,7 +212,7 @@ export default class GleapReplayRecorder {
    * far.
    */
   startIfNotRunning() {
-    if (this.stopFunction) {
+    if (this.stopFunction || this.pausedForCapture) {
       return;
     }
 
@@ -207,10 +229,42 @@ export default class GleapReplayRecorder {
       this.stopFunction = undefined;
     }
 
+    this.pausedForCapture = false;
     this.startDate = undefined;
     this.resetBuffer();
   }
 
+  /**
+   * Pauses a running replay while a capture request records the page (see pausedForCapture). The
+   * buffer is kept.
+   * @returns {boolean} whether it was running (and so must be resumed)
+   */
+  pauseForCapture() {
+    if (!this.stopFunction) {
+      return false;
+    }
+    try {
+      this.stopFunction();
+    } catch (e) {}
+    this.stopFunction = undefined;
+    clearTimeout(this.forcedCheckoutTimeout);
+    this.forcedCheckoutTimeout = undefined;
+    this.pausedForCapture = true;
+    return true;
+  }
+
+  /**
+   * Continues a replay paused by pauseForCapture, in a new checkpoint. Nothing when it was stopped
+   * in the meantime.
+   */
+  resumeAfterCapture() {
+    if (!this.pausedForCapture) {
+      return;
+    }
+    this.pausedForCapture = false;
+    this.start(true);
+  }
+
   resetBuffer() {
     clearTimeout(this.forcedCheckoutTimeout);
     this.forcedCheckoutTimeout = undefined;

From 493114eefec1f9deb5de09f049f525db14e5b00d Mon Sep 17 00:00:00 2001
From: Lukas Boehler <lukas@gleap.io>
Date: Wed, 30 Sep 2026 21:49:24 -0400
Subject: [PATCH 03/11] =?UTF-8?q?feat:=20capture=20requests=20=E2=80=94=20?=
 =?UTF-8?q?screenshots,=20screen=20recordings=20and=20log=20requests=20on?=
 =?UTF-8?q?=20the=20web?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The host side of the capture-requests contract (Messenger bridge §7, web capture §8, logs §9,
APIs §10):

- capture-capabilities after every Messenger ping (screenshot, recording via getDisplayMedia or
  rrweb, microphone per flowConfig.capture.allowMicrophone); everything false with
  Gleap.setCaptureEnabled(false). The SDK websocket announces &caps=capture.screenshot,
  capture.recording,capture.logs (only what is enabled).
- capture-start hides the widget without closing it and shows a capture bar in the page: shadow
  DOM under one 0x0 rr-block/gl-block host, max z-index, draggable on desktop, a bottom sheet
  with safe-area padding on phones, keyboard accessible, reduced-motion aware, labels from the
  Messenger with English fallbacks. capture-state reports every step; Cancel releases the request.
- Screenshots: desktop Chromium grabs one frame of the current tab (preferCurrentTab; ImageCapture,
  MediaStreamTrackProcessor, <video> fallback; Gleap UI hidden, tracks stopped right away);
  otherwise, or when the tab capture is declined or fails, the visible viewport is rendered in the
  browser (modern-screenshot 4.7.0, ~8.6 kB gzip). Both paint black boxes over blocked and masked
  elements, private fields (password, OTP, card), payment frames and capture.maskSelectors, also
  in shadow roots and same-origin frames; the DOM render also hides them in the clone. JPEG 0.85,
  long edge <= 2560, sent as capture-image; capture-editor opens the widget full screen.
- Recordings: getDisplayMedia + MediaRecorder (MP4 avc3/avc1, then WebM; 2.5 Mbps; 1 s chunks;
  optional microphone; auto-stop at maxDurationSec; "Stop sharing" = Stop) or, without
  getDisplayMedia, an rrweb page recording with every input masked, uploaded as a webReplay-shaped
  page-recording.json. Preview (Send / Retake / Cancel), upload with progress, /complete with a
  timeline digest (clicks, inputs without values, navigations, console errors, failed requests).
- attachLogs: the log bundle (screenshot: at capture time; recording: its window) goes to /logs,
  gzipped with CompressionStream when available.
- Log requests (capture-request on the SDK websocket): claim, bundle from the existing collectors
  (replay only when asked and web replays are on), gzip, POST /logs; once per request id;
  answered "unsupported" with Gleap.setRemoteLogCollectionEnabled(false) or backgroundLogs off.
- Multi-page sites: the bar (or "Recording stopped because the page changed") comes back after
  a page load in the same tab; the result then opens the conversation.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 index.d.ts                    |   12 +
 package-lock.json             |    7 +
 package.json                  |    1 +
 src/Gleap.js                  |   30 +
 src/GleapCaptureApi.js        |  321 ++++++++++
 src/GleapCaptureManager.js    | 1039 +++++++++++++++++++++++++++++++++
 src/GleapCaptureRecorder.js   |  750 ++++++++++++++++++++++++
 src/GleapCaptureScreenshot.js | 1016 ++++++++++++++++++++++++++++++++
 src/GleapCaptureSettings.js   |  157 +++++
 src/GleapCaptureUI.js         |  560 ++++++++++++++++++
 src/GleapClickListener.js     |   11 +-
 src/GleapFrameManager.js      |   83 ++-
 src/GleapStreamedEvent.js     |   18 +-
 src/UI.js                     |   30 +
 14 files changed, 4031 insertions(+), 4 deletions(-)
 create mode 100644 src/GleapCaptureApi.js
 create mode 100644 src/GleapCaptureManager.js
 create mode 100644 src/GleapCaptureRecorder.js
 create mode 100644 src/GleapCaptureScreenshot.js
 create mode 100644 src/GleapCaptureSettings.js
 create mode 100644 src/GleapCaptureUI.js

diff --git a/index.d.ts b/index.d.ts
index e7cdfab5..f10cadaf 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -409,6 +409,18 @@ export namespace Gleap {
     }[];
     errorHandler?: (error: Error) => void;
   }): void;
+  /**
+   * Enables or disables screenshots and screen recordings that teammates, AI agents or workflows
+   * ask the customer for in the widget (default: enabled). While disabled, the widget offers
+   * uploading a file instead. Can be called before initialize.
+   */
+  function setCaptureEnabled(enabled: boolean): void;
+  /**
+   * Enables or disables sending logs when teammates, AI agents or workflows request them
+   * (default: enabled). Only data a bug report carries is sent: console and network logs, custom
+   * data, environment data and events. Can be called before initialize.
+   */
+  function setRemoteLogCollectionEnabled(enabled: boolean): void;
 }
 export default Gleap;
 
diff --git a/package-lock.json b/package-lock.json
index 1161fbca..d9a7e712 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "@floating-ui/dom": "^1.7.5",
         "@rrweb/packer": "^2.1.0",
         "@rrweb/record": "^2.1.0",
+        "modern-screenshot": "4.7.0",
         "unique-selector": "^0.5.0"
       },
       "devDependencies": {
@@ -10711,6 +10712,12 @@
         "node": ">=10"
       }
     },
+    "node_modules/modern-screenshot": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/modern-screenshot/-/modern-screenshot-4.7.0.tgz",
+      "integrity": "sha512-9YxN+ddPSMMlhylOv25VHzXrl9u67QRxoh7+SEewGtgUw7t6hHTrjptSDJUSne9oG4Xk/h2cwG15nIt4Hc9ujg==",
+      "license": "MIT"
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
diff --git a/package.json b/package.json
index dca337e8..8e404237 100644
--- a/package.json
+++ b/package.json
@@ -86,6 +86,7 @@
     "@floating-ui/dom": "^1.7.5",
     "@rrweb/packer": "^2.1.0",
     "@rrweb/record": "^2.1.0",
+    "modern-screenshot": "4.7.0",
     "unique-selector": "^0.5.0"
   }
 }
diff --git a/src/Gleap.js b/src/Gleap.js
index 99d73287..99f9f505 100755
--- a/src/Gleap.js
+++ b/src/Gleap.js
@@ -7,6 +7,7 @@ import GleapAgentToolManager from './GleapAgentToolManager';
 import GleapAiChatbarManager from './GleapAiChatbarManager';
 import GleapAudioManager from './GleapAudioManager';
 import GleapBannerManager from './GleapBannerManager';
+import GleapCaptureManager from './GleapCaptureManager';
 import { registerGleapChecklist } from './GleapChecklist';
 import GleapClickListener from './GleapClickListener';
 import GleapConfigManager from './GleapConfigManager';
@@ -279,6 +280,11 @@ class Gleap {
               // Check for URL params.
               Gleap.checkForUrlParams();
 
+              // A capture request that was in progress before this page load.
+              try {
+                GleapCaptureManager.getInstance().resumeFromStorage();
+              } catch (exp) {}
+
               // Notify event.
               GleapEventManager.notifyEvent('initialized');
             });
@@ -354,6 +360,9 @@ class Gleap {
    * @returns
    */
   static destroy() {
+    try {
+      GleapCaptureManager.getInstance().destroy();
+    } catch (exp) {}
     GleapReplayRecorder.getInstance().stop();
     GleapStreamedEvent.getInstance().stop();
     GleapFrameManager.getInstance().destroy();
@@ -541,6 +550,26 @@ class Gleap {
     GleapReplayRecorder.getInstance().setOptions(options);
   }
 
+  /**
+   * Enables or disables screenshots and screen recordings that teammates, AI agents or workflows
+   * ask the customer for in the widget (default: enabled). While disabled, the widget offers
+   * uploading a file instead. Can be called before initialize.
+   * @param {boolean} enabled
+   */
+  static setCaptureEnabled(enabled) {
+    GleapCaptureManager.getInstance().setCaptureEnabled(enabled);
+  }
+
+  /**
+   * Enables or disables sending logs when teammates, AI agents or workflows request them (default:
+   * enabled). Only data a bug report carries is sent (console and network logs, custom data,
+   * environment data, events). Can be called before initialize.
+   * @param {boolean} enabled
+   */
+  static setRemoteLogCollectionEnabled(enabled) {
+    GleapCaptureManager.getInstance().setRemoteLogCollectionEnabled(enabled);
+  }
+
   /**
    * Closes any open Gleap dialogs.
    * @param {boolean} resetRoutes
@@ -1667,6 +1696,7 @@ export {
   GleapAiChatbarManager,
   GleapAudioManager,
   GleapBannerManager,
+  GleapCaptureManager,
   GleapClickListener,
   GleapConfigManager,
   GleapConsoleLogManager,
diff --git a/src/GleapCaptureApi.js b/src/GleapCaptureApi.js
new file mode 100644
index 00000000..5cf87779
--- /dev/null
+++ b/src/GleapCaptureApi.js
@@ -0,0 +1,321 @@
+import {
+  GleapConfigManager,
+  GleapConsoleLogManager,
+  GleapCustomDataManager,
+  GleapMetaDataManager,
+  GleapNetworkIntercepter,
+  GleapReplayRecorder,
+  GleapSession,
+  GleapStreamedEvent,
+} from './Gleap';
+import { CAPTURE_PLATFORM, CAPTURE_SDK_TYPE, getSdkVersion } from './GleapCaptureSettings';
+
+// Server calls and the log bundle of capture requests (contract §4 and §9). Every call resolves
+// (never rejects) with { status, data }; status 0 means no answer.
+
+// The /logs body limit is 20 MB; stay below it.
+const MAX_LOGS_BODY_BYTES = 19 * 1024 * 1024;
+// Log entries this long before a recording started still count as part of it.
+const RECORDING_LOG_LEAD_MS = 10 * 1000;
+const JSON_TIMEOUT_MS = 30 * 1000;
+
+const DEFAULT_INCLUDE = {
+  consoleLog: true,
+  networkLogs: true,
+  customData: true,
+  metaData: true,
+  customEventLog: true,
+  replays: false,
+};
+
+const capturePath = (requestId, action) =>
+  '/v3/shared/capture-requests/' + encodeURIComponent(String(requestId)) + '/' + action;
+
+const parseJson = (text) => {
+  try {
+    return text ? JSON.parse(text) : null;
+  } catch (exp) {
+    return null;
+  }
+};
+
+/**
+ * Sends a JSON (or pre-encoded) body to the API with the session headers.
+ * @returns {Promise<{status: number, data: any}>}
+ */
+export const sendCaptureApiRequest = (method, path, body, options = {}) =>
+  new Promise((resolve) => {
+    let settled = false;
+    const done = (status, data) => {
+      if (!settled) {
+        settled = true;
+        resolve({ status, data });
+      }
+    };
+
+    try {
+      const session = GleapSession.getInstance();
+      const xhr = new XMLHttpRequest();
+      xhr.open(method, session.apiUrl + path);
+      xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
+      if (options.gzip) {
+        xhr.setRequestHeader('Content-Encoding', 'gzip');
+      }
+      session.injectSession(xhr);
+      xhr.timeout = options.timeoutMs || JSON_TIMEOUT_MS;
+      xhr.onreadystatechange = () => {
+        if (xhr.readyState === 4) {
+          done(xhr.status, parseJson(xhr.responseText));
+        }
+      };
+      xhr.onerror = () => done(0, null);
+      xhr.ontimeout = () => done(0, null);
+      xhr.send(body === undefined ? null : body);
+    } catch (exp) {
+      done(0, null);
+    }
+  });
+
+const postJson = (requestId, action, payload) =>
+  sendCaptureApiRequest('POST', capturePath(requestId, action), JSON.stringify(payload || {}));
+
+export const claimCaptureRequest = (requestId, payload) => postJson(requestId, 'claim', payload);
+
+/**
+ * Reports a non-final outcome ('declined' | 'unsupported' | 'failed' | 'released'); releases the claim.
+ */
+export const reportCaptureEvent = (requestId, type, reason) => {
+  const payload = { type };
+  if (reason) {
+    payload.reason = String(reason).slice(0, 200);
+  }
+  return postJson(requestId, 'event', payload);
+};
+
+export const completeCaptureRequest = (requestId, payload) => postJson(requestId, 'complete', payload);
+
+/**
+ * JSON text of a value; the custom data (set by the host app, may hold cycles) is dropped when the
+ * whole value cannot be serialized.
+ */
+const stringifyBundle = (bundle) => {
+  try {
+    return JSON.stringify(bundle);
+  } catch (exp) {
+    const withoutCustomData = Object.assign({}, bundle);
+    delete withoutCustomData.customData;
+    return JSON.stringify(withoutCustomData);
+  }
+};
+
+const gzipText = (text) => {
+  try {
+    if (
+      typeof CompressionStream === 'function' &&
+      typeof Response === 'function' &&
+      typeof Blob === 'function' &&
+      typeof Blob.prototype.stream === 'function'
+    ) {
+      const stream = new Blob([text], { type: 'application/json' }).stream().pipeThrough(new CompressionStream('gzip'));
+      return new Response(stream).blob().catch(() => null);
+    }
+  } catch (exp) {}
+  return Promise.resolve(null);
+};
+
+const encodeJson = (value) => {
+  const text = stringifyBundle(value);
+  return gzipText(text).then((gzipped) =>
+    gzipped ? { body: gzipped, gzip: true, size: gzipped.size } : { body: text, gzip: false, size: text.length }
+  );
+};
+
+/**
+ * The request body for a log bundle: gzip when the browser can (CompressionStream), plain JSON
+ * otherwise. A bundle over the size limit goes without its replay; null when it is still too large.
+ * @returns {Promise<{body: Blob|string, gzip: boolean, size: number}|null>}
+ */
+export const encodeLogsBundle = (bundle) =>
+  Promise.resolve()
+    .then(() => encodeJson(bundle))
+    .then((encoded) => {
+      if (encoded.size <= MAX_LOGS_BODY_BYTES) {
+        return encoded;
+      }
+      if (!bundle.webReplay) {
+        return null;
+      }
+      const withoutReplay = Object.assign({}, bundle);
+      delete withoutReplay.webReplay;
+      return encodeJson(withoutReplay).then((smaller) => (smaller.size <= MAX_LOGS_BODY_BYTES ? smaller : null));
+    });
+
+export const postCaptureLogs = (requestId, bundle) =>
+  encodeLogsBundle(bundle).then((encoded) =>
+    encoded
+      ? sendCaptureApiRequest('POST', capturePath(requestId, 'logs'), encoded.body, { gzip: encoded.gzip })
+      : { status: 413, data: null }
+  );
+
+/**
+ * Uploads one file to /uploads/attachments (the endpoint the Messenger uses for attachments).
+ * @param {File|Blob} file
+ * @param {function(number)} onProgress 0..1
+ * @returns {{promise: Promise<string>, abort: function}} resolves with the file URL
+ */
+export const uploadCaptureFile = (file, fileName, onProgress) => {
+  let xhr = null;
+  const promise = new Promise((resolve, reject) => {
+    try {
+      const session = GleapSession.getInstance();
+      const formData = new FormData();
+      formData.append('file', file, fileName);
+      xhr = new XMLHttpRequest();
+      xhr.open('POST', session.apiUrl + '/uploads/attachments');
+      session.injectSession(xhr);
+      if (xhr.upload && onProgress) {
+        xhr.upload.onprogress = (event) => {
+          if (event.lengthComputable && event.total > 0) {
+            onProgress(Math.min(1, event.loaded / event.total));
+          }
+        };
+      }
+      xhr.onreadystatechange = () => {
+        if (xhr.readyState !== 4) {
+          return;
+        }
+        const data = parseJson(xhr.responseText);
+        if (xhr.status === 200 && data && Array.isArray(data.fileUrls) && typeof data.fileUrls[0] === 'string') {
+          resolve(data.fileUrls[0]);
+        } else {
+          reject(new Error(xhr.status === 413 ? 'file-too-large' : 'upload-failed-' + xhr.status));
+        }
+      };
+      xhr.onerror = () => reject(new Error('upload-failed'));
+      xhr.onabort = () => reject(new Error('upload-aborted'));
+      xhr.send(formData);
+    } catch (exp) {
+      reject(exp);
+    }
+  });
+  return {
+    promise,
+    abort: () => {
+      try {
+        if (xhr) {
+          xhr.abort();
+        }
+      } catch (exp) {}
+    },
+  };
+};
+
+export const normalizeInclude = (include) => {
+  const result = Object.assign({}, DEFAULT_INCLUDE);
+  if (include && typeof include === 'object') {
+    Object.keys(DEFAULT_INCLUDE).forEach((key) => {
+      if (typeof include[key] === 'boolean') {
+        result[key] = include[key];
+      }
+    });
+  }
+  return result;
+};
+
+const entryTime = (entry) => {
+  if (!entry) {
+    return NaN;
+  }
+  const value = entry.date;
+  if (value instanceof Date) {
+    return value.getTime();
+  }
+  return typeof value === 'string' || typeof value === 'number' ? new Date(value).getTime() : NaN;
+};
+
+const withinWindow = (entries, from, to) => {
+  if (!Array.isArray(entries)) {
+    return [];
+  }
+  if (!from) {
+    return entries.slice();
+  }
+  return entries.filter((entry) => {
+    const time = entryTime(entry);
+    // Entries without a usable date stay in.
+    return isNaN(time) || (time >= from && time <= to);
+  });
+};
+
+const webReplaysEnabled = () => {
+  try {
+    const flowConfig = GleapConfigManager.getInstance().getFlowConfig();
+    return !!(flowConfig && flowConfig.enableWebReplays);
+  } catch (exp) {
+    return false;
+  }
+};
+
+/**
+ * The log bundle for /logs (contract §9): the data a bug report carries, from the same collectors,
+ * limited to what `include` asks for. Never takes a screenshot. With a recording window only the
+ * entries of that window (and a short lead-in) are included.
+ * @param {{include?: object, windowStart?: number, windowEnd?: number, deviceId?: string}} options
+ */
+export const buildLogsBundle = (options = {}) => {
+  const include = normalizeInclude(options.include);
+  const now = Date.now();
+  const windowEnd = options.windowEnd || now;
+  const filterFrom = options.windowStart ? options.windowStart - RECORDING_LOG_LEAD_MS : 0;
+  const bundle = {};
+
+  const collect = (key, read) => {
+    try {
+      bundle[key] = read();
+    } catch (exp) {}
+  };
+
+  if (include.consoleLog) {
+    collect('consoleLog', () => withinWindow(GleapConsoleLogManager.getInstance().getLogs(), filterFrom, windowEnd));
+  }
+  if (include.networkLogs) {
+    collect('networkLogs', () => withinWindow(GleapNetworkIntercepter.getInstance().getRequests(), filterFrom, windowEnd));
+  }
+  if (include.customData) {
+    collect('customData', () => GleapCustomDataManager.getInstance().getCustomData());
+  }
+  if (include.metaData) {
+    collect('metaData', () => GleapMetaDataManager.getInstance().getMetaData());
+  }
+  if (include.customEventLog) {
+    collect('customEventLog', () => withinWindow(GleapStreamedEvent.getInstance().getEventArray(), filterFrom, windowEnd));
+  }
+  if (include.replays && webReplaysEnabled()) {
+    try {
+      const replay = GleapReplayRecorder.getInstance().getReplayData();
+      if (replay && replay.startDate && Array.isArray(replay.events) && replay.events.length > 0) {
+        bundle.webReplay = replay;
+      }
+    } catch (exp) {}
+  }
+
+  let windowStart = options.windowStart;
+  if (!windowStart) {
+    try {
+      windowStart = GleapMetaDataManager.getInstance().sessionStart.getTime();
+    } catch (exp) {
+      windowStart = now;
+    }
+  }
+
+  bundle.capturedAt = new Date(now).toISOString();
+  bundle.windowStart = new Date(windowStart).toISOString();
+  bundle.windowEnd = new Date(windowEnd).toISOString();
+  bundle.platform = CAPTURE_PLATFORM;
+  bundle.sdkType = CAPTURE_SDK_TYPE;
+  bundle.sdkVersion = getSdkVersion();
+  if (options.deviceId) {
+    bundle.deviceId = options.deviceId;
+  }
+  return bundle;
+};
diff --git a/src/GleapCaptureManager.js b/src/GleapCaptureManager.js
new file mode 100644
index 00000000..45dff7a9
--- /dev/null
+++ b/src/GleapCaptureManager.js
@@ -0,0 +1,1039 @@
+import Gleap, {
+  GleapConfigManager,
+  GleapFrameManager,
+  GleapReplayRecorder,
+  GleapSession,
+  GleapTranslationManager,
+} from './Gleap';
+import {
+  buildLogsBundle,
+  claimCaptureRequest,
+  completeCaptureRequest,
+  normalizeInclude,
+  postCaptureLogs,
+  reportCaptureEvent,
+  uploadCaptureFile,
+} from './GleapCaptureApi';
+import { CaptureTimeline, DisplayRecording, PageRecording, requestDisplayStream } from './GleapCaptureRecorder';
+import { captureScreenshot, requestTabStream, stopStream } from './GleapCaptureScreenshot';
+import {
+  CAPTURE_MAX_RECORDING_SEC,
+  CAPTURE_PLATFORM,
+  CAPTURE_SDK_TYPE,
+  getCaptureConfig,
+  getRecordingMethod,
+  getSdkVersion,
+  hasDisplayMedia,
+  hasUserMedia,
+  isCaptureSupported,
+  isDesktopChromium,
+  isRemoteLogCollectionEnabled,
+  setCaptureEnabled,
+  setRemoteLogCollectionEnabled,
+} from './GleapCaptureSettings';
+import GleapCaptureUI, { resolveCaptureLabels } from './GleapCaptureUI';
+
+// Capture requests on the web (contract §7): the Messenger asks for a screenshot or a recording
+// (capture-start), this page shows the capture bar, captures, and hands the result back (screenshot:
+// capture-image, annotated and sent by the Messenger) or uploads and completes it itself
+// (recordings). Log requests arrive on the SDK websocket and are answered without the customer.
+// Idle until a request arrives: no timers, listeners or UI.
+
+const STORAGE_KEY = 'gleap-capture-session';
+const DEVICE_KEY = 'gleap-capture-device';
+// A bar restored after a page load is dropped when the request is older than this.
+const RESUME_MAX_AGE_MS = 30 * 60 * 1000;
+const WATCHDOG_MS = 1000;
+const MAX_HANDLED_LOG_REQUESTS = 100;
+// Gleap UI hidden while the customer captures the page (the widget itself is hidden by the frame manager).
+const HIDDEN_GLEAP_UI_SELECTOR = '.bb-feedback-button, .gleap-notification-container, .gleap-chatbar';
+
+const readStorage = (key) => {
+  try {
+    return window.sessionStorage.getItem(key);
+  } catch (exp) {
+    return null;
+  }
+};
+
+const writeStorage = (key, value) => {
+  try {
+    if (value === null) {
+      window.sessionStorage.removeItem(key);
+    } else {
+      window.sessionStorage.setItem(key, value);
+    }
+  } catch (exp) {}
+};
+
+const randomHex = (bytes) => {
+  try {
+    const values = new Uint8Array(bytes);
+    window.crypto.getRandomValues(values);
+    return Array.prototype.map.call(values, (value) => (value < 16 ? '0' : '') + value.toString(16)).join('');
+  } catch (exp) {
+    let text = '';
+    for (let i = 0; i < bytes * 2; i++) {
+      text += Math.floor(Math.random() * 16).toString(16);
+    }
+    return text;
+  }
+};
+
+const clampDuration = (value) => {
+  const seconds = parseInt(value, 10);
+  if (isNaN(seconds)) {
+    return 60;
+  }
+  return Math.max(5, Math.min(CAPTURE_MAX_RECORDING_SEC, seconds));
+};
+
+// A short reason for capture-state / the event log: "NotAllowedError", "upload-failed-500", ...
+const errorReason = (error) => {
+  if (!error) {
+    return 'unknown';
+  }
+  const name = error.name && error.name !== 'Error' ? error.name : '';
+  const message = error.message ? String(error.message) : name ? '' : String(error);
+  return (name && message ? name + ': ' + message : name || message).slice(0, 120);
+};
+
+const isOk = (status) => status >= 200 && status < 300;
+
+let sessionCounter = 0;
+
+export default class GleapCaptureManager {
+  session = null;
+  ui = null;
+  watchdog = null;
+  hiddenElements = [];
+  handledLogRequests = [];
+  logsPostedFor = [];
+  deviceId = null;
+
+  // GleapCaptureManager singleton
+  static instance;
+  static getInstance() {
+    if (!this.instance) {
+      this.instance = new GleapCaptureManager();
+    }
+    return this.instance;
+  }
+
+  /**
+   * Gleap.setCaptureEnabled: false reports no capture capabilities (the Messenger offers uploads
+   * only) and ends a capture in progress.
+   */
+  setCaptureEnabled(enabled) {
+    setCaptureEnabled(enabled);
+    if (!enabled) {
+      writeStorage(STORAGE_KEY, null);
+      if (this.session) {
+        this.cancelSession(this.session, 'disabled');
+      }
+    }
+    // Only a Messenger that is already connected needs to hear it; it asks again on every load.
+    try {
+      if (GleapFrameManager.instance) {
+        GleapFrameManager.instance.sendCaptureCapabilities();
+      }
+    } catch (exp) {}
+  }
+
+  /**
+   * Gleap.setRemoteLogCollectionEnabled: false answers log requests with "unsupported".
+   */
+  setRemoteLogCollectionEnabled(enabled) {
+    setRemoteLogCollectionEnabled(enabled);
+  }
+
+  getDeviceId() {
+    if (this.deviceId) {
+      return this.deviceId;
+    }
+    let deviceId = readStorage(DEVICE_KEY);
+    if (!deviceId || !/^web-[0-9a-f]{32}$/.test(deviceId)) {
+      deviceId = 'web-' + randomHex(16);
+      writeStorage(DEVICE_KEY, deviceId);
+    }
+    this.deviceId = deviceId;
+    return deviceId;
+  }
+
+  privacyOptions() {
+    try {
+      return GleapReplayRecorder.getInstance().customOptions || {};
+    } catch (exp) {
+      return {};
+    }
+  }
+
+  maskSelectors() {
+    const selectors = getCaptureConfig().maskSelectors;
+    return Array.isArray(selectors) ? selectors.filter((selector) => typeof selector === 'string') : [];
+  }
+
+  // ----- Messenger bridge -------------------------------------------------------------------------
+
+  /**
+   * capture-start, capture-cancel, capture-editor and capture-done from the Messenger.
+   */
+  handleMessengerMessage(message) {
+    try {
+      const data = message && message.data && typeof message.data === 'object' ? message.data : {};
+      switch (message && message.name) {
+        case 'capture-start':
+          this.onCaptureStart(data);
+          break;
+        case 'capture-cancel':
+          this.onCaptureCancel(data);
+          break;
+        case 'capture-editor':
+          this.setEditorOpen(!!data.open);
+          break;
+        case 'capture-done':
+          this.onCaptureDone(data);
+          break;
+        default:
+          break;
+      }
+    } catch (exp) {}
+  }
+
+  sendState(requestId, state, extra) {
+    try {
+      GleapFrameManager.getInstance().sendMessage({
+        name: 'capture-state',
+        data: Object.assign({ requestId, state }, extra),
+      });
+    } catch (exp) {}
+  }
+
+  setEditorOpen(open) {
+    try {
+      GleapFrameManager.getInstance().setCaptureEditorOpen(open);
+    } catch (exp) {}
+  }
+
+  onCaptureStart(data) {
+    const requestId = typeof data.requestId === 'string' ? data.requestId : null;
+    const kind = data.kind === 'screenshot' || data.kind === 'recording' ? data.kind : null;
+    if (!requestId || !kind) {
+      return;
+    }
+    if (!isCaptureSupported()) {
+      this.sendState(requestId, 'unsupported', { error: 'capture-disabled' });
+      reportCaptureEvent(requestId, 'unsupported', 'capture-disabled');
+      return;
+    }
+
+    const current = this.session;
+    if (current) {
+      // Nothing interrupts an upload that is already on its way.
+      if (current.phase === 'uploading') {
+        return;
+      }
+      if (current.requestId !== requestId) {
+        this.cancelSession(current, 'replaced', true);
+      } else {
+        this.endSession(current, { restore: false });
+      }
+    }
+
+    this.setEditorOpen(false);
+    this.startSession({
+      requestId,
+      kind,
+      ticketShareToken: typeof data.ticketShareToken === 'string' ? data.ticketShareToken : null,
+      options: data.options,
+      labels: data.labels,
+      resumed: false,
+      phase: 'bar',
+    });
+  }
+
+  onCaptureCancel(data) {
+    const session = this.session;
+    if (session && (!data.requestId || data.requestId === session.requestId)) {
+      this.endSession(session, { restore: true });
+      this.sendState(session.requestId, 'cancelled');
+    }
+    this.setEditorOpen(false);
+  }
+
+  onCaptureDone(data) {
+    const session = this.session;
+    if (session && (!data.requestId || data.requestId === session.requestId)) {
+      this.endSession(session, { restore: true });
+    }
+    this.setEditorOpen(false);
+  }
+
+  /**
+   * The widget iframe went away (Gleap.destroy, a language change): a capture in progress reopens the
+   * conversation when it is done.
+   */
+  onWidgetDestroyed() {
+    const session = this.session;
+    if (!session) {
+      return;
+    }
+    if (session.phase === 'editor') {
+      this.endSession(session, { restore: false });
+      return;
+    }
+    session.resumed = true;
+  }
+
+  destroy() {
+    if (this.session) {
+      this.endSession(this.session, { restore: false });
+    }
+    this.setEditorOpen(false);
+  }
+
+  // ----- Session ----------------------------------------------------------------------------------
+
+  normalizeOptions(options) {
+    const source = options && typeof options === 'object' ? options : {};
+    return {
+      annotate: source.annotate !== false,
+      maxDurationSec: clampDuration(source.maxDurationSec),
+      audio: source.audio === true,
+      attachLogs: source.attachLogs !== false,
+      include: normalizeInclude(source.include),
+    };
+  }
+
+  startSession(params) {
+    const flowConfig = GleapConfigManager.getInstance().getFlowConfig() || {};
+    const session = {
+      key: ++sessionCounter,
+      requestId: params.requestId,
+      kind: params.kind,
+      ticketShareToken: params.ticketShareToken || null,
+      options: this.normalizeOptions(params.options),
+      labels: resolveCaptureLabels(params.labels),
+      rawLabels: params.labels && typeof params.labels === 'object' ? params.labels : null,
+      resumed: !!params.resumed,
+      phase: params.phase,
+      interrupted: params.phase === 'interrupted',
+      micOn: false,
+      startedAt: Date.now(),
+      lastTick: -1,
+      lastProgressSent: 0,
+    };
+    this.session = session;
+
+    let rtl = false;
+    try {
+      rtl = !!GleapTranslationManager.getInstance().isRTLLayout;
+    } catch (exp) {}
+    this.ui = new GleapCaptureUI({
+      labels: params.labels,
+      primaryColor: flowConfig.color,
+      rtl,
+      onAction: (action) => this.onUiAction(session, action),
+    });
+    this.ui.autoFocus = !session.resumed;
+
+    if (!session.resumed) {
+      GleapFrameManager.getInstance().setCaptureHidden(true);
+    }
+    this.hideGleapUi();
+    this.startWatchdog();
+    this.renderBar(session);
+    this.persist(session);
+    this.sendState(session.requestId, 'bar');
+  }
+
+  renderBar(session) {
+    if (!this.ui) {
+      return;
+    }
+    if (session.kind === 'screenshot') {
+      this.ui.showScreenshotBar(false);
+    } else {
+      this.ui.showRecordBar({ busy: false, mic: this.micState(session), interrupted: session.interrupted });
+    }
+  }
+
+  micState(session) {
+    const allowed =
+      session.options.audio === true &&
+      getCaptureConfig().allowMicrophone === true &&
+      getRecordingMethod() === 'display' &&
+      hasUserMedia();
+    return allowed ? { available: true, on: session.micOn } : null;
+  }
+
+  /**
+   * Ends a session: stops recordings and uploads, removes the capture UI and shows Gleap's UI again.
+   * restore: show the widget again (or, after a page load, open the conversation).
+   */
+  endSession(session, { restore }) {
+    if (!session || this.session !== session) {
+      return;
+    }
+    this.session = null;
+    try {
+      if (session.recording) {
+        session.recording.cancel();
+      }
+    } catch (exp) {}
+    try {
+      if (session.timeline) {
+        session.timeline.stop();
+      }
+    } catch (exp) {}
+    try {
+      if (session.upload) {
+        session.upload.abort();
+      }
+    } catch (exp) {}
+    session.recording = null;
+    session.timeline = null;
+    session.upload = null;
+    session.result = null;
+
+    this.stopWatchdog();
+    if (this.ui) {
+      this.ui.destroy();
+      this.ui = null;
+    }
+    this.showGleapUi();
+    writeStorage(STORAGE_KEY, null);
+
+    if (restore) {
+      this.restoreWidget(session);
+    } else if (!session.resumed) {
+      try {
+        GleapFrameManager.getInstance().setCaptureHidden(false, false);
+      } catch (exp) {}
+    }
+  }
+
+  restoreWidget(session) {
+    try {
+      if (session.resumed) {
+        this.openConversation(session.ticketShareToken);
+      } else {
+        GleapFrameManager.getInstance().setCaptureHidden(false, true);
+      }
+    } catch (exp) {}
+  }
+
+  openConversation(shareToken) {
+    if (shareToken) {
+      Gleap.openConversation(shareToken, true);
+    } else {
+      Gleap.open();
+    }
+  }
+
+  /**
+   * The customer cancelled (or the capture can't go on): releases the request.
+   */
+  cancelSession(session, reason, silent) {
+    // Once the screenshot is in the Messenger's editor, the request is the Messenger's to finish.
+    const handedOver = session.phase === 'editor';
+    this.endSession(session, { restore: !silent });
+    if (!handedOver) {
+      this.sendState(session.requestId, 'cancelled');
+      reportCaptureEvent(session.requestId, 'released', reason);
+    }
+  }
+
+  /**
+   * The capture failed ('failed'), was declined ('declined') or can't run here ('unsupported'): the
+   * Messenger falls back to uploading a file.
+   */
+  failSession(session, state, reason) {
+    if (!session || this.session !== session) {
+      return;
+    }
+    this.endSession(session, { restore: true });
+    this.sendState(session.requestId, state, { error: reason });
+    reportCaptureEvent(session.requestId, state === 'declined' || state === 'unsupported' ? state : 'failed', reason);
+  }
+
+  onUiAction(session, action) {
+    if (this.session !== session) {
+      return;
+    }
+    try {
+      switch (action) {
+        case 'capture':
+          this.takeScreenshot(session);
+          break;
+        case 'start':
+          this.startRecording(session);
+          break;
+        case 'stop':
+          if (session.recording) {
+            session.recording.stop();
+          }
+          break;
+        case 'mic':
+          this.toggleMicrophone(session);
+          break;
+        case 'send':
+          this.sendRecording(session);
+          break;
+        case 'retake':
+          this.retakeRecording(session);
+          break;
+        case 'cancel':
+          this.cancelSession(session, 'cancelled');
+          break;
+        default:
+          break;
+      }
+    } catch (error) {
+      this.failSession(session, 'failed', errorReason(error));
+    }
+  }
+
+  // ----- Screenshot -------------------------------------------------------------------------------
+
+  takeScreenshot(session) {
+    if (session.kind !== 'screenshot' || session.phase !== 'bar') {
+      return;
+    }
+    const config = getCaptureConfig();
+    // Called inside the Capture click: the tab capture needs that user activation.
+    const useTab = config.webScreenshotMethod !== 'dom-only' && isDesktopChromium() && hasDisplayMedia();
+    const streamPromise = useTab ? requestTabStream() : null;
+
+    session.phase = 'capturing';
+    this.ui.showScreenshotBar(true);
+    this.sendState(session.requestId, 'capturing');
+
+    // The logs as they are at the moment of the capture.
+    let logsBundle = null;
+    if (session.options.attachLogs && this.logsPostedFor.indexOf(session.requestId) === -1) {
+      try {
+        logsBundle = buildLogsBundle({ include: session.options.include, deviceId: this.getDeviceId() });
+      } catch (exp) {}
+    }
+
+    const active = () => this.session === session;
+    captureScreenshot({
+      streamPromise,
+      privacyOptions: this.privacyOptions(),
+      maskSelectors: this.maskSelectors(),
+      isActive: active,
+      setUiHidden: (hidden) => {
+        if (active()) {
+          this.setCaptureUiHidden(hidden);
+        }
+      },
+    })
+      .then((image) => {
+        if (active()) {
+          this.onScreenshotReady(session, image, logsBundle);
+        }
+      })
+      .catch((error) => {
+        if (active()) {
+          this.failSession(session, 'failed', errorReason(error));
+        }
+      });
+  }
+
+  onScreenshotReady(session, image, logsBundle) {
+    const frameManager = GleapFrameManager.getInstance();
+    const message = {
+      name: 'capture-image',
+      data: {
+        requestId: session.requestId,
+        dataUrl: image.dataUrl,
+        width: image.width,
+        height: image.height,
+        method: image.method,
+        platform: CAPTURE_PLATFORM,
+        sdkType: CAPTURE_SDK_TYPE,
+        sdkVersion: getSdkVersion(),
+      },
+    };
+
+    // The Messenger's editor takes it from here (capture-editor, capture-done).
+    session.phase = 'editor';
+    writeStorage(STORAGE_KEY, null);
+    this.stopWatchdog();
+    if (this.ui) {
+      this.ui.destroy();
+      this.ui = null;
+    }
+    this.showGleapUi();
+
+    if (session.resumed) {
+      // After a page load the Messenger is not open yet: it opens on the conversation and then gets
+      // the image (queued until it is ready).
+      this.openConversation(session.ticketShareToken);
+      frameManager.sendMessage(message, true);
+    } else {
+      frameManager.sendMessage(message, true);
+      frameManager.setCaptureHidden(false, true);
+    }
+
+    if (logsBundle) {
+      this.postLogs(session.requestId, logsBundle);
+    }
+  }
+
+  postLogs(requestId, bundle) {
+    if (this.logsPostedFor.indexOf(requestId) !== -1) {
+      return;
+    }
+    this.logsPostedFor.push(requestId);
+    if (this.logsPostedFor.length > MAX_HANDLED_LOG_REQUESTS) {
+      this.logsPostedFor.shift();
+    }
+    postCaptureLogs(requestId, bundle).catch(() => {});
+  }
+
+  // Hides the capture bar and Gleap's UI for the moment a tab frame is taken.
+  setCaptureUiHidden(hidden) {
+    if (this.ui) {
+      this.ui.setVisible(!hidden);
+    }
+    if (hidden) {
+      this.hideGleapUi();
+    }
+  }
+
+  // ----- Recording --------------------------------------------------------------------------------
+
+  startRecording(session) {
+    if (session.kind !== 'recording' || (session.phase !== 'bar' && session.phase !== 'interrupted')) {
+      return;
+    }
+    const active = () => this.session === session;
+    const maxDurationSec = session.options.maxDurationSec;
+    const onTick = (seconds) => {
+      if (!active() || seconds === session.lastTick) {
+        return;
+      }
+      session.lastTick = seconds;
+      if (this.ui) {
+        this.ui.updateTimer(seconds);
+      }
+      this.sendState(session.requestId, 'recording', { elapsedSec: seconds });
+    };
+    const onStop = (result) => {
+      if (active()) {
+        this.onRecordingStopped(session, result);
+      }
+    };
+    const onError = (error) => {
+      if (active()) {
+        this.failSession(session, 'failed', errorReason(error));
+      }
+    };
+
+    if (getRecordingMethod() === 'display') {
+      // Called inside the Start click: getDisplayMedia needs that user activation.
+      const streamPromise = requestDisplayStream(isDesktopChromium());
+      session.phase = 'starting';
+      this.ui.showRecordBar({ busy: true, mic: this.micState(session), interrupted: session.interrupted });
+      streamPromise
+        .then((stream) => {
+          if (!active()) {
+            stopStream(stream);
+            return null;
+          }
+          const recording = new DisplayRecording({ maxDurationSec, onTick, onStop, onError });
+          session.recording = recording;
+          return recording.start(stream, !!this.micState(session) && session.micOn).then((started) => {
+            if (active()) {
+              this.onRecordingStarted(session, recording.startedAt, started.hasMicrophone);
+            } else {
+              recording.cancel();
+            }
+          });
+        })
+        .catch((error) => {
+          if (!active()) {
+            return;
+          }
+          const declined = error && (error.name === 'NotAllowedError' || error.name === 'SecurityError');
+          this.failSession(session, declined ? 'declined' : 'failed', errorReason(error));
+        });
+      return;
+    }
+
+    const recording = new PageRecording({
+      maxDurationSec,
+      privacyOptions: this.privacyOptions(),
+      maskSelectors: this.maskSelectors(),
+      onTick,
+      onStop,
+      onError,
+    });
+    session.recording = recording;
+    recording.start();
+    this.onRecordingStarted(session, recording.startedAt, false);
+  }
+
+  onRecordingStarted(session, startedAt, hasMicrophone) {
+    session.phase = 'recording';
+    session.interrupted = false;
+    session.hasMicrophone = !!hasMicrophone;
+    session.lastTick = 0;
+    session.timeline = new CaptureTimeline({
+      privacyOptions: this.privacyOptions(),
+      isOwnElement: (node) => !!(this.ui && this.ui.isOwnElement(node)),
+    });
+    session.timeline.start(startedAt);
+    this.ui.showRecordingBar({
+      mic: session.hasMicrophone ? { available: true, on: session.micOn } : null,
+      maxSec: session.options.maxDurationSec,
+    });
+    this.persist(session);
+    this.sendState(session.requestId, 'recording', { elapsedSec: 0 });
+  }
+
+  // Before the start it decides whether the microphone is asked for; while recording it mutes.
+  toggleMicrophone(session) {
+    if (session.phase !== 'recording' && session.phase !== 'bar' && session.phase !== 'interrupted') {
+      return;
+    }
+    session.micOn = !session.micOn;
+    if (session.phase === 'recording' && session.recording && session.recording.setMicrophoneEnabled) {
+      session.recording.setMicrophoneEnabled(session.micOn);
+    }
+    this.ui.setMicOn(session.micOn);
+  }
+
+  onRecordingStopped(session, result) {
+    session.recording = null;
+    session.result = result;
+    session.timelineEntries = session.timeline ? session.timeline.stop(result.endedAt) : [];
+    const interactions = session.timeline ? session.timeline.interactions : 0;
+    session.timeline = null;
+    session.phase = 'preview';
+    this.ui.showPreview({
+      video: result.type.indexOf('video/') === 0 ? result.blob : null,
+      durationMs: result.durationMs,
+      interactions,
+    });
+    this.persist(session);
+    this.sendState(session.requestId, 'preview');
+  }
+
+  retakeRecording(session) {
+    if (session.phase !== 'preview') {
+      return;
+    }
+    session.result = null;
+    session.uploadedUrl = null;
+    session.timelineEntries = null;
+    session.phase = 'bar';
+    session.interrupted = false;
+    this.renderBar(session);
+    this.persist(session);
+    this.sendState(session.requestId, 'bar');
+  }
+
+  sendRecording(session) {
+    const result = session.result;
+    if (session.phase !== 'preview' || !result) {
+      return;
+    }
+    const active = () => this.session === session;
+    session.phase = 'uploading';
+    this.ui.setUploading(0);
+    this.sendState(session.requestId, 'uploading', { progress: 0 });
+
+    // Logs for the recording window go along (in parallel with the upload).
+    if (session.options.attachLogs) {
+      try {
+        this.postLogs(
+          session.requestId,
+          buildLogsBundle({
+            include: session.options.include,
+            windowStart: result.startedAt,
+            windowEnd: result.endedAt,
+            deviceId: this.getDeviceId(),
+          })
+        );
+      } catch (exp) {}
+    }
+
+    const onProgress = (progress) => {
+      if (!active()) {
+        return;
+      }
+      if (this.ui) {
+        this.ui.setUploading(progress);
+      }
+      const now = Date.now();
+      if (now - session.lastProgressSent > 250 || progress >= 1) {
+        session.lastProgressSent = now;
+        this.sendState(session.requestId, 'uploading', { progress: Math.round(progress * 100) / 100 });
+      }
+    };
+
+    let uploaded;
+    if (session.uploadedUrl) {
+      uploaded = Promise.resolve(session.uploadedUrl);
+    } else {
+      session.upload = uploadCaptureFile(result.blob, result.fileName, onProgress);
+      uploaded = session.upload.promise;
+    }
+
+    uploaded
+      .then((url) => {
+        if (!active()) {
+          return null;
+        }
+        session.upload = null;
+        session.uploadedUrl = url;
+        const file = {
+          url,
+          name: result.fileName,
+          type: result.type,
+          size: result.blob.size,
+          durationMs: result.durationMs,
+        };
+        if (result.width > 0 && result.height > 0) {
+          file.width = result.width;
+          file.height = result.height;
+        }
+        return completeCaptureRequest(session.requestId, {
+          files: [file],
+          method: result.method,
+          platform: CAPTURE_PLATFORM,
+          sdkType: CAPTURE_SDK_TYPE,
+          sdkVersion: getSdkVersion(),
+          deviceId: this.getDeviceId(),
+          annotations: [],
+          timeline: session.timelineEntries || [],
+          recordingStartedAt: new Date(result.startedAt).toISOString(),
+          recordingEndedAt: new Date(result.endedAt).toISOString(),
+        }).then((response) => {
+          if (!active()) {
+            return;
+          }
+          if (isOk(response.status)) {
+            this.endSession(session, { restore: true });
+            this.sendState(session.requestId, 'done');
+          } else if (response.status === 409 || response.status === 410) {
+            // Answered on another device, or withdrawn / expired meanwhile.
+            this.endSession(session, { restore: true });
+            this.sendState(session.requestId, 'failed', {
+              error: response.status === 409 ? 'already-completed' : 'request-closed',
+            });
+          } else {
+            this.onUploadFailed(session, 'complete-' + response.status);
+          }
+        });
+      })
+      .catch((error) => {
+        if (active()) {
+          this.onUploadFailed(session, errorReason(error));
+        }
+      });
+  }
+
+  onUploadFailed(session, reason) {
+    session.upload = null;
+    session.phase = 'preview';
+    if (this.ui) {
+      this.ui.setPreviewError(session.labels.failed);
+    }
+    this.sendState(session.requestId, 'preview', { error: reason });
+  }
+
+  // ----- Gleap UI, watchdog, page loads -----------------------------------------------------------
+
+  hideGleapUi() {
+    try {
+      const elements = document.querySelectorAll(HIDDEN_GLEAP_UI_SELECTOR);
+      for (let i = 0; i < elements.length; i++) {
+        const element = elements[i];
+        if (this.hiddenElements.indexOf(element) === -1) {
+          this.hiddenElements.push(element);
+        }
+        element.style.setProperty('visibility', 'hidden', 'important');
+      }
+    } catch (exp) {}
+  }
+
+  showGleapUi() {
+    this.hiddenElements.forEach((element) => {
+      try {
+        element.style.removeProperty('visibility');
+      } catch (exp) {}
+    });
+    this.hiddenElements = [];
+  }
+
+  // While a capture UI is up: keeps it attached (pages that replace the body) and Gleap's UI hidden.
+  startWatchdog() {
+    this.stopWatchdog();
+    this.watchdog = setInterval(() => {
+      try {
+        if (this.ui) {
+          this.ui.ensureAttached();
+        }
+        this.hideGleapUi();
+      } catch (exp) {}
+    }, WATCHDOG_MS);
+  }
+
+  stopWatchdog() {
+    if (this.watchdog) {
+      clearInterval(this.watchdog);
+      this.watchdog = null;
+    }
+  }
+
+  /**
+   * Keeps the request across page loads of this tab (multi-page sites): the bar comes back after
+   * the next load; a recording that was running shows "Recording stopped because the page changed".
+   */
+  persist(session) {
+    if (this.session !== session) {
+      return;
+    }
+    let phase = null;
+    if (session.phase === 'bar' || session.phase === 'capturing' || session.phase === 'starting') {
+      phase = session.interrupted ? 'recording' : 'bar';
+    } else if (
+      session.kind === 'recording' &&
+      ['recording', 'preview', 'uploading', 'interrupted'].indexOf(session.phase) !== -1
+    ) {
+      phase = 'recording';
+    }
+    if (!phase) {
+      writeStorage(STORAGE_KEY, null);
+      return;
+    }
+    let gleapId = null;
+    let sdkKey = null;
+    try {
+      const gleapSession = GleapSession.getInstance();
+      gleapId = gleapSession.session ? gleapSession.session.gleapId : null;
+      sdkKey = gleapSession.sdkKey;
+    } catch (exp) {}
+    try {
+      writeStorage(
+        STORAGE_KEY,
+        JSON.stringify({
+          v: 1,
+          requestId: session.requestId,
+          kind: session.kind,
+          ticketShareToken: session.ticketShareToken,
+          options: session.options,
+          labels: session.rawLabels,
+          phase,
+          gleapId,
+          sdkKey,
+          at: Date.now(),
+        })
+      );
+    } catch (exp) {}
+  }
+
+  /**
+   * After a page load: shows the bar of a capture that was in progress on the previous page.
+   */
+  resumeFromStorage() {
+    try {
+      if (this.session) {
+        return;
+      }
+      const raw = readStorage(STORAGE_KEY);
+      if (!raw) {
+        return;
+      }
+      let stored = null;
+      try {
+        stored = JSON.parse(raw);
+      } catch (exp) {}
+      const gleapSession = GleapSession.getInstance();
+      const valid =
+        stored &&
+        stored.v === 1 &&
+        typeof stored.requestId === 'string' &&
+        (stored.kind === 'screenshot' || stored.kind === 'recording') &&
+        typeof stored.at === 'number' &&
+        Date.now() - stored.at < RESUME_MAX_AGE_MS &&
+        gleapSession.session &&
+        stored.gleapId === gleapSession.session.gleapId &&
+        stored.sdkKey === gleapSession.sdkKey;
+      if (!valid || !isCaptureSupported()) {
+        writeStorage(STORAGE_KEY, null);
+        return;
+      }
+      this.startSession({
+        requestId: stored.requestId,
+        kind: stored.kind,
+        ticketShareToken: stored.ticketShareToken,
+        options: stored.options,
+        labels: stored.labels,
+        resumed: true,
+        phase: stored.kind === 'recording' && stored.phase === 'recording' ? 'interrupted' : 'bar',
+      });
+    } catch (exp) {}
+  }
+
+  // ----- Background log requests (SDK websocket) --------------------------------------------------
+
+  /**
+   * A `capture-request` pushed on the SDK websocket. Only kind 'logs' comes this way; it is answered
+   * once per request id on this page, whatever the widget shows.
+   */
+  handleServerRequest(data) {
+    try {
+      if (!data || data.kind !== 'logs' || typeof data.id !== 'string') {
+        return;
+      }
+      const requestId = data.id;
+      if (this.handledLogRequests.indexOf(requestId) !== -1) {
+        return;
+      }
+      this.handledLogRequests.push(requestId);
+      if (this.handledLogRequests.length > MAX_HANDLED_LOG_REQUESTS) {
+        this.handledLogRequests.shift();
+      }
+      if (data.expiresAt && Date.parse(data.expiresAt) < Date.now()) {
+        return;
+      }
+      const options = data.options && typeof data.options === 'object' ? data.options : {};
+      GleapConfigManager.getInstance().onConfigLoaded(() => {
+        this.collectLogs(requestId, options).catch(() => {});
+      });
+    } catch (exp) {}
+  }
+
+  collectLogs(requestId, options) {
+    if (!isRemoteLogCollectionEnabled()) {
+      return reportCaptureEvent(requestId, 'unsupported', 'disabled-by-app');
+    }
+    if (getCaptureConfig().backgroundLogs === false) {
+      return reportCaptureEvent(requestId, 'unsupported', 'disabled-by-project');
+    }
+
+    const deviceId = this.getDeviceId();
+    return claimCaptureRequest(requestId, {
+      deviceId,
+      platform: CAPTURE_PLATFORM,
+      sdkType: CAPTURE_SDK_TYPE,
+      sdkVersion: getSdkVersion(),
+    }).then((claim) => {
+      // 410: already final. Another tab or device claimed it a moment ago: that one answers.
+      if (!isOk(claim.status) || (claim.data && claim.data.claimedElsewhere)) {
+        return null;
+      }
+      return Promise.resolve()
+        .then(() => postCaptureLogs(requestId, buildLogsBundle({ include: options.include, deviceId })))
+        .then(
+          (response) => (isOk(response.status) ? null : reportCaptureEvent(requestId, 'failed', 'logs-' + response.status)),
+          (error) => reportCaptureEvent(requestId, 'failed', errorReason(error))
+        );
+    });
+  }
+}
diff --git a/src/GleapCaptureRecorder.js b/src/GleapCaptureRecorder.js
new file mode 100644
index 00000000..79feeb90
--- /dev/null
+++ b/src/GleapCaptureRecorder.js
@@ -0,0 +1,750 @@
+import { record } from '@rrweb/record';
+import { pack } from '@rrweb/packer';
+import { GleapConsoleLogManager, GleapNetworkIntercepter, GleapReplayRecorder } from './Gleap';
+import { isMobile } from './GleapHelper';
+import { isBlockedElement, isMaskMarker } from './GleapInputMasking';
+import { approximateSize } from './GleapReplayRecorder';
+
+// Recordings for capture requests (contract §8): the screen through getDisplayMedia + MediaRecorder
+// on desktop browsers, a page recording (rrweb) where there is no getDisplayMedia (phones, tablets).
+// A timeline digest of what happened goes along with both.
+
+const VIDEO_BITS_PER_SECOND = 2500000;
+const AUDIO_BITS_PER_SECOND = 64000;
+const TIMESLICE_MS = 1000;
+// A page recording stops by itself before it gets unreasonably large (approximate JSON size).
+const MAX_PAGE_RECORDING_SIZE = 25 * 1024 * 1024;
+const MAX_TIMELINE_ENTRIES = 200;
+
+// Contract order, with H.264 as avc3 ahead of avc1: avc3 carries its parameters in-band, so a
+// resolution change while recording (a resized window, the browser's sharing bar appearing) keeps
+// the file valid; Chrome reports an error for avc1 then. With a microphone the same containers are
+// tried with an audio codec first.
+const VIDEO_MIME_TYPES = [
+  'video/mp4;codecs=avc3',
+  'video/mp4;codecs=avc1',
+  'video/mp4',
+  'video/webm;codecs=vp9',
+  'video/webm;codecs=vp8',
+  'video/webm',
+];
+const AUDIO_VIDEO_MIME_TYPES = [
+  'video/mp4;codecs=avc3,mp4a.40.2',
+  'video/mp4;codecs=avc1,mp4a.40.2',
+  'video/mp4',
+  'video/webm;codecs=vp9,opus',
+  'video/webm;codecs=vp8,opus',
+  'video/webm',
+];
+
+export const pickRecorderMimeType = (withAudio) => {
+  const candidates = withAudio ? AUDIO_VIDEO_MIME_TYPES.concat(VIDEO_MIME_TYPES) : VIDEO_MIME_TYPES;
+  try {
+    if (typeof MediaRecorder !== 'undefined' && typeof MediaRecorder.isTypeSupported === 'function') {
+      for (let i = 0; i < candidates.length; i++) {
+        if (MediaRecorder.isTypeSupported(candidates[i])) {
+          return candidates[i];
+        }
+      }
+    }
+  } catch (exp) {}
+  return '';
+};
+
+const stopTracks = (stream) => {
+  try {
+    if (stream) {
+      stream.getTracks().forEach((track) => {
+        try {
+          track.stop();
+        } catch (exp) {}
+      });
+    }
+  } catch (exp) {}
+};
+
+/**
+ * Asks for the screen to record. Must run synchronously inside the Start click (user activation).
+ * Chromium offers the current tab first; Firefox and Safari show their own picker.
+ */
+export const requestDisplayStream = (chromium) => {
+  const video = { frameRate: { ideal: 15, max: 30 } };
+  const options = { video, audio: false };
+  if (chromium) {
+    video.displaySurface = 'browser';
+    options.preferCurrentTab = true;
+    options.selfBrowserSurface = 'include';
+    options.surfaceSwitching = 'include';
+  }
+  let promise;
+  try {
+    promise = navigator.mediaDevices.getDisplayMedia(options);
+  } catch (error) {
+    promise = Promise.reject(error);
+  }
+  promise.catch(() => {});
+  return promise;
+};
+
+/**
+ * A screen recording from a getDisplayMedia stream. Stops on stop(), at maxDurationSec, and when
+ * the browser's "Stop sharing" ends the track; every track, timer and listener is released on
+ * every path.
+ */
+export class DisplayRecording {
+  stream = null;
+  micStream = null;
+  videoTrack = null;
+  recorder = null;
+  chunks = [];
+  mimeType = '';
+  timer = null;
+  startedAt = 0;
+  endedAt = 0;
+  settings = {};
+  finished = false;
+  recorderStopped = false;
+  stopTimeout = null;
+  onEndedBound = null;
+
+  /**
+   * @param {{maxDurationSec: number, onTick: function(number), onStop: function(object), onError: function(Error)}} options
+   */
+  constructor(options) {
+    this.options = options;
+  }
+
+  /**
+   * @param {MediaStream} stream from requestDisplayStream
+   * @param {boolean} withMicrophone
+   * @returns {Promise<{hasMicrophone: boolean}>}
+   */
+  start(stream, withMicrophone) {
+    this.stream = stream;
+    this.videoTrack = stream.getVideoTracks()[0] || null;
+    if (!this.videoTrack) {
+      return Promise.reject(new Error('no-video-track'));
+    }
+    try {
+      this.settings = this.videoTrack.getSettings ? this.videoTrack.getSettings() : {};
+    } catch (exp) {
+      this.settings = {};
+    }
+
+    const microphone = withMicrophone
+      ? navigator.mediaDevices
+          .getUserMedia({
+            audio: { echoCancellation: true, noiseSuppression: true, autoGainControl: true },
+            video: false,
+          })
+          // Recording goes on without sound.
+          .catch(() => null)
+      : Promise.resolve(null);
+
+    return microphone.then((micStream) => {
+      this.micStream = micStream;
+      const micTrack = micStream ? micStream.getAudioTracks()[0] || null : null;
+      if (this.finished || !this.videoTrack || this.videoTrack.readyState === 'ended') {
+        this.cleanup();
+        throw new Error('stopped-before-start');
+      }
+
+      const tracks = [this.videoTrack];
+      if (micTrack) {
+        tracks.push(micTrack);
+      }
+      this.mimeType = pickRecorderMimeType(!!micTrack);
+      const recorderOptions = { videoBitsPerSecond: VIDEO_BITS_PER_SECOND };
+      if (this.mimeType) {
+        recorderOptions.mimeType = this.mimeType;
+      }
+      if (micTrack) {
+        recorderOptions.audioBitsPerSecond = AUDIO_BITS_PER_SECOND;
+      }
+      try {
+        this.recorder = new MediaRecorder(new MediaStream(tracks), recorderOptions);
+      } catch (error) {
+        this.cleanup();
+        throw error;
+      }
+      this.recorder.ondataavailable = (event) => {
+        if (event.data && event.data.size > 0) {
+          this.chunks.push(event.data);
+        }
+      };
+      this.recorder.onstop = () => {
+        this.recorderStopped = true;
+        this.finish();
+      };
+      this.recorder.onerror = (event) => this.fail((event && event.error) || new Error('recorder-error'));
+
+      // The browser's "Stop sharing" ends the track: that is a Stop.
+      this.onEndedBound = () => this.stop();
+      this.videoTrack.addEventListener('ended', this.onEndedBound);
+
+      try {
+        this.recorder.start(TIMESLICE_MS);
+      } catch (error) {
+        this.cleanup();
+        throw error;
+      }
+      this.startedAt = Date.now();
+      const maxMs = this.options.maxDurationSec * 1000;
+      this.timer = setInterval(() => {
+        const elapsed = Date.now() - this.startedAt;
+        try {
+          this.options.onTick(Math.floor(elapsed / 1000));
+        } catch (exp) {}
+        if (elapsed >= maxMs) {
+          this.stop();
+        }
+      }, 250);
+      return { hasMicrophone: !!micTrack };
+    });
+  }
+
+  setMicrophoneEnabled(enabled) {
+    try {
+      if (this.micStream) {
+        this.micStream.getAudioTracks().forEach((track) => {
+          track.enabled = !!enabled;
+        });
+      }
+    } catch (exp) {}
+  }
+
+  stop() {
+    if (this.finished || this.stopTimeout) {
+      return;
+    }
+    this.endedAt = this.endedAt || Date.now();
+    this.clearTimer();
+    if (!this.recorder || this.recorderStopped) {
+      this.finish();
+      return;
+    }
+    try {
+      if (this.recorder.state !== 'inactive') {
+        this.recorder.stop();
+      }
+    } catch (exp) {}
+    // Ends the browser's sharing indicator and the microphone right away.
+    this.releaseTracks();
+    // The last chunk and then 'stop' follow (also when the recorder stopped by itself because the
+    // shared screen ended); finish then. Just in case 'stop' never comes:
+    this.stopTimeout = setTimeout(() => this.finish(), 3000);
+  }
+
+  finish() {
+    if (this.finished) {
+      return;
+    }
+    this.finished = true;
+    this.endedAt = this.endedAt || Date.now();
+    const type = (this.recorder && this.recorder.mimeType) || this.mimeType || 'video/webm';
+    const baseType = type.indexOf('mp4') !== -1 ? 'video/mp4' : 'video/webm';
+    const blob = new Blob(this.chunks, { type: baseType });
+    this.chunks = [];
+    this.cleanup();
+    const result = {
+      blob,
+      type: baseType,
+      fileName: 'screen-recording.' + (baseType === 'video/mp4' ? 'mp4' : 'webm'),
+      startedAt: this.startedAt,
+      endedAt: this.endedAt,
+      durationMs: Math.max(0, this.endedAt - this.startedAt),
+      width: this.settings.width,
+      height: this.settings.height,
+      // 'tab' only for a browser tab; windows and screens (and browsers that don't say) are 'display'.
+      method: this.settings.displaySurface === 'browser' ? 'tab' : 'display',
+    };
+    if (blob.size === 0) {
+      this.options.onError(new Error('empty-recording'));
+      return;
+    }
+    this.options.onStop(result);
+  }
+
+  fail(error) {
+    if (this.finished) {
+      return;
+    }
+    this.finished = true;
+    this.chunks = [];
+    this.cleanup();
+    try {
+      this.options.onError(error);
+    } catch (exp) {}
+  }
+
+  /**
+   * Discards the recording.
+   */
+  cancel() {
+    this.finished = true;
+    this.chunks = [];
+    try {
+      if (this.recorder && this.recorder.state !== 'inactive') {
+        this.recorder.stop();
+      }
+    } catch (exp) {}
+    this.cleanup();
+  }
+
+  clearTimer() {
+    if (this.timer) {
+      clearInterval(this.timer);
+      this.timer = null;
+    }
+    if (this.stopTimeout) {
+      clearTimeout(this.stopTimeout);
+      this.stopTimeout = null;
+    }
+  }
+
+  releaseTracks() {
+    if (this.videoTrack && this.onEndedBound) {
+      try {
+        this.videoTrack.removeEventListener('ended', this.onEndedBound);
+      } catch (exp) {}
+    }
+    this.onEndedBound = null;
+    stopTracks(this.stream);
+    stopTracks(this.micStream);
+  }
+
+  cleanup() {
+    this.clearTimer();
+    this.releaseTracks();
+    if (this.recorder) {
+      this.recorder.ondataavailable = null;
+      this.recorder.onstop = null;
+      this.recorder.onerror = null;
+    }
+    this.recorder = null;
+    this.stream = null;
+    this.micStream = null;
+    this.videoTrack = null;
+  }
+}
+
+const combineSelectors = (selectors) =>
+  selectors
+    .filter((selector) => {
+      if (typeof selector !== 'string' || !selector.trim()) {
+        return false;
+      }
+      try {
+        document.createDocumentFragment().querySelector(selector);
+        return true;
+      } catch (exp) {
+        return false;
+      }
+    })
+    .join(', ') || null;
+
+/**
+ * A page recording (rrweb) with every input masked and without canvas. The file has exactly the
+ * shape of a bug report's webReplay, so the dashboard's replay player shows it.
+ */
+export class PageRecording {
+  events = [];
+  size = 0;
+  stopFunction = null;
+  timer = null;
+  startedAt = 0;
+  endedAt = 0;
+  finished = false;
+  resumeReplay = false;
+  width = 0;
+  height = 0;
+
+  /**
+   * @param {{maxDurationSec: number, privacyOptions: object, maskSelectors: string[], onTick: function(number), onStop: function(object), onError: function(Error)}} options
+   */
+  constructor(options) {
+    this.options = options;
+  }
+
+  start() {
+    const privacyOptions = this.options.privacyOptions || {};
+    // rrweb records one session per page: the session replay pauses meanwhile, keeping its buffer.
+    this.resumeReplay = GleapReplayRecorder.getInstance().pauseForCapture();
+    this.startedAt = Date.now();
+    this.width = window.innerWidth;
+    this.height = window.innerHeight;
+
+    try {
+      this.stopFunction = record({
+        emit: (event) => {
+          if (this.finished) {
+            return;
+          }
+          this.events.push(event);
+          this.size += approximateSize(event);
+          if (this.size > MAX_PAGE_RECORDING_SIZE) {
+            setTimeout(() => this.stop(), 0);
+          }
+        },
+        maskAllInputs: true,
+        blockClass: privacyOptions.blockClass || 'rr-block',
+        blockSelector: combineSelectors(
+          ['.gl-block', privacyOptions.blockSelector].concat(this.options.maskSelectors || [])
+        ),
+        maskTextClass: privacyOptions.maskTextClass || 'rr-mask',
+        maskTextSelector: combineSelectors(['.gl-mask', privacyOptions.maskTextSelector]),
+        inlineStylesheet: true,
+        recordCanvas: false,
+        collectFonts: false,
+        recordCrossOriginIframes: false,
+        slimDOMOptions: {
+          script: true,
+          comment: true,
+          headFavicon: true,
+          headWhitespace: true,
+          headMetaDescKeywords: true,
+          headMetaSocial: true,
+          headMetaRobots: true,
+          headMetaHttpEquiv: true,
+          headMetaVerification: true,
+        },
+        dataURLOptions: { quality: 0.7 },
+        sampling: {
+          scroll: 150,
+          input: 'last',
+          mouseInteraction: {
+            MouseUp: false,
+            MouseDown: false,
+            Click: true,
+            ContextMenu: true,
+            DblClick: true,
+            Focus: true,
+            Blur: true,
+            TouchStart: true,
+            TouchEnd: false,
+          },
+        },
+      });
+    } catch (error) {
+      this.cleanup();
+      throw error;
+    }
+    if (!this.stopFunction) {
+      this.cleanup();
+      throw new Error('page-recording-unavailable');
+    }
+
+    const maxMs = this.options.maxDurationSec * 1000;
+    this.timer = setInterval(() => {
+      const elapsed = Date.now() - this.startedAt;
+      try {
+        this.options.onTick(Math.floor(elapsed / 1000));
+      } catch (exp) {}
+      if (elapsed >= maxMs) {
+        this.stop();
+      }
+    }, 250);
+  }
+
+  stop() {
+    if (this.finished) {
+      return;
+    }
+    this.finished = true;
+    this.endedAt = Date.now();
+    this.cleanup();
+
+    let events = this.events;
+    let packed = false;
+    try {
+      events = this.events.map((event) => pack(event));
+      packed = true;
+    } catch (exp) {
+      events = this.events;
+    }
+    this.events = [];
+    const replay = {
+      startDate: this.startedAt,
+      events,
+      packed,
+      baseUrl: window.location.origin,
+      width: this.width,
+      height: this.height,
+      isMobile: isMobile(),
+      type: 'rrweb',
+    };
+    let blob;
+    try {
+      blob = new Blob([JSON.stringify(replay)], { type: 'application/json' });
+    } catch (error) {
+      this.options.onError(error);
+      return;
+    }
+    this.options.onStop({
+      blob,
+      type: 'application/json',
+      fileName: 'page-recording.json',
+      startedAt: this.startedAt,
+      endedAt: this.endedAt,
+      durationMs: Math.max(0, this.endedAt - this.startedAt),
+      width: this.width,
+      height: this.height,
+      method: 'rrweb',
+    });
+  }
+
+  cancel() {
+    this.finished = true;
+    this.events = [];
+    this.cleanup();
+  }
+
+  cleanup() {
+    if (this.timer) {
+      clearInterval(this.timer);
+      this.timer = null;
+    }
+    if (this.stopFunction) {
+      try {
+        this.stopFunction();
+      } catch (exp) {}
+      this.stopFunction = null;
+    }
+    if (this.resumeReplay) {
+      this.resumeReplay = false;
+      try {
+        GleapReplayRecorder.getInstance().resumeAfterCapture();
+      } catch (exp) {}
+    }
+  }
+}
+
+const ACTIONABLE_SELECTOR =
+  'a, button, input, select, textarea, label, summary, [role="button"], [role="link"], [role="menuitem"], [role="tab"], [role="checkbox"], [role="option"], [role="switch"]';
+
+const collapse = (text, max) => {
+  const value = String(text || '')
+    .replace(/\s+/g, ' ')
+    .trim();
+  return value.length > max ? value.slice(0, max - 1) + '…' : value;
+};
+
+const isPrivate = (element, privacyOptions) => {
+  let current = element;
+  while (current) {
+    if (current.nodeType === 1) {
+      try {
+        if (isBlockedElement(current, privacyOptions) || isMaskMarker(current, privacyOptions)) {
+          return true;
+        }
+      } catch (exp) {}
+    }
+    current = current.parentElement || (current.parentNode && current.parentNode.host) || null;
+  }
+  return false;
+};
+
+const fieldName = (field) =>
+  collapse(
+    field.getAttribute('aria-label') ||
+      (field.labels && field.labels[0] && field.labels[0].textContent) ||
+      field.getAttribute('placeholder') ||
+      field.getAttribute('name') ||
+      field.id ||
+      field.type ||
+      field.tagName.toLowerCase(),
+    60
+  );
+
+/**
+ * How an element is named in the timeline: its role plus a short accessible name. Never a field
+ * value, and no text inside masked or blocked elements.
+ */
+export const describeElement = (element, privacyOptions) => {
+  if (!element || element.nodeType !== 1) {
+    return 'element';
+  }
+  const tag = element.tagName.toLowerCase();
+  const role = element.getAttribute('role') || (tag === 'a' ? 'link' : tag);
+  if (tag === 'input' || tag === 'select' || tag === 'textarea') {
+    return (
+      (element.type === 'checkbox' || element.type === 'radio' ? element.type : 'field') + ' "' + fieldName(element) + '"'
+    );
+  }
+  if (isPrivate(element, privacyOptions)) {
+    return role;
+  }
+  const name = collapse(
+    element.getAttribute('aria-label') ||
+      element.getAttribute('title') ||
+      element.getAttribute('alt') ||
+      element.textContent,
+    60
+  );
+  return name ? role + ' "' + name + '"' : role;
+};
+
+const pagePath = (href) => {
+  try {
+    const url = new URL(href);
+    return collapse(url.pathname + url.search + url.hash, 150);
+  } catch (exp) {
+    return collapse(href, 150);
+  }
+};
+
+/**
+ * The timeline digest of a recording: clicks, inputs (without values), navigations, console errors
+ * and failed requests, with t in ms since the recording started.
+ */
+export class CaptureTimeline {
+  entries = [];
+  startedAt = 0;
+  listeners = [];
+  urlTimer = null;
+  lastUrl = '';
+  lastInputField = null;
+  lastInputAt = 0;
+
+  constructor({ privacyOptions, isOwnElement }) {
+    this.privacyOptions = privacyOptions || {};
+    this.isOwnElement = isOwnElement || (() => false);
+  }
+
+  add(type, label, at) {
+    if (this.entries.length >= MAX_TIMELINE_ENTRIES) {
+      return;
+    }
+    this.entries.push({ t: Math.max(0, (at || Date.now()) - this.startedAt), type, label: collapse(label, 200) });
+  }
+
+  // The control the event belongs to (through shadow roots), or null.
+  target(event) {
+    try {
+      const path = event.composedPath ? event.composedPath() : [event.target];
+      for (let i = 0; i < path.length; i++) {
+        const node = path[i];
+        if (node && node.nodeType === 1 && node.matches && node.matches(ACTIONABLE_SELECTOR)) {
+          return node;
+        }
+      }
+    } catch (exp) {}
+    return null;
+  }
+
+  start(startedAt) {
+    this.startedAt = startedAt || Date.now();
+    this.lastUrl = window.location.href;
+    const listen = (target, type, handler) => {
+      target.addEventListener(type, handler, { capture: true, passive: true });
+      this.listeners.push(() => target.removeEventListener(type, handler, { capture: true, passive: true }));
+    };
+    listen(document, 'click', (event) => {
+      try {
+        if (this.isOwnElement(event.target)) {
+          return;
+        }
+        const control = this.target(event);
+        // Only controls are named; other elements go by their tag, without their text.
+        const label = control
+          ? describeElement(control, this.privacyOptions)
+          : event.target && event.target.tagName
+            ? event.target.tagName.toLowerCase()
+            : 'page';
+        this.add('click', 'Clicked ' + label);
+      } catch (exp) {}
+    });
+    const onInput = (event) => {
+      try {
+        const field = this.target(event);
+        if (!field || this.isOwnElement(event.target)) {
+          return;
+        }
+        // One entry per field while the customer keeps typing in it.
+        const now = Date.now();
+        if (field === this.lastInputField && now - this.lastInputAt < 5000) {
+          this.lastInputAt = now;
+          return;
+        }
+        this.lastInputField = field;
+        this.lastInputAt = now;
+        this.add(
+          'input',
+          (event.type === 'change' ? 'Changed ' : 'Typed in ') + describeElement(field, this.privacyOptions)
+        );
+      } catch (exp) {}
+    };
+    listen(document, 'input', onInput);
+    listen(document, 'change', onInput);
+    const checkUrl = () => {
+      try {
+        const href = window.location.href;
+        if (href !== this.lastUrl) {
+          this.lastUrl = href;
+          this.add('navigation', 'Navigated to ' + pagePath(href));
+        }
+      } catch (exp) {}
+    };
+    listen(window, 'popstate', checkUrl);
+    listen(window, 'hashchange', checkUrl);
+    this.urlTimer = setInterval(checkUrl, 500);
+  }
+
+  /**
+   * Stops listening and adds the console errors and failed requests of the recording window.
+   * @returns {Array<{t: number, type: string, label: string}>}
+   */
+  stop(endedAt) {
+    const end = endedAt || Date.now();
+    this.listeners.forEach((remove) => {
+      try {
+        remove();
+      } catch (exp) {}
+    });
+    this.listeners = [];
+    if (this.urlTimer) {
+      clearInterval(this.urlTimer);
+      this.urlTimer = null;
+    }
+
+    const inWindow = (date) => {
+      const time = new Date(date).getTime();
+      return time >= this.startedAt && time <= end ? time : null;
+    };
+    try {
+      GleapConsoleLogManager.getInstance()
+        .getLogs()
+        .forEach((entry) => {
+          const time = entry && entry.priority === 'ERROR' ? inWindow(entry.date) : null;
+          if (time !== null) {
+            this.add('error', String(entry.log || '').split('\n')[0], time);
+          }
+        });
+    } catch (exp) {}
+    try {
+      GleapNetworkIntercepter.getInstance()
+        .getRequests()
+        .forEach((request) => {
+          if (!request || request.type === 'RESOURCE') {
+            return;
+          }
+          const status = request.response && request.response.status;
+          const failed = request.success === false || (typeof status === 'number' && status >= 400);
+          const time = failed ? inWindow(request.date) : null;
+          if (time !== null) {
+            this.add(
+              'network-error',
+              (request.type || 'GET') + ' ' + pagePath(request.url) + ' → ' + (status || 'failed'),
+              time
+            );
+          }
+        });
+    } catch (exp) {}
+
+    return this.entries.sort((a, b) => a.t - b.t);
+  }
+
+  get interactions() {
+    return this.entries.filter((entry) => entry.type === 'click' || entry.type === 'input').length;
+  }
+}
diff --git a/src/GleapCaptureScreenshot.js b/src/GleapCaptureScreenshot.js
new file mode 100644
index 00000000..f335a2e5
--- /dev/null
+++ b/src/GleapCaptureScreenshot.js
@@ -0,0 +1,1016 @@
+import { createContext, destroyContext, domToCanvas } from 'modern-screenshot';
+import { GleapNetworkIntercepter } from './Gleap';
+import { getFieldValueMask, isBlockedElement, isMaskMarker } from './GleapInputMasking';
+
+// Screenshots for capture requests (contract §8). Desktop Chromium grabs one frame of the current
+// tab (getDisplayMedia, one click in the browser's share dialog); everything else, and a declined or
+// failed tab capture, renders the DOM in the browser (modern-screenshot). Both paint black boxes over
+// everything masked: blocked and masked elements (rr-/gl- classes and the replay options), form
+// fields whose value is private (GleapInputMasking), payment frames and flowConfig.capture.maskSelectors.
+
+export const MAX_CAPTURE_EDGE = 2560;
+const JPEG_QUALITY = 0.85;
+const TRANSPARENT_GIF = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
+
+// Gleap's own UI never appears in a capture.
+export const GLEAP_UI_SELECTOR = [
+  '.gleap-frame-container',
+  '.bb-feedback-button',
+  '.gleap-notification-container',
+  '.gleap-chatbar',
+  '.gleap-capture-root',
+  '.gleap-image-view',
+  '.bb-capture-editor',
+].join(', ');
+
+// Frames that take card details. Their content is not the page's, so no class or field rule can
+// reach inside; a tab capture would show what the customer typed.
+const PAYMENT_FRAME_HOSTS =
+  /(^|\.)(stripe\.com|stripe\.network|braintreegateway\.com|braintree-api\.com|paypal\.com|adyen\.com|adyenpayments\.com|checkout\.com|squareup\.com|squareupsandbox\.com|recurly\.com|chargebee\.com|paddle\.com|mollie\.com|klarna\.com|worldpay\.com|authorize\.net|razorpay\.com|2checkout\.com|cybersource\.com|spreedly\.com|gocardless\.com|payu\.com|mercadopago\.com|paystack\.co|flutterwave\.com)$/i;
+const PAYMENT_FRAME_LABEL = /card|payment|cvc|cvv|security code|expir|iban/i;
+
+const now = () => (typeof performance !== 'undefined' && performance.now ? performance.now() : Date.now());
+
+const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+
+// Two animation frames (so a style change is painted), or a short timeout in a background tab.
+const nextPaint = () =>
+  new Promise((resolve) => {
+    let done = false;
+    const finish = () => {
+      if (!done) {
+        done = true;
+        resolve();
+      }
+    };
+    setTimeout(finish, 120);
+    try {
+      requestAnimationFrame(() => requestAnimationFrame(finish));
+    } catch (exp) {
+      finish();
+    }
+  });
+
+const withTimeout = (promise, ms, label) =>
+  new Promise((resolve, reject) => {
+    const timer = setTimeout(() => reject(new Error(label || 'timeout')), ms);
+    promise.then(
+      (value) => {
+        clearTimeout(timer);
+        resolve(value);
+      },
+      (error) => {
+        clearTimeout(timer);
+        reject(error);
+      }
+    );
+  });
+
+const cssEscape = (value) => {
+  try {
+    if (typeof CSS !== 'undefined' && typeof CSS.escape === 'function') {
+      return CSS.escape(value);
+    }
+  } catch (exp) {}
+  return String(value).replace(/[^a-zA-Z0-9_-]/g, (char) => '\\' + char);
+};
+
+const validSelector = (selector) => {
+  if (typeof selector !== 'string' || selector.trim().length === 0) {
+    return null;
+  }
+  try {
+    document.createDocumentFragment().querySelector(selector);
+    return selector.trim();
+  } catch (exp) {
+    return null;
+  }
+};
+
+/**
+ * One selector for everything masked as a whole (block and mask markers, the site's replay options
+ * and flowConfig.capture.maskSelectors). Invalid parts are left out.
+ */
+export const buildMaskSelector = (privacyOptions, maskSelectors) => {
+  const options = privacyOptions || {};
+  const parts = ['.rr-block', '.gl-block', '.rr-mask', '.gl-mask'];
+  [options.blockSelector, options.maskTextSelector]
+    .concat(Array.isArray(maskSelectors) ? maskSelectors : [])
+    .forEach((selector) => {
+      const valid = validSelector(selector);
+      if (valid) {
+        parts.push(valid);
+      }
+    });
+  [options.blockClass, options.maskTextClass].forEach((className) => {
+    if (typeof className === 'string' && className.length > 0) {
+      const valid = validSelector('.' + cssEscape(className));
+      if (valid) {
+        parts.push(valid);
+      }
+    }
+  });
+  return parts.join(', ');
+};
+
+const classPatterns = (privacyOptions) => {
+  const options = privacyOptions || {};
+  return [options.blockClass, options.maskTextClass].filter((value) => value && typeof value.test === 'function');
+};
+
+const matchesClassPattern = (element, patterns) => {
+  if (!patterns.length || !element.classList) {
+    return false;
+  }
+  for (let i = 0; i < element.classList.length; i++) {
+    for (let j = 0; j < patterns.length; j++) {
+      if (patterns[j].test(element.classList[i])) {
+        return true;
+      }
+    }
+  }
+  return false;
+};
+
+// Whether the element itself is one of Gleap's UI roots (its ancestors are not tested).
+const isGleapUiRoot = (element) => {
+  try {
+    return !!(element && element.matches && element.matches(GLEAP_UI_SELECTOR));
+  } catch (exp) {
+    return false;
+  }
+};
+
+export const isGleapUiElement = (element) => {
+  try {
+    return !!(element && element.closest && element.closest(GLEAP_UI_SELECTOR));
+  } catch (exp) {
+    return false;
+  }
+};
+
+export const isPaymentFrame = (frame) => {
+  try {
+    const allow = (frame.getAttribute('allow') || '').toLowerCase();
+    if (allow.indexOf('payment') !== -1) {
+      return true;
+    }
+    const label = (frame.getAttribute('title') || '') + ' ' + (frame.getAttribute('name') || '');
+    if (PAYMENT_FRAME_LABEL.test(label)) {
+      return true;
+    }
+    const src = frame.getAttribute('src');
+    if (src) {
+      return PAYMENT_FRAME_HOSTS.test(new URL(src, window.location.href).hostname);
+    }
+  } catch (exp) {}
+  return false;
+};
+
+const isMaskedField = (field, privacyOptions) => {
+  try {
+    return !!getFieldValueMask(field, privacyOptions);
+  } catch (exp) {
+    return true;
+  }
+};
+
+const unionRect = (a, b) => {
+  if (!a || a.width <= 0 || a.height <= 0) {
+    return b;
+  }
+  if (!b || b.width <= 0 || b.height <= 0) {
+    return a;
+  }
+  const left = Math.min(a.left, b.left);
+  const top = Math.min(a.top, b.top);
+  const right = Math.max(a.left + a.width, b.left + b.width);
+  const bottom = Math.max(a.top + a.height, b.top + b.height);
+  return { left, top, width: right - left, height: bottom - top };
+};
+
+// The element's box together with its content (text or children that overflow it, and elements
+// with display: contents that have no box of their own).
+const contentRect = (element) => {
+  let rect = null;
+  try {
+    rect = element.getBoundingClientRect();
+  } catch (exp) {}
+  try {
+    const range = (element.ownerDocument || document).createRange();
+    range.selectNodeContents(element);
+    rect = unionRect(rect, range.getBoundingClientRect());
+  } catch (exp) {}
+  return rect;
+};
+
+/**
+ * Where to paint black boxes, in CSS pixels of the top-level viewport: the rects of everything
+ * masked, through open shadow roots and same-origin frames. Gleap's own UI is skipped.
+ * @param {{privacyOptions?: object, maskSelectors?: string[]}} options
+ * @returns {Array<{x: number, y: number, width: number, height: number}>}
+ */
+export const collectMaskRects = (options = {}) => {
+  const rects = [];
+  const seen = {};
+  const privacyOptions = options.privacyOptions || {};
+  const selector = buildMaskSelector(privacyOptions, options.maskSelectors);
+  const patterns = classPatterns(privacyOptions);
+
+  const add = (rect, frame) => {
+    if (!rect || !(rect.width > 0) || !(rect.height > 0)) {
+      return;
+    }
+    let left = rect.left + frame.x;
+    let top = rect.top + frame.y;
+    let right = left + rect.width;
+    let bottom = top + rect.height;
+    if (frame.clip) {
+      left = Math.max(left, frame.clip.left);
+      top = Math.max(top, frame.clip.top);
+      right = Math.min(right, frame.clip.right);
+      bottom = Math.min(bottom, frame.clip.bottom);
+    }
+    const key = [left, top, right, bottom].join(',');
+    if (right > left && bottom > top && !seen[key]) {
+      seen[key] = true;
+      rects.push({ x: left, y: top, width: right - left, height: bottom - top });
+    }
+  };
+
+  const visit = (root, frame, depth) => {
+    if (!root || depth > 8) {
+      return;
+    }
+    const each = (query, callback) => {
+      let nodes = [];
+      try {
+        nodes = root.querySelectorAll(query);
+      } catch (exp) {}
+      for (let i = 0; i < nodes.length; i++) {
+        if (!isGleapUiElement(nodes[i])) {
+          callback(nodes[i]);
+        }
+      }
+    };
+
+    each(selector, (element) => add(contentRect(element), frame));
+    each('input, textarea, select', (field) => {
+      if (isMaskedField(field, privacyOptions)) {
+        add(field.getBoundingClientRect(), frame);
+      }
+    });
+    each('iframe, frame', (child) => {
+      const rect = child.getBoundingClientRect();
+      if (isPaymentFrame(child)) {
+        add(rect, frame);
+        return;
+      }
+      let childDocument = null;
+      try {
+        childDocument = child.contentDocument;
+      } catch (exp) {}
+      if (childDocument && childDocument.documentElement && rect.width > 0 && rect.height > 0) {
+        const x = frame.x + rect.left + (child.clientLeft || 0);
+        const y = frame.y + rect.top + (child.clientTop || 0);
+        let clip = {
+          left: frame.x + rect.left,
+          top: frame.y + rect.top,
+          right: frame.x + rect.right,
+          bottom: frame.y + rect.bottom,
+        };
+        if (frame.clip) {
+          clip = {
+            left: Math.max(clip.left, frame.clip.left),
+            top: Math.max(clip.top, frame.clip.top),
+            right: Math.min(clip.right, frame.clip.right),
+            bottom: Math.min(clip.bottom, frame.clip.bottom),
+          };
+        }
+        visit(childDocument, { x, y, clip }, depth + 1);
+      }
+    });
+
+    // Open shadow roots, and class names given as RegExp in the replay options. Gleap's UI is skipped
+    // as a whole.
+    try {
+      const ownerDocument = root.ownerDocument || root;
+      const walker = ownerDocument.createTreeWalker(root, 1, {
+        acceptNode: (node) => (isGleapUiRoot(node) ? 2 : 1),
+      });
+      let node = walker.nextNode();
+      while (node) {
+        if (node.shadowRoot) {
+          visit(node.shadowRoot, frame, depth + 1);
+        }
+        if (patterns.length && matchesClassPattern(node, patterns)) {
+          add(contentRect(node), frame);
+        }
+        node = walker.nextNode();
+      }
+    } catch (exp) {}
+  };
+
+  visit(document, { x: 0, y: 0, clip: null }, 0);
+  return rects;
+};
+
+const paintMaskRects = (context, rects, scaleX, scaleY) => {
+  context.save();
+  context.fillStyle = '#000000';
+  for (let i = 0; i < rects.length; i++) {
+    const rect = rects[i];
+    const x = Math.floor(rect.x * scaleX) - 1;
+    const y = Math.floor(rect.y * scaleY) - 1;
+    const width = Math.ceil(rect.width * scaleX) + 2;
+    const height = Math.ceil(rect.height * scaleY) + 2;
+    context.fillRect(x, y, width, height);
+  }
+  context.restore();
+};
+
+const createCanvas = (width, height) => {
+  const canvas = document.createElement('canvas');
+  canvas.width = Math.max(1, Math.round(width));
+  canvas.height = Math.max(1, Math.round(height));
+  return canvas;
+};
+
+const releaseCanvas = (canvas) => {
+  try {
+    if (canvas) {
+      canvas.width = 0;
+      canvas.height = 0;
+    }
+  } catch (exp) {}
+};
+
+// Samples the canvas at 48x48: 'transparent' when nothing was drawn, 'black' when all is black.
+const sampleCanvas = (canvas) => {
+  try {
+    const size = 48;
+    const sample = createCanvas(size, size);
+    const context = sample.getContext('2d');
+    context.drawImage(canvas, 0, 0, size, size);
+    const data = context.getImageData(0, 0, size, size).data;
+    releaseCanvas(sample);
+    let transparent = true;
+    let black = true;
+    for (let i = 0; i < data.length; i += 4) {
+      if (data[i + 3] > 0) {
+        transparent = false;
+        if (data[i] > 12 || data[i + 1] > 12 || data[i + 2] > 12) {
+          black = false;
+        }
+      }
+    }
+    return transparent ? 'transparent' : black ? 'black' : 'content';
+  } catch (exp) {
+    return 'content';
+  }
+};
+
+// The color the page's canvas shows where nothing else is painted.
+const pageBackgroundColor = () => {
+  const visible = (color) => color && color !== 'transparent' && !/rgba\(\s*0,\s*0,\s*0,\s*0\s*\)/.test(color);
+  try {
+    const htmlColor = window.getComputedStyle(document.documentElement).backgroundColor;
+    if (visible(htmlColor)) {
+      return htmlColor;
+    }
+    const bodyColor = document.body ? window.getComputedStyle(document.body).backgroundColor : null;
+    if (visible(bodyColor)) {
+      return bodyColor;
+    }
+  } catch (exp) {}
+  return '#ffffff';
+};
+
+/**
+ * The final image: page background, the capture, black boxes, scaled down to MAX_CAPTURE_EDGE on
+ * the long edge, JPEG.
+ */
+const encodeCapture = ({ canvas, scaleX, scaleY, rects, background }) => {
+  const longEdge = Math.max(canvas.width, canvas.height);
+  const factor = longEdge > MAX_CAPTURE_EDGE ? MAX_CAPTURE_EDGE / longEdge : 1;
+  const output = createCanvas(canvas.width * factor, canvas.height * factor);
+  const context = output.getContext('2d');
+  context.fillStyle = background || '#ffffff';
+  context.fillRect(0, 0, output.width, output.height);
+  context.imageSmoothingEnabled = true;
+  try {
+    context.imageSmoothingQuality = 'high';
+  } catch (exp) {}
+  context.drawImage(canvas, 0, 0, output.width, output.height);
+  paintMaskRects(context, rects, scaleX * factor, scaleY * factor);
+  const dataUrl = output.toDataURL('image/jpeg', JPEG_QUALITY);
+  const result = { dataUrl, width: output.width, height: output.height };
+  releaseCanvas(output);
+  return result;
+};
+
+export const stopStream = (stream) => {
+  try {
+    if (stream) {
+      stream.getTracks().forEach((track) => {
+        try {
+          track.stop();
+        } catch (exp) {}
+      });
+    }
+  } catch (exp) {}
+};
+
+/**
+ * Asks for the current tab (desktop Chromium). Must run synchronously inside the Capture click:
+ * that click is the user activation the browser requires.
+ * @returns {Promise<MediaStream>}
+ */
+export const requestTabStream = () => {
+  let promise;
+  try {
+    promise = navigator.mediaDevices.getDisplayMedia({
+      video: { displaySurface: 'browser' },
+      audio: false,
+      preferCurrentTab: true,
+      selfBrowserSurface: 'include',
+      surfaceSwitching: 'exclude',
+      monitorTypeSurfaces: 'exclude',
+    });
+  } catch (error) {
+    promise = Promise.reject(error);
+  }
+  // Handled by the caller; this keeps an unused rejection out of the page's console.
+  promise.catch(() => {});
+  return promise;
+};
+
+/**
+ * One frame of a video track: ImageCapture.grabFrame, then MediaStreamTrackProcessor, then a
+ * <video> element (requestVideoFrameCallback).
+ * @returns {Promise<{source: CanvasImageSource, width: number, height: number, release: function}>}
+ */
+const grabFrame = (track, stream) => {
+  const viaImageCapture = () => {
+    if (typeof ImageCapture !== 'function') {
+      return Promise.resolve(null);
+    }
+    return withTimeout(new ImageCapture(track).grabFrame(), 3000, 'grab-timeout').then(
+      (bitmap) =>
+        bitmap && bitmap.width > 0
+          ? { source: bitmap, width: bitmap.width, height: bitmap.height, release: () => bitmap.close && bitmap.close() }
+          : null,
+      () => null
+    );
+  };
+
+  const viaTrackProcessor = () => {
+    if (typeof MediaStreamTrackProcessor !== 'function') {
+      return Promise.resolve(null);
+    }
+    let reader = null;
+    const cancel = () => {
+      try {
+        if (reader) {
+          reader.cancel();
+        }
+      } catch (exp) {}
+    };
+    try {
+      reader = new MediaStreamTrackProcessor({ track }).readable.getReader();
+    } catch (exp) {
+      return Promise.resolve(null);
+    }
+    return withTimeout(reader.read(), 3000, 'read-timeout').then(
+      (result) => {
+        cancel();
+        const frame = result && result.value;
+        return frame
+          ? {
+              source: frame,
+              width: frame.displayWidth || frame.codedWidth,
+              height: frame.displayHeight || frame.codedHeight,
+              release: () => frame.close(),
+            }
+          : null;
+      },
+      () => {
+        cancel();
+        return null;
+      }
+    );
+  };
+
+  const viaVideo = () => {
+    const video = document.createElement('video');
+    video.muted = true;
+    video.playsInline = true;
+    video.srcObject = stream;
+    const release = () => {
+      try {
+        video.pause();
+        video.srcObject = null;
+      } catch (exp) {}
+    };
+    const firstFrame = new Promise((resolve) => {
+      if (typeof video.requestVideoFrameCallback === 'function') {
+        video.requestVideoFrameCallback(() => resolve());
+      } else {
+        video.addEventListener('loadeddata', () => setTimeout(resolve, 60), { once: true });
+      }
+    });
+    return withTimeout(Promise.resolve(video.play()), 3000, 'play-timeout')
+      .then(() => withTimeout(firstFrame, 3000, 'frame-timeout'))
+      .then(
+        () => ({ source: video, width: video.videoWidth, height: video.videoHeight, release }),
+        (error) => {
+          release();
+          throw error;
+        }
+      );
+  };
+
+  return viaImageCapture()
+    .then((frame) => frame || viaTrackProcessor())
+    .then((frame) => frame || viaVideo());
+};
+
+/**
+ * Takes one frame of the shared tab with Gleap's UI hidden, then stops sharing right away.
+ * Rejects when the shared surface is not this tab (or no usable frame came).
+ */
+export const captureFromTabStream = (stream, { setUiHidden, privacyOptions, maskSelectors }) => {
+  const track = stream && stream.getVideoTracks ? stream.getVideoTracks()[0] : null;
+  const finish = () => {
+    stopStream(stream);
+    setUiHidden(false);
+  };
+  if (!track) {
+    finish();
+    return Promise.reject(new Error('no-video-track'));
+  }
+  let settings = {};
+  try {
+    settings = track.getSettings ? track.getSettings() : {};
+  } catch (exp) {}
+  if (settings.displaySurface && settings.displaySurface !== 'browser') {
+    finish();
+    return Promise.reject(new Error('not-this-tab'));
+  }
+
+  const attempt = (index) => {
+    if (index >= 3) {
+      throw new Error('no-usable-frame');
+    }
+    if (track.readyState === 'ended') {
+      throw new Error('track-ended');
+    }
+    const rectsBefore = collectMaskRects({ privacyOptions, maskSelectors });
+    return grabFrame(track, stream).then((frame) => {
+      const viewportWidth = window.innerWidth;
+      const viewportHeight = window.innerHeight;
+      const rects = rectsBefore.concat(collectMaskRects({ privacyOptions, maskSelectors }));
+      let canvas = null;
+      try {
+        if (frame && frame.width > 0 && frame.height > 0) {
+          // The frame must show this viewport (a different tab, or a resize in between, doesn't).
+          const viewportRatio = viewportWidth / viewportHeight;
+          if (Math.abs(frame.width / frame.height - viewportRatio) / viewportRatio <= 0.04) {
+            canvas = createCanvas(frame.width, frame.height);
+            canvas.getContext('2d').drawImage(frame.source, 0, 0, frame.width, frame.height);
+            // The first frames of a new capture can be black.
+            if (index < 2 && sampleCanvas(canvas) !== 'content') {
+              releaseCanvas(canvas);
+              canvas = null;
+            }
+          }
+        }
+      } finally {
+        try {
+          if (frame) {
+            frame.release();
+          }
+        } catch (exp) {}
+      }
+      if (!canvas) {
+        return wait(150).then(() => attempt(index + 1));
+      }
+      return {
+        canvas,
+        scaleX: canvas.width / viewportWidth,
+        scaleY: canvas.height / viewportHeight,
+        rects,
+        background: '#000000',
+        method: 'tab',
+      };
+    });
+  };
+
+  setUiHidden(true);
+  return nextPaint()
+    .then(() => attempt(0))
+    .then(
+      (capture) => {
+        finish();
+        return capture;
+      },
+      (error) => {
+        finish();
+        throw error;
+      }
+    );
+};
+
+const cloneNamesMatch = (original, clone) => {
+  const a = String(original.nodeName).toUpperCase();
+  const b = String(clone.nodeName).toUpperCase();
+  if (a === b) {
+    return true;
+  }
+  if (a === 'IFRAME' || a === 'FRAME') {
+    return b === 'HTML';
+  }
+  if (a === 'VIDEO' || a === 'CANVAS') {
+    return b === 'IMG' || b === 'CANVAS' || b === 'VIDEO';
+  }
+  return false;
+};
+
+const hasSameOriginDocument = (frame) => {
+  try {
+    return !!(frame.contentDocument && frame.contentDocument.documentElement);
+  } catch (exp) {
+    return false;
+  }
+};
+
+const isViewportFilling = (rect) =>
+  Math.abs(rect.left) <= 2 &&
+  Math.abs(rect.top) <= 2 &&
+  Math.abs(rect.right - window.innerWidth) <= 20 &&
+  Math.abs(rect.bottom - window.innerHeight) <= 20;
+
+/**
+ * The modern-screenshot hooks that keep the clone private and show the scrolled state. The filter
+ * runs right before an element is cloned and onCloneEachNode right after it (children first), so a
+ * stack pairs every clone with its original. If a pair ever doesn't match, the clone is left
+ * alone: the black boxes painted from the live page still cover everything masked.
+ */
+const createCloneHooks = (root, privacyOptions, maskSelectors, pageScroll) => {
+  const stack = [root];
+  const extraSelector = (Array.isArray(maskSelectors) ? maskSelectors : []).map(validSelector).filter(Boolean).join(', ');
+  const scrollingElement = document.scrollingElement || document.documentElement;
+  // canYield: set once modern-screenshot's style sandbox is loaded (see renderDom).
+  const state = { broken: false, offsetX: 0, offsetY: 0, lastYield: now(), canYield: false };
+
+  const filter = (node) => {
+    if (!node || node.nodeType !== 1) {
+      return true;
+    }
+    const tag = String(node.tagName).toUpperCase();
+    // Rendered as text inside an SVG image, where scripting is off.
+    if (tag === 'NOSCRIPT' || tag === 'TEMPLATE') {
+      return false;
+    }
+    // Gleap's UI (skipped with its subtree), and modern-screenshot's own style sandbox.
+    if (isGleapUiRoot(node) || (typeof node.id === 'string' && node.id.indexOf('__SANDBOX__') === 0)) {
+      return false;
+    }
+    stack.push(node);
+    // A same-origin frame's document element is cloned (and reported) as well.
+    if ((tag === 'IFRAME' || tag === 'FRAME') && hasSameOriginDocument(node)) {
+      stack.push(node);
+    }
+    return true;
+  };
+
+  const hide = (clone) => clone.style && clone.style.setProperty('visibility', 'hidden', 'important');
+
+  const maskClone = (original, clone) => {
+    const tag = String(original.tagName).toUpperCase();
+    if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') {
+      let mask = null;
+      try {
+        mask = getFieldValueMask(original, privacyOptions);
+      } catch (exp) {
+        mask = () => '';
+      }
+      if (mask) {
+        const masked = mask(original.value);
+        clone.setAttribute('value', typeof masked === 'string' ? masked : '');
+        if (tag === 'TEXTAREA') {
+          clone.textContent = typeof masked === 'string' ? masked : '';
+        }
+        if (tag === 'SELECT') {
+          const selected = clone.querySelectorAll('option[selected]');
+          for (let i = 0; i < selected.length; i++) {
+            selected[i].removeAttribute('selected');
+          }
+        }
+        hide(clone);
+      }
+      return;
+    }
+    const frame = tag === 'IFRAME' || tag === 'FRAME';
+    let masked = false;
+    try {
+      masked =
+        isBlockedElement(original, privacyOptions) ||
+        isMaskMarker(original, privacyOptions) ||
+        (!!extraSelector && original.matches(extraSelector)) ||
+        (frame && isPaymentFrame(original));
+    } catch (exp) {}
+    if (masked) {
+      hide(clone);
+    }
+    if (frame && String(clone.nodeName).toUpperCase() === 'HTML') {
+      // A same-origin frame is cloned as its document element, which is not a replaced element:
+      // inline it would ignore the frame's size and let the rest of the page move up.
+      try {
+        const display = window.getComputedStyle(original).display;
+        clone.style.setProperty('display', display === 'inline' ? 'inline-block' : display, 'important');
+        clone.style.setProperty('overflow', 'hidden', 'important');
+      } catch (exp) {}
+    }
+  };
+
+  const restoreScroll = (original, clone) => {
+    if (original === document.documentElement || original === scrollingElement) {
+      return;
+    }
+    const top = original.scrollTop || 0;
+    const left = original.scrollLeft || 0;
+    if (!top && !left) {
+      return;
+    }
+    let rect = null;
+    try {
+      rect = original.getBoundingClientRect();
+    } catch (exp) {}
+    if (rect && isViewportFilling(rect)) {
+      // A scroller that fills the viewport (body or an app root) scrolls like the page: unclip it and
+      // shift the whole page, so fixed and sticky elements keep their places.
+      state.offsetX += left;
+      state.offsetY += top;
+      clone.style.setProperty('overflow', 'visible', 'important');
+      return;
+    }
+    const children = clone.children || [];
+    for (let i = 0; i < children.length; i++) {
+      const child = children[i];
+      if (!child.style || child.style.position === 'fixed') {
+        continue;
+      }
+      child.style.transform = 'translate(' + -left + 'px, ' + -top + 'px) ' + (child.style.transform || '');
+    }
+  };
+
+  const onCloneEachNode = (clone) => {
+    if (!clone || clone.nodeType !== 1) {
+      return undefined;
+    }
+    const original = stack.pop();
+    if (!original || !cloneNamesMatch(original, clone)) {
+      state.broken = true;
+    }
+    if (!state.broken) {
+      try {
+        maskClone(original, clone);
+        restoreScroll(original, clone);
+      } catch (exp) {}
+    }
+    // Cloning reads every element's computed style: give the page a chance to breathe.
+    if (state.canYield && now() - state.lastYield > 40) {
+      state.lastYield = now();
+      return wait(0);
+    }
+    return undefined;
+  };
+
+  const onCloneNode = (rootClone) => {
+    if (!state.broken && (state.offsetX || state.offsetY) && rootClone && rootClone.style) {
+      rootClone.style.top = -(pageScroll.y + state.offsetY) + 'px';
+      rootClone.style.left = -(pageScroll.x + state.offsetX) + 'px';
+    }
+  };
+
+  return { filter, onCloneEachNode, onCloneNode, state };
+};
+
+// modern-screenshot reads default styles from a hidden srcdoc frame it creates on first use. Made and
+// loaded up front instead: the render then may yield to the page without racing the frame's load.
+const createStyleSandbox = () =>
+  new Promise((resolve) => {
+    const frame = document.createElement('iframe');
+    frame.id = '__SANDBOX__gleap';
+    frame.width = '0';
+    frame.height = '0';
+    frame.tabIndex = -1;
+    frame.setAttribute('aria-hidden', 'true');
+    frame.style.visibility = 'hidden';
+    frame.style.position = 'fixed';
+    let settled = false;
+    const done = () => {
+      if (settled) {
+        return;
+      }
+      settled = true;
+      let ready = false;
+      try {
+        const doc = frame.contentDocument;
+        ready = !!(doc && doc.body && doc.readyState === 'complete' && frame.contentWindow.location.href === 'about:srcdoc');
+      } catch (exp) {}
+      if (!ready) {
+        frame.remove();
+      }
+      resolve(ready ? frame : null);
+    };
+    frame.addEventListener('load', done);
+    setTimeout(done, 1500);
+    try {
+      (document.body || document.documentElement).appendChild(frame);
+      frame.srcdoc = '<!DOCTYPE html><meta charset="UTF-8"><title></title><body>';
+    } catch (exp) {
+      done();
+    }
+  });
+
+// Images still loading inside the viewport are worth waiting for; offscreen lazy images never load.
+const mediaLoadingInViewport = () => {
+  try {
+    const viewportHeight = window.innerHeight;
+    const media = document.querySelectorAll('img, video');
+    for (let i = 0; i < media.length; i++) {
+      const element = media[i];
+      const loading =
+        element.tagName === 'IMG' ? !element.complete : element.readyState < 2 && !!(element.currentSrc || element.src);
+      if (!loading) {
+        continue;
+      }
+      const rect = element.getBoundingClientRect();
+      if (rect.width > 0 && rect.height > 0 && rect.bottom > 0 && rect.top < viewportHeight) {
+        return true;
+      }
+    }
+  } catch (exp) {}
+  return false;
+};
+
+// Images far below the fold don't show; they get a transparent pixel instead of a download.
+const createImageFetcher = () => {
+  try {
+    const limit = window.innerHeight + 400;
+    const below = new Set();
+    const needed = new Set();
+    const images = document.images;
+    for (let i = 0; i < images.length; i++) {
+      const url = images[i].currentSrc || images[i].src;
+      if (!url) {
+        continue;
+      }
+      if (images[i].getBoundingClientRect().top > limit) {
+        below.add(url);
+      } else {
+        needed.add(url);
+      }
+    }
+    needed.forEach((url) => below.delete(url));
+    if (below.size === 0) {
+      return null;
+    }
+    return (url) => Promise.resolve(below.has(url) ? TRANSPARENT_GIF : false);
+  } catch (exp) {
+    return null;
+  }
+};
+
+/**
+ * Renders the visible part of the page in the browser.
+ */
+export const renderDom = ({ privacyOptions, maskSelectors }) => {
+  const root = document.documentElement;
+  const width = Math.max(1, root.clientWidth || window.innerWidth);
+  const height = Math.max(1, root.clientHeight || window.innerHeight);
+  const scale = Math.min(Math.max(window.devicePixelRatio || 1, 1), MAX_CAPTURE_EDGE / Math.max(width, height));
+  const pageScroll = { x: window.scrollX || 0, y: window.scrollY || 0 };
+  const rects = collectMaskRects({ privacyOptions, maskSelectors });
+  const background = pageBackgroundColor();
+  const hooks = createCloneHooks(root, privacyOptions, maskSelectors, pageScroll);
+
+  // Its asset downloads (fonts, images) are not the app's traffic: keep them out of the network logs.
+  let interceptor = null;
+  let wasStopped = false;
+  try {
+    interceptor = GleapNetworkIntercepter.getInstance();
+    wasStopped = !!interceptor.stopped;
+    interceptor.setStopped(true);
+  } catch (exp) {
+    interceptor = null;
+  }
+
+  let context = null;
+  const cleanup = () => {
+    if (context) {
+      try {
+        destroyContext(context);
+      } catch (exp) {}
+      context = null;
+    }
+    if (interceptor) {
+      interceptor.setStopped(wasStopped);
+    }
+  };
+
+  return Promise.resolve()
+    .then(() =>
+      createContext(root, {
+        width,
+        height,
+        scale,
+        backgroundColor: null,
+        filter: hooks.filter,
+        onCloneEachNode: hooks.onCloneEachNode,
+        onCloneNode: hooks.onCloneNode,
+        // The clone isn't scrollable: shift the page instead. Fixed and sticky elements keep their
+        // places relative to the image, as they do relative to the viewport.
+        style: {
+          position: 'relative',
+          top: -pageScroll.y + 'px',
+          left: -pageScroll.x + 'px',
+          overflow: 'visible',
+        },
+        features: { restoreScrollPosition: false },
+        fetchFn: createImageFetcher(),
+        // How long to wait for images that are still loading; the render itself gets longer below.
+        timeout: mediaLoadingInViewport() ? 3000 : 50,
+      })
+    )
+    .then((created) => {
+      context = created;
+      context.timeout = 8000;
+      return createStyleSandbox();
+    })
+    .then((sandbox) => {
+      if (sandbox) {
+        // destroyContext removes it again.
+        context.sandbox = sandbox;
+        hooks.state.canYield = true;
+      }
+      return domToCanvas(context);
+    })
+    .then(
+      (canvas) => {
+        cleanup();
+        if (sampleCanvas(canvas) === 'transparent') {
+          releaseCanvas(canvas);
+          throw new Error('render-empty');
+        }
+        return { canvas, scaleX: canvas.width / width, scaleY: canvas.height / height, rects, background, method: 'dom' };
+      },
+      (error) => {
+        cleanup();
+        throw error;
+      }
+    );
+};
+
+/**
+ * Takes the screenshot: the shared tab when `streamPromise` (from requestTabStream) delivers one,
+ * the DOM render otherwise (declined, cancelled, another surface or any error) — without asking again.
+ * @returns {Promise<{dataUrl: string, width: number, height: number, method: 'tab'|'dom'}>}
+ */
+export const captureScreenshot = ({ streamPromise, setUiHidden, privacyOptions, maskSelectors, isActive }) => {
+  const active = () => !isActive || isActive();
+  const fromTab = streamPromise
+    ? streamPromise.then(
+        (stream) => {
+          if (!active()) {
+            stopStream(stream);
+            return null;
+          }
+          return captureFromTabStream(stream, { setUiHidden, privacyOptions, maskSelectors }).catch(() => null);
+        },
+        () => null
+      )
+    : Promise.resolve(null);
+
+  return fromTab
+    .then((capture) => {
+      if (!active()) {
+        if (capture) {
+          releaseCanvas(capture.canvas);
+        }
+        throw new Error('aborted');
+      }
+      return capture || renderDom({ privacyOptions, maskSelectors });
+    })
+    .then((capture) => {
+      try {
+        const encoded = encodeCapture(capture);
+        encoded.method = capture.method;
+        return encoded;
+      } finally {
+        releaseCanvas(capture.canvas);
+      }
+    });
+};
diff --git a/src/GleapCaptureSettings.js b/src/GleapCaptureSettings.js
new file mode 100644
index 00000000..3137c684
--- /dev/null
+++ b/src/GleapCaptureSettings.js
@@ -0,0 +1,157 @@
+import { GleapConfigManager } from './Gleap';
+
+// Capture requests (screenshots, screen recordings and log collection asked for by teammates, AI
+// agents or workflows): the local switches and what this browser can do. Kept free of heavy imports,
+// as the websocket and the Messenger bridge read it on every connect.
+
+export const CAPTURE_SDK_TYPE = 'JAVASCRIPT';
+export const CAPTURE_PLATFORM = 'web';
+// The longest recording any request can ask for (contract: maxDurationSec is clamped to 5..180).
+export const CAPTURE_MAX_RECORDING_SEC = 180;
+
+// Module state, so the switches work before Gleap.initialize.
+let captureEnabled = true;
+let remoteLogCollectionEnabled = true;
+
+export const setCaptureEnabled = (enabled) => {
+  captureEnabled = !!enabled;
+};
+
+export const setRemoteLogCollectionEnabled = (enabled) => {
+  remoteLogCollectionEnabled = !!enabled;
+};
+
+export const isRemoteLogCollectionEnabled = () => remoteLogCollectionEnabled;
+
+export const getSdkVersion = () => {
+  try {
+    return typeof SDK_VERSION !== 'undefined' ? SDK_VERSION : '';
+  } catch (exp) {
+    return '';
+  }
+};
+
+/**
+ * The project's capture settings (flowConfig.capture), {} when there are none.
+ */
+export const getCaptureConfig = () => {
+  try {
+    const flowConfig = GleapConfigManager.getInstance().getFlowConfig();
+    if (flowConfig && flowConfig.capture && typeof flowConfig.capture === 'object') {
+      return flowConfig.capture;
+    }
+  } catch (exp) {}
+  return {};
+};
+
+export const hasDisplayMedia = () => {
+  try {
+    return (
+      typeof navigator !== 'undefined' &&
+      !!navigator.mediaDevices &&
+      typeof navigator.mediaDevices.getDisplayMedia === 'function'
+    );
+  } catch (exp) {
+    return false;
+  }
+};
+
+export const hasUserMedia = () => {
+  try {
+    return (
+      typeof navigator !== 'undefined' &&
+      !!navigator.mediaDevices &&
+      typeof navigator.mediaDevices.getUserMedia === 'function'
+    );
+  } catch (exp) {
+    return false;
+  }
+};
+
+const hasMediaRecorder = () => typeof window !== 'undefined' && typeof window.MediaRecorder === 'function';
+
+/**
+ * Desktop Chromium (Chrome, Edge, Brave, Opera, ...), where getDisplayMedia can offer the current
+ * tab with one click (preferCurrentTab).
+ */
+export const isDesktopChromium = () => {
+  try {
+    const nav = navigator;
+    const uaData = nav.userAgentData;
+    if (uaData && Array.isArray(uaData.brands)) {
+      return !uaData.mobile && uaData.brands.some((brand) => brand && /Chromium/i.test(brand.brand));
+    }
+    const ua = nav.userAgent || '';
+    return /\bChrome\/\d+/.test(ua) && !/Android|Mobile|CriOS|EdgiOS|FxiOS/i.test(ua);
+  } catch (exp) {
+    return false;
+  }
+};
+
+/**
+ * 'display' (getDisplayMedia + MediaRecorder, desktop browsers) or 'rrweb' (a page recording,
+ * phones and tablets).
+ */
+export const getRecordingMethod = () => (hasDisplayMedia() && hasMediaRecorder() ? 'display' : 'rrweb');
+
+/**
+ * Whether this page can take screenshots and recordings for capture requests at all.
+ */
+export const isCaptureSupported = () => {
+  if (!captureEnabled) {
+    return false;
+  }
+  try {
+    return (
+      typeof window !== 'undefined' &&
+      typeof document !== 'undefined' &&
+      typeof HTMLCanvasElement !== 'undefined' &&
+      typeof Element !== 'undefined' &&
+      typeof Element.prototype.attachShadow === 'function'
+    );
+  } catch (exp) {
+    return false;
+  }
+};
+
+/**
+ * The `capture-capabilities` message data for the Messenger (contract §7). With capture disabled
+ * everything is false, so the Messenger only offers "Upload a file".
+ */
+export const getCaptureCapabilities = () => {
+  const capabilities = {
+    version: 1,
+    platform: CAPTURE_PLATFORM,
+    sdkType: CAPTURE_SDK_TYPE,
+    sdkVersion: getSdkVersion(),
+    screenshot: false,
+    recording: false,
+    annotate: false,
+  };
+  if (!isCaptureSupported()) {
+    return capabilities;
+  }
+
+  const recordingMethod = getRecordingMethod();
+  capabilities.screenshot = true;
+  capabilities.recording = true;
+  capabilities.annotate = true;
+  capabilities.recordingMethod = recordingMethod;
+  capabilities.maxRecordingSec = CAPTURE_MAX_RECORDING_SEC;
+  capabilities.microphone = recordingMethod === 'display' && getCaptureConfig().allowMicrophone === true && hasUserMedia();
+  return capabilities;
+};
+
+/**
+ * The capability flags the SDK websocket announces (`&caps=`).
+ */
+export const getWebSocketCaps = () => {
+  const caps = [];
+  if (isCaptureSupported()) {
+    caps.push('capture.screenshot', 'capture.recording');
+  }
+  if (remoteLogCollectionEnabled) {
+    caps.push('capture.logs');
+  }
+  return caps;
+};
diff --git a/src/GleapCaptureUI.js b/src/GleapCaptureUI.js
new file mode 100644
index 00000000..d55d34ba
--- /dev/null
+++ b/src/GleapCaptureUI.js
@@ -0,0 +1,560 @@
+import { applyGleapCSPNonce } from './GleapHelper';
+
+// The capture bar and the recording preview shown in the host page while a customer answers a
+// capture request. Everything lives in a shadow root under one zero-size host element: page styles
+// can't reach it, its styles can't reach the page, and replays and screenshots leave it out
+// (rr-block / gl-block; a 0x0 placeholder in replays).
+
+export const CAPTURE_ROOT_CLASS = 'gleap-capture-root';
+
+// English fallbacks for the host labels the Messenger sends in capture-start.labels (contract §11).
+export const DEFAULT_CAPTURE_LABELS = {
+  barScreenshotHint: 'Go to the screen you want to show, then tap Capture.',
+  barCapture: 'Capture',
+  barCancel: 'Cancel',
+  barRecordHint: 'Go to where the issue happens, then start recording.',
+  barStart: 'Start recording',
+  barStop: 'Stop',
+  barRecording: 'Recording',
+  microphone: 'Microphone',
+  previewTitle: 'Send this recording?',
+  previewSend: 'Send',
+  previewRetake: 'Retake',
+  uploading: 'Uploading…',
+  recordingInterrupted: 'Recording stopped because the page changed.',
+  recordAgain: 'Record again',
+  permissionDenied: 'Screen capture was blocked. You can upload a file instead.',
+  notSupported: "Screen capture isn't available here. You can upload a file instead.",
+  failed: "That didn't work. Please try again or upload a file.",
+};
+
+/**
+ * The labels to show: the Messenger's (strings only) over the English defaults.
+ */
+export const resolveCaptureLabels = (labels) => {
+  const resolved = Object.assign({}, DEFAULT_CAPTURE_LABELS);
+  if (labels && typeof labels === 'object') {
+    Object.keys(DEFAULT_CAPTURE_LABELS).forEach((key) => {
+      const value = labels[key];
+      if (typeof value === 'string' && value.trim().length > 0) {
+        resolved[key] = value.slice(0, 300);
+      }
+    });
+  }
+  return resolved;
+};
+
+export const formatDuration = (seconds) => {
+  const total = Math.max(0, Math.floor(seconds || 0));
+  const rest = total % 60;
+  return Math.floor(total / 60) + ':' + (rest < 10 ? '0' : '') + rest;
+};
+
+// Light text on a dark bar, whatever the page looks like. The primary button takes the project color.
+const STYLES =
+  ':host{all:initial}' +
+  '.bar,.overlay{font:14px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:#fff;letter-spacing:normal;text-align:start;-webkit-font-smoothing:antialiased;box-sizing:border-box;pointer-events:auto;animation:in .18s ease-out both}' +
+  '.bar *,.overlay *{box-sizing:border-box}' +
+  '.bar{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;width:max-content;max-width:min(680px,calc(100vw - 32px));padding:8px;border-radius:16px;background:rgba(22,22,26,.97);box-shadow:0 12px 40px rgba(0,0,0,.3),0 0 0 1px rgba(255,255,255,.1)}' +
+  '.moved{transform:none}' +
+  '.grip{flex:none;align-self:stretch;width:18px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.45);cursor:grab;touch-action:none}' +
+  '.hint{flex:1 1 auto;min-width:0;padding:0 6px}' +
+  '.rec{display:flex;align-items:center;gap:8px;white-space:nowrap}' +
+  '.dot{flex:none;width:10px;height:10px;border-radius:50%;background:#ff4d4f;animation:pulse 1.4s ease-in-out infinite}' +
+  '.timer{font-variant-numeric:tabular-nums;color:rgba(255,255,255,.85)}' +
+  '.actions{flex:none;display:flex;align-items:center;gap:8px}' +
+  'button{-webkit-appearance:none;appearance:none;margin:0;border:0;border-radius:10px;min-height:36px;padding:0 14px;display:inline-flex;align-items:center;justify-content:center;gap:6px;font:inherit;font-weight:600;white-space:nowrap;cursor:pointer;color:#fff;background:rgba(255,255,255,.12)}' +
+  'button:hover{background:rgba(255,255,255,.2)}' +
+  'button:focus-visible{outline:2px solid #fff;outline-offset:2px}' +
+  'button[disabled]{opacity:.55;cursor:default}' +
+  '.primary,.primary:hover{background:var(--primary);color:var(--on-primary)}' +
+  '.stop,.stop:hover{background:#e5484d;color:#fff}' +
+  '.icon{width:36px;padding:0}' +
+  '.icon[aria-pressed=false]{color:rgba(255,255,255,.55)}' +
+  '.spin{flex:none;width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .8s linear infinite}' +
+  'svg{flex:none;width:18px;height:18px}' +
+  '.overlay{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(8,8,10,.62)}' +
+  '.card{width:100%;max-width:760px;max-height:100%;display:flex;flex-direction:column;overflow:hidden;border-radius:16px;background:#16161a;box-shadow:0 24px 60px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.1)}' +
+  '.title{padding:16px 20px 12px;font-size:16px;font-weight:600}' +
+  '.media{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:#000;color:rgba(255,255,255,.85)}' +
+  '.media video{display:block;width:100%;max-height:62vh;background:#000;object-fit:contain}' +
+  '.summary{padding:32px 20px;background:rgba(255,255,255,.04)}' +
+  '.summary>svg{width:40px;height:40px;opacity:.8}' +
+  '.facts{display:flex;gap:14px;font-variant-numeric:tabular-nums}' +
+  '.facts span{display:inline-flex;align-items:center;gap:6px}' +
+  '.footer{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:12px 16px 16px}' +
+  '.status{flex:1 1 200px;min-width:0;color:rgba(255,255,255,.8)}' +
+  '.error{color:#ff9a9d}' +
+  '.progress{height:4px;margin-top:8px;overflow:hidden;border-radius:2px;background:rgba(255,255,255,.15)}' +
+  '.progress div{height:100%;width:0;background:var(--primary);transition:width .2s}' +
+  '.footer .actions{margin-left:auto}' +
+  '@keyframes in{from{opacity:0}}@keyframes pulse{50%{opacity:.3}}@keyframes spin{to{transform:rotate(360deg)}}' +
+  '@media (prefers-reduced-motion:reduce){.bar,.overlay,.dot{animation:none}.spin{animation-duration:2.4s}.progress div{transition:none}}' +
+  '@media (max-width:600px){' +
+  '.bar,.moved{left:0!important;right:0;top:auto!important;bottom:0;transform:none;width:auto;max-width:none;flex-wrap:wrap;border-radius:16px 16px 0 0;' +
+  'padding:12px calc(12px + env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) calc(12px + env(safe-area-inset-left,0px))}' +
+  '.grip{display:none}.hint{flex:1 1 100%;padding:2px 4px 6px}.recording .hint{flex:1 1 auto}' +
+  '.actions{flex:1 1 100%}.recording .actions{flex:0 0 auto}.actions button:not(.icon){flex:1 1 0}' +
+  'button{min-height:44px}.icon{width:44px}' +
+  '.overlay{padding:0;align-items:flex-end}.card{max-width:none;border-radius:16px 16px 0 0;padding-bottom:env(safe-area-inset-bottom,0px)}' +
+  '.media video{max-height:55vh}}';
+
+// 24x24 icons as one path each; built with DOM calls (no innerHTML), so Trusted Types pages work too.
+const ICONS = {
+  grip: ['M9 6h0M15 6h0M9 12h0M15 12h0M9 18h0M15 18h0', 'dots'],
+  camera: [
+    'M4 8h3l1.6-2.4a1.5 1.5 0 0 1 1.3-.6h4.2a1.5 1.5 0 0 1 1.3.6L17 8h3a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1ZM12 16.4a3.4 3.4 0 1 0 0-6.8 3.4 3.4 0 0 0 0 6.8Z',
+  ],
+  record: ['M12 20a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM12 14.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z'],
+  stop: ['M8 7h8a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1Z', 'fill'],
+  mic: ['M12 3a3 3 0 0 1 3 3v5a3 3 0 0 1-6 0V6a3 3 0 0 1 3-3ZM5.5 11a6.5 6.5 0 0 0 13 0M12 17.5V21'],
+  micOff: ['M12 3a3 3 0 0 1 3 3v5a3 3 0 0 1-6 0V6a3 3 0 0 1 3-3ZM5.5 11a6.5 6.5 0 0 0 13 0M12 17.5V21M4 4l16 16'],
+  page: [
+    'M6.5 3h11A2.5 2.5 0 0 1 20 5.5v13a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 4 18.5v-13A2.5 2.5 0 0 1 6.5 3ZM8 8h8M8 12h8M8 16h5',
+  ],
+  clock: ['M12 20.5a8.5 8.5 0 1 0 0-17 8.5 8.5 0 0 0 0 17ZM12 7.5V12l3 2'],
+  pointer: ['M6 3.5 18.5 12l-5.6 1.3-2.7 5.2Z'],
+};
+
+const SVG_NS = 'http://www.w3.org/2000/svg';
+
+const icon = (name) => {
+  const [d, variant] = ICONS[name];
+  const svg = document.createElementNS(SVG_NS, 'svg');
+  svg.setAttribute('viewBox', '0 0 24 24');
+  svg.setAttribute('aria-hidden', 'true');
+  const path = document.createElementNS(SVG_NS, 'path');
+  path.setAttribute('d', d);
+  if (variant === 'fill') {
+    path.setAttribute('fill', 'currentColor');
+  } else {
+    path.setAttribute('fill', 'none');
+    path.setAttribute('stroke', 'currentColor');
+    path.setAttribute('stroke-width', variant ? '3.2' : '1.8');
+    path.setAttribute('stroke-linecap', 'round');
+    path.setAttribute('stroke-linejoin', 'round');
+  }
+  svg.appendChild(path);
+  return svg;
+};
+
+const el = (tag, className, children) => {
+  const element = document.createElement(tag);
+  if (className) {
+    element.className = className;
+  }
+  (children || []).forEach((child) => {
+    if (child !== null && child !== undefined) {
+      element.appendChild(typeof child === 'string' ? document.createTextNode(child) : child);
+    }
+  });
+  return element;
+};
+
+export default class GleapCaptureUI {
+  host = null;
+  root = null;
+  timer = null;
+  maxSec = 0;
+  micButton = null;
+  progress = null;
+  status = null;
+  previewButtons = null;
+  previewUrl = null;
+  // Where the customer dragged the bar to (desktop), kept across state changes.
+  position = null;
+  cleanupDrag = null;
+  // Off for a bar restored after a page load, so it doesn't take the focus from the page.
+  autoFocus = true;
+
+  constructor({ labels, primaryColor, rtl, onAction }) {
+    this.labels = resolveCaptureLabels(labels);
+    this.onAction = onAction;
+    this.rtl = !!rtl;
+    this.primaryColor = /^#[0-9a-f]{6}$/i.test(primaryColor || '') ? primaryColor : '#485BFF';
+  }
+
+  mount() {
+    if (!this.host) {
+      const host = document.createElement('div');
+      host.className = CAPTURE_ROOT_CLASS + ' rr-block gl-block';
+      // Through the CSSOM: a page CSP without 'unsafe-inline' still applies these.
+      const hostStyles = {
+        position: 'fixed',
+        top: '0',
+        left: '0',
+        width: '0',
+        height: '0',
+        overflow: 'visible',
+        'z-index': '2147483647',
+        display: 'block',
+        margin: '0',
+        padding: '0',
+        border: '0',
+        transform: 'none',
+        'pointer-events': 'none',
+      };
+      Object.keys(hostStyles).forEach((property) => host.style.setProperty(property, hostStyles[property], 'important'));
+
+      const shadow = host.attachShadow({ mode: 'open' });
+      let styled = false;
+      try {
+        if (typeof CSSStyleSheet === 'function' && 'adoptedStyleSheets' in shadow) {
+          const sheet = new CSSStyleSheet();
+          sheet.replaceSync(STYLES);
+          shadow.adoptedStyleSheets = [sheet];
+          styled = true;
+        }
+      } catch (exp) {}
+      if (!styled) {
+        const style = document.createElement('style');
+        applyGleapCSPNonce(style);
+        style.textContent = STYLES;
+        shadow.appendChild(style);
+      }
+
+      const r = parseInt(this.primaryColor.substr(1, 2), 16);
+      const g = parseInt(this.primaryColor.substr(3, 2), 16);
+      const b = parseInt(this.primaryColor.substr(5, 2), 16);
+      this.root = el('div');
+      this.root.setAttribute('dir', this.rtl ? 'rtl' : 'ltr');
+      this.root.style.setProperty('--primary', this.primaryColor);
+      this.root.style.setProperty('--on-primary', (r * 299 + g * 587 + b * 114) / 1000 >= 160 ? '#000' : '#fff');
+      shadow.appendChild(this.root);
+      this.host = host;
+    }
+    this.ensureAttached();
+  }
+
+  // Re-attaches the UI when the page replaced the body (e.g. Turbo navigation).
+  ensureAttached() {
+    try {
+      if (this.host && !this.host.isConnected) {
+        (document.body || document.documentElement).appendChild(this.host);
+      }
+    } catch (exp) {}
+  }
+
+  isOwnElement(node) {
+    return !!(this.host && node && (node === this.host || this.host.contains(node)));
+  }
+
+  setVisible(visible) {
+    if (this.host) {
+      this.host.style.setProperty('visibility', visible ? 'visible' : 'hidden', 'important');
+    }
+  }
+
+  action(name) {
+    try {
+      if (this.onAction) {
+        this.onAction(name);
+      }
+    } catch (exp) {}
+  }
+
+  button(text, action, className, iconName, disabled) {
+    const button = el('button', className, [iconName ? icon(iconName) : null, text]);
+    button.type = 'button';
+    button.disabled = !!disabled;
+    button.addEventListener('click', (event) => {
+      event.stopPropagation();
+      if (!button.disabled) {
+        this.action(action);
+      }
+    });
+    return button;
+  }
+
+  micToggle(mic, disabled) {
+    if (!mic || !mic.available) {
+      return null;
+    }
+    const button = this.button(null, 'mic', 'icon', mic.on ? 'mic' : 'micOff', disabled);
+    button.setAttribute('aria-pressed', mic.on ? 'true' : 'false');
+    button.setAttribute('aria-label', this.labels.microphone);
+    button.title = this.labels.microphone;
+    this.micButton = button;
+    return button;
+  }
+
+  focus(element) {
+    try {
+      if (this.autoFocus && element) {
+        element.focus({ preventScroll: true });
+      }
+    } catch (exp) {}
+  }
+
+  // Removes what is shown (and its listeners and preview URL).
+  reset() {
+    if (this.cleanupDrag) {
+      this.cleanupDrag();
+      this.cleanupDrag = null;
+    }
+    if (this.previewUrl) {
+      try {
+        URL.revokeObjectURL(this.previewUrl);
+      } catch (exp) {}
+      this.previewUrl = null;
+    }
+    this.timer = this.micButton = this.progress = this.status = this.previewButtons = null;
+    while (this.root && this.root.firstChild) {
+      this.root.removeChild(this.root.firstChild);
+    }
+  }
+
+  /**
+   * A bar: drag grip, a hint (or status) and buttons. Escape in the bar runs `escape` (not while
+   * recording: the page may use Escape itself).
+   */
+  bar(label, content, buttons, focusIndex, recording) {
+    this.mount();
+    this.reset();
+    const grip = el('div', 'grip', [icon('grip')]);
+    grip.setAttribute('aria-hidden', 'true');
+    const actions = el('div', 'actions', buttons);
+    const bar = el('div', 'bar' + (recording ? ' recording' : ''), [grip, content, actions]);
+    bar.setAttribute('role', 'region');
+    bar.setAttribute('aria-label', label);
+    if (!recording) {
+      bar.addEventListener('keydown', (event) => {
+        if (event.key === 'Escape') {
+          event.stopPropagation();
+          this.action('cancel');
+        }
+      });
+    }
+    this.place(bar);
+    this.enableDragging(bar, grip);
+    this.root.appendChild(bar);
+    this.focus(buttons[focusIndex]);
+  }
+
+  place(bar) {
+    if (this.position) {
+      bar.classList.add('moved');
+      bar.style.left = this.position.left + 'px';
+      bar.style.top = this.position.top + 'px';
+      bar.style.bottom = 'auto';
+    }
+  }
+
+  enableDragging(bar, grip) {
+    let start = null;
+    const move = (event) => {
+      if (start) {
+        this.position = {
+          left: Math.max(8, Math.min(window.innerWidth - bar.offsetWidth - 8, start.left + event.clientX - start.x)),
+          top: Math.max(8, Math.min(window.innerHeight - bar.offsetHeight - 8, start.top + event.clientY - start.y)),
+        };
+        this.place(bar);
+      }
+    };
+    const up = () => {
+      start = null;
+      window.removeEventListener('pointermove', move, true);
+      window.removeEventListener('pointerup', up, true);
+      window.removeEventListener('pointercancel', up, true);
+    };
+    const down = (event) => {
+      if (event.button) {
+        return;
+      }
+      event.preventDefault();
+      const rect = bar.getBoundingClientRect();
+      start = { x: event.clientX, y: event.clientY, left: rect.left, top: rect.top };
+      window.addEventListener('pointermove', move, true);
+      window.addEventListener('pointerup', up, true);
+      window.addEventListener('pointercancel', up, true);
+    };
+    grip.addEventListener('pointerdown', down);
+    this.cleanupDrag = up;
+  }
+
+  busyButton(text, action, iconName, busy) {
+    const button = this.button(busy ? null : text, action, 'primary', busy ? null : iconName, busy);
+    if (busy) {
+      button.appendChild(el('span', 'spin'));
+      button.appendChild(document.createTextNode(text));
+      button.setAttribute('aria-busy', 'true');
+    }
+    return button;
+  }
+
+  /**
+   * Screenshot bar: hint · Capture · Cancel. `busy` while the screenshot is taken.
+   */
+  showScreenshotBar(busy) {
+    const labels = this.labels;
+    this.bar(
+      labels.barCapture,
+      el('div', 'hint', [labels.barScreenshotHint]),
+      [
+        this.busyButton(labels.barCapture, 'capture', 'camera', busy),
+        this.button(labels.barCancel, 'cancel', null, null, busy),
+      ],
+      0
+    );
+  }
+
+  /**
+   * Recording bar before the start: hint · Start recording · (microphone) · Cancel. After a page
+   * load it says the recording stopped, with Record again.
+   */
+  showRecordBar({ busy, mic, interrupted }) {
+    const labels = this.labels;
+    const start = interrupted ? labels.recordAgain : labels.barStart;
+    this.bar(
+      start,
+      el('div', 'hint', [interrupted ? labels.recordingInterrupted : labels.barRecordHint]),
+      [
+        this.busyButton(start, 'start', 'record', busy),
+        this.micToggle(mic, busy),
+        this.button(labels.barCancel, 'cancel', null, null, busy),
+      ].filter(Boolean),
+      0
+    );
+  }
+
+  /**
+   * While recording: red dot · Recording 0:12 / 1:00 · (microphone) · Stop.
+   */
+  showRecordingBar({ mic, maxSec }) {
+    const labels = this.labels;
+    this.maxSec = maxSec;
+    const timer = el('span', 'timer', [formatDuration(0) + ' / ' + formatDuration(maxSec)]);
+    timer.setAttribute('role', 'timer');
+    const buttons = [this.micToggle(mic), this.button(labels.barStop, 'stop', 'stop', 'stop')].filter(Boolean);
+    this.bar(
+      labels.barRecording,
+      el('div', 'hint rec', [el('span', 'dot'), labels.barRecording, timer]),
+      buttons,
+      buttons.length - 1,
+      true
+    );
+    this.timer = timer;
+  }
+
+  updateTimer(elapsedSec) {
+    if (this.timer) {
+      this.timer.textContent = formatDuration(elapsedSec) + ' / ' + formatDuration(this.maxSec);
+    }
+  }
+
+  setMicOn(on) {
+    const button = this.micButton;
+    if (button) {
+      button.setAttribute('aria-pressed', on ? 'true' : 'false');
+      button.replaceChild(icon(on ? 'mic' : 'micOff'), button.firstChild);
+    }
+  }
+
+  /**
+   * After Stop: the video (screen recordings) or a short summary (page recordings), with
+   * Cancel · Retake · Send.
+   * @param {{video?: Blob, durationMs: number, interactions?: number}} preview
+   */
+  showPreview(preview) {
+    this.mount();
+    this.reset();
+    const labels = this.labels;
+    let media;
+    if (preview.video) {
+      const video = document.createElement('video');
+      video.controls = true;
+      video.playsInline = true;
+      video.preload = 'auto';
+      // MediaRecorder files often lack a duration: seek to the end once so the controls know it.
+      video.addEventListener(
+        'loadedmetadata',
+        () => {
+          try {
+            if (video.duration === Infinity) {
+              const rewind = () => {
+                video.removeEventListener('timeupdate', rewind);
+                video.currentTime = 0;
+              };
+              video.addEventListener('timeupdate', rewind);
+              video.currentTime = 1e7;
+            }
+          } catch (exp) {}
+        },
+        { once: true }
+      );
+      this.previewUrl = URL.createObjectURL(preview.video);
+      video.src = this.previewUrl;
+      media = el('div', 'media', [video]);
+    } else {
+      const facts = el('div', 'facts', [
+        el('span', null, [icon('clock'), formatDuration((preview.durationMs || 0) / 1000)]),
+      ]);
+      if (typeof preview.interactions === 'number') {
+        facts.appendChild(el('span', null, [icon('pointer'), String(preview.interactions)]));
+      }
+      media = el('div', 'media summary', [icon('page'), facts]);
+    }
+
+    this.status = el('div', 'status');
+    this.status.setAttribute('aria-live', 'polite');
+    const buttons = {
+      cancel: this.button(labels.barCancel, 'cancel'),
+      retake: this.button(labels.previewRetake, 'retake'),
+      send: this.button(labels.previewSend, 'send', 'primary'),
+    };
+    this.previewButtons = buttons;
+    const title = el('div', 'title', [labels.previewTitle]);
+    title.id = 'gl-title';
+    const card = el('div', 'card', [
+      title,
+      media,
+      el('div', 'footer', [this.status, el('div', 'actions', [buttons.cancel, buttons.retake, buttons.send])]),
+    ]);
+    card.setAttribute('role', 'dialog');
+    card.setAttribute('aria-modal', 'true');
+    card.setAttribute('aria-labelledby', title.id);
+    this.root.appendChild(el('div', 'overlay', [card]));
+    this.focus(buttons.send);
+  }
+
+  /**
+   * Upload progress (0..1) in the preview; Retake and Send wait meanwhile.
+   */
+  setUploading(progress) {
+    if (!this.status) {
+      return;
+    }
+    this.previewButtons.retake.disabled = this.previewButtons.send.disabled = true;
+    if (!this.progress) {
+      this.status.className = 'status';
+      this.status.textContent = this.labels.uploading;
+      this.progress = el('div');
+      const track = el('div', 'progress', [this.progress]);
+      track.setAttribute('role', 'progressbar');
+      this.status.appendChild(track);
+    }
+    this.progress.style.width = Math.round(Math.max(0, Math.min(1, progress || 0)) * 100) + '%';
+  }
+
+  /**
+   * An error in the preview; Send tries again.
+   */
+  setPreviewError(message) {
+    if (this.status) {
+      this.progress = null;
+      this.status.className = 'status error';
+      this.status.textContent = message || this.labels.failed;
+      this.previewButtons.retake.disabled = this.previewButtons.send.disabled = false;
+    }
+  }
+
+  destroy() {
+    this.reset();
+    try {
+      if (this.host) {
+        this.host.remove();
+      }
+    } catch (exp) {}
+    this.host = this.root = this.onAction = null;
+  }
+}
diff --git a/src/GleapClickListener.js b/src/GleapClickListener.js
index c6c4f172..74a6f038 100644
--- a/src/GleapClickListener.js
+++ b/src/GleapClickListener.js
@@ -25,8 +25,15 @@ export default class GleapClickListener {
         handleGleapLink(anchor.href);
       }
 
-      if (!GleapFrameManager.getInstance().isOpened()) {
-        GleapConsoleLogManager.getInstance().addLog(getDOMElementDescription(e.target), 'CLICK');
+      // While a capture request hides the widget the customer uses the page, so clicks count; the
+      // capture bar's own clicks don't.
+      const frameManager = GleapFrameManager.getInstance();
+      const captureHidden = typeof frameManager.isCaptureHidden === 'function' && frameManager.isCaptureHidden();
+      if (!frameManager.isOpened() || captureHidden) {
+        const ownCaptureUi = e.target.closest ? e.target.closest('.gleap-capture-root') : null;
+        if (!ownCaptureUi) {
+          GleapConsoleLogManager.getInstance().addLog(getDOMElementDescription(e.target), 'CLICK');
+        }
       }
     });
   }
diff --git a/src/GleapFrameManager.js b/src/GleapFrameManager.js
index f54a0a6a..d11e6b00 100644
--- a/src/GleapFrameManager.js
+++ b/src/GleapFrameManager.js
@@ -1,6 +1,7 @@
 import Gleap, {
   GleapAudioManager,
   GleapBannerManager,
+  GleapCaptureManager,
   GleapConfigManager,
   GleapConsoleLogManager,
   GleapCustomActionManager,
@@ -18,6 +19,7 @@ import Gleap, {
   GleapTranslationManager,
 } from './Gleap';
 import GleapAgentToolManager from './GleapAgentToolManager';
+import { getCaptureCapabilities } from './GleapCaptureSettings';
 import { bootstrapGleapFrame, loadFromGleapCache, runFunctionWhenDomIsReady, saveToGleapCache } from './GleapHelper';
 import { widgetLoaderMarkup, widgetMaxHeight } from './UI';
 
@@ -39,6 +41,8 @@ export default class GleapFrameManager {
   widgetExpanded = undefined;
   appliedWidgetExpanded = false;
   lastWidgetSizeUpdate = null;
+  // Hidden while the customer answers a capture request (see setCaptureHidden).
+  captureHidden = false;
   urlHandler = function (url, newTab) {
     if (url && url.length > 0) {
       if (newTab) {
@@ -169,7 +173,8 @@ export default class GleapFrameManager {
   }
 
   registerEscListener() {
-    if (this.escListener) {
+    // While a capture request hides the widget, Escape belongs to the page and the capture bar.
+    if (this.escListener || this.captureHidden) {
       return;
     }
 
@@ -208,6 +213,70 @@ export default class GleapFrameManager {
     this.markerManager = undefined;
     this.gleapFrameContainer = null;
     this.gleapFrame = null;
+    this.captureHidden = false;
+    try {
+      if (GleapCaptureManager) {
+        GleapCaptureManager.getInstance().onWidgetDestroyed();
+      }
+    } catch (e) {}
+  }
+
+  /**
+   * Hides the widget while the customer answers a capture request (capture bar, recording) without
+   * closing it: the Messenger keeps its state and connection and gets the result when it shows again.
+   * @param {boolean} hidden
+   * @param {boolean} reopen When showing it again: reopen the widget if it was closed meanwhile.
+   */
+  setCaptureHidden(hidden, reopen = true) {
+    this.captureHidden = !!hidden;
+    const container = this.gleapFrameContainer;
+    if (container) {
+      container.classList.toggle('gleap-frame-container--capture-hidden', this.captureHidden);
+    }
+    if (this.captureHidden) {
+      // Escape belongs to the page (and the capture bar) meanwhile.
+      this.unregisterEscListener();
+      this.setCaptureEditorOpen(false);
+      return;
+    }
+    if (!container) {
+      return;
+    }
+    if (!this.widgetOpened) {
+      if (reopen) {
+        this.showWidget();
+      }
+    } else {
+      this.registerEscListener();
+    }
+  }
+
+  isCaptureHidden() {
+    return this.captureHidden;
+  }
+
+  /**
+   * The Messenger's capture editor (annotating a screenshot) uses the whole viewport.
+   */
+  setCaptureEditorOpen(open) {
+    if (this.gleapFrameContainer) {
+      this.gleapFrameContainer.classList.toggle('gleap-frame-container--capture-editor', !!open);
+    }
+  }
+
+  /**
+   * Tells the Messenger what this page can capture (contract §7). Sent after every ping.
+   */
+  sendCaptureCapabilities() {
+    if (!this.comReady) {
+      return;
+    }
+    try {
+      this.sendMessage({
+        name: 'capture-capabilities',
+        data: getCaptureCapabilities(),
+      });
+    } catch (e) {}
   }
 
   isOpened() {
@@ -498,6 +567,7 @@ export default class GleapFrameManager {
     }
 
     this.hideMarkerManager();
+    this.setCaptureEditorOpen(false);
     if (this.gleapFrameContainer) {
       const container = this.gleapFrameContainer;
       container.classList.remove('gleap-frame-container--animate');
@@ -611,6 +681,7 @@ export default class GleapFrameManager {
         this.comReady = true;
         this.sendConfigUpdate();
         this.sendSessionUpdate();
+        this.sendCaptureCapabilities();
         this.workThroughQueue();
         setTimeout(() => {
           this.runWidgetShouldOpenCallback();
@@ -811,6 +882,16 @@ export default class GleapFrameManager {
       if (data.name === 'start-screen-drawing') {
         this.showDrawingScreen(data.data);
       }
+
+      if (
+        GleapCaptureManager &&
+        (data.name === 'capture-start' ||
+          data.name === 'capture-cancel' ||
+          data.name === 'capture-editor' ||
+          data.name === 'capture-done')
+      ) {
+        GleapCaptureManager.getInstance().handleMessengerMessage(data);
+      }
     });
 
     // Add window message listener.
diff --git a/src/GleapStreamedEvent.js b/src/GleapStreamedEvent.js
index a802860b..157fc019 100644
--- a/src/GleapStreamedEvent.js
+++ b/src/GleapStreamedEvent.js
@@ -6,7 +6,9 @@ import Gleap, {
   GleapSession,
   GleapAdminManager,
   GleapEventManager,
+  GleapCaptureManager,
 } from './Gleap';
+import { getWebSocketCaps } from './GleapCaptureSettings';
 import { gleapDataParser } from './GleapHelper';
 
 // At most this many events wait for a ping; the oldest ones (other than a session start) make room.
@@ -135,12 +137,21 @@ export default class GleapStreamedEvent {
       return;
     }
 
+    // What this page can capture for capture requests (contract §4, "SDK realtime").
+    let caps = '';
+    try {
+      const capabilities = getWebSocketCaps();
+      if (capabilities.length > 0) {
+        caps = '&caps=' + capabilities.join(',');
+      }
+    } catch (exp) {}
+
     this.socket = new WebSocket(
       `${GleapSession.getInstance().wsApiUrl}?gleapId=${
         GleapSession.getInstance().session.gleapId
       }&gleapHash=${GleapSession.getInstance().session.gleapHash}&apiKey=${
         GleapSession.getInstance().sdkKey
-      }&sdkVersion=${SDK_VERSION}`
+      }&sdkVersion=${SDK_VERSION}${caps}`
     );
     this.socket.addEventListener('open', this.handleOpenBound);
     this.socket.addEventListener('message', this.handleMessageBound);
@@ -284,6 +295,11 @@ export default class GleapStreamedEvent {
         }
       }
 
+      // A log request from a teammate, AI agent or workflow (capture requests, kind 'logs').
+      if (message.name === 'capture-request' && GleapCaptureManager) {
+        GleapCaptureManager.getInstance().handleServerRequest(message.data);
+      }
+
       if (message.name === 'checklist' && message?.data && window) {
         const checklistData = message.data;
         const completedSteps = checklistData.completedSteps ?? [];
diff --git a/src/UI.js b/src/UI.js
index ac0d761a..88f0d7d6 100644
--- a/src/UI.js
+++ b/src/UI.js
@@ -1423,6 +1423,36 @@ export const injectStyledCSS = (
       pointer-events: none;
       animation: none !important;
     }
+
+    /* Capture requests: hidden while the customer captures the page (the iframe stays alive), and
+       the whole viewport while the Messenger's capture editor is open. */
+    .gleap-frame-container--capture-hidden {
+      visibility: hidden !important;
+      pointer-events: none !important;
+      animation: none !important;
+    }
+
+    .gleap-frame-container--capture-editor {
+      top: 0 !important;
+      left: 0 !important;
+      right: 0 !important;
+      bottom: 0 !important;
+      width: 100vw !important;
+      max-width: 100vw !important;
+      height: 100vh !important;
+      height: 100dvh !important;
+      min-height: 0 !important;
+      max-height: none !important;
+      border-radius: 0 !important;
+      transform: none !important;
+      animation: none !important;
+    }
+
+    .gleap-frame-container--capture-editor .gleap-frame-container-inner {
+      width: 100% !important;
+      height: 100% !important;
+      max-height: none !important;
+    }
     
     .bb-feedback-button {
       margin: 0px;

From a05e19858fc55a4dec75dc7185c1e42217515878 Mon Sep 17 00:00:00 2001
From: Lukas Boehler <lukas@gleap.io>
Date: Wed, 30 Sep 2026 21:49:33 -0400
Subject: [PATCH 04/11] test: capture requests keep masked content private and
 honour the log kill switches

- Screenshot boxes cover private fields, rr-/gl- mask and block markers, the site's replay
  options, capture.maskSelectors, payment frames, open shadow roots and same-origin frames, and
  nothing else; an invalid selector doesn't switch the others off.
- Page recordings mask every input and leave masked, blocked and maskSelectors content and the
  capture bar out; timeline labels never carry field values or masked text.
- Log bundles carry only what the request includes (replay only when asked and enabled); log
  requests are answered "unsupported" when the app or the project switched them off, posted once
  per request id, and left to the device that claimed them first.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/GleapCaptureLogs.test.js    | 177 ++++++++++++++++++++++++++++
 src/GleapCaptureMasking.test.js | 203 ++++++++++++++++++++++++++++++++
 2 files changed, 380 insertions(+)
 create mode 100644 src/GleapCaptureLogs.test.js
 create mode 100644 src/GleapCaptureMasking.test.js

diff --git a/src/GleapCaptureLogs.test.js b/src/GleapCaptureLogs.test.js
new file mode 100644
index 00000000..edaf8637
--- /dev/null
+++ b/src/GleapCaptureLogs.test.js
@@ -0,0 +1,177 @@
+/**
+ * @jest-environment jsdom
+ */
+
+// Background log collection sends only what a bug report carries, only what the request asks for,
+// and nothing when the app switched it off (Gleap.setRemoteLogCollectionEnabled(false)).
+
+const mockFlowConfig = { enableWebReplays: true, capture: {} };
+const mockReplay = { startDate: 1, events: ['packed'], packed: true, type: 'rrweb' };
+const iso = (ms) => new Date(ms).toISOString();
+
+jest.mock('./Gleap', () => ({
+  __esModule: true,
+  default: { openConversation: jest.fn(), open: jest.fn() },
+  GleapConfigManager: {
+    getInstance: () => ({ getFlowConfig: () => mockFlowConfig, onConfigLoaded: (callback) => callback() }),
+  },
+  GleapConsoleLogManager: {
+    getInstance: () => ({
+      getLogs: () => [
+        { log: 'old', date: iso(1000), priority: 'INFO' },
+        { log: 'during', date: iso(50000), priority: 'ERROR' },
+      ],
+    }),
+  },
+  GleapNetworkIntercepter: {
+    getInstance: () => ({
+      getRequests: () => [
+        { url: 'https://app.test/a', date: iso(1000) },
+        { url: 'https://app.test/b', date: iso(52000) },
+      ],
+    }),
+  },
+  GleapCustomDataManager: { getInstance: () => ({ getCustomData: () => ({ plan: 'pro' }) }) },
+  GleapMetaDataManager: { getInstance: () => ({ getMetaData: () => ({ browser: 'Chrome' }), sessionStart: new Date(500) }) },
+  GleapStreamedEvent: { getInstance: () => ({ getEventArray: () => [{ name: 'pageView', date: new Date(51000) }] }) },
+  GleapReplayRecorder: { getInstance: () => ({ getReplayData: () => mockReplay, customOptions: {} }) },
+  GleapSession: {
+    getInstance: () => ({ session: { gleapId: 'g1' }, sdkKey: 'key', apiUrl: 'https://api.test', injectSession: () => {} }),
+  },
+  GleapFrameManager: {
+    getInstance: () => ({ sendMessage: jest.fn(), setCaptureHidden: jest.fn(), setCaptureEditorOpen: jest.fn() }),
+  },
+  GleapTranslationManager: { getInstance: () => ({ isRTLLayout: false }) },
+}));
+
+import { buildLogsBundle, normalizeInclude } from './GleapCaptureApi';
+
+describe('log bundle', () => {
+  const allKeys = ['consoleLog', 'networkLogs', 'customData', 'metaData', 'customEventLog'];
+
+  test('the bug report data, without a replay unless asked for', () => {
+    const bundle = buildLogsBundle({ deviceId: 'web-1' });
+    allKeys.forEach((key) => expect(bundle).toHaveProperty(key));
+    expect(bundle.webReplay).toBeUndefined();
+    expect(bundle).toEqual(expect.objectContaining({ platform: 'web', sdkType: 'JAVASCRIPT', deviceId: 'web-1' }));
+    expect(bundle.windowStart).toBe(iso(500));
+  });
+
+  test('only what include asks for (absent keys = not collected)', () => {
+    const bundle = buildLogsBundle({
+      include: { consoleLog: true, networkLogs: false, customData: false, metaData: true, customEventLog: false },
+    });
+    expect(
+      Object.keys(bundle)
+        .filter((key) => allKeys.indexOf(key) !== -1)
+        .sort()
+    ).toEqual(['consoleLog', 'metaData']);
+  });
+
+  test('the replay only when asked for and web replays are on', () => {
+    expect(buildLogsBundle({ include: { replays: true } }).webReplay).toEqual(mockReplay);
+    mockFlowConfig.enableWebReplays = false;
+    expect(buildLogsBundle({ include: { replays: true } }).webReplay).toBeUndefined();
+    mockFlowConfig.enableWebReplays = true;
+  });
+
+  test('a recording window keeps the entries of the window (with a short lead-in)', () => {
+    const bundle = buildLogsBundle({ windowStart: 50000, windowEnd: 60000 });
+    expect(bundle.consoleLog.map((entry) => entry.log)).toEqual(['during']);
+    expect(bundle.networkLogs.map((entry) => entry.url)).toEqual(['https://app.test/b']);
+    expect(bundle.windowStart).toBe(iso(50000));
+    expect(bundle.windowEnd).toBe(iso(60000));
+  });
+
+  test('include defaults: everything but replays', () => {
+    expect(normalizeInclude(undefined)).toEqual({
+      consoleLog: true,
+      networkLogs: true,
+      customData: true,
+      metaData: true,
+      customEventLog: true,
+      replays: false,
+    });
+    expect(normalizeInclude({ replays: true, consoleLog: 'yes' }).replays).toBe(true);
+    expect(normalizeInclude({ consoleLog: 'yes' }).consoleLog).toBe(true);
+  });
+});
+
+describe('log requests from the websocket', () => {
+  let api;
+  let manager;
+
+  const flush = () => new Promise((resolve) => setTimeout(resolve, 0));
+
+  beforeEach(() => {
+    jest.resetModules();
+    jest.doMock('./GleapCaptureApi', () => {
+      const actual = jest.requireActual('./GleapCaptureApi');
+      return {
+        ...actual,
+        claimCaptureRequest: jest.fn(() => Promise.resolve({ status: 200, data: { claimedElsewhere: false } })),
+        postCaptureLogs: jest.fn(() => Promise.resolve({ status: 200, data: {} })),
+        reportCaptureEvent: jest.fn(() => Promise.resolve({ status: 200, data: {} })),
+      };
+    });
+    api = require('./GleapCaptureApi');
+    const settings = require('./GleapCaptureSettings');
+    settings.setRemoteLogCollectionEnabled(true);
+    manager = new (require('./GleapCaptureManager').default)();
+    mockFlowConfig.capture = {};
+  });
+
+  const request = (id, options) => ({ id, kind: 'logs', options: options || {}, expiresAt: iso(Date.now() + 60000) });
+
+  test('claims, then posts the bundle once per request id', async () => {
+    manager.handleServerRequest(request('cr-1', { include: { replays: false } }));
+    manager.handleServerRequest(request('cr-1'));
+    await flush();
+
+    expect(api.claimCaptureRequest).toHaveBeenCalledTimes(1);
+    expect(api.claimCaptureRequest.mock.calls[0][1]).toEqual(
+      expect.objectContaining({ platform: 'web', sdkType: 'JAVASCRIPT' })
+    );
+    expect(api.postCaptureLogs).toHaveBeenCalledTimes(1);
+    expect(api.postCaptureLogs.mock.calls[0][0]).toBe('cr-1');
+    expect(api.reportCaptureEvent).not.toHaveBeenCalled();
+  });
+
+  test('switched off by the app: answered "unsupported", nothing collected', async () => {
+    require('./GleapCaptureSettings').setRemoteLogCollectionEnabled(false);
+    manager.handleServerRequest(request('cr-2'));
+    await flush();
+
+    expect(api.reportCaptureEvent).toHaveBeenCalledWith('cr-2', 'unsupported', 'disabled-by-app');
+    expect(api.claimCaptureRequest).not.toHaveBeenCalled();
+    expect(api.postCaptureLogs).not.toHaveBeenCalled();
+  });
+
+  test('switched off in the project: answered "unsupported", nothing collected', async () => {
+    mockFlowConfig.capture = { backgroundLogs: false };
+    manager.handleServerRequest(request('cr-3'));
+    await flush();
+
+    expect(api.reportCaptureEvent).toHaveBeenCalledWith('cr-3', 'unsupported', 'disabled-by-project');
+    expect(api.postCaptureLogs).not.toHaveBeenCalled();
+  });
+
+  test('claimed by another tab or device a moment ago: that one answers', async () => {
+    api.claimCaptureRequest.mockReturnValueOnce(Promise.resolve({ status: 200, data: { claimedElsewhere: true } }));
+    manager.handleServerRequest(request('cr-4'));
+    await flush();
+
+    expect(api.postCaptureLogs).not.toHaveBeenCalled();
+  });
+
+  test('ignores other kinds, expired requests and requests that are already final', async () => {
+    manager.handleServerRequest({ id: 'cr-5', kind: 'screenshot' });
+    manager.handleServerRequest({ id: 'cr-6', kind: 'logs', expiresAt: iso(Date.now() - 1000) });
+    api.claimCaptureRequest.mockReturnValueOnce(Promise.resolve({ status: 410, data: null }));
+    manager.handleServerRequest(request('cr-7'));
+    await flush();
+
+    expect(api.claimCaptureRequest).toHaveBeenCalledTimes(1);
+    expect(api.postCaptureLogs).not.toHaveBeenCalled();
+  });
+});
diff --git a/src/GleapCaptureMasking.test.js b/src/GleapCaptureMasking.test.js
new file mode 100644
index 00000000..897fbae8
--- /dev/null
+++ b/src/GleapCaptureMasking.test.js
@@ -0,0 +1,203 @@
+/**
+ * @jest-environment jsdom
+ */
+
+// What capture requests must keep private: the black boxes painted over screenshots, and the page
+// recording (rrweb) used where there is no screen capture. Both follow the rules bug reports use
+// (GleapInputMasking) plus flowConfig.capture.maskSelectors.
+
+const mockReplayRecorder = {
+  customOptions: {},
+  pauseForCapture: jest.fn(() => false),
+  resumeAfterCapture: jest.fn(),
+};
+
+jest.mock('./Gleap', () => ({
+  __esModule: true,
+  default: {},
+  GleapNetworkIntercepter: { getInstance: () => ({ getRequests: () => [], stopped: false, setStopped: () => {} }) },
+  GleapConsoleLogManager: { getInstance: () => ({ getLogs: () => [] }) },
+  GleapReplayRecorder: { getInstance: () => mockReplayRecorder },
+}));
+
+import { buildMaskSelector, collectMaskRects } from './GleapCaptureScreenshot';
+import { describeElement, PageRecording } from './GleapCaptureRecorder';
+import { unpack } from '@rrweb/packer';
+
+// jsdom has no layout: elements get the rect in their data-rect attribute ("x,y,width,height").
+const fakeRect = function () {
+  const value = this.getAttribute && this.getAttribute('data-rect');
+  const [x, y, width, height] = value ? value.split(',').map(Number) : [0, 0, 0, 0];
+  return { left: x, top: y, right: x + width, bottom: y + height, x, y, width, height };
+};
+const originalRect = Element.prototype.getBoundingClientRect;
+beforeAll(() => {
+  Element.prototype.getBoundingClientRect = fakeRect;
+});
+afterAll(() => {
+  Element.prototype.getBoundingClientRect = originalRect;
+});
+
+const rectsFor = (options) => collectMaskRects(options).map((r) => [r.x, r.y, r.width, r.height].join(','));
+
+describe('screenshot black boxes', () => {
+  test('private fields, masked and blocked elements, maskSelectors and payment frames; nothing else', () => {
+    document.body.innerHTML = `
+      <input data-rect="0,0,10,10" value="Jane Doe">
+      <input data-rect="0,20,10,10" type="password" value="hunter2">
+      <input data-rect="0,40,10,10" autocomplete="one-time-code" value="123456">
+      <input data-rect="0,60,10,10" autocomplete="cc-number" value="4242">
+      <input data-rect="0,80,10,10" autocomplete="section-pay cc-csc" value="123">
+      <input data-rect="0,100,10,10" class="gl-mask" value="secret">
+      <textarea data-rect="0,120,10,10" gleap-ignore="value">note</textarea>
+      <p data-rect="0,140,10,10" class="rr-mask">IBAN</p>
+      <div data-rect="0,160,10,10" class="gl-block">salary</div>
+      <div data-rect="0,180,10,10" class="rr-block">blocked</div>
+      <div data-rect="0,200,10,10" class="secret-panel">tax id</div>
+      <iframe data-rect="0,220,10,10" title="Secure card payment input frame"></iframe>
+      <iframe data-rect="0,240,10,10" src="https://js.stripe.com/v3/elements-inner-card.html"></iframe>
+      <p data-rect="0,260,10,10">Visible text</p>
+      <div class="bb-feedback-button rr-block" data-rect="0,280,10,10"></div>
+      <div class="gleap-capture-root rr-block gl-block" data-rect="0,300,10,10"></div>
+      <div class="gleap-frame-container rr-block" data-rect="0,320,10,10"><input type="password" data-rect="0,320,5,5"></div>`;
+
+    expect(rectsFor({ maskSelectors: ['.secret-panel'] }).sort()).toEqual(
+      [
+        '0,20,10,10',
+        '0,40,10,10',
+        '0,60,10,10',
+        '0,80,10,10',
+        '0,100,10,10',
+        '0,120,10,10',
+        '0,140,10,10',
+        '0,160,10,10',
+        '0,180,10,10',
+        '0,200,10,10',
+        '0,220,10,10',
+        '0,240,10,10',
+      ].sort()
+    );
+  });
+
+  test("the site's replay options: classes (string or RegExp), selectors and maskAllInputs", () => {
+    document.body.innerHTML = `
+      <div data-rect="0,0,10,10" class="private">a</div>
+      <div data-rect="0,20,10,10" class="pii-card">b</div>
+      <div data-rect="0,40,10,10" data-private>c</div>
+      <input data-rect="0,60,10,10" value="any value">`;
+
+    expect(
+      rectsFor({
+        privacyOptions: { blockClass: 'private', maskTextClass: /^pii-/, maskTextSelector: '[data-private]' },
+      }).sort()
+    ).toEqual(['0,0,10,10', '0,20,10,10', '0,40,10,10'].sort());
+    expect(rectsFor({ privacyOptions: { maskAllInputs: true } })).toEqual(['0,60,10,10']);
+  });
+
+  test('fields inside open shadow roots', () => {
+    document.body.innerHTML = '<fancy-field></fancy-field>';
+    const root = document.querySelector('fancy-field').attachShadow({ mode: 'open' });
+    root.innerHTML = '<input data-rect="5,5,10,10" type="password" value="shadow-secret"><input data-rect="5,25,10,10">';
+
+    expect(rectsFor({})).toEqual(['5,5,10,10']);
+  });
+
+  test('an invalid mask selector does not switch off the others', () => {
+    expect(buildMaskSelector({ blockSelector: '[[broken' }, ['.ok', '::nope(', 42])).toBe(
+      '.rr-block, .gl-block, .rr-mask, .gl-mask, .ok'
+    );
+
+    document.body.innerHTML =
+      '<div data-rect="0,0,10,10" class="gl-block"></div><div data-rect="0,20,10,10" class="ok"></div>';
+    expect(rectsFor({ maskSelectors: ['[[broken', '.ok'] }).sort()).toEqual(['0,0,10,10', '0,20,10,10']);
+  });
+
+  test('boxes of elements in a same-origin frame are offset by the frame and clipped to it', () => {
+    document.body.innerHTML = '<iframe data-rect="100,100,50,50"></iframe>';
+    const frame = document.querySelector('iframe');
+    frame.contentWindow.Element.prototype.getBoundingClientRect = fakeRect;
+    const frameDocument = frame.contentDocument;
+    frameDocument.body.innerHTML =
+      '<input type="password" data-rect="10,10,20,20"><input type="password" data-rect="40,40,30,30">';
+
+    expect(rectsFor({}).sort()).toEqual(['110,110,20,20', '140,140,10,10']);
+  });
+});
+
+describe('page recordings (no screen capture)', () => {
+  const record = (html, options = {}) =>
+    new Promise((resolve, reject) => {
+      document.body.innerHTML = html;
+      const recording = new PageRecording({
+        maxDurationSec: 60,
+        privacyOptions: options.privacyOptions || {},
+        maskSelectors: options.maskSelectors || [],
+        onTick: () => {},
+        onError: reject,
+        onStop: (result) => {
+          const reader = new FileReader();
+          reader.onload = () => resolve({ result, file: JSON.parse(reader.result) });
+          reader.onerror = reject;
+          reader.readAsText(result.blob);
+        },
+      });
+      recording.start();
+      const field = document.querySelector('#typed');
+      if (field) {
+        field.value = 'typed-while-recording';
+        field.dispatchEvent(new Event('input', { bubbles: true }));
+      }
+      setTimeout(() => recording.stop(), 20);
+    });
+
+  test('every input is masked; masked, blocked and maskSelectors elements stay out; the capture bar stays out', async () => {
+    const { result, file } = await record(
+      `<input value="Jane Doe"><input id="typed" type="text"><textarea>my note</textarea>
+       <p class="gl-mask">IBAN DE89</p><p class="rr-mask">rr text</p>
+       <div class="gl-block">salary 123</div><div class="secret-panel">tax id 99</div>
+       <div class="gleap-capture-root rr-block gl-block"><span>Go to where the issue happens</span></div>
+       <p>Visible text</p>`,
+      { maskSelectors: ['.secret-panel'] }
+    );
+    const recorded = JSON.stringify(file.events.map((event) => (file.packed ? unpack(event) : event)));
+
+    [
+      'Jane Doe',
+      'typed-while-recording',
+      'my note',
+      'IBAN DE89',
+      'rr text',
+      'salary 123',
+      'tax id 99',
+      'Go to where',
+    ].forEach((secret) => expect(recorded).not.toContain(secret));
+    expect(recorded).toContain('Visible text');
+    expect(result.method).toBe('rrweb');
+    expect(result.type).toBe('application/json');
+    expect(file).toEqual(
+      expect.objectContaining({ type: 'rrweb', packed: true, baseUrl: window.location.origin, startDate: result.startedAt })
+    );
+  });
+
+  test('the session replay pauses meanwhile and resumes afterwards', async () => {
+    mockReplayRecorder.pauseForCapture.mockReturnValueOnce(true);
+    mockReplayRecorder.resumeAfterCapture.mockClear();
+    await record('<p>page</p>');
+    expect(mockReplayRecorder.resumeAfterCapture).toHaveBeenCalledTimes(1);
+  });
+});
+
+describe('timeline labels', () => {
+  test('fields are named, never their value; text in masked areas is left out', () => {
+    document.body.innerHTML = `
+      <label for="email">Email</label><input id="email" value="jane@example.com">
+      <input id="pw" type="password" aria-label="Password" value="hunter2">
+      <div class="rr-mask"><button id="pay">Pay 1,234 EUR</button></div>
+      <button id="save" title="Save">Save changes</button>`;
+
+    expect(describeElement(document.getElementById('email'), {})).toBe('field "Email"');
+    expect(describeElement(document.getElementById('pw'), {})).toBe('field "Password"');
+    expect(describeElement(document.getElementById('pay'), {})).toBe('button');
+    expect(describeElement(document.getElementById('save'), {})).toBe('button "Save"');
+  });
+});

From 403e9dd1df5d196142bbae6e00ded91b16347bac Mon Sep 17 00:00:00 2001
From: Lukas Boehler <lukas@gleap.io>
Date: Wed, 30 Sep 2026 22:03:13 -0400
Subject: [PATCH 05/11] fix: WebM screen recordings carry their duration so
 players can seek them

MediaRecorder writes WebM as a live stream without a Duration in the Segment Info (Firefox, and
Chrome before MP4 recording), so players showed no length and couldn't seek. The finished
recording now gets the measured duration before the preview and the upload: an existing Duration
is overwritten in place; otherwise one is added to the Info, with the Info size, a known Segment
size and SeekHead positions after it adjusted (files whose SeekHead points at Cues are left
alone). Anything unexpected leaves the file as recorded; MP4 is untouched. No dependency
(~1.2 kB gzip).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/GleapCaptureRecorder.js |  19 ++-
 src/GleapWebmDuration.js    | 262 ++++++++++++++++++++++++++++++++++++
 2 files changed, 280 insertions(+), 1 deletion(-)
 create mode 100644 src/GleapWebmDuration.js

diff --git a/src/GleapCaptureRecorder.js b/src/GleapCaptureRecorder.js
index 79feeb90..71cde25f 100644
--- a/src/GleapCaptureRecorder.js
+++ b/src/GleapCaptureRecorder.js
@@ -4,6 +4,7 @@ import { GleapConsoleLogManager, GleapNetworkIntercepter, GleapReplayRecorder }
 import { isMobile } from './GleapHelper';
 import { isBlockedElement, isMaskMarker } from './GleapInputMasking';
 import { approximateSize } from './GleapReplayRecorder';
+import { fixWebmDuration } from './GleapWebmDuration';
 
 // Recordings for capture requests (contract §8): the screen through getDisplayMedia + MediaRecorder
 // on desktop browsers, a page recording (rrweb) where there is no getDisplayMedia (phones, tablets).
@@ -262,7 +263,23 @@ export class DisplayRecording {
       this.options.onError(new Error('empty-recording'));
       return;
     }
-    this.options.onStop(result);
+    const deliver = (finalBlob) => {
+      result.blob = finalBlob;
+      try {
+        this.options.onStop(result);
+      } catch (error) {
+        try {
+          this.options.onError(error);
+        } catch (exp) {}
+      }
+    };
+    if (baseType !== 'video/webm') {
+      deliver(blob);
+      return;
+    }
+    // WebM from MediaRecorder has no duration, so players couldn't seek it (MP4 has one). The patch
+    // falls back to the file as recorded on any problem.
+    fixWebmDuration(blob, result.durationMs).then(deliver);
   }
 
   fail(error) {
diff --git a/src/GleapWebmDuration.js b/src/GleapWebmDuration.js
new file mode 100644
index 00000000..ca04f259
--- /dev/null
+++ b/src/GleapWebmDuration.js
@@ -0,0 +1,262 @@
+// MediaRecorder writes WebM as a live stream: the Segment Info has no Duration, so players can't
+// show the length or seek (Firefox, and Chrome before MP4 recording). This sets the Duration
+// (EBML element 0x4489 in Segment > Info) of the finished file. Any surprise in the file leaves it
+// as it was: the result is never worse than the input.
+
+const EBML_HEADER = 0x1a45dfa3;
+const SEGMENT = 0x18538067;
+const SEEK_HEAD = 0x114d9b74;
+const SEEK = 0x4dbb;
+const SEEK_ID = 0x53ab;
+const SEEK_POSITION = 0x53ac;
+const CUES = 0x1c53bb6b;
+const INFO = 0x1549a966;
+const CLUSTER = 0x1f43b675;
+const TIMECODE_SCALE = 0x2ad7b1;
+const DURATION = 0x4489;
+// The Segment Info sits right after the header; this much of the file is plenty to find it.
+const HEAD_BYTES = 64 * 1024;
+
+// An EBML variable-length integer: element ids keep their length marker, sizes don't. A size with
+// all value bits set means "unknown" (live streams use it for the Segment and Clusters).
+const readVint = (bytes, pos, isId) => {
+  const first = bytes[pos];
+  if (!first) {
+    return null;
+  }
+  let length = 1;
+  let marker = 0x80;
+  while (!(first & marker)) {
+    marker >>= 1;
+    length += 1;
+  }
+  if (length > (isId ? 4 : 8) || pos + length > bytes.length) {
+    return null;
+  }
+  let value = isId ? first : first & (marker - 1);
+  let allOnes = (first & (marker - 1)) === marker - 1;
+  for (let i = 1; i < length; i++) {
+    value = value * 256 + bytes[pos + i];
+    allOnes = allOnes && bytes[pos + i] === 0xff;
+  }
+  return { value, length, unknown: !isId && allOnes };
+};
+
+const readElement = (bytes, pos) => {
+  const id = readVint(bytes, pos, true);
+  const size = id && readVint(bytes, pos + id.length, false);
+  if (!size) {
+    return null;
+  }
+  return {
+    id: id.value,
+    start: pos,
+    idLength: id.length,
+    size: size.value,
+    unknown: size.unknown,
+    dataStart: pos + id.length + size.length,
+  };
+};
+
+// The size in `width` bytes (at least `minWidth`, as few as possible otherwise), or null.
+const encodeSize = (value, minWidth) => {
+  for (let width = minWidth; width <= 8; width++) {
+    if (value < Math.pow(2, 7 * width) - 1) {
+      const bytes = new Uint8Array(width);
+      let rest = value;
+      for (let i = width - 1; i >= 0; i--) {
+        bytes[i] = rest % 256;
+        rest = Math.floor(rest / 256);
+      }
+      bytes[0] |= 0x80 >> (width - 1);
+      return bytes;
+    }
+  }
+  return null;
+};
+
+const readUint = (bytes, pos, size) => {
+  let value = 0;
+  for (let i = 0; i < size; i++) {
+    value = value * 256 + bytes[pos + i];
+  }
+  return value;
+};
+
+const writeUint = (bytes, pos, size, value) => {
+  let rest = value;
+  for (let i = size - 1; i >= 0; i--) {
+    bytes[pos + i] = rest % 256;
+    rest = Math.floor(rest / 256);
+  }
+  return rest === 0;
+};
+
+// The SeekPosition entries of a SeekHead ({pos, size, value}), or null when it can't be read or
+// points at Cues (cluster positions inside them would move too).
+const seekPositions = (bytes, seekHead) => {
+  const positions = [];
+  for (let pos = seekHead.dataStart; pos < seekHead.dataStart + seekHead.size;) {
+    const seek = readElement(bytes, pos);
+    if (!seek || seek.unknown) {
+      return null;
+    }
+    for (let at = seek.dataStart; seek.id === SEEK && at < seek.dataStart + seek.size;) {
+      const child = readElement(bytes, at);
+      if (!child || child.unknown || child.size > 8) {
+        return null;
+      }
+      const value = readUint(bytes, child.dataStart, child.size);
+      if (child.id === SEEK_ID && value === CUES) {
+        return null;
+      }
+      if (child.id === SEEK_POSITION) {
+        positions.push({ pos: child.dataStart, size: child.size, value });
+      }
+      at = child.dataStart + child.size;
+    }
+    pos = seek.dataStart + seek.size;
+  }
+  return positions;
+};
+
+// The file with the Duration set, or null when it can't be done safely.
+const withDuration = (blob, bytes, durationMs) => {
+  const header = readElement(bytes, 0);
+  if (!header || header.id !== EBML_HEADER || header.unknown) {
+    return null;
+  }
+  const segment = readElement(bytes, header.dataStart + header.size);
+  if (!segment || segment.id !== SEGMENT) {
+    return null;
+  }
+
+  const seekHeads = [];
+  let info = null;
+  for (let pos = segment.dataStart; pos < bytes.length && !info;) {
+    const element = readElement(bytes, pos);
+    if (!element || element.unknown || element.id === CLUSTER || element.id === CUES) {
+      return null;
+    }
+    if (element.id === SEEK_HEAD) {
+      seekHeads.push(element);
+    }
+    if (element.id === INFO) {
+      info = element;
+    }
+    pos = element.dataStart + element.size;
+  }
+  const infoEnd = info ? info.dataStart + info.size : 0;
+  if (!info || infoEnd > bytes.length) {
+    return null;
+  }
+
+  let timecodeScale = 1000000;
+  let duration = null;
+  for (let pos = info.dataStart; pos < infoEnd;) {
+    const child = readElement(bytes, pos);
+    if (!child || child.unknown || child.dataStart + child.size > infoEnd) {
+      return null;
+    }
+    if (child.id === TIMECODE_SCALE && child.size > 0 && child.size <= 6) {
+      timecodeScale = readUint(bytes, child.dataStart, child.size) || timecodeScale;
+    }
+    if (child.id === DURATION) {
+      duration = child;
+    }
+    pos = child.dataStart + child.size;
+  }
+  // In Segment ticks: milliseconds with the usual TimecodeScale of 1,000,000 ns.
+  const value = (durationMs * 1000000) / timecodeScale;
+  const head = bytes.slice();
+  const rest = blob.slice(bytes.length);
+
+  if (duration) {
+    // Overwrite it in place: nothing moves.
+    const view = new DataView(head.buffer);
+    if (duration.size === 8) {
+      view.setFloat64(duration.dataStart, value);
+    } else if (duration.size === 4) {
+      view.setFloat32(duration.dataStart, value);
+    } else {
+      return null;
+    }
+    return new Blob([head, rest], { type: blob.type });
+  }
+
+  // Add one at the end of the Info. Everything after the Info's start moves by the added bytes: a
+  // SeekHead before it (MediaRecorder writes none, other muxers do) and a known Segment size follow.
+  const element = new Uint8Array(11);
+  element.set([0x44, 0x89, 0x88]);
+  new DataView(element.buffer).setFloat64(3, value);
+  const infoSize = encodeSize(info.size + element.length, info.dataStart - info.start - info.idLength);
+  if (!infoSize) {
+    return null;
+  }
+  const infoHeader = new Uint8Array(info.idLength + infoSize.length);
+  infoHeader.set(head.subarray(info.start, info.start + info.idLength));
+  infoHeader.set(infoSize, info.idLength);
+  const added = infoHeader.length - (info.dataStart - info.start) + element.length;
+  for (let i = 0; i < seekHeads.length; i++) {
+    const positions = seekPositions(bytes, seekHeads[i]);
+    if (!positions || seekHeads[i].dataStart + seekHeads[i].size > info.start) {
+      return null;
+    }
+    for (let j = 0; j < positions.length; j++) {
+      const target = positions[j];
+      if (segment.dataStart + target.value > info.start && !writeUint(head, target.pos, target.size, target.value + added)) {
+        return null;
+      }
+    }
+  }
+  if (!segment.unknown) {
+    const segmentSizeWidth = segment.dataStart - segment.start - segment.idLength;
+    const segmentSize = encodeSize(segment.size + added, segmentSizeWidth);
+    if (!segmentSize || segmentSize.length !== segmentSizeWidth) {
+      return null;
+    }
+    head.set(segmentSize, segment.start + segment.idLength);
+  }
+  return new Blob(
+    [
+      head.subarray(0, info.start),
+      infoHeader,
+      head.subarray(info.dataStart, infoEnd),
+      element,
+      head.subarray(infoEnd),
+      rest,
+    ],
+    { type: blob.type }
+  );
+};
+
+/**
+ * The recording with its duration set in the WebM header; the recording as it was when it is not a
+ * WebM file this can safely change, or on any error. Never rejects.
+ * @param {Blob} blob
+ * @param {number} durationMs
+ * @returns {Promise<Blob>}
+ */
+export const fixWebmDuration = (blob, durationMs) => {
+  try {
+    if (!blob || !(durationMs > 0) || typeof blob.slice !== 'function') {
+      return Promise.resolve(blob);
+    }
+    const head = blob.slice(0, Math.min(blob.size, HEAD_BYTES));
+    if (typeof head.arrayBuffer !== 'function') {
+      return Promise.resolve(blob);
+    }
+    return head.arrayBuffer().then(
+      (buffer) => {
+        try {
+          return withDuration(blob, new Uint8Array(buffer), durationMs) || blob;
+        } catch (exp) {
+          return blob;
+        }
+      },
+      () => blob
+    );
+  } catch (exp) {
+    return Promise.resolve(blob);
+  }
+};

From 99c391c796962e0d2c248e9f6f001125a4b3537c Mon Sep 17 00:00:00 2001
From: Lukas Boehler <lukas@gleap.io>
Date: Wed, 30 Sep 2026 23:01:38 -0400
Subject: [PATCH 06/11] feat: offer a page recording when screen sharing
 doesn't start

When a desktop recording's getDisplayMedia is denied, blocked by a policy,
unavailable or the picker is cancelled, the capture bar stays open with
"Screen sharing didn't start. You can record this page instead." and
"Record this page" (rrweb page recording, method 'rrweb') / "Cancel".
Only a Cancel there reports the outcome: capture-state + /event 'declined'
(NotAllowedError/SecurityError) or 'failed' with the error as reason.
Labels come from capture-start.labels (recordPage / recordPageHint) with
English fallbacks. The choice survives page loads, so "Record again" after
a navigation goes straight to a page recording.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/GleapCaptureManager.js | 51 +++++++++++++++++++++++++++++++-------
 src/GleapCaptureUI.js      | 15 +++++++++++
 2 files changed, 57 insertions(+), 9 deletions(-)

diff --git a/src/GleapCaptureManager.js b/src/GleapCaptureManager.js
index 45dff7a9..8ed00010 100644
--- a/src/GleapCaptureManager.js
+++ b/src/GleapCaptureManager.js
@@ -318,6 +318,7 @@ export default class GleapCaptureManager {
       resumed: !!params.resumed,
       phase: params.phase,
       interrupted: params.phase === 'interrupted',
+      pageRecording: params.pageRecording === true,
       micOn: false,
       startedAt: Date.now(),
       lastTick: -1,
@@ -362,11 +363,17 @@ export default class GleapCaptureManager {
     const allowed =
       session.options.audio === true &&
       getCaptureConfig().allowMicrophone === true &&
-      getRecordingMethod() === 'display' &&
+      this.usesScreenRecording(session) &&
       hasUserMedia();
     return allowed ? { available: true, on: session.micOn } : null;
   }
 
+  // Screen recording (getDisplayMedia) unless the browser has none or the customer chose a page
+  // recording after screen sharing didn't start.
+  usesScreenRecording(session) {
+    return getRecordingMethod() === 'display' && !session.pageRecording;
+  }
+
   /**
    * Ends a session: stops recordings and uploads, removes the capture UI and shows Gleap's UI again.
    * restore: show the widget again (or, after a page load, open the conversation).
@@ -469,6 +476,10 @@ export default class GleapCaptureManager {
         case 'start':
           this.startRecording(session);
           break;
+        case 'record-page':
+          session.pageRecording = true;
+          this.startRecording(session);
+          break;
         case 'stop':
           if (session.recording) {
             session.recording.stop();
@@ -484,7 +495,12 @@ export default class GleapCaptureManager {
           this.retakeRecording(session);
           break;
         case 'cancel':
-          this.cancelSession(session, 'cancelled');
+          if (session.phase === 'fallback') {
+            // Screen sharing didn't start and the customer doesn't want a page recording either.
+            this.failSession(session, session.fallbackState, session.fallbackReason);
+          } else {
+            this.cancelSession(session, 'cancelled');
+          }
           break;
         default:
           break;
@@ -606,7 +622,7 @@ export default class GleapCaptureManager {
   // ----- Recording --------------------------------------------------------------------------------
 
   startRecording(session) {
-    if (session.kind !== 'recording' || (session.phase !== 'bar' && session.phase !== 'interrupted')) {
+    if (session.kind !== 'recording' || ['bar', 'interrupted', 'fallback'].indexOf(session.phase) === -1) {
       return;
     }
     const active = () => this.session === session;
@@ -632,7 +648,7 @@ export default class GleapCaptureManager {
       }
     };
 
-    if (getRecordingMethod() === 'display') {
+    if (this.usesScreenRecording(session)) {
       // Called inside the Start click: getDisplayMedia needs that user activation.
       const streamPromise = requestDisplayStream(isDesktopChromium());
       session.phase = 'starting';
@@ -654,11 +670,9 @@ export default class GleapCaptureManager {
           });
         })
         .catch((error) => {
-          if (!active()) {
-            return;
+          if (active()) {
+            this.offerPageRecording(session, error);
           }
-          const declined = error && (error.name === 'NotAllowedError' || error.name === 'SecurityError');
-          this.failSession(session, declined ? 'declined' : 'failed', errorReason(error));
         });
       return;
     }
@@ -676,6 +690,22 @@ export default class GleapCaptureManager {
     this.onRecordingStarted(session, recording.startedAt, false);
   }
 
+  /**
+   * Screen sharing didn't start (declined in the picker, blocked by a policy, unavailable, or the
+   * recorder couldn't start): the bar stays and offers a page recording instead. Only a Cancel
+   * there reports the outcome ('declined' when sharing was refused).
+   */
+  offerPageRecording(session, error) {
+    const name = error && error.name;
+    session.phase = 'fallback';
+    session.recording = null;
+    session.fallbackState = name === 'NotAllowedError' || name === 'SecurityError' ? 'declined' : 'failed';
+    session.fallbackReason = errorReason(error);
+    this.ui.showPageRecordingOffer();
+    this.persist(session);
+    this.sendState(session.requestId, 'bar');
+  }
+
   onRecordingStarted(session, startedAt, hasMicrophone) {
     session.phase = 'recording';
     session.interrupted = false;
@@ -899,7 +929,7 @@ export default class GleapCaptureManager {
       return;
     }
     let phase = null;
-    if (session.phase === 'bar' || session.phase === 'capturing' || session.phase === 'starting') {
+    if (['bar', 'capturing', 'starting', 'fallback'].indexOf(session.phase) !== -1) {
       phase = session.interrupted ? 'recording' : 'bar';
     } else if (
       session.kind === 'recording' &&
@@ -929,6 +959,7 @@ export default class GleapCaptureManager {
           options: session.options,
           labels: session.rawLabels,
           phase,
+          pageRecording: session.pageRecording === true,
           gleapId,
           sdkKey,
           at: Date.now(),
@@ -974,6 +1005,8 @@ export default class GleapCaptureManager {
         ticketShareToken: stored.ticketShareToken,
         options: stored.options,
         labels: stored.labels,
+        // The customer already switched to a page recording because screen sharing didn't start.
+        pageRecording: stored.pageRecording === true,
         resumed: true,
         phase: stored.kind === 'recording' && stored.phase === 'recording' ? 'interrupted' : 'bar',
       });
diff --git a/src/GleapCaptureUI.js b/src/GleapCaptureUI.js
index d55d34ba..52429e0a 100644
--- a/src/GleapCaptureUI.js
+++ b/src/GleapCaptureUI.js
@@ -26,6 +26,8 @@ export const DEFAULT_CAPTURE_LABELS = {
   permissionDenied: 'Screen capture was blocked. You can upload a file instead.',
   notSupported: "Screen capture isn't available here. You can upload a file instead.",
   failed: "That didn't work. Please try again or upload a file.",
+  recordPage: 'Record this page',
+  recordPageHint: "Screen sharing didn't start. You can record this page instead.",
 };
 
 /**
@@ -417,6 +419,19 @@ export default class GleapCaptureUI {
     );
   }
 
+  /**
+   * Screen sharing didn't start (declined, blocked or unavailable): hint · Record this page · Cancel.
+   */
+  showPageRecordingOffer() {
+    const labels = this.labels;
+    this.bar(
+      labels.recordPage,
+      el('div', 'hint', [labels.recordPageHint]),
+      [this.button(labels.recordPage, 'record-page', 'primary', 'record'), this.button(labels.barCancel, 'cancel')],
+      0
+    );
+  }
+
   /**
    * While recording: red dot · Recording 0:12 / 1:00 · (microphone) · Stop.
    */

From c4bf76a2549c398b0f7d849068d5c2a9bfc37483 Mon Sep 17 00:00:00 2001
From: Lukas Boehler <lukas@gleap.io>
Date: Wed, 30 Sep 2026 23:36:15 -0400
Subject: [PATCH 07/11] fix: screen recordings blur what screenshots mask; the
 log switch also covers attached logs

A getDisplayMedia video can't be masked afterwards, so while a screen
(tab/window/screen) recording runs the live page now carries a privacy
veil: one constructed stylesheet (CSP-safe; nonce'd <style> fallback),
adopted by the document, its open shadow roots and same-origin frames,
that blurs (filter: blur(12px), plus -webkit-text-security on fields)
everything screenshots mask: rr-/gl- block and mask markers, the replay
options' classes (string or RegExp) and selectors, gleap-ignore="value"
fields, password / one-time-code / card fields, masked input kinds,
payment frames and flowConfig.capture.maskSelectors. Only the outermost
matches are blurred and never <html>/<body> (their children instead), so
the capture bar stays fixed and crisp. Content added later is covered.
It goes up inside the Start click (before the picker) and the recorder
starts only once it is painted; it comes down on stop, "Stop sharing",
max duration, cancel, fallback, errors, pagehide and destroy. Page
recordings (rrweb) and screenshots don't use it.

Gleap.setRemoteLogCollectionEnabled(false) now also keeps logs off
screenshots and recordings (attachLogs), checked at capture time and
again before posting, as iOS and Android do.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 index.d.ts                      |   7 +-
 src/Gleap.js                    |   7 +-
 src/GleapCaptureLogs.test.js    |  18 ++
 src/GleapCaptureManager.js      |  59 +++++-
 src/GleapCaptureMasking.test.js | 101 +++++++++
 src/GleapCaptureRecorder.js     |   9 +-
 src/GleapCaptureScreenshot.js   |  70 ++++++-
 src/GleapCaptureUI.js           |   2 +
 src/GleapCaptureVeil.js         | 348 ++++++++++++++++++++++++++++++++
 src/GleapInputMasking.js        |  37 ++++
 10 files changed, 639 insertions(+), 19 deletions(-)
 create mode 100644 src/GleapCaptureVeil.js

diff --git a/index.d.ts b/index.d.ts
index f10cadaf..cdcddd40 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -416,9 +416,10 @@ export namespace Gleap {
    */
   function setCaptureEnabled(enabled: boolean): void;
   /**
-   * Enables or disables sending logs when teammates, AI agents or workflows request them
-   * (default: enabled). Only data a bug report carries is sent: console and network logs, custom
-   * data, environment data and events. Can be called before initialize.
+   * Enables or disables sending logs when teammates, AI agents or workflows request them, on their
+   * own or along with a screenshot or screen recording (default: enabled). Only data a bug report
+   * carries is sent: console and network logs, custom data, environment data and events. Can be
+   * called before initialize.
    */
   function setRemoteLogCollectionEnabled(enabled: boolean): void;
 }
diff --git a/src/Gleap.js b/src/Gleap.js
index 99f9f505..f7c36e25 100755
--- a/src/Gleap.js
+++ b/src/Gleap.js
@@ -561,9 +561,10 @@ class Gleap {
   }
 
   /**
-   * Enables or disables sending logs when teammates, AI agents or workflows request them (default:
-   * enabled). Only data a bug report carries is sent (console and network logs, custom data,
-   * environment data, events). Can be called before initialize.
+   * Enables or disables sending logs when teammates, AI agents or workflows request them, on their
+   * own or along with a screenshot or screen recording (default: enabled). Only data a bug report
+   * carries is sent (console and network logs, custom data, environment data, events). Can be
+   * called before initialize.
    * @param {boolean} enabled
    */
   static setRemoteLogCollectionEnabled(enabled) {
diff --git a/src/GleapCaptureLogs.test.js b/src/GleapCaptureLogs.test.js
index edaf8637..c3051a54 100644
--- a/src/GleapCaptureLogs.test.js
+++ b/src/GleapCaptureLogs.test.js
@@ -164,6 +164,24 @@ describe('log requests from the websocket', () => {
     expect(api.postCaptureLogs).not.toHaveBeenCalled();
   });
 
+  test('logs along with a screenshot or recording: none when the app switched log collection off', async () => {
+    const settings = require('./GleapCaptureSettings');
+    const session = { options: { attachLogs: true } };
+
+    settings.setRemoteLogCollectionEnabled(false);
+    expect(manager.attachesLogs(session)).toBe(false);
+    manager.postLogs('cr-8', { consoleLog: [] });
+    await flush();
+    expect(api.postCaptureLogs).not.toHaveBeenCalled();
+
+    settings.setRemoteLogCollectionEnabled(true);
+    expect(manager.attachesLogs(session)).toBe(true);
+    expect(manager.attachesLogs({ options: { attachLogs: false } })).toBe(false);
+    manager.postLogs('cr-8', { consoleLog: [] });
+    await flush();
+    expect(api.postCaptureLogs).toHaveBeenCalledTimes(1);
+  });
+
   test('ignores other kinds, expired requests and requests that are already final', async () => {
     manager.handleServerRequest({ id: 'cr-5', kind: 'screenshot' });
     manager.handleServerRequest({ id: 'cr-6', kind: 'logs', expiresAt: iso(Date.now() - 1000) });
diff --git a/src/GleapCaptureManager.js b/src/GleapCaptureManager.js
index 8ed00010..bc0a446a 100644
--- a/src/GleapCaptureManager.js
+++ b/src/GleapCaptureManager.js
@@ -32,6 +32,7 @@ import {
   setRemoteLogCollectionEnabled,
 } from './GleapCaptureSettings';
 import GleapCaptureUI, { resolveCaptureLabels } from './GleapCaptureUI';
+import { applyPrivacyVeil } from './GleapCaptureVeil';
 
 // Capture requests on the web (contract §7): the Messenger asks for a screenshot or a recording
 // (capture-start), this page shows the capture bar, captures, and hands the result back (screenshot:
@@ -173,6 +174,37 @@ export default class GleapCaptureManager {
     return Array.isArray(selectors) ? selectors.filter((selector) => typeof selector === 'string') : [];
   }
 
+  // Logs go along with a screenshot or recording unless the request says otherwise or the app
+  // switched remote log collection off (Gleap.setRemoteLogCollectionEnabled(false)).
+  attachesLogs(session) {
+    return !!(session && session.options && session.options.attachLogs) && isRemoteLogCollectionEnabled();
+  }
+
+  // A screen recording is video and can't be masked afterwards: while it runs, the live page blurs
+  // what screenshots mask.
+  applyVeil(session) {
+    this.liftVeil(session);
+    try {
+      session.veil = applyPrivacyVeil({ privacyOptions: this.privacyOptions(), maskSelectors: this.maskSelectors() });
+    } catch (exp) {
+      session.veil = null;
+    }
+  }
+
+  // veil: a particular one (default: the session's).
+  liftVeil(session, veil) {
+    const target = veil || session.veil;
+    if (!target) {
+      return;
+    }
+    if (session.veil === target) {
+      session.veil = null;
+    }
+    try {
+      target.remove();
+    } catch (exp) {}
+  }
+
   // ----- Messenger bridge -------------------------------------------------------------------------
 
   /**
@@ -388,6 +420,7 @@ export default class GleapCaptureManager {
         session.recording.cancel();
       }
     } catch (exp) {}
+    this.liftVeil(session);
     try {
       if (session.timeline) {
         session.timeline.stop();
@@ -527,7 +560,7 @@ export default class GleapCaptureManager {
 
     // The logs as they are at the moment of the capture.
     let logsBundle = null;
-    if (session.options.attachLogs && this.logsPostedFor.indexOf(session.requestId) === -1) {
+    if (this.attachesLogs(session) && this.logsPostedFor.indexOf(session.requestId) === -1) {
       try {
         logsBundle = buildLogsBundle({ include: session.options.include, deviceId: this.getDeviceId() });
       } catch (exp) {}
@@ -599,7 +632,8 @@ export default class GleapCaptureManager {
   }
 
   postLogs(requestId, bundle) {
-    if (this.logsPostedFor.indexOf(requestId) !== -1) {
+    // Also checked here: the app may switch log collection off between the capture and Send.
+    if (!isRemoteLogCollectionEnabled() || this.logsPostedFor.indexOf(requestId) !== -1) {
       return;
     }
     this.logsPostedFor.push(requestId);
@@ -651,15 +685,30 @@ export default class GleapCaptureManager {
     if (this.usesScreenRecording(session)) {
       // Called inside the Start click: getDisplayMedia needs that user activation.
       const streamPromise = requestDisplayStream(isDesktopChromium());
+      // The veil is up while the customer picks what to share, so even the first frame has it.
+      this.applyVeil(session);
+      const veil = session.veil;
       session.phase = 'starting';
       this.ui.showRecordBar({ busy: true, mic: this.micState(session), interrupted: session.interrupted });
       streamPromise
+        .then((stream) => (veil ? veil.ready() : Promise.resolve()).then(() => stream))
         .then((stream) => {
           if (!active()) {
             stopStream(stream);
             return null;
           }
-          const recording = new DisplayRecording({ maxDurationSec, onTick, onStop, onError });
+          const recording = new DisplayRecording({
+            maxDurationSec,
+            onTick,
+            onStop,
+            onError,
+            // Nothing more can be recorded (stopped, "Stop sharing", failed or cancelled).
+            onReleased: () => {
+              if (veil) {
+                this.liftVeil(session, veil);
+              }
+            },
+          });
           session.recording = recording;
           return recording.start(stream, !!this.micState(session) && session.micOn).then((started) => {
             if (active()) {
@@ -697,6 +746,7 @@ export default class GleapCaptureManager {
    */
   offerPageRecording(session, error) {
     const name = error && error.name;
+    this.liftVeil(session);
     session.phase = 'fallback';
     session.recording = null;
     session.fallbackState = name === 'NotAllowedError' || name === 'SecurityError' ? 'declined' : 'failed';
@@ -737,6 +787,7 @@ export default class GleapCaptureManager {
   }
 
   onRecordingStopped(session, result) {
+    this.liftVeil(session);
     session.recording = null;
     session.result = result;
     session.timelineEntries = session.timeline ? session.timeline.stop(result.endedAt) : [];
@@ -777,7 +828,7 @@ export default class GleapCaptureManager {
     this.sendState(session.requestId, 'uploading', { progress: 0 });
 
     // Logs for the recording window go along (in parallel with the upload).
-    if (session.options.attachLogs) {
+    if (this.attachesLogs(session)) {
       try {
         this.postLogs(
           session.requestId,
diff --git a/src/GleapCaptureMasking.test.js b/src/GleapCaptureMasking.test.js
index 897fbae8..a2003cd5 100644
--- a/src/GleapCaptureMasking.test.js
+++ b/src/GleapCaptureMasking.test.js
@@ -21,6 +21,7 @@ jest.mock('./Gleap', () => ({
 }));
 
 import { buildMaskSelector, collectMaskRects } from './GleapCaptureScreenshot';
+import { applyPrivacyVeil, buildVeilRules } from './GleapCaptureVeil';
 import { describeElement, PageRecording } from './GleapCaptureRecorder';
 import { unpack } from '@rrweb/packer';
 
@@ -124,6 +125,106 @@ describe('screenshot black boxes', () => {
   });
 });
 
+describe('privacy veil over screen recordings', () => {
+  // jsdom can't evaluate :is() with :not(... *); the plain form of each rule (what browsers without
+  // :is() get) shows which elements a rule covers.
+  const veiledIds = (privacyOptions, maskSelectors) => {
+    const selectors = buildVeilRules(privacyOptions, maskSelectors).map((entry) =>
+      (entry.fallback || entry.rules[0]).replace(/\s*\{[^}]*\}\s*$/, '')
+    );
+    return Array.from(document.querySelectorAll('[id]'))
+      .filter((element) => selectors.some((selector) => element.matches(selector)))
+      .map((element) => element.id);
+  };
+
+  test('covers what screenshots mask: private fields, masked and blocked elements, maskSelectors, payment frames', () => {
+    document.body.innerHTML = `
+      <input id="name" value="Jane Doe">
+      <input id="password" type="password">
+      <input id="otp" autocomplete="one-time-code">
+      <input id="card" autocomplete="cc-number">
+      <input id="csc" autocomplete="section-pay cc-csc">
+      <input id="marked" class="gl-mask">
+      <textarea id="ignored" gleap-ignore="value"></textarea>
+      <div gleap-ignore="value"><input id="ignored-inner"><input id="ignored-checkbox" type="checkbox"></div>
+      <p id="iban" class="rr-mask">IBAN</p>
+      <div id="salary" class="gl-block">salary</div>
+      <div id="blocked" class="rr-block">blocked</div>
+      <div id="tax" class="secret-panel">tax id</div>
+      <iframe id="titled-frame" title="Secure card payment input frame"></iframe>
+      <iframe id="stripe-frame" src="https://js.stripe.com/v3/elements-inner-card.html"></iframe>
+      <iframe id="video" src="https://www.youtube.com/embed/abc"></iframe>
+      <p id="visible">Visible text</p>
+      <button id="pay">Pay</button>`;
+
+    expect(veiledIds({}, ['.secret-panel'])).toEqual([
+      'password',
+      'otp',
+      'card',
+      'csc',
+      'marked',
+      'ignored',
+      'ignored-inner',
+      'iban',
+      'salary',
+      'blocked',
+      'tax',
+      'titled-frame',
+      'stripe-frame',
+    ]);
+  });
+
+  test("the site's replay options: classes, selectors and maskAllInputs", () => {
+    document.body.innerHTML = `
+      <input id="name" value="Jane">
+      <select id="plan"><option>Pro</option></select>
+      <input id="agree" type="checkbox">
+      <div id="private-class" class="private">a</div>
+      <div id="private-attr" data-private>b</div>
+      <p id="visible">c</p>`;
+
+    expect(veiledIds({ maskAllInputs: true, blockClass: 'private', maskTextSelector: '[data-private]' }, [])).toEqual([
+      'name',
+      'plan',
+      'private-class',
+      'private-attr',
+    ]);
+  });
+
+  test('stays on the page until removed or the page is left; RegExp class names found now and later', async () => {
+    document.body.innerHTML = `
+      <input id="password" type="password">
+      <span id="pii" class="pii-card">4242</span>
+      <p id="visible">Visible</p>`;
+    const filterOf = (id) => window.getComputedStyle(document.getElementById(id)).filter || '';
+    const ruleText = () =>
+      Array.from(document.querySelectorAll('style'))
+        .map((style) => Array.from(style.sheet.cssRules, (rule) => rule.cssText).join('\n'))
+        .join('\n');
+
+    const veil = applyPrivacyVeil({ privacyOptions: { maskTextClass: /^pii-/ }, maskSelectors: [] });
+    expect(filterOf('password')).toBe('blur(12px)');
+    expect(filterOf('visible')).not.toContain('blur');
+    expect(ruleText()).toContain('.pii-card');
+
+    const later = document.createElement('div');
+    later.className = 'pii-iban';
+    document.body.appendChild(later);
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    expect(ruleText()).toContain('.pii-iban');
+
+    veil.remove();
+    veil.remove();
+    expect(document.querySelectorAll('style').length).toBe(0);
+    expect(filterOf('password')).not.toContain('blur');
+
+    applyPrivacyVeil({});
+    expect(document.querySelectorAll('style').length).toBe(1);
+    window.dispatchEvent(new Event('pagehide'));
+    expect(document.querySelectorAll('style').length).toBe(0);
+  });
+});
+
 describe('page recordings (no screen capture)', () => {
   const record = (html, options = {}) =>
     new Promise((resolve, reject) => {
diff --git a/src/GleapCaptureRecorder.js b/src/GleapCaptureRecorder.js
index 71cde25f..9e355e11 100644
--- a/src/GleapCaptureRecorder.js
+++ b/src/GleapCaptureRecorder.js
@@ -109,7 +109,8 @@ export class DisplayRecording {
   onEndedBound = null;
 
   /**
-   * @param {{maxDurationSec: number, onTick: function(number), onStop: function(object), onError: function(Error)}} options
+   * @param {{maxDurationSec: number, onTick: function(number), onStop: function(object), onError: function(Error), onReleased?: function()}} options
+   * onReleased: the screen is no longer captured (on every path; may be called more than once).
    */
   constructor(options) {
     this.options = options;
@@ -328,6 +329,12 @@ export class DisplayRecording {
     this.onEndedBound = null;
     stopTracks(this.stream);
     stopTracks(this.micStream);
+    // Nothing more can be recorded (the recorder stopped first): the privacy veil may go.
+    if (this.options.onReleased) {
+      try {
+        this.options.onReleased();
+      } catch (exp) {}
+    }
   }
 
   cleanup() {
diff --git a/src/GleapCaptureScreenshot.js b/src/GleapCaptureScreenshot.js
index f335a2e5..781fc819 100644
--- a/src/GleapCaptureScreenshot.js
+++ b/src/GleapCaptureScreenshot.js
@@ -25,9 +25,55 @@ export const GLEAP_UI_SELECTOR = [
 
 // Frames that take card details. Their content is not the page's, so no class or field rule can
 // reach inside; a tab capture would show what the customer typed.
-const PAYMENT_FRAME_HOSTS =
-  /(^|\.)(stripe\.com|stripe\.network|braintreegateway\.com|braintree-api\.com|paypal\.com|adyen\.com|adyenpayments\.com|checkout\.com|squareup\.com|squareupsandbox\.com|recurly\.com|chargebee\.com|paddle\.com|mollie\.com|klarna\.com|worldpay\.com|authorize\.net|razorpay\.com|2checkout\.com|cybersource\.com|spreedly\.com|gocardless\.com|payu\.com|mercadopago\.com|paystack\.co|flutterwave\.com)$/i;
-const PAYMENT_FRAME_LABEL = /card|payment|cvc|cvv|security code|expir|iban/i;
+const PAYMENT_FRAME_HOST_NAMES = [
+  'stripe.com',
+  'stripe.network',
+  'braintreegateway.com',
+  'braintree-api.com',
+  'paypal.com',
+  'adyen.com',
+  'adyenpayments.com',
+  'checkout.com',
+  'squareup.com',
+  'squareupsandbox.com',
+  'recurly.com',
+  'chargebee.com',
+  'paddle.com',
+  'mollie.com',
+  'klarna.com',
+  'worldpay.com',
+  'authorize.net',
+  'razorpay.com',
+  '2checkout.com',
+  'cybersource.com',
+  'spreedly.com',
+  'gocardless.com',
+  'payu.com',
+  'mercadopago.com',
+  'paystack.co',
+  'flutterwave.com',
+];
+const PAYMENT_FRAME_HOSTS = new RegExp(
+  '(^|\\.)(' + PAYMENT_FRAME_HOST_NAMES.map((host) => host.replace(/\./g, '\\.')).join('|') + ')$',
+  'i'
+);
+const PAYMENT_FRAME_LABEL_WORDS = ['card', 'payment', 'cvc', 'cvv', 'security code', 'expir', 'iban'];
+const PAYMENT_FRAME_LABEL = new RegExp(PAYMENT_FRAME_LABEL_WORDS.join('|'), 'i');
+
+/**
+ * isPaymentFrame as one CSS selector, for masking the live page (the privacy veil over screen
+ * recordings). A host in the src matches a bit more loosely than isPaymentFrame's host test.
+ */
+export const paymentFrameSelector = () => {
+  const parts = ['iframe[allow*="payment" i]'];
+  PAYMENT_FRAME_LABEL_WORDS.forEach((word) => {
+    parts.push('iframe[title*="' + word + '" i]', 'iframe[name*="' + word + '" i]');
+  });
+  PAYMENT_FRAME_HOST_NAMES.forEach((host) => {
+    parts.push('iframe[src*="//' + host + '" i]', 'iframe[src*=".' + host + '" i]');
+  });
+  return parts.join(', ');
+};
 
 const now = () => (typeof performance !== 'undefined' && performance.now ? performance.now() : Date.now());
 
@@ -66,7 +112,7 @@ const withTimeout = (promise, ms, label) =>
     );
   });
 
-const cssEscape = (value) => {
+export const cssEscape = (value) => {
   try {
     if (typeof CSS !== 'undefined' && typeof CSS.escape === 'function') {
       return CSS.escape(value);
@@ -91,9 +137,16 @@ const validSelector = (selector) => {
  * One selector for everything masked as a whole (block and mask markers, the site's replay options
  * and flowConfig.capture.maskSelectors). Invalid parts are left out.
  */
-export const buildMaskSelector = (privacyOptions, maskSelectors) => {
+export const buildMaskSelector = (privacyOptions, maskSelectors) =>
+  maskSelectorParts(privacyOptions, maskSelectors).join(', ');
+
+/**
+ * The parts of buildMaskSelector: the block and mask markers first (one selector list), then each
+ * valid selector and class name of the site's replay options and flowConfig.capture.maskSelectors.
+ */
+export const maskSelectorParts = (privacyOptions, maskSelectors) => {
   const options = privacyOptions || {};
-  const parts = ['.rr-block', '.gl-block', '.rr-mask', '.gl-mask'];
+  const parts = ['.rr-block, .gl-block, .rr-mask, .gl-mask'];
   [options.blockSelector, options.maskTextSelector]
     .concat(Array.isArray(maskSelectors) ? maskSelectors : [])
     .forEach((selector) => {
@@ -110,10 +163,11 @@ export const buildMaskSelector = (privacyOptions, maskSelectors) => {
       }
     }
   });
-  return parts.join(', ');
+  return parts;
 };
 
-const classPatterns = (privacyOptions) => {
+// Class names given as a RegExp (blockClass, maskTextClass): no selector can express them.
+export const classPatterns = (privacyOptions) => {
   const options = privacyOptions || {};
   return [options.blockClass, options.maskTextClass].filter((value) => value && typeof value.test === 'function');
 };
diff --git a/src/GleapCaptureUI.js b/src/GleapCaptureUI.js
index 52429e0a..0109eb0c 100644
--- a/src/GleapCaptureUI.js
+++ b/src/GleapCaptureUI.js
@@ -194,6 +194,8 @@ export default class GleapCaptureUI {
         padding: '0',
         border: '0',
         transform: 'none',
+        // The privacy veil blurs rr-block / gl-block elements; never this one.
+        filter: 'none',
         'pointer-events': 'none',
       };
       Object.keys(hostStyles).forEach((property) => host.style.setProperty(property, hostStyles[property], 'important'));
diff --git a/src/GleapCaptureVeil.js b/src/GleapCaptureVeil.js
new file mode 100644
index 00000000..680accf7
--- /dev/null
+++ b/src/GleapCaptureVeil.js
@@ -0,0 +1,348 @@
+import { applyGleapCSPNonce } from './GleapHelper';
+import { getMaskedFieldSelectors } from './GleapInputMasking';
+import {
+  classPatterns,
+  cssEscape,
+  GLEAP_UI_SELECTOR,
+  maskSelectorParts,
+  paymentFrameSelector,
+} from './GleapCaptureScreenshot';
+
+// The privacy veil for screen recordings (getDisplayMedia): a video can't be masked afterwards, so
+// while one runs the live page blurs everything screenshots paint black boxes over: blocked and
+// masked elements (rr-/gl- classes and the site's replay options), private form fields (password,
+// one-time code and card fields, gleap-ignore="value", the replay options' input masking), payment
+// frames and flowConfig.capture.maskSelectors. It is one stylesheet, adopted by this document, its
+// open shadow roots and its same-origin frames; nothing else on the page changes. Page recordings
+// (rrweb) and screenshots mask on their own and never use it.
+
+const BLUR = 'filter: blur(12px) !important;';
+const FIELD_BLUR = BLUR + ' -webkit-text-security: disc !important;';
+const NOT_GLEAP_UI = GLEAP_UI_SELECTOR.split(',')
+  .map((selector) => ':not(' + selector.trim() + ')')
+  .join('');
+// Shadow roots and frames inside each other.
+const MAX_DEPTH = 8;
+
+const isGleapUiRoot = (element) => {
+  try {
+    return !!(element.matches && element.matches(GLEAP_UI_SELECTOR));
+  } catch (exp) {
+    return false;
+  }
+};
+
+/**
+ * The rules for one selector of elements masked as a whole: the outermost matches below <body>
+ * (nested matches would stack the blur, each on a layer of its own), and everything in <body> when
+ * <html> or <body> matches (a filter there would also turn fixed elements, the capture bar too,
+ * into ones that scroll with the page). Browsers without :is() get the plain selector instead.
+ * @param {string} selector
+ * @returns {{rules: string[], fallback: string}}
+ */
+export const elementVeilRules = (selector) => {
+  const match = ':is(' + selector + '):not(html):not(body)' + NOT_GLEAP_UI;
+  const inMaskedBody = ['html:is(' + selector + ') > body > *', 'body:is(' + selector + ') > *']
+    .map((part) => part + NOT_GLEAP_UI)
+    .join(', ');
+  return {
+    rules: [match + ':not(' + match + ' *) { ' + BLUR + ' }', inMaskedBody + ' { ' + BLUR + ' }'],
+    fallback: selector + ' { ' + BLUR + ' }',
+  };
+};
+
+/**
+ * Every rule of the veil, in order.
+ * @param {object} privacyOptions The site's Gleap.setReplayOptions.
+ * @param {string[]} maskSelectors flowConfig.capture.maskSelectors
+ * @returns {Array<{rules: string[], fallback: ?string}>}
+ */
+export const buildVeilRules = (privacyOptions, maskSelectors) => {
+  const entries = maskSelectorParts(privacyOptions, maskSelectors).map(elementVeilRules);
+  // Frames don't contain each other: one plain rule.
+  entries.push({ rules: [paymentFrameSelector() + ' { ' + BLUR + ' }'], fallback: null });
+  getMaskedFieldSelectors(privacyOptions).forEach((selector) => {
+    entries.push({ rules: [selector + ' { ' + FIELD_BLUR + ' }'], fallback: null });
+  });
+  return entries;
+};
+
+// A rule a browser rejects leaves the others working.
+const insertEntry = (sheet, entry) => {
+  let inserted = false;
+  entry.rules.forEach((rule) => {
+    try {
+      sheet.insertRule(rule, sheet.cssRules.length);
+      inserted = true;
+    } catch (exp) {}
+  });
+  if (!inserted && entry.fallback) {
+    try {
+      sheet.insertRule(entry.fallback, sheet.cssRules.length);
+    } catch (exp) {}
+  }
+};
+
+// Two animation frames (the veil is painted), or a short timeout in a background tab.
+const nextPaint = () =>
+  new Promise((resolve) => {
+    let done = false;
+    const finish = () => {
+      if (!done) {
+        done = true;
+        resolve();
+      }
+    };
+    setTimeout(finish, 120);
+    try {
+      requestAnimationFrame(() => requestAnimationFrame(finish));
+    } catch (exp) {
+      finish();
+    }
+  });
+
+/**
+ * Puts the veil on the live page until remove() (and at the latest when the page is left). Never
+ * throws.
+ * @param {{privacyOptions?: object, maskSelectors?: string[]}} options
+ * @returns {{ready: function(): Promise<void>, remove: function(): void}} ready resolves once the
+ * veil is painted
+ */
+export const applyPrivacyVeil = (options = {}) => {
+  const privacyOptions = options.privacyOptions || {};
+  const entries = buildVeilRules(privacyOptions, options.maskSelectors);
+  const patterns = classPatterns(privacyOptions);
+  // Class names that match a RegExp of the replay options, found on the page so far.
+  const classNames = Object.create(null);
+  // One stylesheet per document: { doc, sheet, style, roots }.
+  const targets = [];
+  const seenRoots = new WeakSet();
+  const frames = [];
+  let observer = null;
+  let removed = false;
+
+  const targetFor = (doc) => {
+    for (let i = 0; i < targets.length; i++) {
+      if (targets[i].doc === doc) {
+        return targets[i];
+      }
+    }
+    let target = null;
+    // A constructed stylesheet: not subject to the page's CSP, shared with the open shadow roots.
+    try {
+      const view = doc.defaultView;
+      if (view && typeof view.CSSStyleSheet === 'function' && 'adoptedStyleSheets' in doc) {
+        target = { doc, sheet: new view.CSSStyleSheet(), style: null, roots: [] };
+      }
+    } catch (exp) {}
+    if (!target) {
+      try {
+        const style = doc.createElement('style');
+        applyGleapCSPNonce(style);
+        (doc.head || doc.documentElement).appendChild(style);
+        if (style.sheet) {
+          target = { doc, sheet: style.sheet, style, roots: [] };
+        } else {
+          style.parentNode.removeChild(style);
+        }
+      } catch (exp) {}
+    }
+    if (target) {
+      entries.forEach((entry) => insertEntry(target.sheet, entry));
+      Object.keys(classNames).forEach((name) => insertEntry(target.sheet, elementVeilRules('.' + cssEscape(name))));
+      targets.push(target);
+    }
+    return target;
+  };
+
+  // root: a document or an open shadow root.
+  const attach = (root) => {
+    const target = targetFor(root.nodeType === 9 ? root : root.ownerDocument);
+    // A <style> element (browsers without constructed stylesheets) covers its document only.
+    if (!target || target.style) {
+      return;
+    }
+    try {
+      root.adoptedStyleSheets = Array.prototype.slice.call(root.adoptedStyleSheets || []).concat([target.sheet]);
+      target.roots.push(root);
+    } catch (exp) {}
+  };
+
+  const observe = (root) => {
+    if (!observer) {
+      return;
+    }
+    try {
+      observer.observe(
+        root,
+        patterns.length
+          ? { childList: true, subtree: true, attributes: true, attributeFilter: ['class'] }
+          : { childList: true, subtree: true }
+      );
+    } catch (exp) {}
+  };
+
+  const checkClasses = (element) => {
+    const list = element.classList;
+    if (!patterns.length || !list) {
+      return;
+    }
+    for (let i = 0; i < list.length; i++) {
+      const name = list[i];
+      if (classNames[name]) {
+        continue;
+      }
+      const matches = patterns.some((pattern) => {
+        pattern.lastIndex = 0;
+        return pattern.test(name);
+      });
+      if (matches) {
+        classNames[name] = true;
+        const entry = elementVeilRules('.' + cssEscape(name));
+        targets.forEach((target) => insertEntry(target.sheet, entry));
+      }
+    }
+  };
+
+  let scan = null;
+
+  const addRoot = (root, depth) => {
+    if (!root || seenRoots.has(root) || depth > MAX_DEPTH) {
+      return;
+    }
+    seenRoots.add(root);
+    attach(root);
+    observe(root);
+    scan(root, depth);
+  };
+
+  const attachFrame = (frame, depth) => {
+    let frameDocument = null;
+    try {
+      frameDocument = frame.contentDocument;
+    } catch (exp) {}
+    if (frameDocument && frameDocument.documentElement) {
+      addRoot(frameDocument, depth);
+    }
+  };
+
+  // A same-origin frame loading another page gets the veil again.
+  const addFrame = (frame, depth) => {
+    for (let i = 0; i < frames.length; i++) {
+      if (frames[i].frame === frame) {
+        attachFrame(frame, depth);
+        return;
+      }
+    }
+    const onLoad = () => {
+      if (!removed) {
+        attachFrame(frame, depth);
+      }
+    };
+    try {
+      frame.addEventListener('load', onLoad);
+      frames.push({ frame, onLoad });
+    } catch (exp) {}
+    attachFrame(frame, depth);
+  };
+
+  const visit = (element, depth) => {
+    checkClasses(element);
+    if (element.shadowRoot) {
+      addRoot(element.shadowRoot, depth + 1);
+    }
+    if (element.tagName === 'IFRAME' || element.tagName === 'FRAME') {
+      addFrame(element, depth + 1);
+    }
+  };
+
+  // Open shadow roots, same-origin frames and RegExp class names in a document, shadow root or
+  // element (and below). Gleap's own UI is skipped.
+  scan = (start, depth) => {
+    if (removed || !start) {
+      return;
+    }
+    try {
+      if (start.nodeType === 1) {
+        if (isGleapUiRoot(start)) {
+          return;
+        }
+        visit(start, depth);
+      }
+      const walker = (start.ownerDocument || start).createTreeWalker(start, 1, {
+        acceptNode: (node) => (isGleapUiRoot(node) ? 2 : 1),
+      });
+      let node = walker.nextNode();
+      while (node) {
+        visit(node, depth);
+        node = walker.nextNode();
+      }
+    } catch (exp) {}
+  };
+
+  const remove = () => {
+    if (removed) {
+      return;
+    }
+    removed = true;
+    try {
+      if (observer) {
+        observer.disconnect();
+      }
+    } catch (exp) {}
+    observer = null;
+    frames.forEach((entry) => {
+      try {
+        entry.frame.removeEventListener('load', entry.onLoad);
+      } catch (exp) {}
+    });
+    frames.length = 0;
+    targets.forEach((target) => {
+      target.roots.forEach((root) => {
+        try {
+          root.adoptedStyleSheets = Array.prototype.filter.call(
+            root.adoptedStyleSheets || [],
+            (sheet) => sheet !== target.sheet
+          );
+        } catch (exp) {}
+      });
+      try {
+        if (target.style && target.style.parentNode) {
+          target.style.parentNode.removeChild(target.style);
+        }
+      } catch (exp) {}
+    });
+    targets.length = 0;
+    try {
+      window.removeEventListener('pagehide', remove);
+    } catch (exp) {}
+  };
+
+  try {
+    window.addEventListener('pagehide', remove);
+    if (typeof MutationObserver === 'function') {
+      // Content added later: shadow roots, frames and class names the stylesheet doesn't reach yet.
+      observer = new MutationObserver((records) => {
+        if (removed) {
+          return;
+        }
+        try {
+          records.forEach((record) => {
+            if (record.type === 'attributes') {
+              checkClasses(record.target);
+              return;
+            }
+            for (let i = 0; i < record.addedNodes.length; i++) {
+              if (record.addedNodes[i].nodeType === 1) {
+                scan(record.addedNodes[i], 0);
+              }
+            }
+          });
+        } catch (exp) {}
+      });
+    }
+    addRoot(document, 0);
+  } catch (exp) {}
+
+  return { ready: nextPaint, remove };
+};
diff --git a/src/GleapInputMasking.js b/src/GleapInputMasking.js
index 7c3122ad..39fd70a0 100644
--- a/src/GleapInputMasking.js
+++ b/src/GleapInputMasking.js
@@ -218,6 +218,43 @@ export const getFieldValueMask = (element, options) => {
   };
 };
 
+// Field types whose value is never masked, as a :not() chain.
+const NOT_FIXED_VALUE_INPUT = FIXED_VALUE_INPUT_TYPES.map((type) => ':not([type="' + type + '" i])').join('');
+
+/**
+ * CSS selectors for the fields getFieldValueMask masks, for masking the live page (the privacy veil
+ * over screen recordings). A mask marker on a container is covered by the marker's own selector.
+ * @param {object} options The site's Gleap.setReplayOptions.
+ * @returns {string[]} one selector per entry (an entry a browser rejects leaves the others working)
+ */
+export const getMaskedFieldSelectors = (options) => {
+  options = options || {};
+  const selectors = ['input[type="password" i]', 'input[data-rr-is-password]'];
+  SENSITIVE_AUTOCOMPLETE_TOKENS.forEach((token) => {
+    selectors.push('input[autocomplete~="' + token + '" i]', 'textarea[autocomplete~="' + token + '" i]');
+  });
+  ['input' + NOT_FIXED_VALUE_INPUT, 'textarea', 'select'].forEach((field) => {
+    selectors.push(field + VALUE_MASK_MARKER_SELECTOR, VALUE_MASK_MARKER_SELECTOR + ' ' + field);
+  });
+
+  const kinds = resolveMaskInputOptions(options);
+  Object.keys(kinds).forEach((kind) => {
+    if (!kinds[kind] || FIXED_VALUE_INPUT_TYPES.indexOf(kind) >= 0 || !/^[a-z-]+$/.test(kind)) {
+      return;
+    }
+    if (kind === 'textarea' || kind === 'select') {
+      selectors.push(kind);
+      return;
+    }
+    selectors.push('input[type="' + kind + '" i]');
+    if (kind === 'text') {
+      // A field without a type is a text field.
+      selectors.push('input:not([type])');
+    }
+  });
+  return selectors;
+};
+
 // rrweb's text mask: every character but whitespace becomes '*', so words keep their length and
 // lines keep their breaks.
 const maskTextContent = (text) => String(text).replace(/[\S]/g, '*');

From 452fbcdb525e03c2d6c252d067519351d37f7717 Mon Sep 17 00:00:00 2001
From: Lukas Boehler <lukas@gleap.io>
Date: Thu, 1 Oct 2026 00:12:48 -0400
Subject: [PATCH 08/11] fix: capture requests never hang or freeze the page,
 and give up cleanly

DOM screenshots
- <video> elements no longer go to modern-screenshot (its cloneVideo waits
  for a seek that never comes for camera streams, missing sources or
  preload=none): a stand-in with the video's computed style shows the
  current frame when readable, else the poster, else a dark box.
- The render has a 10 s deadline and a 10 000-element budget; Cancel stays
  available while it runs. Giving up (or a cancel) cleans up at once:
  network logging back on, sandbox removed, widget restored; the request
  fails with the upload offered.
- The style sandbox gets its srcdoc before insertion and only accepts the
  about:srcdoc load (a synchronous about:blank load used to discard it, so
  the render never yielded). Under Trusted Types the about:blank document
  serves; failing that a stub keeps modern-screenshot from creating (and
  leaking) its own frames.
- Boxes away from the viewport are cloned empty (only where their size and
  place can't change) and their images and CSS backgrounds aren't
  downloaded; modern-screenshot's per-image redraw delay (Safari/Firefox)
  is capped at two redraws.
- Network logging pauses are counted, so overlapping renders can't leave
  it off.

Tab frames: at most 15 s with the bar hidden; Escape cancels meanwhile and
stops sharing at once; mask rects follow pinch zoom (visualViewport); no
tab capture from inside a frame.

Logs and page recordings: replay events are packed in slices (large
events through CompressionStream off the main thread) and bundles are
serialized in slices into a Blob; the /logs timeout grows with the body.

Also: Gleap banners, modals, tooltips, tours, checklists and the admin UI
stay out of captures, and their actions open nothing while the widget is
hidden for one; restored bars keep their original start time and are
dropped when the request is final or expired (GET on restore); a
fallback to page recording stops whatever screen recording started; a
MediaRecorder error keeps what was recorded and offers it; standard
rr-/gl- markers stay private when a site sets its own classes; timeline
labels respect flowConfig.capture.maskSelectors; the capture bar is built
before the widget hides; timer and event callbacks are guarded. The
capture modules compile for the browsers the bundle already needs (ES2020).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 babel.config.js                 |  16 +-
 src/GleapBannerManager.js       |   5 +
 src/GleapCaptureApi.js          |  77 ++--
 src/GleapCaptureLogs.test.js    |  31 +-
 src/GleapCaptureManager.js      | 152 +++++--
 src/GleapCaptureMasking.test.js |  22 +
 src/GleapCaptureRecorder.js     | 277 ++++++++----
 src/GleapCaptureScreenshot.js   | 754 ++++++++++++++++++++++++++------
 src/GleapCaptureSettings.js     |  28 +-
 src/GleapCaptureTasks.js        | 135 ++++++
 src/GleapCaptureUI.js           |  72 +--
 src/GleapChecklist.js           |   3 +
 src/GleapModalManager.js        |   5 +
 src/GleapReplayRecorder.js      |  16 +
 14 files changed, 1279 insertions(+), 314 deletions(-)
 create mode 100644 src/GleapCaptureTasks.js

diff --git a/babel.config.js b/babel.config.js
index 6f13ce92..b3b20b83 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -4,5 +4,19 @@ module.exports = {
   ],
   plugins: [
     ["@babel/plugin-transform-class-properties"]
+  ],
+  overrides: [
+    {
+      // The capture request modules only run where the rest of the bundle does: its untranspiled
+      // dependencies (modern-screenshot, rrweb) already need ES2020 (?. and ??). Compiled for those
+      // browsers they stay smaller (no ES5 classes, arrows, spread or destructuring helpers).
+      test: /[\\/]src[\\/](GleapCapture(Api|Manager|Recorder|Screenshot|Settings|Tasks|UI|Veil)|GleapWebmDuration)\.js$/,
+      presets: [
+        [
+          "@babel/env",
+          { targets: { chrome: "80", edge: "80", firefox: "74", safari: "13.1", ios: "13.4", samsung: "13" } }
+        ]
+      ]
+    }
   ]
-};
\ No newline at end of file
+};
diff --git a/src/GleapBannerManager.js b/src/GleapBannerManager.js
index 87f6a65b..870f81a8 100644
--- a/src/GleapBannerManager.js
+++ b/src/GleapBannerManager.js
@@ -1,4 +1,5 @@
 import Gleap, { GleapFrameManager } from './Gleap';
+import { isOutboundActionBlocked } from './GleapCaptureSettings';
 import { bootstrapGleapFrame } from './GleapHelper';
 
 export default class GleapBannerManager {
@@ -65,6 +66,10 @@ export default class GleapBannerManager {
         if (data.name === 'banner-close') {
           this.removeBannerUI();
         }
+        // While the widget is hidden for a capture (screenshot or recording), actions open nothing.
+        if (isOutboundActionBlocked(data.name)) {
+          return;
+        }
         if (data.name === 'start-conversation') {
           Gleap.startBot(data.data?.botId);
         }
diff --git a/src/GleapCaptureApi.js b/src/GleapCaptureApi.js
index 5cf87779..c9a93e63 100644
--- a/src/GleapCaptureApi.js
+++ b/src/GleapCaptureApi.js
@@ -8,7 +8,9 @@ import {
   GleapSession,
   GleapStreamedEvent,
 } from './Gleap';
+import { packEvents } from './GleapCaptureRecorder';
 import { CAPTURE_PLATFORM, CAPTURE_SDK_TYPE, getSdkVersion } from './GleapCaptureSettings';
+import { toJsonParts } from './GleapCaptureTasks';
 
 // Server calls and the log bundle of capture requests (contract §4 and §9). Every call resolves
 // (never rejects) with { status, data }; status 0 means no answer.
@@ -18,6 +20,8 @@ const MAX_LOGS_BODY_BYTES = 19 * 1024 * 1024;
 // Log entries this long before a recording started still count as part of it.
 const RECORDING_LOG_LEAD_MS = 10 * 1000;
 const JSON_TIMEOUT_MS = 30 * 1000;
+// A large body gets more time: 30 s plus a second per 64 KB.
+const timeoutForSize = (bytes) => JSON_TIMEOUT_MS + Math.ceil((bytes || 0) / (64 * 1024)) * 1000;
 
 const DEFAULT_INCLUDE = {
   consoleLog: true,
@@ -76,6 +80,12 @@ export const sendCaptureApiRequest = (method, path, body, options = {}) =>
     }
   });
 
+/**
+ * The request as the server has it ({ status, expiresAt, ... }).
+ */
+export const getCaptureRequest = (requestId) =>
+  sendCaptureApiRequest('GET', '/v3/shared/capture-requests/' + encodeURIComponent(String(requestId)));
+
 const postJson = (requestId, action, payload) =>
   sendCaptureApiRequest('POST', capturePath(requestId, action), JSON.stringify(payload || {}));
 
@@ -94,50 +104,47 @@ export const reportCaptureEvent = (requestId, type, reason) => {
 
 export const completeCaptureRequest = (requestId, payload) => postJson(requestId, 'complete', payload);
 
-/**
- * JSON text of a value; the custom data (set by the host app, may hold cycles) is dropped when the
- * whole value cannot be serialized.
- */
-const stringifyBundle = (bundle) => {
-  try {
-    return JSON.stringify(bundle);
-  } catch (exp) {
-    const withoutCustomData = Object.assign({}, bundle);
-    delete withoutCustomData.customData;
-    return JSON.stringify(withoutCustomData);
-  }
-};
-
-const gzipText = (text) => {
+const gzipBlob = (blob) => {
   try {
-    if (
-      typeof CompressionStream === 'function' &&
-      typeof Response === 'function' &&
-      typeof Blob === 'function' &&
-      typeof Blob.prototype.stream === 'function'
-    ) {
-      const stream = new Blob([text], { type: 'application/json' }).stream().pipeThrough(new CompressionStream('gzip'));
-      return new Response(stream).blob().catch(() => null);
+    if (typeof CompressionStream === 'function' && typeof Response === 'function' && typeof blob.stream === 'function') {
+      return new Response(blob.stream().pipeThrough(new CompressionStream('gzip'))).blob().catch(() => null);
     }
   } catch (exp) {}
   return Promise.resolve(null);
 };
 
-const encodeJson = (value) => {
-  const text = stringifyBundle(value);
-  return gzipText(text).then((gzipped) =>
-    gzipped ? { body: gzipped, gzip: true, size: gzipped.size } : { body: text, gzip: false, size: text.length }
-  );
+// The replay's events packed (in slices) if they aren't yet.
+const withPackedReplay = (bundle) => {
+  const replay = bundle.webReplay;
+  if (!replay || replay.packed || !Array.isArray(replay.events)) {
+    return Promise.resolve(bundle);
+  }
+  return packEvents(replay.events).then((packed) => {
+    if (!packed) {
+      return bundle;
+    }
+    return Object.assign({}, bundle, { webReplay: Object.assign({}, replay, { events: packed, packed: true }) });
+  });
 };
 
+// Serialized in slices into a Blob (no single huge string), then gzipped when the browser can.
+const encodeJson = (value) =>
+  toJsonParts(value).then((parts) => {
+    const blob = new Blob(parts, { type: 'application/json' });
+    return gzipBlob(blob).then((gzipped) =>
+      gzipped ? { body: gzipped, gzip: true, size: gzipped.size } : { body: blob, gzip: false, size: blob.size }
+    );
+  });
+
 /**
  * The request body for a log bundle: gzip when the browser can (CompressionStream), plain JSON
  * otherwise. A bundle over the size limit goes without its replay; null when it is still too large.
- * @returns {Promise<{body: Blob|string, gzip: boolean, size: number}|null>}
+ * The main thread is never blocked for long: packing and serializing run in slices.
+ * @returns {Promise<{body: Blob, gzip: boolean, size: number}|null>}
  */
 export const encodeLogsBundle = (bundle) =>
-  Promise.resolve()
-    .then(() => encodeJson(bundle))
+  withPackedReplay(bundle)
+    .then((ready) => encodeJson(ready))
     .then((encoded) => {
       if (encoded.size <= MAX_LOGS_BODY_BYTES) {
         return encoded;
@@ -153,7 +160,10 @@ export const encodeLogsBundle = (bundle) =>
 export const postCaptureLogs = (requestId, bundle) =>
   encodeLogsBundle(bundle).then((encoded) =>
     encoded
-      ? sendCaptureApiRequest('POST', capturePath(requestId, 'logs'), encoded.body, { gzip: encoded.gzip })
+      ? sendCaptureApiRequest('POST', capturePath(requestId, 'logs'), encoded.body, {
+          gzip: encoded.gzip,
+          timeoutMs: timeoutForSize(encoded.size),
+        })
       : { status: 413, data: null }
   );
 
@@ -292,7 +302,8 @@ export const buildLogsBundle = (options = {}) => {
   }
   if (include.replays && webReplaysEnabled()) {
     try {
-      const replay = GleapReplayRecorder.getInstance().getReplayData();
+      // Unpacked here (cheap); encodeLogsBundle packs it in slices.
+      const replay = GleapReplayRecorder.getInstance().getReplaySnapshot();
       if (replay && replay.startDate && Array.isArray(replay.events) && replay.events.length > 0) {
         bundle.webReplay = replay;
       }
diff --git a/src/GleapCaptureLogs.test.js b/src/GleapCaptureLogs.test.js
index c3051a54..9af3a33a 100644
--- a/src/GleapCaptureLogs.test.js
+++ b/src/GleapCaptureLogs.test.js
@@ -6,7 +6,7 @@
 // and nothing when the app switched it off (Gleap.setRemoteLogCollectionEnabled(false)).
 
 const mockFlowConfig = { enableWebReplays: true, capture: {} };
-const mockReplay = { startDate: 1, events: ['packed'], packed: true, type: 'rrweb' };
+const mockReplay = { startDate: 1, events: [{ type: 4, data: { href: 'https://app.test' } }], packed: false, type: 'rrweb' };
 const iso = (ms) => new Date(ms).toISOString();
 
 jest.mock('./Gleap', () => ({
@@ -34,7 +34,7 @@ jest.mock('./Gleap', () => ({
   GleapCustomDataManager: { getInstance: () => ({ getCustomData: () => ({ plan: 'pro' }) }) },
   GleapMetaDataManager: { getInstance: () => ({ getMetaData: () => ({ browser: 'Chrome' }), sessionStart: new Date(500) }) },
   GleapStreamedEvent: { getInstance: () => ({ getEventArray: () => [{ name: 'pageView', date: new Date(51000) }] }) },
-  GleapReplayRecorder: { getInstance: () => ({ getReplayData: () => mockReplay, customOptions: {} }) },
+  GleapReplayRecorder: { getInstance: () => ({ getReplaySnapshot: () => mockReplay, customOptions: {} }) },
   GleapSession: {
     getInstance: () => ({ session: { gleapId: 'g1' }, sdkKey: 'key', apiUrl: 'https://api.test', injectSession: () => {} }),
   },
@@ -44,7 +44,8 @@ jest.mock('./Gleap', () => ({
   GleapTranslationManager: { getInstance: () => ({ isRTLLayout: false }) },
 }));
 
-import { buildLogsBundle, normalizeInclude } from './GleapCaptureApi';
+import { buildLogsBundle, encodeLogsBundle, normalizeInclude } from './GleapCaptureApi';
+import { unpack } from '@rrweb/packer';
 
 describe('log bundle', () => {
   const allKeys = ['consoleLog', 'networkLogs', 'customData', 'metaData', 'customEventLog'];
@@ -83,6 +84,30 @@ describe('log bundle', () => {
     expect(bundle.windowEnd).toBe(iso(60000));
   });
 
+  test('encoded in slices to valid JSON: the replay packed, data that cannot be serialized left out', async () => {
+    const bundle = buildLogsBundle({ include: { replays: true } });
+    const cyclic = { plan: 'pro' };
+    cyclic.self = cyclic;
+    bundle.customData = cyclic;
+    bundle.consoleLog = Array.from({ length: 120 }, (value, index) => ({ log: 'line ' + index }));
+
+    const encoded = await encodeLogsBundle(bundle);
+    const text = await new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onload = () => resolve(reader.result);
+      reader.onerror = reject;
+      reader.readAsText(encoded.body);
+    });
+    const parsed = JSON.parse(text);
+
+    expect(parsed.customData).toBeUndefined();
+    expect(parsed.consoleLog).toHaveLength(120);
+    expect(parsed.consoleLog[119]).toEqual({ log: 'line 119' });
+    expect(parsed.webReplay.packed).toBe(true);
+    expect(unpack(parsed.webReplay.events[0])).toEqual(expect.objectContaining(mockReplay.events[0]));
+    expect(parsed).toEqual(expect.objectContaining({ platform: 'web', sdkType: 'JAVASCRIPT' }));
+  });
+
   test('include defaults: everything but replays', () => {
     expect(normalizeInclude(undefined)).toEqual({
       consoleLog: true,
diff --git a/src/GleapCaptureManager.js b/src/GleapCaptureManager.js
index bc0a446a..6bf64c9d 100644
--- a/src/GleapCaptureManager.js
+++ b/src/GleapCaptureManager.js
@@ -9,6 +9,7 @@ import {
   buildLogsBundle,
   claimCaptureRequest,
   completeCaptureRequest,
+  getCaptureRequest,
   normalizeInclude,
   postCaptureLogs,
   reportCaptureEvent,
@@ -46,8 +47,35 @@ const DEVICE_KEY = 'gleap-capture-device';
 const RESUME_MAX_AGE_MS = 30 * 60 * 1000;
 const WATCHDOG_MS = 1000;
 const MAX_HANDLED_LOG_REQUESTS = 100;
-// Gleap UI hidden while the customer captures the page (the widget itself is hidden by the frame manager).
-const HIDDEN_GLEAP_UI_SELECTOR = '.bb-feedback-button, .gleap-notification-container, .gleap-chatbar';
+// Statuses after which a request takes no capture any more (contract §1).
+const FINAL_STATUSES = ['completed', 'skipped', 'cancelled', 'expired'];
+// Gleap UI hidden while the customer captures the page (the widget itself is hidden by the frame
+// manager): launcher, notifications, banners, modals, tooltips, tours, checklists, the admin helper.
+const HIDDEN_GLEAP_UI_SELECTOR = [
+  '.bb-feedback-button',
+  '.gleap-notification-container',
+  '.gleap-chatbar',
+  '.gleap-b',
+  '.gleap-modal-wrapper',
+  '.gleap-tooltip',
+  '.gleap-tooltip-anchor',
+  '.gleap-tour-popover',
+  '.gleap-tour-overlay',
+  '#copilot-pointer-container',
+  '#copilot-joined-container',
+  '.gleap-audio-unmute-modal-overlay',
+  '.gleap-admin-frame-container',
+  '.gleap-admin-collapse-ui',
+  'gleap-checklist',
+].join(', ');
+
+const isTopWindow = () => {
+  try {
+    return window.top === window.self;
+  } catch (exp) {
+    return false;
+  }
+};
 
 const readStorage = (key) => {
   try {
@@ -108,6 +136,8 @@ export default class GleapCaptureManager {
   ui = null;
   watchdog = null;
   hiddenElements = [];
+  // Escape while the bar is hidden for a tab frame.
+  hiddenEscape = null;
   handledLogRequests = [];
   logsPostedFor = [];
   deviceId = null;
@@ -338,7 +368,10 @@ export default class GleapCaptureManager {
   }
 
   startSession(params) {
-    const flowConfig = GleapConfigManager.getInstance().getFlowConfig() || {};
+    let flowConfig = {};
+    try {
+      flowConfig = GleapConfigManager.getInstance().getFlowConfig() || {};
+    } catch (exp) {}
     const session = {
       key: ++sessionCounter,
       requestId: params.requestId,
@@ -352,30 +385,40 @@ export default class GleapCaptureManager {
       interrupted: params.phase === 'interrupted',
       pageRecording: params.pageRecording === true,
       micOn: false,
+      // When the request first showed its bar (kept across page loads; restored bars expire from it).
+      createdAt: typeof params.createdAt === 'number' ? params.createdAt : Date.now(),
       startedAt: Date.now(),
       lastTick: -1,
       lastProgressSent: 0,
     };
     this.session = session;
 
-    let rtl = false;
+    // The bar first: when it can't be shown, the widget stays and the request fails (upload offered).
     try {
-      rtl = !!GleapTranslationManager.getInstance().isRTLLayout;
-    } catch (exp) {}
-    this.ui = new GleapCaptureUI({
-      labels: params.labels,
-      primaryColor: flowConfig.color,
-      rtl,
-      onAction: (action) => this.onUiAction(session, action),
-    });
-    this.ui.autoFocus = !session.resumed;
+      let rtl = false;
+      try {
+        rtl = !!GleapTranslationManager.getInstance().isRTLLayout;
+      } catch (exp) {}
+      this.ui = new GleapCaptureUI({
+        labels: params.labels,
+        primaryColor: flowConfig.color,
+        rtl,
+        onAction: (action) => this.onUiAction(session, action),
+      });
+      this.ui.autoFocus = !session.resumed;
+      this.renderBar(session);
+    } catch (error) {
+      this.failSession(session, 'failed', errorReason(error));
+      return;
+    }
 
     if (!session.resumed) {
-      GleapFrameManager.getInstance().setCaptureHidden(true);
+      try {
+        GleapFrameManager.getInstance().setCaptureHidden(true);
+      } catch (exp) {}
     }
     this.hideGleapUi();
     this.startWatchdog();
-    this.renderBar(session);
     this.persist(session);
     this.sendState(session.requestId, 'bar');
   }
@@ -437,8 +480,14 @@ export default class GleapCaptureManager {
     session.result = null;
 
     this.stopWatchdog();
+    if (this.hiddenEscape) {
+      document.removeEventListener('keydown', this.hiddenEscape, true);
+      this.hiddenEscape = null;
+    }
     if (this.ui) {
-      this.ui.destroy();
+      try {
+        this.ui.destroy();
+      } catch (exp) {}
       this.ui = null;
     }
     this.showGleapUi();
@@ -550,8 +599,9 @@ export default class GleapCaptureManager {
       return;
     }
     const config = getCaptureConfig();
-    // Called inside the Capture click: the tab capture needs that user activation.
-    const useTab = config.webScreenshotMethod !== 'dom-only' && isDesktopChromium() && hasDisplayMedia();
+    // Called inside the Capture click: the tab capture needs that user activation. Not from inside a
+    // frame: the tab shows the whole page, the masks only know this frame.
+    const useTab = config.webScreenshotMethod !== 'dom-only' && isDesktopChromium() && hasDisplayMedia() && isTopWindow();
     const streamPromise = useTab ? requestTabStream() : null;
 
     session.phase = 'capturing';
@@ -643,13 +693,26 @@ export default class GleapCaptureManager {
     postCaptureLogs(requestId, bundle).catch(() => {});
   }
 
-  // Hides the capture bar and Gleap's UI for the moment a tab frame is taken.
+  // Hides the capture bar and Gleap's UI for the moment a tab frame is taken; Escape still cancels.
   setCaptureUiHidden(hidden) {
     if (this.ui) {
       this.ui.setVisible(!hidden);
     }
+    if (this.hiddenEscape) {
+      document.removeEventListener('keydown', this.hiddenEscape, true);
+      this.hiddenEscape = null;
+    }
     if (hidden) {
       this.hideGleapUi();
+      const session = this.session;
+      this.hiddenEscape = (event) => {
+        try {
+          if (event.key === 'Escape' && session && this.session === session) {
+            this.cancelSession(session, 'cancelled');
+          }
+        } catch (exp) {}
+      };
+      document.addEventListener('keydown', this.hiddenEscape, true);
     }
   }
 
@@ -746,6 +809,12 @@ export default class GleapCaptureManager {
    */
   offerPageRecording(session, error) {
     const name = error && error.name;
+    // Whatever got started of the screen recording stops here.
+    try {
+      if (session.recording) {
+        session.recording.cancel();
+      }
+    } catch (exp) {}
     this.liftVeil(session);
     session.phase = 'fallback';
     session.recording = null;
@@ -763,6 +832,7 @@ export default class GleapCaptureManager {
     session.lastTick = 0;
     session.timeline = new CaptureTimeline({
       privacyOptions: this.privacyOptions(),
+      maskSelectors: this.maskSelectors(),
       isOwnElement: (node) => !!(this.ui && this.ui.isOwnElement(node)),
     });
     session.timeline.start(startedAt);
@@ -1013,7 +1083,8 @@ export default class GleapCaptureManager {
           pageRecording: session.pageRecording === true,
           gleapId,
           sdkKey,
-          at: Date.now(),
+          // The original start: a bar restored on every page load still expires.
+          at: session.createdAt,
         })
       );
     } catch (exp) {}
@@ -1050,16 +1121,37 @@ export default class GleapCaptureManager {
         writeStorage(STORAGE_KEY, null);
         return;
       }
-      this.startSession({
-        requestId: stored.requestId,
-        kind: stored.kind,
-        ticketShareToken: stored.ticketShareToken,
-        options: stored.options,
-        labels: stored.labels,
-        // The customer already switched to a page recording because screen sharing didn't start.
-        pageRecording: stored.pageRecording === true,
-        resumed: true,
-        phase: stored.kind === 'recording' && stored.phase === 'recording' ? 'interrupted' : 'bar',
+      // Only while the request is still open (answered elsewhere, cancelled or expired meanwhile:
+      // no bar). Without an answer from the server the bar comes back.
+      getCaptureRequest(stored.requestId).then((response) => {
+        try {
+          const data = response.data;
+          const gone =
+            (response.status >= 400 && response.status < 500) ||
+            (data && FINAL_STATUSES.indexOf(data.status) !== -1) ||
+            (data && data.expiresAt && Date.parse(data.expiresAt) < Date.now());
+          if (gone) {
+            if (!this.session) {
+              writeStorage(STORAGE_KEY, null);
+            }
+            return;
+          }
+          if (this.session) {
+            return;
+          }
+          this.startSession({
+            requestId: stored.requestId,
+            kind: stored.kind,
+            ticketShareToken: stored.ticketShareToken,
+            options: stored.options,
+            labels: stored.labels,
+            // The customer already switched to a page recording because screen sharing didn't start.
+            pageRecording: stored.pageRecording === true,
+            createdAt: stored.at,
+            resumed: true,
+            phase: stored.kind === 'recording' && stored.phase === 'recording' ? 'interrupted' : 'bar',
+          });
+        } catch (exp) {}
       });
     } catch (exp) {}
   }
diff --git a/src/GleapCaptureMasking.test.js b/src/GleapCaptureMasking.test.js
index a2003cd5..ecde78eb 100644
--- a/src/GleapCaptureMasking.test.js
+++ b/src/GleapCaptureMasking.test.js
@@ -280,6 +280,18 @@ describe('page recordings (no screen capture)', () => {
     );
   });
 
+  test('the standard markers stay private when the site set classes of its own', async () => {
+    const { file } = await record(
+      '<p class="rr-mask">standard mask</p><div class="rr-block">standard block</div>' +
+        '<p class="own-mask">own mask</p><div class="own-block">own block</div><p>Visible text</p>',
+      { privacyOptions: { blockClass: 'own-block', maskTextClass: 'own-mask' } }
+    );
+    const recorded = JSON.stringify(file.events.map((event) => (file.packed ? unpack(event) : event)));
+
+    ['standard mask', 'standard block', 'own mask', 'own block'].forEach((secret) => expect(recorded).not.toContain(secret));
+    expect(recorded).toContain('Visible text');
+  });
+
   test('the session replay pauses meanwhile and resumes afterwards', async () => {
     mockReplayRecorder.pauseForCapture.mockReturnValueOnce(true);
     mockReplayRecorder.resumeAfterCapture.mockClear();
@@ -301,4 +313,14 @@ describe('timeline labels', () => {
     expect(describeElement(document.getElementById('pay'), {})).toBe('button');
     expect(describeElement(document.getElementById('save'), {})).toBe('button "Save"');
   });
+
+  test('nothing named inside flowConfig.capture.maskSelectors', () => {
+    document.body.innerHTML = `
+      <div class="secret-panel"><button id="secret">Refund 99-1234567</button>
+      <label for="tax">Tax ID 99-1234567</label><input id="tax"></div>`;
+
+    expect(describeElement(document.getElementById('secret'), {}, ['.secret-panel'])).toBe('button');
+    expect(describeElement(document.getElementById('tax'), {}, ['.secret-panel'])).toBe('field');
+    expect(describeElement(document.getElementById('secret'), {}, [])).toBe('button "Refund 99-1234567"');
+  });
 });
diff --git a/src/GleapCaptureRecorder.js b/src/GleapCaptureRecorder.js
index 9e355e11..11efed51 100644
--- a/src/GleapCaptureRecorder.js
+++ b/src/GleapCaptureRecorder.js
@@ -5,6 +5,7 @@ import { isMobile } from './GleapHelper';
 import { isBlockedElement, isMaskMarker } from './GleapInputMasking';
 import { approximateSize } from './GleapReplayRecorder';
 import { fixWebmDuration } from './GleapWebmDuration';
+import { now, toJsonParts, yieldToPage } from './GleapCaptureTasks';
 
 // Recordings for capture requests (contract §8): the screen through getDisplayMedia + MediaRecorder
 // on desktop browsers, a page recording (rrweb) where there is no getDisplayMedia (phones, tablets).
@@ -107,6 +108,7 @@ export class DisplayRecording {
   recorderStopped = false;
   stopTimeout = null;
   onEndedBound = null;
+  recorderError = null;
 
   /**
    * @param {{maxDurationSec: number, onTick: function(number), onStop: function(object), onError: function(Error), onReleased?: function()}} options
@@ -170,18 +172,30 @@ export class DisplayRecording {
         throw error;
       }
       this.recorder.ondataavailable = (event) => {
-        if (event.data && event.data.size > 0) {
-          this.chunks.push(event.data);
-        }
+        try {
+          if (event.data && event.data.size > 0) {
+            this.chunks.push(event.data);
+          }
+        } catch (exp) {}
       };
       this.recorder.onstop = () => {
-        this.recorderStopped = true;
-        this.finish();
+        try {
+          this.recorderStopped = true;
+          this.finish();
+        } catch (exp) {}
+      };
+      this.recorder.onerror = (event) => {
+        try {
+          this.onRecorderError((event && event.error) || new Error('recorder-error'));
+        } catch (exp) {}
       };
-      this.recorder.onerror = (event) => this.fail((event && event.error) || new Error('recorder-error'));
 
       // The browser's "Stop sharing" ends the track: that is a Stop.
-      this.onEndedBound = () => this.stop();
+      this.onEndedBound = () => {
+        try {
+          this.stop();
+        } catch (exp) {}
+      };
       this.videoTrack.addEventListener('ended', this.onEndedBound);
 
       try {
@@ -193,13 +207,15 @@ export class DisplayRecording {
       this.startedAt = Date.now();
       const maxMs = this.options.maxDurationSec * 1000;
       this.timer = setInterval(() => {
-        const elapsed = Date.now() - this.startedAt;
         try {
-          this.options.onTick(Math.floor(elapsed / 1000));
+          const elapsed = Date.now() - this.startedAt;
+          try {
+            this.options.onTick(Math.floor(elapsed / 1000));
+          } catch (exp) {}
+          if (elapsed >= maxMs) {
+            this.stop();
+          }
         } catch (exp) {}
-        if (elapsed >= maxMs) {
-          this.stop();
-        }
       }, 250);
       return { hasMicrophone: !!micTrack };
     });
@@ -234,7 +250,21 @@ export class DisplayRecording {
     this.releaseTracks();
     // The last chunk and then 'stop' follow (also when the recorder stopped by itself because the
     // shared screen ended); finish then. Just in case 'stop' never comes:
-    this.stopTimeout = setTimeout(() => this.finish(), 3000);
+    this.stopTimeout = setTimeout(() => {
+      try {
+        this.finish();
+      } catch (exp) {}
+    }, 3000);
+  }
+
+  // The recorder failed midway: what it recorded so far still arrives (dataavailable, then stop) and
+  // is offered like after a Stop; with nothing recorded the error is reported.
+  onRecorderError(error) {
+    if (this.finished) {
+      return;
+    }
+    this.recorderError = error;
+    this.stop();
   }
 
   finish() {
@@ -261,7 +291,7 @@ export class DisplayRecording {
       method: this.settings.displaySurface === 'browser' ? 'tab' : 'display',
     };
     if (blob.size === 0) {
-      this.options.onError(new Error('empty-recording'));
+      this.options.onError(this.recorderError || new Error('empty-recording'));
       return;
     }
     const deliver = (finalBlob) => {
@@ -371,8 +401,79 @@ const combineSelectors = (selectors) =>
  * A page recording (rrweb) with every input masked and without canvas. The file has exactly the
  * shape of a bug report's webReplay, so the dashboard's replay player shows it.
  */
+// @rrweb/packer's format: latin1 text of zlib(JSON of the event plus v: MARK).
+const PACKER_MARK = 'v1';
+// Events this large (a full snapshot of a big page) are compressed by the browser
+// (CompressionStream, off the main thread) instead of fflate's synchronous zlib.
+const LARGE_EVENT_CHARS = 200 * 1024;
+
+const toLatin1 = (bytes) => {
+  let text = '';
+  for (let i = 0; i < bytes.length; i += 0x8000) {
+    text += String.fromCharCode.apply(null, bytes.subarray(i, i + 0x8000));
+  }
+  return text;
+};
+
+// A packed event (string), or a promise of one for a large event.
+const packEvent = (event) => {
+  if (typeof CompressionStream === 'function' && typeof Response === 'function') {
+    const json = JSON.stringify(Object.assign({}, event, { v: PACKER_MARK }));
+    if (json.length > LARGE_EVENT_CHARS) {
+      return new Response(new Blob([json]).stream().pipeThrough(new CompressionStream('deflate')))
+        .arrayBuffer()
+        .then((buffer) => toLatin1(new Uint8Array(buffer)));
+    }
+  }
+  return pack(event);
+};
+
+/**
+ * The events packed (@rrweb/packer format) in slices, so the page never waits long; null when
+ * packing failed (the raw events go then). Rejects when cancelled.
+ */
+export const packEvents = (events, isCancelled) =>
+  new Promise((resolve, reject) => {
+    const packed = new Array(events.length);
+    let index = 0;
+    const step = () => {
+      try {
+        if (isCancelled && isCancelled()) {
+          reject(new Error('cancelled'));
+          return;
+        }
+        const start = now();
+        while (index < events.length) {
+          const result = packEvent(events[index]);
+          const at = index;
+          index += 1;
+          if (typeof result !== 'string') {
+            result.then(
+              (value) => {
+                packed[at] = value;
+                step();
+              },
+              () => resolve(null)
+            );
+            return;
+          }
+          packed[at] = result;
+          if (now() - start > 25 && index < events.length) {
+            yieldToPage().then(step);
+            return;
+          }
+        }
+        resolve(packed);
+      } catch (exp) {
+        resolve(null);
+      }
+    };
+    step();
+  });
+
 export class PageRecording {
   events = [];
+  cancelled = false;
   size = 0;
   stopFunction = null;
   timer = null;
@@ -401,22 +502,29 @@ export class PageRecording {
     try {
       this.stopFunction = record({
         emit: (event) => {
-          if (this.finished) {
-            return;
-          }
-          this.events.push(event);
-          this.size += approximateSize(event);
-          if (this.size > MAX_PAGE_RECORDING_SIZE) {
-            setTimeout(() => this.stop(), 0);
-          }
+          try {
+            if (this.finished) {
+              return;
+            }
+            this.events.push(event);
+            this.size += approximateSize(event);
+            if (this.size > MAX_PAGE_RECORDING_SIZE) {
+              setTimeout(() => {
+                try {
+                  this.stop();
+                } catch (exp) {}
+              }, 0);
+            }
+          } catch (exp) {}
         },
         maskAllInputs: true,
         blockClass: privacyOptions.blockClass || 'rr-block',
+        // The standard markers count also when the site set classes of its own.
         blockSelector: combineSelectors(
-          ['.gl-block', privacyOptions.blockSelector].concat(this.options.maskSelectors || [])
+          ['.rr-block', '.gl-block', privacyOptions.blockSelector].concat(this.options.maskSelectors || [])
         ),
         maskTextClass: privacyOptions.maskTextClass || 'rr-mask',
-        maskTextSelector: combineSelectors(['.gl-mask', privacyOptions.maskTextSelector]),
+        maskTextSelector: combineSelectors(['.rr-mask', '.gl-mask', privacyOptions.maskTextSelector]),
         inlineStylesheet: true,
         recordCanvas: false,
         collectFonts: false,
@@ -460,16 +568,19 @@ export class PageRecording {
 
     const maxMs = this.options.maxDurationSec * 1000;
     this.timer = setInterval(() => {
-      const elapsed = Date.now() - this.startedAt;
       try {
-        this.options.onTick(Math.floor(elapsed / 1000));
+        const elapsed = Date.now() - this.startedAt;
+        try {
+          this.options.onTick(Math.floor(elapsed / 1000));
+        } catch (exp) {}
+        if (elapsed >= maxMs) {
+          this.stop();
+        }
       } catch (exp) {}
-      if (elapsed >= maxMs) {
-        this.stop();
-      }
     }, 250);
   }
 
+  // Packs and serializes the events in slices (up to ~25 MB), then hands over the file.
   stop() {
     if (this.finished) {
       return;
@@ -478,47 +589,53 @@ export class PageRecording {
     this.endedAt = Date.now();
     this.cleanup();
 
-    let events = this.events;
-    let packed = false;
-    try {
-      events = this.events.map((event) => pack(event));
-      packed = true;
-    } catch (exp) {
-      events = this.events;
-    }
+    const raw = this.events;
     this.events = [];
-    const replay = {
-      startDate: this.startedAt,
-      events,
-      packed,
-      baseUrl: window.location.origin,
-      width: this.width,
-      height: this.height,
-      isMobile: isMobile(),
-      type: 'rrweb',
-    };
-    let blob;
-    try {
-      blob = new Blob([JSON.stringify(replay)], { type: 'application/json' });
-    } catch (error) {
-      this.options.onError(error);
-      return;
-    }
-    this.options.onStop({
-      blob,
-      type: 'application/json',
-      fileName: 'page-recording.json',
-      startedAt: this.startedAt,
-      endedAt: this.endedAt,
-      durationMs: Math.max(0, this.endedAt - this.startedAt),
-      width: this.width,
-      height: this.height,
-      method: 'rrweb',
-    });
+    const cancelled = () => this.cancelled;
+    packEvents(raw, cancelled)
+      .then((packedEvents) =>
+        toJsonParts(
+          {
+            startDate: this.startedAt,
+            events: packedEvents || raw,
+            packed: !!packedEvents,
+            baseUrl: window.location.origin,
+            width: this.width,
+            height: this.height,
+            isMobile: isMobile(),
+            type: 'rrweb',
+          },
+          cancelled
+        )
+      )
+      .then((parts) => {
+        if (this.cancelled) {
+          return;
+        }
+        this.options.onStop({
+          blob: new Blob(parts, { type: 'application/json' }),
+          type: 'application/json',
+          fileName: 'page-recording.json',
+          startedAt: this.startedAt,
+          endedAt: this.endedAt,
+          durationMs: Math.max(0, this.endedAt - this.startedAt),
+          width: this.width,
+          height: this.height,
+          method: 'rrweb',
+        });
+      })
+      .catch((error) => {
+        if (!this.cancelled) {
+          try {
+            this.options.onError(error);
+          } catch (exp) {}
+        }
+      });
   }
 
   cancel() {
     this.finished = true;
+    this.cancelled = true;
     this.events = [];
     this.cleanup();
   }
@@ -553,12 +670,17 @@ const collapse = (text, max) => {
   return value.length > max ? value.slice(0, max - 1) + '…' : value;
 };
 
-const isPrivate = (element, privacyOptions) => {
+// Inside a blocked or masked element, or one of flowConfig.capture.maskSelectors (through shadow roots).
+const isPrivate = (element, privacyOptions, maskSelector) => {
   let current = element;
   while (current) {
     if (current.nodeType === 1) {
       try {
-        if (isBlockedElement(current, privacyOptions) || isMaskMarker(current, privacyOptions)) {
+        if (
+          isBlockedElement(current, privacyOptions) ||
+          isMaskMarker(current, privacyOptions) ||
+          (!!maskSelector && current.matches(maskSelector))
+        ) {
           return true;
         }
       } catch (exp) {}
@@ -582,20 +704,21 @@ const fieldName = (field) =>
 
 /**
  * How an element is named in the timeline: its role plus a short accessible name. Never a field
- * value, and no text inside masked or blocked elements.
+ * value, and no text inside masked or blocked elements (markers, replay options, maskSelectors).
+ * @param {string[]} [maskSelectors] flowConfig.capture.maskSelectors
  */
-export const describeElement = (element, privacyOptions) => {
+export const describeElement = (element, privacyOptions, maskSelectors) => {
   if (!element || element.nodeType !== 1) {
     return 'element';
   }
   const tag = element.tagName.toLowerCase();
   const role = element.getAttribute('role') || (tag === 'a' ? 'link' : tag);
+  const hidden = isPrivate(element, privacyOptions, combineSelectors(Array.isArray(maskSelectors) ? maskSelectors : []));
   if (tag === 'input' || tag === 'select' || tag === 'textarea') {
-    return (
-      (element.type === 'checkbox' || element.type === 'radio' ? element.type : 'field') + ' "' + fieldName(element) + '"'
-    );
+    const kind = element.type === 'checkbox' || element.type === 'radio' ? element.type : 'field';
+    return hidden ? kind : kind + ' "' + fieldName(element) + '"';
   }
-  if (isPrivate(element, privacyOptions)) {
+  if (hidden) {
     return role;
   }
   const name = collapse(
@@ -630,8 +753,9 @@ export class CaptureTimeline {
   lastInputField = null;
   lastInputAt = 0;
 
-  constructor({ privacyOptions, isOwnElement }) {
+  constructor({ privacyOptions, maskSelectors, isOwnElement }) {
     this.privacyOptions = privacyOptions || {};
+    this.maskSelectors = Array.isArray(maskSelectors) ? maskSelectors : [];
     this.isOwnElement = isOwnElement || (() => false);
   }
 
@@ -671,7 +795,7 @@ export class CaptureTimeline {
         const control = this.target(event);
         // Only controls are named; other elements go by their tag, without their text.
         const label = control
-          ? describeElement(control, this.privacyOptions)
+          ? describeElement(control, this.privacyOptions, this.maskSelectors)
           : event.target && event.target.tagName
             ? event.target.tagName.toLowerCase()
             : 'page';
@@ -694,7 +818,8 @@ export class CaptureTimeline {
         this.lastInputAt = now;
         this.add(
           'input',
-          (event.type === 'change' ? 'Changed ' : 'Typed in ') + describeElement(field, this.privacyOptions)
+          (event.type === 'change' ? 'Changed ' : 'Typed in ') +
+            describeElement(field, this.privacyOptions, this.maskSelectors)
         );
       } catch (exp) {}
     };
diff --git a/src/GleapCaptureScreenshot.js b/src/GleapCaptureScreenshot.js
index 781fc819..f906ccfa 100644
--- a/src/GleapCaptureScreenshot.js
+++ b/src/GleapCaptureScreenshot.js
@@ -1,6 +1,7 @@
 import { createContext, destroyContext, domToCanvas } from 'modern-screenshot';
 import { GleapNetworkIntercepter } from './Gleap';
 import { getFieldValueMask, isBlockedElement, isMaskMarker } from './GleapInputMasking';
+import { now, yieldToPage } from './GleapCaptureTasks';
 
 // Screenshots for capture requests (contract §8). Desktop Chromium grabs one frame of the current
 // tab (getDisplayMedia, one click in the browser's share dialog); everything else, and a declined or
@@ -12,7 +13,8 @@ export const MAX_CAPTURE_EDGE = 2560;
 const JPEG_QUALITY = 0.85;
 const TRANSPARENT_GIF = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
 
-// Gleap's own UI never appears in a capture.
+// Gleap's own UI never appears in a capture: the widget, launcher, notifications, banners, modals,
+// tooltips, tours, the admin helper and the capture UI itself.
 export const GLEAP_UI_SELECTOR = [
   '.gleap-frame-container',
   '.bb-feedback-button',
@@ -21,8 +23,23 @@ export const GLEAP_UI_SELECTOR = [
   '.gleap-capture-root',
   '.gleap-image-view',
   '.bb-capture-editor',
+  '.gleap-b',
+  '.gleap-modal-wrapper',
+  '.gleap-tooltip',
+  '.gleap-tour-popover',
+  '.gleap-tour-overlay',
+  '#copilot-pointer-container',
+  '#copilot-joined-container',
+  '.gleap-audio-unmute-modal-overlay',
+  '.gleap-admin-frame-container',
+  '.gleap-admin-collapse-ui',
+  '.click-wave',
 ].join(', ');
 
+// Gleap UI that can sit in the page's flow (checklists placed in the page, tooltip hotspots inside
+// the page's elements): left blank in a capture, keeping its space.
+export const GLEAP_INFLOW_UI_SELECTOR = 'gleap-checklist, .gleap-tooltip-anchor';
+
 // Frames that take card details. Their content is not the page's, so no class or field rule can
 // reach inside; a tab capture would show what the customer typed.
 const PAYMENT_FRAME_HOST_NAMES = [
@@ -75,8 +92,6 @@ export const paymentFrameSelector = () => {
   return parts.join(', ');
 };
 
-const now = () => (typeof performance !== 'undefined' && performance.now ? performance.now() : Date.now());
-
 const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
 
 // Two animation frames (so a style change is painted), or a short timeout in a background tab.
@@ -589,13 +604,35 @@ const grabFrame = (track, stream) => {
     .then((frame) => frame || viaVideo());
 };
 
+// The longest Gleap's UI (the capture bar too) stays hidden for a tab frame.
+const TAB_CAPTURE_MAX_MS = 15000;
+
+// Rects from getBoundingClientRect are in the layout viewport; a tab frame shows the visual viewport
+// (pinch zoom) stretched over the window.
+const toVisualViewport = (rects) => {
+  const viewport = window.visualViewport;
+  const zoom = viewport && viewport.scale ? viewport.scale : 1;
+  if (!viewport || (zoom === 1 && !viewport.offsetLeft && !viewport.offsetTop)) {
+    return rects;
+  }
+  return rects.map((rect) => ({
+    x: (rect.x - viewport.offsetLeft) * zoom,
+    y: (rect.y - viewport.offsetTop) * zoom,
+    width: rect.width * zoom,
+    height: rect.height * zoom,
+  }));
+};
+
 /**
  * Takes one frame of the shared tab with Gleap's UI hidden, then stops sharing right away.
- * Rejects when the shared surface is not this tab (or no usable frame came).
+ * Rejects when the shared surface is not this tab, no usable frame came, or after
+ * TAB_CAPTURE_MAX_MS.
  */
-export const captureFromTabStream = (stream, { setUiHidden, privacyOptions, maskSelectors }) => {
+export const captureFromTabStream = (stream, { setUiHidden, privacyOptions, maskSelectors, isActive }) => {
   const track = stream && stream.getVideoTracks ? stream.getVideoTracks()[0] : null;
+  let done = false;
   const finish = () => {
+    done = true;
     stopStream(stream);
     setUiHidden(false);
   };
@@ -613,6 +650,9 @@ export const captureFromTabStream = (stream, { setUiHidden, privacyOptions, mask
   }
 
   const attempt = (index) => {
+    if (done) {
+      throw new Error('tab-timeout');
+    }
     if (index >= 3) {
       throw new Error('no-usable-frame');
     }
@@ -623,10 +663,10 @@ export const captureFromTabStream = (stream, { setUiHidden, privacyOptions, mask
     return grabFrame(track, stream).then((frame) => {
       const viewportWidth = window.innerWidth;
       const viewportHeight = window.innerHeight;
-      const rects = rectsBefore.concat(collectMaskRects({ privacyOptions, maskSelectors }));
+      const rects = toVisualViewport(rectsBefore.concat(collectMaskRects({ privacyOptions, maskSelectors })));
       let canvas = null;
       try {
-        if (frame && frame.width > 0 && frame.height > 0) {
+        if (!done && frame && frame.width > 0 && frame.height > 0) {
           // The frame must show this viewport (a different tab, or a resize in between, doesn't).
           const viewportRatio = viewportWidth / viewportHeight;
           if (Math.abs(frame.width / frame.height - viewportRatio) / viewportRatio <= 0.04) {
@@ -646,6 +686,10 @@ export const captureFromTabStream = (stream, { setUiHidden, privacyOptions, mask
           }
         } catch (exp) {}
       }
+      if (done) {
+        releaseCanvas(canvas);
+        throw new Error('tab-timeout');
+      }
       if (!canvas) {
         return wait(150).then(() => attempt(index + 1));
       }
@@ -661,18 +705,40 @@ export const captureFromTabStream = (stream, { setUiHidden, privacyOptions, mask
   };
 
   setUiHidden(true);
-  return nextPaint()
-    .then(() => attempt(0))
-    .then(
-      (capture) => {
-        finish();
-        return capture;
-      },
-      (error) => {
-        finish();
-        throw error;
+  return new Promise((resolve, reject) => {
+    let watch = null;
+    const settle = (error, capture) => {
+      if (done) {
+        if (capture) {
+          releaseCanvas(capture.canvas);
+        }
+        return;
+      }
+      clearInterval(watch);
+      finish();
+      if (error) {
+        reject(error);
+      } else {
+        resolve(capture);
       }
+    };
+    // Cancelled meanwhile: stop sharing right away.
+    watch = setInterval(() => {
+      try {
+        if (isActive && !isActive()) {
+          settle(new Error('aborted'));
+        }
+      } catch (exp) {}
+    }, 200);
+    withTimeout(
+      nextPaint().then(() => attempt(0)),
+      TAB_CAPTURE_MAX_MS,
+      'tab-timeout'
+    ).then(
+      (capture) => settle(null, capture),
+      (error) => settle(error)
     );
+  });
 };
 
 const cloneNamesMatch = (original, clone) => {
@@ -704,21 +770,240 @@ const isViewportFilling = (rect) =>
   Math.abs(rect.right - window.innerWidth) <= 20 &&
   Math.abs(rect.bottom - window.innerHeight) <= 20;
 
+// Everything this close to the viewport is rendered; boxes further away are rendered empty.
+const VIEWPORT_MARGIN = 200;
+// The DOM render gives up after this long or this many elements (the customer can upload a file).
+const RENDER_DEADLINE_MS = 10000;
+const MAX_RENDER_ELEMENTS = 10000;
+// Safari and Firefox decode the images inside the rendered SVG late, so modern-screenshot redraws
+// it once per image, waiting longer each time (fixSvgXmlDecode). A couple of redraws do the job.
+const MAX_IMAGE_REDRAWS = 2;
+const IMAGE_PROPERTIES = ['background-image', 'border-image-source', 'mask-image', '-webkit-mask-image', 'list-style-image'];
+
+const nearViewport = (rect, box) =>
+  (rect.width > 0 || rect.height > 0) &&
+  rect.bottom > box.top &&
+  rect.top < box.bottom &&
+  rect.right > box.left &&
+  rect.left < box.right;
+
+const childElements = (element) => {
+  const list = [];
+  const add = (nodes) => {
+    for (let i = 0; i < nodes.length; i++) {
+      list.push(nodes[i]);
+    }
+  };
+  try {
+    if (element.shadowRoot) {
+      add(element.shadowRoot.children);
+    }
+    add(element.children);
+  } catch (exp) {}
+  return list;
+};
+
 /**
- * The modern-screenshot hooks that keep the clone private and show the scrolled state. The filter
- * runs right before an element is cloned and onCloneEachNode right after it (children first), so a
- * stack pairs every clone with its original. If a pair ever doesn't match, the clone is left
- * alone: the black boxes painted from the live page still cover everything masked.
+ * The elements (with a box) whose whole subtree, open shadow roots included, is away from the
+ * viewport. Measured in slices.
+ * @returns {Promise<Set<Element>>}
  */
-const createCloneHooks = (root, privacyOptions, maskSelectors, pageScroll) => {
+const findOffscreenElements = (isStopped) =>
+  new Promise((resolve, reject) => {
+    const offscreen = new Set();
+    const box = {
+      top: -VIEWPORT_MARGIN,
+      left: -VIEWPORT_MARGIN,
+      bottom: window.innerHeight + VIEWPORT_MARGIN,
+      right: window.innerWidth + VIEWPORT_MARGIN,
+    };
+    const root = document.documentElement;
+    const stack = [{ element: root, children: childElements(root), index: 0, visible: true, sized: false }];
+    const step = () => {
+      try {
+        if (isStopped()) {
+          reject(new Error('aborted'));
+          return;
+        }
+        const start = now();
+        while (stack.length) {
+          const frame = stack[stack.length - 1];
+          if (frame.index < frame.children.length) {
+            const child = frame.children[frame.index];
+            frame.index += 1;
+            let rect = null;
+            try {
+              rect = child.getBoundingClientRect();
+            } catch (exp) {}
+            stack.push({
+              element: child,
+              children: childElements(child),
+              index: 0,
+              visible: !!rect && nearViewport(rect, box),
+              sized: !!rect && rect.width > 0 && rect.height > 0,
+            });
+          } else {
+            stack.pop();
+            if (stack.length) {
+              if (frame.visible) {
+                stack[stack.length - 1].visible = true;
+              } else if (frame.sized) {
+                offscreen.add(frame.element);
+              }
+            }
+          }
+          if (stack.length && now() - start > 25) {
+            yieldToPage().then(step);
+            return;
+          }
+        }
+        resolve(offscreen);
+      } catch (error) {
+        reject(error);
+      }
+    };
+    step();
+  });
+
+// Boxes whose size and place don't depend on their content (it is in the clone as copied width and
+// height): no margin of a child collapses through them. Inline content and table parts never.
+const BOX_DISPLAYS = { block: true, 'flow-root': true, 'list-item': true, flex: true, grid: true, table: true };
+const CONTAINING_DISPLAYS = { flex: true, 'inline-flex': true, grid: true, 'inline-grid': true };
+
+const canEmpty = (element) => {
+  try {
+    if (element.ownerDocument !== document || element === document.body) {
+      return false;
+    }
+    const style = window.getComputedStyle(element);
+    if (!BOX_DISPLAYS[style.display]) {
+      return false;
+    }
+    if (style.display !== 'block' && style.display !== 'list-item') {
+      return true;
+    }
+    const scrolls = (value) => value === 'hidden' || value === 'scroll' || value === 'auto';
+    if (
+      scrolls(style.overflowX) ||
+      scrolls(style.overflowY) ||
+      style.float !== 'none' ||
+      style.position === 'absolute' ||
+      style.position === 'fixed'
+    ) {
+      return true;
+    }
+    const parent = element.parentElement;
+    if (parent && CONTAINING_DISPLAYS[window.getComputedStyle(parent).display]) {
+      return true;
+    }
+    const edge = (side) => parseFloat(style['padding' + side]) > 0 || parseFloat(style['border' + side + 'Width']) > 0;
+    return edge('Top') && edge('Bottom');
+  } catch (exp) {
+    return false;
+  }
+};
+
+// modern-screenshot never gets a <video> (it waits for a seek that may never come, e.g. for camera
+// streams or videos that don't load): this takes its place, with its computed style. The current
+// frame when the page may read it, else the poster, else a dark box.
+const createVideoPlaceholder = (video, { offscreen, masked }) => {
+  let src = null;
+  if (!offscreen && !masked) {
+    try {
+      const width = video.videoWidth;
+      const height = video.videoHeight;
+      if (video.readyState >= 2 && width > 0 && height > 0) {
+        const factor = Math.min(1, 1280 / Math.max(width, height));
+        const canvas = createCanvas(width * factor, height * factor);
+        try {
+          canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
+          src = canvas.toDataURL('image/jpeg', JPEG_QUALITY);
+        } finally {
+          releaseCanvas(canvas);
+        }
+      }
+    } catch (exp) {
+      // A cross-origin video taints the canvas.
+      src = null;
+    }
+    if (!src) {
+      try {
+        src = video.poster || null;
+      } catch (exp) {}
+    }
+  }
+  const placeholder = document.createElement(src ? 'img' : 'div');
+  try {
+    const style = window.getComputedStyle(video);
+    for (let i = 0; i < style.length; i++) {
+      const name = style[i];
+      // Visibility stays inherited, so a masked (hidden) container hides this as well.
+      if (name !== 'visibility') {
+        placeholder.style.setProperty(name, style.getPropertyValue(name));
+      }
+    }
+  } catch (exp) {}
+  if (src) {
+    placeholder.setAttribute('src', src);
+    placeholder.setAttribute('alt', '');
+  } else {
+    placeholder.style.setProperty('background-color', '#1f2430');
+  }
+  if (masked) {
+    placeholder.style.setProperty('visibility', 'hidden', 'important');
+  }
+  return placeholder;
+};
+
+/**
+ * The modern-screenshot hooks that keep the clone private, small and show the scrolled state. The
+ * filter runs right before a node is cloned and onCloneEachNode right after an element (children
+ * first), so a stack pairs every clone with its original. If a pair ever doesn't match, the clone
+ * is left alone: the black boxes painted from the live page still cover everything masked.
+ * checkActive throws to stop the render (cancelled or out of time).
+ */
+const createCloneHooks = (root, privacyOptions, maskSelectors, pageScroll, checkActive) => {
   const stack = [root];
   const extraSelector = (Array.isArray(maskSelectors) ? maskSelectors : []).map(validSelector).filter(Boolean).join(', ');
   const scrollingElement = document.scrollingElement || document.documentElement;
-  // canYield: set once modern-screenshot's style sandbox is loaded (see renderDom).
-  const state = { broken: false, offsetX: 0, offsetY: 0, lastYield: now(), canYield: false };
+  // offscreen: from findOffscreenElements; canYield: set once the style sandbox is in place.
+  const state = {
+    broken: false,
+    offsetX: 0,
+    offsetY: 0,
+    lastYield: now(),
+    canYield: false,
+    elements: 0,
+    offscreen: null,
+  };
+  // Per parent: how many children its clone got so far, and the video stand-ins to insert.
+  const childCounts = new Map();
+  const pendingVideos = new Map();
+  // Away from the viewport: cloned without their content.
+  const emptied = new Set();
+
+  const isMasked = (element) => {
+    try {
+      return (
+        isBlockedElement(element, privacyOptions) ||
+        isMaskMarker(element, privacyOptions) ||
+        (!!extraSelector && element.matches(extraSelector))
+      );
+    } catch (exp) {
+      return false;
+    }
+  };
+
+  const countChild = (parent) => childCounts.set(parent, (childCounts.get(parent) || 0) + 1);
 
   const filter = (node) => {
+    checkActive();
+    const parent = stack[stack.length - 1];
+    if (emptied.has(parent)) {
+      return false;
+    }
     if (!node || node.nodeType !== 1) {
+      countChild(parent);
       return true;
     }
     const tag = String(node.tagName).toUpperCase();
@@ -730,11 +1015,31 @@ const createCloneHooks = (root, privacyOptions, maskSelectors, pageScroll) => {
     if (isGleapUiRoot(node) || (typeof node.id === 'string' && node.id.indexOf('__SANDBOX__') === 0)) {
       return false;
     }
+    if (tag === 'VIDEO') {
+      const list = pendingVideos.get(parent) || [];
+      list.push({
+        index: childCounts.get(parent) || 0,
+        placeholder: createVideoPlaceholder(node, {
+          offscreen: !!state.offscreen && state.offscreen.has(node),
+          masked: isMasked(node),
+        }),
+      });
+      pendingVideos.set(parent, list);
+      return false;
+    }
+    state.elements += 1;
+    if (state.elements > MAX_RENDER_ELEMENTS) {
+      throw new Error('render-budget');
+    }
+    countChild(parent);
     stack.push(node);
     // A same-origin frame's document element is cloned (and reported) as well.
     if ((tag === 'IFRAME' || tag === 'FRAME') && hasSameOriginDocument(node)) {
       stack.push(node);
     }
+    if (state.offscreen && state.offscreen.has(node) && canEmpty(node)) {
+      emptied.add(node);
+    }
     return true;
   };
 
@@ -766,15 +1071,11 @@ const createCloneHooks = (root, privacyOptions, maskSelectors, pageScroll) => {
       return;
     }
     const frame = tag === 'IFRAME' || tag === 'FRAME';
-    let masked = false;
+    let hidden = false;
     try {
-      masked =
-        isBlockedElement(original, privacyOptions) ||
-        isMaskMarker(original, privacyOptions) ||
-        (!!extraSelector && original.matches(extraSelector)) ||
-        (frame && isPaymentFrame(original));
+      hidden = isMasked(original) || (frame && isPaymentFrame(original)) || original.matches(GLEAP_INFLOW_UI_SELECTOR);
     } catch (exp) {}
-    if (masked) {
+    if (hidden) {
       hide(clone);
     }
     if (frame && String(clone.nodeName).toUpperCase() === 'HTML') {
@@ -819,7 +1120,30 @@ const createCloneHooks = (root, privacyOptions, maskSelectors, pageScroll) => {
     }
   };
 
+  const insertVideos = (original, clone) => {
+    const list = pendingVideos.get(original);
+    if (!list) {
+      return;
+    }
+    pendingVideos.delete(original);
+    list.forEach((entry, inserted) => {
+      clone.insertBefore(entry.placeholder, clone.childNodes[entry.index + inserted] || null);
+    });
+  };
+
+  // Nothing of it shows: no image downloads for it.
+  const dropImages = (clone) => {
+    if (clone.style) {
+      IMAGE_PROPERTIES.forEach((property) => clone.style.setProperty(property, 'none', 'important'));
+    }
+    if (String(clone.nodeName).toUpperCase() === 'IMG') {
+      clone.removeAttribute('srcset');
+      clone.setAttribute('src', TRANSPARENT_GIF);
+    }
+  };
+
   const onCloneEachNode = (clone) => {
+    checkActive();
     if (!clone || clone.nodeType !== 1) {
       return undefined;
     }
@@ -829,14 +1153,19 @@ const createCloneHooks = (root, privacyOptions, maskSelectors, pageScroll) => {
     }
     if (!state.broken) {
       try {
+        insertVideos(original, clone);
         maskClone(original, clone);
         restoreScroll(original, clone);
+        if (state.offscreen && state.offscreen.has(original)) {
+          dropImages(clone);
+        }
       } catch (exp) {}
     }
+    childCounts.delete(original);
     // Cloning reads every element's computed style: give the page a chance to breathe.
     if (state.canYield && now() - state.lastYield > 40) {
       state.lastYield = now();
-      return wait(0);
+      return yieldToPage();
     }
     return undefined;
   };
@@ -851,8 +1180,16 @@ const createCloneHooks = (root, privacyOptions, maskSelectors, pageScroll) => {
   return { filter, onCloneEachNode, onCloneNode, state };
 };
 
-// modern-screenshot reads default styles from a hidden srcdoc frame it creates on first use. Made and
+const SANDBOX_HTML = '<!DOCTYPE html><meta charset="UTF-8"><title></title><body>';
+// Stands in for the style sandbox when none could be made: modern-screenshot then copies every
+// style instead of creating its own sandbox (which would leak under Trusted Types).
+const SANDBOX_STUB = { contentWindow: null, remove: () => {} };
+
+// modern-screenshot reads default styles from a hidden frame it creates on first use. Made and
 // loaded up front instead: the render then may yield to the page without racing the frame's load.
+// srcdoc is set before the frame is inserted (inserting a frame without one fires a synchronous
+// load for about:blank); under Trusted Types, where srcdoc can't be set, the initial about:blank
+// document serves.
 const createStyleSandbox = () =>
   new Promise((resolve) => {
     const frame = document.createElement('iframe');
@@ -863,45 +1200,69 @@ const createStyleSandbox = () =>
     frame.setAttribute('aria-hidden', 'true');
     frame.style.visibility = 'hidden';
     frame.style.position = 'fixed';
+    let srcdoc = false;
+    try {
+      frame.srcdoc = SANDBOX_HTML;
+      srcdoc = true;
+    } catch (exp) {}
+    const usable = () => {
+      try {
+        const doc = frame.contentDocument;
+        return !!(
+          doc &&
+          doc.body &&
+          doc.readyState === 'complete' &&
+          (!srcdoc || frame.contentWindow.location.href === 'about:srcdoc')
+        );
+      } catch (exp) {
+        return false;
+      }
+    };
     let settled = false;
-    const done = () => {
+    let timer = null;
+    const settle = (ready) => {
       if (settled) {
         return;
       }
       settled = true;
-      let ready = false;
-      try {
-        const doc = frame.contentDocument;
-        ready = !!(doc && doc.body && doc.readyState === 'complete' && frame.contentWindow.location.href === 'about:srcdoc');
-      } catch (exp) {}
+      clearTimeout(timer);
+      frame.removeEventListener('load', onLoad);
       if (!ready) {
-        frame.remove();
+        try {
+          frame.remove();
+        } catch (exp) {}
       }
       resolve(ready ? frame : null);
     };
-    frame.addEventListener('load', done);
-    setTimeout(done, 1500);
+    const onLoad = () => {
+      if (usable()) {
+        settle(true);
+      }
+    };
+    frame.addEventListener('load', onLoad);
+    timer = setTimeout(() => settle(usable()), 1500);
     try {
       (document.body || document.documentElement).appendChild(frame);
-      frame.srcdoc = '<!DOCTYPE html><meta charset="UTF-8"><title></title><body>';
     } catch (exp) {
-      done();
+      settle(false);
+      return;
+    }
+    if (!srcdoc) {
+      settle(usable());
     }
   });
 
-// Images still loading inside the viewport are worth waiting for; offscreen lazy images never load.
-const mediaLoadingInViewport = () => {
+// Images still loading near the viewport are worth waiting for; offscreen lazy images never load.
+const imagesLoadingInViewport = () => {
   try {
     const viewportHeight = window.innerHeight;
-    const media = document.querySelectorAll('img, video');
-    for (let i = 0; i < media.length; i++) {
-      const element = media[i];
-      const loading =
-        element.tagName === 'IMG' ? !element.complete : element.readyState < 2 && !!(element.currentSrc || element.src);
-      if (!loading) {
+    const images = document.images;
+    for (let i = 0; i < images.length; i++) {
+      const image = images[i];
+      if (image.complete) {
         continue;
       }
-      const rect = element.getBoundingClientRect();
+      const rect = image.getBoundingClientRect();
       if (rect.width > 0 && rect.height > 0 && rect.bottom > 0 && rect.top < viewportHeight) {
         return true;
       }
@@ -910,11 +1271,12 @@ const mediaLoadingInViewport = () => {
   return false;
 };
 
-// Images far below the fold don't show; they get a transparent pixel instead of a download.
+// Images away from the viewport don't show; they get a transparent pixel instead of a download.
 const createImageFetcher = () => {
   try {
-    const limit = window.innerHeight + 400;
-    const below = new Set();
+    const top = -VIEWPORT_MARGIN;
+    const bottom = window.innerHeight + VIEWPORT_MARGIN;
+    const away = new Set();
     const needed = new Set();
     const images = document.images;
     for (let i = 0; i < images.length; i++) {
@@ -922,111 +1284,227 @@ const createImageFetcher = () => {
       if (!url) {
         continue;
       }
-      if (images[i].getBoundingClientRect().top > limit) {
-        below.add(url);
+      const rect = images[i].getBoundingClientRect();
+      if (rect.top > bottom || rect.bottom < top) {
+        away.add(url);
       } else {
         needed.add(url);
       }
     }
-    needed.forEach((url) => below.delete(url));
-    if (below.size === 0) {
+    // Posters stand in for videos (createVideoPlaceholder).
+    const videos = document.querySelectorAll('video[poster]');
+    for (let i = 0; i < videos.length; i++) {
+      const rect = videos[i].getBoundingClientRect();
+      if (!(rect.top > bottom || rect.bottom < top)) {
+        needed.add(videos[i].poster);
+      }
+    }
+    needed.forEach((url) => away.delete(url));
+    if (away.size === 0) {
       return null;
     }
-    return (url) => Promise.resolve(below.has(url) ? TRANSPARENT_GIF : false);
+    return (url) => Promise.resolve(away.has(url) ? TRANSPARENT_GIF : false);
   } catch (exp) {
     return null;
   }
 };
 
-/**
- * Renders the visible part of the page in the browser.
- */
-export const renderDom = ({ privacyOptions, maskSelectors }) => {
-  const root = document.documentElement;
-  const width = Math.max(1, root.clientWidth || window.innerWidth);
-  const height = Math.max(1, root.clientHeight || window.innerHeight);
-  const scale = Math.min(Math.max(window.devicePixelRatio || 1, 1), MAX_CAPTURE_EDGE / Math.max(width, height));
-  const pageScroll = { x: window.scrollX || 0, y: window.scrollY || 0 };
-  const rects = collectMaskRects({ privacyOptions, maskSelectors });
-  const background = pageBackgroundColor();
-  const hooks = createCloneHooks(root, privacyOptions, maskSelectors, pageScroll);
-
-  // Its asset downloads (fonts, images) are not the app's traffic: keep them out of the network logs.
+// Network logging is paused while renders download assets; overlapping renders share one pause.
+let networkLogPauses = 0;
+let networkLogsWereStopped = false;
+
+const pauseNetworkLogs = () => {
   let interceptor = null;
-  let wasStopped = false;
   try {
     interceptor = GleapNetworkIntercepter.getInstance();
-    wasStopped = !!interceptor.stopped;
-    interceptor.setStopped(true);
+    if (networkLogPauses === 0) {
+      networkLogsWereStopped = !!interceptor.stopped;
+      interceptor.setStopped(true);
+    }
+    networkLogPauses += 1;
   } catch (exp) {
-    interceptor = null;
+    return () => {};
   }
-
-  let context = null;
-  const cleanup = () => {
-    if (context) {
+  let resumed = false;
+  return () => {
+    if (resumed) {
+      return;
+    }
+    resumed = true;
+    networkLogPauses = Math.max(0, networkLogPauses - 1);
+    if (networkLogPauses === 0) {
       try {
-        destroyContext(context);
+        interceptor.setStopped(networkLogsWereStopped);
       } catch (exp) {}
-      context = null;
-    }
-    if (interceptor) {
-      interceptor.setStopped(wasStopped);
     }
   };
+};
 
-  return Promise.resolve()
-    .then(() =>
-      createContext(root, {
-        width,
-        height,
-        scale,
-        backgroundColor: null,
-        filter: hooks.filter,
-        onCloneEachNode: hooks.onCloneEachNode,
-        onCloneNode: hooks.onCloneNode,
-        // The clone isn't scrollable: shift the page instead. Fixed and sticky elements keep their
-        // places relative to the image, as they do relative to the viewport.
-        style: {
-          position: 'relative',
-          top: -pageScroll.y + 'px',
-          left: -pageScroll.x + 'px',
-          overflow: 'visible',
-        },
-        features: { restoreScrollPosition: false },
-        fetchFn: createImageFetcher(),
-        // How long to wait for images that are still loading; the render itself gets longer below.
-        timeout: mediaLoadingInViewport() ? 3000 : 50,
-      })
-    )
-    .then((created) => {
-      context = created;
-      context.timeout = 8000;
-      return createStyleSandbox();
-    })
-    .then((sandbox) => {
+/**
+ * Renders the visible part of the page in the browser. Gives up (and cleans up) when isActive()
+ * turns false, after RENDER_DEADLINE_MS or beyond MAX_RENDER_ELEMENTS.
+ */
+export const renderDom = ({ privacyOptions, maskSelectors, isActive }) =>
+  new Promise((resolve, reject) => {
+    const root = document.documentElement;
+    const width = Math.max(1, root.clientWidth || window.innerWidth);
+    const height = Math.max(1, root.clientHeight || window.innerHeight);
+    const scale = Math.min(Math.max(window.devicePixelRatio || 1, 1), MAX_CAPTURE_EDGE / Math.max(width, height));
+    const pageScroll = { x: window.scrollX || 0, y: window.scrollY || 0 };
+    const rects = collectMaskRects({ privacyOptions, maskSelectors });
+    const background = pageBackgroundColor();
+
+    let stopped = null;
+    const isStopped = () => {
+      if (!stopped && isActive && !isActive()) {
+        stopped = 'aborted';
+      }
+      return !!stopped;
+    };
+    const checkActive = () => {
+      if (isStopped()) {
+        throw new Error(stopped);
+      }
+    };
+    const hooks = createCloneHooks(root, privacyOptions, maskSelectors, pageScroll, checkActive);
+
+    // Its asset downloads (fonts, images) are not the app's traffic: keep them out of the network logs.
+    const resumeNetworkLogs = pauseNetworkLogs();
+    let context = null;
+    let sandbox = null;
+    let settled = false;
+    let deadline = null;
+    let watch = null;
+    const cleanup = () => {
+      clearTimeout(deadline);
+      clearInterval(watch);
+      if (context) {
+        try {
+          // Removes the sandbox as well.
+          destroyContext(context);
+        } catch (exp) {}
+        context = null;
+      }
       if (sandbox) {
-        // destroyContext removes it again.
-        context.sandbox = sandbox;
-        hooks.state.canYield = true;
+        try {
+          sandbox.remove();
+        } catch (exp) {}
+        sandbox = null;
       }
-      return domToCanvas(context);
-    })
-    .then(
-      (canvas) => {
-        cleanup();
+      resumeNetworkLogs();
+    };
+    const finish = (error, result) => {
+      if (settled) {
+        if (result) {
+          releaseCanvas(result.canvas);
+        }
+        return;
+      }
+      settled = true;
+      cleanup();
+      if (error) {
+        reject(error);
+      } else {
+        resolve(result);
+      }
+    };
+    deadline = setTimeout(() => {
+      try {
+        stopped = stopped || 'render-timeout';
+        finish(new Error('render-timeout'));
+      } catch (exp) {}
+    }, RENDER_DEADLINE_MS);
+    // A cancel cleans up right away, also while modern-screenshot waits for images.
+    watch = setInterval(() => {
+      try {
+        if (isStopped()) {
+          finish(new Error(stopped));
+        }
+      } catch (exp) {}
+    }, 200);
+
+    Promise.all([findOffscreenElements(isStopped), createStyleSandbox()])
+      .then(([offscreen, frame]) => {
+        if (settled) {
+          if (frame) {
+            frame.remove();
+          }
+          return null;
+        }
+        sandbox = frame;
+        checkActive();
+        hooks.state.offscreen = offscreen;
+        return createContext(root, {
+          width,
+          height,
+          scale,
+          backgroundColor: null,
+          filter: hooks.filter,
+          onCloneEachNode: hooks.onCloneEachNode,
+          onCloneNode: hooks.onCloneNode,
+          onCreateForeignObjectSvg: () => {
+            if (context) {
+              context.drawImageCount = Math.min(context.drawImageCount || 0, MAX_IMAGE_REDRAWS);
+            }
+          },
+          // The clone isn't scrollable: shift the page instead. Fixed and sticky elements keep their
+          // places relative to the image, as they do relative to the viewport.
+          style: {
+            position: 'relative',
+            top: -pageScroll.y + 'px',
+            left: -pageScroll.x + 'px',
+            overflow: 'visible',
+          },
+          features: { restoreScrollPosition: false },
+          fetchFn: createImageFetcher(),
+          // How long to wait for images that are still loading; the render itself gets longer below.
+          timeout: imagesLoadingInViewport() ? 3000 : 50,
+        });
+      })
+      .then((created) => {
+        if (!created) {
+          return null;
+        }
+        if (settled) {
+          try {
+            destroyContext(created);
+          } catch (exp) {}
+          return null;
+        }
+        context = created;
+        context.timeout = 8000;
+        // modern-screenshot would make its own sandbox lazily: ours (removed by destroyContext), or
+        // the stub.
+        context.sandbox = sandbox || SANDBOX_STUB;
+        sandbox = null;
+        hooks.state.canYield = true;
+        checkActive();
+        return domToCanvas(context);
+      })
+      .then((canvas) => {
+        if (!canvas) {
+          return;
+        }
+        if (settled) {
+          releaseCanvas(canvas);
+          return;
+        }
         if (sampleCanvas(canvas) === 'transparent') {
           releaseCanvas(canvas);
-          throw new Error('render-empty');
+          finish(new Error('render-empty'));
+          return;
         }
-        return { canvas, scaleX: canvas.width / width, scaleY: canvas.height / height, rects, background, method: 'dom' };
-      },
-      (error) => {
-        cleanup();
-        throw error;
-      }
-    );
-};
+        finish(null, {
+          canvas,
+          scaleX: canvas.width / width,
+          scaleY: canvas.height / height,
+          rects,
+          background,
+          method: 'dom',
+        });
+      })
+      .catch((error) => finish(error));
+  });
 
 /**
  * Takes the screenshot: the shared tab when `streamPromise` (from requestTabStream) delivers one,
@@ -1042,7 +1520,9 @@ export const captureScreenshot = ({ streamPromise, setUiHidden, privacyOptions,
             stopStream(stream);
             return null;
           }
-          return captureFromTabStream(stream, { setUiHidden, privacyOptions, maskSelectors }).catch(() => null);
+          return captureFromTabStream(stream, { setUiHidden, privacyOptions, maskSelectors, isActive: active }).catch(
+            () => null
+          );
         },
         () => null
       )
@@ -1056,7 +1536,7 @@ export const captureScreenshot = ({ streamPromise, setUiHidden, privacyOptions,
         }
         throw new Error('aborted');
       }
-      return capture || renderDom({ privacyOptions, maskSelectors });
+      return capture || renderDom({ privacyOptions, maskSelectors, isActive: active });
     })
     .then((capture) => {
       try {
diff --git a/src/GleapCaptureSettings.js b/src/GleapCaptureSettings.js
index 3137c684..79d70b62 100644
--- a/src/GleapCaptureSettings.js
+++ b/src/GleapCaptureSettings.js
@@ -1,4 +1,4 @@
-import { GleapConfigManager } from './Gleap';
+import { GleapConfigManager, GleapFrameManager } from './Gleap';
 
 // Capture requests (screenshots, screen recordings and log collection asked for by teammates, AI
 // agents or workflows): the local switches and what this browser can do. Kept free of heavy imports,
@@ -23,6 +23,32 @@ export const setRemoteLogCollectionEnabled = (enabled) => {
 
 export const isRemoteLogCollectionEnabled = () => remoteLogCollectionEnabled;
 
+// Banner, modal and checklist actions that open something (the widget, a tour, a form, a URL, the
+// app's custom action).
+const OUTBOUND_OPEN_ACTIONS = [
+  'start-conversation',
+  'start-custom-action',
+  'start-product-tour',
+  'open-url',
+  'show-form',
+  'show-survey',
+  'show-news-article',
+  'show-help-article',
+  'show-checklist',
+];
+
+/**
+ * Whether such an action is held back: nothing opens while the widget is hidden for a capture.
+ * @param {string} name the action (message name)
+ */
+export const isOutboundActionBlocked = (name) => {
+  try {
+    return OUTBOUND_OPEN_ACTIONS.indexOf(name) !== -1 && GleapFrameManager.getInstance().isCaptureHidden();
+  } catch (exp) {
+    return false;
+  }
+};
+
 export const getSdkVersion = () => {
   try {
     return typeof SDK_VERSION !== 'undefined' ? SDK_VERSION : '';
diff --git a/src/GleapCaptureTasks.js b/src/GleapCaptureTasks.js
new file mode 100644
index 00000000..94aa6e8e
--- /dev/null
+++ b/src/GleapCaptureTasks.js
@@ -0,0 +1,135 @@
+// Long work of capture requests (packing a replay, serializing a log bundle) in slices, so the
+// page's main thread is never blocked for long.
+
+// Work per slice before the page gets the thread back.
+const SLICE_MS = 25;
+
+export const now = () => (typeof performance !== 'undefined' && performance.now ? performance.now() : Date.now());
+
+/**
+ * Resolves in a new task. A MessageChannel message is not throttled like timers are in background
+ * tabs, where log requests usually arrive.
+ * @returns {Promise<void>}
+ */
+export const yieldToPage = () =>
+  new Promise((resolve) => {
+    try {
+      if (typeof MessageChannel === 'function') {
+        const channel = new MessageChannel();
+        channel.port1.onmessage = () => {
+          channel.port1.onmessage = null;
+          try {
+            channel.port1.close();
+            channel.port2.close();
+          } catch (exp) {}
+          resolve();
+        };
+        channel.port2.postMessage(0);
+        return;
+      }
+    } catch (exp) {}
+    setTimeout(resolve, 0);
+  });
+
+/**
+ * Calls work(item, index) for every item, yielding to the page between slices.
+ * @param {Array} items
+ * @param {function(*, number)} work
+ * @param {function(): boolean} [isCancelled] stops early (rejects with 'cancelled')
+ * @returns {Promise<void>}
+ */
+export const forEachSliced = (items, work, isCancelled) =>
+  new Promise((resolve, reject) => {
+    let index = 0;
+    const step = () => {
+      try {
+        if (isCancelled && isCancelled()) {
+          reject(new Error('cancelled'));
+          return;
+        }
+        const start = now();
+        while (index < items.length) {
+          work(items[index], index);
+          index += 1;
+          if (now() - start > SLICE_MS && index < items.length) {
+            yieldToPage().then(step);
+            return;
+          }
+        }
+        resolve();
+      } catch (error) {
+        reject(error);
+      }
+    };
+    step();
+  });
+
+const stringifyValue = (value) => {
+  const json = JSON.stringify(value);
+  return json === undefined ? null : json;
+};
+
+// Arrays this long (or objects holding one) are serialized entry by entry.
+const LARGE_ARRAY = 50;
+
+const hasLargeArray = (value) =>
+  !!value &&
+  typeof value === 'object' &&
+  !Array.isArray(value) &&
+  Object.keys(value).some((key) => Array.isArray(value[key]) && value[key].length > LARGE_ARRAY);
+
+/**
+ * The JSON text of a plain object as string parts (for a Blob, so no single huge string is built),
+ * serialized in slices. A property that can't be serialized (custom data with cycles) is left out.
+ * @returns {Promise<string[]>}
+ */
+export const toJsonParts = (value, isCancelled) => {
+  const parts = ['{'];
+  let first = true;
+  const keys = Object.keys(value);
+  const property = (key) => {
+    const item = value[key];
+    const prefix = (first ? '' : ',') + JSON.stringify(key) + ':';
+    if (Array.isArray(item) && item.length > LARGE_ARRAY) {
+      first = false;
+      parts.push(prefix + '[');
+      return forEachSliced(
+        item,
+        (entry, index) => {
+          let json = null;
+          try {
+            json = stringifyValue(entry);
+          } catch (exp) {}
+          parts.push((index ? ',' : '') + (json || 'null'));
+        },
+        isCancelled
+      ).then(() => {
+        parts.push(']');
+      });
+    }
+    if (hasLargeArray(item)) {
+      first = false;
+      parts.push(prefix);
+      return toJsonParts(item, isCancelled).then((nested) => {
+        nested.forEach((part) => parts.push(part));
+      });
+    }
+    let json = null;
+    try {
+      json = stringifyValue(item);
+    } catch (exp) {
+      json = null;
+    }
+    if (json !== null) {
+      first = false;
+      parts.push(prefix + json);
+    }
+    return yieldToPage();
+  };
+  return keys
+    .reduce((chain, key) => chain.then(() => property(key)), Promise.resolve())
+    .then(() => {
+      parts.push('}');
+      return parts;
+    });
+};
diff --git a/src/GleapCaptureUI.js b/src/GleapCaptureUI.js
index 0109eb0c..a2b0e100 100644
--- a/src/GleapCaptureUI.js
+++ b/src/GleapCaptureUI.js
@@ -69,6 +69,7 @@ const STYLES =
   'button:hover{background:rgba(255,255,255,.2)}' +
   'button:focus-visible{outline:2px solid #fff;outline-offset:2px}' +
   'button[disabled]{opacity:.55;cursor:default}' +
+  'button[aria-disabled=true]{cursor:default}' +
   '.primary,.primary:hover{background:var(--primary);color:var(--on-primary)}' +
   '.stop,.stop:hover{background:#e5484d;color:#fff}' +
   '.icon{width:36px;padding:0}' +
@@ -263,7 +264,7 @@ export default class GleapCaptureUI {
     button.disabled = !!disabled;
     button.addEventListener('click', (event) => {
       event.stopPropagation();
-      if (!button.disabled) {
+      if (!button.disabled && button.getAttribute('aria-disabled') !== 'true') {
         this.action(action);
       }
     });
@@ -323,10 +324,12 @@ export default class GleapCaptureUI {
     bar.setAttribute('aria-label', label);
     if (!recording) {
       bar.addEventListener('keydown', (event) => {
-        if (event.key === 'Escape') {
-          event.stopPropagation();
-          this.action('cancel');
-        }
+        try {
+          if (event.key === 'Escape') {
+            event.stopPropagation();
+            this.action('cancel');
+          }
+        } catch (exp) {}
       });
     }
     this.place(bar);
@@ -347,13 +350,15 @@ export default class GleapCaptureUI {
   enableDragging(bar, grip) {
     let start = null;
     const move = (event) => {
-      if (start) {
-        this.position = {
-          left: Math.max(8, Math.min(window.innerWidth - bar.offsetWidth - 8, start.left + event.clientX - start.x)),
-          top: Math.max(8, Math.min(window.innerHeight - bar.offsetHeight - 8, start.top + event.clientY - start.y)),
-        };
-        this.place(bar);
-      }
+      try {
+        if (start) {
+          this.position = {
+            left: Math.max(8, Math.min(window.innerWidth - bar.offsetWidth - 8, start.left + event.clientX - start.x)),
+            top: Math.max(8, Math.min(window.innerHeight - bar.offsetHeight - 8, start.top + event.clientY - start.y)),
+          };
+          this.place(bar);
+        }
+      } catch (exp) {}
     };
     const up = () => {
       start = null;
@@ -362,26 +367,30 @@ export default class GleapCaptureUI {
       window.removeEventListener('pointercancel', up, true);
     };
     const down = (event) => {
-      if (event.button) {
-        return;
-      }
-      event.preventDefault();
-      const rect = bar.getBoundingClientRect();
-      start = { x: event.clientX, y: event.clientY, left: rect.left, top: rect.top };
-      window.addEventListener('pointermove', move, true);
-      window.addEventListener('pointerup', up, true);
-      window.addEventListener('pointercancel', up, true);
+      try {
+        if (event.button) {
+          return;
+        }
+        event.preventDefault();
+        const rect = bar.getBoundingClientRect();
+        start = { x: event.clientX, y: event.clientY, left: rect.left, top: rect.top };
+        window.addEventListener('pointermove', move, true);
+        window.addEventListener('pointerup', up, true);
+        window.addEventListener('pointercancel', up, true);
+      } catch (exp) {}
     };
     grip.addEventListener('pointerdown', down);
     this.cleanupDrag = up;
   }
 
+  // While busy it does nothing but keeps the focus (aria-disabled, not disabled).
   busyButton(text, action, iconName, busy) {
-    const button = this.button(busy ? null : text, action, 'primary', busy ? null : iconName, busy);
+    const button = this.button(busy ? null : text, action, 'primary', busy ? null : iconName);
     if (busy) {
       button.appendChild(el('span', 'spin'));
       button.appendChild(document.createTextNode(text));
       button.setAttribute('aria-busy', 'true');
+      button.setAttribute('aria-disabled', 'true');
     }
     return button;
   }
@@ -396,7 +405,8 @@ export default class GleapCaptureUI {
       el('div', 'hint', [labels.barScreenshotHint]),
       [
         this.busyButton(labels.barCapture, 'capture', 'camera', busy),
-        this.button(labels.barCancel, 'cancel', null, null, busy),
+        // Stays available while the capture runs: Cancel stops it.
+        this.button(labels.barCancel, 'cancel'),
       ],
       0
     );
@@ -409,16 +419,12 @@ export default class GleapCaptureUI {
   showRecordBar({ busy, mic, interrupted }) {
     const labels = this.labels;
     const start = interrupted ? labels.recordAgain : labels.barStart;
-    this.bar(
-      start,
-      el('div', 'hint', [interrupted ? labels.recordingInterrupted : labels.barRecordHint]),
-      [
-        this.busyButton(start, 'start', 'record', busy),
-        this.micToggle(mic, busy),
-        this.button(labels.barCancel, 'cancel', null, null, busy),
-      ].filter(Boolean),
-      0
-    );
+    const buttons = [
+      this.busyButton(start, 'start', 'record', busy),
+      this.micToggle(mic, busy),
+      this.button(labels.barCancel, 'cancel'),
+    ].filter(Boolean);
+    this.bar(start, el('div', 'hint', [interrupted ? labels.recordingInterrupted : labels.barRecordHint]), buttons, 0);
   }
 
   /**
diff --git a/src/GleapChecklist.js b/src/GleapChecklist.js
index 805695e7..b3210ad4 100644
--- a/src/GleapChecklist.js
+++ b/src/GleapChecklist.js
@@ -41,6 +41,7 @@
 import ChecklistNetworkManager from './ChecklistNetworkManager';
 import Gleap, { GleapConfigManager, GleapSession, GleapTranslationManager, GleapEventManager } from './Gleap';
 import GleapThemeManager from './GleapThemeManager';
+import { isOutboundActionBlocked } from './GleapCaptureSettings';
 
 export const registerGleapChecklist = () => {
   if (typeof customElements !== 'undefined' && typeof HTMLElement !== 'undefined' && typeof window !== 'undefined') {
@@ -1007,6 +1008,8 @@ export const registerGleapChecklist = () => {
               if (!this.checklistData?.outbound?.config?.steps || typeof Gleap === 'undefined') return;
               const step = this.checklistData.outbound.config.steps[index];
               if (!step || !step.action || step.action === 'none') return;
+              // Nothing opens while the widget is hidden for a capture.
+              if (isOutboundActionBlocked('start-custom-action')) return;
               try {
                 if (step.action === 'BOT') Gleap.startBot(step.botId);
                 else if (step.action === 'CUSTOM_ACTION') Gleap.triggerCustomAction(step.actionBody);
diff --git a/src/GleapModalManager.js b/src/GleapModalManager.js
index 81bc1e4b..2f72feaa 100644
--- a/src/GleapModalManager.js
+++ b/src/GleapModalManager.js
@@ -1,4 +1,5 @@
 import Gleap, { GleapConfigManager, GleapFrameManager } from './Gleap';
+import { isOutboundActionBlocked } from './GleapCaptureSettings';
 import { bootstrapGleapFrame } from './GleapHelper';
 
 // How long the card renderer gets to announce itself (`modal-loaded`) before we assume the
@@ -93,6 +94,10 @@ export default class GleapModalManager {
         if (data.name === 'modal-close') {
           this.hideModal();
         }
+        // While the widget is hidden for a capture (screenshot or recording), actions open nothing.
+        if (isOutboundActionBlocked(data.name)) {
+          return;
+        }
         if (data.name === 'start-conversation') {
           Gleap.startBot(data.data?.botId);
         }
diff --git a/src/GleapReplayRecorder.js b/src/GleapReplayRecorder.js
index 94a29b9b..af4a0a62 100644
--- a/src/GleapReplayRecorder.js
+++ b/src/GleapReplayRecorder.js
@@ -322,6 +322,22 @@ export default class GleapReplayRecorder {
     }, wait);
   }
 
+  /**
+   * The current replay without packing its events (capture requests pack them in slices).
+   */
+  getReplaySnapshot() {
+    return {
+      startDate: this.startDate,
+      events: [].concat(...this.segments),
+      packed: false,
+      baseUrl: window.location.origin,
+      width: window.innerWidth,
+      height: window.innerHeight,
+      isMobile: isMobile(),
+      type: 'rrweb',
+    };
+  }
+
   /**
    * Get the current replay data
    * @returns {Promise<void>}

From 49e8d840d6cf8e2ececbe6a267deec8dc7a9d01a Mon Sep 17 00:00:00 2001
From: Lukas Boehler <lukas@gleap.io>
Date: Thu, 1 Oct 2026 06:47:07 -0400
Subject: [PATCH 09/11] fix: the capture bar never shows up in a tab screenshot

The bar was hidden only once sharing had started, and a tab stream can still
hand out frames painted before that, so a screenshot could show the bar with
its spinner. It is now hidden as the browser's share dialog opens (Escape
still cancels), shown again with its busy state if sharing is declined, and
the first frame is taken 120 ms after the hide is painted.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/GleapCaptureManager.js    |  5 +++++
 src/GleapCaptureScreenshot.js | 13 +++++++++++--
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/GleapCaptureManager.js b/src/GleapCaptureManager.js
index 6bf64c9d..251644d4 100644
--- a/src/GleapCaptureManager.js
+++ b/src/GleapCaptureManager.js
@@ -607,6 +607,11 @@ export default class GleapCaptureManager {
     session.phase = 'capturing';
     this.ui.showScreenshotBar(true);
     this.sendState(session.requestId, 'capturing');
+    if (useTab) {
+      // Hidden before the browser's share dialog shows: a tab stream can still hand out frames
+      // painted before a later hide, so the bar may never be on the page while the tab is shared.
+      this.setCaptureUiHidden(true);
+    }
 
     // The logs as they are at the moment of the capture.
     let logsBundle = null;
diff --git a/src/GleapCaptureScreenshot.js b/src/GleapCaptureScreenshot.js
index f906ccfa..26d9aab9 100644
--- a/src/GleapCaptureScreenshot.js
+++ b/src/GleapCaptureScreenshot.js
@@ -606,6 +606,8 @@ const grabFrame = (track, stream) => {
 
 // The longest Gleap's UI (the capture bar too) stays hidden for a tab frame.
 const TAB_CAPTURE_MAX_MS = 15000;
+// After the hide is painted: tab frames reach the track a few frames late.
+const TAB_FRAME_SETTLE_MS = 120;
 
 // Rects from getBoundingClientRect are in the layout viewport; a tab frame shows the visual viewport
 // (pinch zoom) stretched over the window.
@@ -731,7 +733,9 @@ export const captureFromTabStream = (stream, { setUiHidden, privacyOptions, mask
       } catch (exp) {}
     }, 200);
     withTimeout(
-      nextPaint().then(() => attempt(0)),
+      nextPaint()
+        .then(() => wait(TAB_FRAME_SETTLE_MS))
+        .then(() => attempt(0)),
       TAB_CAPTURE_MAX_MS,
       'tab-timeout'
     ).then(
@@ -1524,7 +1528,12 @@ export const captureScreenshot = ({ streamPromise, setUiHidden, privacyOptions,
             () => null
           );
         },
-        () => null
+        () => {
+          // Declined or failed: the bar (hidden for the share dialog) shows its busy state again
+          // while the page is rendered instead.
+          setUiHidden(false);
+          return null;
+        }
       )
     : Promise.resolve(null);
 

From c2689e22e3b6f41ef3868ae9e2b2baa3fe0482e5 Mon Sep 17 00:00:00 2001
From: Lukas Boehler <lukas@gleap.io>
Date: Thu, 1 Oct 2026 07:12:07 -0400
Subject: [PATCH 10/11] style: round, minimal capture bar; translated drag
 hint; Send icon after its label

Matches the native bars: the bar and its buttons are fully rounded, Stop is a
round icon-only button (its label stays the accessible name), the recording
bar shows only the dot and the timer, the start button reads "Start", the
grip shows the translated drag hint (barDragHint) as its tooltip, and the
preview's Send carries its icon after the label.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/GleapCaptureUI.js | 38 +++++++++++++++++++++-----------------
 1 file changed, 21 insertions(+), 17 deletions(-)

diff --git a/src/GleapCaptureUI.js b/src/GleapCaptureUI.js
index a2b0e100..172dbc30 100644
--- a/src/GleapCaptureUI.js
+++ b/src/GleapCaptureUI.js
@@ -13,9 +13,10 @@ export const DEFAULT_CAPTURE_LABELS = {
   barCapture: 'Capture',
   barCancel: 'Cancel',
   barRecordHint: 'Go to where the issue happens, then start recording.',
-  barStart: 'Start recording',
+  barStart: 'Start',
   barStop: 'Stop',
   barRecording: 'Recording',
+  barDragHint: 'Drag to move',
   microphone: 'Microphone',
   previewTitle: 'Send this recording?',
   previewSend: 'Send',
@@ -57,7 +58,7 @@ const STYLES =
   ':host{all:initial}' +
   '.bar,.overlay{font:14px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:#fff;letter-spacing:normal;text-align:start;-webkit-font-smoothing:antialiased;box-sizing:border-box;pointer-events:auto;animation:in .18s ease-out both}' +
   '.bar *,.overlay *{box-sizing:border-box}' +
-  '.bar{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;width:max-content;max-width:min(680px,calc(100vw - 32px));padding:8px;border-radius:16px;background:rgba(22,22,26,.97);box-shadow:0 12px 40px rgba(0,0,0,.3),0 0 0 1px rgba(255,255,255,.1)}' +
+  '.bar{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;width:max-content;max-width:min(680px,calc(100vw - 32px));padding:8px;border-radius:28px;background:rgba(22,22,26,.97);box-shadow:0 12px 40px rgba(0,0,0,.3),0 0 0 1px rgba(255,255,255,.1)}' +
   '.moved{transform:none}' +
   '.grip{flex:none;align-self:stretch;width:18px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.45);cursor:grab;touch-action:none}' +
   '.hint{flex:1 1 auto;min-width:0;padding:0 6px}' +
@@ -65,14 +66,14 @@ const STYLES =
   '.dot{flex:none;width:10px;height:10px;border-radius:50%;background:#ff4d4f;animation:pulse 1.4s ease-in-out infinite}' +
   '.timer{font-variant-numeric:tabular-nums;color:rgba(255,255,255,.85)}' +
   '.actions{flex:none;display:flex;align-items:center;gap:8px}' +
-  'button{-webkit-appearance:none;appearance:none;margin:0;border:0;border-radius:10px;min-height:36px;padding:0 14px;display:inline-flex;align-items:center;justify-content:center;gap:6px;font:inherit;font-weight:600;white-space:nowrap;cursor:pointer;color:#fff;background:rgba(255,255,255,.12)}' +
+  'button{-webkit-appearance:none;appearance:none;margin:0;border:0;border-radius:999px;min-height:36px;padding:0 14px;display:inline-flex;align-items:center;justify-content:center;gap:6px;font:inherit;font-weight:600;white-space:nowrap;cursor:pointer;color:#fff;background:rgba(255,255,255,.12)}' +
   'button:hover{background:rgba(255,255,255,.2)}' +
   'button:focus-visible{outline:2px solid #fff;outline-offset:2px}' +
   'button[disabled]{opacity:.55;cursor:default}' +
   'button[aria-disabled=true]{cursor:default}' +
   '.primary,.primary:hover{background:var(--primary);color:var(--on-primary)}' +
   '.stop,.stop:hover{background:#e5484d;color:#fff}' +
-  '.icon{width:36px;padding:0}' +
+  '.icon{width:36px;padding:0;border-radius:50%}' +
   '.icon[aria-pressed=false]{color:rgba(255,255,255,.55)}' +
   '.spin{flex:none;width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .8s linear infinite}' +
   'svg{flex:none;width:18px;height:18px}' +
@@ -117,6 +118,9 @@ const ICONS = {
   ],
   clock: ['M12 20.5a8.5 8.5 0 1 0 0-17 8.5 8.5 0 0 0 0 17ZM12 7.5V12l3 2'],
   pointer: ['M6 3.5 18.5 12l-5.6 1.3-2.7 5.2Z'],
+  send: [
+    'M14.54 21.69a.5.5 0 0 0 .94-.03l6.5-19a.5.5 0 0 0-.64-.63l-19 6.5a.5.5 0 0 0-.02.93l7.93 3.18a2 2 0 0 1 1.11 1.11zM21.85 2.15l-10.94 10.94',
+  ],
 };
 
 const SVG_NS = 'http://www.w3.org/2000/svg';
@@ -258,8 +262,9 @@ export default class GleapCaptureUI {
     } catch (exp) {}
   }
 
-  button(text, action, className, iconName, disabled) {
-    const button = el('button', className, [iconName ? icon(iconName) : null, text]);
+  button(text, action, className, iconName, disabled, iconAfter) {
+    const symbol = iconName ? icon(iconName) : null;
+    const button = el('button', className, iconAfter ? [text, symbol] : [symbol, text]);
     button.type = 'button';
     button.disabled = !!disabled;
     button.addEventListener('click', (event) => {
@@ -318,6 +323,7 @@ export default class GleapCaptureUI {
     this.reset();
     const grip = el('div', 'grip', [icon('grip')]);
     grip.setAttribute('aria-hidden', 'true');
+    grip.title = this.labels.barDragHint;
     const actions = el('div', 'actions', buttons);
     const bar = el('div', 'bar' + (recording ? ' recording' : ''), [grip, content, actions]);
     bar.setAttribute('role', 'region');
@@ -413,7 +419,7 @@ export default class GleapCaptureUI {
   }
 
   /**
-   * Recording bar before the start: hint · Start recording · (microphone) · Cancel. After a page
+   * Recording bar before the start: hint · Start · (microphone) · Cancel. After a page
    * load it says the recording stopped, with Record again.
    */
   showRecordBar({ busy, mic, interrupted }) {
@@ -441,21 +447,19 @@ export default class GleapCaptureUI {
   }
 
   /**
-   * While recording: red dot · Recording 0:12 / 1:00 · (microphone) · Stop.
+   * While recording: red dot · 0:12 / 1:00 · (microphone) · round Stop (its label is the accessible
+   * name; the bar's is Recording).
    */
   showRecordingBar({ mic, maxSec }) {
     const labels = this.labels;
     this.maxSec = maxSec;
     const timer = el('span', 'timer', [formatDuration(0) + ' / ' + formatDuration(maxSec)]);
     timer.setAttribute('role', 'timer');
-    const buttons = [this.micToggle(mic), this.button(labels.barStop, 'stop', 'stop', 'stop')].filter(Boolean);
-    this.bar(
-      labels.barRecording,
-      el('div', 'hint rec', [el('span', 'dot'), labels.barRecording, timer]),
-      buttons,
-      buttons.length - 1,
-      true
-    );
+    const stop = this.button(null, 'stop', 'stop icon', 'stop');
+    stop.setAttribute('aria-label', labels.barStop);
+    stop.title = labels.barStop;
+    const buttons = [this.micToggle(mic), stop].filter(Boolean);
+    this.bar(labels.barRecording, el('div', 'hint rec', [el('span', 'dot'), timer]), buttons, buttons.length - 1, true);
     this.timer = timer;
   }
 
@@ -523,7 +527,7 @@ export default class GleapCaptureUI {
     const buttons = {
       cancel: this.button(labels.barCancel, 'cancel'),
       retake: this.button(labels.previewRetake, 'retake'),
-      send: this.button(labels.previewSend, 'send', 'primary'),
+      send: this.button(labels.previewSend, 'send', 'primary', 'send', false, true),
     };
     this.previewButtons = buttons;
     const title = el('div', 'title', [labels.previewTitle]);

From 23103f8b18844336ef2f7935ae44a549e13f7063 Mon Sep 17 00:00:00 2001
From: Lukas Boehler <lukas@gleap.io>
Date: Thu, 1 Oct 2026 07:52:47 -0400
Subject: [PATCH 11/11] docs: release notes for capture requests

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 CHANGELOG.md | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 24678cd6..cf7e11b6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Changelog
 
+## Unreleased
+Capture requests ("show me the issue"): when a workflow, an AI agent or a teammate asks the customer for a screenshot or a screen recording in a conversation, the customer answers from the card in the widget and the SDK captures the page. On desktop Chrome and Edge the screenshot is taken from the tab itself after one "Share this tab" confirmation (exact pixels); everywhere else, and when sharing is declined, the page is rendered in the browser. Screen recordings use the browser's screen sharing (MP4 where supported, otherwise WebM with its duration written in so players can seek), with the microphone if the project allows it; while recording, everything a screenshot masks is blurred on the page. When screen sharing doesn't start, and on phones and tablets, the customer can record the page instead (a page recording the dashboard plays like a session replay). Password, one-time-code and card fields, the `gl-mask` / `gl-block` / `rr-mask` / `rr-block` classes, the `setReplayOptions` privacy options, payment frames and the project's masked elements are left out. The capture bar is a small dark pill the customer can drag; all its texts come from the widget's translations.
+Logs requests: workflows, AI agents and teammates can collect the page's console logs, network logs, custom data, environment data and events in the background, the same data a bug report carries. They arrive over the SDK's websocket and are uploaded once, gzipped.
+New: `Gleap.setCaptureEnabled(enabled)` (off: the widget only offers a file upload) and `Gleap.setRemoteLogCollectionEnabled(enabled)` (off: logs requests are answered as unsupported and captures are sent without logs).
+The classic screen recording now stops cleanly when the customer clicks the browser's "Stop sharing" and is no longer uploaded twice. The browser bundle grows by about 34 KB gzipped.
+
 ## 19.0.0
 Added widget color schemes, so the widget can match the host app's dark/light mode. Turn it on in the dashboard (Widget → Look & feel → Adapt to dark / light mode, delivered as `colorScheme` in the flow config) or at runtime with `Gleap.setColorScheme("auto" | "light" | "dark", options?)`, which overrides the dashboard (until the first call, the dashboard setting applies):
 `"auto"` follows the host app and switches live when it changes. It looks at theme markers on `<html>`/`<body>` (classes like `dark`/`light`, attributes like `data-theme`, `data-bs-theme`, `data-color-scheme`, `data-mode`), then the page's CSS `color-scheme`, then the page background, and finally the OS `prefers-color-scheme`.