@rozenite/network-activity-plugin 1.0.0-alpha.8 → 1.0.0

package/src/ui/views/InspectorView.tsx

@@ -1,348 +1,64 @@
-import { useState, useMemo, useEffect } from 'react';
-import { Badge } from '../components/Badge';
-import { Button } from '../components/Button';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '../components/Tabs';
-import { HeadersTab } from '../tabs/HeadersTab';
-import { RequestTab } from '../tabs/RequestTab';
-import { ResponseTab } from '../tabs/ResponseTab';
-import { CookiesTab } from '../tabs/CookiesTab';
-import { TimingTab } from '../tabs/TimingTab';
+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 {
-  RequestList,
-  processNetworkEntries,
-  getTypeColor,
-  getStatusColor,
-} from '../components/RequestList';
-import { Circle, Square, Trash2, X } from 'lucide-react';
-import {
-  NetworkActivityDevToolsClient,
-  NetworkActivityEventMap,
-  RequestId,
-} from '../../shared/client';
-import { NetworkEntry } from '../types';
+  useNetworkActivityClientManagement,
+  useHasSelectedRequest,
+  useNetworkActivityActions,
+  useOverrides,
+} from '../state/hooks';
 
 export type InspectorViewProps = {
   client: NetworkActivityDevToolsClient;
 };
 
 export const InspectorView = ({ client }: InspectorViewProps) => {
-  const [isRecording, setIsRecording] = useState(true);
-  const [selectedRequestId, setSelectedRequestId] = useState<RequestId | null>(
-    null
-  );
-  const [networkEntries, setNetworkEntries] = useState<
-    Map<RequestId, NetworkEntry>
-  >(new Map());
-
-  const selectedRequest = useMemo(() => {
-    if (!selectedRequestId) return null;
-    const processedRequests = processNetworkEntries(networkEntries);
-    return (
-      processedRequests.find((request) => request.id === selectedRequestId) ||
-      null
-    );
-  }, [selectedRequestId, networkEntries]);
+  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(() => {
-    const handleRequestSent = (
-      data: NetworkActivityEventMap['request-sent']
-    ) => {
-      const entry: NetworkEntry = {
-        requestId: data.requestId,
-        url: data.request.url,
-        method: data.request.method,
-        headers: data.request.headers,
-        postData: data.request.postData,
-        status: 'pending',
-        startTime: data.timestamp,
-        type: data.type,
-        initiator: data.initiator,
-        request: data.request,
-      };
-
-      setNetworkEntries((prev) => new Map(prev).set(data.requestId, entry));
-    };
-
-    const handleResponseReceived = (
-      data: NetworkActivityEventMap['response-received']
-    ) => {
-      setNetworkEntries((prev) => {
-        const entry = prev.get(data.requestId);
-        if (!entry) return prev;
-
-        const updatedEntry: NetworkEntry = {
-          ...entry,
-          status: 'loading',
-          response: data.response,
-        };
-
-        return new Map(prev).set(data.requestId, updatedEntry);
-      });
-    };
-
-    const handleRequestCompleted = (
-      data: NetworkActivityEventMap['request-completed']
-    ) => {
-      setNetworkEntries((prev) => {
-        const entry = prev.get(data.requestId);
-        if (!entry) return prev;
-
-        const updatedEntry: NetworkEntry = {
-          ...entry,
-          status: 'finished',
-          endTime: data.timestamp,
-          duration: data.duration,
-          ttfb: data.ttfb,
-          size: data.size,
-        };
-
-        return new Map(prev).set(data.requestId, updatedEntry);
-      });
-    };
-
-    const handleRequestFailed = (
-      data: NetworkActivityEventMap['request-failed']
-    ) => {
-      setNetworkEntries((prev) => {
-        const entry = prev.get(data.requestId);
-        if (!entry) return prev;
-
-        const updatedEntry: NetworkEntry = {
-          ...entry,
-          status: 'failed',
-          error: data.error,
-          canceled: data.canceled,
-        };
-
-        return new Map(prev).set(data.requestId, updatedEntry);
-      });
-    };
-
-    // Subscribe to network events
-    const unsubscribeRequestSent = client.onMessage(
-      'request-sent',
-      handleRequestSent
-    );
-    const unsubscribeResponseReceived = client.onMessage(
-      'response-received',
-      handleResponseReceived
-    );
-    const unsubscribeRequestCompleted = client.onMessage(
-      'request-completed',
-      handleRequestCompleted
-    );
-    const unsubscribeRequestFailed = client.onMessage(
-      'request-failed',
-      handleRequestFailed
-    );
-
-    const handleResponseBody = (
-      data: NetworkActivityEventMap['response-body']
-    ) => {
-      setNetworkEntries((prev) => {
-        const entry = prev.get(data.requestId);
-        if (!entry) return prev;
-
-        const updatedEntry: NetworkEntry = {
-          ...entry,
-          responseBody: {
-            ...entry.responseBody,
-            body: data.body,
-          },
-        };
+    if (!client) {
+      return;
+    }
 
-        console.log(updatedEntry);
-        return new Map(prev).set(data.requestId, updatedEntry);
-      });
-    };
+    clientManagement.setupClient(client);
+    actions.setRecording(true);
 
-    const unsubscribeResponseBody = client.onMessage(
-      'response-body',
-      handleResponseBody
-    );
+    client.send('set-overrides', {
+      overrides: Array.from(overrides.entries()),
+    });
 
     return () => {
-      unsubscribeRequestSent.remove();
-      unsubscribeResponseReceived.remove();
-      unsubscribeRequestCompleted.remove();
-      unsubscribeRequestFailed.remove();
-      unsubscribeResponseBody.remove();
+      actions.setRecording(false);
+      clientManagement.cleanupClient();
     };
-  }, [client]);
-
-  useEffect(() => {
-    if (isRecording) {
-      client.send('network-enable', {});
-
-      return () => {
-        client.send('network-disable', {});
-      };
-    }
-  }, [isRecording, client]);
-
-  const clearRequests = () => {
-    setNetworkEntries(new Map());
-    setSelectedRequestId(null);
-  };
-
-  const closeSidePanel = () => {
-    setSelectedRequestId(null);
-  };
+  }, [client, clientManagement, actions, overrides]);
 
   return (
     <div className="h-screen bg-gray-900 text-gray-100 flex flex-col">
-      {/* Toolbar */}
-      <div className="flex items-center gap-2 p-2 border-b border-gray-700 bg-gray-800">
-        <Button
-          variant="ghost"
-          size="sm"
-          onClick={() => setIsRecording(!isRecording)}
-          className={`h-8 w-8 p-0 ${
-            isRecording
-              ? 'text-red-400 hover:text-red-300'
-              : 'text-gray-400 hover:text-blue-400'
-          }`}
-        >
-          {isRecording ? (
-            <Circle className="h-4 w-4 fill-current" />
-          ) : (
-            <Square className="h-4 w-4" />
-          )}
-        </Button>
-        <Button
-          variant="ghost"
-          size="sm"
-          onClick={clearRequests}
-          className="h-8 w-8 p-0 text-gray-400 hover:text-blue-400"
-        >
-          <Trash2 className="h-4 w-4" />
-        </Button>
-      </div>
+      <Toolbar />
+      <FilterBar filter={filter} onFilterChange={setFilter} />
 
       <div className="flex flex-1 overflow-hidden">
         {/* Request List */}
         <div
           className={`flex flex-col ${
-            selectedRequest ? 'w-1/2' : 'w-full'
+            hasSelectedRequest ? 'w-1/2' : 'w-full'
           } border-r border-gray-700 overflow-hidden`}
         >
-          <RequestList
-            networkEntries={networkEntries}
-            selectedRequestId={selectedRequestId}
-            onRequestSelect={setSelectedRequestId}
-          />
+          <RequestList filter={filter} />
         </div>
 
-        {/* Side Panel */}
-        {selectedRequest && (
-          <div className="w-1/2 flex flex-col bg-gray-900">
-            {/* Side Panel Header */}
-            <div className="flex items-center justify-between p-3 border-b border-gray-700 bg-gray-800">
-              <div className="flex items-center gap-2">
-                <div
-                  className={`w-3 h-3 rounded-full ${getTypeColor(
-                    selectedRequest.type
-                  )}`}
-                ></div>
-                <span className="font-medium">{selectedRequest.name}</span>
-                <Badge
-                  variant="outline"
-                  className={`${getStatusColor(
-                    selectedRequest.status
-                  )} border-current`}
-                >
-                  {selectedRequest.status}
-                </Badge>
-              </div>
-              <Button
-                variant="ghost"
-                size="sm"
-                onClick={closeSidePanel}
-                className="h-6 w-6 p-0 text-gray-400 hover:text-blue-400"
-              >
-                <X className="h-4 w-4" />
-              </Button>
-            </div>
-
-            {/* Side Panel Content */}
-            <div className="flex-1 overflow-hidden">
-              <Tabs defaultValue="headers" className="h-full flex flex-col">
-                <TabsList className="grid w-full grid-cols-5 bg-gray-800 rounded-none border-b border-gray-700">
-                  <TabsTrigger
-                    value="headers"
-                    className="data-[state=active]:bg-gray-700"
-                  >
-                    Headers
-                  </TabsTrigger>
-                  <TabsTrigger
-                    value="request"
-                    className="data-[state=active]:bg-gray-700"
-                  >
-                    Request
-                  </TabsTrigger>
-                  <TabsTrigger
-                    value="response"
-                    className="data-[state=active]:bg-gray-700"
-                  >
-                    Response
-                  </TabsTrigger>
-                  <TabsTrigger
-                    value="cookies"
-                    className="data-[state=active]:bg-gray-700"
-                  >
-                    Cookies
-                  </TabsTrigger>
-                  <TabsTrigger
-                    value="timing"
-                    className="data-[state=active]:bg-gray-700"
-                  >
-                    Timing
-                  </TabsTrigger>
-                </TabsList>
-
-                <TabsContent
-                  value="headers"
-                  className="flex-1 m-0 overflow-hidden"
-                >
-                  <HeadersTab
-                    selectedRequest={selectedRequest}
-                    networkEntries={networkEntries}
-                    getStatusColor={getStatusColor}
-                  />
-                </TabsContent>
-
-                <TabsContent value="request" className="flex-1 m-0 overflow-hidden">
-                  <RequestTab selectedRequest={selectedRequest} />
-                </TabsContent>
-
-                <TabsContent value="response" className="flex-1 m-0 overflow-hidden">
-                  <ResponseTab
-                    selectedRequest={selectedRequest}
-                    onRequestResponseBody={(requestId) => {
-                      client.send('get-response-body', {
-                        requestId,
-                      });
-                    }}
-                  />
-                </TabsContent>
-
-                <TabsContent value="cookies" className="flex-1 m-0 overflow-hidden">
-                  <CookiesTab
-                    selectedRequest={selectedRequest}
-                    networkEntries={networkEntries}
-                  />
-                </TabsContent>
-
-                <TabsContent value="timing" className="flex-1 m-0 overflow-hidden">
-                  <TimingTab
-                    selectedRequest={selectedRequest}
-                    networkEntries={networkEntries}
-                  />
-                </TabsContent>
-              </Tabs>
-            </div>
-          </div>
-        )}
+        {hasSelectedRequest && <SidePanel />}
       </div>
     </div>
   );

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;
+};

