@buoy-gg/network 7.0.12 → 7.0.13

package/lib/commonjs/network/utils/networkSelectionStore.js

@@ -0,0 +1,193 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.networkSelectionStore = exports.DEFAULT_SETTLE_MS = void 0;
+exports.toSelectionIds = toSelectionIds;
+/**
+ * Which request the detail view is showing, and where it sits in the list —
+ * the prev/next CURSOR.
+ *
+ * ## Why this is a store and not `useState` in the modal
+ *
+ * It used to be `useState` in `NetworkModalInner`. Every tap on Previous/Next
+ * therefore dirtied the modal ROOT, which re-rendered `JsModal` (1833 lines,
+ * nine useStates, animations/gestures/persistence — and it can never bail out,
+ * because its `header` prop is a fresh object literal every render), the whole
+ * header, and all five screens. None of them care which request is selected;
+ * they only care THAT one is.
+ *
+ * This is the same argument `NetworkModal`'s own header comment already makes
+ * about network events ("with the subscription here, 15 events re-rendered
+ * JsModal + every header button 15×"). Stepping is that same class of
+ * high-frequency churn, and it was sitting in the same wrong place. Now the
+ * root subscribes to `hasSelection` — a boolean that flips twice a session —
+ * while the footer, the body and the header's pin actions subscribe to the
+ * parts they actually render.
+ *
+ * ## The three cursors
+ *
+ * `selectedId` is where the USER is. It moves on the tap, synchronously.
+ *
+ * `bodyId` is what the detail body is allowed to render, and it deliberately
+ * LAGS: drawing a request means handing its payload to the virtualized data
+ * viewer to flatten, and that has no business blocking the next tap. It
+ * catches up only once the selection has held still for `settleMs`, so a
+ * burst of taps renders the request you land on and none of the ones you flew
+ * past. (`useDeferredValue` was tried here first and is the wrong tool — it
+ * lowers the priority of that work without preventing it, so every settled
+ * step still queued a flatten and each one delayed the touch behind it.)
+ *
+ * `renderedId` is what actually made it to the screen, reported by the detail
+ * screen after commit. Nothing in the product reads it; it exists so the
+ * benchmark harness can measure "time until request N was really painted"
+ * separately from "time until the cursor reached N".
+ */
+
+/**
+ * How long the selection must hold still before the body renders it. Short
+ * enough that a single step reads as immediate (the footer and header have
+ * already moved), long enough that a burst collapses to one render.
+ */
+const DEFAULT_SETTLE_MS = exports.DEFAULT_SETTLE_MS = 120;
+class NetworkSelectionStore {
+  ids = [];
+  index = -1;
+  selectedId = null;
+  bodyId = null;
+  renderedId = null;
+  settleMs = DEFAULT_SETTLE_MS;
+  settleTimer = null;
+  subscribers = new Set();
+  snapshot = this.buildSnapshot();
+  buildSnapshot() {
+    return {
+      ids: this.ids,
+      index: this.index,
+      selectedId: this.selectedId,
+      bodyId: this.bodyId,
+      renderedId: this.renderedId
+    };
+  }
+
+  /**
+   * One immutable snapshot per mutation, so subscribers can identity-compare
+   * and `useSyncExternalStore` stays happy.
+   */
+  emit() {
+    this.snapshot = this.buildSnapshot();
+    for (const subscriber of this.subscribers) subscriber(this.snapshot);
+  }
+  getState() {
+    return this.snapshot;
+  }
+  subscribe(subscriber) {
+    this.subscribers.add(subscriber);
+    return () => {
+      this.subscribers.delete(subscriber);
+    };
+  }
+
+  /**
+   * Publish the navigable order. Called by the stepper whenever its derived
+   * list changes (filter, search, pins, new requests arriving).
+   *
+   * The cursor is re-anchored BY ID, not by position: the live list is
+   * newest-first and new requests are prepended, so holding an index would
+   * silently slide the selection onto a different request every time one
+   * landed.
+   */
+  setIds(ids) {
+    const sameIds = ids.length === this.ids.length && ids.every((id, i) => id === this.ids[i]);
+    if (sameIds) return;
+    this.ids = ids;
+    this.index = this.selectedId == null ? -1 : ids.indexOf(this.selectedId);
+    this.emit();
+  }
+  select(id) {
+    if (id === this.selectedId) return;
+    this.selectedId = id;
+    this.index = id == null ? -1 : this.ids.indexOf(id);
+    this.scheduleBody(id);
+    this.emit();
+  }
+  clear() {
+    this.select(null);
+  }
+
+  /**
+   * Move the cursor. O(1) — the whole reason `index` is stored rather than
+   * re-derived with a `findIndex` on every render.
+   *
+   * Returns the id it landed on, or null if the move was out of bounds (the
+   * footer disables its arrows at the ends, but the benchmark driver calls
+   * this directly and needs to know when it has run off the end).
+   */
+  step(delta) {
+    if (this.index < 0) return null;
+    const next = this.index + delta;
+    if (next < 0 || next >= this.ids.length) return null;
+    const id = this.ids[next];
+    this.selectedId = id;
+    this.index = next;
+    this.scheduleBody(id);
+    this.emit();
+    return id;
+  }
+
+  /**
+   * Opening and closing skip the settle delay: there is no in-flight render to
+   * protect on a null↔id transition, and waiting there just reads as a hang.
+   * Only id → id steps debounce.
+   */
+  scheduleBody(id) {
+    if (this.settleTimer != null) {
+      clearTimeout(this.settleTimer);
+      this.settleTimer = null;
+    }
+    if (id == null || this.bodyId == null || this.settleMs <= 0) {
+      this.bodyId = id;
+      return;
+    }
+    this.settleTimer = setTimeout(() => {
+      this.settleTimer = null;
+      if (this.bodyId === this.selectedId) return;
+      this.bodyId = this.selectedId;
+      this.emit();
+    }, this.settleMs);
+  }
+
+  /** Benchmark toggle — `?settle=0` measures the gate's contribution. */
+  setSettleMs(ms) {
+    this.settleMs = Math.max(0, ms);
+  }
+  getSettleMs() {
+    return this.settleMs;
+  }
+
+  /** Reported by the detail screen after commit. Instrumentation only. */
+  reportRendered(id) {
+    if (id === this.renderedId) return;
+    this.renderedId = id;
+    this.emit();
+  }
+
+  /** Test/bench helper — drop all cursor state without touching the events. */
+  reset() {
+    if (this.settleTimer != null) clearTimeout(this.settleTimer);
+    this.settleTimer = null;
+    this.ids = [];
+    this.index = -1;
+    this.selectedId = null;
+    this.bodyId = null;
+    this.renderedId = null;
+    this.emit();
+  }
+}
+const networkSelectionStore = exports.networkSelectionStore = new NetworkSelectionStore();
+
+/** Convenience for publishing an event list as the navigable order. */
+function toSelectionIds(events) {
+  return events.map(event => event.id);
+}

