@buoy-gg/network 6.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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@buoy-gg/network",
-  "version": "6.0.0",
-  "description": "network package",
+  "version": "6.0.1",
+  "description": "In-app network inspector for React Native — requests, responses, timing & errors live, with GraphQL operation parsing. Part of Buoy devtools.",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
   "types": "lib/typescript/index.d.ts",
@@ -26,7 +26,7 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@buoy-gg/shared-ui": "6.0.0"
+    "@buoy-gg/shared-ui": "6.0.1"
   },
   "peerDependencies": {
     "react": "*",