@keepsnappy/react-native 0.1.0-alpha.14 → 0.1.0-alpha.16

package/js/sdk/profile.ts

@@ -4,6 +4,7 @@
 // (actualDuration / selfBaseDuration) and updaters (root.memoizedUpdaters)
 // exist only when the app runs React's profiling renderer.
 
+import { MAX_BATCH_BYTES, utf8Length } from './bytes';
 import {
   CLASS_COMPONENT,
   componentName,
@@ -11,6 +12,9 @@ import {
   FORWARD_REF,
   FUNCTION_COMPONENT,
   SIMPLE_MEMO_COMPONENT,
+  clientKeyOf,
+  isComponentTag,
+  OUTSIDE_APP,
 } from './fiber';
 
 export interface HookNode {
@@ -179,7 +183,55 @@ export const updaterNames = (root: ProfiledRoot): string[] | null => {
   return names.sort();
 };
 
-export interface ComponentProfile {
+const MAX_OWNER_UP = 512;
+const updaterOwners = (root: ProfiledRoot) => {
+  if (!(root.memoizedUpdaters instanceof Set)) return { owners: null, unresolved: 0 };
+  const known = new Map<Fiber, string>();
+  const unresolvedPaths = new Set<Fiber>();
+  const owners: string[] = [];
+  let unresolved = 0;
+  for (const updater of root.memoizedUpdaters) {
+    const path: Fiber[] = [];
+    let fiber: Fiber | null = updater, owner = OUTSIDE_APP, capped = false;
+    for (let hops = 0; fiber !== null && hops < MAX_OWNER_UP; hops++) {
+      const cached = known.get(fiber);
+      if (cached !== undefined) {
+        owner = cached;
+        capped = unresolvedPaths.has(fiber);
+        break;
+      }
+      path.push(fiber);
+      const own = isComponentTag(fiber.tag) ? clientKeyOf(fiber) : null;
+      if (own !== null) { owner = own; break; }
+      fiber = fiber.return;
+      if (fiber !== null && hops === MAX_OWNER_UP - 1) capped = true;
+    }
+    for (const f of path) {
+      known.set(f, owner);
+      // A capped path stays unresolved for later updaters joining that path.
+      if (capped) unresolvedPaths.add(f);
+    }
+    if (capped) unresolved++;
+    owners.push(owner);
+  }
+  return { owners, unresolved };
+};
+
+interface RolledTime { ms: number; renders: number }
+interface RolledRest { ms: number; n: number; saturated?: true }
+interface RestedLibraries { ms: number; names: Set<string>; saturated: boolean }
+const ROLLUP_LIMITS = { trackedNames: 64, restNames: 64 } as const;
+interface RollupDetail {
+  rolled: Map<string, RolledTime> | null;
+  rolledRest: RestedLibraries | null;
+}
+interface OutsideProfile extends RollupDetail {
+  selfMs: number;
+  mountSelfMs: number;
+}
+const emptyOutside = (): OutsideProfile => ({ selfMs: 0, mountSelfMs: 0, rolled: null, rolledRest: null });
+
+export interface ComponentProfile extends RollupDetail {
   renders: number;
   mounts: number;
   // Distinct instances (fiber pairs) that rendered.
@@ -195,15 +247,25 @@ export interface ComponentProfile {
   context: number;
   parent: number;
   other: number;
+  rolledMs: number;
+  // These describe the first parent until a second distinct parent needs `parents`.
+  firstParent: string | null;
+  parentCount: number;
+  parents: Map<string | null, number> | null;
 }
 
 export interface CommitProfile {
   // Index of the commit in this process (1-based), for aligning windows.
   seq: number;
+  // When the commit landed: the hook ran after React rendered it (performance.now), null when the caller does not know it.
+  endMs: number | null;
   timed: boolean;
   renderMs: number | null;
   updaters: string[] | null;
+  updaterOwners: string[] | null;
+  updatersUnresolved: number;
   components: Map<string, ComponentProfile>;
+  outside: OutsideProfile | null;
 }
 
 const emptyComponent = (): ComponentProfile => ({
@@ -220,16 +282,27 @@ const emptyComponent = (): ComponentProfile => ({
   context: 0,
   parent: 0,
   other: 0,
+  rolledMs: 0,
+  rolled: null,
+  rolledRest: null,
+  firstParent: null,
+  parentCount: 0,
+  parents: null,
 });
 
-export const createCommitProfile = (root: ProfiledRoot, seq = 0): CommitProfile => {
+export const createCommitProfile = (root: ProfiledRoot, seq = 0, endMs: number | null = null): CommitProfile => {
   const timed = isProfilingFiber(root.current);
+  const updaters = timed ? updaterOwners(root) : { owners: null, unresolved: 0 };
   return {
     seq,
+    endMs,
     timed,
     renderMs: timed ? totalMs(root.current) : null,
     updaters: timed ? updaterNames(root) : null,
+    updaterOwners: updaters.owners,
+    updatersUnresolved: updaters.unresolved,
     components: new Map(),
+    outside: timed ? emptyOutside() : null,
   };
 };
 
@@ -237,12 +310,84 @@ const bump = (map: Record<string, number>, key: string, by = 1) => {
   map[key] = (map[key] ?? 0) + by;
 };
 
+const noteParent = (entry: ComponentProfile, parent: string | null, count = 1) => {
+  if (entry.parents !== null) {
+    entry.parents.set(parent, (entry.parents.get(parent) ?? 0) + count);
+  } else if (entry.parentCount === 0) {
+    entry.firstParent = parent;
+    entry.parentCount = count;
+  } else if (entry.firstParent === parent) {
+    entry.parentCount += count;
+  } else {
+    entry.parents = new Map([[entry.firstParent, entry.parentCount], [parent, count]]);
+  }
+};
+
+const restBucket = (into: RollupDetail) =>
+  into.rolledRest ??= { ms: 0, names: new Set<string>(), saturated: false };
+
+const noteRestName = (rest: RestedLibraries, name: string) => {
+  if (!rest.names.has(name)) {
+    if (rest.names.size < ROLLUP_LIMITS.restNames) rest.names.add(name);
+    else rest.saturated = true;
+  }
+};
+
+// Keep the same lexicographically first names at both layers. A name omitted
+// from a commit has 64 smaller names ahead of it, so it cannot enter the
+// window's tracked set either. Tracked totals stay complete and can be ranked
+// by time even after the bounded distinct-rest counter saturates.
+const addRolled = (
+  into: RollupDetail,
+  name: string, ms: number, renders: number,
+) => {
+  const known = into.rolled?.get(name);
+  if (known) { known.ms += ms; known.renders += renders; return; }
+  const rolled = into.rolled ??= new Map();
+  if (rolled.size < ROLLUP_LIMITS.trackedNames) { rolled.set(name, { ms, renders }); return; }
+  let last: [string, RolledTime] | null = null;
+  for (const pair of rolled) if (!last || pair[0] > last[0]) last = pair;
+  const rest = restBucket(into);
+  if (last && name < last[0]) {
+    rolled.delete(last[0]);
+    rolled.set(name, { ms, renders });
+    rest.ms += last[1].ms;
+    noteRestName(rest, last[0]);
+  } else {
+    rest.ms += ms;
+    noteRestName(rest, name);
+  }
+};
+
+export const recordRolledUp = (
+  commit: CommitProfile, owner: string, parent: string | null, name: string, fiber: ProfiledFiber,
+) => {
+  if (!commit.timed) return;
+  const self = selfMs(fiber);
+  if (self === null) return;
+  if (owner === OUTSIDE_APP) {
+    const outside = commit.outside as OutsideProfile;
+    outside.selfMs += self;
+    if (fiber.alternate === null) outside.mountSelfMs += self;
+    addRolled(outside, name, self, 1);
+  } else {
+    let entry = commit.components.get(owner);
+    if (!entry) { entry = emptyComponent(); commit.components.set(owner, entry); }
+    entry.selfMs += self;
+    entry.rolledMs += self;
+    if (fiber.alternate === null) entry.mountSelfMs += self;
+    noteParent(entry, parent);
+    addRolled(entry, name, self, 1);
+  }
+};
+
 export const recordFiber = (
   commit: CommitProfile,
   name: string,
   fiber: ProfiledFiber,
   cause: UpdateCause,
   instance?: number,
+  parent: string | null = null,
 ) => {
   let entry = commit.components.get(name);
   if (!entry) {
@@ -250,6 +395,7 @@ export const recordFiber = (
     commit.components.set(name, entry);
   }
   entry.renders++;
+  noteParent(entry, parent);
   if (instance !== undefined) {
     entry.instances.add(instance);
   }
@@ -299,8 +445,12 @@ export interface WindowProfile {
   lastSeq: number | null;
   timedCommits: number;
   renderMs: number[];
+  // The judged commit that set the largest render time (the earliest seq on a tie), kept as the max is updated.
+  slowest: { seq: number; endMs: number | null; ms: number } | null;
   updaters: Record<string, number>;
+  updatersUnresolved: number;
   components: Map<string, ComponentProfile>;
+  outside: OutsideProfile;
 }
 
 export const createWindowProfile = (): WindowProfile => ({
@@ -309,8 +459,11 @@ export const createWindowProfile = (): WindowProfile => ({
   lastSeq: null,
   timedCommits: 0,
   renderMs: [],
+  slowest: null,
   updaters: {},
+  updatersUnresolved: 0,
   components: new Map(),
+  outside: emptyOutside(),
 });
 
 const mergeCounts = (into: Record<string, number>, from: Record<string, number>) => {
@@ -319,6 +472,16 @@ const mergeCounts = (into: Record<string, number>, from: Record<string, number>)
   }
 };
 
+const mergeRolled = (into: RollupDetail, from: RollupDetail) => {
+  for (const [name, time] of from.rolled ?? []) addRolled(into, name, time.ms, time.renders);
+  if (from.rolledRest) {
+    const rest = restBucket(into);
+    for (const name of from.rolledRest.names) noteRestName(rest, name);
+    rest.ms += from.rolledRest.ms;
+    rest.saturated ||= from.rolledRest.saturated;
+  }
+};
+
 export const addCommitProfile = (window: WindowProfile, commit: CommitProfile) => {
   window.commits++;
   if (commit.seq > 0) {
@@ -330,10 +493,20 @@ export const addCommitProfile = (window: WindowProfile, commit: CommitProfile) =
   }
   if (commit.renderMs !== null) {
     window.renderMs.push(commit.renderMs);
+    const slowest = window.slowest;
+    if (commit.seq > 0 && (slowest === null || commit.renderMs > slowest.ms || (commit.renderMs === slowest.ms && commit.seq < slowest.seq))) {
+      window.slowest = { seq: commit.seq, endMs: commit.endMs, ms: commit.renderMs };
+    }
   }
-  for (const name of commit.updaters ?? []) {
+  for (const name of new Set(commit.updaterOwners ?? [])) {
     bump(window.updaters, name);
   }
+  window.updatersUnresolved += commit.updatersUnresolved;
+  if (commit.outside) {
+    window.outside.selfMs += commit.outside.selfMs;
+    window.outside.mountSelfMs += commit.outside.mountSelfMs;
+    mergeRolled(window.outside, commit.outside);
+  }
   for (const [name, from] of commit.components) {
     let into = window.components.get(name);
     if (!into) {
@@ -353,6 +526,13 @@ export const addCommitProfile = (window: WindowProfile, commit: CommitProfile) =
     into.context += from.context;
     into.parent += from.parent;
     into.other += from.other;
+    into.rolledMs += from.rolledMs;
+    mergeRolled(into, from);
+    if (from.parents) {
+      for (const [parent, count] of from.parents) noteParent(into, parent, count);
+    } else if (from.parentCount > 0) {
+      noteParent(into, from.firstParent, from.parentCount);
+    }
     mergeCounts(into.props, from.props);
     mergeCounts(into.hooks, from.hooks);
   }
@@ -368,9 +548,18 @@ const sortedCounts = (map: Record<string, number>) => {
   return out;
 };
 
-// Sizes of the per-window summary (plan 40 §3.1): component rows, cause keys
-// per component, updaters.
-export const PROFILE_LIMITS = { components: 30, causeKeys: 3, updaters: 5 };
+// Sizes of the per-window summary (plan 40 §3.1, plan 79 S9): every component gets a row until the valve (`rows` or `rowBytes`; the smallest are dropped
+// and counted in `omitted`). The first `detailRows` rows, reported in the summary, also get causes, shares and roll-up: the top `detailTop` and every row at
+// FULL_ROW_MS, as far as rows and detail together fit `profileBytes`. Half the batch cap, so a window line is never dropped.
+export const PROFILE_LIMITS = {
+  rows: 512, rowBytes: 64 * 1024, detailTop: 30, profileBytes: MAX_BATCH_BYTES / 2,
+  causeKeys: 3, updaters: 5,
+  rollupTop: 5,
+};
+
+// A component with at least this much self time (as sent, rounded) keeps cause, share and roll-up detail in the window summary. Half the lowest ms floor of
+// the component rules (verdict-core clause T-WARN-MS); a test pins it, because the SDK cannot import the clause table.
+export const FULL_ROW_MS = 2.5;
 
 // The budgets every timed window counts commits against (120 Hz and 60 Hz),
 // plus the device's own when it is neither.
@@ -457,14 +646,44 @@ export const overBudgetCounts = (renderMs: number[], budgets: number[]) => {
 const DEFAULT_BUDGET: FrameBudget = { ms: 16.7, hz: null, source: 'default' };
 
 // Component rows: [name, renders, mounts, instances, selfMs, totalMs]; times
-// are null without the profiling renderer. Rows are the top components by self
-// time when timed, else by renders (then name), so a production-renderer run
-// with the same renders prints the same rows.
+// are null without the profiling renderer. Rows are every component by self
+// time when timed, else by renders (then name), up to the valve in PROFILE_LIMITS,
+// so a production-renderer run with the same renders prints the same rows.
 export type ComponentRow = [string, number, number, number, number | null, number | null];
 
+const rolledSummary = (entry: RollupDetail, limit: number) => {
+  const all = [...(entry.rolled ?? [])].sort((a, b) => b[1].ms - a[1].ms || (a[0] < b[0] ? -1 : a[0] > b[0] ? 1 : 0));
+  return {
+    rolledUp: all.slice(0, limit).map(([name, time]): [string, number, number] => [name, round(time.ms), time.renders]),
+    rolledUpRest: {
+      ms: round(all.slice(limit).reduce((sum, [, time]) => sum + time.ms, entry.rolledRest?.ms ?? 0)),
+      n: (entry.rolledRest?.names.size ?? 0) + Math.max(0, all.length - limit),
+      ...(entry.rolledRest?.saturated ? { saturated: true as const } : {}),
+    },
+  };
+};
+
+const dominantParent = (entry: ComponentProfile): string | null => {
+  if (entry.parents === null) return entry.firstParent;
+  let parent: string | null = null, count = -1;
+  for (const [candidate, occurrences] of entry.parents) {
+    if (occurrences > count || (occurrences === count && (candidate ?? '') < (parent ?? ''))) {
+      parent = candidate; count = occurrences;
+    }
+  }
+  return parent;
+};
+
+interface RollupSummary {
+  parent: string | null;
+  rolledUpMs: number;
+  rolledUp: [string, number, number][];
+  rolledUpRest: RolledRest;
+}
+
 export const summarizeWindowProfile = (
   window: WindowProfile,
-  options: { budget?: FrameBudget; limits?: Partial<typeof PROFILE_LIMITS> } = {},
+  options: { budget?: FrameBudget; limits?: Partial<typeof PROFILE_LIMITS>; t0?: number } = {},
 ) => {
   const limits = { ...PROFILE_LIMITS, ...options.limits };
   const budget = options.budget ?? DEFAULT_BUDGET;
@@ -475,31 +694,54 @@ export const summarizeWindowProfile = (
       b[1].renders - a[1].renders ||
       (a[0] < b[0] ? -1 : a[0] > b[0] ? 1 : 0),
   );
-  const kept = all.slice(0, limits.components);
-  const components: ComponentRow[] = kept.map(([name, entry]) => [
+  const rowOf = ([name, entry]: [string, ComponentProfile]): ComponentRow => [
     name,
     entry.renders,
     entry.mounts,
     entry.instances.size,
     timed ? round(entry.selfMs) : null,
-    timed ? round(entry.totalMs) : null,
-  ]);
+    timed && entry.timed > 0 ? round(entry.totalMs) : null,
+  ];
+  const components: ComponentRow[] = [];
+  let rowBytes = 0;
+  for (const item of all) {
+    const row = rowOf(item);
+    const bytes = utf8Length(JSON.stringify(row)) + 1;
+    if (components.length >= limits.rows || rowBytes + bytes > limits.rowBytes) break;
+    components.push(row);
+    rowBytes += bytes;
+  }
+  const kept = all.slice(0, components.length);
   const causes: Record<string, CauseSummary> = {};
   const shares: Record<string, Record<string, number>> = {};
-  for (const [name, entry] of kept) {
+  const rollup: Record<string, RollupSummary> = {};
+  // Detail is a prefix of the rows: sorted by self time, the rows at FULL_ROW_MS follow the top rows directly.
+  let detailRows = 0, detailBytes = 0;
+  for (const [index, [name, entry]] of kept.entries()) {
+    if (index >= limits.detailTop && !(timed && round(entry.selfMs) >= FULL_ROW_MS)) break;
     const summary = causeSummary(entry, limits.causeKeys);
+    const share = causeShares(entry, limits.causeKeys);
+    const parent = dominantParent(entry);
+    const rolled = timed && (parent !== null || entry.rolledMs > 0)
+      ? { parent, rolledUpMs: round(entry.rolledMs), ...rolledSummary(entry, limits.rollupTop) }
+      : null;
+    const bytes = 3 * utf8Length(name) + utf8Length(JSON.stringify([summary, share, rolled])) + 12;
+    if (rowBytes + detailBytes + bytes > limits.profileBytes) break;
+    detailBytes += bytes;
+    detailRows++;
     if (Object.keys(summary).length > 0) {
       causes[name] = summary;
     }
-    shares[name] = causeShares(entry, limits.causeKeys);
+    shares[name] = share;
+    if (rolled) rollup[name] = rolled;
   }
   const updaters = Object.entries(window.updaters).sort(ranked);
   const renderSum = window.renderMs.reduce((s, n) => s + n, 0);
   const selfTotal = timed
-    ? [...window.components.values()].reduce((s, e) => s + e.selfMs, 0)
+    ? [...window.components.values()].reduce((s, e) => s + e.selfMs, window.outside.selfMs)
     : null;
   const mountSelfTotal = timed
-    ? [...window.components.values()].reduce((s, e) => s + e.mountSelfMs, 0)
+    ? [...window.components.values()].reduce((s, e) => s + e.mountSelfMs, window.outside.mountSelfMs)
     : null;
   return {
     renderer: timed ? 'profiling' : 'production',
@@ -508,6 +750,10 @@ export const summarizeWindowProfile = (
       window.firstSeq === null || window.lastSeq === null
         ? null
         : [window.firstSeq, window.lastSeq],
+    slowestCommitSeq: timed ? window.slowest?.seq ?? null : null,
+    // When that commit landed, ms after the window start; negative for a commit a later-opened window took by backfill.
+    slowestCommitEndAtMs:
+      timed && window.slowest?.endMs != null && options.t0 !== undefined ? round(window.slowest.endMs - options.t0) : null,
     renderMs: timed
       ? {
           sum: round(renderSum),
@@ -521,9 +767,17 @@ export const summarizeWindowProfile = (
       : null,
     selfMsTotal: selfTotal === null ? null : round(selfTotal),
     mountSelfMs: mountSelfTotal === null ? null : round(mountSelfTotal),
+    stamped: all.filter(([, entry]) => entry.renders > 0).length,
+    ...(timed ? {
+      rollup,
+      outside: { selfMs: round(window.outside.selfMs), mountSelfMs: round(window.outside.mountSelfMs), ...rolledSummary(window.outside, limits.rollupTop) },
+      rolledUpMsTotal: round(all.reduce((sum, [, entry]) => sum + entry.rolledMs, window.outside.selfMs)),
+    } : {}),
     updaters: timed ? sortedCounts(Object.fromEntries(updaters.slice(0, limits.updaters))) : null,
     updatersOmitted: timed ? Math.max(0, updaters.length - limits.updaters) : 0,
+    updatersUnresolved: window.updatersUnresolved,
     components,
+    detailRows,
     causes,
     shares,
     omitted: all.length - kept.length,

package/js/sdk/push-install.ts

@@ -5,6 +5,7 @@
 import { AppState, Platform } from 'react-native';
 
 import { MODE } from './activation';
+import { deviceModelOf } from './device-model';
 import { type ArtifactUploadNative, createArtifactUploader } from './artifacts';
 import {
   addStartupSection,
@@ -41,7 +42,7 @@ const readDevice = async (): Promise<DeviceInfo> => {
   let build: string | null = null;
   try {
     const Device = require('expo-device');
-    model = Device.modelName ?? Device.modelId ?? null;
+    model = deviceModelOf(Device);
     os = Device.osVersion ?? null;
   } catch {
     // device fields stay null

package/js/sdk/push.ts

@@ -11,6 +11,8 @@
 // rewritten to the live queue whenever it outgrows twice the queue caps, so it
 // stays bounded while the ingest is unreachable.
 
+import { MAX_BATCH_BYTES, utf8Length } from './bytes';
+
 export interface DeviceInfo {
   model: string | null;
   os: string | null;
@@ -208,31 +210,13 @@ export const readSpool = (content: string | null): { pending: PendingLine[]; dro
 export const pendingFromSpool = (content: string | null): PendingLine[] =>
   readSpool(content).pending;
 
-const utf8Length = (text: string) => {
-  let n = 0;
-  for (let i = 0; i < text.length; i++) {
-    const c = text.charCodeAt(i);
-    if (c < 0x80) {
-      n += 1;
-    } else if (c < 0x800) {
-      n += 2;
-    } else if (c >= 0xd800 && c <= 0xdbff) {
-      n += 4;
-      i++;
-    } else {
-      n += 3;
-    }
-  }
-  return n;
-};
-
 // Retrying cannot fix these; the batch is dropped instead of blocking the queue.
 const isPermanent = (status: number) =>
   status >= 400 && status < 500 && status !== 408 && status !== 429;
 
 export const createPushClient = (deps: PushDeps) => {
   const idleFlushMs = deps.idleFlushMs ?? 10_000;
-  const maxBatchBytes = deps.maxBatchBytes ?? 256 * 1024;
+  const maxBatchBytes = deps.maxBatchBytes ?? MAX_BATCH_BYTES;
   const maxBatchItems = deps.maxBatchItems ?? 400;
   const maxQueueLines = deps.maxQueueLines ?? 2000;
   const maxQueueBytes = deps.maxQueueBytes ?? 8 * 1024 * 1024;

package/js/sdk/screens.ts

@@ -26,7 +26,7 @@ import {
 } from './core';
 import { retainFloorOf } from './retain-floor';
 import { type CauseRoot, currentCause, latestActionAt, launchedAt, launchRootId } from './causes';
-import { routeOfScreenHost, routes } from './fiber';
+import { buildPlaceId, routeOfScreenHost, routes, screenKeyForRoute, setScreenKeyProvider, currentFiber, type ScreenRouteResolution, type Fiber } from './fiber';
 import {
   lastPressStart,
   type NativeScreenEvent,
@@ -64,6 +64,11 @@ interface Visit {
   chainKey: string;
   keyChain: string;
   visit: number;
+  screenKey: string | null;
+  legacyName: string;
+  pendingCommits: number;
+  resolution: ScreenRouteResolution;
+  lazyBoundary: Fiber | null;
   t0: number;
   openedAt: number;
   endedAt: number | null;
@@ -89,6 +94,7 @@ interface Resolution {
 let current: Visit | null = null;
 let seq = 0;
 const visitsByChain = new Map<string, number>();
+const visitsByScreen = new Map<string, number>();
 let lastActionAt = -Infinity;
 interface AppLink {
   t: number;
@@ -248,6 +254,7 @@ const endVisit = (reason: string, at?: number) => {
   if (!visit || visit.endedAt !== null) {
     return;
   }
+  if (visit.pendingCommits > 0) resolveVisit(visit, true);
   const t = Math.max(visit.t0, at ?? now());
   visit.endedAt = t;
   stats.ends[reason] = (stats.ends[reason] ?? 0) + 1;
@@ -332,6 +339,28 @@ const isStrictExtension = (prev: RoutePart[], next: RoutePart[]) =>
       (part.key ?? null) === (next[i]?.key ?? null),
   );
 
+const screenResolution = (chain: RoutePart[]) => {
+  const leaf = chain[chain.length - 1]!;
+  return screenKeyForRoute(leaf.key ?? null, leaf.name);
+};
+
+const moveScreenCounter = (visit: Visit, screen: string) => {
+  if (visit.screenKey === screen) return;
+  if (visit.screenKey !== null) visitsByScreen.set(visit.screenKey, (visitsByScreen.get(visit.screenKey) ?? 1) - 1);
+  visit.visit = (visitsByScreen.get(screen) ?? 0) + 1;
+  visitsByScreen.set(screen, visit.visit);
+  visit.screenKey = screen;
+};
+
+const resolveVisit = (visit: Visit, final = false) => {
+  const resolved = visit.resolution;
+  if (resolved.screenPending && !final) return;
+  moveScreenCounter(visit, resolved.screen);
+  visit.name = buildPlaceId({ kind: 'screen', screen: resolved.screen, visit: visit.visit });
+  visit.pendingCommits = 0;
+  markers.rename(visit.key, visit.name, visit.legacyName);
+};
+
 const extend = (visit: Visit, chain: RoutePart[], chainKey: string) => {
   const previous = visitsByChain.get(visit.chainKey) ?? 1;
   visitsByChain.set(visit.chainKey, previous - 1);
@@ -341,9 +370,19 @@ const extend = (visit: Visit, chain: RoutePart[], chainKey: string) => {
   visit.chain = chain;
   visit.chainKey = chainKey;
   visit.keyChain = keyChainOf(chain);
-  visit.visit = n;
-  visit.name = nameOf(chainKey, n);
-  markers.rename(visit.key, visit.name);
+  visit.legacyName = nameOf(chainKey, n);
+  const resolution = screenResolution(chain);
+  visit.resolution = resolution;
+  visit.lazyBoundary = resolution.suspended ?? null;
+  if (resolution.screenPending) {
+    if (visit.screenKey !== null) {
+      visitsByScreen.set(visit.screenKey, (visitsByScreen.get(visit.screenKey) ?? 1) - 1);
+      visit.screenKey = null;
+    }
+    visit.name = visit.legacyName;
+    visit.pendingCommits = 3;
+    markers.rename(visit.key, visit.name, visit.legacyName);
+  } else resolveVisit(visit);
   stats.extended++;
 };
 
@@ -398,6 +437,7 @@ const onSnapshot = (snapshot: NavSnapshot, nameSource: NameSource) => {
   const n = (visitsByChain.get(chainKey) ?? 0) + 1;
   visitsByChain.set(chainKey, n);
   seq++;
+  const resolved = screenResolution(chain);
   const visit: Visit = {
     key: `screen#${seq}`,
     name: nameOf(chainKey, n),
@@ -405,6 +445,11 @@ const onSnapshot = (snapshot: NavSnapshot, nameSource: NameSource) => {
     chainKey,
     keyChain,
     visit: n,
+    legacyName: nameOf(chainKey, n),
+    screenKey: null,
+    pendingCommits: 3,
+    resolution: resolved,
+    lazyBoundary: resolved.suspended ?? null,
     t0: start.t0,
     openedAt: detectedAt,
     endedAt: null,
@@ -417,6 +462,11 @@ const onSnapshot = (snapshot: NavSnapshot, nameSource: NameSource) => {
     launch,
     cause: snapshot.cause,
   };
+  if (!resolved.screenPending) {
+    moveScreenCounter(visit, resolved.screen);
+    visit.name = buildPlaceId({ kind: 'screen', screen: resolved.screen, visit: visit.visit });
+    visit.pendingCommits = 0;
+  }
   current = visit;
   pressesSinceVisit = [];
   stats.visits++;
@@ -429,6 +479,12 @@ const onSnapshot = (snapshot: NavSnapshot, nameSource: NameSource) => {
   markers.start(visit.name, {
     key: visit.key,
     kind: 'screen',
+    legacyName: visit.legacyName,
+    beforeEnd: () => {
+      if (visit.pendingCommits > 0) resolveVisit(visit, true);
+      visit.lazyBoundary = null;
+      visit.resolution = { screen: visit.screenKey ?? visit.resolution.screen };
+    },
     at: visit.t0,
     details: details(visit),
     // The launch window belongs to the launch, whatever action came before the first state (REQ-MEAS-22).
@@ -530,6 +586,7 @@ export const screenStats = () => ({
   visitsByChain: Object.fromEntries(
     [...visitsByChain].filter(([, n]) => n > 0).slice(0, MAX_LISTED),
   ),
+  visitsByScreen: Object.fromEntries([...visitsByScreen].filter(([, n]) => n > 0).slice(0, MAX_LISTED)),
   trackedRoutes: routes.size,
   nav: navStats(),
   native: {
@@ -569,6 +626,10 @@ export const installScreens = () => {
     return;
   }
   installed = true;
+  setScreenKeyProvider(() => current ? {
+    screen: current.screenKey ?? current.resolution.screen,
+    ...(current.pendingCommits > 0 || current.lazyBoundary ? { screenPending: true } : {}),
+  } : { screen: '(no screen)' });
   setRetainFloor(screenRetainFloor);
   onWindowsEnd(onWindowsEnded);
   onNavSnapshot(snapshot => onSnapshot(snapshot, 'state'));
@@ -578,6 +639,24 @@ export const installScreens = () => {
     setTimeout(() => logNativeEvent(event), RESOLVE_DELAY_MS);
   });
   onAfterCommit(() => {
+    const visit = current;
+    if (visit && isWindowOpen(visit.key)) {
+      if (visit.pendingCommits > 0) {
+        visit.resolution = screenResolution(visit.chain);
+        visit.lazyBoundary = visit.resolution.suspended ?? null;
+        visit.pendingCommits--;
+        resolveVisit(visit, visit.pendingCommits === 0);
+      } else if (visit.lazyBoundary) {
+        const boundary = currentFiber(visit.lazyBoundary);
+        if (!boundary || boundary.memoizedState == null) {
+          visit.lazyBoundary = null;
+          if (boundary) {
+            visit.resolution = screenResolution(visit.chain);
+            resolveVisit(visit, true);
+          }
+        }
+      }
+    }
     if (!checkScheduled && containerCount() === 0) {
       checkScheduled = true;
       setTimeout(checkRouteProps, 0);