package/lib/module/index.js

@@ -41,6 +41,10 @@ export { useNetworkBadgeCounts } from "./network/hooks/useNetworkBadgeCounts";
 // implementations can't disagree about where a pin goes.
 export { useNetworkSaved } from "./network/hooks/useNetworkSaved";
 export { splitPinned } from "./network/utils/withPinnedFirst";
+// The prev/next CURSOR. Exported because the tool-bench harness drives
+// `step(+1)` directly to time stepping without going through the UI, and
+// because `setSettleMs` is the toggle its benchmark cases flip.
+export { networkSelectionStore, DEFAULT_SETTLE_MS } from "./network/utils/networkSelectionStore";
 export { TickProvider, useTickEveryMinute } from "./network/hooks/useTickEveryMinute";
 
 // =============================================================================

package/lib/module/network/components/NetworkDetailStepper.js

@@ -7,8 +7,8 @@
  * It is its OWN leaf (rule3) because it is the only part of the detail screen
  * that needs the event LIST. Subscribing here keeps the request stream out of
  * the detail body's render path, which is the expensive subtree (headers,
- * bodies, JSON viewers, diff views): a request arriving re-renders this
- * ~30-node footer and nothing else.
+ * bodies, JSON viewers): a request arriving re-renders this ~30-node footer
+ * and nothing else.
  *
  * The order it steps through is EXACTLY what the list screen renders —
  * `[...pinned, ...rest]` off the same `useNetworkEventList` + `splitPinned`
