@rozenite/network-activity-plugin 1.5.1 → 1.7.0-rc.0

package/src/react-native/agent/tools.ts

@@ -0,0 +1,146 @@
+import type { AgentTool } from '@rozenite/agent-bridge';
+
+export const startRecordingTool: AgentTool = {
+  name: 'startRecording',
+  description:
+    'Start recording network activity in the fallback network activity plugin.',
+  inputSchema: {
+    type: 'object',
+    properties: {},
+  },
+};
+
+export const stopRecordingTool: AgentTool = {
+  name: 'stopRecording',
+  description:
+    'Stop recording network activity without clearing the captured plugin buffer.',
+  inputSchema: {
+    type: 'object',
+    properties: {},
+  },
+};
+
+export const getRecordingStatusTool: AgentTool = {
+  name: 'getRecordingStatus',
+  description:
+    'Return network activity plugin recording state and buffer metadata.',
+  inputSchema: {
+    type: 'object',
+    properties: {},
+  },
+};
+
+export const listRequestsTool: AgentTool = {
+  name: 'listRequests',
+  description:
+    'List captured HTTP request summaries with cursor pagination from the fallback plugin.',
+  inputSchema: {
+    type: 'object',
+    properties: {
+      limit: {
+        type: 'number',
+        description: 'Maximum number of requests to return. Defaults to 20.',
+      },
+      cursor: {
+        type: 'string',
+        description: 'Opaque pagination cursor from a previous listRequests call.',
+      },
+    },
+  },
+};
+
+export const getRequestDetailsTool: AgentTool = {
+  name: 'getRequestDetails',
+  description:
+    'Return detailed metadata for a captured HTTP request without fetching response body.',
+  inputSchema: {
+    type: 'object',
+    properties: {
+      requestId: {
+        type: 'string',
+        description: 'Captured plugin request ID to inspect.',
+      },
+    },
+    required: ['requestId'],
+  },
+};
+
+export const getRequestBodyTool: AgentTool = {
+  name: 'getRequestBody',
+  description:
+    'Return the captured request body for a plugin-recorded HTTP request when available.',
+  inputSchema: {
+    type: 'object',
+    properties: {
+      requestId: {
+        type: 'string',
+        description: 'Captured plugin request ID to inspect.',
+      },
+    },
+    required: ['requestId'],
+  },
+};
+
+export const getResponseBodyTool: AgentTool = {
+  name: 'getResponseBody',
+  description:
+    'Return the captured response body for a plugin-recorded HTTP request when available.',
+  inputSchema: {
+    type: 'object',
+    properties: {
+      requestId: {
+        type: 'string',
+        description: 'Captured plugin request ID to inspect.',
+      },
+    },
+    required: ['requestId'],
+  },
+};
+
+export const listRealtimeConnectionsTool: AgentTool = {
+  name: 'listRealtimeConnections',
+  description:
+    'List captured WebSocket and SSE connections with cursor pagination.',
+  inputSchema: {
+    type: 'object',
+    properties: {
+      limit: {
+        type: 'number',
+        description: 'Maximum number of realtime connections to return. Defaults to 20.',
+      },
+      cursor: {
+        type: 'string',
+        description:
+          'Opaque pagination cursor from a previous listRealtimeConnections call.',
+      },
+    },
+  },
+};
+
+export const getRealtimeConnectionDetailsTool: AgentTool = {
+  name: 'getRealtimeConnectionDetails',
+  description:
+    'Return details for a captured WebSocket or SSE connection, including recent messages.',
+  inputSchema: {
+    type: 'object',
+    properties: {
+      requestId: {
+        type: 'string',
+        description: 'Captured realtime request ID to inspect.',
+      },
+    },
+    required: ['requestId'],
+  },
+};
+
+export const NETWORK_ACTIVITY_AGENT_TOOLS: AgentTool[] = [
+  startRecordingTool,
+  stopRecordingTool,
+  getRecordingStatusTool,
+  listRequestsTool,
+  getRequestDetailsTool,
+  getRequestBodyTool,
+  getResponseBodyTool,
+  listRealtimeConnectionsTool,
+  getRealtimeConnectionDetailsTool,
+];

