@buoy-gg/network 2.1.2 → 2.1.4-beta.0

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

@@ -49,8 +49,9 @@ function NetworkModalInner({
     filter,
     setFilter,
     clearEvents,
-    isEnabled,
-    toggleInterception,
+    isCapturing,
+    pauseCapturing,
+    resumeCapturing,
     hasLockedEvents,
     lockedEventCount,
     isEventLocked,
@@ -58,6 +59,14 @@ function NetworkModalInner({
   } = (0, _useNetworkEvents.useNetworkEvents)({
     isPro
   });
+  const isEnabled = isCapturing;
+  const toggleInterception = (0, _react.useCallback)(() => {
+    if (isCapturing) {
+      pauseCapturing();
+    } else {
+      resumeCapturing();
+    }
+  }, [isCapturing, pauseCapturing, resumeCapturing]);
   const handleModeChange = (0, _react.useCallback)(_mode => {
     // Mode changes handled by JsModal
   }, []);
@@ -67,7 +76,8 @@ function NetworkModalInner({
   const [searchText, setSearchText] = (0, _react.useState)("");
   const [isSearchActive, setIsSearchActive] = (0, _react.useState)(false);
   const searchInputRef = (0, _react.useRef)(null);
-  const [ignoredPatterns, setIgnoredPatterns] = (0, _react.useState)(new Set());
+  const [ignoredPatterns, setIgnoredPatterns] = (0, _react.useState)(new Set(["api.keygen.sh"]) // Auto-hide Buoy license API requests by default
+  );
   const [copySettings, setCopySettings] = (0, _react.useState)(_NetworkCopySettingsView.DEFAULT_COPY_SETTINGS);
   const flatListRef = (0, _react.useRef)(null);
   const hasLoadedFilters = (0, _react.useRef)(false);
@@ -90,6 +100,10 @@ function NetworkModalInner({
         const storedPatterns = await _sharedUi.persistentStorage.getItem(_sharedUi.devToolsStorageKeys.network.ignoredDomains());
         if (storedPatterns) {
           const patterns = JSON.parse(storedPatterns);
+          // Always ensure Buoy license API is hidden
+          if (!patterns.includes("api.keygen.sh")) {
+            patterns.push("api.keygen.sh");
+          }
           setIgnoredPatterns(new Set(patterns));
         }
       } catch (_error) {
@@ -318,6 +332,27 @@ function NetworkModalInner({
     return generateCopyText();
   }, [filteredEvents.length, generateCopyText]);
 
+  // Compute badge stats from filtered events (respects ignored patterns)
+  const badgeStats = (0, _react.useMemo)(() => {
+    let successful = 0;
+    let failed = 0;
+    let pending = 0;
+    for (const event of filteredEvents) {
+      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
+    };
+  }, [filteredEvents]);
+
   // FlatList optimization - only keep what's needed for FlatList performance
   const keyExtractor = item => item.id;
 
@@ -458,7 +493,7 @@ function NetworkModalInner({
               style: [styles.headerChipValue, {
                 color: _sharedUi.macOSColors.semantic.success
               }],
-              children: stats.successfulRequests
+              children: badgeStats.successful
             })]
           }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
             style: [styles.headerChip, filter.status === "error" && styles.headerChipActive],
@@ -473,7 +508,7 @@ function NetworkModalInner({
               style: [styles.headerChipValue, {
                 color: _sharedUi.macOSColors.semantic.error
               }],
-              children: stats.failedRequests
+              children: badgeStats.failed
             })]
           }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
             style: [styles.headerChip, filter.status === "pending" && styles.headerChipActive],
@@ -488,7 +523,7 @@ function NetworkModalInner({
               style: [styles.headerChipValue, {
                 color: _sharedUi.macOSColors.semantic.warning
               }],
-              children: stats.pendingRequests
+              children: badgeStats.pending
             })]
           })]
         })
