@rozenite/network-activity-plugin 1.0.0-alpha.11 → 1.0.0-alpha.12

package/src/ui/tabs/CookiesTab.tsx

@@ -1,278 +1,79 @@
+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

@@ -5,11 +5,28 @@ import { KeyValueGrid, KeyValueItem } from '../components/KeyValueGrid';
 import { HttpNetworkEntry, SSENetworkEntry } from '../state/model';
 import { getStatusColor } from '../utils/getStatusColor';
 import { CopyAsCurlButton } from '../components/CopyAsCurlButton';
+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 requestBody = selectedRequest.request.body;
 
@@ -42,27 +59,15 @@ export const HeadersTab = ({ selectedRequest }: HeadersTabProps) => {
     [selectedRequest]
   );
 
-  const responseHeadersItems: KeyValueItem[] = useMemo(() => {
-    const headers = selectedRequest.response?.headers;
-
-    if (!headers) return [];
-
-    return Object.entries(headers).map(([key, value]) => ({
-      key: key.toLowerCase(),
-      value,
-    }));
-  }, [selectedRequest.response?.headers]);
-
-  const requestHeadersItems: KeyValueItem[] = useMemo(() => {
-    const headers = selectedRequest.request.headers;
-
-    if (!headers) return [];
+  const responseHeadersItems = useMemo(
+    () => getHeadersItems(selectedRequest.response?.headers),
+    [selectedRequest]
+  );
 
-    return Object.entries(headers).map(([key, value]) => ({
-      key: key.toLowerCase(),
-      value,
-    }));
-  }, [selectedRequest.request.headers]);
+  const requestHeadersItems = useMemo(
+    () => getHeadersItems(selectedRequest.request.headers),
+    [selectedRequest]
+  );
 
   const isCopyAsCurlEnabled =
     selectedRequest.request.body?.data.type !== 'binary';
@@ -73,6 +78,7 @@ export const HeadersTab = ({ selectedRequest }: HeadersTabProps) => {
         {isCopyAsCurlEnabled && (
           <CopyAsCurlButton selectedRequest={selectedRequest} />
         )}
+
         <Section title="General">
           <KeyValueGrid items={generalItems} />
         </Section>

package/src/ui/tabs/RequestTab.tsx

@@ -2,78 +2,93 @@ import * as React from 'react';
 import { ScrollArea } from '../components/ScrollArea';
 import { JsonTree } from '../components/JsonTree';
 import { HttpNetworkEntry, SSENetworkEntry } from '../state/model';
-import { assert } from '../utils/assert';
+import { KeyValueGrid } from '../components/KeyValueGrid';
+import { Section } from '../components/Section';
+import { CodeBlock } from '../components/CodeBlock';
+import { ReactNode, useMemo } from 'react';
 
 export type RequestTabProps = {
   selectedRequest: HttpNetworkEntry | SSENetworkEntry;
 };
 
-const requestDataContainerClasses =
-  'bg-gray-800 p-3 rounded border border-gray-700';
-
 export const RequestTab = ({ selectedRequest }: RequestTabProps) => {
+  const queryParams = useMemo(() => {
+    const { searchParams } = new URL(selectedRequest.request.url);
+
+    return Array.from(searchParams.entries());
+  }, [selectedRequest.request.url]);
+
   const requestBody = selectedRequest.request.body;
+  const hasQueryParams = queryParams.length > 0;
+
+  const renderQueryParams = () => {
+    if (hasQueryParams) {
+      return (
+        <Section title={`Query Parameters (${queryParams.length})`}>
+          <KeyValueGrid
+            items={queryParams.map(([key, value]) => ({
+              key,
+              value,
+            }))}
+          />
+        </Section>
+      );
+    }
+
+    return null;
+  };
 
   const renderRequestBody = () => {
-    assert(!!requestBody, 'Request body is required');
+    if (!requestBody) {
+      return null;
+    }
+
+    const { type, data } = requestBody;
+    const { type: dataType, value } = data;
 
-    const { type, value } = requestBody.data;
+    let bodyContent: ReactNode = null;
 
-    if (type === 'text') {
+    if (dataType === 'text') {
       try {
         const jsonData = JSON.parse(value);
-        return (
-          <div className={requestDataContainerClasses}>
-            <JsonTree data={jsonData} />
-          </div>
-        );
+
+        bodyContent = <JsonTree data={jsonData} />;
       } catch {
-        // Fallback to pre tag if JSON parsing fails
-        return (
-          <pre
-            className={`text-sm font-mono text-gray-300 whitespace-pre-wrap overflow-x-auto ${requestDataContainerClasses}`}
-          >
-            {value}
-          </pre>
-        );
+        bodyContent = value;
       }
     }
 
     // Show JSON tree as a temporary solution for form-data and binary types
-    if (type === 'form-data' || type === 'binary') {
-      return (
-        <div className={requestDataContainerClasses}>
-          <JsonTree data={value} />
-        </div>
-      );
+    if (dataType === 'form-data' || dataType === 'binary') {
+      bodyContent = <JsonTree data={value} />
     }
 
-    return null;
+    return (
+      <Section title="Request Body">
+        <div className="space-y-4">
+          <KeyValueGrid
+            items={[
+              {
+                key: 'Content-Type',
+                value: type,
+                valueClassName: 'text-blue-400',
+              },
+            ]}
+          />
+          {bodyContent && <CodeBlock>{bodyContent}</CodeBlock>}
+        </div>
+      </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>