@keepsnappy/react-native 0.0.0-stage → 0.1.0-alpha.12

package/js/sdk/screens.ts

@@ -0,0 +1,586 @@
+// Screen visits. The focused route chain comes from the navigation container's
+// state (nav.ts); without a container, from the screen fibers' `route` props.
+// Every chain change is a visit `screen:<chain>#<n>`, where n counts visits of
+// that chain since launch. A visit starts at the touch, link, dispatch or state
+// time that caused it and ends at the next action (touch, link or dispatch), the
+// next visit, when the app goes to the background, or when the run is flushed;
+// never after a time limit. The navigator reports a visit only after the commit that mounted the
+// screen, so a visit caused by a link or a dispatch is back-dated to it and the
+// window takes the commits since then from the ring buffer (core.ts backfill).
+// react-native-screens' native will/did appear times are attached as
+// information; they never decide the window's end.
+// The first visit of the process is the launch screen (REQ-MEAS-22): it starts
+// when the app started its first surface, whatever opened it (a plain launch,
+// the launch URL or a touch), so it holds the whole launch on every delivery path.
+
+import {
+  fmt,
+  isWindowOpen,
+  markers,
+  now,
+  onAfterCommit,
+  onWindowsEnd,
+  perfLog,
+  setRetainFloor,
+  settings,
+} from './core';
+import { retainFloorOf } from './retain-floor';
+import { type CauseRoot, currentCause, latestActionAt, launchedAt, launchRootId } from './causes';
+import { routeOfScreenHost, routes } from './fiber';
+import {
+  lastPressStart,
+  type NativeScreenEvent,
+  nativeLagStats,
+  nativeScreenEvents,
+  onNativeScreenEvent,
+  onPressStart,
+} from './interactions';
+import {
+  consumeAction,
+  containerCount,
+  type NavAction,
+  type NavSnapshot,
+  navStats,
+  onNavAction,
+  onNavSnapshot,
+  type RoutePart,
+  recordNavCost,
+  resolveRouteKey,
+} from './nav';
+
+// Information only (the native appear times attached to a visit), never a window edge.
+const NATIVE_MATCH_SLACK_MS = 100;
+// Information only: native screen events are named after the state that holds their key has been read.
+const RESOLVE_DELAY_MS = 250;
+const MAX_LISTED = 100;
+
+type StartSource = 'launch' | 'touch' | 'link' | 'action' | 'cause' | 'state';
+type NameSource = 'state' | 'routeProps';
+
+interface Visit {
+  key: string;
+  name: string;
+  chain: RoutePart[];
+  chainKey: string;
+  keyChain: string;
+  visit: number;
+  t0: number;
+  openedAt: number;
+  endedAt: number | null;
+  startSource: StartSource;
+  actionType: string | null;
+  stateT: number;
+  touchName: string | null;
+  nameSource: NameSource;
+  extendedFrom: string | null;
+  launch: boolean;
+  cause: CauseRoot | null;
+}
+
+interface Resolution {
+  screenId: string | null;
+  routeKey: string | null;
+  name: string | null;
+  path: string | null;
+  resolved: boolean;
+  via: 'screenId' | 'route' | null;
+}
+
+let current: Visit | null = null;
+let seq = 0;
+const visitsByChain = new Map<string, number>();
+let lastActionAt = -Infinity;
+interface AppLink {
+  t: number;
+  via: string;
+  url: string;
+  cause: CauseRoot | null;
+}
+let pendingLink: AppLink | null = null;
+let lastLinkAt = -Infinity;
+let initialLinkSeen = false;
+let checkScheduled = false;
+let launchVisitOpened = false;
+let windowsEndedSinceStart = false;
+let windowsEndedAt = -Infinity;
+type Press = NonNullable<ReturnType<typeof lastPressStart>>;
+// Touches since the current visit opened: a later visit may have been caused by any of them (two quick taps).
+let pressesSinceVisit: Press[] = [];
+// One URL event reaches every app listener in the same task; only the first delivery counts.
+let linkTaskOpen = false;
+
+const stats = {
+  visits: 0,
+  extended: 0,
+  sameNamesNewKeys: 0,
+  links: 0,
+  startSources: { launch: 0, touch: 0, link: 0, action: 0, cause: 0, state: 0 } as Record<
+    StartSource,
+    number
+  >,
+  nameSources: { state: 0, routeProps: 0 } as Record<NameSource, number>,
+  ends: {} as Record<string, number>,
+  firstVisitAt: null as number | null,
+  native: {
+    byType: {} as Record<string, number>,
+    resolved: 0,
+    unresolved: 0,
+    screenIds: new Map<string, { resolved: boolean; name: string | null }>(),
+  },
+};
+
+const keyChainOf = (chain: RoutePart[]) =>
+  chain.map(part => part.key ?? part.name).join('\u0001');
+
+const resolveEvent = (event: NativeScreenEvent): Resolution => {
+  if (event.resolution) {
+    return event.resolution as Resolution;
+  }
+  const host = event.host;
+  const route = host
+    ? routeOfScreenHost(host)
+    : { screenId: null, routeKey: null, routeName: null };
+  const indexed = route.routeKey ? resolveRouteKey(route.routeKey) : null;
+  const resolution: Resolution = {
+    screenId: route.screenId,
+    routeKey: route.routeKey,
+    name: indexed?.name ?? route.routeName,
+    path: indexed?.path ?? null,
+    resolved: indexed !== null,
+    via: route.screenId ? 'screenId' : route.routeKey ? 'route' : null,
+  };
+  // An unresolved result is retried later: the state that holds the key may
+  // not have been read yet.
+  if (resolution.resolved) {
+    event.resolution = resolution;
+  }
+  return resolution;
+};
+
+const logNativeEvent = (event: NativeScreenEvent) => {
+  const r = resolveEvent(event);
+  stats.native.byType[event.type] = (stats.native.byType[event.type] ?? 0) + 1;
+  if (r.resolved) {
+    stats.native.resolved++;
+  } else {
+    stats.native.unresolved++;
+  }
+  if (r.screenId && stats.native.screenIds.size < MAX_LISTED) {
+    stats.native.screenIds.set(r.screenId, {
+      resolved: r.resolved,
+      name: r.path ?? r.name,
+    });
+  }
+  perfLog(
+    `screen.native type=${event.type} tag=${event.tag ?? '-'} host=${event.hostType ?? '-'} t=${fmt(event.t)} lagMs=${fmt(event.deliveredT - event.t)} screenId=${r.screenId ?? '-'} key=${r.routeKey ?? '-'} name=${r.path ?? r.name ?? '-'} resolved=${r.resolved} via=${r.via ?? '-'}`,
+  );
+};
+
+const nativeFor = (visit: Visit) => {
+  const from = visit.t0 - NATIVE_MATCH_SLACK_MS;
+  const to = visit.endedAt ?? now();
+  const keys = new Set(
+    visit.chain.map(part => part.key).filter((key): key is string => !!key),
+  );
+  const inWindow = nativeScreenEvents.filter(e => e.t >= from && e.t <= to);
+  const matched = inWindow.filter(e => {
+    const key = resolveEvent(e).routeKey;
+    return key !== null && keys.has(key);
+  });
+  const appearCount = inWindow.filter(e => e.type === 'appear').length;
+  if (matched.length === 0) {
+    return inWindow.length === 0
+      ? null
+      : { matched: 0, inWindow: inWindow.length, appearCount };
+  }
+  const first = (type: string) => matched.find(e => e.type === type)?.t ?? null;
+  const willAppearT = first('willAppear');
+  const didAppearT = first('appear');
+  const screen = resolveEvent(
+    matched.find(e => e.type === 'appear' || e.type === 'willAppear') ??
+      (matched[0] as NativeScreenEvent),
+  );
+  return {
+    matched: matched.length,
+    inWindow: inWindow.length,
+    appearCount,
+    screenId: screen.screenId,
+    routeKey: screen.routeKey,
+    resolved: screen.resolved,
+    willAppearT,
+    didAppearT,
+    // Informational only: mostly the configured animation length.
+    transitionMs:
+      willAppearT !== null && didAppearT !== null
+        ? didAppearT - willAppearT
+        : null,
+    events: matched.slice(0, 20).map(e => {
+      const r = resolveEvent(e);
+      return {
+        type: e.type,
+        t: e.t,
+        lagMs: e.deliveredT - e.t,
+        key: r.routeKey,
+        name: r.path ?? r.name,
+      };
+    }),
+  };
+};
+
+const details = (visit: Visit) => () => ({
+  chain: visit.chain,
+  chainKey: visit.chainKey,
+  visit: visit.visit,
+  nameSource: visit.nameSource,
+  startSource: visit.startSource,
+  actionType: visit.actionType,
+  stateT: visit.stateT,
+  detectedAt: visit.openedAt,
+  touchName: visit.touchName,
+  extendedFrom: visit.extendedFrom,
+  launch: visit.launch,
+  cause: visit.cause ? `${visit.cause.source}#${visit.cause.id}` : null,
+  native: nativeFor(visit),
+});
+
+const endVisit = (reason: string, at?: number) => {
+  const visit = current;
+  if (!visit || visit.endedAt !== null) {
+    return;
+  }
+  const t = Math.max(visit.t0, at ?? now());
+  visit.endedAt = t;
+  stats.ends[reason] = (stats.ends[reason] ?? 0) + 1;
+  if (isWindowOpen(visit.key)) {
+    markers.end(visit.key, reason, t);
+  }
+};
+
+// A visit starts at the action that caused it (REQ-MEAS-28: events, not time limits). The cause tracker names the action
+// behind the state change; the visit starts at that touch, link or dispatch. With no known cause it starts at the first
+// touch, link or dispatch since the previous visit opened (the one that ended it, so the mount is inside), else at the
+// state event.
+const chooseStart = (snapshot: NavSnapshot, floor: number) => {
+  const inSpan = (t: number) => t >= floor && t <= snapshot.stateT;
+  const presses = pressesSinceVisit.filter(p => inSpan(p.t0));
+  const link = pendingLink && inSpan(pendingLink.t) ? pendingLink : null;
+  const action = snapshot.action && inSpan(snapshot.action.t) ? snapshot.action : null;
+  const touchStart = (p: Press) => ({
+    t0: p.t0,
+    source: 'touch' as const,
+    touchName: p.name,
+    action,
+    link: null,
+  });
+  const linkStart = (l: AppLink) => ({
+    t0: l.t,
+    source: 'link' as const,
+    touchName: null,
+    action,
+    link: l,
+  });
+  const actionStart = (a: NavAction) => ({
+    t0: a.t,
+    source: 'action' as const,
+    touchName: null,
+    action: a,
+    link: null,
+  });
+  const stateStart = () => ({
+    t0: snapshot.stateT,
+    source: 'state' as const,
+    touchName: null,
+    action: null,
+    link: null,
+  });
+  const cause = snapshot.cause;
+  if (cause) {
+    const press = presses.find(p => p.cause?.id === cause.id);
+    if (press) {
+      return touchStart(press);
+    }
+    if (link && link.cause?.id === cause.id) {
+      return linkStart(link);
+    }
+    if (action && action.cause?.id === cause.id) {
+      return actionStart(action);
+    }
+    // A cause with no event of its own here (data pushed to the app, typing, the launch's own code) starts the visit
+    // at its own time, when that is after the previous visit opened.
+    return inSpan(cause.t)
+      ? { t0: cause.t, source: 'cause' as const, touchName: null, action: null, link: null }
+      : stateStart();
+  }
+  const first = [
+    ...presses.map(p => ({ t: p.t0, start: () => touchStart(p) })),
+    link ? { t: link.t, start: () => linkStart(link) } : null,
+    action ? { t: action.t, start: () => actionStart(action) } : null,
+  ]
+    .filter((c): c is { t: number; start: () => ReturnType<typeof touchStart> } => c !== null)
+    .sort((x, y) => x.t - y.t)[0];
+  return first ? first.start() : stateStart();
+};
+
+const nameOf = (chainKey: string, visit: number) =>
+  `screen:${chainKey}#${visit}`;
+
+const isStrictExtension = (prev: RoutePart[], next: RoutePart[]) =>
+  next.length > prev.length &&
+  prev.every(
+    (part, i) =>
+      part.name === next[i]?.name &&
+      (part.key ?? null) === (next[i]?.key ?? null),
+  );
+
+const extend = (visit: Visit, chain: RoutePart[], chainKey: string) => {
+  const previous = visitsByChain.get(visit.chainKey) ?? 1;
+  visitsByChain.set(visit.chainKey, previous - 1);
+  const n = (visitsByChain.get(chainKey) ?? 0) + 1;
+  visitsByChain.set(chainKey, n);
+  visit.extendedFrom ??= visit.chainKey;
+  visit.chain = chain;
+  visit.chainKey = chainKey;
+  visit.keyChain = keyChainOf(chain);
+  visit.visit = n;
+  visit.name = nameOf(chainKey, n);
+  markers.rename(visit.key, visit.name);
+  stats.extended++;
+};
+
+const onSnapshot = (snapshot: NavSnapshot, nameSource: NameSource) => {
+  if (!settings.hook || snapshot.chain.length === 0) {
+    return;
+  }
+  const chain = snapshot.chain;
+  const chainKey = chain.map(part => part.name).join('/');
+  const keyChain = keyChainOf(chain);
+  const prev = current;
+  if (prev && prev.keyChain === keyChain) {
+    return;
+  }
+  if (prev && prev.chainKey === chainKey) {
+    stats.sameNamesNewKeys++;
+  }
+  const detectedAt = now();
+  // A chain that only grows with no action since the visit opened, under the same cause, is the same navigation
+  // finishing (a nested navigator reporting its initial route), not a new visit.
+  if (
+    prev &&
+    prev.endedAt === null &&
+    (prev.cause === null ||
+      snapshot.cause === null ||
+      prev.cause.id === snapshot.cause.id) &&
+    lastActionAt <= prev.openedAt &&
+    lastLinkAt <= prev.openedAt &&
+    (lastPressStart()?.t0 ?? -Infinity) <= prev.openedAt &&
+    isStrictExtension(prev.chain, chain)
+  ) {
+    perfLog(`screen ${prev.name} extended -> ${chainKey} t=${fmt(detectedAt)}`);
+    extend(prev, chain, chainKey);
+    return;
+  }
+  endVisit('next-screen', detectedAt);
+  const launch = !launchVisitOpened;
+  launchVisitOpened = true;
+  const launchT = launch ? launchedAt() : null;
+  const start =
+    launchT !== null
+      ? {
+          t0: launchT,
+          source: 'launch' as const,
+          touchName: null,
+          action: null,
+          link: pendingLink,
+        }
+      : chooseStart(snapshot, Math.max(prev?.openedAt ?? -Infinity, windowsEndedAt));
+  consumeAction();
+  pendingLink = null;
+  const n = (visitsByChain.get(chainKey) ?? 0) + 1;
+  visitsByChain.set(chainKey, n);
+  seq++;
+  const visit: Visit = {
+    key: `screen#${seq}`,
+    name: nameOf(chainKey, n),
+    chain,
+    chainKey,
+    keyChain,
+    visit: n,
+    t0: start.t0,
+    openedAt: detectedAt,
+    endedAt: null,
+    startSource: start.source,
+    actionType: start.action?.type ?? null,
+    stateT: snapshot.stateT,
+    touchName: start.touchName,
+    nameSource,
+    extendedFrom: null,
+    launch,
+    cause: snapshot.cause,
+  };
+  current = visit;
+  pressesSinceVisit = [];
+  stats.visits++;
+  stats.startSources[start.source]++;
+  stats.nameSources[nameSource]++;
+  stats.firstVisitAt ??= detectedAt;
+  perfLog(
+    `screen ${prev?.name ?? '-'} -> ${visit.name} source=${start.source}${start.link ? ` link=${start.link.via}` : ''}${visit.actionType ? ` action=${visit.actionType}` : ''} names=${nameSource}${launch ? ' launch' : ''} cause=${snapshot.cause ? `${snapshot.cause.source}#${snapshot.cause.id}` : '-'} t0=${fmt(visit.t0)} stateT=${fmt(snapshot.stateT)} detected=${fmt(detectedAt)}`,
+  );
+  markers.start(visit.name, {
+    key: visit.key,
+    kind: 'screen',
+    at: visit.t0,
+    details: details(visit),
+    // The launch window belongs to the launch, whatever action came before the first state (REQ-MEAS-22).
+    ...(start.source === 'launch' ? { anchor: launchRootId() ?? undefined } : {}),
+  });
+};
+
+const onAction = (action: NavAction) => {
+  lastActionAt = action.t;
+  if (current && current.endedAt === null && action.t > current.openedAt) {
+    endVisit('next-action', action.t);
+  }
+};
+
+// Called by the link wrapper (links.ts) before the app sees an app URL. The
+// launch URL is read more than once at startup; only the first read counts.
+export const noteAppLink = (url: string, via: string) => {
+  const initial = via !== 'event';
+  if (initial && initialLinkSeen) {
+    return;
+  }
+  const t = now();
+  if (!initial && pendingLink && pendingLink.url === url && linkTaskOpen) {
+    return;
+  }
+  if (!initial) {
+    linkTaskOpen = true;
+    Promise.resolve().then(() => {
+      linkTaskOpen = false;
+    });
+  }
+  initialLinkSeen ||= initial;
+  pendingLink = { t, via, url, cause: currentCause() };
+  lastLinkAt = t;
+  stats.links++;
+  perfLog(`screen link via=${via} t=${fmt(t)}`);
+  if (current && current.endedAt === null && t > current.openedAt) {
+    endVisit('next-link', t);
+  }
+};
+
+const onPress = (t0: number) => {
+  const press = lastPressStart();
+  if (press) {
+    pressesSinceVisit.push(press);
+  }
+  if (current && current.endedAt === null && t0 > current.openedAt) {
+    endVisit('next-action', t0);
+  }
+};
+
+// Fallback when no navigation container was found: the focused chain is
+// rebuilt from the screen fibers' `route` props after each commit.
+const focusedChainFromRoutes = (): RoutePart[] => {
+  const chain: { name: string; key: string; depth: number }[] = [];
+  for (const entry of routes.values()) {
+    let focused = false;
+    try {
+      focused = entry.navigation.isFocused();
+    } catch {
+      focused = false;
+    }
+    if (focused) {
+      chain.push({ name: entry.name, key: entry.key, depth: entry.depth });
+    }
+  }
+  chain.sort((a, b) => a.depth - b.depth);
+  return chain.map(({ name, key }) => ({ name, key }));
+};
+
+const checkRouteProps = () => {
+  checkScheduled = false;
+  if (!settings.hook || containerCount() > 0) {
+    return;
+  }
+  const t0 = now();
+  const chain = focusedChainFromRoutes();
+  onSnapshot({ chain, stateT: t0, action: null, cause: currentCause() }, 'routeProps');
+  recordNavCost(now() - t0);
+};
+
+export const screenStats = () => ({
+  mode:
+    containerCount() > 0
+      ? 'container'
+      : routes.size > 0
+        ? 'routeProps'
+        : 'none',
+  current: current?.name ?? null,
+  visits: stats.visits,
+  firstVisitAt: stats.firstVisitAt,
+  extended: stats.extended,
+  links: stats.links,
+  pressesWaiting: pressesSinceVisit.length,
+  sameNamesNewKeys: stats.sameNamesNewKeys,
+  startSources: { ...stats.startSources },
+  nameSources: { ...stats.nameSources },
+  ends: { ...stats.ends },
+  visitsByChain: Object.fromEntries(
+    [...visitsByChain].filter(([, n]) => n > 0).slice(0, MAX_LISTED),
+  ),
+  trackedRoutes: routes.size,
+  nav: navStats(),
+  native: {
+    byType: { ...stats.native.byType },
+    resolved: stats.native.resolved,
+    unresolved: stats.native.unresolved,
+    lag: nativeLagStats(),
+    screenIds: Object.fromEntries(stats.native.screenIds),
+  },
+});
+
+const screenRetainFloor = (): number =>
+  retainFloorOf(current?.openedAt ?? null, !windowsEndedSinceStart, launchedAt(), latestActionAt());
+
+// The flush or the app leaving the foreground ended every window: no later visit starts before it, so the touches and
+// the link waiting for a visit are dropped, and the launch window no longer holds the ring at the app's start.
+const onWindowsEnded = (reason: string) => {
+  if (reason !== 'flush' && reason !== 'background') {
+    return;
+  }
+  windowsEndedSinceStart = true;
+  windowsEndedAt = now();
+  pressesSinceVisit = [];
+  pendingLink = null;
+};
+
+export const resetLaunchForTest = () => {
+  launchVisitOpened = false;
+  windowsEndedSinceStart = false;
+  pressesSinceVisit = [];
+};
+
+let installed = false;
+
+export const installScreens = () => {
+  if (installed) {
+    return;
+  }
+  installed = true;
+  setRetainFloor(screenRetainFloor);
+  onWindowsEnd(onWindowsEnded);
+  onNavSnapshot(snapshot => onSnapshot(snapshot, 'state'));
+  onNavAction(onAction);
+  onPressStart(onPress);
+  onNativeScreenEvent(event => {
+    setTimeout(() => logNativeEvent(event), RESOLVE_DELAY_MS);
+  });
+  onAfterCommit(() => {
+    if (!checkScheduled && containerCount() === 0) {
+      checkScheduled = true;
+      setTimeout(checkRouteProps, 0);
+    }
+  });
+};

