Keep activity and session paging consistent across filters and failures

Changing the activity filter now drops the old rows and cursor at once,
and Load more is disabled while any page loads, so an old cursor can no
longer be paged into a new filter. A busy, timed-out or failed page keeps
what is shown and offers Try again from the same cursor.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

Author: ryanbarlow97

frontend/app/components/admin/PlayerProfile.test.tsx

@@ -141,3 +141,65 @@ it.each([
   render(<PlayerProfile uuid={UUID} />);
   expect(await screen.findByText(text)).toBeTruthy();
 });
+
+it("never pages an old filter's cursor into a new filter", async () => {
+  render(<PlayerProfile uuid={UUID} />);
+  const feed = await screen.findByRole("region", { name: "Recent activity" });
+  await within(feed).findByRole("button", { name: "Load more" });
+
+  let finish: (value: Awaited<ReturnType<typeof getPlayerActivity>>) => void = () => {};
+  vi.mocked(getPlayerActivity).mockReturnValueOnce(new Promise((resolve) => { finish = resolve; }));
+  fireEvent.click(within(feed).getByRole("button", { name: "Kills" }));
+  // While the filtered first page loads, the old rows and their cursor are gone.
+  expect(within(feed).queryByRole("button", { name: "Load more" })).toBeNull();
+  expect(within(feed).queryByText("stone")).toBeNull();
+
+  finish({
+    entries: [entry("block:9", { kind: "kill", verb: "killed", target: "cow" })], next: null, searched_to: null,
+    kinds: KINDS, coreprotect: { status: "available" },
+  });
+  expect(await within(feed).findByText("cow")).toBeTruthy();
+  expect(getPlayerActivity).toHaveBeenLastCalledWith(UUID, { before: null, kinds: ["kill"] });
+  expect(within(feed).queryByText("stone")).toBeNull();
+});
+
+it("keeps rows and the cursor when a later page is unavailable", async () => {
+  render(<PlayerProfile uuid={UUID} />);
+  const feed = await screen.findByRole("region", { name: "Recent activity" });
+  await within(feed).findByText("stone");
+
+  vi.mocked(getPlayerActivity).mockResolvedValueOnce({
+    entries: [], next: null, searched_to: null, kinds: KINDS, coreprotect: { status: "unavailable", reason: "busy" },
+  });
+  fireEvent.click(within(feed).getByRole("button", { name: "Load more" }));
+  expect(await within(feed).findByText(/CoreProtect is busy/)).toBeTruthy();
+  expect(within(feed).getByText("stone")).toBeTruthy();
+
+  vi.mocked(getPlayerActivity).mockResolvedValueOnce({
+    entries: [entry("block:0", { verb: "placed", target: "oak_door" })], next: null, searched_to: null,
+    kinds: KINDS, coreprotect: { status: "available" },
+  });
+  fireEvent.click(within(feed).getByRole("button", { name: "Try again" }));
+  expect(await within(feed).findByText("oak_door")).toBeTruthy();
+  expect(getPlayerActivity).toHaveBeenLastCalledWith(UUID, { before: "cursor-1", kinds: undefined });
+  expect(within(feed).getByText("stone")).toBeTruthy();
+  expect(within(feed).queryByText(/CoreProtect is busy/)).toBeNull();
+});
+
+it("retries a failed sessions page from the same cursor", async () => {
+  vi.mocked(getPlayerSessions)
+    .mockResolvedValueOnce({
+      sessions: [{ start: { time: NOW - 7200, world: "TFMC_Map", x: 0, y: 64, z: 0 }, end: null, end_kind: "unknown",
+                   duration_seconds: null }],
+      next: "s-1", history_start: NOW - 864000, coreprotect: { status: "available" },
+    })
+    .mockRejectedValueOnce(new AccountApiError("bad_cursor", 400))
+    .mockResolvedValueOnce({ sessions: [], next: null, coreprotect: { status: "available" } });
+  render(<PlayerProfile uuid={UUID} />);
+  const sessions = await screen.findByRole("region", { name: "Sessions" });
+  fireEvent.click(await within(sessions).findByRole("button", { name: "Load more sessions" }));
+  expect(await within(sessions).findByText("That page link has expired. Reload to start again.")).toBeTruthy();
+  expect(within(sessions).getByText("No logout recorded")).toBeTruthy();
+  fireEvent.click(within(sessions).getByRole("button", { name: "Try again" }));
+  await waitFor(() => expect(getPlayerSessions).toHaveBeenLastCalledWith(UUID, "s-1"));
+});

