@reproapp/react-sdk 0.0.2 → 0.0.3

package/dist/index.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
-import { record } from "rrweb";
+import { useEffect, useRef, useState } from 'react';
+import { EventType, record } from 'rrweb';
 import { gzip } from 'pako';
 // config
 const MAX_BYTES = 900 * 1024; // 900 KB target per POST (tune)
@@ -34,6 +34,7 @@ function splitEventsBySize(events, mkEnvelope) {
 // ---- small helpers ----
 const now = () => Date.now();
 const newAID = () => `A_${now()}_${Math.random().toString(36).slice(2, 6)}`;
+const newSID = () => `S_${now()}_${Math.random().toString(36).slice(2, 10)}`;
 // server time normalization
 const offsetRef = { current: 0 }; // ms to add to client time
 const nowServer = () => now() + (offsetRef.current || 0);
@@ -43,11 +44,63 @@ async function getJSON(url, headers) {
         throw new Error(`${r.status}`);
     return (await r.json());
 }
-const INTERNAL_HEADER = "X-Repro-Internal";
-const REQUEST_START_HEADER = "X-Bug-Request-Start";
-const NGROK_SKIP_HEADER = "ngrok-skip-browser-warning";
-const NGROK_SKIP_VALUE = "true";
-const API_BASE = "https://repro-api-d7288.ondigitalocean.app/api";
+const INTERNAL_HEADER = 'X-Repro-Internal';
+const REQUEST_START_HEADER = 'X-Bug-Request-Start';
+const REPRO_QUERY_SESSION_PARAM = '__repro_sid';
+const REPRO_QUERY_ACTION_PARAM = '__repro_aid';
+const REPRO_QUERY_START_PARAM = '__repro_start';
+const NGROK_SKIP_HEADER = 'ngrok-skip-browser-warning';
+const NGROK_SKIP_VALUE = 'true';
+const API_BASE = 'https://repro-api-d7288.ondigitalocean.app/api';
+const INGEST_BASE = 'https://log-collector-5rj86.ondigitalocean.app';
+const INGEST_PATH = '/v1/ingest/events';
+const readSdkEnv = (key) => {
+    if (typeof globalThis === 'undefined') {
+        return undefined;
+    }
+    const globals = globalThis;
+    const sdkEnv = globals.__REPRO_SDK_ENV__;
+    if (sdkEnv && typeof sdkEnv === 'object' && typeof sdkEnv[key] === 'string') {
+        return sdkEnv[key];
+    }
+    const processEnv = globals.process?.env;
+    if (processEnv && typeof processEnv === 'object' && typeof processEnv[key] === 'string') {
+        return processEnv[key];
+    }
+    return undefined;
+};
+const readPositiveEnvNumber = (key, fallback) => {
+    const raw = readSdkEnv(key);
+    const parsed = Number(raw ?? fallback);
+    return Number.isFinite(parsed) && parsed > 0 ? parsed : fallback;
+};
+const LIVE_PARENT_MAX_MS = readPositiveEnvNumber('REPRO_LIVE_PARENT_MAX_MS', 2 * 60 * 1000);
+const LIVE_REQUEST_PREROLL_MS = readPositiveEnvNumber('REPRO_LIVE_REQUEST_PREROLL_MS', 2000);
+const LIVE_REQUEST_POSTROLL_MS = readPositiveEnvNumber('REPRO_LIVE_REQUEST_POSTROLL_MS', 2000);
+const LIVE_SEGMENT_IDLE_MS = readPositiveEnvNumber('REPRO_LIVE_SEGMENT_IDLE_MS', 2000);
+const LIVE_RECENT_BUFFER_MAX_EVENTS = readPositiveEnvNumber('REPRO_LIVE_RECENT_BUFFER_MAX_EVENTS', 400);
+const LIVE_RRWEB_CHECKOUT_MS = readPositiveEnvNumber('REPRO_LIVE_RRWEB_CHECKOUT_MS', 2000);
+const SDK_QUEUE_IDLE_DELAY_MS = readPositiveEnvNumber('REPRO_SDK_QUEUE_IDLE_DELAY_MS', 25);
+function normalizeActorLabels(labels) {
+    if (!labels) {
+        return undefined;
+    }
+    const out = {};
+    for (const [key, value] of Object.entries(labels)) {
+        if (!key || typeof value !== 'string') {
+            continue;
+        }
+        out[key] = value;
+    }
+    return Object.keys(out).length ? out : undefined;
+}
+function normalizeIngestMode(mode) {
+    if (mode === 'api')
+        return 'live';
+    if (mode === 'log-collector')
+        return 'staging';
+    return mode ?? 'live';
+}
 let __reproCtx = null;
 /** Manually attach Repro to any Axios instance (no recursion). */
 export function attachAxios(axiosInstance) {
@@ -58,90 +111,209 @@ export function attachAxios(axiosInstance) {
         const ctx = __reproCtx;
         if (!ctx)
             return config;
-        const sid = ctx.getSid();
-        const aid = ctx.getAid();
-        const url = `${config.baseURL || ""}${config.url || ""}`;
+        const url = `${config.baseURL || ''}${config.url || ''}`;
         const isInternal = url.startsWith(ctx.base);
         const isSdkInternal = !!config.headers?.[INTERNAL_HEADER];
+        const isClientRequest = !isInternal && !isSdkInternal;
         if (!config.headers)
             config.headers = {};
+        const existingHeaders = new Headers(config.headers);
         const setHeader = (key, value) => {
             if (!config.headers)
                 return;
-            if (typeof config.headers.set === "function") {
+            if (typeof config.headers.set === 'function') {
                 config.headers.set(key, value);
             }
             else {
                 config.headers[key] = value;
             }
         };
-        if (!isSdkInternal) {
-            const requestStart = nowServer();
+        let requestStart = nowServer();
+        let sid = ctx.getSid();
+        let aid = ctx.getAid();
+        let label = null;
+        if (ctx.resolveRequestContext) {
+            const resolved = ctx.resolveRequestContext({
+                url,
+                isInternal,
+                isSdkInternal,
+                method: config.method,
+            });
+            requestStart = resolved.requestStart;
+            sid = resolved.sessionId;
+            aid = resolved.actionId;
+            label = resolved.label ?? null;
+        }
+        const useQueryPropagation = sid && aid
+            ? shouldUseQueryPropagation({
+                url,
+                method: config.method,
+                headers: existingHeaders,
+                isInternal,
+                isSdkInternal,
+            })
+            : false;
+        if (sid && aid && !isSdkInternal && !useQueryPropagation) {
             setHeader(REQUEST_START_HEADER, String(requestStart));
         }
         const sdkToken = ctx.getToken();
         const userToken = ctx.getUserToken();
         if (isInternal) {
             setHeader(NGROK_SKIP_HEADER, NGROK_SKIP_VALUE);
-            if (sdkToken && !config.headers["x-sdk-token"]) {
-                setHeader("x-sdk-token", sdkToken);
+            if (sdkToken && !config.headers['x-sdk-token']) {
+                setHeader('x-sdk-token', sdkToken);
             }
-            const existingAuth = config.headers?.Authorization ??
-                config.headers?.authorization;
+            const existingAuth = config.headers?.Authorization ?? config.headers?.authorization;
             if (userToken && !existingAuth) {
-                setHeader("Authorization", `Bearer ${userToken}`);
+                setHeader('Authorization', `Bearer ${userToken}`);
             }
         }
-        if (sid && aid && !isInternal && !isSdkInternal) {
-            setHeader("X-Bug-Session-Id", sid);
-            setHeader("X-Bug-Action-Id", aid);
+        if (sid && aid && !isInternal && !isSdkInternal && useQueryPropagation) {
+            config.url = appendReproQuery(url, { sessionId: sid, actionId: aid, requestStart });
+            if (config.baseURL) {
+                config.baseURL = undefined;
+            }
+        }
+        else if (sid && aid && !isInternal && !isSdkInternal) {
+            setHeader('X-Bug-Session-Id', sid);
+            setHeader('X-Bug-Action-Id', aid);
+        }
+        config.__reproSessionId = sid ?? null;
+        config.__reproActionId = aid ?? null;
+        config.__reproActionLabel = label;
+        if (isClientRequest) {
+            ctx.beginClientRequest?.();
+            config.__reproClientRequest = true;
         }
         return config;
     });
-    axiosInstance.interceptors.response.use(async (resp) => {
+    axiosInstance.interceptors.response.use((resp) => {
         const ctx = __reproCtx;
         if (!ctx)
             return resp;
-        const url = `${resp.config.baseURL || ""}${resp.config.url || ""}`;
+        const url = `${resp.config.baseURL || ''}${resp.config.url || ''}`;
         const isInternal = url.startsWith(ctx.base);
         const isSdkInternal = !!resp.config.headers?.[INTERNAL_HEADER];
         if (isInternal && resp.status === 401) {
             ctx.onUnauthorized?.();
         }
-        const sid = ctx.getSid();
-        const aid = ctx.getAid();
-        if (!isInternal && !isSdkInternal && sid && aid && !ctx.hasReqMarked.has(aid)) {
-            ctx.hasReqMarked.add(aid);
+        const sid = resp?.config?.__reproSessionId ?? ctx.getSid();
+        const aid = resp?.config?.__reproActionId ?? ctx.getAid();
+        const label = resp?.config?.__reproActionLabel ?? null;
+        const hasReqKey = sid && aid ? `${sid}:${aid}` : null;
+        if (!isInternal && !isSdkInternal && sid && aid && hasReqKey && !ctx.hasReqMarked.has(hasReqKey)) {
+            if (ctx.notifyRequestCompleted) {
+                ctx.notifyRequestCompleted({
+                    sessionId: sid,
+                    actionId: aid,
+                    label,
+                    finishedAt: nowServer(),
+                });
+            }
+        }
+        if (resp?.config?.__reproClientRequest) {
+            ctx.endClientRequest?.();
         }
         return resp;
     }, (err) => {
         const ctx = __reproCtx;
         if (ctx) {
             const status = err?.response?.status;
-            const url = `${err?.config?.baseURL || ""}${err?.config?.url || ""}`;
+            const url = `${err?.config?.baseURL || ''}${err?.config?.url || ''}`;
             if (status === 401 && url.startsWith(ctx.base)) {
                 ctx.onUnauthorized?.();
             }
+            const requestConfig = err?.config ?? err?.response?.config;
+            if (requestConfig?.__reproClientRequest) {
+                ctx.endClientRequest?.();
+            }
         }
         return Promise.reject(err);
     });
 }
-export function ReproProvider({ appId, children, button, masking, apiBase }) {
+const isCrossOriginUrl = (url) => {
+    if (typeof window === 'undefined') {
+        return false;
+    }
+    try {
+        return new URL(url, window.location.href).origin !== window.location.origin;
+    }
+    catch {
+        return false;
+    }
+};
+const isCorsSafelistedContentType = (value) => {
+    const contentType = value.split(';', 1)[0]?.trim().toLowerCase();
+    return (contentType === 'application/x-www-form-urlencoded' ||
+        contentType === 'multipart/form-data' ||
+        contentType === 'text/plain');
+};
+const hasNonSafelistedCorsHeaders = (headers) => {
+    let hasNonSafelisted = false;
+    headers.forEach((rawValue, rawName) => {
+        const name = rawName.toLowerCase();
+        if (name === 'accept' || name === 'accept-language' || name === 'content-language') {
+            return;
+        }
+        if (name === 'content-type' && isCorsSafelistedContentType(rawValue)) {
+            return;
+        }
+        hasNonSafelisted = true;
+    });
+    return hasNonSafelisted;
+};
+const shouldUseQueryPropagation = (params) => {
+    if (params.isInternal || params.isSdkInternal || !isCrossOriginUrl(params.url)) {
+        return false;
+    }
+    const method = String(params.method || 'GET').toUpperCase();
+    if (method !== 'GET' && method !== 'HEAD' && method !== 'POST') {
+        return false;
+    }
+    return !hasNonSafelistedCorsHeaders(params.headers);
+};
+const appendReproQuery = (url, params) => {
+    const parsed = new URL(url, typeof window !== 'undefined' ? window.location.href : 'http://localhost');
+    parsed.searchParams.set(REPRO_QUERY_SESSION_PARAM, params.sessionId);
+    parsed.searchParams.set(REPRO_QUERY_ACTION_PARAM, params.actionId);
+    parsed.searchParams.set(REPRO_QUERY_START_PARAM, String(params.requestStart));
+    return parsed.toString();
+};
+export function ReproProvider({ appId, tenantId, children, button, masking, apiBase, logCollectorUrl, logCollectorUri, ingest, }) {
     const base = apiBase?.trim() ? apiBase.trim() : API_BASE;
+    const ingestMode = normalizeIngestMode(ingest?.mode);
+    const isLiveMode = ingestMode === 'live';
+    const isStagingMode = ingestMode === 'staging';
+    const useIngestPipeline = ingestMode === 'staging' || ingestMode === 'live';
+    const envIngestBase = readSdkEnv('REPRO_LOG_COLLECTOR_URL') ||
+        readSdkEnv('REPRO_LOG_COLLECTOR_URI') ||
+        readSdkEnv('REPRO_INGEST_BASE');
+    const ingestBase = String(envIngestBase ||
+        logCollectorUrl ||
+        logCollectorUri ||
+        ingest?.logCollectorUrl ||
+        ingest?.logCollectorUri ||
+        ingest?.baseUrl ||
+        INGEST_BASE).replace(/\/+$/, '');
+    const ingestPath = ingest?.path || INGEST_PATH;
+    const normalizedIngestPath = ingestPath.startsWith('/') ? ingestPath : `/${ingestPath}`;
+    const ingestUrl = `${ingestBase}${normalizedIngestPath}`;
+    const resolvedTenantId = (tenantId && tenantId.trim().length ? tenantId : appId).trim();
+    const actorLabels = normalizeActorLabels(ingest?.actorLabels);
     const storageKey = `repro-auth-${appId}`;
     const initialAuth = (() => {
-        if (typeof window === "undefined")
+        if (typeof window === 'undefined')
             return null;
         try {
             const raw = window.localStorage.getItem(storageKey);
             if (!raw)
                 return null;
             const parsed = JSON.parse(raw);
-            if (!parsed || typeof parsed !== "object")
+            if (!parsed || typeof parsed !== 'object')
                 return null;
-            const email = typeof parsed.email === "string" ? parsed.email : null;
-            const password = typeof parsed.password === "string" ? parsed.password : null;
-            const token = typeof parsed.token === "string" && parsed.token.trim().length
+            const email = typeof parsed.email === 'string' ? parsed.email : null;
+            const password = typeof parsed.password === 'string' ? parsed.password : null;
+            const token = typeof parsed.token === 'string' && parsed.token.trim().length
                 ? parsed.token.trim()
                 : null;
             if (!email || !token)
@@ -161,6 +333,14 @@ export function ReproProvider({ appId, children, button, masking, apiBase }) {
     // ---- refs & state (hooks MUST be inside component) ----
     const sdkTokenRef = useRef(null);
     const sessionIdRef = useRef(null);
+    const parentSessionRef = useRef(null);
+    const activeChildSessionRef = useRef(null);
+    const previousChildSessionIdRef = useRef(null);
+    const liveParentRotationPendingRef = useRef(false);
+    const liveChildCloseTimerRef = useRef(null);
+    const liveRecentEventsRef = useRef([]);
+    const liveLatestMetaEventRef = useRef(null);
+    const liveSinceFullSnapshotRef = useRef([]);
     const stopRecRef = useRef();
     const rrwebEventsRef = useRef([]);
     const currentAidRef = useRef(null);
@@ -174,6 +354,11 @@ export function ReproProvider({ appId, children, button, masking, apiBase }) {
     const isFlushingRef = useRef(false);
     const backoffRef = useRef(0); // ms
     const isStoppingRef = useRef(false);
+    const sdkQueueRef = useRef([]);
+    const sdkQueueTimerRef = useRef(null);
+    const sdkQueueDrainingRef = useRef(false);
+    const sdkQueueBackoffRef = useRef(0);
+    const clientRequestsInFlightRef = useRef(0);
     // NEW: track installed click handler + dedupe recent clicks
     const clickHandlerRef = useRef(null);
     const lastClickRef = useRef(null);
@@ -184,13 +369,13 @@ export function ReproProvider({ appId, children, button, masking, apiBase }) {
     const userPasswordRef = useRef(initialAuth?.password ?? null);
     const userTokenRef = useRef(initialAuth?.token ?? null);
     const [showLogin, setShowLogin] = useState(false);
-    const [loginEmail, setLoginEmail] = useState(initialAuth?.email ?? "");
-    const [loginPassword, setLoginPassword] = useState(initialAuth?.password ?? "");
+    const [loginEmail, setLoginEmail] = useState(initialAuth?.email ?? '');
+    const [loginPassword, setLoginPassword] = useState(initialAuth?.password ?? '');
     const [loginError, setLoginError] = useState(null);
     const [isLoggingIn, setIsLoggingIn] = useState(false);
     const disableLogin = isLoggingIn || !loginEmail.trim() || !loginPassword.trim();
     const [shareUrl, setShareUrl] = useState(null);
-    const [copyStatus, setCopyStatus] = useState("idle");
+    const [copyStatus, setCopyStatus] = useState('idle');
     const copyStatusTimerRef = useRef(null);
     const logoutInFlightRef = useRef(false);
     const authCheckInFlightRef = useRef(false);
@@ -201,7 +386,7 @@ export function ReproProvider({ appId, children, button, masking, apiBase }) {
     const clearCopyStatusTimer = () => {
         if (copyStatusTimerRef.current == null)
             return;
-        if (typeof window !== "undefined") {
+        if (typeof window !== 'undefined') {
             window.clearTimeout(copyStatusTimerRef.current);
         }
         else {
@@ -211,7 +396,7 @@ export function ReproProvider({ appId, children, button, masking, apiBase }) {
     };
     const resetCopyFeedback = () => {
         clearCopyStatusTimer();
-        setCopyStatus("idle");
+        setCopyStatus('idle');
     };
     const clearShareInfo = () => {
         setShareUrl(null);
@@ -220,11 +405,11 @@ export function ReproProvider({ appId, children, button, masking, apiBase }) {
     const setCopyStatusWithTimeout = (status) => {
         clearCopyStatusTimer();
         setCopyStatus(status);
-        if (status === "idle")
+        if (status === 'idle')
             return;
-        if (typeof window !== "undefined") {
+        if (typeof window !== 'undefined') {
             copyStatusTimerRef.current = window.setTimeout(() => {
-                setCopyStatus("idle");
+                setCopyStatus('idle');
                 copyStatusTimerRef.current = null;
             }, 2200);
         }
@@ -232,7 +417,7 @@ export function ReproProvider({ appId, children, button, masking, apiBase }) {
     const clearSessionExpiryTimer = () => {
         if (sessionExpiryTimerRef.current == null)
             return;
-        if (typeof window !== "undefined") {
+        if (typeof window !== 'undefined') {
             window.clearTimeout(sessionExpiryTimerRef.current);
         }
         else {
@@ -240,6 +425,17 @@ export function ReproProvider({ appId, children, button, masking, apiBase }) {
         }
         sessionExpiryTimerRef.current = null;
     };
+    const clearLiveChildCloseTimer = () => {
+        if (liveChildCloseTimerRef.current == null)
+            return;
+        if (typeof window !== 'undefined') {
+            window.clearTimeout(liveChildCloseTimerRef.current);
+        }
+        else {
+            clearTimeout(liveChildCloseTimerRef.current);
+        }
+        liveChildCloseTimerRef.current = null;
+    };
     const addTenantHeader = (headers) => ({
         ...headers,
         [NGROK_SKIP_HEADER]: NGROK_SKIP_VALUE,
@@ -249,6 +445,512 @@ export function ReproProvider({ appId, children, button, masking, apiBase }) {
             headers.set(NGROK_SKIP_HEADER, NGROK_SKIP_VALUE);
         }
     };
+    const createSdkSession = async (payload) => {
+        if (!sdkTokenRef.current) {
+            return null;
+        }
+        const fetcher = origFetchRef.current ?? window.fetch.bind(window);
+        const r = await fetcher(`${base}/v1/sessions`, {
+            method: 'POST',
+            headers: addTenantHeader({
+                'Content-Type': 'application/json',
+                'x-sdk-token': sdkTokenRef.current,
+                ...(userTokenRef.current ? { Authorization: `Bearer ${userTokenRef.current}` } : {}),
+                [INTERNAL_HEADER]: '1',
+            }),
+            body: JSON.stringify(payload),
+        });
+        if (!r.ok) {
+            handleUnauthorizedStatus(r.status);
+            return null;
+        }
+        return (await r.json());
+    };
+    const finishSdkSession = async (sid) => {
+        if (!sdkTokenRef.current) {
+            return null;
+        }
+        const origFetch = origFetchRef.current ?? window.fetch.bind(window);
+        const res = await origFetch(`${base}/v1/sessions/${sid}/finish`, {
+            method: 'POST',
+            headers: addTenantHeader({
+                'Content-Type': 'application/json',
+                'x-sdk-token': sdkTokenRef.current,
+                ...(userTokenRef.current ? { Authorization: `Bearer ${userTokenRef.current}` } : {}),
+                [INTERNAL_HEADER]: '1',
+            }),
+            body: JSON.stringify({ notes: '' }),
+        });
+        if (handleUnauthorizedStatus(res.status)) {
+            return null;
+        }
+        if (!res.ok) {
+            return null;
+        }
+        try {
+            return await res.json();
+        }
+        catch {
+            return null;
+        }
+    };
+    const hasClientRequestsInFlight = () => clientRequestsInFlightRef.current > 0;
+    const scheduleSdkQueueDrain = (delayMs = 0) => {
+        if (sdkQueueTimerRef.current != null || typeof window === 'undefined') {
+            return;
+        }
+        const nextDelay = hasClientRequestsInFlight()
+            ? Math.max(delayMs, SDK_QUEUE_IDLE_DELAY_MS)
+            : delayMs;
+        sdkQueueTimerRef.current = window.setTimeout(() => {
+            sdkQueueTimerRef.current = null;
+            if (hasClientRequestsInFlight()) {
+                scheduleSdkQueueDrain(SDK_QUEUE_IDLE_DELAY_MS);
+                return;
+            }
+            void drainSdkQueue();
+        }, nextDelay);
+    };
+    const beginClientRequest = () => {
+        clientRequestsInFlightRef.current += 1;
+    };
+    const endClientRequest = () => {
+        clientRequestsInFlightRef.current = Math.max(0, clientRequestsInFlightRef.current - 1);
+        if (!hasClientRequestsInFlight() && sdkQueueRef.current.length > 0) {
+            scheduleSdkQueueDrain(SDK_QUEUE_IDLE_DELAY_MS);
+        }
+    };
+    const enqueueSdkTask = (task) => {
+        sdkQueueRef.current.push({ ...task, attempts: 0 });
+        if (sdkQueueRef.current.length > 500) {
+            sdkQueueRef.current.splice(0, sdkQueueRef.current.length - 500);
+        }
+        scheduleSdkQueueDrain(SDK_QUEUE_IDLE_DELAY_MS);
+    };
+    const drainSdkQueue = async (options) => {
+        if (sdkQueueDrainingRef.current) {
+            return;
+        }
+        const force = options?.force === true;
+        if (!force && hasClientRequestsInFlight()) {
+            scheduleSdkQueueDrain(SDK_QUEUE_IDLE_DELAY_MS);
+            return;
+        }
+        sdkQueueDrainingRef.current = true;
+        try {
+            while (sdkQueueRef.current.length > 0) {
+                if (!force && hasClientRequestsInFlight()) {
+                    scheduleSdkQueueDrain(SDK_QUEUE_IDLE_DELAY_MS);
+                    return;
+                }
+                const task = sdkQueueRef.current[0];
+                const ok = await task.run().catch(() => false);
+                if (ok) {
+                    sdkQueueRef.current.shift();
+                    sdkQueueBackoffRef.current = 0;
+                    continue;
+                }
+                task.attempts += 1;
+                if (task.attempts >= task.maxAttempts) {
+                    sdkQueueRef.current.shift();
+                    sdkQueueBackoffRef.current = 0;
+                    continue;
+                }
+                sdkQueueBackoffRef.current = Math.min(4000, sdkQueueBackoffRef.current ? sdkQueueBackoffRef.current * 2 : 250);
+                scheduleSdkQueueDrain(sdkQueueBackoffRef.current);
+                return;
+            }
+        }
+        finally {
+            sdkQueueDrainingRef.current = false;
+            if (sdkQueueRef.current.length > 0 && sdkQueueTimerRef.current == null) {
+                scheduleSdkQueueDrain(sdkQueueBackoffRef.current || 0);
+            }
+        }
+    };
+    const waitForSdkQueueDrain = async () => {
+        while (sdkQueueDrainingRef.current) {
+            await new Promise((resolve) => {
+                if (typeof window === 'undefined') {
+                    setTimeout(resolve, 10);
+                }
+                else {
+                    window.setTimeout(resolve, 10);
+                }
+            });
+        }
+    };
+    const clearSdkQueueTimer = () => {
+        if (sdkQueueTimerRef.current != null && typeof window !== 'undefined') {
+            window.clearTimeout(sdkQueueTimerRef.current);
+            sdkQueueTimerRef.current = null;
+        }
+    };
+    const flushSdkQueue = async () => {
+        clearSdkQueueTimer();
+        await waitForSdkQueueDrain();
+        clearSdkQueueTimer();
+        await drainSdkQueue({ force: true });
+    };
+    const enqueueCanonicalEvents = (events) => {
+        if (!events.length) {
+            return;
+        }
+        enqueueSdkTask({
+            maxAttempts: 5,
+            run: async () => {
+                const result = await postCanonicalEventsNow(events);
+                return result === 'ok' || result === 'too_large';
+            },
+        });
+    };
+    const enqueueCreateSdkSession = (payload, onCreated) => {
+        enqueueSdkTask({
+            maxAttempts: 5,
+            run: async () => {
+                const created = await createSdkSession(payload);
+                if (!created) {
+                    return false;
+                }
+                onCreated?.(created);
+                return true;
+            },
+        });
+    };
+    const enqueueFinishSdkSession = (sid) => {
+        enqueueSdkTask({
+            maxAttempts: 5,
+            run: async () => {
+                await finishSdkSession(sid);
+                return true;
+            },
+        });
+    };
+    const trimLiveRecentEvents = () => {
+        const floor = nowServer() - Math.max(LIVE_REQUEST_PREROLL_MS, LIVE_SEGMENT_IDLE_MS);
+        while (liveRecentEventsRef.current.length > LIVE_RECENT_BUFFER_MAX_EVENTS ||
+            (liveRecentEventsRef.current.length > 0 &&
+                Number(liveRecentEventsRef.current[0]?.timestamp ?? 0) < floor)) {
+            liveRecentEventsRef.current.shift();
+        }
+    };
+    const scheduleLiveParentExpiry = (parent) => {
+        clearSessionExpiryTimer();
+        if (!isLiveMode) {
+            return;
+        }
+        const delay = Math.max(0, parent.expiresAt - nowServer());
+        sessionExpiryTimerRef.current = window.setTimeout(() => {
+            const currentParent = parentSessionRef.current;
+            if (!currentParent || currentParent.sessionId !== parent.sessionId) {
+                return;
+            }
+            if (activeChildSessionRef.current) {
+                liveParentRotationPendingRef.current = true;
+                return;
+            }
+            parentSessionRef.current = null;
+            sessionIdRef.current = null;
+            enqueueFinishSdkSession(parent.sessionId);
+            if (recordingRef.current && sdkTokenRef.current) {
+                ensureLiveParentSession();
+            }
+        }, delay);
+    };
+    const ensureLiveParentSession = () => {
+        if (!sdkTokenRef.current) {
+            return null;
+        }
+        const existing = parentSessionRef.current;
+        const nowTs = nowServer();
+        if (existing && nowTs < existing.expiresAt && !liveParentRotationPendingRef.current) {
+            return existing;
+        }
+        if (existing && activeChildSessionRef.current) {
+            liveParentRotationPendingRef.current = true;
+            return existing;
+        }
+        if (existing) {
+            enqueueFinishSdkSession(existing.sessionId);
+        }
+        const sessionId = newSID();
+        enqueueCreateSdkSession({
+            sessionId,
+            clientTime: nowTs,
+            sessionKind: 'parent',
+        }, (created) => {
+            if (parentSessionRef.current?.sessionId === created.sessionId) {
+                offsetRef.current = Number(created.clockOffsetMs || 0);
+            }
+        });
+        const parent = {
+            sessionId,
+            startedAt: nowTs,
+            expiresAt: nowTs + LIVE_PARENT_MAX_MS,
+        };
+        parentSessionRef.current = parent;
+        sessionIdRef.current = parent.sessionId;
+        liveParentRotationPendingRef.current = false;
+        scheduleLiveParentExpiry(parent);
+        return parent;
+    };
+    const scheduleLiveChildCloseCheck = () => {
+        clearLiveChildCloseTimer();
+        const child = activeChildSessionRef.current;
+        if (!child || child.requestsInFlight > 0) {
+            return;
+        }
+        const delay = Math.max(0, child.closeDeadline - nowServer());
+        if (typeof window !== 'undefined') {
+            liveChildCloseTimerRef.current = window.setTimeout(() => {
+                void finalizeLiveChildSession();
+            }, delay);
+        }
+    };
+    const ensureFrontendActionInSession = (sessionId, action) => {
+        const child = activeChildSessionRef.current;
+        if (child && child.sessionId === sessionId) {
+            const actionKey = `${sessionId}:${action.aid}`;
+            if (!child.postedActionKeys.has(actionKey)) {
+                child.postedActionKeys.add(actionKey);
+                postFrontendActionEvent(sessionId, action);
+                return;
+            }
+            if (action.hasReq || action.hasDb || action.error || typeof action.tEnd === 'number') {
+                postFrontendActionEvent(sessionId, action);
+            }
+            return;
+        }
+        postFrontendActionEvent(sessionId, action);
+    };
+    const sendRrwebEventsToIngest = async (sid, events, seqStart = 1) => {
+        if (!events.length) {
+            return seqStart;
+        }
+        const mkEnvelope = (slice) => {
+            const tFirst = slice[0]?.timestamp ?? nowServer();
+            const tLast = slice[slice.length - 1]?.timestamp ?? tFirst;
+            return { type: 'rrweb', seq: seqStart, tFirst, tLast, events: slice };
+        };
+        const pieces = splitEventsBySize(events, mkEnvelope);
+        for (let i = 0; i < pieces.length; i += 1) {
+            const piece = pieces[i];
+            const env = mkEnvelope(piece);
+            const pieceSeq = seqStart + i;
+            await sendChunkToLogCollector({
+                sid,
+                envelope: env,
+                seq: pieceSeq,
+            });
+        }
+        return seqStart + pieces.length;
+    };
+    const finalizeLiveParentIfNeeded = async () => {
+        if (activeChildSessionRef.current) {
+            return;
+        }
+        if (!parentSessionRef.current) {
+            return;
+        }
+        if (liveParentRotationPendingRef.current || nowServer() >= parentSessionRef.current.expiresAt) {
+            const parent = parentSessionRef.current;
+            parentSessionRef.current = null;
+            sessionIdRef.current = null;
+            liveParentRotationPendingRef.current = false;
+            clearSessionExpiryTimer();
+            enqueueFinishSdkSession(parent.sessionId);
+            if (recordingRef.current && sdkTokenRef.current) {
+                ensureLiveParentSession();
+            }
+        }
+    };
+    const finalizeDetachedLiveChildSession = async (child) => {
+        try {
+            const nextSeq = await sendRrwebEventsToIngest(child.sessionId, child.events, child.nextSeq);
+            child.nextSeq = nextSeq;
+            postSessionEndEvent(child.sessionId, {
+                finishedAt: nowServer(),
+                rrwebNextSeq: child.nextSeq,
+            });
+            enqueueFinishSdkSession(child.sessionId);
+        }
+        catch {
+            /* best-effort */
+        }
+        finally {
+            await finalizeLiveParentIfNeeded();
+        }
+    };
+    const finalizeLiveChildSession = async () => {
+        const child = activeChildSessionRef.current;
+        if (!child) {
+            return;
+        }
+        if (child.requestsInFlight > 0 || nowServer() < child.closeDeadline) {
+            scheduleLiveChildCloseCheck();
+            return;
+        }
+        clearLiveChildCloseTimer();
+        activeChildSessionRef.current = null;
+        previousChildSessionIdRef.current = child.sessionId;
+        await finalizeDetachedLiveChildSession(child);
+    };
+    const ensureLiveChildSession = (requestStart) => {
+        const active = activeChildSessionRef.current;
+        const nowTs = nowServer();
+        if (active && (active.requestsInFlight > 0 || nowTs <= active.closeDeadline)) {
+            active.requestsInFlight += 1;
+            active.closeDeadline = Math.max(active.closeDeadline, requestStart + LIVE_REQUEST_POSTROLL_MS + LIVE_SEGMENT_IDLE_MS);
+            scheduleLiveChildCloseCheck();
+            return active;
+        }
+        if (active) {
+            clearLiveChildCloseTimer();
+            activeChildSessionRef.current = null;
+            previousChildSessionIdRef.current = active.sessionId;
+            void finalizeDetachedLiveChildSession(active);
+        }
+        const parent = ensureLiveParentSession();
+        if (!parent) {
+            return null;
+        }
+        const sessionId = newSID();
+        enqueueCreateSdkSession({
+            sessionId,
+            clientTime: requestStart,
+            sessionKind: 'child',
+            parentSessionId: parent.sessionId,
+            previousSessionId: previousChildSessionIdRef.current,
+        });
+        const preRollFloor = requestStart - LIVE_REQUEST_PREROLL_MS;
+        const preRollEvents = liveRecentEventsRef.current.filter((ev) => Number(ev?.timestamp ?? 0) >= preRollFloor);
+        const hasRecentFullSnapshot = preRollEvents.some((ev) => Number(ev?.type) === EventType.FullSnapshot);
+        const snapshotSeed = hasRecentFullSnapshot
+            ? preRollEvents.slice()
+            : [
+                ...(liveLatestMetaEventRef.current &&
+                    !liveSinceFullSnapshotRef.current.some((ev) => Number(ev?.type) === EventType.Meta)
+                    ? [liveLatestMetaEventRef.current]
+                    : []),
+                ...liveSinceFullSnapshotRef.current,
+            ];
+        const child = {
+            sessionId,
+            parentSessionId: parent.sessionId,
+            previousSessionId: previousChildSessionIdRef.current,
+            startedAt: requestStart,
+            closeDeadline: requestStart + LIVE_REQUEST_POSTROLL_MS + LIVE_SEGMENT_IDLE_MS,
+            requestsInFlight: 1,
+            events: (snapshotSeed.length ? snapshotSeed : preRollEvents).slice(),
+            postedActionKeys: new Set(),
+            nextSeq: 1,
+        };
+        activeChildSessionRef.current = child;
+        scheduleLiveChildCloseCheck();
+        return child;
+    };
+    const resolveRequestLabel = (method, url) => {
+        const normalizedMethod = String(method || 'GET').toUpperCase();
+        if (!url) {
+            return `${normalizedMethod} request`;
+        }
+        try {
+            const parsed = new URL(url, typeof window !== 'undefined' ? window.location.origin : 'http://localhost');
+            return `${normalizedMethod} ${parsed.pathname}`;
+        }
+        catch {
+            return `${normalizedMethod} ${url}`;
+        }
+    };
+    const resolveOutgoingRequestContext = (params) => {
+        const requestStart = nowServer();
+        if (params.isInternal || params.isSdkInternal) {
+            return {
+                sessionId: isLiveMode ? parentSessionRef.current?.sessionId ?? null : sessionIdRef.current,
+                actionId: currentAidRef.current,
+                requestStart,
+                label: lastActionLabelRef.current,
+            };
+        }
+        if (!isLiveMode) {
+            return {
+                sessionId: sessionIdRef.current,
+                actionId: currentAidRef.current,
+                requestStart,
+                label: lastActionLabelRef.current,
+            };
+        }
+        const child = ensureLiveChildSession(requestStart);
+        if (!child) {
+            return {
+                sessionId: null,
+                actionId: null,
+                requestStart,
+                label: null,
+            };
+        }
+        const actionId = currentAidRef.current ?? newAID();
+        const label = lastActionLabelRef.current ?? resolveRequestLabel(params.method, params.url);
+        const existingMeta = actionMeta.current.get(actionId);
+        if (!existingMeta) {
+            actionMeta.current.set(actionId, { tStart: requestStart, label });
+        }
+        else {
+            actionMeta.current.set(actionId, {
+                tStart: Math.min(existingMeta.tStart, requestStart),
+                label: existingMeta.label ?? label,
+            });
+        }
+        ensureFrontendActionInSession(child.sessionId, {
+            aid: actionId,
+            label,
+            tStart: requestStart,
+            tEnd: requestStart,
+            hasReq: false,
+            hasDb: false,
+            error: false,
+            ui: { kind: currentAidRef.current ? 'click' : 'request' },
+        });
+        return {
+            sessionId: child.sessionId,
+            actionId,
+            requestStart,
+            label,
+        };
+    };
+    const notifyRequestCompleted = (params) => {
+        const finishedAt = Number.isFinite(Number(params.finishedAt))
+            ? Number(params.finishedAt)
+            : nowServer();
+        const sessionId = params.sessionId;
+        const actionId = params.actionId;
+        if (!sessionId || !actionId) {
+            return;
+        }
+        const meta = actionMeta.current.get(actionId);
+        const actionStart = meta?.tStart ?? finishedAt;
+        const actionLabel = params.label ?? meta?.label ?? lastActionLabelRef.current;
+        const hasReqKey = `${sessionId}:${actionId}`;
+        if (!hasReqMarkedRef.current.has(hasReqKey)) {
+            hasReqMarkedRef.current.add(hasReqKey);
+            ensureFrontendActionInSession(sessionId, {
+                aid: actionId,
+                label: actionLabel,
+                tStart: actionStart,
+                tEnd: finishedAt,
+                hasReq: true,
+                ui: {},
+            });
+        }
+        if (isLiveMode) {
+            const child = activeChildSessionRef.current;
+            if (child && child.sessionId === sessionId) {
+                child.requestsInFlight = Math.max(0, child.requestsInFlight - 1);
+                child.closeDeadline = Math.max(child.closeDeadline, finishedAt + LIVE_REQUEST_POSTROLL_MS + LIVE_SEGMENT_IDLE_MS);
+                scheduleLiveChildCloseCheck();
+            }
+        }
+    };
     useEffect(() => {
         __reproCtx = {
             base,
@@ -257,14 +959,18 @@ export function ReproProvider({ appId, children, button, masking, apiBase }) {
             getToken: () => sdkTokenRef.current,
             getUserToken: () => userTokenRef.current,
             getUserPassword: () => userPasswordRef.current,
-            getFetch: () => (origFetchRef.current ?? window.fetch.bind(window)),
+            getFetch: () => origFetchRef.current ?? window.fetch.bind(window),
             hasReqMarked: hasReqMarkedRef.current,
+            resolveRequestContext: resolveOutgoingRequestContext,
+            notifyRequestCompleted,
+            beginClientRequest,
+            endClientRequest,
             onUnauthorized: () => handleUnauthorized(),
         };
         return () => {
             __reproCtx = null;
         };
-    }, [base]);
+    }, [base, isLiveMode]);
     useEffect(() => {
         const storedToken = initialAuthRef.current?.token ?? null;
         if (!storedToken) {
@@ -279,8 +985,7 @@ export function ReproProvider({ appId, children, button, masking, apiBase }) {
         if (auth?.token !== storedToken) {
             return;
         }
-        if (authCheckInFlightRef.current ||
-            lastAuthCheckTokenRef.current === storedToken) {
+        if (authCheckInFlightRef.current || lastAuthCheckTokenRef.current === storedToken) {
             return;
         }
         let cancelled = false;
@@ -290,12 +995,12 @@ export function ReproProvider({ appId, children, button, masking, apiBase }) {
             try {
                 const fetcher = origFetchRef.current ?? window.fetch.bind(window);
                 const resp = await fetcher(`${base}/v1/apps/${appId}/users/me`, {
-                    method: "GET",
+                    method: 'GET',
                     headers: addTenantHeader({
-                        Accept: "application/json",
+                        Accept: 'application/json',
                         Authorization: `Bearer ${storedToken}`,
-                        "x-sdk-token": sdkToken,
-                        [INTERNAL_HEADER]: "1",
+                        'x-sdk-token': sdkToken,
+                        [INTERNAL_HEADER]: '1',
                     }),
                 });
                 if (cancelled)
@@ -320,7 +1025,7 @@ export function ReproProvider({ appId, children, button, masking, apiBase }) {
     useEffect(() => {
         userPasswordRef.current = auth?.password ?? null;
         userTokenRef.current = auth?.token ?? null;
-        if (typeof window !== "undefined") {
+        if (typeof window !== 'undefined') {
             try {
                 if (auth) {
                     window.localStorage.setItem(storageKey, JSON.stringify(auth));
@@ -346,11 +1051,11 @@ export function ReproProvider({ appId, children, button, masking, apiBase }) {
         setLoginError(null);
         try {
             const resp = await fetch(`${base}/v1/apps/${appId}/users/login`, {
-                method: "POST",
+                method: 'POST',
                 headers: addTenantHeader({
-                    Accept: "application/json",
-                    "Content-Type": "application/json",
-                    [INTERNAL_HEADER]: "1",
+                    Accept: 'application/json',
+                    'Content-Type': 'application/json',
+                    [INTERNAL_HEADER]: '1',
                 }),
                 body: JSON.stringify({ email, password }),
             });
@@ -358,22 +1063,20 @@ export function ReproProvider({ appId, children, button, masking, apiBase }) {
                 throw new Error(`Login failed (${resp.status})`);
             }
             const data = await resp.json();
-            const accessTokenFromUser = typeof data?.user?.accessToken === "string"
+            const accessTokenFromUser = typeof data?.user?.accessToken === 'string'
                 ? data.user.accessToken.trim()
                 : null;
-            const accessTokenFromData = typeof data?.accessToken === "string"
-                ? data.accessToken.trim()
-                : null;
+            const accessTokenFromData = typeof data?.accessToken === 'string' ? data.accessToken.trim() : null;
             const accessToken = accessTokenFromUser || accessTokenFromData;
             if (!accessToken) {
-                throw new Error("Login response did not include an access token.");
+                throw new Error('Login response did not include an access token.');
             }
             setAuth({ email, password, token: accessToken, data });
-            setLoginPassword("");
+            setLoginPassword('');
             setShowLogin(false);
         }
         catch (err) {
-            setLoginError(err?.message || "Unable to login");
+            setLoginError(err?.message || 'Unable to login');
         }
         finally {
             setIsLoggingIn(false);
@@ -399,7 +1102,7 @@ export function ReproProvider({ appId, children, button, masking, apiBase }) {
                 }
             }
             setAuth(null);
-            setLoginPassword("");
+            setLoginPassword('');
             clearShareInfo();
             setShowLogin(options?.showLogin ?? false);
         }
@@ -408,7 +1111,7 @@ export function ReproProvider({ appId, children, button, masking, apiBase }) {
         }
     }
     function handleUnauthorized() {
-        void logout({ showLogin: true });
+        void logout({ showLogin: !isLiveMode });
     }
     const handleUnauthorizedStatus = (status) => {
         if (status === 401) {
@@ -426,11 +1129,12 @@ export function ReproProvider({ appId, children, button, masking, apiBase }) {
         return () => {
             clearCopyStatusTimer();
             clearSessionExpiryTimer();
+            clearLiveChildCloseTimer();
         };
     }, []);
     useEffect(() => {
         const pressed = shortcutKeysRef.current;
-        if (typeof window === "undefined")
+        if (typeof window === 'undefined')
             return;
         const handleKeyDown = (evt) => {
             const hasMod = evt.ctrlKey || evt.metaKey;
@@ -438,10 +1142,10 @@ export function ReproProvider({ appId, children, button, masking, apiBase }) {
                 pressed.clear();
                 return;
             }
-            const key = (evt.key || "").toLowerCase();
-            if (key === "r" || key === "o") {
+            const key = (evt.key || '').toLowerCase();
+            if (key === 'r' || key === 'o') {
                 pressed.add(key);
-                const combo = pressed.has("r") && pressed.has("o");
+                const combo = pressed.has('r') && pressed.has('o');
                 if (combo) {
                     if (controlsHidden) {
                         evt.preventDefault();
@@ -456,26 +1160,26 @@ export function ReproProvider({ appId, children, button, masking, apiBase }) {
                 }
                 return;
             }
-            if (key === "control" || key === "meta") {
+            if (key === 'control' || key === 'meta') {
                 pressed.clear();
                 return;
             }
             pressed.clear();
         };
         const handleKeyUp = (evt) => {
-            const key = (evt.key || "").toLowerCase();
-            if (key === "r" || key === "o") {
+            const key = (evt.key || '').toLowerCase();
+            if (key === 'r' || key === 'o') {
                 pressed.delete(key);
             }
-            else if (key === "control" || key === "meta") {
+            else if (key === 'control' || key === 'meta') {
                 pressed.clear();
             }
         };
-        window.addEventListener("keydown", handleKeyDown, true);
-        window.addEventListener("keyup", handleKeyUp, true);
+        window.addEventListener('keydown', handleKeyDown, true);
+        window.addEventListener('keyup', handleKeyUp, true);
         return () => {
-            window.removeEventListener("keydown", handleKeyDown, true);
-            window.removeEventListener("keyup", handleKeyUp, true);
+            window.removeEventListener('keydown', handleKeyDown, true);
+            window.removeEventListener('keyup', handleKeyUp, true);
         };
     }, [controlsHidden]);
     // ---- bootstrap once ----
@@ -483,7 +1187,7 @@ export function ReproProvider({ appId, children, button, masking, apiBase }) {
         let mounted = true;
         (async () => {
             try {
-                const resp = await getJSON(`${base}/v1/sdk/bootstrap?appId=${encodeURIComponent(appId)}`, addTenantHeader({ [INTERNAL_HEADER]: "1" }));
+                const resp = await getJSON(`${base}/v1/sdk/bootstrap?appId=${encodeURIComponent(appId)}`, addTenantHeader({ [INTERNAL_HEADER]: '1' }));
                 if (mounted && resp.enabled && resp.sdkToken) {
                     sdkTokenRef.current = resp.sdkToken;
                     setReady(true);
@@ -502,20 +1206,174 @@ export function ReproProvider({ appId, children, button, masking, apiBase }) {
     }, [appId, base]);
     const rrBufferRef = useRef([]);
     const rrFlushTimerRef = useRef(null);
+    const rrFlushQueuedRef = useRef(false);
     const CHUNK_SIZE = 80; // send when buffer hits 200 events
     const FLUSH_MS = 1500; // or every 2s, whichever first
-    async function sendChunkGzip({ baseUrl, sid, token, envelope, seq }) {
+    const postCanonicalEventsNow = async (events) => {
+        try {
+            const fetcher = origFetchRef.current ?? window.fetch.bind(window);
+            const headers = {
+                'Content-Type': 'application/json',
+                'X-App-Id': appId,
+                [INTERNAL_HEADER]: '1',
+            };
+            if (ingest?.appSecret) {
+                headers['X-App-Secret'] = ingest.appSecret;
+            }
+            if (ingest?.appName) {
+                headers['X-App-Name'] = ingest.appName;
+            }
+            const resp = await fetcher(ingestUrl, {
+                method: 'POST',
+                headers: addTenantHeader(headers),
+                body: JSON.stringify({ events }),
+            });
+            if (resp.status === 413) {
+                return 'too_large';
+            }
+            if (!resp.ok) {
+                return 'fail';
+            }
+            return 'ok';
+        }
+        catch {
+            return 'fail';
+        }
+    };
+    const postFrontendActionEvent = (sid, action) => {
+        const safeStart = Number.isFinite(Number(action.tStart))
+            ? Number(action.tStart)
+            : nowServer();
+        const safeEnd = Number.isFinite(Number(action.tEnd))
+            ? Number(action.tEnd)
+            : safeStart;
+        const payload = {
+            action_id: action.aid,
+            aid: action.aid,
+            t: safeStart,
+            label: action.label ?? null,
+            tStart: safeStart,
+            tEnd: safeEnd,
+            hasReq: Boolean(action.hasReq),
+            hasDb: Boolean(action.hasDb),
+            error: Boolean(action.error),
+            ui: action.ui ?? {},
+        };
+        const canonical = {
+            schema_version: ingest?.schemaVersion ?? 1,
+            tenant_id: resolvedTenantId,
+            app_id: appId,
+            session_id: sid,
+            event_type: 'frontend_action',
+            event_ts: new Date(safeEnd).toISOString(),
+            actor_id: ingest?.actorId ?? appId,
+            actor_type: ingest?.actorType ?? 'browser',
+            payload,
+        };
+        if (actorLabels) {
+            canonical.actor_labels = actorLabels;
+        }
+        enqueueCanonicalEvents([canonical]);
+    };
+    const postSessionEndEvent = (sid, payload) => {
+        const finishedAt = Number.isFinite(Number(payload.finishedAt))
+            ? Number(payload.finishedAt)
+            : nowServer();
+        const canonical = {
+            schema_version: ingest?.schemaVersion ?? 1,
+            tenant_id: resolvedTenantId,
+            app_id: appId,
+            session_id: sid,
+            event_type: 'frontend_session_end',
+            event_ts: new Date(finishedAt).toISOString(),
+            actor_id: ingest?.actorId ?? appId,
+            actor_type: ingest?.actorType ?? 'browser',
+            payload: {
+                finishedAt,
+                rrwebNextSeq: Number.isFinite(Number(payload.rrwebNextSeq))
+                    ? Number(payload.rrwebNextSeq)
+                    : nextSeqRef.current,
+            },
+        };
+        if (actorLabels) {
+            canonical.actor_labels = actorLabels;
+        }
+        enqueueCanonicalEvents([canonical]);
+    };
+    const postSessionCaptureManifest = (sid, payload) => {
+        const closedAt = Number.isFinite(Number(payload.closedAt))
+            ? Number(payload.closedAt)
+            : nowServer();
+        const frontendActionDocCount = Number.isFinite(Number(payload.frontendActionDocCount))
+            ? Math.max(0, Math.round(Number(payload.frontendActionDocCount)))
+            : 0;
+        const rrwebChunkCount = Number.isFinite(Number(payload.rrwebChunkCount))
+            ? Math.max(0, Math.round(Number(payload.rrwebChunkCount)))
+            : 0;
+        const canonical = {
+            schema_version: ingest?.schemaVersion ?? 1,
+            tenant_id: resolvedTenantId,
+            app_id: appId,
+            session_id: sid,
+            event_type: 'session_capture_manifest',
+            event_ts: new Date(closedAt).toISOString(),
+            actor_id: ingest?.actorId ?? appId,
+            actor_type: ingest?.actorType ?? 'browser',
+            payload: {
+                mode: 'staging',
+                closedAt,
+                expected: {
+                    frontendActionDoc: frontendActionDocCount,
+                    rrwebChunk: rrwebChunkCount,
+                    frontendSessionEnd: 1,
+                },
+            },
+        };
+        if (actorLabels) {
+            canonical.actor_labels = actorLabels;
+        }
+        enqueueCanonicalEvents([canonical]);
+    };
+    const sendChunkToLogCollector = async ({ sid, envelope, seq, }) => {
+        const tFirst = Number(envelope?.tFirst);
+        const tLast = Number(envelope?.tLast);
+        const safeTFirst = Number.isFinite(tFirst) ? tFirst : nowServer();
+        const safeTLast = Number.isFinite(tLast) ? tLast : safeTFirst;
+        const payload = {
+            action_id: currentAidRef.current ?? null,
+            seq,
+            tFirst: safeTFirst,
+            tLast: safeTLast,
+            events: Array.isArray(envelope?.events) ? envelope.events : [],
+        };
+        const canonical = {
+            schema_version: ingest?.schemaVersion ?? 1,
+            tenant_id: resolvedTenantId,
+            app_id: appId,
+            session_id: sid,
+            event_type: 'rrweb_chunk',
+            event_ts: new Date(safeTLast).toISOString(),
+            actor_id: ingest?.actorId ?? appId,
+            actor_type: ingest?.actorType ?? 'browser',
+            payload,
+        };
+        if (actorLabels) {
+            canonical.actor_labels = actorLabels;
+        }
+        return postCanonicalEventsNow([canonical]);
+    };
+    async function sendChunkGzip({ baseUrl, sid, token, envelope, seq, }) {
         try {
             const json = JSON.stringify({ ...envelope, seq });
             const gz = gzip(json); // Uint8Array
             const r = await (origFetchRef.current ?? window.fetch)(`${baseUrl}/v1/sessions/${sid}/events`, {
-                method: "POST",
+                method: 'POST',
                 headers: addTenantHeader({
-                    "Content-Type": "application/json",
-                    "Content-Encoding": "gzip",
-                    "x-sdk-token": token,
+                    'Content-Type': 'application/json',
+                    'Content-Encoding': 'gzip',
+                    'x-sdk-token': token,
                     ...(userTokenRef.current ? { Authorization: `Bearer ${userTokenRef.current}` } : {}),
-                    [INTERNAL_HEADER]: "1",
+                    [INTERNAL_HEADER]: '1',
                 }),
                 body: gz,
             });
@@ -531,20 +1389,40 @@ export function ReproProvider({ appId, children, button, masking, apiBase }) {
             return 'fail';
         }
     }
+    const enqueueRrwebBufferFlush = (reason) => {
+        if (rrFlushQueuedRef.current)
+            return;
+        rrFlushQueuedRef.current = true;
+        enqueueSdkTask({
+            maxAttempts: 5,
+            run: async () => {
+                rrFlushQueuedRef.current = false;
+                const ok = await flushRrwebBufferNow(reason);
+                if (ok && rrBufferRef.current.length > 0) {
+                    enqueueRrwebBufferFlush('timer');
+                }
+                return ok;
+            },
+        });
+    };
     async function flushRrwebBuffer(reason) {
+        enqueueRrwebBufferFlush(reason);
+    }
+    async function flushRrwebBufferNow(reason) {
         if (isFlushingRef.current)
-            return;
+            return false;
         const sid = sessionIdRef.current;
         const token = sdkTokenRef.current;
         const baseUrl = base;
         if (!sid || !token)
-            return;
+            return true;
         if (!rrBufferRef.current.length)
-            return;
+            return true;
         isFlushingRef.current = true;
+        let failed = false;
         try {
             if (backoffRef.current > 0) {
-                await new Promise(r => setTimeout(r, backoffRef.current));
+                await new Promise((r) => setTimeout(r, backoffRef.current));
             }
             // COPY buffer; do not mutate until we know what succeeded
             const fullSlice = rrBufferRef.current.slice(0);
@@ -564,7 +1442,10 @@ export function ReproProvider({ appId, children, button, masking, apiBase }) {
                 const env = mkEnvelope(piece);
                 const jsonSize = jsonBytes(env);
                 let res;
-                if (jsonSize > 64 * 1024) {
+                if (useIngestPipeline) {
+                    res = await sendChunkToLogCollector({ sid, envelope: env, seq: pieceSeq });
+                }
+                else if (jsonSize > 64 * 1024) {
                     res = await sendChunkGzip({ baseUrl, sid, token, envelope: env, seq: pieceSeq });
                 }
                 else {
@@ -586,26 +1467,28 @@ export function ReproProvider({ appId, children, button, masking, apiBase }) {
                 }
                 // failure: stop; keep remaining events in buffer for retry
                 backoffRef.current = Math.min(4000, (backoffRef.current || 250) * 2);
+                failed = true;
                 break;
             }
             // success for `sentCount` events → drop them from buffer
             if (sentCount > 0) {
                 rrBufferRef.current.splice(0, sentCount);
             }
+            return !failed;
         }
         finally {
             isFlushingRef.current = false;
         }
     }
-    async function sendChunk({ baseUrl, sid, token, envelope, seq }) {
+    async function sendChunk({ baseUrl, sid, token, envelope, seq, }) {
         try {
             const r = await (origFetchRef.current ?? window.fetch)(`${baseUrl}/v1/sessions/${sid}/events`, {
-                method: "POST",
+                method: 'POST',
                 headers: addTenantHeader({
-                    "Content-Type": "application/json",
-                    "x-sdk-token": token,
+                    'Content-Type': 'application/json',
+                    'x-sdk-token': token,
                     ...(userTokenRef.current ? { Authorization: `Bearer ${userTokenRef.current}` } : {}),
-                    [INTERNAL_HEADER]: "1",
+                    [INTERNAL_HEADER]: '1',
                 }),
                 body: JSON.stringify({ ...envelope, seq }), // ensure seq matches piece
             });
@@ -631,343 +1514,438 @@ export function ReproProvider({ appId, children, button, masking, apiBase }) {
             return;
         ax.__reproAttached = true;
         ax.interceptors.request.use((config) => {
-            const sid = sessionIdRef.current;
-            const aid = currentAidRef.current;
-            const url = `${config.baseURL || ""}${config.url || ""}`;
+            const url = `${config.baseURL || ''}${config.url || ''}`;
             const isInternal = url.startsWith(base);
             const isSdkInternal = config.headers?.[INTERNAL_HEADER] != null;
+            const isClientRequest = !isInternal && !isSdkInternal;
+            const existingHeaders = new Headers(config.headers || {});
+            const resolved = resolveOutgoingRequestContext({
+                url,
+                isInternal,
+                isSdkInternal,
+                method: config.method,
+            });
+            const sid = resolved.sessionId;
+            const aid = resolved.actionId;
             if (isInternal) {
                 config.headers = config.headers || {};
                 config.headers[NGROK_SKIP_HEADER] = NGROK_SKIP_VALUE;
             }
-            if (sid && aid && !isInternal && !isSdkInternal) {
-                config.headers = config.headers || {};
-                config.headers["X-Bug-Session-Id"] = sid;
-                config.headers["X-Bug-Action-Id"] = aid;
+            config.headers = config.headers || {};
+            const useQueryPropagation = sid && aid
+                ? shouldUseQueryPropagation({
+                    url,
+                    method: config.method,
+                    headers: existingHeaders,
+                    isInternal,
+                    isSdkInternal,
+                })
+                : false;
+            if (sid && aid && !isSdkInternal && !useQueryPropagation) {
+                config.headers[REQUEST_START_HEADER] = String(resolved.requestStart);
+            }
+            if (sid && aid && !isInternal && !isSdkInternal && useQueryPropagation) {
+                config.url = appendReproQuery(url, {
+                    sessionId: sid,
+                    actionId: aid,
+                    requestStart: resolved.requestStart,
+                });
+                if (config.baseURL) {
+                    config.baseURL = undefined;
+                }
+            }
+            else if (sid && aid && !isInternal && !isSdkInternal) {
+                config.headers['X-Bug-Session-Id'] = sid;
+                config.headers['X-Bug-Action-Id'] = aid;
+            }
+            config.__reproSessionId = sid ?? null;
+            config.__reproActionId = aid ?? null;
+            config.__reproActionLabel = resolved.label ?? null;
+            if (isClientRequest) {
+                beginClientRequest();
+                config.__reproClientRequest = true;
             }
             return config;
         });
-        ax.interceptors.response.use(async (resp) => {
-            const url = `${resp.config.baseURL || ""}${resp.config.url || ""}`;
+        ax.interceptors.response.use((resp) => {
+            const url = `${resp.config.baseURL || ''}${resp.config.url || ''}`;
             const hdrs = resp.config.headers || {};
             const isInternal = url.startsWith(base);
             const isSdkInternal = hdrs[INTERNAL_HEADER] != null;
             if (isInternal) {
                 handleUnauthorizedStatus(resp.status);
             }
-            if (!isInternal &&
-                !isSdkInternal &&
-                sessionIdRef.current &&
-                currentAidRef.current &&
-                sdkTokenRef.current &&
-                !hasReqMarkedRef.current.has(currentAidRef.current)) {
-                hasReqMarkedRef.current.add(currentAidRef.current);
-                // use ORIGINAL fetch to avoid recursion
-                await origFetchRef.current(`${base}/v1/sessions/${sessionIdRef.current}/events`, {
-                    method: "POST",
-                    headers: addTenantHeader({
-                        "Content-Type": "application/json",
-                        "x-sdk-token": sdkTokenRef.current,
-                        ...(userTokenRef.current ? { Authorization: `Bearer ${userTokenRef.current}` } : {}),
-                        [INTERNAL_HEADER]: "1",
-                    }),
-                    body: JSON.stringify({
-                        seq: nowServer(),
-                        events: [
-                            {
-                                type: "action",
-                                aid: currentAidRef.current,
-                                label: lastActionLabelRef.current,
-                                tStart: nowServer(),
-                                tEnd: nowServer(),
-                                hasReq: true,
-                                ui: {},
-                            },
-                        ],
-                    }),
-                }).catch(() => { });
+            const sid = resp?.config?.__reproSessionId ?? null;
+            const aid = resp?.config?.__reproActionId ?? null;
+            const label = resp?.config?.__reproActionLabel ?? null;
+            if (!isInternal && !isSdkInternal && sid && aid) {
+                notifyRequestCompleted({
+                    sessionId: sid,
+                    actionId: aid,
+                    label,
+                    finishedAt: nowServer(),
+                });
+            }
+            if (resp?.config?.__reproClientRequest) {
+                endClientRequest();
             }
             return resp;
-        }, (err) => Promise.reject(err));
+        }, (err) => {
+            const requestConfig = err?.config ?? err?.response?.config;
+            if (requestConfig?.__reproClientRequest) {
+                endClientRequest();
+            }
+            return Promise.reject(err);
+        });
     }
     // ---- derive a label from a click target (best-effort, minimal) ----
     function labelFromClickTarget(target) {
         const el = target;
         if (!el)
-            return "Click";
-        const txt = (el.innerText || el.getAttribute?.("aria-label") || "").trim().slice(0, 40) ||
-            el.getAttribute?.("title") ||
-            "";
-        const id = el.id ? `#${el.id}` : "";
-        const cls = el.className && typeof el.className === "string"
-            ? `.${el.className.split(" ").slice(0, 2).join(".")}`
-            : "";
-        return txt ? `Click • ${txt}` : `Click • ${(el.tagName || "el").toLowerCase()}${id || cls}`;
+            return 'Click';
+        const txt = (el.innerText || el.getAttribute?.('aria-label') || '').trim().slice(0, 40) ||
+            el.getAttribute?.('title') ||
+            '';
+        const id = el.id ? `#${el.id}` : '';
+        const cls = el.className && typeof el.className === 'string'
+            ? `.${el.className.split(' ').slice(0, 2).join('.')}`
+            : '';
+        return txt ? `Click • ${txt}` : `Click • ${(el.tagName || 'el').toLowerCase()}${id || cls}`;
     }
     // ---- START recording ----
     async function start() {
         if (!sdkTokenRef.current || recordingRef.current)
             return;
-        // 1) start session
-        if (!requireAuth())
+        if (!isLiveMode && !requireAuth())
             return;
         clearShareInfo();
-        const r = await fetch(`${base}/v1/sessions`, {
-            method: "POST",
-            headers: addTenantHeader({
-                "Content-Type": "application/json",
-                "x-sdk-token": sdkTokenRef.current,
-                ...(userTokenRef.current ? { Authorization: `Bearer ${userTokenRef.current}` } : {}),
-            }),
-            body: JSON.stringify({ clientTime: nowServer() }),
-        });
-        if (!r.ok) {
-            handleUnauthorizedStatus(r.status);
-            return;
-        }
-        const sess = (await r.json());
-        sessionIdRef.current = sess.sessionId; // <-- MISSING, add this
-        offsetRef.current = Number(sess.clockOffsetMs || 0);
-        // 2) hold original fetch & install interceptor
         origFetchRef.current = window.fetch.bind(window);
-        nextSeqRef.current = 1; // reset for new session
+        nextSeqRef.current = 1;
         rrBufferRef.current = [];
+        liveRecentEventsRef.current = [];
+        liveLatestMetaEventRef.current = null;
+        liveSinceFullSnapshotRef.current = [];
+        activeChildSessionRef.current = null;
+        parentSessionRef.current = null;
+        previousChildSessionIdRef.current = null;
+        liveParentRotationPendingRef.current = false;
+        hasReqMarkedRef.current.clear();
+        actionMeta.current.clear();
+        clearSessionExpiryTimer();
+        clearLiveChildCloseTimer();
+        if (isLiveMode) {
+            const parent = ensureLiveParentSession();
+            if (!parent) {
+                return;
+            }
+            sessionIdRef.current = parent.sessionId;
+        }
+        else {
+            const sessionId = newSID();
+            sessionIdRef.current = sessionId;
+            enqueueCreateSdkSession({
+                sessionId,
+                clientTime: nowServer(),
+                sessionKind: 'standard',
+            }, (created) => {
+                if (sessionIdRef.current === created.sessionId) {
+                    offsetRef.current = Number(created.clockOffsetMs || 0);
+                }
+            });
+        }
         if (rrFlushTimerRef.current)
             window.clearInterval(rrFlushTimerRef.current);
-        rrFlushTimerRef.current = window.setInterval(() => {
-            flushRrwebBuffer('timer');
-        }, FLUSH_MS);
+        if (!isLiveMode) {
+            rrFlushTimerRef.current = window.setInterval(() => {
+                void flushRrwebBuffer('timer');
+            }, FLUSH_MS);
+        }
         window.fetch = async (input, init = {}) => {
-            // figure request url
-            const urlStr = typeof input === "string" || input instanceof URL
-                ? String(input)
-                : input.url;
-            // existing incoming headers (if any)
+            const urlStr = typeof input === 'string' || input instanceof URL ? String(input) : input.url;
             const hdrsIn = new Headers(init.headers || input?.headers || {});
             const isInternal = urlStr.startsWith(base);
             const isSdkInternal = hdrsIn.has(INTERNAL_HEADER) || hdrsIn.has(INTERNAL_HEADER.toLowerCase());
-            // inject bug headers for app requests only (not our API or SDK-internal posts)
-            const headers = new Headers(init.headers || {});
+            const isClientRequest = !isInternal && !isSdkInternal;
+            const method = init.method ??
+                (typeof Request !== 'undefined' && input instanceof Request ? input.method : undefined);
+            const resolved = resolveOutgoingRequestContext({
+                url: urlStr,
+                isInternal,
+                isSdkInternal,
+                method,
+            });
+            const headers = new Headers(init.headers || input?.headers || {});
+            const useQueryPropagation = resolved.sessionId && resolved.actionId
+                ? shouldUseQueryPropagation({
+                    url: urlStr,
+                    method,
+                    headers,
+                    isInternal,
+                    isSdkInternal,
+                })
+                : false;
             setTenantOnHeaders(headers, isInternal);
-            if (!isSdkInternal) {
-                const requestStart = nowServer();
-                headers.set(REQUEST_START_HEADER, String(requestStart));
+            if (resolved.sessionId && resolved.actionId && !isSdkInternal && !useQueryPropagation) {
+                headers.set(REQUEST_START_HEADER, String(resolved.requestStart));
             }
-            if (sessionIdRef.current && currentAidRef.current && !isInternal && !isSdkInternal) {
-                headers.set("X-Bug-Session-Id", sessionIdRef.current);
-                headers.set("X-Bug-Action-Id", currentAidRef.current);
+            let nextInput = input;
+            if (resolved.sessionId && resolved.actionId && !isInternal && !isSdkInternal && useQueryPropagation) {
+                const nextUrl = appendReproQuery(urlStr, {
+                    sessionId: resolved.sessionId,
+                    actionId: resolved.actionId,
+                    requestStart: resolved.requestStart,
+                });
+                if (typeof input === 'string') {
+                    nextInput = nextUrl;
+                }
+                else if (input instanceof URL) {
+                    nextInput = new URL(nextUrl);
+                }
+                else if (typeof Request !== 'undefined' && input instanceof Request) {
+                    nextInput = new Request(nextUrl, input);
+                }
             }
-            init.headers = headers;
-            // always call ORIGINAL fetch to avoid recursion
-            const res = await origFetchRef.current(input, init);
-            if (isInternal) {
-                handleUnauthorizedStatus(res.status);
+            else if (resolved.sessionId && resolved.actionId && !isInternal && !isSdkInternal) {
+                headers.set('X-Bug-Session-Id', resolved.sessionId);
+                headers.set('X-Bug-Action-Id', resolved.actionId);
+            }
+            const nextInit = {
+                ...init,
+                headers,
+            };
+            if (isClientRequest) {
+                beginClientRequest();
+            }
+            try {
+                const res = await origFetchRef.current(nextInput, nextInit);
+                if (isInternal) {
+                    handleUnauthorizedStatus(res.status);
+                }
+                if (!isInternal && !isSdkInternal && resolved.sessionId && resolved.actionId) {
+                    notifyRequestCompleted({
+                        sessionId: resolved.sessionId,
+                        actionId: resolved.actionId,
+                        label: resolved.label,
+                        finishedAt: nowServer(),
+                    });
+                }
+                return res;
+            }
+            catch (err) {
+                if (isLiveMode) {
+                    const child = activeChildSessionRef.current;
+                    if (child && child.sessionId === resolved.sessionId) {
+                        child.requestsInFlight = Math.max(0, child.requestsInFlight - 1);
+                        child.closeDeadline = Math.max(child.closeDeadline, resolved.requestStart + LIVE_REQUEST_POSTROLL_MS + LIVE_SEGMENT_IDLE_MS);
+                        scheduleLiveChildCloseCheck();
+                    }
+                }
+                throw err;
             }
-            // mark hasReq ONCE per action (skip internal/API calls)
-            if (!isInternal &&
-                !isSdkInternal &&
-                sessionIdRef.current &&
-                currentAidRef.current &&
-                !hasReqMarkedRef.current.has(currentAidRef.current)) {
-                hasReqMarkedRef.current.add(currentAidRef.current);
+            finally {
+                if (isClientRequest) {
+                    endClientRequest();
+                }
             }
-            return res;
         };
         attachAxiosIfPresent();
-        // 3) click -> new ActionId + minimal action event (via ORIGINAL fetch)
-        // Remove any previous handler to avoid duplicates
         if (clickHandlerRef.current) {
-            document.removeEventListener("click", clickHandlerRef.current, { capture: true });
+            document.removeEventListener('click', clickHandlerRef.current, { capture: true });
             clickHandlerRef.current = null;
         }
         const clickHandler = (evt) => {
             if (!sessionIdRef.current || !sdkTokenRef.current)
                 return;
-            // Skip clicks on the SDK's own UI
             const targetEl = evt.target;
             if (targetEl && targetEl.closest('[data-repro-internal="1"]'))
                 return;
-            // Dedupe: ignore same-label clicks within 250ms (dev/StrictMode safety)
             const label = labelFromClickTarget(targetEl);
             const t = nowServer();
-            if (lastClickRef.current && t - lastClickRef.current.t < 250 && lastClickRef.current.label === label) {
+            if (lastClickRef.current &&
+                t - lastClickRef.current.t < 250 &&
+                lastClickRef.current.label === label) {
                 return;
             }
             lastClickRef.current = { t, label };
             const aid = newAID();
             currentAidRef.current = aid;
             lastActionLabelRef.current = label;
+            actionMeta.current.set(aid, { tStart: t, label });
             if (aidExpiryTimerRef.current)
                 window.clearTimeout(aidExpiryTimerRef.current);
             aidExpiryTimerRef.current = window.setTimeout(() => {
                 currentAidRef.current = null;
             }, 5000);
-            // post action row (internal; avoid recursion)
-            origFetchRef.current(`${base}/v1/sessions/${sessionIdRef.current}/events`, {
-                method: "POST",
-                headers: addTenantHeader({
-                    "Content-Type": "application/json",
-                    "x-sdk-token": sdkTokenRef.current,
-                    ...(userTokenRef.current ? { Authorization: `Bearer ${userTokenRef.current}` } : {}),
-                    [INTERNAL_HEADER]: "1",
-                }),
-                body: JSON.stringify({
-                    seq: t,
-                    events: [
-                        {
-                            type: "action",
-                            aid,
-                            label,
-                            tStart: t,
-                            tEnd: t,
-                            hasReq: false,
-                            hasDb: false,
-                            error: false,
-                            ui: { kind: "click" },
-                        },
-                    ],
-                }),
-            })
-                .then((resp) => {
-                handleUnauthorizedStatus(resp.status);
-            })
-                .catch(() => { });
+            if (!isLiveMode) {
+                postFrontendActionEvent(sessionIdRef.current, {
+                    aid,
+                    label,
+                    tStart: t,
+                    tEnd: t,
+                    hasReq: false,
+                    hasDb: false,
+                    error: false,
+                    ui: { kind: 'click' },
+                });
+            }
         };
         clickHandlerRef.current = clickHandler;
-        document.addEventListener("click", clickHandler, { capture: true });
-        // 4) rrweb: keep events in memory; upload on stop()
+        document.addEventListener('click', clickHandler, { capture: true });
         stopRecRef.current = record({
             emit: (ev) => {
+                if (isLiveMode) {
+                    if (Number(ev?.type) === EventType.Meta) {
+                        liveLatestMetaEventRef.current = ev;
+                    }
+                    if (Number(ev?.type) === EventType.FullSnapshot) {
+                        liveSinceFullSnapshotRef.current = [ev];
+                    }
+                    else if (liveSinceFullSnapshotRef.current.length > 0) {
+                        liveSinceFullSnapshotRef.current.push(ev);
+                    }
+                    liveRecentEventsRef.current.push(ev);
+                    trimLiveRecentEvents();
+                    const child = activeChildSessionRef.current;
+                    if (child) {
+                        child.events.push(ev);
+                    }
+                    return;
+                }
                 rrBufferRef.current.push(ev);
-                // stream out if we reach CHUNK_SIZE
                 if (rrBufferRef.current.length >= CHUNK_SIZE) {
-                    flushRrwebBuffer('size');
+                    void flushRrwebBuffer('size');
                 }
             },
+            ...(isLiveMode ? { checkoutEveryNms: LIVE_RRWEB_CHECKOUT_MS } : {}),
             ...(masking ?? {}),
         });
-        // 5) cleanup registration
         stop._cleanup = () => {
             if (clickHandlerRef.current) {
-                document.removeEventListener("click", clickHandlerRef.current, { capture: true });
+                document.removeEventListener('click', clickHandlerRef.current, { capture: true });
                 clickHandlerRef.current = null;
             }
         };
-        clearSessionExpiryTimer();
-        sessionExpiryTimerRef.current = window.setTimeout(() => {
-            void stop();
-        }, SESSION_MAX_MS);
+        if (!isLiveMode) {
+            clearSessionExpiryTimer();
+            sessionExpiryTimerRef.current = window.setTimeout(() => {
+                void stop();
+            }, SESSION_MAX_MS);
+        }
         recordingRef.current = true;
         setRecording(true);
     }
     // ---- STOP recording ----
     async function stop() {
         clearSessionExpiryTimer();
+        clearLiveChildCloseTimer();
         if (!recordingRef.current || isStoppingRef.current)
             return;
         isStoppingRef.current = true;
         try {
-            // stop rrweb + listeners
             stopRecRef.current?.();
             stop._cleanup?.();
-            // clear periodic timer
             if (rrFlushTimerRef.current) {
                 window.clearInterval(rrFlushTimerRef.current);
                 rrFlushTimerRef.current = null;
             }
-            // final flush of whatever is left
-            await flushRrwebBuffer('stop');
-            const origFetch = origFetchRef.current ?? window.fetch.bind(window);
-            const sid = sessionIdRef.current;
-            const token = sdkTokenRef.current;
-            // 1) upload rrweb chunks (internal; use original fetch)
-            try {
-                const events = rrwebEventsRef.current;
-                const CHUNK = 500;
-                for (let i = 0; i < events.length; i += CHUNK) {
-                    const slice = events.slice(i, i + CHUNK);
-                    const seq = nextSeqRef.current++;
-                    const tFirst = slice[0]?.timestamp ?? nowServer();
-                    const tLast = slice[slice.length - 1]?.timestamp ?? tFirst;
-                    const chunkRes = await origFetch(`${base}/v1/sessions/${sid}/events`, {
-                        method: "POST",
-                        headers: addTenantHeader({
-                            "Content-Type": "application/json",
-                            "x-sdk-token": token,
-                            ...(userTokenRef.current ? { Authorization: `Bearer ${userTokenRef.current}` } : {}),
-                            [INTERNAL_HEADER]: "1",
-                        }),
-                        body: JSON.stringify({
-                            type: "rrweb",
-                            seq,
-                            tFirst,
-                            tLast,
-                            events: slice, // send raw array
-                        }),
-                    });
-                    if (handleUnauthorizedStatus(chunkRes.status)) {
-                        break;
-                    }
+            if (isLiveMode) {
+                const child = activeChildSessionRef.current;
+                if (child) {
+                    child.requestsInFlight = 0;
+                    child.closeDeadline = nowServer();
+                    await finalizeLiveChildSession();
                 }
+                const parent = parentSessionRef.current;
+                parentSessionRef.current = null;
+                liveParentRotationPendingRef.current = false;
+                if (parent) {
+                    enqueueFinishSdkSession(parent.sessionId);
+                }
+                await flushSdkQueue();
+                clearShareInfo();
             }
-            catch {
-                /* ignore in MVP */
-            }
-            finally {
+            else {
+                await flushSdkQueue();
+                const rrwebFlushed = await flushRrwebBufferNow('stop');
+                if (!rrwebFlushed && rrBufferRef.current.length > 0) {
+                    enqueueRrwebBufferFlush('stop');
+                    await flushSdkQueue();
+                }
+                const origFetch = origFetchRef.current ?? window.fetch.bind(window);
+                const sid = sessionIdRef.current;
+                const token = sdkTokenRef.current;
+                const finishedAt = nowServer();
+                const rrwebNextSeq = nextSeqRef.current;
+                const frontendActionDocCount = actionMeta.current.size;
+                const rrwebChunkCount = Math.max(0, rrwebNextSeq - 1);
                 rrwebEventsRef.current = [];
-                nextSeqRef.current = 1;
-                actionMeta.current.clear();
-            }
-            // 2) finish (internal; use original fetch)
-            try {
-                const res = await origFetch(`${base}/v1/sessions/${sid}/finish`, {
-                    method: "POST",
-                    headers: addTenantHeader({
-                        "Content-Type": "application/json",
-                        "x-sdk-token": token,
-                        ...(userTokenRef.current ? { Authorization: `Bearer ${userTokenRef.current}` } : {}),
-                        [INTERNAL_HEADER]: "1",
-                    }),
-                    body: JSON.stringify({ notes: "" }),
+                postSessionEndEvent(sid, {
+                    finishedAt,
+                    rrwebNextSeq,
                 });
-                if (handleUnauthorizedStatus(res.status)) {
-                    clearShareInfo();
-                }
-                else if (res.ok) {
-                    let fin = null;
-                    try {
-                        fin = await res.json();
-                    }
-                    catch {
-                        fin = null;
+                postSessionCaptureManifest(sid, {
+                    closedAt: finishedAt,
+                    rrwebChunkCount,
+                    frontendActionDocCount,
+                });
+                await flushSdkQueue();
+                actionMeta.current.clear();
+                try {
+                    const res = await origFetch(`${base}/v1/sessions/${sid}/finish`, {
+                        method: 'POST',
+                        headers: addTenantHeader({
+                            'Content-Type': 'application/json',
+                            'x-sdk-token': token,
+                            ...(userTokenRef.current ? { Authorization: `Bearer ${userTokenRef.current}` } : {}),
+                            [INTERNAL_HEADER]: '1',
+                        }),
+                        body: JSON.stringify({ notes: '' }),
+                    });
+                    if (handleUnauthorizedStatus(res.status)) {
+                        clearShareInfo();
                     }
-                    if (fin?.viewerUrl) {
-                        resetCopyFeedback();
-                        setShareUrl(fin.viewerUrl);
+                    else if (res.ok) {
+                        let fin = null;
+                        try {
+                            fin = await res.json();
+                        }
+                        catch {
+                            fin = null;
+                        }
+                        if (fin?.viewerUrl) {
+                            resetCopyFeedback();
+                            setShareUrl(fin.viewerUrl);
+                        }
+                        else {
+                            clearShareInfo();
+                        }
                     }
                     else {
                         clearShareInfo();
                     }
                 }
-                else {
+                catch {
                     clearShareInfo();
                 }
             }
-            catch {
-                clearShareInfo();
-            }
         }
         finally {
-            // 3) restore fetch & reset
             if (origFetchRef.current)
                 window.fetch = origFetchRef.current;
             sessionIdRef.current = null;
+            parentSessionRef.current = null;
+            activeChildSessionRef.current = null;
+            previousChildSessionIdRef.current = null;
+            liveRecentEventsRef.current = [];
+            liveLatestMetaEventRef.current = null;
+            liveSinceFullSnapshotRef.current = [];
             currentAidRef.current = null;
             lastActionLabelRef.current = null;
             hasReqMarkedRef.current.clear();
+            actionMeta.current.clear();
+            rrBufferRef.current = [];
             if (aidExpiryTimerRef.current)
                 window.clearTimeout(aidExpiryTimerRef.current);
-            // also reset dedupe
             lastClickRef.current = null;
             setRecording(false);
             recordingRef.current = false;
@@ -975,16 +1953,16 @@ export function ReproProvider({ appId, children, button, masking, apiBase }) {
         }
     }
     // ---- UI (floating button) ----
-    const btnLabel = recording ? (button?.text ?? "Stop & Report") : (button?.text ?? "Record");
-    const loginLabel = "Authenticate to Record";
+    const btnLabel = recording ? button?.text ?? 'Stop & Report' : button?.text ?? 'Record';
+    const loginLabel = 'Authenticate to Record';
     const floatingContainerBaseStyle = {
-        position: "fixed",
+        position: 'fixed',
         zIndex: 2147483647,
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "flex-end",
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'flex-end',
         gap: 12,
-        width: "100%",
+        width: '100%',
         maxWidth: 360,
     };
     const floatingContainerStyle = {
@@ -993,146 +1971,146 @@ export function ReproProvider({ appId, children, button, masking, apiBase }) {
         bottom: 16,
     };
     const buttonRowStyle = {
-        display: "flex",
+        display: 'flex',
         gap: 10,
-        justifyContent: "flex-end",
-        width: "100%",
+        justifyContent: 'flex-end',
+        width: '100%',
     };
     const buttonBaseStyle = {
-        display: "inline-flex",
-        alignItems: "center",
-        justifyContent: "center",
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
         gap: 8,
-        padding: "12px 24px",
+        padding: '12px 24px',
         borderRadius: 9999,
-        border: "none",
-        background: "#f4f5f7",
-        cursor: "pointer",
-        fontFamily: "ui-sans-serif, system-ui, -apple-system",
-        fontSize: "14px",
+        border: 'none',
+        background: '#f4f5f7',
+        cursor: 'pointer',
+        fontFamily: 'ui-sans-serif, system-ui, -apple-system',
+        fontSize: '14px',
         fontWeight: 600,
-        color: "#ffffff",
-        boxShadow: "0 14px 24px rgba(15, 23, 42, 0.18)",
-        transition: "transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease",
+        color: '#ffffff',
+        boxShadow: '0 14px 24px rgba(15, 23, 42, 0.18)',
+        transition: 'transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease',
         minWidth: 150,
     };
     const recordButtonStyle = {
         ...buttonBaseStyle,
         background: recording
-            ? "linear-gradient(120deg, #ef4444, #b91c1c)"
-            : "linear-gradient(120deg, #2563eb, #1d4ed8)",
+            ? 'linear-gradient(120deg, #ef4444, #b91c1c)'
+            : 'linear-gradient(120deg, #2563eb, #1d4ed8)',
         boxShadow: recording
-            ? "0 18px 32px rgba(239, 68, 68, 0.35)"
-            : "0 18px 32px rgba(37, 99, 235, 0.35)",
+            ? '0 18px 32px rgba(239, 68, 68, 0.35)'
+            : '0 18px 32px rgba(37, 99, 235, 0.35)',
     };
     const loginButtonStyle = {
         ...buttonBaseStyle,
-        background: "linear-gradient(120deg, #14b8a6, #0d9488)",
+        background: 'linear-gradient(120deg, #14b8a6, #0d9488)',
     };
     const logoutButtonStyle = {
         ...buttonBaseStyle,
-        background: "#ffffff",
-        border: "1px solid #e5e7eb",
-        color: "#1f2933",
-        boxShadow: "0 10px 18px rgba(15, 23, 42, 0.12)",
+        background: '#ffffff',
+        border: '1px solid #e5e7eb',
+        color: '#1f2933',
+        boxShadow: '0 10px 18px rgba(15, 23, 42, 0.12)',
     };
     const shareCardStyle = {
-        width: "100%",
-        background: "#ffffff",
+        width: '100%',
+        background: '#ffffff',
         borderRadius: 16,
-        padding: "14px 16px",
-        border: "1px solid #e5e7eb",
-        boxShadow: "0 20px 36px rgba(15, 23, 42, 0.2)",
-        fontFamily: "ui-sans-serif, system-ui, -apple-system",
+        padding: '14px 16px',
+        border: '1px solid #e5e7eb',
+        boxShadow: '0 20px 36px rgba(15, 23, 42, 0.2)',
+        fontFamily: 'ui-sans-serif, system-ui, -apple-system',
     };
     const shareLinkStyle = {
         marginTop: 6,
-        padding: "8px 10px",
+        padding: '8px 10px',
         borderRadius: 10,
-        background: "#f3f4f6",
+        background: '#f3f4f6',
         fontSize: 12,
-        color: "#374151",
-        wordBreak: "break-all",
-        fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
+        color: '#374151',
+        wordBreak: 'break-all',
+        fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace',
     };
     const copyButtonStyle = {
         ...buttonBaseStyle,
-        padding: "8px 16px",
+        padding: '8px 16px',
         fontSize: 13,
-        background: "#111827",
-        boxShadow: "none",
+        background: '#111827',
+        boxShadow: 'none',
         minWidth: 110,
     };
     const hideButtonStyle = {
-        border: "none",
-        background: "transparent",
-        color: "#6b7280",
-        cursor: "pointer",
+        border: 'none',
+        background: 'transparent',
+        color: '#6b7280',
+        cursor: 'pointer',
         fontWeight: 700,
-        padding: "6px 8px",
+        padding: '6px 8px',
         borderRadius: 8,
         fontSize: 12,
     };
     const modalOverlayStyle = {
-        position: "fixed",
+        position: 'fixed',
         inset: 0,
-        background: "rgba(15, 23, 42, 0.38)",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
+        background: 'rgba(15, 23, 42, 0.38)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
         zIndex: 2147483648,
         padding: 16,
     };
     const modalStyle = {
-        width: "100%",
+        width: '100%',
         maxWidth: 360,
-        background: "#ffffff",
+        background: '#ffffff',
         borderRadius: 12,
-        boxShadow: "0 20px 40px rgba(15, 23, 42, 0.25)",
-        padding: "24px 24px 20px",
-        fontFamily: "ui-sans-serif, system-ui, -apple-system",
+        boxShadow: '0 20px 40px rgba(15, 23, 42, 0.25)',
+        padding: '24px 24px 20px',
+        fontFamily: 'ui-sans-serif, system-ui, -apple-system',
     };
     const hiddenNoticeStyle = {
-        position: "fixed",
+        position: 'fixed',
         right: 16,
         bottom: 16,
         zIndex: 2147483647,
         maxWidth: 320,
-        background: "#111827",
-        color: "#e5e7eb",
+        background: '#111827',
+        color: '#e5e7eb',
         borderRadius: 12,
-        padding: "12px 14px",
-        boxShadow: "0 16px 30px rgba(0, 0, 0, 0.3)",
-        fontFamily: "ui-sans-serif, system-ui, -apple-system",
+        padding: '12px 14px',
+        boxShadow: '0 16px 30px rgba(0, 0, 0, 0.3)',
+        fontFamily: 'ui-sans-serif, system-ui, -apple-system',
         fontSize: 13,
         lineHeight: 1.4,
     };
     const hiddenNoticeCloseStyle = {
-        border: "none",
-        background: "transparent",
-        color: "#e5e7eb",
-        cursor: "pointer",
+        border: 'none',
+        background: 'transparent',
+        color: '#e5e7eb',
+        cursor: 'pointer',
         fontWeight: 700,
         padding: 0,
         lineHeight: 1,
         fontSize: 14,
     };
     const labelStyle = {
-        display: "block",
+        display: 'block',
         fontSize: 13,
         fontWeight: 600,
-        color: "#111827",
+        color: '#111827',
         marginBottom: 6,
     };
     const inputStyle = {
-        width: "100%",
-        padding: "10px 12px",
+        width: '100%',
+        padding: '10px 12px',
         borderRadius: 6,
-        border: "1px solid #d1d5db",
+        border: '1px solid #d1d5db',
         fontSize: 14,
         marginBottom: 14,
-        boxSizing: "border-box",
-        fontFamily: "inherit",
+        boxSizing: 'border-box',
+        fontFamily: 'inherit',
     };
     const hideControls = () => {
         setControlsHidden(true);
@@ -1143,119 +2121,149 @@ export function ReproProvider({ appId, children, button, masking, apiBase }) {
             return;
         const text = shareUrl;
         try {
-            if (typeof navigator !== "undefined" && navigator.clipboard?.writeText) {
+            if (typeof navigator !== 'undefined' && navigator.clipboard?.writeText) {
                 await navigator.clipboard.writeText(text);
             }
-            else if (typeof document !== "undefined") {
-                const helper = document.createElement("textarea");
+            else if (typeof document !== 'undefined') {
+                const helper = document.createElement('textarea');
                 helper.value = text;
-                helper.style.position = "fixed";
-                helper.style.opacity = "0";
-                helper.style.pointerEvents = "none";
+                helper.style.position = 'fixed';
+                helper.style.opacity = '0';
+                helper.style.pointerEvents = 'none';
                 document.body.appendChild(helper);
                 helper.focus();
                 helper.select();
-                document.execCommand("copy");
+                document.execCommand('copy');
                 document.body.removeChild(helper);
             }
             else {
-                throw new Error("clipboard unavailable");
+                throw new Error('clipboard unavailable');
             }
-            setCopyStatusWithTimeout("copied");
+            setCopyStatusWithTimeout('copied');
         }
         catch {
-            setCopyStatusWithTimeout("error");
+            setCopyStatusWithTimeout('error');
         }
     }
-    return (_jsxs(_Fragment, { children: [children, !controlsHidden && (shareUrl || ready) && (_jsxs("div", { "data-repro-internal": "1", style: floatingContainerStyle, children: [_jsx("div", { "data-repro-internal": "1", style: { display: "flex", alignItems: "center", justifyContent: "flex-end", width: "100%", gap: 8 }, "aria-label": "Recording controls header", children: _jsx("button", { type: "button", "data-repro-internal": "1", onClick: hideControls, style: hideButtonStyle, "aria-label": "Hide recording controls", children: "Hide" }) }), shareUrl && (_jsxs("div", { "data-repro-internal": "1", style: shareCardStyle, children: [_jsxs("div", { style: {
-                                    display: "flex",
-                                    alignItems: "center",
-                                    justifyContent: "space-between",
+    useEffect(() => {
+        if (!ready || !isLiveMode) {
+            return;
+        }
+        if (recordingRef.current) {
+            return;
+        }
+        void start();
+    }, [isLiveMode, ready]);
+    useEffect(() => {
+        if (!isLiveMode) {
+            return;
+        }
+        return () => {
+            if (recordingRef.current) {
+                void stop();
+            }
+        };
+    }, [isLiveMode]);
+    return (_jsxs(_Fragment, { children: [children, !isLiveMode && !controlsHidden && (shareUrl || ready) && (_jsxs("div", { "data-repro-internal": "1", style: floatingContainerStyle, children: [_jsx("div", { "data-repro-internal": "1", style: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'flex-end',
+                            width: '100%',
+                            gap: 8,
+                        }, "aria-label": "Recording controls header", children: _jsx("button", { type: "button", "data-repro-internal": "1", onClick: hideControls, style: hideButtonStyle, "aria-label": "Hide recording controls", children: "Hide" }) }), shareUrl && (_jsxs("div", { "data-repro-internal": "1", style: shareCardStyle, children: [_jsxs("div", { style: {
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    justifyContent: 'space-between',
                                     gap: 12,
-                                    width: "100%",
-                                }, children: [_jsx("div", { style: { fontSize: 12, fontWeight: 600, color: "#0f172a" }, children: "Latest capture ready to share" }), _jsx("button", { type: "button", "data-repro-internal": "1", onClick: () => clearShareInfo(), style: {
-                                            border: "none",
-                                            background: "transparent",
-                                            color: "#9ca3af",
-                                            cursor: "pointer",
+                                    width: '100%',
+                                }, children: [_jsx("div", { style: { fontSize: 12, fontWeight: 600, color: '#0f172a' }, children: "Latest capture ready to share" }), _jsx("button", { type: "button", "data-repro-internal": "1", onClick: () => clearShareInfo(), style: {
+                                            border: 'none',
+                                            background: 'transparent',
+                                            color: '#9ca3af',
+                                            cursor: 'pointer',
                                             padding: 4,
                                             lineHeight: 1,
                                             fontWeight: 700,
                                             borderRadius: 999,
                                             width: 24,
                                             height: 24,
-                                            display: "flex",
-                                            alignItems: "center",
-                                            justifyContent: "center",
+                                            display: 'flex',
+                                            alignItems: 'center',
+                                            justifyContent: 'center',
                                         }, "aria-label": "Close share link", children: "\u00D7" })] }), _jsx("div", { style: shareLinkStyle, title: shareUrl, children: shareUrl }), _jsxs("div", { style: {
                                     marginTop: 10,
-                                    display: "flex",
-                                    alignItems: "center",
-                                    justifyContent: "space-between",
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    justifyContent: 'space-between',
                                     gap: 12,
-                                    width: "100%",
+                                    width: '100%',
                                 }, children: [_jsx("span", { style: {
                                             fontSize: 12,
                                             minWidth: 100,
-                                            color: copyStatus === "copied"
-                                                ? "#059669"
-                                                : copyStatus === "error"
-                                                    ? "#b91c1c"
-                                                    : "#6b7280",
-                                            visibility: copyStatus === "idle" ? "hidden" : "visible",
-                                            transition: "color 0.2s ease",
-                                        }, children: copyStatus === "copied"
-                                            ? "Link copied!"
-                                            : copyStatus === "error"
-                                                ? "Unable to copy"
-                                                : "placeholder" }), _jsx("button", { type: "button", "data-repro-internal": "1", onClick: () => void copyShareLink(), style: copyButtonStyle, children: copyStatus === "copied" ? "Copied" : "Copy link" })] })] })), ready && auth && (_jsxs("div", { "data-repro-internal": "1", style: buttonRowStyle, children: [_jsxs("button", { "data-repro-internal": "1", onClick: () => (recording ? stop() : start()), style: recordButtonStyle, type: "button", children: [_jsx("span", { "aria-hidden": "true", style: {
+                                            color: copyStatus === 'copied'
+                                                ? '#059669'
+                                                : copyStatus === 'error'
+                                                    ? '#b91c1c'
+                                                    : '#6b7280',
+                                            visibility: copyStatus === 'idle' ? 'hidden' : 'visible',
+                                            transition: 'color 0.2s ease',
+                                        }, children: copyStatus === 'copied'
+                                            ? 'Link copied!'
+                                            : copyStatus === 'error'
+                                                ? 'Unable to copy'
+                                                : 'placeholder' }), _jsx("button", { type: "button", "data-repro-internal": "1", onClick: () => void copyShareLink(), style: copyButtonStyle, children: copyStatus === 'copied' ? 'Copied' : 'Copy link' })] })] })), ready && auth && (_jsxs("div", { "data-repro-internal": "1", style: buttonRowStyle, children: [_jsxs("button", { "data-repro-internal": "1", onClick: () => (recording ? stop() : start()), style: recordButtonStyle, type: "button", children: [_jsx("span", { "aria-hidden": "true", style: {
                                             width: 10,
                                             height: 10,
-                                            borderRadius: "999px",
-                                            background: recording ? "#fecaca" : "#bbf7d0",
+                                            borderRadius: '999px',
+                                            background: recording ? '#fecaca' : '#bbf7d0',
                                             boxShadow: recording
-                                                ? "0 0 12px rgba(239, 68, 68, 0.7)"
-                                                : "0 0 10px rgba(16, 185, 129, 0.6)",
+                                                ? '0 0 12px rgba(239, 68, 68, 0.7)'
+                                                : '0 0 10px rgba(16, 185, 129, 0.6)',
                                         } }), btnLabel] }), _jsx("button", { "data-repro-internal": "1", onClick: () => void logout(), style: logoutButtonStyle, type: "button", children: "Log out" })] })), ready && !auth && (_jsx("div", { "data-repro-internal": "1", style: buttonRowStyle, children: _jsx("button", { "data-repro-internal": "1", onClick: () => {
                                 setLoginError(null);
                                 setShowLogin(true);
-                            }, style: loginButtonStyle, type: "button", children: loginLabel }) }))] })), controlsHidden && showHiddenNotice && (_jsxs("div", { "data-repro-internal": "1", style: hiddenNoticeStyle, children: [_jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12 }, children: [_jsx("div", { style: { fontWeight: 700 }, children: "Recording controls hidden" }), _jsx("button", { type: "button", "data-repro-internal": "1", style: hiddenNoticeCloseStyle, "aria-label": "Close hidden controls message", onClick: () => setShowHiddenNotice(false), children: "\u00D7" })] }), _jsx("div", { children: "Press Ctrl/Cmd + R + O to show them again." })] })), showLogin && (_jsx("div", { "data-repro-internal": "1", style: modalOverlayStyle, onClick: (evt) => {
+                            }, style: loginButtonStyle, type: "button", children: loginLabel }) }))] })), !isLiveMode && controlsHidden && showHiddenNotice && (_jsxs("div", { "data-repro-internal": "1", style: hiddenNoticeStyle, children: [_jsxs("div", { style: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'space-between',
+                            gap: 12,
+                        }, children: [_jsx("div", { style: { fontWeight: 700 }, children: "Recording controls hidden" }), _jsx("button", { type: "button", "data-repro-internal": "1", style: hiddenNoticeCloseStyle, "aria-label": "Close hidden controls message", onClick: () => setShowHiddenNotice(false), children: "\u00D7" })] }), _jsx("div", { children: "Press Ctrl/Cmd + R + O to show them again." })] })), !isLiveMode && showLogin && (_jsx("div", { "data-repro-internal": "1", style: modalOverlayStyle, onClick: (evt) => {
                     if (evt.target === evt.currentTarget && !isLoggingIn) {
                         setShowLogin(false);
                     }
-                }, children: _jsxs("div", { "data-repro-internal": "1", style: modalStyle, children: [_jsx("h3", { style: { margin: 0, marginBottom: 12, fontSize: 18, color: "#0f172a" }, children: "Authenticate to start recording" }), _jsxs("form", { onSubmit: handleLoginSubmit, children: [_jsx("label", { style: labelStyle, htmlFor: "repro-login-email", children: "Email" }), _jsx("input", { id: "repro-login-email", "data-repro-internal": "1", style: inputStyle, type: "email", value: loginEmail, placeholder: "user@example.com", onChange: (evt) => {
+                }, children: _jsxs("div", { "data-repro-internal": "1", style: modalStyle, children: [_jsx("h3", { style: { margin: 0, marginBottom: 12, fontSize: 18, color: '#0f172a' }, children: "Authenticate to start recording" }), _jsxs("form", { onSubmit: handleLoginSubmit, children: [_jsx("label", { style: labelStyle, htmlFor: "repro-login-email", children: "Email" }), _jsx("input", { id: "repro-login-email", "data-repro-internal": "1", style: inputStyle, type: "email", value: loginEmail, placeholder: "user@example.com", onChange: (evt) => {
                                         setLoginEmail(evt.target.value);
                                         setLoginError(null);
                                     }, autoComplete: "email", required: true }), _jsx("label", { style: labelStyle, htmlFor: "repro-login-password", children: "Password" }), _jsx("input", { id: "repro-login-password", "data-repro-internal": "1", style: inputStyle, type: "password", value: loginPassword, placeholder: "Enter your workspace password", onChange: (evt) => {
                                         setLoginPassword(evt.target.value);
                                         setLoginError(null);
                                     }, autoComplete: "current-password", required: true }), loginError && (_jsx("div", { style: {
-                                        color: "#b91c1c",
-                                        background: "#fee2e2",
+                                        color: '#b91c1c',
+                                        background: '#fee2e2',
                                         borderRadius: 8,
-                                        padding: "8px 12px",
+                                        padding: '8px 12px',
                                         fontSize: 13,
                                         marginBottom: 12,
-                                    }, children: loginError })), _jsxs("div", { style: { display: "flex", justifyContent: "flex-end", gap: 12 }, children: [_jsx("button", { type: "button", "data-repro-internal": "1", onClick: () => {
+                                    }, children: loginError })), _jsxs("div", { style: { display: 'flex', justifyContent: 'flex-end', gap: 12 }, children: [_jsx("button", { type: "button", "data-repro-internal": "1", onClick: () => {
                                                 if (!isLoggingIn)
                                                     setShowLogin(false);
                                             }, style: {
-                                                padding: "10px 16px",
+                                                padding: '10px 16px',
                                                 borderRadius: 6,
-                                                border: "1px solid transparent",
-                                                background: "transparent",
-                                                color: "#4b5563",
+                                                border: '1px solid transparent',
+                                                background: 'transparent',
+                                                color: '#4b5563',
                                                 fontWeight: 600,
-                                                cursor: isLoggingIn ? "not-allowed" : "pointer",
+                                                cursor: isLoggingIn ? 'not-allowed' : 'pointer',
                                             }, disabled: isLoggingIn, children: "Cancel" }), _jsx("button", { type: "submit", "data-repro-internal": "1", style: {
-                                                padding: "10px 16px",
+                                                padding: '10px 16px',
                                                 borderRadius: 6,
-                                                border: "none",
-                                                background: disableLogin ? "#d1d5db" : "#2563eb",
-                                                color: disableLogin ? "#6b7280" : "#ffffff",
+                                                border: 'none',
+                                                background: disableLogin ? '#d1d5db' : '#2563eb',
+                                                color: disableLogin ? '#6b7280' : '#ffffff',
                                                 fontWeight: 700,
-                                                cursor: disableLogin ? "not-allowed" : "pointer",
-                                                transition: "background 0.2s ease",
-                                            }, disabled: disableLogin, children: isLoggingIn ? "Signing in..." : "Sign in" })] })] })] }) }))] }));
+                                                cursor: disableLogin ? 'not-allowed' : 'pointer',
+                                                transition: 'background 0.2s ease',
+                                            }, disabled: disableLogin, children: isLoggingIn ? 'Signing in...' : 'Sign in' })] })] })] }) }))] }));
 }
 export default ReproProvider;