package/js/sdk/stream.ts

@@ -0,0 +1,125 @@
+// The commit stream (phase 1 of "the SDK records, the backend decides", REQ-MEAS-32): every React commit of the process
+// once, judged by a window or not, with the facts the backend needs to split work by cause itself: its updates as parts
+// (the roots behind them, the timer run and the store write they came from) and its render time (null when the renderer
+// does not time it). Every root the tracker created and every store write go in tables next to the commits, with the
+// timer runs a part or a write names. Cut into
+// segment files at every flush and when the app leaves the foreground, so the phone never holds a whole run.
+
+import type { CauseRoot, CommitCauses, StoreWrite, TimerRun } from './causes';
+import { factIds, factsOf } from './causes';
+import { buildReactExport, type ExportCommit, type ExportFiber } from './profile-export';
+
+export interface StreamCommit {
+  /** The process's commit count at this commit; windows list the seqs they were given. */
+  seq: number;
+  t: number;
+  /** React's own render time of the commit; null on a renderer that does not time it. */
+  renderMs: number | null;
+  causes: CommitCauses;
+  /** The exported fibers (React export on), else none. */
+  fibers: ExportFiber[] | null;
+  updaters: string[] | null;
+}
+
+/** Fibers a segment keeps; past it, commits keep their facts and lose their fibers. */
+export const MAX_SEGMENT_FIBERS = 200000;
+
+export const streamFileName = (processId: string, seq: number) => `stream-${processId}-${seq}.json`;
+
+export const createStream = (processId: string, maxFibers = MAX_SEGMENT_FIBERS) => {
+  let seq = 0;
+  let t0: number | null = null;
+  let roots: CauseRoot[] = [];
+  let writes: StoreWrite[] = [];
+  let commits: StreamCommit[] = [];
+  let fibers = 0;
+  let fibersDropped = 0;
+
+  return {
+    /** The segment the next commit goes into: windows name it so the backend can tell a stream is complete. */
+    seq: () => seq,
+    size: () => commits.length,
+    noteRoot(root: CauseRoot) {
+      roots.push(root);
+    },
+    noteWrite(write: StoreWrite) {
+      writes.push(write);
+    },
+    noteCommit(commit: StreamCommit) {
+      t0 ??= commit.t;
+      if (commit.fibers && fibers + commit.fibers.length > maxFibers) {
+        fibersDropped += commit.fibers.length;
+        commits.push({ ...commit, fibers: null });
+        return;
+      }
+      fibers += commit.fibers?.length ?? 0;
+      commits.push(commit);
+    },
+    /** Builds the segment and starts the next one; null when it holds nothing. */
+    cut(t1: number): { name: string; json: string; commits: number; fibersDropped: number } | null {
+      if (commits.length === 0 && roots.length === 0 && writes.length === 0) {
+        return null;
+      }
+      const runs = new Map<number, TimerRun>();
+      for (const w of writes) if (w.run) runs.set(w.run.id, w.run);
+      const exportCommits: ExportCommit[] = commits.map(c => {
+        const facts = factsOf(c.causes.set);
+        for (const part of facts.parts) if (part.run) runs.set(part.run.id, part.run);
+        return {
+          t: c.t,
+          durationMs: c.renderMs ?? 0,
+          updaters: c.updaters,
+          causes: [],
+          carrier: null,
+          store: null,
+          task: null,
+          fibers: c.fibers ?? [],
+          facts: {
+            seq: c.seq,
+            renderMs: c.renderMs,
+            unknown: c.causes.unknown,
+            parts: facts.parts.map(p => [[...p.ids], p.run?.id ?? null, p.write?.id ?? null] as [number[], number | null, number | null]),
+            more: facts.more,
+            fibers: c.fibers !== null,
+          },
+        };
+      });
+      const start = t0 ?? roots[0]?.t ?? t1;
+      const segment = {
+        v: 1,
+        kind: 'commit-stream',
+        process: processId,
+        seq,
+        t0: start,
+        t1,
+        fibersDropped,
+        roots: roots.map(r => ({ id: r.id, kind: r.kind, source: r.source, t: r.t })),
+        runs: [...runs.values()].map(r => ({
+          id: r.id,
+          timer: r.timer,
+          t: r.t,
+          registeredT: r.registeredT,
+          registered: factIds(factsOf(r.registered)),
+          net: r.net,
+        })),
+        writes: writes.map(w => ({
+          id: w.id,
+          store: w.store,
+          t: w.t,
+          writer: factIds(factsOf(w.writer)),
+          run: w.run?.id ?? null,
+        })),
+        react: buildReactExport(start, exportCommits),
+      };
+      const out = { name: streamFileName(processId, seq), json: JSON.stringify(segment), commits: commits.length, fibersDropped };
+      seq++;
+      t0 = null;
+      roots = [];
+      writes = [];
+      commits = [];
+      fibers = 0;
+      fibersDropped = 0;
+      return out;
+    },
+  };
+};