fix(network-activity-plugin): rewrite cookie parser to match RN specific logic

.nx/version-plans/version-plan-1755035510720.md

@@ -0,0 +1,5 @@
+---
+'@rozenite/network-activity-plugin': prerelease
+---
+
+Rewrites the cookie parser to properly handle React Native specific header logic and adds support for displaying multiple header values when they are arrays. The cookie parser now correctly parses Set-Cookie headers according to React Native's networking behavior, while the Headers tab can now display multiple values for headers that contain array data, improving the debugging experience for network requests with complex header structures.

apps/playground/src/app/screens/NetworkTestScreen.tsx

@@ -19,7 +19,7 @@ const api = {
     const response = await fetch('https://jsonplaceholder.typicode.com/users', {
       headers: {
         'X-Rozenite-Test': 'true',
-        Cookie: 'test=test',
+        Cookie: 'sessionid=abc123; theme=dark; user=testuser',
       },
     });
 

packages/network-activity-plugin/src/react-native/http/network-inspector.ts

@@ -10,6 +10,7 @@ import { getNetworkRequestsRegistry } from './network-requests-registry';
 import { getBlobName } from '../utils/getBlobName';
 import { getFormDataEntries } from '../utils/getFormDataEntries';
 import { XHRInterceptor } from './xhr-interceptor';
+import { applyReactNativeResponseHeadersLogic } from '../../utils/applyReactNativeResponseHeadersLogic';
 
 const networkRequestsRegistry = getNetworkRequestsRegistry();
 
@@ -184,7 +185,9 @@ export const getNetworkInspector = (
           url: request._url as string,
           status: request.status,
           statusText: request.statusText,
-          headers: request.responseHeaders || {},
+          headers: applyReactNativeResponseHeadersLogic(
+            request.responseHeaders || {}
+          ),
           contentType: getContentType(request),
           size: getResponseSize(request),
           responseTime: Date.now(),

packages/network-activity-plugin/src/shared/client.ts

@@ -2,7 +2,9 @@ import { RozeniteDevToolsClient } from '@rozenite/plugin-bridge';
 import { WebSocketEventMap } from './websocket-events';
 import { SSEEventMap } from './sse-events';
 
-export type HttpHeaders = Record<string, string>;
+export type HttpHeaders = Record<string, string | string[]>;
+export type XHRHeaders = NonNullable<XMLHttpRequest['responseHeaders']>;
+
 export type HttpMethod = 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH' | 'HEAD';
 
 export type RequestId = string;
@@ -28,6 +30,18 @@ export type RequestPostData =
   | null
   | undefined;
 
+export type Cookie = {
+  name: string;
+  value: string;
+  domain?: string;
+  path?: string;
+  expires?: string;
+  maxAge?: string;
+  secure?: boolean;
+  httpOnly?: boolean;
+  sameSite?: string;
+};
+
 export type Request = {
   url: string;
   method: HttpMethod;

packages/network-activity-plugin/src/ui/components/CookieCard.tsx

@@ -0,0 +1,64 @@
+import { Badge } from './Badge';
+import { Cookie } from '../../shared/client';
+import { cn } from '../utils/cn';
+
+type CookieCardProps = {
+  cookie: Cookie;
+  keyClassName?: string;
+};
+
+export const CookieCard = ({ cookie, keyClassName }: CookieCardProps) => (
+  <div className="bg-gray-800 border border-gray-700 rounded p-3">
+    <div className="flex items-center justify-between mb-2">
+      <span className={cn('text-sm font-medium', keyClassName)}>
+        {cookie.name}
+      </span>
+      <div className="flex items-center gap-2">
+        {cookie.secure && (
+          <Badge
+            variant="outline"
+            className="text-xs text-yellow-400 border-yellow-400"
+          >
+            Secure
+          </Badge>
+        )}
+        {cookie.httpOnly && (
+          <Badge
+            variant="outline"
+            className="text-xs text-purple-400 border-purple-400"
+          >
+            HttpOnly
+          </Badge>
+        )}
+      </div>
+    </div>
+    <div className="text-sm text-gray-300 mb-2 break-all">{cookie.value}</div>
+    <div className="grid grid-cols-2 gap-4 text-xs text-gray-400">
+      {cookie.domain && (
+        <div>
+          <span className="font-medium">Domain:</span> {cookie.domain}
+        </div>
+      )}
+      {cookie.path && (
+        <div>
+          <span className="font-medium">Path:</span> {cookie.path}
+        </div>
+      )}
+      {cookie.expires && (
+        <div>
+          <span className="font-medium">Expires:</span> {cookie.expires}
+        </div>
+      )}
+      {cookie.maxAge && (
+        <div>
+          <span className="font-medium">Max-Age:</span> {cookie.maxAge}
+        </div>
+      )}
+      {cookie.sameSite && (
+        <div>
+          <span className="font-medium">SameSite:</span> {cookie.sameSite}
+        </div>
+      )}
+    </div>
+  </div>
+);

packages/network-activity-plugin/src/ui/state/model.ts

@@ -1,4 +1,4 @@
-import { Initiator, ResourceType, RequestPostData } from '../../shared/client';
+import { Initiator, ResourceType, HttpHeaders, RequestPostData } from '../../shared/client';
 
 export type RequestId = string;
 export type Timestamp = number;
@@ -21,15 +21,15 @@ export type HttpResponseData = {
 export type HttpRequest = {
   url: string;
   method: HttpMethod;
-  headers: Record<string, string>;
+  headers: HttpHeaders;
   body?: HttpRequestData;
 };
 
 export type HttpResponse = {
   url: string;
   status: number;
   statusText: string;
-  headers: Record<string, string>;
+  headers: HttpHeaders;
   contentType: string;
   size: number;
   responseTime: Timestamp;