@buoy-gg/network 5.0.0 → 6.0.0

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

@@ -0,0 +1,83 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useNetworkBadgeCounts = useNetworkBadgeCounts;
+var _react = require("react");
+var _networkEventStore = require("../utils/networkEventStore");
+var _filterNetworkEvents = require("../utils/filterNetworkEvents");
+/**
+ * Narrow store subscription for the header's live counters — the ONLY
+ * header data that should update per network event (the success/error/
+ * pending chips and the clear button's has-events state).
+ *
+ * Holds derived COUNTS in state, not the events array, with an equality
+ * guard — so consumers re-render only when a count actually changes
+ * (e.g. an ignored-pattern-matched event arriving doesn't re-render the
+ * chips). rule2: external store, narrowest possible subscription.
+ */
+
+function computeCounts(events, ignoredPatterns) {
+  let successful = 0;
+  let failed = 0;
+  let pending = 0;
+  for (const event of (0, _filterNetworkEvents.applyIgnoredPatterns)(events, ignoredPatterns)) {
+    if (event.status && event.status >= 200 && event.status < 300) {
+      successful++;
+    } else if (event.error || event.status && event.status >= 400) {
+      failed++;
+    } else if (!event.status && !event.error) {
+      pending++;
+    }
+  }
+  return {
+    successful,
+    failed,
+    pending,
+    total: events.length
+  };
+}
+function countsEqual(a, b) {
+  return a.successful === b.successful && a.failed === b.failed && a.pending === b.pending && a.total === b.total;
+}
+function useNetworkBadgeCounts(options) {
+  const {
+    ignoredPatterns,
+    paused
+  } = options;
+  const [counts, setCounts] = (0, _react.useState)(() => computeCounts(_networkEventStore.networkEventStore.getEvents(), ignoredPatterns));
+  (0, _react.useEffect)(() => {
+    if (paused) return undefined;
+    // Frame-coalesced like useNetworkEventList: a request burst updates
+    // the chips once per frame, not once per emission. subscribeToEvents
+    // replays immediately, which also recomputes when ignoredPatterns
+    // change (this effect re-runs).
+    let rafId = null;
+    let pending = null;
+    const unsubscribe = _networkEventStore.networkEventStore.subscribeToEvents(events => {
+      pending = events;
+      if (rafId != null) return;
+      rafId = requestAnimationFrame(() => {
+        rafId = null;
+        if (!pending) return;
+        const next = computeCounts(pending, ignoredPatterns);
+        pending = null;
+        setCounts(prev => countsEqual(prev, next) ? prev : next);
+      });
+    });
+    return () => {
+      unsubscribe();
+      if (rafId != null) cancelAnimationFrame(rafId);
+    };
+  }, [paused, ignoredPatterns]);
+  (0, _react.useEffect)(() => _networkEventStore.networkEventStore.onClear(() => {
+    setCounts({
+      successful: 0,
+      failed: 0,
+      pending: 0,
+      total: 0
+    });
+  }), []);
+  return counts;
+}

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

