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

package/src/ui/tabs/ResponseTab.tsx

@@ -0,0 +1,140 @@
+import { useEffect, useRef } from 'react';
+import { ScrollArea } from '../components/ScrollArea';
+import { JsonTree } from '../components/JsonTree';
+
+export type ResponseTabProps = {
+  selectedRequest: {
+    id: string;
+    type: string;
+    responseBody?: {
+      type: string;
+      data: string | null;
+    };
+  };
+  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 = () => {
+    if (!selectedRequest?.responseBody) {
+      return (
+        <div className="text-sm text-gray-400">
+          No response body available for this request
+        </div>
+      );
+    }
+
+    const { type, data } = selectedRequest.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 min-h-0 p-4">
+      {renderResponseBody()}
+    </ScrollArea>
+  );
+};

package/src/ui/tabs/TimingTab.tsx

@@ -0,0 +1,71 @@
+import { ScrollArea } from '../components/ScrollArea';
+import { NetworkRequest } from '../components/RequestList';
+import { NetworkEntry } from '../types';
+
+export type TimingTabProps = {
+  selectedRequest: NetworkRequest | null;
+  networkEntries: Map<string, NetworkEntry>;
+};
+
+export const TimingTab = ({
+  selectedRequest,
+  networkEntries,
+}: TimingTabProps) => {
+  const networkEntry = selectedRequest
+    ? networkEntries.get(selectedRequest.id)
+    : 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 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 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>
+    </ScrollArea>
+  );
+};

package/src/ui/types.ts

