@rozenite/network-activity-plugin 1.0.0-alpha.5 → 1.0.0-alpha.6

package/src/ui/globals.css

@@ -0,0 +1,90 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+}
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 3.9%;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+    --radius: 0.5rem;
+    --sidebar-background: 0 0% 98%;
+    --sidebar-foreground: 240 5.3% 26.1%;
+    --sidebar-primary: 240 5.9% 10%;
+    --sidebar-primary-foreground: 0 0% 98%;
+    --sidebar-accent: 240 4.8% 95.9%;
+    --sidebar-accent-foreground: 240 5.9% 10%;
+    --sidebar-border: 220 13% 91%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
+  .dark {
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+    --sidebar-background: 240 5.9% 10%;
+    --sidebar-foreground: 240 4.8% 95.9%;
+    --sidebar-primary: 224.3 76.3% 48%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 240 3.7% 15.9%;
+    --sidebar-accent-foreground: 240 4.8% 95.9%;
+    --sidebar-border: 240 3.7% 15.9%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

package/src/ui/tabs/CookiesTab.tsx

@@ -0,0 +1,290 @@
+import { ScrollArea } from '../components/ScrollArea';
+import { Badge } from '../components/Badge';
+import { NetworkEntry } from '../types';
+
+type Cookie = {
+  name: string;
+  value: string;
+  domain?: string;
+  path?: string;
+  expires?: string;
+  maxAge?: string;
+  secure?: boolean;
+  httpOnly?: boolean;
+  sameSite?: string;
+};
+
+export type CookiesTabProps = {
+  selectedRequest: {
+    id: string;
+  };
+  networkEntries: Map<string, NetworkEntry>;
+};
+
+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: Record<string, string>
+): {
+  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,
+  networkEntries,
+}: 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>
+          );
+        }
+
+        // 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>
+            )}
+
+            {/* 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>
+        );
+      })()}
+    </ScrollArea>
+  );
+};

package/src/ui/tabs/HeadersTab.tsx

@@ -0,0 +1,117 @@
+import { ScrollArea } from '../components/ScrollArea';
+import { NetworkEntry } from '../types';
+
+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;
+};
+
+export const HeadersTab = ({
+  selectedRequest,
+  networkEntries,
+  getStatusColor,
+}: HeadersTabProps) => {
+  return (
+    <ScrollArea className="h-full min-h-0">
+      <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>
+
+        <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>
+
+        <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>
+      </div>
+    </ScrollArea>
+  );
+};

package/src/ui/tabs/RequestTab.tsx

@@ -0,0 +1,72 @@
+import { ScrollArea } from '../components/ScrollArea';
+import { JsonTree } from '../components/JsonTree';
+
+export type RequestTabProps = {
+  selectedRequest: {
+    method: string;
+    requestBody?: {
+      type: string;
+      data: string;
+    };
+  };
+};
+
+export const RequestTab = ({ selectedRequest }: RequestTabProps) => {
+  const renderRequestBody = () => {
+    if (!selectedRequest?.requestBody) return null;
+
+    const { type, data } = selectedRequest.requestBody;
+
+    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>
+        );
+      }
+    }
+
+    // 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>
+    );
+  };
+
+  return (
+    <ScrollArea className="h-full min-h-0 p-4">
+      {selectedRequest?.requestBody ? (
+        <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.requestBody.type}
+              </span>
+            </div>
+          </div>
+          <div>{renderRequestBody()}</div>
+        </div>
+      ) : (
+        <div className="text-sm text-gray-400">
+          {selectedRequest?.method === 'GET'
+            ? "GET requests don't have a request body"
+            : 'No request body for this request'}
+        </div>
+      )}
+    </ScrollArea>
+  );
+};