@@ -0,0 +1,93 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useNetworkEventList = useNetworkEventList;
+var _react = require("react");
+var _networkEventStore = require("../utils/networkEventStore");
+var _filterNetworkEvents = require("../utils/filterNetworkEvents");
+var _useNetworkEvents = require("./useNetworkEvents");
+/**
+ * Narrow store subscription for components that render the network event
+ * LIST (or need the filtered list). Decomposed from `useNetworkEvents`
+ * per rule2 ("external store + narrow subscriptions") so the subscription
+ * lives in the leaf that consumes it — the modal root no longer
+ * re-renders per network event.
+ *
+ * Profiling evidence (tool-bench, 2026-07-06): with the subscription at
+ * the modal root, 15 network events re-rendered the ENTIRE modal 15× —
+ * JsModalComponent/header buttons ×15, all visible rows ×105.
+ *
+ * `paused` gates the subscription (the power toggle's freeze-stream
+ * semantic, and screens pass `paused || !visible` so hidden screens don't
+ * subscribe at all). Store clears are honored even while paused so a
+ * frozen list can't show deleted events (parity with the old hook's
+ * clearEvents local reset).
+ */
+
+function useNetworkEventList(options) {
+  const {
+    filter,
+    ignoredPatterns,
+    paused,
+    isPro
+  } = options;
+  const [events, setEvents] = (0, _react.useState)(() => _networkEventStore.networkEventStore.getEvents());
+  (0, _react.useEffect)(() => {
+    if (paused) 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
+    // changed row's whole subtree. Profiling (tool-bench 2026-07-06):
+    // a rapid 25-request session produced 70 commits at ~220 renders
+    // each. subscribeToEvents replays the current array immediately, so
+    // resuming from pause catches up on the next frame.
+    let rafId = null;
+    let pending = null;
+    const unsubscribe = _networkEventStore.networkEventStore.subscribeToEvents(next => {
+      pending = next;
+      if (rafId != null) return;
+      rafId = requestAnimationFrame(() => {
+        rafId = null;
+        if (pending) setEvents(pending);
+        pending = null;
+      });
+    });
+    return () => {
+      unsubscribe();
+      if (rafId != null) cancelAnimationFrame(rafId);
+    };
+  }, [paused]);
+  (0, _react.useEffect)(() => _networkEventStore.networkEventStore.onClear(() => {
+    setEvents([]);
+  }), []);
+
+  // Derivations are plain useMemo over the subscribed array — linear
+  // passes over ≤maxEvents items, recomputed only when inputs change.
+  const filteredEvents = (0, _react.useMemo)(() => {
+    return (0, _filterNetworkEvents.filterNetworkEvents)((0, _filterNetworkEvents.applyIgnoredPatterns)(events, ignoredPatterns), filter);
+  }, [events, ignoredPatterns, filter]);
+
+  // Free tier: events beyond the limit in the ORIGINAL order are locked,
+  // so locked events stay locked even when searching (ported verbatim).
+  const lockedEventIds = (0, _react.useMemo)(() => {
+    if (isPro) return new Set();
+    const lockedIds = new Set();
+    events.slice(_useNetworkEvents.FREE_TIER_REQUEST_LIMIT).forEach(event => {
+      lockedIds.add(event.id);
+    });
+    return lockedIds;
+  }, [events, isPro]);
+  const visibleEvents = (0, _react.useMemo)(() => {
+    if (lockedEventIds.size === 0) return filteredEvents;
+    return filteredEvents.filter(event => !lockedEventIds.has(event.id));
+  }, [filteredEvents, lockedEventIds]);
+  const lockedEventCount = filteredEvents.length - visibleEvents.length;
+  return {
+    events: filteredEvents,
+    visibleEvents,
+    hasLockedEvents: lockedEventCount > 0,
+    lockedEventCount
+  };
+}

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

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useNetworkHasEvents = useNetworkHasEvents;
+exports.useNetworkHasMatches = useNetworkHasMatches;
+var _react = require("react");
+var _networkEventStore = require("../utils/networkEventStore");
+var _filterNetworkEvents = require("../utils/filterNetworkEvents");
+/**
+ * Narrowest possible subscription: a BOOLEAN that flips when the store
+ * goes between "has events matching this filter" and "empty". Used by
+ * header buttons (clear/copy) whose only live dependency is their
+ * enabled state — with the full counts hook they re-rendered on every
+ * count change (32× in a 25-request run, tool-bench 2026-07-06); with a
+ * flip-guarded boolean they render ~twice per session.
+ */
+
+/** True while the store has ANY events (clear button's enabled state). */
+function useNetworkHasEvents(options) {
+  const {
+    paused
+  } = options;
+  const [hasEvents, setHasEvents] = (0, _react.useState)(() => _networkEventStore.networkEventStore.getEvents().length > 0);
+  (0, _react.useEffect)(() => {
+    if (paused) return undefined;
+    return _networkEventStore.networkEventStore.subscribeToEvents(events => {
+      const next = events.length > 0;
+      setHasEvents(prev => prev === next ? prev : next);
+    });
+  }, [paused]);
+  (0, _react.useEffect)(() => _networkEventStore.networkEventStore.onClear(() => setHasEvents(false)), []);
+  return hasEvents;
+}
+
+/** True while the store has events matching the current filter (copy
+ * button's enabled state). The filter pass runs per emission but a
+ * re-render only happens when the boolean flips. */
+function useNetworkHasMatches(options) {
+  const {
+    filter,
+    ignoredPatterns,
+    paused
+  } = options;
+  const [hasMatches, setHasMatches] = (0, _react.useState)(() => (0, _filterNetworkEvents.filterNetworkEvents)((0, _filterNetworkEvents.applyIgnoredPatterns)(_networkEventStore.networkEventStore.getEvents(), ignoredPatterns), filter).length > 0);
+  (0, _react.useEffect)(() => {
+    if (paused) return undefined;
+    return _networkEventStore.networkEventStore.subscribeToEvents(events => {
+      const next = (0, _filterNetworkEvents.filterNetworkEvents)((0, _filterNetworkEvents.applyIgnoredPatterns)(events, ignoredPatterns), filter).length > 0;
+      setHasMatches(prev => prev === next ? prev : next);
+    });
+  }, [paused, filter, ignoredPatterns]);
+  (0, _react.useEffect)(() => _networkEventStore.networkEventStore.onClear(() => setHasMatches(false)), []);
+  return hasMatches;
+}

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

