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

package/src/ui/tabs/CookiesTab.tsx

@@ -1,6 +1,7 @@
 import { ScrollArea } from '../components/ScrollArea';
 import { Badge } from '../components/Badge';
-import { NetworkEntry } from '../types';
+import { HttpHeaders } from '../../shared/client';
+import { HttpNetworkEntry, SSENetworkEntry } from '../state/model';
 
 type Cookie = {
   name: string;
@@ -15,10 +16,7 @@ type Cookie = {
 };
 
 export type CookiesTabProps = {
-  selectedRequest: {
-    id: string;
-  };
-  networkEntries: Map<string, NetworkEntry>;
+  selectedRequest: HttpNetworkEntry | SSENetworkEntry;
 };
 
 const parseCookieString = (cookieString: string): Cookie[] => {
@@ -71,7 +69,7 @@ const parseCookieString = (cookieString: string): Cookie[] => {
 };
 
 const extractCookiesFromHeaders = (
-  headers: Record<string, string>
+  headers: HttpHeaders
 ): {
   requestCookies: Cookie[];
   responseCookies: Cookie[];
@@ -95,196 +93,187 @@ const extractCookiesFromHeaders = (
   return { requestCookies, responseCookies };
 };
 
-export const CookiesTab = ({
-  selectedRequest,
-  networkEntries,
-}: CookiesTabProps) => {
+export const CookiesTab = ({ selectedRequest }: CookiesTabProps) => {
   return (
-    <ScrollArea className="h-full min-h-0 p-4">
-      {(() => {
-        const entry = networkEntries.get(selectedRequest.id);
-        if (!entry) {
-          return (
-            <div className="text-sm text-gray-400">
-              No request data available
-            </div>
-          );
-        }
+    <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 || {};
 
-        // 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 { requestCookies } = extractCookiesFromHeaders(requestHeaders);
-        const { responseCookies } = extractCookiesFromHeaders(responseHeaders);
+          const hasRequestCookies = requestCookies.length > 0;
+          const hasResponseCookies = responseCookies.length > 0;
 
-        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>
+            );
+          }
 
-        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>
+            <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.httpOnly && (
-                            <Badge
-                              variant="outline"
-                              className="text-xs text-purple-400 border-purple-400"
-                            >
-                              HttpOnly
-                            </Badge>
+                          {cookie.sameSite && (
+                            <div>
+                              <span className="font-medium">SameSite:</span>{' '}
+                              {cookie.sameSite}
+                            </div>
                           )}
                         </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>
-            )}
+              )}
 
-            {/* 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>
+              {/* 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.httpOnly && (
-                            <Badge
-                              variant="outline"
-                              className="text-xs text-purple-400 border-purple-400"
-                            >
-                              HttpOnly
-                            </Badge>
+                          {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 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>
-            )}
-          </div>
-        );
-      })()}
+              )}
+            </div>
+          );
+        })()}
+      </div>
     </ScrollArea>
   );
 };

package/src/ui/tabs/HeadersTab.tsx

@@ -1,29 +1,21 @@
+import { useMemo } from 'react';
 import { ScrollArea } from '../components/ScrollArea';
-import { NetworkEntry } from '../types';
+import { HttpNetworkEntry, SSENetworkEntry } from '../state/model';
+import { getStatusColor } from '../utils/getStatusColor';
 
 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) => {
+export const HeadersTab = ({ selectedRequest }: HeadersTabProps) => {
+  const url = useMemo(() => {
+    const { hostname, port, pathname } = new URL(selectedRequest.request.url);
+
+    return `${hostname}${port ? `:${port}` : ''}${pathname}`;
+  }, [selectedRequest.request.url]);
+
   return (
-    <ScrollArea className="h-full min-h-0">
+    <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>
@@ -31,25 +23,28 @@ export const HeadersTab = ({
             <div className="flex">
               <span className="w-32 text-gray-400">Request URL:</span>
               <span className="text-blue-400">
-                {selectedRequest.domain}
-                {selectedRequest.path}
+                {url}
               </span>
             </div>
             <div className="flex">
               <span className="w-32 text-gray-400">Request Method:</span>
-              <span>{selectedRequest.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.status)}>
-                {selectedRequest.status}
+              <span
+                className={getStatusColor(
+                  selectedRequest.response?.status ?? 0
+                )}
+              >
+                {selectedRequest.response?.status ?? 'Pending'}
               </span>
             </div>
-            {selectedRequest.requestBody && (
+            {selectedRequest.request.body && (
               <div className="flex">
                 <span className="w-32 text-gray-400">Content-Type:</span>
                 <span className="text-blue-400">
-                  {selectedRequest.requestBody.type}
+                  {selectedRequest.request.body.type}
                 </span>
               </div>
             )}
@@ -62,8 +57,7 @@ export const HeadersTab = ({
           </h4>
           <div className="space-y-1 text-sm font-mono">
             {(() => {
-              const entry = networkEntries.get(selectedRequest.id);
-              const responseHeaders = entry?.response?.headers;
+              const responseHeaders = selectedRequest.response?.headers;
               if (responseHeaders && Object.keys(responseHeaders).length > 0) {
                 return Object.entries(responseHeaders).map(([key, value]) => (
                   <div key={key} className="flex">
@@ -90,8 +84,7 @@ export const HeadersTab = ({
           </h4>
           <div className="space-y-1 text-sm font-mono">
             {(() => {
-              const entry = networkEntries.get(selectedRequest.id);
-              const requestHeaders = entry?.request?.headers;
+              const requestHeaders = selectedRequest.request.headers;
               if (requestHeaders && Object.keys(requestHeaders).length > 0) {
                 return Object.entries(requestHeaders).map(([key, value]) => (
                   <div key={key} className="flex">