@@ -18,24 +18,33 @@
  * "request N of <what the list is showing>", never "N of everything ever
  * captured". Detail opened from the Saved screen steps through the SAVED
  * list instead (with its own search applied), for the same reason.
+ *
+ * This component OWNS the navigable order but not the cursor: it publishes
+ * the ordered ids into `networkSelectionStore` and reads the cursor back.
+ * That split is what makes stepping O(1) (the store keeps the index, so
+ * there is no `findIndex` per render) and what lets the benchmark harness
+ * drive `step(+1)` directly without going through the UI.
  */
 
-import { memo, useMemo } from "react";
+import { memo, useEffect, useMemo } from "react";
 import { EventStepperFooter } from "@buoy-gg/shared-ui";
 import { useNetworkEventList } from "../hooks/useNetworkEventList";
 import { useNetworkSaved } from "../hooks/useNetworkSaved";
+import { useNetworkCursor } from "../hooks/useNetworkSelection";
+import { networkSelectionStore, toSelectionIds } from "../utils/networkSelectionStore";
 import { splitPinned } from "../utils/withPinnedFirst";
 import { selectSavedEvents } from "../utils/selectSavedEvents";
 import { jsx as _jsx } from "react/jsx-runtime";
+/** Stable identities — the store is a singleton, so these never need to change. */
+const stepPrevious = () => networkSelectionStore.step(-1);
+const stepNext = () => networkSelectionStore.step(1);
 export const NetworkDetailStepper = /*#__PURE__*/memo(function NetworkDetailStepper({
-  eventId,
   paused,
   filter,
   ignoredPatterns,
   isPro,
   fromSaved,
   savedSearch,
-  onSelect,
   applySafeAreaInset
 }) {
   const {
@@ -63,7 +72,16 @@ export const NetworkDetailStepper = /*#__PURE__*/memo(function NetworkDetailStep
     } = splitPinned(visibleEvents, pinnedEvents, pinnedLiveIds);
     return pinned.length === 0 ? rest : [...pinned, ...rest];
   }, [fromSaved, savedRecords, savedSearch, isPro, visibleEvents, pinnedEvents, pinnedLiveIds]);
-  const index = ordered.findIndex(event => event.id === eventId);
+
+  // Publish the navigable order. `setIds` re-anchors the cursor BY ID and
+  // no-ops when the ids are unchanged, so this is safe to run every render.
+  useEffect(() => {
+    networkSelectionStore.setIds(toSelectionIds(ordered));
+  }, [ordered]);
+  const {
+    index,
+    total
+  } = useNetworkCursor();
 
   // Not in the list at all: the filter changed under it while it was open, it
   // aged past the 500-request cap, or it is a saved snapshot with no live twin.
@@ -75,16 +93,10 @@ export const NetworkDetailStepper = /*#__PURE__*/memo(function NetworkDetailStep
   // the same direction as scrolling up, which is what the arrow means here.
   return /*#__PURE__*/_jsx(EventStepperFooter, {
     currentIndex: index,
-    totalItems: ordered.length,
+    totalItems: total,
     itemLabel: "Request",
     applySafeAreaInset: applySafeAreaInset,
-    onPrevious: () => {
-      const target = ordered[index - 1];
-      if (target) onSelect(target.id);
-    },
-    onNext: () => {
-      const target = ordered[index + 1];
-      if (target) onSelect(target.id);
-    }
+    onPrevious: stepPrevious,
+    onNext: stepNext
   });
 });

package/lib/module/network/components/NetworkEventDetailView.js

@@ -1,6 +1,6 @@
 "use strict";
 
-import { useState, useEffect, useMemo } from "react";
+import { useState, useEffect, useMemo, memo } from "react";
 import { View, Text, StyleSheet, ScrollView, TouchableOpacity } from "react-native";
 import { Clock, Upload, Download, AlertCircle, ChevronDown, ChevronUp, Lock, Unlock, FileJson, Filter, Globe, Link, Copy, InlineCopyButton, macOSColors, useFeatureGate, UpgradeModal } from "@buoy-gg/shared-ui";
 import { formatBytes, formatDuration, formatHttpStatus } from "../utils/formatting";
