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

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

@@ -0,0 +1,55 @@
+'use client';
+
+import * as React from 'react';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+
+import { cn } from '../utils/cn';
+
+const Tabs = TabsPrimitive.Root;
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      'inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',
+      className
+    )}
+    {...props}
+  />
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-gray-100 data-[state=active]:shadow-sm',
+      className
+    )}
+    {...props}
+  />
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <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 min-h-0',
+      className
+    )}
+    {...props}
+  />
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };

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

@@ -0,0 +1,90 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+}
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 3.9%;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+    --radius: 0.5rem;
+    --sidebar-background: 0 0% 98%;
+    --sidebar-foreground: 240 5.3% 26.1%;
+    --sidebar-primary: 240 5.9% 10%;
+    --sidebar-primary-foreground: 0 0% 98%;
+    --sidebar-accent: 240 4.8% 95.9%;
+    --sidebar-accent-foreground: 240 5.9% 10%;
+    --sidebar-border: 220 13% 91%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
+  .dark {
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+    --sidebar-background: 240 5.9% 10%;
+    --sidebar-foreground: 240 4.8% 95.9%;
+    --sidebar-primary: 224.3 76.3% 48%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 240 3.7% 15.9%;
+    --sidebar-accent-foreground: 240 4.8% 95.9%;
+    --sidebar-border: 240 3.7% 15.9%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

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,44 @@
+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) || []
+  );
+};