@sentry/junior-dashboard 0.280.0 → 0.281.0

package/src/client/conversations/TranscriptRows.tsx

@@ -1,4 +1,10 @@
-import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import {
+  createContext,
+  useContext,
+  useState,
+  type ComponentPropsWithoutRef,
+  type ReactNode,
+} from "react";
 
 import { cn } from "../styles";
 import {
@@ -48,13 +54,39 @@ export function TranscriptUnreadMarker() {
   );
 }
 
+/**
+ * Open rows by key, for the rows of one transcript list. Rows far from the
+ * viewport unmount, so a row that opens again reads its state here.
+ */
+export const TranscriptOpenRows = createContext<Map<string, boolean> | null>(
+  null,
+);
+
+/**
+ * Hold whether a transcript row part is open. With a key, the state stays
+ * while the row unmounts outside the viewport.
+ */
+export function useTranscriptRowOpen(
+  key: string | undefined,
+): [boolean, (open: boolean) => void] {
+  const openRows = useContext(TranscriptOpenRows);
+  const [open, setOpenState] = useState(
+    () => (key !== undefined && openRows?.get(key)) || false,
+  );
+  const setOpen = (value: boolean) => {
+    setOpenState(value);
+    if (key !== undefined) openRows?.set(key, value);
+  };
+  return [open, setOpen];
+}
+
 /**
  * Lay out one transcript row at its real size.
  *
- * Rows do not use `content-visibility: auto`. A skipped row has an estimated
- * size, and it changes size when the reader scrolls near it. Above the
- * reader, each change needs a scroll correction while they scroll, and on
- * phones those corrections make the transcript jump.
+ * Rows do not use `content-visibility: auto`. The list mounts only the rows
+ * near the viewport, and a row that mounts above the reader can measure a
+ * different size than its estimate. The scroll owner corrects the scroll
+ * position for that, so keep estimates close and overscan large.
  */
 export function TranscriptRow(props: {
   /** Stable row id that holds the reader's place while layout changes. */

package/src/client/conversations/TranscriptView.tsx

@@ -52,6 +52,8 @@ export function Transcript(props: {
   /** The reader's own sends to show at the end until history has them. */
   pendingMessages?: readonly ConversationMailboxMessage[];
   responding?: boolean;
+  /** Keep the rows around this event seq mounted, so the page can show it. */
+  revealSeq?: number;
   search?: string;
   onSearchChange?(value: string): void;
   selectedEventSeq?: number;
@@ -182,6 +184,8 @@ export function Transcript(props: {
                 conversation={props.transcript}
                 pendingMessages={props.pendingMessages}
                 responding={props.responding ?? props.live ?? false}
+                revealSeq={props.revealSeq}
+                scrollAnchorKey={bottomPinning.scrollAnchorKey}
                 unread={props.unread}
               />
             </TranscriptJumpToLatestContext>

package/src/client/conversations/queries.ts

@@ -1,4 +1,5 @@
 import { useDeferredValue, useEffect, useMemo, useRef, useState } from "react";
+import * as z from "zod";
 import {
   type QueryClient,
   queryOptions,
@@ -22,13 +23,14 @@ import {
   conversationDetailReportSchema,
   conversationDetailWithMailboxReportSchema,
   conversationEventPageSchema,
-  conversationPendingMessagesReportSchema,
+  conversationUnchangedDetailWithMailboxSchema,
   forkConversationResponseSchema,
   steerConversationPendingMessagesResponseSchema,
   stopConversationTurnResponseSchema,
 } from "@sentry/junior/api/schema";
 
 import { REVIEW_ITEMS_QUERY_KEY } from "../review-desk/queries";
+import { readResponseJson } from "../sentry";
 import {
   DashboardApiError,
   del,
@@ -102,29 +104,6 @@ function isOpenPrefetch(snapshot: ConversationSnapshot | undefined) {
   );
 }
 
-/** Read the mailbox before history so acknowledged input is already committed. */
-async function readConversationSnapshot(
-  conversationId: string,
-  signal?: AbortSignal,
-  previous?: ConversationSnapshot,
-  unreadPage?: boolean,
-): Promise<ConversationSnapshot> {
-  // With no cached copy, the transcript waits for this read. The server reads
-  // both in the same order in one request, which saves a round trip. Polls
-  // read the mailbox apart, so the detail can still answer 304.
-  if (!previous) {
-    return readConversationData(conversationId, signal, undefined, {
-      mailbox: true,
-      unreadPage,
-    });
-  }
-  const mailbox = await readConversationPendingMessages(conversationId, signal);
-  const detail = await readConversationData(conversationId, signal, previous, {
-    unreadPage,
-  });
-  return { ...detail, mailbox };
-}
-
 const CONVERSATION_SIDE_READS = ["agents", "memories", "watches"] as const;
 
 /**
@@ -185,11 +164,13 @@ export function conversationDetailQueryOptions(
       const previous = client.getQueryData<ConversationSnapshot>(
         conversationDetailQueryKey(conversationId),
       );
-      const next = await readConversationSnapshot(
+      // The server reads the mailbox before history, so acknowledged input
+      // is in at least one of them.
+      const next = await readConversationData(
         conversationId!,
         signal,
         previous,
-        options?.unreadPage,
+        { mailbox: true, unreadPage: options?.unreadPage },
       );
       refreshSideReadsOnChange(client, conversationId!, previous, next);
       return next;
@@ -866,6 +847,10 @@ export async function readConversationData(
   const query = new URLSearchParams();
   if (options?.unreadPage) query.set("unreadPage", "true");
   if (options?.mailbox) query.set("mailbox", "true");
+  // A poll asks only for the events after the cached ones. The unread page
+  // needs the latest page, so a read that asks for it reads that page.
+  const after = options?.unreadPage ? undefined : previous?.appendCursor;
+  if (after) query.set("after", after);
   const search = query.size ? `?${query}` : "";
   const response = await readDashboardResponse(
     `/api/conversations/${encodeURIComponent(conversationId)}${search}`,
@@ -875,11 +860,69 @@ export async function readConversationData(
       : undefined,
   );
   if (response.status === 304 && previous) return previous;
-  const report = (
-    options?.mailbox
-      ? conversationDetailWithMailboxReportSchema
-      : conversationDetailReportSchema
-  ).parse(await response.json());
+  if (!options?.mailbox) {
+    return withDetailEtag(
+      withCachedEvents(
+        await readResponseJson(response, conversationDetailReportSchema),
+        previous,
+      ),
+      response,
+    );
+  }
+  const report = await readResponseJson(
+    response,
+    z.union([
+      conversationUnchangedDetailWithMailboxSchema,
+      conversationDetailWithMailboxReportSchema,
+    ]),
+  );
+  if (!("unchanged" in report)) {
+    return withDetailEtag(withCachedEvents(report, previous), response);
+  }
+  // Only a request that sent a version can get this answer.
+  if (!previous) throw new Error("Unchanged detail without a cached copy");
+  return { ...previous, mailbox: report.mailbox };
+}
+
+/**
+ * Put the cached events before the newer events of an `appended` report.
+ * The cached detail keeps its cursors: they still point before its events.
+ */
+function withCachedEvents(
+  report: ConversationSnapshot,
+  previous: ConversationSnapshot | undefined,
+): ConversationSnapshot {
+  if (!report.appended) return report;
+  // Only a request that sent an `appendCursor` can get this answer.
+  if (!previous) throw new Error("Appended detail without a cached copy");
+  const { appended: _appended, ...rest } = report;
+  const lastSeq = previous.events.at(-1)?.seq ?? -1;
+  const firstSeq = previous.events[0]?.seq;
+  // Like the server, keep the unread cursor while the reader is behind the
+  // first event.
+  const behind =
+    rest.readPosition !== undefined &&
+    firstSeq !== undefined &&
+    rest.readPosition.lastReadSeq + 1 < firstSeq;
+  return {
+    ...rest,
+    events: [
+      ...previous.events,
+      ...report.events.filter((event) => event.seq > lastSeq),
+    ],
+    ...(previous.previousCursor
+      ? { previousCursor: previous.previousCursor }
+      : undefined),
+    ...(behind && previous.unreadCursor
+      ? { unreadCursor: previous.unreadCursor, unreadPage: previous.unreadPage }
+      : undefined),
+  };
+}
+
+function withDetailEtag<T extends ConversationDetailReport>(
+  report: T,
+  response: Response,
+): T & { detailEtag?: string } {
   return {
     ...report,
     detailEtag:
@@ -887,18 +930,6 @@ export async function readConversationData(
   };
 }
 
-/** Read accepted mailbox messages that have not reached durable history yet. */
-export function readConversationPendingMessages(
-  conversationId: string,
-  signal?: AbortSignal,
-): Promise<ConversationPendingMessagesReport> {
-  return fetchDashboardJson(
-    conversationPendingMessagesReportSchema,
-    `/api/conversations/${encodeURIComponent(conversationId)}/pending-messages`,
-    signal,
-  );
-}
-
 /** Read one bounded page of events before the supplied history cursor. */
 export function readConversationEvents(
   conversationId: string,

package/src/client/conversations/transcriptBottomPinning.ts

@@ -340,8 +340,10 @@ export function usePinnedTranscriptBottom(input: {
   // open that fails becomes a normal start, so the transcript opens again.
   const startedRef = useRef<string | null>(null);
   const previousScrollTopRef = useRef<number | null>(null);
-  // The scroll position that the last restore set. Its scroll event is not
-  // a reader scroll, so it must not change follow intent.
+  // The scroll position that the last restore or open at the marker set.
+  // Its scroll event is not a reader scroll, so it must not change follow
+  // intent or the recorded place. Rows can change size before that event,
+  // and the restore after them needs the place from before.
   const restoredScrollTopRef = useRef<number | null>(null);
   const scrollAnchorRef = useRef<ScrollAnchor | null>(null);
   const pinRequestVersionRef = useRef(input.pinRequestVersion ?? 0);
@@ -422,7 +424,6 @@ export function usePinnedTranscriptBottom(input: {
       const root = scrollRootFor(contentElementRef.current);
       if (!root) return;
 
-      if (source === "scroll") rememberPlace();
       const snapshot = scrollSnapshot(root);
       const previousScrollTop = previousScrollTopRef.current;
       previousScrollTopRef.current = snapshot.scrollTop;
@@ -434,6 +435,7 @@ export function usePinnedTranscriptBottom(input: {
         if (restored !== null && Math.abs(snapshot.scrollTop - restored) < 1) {
           return;
         }
+        rememberPlace();
       }
 
       const intent = transcriptFollowIntent({
@@ -543,6 +545,7 @@ export function usePinnedTranscriptBottom(input: {
     );
     const snapshot = scrollSnapshot(root);
     previousScrollTopRef.current = snapshot.scrollTop;
+    restoredScrollTopRef.current = snapshot.scrollTop;
     // Unread rows that fit above the bottom leave the reader at the latest.
     const atBottom = endsAtLatestRef.current && isNearScrollBottom(snapshot);
     setFollowingIntent(atBottom);
@@ -693,7 +696,12 @@ export function usePinnedTranscriptBottom(input: {
     measurePosition("measure");
     rememberPlace();
     // Listen on the scroll root, so gestures outside transcript rows count.
-    target.addEventListener("scroll", onScroll, { passive: true });
+    // Capture runs first at the root, so the place is recorded before a
+    // virtual list mounts the rows for the new position.
+    target.addEventListener("scroll", onScroll, {
+      capture: true,
+      passive: true,
+    });
     target.addEventListener("wheel", onWheel, { passive: true });
     target.addEventListener("touchstart", onTouchStart, {
       passive: true,
@@ -703,7 +711,7 @@ export function usePinnedTranscriptBottom(input: {
     });
     window.addEventListener("resize", syncAfterLayoutChange);
     return () => {
-      target.removeEventListener("scroll", onScroll);
+      target.removeEventListener("scroll", onScroll, { capture: true });
       target.removeEventListener("wheel", onWheel);
       target.removeEventListener("touchstart", onTouchStart);
       target.removeEventListener("touchmove", onTouchMove);

package/src/client/conversations/transcriptListRows.ts

@@ -0,0 +1,215 @@
+import {
+  isCollapsibleActivityEntry,
+  quietTurnEntryKeys,
+} from "./TranscriptActivityGroup";
+import type { RenderedTranscriptEntry } from "./transcriptRenderModel";
+import { entryMatchesSearch } from "./transcriptSearch";
+import type { TranscriptUnreadRange } from "./transcriptReadPosition";
+
+/** One row of the rich transcript list, in seq order. */
+export type TranscriptListRow =
+  | { kind: "unread_marker"; key: string }
+  | {
+      kind: "entry";
+      entry: RenderedTranscriptEntry;
+      key: string;
+      seq?: number;
+    }
+  | {
+      kind: "activity";
+      entries: RenderedTranscriptEntry[];
+      key: string;
+      /** Last event sequence in the group. */
+      seq?: number;
+    };
+
+/** The key of the "New" marker row. */
+export const UNREAD_MARKER_KEY = "unread-marker";
+
+/**
+ * Turn transcript entries into list rows. Runs of collapsible activity
+ * become one group row, search drops rows that do not match, and the
+ * "New" marker becomes its own row before the first unread row.
+ *
+ * `knownActivityKeys` maps entry keys to group keys across calls, so a
+ * group keeps its key while events extend either edge.
+ */
+export function transcriptListRows(input: {
+  entries: readonly RenderedTranscriptEntry[];
+  keyPrefix: string;
+  knownActivityKeys: Map<string, string>;
+  /** The normalized search query, when search is active. */
+  search?: string;
+  unread?: TranscriptUnreadRange;
+}): TranscriptListRow[] {
+  const { entries, search } = input;
+  const quietKeys = quietTurnEntryKeys(entries);
+  const collapsible = (entry: RenderedTranscriptEntry) =>
+    isCollapsibleActivityEntry(entry) || quietKeys.has(entry.key);
+  const matches = (entry: RenderedTranscriptEntry) =>
+    search === undefined || entryMatchesSearch(entry, search);
+  const claimedActivityKeys = new Set<string>();
+  const rows: TranscriptListRow[] = [];
+  // Search results are not a reading order, so they get no marker.
+  const markerSeq =
+    search === undefined ? unreadMarkerSeq(entries, input.unread) : undefined;
+  let markerPending = markerSeq !== undefined;
+  // Entries are in seq order, so the first row that reaches the marker seq
+  // gets the marker.
+  const pushRow = (
+    row: Exclude<TranscriptListRow, { kind: "unread_marker" }>,
+  ) => {
+    if (markerPending && row.seq !== undefined && row.seq >= markerSeq!) {
+      markerPending = false;
+      rows.push({ kind: "unread_marker", key: UNREAD_MARKER_KEY });
+    }
+    rows.push(row);
+  };
+
+  for (let index = 0; index < entries.length; ) {
+    const entry = entries[index]!;
+    if (collapsible(entry)) {
+      const group: RenderedTranscriptEntry[] = [];
+      while (index < entries.length && collapsible(entries[index]!)) {
+        group.push(entries[index]!);
+        index += 1;
+      }
+      const visible = group.filter(matches);
+      if (visible.length > 0) {
+        // The marker goes before the group when any of it is unread.
+        pushRow({
+          kind: "activity",
+          entries: visible,
+          key: stableActivityGroupKey({
+            claimedKeys: claimedActivityKeys,
+            entries: group,
+            keyPrefix: input.keyPrefix,
+            knownKeys: input.knownActivityKeys,
+          }),
+          seq: lastEntrySeq(group),
+        });
+      }
+      continue;
+    }
+    if (matches(entry)) {
+      pushRow({
+        kind: "entry",
+        entry,
+        key: `${input.keyPrefix}:${entry.key}`,
+        seq: entry.seq,
+      });
+    }
+    index += 1;
+  }
+  return rows;
+}
+
+/**
+ * Find the first row whose last seq is at or after `seq`. The New marker
+ * sorts with the row before it, and other rows without a seq come last, so a
+ * binary search works. Returns `rows.length` when no row reaches it.
+ */
+export function rowIndexForSeq(
+  rows: readonly TranscriptListRow[],
+  seq: number,
+): number {
+  let low = 0;
+  let high = rows.length;
+  while (low < high) {
+    const middle = (low + high) >> 1;
+    const row = rows[middle]!;
+    const rowSeq =
+      row.kind === "unread_marker"
+        ? (rowSeqBefore(rows, middle) ?? Number.NEGATIVE_INFINITY)
+        : row.seq;
+    if (rowSeq !== undefined && rowSeq < seq) low = middle + 1;
+    else high = middle;
+  }
+  return low;
+}
+
+function rowSeqBefore(
+  rows: readonly TranscriptListRow[],
+  index: number,
+): number | undefined {
+  const row = rows[index - 1];
+  return row === undefined || row.kind === "unread_marker"
+    ? undefined
+    : row.seq;
+}
+
+/**
+ * Group rows whose heights are alike, so a row can borrow the measured
+ * height of others before it renders.
+ */
+export function transcriptRowSizeClass(row: TranscriptListRow): string {
+  if (row.kind !== "entry") return row.kind;
+  const { entry } = row;
+  return entry.kind === "message"
+    ? `message:${entry.message.role}`
+    : entry.kind;
+}
+
+/** Guess the height of a row of a size class before any of them measure. */
+export function defaultTranscriptRowSize(sizeClass: string): number {
+  if (sizeClass === "unread_marker") return 32;
+  if (sizeClass === "activity") return 36;
+  if (sizeClass === "attachments_delivered") return 240;
+  if (sizeClass === "message:assistant") return 120;
+  if (sizeClass.startsWith("message:")) return 80;
+  return 44;
+}
+
+/**
+ * Find the seq of the first unread row. Entries are in seq order, and pending
+ * sends without a seq come last, so a binary search finds the first seq after
+ * the read position. Rows after the range arrived after open, so they get no
+ * marker.
+ */
+function unreadMarkerSeq(
+  entries: readonly RenderedTranscriptEntry[],
+  unread: TranscriptUnreadRange | undefined,
+): number | undefined {
+  if (!unread) return undefined;
+  let low = 0;
+  let high = entries.length;
+  while (low < high) {
+    const middle = (low + high) >> 1;
+    const seq = entries[middle]!.seq;
+    if (seq !== undefined && seq <= unread.afterSeq) low = middle + 1;
+    else high = middle;
+  }
+  const seq = entries[low]?.seq;
+  return seq !== undefined && seq <= unread.throughSeq ? seq : undefined;
+}
+
+function lastEntrySeq(
+  entries: readonly RenderedTranscriptEntry[],
+): number | undefined {
+  for (let index = entries.length - 1; index >= 0; index -= 1) {
+    const seq = entries[index]!.seq;
+    if (seq !== undefined) return seq;
+  }
+  return undefined;
+}
+
+/** Keep one activity group mounted while new or historical events extend either edge. */
+function stableActivityGroupKey(args: {
+  claimedKeys: Set<string>;
+  entries: RenderedTranscriptEntry[];
+  keyPrefix: string;
+  knownKeys: Map<string, string>;
+}): string {
+  const entryKeys = args.entries.map(
+    (entry) => `${args.keyPrefix}:${entry.key}`,
+  );
+  const knownKey = entryKeys
+    .map((entryKey) => args.knownKeys.get(entryKey))
+    .find((key) => key !== undefined && !args.claimedKeys.has(key));
+  const groupKey =
+    knownKey ?? `${args.keyPrefix}:activity:${args.entries[0]!.key}`;
+
+  args.claimedKeys.add(groupKey);
+  entryKeys.forEach((entryKey) => args.knownKeys.set(entryKey, groupKey));
+  return groupKey;
+}

package/src/client/conversations/virtualRows.ts

@@ -0,0 +1,168 @@
+import {
+  defaultRangeExtractor,
+  measureElement,
+  useVirtualizer,
+  type Range,
+  type Virtualizer,
+} from "@tanstack/react-virtual";
+import {
+  useCallback,
+  useLayoutEffect,
+  useRef,
+  useState,
+  type Key,
+  type RefObject,
+} from "react";
+
+import { scrollRootFor } from "./transcriptBottomPinning";
+
+/** Rows mounted beyond the viewport on each side. */
+const OVERSCAN_ROWS = 10;
+
+/**
+ * Pick and measure the rows of a list near the viewport of its scroll root.
+ * The transcript scroll owner holds the reader's place, so this never moves
+ * the scroll position. Rows at `keptIndexes` stay mounted outside the
+ * viewport, so code that finds them in the DOM keeps working.
+ *
+ * A row that mounts above the reader with a size other than its estimate
+ * moves what they read, and the scroll owner corrects that with a scroll.
+ * Phones show such corrections as jumps, so a row's estimate is the mean
+ * size of the measured rows of its `sizeClass`, which is close for rows of
+ * one kind. `defaultSize` covers a class before any of its rows measure.
+ *
+ * Callers place each row at `start - options.scrollMargin` with
+ * `measureElement` as its ref, inside a list that is `getTotalSize()` tall.
+ */
+export function useVirtualRows(input: {
+  count: number;
+  defaultSize: (sizeClass: string) => number;
+  gap?: number;
+  getItemKey: (index: number) => Key;
+  keptIndexes: readonly (number | undefined)[];
+  listRef: RefObject<HTMLElement | null>;
+  sizeClass: (index: number) => string;
+}) {
+  const { listRef } = input;
+  // The virtualizer reads estimates only for rows without a measured size.
+  const sizes = useRef(new Map<string, { count: number; total: number }>());
+  const rowSizes = useRef(new Map<Key, { size: number; sizeClass: string }>());
+  // The estimate that each unmeasured row has now, by row key.
+  const estimates = useRef(new Map<Key, number>());
+  const rowInput = useRef(input);
+  rowInput.current = input;
+  const estimateSize = useCallback((index: number) => {
+    const key = rowInput.current.getItemKey(index);
+    const current = estimates.current.get(key);
+    if (current !== undefined) return current;
+    const sizeClass = rowInput.current.sizeClass(index);
+    const measured = sizes.current.get(sizeClass);
+    const estimate = measured?.count
+      ? measured.total / measured.count
+      : rowInput.current.defaultSize(sizeClass);
+    estimates.current.set(key, estimate);
+    return estimate;
+  }, []);
+  // Each row counts once, with its latest size, so rows that grow while
+  // they stream do not outweigh the others.
+  const recordSize = (key: Key, sizeClass: string, size: number) => {
+    const previous = rowSizes.current.get(key);
+    if (previous) {
+      const total = sizes.current.get(previous.sizeClass)!;
+      total.count -= 1;
+      total.total -= previous.size;
+    }
+    rowSizes.current.set(key, { size, sizeClass });
+    const total = sizes.current.get(sizeClass) ?? { count: 0, total: 0 };
+    total.count += 1;
+    total.total += size;
+    sizes.current.set(sizeClass, total);
+  };
+  // A new estimate for a row moves the rows after it. The scroll owner
+  // corrects that from the row that it recorded at the last scroll. So rows
+  // take the latest estimates only on the render after a scroll, when that
+  // row is current. A scroll by other code, such as a reveal, is then
+  // recorded before rows move. Other renders keep each row's estimate.
+  const instance = useRef<Virtualizer<Element, HTMLElement>>(null);
+  const placement = useRef<{
+    getItemKey: (index: number) => Key;
+    scrollOffset?: number | null;
+  }>(null);
+  const scrollOffset = instance.current?.scrollOffset;
+  if (!placement.current || placement.current.scrollOffset !== scrollOffset) {
+    estimates.current.clear();
+    placement.current = {
+      getItemKey: (index) => rowInput.current.getItemKey(index),
+      scrollOffset,
+    };
+  }
+  const [scrollMargin, setScrollMargin] = useState(0);
+  const keptKey = input.keptIndexes
+    .filter((index) => index !== undefined && index >= 0 && index < input.count)
+    .join(",");
+  const rangeExtractor = useCallback(
+    (range: Range) => {
+      const indexes = new Set(defaultRangeExtractor(range));
+      if (keptKey) {
+        for (const index of keptKey.split(",")) indexes.add(Number(index));
+      }
+      // Rows stay in document order, so the scroll owner can search them.
+      return [...indexes].sort((left, right) => left - right);
+    },
+    [keptKey],
+  );
+  // Controls above the list, such as the earlier-page control, move it
+  // down from the top of the scroll content. The margin only picks which
+  // rows mount, so a reading from the last scroll or resize is close
+  // enough: the overscan rows cover a small error.
+  const measureScrollMargin = useCallback(() => {
+    const list = listRef.current;
+    const root = scrollRootFor(list);
+    if (!list || !(root instanceof Element)) return;
+    const margin =
+      list.getBoundingClientRect().top -
+      root.getBoundingClientRect().top +
+      root.scrollTop;
+    setScrollMargin((current) =>
+      Math.abs(margin - current) >= 1 ? margin : current,
+    );
+  }, [listRef]);
+  useLayoutEffect(measureScrollMargin, [measureScrollMargin]);
+  // The dashboard build does not use React Compiler, so nothing memoizes
+  // the values that this hook returns.
+  // oxlint-disable-next-line react/incompatible-library
+  const virtualizer = useVirtualizer<Element, HTMLElement>({
+    count: input.count,
+    estimateSize,
+    gap: input.gap,
+    // A new function makes the virtualizer place every row again.
+    getItemKey: placement.current.getItemKey,
+    measureElement: (element, entry, instance) => {
+      const size = measureElement(element, entry, instance);
+      const index = instance.indexFromElement(element);
+      recordSize(
+        rowInput.current.getItemKey(index),
+        rowInput.current.sizeClass(index),
+        size,
+      );
+      return size;
+    },
+    // A server render has no scroll root, so mount the first rows that
+    // fill about one screen.
+    initialRect:
+      typeof window === "undefined" ? { height: 1_000, width: 0 } : undefined,
+    getScrollElement: () => {
+      const root = scrollRootFor(listRef.current);
+      return root instanceof Element ? root : null;
+    },
+    onChange: measureScrollMargin,
+    overscan: OVERSCAN_ROWS,
+    rangeExtractor,
+    scrollMargin,
+    // The scroll owner moves the scroll position. This only reads it.
+    scrollToFn: () => {},
+  });
+  virtualizer.shouldAdjustScrollPositionOnItemSizeChange = () => false;
+  instance.current = virtualizer;
+  return virtualizer;
+}