@lunardinos/browser 0.2.5 → 0.2.6

package/dist/recorder-core.js

@@ -4467,11 +4467,14 @@ function storedSessionUsable(storedAt, now) {
     return false;
   return now - storedAt < SESSION_TIMEOUT_MS;
 }
+var KEYFRAME_INTERVAL_MS = 60 * 1000;
+function keyframeDue(lastActivityAt, lastTickAt, visible) {
+  return visible && lastActivityAt > lastTickAt;
+}
 
 // src/recorder-core.ts
 var DEFAULT_ENDPOINT = "https://ingest.lunardinos.com";
 var SESSION_ACTIVITY_KEY = "__ld_sid_at";
-var FULL_SNAPSHOT_INTERVAL_MS = 60 * 1000;
 async function gzipCompress(input) {
   try {
     if (typeof CompressionStream === "undefined")
@@ -4594,9 +4597,10 @@ function createLunarDinosRecorder(config) {
   let visitorId = null;
   let stopFn = null;
   let intervalId = null;
-  let checkoutIntervalId = null;
+  let keyframeIntervalId = null;
   let recording2 = false;
   let lastActivityAt = 0;
+  let activitySinceTouch = false;
   let rotating = false;
   let currentPage = {};
   let pendingClickContext = null;
@@ -4669,6 +4673,7 @@ function createLunarDinosRecorder(config) {
   }
   function markActivity() {
     lastActivityAt = Date.now();
+    activitySinceTouch = true;
     if (typeof sessionStorage !== "undefined") {
       sessionStorage.setItem(SESSION_ACTIVITY_KEY, String(lastActivityAt));
     }
@@ -4683,7 +4688,10 @@ function createLunarDinosRecorder(config) {
     if (vid)
       payload.visitorId = vid;
     const json = JSON.stringify(payload);
-    persistence.touchSession();
+    if (activitySinceTouch) {
+      persistence.touchSession();
+      activitySinceTouch = false;
+    }
     if (options?.beacon) {
       sendViaBeacon(json);
       return;
@@ -4843,11 +4851,16 @@ function createLunarDinosRecorder(config) {
     }
     flush();
     intervalId = setInterval(flush, batchInterval);
-    checkoutIntervalId = setInterval(() => {
+    let lastTickAt = Date.now();
+    keyframeIntervalId = setInterval(() => {
+      const due = keyframeDue(lastActivityAt, lastTickAt, document.visibilityState !== "hidden");
+      lastTickAt = Date.now();
+      if (!due)
+        return;
       try {
         record_default.takeFullSnapshot(true);
       } catch {}
-    }, FULL_SNAPSHOT_INTERVAL_MS);
+    }, KEYFRAME_INTERVAL_MS);
     return sessionId;
   }
   function stop() {
@@ -4867,9 +4880,9 @@ function createLunarDinosRecorder(config) {
       clearInterval(intervalId);
       intervalId = null;
     }
-    if (checkoutIntervalId) {
-      clearInterval(checkoutIntervalId);
-      checkoutIntervalId = null;
+    if (keyframeIntervalId) {
+      clearInterval(keyframeIntervalId);
+      keyframeIntervalId = null;
     }
     stopFn?.();
     stopFn = null;

package/dist/src/recorder-core.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"recorder-core.d.ts","sourceRoot":"","sources":["../../src/recorder-core.ts"],"names":[],"mappings":"AACA,OAAO,EAA8C,KAAK,eAAe,EAAE,MAAM,eAAe,CAAA;AAShG,YAAY,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAuBpD,UAAU,cAAc;IACtB,iCAAiC;IACjC,MAAM,EAAE,MAAM,CAAA;IACd,qEAAqE;IACrE,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,kEAAkE;IAClE,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IACtC,6CAA6C;IAC7C,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,oHAAoH;IACpH,kBAAkB,CAAC,EAAE,eAAe,CAAA;IACpC;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AA4BD,UAAU,gBAAgB;IACxB,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,YAAY,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,CAAA;IACrC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,iFAAiF;IACjF,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CACvB;AAED,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE;QACJ,EAAE,EAAE,MAAM,CAAA;QACV,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;KACvB,CAAA;IACD,OAAO,CAAC,EAAE;QACR,EAAE,EAAE,MAAM,CAAA;QACV,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,SAAS,CAAC,EAAE,OAAO,CAAA;QACnB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;KACvB,CAAA;IACD,IAAI,CAAC,EAAE;QACL,EAAE,EAAE,MAAM,CAAA;QACV,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;KACvB,CAAA;CACF;AAuED,MAAM,WAAW,YAAY;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,8FAA8F;IAC9F,YAAY,CAAC,EAAE,gBAAgB,CAAA;CAChC;AAED,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,YAAY,KAAK,MAAM,CAAA;IAClD,IAAI,EAAE,MAAM,IAAI,CAAA;IAChB,+FAA+F;IAC/F,KAAK,EAAE,CAAC,OAAO,CAAC,EAAE;QAAE,MAAM,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAA;IAC/C,YAAY,EAAE,MAAM,MAAM,GAAG,IAAI,CAAA;IACjC,YAAY,EAAE,MAAM,MAAM,GAAG,IAAI,CAAA;IACjC,WAAW,EAAE,MAAM,OAAO,CAAA;IAC1B,iFAAiF;IACjF,aAAa,EAAE,CAAC,OAAO,EAAE,gBAAgB,KAAK,IAAI,CAAA;IAClD,4EAA4E;IAC5E,QAAQ,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,IAAI,CAAA;IAC5C,2EAA2E;IAC3E,cAAc,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAA;CAChD;AAED;;;;;;GAMG;AACH,wBAAgB,wBAAwB,CAAC,MAAM,EAAE,cAAc,GAAG,QAAQ,CAmjBzE"}
+{"version":3,"file":"recorder-core.d.ts","sourceRoot":"","sources":["../../src/recorder-core.ts"],"names":[],"mappings":"AACA,OAAO,EAA8C,KAAK,eAAe,EAAE,MAAM,eAAe,CAAA;AAWhG,YAAY,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAOpD,UAAU,cAAc;IACtB,iCAAiC;IACjC,MAAM,EAAE,MAAM,CAAA;IACd,qEAAqE;IACrE,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,kEAAkE;IAClE,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IACtC,6CAA6C;IAC7C,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,oHAAoH;IACpH,kBAAkB,CAAC,EAAE,eAAe,CAAA;IACpC;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AA4BD,UAAU,gBAAgB;IACxB,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,YAAY,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,CAAA;IACrC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,iFAAiF;IACjF,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CACvB;AAED,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE;QACJ,EAAE,EAAE,MAAM,CAAA;QACV,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;KACvB,CAAA;IACD,OAAO,CAAC,EAAE;QACR,EAAE,EAAE,MAAM,CAAA;QACV,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,SAAS,CAAC,EAAE,OAAO,CAAA;QACnB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;KACvB,CAAA;IACD,IAAI,CAAC,EAAE;QACL,EAAE,EAAE,MAAM,CAAA;QACV,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;KACvB,CAAA;CACF;AAuED,MAAM,WAAW,YAAY;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,8FAA8F;IAC9F,YAAY,CAAC,EAAE,gBAAgB,CAAA;CAChC;AAED,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,YAAY,KAAK,MAAM,CAAA;IAClD,IAAI,EAAE,MAAM,IAAI,CAAA;IAChB,+FAA+F;IAC/F,KAAK,EAAE,CAAC,OAAO,CAAC,EAAE;QAAE,MAAM,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAA;IAC/C,YAAY,EAAE,MAAM,MAAM,GAAG,IAAI,CAAA;IACjC,YAAY,EAAE,MAAM,MAAM,GAAG,IAAI,CAAA;IACjC,WAAW,EAAE,MAAM,OAAO,CAAA;IAC1B,iFAAiF;IACjF,aAAa,EAAE,CAAC,OAAO,EAAE,gBAAgB,KAAK,IAAI,CAAA;IAClD,4EAA4E;IAC5E,QAAQ,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,IAAI,CAAA;IAC5C,2EAA2E;IAC3E,cAAc,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAA;CAChD;AAED;;;;;;GAMG;AACH,wBAAgB,wBAAwB,CAAC,MAAM,EAAE,cAAc,GAAG,QAAQ,CA8jBzE"}

package/dist/src/recorder-core.js

@@ -1,24 +1,9 @@
 import record, {} from "@lunardinos/rrweb-record";
 import { createPersistence } from "./persistence";
-import { isNavigation, isUserActivity, SESSION_TIMEOUT_MS, sessionExpired, storedSessionUsable, } from "./session-lifecycle";
+import { isNavigation, isUserActivity, KEYFRAME_INTERVAL_MS, keyframeDue, SESSION_TIMEOUT_MS, sessionExpired, storedSessionUsable, } from "./session-lifecycle";
 const DEFAULT_ENDPOINT = "https://ingest.lunardinos.com";
 /** Timestamp of the last user activity, alongside the session id in sessionStorage. */
 const SESSION_ACTIVITY_KEY = "__ld_sid_at";
-/**
- * How often to force a full snapshot.
- *
- * These are the replay's keyframes: the player can only start rendering from a
- * snapshot, so seeking to an arbitrary point costs replaying every mutation
- * since the preceding one. That makes this interval the ceiling on seek latency
- * — at five minutes, jumping around a long recording meant fast-forwarding
- * through up to five minutes of DOM mutations per jump.
- *
- * The tradeoff is upload size: each snapshot is the whole DOM. Stylesheets and
- * images are content-addressed and deduplicated across the session, so the
- * marginal cost of an extra snapshot is mostly the node tree, which compresses
- * well — worth paying for a 5x cut in seek latency.
- */
-const FULL_SNAPSHOT_INTERVAL_MS = 60 * 1000;
 /** Compress a string via the CompressionStream API (gzip). Returns null if unavailable or on error. */
 async function gzipCompress(input) {
     try {
@@ -188,13 +173,15 @@ export function createLunarDinosRecorder(config) {
     let visitorId = null;
     let stopFn = null;
     let intervalId = null;
-    // Periodic full-snapshot ("checkout") timer. Bounds segment size for long
-    // single-page sessions: each snapshot becomes an independently-replayable
-    // segment boundary, so the player never has to load one giant blob.
-    let checkoutIntervalId = null;
+    // Periodic keyframe timer. Bounds segment size for long single-page
+    // sessions: each snapshot becomes an independently-replayable segment
+    // boundary, so the player never has to load one giant blob.
+    let keyframeIntervalId = null;
     let recording = false;
-    /** Last user activity, for {@link SESSION_TIMEOUT_MS}. */
+    /** Last user activity, for {@link SESSION_TIMEOUT_MS} and {@link keyframeDue}. */
     let lastActivityAt = 0;
+    /** User activity since the session cookie was last refreshed. */
+    let activitySinceTouch = false;
     /** Set while rotating, since taking the new session's snapshot re-enters emit. */
     let rotating = false;
     /** The page the app last reported, so a rotated session opens on it. */
@@ -308,6 +295,7 @@ export function createLunarDinosRecorder(config) {
     /** Persist the activity clock so a reload in the same tab can honour it. */
     function markActivity() {
         lastActivityAt = Date.now();
+        activitySinceTouch = true;
         if (typeof sessionStorage !== "undefined") {
             sessionStorage.setItem(SESSION_ACTIVITY_KEY, String(lastActivityAt));
         }
@@ -322,8 +310,12 @@ export function createLunarDinosRecorder(config) {
         if (vid)
             payload.visitorId = vid;
         const json = JSON.stringify(payload);
-        // Extend rolling session cookie on each flush
-        persistence.touchSession();
+        // Extend the rolling session cookie, but only for something a person did:
+        // keyframes and DOM churn flush too, and would keep an idle session alive.
+        if (activitySinceTouch) {
+            persistence.touchSession();
+            activitySinceTouch = false;
+        }
         // During page unload (beforeunload / MPA navigation), use sendBeacon
         // for guaranteed delivery. No async compression — page may tear down.
         if (options?.beacon) {
@@ -538,16 +530,21 @@ export function createLunarDinosRecorder(config) {
         // ~64 KB limit) is delivered via regular fetch before the user navigates away.
         flush();
         intervalId = setInterval(flush, batchInterval);
-        // Take a periodic full snapshot so long single-page sessions are split into
-        // bounded, independently-replayable segments (matches PostHog's 5-min cadence).
-        checkoutIntervalId = setInterval(() => {
+        // Take a periodic keyframe so long single-page sessions are split into
+        // bounded, independently-replayable segments — only while someone is there.
+        let lastTickAt = Date.now();
+        keyframeIntervalId = setInterval(() => {
+            const due = keyframeDue(lastActivityAt, lastTickAt, document.visibilityState !== "hidden");
+            lastTickAt = Date.now();
+            if (!due)
+                return;
             try {
                 record.takeFullSnapshot(true);
             }
             catch {
                 /* not recording / mid-teardown */
             }
-        }, FULL_SNAPSHOT_INTERVAL_MS);
+        }, KEYFRAME_INTERVAL_MS);
         return sessionId;
     }
     function stop() {
@@ -570,9 +567,9 @@ export function createLunarDinosRecorder(config) {
             clearInterval(intervalId);
             intervalId = null;
         }
-        if (checkoutIntervalId) {
-            clearInterval(checkoutIntervalId);
-            checkoutIntervalId = null;
+        if (keyframeIntervalId) {
+            clearInterval(keyframeIntervalId);
+            keyframeIntervalId = null;
         }
         stopFn?.();
         stopFn = null;

package/dist/src/recorder.browser.test.js

@@ -9,7 +9,8 @@ import { buildRecorderBundle } from "./testing/recorder-bundle";
  * A navigation is a Custom "navigation" event followed by Meta + FullSnapshot;
  * a keyframe is Meta + FullSnapshot alone. Keyframes are the recorder's own
  * doing, so they must not keep an idle session alive, and a session rotated
- * after inactivity must open on a navigation so it has a landing page.
+ * after inactivity must open on a navigation so it has a landing page. They are
+ * only taken while someone is there: the tab is visible and the user active.
  */
 const PAGE = `<!DOCTYPE html><html lang="de"><head><title>App</title></head><body>
 <div id="app"><h1>Shifts</h1><button id="b">Apply</button></div>
@@ -24,6 +25,20 @@ afterAll(() => browser.close());
 async function openPage() {
     const uploads = [];
     const page = await browser.newPage();
+    // Count writes of the session cookie, which carries the rolling 30-minute expiry.
+    await page.addInitScript(() => {
+        const desc = Object.getOwnPropertyDescriptor(Document.prototype, "cookie");
+        const g = globalThis;
+        g.__sessionCookieWrites = 0;
+        Object.defineProperty(document, "cookie", {
+            get: () => desc.get.call(document),
+            set: (v) => {
+                if (v.startsWith("__ld_sid="))
+                    g.__sessionCookieWrites++;
+                desc.set.call(document, v);
+            },
+        });
+    });
     await page.route("https://app.test/**", (route) => {
         const { pathname } = new URL(route.request().url());
         if (pathname === "/recorder.js")
@@ -62,7 +77,27 @@ async function settle(page, ms = 2_100) {
     await page.clock.runFor(ms);
     await new Promise((r) => setTimeout(r, 150));
 }
+/** Make the tab hidden or visible, as switching tabs does. */
+async function setVisible(page, visible) {
+    await page.evaluate((v) => {
+        Object.defineProperty(document, "visibilityState", {
+            configurable: true,
+            get: () => (v ? "visible" : "hidden"),
+        });
+        Object.defineProperty(document, "hidden", { configurable: true, get: () => !v });
+        document.dispatchEvent(new Event("visibilitychange"));
+    }, visible);
+}
+/** Move the mouse a little, every 10 s for `minutes`: a user who is there. */
+async function stayActive(page, minutes) {
+    for (let i = 0; i < minutes * 6; i++) {
+        await page.mouse.move(100 + (i % 2) * 50, 100);
+        await settle(page, 10_000);
+    }
+}
+const cookieWrites = (page) => page.evaluate(() => globalThis.__sessionCookieWrites);
 const all = (uploads) => uploads.flatMap((u) => u.events);
+const fullSnapshots = (events) => events.filter((e) => e.type === 2);
 const kinds = (events) => events
     .filter((e) => e.type !== 3 && e.type !== 0 && e.type !== 1)
     .map((e) => (e.type === 5 ? `5:${e.data.tag}` : String(e.type)));
@@ -105,14 +140,74 @@ describe("recorder uploads", () => {
     test("a periodic keyframe is Meta + FullSnapshot without a navigation", async () => {
         const { page, uploads } = await openPage();
         const before = all(uploads).length;
+        await page.mouse.move(100, 100);
         await settle(page, 60_000);
         expect(kinds(all(uploads).slice(before))).toEqual(["4", "2"]);
         await page.close();
     });
+    test("an active user in a visible tab gets a keyframe every interval", async () => {
+        const { page, uploads } = await openPage();
+        const before = all(uploads).length;
+        await stayActive(page, 5);
+        expect(kinds(all(uploads).slice(before))).toEqual([
+            "4",
+            "2",
+            "4",
+            "2",
+            "4",
+            "2",
+            "4",
+            "2",
+            "4",
+            "2",
+        ]);
+        await page.close();
+    });
+    test("no keyframes once the user is idle", async () => {
+        const { page, uploads } = await openPage();
+        // Nobody touches the page after it opens.
+        const before = all(uploads).length;
+        await settle(page, 10 * 60_000);
+        expect(fullSnapshots(all(uploads).slice(before))).toEqual([]);
+        await page.close();
+    });
+    test("no keyframes while the tab is hidden", async () => {
+        const { page, uploads } = await openPage();
+        await setVisible(page, false);
+        const before = all(uploads).length;
+        await stayActive(page, 3);
+        expect(fullSnapshots(all(uploads).slice(before))).toEqual([]);
+        await page.close();
+    });
+    test("after the user comes back, the next keyframe comes within the interval", async () => {
+        const { page, uploads } = await openPage();
+        await setVisible(page, false);
+        await settle(page, 10 * 60_000);
+        await setVisible(page, true);
+        const before = all(uploads).length;
+        await page.mouse.move(100, 100);
+        await settle(page, 60_000);
+        expect(kinds(all(uploads).slice(before))).toEqual(["4", "2"]);
+        await page.close();
+    });
+    test("keyframes and DOM churn don't extend the session cookie; user activity does", async () => {
+        const { page } = await openPage();
+        const opened = await cookieWrites(page);
+        // The first tick's keyframe, and a page re-rendering on its own.
+        await page.evaluate(() => {
+            document.getElementById("app").append("tick");
+        });
+        await settle(page, 60_000);
+        expect(await cookieWrites(page)).toBe(opened);
+        await page.mouse.move(100, 100);
+        await settle(page);
+        expect(await cookieWrites(page)).toBe(opened + 1);
+        await page.close();
+    });
     test("keyframes don't keep an idle session alive; it rotates onto a navigation", async () => {
         const { page, uploads } = await openPage();
         const first = uploads[0].sessionId;
-        // 31 idle minutes: only keyframes are recorded meanwhile.
+        // 31 idle minutes: at most the first keyframe is recorded meanwhile.
         await settle(page, 31 * 60_000);
         expect(new Set(uploads.map((u) => u.sessionId))).toEqual(new Set([first]));
         await page.click("#b");

package/dist/src/session-lifecycle.d.ts

@@ -41,5 +41,26 @@ export declare function sessionExpired(lastActivityAt: number, now: number): boo
  * a reload resurrects a session the cookie had already expired.
  */
 export declare function storedSessionUsable(storedAt: number, now: number): boolean;
+/**
+ * How often to take a keyframe (Meta + FullSnapshot) while the user is active.
+ *
+ * The player can only start rendering from a snapshot, so seeking to an
+ * arbitrary point costs replaying every mutation since the preceding one. That
+ * makes this interval the ceiling on seek latency. Each snapshot is the whole
+ * DOM, but stylesheets and images are deduplicated, so the marginal cost is
+ * mostly the node tree, which compresses well.
+ */
+export declare const KEYFRAME_INTERVAL_MS: number;
+/**
+ * Whether the periodic keyframe should be taken now.
+ *
+ * Only while a person is there: the tab is visible and they did something
+ * since the previous tick. Idle users and background tabs are the bulk of
+ * recorded time, and a keyframe of a page nobody is touching is bytes for
+ * nothing. Comparing against the previous tick rather than a fixed window
+ * keeps this right when timers fire late, so keyframes always resume at the
+ * first tick after the user returns, within an interval.
+ */
+export declare function keyframeDue(lastActivityAt: number, lastTickAt: number, visible: boolean): boolean;
 export {};
 //# sourceMappingURL=session-lifecycle.d.ts.map

package/dist/src/session-lifecycle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"session-lifecycle.d.ts","sourceRoot":"","sources":["../../src/session-lifecycle.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH;;;GAGG;AACH,eAAO,MAAM,kBAAkB,QAAiB,CAAA;AAoBhD,6DAA6D;AAC7D,UAAU,aAAa;IACrB,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE;QAAE,MAAM,CAAC,EAAE,MAAM,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;CACzC;AAED,6EAA6E;AAC7E,wBAAgB,YAAY,CAAC,KAAK,EAAE,aAAa,GAAG,OAAO,CAE1D;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,aAAa,GAAG,OAAO,CAM5D;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,cAAc,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,OAAO,CAG3E;AAED;;;;;GAKG;AACH,wBAAgB,mBAAmB,CAAC,QAAQ,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,OAAO,CAG1E"}
+{"version":3,"file":"session-lifecycle.d.ts","sourceRoot":"","sources":["../../src/session-lifecycle.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH;;;GAGG;AACH,eAAO,MAAM,kBAAkB,QAAiB,CAAA;AAoBhD,6DAA6D;AAC7D,UAAU,aAAa;IACrB,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE;QAAE,MAAM,CAAC,EAAE,MAAM,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;CACzC;AAED,6EAA6E;AAC7E,wBAAgB,YAAY,CAAC,KAAK,EAAE,aAAa,GAAG,OAAO,CAE1D;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,aAAa,GAAG,OAAO,CAM5D;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,cAAc,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,OAAO,CAG3E;AAED;;;;;GAKG;AACH,wBAAgB,mBAAmB,CAAC,QAAQ,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,OAAO,CAG1E;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,oBAAoB,QAAY,CAAA;AAE7C;;;;;;;;;GASG;AACH,wBAAgB,WAAW,CAAC,cAAc,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,GAAG,OAAO,CAEjG"}

package/dist/src/session-lifecycle.js

@@ -68,3 +68,26 @@ export function storedSessionUsable(storedAt, now) {
         return false;
     return now - storedAt < SESSION_TIMEOUT_MS;
 }
+/**
+ * How often to take a keyframe (Meta + FullSnapshot) while the user is active.
+ *
+ * The player can only start rendering from a snapshot, so seeking to an
+ * arbitrary point costs replaying every mutation since the preceding one. That
+ * makes this interval the ceiling on seek latency. Each snapshot is the whole
+ * DOM, but stylesheets and images are deduplicated, so the marginal cost is
+ * mostly the node tree, which compresses well.
+ */
+export const KEYFRAME_INTERVAL_MS = 60 * 1000;
+/**
+ * Whether the periodic keyframe should be taken now.
+ *
+ * Only while a person is there: the tab is visible and they did something
+ * since the previous tick. Idle users and background tabs are the bulk of
+ * recorded time, and a keyframe of a page nobody is touching is bytes for
+ * nothing. Comparing against the previous tick rather than a fixed window
+ * keeps this right when timers fire late, so keyframes always resume at the
+ * first tick after the user returns, within an interval.
+ */
+export function keyframeDue(lastActivityAt, lastTickAt, visible) {
+    return visible && lastActivityAt > lastTickAt;
+}

package/dist/src/session-lifecycle.test.js

@@ -1,5 +1,5 @@
 import { describe, expect, test } from "bun:test";
-import { isUserActivity, SESSION_TIMEOUT_MS, sessionExpired, storedSessionUsable, } from "./session-lifecycle";
+import { isUserActivity, KEYFRAME_INTERVAL_MS, keyframeDue, SESSION_TIMEOUT_MS, sessionExpired, storedSessionUsable, } from "./session-lifecycle";
 /**
  * These rules decide how a visitor's time is cut into sessions, and both failure
  * directions are expensive: too permissive and a tab left open becomes a 20-day
@@ -91,3 +91,23 @@ describe("storedSessionUsable", () => {
         expect(storedSessionUsable(0, NOW)).toBe(false);
     });
 });
+describe("keyframeDue", () => {
+    const TICK = NOW + KEYFRAME_INTERVAL_MS;
+    test("takes a keyframe while the user is active and the tab is visible", () => {
+        expect(keyframeDue(TICK - 1_000, NOW, true)).toBe(true);
+    });
+    test("not while the tab is hidden, however recent the activity", () => {
+        expect(keyframeDue(TICK - 1_000, NOW, false)).toBe(false);
+    });
+    test("not when nothing happened since the previous tick", () => {
+        // The snapshot would only repeat what the player can already rebuild, and
+        // idle tabs are most tabs.
+        expect(keyframeDue(NOW, NOW, true)).toBe(false);
+        expect(keyframeDue(NOW - 20 * 24 * 60 * 60_000, NOW, true)).toBe(false);
+    });
+    test("activity right after a tick still counts when the next one fires late", () => {
+        // Timers drift: a busy or throttled page fires the next tick well past the
+        // interval, and the activity must not have aged out of a fixed window.
+        expect(keyframeDue(NOW + 1, NOW, true)).toBe(true);
+    });
+});

package/dist/src/testing/measure-bytes.js

@@ -1,13 +1,15 @@
 /**
- * Measure what the recorder uploads per minute of an active user.
+ * Measure what the recorder uploads per minute of an active and an idle user.
  *
- *   bun packages/browser/src/testing/measure-bytes.ts [--minutes 5] [--seed 1]
+ *   bun packages/browser/src/testing/measure-bytes.ts [--minutes 5] [--idle 10] [--seed 1]
  *
  * Runs the production recorder (`createLunarDinosRecorder`) in real Chromium on
  * a fake clock, against an app-like page: a shift list with cards and avatars,
  * a detail view and a form, switched by SPA navigations the way the framework
  * SDKs report them. The user is active the whole time — mouse, scroll, clicks,
- * typing, a navigation every 20 s. Every upload is intercepted and counted as it
+ * typing, a navigation every 20 s. Then the user leaves the tab open and idle
+ * for `--idle` minutes while the page keeps re-rendering its clock and badges,
+ * as real apps poll and animate. Every upload is intercepted and counted as it
  * goes over the wire (gzip where the recorder compresses).
  *
  * The page is synthetic, so the absolute number is a baseline, not a forecast:
@@ -21,6 +23,7 @@ const opt = (n, d) => {
     return i === -1 ? d : args[i + 1];
 };
 const minutes = Number(opt("minutes", "5"));
+const idleMinutes = Number(opt("idle", "10"));
 const seed = Number(opt("seed", "1"));
 const CSS = `
 body { font-family: system-ui, sans-serif; margin: 0; color: #222; background: #fafafa; }
@@ -77,10 +80,10 @@ setInterval(() => {
 window.__flush = () => recorder.flush();
 }</script></body></html>`;
 const recorderJs = await buildRecorderBundle();
-let wireBytes = 0;
-let jsonBytes = 0;
-let requests = 0;
-const eventTypes = {};
+const newTally = () => ({ wire: 0, json: 0, requests: 0, events: {} });
+const active = newTally();
+const idle = newTally();
+let tally = active;
 const browser = await chromium.launch();
 const page = await browser.newPage({ viewport: { width: 1280, height: 800 } });
 await page.route("https://app.test/**", (route) => {
@@ -98,15 +101,15 @@ await page.route("https://ingest.test/**", async (route) => {
     if (req.method() !== "POST")
         return route.fulfill({ status: 204, body: "" });
     const body = req.postDataBuffer() ?? Buffer.alloc(0);
-    wireBytes += body.length;
-    requests++;
+    tally.wire += body.length;
+    tally.requests++;
     const gzipped = req.headers()["content-encoding"] === "gzip";
     const json = gzipped ? Bun.gunzipSync(new Uint8Array(body)) : body;
-    jsonBytes += json.length;
+    tally.json += json.length;
     const { events } = JSON.parse(new TextDecoder().decode(json));
     for (const e of events) {
         const k = e.type === 3 ? `3.${e.data?.source}` : e.type === 5 ? `5.${e.data?.tag}` : String(e.type);
-        eventTypes[k] = (eventTypes[k] ?? 0) + 1;
+        tally.events[k] = (tally.events[k] ?? 0) + 1;
     }
     return route.fulfill({ status: 200, body: "{}" });
 });
@@ -140,12 +143,29 @@ for (let sec = 0; sec < minutes * 60; sec++) {
     await page.clock.runFor(1000);
     await settle();
 }
-await page.evaluate(() => window.__flush());
-await page.clock.runFor(100);
-await new Promise((r) => setTimeout(r, 300));
+/** Upload what's buffered and let it land, so it counts toward the phase that made it. */
+async function drain() {
+    await page.evaluate(() => window.__flush());
+    await page.clock.runFor(100);
+    await new Promise((r) => setTimeout(r, 300));
+}
+await drain();
+tally = idle;
+for (let sec = 0; sec < idleMinutes * 60; sec += 10) {
+    await page.clock.runFor(10_000);
+    await settle();
+}
+await drain();
 await browser.close();
-const perMin = (n) => `${(n / minutes / 1024).toFixed(1)} KB`;
-console.log(`${minutes} active minutes, ${navs} navigations, ${requests} uploads`);
-console.log(`wire: ${perMin(wireBytes)} per active minute (${(wireBytes / 1024).toFixed(0)} KB total)`);
-console.log(`json: ${perMin(jsonBytes)} per active minute (${(jsonBytes / 1024).toFixed(0)} KB total)`);
-console.log("events:", eventTypes);
+function report(label, t, mins) {
+    if (mins === 0)
+        return;
+    const perMin = (n) => `${(n / mins / 1024).toFixed(1)} KB`;
+    console.log(`${mins} ${label} minutes, ${t.requests} uploads`);
+    console.log(`  wire: ${perMin(t.wire)} per ${label} minute (${(t.wire / 1024).toFixed(0)} KB total)`);
+    console.log(`  json: ${perMin(t.json)} per ${label} minute (${(t.json / 1024).toFixed(0)} KB total)`);
+    console.log("  events:", t.events);
+}
+console.log(`${navs} navigations`);
+report("active", active, minutes);
+report("idle", idle, idleMinutes);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lunardinos/browser",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "type": "module",
   "exports": {
     ".": {