@buoy-gg/network 7.0.4 → 7.0.5

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

@@ -12,11 +12,15 @@
  * `paused || !visible` so a hidden list doesn't subscribe at all.
  */
 
+import { useCallback } from "react";
 import { FlatList, StyleSheet, Text, TouchableOpacity, View } from "react-native";
-import { Globe, Power, ProBadge, Zap, macOSColors } from "@buoy-gg/shared-ui";
+import { Globe, Pin, Power, macOSColors } from "@buoy-gg/shared-ui";
 import { NetworkEventItemCompact } from "./NetworkEventItemCompact";
+import { NetworkUpgradeBanner } from "./NetworkUpgradeBanner";
 import { useNetworkEventList } from "../hooks/useNetworkEventList";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useNetworkSaved } from "../hooks/useNetworkSaved";
+import { splitPinned } from "../utils/withPinnedFirst";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function EmptyState({
   isEnabled
 }) {
@@ -35,6 +39,54 @@ function EmptyState({
   });
 }
 const keyExtractor = item => item.id;
+
+/**
+ * The PINNED strip above the live list.
+ *
+ * It renders OUTSIDE the FlatList on purpose. The list's window/batch values
+ * are a measured configuration (see the FlatList below), and merging pins into
+ * `data` would mean sentinel items in `keyExtractor`/`renderItem` and a
+ * section boundary that moves as events arrive. Keeping pins in their own
+ * bounded strip (capped at MAX_PINNED in the store) leaves that tuning
+ * untouched — and makes "pins ignore the filters" fall out for free, because
+ * this strip is never handed the filter.
+ */
+function PinnedSection({
+  events,
+  onEventPress,
+  onLongPress,
+  savedLiveIds,
+  onClearPinned
+}) {
+  if (events.length === 0) return null;
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.pinnedSection,
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: styles.pinnedHeader,
+      children: [/*#__PURE__*/_jsx(Pin, {
+        size: 11,
+        color: macOSColors.semantic.info
+      }), /*#__PURE__*/_jsxs(Text, {
+        style: styles.pinnedTitle,
+        children: ["PINNED \xB7 ", events.length]
+      }), /*#__PURE__*/_jsx(TouchableOpacity, {
+        onPress: onClearPinned,
+        "sentry-label": "ignore unpin all",
+        style: styles.pinnedClear,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.pinnedClearText,
+          children: "Unpin all"
+        })
+      })]
+    }), events.map(event => /*#__PURE__*/_jsx(NetworkEventItemCompact, {
+      event: event,
+      onPress: onEventPress,
+      onLongPress: onLongPress,
+      pinned: true,
+      saved: savedLiveIds.has(event.id)
+    }, event.id))]
+  });
+}
 export function NetworkListScreen({
   visible,
   paused,
@@ -55,42 +107,48 @@ export function NetworkListScreen({
     paused: paused || !visible,
     isPro
   });
+
+  // Pins come from the persisted saved store, NOT from the live list — that is
+  // what lets a pinned failure survive Clear, the 500-event cap and a reload.
+  const {
+    pinnedEvents,
+    pinnedLiveIds,
+    savedLiveIds,
+    togglePin,
+    clearPinned
+  } = useNetworkSaved();
+  const {
+    pinned,
+    rest
+  } = splitPinned(visibleEvents, pinnedEvents, pinnedLiveIds);
+
+  // Stable identity: handed to memoized rows.
+  const handleLongPress = useCallback(event => {
+    togglePin(event);
+  }, [togglePin]);
   if (!visible) return null;
   const isEnabled = !paused;
   const renderItem = ({
     item
   }) => /*#__PURE__*/_jsx(NetworkEventItemCompact, {
     event: item,
-    onPress: onEventPress
+    onPress: onEventPress,
+    onLongPress: handleLongPress,
+    saved: savedLiveIds.has(item.id)
   });
   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__*/_jsx(NetworkUpgradeBanner, {
+      title: bannerText,
+      subtitle: subtextMessage,
+      onPress: onUpgradePress
     });
   };
-  return /*#__PURE__*/_jsxs(_Fragment, {
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.root,
     children: [!isEnabled ? /*#__PURE__*/_jsxs(View, {
       style: styles.disabledBanner,
       children: [/*#__PURE__*/_jsx(Power, {
@@ -100,8 +158,14 @@ export function NetworkListScreen({
         style: styles.disabledText,
         children: "Network interception is disabled"
       })]
-    }) : null, visibleEvents.length > 0 || hasLockedEvents ? /*#__PURE__*/_jsx(FlatList, {
-      data: visibleEvents,
+    }) : null, /*#__PURE__*/_jsx(PinnedSection, {
+      events: pinned,
+      onEventPress: onEventPress,
+      onLongPress: handleLongPress,
+      savedLiveIds: savedLiveIds,
+      onClearPinned: clearPinned
+    }), rest.length > 0 || hasLockedEvents ? /*#__PURE__*/_jsx(FlatList, {
+      data: rest,
       renderItem: renderItem,
       keyExtractor: keyExtractor,
       contentContainerStyle: styles.listContent,
@@ -121,15 +185,59 @@ export function NetworkListScreen({
       initialNumToRender: 12,
       maxToRenderPerBatch: 8,
       windowSize: 5,
-      updateCellsBatchingPeriod: 50,
+      updateCellsBatchingPeriod: 50
+      // Saving a request from the detail view changes a row's glyph
+      // without changing `data`. VirtualizedList is a PureComponent, so
+      // the Set has to be declared as a re-render marker rather than
+      // relying on `renderItem` getting a fresh identity.
+      ,
+      extraData: savedLiveIds,
       "sentry-label": "ignore network events list",
       ListFooterComponent: renderListFooter
-    }) : /*#__PURE__*/_jsx(EmptyState, {
+    }) : pinned.length > 0 ? null : /*#__PURE__*/_jsx(EmptyState, {
       isEnabled: isEnabled
     })]
   });
 }
 const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+    minHeight: 0
+  },
+  /**
+   * The strip is separated from the live list by a real rule, not just space:
+   * these rows do NOT obey the filters, and the boundary is what tells the
+   * user why a request they just filtered out is still on screen.
+   */
+  pinnedSection: {
+    borderBottomWidth: 1,
+    borderBottomColor: macOSColors.border.default,
+    paddingBottom: 4
+  },
+  pinnedHeader: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    paddingHorizontal: 20,
+    paddingTop: 10,
+    paddingBottom: 6
+  },
+  pinnedTitle: {
+    flex: 1,
+    color: macOSColors.semantic.info,
+    fontSize: 10,
+    fontWeight: "700",
+    letterSpacing: 0.6,
+    fontFamily: "monospace"
+  },
+  pinnedClear: {
+    paddingHorizontal: 6,
+    paddingVertical: 2
+  },
+  pinnedClearText: {
+    color: macOSColors.text.muted,
+    fontSize: 10
+  },
   disabledBanner: {
     flexDirection: "row",
     alignItems: "center",
@@ -165,35 +273,5 @@ const styles = StyleSheet.create({
     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
   }
 });

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

@@ -1,16 +1,19 @@
 "use strict";
 
-import { useState, useRef, useEffect } from "react";
+import { useState, useRef, useEffect, useCallback } from "react";
 import { View, StyleSheet, TouchableOpacity, TextInput } from "react-native";
 import { Search, Filter, X, JsModal, ModalHeader, devToolsStorageKeys, macOSColors, persistentStorage, TabSelector, useFeatureGate, UpgradeModal, PowerToggleButton, useIgnoredPatterns } from "@buoy-gg/shared-ui";
 import { NetworkFilterViewV3 } from "./NetworkFilterViewV3";
 import { TickProvider } from "../hooks/useTickEveryMinute";
 import { NetworkEventDetailView } from "./NetworkEventDetailView";
 import { NetworkCopySettingsView, DEFAULT_COPY_SETTINGS } from "./NetworkCopySettingsView";
-import { NetworkHeaderBadges, NetworkClearButton, NetworkHeaderCopyButton } from "./NetworkHeaderLive";
+import { NetworkHeaderBadges, NetworkClearButton, NetworkDetailPinActions, NetworkHeaderCopyButton, NetworkSavedButton } from "./NetworkHeaderLive";
 import { NetworkListScreen } from "./NetworkListScreen";
+import { NetworkSavedScreen } from "./NetworkSavedScreen";
 import { useNetworkEventList } from "../hooks/useNetworkEventList";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLiveNetworkEvent } from "../hooks/useLiveNetworkEvent";
+import { FREE_TIER_SAVED_LIMIT, MAX_SAVED } from "../utils/networkSavedStore";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // ============================================================================
 // Screens (rule4 stable router: each gates itself with `return null`; the
 // root renders all four as stable siblings instead of a nested ternary).
@@ -20,10 +23,17 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 
 function NetworkDetailScreen({
   visible,
-  event,
+  eventId,
+  paused,
   ignoredPatternValues,
   onTogglePattern
 }) {
+  // Resolve the ID to the live event so a request opened while pending picks
+  // up its response/error in place instead of freezing on the snapshot taken
+  // when the row was tapped.
+  const event = useLiveNetworkEvent(eventId, {
+    paused: paused || !visible
+  });
   if (!visible || !event) return null;
   return /*#__PURE__*/_jsx(NetworkEventDetailView, {
     event: event,
@@ -101,18 +111,31 @@ function NetworkModalInner({
   onClose,
   onBack,
   onMinimize,
-  enableSharedModalDimensions = false
+  enableSharedModalDimensions = false,
+  inline = false,
+  paused: pausedProp,
+  onPausedChange
 }) {
   const {
     isPro
   } = useFeatureGate();
 
   // Capture pause (the power toggle's freeze-stream semantic) — gates
-  // every subscriber in this modal's tree via props.
-  const [paused, setPaused] = useState(false);
+  // every subscriber in this modal's tree via props. Controlled when the host
+  // supplies both halves; otherwise this local state is the source of truth.
+  const [pausedState, setPausedState] = useState(false);
+  const controlledPause = pausedProp != null && onPausedChange != null;
+  const paused = controlledPause ? pausedProp : pausedState;
+  const setPaused = next => {
+    const value = typeof next === "function" ? next(paused) : next;
+    if (controlledPause) onPausedChange(value);else setPausedState(value);
+  };
   const [filter, setFilter] = useState({});
-  const [selectedEvent, setSelectedEvent] = useState(null);
+  // The SELECTION is UI state (an ID); the event object it points at is read
+  // live from the store by the detail screen — see useLiveNetworkEvent.
+  const [selectedEventId, setSelectedEventId] = useState(null);
   const [showFilterView, setShowFilterView] = useState(false);
+  const [showSavedView, setShowSavedView] = useState(false);
   const [activeTab, setActiveTab] = useState("filters");
   const [searchText, setSearchText] = useState("");
   const [isSearchActive, setIsSearchActive] = useState(false);
@@ -130,6 +153,13 @@ function NetworkModalInner({
   const [copySettings, setCopySettings] = useState(DEFAULT_COPY_SETTINGS);
   const hasLoadedCopySettings = useRef(false);
   const [showUpgradeModal, setShowUpgradeModal] = useState(false);
+  // Which ceiling the user hit — the upgrade sheet has to argue for the thing
+  // they were actually trying to do, not for exporting.
+  const [upgradeReason, setUpgradeReason] = useState("export");
+  const showUpgrade = reason => {
+    setUpgradeReason(reason);
+    setShowUpgradeModal(true);
+  };
 
   // Auto-close upgrade modal when user becomes Pro
   useEffect(() => {
@@ -173,8 +203,13 @@ function NetworkModalInner({
 
   // Simple handlers - no useCallback needed per rule2
   const handleBack = () => {
-    setSelectedEvent(null);
+    setSelectedEventId(null);
   };
+
+  // Stable identity: this is passed down to the memoized list rows.
+  const handleEventPress = useCallback(event => {
+    setSelectedEventId(event.id);
+  }, []);
   const handleSearch = text => {
     setSearchText(text);
     setFilter(prev => ({
@@ -226,13 +261,32 @@ function NetworkModalInner({
     }
 
     // Event detail view header
-    if (selectedEvent) {
+    if (selectedEventId) {
       return /*#__PURE__*/_jsxs(ModalHeader, {
         children: [/*#__PURE__*/_jsx(ModalHeader.Navigation, {
           onBack: handleBack
         }), /*#__PURE__*/_jsx(ModalHeader.Content, {
           title: "Request Details",
           centered: true
+        }), /*#__PURE__*/_jsx(ModalHeader.Actions, {
+          children: /*#__PURE__*/_jsx(NetworkDetailPinActions, {
+            eventId: selectedEventId,
+            isPro: isPro,
+            onUpgradePress: () => showUpgrade("saved")
+          })
+        })]
+      });
+    }
+
+    // Saved (favorites) header. Checked AFTER the detail branch so opening a
+    // saved request still gets the detail header — and its pin/save toggles.
+    if (showSavedView) {
+      return /*#__PURE__*/_jsxs(ModalHeader, {
+        children: [/*#__PURE__*/_jsx(ModalHeader.Navigation, {
+          onBack: () => setShowSavedView(false)
+        }), /*#__PURE__*/_jsx(ModalHeader.Content, {
+          title: "Saved Requests",
+          centered: true
         })]
       });
     }
@@ -301,13 +355,15 @@ function NetworkModalInner({
             size: 14,
             color: filter.status || filter.method || filter.contentType ? macOSColors.semantic.info : macOSColors.text.muted
           })
+        }), /*#__PURE__*/_jsx(NetworkSavedButton, {
+          onPress: () => setShowSavedView(true)
         }), /*#__PURE__*/_jsx(NetworkHeaderCopyButton, {
           isPro: isPro,
           filter: filter,
           ignoredPatterns: ignoredPatterns,
           copySettings: copySettings,
           paused: paused,
-          onUpgradePress: () => setShowUpgradeModal(true)
+          onUpgradePress: () => showUpgrade("export")
         }), /*#__PURE__*/_jsx(PowerToggleButton, {
           isEnabled: !paused,
           onToggle: () => setPaused(prev => !prev),
@@ -324,32 +380,20 @@ function NetworkModalInner({
   // The LIST screen owns its scrolling (FlatList virtualization requires
   // it — inside JsModal's ScrollView wrapper every row mounts, which at
   // the 500-event cap measured 17 JS FPS / 133% CPU / 1.4GB; see
-  // NetworkListScreen). Detail/filter/copy still use the wrapper.
-  const listOwnsScroll = selectedEvent == null && !showFilterView;
-  return /*#__PURE__*/_jsxs(JsModal, {
-    visible: visible,
-    onClose: onClose,
-    onMinimize: onMinimize,
-    persistenceKey: persistenceKey,
-    header: {
-      showToggleButton: true,
-      customContent: renderHeaderContent()
-    },
-    onModeChange: handleModeChange,
-    enablePersistence: true,
-    initialMode: "bottomSheet",
-    enableGlitchEffects: true,
-    disableScrollWrapper: listOwnsScroll,
-    styles: {},
+  // NetworkListScreen). The Saved screen is a FlatList too, so it takes the
+  // same deal. Detail/filter/copy still use the wrapper.
+  const listOwnsScroll = selectedEventId == null && !showFilterView;
+  const body = /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsxs(View, {
       style: styles.container,
       children: [/*#__PURE__*/_jsx(NetworkDetailScreen, {
-        visible: selectedEvent != null,
-        event: selectedEvent,
+        visible: selectedEventId != null,
+        eventId: selectedEventId,
+        paused: paused,
         ignoredPatternValues: ignoredPatternValues,
         onTogglePattern: toggleIgnoredPattern
       }), /*#__PURE__*/_jsx(NetworkFilterScreen, {
-        visible: showFilterView && activeTab === "filters" && !selectedEvent,
+        visible: showFilterView && activeTab === "filters" && !selectedEventId,
         paused: paused,
         isPro: isPro,
         filter: filter,
@@ -359,37 +403,86 @@ function NetworkModalInner({
         onAddPattern: addIgnoredPattern,
         onTogglePatternMode: toggleIgnoredPatternMode
       }), /*#__PURE__*/_jsx(NetworkCopyScreen, {
-        visible: showFilterView && activeTab === "copy" && !selectedEvent,
+        visible: showFilterView && activeTab === "copy" && !selectedEventId,
         paused: paused,
         isPro: isPro,
         filter: filter,
         ignoredPatterns: ignoredPatterns,
         settings: copySettings,
         onSettingsChange: setCopySettings
+      }), /*#__PURE__*/_jsx(NetworkSavedScreen, {
+        visible: showSavedView && selectedEventId == null && !showFilterView,
+        isPro: isPro,
+        copySettings: copySettings,
+        onEventPress: handleEventPress,
+        onUpgradePress: () => showUpgrade("saved")
       }), /*#__PURE__*/_jsx(NetworkListScreen, {
-        visible: selectedEvent == null && !showFilterView,
+        visible: selectedEventId == null && !showFilterView && !showSavedView,
         paused: paused,
         filter: filter,
         ignoredPatterns: ignoredPatterns,
         isPro: isPro,
         searchText: searchText,
-        onEventPress: setSelectedEvent,
-        onUpgradePress: () => setShowUpgradeModal(true)
+        onEventPress: handleEventPress,
+        onUpgradePress: () => showUpgrade("export")
       })]
     }), /*#__PURE__*/_jsx(UpgradeModal, {
       visible: showUpgradeModal,
       onClose: () => setShowUpgradeModal(false),
-      featureName: "Network Export",
-      description: "Export network requests to share with your team, debug APIs, or feed into AI tools.",
-      benefits: ["Export to JSON, Markdown, or plain text", "Customizable copy presets (URLs only, LLM-ready, full data)", "Share request details with teammates", "Feed network data directly to AI assistants"]
+      featureName: upgradeReason === "saved" ? "Saved Requests" : "Network Export",
+      description: upgradeReason === "saved" ? "Keep the requests that matter. Saved requests survive Clear, app restarts, and the 500-request history cap." : "Export network requests to share with your team, debug APIs, or feed into AI tools.",
+      benefits: upgradeReason === "saved" ? [`Save up to ${MAX_SAVED} requests (free keeps ${FREE_TIER_SAVED_LIMIT})`, "Failed requests stay put through a Clear", "Snapshots survive an app restart", "Export saved requests to teammates or AI assistants"] : ["Export to JSON, Markdown, or plain text", "Customizable copy presets (URLs only, LLM-ready, full data)", "Share request details with teammates", "Feed network data directly to AI assistants"]
     })]
   });
+
+  // The ONLY thing that differs between the phone and the desktop dashboard is
+  // which shell the header and body go in. Everything above this line is shared.
+  if (inline) {
+    return /*#__PURE__*/_jsxs(View, {
+      style: styles.inlineRoot,
+      children: [/*#__PURE__*/_jsx(View, {
+        style: styles.inlineHeader,
+        children: renderHeaderContent()
+      }), body]
+    });
+  }
+  return /*#__PURE__*/_jsx(JsModal, {
+    visible: visible,
+    onClose: onClose,
+    onMinimize: onMinimize,
+    persistenceKey: persistenceKey,
+    header: {
+      showToggleButton: true,
+      customContent: renderHeaderContent()
+    },
+    onModeChange: handleModeChange,
+    enablePersistence: true,
+    initialMode: "bottomSheet",
+    enableGlitchEffects: true,
+    disableScrollWrapper: listOwnsScroll,
+    styles: {},
+    children: body
+  });
 }
 const styles = StyleSheet.create({
   container: {
     flex: 1,
     backgroundColor: macOSColors.background.base
   },
+  /** Inline shell — fills the host panel; `minHeight: 0` so the list's own
+   * FlatList can scroll instead of stretching the column. */
+  inlineRoot: {
+    flex: 1,
+    minHeight: 0,
+    backgroundColor: macOSColors.background.base
+  },
+  inlineHeader: {
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderBottomWidth: 1,
+    borderBottomColor: macOSColors.border.default,
+    backgroundColor: macOSColors.background.card
+  },
   headerSearchContainer: {
     flexDirection: "row",
     alignItems: "center",
@@ -437,4 +530,28 @@ export function NetworkModal(props) {
       ...props
     })
   });
-}
+}
+/**
+ * The same network tool as `NetworkModal`, rendered INLINE — header bar, then
+ * body — for hosts that place tools in a panel rather than a modal. Buoy Desktop
+ * is the only one today.
+ *
+ * This exists so there is exactly ONE network tool. The desktop dashboard used
+ * to ship its own 1,258-line copy of the modal's internals, which is how the two
+ * surfaces drifted apart in the first place; anything added here now shows up on
+ * both without a second edit.
+ */
+export function NetworkToolView(props = {}) {
+  return /*#__PURE__*/_jsx(TickProvider, {
+    children: /*#__PURE__*/_jsx(NetworkModalInner, {
+      ...props,
+      inline: true,
+      visible: true
+      // Inline has no chrome to drive: there is no close button, no minimize
+      // and no outer back — the host panel owns all of that.
+      ,
+      onClose: noop
+    })
+  });
+}
+const noop = () => {};