@buoy-gg/network 7.0.15 → 7.0.17

package/lib/commonjs/network/hooks/useNetworkEventList.js

@@ -31,11 +31,21 @@ function useNetworkEventList(options) {
     filter,
     ignoredPatterns,
     paused,
+    visible = true,
     isPro
   } = options;
   const [events, setEvents] = (0, _react.useState)(() => _networkEventStore.networkEventStore.getEvents());
   (0, _react.useEffect)(() => {
-    if (paused) return undefined;
+    // Hidden: neither subscribe nor sync — a hidden screen re-rendering for
+    // stream traffic is pure waste (the stable-router contract).
+    if (!visible) return undefined;
+    if (paused) {
+      // Pause freezes the STREAM, not the data. The store still holds the
+      // frozen events, and a screen entering visibility during a pause must
+      // show them rather than whatever it had at mount.
+      setEvents(_networkEventStore.networkEventStore.getEvents());
+      return undefined;
+    }
     // Coalesce store emissions to one commit per frame: a burst of N
     // concurrent requests emits 2N times (add + response each), and
     // uncoalesced each emission is its own commit re-rendering the
@@ -58,7 +68,7 @@ function useNetworkEventList(options) {
       unsubscribe();
       if (rafId != null) cancelAnimationFrame(rafId);
     };
-  }, [paused]);
+  }, [paused, visible]);
   (0, _react.useEffect)(() => _networkEventStore.networkEventStore.onClear(() => {
     setEvents([]);
   }), []);

package/lib/commonjs/network/overrides/applyToXhr.js

@@ -4,11 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.canSynthesize = canSynthesize;
+exports.canSynthesizeStandard = canSynthesizeStandard;
 exports.runOverride = runOverride;
 /**
- * Perform an override outcome against a React Native XMLHttpRequest.
+ * Perform an override outcome against an XMLHttpRequest — React Native's OR a
+ * standards (browser/webview) one.
  *
- * WHY THIS IS POSSIBLE AT ALL: React Native's XMLHttpRequest
+ * WHY THIS IS POSSIBLE ON RN: React Native's XMLHttpRequest
  * (`react-native/Libraries/Network/XMLHttpRequest.js`) is pure JavaScript.
  * `readyState`, `status`, `responseHeaders` and `responseURL` are plain
  * writable fields, and `setResponseHeaders()` / `setReadyState()` are real
@@ -17,16 +19,33 @@ exports.runOverride = runOverride;
  * `_hasError` → error, otherwise load; always loadend). So a response can be
  * synthesized end to end without touching native code.
  *
- * WHY XHR IS THE ONLY PLACE WE HOOK: `react-native/Libraries/Network/fetch.js`
- * is `require('whatwg-fetch')` — RN's `fetch` IS the polyfill over
- * XMLHttpRequest. Overriding here therefore covers `fetch`, `axios` and raw
- * XHR through one code path, and the fake response flows back up through the
- * polyfill so the tool records it without any extra plumbing.
+ * WHY XHR IS THE ONLY PLACE WE HOOK ON RN:
+ * `react-native/Libraries/Network/fetch.js` is `require('whatwg-fetch')` —
+ * RN's `fetch` IS the polyfill over XMLHttpRequest. Overriding here therefore
+ * covers `fetch`, `axios` and raw XHR through one code path, and the fake
+ * response flows back up through the polyfill so the tool records it without
+ * any extra plumbing.
  *
  * Verified field-for-field on React Native 0.81.4 and 0.85.3.
  *
- * Four non-obvious behaviours are handled below; each one is a real bug if you
- * skip it, and each is commented at the line that fixes it.
+ * WHY THERE IS A SECOND PATH: on a STANDARDS XMLHttpRequest (a webview port —
+ * Tauri/Capacitor — or react-native-web) none of the RN internals exist, and
+ * `status` / `readyState` / `response` are readonly ACCESSORS on
+ * `XMLHttpRequest.prototype`, so plain assignment silently no-ops (or throws
+ * in strict mode). This file used to feature-detect that and give up —
+ * "degraded, but never broken" — which was right for react-native-web as a
+ * by-product of an RN app, and wrong the moment the web ports made the
+ * browser XHR a first-class target: the row got FLAGGED as overridden (the
+ * rule matched) while the real request went out. The fix is
+ * `runStandardOverride` below: `Object.defineProperty` INSTANCE own-properties
+ * shadow the prototype accessors (legal on any object), and the lifecycle
+ * events are dispatched by hand through the XHR's own EventTarget — which
+ * fires `addEventListener` listeners AND the `onload`/`onloadend`/
+ * `onreadystatechange` handler attributes, exactly what axios's XHR adapter
+ * listens on.
+ *
+ * Several non-obvious behaviours are handled below; each one is a real bug if
+ * you skip it, and each is commented at the line that fixes it.
  */
 
 const HEADERS_RECEIVED = 2;
