@buoy-gg/network 5.0.0 → 6.0.0

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

@@ -0,0 +1,193 @@
+"use strict";
+
+/**
+ * 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.
+ */
+
+import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import { CheckCircle, XCircle, Clock, Copy, Trash2, CopyButton, macOSColors } from "@buoy-gg/shared-ui";
+import { networkEventStore } from "../utils/networkEventStore";
+import { useNetworkBadgeCounts } from "../hooks/useNetworkBadgeCounts";
+import { useNetworkHasEvents, useNetworkHasMatches } from "../hooks/useNetworkHasMatches";
+import { generateNetworkCopyText } from "../utils/generateNetworkCopyText";
+import { applyIgnoredPatterns, filterNetworkEvents } from "../utils/filterNetworkEvents";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Success / error / pending chips — tap to toggle the status filter. */
+export function NetworkHeaderBadges({
+  activeStatus,
+  onToggleStatus,
+  ignoredPatterns,
+  paused
+}) {
+  const counts = useNetworkBadgeCounts({
+    ignoredPatterns,
+    paused
+  });
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.headerChipRow,
+    children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
+      style: [styles.headerChip, activeStatus === "success" && styles.headerChipActive],
+      onPress: () => onToggleStatus("success"),
+      children: [/*#__PURE__*/_jsx(CheckCircle, {
+        size: 12,
+        color: macOSColors.semantic.success
+      }), /*#__PURE__*/_jsx(Text, {
+        style: [styles.headerChipValue, {
+          color: macOSColors.semantic.success
+        }],
+        children: counts.successful
+      })]
+    }), /*#__PURE__*/_jsxs(TouchableOpacity, {
+      style: [styles.headerChip, activeStatus === "error" && styles.headerChipActive],
+      onPress: () => onToggleStatus("error"),
+      children: [/*#__PURE__*/_jsx(XCircle, {
+        size: 12,
+        color: macOSColors.semantic.error
+      }), /*#__PURE__*/_jsx(Text, {
+        style: [styles.headerChipValue, {
+          color: macOSColors.semantic.error
+        }],
+        children: counts.failed
+      })]
+    }), /*#__PURE__*/_jsxs(TouchableOpacity, {
+      style: [styles.headerChip, activeStatus === "pending" && styles.headerChipActive],
+      onPress: () => onToggleStatus("pending"),
+      children: [/*#__PURE__*/_jsx(Clock, {
+        size: 12,
+        color: macOSColors.semantic.warning
+      }), /*#__PURE__*/_jsx(Text, {
+        style: [styles.headerChipValue, {
+          color: 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. */
+export function NetworkClearButton({
+  paused
+}) {
+  const hasEvents = useNetworkHasEvents({
+    paused
+  });
+  return /*#__PURE__*/_jsx(TouchableOpacity, {
+    "sentry-label": "ignore clear events",
+    onPress: () => networkEventStore.clearEvents(),
+    style: [styles.headerActionButton, !hasEvents && styles.headerActionButtonDisabled],
+    disabled: !hasEvents,
+    children: /*#__PURE__*/_jsx(Trash2, {
+      size: 14,
+      color: hasEvents ? macOSColors.text.muted : 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.
+ */
+export function NetworkHeaderCopyButton({
+  isPro,
+  filter,
+  ignoredPatterns,
+  copySettings,
+  paused,
+  onUpgradePress
+}) {
+  const hasEvents = useNetworkHasMatches({
+    filter,
+    ignoredPatterns,
+    paused
+  });
+  if (!isPro) {
+    return /*#__PURE__*/_jsx(TouchableOpacity, {
+      "sentry-label": "ignore copy pro",
+      onPress: onUpgradePress,
+      style: [styles.headerActionButton, !hasEvents && styles.headerActionButtonDisabled],
+      disabled: !hasEvents,
+      children: /*#__PURE__*/_jsx(Copy, {
+        size: 14,
+        color: hasEvents ? macOSColors.text.secondary : macOSColors.text.disabled
+      })
+    });
+  }
+  return /*#__PURE__*/_jsx(CopyButton
+  // Lazy value: resolved at copy time by CopyButton's latest-ref
+  // pattern, reading the LIVE store — no per-event work, no staleness.
+  , {
+    value: () => generateNetworkCopyText(filterNetworkEvents(applyIgnoredPatterns(networkEventStore.getEvents(), ignoredPatterns), filter), copySettings),
+    size: 14,
+    buttonStyle: styles.headerActionButton,
+    colors: {
+      idle: hasEvents ? macOSColors.text.secondary : macOSColors.text.disabled,
+      success: macOSColors.semantic.success,
+      error: macOSColors.semantic.error
+    },
+    disabled: !hasEvents
+  });
+}
+const styles = StyleSheet.create({
+  headerChipRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8
+  },
+  headerChip: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4,
+    backgroundColor: macOSColors.background.hover,
+    paddingHorizontal: 10,
+    paddingVertical: 5,
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: macOSColors.border.default
+  },
+  headerChipActive: {
+    backgroundColor: macOSColors.semantic.infoBackground,
+    borderColor: macOSColors.semantic.info + "50",
+    shadowColor: 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: macOSColors.background.hover,
+    borderWidth: 1,
+    borderColor: macOSColors.border.default,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  headerActionButtonDisabled: {
+    opacity: 0.55
+  }
+});

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

@@ -0,0 +1,199 @@
+"use strict";
+
+/**
+ * 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.
+ */
+
+import { FlatList, StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import { Globe, Power, ProBadge, Zap, macOSColors } from "@buoy-gg/shared-ui";
+import { NetworkEventItemCompact } from "./NetworkEventItemCompact";
+import { useNetworkEventList } from "../hooks/useNetworkEventList";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+function EmptyState({
+  isEnabled
+}) {
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.emptyState,
+    children: [/*#__PURE__*/_jsx(Globe, {
+      size: 32,
+      color: macOSColors.text.muted
+    }), /*#__PURE__*/_jsx(Text, {
+      style: styles.emptyTitle,
+      children: "No network events"
+    }), /*#__PURE__*/_jsx(Text, {
+      style: styles.emptyText,
+      children: isEnabled ? "Network requests will appear here" : "Enable interception to start capturing"
+    })]
+  });
+}
+const keyExtractor = item => item.id;
+export function NetworkListScreen({
+  visible,
+  paused,
+  filter,
+  ignoredPatterns,
+  isPro,
+  searchText,
+  onEventPress,
+  onUpgradePress
+}) {
+  const {
+    visibleEvents,
+    hasLockedEvents,
+    lockedEventCount
+  } = useNetworkEventList({
+    filter,
+    ignoredPatterns,
+    paused: paused || !visible,
+    isPro
+  });
+  if (!visible) return null;
+  const isEnabled = !paused;
+  const renderItem = ({
+    item
+  }) => /*#__PURE__*/_jsx(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__*/_jsxs(TouchableOpacity, {
+      style: styles.limitBanner,
+      onPress: onUpgradePress,
+      activeOpacity: 0.8,
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.limitBannerContent,
+        children: [/*#__PURE__*/_jsxs(View, {
+          style: styles.limitBannerLeft,
+          children: [/*#__PURE__*/_jsx(Zap, {
+            size: 16,
+            color: "#20C997"
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.limitBannerText,
+            children: bannerText
+          })]
+        }), /*#__PURE__*/_jsx(ProBadge, {})]
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.limitBannerSubtext,
+        children: subtextMessage
+      })]
+    });
+  };
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [!isEnabled ? /*#__PURE__*/_jsxs(View, {
+      style: styles.disabledBanner,
+      children: [/*#__PURE__*/_jsx(Power, {
+        size: 14,
+        color: macOSColors.semantic.warning
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.disabledText,
+        children: "Network interception is disabled"
+      })]
+    }) : null, visibleEvents.length > 0 || hasLockedEvents ? /*#__PURE__*/_jsx(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__*/_jsx(EmptyState, {
+      isEnabled: isEnabled
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  disabledBanner: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    padding: 10,
+    marginHorizontal: 12,
+    marginTop: 8,
+    backgroundColor: macOSColors.semantic.warningBackground,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: macOSColors.semantic.warning + "20"
+  },
+  disabledText: {
+    color: macOSColors.semantic.warning,
+    fontSize: 11,
+    flex: 1
+  },
+  listContent: {
+    paddingTop: 8
+  },
+  emptyState: {
+    alignItems: "center",
+    paddingVertical: 40
+  },
+  emptyTitle: {
+    color: macOSColors.text.primary,
+    fontSize: 14,
+    fontWeight: "600",
+    marginTop: 12,
+    marginBottom: 6
+  },
+  emptyText: {
+    color: 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
+  }
+});