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

package/src/ui/components/SidePanel.tsx

@@ -0,0 +1,333 @@
+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,
+  useOverrides,
+  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 overrides = useOverrides();
+
+  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 override = legacyEntry !== null ? overrides.get(legacyEntry.url) : null;
+  const hasResponseOverride = override && override.body ? true : false;
+
+  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
+            {hasResponseOverride && (
+              <span className="w-2 h-2 rounded-full bg-violet-300 ms-2 inline-block"></span>
+            )}
+          </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 min-w-0 flex-1">
+          <div
+            className={`w-3 h-3 rounded-full flex-shrink-0 ${getTypeColor(
+              selectedRequest.type
+            )}`}
+          ></div>
+          <span className="font-medium truncate">{requestName}</span>
+          <Badge
+            variant="outline"
+            className={`${getStatusColor(
+              requestStatus
+            )} border-current flex-shrink-0`}
+          >
+            {requestStatus}
+          </Badge>
+        </div>
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={onClose}
+          className="h-6 w-6 p-0 text-gray-400 hover:text-blue-400 flex-shrink-0 ml-2"
+        >
+          <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/globals.css

@@ -6,6 +6,10 @@
   .text-balance {
     text-wrap: balance;
   }
+
+  .wrap-anywhere {
+    overflow-wrap: anywhere;
+  }
 }
 
 @layer base {

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

package/src/ui/state/derived.ts

@@ -0,0 +1,112 @@
+import { memoize } from 'proxy-memoize';
+import { NetworkActivityState } from './store';
+import {
+  ProcessedRequest,
+  HttpNetworkEntry,
+  WebSocketNetworkEntry,
+  SSENetworkEntry,
+} from './model';
+
+export const getProcessedRequests = memoize((state: NetworkActivityState) => {
+  const { networkEntries } = state;
+  const requests: ProcessedRequest[] = [];
+
+  for (const entry of networkEntries.values()) {
+    if (entry.type === 'http') {
+      const httpEntry = entry as HttpNetworkEntry;
+      requests.push({
+        id: httpEntry.id,
+        type: 'http',
+        name: httpEntry.request.url,
+        status: httpEntry.status,
+        timestamp: httpEntry.timestamp,
+        duration: httpEntry.duration,
+        size: httpEntry.size,
+        method: httpEntry.request.method,
+        httpStatus: httpEntry.response?.status,
+      });
+    } else if (entry.type === 'websocket') {
+      const wsEntry = entry as WebSocketNetworkEntry;
+      requests.push({
+        id: wsEntry.id,
+        type: 'websocket',
+        name: wsEntry.connection.url,
+        status: wsEntry.status,
+        timestamp: wsEntry.timestamp,
+        duration: wsEntry.duration,
+        method: 'WS',
+        httpStatus: 0,
+      });
+    } else if (entry.type === 'sse') {
+      const sseEntry = entry as SSENetworkEntry;
+      requests.push({
+        id: sseEntry.id,
+        type: 'sse',
+        name: sseEntry.request.url,
+        status: sseEntry.status,
+        timestamp: sseEntry.timestamp,
+        duration: sseEntry.duration,
+        method: 'SSE',
+        httpStatus: 0,
+      });
+    }
+  }
+
+  return requests.sort((a, b) => b.timestamp - a.timestamp);
+});
+
+export const getSelectedRequest = memoize((state: NetworkActivityState) => {
+  const { selectedRequestId, networkEntries } = state;
+  if (!selectedRequestId) return null;
+  return networkEntries.get(selectedRequestId) || null;
+});
+
+export const getRequestSummary = (
+  requestId: string
+): ((state: NetworkActivityState) => ProcessedRequest | null) =>
+  memoize((state: NetworkActivityState) => {
+    const { networkEntries } = state;
+    const entry = networkEntries.get(requestId);
+    if (!entry) return null;
+
+    if (entry.type === 'http') {
+      const httpEntry = entry as HttpNetworkEntry;
+      return {
+        id: httpEntry.id,
+        type: 'http',
+        name: httpEntry.request.url,
+        status: httpEntry.status,
+        timestamp: httpEntry.timestamp,
+        duration: httpEntry.duration,
+        size: httpEntry.size,
+        method: httpEntry.request.method,
+        httpStatus: httpEntry.response?.status || 0,
+      };
+    } else if (entry.type === 'websocket') {
+      const wsEntry = entry as WebSocketNetworkEntry;
+      return {
+        id: wsEntry.id,
+        type: 'websocket',
+        name: wsEntry.connection.url,
+        status: wsEntry.status,
+        timestamp: wsEntry.timestamp,
+        duration: wsEntry.duration,
+        method: 'WS',
+        httpStatus: 0,
+      };
+    } else if (entry.type === 'sse') {
+      const sseEntry = entry as SSENetworkEntry;
+      return {
+        id: sseEntry.id,
+        type: 'sse',
+        name: sseEntry.request.url,
+        status: sseEntry.status,
+        timestamp: sseEntry.timestamp,
+        duration: sseEntry.duration,
+        method: 'SSE',
+        httpStatus: 0,
+      };
+    }
+
+    return null;
+  });

package/src/ui/state/hooks.ts

@@ -0,0 +1,52 @@
+import { useStore } from 'zustand';
+import { store } from './store';
+import type { NetworkActivityState } from './store';
+import { getProcessedRequests, getSelectedRequest } from './derived';
+
+export const useNetworkActivityStore = <T>(
+  selector: (state: NetworkActivityState) => T
+): T => {
+  return useStore(store, selector);
+};
+
+export const useProcessedRequests = () => {
+  return useNetworkActivityStore(getProcessedRequests);
+};
+
+export const useSelectedRequest = () => {
+  return useNetworkActivityStore(getSelectedRequest);
+};
+
+export const useHasSelectedRequest = () => {
+  return useNetworkActivityStore((state) => !!getSelectedRequest(state));
+};
+
+export const useSelectedRequestId = () => {
+  return useNetworkActivityStore((state) => state.selectedRequestId);
+};
+
+export const useIsRecording = () => {
+  return useNetworkActivityStore((state) => state.isRecording);
+};
+
+export const useNetworkActivityActions = () => {
+  return useNetworkActivityStore((state) => state.actions);
+};
+
+export const useNetworkActivityClientManagement = () => {
+  return useNetworkActivityStore((state) => state.client);
+};
+
+export const useWebSocketMessages = (requestId: string) => {
+  return useNetworkActivityStore(
+    (state) => state.websocketMessages.get(requestId) || []
+  );
+};
+
+export const useOverrides = () => {
+  return useNetworkActivityStore((state) => state.overrides);
+};
+
+export const useClientUISettings = () => {
+  return useNetworkActivityStore((state) => state.clientUISettings);
+};