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

package/src/ui/tabs/SSEMessagesTab.tsx

@@ -0,0 +1,224 @@
+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 { SSENetworkEntry } from '../state/model';
+
+export type SSEMessagesTabProps = {
+  selectedRequest: SSENetworkEntry;
+};
+
+interface SSEMessageRow {
+  id: string;
+  type: string;
+  data: string;
+  timestamp: number;
+}
+
+const columnHelper = createColumnHelper<SSEMessageRow>();
+
+const formatPreviewData = (data: string) => {
+  return (
+    <span className="max-w-xs truncate text-gray-400">
+      {data.substring(0, 100) + (data.length > 100 ? '...' : '')}
+    </span>
+  );
+};
+
+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 columns = [
+  columnHelper.accessor('timestamp', {
+    header: 'Timestamp',
+    cell: ({ getValue }) => (
+      <div className="text-gray-400">{formatTimestamp(getValue())}</div>
+    ),
+    size: 120,
+  }),
+  columnHelper.accessor('type', {
+    header: 'Type',
+    cell: ({ getValue }) => (
+      <div className="text-purple-400 font-medium">{getValue()}</div>
+    ),
+    size: 100,
+  }),
+  columnHelper.accessor('data', {
+    header: 'Data',
+    cell: ({ getValue }) => {
+      const data = getValue();
+      return formatPreviewData(data);
+    },
+    size: 300,
+  }),
+];
+
+export const SSEMessagesTab = ({ selectedRequest }: SSEMessagesTabProps) => {
+  // Capture the selected message, so when it gets removed (message limit), it's still displayed
+  const [selectedMessage, setSelectedMessage] = useState<SSEMessageRow | null>(
+    null
+  );
+
+  const formatData = (data: string) => {
+    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 'Invalid data';
+  };
+
+  const tableData = useMemo(() => {
+    return selectedRequest.messages.map(
+      (message): SSEMessageRow => ({
+        id: message.id,
+        type: message.type,
+        data: message.data,
+        timestamp: message.timestamp,
+      })
+    );
+  }, [selectedRequest.messages]);
+
+  const table = useReactTable({
+    data: tableData,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+  });
+
+  if (selectedRequest.messages.length === 0) {
+    return (
+      <ScrollArea className="h-full min-h-0 p-4">
+        <div className="text-sm text-gray-400">
+          No SSE messages available for this connection. Messages will appear
+          here when the SSE connection 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 ${
+                    selectedMessage?.id === row.original.id ? 'bg-gray-800' : ''
+                  }`}
+                  onClick={() => setSelectedMessage(row.original)}
+                >
+                  {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={() => setSelectedMessage(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="text-purple-400">
+                    {selectedMessage.type}
+                  </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)}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};

package/src/ui/tabs/TimingTab.tsx

@@ -1,32 +1,17 @@
 import { ScrollArea } from '../components/ScrollArea';
-import { NetworkRequest } from '../components/RequestList';
-import { NetworkEntry } from '../types';
+import { HttpNetworkEntry } from '../state/model';
 
 export type TimingTabProps = {
-  selectedRequest: NetworkRequest | null;
-  networkEntries: Map<string, NetworkEntry>;
+  selectedRequest: HttpNetworkEntry;
 };
 
-export const TimingTab = ({
-  selectedRequest,
-  networkEntries,
-}: TimingTabProps) => {
-  const networkEntry = selectedRequest
-    ? networkEntries.get(selectedRequest.id)
+export const TimingTab = ({ selectedRequest }: TimingTabProps) => {
+  const startTime = selectedRequest.timestamp || 0;
+  const endTime = selectedRequest.duration
+    ? selectedRequest.timestamp + selectedRequest.duration
     : null;
-
-  if (!selectedRequest || !networkEntry) {
-    return (
-      <div className="flex items-center justify-center h-full text-gray-400">
-        Select a request to view timing information
-      </div>
-    );
-  }
-
-  const startTime = networkEntry.startTime || 0;
-  const endTime = networkEntry.endTime || 0;
-  const ttfb = networkEntry.ttfb || 0;
-  const duration = networkEntry.duration || 0;
+  const ttfb = selectedRequest.ttfb || 0;
+  const duration = selectedRequest.duration || 0;
 
   const formatTime = (time: number): string => {
     if (time < 1) {
@@ -43,31 +28,33 @@ export const TimingTab = ({
     <ScrollArea className="h-full w-full">
       <div className="p-4">
         <div className="space-y-4">
-        <div className="space-y-2">
-          <div className="flex justify-between text-sm">
-            <span className="text-gray-400">Start Time</span>
-            <span className="text-gray-300">{formatTimestamp(startTime)}</span>
-          </div>
-          <div className="flex justify-between text-sm">
-            <span className="text-gray-400">Time To First Byte (TTFB)</span>
-            <span className="text-gray-300">{formatTime(ttfb)}</span>
+          <div className="space-y-2">
+            <div className="flex justify-between text-sm">
+              <span className="text-gray-400">Start Time</span>
+              <span className="text-gray-300">
+                {formatTimestamp(startTime)}
+              </span>
+            </div>
+            <div className="flex justify-between text-sm">
+              <span className="text-gray-400">Time To First Byte (TTFB)</span>
+              <span className="text-gray-300">{formatTime(ttfb)}</span>
+            </div>
+            <div className="flex justify-between text-sm">
+              <span className="text-gray-400">End Time</span>
+              <span className="text-gray-300">
+                {endTime ? formatTimestamp(endTime) : 'Pending'}
+              </span>
+            </div>
           </div>
-          <div className="flex justify-between text-sm">
-            <span className="text-gray-400">End Time</span>
-            <span className="text-gray-300">
-              {endTime ? formatTimestamp(endTime) : 'Pending'}
-            </span>
-          </div>
-        </div>
 
-        <div className="border-t border-gray-700 pt-4">
-          <div className="flex justify-between text-sm font-medium">
-            <span className="text-gray-300">Total Duration</span>
-            <span className="text-gray-100">{formatTime(duration)}</span>
+          <div className="border-t border-gray-700 pt-4">
+            <div className="flex justify-between text-sm font-medium">
+              <span className="text-gray-300">Total Duration</span>
+              <span className="text-gray-100">{formatTime(duration)}</span>
+            </div>
           </div>
         </div>
       </div>
-      </div>
     </ScrollArea>
   );
 };

package/src/ui/types.ts

@@ -12,7 +12,10 @@ export type NetworkEntry = {
   url: string;
   method: string;
   headers: HttpHeaders;
-  postData?: string;
+  body?: {
+    type: string;
+    data: string;
+  };
   status: 'pending' | 'loading' | 'finished' | 'failed';
   startTime: number;
   endTime?: number;

package/src/ui/utils/assert.ts

@@ -0,0 +1,5 @@
+export function assert(condition: boolean, message: string): asserts condition {
+  if (!condition) {
+    throw new Error(message);
+  }
+}

package/src/ui/utils/checkRequestBodyBinary.ts

@@ -0,0 +1,7 @@
+import { NetworkEntry } from '../state/model';
+
+export const checkRequestBodyBinary = (request: NetworkEntry) => {
+  return (
+    request.type === 'http' && request.request.body?.data.type === 'binary'
+  );
+};

package/src/ui/utils/copyToClipboard.ts

@@ -0,0 +1,3 @@
+export async function copyToClipboard(text: string) {
+  return navigator.clipboard.writeText(text);
+}

package/src/ui/utils/escapeShellArg.ts

@@ -0,0 +1,12 @@
+// Escapes special characters in shell arguments
+export function escapeShellArg(arg: string): string {
+  if (!arg) return "''";
+
+  // If the argument contains no special characters, return as is
+  if (/^[a-zA-Z0-9_./:-]+$/.test(arg)) {
+    return arg;
+  }
+
+  // Replace single quotes with '\'' and wrap in single quotes
+  return `'${arg.replace(/'/g, "'\"'\"'")}'`;
+}