@@ -0,0 +1,96 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.applyIgnoredPatterns = applyIgnoredPatterns;
+exports.filterNetworkEvents = filterNetworkEvents;
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _formatGraphQLVariables = require("./formatGraphQLVariables");
+/**
+ * Pure network-event filtering shared by the list/copy/filter-screen hooks
+ * (rule3: reusable logic extracted to a pure function). Ported verbatim
+ * from the filtering previously inlined in `useNetworkEvents` so every
+ * subscriber applies identical semantics.
+ */
+
+/** Apply the user's search/method/status/host/content-type filter. */
+function filterNetworkEvents(events, filter) {
+  const searchLower = filter.searchText ? filter.searchText.toLowerCase() : null;
+  const methodSet = filter.method && filter.method.length > 0 ? new Set(filter.method) : null;
+  const contentTypeSet = filter.contentType && filter.contentType.length > 0 ? new Set(filter.contentType) : null;
+  let filtered = [...events];
+  if (methodSet) {
+    filtered = filtered.filter(e => methodSet.has(e.method));
+  }
+  if (filter.status && filter.status !== "all") {
+    switch (filter.status) {
+      case "success":
+        filtered = filtered.filter(e => e.status && e.status >= 200 && e.status < 300);
+        break;
+      case "error":
+        filtered = filtered.filter(e => e.error || e.status && e.status >= 400);
+        break;
+      case "pending":
+        filtered = filtered.filter(e => !e.status && !e.error);
+        break;
+    }
+  }
+  if (searchLower) {
+    filtered = filtered.filter(e => e.url.toLowerCase().includes(searchLower) || e.method.toLowerCase().includes(searchLower) || e.path?.toLowerCase().includes(searchLower) || e.host?.toLowerCase().includes(searchLower) || e.error && e.error.toLowerCase().includes(searchLower) ||
+    // Search by GraphQL operation name (e.g., "GetUser", "CreatePost")
+    e.operationName && e.operationName.toLowerCase().includes(searchLower) ||
+    // Search by GraphQL variable values (e.g., "Sandshrew", "123")
+    (0, _formatGraphQLVariables.searchGraphQLVariables)(e.graphqlVariables, searchLower));
+  }
+  if (filter.host) {
+    filtered = filtered.filter(e => e.host === filter.host);
+  }
+  if (contentTypeSet) {
+    filtered = filtered.filter(e => {
+      const headers = e.responseHeaders || e.requestHeaders;
+      const contentType = headers?.["content-type"] || headers?.["Content-Type"] || "";
+      for (const type of contentTypeSet) {
+        switch (type) {
+          case "JSON":
+            if (contentType.includes("json")) return true;
+            break;
+          case "XML":
+            if (contentType.includes("xml")) return true;
+            break;
+          case "HTML":
+            if (contentType.includes("html")) return true;
+            break;
+          case "TEXT":
+            if (contentType.includes("text")) return true;
+            break;
+          case "IMAGE":
+            if (contentType.includes("image")) return true;
+            break;
+          case "VIDEO":
+            if (contentType.includes("video")) return true;
+            break;
+          case "AUDIO":
+            if (contentType.includes("audio")) return true;
+            break;
+          case "FORM":
+            if (contentType.includes("form")) return true;
+            break;
+          case "OTHER":
+            if (!contentType || !contentType.includes("json") && !contentType.includes("xml") && !contentType.includes("html") && !contentType.includes("text") && !contentType.includes("image") && !contentType.includes("video") && !contentType.includes("audio") && !contentType.includes("form")) {
+              return true;
+            }
+            break;
+        }
+      }
+      return false;
+    });
+  }
+  return filtered;
+}
+
+/** Drop events matching the shared ignored-domain/URL patterns. */
+function applyIgnoredPatterns(events, ignoredPatterns) {
+  if (ignoredPatterns.length === 0) return events;
+  return events.filter(event => !ignoredPatterns.some(pattern => (0, _sharedUi.urlMatchesIgnoredPattern)(event.url, pattern)));
+}

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

