@buoy-gg/network 7.0.12 → 7.0.14

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

@@ -4,11 +4,29 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.stopNetworkListener = exports.startNetworkListener = exports.removeAllNetworkListeners = exports.networkListener = exports.isNetworkListening = exports.getNetworkListenerCount = exports.addNetworkListener = void 0;
+var _engine = require("../overrides/engine");
+var _applyToXhr = require("../overrides/applyToXhr");
+var _applyToFetch = require("../overrides/applyToFetch");
+var _types = require("../overrides/types");
 /**
  * Network listener using Reactotron-style event pattern
  * Simple and reliable network interception for React Native
  */
 
+/**
+ * True only while `originalFetch` is being CALLED (not awaited).
+ *
+ * Overrides hook both `fetch` and `XMLHttpRequest`, because Expo's native
+ * `expo/fetch` bypasses XHR while bare RN's whatwg-fetch polyfill runs straight
+ * through it. On bare RN that means one `fetch()` would otherwise be overridden
+ * twice — a doubled delay and a doubled hit count.
+ *
+ * whatwg-fetch creates and sends its XHR synchronously inside the Promise
+ * executor, so a flag raised across the call expression alone is enough to
+ * cover the inner `send()` without leaking across the await.
+ */
+let insideOverriddenFetch = false;
+
 // Extended XMLHttpRequest interface for monkey-patching
 
 // Event types for network operations
@@ -203,7 +221,7 @@ class NetworkListener {
    * Handle XMLHttpRequest response processing
    * This method processes the response and emits appropriate events
    */
-  handleXHRResponse(xhr, requestId, cleanUrl, method, requestHeaders, requestData, params, startTime, isError = false, clientType = "xhr") {
+  handleXHRResponse(xhr, requestId, cleanUrl, method, requestHeaders, requestData, params, startTime, isError = false, clientType = "xhr", override) {
     const duration = startTime ? Date.now() - startTime : 0;
 
     // XHR's duration was ALREADY total (measured at readyState 4 / load), so
@@ -232,7 +250,8 @@ class NetworkListener {
         },
         error: {
           message: isError ? "Request failed" : "Network error or request aborted"
-        }
+        },
+        override
       });
       return;
     }
@@ -371,7 +390,8 @@ class NetworkListener {
           headers: responseHeaders,
           body,
           size: responseSize
-        }
+        },
+        override
       });
     } else {
       this.emit({
@@ -396,7 +416,8 @@ class NetworkListener {
         },
         error: {
           message: `HTTP ${xhr.status}: ${xhr.statusText}`
-        }
+        },
+        override
       });
     }
   }
@@ -467,6 +488,18 @@ class NetworkListener {
       // Determine client type from X-Request-Client header or default to fetch
       const clientType = requestHeaders["X-Request-Client"] || requestHeaders["x-request-client"] || "fetch";
 
+      /**
+       * Response overrides, fetch side.
+       *
+       * Needed even though `send` below also resolves them: Expo installs a
+       * NATIVE `expo/fetch` as `globalThis.fetch`, which never constructs an
+       * XMLHttpRequest, so the XHR hook alone would never see these requests.
+       * Skipped when `canSynthesizeResponse()` is false so a runtime without a
+       * `Response` global degrades to a real request rather than a broken one.
+       */
+      const outcome = (0, _applyToFetch.canSynthesizeResponse)() ? (0, _engine.overrideForRequest)(url, method) : null;
+      const override = outcome ? (0, _types.markForOutcome)(outcome) : undefined;
+
       // Emit request event
       self.emit({
         type: "request",
@@ -479,10 +512,28 @@ class NetworkListener {
           data: requestData,
           params: params || undefined,
           client: clientType
-        }
+        },
+        override
       });
       try {
-        const response = await self.originalFetch(input, init);
+        if (outcome) await (0, _applyToFetch.sleep)(outcome.delayMs);
+        if (outcome?.kind === "fail") throw (0, _applyToFetch.synthesizeFetchError)(outcome);
+        let response;
+        if (outcome?.kind === "respond") {
+          response = (0, _applyToFetch.synthesizeResponse)(url, outcome);
+        } else {
+          // The flag spans the CALL only — see `insideOverriddenFetch`. It has
+          // to be cleared before the await, or it would still be raised for
+          // every unrelated request that starts while this one is in flight.
+          insideOverriddenFetch = outcome != null;
+          let pending;
+          try {
+            pending = self.originalFetch(input, init);
+          } finally {
+            insideOverriddenFetch = false;
+          }
+          response = await pending;
+        }
         // A fetch promise resolves when the HEADERS arrive, not the body — so
         // this is time-to-first-byte, and it is where `duration` used to stop.
         // That silently excluded download time, making an identical request
@@ -551,7 +602,8 @@ class NetworkListener {
             headers: responseHeaders,
             body,
             size: responseSize
-          }
+          },
+          override
         });
         return response;
       } catch (error) {
@@ -574,7 +626,8 @@ class NetworkListener {
           error: {
             message: error instanceof Error ? error.message : "Network error",
             stack: error instanceof Error ? error.stack : undefined
-          }
+          },
+          override
         });
         throw error;
       }
