@reproapp/react-sdk 0.0.1

package/dist/index.js

@@ -0,0 +1,1261 @@
+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 { gzip } from 'pako';
+// config
+const MAX_BYTES = 900 * 1024; // 900 KB target per POST (tune)
+const SESSION_MAX_MS = 60 * 1000; // cap each session at 1 minute
+// estimate JSON bytes
+function jsonBytes(obj) {
+    try {
+        return new TextEncoder().encode(JSON.stringify(obj)).length;
+    }
+    catch {
+        return Infinity;
+    }
+}
+// split [events] into <= MAX_BYTES chunks by bisection
+function splitEventsBySize(events, mkEnvelope) {
+    const out = [];
+    const stack = [events.slice(0)]; // LIFO for fewer allocs
+    while (stack.length) {
+        const cur = stack.pop();
+        const env = mkEnvelope(cur);
+        if (jsonBytes(env) <= MAX_BYTES || cur.length <= 1) {
+            out.push(cur);
+            continue;
+        }
+        const mid = Math.floor(cur.length / 2);
+        stack.push(cur.slice(0, mid));
+        stack.push(cur.slice(mid));
+    }
+    return out;
+}
+// ---- small helpers ----
+const now = () => Date.now();
+const newAID = () => `A_${now()}_${Math.random().toString(36).slice(2, 6)}`;
+// server time normalization
+const offsetRef = { current: 0 }; // ms to add to client time
+const nowServer = () => now() + (offsetRef.current || 0);
+async function getJSON(url, headers) {
+    const r = await fetch(url, headers ? { headers } : undefined);
+    if (!r.ok)
+        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://oozy-loreta-gully.ngrok-free.dev";
+let __reproCtx = null;
+/** Manually attach Repro to any Axios instance (no recursion). */
+export function attachAxios(axiosInstance) {
+    if (!axiosInstance || axiosInstance.__reproAttached)
+        return;
+    axiosInstance.__reproAttached = true;
+    axiosInstance.interceptors.request.use((config) => {
+        const ctx = __reproCtx;
+        if (!ctx)
+            return config;
+        const sid = ctx.getSid();
+        const aid = ctx.getAid();
+        const url = `${config.baseURL || ""}${config.url || ""}`;
+        const isInternal = url.startsWith(ctx.base);
+        const isSdkInternal = !!config.headers?.[INTERNAL_HEADER];
+        if (!config.headers)
+            config.headers = {};
+        const setHeader = (key, value) => {
+            if (!config.headers)
+                return;
+            if (typeof config.headers.set === "function") {
+                config.headers.set(key, value);
+            }
+            else {
+                config.headers[key] = value;
+            }
+        };
+        if (!isSdkInternal) {
+            const requestStart = nowServer();
+            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);
+            }
+            const existingAuth = config.headers?.Authorization ??
+                config.headers?.authorization;
+            if (userToken && !existingAuth) {
+                setHeader("Authorization", `Bearer ${userToken}`);
+            }
+        }
+        if (sid && aid && !isInternal && !isSdkInternal) {
+            setHeader("X-Bug-Session-Id", sid);
+            setHeader("X-Bug-Action-Id", aid);
+        }
+        return config;
+    });
+    axiosInstance.interceptors.response.use(async (resp) => {
+        const ctx = __reproCtx;
+        if (!ctx)
+            return resp;
+        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);
+        }
+        return resp;
+    }, (err) => {
+        const ctx = __reproCtx;
+        if (ctx) {
+            const status = err?.response?.status;
+            const url = `${err?.config?.baseURL || ""}${err?.config?.url || ""}`;
+            if (status === 401 && url.startsWith(ctx.base)) {
+                ctx.onUnauthorized?.();
+            }
+        }
+        return Promise.reject(err);
+    });
+}
+export function ReproProvider({ appId, children, button, masking }) {
+    const base = API_BASE;
+    const storageKey = `repro-auth-${appId}`;
+    const initialAuth = (() => {
+        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")
+                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
+                ? parsed.token.trim()
+                : null;
+            if (!email || !token)
+                return null;
+            return {
+                email,
+                password,
+                token,
+                data: parsed.data,
+            };
+        }
+        catch {
+            return null;
+        }
+    })();
+    const initialAuthRef = useRef(initialAuth);
+    // ---- refs & state (hooks MUST be inside component) ----
+    const sdkTokenRef = useRef(null);
+    const sessionIdRef = useRef(null);
+    const stopRecRef = useRef();
+    const rrwebEventsRef = useRef([]);
+    const currentAidRef = useRef(null);
+    const aidExpiryTimerRef = useRef(null);
+    const sessionExpiryTimerRef = useRef(null);
+    const origFetchRef = useRef();
+    const hasReqMarkedRef = useRef(new Set());
+    const lastActionLabelRef = useRef(null);
+    const actionMeta = useRef(new Map());
+    const nextSeqRef = useRef(1); // rrweb chunk counter
+    const isFlushingRef = useRef(false);
+    const backoffRef = useRef(0); // ms
+    const isStoppingRef = useRef(false);
+    // NEW: track installed click handler + dedupe recent clicks
+    const clickHandlerRef = useRef(null);
+    const lastClickRef = useRef(null);
+    const [ready, setReady] = useState(false);
+    const [recording, setRecording] = useState(false);
+    const recordingRef = useRef(false);
+    const [auth, setAuth] = useState(initialAuth);
+    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 [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 copyStatusTimerRef = useRef(null);
+    const logoutInFlightRef = useRef(false);
+    const authCheckInFlightRef = useRef(false);
+    const lastAuthCheckTokenRef = useRef(null);
+    const [controlsHidden, setControlsHidden] = useState(false);
+    const [showHiddenNotice, setShowHiddenNotice] = useState(true);
+    const shortcutKeysRef = useRef(new Set());
+    const clearCopyStatusTimer = () => {
+        if (copyStatusTimerRef.current == null)
+            return;
+        if (typeof window !== "undefined") {
+            window.clearTimeout(copyStatusTimerRef.current);
+        }
+        else {
+            clearTimeout(copyStatusTimerRef.current);
+        }
+        copyStatusTimerRef.current = null;
+    };
+    const resetCopyFeedback = () => {
+        clearCopyStatusTimer();
+        setCopyStatus("idle");
+    };
+    const clearShareInfo = () => {
+        setShareUrl(null);
+        resetCopyFeedback();
+    };
+    const setCopyStatusWithTimeout = (status) => {
+        clearCopyStatusTimer();
+        setCopyStatus(status);
+        if (status === "idle")
+            return;
+        if (typeof window !== "undefined") {
+            copyStatusTimerRef.current = window.setTimeout(() => {
+                setCopyStatus("idle");
+                copyStatusTimerRef.current = null;
+            }, 2200);
+        }
+    };
+    const clearSessionExpiryTimer = () => {
+        if (sessionExpiryTimerRef.current == null)
+            return;
+        if (typeof window !== "undefined") {
+            window.clearTimeout(sessionExpiryTimerRef.current);
+        }
+        else {
+            clearTimeout(sessionExpiryTimerRef.current);
+        }
+        sessionExpiryTimerRef.current = null;
+    };
+    const addTenantHeader = (headers) => ({
+        ...headers,
+        [NGROK_SKIP_HEADER]: NGROK_SKIP_VALUE,
+    });
+    const setTenantOnHeaders = (headers, isInternal) => {
+        if (isInternal) {
+            headers.set(NGROK_SKIP_HEADER, NGROK_SKIP_VALUE);
+        }
+    };
+    useEffect(() => {
+        __reproCtx = {
+            base,
+            getSid: () => sessionIdRef.current,
+            getAid: () => currentAidRef.current,
+            getToken: () => sdkTokenRef.current,
+            getUserToken: () => userTokenRef.current,
+            getUserPassword: () => userPasswordRef.current,
+            getFetch: () => (origFetchRef.current ?? window.fetch.bind(window)),
+            hasReqMarked: hasReqMarkedRef.current,
+            onUnauthorized: () => handleUnauthorized(),
+        };
+        return () => {
+            __reproCtx = null;
+        };
+    }, [base]);
+    useEffect(() => {
+        const storedToken = initialAuthRef.current?.token ?? null;
+        if (!storedToken) {
+            lastAuthCheckTokenRef.current = null;
+            return;
+        }
+        if (!ready)
+            return;
+        const sdkToken = sdkTokenRef.current;
+        if (!sdkToken)
+            return;
+        if (auth?.token !== storedToken) {
+            return;
+        }
+        if (authCheckInFlightRef.current ||
+            lastAuthCheckTokenRef.current === storedToken) {
+            return;
+        }
+        let cancelled = false;
+        authCheckInFlightRef.current = true;
+        lastAuthCheckTokenRef.current = storedToken;
+        (async () => {
+            try {
+                const fetcher = origFetchRef.current ?? window.fetch.bind(window);
+                const resp = await fetcher(`${base}/v1/apps/${appId}/users/me`, {
+                    method: "GET",
+                    headers: addTenantHeader({
+                        Accept: "application/json",
+                        Authorization: `Bearer ${storedToken}`,
+                        "x-sdk-token": sdkToken,
+                        [INTERNAL_HEADER]: "1",
+                    }),
+                });
+                if (cancelled)
+                    return;
+                if (resp.ok)
+                    return;
+                handleUnauthorizedStatus(resp.status);
+            }
+            catch {
+                if (!cancelled) {
+                    // Avoid logging out on transient validation failures.
+                }
+            }
+            finally {
+                authCheckInFlightRef.current = false;
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [auth, appId, base, ready]);
+    useEffect(() => {
+        userPasswordRef.current = auth?.password ?? null;
+        userTokenRef.current = auth?.token ?? null;
+        if (typeof window !== "undefined") {
+            try {
+                if (auth) {
+                    window.localStorage.setItem(storageKey, JSON.stringify(auth));
+                }
+                else {
+                    window.localStorage.removeItem(storageKey);
+                }
+            }
+            catch {
+                /* ignore storage failures */
+            }
+        }
+    }, [auth, storageKey]);
+    const requireAuth = () => {
+        if (!auth) {
+            setShowLogin(true);
+            return false;
+        }
+        return true;
+    };
+    async function login(email, password) {
+        setIsLoggingIn(true);
+        setLoginError(null);
+        try {
+            const resp = await fetch(`${base}/v1/apps/${appId}/users/login`, {
+                method: "POST",
+                headers: addTenantHeader({
+                    Accept: "application/json",
+                    "Content-Type": "application/json",
+                    [INTERNAL_HEADER]: "1",
+                }),
+                body: JSON.stringify({ email, password }),
+            });
+            if (!resp.ok) {
+                throw new Error(`Login failed (${resp.status})`);
+            }
+            const data = await resp.json();
+            const accessTokenFromUser = typeof data?.user?.accessToken === "string"
+                ? data.user.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.");
+            }
+            setAuth({ email, password, token: accessToken, data });
+            setLoginPassword("");
+            setShowLogin(false);
+        }
+        catch (err) {
+            setLoginError(err?.message || "Unable to login");
+        }
+        finally {
+            setIsLoggingIn(false);
+        }
+    }
+    function handleLoginSubmit(evt) {
+        evt.preventDefault();
+        if (disableLogin)
+            return;
+        login(loginEmail.trim(), loginPassword.trim());
+    }
+    async function logout(options) {
+        if (logoutInFlightRef.current)
+            return;
+        logoutInFlightRef.current = true;
+        try {
+            if (recording && !isStoppingRef.current) {
+                try {
+                    await stop();
+                }
+                catch {
+                    /* ignore */
+                }
+            }
+            setAuth(null);
+            setLoginPassword("");
+            clearShareInfo();
+            setShowLogin(options?.showLogin ?? false);
+        }
+        finally {
+            logoutInFlightRef.current = false;
+        }
+    }
+    function handleUnauthorized() {
+        void logout({ showLogin: true });
+    }
+    const handleUnauthorizedStatus = (status) => {
+        if (status === 401) {
+            handleUnauthorized();
+            return true;
+        }
+        return false;
+    };
+    useEffect(() => {
+        if (!showLogin) {
+            setLoginError(null);
+        }
+    }, [showLogin]);
+    useEffect(() => {
+        return () => {
+            clearCopyStatusTimer();
+            clearSessionExpiryTimer();
+        };
+    }, []);
+    useEffect(() => {
+        const pressed = shortcutKeysRef.current;
+        if (typeof window === "undefined")
+            return;
+        const handleKeyDown = (evt) => {
+            const hasMod = evt.ctrlKey || evt.metaKey;
+            if (!hasMod) {
+                pressed.clear();
+                return;
+            }
+            const key = (evt.key || "").toLowerCase();
+            if (key === "r" || key === "o") {
+                pressed.add(key);
+                const combo = pressed.has("r") && pressed.has("o");
+                if (combo) {
+                    if (controlsHidden) {
+                        evt.preventDefault();
+                    }
+                    setControlsHidden(false);
+                    setShowHiddenNotice(false);
+                    pressed.clear();
+                    return;
+                }
+                if (controlsHidden) {
+                    evt.preventDefault();
+                }
+                return;
+            }
+            if (key === "control" || key === "meta") {
+                pressed.clear();
+                return;
+            }
+            pressed.clear();
+        };
+        const handleKeyUp = (evt) => {
+            const key = (evt.key || "").toLowerCase();
+            if (key === "r" || key === "o") {
+                pressed.delete(key);
+            }
+            else if (key === "control" || key === "meta") {
+                pressed.clear();
+            }
+        };
+        window.addEventListener("keydown", handleKeyDown, true);
+        window.addEventListener("keyup", handleKeyUp, true);
+        return () => {
+            window.removeEventListener("keydown", handleKeyDown, true);
+            window.removeEventListener("keyup", handleKeyUp, true);
+        };
+    }, [controlsHidden]);
+    // ---- bootstrap once ----
+    useEffect(() => {
+        let mounted = true;
+        (async () => {
+            try {
+                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);
+                }
+                else {
+                    setReady(false);
+                }
+            }
+            catch {
+                setReady(false);
+            }
+        })();
+        return () => {
+            mounted = false;
+        };
+    }, [appId, base]);
+    const rrBufferRef = useRef([]);
+    const rrFlushTimerRef = useRef(null);
+    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 }) {
+        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",
+                headers: addTenantHeader({
+                    "Content-Type": "application/json",
+                    "Content-Encoding": "gzip",
+                    "x-sdk-token": token,
+                    ...(userTokenRef.current ? { Authorization: `Bearer ${userTokenRef.current}` } : {}),
+                    [INTERNAL_HEADER]: "1",
+                }),
+                body: gz,
+            });
+            if (handleUnauthorizedStatus(r.status))
+                return 'fail';
+            if (r.status === 413)
+                return 'too_large';
+            if (!r.ok)
+                return 'fail';
+            return 'ok';
+        }
+        catch {
+            return 'fail';
+        }
+    }
+    async function flushRrwebBuffer(reason) {
+        if (isFlushingRef.current)
+            return;
+        const sid = sessionIdRef.current;
+        const token = sdkTokenRef.current;
+        const baseUrl = API_BASE;
+        if (!sid || !token)
+            return;
+        if (!rrBufferRef.current.length)
+            return;
+        isFlushingRef.current = true;
+        try {
+            if (backoffRef.current > 0) {
+                await new Promise(r => setTimeout(r, backoffRef.current));
+            }
+            // COPY buffer; do not mutate until we know what succeeded
+            const fullSlice = rrBufferRef.current.slice(0);
+            const seq = nextSeqRef.current; // do NOT increment yet
+            const mkEnvelope = (slice) => {
+                const tFirst = slice[0]?.timestamp ?? nowServer();
+                const tLast = slice[slice.length - 1]?.timestamp ?? tFirst;
+                return { type: 'rrweb', seq, tFirst, tLast, events: slice };
+            };
+            // Pre-split by size into <= MAX_BYTES pieces (same seq for first, then seq+1, …)
+            const pieces = splitEventsBySize(fullSlice, mkEnvelope);
+            // Send each piece in order, incrementing seq only on success per piece
+            let sentCount = 0;
+            for (let i = 0; i < pieces.length; i++) {
+                const piece = pieces[i];
+                const pieceSeq = seq + i; // stable seq per piece
+                const env = mkEnvelope(piece);
+                const jsonSize = jsonBytes(env);
+                let res;
+                if (jsonSize > 64 * 1024) {
+                    res = await sendChunkGzip({ baseUrl, sid, token, envelope: env, seq: pieceSeq });
+                }
+                else {
+                    res = await sendChunk({ baseUrl, sid, token, envelope: env, seq: pieceSeq });
+                }
+                if (res === 'ok') {
+                    sentCount += piece.length;
+                    nextSeqRef.current = pieceSeq + 1; // advance to next expected seq
+                    backoffRef.current = 0;
+                    continue;
+                }
+                if (res === 'too_large' && piece.length > 1) {
+                    // If a piece is STILL too large after pre-split, split it again and retry
+                    const more = splitEventsBySize(piece, mkEnvelope);
+                    // splice into 'pieces' at current position
+                    pieces.splice(i, 1, ...more);
+                    i -= 1; // reprocess at same index
+                    continue;
+                }
+                // failure: stop; keep remaining events in buffer for retry
+                backoffRef.current = Math.min(4000, (backoffRef.current || 250) * 2);
+                break;
+            }
+            // success for `sentCount` events → drop them from buffer
+            if (sentCount > 0) {
+                rrBufferRef.current.splice(0, sentCount);
+            }
+        }
+        finally {
+            isFlushingRef.current = false;
+        }
+    }
+    async function sendChunk({ baseUrl, sid, token, envelope, seq }) {
+        try {
+            const r = await (origFetchRef.current ?? window.fetch)(`${baseUrl}/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({ ...envelope, seq }), // ensure seq matches piece
+            });
+            if (handleUnauthorizedStatus(r.status))
+                return 'fail';
+            if (r.status === 413)
+                return 'too_large';
+            if (!r.ok)
+                return 'fail';
+            return 'ok';
+        }
+        catch {
+            return 'fail';
+        }
+    }
+    /**
+     * Auto-attach to window.axios if present.
+     * If a team uses a custom Axios instance, they can call exported attachAxios(instance).
+     */
+    function attachAxiosIfPresent() {
+        const ax = window.axios;
+        if (!ax || ax.__reproAttached)
+            return;
+        ax.__reproAttached = true;
+        ax.interceptors.request.use((config) => {
+            const sid = sessionIdRef.current;
+            const aid = currentAidRef.current;
+            const url = `${config.baseURL || ""}${config.url || ""}`;
+            const isInternal = url.startsWith(base);
+            const isSdkInternal = config.headers?.[INTERNAL_HEADER] != null;
+            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;
+            }
+            return config;
+        });
+        ax.interceptors.response.use(async (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(() => { });
+            }
+            return resp;
+        }, (err) => 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}`;
+    }
+    // ---- START recording ----
+    async function start() {
+        if (!sdkTokenRef.current || recordingRef.current)
+            return;
+        // 1) start session
+        if (!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
+        rrBufferRef.current = [];
+        if (rrFlushTimerRef.current)
+            window.clearInterval(rrFlushTimerRef.current);
+        rrFlushTimerRef.current = window.setInterval(() => {
+            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 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 || {});
+            setTenantOnHeaders(headers, isInternal);
+            if (!isSdkInternal) {
+                const requestStart = nowServer();
+                headers.set(REQUEST_START_HEADER, String(requestStart));
+            }
+            if (sessionIdRef.current && currentAidRef.current && !isInternal && !isSdkInternal) {
+                headers.set("X-Bug-Session-Id", sessionIdRef.current);
+                headers.set("X-Bug-Action-Id", currentAidRef.current);
+            }
+            init.headers = headers;
+            // always call ORIGINAL fetch to avoid recursion
+            const res = await origFetchRef.current(input, init);
+            if (isInternal) {
+                handleUnauthorizedStatus(res.status);
+            }
+            // 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);
+            }
+            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 });
+            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) {
+                return;
+            }
+            lastClickRef.current = { t, label };
+            const aid = newAID();
+            currentAidRef.current = aid;
+            lastActionLabelRef.current = 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(() => { });
+        };
+        clickHandlerRef.current = clickHandler;
+        document.addEventListener("click", clickHandler, { capture: true });
+        // 4) rrweb: keep events in memory; upload on stop()
+        stopRecRef.current = record({
+            emit: (ev) => {
+                rrBufferRef.current.push(ev);
+                // stream out if we reach CHUNK_SIZE
+                if (rrBufferRef.current.length >= CHUNK_SIZE) {
+                    flushRrwebBuffer('size');
+                }
+            },
+            ...(masking ?? {}),
+        });
+        // 5) cleanup registration
+        stop._cleanup = () => {
+            if (clickHandlerRef.current) {
+                document.removeEventListener("click", clickHandlerRef.current, { capture: true });
+                clickHandlerRef.current = null;
+            }
+        };
+        clearSessionExpiryTimer();
+        sessionExpiryTimerRef.current = window.setTimeout(() => {
+            void stop();
+        }, SESSION_MAX_MS);
+        recordingRef.current = true;
+        setRecording(true);
+    }
+    // ---- STOP recording ----
+    async function stop() {
+        clearSessionExpiryTimer();
+        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;
+                    }
+                }
+            }
+            catch {
+                /* ignore in MVP */
+            }
+            finally {
+                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: "" }),
+                });
+                if (handleUnauthorizedStatus(res.status)) {
+                    clearShareInfo();
+                }
+                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();
+                }
+            }
+            catch {
+                clearShareInfo();
+            }
+        }
+        finally {
+            // 3) restore fetch & reset
+            if (origFetchRef.current)
+                window.fetch = origFetchRef.current;
+            sessionIdRef.current = null;
+            currentAidRef.current = null;
+            lastActionLabelRef.current = null;
+            hasReqMarkedRef.current.clear();
+            if (aidExpiryTimerRef.current)
+                window.clearTimeout(aidExpiryTimerRef.current);
+            // also reset dedupe
+            lastClickRef.current = null;
+            setRecording(false);
+            recordingRef.current = false;
+            isStoppingRef.current = false;
+        }
+    }
+    // ---- UI (floating button) ----
+    const btnLabel = recording ? (button?.text ?? "Stop & Report") : (button?.text ?? "Record");
+    const loginLabel = "Authenticate to Record";
+    const floatingContainerBaseStyle = {
+        position: "fixed",
+        zIndex: 2147483647,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "flex-end",
+        gap: 12,
+        width: "100%",
+        maxWidth: 360,
+    };
+    const floatingContainerStyle = {
+        ...floatingContainerBaseStyle,
+        right: 16,
+        bottom: 16,
+    };
+    const buttonRowStyle = {
+        display: "flex",
+        gap: 10,
+        justifyContent: "flex-end",
+        width: "100%",
+    };
+    const buttonBaseStyle = {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 8,
+        padding: "12px 24px",
+        borderRadius: 9999,
+        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",
+        minWidth: 150,
+    };
+    const recordButtonStyle = {
+        ...buttonBaseStyle,
+        background: recording
+            ? "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)",
+    };
+    const loginButtonStyle = {
+        ...buttonBaseStyle,
+        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)",
+    };
+    const shareCardStyle = {
+        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",
+    };
+    const shareLinkStyle = {
+        marginTop: 6,
+        padding: "8px 10px",
+        borderRadius: 10,
+        background: "#f3f4f6",
+        fontSize: 12,
+        color: "#374151",
+        wordBreak: "break-all",
+        fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
+    };
+    const copyButtonStyle = {
+        ...buttonBaseStyle,
+        padding: "8px 16px",
+        fontSize: 13,
+        background: "#111827",
+        boxShadow: "none",
+        minWidth: 110,
+    };
+    const hideButtonStyle = {
+        border: "none",
+        background: "transparent",
+        color: "#6b7280",
+        cursor: "pointer",
+        fontWeight: 700,
+        padding: "6px 8px",
+        borderRadius: 8,
+        fontSize: 12,
+    };
+    const modalOverlayStyle = {
+        position: "fixed",
+        inset: 0,
+        background: "rgba(15, 23, 42, 0.38)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        zIndex: 2147483648,
+        padding: 16,
+    };
+    const modalStyle = {
+        width: "100%",
+        maxWidth: 360,
+        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",
+    };
+    const hiddenNoticeStyle = {
+        position: "fixed",
+        right: 16,
+        bottom: 16,
+        zIndex: 2147483647,
+        maxWidth: 320,
+        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",
+        fontSize: 13,
+        lineHeight: 1.4,
+    };
+    const hiddenNoticeCloseStyle = {
+        border: "none",
+        background: "transparent",
+        color: "#e5e7eb",
+        cursor: "pointer",
+        fontWeight: 700,
+        padding: 0,
+        lineHeight: 1,
+        fontSize: 14,
+    };
+    const labelStyle = {
+        display: "block",
+        fontSize: 13,
+        fontWeight: 600,
+        color: "#111827",
+        marginBottom: 6,
+    };
+    const inputStyle = {
+        width: "100%",
+        padding: "10px 12px",
+        borderRadius: 6,
+        border: "1px solid #d1d5db",
+        fontSize: 14,
+        marginBottom: 14,
+        boxSizing: "border-box",
+        fontFamily: "inherit",
+    };
+    const hideControls = () => {
+        setControlsHidden(true);
+        setShowHiddenNotice(true);
+    };
+    async function copyShareLink() {
+        if (!shareUrl)
+            return;
+        const text = shareUrl;
+        try {
+            if (typeof navigator !== "undefined" && navigator.clipboard?.writeText) {
+                await navigator.clipboard.writeText(text);
+            }
+            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";
+                document.body.appendChild(helper);
+                helper.focus();
+                helper.select();
+                document.execCommand("copy");
+                document.body.removeChild(helper);
+            }
+            else {
+                throw new Error("clipboard unavailable");
+            }
+            setCopyStatusWithTimeout("copied");
+        }
+        catch {
+            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",
+                                    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",
+                                            padding: 4,
+                                            lineHeight: 1,
+                                            fontWeight: 700,
+                                            borderRadius: 999,
+                                            width: 24,
+                                            height: 24,
+                                            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",
+                                    gap: 12,
+                                    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: {
+                                            width: 10,
+                                            height: 10,
+                                            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)",
+                                        } }), 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) => {
+                    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) => {
+                                        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",
+                                        borderRadius: 8,
+                                        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: () => {
+                                                if (!isLoggingIn)
+                                                    setShowLogin(false);
+                                            }, style: {
+                                                padding: "10px 16px",
+                                                borderRadius: 6,
+                                                border: "1px solid transparent",
+                                                background: "transparent",
+                                                color: "#4b5563",
+                                                fontWeight: 600,
+                                                cursor: isLoggingIn ? "not-allowed" : "pointer",
+                                            }, disabled: isLoggingIn, children: "Cancel" }), _jsx("button", { type: "submit", "data-repro-internal": "1", style: {
+                                                padding: "10px 16px",
+                                                borderRadius: 6,
+                                                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" })] })] })] }) }))] }));
+}
+export default ReproProvider;