package/src/utils/cookieParser.ts

@@ -0,0 +1,126 @@
+import { Cookie, HttpHeaders } from '../shared/client';
+import { getHttpHeader } from './getHttpHeader';
+
+export const parseSetCookieHeader = (setCookieStr: string): Cookie => {
+  const parts = setCookieStr.split(';').map((p) => p.trim());
+  const [nameValue, ...attributes] = parts;
+  const [name, ...valueParts] = nameValue.split('=');
+
+  const value = valueParts.join('=');
+
+  const cookieObj: Cookie = {
+    name: name?.trim() || '',
+    value: value?.trim() || '',
+  };
+
+  attributes.forEach((attr) => {
+    const [attrName, ...attrValueParts] = attr.split('=');
+    const lowerAttrName = attrName.trim().toLowerCase();
+    const attrValue = attrValueParts.join('=');
+
+    switch (lowerAttrName) {
+      case 'domain':
+        cookieObj.domain = attrValue;
+
+        break;
+
+      case 'path':
+        cookieObj.path = attrValue;
+
+        break;
+
+      case 'expires':
+        cookieObj.expires = attrValue;
+
+        break;
+
+      case 'max-age':
+        cookieObj.maxAge = attrValue;
+
+        break;
+
+      case 'secure':
+        cookieObj.secure = true;
+
+        break;
+
+      case 'httponly':
+        cookieObj.httpOnly = true;
+
+        break;
+
+      case 'samesite':
+        cookieObj.sameSite = attrValue;
+
+        break;
+    }
+  });
+
+  return cookieObj;
+};
+
+export const splitSetCookieHeaderByComma = (header: string): string[] => {
+  const regex = /(?:^|,\s)([^=;,]+=[^;]+(?:;[^,]*)*)/g;
+  const matches: string[] = [];
+
+  let match;
+
+  while ((match = regex.exec(header)) !== null) {
+    matches.push(match[1].trim());
+  }
+
+  return matches;
+};
+
+export const parseCookieHeader = (cookieString: string): Cookie[] => {
+  if (!cookieString) return [];
+
+  return cookieString
+    .split(';')
+    .map((cookieStr) => {
+      const [name, ...valueParts] = cookieStr.trim().split('=');
+      const value = valueParts.join('=');
+
+      return {
+        name: name?.trim() || '',
+        value: value?.trim() || '',
+      };
+    })
+    .filter((cookieObj) => cookieObj.name);
+};
+
+export const parseRequestCookiesFromHeaders = (
+  headers: HttpHeaders
+): Cookie[] => {
+  const cookieHeader = getHttpHeader(headers, 'cookie');
+
+  if (!cookieHeader) {
+    return [];
+  }
+
+  const { value } = cookieHeader;
+
+  if (Array.isArray(value)) {
+    return value.flatMap(parseCookieHeader);
+  }
+
+  return parseCookieHeader(value);
+};
+
+export const parseResponseCookiesFromHeaders = (
+  headers: HttpHeaders
+): Cookie[] => {
+  const setCookieHeader = getHttpHeader(headers, 'set-cookie');
+
+  if (!setCookieHeader) {
+    return [];
+  }
+
+  const { value } = setCookieHeader;
+
+  if (Array.isArray(value)) {
+    return value.flatMap(parseSetCookieHeader);
+  }
+
+  return [parseSetCookieHeader(value)];
+};

