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

package/src/ui/panel.module.css

@@ -48,6 +48,12 @@
   min-width: 0;
 }
 
+.headerType {
+  width: 100px;
+  text-align: center;
+  flex-shrink: 0;
+}
+
 .headerTime {
   width: 80px;
   text-align: right;

package/src/ui/panel.tsx

@@ -1,47 +1,135 @@
 import React, { useState, useEffect, useMemo } from 'react';
-import { useRozeniteDevToolsClient } from "@rozenite/plugin-bridge";
-import { NetworkEventMap, NetworkEntry } from '../types/network';
+import { useRozeniteDevToolsClient } from '@rozenite/plugin-bridge';
+import {
+  NetworkActivityEventMap,
+  NetworkRequestId,
+  NetworkResourceType,
+} from '../types/client';
+import { NetworkEntry } from '../types/network';
 import styles from './panel.module.css';
 import { NetworkToolbar } from './network-toolbar';
 import { PanelHeader } from './components';
 import { NetworkList } from './network-list';
 import { NetworkDetails } from './network-details';
 
+// Enhanced network entry with CDP data
+type EnhancedNetworkEntry = NetworkEntry & {
+  // CDP specific fields
+  loaderId?: string;
+  documentURL?: string;
+  type?: NetworkResourceType;
+  initiator?: {
+    type: string;
+    url?: string;
+    lineNumber?: number;
+    columnNumber?: number;
+  };
+  // Request details
+  request?: {
+    url: string;
+    method: string;
+    headers: Record<string, string>;
+    postData?: string;
+    hasPostData?: boolean;
+  };
+  // Response details
+  response?: {
+    url: string;
+    status: number;
+    statusText: string;
+    headers: Record<string, string>;
+    mimeType: string;
+    encodedDataLength: number;
+    responseTime: number;
+  };
+  // Response body
+  responseBody?: {
+    body: string;
+    base64Encoded: boolean;
+  };
+  // Timing and data
+  dataLength?: number;
+  // Error details
+  blockedReason?: string;
+  corsErrorStatus?: any;
+};
+
 export default function NetworkActivityPanel() {
-  const client = useRozeniteDevToolsClient<NetworkEventMap>({
+  const client = useRozeniteDevToolsClient<NetworkActivityEventMap>({
     pluginId: '@rozenite/network-activity-plugin',
   });
 
-  const [networkEntries, setNetworkEntries] = useState<Map<string, NetworkEntry>>(new Map());
-  const [selectedRequestId, setSelectedRequestId] = useState<string | null>(null);
+  const [networkEntries, setNetworkEntries] = useState<
+    Map<string, EnhancedNetworkEntry>
+  >(new Map());
+  const [selectedRequestId, setSelectedRequestId] = useState<string | null>(
+    null
+  );
   const [isRecording, setIsRecording] = useState(true);
   const [containerHeight, setContainerHeight] = useState(0);
   const containerRef = React.useRef<HTMLDivElement>(null);
 
   // Convert Map to sorted array for rendering
   const sortedEntries = useMemo(() => {
-    return Array.from(networkEntries.values())
-      .sort((a, b) => b.startTime - a.startTime);
+    return Array.from(networkEntries.values()).sort(
+      (a, b) => b.startTime - a.startTime
+    );
   }, [networkEntries]);
 
-  const selectedEntry = selectedRequestId ? networkEntries.get(selectedRequestId) || null : null;
+  const selectedEntry = selectedRequestId
+    ? networkEntries.get(selectedRequestId) || null
+    : null;
+
+  useEffect(() => {
+    if (!client) {
+      return;
+    }
+
+    if (isRecording) {
+      client.send('network-enable', {});
+      console.log('enabling!');
+    } else {
+      client.send('network-disable', {});
+    }
+  }, [client, isRecording]);
 
   useEffect(() => {
     if (!client) return;
-    if (!isRecording) return;
 
     const subscriptions: Array<{ remove: () => void }> = [];
 
-    // Subscribe to Network events
+    // Subscribe to CDP Network events
     subscriptions.push(
       client.onMessage('Network.requestWillBeSent', (payload) => {
-        setNetworkEntries(prev => {
+        setNetworkEntries((prev) => {
           const newMap = new Map(prev);
+          const existing = newMap.get(payload.requestId);
+
           newMap.set(payload.requestId, {
             requestId: payload.requestId,
-            request: payload,
+            loaderId: payload.loaderId,
+            documentURL: payload.documentURL,
+            url: payload.request.url,
+            method: payload.request.method,
+            headers: payload.request.headers,
+            postData: payload.request.postData,
+            hasPostData: payload.request.hasPostData,
             status: 'pending',
             startTime: payload.timestamp,
+            type: payload.type,
+            initiator: payload.initiator,
+            request: payload.request,
+            // Preserve existing response data if this is a redirect
+            ...(existing && {
+              response: existing.response,
+              status: existing.status,
+              endTime: existing.endTime,
+              duration: existing.duration,
+              encodedDataLength: existing.encodedDataLength,
+              dataLength: existing.dataLength,
+              errorText: existing.errorText,
+              canceled: existing.canceled,
+            }),
           });
           return newMap;
         });
@@ -49,14 +137,15 @@ export default function NetworkActivityPanel() {
     );
 
     subscriptions.push(
-      client.onMessage('Network.requestWillBeSentExtraInfo', (payload) => {
-        setNetworkEntries(prev => {
+      client.onMessage('Network.responseReceived', (payload) => {
+        setNetworkEntries((prev) => {
           const newMap = new Map(prev);
           const entry = newMap.get(payload.requestId);
           if (entry) {
             newMap.set(payload.requestId, {
               ...entry,
-              extraInfo: payload,
+              response: payload.response,
+              status: 'loading',
             });
           }
           return newMap;
@@ -65,15 +154,15 @@ export default function NetworkActivityPanel() {
     );
 
     subscriptions.push(
-      client.onMessage('Network.responseReceived', (payload) => {
-        setNetworkEntries(prev => {
+      client.onMessage('Network.dataReceived', (payload) => {
+        setNetworkEntries((prev) => {
           const newMap = new Map(prev);
           const entry = newMap.get(payload.requestId);
           if (entry) {
             newMap.set(payload.requestId, {
               ...entry,
-              response: payload,
-              status: 'loading',
+              dataLength: payload.dataLength,
+              encodedDataLength: payload.encodedDataLength,
             });
           }
           return newMap;
@@ -83,18 +172,19 @@ export default function NetworkActivityPanel() {
 
     subscriptions.push(
       client.onMessage('Network.loadingFinished', (payload) => {
-        setNetworkEntries(prev => {
+        setNetworkEntries((prev) => {
           const newMap = new Map(prev);
           const entry = newMap.get(payload.requestId);
           if (entry) {
             const endTime = payload.timestamp;
-            const duration = (endTime - entry.startTime) * 1000; // Convert to milliseconds
+            const duration = endTime - entry.startTime;
+
             newMap.set(payload.requestId, {
               ...entry,
-              loadingFinished: payload,
               status: 'finished',
               endTime,
               duration,
+              encodedDataLength: payload.encodedDataLength,
             });
           }
           return newMap;
@@ -104,18 +194,39 @@ export default function NetworkActivityPanel() {
 
     subscriptions.push(
       client.onMessage('Network.loadingFailed', (payload) => {
-        setNetworkEntries(prev => {
+        setNetworkEntries((prev) => {
           const newMap = new Map(prev);
           const entry = newMap.get(payload.requestId);
           if (entry) {
             const endTime = payload.timestamp;
-            const duration = (endTime - entry.startTime) * 1000; // Convert to milliseconds
+            const duration = endTime - entry.startTime;
+
             newMap.set(payload.requestId, {
               ...entry,
-              loadingFailed: payload,
               status: 'failed',
               endTime,
               duration,
+              errorText: payload.errorText,
+              canceled: payload.canceled,
+            });
+          }
+          return newMap;
+        });
+      })
+    );
+
+    subscriptions.push(
+      client.onMessage('Network.responseBodyReceived', (payload) => {
+        setNetworkEntries((prev) => {
+          const newMap = new Map(prev);
+          const entry = newMap.get(payload.requestId);
+          if (entry) {
+            newMap.set(payload.requestId, {
+              ...entry,
+              responseBody: {
+                body: payload.body,
+                base64Encoded: payload.base64Encoded,
+              },
             });
           }
           return newMap;
@@ -124,7 +235,7 @@ export default function NetworkActivityPanel() {
     );
 
     return () => {
-      subscriptions.forEach(sub => sub.remove());
+      subscriptions.forEach((sub) => sub.remove());
     };
   }, [client, isRecording]);
 
@@ -141,6 +252,12 @@ export default function NetworkActivityPanel() {
     setSelectedRequestId(requestId);
   };
 
+  const requestResponseBody = (requestId: string) => {
+    if (client) {
+      client.send('Network.getResponseBody', { requestId });
+    }
+  };
+
   // Update container height on mount and resize
   useEffect(() => {
     const updateHeight = () => {
@@ -156,10 +273,7 @@ export default function NetworkActivityPanel() {
   }, []);
 
   return (
-    <div 
-      ref={containerRef}
-      className={styles.container}
-    >
+    <div ref={containerRef} className={styles.container}>
       {/* Toolbar */}
       <NetworkToolbar
         isRecording={isRecording}
@@ -177,25 +291,29 @@ export default function NetworkActivityPanel() {
             <div className={styles.headerStatus}>Status</div>
             <div className={styles.headerMethod}>Method</div>
             <div className={styles.headerName}>Name</div>
+            <div className={styles.headerType}>Type</div>
             <div className={styles.headerTime}>Time</div>
             <div className={styles.headerSize}>Size</div>
           </PanelHeader>
 
-           <div className={styles.listContent}>
-             <NetworkList
-               entries={sortedEntries}
-               selectedRequestId={selectedRequestId}
-               onSelect={handleSelectRequest}
-               height={containerHeight}
-             />
-           </div>
+          <div className={styles.listContent}>
+            <NetworkList
+              entries={sortedEntries}
+              selectedRequestId={selectedRequestId}
+              onSelect={handleSelectRequest}
+              height={containerHeight}
+            />
+          </div>
         </div>
 
         {/* Details Panel */}
         <div className={styles.detailsContainer}>
-          <NetworkDetails entry={selectedEntry} />
+          <NetworkDetails
+            entry={selectedEntry}
+            onRequestResponseBody={requestResponseBody}
+          />
         </div>
       </div>
     </div>
   );
-}
+}

package/src/ui/tanstack-query.tsx

@@ -1,4 +1,11 @@
-import { QueryCacheNotifyEvent, MutationCacheNotifyEvent, QueryClient, QueryClientProvider, Query, Mutation } from '@tanstack/react-query';
+import {
+  QueryCacheNotifyEvent,
+  MutationCacheNotifyEvent,
+  QueryClient,
+  QueryClientProvider,
+  Query,
+  Mutation,
+} from '@tanstack/react-query';
 import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools';
 import { useRozeniteDevToolsClient } from '@rozenite/plugin-bridge';
 import { useEffect, useRef } from 'react';
@@ -15,24 +22,24 @@ const queryClient = new QueryClient({
 });
 
 type DevToolsEventMap = {
-  "DEVTOOLS_TO_DEVICE": unknown;
-  "DEVICE_TO_DEVTOOLS": QueryCacheNotifyEvent | MutationCacheNotifyEvent;
-  "DEVICE_TO_DEVTOOLS_ACK": { requestId: string; success: boolean };
-  "DEVICE_TO_DEVTOOLS_INITIAL_DATA": { queries: Query[]; mutations: Mutation[] };
-  "DEVTOOLS_TO_DEVICE_INITIAL_DATA_REQUEST": unknown;
-}
+  DEVTOOLS_TO_DEVICE: unknown;
+  DEVICE_TO_DEVTOOLS: QueryCacheNotifyEvent | MutationCacheNotifyEvent;
+  DEVICE_TO_DEVTOOLS_ACK: { requestId: string; success: boolean };
+  DEVICE_TO_DEVTOOLS_INITIAL_DATA: { queries: Query[]; mutations: Mutation[] };
+  DEVTOOLS_TO_DEVICE_INITIAL_DATA_REQUEST: unknown;
+};
 
 const Wrapped = () => {
   const client = useRozeniteDevToolsClient<DevToolsEventMap>({
     pluginId: '@rozenite/tanstack-query-plugin',
-  })
+  });
 
   // Track pending acknowledgments to prevent feedback loops
   const pendingAcknowledgment = useRef<Set<string>>(new Set());
 
   useEffect(() => {
     if (!client) return;
-    client.send("DEVTOOLS_TO_DEVICE_INITIAL_DATA_REQUEST", null);
+    client.send('DEVTOOLS_TO_DEVICE_INITIAL_DATA_REQUEST', null);
   }, [client]);
 
   useEffect(() => {
@@ -40,44 +47,50 @@ const Wrapped = () => {
 
     const handleEvent = (event: Event) => {
       const detail = (event as CustomEvent).detail;
-      
+
       // Generate a unique request ID for this DevTools action
-      const requestId = `devtools-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-      
+      const requestId = `devtools-${Date.now()}-${Math.random()
+        .toString(36)
+        .substr(2, 9)}`;
+
       // Mark that we're waiting for acknowledgment
       pendingAcknowledgment.current.add(requestId);
-      
+
       // Add the request ID to the event detail
       const eventWithRequestId = {
         ...detail,
         requestId,
       };
-      
-      client.send("DEVTOOLS_TO_DEVICE", eventWithRequestId);
+
+      client.send('DEVTOOLS_TO_DEVICE', eventWithRequestId);
     };
 
     window.addEventListener('@tanstack/query-devtools-event', handleEvent);
-    return () => window.removeEventListener('@tanstack/query-devtools-event', handleEvent);
-  }, [client])
+    return () =>
+      window.removeEventListener('@tanstack/query-devtools-event', handleEvent);
+  }, [client]);
 
   useEffect(() => {
     if (!client) return;
 
-    const ackSubscription = client.onMessage("DEVICE_TO_DEVTOOLS_ACK", (ack) => {
-      // Remove the request from pending acknowledgments
-      pendingAcknowledgment.current.delete(ack.requestId);
-    });
+    const ackSubscription = client.onMessage(
+      'DEVICE_TO_DEVTOOLS_ACK',
+      (ack) => {
+        // Remove the request from pending acknowledgments
+        pendingAcknowledgment.current.delete(ack.requestId);
+      }
+    );
 
-    const subscription = client.onMessage("DEVICE_TO_DEVTOOLS", (event) => {
+    const subscription = client.onMessage('DEVICE_TO_DEVTOOLS', (event) => {
       // Don't reflect events if we're waiting for acknowledgments
       if (pendingAcknowledgment.current.size > 0) {
         return;
       }
-      
+
       if ('query' in event) {
         const { query, type } = event as QueryCacheNotifyEvent;
         const queryCache = queryClient.getQueryCache();
-        
+
         if (type === 'updated') {
           const existingQuery = queryCache.get(query.queryHash);
           if (existingQuery) {
@@ -114,84 +127,78 @@ const Wrapped = () => {
       } else if ('mutation' in event) {
         const { mutation, type } = event as MutationCacheNotifyEvent;
         const mutationCache = queryClient.getMutationCache();
-        
+
         if (type === 'added') {
-          const existingMutation = mutationCache.find({ mutationKey: mutation.options.mutationKey });
+          const existingMutation = mutationCache.find({
+            mutationKey: mutation.options.mutationKey,
+          });
           if (existingMutation) {
             mutationCache.remove(existingMutation);
           }
 
-          mutationCache.build(
-            queryClient,
-            mutation.options,
-            mutation.state
-          );
+          mutationCache.build(queryClient, mutation.options, mutation.state);
         } else if (type === 'removed') {
-          const existingMutation = mutationCache.find({ mutationKey: mutation.options.mutationKey });
+          const existingMutation = mutationCache.find({
+            mutationKey: mutation.options.mutationKey,
+          });
           if (existingMutation) {
             mutationCache.remove(existingMutation);
           }
         } else if (type === 'updated') {
-          const existingMutation = mutationCache.find({ mutationKey: mutation.options.mutationKey });
-          
+          const existingMutation = mutationCache.find({
+            mutationKey: mutation.options.mutationKey,
+          });
+
           if (existingMutation) {
             mutationCache.remove(existingMutation);
-            mutationCache.build(
-              queryClient,
-              mutation.options,
-              mutation.state
-            );
+            mutationCache.build(queryClient, mutation.options, mutation.state);
           }
         }
       }
-    })
-
-    const initialDataSubscription = client.onMessage("DEVICE_TO_DEVTOOLS_INITIAL_DATA", (event) => {
-      // Clear existing data first
-      queryClient.clear();
-      queryClient.getMutationCache().clear();
-      
-      // Restore queries
-      const queryCache = queryClient.getQueryCache();
-      event.queries.forEach(query => {
-        queryCache.build(
-          queryClient,
-          {
-            queryKey: query.queryKey,
-            queryHash: query.queryHash,
-          },
-          query.state
-        );
-      });
-      
-      // Restore mutations
-      const mutationCache = queryClient.getMutationCache();
-      event.mutations.forEach(mutation => {
-        mutationCache.build(
-          queryClient,
-          mutation.options,
-          mutation.state
-        );
-      });
     });
 
+    const initialDataSubscription = client.onMessage(
+      'DEVICE_TO_DEVTOOLS_INITIAL_DATA',
+      (event) => {
+        // Clear existing data first
+        queryClient.clear();
+        queryClient.getMutationCache().clear();
+
+        // Restore queries
+        const queryCache = queryClient.getQueryCache();
+        event.queries.forEach((query) => {
+          queryCache.build(
+            queryClient,
+            {
+              queryKey: query.queryKey,
+              queryHash: query.queryHash,
+            },
+            query.state
+          );
+        });
+
+        // Restore mutations
+        const mutationCache = queryClient.getMutationCache();
+        event.mutations.forEach((mutation) => {
+          mutationCache.build(queryClient, mutation.options, mutation.state);
+        });
+      }
+    );
+
     return () => {
       subscription.remove();
       ackSubscription.remove();
       initialDataSubscription.remove();
     };
-  }, [client, queryClient])
+  }, [client, queryClient]);
 
-
-  return (
-    <ReactQueryDevtoolsPanel />
-  )
-}
+  return <ReactQueryDevtoolsPanel />;
+};
 
 export default function TanStackQueryPanel() {
   return (
     <QueryClientProvider client={queryClient}>
       <Wrapped />
     </QueryClientProvider>
-  )
-}
+  );
+}

package/src/ui/utils.ts

@@ -20,12 +20,18 @@ export const getStatusColor = (status: number): string => {
 
 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';
+    case 'GET':
+      return '#61affe';
+    case 'POST':
+      return '#49cc90';
+    case 'PUT':
+      return '#fca130';
+    case 'DELETE':
+      return '#f93e3e';
+    case 'PATCH':
+      return '#50e3c2';
+    default:
+      return '#757575';
   }
 };
 
@@ -61,29 +67,32 @@ export const truncateText = (text: string, maxLength: number): string => {
 
 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)}...`;
+
+    return `${protocol}//${hostname}${fullPath.substring(
+      0,
+      remainingLength
+    )}...`;
   } catch {
     return truncateText(url, maxLength);
   }
-}; 
+};

package/tsconfig.json

@@ -16,10 +16,17 @@
     "noEmit": true,
     "jsx": "react-jsx"
   },
-  "include": [
-    "src/**/*",
-    "react-native.ts",
-    "rozenite.config.ts"
-  ],
-  "exclude": ["node_modules", "dist", "build"]
+  "include": ["src/**/*", "react-native.ts", "rozenite.config.ts"],
+  "exclude": ["node_modules", "dist", "build"],
+  "references": [
+    {
+      "path": "../plugin-bridge"
+    },
+    {
+      "path": "../cli"
+    },
+    {
+      "path": "../vite-plugin"
+    }
+  ]
 }

package/vite.config.ts

@@ -10,7 +10,7 @@ export default defineConfig({
     outDir: './dist',
     emptyOutDir: false,
     reportCompressedSize: false,
-    minify: true,
+    minify: false,
     sourcemap: false,
   },
   server: {