@@ -641,6 +694,22 @@ class NetworkListener {
       const looksLikeAxios = acceptHeader.includes("application/json") && acceptHeader.includes("text/plain") && acceptHeader.includes("*/*");
       const clientType = explicitClient || (looksLikeAxios ? "axios" : "xhr");
 
+      /**
+       * Response overrides.
+       *
+       * This is the layer that covers `axios` and raw XMLHttpRequest. It also
+       * covers `fetch` on BARE React Native, where the whatwg-fetch polyfill
+       * runs through XHR — which is why the fetch wrapper raises
+       * `insideOverriddenFetch` around its pass-through, so one request can't
+       * be overridden twice.
+       *
+       * Matching uses the raw `url` (query string included), which is what the
+       * developer sees in the list and writes into a rule. No-ops in production
+       * builds; see `overrideForRequest`.
+       */
+      const outcome = insideOverriddenFetch ? null : (0, _engine.overrideForRequest)(url, method);
+      const override = outcome ? (0, _types.markForOutcome)(outcome) : undefined;
+
       // Emit request event
       self.emit({
         type: "request",
@@ -653,7 +722,8 @@ class NetworkListener {
           data: requestData,
           params: params || undefined,
           client: clientType
-        }
+        },
+        override
       });
 
       // Track if we've already processed this request to avoid duplicate events
@@ -661,7 +731,7 @@ class NetworkListener {
       const processResponse = (isError = false) => {
         if (processed) return;
         processed = true;
-        self.handleXHRResponse(this, requestId || "unknown", cleanUrl, method, requestHeaders, requestData, params, startTime || 0, isError, clientType);
+        self.handleXHRResponse(this, requestId || "unknown", cleanUrl, method, requestHeaders, requestData, params, startTime || 0, isError, clientType, override);
         // Clean up event listeners after processing to prevent memory leaks
         cleanup();
       };
@@ -708,6 +778,16 @@ class NetworkListener {
       this.addEventListener("error", errorListener);
       this.addEventListener("abort", abortListener);
       this.addEventListener("readystatechange", readyStateListener);
+      if (outcome) {
+        // Listeners are attached above FIRST: `runOverride` drives the same
+        // readyState transitions a real response would, and the interceptor has
+        // to see them (readyState 2 is where TTFB is stamped).
+        const handled = (0, _applyToXhr.runOverride)(this, url, outcome, () => self.originalXHRSend.call(this, data));
+        // `handled` is false only where this isn't React Native's own
+        // XMLHttpRequest and can't be driven by hand. Fall through and send for
+        // real rather than dropping the request on the floor.
+        if (handled) return;
+      }
       return self.originalXHRSend.call(this, data);
     };
     this.isListening = true;

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/commonjs/preset.js

@@ -7,6 +7,7 @@ exports.createNetworkTool = createNetworkTool;
 exports.networkToolPreset = void 0;
 var _sharedUi = require("@buoy-gg/shared-ui");
 var _NetworkModal = require("./network/components/NetworkModal");
+var _overrideRulesStore = require("./network/overrides/overrideRulesStore");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Pre-configured network monitoring tool for FloatingDevTools
@@ -25,6 +26,16 @@ var _jsxRuntime = require("react/jsx-runtime");
  * ```
  */
 
+/**
+ * Load persisted response-override rules as soon as the tool is registered.
+ *
+ * Deliberately at import time rather than when the Network modal mounts: an
+ * override has to fire from app boot, with the tool closed and nothing
+ * capturing — that is the whole point of persisting rules ("force this endpoint
+ * to 500, then restart and watch the boot path"). Hydrating also re-installs
+ * the interceptor if any rule is still active. One storage read, dev-only.
+ */void _overrideRulesStore.overrideRulesStore.ensureLoaded();
+
 /**
  * Pre-configured network monitoring tool for FloatingDevTools.
  * Includes:

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";
 
 // =============================================================================
@@ -52,6 +56,21 @@ export { formatBytes, formatDuration, formatHttpStatus } from "./network/utils/f
 // TYPES (For TypeScript users)
 // =============================================================================
 
+// =============================================================================
+// RESPONSE OVERRIDES
+// Force a status, body, failure or delay on matching requests — Buoy's answer
+// to Chrome DevTools' Local Overrides, plus the status/latency/failure control
+// Chrome doesn't have.
+// =============================================================================
+export { overrideRulesStore
+
+/**
+ * @internal — the desktop dashboard puts the rule store in remote-mirror mode
+ * so edits made there are forwarded to the device instead of stored locally.
+ */ } from "./network/overrides/overrideRulesStore";
+export { draftFromEvent } from "./network/overrides/presets";
+export { MAX_RULES as MAX_OVERRIDE_RULES, FREE_TIER_RULE_LIMIT as FREE_TIER_OVERRIDE_LIMIT, STATUS_MIN as OVERRIDE_STATUS_MIN, STATUS_MAX as OVERRIDE_STATUS_MAX } from "./network/overrides/types";
+
 // =============================================================================
 // SHARED IGNORED-PATTERN FILTERING
 // Re-exported from @buoy-gg/shared-ui so consumers wiring the Network detail

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
   });
 });