@@ -0,0 +1,139 @@
+"use strict";
+
+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.
+ */
+
+function shouldIncludePayload(data, bodySizeThresholdKb) {
+  if (bodySizeThresholdKb === -1) return true;
+  if (!data) return true;
+  try {
+    const size = JSON.stringify(data).length;
+    return size < bodySizeThresholdKb * 1024;
+  } catch {
+    return false;
+  }
+}
+function generateNetworkCopyText(events, copySettings) {
+  let eventsToUse = events;
+
+  // Apply filter mode
+  if (copySettings.filterMode === "failed") {
+    eventsToUse = eventsToUse.filter(e => e.error || e.status && e.status >= 400);
+  } else if (copySettings.filterMode === "success") {
+    eventsToUse = eventsToUse.filter(e => e.status && e.status >= 200 && e.status < 300);
+  }
+  if (eventsToUse.length === 0) {
+    return "No requests to copy";
+  }
+
+  // Plain text format (URLs only)
+  if (copySettings.format === "plaintext") {
+    return eventsToUse.map(event => `${event.method} ${event.url}`).join("\n");
+  }
+
+  // JSON format
+  if (copySettings.format === "json") {
+    const requests = eventsToUse.map(event => {
+      const obj = {};
+      if (copySettings.includeMethod) {
+        obj.method = event.method;
+        obj.url = event.url;
+      }
+      if (copySettings.includeStatus) {
+        obj.status = event.status;
+        obj.statusText = event.statusText;
+      }
+      if (copySettings.includeDuration) obj.duration = event.duration;
+      if (copySettings.includeTimestamp) obj.timestamp = event.timestamp;
+      if (copySettings.includeClient) obj.requestClient = event.requestClient;
+      if (copySettings.includeSizes) {
+        obj.requestSize = event.requestSize;
+        obj.responseSize = event.responseSize;
+      }
+      if (copySettings.includeErrors && event.error) obj.error = event.error;
+      if (copySettings.includeRequestHeaders) {
+        obj.requestHeaders = event.requestHeaders;
+      }
+      if (copySettings.includeResponseHeaders) {
+        obj.responseHeaders = event.responseHeaders;
+      }
+      if (copySettings.includeRequestBody && shouldIncludePayload(event.requestData, copySettings.bodySizeThreshold)) {
+        obj.requestData = event.requestData;
+      }
+      if (copySettings.includeResponseBody && shouldIncludePayload(event.responseData, copySettings.bodySizeThreshold)) {
+        obj.responseData = event.responseData;
+      }
+      return obj;
+    });
+    return JSON.stringify(requests, null, 2);
+  }
+
+  // Markdown format
+  const requests = eventsToUse.map((event, index) => {
+    let md = `# Request ${index + 1}\n\n`;
+    if (copySettings.includeMethod) {
+      md += `**Method:** ${event.method}\n`;
+      md += `**URL:** ${event.url}\n`;
+    }
+    if (copySettings.includeStatus) {
+      const status = event.status || "Pending";
+      md += `**Status:** ${status}${event.statusText ? ` (${event.statusText})` : ""}\n`;
+    }
+    if (copySettings.includeClient && event.requestClient) {
+      md += `**Client:** ${event.requestClient}\n`;
+    }
+    if (copySettings.includeDuration && event.duration) {
+      md += `**Duration:** ${event.duration}ms\n`;
+    }
+    if (copySettings.includeTimestamp) {
+      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";
+      md += `**Request Size:** ${reqSize}\n`;
+      md += `**Response Size:** ${resSize}\n`;
+    }
+    if (copySettings.includeErrors && event.error) {
+      md += `**Error:** ${event.error}\n`;
+    }
+    if (copySettings.includeRequestHeaders && Object.keys(event.requestHeaders).length > 0) {
+      md += `\n## Request Headers\n\`\`\`json\n${JSON.stringify(event.requestHeaders, null, 2)}\n\`\`\`\n`;
+    }
+    if (copySettings.includeRequestBody) {
+      md += `\n## Request Data\n`;
+      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";
+        md += `_Payload omitted (${size}). Exceeds ${copySettings.bodySizeThreshold}KB threshold._\n`;
+      }
+    }
+    if (copySettings.includeResponseHeaders && Object.keys(event.responseHeaders).length > 0) {
+      md += `\n## Response Headers\n\`\`\`json\n${JSON.stringify(event.responseHeaders, null, 2)}\n\`\`\`\n`;
+    }
+    if (copySettings.includeResponseBody) {
+      md += `\n## Response Data\n`;
+      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";
+        md += `_Payload omitted (${size}). Exceeds ${copySettings.bodySizeThreshold}KB threshold._\n`;
+      }
+    }
+    md += `\n---\n`;
+    return md;
+  }).join("\n");
+  const header = `# Network Requests (${eventsToUse.length} total)\n\n`;
+  return header + requests;
+}

