@agent-native/core 0.98.3 → 0.98.5

package/corpus/core/src/client/settings/DemoModeSection.tsx

@@ -64,9 +64,9 @@ export function DemoModeSection() {
           Enable demo mode
         </div>
         <p className="text-[10px] text-muted-foreground mt-0.5">
-          Replace emails and numbers with realistic fake data everywhere — in
-          the UI and what the agent sees. Names, free text, labels, IDs, and
-          structure are preserved so the app keeps working.
+          Anonymize emails in the UI and reshape supported dashboard charts for
+          presentations. Agent-visible emails and numbers are also anonymized.
+          Names, labels, IDs, and structure stay intact.
         </p>
         {forced && (
           <p className="text-[10px] text-muted-foreground mt-0.5">

package/corpus/core/src/client/sse-event-processor.ts

@@ -707,6 +707,22 @@ function dispatchActivityClear(tabId: string | undefined) {
   );
 }
 
+// Fires once per chunk (see ProcessEventState.streamProgressDispatched) the
+// moment a chunk produces real model output (visible text or a reasoning
+// delta). Unlike `agent-chat:activity-clear` — which also fires for
+// old-chunk `tool_done` replays and server-retry `clear` events, and so
+// cannot be used to detect genuine forward progress — this event exists
+// solely so listeners can distinguish "the run is actually producing new
+// output" from those replay/retry cases.
+function dispatchStreamProgress(tabId: string | undefined) {
+  if (typeof window === "undefined") return;
+  window.dispatchEvent(
+    new CustomEvent("agent-chat:stream-progress", {
+      detail: { tabId },
+    }),
+  );
+}
+
 function dispatchMissingApiKey(tabId: string | undefined) {
   if (typeof window === "undefined") return;
   window.dispatchEvent(
@@ -946,6 +962,11 @@ function completedToolOnlyMessage(toolNames: string[]): string | null {
 
 interface ProcessEventState {
   completedToolsAfterLastAssistantText: Set<string>;
+  /** Set once `agent-chat:stream-progress` has been dispatched for the
+   *  current chunk, so a burst of per-token text/reasoning deltas only fires
+   *  it once. Cleared by `resetProcessEventState` on a server `clear` retry
+   *  so the next batch of real output re-arms it. */
+  streamProgressDispatched: boolean;
 }
 
 function markAssistantText(state: ProcessEventState | undefined) {
@@ -961,6 +982,18 @@ function markCompletedToolAfterAssistantText(
 
 function resetProcessEventState(state: ProcessEventState | undefined) {
   state?.completedToolsAfterLastAssistantText.clear();
+  if (state) state.streamProgressDispatched = false;
+}
+
+// Returns true the first time it's called for a given state (or every time
+// when state is unavailable, since there is nothing to dedupe against) and
+// false on subsequent calls until `resetProcessEventState` re-arms it.
+function shouldDispatchStreamProgress(
+  state: ProcessEventState | undefined,
+): boolean {
+  if (state?.streamProgressDispatched) return false;
+  if (state) state.streamProgressDispatched = true;
+  return true;
 }
 
 /**
@@ -1005,7 +1038,13 @@ export function processEvent(
     // activity label so a transient "Contacting model" / "Still generating
     // image" doesn't linger beside streamed text. Idempotent (clears once, then
     // no-ops) so per-token text deltas stay cheap.
-    if (ev.text) dispatchActivityClear(tabId);
+    if (ev.text) {
+      dispatchActivityClear(tabId);
+      // Real output resumed — let listeners (e.g. the auto-resume "Resuming…"
+      // indicator) clear state that must NOT be cleared by activity-clear
+      // alone, since activity-clear also fires for old-chunk/retry replays.
+      if (shouldDispatchStreamProgress(state)) dispatchStreamProgress(tabId);
+    }
     if (ev.text?.trim()) markAssistantText(state);
     const lastPart = content[content.length - 1];
     if (lastPart && lastPart.type === "text") {
@@ -1024,6 +1063,7 @@ export function processEvent(
     // part so the UI can render a single collapsible "Thinking" cell.
     const delta = ev.text ?? "";
     if (!delta) return { action: "continue" };
+    if (shouldDispatchStreamProgress(state)) dispatchStreamProgress(tabId);
     const lastPart = content[content.length - 1];
     if (lastPart && lastPart.type === "reasoning") {
       lastPart.text += delta;
@@ -1567,6 +1607,7 @@ export async function* readSSEStream(
     options?.preparingActionState ?? {};
   const processEventState: ProcessEventState = {
     completedToolsAfterLastAssistantText: new Set(),
+    streamProgressDispatched: false,
   };
 
   const withStreamMetadata = (r: ChatModelRunResult): ChatModelRunResult => {
@@ -1769,6 +1810,7 @@ export async function readSSEStreamRaw(
     options?.preparingActionState ?? {};
   const processEventState: ProcessEventState = {
     completedToolsAfterLastAssistantText: new Set(),
+    streamProgressDispatched: false,
   };
   // Tracks whether the most recent content state was already pushed via
   // onUpdate inside the loop, so the post-loop flush below doesn't emit the

package/corpus/core/src/demo/actions/toggle-demo-mode.ts

@@ -5,7 +5,7 @@ import { writeAppState } from "../../application-state/script-helpers.js";
 
 export default defineAction({
   description:
-    "Turn demo mode on or off. When demo mode is on, the app replaces email addresses and numbers with realistic fake data everywhere — in the UI and in what you (the agent) see — while keeping names, free text, labels, IDs, dates, and structure intact so everything still works. Use when the user asks to 'hide my data', 'turn on demo mode', 'anonymize this for a screen share / recording', or similar. This is the same toggle as the Demo mode switch in settings.",
+    "Turn demo mode on or off. When demo mode is on, the UI replaces every email address with anonymous@builder.io and supported dashboards reshape chart values for presentations. Agent-visible results use the same anonymous email and anonymize numbers while keeping names, free text, labels, IDs, dates, and structure intact. Use when the user asks to 'hide my data', 'turn on demo mode', 'anonymize this for a screen share / recording', or similar. This is the same toggle as the Demo mode switch in settings.",
   schema: z.object({
     enabled: z
       .boolean()
@@ -16,7 +16,7 @@ export default defineAction({
     return {
       enabled,
       message: enabled
-        ? "Demo mode is ON — emails and numbers are now replaced with deterministic fake data everywhere (UI and agent). Names, free text, labels, IDs, and structure are preserved so everything keeps working."
+        ? "Demo mode is ON — UI emails are anonymized and supported dashboard charts are reshaped for presentation. Agent-visible emails and numbers are also anonymized. Names, free text, labels, IDs, and structure are preserved."
         : "Demo mode is OFF — real data is shown again.",
     };
   },

package/corpus/core/src/demo/config.ts

@@ -1,12 +1,12 @@
 /**
  * Demo mode gate.
  *
- * Demo mode replaces email addresses and numbers in every action result with
- * deterministic fake data — for both the UI and what the agent sees — while
- * preserving names, free text, labels, IDs, dates, URLs, and structure so the
- * app keeps working. The redaction WALK (see ./redact.ts) is expensive on
- * large payloads, so callers MUST gate it behind this function and only walk
- * when it returns true.
+ * Demo mode replaces every email address with `anonymous@builder.io` and
+ * anonymizes numbers in every action result — for both the UI and what the
+ * agent sees — while preserving names, free text, labels, IDs, dates, URLs,
+ * and structure so the app keeps working. The redaction WALK (see ./redact.ts)
+ * is expensive on large payloads, so callers MUST gate it behind this function
+ * and only walk when it returns true.
  *
  * This gate itself is intentionally cheap:
  *   - An env-forced deployment (a hosted demo site) short-circuits with zero

package/corpus/core/src/demo/fetch-interceptor.ts

@@ -46,6 +46,32 @@ const SKIP_SUBSTRINGS = [
   "/_agent-native/runs",
 ];
 
+// Raw rrweb payloads are playback data, not ordinary app UI records. Skipping
+// these is not just a perf optimization that avoids walking/cloning huge
+// DOM/event trees on the main thread: demo number
+// redaction previously ran over this exact raw replay JSON and faked any
+// integer >= 1000 it found — Meta/ViewportResize widths, pointer x/y
+// coordinates, and numeric values inside `_cssText` and SVG attributes. That
+// was the root cause of the 2026-07 "ultra-wide replay" bugs (stages
+// rendered thousands of pixels wide, frozen/teleporting cursors, giant
+// icons) even though every stored recording was always geometrically sane —
+// the corruption happened at *view* time, not at capture/storage time. Small
+// list/summary/manifest responses stay eligible so rendered visitor identities
+// are still anonymized. NEVER remove the raw payload skips or broaden them to
+// metadata endpoints that the UI renders directly.
+const RAW_REPLAY_PAYLOAD_RE =
+  /\/api\/session-replay\/recordings\/[^/?#]+\/(?:chunks(?:\/[^/?#]+)?|events)(?:[/?#]|$)/;
+const RAW_AGENT_REPLAY_EVENTS_RE =
+  /\/api\/session-replay\/agent-events\.json(?:[?#]|$)/;
+
+export function shouldSkipDemoResponseRedaction(url: string): boolean {
+  return (
+    SKIP_SUBSTRINGS.some((substring) => url.includes(substring)) ||
+    RAW_REPLAY_PAYLOAD_RE.test(url) ||
+    RAW_AGENT_REPLAY_EVENTS_RE.test(url)
+  );
+}
+
 let installed = false;
 let demoEnabled = false;
 let originalFetch: typeof fetch | null = null;
@@ -148,7 +174,7 @@ export function ensureDemoModeFetchInterceptor(): void {
 
     try {
       const url = urlOf(input);
-      if (SKIP_SUBSTRINGS.some((s) => url.includes(s))) return res;
+      if (shouldSkipDemoResponseRedaction(url)) return res;
 
       // Only buffered, finite JSON. SSE / streaming / chunked-forever bodies
       // never reach `redactDemoData`: streaming content-types are excluded,
@@ -167,7 +193,13 @@ export function ensureDemoModeFetchInterceptor(): void {
       if (res.bodyUsed) return res;
 
       const data = await withTimeout(res.clone().json(), 3_000);
-      const redacted = redactDemoData(data);
+      // Frontend reads only need identity privacy. Dashboard charts apply
+      // their purpose-built demo trend transform at render time, so mutating
+      // every numeric field in every JSON response is unnecessary work.
+      const redacted = redactDemoData(data, {
+        redactNumbers: false,
+        redactProtectedEmails: true,
+      });
 
       const headers = new Headers(res.headers);
       // Body is re-serialized — these would be wrong now.

package/corpus/core/src/demo/redact.ts

@@ -1,19 +1,25 @@
 /**
  * Pure, dependency-free, deterministic demo-mode redactor.
  *
- * Replaces sensitive values (emails and free numbers) with stable fake
- * substitutes so a demo looks coherent — the same input always maps to the
- * same fake. Crucially, it NEVER rewrites identifiers, structural tokens, or
- * timestamps. Names and other free text are deliberately left alone because
- * guessing whether arbitrary text is a person's name is too inaccurate. The
- * string redactor uses a protect-first strategy (mask IDs with opaque
- * placeholders before any transform runs, restore them byte-identical
+ * Replaces every email with one canonical anonymous address and free numbers
+ * with stable fake substitutes. Crucially, it NEVER rewrites identifiers,
+ * structural tokens, or timestamps. Names and other free text are deliberately
+ * left alone because guessing whether arbitrary text is a person's name is too
+ * inaccurate. The string redactor uses a protect-first strategy (mask IDs with
+ * opaque placeholders before any transform runs, restore them byte-identical
  * afterwards), and the structure-aware walker additionally protects leaf
  * values by key name.
  */
 
 export interface RedactOptions {
   salt?: string;
+  /** Redact numeric values. Defaults to true for backward compatibility. */
+  redactNumbers?: boolean;
+  /**
+   * Redact emails stored in otherwise protected structural fields such as
+   * `userId` and `userKey`. Intended for display-only frontend responses.
+   */
+  redactProtectedEmails?: boolean;
 }
 
 /* ------------------------------------------------------------------ *
@@ -51,10 +57,6 @@ function seededRng(value: string, salt: string): () => number {
   return mulberry32(seedFn());
 }
 
-function pick<T>(rng: () => number, pool: readonly T[]): T {
-  return pool[Math.floor(rng() * pool.length) % pool.length];
-}
-
 /* ------------------------------------------------------------------ *
  * Stable mapping cache (bounded, TTL, leak-free)
  *
@@ -150,150 +152,19 @@ function memoFake(
   return value;
 }
 
-/* ------------------------------------------------------------------ *
- * Curated name pools
- * ------------------------------------------------------------------ */
-
-const FIRST_NAMES: readonly string[] = [
-  "Jane",
-  "John",
-  "Alex",
-  "Maria",
-  "Sam",
-  "Olivia",
-  "Liam",
-  "Emma",
-  "Noah",
-  "Ava",
-  "Lucas",
-  "Mia",
-  "Ethan",
-  "Sofia",
-  "Mason",
-  "Isla",
-  "Leo",
-  "Aria",
-  "Henry",
-  "Zoe",
-  "Owen",
-  "Nora",
-  "Caleb",
-  "Lily",
-  "Ryan",
-  "Ruby",
-  "Adam",
-  "Chloe",
-  "Eli",
-  "Hazel",
-  "Max",
-  "Iris",
-  "Ben",
-  "Clara",
-  "Theo",
-  "Maya",
-  "Felix",
-  "Elena",
-  "Jonah",
-  "Greta",
-];
-
-const LAST_NAMES: readonly string[] = [
-  "Doe",
-  "Smith",
-  "Johnson",
-  "Lee",
-  "Brown",
-  "Garcia",
-  "Miller",
-  "Davis",
-  "Wilson",
-  "Moore",
-  "Taylor",
-  "Anderson",
-  "Thomas",
-  "Jackson",
-  "White",
-  "Harris",
-  "Martin",
-  "Clark",
-  "Lewis",
-  "Walker",
-  "Hall",
-  "Young",
-  "King",
-  "Wright",
-  "Hill",
-  "Green",
-  "Adams",
-  "Baker",
-  "Nelson",
-  "Carter",
-  "Mitchell",
-  "Perez",
-  "Roberts",
-  "Turner",
-  "Phillips",
-  "Campbell",
-  "Parker",
-  "Evans",
-  "Edwards",
-  "Collins",
-];
-
 /* ------------------------------------------------------------------ *
  * Fake value generators (deterministic in value + salt)
  * ------------------------------------------------------------------ */
 
-// Realistic-looking but safe stand-in domains: real consumer providers (the
-// local part is fake, so no real mailbox is implied) plus the canonical
-// reserved fictional-company domains (Contoso/Fabrikam/Northwind), which read
-// as real businesses but are intentional placeholders. No example.com.
-const FAKE_EMAIL_DOMAINS: readonly string[] = [
-  "gmail.com",
-  "outlook.com",
-  "icloud.com",
-  "yahoo.com",
-  "proton.me",
-  "hey.com",
-  "fastmail.com",
-  "contoso.com",
-  "fabrikam.com",
-  "northwind.com",
-  "acme.io",
-  "globex.net",
-];
+export const DEMO_ANONYMOUS_EMAIL = "anonymous@builder.io";
 
 function fakeEmail(original: string, salt: string): string {
-  return memoFake("email", original.toLowerCase(), salt, () => {
-    const rng = seededRng(`email:${original.toLowerCase()}`, salt);
-    const first = pick(rng, FIRST_NAMES).toLowerCase();
-    const last = pick(rng, LAST_NAMES).toLowerCase();
-    const domain = pick(rng, FAKE_EMAIL_DOMAINS);
-    // Vary the local part so addresses don't all look templated.
-    const shape = Math.floor(rng() * 6);
-    let local: string;
-    switch (shape) {
-      case 0:
-        local = `${first}.${last}`;
-        break;
-      case 1:
-        local = `${first}${last}`;
-        break;
-      case 2:
-        local = `${first[0]}${last}`;
-        break;
-      case 3:
-        local = `${first}.${last}${1 + Math.floor(rng() * 89)}`;
-        break;
-      case 4:
-        local = `${first}_${last}`;
-        break;
-      default:
-        local = `${last}.${first}`;
-        break;
-    }
-    return `${local}@${domain}`;
-  });
+  return memoFake(
+    "email",
+    original.toLowerCase(),
+    salt,
+    () => DEMO_ANONYMOUS_EMAIL,
+  );
 }
 
 /**
@@ -532,18 +403,29 @@ function transformNumbers(text: string, salt: string): string {
  * Public: string redactor
  * ------------------------------------------------------------------ */
 
-function redactDemoStringInternal(text: string, salt: string): string {
+function redactDemoStringInternal(
+  text: string,
+  salt: string,
+  redactNumbers: boolean,
+): string {
   if (typeof text !== "string" || text.length === 0) return text;
+  if (!text.includes("@") && (!redactNumbers || !/[\d$€£¥]/.test(text))) {
+    return text;
+  }
 
   const { text: masked, restore } = protect(text);
   let out = masked;
   out = transformEmails(out, salt);
-  out = transformNumbers(out, salt);
+  if (redactNumbers) out = transformNumbers(out, salt);
   return unprotect(out, restore);
 }
 
 export function redactDemoString(text: string, opts?: RedactOptions): string {
-  return redactDemoStringInternal(text, opts?.salt ?? "");
+  return redactDemoStringInternal(
+    text,
+    opts?.salt ?? "",
+    opts?.redactNumbers !== false,
+  );
 }
 
 /* ------------------------------------------------------------------ *
@@ -586,6 +468,8 @@ function walk(
   salt: string,
   depth: number,
   seen: WeakSet<object>,
+  redactNumbers: boolean,
+  redactProtectedEmails: boolean,
 ): unknown {
   if (depth > MAX_DEPTH) return value;
 
@@ -594,11 +478,11 @@ function walk(
   const t = typeof value;
 
   if (t === "string") {
-    return redactDemoStringInternal(value as string, salt);
+    return redactDemoStringInternal(value as string, salt, redactNumbers);
   }
 
   if (t === "number") {
-    return redactNumberLeaf(value as number, salt);
+    return redactNumbers ? redactNumberLeaf(value as number, salt) : value;
   }
 
   if (t === "boolean" || t === "bigint" || t === "function" || t === "symbol") {
@@ -610,7 +494,9 @@ function walk(
   if (Array.isArray(value)) {
     if (seen.has(value)) return value;
     seen.add(value);
-    const out = value.map((item) => walk(item, salt, depth + 1, seen));
+    const out = value.map((item) =>
+      walk(item, salt, depth + 1, seen, redactNumbers, redactProtectedEmails),
+    );
     seen.delete(value);
     return out;
   }
@@ -629,14 +515,34 @@ function walk(
         ) {
           // Still recurse into nested structures, but the protected key does
           // not transform its own leaf value.
-          out[key] = walk(entry, salt, depth + 1, seen);
+          out[key] = walk(
+            entry,
+            salt,
+            depth + 1,
+            seen,
+            redactNumbers,
+            redactProtectedEmails,
+          );
+        } else if (
+          redactProtectedEmails &&
+          typeof entry === "string" &&
+          entry.includes("@")
+        ) {
+          out[key] = redactDemoStringInternal(entry, salt, false);
         } else {
           // Leaf under a protected key: pass through completely untouched.
           out[key] = entry;
         }
         continue;
       }
-      out[key] = walk(entry, salt, depth + 1, seen);
+      out[key] = walk(
+        entry,
+        salt,
+        depth + 1,
+        seen,
+        redactNumbers,
+        redactProtectedEmails,
+      );
     }
     seen.delete(value);
     return out;
@@ -648,7 +554,14 @@ function walk(
 
 export function redactDemoData<T>(value: T, opts?: RedactOptions): T {
   const salt = opts?.salt ?? "";
-  return walk(value, salt, 0, new WeakSet<object>()) as T;
+  return walk(
+    value,
+    salt,
+    0,
+    new WeakSet<object>(),
+    opts?.redactNumbers !== false,
+    opts?.redactProtectedEmails === true,
+  ) as T;
 }
 
 /**

package/corpus/core/src/extensions/html-shell.ts

@@ -1,3 +1,5 @@
+import { buildSessionReplayIframeBootstrap } from "./session-replay-iframe.js";
+
 const EXTENSION_IFRAME_CSP_BASE =
   "default-src 'none'; script-src 'self' https://cdn.jsdelivr.net 'unsafe-eval' 'unsafe-inline'; style-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net https://fonts.googleapis.com; font-src https://fonts.gstatic.com; connect-src 'self'; img-src 'self' data: blob:; media-src 'self' data: blob:; frame-src 'none'; object-src 'none'; base-uri 'none'; form-action 'none';";
 
@@ -744,6 +746,7 @@ export function buildExtensionHtml(
 	      }
 	    });
 	  </script>
+	${buildSessionReplayIframeBootstrap()}
 	</head>
 	<body${extensionId ? ` data-extension-id="${extensionIdAttr}" data-tool-id="${extensionIdAttr}"` : ""} class="text-foreground">
 	${content}

package/corpus/core/src/extensions/session-replay-iframe.ts

@@ -0,0 +1,131 @@
+import {
+  isTrustedSessionReplayIframeParentOrigin,
+  SESSION_REPLAY_IFRAME_PROBE,
+  SESSION_REPLAY_IFRAME_START,
+  SESSION_REPLAY_IFRAME_STOP,
+} from "../session-replay-iframe-protocol.js";
+
+export const RRWEB_RECORD_IFRAME_CDN_URL =
+  "https://cdn.jsdelivr.net/npm/@rrweb/record@2.1.0/umd/record.min.js";
+export const RRWEB_RECORD_IFRAME_SRI =
+  "sha384-MrD66HBNSykaP2N95+6hQCFlF5oH2tvL3TD/zyvHNkP/sAFWZx98DX9MEDy8MdVT";
+
+/**
+ * Installs the cooperative side of rrweb's cross-origin iframe protocol.
+ * Nothing is fetched or recorded until a trusted first-party parent asks the
+ * frame to start. rrweb then forwards its events directly to that parent.
+ */
+export function buildSessionReplayIframeBootstrap(): string {
+  const probeType = JSON.stringify(SESSION_REPLAY_IFRAME_PROBE);
+  const startType = JSON.stringify(SESSION_REPLAY_IFRAME_START);
+  const stopType = JSON.stringify(SESSION_REPLAY_IFRAME_STOP);
+  const scriptUrl = JSON.stringify(RRWEB_RECORD_IFRAME_CDN_URL);
+  const integrity = JSON.stringify(RRWEB_RECORD_IFRAME_SRI);
+
+  return `<script>
+    (function() {
+      var recorderStop = null;
+      var recorderLoad = null;
+      var startGeneration = 0;
+      var isTrustedParentOrigin = ${isTrustedSessionReplayIframeParentOrigin.toString()};
+
+      function stopRecorder() {
+        startGeneration += 1;
+        if (typeof recorderStop === 'function') {
+          try { recorderStop(); } catch (_) {}
+        }
+        recorderStop = null;
+      }
+
+      function getRecord() {
+        return window.rrwebRecord && typeof window.rrwebRecord.record === 'function'
+          ? window.rrwebRecord.record
+          : null;
+      }
+
+      function loadRecorder() {
+        if (recorderLoad) return recorderLoad;
+        recorderLoad = new Promise(function(resolve, reject) {
+          var script = document.createElement('script');
+          script.src = ${scriptUrl};
+          script.integrity = ${integrity};
+          script.crossOrigin = 'anonymous';
+          script.referrerPolicy = 'no-referrer';
+          script.async = true;
+          script.onload = function() {
+            var record = getRecord();
+            if (record) resolve(record);
+            else reject(new Error('rrweb recorder did not initialize'));
+          };
+          script.onerror = function() {
+            recorderLoad = null;
+            reject(new Error('rrweb recorder failed to load'));
+          };
+          document.head.appendChild(script);
+        });
+        return recorderLoad;
+      }
+
+      function validOptions(options) {
+        return !!options &&
+          typeof options === 'object' &&
+          typeof options.blockSelector === 'string' &&
+          typeof options.ignoreSelector === 'string' &&
+          typeof options.maskTextSelector === 'string' &&
+          typeof options.maskAllInputs === 'boolean' &&
+          typeof options.recordCanvas === 'boolean' &&
+          typeof options.collectFonts === 'boolean' &&
+          typeof options.inlineImages === 'boolean' &&
+          !!options.sampling && typeof options.sampling === 'object';
+      }
+
+      function startRecorder(options) {
+        if (!validOptions(options)) return;
+        stopRecorder();
+        var generation = startGeneration;
+        loadRecorder().then(function(record) {
+          if (generation !== startGeneration) return;
+          recorderStop = record({
+            blockSelector: options.blockSelector,
+            ignoreSelector: options.ignoreSelector,
+            maskTextClass: options.maskTextClass,
+            maskTextSelector: options.maskTextSelector,
+            maskAllInputs: options.maskAllInputs,
+            maskInputOptions: options.maskInputOptions,
+            recordCanvas: options.recordCanvas,
+            collectFonts: options.collectFonts,
+            inlineImages: options.inlineImages,
+            sampling: options.sampling,
+            recordCrossOriginIframes: true
+          }) || null;
+        }).catch(function() {});
+      }
+
+      window.addEventListener('message', function(event) {
+        if (event.source !== window.parent || !isTrustedParentOrigin(event.origin, window.location.href)) return;
+        var message = event.data;
+        if (!message || typeof message !== 'object') return;
+        if (message.type === ${startType}) startRecorder(message.options);
+        else if (message.type === ${stopType}) stopRecorder();
+      });
+      window.addEventListener('pagehide', stopRecorder);
+
+      if (window.parent !== window) {
+        window.parent.postMessage({ type: ${probeType} }, '*');
+      }
+    })();
+  </script>`;
+}
+
+export function injectSessionReplayIframeBootstrap(html: string): string {
+  const bootstrap = buildSessionReplayIframeBootstrap();
+  const headClose = html.search(/<\/head\s*>/i);
+  if (headClose >= 0) {
+    return `${html.slice(0, headClose)}${bootstrap}${html.slice(headClose)}`;
+  }
+  const bodyOpen = html.search(/<body(?:\s[^>]*)?>/i);
+  if (bodyOpen >= 0) {
+    return `${html.slice(0, bodyOpen)}${bootstrap}${html.slice(bodyOpen)}`;
+  }
+  return `${bootstrap}${html}`;
+}