@oneuptime/common 13.0.1 → 13.0.4

package/Tests/UI/Rum/SessionReplayTable.test.tsx

@@ -17,7 +17,8 @@ import getJestMockFunction, { MockFunction } from "../../MockType";
  * real link; search debounced into the request; a sort change resets the
  * cursor; Next disabled without a cursor; unplayable rows never offer
  * Watch; the ignored user filter is called out instead of chipped; the
- * 30-day search cap reads as its fix.
+ * 30-day search cap reads as its fix; the Users page is a navigation away
+ * and its hand-off lands here as the reference, never as the URL.
  */
 
 const postMock: MockFunction = getJestMockFunction();
@@ -67,6 +68,8 @@ import { SESSION_REPLAY_SEARCH_DEBOUNCE_MS } from "../../../../App/FeatureSet/Da
 const APP_ID: string = "0193c0de-1111-4aaa-8bbb-000000000001";
 const SESSION_A: string = "a1b2c3d4e5f60718293a4b5c6d7e8f90";
 const SESSION_B: string = "b2c3d4e5f60718293a4b5c6d7e8f90a1";
+const SESSION_C: string = "c3d4e5f60718293a4b5c6d7e8f90a1b2";
+const VISITOR_A: string = "abc123def4567890abc123def4567890";
 const NOW: number = Date.now();
 const DAY_MS: number = 24 * 60 * 60 * 1000;
 
