@buoy-gg/network 4.0.2 → 6.0.0

package/lib/commonjs/index.js

@@ -117,6 +117,18 @@ Object.defineProperty(exports, "useIgnoredPatterns", {
     return _sharedUi.useIgnoredPatterns;
   }
 });
+Object.defineProperty(exports, "useNetworkBadgeCounts", {
+  enumerable: true,
+  get: function () {
+    return _useNetworkBadgeCounts.useNetworkBadgeCounts;
+  }
+});
+Object.defineProperty(exports, "useNetworkEventList", {
+  enumerable: true,
+  get: function () {
+    return _useNetworkEventList.useNetworkEventList;
+  }
+});
 Object.defineProperty(exports, "useNetworkEvents", {
   enumerable: true,
   get: function () {
@@ -134,6 +146,8 @@ var _NetworkModal = require("./network/components/NetworkModal");
 var _NetworkEventDetailView = require("./network/components/NetworkEventDetailView");
 var _NetworkEventItemCompact = require("./network/components/NetworkEventItemCompact");
 var _useNetworkEvents = require("./network/hooks/useNetworkEvents");
+var _useNetworkEventList = require("./network/hooks/useNetworkEventList");
+var _useNetworkBadgeCounts = require("./network/hooks/useNetworkBadgeCounts");
 var _useTickEveryMinute = require("./network/hooks/useTickEveryMinute");
 var _formatting = require("./network/utils/formatting");
 var _sharedUi = require("@buoy-gg/shared-ui");

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

@@ -112,11 +112,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.
  */
-const NetworkEventItemCompact = exports.NetworkEventItemCompact = /*#__PURE__*/(0, _react.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 = (0, _useTickEveryMinute.useTickEveryMinute)();
+  const relativeTime = (0, _sharedUi.formatRelativeTime)(timestamp, tick);
+  return duration ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+    style: styles.bottomRightText,
+    children: [(0, _formatting.formatDuration)(duration), "  ", relativeTime]
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+    style: styles.bottomRightText,
+    children: relativeTime
+  });
+}
+const NetworkEventItemCompact = exports.NetworkEventItemCompact = /*#__PURE__*/(0, _react.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 = (0, _useTickEveryMinute.useTickEveryMinute)();
+}) {
   const statusColor = getStatusColor(event.status, event.error);
   const isPending = !event.status && !event.error;
   const contentType = getContentTypeBadge(event.responseHeaders);
@@ -138,15 +160,6 @@ const NetworkEventItemCompact = exports.NetworkEventItemCompact = /*#__PURE__*/(
     // 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 = (0, _sharedUi.formatRelativeTime)(event.timestamp, tick);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.DevToolsCard, {
     onPress: () => onPress(event),
     style: styles.cardWrapper,
@@ -197,16 +210,17 @@ const NetworkEventItemCompact = exports.NetworkEventItemCompact = /*#__PURE__*/(
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: styles.bottomRightContainer,
-      children: event.duration ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
-        style: styles.bottomRightText,
-        children: [(0, _formatting.formatDuration)(event.duration), "  ", relativeTime]
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: styles.bottomRightText,
-        children: relativeTime
+      children: /*#__PURE__*/(0, _jsxRuntime.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 = _reactNative.StyleSheet.create({
   cardWrapper: {
     marginHorizontal: 8

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

@@ -0,0 +1,199 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NetworkClearButton = NetworkClearButton;
+exports.NetworkHeaderBadges = NetworkHeaderBadges;
+exports.NetworkHeaderCopyButton = NetworkHeaderCopyButton;
+var _reactNative = require("react-native");
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _networkEventStore = require("../utils/networkEventStore");
+var _useNetworkBadgeCounts = require("../hooks/useNetworkBadgeCounts");
+var _useNetworkHasMatches = require("../hooks/useNetworkHasMatches");
+var _generateNetworkCopyText = require("../utils/generateNetworkCopyText");
+var _filterNetworkEvents = require("../utils/filterNetworkEvents");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * The header pieces that consume LIVE event data, decomposed out of
+ * NetworkModal per rule3 (decompose by responsibility) so each one is its
+ * own narrow store subscriber and the modal root/header never re-render
+ * per network event:
+ *
+ *  - `NetworkHeaderBadges` — success/error/pending count chips
+ *  - `NetworkClearButton`  — trash button (enabled = store has events;
+ *    clear handler co-located here per rule2)
+ *  - `NetworkHeaderCopyButton` — copy-all button; the copy TEXT is
+ *    resolved lazily at press time (CopyButton accepts a function value —
+ *    rule2's latest-ref pattern), so no string is built per event
+ *
+ * Profiling evidence for this decomposition: tool-bench 2026-07-06 —
+ * Trash2/CopyButton re-rendered 15× for 15 network events when the
+ * subscription lived at the modal root.
+ */
+
+/** Success / error / pending chips — tap to toggle the status filter. */
+function NetworkHeaderBadges({
+  activeStatus,
+  onToggleStatus,
+  ignoredPatterns,
+  paused
+}) {
+  const counts = (0, _useNetworkBadgeCounts.useNetworkBadgeCounts)({
+    ignoredPatterns,
+    paused
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.headerChipRow,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+      style: [styles.headerChip, activeStatus === "success" && styles.headerChipActive],
+      onPress: () => onToggleStatus("success"),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.CheckCircle, {
+        size: 12,
+        color: _sharedUi.macOSColors.semantic.success
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.headerChipValue, {
+          color: _sharedUi.macOSColors.semantic.success
+        }],
+        children: counts.successful
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+      style: [styles.headerChip, activeStatus === "error" && styles.headerChipActive],
+      onPress: () => onToggleStatus("error"),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.XCircle, {
+        size: 12,
+        color: _sharedUi.macOSColors.semantic.error
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.headerChipValue, {
+          color: _sharedUi.macOSColors.semantic.error
+        }],
+        children: counts.failed
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+      style: [styles.headerChip, activeStatus === "pending" && styles.headerChipActive],
+      onPress: () => onToggleStatus("pending"),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Clock, {
+        size: 12,
+        color: _sharedUi.macOSColors.semantic.warning
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.headerChipValue, {
+          color: _sharedUi.macOSColors.semantic.warning
+        }],
+        children: counts.pending
+      })]
+    })]
+  });
+}
+/** Trash button — handler co-located; enabled while the store has events.
+ * Subscribes to a flip-guarded boolean, so it renders when the store goes
+ * empty↔non-empty, not on every count change. */
+function NetworkClearButton({
+  paused
+}) {
+  const hasEvents = (0, _useNetworkHasMatches.useNetworkHasEvents)({
+    paused
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+    "sentry-label": "ignore clear events",
+    onPress: () => _networkEventStore.networkEventStore.clearEvents(),
+    style: [styles.headerActionButton, !hasEvents && styles.headerActionButtonDisabled],
+    disabled: !hasEvents,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Trash2, {
+      size: 14,
+      color: hasEvents ? _sharedUi.macOSColors.text.muted : _sharedUi.macOSColors.text.disabled
+    })
+  });
+}
+/**
+ * Copy-all-requests button. Subscribes to a flip-guarded boolean (its
+ * enabled state); the copy text is generated at PRESS time from a live
+ * store read, so there's no per-event work and no stale closure.
+ */
+function NetworkHeaderCopyButton({
+  isPro,
+  filter,
+  ignoredPatterns,
+  copySettings,
+  paused,
+  onUpgradePress
+}) {
+  const hasEvents = (0, _useNetworkHasMatches.useNetworkHasMatches)({
+    filter,
+    ignoredPatterns,
+    paused
+  });
+  if (!isPro) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+      "sentry-label": "ignore copy pro",
+      onPress: onUpgradePress,
+      style: [styles.headerActionButton, !hasEvents && styles.headerActionButtonDisabled],
+      disabled: !hasEvents,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Copy, {
+        size: 14,
+        color: hasEvents ? _sharedUi.macOSColors.text.secondary : _sharedUi.macOSColors.text.disabled
+      })
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.CopyButton
+  // Lazy value: resolved at copy time by CopyButton's latest-ref
+  // pattern, reading the LIVE store — no per-event work, no staleness.
+  , {
+    value: () => (0, _generateNetworkCopyText.generateNetworkCopyText)((0, _filterNetworkEvents.filterNetworkEvents)((0, _filterNetworkEvents.applyIgnoredPatterns)(_networkEventStore.networkEventStore.getEvents(), ignoredPatterns), filter), copySettings),
+    size: 14,
+    buttonStyle: styles.headerActionButton,
+    colors: {
+      idle: hasEvents ? _sharedUi.macOSColors.text.secondary : _sharedUi.macOSColors.text.disabled,
+      success: _sharedUi.macOSColors.semantic.success,
+      error: _sharedUi.macOSColors.semantic.error
+    },
+    disabled: !hasEvents
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  headerChipRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8
+  },
+  headerChip: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4,
+    backgroundColor: _sharedUi.macOSColors.background.hover,
+    paddingHorizontal: 10,
+    paddingVertical: 5,
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: _sharedUi.macOSColors.border.default
+  },
+  headerChipActive: {
+    backgroundColor: _sharedUi.macOSColors.semantic.infoBackground,
+    borderColor: _sharedUi.macOSColors.semantic.info + "50",
+    shadowColor: _sharedUi.macOSColors.semantic.info,
+    shadowOffset: {
+      width: 0,
+      height: 1
+    },
+    shadowOpacity: 0.08,
+    shadowRadius: 2,
+    elevation: 1
+  },
+  headerChipValue: {
+    fontSize: 12,
+    fontWeight: "600",
+    fontFamily: "monospace"
+  },
+  headerActionButton: {
+    width: 32,
+    height: 32,
+    borderRadius: 8,
+    backgroundColor: _sharedUi.macOSColors.background.hover,
+    borderWidth: 1,
+    borderColor: _sharedUi.macOSColors.border.default,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  headerActionButtonDisabled: {
+    opacity: 0.55
+  }
+});

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