package/src/ui/utils/generateCurlCommand.ts

@@ -0,0 +1,83 @@
+import { HttpHeaders, RequestPostData } from '../../shared/client';
+import { HttpNetworkEntry, SSENetworkEntry } from '../state/model';
+import { escapeShellArg } from './escapeShellArg';
+
+const BASE_TAB_INDENT = 2; // Number of spaces for indentation
+
+function stringifyData(postData: unknown): string {
+  try {
+    const jsonString = JSON.stringify(
+      typeof postData === 'string' ? JSON.parse(postData) : postData,
+      null,
+      BASE_TAB_INDENT * 4
+    );
+
+    return jsonString.replace(/([}\]])$/, '$1'.padStart(BASE_TAB_INDENT * 2));
+  } catch {
+    return String(postData);
+  }
+}
+
+// Adds a curl parameter with proper indentation
+function addCurlParam(curlParts: string[], flag: string, value: string): void {
+  curlParts.push(`${flag.padStart(BASE_TAB_INDENT + flag.length)} ${value}`);
+}
+
+function addHttpMethodToCurl(curlParts: string[], method: string): void {
+  if (method && hasRequestBody(method)) {
+    addCurlParam(curlParts, '-X', method.toUpperCase());
+  }
+}
+
+function addHeadersToCurl(curlParts: string[], headers: HttpHeaders): void {
+  Object.entries(headers).forEach(([key, value]) => {
+    addCurlParam(curlParts, '-H', escapeShellArg(`${key}: ${value}`));
+  });
+}
+
+function hasRequestBody(method: string): boolean {
+  const methodsWithBody = ['POST', 'PUT', 'PATCH', 'DELETE'];
+
+  return methodsWithBody.includes(method.toUpperCase());
+}
+
+function addBodyToCurl(curlParts: string[], postData: RequestPostData): void {
+  if (!postData) {
+    return;
+  }
+
+  const { type, value } = postData;
+
+  if (type === 'form-data') {
+    const formParts = Object.entries(value).map(
+      ([key, value]) => `${key}=${stringifyData(value)}`
+    );
+
+    formParts.forEach((part) =>
+      addCurlParam(curlParts, '--form', escapeShellArg(part))
+    );
+
+    return;
+  }
+
+  addCurlParam(curlParts, '--data-raw', escapeShellArg(stringifyData(value)));
+}
+
+export function generateCurlCommand(
+  request: HttpNetworkEntry | SSENetworkEntry
+) {
+  const { method, url, headers = {}, body } = request.request;
+
+  const postData = body?.data;
+
+  const curlParts: string[] = [`curl ${escapeShellArg(url)}`];
+
+  addHttpMethodToCurl(curlParts, method);
+  addHeadersToCurl(curlParts, headers);
+
+  if (postData && hasRequestBody(method)) {
+    addBodyToCurl(curlParts, postData);
+  }
+
+  return curlParts.join(' \\\n');
+}

