@rozenite/network-activity-plugin 1.7.0 → 1.8.1

package/src/react-native/websocket/__tests__/websocket-inspector.test.ts

@@ -0,0 +1,69 @@
+import { describe, expect, it, vi } from 'vitest';
+
+vi.mock('../websocket-interceptor', () => ({
+  getWebSocketInterceptor: vi.fn(),
+}));
+
+import { createWebSocketInspector } from '../websocket-inspector';
+import type { WebSocketInterceptor } from '../websocket-interceptor';
+
+const createInterceptor = () => {
+  const callbacks: Partial<{
+    connect: Parameters<WebSocketInterceptor['setConnectCallback']>[0];
+    open: Parameters<WebSocketInterceptor['setOnOpenCallback']>[0];
+    message: Parameters<WebSocketInterceptor['setOnMessageCallback']>[0];
+  }> = {};
+
+  const interceptor: WebSocketInterceptor = {
+    setCloseCallback: vi.fn(),
+    setSendCallback: vi.fn(),
+    setConnectCallback: vi.fn((callback) => {
+      callbacks.connect = callback;
+    }),
+    setOnOpenCallback: vi.fn((callback) => {
+      callbacks.open = callback;
+    }),
+    setOnMessageCallback: vi.fn((callback) => {
+      callbacks.message = callback;
+    }),
+    setOnErrorCallback: vi.fn(),
+    setOnCloseCallback: vi.fn(),
+    isInterceptorEnabled: vi.fn(() => true),
+    enableInterception: vi.fn(),
+    disableInterception: vi.fn(),
+  };
+
+  return {
+    callbacks,
+    interceptor,
+  };
+};
+
+describe('websocket inspector', () => {
+  it('stringifies numeric interceptor ids before emitting events', () => {
+    const { callbacks, interceptor } = createInterceptor();
+    const inspector = createWebSocketInspector(interceptor);
+    const events: Array<{ type: string; socketId: string }> = [];
+
+    inspector.on('websocket-connect', (event) => {
+      events.push({ type: event.type, socketId: event.socketId });
+    });
+    inspector.on('websocket-open', (event) => {
+      events.push({ type: event.type, socketId: event.socketId });
+    });
+    inspector.on('websocket-message-received', (event) => {
+      events.push({ type: event.type, socketId: event.socketId });
+    });
+
+    inspector.enable();
+    callbacks.connect?.('wss://example.com/socket', ['chat'], [], 42);
+    callbacks.open?.(42);
+    callbacks.message?.('hello', 42);
+
+    expect(events).toEqual([
+      { type: 'websocket-connect', socketId: '42' },
+      { type: 'websocket-open', socketId: '42' },
+      { type: 'websocket-message-received', socketId: '42' },
+    ]);
+  });
+});

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

@@ -5,6 +5,7 @@ import {
   WebSocketEventMap,
 } from '../../shared/websocket-events';
 import type { Inspector } from '../inspector';