package/src/react-native/agent/use-network-activity-agent-tools.ts

@@ -0,0 +1,244 @@
+import { useEffect } from 'react';
+import { useRozenitePluginAgentTool } from '@rozenite/agent-bridge';
+import type { NetworkActivityDevToolsClient } from '../../shared/client';
+import type { NetworkInspector } from '../network-inspector';
+import { getResponseBody } from '../http/http-utils';
+import {
+  getNetworkActivityAgentState,
+  type NetworkActivityAgentBodyResult,
+} from './state';
+import {
+  getRecordingStatusTool,
+  getRealtimeConnectionDetailsTool,
+  getRequestBodyTool,
+  getRequestDetailsTool,
+  getResponseBodyTool,
+  listRealtimeConnectionsTool,
+  listRequestsTool,
+  startRecordingTool,
+  stopRecordingTool,
+} from './tools';
+
+const pluginId = '@rozenite/network-activity-plugin';
+
+type PaginationInput = {
+  limit?: number;
+  cursor?: string;
+};
+
+type RequestIdInput = {
+  requestId: string;
+};
+
+type AgentToolsConfig = {
+  client: NetworkActivityDevToolsClient | null;
+  networkInspector: NetworkInspector;
+  enabledInspectors: {
+    http: boolean;
+    websocket: boolean;
+    sse: boolean;
+  };
+};
+
+export const useNetworkActivityAgentTools = ({
+  client,
+  networkInspector,
+  enabledInspectors,
+}: AgentToolsConfig) => {
+  const state = getNetworkActivityAgentState();
+
+  useEffect(() => {
+    const unsubscribe = [
+      networkInspector.http.on('request-sent', (event) =>
+        state.onRequestSent(event)
+      ),
+      networkInspector.http.on('request-progress', (event) =>
+        state.onRequestProgress(event)
+      ),
+      networkInspector.http.on('response-received', (event) =>
+        state.onResponseReceived(event)
+      ),
+      networkInspector.http.on('request-completed', (event) =>
+        state.onRequestCompleted(event)
+      ),
+      networkInspector.http.on('request-failed', (event) =>
+        state.onRequestFailed(event)
+      ),
+      networkInspector.websocket.on('websocket-connect', (event) =>
+        state.onWebSocketConnect(event)
+      ),
+      networkInspector.websocket.on('websocket-open', (event) =>
+        state.onWebSocketOpen(event)
+      ),
+      networkInspector.websocket.on('websocket-close', (event) =>
+        state.onWebSocketClose(event)
+      ),
+      networkInspector.websocket.on('websocket-message-sent', (event) =>
+        state.onWebSocketMessageSent(event)
+      ),
+      networkInspector.websocket.on('websocket-message-received', (event) =>
+        state.onWebSocketMessageReceived(event)
+      ),
+      networkInspector.websocket.on('websocket-error', (event) =>
+        state.onWebSocketError(event)
+      ),
+      networkInspector.websocket.on('websocket-connection-status-changed', (event) =>
+        state.onWebSocketConnectionStatusChanged(event)
+      ),
+      networkInspector.sse.on('sse-open', (event) => state.onSSEOpen(event)),
+      networkInspector.sse.on('sse-message', (event) => state.onSSEMessage(event)),
+      networkInspector.sse.on('sse-error', (event) => state.onSSEError(event)),
+      networkInspector.sse.on('sse-close', (event) => state.onSSEClose(event)),
+    ];
+
+    return () => {
+      unsubscribe.forEach((remove) => remove());
+    };
+  }, [networkInspector, state]);
+
+  useEffect(() => {
+    if (!client) {
+      return;
+    }
+
+    const subscriptions = [
+      client.onMessage('network-enable', () => {
+        state.startRecording({ enabledInspectors });
+      }),
+      client.onMessage('network-disable', () => {
+        if (state.getStatus().recording.isRecording) {
+          state.stopRecording();
+        }
+      }),
+    ];
+
+    return () => {
+      subscriptions.forEach((subscription) => subscription.remove());
+    };
+  }, [client, enabledInspectors, state]);
+
+  useRozenitePluginAgentTool({
+    pluginId,
+    tool: startRecordingTool,
+    handler: () => {
+      networkInspector.http.getNetworkRequestsRegistry().clear();
+      const result = state.startRecording({ enabledInspectors });
+      networkInspector.enable(enabledInspectors);
+      return {
+        started: true,
+        ...result,
+      };
+    },
+  });
+
+  useRozenitePluginAgentTool({
+    pluginId,
+    tool: stopRecordingTool,
+    handler: () => {
+      const result = state.stopRecording();
+      networkInspector.disable();
+      return {
+        stopped: true,
+        ...result,
+      };
+    },
+  });
+
+  useRozenitePluginAgentTool({
+    pluginId,
+    tool: getRecordingStatusTool,
+    handler: () => state.getStatus(),
+  });
+
+  useRozenitePluginAgentTool<PaginationInput>({
+    pluginId,
+    tool: listRequestsTool,
+    handler: (input = {}) => state.listRequests(input),
+  });
+
+  useRozenitePluginAgentTool<RequestIdInput>({
+    pluginId,
+    tool: getRequestDetailsTool,
+    handler: ({ requestId }: RequestIdInput) => state.getRequestDetails(requestId),
+  });
+
+  useRozenitePluginAgentTool<RequestIdInput>({
+    pluginId,
+    tool: getRequestBodyTool,
+    handler: ({ requestId }: RequestIdInput) => state.getRequestBody(requestId),
+  });
+
+  useRozenitePluginAgentTool<
+    RequestIdInput,
+    Promise<NetworkActivityAgentBodyResult>
+  >({
+    pluginId,
+    tool: getResponseBodyTool,
+    handler: async ({ requestId }: RequestIdInput) => {
+      const record = state.getHttpRecord(requestId);
+      if (!record) {
+        throw new Error(`Unknown request "${requestId}"`);
+      }
+
+      if (record.status === 'failed') {
+        return {
+          requestId,
+          available: false,
+          reason: 'Response body is unavailable because the request failed.',
+        };
+      }
+
+      if (record.status !== 'finished') {
+        return {
+          requestId,
+          available: false,
+          reason:
+            'Response body is unavailable until the request finishes loading.',
+        };
+      }
+
+      const request =
+        networkInspector.http.getNetworkRequestsRegistry().getEntry(requestId);
+      if (!request) {
+        return {
+          requestId,
+          available: false,
+          reason:
+            'Response body is unavailable because the request object is no longer in the plugin registry.',
+        };
+      }
+
+      const body = await getResponseBody(request);
+      if (body === null) {
+        return {
+          requestId,
+          available: false,
+          reason:
+            'The plugin could not extract a text response body for this request.',
+        };
+      }
+
+      return {
+        requestId,
+        available: true,
+        body,
+        base64Encoded: false,
+        decoded: false,
+        mimeType: record.response?.contentType,
+      };
+    },
+  });
+
+  useRozenitePluginAgentTool<PaginationInput>({
+    pluginId,
+    tool: listRealtimeConnectionsTool,
+    handler: (input = {}) => state.listRealtimeConnections(input),
+  });
+
+  useRozenitePluginAgentTool<RequestIdInput>({
+    pluginId,
+    tool: getRealtimeConnectionDetailsTool,
+    handler: ({ requestId }: RequestIdInput) =>
+      state.getRealtimeConnectionDetails(requestId),
+  });
+};