@@ -45,22 +64,33 @@ const internalsOf = xhr => xhr;
 let warnedUnsupported = false;
 
 /**
- * Can this XMLHttpRequest be driven by hand?
+ * Can this XMLHttpRequest be driven through React Native's internals?
  *
- * The whole technique rests on RN internals, so it is feature-detected rather
- * than assumed: on a browser XMLHttpRequest (react-native-web) these methods
- * don't exist and `status` is a read-only getter. There, overrides no-op and
- * the request goes out for real — degraded, but never broken.
+ * The RN technique rests on those internals, so it is feature-detected rather
+ * than assumed. A request that fails this check is NOT automatically a lost
+ * cause — `canSynthesizeStandard` covers the standards XHR next.
  */
 function canSynthesize(xhr) {
   const internals = internalsOf(xhr);
   return typeof internals.setReadyState === "function" && typeof internals.setResponseHeaders === "function";
 }
+
+/**
+ * Can this XMLHttpRequest be driven as a STANDARDS one?
+ *
+ * `dispatchEvent` is the load-bearing requirement: the whole standard path
+ * works by defining instance own-properties and then dispatching the
+ * lifecycle events through the XHR's own EventTarget. `removeEventListener`
+ * rules out half-mocks that could take the branch and then leak listeners.
+ */
+function canSynthesizeStandard(xhr) {
+  return typeof xhr.addEventListener === "function" && typeof xhr.removeEventListener === "function" && typeof xhr.dispatchEvent === "function";
+}
 function warnUnsupported() {
   if (warnedUnsupported) return;
   warnedUnsupported = true;
   if (typeof __DEV__ !== "undefined" && __DEV__) {
-    console.warn("[Buoy] Network overrides need React Native's XMLHttpRequest and this " + "environment provides a different one — requests will run normally.");
+    console.warn("[Buoy] Network overrides need an XMLHttpRequest they can drive (React " + "Native's, or a standards EventTarget one) and this environment " + "provides neither — requests will run normally.");
   }
 }
 
@@ -120,6 +150,230 @@ function fail(xhr, outcome) {
   internals.setReadyState?.(DONE);
 }
 