+import type { WebSocketInterceptor } from './websocket-interceptor';
 
 type NanoEventsMap = {
   [K in keyof WebSocketEventMap]: (data: WebSocketEventMap[K]) => void;
@@ -23,15 +24,18 @@ export const WEBSOCKET_EVENTS: (keyof WebSocketEventMap)[] = [
 ];
 
 export const isWebSocketEvent = (
-  type: string
+  type: string,
 ): type is keyof WebSocketEventMap => {
   return (WEBSOCKET_EVENTS as readonly string[]).includes(type);
 };
 
-export const getWebSocketInspector = (): WebSocketInspector => {
+const toSocketId = (socketId: number) => String(socketId);
+
+export const createWebSocketInspector = (
+  webSocketInterceptor: WebSocketInterceptor = getWebSocketInterceptor(),
+): WebSocketInspector => {
   const eventEmitter = createNanoEvents<NanoEventsMap>();
   const socketUrlMap = new Map<number, string>();
-  const webSocketInterceptor = getWebSocketInterceptor();
 
   return {
     enable: () => {
@@ -40,19 +44,20 @@ export const getWebSocketInspector = (): WebSocketInspector => {
           url: string,
           protocols: string[] | null,
           options: string[],
-          socketId: number
+          socketId: number,
         ) => {
           socketUrlMap.set(socketId, url);
           const event: WebSocketEvent = {
             type: 'websocket-connect',
             url,
-            socketId,
+            socketId: toSocketId(socketId),
             timestamp: Date.now(),
             protocols,
             options,
+            source: 'builtin',
           };
           eventEmitter.emit('websocket-connect', event);
-        }
+        },
       );
 
       webSocketInterceptor.setCloseCallback(
@@ -66,14 +71,15 @@ export const getWebSocketInspector = (): WebSocketInspector => {
           const event: WebSocketEvent = {
             type: 'websocket-close',
             url,
-            socketId,
+            socketId: toSocketId(socketId),
             timestamp: Date.now(),
             code: code || 0,
             reason: reason || undefined,
+            source: 'builtin',
           };
           eventEmitter.emit('websocket-close', event);
           socketUrlMap.delete(socketId);
-        }
+        },
       );
 
       webSocketInterceptor.setOnMessageCallback(
@@ -87,13 +93,14 @@ export const getWebSocketInspector = (): WebSocketInspector => {
           const event: WebSocketEvent = {
             type: 'websocket-message-received',
             url,
-            socketId,
+            socketId: toSocketId(socketId),
             timestamp: Date.now(),
             data,
             messageType: typeof data === 'string' ? 'text' : 'binary',
+            source: 'builtin',
           };
           eventEmitter.emit('websocket-message-received', event);
-        }
+        },
       );
 
       webSocketInterceptor.setOnErrorCallback(
@@ -107,12 +114,13 @@ export const getWebSocketInspector = (): WebSocketInspector => {
           const event: WebSocketEvent = {
             type: 'websocket-error',
             url,
-            socketId,
+            socketId: toSocketId(socketId),
             timestamp: Date.now(),
             error,
+            source: 'builtin',
           };
           eventEmitter.emit('websocket-error', event);
-        }
+        },
       );
 
       webSocketInterceptor.setSendCallback((data: string, socketId: number) => {
@@ -125,10 +133,11 @@ export const getWebSocketInspector = (): WebSocketInspector => {
         const event: WebSocketEvent = {
           type: 'websocket-message-sent',
           url,
-          socketId,
+          socketId: toSocketId(socketId),
           timestamp: Date.now(),
           data,
           messageType: typeof data === 'string' ? 'text' : 'binary',
+          source: 'builtin',
         };
         eventEmitter.emit('websocket-message-sent', event);
       });
@@ -143,8 +152,9 @@ export const getWebSocketInspector = (): WebSocketInspector => {
         const event: WebSocketEvent = {
           type: 'websocket-open',
           url,
-          socketId,
+          socketId: toSocketId(socketId),
           timestamp: Date.now(),
+          source: 'builtin',
         };
         eventEmitter.emit('websocket-open', event);
       });
@@ -160,14 +170,15 @@ export const getWebSocketInspector = (): WebSocketInspector => {
           const event: WebSocketEvent = {
             type: 'websocket-close',
             url,
-            socketId,
+            socketId: toSocketId(socketId),
             timestamp: Date.now(),
             code: error.code,
             reason: error.reason,
+            source: 'builtin',
           };
           eventEmitter.emit('websocket-close', event);
           socketUrlMap.delete(socketId);
-        }
+        },
       );
 
       webSocketInterceptor.enableInterception();
@@ -182,7 +193,11 @@ export const getWebSocketInspector = (): WebSocketInspector => {
     },
     on: <TEventType extends keyof WebSocketEventMap>(
       event: TEventType,
-      callback: (data: WebSocketEventMap[TEventType]) => void
+      callback: (data: WebSocketEventMap[TEventType]) => void,
     ) => eventEmitter.on(event, callback as NanoEventsMap[TEventType]),
   };
 };
+
+export const getWebSocketInspector = (): WebSocketInspector => {
+  return createWebSocketInspector();
+};

package/src/shared/agent-tools.ts

