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

package/src/ui/tabs/CookiesTab.tsx

@@ -1,278 +1,75 @@
+import React from 'react';
 import { ScrollArea } from '../components/ScrollArea';
-import { Badge } from '../components/Badge';
-import { HttpHeaders } from '../../shared/client';
+import { Section } from '../components/Section';
+import { CookieCard } from '../components/CookieCard';
+import {
+  parseRequestCookiesFromHeaders,
+  parseResponseCookiesFromHeaders,
+} from '../../utils/cookieParser';
 import { HttpNetworkEntry, SSENetworkEntry } from '../state/model';
 
-type Cookie = {
-  name: string;
-  value: string;
-  domain?: string;
-  path?: string;
-  expires?: string;
-  maxAge?: string;
-  secure?: boolean;
-  httpOnly?: boolean;
-  sameSite?: string;
-};
-
 export type CookiesTabProps = {
   selectedRequest: HttpNetworkEntry | SSENetworkEntry;
 };
 
-const parseCookieString = (cookieString: string): Cookie[] => {
-  if (!cookieString) return [];
-
-  return cookieString
-    .split(';')
-    .map((cookieStr) => {
-      const [nameValue, ...attributes] = cookieStr.trim().split(';');
-      const [name, value] = nameValue.split('=');
-
-      const cookieObj: Cookie = {
-        name: name?.trim() || '',
-        value: value?.trim() || '',
-      };
-
-      // Parse attributes
-      attributes.forEach((attr) => {
-        const [attrName, attrValue] = attr.trim().split('=');
-        const lowerAttrName = attrName.toLowerCase();
-
-        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;
-    })
-    .filter((cookieObj) => cookieObj.name); // Filter out empty cookies
-};
-
-const extractCookiesFromHeaders = (
-  headers: HttpHeaders
-): {
-  requestCookies: Cookie[];
-  responseCookies: Cookie[];
-} => {
-  const requestCookies: Cookie[] = [];
-  const responseCookies: Cookie[] = [];
-
-  Object.entries(headers).forEach(([key, value]) => {
-    const lowerKey = key.toLowerCase();
-
-    if (lowerKey === 'cookie') {
-      // Cookie header contains all cookies in one string
-      requestCookies.push(...parseCookieString(value));
-    } else if (lowerKey === 'set-cookie') {
-      // Set-Cookie header contains one cookie with attributes
-      const cookies = parseCookieString(value);
-      responseCookies.push(...cookies);
-    }
-  });
-
-  return { requestCookies, responseCookies };
-};
-
 export const CookiesTab = ({ selectedRequest }: CookiesTabProps) => {
+  const requestHeaders = selectedRequest.request?.headers;
+  const responseHeaders = selectedRequest.response?.headers;
+
+  const { requestCookies, responseCookies } = React.useMemo(() => {
+    return {
+      requestCookies: parseRequestCookiesFromHeaders(requestHeaders || {}),
+      responseCookies: parseResponseCookiesFromHeaders(responseHeaders || {}),
+    };
+  }, [requestHeaders, responseHeaders]);
+
+  const hasRequestCookies = requestCookies.length > 0;
+  const hasResponseCookies = responseCookies.length > 0;
+
+  if (!hasRequestCookies && !hasResponseCookies) {
+    return (
+      <ScrollArea className="h-full w-full">
+        <div className="p-4">
+          <div className="text-sm text-gray-400">
+            No cookies for this request
+          </div>
+        </div>
+      </ScrollArea>
+    );
+  }
+
   return (
     <ScrollArea className="h-full w-full">
       <div className="p-4">
-        {(() => {
-          // Extract cookies from request and response headers separately
-          const requestHeaders = selectedRequest.request?.headers || {};
-          const responseHeaders = selectedRequest.response?.headers || {};
-
-          const { requestCookies } = extractCookiesFromHeaders(requestHeaders);
-          const { responseCookies } =
-            extractCookiesFromHeaders(responseHeaders);
-
-          const hasRequestCookies = requestCookies.length > 0;
-          const hasResponseCookies = responseCookies.length > 0;
-
-          if (!hasRequestCookies && !hasResponseCookies) {
-            return (
-              <div className="text-sm text-gray-400">
-                No cookies for this request
+        <div className="space-y-6">
+          {hasRequestCookies && (
+            <Section title={`Request Cookies (${requestCookies.length})`}>
+              <div className="space-y-2">
+                {requestCookies.map((cookie, index) => (
+                  <CookieCard
+                    key={`request-${index}`}
+                    cookie={cookie}
+                    keyClassName="text-blue-400"
+                  />
+                ))}
               </div>
-            );
-          }
-
-          return (
-            <div className="space-y-6">
-              {/* Request Cookies */}
-              {hasRequestCookies && (
-                <div>
-                  <h4 className="text-sm font-medium text-gray-300 mb-3">
-                    Request Cookies ({requestCookies.length})
-                  </h4>
-                  <div className="space-y-2">
-                    {requestCookies.map((cookie, index) => (
-                      <div
-                        key={`request-${index}`}
-                        className="bg-gray-800 border border-gray-700 rounded p-3"
-                      >
-                        <div className="flex items-center justify-between mb-2">
-                          <span className="text-sm font-medium text-blue-400">
-                            {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">
-                          {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>
-                    ))}
-                  </div>
-                </div>
-              )}
-
-              {/* Response Cookies */}
-              {hasResponseCookies && (
-                <div>
-                  <h4 className="text-sm font-medium text-gray-300 mb-3">
-                    Response Cookies ({responseCookies.length})
-                  </h4>
-                  <div className="space-y-2">
-                    {responseCookies.map((cookie, index) => (
-                      <div
-                        key={`response-${index}`}
-                        className="bg-gray-800 border border-gray-700 rounded p-3"
-                      >
-                        <div className="flex items-center justify-between mb-2">
-                          <span className="text-sm font-medium text-green-400">
-                            {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">
-                          {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>
-                    ))}
-                  </div>
-                </div>
-              )}
-            </div>
-          );
-        })()}
+            </Section>
+          )}
+
+          {hasResponseCookies && (
+            <Section title={`Response Cookies (${responseCookies.length})`}>
+              <div className="space-y-2">
+                {responseCookies.map((cookie, index) => (
+                  <CookieCard
+                    key={`response-${index}`}
+                    cookie={cookie}
+                    keyClassName="text-green-400"
+                  />
+                ))}
+              </div>
+            </Section>
+          )}
+        </div>
       </div>
     </ScrollArea>
   );

package/src/ui/tabs/HeadersTab.tsx

@@ -1,109 +1,98 @@
 import { useMemo } from 'react';
 import { ScrollArea } from '../components/ScrollArea';
+import { Section } from '../components/Section';
+import { KeyValueGrid, KeyValueItem } from '../components/KeyValueGrid';
 import { HttpNetworkEntry, SSENetworkEntry } from '../state/model';
 import { getStatusColor } from '../utils/getStatusColor';
+import { CopyRequestDropdown } from '../components/CopyRequestDropdown';
+import { HttpHeaders } from '../../shared/client';
 
 export type HeadersTabProps = {
   selectedRequest: HttpNetworkEntry | SSENetworkEntry;
 };
 
+function getHeadersItems(headers?: HttpHeaders): KeyValueItem[] {
+  if (!headers) return [];
+
+  return Object.entries(headers).reduce<KeyValueItem[]>((acc, [key, value]) => {
+    if (Array.isArray(value)) {
+      acc.push(
+        ...value.map((item) => ({ key: key.toLowerCase(), value: item }))
+      );
+    } else {
+      acc.push({ key: key.toLowerCase(), value: value });
+    }
+
+    return acc;
+  }, []);
+}
+
 export const HeadersTab = ({ selectedRequest }: HeadersTabProps) => {
-  const url = useMemo(() => {
-    const { hostname, port, pathname } = new URL(selectedRequest.request.url);
+  const requestBody = selectedRequest.request.body;
 
-    return `${hostname}${port ? `:${port}` : ''}${pathname}`;
-  }, [selectedRequest.request.url]);
+  const generalItems: KeyValueItem[] = useMemo(
+    () => [
+      {
+        key: 'Request URL',
+        value: selectedRequest.request.url,
+        valueClassName: 'text-blue-400',
+      },
+      {
+        key: 'Request Method',
+        value: selectedRequest.request.method,
+      },
+      {
+        key: 'Status Code',
+        value: selectedRequest.response?.status ?? 'Pending',
+        valueClassName: getStatusColor(selectedRequest.response?.status ?? 0),
+      },
+      ...(requestBody
+        ? [
+            {
+              key: 'Content-Type',
+              value: requestBody.type,
+              valueClassName: 'text-blue-400',
+            },
+          ]
+        : []),
+    ],
+    [selectedRequest]
+  );
+
+  const responseHeadersItems = useMemo(
+    () => getHeadersItems(selectedRequest.response?.headers),
+    [selectedRequest]
+  );
+
+  const requestHeadersItems = useMemo(
+    () => getHeadersItems(selectedRequest.request.headers),
+    [selectedRequest]
+  );
 
   return (
     <ScrollArea className="h-full w-full">
       <div className="p-4 space-y-4">
-        <div>
-          <h4 className="text-sm font-medium text-gray-300 mb-2">General</h4>
-          <div className="space-y-1 text-sm">
-            <div className="flex">
-              <span className="w-32 text-gray-400">Request URL:</span>
-              <span className="text-blue-400">
-                {url}
-              </span>
-            </div>
-            <div className="flex">
-              <span className="w-32 text-gray-400">Request Method:</span>
-              <span>{selectedRequest.request.method}</span>
-            </div>
-            <div className="flex">
-              <span className="w-32 text-gray-400">Status Code:</span>
-              <span
-                className={getStatusColor(
-                  selectedRequest.response?.status ?? 0
-                )}
-              >
-                {selectedRequest.response?.status ?? 'Pending'}
-              </span>
-            </div>
-            {selectedRequest.request.body && (
-              <div className="flex">
-                <span className="w-32 text-gray-400">Content-Type:</span>
-                <span className="text-blue-400">
-                  {selectedRequest.request.body.type}
-                </span>
-              </div>
-            )}
-          </div>
-        </div>
+        <CopyRequestDropdown selectedRequest={selectedRequest} />
+
+        <Section title="General">
+          <KeyValueGrid items={generalItems} />
+        </Section>
 
-        <div>
-          <h4 className="text-sm font-medium text-gray-300 mb-2">
-            Response Headers
-          </h4>
-          <div className="space-y-1 text-sm font-mono">
-            {(() => {
-              const responseHeaders = selectedRequest.response?.headers;
-              if (responseHeaders && Object.keys(responseHeaders).length > 0) {
-                return Object.entries(responseHeaders).map(([key, value]) => (
-                  <div key={key} className="flex">
-                    <span className="w-32 text-gray-400">
-                      {key.toLowerCase()}:
-                    </span>
-                    <span className="flex-1 break-all">{value}</span>
-                  </div>
-                ));
-              } else {
-                return (
-                  <div className="text-gray-500 italic">
-                    No response headers available
-                  </div>
-                );
-              }
-            })()}
-          </div>
-        </div>
+        <Section title="Response Headers">
+          <KeyValueGrid
+            items={responseHeadersItems}
+            emptyMessage="No response headers available"
+            className="font-mono"
+          />
+        </Section>
 
-        <div>
-          <h4 className="text-sm font-medium text-gray-300 mb-2">
-            Request Headers
-          </h4>
-          <div className="space-y-1 text-sm font-mono">
-            {(() => {
-              const requestHeaders = selectedRequest.request.headers;
-              if (requestHeaders && Object.keys(requestHeaders).length > 0) {
-                return Object.entries(requestHeaders).map(([key, value]) => (
-                  <div key={key} className="flex">
-                    <span className="w-32 text-gray-400">
-                      {key.toLowerCase()}:
-                    </span>
-                    <span className="flex-1 break-all">{value}</span>
-                  </div>
-                ));
-              } else {
-                return (
-                  <div className="text-gray-500 italic">
-                    No request headers available
-                  </div>
-                );
-              }
-            })()}
-          </div>
-        </div>
+        <Section title="Request Headers">
+          <KeyValueGrid
+            items={requestHeadersItems}
+            emptyMessage="No request headers available"
+            className="font-mono"
+          />
+        </Section>
       </div>
     </ScrollArea>
   );

package/src/ui/tabs/RequestTab.tsx

@@ -1,66 +1,78 @@
 import { ScrollArea } from '../components/ScrollArea';
-import { JsonTree } from '../components/JsonTree';
-import { HttpNetworkEntry, SSENetworkEntry } from '../state/model';
-import { assert } from '../utils/assert';
+import {
+  HttpNetworkEntry,
+  HttpRequestData,
+  SSENetworkEntry,
+} from '../state/model';
+import { KeyValueGrid } from '../components/KeyValueGrid';
+import { Section } from '../components/Section';
+import { useMemo } from 'react';
+import { RequestBody } from '../components/RequestBody';
 
 export type RequestTabProps = {
   selectedRequest: HttpNetworkEntry | SSENetworkEntry;
 };
 
+const getRequestBodySectionTitle = (body: HttpRequestData) => {
+  const baseTitle = 'Request Body';
+
+  switch (body.data.type) {
+    case 'form-data':
+      return `${baseTitle} (FormData)`;
+
+    case 'binary':
+      return `${baseTitle} (Binary)`;
+
+    default:
+      return baseTitle;
+  }
+};
+
 export const RequestTab = ({ selectedRequest }: RequestTabProps) => {
-  const renderRequestBody = () => {
-    assert(!!selectedRequest.request.body, 'Request body is required');
-    const { type, data } = selectedRequest.request.body;
+  const queryParams = useMemo(() => {
+    const { searchParams } = new URL(selectedRequest.request.url);
 
-    if (type === 'application/json') {
-      try {
-        const jsonData = JSON.parse(data);
-        return (
-          <div className="bg-gray-800 p-3 rounded border border-gray-700">
-            <JsonTree data={jsonData} />
-          </div>
-        );
-      } catch {
-        // Fallback to pre tag if JSON parsing fails
-        return (
-          <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>
-        );
-      }
+    return Array.from(searchParams.entries()).map(([key, value]) => ({
+      key,
+      value,
+    }));
+  }, [selectedRequest.request.url]);
+
+  const requestBody = selectedRequest.request.body;
+  const hasQueryParams = queryParams.length > 0;
+
+  const renderQueryParams = () => {
+    if (!hasQueryParams) {
+      return null;
     }
 
-    // For non-JSON content types, use the existing pre tag
     return (
-      <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>
+      <Section title={`Query Parameters (${queryParams.length})`}>
+        <KeyValueGrid items={queryParams} />
+      </Section>
+    );
+  };
+
+  const renderRequestBody = () => {
+    if (!requestBody) {
+      return null;
+    }
+
+    return (
+      <Section title={getRequestBodySectionTitle(requestBody)}>
+        <RequestBody data={requestBody.data} />
+      </Section>
     );
   };
 
   return (
     <ScrollArea className="h-full w-full">
-      <div className="p-4">
-        {selectedRequest.request.body ? (
-          <div className="space-y-4">
-            <div>
-              <h4 className="text-sm font-medium text-gray-300 mb-2">
-                Request Body
-              </h4>
-              <div className="text-sm mb-2">
-                <span className="text-gray-400">Content-Type: </span>
-                <span className="text-blue-400">
-                  {selectedRequest.request.body.type}
-                </span>
-              </div>
-            </div>
-            <div>{renderRequestBody()}</div>
-          </div>
-        ) : (
+      <div className="p-4 space-y-4">
+        {renderQueryParams()}
+        {renderRequestBody()}
+        {!hasQueryParams && !requestBody && (
           <div className="text-sm text-gray-400">
-            {selectedRequest.request.method === 'GET'
-              ? "GET requests don't have a request body"
-              : 'No request body for this request'}
+            No request body or query params for this request
           </div>
         )}
       </div>