package/src/ui/utils/generateFetchCall.ts

@@ -0,0 +1,64 @@
+import { generateMultipartBody } from './generateMultipartBody';
+import {
+  HttpNetworkEntry,
+  HttpRequestData,
+  SSENetworkEntry,
+} from '../state/model';
+import { getHttpHeaderValueAsString } from '../../utils/getHttpHeaderValueAsString';
+import { HttpHeaders, XHRHeaders } from '../../shared/client';
+
+const processHeaders = (requestHeaders: HttpHeaders | undefined) => {
+  const headers: XHRHeaders = {};
+
+  if (!requestHeaders) {
+    return headers;
+  }
+
+  Object.entries(requestHeaders).forEach(([name, value]) => {
+    // Filter out HTTP/2 pseudo-headers
+    if (!name.startsWith(':')) {
+      headers[name] = getHttpHeaderValueAsString(value);
+    }
+  });
+
+  return headers;
+};
+
+const processRequestBody = (body: HttpRequestData, headers: XHRHeaders) => {
+  const { type, value } = body.data;
+
+  switch (type) {
+    case 'text':
+      return value;
+
+    case 'form-data': {
+      const { body, contentType } = generateMultipartBody(value);
+
+      headers['Content-Type'] = contentType;
+
+      return body;
+    }
+
+    default:
+      return undefined;
+  }
+};
+
+export const generateFetchCall = (
+  request: HttpNetworkEntry | SSENetworkEntry
+) => {
+  const { url, headers: requestHeaders, method, body } = request.request;
+
+  const headers = processHeaders(requestHeaders);
+  const requestBody = body ? processRequestBody(body, headers) : undefined;
+
+  const fetchOptions: RequestInit = {
+    headers: Object.keys(headers).length ? headers : undefined,
+    body: requestBody,
+    method,
+  };
+
+  const options = JSON.stringify(fetchOptions, null, 2);
+
+  return `fetch(${JSON.stringify(url)}, ${options});`;
+};

package/src/ui/utils/generateMultipartBody.ts

@@ -0,0 +1,19 @@
+export const generateMultipartBody = (formData: Record<string, unknown>) => {
+  const boundary = 'FormBoundary' + Math.random().toString(36).substr(2, 16);
+
+  const parts: string[] = [];
+
+  Object.entries(formData).forEach(([key, value]) => {
+    parts.push(`--${boundary}`);
+    parts.push(`Content-Disposition: form-data; name="${key}"`);
+    parts.push('');
+    parts.push(String(value));
+  });
+
+  parts.push(`--${boundary}--`);
+
+  return {
+    body: parts.join('\r\n'),
+    contentType: `multipart/form-data; boundary=${boundary}`,
+  };
+};

package/src/ui/utils/getId.ts

@@ -0,0 +1,10 @@
+const idMap = new Map<string, number>();
+
+export const getId = (namespace: string) => {
+  if (!idMap.has(namespace)) {
+    idMap.set(namespace, 0);
+  }
+  const id = idMap.get(namespace) ?? 0;
+  idMap.set(namespace, id + 1);
+  return `${namespace}-${id}`;
+};

package/src/ui/utils/getStatusColor.ts

@@ -0,0 +1,15 @@
+export const getStatusColor = (status: number | string): string => {
+  if (typeof status === 'string') {
+    // Handle WebSocket statuses
+    if (status === 'open') return 'text-green-400';
+    if (status === 'connecting') return 'text-yellow-400';
+    if (status === 'closed' || status === 'error') return 'text-red-400';
+    return 'text-gray-400';
+  }
+
+  // Handle HTTP status codes
+  if (status >= 200 && status < 300) return 'text-green-400';
+  if (status >= 300 && status < 400) return 'text-yellow-400';
+  if (status >= 400) return 'text-red-400';
+  return 'text-gray-400';
+};