frontend/app/components/admin/PlayerProfile.tsx

@@ -170,21 +170,25 @@ function Sessions({ uuid }: { uuid: string }) {
   const [next, setNext] = useState<string | null>(null);
   const [historyStart, setHistoryStart] = useState<number | null>(null);
   const [state, setState] = useState<"loading" | "ready" | "more">("loading");
-  const [error, setError] = useState<string | null>(null);
+  const [failure, setFailure] = useState<Failure | null>(null);
 
   const fetchPage = useCallback(
     async (before: string | null) => {
       setState(before ? "more" : "loading");
-      setError(null);
+      setFailure(null);
       try {
         const page = await getPlayerSessions(uuid, before);
         const notice = coreProtectMessage(page.coreprotect);
-        if (notice) setError(notice);
+        // An unavailable page has no cursor: keep what is shown so the same page can be retried.
+        if (notice) {
+          setFailure({ message: notice, before });
+          return;
+        }
         setRows((old) => (before ? [...old, ...page.sessions] : page.sessions));
         setNext(page.next);
         if (page.history_start !== undefined) setHistoryStart(page.history_start ?? null);
       } catch (err) {
-        setError(adminErrorMessage(err));
+        setFailure({ message: adminErrorMessage(err), before });
       } finally {
         setState("ready");
       }
@@ -203,12 +207,7 @@ function Sessions({ uuid }: { uuid: string }) {
         <p className="mt-1 text-xs text-[var(--tfmc-stone)]">Session records go back to {formatEpoch(historyStart)}.</p>
       ) : null}
       {state === "loading" ? <p className={`mt-3 ${mutedClass}`}>Loading…</p> : null}
-      {error ? (
-        <p className={errorClass} role="alert">
-          {error}
-        </p>
-      ) : null}
-      {state !== "loading" && !rows.length && !error ? <p className={`mt-3 ${mutedClass}`}>No sessions recorded.</p> : null}
+      {state !== "loading" && !rows.length && !failure ? <p className={`mt-3 ${mutedClass}`}>No sessions recorded.</p> : null}
       {rows.length ? (
         <div className="mt-3 overflow-x-auto">
           <table className="w-full min-w-[34rem] text-left text-sm">
@@ -243,15 +242,32 @@ function Sessions({ uuid }: { uuid: string }) {
           </table>
         </div>
       ) : null}
-      {next ? (
-        <button type="button" className={moreClass} disabled={state === "more"} onClick={() => void fetchPage(next)}>
+      {failure ? (
+        <Retry failure={failure} busy={state !== "ready"} onRetry={() => void fetchPage(failure.before)} />
+      ) : next ? (
+        <button type="button" className={moreClass} disabled={state !== "ready"} onClick={() => void fetchPage(next)}>
           {state === "more" ? "Loading…" : "Load more sessions"}
         </button>
       ) : null}
     </section>
   );
 }
 
+type Failure = { message: string; before: string | null };
+
+function Retry({ failure, busy, onRetry }: { failure: Failure; busy: boolean; onRetry: () => void }) {
+  return (
+    <div>
+      <p className={errorClass} role="alert">
+        {failure.message}
+      </p>
+      <button type="button" className={moreClass} disabled={busy} onClick={onRetry}>
+        Try again
+      </button>
+    </div>
+  );
+}
+
 function describe(entry: ActivityEntry) {
   const amount = entry.amount && entry.amount > 1 ? `${entry.amount} × ` : "";
   return (
@@ -281,25 +297,28 @@ function Activity({ uuid }: { uuid: string }) {
   const [next, setNext] = useState<string | null>(null);
   const [searchedTo, setSearchedTo] = useState<number | null>(null);
   const [state, setState] = useState<"loading" | "ready" | "more">("loading");
-  const [error, setError] = useState<string | null>(null);
+  const [failure, setFailure] = useState<Failure | null>(null);
   const request = useRef(0);
 
   const fetchPage = useCallback(
     async (before: string | null) => {
       const id = ++request.current;
       setState(before ? "more" : "loading");
-      setError(null);
+      setFailure(null);
       try {
         const page = await getPlayerActivity(uuid, { before, kinds: kinds.length ? kinds : undefined });
         if (id !== request.current) return;
         const notice = coreProtectMessage(page.coreprotect);
-        if (notice) setError(notice);
+        if (notice) {
+          setFailure({ message: notice, before });
+          return;
+        }
         setEntries((old) => (before ? [...old, ...page.entries] : page.entries));
         setNext(page.next);
         setSearchedTo(page.searched_to);
         if (page.kinds.length) setAvailable(page.kinds);
       } catch (err) {
-        if (id === request.current) setError(adminErrorMessage(err));
+        if (id === request.current) setFailure({ message: adminErrorMessage(err), before });
       } finally {
         if (id === request.current) setState("ready");
       }
@@ -311,8 +330,17 @@ function Activity({ uuid }: { uuid: string }) {
     void fetchPage(null);
   }, [fetchPage]);
 
+  function choose(next: string[]) {
+    // The old filter's rows and cursor must not be paged into the new one.
+    setNext(null);
+    setSearchedTo(null);
+    setEntries([]);
+    setFailure(null);
+    setKinds(next);
+  }
+
   function toggle(kind: string) {
-    setKinds((old) => (old.includes(kind) ? old.filter((k) => k !== kind) : [...old, kind]));
+    choose(kinds.includes(kind) ? kinds.filter((k) => k !== kind) : [...kinds, kind]);
   }
 
   const chip = (active: boolean) =>
@@ -327,7 +355,7 @@ function Activity({ uuid }: { uuid: string }) {
       <h3 className={headingClass}>Recent activity</h3>
       <p className="mt-1 text-xs text-[var(--tfmc-stone)]">From CoreProtect. Chat, command arguments and sign text are not shown.</p>
       <div role="group" aria-label="Show" className="mt-3 flex flex-wrap gap-1.5">
-        <button type="button" aria-pressed={!kinds.length} className={chip(!kinds.length)} onClick={() => setKinds([])}>
+        <button type="button" aria-pressed={!kinds.length} className={chip(!kinds.length)} onClick={() => choose([])}>
           All
         </button>
         {available.map((kind) => (
@@ -337,12 +365,7 @@ function Activity({ uuid }: { uuid: string }) {
         ))}
       </div>
       {state === "loading" ? <p className={`mt-3 ${mutedClass}`}>Loading…</p> : null}
-      {error ? (
-        <p className={errorClass} role="alert">
-          {error}
-        </p>
-      ) : null}
-      {state !== "loading" && !entries.length && !error ? (
+      {state !== "loading" && !entries.length && !failure ? (
         <p className={`mt-3 ${mutedClass}`}>{searchedTo ? "Nothing yet." : "No activity recorded."}</p>
       ) : null}
       {entries.length ? (
@@ -361,11 +384,13 @@ function Activity({ uuid }: { uuid: string }) {
           ))}
         </ul>
       ) : null}
-      {searchedTo && next ? (
+      {searchedTo && next && !failure ? (
         <p className="mt-3 text-xs text-[var(--tfmc-stone)]">Searched back to {formatEpoch(searchedTo)}.</p>
       ) : null}
-      {next ? (
-        <button type="button" className={moreClass} disabled={state === "more"} onClick={() => void fetchPage(next)}>
+      {failure ? (
+        <Retry failure={failure} busy={state !== "ready"} onRetry={() => void fetchPage(failure.before)} />
+      ) : next ? (
+        <button type="button" className={moreClass} disabled={state !== "ready"} onClick={() => void fetchPage(next)}>
           {state === "more" ? "Loading…" : searchedTo ? "Search further back" : "Load more"}
         </button>
       ) : null}