@@ -16,6 +16,10 @@ import { useNetworkBodyResolver } from "../sync/networkBodyResolver";
  */
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const NEUTRAL_ICON = macOSColors.semantic.success;
+
+/** Hoisted so the defaults don't mint a new Set/function per render. */
+const EMPTY_PATTERNS = new Set();
+const noop = () => {};
 /**
  * The measurable slice of a request's lifetime, as proportional bars.
  *
@@ -81,6 +85,17 @@ const TimingPhases = ({
   });
 };
 
+/**
+ * Stand-in for a body tree while the prev/next cursor is still moving.
+ *
+ * Deliberately a fixed-height nothing: it must cost ~0 to render (that is the
+ * entire point) and it must not resize the scroll view as the real tree swaps
+ * in, or fast stepping would make the page jump under the reader.
+ */
+const BodyDeferred = () => /*#__PURE__*/_jsx(View, {
+  style: styles.bodyDeferred
+});
+
 // Component for collapsible sections matching Sentry style
 const CollapsibleSection = ({
   title,
@@ -260,11 +275,30 @@ const UrlBreakdown = ({
 /**
  * Detailed inspector rendering request/response metadata for a single network event. Designed to
  * mimic Sentry’s layout with collapsible sections, diff views, and quick copy affordances.
+ *
+ * MEMOIZED with profiling evidence, not by reflex. Two render paths hit this
+ * subtree with unchanged props:
+ *
+ *  1. `useLiveNetworkEvent` re-subscribes when the selected ID changes, and
+ *     `subscribeToEvents` replays immediately — so every step through the
+ *     prev/next footer committed the SAME event object twice, rendering this
+ *     whole tree (expanded DataViewer included) a second time for nothing.
+ *  2. Any modal-root state change (header search, mode toggle) re-renders the
+ *     shell, and the detail body has nothing to do with it.
+ *
+ * Both props besides `event` are stable by construction — `values` is memoized
+ * in `useIgnoredPatterns` and `toggle` is module-scope there — so the bail-out
+ * actually fires.
+ *
+ * Measured baseline (js-top, example-dev-build, 5 steps over 109–324KB
+ * pokeapi responses): 307ms of React work across 5 steps ≈ 61ms of JS per
+ * step. Case 1 alone is half of that, since it re-ran the whole body render.
  */
-export function NetworkEventDetailView({
+export const NetworkEventDetailView = /*#__PURE__*/memo(function NetworkEventDetailView({
   event,
-  ignoredPatterns = new Set(),
-  onTogglePattern = () => {}
+  ignoredPatterns = EMPTY_PATTERNS,
+  onTogglePattern = noop,
+  showBodies = true
 }) {
   const status = event.status ? formatHttpStatus(event.status) : null;
   const isPending = !event.status && !event.error;
@@ -408,8 +442,15 @@ ${JSON.stringify(requestDetails.responseData, null, 2)}
               style: styles.httpDurationText,
               children: formatDuration(event.duration)
             })]
-          }) : null, isPro ? /*#__PURE__*/_jsx(InlineCopyButton, {
-            value: getFullRequestDetails(),
+          }) : null, isPro ? /*#__PURE__*/_jsx(InlineCopyButton
+          // LAZY, not `getFullRequestDetails()`. CopyButton resolves a
+          // function value at press time; calling it here instead
+          // pretty-printed the headers AND both bodies on every render —
+          // four JSON.stringify passes over the full payload just to have
+          // a string nobody asked for yet. Same shape NetworkSavedScreen
+          // already uses for its copy button.
+          , {
+            value: getFullRequestDetails,
             buttonStyle: styles.copyFullButton
           }) : /*#__PURE__*/_jsx(TouchableOpacity, {
             style: styles.copyFullButton,
@@ -543,14 +584,14 @@ ${JSON.stringify(requestDetails.responseData, null, 2)}
         defaultOpen: false,
         children: /*#__PURE__*/_jsx(View, {
           style: styles.dataViewerContainer,
-          children: /*#__PURE__*/_jsx(DataViewer, {
+          children: showBodies ? /*#__PURE__*/_jsx(DataViewer, {
             title: "",
             data: requestData,
             showTypeFilter: true,
             rawMode: true,
             initialExpanded: true,
             disableCopy: !isPro
-          })
+          }) : /*#__PURE__*/_jsx(BodyDeferred, {})
         })
       }) : requestBodyOmitted ? /*#__PURE__*/_jsx(CollapsibleSection, {
         title: "Request Body",
@@ -575,14 +616,14 @@ ${JSON.stringify(requestDetails.responseData, null, 2)}
         defaultOpen: true,
         children: /*#__PURE__*/_jsx(View, {
           style: styles.dataViewerContainer,
-          children: /*#__PURE__*/_jsx(DataViewer, {
+          children: showBodies ? /*#__PURE__*/_jsx(DataViewer, {
             title: "",
             data: responseData,
             showTypeFilter: true,
             rawMode: true,
             initialExpanded: true,
             disableCopy: !isPro
-          })
+          }) : /*#__PURE__*/_jsx(BodyDeferred, {})
         })
       }) : responseBodyOmitted ? /*#__PURE__*/_jsx(CollapsibleSection, {
         title: "Response Body",
@@ -687,7 +728,7 @@ ${JSON.stringify(requestDetails.responseData, null, 2)}
       benefits: ["Copy full request details including headers and body", "Export to JSON, Markdown, or plain text", "Share request data with teammates", "Feed data to AI assistants for debugging"]
     })]
   });
