@buoy-gg/network 7.0.3 → 7.0.5

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

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.NetworkModal = NetworkModal;
+exports.NetworkToolView = NetworkToolView;
 var _react = require("react");
 var _reactNative = require("react-native");
 var _sharedUi = require("@buoy-gg/shared-ui");
@@ -13,7 +14,10 @@ var _NetworkEventDetailView = require("./NetworkEventDetailView");
 var _NetworkCopySettingsView = require("./NetworkCopySettingsView");
 var _NetworkHeaderLive = require("./NetworkHeaderLive");
 var _NetworkListScreen = require("./NetworkListScreen");
+var _NetworkSavedScreen = require("./NetworkSavedScreen");
 var _useNetworkEventList = require("../hooks/useNetworkEventList");
+var _useLiveNetworkEvent = require("../hooks/useLiveNetworkEvent");
+var _networkSavedStore = require("../utils/networkSavedStore");
 var _jsxRuntime = require("react/jsx-runtime");
 // ============================================================================
 // Screens (rule4 stable router: each gates itself with `return null`; the
@@ -24,10 +28,17 @@ var _jsxRuntime = require("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 = (0, _useLiveNetworkEvent.useLiveNetworkEvent)(eventId, {
+    paused: paused || !visible
+  });
   if (!visible || !event) return null;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_NetworkEventDetailView.NetworkEventDetailView, {
     event: event,
@@ -105,18 +116,31 @@ function NetworkModalInner({
   onClose,
   onBack,
   onMinimize,
-  enableSharedModalDimensions = false
+  enableSharedModalDimensions = false,
+  inline = false,
+  paused: pausedProp,
+  onPausedChange
 }) {
   const {
     isPro
   } = (0, _sharedUi.useFeatureGate)();
 
   // Capture pause (the power toggle's freeze-stream semantic) — gates
-  // every subscriber in this modal's tree via props.
-  const [paused, setPaused] = (0, _react.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] = (0, _react.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] = (0, _react.useState)({});
-  const [selectedEvent, setSelectedEvent] = (0, _react.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] = (0, _react.useState)(null);
   const [showFilterView, setShowFilterView] = (0, _react.useState)(false);
+  const [showSavedView, setShowSavedView] = (0, _react.useState)(false);
   const [activeTab, setActiveTab] = (0, _react.useState)("filters");
   const [searchText, setSearchText] = (0, _react.useState)("");
   const [isSearchActive, setIsSearchActive] = (0, _react.useState)(false);
@@ -134,6 +158,13 @@ function NetworkModalInner({
   const [copySettings, setCopySettings] = (0, _react.useState)(_NetworkCopySettingsView.DEFAULT_COPY_SETTINGS);
   const hasLoadedCopySettings = (0, _react.useRef)(false);
   const [showUpgradeModal, setShowUpgradeModal] = (0, _react.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] = (0, _react.useState)("export");
+  const showUpgrade = reason => {
+    setUpgradeReason(reason);
+    setShowUpgradeModal(true);
+  };
 
   // Auto-close upgrade modal when user becomes Pro
   (0, _react.useEffect)(() => {
@@ -177,8 +208,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 = (0, _react.useCallback)(event => {
+    setSelectedEventId(event.id);
+  }, []);
   const handleSearch = text => {
     setSearchText(text);
     setFilter(prev => ({
@@ -230,13 +266,32 @@ function NetworkModalInner({
     }
 
     // Event detail view header
-    if (selectedEvent) {
+    if (selectedEventId) {
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation, {
           onBack: handleBack
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Content, {
           title: "Request Details",
           centered: true
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Actions, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_NetworkHeaderLive.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__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation, {
+          onBack: () => setShowSavedView(false)
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Content, {
+          title: "Saved Requests",
+          centered: true
         })]
       });
     }
@@ -305,13 +360,15 @@ function NetworkModalInner({
             size: 14,
             color: filter.status || filter.method || filter.contentType ? _sharedUi.macOSColors.semantic.info : _sharedUi.macOSColors.text.muted
           })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_NetworkHeaderLive.NetworkSavedButton, {
+          onPress: () => setShowSavedView(true)
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_NetworkHeaderLive.NetworkHeaderCopyButton, {
           isPro: isPro,
           filter: filter,
           ignoredPatterns: ignoredPatterns,
           copySettings: copySettings,
           paused: paused,
-          onUpgradePress: () => setShowUpgradeModal(true)
+          onUpgradePress: () => showUpgrade("export")
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.PowerToggleButton, {
           isEnabled: !paused,
           onToggle: () => setPaused(prev => !prev),
@@ -328,32 +385,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__*/(0, _jsxRuntime.jsxs)(_sharedUi.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__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: styles.container,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(NetworkDetailScreen, {
-        visible: selectedEvent != null,
-        event: selectedEvent,
+        visible: selectedEventId != null,
+        eventId: selectedEventId,
+        paused: paused,
         ignoredPatternValues: ignoredPatternValues,
         onTogglePattern: toggleIgnoredPattern
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(NetworkFilterScreen, {
-        visible: showFilterView && activeTab === "filters" && !selectedEvent,
+        visible: showFilterView && activeTab === "filters" && !selectedEventId,
         paused: paused,
         isPro: isPro,
         filter: filter,
@@ -363,37 +408,86 @@ function NetworkModalInner({
         onAddPattern: addIgnoredPattern,
         onTogglePatternMode: toggleIgnoredPatternMode
       }), /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)(_NetworkSavedScreen.NetworkSavedScreen, {
+        visible: showSavedView && selectedEventId == null && !showFilterView,
+        isPro: isPro,
+        copySettings: copySettings,
+        onEventPress: handleEventPress,
+        onUpgradePress: () => showUpgrade("saved")
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_NetworkListScreen.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__*/(0, _jsxRuntime.jsx)(_sharedUi.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 ${_networkSavedStore.MAX_SAVED} requests (free keeps ${_networkSavedStore.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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.inlineRoot,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.inlineHeader,
+        children: renderHeaderContent()
+      }), body]
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.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 = _reactNative.StyleSheet.create({
   container: {
     flex: 1,
     backgroundColor: _sharedUi.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: _sharedUi.macOSColors.background.base
+  },
+  inlineHeader: {
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderBottomWidth: 1,
+    borderBottomColor: _sharedUi.macOSColors.border.default,
+    backgroundColor: _sharedUi.macOSColors.background.card
+  },
   headerSearchContainer: {
     flexDirection: "row",
     alignItems: "center",
@@ -441,4 +535,28 @@ 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.
+ */
+function NetworkToolView(props = {}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_useTickEveryMinute.TickProvider, {
+    children: /*#__PURE__*/(0, _jsxRuntime.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 = () => {};

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

@@ -0,0 +1,245 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NetworkSavedScreen = NetworkSavedScreen;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _NetworkEventItemCompact = require("./NetworkEventItemCompact");
+var _NetworkUpgradeBanner = require("./NetworkUpgradeBanner");
+var _generateNetworkCopyText = require("../utils/generateNetworkCopyText");
+var _filterNetworkEvents = require("../utils/filterNetworkEvents");
+var _useNetworkSaved = require("../hooks/useNetworkSaved");
+var _networkSavedStore = require("../utils/networkSavedStore");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * The SAVED screen — the network tool's favorites list.
+ *
+ * Everything here is read from the persisted saved store, never from the live
+ * event store. That is the whole point of the screen: these requests survive a
+ * Clear, the 500-event cap, and an app restart, so a failure you kept is still
+ * here tomorrow.
+ *
+ * Rows are the same two row components the live list uses, so a saved request
+ * looks exactly like the request it was. Long-press here UNSAVES rather than
+ * pins — in this list "get rid of it" is the action the row affords, and
+ * pinning is still available from the detail header.
+ *
+ * Stable-tree contract (rule4): hooks run unconditionally, then the component
+ * returns null when not visible.
+ */
+
+const keyExtractor = item => item.id;
+function EmptyState() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.emptyState,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Bookmark, {
+      size: 32,
+      color: _sharedUi.macOSColors.text.muted
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: styles.emptyTitle,
+      children: "No saved requests"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: styles.emptyText,
+      children: "Open a request and tap the bookmark to keep it here \u2014 saved requests survive Clear and app restarts."
+    })]
+  });
+}
+function NetworkSavedScreen({
+  visible,
+  isPro,
+  copySettings,
+  onEventPress,
+  onUpgradePress
+}) {
+  const {
+    savedRecords,
+    pinnedLiveIds,
+    toggleSave,
+    clearSaved
+  } = (0, _useNetworkSaved.useNetworkSaved)();
+  const [search, setSearch] = (0, _react.useState)("");
+  if (!visible) return null;
+
+  /**
+   * A downgrade (or a limit change) can leave a free user holding more saves
+   * than the free tier allows. Rather than deleting their data, the overflow
+   * is LOCKED — oldest first, so the newest saves stay reachable — and the
+   * banner offers the upgrade that unlocks it.
+   */
+  const limit = isPro ? _networkSavedStore.MAX_SAVED : _networkSavedStore.FREE_TIER_SAVED_LIMIT;
+  const unlocked = savedRecords.slice(0, limit);
+  const lockedCount = savedRecords.length - unlocked.length;
+  const events = unlocked.map(record => record.event);
+  const filtered = search ? (0, _filterNetworkEvents.filterNetworkEvents)(events, {
+    searchText: search
+  }) : events;
+  const handleLongPress = event => {
+    toggleSave(event);
+  };
+  const renderItem = ({
+    item
+  }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_NetworkEventItemCompact.NetworkEventItemCompact, {
+    event: item,
+    onPress: onEventPress,
+    onLongPress: handleLongPress,
+    saved: true,
+    pinned: pinnedLiveIds.has(item.id)
+  });
+  const renderListFooter = () => {
+    if (lockedCount === 0) return null;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_NetworkUpgradeBanner.NetworkUpgradeBanner, {
+      title: `${lockedCount} saved ${lockedCount === 1 ? "request" : "requests"} locked`,
+      subtitle: `Free keeps ${_networkSavedStore.FREE_TIER_SAVED_LIMIT}. Upgrade to Pro to unlock the rest.`,
+      onPress: onUpgradePress
+    });
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.root,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.toolbar,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Bookmark, {
+        size: 11,
+        color: _sharedUi.macOSColors.semantic.debug
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+        style: styles.toolbarTitle,
+        children: ["SAVED \xB7 ", savedRecords.length, isPro ? "" : `/${_networkSavedStore.FREE_TIER_SAVED_LIMIT}`]
+      }), isPro ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.CopyButton
+      // Lazy value, resolved at press time — no string is built per
+      // render, and it always reflects the current list.
+      , {
+        value: () => (0, _generateNetworkCopyText.generateNetworkCopyText)(filtered, copySettings),
+        size: 13,
+        buttonStyle: styles.toolbarButton,
+        colors: {
+          idle: _sharedUi.macOSColors.text.secondary,
+          success: _sharedUi.macOSColors.semantic.success,
+          error: _sharedUi.macOSColors.semantic.error
+        },
+        disabled: filtered.length === 0
+      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+        onPress: clearSaved,
+        "sentry-label": "ignore clear saved",
+        style: styles.toolbarClear,
+        disabled: savedRecords.length === 0,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.toolbarClearText, savedRecords.length === 0 && styles.toolbarClearTextDisabled],
+          children: "Clear all"
+        })
+      })]
+    }), savedRecords.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.searchRow,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Search, {
+        size: 13,
+        color: _sharedUi.macOSColors.text.secondary
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
+        style: styles.searchInput,
+        placeholder: "Search saved requests\u2026",
+        placeholderTextColor: _sharedUi.macOSColors.text.muted,
+        value: search,
+        onChangeText: setSearch,
+        "sentry-label": "ignore saved search",
+        accessibilityLabel: "Search saved requests",
+        autoCapitalize: "none",
+        autoCorrect: false,
+        returnKeyType: "search"
+      })]
+    }) : null, savedRecords.length === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(EmptyState, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.FlatList, {
+      data: filtered,
+      renderItem: renderItem,
+      keyExtractor: keyExtractor,
+      contentContainerStyle: styles.listContent,
+      showsVerticalScrollIndicator: true,
+      removeClippedSubviews: true,
+      scrollEnabled: true,
+      initialNumToRender: 12,
+      maxToRenderPerBatch: 8,
+      windowSize: 5,
+      extraData: pinnedLiveIds,
+      "sentry-label": "ignore saved requests list",
+      ListFooterComponent: renderListFooter
+    })]
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  root: {
+    flex: 1,
+    minHeight: 0
+  },
+  toolbar: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    paddingHorizontal: 20,
+    paddingTop: 10,
+    paddingBottom: 6
+  },
+  toolbarTitle: {
+    flex: 1,
+    color: _sharedUi.macOSColors.semantic.debug,
+    fontSize: 10,
+    fontWeight: "700",
+    letterSpacing: 0.6,
+    fontFamily: "monospace"
+  },
+  toolbarButton: {
+    width: 26,
+    height: 26,
+    borderRadius: 6,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  toolbarClear: {
+    paddingHorizontal: 6,
+    paddingVertical: 2
+  },
+  toolbarClearText: {
+    color: _sharedUi.macOSColors.text.muted,
+    fontSize: 10
+  },
+  toolbarClearTextDisabled: {
+    color: _sharedUi.macOSColors.text.disabled
+  },
+  searchRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    marginHorizontal: 12,
+    marginBottom: 8,
+    paddingHorizontal: 10,
+    paddingVertical: 5,
+    backgroundColor: _sharedUi.macOSColors.background.input,
+    borderRadius: 10,
+    borderWidth: 1,
+    borderColor: _sharedUi.macOSColors.border.default
+  },
+  searchInput: {
+    flex: 1,
+    color: _sharedUi.macOSColors.text.primary,
+    fontSize: 13,
+    paddingVertical: 2
+  },
+  listContent: {
+    paddingTop: 4
+  },
+  emptyState: {
+    alignItems: "center",
+    paddingVertical: 40,
+    paddingHorizontal: 24
+  },
+  emptyTitle: {
+    color: _sharedUi.macOSColors.text.primary,
+    fontSize: 14,
+    fontWeight: "600",
+    marginTop: 12,
+    marginBottom: 6
+  },
+  emptyText: {
+    color: _sharedUi.macOSColors.text.muted,
+    fontSize: 12,
+    textAlign: "center",
+    lineHeight: 17
+  }
+});

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

@@ -0,0 +1,76 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NetworkUpgradeBanner = NetworkUpgradeBanner;
+var _reactNative = require("react-native");
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * The "N things are locked, upgrade to see them" banner.
+ *
+ * Extracted because there are now two of them — locked request history on the
+ * live list, and locked saves on the Saved screen — and they are the same
+ * offer. Two copies would drift the moment one of them gets a copy tweak.
+ */
+
+function NetworkUpgradeBanner({
+  title,
+  subtitle,
+  onPress
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+    style: styles.banner,
+    onPress: onPress,
+    activeOpacity: 0.8,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.content,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.left,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Zap, {
+          size: 16,
+          color: _sharedUi.buoyColors.primary
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.title,
+          children: title
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ProBadge, {})]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: styles.subtitle,
+      children: subtitle
+    })]
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  banner: {
+    backgroundColor: _sharedUi.buoyColors.card,
+    borderRadius: 10,
+    borderWidth: 1,
+    borderColor: _sharedUi.buoyColors.primary + "40",
+    padding: 12,
+    marginHorizontal: 12,
+    marginTop: 12,
+    marginBottom: 34
+  },
+  content: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    marginBottom: 4
+  },
+  left: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8
+  },
+  title: {
+    color: _sharedUi.buoyColors.text,
+    fontSize: 13,
+    fontWeight: "600"
+  },
+  subtitle: {
+    color: _sharedUi.buoyColors.textMuted,
+    fontSize: 11
+  }
+});