package/src/react-native/http/http-inspector.ts

@@ -152,7 +152,6 @@ export const getHTTPInspector = (): HTTPInspector => {
 
     disable: () => {
       XHRInterceptor.disableInterception();
-      networkRequestsRegistry.clear();
     },
 
     isEnabled: () => {

package/src/react-native/useNetworkActivityDevTools.ts

@@ -10,6 +10,7 @@ import {
   validateConfig,
 } from './config';
 import { createNetworkInspectorsConfiguration } from './boot-recording';
+import { useNetworkActivityAgentTools } from './agent/use-network-activity-agent-tools';
 import { useHttpInspector } from './useHttpInspector';
 import { useWebSocketInspector } from './useWebSocketInspector';
 import { useSSEInspector } from './useSSEInspector';
@@ -31,6 +32,16 @@ export const useNetworkActivityDevTools = (
 
   const { eventsListener, networkInspector } = inspectorsConfig;
 
+  useNetworkActivityAgentTools({
+    client,
+    networkInspector,
+    enabledInspectors: {
+      http: isHttpInspectorEnabled,
+      websocket: isWebSocketInspectorEnabled,
+      sse: isSSEInspectorEnabled,
+    },
+  });
+
   useEffect(() => {
     if (!client) {
       return;

package/tsconfig.json

@@ -19,6 +19,9 @@
   "include": ["src/**/*", "react-native.ts", "rozenite.config.ts"],
   "exclude": ["node_modules", "dist", "build"],
   "references": [
+    {
+      "path": "../agent-bridge"
+    },
     {
       "path": "../plugin-bridge"
     },

package/dist/react-native.d.ts

@@ -1,4 +0,0 @@
-export declare let useNetworkActivityDevTools: typeof import('./src/react-native/useNetworkActivityDevTools').useNetworkActivityDevTools;
-export declare let withOnBootNetworkActivityRecording: typeof import('./src/react-native/boot-recording').withOnBootNetworkActivityRecording;
-export type { NetworkActivityDevToolsConfig } from './src/react-native/config';
-export type { BootRecordingOptions } from './src/react-native/boot-recording';

package/dist/rozenite.config.d.ts

@@ -1,7 +0,0 @@
-declare const _default: {
-    panels: {
-        name: string;
-        source: string;
-    }[];
-};
-export default _default;

package/dist/src/react-native/boot-recording.d.ts

@@ -1,41 +0,0 @@
-import { NetworkActivityEventMap } from '../shared/client';
-import { createEventsListener, EventsListenerOptions } from './events-listener';
-import { NetworkInspector } from './network-inspector';
-import { NetworkInspectorConfig } from './config';
-type InspectorsConfiguration = {
-    eventsListener: ReturnType<typeof createEventsListener<NetworkActivityEventMap>>;
-    networkInspector: NetworkInspector;
-};
-export type BootRecordingOptions = NetworkInspectorConfig & EventsListenerOptions & {
-    /**
-     * Enable queuing of events during boot before DevTools connects.
-     * When true, network activity is captured and queued until DevTools is ready.
-     * When false, nothing is queued and inspectors are not even set up.
-     * @default true
-     */
-    enableBootRecording?: boolean;
-};
-/**
- *
- * @internal
- */
-export declare const createNetworkInspectorsConfiguration: (options?: BootRecordingOptions) => InspectorsConfiguration;
-/**
- * Enable network activity recording during app boot, before DevTools connects.
- * Call this at the root of your app to capture early network requests.
- *
- * @example
- * ```tsx
- * import { withOnBootNetworkActivityRecording } from '@rozenite/network-activity-plugin';
- *
- * // At app entry point, before any network requests
- * withOnBootNetworkActivityRecording();
- *
- * function App() {
- *   useNetworkActivityDevTools();
- *   // ...
- * }
- * ```
- */
-export declare const withOnBootNetworkActivityRecording: (options?: BootRecordingOptions) => void;
-export {};

package/dist/src/react-native/config.d.ts

@@ -1,23 +0,0 @@
-export type InspectorType = 'http' | 'websocket' | 'sse';
-export type InspectorsConfig = {
-    [key in InspectorType]?: boolean;
-};
-export type NetworkInspectorConfig = {
-    /**
-     * Specifies which network inspectors are enabled.
-     * Set to `false` to disable monitoring for a specific type of network traffic.
-     * @default { http: true, websocket: true, sse: true }
-     */
-    inspectors?: InspectorsConfig;
-};
-export type NetworkActivityDevToolsConfig = NetworkInspectorConfig & {
-    clientUISettings?: {
-        /**
-         * If true, display the entire relative URL as the request name in the UI instead of only the last path segment.
-         * @default false
-         */
-        showUrlAsName?: boolean;
-    };
-};
-export declare const DEFAULT_CONFIG: NetworkActivityDevToolsConfig;
-export declare const validateConfig: (config: NetworkActivityDevToolsConfig) => void;

package/dist/src/react-native/events-listener.d.ts

@@ -1,44 +0,0 @@
-type QueuedMessage<TEventMap extends Record<string, unknown>> = {
-    type: keyof TEventMap;
-    data: TEventMap[keyof TEventMap];
-};
-type SendFunction<TEventMap extends Record<string, unknown>> = <K extends keyof TEventMap>(type: K, data: TEventMap[K]) => void;
-/**
- * Generic events listener that queues messages until a send function is registered.
- * This allows capturing events before the DevTools client connects and so be boot compliant.
- */
-export declare class EventsListener<TEventMap extends Record<string, unknown>> {
-    private messageQueue;
-    private sendFunction;
-    private maxQueueSize;
-    private isQueuing;
-    setMaxQueueSize(size: number): void;
-    /**
-     * Enable queuing mode to capture events before client is connected
-     */
-    enableQueuing(): void;
-    /**
-     * Connect the actual send function and automatically flush queued messages
-     */
-    connect(sendFn: SendFunction<TEventMap>, filterFn?: (message: QueuedMessage<TEventMap>) => boolean): void;
-    isInQueueMode(): boolean;
-    /**
-     * Send a message (queued if not connected, sent directly if connected)
-     */
-    send<K extends keyof TEventMap>(type: K, data: TEventMap[K]): void;
-    private enqueueMessage;
-    private flushQueue;
-}
-export type EventsListenerOptions = {
-    /**
-     * Maximum number of messages to queue before DevTools connects.
-     * @default 200
-     */
-    maxQueueSize?: number;
-};
-/**
- * Create a new events listener instance for a specific event map.
- * This factory can be used to create listeners for different protocols or plugins.
- */
-export declare const createEventsListener: <TEventMap extends Record<string, unknown>>() => EventsListener<TEventMap>;
-export {};

package/dist/src/react-native/http/http-inspector.d.ts

@@ -1,10 +0,0 @@
-import { getNetworkRequestsRegistry } from './network-requests-registry';
-import { HttpEventMap } from '../../shared/http-events';
-import { Inspector } from '../inspector';
-export type { HttpEventMap };
-export declare const HTTP_EVENTS: (keyof HttpEventMap)[];
-export declare const isHttpEvent: (type: string) => type is keyof HttpEventMap;
-export type HTTPInspector = Inspector<HttpEventMap> & {
-    getNetworkRequestsRegistry: () => ReturnType<typeof getNetworkRequestsRegistry>;
-};
-export declare const getHTTPInspector: () => HTTPInspector;

package/dist/src/react-native/http/http-utils.d.ts

@@ -1,15 +0,0 @@
-import { XHRPostData, RequestPostData } from '../../shared/client';
-import { OverridesRegistry } from './overrides-registry';
-export declare const getRequestBody: (body: XHRPostData) => RequestPostData;
-export declare const getResponseSize: (request: XMLHttpRequest) => number | null;
-export declare const getResponseBody: (request: XMLHttpRequest) => Promise<string | null>;
-export declare const getInitiatorFromStack: () => {
-    type: string;
-    url?: string;
-    lineNumber?: number;
-    columnNumber?: number;
-};
-/**
- * Applies override body and status to XMLHttpRequest objects.
- */
-export declare const setupRequestOverride: (overridesRegistry: OverridesRegistry, request: XMLHttpRequest) => void;

package/dist/src/react-native/http/network-requests-registry.d.ts

@@ -1,6 +0,0 @@
-export type NetworkRequestRegistry = {
-    addEntry: (id: string, request: XMLHttpRequest) => void;
-    getEntry: (id: string) => XMLHttpRequest | null;
-    clear: () => void;
-};
-export declare const getNetworkRequestsRegistry: () => NetworkRequestRegistry;

package/dist/src/react-native/http/overrides-registry.d.ts

@@ -1,6 +0,0 @@
-import { RequestOverride } from '../../shared/client';
-export type OverridesRegistry = {
-    setOverrides: (newOverrides: [string, RequestOverride][]) => void;
-    getOverrideForUrl: (url: string) => RequestOverride | undefined;
-};
-export declare const getOverridesRegistry: () => OverridesRegistry;

package/dist/src/react-native/http/xhr-interceptor.d.ts

@@ -1,44 +0,0 @@
-import { XHRPostData } from '../../shared/client';
-type XHRInterceptorOpenCallback = (method: string, url: string, request: XMLHttpRequest) => void;
-type XHRInterceptorSendCallback = (data: XHRPostData, request: XMLHttpRequest) => void;
-type XHRInterceptorRequestHeaderCallback = (header: string, value: string, request: XMLHttpRequest) => void;
-type XHRInterceptorHeaderReceivedCallback = (responseContentType: string | undefined, responseSize: number | undefined, allHeaders: string, request: XMLHttpRequest) => void;
-type XHRInterceptorResponseCallback = (status: number, timeout: number, response: string, responseURL: string, responseType: string, request: XMLHttpRequest) => void;
-type XHRInterceptorOverrideCallback = (request: XMLHttpRequest) => void;
-/**
- * A network interceptor which monkey-patches XMLHttpRequest methods
- * to gather all network requests/responses, in order to show their
- * information in the React Native inspector development tool.
- * This supports interception with XMLHttpRequest API, including Fetch API
- * and any other third party libraries that depend on XMLHttpRequest.
- */
-export declare const XHRInterceptor: {
-    /**
-     * Invoked before XMLHttpRequest.open(...) is called.
-     */
-    setOpenCallback(callback: XHRInterceptorOpenCallback): void;
-    /**
-     * Invoked before XMLHttpRequest.send(...) is called.
-     */
-    setSendCallback(callback: XHRInterceptorSendCallback): void;
-    /**
-     * Invoked after xhr's readyState becomes xhr.HEADERS_RECEIVED.
-     */
-    setHeaderReceivedCallback(callback: XHRInterceptorHeaderReceivedCallback): void;
-    /**
-     * Invoked after xhr's readyState becomes xhr.DONE.
-     */
-    setResponseCallback(callback: XHRInterceptorResponseCallback): void;
-    /**
-     * Invoked before XMLHttpRequest.setRequestHeader(...) is called.
-     */
-    setRequestHeaderCallback(callback: XHRInterceptorRequestHeaderCallback): void;
-    /**
-     * Invoked before XMLHttpRequest.send(...) is called.
-     */
-    setOverrideCallback(callback: XHRInterceptorOverrideCallback): void;
-    isInterceptorEnabled(): boolean;
-    enableInterception(): void;
-    disableInterception(): void;
-};
-export {};

package/dist/src/react-native/inspector.d.ts

@@ -1,7 +0,0 @@
-export interface Inspector<TEventMap> {
-    enable: () => void;
-    disable: () => void;
-    isEnabled: () => boolean;
-    dispose: () => void;
-    on<TEventType extends keyof TEventMap>(type: TEventType, callback: (event: TEventMap[TEventType]) => void): () => void;
-}

package/dist/src/react-native/network-inspector.d.ts

@@ -1,16 +0,0 @@
-import { HTTPInspector } from './http/http-inspector';
-import { SSEInspector } from './sse/sse-inspector';
-import { WebSocketInspector } from './websocket/websocket-inspector';
-import { EventsListener } from './events-listener';
-import { NetworkActivityEventMap } from '../shared/client';
-import { InspectorsConfig } from './config';
-export type NetworkInspector = {
-    readonly http: HTTPInspector;
-    readonly sse: SSEInspector;
-    readonly websocket: WebSocketInspector;
-    setup: (eventsListener: EventsListener<NetworkActivityEventMap>) => void;
-    enable: (config?: InspectorsConfig) => void;
-    disable: () => void;
-    dispose: () => void;
-};
-export declare const getNetworkInspector: () => NetworkInspector;

package/dist/src/react-native/sse/event-source.d.ts

@@ -1,2 +0,0 @@
-import { default as EventSource } from 'react-native-sse';
-export declare const getEventSource: () => typeof EventSource;

package/dist/src/react-native/sse/sse-inspector.d.ts

@@ -1,6 +0,0 @@
-import { SSEEventMap } from '../../shared/sse-events';
-import { Inspector } from '../inspector';
-export type SSEInspector = Inspector<SSEEventMap>;
-export declare const SSE_EVENTS: (keyof SSEEventMap)[];
-export declare const isSSEEvent: (type: string) => type is keyof SSEEventMap;
-export declare const getSSEInspector: () => SSEInspector;