diff --git a/README.md b/README.md
index 2c6be63..badca89 100644
--- a/README.md
+++ b/README.md
@@ -232,6 +232,8 @@ If saving shows a warning, follow it before assuming your change is active. If c
 
 Open timeline settings with the **sliders icon**. Choose Followers or Paid subscribers, filter All/Gained/Lost, or switch between **Constellation** (one star per recorded action) and **Journal** (every recorded event). These viewing choices do not change what you record.
 
+XFlog loads the newest activity first. Scroll toward the older edge or choose **Load older activity** to bring in another page. Both layouts show how many events and people are loaded alongside the totals for the selected filters and time range.
+
 Each star represents one recorded action. Repeated actions from the same person stay as separate entries; new activity does not replace an earlier action. In Constellation, scroll up for older history and down for newer history. The person nearest the center becomes highlighted as you move, and their details appear in the readout. You can also click any visible star or name to select and center that person; they stay selected until you move through history again. Click the selected person or their readout for details. Interaction details include a linked post excerpt of up to 280 characters when text is already saved; no extra X request is made. The side arrows move one recorded action at a time. Use the bottom sliders to move through history or change zoom, which starts at **80%**. You can also hold the middle mouse button and scroll up to zoom in, or down to zoom out. Journal uses normal vertical scrolling and hides the sliders.
 
 <details>
@@ -268,7 +270,7 @@ Use either **clock button** to change the shared time range for Constellation, J
 | **Verification** | Verified/unverified and blue, business or government badge types when supplied. |
 | **Profile location** | Similar location text, tidied for spacing, capitalization and clear aliases such as NYC → New York City and Bangalore → Bengaluru. |
 
-Zoom out to see every available group in Constellation. On smaller screens, scroll sideways or use the history slider to reach groups that do not fit. Journal uses collapsible sections. A person can appear in several groups: a later like or reply does not hide their earlier follow or unfollow. Group badges and legend counts show total actions within the selected range. Hover over a group badge or legend count for the number of unique people; screen readers announce both counts. Each matching action remains a separate star.
+Zoom out to see groups with loaded events in Constellation. The overview also reports how many groups have events still to load. On smaller screens, scroll sideways or use the history slider to reach groups that do not fit. Journal uses collapsible sections and shows a summary for groups whose events have yet to load. A person can appear in several groups. Group badges and legend counts show total actions within the selected range. Hover over a group badge or legend count for the number of unique people. Screen readers announce both counts. Each loaded action has its own star.
 
 Account size, age, verification and location use only details delivered with new events while enabled. Old missing details stay Unknown; turning a group off keeps saved history. Profile facts describe the recorded event, not a live profile check. When space allows, enabled Verification, Account size and Account age add facts to the selected-person readout. Known verified accounts get a checkmark beside their name in Constellation and the readout when Verification is enabled.
 
diff --git a/src/xflog/app.py b/src/xflog/app.py
index 82aedfd..48d4572 100644
--- a/src/xflog/app.py
+++ b/src/xflog/app.py
@@ -14,11 +14,12 @@
 from . import audience_groups
 from .config import ASSETS, Config
 from .errors import SetupError
-from .history.demo import demo_activity, demo_history
+from .history.demo import demo_activity, demo_history, demo_timeline
 from .history.demo import encounter_context as demo_encounter_context
 from .history.filters import valid_filters
 from .history.summary import SUBJECT_TYPES, SUMMARY_PERIODS, activity_window, all_readings, readings
-from .history.timeline import Timeline, decode_cursor
+from .history.timeline import Timeline
+from .history.timeline_cursor import InvalidTimelineRequest
 from .interactions import TYPES, catalog
 from .interactions.history import ThreadOptions
 from .profile_names import ProfileNames
@@ -37,6 +38,19 @@
 from .web.ui import mount_ui as mount_browser_ui
 
 
+def _history_scope(kind, subject, since, limit, lens):
+    if not valid_filters(kind, subject, 0):
+        raise HTTPException(422, "Invalid timeline filter.")
+    if lens != "none" and lens not in audience_groups.MODULES:
+        raise HTTPException(422, "Invalid audience group.")
+    if not 1 <= limit <= 50:
+        raise HTTPException(422, "History page size must be between 1 and 50.")
+    try:
+        return timestamp(since) if since else ""
+    except (ValueError, OverflowError):
+        raise HTTPException(422, "Invalid history range.") from None
+
+
 def create_app(config: Config | None = None, *, transport=None, mount_ui=True):
     config = config or Config.from_env()
     runtime = Runtime(config, transport=transport)
@@ -207,36 +221,33 @@ async def timeline_history(
         since: str = "",
         local_only: bool = False,
         limit: int = 25,
+        lens: str = "none",
+        after_revision: str = "",
+        selected: str = "",
+        encounter_revision: str = "",
     ):
-        try:
-            decode_cursor(before)
-        except ValueError:
-            raise HTTPException(422, "Invalid timeline cursor.") from None
-        if not valid_filters(kind, subject, 0):
-            raise HTTPException(422, "Invalid timeline filter.")
-        try:
-            since = timestamp(since) if since else ""
-        except (ValueError, OverflowError):
-            raise HTTPException(422, "Invalid history range.") from None
-        if not 1 <= limit <= 50:
-            raise HTTPException(422, "History page size must be between 1 and 50.")
-        account = await store.setting("account")
-        if not account:
-            return {"events": [], "next": None}
+        since = _history_scope(kind, subject, since, limit, lens)
         query = {
             "kind": kind,
             "subject": subject,
             "before": before,
             "since": since,
             "limit": limit,
+            "lens": lens,
+            "after_revision": after_revision,
+            "selected": selected,
+            "encounter_revision": encounter_revision,
         }
-        result = await timeline.history(account["id"], query)
-        if not local_only and await profile_names.ensure(result["events"]):
-            result = await timeline.history(account["id"], query)
-        groups = await store.setting("audience_groups", {})
-        result["events"] = await audience_groups.decorate_history(
-            result["events"], groups, timeline.encounter_context
-        )
+        try:
+            result = await timeline.current_history(query)
+            if before in {"", "0"} and not local_only and result["events"]:
+                fresh = [
+                    event for event in result["events"] if not event.get("encounter_correction")
+                ]
+                if fresh and await profile_names.ensure(fresh):
+                    result = await timeline.current_history(query)
+        except InvalidTimelineRequest as error:
+            raise HTTPException(422, str(error)) from None
         return result
 
     @app.get("/api/events")
@@ -256,11 +267,40 @@ async def history(kind: str = "all", subject: str = "followers", before: int = 0
         return result
 
     @app.get("/api/demo")
-    async def demo(kind: str = "all", subject: str = "followers", before: int = 0):
-        if not valid_filters(kind, subject, before):
-            raise HTTPException(422, "Invalid demo filter.")
-        result = demo_history({"kind": kind, "subject": subject, "before": before})
+    async def demo(
+        kind: str = "all",
+        subject: str = "followers",
+        before: str = "0",
+        since: str = "",
+        limit: int | None = None,
+        lens: str = "none",
+    ):
+        since = _history_scope(kind, subject, since, 25 if limit is None else limit, lens)
         groups = await store.setting("audience_groups", {})
+        if (
+            limit is not None
+            or since
+            or lens != "none"
+            or not before.isascii()
+            or not before.isdecimal()
+        ):
+            try:
+                return await demo_timeline(
+                    {
+                        "kind": kind,
+                        "subject": subject,
+                        "before": before,
+                        "since": since,
+                        "limit": 25 if limit is None else limit,
+                        "lens": lens,
+                    },
+                    groups,
+                )
+            except InvalidTimelineRequest as error:
+                raise HTTPException(422, str(error)) from None
+        if len(before) > 19:
+            raise HTTPException(422, "Invalid demo cursor.")
+        result = demo_history({"kind": kind, "subject": subject, "before": int(before)})
         result["events"] = await audience_groups.decorate_history(
             result["events"], groups, demo_encounter_context
         )
diff --git a/src/xflog/assets/app.js b/src/xflog/assets/app.js
index b3b7334..eb7ee11 100644
--- a/src/xflog/assets/app.js
+++ b/src/xflog/assets/app.js
@@ -9,11 +9,10 @@
     layout: "horizontal",
     events: [],
     next: null,
+    aggregate: null,
     selected: null,
     status: null,
     csrf: "",
-    generation: 0,
-    loading: false,
     groups: [],
     lens: "none",
     groupRange: "24h",
@@ -94,6 +93,7 @@
     label: eventLabel,
     initials,
     onOpen: (identity) => selectEvent(identity, true),
+    onNearEnd: () => requestOlder(false),
   });
   const { createActivityHud } = await import("/static/xf/activity-hud.js");
   const activityHud = createActivityHud({
@@ -139,17 +139,59 @@
   const { createNotice, statusNotice } = await import("/static/xf/notice.js");
   const notices = createNotice($("#notice"));
   const notice = (message, tone = "info") => notices.show(message, tone);
-  const { historyPages, groupSince, mergeHistory, createLiveHistory, updatedSelection } = await import("/static/xf/live-history.js");
+  const { createLiveHistory, historyScope } = await import("/static/xf/live-history.js");
+  const { historyCount } = await import("/static/xf/audience-groups.js");
+  const historyMore = $("#history-more");
+  const historyStatus = $("#history-page-status");
+  let historyPhase;
+  let historyError;
   const liveHistory = createLiveHistory({
-    api,
-    read: () => ({ ...state }),
-    apply: (events, next) => {
-      state.selected = updatedSelection(state.events, state.selected, events);
+    api: (path, signal) => api(path, undefined, signal),
+    read: () => state,
+    connected: () => root.isConnected,
+    clear: clearHistory,
+    apply: ({events, next, aggregate}, reason) => {
+      if (historyError && notices.message === historyError) notice("");
+      historyError = null;
+      const olderControl = document.activeElement === $("#memory-next");
+      if (!events.some(event => event.event_id === state.selected))
+        state.selected = events[Math.min(reason === "initial" ? 2 : 0, events.length - 1)]?.event_id || null;
       state.events = events;
       state.next = next;
+      state.aggregate = aggregate;
       if (root.dataset.route === "timeline") {
-        renderEvents(scene.update);
-        if (state.selected) selectEvent(state.selected, false, followControls.update);
+        renderEvents(reason === "initial" ? scene.render : scene.update, reason === "older");
+        if (state.selected)
+          selectEvent(state.selected, false, reason === "initial" ? followControls.select : followControls.update);
+        if (olderControl && $("#memory-next").disabled) $("#history").focus({preventScroll:true});
+      }
+    },
+    change: ({phase, catchingUp, olderError}) => {
+      historyPhase = phase;
+      $("#history").setAttribute("aria-busy", String(phase === "initial" || phase === "older"));
+      const hideOlder = !state.next || phase === "initial";
+      if (hideOlder && document.activeElement === historyMore)
+        $("#history").focus({preventScroll:true});
+      historyMore.hidden = hideOlder;
+      historyMore.setAttribute("aria-disabled", String(phase === "older"));
+      const buttonLabel = olderError ? "Retry older activity" : "Load older activity";
+      if (historyMore.textContent !== buttonLabel) historyMore.textContent = buttonLabel;
+      const message = phase === "older" ? "Loading older activity…"
+        : olderError ? "Older activity couldn’t be loaded."
+        : catchingUp ? "Catching up on new activity…"
+        : !phase && !state.next && state.events.length ? "All matching activity loaded" : "";
+      if (historyStatus.textContent !== message) historyStatus.textContent = message;
+    },
+    failure: (error, phase) => {
+      historyError = error.message;
+      notice(error.message, "error");
+      if (phase === "initial") {
+        $("#history").innerHTML =
+          '<div class="empty-state"><h2>History couldn’t be loaded.</h2><p>Check your local database and connection, then refresh to retry.</p><button class="button" type="button" data-retry>Retry</button></div>';
+        $("#history [data-retry]").addEventListener("click", () => {
+          $("#history").focus({preventScroll:true});
+          void liveHistory.load();
+        });
       }
     },
     refreshInteractions: () => interactionControls.refresh(),
@@ -203,6 +245,10 @@
     }
   }
   function view(name) {
+    if (name !== "timeline") {
+      liveHistory.cancel();
+      journal.clear({remember: true});
+    }
     for (const page of ["timeline", "profile", "about"])
       $(`#${page}-view`).hidden = page !== name;
     $$("[data-nav]").forEach((button) => {
@@ -225,9 +271,12 @@
         : null,
     );
     if (name === "timeline") {
-      renderEvents(scene.update);
-      if (state.selected) selectEvent(state.selected);
-      activityHud.refresh();
+      if (liveHistory.needsLoad()) void liveHistory.load(activityHud.refresh);
+      else {
+        renderEvents(scene.update);
+        if (state.selected) selectEvent(state.selected);
+        void activityHud.refresh();
+      }
     }
     $(".back-button").hidden = name === "timeline";
     if ($("#explore-dialog").open) $("#explore-dialog").close();
@@ -236,6 +285,7 @@
   }
   function renderStatus(status) {
     const previous = state.status;
+    const scope = historyScope(state);
     state.status = status;
     state.csrf = status.csrf;
     followControls.configure(status, state.demo);
@@ -296,8 +346,16 @@
       notice(status.message, "warning");
     if (!$("#profile-view").hidden) profileControls.renderStatus(status);
     renderAudienceGroups(status.audience_groups || []);
+    if (previous && historyScope(state) !== scope) {
+      if (root.dataset.route === "timeline") void liveHistory.load();
+      else {
+        liveHistory.cancel();
+        clearHistory();
+      }
+      return;
+    }
     if (
-      previous && !state.events.length &&
+      previous && !state.events.length && !historyPhase &&
       (previous.state !== status.state || previous.connected !== status.connected ||
         previous.selection.subscriptions !== status.selection.subscriptions)
     ) renderEvents();
@@ -311,7 +369,7 @@
             enabled: { [group.key]: toggle.checked },
           });
           renderAudienceGroups(result.audience_groups);
-          await load();
+          await liveHistory.load();
           announce("Audience groups saved. No extra X requests are made.");
         } catch (error) {
           toggle.checked = group.enabled;
@@ -321,17 +379,14 @@
     onLens: (lens) => {
       state.lens = lens;
       groupControls.render(state.groups, lens, state.groupRange);
-      scene.configure(state.groups, lens);
-      if (state.layout === "vertical") renderEvents();
-      void load();
+      void liveHistory.load();
     },
     onRange: setTimeRange,
   });
   async function setTimeRange(range) {
     state.groupRange = range;
     groupControls.render(state.groups, state.lens, range);
-    await activityHud.refresh();
-    if (state.groupRange === range) await load();
+    await liveHistory.load(activityHud.refresh);
   }
   function renderAudienceGroups(groups) {
     const signature = JSON.stringify(groups);
@@ -340,17 +395,14 @@
     state.lens = resolveLens(groups, state.lens);
     state.groups = groups;
     groupControls.render(groups, state.lens, state.groupRange);
-    scene.configure(groups, state.lens);
-    selectedSignal.render(
-      state.events.find((event) => event.event_id === state.selected),
-      groups,
-    );
-    if (state.layout === "vertical") renderEvents();
   }
-  function renderEvents(renderScene = scene.render) {
+  function renderEvents(renderScene = scene.render, append = false) {
+    if ($("#timeline-view").hidden) return;
     const list = $("#history");
     $(".scene-context").hidden = !state.events.length && state.lens === "none";
     $("#timeline-view").dataset.layout = state.layout;
+    if (state.layout === "horizontal" || !state.events.length)
+      journal.clear({remember: state.layout === "horizontal" && Boolean(state.events.length)});
     list.className = `history ${state.layout}`;
     list.setAttribute(
       "aria-label",
@@ -360,7 +412,7 @@
       selectedSignal.render(null);
       followControls.select(null);
       scene.clear();
-      $("#scene-people-count").textContent = state.lens === "none" ? "" : "0 people in saved history";
+      $("#scene-people-count").textContent = state.lens === "none" ? "" : historyCount(0, 0, state.aggregate);
       list.innerHTML = state.lens === "none" ? emptyHistory(state) : '<div class="empty-state"><h2>No activity in this range.</h2></div>';
       list
         .querySelector("[data-empty-action]")
@@ -371,16 +423,18 @@
           else setDemo(true);
         });
     } else if (state.layout === "horizontal") {
-      renderScene(state.events, state.selected);
+      renderScene(state.events, state.selected, state.aggregate);
     } else {
       scene.clear();
       journal.render(state.events, {
         selected: state.selected,
         modules: state.groups,
         lens: state.lens,
+        aggregate: state.aggregate,
+        append,
       });
       $("#scene-people-count").textContent =
-        `${state.events.length} ${state.events.length === 1 ? "event" : "events"} in ${state.lens === "none" ? "loaded" : "saved"} history`;
+        historyCount(state.events.length, new Set(state.events.map(event => event.actor_id)).size, state.aggregate);
     }
     if (state.layout === "vertical") {
       $("#memory-scrubber").max = Math.max(0, state.events.length - 1);
@@ -405,11 +459,9 @@
     if (!event) return;
     state.selected = identity;
     selectedSignal.render(event, state.groups);
-    $$("[data-event]").forEach((button) =>
-      button.setAttribute("aria-pressed", button.dataset.event === identity),
-    );
-    renderPersonDetail(root, event);
     if (state.layout === "horizontal") scene.select(identity);
+    else journal.select(identity);
+    renderPersonDetail(root, event);
     const index = state.events.findIndex((item) => item.event_id === identity);
     $("#journey-position").textContent =
       `Memory ${index + 1} of ${state.events.length} loaded`;
@@ -423,69 +475,23 @@
     updateFollow(event);
     interactionControls.select(event);
   }
-  function requestOlder() {
-    if (
-      !state.next ||
-      root.dataset.route !== "timeline" ||
-      $("#history").getAttribute("aria-busy") === "true"
-    )
-      return;
-    load(true);
+  function requestOlder(retry = true) {
+    if (root.dataset.route === "timeline") void liveHistory.older(retry);
   }
-  let historyLoad = null;
-  async function load(append = false) {
-    historyLoad?.abort();
-    const controller = new AbortController();
-    historyLoad = controller;
-    const generation = ++state.generation;
-    state.loading = true;
-    const demo = state.demo;
-    const snapshot = {...state, since: groupSince(state)};
-    if (!append && !state.events.length) {
-      selectedSignal.render(null);
-      followControls.select(null);
-      scene.clear();
-      $("#history").innerHTML =
-        '<div class="loading-state"><span class="loading-dot" aria-hidden="true"></span>Loading local history…</div>';
-    }
-    $("#history").setAttribute("aria-busy", "true");
-    try {
-      const rows = [];
-      let result;
-      const readPage = path => api(path, undefined, controller.signal);
-      for await (result of historyPages(readPage, snapshot, append ? state.next : "0")) {
-        if (generation !== state.generation) return;
-        rows.push(...result.events);
-        if (state.lens !== "none") $("#scene-people-count").textContent = `Loading saved history · ${rows.length} records`;
-      }
-      if (generation !== state.generation) return;
-      state.events = mergeHistory([...rows, ...(append ? state.events : [])])
-        .filter(event => !snapshot.since || Date.parse(event.received_at) >= Date.parse(snapshot.since));
-      state.next = result.next;
-      if (!state.events.some((event) => event.event_id === state.selected))
-        state.selected =
-          state.events[Math.min(2, state.events.length - 1)]?.event_id || null;
-      renderEvents();
-      if (state.selected) selectEvent(state.selected);
-      if (!append) void interactionControls.refresh();
-      announce(
-        `${rows.length} ${state.subject} events ${append ? "added" : "loaded"}.`,
-      );
-    } catch (error) {
-      if (generation !== state.generation) return;
-      notice(error.message, "error");
-      if (!state.events.length) {
-        scene.clear();
-        $("#history").innerHTML =
-          '<div class="empty-state"><h2>History couldn’t be loaded.</h2><p>Check your local database and connection, then refresh to retry.</p><button class="button" type="button" data-retry>Retry</button></div>';
-        $("#history [data-retry]").addEventListener("click", () => load());
-      }
-    } finally {
-      if (generation === state.generation) {
-        state.loading = false;
-        $("#history").setAttribute("aria-busy", "false");
-      }
-    }
+  historyMore.addEventListener("click", () => requestOlder());
+  function clearHistory() {
+    state.events = [];
+    state.next = state.selected = state.aggregate = null;
+    scene.clear();
+    scene.configure(state.groups, state.lens);
+    journal.clear();
+    selectedSignal.render(null);
+    followControls.select(null);
+    interactionControls.select(null);
+    $("#scene-people-count").textContent = "";
+    $("#journey-position").textContent = "Loading local history";
+    $("#history").innerHTML =
+      '<div class="loading-state"><span class="loading-dot" aria-hidden="true"></span>Loading local history…</div>';
   }
   async function setDemo(enabled) {
     const address = new URL(location.href);
@@ -493,17 +499,13 @@
     else address.searchParams.delete("demo");
     history.replaceState(null, "", address);
     state.demo = enabled;
-    state.events = [];
-    state.selected = null;
-    state.next = null;
     $("#demo-toggle").textContent = enabled
       ? "Leave demo ↗"
       : "Explore demo ↗";
     notice("");
     if (state.status) renderStatus(state.status);
-    view("timeline");
-    await activityHud.refresh();
-    await load();
+    if (root.dataset.route === "timeline") await liveHistory.load(activityHud.refresh);
+    else view("timeline");
   }
   function dialog(html) {
     if ($("#explore-dialog").open) $("#explore-dialog").close();
@@ -554,21 +556,16 @@
       $$("[data-filter]").forEach((item) =>
         item.setAttribute("aria-pressed", item === button),
       );
-      state.events = [];
-      state.selected = null;
-      load();
+      void liveHistory.load();
     }),
   );
   $$("[data-subject]").forEach((button) =>
-    button.addEventListener("click", async () => {
+    button.addEventListener("click", () => {
       state.subject = button.dataset.subject;
       $$("[data-subject]").forEach((item) =>
         item.setAttribute("aria-pressed", item === button),
       );
-      state.events = [];
-      state.selected = null;
-      await activityHud.refresh();
-      load();
+      void liveHistory.load(activityHud.refresh);
     }),
   );
   $$("[data-layout]").forEach((button) =>
@@ -577,7 +574,7 @@
       $$("[data-layout]").forEach((item) =>
         item.setAttribute("aria-pressed", item === button),
       );
-      renderEvents();
+      if (historyPhase !== "initial") renderEvents();
       announce(`${state.layout} timeline selected.`);
     }),
   );
@@ -601,7 +598,7 @@
         : Promise.resolve(null);
       const result = await api("/api/preferences", selection);
       renderStatus(await api("/api/status"));
-      await liveHistory.refresh();
+      if (root.dataset.route === "timeline") await liveHistory.refresh();
       if (!result.saved) fillProfile();
       notice(
         result.message,
@@ -655,14 +652,6 @@
     const end = state.layout === "horizontal" ? 1000 : state.events.length - 1;
     if (Number(event.target.value) >= end) requestOlder();
   });
-  $("#history").addEventListener("scroll", () => {
-    const history = $("#history");
-    if (
-      state.layout === "vertical" &&
-      history.scrollTop + history.clientHeight >= history.scrollHeight - 80
-    )
-      requestOlder();
-  });
 
   $("#motion-toggle").addEventListener("click", (event) => {
     const enabled = root.dataset.motion !== "on";
@@ -672,40 +661,76 @@
       ? "Ambient motion on"
       : "Ambient motion paused";
   });
+  let pollTimer;
+  let pageActive = true;
+  function stopHistory() {
+    pageActive = false;
+    clearTimeout(pollTimer);
+    liveHistory.cancel();
+  }
+  const unmount = new MutationObserver(() => {
+    if (!root.isConnected) dispose();
+  });
+  // Gradio can remove the workspace node or replace its outer host.
+  for (let node = root; node; ) {
+    const parent = node.parentNode;
+    if (parent) {
+      unmount.observe(parent, {childList: true});
+      node = parent;
+    } else node = node.host;
+  }
+  function dispose() {
+    stopHistory();
+    unmount.disconnect();
+    window.removeEventListener("pagehide", stopHistory);
+    window.removeEventListener("pageshow", resumeHistory);
+    scene.destroy();
+    journal.destroy();
+    groupControls.destroy();
+    activityHud.destroy();
+    selectedSignal.destroy();
+    followControls.destroy();
+    interactionControls.destroy();
+    notices.destroy();
+  }
+  window.addEventListener("pagehide", stopHistory);
+  window.addEventListener("pageshow", resumeHistory);
+  function resumeHistory(event) {
+    if (event.persisted) {
+      pageActive = true;
+      void poll();
+    }
+  }
   async function poll() {
     if (!root.isConnected) {
-      historyLoad?.abort();
-      scene.destroy();
-      groupControls.destroy();
-      activityHud.destroy();
-      selectedSignal.destroy();
-      followControls.destroy();
-      interactionControls.destroy();
-      notices.destroy();
+      dispose();
       return;
     }
     if (!document.hidden || state.status?.selection.notifications) {
       try {
-        renderStatus(await api("/api/status"));
-        if (root.dataset.route === "timeline") await activityHud.refresh();
-        await liveHistory.refresh();
+        const status = await api("/api/status");
+        if (!pageActive) return;
+        renderStatus(status);
+        if (root.dataset.route === "timeline") {
+          await activityHud.refresh();
+          if (pageActive && root.dataset.route === "timeline") await liveHistory.refresh();
+        }
       } catch (error) {
         notices.update({ message: error.message, tone: "error" });
       }
     }
-    setTimeout(poll, 10000);
+    if (pageActive) pollTimer = setTimeout(poll, 10000);
   }
   try {
-    renderStatus(await api("/api/status"));
+    const status = await api("/api/status");
+    if (!pageActive) return;
+    renderStatus(status);
     if (new URLSearchParams(location.search).get("demo") === "1")
       await setDemo(true);
-    else {
-      await activityHud.refresh();
-      await load();
-    }
+    else await liveHistory.load(activityHud.refresh);
     const hash = location.hash.slice(1);
     if (["profile", "about"].includes(hash)) view(hash);
-    setTimeout(poll, 10000);
+    if (pageActive) pollTimer = setTimeout(poll, 10000);
   } catch (error) {
     notice(error.message, "error");
   }
diff --git a/src/xflog/assets/audience-groups.js b/src/xflog/assets/audience-groups.js
index 6cc213a..f7c4e71 100644
--- a/src/xflog/assets/audience-groups.js
+++ b/src/xflog/assets/audience-groups.js
@@ -1,4 +1,14 @@
-export function groupEvents(events, modules, lens) {
+export function historyCount(loadedEvents, loadedActors, aggregate) {
+  const people = count => `${count} ${count === 1 ? "person" : "people"}`;
+  const records = count => `${count} ${count === 1 ? "event" : "events"}`;
+  const loaded = `${records(loadedEvents)} · ${people(loadedActors)}`;
+  if (!aggregate) return `${loaded} loaded`;
+  const saved = `${records(aggregate.total_events)} · ${people(aggregate.distinct_actors)}`;
+  return loadedEvents === aggregate.total_events && loadedActors === aggregate.distinct_actors
+    ? `${saved} saved` : `${loaded} loaded · ${saved} saved`;
+}
+
+export function groupEvents(events, modules, lens, {totals = [], summaries = false} = {}) {
   if (lens === "none") return null;
   const module = modules.find((item) => item.key === lens && item.enabled);
   if (!module) return null;
@@ -27,14 +37,25 @@ export function groupEvents(events, modules, lens) {
     const group = buckets.get(key) || buckets.get("unknown");
     group.events.push(event);
   }
-  const result = [...buckets.values()].filter((group) => group.events.length);
+  for (const total of totals) {
+    const loaded = buckets.get(total.key);
+    if (!summaries && !loaded?.events.length) continue;
+    const bucket = loaded ?? {key: total.key, tone: total.tone, events: []};
+    Object.assign(bucket, {
+      label: total.label,
+      eventCount: total.event_count,
+      distinctActors: total.distinct_actors,
+    });
+    buckets.set(total.key, bucket);
+  }
+  const groupsWithEvents = [...buckets.values()].filter(group => group.events.length || group.eventCount);
   return module.dynamic_buckets
-    ? result.sort((a, b) =>
+    ? groupsWithEvents.sort((a, b) =>
         a.key === "unknown"
           ? 1
           : b.key === "unknown"
             ? -1
             : a.label.localeCompare(b.label),
       )
-    : result;
+    : groupsWithEvents;
 }
diff --git a/src/xflog/assets/constellation-colors.js b/src/xflog/assets/constellation-colors.js
index b44d43f..cb827c1 100644
--- a/src/xflog/assets/constellation-colors.js
+++ b/src/xflog/assets/constellation-colors.js
@@ -33,10 +33,13 @@ export function colorGroups(groups, module) {
 }
 
 export function groupDescription(group) {
-  const actions = group.people.length;
-  return `${actions} ${actions === 1 ? "action" : "actions"} · ${group.personCount} ${group.personCount === 1 ? "person" : "people"}`;
+  const actions = group.eventCount ?? group.people.length;
+  const people = group.distinctActors ?? group.personCount;
+  const total = `${actions} ${actions === 1 ? "action" : "actions"} · ${people} ${people === 1 ? "person" : "people"}`;
+  return actions !== group.people.length || people !== group.personCount
+    ? `${total} saved · ${group.people.length} ${group.people.length === 1 ? "action" : "actions"} loaded` : total;
 }
 
 export function groupKey(groups, escape) {
-  return groups.map(group => `<span class="constellation-key-item" role="listitem" tabindex="0" title="${escape(groupDescription(group))}" aria-label="${escape(group.label)}, ${escape(groupDescription(group))}"><svg viewBox="0 0 22 12" aria-hidden="true" style="color:${group.color}"><path d="M1 6H21" stroke-dasharray="${group.dash}"/></svg><span class="constellation-key-label">${escape(group.label)}</span><span class="constellation-key-count">${group.people.length}</span></span>`).join("");
+  return groups.map(group => `<span class="constellation-key-item" role="listitem" tabindex="0" title="${escape(groupDescription(group))}" aria-label="${escape(group.label)}, ${escape(groupDescription(group))}"><svg viewBox="0 0 22 12" aria-hidden="true" style="color:${group.color}"><path d="M1 6H21" stroke-dasharray="${group.dash}"/></svg><span class="constellation-key-label">${escape(group.label)}</span><span class="constellation-key-count">${group.eventCount ?? group.people.length}</span></span>`).join("");
 }
diff --git a/src/xflog/assets/constellation-layout.js b/src/xflog/assets/constellation-layout.js
index 605f09b..a2ff6dc 100644
--- a/src/xflog/assets/constellation-layout.js
+++ b/src/xflog/assets/constellation-layout.js
@@ -103,13 +103,17 @@ export function visibleLabels(candidates, selected) {
   return visible;
 }
 
-export function constellationLayout({
+export function constellationLayout({zoom, ...options}) {
+  return prepareConstellation(options)(zoom);
+}
+
+export function prepareConstellation({
   events,
   width,
   height,
-  zoom,
   modules,
   lens,
+  aggregate,
 }) {
   const people = entriesFromEvents(events);
   const upper = Math.min(90, height * 0.14);
@@ -119,80 +123,91 @@ export function constellationLayout({
     1,
     Math.floor((height - upper - Math.max(80, upper + 1)) / rowHeight),
   );
-  let rawBuckets = groupEvents(events, modules, lens);
+  const totals = aggregate?.groups;
+  const rawBuckets = groupEvents(events, modules, lens, {totals});
   const module = modules.find(module => module.key === lens && module.enabled);
-  if (rawBuckets) rawBuckets = colorGroups(rawBuckets, module);
-  const buckets = rawBuckets;
-  const groups = buckets
-    ? buckets.map(({ events, ...bucket }) => ({
+  const groups = rawBuckets
+    ? colorGroups(rawBuckets, module).map(({ events, ...bucket }) => ({
         ...bucket,
         people: entriesFromEvents(events),
         personCount: peopleFromEvents(events).length,
       }))
     : [{ key: "all", label: "Loaded audience", tone: "neutral", people }];
-  const occupied = colorGroups(
-    groups.filter((group) => group.people.length),
-    module,
-  );
-  const columns = zoom <= 0.25 && buckets
-    ? Math.min(occupied.length, Math.max(availableColumns, Math.ceil(occupied.length / availableRows)))
-    : Math.min(occupied.length, availableColumns);
-  const overviewWidth = buckets ? Math.max(width, columns * 160) : width;
-  const rows = zoom <= 0.25 ? Math.ceil(occupied.length / Math.max(1, columns)) : 1;
-  const lower = Math.max(
-    upper + rows * rowHeight,
-    height - Math.min(255, height * 0.36),
-  );
-  const areaHeight = lower - upper;
-  occupied.forEach((group, index) => {
-    const row = Math.floor(index / Math.max(1, columns));
-    const inRow = Math.min(columns, occupied.length - row * columns);
-    group.x = (zoom <= 0.25 ? overviewWidth : width) * (((index % columns) + 0.5) / inRow);
-    group.y = zoom <= 0.25 ? upper + areaHeight * ((row + 0.5) / rows) : upper + areaHeight / 2;
-  });
+  const occupied = groups.filter(group => group.people.length);
   const positions = new Map();
   occupied.forEach((group, groupIndex) => {
-    group.people.forEach((person, memberIndex) => {
-      positions.set(person, { group, memberIndex, groupIndex });
+    group.people.forEach((person, member) => {
+      positions.set(person, { group, member, groupIndex });
     });
   });
-  const blend = clamp((zoom - 0.25) / 0.75, 0, 1);
-  const spacing = (width < 680 ? 245 : 285) * zoom;
-  const orderedPeople = buckets ? [...occupied].reverse().flatMap(group => group.people) : people;
-  const groupGap = buckets ? width * 0.5 * blend : 0;
-  const worldWidth = zoom <= 0.25 ? overviewWidth : width + Math.max(0, orderedPeople.length - 1) * spacing * blend +
-    Math.max(0, occupied.length - 1) * groupGap;
-  const points = orderedPeople.map((person, index) => {
-    const { group, memberIndex: member, groupIndex } = positions.get(person);
+  const ordered = rawBuckets ? [...occupied].reverse().flatMap(group => group.people) : people;
+  const placements = ordered.map(person => {
+    const { group, member, groupIndex } = positions.get(person);
     const angle = member * 2.399963229728653;
     const radius = Math.min(width < 600 ? 44 : 76, 14 + Math.sqrt(member) * 13);
-    const fitX = clamp(group.x + Math.cos(angle) * radius, 32, (zoom <= 0.25 ? overviewWidth : width) - 32);
-    const fitY = clamp(group.y + Math.sin(angle) * radius * 0.6, upper, lower);
-    const timelineX = width / 2 + (orderedPeople.length - 1 - index) * spacing;
-    const groupOffset = groupIndex * groupGap;
-    const timelineY = clamp(
-      group.y + (seed(person.id) - 0.5) * Math.min(400, areaHeight * 0.9),
-      upper + 20,
-      lower - 20,
-    );
     return {
-      ...person,
-      group: group.key,
-      tone: group.tone,
-      color: group.color,
-      x: zoom <= 0.25 ? fitX : width / 2 + (timelineX - width / 2) * blend + groupOffset,
-      y: fitY * (1 - Math.sqrt(blend)) + timelineY * Math.sqrt(blend),
+      group, groupIndex,
+      dx: Math.cos(angle) * radius,
+      dy: Math.sin(angle) * radius * 0.6,
+      drift: seed(person.id) - 0.5,
     };
   });
-  return {
-    people: points,
+  // Scene bindings keep these point identities while zoom changes their coordinates.
+  const geometry = {
+    people: ordered.map((person, index) => {
+      const {group} = placements[index];
+      return {...person, group: group.key, tone: group.tone, color: group.color};
+    }),
     groups: occupied,
-    grouped: buckets !== null,
-    width: worldWidth,
+    grouped: rawBuckets !== null,
+    unloadedGroups: rawBuckets && totals ? totals.length - rawBuckets.filter(bucket => bucket.eventCount !== undefined).length : 0,
     upper,
-    lower,
-    overview: buckets !== null && zoom <= 0.25,
-    canPan: worldWidth > width + 0.5,
-    center: (upper + lower) / 2,
+  };
+  const grouped = geometry.grouped;
+  const count = geometry.people.length;
+  return (zoom) => {
+    const columns = zoom <= 0.25 && grouped
+      ? Math.min(occupied.length, Math.max(availableColumns, Math.ceil(occupied.length / availableRows)))
+      : Math.min(occupied.length, availableColumns);
+    const overviewWidth = grouped ? Math.max(width, columns * 160) : width;
+    const rows = zoom <= 0.25 ? Math.ceil(occupied.length / Math.max(1, columns)) : 1;
+    const lower = Math.max(
+      upper + rows * rowHeight,
+      height - Math.min(255, height * 0.36),
+    );
+    const areaHeight = lower - upper;
+    occupied.forEach((group, index) => {
+      const row = Math.floor(index / Math.max(1, columns));
+      const inRow = Math.min(columns, occupied.length - row * columns);
+      group.x = (zoom <= 0.25 ? overviewWidth : width) * (((index % columns) + 0.5) / inRow);
+      group.y = zoom <= 0.25 ? upper + areaHeight * ((row + 0.5) / rows) : upper + areaHeight / 2;
+    });
+    const blend = clamp((zoom - 0.25) / 0.75, 0, 1);
+    const spacing = (width < 680 ? 245 : 285) * zoom;
+    const groupGap = grouped ? width * 0.5 * blend : 0;
+    const worldWidth = zoom <= 0.25 ? overviewWidth : width + Math.max(0, count - 1) * spacing * blend +
+      Math.max(0, occupied.length - 1) * groupGap;
+    const blendY = Math.sqrt(blend);
+    geometry.people.forEach((point, index) => {
+      const { group, groupIndex, dx, dy, drift } = placements[index];
+      const fitX = clamp(group.x + dx, 32, (zoom <= 0.25 ? overviewWidth : width) - 32);
+      const fitY = clamp(group.y + dy, upper, lower);
+      const timelineX = width / 2 + (count - 1 - index) * spacing;
+      const groupOffset = groupIndex * groupGap;
+      const timelineY = clamp(
+        group.y + drift * Math.min(400, areaHeight * 0.9),
+        upper + 20,
+        lower - 20,
+      );
+      point.x = zoom <= 0.25 ? fitX : width / 2 + (timelineX - width / 2) * blend + groupOffset;
+      point.y = fitY * (1 - blendY) + timelineY * blendY;
+    });
+    return Object.assign(geometry, {
+      width: worldWidth,
+      lower,
+      overview: grouped && zoom <= 0.25,
+      canPan: worldWidth > width + 0.5,
+      center: (upper + lower) / 2,
+    });
   };
 }
diff --git a/src/xflog/assets/constellation-viewport.js b/src/xflog/assets/constellation-viewport.js
new file mode 100644
index 0000000..9a6f010
--- /dev/null
+++ b/src/xflog/assets/constellation-viewport.js
@@ -0,0 +1,58 @@
+// Cover the widest label's half-width plus the viewport and collision gaps.
+export const overscan = 128;
+
+function bound(items, value, coordinate, afterEqual = false) {
+  let start = 0, end = items.length;
+  while (start < end) {
+    const middle = (start + end) >>> 1;
+    const x = coordinate(items[middle]);
+    if (x < value || (afterEqual && x === value)) start = middle + 1;
+    else end = middle;
+  }
+  return start;
+}
+
+const personX = item => item.label.person.x;
+const segmentStart = item => item.start;
+const maxEnd = item => item.maxEnd;
+
+export function createViewportIndex(labels, sparks) {
+  const people = labels.map((label, index) => ({label, index}))
+    .sort((a, b) => personX(a) - personX(b) || a.index - b.index);
+  const segments = sparks.map(spark => ({
+    spark,
+    start: Math.min(spark.a.x, spark.b.x),
+    end: Math.max(spark.a.x, spark.b.x),
+  })).sort((a, b) => a.start - b.start);
+  let end = -Infinity;
+  for (const segment of segments) {
+    end = Math.max(end, segment.end);
+    segment.maxEnd = end;
+  }
+  return {
+    range(left, right) {
+      const start = bound(people, left, personX);
+      const stop = bound(people, right, personX, true);
+      const connections = [];
+      // Same-group timeline links join adjacent points. Prefix bounds also
+      // retain any segment that spans the range with both endpoints outside it.
+      const first = bound(segments, left, maxEnd);
+      const last = bound(segments, right, segmentStart, true);
+      for (let index = first; index < last; index++)
+        if (segments[index].end >= left) connections.push(segments[index].spark);
+      return {
+        labels: people.slice(start, stop).sort((a, b) => a.index - b.index).map(item => item.label),
+        connections,
+      };
+    },
+    nearest(center) {
+      const split = bound(people, center, personX);
+      const right = people[split];
+      const left = split && people[bound(people, personX(people[split - 1]), personX)];
+      if (!left) return right?.label.person;
+      if (!right) return left.label.person;
+      const difference = (center - personX(left)) - (personX(right) - center);
+      return (difference < 0 || (difference === 0 && left.index < right.index) ? left : right).label.person;
+    },
+  };
+}
diff --git a/src/xflog/assets/constellation.css b/src/xflog/assets/constellation.css
index aa5da98..cc9a12b 100644
--- a/src/xflog/assets/constellation.css
+++ b/src/xflog/assets/constellation.css
@@ -512,6 +512,8 @@
   border: 0;
   background: transparent;
 }
+/* Retained timeline positions must not extend the overview scroll area. */
+.is-group-overview .star-label,
 .is-group-overview .star-initials {
   display: none;
 }
@@ -619,7 +621,8 @@
   stroke-linejoin: round;
 }
 .star-post { display: none; }
-.is-selected .star-post {
+.is-selected .star-post,
+.star-post:focus {
   display: block;
   margin-top: 8px;
   padding: 6px 9px;
@@ -632,11 +635,27 @@
   overflow-wrap: anywhere;
   text-decoration: none;
 }
+.star-label:focus-within { z-index: 7; }
+@media (max-width: 400px) {
+  .constellation-person:not(.is-selected) .star-label:has(.star-post:focus) {
+    width: 96px;
+  }
+  .constellation-person:not(.is-selected) .star-label:has(.star-post:focus) .star-identity {
+    display: none;
+  }
+}
+.constellation-person:not(.is-selected) .star-post:focus > span:first-child {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+}
 .star-post:hover { text-decoration: underline; }
 .star-post > span:first-child::before { content: "“"; }
 .star-post > span:first-child::after { content: "”"; }
 
-.is-selected .star-post {
+.is-selected .star-post,
+.star-post:focus {
   position: absolute;
   left: 4px;
   right: 4px;
diff --git a/src/xflog/assets/constellation.js b/src/xflog/assets/constellation.js
index 423c45d..bba2bde 100644
--- a/src/xflog/assets/constellation.js
+++ b/src/xflog/assets/constellation.js
@@ -5,13 +5,15 @@ import {
   flowStep,
   wheelDistance,
   normalizeMotionSpeed,
-  constellationLayout,
+  prepareConstellation,
   visibleLabels,
   seed,
 } from "./constellation-layout.js";
+import { createViewportIndex, overscan } from "./constellation-viewport.js";
 import { createShootingStar } from "./shooting-star.js";
 import { verificationBadge } from "./verification-badge.js";
 import { groupKey, groupDescription } from "./constellation-colors.js";
+import { historyCount } from "./audience-groups.js";
 
 export function createConstellation({
   element,
@@ -30,14 +32,20 @@ export function createConstellation({
     zoomIn = $("#zoom-in"), zoomOut = $("#zoom-out"),
     history = $("#memory-scrubber"), peopleCount = $("#scene-people-count"),
     next = $("#memory-next"), previous = $("#memory-previous"),
-    key = $("#constellation-key"), context = $(".scene-context");
+    key = $("#constellation-key"), context = $(".scene-context"), signal = $("#selected-signal");
   const shootingStar = createShootingStar();
   let events = [],
     selected = null,
     modules = [],
     lens = "none",
-    geometry = null;
+    aggregate = null,
+    geometry = null,
+    layoutAtZoom = null;
+  let selectionByEvent = null, selection = null, bindingsByEvent = null;
+  let viewportIndex = null, viewportLabels = [], activeSparks = [],
+    positionedLabels = new Set(), labelsByNode = null;
   let sceneVersion = 0;
+  let restoringFocus = false;
   // History is deduplicated by event ID before grouping, so only data changes alter membership.
   let personCount = 0, countDirty = true;
   let zoom = 0.8,
@@ -54,8 +62,12 @@ export function createConstellation({
     sparks = [],
     actorButtons = [],
     sky = null, meteor = null, meteorTail = null,
-    labelInset = 16,
+    canvas = null, linkLayer = null, groupLayer = null,
+    groupButtons = null, connections = null,
+    sceneWidth = 0, sceneHeight = 0,
     keyScope = null;
+  let labelInset = null, labelsDirty = true, viewportLeft = null,
+    animationDirty = true, lastMotion = null, browseLeft = null;
   const reduced = matchMedia("(prefers-reduced-motion: reduce)");
   const active = () =>
     geometry &&
@@ -64,13 +76,10 @@ export function createConstellation({
     root.dataset.route === "timeline" &&
     !document.hidden;
   const moving = () => !reduced.matches && root.dataset.motion !== "off";
-  const current = () => events.find((event) => event.event_id === selected);
   const maximum = () => Math.max(0, element.scrollWidth - element.clientWidth);
-  const position = () =>
-    geometry?.people.find((person) => person.events.some(event => event.event_id === selected));
-  const selectedProfileIndex = () =>
-    geometry?.people.indexOf(position()) ??
-    -1;
+  const singletonCanLoad = () => Boolean(geometry?.people.length === 1 && hasOlder());
+  const position = () => selection?.person;
+  const selectedProfileIndex = () => selection?.index ?? -1;
   function personLabel(person, event = person.event) {
     return `<button type="button" class="star-identity"><strong>${esc(event.name || event.handle || "X account")}${verificationBadge(event, modules)}</strong><span class="star-handle">${esc(event.handle ? "@" + event.handle : "ID " + event.actor_id)}</span>${activityIcon(event)}</button>${postPreview(event, 140, "star-post")}`;
   }
@@ -92,15 +101,20 @@ export function createConstellation({
     labels = [];
     sparks = [];
     actorButtons = [];
-    sky = meteor = meteorTail = null;
+    sky = meteor = meteorTail = canvas = linkLayer = groupLayer = null;
+    groupButtons = connections = layoutAtZoom = null;
+    selectionByEvent = selection = keyScope = bindingsByEvent = labelsByNode = null;
+    viewportIndex = null;
+    viewportLabels = activeSparks = [];
+    positionedLabels.clear();
+    viewportLeft = browseLeft = labelInset = null;
+    labelsDirty = animationDirty = true;
+    lastMotion = null;
   }
   function queue() {
     if (!frame && active()) frame = requestAnimationFrame(paint);
   }
-  function navigator() {
-    if (!geometry) return;
-    travelControls();
-    groupHint();
+  function zoomControls() {
     zoomValue.textContent = `${Math.round(zoom * 100)}%`;
     zoomControl.value = zoom;
     zoomControl.setAttribute(
@@ -113,36 +127,37 @@ export function createConstellation({
       control.disabled = geometry.people.length < 2;
     zoomOut.disabled ||= zoom === 0;
     zoomIn.disabled ||= zoom === 2;
-    history.max = 1000;
     history.disabled = !geometry.canPan;
-    history.value = maximum()
-      ? Math.round((1 - element.scrollLeft / maximum()) * 1000)
-      : 500;
-    peopleCount.textContent =
-      `${personCount} ${personCount === 1 ? "person" : "people"} in ${geometry.grouped ? "saved" : "loaded"} history`;
+  }
+  function scrubber() {
+    const max = maximum();
+    const value = max ? Math.round((1 - element.scrollLeft / max) * 1000) : 500;
+    if (Number(history.value) !== value) history.value = value;
   }
   function groupHint() {
-    key.hidden = !geometry.grouped;
-    const group = geometry.groups.find(item => item.key === position()?.group);
-    const scope = geometry.overview ? "overview" : group?.key;
+    const group = geometry.grouped && !geometry.overview
+      ? geometry.groups.find(item => item.key === position()?.group)
+      : null;
+    const scope = geometry.overview ? "overview" : group;
     if (keyScope === scope) return;
     keyScope = scope;
+    const unloaded = geometry.unloadedGroups;
+    const overview = unloaded ? `Loaded constellations · ${unloaded} ${unloaded === 1 ? "group" : "groups"} with no events loaded` : "All constellations";
     key.innerHTML = geometry.grouped
-      ? geometry.overview ? '<span class="constellation-key-item">All constellations</span>'
+      ? geometry.overview ? `<span class="constellation-key-item">${overview}</span>`
         : groupKey(group ? [group] : [], esc)
       : "";
     key.setAttribute("aria-label", geometry.overview ? "Constellation groups" : "Current constellation");
-    labelInset = (context?.offsetHeight || 0) + 28;
+    labelInset = null;
+    labelsDirty = true;
   }
-  function selectVisibleProfile(notify = onSelect) {
+  function selectVisibleProfile(notify = onSelect, duringPaint = false) {
     const center = element.scrollLeft + element.clientWidth / 2;
-    const closest = geometry.people.reduce(
-      (best, person) =>
-        Math.abs(person.x - center) < Math.abs(best.x - center) ? person : best,
-      geometry.people[0],
-    );
+    // Pannable group overviews retain their existing browsing behavior.
+    const closest = viewportIndex.nearest(center);
     if (closest && closest !== position()) {
-      select(closest.event.event_id);
+      applySelection(closest.event.event_id);
+      if (!duringPaint) queue();
       notify(closest.event.event_id);
     }
   }
@@ -152,7 +167,8 @@ export function createConstellation({
     for (const [button, available] of [
       [
         next,
-        canPan && (index < geometry.people.length - 1 || hasOlder()),
+        (canPan && (index < geometry.people.length - 1 || hasOlder())) ||
+          singletonCanLoad(),
       ],
       [previous, canPan && index > 0],
     ]) {
@@ -164,141 +180,205 @@ export function createConstellation({
         : button === next ? "Older memory" : "Newer memory");
     }
   }
-  function select(identity) {
-    if (!root.isConnected || !element.isConnected) return;
+  function applySelection(identity, initial = false) {
+    if (!initial && identity === selected) return false;
+    const previous = position();
     selected = identity;
+    selection = selectionByEvent.get(identity);
     const chosenPerson = position();
-    actorButtons.forEach(({button, personElement, person}) => {
+    const updateBinding = (item, index) => {
+      const {button, personElement, person} = actorButtons[index];
       const chosen = button.dataset.event === chosenPerson?.event.event_id;
-      const event = chosen ? current() : person.event;
+      const event = chosen ? selection.event : person.event;
       button.setAttribute("aria-pressed", String(chosen));
       button.setAttribute(
         "aria-label",
         `${event.name || event.handle || "X account"}, ${label(event)}, recorded event`,
       );
       personElement.classList.toggle("is-selected", chosen);
-    });
-    for (const item of labels) {
-      const event = item.person === chosenPerson ? current() : item.person.event;
-      item.label.setAttribute("aria-label", `${item.person === chosenPerson ? "Open recorded event for" : "Select"} ${event.name || event.handle || "X account"}`);
-      if (item.identity !== event.event_id) {
-        item.label.innerHTML = personLabel(item.person, event);
-        item.identity = event.event_id;
-        item.controls = item.label.querySelectorAll?.("button,a") || [];
-        item.preview = item.label.querySelector?.(".star-post");
+      const chosenLabel = item.person === chosenPerson;
+      const labelEvent = chosenLabel ? selection.event : item.person.event;
+      item.label.setAttribute("aria-label", `${chosenLabel ? "Open recorded event for" : "Select"} ${labelEvent.name || labelEvent.handle || "X account"}`);
+      if (initial) {
+        item.label.innerHTML = personLabel(item.person, labelEvent);
+        item.controls = item.label.querySelectorAll("button,a");
+        item.preview = item.label.querySelector(".star-post");
+        showLabel(item, false);
       }
-      const box = item.label.getBoundingClientRect();
-      item.width = box.width;
-      item.height = box.height;
+      item.width = undefined;
+    };
+    if (initial) labels.forEach(updateBinding);
+    else {
+      for (const id of new Set([previous?.event.event_id, chosenPerson?.event.event_id]))
+        for (const index of bindingsByEvent.get(id) ?? []) updateBinding(labels[index], index);
     }
-    navigator();
-    queue();
+    if (initial || previous?.group !== chosenPerson?.group) groupHint();
+    travelControls();
+    labelsDirty = true;
+    return true;
   }
-  function paint(now) {
-    frame = 0;
-    if (!active()) {
-      last = 0;
-      return;
-    }
-    const elapsed = last ? clamp(now - last, 0, 64) : 0;
-    last = now;
-    if (moving())
-      clock += elapsed * normalizeMotionSpeed(root.dataset.motionSpeed || 1);
-    if (target !== null) {
-      const previous = element.scrollLeft;
-      const next = moving()
-        ? flowStep(element.scrollLeft, target, elapsed || 16)
-        : target;
-      element.scrollLeft = next;
-      // Browsers can round away the final eased step; finish instead of stalling.
-      if (Math.abs(target - element.scrollLeft) < 2 || element.scrollLeft === previous) {
-        element.scrollLeft = target;
-        target = null;
-        seeking = false;
+  function select(identity) {
+    if (geometry && root.isConnected && element.isConnected && applySelection(identity))
+      queue();
+  }
+  function showLabel(item, visible) {
+    if (item.visible === visible) return;
+    item.visible = visible;
+    item.label.style.visibility = visible ? "visible" : "hidden";
+    item.label.setAttribute("aria-hidden", String(!visible));
+    item.label.tabIndex = -1;
+    item.controls?.forEach(control => { control.tabIndex = visible ? 0 : -1; });
+  }
+  function resetViewport() {
+    viewportIndex = createViewportIndex(labels, geometry.overview ? [] : sparks);
+    viewportLeft = null;
+  }
+  function updateViewport(left) {
+    const range = viewportIndex.range(left - overscan, left + element.clientWidth + overscan);
+    viewportLabels = range.labels;
+    const next = range.connections;
+    if (next.length === activeSparks.length && next.every((spark, index) => spark === activeSparks[index]))
+      return false;
+    const retained = new Set(next);
+    for (const spark of activeSparks) {
+      if (!retained.has(spark)) {
+        spark.element.setAttribute("display", "none");
+        spark.trail.setAttribute("display", "none");
+        spark.hidden = true;
       }
     }
-    const browsing = geometry.canPan && !seeking && element.dataset.userScrolling === "true";
-    if (browsing) selectVisibleProfile(onPreview);
-    const left = element.scrollLeft,
-      chosenPerson = position();
-    sky.style.transform = `translateX(${left}px)`;
-    const shot = moving()
-      ? shootingStar(clock, element.clientWidth, element.clientHeight)
-      : null;
-    meteor.style.opacity = String(shot?.opacity || 0);
-    meteor.dataset.active = String(Boolean(shot && shot.opacity > 0));
-    if (shot)
-      for (const key of ["x1", "y1", "x2", "y2"]) {
-        meteor.setAttribute(key, shot[key].toFixed(2));
-        meteorTail.setAttribute(key, shot[key].toFixed(2));
+    activeSparks = next;
+    return true;
+  }
+  function layoutLabels(left, focusedControl = document.activeElement) {
+    const chosenPerson = position();
+    const chosenLabel = labels[selectedProfileIndex()];
+    const focusedLabel = labelsByNode.get(focusedControl?.closest("[data-label]"));
+    const relevant = new Set(viewportLabels);
+    if (chosenLabel) relevant.add(chosenLabel);
+    if (focusedLabel) relevant.add(focusedLabel);
+    const viewportWidth = element.clientWidth;
+    const bottom = geometry.lower + 25;
+    // The signal can grow with the selected event; reserve its actual space only for a pinned label.
+    const focusBottom = focusedLabel && focusedLabel !== chosenLabel
+      ? Math.min(element.clientHeight - 80, (signal?.offsetHeight ? signal.offsetTop - element.offsetTop - 8 : Infinity))
+      : 0;
+    labelInset ??= (context?.offsetHeight || 0) + 28;
+    // Read invalidated sizes together before positioning any label.
+    for (const item of relevant) {
+      const previewShown = item.preview &&
+        (item === chosenLabel || item.preview === focusedControl);
+      if (item.width === undefined || item.previewShown !== previewShown) {
+        item.previewShown = previewShown;
+        const box = item.label.getBoundingClientRect();
+        item.width = box.width;
+        item.height = box.height;
+        item.previewHeight = previewShown ? item.preview.offsetHeight : 0;
       }
+    }
     const candidates = [];
-    for (const item of labels) {
+    for (const item of [...relevant].sort((a, b) => a.index - b.index)) {
       const chosen = item.person === chosenPerson;
       const x = item.person.x - left;
       const width = item.width,
         height = item.height;
-      const bottom = geometry.lower + 25;
       let top = item.person.y + 27;
-      const previewHeight = chosen && item.preview ? item.preview.offsetHeight : 0;
+      const previewHeight = item.previewHeight;
       if (top + height + (previewHeight ? previewHeight + 8 : 0) > bottom)
         top = item.person.y - height - (previewHeight ? 40 : 25);
       top = clamp(top, labelInset, Math.max(labelInset, bottom - height));
-      const previewTop = Math.max(item.person.y + 40, top < item.person.y ? 0 : top + height + 8);
-      if (chosen && item.preview) item.preview.style.top = `${previewTop - top}px`;
-      const previewBottom = chosen && item.preview ? previewTop + item.preview.offsetHeight : top + height;
+      const pinnedFocus = item === focusedLabel && !chosen;
+      const previewTop = pinnedFocus
+        ? top + height + 8
+        : Math.max(item.person.y + 40, top < item.person.y ? 0 : top + height + 8);
+      if (item.previewShown) item.preview.style.top = `${previewTop - top}px`;
+      const previewBottom = item.previewShown ? previewTop + previewHeight : top + height;
+      const blockHeight = Math.max(height, previewBottom - top);
+      const limit = pinnedFocus ? Math.max(labelInset, focusBottom - blockHeight) : top;
+      top = Math.min(top, limit);
       const center = clamp(
-        x, width / 2 + 16, element.clientWidth - width / 2 - 16,
+        x, width / 2 + 16, viewportWidth - width / 2 - 16,
       );
       item.label.style.left = `${center + left}px`;
       item.label.style.top = `${top}px`;
       if (
-        !geometry.overview &&
-        (chosen || (x >= 12 && x <= element.clientWidth - 12)) &&
+        (chosen || item === focusedLabel || (x >= 12 && x <= viewportWidth - 12)) &&
         center - width / 2 >= 12 &&
-        center + width / 2 <= element.clientWidth - 12
+        center + width / 2 <= viewportWidth - 12
       ) {
         const candidate = {
-          id: item.person.event.event_id,
+          id: item.person,
           left: center - width / 2,
           right: center + width / 2,
           top,
-          bottom: Math.max(top + height, previewBottom),
+          bottom: top + blockHeight,
           minTop: labelInset,
-          maxBottom: Math.max(bottom, previewBottom),
-          distance: Math.abs(center - element.clientWidth / 2),
+          maxBottom: pinnedFocus ? focusBottom : Math.max(bottom, previewBottom),
+          distance: pinnedFocus ? -1 : Math.abs(center - viewportWidth / 2),
         };
         const alternateTop = clamp(
           top < item.person.y ? item.person.y + 27 : item.person.y - height - 25,
           labelInset,
-          Math.max(labelInset, bottom - height),
+          Math.max(labelInset, pinnedFocus ? candidate.maxBottom - blockHeight : bottom - height),
         );
-        if (!chosen)
-          candidate.alternates = [
-            { ...candidate, top: alternateTop, bottom: alternateTop + height },
-          ];
+        if (!chosen) {
+          const extent = pinnedFocus ? blockHeight : height;
+          candidate.alternates = [{ ...candidate, top: alternateTop, bottom: alternateTop + extent }];
+          if (pinnedFocus) {
+            // A pinned label can also use the opposite edge because it no longer follows its star.
+            const otherLeft = center > viewportWidth / 2 ? 16 : viewportWidth - width - 16;
+            const edge = Math.max(labelInset, candidate.maxBottom - extent);
+            for (const left of [candidate.left, otherLeft]) {
+              for (const alternate of [labelInset, edge]) {
+                candidate.alternates.push({
+                  ...candidate, left, right: left + width, top: alternate, bottom: alternate + extent,
+                });
+              }
+            }
+          }
+        }
         candidates.push(candidate);
       }
     }
-    const shown = visibleLabels(candidates, chosenPerson?.event.event_id);
-    labels.forEach((item) => {
-      const placement = shown.get(item.person.event.event_id);
-      const visible = Boolean(placement);
-      if (placement) item.label.style.top = `${placement.top}px`;
-      item.label.style.visibility = visible ? "visible" : "hidden";
-      item.label.setAttribute("aria-hidden", String(!visible));
-      item.label.tabIndex = -1;
-      item.controls.forEach(control => { control.tabIndex = visible ? 0 : -1; });
-    });
+    const shown = visibleLabels(candidates, chosenPerson);
+    for (const item of positionedLabels) {
+      if (relevant.has(item)) continue;
+      showLabel(item, false);
+      // Old positions can otherwise extend the scroll area after zooming out.
+      item.label.style.left = "";
+    }
+    for (const item of relevant) {
+      const placement = shown.get(item.person);
+      if (placement) {
+        item.label.style.top = `${placement.top}px`;
+        if (item === focusedLabel && item !== chosenLabel)
+          item.label.style.left = `${left + (placement.left + placement.right) / 2}px`;
+      }
+      showLabel(item, Boolean(placement) || item === focusedLabel);
+    }
+    positionedLabels = relevant;
+  }
+  function animate(motion) {
+    const shot = motion ? shootingStar(clock, sceneWidth, sceneHeight) : null;
+    meteor.style.opacity = String(shot?.opacity || 0);
+    meteor.dataset.active = String(Boolean(shot && shot.opacity > 0));
+    if (shot)
+      for (const key of ["x1", "y1", "x2", "y2"]) {
+        meteor.setAttribute(key, shot[key].toFixed(2));
+        meteorTail.setAttribute(key, shot[key].toFixed(2));
+      }
     stars.forEach((star, index) => {
       star.style.opacity = String(
-        moving()
+        motion
           ? 0.1 + 0.12 * (1 + Math.sin(clock / 1900 + index * 2.4))
           : 0.22,
       );
     });
-    sparks.forEach(({ element: spark, trail, a, b }, index) => {
-      const part = (clock / 10000 + seed(index)) % 1;
+  }
+  function animateConnections() {
+    for (const connection of activeSparks) {
+      const {element: spark, trail, a, b, phase} = connection;
+      const part = (clock / 10000 + phase) % 1;
       const tail = Math.max(0, part - 0.06);
       spark.setAttribute("cx", (a.x + (b.x - a.x) * part).toFixed(2));
       spark.setAttribute("cy", (a.y + (b.y - a.y) * part).toFixed(2));
@@ -306,14 +386,67 @@ export function createConstellation({
       trail.setAttribute("y1", (a.y + (b.y - a.y) * tail).toFixed(2));
       trail.setAttribute("x2", (a.x + (b.x - a.x) * part).toFixed(2));
       trail.setAttribute("y2", (a.y + (b.y - a.y) * part).toFixed(2));
-    });
+      if (connection.hidden) {
+        spark.removeAttribute("display");
+        trail.removeAttribute("display");
+        connection.hidden = false;
+      }
+    }
+  }
+  function paint(now) {
+    frame = 0;
+    if (!active()) {
+      last = 0;
+      return;
+    }
+    const elapsed = last ? clamp(now - last, 0, 64) : 0;
+    last = now;
+    const motion = moving();
+    if (motion)
+      clock += elapsed * normalizeMotionSpeed(root.dataset.motionSpeed || 1);
+    if (target !== null) {
+      const previous = element.scrollLeft;
+      const next = motion
+        ? flowStep(element.scrollLeft, target, elapsed || 16)
+        : target;
+      element.scrollLeft = next;
+      // Browsers can round away the final eased step; finish instead of stalling.
+      if (Math.abs(target - element.scrollLeft) < 2 || element.scrollLeft === previous) {
+        element.scrollLeft = target;
+        target = null;
+        seeking = false;
+      }
+    }
+    const left = element.scrollLeft;
+    const scrolled = left !== viewportLeft;
+    const browsing = geometry.canPan && !seeking && element.dataset.userScrolling === "true";
+    // A scroll event can mark browsing after paint has already laid out this offset.
+    if (browsing && left !== browseLeft) {
+      browseLeft = left;
+      selectVisibleProfile(onPreview, true);
+    }
+    if (!browsing) browseLeft = null;
+    if (scrolled) sky.style.transform = `translateX(${left}px)`;
+    const connectionsChanged = scrolled && !geometry.overview && updateViewport(left);
+    if (scrolled || labelsDirty) {
+      if (!geometry.overview) layoutLabels(left);
+      scrubber();
+      viewportLeft = left;
+      labelsDirty = false;
+    }
+    const animating = String(motion);
+    if (motion || animationDirty || lastMotion !== motion) animate(motion);
+    if (!geometry.overview && (motion || animationDirty || connectionsChanged))
+      animateConnections();
+    animationDirty = false;
+    lastMotion = motion;
     if (browsing && target === null && !drag) {
+      browseLeft = null;
       delete element.dataset.userScrolling;
       onSelect(selected);
     }
-    navigator();
-    root.dataset.animating = moving() ? "true" : "false";
-    if (moving() || target !== null) queue();
+    if (root.dataset.animating !== animating) root.dataset.animating = animating;
+    if (motion || target !== null) queue();
     else last = 0;
   }
   function render(nextEvents, identity) {
@@ -321,123 +454,179 @@ export function createConstellation({
     stop();
     wheelZoom = null;
     events = nextEvents;
-    selected = identity;
-    geometry = constellationLayout({
+    sceneWidth = element.clientWidth;
+    sceneHeight = element.clientHeight;
+    layoutAtZoom = prepareConstellation({
       events,
-      width: element.clientWidth,
-      height: element.clientHeight,
-      zoom,
+      width: sceneWidth,
+      height: sceneHeight,
       modules,
       lens,
+      aggregate,
     });
+    geometry = layoutAtZoom(zoom);
     if (countDirty) {
       personCount = new Set(geometry.people.map(person => person.event.actor_id)).size;
       countDirty = false;
     }
     element.dataset.canPan = String(geometry.canPan);
-    element.classList.toggle("is-group-overview", geometry.overview);
     element.classList.toggle("is-grouped", geometry.grouped);
-    keyScope = null;
-    groupHint();
+    // A fresh DOM scene has no valid measurements or last-painted viewport.
+    viewportLeft = browseLeft = labelInset = null;
+    labelsDirty = animationDirty = true;
+    keyScope = undefined;
+    key.hidden = !geometry.grouped;
+    history.max = 1000;
+    zoomControls();
+    const countText = aggregate
+      ? historyCount(events.length, personCount, aggregate)
+      : `${personCount} ${personCount === 1 ? "person" : "people"} in loaded history`;
+    if (peopleCount.textContent !== countText) peopleCount.textContent = countText;
     const background = Array.from(
       { length: 76 },
       (_, index) =>
         `<circle class="sky-star" cx="${seed("x" + index) * element.clientWidth}" cy="${seed("y" + index) * element.clientHeight * 0.74}" r="${index % 9 ? 0.8 : 1.5}"/>`,
     ).join("");
-    const links = [];
-    if (!geometry.overview) {
-      if (geometry.groups.length === 1) {
-        const group = geometry.groups[0];
-        let previous = null;
-        for (const person of geometry.people) {
-          if (person.group !== group.key) continue;
-          if (previous) links.push({ a: person, b: previous, color: group.color, dash: group.dash });
-          previous = person;
-        }
-      } else if (geometry.groups.length > 1) {
-        const peopleByGroup = new Map(geometry.groups.map(group => [group.key, []]));
-        // Map matches NaN keys, but the previous strict group comparison did not.
-        for (const person of geometry.people)
-          if (!Number.isNaN(person.group)) peopleByGroup.get(person.group)?.push(person);
-        for (const group of geometry.groups) {
-          const people = peopleByGroup.get(group.key);
-          for (let index = 1; index < people.length; index++)
-            links.push({ a: people[index], b: people[index - 1], color: group.color, dash: group.dash });
-        }
-      }
-    }
-    element.innerHTML = `<svg class="constellation-sky" viewBox="0 0 ${element.clientWidth} ${element.clientHeight}" aria-hidden="true">${background}<defs><linearGradient id="xf-shooting-tail" class="shooting-tail" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="currentColor" stop-opacity="0"/><stop offset="1" stop-color="currentColor"/></linearGradient></defs><line class="shooting-star" data-active="false" stroke="url(#xf-shooting-tail)" opacity="0"/></svg><div class="constellation-canvas" style="width:${geometry.width}px"><svg class="constellation-links${geometry.grouped ? " is-grouped" : ""}" viewBox="0 0 ${geometry.width} ${element.clientHeight}" aria-hidden="true">${geometry.overview ? "" : links.map(({ a, b, color, dash }) => `<g data-link-group="${esc(a.group)}" style="${color ? `color:${color}` : ""}"><path d="M${a.x},${a.y}L${b.x},${b.y}" stroke-dasharray="${dash || ""}"/><line class="sequence-trail"/><circle class="sequence-spark" r="2"/></g>`).join("")}</svg>${geometry.people.map((person) => `<article class="constellation-person" data-person="${esc(person.id)}" style="--group-color:${person.color || "var(--muted)"}"><button class="constellation-star ${esc(person.tone)}" type="button" style="left:${person.x}px;top:${person.y}px" data-actor="${esc(person.event.actor_id)}" data-event="${esc(person.event.event_id)}" aria-label="${esc(person.event.name || person.event.handle || "X account")}, ${esc(label(person.event))}, recorded event"><span class="star-core" aria-hidden="true"></span><span class="star-initials" aria-hidden="true">${esc(initials(person.event))}</span></button><div class="star-label" data-label="${esc(person.event.event_id)}" aria-label="Open recorded event for ${esc(person.event.name || person.event.handle || "X account")}">${personLabel(person)}</div></article>`).join("")}${geometry.overview ? geometry.groups.map((group) => `<button type="button" class="constellation-group ${esc(group.tone)}" style="--group-color:${group.color};left:${group.x}px;top:${group.y}px" data-group="${esc(group.key)}" title="${esc(groupDescription(group))}" aria-label="Explore ${esc(group.label)}, ${esc(groupDescription(group))}"><span class="cluster-count">${group.people.length}</span><strong title="${esc(group.label)}">${esc(group.label)}</strong></button>`).join("") : ""}</div>`;
+    element.innerHTML = `<svg class="constellation-sky" viewBox="0 0 ${element.clientWidth} ${element.clientHeight}" aria-hidden="true">${background}<defs><linearGradient id="xf-shooting-tail" class="shooting-tail" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="currentColor" stop-opacity="0"/><stop offset="1" stop-color="currentColor"/></linearGradient></defs><line class="shooting-star" data-active="false" stroke="url(#xf-shooting-tail)" opacity="0"/></svg><div class="constellation-canvas" style="width:${geometry.width}px"><svg class="constellation-links${geometry.grouped ? " is-grouped" : ""}" viewBox="0 0 ${geometry.width} ${element.clientHeight}" aria-hidden="true"></svg>${geometry.people.map((person) => `<article class="constellation-person" data-person="${esc(person.id)}" style="--group-color:${person.color || "var(--muted)"}"><button class="constellation-star ${esc(person.tone)}" type="button" style="left:${person.x}px;top:${person.y}px" data-actor="${esc(person.event.actor_id)}" data-event="${esc(person.event.event_id)}" aria-label="${esc(person.event.name || person.event.handle || "X account")}, ${esc(label(person.event))}, recorded event"><span class="star-core" aria-hidden="true"></span><span class="star-initials" aria-hidden="true">${esc(initials(person.event))}</span></button><div class="star-label" data-label="${esc(person.event.event_id)}" aria-label="Open recorded event for ${esc(person.event.name || person.event.handle || "X account")}">${personLabel(person)}</div></article>`).join("")}<div class="constellation-groups" hidden></div></div>`;
     sky = element.querySelector(".constellation-sky");
     meteor = element.querySelector(".shooting-star");
     meteorTail = element.querySelector(".shooting-tail");
-    const peopleByEvent = new Map();
-    for (const person of geometry.people)
-      if (!peopleByEvent.has(person.event.event_id))
-        peopleByEvent.set(person.event.event_id, person);
+    const firstEvents = new Map();
+    for (const event of events)
+      if (!firstEvents.has(event.event_id)) firstEvents.set(event.event_id, event);
+    selectionByEvent = new Map();
+    selection = null;
+    let index = 0;
+    for (const person of geometry.people) {
+      for (const event of person.events)
+        if (!selectionByEvent.has(event.event_id))
+          selectionByEvent.set(event.event_id, {person, index, event: firstEvents.get(event.event_id)});
+      index++;
+    }
     actorButtons = [...element.querySelectorAll("[data-actor]")].map(button => ({
       button, personElement: button.closest(".constellation-person"),
-      person: peopleByEvent.get(button.dataset.event),
+      person: selectionByEvent.get(button.dataset.event)?.person,
     }));
     stars = [...element.querySelectorAll(".sky-star")];
-    const labelNodes = new Map(
-      [...element.querySelectorAll("[data-label]")].map((item) => [
-        item.dataset.label,
-        item,
-      ]),
-    );
-    labels = geometry.people.map((person) => ({
-      person,
-      label: labelNodes.get(person.event.event_id),
-    }));
-    const trails = element.querySelectorAll(".sequence-trail");
-    sparks = [...element.querySelectorAll(".sequence-spark")].map(
-      (spark, index) => ({
-        element: spark,
-        trail: trails[index],
-        ...links[index],
-      }),
-    );
+    const labelNodes = element.querySelectorAll("[data-label]");
+    labels = geometry.people.map((person, index) => ({person, index, label: labelNodes[index]}));
+    labelsByNode = new WeakMap(labels.map(item => [item.label, item]));
+    bindingsByEvent = new Map();
+    actorButtons.forEach(({button}, index) => {
+      const id = button.dataset.event;
+      if (!bindingsByEvent.has(id)) bindingsByEvent.set(id, []);
+      bindingsByEvent.get(id).push(index);
+    });
+    viewportLabels = activeSparks = [];
+    positionedLabels.clear();
+    canvas = element.querySelector(".constellation-canvas");
+    linkLayer = element.querySelector(".constellation-links");
+    groupLayer = element.querySelector(".constellation-groups");
+    groupButtons = connections = null;
+    sparks = [];
     actorButtons.forEach(({button, person}) =>
       button.addEventListener("click", () => {
-        if (renderedVersion !== sceneVersion || !geometry || !root.isConnected ||
-            !element.isConnected || !element.contains(button) ||
+        if (!ownsScene(renderedVersion, button) || geometry.overview ||
             !person || person.event.event_id !== button.dataset.event) return;
         clickPerson(person);
       }),
     );
-    actorButtons.forEach(({button}) => {
-      button.tabIndex = geometry.overview ? -1 : 0;
-      button.setAttribute("aria-hidden", String(geometry.overview));
+    labels.forEach(({person, label: button}) => {
+      const first = selectionByEvent.get(person.event.event_id)?.person;
+      button.addEventListener("click", event => {
+        if (ownsScene(renderedVersion, button) && !geometry.overview &&
+            !event?.target?.closest?.("a")) clickPerson(first);
+      });
     });
-    labels.forEach(({ person, label: button }) =>
-      button.addEventListener("click", (event) => { if (!event?.target?.closest?.("a")) clickPerson(person); }),
+    applySelection(identity, true);
+    updateMode();
+    resetViewport();
+    anchor();
+    scrubber();
+    queue();
+  }
+  function ownsScene(version, node) {
+    return version === sceneVersion && geometry && root.isConnected &&
+      element.isConnected && element.contains(node);
+  }
+  function prepareConnections() {
+    const links = [];
+    if (geometry.groups.length === 1) {
+      const group = geometry.groups[0];
+      let previous = null;
+      for (const person of geometry.people) {
+        if (person.group !== group.key) continue;
+        if (previous) links.push({ a: person, b: previous, color: group.color, dash: group.dash });
+        previous = person;
+      }
+    } else if (geometry.groups.length > 1) {
+      const peopleByGroup = new Map(geometry.groups.map(group => [group.key, []]));
+      // Map matches NaN keys, but the previous strict group comparison did not.
+      for (const person of geometry.people)
+        if (!Number.isNaN(person.group)) peopleByGroup.get(person.group)?.push(person);
+      for (const group of geometry.groups) {
+        const people = peopleByGroup.get(group.key);
+        for (let index = 1; index < people.length; index++)
+          links.push({ a: people[index], b: people[index - 1], color: group.color, dash: group.dash });
+      }
+    }
+    linkLayer.innerHTML = links.map(({ a, b, color, dash }) => `<g data-link-group="${esc(a.group)}" style="${color ? `color:${color}` : ""}"><path d="M${a.x},${a.y}L${b.x},${b.y}" stroke-dasharray="${dash || ""}"/><line class="sequence-trail" display="none"/><circle class="sequence-spark" r="2" display="none"/></g>`).join("");
+    connections = linkLayer.querySelectorAll("path");
+    const trails = linkLayer.querySelectorAll(".sequence-trail");
+    sparks = [...linkLayer.querySelectorAll(".sequence-spark")].map(
+      (spark, index) => ({element: spark, trail: trails[index], ...links[index], phase: seed(index), hidden: true}),
     );
-    element.querySelectorAll("[data-group]").forEach((button) =>
+  }
+  function prepareGroupButtons() {
+    const renderedVersion = sceneVersion;
+    groupLayer.innerHTML = geometry.groups.map((group) => `<button type="button" class="constellation-group ${esc(group.tone)}" style="--group-color:${group.color};left:${group.x}px;top:${group.y}px" data-group="${esc(group.key)}" title="${esc(groupDescription(group))}" aria-label="Explore ${esc(group.label)}, ${esc(groupDescription(group))}"><span class="cluster-count">${group.eventCount ?? group.people.length}</span><strong title="${esc(group.label)}">${esc(group.label)}</strong></button>`).join("");
+    groupButtons = [...groupLayer.querySelectorAll("[data-group]")];
+    groupButtons.forEach((button, index) => {
       button.addEventListener("click", () => {
-        const group = geometry.groups.find(
-          (item) => item.key === button.dataset.group,
-        );
-        zoom = 1;
-        render(events, group.people[0].event.event_id);
-        seek(
-          events.findIndex(
-            (item) => item.event_id === group.people[0].event.event_id,
-          ),
-          "instant",
-        );
-      }),
-    );
+        if (!ownsScene(renderedVersion, button) || !geometry.overview) return;
+        const group = geometry.groups[index];
+        const identity = group.people[0].event.event_id;
+        select(identity);
+        setZoom(1);
+        seek(events.findIndex(item => item.event_id === identity), "instant");
+      });
+    });
+  }
+  function updateMode() {
+    const overview = geometry.overview;
+    const focused = document.activeElement;
+    if (focused && (overview
+      ? element.contains(focused) && focused.closest(".constellation-person")
+      : groupLayer.contains(focused))) {
+      (zoomControl.disabled ? element : zoomControl).focus({preventScroll: true});
+    }
+    element.classList.toggle("is-group-overview", overview);
+    groupLayer.hidden = !overview;
+    linkLayer.style.visibility = overview ? "hidden" : "";
+    if (overview && !groupButtons) prepareGroupButtons();
+    if (!overview && !connections) prepareConnections();
+    for (const {button} of actorButtons) {
+      button.tabIndex = overview ? -1 : 0;
+      button.setAttribute("aria-hidden", String(overview));
+    }
+    if (overview) {
+      for (const item of positionedLabels) showLabel(item, false);
+      viewportLabels = [];
+    }
+  }
+  function anchor() {
     const point = position();
-    element.scrollLeft =
-      geometry.canPan && point
-        ? clamp(point.x - element.clientWidth / 2, 0, maximum())
-        : 0;
+    element.scrollLeft = geometry.canPan && point
+      ? clamp(point.x - element.clientWidth / 2, 0, maximum())
+      : 0;
     target = null;
     seeking = false;
     scrollPosition = element.scrollLeft;
     delete element.dataset.userScrolling;
-    select(identity);
-    queue();
+    if (drag) {
+      drag.x = drag.lastX;
+      drag.scroll = scrollPosition;
+    }
   }
   function clickPerson(person) {
     target = null;
@@ -453,11 +642,8 @@ export function createConstellation({
     if (!events.length || !geometry) return;
     delete element.dataset.userScrolling;
     const event = events[clamp(index, 0, events.length - 1)];
-    selected = event.event_id;
-    if (geometry.overview) {
-      zoom = 0.8;
-      render(events, selected);
-    }
+    select(event.event_id);
+    if (geometry.overview) setZoom(0.8);
     const destination = position();
     if (destination && geometry.canPan) {
       target = clamp(destination.x - element.clientWidth / 2, 0, maximum());
@@ -468,14 +654,50 @@ export function createConstellation({
         seeking = false;
       }
     }
-    select(selected);
+    scrubber();
     onSelect(selected);
     queue();
   }
   function setZoom(value) {
-    if (!geometry || !events.length) return;
-    zoom = clamp(Math.round(value * 20) / 20, 0, 2);
-    render(events, selected);
+    if (!layoutAtZoom || !events.length || !ownsScene(sceneVersion, canvas)) return;
+    wheelZoom = null;
+    const nextZoom = clamp(Math.round(value * 20) / 20, 0, 2);
+    if (nextZoom === zoom || !Number.isFinite(nextZoom)) return;
+    const wasOverview = geometry.overview;
+    const coordinatesChanged = zoom > 0.25 || nextZoom > 0.25;
+    zoom = nextZoom;
+    layoutAtZoom(zoom);
+    element.dataset.canPan = String(geometry.canPan);
+    canvas.style.width = `${geometry.width}px`;
+    linkLayer.setAttribute("viewBox", `0 0 ${geometry.width} ${sceneHeight}`);
+    geometry.people.forEach((point, index) => {
+      const {button} = actorButtons[index];
+      button.style.left = `${point.x}px`;
+      button.style.top = `${point.y}px`;
+    });
+    if (wasOverview !== geometry.overview) {
+      updateMode();
+      groupHint();
+    }
+    if (geometry.overview) {
+      geometry.groups.forEach((group, index) => {
+        groupButtons[index].style.left = `${group.x}px`;
+        groupButtons[index].style.top = `${group.y}px`;
+      });
+    } else {
+      connections.forEach((path, index) => {
+        const {a, b} = sparks[index];
+        path.setAttribute("d", `M${a.x},${a.y}L${b.x},${b.y}`);
+      });
+    }
+    if (coordinatesChanged) resetViewport();
+    anchor();
+    zoomControls();
+    travelControls();
+    scrubber();
+    labelsDirty = !geometry.overview;
+    animationDirty = true;
+    queue();
   }
   function scrub(progress) {
     if (!geometry?.canPan) return;
@@ -484,17 +706,20 @@ export function createConstellation({
     element.scrollLeft = (1 - clamp(progress, 0, 1)) * maximum();
     delete element.dataset.userScrolling;
     selectVisibleProfile();
-    navigator();
+    scrubber();
     queue();
   }
   function travel(delta) {
-    if (!geometry?.canPan) return;
+    if (!geometry?.canPan) {
+      if (delta > 0 && singletonCanLoad()) onOlder();
+      return;
+    }
     const index = selectedProfileIndex();
     if (index < 0) return;
     const next = geometry.people[index + Math.sign(delta)];
     if (next)
       seek(events.findIndex((event) => event.event_id === next.event.event_id));
-    else if (delta > 0) onOlder();
+    else if (delta > 0 && hasOlder()) onOlder();
   }
   function onWheel(event) {
     if (!(event.buttons & 4) || event.ctrlKey || event.metaKey) wheelZoom = null;
@@ -543,6 +768,7 @@ export function createConstellation({
     drag = {
       id: event.pointerId,
       x: event.clientX,
+      lastX: event.clientX,
       scroll: element.scrollLeft,
     };
     element.setPointerCapture(event.pointerId);
@@ -550,6 +776,7 @@ export function createConstellation({
   }
   function move(event) {
     if (!drag || drag.id !== event.pointerId) return;
+    drag.lastX = event.clientX;
     target = clamp(drag.scroll + drag.x - event.clientX, 0, maximum());
     element.dataset.userScrolling = "true";
     queue();
@@ -598,27 +825,47 @@ export function createConstellation({
   }
   const refresh = () => {
     stop();
-    if (active()) queue();
+    queue();
   };
   const observer = new MutationObserver(refresh);
   observer.observe(root, {
     attributes: true,
     attributeFilter: ["data-route", "data-motion", "data-motion-speed"],
   });
-  const resize = new ResizeObserver(() => {
-    if (geometry && element.clientWidth && element.clientHeight)
+  const invalidateLabelSizes = () => {
+    if (!geometry) return;
+    for (const item of labels) item.width = undefined;
+    labelInset = null;
+    labelsDirty = true;
+    queue();
+  };
+  const resize = new ResizeObserver((entries = []) => {
+    if (geometry && element.clientWidth && element.clientHeight &&
+        (element.clientWidth !== sceneWidth || element.clientHeight !== sceneHeight)) {
       render(events, selected);
+    } else if (geometry && entries.some(entry => entry.target === context)) {
+      labelInset = null;
+      labelsDirty = true;
+      queue();
+    }
   });
   resize.observe(element);
+  if (context) resize.observe(context);
   const scroll = () => {
     if (!seeking && target === null && element.scrollLeft !== scrollPosition)
       element.dataset.userScrolling = "true";
     scrollPosition = element.scrollLeft;
     queue();
   };
+  const labelFocus = (event) => {
+    if (!event.target.closest("[data-label]")) return;
+    labelsDirty = true;
+    queue();
+  };
   const focus = (event) => {
+    labelFocus(event);
     const button = event.target.closest("[data-actor]");
-    if (button?.matches(":focus-visible"))
+    if (!restoringFocus && button?.matches(":focus-visible"))
       seek(events.findIndex((item) => item.event_id === button.dataset.event));
   };
   const listeners = [
@@ -628,6 +875,7 @@ export function createConstellation({
     [element, "auxclick", middleButton],
     [element, "keydown", onKey],
     [element, "focusin", focus],
+    [element, "focusout", labelFocus],
     [element, "pointerdown", down],
     [element, "pointermove", move],
     [element, "pointerup", up],
@@ -637,6 +885,11 @@ export function createConstellation({
     [zoomOut, "click", () => setZoom(zoom - 0.25)],
     [zoomControl, "input", (event) => setZoom(Number(event.target.value))],
   ];
+  if (document.fonts) {
+    listeners.push([document.fonts, "loadingdone", invalidateLabelSizes]);
+    listeners.push([document.fonts, "loadingerror", invalidateLabelSizes]);
+  }
+  if (document.defaultView) listeners.push([document.defaultView, "resize", invalidateLabelSizes]);
   listeners.forEach(([target, type, listener, options]) =>
     target.addEventListener(type, listener, options),
   );
@@ -652,17 +905,52 @@ export function createConstellation({
   reduced.addEventListener("change", preference);
   preference();
   return {
-    render(nextEvents, identity) {
+    render(nextEvents, identity, nextAggregate = null) {
+      aggregate = nextAggregate;
       countDirty = true;
       render(nextEvents, identity);
     },
-    update(nextEvents, identity) {
-      const offset = position() ? position().x - element.scrollLeft : null;
+    update(nextEvents, identity, nextAggregate = null) {
+      const activeElement = document.activeElement;
+      const focused = activeElement && element.contains(activeElement) ? activeElement : null;
+      const star = focused?.closest("[data-actor]");
+      const label = labelsByNode?.get(focused?.closest("[data-label]"));
+      const group = focused?.closest("[data-group]");
+      const left = element.scrollLeft, right = left + element.clientWidth;
+      const chosen = position();
+      const point = !geometry?.overview && chosen?.x >= left && chosen.x <= right
+        ? chosen : viewportIndex?.nearest((left + right) / 2);
+      const offset = point ? point.x - left : null;
+      aggregate = nextAggregate;
       countDirty = true;
       render(nextEvents, identity);
-      if (offset !== null && position())
-        element.scrollLeft = clamp(position().x - offset, 0, maximum());
+      const anchor = point && selectionByEvent.get(point.event.event_id)?.person;
+      if (anchor) element.scrollLeft = clamp(anchor.x - offset, 0, maximum());
       scrollPosition = element.scrollLeft;
+      scrubber();
+      if (group || (geometry.overview && (star || label))) {
+        const button = geometry.overview && groupButtons.find(item => item.dataset.group === group?.dataset.group);
+        (button || element).focus({preventScroll: true});
+      } else if (star || label) {
+        const replacement = selectionByEvent.get(star?.dataset.event ?? label.person.event.event_id);
+        const index = replacement?.index;
+        const nextLabel = labels[index];
+        const wasPreview = label?.preview === focused;
+        const control = star ? actorButtons[index]?.button
+          : wasPreview && nextLabel === labels[selectedProfileIndex()] && nextLabel?.preview
+            ? nextLabel.preview : nextLabel?.controls[0];
+        if (!star && control) {
+          // Position the control before restoring focus; the next frame pins it if needed.
+          updateViewport(element.scrollLeft);
+          layoutLabels(element.scrollLeft, control);
+        }
+        restoringFocus = true;
+        try {
+          (control ?? element).focus({preventScroll: true});
+        } finally {
+          restoringFocus = false;
+        }
+      }
     },
     select,
     seek,
@@ -670,6 +958,7 @@ export function createConstellation({
     setZoom,
     travel,
     configure: (nextModules, nextLens) => {
+      if (lens !== nextLens) aggregate = null;
       modules = nextModules;
       lens = nextLens;
       if (geometry) render(events, selected);
@@ -677,6 +966,7 @@ export function createConstellation({
     clear: () => {
       stop();
       geometry = null;
+      aggregate = null;
       events = [];
       releaseScene();
       personCount = 0;
@@ -690,6 +980,8 @@ export function createConstellation({
     destroy: () => {
       stop();
       geometry = null;
+      aggregate = null;
+      events = [];
       releaseScene();
       observer.disconnect();
       resize.disconnect();
diff --git a/src/xflog/assets/format.js b/src/xflog/assets/format.js
index d02972d..bfc20d9 100644
--- a/src/xflog/assets/format.js
+++ b/src/xflog/assets/format.js
@@ -52,7 +52,7 @@ export const displayDate = (event) =>
   new Date(event.provider_at || event.received_at);
 export function compareEvents(a, b) {
   if (a.received_at && b.received_at && a.received_at !== b.received_at)
-    return b.received_at.localeCompare(a.received_at);
+    return a.received_at < b.received_at ? 1 : -1;
   return Number(b.sequence > 0) - Number(a.sequence > 0) ||
     Math.abs(Number(b.sequence)) - Math.abs(Number(a.sequence));
 }
diff --git a/src/xflog/assets/journal-model.js b/src/xflog/assets/journal-model.js
new file mode 100644
index 0000000..6346492
--- /dev/null
+++ b/src/xflog/assets/journal-model.js
@@ -0,0 +1,134 @@
+import { groupEvents } from "./audience-groups.js";
+
+function createHeightIndex(estimates) {
+  let length = estimates.length;
+  let heights = Float64Array.from(estimates);
+  let tree = new Float64Array(length + 1);
+  // Each Fenwick entry owns a suffix of the prefix ending at its index.
+  for (let index = 1; index < tree.length; index++) {
+    tree[index] += heights[index - 1];
+    const parent = index + (index & -index);
+    if (parent < tree.length) tree[parent] += tree[index];
+  }
+  let searchBit = 1;
+  while (searchBit * 2 <= length) searchBit *= 2;
+
+  function prefix(end) {
+    let offset = 0;
+    for (let index = end; index > 0; index -= index & -index)
+      offset += tree[index];
+    return offset;
+  }
+
+  return {
+    prefix,
+    get total() { return prefix(length); },
+    height(index) { return heights[index]; },
+    append(values) {
+      const size = length + values.length;
+      if (size > heights.length) {
+        const capacity = Math.max(size, heights.length * 2, 16);
+        const nextHeights = new Float64Array(capacity);
+        const nextTree = new Float64Array(capacity + 1);
+        nextHeights.set(heights);
+        nextTree.set(tree);
+        heights = nextHeights;
+        tree = nextTree;
+      }
+      for (const value of values) {
+        heights[length++] = value;
+        tree[length] = value + prefix(length - 1) - prefix(length - (length & -length));
+      }
+      while (searchBit * 2 <= length) searchBit *= 2;
+    },
+    at(offset) {
+      let index = 0;
+      for (let bit = searchBit; bit > 0; bit >>= 1) {
+        const next = index + bit;
+        if (next <= length && tree[next] <= offset) {
+          index = next;
+          offset -= tree[next];
+        }
+      }
+      return Math.min(index, length - 1);
+    },
+    update(index, height) {
+      const difference = height - heights[index];
+      if (!difference) return;
+      heights[index] = height;
+      for (let parent = index + 1; parent <= length; parent += parent & -parent)
+        tree[parent] += difference;
+    },
+  };
+}
+
+export function createJournalModel(events, {modules, lens, collapsed, day, aggregate}) {
+  const groups = groupEvents(events, modules, lens, {totals: aggregate?.groups, summaries: true});
+  const rows = [], estimates = [], byEvent = new Map(), byKey = new Map();
+  let position = 0;
+
+  function add(row, estimate, visible = true) {
+    row.index = visible ? rows.length : -1;
+    byKey.set(row.key, row);
+    if (visible) {
+      rows.push(row);
+      estimates.push(estimate);
+    }
+  }
+
+  function eventAppender(group, visible) {
+    const prefix = [group ? lens : "none", group?.key ?? null];
+    const occurrences = new Map();
+    function key(type, identity) {
+      const scopedIdentity = JSON.stringify([type, identity]);
+      const count = occurrences.get(scopedIdentity) ?? 0;
+      occurrences.set(scopedIdentity, count + 1);
+      return JSON.stringify([...prefix, type, identity, count]);
+    }
+    let prior = "", last = null;
+    return records => {
+      if (last && records.length) last.last = false;
+      records.forEach((event, index) => {
+        const text = day(event);
+        if (text !== prior) {
+          const first = last === null && index === 0;
+          add({type:"date", key:key("date", text), text, group, first}, group && first ? 42 : 58, visible);
+        }
+        prior = text;
+        const row = {
+          type: "event", key: key("event", event.event_id), event, group,
+          position: ++position, last: index === records.length - 1,
+        };
+        if (row.last) last = row;
+        add(row, 102, visible);
+        if (!byEvent.has(event.event_id)) byEvent.set(event.event_id, row);
+      });
+    };
+  }
+
+  let appendEvents = null;
+  if (groups) {
+    for (const group of groups) {
+      group.start = rows.length;
+      group.open = group.events.length > 0 && !collapsed.has(`${lens}:${group.key}`);
+      add({type:group.events.length ? "group" : "summary", key:JSON.stringify([lens, group.key, "group"]), group}, 57);
+      eventAppender(group, group.open)(group.events);
+      add({type:"gap", key:JSON.stringify([lens, group.key, "gap"]), group}, 20);
+      group.end = rows.length;
+    }
+  } else {
+    appendEvents = eventAppender(null, true);
+    appendEvents(events);
+  }
+
+  const heights = createHeightIndex(estimates);
+  estimates.length = 0;
+  return {
+    groups, rows, byEvent, byKey, heights,
+    append: appendEvents && (records => {
+      appendEvents(records);
+      heights.append(estimates);
+      estimates.length = 0;
+    }),
+  };
+}
diff --git a/src/xflog/assets/journal.js b/src/xflog/assets/journal.js
index dcf3dda..e1e9aae 100644
--- a/src/xflog/assets/journal.js
+++ b/src/xflog/assets/journal.js
@@ -1,5 +1,5 @@
 import { eventTone } from "./format.js";
-import { groupEvents } from "./audience-groups.js";
+import { createJournalModel } from "./journal-model.js";
 
 export function createJournal({
   element,
@@ -10,61 +10,460 @@ export function createJournal({
   label,
   initials,
   onOpen,
+  onNearEnd = () => {},
 }) {
   const collapsed = new Set();
-  let lens = "none";
-
-  function rows(events, selected) {
-    let prior = "";
-    return events
-      .map((event) => {
-        const day = date.format(displayDate(event));
-        const heading =
-          day !== prior ? `<div class="date-group">${esc(day)}</div>` : "";
-        prior = day;
-        const tone = eventTone(event);
-        const lost = tone === "negative";
-        return `${heading}<article class="event ${lost ? "lost" : tone === "positive" ? "gain" : "neutral"}"><span class="event-dot" aria-hidden="true"></span><button type="button" class="event-button" data-event="${esc(event.event_id)}" aria-pressed="${selected === event.event_id}"><span class="avatar" aria-hidden="true">${esc(initials(event))}</span><span class="event-identity"><span class="event-name">${esc(event.name || event.handle || "X account")}</span><span class="event-handle">${esc(event.handle ? "@" + event.handle : "ID " + event.actor_id)}</span></span><span class="event-meta"><span class="event-kind"><span aria-hidden="true">${lost ? "↘" : tone === "neutral" ? "·" : "↗"}</span>${esc(label(event))}</span><span class="event-time">${esc(time.format(displayDate(event)))}${event.provider_at ? "" : " · received"}</span></span></button></article>`;
-      })
-      .join("");
+  let track, model, events, options, selected, frame = 0;
+  let savedAnchor = null, inset = 0, width = 0;
+  let revealRow = null, revealScrollTop = 0;
+  let renderedScrollTop = null;
+  let measured = new Map();
+  const mounted = new Map(), groups = new Map(), observed = new Map();
+  const observer = new ResizeObserver(measure);
+
+  function eventMarkup(row) {
+    const event = row.event;
+    const tone = eventTone(event);
+    const lost = tone === "negative";
+    return `<article aria-label="${eventPosition(row)}" class="event ${row.group && row.last ? "journal-last-event " : ""}${lost ? "lost" : tone === "positive" ? "gain" : "neutral"}"><span class="event-dot" aria-hidden="true"></span><button type="button" class="event-button" data-event="${esc(event.event_id)}" aria-pressed="${selected === event.event_id}"><span class="avatar" aria-hidden="true">${esc(initials(event))}</span><span class="event-identity"><span class="event-name">${esc(event.name || event.handle || "X account")}</span><span class="event-handle">${esc(event.handle ? "@" + event.handle : "ID " + event.actor_id)}</span></span><span class="event-meta"><span class="event-kind"><span aria-hidden="true">${lost ? "↘" : tone === "neutral" ? "·" : "↗"}</span>${esc(label(event))}</span><span class="event-time">${esc(time.format(displayDate(event)))}${event.provider_at ? "" : " · received"}</span></span></button></article>`;
+  }
+
+  const eventPosition = row => `Event ${row.position} of ${events.length} loaded`;
+
+  function groupCount(group) {
+    const total = group.eventCount ?? group.events.length;
+    const loaded = total === group.events.length ? "" : ` saved · ${group.events.length} loaded`;
+    const actors = group.distinctActors === undefined ? "" :
+      `<span class="sr-only"> · ${group.distinctActors} ${group.distinctActors === 1 ? "person" : "people"}</span>`;
+    return `${total} ${total === 1 ? "event" : "events"}${loaded}${actors}`;
+  }
+
+  function mountGroup(group) {
+    const summary = !group.events.length;
+    const node = document.createElement(summary ? "div" : "details");
+    node.className = `journal-group ${group.tone || ""}`;
+    node.dataset.group = group.key;
+    if (!summary) node.open = group.open;
+    const title = `<span class="journal-group-name">${esc(group.label)}</span> <span class="journal-group-count">${groupCount(group)}</span>`;
+    node.innerHTML = summary
+      ? `<div class="journal-group-summary">${title}</div>`
+      : `<summary>${title}<svg viewBox="0 0 24 24" aria-hidden="true"><path d="m9 5 7 7-7 7"/></svg></summary><div class="journal-group-content"></div>`;
+    groups.set(group, node);
+    return node;
+  }
+
+  const isHeader = row => row.type === "group" || row.type === "summary";
+
+  function mountRow(row) {
+    let node;
+    if (isHeader(row)) {
+      node = groups.get(row.group).firstElementChild;
+    } else if (row.type === "date") {
+      node = document.createElement("div");
+      node.className = row.first && row.group ? "date-group journal-first-date" : "date-group";
+      node.textContent = row.text;
+    } else {
+      const template = document.createElement("template");
+      template.innerHTML = eventMarkup(row);
+      node = template.content.firstElementChild;
+    }
+    node.dataset.journalRow = row.key;
+    mounted.set(row, node);
+    observed.set(node, row);
+    observer.observe(node, {box: "border-box"});
+    return node;
+  }
+
+  function unmountRow(row, node) {
+    observer.unobserve(node);
+    observed.delete(node);
+    mounted.delete(row);
+    if (!isHeader(row)) node.remove();
+  }
+
+  function locate(key) {
+    const node = key?.closest?.("[data-journal-row]");
+    const row = model?.byKey.get(node?.dataset.journalRow);
+    return row && mounted.get(row) === node ? row : null;
+  }
+
+  function anchor() {
+    if (!model?.rows.length) return null;
+    const offset = element.scrollTop - inset;
+    let index = model.heights.at(offset);
+    const row = model.rows[index];
+    // If a date heading is at the edge, anchor its first event as well.
+    if (row.type === "date" && model.rows[index + 1]?.type === "event") index++;
+    const current = model.rows[index];
+    return {
+      key: current.key, identity: current.event?.event_id,
+      offset: offset - model.heights.prefix(index), top: element.scrollTop,
+    };
+  }
+
+  function restoreAnchor(previous) {
+    if (!previous) return;
+    const row = model.byKey.get(previous.key) ??
+      (previous.identity === undefined ? null : model.byEvent.get(previous.identity));
+    element.scrollTop = row && row.index >= 0
+      ? inset + model.heights.prefix(row.index) + previous.offset
+      : previous.top;
+  }
+
+  function setTop(node, top) {
+    const value = `${top}px`;
+    if (node.style.top !== value) node.style.top = value;
+  }
+
+  function placeMounted() {
+    track.style.height = `${model.heights.total}px`;
+    for (const [group, node] of groups) {
+      const top = model.heights.prefix(group.start);
+      setTop(node, top);
+      node.style.height = `${model.heights.prefix(group.end) - top - 20}px`;
+    }
+    for (const [row, node] of mounted) {
+      if (isHeader(row)) continue;
+      const base = row.group ? model.heights.prefix(row.group.start) + 1 : 0;
+      setTop(node, model.heights.prefix(row.index) - base);
+    }
+  }
+
+  function renderWindow(pinned = locate(document.activeElement)) {
+    if (!track?.isConnected || !element.clientHeight) return;
+    const overscan = Math.min(400, element.clientHeight);
+    const top = element.scrollTop - inset;
+    const from = model.heights.at(top - overscan);
+    const to = model.heights.at(top + element.clientHeight + overscan);
+    const wanted = new Set();
+    const wantedGroups = new Set();
+    function include(row) {
+      if (!row) return;
+      if (row.group && !wantedGroups.has(row.group)) {
+        wantedGroups.add(row.group);
+        wanted.add(model.rows[row.group.start]);
+      }
+      if (row.type !== "gap") wanted.add(row);
+    }
+    for (let index = Math.max(0, from); index <= to; index++) include(model.rows[index]);
+    if (pinned?.index >= 0) include(pinned);
+
+    for (const [row, node] of mounted)
+      if (!wanted.has(row)) unmountRow(row, node);
+    for (const [group, node] of groups) {
+      if (!wantedGroups.has(group)) {
+        node.remove();
+        groups.delete(group);
+      }
+    }
+
+    // Insert new rows in logical DOM order without moving already mounted focused nodes.
+    const tails = new Map();
+    const ordered = [...wanted].sort((a, b) => b.index - a.index);
+    for (const row of ordered) {
+      let groupNode;
+      if (row.group) groupNode = groups.get(row.group) ?? mountGroup(row.group);
+      const node = mounted.get(row) ?? mountRow(row);
+      const parent = row.group && !isHeader(row) ? groupNode.lastElementChild : track;
+      const child = isHeader(row) ? groupNode : node;
+      if (child.parentNode !== parent) parent.insertBefore(child, tails.get(parent) ?? null);
+      tails.set(parent, child);
+    }
+    placeMounted();
+  }
+
+  function paintJournal() {
+    frame = 0;
+    if (revealRow && element.scrollTop !== revealScrollTop) revealRow = null;
+    renderWindow();
+  }
+
+  function queue() {
+    if (track?.isConnected && !frame) frame = requestAnimationFrame(paintJournal);
+  }
+
+  function measure(entries) {
+    if (!track?.isConnected) return;
+    const previous = anchor();
+    let changed = false;
+    for (const entry of entries) {
+      if (entry.target === element) {
+        const nextWidth = track.clientWidth;
+        if (width !== nextWidth) {
+          width = nextWidth;
+          // Keep last-known heights as estimates until those rows are visited again.
+          measured.clear();
+        }
+        inset = track.offsetTop;
+        queue();
+        continue;
+      }
+      const row = observed.get(entry.target);
+      if (!row || !track.contains(entry.target)) continue;
+      const height = entry.borderBoxSize?.[0]?.blockSize ?? entry.target.offsetHeight;
+      if (!height) continue;
+      const occupied = height + (row.type === "event" ? 12 : isHeader(row) ? 1 : 0);
+      measured.set(row.key, {row, height: occupied});
+      if (model.heights.height(row.index) !== occupied) {
+        model.heights.update(row.index, occupied);
+        changed = true;
+      }
+    }
+    if (changed) {
+      const keepRevealed = revealRow && element.scrollTop === revealScrollTop;
+      placeMounted();
+      if (keepRevealed) alignRow(revealRow);
+      else restoreAnchor(previous);
+      renderedScrollTop = element.scrollTop;
+      queue();
+    }
+  }
+
+  function release() {
+    cancelAnimationFrame(frame);
+    frame = 0;
+    observer.disconnect();
+    mounted.clear();
+    groups.clear();
+    observed.clear();
+    track?.remove();
+    track = model = events = options = revealRow = null;
+    renderedScrollTop = null;
+    measured.clear();
+  }
+
+  function restoreMeasurements(previous) {
+    for (const [key, {row, height}] of previous) {
+      const next = model.byKey.get(key);
+      if (!next || !sameHeightInputs(row, next)) continue;
+      measured.set(key, {row: next, height});
+      if (next.index >= 0) model.heights.update(next.index, height);
+    }
+  }
+
+  function sameHeightInputs(row, next) {
+    if (row.type === "event") {
+      const fields = ["name", "handle", "actor_id", "kind", "received_at", "provider_at"];
+      return row.event === next.event || fields.every(field => row.event[field] === next.event[field]);
+    }
+    if (isHeader(row))
+      return row.type === next.type && row.group.label === next.group.label && groupCount(row.group) === groupCount(next.group);
+    return row.first === next.first;
+  }
+
+  function buildModel() {
+    return createJournalModel(events, {...options, collapsed, day: event => date.format(displayDate(event))});
+  }
+
+  function updateMountedEvent(row, node) {
+    node.setAttribute("aria-label", eventPosition(row));
+    node.classList.toggle("journal-last-event", Boolean(row.group && row.last));
+    node.querySelector("button").setAttribute("aria-pressed", String(row.event.event_id === selected));
+  }
+
+  function append(nextEvents, nextOptions) {
+    const previous = anchor();
+    const focused = locate(document.activeElement);
+    const priorLength = events.length;
+    events = nextEvents;
+    options = nextOptions;
+    selected = options.selected;
+    if (model.append) {
+      model.append(events.slice(priorLength));
+      for (const [row, node] of mounted)
+        if (row.type === "event") updateMountedEvent(row, node);
+    } else {
+      const previousHeights = measured;
+      measured = new Map();
+      model = buildModel();
+      restoreMeasurements(previousHeights);
+      for (const [group, node] of [...groups]) {
+        const header = node.firstElementChild;
+        const row = observed.get(header);
+        const replacement = model.byKey.get(row.key);
+        groups.delete(group);
+        if (replacement?.type !== row.type) {
+          unmountRow(row, header);
+          node.remove();
+          continue;
+        }
+        groups.set(replacement.group, node);
+        if (replacement.group.label !== group.label)
+          header.querySelector(".journal-group-name").textContent = replacement.group.label;
+        const count = groupCount(replacement.group);
+        if (count !== groupCount(group)) header.querySelector(".journal-group-count").innerHTML = count;
+      }
+      for (const [row, node] of [...mounted]) {
+        const replacement = model.byKey.get(row.key);
+        if (replacement?.type !== row.type || replacement.index < 0 ||
+            (row.type === "event" && !sameHeightInputs(row, replacement)) ||
+            (row.type === "date" && row.first !== replacement.first)) {
+          unmountRow(row, node);
+          continue;
+        }
+        mounted.delete(row);
+        mounted.set(replacement, node);
+        observed.set(node, replacement);
+        if (row.type === "event") updateMountedEvent(replacement, node);
+      }
+    }
+    revealRow = null;
+    track.style.height = `${model.heights.total}px`;
+    restoreAnchor(previous);
+    renderedScrollTop = element.scrollTop;
+    const pinned = focused && model.byKey.get(focused.key);
+    renderWindow(pinned);
+    if (focused && !locate(document.activeElement)) (control(pinned) ?? element).focus({preventScroll: true});
+  }
+
+  function render(nextEvents, nextOptions) {
+    if (nextOptions.append && track?.isConnected && nextOptions.lens === options.lens &&
+        nextEvents.length >= events.length && nextEvents[0] === events[0] &&
+        nextEvents[events.length - 1] === events.at(-1)) {
+      append(nextEvents, nextOptions);
+      return;
+    }
+    const previous = anchor() ?? savedAnchor;
+    const focused = locate(document.activeElement);
+    const previousWidth = width;
+    const previousHeights = measured;
+    measured = new Map();
+    savedAnchor = null;
+    release();
+    events = nextEvents;
+    options = nextOptions;
+    selected = options.selected;
+    model = buildModel();
+    track = document.createElement("div");
+    track.className = "journal-window";
+    element.replaceChildren(track);
+    inset = track.offsetTop;
+    width = track.clientWidth;
+    if (width === previousWidth) restoreMeasurements(previousHeights);
+    track.style.height = `${model.heights.total}px`;
+    restoreAnchor(previous);
+    if (!previous) element.scrollTop = 0;
+    renderedScrollTop = element.scrollTop;
+    observer.observe(element);
+    const row = focused && (model.byKey.get(focused.key) ?? model.byEvent.get(focused.event?.event_id));
+    renderWindow(row);
+    if (focused) (control(row) ?? element).focus({preventScroll: true});
+  }
+
+  function alignRow(row) {
+    const {heights} = model;
+    const top = inset + heights.prefix(row.index);
+    const bottom = top + heights.height(row.index);
+    const sticky = row.group && row.type !== "group" ? heights.height(row.group.start) : 0;
+    const visibleTop = element.scrollTop + (sticky ? inset + sticky : 0);
+    const visibleBottom = element.scrollTop + element.clientHeight;
+    const earliest = top - (sticky ? inset + sticky : 0);
+    if (top < visibleTop) element.scrollTop = earliest;
+    else if (bottom > visibleBottom)
+      element.scrollTop = Math.min(earliest, bottom - element.clientHeight);
+    revealScrollTop = element.scrollTop;
+  }
+
+  function scrollToRow(row) {
+    revealRow = row;
+    alignRow(row);
+    renderWindow();
+  }
+
+  function reveal(identity) {
+    let row = model?.byEvent.get(identity);
+    if (!row) return;
+    if (row.index < 0) {
+      collapsed.delete(`${options.lens}:${row.group.key}`);
+      render(events, {...options, selected, append:false});
+      row = model.byEvent.get(identity);
+    }
+    scrollToRow(row);
+  }
+
+  function setGroupOpen(row, open) {
+    const key = `${options.lens}:${row.group.key}`;
+    if (open) collapsed.delete(key);
+    else collapsed.add(key);
+    const inGroup = model.byKey.get(anchor()?.key)?.group === row.group;
+    render(events, {...options, selected, append:false});
+    if (!open && inGroup) scrollToRow(model.byKey.get(row.key));
+  }
+
+  function click(event) {
+    const target = event.target.closest("button[data-event], summary");
+    const row = locate(target);
+    if (row?.type === "event") onOpen(row.event.event_id);
+    else if (row?.type === "group" && !event.defaultPrevented) {
+      // Commit disclosure before a scroll frame can unmount the summary.
+      event.preventDefault();
+      setGroupOpen(row, !row.group.open);
+    }
+  }
+
+  function toggle(event) {
+    const node = event.target;
+    if (!node.matches("details[data-group]")) return;
+    const row = locate(node.firstElementChild);
+    if (row && node.open !== row.group.open) setGroupOpen(row, node.open);
   }
 
+  function control(row) {
+    const node = mounted.get(row);
+    return row?.type === "event" ? node?.querySelector("button") : row?.type === "group" ? node : null;
+  }
+
+  function keydown(event) {
+    if (event.key !== "Tab" || event.altKey || event.ctrlKey || event.metaKey) return;
+    const current = locate(event.target);
+    if (!current) return;
+    const direction = event.shiftKey ? -1 : 1;
+    for (let index = current.index + direction; model.rows[index]; index += direction) {
+      const row = model.rows[index];
+      if (row.type !== "group" && row.type !== "event") continue;
+      event.preventDefault();
+      scrollToRow(row);
+      control(row)?.focus({preventScroll: true});
+      return;
+    }
+  }
+
+  function scroll() {
+    if (!track?.isConnected) return;
+    queue();
+    if (renderedScrollTop === element.scrollTop) return;
+    renderedScrollTop = null;
+    if (element.scrollTop + element.clientHeight >= element.scrollHeight - 80) onNearEnd();
+  }
+
+  const listeners = [
+    ["scroll", scroll, {passive: true}],
+    ["click", click],
+    ["toggle", toggle, true],
+    ["keydown", keydown],
+    ["focusout", queue],
+  ];
+  listeners.forEach(([type, handler, settings]) => element.addEventListener(type, handler, settings));
+
   return {
-    render(events, options) {
-      lens = options.lens;
-      const groups = groupEvents(events, options.modules, lens);
-      element.innerHTML = groups
-        ? groups
-            .map(
-              (group) =>
-                `<details class="journal-group ${esc(group.tone)}" data-group="${esc(group.key)}" ${collapsed.has(`${lens}:${group.key}`) ? "" : "open"}><summary><span class="journal-group-name">${esc(group.label)}</span> <span class="journal-group-count">${group.events.length} ${group.events.length === 1 ? "event" : "events"}</span><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m9 5 7 7-7 7"/></svg></summary><div class="journal-group-content">${rows(group.events, options.selected)}</div></details>`,
-            )
-            .join("")
-        : rows(events, options.selected);
-      element.querySelectorAll("details[data-group]").forEach((group) => {
-        const key = `${lens}:${group.dataset.group}`;
-        group.addEventListener("toggle", () => {
-          if (group.open) collapsed.delete(key);
-          else collapsed.add(key);
-        });
-      });
-      element
-        .querySelectorAll("[data-event]")
-        .forEach((button) =>
-          button.addEventListener("click", () => onOpen(button.dataset.event)),
-        );
+    render,
+    reveal,
+    select(identity) {
+      if (selected === identity) return;
+      selected = identity;
+      for (const [row, node] of mounted)
+        if (row.type === "event")
+          node.querySelector("button").setAttribute("aria-pressed", String(row.event.event_id === selected));
     },
-    reveal(identity) {
-      const button = [...element.querySelectorAll("[data-event]")].find(
-        (item) => item.dataset.event === identity,
-      );
-      if (!button) return;
-      const group = button.closest("details[data-group]");
-      if (group) {
-        collapsed.delete(`${lens}:${group.dataset.group}`);
-        group.open = true;
-      }
-      button.scrollIntoView({ block: "nearest" });
+    clear({remember = false} = {}) {
+      savedAnchor = remember ? anchor() ?? savedAnchor : null;
+      release();
+    },
+    destroy() {
+      savedAnchor = null;
+      collapsed.clear();
+      release();
+      listeners.forEach(([type, handler, settings]) => element.removeEventListener(type, handler, settings));
     },
   };
 }
diff --git a/src/xflog/assets/live-history.js b/src/xflog/assets/live-history.js
index 8e6ba65..200018e 100644
--- a/src/xflog/assets/live-history.js
+++ b/src/xflog/assets/live-history.js
@@ -10,18 +10,17 @@ export function groupSince(state, now = Date.now()) {
   return amount ? new Date(Math.floor(now / 60000) * 60000 - Number(amount) * (unit === "h" ? 3600000 : 86400000)).toISOString() : "";
 }
 
-export function historyPath(state, before = "0") {
+export function historyPath(state, before = "0", options = {}) {
   const params = new URLSearchParams({
     kind: state.filter, subject: state.subject, before: String(before || "0"),
+    lens: state.lens || "none", limit: "50",
   });
-  if (state.lens && state.lens !== "none") {
+  if (before !== "0" || options.localOnly || state.lens && state.lens !== "none")
     params.set("local_only", "true");
-    params.set("limit", "50");
-  }
-  if (state.since) {
-    params.set("since", state.since);
-  }
-  if (before !== "0") params.set("local_only", "true");
+  if (state.since) params.set("since", state.since);
+  if (options.afterRevision) params.set("after_revision", options.afterRevision);
+  if (options.selected && before === "0") params.set("selected", options.selected);
+  if (options.encounterRevision) params.set("encounter_revision", options.encounterRevision);
   return `/api/${state.demo ? "demo" : "timeline"}?${params}`;
 }
 
@@ -32,64 +31,216 @@ export function mergeHistory(events) {
   return [...unique.values()].sort(compareEvents);
 }
 
-export async function* historyPages(api, state, before = "0") {
-  const seen = new Set([String(before)]);
-  while (before) {
-    const page = await api(historyPath(state, before));
-    yield page;
-    before = page.next;
-    if (before && seen.has(String(before))) throw new Error("Saved history pagination did not advance.");
-    seen.add(String(before));
-  }
+export function historyScope(state) {
+  const selection = state.status?.selection;
+  return JSON.stringify([
+    state.demo, state.demo ? null : state.status?.account?.id, state.subject,
+    state.filter, state.lens, state.groupRange, state.groupSignature,
+    state.demo ? null : selection?.interactions, state.demo ? null : selection?.profile_names,
+  ]);
 }
 
-export function updatedSelection(previous, selected, events) {
-  return events.some(event => event.event_id === selected) ? selected : events[0]?.event_id || null;
+function inRange(events, since) {
+  if (!since) return events;
+  const cutoff = Date.parse(since);
+  return events.filter(event => Date.parse(event.received_at) >= cutoff);
 }
 
-const historyScope = state => JSON.stringify([state.status?.account?.id,
-  state.status?.selection.interactions, state.status?.selection.profile_names, state.subject, state.filter, state.lens, state.groupRange]);
-
-export function createLiveHistory({ api, read, apply, refreshInteractions }) {
-  let busy = false;
-  let applied = "";
-  let appliedScope = "";
-  return {
-    async refresh() {
+const catchupPages = 3;
+export function createLiveHistory({ api, read, clear, apply, change, failure, refreshInteractions, connected }) {
+  let active = null, accepted = null, catchup = null, olderError = false, liveError = false;
+  const report = () => change({
+    phase: active?.phase, catchingUp: Boolean(catchup) || active?.phase === "live" || liveError, olderError,
+  });
+  function cancel() {
+    active?.controller.abort();
+    active = null;
+    report();
+  }
+  function start(phase) {
+    active?.controller.abort();
+    const ticket = {
+      controller: new AbortController(), phase, scope: historyScope(read()),
+    };
+    active = ticket;
+    report();
+    return ticket;
+  }
+  const owns = ticket => ticket === active && connected() && historyScope(read()) === ticket.scope;
+  async function page(ticket, state, before, seen, options) {
+    const result = await api(historyPath(state, before, options), ticket.controller.signal);
+    if (!owns(ticket)) return null;
+    const next = result.next == null ? null : String(result.next);
+    if (next !== null && (!next || next === "0" || next === before || seen.has(next) || !result.events.length))
+      throw new Error("Saved history pagination did not advance. Try again.");
+    return { ...result, next };
+  }
+  function syncProfiles(events, sources) {
+    if (!sources.length) return events;
+    const profiles = new Map();
+    for (const event of sources)
+      if (event.name && event.handle && !profiles.has(event.actor_id))
+        profiles.set(event.actor_id, event);
+    return events.map(event => {
+      const profile = profiles.get(event.actor_id);
+      if (!profile || profile.name === event.name && profile.handle === event.handle) return event;
+      return {...event, name: profile.name, handle: profile.handle, profile_url: profile.profile_url};
+    });
+  }
+  async function run(ticket, work) {
+    try {
+      await work();
+    } catch (error) {
+      if (owns(ticket)) {
+        if (ticket.phase === "older") olderError = true;
+        if (ticket.phase === "live") liveError = true;
+        failure(error, ticket.phase);
+      }
+    } finally {
+      if (active === ticket) {
+        active = null;
+        report();
+      }
+    }
+  }
+  async function load(prepare) {
+    accepted = catchup = null;
+    olderError = liveError = false;
+    const ticket = start("initial");
+    clear();
+    await run(ticket, async () => {
+      if (prepare) await prepare();
+      if (!owns(ticket)) return;
       const state = read();
-      state.since = groupSince(state);
-      if (busy || state.loading || state.demo || !state.status) return;
-      const scope = historyScope(state);
-      const version = `${scope}/${state.status.timeline_revision}/${state.since}`;
-      if (version === applied) return;
-      const generation = state.generation;
-      const existing = appliedScope && appliedScope !== scope ? [] : state.events;
-      const known = new Set(existing.map(event => event.event_id));
+      const since = groupSince(state);
+      const result = await page(ticket, {...state, since}, "0", new Set());
+      if (!result) return;
+      const revision = result.aggregate?.revision || state.status?.timeline_revision;
+      const events = inRange(mergeHistory(result.events), since);
+      apply({...result, events}, "initial");
+      accepted = {
+        scope: ticket.scope, since, revision, initialRevision: revision, lastSince: since, lastVersion: revision,
+        cursors: new Set(result.next ? [result.next] : []),
+      };
+    });
+  }
+  async function older(retry = true) {
+    const state = read();
+    if (!state.next || accepted?.scope !== historyScope(state) ||
+        active?.phase === "initial" || active?.phase === "older" || (olderError && !retry)) return;
+    const ticket = start("older");
+    await run(ticket, async () => {
+      const revision = state.aggregate?.revision;
+      const encounters = state.lens === "previous-encounters" &&
+        state.groups?.some(group => group.key === state.lens && group.enabled);
+      const encounterRevision = !state.demo && encounters &&
+        revision !== accepted.initialRevision ? revision : undefined;
+      const result = await page(ticket, {...state, since: accepted.since}, state.next, accepted.cursors, {
+        encounterRevision,
+      });
+      if (!result) return;
+      const current = read();
+      const rows = inRange(result.events, accepted.lastSince);
+      // Once the ordered continuation passes the rolling cutoff, all subsequent pages are older.
+      const next = rows.length === result.events.length ? result.next : null;
+      // Incoming older pages normally extend the ordered tail. Live backfills can interleave.
+      const known = new Set(current.events.map(event => event.event_id));
+      const olderRows = mergeHistory(rows.filter(event => !known.has(event.event_id)));
+      const tail = !current.events.length || !olderRows.length ||
+        compareEvents(current.events.at(-1), olderRows[0]) <= 0;
+      const events = tail ? current.events.concat(olderRows) : mergeHistory([...current.events, ...olderRows]);
+      apply({events, next, aggregate: current.aggregate}, tail ? "older" : "update");
+      if (next) accepted.cursors.add(next);
+      olderError = false;
+    });
+  }
+  async function refresh() {
+    const state = read();
+    if (active || !connected() || state.demo || !state.status) return;
+    if (accepted?.scope !== historyScope(state)) return load();
+    const since = groupSince(state);
+    const version = state.status.timeline_revision;
+    const oldest = state.aggregate?.oldest_received_at;
+    const empty = state.aggregate?.total_events === 0;
+    const stillInRange = since === accepted.lastSince || (
+      since && accepted.lastSince && Date.parse(since) >= Date.parse(accepted.lastSince) &&
+      (empty || oldest && Date.parse(since) <= Date.parse(oldest))
+    );
+    if (!catchup && !liveError && (version === accepted.lastVersion || version === accepted.revision) && stillInRange)
+      return;
+    // A clock correction that widens a rolling range needs a new older snapshot.
+    if (!catchup && since && accepted.lastSince &&
+        Date.parse(since) < Date.parse(accepted.lastSince)) return load();
+    const ticket = start("live");
+    await run(ticket, async () => {
+      const batch = catchup || {
+        before: "0", seen: new Set(), since, version, afterRevision: accepted.revision,
+      };
+      const seen = new Set();
+      let before = batch.before;
+      let aggregate = batch.aggregate;
       const incoming = [];
-      busy = true;
-      try {
-        let page;
-        for await (page of historyPages(api, state)) {
-          const current = read();
-          if (current.generation !== generation || current.demo !== state.demo ||
-              historyScope(current) !== scope) return;
-          incoming.push(...page.events);
-          const selectionLoaded = !state.selected || !known.has(state.selected) ||
-            incoming.some(event => event.event_id === state.selected);
-          if (appliedScope === scope && selectionLoaded && page.events.some(event => known.has(event.event_id))) break;
+      const corrections = new Map();
+      let selectedRecord;
+      const rows = {...state, since: batch.since};
+      for (let count = 0; before && count < catchupPages; count++) {
+        const result = await page(ticket, rows, before, seen, {
+          afterRevision: batch.afterRevision, selected: state.selected,
+        });
+        if (!result) return;
+        if (result.next && batch.seen.has(result.next))
+          throw new Error("Saved history pagination did not advance. Try again.");
+        aggregate = result.aggregate || aggregate;
+        for (const event of result.events) {
+          if (event.encounter_correction) {
+            const {encounter_correction, ...record} = event;
+            corrections.set(record.event_id, record);
+          } else incoming.push(event);
         }
-        const profiles = new Map(incoming.filter(event => event.name && event.handle)
-          .map(event => [event.actor_id, {name:event.name,handle:event.handle,profile_url:event.profile_url}]));
-        const events = mergeHistory([...incoming, ...existing])
-          .filter(event => !state.since || Date.parse(event.received_at) >= Date.parse(state.since))
-          .map(event => profiles.has(event.actor_id) ? {...event,...profiles.get(event.actor_id)} : event);
-        apply(events, existing.length ? state.next : page.next);
-        await refreshInteractions();
-        applied = version;
-        appliedScope = scope;
-      } finally {
-        busy = false;
+        if (result.selected_event) {
+          selectedRecord = result.selected_event;
+          corrections.set(selectedRecord.event_id, selectedRecord);
+        }
+        before = result.next;
+        if (before) seen.add(before);
+      }
+      // A profile-only revision can change cached names on loaded rows without a new event.
+      let profileRows = [];
+      if (batch.before === "0" && !before && !incoming.length &&
+          aggregate?.profile_revision !== state.aggregate?.profile_revision) {
+        const result = await page(ticket, rows, "0", new Set(), {localOnly: true});
+        if (!result) return;
+        profileRows = result.events;
       }
-    },
-  };
+      const current = read();
+      // Corrections update loaded rows. They never expand the loaded window.
+      const prior = corrections.size
+        ? current.events.map(event => corrections.get(event.event_id) ?? event)
+        : current.events;
+      const events = syncProfiles(
+        inRange(mergeHistory([...incoming, ...prior]), batch.since),
+        [...profileRows, ...incoming, ...(selectedRecord ? [selectedRecord] : [])],
+      );
+      const metadata = aggregate || current.aggregate;
+      const next = metadata?.total_events === events.length ? null : current.next;
+      if (events.length !== current.events.length || events.some((event, index) => event !== current.events[index]) ||
+          metadata?.revision !== current.aggregate?.revision || batch.since !== accepted.lastSince || next !== current.next)
+        apply({events, next, aggregate: metadata}, "update");
+      if (before) {
+        for (const cursor of seen) batch.seen.add(cursor);
+        catchup = {...batch, before, aggregate};
+      } else catchup = null;
+      accepted.lastSince = batch.since;
+      if (!before) {
+        accepted.revision = aggregate?.revision || batch.version;
+        accepted.lastVersion = batch.version;
+      }
+      liveError = false;
+      await refreshInteractions();
+    });
+  }
+  return { load, older, refresh, cancel, needsLoad: () => {
+    const scope = historyScope(read());
+    return accepted?.scope !== scope && !(active?.phase === "initial" && active.scope === scope);
+  }};
 }
diff --git a/src/xflog/assets/shell.html b/src/xflog/assets/shell.html
index a06f095..8109346 100644
--- a/src/xflog/assets/shell.html
+++ b/src/xflog/assets/shell.html
@@ -229,6 +229,10 @@ <h2>Every connection<br />has a chapter.</h2>
             ></div>
           </section>
           <span id="journey-position" class="sr-only">No memories yet</span>
+          <div class="history-paging">
+            <span id="history-page-status" role="status"></span>
+            <button id="history-more" class="text-button" type="button" hidden>Load older activity</button>
+          </div>
           <div class="scrubber">
             <div class="navigator-row">
               <label class="sr-only" for="memory-scrubber"
diff --git a/src/xflog/assets/timeline.css b/src/xflog/assets/timeline.css
index fec741b..80f0a3f 100644
--- a/src/xflog/assets/timeline.css
+++ b/src/xflog/assets/timeline.css
@@ -26,6 +26,22 @@
 .scrubber {
   padding: 8px 48px 16px;
 }
+.history-paging {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+  column-gap: 12px;
+  padding-inline: clamp(16px, 5vw, 48px);
+  color: var(--muted);
+  font-size: 12px;
+}
+.history-paging:has(#history-page-status:empty):has(#history-more[hidden]) {
+  display: none;
+}
+#history-more[aria-disabled="true"] {
+  opacity: 0.6;
+}
 .navigator-row {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
@@ -153,23 +169,35 @@
   padding: 16px 0 12px;
   flex-shrink: 0;
 }
+.journal-window {
+  position: relative;
+  overflow-anchor: none;
+}
+.journal-window > .journal-group,
+.journal-window .date-group,
+.journal-window .event {
+  position: absolute;
+  inset-inline: 0;
+}
 .journal-group {
   border-top: 1px solid var(--border);
-  margin-bottom: 20px;
 }
-.journal-group summary {
+.journal-group summary,
+.journal-group-summary {
   display: flex;
   align-items: center;
   gap: 16px;
   min-height: 56px;
   padding: 12px 0;
   list-style: none;
-  cursor: pointer;
   position: sticky;
   top: 0;
   z-index: 2;
   background: var(--ground);
 }
+.journal-group summary {
+  cursor: pointer;
+}
 .journal-group summary::-webkit-details-marker {
   display: none;
 }
@@ -205,10 +233,10 @@
   outline: 2px solid var(--accent);
   outline-offset: 4px;
 }
-.journal-group .date-group:first-child {
+.journal-group .journal-first-date {
   padding-top: 8px;
 }
-.journal-group .event:last-child:before {
+.journal-group .journal-last-event:before {
   bottom: 20px;
 }
 .date-group {
diff --git a/src/xflog/audience_groups/__init__.py b/src/xflog/audience_groups/__init__.py
index 4825ec1..1ddac8a 100644
--- a/src/xflog/audience_groups/__init__.py
+++ b/src/xflog/audience_groups/__init__.py
@@ -77,19 +77,29 @@ def capture(source: dict, saved=None) -> dict:
     return captured
 
 
+def bucket_for(module: AudienceGroup, event: dict) -> Bucket:
+    return _resolve_bucket(module, module.assign(event))
+
+
+def _resolve_bucket(module: AudienceGroup, value: str | Bucket) -> Bucket:
+    if module.dynamic_buckets and isinstance(value, Bucket):
+        return value
+    return next(
+        (bucket for bucket in module.buckets if bucket.key == value),
+        next(bucket for bucket in module.buckets if bucket.key == "unknown"),
+    )
+
+
 def decorate(event: dict, saved=None) -> dict:
     enabled = preferences(saved)
     groups, descriptors = {}, {}
     for key, module in MODULES.items():
         if enabled[key]:
-            bucket = module.assign(event)
-            if module.dynamic_buckets and isinstance(bucket, Bucket):
-                groups[key] = bucket.key
+            value = module.assign(event)
+            bucket = _resolve_bucket(module, value)
+            groups[key] = bucket.key
+            if module.dynamic_buckets and isinstance(value, Bucket):
                 descriptors[key] = asdict(bucket)
-            else:
-                groups[key] = (
-                    bucket if bucket in {item.key for item in module.buckets} else "unknown"
-                )
     return {**event, "audience_groups": groups, "audience_group_buckets": descriptors}
 
 
diff --git a/src/xflog/audience_groups/previous_encounters.py b/src/xflog/audience_groups/previous_encounters.py
index 69bd627..31b0102 100644
--- a/src/xflog/audience_groups/previous_encounters.py
+++ b/src/xflog/audience_groups/previous_encounters.py
@@ -7,12 +7,15 @@ def assign(event: dict) -> str:
     context = event.get("group_data", {}).get(KEY, {})
     if not isinstance(context, dict) or type(context.get("seen_before")) is not bool:
         return "unknown"
-    if not context["seen_before"]:
+    return encounter_bucket(
+        event.get("kind"), context["seen_before"], context.get("previous_follow_kind")
+    )
+
+
+def encounter_bucket(kind, seen_before, previous_follow_kind) -> str:
+    if not seen_before:
         return "first-appearance"
-    if (
-        event.get("kind") == "follow.follow"
-        and context.get("previous_follow_kind") == "follow.unfollow"
-    ):
+    if kind == "follow.follow" and previous_follow_kind == "follow.unfollow":
         return "followed-again"
     return "seen-before"
 
diff --git a/src/xflog/history/demo.py b/src/xflog/history/demo.py
index 54121f8..db66836 100644
--- a/src/xflog/history/demo.py
+++ b/src/xflog/history/demo.py
@@ -3,8 +3,12 @@
 from datetime import datetime, timedelta, timezone
 
 from .. import audience_groups
-from ..tracking.events import FOLLOW_TYPES, Event
+from ..tracking.events import FOLLOW_TYPES, Event, timestamp
 from .summary import SUBJECT_TYPES, activity_window, all_readings, readings
+from .timeline_aggregate import aggregate_demo
+from .timeline_cursor import Cursor, InvalidTimelineRequest, decode_cursor, scope_key
+
+DEMO_EVENT_COUNT = 76
 
 PEOPLE = [
     ("Maya Chen", "mayamakes"),
@@ -58,10 +62,11 @@ def profile_metadata(index: int) -> dict:
     }
 
 
-def demo_events() -> list[dict]:
-    anchor = datetime.now(timezone.utc).replace(second=0, microsecond=0) - timedelta(minutes=1)
+def demo_events(anchor=None) -> list[dict]:
+    if anchor is None:
+        anchor = datetime.now(timezone.utc).replace(second=0, microsecond=0) - timedelta(minutes=1)
     events = []
-    for index in range(76):
+    for index in range(DEMO_EVENT_COUNT):
         subject = "subscriptions" if index % 7 == 6 else "followers"
         lost = index % 5 == 3
         kind = (
@@ -72,7 +77,7 @@ def demo_events() -> list[dict]:
         name, handle = PEOPLE[index % len(PEOPLE)]
         provider = anchor - timedelta(minutes=index * 147 + (index % 4) * 31)
         event = Event(
-            f"synthetic-{76 - index}",
+            f"synthetic-{DEMO_EVENT_COUNT - index}",
             kind,
             "demo",
             str(1000 + index % len(PEOPLE)),
@@ -84,7 +89,7 @@ def demo_events() -> list[dict]:
         event["group_data"] = audience_groups.capture(
             profile_metadata(index), dict.fromkeys(audience_groups.MODULES, True)
         )
-        event["sequence"] = 76 - index
+        event["sequence"] = DEMO_EVENT_COUNT - index
         events.append(event)
     return events
 
@@ -112,11 +117,15 @@ def demo_activity(period: str, subject: str) -> dict:
 
 
 async def encounter_context(events: list[dict]) -> dict[int, dict]:
+    return _encounters(events, demo_events())
+
+
+def _encounters(events, records):
     if any(event["account_id"] != "demo" for event in events):
         return {}
     wanted = {event["sequence"] for event in events}
     seen, followers, contexts = set(), {}, {}
-    for event in reversed(demo_events()):
+    for event in reversed(records):
         actor = (event["account_id"], event["actor_id"])
         if event["sequence"] in wanted:
             contexts[event["sequence"]] = {
@@ -129,10 +138,19 @@ async def encounter_context(events: list[dict]) -> dict[int, dict]:
     return contexts
 
 
+def _filtered(events, query):
+    subject = query.get("subject", "followers")
+    types = SUBJECT_TYPES[subject]
+    kind = query.get("kind", "all")
+    if kind != "all":
+        types = types[:1] if kind == "gained" else types[1:]
+    since = query.get("since", "")
+    return [event for event in events if event["kind"] in types and event["received_at"] >= since]
+
+
 def demo_history(query: dict) -> dict:
     events = demo_events()
-    prefix = "subscriptions." if query.get("subject") == "subscriptions" else "follow."
-    filtered = [event for event in events if event["kind"].startswith(prefix)]
+    filtered = _filtered(events, query)
     counts = {
         kind: sum(event["kind"] == kind for event in events)
         for kind in (
@@ -142,10 +160,6 @@ def demo_history(query: dict) -> dict:
             "subscriptions.unsubscribe",
         )
     }
-    kind = query.get("kind", "all")
-    if kind != "all":
-        suffix = ("follow", "subscribe") if kind == "gained" else ("unfollow", "unsubscribe")
-        filtered = [event for event in filtered if event["kind"].split(".")[1] in suffix]
     before = int(query.get("before", 0))
     if before:
         filtered = [event for event in filtered if event["sequence"] < before]
@@ -156,3 +170,57 @@ def demo_history(query: dict) -> dict:
         "counts": counts,
         "synthetic": True,
     }
+
+
+async def demo_timeline(query, saved):
+    before = decode_cursor(query["before"])
+    groups = audience_groups.preferences(saved)
+    lens = query["lens"]
+    module = audience_groups.MODULES.get(lens) if groups.get(lens) else None
+    scope = scope_key(("demo", query["subject"], query["kind"], query["since"], lens, groups))
+    if before and (before.scope != scope or before.key[1] != 1):
+        raise InvalidTimelineRequest("Timeline cursor does not match this history scope.")
+    if before:
+        anchor_time, marker = before.watermarks
+        if marker or before.key[2] > DEMO_EVENT_COUNT:
+            raise InvalidTimelineRequest("Invalid demo snapshot.")
+        try:
+            anchor = datetime.fromtimestamp(anchor_time, timezone.utc)
+        except (ValueError, OverflowError, OSError):
+            raise InvalidTimelineRequest("Invalid demo snapshot.") from None
+    else:
+        anchor = datetime.now(timezone.utc).replace(second=0, microsecond=0) - timedelta(minutes=1)
+    try:
+        records = demo_events(anchor)
+    except OverflowError:
+        raise InvalidTimelineRequest("Invalid demo snapshot.") from None
+
+    async def lookup(rows):
+        return _encounters(rows, records)
+
+    filtered = _filtered(records, query)
+    if before:
+        if not any(
+            (event["received_at"], 1, event["sequence"]) == before.key for event in filtered
+        ):
+            raise InvalidTimelineRequest("Invalid demo snapshot.")
+        filtered = [event for event in filtered if event["sequence"] < before.key[2]]
+    limit = query["limit"]
+    rows = await audience_groups.decorate_history(
+        filtered if not before else filtered[:limit], groups, lookup
+    )
+    result = {"events": rows[:limit], "next": None, "synthetic": True}
+    anchor_time = int(anchor.timestamp())
+    if len(filtered) > limit:
+        last = rows[limit - 1]
+        result["next"] = Cursor(
+            (last["received_at"], 1, last["sequence"]), (anchor_time, 0), scope
+        ).encode()
+    if not before:
+        result["aggregate"] = {
+            **aggregate_demo(rows, module),
+            "revision": timestamp(anchor.isoformat()),
+            "profile_revision": "",
+            "scope": scope,
+        }
+    return result
diff --git a/src/xflog/history/store.py b/src/xflog/history/store.py
index 1025e4f..fe49249 100644
--- a/src/xflog/history/store.py
+++ b/src/xflog/history/store.py
@@ -26,6 +26,8 @@
 CREATE INDEX IF NOT EXISTS event_account_sequence ON events(account_id, sequence DESC);
 CREATE INDEX IF NOT EXISTS event_actor_sequence ON events(account_id, actor_id, sequence DESC);
 CREATE INDEX IF NOT EXISTS event_account_receipt ON events(account_id, received_at, kind);
+CREATE INDEX IF NOT EXISTS event_timeline_receipt ON events(account_id, received_at, sequence);
+CREATE INDEX IF NOT EXISTS event_actor_receipt ON events(account_id, actor_id, received_at, sequence);
 CREATE TABLE IF NOT EXISTS settings (key TEXT PRIMARY KEY, value TEXT NOT NULL);
 CREATE TABLE IF NOT EXISTS subscriptions (
  id TEXT PRIMARY KEY, kind TEXT NOT NULL, account_id TEXT NOT NULL,
diff --git a/src/xflog/history/timeline.py b/src/xflog/history/timeline.py
index 074f4b8..2581ecc 100644
--- a/src/xflog/history/timeline.py
+++ b/src/xflog/history/timeline.py
@@ -1,156 +1,272 @@
 """A local, paginated view over recorded audience and interaction events."""
 
-import base64
-import binascii
 import json
+from contextlib import asynccontextmanager
+from pathlib import Path
 
+import aiosqlite
+
+from .. import audience_groups
+from ..audience_groups.previous_encounters import KEY as ENCOUNTERS_KEY
+from ..audience_groups.previous_encounters import encounter_bucket
 from ..interactions import choices
-from ..tracking.events import FOLLOW_TYPES, SUBSCRIPTION_TYPES, Event, timestamp
-
-
-def decode_cursor(value: str) -> tuple:
-    if value in {"", "0"}:
-        return ()
-    try:
-        if len(value) > 256:
-            raise ValueError
-        result = json.loads(base64.urlsafe_b64decode(value.encode() + b"=" * (-len(value) % 4)))
-        if (
-            not isinstance(result, list)
-            or len(result) != 3
-            or not isinstance(result[0], str)
-            or timestamp(result[0]) != result[0]
-            or type(result[1]) is not int
-            or result[1] not in {0, 1}
-            or type(result[2]) is not int
-            or not 0 < result[2] <= 9223372036854775807
-        ):
-            raise ValueError
-        return tuple(result)
-    except (ValueError, TypeError, binascii.Error, UnicodeError):
-        raise ValueError("Invalid timeline cursor.") from None
-
-
-def encode_cursor(row) -> str:
-    value = [row["received_at"], row["source"], row["position"]]
-    return base64.urlsafe_b64encode(json.dumps(value).encode()).decode().rstrip("=")
+from ..tracking.events import Event
+from .timeline_aggregate import aggregate_records, empty_aggregate, encounter_from_row
+from .timeline_cursor import (
+    MAX_SEQUENCE,
+    Cursor,
+    InvalidTimelineRequest,
+    decode_cursor,
+    revision_watermarks,
+    scope_key,
+    selected_position,
+)
+from .timeline_queries import (
+    ENCOUNTER_BOUNDARY_SQL,
+    REVISION_SQL,
+    TimelineQuery,
+    encounter_columns,
+    encounter_corrections,
+    page_sql,
+)
+
+_CURRENT_ACCOUNT = object()
+
+
+async def _revision(db, account):
+    async with db.execute(REVISION_SQL, {"account": account}) as cursor:
+        return tuple(await cursor.fetchone())
+
+
+async def _prior_backfill_boundary(db, query, after):
+    params = dict(zip(("old_event_max", "old_interaction_max"), after, strict=True))
+    params.update(
+        account=query.account, event_max=query.watermarks[0], interaction_max=query.watermarks[1]
+    )
+    async with db.execute(ENCOUNTER_BOUNDARY_SQL, params) as cursor:
+        row = await cursor.fetchone()
+        return row[0] if row else None
+
+
+def _sequence(row):
+    return row["position"] if row["source"] else -row["position"]
+
+
+def _event(row):
+    sequence = _sequence(row)
+    actor_id = row["actor_id"]
+    handle, name = row["handle"], row["name"]
+    return {
+        **Event(
+            f"timeline:{'event' if sequence > 0 else 'interaction'}:{abs(sequence)}",
+            row["kind"],
+            row["account_id"],
+            actor_id,
+            handle,
+            name if handle or name else f"Account {actor_id}",
+            row["provider_at"],
+            row["received_at"],
+            json.loads(row["group_data"]),
+        ).public(),
+        "sequence": sequence,
+        **(
+            {"encounter_correction": True}
+            if "encounter_correction" in row.keys() and row["encounter_correction"]
+            else {}
+        ),
+        **({"post_id": row["post_id"], "post_text": row["post_text"]} if sequence < 0 else {}),
+    }
+
+
+async def _decorate(rows, groups):
+    async def encounters(_):
+        return {_sequence(row): encounter_from_row(row) for row in rows}
+
+    return await audience_groups.decorate_history([_event(row) for row in rows], groups, encounters)
 
 
 class Timeline:
     def __init__(self, store):
         self.store = store
 
+    @asynccontextmanager
+    async def _snapshot(self):
+        # A WAL reader can hold a consistent snapshot while ingestion commits on Store's connection.
+        address = Path(self.store.path).resolve().as_uri() + "?mode=ro"
+        async with aiosqlite.connect(address, uri=True) as db:
+            db.row_factory = aiosqlite.Row
+            await db.execute("BEGIN")
+            yield db
+
     async def revision(self, account: str) -> str:
-        async with self.store.db.execute(
-            """SELECT (SELECT COALESCE(MAX(sequence),0) FROM events WHERE account_id=?),
-            (SELECT COALESCE(MAX(sequence),0) FROM interactions WHERE account_id=?),
-            (SELECT COALESCE(MAX(observed_at),'') FROM known_profiles WHERE account_id=?),
-            (SELECT COALESCE(MAX(checked_at),'') FROM thread_snapshots WHERE account_id=?)""",
-            (account, account, account, account),
-        ) as cursor:
-            return ":".join(map(str, await cursor.fetchone()))
+        return ":".join(map(str, await _revision(self.store.db, account)))
 
-    async def history(self, account: str, query: dict) -> dict:
+    async def current_history(self, query: dict) -> dict:
+        return await self.history(_CURRENT_ACCOUNT, query)
+
+    async def history(self, account, query: dict) -> dict:
         before = decode_cursor(query.get("before", "0"))
-        subject, kind = query.get("subject", "followers"), query.get("kind", "all")
-        types = SUBSCRIPTION_TYPES if subject == "subscriptions" else FOLLOW_TYPES
-        if kind != "all":
-            types = types[:1] if kind == "gained" else types[1:]
-        enabled = choices(await self.store.setting("selection", {}))
-        interactions = (
-            [key for key, on in enabled.items() if on]
-            if subject == "followers" and kind == "all"
-            else []
+        after = (
+            revision_watermarks(query["after_revision"]) if query.get("after_revision") else None
         )
-        event_slots = ",".join("?" for _ in types)
-        interaction_slots = ",".join("?" for _ in interactions) or "NULL"
-        sql = f"""WITH activity AS (
-          SELECT sequence AS position, 1 AS source, event_id, kind, account_id, actor_id,
-          handle,name,provider_at,received_at,group_data,NULL AS post_id,NULL AS post_text FROM events
-          WHERE account_id=? AND kind IN ({event_slots})
-          UNION ALL
-          SELECT i.sequence, 0, 'interaction:'||i.sequence, 'interaction.'||i.kind,
-          i.account_id,i.person_id,
-          COALESCE(json_extract(i.profile_data,'$.handle'),
-            (SELECT e.handle FROM events e WHERE e.account_id=i.account_id AND e.actor_id=i.person_id
-             AND e.handle IS NOT NULL ORDER BY e.sequence DESC LIMIT 1)),
-          COALESCE(json_extract(i.profile_data,'$.name'),
-            (SELECT e.name FROM events e WHERE e.account_id=i.account_id AND e.actor_id=i.person_id
-             AND e.name IS NOT NULL ORDER BY e.sequence DESC LIMIT 1)),
-          i.provider_at,i.received_at,COALESCE(json_extract(i.profile_data,'$.group_data'),'{{}}'),
-          i.post_id,substr(post.text,1,281)
-          FROM interactions i LEFT JOIN interaction_posts post
-            ON post.account_id=i.account_id AND post.id=i.post_id
-          WHERE i.account_id=? AND i.kind IN ({interaction_slots})
-        ) SELECT activity.*,p.name AS cached_name,p.handle AS cached_handle FROM activity
-          LEFT JOIN known_profiles p ON p.account_id=activity.account_id AND p.actor_id=activity.actor_id"""
-        params = (account, *types, account, *interactions)
-        if before:
-            sql += " WHERE (received_at,source,position)<(?,?,?)"
-            params += before
-        if since := query.get("since"):
-            sql += (" AND" if before else " WHERE") + " received_at>=?"
-            params += (since,)
+        selected = selected_position(query["selected"]) if query.get("selected") else None
+        context = (
+            revision_watermarks(query["encounter_revision"])
+            if query.get("encounter_revision")
+            else None
+        )
+        if context and (not before or after):
+            raise InvalidTimelineRequest("Encounter revision applies to an older history page.")
+        if before and selected:
+            raise InvalidTimelineRequest("Select a timeline event on the first page.")
+        subject, kind = query.get("subject", "followers"), query.get("kind", "all")
+        lens, since = query.get("lens", "none"), query.get("since", "")
+        if lens != "none" and lens not in audience_groups.MODULES:
+            raise InvalidTimelineRequest("Invalid audience group.")
         limit = min(50, max(1, int(query.get("limit", 25))))
-        sql += " ORDER BY received_at DESC,source DESC,position DESC LIMIT ?"
-        async with self.store.db.execute(sql, (*params, limit + 1)) as cursor:
-            rows = await cursor.fetchall()
-        events = []
-        for row in rows[:limit]:
-            values = dict(row)
-            source, position = values.pop("source"), values.pop("position")
-            post_id, post_text = values.pop("post_id"), values.pop("post_text")
-            values["name"] = values.pop("cached_name") or values["name"]
-            values["handle"] = values.pop("cached_handle") or values["handle"]
-            values["event_id"] = f"timeline:{'event' if source else 'interaction'}:{position}"
-            values["group_data"] = json.loads(values["group_data"])
-            if not values["name"] and not values["handle"]:
-                values["name"] = f"Account {values['actor_id']}"
-            events.append(
-                {
-                    **Event(**values).public(),
-                    "sequence": position if source else -position,
-                    **({"post_id": post_id, "post_text": post_text} if not source else {}),
+        async with self._snapshot() as db:
+            async with db.execute(
+                "SELECT key,value FROM settings WHERE key IN ('account','selection','audience_groups')"
+            ) as cursor:
+                settings = {row[0]: json.loads(row[1]) async for row in cursor}
+            if account is _CURRENT_ACCOUNT:
+                account = (settings.get("account") or {}).get("id")
+            groups = audience_groups.preferences(settings.get("audience_groups"))
+            module = audience_groups.MODULES.get(lens) if groups.get(lens) else None
+            active_encounters = bool(module and lens == ENCOUNTERS_KEY)
+            if context and not active_encounters:
+                raise InvalidTimelineRequest(
+                    "Encounter revision requires the Previous encounters group."
+                )
+            enabled = choices(settings.get("selection", {}))
+            interactions = (
+                tuple(key for key, on in enabled.items() if on)
+                if subject == "followers" and kind == "all"
+                else ()
+            )
+            scope = scope_key((account, subject, kind, since, lens, interactions, groups))
+            cursor_scope = scope_key((scope, after))
+            if before and before.scope != cursor_scope:
+                raise InvalidTimelineRequest("Timeline cursor does not match this history scope.")
+            if account is None:
+                result = {"events": [], "next": None, "aggregate": empty_aggregate(scope, "0:0")}
+                if selected:
+                    result["selected_event"] = None
+                return result
+            if before:
+                watermarks = before.watermarks
+            else:
+                marks = await _revision(db, account)
+                watermarks = marks[:2]
+            if after and any(mark > upper for mark, upper in zip(after, watermarks, strict=True)):
+                raise InvalidTimelineRequest(
+                    "Timeline revision belongs to an unavailable snapshot."
+                )
+            if context and context != watermarks:
+                latest = (await _revision(db, account))[:2]
+                if any(
+                    not lower <= mark <= upper
+                    for lower, mark, upper in zip(watermarks, context, latest, strict=True)
+                ):
+                    raise InvalidTimelineRequest(
+                        "Encounter revision belongs to an unavailable snapshot."
+                    )
+            scope_query = TimelineQuery(account, subject, kind, since, interactions, watermarks)
+            result = await self._page(
+                db,
+                scope_query,
+                groups,
+                before,
+                after,
+                selected,
+                limit,
+                context or watermarks,
+                active_encounters,
+            )
+            if result["next"] is not None:
+                result["next"] = Cursor(result["next"], watermarks, cursor_scope).encode()
+            if not before:
+                result["aggregate"] = {
+                    **await aggregate_records(db, scope_query, module),
+                    "revision": ":".join(map(str, marks)),
+                    "profile_revision": marks[2],
+                    "scope": scope,
                 }
+            return result
+
+    async def _page(
+        self, db, query, groups, before, after, selected, limit, context, active_encounters
+    ):
+        needs_context = groups[ENCOUNTERS_KEY]
+        boundary_key = before.key if before else None
+        sql, params = query.records(before=boundary_key, after=after, page_size=limit + 1)
+        correction_sql = ""
+        if active_encounters and after and after != query.watermarks:
+            prior_receipt = await _prior_backfill_boundary(db, query, after)
+            if prior_receipt is not None:
+                await db.create_function(
+                    "encounter_bucket", 3, encounter_bucket, deterministic=True
+                )
+                correction_sql, correction_params = encounter_corrections(
+                    query, boundary_key, after, limit + 1
+                )
+                params.update(correction_params, prior_receipt=prior_receipt)
+                sql = f"SELECT fresh.*,0 AS encounter_correction FROM ({sql}) fresh UNION ALL SELECT corrections.*,1 FROM corrections"
+        context_params = dict(
+            zip(("context_event_max", "context_interaction_max"), context, strict=True)
+        )
+        async with db.execute(
+            page_sql(sql, encounters=needs_context, correction_sql=correction_sql),
+            {**params, **context_params},
+        ) as cursor:
+            rows = await cursor.fetchall()
+        boundary = None
+        if len(rows) > limit:
+            last = rows[limit - 1]
+            boundary = (last["received_at"], last["source"], last["position"])
+        rows = rows[:limit]
+        selected_rows = []
+        if selected and not any((row["source"], row["position"]) == selected for row in rows):
+            sql, params = query.records(selected=selected, page_size=1)
+            if sql:
+                async with db.execute(
+                    page_sql(sql, encounters=needs_context), {**params, **context_params}
+                ) as cursor:
+                    selected_rows = await cursor.fetchall()
+        events = await _decorate(rows + selected_rows, groups)
+        result = {"events": events[: len(rows)], "next": boundary}
+        if selected:
+            sequence = selected[1] if selected[0] else -selected[1]
+            selected_event = next(
+                (event for event in events if event["sequence"] == sequence),
+                None,
             )
-        return {
-            "events": events,
-            "next": encode_cursor(rows[limit - 1]) if len(rows) > limit else None,
-        }
+            if selected_event and selected_event.get("encounter_correction"):
+                selected_event = dict(selected_event)
+                del selected_event["encounter_correction"]
+            result["selected_event"] = selected_event
+        return result
 
     async def encounter_context(self, events: list[dict]) -> dict:
-        result = {}
-        for event in events:
-            account, person, received = event["account_id"], event["actor_id"], event["received_at"]
-            sequence = event["sequence"]
-            async with self.store.db.execute(
-                """SELECT EXISTS(
-                  SELECT 1 FROM events WHERE account_id=? AND actor_id=?
-                    AND (received_at,1,sequence)<(?,?,?)
-                  UNION ALL SELECT 1 FROM interactions WHERE account_id=? AND person_id=?
-                    AND (received_at,0,sequence)<(?,?,?)
-                ), (SELECT kind FROM events WHERE account_id=? AND actor_id=?
-                  AND kind IN ('follow.follow','follow.unfollow')
-                  AND (received_at,1,sequence)<(?,?,?)
-                  ORDER BY received_at DESC,sequence DESC LIMIT 1)""",
-                (
-                    account,
-                    person,
-                    received,
-                    int(sequence > 0),
-                    abs(sequence),
-                    account,
-                    person,
-                    received,
-                    int(sequence > 0),
-                    abs(sequence),
-                    account,
-                    person,
-                    received,
-                    int(sequence > 0),
-                    abs(sequence),
-                ),
-            ) as cursor:
-                seen, previous = await cursor.fetchone()
-            result[sequence] = {"seen_before": bool(seen), "previous_follow_kind": previous}
-        return result
+        if not events:
+            return {}
+        account = events[0]["account_id"]
+        if any(event["account_id"] != account for event in events):
+            raise ValueError("History context must belong to one account.")
+        params = {"account": account, "event_max": MAX_SEQUENCE, "interaction_max": MAX_SEQUENCE}
+        for index, event in enumerate(events):
+            seq = event["sequence"]
+            params.update(
+                {
+                    f"p{index}": abs(seq),
+                    f"s{index}": int(seq > 0),
+                    f"a{index}": event["actor_id"],
+                    f"r{index}": event["received_at"],
+                }
+            )
+        slots = ",".join(f"(:p{i},:s{i},:a{i},:r{i})" for i in range(len(events)))
+        # The legacy helper has no paging snapshot. It describes the current account history.
+        sql = f"""WITH wanted(position,source,actor_id,received_at) AS (VALUES {slots})
+        SELECT r.position,r.source,{encounter_columns()} FROM wanted r"""
+        async with self.store.db.execute(sql, params) as cursor:
+            return {_sequence(row): encounter_from_row(row) async for row in cursor}
diff --git a/src/xflog/history/timeline_aggregate.py b/src/xflog/history/timeline_aggregate.py
new file mode 100644
index 0000000..8b56ac9
--- /dev/null
+++ b/src/xflog/history/timeline_aggregate.py
@@ -0,0 +1,133 @@
+"""Exact totals over local records, with per-actor streaming for derived buckets."""
+
+import json
+from collections import Counter
+from dataclasses import asdict
+
+from .. import audience_groups
+from ..audience_groups.previous_encounters import KEY as ENCOUNTERS_KEY
+from .timeline_cursor import InvalidTimelineRequest
+from .timeline_queries import group_rows_sql, kind_totals_sql
+
+
+def empty_aggregate(scope, revision):
+    return {
+        "total_events": 0,
+        "distinct_actors": 0,
+        "kinds": {},
+        "groups": [],
+        "revision": revision,
+        "profile_revision": "",
+        "scope": scope,
+        "oldest_received_at": None,
+    }
+
+
+class BucketCounts:
+    def __init__(self, module):
+        self.module = module
+        self.counts = {}
+        self.latest = {}
+        self.actor = None
+        self.actor_buckets = set()
+
+    def add(self, event, order):
+        if event["actor_id"] != self.actor:
+            self.actor = event["actor_id"]
+            self.actor_buckets.clear()
+        bucket = audience_groups.bucket_for(self.module, event)
+        key = bucket.key
+        if key not in self.counts:
+            self.counts[key] = {**asdict(bucket), "event_count": 0, "distinct_actors": 0}
+            if self.module.dynamic_buckets:
+                self.latest[key] = order
+        item = self.counts[key]
+        if self.module.dynamic_buckets and order > self.latest[key]:
+            self.latest[key] = order
+            item["label"] = bucket.label
+        item["event_count"] += 1
+        if key not in self.actor_buckets:
+            item["distinct_actors"] += 1
+            self.actor_buckets.add(key)
+
+    def result(self):
+        if self.module.dynamic_buckets:
+            return sorted(
+                self.counts.values(), key=lambda item: (item["key"] == "unknown", item["label"])
+            )
+        return [
+            self.counts[bucket.key] for bucket in self.module.buckets if bucket.key in self.counts
+        ]
+
+
+def encounter_from_row(row):
+    return {
+        "seen_before": bool(row["seen_before"]),
+        "previous_follow_kind": row["previous_follow_kind"],
+    }
+
+
+async def aggregate_records(db, query, module):
+    if module and module.prepare and module.key != ENCOUNTERS_KEY:
+        raise InvalidTimelineRequest("History totals are unavailable for this audience group.")
+    activity = module is not None and module.key == "activity"
+    records, params = query.records()
+    async with db.execute(kind_totals_sql(records, activity=activity), params) as cursor:
+        kind_counts = {row["kind"]: dict(row) async for row in cursor}
+    totals = kind_counts.pop(None)
+    groups = []
+    if activity:
+        for bucket in module.buckets:
+            if item := kind_counts.get(bucket.key):
+                groups.append(
+                    {
+                        **asdict(bucket),
+                        "event_count": item["event_count"],
+                        "distinct_actors": item["distinct_actors"],
+                    }
+                )
+    elif module:
+        counts = BucketCounts(module)
+        encounters = module.key == ENCOUNTERS_KEY
+        if encounters:
+            records, params = query.records(encounters=True)
+        async with db.execute(group_rows_sql(records, encounters=encounters), params) as cursor:
+            async for row in cursor:
+                data = (
+                    {ENCOUNTERS_KEY: encounter_from_row(row)}
+                    if encounters
+                    else json.loads(row["group_data"])
+                )
+                event = {
+                    "actor_id": row["actor_id"],
+                    "kind": row["kind"],
+                    "received_at": row["received_at"],
+                    "group_data": data,
+                }
+                counts.add(event, (row["received_at"], row["source"], row["position"]))
+        groups = counts.result()
+    return {
+        "total_events": totals["event_count"],
+        "distinct_actors": totals["distinct_actors"],
+        "kinds": {key: item["event_count"] for key, item in kind_counts.items()},
+        "groups": groups,
+        "oldest_received_at": totals["oldest_received_at"],
+    }
+
+
+def aggregate_demo(events, module):
+    kinds = Counter(event["kind"] for event in events)
+    actors = {event["actor_id"] for event in events}
+    groups = []
+    if module:
+        counts = BucketCounts(module)
+        for event in sorted(events, key=lambda event: event["actor_id"]):
+            counts.add(event, (event["received_at"], 1, event["sequence"]))
+        groups = counts.result()
+    return {
+        "total_events": len(events),
+        "distinct_actors": len(actors),
+        "kinds": kinds,
+        "groups": groups,
+        "oldest_received_at": min((event["received_at"] for event in events), default=None),
+    }
diff --git a/src/xflog/history/timeline_cursor.py b/src/xflog/history/timeline_cursor.py
new file mode 100644
index 0000000..9cc844d
--- /dev/null
+++ b/src/xflog/history/timeline_cursor.py
@@ -0,0 +1,88 @@
+"""Scoped continuations for the mixed local timeline."""
+
+import base64
+import binascii
+import hashlib
+import json
+from dataclasses import dataclass
+
+from ..tracking.events import timestamp
+
+MAX_SEQUENCE = 2**63 - 1
+
+
+class InvalidTimelineRequest(ValueError):
+    pass
+
+
+def scope_key(parts) -> str:
+    return hashlib.sha256(json.dumps(parts, separators=(",", ":")).encode()).hexdigest()
+
+
+def sequence(value: str) -> int:
+    if value.isascii() and value.isdecimal() and len(value) <= 19:
+        result = int(value)
+        if result <= MAX_SEQUENCE:
+            return result
+    raise InvalidTimelineRequest("Invalid timeline sequence.")
+
+
+def revision_watermarks(value: str) -> tuple[int, int]:
+    first, separator, remaining = value.partition(":")
+    if separator and len(value) <= 128:
+        return sequence(first), sequence(remaining.partition(":")[0])
+    raise InvalidTimelineRequest("Invalid timeline revision.")
+
+
+def selected_position(value: str) -> tuple[int, int]:
+    prefix, _, kind_and_position = value.partition(":")
+    kind, _, number = kind_and_position.partition(":")
+    if prefix == "timeline" and kind in {"event", "interaction"}:
+        position = sequence(number)
+        if position and str(position) == number:
+            return int(kind == "event"), position
+    raise InvalidTimelineRequest("Invalid selected timeline event.")
+
+
+@dataclass(frozen=True)
+class Cursor:
+    key: tuple[str, int, int]
+    watermarks: tuple[int, int]
+    scope: str
+
+    def encode(self) -> str:
+        payload = json.dumps((*self.key, *self.watermarks, self.scope), separators=(",", ":"))
+        return base64.urlsafe_b64encode(payload.encode()).decode().rstrip("=")
+
+
+def decode_cursor(value: str) -> Cursor | None:
+    if value in {"", "0"}:
+        return None
+    try:
+        if len(value) > 256:
+            raise ValueError
+        data = base64.b64decode(value.encode() + b"=" * (-len(value) % 4), b"-_", validate=True)
+        decoded = json.loads(data)
+        if not isinstance(decoded, list) or len(decoded) != 6:
+            raise ValueError
+        received, source, position, event_max, interaction_max, scope = decoded
+        watermarks = (event_max, interaction_max)
+        if (
+            timestamp(received) != received
+            or not isinstance(received, str)
+            or type(source) is not int
+            or source not in {0, 1}
+            or type(position) is not int
+            or not all(type(mark) is int and 0 <= mark <= MAX_SEQUENCE for mark in watermarks)
+            or not 0 < position <= watermarks[1 - source]
+            or not isinstance(scope, str)
+            or len(scope) != 64
+            or any(character not in "0123456789abcdef" for character in scope)
+        ):
+            raise ValueError
+        cursor = Cursor((received, source, position), watermarks, scope)
+        if cursor.encode() != value:
+            raise ValueError
+        return cursor
+    except (ValueError, TypeError, binascii.Error, UnicodeError, OverflowError, RecursionError):
+        raise InvalidTimelineRequest("Invalid timeline cursor.") from None
diff --git a/src/xflog/history/timeline_queries.py b/src/xflog/history/timeline_queries.py
new file mode 100644
index 0000000..a995b6c
--- /dev/null
+++ b/src/xflog/history/timeline_queries.py
@@ -0,0 +1,285 @@
+"""The shared SQLite scope for timeline pages and whole-history counts."""
+
+from dataclasses import dataclass
+
+from ..tracking.events import FOLLOW_TYPES, SUBSCRIPTION_TYPES
+from .timeline_cursor import MAX_SEQUENCE
+
+REVISION_SQL = """SELECT
+ (SELECT COALESCE(MAX(sequence),0) FROM events WHERE account_id=:account),
+ (SELECT COALESCE(MAX(sequence),0) FROM interactions INDEXED BY interaction_account_sequence
+  WHERE account_id=:account),
+ (SELECT COALESCE(MAX(observed_at),'') FROM known_profiles WHERE account_id=:account),
+ (SELECT COALESCE(MAX(checked_at),'') FROM thread_snapshots WHERE account_id=:account)"""
+
+_PRIOR_RECEIPT_SQL = """SELECT MAX(received_at) AS receipt FROM (
+ SELECT * FROM (SELECT received_at FROM events INDEXED BY event_timeline_receipt
+   WHERE account_id=:account AND sequence<=:old_event_max ORDER BY received_at DESC LIMIT 1)
+ UNION ALL SELECT * FROM (SELECT received_at FROM interactions INDEXED BY interaction_receipt
+   WHERE account_id=:account AND sequence<=:old_interaction_max ORDER BY received_at DESC LIMIT 1)
+)"""
+
+_ENCOUNTER_ARRIVALS = """SELECT actor_id,received_at,1 AS source,kind
+    FROM events INDEXED BY event_account_sequence
+    WHERE account_id=:account AND sequence>:old_event_max AND sequence<=:event_max
+      AND received_at<:prior_receipt
+ UNION ALL SELECT person_id,received_at,0,NULL FROM interactions INDEXED BY interaction_account_sequence
+    WHERE account_id=:account AND sequence>:old_interaction_max AND sequence<=:interaction_max
+      AND received_at<=:prior_receipt"""
+ENCOUNTER_BOUNDARY_SQL = f"""WITH previous AS ({_PRIOR_RECEIPT_SQL})
+ SELECT receipt FROM previous
+ WHERE receipt IS NOT NULL AND EXISTS ({_ENCOUNTER_ARRIVALS.replace(":prior_receipt", "receipt")})"""
+
+# Separate equal-receipt and earlier-receipt seeks to avoid rescanning large timestamp ties.
+_PRIOR_EVENT = """FROM events prior
+ WHERE prior.account_id=:account AND prior.actor_id=r.actor_id
+ AND prior.sequence<=:{context}event_max"""
+_PRIOR_INTERACTION = """FROM interactions prior
+ WHERE prior.account_id=:account AND prior.person_id=r.actor_id
+ AND prior.sequence<=:{context}interaction_max"""
+_EARLIER = " AND prior.received_at<r.received_at"
+_TIED_EVENT = " AND r.source=1 AND prior.received_at=r.received_at AND prior.sequence<r.position"
+_TIED_INTERACTION = """ AND prior.received_at=r.received_at
+ AND prior.sequence<=CASE WHEN r.source=0 THEN r.position-1 ELSE :{context}interaction_max END"""
+_FOLLOW_KINDS = "('follow.follow','follow.unfollow')"
+_SEEN_BEFORE = f"""CASE
+ WHEN EXISTS (SELECT 1 {_PRIOR_INTERACTION}{_TIED_INTERACTION}) THEN 1
+ WHEN EXISTS (SELECT 1 {_PRIOR_EVENT}{_TIED_EVENT}) THEN 1
+ WHEN EXISTS (SELECT 1 {_PRIOR_EVENT}{_EARLIER}) THEN 1
+ ELSE EXISTS (SELECT 1 {_PRIOR_INTERACTION}{_EARLIER}) END"""
+_PREVIOUS_FOLLOW = f"""COALESCE(
+ (SELECT prior.kind {_PRIOR_EVENT}{_TIED_EVENT} AND prior.kind IN {_FOLLOW_KINDS}
+  ORDER BY prior.sequence DESC LIMIT 1),
+ (SELECT prior.kind {_PRIOR_EVENT}{_EARLIER} AND prior.kind IN {_FOLLOW_KINDS}
+  ORDER BY prior.received_at DESC,prior.sequence DESC LIMIT 1))"""
+
+
+def encounter_columns(context=""):
+    return (
+        f"({_SEEN_BEFORE.format(context=context)}) AS seen_before,"
+        f"({_PREVIOUS_FOLLOW.format(context=context)}) AS previous_follow_kind"
+    )
+
+
+SNAPSHOT = "COALESCE(e.group_data,json_extract(i.profile_data,'$.group_data'),'{}') AS group_data"
+RECORD_JOIN = """LEFT JOIN events e ON r.source=1 AND e.sequence=r.position
+ LEFT JOIN interactions i ON r.source=0 AND i.sequence=r.position"""
+
+
+def _successor(table, actor, source, *, follow=False):
+    bound = "event" if source else "interaction"
+    index = "event_actor_receipt" if source else "interaction_actor_receipt"
+    # At a receipt tie, every older snapshot sequence is below a new row's sequence in that source.
+    later = "received_at>n.received_at"
+    if source:
+        later = "received_at>=n.received_at AND (received_at>n.received_at OR n.source=0)"
+    follow_only = f" AND n.kind IN {_FOLLOW_KINDS} AND kind IN {_FOLLOW_KINDS}" if follow else ""
+    return f"""SELECT (SELECT sequence FROM {table} INDEXED BY {index}
+        WHERE account_id=:account AND {actor}=n.actor_id
+        AND sequence<=:old_{bound}_max AND {later}{follow_only}
+        ORDER BY received_at,sequence LIMIT 1) AS position,{source} AS source FROM arrivals n"""
+
+
+def encounter_corrections(query, before, after, page_size):
+    scoped, params = query.records(before=before, page_size=page_size, candidates="changed")
+    params.update(zip(("old_event_max", "old_interaction_max"), after, strict=True))
+    successors = " UNION ".join(
+        (
+            _successor("events", "actor_id", 1),
+            _successor("interactions", "person_id", 0),
+            _successor("events", "actor_id", 1, follow=True),
+        )
+    )
+    # Only the first old encounter and the first old follow action after an arrival can change.
+    # Check both source successors, then compare actual classifications to discard unaffected rows.
+    return (
+        f"""arrivals AS MATERIALIZED ({_ENCOUNTER_ARRIVALS}),
+    candidates AS MATERIALIZED ({successors}),
+    old_context AS MATERIALIZED (
+      SELECT r.*,{encounter_columns("old_")} FROM (
+        SELECT e.sequence AS position,1 AS source,e.kind,e.actor_id,e.received_at
+          FROM candidates c JOIN events e ON c.source=1 AND e.sequence=c.position
+        UNION ALL SELECT i.sequence,0,'interaction.'||i.kind,i.person_id,i.received_at
+          FROM candidates c JOIN interactions i ON c.source=0 AND i.sequence=c.position
+      ) r
+    ), new_context AS MATERIALIZED (
+      SELECT r.position,r.source,r.kind,
+        encounter_bucket(r.kind,r.seen_before,r.previous_follow_kind) AS old_bucket,
+        {encounter_columns()}
+      FROM old_context r
+    ), changed AS (
+      SELECT position,source FROM new_context
+      WHERE encounter_bucket(kind,seen_before,previous_follow_kind)<>old_bucket
+    ), corrections AS ({scoped}),""",
+        params,
+    )
+
+
+def _slots(params, prefix, values):
+    slots = {f"{prefix}{index}": value for index, value in enumerate(values)}
+    params.update(slots)
+    return ",".join(f":{key}" for key in slots) or "NULL"
+
+
+@dataclass(frozen=True)
+class TimelineQuery:
+    account: str
+    subject: str
+    kind: str
+    since: str
+    interactions: tuple[str, ...]
+    watermarks: tuple[int, int]
+
+    def records(
+        self,
+        *,
+        before=None,
+        after=None,
+        selected=None,
+        page_size=None,
+        encounters=False,
+        candidates=None,
+    ) -> tuple[str, dict]:
+        event_max, interaction_max = self.watermarks
+        params = {
+            "account": self.account,
+            "event_max": event_max,
+            "interaction_max": interaction_max,
+        }
+        types = SUBSCRIPTION_TYPES if self.subject == "subscriptions" else FOLLOW_TYPES
+        if self.kind != "all":
+            types = types[:1] if self.kind == "gained" else types[1:]
+        event_slots = _slots(params, "event_kind", types)
+        interaction_slots = _slots(params, "interaction_kind", self.interactions)
+        branches = []
+        if before:
+            params["before_at"] = before[0]
+        if self.since:
+            params["since"] = self.since
+        for source, table, actor, upper, receipt_index, sequence_index in (
+            (
+                1,
+                "events",
+                "actor_id",
+                "event_max",
+                "event_timeline_receipt",
+                "event_account_sequence",
+            ),
+            (
+                0,
+                "interactions",
+                "person_id",
+                "interaction_max",
+                "interaction_receipt",
+                "interaction_account_sequence",
+            ),
+        ):
+            if (not source and not self.interactions and not encounters) or (
+                selected and source != selected[0]
+            ):
+                continue
+            slots = event_slots if source else interaction_slots
+            kind = "kind" if source else "'interaction.'||kind"
+            index = ""
+            if page_size and not selected and not candidates:
+                index = f" INDEXED BY {sequence_index if after is not None else receipt_index}"
+            matches = f"kind IN ({slots})"
+            if self.since:
+                matches += " AND received_at>=:since"
+            projection = f",({matches}) AS matches_scope" if encounters else ""
+            branch = f"""SELECT sequence AS position,{source} AS source,{kind} AS kind,
+                {actor} AS actor_id,received_at{projection} FROM {table}{index}
+                WHERE account_id=:account AND sequence<=:{upper}"""
+            if candidates:
+                branch += (
+                    f" AND sequence IN (SELECT position FROM {candidates} WHERE source={source})"
+                )
+            if not encounters:
+                branch += f" AND {matches}"
+            if before:
+                mark = f"{upper}_before"
+                # At a tie, a higher source is newer; within the same source use sequence.
+                _, before_source, before_position = before
+                params[mark] = {1: 0, 0: before_position - 1, -1: MAX_SEQUENCE}[
+                    source - before_source
+                ]
+                if page_size and after is None:
+                    params["limit"] = page_size
+                    branches.append(_limited(f"{branch} AND received_at<:before_at"))
+                    if params[mark]:
+                        branches.append(
+                            _limited(
+                                f"{branch} AND received_at=:before_at AND sequence<=:{mark}",
+                                tied=True,
+                            )
+                        )
+                    continue
+                branch += f" AND (received_at,sequence)<=(:before_at,:{mark})"
+            if after is not None:
+                mark = f"{upper}_after"
+                params[mark] = after[1 - source]
+                branch += f" AND sequence>:{mark}"
+            if selected:
+                params["selected"] = selected[1]
+                branch += " AND sequence=:selected"
+            if page_size:
+                params["limit"] = page_size
+                branch = _limited(branch)
+            branches.append(branch)
+        return " UNION ALL ".join(branches), params
+
+
+def _limited(branch, *, tied=False):
+    order = "sequence DESC" if tied else "received_at DESC,sequence DESC"
+    return f"SELECT * FROM ({branch} ORDER BY {order} LIMIT :limit)"
+
+
+def page_sql(records, *, encounters, correction_sql=""):
+    context = f",{encounter_columns('context_')}" if encounters else ""
+    return f"""WITH {correction_sql} page AS MATERIALIZED (
+        {records} ORDER BY received_at DESC,source DESC,position DESC LIMIT :limit
+    ) SELECT r.*,:account AS account_id,
+        COALESCE(NULLIF(p.handle,''),e.handle,json_extract(i.profile_data,'$.handle'),
+            (SELECT history.handle FROM events history
+             WHERE r.source=0 AND history.account_id=:account AND history.actor_id=r.actor_id
+             AND history.handle IS NOT NULL ORDER BY history.sequence DESC LIMIT 1)) AS handle,
+        COALESCE(NULLIF(p.name,''),e.name,json_extract(i.profile_data,'$.name'),
+            (SELECT history.name FROM events history
+             WHERE r.source=0 AND history.account_id=:account AND history.actor_id=r.actor_id
+             AND history.name IS NOT NULL ORDER BY history.sequence DESC LIMIT 1)) AS name,
+        COALESCE(e.provider_at,i.provider_at) AS provider_at,{SNAPSHOT},
+        i.post_id,substr(post.text,1,281) AS post_text{context}
+    FROM page r {RECORD_JOIN}
+    LEFT JOIN known_profiles p ON p.account_id=:account AND p.actor_id=r.actor_id
+    LEFT JOIN interaction_posts post ON post.account_id=:account AND post.id=i.post_id
+    ORDER BY r.received_at DESC,r.source DESC,r.position DESC"""
+
+
+def kind_totals_sql(records, *, activity):
+    distinct_by_kind = "COUNT(DISTINCT actor_id)" if activity else "0"
+    return f"""WITH records AS MATERIALIZED ({records})
+    SELECT kind,COUNT(*) AS event_count,{distinct_by_kind} AS distinct_actors,NULL AS oldest_received_at
+      FROM records GROUP BY kind
+    UNION ALL SELECT NULL,COUNT(*),COUNT(DISTINCT actor_id),MIN(received_at) FROM records"""
+
+
+def group_rows_sql(records, *, encounters):
+    if not encounters:
+        return f"""WITH records AS ({records}) SELECT r.*,{SNAPSHOT}
+        FROM records r {RECORD_JOIN} ORDER BY r.actor_id"""
+    # Previous encounters uses the whole account, including records outside the filtered scope.
+    # The receipt key sorts first; a fixed-width sequence preserves order inside ties.
+    return f"""WITH history AS ({records}), encounters AS (
+        SELECT history.*,
+          LAG(position) OVER actor_history IS NOT NULL AS seen_before,
+          MAX(CASE kind
+            WHEN 'follow.follow' THEN received_at || '!' || printf('%019d',position) || '1'
+            WHEN 'follow.unfollow' THEN received_at || '!' || printf('%019d',position) || '0' END)
+            OVER prior_history AS previous_follow
+        FROM history
+        WINDOW actor_history AS (PARTITION BY actor_id ORDER BY received_at,source,position),
+        prior_history AS (actor_history ROWS BETWEEN UNBOUNDED PRECEDING AND 1 PRECEDING)
+    ) SELECT position,source,actor_id,kind,received_at,seen_before,
+        CASE substr(previous_follow,-1)
+          WHEN '1' THEN 'follow.follow' WHEN '0' THEN 'follow.unfollow' END AS previous_follow_kind
+    FROM encounters WHERE matches_scope ORDER BY actor_id"""
diff --git a/src/xflog/interactions/store.py b/src/xflog/interactions/store.py
index a05f5d7..59dff2d 100644
--- a/src/xflog/interactions/store.py
+++ b/src/xflog/interactions/store.py
@@ -15,7 +15,9 @@
  UNIQUE(account_id,event_id,person_id)
 );
 CREATE INDEX IF NOT EXISTS interaction_person ON interactions(account_id,person_id,sequence DESC);
+CREATE INDEX IF NOT EXISTS interaction_account_sequence ON interactions(account_id,sequence DESC);
 CREATE INDEX IF NOT EXISTS interaction_receipt ON interactions(account_id,received_at,sequence);
+CREATE INDEX IF NOT EXISTS interaction_actor_receipt ON interactions(account_id,person_id,received_at,sequence);
 CREATE TABLE IF NOT EXISTS thread_snapshots (
  account_id TEXT NOT NULL, conversation_id TEXT NOT NULL, checked_at TEXT NOT NULL,
  next_token TEXT, PRIMARY KEY(account_id,conversation_id)
diff --git a/tests/constellation_check.mjs b/tests/constellation_check.mjs
index 767ae3b..5c1b58e 100644
--- a/tests/constellation_check.mjs
+++ b/tests/constellation_check.mjs
@@ -5,6 +5,7 @@ import { pathToFileURL } from "node:url";
 const base = pathToFileURL(process.argv[2] + "/");
 const {
   constellationLayout,
+  prepareConstellation,
   peopleFromEvents,
   entriesFromEvents,
   visibleLabels,
@@ -13,6 +14,7 @@ const {
   normalizeMotionSpeed,
 } = await import(new URL("constellation-layout.js", base));
 const { createConstellation } = await import(new URL("constellation.js", base));
+const { createViewportIndex, overscan } = await import(new URL("constellation-viewport.js", base));
 const { resolveLens } = await import(new URL("audience-ui.js", base));
 const { groupKey, groupDescription } = await import(new URL("constellation-colors.js", base));
 const { groupEvents } = await import(new URL("audience-groups.js", base));
@@ -56,6 +58,33 @@ for (const width of [320, 390, 798, 1440])
       );
       assert.ok(layout.center < height / 2);
     }
+const points = [160, 0, 160, 320, 80, 640].map((x, index) => ({
+  person: {x, event: {event_id: index === 2 ? "0" : String(index)}},
+}));
+const segments = [
+  {a:{x:-500}, b:{x:700}},
+  {a:{x:480}, b:{x:320}},
+  {a:{x:80}, b:{x:80}},
+  {a:{x:1200}, b:{x:1400}},
+];
+const indexed = createViewportIndex(points, segments);
+assert.equal(createViewportIndex([], []).nearest(40), undefined);
+assert.equal(createViewportIndex(points.slice(0, 1), []).nearest(-100), points[0].person);
+for (const center of [-100, 0, 40, 80, 120, 160, 240, 480, 640, 1000]) {
+  const expected = points.reduce((best, item) =>
+    Math.abs(item.person.x - center) < Math.abs(best.person.x - center) ? item : best);
+  assert.equal(indexed.nearest(center), expected.person, "Nearest selection keeps original tie priority");
+}
+for (const [left, width] of [[0, 64], [100, 128], [320, 390], [900, 1200], [2500, 1600]]) {
+  const start = left - overscan, end = left + width + overscan;
+  const {labels, connections} = indexed.range(start, end);
+  assert.deepEqual(labels, points.filter(({person}) => start <= person.x && person.x <= end));
+  assert.deepEqual(new Set(connections), new Set(segments.filter(({a,b}) =>
+    Math.min(a.x, b.x) <= end && Math.max(a.x, b.x) >= start)));
+}
+assert.ok(indexed.range(200, 220).connections.includes(segments[0]),
+  "A connection spanning the viewport is active with neither endpoint in range");
+
 const inactive = modules.map((module) => ({ ...module, enabled: false }));
 assert.equal(
   resolveLens(modules, "none"),
@@ -273,6 +302,16 @@ assert.ok(visibleLabels([{...selectedBox,maxBottom:220}],"selected").has("select
 for(const neighbor of neighbors) assert.equal(staggered.get(neighbor.id).top,140);
 assert.equal(visibleLabels([selectedBox,{...selectedBox,id:"crowded"}],"selected").size,1,
   "Labels still hide when no non-overlapping placement is available");
+const scrolledBoxes = [...neighbors, selectedBox].map(box => ({
+  ...box, left: box.left - 35, right: box.right - 35,
+  alternates: box.alternates?.map(alternate => ({
+    ...alternate, left: alternate.left - 35, right: alternate.right - 35,
+  })),
+}));
+const scrolledLabels = visibleLabels(scrolledBoxes, "selected");
+assert.deepEqual([...scrolledLabels].map(([id, box]) => [id, box.top]),
+  [...staggered].map(([id, box]) => [id, box.top]),
+  "Collision placement preserves priority and vertical positions when only the viewport origin shifts");
 const tight = {...neighbors[0],alternates:[{left:165,right:291,top:190,bottom:232}]};
 assert.equal(visibleLabels([selectedBox,tight],"selected").get("left").bottom,190,
   "An alternate can move slightly further above a neighboring label to preserve the safety gap");
@@ -372,6 +411,7 @@ function exercise(refreshRate, speed = 1, duration = 1000) {
       return controls.get(selector);
     },
   };
+  const linkLayer = {style: {}, querySelectorAll: () => []};
   const element = {
     isConnected: true,
     dataset: {},
@@ -380,7 +420,8 @@ function exercise(refreshRate, speed = 1, duration = 1000) {
     scrollWidth: 800,
     scrollLeft: 0,
     classList: { contains: () => true, toggle() {} },
-    querySelector: (selector) => (selector === ".shooting-star" ? meteor : sky),
+    querySelector: (selector) => selector === ".shooting-star" ? meteor
+      : selector === ".constellation-links" ? linkLayer : sky,
     querySelectorAll: (selector) => (selector === ".sky-star" ? [star] : []),
     addEventListener() {},
     removeEventListener() {},
@@ -545,6 +586,21 @@ function seedReference(value) {
 const geometryDigest = createHash("sha256").update(JSON.stringify(baselineGeometry)).digest("hex");
 assert.equal(geometryDigest, "140fd1844b9614ca831c59b28ff1912b55f2789983d6c3638827166f71041ebb",
   "Group ordering, colors and geometry match the original layout at e283194");
+for (const records of lookupFixtures)
+  for (const lens of ["none", "activity", "profile-location"])
+    for (const width of [390, 1024]) {
+      const options = {events: records, width, height: 772, modules, lens};
+      const atZoom = prepareConstellation(options);
+      const original = atZoom(0.8), points = [...original.people], groups = [...original.groups];
+      for (const zoom of [0, 0.05, 0.2, 0.25, 0.250001, 0.3, 0.55, 0.8, 1, 1.5, 2, 0]) {
+        const layout = atZoom(zoom);
+        assert.equal(layout, original, "Zoom keeps the geometry bindings live");
+        assert.ok(layout.people.every((point, i) => point === points[i]));
+        assert.ok(layout.groups.every((group, i) => group === groups[i]));
+        assert.deepEqual(layout, constellationLayout({...options, zoom}),
+          "Repeated in-place layout matches a fresh calculation");
+      }
+    }
 
 // Count only searches involving layout entries/groups; unrelated color lookups remain untouched.
 const originalFind = Array.prototype.find;
diff --git a/tests/constellation_selection_check.mjs b/tests/constellation_selection_check.mjs
index 33d16b2..04f04e7 100644
--- a/tests/constellation_selection_check.mjs
+++ b/tests/constellation_selection_check.mjs
@@ -52,6 +52,17 @@ const controls = new Map(),
 let olderLoads = 0;
 let shellQueries = 0, sceneQueries = 0, actorQueries = 0, descendantQueries = 0;
 let parentQueries = 0;
+let labelReads = 0, previewReads = 0, navigationWrites = 0;
+let collisionPasses = 0;
+function countNavigation(control) {
+  const fields = new Set(["disabled", "value", "textContent", "max", "hidden", "innerHTML"]);
+  return new Proxy(control, {
+    set(target, key, value) {
+      if (fields.has(key)) navigationWrites++;
+      return Reflect.set(target, key, value);
+    },
+  });
+}
 const selectedSteps = [];
 const previewSteps = [];
 function button(dataset) {
@@ -68,14 +79,16 @@ function button(dataset) {
       this.markup = value;
       this.identityControl = { tabIndex: 0 };
       this.previewControl = value.includes('class="star-post"')
-        ? { tabIndex: 0, offsetHeight: 24, style: {} } : null;
+        ? { tabIndex: 0, get offsetHeight() { previewReads++; return 24; }, style: {} } : null;
     },
     classList: { toggle() {} },
     setAttribute(k, v) {
       this.attributeWrites = (this.attributeWrites || 0) + 1;
       this.attributes[k] = v;
     },
+    removeAttribute(k) { delete this.attributes[k]; },
     addEventListener(k, v) {
+      listenerWrites++;
       this.handlers[k] = v;
     },
     removeEventListener() {},
@@ -84,6 +97,7 @@ function button(dataset) {
       return parent;
     },
     getBoundingClientRect() {
+      labelReads++;
       return { width: 190, height: 140 };
     },
     querySelectorAll() { descendantQueries++; return [this.identityControl, this.previewControl].filter(Boolean); },
@@ -97,23 +111,24 @@ const root = {
     shellQueries++;
     if (key.startsWith("#") && !controlIds.has(key.slice(1))) return null;
     if (!controls.has(key))
-      controls.set(key, {
+      controls.set(key, countNavigation({
         handlers: {},
         style: { setProperty() {} },
         classList: { toggle() {} },
-        setAttribute() {},
+        setAttribute() { navigationWrites++; },
         addEventListener(type, handler) {
           this.handlers[type] = handler;
         },
         removeEventListener() {},
-      });
+      }));
     return controls.get(key);
   },
 };
 let nodes = [],
   labels = [],
   paths = [];
-let captureLinks = false, renderedLinks = [], renderedTrails = [], renderedSparks = [];
+let renderedLinks = [], renderedTrails = [], renderedSparks = [], groupNodes = [], groupMarkup = "";
+let historyWrites = 0, linkWrites = 0, groupWrites = 0, listenerWrites = 0;
 let beforeMarkup = false, measureRenderWork = false;
 let sceneParts = {};
 const handlers = {};
@@ -155,15 +170,46 @@ const element = {
         : key === ".sequence-spark" ? renderedSparks
         : [];
   },
-  contains(node) { return nodes.includes(node); },
+  contains(node) { return nodes.includes(node) || labels.includes(node) || groupNodes.includes(node) || Object.values(sceneParts).includes(node); },
   set innerHTML(value) {
+    historyWrites++;
     beforeMarkup = false;
-    sceneParts = Object.fromEntries([".constellation-sky", ".shooting-star", ".shooting-tail"].map(key => [key, { style: {}, dataset: {}, attributes: {}, setAttribute(k, v) { this.attributes[k] = v; } }]));
-    paths = [...value.matchAll(/<path d="M([\d.]+),[\d.]+L([\d.]+),[\d.]+"/g)];
-    renderedLinks = captureLinks ? [...value.matchAll(/<g data-link-group="([^"]*)" style="([^"]*)"><path d="([^"]*)" stroke-dasharray="([^"]*)"\/>/g)]
-      .map(([, group, style, d, dash]) => ({group, style, d, dash})) : [];
-    renderedTrails = renderedLinks.map(() => button({}));
-    renderedSparks = renderedLinks.map(() => button({}));
+    sceneParts = Object.fromEntries([".constellation-sky", ".shooting-star", ".shooting-tail", ".constellation-canvas"]
+      .map(key => [key, button({})]));
+    sceneParts[".shooting-star"].dataset = {};
+    groupNodes = [];
+    renderedLinks = [];
+    renderedSparks = [];
+    renderedTrails = [];
+    paths = [];
+    sceneParts[".constellation-links"] = {
+      ...button({}),
+      set innerHTML(markup) {
+        linkWrites++;
+        renderedLinks = [...markup.matchAll(/<g data-link-group="([^"]*)" style="([^"]*)"><path d="([^"]*)" stroke-dasharray="([^"]*)"\/>/g)]
+          .map(([, group, style, d, dash]) => ({group, style, d, dash}));
+        paths = [...markup.matchAll(/<path d="M([\d.]+),[\d.]+L([\d.]+),[\d.]+"/g)];
+        renderedTrails = renderedLinks.map(() => button({}));
+        renderedSparks = renderedLinks.map(() => button({}));
+        this.pathNodes = renderedLinks.map(link => ({
+          setAttribute(key, value) { if (key === "d") link.d = value; },
+        }));
+      },
+      querySelectorAll(key) {
+        if (key === "path") return this.pathNodes;
+        return key === ".sequence-trail" ? renderedTrails : renderedSparks;
+      },
+    };
+    sceneParts[".constellation-groups"] = {
+      hidden: true,
+      contains(node) { return groupNodes.includes(node); },
+      set innerHTML(markup) {
+        groupWrites++;
+        groupMarkup = markup;
+        groupNodes = [...markup.matchAll(/data-group="([^"]*)"/g)].map(([, group]) => button({group}));
+      },
+      querySelectorAll() { return groupNodes; },
+    };
     const buttons = [
       ...value.matchAll(/<(?:button|div(?= class="star-label"))\b([^>]*)>([\s\S]*?)<\/(?:button|div)>/g),
     ].map((m) => {
@@ -174,7 +220,7 @@ const element = {
         dataset[key] = v;
       return Object.assign(button(dataset), {
         innerHTML: m[2],
-        x: Number(m[1].match(/left:([\d.]+)px/)?.[1]),
+        style: {left: m[1].match(/left:([\d.]+px)/)?.[1]},
       });
     });
     nodes = buttons.filter((n) => n.dataset.actor);
@@ -359,7 +405,7 @@ assert.equal(element.scrollLeft, manualStart, "Click travel starts without an im
 frame(2000);
 assert.ok(element.scrollLeft < manualStart, "A manual click smoothly centers the chosen star");
 for (let time = 2016; time <= 3024; time += 16) frame(time);
-assert.ok(Math.abs(nodes.find(node=>node.dataset.actor === "B").x - element.scrollLeft - element.clientWidth / 2) < 1,
+assert.ok(Math.abs(parseFloat(nodes.find(node=>node.dataset.actor === "B").style.left) - element.scrollLeft - element.clientWidth / 2) < 1,
   "The clicked star lands at the viewport center");
 assert.equal(nodes.find(node=>node.dataset.actor === "B").attributes["aria-pressed"], "true",
   "A stationary off-center selection survives queued scroll events");
@@ -367,7 +413,7 @@ const openedBeforeLabel = opened.length;
 labels.find(node=>node.dataset.label === "old-C").handlers.click();
 frame(3040);
 for (let time = 3056; time <= 4064; time += 16) frame(time);
-assert.ok(Math.abs(nodes.find(node=>node.dataset.actor === "C").x - element.scrollLeft - element.clientWidth / 2) < 1,
+assert.ok(Math.abs(parseFloat(nodes.find(node=>node.dataset.actor === "C").style.left) - element.scrollLeft - element.clientWidth / 2) < 1,
   "Clicking a name also centers its star");
 assert.equal(nodes.find(node=>node.dataset.actor === "C").attributes["aria-pressed"], "true",
   "Clicking another person's label selects that person too");
@@ -401,7 +447,7 @@ frame(5120);
 assert.deepEqual(nodes.filter(node=>node.attributes["aria-pressed"] === "true").map(node=>node.dataset.event), ["old-A"],
   "Manual grouped selection also survives refresh with ambient motion disabled");
 const groupedStar = nodes.find(node=>node.dataset.event === "old-A");
-assert.equal(element.scrollLeft, Math.round(Math.max(0, Math.min(500, groupedStar.x - element.clientWidth / 2))),
+assert.equal(element.scrollLeft, Math.round(Math.max(0, Math.min(500, parseFloat(groupedStar.style.left) - element.clientWidth / 2))),
   "With motion off, grouped click centering is immediate and stays within the scroll bounds");
 let prevented = 0;
 const zoomWheel = (deltaY, buttons = 4, extra = {}) => handlers.wheel({
@@ -511,9 +557,9 @@ try {
   expectCount("2 people in loaded history");
   const beforeConfigure = actorScans;
   scene.configure(groupModules, "activity");
-  expectCount("2 people in saved history");
+  expectCount("2 people in loaded history");
   scene.configure(groupModules, "region");
-  expectCount("2 people in saved history");
+  expectCount("2 people in loaded history");
   scene.configure(groupModules, "none");
   expectCount("2 people in loaded history");
   assert.equal(actorScans, beforeConfigure, "Changing grouping lenses reuses the actor count");
@@ -522,7 +568,29 @@ try {
   const beforeSeek = actorScans;
   scene.seek(0, "instant");
   assert.equal(actorScans, beforeSeek, "Leaving the grouped overview reuses the actor count");
-  expectCount("2 people in saved history");
+  expectCount("2 people in loaded history");
+
+  const aggregate = {
+    total_events: 17, distinct_actors: 6,
+    groups: [
+      {key:"follow.follow",label:"Followed you",tone:"positive",event_count:12,distinct_actors:5},
+      {key:"follow.unfollow",label:"Unfollowed",tone:"negative",event_count:2,distinct_actors:1},
+      {key:"unknown",label:"Unknown",tone:"neutral",event_count:3,distinct_actors:2},
+    ],
+  };
+  scene.render(groupedRecords, "follow-A", aggregate);
+  expectCount("3 events · 2 people loaded · 17 events · 6 people saved");
+  scene.setZoom(0.25);
+  assert.equal(nodes.length, 3, "Only fetched records have star geometry");
+  assert.equal(groupNodes.length, 2, "Groups without fetched records stay outside the interactive scene");
+  assert.match(groupMarkup, /12 actions · 5 people saved · 2 actions loaded/);
+  assert.match(groupMarkup, /class="cluster-count">12</);
+  assert.match(controls.get("#constellation-key").innerHTML, /1 group with no events loaded/);
+  scene.setZoom(0.8);
+  assert.match(controls.get("#constellation-key").innerHTML, /12 actions · 5 people saved · 2 actions loaded/);
+  const beforeOldest = olderLoads;
+  scene.scrub(1);
+  assert.equal(olderLoads, beforeOldest, "Moving the scrubber previews history until the change is committed");
   scene.configure(groupModules, "none");
   scene.clear();
   scene.render([record("solo", "Z", 0, "follow.follow")], "solo");
@@ -535,7 +603,7 @@ try {
   });
   otherScene.render([record("x", "X", 1, "follow.follow"), record("y", "Y", 0, "follow.follow")], "x");
   expectCount("2 people in loaded history");
-  scene.setZoom(0.8);
+  scene.render([record("solo", "Z", 0, "follow.follow")], "solo");
   expectCount("1 person in loaded history");
   otherScene.destroy();
 } finally {
@@ -565,7 +633,10 @@ assert.equal(actorQueries, beforeQueries.actorQueries, "Selection reuses the cur
 assert.equal(descendantQueries, beforeQueries.descendantQueries, "Unchanged label markup reuses its descendants");
 const beforeRedrawParents = parentQueries;
 scene.setZoom(1);
-assert.equal(parentQueries - beforeRedrawParents, events.length, "Redraw resolves one fresh parent per actor");
+assert.equal(parentQueries, beforeRedrawParents, "Zoom reuses actor parents");
+assert.equal(sceneParts[".constellation-sky"], previousSky, "Zoom reuses the sky");
+scene.render(events, "other-B");
+assert.equal(parentQueries - beforeRedrawParents, events.length, "Structural redraw resolves one fresh parent per actor");
 const oldParentWrites = previousParent.writes;
 assert.notEqual(nodes[0].parent, previousParent, "A redraw creates fresh actor parents");
 assert.notEqual(sceneParts[".constellation-sky"], previousSky, "A redraw creates new sky nodes");
@@ -575,7 +646,9 @@ assert.equal(previousParent.writes, oldParentWrites, "Detached actor parents are
 assert.equal(previousSky.style.transform, "old scene", "Frames never update the detached sky after redraw");
 assert.notEqual(sceneParts[".constellation-sky"].style.transform, undefined, "Frames update the new sky");
 const beforeResizeSky = sceneParts[".constellation-sky"];
+element.clientWidth++;
 resizeFirstScene();
+element.clientWidth--;
 beforeResizeSky.style.transform = "detached after resize";
 frame(7040);
 assert.equal(beforeResizeSky.style.transform, "detached after resize", "Resize never paints the previous sky");
@@ -650,7 +723,9 @@ try {
   meteorScene.render(events, "old-A");
   for (let i = 0; i < 96; i++) frame(10000 + i * 64);
   const oldMeteor = sceneParts[".shooting-star"], oldTail = sceneParts[".shooting-tail"];
+  element.clientWidth++;
   resizeScene();
+  element.clientWidth--;
   oldMeteor.style.opacity = "detached";
   oldTail.attributes = {};
   frame(10000 + 96 * 64);
@@ -693,7 +768,7 @@ try {
   for (const identity of ["lookup-4", "lookup-17", "lookup-0"]) {
     const before = geometryFinds;
     lookupScene.select(identity);
-    assert.equal(geometryFinds - before, 3, "Only position and navigation search geometry during selection");
+    assert.equal(geometryFinds - before, 0, "Manual selection reuses its indexed geometry entry");
     const selectedNodes = nodes.filter(node => node.attributes["aria-pressed"] === "true");
     assert.deepEqual(selectedNodes.map(node => node.dataset.event), [identity]);
     assert.ok(selectedNodes[0].attributes["aria-label"].includes(`Person ${identity.slice(7)}`));
@@ -704,7 +779,7 @@ try {
   lookupHandlers.scroll();
   frame(20000);
   assert.ok(previews.length > beforePreview, "The frame actually changes the highlighted event");
-  assert.equal(geometryFinds - beforeFrameSearches, 7, "Animation uses only its existing geometry searches");
+  assert.equal(geometryFinds - beforeFrameSearches, 0, "Animation-driven selection does not scan for the selected event");
 
   const large = Array.from({length: 500}, (_, index) => ({
     ...event(`lookup-${index}`, "same-actor", 500 - index, "follow.follow"), name: `Person ${index}`,
@@ -712,7 +787,7 @@ try {
   lookupScene.render(large, "lookup-0");
   geometryFinds = 0;
   lookupScene.select("lookup-4");
-  assert.equal(geometryFinds, 3, "Manual search count stays constant for 500 actor buttons");
+  assert.equal(geometryFinds, 0, "Manual search count stays constant for 500 actor buttons");
   lookupScene.select("lookup-0");
   const beforeLargePreview = previews.length;
   geometryFinds = 0;
@@ -720,14 +795,14 @@ try {
   lookupHandlers.scroll();
   frame(20016);
   assert.ok(previews.length > beforeLargePreview, "The large-scene frame changes the highlighted event");
-  assert.equal(geometryFinds, 7, "Animation search count stays constant for 500 actor buttons");
+  assert.equal(geometryFinds, 0, "Animation search count stays constant for 500 actor buttons");
 
   lookupScene.render(many, "lookup-0");
   lookupScene.select("lookup-0");
   const currentButton = nodes.find(node => node.dataset.event === "lookup-0");
   geometryFinds = 0;
   currentButton.handlers.click();
-  assert.equal(geometryFinds, 1, "A selected actor click only searches for the selected position");
+  assert.equal(geometryFinds, 0, "A selected actor click reuses the selected position");
   assert.equal(lookupOpened.at(-1), "lookup-0", "A current selected actor still opens");
   const nonselectedButton = nodes.find(node => node.dataset.event === "lookup-4");
   nonselectedButton.handlers.click();
@@ -824,6 +899,13 @@ try {
   assert.equal(lookupOpened.length, opensBeforeDuplicateClick + 1,
     "Either duplicate button acts on the first matching geometry person");
   assert.equal(lookupOpened.at(-1), "duplicate");
+  const duplicateLabels = labels.filter(node => node.dataset.label === "duplicate");
+  lookupScene.setZoom(1.5);
+  assert.notEqual(duplicates[0].style.left, duplicates[1].style.left, "Duplicate entries keep separate coordinates");
+  const opensBeforeLabels = lookupOpened.length;
+  duplicateLabels.forEach(node => node.handlers.click());
+  assert.deepEqual(lookupOpened.slice(opensBeforeLabels), ["duplicate", "duplicate"],
+    "Either retained label opens the selected duplicate event using first-match identity");
   const destroyedParent = duplicates[0].parent, destroyedWrites = destroyedParent.writes;
   lookupScene.destroy();
   assert.doesNotThrow(() => duplicates[0].handlers.click(), "A destroyed scene rejects old clicks");
@@ -846,7 +928,6 @@ try {
 }
 
 // Reconstruct the original per-group filter oracle from the actual layout output.
-captureLinks = true;
 const connectionScene = createConstellation({
   element, root, escape: String, label: item => item.kind, initials: item => item.actor_id,
   onSelect() {}, onOpen() {},
@@ -898,11 +979,14 @@ function verifyConnections(records, modules, lens, zoom) {
   if (records.length) connectionScene.setZoom(zoom);
   const expected = expectedConnections(records, modules, lens, zoom);
   const visible = expected.layout.overview ? [] : expected.links;
-  assert.deepEqual(renderedLinks, visible.map(({a,b,color,dash}) => ({
+  assert.deepEqual(expected.layout.overview ? [] : renderedLinks, visible.map(({a,b,color,dash}) => ({
     group:a.group, style:color ? `color:${color}` : "", d:`M${a.x},${a.y}L${b.x},${b.y}`, dash:dash || "",
   })), "Rendered paths preserve group order, endpoints, direction, colors and dashes");
-  assert.equal(renderedSparks.length, visible.length, "Each visible connection has one spark");
-  assert.equal(renderedTrails.length, visible.length, "Each visible connection has one trail");
+  assert.equal(sceneParts[".constellation-links"].style.visibility, expected.layout.overview ? "hidden" : "");
+  if (!expected.layout.overview) {
+    assert.equal(renderedSparks.length, visible.length, "Each visible connection has one spark");
+    assert.equal(renderedTrails.length, visible.length, "Each visible connection has one trail");
+  }
   return expected;
 }
 try {
@@ -928,7 +1012,14 @@ try {
   const {links: animatedLinks} = verifyConnections(connectionEvents, [activity], "activity", 1);
   assert.ok(animatedLinks.length > 2, "The animation fixture has multiple indexed links");
   frame(30000);
+  const inRange = ({a,b}) => Math.max(a.x, b.x) >= element.scrollLeft - 128 &&
+    Math.min(a.x, b.x) <= element.scrollLeft + element.clientWidth + 128;
+  assert.ok(animatedLinks.some(inRange) && animatedLinks.some(link => !inRange(link)));
   animatedLinks.forEach(({a,b}, index) => {
+    if (!inRange({a,b})) {
+      assert.equal(renderedSparks[index].attributes.cx, undefined);
+      return;
+    }
     const part = seed(index) % 1, tail = Math.max(0, part - 0.06);
     assert.equal(renderedSparks[index].attributes.cx, (a.x + (b.x - a.x) * part).toFixed(2));
     assert.equal(renderedSparks[index].attributes.cy, (a.y + (b.y - a.y) * part).toFixed(2));
@@ -942,9 +1033,9 @@ try {
   const oldTrailWrites = oldTrails.map(trail => trail.attributeWrites);
   const oldSparkWrites = oldSparks.map(spark => spark.attributeWrites);
   connectionScene.setZoom(0);
-  assert.equal(renderedLinks.length, 0, "Overview renders no links, trails or sparks");
-  assert.equal(renderedSparks.length, 0);
-  assert.equal(renderedTrails.length, 0);
+  assert.equal(sceneParts[".constellation-links"].style.visibility, "hidden", "Overview hides the connection layer");
+  assert.equal(renderedSparks, oldSparks, "Overview retains the spark nodes");
+  assert.equal(renderedTrails, oldTrails, "Overview retains the trail nodes");
   frame(30016);
   assert.deepEqual(oldTrails.map(trail => trail.attributes), oldTrailAttributes, "Overview cannot update old trails");
   assert.deepEqual(oldSparks.map(spark => spark.attributes), oldSparkAttributes, "Overview cannot update old sparks");
@@ -956,9 +1047,10 @@ try {
     group:a.group, style:color ? `color:${color}` : "", d:`M${a.x},${a.y}L${b.x},${b.y}`, dash:dash || "",
   })), "Leaving overview restores the exact ordered connections and styles");
   frame(30032);
-  assert.ok(renderedTrails.every(trail => trail.attributes.x1 !== undefined), "Recreated trails animate");
   expanded.links.forEach(({a,b}, index) => {
-    const part = seed(index) % 1;
+    if (!inRange({a,b})) return;
+    assert.notEqual(renderedTrails[index].attributes.x1, undefined, "Active retained trails animate");
+    const part = (seed(index) + 32 / 10000) % 1;
     assert.equal(renderedSparks[index].attributes.cx, (a.x + (b.x - a.x) * part).toFixed(2));
     assert.equal(renderedSparks[index].attributes.cy, (a.y + (b.y - a.y) * part).toFixed(2));
   });
@@ -974,7 +1066,6 @@ try {
   assert.equal(pending.size, 0, "Clear cancels connection animation");
 } finally {
   connectionScene.destroy();
-  captureLinks = false;
 }
 
 // Count positioned-point for-of/filter passes and link-shaped outputs around markup replacement.
@@ -986,11 +1077,11 @@ function measurePreparation(action) {
   const counts = {groupIndexes:0, preMarkupForOf:0, postMarkupForOf:0, preMarkupFilters:0, linkObjects:0};
   const isLink = item => item && typeof item === "object" &&
     item.a?.event && item.b?.event && "group" in item.a && "group" in item.b &&
-    "color" in item && "dash" in item;
+    "color" in item && "dash" in item && !("trail" in item);
   globalThis.Map = class extends NativeMap {
     constructor(entries) {
       super(entries);
-      if (beforeMarkup && Array.isArray(entries) && entries.length &&
+      if (measureRenderWork && Array.isArray(entries) && entries.length &&
           entries.every(entry => Array.isArray(entry) && Array.isArray(entry[1]) && !entry[1].length))
         counts.groupIndexes++;
     }
@@ -1002,12 +1093,12 @@ function measurePreparation(action) {
     return nativeIterator.call(this);
   };
   Array.prototype.push = function(...items) {
-    if (beforeMarkup) counts.linkObjects += nativeFilter.call(items, isLink).length;
+    if (measureRenderWork) counts.linkObjects += nativeFilter.call(items, isLink).length;
     return nativePush.apply(this, items);
   };
   Array.prototype.map = function(...args) {
     const result = nativeMap.apply(this, args);
-    if (beforeMarkup) counts.linkObjects += nativeFilter.call(result, isLink).length;
+    if (measureRenderWork) counts.linkObjects += nativeFilter.call(result, isLink).length;
     return result;
   };
   Array.prototype.filter = function(...args) {
@@ -1042,24 +1133,73 @@ const preparationScene = createConstellation({
   onSelect() {}, onOpen() {},
 });
 try {
+  let membershipReads = 0;
+  const observedEvents = connectionEvents.map(event => ({
+    ...event,
+    get audience_groups() { membershipReads++; return event.audience_groups; },
+  }));
   preparationScene.configure([activity], "activity");
-  preparationScene.render(connectionEvents, connectionEvents[0].event_id);
-  assert.deepEqual(measurePreparation(() => preparationScene.setZoom(0)),
-    {groupIndexes:0,preMarkupForOf:0,postMarkupForOf:1,preMarkupFilters:0,linkObjects:0},
-    "Overview skips connection preparation but still builds the selection lookup");
-  assert.deepEqual(measurePreparation(() => preparationScene.setZoom(1)),
-    {groupIndexes:1,preMarkupForOf:1,postMarkupForOf:1,preMarkupFilters:0,linkObjects:14}, "Multiple groups rebuild their indexed links");
-  preparationScene.update(oneGroup, oneGroup[0].event_id);
-  assert.deepEqual(measurePreparation(() => preparationScene.setZoom(0.8)),
-    {groupIndexes:0,preMarkupForOf:1,postMarkupForOf:1,preMarkupFilters:0,linkObjects:17}, "One group streams connections without an index");
+  assert.deepEqual(measurePreparation(() => preparationScene.render(observedEvents, observedEvents[0].event_id)),
+    {groupIndexes:1,preMarkupForOf:0,postMarkupForOf:2,preMarkupFilters:0,linkObjects:14},
+    "Structural render builds the selection lookup and indexed connections");
+  const originalNodes = nodes, originalLabels = labels, originalParts = sceneParts;
+  const originalPaths = sceneParts[".constellation-links"].pathNodes;
+  const before = [historyWrites, linkWrites, groupWrites, listenerWrites];
+  assert.ok(membershipReads > 0, "Structural rendering reads group membership");
+  membershipReads = 0;
+  for (const zoom of [1, 1.5, 2, 0.3]) {
+    assert.deepEqual(measurePreparation(() => preparationScene.setZoom(zoom)),
+      {groupIndexes:0,preMarkupForOf:0,postMarkupForOf:0,preMarkupFilters:0,linkObjects:0},
+      "Ordinary zoom does not prepare connection topology or rebuild the selection lookup");
+    const expected = expectedConnections(connectionEvents, [activity], "activity", zoom);
+    assert.deepEqual(nodes.map(node => parseFloat(node.style.left)), expected.layout.people.map(point => point.x));
+    assert.deepEqual(renderedLinks.map(link => link.d), expected.links.map(({a,b}) => `M${a.x},${a.y}L${b.x},${b.y}`));
+  }
+  assert.deepEqual([historyWrites, linkWrites, groupWrites, listenerWrites], before);
+  preparationScene.setZoom(0);
+  const firstGroupNodes = groupNodes;
+  const afterFirstOverview = [historyWrites, linkWrites, groupWrites, listenerWrites];
+  assert.equal(groupWrites, before[2] + 1, "Only the overview layer is created on its first visit");
+  for (const zoom of [0.25, 0.3, 0.05, 0.8]) preparationScene.setZoom(zoom);
+  assert.deepEqual([historyWrites, linkWrites, groupWrites, listenerWrites], afterFirstOverview);
+  assert.equal(membershipReads, 0, "Repeated zoom does not regroup the events");
+  assert.equal(nodes, originalNodes);
+  assert.equal(labels, originalLabels);
+  assert.equal(sceneParts, originalParts);
+  assert.equal(sceneParts[".constellation-links"].pathNodes, originalPaths);
+  assert.equal(groupNodes, firstGroupNodes);
+  preparationScene.setZoom(0);
+  groupNodes[0].handlers.click();
+  assert.equal(Number(controls.get("#scene-zoom").value), 1, "Overview cluster opens without rebuilding");
+  assert.equal(nodes, originalNodes);
+  preparationScene.setZoom(0);
+  const beforeOverviewRebuild = linkWrites;
+  preparationScene.render(observedEvents, observedEvents[0].event_id);
+  assert.equal(linkWrites, beforeOverviewRebuild, "An overview rebuild defers connection preparation");
+  preparationScene.setZoom(1);
+  assert.equal(linkWrites, beforeOverviewRebuild + 1, "First expansion builds only the missing links");
+
+  const priorNodes = nodes;
+  assert.deepEqual(measurePreparation(() => preparationScene.update(oneGroup, oneGroup[0].event_id)),
+    {groupIndexes:0,preMarkupForOf:0,postMarkupForOf:2,preMarkupFilters:0,linkObjects:17},
+    "Replacing data rebuilds single-group connections without an index");
+  assert.notEqual(nodes, priorNodes);
   preparationScene.configure([], "none");
-  assert.deepEqual(measurePreparation(() => preparationScene.setZoom(0.8)),
-    {groupIndexes:0,preMarkupForOf:1,postMarkupForOf:1,preMarkupFilters:0,linkObjects:17}, "Ungrouped connections also stream without an index");
-  preparationScene.update([oneGroup[0]], oneGroup[0].event_id);
-  assert.deepEqual(measurePreparation(() => preparationScene.setZoom(0.8)),
-    {groupIndexes:0,preMarkupForOf:1,postMarkupForOf:1,preMarkupFilters:0,linkObjects:0}, "A singleton produces no link or index");
   assert.deepEqual(measurePreparation(() => preparationScene.render([], null)),
     {groupIndexes:0,preMarkupForOf:0,postMarkupForOf:0,preMarkupFilters:0,linkObjects:0}, "Empty history produces no connection work");
+  const region = {...location, buckets:[{key:"unknown",label:"Unknown"}]};
+  const overviewEvents = connectionEvents.slice(0, 2).map(item => ({
+    ...item,
+    audience_groups:{"profile-location":"overview"},
+    audience_group_buckets:{"profile-location":{key:"overview",label:"Overview City"}},
+  }));
+  preparationScene.configure([region], "profile-location");
+  preparationScene.render(overviewEvents, overviewEvents[0].event_id);
+  const groupKey = controls.get("#constellation-key");
+  preparationScene.setZoom(0.25);
+  assert.match(groupKey.innerHTML, /All constellations/);
+  preparationScene.setZoom(0.3);
+  assert.match(groupKey.innerHTML, /Overview City/, "A group key cannot collide with the overview mode");
 } finally {
   preparationScene.destroy();
 }
@@ -1087,6 +1227,151 @@ try {
 } finally {
   Array.prototype.filter = nativeFilter;
 }
+// Collision candidate sorting and label DOM writes identify actual viewport work.
+const nativeSort = Array.prototype.sort;
+const near = {id: Symbol("test"), top: 0, distance: 0};
+const far = {...near, distance: 1};
+Array.prototype.sort = function(compare) {
+  // The initial candidate sort uses distance. Neighbor sorts use vertical position.
+  if ((!this.length || (this[0]?.id?.event && "minTop" in this[0])) && compare?.(near, far) === -1)
+    collisionPasses++;
+  return nativeSort.call(this, compare);
+};
+const viewportScene = createConstellation({
+  element, root, escape:String, label:item => item.kind, initials:item => item.actor_id,
+  onSelect() {}, onOpen() {},
+});
+try {
+  root.dataset.motion = "on";
+  viewportScene.render([withPreview, ...events], "preview");
+  frame(40000);
+  assert.ok(collisionPasses > 0 && labelReads > 0 && previewReads > 0 && navigationWrites > 0,
+    "The work counters see initial layout, preview measurement and navigation");
+  const labelWrites = () => labels.reduce((sum, item) => sum + item.attributeWrites, 0);
+  const work = () => ({collisionPasses, labelReads, previewReads, navigationWrites, labelWrites:labelWrites()});
+  const spark = renderedSparks[0];
+  const sparkBefore = spark.attributes.cx;
+  const idle = work();
+  frame(40016);
+  frame(40032);
+  frame(40048);
+  assert.deepEqual(work(), idle, "Ambient-only frames skip all state-driven work");
+  assert.notEqual(spark.attributes.cx, sparkBefore, "The ambient clock and spark keep advancing");
+
+  element.scrollLeft = 0;
+  frame(40050);
+  const beforeDelayedScroll = collisionPasses;
+  handlers.scroll();
+  frame(40052);
+  const leftmost = nodes.reduce((a, b) => parseFloat(a.style.left) < parseFloat(b.style.left) ? a : b);
+  assert.equal(leftmost.attributes["aria-pressed"], "true",
+    "A scroll event arriving after paint still centers the selection");
+  assert.equal(collisionPasses, beforeDelayedScroll + 1, "The new selection invalidates layout at the same offset");
+  viewportScene.seek(0, "instant");
+  frame(40056);
+
+  const previousLeft = element.scrollLeft;
+  viewportScene.seek(1);
+  const afterSelect = work();
+  frame(40064);
+  assert.notEqual(element.scrollLeft, previousLeft, "Smooth navigation advances the viewport");
+  assert.equal(collisionPasses, afterSelect.collisionPasses + 1, "One collision pass for a changed viewport");
+  assert.equal(labelReads - afterSelect.labelReads, 2, "Only the previous and new selection need measurement");
+  const afterScroll = work();
+  frame(40080);
+  assert.equal(collisionPasses, afterScroll.collisionPasses + 1, "Easing keeps layout current");
+  assert.equal(labelReads, afterScroll.labelReads, "Scrolling reuses dimensions");
+  assert.equal(Number(controls.get("#memory-scrubber").value),
+    Math.round((1 - element.scrollLeft / 500) * 1000), "Scrubber tracks the actual eased position");
+
+  root.dataset.motion = "off";
+  frame(40096);
+  assert.equal(pending.size, 0, "Paused motion settles after the final scroll step");
+  const frozen = spark.attributeWrites;
+  const stopped = work();
+  element.scrollLeft = element.scrollLeft ? 0 : 500;
+  handlers.scroll();
+  frame(40112);
+  assert.equal(collisionPasses, stopped.collisionPasses + 1, "A native scroll still updates paused labels");
+  assert.equal(spark.attributeWrites, frozen, "A scroll-only paused frame does not rewrite frozen sparks");
+  assert.equal(pending.size, 0);
+  viewportScene.setZoom(0.9);
+  frame(40128);
+  assert.ok(spark.attributeWrites > frozen, "Paused sparks still rebind to changed geometry");
+
+  const groupedEvents = [withPreview, ...events].map(item => ({
+    ...item, audience_groups: {activity: item.kind},
+  }));
+  viewportScene.configure([activity], "activity");
+  viewportScene.setZoom(0);
+  viewportScene.render(groupedEvents, "preview");
+  const overviewLabels = labels;
+  const labelWork = () => [collisionPasses, labelReads, previewReads, labelWrites()];
+  const beforeOverview = labelWork();
+  frame(40144);
+  assert.deepEqual(labelWork(), beforeOverview, "A fresh overview frame skips label layout");
+  const assertOverviewHidden = () => {
+    assert.ok(labels.every(item => item.style.visibility === "hidden" &&
+      item.attributes["aria-hidden"] === "true" && item.identityControl.tabIndex === -1 &&
+      (!item.previewControl || item.previewControl.tabIndex === -1)));
+  };
+  assertOverviewHidden();
+  for (const [index, zoom] of [0.05, 0.25, 0].entries()) {
+    viewportScene.setZoom(zoom);
+    frame(40160 + index * 16);
+  }
+  assert.deepEqual(labelWork(), beforeOverview, "Overview zoom does no label reads, collision passes or visibility writes");
+  assert.ok(labels.every(item => item.style.left === undefined && item.style.top === undefined),
+    "Overview zoom leaves fresh labels unpositioned");
+
+  const scrollWidth = element.scrollWidth;
+  element.scrollWidth = element.clientWidth;
+  viewportScene.setZoom(0.3);
+  assertOverviewHidden();
+  frame(40208);
+  element.scrollWidth = scrollWidth;
+  assert.equal(collisionPasses, beforeOverview[0] + 1, "Expansion runs collision layout");
+  assert.equal(labelReads - beforeOverview[1], labels.length, "First expansion measures cold labels");
+  assert.equal(previewReads - beforeOverview[2], 1, "First expansion measures the selected preview");
+  const selectedLabel = labels.find(item => item.dataset.label === "preview");
+  assert.equal(selectedLabel.style.visibility, "visible");
+  assert.equal(selectedLabel.attributes["aria-hidden"], "false");
+  assert.equal(selectedLabel.identityControl.tabIndex, 0);
+  assert.equal(selectedLabel.previewControl.tabIndex, 0);
+
+  const measured = [labelReads, previewReads];
+  viewportScene.setZoom(0.25);
+  frame(40224);
+  assertOverviewHidden();
+  viewportScene.setZoom(0.4);
+  frame(40240);
+  assert.equal(labels, overviewLabels, "Repeated transitions preserve the label nodes");
+  assert.deepEqual([labelReads, previewReads], measured, "Expansion reuses still-valid dimensions");
+  assert.equal(selectedLabel.attributes["aria-hidden"], "false");
+  assert.equal(pending.size, 0, "Paused expansion settles after one frame");
+
+  viewportScene.setZoom(0.25);
+  viewportScene.select("new-A");
+  frame(40256);
+  assertOverviewHidden();
+  assert.deepEqual([labelReads, previewReads], measured, "Selection in overview defers invalidated sizes");
+  element.scrollLeft = 100;
+  handlers.scroll();
+  const beforeScroll = labelWork();
+  frame(40272);
+  assert.deepEqual(labelWork(), beforeScroll, "Overview scrolling still skips timeline label work");
+  assert.equal(Number(controls.get("#memory-scrubber").value), 800, "The scrubber tracks the overview offset");
+
+  viewportScene.setZoom(0.4);
+  frame(40288);
+  assert.equal(labelReads - measured[0], 2, "Expansion measures only labels affected by the selection change");
+  const newlySelectedLabel = labels.find(item => item.dataset.label === "new-A");
+  assert.equal(newlySelectedLabel.attributes["aria-hidden"], "false");
+  assert.equal(newlySelectedLabel.identityControl.tabIndex, 0);
+} finally {
+  viewportScene.destroy();
+  Array.prototype.sort = nativeSort;
+}
 console.log(
   JSON.stringify({
     script: new URL(import.meta.url).pathname,
diff --git a/tests/journal_check.mjs b/tests/journal_check.mjs
index affe0ae..aecf797 100644
--- a/tests/journal_check.mjs
+++ b/tests/journal_check.mjs
@@ -2,7 +2,7 @@ import assert from "node:assert/strict";
 import { pathToFileURL } from "node:url";
 const base = pathToFileURL(process.argv[2] + "/");
 const { groupEvents } = await import(new URL("audience-groups.js", base));
-const { createJournal } = await import(new URL("journal.js", base));
+const { createJournalModel } = await import(new URL("journal-model.js", base));
 const modules = JSON.parse(process.argv[3]);
 const stamp = "2026-10-26T12:00:00Z";
 const event = (event_id, actor_id, sequence, kind, size) => ({
@@ -56,132 +56,119 @@ assert.equal(
   "New catalog modules require no journal-specific logic.",
 );
 
-const esc = (value) =>
-  String(value ?? "").replace(
-    /[&<>"']/g,
-    (character) =>
-      ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[
-        character
-      ],
-  );
-const opened = [];
-let scrolled = null;
-const element = {
-  html: "",
-  groups: [],
-  buttons: [],
-  set innerHTML(html) {
-    this.html = html;
-    this.groups = [];
-    this.buttons = [];
-    const buttons = (markup, parent) => {
-      for (const [, id] of markup.matchAll(/data-event="([^"]+)"/g)) {
-        this.buttons.push({
-          dataset: { event: id },
-          handlers: {},
-          addEventListener(type, callback) {
-            this.handlers[type] = callback;
-          },
-          closest() {
-            return parent;
-          },
-          scrollIntoView() {
-            scrolled = id;
-          },
-        });
-      }
-    };
-    for (const [, attributes, key, body] of html.matchAll(
-      /<details([^>]*data-group="([^"]+)"[^>]*)>([\s\S]*?)<\/details>/g,
-    )) {
-      const group = {
-        dataset: { group: key },
-        open: /\sopen(?:\s|$)/.test(attributes),
-        handlers: {},
-        addEventListener(type, callback) {
-          this.handlers[type] = callback;
-        },
-      };
-      this.groups.push(group);
-      buttons(body, group);
-    }
-    if (!this.groups.length) buttons(html, null);
-  },
-  querySelectorAll(selector) {
-    return selector === "details[data-group]" ? this.groups : this.buttons;
-  },
+const day = (record) => (record.provider_at || record.received_at).slice(0, 10);
+const collapsed = new Set();
+const model = (records, lens = "activity") =>
+  createJournalModel(records, {modules, lens, collapsed, day});
+const eventsIn = (journal) =>
+  journal.rows.filter((row) => row.type === "event").map((row) => row.event.event_id);
+
+assert.deepEqual(eventsIn(model(events)), ["new-follow", "old-follow", "unknown-size", "new-lost"]);
+assert.deepEqual(eventsIn(model(events, "none")), events.map((record) => record.event_id));
+assert.deepEqual(model([], "activity").rows, []);
+assert.equal(model([], "none").heights.at(0), -1);
+
+const summary = {
+  groups: [
+    {key:"follow.follow",label:"Followed you",tone:"positive",event_count:9,distinct_actors:4},
+    {key:"follow.unfollow",label:"Unfollowed",tone:"negative",event_count:4,distinct_actors:2},
+  ],
 };
-const journal = createJournal({
-  element,
-  escape: esc,
-  date: new Intl.DateTimeFormat("en"),
-  time: new Intl.DateTimeFormat("en"),
-  displayDate: (event) => new Date(event.provider_at || event.received_at),
-  gained: (event) => event.kind === "follow.follow",
-  label: (event) => event.kind,
-  initials: () => "P",
-  onOpen: (id) => opened.push(id),
-});
-const options = { modules, lens: "activity", selected: "new-lost" };
-journal.render(events, options);
-assert.equal(element.groups.length, 2);
-assert.ok(
-  element.html.includes("3 events") && element.html.includes("1 event"),
-);
-assert.ok(element.html.includes('data-event="new-lost" aria-pressed="true"'));
-element.buttons
-  .find((button) => button.dataset.event === "new-lost")
-  .handlers.click();
-assert.deepEqual(opened, ["new-lost"]);
-element.groups[0].open = false;
-element.groups[0].handlers.toggle();
-const appended = [
-  ...events,
-  event("older", "4", 0, "follow.follow", "under-100"),
-];
-journal.render(appended, options);
-assert.equal(
-  element.groups[0].open,
-  false,
-  "Pagination preserves collapsed groups.",
-);
-assert.equal(element.buttons.length, 5);
-journal.reveal("new-follow");
-assert.equal(
-  element.groups[0].open,
-  true,
-  "Latest can reveal an event inside a collapsed group.",
-);
-assert.equal(scrolled, "new-follow");
-journal.render(appended, options);
-assert.equal(element.groups[0].open, true);
-journal.reveal("new-lost");
-assert.equal(
-  scrolled,
-  "new-lost",
-  "Navigation finds the selected record across bucket order.",
-);
-journal.render(events, { ...options, lens: "none" });
-assert.equal(element.groups.length, 0);
-assert.deepEqual(
-  element.buttons.map((button) => button.dataset.event),
-  events.map((event) => event.event_id),
-  "Ungrouped retains the full input order.",
-);
-for (const module of modules.filter((module) => module.enabled)) {
+const partial = createJournalModel([events[0]], {modules, lens:"activity", collapsed, day, aggregate:summary});
+assert.deepEqual(partial.groups.map(group => [group.key, group.eventCount, group.distinctActors, group.events.length]),
+  [["follow.follow", 9, 4, 1], ["follow.unfollow", 4, 2, 0]]);
+assert.equal(partial.rows[partial.groups[1].start].type, "summary");
+assert.deepEqual(eventsIn(partial), ["new-follow"], "Aggregate-only groups add no synthetic event rows.");
+
+const paged = model([], "none");
+const input = Array.from({length: 129}, (_, index) => ({...events[index % events.length],
+  event_id: `paged-${index}`, received_at: `${stamp.slice(0,8)}${index % 2 ? 26 : 25}T12:00:00Z`,
+  provider_at: `${stamp.slice(0,8)}${index % 2 ? 26 : 25}T12:00:00Z`,
+}));
+let cursor = 0;
+for (const pageSize of [1, 2, 4, 8, 16, 32, 64, 2]) {
+  const old = paged.byEvent.get(input[0].event_id);
+  paged.append(input.slice(cursor, cursor + pageSize));
+  cursor += pageSize;
+  if (old) assert.equal(paged.byEvent.get(input[0].event_id), old, "Append retains logical row identity.");
+  const reference = model(input.slice(0, cursor), "none");
+  const identity = ({key, first, last}) => [key, first, last];
+  assert.deepEqual(paged.rows.map(identity), reference.rows.map(identity));
+  reference.heights.update(0, 83.5);
+  paged.heights.update(0, 83.5);
+  for (const [index, row] of paged.rows.entries()) {
+    const top = reference.heights.prefix(index);
+    assert.equal(paged.heights.prefix(index), top);
+    assert.equal(paged.rows[paged.heights.at(top)], row);
+  }
+  assert.equal(paged.heights.total, reference.heights.total, "Appended Fenwick entries retain measured prefix sums.");
+}
+
+for (const module of modules.filter((item) => item.enabled)) {
   const records = module.buckets.map((bucket, index) => ({
     ...events[0],
     event_id: `${module.key}-${index}`,
     audience_groups: { [module.key]: bucket.key },
   }));
-  journal.render(records, { ...options, lens: module.key });
-  assert.equal(element.groups.length, module.buckets.length);
-  assert.deepEqual(
-    element.buttons.map((button) => button.dataset.event),
-    records.map((event) => event.event_id),
-    `${module.label} renders all registered buckets and keeps every record.`,
-  );
+  const journal = model(records, module.key);
+  assert.deepEqual(journal.groups.map((group) => group.key), module.buckets.map((bucket) => bucket.key));
+  assert.deepEqual(eventsIn(journal), records.map((record) => record.event_id));
 }
+
+const dateChanges = [
+  {...events[0], event_id:"first"},
+  {...events[1], event_id:"next", provider_at:"2026-10-25T00:00:00Z"},
+  {...events[2], event_id:"earlier-again"},
+  {...events[3], event_id:"same-day"},
+];
+const ungroupedDates = model(dateChanges, "none").rows;
+assert.deepEqual(
+  ungroupedDates.map((row) => row.type === "date" ? row.text : row.event.event_id),
+  ["2026-10-26", "first", "2026-10-25", "next", "2026-10-26", "earlier-again", "same-day"],
+  "Each change in the input date creates one heading, including a repeated nonconsecutive day.",
+);
+const groupedDates = model(dateChanges);
+assert.deepEqual(groupedDates.rows.filter((row) => row.type === "date").map(({text, first}) => [text, first]),
+  [["2026-10-26", true], ["2026-10-25", true]],
+  "Each group starts its own date heading.");
+
+const groupedBefore = model(events);
+const oldEventKey = groupedBefore.byEvent.get("old-follow").key;
+const oldDateKey = groupedBefore.rows.find((row) => row.type === "date").key;
+collapsed.add("activity:follow.follow");
+const appended = [...events, event("older", "4", 0, "follow.follow", "under-100")];
+const closedJournal = model(appended);
+const closedGroup = closedJournal.groups[0];
+assert.equal(closedGroup.events.length, 4);
+assert.equal(closedGroup.open, false);
+assert.deepEqual(
+  closedJournal.rows.slice(closedGroup.start, closedGroup.end).map((row) => row.type),
+  ["group", "gap"],
+);
+assert.deepEqual(eventsIn(closedJournal), ["new-lost"]);
+assert.equal(closedJournal.byEvent.get("older").index, -1, "Collapsed records retain logical lookup.");
+assert.equal(closedJournal.byEvent.get("new-lost").position, 5, "Logical positions include collapsed events.");
+assert.equal(closedJournal.byKey.get(oldEventKey), closedJournal.byEvent.get("old-follow"));
+assert.equal(closedJournal.byKey.get(oldDateKey).index, -1);
+assert.equal(model(appended, "account-size").groups[0].open, true, "Collapse is scoped to its lens.");
+collapsed.delete("activity:follow.follow");
+const reopened = model(appended);
+assert.equal(reopened.rows[reopened.byEvent.get("older").index].event, appended.at(-1));
+assert.deepEqual(eventsIn(reopened), ["new-follow", "old-follow", "unknown-size", "older", "new-lost"]);
+
+const prepended = model([{...events[0], event_id:"latest"}, ...events]);
+assert.equal(prepended.byKey.get(oldEventKey).event, events[2]);
+assert.equal(prepended.byKey.get(oldDateKey).text, "2026-10-26");
+
+const duplicate = {...events[0], name:"Second record with the same ID"};
+const duplicateAcrossGroup = {...events[1], event_id:duplicate.event_id};
+const duplicates = model([events[0], duplicate, duplicateAcrossGroup]);
+const duplicateRows = duplicates.rows.filter((row) => row.type === "event");
+assert.equal(new Set(duplicateRows.map((row) => row.key)).size, 3);
+assert.deepEqual(duplicateRows.map((row) => row.event), [events[0], duplicate, duplicateAcrossGroup]);
+assert.equal(duplicates.byEvent.get(duplicate.event_id), duplicateRows[0], "Reveal resolves the first match.");
+assert.ok(duplicateRows.every((row) => duplicates.byKey.get(row.key) === row));
+
 const locations = modules.find((module) => module.key === "profile-location");
 assert.equal(locations.dynamic_buckets, true);
 const locationRecord = (index, label) => ({
@@ -212,23 +199,11 @@ assert.deepEqual(
     ["Unknown", 1],
   ],
 );
-journal.render(locationRows, { ...options, lens: locations.key });
-assert.equal(element.groups.length, 3);
-element.groups[0].open = false;
-element.groups[0].handlers.toggle();
-journal.reveal("location-3");
-assert.equal(element.groups[0].open, true);
-assert.equal(scrolled, "location-3");
-const manyLocations = Array.from({ length: 30 }, (_, index) =>
-  locationRecord(index, `City ${index}`),
-);
-journal.render(manyLocations, { ...options, lens: locations.key });
-assert.equal(
-  element.groups.length,
-  30,
-  "Journal retains every named location.",
-);
-assert.equal(element.buttons.length, 30);
+const locationsJournal = model(locationRows, locations.key);
+assert.deepEqual(locationsJournal.groups.map((group) => [group.label, group.events.length]),
+  [["London", 2], ["New York City", 1], ["Unknown", 1]]);
+assert.deepEqual(eventsIn(locationsJournal), ["location-1", "location-3", "location-2", "unknown-location"]);
+
 for (const descriptor of [
   null,
   {},
@@ -256,17 +231,38 @@ assert.equal(
   )[0].key,
   "location-1",
 );
-journal.render([locationRecord(1, '<img src=x onerror="bad()">')], {
-  ...options,
-  lens: locations.key,
-});
-assert.ok(element.html.includes("&lt;img"));
-assert.ok(!element.html.includes("<img"));
-journal.render([{ ...events[0], name: '<img src=x onerror="bad()">' }], {
-  ...options,
-  modules: [extension],
-  lens: "future",
-});
-assert.ok(element.html.includes("&lt;Future&gt;"));
-assert.ok(element.html.includes("&lt;img"));
-assert.ok(!element.html.includes("<img"));
+
+function checkHeights(journal) {
+  const {heights, rows} = journal;
+  const sizes = rows.map((_, index) => heights.height(index));
+  for (const index of [1, rows.length - 1, 0, 2, 1]) {
+    const measured = 1.25 * (index + 1) + 12.5;
+    sizes[index] = measured;
+    heights.update(index, measured);
+    let top = 0;
+    sizes.forEach((size, row) => {
+      assert.equal(heights.prefix(row), top, "Incremental correction equals a direct sum.");
+      assert.equal(heights.at(top), row, "A row starts at its exact prefix.");
+      assert.equal(heights.at(top + size / 2), row, "Offsets inside a row retain their logical index.");
+      top += size;
+    });
+    assert.equal(heights.total, top);
+    assert.equal(heights.at(top), rows.length - 1);
+    assert.equal(heights.at(-20), 0);
+  }
+}
+checkHeights(reopened);
+
+const manyLocations = Array.from({length: 5000}, (_, index) =>
+  locationRecord(index, `City ${String(index).padStart(4, "0")}`));
+const largeJournal = model(manyLocations, locations.key);
+assert.equal(largeJournal.groups.length, 5000);
+assert.equal(largeJournal.byEvent.size, 5000);
+for (const index of [0, 1, 2499, 4901, 4999]) {
+  const row = largeJournal.byEvent.get(`location-${index}`);
+  const top = largeJournal.heights.prefix(row.index);
+  assert.equal(largeJournal.rows[largeJournal.heights.at(top + 1)], row);
+  const first = largeJournal.heights.at(Math.max(0, top - 480));
+  const last = largeJournal.heights.at(top + 1100);
+  assert.ok(last - first < 40, "A fixed viewport and overscan find a bounded slice among many group headers.");
+}
diff --git a/tests/live_history_check.mjs b/tests/live_history_check.mjs
index 61821a3..8df9ea0 100644
--- a/tests/live_history_check.mjs
+++ b/tests/live_history_check.mjs
@@ -2,227 +2,258 @@ import assert from "node:assert/strict";
 import { pathToFileURL } from "node:url";
 
 const base = pathToFileURL(process.argv[2] + "/");
-const { createLiveHistory, historyPath, updatedSelection, historyPages, groupSince, mergeHistory } = await import(new URL("live-history.js", base));
+const { createLiveHistory, historyPath, groupSince, mergeHistory } = await import(new URL("live-history.js", base));
 const { eventLabel, eventTone } = await import(new URL("format.js", base));
 const { peopleFromEvents } = await import(new URL("constellation-layout.js", base));
-const event = id => ({ event_id: String(id), kind: "interaction.replies", actor_id: "222", sequence: -id });
-let state = {
-  demo: false, subject: "followers", filter: "all", generation: 1,
-  events: [event(4),event(3),event(2),event(1)], next: "older", selected: "2",
-  status: { account: {id:"111"}, timeline_revision: "0:6", selection: {notifications:false,interactions:{replies:true}} },
-};
-const calls = [];
-let refreshes = 0;
-let blocked = null;
-let fail = false;
-const pages = {
-  "0": {events:[event(8),event(7),event(6)],next:"page2"},
-  page2: {events:[event(5),event(4),event(3)],next:"page3"},
-  page3: {events:[event(2),event(1)],next:null},
-};
-const feed = createLiveHistory({
-  read: () => ({...state}),
-  api: async path => {
-    calls.push(path);
-    if(fail) throw new Error("Local database unavailable");
-    if(blocked) await blocked.promise;
-    return pages[new URL(path,"http://local").searchParams.get("before")];
-  },
-  apply: (events,next) => {state.events=events;state.next=next;},
-  refreshInteractions: async () => refreshes++,
-});
-assert.match(historyPath(state),/^\/api\/timeline\?/);
-assert.match(historyPath({...state,demo:true}),/^\/api\/demo\?/);
-await feed.refresh();
-assert.deepEqual(state.events.map(e=>e.event_id),["8","7","6","5","4","3","2","1"]);
-assert.equal(state.selected,"2");
-assert.equal(state.next,"older","Keep older pages already loaded");
-assert.equal(calls.length,3,"Read through a burst and refresh the older selected record");
-assert.equal(refreshes,1);
-await feed.refresh();
-assert.equal(calls.length,3,"Unchanged revision performs no history reads");
-
-state.status={...state.status,timeline_revision:"0:9"};
-blocked={};blocked.promise=new Promise(resolve=>blocked.resolve=resolve);
-const pending=feed.refresh();
-await Promise.resolve();
-state.generation++;
-const prior=state.events;
-blocked.resolve();
-await pending;
-assert.equal(state.events,prior,"An old response cannot replace a newer view");
-blocked=null;
-fail=true;
-await assert.rejects(feed.refresh(),/Local database unavailable/);
-fail=false;
-await feed.refresh();
-assert.equal(refreshes,2,"Failed or stale requests remain retryable");
 
-state.status={...state.status,timeline_revision:"0:10"};
-blocked={};blocked.promise=new Promise(resolve=>blocked.resolve=resolve);
-const selectionRace=feed.refresh();
-await Promise.resolve();
-const rowsBeforeDisable=state.events;
-state.status={...state.status,selection:{notifications:false,interactions:{replies:false}}};
-blocked.resolve();
-await selectionRace;
-blocked=null;
-assert.equal(state.events,rowsBeforeDisable,"A response from a disabled selection is discarded");
-pages["0"]={events:[],next:null};
-await feed.refresh();
-assert.equal(state.events.length,0,"Disabling a type removes its visible rows, not its saved data");
-state.demo=true;
-const count=calls.length;
-await feed.refresh();
-assert.equal(calls.length,count,"Live history never replaces demo examples");
-
-state.demo=false;
-state.events=[event(4),event(3),event(2),event(1)];
-state.status={...state.status,timeline_revision:"0:11:profile-update",
-  selection:{interactions:{replies:true},profile_names:true}};
-pages["0"]={events:[{...event(4),name:"Maya",handle:"maya",profile_url:"https://x.com/maya"}],next:null};
-await feed.refresh();
-assert.equal(state.events.length,1,"Changing name resolution resets the visible history scope");
-state.events.push(event(3),event(2),event(1));
-state.status={...state.status,timeline_revision:"0:12:profile-update"};
-await feed.refresh();
-assert.ok(state.events.every(row=>row.name==="Maya" && row.handle==="maya" && row.profile_url==="https://x.com/maya"),
-  "A newly cached identity also updates the same person in previously loaded pages");
-
-assert.equal(eventLabel(event(1)),"Replied to you");
-assert.equal(eventLabel({...event(1),kind:"interaction.likes_given"}),"You liked their post");
-assert.equal(eventTone(event(1)),"neutral");
-assert.equal(eventTone({kind:"follow.unfollow"}),"negative");
-const people=peopleFromEvents([
-  {event_id:"old-follow",actor_id:"222",sequence:100,received_at:"2026-11-04T10:00:00+00:00"},
-  {event_id:"new-reply",actor_id:"222",sequence:-1,received_at:"2026-11-04T11:00:00+00:00"},
-]);
-assert.equal(people[0].event.event_id,"new-reply","Mixed sources select the latest receipt, not the largest table ID");
-assert.equal(updatedSelection([event(4),event(3)],"4",[event(5),event(4),event(3)]),"4");
-assert.equal(updatedSelection([event(4),event(3)],"3",[event(5),event(4),event(3)]),"3","Explicit older records stay selected");
-
-const follows = {event_id:"follow",actor_id:"222",kind:"follow.follow",sequence:1,received_at:"2026-11-04T10:00:00Z"};
-const unfollows = {...follows,event_id:"unfollow",actor_id:"333",kind:"follow.unfollow",sequence:2};
-const newest = Array.from({length:25},(_,i)=>({...event(30-i),received_at:"2026-11-05T10:00:00Z"}));
-const groupedState = {...state,lens:"activity",groupRange:"all",filter:"all",subject:"followers"};
-const burstCalls=[];
-const savedPages={"0":{events:newest,next:"older"},older:{events:[follows,unfollows],next:null}};
-const savedApi=async path=>{
-  const params=new URL(path,"http://local").searchParams;
-  burstCalls.push(Object.fromEntries(params));
-  return savedPages[params.get("before")];
+const event = (id, received_at = new Date(Date.UTC(2026, 10, 5, 10, 0, id)).toISOString()) => ({
+  event_id: `timeline:interaction:${id}`, kind: "interaction.replies", actor_id: "222",
+  sequence: -id, received_at,
+});
+const ids = rows => rows.map(item => -item.sequence);
+const scope = {
+  demo: false, subject: "followers", filter: "all", lens: "none", groupRange: "all",
+  status: { account: {id:"111"}, timeline_revision: "0:10::", selection: {interactions:{replies:true}} },
 };
-const all=[];
-for await(const page of historyPages(savedApi,groupedState)) all.push(...page.events);
-assert.equal(all.length,27,"Grouped reads include all saved pages, not just the latest interaction page");
-assert.deepEqual(all.slice(-2).map(row=>row.kind),["follow.follow","follow.unfollow"]);
-assert.ok(burstCalls.every(call=>call.local_only==="true" && call.limit==="50"),"Grouped history reads never trigger profile requests");
-assert.ok(!new URL(historyPath({...state,lens:"none"}),"http://local").searchParams.has("local_only"),"Ungrouped keeps its usual request");
-const cutoff=groupSince({...groupedState,groupRange:"24h"},Date.parse("2026-11-06T10:00:59Z"));
-assert.equal(cutoff,"2026-11-05T10:00:00.000Z");
-assert.equal(groupSince(groupedState),"");
-for (const [range, hours] of [["1h",1],["6h",6],["12h",12],["3d",72]]) {
-  const end = Date.parse("2026-11-06T10:00:00Z");
-  assert.equal(Date.parse(groupSince({...groupedState,lens:"none",groupRange:range},end)), end-hours*3600000);
+const aggregate = (revision, total_events, oldest_received_at, profile_revision = "") =>
+  ({revision, total_events, oldest_received_at, profile_revision, distinct_actors: 1, groups: []});
+function fixture(respond) {
+  const state = {...scope, events: [], next: null, aggregate: null, selected: null};
+  const calls = [], errors = [];
+  let status, refreshed = 0;
+  const feed = createLiveHistory({
+    read: () => state, connected: () => state.connected !== false,
+    api: (path, signal) => {
+      const params = new URL(path, "http://local").searchParams;
+      calls.push({params, signal});
+      return respond(params);
+    },
+    clear: () => Object.assign(state, {events: [], next: null, aggregate: null, selected: null}),
+    apply: result => Object.assign(state, result),
+    change: value => { status = value; },
+    failure: (error, phase) => errors.push([error.message, phase]),
+    refreshInteractions: async () => { refreshed++; },
+  });
+  return {
+    feed, state, calls, errors, get status() { return status; }, get refreshed() { return refreshed; },
+    revision: timeline_revision => { state.status = {...state.status, timeline_revision}; },
+  };
+}
+function deferred() {
+  let resolve;
+  const promise = new Promise(accept => { resolve = accept; });
+  return {promise, resolve};
 }
 
-assert.equal(new URL(historyPath({...groupedState,since:cutoff}),"http://local").searchParams.get("since"),cutoff);
-assert.equal(mergeHistory([...all,unfollows]).length,27,"Repeated delivery does not duplicate saved records");
-let activityState={...groupedState,generation:1,events:[],next:null,status:{...state.status,timeline_revision:"activity-initial"}};
-const activityFeed=createLiveHistory({read:()=>({...activityState}),api:savedApi,
-  apply:(events,next)=>{activityState.events=events;activityState.next=next;},refreshInteractions:async()=>{}});
-activityState.loading=true;
-const callsDuringLoad=burstCalls.length;
-await activityFeed.refresh();
-assert.equal(burstCalls.length,callsDuringLoad,"A background refresh waits for the active history load instead of replacing it with a partial snapshot");
-activityState.loading=false;
-await activityFeed.refresh();
-assert.equal(activityState.events.length,27,"Live grouped initialization also completes all saved pages");
-assert.equal(activityState.next,null);
-savedPages["0"]={events:[{...event(40),received_at:"2026-11-06T10:00:00Z"},...newest],next:"older"};
-activityState.status={...activityState.status,timeline_revision:"activity-new"};
-burstCalls.length=0;
-await activityFeed.refresh();
-assert.equal(burstCalls.length,1,"Once complete, live updates stop at overlap without rereading all history");
-assert.equal(activityState.events.length,28);
-activityState.selected = "follow";
-savedPages.older.events = [{...follows, post_id:"900", post_text:"Newly saved thread text"}, unfollows];
-activityState.status = {...activityState.status, timeline_revision:"thread-saved"};
-burstCalls.length = 0;
-await activityFeed.refresh();
-assert.equal(burstCalls.length, 2, "Refresh reaches an older selected record after a thread save");
-assert.equal(activityState.events.find(row=>row.event_id === "follow").post_text, "Newly saved thread text");
-await assert.rejects(async()=>{for await(const page of historyPages(async()=>({events:[],next:"0"}),groupedState)) {}},/did not advance/);
+const initial = {events: [event(10), event(9)], next: "old-a", aggregate: aggregate("0:10::", 5, event(6).received_at)};
+const held = deferred();
+let olderReply = held.promise;
+const manual = fixture(params => params.get("before") === "0" ? initial : olderReply);
+await manual.feed.load();
+assert.equal(manual.calls.length, 1, "First render accepts one page");
+assert.deepEqual(ids(manual.state.events), [10, 9]);
+assert.equal(manual.state.aggregate.total_events, 5);
+assert.equal(manual.state.next, "old-a");
+manual.state.selected = event(9).event_id;
+const older = manual.feed.older();
+await manual.feed.older();
+await manual.feed.refresh();
+assert.equal(manual.calls.length, 2, "Near-end and poll cannot duplicate an active older request");
+assert.equal(manual.status.phase, "older");
+held.resolve({events: [event(9), event(8)], next: "old-b"});
+await older;
+assert.deepEqual(ids(manual.state.events), [10, 9, 8]);
+assert.equal(manual.state.selected, event(9).event_id);
+assert.equal(manual.state.next, "old-b");
+assert.equal(manual.calls[1].params.get("local_only"), "true");
+olderReply = {events: [event(7)], next: "old-a"};
+await manual.feed.older();
+assert.match(manual.errors.at(-1)[0], /did not advance/);
+assert.equal(manual.state.next, "old-b", "A cycle cannot consume the accepted continuation");
+assert.deepEqual(ids(manual.state.events), [10, 9, 8]);
+olderReply = {events: [event(7), event(6)], next: null};
+const beforeRetry = manual.calls.length;
+await manual.feed.older(false);
+assert.equal(manual.calls.length, beforeRetry, "A near-end signal cannot retry a failed page by itself");
+await manual.feed.older();
+assert.equal(manual.state.next, null);
+assert.deepEqual(ids(manual.state.events), [10, 9, 8, 7, 6]);
+assert.equal(manual.status.olderError, false);
 
-const realNow=Date.now;
-let now=Date.parse("2026-11-06T10:00:00Z");
-Date.now=()=>now;
-try {
-  const recent={...event(60),received_at:"2026-11-05T10:01:00Z"};
-  const older={...follows,received_at:"2026-11-03T10:00:00Z"};
-  let ranged={...groupedState,generation:1,events:[],next:null};
-  const rangeRequests=[];
-  const rangeFeed=createLiveHistory({read:()=>({...ranged}),
-    api:async path=>{rangeRequests.push(path);return {events:[recent,older],next:null};},
-    apply:(events,next)=>{ranged.events=events;ranged.next=next;},refreshInteractions:async()=>{}});
-  await rangeFeed.refresh();
-  assert.equal(ranged.events.length,2);
-  ranged.groupRange="24h";
-  await rangeFeed.refresh();
-  assert.deepEqual(ranged.events.map(row=>row.event_id),["60"],"Narrowing a range removes older saved records");
-  now+=2*60000;
-  await rangeFeed.refresh();
-  assert.equal(ranged.events.length,0,"A rolling range expires old activity even without a new event revision");
-  ranged.groupRange="all";
-  await rangeFeed.refresh();
-  assert.equal(ranged.events.length,2,"Returning to All saved restores records outside the former range");
-  assert.ok(rangeRequests.every(path=>new URL(path,"http://local").searchParams.get("local_only")==="true"));
-} finally {
-  Date.now=realNow;
+for (const update of [
+  {filter:"lost"}, {subject:"subscriptions"}, {lens:"activity"}, {groupRange:"24h"},
+  {demo:true}, {groupSignature:"new"}, {status:{...scope.status, account:{id:"333"}}},
+  {status:{...scope.status, selection:{interactions:{replies:false}}}},
+]) {
+  const old = deferred();
+  const race = fixture(params => params.get("before") === "old-a" ? old.promise
+    : { ...initial, events: initial.events.map(row => ({...row, received_at: new Date().toISOString()})) });
+  await race.feed.load();
+  const request = race.feed.older();
+  Object.assign(race.state, update);
+  await race.feed.load();
+  assert.equal(race.calls[1].signal.aborted, true);
+  old.resolve({events:[event(8)],next:null});
+  await request;
+  assert.deepEqual(ids(race.state.events), [10, 9]);
 }
 
-const lookupState = {...groupedState,lens:"none",since:cutoff};
-assert.equal(new URL(historyPath(lookupState),"http://local").searchParams.has("local_only"),false,"Initial ungrouped page keeps opt-in name resolution");
-assert.equal(new URL(historyPath(lookupState,"older"),"http://local").searchParams.get("local_only"),"true","Extra range pages stay local-only");
-let emptyRange={...lookupState,groupRange:"24h",selected:null,events:[],next:null,loading:false,status:{...state.status,timeline_revision:"new-burst"}};
-let rangeReads=0;
-const freshRows=Array.from({length:51},(_,i)=>({...event(i+1),received_at:new Date().toISOString()}));
-const emptyFeed=createLiveHistory({read:()=>({...emptyRange}),api:async path=>{rangeReads++;return new URL(path,"http://local").searchParams.get("before")==="0"?{events:freshRows.slice(0,50),next:"older"}:{events:freshRows.slice(50),next:null};},apply:(events,next)=>{emptyRange.events=events;emptyRange.next=next;},refreshInteractions:async()=>{}});
-await emptyFeed.refresh();
-await emptyFeed.refresh();
-assert.equal(emptyRange.events.length,51,"An empty ranged timeline receives the whole burst");
-assert.equal(rangeReads,2);
+const burst = Array.from({length: 7}, (_, index) => event(17 - index));
+let rejectBatch = true, profileOnly = false, expire = false;
+const live = fixture(params => {
+  const before = params.get("before");
+  if (!params.has("after_revision") && before === "0") return profileOnly
+    ? { ...initial, events: initial.events.map(row => ({...row, name:"Maya",handle:"maya",profile_url:"https://x.com/maya"})) }
+    : initial;
+  if (before === "old-a") return {events:[event(8),event(7)],next:"old-b"};
+  if (profileOnly || expire) return {
+    events: [], next: null, selected_event: profileOnly ? {...event(9),post_text:"Newly saved thread text"} : null,
+    aggregate: aggregate(profileOnly ? "0:17:profile:thread" : "0:17::", expire ? 0 : 12, null,
+      profileOnly ? "profile" : ""),
+  };
+  assert.equal(params.get("after_revision"), "0:10::");
+  const offset = before === "0" ? 0 : Number(before.slice(6));
+  if (offset === 4 && rejectBatch) throw new Error("Local database unavailable");
+  const events = burst.slice(offset, offset + 2);
+  return {
+    events, next: offset + 2 < burst.length ? `delta-${offset+2}` : null,
+    aggregate: offset === 0 ? aggregate("0:17::", 12, event(6).received_at) : null,
+  };
+});
+await live.feed.refresh();
+assert.equal(live.calls.length, 1, "Live initialization is bounded too");
+assert.equal(live.state.next, "old-a");
+live.revision("0:17::");
+await live.feed.refresh();
+assert.equal(live.calls.length, 4);
+assert.deepEqual(ids(live.state.events), [10, 9], "Failure does not commit part of a live batch");
+assert.equal(live.errors.at(-1)[1], "live");
+rejectBatch = false;
+await live.feed.refresh();
+assert.equal(live.calls.length, 7);
+assert.equal(live.status.catchingUp, true);
+assert.deepEqual(ids(live.state.events), [17,16,15,14,13,12,10,9]);
+await live.feed.older();
+assert.equal(live.state.next, "old-b");
+assert.equal(live.calls.at(-1).params.get("after_revision"), null);
+await live.feed.refresh();
+assert.equal(live.calls.at(-1).params.get("before"), "delta-6");
+assert.equal(live.status.catchingUp, false);
+assert.equal(live.state.next, "old-b", "Live catch-up preserves the latest accepted older cursor");
+assert.deepEqual(ids(live.state.events), [17,16,15,14,13,12,11,10,9,8,7]);
+assert.equal(live.state.aggregate.total_events, 12);
+const callCount = live.calls.length;
+await live.feed.refresh();
+assert.equal(live.calls.length, callCount, "Unchanged revision does no history work");
+live.state.selected = event(9).event_id;
+profileOnly = true;
+live.revision("0:17:profile:thread");
+await live.feed.refresh();
+assert.equal(live.calls.at(-2).params.get("selected"), live.state.selected);
+assert.equal(live.calls.at(-1).params.get("local_only"), "true");
+assert.equal(live.state.events.find(row => row.event_id === live.state.selected).post_text, "Newly saved thread text");
+assert.ok(live.state.events.every(row => row.handle === "maya"), "Cached names update previously loaded rows");
+live.state.demo = true;
+await live.feed.refresh();
+assert.equal(live.refreshed, 3, "Live history leaves demo rows alone");
 
-const serverStart = "2026-11-06T09:00:59.000Z";
-assert.equal(groupSince({...groupedState,groupRange:"1h",demo:false,rangeWindow:{period:"1h",subject:"followers",demo:false,start:serverStart}},Date.parse("2026-11-06T10:00:00Z")),serverStart,"Use the same server cutoff as HUD even if the browser clock differs");
+const liveHold = deferred();
+const priority = fixture(params => params.has("after_revision") ? liveHold.promise
+  : params.get("before") === "0" ? initial : {events:[event(8)],next:null});
+await priority.feed.load();
+priority.revision("0:11::");
+const pending = priority.feed.refresh();
+await priority.feed.older();
+assert.equal(priority.calls[1].signal.aborted, true, "Manual older navigation can preempt a live read");
+liveHold.resolve({events:[event(11)],next:null});
+await pending;
+assert.deepEqual(ids(priority.state.events), [10,9,8]);
 
-const totalRows = Array.from({length:195},(_,i)=>({...event(1000+i),actor_id:String(i%88),received_at:new Date(Date.now()-(i<176?3600000:172800000)).toISOString()}));
-const rangeCalls=[];
-const rangeApi=async path=>{
-  const q=new URL(path,"http://local").searchParams;
-  rangeCalls.push(q);
-  const rows=totalRows.filter(row=>!q.get("since") || row.received_at>=q.get("since"));
-  const start=Number(q.get("before"));
-  return {events:rows.slice(start,start+25),next:start+25<rows.length?String(start+25):null};
-};
-const allState={...groupedState,lens:"none",groupRange:"all",since:"",events:[],selected:null,next:null,status:{...state.status,timeline_revision:"all-first"}};
-const savedAll=[];
-for await(const page of historyPages(rangeApi,allState)) savedAll.push(...page.events);
-const day=[];
-for await(const page of historyPages(rangeApi,{...allState,since:new Date(Date.now()-86400000).toISOString()})) day.push(...page.events);
-assert.equal(savedAll.length,195);
-assert.equal(day.length,176);
-assert.ok(day.every(row=>savedAll.some(saved=>saved.event_id===row.event_id)),"All saved is a superset of the same 24h filter");
-assert.ok(rangeCalls.filter(q=>q.get("before")!=="0").every(q=>q.get("local_only")==="true"),"Completing all saved pages never triggers extra profile lookups");
-let allLive={...allState};
-const allFeed=createLiveHistory({read:()=>({...allLive}),api:rangeApi,apply:(events,next)=>{allLive.events=events;allLive.next=next;},refreshInteractions:async()=>{}});
-await allFeed.refresh();
-assert.equal(allLive.events.length,195,"An empty All saved live refresh must also read beyond page one");
-assert.equal(allLive.next,null);
+const withEncounter = (id, bucket) => ({
+  ...event(id), audience_groups: {"previous-encounters": bucket},
+});
+const corrected = id => ({...withEncounter(id, "seen-before"), encounter_correction: true});
+const encounter = fixture(params => {
+  const before = params.get("before");
+  if (!params.has("after_revision")) {
+    if (before === "0") return {...initial, events: [withEncounter(10, "first-appearance"), event(9)]};
+    assert.equal(params.get("encounter_revision"), "0:13::");
+    return before === "old-a"
+      ? {events:[withEncounter(8, "seen-before")], next:"old-b"}
+      : {events:[withEncounter(7, "seen-before")], next:null};
+  }
+  return ({
+    "0": {events:[event(13)], next:"delta-1", aggregate:aggregate("0:13::", 8, event(6).received_at)},
+    "delta-1": {events:[event(12)], next:"delta-2"},
+    "delta-2": {events:[event(11)], next:"delta-3"},
+    "delta-3": {events:[corrected(10), corrected(8), corrected(7)], next:null},
+  })[before];
+});
+encounter.state.lens = "previous-encounters";
+encounter.state.groups = [{key: "previous-encounters", enabled: true}];
+await encounter.feed.load();
+encounter.state.selected = event(9).event_id;
+encounter.revision("0:13::");
+await encounter.feed.refresh();
+assert.equal(encounter.status.catchingUp, true);
+await encounter.feed.older();
+await encounter.feed.refresh();
+const bucket = (id) => encounter.state.events.find(row => row.event_id === event(id).event_id)
+  ?.audience_groups?.["previous-encounters"];
+assert.equal(bucket(10), "seen-before", "Live correction updates a loaded, unselected event");
+assert.equal(bucket(8), "seen-before", "A page accepted between live batches uses the current context");
+assert.equal(bucket(7), undefined, "A correction cannot load an unvisited row");
+assert.equal(encounter.state.next, "old-b", "Live corrections do not take over the older cursor");
+assert.equal(encounter.state.selected, event(9).event_id);
+assert.equal(encounter.state.events.some(row => row.encounter_correction), false);
+await encounter.feed.older();
+assert.equal(bucket(7), "seen-before");
+
+const range = fixture(params => params.has("after_revision")
+  ? {events:[],next:null,aggregate:aggregate("0:10::",0,null)}
+  : {events:[event(10)],next:"expired-cursor",aggregate:aggregate("0:10::",2,event(9).received_at)});
+range.state.groupRange = "24h";
+range.state.rangeWindow = {period:"24h",subject:"followers",demo:false,start:"2026-11-05T10:00:00Z"};
+await range.feed.load();
+range.state.rangeWindow.start = "2026-11-05T10:00:05Z";
+await range.feed.refresh();
+assert.equal(range.calls.length, 1, "A moving cutoff before the oldest match does not re-count history");
+range.state.rangeWindow.start = "2026-11-05T10:01:00Z";
+await range.feed.refresh();
+assert.equal(range.state.events.length, 0, "Expired rows disappear even without a new timeline revision");
+assert.equal(range.state.next, null, "An exact empty aggregate exhausts the expired continuation");
+
+const disconnected = deferred();
+const detached = fixture(() => disconnected.promise);
+const loading = detached.feed.load();
+detached.state.connected = false;
+detached.feed.cancel();
+disconnected.resolve(initial);
+await loading;
+assert.deepEqual(detached.state.events, []);
+assert.equal(detached.calls[0].signal.aborted, true);
 
-let retryAll={...allState,events:day,next:null,selected:day[2].event_id};
-const retryFeed=createLiveHistory({read:()=>({...retryAll}),api:rangeApi,apply:(events,next)=>{retryAll.events=events;retryAll.next=next;},refreshInteractions:async()=>{}});
-await retryFeed.refresh();
-assert.equal(retryAll.events.length,195,"A first live pass must complete All saved even when a failed range load left older 24h rows in the view");
-await retryFeed.refresh();
-assert.equal(retryAll.events.length,195);
+assert.match(historyPath(scope), /^\/api\/timeline\?/);
+assert.match(historyPath({...scope,demo:true}), /^\/api\/demo\?/);
+const query = state => new URL(historyPath(state), "http://local").searchParams;
+assert.equal(query(scope).has("local_only"), false);
+assert.equal(query({...scope,lens:"activity"}).get("local_only"), "true");
+assert.equal(query({...scope,lens:"activity"}).get("lens"), "activity");
+assert.equal(query(scope).get("limit"), "50");
+for (const [range, hours] of [["1h",1],["6h",6],["12h",12],["3d",72],["24h",24]]) {
+  const end = Date.parse("2026-11-06T10:00:00Z");
+  assert.equal(Date.parse(groupSince({...scope,groupRange:range},end)), end-hours*3600000);
+}
+assert.equal(groupSince(scope), "");
+const follow = {...event(1),event_id:"timeline:event:1",sequence:1,kind:"follow.follow"};
+const reply = event(1);
+assert.deepEqual(mergeHistory([reply,follow,reply]), [follow,reply], "Mixed ties keep source order and deduplicate");
+const wholeSecond = event(1, "2026-11-05T10:00:01+00:00");
+const fraction = event(2, "2026-11-05T10:00:01.100000+00:00");
+assert.deepEqual(mergeHistory([wholeSecond,fraction]), [fraction,wholeSecond],
+  "Client ordering matches the SQLite receipt key across optional fractional seconds");
+assert.equal(peopleFromEvents([follow,event(2)])[0].event.sequence, -2);
+assert.equal(eventLabel(reply), "Replied to you");
+assert.equal(eventLabel({...reply,kind:"interaction.likes_given"}), "You liked their post");
+assert.equal(eventTone(reply), "neutral");
+assert.equal(eventTone({kind:"follow.unfollow"}), "negative");
diff --git a/tests/test_assets.py b/tests/test_assets.py
index 6a54cd4..c03aa62 100644
--- a/tests/test_assets.py
+++ b/tests/test_assets.py
@@ -104,7 +104,7 @@ def test_selected_constellation_record_is_the_one_opened():
     assert result.returncode == 0, result.stderr
 
 
-def test_journal_groups_keep_records_order_and_collapsed_selection():
+def test_journal_model_preserves_order_and_indexes_variable_height_rows():
     import json
 
     from xflog import audience_groups
diff --git a/tests/test_browser_scene_lifecycle.py b/tests/test_browser_scene_lifecycle.py
index 8c09998..2b18368 100644
--- a/tests/test_browser_scene_lifecycle.py
+++ b/tests/test_browser_scene_lifecycle.py
@@ -1,13 +1,17 @@
-"""Exercise parent-owned scene replacement against the real offline UI."""
+"""Exercise timeline interactions and scene replacement against the real offline UI."""
 
 import importlib.util
+import json
 import os
 import socket
+import sqlite3
 import subprocess
 import sys
 import time
+from datetime import UTC, datetime, timedelta
 from pathlib import Path
 from urllib.error import URLError
+from urllib.parse import parse_qs, urljoin, urlsplit
 from urllib.request import urlopen
 
 import pytest
@@ -54,7 +58,7 @@ def offline_browser_app(tmp_path_factory):
                         raise RuntimeError("Temporary offline app failed to start") from None
                     time.sleep(0.05)
             browser = playwright.chromium.launch(headless=True)
-            yield browser, origin
+            yield browser, origin, directory / "history.sqlite3"
             browser.close()
         finally:
             process.terminate()
@@ -78,10 +82,12 @@ def offline_browser_app(tmp_path_factory):
   };
   window.cancelAnimationFrame = id => id < 0 ? frames.delete(id) : nativeCancel(id);
   window.enableFrames = () => { controlled = true; };
-  window.paintCount = () => [...frames.values()].filter(cb => cb.name === 'paint').length;
-  window.stepFrames = () => {
+  window.paintIds = () => [...frames].filter(([, cb]) => cb.name === 'paint').map(([id]) => id);
+  window.paintCount = () => window.paintIds().length;
+  window.journalFrameCount = () => [...frames.values()].filter(cb => cb.name === 'paintJournal').length;
+  window.stepFrames = (now = performance.now()) => {
     const callbacks = [...frames.values()]; frames.clear();
-    callbacks.forEach(cb => cb(performance.now()));
+    callbacks.forEach(cb => cb(now));
   };
   window.fetch = (url, options) => {
     const path = String(url);
@@ -105,7 +111,7 @@ def offline_browser_app(tmp_path_factory):
 
 @pytest.fixture
 def offline_page(offline_browser_app):
-    browser, origin = offline_browser_app
+    browser, origin, _ = offline_browser_app
     page = browser.new_page(viewport={"width": 1280, "height": 900})
     errors, external = [], []
     page.on("pageerror", lambda error: errors.append(str(error)))
@@ -192,24 +198,28 @@ def test_loading_error_retry_and_layout_clear_the_parent_owned_scene(offline_pag
     assert unmount == {"transform": "translateX(777777px)", "pending": 0}
 
 
-def test_error_fallback_clears_scene_when_initial_load_kept_existing_history(offline_page):
+def test_scope_change_discards_stale_failure_before_current_error(offline_page):
     page = offline_page
-    page.evaluate("window.holdApi.demo = true; document.querySelector('#lens-trigger').click()")
-    page.get_by_role("menuitemradio", name="Activity", exact=True).click()
-    page.wait_for_function("window.heldCount('demo') === 1 && window.paintCount() > 0", polling=50)
     page.evaluate("""() => {
       window.oldSky = document.querySelector('.constellation-sky');
+      window.holdApi.demo = true;
+      document.querySelector('#lens-trigger').click();
+    }""")
+    page.get_by_role("menuitemradio", name="Activity", exact=True).click()
+    page.wait_for_function("window.heldCount('demo') === 1", polling=50)
+    page.evaluate("""() => {
       window.holdApi.hud = true;
       document.querySelector('[data-subject="subscriptions"]').click();
     }""")
     page.wait_for_function("window.heldCount('hud') === 1", polling=50)
     page.evaluate("window.failHeld('demo')")
-    page.wait_for_selector("#history [data-retry]")
-    result = page.evaluate("""() => {
+    result = page.evaluate("""async () => {
+      await new Promise(resolve => setTimeout(resolve, 0));
       window.oldSky.style.transform = 'translateX(456789px)';
       const before = window.paintCount(); window.stepFrames();
       return {detached:!window.oldSky.isConnected, before, after:window.paintCount(),
-        transform:window.oldSky.style.transform, animating:document.querySelector('#xf').dataset.animating};
+        transform:window.oldSky.style.transform, animating:document.querySelector('#xf').dataset.animating,
+        loading: Boolean(document.querySelector('#history .loading-state'))};
     }""")
     assert result == {
         "detached": True,
@@ -217,19 +227,24 @@ def test_error_fallback_clears_scene_when_initial_load_kept_existing_history(off
         "after": 0,
         "transform": "translateX(456789px)",
         "animating": "false",
+        "loading": True,
     }
-    page.evaluate("window.holdApi.hud = false; window.holdApi.demo = false; window.failHeld('hud')")
-    page.wait_for_function(
-        "document.querySelector('#history').getAttribute('aria-busy') === 'false'", polling=50
-    )
+    page.evaluate("window.holdApi.hud = false; window.failHeld('hud')")
+    page.wait_for_function("window.heldCount('demo') === 1", polling=50)
+    page.evaluate("window.failHeld('demo')")
+    page.wait_for_selector("#history [data-retry]")
+    assert page.evaluate("window.paintCount()") == 0
 
 
 def test_detached_actor_click_cannot_act_on_a_reconstructed_scene(offline_page):
+    offline_page.evaluate(
+        "window.oldButton = document.querySelector('.constellation-star[aria-pressed=true]')"
+    )
+    offline_page.set_viewport_size({"width": 1100, "height": 810})
+    offline_page.wait_for_function("!window.oldButton.isConnected", polling=50)
     result = offline_page.evaluate("""() => {
-      const oldButton = document.querySelector('.constellation-star[aria-pressed="true"]');
+      const oldButton = window.oldButton;
       const id = oldButton.dataset.event;
-      const zoom = document.querySelector('#scene-zoom');
-      zoom.value = '1.25'; zoom.dispatchEvent(new Event('input', {bubbles:true}));
       const current = [...document.querySelectorAll('.constellation-star')]
         .find(button => button.dataset.event === id);
       const history = document.querySelector('#history');
@@ -251,3 +266,1455 @@ def test_detached_actor_click_cannot_act_on_a_reconstructed_scene(offline_page):
         },
         "liveDialog": True,
     }
+
+
+def test_ambient_frames_reuse_label_layout_and_navigation(offline_page):
+    page = offline_page
+
+    def preview_demo(route):
+        response = route.fetch()
+        payload = response.json()
+        for index, event in enumerate(payload["events"]):
+            event.update(
+                kind="interaction.replies",
+                post_id=str(10000 + index),
+                post_text=f"Synthetic preview {index}" + " long text " * (16 if index else 0),
+            )
+        route.fulfill(response=response, json=payload)
+
+    page.route("**/api/demo?*", preview_demo)
+    page.evaluate("document.querySelector('[data-filter=lost]').click()")
+    page.wait_for_function(
+        """() => document.querySelector('.is-selected .star-post')
+        && document.querySelector('#history').getAttribute('aria-busy') === 'false'""",
+        polling=50,
+    )
+    result = page.evaluate("""() => {
+      const history = document.querySelector('#history');
+      const scrubber = document.querySelector('#memory-scrubber');
+      const nav = ['#zoom-value', '#scene-zoom', '#zoom-in', '#zoom-out', '#memory-next',
+        '#memory-previous', '#scene-people-count', '#constellation-key'];
+      const label = () => history.querySelector('.is-selected .star-label');
+      const preview = () => label().querySelector('.star-post');
+      const spark = history.querySelector('.sequence-spark');
+      const observer = new MutationObserver(() => {});
+      for (const selector of nav)
+        observer.observe(document.querySelector(selector), {attributes: true, childList: true, subtree: true});
+      observer.observe(scrubber, {attributes: true});
+      const labels = new MutationObserver(() => {});
+      for (const node of history.querySelectorAll('.star-label'))
+        labels.observe(node, {attributes: true, childList: true, subtree: true});
+      const reads = {boxes: 0, previews: 0};
+      const box = Element.prototype.getBoundingClientRect;
+      const height = Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'offsetHeight');
+      Element.prototype.getBoundingClientRect = function() {
+        if (this.matches('.star-label')) reads.boxes++;
+        return box.call(this);
+      };
+      Object.defineProperty(HTMLElement.prototype, 'offsetHeight', {...height, get() {
+        if (this.matches('.star-post')) reads.previews++;
+        return height.get.call(this);
+      }});
+      let now = 1000;
+      const advance = () => stepFrames(now += 16);
+      const count = () => ({...reads, navigation: observer.takeRecords().length,
+        labels: labels.takeRecords().length});
+      try {
+        advance();
+        count();
+        reads.boxes = reads.previews = 0;
+        const initialSpark = spark.getAttribute('cx');
+        for (let index = 0; index < 6; index++) advance();
+        const idle = {...count(), moving: initialSpark !== spark.getAttribute('cx')};
+
+        const previousLeft = history.scrollLeft;
+        history.scrollLeft += previousLeft > 40 ? -40 : 40;
+        history.dispatchEvent(new Event('scroll'));
+        advance();
+        const expected = Math.round((1 - history.scrollLeft / (history.scrollWidth - history.clientWidth)) * 1000);
+        const labelBox = label().getBoundingClientRect();
+        const viewport = history.getBoundingClientRect();
+        const scroll = history.scrollLeft !== previousLeft && Number(scrubber.value) === expected
+          && label().getAttribute('aria-hidden') === 'false'
+          && labelBox.left >= viewport.left && labelBox.right <= viewport.right;
+
+        const originalPreview = preview().textContent, originalHeight = preview().offsetHeight;
+        reads.boxes = reads.previews = 0;
+        const stars = [...history.querySelectorAll('.constellation-star')];
+        const next = stars[0].getAttribute('aria-pressed') === 'true' ? stars[1] : stars[0];
+        next.click();
+        for (let index = 0; index < 64; index++) advance();
+        const selection = preview().textContent !== originalPreview
+          && label().getAttribute('aria-hidden') === 'false'
+          && preview().tabIndex === 0 && preview().style.top !== ''
+          && reads.boxes > 0 && reads.previews > 0 && preview().offsetHeight !== originalHeight;
+        return {idle, scroll, selection};
+      } finally {
+        observer.disconnect();
+        labels.disconnect();
+        Element.prototype.getBoundingClientRect = box;
+        Object.defineProperty(HTMLElement.prototype, 'offsetHeight', height);
+      }
+    }""")
+    assert result == {
+        "idle": {"boxes": 0, "previews": 0, "navigation": 0, "labels": 0, "moving": True},
+        "scroll": True,
+        "selection": True,
+    }
+
+
+def test_reduced_motion_remeasures_labels_after_fonts_and_resize(offline_page):
+    page = offline_page
+    page.emulate_media(reduced_motion="reduce")
+    page.wait_for_function("matchMedia('(prefers-reduced-motion: reduce)').matches", polling=50)
+    page.evaluate("""() => {
+      const nativeBox = Element.prototype.getBoundingClientRect;
+      window.sceneLabelReads = 0;
+      Element.prototype.getBoundingClientRect = function() {
+        if (this.matches('.star-label')) window.sceneLabelReads++;
+        return nativeBox.call(this);
+      };
+      stepFrames();
+      window.sceneLabelReads = 0;
+      window.selectedLabel = document.querySelector('.is-selected .star-label');
+      window.initialLabelHeight = window.selectedLabel.offsetHeight;
+      const style = document.createElement('style');
+      style.textContent = `@font-face {
+        font-family: "XFlog test face";
+        src: url(/static/xf/plex-sans-variable.ttf);
+        size-adjust: 220%;
+      }`;
+      document.head.append(style);
+      window.selectedLabel.style.fontFamily = '"XFlog test face", sans-serif';
+      window.loadedTestFace = false;
+      document.fonts.addEventListener('loadingdone', () => { window.loadedTestFace = true; }, {once:true});
+      void document.fonts.load('20px "XFlog test face"');
+    }""")
+    page.wait_for_function("window.loadedTestFace && paintCount() > 0", polling=50)
+    assert page.evaluate("""() => {
+      stepFrames();
+      return window.selectedLabel.isConnected && window.sceneLabelReads > 0 && paintCount() === 0
+        && window.selectedLabel.offsetHeight !== window.initialLabelHeight;
+    }""")
+
+    page.set_viewport_size({"width": 1000, "height": 800})
+    page.wait_for_function("!window.selectedLabel.isConnected && paintCount() > 0", polling=50)
+    assert page.evaluate("""() => {
+      window.sceneLabelReads = 0;
+      stepFrames();
+      return window.sceneLabelReads > 0 && paintCount() === 0
+        && document.querySelector('.is-selected .star-label').getAttribute('aria-hidden') === 'false';
+    }""")
+
+
+@pytest.fixture
+def viewport_page(offline_page):
+    page = offline_page
+
+    def long_demo(route):
+        response = route.fetch()
+        payload = response.json()
+        template = payload["events"][0]
+        anchor = datetime.fromisoformat(template["received_at"])
+        payload["events"] = [
+            {
+                **template,
+                "event_id": f"viewport-{index}",
+                "name": f"Dummy actor {index}",
+                "sequence": 120 - index,
+                "received_at": (anchor - timedelta(seconds=index)).isoformat(),
+                "kind": "interaction.replies",
+                "post_id": str(10000 + index),
+                "post_text": f"Synthetic reply {index}",
+            }
+            for index in range(120)
+        ]
+        payload["next"] = None
+        route.fulfill(response=response, json=payload)
+
+    page.route("**/api/demo?*", long_demo)
+    page.set_viewport_size({"width": 390, "height": 844})
+    page.evaluate("document.querySelector('[data-filter=lost]').click()")
+    page.wait_for_function(
+        """() => document.querySelectorAll('.constellation-star').length === 120
+        && document.querySelector('#history').getAttribute('aria-busy') === 'false'""",
+        polling=50,
+    )
+    page.evaluate("""() => {
+      window.viewportTime = 1000;
+      window.viewportStep = () => stepFrames(viewportTime += 16);
+      const zoom = document.querySelector('#scene-zoom');
+      zoom.value = '2';
+      zoom.dispatchEvent(new Event('input', {bubbles: true}));
+      viewportStep();
+    }""")
+    return page
+
+
+def test_viewport_limits_label_and_spark_work_across_scroll_jumps(viewport_page):
+    page = viewport_page
+    # At 2× zoom a segment can cross this entire viewport and its overscan.
+    page.set_viewport_size({"width": 230, "height": 844})
+    page.wait_for_function(
+        """() => {
+          const history = document.querySelector('#history');
+          return history.clientWidth < 234
+            && history.querySelector('.constellation-sky').viewBox.baseVal.width === history.clientWidth;
+        }""",
+        polling=50,
+    )
+    result = page.evaluate("""async () => {
+      const {seed} = await import('/static/xf/constellation-layout.js');
+      const history = document.querySelector('#history');
+      const canvas = history.querySelector('.constellation-canvas');
+      const actors = [...history.querySelectorAll('[data-actor]')];
+      const labels = [...history.querySelectorAll('.star-label')];
+      const linkLayer = history.querySelector('.constellation-links');
+      const links = [...linkLayer.querySelectorAll('[data-link-group]')].map((group, index) => {
+        const [x1, y1, x2, y2] = group.querySelector('path').getAttribute('d').slice(1).split(/[,L]/).map(Number);
+        return {index, x1, y1, x2, y2, spark: group.querySelector('.sequence-spark'),
+          trail: group.querySelector('.sequence-trail')};
+      });
+      const jump = left => {
+        history.scrollLeft = left;
+        history.dispatchEvent(new Event('scroll'));
+        viewportStep();
+      };
+      const cross = links[Math.floor(links.length / 2)];
+      const center = (cross.x1 + cross.x2) / 2;
+      const old = links[0];
+      jump((old.x1 + old.x2 - history.clientWidth) / 2);
+      const phase = link => (Number(link.spark.getAttribute('cx')) - link.x1) / (link.x2 - link.x1);
+      const oldLeft = history.scrollLeft;
+      const oldPhase = phase(old);
+      const oldLabel = history.querySelector('.is-selected .star-label');
+      const oldSparkPosition = old.spark.getAttribute('cx');
+      const labelObserver = new MutationObserver(() => {});
+      const sparkObserver = new MutationObserver(() => {});
+      const childObserver = new MutationObserver(() => {});
+      for (const label of labels)
+        labelObserver.observe(label, {attributes: true, attributeFilter: ['style']});
+      sparkObserver.observe(linkLayer, {subtree: true, attributes: true, attributeFilter: ['cx']});
+      childObserver.observe(canvas, {subtree: true, childList: true});
+      const nativeAdd = EventTarget.prototype.addEventListener;
+      let listenerWrites = 0;
+      EventTarget.prototype.addEventListener = function(type, ...args) {
+        if (this instanceof Node && canvas.contains(this)) listenerWrites++;
+        return nativeAdd.call(this, type, ...args);
+      };
+      try {
+        jump(center - history.clientWidth / 2);
+        const left = history.scrollLeft, right = left + history.clientWidth;
+        const margin = 128;
+        const expectedSparks = links.filter(link => Math.min(link.x1, link.x2) <= right + margin
+          && Math.max(link.x1, link.x2) >= left - margin).map(link => link.spark);
+        const sparkWrites = sparkObserver.takeRecords().map(record => record.target);
+        const labelWrites = new Set(labelObserver.takeRecords().map(record => record.target));
+        const selected = actors.find(actor => actor.getAttribute('aria-pressed') === 'true');
+        const nearest = actors.reduce((best, actor) =>
+          Math.abs(parseFloat(actor.style.left) - (left + history.clientWidth / 2))
+          < Math.abs(parseFloat(best.style.left) - (left + history.clientWidth / 2)) ? actor : best);
+        const selectedLabel = selected.parentElement.querySelector('.star-label');
+        const eligibleWrites = actors.filter(actor => {
+          const x = parseFloat(actor.style.left);
+          return (x >= left - margin && x <= right + margin)
+            || (x >= oldLeft - margin && x <= oldLeft + history.clientWidth + margin);
+        }).map(actor => actor.parentElement.querySelector('.star-label'));
+        const labelBudget = new Set([...eligibleWrites, oldLabel, selectedLabel]);
+        const expectedPhase = ((oldPhase - seed(old.index) + seed(cross.index) + 0.0016) % 1 + 1) % 1;
+        const crossWrites = sparkWrites.includes(cross.spark);
+        const initialPhase = phase(cross);
+        const worldY = cross.y1 + (cross.y2 - cross.y1) * initialPhase;
+        const trailMatches = cross.spark.getAttribute('cx') === cross.trail.getAttribute('x2')
+          && cross.spark.getAttribute('cy') === cross.trail.getAttribute('y2')
+          && Math.abs(worldY - Number(cross.spark.getAttribute('cy'))) < 0.05;
+        const newActors = canvas.querySelectorAll('[data-actor]');
+        const newLabels = canvas.querySelectorAll('.star-label');
+        viewportStep();
+        const nextSparkWrites = sparkObserver.takeRecords().map(record => record.target);
+        const withinRange = (writes) => writes.length === expectedSparks.length
+          && expectedSparks.every(spark => writes.includes(spark));
+        return {
+          cross: Math.min(cross.x1, cross.x2) < left - margin && Math.max(cross.x1, cross.x2) > right + margin && crossWrites,
+          phase: Math.abs(initialPhase - expectedPhase) < 0.0001
+            && Math.abs(phase(cross) - ((expectedPhase + 0.0016) % 1)) < 0.0001,
+          alignment: trailMatches,
+          sparkRange: withinRange(sparkWrites) && withinRange(nextSparkWrites),
+          offscreenUnchanged: old.spark.getAttribute('cx') === oldSparkPosition,
+          labels: labelWrites.has(selectedLabel) && [...labelWrites].every(label => labelBudget.has(label)),
+          leavingHidden: oldLabel.getAttribute('aria-hidden') === 'true'
+            && oldLabel.querySelector('button').tabIndex === -1,
+          selected: selected === nearest && selectedLabel.getAttribute('aria-hidden') === 'false',
+          nodes: childObserver.takeRecords().length === 0 && listenerWrites === 0
+            && actors.every((actor, index) => actor === newActors[index])
+            && labels.every((label, index) => label === newLabels[index])
+            && canvas === history.querySelector('.constellation-canvas')
+            && linkLayer === canvas.querySelector('.constellation-links'),
+        };
+      } finally {
+        EventTarget.prototype.addEventListener = nativeAdd;
+        labelObserver.disconnect();
+        sparkObserver.disconnect();
+        childObserver.disconnect();
+      }
+    }""")
+    assert all(result.values()), result
+
+    page.emulate_media(reduced_motion="reduce")
+    page.wait_for_function("matchMedia('(prefers-reduced-motion: reduce)').matches")
+    result = page.evaluate("""() => {
+      const history = document.querySelector('#history');
+      viewportStep();
+      const group = history.querySelector('[data-link-group]');
+      const path = group.querySelector('path');
+      const spark = group.querySelector('.sequence-spark');
+      const trail = group.querySelector('.sequence-trail');
+      const stale = spark.getAttribute('cx');
+      const [x1, y1, x2, y2] = path.getAttribute('d').slice(1).split(/[,L]/).map(Number);
+      history.scrollLeft = (x1 + x2 - history.clientWidth) / 2;
+      history.dispatchEvent(new Event('scroll'));
+      viewportStep();
+      const x = Number(spark.getAttribute('cx'));
+      const y = Number(spark.getAttribute('cy'));
+      const progress = (x - x1) / (x2 - x1);
+      return {
+        reentered: getComputedStyle(spark).visibility === 'visible'
+          && spark.getAttribute('cx') !== stale && progress >= 0 && progress <= 1
+          && Math.abs(y - (y1 + (y2 - y1) * progress)) < 0.05
+          && spark.getAttribute('cx') === trail.getAttribute('x2'),
+        paused: paintCount() === 0,
+      };
+    }""")
+    assert result == {"reentered": True, "paused": True}
+
+
+def test_viewport_keeps_offscreen_selection_and_focused_preview_usable(viewport_page):
+    page = viewport_page
+    result = page.evaluate("""() => {
+      const history = document.querySelector('#history');
+      const actors = [...history.querySelectorAll('[data-actor]')];
+      const label = actor => actor.parentElement.querySelector('.star-label');
+      const first = actors[0], last = actors.at(-1);
+      const selected = () => history.querySelector('[aria-pressed=true][data-actor]');
+      const isUsable = (item, control) => getComputedStyle(control).visibility === 'visible'
+        && getComputedStyle(control).display !== 'none'
+        && item.getAttribute('aria-hidden') === 'false' && control.tabIndex === 0;
+      const outside = actor => {
+        const x = parseFloat(actor.style.left);
+        return x < history.scrollLeft - 128 || x > history.scrollLeft + history.clientWidth + 128;
+      };
+
+      last.click();
+      viewportStep();
+      const pinnedSelection = selected() === last && outside(last)
+        && isUsable(label(last), label(last).querySelector('button'));
+      for (let i = 0; i < 160; i++) viewportStep();
+      const preview = label(last).querySelector('.star-post');
+      preview.focus({preventScroll: true});
+      const focusedInitially = document.activeElement === preview;
+      history.scrollLeft = history.scrollWidth - history.clientWidth;
+      history.dispatchEvent(new Event('scroll'));
+      viewportStep();
+      const pinnedFocus = focusedInitially && selected() === first && outside(last)
+        && document.activeElement === preview && isUsable(label(last), preview);
+
+      preview.blur();
+      viewportStep();
+      const removedFromTabOrder = label(last).getAttribute('aria-hidden') === 'true'
+        && preview.tabIndex === -1;
+      const actorAccessible = last.tabIndex === 0 && last.getAttribute('aria-hidden') === 'false';
+      return {pinnedSelection, pinnedFocus, removedFromTabOrder, actorAccessible};
+    }""")
+    assert all(result.values()), result
+
+    # A real key action enables :focus-visible before focusing the far actor without native scrolling.
+    page.keyboard.press("Tab")
+    assert page.evaluate("""() => {
+      const actor = [...document.querySelectorAll('#history [data-actor]')].at(-1);
+      actor.focus({preventScroll: true});
+      viewportStep();
+      return document.activeElement === actor && actor.matches(':focus-visible')
+        && actor.getAttribute('aria-pressed') === 'true';
+    }""")
+
+
+@pytest.mark.parametrize("motion", ["no-preference", "reduce"])
+def test_zoom_reuses_grouped_scene_and_rebinds_animation(offline_page, motion):
+    page = offline_page
+    page.emulate_media(reduced_motion=motion)
+
+    def dense_demo(route):
+        response = route.fetch()
+        payload = response.json()
+        events = payload["events"]
+        templates = (
+            events[0],
+            next(event for event in events if event["kind"] != events[0]["kind"]),
+        )
+        anchor = datetime.fromisoformat(events[0]["received_at"])
+        payload["events"] = [
+            {
+                **templates[index % 2],
+                "sequence": 240 - index,
+                "event_id": f"zoom-{index}",
+                "received_at": (anchor - timedelta(seconds=index)).isoformat(),
+            }
+            for index in range(240)
+        ]
+        payload["next"] = None
+        route.fulfill(response=response, json=payload)
+
+    page.route("**/api/demo?*", dense_demo)
+    page.locator("#lens-trigger").click()
+    page.get_by_role("menuitemradio", name="Activity", exact=True).click()
+    page.wait_for_function(
+        """() => document.querySelectorAll('.constellation-star').length === 240
+        && document.querySelector('#history').getAttribute('aria-busy') === 'false'""",
+        polling=50,
+    )
+    slider = page.locator("#scene-zoom")
+    page.evaluate("""() => {
+      const history = document.querySelector('#history');
+      const selector = '.constellation-canvas, .constellation-sky, .constellation-person, '
+        + '.constellation-star, .star-label, .star-identity';
+      const nodes = [...history.querySelectorAll(selector)];
+      const selected = history.querySelector('.constellation-star[aria-pressed=true]');
+      const path = history.querySelector('.constellation-links path');
+      let listenerCount = 0, historyWrites = 0;
+      const nativeAdd = EventTarget.prototype.addEventListener;
+      EventTarget.prototype.addEventListener = function(type, ...args) {
+        if (this instanceof Element && this.matches(selector)) listenerCount++;
+        return nativeAdd.call(this, type, ...args);
+      };
+      const observer = new MutationObserver(records => { historyWrites += records.length; });
+      observer.observe(history, {childList:true});
+      window.zoomProbe = {
+        history, selected, path, initialPath: path.getAttribute('d'),
+        unchanged: () => {
+          const current = [...history.querySelectorAll(selector)];
+          return history === document.querySelector('#history') && current.length === nodes.length
+            && nodes.every((node, index) => node === current[index]);
+        },
+        work: () => ({historyWrites:historyWrites + observer.takeRecords().length,
+          listeners:listenerCount}),
+        finish: () => { observer.disconnect(); EventTarget.prototype.addEventListener = nativeAdd; },
+      };
+      window.setZoomInput = value => {
+        const input = document.querySelector('#scene-zoom');
+        input.value = String(value);
+        input.dispatchEvent(new Event('input', {bubbles:true}));
+      };
+      selected.focus({preventScroll:true});
+      zoomProbe.paintBefore = paintIds()[0];
+      setZoomInput(1.25);
+      zoomProbe.paintAfter = paintIds()[0];
+    }""")
+    assert page.evaluate("zoomProbe.unchanged() && document.activeElement === zoomProbe.selected")
+    if motion == "no-preference":
+        assert page.evaluate(
+            "zoomProbe.paintBefore < 0 && zoomProbe.paintBefore === zoomProbe.paintAfter"
+        )
+
+    slider.press("ArrowRight")
+    assert float(slider.input_value()) == 1.3
+    bounds = slider.bounding_box()
+    assert bounds is not None
+    x, y = bounds["x"], bounds["y"] + bounds["height"] / 2
+    page.mouse.move(x + bounds["width"] * 0.65, y)
+    page.mouse.down()
+    page.mouse.move(x + bounds["width"] * 0.90, y, steps=12)
+    page.mouse.up()
+    assert float(slider.input_value()) > 1.5
+    page.locator("#zoom-out").click()
+    assert page.evaluate(
+        "zoomProbe.unchanged() && zoomProbe.path.getAttribute('d') !== zoomProbe.initialPath"
+    )
+
+    before_wheel = float(slider.input_value())
+    history_bounds = page.locator("#history").bounding_box()
+    assert history_bounds is not None
+    x = history_bounds["x"] + history_bounds["width"] / 2
+    y = history_bounds["y"] + history_bounds["height"] / 2
+    page.mouse.move(x, y)
+    page.mouse.down(button="middle")
+    # Playwright's wheel helper omits the pressed-button mask.
+    session = page.context.new_cdp_session(page)
+    session.send(
+        "Input.dispatchMouseEvent",
+        {"type": "mouseWheel", "x": x, "y": y, "deltaX": 0, "deltaY": 100, "buttons": 4},
+    )
+    session.detach()
+    page.mouse.up(button="middle")
+    page.wait_for_function(
+        "previous => Number(document.querySelector('#scene-zoom').value) < previous",
+        arg=before_wheel,
+        polling=50,
+    )
+    assert before_wheel - float(slider.input_value()) == pytest.approx(0.225, abs=0.026)
+    page.evaluate("setZoomInput(1); stepFrames(); setZoomInput(0.25); stepFrames()")
+    assert page.locator(".constellation-group:visible").count() == 2
+    assert page.evaluate("""() => zoomProbe.unchanged() && zoomProbe.selected.tabIndex === -1
+      && zoomProbe.selected.getAttribute('aria-hidden') === 'true'
+      && zoomProbe.history.scrollLeft >= 0
+      && zoomProbe.history.scrollLeft <= zoomProbe.history.scrollWidth - zoomProbe.history.clientWidth""")
+    assert page.locator(".constellation-links path:visible").count() == 0
+    assert page.evaluate("""() => {
+      const link = zoomProbe.path.parentNode;
+      const observer = new MutationObserver(() => {});
+      observer.observe(link, {attributes:true, subtree:true});
+      stepFrames();
+      const writes = observer.takeRecords().length;
+      observer.disconnect();
+      return writes === 0;
+    }""")
+
+    assert page.evaluate("""() => {
+      const {history} = zoomProbe;
+      const labels = [...history.querySelectorAll('.star-label')];
+      const hidden = () => labels.every(label => getComputedStyle(label).visibility === 'hidden'
+        && label.getAttribute('aria-hidden') === 'true'
+        && [...label.querySelectorAll('button, a')].every(control => control.tabIndex === -1));
+      const observer = new MutationObserver(() => {});
+      for (const label of labels) observer.observe(label, {attributes: true, subtree: true});
+      const width = () => Math.max(history.clientWidth, history.querySelector('.constellation-canvas').offsetWidth);
+      try {
+        for (const zoom of [0, 0.1, 0.25]) {
+          setZoomInput(zoom);
+          stepFrames();
+          if (!hidden() || history.scrollWidth !== width()) return false;
+        }
+        return zoomProbe.unchanged() && observer.takeRecords().length === 0;
+      } finally {
+        observer.disconnect();
+      }
+    }""")
+
+    page.evaluate("setZoomInput(0.30); stepFrames()")
+    assert page.locator(".constellation-group:visible").count() == 0
+    assert page.evaluate("""() => {
+      const {history, selected, path} = zoomProbe;
+      const expected = Math.max(0, Math.min(parseFloat(selected.style.left) - history.clientWidth / 2,
+        history.scrollWidth - history.clientWidth));
+      const center = history.scrollLeft + history.clientWidth / 2;
+      const visiblePath = [...history.querySelectorAll('.constellation-links path')].find(path => {
+        const [x1, , x2] = path.getAttribute('d').slice(1).split(/[,L]/).map(Number);
+        return Math.min(x1, x2) <= center && Math.max(x1, x2) >= center;
+      });
+      const spark = visiblePath.parentNode.querySelector('.sequence-spark');
+      const trail = visiblePath.parentNode.querySelector('.sequence-trail');
+      const [ax, ay, bx, by] = visiblePath.getAttribute('d').slice(1).split(/[,L]/).map(Number);
+      const cx = Number(spark.getAttribute('cx')), cy = Number(spark.getAttribute('cy'));
+      const progress = (cx - ax) / (bx - ax);
+      const label = selected.parentElement.querySelector('.star-label');
+      return zoomProbe.unchanged() && path.isConnected && selected.tabIndex === 0
+        && getComputedStyle(label).visibility === 'visible'
+        && label.getAttribute('aria-hidden') === 'false' && label.querySelector('button').tabIndex === 0
+        && selected.getAttribute('aria-hidden') === 'false'
+        && selected.getAttribute('aria-pressed') === 'true'
+        && Math.abs(history.scrollLeft - expected) < 2
+        && spark.hasAttribute('cx') && spark.getAttribute('cx') === trail.getAttribute('x2')
+        && spark.getAttribute('cy') === trail.getAttribute('y2')
+        && progress >= 0 && progress <= 1 && Math.abs(cy - (ay + (by - ay) * progress)) < 0.1;
+    }""")
+    assert page.evaluate("zoomProbe.work()") == {"historyWrites": 0, "listeners": 0}
+    assert page.evaluate("() => { stepFrames(); return paintCount(); }") == (
+        0 if motion == "reduce" else 1
+    )
+
+    page.evaluate("setZoomInput(0.2)")
+    page.locator(".constellation-group:visible").first.click()
+    assert float(slider.input_value()) == 1
+    assert page.evaluate("zoomProbe.unchanged()")
+    assert page.evaluate("""() => {
+      const {history} = zoomProbe;
+      const other = history.querySelector('.constellation-star[aria-pressed=false]');
+      other.click();
+      setZoomInput(1.5);
+      const expected = Math.max(0, Math.min(parseFloat(other.style.left) - history.clientWidth / 2,
+        history.scrollWidth - history.clientWidth));
+      return zoomProbe.unchanged() && other.getAttribute('aria-pressed') === 'true'
+        && Math.abs(history.scrollLeft - expected) < 2;
+    }""")
+    page.evaluate("zoomProbe.finish()")
+    page.set_viewport_size({"width": 1050, "height": 800})
+    page.wait_for_function("!zoomProbe.unchanged()", polling=50)
+
+
+def journal_events(size):
+    anchor = datetime.now(UTC).replace(microsecond=0) - timedelta(minutes=1)
+    events = []
+    for index in range(size):
+        kind = "follow.follow" if index < size * 3 // 4 else "follow.unfollow"
+        city = f"city-{index // 3:03}"
+        city_name = f"City {index // 3:03}"
+        if index < 3:
+            city_name += ' <img src=x onerror="bad()">'
+        location = (
+            {
+                "audience_groups": {"activity": kind, "profile-location": city},
+                "audience_group_buckets": {"profile-location": {"key": city, "label": city_name}},
+            }
+            if index < size - 3
+            else {"audience_groups": {"activity": kind}}
+        )
+        events.append(
+            {
+                "event_id": f"journal-{index}",
+                "actor_id": str(index % 31 + 1000),
+                "account_id": "demo",
+                "sequence": size - index,
+                "kind": kind,
+                "name": (
+                    'Name <img src=x onerror="bad()">'
+                    if index == 0
+                    else f"Dummy actor {index}" + " long name" * (30 if index % 11 == 0 else 0)
+                ),
+                "handle": f"actor_{index % 31}",
+                "received_at": (anchor - timedelta(seconds=index)).isoformat(),
+                "provider_at": (anchor - timedelta(days=index // 12)).isoformat(),
+                **location,
+            }
+        )
+    return events
+
+
+@pytest.fixture
+def paged_history(offline_page):
+    page = offline_page
+    events = journal_events(114)
+    page.evaluate(
+        """events => {
+          const fetchOriginal = window.fetch;
+          const requests = [];
+          const history = document.querySelector('#history');
+          const byKind = kind => events.filter(event => event.kind === kind);
+          const actors = events => new Set(events.map(event => event.actor_id)).size;
+          window.fetch = (path, options) => {
+            const url = new URL(path, location.href);
+            if (url.pathname !== '/api/demo') return fetchOriginal(path, options);
+            return new Promise(resolve => requests.push({url, signal:options?.signal, resolve}));
+          };
+          window.paged = {
+            requests: () => requests.map(({url, signal}) => ({...Object.fromEntries(url.searchParams),
+              aborted: signal?.aborted ?? false})),
+            send(index, mode) {
+              const {url, resolve} = requests[index];
+              const before = url.searchParams.get('before');
+              const scope = Object.fromEntries(url.searchParams);
+              const offset = before === '0' ? 0 : Number(before.split('-').at(-1));
+              const limit = Math.min(50, Number(url.searchParams.get('limit') || 25));
+              const scopedRows = scope.kind === 'lost' ? byKind('follow.unfollow') : events;
+              const groups = ['follow.follow', 'follow.unfollow'].map((key, index) => ({
+                key, label: index ? 'Unfollowed' : 'Followed you', tone: index ? 'negative' : 'positive',
+                event_count: byKind(key).length, distinct_actors: actors(byKind(key)),
+              }));
+              const end = Math.min(offset + limit, scopedRows.length);
+              const payload = mode === 'fail' ? {detail: 'Synthetic older-page failure'} : {
+                events: scopedRows.slice(offset, end),
+                next: mode === 'repeat' ? before : end < scopedRows.length ? 'page-' + end : null,
+                aggregate: !offset ? {total_events: scopedRows.length, distinct_actors: actors(scopedRows),
+                  groups: scope.lens === 'activity' ? groups : [], kinds: {}, revision: 'fixture', scope} : null,
+              };
+              // Resolve even after abort to challenge the caller's generation guard.
+              resolve(new Response(JSON.stringify(payload), {status: mode === 'fail' ? 503 : 200,
+                headers: {'content-type': 'application/json'}}));
+            },
+            journalEnd() {
+              history.scrollTop = history.scrollHeight;
+              for (let index = 0; index < 4; index++) history.dispatchEvent(new Event('scroll'));
+              stepFrames();
+            },
+            constellationEnd() {
+              history.scrollLeft = 0;
+              history.dispatchEvent(new WheelEvent('wheel', {deltaX: -120, bubbles:true, cancelable:true}));
+              stepFrames();
+            },
+          };
+        }""",
+        events,
+    )
+    return page
+
+
+def receive_history_page(page, index, mode=None):
+    page.wait_for_function("index => paged.requests().length === index + 1", arg=index, polling=20)
+    page.evaluate("([index, mode]) => paged.send(index, mode)", [index, mode])
+    if mode in {"fail", "repeat"}:
+        page.wait_for_function(
+            "document.querySelector('#history-more').textContent === 'Retry older activity'",
+            polling=20,
+        )
+        assert page.evaluate(
+            """index => {
+          paged.journalEnd();
+          return paged.requests().length === index + 1 &&
+            document.querySelector('#history').getAttribute('aria-busy') === 'false';
+        }""",
+            index,
+        ), "A near-end scroll must leave the failed cursor available for explicit retry"
+        return
+    page.wait_for_function(
+        "document.querySelector('#history').getAttribute('aria-busy') === 'false'", polling=20
+    )
+
+
+def test_constellation_scrubber_requests_older_once_on_commit(paged_history):
+    page = paged_history
+    page.evaluate("document.querySelector('[data-filter=all]').click()")
+    receive_history_page(page, 0)
+    scrubber = page.locator("#memory-scrubber")
+    scrubber.evaluate("input => { input.value = '1000'; }")
+    scrubber.dispatch_event("input")
+    assert page.evaluate("paged.requests().length") == 1
+    scrubber.dispatch_event("change")
+    receive_history_page(page, 1, "fail")
+    assert page.evaluate("paged.requests().length") == 2
+    assert page.locator("#history-more").inner_text() == "Retry older activity"
+
+
+def test_journal_pages_coalesce_retry_and_preserve_anchor_focus(paged_history):
+    page = paged_history
+    page.evaluate("""() => {
+      document.querySelector('[data-layout=vertical]').click();
+      document.querySelector('[data-filter=all]').click();
+    }""")
+    receive_history_page(page, 0)
+    initial = page.evaluate("Number(document.querySelector('#memory-scrubber').max) + 1")
+    assert 1 < initial <= 50
+    assert page.evaluate("paged.requests().map(request => request.before)") == ["0"]
+    assert "114" in page.locator("#scene-people-count").text_content()
+    page.evaluate("""() => {
+      window.journalTrackBefore = document.querySelector('.journal-window');
+      window.focusedHistoryRow = document.querySelector('.event-button');
+      focusedHistoryRow.focus({preventScroll:true});
+      paged.journalEnd();
+    }""")
+    page.wait_for_function("paged.requests().length === 2", polling=20)
+    assert "Loading" in page.locator("#history-page-status").text_content()
+    assert page.evaluate("paged.requests().at(-1).before") == f"page-{initial}"
+    receive_history_page(page, 1, "fail")
+    assert page.locator("#history-more").is_visible()
+    assert page.locator("#history-more").inner_text() == "Retry older activity"
+    assert page.evaluate(
+        "document.activeElement === focusedHistoryRow && journalTrackBefore.isConnected"
+    )
+    page.evaluate("document.querySelector('#history-more').click()")
+    receive_history_page(page, 2, "repeat")
+    assert page.evaluate("paged.requests().at(-1).before") == f"page-{initial}"
+    assert page.evaluate("Number(document.querySelector('#memory-scrubber').max) + 1") == initial
+    page.evaluate("document.querySelector('#history-more').click()")
+    page.wait_for_function("paged.requests().length === 4", polling=20)
+    page.evaluate("""() => {
+      stepFrames();
+      const history = document.querySelector('#history');
+      const top = history.getBoundingClientRect().top;
+      window.anchorBeforeAppend = [...history.querySelectorAll('.event-button')].find(node =>
+        node.getBoundingClientRect().bottom > top);
+      window.anchorOffsetBeforeAppend = anchorBeforeAppend.getBoundingClientRect().top - top;
+      window.selectedBeforeAppend = document.querySelector('#journey-position').textContent;
+    }""")
+    receive_history_page(page, 3)
+    assert page.evaluate("paged.requests().at(-1).before") == f"page-{initial}"
+    restored = page.evaluate("""() => ({focus: document.activeElement === focusedHistoryRow,
+      track: journalTrackBefore.isConnected, anchor: anchorBeforeAppend.isConnected,
+      offset: anchorBeforeAppend.getBoundingClientRect().top - document.querySelector('#history').getBoundingClientRect().top - anchorOffsetBeforeAppend,
+      selected: document.querySelector('#journey-position').textContent.split(' of ')[0] === selectedBeforeAppend.split(' of ')[0]})""")
+    assert restored == {
+        "focus": True,
+        "track": True,
+        "anchor": True,
+        "offset": pytest.approx(0, abs=2),
+        "selected": True,
+    }
+    assert (
+        page.evaluate("Number(document.querySelector('#memory-scrubber').max) + 1") == initial * 2
+    )
+    page.evaluate("document.querySelector('[data-layout=horizontal]').click()")
+    assert page.locator("#history .constellation-star").count() == initial * 2
+    assert page.evaluate("paged.requests().length") == 4
+
+
+def test_constellation_pages_preserve_selection_and_show_full_group_counts(paged_history):
+    page = paged_history
+    page.locator("#lens-trigger").click()
+    page.get_by_role("menuitemradio", name="Activity", exact=True).click()
+    receive_history_page(page, 0)
+    initial = page.locator("#history .constellation-star").count()
+    assert 1 < initial <= 50
+    assert "114" in page.locator("#scene-people-count").text_content()
+    page.evaluate("""() => {
+      const zoom = document.querySelector('#scene-zoom');
+      zoom.value = '0'; zoom.dispatchEvent(new Event('input', {bubbles:true})); stepFrames();
+    }""")
+    assert page.locator("#history .constellation-group .cluster-count").all_text_contents() == [
+        "85"
+    ]
+    assert "1 group with no events loaded" in page.locator("#constellation-key").text_content()
+    assert page.locator("#history .constellation-star").count() == initial
+    page.evaluate("document.querySelector('[data-layout=vertical]').click()")
+    assert "85 events" in page.locator('#history [data-group="follow.follow"] summary').inner_text()
+    page.evaluate("""() => {
+      const history = document.querySelector('#history');
+      history.scrollTop = history.scrollHeight - history.clientHeight - 180;
+      history.dispatchEvent(new Event('scroll'));
+      stepFrames();
+    }""")
+    summary = page.locator('#history [data-group="follow.unfollow"] .journal-group-summary')
+    assert "29 events saved · 0 loaded" in summary.text_content()
+    assert summary.locator("button, a").count() == 0
+    assert page.evaluate("paged.requests().length") == 1
+    page.evaluate("document.querySelector('[data-layout=horizontal]').click()")
+    page.evaluate("""() => {
+      const zoom = document.querySelector('#scene-zoom');
+      zoom.value = '1'; zoom.dispatchEvent(new Event('input', {bubbles:true})); stepFrames();
+      paged.constellationEnd();
+      const selected = document.querySelector('#history [aria-pressed=true][data-actor]');
+      window.selectedStarBefore = {id:selected.dataset.event, x:selected.getBoundingClientRect().x};
+    }""")
+    receive_history_page(page, 1)
+    assert page.locator("#history .constellation-star").count() == 2 * initial
+    assert page.evaluate("""() => {
+      const selected = document.querySelector('#history [aria-pressed=true][data-actor]');
+      return selected.dataset.event === selectedStarBefore.id
+        && Math.abs(selected.getBoundingClientRect().x - selectedStarBefore.x) <= 2;
+    }""")
+    while page.locator("#history .constellation-star").count() < 114:
+        count = page.evaluate("paged.requests().length")
+        assert count < 6
+        page.evaluate("paged.constellationEnd()")
+        receive_history_page(page, count)
+    assert page.locator("#history .constellation-star").count() == 114
+    assert "All matching activity loaded" in page.locator("#history-page-status").text_content()
+    count = page.evaluate("paged.requests().length")
+    page.evaluate("paged.constellationEnd()")
+    assert page.evaluate("paged.requests().length") == count
+
+
+def test_grouped_journal_replaces_unloaded_summary_in_row_order(paged_history):
+    page = paged_history
+    page.evaluate("document.querySelector('[data-layout=vertical]').click()")
+    page.locator("#lens-trigger").click()
+    page.get_by_role("menuitemradio", name="Activity", exact=True).click()
+    receive_history_page(page, 0)
+    page.evaluate("""() => {
+      window.groupHeader = document.querySelector('[data-group="follow.follow"] summary');
+      groupHeader.focus({preventScroll: true});
+      paged.journalEnd();
+    }""")
+    assert (
+        page.locator('#history [data-group="follow.unfollow"] .journal-group-summary').count() == 1
+    )
+    receive_history_page(page, 1)
+    assert (
+        page.locator('#history [data-group="follow.unfollow"] .journal-group-summary').count() == 0
+    )
+    assert page.evaluate("document.activeElement === groupHeader && groupHeader.isConnected")
+    page.evaluate("paged.journalEnd()")
+    receive_history_page(page, 2)
+    assert page.locator('#history [data-group="follow.unfollow"] summary').count() == 1
+    assert page.locator("#history .journal-window > [data-group]").evaluate_all(
+        "groups => groups.map(group => group.dataset.group)"
+    ) == ["follow.follow", "follow.unfollow"]
+    assert page.evaluate("document.activeElement === groupHeader && groupHeader.isConnected")
+
+
+def test_stale_older_page_cannot_cross_filter_scope(paged_history):
+    page = paged_history
+    page.evaluate("document.querySelector('[data-filter=all]').click()")
+    receive_history_page(page, 0)
+    page.evaluate("document.querySelector('#history-more').click()")
+    page.wait_for_function("paged.requests().length === 2", polling=20)
+    page.evaluate("document.querySelector('[data-filter=lost]').click()")
+    receive_history_page(page, 2)
+    assert page.evaluate("paged.requests().map(request => request.before)[2]") == "0"
+    assert page.evaluate("paged.requests()[1].aborted")
+    page.evaluate(
+        """async () => { paged.send(1); await new Promise(resolve => setTimeout(resolve, 0)); }"""
+    )
+    limit = page.evaluate("Number(paged.requests()[2].limit || 25)")
+    assert page.locator("#history .constellation-star").count() == min(29, limit)
+    assert all(
+        "Unfollowed" in label
+        for label in page.locator("#history .constellation-star").evaluate_all(
+            "stars => stars.map(star => star.getAttribute('aria-label'))"
+        )
+    )
+
+
+def test_parent_unmount_aborts_older_page_and_ignores_late_response(paged_history):
+    page = paged_history
+    page.evaluate("document.querySelector('[data-filter=all]').click()")
+    receive_history_page(page, 0)
+    page.evaluate("document.querySelector('#history-more').click()")
+    page.wait_for_function("paged.requests().length === 2", polling=20)
+    page.evaluate("""() => {
+      window.detachedRoot = document.querySelector('#xf');
+      detachedRoot.remove();
+    }""")
+    page.wait_for_function("paged.requests()[1].aborted", polling=20)
+    assert page.evaluate("""async () => {
+      const before = detachedRoot.outerHTML;
+      paged.send(1);
+      await new Promise(resolve => setTimeout(resolve, 0));
+      stepFrames();
+      return !detachedRoot.isConnected && detachedRoot.outerHTML === before && paintCount() === 0;
+    }""")
+
+
+def test_real_demo_timeline_pages_through_the_shared_range(offline_page):
+    page = offline_page
+    requests = []
+    page.on(
+        "request",
+        lambda request: requests.append(request.url) if "/api/demo?" in request.url else None,
+    )
+    page.locator("#group-range-trigger").click()
+    page.get_by_role("menuitemradio", name="All saved", exact=True).click()
+    page.wait_for_function(
+        """() => document.querySelectorAll('#history .constellation-star').length === 50
+      && document.querySelector('#history').getAttribute('aria-busy') === 'false'""",
+        polling=20,
+    )
+    assert len(requests) == 1
+    assert "66 events" in page.locator("#scene-people-count").text_content()
+    page.locator("#history-more").press("Enter")
+    page.wait_for_function(
+        "document.querySelectorAll('#history .constellation-star').length === 66", polling=20
+    )
+    assert len(requests) == 2
+    assert page.locator("#history-more").is_hidden()
+    assert (
+        len(
+            set(
+                page.locator("#history [data-actor]").evaluate_all(
+                    "stars => stars.map(star => star.dataset.event)"
+                )
+            )
+        )
+        == 66
+    )
+
+
+JOURNAL_CONTROLS = """() => {
+  const history = document.querySelector('#history');
+  const viewport = () => history.getBoundingClientRect();
+  const buttons = () => [...history.querySelectorAll('.event-button')];
+  const visible = () => buttons().filter(button => {
+    const rect = button.getBoundingClientRect();
+    return rect.height > 0 && rect.bottom > viewport().top && rect.top < viewport().bottom;
+  });
+  const settle = async () => {
+    for (let index = 0; index < 4; index++) {
+      stepFrames();
+      await new Promise(resolve => setTimeout(resolve, 20));
+    }
+  };
+  window.journalTest = {
+    history, buttons, visible, viewport, settle,
+    async scroll(top) {
+      history.scrollTop = top;
+      history.dispatchEvent(new Event('scroll'));
+      await settle();
+    },
+    async reveal(index) {
+      const scrubber = document.querySelector('#memory-scrubber');
+      scrubber.value = String(index);
+      scrubber.dispatchEvent(new Event('input', {bubbles: true}));
+      await settle();
+    },
+  };
+}"""
+
+
+@pytest.fixture
+def journal_page(offline_page):
+    page = offline_page
+    page.evaluate("document.querySelector('[data-layout=vertical]').click()")
+
+    def history(route):
+        kind = route.request.url.split("kind=", 1)[1].split("&", 1)[0]
+        route.fulfill(json={"events": events if kind == "all" else [], "next": None})
+
+    events = journal_events(2400)
+    page.route("**/api/demo?*", history)
+    page.evaluate("document.querySelector('[data-filter=all]').click()")
+    page.wait_for_function(
+        """() => document.querySelector('#history [data-event="journal-0"]')
+        && document.querySelector('#history').getAttribute('aria-busy') === 'false'""",
+        polling=50,
+    )
+    page.evaluate(JOURNAL_CONTROLS)
+    page.evaluate("journalTest.settle()")
+    return page
+
+
+def test_journal_mounts_bounded_rows_and_reveals_a_record_after_a_jump(journal_page):
+    page = journal_page
+    result = page.evaluate("""async () => {
+      const {history, buttons, visible, scroll, reveal} = journalTest;
+      const first = visible()[0]?.dataset.event;
+      const escapedName = buttons()[0]?.querySelector('.event-name')?.textContent;
+      const escapedMarkup = !history.querySelector('img');
+      const initialExtent = history.scrollHeight;
+      const initialCount = buttons().length;
+      const initialHeadings = history.querySelectorAll('.date-group').length;
+
+      await scroll(initialExtent / 2);
+      const middle = visible().map(button => Number(button.dataset.event.split('-')[1]));
+      const middleCount = buttons().length;
+      const oldRemoved = !history.querySelector('[data-event=journal-0]');
+
+      await scroll(history.scrollHeight);
+      const last = visible().at(-1)?.dataset.event;
+      const endCount = buttons().length;
+
+      await reveal(601);
+      const selected = visible().find(button => button.dataset.event === 'journal-601');
+      const pressed = selected?.getAttribute('aria-pressed');
+      const ordinal = selected?.closest('article')?.getAttribute('aria-label');
+      const nearDate = history.querySelectorAll('.date-group').length;
+
+      await scroll(0);
+      const restored = visible()[0]?.dataset.event;
+      return {first, escapedName, escapedMarkup, initialExtent, initialCount, initialHeadings,
+        middle, middleCount, oldRemoved, last, endCount, pressed, ordinal, nearDate,
+        restored, unmountedSelection: !history.querySelector('[aria-pressed=true][data-event]')};
+    }""")
+    assert result["first"] == result["restored"] == "journal-0"
+    assert result["escapedName"] == 'Name <img src=x onerror="bad()">'
+    assert result["escapedMarkup"]
+    assert result["initialExtent"] > 200_000
+    assert max(result[key] for key in ("initialCount", "middleCount", "endCount")) < 35
+    assert result["initialHeadings"] > 0 and result["nearDate"] > 0
+    assert result["middle"] and all(1000 < index < 1400 for index in result["middle"])
+    assert result["oldRemoved"] and result["last"] == "journal-2399"
+    assert result["pressed"] == "true" and result["ordinal"] == "Event 602 of 2400 loaded"
+    assert result["unmountedSelection"]
+    page.evaluate("journalTest.reveal(601)")
+    assert (
+        page.locator('#history [data-event="journal-601"]').get_attribute("aria-pressed") == "true"
+    )
+
+
+def test_journal_preserves_keyboard_focus_across_window_boundaries(journal_page):
+    page = journal_page
+    page.evaluate("""async () => {
+      await journalTest.scroll(0);
+      window.journalFocused = journalTest.buttons().at(-1);
+      journalFocused.focus({preventScroll: true});
+    }""")
+    original = page.evaluate("Number(journalFocused.dataset.event.split('-')[1])")
+    page.evaluate("journalTest.scroll(journalTest.history.scrollHeight * 0.65)")
+    assert page.evaluate("journalFocused.isConnected && document.activeElement === journalFocused")
+    assert page.evaluate("journalTest.buttons().length") < 35
+    page.keyboard.press("Tab")
+    assert page.evaluate("document.activeElement.dataset.event") == f"journal-{original + 1}"
+    page.keyboard.press("Shift+Tab")
+    assert page.evaluate("document.activeElement.dataset.event") == f"journal-{original}"
+    page.keyboard.press("Enter")
+    assert page.locator("#detail-dialog").evaluate("dialog => dialog.open")
+    assert (
+        page.locator(f'#history [data-event="journal-{original}"]').get_attribute("aria-pressed")
+        == "true"
+    )
+
+
+def test_journal_bounds_group_headers_and_reveals_a_collapsed_group(journal_page):
+    page = journal_page
+    page.locator("#lens-trigger").click()
+    page.get_by_role("menuitemradio", name="Activity", exact=True).click()
+    page.wait_for_function(
+        """() => document.querySelector('#history details[data-group]')
+        && document.querySelector('#history').getAttribute('aria-busy') === 'false'""",
+        polling=50,
+    )
+    page.evaluate("journalTest.scroll(0)")
+    summary = page.locator('#history details[data-group="follow.follow"] summary')
+    assert "1800 events" in summary.inner_text()
+    assert page.locator("#history .event-button").count() < 35
+    page.evaluate("journalTest.scroll(journalTest.history.scrollHeight * 0.4)")
+    assert (
+        abs(
+            summary.evaluate("node => node.getBoundingClientRect().top")
+            - page.evaluate(
+                "journalTest.viewport().top + parseFloat(getComputedStyle(journalTest.history).paddingTop)"
+            )
+        )
+        <= 1
+    )
+    summary.press("Space")
+    page.wait_for_function(
+        """() => document.activeElement.matches('summary')
+        && !document.activeElement.parentElement.open
+        && document.activeElement.parentElement.dataset.group === 'follow.follow'""",
+        polling=50,
+    )
+    assert page.locator('#history details[data-group="follow.follow"] .event-button').count() == 0
+    page.evaluate("journalTest.reveal(900)")
+    assert page.locator('#history details[data-group="follow.follow"]').evaluate(
+        "node => node.open"
+    )
+    assert (
+        page.locator('#history [data-event="journal-900"]').get_attribute("aria-pressed") == "true"
+    )
+    assert page.evaluate("""() => {
+      const row = document.querySelector('[data-event=journal-900]').getBoundingClientRect();
+      const summary = document.querySelector('#history details[data-group="follow.follow"] summary');
+      return row.top >= summary.getBoundingClientRect().bottom - 1
+        && row.bottom <= journalTest.viewport().bottom + 1;
+    }""")
+
+    # Enable a dynamic lens using the same preference response shape as the app.
+    groups = page.evaluate("fetch('/api/status').then(response => response.json())")[
+        "audience_groups"
+    ]
+    for group in groups:
+        if group["key"] == "profile-location":
+            group["enabled"] = True
+    page.route(
+        "**/api/audience-groups", lambda route: route.fulfill(json={"audience_groups": groups})
+    )
+    page.evaluate("""() => {
+      const input = document.querySelector('#group-profile-location');
+      input.checked = true;
+      input.dispatchEvent(new Event('change'));
+    }""")
+    page.wait_for_function(
+        """() => document.querySelector('#audience-lens').textContent.includes('Profile location')
+        && document.querySelector('#history').getAttribute('aria-busy') === 'false'""",
+        polling=50,
+    )
+    page.locator("#lens-trigger").click()
+    page.get_by_role("menuitemradio", name="Profile location", exact=True).click()
+    page.wait_for_function(
+        """() => document.querySelector('#history details[data-group^=city-]')
+        && document.querySelector('#history').getAttribute('aria-busy') === 'false'""",
+        polling=50,
+    )
+    page.evaluate("journalTest.scroll(0)")
+    assert page.locator("#history details[data-group]").count() < 20
+    first = page.locator("#history details[data-group]").first
+    assert first.get_attribute("data-group") == "city-000"
+    assert '<img src=x onerror="bad()">' in first.locator("summary").inner_text()
+    assert page.locator("#history img").count() == 0
+    page.evaluate("journalTest.scroll(journalTest.history.scrollHeight)")
+    assert page.locator("#history details[data-group]").count() < 20
+    assert (
+        page.locator("#history details[data-group]").last.get_attribute("data-group") == "unknown"
+    )
+    assert page.locator('#history [data-event="journal-2399"]').count() == 1
+
+
+def test_journal_height_correction_preserves_the_visible_anchor(journal_page):
+    page = journal_page
+    page.set_viewport_size({"width": 390, "height": 844})
+    page.evaluate("journalTest.scroll(journalTest.history.scrollHeight * 0.5)")
+    result = page.evaluate("""async () => {
+      const {buttons, visible, history, viewport, settle} = journalTest;
+      const rect = node => node.getBoundingClientRect();
+      const before = visible()[0];
+      const top = rect(before).top;
+      const above = buttons().findLast(button => rect(button).bottom <= viewport().top);
+      const oldHeight = rect(above).height;
+      const scrollTop = history.scrollTop;
+      above.querySelector('.event-name').textContent = 'Wrapped name '.repeat(65);
+      await settle();
+      return {same: visible()[0]?.dataset.event === before.dataset.event,
+        growth: rect(above).height - oldHeight, scrollDelta: history.scrollTop - scrollTop,
+        offsetDelta: rect(before).top - top};
+    }""")
+    assert result["growth"] > 100, result
+    assert result["same"] and abs(result["offsetDelta"]) <= 2, result
+    assert abs(result["growth"] - result["scrollDelta"]) <= 2, result
+
+
+def test_journal_route_layout_and_empty_history_cancel_pending_work(journal_page):
+    page = journal_page
+    result = page.evaluate("""async () => {
+      const {history, scroll} = journalTest;
+      await scroll(history.scrollHeight * 0.4);
+      const transitions = [];
+      for (const selector of ['[data-nav=profile]', '[data-layout=horizontal]', '[data-filter=lost]']) {
+        const old = history.querySelector('.journal-window');
+        const observer = new MutationObserver(() => {});
+        observer.observe(old, {attributes: true, childList: true, subtree: true});
+        history.scrollTop += 190;
+        history.dispatchEvent(new Event('scroll'));
+        const queued = journalFrameCount();
+        document.querySelector(selector).click();
+        stepFrames();
+        transitions.push({queued, pending: journalFrameCount(), detached: !old.isConnected,
+          writes: observer.takeRecords().length});
+        observer.disconnect();
+        if (selector === '[data-nav=profile]') document.querySelector('[data-nav=timeline]').click();
+        if (selector === '[data-layout=horizontal]') document.querySelector('[data-layout=vertical]').click();
+        if (selector !== '[data-filter=lost]') await journalTest.settle();
+      }
+      return transitions;
+    }""")
+    assert result == [{"queued": 1, "pending": 0, "detached": True, "writes": 0}] * 3
+    page.wait_for_function(
+        """() => document.querySelector('#history .empty-state')
+        && document.querySelector('#history').getAttribute('aria-busy') === 'false'""",
+        polling=50,
+    )
+    page.evaluate("document.querySelector('[data-filter=all]').click()")
+    page.wait_for_selector("#history .event-button")
+    assert 0 < page.locator("#history .event-button").count() < 35
+
+
+MANUAL_POLL = """(() => {
+  const nativeTimeout = window.setTimeout;
+  window.setTimeout = (callback, delay, ...args) => {
+    if (callback?.name === 'poll' && delay === 10000) {
+      window.runTimelinePoll = callback;
+      return 0;
+    }
+    return nativeTimeout(callback, delay, ...args);
+  };
+})()"""
+
+
+def test_journal_live_history_keeps_the_anchor_and_offscreen_focus(offline_page):
+    page = offline_page
+    records = journal_events(850)
+    first_arrival = datetime.fromisoformat(records[0]["received_at"])
+    inserted = [
+        {
+            **records[0],
+            "event_id": f"new-{index}",
+            "sequence": 851 + index,
+            "received_at": (first_arrival + timedelta(seconds=index + 1)).isoformat(),
+        }
+        for index in range(175)
+    ]
+    revision = "850:0::"
+    requests = []
+
+    def history(route):
+        params = {
+            key: value[0] for key, value in parse_qs(urlsplit(route.request.url).query).items()
+        }
+        requests.append(params)
+        before = params.get("before", "0")
+        after = params.get("after_revision")
+        if after:
+            assert int(after.split(":")[0]) == 850
+            candidates = inserted[::-1]
+            prefix = "delta-"
+        else:
+            candidates = (
+                records if revision == "850:0::" or before != "0" else inserted[::-1] + records
+            )
+            prefix = "older-"
+        limit = int(params.get("limit", 25))
+        offset = 0 if before == "0" else int(before.removeprefix(prefix))
+        end = offset + limit
+        payload = {
+            "events": candidates[offset:end],
+            "next": f"{prefix}{end}" if end < len(candidates) else None,
+        }
+        if not offset:
+            payload["aggregate"] = {
+                "total_events": int(revision.split(":")[0]),
+                "distinct_actors": 31,
+                "kinds": {},
+                "groups": [],
+                "scope": {},
+                "revision": revision,
+            }
+        route.fulfill(json=payload)
+
+    def status(route):
+        response = route.fetch()
+        payload = response.json()
+        payload["account"] = {"id": "demo", "name": "Offline fixture"}
+        payload["timeline_revision"] = revision
+        route.fulfill(response=response, json=payload)
+
+    page.route("**/api/timeline?*", history)
+    page.route("**/api/status", status)
+    page.add_init_script(MANUAL_POLL)
+    page.goto(urljoin(page.url, "/"), wait_until="networkidle")
+    assert page.evaluate("typeof window.runTimelinePoll") == "function", page.locator(
+        "#notice"
+    ).text_content()
+    page.evaluate("window.enableFrames(); document.querySelector('[data-layout=vertical]').click()")
+    page.evaluate(JOURNAL_CONTROLS)
+    page.evaluate("""async () => {
+      await journalTest.scroll(0);
+      journalTest.buttons()[0].focus({preventScroll: true});
+      await journalTest.scroll(journalTest.history.scrollHeight * 0.45);
+    }""")
+    assert page.evaluate("document.activeElement.dataset.event") == "journal-0"
+    anchor = page.evaluate("""() => {
+      const row = journalTest.visible()[0];
+      return {identity: row.dataset.event, offset: row.getBoundingClientRect().top};
+    }""")
+
+    older_page = f"older-{int(requests[0].get('limit', 25))}"
+    assert [request.get("before", "0") for request in requests] == ["0"]
+    revision = "1025:0::"
+    result = page.evaluate("""async () => {
+      await runTimelinePoll();
+      await journalTest.settle();
+      const row = journalTest.visible()[0];
+      return {identity: row?.dataset.event, offset: row?.getBoundingClientRect().top,
+        focus: document.activeElement.dataset.event, extent: journalTest.history.scrollHeight,
+        count: journalTest.buttons().length};
+    }""")
+    assert result["identity"] == anchor["identity"]
+    assert abs(result["offset"] - anchor["offset"]) <= 2
+    assert result["focus"] == "journal-0"
+    assert result["count"] < 35
+    delta = [request for request in requests if request.get("after_revision")]
+    assert len(delta) == 3
+    assert all(
+        request.get("before", "0") == "0" or request["before"].startswith("delta-")
+        for request in delta
+    )
+    assert "Catching up on new activity" in page.locator("#history-page-status").text_content()
+    page.evaluate("journalTest.scroll(journalTest.history.scrollHeight)")
+    page.wait_for_function(
+        "document.querySelector('#history').getAttribute('aria-busy') === 'false'", polling=20
+    )
+    assert requests[-1].get("before") == older_page and not requests[-1].get("after_revision")
+    assert "Catching up on new activity" in page.locator("#history-page-status").text_content()
+    pending_polls = 0
+    while "Catching up on new activity" in page.locator("#history-page-status").text_content():
+        pending_polls += 1
+        assert pending_polls <= 3
+        before = len(requests)
+        page.evaluate("runTimelinePoll()")
+        assert 0 < len(requests) - before <= 3
+        assert all(request["before"].startswith("delta-") for request in requests[before:])
+    assert "Catching up on new activity" not in page.locator("#history-page-status").text_content()
+    assert page.evaluate("Number(document.querySelector('#memory-scrubber').max) + 1") == (
+        int(older_page.removeprefix("older-")) * 2 + len(inserted)
+    )
+
+
+INSERT_BROWSER_EVENT = """INSERT INTO events
+    (event_id,kind,account_id,actor_id,received_at) VALUES (?,?,?,?,?)"""
+
+
+@pytest.fixture
+def encounter_fixture(offline_browser_app):
+    _, _, database = offline_browser_app
+    account = "9001"
+    anchor = datetime.now(UTC).replace(microsecond=0) - timedelta(minutes=5)
+    events = [
+        (
+            f"gain-{index}",
+            "follow.follow",
+            account,
+            str(2000 + index),
+            (anchor - timedelta(minutes=index)).isoformat(),
+        )
+        for index in range(56)
+    ]
+    with sqlite3.connect(database) as db:
+        settings = dict(
+            db.execute("SELECT key,value FROM settings WHERE key IN ('account','audience_groups')")
+        )
+        db.executemany(
+            "INSERT OR REPLACE INTO settings (key,value) VALUES (?,?)",
+            [
+                ("account", json.dumps({"id": account})),
+                ("audience_groups", json.dumps({"previous-encounters": True})),
+            ],
+        )
+        db.executemany(INSERT_BROWSER_EVENT, events)
+        affected = dict(
+            db.execute(
+                "SELECT event_id,sequence FROM events WHERE account_id=? AND event_id IN ('gain-0','gain-55')",
+                (account,),
+            )
+        )
+    try:
+        yield database, events, affected
+    finally:
+        with sqlite3.connect(database) as db:
+            db.execute("DELETE FROM events WHERE account_id=?", (account,))
+            db.execute("DELETE FROM settings WHERE key IN ('account','audience_groups')")
+            db.executemany("INSERT INTO settings (key,value) VALUES (?,?)", settings.items())
+
+
+def test_real_live_encounters_reclassify_filtered_history_without_resetting_cursor(
+    encounter_fixture, offline_page
+):
+    page = offline_page
+    database, events, affected = encounter_fixture
+    page.add_init_script(MANUAL_POLL)
+    page.goto(urljoin(page.url, "/"), wait_until="networkidle")
+    page.evaluate("document.querySelector('[data-filter=gained]').click()")
+    page.wait_for_function(
+        "document.querySelector('#history').getAttribute('aria-busy') === 'false'"
+    )
+    page.locator("#lens-trigger").click()
+    with page.expect_response(lambda response: "lens=previous-encounters" in response.url) as first:
+        page.get_by_role("menuitemradio", name="Previous encounters", exact=True).click()
+    initial = first.value.json()
+    older = initial["next"]
+    assert len(initial["events"]) == 50 and older
+    assert initial["aggregate"]["groups"][0]["key"] == "first-appearance"
+    assert initial["aggregate"]["total_events"] == 56
+    page.wait_for_function(
+        "document.querySelector('#history').getAttribute('aria-busy') === 'false'"
+    )
+    selected = page.locator('#history [data-actor][aria-pressed="true"]')
+    selection = selected.get_attribute("data-event")
+    assert selection and selection not in {
+        f"timeline:event:{identity}" for identity in affected.values()
+    }
+
+    with sqlite3.connect(database) as db:
+        db.executemany(
+            INSERT_BROWSER_EVENT,
+            [
+                (
+                    f"unfollow-{index}",
+                    "follow.unfollow",
+                    events[index][2],
+                    events[index][3],
+                    (datetime.fromisoformat(events[index][4]) - timedelta(seconds=30)).isoformat(),
+                )
+                for index in (0, 55)
+            ],
+        )
+    with page.expect_response(lambda response: "after_revision=" in response.url) as live:
+        page.evaluate("runTimelinePoll()")
+    delta = live.value.json()
+    assert delta["aggregate"]["total_events"] == 56
+    assert {group["key"]: group["event_count"] for group in delta["aggregate"]["groups"]} == {
+        "first-appearance": 54,
+        "followed-again": 2,
+    }
+    assert page.locator("#history .constellation-star").count() == 50
+    assert selected.get_attribute("data-event") == selection
+    page.evaluate("""() => {
+      const zoom = document.querySelector('#scene-zoom');
+      zoom.value = '0';
+      zoom.dispatchEvent(new Event('input', {bubbles: true}));
+    }""")
+    followed_again = page.locator('#history [data-group="followed-again"]')
+    assert followed_again.locator(".cluster-count").inner_text() == "2"
+    assert "1 action loaded" in followed_again.get_attribute("title")
+    older_event = page.locator(f'#history [data-event="timeline:event:{affected["gain-55"]}"]')
+    assert older_event.count() == 0
+
+    with page.expect_response(lambda response: "/api/timeline?" in response.url) as next_page:
+        page.locator("#history-more").press("Enter")
+    continuation = next_page.value
+    assert continuation.ok
+    query = parse_qs(urlsplit(continuation.url).query)
+    assert query["before"] == [older]
+    assert query["local_only"] == ["true"]
+    assert query["encounter_revision"] == [delta["aggregate"]["revision"]]
+    page.wait_for_function(
+        "document.querySelectorAll('#history .constellation-star').length === 56"
+    )
+    assert selected.get_attribute("data-event") == selection
+    assert "loaded" not in followed_again.get_attribute("title")
+    assert older_event.count() == 1
+    assert page.locator("#history-more").is_hidden()
diff --git a/tests/test_timeline.py b/tests/test_timeline.py
index 8a1a08a..f734842 100644
--- a/tests/test_timeline.py
+++ b/tests/test_timeline.py
@@ -156,11 +156,13 @@ async def test_grouped_pages_include_older_audience_changes_without_x_reads(inst
         "/api/timeline", params={"local_only": True, "limit": 50, "since": "2026-11-06T00:00:00Z"}
     )
     assert {row["kind"] for row in recent.json()["events"]} == {"interaction.replies"}
-    assert (
+    empty = (
         await browser.get(
             "/api/timeline", params={"local_only": True, "since": "2026-11-07T00:00:00Z"}
         )
-    ).json() == {"events": [], "next": None}
+    ).json()
+    assert (empty["events"], empty["next"]) == ([], None)
+    assert empty["aggregate"]["total_events"] == 0
     assert len(provider.calls) == calls
 
 
diff --git a/tests/test_timeline_aggregate.py b/tests/test_timeline_aggregate.py
new file mode 100644
index 0000000..e735d4b
--- /dev/null
+++ b/tests/test_timeline_aggregate.py
@@ -0,0 +1,510 @@
+import asyncio
+import random
+from collections import Counter
+from datetime import datetime, timedelta
+from unittest.mock import AsyncMock
+
+import pytest
+from test_interactions import envelope, post
+from test_interactions import instance as shared_instance
+
+from xflog import audience_groups
+from xflog.history import demo as demo_module
+from xflog.history import timeline as timeline_module
+from xflog.history.profiles import remember_profile
+from xflog.history.timeline import Timeline
+from xflog.history.timeline_cursor import InvalidTimelineRequest, decode_cursor
+from xflog.tracking.events import Event
+
+instance = shared_instance
+ENABLED = dict.fromkeys(audience_groups.MODULES, True)
+STAMP = "2026-11-05T12:00:00+00:00"
+
+
+def record(
+    identity, kind="follow.follow", actor="222", received=STAMP, *, account="111", groups=None
+):
+    return Event(identity, kind, account, actor, None, None, None, received, groups or {})
+
+
+async def page(browser, **params):
+    response = await browser.get("/api/timeline", params={"local_only": True, **params})
+    assert response.status_code == 200, response.text
+    return response.json()
+
+
+async def mixed_history(app):
+    store = app.state.store
+    selection = {"interactions": {"replies": True}}
+    await store.save_setting("selection", selection)
+    await store.save_setting("audience_groups", ENABLED)
+    for index, (kind, actor, stamp, fields) in enumerate(
+        [
+            ("follow.unfollow", "222", "2026-11-04T11:00:00+00:00", {}),
+            ("follow.follow", "222", STAMP, {"location": "NYC", "verified": True}),
+            ("follow.follow", "444", STAMP, {"location": "new york city", "verified": False}),
+            (
+                "follow.follow",
+                "555",
+                STAMP,
+                {"location": "London", "created_at": "2025-01-01T00:00:00Z"},
+            ),
+            (
+                "follow.unfollow",
+                "555",
+                STAMP,
+                {"location": "LONDON", "public_metrics": {"followers_count": 123}},
+            ),
+            ("subscriptions.subscribe", "222", STAMP, {"location": "remote"}),
+            ("subscriptions.unsubscribe", "444", STAMP, {"location": "N/A"}),
+        ]
+    ):
+        await store.insert(
+            record(
+                f"mixed-{index}",
+                kind,
+                actor,
+                stamp,
+                groups=audience_groups.capture(fields, ENABLED),
+            )
+        )
+    for index, actor in enumerate(("222", "333", "333")):
+        await app.state.interactions.ingest(
+            envelope(event_uuid=f"reply-{index}", payload=post(str(990 + index), actor)), selection
+        )
+    await store.db.execute("UPDATE interactions SET received_at=?", (STAMP,))
+    await store.db.execute(
+        "UPDATE interactions SET kind='mentions' WHERE sequence=(SELECT MIN(sequence) FROM interactions)"
+    )
+    await store.db.commit()
+    await store.insert(record("foreign", account="333"))
+
+
+def group_oracle(events, lens):
+    module = audience_groups.MODULES.get(lens)
+    if not module:
+        return {}
+    fixed = {bucket.key: (bucket.label, bucket.tone) for bucket in module.buckets}
+    buckets = {}
+    for event in events:
+        key = event["audience_groups"][lens]
+        descriptor = event["audience_group_buckets"].get(lens)
+        label, tone = (descriptor["label"], descriptor["tone"]) if descriptor else fixed[key]
+        count, actors, first_label, first_tone = buckets.get(key, (0, set(), label, tone))
+        actors.add(event["actor_id"])
+        buckets[key] = (count + 1, actors, first_label, first_tone)
+    return {
+        key: (count, len(actors), label, tone)
+        for key, (count, actors, label, tone) in buckets.items()
+    }
+
+
+@pytest.mark.parametrize(
+    "subject,kind,since",
+    [
+        ("followers", "all", ""),
+        ("followers", "gained", ""),
+        ("followers", "lost", "2026-11-05T00:00:00Z"),
+        ("followers", "all", "2026-11-06T00:00:00Z"),
+        ("subscriptions", "all", ""),
+        ("subscriptions", "lost", ""),
+    ],
+)
+async def test_aggregate_matches_exhaustive_timeline_for_every_lens(instance, subject, kind, since):
+    app, browser, provider = instance
+    await mixed_history(app)
+    calls = len(provider.calls)
+    for lens in (*audience_groups.MODULES, "none"):
+        scope = {"subject": subject, "kind": kind, "since": since, "lens": lens, "limit": 2}
+        first = await page(browser, **scope)
+        rows, before = first["events"], first["next"]
+        while before:
+            continuation = await page(browser, **scope, before=before)
+            assert "aggregate" not in continuation
+            rows += continuation["events"]
+            before = continuation["next"]
+        assert len({event["event_id"] for event in rows}) == len(rows)
+        assert not any(event["kind"] == "interaction.mentions" for event in rows)
+        aggregate = first["aggregate"]
+        assert aggregate["total_events"] == len(rows)
+        assert aggregate["oldest_received_at"] == min(
+            (event["received_at"] for event in rows), default=None
+        )
+        assert aggregate["distinct_actors"] == len({event["actor_id"] for event in rows})
+        assert aggregate["kinds"] == Counter(event["kind"] for event in rows)
+        assert {
+            group["key"]: (
+                group["event_count"],
+                group["distinct_actors"],
+                group["label"],
+                group["tone"],
+            )
+            for group in aggregate["groups"]
+        } == group_oracle(rows, lens)
+        assert aggregate["revision"] == await Timeline(app.state.store).revision("111")
+    assert len(provider.calls) == calls
+
+
+async def test_snapshot_survives_backdated_and_tied_inserts_and_delta_fetches_them(instance):
+    app, browser, _ = instance
+    await mixed_history(app)
+    old = await page(browser, limit=1, lens="previous-encounters")
+    before = old["next"]
+    await app.state.store.insert(record("tie-new"))
+    await app.state.store.insert(record("backdated-new", received="2026-11-01T10:00:00+00:00"))
+    await app.state.interactions.ingest(
+        envelope(event_uuid="inserted-new"), {"interactions": {"replies": True}}
+    )
+    await app.state.store.db.execute(
+        "UPDATE interactions SET received_at=? WHERE event_id='inserted-new'", (STAMP,)
+    )
+    await app.state.store.db.commit()
+
+    old_events = list(old["events"])
+    while before:
+        older = await page(browser, limit=2, lens="previous-encounters", before=before)
+        old_events += older["events"]
+        before = older["next"]
+    assert len(old_events) == old["aggregate"]["total_events"]
+    assert len({event["event_id"] for event in old_events}) == len(old_events)
+    assert (
+        next(event for event in old_events if event["received_at"].startswith("2026-11-04"))[
+            "audience_groups"
+        ]["previous-encounters"]
+        == "first-appearance"
+    )
+
+    query = {
+        "after_revision": old["aggregate"]["revision"],
+        "lens": "previous-encounters",
+        "limit": 2,
+    }
+    delta = await page(browser, **query, selected=old_events[-1]["event_id"])
+    result, merged = delta, []
+    while True:
+        merged += result["events"]
+        if not result["next"]:
+            break
+        result = await page(browser, **query, before=result["next"])
+    new_rows = [event for event in merged if not event.get("encounter_correction")]
+    corrected = [event for event in merged if event.get("encounter_correction")]
+    assert {event["event_id"] for event in new_rows}.isdisjoint(
+        event["event_id"] for event in old_events
+    )
+    assert [event["kind"] for event in new_rows] == [
+        "follow.follow",
+        "interaction.replies",
+        "follow.follow",
+    ]
+    assert [event["event_id"] for event in corrected] == [old_events[-1]["event_id"]]
+    assert delta["aggregate"]["scope"] == old["aggregate"]["scope"]
+    assert delta["aggregate"]["total_events"] == len(old_events) + 3
+    assert delta["selected_event"]["event_id"] == old_events[-1]["event_id"]
+    assert "encounter_correction" not in delta["selected_event"]
+    assert delta["selected_event"]["audience_groups"]["previous-encounters"] == "seen-before"
+
+
+async def test_backdated_filtered_activity_reclassifies_old_pages_without_adding_rows(
+    instance, monkeypatch
+):
+    app, browser, _ = instance
+    store = app.state.store
+    await store.db.execute("DELETE FROM events")
+    await store.db.commit()
+    await store.save_setting("selection", {"profile_names": True})
+    await store.save_setting("audience_groups", {"previous-encounters": True})
+    await store.insert(record("earlier-follow", actor="333", received="2026-11-01T10:00:00+00:00"))
+    await store.insert(record("return", actor="333", received="2026-11-06T10:00:00+00:00"))
+    await store.insert(record("unrelated", actor="444", received="2026-11-07T10:00:00+00:00"))
+    scope = {"lens": "previous-encounters", "kind": "gained", "limit": 1, "since": STAMP}
+    first = await page(browser, **scope)
+    await store.insert(
+        record("backdated-unfollow", "follow.unfollow", "333", received="2026-11-04T10:00:00+00:00")
+    )
+
+    lookup = AsyncMock(return_value=[])
+    monkeypatch.setattr(app.state.client, "lookup_users", lookup)
+    response = await browser.get(
+        "/api/timeline", params={**scope, "after_revision": first["aggregate"]["revision"]}
+    )
+    assert response.status_code == 200, response.text
+    delta = response.json()
+    assert delta["next"] is None
+    (corrected,) = delta["events"]
+    assert corrected["encounter_correction"] is True
+    assert corrected["actor_id"] == "333"
+    assert corrected["audience_groups"]["previous-encounters"] == "followed-again"
+    assert delta["aggregate"]["total_events"] == first["aggregate"]["total_events"]
+    lookup.assert_not_awaited()
+
+    original = await page(browser, **scope, before=first["next"])
+    rebound = await page(
+        browser, **scope, before=first["next"], encounter_revision=delta["aggregate"]["revision"]
+    )
+    assert [event["event_id"] for event in original["events"]] == [corrected["event_id"]]
+    assert rebound["events"][0]["event_id"] == corrected["event_id"]
+    assert original["events"][0]["audience_groups"]["previous-encounters"] == "seen-before"
+    assert rebound["events"][0]["audience_groups"]["previous-encounters"] == "followed-again"
+    assert "encounter_correction" not in rebound["events"][0]
+    assert original["next"] == rebound["next"] is None
+    for invalid in ("0:0", "900000:0"):
+        response = await browser.get(
+            "/api/timeline",
+            params={**scope, "before": first["next"], "encounter_revision": invalid},
+        )
+        assert response.status_code == 422
+
+
+async def test_encounter_delta_keyset_is_bounded_across_interleaved_corrections(instance):
+    app, browser, _ = instance
+    store = app.state.store
+    await store.save_setting("audience_groups", {"previous-encounters": True})
+    for index in range(57):
+        await store.insert(record(f"follow-{index}", actor=str(1000 + index)))
+    scope = {"lens": "previous-encounters", "kind": "gained", "limit": 50, "since": STAMP}
+    initial = await page(browser, **scope)
+    for index in range(57):
+        await store.insert(
+            record(
+                f"old-unfollow-{index}",
+                "follow.unfollow",
+                str(1000 + index),
+                "2026-11-04T10:00:00+00:00",
+            )
+        )
+    await store.insert(record("newest", actor="777", received="2026-11-07T10:00:00+00:00"))
+    params = {**scope, "after_revision": initial["aggregate"]["revision"]}
+    first = await page(browser, **params)
+    await store.insert(
+        record("arrived-mid-delta", actor="778", received="2026-11-06T10:00:00+00:00")
+    )
+    second = await page(browser, **params, before=first["next"])
+    events = first["events"] + second["events"]
+    assert [len(first["events"]), len(second["events"])] == [50, 8]
+    assert second["next"] is None
+    assert len({event["event_id"] for event in events}) == 58
+    assert [event["actor_id"] for event in events if not event.get("encounter_correction")] == [
+        "777"
+    ]
+    assert all(
+        event["audience_groups"]["previous-encounters"] == "followed-again" for event in events[1:]
+    )
+
+
+async def test_previous_follow_uses_receipt_order_before_sequence(instance):
+    app, browser, _ = instance
+    await app.state.store.save_setting("audience_groups", ENABLED)
+    for identity, kind, receipt in (
+        ("leave", "follow.unfollow", "2026-11-04T10:01:00+00:00"),
+        ("return", "follow.follow", "2026-11-04T10:02:00+00:00"),
+        ("late-old-follow", "follow.follow", "2026-11-04T10:00:00+00:00"),
+    ):
+        await app.state.store.insert(record(identity, kind=kind, actor="333", received=receipt))
+    result = await page(browser, kind="gained", lens="previous-encounters", limit=50)
+    returned = next(
+        event for event in result["events"] if event["received_at"] == "2026-11-04T10:02:00+00:00"
+    )
+    assert returned["audience_groups"]["previous-encounters"] == "followed-again"
+    groups = {item["key"]: item for item in result["aggregate"]["groups"]}
+    assert groups["followed-again"]["event_count"] == 1
+    assert groups["followed-again"]["distinct_actors"] == 1
+
+
+async def test_mixed_source_keyset_and_encounter_window_match_chronological_reference(instance):
+    app, browser, _ = instance
+    store = app.state.store
+    await store.db.execute("DELETE FROM events")
+    await store.db.commit()
+    await store.save_setting("selection", {"interactions": {"replies": True}})
+    await store.save_setting("audience_groups", ENABLED)
+    rng = random.Random(25)
+    times = (
+        "2026-11-05T11:59:59+00:00",
+        STAMP,
+        "2026-11-05T12:00:00.100000+00:00",
+        "2026-11-05T12:00:00.200000+00:00",
+        "2026-11-05T12:00:01+00:00",
+    )
+    kinds = ("follow.follow", "follow.unfollow", "subscriptions.subscribe", "replies", "mentions")
+    raw = []
+    for index in range(65):
+        kind, stamp, actor = rng.choice(kinds), rng.choice(times), str(rng.randrange(222, 229))
+        source = int("." in kind)
+        if source:
+            cursor = await store.db.execute(
+                """INSERT INTO events(event_id,kind,account_id,actor_id,received_at)
+                   VALUES (?,?,'111',?,?)""",
+                (f"reference-{index}", kind, actor, stamp),
+            )
+        else:
+            cursor = await store.db.execute(
+                """INSERT INTO interactions(account_id,event_id,person_id,kind,post_id,provider_at,received_at)
+                   VALUES ('111',?,?,?,'123',?,?)""",
+                (f"reference-{index}", actor, kind, stamp, stamp),
+            )
+        position = cursor.lastrowid
+        await cursor.close()
+        raw.append((stamp, source, position, actor, kind))
+    await store.db.commit()
+
+    seen, follow, expected = set(), {}, []
+    for stamp, source, position, actor, kind in sorted(raw):
+        bucket = "first-appearance"
+        if actor in seen:
+            bucket = (
+                "followed-again"
+                if kind == "follow.follow" and follow.get(actor) == "follow.unfollow"
+                else "seen-before"
+            )
+        seen.add(actor)
+        if kind in {"follow.follow", "follow.unfollow"}:
+            follow[actor] = kind
+        if stamp >= STAMP and kind in {"follow.follow", "follow.unfollow", "replies"}:
+            expected.append((f"timeline:{'event' if source else 'interaction'}:{position}", bucket))
+
+    params = {"lens": "previous-encounters", "since": STAMP, "limit": 3}
+    result = await page(browser, **params)
+    counts = {item["key"]: item["event_count"] for item in result["aggregate"]["groups"]}
+    actual = []
+    while True:
+        actual += [
+            (event["event_id"], event["audience_groups"]["previous-encounters"])
+            for event in result["events"]
+        ]
+        if not result["next"]:
+            break
+        result = await page(browser, **params, before=result["next"])
+    assert actual == list(reversed(expected))
+    assert counts == Counter(bucket for _, bucket in expected)
+
+
+async def test_continuation_cannot_trigger_opt_in_profile_lookup(instance, monkeypatch):
+    app, browser, _ = instance
+    await app.state.store.save_setting("selection", {"profile_names": True})
+    await app.state.store.insert(
+        record("newest-missing", actor="555", received="2030-01-01T00:00:00+00:00")
+    )
+    await app.state.store.insert(record("older-missing", actor="666"))
+    lookup = AsyncMock(return_value=[])
+    monkeypatch.setattr(app.state.client, "lookup_users", lookup)
+    result = (await browser.get("/api/timeline?limit=1")).json()
+    lookup.assert_awaited_once_with(["555"])
+    while result["next"]:
+        response = await browser.get("/api/timeline", params={"limit": 1, "before": result["next"]})
+        assert response.status_code == 200, response.text
+        result = response.json()
+    assert lookup.await_count == 1
+
+
+async def test_cursor_is_rejected_outside_query_scope(instance):
+    app, browser, _ = instance
+    await mixed_history(app)
+    before = (await page(browser, limit=1, lens="activity"))["next"]
+    for changes in (
+        {"kind": "gained"},
+        {"subject": "subscriptions"},
+        {"lens": "verification"},
+        {"since": "2026-11-04T00:00:00Z"},
+        {"after_revision": "0:0"},
+    ):
+        params = {"lens": "activity", "before": before, **changes}
+        assert (await browser.get("/api/timeline", params=params)).status_code == 422
+    with pytest.raises(InvalidTimelineRequest):
+        await Timeline(app.state.store).history("333", {"before": before, "lens": "activity"})
+    await app.state.store.save_setting("selection", {"interactions": {"replies": False}})
+    assert (
+        await browser.get("/api/timeline", params={"before": before, "lens": "activity"})
+    ).status_code == 422
+    await app.state.store.save_setting("selection", {"interactions": {"replies": True}})
+    await app.state.store.save_setting("account", {"id": "333"})
+    assert (
+        await browser.get("/api/timeline", params={"before": before, "lens": "activity"})
+    ).status_code == 422
+
+
+async def test_local_profile_update_revises_aggregate_and_refreshes_selected_without_draining(
+    instance,
+):
+    app, browser, provider = instance
+    await mixed_history(app)
+    first = await page(browser, limit=1)
+    selected = first["events"][0]["event_id"]
+    actor = first["events"][0]["actor_id"]
+    async with app.state.store.lock:
+        await remember_profile(
+            app.state.store.db, "111", {"id": actor, "name": "Updated", "handle": "updated"}
+        )
+        await app.state.store.db.commit()
+    calls = len(provider.calls)
+    newer = await page(
+        browser, limit=1, after_revision=first["aggregate"]["revision"], selected=selected
+    )
+    assert newer["events"] == []
+    assert newer["selected_event"]["name"] == "Updated"
+    assert newer["selected_event"]["handle"] == "updated"
+    assert newer["aggregate"]["revision"] != first["aggregate"]["revision"]
+    assert newer["aggregate"]["profile_revision"] != first["aggregate"]["profile_revision"]
+    assert newer["aggregate"]["total_events"] == first["aggregate"]["total_events"]
+    assert len(provider.calls) == calls
+
+
+async def test_page_and_aggregate_share_sqlite_snapshot_while_writer_commits(instance, monkeypatch):
+    app, browser, _ = instance
+    await mixed_history(app)
+    started, resume = asyncio.Event(), asyncio.Event()
+    aggregate_records = timeline_module.aggregate_records
+
+    async def delayed(*args):
+        started.set()
+        await resume.wait()
+        return await aggregate_records(*args)
+
+    monkeypatch.setattr(timeline_module, "aggregate_records", delayed)
+    task = asyncio.create_task(page(browser, limit=1))
+    try:
+        await asyncio.wait_for(started.wait(), timeout=2)
+        assert await asyncio.wait_for(
+            app.state.store.insert(record("concurrent-commit")), timeout=2
+        )
+    finally:
+        resume.set()
+        result = await asyncio.wait_for(task, timeout=2)
+    current = await page(browser, limit=1)
+    assert result["aggregate"]["total_events"] == current["aggregate"]["total_events"] - 1
+    assert (
+        decode_cursor(result["next"]).watermarks[0] < decode_cursor(current["next"]).watermarks[0]
+    )
+
+
+async def test_demo_cursor_keeps_same_synthetic_snapshot_and_aggregate(instance, monkeypatch):
+    _, browser, provider = instance
+    params = {"limit": 10, "lens": "activity"}
+    first = (await browser.get("/api/demo", params=params)).json()
+    original = datetime.fromisoformat(first["aggregate"]["revision"])
+
+    class Later(datetime):
+        @classmethod
+        def now(cls, tz):
+            return (original + timedelta(hours=2)).astimezone(tz)
+
+    monkeypatch.setattr(demo_module, "datetime", Later)
+    assert first["synthetic"] and len(first["events"]) == 10
+    assert first["aggregate"]["total_events"] > len(first["events"])
+    rows, before = first["events"], first["next"]
+    while before:
+        response = await browser.get("/api/demo", params={**params, "before": before})
+        assert response.status_code == 200, response.text
+        result = response.json()
+        rows += result["events"]
+        before = result["next"]
+    assert (
+        len(rows)
+        == len({event["event_id"] for event in rows})
+        == first["aggregate"]["total_events"]
+    )
+    assert rows[-1]["received_at"] == first["aggregate"]["oldest_received_at"]
+    assert (
+        await browser.get("/api/demo", params={**params, "kind": "lost", "before": first["next"]})
+    ).status_code == 422
+    assert (await browser.get("/api/timeline", params={"before": first["next"]})).status_code == 422
+    assert not provider.calls