@rozenite/network-activity-plugin 1.7.0 → 1.8.0

package/src/ui/components/SidePanel.tsx

@@ -37,7 +37,7 @@ const getTypeColor = (type: string) => {
 const createLegacyNetworkEntry = (
   selectedRequest: any,
   httpDetails: any,
-  wsDetails: any
+  wsDetails: any,
 ): OldNetworkEntry | null => {
   if (selectedRequest.type === 'http' && httpDetails) {
     return {
@@ -108,22 +108,22 @@ export const SidePanel = () => {
     selectedRequest.type === 'http'
       ? httpDetails?.request?.url || 'Unknown'
       : selectedRequest.type === 'websocket'
-      ? wsDetails?.connection?.url || 'Unknown'
-      : sseDetails?.request?.url || 'Unknown';
+        ? wsDetails?.connection?.url || 'Unknown'
+        : sseDetails?.request?.url || 'Unknown';
 
   // Extract status from the request
   const requestStatus =
     selectedRequest.type === 'http'
       ? httpDetails?.response?.status || httpDetails?.status || 'pending'
       : selectedRequest.type === 'websocket'
-      ? wsDetails?.status || 'unknown'
-      : sseDetails?.status || 'unknown';
+        ? wsDetails?.status || 'unknown'
+        : sseDetails?.status || 'unknown';
 
   // Create legacy network entry for tab components
   const legacyEntry = createLegacyNetworkEntry(
     selectedRequest,
     httpDetails,
-    wsDetails
+    wsDetails,
   );
   const legacyNetworkEntries = new Map<string, OldNetworkEntry>();
   if (legacyEntry) {
@@ -131,7 +131,9 @@ export const SidePanel = () => {
   }
 
   const override = legacyEntry !== null ? overrides.get(legacyEntry.url) : null;
-  const hasResponseOverride = override && override.body ? true : false;
+  const supportsOverrides = httpDetails?.source !== 'nitro';
+  const hasResponseOverride =
+    supportsOverrides && override && override.body ? true : false;
 
   const getTabsListTriggers = () => {
     if (httpDetails) {
@@ -226,6 +228,7 @@ export const SidePanel = () => {
           <TabsContent value="response" className="flex-1 m-0 overflow-hidden">
             <ResponseTab
               selectedRequest={httpDetails}
+              supportsOverrides={supportsOverrides}
               onRequestResponseBody={(requestId) => {
                 if (client) {
                   client.send('get-response-body', {
@@ -289,14 +292,14 @@ export const SidePanel = () => {
         <div className="flex items-center gap-2 min-w-0 flex-1">
           <div
             className={`w-3 h-3 rounded-full flex-shrink-0 ${getTypeColor(
-              selectedRequest.type
+              selectedRequest.type,
             )}`}
           ></div>
           <span className="font-medium truncate">{requestName}</span>
           <Badge
             variant="outline"
             className={`${getStatusColor(
-              requestStatus
+              requestStatus,
             )} border-current flex-shrink-0`}
           >
             {requestStatus}

package/src/ui/state/derived.ts

@@ -17,6 +17,7 @@ export const getProcessedRequests = memoize((state: NetworkActivityState) => {
       requests.push({
         id: httpEntry.id,
         type: 'http',
+        source: httpEntry.source,
         name: httpEntry.request.url,
         status: httpEntry.status,
         timestamp: httpEntry.timestamp,
@@ -31,6 +32,7 @@ export const getProcessedRequests = memoize((state: NetworkActivityState) => {
       requests.push({
         id: wsEntry.id,
         type: 'websocket',
+        source: wsEntry.source,
         name: wsEntry.connection.url,
         status: wsEntry.status,
         timestamp: wsEntry.timestamp,
@@ -77,6 +79,7 @@ export const getRequestSummary = (
       return {
         id: httpEntry.id,
         type: 'http',
+        source: httpEntry.source,
         name: httpEntry.request.url,
         status: httpEntry.status,
         timestamp: httpEntry.timestamp,
@@ -91,6 +94,7 @@ export const getRequestSummary = (
       return {
         id: wsEntry.id,
         type: 'websocket',
+        source: wsEntry.source,
         name: wsEntry.connection.url,
         status: wsEntry.status,
         timestamp: wsEntry.timestamp,

package/src/ui/state/model.ts

@@ -3,11 +3,12 @@ import {
   ResourceType,
   HttpHeaders,
   RequestPostData,
+  NetworkEventSource,
 } from '../../shared/client';
 
 export type RequestId = string;
 export type Timestamp = number;
-export type SocketId = number;
+export type SocketId = string;
 export type HttpMethod = 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH' | 'HEAD';
 
 export type NetworkEntryType = 'http' | 'websocket' | 'sse';
@@ -47,6 +48,7 @@ export type HttpNetworkEntry = {
   id: RequestId;
   type: 'http';
   timestamp: Timestamp;
+  source?: NetworkEventSource;
   duration?: number;
 
   request: HttpRequest;
@@ -79,6 +81,7 @@ export type SSENetworkEntry = {
   id: RequestId;
   type: 'sse';
   timestamp: Timestamp;
+  source?: NetworkEventSource;
   duration?: number;
 
   request: HttpRequest;
@@ -117,6 +120,7 @@ export type WebSocketNetworkEntry = {
   id: RequestId;
   type: 'websocket';
   timestamp: Timestamp;
+  source?: NetworkEventSource;
   duration?: number;
 
   connection: WebSocketConnection;
@@ -135,6 +139,7 @@ export type NetworkEntry =
 export type ProcessedRequest = {
   id: RequestId;
   type: NetworkEntryType;
+  source?: NetworkEventSource;
   name: string;
   status: HttpStatus | WebSocketStatus | SSEStatus;
   timestamp: Timestamp;

package/src/ui/state/store.ts

@@ -50,7 +50,7 @@ export interface NetworkActivityState {
   // Event handling
   handleEvent: <K extends keyof NetworkActivityEventMap>(
     eventType: K,
-    data: NetworkActivityEventMap[K]
+    data: NetworkActivityEventMap[K],
   ) => void;
 
   // Client management
@@ -80,7 +80,7 @@ export const createNetworkActivityStore = () =>
 
             _client.send(
               isRecording ? 'network-enable' : 'network-disable',
-              {}
+              {},
             );
             set({ isRecording });
           },
@@ -120,11 +120,22 @@ export const createNetworkActivityStore = () =>
         // Event handling
         handleEvent: <K extends keyof NetworkActivityEventMap>(
           eventType: K,
-          data: NetworkActivityEventMap[K]
+          data: NetworkActivityEventMap[K],
         ) => {
           switch (eventType) {
+            case 'recording-state': {
+              const eventData =
+                data as NetworkActivityEventMap['recording-state'];
+              const { isRecording, _client } = get();
+              if (_client && isRecording !== eventData.isRecording) {
+                _client.send(isRecording ? 'network-enable' : 'network-disable', {});
+              }
+              break;
+            }
+
             case 'client-ui-settings': {
-              const eventData = data as NetworkActivityEventMap['client-ui-settings'];
+              const eventData =
+                data as NetworkActivityEventMap['client-ui-settings'];
               set({ clientUISettings: eventData.settings || null });
               break;
             }
@@ -135,7 +146,7 @@ export const createNetworkActivityStore = () =>
                 const headersWithContentType =
                   applyReactNativeRequestHeadersLogic(
                     eventData.request.headers,
-                    eventData.request.postData
+                    eventData.request.postData,
                   );
 
                 const requestContentType =
@@ -145,6 +156,7 @@ export const createNetworkActivityStore = () =>
                   id: eventData.requestId,
                   type: 'http',
                   timestamp: eventData.timestamp,
+                  source: eventData.source ?? 'builtin',
                   request: {
                     url: eventData.request.url,
                     method: eventData.request.method,
@@ -280,7 +292,7 @@ export const createNetworkActivityStore = () =>
                           ? {
                               type:
                                 getContentTypeMime(
-                                  httpEntry.response?.headers ?? {}
+                                  httpEntry.response?.headers ?? {},
                                 ) || 'text/plain',
                               data: eventData.body,
                             }
@@ -304,6 +316,7 @@ export const createNetworkActivityStore = () =>
                   id: `ws-${eventData.socketId}`,
                   type: 'websocket',
                   timestamp: eventData.timestamp,
+                  source: eventData.source ?? 'builtin',
                   connection: {
                     url: eventData.url,
                     socketId: eventData.socketId,
@@ -332,7 +345,7 @@ export const createNetworkActivityStore = () =>
                 data as NetworkActivityEventMap['websocket-open'];
               set((state) => {
                 const entry = state.networkEntries.get(
-                  `ws-${eventData.socketId}`
+                  `ws-${eventData.socketId}`,
                 );
                 if (!entry || entry.type !== 'websocket') return state;
 
@@ -354,7 +367,7 @@ export const createNetworkActivityStore = () =>
                 data as NetworkActivityEventMap['websocket-close'];
               set((state) => {
                 const entry = state.networkEntries.get(
-                  `ws-${eventData.socketId}`
+                  `ws-${eventData.socketId}`,
                 );
                 if (!entry || entry.type !== 'websocket') return state;
 
@@ -394,8 +407,8 @@ export const createNetworkActivityStore = () =>
                 newMessages.set(
                   socketId,
                   [...currentMessages, message].slice(
-                    -MAX_WEBSOCKET_MESSAGES_PER_CONNECTION
-                  )
+                    -MAX_WEBSOCKET_MESSAGES_PER_CONNECTION,
+                  ),
                 );
 
                 return { websocketMessages: newMessages };
@@ -423,8 +436,8 @@ export const createNetworkActivityStore = () =>
                 newMessages.set(
                   socketId,
                   [...currentMessages, message].slice(
-                    -MAX_WEBSOCKET_MESSAGES_PER_CONNECTION
-                  )
+                    -MAX_WEBSOCKET_MESSAGES_PER_CONNECTION,
+                  ),
                 );
 
                 return { websocketMessages: newMessages };
@@ -437,7 +450,7 @@ export const createNetworkActivityStore = () =>
                 data as NetworkActivityEventMap['websocket-error'];
               set((state) => {
                 const entry = state.networkEntries.get(
-                  `ws-${eventData.socketId}`
+                  `ws-${eventData.socketId}`,
                 );
                 if (!entry || entry.type !== 'websocket') return state;
 
@@ -460,7 +473,7 @@ export const createNetworkActivityStore = () =>
                 data as NetworkActivityEventMap['websocket-connection-status-changed'];
               set((state) => {
                 const entry = state.networkEntries.get(
-                  `ws-${eventData.socketId}`
+                  `ws-${eventData.socketId}`,
                 );
                 if (!entry || entry.type !== 'websocket') return state;
 
@@ -520,7 +533,7 @@ export const createNetworkActivityStore = () =>
                 const updatedEntry: SSENetworkEntry = {
                   ...sseEntry,
                   messages: [...sseEntry.messages, newMessage].slice(
-                    -MAX_SSE_MESSAGES_PER_CONNECTION
+                    -MAX_SSE_MESSAGES_PER_CONNECTION,
                   ),
                 };
 
@@ -580,59 +593,62 @@ export const createNetworkActivityStore = () =>
 
             // Subscribe to all events using the unified handler
             const unsubscribeFunctions = [
+              client.onMessage('recording-state', (data) =>
+                handleEvent('recording-state', data)
+              ),
               client.onMessage('client-ui-settings', (data) =>
-                handleEvent('client-ui-settings', data)
+                handleEvent('client-ui-settings', data),
               ),
               client.onMessage('request-sent', (data) =>
-                handleEvent('request-sent', data)
+                handleEvent('request-sent', data),
               ),
               client.onMessage('request-progress', (data) =>
-                handleEvent('request-progress', data)
+                handleEvent('request-progress', data),
               ),
               client.onMessage('response-received', (data) =>
-                handleEvent('response-received', data)
+                handleEvent('response-received', data),
               ),
               client.onMessage('request-completed', (data) =>
-                handleEvent('request-completed', data)
+                handleEvent('request-completed', data),
               ),
               client.onMessage('request-failed', (data) =>
-                handleEvent('request-failed', data)
+                handleEvent('request-failed', data),
               ),
               client.onMessage('response-body', (data) =>
-                handleEvent('response-body', data)
+                handleEvent('response-body', data),
               ),
               client.onMessage('websocket-connect', (data) =>
-                handleEvent('websocket-connect', data)
+                handleEvent('websocket-connect', data),
               ),
               client.onMessage('websocket-open', (data) =>
-                handleEvent('websocket-open', data)
+                handleEvent('websocket-open', data),
               ),
               client.onMessage('websocket-close', (data) =>
-                handleEvent('websocket-close', data)
+                handleEvent('websocket-close', data),
               ),
               client.onMessage('websocket-message-sent', (data) =>
-                handleEvent('websocket-message-sent', data)
+                handleEvent('websocket-message-sent', data),
               ),
               client.onMessage('websocket-message-received', (data) =>
-                handleEvent('websocket-message-received', data)
+                handleEvent('websocket-message-received', data),
               ),
               client.onMessage('websocket-error', (data) =>
-                handleEvent('websocket-error', data)
+                handleEvent('websocket-error', data),
               ),
               client.onMessage('websocket-connection-status-changed', (data) =>
-                handleEvent('websocket-connection-status-changed', data)
+                handleEvent('websocket-connection-status-changed', data),
               ),
               client.onMessage('sse-open', (data) =>
-                handleEvent('sse-open', data)
+                handleEvent('sse-open', data),
               ),
               client.onMessage('sse-message', (data) =>
-                handleEvent('sse-message', data)
+                handleEvent('sse-message', data),
               ),
               client.onMessage('sse-error', (data) =>
-                handleEvent('sse-error', data)
+                handleEvent('sse-error', data),
               ),
               client.onMessage('sse-close', (data) =>
-                handleEvent('sse-close', data)
+                handleEvent('sse-close', data),
               ),
             ];
 
@@ -651,7 +667,7 @@ export const createNetworkActivityStore = () =>
 
             if (_unsubscribeFunctions) {
               _unsubscribeFunctions.forEach(
-                (unsubscribe: { remove: () => void }) => unsubscribe.remove()
+                (unsubscribe: { remove: () => void }) => unsubscribe.remove(),
               );
             }
 
@@ -693,8 +709,8 @@ export const createNetworkActivityStore = () =>
           },
         }),
         partialize: (state) => ({ overrides: state.overrides }), // Persist only the overrides
-      }
-    )
+      },
+    ),
   );
 
 export const store = createNetworkActivityStore();

package/src/ui/tabs/HeadersTab.tsx

@@ -17,7 +17,7 @@ function getHeadersItems(headers?: HttpHeaders): KeyValueItem[] {
   return Object.entries(headers).reduce<KeyValueItem[]>((acc, [key, value]) => {
     if (Array.isArray(value)) {
       acc.push(
-        ...value.map((item) => ({ key: key.toLowerCase(), value: item }))
+        ...value.map((item) => ({ key: key.toLowerCase(), value: item })),
       );
     } else {
       acc.push({ key: key.toLowerCase(), value: value });
@@ -29,6 +29,12 @@ function getHeadersItems(headers?: HttpHeaders): KeyValueItem[] {
 
 export const HeadersTab = ({ selectedRequest }: HeadersTabProps) => {
   const requestBody = selectedRequest.request.body;
+  const sourceLabel =
+    selectedRequest.source === 'nitro'
+      ? 'Nitro'
+      : selectedRequest.source === 'builtin'
+        ? 'Built-in'
+        : null;
 
   const generalItems: KeyValueItem[] = useMemo(
     () => [
@@ -55,18 +61,26 @@ export const HeadersTab = ({ selectedRequest }: HeadersTabProps) => {
             },
           ]
         : []),
+      ...(sourceLabel
+        ? [
+            {
+              key: 'Source',
+              value: sourceLabel,
+            },
+          ]
+        : []),
     ],
-    [selectedRequest]
+    [requestBody, selectedRequest, sourceLabel],
   );
 
   const responseHeadersItems = useMemo(
     () => getHeadersItems(selectedRequest.response?.headers),
-    [selectedRequest]
+    [selectedRequest],
   );
 
   const requestHeadersItems = useMemo(
     () => getHeadersItems(selectedRequest.request.headers),
-    [selectedRequest]
+    [selectedRequest],
   );
 
   return (

package/src/ui/tabs/ResponseTab.tsx

@@ -13,6 +13,7 @@ import { Pencil } from 'lucide-react';
 
 export type ResponseTabProps = {
   selectedRequest: HttpNetworkEntry;
+  supportsOverrides?: boolean;
   onRequestResponseBody: (requestId: string) => void;
 };
 
@@ -34,6 +35,7 @@ const RenderResponseBodySection = ({
 
 export const ResponseTab = ({
   selectedRequest,
+  supportsOverrides = true,
   onRequestResponseBody,
 }: ResponseTabProps) => {
   const onRequestResponseBodyRef = useRef(onRequestResponseBody);
@@ -81,7 +83,7 @@ export const ResponseTab = ({
       />
     );
 
-    const overrideAction = (
+    const overrideAction = supportsOverrides ? (
       <Button
         variant="ghost"
         size="xs"
@@ -96,9 +98,9 @@ export const ResponseTab = ({
         <Pencil className="h-2 w-2" />
         Override
       </Button>
-    );
+    ) : null;
 
-    if (initialOverride !== undefined) {
+    if (supportsOverrides && initialOverride !== undefined) {
       return (
         <OverrideResponse
           selectedRequest={selectedRequest}

package/tsconfig.json

@@ -11,12 +11,15 @@
     "noFallthroughCasesInSwitch": true,
     "module": "ESNext",
     "moduleResolution": "bundler",
+    "paths": {
+      "@rozenite/agent-shared": ["../agent-shared/src/index.ts"]
+    },
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "react-jsx"
   },
-  "include": ["src/**/*", "react-native.ts", "rozenite.config.ts"],
+  "include": ["src/**/*", "react-native.ts", "sdk.ts", "rozenite.config.ts"],
   "exclude": ["node_modules", "dist", "build"],
   "references": [
     {

package/vite.config.ts

@@ -1,10 +1,17 @@
 /// <reference types='vitest' />
+import { resolve } from 'node:path';
 import { defineConfig } from 'vite';
 import { rozenitePlugin } from '@rozenite/vite-plugin';
 
 export default defineConfig({
   root: __dirname,
   plugins: [rozenitePlugin()],
+  test: {
+    passWithNoTests: true,
+    alias: {
+      '@rozenite/agent-shared': resolve(__dirname, '../agent-shared/src/index.ts'),
+    },
+  },
   base: './',
   build: {
     outDir: './dist',