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

package/src/ui/tabs/CookiesTab.tsx

@@ -1,292 +1,75 @@
+import React from 'react';
 import { ScrollArea } from '../components/ScrollArea';
-import { Badge } from '../components/Badge';
-import { NetworkEntry } from '../types';
-import { HttpHeaders } from '../../shared/client';
-
-type Cookie = {
-  name: string;
-  value: string;
-  domain?: string;
-  path?: string;
-  expires?: string;
-  maxAge?: string;
-  secure?: boolean;
-  httpOnly?: boolean;
-  sameSite?: string;
-};
+import { Section } from '../components/Section';
+import { CookieCard } from '../components/CookieCard';
+import {
+  parseRequestCookiesFromHeaders,
+  parseResponseCookiesFromHeaders,
+} from '../../utils/cookieParser';
+import { HttpNetworkEntry, SSENetworkEntry } from '../state/model';
 
 export type CookiesTabProps = {
-  selectedRequest: {
-    id: string;
-  };
-  networkEntries: Map<string, NetworkEntry>;
+  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>
+    );
+  }
 
-export const CookiesTab = ({
-  selectedRequest,
-  networkEntries,
-}: CookiesTabProps) => {
   return (
     <ScrollArea className="h-full w-full">
       <div className="p-4">
-        {(() => {
-        const entry = networkEntries.get(selectedRequest.id);
-        if (!entry) {
-          return (
-            <div className="text-sm text-gray-400">
-              No request data available
-            </div>
-          );
-        }
-
-        // Extract cookies from request and response headers separately
-        const requestHeaders = entry.request?.headers || {};
-        const responseHeaders = entry.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>
-          );
-        }
-
-        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 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>
-            )}
-
-            {/* 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>
+            </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>
-            )}
-          </div>
-        );
-      })()}
+            </Section>
+          )}
+        </div>
       </div>
     </ScrollArea>
   );

package/src/ui/tabs/HeadersTab.tsx

@@ -1,116 +1,98 @@
+import { useMemo } from 'react';
 import { ScrollArea } from '../components/ScrollArea';
-import { NetworkEntry } from '../types';
+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: {
-    id: string;
-    domain: string;
-    path: string;
-    method: string;
-    status: number;
-    requestBody?: {
-      type: string;
-      data: string;
-    };
-  };
-  networkEntries: Map<string, NetworkEntry>;
-  getStatusColor: (status: number) => string;
+  selectedRequest: HttpNetworkEntry | SSENetworkEntry;
 };
 
-export const HeadersTab = ({
-  selectedRequest,
-  networkEntries,
-  getStatusColor,
-}: HeadersTabProps) => {
+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;
+
+  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">
-                {selectedRequest.domain}
-                {selectedRequest.path}
-              </span>
-            </div>
-            <div className="flex">
-              <span className="w-32 text-gray-400">Request Method:</span>
-              <span>{selectedRequest.method}</span>
-            </div>
-            <div className="flex">
-              <span className="w-32 text-gray-400">Status Code:</span>
-              <span className={getStatusColor(selectedRequest.status)}>
-                {selectedRequest.status}
-              </span>
-            </div>
-            {selectedRequest.requestBody && (
-              <div className="flex">
-                <span className="w-32 text-gray-400">Content-Type:</span>
-                <span className="text-blue-400">
-                  {selectedRequest.requestBody.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 entry = networkEntries.get(selectedRequest.id);
-              const responseHeaders = entry?.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 entry = networkEntries.get(selectedRequest.id);
-              const requestHeaders = entry?.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>
   );