package/src/utils/getContentTypeMimeType.ts

@@ -0,0 +1,17 @@
+import { HttpHeaders } from '../shared/client';
+import { getHttpHeader } from './getHttpHeader';
+
+export function getContentTypeMime(headers: HttpHeaders) {
+  const contentType = getHttpHeader(headers, 'content-type');
+
+  if (!contentType) {
+    return undefined;
+  }
+
+  const { value } = contentType;
+
+  // Content-Type can't be an array, but if it does we simply get the first element.
+  const actualValue = Array.isArray(value) ? value[0] : value;
+
+  return actualValue.split(';')[0].trim();
+}

package/src/utils/getHttpHeader.ts

@@ -0,0 +1,17 @@
+import { HttpHeaders, XHRHeaders } from '../shared/client';
+
+// Utility to get header value and actual key case-insensitively
+export function getHttpHeader<T extends HttpHeaders | XHRHeaders>(
+  headers: T,
+  name: string
+) {
+  const lowerName = name.toLowerCase();
+
+  for (const key in headers) {
+    if (key.toLowerCase() === lowerName) {
+      return { value: headers[key], originalKey: key };
+    }
+  }
+
+  return undefined;
+}

package/src/utils/getHttpHeaderValueAsString.ts

@@ -0,0 +1,13 @@
+/**
+ * Combines multiple HTTP header values according to RFC 7230 Section 3.2.2
+ *
+ * Per RFC 7230 Section 3.2.2: "A recipient MAY combine multiple header fields
+ * with the same field name into one 'field-name: field-value' pair, without
+ * changing the semantics of the message, by appending each subsequent field
+ * value to the combined field value in order, separated by a comma."
+ *
+ * @see https://tools.ietf.org/html/rfc7230#section-3.2.2
+ */
+export function getHttpHeaderValueAsString(value: string | string[]): string {
+  return Array.isArray(value) ? value.join(', ') : value;
+}