package/lib/module/index.js

@@ -26,6 +26,11 @@ export { NetworkEventItemCompact } from "./network/components/NetworkEventItemCo
 // HOOKS (For consuming network data in custom components)
 // =============================================================================
 export { useNetworkEvents } from "./network/hooks/useNetworkEvents";
+// Narrow per-consumer subscriptions (what NetworkModal itself uses) — the
+// list and the header counters subscribe independently so a host UI never
+// re-renders wholesale per network event.
+export { useNetworkEventList } from "./network/hooks/useNetworkEventList";
+export { useNetworkBadgeCounts } from "./network/hooks/useNetworkBadgeCounts";
 export { TickProvider, useTickEveryMinute } from "./network/hooks/useTickEveryMinute";
 
 // =============================================================================

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

@@ -109,11 +109,33 @@ function SizeIndicators({
  * Compact list-row representation of a network event. Optimized for large lists with memoization
  * and periodic refresh via `useTickEveryMinute` to keep relative timestamps accurate.
  */
-export const NetworkEventItemCompact = /*#__PURE__*/memo(({
+/**
+ * Sole tick-context consumer in the row (rule2: composition over memo) —
+ * the periodic relative-timestamp tick re-renders ONLY this Text, not the
+ * whole card. Profiling (tool-bench 2026-07-06): the tick accounted for
+ * ~30 of 65 row renders (plus their SVG-icon churn) in a 12s recording.
+ */
+function BottomRightTime({
+  timestamp,
+  duration
+}) {
+  const tick = useTickEveryMinute();
+  const relativeTime = formatRelativeTime(timestamp, tick);
+  return duration ? /*#__PURE__*/_jsxs(Text, {
+    style: styles.bottomRightText,
+    children: [formatDuration(duration), "  ", relativeTime]
+  }) : /*#__PURE__*/_jsx(Text, {
+    style: styles.bottomRightText,
+    children: relativeTime
+  });
+}
+export const NetworkEventItemCompact = /*#__PURE__*/memo(
+// Named function (not an arrow) so render-capture reports attribute row
+// renders to this component instead of a compiled anonymous name.
+function NetworkEventItemCompact({
   event,
   onPress
-}) => {
-  const tick = useTickEveryMinute();
+}) {
   const statusColor = getStatusColor(event.status, event.error);
   const isPending = !event.status && !event.error;
   const contentType = getContentTypeBadge(event.responseHeaders);
@@ -135,15 +157,6 @@ export const NetworkEventItemCompact = /*#__PURE__*/memo(({
     // For non-GraphQL requests with operation names (e.g., gRPC)
     displayUrl = `${displayUrl}\n(${event.operationName})`;
   }
-
-  // Format time with both absolute and relative
-  const timeString = new Date(event.timestamp).toLocaleTimeString("en-US", {
-    hour: "numeric",
-    minute: "2-digit",
-    second: "2-digit",
-    hour12: true
-  });
-  const relativeTime = formatRelativeTime(event.timestamp, tick);
   return /*#__PURE__*/_jsxs(DevToolsCard, {
     onPress: () => onPress(event),
     style: styles.cardWrapper,
@@ -194,16 +207,17 @@ export const NetworkEventItemCompact = /*#__PURE__*/memo(({
       })]
     }), /*#__PURE__*/_jsx(View, {
       style: styles.bottomRightContainer,
-      children: event.duration ? /*#__PURE__*/_jsxs(Text, {
-        style: styles.bottomRightText,
-        children: [formatDuration(event.duration), "  ", relativeTime]
-      }) : /*#__PURE__*/_jsx(Text, {
-        style: styles.bottomRightText,
-        children: relativeTime
+      children: /*#__PURE__*/_jsx(BottomRightTime, {
+        timestamp: event.timestamp,
+        duration: event.duration
       })
     })]
   });
 });
+
+// Without this, render-capture reports attribute row renders to the
+// anonymous memo wrapper ("Memo"/"_c4") instead of the row.
+NetworkEventItemCompact.displayName = "NetworkEventItemCompact";
 const styles = StyleSheet.create({
   cardWrapper: {
     marginHorizontal: 8