-}
+});
 const styles = StyleSheet.create({
   container: {
     flex: 1,
@@ -963,6 +1004,10 @@ const styles = StyleSheet.create({
     marginHorizontal: -12,
     marginBottom: -12
   },
+  /** Placeholder for a not-yet-mounted body tree. See BodyDeferred. */
+  bodyDeferred: {
+    height: 120
+  },
   // Error box
   errorBox: {
     flexDirection: "row",

package/lib/module/network/components/NetworkHeaderLive.js

@@ -23,6 +23,7 @@ import { Bookmark, CheckCircle, XCircle, Clock, Copy, Pin, Trash2, CopyButton, m
 import { networkEventStore } from "../utils/networkEventStore";
 import { flagsForEventId, networkSavedStore, FREE_TIER_SAVED_LIMIT, MAX_PINNED, MAX_SAVED } from "../utils/networkSavedStore";
 import { useNetworkSaved } from "../hooks/useNetworkSaved";
+import { useSelectedNetworkEventId } from "../hooks/useNetworkSelection";
 import { useNetworkBadgeCounts } from "../hooks/useNetworkBadgeCounts";
 import { useNetworkHasEvents, useNetworkHasMatches } from "../hooks/useNetworkHasMatches";
 import { generateNetworkCopyText } from "../utils/generateNetworkCopyText";
@@ -141,12 +142,16 @@ export function NetworkSavedButton({
  * The event object is resolved at PRESS time rather than held as a prop: the
  * live store has the fresh copy while the request is in flight, and the saved
  * store is the only copy once it has been cleared or aged out.
+ *
+ * The selected id is SUBSCRIBED here rather than passed down, so stepping
+ * through requests doesn't have to re-render the modal root just to rebuild
+ * the header around a new prop.
  */
 export function NetworkDetailPinActions({
-  eventId,
   isPro,
   onUpgradePress
 }) {
+  const eventId = useSelectedNetworkEventId();
   const state = useNetworkSaved();
   const {
     pinned,

package/lib/module/network/components/NetworkListScreen.js

@@ -117,16 +117,21 @@ export function NetworkListScreen({
     togglePin,
     clearPinned
   } = useNetworkSaved();
-  const {
-    pinned,
-    rest
-  } = splitPinned(visibleEvents, pinnedEvents, pinnedLiveIds);
 
   // Stable identity: handed to memoized rows.
   const handleLongPress = useCallback(event => {
     togglePin(event);
   }, [togglePin]);
+
+  // Everything above is a hook and must run unconditionally; everything below
+  // is work. `splitPinned` is an O(n) pass over the whole list, and this screen
+  // re-renders on every modal-root state change — including every prev/next
+  // step, where it is hidden and the result is thrown away.
   if (!visible) return null;
+  const {
+    pinned,
+    rest
+  } = splitPinned(visibleEvents, pinnedEvents, pinnedLiveIds);
   const isEnabled = !paused;
   const renderItem = ({
     item