@@ -0,0 +1,30 @@
+import {
+  RequestId,
+  Request,
+  Response,
+  Initiator,
+  ResourceType,
+} from '../shared/client';
+
+export type NetworkEntry = {
+  requestId: RequestId;
+  url: string;
+  method: string;
+  headers: Record<string, string>;
+  postData?: 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.ts

@@ -1,98 +1,6 @@
-// Utility functions for formatting and styling
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
 
-export const formatTime = (timestamp: number): string => {
-  const date = new Date(timestamp * 1000);
-  return date.toLocaleTimeString();
-};
-
-export const formatDuration = (duration: number): string => {
-  if (duration < 1000) return `${Math.round(duration)}ms`;
-  return `${(duration / 1000).toFixed(2)}s`;
-};
-
-export const getStatusColor = (status: number): string => {
-  if (status >= 200 && status < 300) return '#4caf50';
-  if (status >= 300 && status < 400) return '#ff9800';
-  if (status >= 400 && status < 500) return '#f44336';
-  if (status >= 500) return '#9c27b0';
-  return '#757575';
-};
-
-export const getMethodColor = (method: string): string => {
-  switch (method.toUpperCase()) {
-    case 'GET':
-      return '#61affe';
-    case 'POST':
-      return '#49cc90';
-    case 'PUT':
-      return '#fca130';
-    case 'DELETE':
-      return '#f93e3e';
-    case 'PATCH':
-      return '#50e3c2';
-    default:
-      return '#757575';
-  }
-};
-
-export const formatFileSize = (bytes: number): string => {
-  if (bytes === 0) return '0 B';
-  const k = 1024;
-  const sizes = ['B', 'KB', 'MB', 'GB'];
-  const i = Math.floor(Math.log(bytes) / Math.log(k));
-  return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
-};
-
-export const parseUrl = (url: string) => {
-  try {
-    const urlObj = new URL(url);
-    return {
-      domain: urlObj.hostname,
-      path: urlObj.pathname + urlObj.search,
-      protocol: urlObj.protocol,
-    };
-  } catch {
-    return {
-      domain: 'Invalid URL',
-      path: url,
-      protocol: 'unknown',
-    };
-  }
-};
-
-export const truncateText = (text: string, maxLength: number): string => {
-  if (text.length <= maxLength) return text;
-  return text.substring(0, maxLength) + '...';
-};
-
-export const formatLongUrl = (url: string, maxLength = 80): string => {
-  if (url.length <= maxLength) return url;
-
-  try {
-    const urlObj = new URL(url);
-    const protocol = urlObj.protocol;
-    const hostname = urlObj.hostname;
-    const pathname = urlObj.pathname;
-    const search = urlObj.search;
-
-    // Keep protocol and hostname, truncate path if needed
-    const baseLength = protocol.length + hostname.length + 3; // +3 for "://"
-    const remainingLength = maxLength - baseLength - 3; // -3 for "..."
-
-    if (remainingLength <= 0) {
-      return `${protocol}//${hostname}...`;
-    }
-
-    const fullPath = pathname + search;
-    if (fullPath.length <= remainingLength) {
-      return url;
-    }
-
-    return `${protocol}//${hostname}${fullPath.substring(
-      0,
-      remainingLength
-    )}...`;
-  } catch {
-    return truncateText(url, maxLength);
-  }
-};
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/src/ui/views/InspectorView.tsx

@@ -0,0 +1,349 @@
+import { useState, useMemo, useEffect } from 'react';
+import { Badge } from '../components/Badge';
+import { Button } from '../components/Button';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '../components/Tabs';
+import { HeadersTab } from '../tabs/HeadersTab';
+import { RequestTab } from '../tabs/RequestTab';
+import { ResponseTab } from '../tabs/ResponseTab';
+import { CookiesTab } from '../tabs/CookiesTab';
+import { TimingTab } from '../tabs/TimingTab';
+import {
+  RequestList,
+  processNetworkEntries,
+  getTypeColor,
+  getStatusColor,
+} from '../components/RequestList';
+import { Circle, Square, Trash2, X } from 'lucide-react';
+import {
+  NetworkActivityDevToolsClient,
+  NetworkActivityEventMap,
+  RequestId,
+} from '../../shared/client';
+import { NetworkEntry } from '../types';
+
+export type InspectorViewProps = {
+  client: NetworkActivityDevToolsClient;
+};
+
+export const InspectorView = ({ client }: InspectorViewProps) => {
+  const [isRecording, setIsRecording] = useState(true);
+  const [selectedRequestId, setSelectedRequestId] = useState<RequestId | null>(
+    null
+  );
+  const [networkEntries, setNetworkEntries] = useState<
+    Map<RequestId, NetworkEntry>
+  >(new Map());
+
+  const selectedRequest = useMemo(() => {
+    if (!selectedRequestId) return null;
+    const processedRequests = processNetworkEntries(networkEntries);
+    return (
+      processedRequests.find((request) => request.id === selectedRequestId) ||
+      null
+    );
+  }, [selectedRequestId, networkEntries]);
+
+  useEffect(() => {
+    const handleRequestSent = (
+      data: NetworkActivityEventMap['request-sent']
+    ) => {
+      const entry: NetworkEntry = {
+        requestId: data.requestId,
+        url: data.request.url,
+        method: data.request.method,
+        headers: data.request.headers,
+        postData: data.request.postData,
+        status: 'pending',
+        startTime: data.timestamp,
+        type: data.type,
+        initiator: data.initiator,
+        request: data.request,
+      };
+
+      setNetworkEntries((prev) => new Map(prev).set(data.requestId, entry));
+    };
+
+    const handleResponseReceived = (
+      data: NetworkActivityEventMap['response-received']
+    ) => {
+      setNetworkEntries((prev) => {
+        const entry = prev.get(data.requestId);
+        if (!entry) return prev;
+
+        const updatedEntry: NetworkEntry = {
+          ...entry,
+          status: 'loading',
+          response: data.response,
+        };
+
+        return new Map(prev).set(data.requestId, updatedEntry);
+      });
+    };
+
+    const handleRequestCompleted = (
+      data: NetworkActivityEventMap['request-completed']
+    ) => {
+      setNetworkEntries((prev) => {
+        const entry = prev.get(data.requestId);
+        if (!entry) return prev;
+
+        const updatedEntry: NetworkEntry = {
+          ...entry,
+          status: 'finished',
+          endTime: data.timestamp,
+          duration: data.duration,
+          ttfb: data.ttfb,
+          size: data.size,
+        };
+
+        return new Map(prev).set(data.requestId, updatedEntry);
+      });
+    };
+
+    const handleRequestFailed = (
+      data: NetworkActivityEventMap['request-failed']
+    ) => {
+      setNetworkEntries((prev) => {
+        const entry = prev.get(data.requestId);
+        if (!entry) return prev;
+
+        const updatedEntry: NetworkEntry = {
+          ...entry,
+          status: 'failed',
+          error: data.error,
+          canceled: data.canceled,
+        };
+
+        return new Map(prev).set(data.requestId, updatedEntry);
+      });
+    };
+
+    // Subscribe to network events
+    const unsubscribeRequestSent = client.onMessage(
+      'request-sent',
+      handleRequestSent
+    );
+    const unsubscribeResponseReceived = client.onMessage(
+      'response-received',
+      handleResponseReceived
+    );
+    const unsubscribeRequestCompleted = client.onMessage(
+      'request-completed',
+      handleRequestCompleted
+    );
+    const unsubscribeRequestFailed = client.onMessage(
+      'request-failed',
+      handleRequestFailed
+    );
+
+    const handleResponseBody = (
+      data: NetworkActivityEventMap['response-body']
+    ) => {
+      setNetworkEntries((prev) => {
+        const entry = prev.get(data.requestId);
+        if (!entry) return prev;
+
+        const updatedEntry: NetworkEntry = {
+          ...entry,
+          responseBody: {
+            ...entry.responseBody,
+            body: data.body,
+          },
+        };
+
+        console.log(updatedEntry);
+        return new Map(prev).set(data.requestId, updatedEntry);
+      });
+    };
+
+    const unsubscribeResponseBody = client.onMessage(
+      'response-body',
+      handleResponseBody
+    );
+
+    return () => {
+      unsubscribeRequestSent.remove();
+      unsubscribeResponseReceived.remove();
+      unsubscribeRequestCompleted.remove();
+      unsubscribeRequestFailed.remove();
+      unsubscribeResponseBody.remove();
+    };
+  }, [client]);
+
+  useEffect(() => {
+    if (isRecording) {
+      client.send('network-enable', {});
+
+      return () => {
+        client.send('network-disable', {});
+      };
+    }
+  }, [isRecording, client]);
+
+  const clearRequests = () => {
+    setNetworkEntries(new Map());
+    setSelectedRequestId(null);
+  };
+
+  const closeSidePanel = () => {
+    setSelectedRequestId(null);
+  };
+
+  return (
+    <div className="h-screen bg-gray-900 text-gray-100 flex flex-col">
+      {/* Toolbar */}
+      <div className="flex items-center gap-2 p-2 border-b border-gray-700 bg-gray-800">
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={() => setIsRecording(!isRecording)}
+          className={`h-8 w-8 p-0 ${
+            isRecording
+              ? 'text-red-400 hover:text-red-300'
+              : 'text-gray-400 hover:text-blue-400'
+          }`}
+        >
+          {isRecording ? (
+            <Circle className="h-4 w-4 fill-current" />
+          ) : (
+            <Square className="h-4 w-4" />
+          )}
+        </Button>
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={clearRequests}
+          className="h-8 w-8 p-0 text-gray-400 hover:text-blue-400"
+        >
+          <Trash2 className="h-4 w-4" />
+        </Button>
+      </div>
+
+      <div className="flex flex-1 overflow-hidden">
+        {/* Request List */}
+        <div
+          className={`flex flex-col ${
+            selectedRequest ? 'w-1/2' : 'w-full'
+          } border-r border-gray-700 overflow-hidden`}
+        >
+          <RequestList
+            networkEntries={networkEntries}
+            selectedRequestId={selectedRequestId}
+            onRequestSelect={setSelectedRequestId}
+          />
+        </div>
+
+        {/* Side Panel */}
+        {selectedRequest && (
+          <div className="w-1/2 flex flex-col bg-gray-900">
+            {/* Side Panel Header */}
+            <div className="flex items-center justify-between p-3 border-b border-gray-700 bg-gray-800">
+              <div className="flex items-center gap-2">
+                <div
+                  className={`w-3 h-3 rounded-full ${getTypeColor(
+                    selectedRequest.type
+                  )}`}
+                ></div>
+                <span className="font-medium">{selectedRequest.name}</span>
+                <Badge
+                  variant="outline"
+                  className={`${getStatusColor(
+                    selectedRequest.status
+                  )} border-current`}
+                >
+                  {selectedRequest.status}
+                </Badge>
+              </div>
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={closeSidePanel}
+                className="h-6 w-6 p-0 text-gray-400 hover:text-blue-400"
+              >
+                <X className="h-4 w-4" />
+              </Button>
+            </div>
+
+            {/* Side Panel Content */}
+            <div className="flex-1 overflow-hidden">
+              <Tabs defaultValue="headers" className="h-full flex flex-col">
+                <TabsList className="grid w-full grid-cols-5 bg-gray-800 rounded-none border-b border-gray-700">
+                  <TabsTrigger
+                    value="headers"
+                    className="data-[state=active]:bg-gray-700"
+                  >
+                    Headers
+                  </TabsTrigger>
+                  <TabsTrigger
+                    value="request"
+                    className="data-[state=active]:bg-gray-700"
+                  >
+                    Request
+                  </TabsTrigger>
+                  <TabsTrigger
+                    value="response"
+                    className="data-[state=active]:bg-gray-700"
+                  >
+                    Response
+                  </TabsTrigger>
+                  <TabsTrigger
+                    value="cookies"
+                    className="data-[state=active]:bg-gray-700"
+                  >
+                    Cookies
+                  </TabsTrigger>
+                  <TabsTrigger
+                    value="timing"
+                    className="data-[state=active]:bg-gray-700"
+                  >
+                    Timing
+                  </TabsTrigger>
+                </TabsList>
+
+                <TabsContent
+                  value="headers"
+                  className="flex-1 m-0 overflow-hidden"
+                >
+                  <HeadersTab
+                    selectedRequest={selectedRequest}
+                    networkEntries={networkEntries}
+                    getStatusColor={getStatusColor}
+                  />
+                </TabsContent>
+
+                <TabsContent value="request" className="flex-1 m-0">
+                  <RequestTab selectedRequest={selectedRequest} />
+                </TabsContent>
+
+                <TabsContent value="response" className="flex-1 m-0">
+                  <ResponseTab
+                    selectedRequest={selectedRequest}
+                    onRequestResponseBody={(requestId) => {
+                      client.send('get-response-body', {
+                        requestId,
+                      });
+                    }}
+                  />
+                </TabsContent>
+
+                <TabsContent value="cookies" className="flex-1 m-0">
+                  <CookiesTab
+                    selectedRequest={selectedRequest}
+                    networkEntries={networkEntries}
+                  />
+                </TabsContent>
+
+                <TabsContent value="timing" className="flex-1 m-0">
+                  <TimingTab
+                    selectedRequest={selectedRequest}
+                    networkEntries={networkEntries}
+                  />
+                </TabsContent>
+              </Tabs>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};