@@ -0,0 +1,203 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NetworkListScreen = NetworkListScreen;
+var _reactNative = require("react-native");
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _NetworkEventItemCompact = require("./NetworkEventItemCompact");
+var _useNetworkEventList = require("../hooks/useNetworkEventList");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * The network tool's LIST screen — owns the event-store subscription, the
+ * FlatList, empty state, disabled banner, and the free-tier locked-history
+ * footer. Decomposed from NetworkModal per rule3 so per-event re-renders
+ * are confined to this subtree (plus the header's live leaves) instead of
+ * the whole modal.
+ *
+ * Stable-tree contract (rule4): hooks run unconditionally, then the
+ * component returns null when not visible. The subscription is gated with
+ * `paused || !visible` so a hidden list doesn't subscribe at all.
+ */
+
+function EmptyState({
+  isEnabled
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.emptyState,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Globe, {
+      size: 32,
+      color: _sharedUi.macOSColors.text.muted
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: styles.emptyTitle,
+      children: "No network events"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: styles.emptyText,
+      children: isEnabled ? "Network requests will appear here" : "Enable interception to start capturing"
+    })]
+  });
+}
+const keyExtractor = item => item.id;
+function NetworkListScreen({
+  visible,
+  paused,
+  filter,
+  ignoredPatterns,
+  isPro,
+  searchText,
+  onEventPress,
+  onUpgradePress
+}) {
+  const {
+    visibleEvents,
+    hasLockedEvents,
+    lockedEventCount
+  } = (0, _useNetworkEventList.useNetworkEventList)({
+    filter,
+    ignoredPatterns,
+    paused: paused || !visible,
+    isPro
+  });
+  if (!visible) return null;
+  const isEnabled = !paused;
+  const renderItem = ({
+    item
+  }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_NetworkEventItemCompact.NetworkEventItemCompact, {
+    event: item,
+    onPress: onEventPress
+  });
+  const renderListFooter = () => {
+    if (!hasLockedEvents) return null;
+    const isSearching = searchText.length > 0;
+    const bannerText = isSearching ? `${lockedEventCount} matching ${lockedEventCount === 1 ? "request" : "requests"} in locked history` : `${lockedEventCount} requests locked`;
+    const subtextMessage = isSearching ? "Upgrade to Pro to search your full request history" : "Upgrade to Pro to unlock full request history";
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+      style: styles.limitBanner,
+      onPress: onUpgradePress,
+      activeOpacity: 0.8,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.limitBannerContent,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.limitBannerLeft,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Zap, {
+            size: 16,
+            color: "#20C997"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.limitBannerText,
+            children: bannerText
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ProBadge, {})]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.limitBannerSubtext,
+        children: subtextMessage
+      })]
+    });
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [!isEnabled ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.disabledBanner,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Power, {
+        size: 14,
+        color: _sharedUi.macOSColors.semantic.warning
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.disabledText,
+        children: "Network interception is disabled"
+      })]
+    }) : null, visibleEvents.length > 0 || hasLockedEvents ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.FlatList, {
+      data: visibleEvents,
+      renderItem: renderItem,
+      keyExtractor: keyExtractor,
+      contentContainerStyle: styles.listContent,
+      showsVerticalScrollIndicator: true,
+      removeClippedSubviews: true,
+      onEndReachedThreshold: 0.8
+      // The list OWNS scrolling (NetworkModal passes
+      // disableScrollWrapper while this screen is visible) so FlatList
+      // virtualization actually works. The previous shipped config —
+      // scrollEnabled=false inside JsModal's ScrollView — mounted ALL
+      // rows: at the store's 500-event cap that measured 17 JS FPS /
+      // 133% CPU / 1.4GB vs ~53 JS FPS / 52% / 360MB virtualized
+      // (buoy-optimize batch 2026-07-06, batch-1783396983529-6l7w).
+      // Window/batch values are the batch's "tuned" winner.
+      ,
+      scrollEnabled: true,
+      initialNumToRender: 12,
+      maxToRenderPerBatch: 8,
+      windowSize: 5,
+      updateCellsBatchingPeriod: 50,
+      "sentry-label": "ignore network events list",
+      ListFooterComponent: renderListFooter
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(EmptyState, {
+      isEnabled: isEnabled
+    })]
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  disabledBanner: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    padding: 10,
+    marginHorizontal: 12,
+    marginTop: 8,
+    backgroundColor: _sharedUi.macOSColors.semantic.warningBackground,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: _sharedUi.macOSColors.semantic.warning + "20"
+  },
+  disabledText: {
+    color: _sharedUi.macOSColors.semantic.warning,
+    fontSize: 11,
+    flex: 1
+  },
+  listContent: {
+    paddingTop: 8
+  },
+  emptyState: {
+    alignItems: "center",
+    paddingVertical: 40
+  },
+  emptyTitle: {
+    color: _sharedUi.macOSColors.text.primary,
+    fontSize: 14,
+    fontWeight: "600",
+    marginTop: 12,
+    marginBottom: 6
+  },
+  emptyText: {
+    color: _sharedUi.macOSColors.text.muted,
+    fontSize: 12,
+    textAlign: "center"
+  },
+  limitBanner: {
+    backgroundColor: "#1A1A1A",
+    borderRadius: 10,
+    borderWidth: 1,
+    borderColor: "#20C997" + "40",
+    padding: 12,
+    marginHorizontal: 12,
+    marginTop: 12,
+    marginBottom: 34
+  },
+  limitBannerContent: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    marginBottom: 4
+  },
+  limitBannerLeft: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8
+  },
+  limitBannerText: {
+    color: "#E0E0E0",
+    fontSize: 13,
+    fontWeight: "600"
+  },
+  limitBannerSubtext: {
+    color: "#888888",
+    fontSize: 11
+  }
+});