@rozenite/network-activity-plugin 1.0.0-alpha.1 → 1.0.0-alpha.10

package/src/ui/tabs/CookiesTab.tsx

@@ -0,0 +1,279 @@
+import { ScrollArea } from '../components/ScrollArea';
+import { Badge } from '../components/Badge';
+import { HttpHeaders } from '../../shared/client';
+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) => {
+  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>
+            );
+          }
+
+          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>
+          );
+        })()}
+      </div>
+    </ScrollArea>
+  );
+};

package/src/ui/tabs/HeadersTab.tsx

@@ -0,0 +1,110 @@
+import { useMemo } from 'react';
+import { ScrollArea } from '../components/ScrollArea';
+import { HttpNetworkEntry, SSENetworkEntry } from '../state/model';
+import { getStatusColor } from '../utils/getStatusColor';
+
+export type HeadersTabProps = {
+  selectedRequest: HttpNetworkEntry | SSENetworkEntry;
+};
+
+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 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>
+
+        <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>
+
+        <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>
+      </div>
+    </ScrollArea>
+  );
+};

package/src/ui/tabs/MessagesTab.tsx

@@ -0,0 +1,276 @@
+import { useState, useMemo } from 'react';
+import {
+  createColumnHelper,
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+} from '@tanstack/react-table';
+import { ScrollArea } from '../components/ScrollArea';
+import { JsonTree } from '../components/JsonTree';
+import { WebSocketMessageType } from '../../shared/websocket-events';
+import { WebSocketNetworkEntry } from '../state/model';
+import { useWebSocketMessages } from '../state/hooks';
+
+export type MessagesTabProps = {
+  selectedRequest: WebSocketNetworkEntry;
+};
+
+interface WebSocketMessageRow {
+  id: string;
+  direction: 'sent' | 'received';
+  data: string;
+  messageType: 'text' | 'binary';
+  timestamp: number;
+}
+
+const columnHelper = createColumnHelper<WebSocketMessageRow>();
+
+export const MessagesTab = ({ selectedRequest }: MessagesTabProps) => {
+  const websocketMessages = useWebSocketMessages(selectedRequest.id);
+  const [selectedMessageId, setSelectedMessageId] = useState<string | null>(
+    null
+  );
+
+  const selectedMessage = useMemo(() => {
+    if (!selectedMessageId) return null;
+    return (
+      websocketMessages.find((msg) => msg.id === selectedMessageId) || null
+    );
+  }, [selectedMessageId, websocketMessages]);
+
+  const formatTimestamp = (timestamp: number) => {
+    const date = new Date(timestamp);
+    const timeString = date.toLocaleTimeString('en-US', {
+      hour12: false,
+      hour: '2-digit',
+      minute: '2-digit',
+      second: '2-digit',
+    });
+    const milliseconds = date.getMilliseconds().toString().padStart(3, '0');
+    return `${timeString}.${milliseconds}`;
+  };
+
+  const formatData = (data: string, messageType: WebSocketMessageType) => {
+    if (messageType === 'binary') {
+      return 'Binary message';
+    }
+
+    if (typeof data === 'string') {
+      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 'Binary message';
+  };
+
+  const getMessageTypeColor = (type: 'sent' | 'received') => {
+    return type === 'sent' ? 'text-blue-400' : 'text-green-400';
+  };
+
+  const getMessageTypeIcon = (type: 'sent' | 'received') => {
+    return type === 'sent' ? '↑' : '↓';
+  };
+
+  const tableData = useMemo(() => {
+    return websocketMessages.map(
+      (message): WebSocketMessageRow => ({
+        id: message.id,
+        direction: message.direction,
+        data: message.data,
+        messageType: message.messageType,
+        timestamp: message.timestamp,
+      })
+    );
+  }, [websocketMessages]);
+
+  const formatPreviewData = (
+    data: string,
+    messageType: WebSocketMessageType
+  ) => {
+    if (messageType === 'binary') {
+      return <span className="text-gray-400">Binary message</span>;
+    }
+
+    return (
+      <span className="max-w-xs truncate text-gray-400">
+        {data.substring(0, 100) + (data.length > 100 ? '...' : '')}
+      </span>
+    );
+  };
+
+  const columns = [
+    columnHelper.accessor('direction', {
+      header: 'Type',
+      cell: ({ getValue }) => {
+        const direction = getValue();
+        return (
+          <span
+            className={`flex items-center gap-1 ${getMessageTypeColor(
+              direction
+            )}`}
+          >
+            <span className="text-xs">{getMessageTypeIcon(direction)}</span>
+            <span className="capitalize">{direction}</span>
+          </span>
+        );
+      },
+      size: 80,
+    }),
+    columnHelper.accessor('data', {
+      header: 'Data',
+      cell: ({ getValue, row }) => {
+        const data = getValue();
+        const messageType = row.original.messageType;
+        return formatPreviewData(data, messageType);
+      },
+      size: 300,
+    }),
+    columnHelper.accessor('timestamp', {
+      header: 'Timestamp',
+      cell: ({ getValue }) => (
+        <div className="text-gray-400">{formatTimestamp(getValue())}</div>
+      ),
+      size: 120,
+    }),
+  ];
+
+  const table = useReactTable({
+    data: tableData,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+  });
+
+  if (websocketMessages.length === 0) {
+    return (
+      <ScrollArea className="h-full min-h-0 p-4">
+        <div className="text-sm text-gray-400">
+          No WebSocket messages available for this connection. Messages will
+          appear here when the WebSocket connection sends or receives data.
+        </div>
+      </ScrollArea>
+    );
+  }
+
+  return (
+    <div className="h-full flex flex-col">
+      {/* Messages Table */}
+      <div className="flex-1 border border-gray-700 rounded overflow-hidden">
+        <div className="overflow-y-auto h-full">
+          <table className="w-full text-sm">
+            <thead className="bg-gray-800 border-b border-gray-700 sticky top-0 z-10">
+              {table.getHeaderGroups().map((headerGroup) => (
+                <tr key={headerGroup.id}>
+                  {headerGroup.headers.map((header) => (
+                    <th
+                      key={header.id}
+                      className="text-left p-2 font-medium text-gray-300"
+                      style={{ width: header.getSize() }}
+                    >
+                      <div className="flex items-center gap-1">
+                        {header.isPlaceholder
+                          ? null
+                          : flexRender(
+                              header.column.columnDef.header,
+                              header.getContext()
+                            )}
+                      </div>
+                    </th>
+                  ))}
+                </tr>
+              ))}
+            </thead>
+            <tbody>
+              {table.getRowModel().rows.map((row) => (
+                <tr
+                  key={row.id}
+                  className={`border-b border-gray-700 hover:bg-gray-800 cursor-pointer ${
+                    selectedMessageId === row.original.id ? 'bg-gray-800' : ''
+                  }`}
+                  onClick={() => setSelectedMessageId(row.original.id)}
+                >
+                  {row.getVisibleCells().map((cell) => (
+                    <td
+                      key={cell.id}
+                      className="p-2"
+                      style={{ width: cell.column.getSize() }}
+                    >
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext()
+                      )}
+                    </td>
+                  ))}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      {/* Message Details Panel */}
+      {selectedMessage && (
+        <div className="border-t border-gray-700 bg-gray-800">
+          <div className="p-4">
+            <div className="flex items-center justify-between mb-3">
+              <h4 className="text-sm font-medium text-gray-300">
+                Message Details
+              </h4>
+              <button
+                onClick={() => setSelectedMessageId(null)}
+                className="text-gray-400 hover:text-blue-400 text-sm"
+              >
+                Close
+              </button>
+            </div>
+            <div className="space-y-3">
+              <div className="grid grid-cols-2 gap-4 text-sm">
+                <div>
+                  <span className="text-gray-400">Type: </span>
+                  <span
+                    className={getMessageTypeColor(selectedMessage.direction)}
+                  >
+                    {selectedMessage.direction}
+                  </span>
+                </div>
+                <div>
+                  <span className="text-gray-400">Message Type: </span>
+                  <span className="text-blue-400 capitalize">
+                    {selectedMessage.messageType}
+                  </span>
+                </div>
+                <div>
+                  <span className="text-gray-400">Timestamp: </span>
+                  <span className="text-gray-300">
+                    {formatTimestamp(selectedMessage.timestamp)}
+                  </span>
+                </div>
+              </div>
+              <div>
+                <span className="text-gray-400 text-sm">Content:</span>
+                <div className="mt-2 max-h-96 overflow-y-auto">
+                  {formatData(
+                    selectedMessage.data,
+                    selectedMessage.messageType
+                  )}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};