+// ============================================================================
+// STANDARDS XMLHttpRequest path (webview ports / react-native-web)
+// ============================================================================
+
+/**
+ * Shadow a prototype accessor with an instance own-property.
+ *
+ * This is the entire trick: `xhr.status = 500` silently no-ops (or throws in
+ * strict mode) against the readonly getter on `XMLHttpRequest.prototype`, but
+ * an own DATA property on the instance is legal and takes precedence in every
+ * lookup. `configurable: true` so `readyState` can be redefined per
+ * transition. Works identically against RN's plain class fields, so nothing
+ * here is browser-only — the RN path just has a richer mechanism available.
+ */
+function defineOwn(xhr, name, value) {
+  Object.defineProperty(xhr, name, {
+    value,
+    configurable: true,
+    enumerable: true,
+    writable: false
+  });
+}
+
+/**
+ * Build a lifecycle event to dispatch by hand.
+ *
+ * `ProgressEvent` where the spec uses one (load/loadend/error/timeout/abort)
+ * and the constructor exists; plain `Event` otherwise (Node test runs have no
+ * ProgressEvent); a `{ type }` literal as the last resort for event-target
+ * shims. Dispatching through the XHR's own EventTarget is what makes the
+ * `onload`/`onloadend`/`onreadystatechange` handler ATTRIBUTES fire too —
+ * they're listeners in the same list, which is exactly what axios's adapter
+ * registers.
+ */
+function makeEvent(type) {
+  if (type !== "readystatechange" && typeof ProgressEvent === "function") {
+    try {
+      return new ProgressEvent(type);
+    } catch {
+      // fall through
+    }
+  }
+  if (typeof Event === "function") {
+    try {
+      return new Event(type);
+    } catch {
+      // fall through
+    }
+  }
+  return {
+    type
+  };
+}
+function fireEvent(xhr, type) {
+  xhr.dispatchEvent(makeEvent(type));
+}
+
+/** Move the shadowed `readyState` and announce it — the interceptor's own
+ * listener stamps TTFB off the HEADERS_RECEIVED notification, same as a real
+ * response. */
+function setStandardReadyState(xhr, state) {
+  defineOwn(xhr, "readyState", state);
+  fireEvent(xhr, "readystatechange");
+}
+
+/**
+ * `xhr.response` in the caller's requested shape.
+ *
+ * A standards XHR types `response` off `responseType`; axios sets it when the
+ * caller asked for one (default '' → text). JSON is parsed (spec: null on
+ * parse failure), arraybuffer/blob are best-effort encodings of the rule's
+ * text body, everything else falls back to the string.
+ */
+function standardResponseFor(xhr, outcome) {
+  let responseType = "";
+  try {
+    responseType = xhr.responseType;
+  } catch {
+    // Some shims throw on access before send — treat as default text.
+  }
+  switch (responseType) {
+    case "":
+    case "text":
+      return outcome.body;
+    case "json":
+      try {
+        return JSON.parse(outcome.body);
+      } catch {
+        return null;
+      }
+    case "arraybuffer":
+      if (typeof TextEncoder === "function") {
+        return new TextEncoder().encode(outcome.body).buffer;
+      }
+      return outcome.body;
+    case "blob":
+      if (typeof Blob === "function") {
+        const contentType = Object.entries(outcome.headers).find(([name]) => name.toLowerCase() === "content-type")?.[1] ?? "";
+        return new Blob([outcome.body], {
+          type: contentType
+        });
+      }
+      return outcome.body;
+    default:
+      return outcome.body;
+  }
+}
+
+/** Synthesize a successful response on a standards XHR. */
+function respondStandard(xhr, url, outcome, isAborted) {
+  const headers = outcome.headers;
+  // Spec shape: lowercase names, `name: value\r\n` per pair — axios splits on
+  // newlines and trims, raw XHR users get what a real response reads like.
+  const allHeaders = Object.entries(headers).map(([name, value]) => `${name.toLowerCase()}: ${value}\r\n`).join("");
+  defineOwn(xhr, "getAllResponseHeaders", () => allHeaders);
+  defineOwn(xhr, "getResponseHeader", name => {
+    const wanted = String(name).toLowerCase();
+    for (const [key, value] of Object.entries(headers)) {
+      if (key.toLowerCase() === wanted) return value;
+    }
+    return null;
+  });
+  defineOwn(xhr, "responseURL", url);
+  defineOwn(xhr, "status", outcome.status);
+  defineOwn(xhr, "statusText", outcome.statusText);
+  defineOwn(xhr, "response", standardResponseFor(xhr, outcome));
+  // Own property, so it answers with the body even under a non-text
+  // `responseType` (where the real accessor would throw). axios reads it
+  // whenever `responseType` is '' or 'text'.
+  defineOwn(xhr, "responseText", outcome.body);
+  setStandardReadyState(xhr, HEADERS_RECEIVED);
+  if (isAborted()) return;
+  setStandardReadyState(xhr, LOADING);
+  if (isAborted()) return;
+  setStandardReadyState(xhr, DONE);
+  fireEvent(xhr, "load");
+  fireEvent(xhr, "loadend");
+}
+
+/** Synthesize a transport failure on a standards XHR — offline or timeout. */
+function failStandard(xhr, outcome) {
+  // `status` stays 0 (the prototype getter's answer for a request whose real
+  // send never ran) — exactly what a genuine network error reports. The
+  // 'error'/'timeout' event is the entire signal; axios turns them into
+  // ERR_NETWORK / ECONNABORTED the same way whatwg-fetch turns RN's flags
+  // into TypeErrors.
+  setStandardReadyState(xhr, DONE);
+  fireEvent(xhr, outcome.failKind === "timeout" ? "timeout" : "error");
+  fireEvent(xhr, "loadend");
+}
+
+/**
+ * Apply an outcome to a standards XMLHttpRequest that has NOT been sent.
+ *
+ * The real `send()` is never invoked for respond/fail — the request must not
+ * touch the network. That leaves `abort()` with nothing to do natively (per
+ * spec, abort on a request whose send flag is unset dispatches NOTHING), so
+ * an instance shadow gives it the in-flight behaviour the app expects:
+ * cancel the pending outcome and dispatch abort + loadend. The shadow deletes
+ * itself the moment it can't matter anymore — after settling, and before a
+ * `delay` pass-through hands the request to the real network, where the
+ * prototype `abort()` must be reachable again.
+ */
+function runStandardOverride(xhr, url, outcome, passThrough) {
+  let timer = null;
+  let aborted = false;
+  let settled = false;
+  const restoreAbort = () => {
+    try {
+      delete xhr.abort;
+    } catch {
+      // Non-configurable shadow can't happen (we define it configurable), but
+      // never let cleanup throw into app code.
+    }
+  };
+  Object.defineProperty(xhr, "abort", {
+    configurable: true,
+    writable: true,
+    value: () => {
+      if (settled || aborted) return;
+      aborted = true;
+      settled = true;
+      if (timer !== null) {
+        clearTimeout(timer);
+        timer = null;
+      }
+      restoreAbort();
+      // The in-flight abort sequence: DONE, then 'abort', then 'loadend' —
+      // whatwg's request-error steps, which is also what RN's setReadyState
+      // dispatches off `_aborted`.
+      setStandardReadyState(xhr, DONE);
+      fireEvent(xhr, "abort");
+      fireEvent(xhr, "loadend");
+    }
+  });
+  const fire = () => {
+    timer = null;
+    if (aborted) return;
+    if (outcome.kind === "delay") {
+      // The real request is about to be genuinely in flight — put the
+      // prototype `abort()` back FIRST so cancelling reaches the network.
+      restoreAbort();
+      passThrough();
+      return;
+    }
+    if (outcome.kind === "fail") {
+      failStandard(xhr, outcome);
+    } else {
+      respondStandard(xhr, url, outcome, () => aborted);
+    }
+    settled = true;
+    restoreAbort();
+  };
+
+  // ALWAYS asynchronous, even at 0ms — same contract as the RN path: callers
+  // legitimately attach handlers after `send()` returns (axios does).
+  timer = setTimeout(fire, outcome.delayMs);
+  return true;
+}
+
+// ============================================================================
+// Entry point
+// ============================================================================
+
 /**
  * Apply an outcome to a request that has NOT been sent yet.
  *
@@ -130,6 +384,13 @@ function fail(xhr, outcome) {
  */
 function runOverride(xhr, url, outcome, passThrough) {
   if (!canSynthesize(xhr)) {
+    // Not React Native's XMLHttpRequest — a standards one (webview port,
+    // react-native-web) is driven through instance property shadowing
+    // instead. Order matters: RN's XHR also extends an EventTarget shim, so
+    // the RN check must win first.
+    if (canSynthesizeStandard(xhr)) {
+      return runStandardOverride(xhr, url, outcome, passThrough);
+    }
     warnUnsupported();
     return false;
   }

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

@@ -4,15 +4,42 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.generateNetworkCopyText = generateNetworkCopyText;
-var _formatting = require("./formatting");
 /**
  * Pure copy-text generation for the network tool (rule3: reusable logic
  * extracted from the modal). Ported verbatim from the `generateCopyText`
  * callback previously inlined in NetworkModal — kept pure so the header
  * CopyButton can resolve it LAZILY at copy time (CopyButton accepts a
  * function value) instead of rebuilding the string on every event.
+ *
+ * PLATFORM-FREE ON PURPOSE: this module is reused verbatim by the web ports
+ * (webview shims resolve `@buoy-gg/shared-ui` to a minimal storage-only shim),
+ * so it must not reach the RN component graph or the shared-ui barrel. That is
+ * why:
+ *  - `CopySettings` is defined HERE rather than imported from
+ *    NetworkCopySettingsView.tsx (which pulls in react-native + shared-ui RN
+ *    chrome). The RN view keeps its own structurally-identical definition —
+ *    keep the two shapes in sync.
+ *  - `formatBytes` is a verbatim copy of
+ *    shared/src/utils/formatting/dataFormatting.ts rather than the
+ *    `./formatting` re-export of `@buoy-gg/shared-ui` (not in the web shim).
  */
 
+/**
+ * What the copy exporter includes and how it formats it. Structurally
+ * identical to (and must stay in sync with) the `CopySettings` exported by
+ * NetworkCopySettingsView.tsx — see the platform-free note above for why the
+ * definition lives here.
+ */
+
+/** shared/src/utils/formatting/dataFormatting.ts `formatBytes` — verbatim. */
+function formatBytes(bytes) {
+  if (bytes === undefined || bytes === null) return "N/A";
+  if (bytes === 0) return "0 B";
+  const k = 1024;
+  const sizes = ["B", "KB", "MB", "GB", "TB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return `${(bytes / Math.pow(k, i)).toFixed(1)} ${sizes[i]}`;
+}
 function shouldIncludePayload(data, bodySizeThresholdKb) {
   if (bodySizeThresholdKb === -1) return true;
   if (!data) return true;
@@ -99,8 +126,8 @@ function generateNetworkCopyText(events, copySettings) {
       md += `**Timestamp:** ${new Date(event.timestamp).toISOString()}\n`;
     }
     if (copySettings.includeSizes) {
-      const reqSize = event.requestSize ? (0, _formatting.formatBytes)(event.requestSize) : "N/A";
-      const resSize = event.responseSize ? (0, _formatting.formatBytes)(event.responseSize) : "N/A";
+      const reqSize = event.requestSize ? formatBytes(event.requestSize) : "N/A";
+      const resSize = event.responseSize ? formatBytes(event.responseSize) : "N/A";
       md += `**Request Size:** ${reqSize}\n`;
       md += `**Response Size:** ${resSize}\n`;
     }
@@ -115,7 +142,7 @@ function generateNetworkCopyText(events, copySettings) {
       if (shouldIncludePayload(event.requestData, copySettings.bodySizeThreshold)) {
         md += `\`\`\`json\n${JSON.stringify(event.requestData, null, 2)}\n\`\`\`\n`;
       } else {
-        const size = event.requestSize ? (0, _formatting.formatBytes)(event.requestSize) : "Unknown size";
+        const size = event.requestSize ? formatBytes(event.requestSize) : "Unknown size";
         md += `_Payload omitted (${size}). Exceeds ${copySettings.bodySizeThreshold}KB threshold._\n`;
       }
     }
@@ -127,7 +154,7 @@ function generateNetworkCopyText(events, copySettings) {
       if (shouldIncludePayload(event.responseData, copySettings.bodySizeThreshold)) {
         md += `\`\`\`json\n${JSON.stringify(event.responseData, null, 2)}\n\`\`\`\n`;
       } else {
-        const size = event.responseSize ? (0, _formatting.formatBytes)(event.responseSize) : "Unknown size";
+        const size = event.responseSize ? formatBytes(event.responseSize) : "Unknown size";
         md += `_Payload omitted (${size}). Exceeds ${copySettings.bodySizeThreshold}KB threshold._\n`;
       }
     }

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

@@ -111,8 +111,14 @@ class NetworkEventStore extends _sharedUi.BaseEventStore {
       const now = Date.now();
       const recent = this.recentRequests.get(requestKey);
 
-      // If same request within 50ms, likely a duplicate from XHR/fetch dual interception
-      if (recent && now - recent.at < 50) {
+      // If same request within 50ms, likely a duplicate from XHR/fetch dual
+      // interception. The age must be non-negative: Date.now() is not
+      // monotonic, and after a backwards clock adjustment (iOS time sync) a
+      // future-dated entry would satisfy `< 50` for EVERY request to this
+      // endpoint until the clock caught up — capture going silent for minutes
+      // to hours, "fixed" only by Clear wiping this map (field-reported). A
+      // negative age falls through and re-stamps the entry with the new clock.
+      if (recent && now - recent.at >= 0 && now - recent.at < 50) {
         // …but the duplicate is not always redundant. On React Native a
         // `fetch()` is seen twice: once by the fetch wrapper, which is what
         // creates this event, and again by the XHR wrapper underneath it —
@@ -129,11 +135,13 @@ class NetworkEventStore extends _sharedUi.BaseEventStore {
         id: request.id
       });
 
-      // Clean up old entries to prevent memory leak
+      // Clean up old entries to prevent memory leak. Future-dated entries are
+      // stale by definition (clock moved backwards) — drop those too, or they
+      // survive every sweep until the clock overtakes them.
       if (this.recentRequests.size > 100) {
         const cutoff = now - 5000;
         for (const [key, entry] of this.recentRequests.entries()) {
-          if (entry.at < cutoff) {
+          if (entry.at < cutoff || entry.at > now) {
             this.recentRequests.delete(key);
           }
         }

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

@@ -203,20 +203,6 @@ class NetworkListener {
     return `${Math.round(bytes / Math.pow(k, i) * 100) / 100} ${sizes[i]}`;
   }
 
-  // Get response body size
-  getResponseSize(body) {
-    if (!body) return 0;
-    if (typeof body === "string") return body.length;
-    if (typeof body === "object") {
-      try {
-        return JSON.stringify(body).length;
-      } catch {
-        return 0;
-      }
-    }
-    return 0;
-  }
-
   /**
    * Handle XMLHttpRequest response processing
    * This method processes the response and emits appropriate events
@@ -544,8 +530,7 @@ class NetworkListener {
         const responseClone = response.clone();
         const {
           body,
-          size: responseSize,
-          truncated
+          size: responseSize
         } = await self.processResponseBody(responseClone);
 
         // Now the body is in — this is the comparable, total number.

package/lib/module/index.web.js

@@ -0,0 +1,81 @@
+"use strict";
+
+/**
+ * @buoy-gg/network — Web Entry Point (webview ports: Tauri / Capacitor / web).
+ *
+ * Exposes the platform-free capture + data layer only. The capture core
+ * (networkListener) patches `globalThis.fetch` and `XMLHttpRequest.prototype`
+ * — standard web APIs — so it runs in a webview unchanged; the RN UI
+ * components (NetworkModal etc.) are NOT exported here. Their DOM twins are
+ * added feature-by-feature as the web tools port progresses.
+ *
+ * Consumers resolve `@buoy-gg/shared-ui` to a web shim (see
+ * example-tauri/src/shims/shared-ui.web.ts) providing localStorage-backed
+ * persistentStorage, devToolsStorageKeys, BaseEventStore, and the pure
+ * ignored-patterns helpers.
+ *
+ * @platform React DOM Web
+ */
+
+// Capture core — fetch/XHR interception
+export { networkListener, startNetworkListener, stopNetworkListener, addNetworkListener, removeAllNetworkListeners, isNetworkListening } from "./network/utils/networkListener";
+// Event store + saved/pinned store
+export { networkEventStore } from "./network/utils/networkEventStore";
+export { networkSavedStore, flagsForEventId } from "./network/utils/networkSavedStore";
+
+// Types
+
+// Hooks (all platform-free: react + stores only)
+export { useNetworkEvents, FREE_TIER_REQUEST_LIMIT } from "./network/hooks/useNetworkEvents";
+export { useNetworkEventList } from "./network/hooks/useNetworkEventList";
+export { useLiveNetworkEvent } from "./network/hooks/useLiveNetworkEvent";
+export { useNetworkBadgeCounts } from "./network/hooks/useNetworkBadgeCounts";
+
+// Selection cursor (detail view navigation) — platform-free store + hooks
+export { useHasNetworkSelection, useSelectedNetworkEventId, useNetworkBodyEventId, useNetworkCursor } from "./network/hooks/useNetworkSelection";
+export { networkSelectionStore, toSelectionIds } from "./network/utils/networkSelectionStore";
+
+// DOM twins of the RN UI (added feature-by-feature; F2 = the LIST screen,
+// F3 = the DETAIL view)
+export { NetworkListScreen } from "./network/components/NetworkListScreen.web";
+export { NetworkEventItemCompact } from "./network/components/NetworkEventItemCompact.web";
+export { NetworkHeaderBadges, NetworkClearButton, NetworkSavedButton, NetworkDetailPinActions, NetworkHeaderCopyButton } from "./network/components/NetworkHeaderLive.web";
+export { NetworkEventDetailView } from "./network/components/NetworkEventDetailView.web";
+export { NetworkDetailStepper } from "./network/components/NetworkDetailStepper.web";
+export { NetworkDetailScreen } from "./network/components/NetworkDetailScreen.web";
+
+// F4 = FILTERS + SEARCH + IGNORED PATTERNS
+export { NetworkFilterViewV3 } from "./network/components/NetworkFilterViewV3.web";
+export { NetworkFilterScreen } from "./network/components/NetworkFilterScreen.web";
+
+// F5 = SAVED/PINNED screen + COPY settings
+export { NetworkSavedScreen } from "./network/components/NetworkSavedScreen.web";
+export { NetworkCopySettingsView, DEFAULT_COPY_SETTINGS } from "./network/components/NetworkCopySettingsView.web";
+export { NetworkCopyScreen } from "./network/components/NetworkCopyScreen.web";
+export { generateNetworkCopyText } from "./network/utils/generateNetworkCopyText";
+export { selectSavedEvents } from "./network/utils/selectSavedEvents";
+export { FREE_TIER_SAVED_LIMIT, MAX_SAVED } from "./network/utils/networkSavedStore";
+
+// F6 = RESPONSE OVERRIDES (screen + editor DOM twins on top of the
+// platform-free rule store/engine the F1 capture core already applies)
+export { NetworkOverridesScreen } from "./network/components/NetworkOverridesScreen.web";
+export { NetworkOverrideEditor } from "./network/components/NetworkOverrideEditor.web";
+export { NetworkNumberPrompt } from "./network/components/NetworkNumberPrompt.web";
+export { NetworkOverridesButton } from "./network/components/NetworkOverridesButton.web";
+export { NetworkOverrideHeaderButton } from "./network/components/NetworkOverrideHeaderButton.web";
+export { useOverrideRules } from "./network/hooks/useOverrideRules";
+// The persisted rule store — same `@react_buoy_network_overrides` storage key
+// + JSON shape as native (persists through the shared-ui barrel, which web
+// consumers resolve to their localStorage shim). Hosts call `ensureLoaded()`
+// at boot, the way native preset.tsx does at import, so persisted rules fire
+// from launch with the tool closed.
+export { overrideRulesStore } from "./network/overrides/overrideRulesStore";
+export { draftFromEvent, patternForUrl } from "./network/overrides/presets";
+export { FREE_TIER_RULE_LIMIT, MAX_RULES, STATUS_MAX, STATUS_MIN } from "./network/overrides/types";
+export { ruleMatches } from "./network/overrides/matchRule";
+
+// Pure utils shared with the RN UI
+export { filterNetworkEvents, applyIgnoredPatterns } from "./network/utils/filterNetworkEvents";
+export { splitPinned } from "./network/utils/withPinnedFirst";
+export { extractOperationName } from "./network/utils/extractOperationName";
+export { generateCurl } from "./network/utils/generateCurl";