package/src/utils/getStringSizeInBytes.ts

@@ -0,0 +1,3 @@
+export const getStringSizeInBytes = (value: string) => {
+  return new TextEncoder().encode(value).length;
+};

package/src/utils/inferContentTypeFromPostData.ts

@@ -0,0 +1,9 @@
+import { RequestPostData } from '../shared/client';
+
+export function inferContentTypeFromPostData(postData: RequestPostData) {
+  if (postData?.type === 'form-data') {
+    return 'multipart/form-data';
+  }
+
+  return undefined;
+}

package/src/utils/safeStringify.ts

@@ -0,0 +1,7 @@
+export function safeStringify(data: unknown): string {
+  try {
+    return typeof data === 'string' ? data : JSON.stringify(data);
+  } catch {
+    return String(data);
+  }
+}

package/src/utils/typeChecks.ts

@@ -0,0 +1,27 @@
+export const isBlob = (value: unknown): value is Blob => value instanceof Blob;
+
+export const isArrayBuffer = (
+  value: unknown
+): value is ArrayBuffer | ArrayBufferView =>
+  value instanceof ArrayBuffer || ArrayBuffer.isView(value);
+
+export const isFormData = (value: unknown): value is FormData =>
+  value instanceof FormData;
+
+export const isNullOrUndefined = (value: unknown): value is null | undefined =>
+  value === null || value === undefined;
+
+export const isString = (value: unknown): value is string =>
+  typeof value === 'string';
+
+export const isNumber = (value: unknown): value is number =>
+  typeof value === 'number' && !isNaN(value);
+
+export const isBoolean = (value: unknown): value is boolean =>
+  typeof value === 'boolean';
+
+export const isObject = (value: unknown): value is object =>
+  typeof value === 'object' && value !== null;
+
+export const isArray = (value: unknown): value is unknown[] =>
+  Array.isArray(value);

package/tailwind.config.ts

@@ -7,6 +7,9 @@ const config: Config = {
   content: ['./src/ui/**/*.{js,ts,jsx,tsx,mdx}'],
   theme: {
     extend: {
+      translate: {
+        '0.75': '0.1875rem',
+      },
       colors: {
         background: 'hsl(var(--background))',
         foreground: 'hsl(var(--foreground))',