@@ -586,7 +621,7 @@ function NetworkModalInner({
         onSettingsChange: setCopySettings,
         events: filteredEvents
       }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_NetworkFilterViewV.NetworkFilterViewV3, {
-        events: events,
+        events: filteredEvents,
         filter: filter,
         onFilterChange: setFilter,
         ignoredPatterns: ignoredPatterns,

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

@@ -7,11 +7,12 @@ exports.FREE_TIER_REQUEST_LIMIT = void 0;
 exports.useNetworkEvents = useNetworkEvents;
 var _react = require("react");
 var _networkEventStore = require("../utils/networkEventStore");
-var _networkListener = require("../utils/networkListener");
 var _formatGraphQLVariables = require("../utils/formatGraphQLVariables");
 /**
  * Hook for accessing network events and controls
- * Uses Reactotron-style listener pattern
+ *
+ * Uses self-managing Subscribable pattern - the network listener automatically
+ * starts when this hook mounts and stops when all subscribers unmount.
  */
 
 /** Free tier limit for network requests */
@@ -19,13 +20,15 @@ const FREE_TIER_REQUEST_LIMIT = exports.FREE_TIER_REQUEST_LIMIT = 25;
 
 /**
  * Custom hook for accessing network events and controls
- * 
+ *
  * This hook provides a complete interface for network monitoring, including
- * event filtering, statistics calculation, and interception control. It uses
- * the Reactotron-style listener pattern for network event handling.
- * 
+ * event filtering, statistics calculation, and interception control.
+ *
+ * The network listener automatically starts when this hook mounts and stops
+ * when all components using it unmount (Subscribable pattern from TanStack Query).
+ *
  * @returns Object containing filtered events, statistics, controls, and utilities
- * 
+ *
  * @example
  * ```typescript
  * function NetworkMonitor() {
@@ -35,22 +38,19 @@ const FREE_TIER_REQUEST_LIMIT = exports.FREE_TIER_REQUEST_LIMIT = 25;
  *     filter,
  *     setFilter,
  *     clearEvents,
- *     toggleInterception,
- *     isEnabled
+ *     isCapturing
  *   } = useNetworkEvents();
- * 
+ *
  *   return (
  *     <div>
  *       <p>Total requests: {stats.totalRequests}</p>
  *       <p>Success rate: {stats.successfulRequests}/{stats.totalRequests}</p>
- *       <button onClick={toggleInterception}>
- *         {isEnabled ? 'Stop' : 'Start'} Monitoring
- *       </button>
+ *       <p>Capturing: {isCapturing ? 'Yes' : 'No'}</p>
  *     </div>
  *   );
  * }
  * ```
- * 
+ *
  * @performance Uses memoization for expensive filtering and statistics calculations
  * @performance Optimizes string operations and array processing for large datasets
  * @performance Includes Set-based lookups for O(1) filter matching
@@ -63,54 +63,39 @@ function useNetworkEvents(options = {}) {
   } = options;
   const [events, setEvents] = (0, _react.useState)([]);
   const [filter, setFilter] = (0, _react.useState)({});
-  const [isEnabled, setIsEnabled] = (0, _react.useState)(false);
+  const [isCapturing, setIsCapturing] = (0, _react.useState)(true);
+  const unsubscribeRef = (0, _react.useRef)(null);
 
-  // Subscribe to event store changes
+  // Subscribe/unsubscribe to event store based on isCapturing state.
+  // Each subscriber is independent — pausing this hook's subscription
+  // does not affect other subscribers (e.g. the events tool).
   (0, _react.useEffect)(() => {
-    // Subscribe to store changes
-    const unsubscribeStore = _networkEventStore.networkEventStore.subscribe(setEvents);
-
-    // Add listener to network events
-    const unsubscribeListener = (0, _networkListener.addNetworkListener)(event => {
-      // Only log in development and for non-ignored URLs
-      if (__DEV__ && !event.request.url.includes("symbolicate") && !event.request.url.includes(":8081")) {
-        // Network event processed: [event.type] [method] [url] - available for debugging if needed
-      }
-      _networkEventStore.networkEventStore.processNetworkEvent(event);
-    });
-
-    // Check if already listening
-    setIsEnabled((0, _networkListener.networkListener)().isActive);
-
-    // Start listening if not already
-    if (!(0, _networkListener.networkListener)().isActive) {
-      (0, _networkListener.startNetworkListener)();
-      setIsEnabled(true);
+    if (isCapturing) {
+      unsubscribeRef.current = _networkEventStore.networkEventStore.subscribeToEvents(setEvents);
     }
-
-    // Load initial events
-    setEvents(_networkEventStore.networkEventStore.getEvents());
     return () => {
-      unsubscribeStore();
-      unsubscribeListener();
+      if (unsubscribeRef.current) {
+        unsubscribeRef.current();
+        unsubscribeRef.current = null;
+      }
     };
-  }, []);
+  }, [isCapturing]);
 
-  // Clear all events
+  // Clear all events (also update local state in case we're paused/unsubscribed)
   const clearEvents = (0, _react.useCallback)(() => {
     _networkEventStore.networkEventStore.clearEvents();
+    setEvents([]);
   }, []);
 
-  // Toggle interception
-  const toggleInterception = (0, _react.useCallback)(() => {
-    if (isEnabled) {
-      (0, _networkListener.stopNetworkListener)();
-      setIsEnabled(false);
-    } else {
-      (0, _networkListener.startNetworkListener)();
-      setIsEnabled(true);
-    }
-  }, [isEnabled]);
+  // Pause: unsubscribe this hook from the store (other subscribers unaffected)
+  const pauseCapturing = (0, _react.useCallback)(() => {
+    setIsCapturing(false);
+  }, []);
+
+  // Resume: resubscribe this hook to the store
+  const resumeCapturing = (0, _react.useCallback)(() => {
+    setIsCapturing(true);
+  }, []);
 
   // Memoize search text processing to avoid repeated toLowerCase calls
   // Performance: Expensive string operations repeated for every event on every filter
@@ -304,8 +289,12 @@ function useNetworkEvents(options = {}) {
     filter,
     setFilter,
     clearEvents,
-    isEnabled,
-    toggleInterception,
+    /** Whether this hook is subscribed and receiving network events */
+    isCapturing,
+    /** Unsubscribe this hook from the network store (other subscribers unaffected) */
+    pauseCapturing,
+    /** Resubscribe this hook to the network store */
+    resumeCapturing,
     hosts,
     methods,
     /** Whether there are locked events due to free tier limit */
@@ -315,6 +304,8 @@ function useNetworkEvents(options = {}) {
     /** Check if a specific event is locked (by ID) */
     isEventLocked,
     /** Free tier request limit */
-    requestLimit: FREE_TIER_REQUEST_LIMIT
+    requestLimit: FREE_TIER_REQUEST_LIMIT,
+    /** Get subscriber counts for debugging */
+    getSubscriberCounts: () => _networkEventStore.networkEventStore.getSubscriberCounts()
   };
 }

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

@@ -4,18 +4,91 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.networkEventStore = void 0;
+var _sharedUi = require("@buoy-gg/shared-ui");
 var _extractOperationName = require("./extractOperationName");
+var _networkListener = require("./networkListener");
 /**
- * Network event store for managing captured network requests
- * Works with the Reactotron-style network listener
+ * Network Event Store
+ *
+ * Store for managing captured network requests. Uses BaseEventStore pattern -
+ * the network listener automatically starts when the first subscriber joins
+ * and stops when the last subscriber leaves.
+ *
+ * @example
+ * ```typescript
+ * import { networkEventStore } from '@buoy-gg/network';
+ *
+ * // Subscribe to network events - automatically starts capturing!
+ * const unsubscribe = networkEventStore.subscribeToEvents((events) => {
+ *   console.log('Network events:', events);
+ * });
+ *
+ * // Later, clean up - automatically stops if no other subscribers
+ * unsubscribe();
+ * ```
  */
 
-class NetworkEventStore {
-  events = [];
+/**
+ * Callback type for individual event notifications
+ */
+
+/**
+ * Callback type for full events array notifications
+ */
+
+class NetworkEventStore extends _sharedUi.BaseEventStore {
   pendingRequests = new Map();
-  listeners = new Set();
-  maxEvents = 500; // Configurable max events to prevent memory issues
-  recentRequests = new Map(); // Track recent requests to detect duplicates
+  recentRequests = new Map();
+  rawListenerUnsubscribe = null;
+  constructor() {
+    super({
+      storeName: "network",
+      maxEvents: 500
+    });
+  }
+
+  /**
+   * Start capturing network events
+   */
+  startCapturing() {
+    const listener = (0, _networkListener.networkListener)();
+
+    // Start the network interceptor if not already active
+    if (!listener.isActive) {
+      listener.startListening();
+    }
+
+    // Add our listener to push raw events into the store
+    if (!this.rawListenerUnsubscribe) {
+      this.rawListenerUnsubscribe = (0, _networkListener.addNetworkListener)(event => {
+        this.processNetworkEvent(event);
+      });
+    }
+  }
+
+  /**
+   * Stop capturing network events
+   */
+  stopCapturing() {
+    // Remove our raw listener
+    if (this.rawListenerUnsubscribe) {
+      this.rawListenerUnsubscribe();
+      this.rawListenerUnsubscribe = null;
+    }
+
+    // If no other listeners exist, stop the network interceptor
+    const listener = (0, _networkListener.networkListener)();
+    if (listener.listenerCount === 0) {
+      listener.stopListening();
+    }
+  }
+
+  /**
+   * Check if the store is actively capturing network events
+   */
+  isCapturing() {
+    return this.rawListenerUnsubscribe !== null;
+  }
 
   /**
    * Process a network listener event
@@ -32,13 +105,13 @@ class NetworkEventStore {
 
       // If same request within 50ms, likely a duplicate from XHR/fetch dual interception
       if (lastRequestTime && now - lastRequestTime < 50) {
-        return; // Skip duplicate
+        return;
       }
       this.recentRequests.set(requestKey, now);
 
       // Clean up old entries to prevent memory leak
       if (this.recentRequests.size > 100) {
-        const cutoff = now - 5000; // Remove entries older than 5 seconds
+        const cutoff = now - 5000;
         for (const [key, time] of this.recentRequests.entries()) {
           if (time < cutoff) {
             this.recentRequests.delete(key);
@@ -46,7 +119,6 @@ class NetworkEventStore {
         }
       }
 
-      // Create new network event for request
       // Build full URL with query params if present
       const queryString = request.params ? `?${new URLSearchParams(request.params).toString()}` : "";
       const fullUrl = `${request.url}${queryString}`;
@@ -54,12 +126,10 @@ class NetworkEventStore {
       // Extract GraphQL operation name and variables for searchability
       let operationName;
       let graphqlVariables;
-      if (request.client === 'graphql') {
+      if (request.client === "graphql") {
         const extracted = (0, _extractOperationName.extractOperationName)(request.data);
         operationName = extracted || undefined;
-
-        // Extract variables from GraphQL request
-        if (request.data && typeof request.data === 'object' && 'variables' in request.data && request.data.variables && typeof request.data.variables === 'object') {
+        if (request.data && typeof request.data === "object" && "variables" in request.data && request.data.variables && typeof request.data.variables === "object") {
           graphqlVariables = request.data.variables;
         }
       }
@@ -67,7 +137,6 @@ class NetworkEventStore {
         id: request.id,
         method: request.method,
         url: fullUrl,
-        // Store FULL URL with query params
         host: this.extractHost(request.url),
         path: this.extractPath(request.url),
         query: queryString,
@@ -78,18 +147,13 @@ class NetworkEventStore {
         responseHeaders: {},
         requestClient: request.client,
         operationName,
-        // GraphQL operation name for search/filter
-        graphqlVariables // GraphQL variables for display and search
+        graphqlVariables
       };
-
-      // Store as pending
       this.pendingRequests.set(request.id, networkEvent);
-
-      // Add to events list
       this.events = [networkEvent, ...this.events].slice(0, this.maxEvents);
-      this.notifyListeners();
+      this.notify(networkEvent);
+      this.notifyArrayListeners();
     } else if (event.type === "response" || event.type === "error") {
-      // Find and update the pending request
       const index = this.events.findIndex(e => e.id === request.id);
       if (index !== -1) {
         const updatedEvent = {
@@ -108,16 +172,13 @@ class NetworkEventStore {
           updatedEvent.error = event.error.message;
           updatedEvent.status = updatedEvent.status || 0;
         }
-        this.events[index] = updatedEvent;
+        this.events = this.events.map((e, i) => i === index ? updatedEvent : e);
         this.pendingRequests.delete(request.id);
-        this.notifyListeners();
+        this.notify(updatedEvent);
+        this.notifyArrayListeners();
       }
     }
   }
-
-  /**
-   * Extract host from URL
-   */
   extractHost(url) {
     try {
       const urlObj = new URL(url);
@@ -127,10 +188,6 @@ class NetworkEventStore {
       return "";
     }
   }
-
-  /**
-   * Extract path from URL
-   */
   extractPath(url) {
     try {
       const urlObj = new URL(url);
@@ -140,10 +197,6 @@ class NetworkEventStore {
       return url;
     }
   }
-
-  /**
-   * Get size of data
-   */
   getDataSize(data) {
     if (!data) return 0;
     if (typeof data === "string") return data.length;
@@ -153,63 +206,38 @@ class NetworkEventStore {
       return 0;
     }
   }
-
-  /**
-   * Get all events
-   */
-  getEvents() {
-    return [...this.events];
-  }
-
-  /**
-   * Get event by ID
-   */
   getEventById(id) {
     return this.events.find(e => e.id === id);
   }
 
   /**
-   * Clear all events
+   * Override clearEvents to also clear pending requests
    */
   clearEvents() {
-    this.events = [];
+    super.clearEvents();
     this.pendingRequests.clear();
     this.recentRequests.clear();
-    this.notifyListeners();
-  }
-
-  /**
-   * Subscribe to event changes
-   */
-  subscribe(listener) {
-    this.listeners.add(listener);
-    return () => {
-      this.listeners.delete(listener);
-    };
   }
 
   /**
-   * Notify all listeners of changes
+   * Subscribe to individual events with optional replay of existing events
    */
-  notifyListeners() {
-    const events = this.getEvents();
-    this.listeners.forEach(listener => listener(events));
-  }
+  onEvent(callback, replayExisting = true) {
+    const unsubscribe = this.subscribe(callback);
 
-  /**
-   * Set maximum number of events to store
-   */
-  setMaxEvents(max) {
-    this.maxEvents = max;
-    if (this.events.length > max) {
-      this.events = this.events.slice(0, max);
-      this.notifyListeners();
+    // Replay existing events if requested
+    if (replayExisting && this.events.length > 0) {
+      const existingEvents = [...this.events].reverse();
+      for (const event of existingEvents) {
+        try {
+          callback(event);
+        } catch {
+          // Ignore callback errors
+        }
+      }
     }
+    return unsubscribe;
   }
-
-  /**
-   * Get statistics about network events
-   */
   getStats() {
     const total = this.events.length;
     const successful = this.events.filter(e => e.status && e.status >= 200 && e.status < 300).length;
@@ -229,10 +257,6 @@ class NetworkEventStore {
       averageDuration: Math.round(avgDuration)
     };
   }
-
-  /**
-   * Filter events by criteria
-   */
   filterEvents(filter) {
     let filtered = [...this.events];
     if (filter.method) {
@@ -263,7 +287,7 @@ class NetworkEventStore {
 }
 
 /**
- * Singleton store that aggregates captured network traffic. Components and hooks consume this
- * store to render histories, derive stats, and subscribe to real-time updates.
+ * Singleton store that aggregates captured network traffic.
+ * Automatically starts/stops capturing based on subscriber count.
  */
 const networkEventStore = exports.networkEventStore = new NetworkEventStore();

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

@@ -45,8 +45,9 @@ function NetworkModalInner({
     filter,
     setFilter,
     clearEvents,
-    isEnabled,
-    toggleInterception,
+    isCapturing,
+    pauseCapturing,
+    resumeCapturing,
     hasLockedEvents,
     lockedEventCount,
     isEventLocked,
@@ -54,6 +55,14 @@ function NetworkModalInner({
   } = useNetworkEvents({
     isPro
   });
+  const isEnabled = isCapturing;
+  const toggleInterception = useCallback(() => {
+    if (isCapturing) {
+      pauseCapturing();
+    } else {
+      resumeCapturing();
+    }
+  }, [isCapturing, pauseCapturing, resumeCapturing]);
   const handleModeChange = useCallback(_mode => {
     // Mode changes handled by JsModal
   }, []);
@@ -63,7 +72,8 @@ function NetworkModalInner({
   const [searchText, setSearchText] = useState("");
   const [isSearchActive, setIsSearchActive] = useState(false);
   const searchInputRef = useRef(null);
-  const [ignoredPatterns, setIgnoredPatterns] = useState(new Set());
+  const [ignoredPatterns, setIgnoredPatterns] = useState(new Set(["api.keygen.sh"]) // Auto-hide Buoy license API requests by default
+  );
   const [copySettings, setCopySettings] = useState(DEFAULT_COPY_SETTINGS);
   const flatListRef = useRef(null);
   const hasLoadedFilters = useRef(false);
@@ -86,6 +96,10 @@ function NetworkModalInner({
         const storedPatterns = await persistentStorage.getItem(devToolsStorageKeys.network.ignoredDomains());
         if (storedPatterns) {
           const patterns = JSON.parse(storedPatterns);
+          // Always ensure Buoy license API is hidden
+          if (!patterns.includes("api.keygen.sh")) {
+            patterns.push("api.keygen.sh");
+          }
           setIgnoredPatterns(new Set(patterns));
         }
       } catch (_error) {
@@ -314,6 +328,27 @@ function NetworkModalInner({
     return generateCopyText();
   }, [filteredEvents.length, generateCopyText]);
 
+  // Compute badge stats from filtered events (respects ignored patterns)
+  const badgeStats = useMemo(() => {
+    let successful = 0;
+    let failed = 0;
+    let pending = 0;
+    for (const event of filteredEvents) {
+      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
+    };
+  }, [filteredEvents]);
+
   // FlatList optimization - only keep what's needed for FlatList performance
   const keyExtractor = item => item.id;
 
@@ -454,7 +489,7 @@ function NetworkModalInner({
               style: [styles.headerChipValue, {
                 color: macOSColors.semantic.success
               }],
-              children: stats.successfulRequests
+              children: badgeStats.successful
             })]
           }), /*#__PURE__*/_jsxs(TouchableOpacity, {
             style: [styles.headerChip, filter.status === "error" && styles.headerChipActive],
@@ -469,7 +504,7 @@ function NetworkModalInner({
               style: [styles.headerChipValue, {
                 color: macOSColors.semantic.error
               }],
-              children: stats.failedRequests
+              children: badgeStats.failed
             })]
           }), /*#__PURE__*/_jsxs(TouchableOpacity, {
             style: [styles.headerChip, filter.status === "pending" && styles.headerChipActive],
@@ -484,7 +519,7 @@ function NetworkModalInner({
               style: [styles.headerChipValue, {
                 color: macOSColors.semantic.warning
               }],
-              children: stats.pendingRequests
+              children: badgeStats.pending
             })]
           })]
         })
@@ -582,7 +617,7 @@ function NetworkModalInner({
         onSettingsChange: setCopySettings,
         events: filteredEvents
       }) : /*#__PURE__*/_jsx(NetworkFilterViewV3, {
-        events: events,
+        events: filteredEvents,
         filter: filter,
         onFilterChange: setFilter,
         ignoredPatterns: ignoredPatterns,