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

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>
+  );
+};

package/src/ui/tabs/RequestTab.tsx

@@ -1,21 +1,16 @@
 import { ScrollArea } from '../components/ScrollArea';
 import { JsonTree } from '../components/JsonTree';
+import { HttpNetworkEntry, SSENetworkEntry } from '../state/model';
+import { assert } from '../utils/assert';
 
 export type RequestTabProps = {
-  selectedRequest: {
-    method: string;
-    requestBody?: {
-      type: string;
-      data: string;
-    };
-  };
+  selectedRequest: HttpNetworkEntry | SSENetworkEntry;
 };
 
 export const RequestTab = ({ selectedRequest }: RequestTabProps) => {
   const renderRequestBody = () => {
-    if (!selectedRequest?.requestBody) return null;
-
-    const { type, data } = selectedRequest.requestBody;
+    assert(!!selectedRequest.request.body, 'Request body is required');
+    const { type, data } = selectedRequest.request.body;
 
     if (type === 'application/json') {
       try {
@@ -46,7 +41,7 @@ export const RequestTab = ({ selectedRequest }: RequestTabProps) => {
   return (
     <ScrollArea className="h-full w-full">
       <div className="p-4">
-        {selectedRequest?.requestBody ? (
+        {selectedRequest.request.body ? (
           <div className="space-y-4">
             <div>
               <h4 className="text-sm font-medium text-gray-300 mb-2">
@@ -55,7 +50,7 @@ export const RequestTab = ({ selectedRequest }: RequestTabProps) => {
               <div className="text-sm mb-2">
                 <span className="text-gray-400">Content-Type: </span>
                 <span className="text-blue-400">
-                  {selectedRequest.requestBody.type}
+                  {selectedRequest.request.body.type}
                 </span>
               </div>
             </div>
@@ -63,7 +58,7 @@ export const RequestTab = ({ selectedRequest }: RequestTabProps) => {
           </div>
         ) : (
           <div className="text-sm text-gray-400">
-            {selectedRequest?.method === 'GET'
+            {selectedRequest.request.method === 'GET'
               ? "GET requests don't have a request body"
               : 'No request body for this request'}
           </div>

package/src/ui/tabs/ResponseTab.tsx

@@ -1,16 +1,10 @@
 import { useEffect, useRef } from 'react';
 import { ScrollArea } from '../components/ScrollArea';
 import { JsonTree } from '../components/JsonTree';
+import { HttpNetworkEntry } from '../state/model';
 
 export type ResponseTabProps = {
-  selectedRequest: {
-    id: string;
-    type: string;
-    responseBody?: {
-      type: string;
-      data: string | null;
-    };
-  };
+  selectedRequest: HttpNetworkEntry;
   onRequestResponseBody: (requestId: string) => void;
 };
 
@@ -31,7 +25,9 @@ export const ResponseTab = ({
   }, [selectedRequest.id]);
 
   const renderResponseBody = () => {
-    if (!selectedRequest?.responseBody) {
+    const responseBody = selectedRequest.response?.body;
+
+    if (!responseBody) {
       return (
         <div className="text-sm text-gray-400">
           No response body available for this request
@@ -39,7 +35,7 @@ export const ResponseTab = ({
       );
     }
 
-    const { type, data } = selectedRequest.responseBody;
+    const { type, data } = responseBody;
 
     // Handle null data
     if (data === null) {

package/src/ui/tabs/SSEMessagesTab.tsx

@@ -0,0 +1,213 @@
+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;
+  data: string;
+  timestamp: number;
+}
+
+const columnHelper = createColumnHelper<SSEMessageRow>();
+
+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 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) => {
+    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,
+        data: message.data,
+        timestamp: message.timestamp,
+      })
+    );
+  }, [selectedRequest.messages]);
+
+  const formatPreviewData = (data: string) => {
+    return (
+      <span className="max-w-xs truncate text-gray-400">
+        {data.substring(0, 100) + (data.length > 100 ? '...' : '')}
+      </span>
+    );
+  };
+
+  const columns = [
+    columnHelper.accessor('data', {
+      header: 'Data',
+      cell: ({ getValue }) => {
+        const data = getValue();
+        return formatPreviewData(data);
+      },
+      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 (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">SSE</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;