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

package/src/ui/components/RequestList.tsx

@@ -1,42 +1,33 @@
-import * as React from 'react';
+import { useMemo, useState } from 'react';
 import {
   createColumnHelper,
   flexRender,
   getCoreRowModel,
   getSortedRowModel,
+  SortingFn,
   SortingState,
   useReactTable,
 } from '@tanstack/react-table';
-import { NetworkEntry } from '../types';
+import { ProcessedRequest } from '../state/model';
 import { RequestId } from '../../shared/client';
-import { getHttpHeaderValue } from '../utils/getHttpHeaderValue';
+import {
+  useNetworkActivityActions,
+  useProcessedRequests,
+  useSelectedRequestId,
+} from '../state/hooks';
+import { getStatusColor } from '../utils/getStatusColor';
 
 type NetworkRequest = {
-  id: string;
+  id: RequestId;
   name: string;
-  status: number;
+  status: string | number;
   method: string;
   domain: string;
   path: string;
   size: string;
   time: string;
   type: string;
-  initiator: string;
   startTime: string;
-  requestBody?: {
-    type: string;
-    data: string;
-  };
-  responseBody?: {
-    type: string;
-    data: string | null;
-  };
-};
-
-type RequestListProps = {
-  networkEntries: Map<RequestId, NetworkEntry>;
-  selectedRequestId: RequestId | null;
-  onRequestSelect: (requestId: RequestId) => void;
 };
 
 const formatSize = (bytes: number): string => {
@@ -68,10 +59,11 @@ const extractDomainAndPath = (
   url: string
 ): { domain: string; path: string } => {
   try {
-    const urlObj = new URL(url);
+    const { hostname, pathname, search, hash, port } = new URL(url);
+
     return {
-      domain: urlObj.hostname,
-      path: urlObj.pathname + urlObj.search + urlObj.hash,
+      domain: `${hostname}${port ? `:${port}` : ''}`,
+      path: `${pathname}${search}${hash}`,
     };
   } catch {
     return { domain: 'unknown', path: url };
@@ -89,64 +81,7 @@ const generateName = (url: string): string => {
   }
 };
 
-const formatInitiator = (initiator: any): string => {
-  if (!initiator) return 'Other';
-  if (initiator.type === 'script' && initiator.url) {
-    try {
-      const url = new URL(initiator.url);
-      const filename = url.pathname.split('/').pop() || url.hostname;
-      const line = initiator.lineNumber ? `:${initiator.lineNumber}` : '';
-      return `${filename}${line}`;
-    } catch {
-      return 'Script';
-    }
-  }
-  return initiator.type || 'Other';
-};
-
-const mapResourceType = (type: string): string => {
-  const typeMap: Record<string, string> = {
-    Document: 'document',
-    Stylesheet: 'stylesheet',
-    Image: 'img',
-    Media: 'media',
-    Font: 'font',
-    Script: 'script',
-    XHR: 'xhr',
-    Fetch: 'xhr',
-    EventSource: 'eventsource',
-    WebSocket: 'websocket',
-    Manifest: 'manifest',
-    Other: 'other',
-    Ping: 'ping',
-    CSPViolationReport: 'csp',
-    Preflight: 'preflight',
-    Subresource: 'subresource',
-  };
-  return typeMap[type] || 'other';
-};
-
-const getTypeColor = (type: string) => {
-  const colors: Record<string, string> = {
-    document: 'bg-blue-600',
-    script: 'bg-yellow-600',
-    stylesheet: 'bg-purple-600',
-    xhr: 'bg-green-600',
-    img: 'bg-pink-600',
-    font: 'bg-orange-600',
-  };
-  return colors[type] || 'bg-gray-600';
-};
-
-const getStatusColor = (status: number) => {
-  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';
-};
-
-// Custom sorting functions
-const sortSize = (rowA: any, rowB: any, columnId: string) => {
+const sortSize: SortingFn<NetworkRequest> = (rowA, rowB, columnId) => {
   const a = rowA.getValue(columnId) as string;
   const b = rowB.getValue(columnId) as string;
 
@@ -168,7 +103,7 @@ const sortSize = (rowA: any, rowB: any, columnId: string) => {
   return getNumericValue(a) - getNumericValue(b);
 };
 
-const sortTime = (rowA: any, rowB: any, columnId: string) => {
+const sortTime: SortingFn<NetworkRequest> = (rowA, rowB, columnId) => {
   const a = rowA.getValue(columnId) as string;
   const b = rowB.getValue(columnId) as string;
 
@@ -184,38 +119,24 @@ const sortTime = (rowA: any, rowB: any, columnId: string) => {
   return getNumericValue(a) - getNumericValue(b);
 };
 
-// Convert NetworkEntry to NetworkRequest for UI display
-const processNetworkEntries = (
-  networkEntries: Map<RequestId, NetworkEntry>
+const processNetworkRequests = (
+  processedRequests: ProcessedRequest[]
 ): NetworkRequest[] => {
-  return Array.from(networkEntries.values()).map((entry): NetworkRequest => {
-    const { domain, path } = extractDomainAndPath(entry.url);
-    const duration = entry.duration || 0;
+  return processedRequests.map((request): NetworkRequest => {
+    const { domain, path } = extractDomainAndPath(request.name);
+    const duration = request.duration || 0;
 
     return {
-      id: entry.requestId,
-      name: generateName(entry.url),
-      status: entry.response?.status || 0,
-      method: entry.request?.method || 'GET',
+      id: request.id,
+      name: generateName(request.name),
+      status: request.httpStatus || request.status,
+      method: request.method,
       domain,
       path,
-      size: formatSize(entry.size || 0),
+      size: formatSize(request.size || 0),
       time: formatDuration(duration),
-      type: mapResourceType(entry.type || 'Other'),
-      initiator: formatInitiator(entry.initiator),
-      startTime: formatStartTime(entry.startTime || 0),
-      requestBody: entry.request?.postData
-        ? {
-            type: getHttpHeaderValue(entry.request.headers, 'content-type') || 'text/plain',
-            data: entry.request.postData,
-          }
-        : undefined,
-      responseBody: entry.responseBody
-        ? {
-            type: entry.response?.contentType || 'application/octet-stream',
-            data: entry.responseBody.body,
-          }
-        : undefined,
+      type: request.type,
+      startTime: formatStartTime(request.timestamp),
     };
   });
 };
@@ -274,16 +195,15 @@ const columns = [
   }),
 ];
 
-export const RequestList: React.FC<RequestListProps> = ({
-  networkEntries,
-  selectedRequestId,
-  onRequestSelect,
-}) => {
-  const [sorting, setSorting] = React.useState<SortingState>([]);
+export const RequestList = () => {
+  const actions = useNetworkActivityActions();
+  const processedRequests = useProcessedRequests();
+  const selectedRequestId = useSelectedRequestId();
+  const [sorting, setSorting] = useState<SortingState>([]);
 
-  const requests = React.useMemo(() => {
-    return processNetworkEntries(networkEntries);
-  }, [networkEntries]);
+  const requests = useMemo(() => {
+    return processNetworkRequests(processedRequests);
+  }, [processedRequests]);
 
   const table = useReactTable({
     data: requests,
@@ -296,6 +216,10 @@ export const RequestList: React.FC<RequestListProps> = ({
     },
   });
 
+  const onRequestSelect = (requestId: RequestId): void => {
+    actions.setSelectedRequest(requestId);
+  };
+
   return (
     <div className="flex-1 overflow-auto">
       <table className="w-full">
@@ -367,11 +291,5 @@ export {
   formatStartTime,
   extractDomainAndPath,
   generateName,
-  formatInitiator,
-  mapResourceType,
-  getTypeColor,
-  getStatusColor,
-  processNetworkEntries,
+  processNetworkRequests,
 };
-
-export type { NetworkRequest };

package/src/ui/components/SidePanel.tsx

@@ -0,0 +1,323 @@
+import { Badge } from './Badge';
+import { Button } from './Button';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from './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 { X } from 'lucide-react';
+import {
+  useNetworkActivityActions,
+  useNetworkActivityStore,
+  useSelectedRequest,
+} from '../state/hooks';
+import { NetworkEntry as OldNetworkEntry } from '../types';
+import { getStatusColor } from '../utils/getStatusColor';
+import { MessagesTab } from '../tabs/MessagesTab';
+import { SSEMessagesTab } from '../tabs/SSEMessagesTab';
+
+const getTypeColor = (type: string) => {
+  const colors: Record<string, string> = {
+    document: 'bg-blue-600',
+    script: 'bg-yellow-600',
+    stylesheet: 'bg-purple-600',
+    xhr: 'bg-green-600',
+    img: 'bg-pink-600',
+    font: 'bg-orange-600',
+    http: 'bg-green-600',
+    websocket: 'bg-blue-600',
+    sse: 'bg-purple-600',
+  };
+  return colors[type] || 'bg-gray-600';
+};
+
+// Adapter to convert new model to old format for tab components
+const createLegacyNetworkEntry = (
+  selectedRequest: any,
+  httpDetails: any,
+  wsDetails: any
+): OldNetworkEntry | null => {
+  if (selectedRequest.type === 'http' && httpDetails) {
+    return {
+      requestId: httpDetails.id,
+      url: httpDetails.request?.url || '',
+      method: httpDetails.request?.method || 'GET',
+      headers: httpDetails.request?.headers || {},
+      body: httpDetails.request?.body,
+      status: httpDetails.status,
+      startTime: httpDetails.timestamp,
+      endTime: httpDetails.duration
+        ? httpDetails.timestamp + httpDetails.duration
+        : undefined,
+      duration: httpDetails.duration,
+      ttfb: httpDetails.ttfb,
+      type: httpDetails.resourceType,
+      initiator: httpDetails.initiator,
+      request: httpDetails.request,
+      response: httpDetails.response,
+      responseBody: httpDetails.response?.body
+        ? { body: httpDetails.response.body }
+        : undefined,
+      error: httpDetails.error,
+      canceled: httpDetails.canceled,
+      size: httpDetails.size,
+    };
+  } else if (selectedRequest.type === 'websocket' && wsDetails) {
+    // For WebSocket, create a minimal entry since tabs are designed for HTTP
+    return {
+      requestId: wsDetails.id,
+      url: wsDetails.connection?.url || '',
+      method: 'WS',
+      headers: {},
+      status: wsDetails.status === 'open' ? 'finished' : 'pending',
+      startTime: wsDetails.timestamp,
+      endTime: wsDetails.duration
+        ? wsDetails.timestamp + wsDetails.duration
+        : undefined,
+      duration: wsDetails.duration,
+    };
+  }
+  return null;
+};
+
+export const SidePanel = () => {
+  const actions = useNetworkActivityActions();
+  const selectedRequest = useSelectedRequest();
+  const client = useNetworkActivityStore((state) => state._client);
+
+  const onClose = (): void => {
+    actions.setSelectedRequest(null);
+  };
+
+  // Early return if no request is selected
+  if (!selectedRequest) {
+    return null;
+  }
+
+  // Get detailed information based on request type
+  const httpDetails = selectedRequest.type === 'http' ? selectedRequest : null;
+  const wsDetails =
+    selectedRequest.type === 'websocket' ? selectedRequest : null;
+  const sseDetails = selectedRequest.type === 'sse' ? selectedRequest : null;
+
+  // Extract name from the request
+  const requestName =
+    selectedRequest.type === 'http'
+      ? httpDetails?.request?.url || 'Unknown'
+      : selectedRequest.type === 'websocket'
+      ? wsDetails?.connection?.url || 'Unknown'
+      : sseDetails?.request?.url || 'Unknown';
+
+  // Extract status from the request
+  const requestStatus =
+    selectedRequest.type === 'http'
+      ? httpDetails?.response?.status || httpDetails?.status || 'pending'
+      : selectedRequest.type === 'websocket'
+      ? wsDetails?.status || 'unknown'
+      : sseDetails?.status || 'unknown';
+
+  // Create legacy network entry for tab components
+  const legacyEntry = createLegacyNetworkEntry(
+    selectedRequest,
+    httpDetails,
+    wsDetails
+  );
+  const legacyNetworkEntries = new Map<string, OldNetworkEntry>();
+  if (legacyEntry) {
+    legacyNetworkEntries.set(legacyEntry.requestId, legacyEntry);
+  }
+
+  const getTabsListTriggers = () => {
+    if (httpDetails) {
+      return (
+        <>
+          <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>
+        </>
+      );
+    }
+
+    if (sseDetails) {
+      return (
+        <>
+          <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="messages"
+            className="data-[state=active]:bg-gray-700"
+          >
+            Messages
+          </TabsTrigger>
+        </>
+      );
+    }
+
+    return (
+      <>
+        <TabsTrigger
+          value="messages"
+          className="data-[state=active]:bg-gray-700"
+        >
+          Messages
+        </TabsTrigger>
+      </>
+    );
+  };
+
+  const getTabsContent = () => {
+    if (httpDetails) {
+      return (
+        <>
+          <TabsContent value="headers" className="flex-1 m-0 overflow-hidden">
+            <HeadersTab selectedRequest={httpDetails} />
+          </TabsContent>
+
+          <TabsContent value="request" className="flex-1 m-0 overflow-hidden">
+            <RequestTab selectedRequest={httpDetails} />
+          </TabsContent>
+
+          <TabsContent value="response" className="flex-1 m-0 overflow-hidden">
+            <ResponseTab
+              selectedRequest={httpDetails}
+              onRequestResponseBody={(requestId) => {
+                if (client) {
+                  client.send('get-response-body', {
+                    requestId,
+                  });
+                }
+              }}
+            />
+          </TabsContent>
+
+          <TabsContent value="cookies" className="flex-1 m-0 overflow-hidden">
+            <CookiesTab selectedRequest={httpDetails} />
+          </TabsContent>
+
+          <TabsContent value="timing" className="flex-1 m-0 overflow-hidden">
+            <TimingTab selectedRequest={httpDetails} />
+          </TabsContent>
+        </>
+      );
+    }
+
+    if (wsDetails) {
+      return (
+        <>
+          <TabsContent value="messages" className="flex-1 m-0 overflow-hidden">
+            <MessagesTab selectedRequest={wsDetails} />
+          </TabsContent>
+        </>
+      );
+    }
+
+    if (sseDetails) {
+      return (
+        <>
+          <TabsContent value="headers" className="flex-1 m-0 overflow-hidden">
+            <HeadersTab selectedRequest={sseDetails} />
+          </TabsContent>
+
+          <TabsContent value="request" className="flex-1 m-0 overflow-hidden">
+            <RequestTab selectedRequest={sseDetails} />
+          </TabsContent>
+
+          <TabsContent value="messages" className="flex-1 m-0 overflow-hidden">
+            <SSEMessagesTab selectedRequest={sseDetails} />
+          </TabsContent>
+
+          <TabsContent value="cookies" className="flex-1 m-0 overflow-hidden">
+            <CookiesTab selectedRequest={sseDetails} />
+          </TabsContent>
+        </>
+      );
+    }
+
+    throw new Error('Invalid request type');
+  };
+
+  return (
+    <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">{requestName}</span>
+          <Badge
+            variant="outline"
+            className={`${getStatusColor(requestStatus)} border-current`}
+          >
+            {requestStatus}
+          </Badge>
+        </div>
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={onClose}
+          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
+          key={selectedRequest.id}
+          defaultValue={
+            selectedRequest.type === 'websocket' ? 'messages' : '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">
+            {getTabsListTriggers()}
+          </TabsList>
+
+          {getTabsContent()}
+        </Tabs>
+      </div>
+    </div>
+  );
+};

package/src/ui/components/Tabs.tsx

@@ -44,7 +44,7 @@ const TabsContent = React.forwardRef<
   <TabsPrimitive.Content
     ref={ref}
     className={cn(
-      'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+      'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 min-h-0',
       className
     )}
     {...props}

package/src/ui/components/Toolbar.tsx

@@ -0,0 +1,45 @@
+import { Button } from './Button';
+import { Circle, Square, Trash2 } from 'lucide-react';
+import { useIsRecording, useNetworkActivityActions } from '../state/hooks';
+
+export const Toolbar = () => {
+  const actions = useNetworkActivityActions();
+  const isRecording = useIsRecording();
+
+  const onToggleRecording = (): void => {
+    actions.setRecording(!isRecording);
+  };
+
+  const onClearRequests = (): void => {
+    actions.clearRequests();
+  };
+
+  return (
+    <div className="flex items-center gap-2 p-2 border-b border-gray-700 bg-gray-800">
+      <Button
+        variant="ghost"
+        size="sm"
+        onClick={onToggleRecording}
+        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={onClearRequests}
+        className="h-8 w-8 p-0 text-gray-400 hover:text-blue-400"
+      >
+        <Trash2 className="h-4 w-4" />
+      </Button>
+    </div>
+  );
+};

package/src/ui/hooks/useCopyToClipboard.ts

@@ -0,0 +1,28 @@
+import { useState, useRef, useEffect, useCallback } from 'react';
+
+import { copyToClipboard } from '../utils/copyToClipboard';
+
+export function useCopyToClipboard() {
+  const [isCopied, setIsCopied] = useState(false);
+
+  const timeoutRef = useRef<NodeJS.Timeout>();
+
+  useEffect(() => {
+    return () => clearTimeout(timeoutRef.current);
+  }, []);
+
+  const copy = useCallback(async (value: string) => {
+    try {
+      await copyToClipboard(value);
+  
+      setIsCopied(true);
+  
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = setTimeout(() => setIsCopied(false), 1000);
+    } catch (error) {
+      console.error('Failed to copy:', error);
+    }
+  }, []);
+
+  return { isCopied, copy };
+}