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

package/src/ui/tabs/RequestTab.tsx

@@ -0,0 +1,69 @@
+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: HttpNetworkEntry | SSENetworkEntry;
+};
+
+export const RequestTab = ({ selectedRequest }: RequestTabProps) => {
+  const renderRequestBody = () => {
+    assert(!!selectedRequest.request.body, 'Request body is required');
+    const { type, data } = selectedRequest.request.body;
+
+    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 w-full">
+      <div className="p-4">
+        {selectedRequest.request.body ? (
+          <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.request.body.type}
+                </span>
+              </div>
+            </div>
+            <div>{renderRequestBody()}</div>
+          </div>
+        ) : (
+          <div className="text-sm text-gray-400">
+            {selectedRequest.request.method === 'GET'
+              ? "GET requests don't have a request body"
+              : 'No request body for this request'}
+          </div>
+        )}
+      </div>
+    </ScrollArea>
+  );
+};

package/src/ui/tabs/ResponseTab.tsx

@@ -0,0 +1,138 @@
+import { useEffect, useRef } from 'react';
+import { ScrollArea } from '../components/ScrollArea';
+import { JsonTree } from '../components/JsonTree';
+import { HttpNetworkEntry } from '../state/model';
+
+export type ResponseTabProps = {
+  selectedRequest: HttpNetworkEntry;
+  onRequestResponseBody: (requestId: string) => void;
+};
+
+export const ResponseTab = ({
+  selectedRequest,
+  onRequestResponseBody,
+}: ResponseTabProps) => {
+  const onRequestResponseBodyRef = useRef(onRequestResponseBody);
+
+  useEffect(() => {
+    onRequestResponseBodyRef.current = onRequestResponseBody;
+  }, [onRequestResponseBody]);
+
+  useEffect(() => {
+    if (onRequestResponseBodyRef.current) {
+      onRequestResponseBodyRef.current(selectedRequest.id);
+    }
+  }, [selectedRequest.id]);
+
+  const renderResponseBody = () => {
+    const responseBody = selectedRequest.response?.body;
+
+    if (!responseBody) {
+      return (
+        <div className="text-sm text-gray-400">
+          No response body available for this request
+        </div>
+      );
+    }
+
+    const { type, data } = responseBody;
+
+    // Handle null data
+    if (data === null) {
+      return (
+        <div className="text-sm text-gray-400">
+          No response body available for this request
+        </div>
+      );
+    }
+
+    // Handle JSON content
+    if (type === 'application/json') {
+      try {
+        const jsonData = JSON.parse(data);
+        return (
+          <div className="space-y-4">
+            <div className="text-sm mb-2">
+              <span className="text-gray-400">Content-Type: </span>
+              <span className="text-blue-400">{type}</span>
+            </div>
+            <div className="bg-gray-800 p-3 rounded border border-gray-700">
+              <JsonTree data={jsonData} />
+            </div>
+          </div>
+        );
+      } catch {
+        // Fallback to pre tag if JSON parsing fails
+        return (
+          <div className="space-y-4">
+            <div className="text-sm mb-2">
+              <span className="text-gray-400">Content-Type: </span>
+              <span className="text-blue-400">{type}</span>
+            </div>
+            <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>
+            <div className="text-xs text-gray-500">
+              ⚠️ Failed to parse as JSON, showing as raw text
+            </div>
+          </div>
+        );
+      }
+    }
+
+    // Handle HTML content
+    if (type === 'text/html') {
+      return (
+        <div className="space-y-4">
+          <div className="text-sm mb-2">
+            <span className="text-gray-400">Content-Type: </span>
+            <span className="text-blue-400">{type}</span>
+          </div>
+          <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>
+        </div>
+      );
+    }
+
+    // Handle other text content types
+    if (
+      type.startsWith('text/') ||
+      type === 'application/xml' ||
+      type === 'application/javascript'
+    ) {
+      return (
+        <div className="space-y-4">
+          <div className="text-sm mb-2">
+            <span className="text-gray-400">Content-Type: </span>
+            <span className="text-blue-400">{type}</span>
+          </div>
+          <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>
+        </div>
+      );
+    }
+
+    // Handle other content types
+    return (
+      <div className="space-y-4">
+        <div className="text-sm mb-2">
+          <span className="text-gray-400">Content-Type: </span>
+          <span className="text-blue-400">{type}</span>
+        </div>
+        <div className="text-sm text-gray-400">
+          Binary content not shown - {data.length} bytes
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <ScrollArea className="h-full w-full">
+      <div className="p-4">
+        {renderResponseBody()}
+      </div>
+    </ScrollArea>
+  );
+};

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

@@ -0,0 +1,60 @@
+import { ScrollArea } from '../components/ScrollArea';
+import { HttpNetworkEntry } from '../state/model';
+
+export type TimingTabProps = {
+  selectedRequest: HttpNetworkEntry;
+};
+
+export const TimingTab = ({ selectedRequest }: TimingTabProps) => {
+  const startTime = selectedRequest.timestamp || 0;
+  const endTime = selectedRequest.duration
+    ? selectedRequest.timestamp + selectedRequest.duration
+    : null;
+  const ttfb = selectedRequest.ttfb || 0;
+  const duration = selectedRequest.duration || 0;
+
+  const formatTime = (time: number): string => {
+    if (time < 1) {
+      return `${Math.round(time * 1000)} μs`;
+    }
+    return `${time.toFixed(1)} ms`;
+  };
+
+  const formatTimestamp = (timestamp: number): string => {
+    return new Date(timestamp * 1000).toLocaleTimeString();
+  };
+
+  return (
+    <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>
+            <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>
+          </div>
+        </div>
+      </div>
+    </ScrollArea>
+  );
+};

package/src/ui/types.ts

@@ -0,0 +1,34 @@
+import {
+  RequestId,
+  Request,
+  Response,
+  Initiator,
+  ResourceType,
+  HttpHeaders,
+} from '../shared/client';
+
+export type NetworkEntry = {
+  requestId: RequestId;
+  url: string;
+  method: string;
+  headers: HttpHeaders;
+  body?: {
+    type: string;
+    data: string;
+  };
+  status: 'pending' | 'loading' | 'finished' | 'failed';
+  startTime: number;
+  endTime?: number;
+  duration?: number;
+  ttfb?: number;
+  type?: ResourceType;
+  initiator?: Initiator;
+  request?: Request;
+  response?: Response;
+  responseBody?: {
+    body: string | null;
+  };
+  error?: string;
+  canceled?: boolean;
+  size?: 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/cn.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

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/getHttpHeaderValue.ts

@@ -0,0 +1,14 @@
+import { HttpHeaders } from "../../shared/client";
+
+// Utility to get header value case-insensitively
+export function getHttpHeaderValue(headers: HttpHeaders, name: string) {
+  const lowerName = name.toLowerCase();
+
+  for (const key in headers) {
+    if (key.toLowerCase() === lowerName) {
+      return headers[key];
+    }
+  }
+  
+  return undefined;
+}

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

package/src/ui/views/InspectorView.tsx

@@ -0,0 +1,53 @@
+import { useEffect } from 'react';
+import { Toolbar } from '../components/Toolbar';
+import { RequestList } from '../components/RequestList';
+import { SidePanel } from '../components/SidePanel';
+import { NetworkActivityDevToolsClient } from '../../shared/client';
+import {
+  useNetworkActivityClientManagement,
+  useHasSelectedRequest,
+  useNetworkActivityActions,
+} from '../state/hooks';
+
+export type InspectorViewProps = {
+  client: NetworkActivityDevToolsClient;
+};
+
+export const InspectorView = ({ client }: InspectorViewProps) => {
+  const actions = useNetworkActivityActions();
+  const clientManagement = useNetworkActivityClientManagement();
+  const hasSelectedRequest = useHasSelectedRequest();
+
+  useEffect(() => {
+    if (!client) {
+      return;
+    }
+
+    clientManagement.setupClient(client);
+    actions.setRecording(true);
+
+    return () => {
+      actions.setRecording(false);
+      clientManagement.cleanupClient();
+    };
+  }, [client, clientManagement, actions]);
+
+  return (
+    <div className="h-screen bg-gray-900 text-gray-100 flex flex-col">
+      <Toolbar />
+
+      <div className="flex flex-1 overflow-hidden">
+        {/* Request List */}
+        <div
+          className={`flex flex-col ${
+            hasSelectedRequest ? 'w-1/2' : 'w-full'
+          } border-r border-gray-700 overflow-hidden`}
+        >
+          <RequestList />
+        </div>
+
+        {hasSelectedRequest && <SidePanel />}
+      </div>
+    </div>
+  );
+};

package/src/ui/views/LoadingView.tsx

@@ -0,0 +1,19 @@
+import { Loader2 } from 'lucide-react';
+
+export const LoadingView = () => {
+  return (
+    <div className="h-screen bg-gray-900 text-gray-100 flex flex-col items-center justify-center">
+      <div className="flex flex-col items-center gap-4">
+        <Loader2 className="h-12 w-12 text-blue-400 animate-spin" />
+        <div className="text-center">
+          <h2 className="text-xl font-semibold text-gray-200 mb-2">
+            Loading Network Inspector
+          </h2>
+          <p className="text-gray-400 text-sm">
+            Initializing network monitoring...
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};