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

package/src/ui/tabs/TimingTab.tsx

@@ -1,32 +1,17 @@
 import { ScrollArea } from '../components/ScrollArea';
-import { NetworkRequest } from '../components/RequestList';
-import { NetworkEntry } from '../types';
+import { HttpNetworkEntry } from '../state/model';
 
 export type TimingTabProps = {
-  selectedRequest: NetworkRequest | null;
-  networkEntries: Map<string, NetworkEntry>;
+  selectedRequest: HttpNetworkEntry;
 };
 
-export const TimingTab = ({
-  selectedRequest,
-  networkEntries,
-}: TimingTabProps) => {
-  const networkEntry = selectedRequest
-    ? networkEntries.get(selectedRequest.id)
+export const TimingTab = ({ selectedRequest }: TimingTabProps) => {
+  const startTime = selectedRequest.timestamp || 0;
+  const endTime = selectedRequest.duration
+    ? selectedRequest.timestamp + selectedRequest.duration
     : 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 ttfb = selectedRequest.ttfb || 0;
+  const duration = selectedRequest.duration || 0;
 
   const formatTime = (time: number): string => {
     if (time < 1) {
@@ -40,29 +25,33 @@ export const TimingTab = ({
   };
 
   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>
+    <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="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 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>

package/src/ui/types.ts

@@ -4,14 +4,18 @@ import {
   Response,
   Initiator,
   ResourceType,
+  HttpHeaders,
 } from '../shared/client';
 
 export type NetworkEntry = {
   requestId: RequestId;
   url: string;
   method: string;
-  headers: Record<string, string>;
-  postData?: string;
+  headers: HttpHeaders;
+  body?: {
+    type: string;
+    data: string;
+  };
   status: 'pending' | 'loading' | 'finished' | 'failed';
   startTime: number;
   endTime?: 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/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

@@ -1,348 +1,52 @@
-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 { useEffect } from 'react';
+import { Toolbar } from '../components/Toolbar';
+import { RequestList } from '../components/RequestList';
+import { SidePanel } from '../components/SidePanel';
+import { NetworkActivityDevToolsClient } from '../../shared/client';
 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';
+  useNetworkActivityClientManagement,
+  useHasSelectedRequest,
+  useNetworkActivityActions,
+} from '../state/hooks';
 
 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]);
+  const actions = useNetworkActivityActions();
+  const clientManagement = useNetworkActivityClientManagement();
+  const hasSelectedRequest = useHasSelectedRequest();
 
   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);
-      });
-    };
+    if (!client) {
+      return;
+    }
 
-    const unsubscribeResponseBody = client.onMessage(
-      'response-body',
-      handleResponseBody
-    );
+    clientManagement.setupClient(client);
+    actions.setRecording(true);
 
     return () => {
-      unsubscribeRequestSent.remove();
-      unsubscribeResponseReceived.remove();
-      unsubscribeRequestCompleted.remove();
-      unsubscribeRequestFailed.remove();
-      unsubscribeResponseBody.remove();
+      actions.setRecording(false);
+      clientManagement.cleanupClient();
     };
-  }, [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);
-  };
+  }, [client, clientManagement, actions]);
 
   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>
+      <Toolbar />
 
       <div className="flex flex-1 overflow-hidden">
         {/* Request List */}
         <div
           className={`flex flex-col ${
-            selectedRequest ? 'w-1/2' : 'w-full'
+            hasSelectedRequest ? 'w-1/2' : 'w-full'
           } border-r border-gray-700 overflow-hidden`}
         >
-          <RequestList
-            networkEntries={networkEntries}
-            selectedRequestId={selectedRequestId}
-            onRequestSelect={setSelectedRequestId}
-          />
+          <RequestList />
         </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>
-        )}
+        {hasSelectedRequest && <SidePanel />}
       </div>
     </div>
   );

package/tailwind.config.ts

@@ -7,6 +7,9 @@ const config: Config = {
   content: ['./src/ui/**/*.{js,ts,jsx,tsx,mdx}'],
   theme: {
     extend: {
+      translate: {
+        '0.75': '0.1875rem',
+      },
       colors: {
         background: 'hsl(var(--background))',
         foreground: 'hsl(var(--foreground))',

package/vite.config.ts

@@ -12,6 +12,18 @@ export default defineConfig({
     reportCompressedSize: false,
     minify: false,
     sourcemap: false,
+    rollupOptions: {
+      output: {
+        manualChunks: (id) => {
+          // Mitigate https://github.com/facebook/metro/issues/836
+          if (id.includes('event-source.ts')) {
+            return 'event-source';
+          }
+
+          return undefined;
+        },
+      },
+    },
   },
   server: {
     port: 3000,