@buoy-gg/network 5.0.0 → 6.0.1

package/README.md

@@ -1,381 +1,57 @@
-# @buoy/network
+# @buoy-gg/network
 
-[![npm](https://img.shields.io/npm/v/@buoy%2Fnetwork)](https://www.npmjs.com/package/@buoy/network)
+[![npm version](https://img.shields.io/npm/v/@buoy-gg/network?style=flat-square&labelColor=1c1c1c&color=10B981)](https://www.npmjs.com/package/@buoy-gg/network) [![npm downloads](https://img.shields.io/npm/dm/@buoy-gg/network?style=flat-square&labelColor=1c1c1c&color=10B981)](https://www.npmjs.com/package/@buoy-gg/network)
 
-Network request monitoring and inspection tool for React Native development.
+**See every HTTP request your React Native app makes — URL, headers, payloads, timing, and errors — live on the device, no Flipper or proxy required.**
 
-## Features
+Part of [Buoy](https://github.com/Buoy-gg/buoy) — devtools that live inside your React Native app. Install it and it auto-appears in the floating menu from [`@buoy-gg/core`](https://www.npmjs.com/package/@buoy-gg/core).
 
-- **Live Network Monitoring**: Track all fetch and XMLHttpRequest calls in real-time
-- **Request/Response Inspection**: View detailed information about headers, payloads, and responses
-- **Filtering**: Filter requests by status code, HTTP method, or URL pattern
-- **Timing Information**: See request duration and timing details
-- **Search**: Search through captured network events
-- **Pause/Resume**: Control when to capture network events
-- **Clear History**: Clear captured events when needed
-- **Beautiful UI**: Modern, game-themed interface matching other React Buoy tools
+![Network Monitor demo](https://github.com/user-attachments/assets/473ddf83-03cd-4bd1-8dc3-0f66eda9fa8a)
 
-## Installation
-
-This package is part of the React Buoy monorepo and is automatically available to other packages and the example app.
-
-For external projects:
+## Install
 
 ```bash
-npm install @buoy/network
-# or
-pnpm add @buoy/network
-# or
-yarn add @buoy/network
-```
-
-## Quick Start
-
-### Simplest Setup - Just 1 Line!
-
-**Import the preset and add it to your tools array. Done!**
-
-```typescript
-import { networkToolPreset } from '@buoy/network';
-import { FloatingDevTools } from '@buoy/core';
-
-const installedApps = [
-  networkToolPreset, // That's it! One line.
-  // ...your other tools
-];
-
-function App() {
-  return (
-    <FloatingDevTools
-      apps={installedApps}
-      environment="local"
-      userRole="admin"
-    />
-  );
-}
-```
-
-**Done!** The preset automatically:
-- ✅ Monitors all network requests
-- ✅ Intercepts fetch and XMLHttpRequest
-- ✅ Provides filtering and search
-- ✅ No configuration required
-
-### Custom Configuration
-
-If you want to customize the appearance or behavior:
-
-```typescript
-import { createNetworkTool } from '@buoy/network';
-
-const myNetworkTool = createNetworkTool({
-  name: "REQUESTS",
-  colorPreset: "purple",
-  enableSharedModalDimensions: true,
-});
-
-const installedApps = [
-  myNetworkTool,
-  // ...other tools
-];
+npm install @buoy-gg/core @buoy-gg/network
 ```
 
-### Alternative: Manual Setup
-
-If you're not using FloatingDevTools or want more control:
+## Quick start
 
-```typescript
-import { NetworkModal } from '@buoy/network';
+Fully automatic. Render the floating menu once — the Network Monitor is auto-discovered as soon as this package is installed:
 
-function App() {
-  const [showNetwork, setShowNetwork] = useState(false);
+```tsx
+import { FloatingDevTools } from "@buoy-gg/core";
 
+export default function App() {
   return (
     <>
-      <Button onPress={() => setShowNetwork(true)}>
-        Open Network Monitor
-      </Button>
-
-      <NetworkModal
-        visible={showNetwork}
-        onClose={() => setShowNetwork(false)}
-      />
+      {/* your app */}
+      <FloatingDevTools />
     </>
   );
 }
 ```
 
-## API Reference
-
-### Presets
-
-#### `networkToolPreset`
-
-Pre-configured network monitoring tool ready to use with FloatingDevTools.
-
-**Example:**
-```typescript
-import { networkToolPreset } from '@buoy/network';
-
-const installedApps = [networkToolPreset];
-```
-
-#### `createNetworkTool(options?)`
-
-Create a custom network monitoring tool configuration.
-
-**Options:**
-```typescript
-{
-  /** Tool name (default: "NET") */
-  name?: string;
-  /** Tool description */
-  description?: string;
-  /** Icon color preset (default: "cyan") */
-  colorPreset?: "orange" | "cyan" | "purple" | "pink" | "yellow" | "green";
-  /** Custom tool ID (default: "network") */
-  id?: string;
-  /** Enable shared modal dimensions */
-  enableSharedModalDimensions?: boolean;
-}
-```
-
-**Example:**
-```typescript
-import { createNetworkTool } from '@buoy/network';
-
-const myNetworkTool = createNetworkTool({
-  name: "API CALLS",
-  colorPreset: "green",
-  enableSharedModalDimensions: true,
-});
-```
-
-### Components
-
-#### `NetworkModal`
-
-Main modal component for monitoring network requests.
-
-**Props:**
-```typescript
-interface NetworkModalProps {
-  /** Whether the modal is visible */
-  visible: boolean;
-  /** Callback when modal is closed */
-  onClose: () => void;
-  /** Optional back button handler */
-  onBack?: () => void;
-  /** Whether to use shared modal dimensions */
-  enableSharedModalDimensions?: boolean;
-}
-```
-
-**Example:**
-```typescript
-<NetworkModal
-  visible={isVisible}
-  onClose={handleClose}
-  enableSharedModalDimensions={true}
-/>
-```
+Want a different label or color? Build the tool with `createNetworkTool({ name, colorPreset })` and pass it via `apps={[...]}`.
 
-### Hooks
+## What you get
 
-#### `useNetworkEvents()`
+- **Every request, zero config** — intercepts `fetch` and `XMLHttpRequest`, so fetch, axios, GraphQL clients, and gRPC-web all show up automatically.
+- **GraphQL gets special treatment** — operation names are extracted from queries, mutations, and subscriptions and shown with variables in arrow notation: `GetUser › 123`. No more guessing which `/graphql` request is which.
+- **Full request detail** — request/response headers, payloads, HTTP status, and duration for every call, with status-colored rows.
+- **Filter and search** — narrow by status code, HTTP method, or URL pattern; search captured events; pause/resume capture; clear history.
+- **Ignore the noise** — a shared ignored-domains/URL filter (`useIgnoredPatterns`) hides endpoints you never want to see, shared with the Events tool.
+- **Hooks for custom UIs** — `useNetworkEvents`, `useNetworkEventList`, and `useNetworkBadgeCounts` expose the capture stream with narrow per-consumer subscriptions.
 
-Access the list of captured network events and control functions.
-
-**Returns:**
-```typescript
-{
-  /** Array of captured network events */
-  events: NetworkEvent[];
-  /** Whether interception is enabled */
-  isEnabled: boolean;
-  /** Enable network interception */
-  enable: () => void;
-  /** Disable network interception */
-  disable: () => void;
-  /** Clear all captured events */
-  clear: () => void;
-}
-```
-
-**Example:**
-```typescript
-import { useNetworkEvents } from '@buoy/network';
-
-function MyComponent() {
-  const { events, isEnabled, enable, disable, clear } = useNetworkEvents();
-
-  return (
-    <View>
-      <Text>Captured {events.length} requests</Text>
-      <Button onPress={isEnabled ? disable : enable}>
-        {isEnabled ? 'Pause' : 'Resume'}
-      </Button>
-      <Button onPress={clear}>Clear</Button>
-    </View>
-  );
-}
-```
-
-### Types
-
-#### `NetworkEvent`
-
-```typescript
-interface NetworkEvent {
-  /** Unique event ID */
-  id: string;
-  /** Request URL */
-  url: string;
-  /** HTTP method */
-  method: string;
-  /** HTTP status code */
-  status?: number;
-  /** Request headers */
-  requestHeaders?: Record<string, string>;
-  /** Response headers */
-  responseHeaders?: Record<string, string>;
-  /** Request body */
-  requestBody?: any;
-  /** Response body */
-  responseBody?: any;
-  /** Request start timestamp */
-  startTime: number;
-  /** Request end timestamp */
-  endTime?: number;
-  /** Request duration in ms */
-  duration?: number;
-  /** Error message if request failed */
-  error?: string;
-}
-```
-
-## Use Cases
-
-### API Debugging
-
-Monitor all API calls to your backend:
-
-```typescript
-import { networkToolPreset } from '@buoy/network';
-
-// Add to your dev tools
-const installedApps = [networkToolPreset];
-
-// Now you can:
-// - See all API requests in real-time
-// - Inspect request/response payloads
-// - Check response times
-// - Debug failed requests
-```
-
-### Performance Monitoring
-
-Track slow network requests:
-
-```typescript
-import { useNetworkEvents } from '@buoy/network';
-
-function PerformanceMonitor() {
-  const { events } = useNetworkEvents();
-
-  const slowRequests = events.filter(e => e.duration && e.duration > 1000);
-
-  return (
-    <View>
-      <Text>Slow Requests: {slowRequests.length}</Text>
-      {slowRequests.map(req => (
-        <Text key={req.id}>
-          {req.url} took {req.duration}ms
-        </Text>
-      ))}
-    </View>
-  );
-}
-```
-
-### Request Filtering
-
-Filter requests by specific criteria:
-
-```typescript
-// In the Network Modal UI:
-// - Filter by status code (200, 404, 500, etc.)
-// - Filter by HTTP method (GET, POST, PUT, DELETE)
-// - Search by URL pattern
-// - Filter by success/error state
-```
-
-## Features in Detail
-
-### Network Interception
-
-The package automatically intercepts:
-- `fetch()` calls
-- `XMLHttpRequest` calls
-- All HTTP methods (GET, POST, PUT, DELETE, PATCH, etc.)
-
-### Request Details
-
-For each request, you can view:
-- Full URL and query parameters
-- HTTP method and status code
-- Request and response headers
-- Request and response bodies
-- Timing information (duration, timestamps)
-- Error details if the request failed
-
-### Filtering & Search
-
-- **By Status**: Filter by HTTP status codes
-- **By Method**: Filter by HTTP method
-- **By URL**: Search through request URLs
-- **By State**: Filter successful, pending, or failed requests
-
-### Performance Tracking
-
-- View request duration
-- Identify slow requests
-- Monitor request timing
-- Track request count
-
-## Dependencies
-
-- `@buoy/shared-ui` - Common UI components and utilities
-- React and React Native (peer dependencies)
-
-## Development
-
-### Building
-
-```bash
-pnpm build
-```
-
-### Type Checking
-
-```bash
-pnpm typecheck
-```
-
-### Clean Build
-
-```bash
-pnpm clean
-```
+## Desktop & AI
 
-## License
+The same live session streams to [Buoy Desktop](https://github.com/Buoy-gg/Buoy-Desktop) (free, macOS/Windows/Linux) and to Claude Code or Cursor via the [Buoy MCP server](https://buoy.gg/buoy/latest/docs/mcp).
 
-MIT
+## Free vs Pro
 
-## Contributing
+Every tool is free. [Pro](https://buoy.gg/pricing) unlocks production builds, the MCP server, and unlimited capture. Every weekend, Pro features unlock free for everyone.
 
-See the main repository [CONTRIBUTING.md](../../CONTRIBUTING.md) for contribution guidelines.
+---
 
-## Support
+📚 [Full docs](https://buoy.gg/buoy/latest/docs/tools/network) · [All Buoy tools](https://github.com/Buoy-gg/buoy)
 
-For issues and feature requests, please visit the [GitHub repository](https://github.com/LovesWorking/react-native-buoy/issues).
+Proprietary software. © Buoy LLC. [Terms](https://buoy.gg/terms)

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