@rozenite/network-activity-plugin 1.0.0-alpha.9 → 1.1.0

package/src/ui/tabs/ResponseTab.tsx

@@ -1,18 +1,49 @@
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { ScrollArea } from '../components/ScrollArea';
 import { JsonTree } from '../components/JsonTree';
 import { HttpNetworkEntry } from '../state/model';
+import { Section } from '../components/Section';
+import { KeyValueGrid } from '../components/KeyValueGrid';
+import { CodeBlock } from '../components/CodeBlock';
+import { useOverrides } from '../state/hooks';
+import { RequestOverride } from '../../shared/client';
+import { OverrideResponse } from '../components/OverrideResponse';
+import { Button } from '../components/Button';
+import { Pencil } from 'lucide-react';
 
 export type ResponseTabProps = {
   selectedRequest: HttpNetworkEntry;
   onRequestResponseBody: (requestId: string) => void;
 };
 
+type ResponseBodySectionProps = {
+  action?: React.ReactNode;
+  children: React.ReactNode;
+};
+
+const RenderResponseBodySection = ({
+  children,
+  action,
+}: ResponseBodySectionProps) => {
+  return (
+    <Section title="Response Body" collapsible={false} action={action}>
+      <div className="space-y-4">{children}</div>
+    </Section>
+  );
+};
+
 export const ResponseTab = ({
   selectedRequest,
   onRequestResponseBody,
 }: ResponseTabProps) => {
   const onRequestResponseBodyRef = useRef(onRequestResponseBody);
+  const overrides = useOverrides();
+  const [initialOverride, setInitialOverride] = useState<
+    RequestOverride | undefined
+  >(() => {
+    const override = overrides.get(selectedRequest.request.url);
+    return override;
+  });
 
   useEffect(() => {
     onRequestResponseBodyRef.current = onRequestResponseBody;
@@ -24,10 +55,10 @@ export const ResponseTab = ({
     }
   }, [selectedRequest.id]);
 
-  const renderResponseBody = () => {
-    const responseBody = selectedRequest.response?.body;
+  const responseBody = selectedRequest.response?.body;
 
-    if (!responseBody) {
+  const renderResponseBody = () => {
+    if (!responseBody || responseBody.data === null) {
       return (
         <div className="text-sm text-gray-400">
           No response body available for this request
@@ -36,103 +67,103 @@ export const ResponseTab = ({
     }
 
     const { type, data } = responseBody;
+    const statusCode = selectedRequest.response?.status;
+
+    const contentTypeGrid = (
+      <KeyValueGrid
+        items={[
+          {
+            key: 'Content-Type',
+            value: type,
+            valueClassName: 'text-blue-400',
+          },
+        ]}
+      />
+    );
+
+    const overrideAction = (
+      <Button
+        variant="ghost"
+        size="xs"
+        className="text-violet-300 hover:text-violet-300"
+        onClick={() =>
+          setInitialOverride({
+            body: data,
+            status: statusCode,
+          })
+        }
+      >
+        <Pencil className="h-2 w-2" />
+        Override
+      </Button>
+    );
 
-    // Handle null data
-    if (data === null) {
+    if (initialOverride !== undefined) {
       return (
-        <div className="text-sm text-gray-400">
-          No response body available for this request
-        </div>
+        <OverrideResponse
+          selectedRequest={selectedRequest}
+          initialOverride={initialOverride}
+          onClear={() => setInitialOverride(undefined)}
+        />
       );
     }
 
-    // Handle JSON content
-    if (type === 'application/json') {
+    if (type.startsWith('application/json')) {
+      let bodyContent;
+
       try {
         const jsonData = JSON.parse(data);
-        return (
-          <div className="space-y-4">
-            <div className="text-sm mb-2">
-              <span className="text-gray-400">Content-Type: </span>
-              <span className="text-blue-400">{type}</span>
-            </div>
-            <div className="bg-gray-800 p-3 rounded border border-gray-700">
-              <JsonTree data={jsonData} />
-            </div>
-          </div>
+
+        bodyContent = (
+          <CodeBlock>
+            <JsonTree data={jsonData} />
+          </CodeBlock>
         );
       } catch {
-        // Fallback to pre tag if JSON parsing fails
-        return (
-          <div className="space-y-4">
-            <div className="text-sm mb-2">
-              <span className="text-gray-400">Content-Type: </span>
-              <span className="text-blue-400">{type}</span>
-            </div>
-            <pre className="text-sm font-mono text-gray-300 whitespace-pre-wrap bg-gray-800 p-3 rounded border border-gray-700 overflow-x-auto">
-              {data}
-            </pre>
-            <div className="text-xs text-gray-500">
+        bodyContent = (
+          <>
+            <CodeBlock>{data}</CodeBlock>
+            <div className="text-xs text-gray-500 mt-1">
               ⚠️ Failed to parse as JSON, showing as raw text
             </div>
-          </div>
+          </>
         );
       }
-    }
 
-    // Handle HTML content
-    if (type === 'text/html') {
       return (
-        <div className="space-y-4">
-          <div className="text-sm mb-2">
-            <span className="text-gray-400">Content-Type: </span>
-            <span className="text-blue-400">{type}</span>
-          </div>
-          <pre className="text-sm font-mono text-gray-300 whitespace-pre-wrap bg-gray-800 p-3 rounded border border-gray-700 overflow-x-auto">
-            {data}
-          </pre>
-        </div>
+        <RenderResponseBodySection action={overrideAction}>
+          {contentTypeGrid}
+          {bodyContent}
+        </RenderResponseBodySection>
       );
     }
 
-    // Handle other text content types
     if (
       type.startsWith('text/') ||
-      type === 'application/xml' ||
-      type === 'application/javascript'
+      type.startsWith('application/xml') ||
+      type.startsWith('application/javascript')
     ) {
       return (
-        <div className="space-y-4">
-          <div className="text-sm mb-2">
-            <span className="text-gray-400">Content-Type: </span>
-            <span className="text-blue-400">{type}</span>
-          </div>
-          <pre className="text-sm font-mono text-gray-300 whitespace-pre-wrap bg-gray-800 p-3 rounded border border-gray-700 overflow-x-auto">
-            {data}
-          </pre>
-        </div>
+        <RenderResponseBodySection action={overrideAction}>
+          {contentTypeGrid}
+          <CodeBlock>{data}</CodeBlock>
+        </RenderResponseBodySection>
       );
     }
 
-    // Handle other content types
     return (
-      <div className="space-y-4">
-        <div className="text-sm mb-2">
-          <span className="text-gray-400">Content-Type: </span>
-          <span className="text-blue-400">{type}</span>
-        </div>
+      <RenderResponseBodySection>
+        {contentTypeGrid}
         <div className="text-sm text-gray-400">
           Binary content not shown - {data.length} bytes
         </div>
-      </div>
+      </RenderResponseBodySection>
     );
   };
 
   return (
     <ScrollArea className="h-full w-full">
-      <div className="p-4">
-        {renderResponseBody()}
-      </div>
+      <div className="p-4">{renderResponseBody()}</div>
     </ScrollArea>
   );
 };

package/src/ui/tabs/SSEMessagesTab.tsx

@@ -15,30 +15,64 @@ export type SSEMessagesTabProps = {
 
 interface SSEMessageRow {
   id: string;
+  type: string;
   data: string;
   timestamp: number;
 }
 
 const columnHelper = createColumnHelper<SSEMessageRow>();
 
+const formatPreviewData = (data: string) => {
+  return (
+    <span className="max-w-xs truncate text-gray-400">
+      {data.substring(0, 100) + (data.length > 100 ? '...' : '')}
+    </span>
+  );
+};
+
+const formatTimestamp = (timestamp: number) => {
+  const date = new Date(timestamp);
+  const timeString = date.toLocaleTimeString('en-US', {
+    hour12: false,
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+  });
+  const milliseconds = date.getMilliseconds().toString().padStart(3, '0');
+  return `${timeString}.${milliseconds}`;
+};
+
+const columns = [
+  columnHelper.accessor('timestamp', {
+    header: 'Timestamp',
+    cell: ({ getValue }) => (
+      <div className="text-gray-400">{formatTimestamp(getValue())}</div>
+    ),
+    size: 120,
+  }),
+  columnHelper.accessor('type', {
+    header: 'Type',
+    cell: ({ getValue }) => (
+      <div className="text-purple-400 font-medium">{getValue()}</div>
+    ),
+    size: 100,
+  }),
+  columnHelper.accessor('data', {
+    header: 'Data',
+    cell: ({ getValue }) => {
+      const data = getValue();
+      return formatPreviewData(data);
+    },
+    size: 300,
+  }),
+];
+
 export const SSEMessagesTab = ({ selectedRequest }: SSEMessagesTabProps) => {
   // Capture the selected message, so when it gets removed (message limit), it's still displayed
   const [selectedMessage, setSelectedMessage] = useState<SSEMessageRow | null>(
     null
   );
 
-  const formatTimestamp = (timestamp: number) => {
-    const date = new Date(timestamp);
-    const timeString = date.toLocaleTimeString('en-US', {
-      hour12: false,
-      hour: '2-digit',
-      minute: '2-digit',
-      second: '2-digit',
-    });
-    const milliseconds = date.getMilliseconds().toString().padStart(3, '0');
-    return `${timeString}.${milliseconds}`;
-  };
-
   const formatData = (data: string) => {
     if (typeof data === 'string') {
       try {
@@ -65,38 +99,13 @@ export const SSEMessagesTab = ({ selectedRequest }: SSEMessagesTabProps) => {
     return selectedRequest.messages.map(
       (message): SSEMessageRow => ({
         id: message.id,
+        type: message.type,
         data: message.data,
         timestamp: message.timestamp,
       })
     );
   }, [selectedRequest.messages]);
 
-  const formatPreviewData = (data: string) => {
-    return (
-      <span className="max-w-xs truncate text-gray-400">
-        {data.substring(0, 100) + (data.length > 100 ? '...' : '')}
-      </span>
-    );
-  };
-
-  const columns = [
-    columnHelper.accessor('data', {
-      header: 'Data',
-      cell: ({ getValue }) => {
-        const data = getValue();
-        return formatPreviewData(data);
-      },
-      size: 300,
-    }),
-    columnHelper.accessor('timestamp', {
-      header: 'Timestamp',
-      cell: ({ getValue }) => (
-        <div className="text-gray-400">{formatTimestamp(getValue())}</div>
-      ),
-      size: 120,
-    }),
-  ];
-
   const table = useReactTable({
     data: tableData,
     columns,
@@ -189,7 +198,9 @@ export const SSEMessagesTab = ({ selectedRequest }: SSEMessagesTabProps) => {
               <div className="grid grid-cols-2 gap-4 text-sm">
                 <div>
                   <span className="text-gray-400">Type: </span>
-                  <span className="text-purple-400">SSE</span>
+                  <span className="text-purple-400">
+                    {selectedMessage.type}
+                  </span>
                 </div>
                 <div>
                   <span className="text-gray-400">Timestamp: </span>

package/src/ui/utils/checkRequestBodyBinary.ts

@@ -0,0 +1,7 @@
+import { NetworkEntry } from '../state/model';
+
+export const checkRequestBodyBinary = (request: NetworkEntry) => {
+  return (
+    request.type === 'http' && request.request.body?.data.type === 'binary'
+  );
+};

package/src/ui/utils/escapeShellArg.ts

@@ -0,0 +1,12 @@
+// Escapes special characters in shell arguments
+export function escapeShellArg(arg: string): string {
+  if (!arg) return "''";
+
+  // If the argument contains no special characters, return as is
+  if (/^[a-zA-Z0-9_./:-]+$/.test(arg)) {
+    return arg;
+  }
+
+  // Replace single quotes with '\'' and wrap in single quotes
+  return `'${arg.replace(/'/g, "'\"'\"'")}'`;
+}

package/src/ui/utils/generateCurlCommand.ts

@@ -0,0 +1,83 @@
+import { HttpHeaders, RequestPostData } from '../../shared/client';
+import { HttpNetworkEntry, SSENetworkEntry } from '../state/model';
+import { escapeShellArg } from './escapeShellArg';
+
+const BASE_TAB_INDENT = 2; // Number of spaces for indentation
+
+function stringifyData(postData: unknown): string {
+  try {
+    const jsonString = JSON.stringify(
+      typeof postData === 'string' ? JSON.parse(postData) : postData,
+      null,
+      BASE_TAB_INDENT * 4
+    );
+
+    return jsonString.replace(/([}\]])$/, '$1'.padStart(BASE_TAB_INDENT * 2));
+  } catch {
+    return String(postData);
+  }
+}
+
+// Adds a curl parameter with proper indentation
+function addCurlParam(curlParts: string[], flag: string, value: string): void {
+  curlParts.push(`${flag.padStart(BASE_TAB_INDENT + flag.length)} ${value}`);
+}
+
+function addHttpMethodToCurl(curlParts: string[], method: string): void {
+  if (method && hasRequestBody(method)) {
+    addCurlParam(curlParts, '-X', method.toUpperCase());
+  }
+}
+
+function addHeadersToCurl(curlParts: string[], headers: HttpHeaders): void {
+  Object.entries(headers).forEach(([key, value]) => {
+    addCurlParam(curlParts, '-H', escapeShellArg(`${key}: ${value}`));
+  });
+}
+
+function hasRequestBody(method: string): boolean {
+  const methodsWithBody = ['POST', 'PUT', 'PATCH', 'DELETE'];
+
+  return methodsWithBody.includes(method.toUpperCase());
+}
+
+function addBodyToCurl(curlParts: string[], postData: RequestPostData): void {
+  if (!postData) {
+    return;
+  }
+
+  const { type, value } = postData;
+
+  if (type === 'form-data') {
+    const formParts = Object.entries(value).map(
+      ([key, value]) => `${key}=${stringifyData(value)}`
+    );
+
+    formParts.forEach((part) =>
+      addCurlParam(curlParts, '--form', escapeShellArg(part))
+    );
+
+    return;
+  }
+
+  addCurlParam(curlParts, '--data-raw', escapeShellArg(stringifyData(value)));
+}
+
+export function generateCurlCommand(
+  request: HttpNetworkEntry | SSENetworkEntry
+) {
+  const { method, url, headers = {}, body } = request.request;
+
+  const postData = body?.data;
+
+  const curlParts: string[] = [`curl ${escapeShellArg(url)}`];
+
+  addHttpMethodToCurl(curlParts, method);
+  addHeadersToCurl(curlParts, headers);
+
+  if (postData && hasRequestBody(method)) {
+    addBodyToCurl(curlParts, postData);
+  }
+
+  return curlParts.join(' \\\n');
+}

package/src/ui/utils/generateFetchCall.ts

@@ -0,0 +1,64 @@
+import { generateMultipartBody } from './generateMultipartBody';
+import {
+  HttpNetworkEntry,
+  HttpRequestData,
+  SSENetworkEntry,
+} from '../state/model';
+import { getHttpHeaderValueAsString } from '../../utils/getHttpHeaderValueAsString';
+import { HttpHeaders, XHRHeaders } from '../../shared/client';
+
+const processHeaders = (requestHeaders: HttpHeaders | undefined) => {
+  const headers: XHRHeaders = {};
+
+  if (!requestHeaders) {
+    return headers;
+  }
+
+  Object.entries(requestHeaders).forEach(([name, value]) => {
+    // Filter out HTTP/2 pseudo-headers
+    if (!name.startsWith(':')) {
+      headers[name] = getHttpHeaderValueAsString(value);
+    }
+  });
+
+  return headers;
+};
+
+const processRequestBody = (body: HttpRequestData, headers: XHRHeaders) => {
+  const { type, value } = body.data;
+
+  switch (type) {
+    case 'text':
+      return value;
+
+    case 'form-data': {
+      const { body, contentType } = generateMultipartBody(value);
+
+      headers['Content-Type'] = contentType;
+
+      return body;
+    }
+
+    default:
+      return undefined;
+  }
+};
+
+export const generateFetchCall = (
+  request: HttpNetworkEntry | SSENetworkEntry
+) => {
+  const { url, headers: requestHeaders, method, body } = request.request;
+
+  const headers = processHeaders(requestHeaders);
+  const requestBody = body ? processRequestBody(body, headers) : undefined;
+
+  const fetchOptions: RequestInit = {
+    headers: Object.keys(headers).length ? headers : undefined,
+    body: requestBody,
+    method,
+  };
+
+  const options = JSON.stringify(fetchOptions, null, 2);
+
+  return `fetch(${JSON.stringify(url)}, ${options});`;
+};

package/src/ui/utils/generateMultipartBody.ts

@@ -0,0 +1,19 @@
+export const generateMultipartBody = (formData: Record<string, unknown>) => {
+  const boundary = 'FormBoundary' + Math.random().toString(36).substr(2, 16);
+
+  const parts: string[] = [];
+
+  Object.entries(formData).forEach(([key, value]) => {
+    parts.push(`--${boundary}`);
+    parts.push(`Content-Disposition: form-data; name="${key}"`);
+    parts.push('');
+    parts.push(String(value));
+  });
+
+  parts.push(`--${boundary}--`);
+
+  return {
+    body: parts.join('\r\n'),
+    contentType: `multipart/form-data; boundary=${boundary}`,
+  };
+};

package/src/ui/views/InspectorView.tsx

@@ -1,12 +1,14 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { Toolbar } from '../components/Toolbar';
 import { RequestList } from '../components/RequestList';
 import { SidePanel } from '../components/SidePanel';
+import { FilterBar, FilterState } from '../components/FilterBar';
 import { NetworkActivityDevToolsClient } from '../../shared/client';
 import {
   useNetworkActivityClientManagement,
   useHasSelectedRequest,
   useNetworkActivityActions,
+  useOverrides,
 } from '../state/hooks';
 
 export type InspectorViewProps = {
@@ -17,6 +19,11 @@ export const InspectorView = ({ client }: InspectorViewProps) => {
   const actions = useNetworkActivityActions();
   const clientManagement = useNetworkActivityClientManagement();
   const hasSelectedRequest = useHasSelectedRequest();
+  const overrides = useOverrides();
+  const [filter, setFilter] = useState<FilterState>({
+    text: '',
+    types: new Set(['http', 'websocket', 'sse']),
+  });
 
   useEffect(() => {
     if (!client) {
@@ -26,15 +33,20 @@ export const InspectorView = ({ client }: InspectorViewProps) => {
     clientManagement.setupClient(client);
     actions.setRecording(true);
 
+    client.send('set-overrides', {
+      overrides: Array.from(overrides.entries()),
+    });
+
     return () => {
       actions.setRecording(false);
       clientManagement.cleanupClient();
     };
-  }, [client, clientManagement, actions]);
+  }, [client, clientManagement, actions, overrides]);
 
   return (
     <div className="h-screen bg-gray-900 text-gray-100 flex flex-col">
       <Toolbar />
+      <FilterBar filter={filter} onFilterChange={setFilter} />
 
       <div className="flex flex-1 overflow-hidden">
         {/* Request List */}
@@ -43,7 +55,7 @@ export const InspectorView = ({ client }: InspectorViewProps) => {
             hasSelectedRequest ? 'w-1/2' : 'w-full'
           } border-r border-gray-700 overflow-hidden`}
         >
-          <RequestList />
+          <RequestList filter={filter} />
         </div>
 
         {hasSelectedRequest && <SidePanel />}

package/src/utils/applyReactNativeRequestHeadersLogic.ts

@@ -0,0 +1,30 @@
+import { HttpHeaders, RequestPostData } from '../shared/client';
+import { getHttpHeader } from './getHttpHeader';
+import { inferContentTypeFromPostData } from './inferContentTypeFromPostData';
+
+/**
+ * Partially emulates React Native's behavior for setting HTTP headers.
+ *
+ * @see https://github.com/facebook/react-native/blob/de5093c88771977b58f7bec3f3ffa64a9595334e/packages/react-native/Libraries/Network/RCTNetworking.mm#L345-L349
+ */
+export function applyReactNativeRequestHeadersLogic(
+  headers: HttpHeaders,
+  postData?: RequestPostData
+): HttpHeaders {
+  const existingContentType = getHttpHeader(headers, 'content-type');
+
+  if (existingContentType) {
+    return headers;
+  }
+
+  const inferredContentType = inferContentTypeFromPostData(postData);
+
+  if (!inferredContentType) {
+    return headers;
+  }
+
+  return {
+    ...headers,
+    'Content-Type': inferredContentType,
+  };
+}

package/src/utils/applyReactNativeResponseHeadersLogic.ts

@@ -0,0 +1,28 @@
+import { HttpHeaders, XHRHeaders } from '../shared/client';
+import { splitSetCookieHeaderByComma } from './cookieParser';
+import { getHttpHeader } from './getHttpHeader';
+
+/**
+ * Applies React Native specific logic to response headers.
+ * React Native concatenates multiple header values into single strings,
+ * this function parses them back into arrays where appropriate.
+ *
+ * @see https://github.com/facebook/react-native/blob/588f0c5ce6c283f116228456da2170d2adc3cbf4/ReactAndroid/src/main/java/com/facebook/react/modules/network/NetworkingModule.java#L637
+ */
+export const applyReactNativeResponseHeadersLogic = (
+  headers: XHRHeaders
+): HttpHeaders => {
+  const parsedHeaders: HttpHeaders = { ...headers };
+
+  const setCookieHeader = getHttpHeader(headers, 'set-cookie');
+
+  if (setCookieHeader) {
+    const { value, originalKey } = setCookieHeader;
+
+    const cookies = splitSetCookieHeaderByComma(value);
+
+    parsedHeaders[originalKey] = cookies.length > 0 ? cookies : value;
+  }
+
+  return parsedHeaders;
+};