@@ -0,0 +1,230 @@
+import {
+  defineAgentToolContract,
+  type AgentToolContract,
+} from '@rozenite/agent-shared';
+import type {
+  NetworkActivityAgentBodyResult,
+  NetworkActivityAgentState,
+} from '../react-native/agent/state';
+
+export const NETWORK_ACTIVITY_AGENT_PLUGIN_ID =
+  '@rozenite/network-activity-plugin';
+
+export type NetworkActivityPaginationArgs = {
+  limit?: number;
+  cursor?: string;
+};
+
+export type NetworkActivityRequestIdArgs = {
+  requestId: string;
+};
+
+export type NetworkActivityStartRecordingArgs = undefined;
+
+export type NetworkActivityGetRecordingStatusArgs = undefined;
+
+export type NetworkActivityGetRecordingStatusResult = ReturnType<
+  NetworkActivityAgentState['getStatus']
+>;
+
+export type NetworkActivityStartRecordingResult =
+  NetworkActivityGetRecordingStatusResult & {
+    started: true;
+  };
+
+export type NetworkActivityStopRecordingArgs = undefined;
+
+export type NetworkActivityStopRecordingResult =
+  NetworkActivityGetRecordingStatusResult & {
+    stopped: true;
+  };
+
+export type NetworkActivityListRequestsArgs = NetworkActivityPaginationArgs;
+
+export type NetworkActivityListRequestsResult = ReturnType<
+  NetworkActivityAgentState['listRequests']
+>;
+
+export type NetworkActivityGetRequestDetailsArgs = NetworkActivityRequestIdArgs;
+
+export type NetworkActivityGetRequestDetailsResult = ReturnType<
+  NetworkActivityAgentState['getRequestDetails']
+>;
+
+export type NetworkActivityGetRequestBodyArgs = NetworkActivityRequestIdArgs;
+
+export type NetworkActivityGetRequestBodyResult = NetworkActivityAgentBodyResult;
+
+export type NetworkActivityGetResponseBodyArgs = NetworkActivityRequestIdArgs;
+
+export type NetworkActivityGetResponseBodyResult = NetworkActivityAgentBodyResult;
+
+export type NetworkActivityListRealtimeConnectionsArgs =
+  NetworkActivityPaginationArgs;
+
+export type NetworkActivityListRealtimeConnectionsResult = ReturnType<
+  NetworkActivityAgentState['listRealtimeConnections']
+>;
+
+export type NetworkActivityGetRealtimeConnectionDetailsArgs =
+  NetworkActivityRequestIdArgs;
+
+export type NetworkActivityGetRealtimeConnectionDetailsResult = ReturnType<
+  NetworkActivityAgentState['getRealtimeConnectionDetails']
+>;
+
+export const networkActivityToolDefinitions = {
+  startRecording: defineAgentToolContract<
+    NetworkActivityStartRecordingArgs,
+    NetworkActivityStartRecordingResult
+  >({
+    name: 'startRecording',
+    description:
+      'Start recording network activity in the fallback network activity plugin.',
+    inputSchema: {
+      type: 'object',
+      properties: {},
+    },
+  }),
+  stopRecording: defineAgentToolContract<
+    NetworkActivityStopRecordingArgs,
+    NetworkActivityStopRecordingResult
+  >({
+    name: 'stopRecording',
+    description:
+      'Stop recording network activity without clearing the captured plugin buffer.',
+    inputSchema: {
+      type: 'object',
+      properties: {},
+    },
+  }),
+  getRecordingStatus: defineAgentToolContract<
+    NetworkActivityGetRecordingStatusArgs,
+    NetworkActivityGetRecordingStatusResult
+  >({
+    name: 'getRecordingStatus',
+    description:
+      'Return network activity plugin recording state and buffer metadata.',
+    inputSchema: {
+      type: 'object',
+      properties: {},
+    },
+  }),
+  listRequests: defineAgentToolContract<
+    NetworkActivityListRequestsArgs,
+    NetworkActivityListRequestsResult
+  >({
+    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.',
+        },
+      },
+    },
+  }),
+  getRequestDetails: defineAgentToolContract<
+    NetworkActivityGetRequestDetailsArgs,
+    NetworkActivityGetRequestDetailsResult
+  >({
+    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'],
+    },
+  }),
+  getRequestBody: defineAgentToolContract<
+    NetworkActivityGetRequestBodyArgs,
+    NetworkActivityGetRequestBodyResult
+  >({
+    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'],
+    },
+  }),
+  getResponseBody: defineAgentToolContract<
+    NetworkActivityGetResponseBodyArgs,
+    NetworkActivityGetResponseBodyResult
+  >({
+    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'],
+    },
+  }),
+  listRealtimeConnections: defineAgentToolContract<
+    NetworkActivityListRealtimeConnectionsArgs,
+    NetworkActivityListRealtimeConnectionsResult
+  >({
+    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.',
+        },
+      },
+    },
+  }),
+  getRealtimeConnectionDetails: defineAgentToolContract<
+    NetworkActivityGetRealtimeConnectionDetailsArgs,
+    NetworkActivityGetRealtimeConnectionDetailsResult
+  >({
+    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'],
+    },
+  }),
+} as const satisfies Record<string, AgentToolContract<unknown, unknown>>;

package/src/shared/client.ts