@@ -188,7 +191,8 @@ function listResponse(
 
 /*
  * Routes the mocked API by URL. `list` may be a function so a test can
- * answer differently per call (paging, errors).
+ * answer differently per call (paging, errors). Anything else gets the
+ * status body; the list never calls /users - that is the Users page's.
  */
 function mockApi(
   list: (
@@ -271,6 +275,23 @@ describe("parseSessionReplaySummary", () => {
     expect(parseSessionReplaySummary(hiddenRow).isIdentityVisible).toBe(false);
   });
 
+  it("reads the pseudonymous key and the visitor id, empty when absent", () => {
+    const row: SessionReplaySummary = parseSessionReplaySummary(
+      wireRow({ visitorId: VISITOR_A }),
+    );
+
+    expect(row.identifiedUserKey).toBe("k1");
+    expect(row.visitorId).toBe(VISITOR_A);
+
+    const legacy: JSONObject = wireRow();
+
+    delete legacy["identifiedUserKey"];
+    delete legacy["visitorId"];
+
+    expect(parseSessionReplaySummary(legacy).identifiedUserKey).toBe("");
+    expect(parseSessionReplaySummary(legacy).visitorId).toBe("");
+  });
+
   it("an older server's row has undefined counters, never 0", () => {
     const legacy: JSONObject = wireRow();
 
@@ -409,14 +430,16 @@ describe("SessionReplayTable rendering", () => {
 
     renderTable();
 
-    expect(screen.getAllByTestId("session-row-skeleton").length).toBe(4);
+    expect(
+      screen.getByTestId("table-skeleton-loader").querySelectorAll("tr"),
+    ).toHaveLength(10);
     expect(screen.queryByRole("progressbar")).toBeNull();
 
     resolveList(listResponse([wireRow()]));
 
     await waitForRows(1);
 
-    expect(screen.queryAllByTestId("session-row-skeleton").length).toBe(0);
+    expect(screen.queryByTestId("table-skeleton-loader")).toBeNull();
   });
 
   it("renders routes, trace count, clicks, idle hint, hours, expiry and the first-error action", async () => {
@@ -537,6 +560,605 @@ describe("SessionReplayTable rendering", () => {
     expect(row).toHaveTextContent("Hidden");
     expect(row).not.toHaveTextContent("Anonymous");
   });
+
+  /*
+   * Issue #3705: a page that never calls identify() used to read
+   * "Anonymous" on every row. With a recorder that mints a visitor id the
+   * row names the browser instead, so the same person is recognisable
+   * three rows down.
+   */
+  it("a session with no label but a visitor id reads as that visitor", async () => {
+    mockApi(() => {
+      return listResponse([
+        wireRow({
+          identifiedUserLabel: "",
+          identifiedUserKey: "",
+          visitorId: VISITOR_A,
+        }),
+      ]);
+    });
+
+    renderTable();
+
+    await waitForRows(1);
+
+    expect(screen.getByTestId("session-row-user")).toHaveTextContent(
+      "Visitor abc123",
+    );
+    expect(screen.getByTestId("session-row-user")).toHaveAttribute(
+      "data-user-kind",
+      "visitor",
+    );
+    expect(screen.getByTestId("session-user-avatar")).toHaveTextContent("V");
+  });
+
+  it("a session with neither label nor visitor id is still Anonymous, and not clickable", async () => {
+    mockApi(() => {
+      return listResponse([
+        wireRow({ identifiedUserLabel: "", identifiedUserKey: "" }),
+      ]);
+    });
+
+    renderTable();
+
+    await waitForRows(1);
+
+    expect(screen.getByTestId("session-row-user")).toHaveTextContent(
+      "Anonymous",
+    );
+    expect(screen.queryByTestId("session-row-user-filter")).toBeNull();
+  });
+
+  it("shows an active-share bar under the duration and folds signals past three", async () => {
+    mockApi(() => {
+      return listResponse([wireRow({ deadClickCount: 2 })]);
+    });
+
+    renderTable();
+
+    const [row] = await waitForRows(1);
+
+    /* 54 of 90 minutes active. */
+    expect(screen.getByTestId("session-row-activity-bar")).toHaveAttribute(
+      "title",
+      "active 60% · idle 40%",
+    );
+
+    /* errors, rage, dead shown; traces and exception groups fold into +2. */
+    const more: HTMLElement = screen.getByTestId("session-row-more-signals");
+
+    expect(more).toHaveTextContent("+2");
+    expect(more.getAttribute("title")).toBe("3 traces, 1 exception group");
+    /* Folded, not lost: the row still says what it carries. */
+    expect(row).toHaveTextContent("1 exception group");
+  });
+});
+
+describe("SessionReplayTable user filter", () => {
+  it("clicking a visible label narrows the list by that user's reference and does not navigate", async () => {
+    mockApi(() => {
+      return listResponse([wireRow()]);
+    });
+
+    renderTable();
+
+    await waitForRows(1);
+
+    fireEvent.click(screen.getByTestId("session-row-user-filter"));
+
+    await waitFor(() => {
+      expect(requestsTo("/session-replay/list").length).toBe(2);
+    });
+
+    expect(requestsTo("/session-replay/list")[1]!.data["filters"]).toEqual({
+      identifiedUserRef: "jane@acme.com",
+    });
+    expect(navigateMock).not.toHaveBeenCalled();
+    /* The reference never reaches the address bar; the box shows it. */
+    expect(window.location.search).not.toContain("jane");
+    expect(screen.getByTestId("session-search-input")).toHaveValue(
+      "user:jane@acme.com",
+    );
+  });
+
+  it("clicking a visitor narrows by visitor id, writes it to the URL, and chips it short", async () => {
+    mockApi(() => {
+      return listResponse([
+        wireRow({
+          identifiedUserLabel: "",
+          identifiedUserKey: "",
+          visitorId: VISITOR_A,
+        }),
+      ]);
+    });
+
+    renderTable();
+
+    await waitForRows(1);
+
+    fireEvent.click(screen.getByTestId("session-row-user-filter"));
+
+    await waitFor(() => {
+      expect(requestsTo("/session-replay/list").length).toBe(2);
+    });
+
+    expect(requestsTo("/session-replay/list")[1]!.data["filters"]).toEqual({
+      visitorId: VISITOR_A,
+    });
+    expect(navigateMock).not.toHaveBeenCalled();
+    expect(window.location.search).toContain(`visitor=${VISITOR_A}`);
+
+    const chip: HTMLElement = screen.getByTestId("session-filter-chip");
+
+    expect(chip).toHaveAttribute("data-field", "visitorId");
+    expect(chip).toHaveTextContent("Visitor");
+    expect(chip).toHaveTextContent("abc123…");
+    expect(chip).not.toHaveTextContent(VISITOR_A);
+  });
+
+  it("clicking a hidden identity with a key narrows by the digest without showing it", async () => {
+    const hidden: JSONObject = wireRow();
+
+    delete hidden["identifiedUserLabel"];
+
+    mockApi(() => {
+      return listResponse([hidden]);
+    });
+
+    renderTable();
+
+    await waitForRows(1);
+
+    fireEvent.click(screen.getByTestId("session-row-user-filter"));
+
+    await waitFor(() => {
+      expect(requestsTo("/session-replay/list").length).toBe(2);
+    });
+
+    expect(requestsTo("/session-replay/list")[1]!.data["filters"]).toEqual({
+      identifiedUserKey: "k1",
+    });
+    expect(window.location.search).toContain("userKey=k1");
+
+    const chip: HTMLElement = screen.getByTestId("session-filter-chip");
+
+    expect(chip).toHaveAttribute("data-field", "identifiedUserKey");
+    expect(chip).toHaveTextContent("pseudonymous key");
+    /* The box has no token for a digest, so it stays empty. */
+    expect(screen.getByTestId("session-search-input")).toHaveValue("");
+  });
+
+  it("a user filter replaces any other identity filter and resets to page one", async () => {
+    mockApi((_data: JSONObject, index: number) => {
+      return listResponse(
+        [
+          wireRow({
+            sessionId: index === 1 ? SESSION_B : SESSION_A,
+            identifiedUserLabel: "",
+            identifiedUserKey: "",
+            visitorId: VISITOR_A,
+          }),
+        ],
+        index === 0
+          ? { startTimeUnixMs: NOW - 3 * 60_000, sessionId: SESSION_A }
+          : null,
+      );
+    });
+
+    window.history.replaceState(null, "", "/?userKey=k9");
+
+    renderTable();
+
+    await waitForRows(1);
+
+    expect(requestsTo("/session-replay/list")[0]!.data["filters"]).toEqual({
+      identifiedUserKey: "k9",
+    });
+
+    fireEvent.click(screen.getByTestId("pagination-next-button"));
+
+    await waitFor(() => {
+      expect(window.location.search).toContain("page=2");
+    });
+
+    fireEvent.click(screen.getByTestId("session-row-user-filter"));
+
+    await waitFor(() => {
+      expect(requestsTo("/session-replay/list").length).toBe(3);
+    });
+
+    const sent: JSONObject = requestsTo("/session-replay/list")[2]!.data;
+
+    expect(sent["filters"]).toEqual({ visitorId: VISITOR_A });
+    expect(sent["cursor"]).toBeUndefined();
+    expect(window.location.search).not.toContain("page=");
+    expect(window.location.search).not.toContain("userKey=");
+  });
+});
+
+describe("SessionReplayTable identity nudge", () => {
+  function anonymousRows(
+    count: number,
+    visitorId: string = "",
+  ): Array<JSONObject> {
+    return [SESSION_A, SESSION_B, SESSION_C]
+      .slice(0, count)
+      .map((sessionId: string): JSONObject => {
+        return wireRow({
+          sessionId: sessionId,
+          identifiedUserLabel: "",
+          identifiedUserKey: "",
+          visitorId: visitorId,
+        });
+      });
+  }
+
+  it("appears when three or more rows are all anonymous, and says the recorder is old when none has a visitor id", async () => {
+    mockApi(() => {
+      return listResponse(anonymousRows(3));
+    });
+
+    renderTable();
+
+    await waitForRows(3);
+
+    const nudge: HTMLElement = screen.getByTestId("session-identity-nudge");
+
+    expect(nudge).toHaveTextContent(
+      "No session here is linked to a signed-in user.",
+    );
+    expect(nudge).toHaveTextContent("OneUptimeReplay.identify()");
+    expect(nudge).toHaveTextContent("carry no visitor id yet");
+  });
+
+  it("stays hidden when the list is already narrowed to one visitor", async () => {
+    /*
+     * A page filtered to a single visitor is anonymous because the viewer
+     * asked for that visitor, not because the site never identifies
+     * anyone; nudging them to call identify() there is noise.
+     */
+    mockApi(() => {
+      return listResponse(anonymousRows(3, VISITOR_A));
+    });
+
+    window.history.replaceState(null, "", `/?visitor=${VISITOR_A}`);
+
+    renderTable();
+
+    await waitForRows(3);
+
+    expect(screen.queryByTestId("session-identity-nudge")).toBeNull();
+  });
+
+  it("drops the recorder line when the rows carry visitor ids", async () => {
+    mockApi(() => {
+      return listResponse(anonymousRows(3, VISITOR_A));
+    });
+
+    renderTable();
+
+    await waitForRows(3);
+
+    expect(screen.getByTestId("session-identity-nudge")).not.toHaveTextContent(
+      "carry no visitor id yet",
+    );
+  });
+
+  it("does not appear with fewer than three rows, with one identified row, or when identity is hidden", async () => {
+    mockApi(() => {
+      return listResponse(anonymousRows(2));
+    });
+
+    const view: ReturnType<typeof render> = renderTable();
+
+    await waitForRows(2);
+
+    expect(screen.queryByTestId("session-identity-nudge")).toBeNull();
+
+    view.unmount();
+    postMock.mockReset();
+    mockApi(() => {
+      return listResponse([
+        ...anonymousRows(2),
+        wireRow({ sessionId: SESSION_C }),
+      ]);
+    });
+
+    const identified: ReturnType<typeof render> = renderTable();
+
+    await waitForRows(3);
+
+    expect(screen.queryByTestId("session-identity-nudge")).toBeNull();
+
+    identified.unmount();
+    postMock.mockReset();
+
+    const hiddenRows: Array<JSONObject> = anonymousRows(3).map(
+      (row: JSONObject): JSONObject => {
+        delete row["identifiedUserLabel"];
+        return row;
+      },
+    );
+
+    mockApi(() => {
+      return listResponse(hiddenRows);
+    });
+
+    renderTable();
+
+    await waitForRows(3);
+
+    expect(screen.queryByTestId("session-identity-nudge")).toBeNull();
+  });
+
+  it("dismiss hides it for the tab, and the guide link navigates", async () => {
+    mockApi(() => {
+      return listResponse(anonymousRows(3));
+    });
+
+    renderTable();
+
+    await waitForRows(3);
+
+    fireEvent.click(screen.getByTestId("session-identity-nudge-guide"));
+
+    expect(navigateMock).toHaveBeenCalledTimes(1);
+    expect(
+      (navigateMock.mock.calls[0]![0] as { toString: () => string }).toString(),
+    ).toContain("documentation");
+
+    fireEvent.click(screen.getByRole("button", { name: "Dismiss" }));
+
+    expect(screen.queryByTestId("session-identity-nudge")).toBeNull();
+    expect(
+      window.sessionStorage.getItem(
+        `oneuptime.replay.identityNudgeDismissed:${APP_ID}`,
+      ),
+    ).toBe("1");
+
+    /* Remembered: a re-render of the same list does not bring it back. */
+    fireEvent.click(screen.getByRole("button", { name: "Refresh sessions" }));
+
+    await waitFor(() => {
+      expect(requestsTo("/session-replay/list").length).toBe(2);
+    });
+
+    expect(screen.queryByTestId("session-identity-nudge")).toBeNull();
+  });
+
+  it("See users goes to the Users page for this application, on the same window", async () => {
+    mockApi(() => {
+      return listResponse(anonymousRows(3));
+    });
+
+    window.history.replaceState(null, "", "/?range=Past%201%20Week");
+
+    renderTable();
+
+    await waitForRows(3);
+
+    fireEvent.click(screen.getByTestId("session-identity-nudge-users"));
+
+    expect(navigateMock).toHaveBeenCalledTimes(1);
+
+    const target: string = (
+      navigateMock.mock.calls[0]![0] as { toString: () => string }
+    ).toString();
+
+    expect(target.endsWith("/session-replay-users?range=Past+1+Week")).toBe(
+      true,
+    );
+    expect(target).toContain(APP_ID);
+    /* Its own page: nothing about this list changed. */
+    expect(requestsTo("/session-replay/users").length).toBe(0);
+    expect(screen.getAllByTestId("session-row").length).toBe(3);
+  });
+});
+
+describe("SessionReplayTable and the Users page", () => {
+  it("the Users card button goes to the Users page and nothing else; the default window as absence", async () => {
+    mockApi(() => {
+      return listResponse([wireRow()]);
+    });
+
+    renderTable();
+
+    await waitForRows(1);
+
+    fireEvent.click(screen.getByRole("button", { name: "Users" }));
+
+    expect(navigateMock).toHaveBeenCalledTimes(1);
+
+    const target: string = (
+      navigateMock.mock.calls[0]![0] as { toString: () => string }
+    ).toString();
+
+    expect(target.endsWith("/session-replay-users")).toBe(true);
+    expect(target).not.toContain("?");
+    expect(target).toContain(APP_ID);
+    /* The toggle is gone; there is one list and one Refresh for it. */
+    expect(screen.queryByTestId("session-view-toggle")).toBeNull();
+    expect(screen.queryByTestId("session-users-table")).toBeNull();
+    expect(
+      screen.getByRole("button", { name: "Refresh sessions" }),
+    ).toBeInTheDocument();
+    expect(requestsTo("/session-replay/users").length).toBe(0);
+  });
+
+  it("the Users card button carries the window the list is on, in the list's own spelling", async () => {
+    mockApi(() => {
+      return listResponse([wireRow()]);
+    });
+
+    /* An incident tile's window: the overview's start/end aliases. */
+    window.history.replaceState(
+      null,
+      "",
+      "/?start=2026-09-01T00:00:00.000Z&end=2026-09-01T01:00:00.000Z&browser=Chrome",
+    );
+
+    renderTable();
+
+    await waitForRows(1);
+
+    fireEvent.click(screen.getByRole("button", { name: "Users" }));
+
+    const target: URL = new URL(
+      (navigateMock.mock.calls[0]![0] as { toString: () => string }).toString(),
+      "https://dash.example.com",
+    );
+
+    expect(target.pathname.endsWith("/session-replay-users")).toBe(true);
+    expect(target.searchParams.get("startTime")).toBe(
+      "2026-09-01T00:00:00.000Z",
+    );
+    expect(target.searchParams.get("endTime")).toBe("2026-09-01T01:00:00.000Z");
+    /* The window and nothing else: the rollup takes no filters. */
+    expect(target.searchParams.has("browser")).toBe(false);
+    expect(target.searchParams.has("range")).toBe(false);
+    expect(target.searchParams.has("start")).toBe(false);
+  });
+
+  it("a userKey link with the person's label parked by the Users page reads as the reference", async () => {
+    mockApi(() => {
+      return listResponse([wireRow()]);
+    });
+
+    window.history.replaceState(null, "", "/?userKey=k1&range=Past%201%20Week");
+    window.sessionStorage.setItem(
+      `oneuptime.replay.userFilterLabel:${APP_ID}`,
+      JSON.stringify({
+        identifiedUserKey: "k1",
+        identifiedUserLabel: "jane@acme.com",
+      }),
+    );
+
+    renderTable();
+
+    await waitForRows(1);
+
+    /* The request sends the reference for the server to hash, not the digest. */
+    expect(requestsTo("/session-replay/list").length).toBe(1);
+    expect(requestsTo("/session-replay/list")[0]!.data["filters"]).toEqual({
+      identifiedUserRef: "jane@acme.com",
+    });
+    /* The same UX as clicking the label here: box, chip, no reference in the URL. */
+    expect(screen.getByTestId("session-search-input")).toHaveValue(
+      "user:jane@acme.com",
+    );
+
+    const chip: HTMLElement = screen.getByTestId("session-filter-chip");
+
+    expect(chip).toHaveAttribute("data-field", "identifiedUserRef");
+    expect(chip).toHaveTextContent("jane@acme.com");
+    expect(window.location.search).not.toContain("jane");
+    /*
+     * The digest stays in the address bar on the reference's behalf, so a
+     * reload, Forward or a copied address narrows by the same person - the
+     * URL never reads worse for a viewer who could see the label than for
+     * one who could not.
+     */
+    expect(window.location.search).toContain("userKey=k1");
+    /* The window the Users page counted the person in is kept. */
+    expect(window.location.search).toContain("range=Past+1+Week");
+    /* And the player's way back to this list is the same address. */
+    expect(
+      window.sessionStorage.getItem(SESSION_REPLAY_LIST_URL_STORAGE_KEY),
+    ).toContain("userKey=k1");
+    /* Consumed: a reload of this URL narrows by the digest like a pasted link. */
+    expect(
+      window.sessionStorage.getItem(
+        `oneuptime.replay.userFilterLabel:${APP_ID}`,
+      ),
+    ).toBeNull();
+
+    /* Once the person filter is gone, so is the digest written for it. */
+    fireEvent.click(screen.getByRole("button", { name: /^Remove .* filter$/ }));
+
+    await waitFor(() => {
+      expect(requestsTo("/session-replay/list").length).toBe(2);
+    });
+
+    expect(requestsTo("/session-replay/list")[1]!.data["filters"]).toEqual({});
+    expect(window.location.search).not.toContain("userKey=");
+    expect(window.location.search).toContain("range=Past+1+Week");
+  });
+
+  it("a userKey link without a parked label, or with one for somebody else, narrows by the digest", async () => {
+    mockApi(() => {
+      return listResponse([wireRow()]);
+    });
+
+    window.sessionStorage.setItem(
+      `oneuptime.replay.userFilterLabel:${APP_ID}`,
+      JSON.stringify({
+        identifiedUserKey: "k2",
+        identifiedUserLabel: "bob@acme.com",
+      }),
+    );
+    window.history.replaceState(null, "", "/?userKey=k1");
+
+    const view: ReturnType<typeof render> = renderTable();
+
+    await waitForRows(1);
+
+    expect(requestsTo("/session-replay/list")[0]!.data["filters"]).toEqual({
+      identifiedUserKey: "k1",
+    });
+    expect(screen.getByTestId("session-search-input")).toHaveValue("");
+    expect(screen.getByTestId("session-filter-chip")).toHaveTextContent(
+      "pseudonymous key",
+    );
+    expect(window.location.search).toContain("userKey=k1");
+    /* Somebody else's entry is not ours to clear. */
+    expect(
+      window.sessionStorage.getItem(
+        `oneuptime.replay.userFilterLabel:${APP_ID}`,
+      ),
+    ).not.toBeNull();
+
+    view.unmount();
+    postMock.mockReset();
+    window.sessionStorage.clear();
+    mockApi(() => {
+      return listResponse([wireRow()]);
+    });
+    window.history.replaceState(null, "", "/?userKey=k1");
+
+    renderTable();
+
+    await waitForRows(1);
+
+    expect(requestsTo("/session-replay/list")[0]!.data["filters"]).toEqual({
+      identifiedUserKey: "k1",
+    });
+  });
+
+  it("a parked label is ignored, and left alone, when the URL carries no userKey", async () => {
+    mockApi(() => {
+      return listResponse([wireRow()]);
+    });
+
+    window.sessionStorage.setItem(
+      `oneuptime.replay.userFilterLabel:${APP_ID}`,
+      JSON.stringify({
+        identifiedUserKey: "k1",
+        identifiedUserLabel: "jane@acme.com",
+      }),
+    );
+
+    renderTable();
+
+    await waitForRows(1);
+
+    expect(requestsTo("/session-replay/list")[0]!.data["filters"]).toEqual({});
+    expect(screen.getByTestId("session-search-input")).toHaveValue("");
+    expect(
+      window.sessionStorage.getItem(
+        `oneuptime.replay.userFilterLabel:${APP_ID}`,
+      ),
+    ).not.toBeNull();
+  });
 });
 
 describe("SessionReplayTable navigation", () => {
@@ -587,6 +1209,11 @@ describe("SessionReplayTable navigation", () => {
 
     await waitForRows(1);
 
+    fireEvent.click(
+      screen
+        .getByTestId("session-facet-signal")
+        .querySelector("button") as HTMLElement,
+    );
     fireEvent.click(screen.getByText("Errors"));
 
     await waitFor(() => {
@@ -768,6 +1395,11 @@ describe("SessionReplayTable search, sort and paging", () => {
 
     await waitForRows(1);
 
+    fireEvent.click(
+      screen
+        .getByTestId("session-facet-signal")
+        .querySelector("button") as HTMLElement,
+    );
     fireEvent.click(screen.getByText("Traced"));
 
     await waitFor(() => {
@@ -989,3 +1621,84 @@ describe("SessionReplayTable honesty", () => {
     ).toBeInTheDocument();
   });
 });
+
+describe("SessionReplayTable facet integration", () => {
+  it("applies facets to the server, restarts pagination, synchronizes search and clears one selection", async () => {
+    mockApi((_data: JSONObject, index: number) => {
+      return listResponse(
+        [wireRow({ sessionId: index === 1 ? SESSION_B : SESSION_A })],
+        index === 0
+          ? { startTimeUnixMs: NOW - 3 * 60_000, sessionId: SESSION_A }
+          : null,
+      );
+    });
+    renderTable();
+    await waitForRows(1);
+    fireEvent.click(screen.getByTestId("pagination-next-button"));
+    await waitFor(() => {
+      expect(window.location.search).toContain("page=2");
+    });
+    await waitFor(() => {
+      expect(screen.getByTestId("pagination-next-button")).toBeDisabled();
+    });
+    fireEvent.click(
+      screen
+        .getByTestId("session-facet-browserName")
+        .querySelector("button") as HTMLElement,
+    );
+    fireEvent.click(screen.getByRole("option", { name: "Firefox" }));
+    await waitFor(() => {
+      expect(requestsTo("/session-replay/list")).toHaveLength(3);
+    });
+    const filtered: JSONObject = requestsTo("/session-replay/list")[2]!.data;
+    expect(filtered["filters"]).toEqual({ browserNames: ["Firefox"] });
+    expect(filtered["cursor"]).toBeUndefined();
+    expect(window.location.search).not.toContain("page=");
+    expect(window.location.search).toContain("browser=Firefox");
+    expect(screen.getByTestId("session-search-input")).toHaveValue(
+      "browser:Firefox",
+    );
+    fireEvent.click(
+      screen.getByRole("button", { name: "Clear Browser filter" }),
+    );
+    await waitFor(() => {
+      expect(requestsTo("/session-replay/list")).toHaveLength(4);
+    });
+    expect(requestsTo("/session-replay/list")[3]!.data["filters"]).toEqual({});
+    expect(screen.getByTestId("session-search-input")).toHaveValue("");
+  });
+
+  it("restores facet selections from a shared URL without exposing user identity", async () => {
+    window.history.replaceState(
+      null,
+      "",
+      "/?browser=Firefox&device=mobile&country=gb&minDuration=120",
+    );
+    mockApi(() => {
+      return listResponse([wireRow()]);
+    });
+    renderTable();
+    await waitForRows(1);
+    expect(screen.getByTestId("session-facet-browserName")).toHaveTextContent(
+      "Firefox",
+    );
+    expect(screen.getByTestId("session-facet-deviceType")).toHaveTextContent(
+      "Mobile",
+    );
+    expect(screen.getByTestId("session-facet-countryCode")).toHaveTextContent(
+      "United Kingdom (GB)",
+    );
+    expect(
+      screen.getByTestId("session-facet-minDurationSeconds"),
+    ).toHaveTextContent("At least 2 minutes");
+    expect(requestsTo("/session-replay/list")[0]!.data["filters"]).toEqual({
+      browserNames: ["Firefox"],
+      deviceTypes: ["mobile"],
+      countryCodes: ["GB"],
+      minDurationMs: 120000,
+    });
+    expect(screen.getByTestId("session-replay-facets")).not.toHaveTextContent(
+      "jane@acme.com",
+    );
+  });
+});