@@ -14,6 +14,9 @@ export type NetworkActivityEventMap = {
   'network-enable': unknown;
   'network-disable': unknown;
 
+  // Recording state sync (sent by React Native to inform DevTools UI of current state)
+  'recording-state': { isRecording: boolean };
+
   // Client UI settings events
   'get-client-ui-settings': unknown;
   'client-ui-settings': {

package/src/shared/http-events.ts

@@ -5,6 +5,7 @@ export type HttpMethod = 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH' | 'HEAD';
 
 export type RequestId = string;
 export type Timestamp = number;
+export type NetworkEventSource = 'builtin' | 'nitro';
 
 export type XHRPostData =
   | string
@@ -92,6 +93,7 @@ export type HttpEventMap = {
     timestamp: Timestamp;
     initiator: Initiator;
     type: ResourceType;
+    source?: NetworkEventSource;
   };
 
   'response-received': {
@@ -99,6 +101,7 @@ export type HttpEventMap = {
     timestamp: Timestamp;
     type: ResourceType;
     response: Response;
+    source?: NetworkEventSource;
   };
 
   'request-completed': {
@@ -107,6 +110,7 @@ export type HttpEventMap = {
     duration: number;
     size: number | null;
     ttfb: number;
+    source?: NetworkEventSource;
   };
 
   'request-failed': {
@@ -115,6 +119,7 @@ export type HttpEventMap = {
     type: ResourceType;
     error: string;
     canceled: boolean;
+    source?: NetworkEventSource;
   };
 
   'request-progress': {
@@ -123,6 +128,7 @@ export type HttpEventMap = {
     loaded: number;
     total: number;
     lengthComputable: boolean;
+    source?: NetworkEventSource;
   };
 
   'get-response-body': {

package/src/shared/websocket-events.ts

@@ -1,3 +1,5 @@
+import type { NetworkEventSource } from './http-events';
+
 export type WebSocketMessageType = 'text' | 'binary';
 
 export type WebSocketConnectionStatus =
@@ -9,60 +11,67 @@ export type WebSocketConnectionStatus =
 export type WebSocketConnectEvent = {
   type: 'websocket-connect';
   url: string;
-  socketId: number;
+  socketId: string;
   timestamp: number;
   protocols: string[] | null;
   options: string[];
+  source?: NetworkEventSource;
 };
 
 export type WebSocketOpenEvent = {
   type: 'websocket-open';
   url: string;
-  socketId: number;
+  socketId: string;
   timestamp: number;
+  source?: NetworkEventSource;
 };
 
 export type WebSocketCloseEvent = {
   type: 'websocket-close';
   url: string;
-  socketId: number;
+  socketId: string;
   timestamp: number;
   code: number;
   reason?: string;
+  source?: NetworkEventSource;
 };
 
 export type WebSocketMessageSentEvent = {
   type: 'websocket-message-sent';
   url: string;
-  socketId: number;
+  socketId: string;
   timestamp: number;
   data: string;
   messageType: WebSocketMessageType;
+  source?: NetworkEventSource;
 };
 
 export type WebSocketMessageReceivedEvent = {
   type: 'websocket-message-received';
   url: string;
-  socketId: number;
+  socketId: string;
   timestamp: number;
   data: string;
   messageType: WebSocketMessageType;
+  source?: NetworkEventSource;
 };
 
 export type WebSocketErrorEvent = {
   type: 'websocket-error';
   url: string;
-  socketId: number;
+  socketId: string;
   timestamp: number;
   error: string;
+  source?: NetworkEventSource;
 };
 
 export type WebSocketConnectionStatusChangedEvent = {
   type: 'websocket-connection-status-changed';
   url: string;
-  socketId: number;
+  socketId: string;
   timestamp: number;
   status: WebSocketConnectionStatus;
+  source?: NetworkEventSource;
 };
 
 export type WebSocketEvent =

package/src/ui/components/RequestList.tsx

@@ -20,6 +20,7 @@ import {
 import { getStatusColor } from '../utils/getStatusColor';
 import { FilterState } from './FilterBar';
 import { isNumber } from '../../utils/typeChecks';
+import type { NetworkEventSource } from '../../shared/client';
 
 type NetworkRequest = {
   id: RequestId;
@@ -31,10 +32,23 @@ type NetworkRequest = {
   size: string;
   time: string;
   type: string;
+  source?: NetworkEventSource;
   startTime: string;
   hasOverride: boolean;
 };
 
+const getSourceLabel = (source?: NetworkEventSource) => {
+  if (source === 'nitro') {
+    return 'Nitro';
+  }
+
+  if (source === 'builtin') {
+    return 'Built-in';
+  }
+
+  return null;
+};
+
 const formatSize = (bytes: number): string => {
   if (bytes === 0) return '0 B';
   const k = 1024;
@@ -153,6 +167,7 @@ const processNetworkRequests = (
       size: isNumber(request.size) ? formatSize(request.size) : '—',
       time: formatDuration(duration),
       type: request.type,
+      source: request.source,
       startTime: formatStartTime(request.timestamp),
       hasOverride: hasOverride,
     };
@@ -177,6 +192,12 @@ const columns = [
         {row.original.hasOverride && (
           <span className="w-2 h-2 rounded-full bg-violet-300 ms-2 inline-block"></span>
         )}
+
+        {getSourceLabel(row.original.source) && (
+          <span className="ml-2 rounded border border-gray-700 px-1.5 py-0.5 text-[10px] uppercase tracking-wide text-gray-400">
+            {getSourceLabel(row.original.source)}
+          </span>
+        )}
       </div>
     ),
     sortingFn: 'alphanumeric',