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

package/src/ui/network-list.tsx

@@ -0,0 +1,145 @@
+import React from 'react';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { NetworkEntry } from '../types/network';
+import { getStatusColor, getMethodColor, formatDuration, formatFileSize, parseUrl } from './utils';
+import { Badge, Tooltip } from './components';
+import styles from './network-list.module.css';
+
+interface NetworkListProps {
+  entries: NetworkEntry[];
+  selectedRequestId: string | null;
+  onSelect: (requestId: string) => void;
+  height: number;
+}
+
+const ITEM_HEIGHT = 60; // Height of each network list item
+
+export const NetworkList: React.FC<NetworkListProps> = ({
+  entries,
+  selectedRequestId,
+  onSelect,
+  height,
+}) => {
+  const parentRef = React.useRef<HTMLDivElement>(null);
+
+  const virtualizer = useVirtualizer({
+    count: entries.length,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => ITEM_HEIGHT,
+    overscan: 5,
+  });
+
+  const NetworkListItem: React.FC<{ entry: NetworkEntry; index: number }> = ({ entry, index }) => {
+    const status = entry.response?.response.status || 0;
+    const method = entry.request.request.method;
+    const url = entry.request.request.url;
+    const { domain, path } = parseUrl(url);
+    
+    // Get size information
+    const encodedSize = entry.response?.response.encodedDataLength || 0;
+    const decodedSize = entry.response?.response.decodedBodySize || 0;
+    const displaySize = decodedSize > 0 ? decodedSize : encodedSize;
+
+    const isSelected = selectedRequestId === entry.requestId;
+
+    return (
+      <div
+        className={isSelected ? styles.listItemSelected : styles.listItem}
+        onClick={() => onSelect(entry.requestId)}
+      >
+        <div className={styles.statusColumn}>
+          <Tooltip 
+            content={`Status: ${status || 'Pending'}`} 
+            showOnlyWhenTruncated
+            variant={status >= 400 ? 'error' : status >= 300 ? 'warning' : 'info'}
+          >
+            <Badge color={getStatusColor(status)}>
+              {status || '...'}
+            </Badge>
+          </Tooltip>
+        </div>
+        <div className={styles.methodColumn}>
+          <Tooltip 
+            content={`Method: ${method}`} 
+            showOnlyWhenTruncated
+            variant="info"
+          >
+            <Badge color={getMethodColor(method)}>
+              {method}
+            </Badge>
+          </Tooltip>
+        </div>
+        <div className={styles.urlColumn}>
+          <Tooltip content={domain} showOnlyWhenTruncated>
+            <div className={styles.domainText}>
+              {domain}
+            </div>
+          </Tooltip>
+          <Tooltip content={path} showOnlyWhenTruncated>
+            <div className={styles.pathText}>
+              {path}
+            </div>
+          </Tooltip>
+          <Tooltip content={url} showOnlyWhenTruncated>
+            <div className={styles.fullUrlText}>
+              {url}
+            </div>
+          </Tooltip>
+        </div>
+        <div className={styles.durationColumn}>
+          <Tooltip content={`Duration: ${entry.duration ? formatDuration(entry.duration) : 'Pending'}`} showOnlyWhenTruncated>
+            <span className={styles.columnText}>
+              {entry.duration ? formatDuration(entry.duration) : '...'}
+            </span>
+          </Tooltip>
+        </div>
+        <div className={styles.sizeColumn}>
+          <Tooltip content={`Size: ${displaySize > 0 ? formatFileSize(displaySize) : 'Unknown'}`} showOnlyWhenTruncated>
+            <span className={styles.columnText}>
+              {displaySize > 0 ? formatFileSize(displaySize) : '...'}
+            </span>
+          </Tooltip>
+        </div>
+      </div>
+    );
+  };
+
+  if (entries.length === 0) {
+    return (
+      <div className={styles.emptyContainer} style={{ height }}>
+        <div className={styles.emptyText}>
+          No network requests recorded
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      ref={parentRef}
+      className={styles.container}
+      style={{ height }}
+    >
+      <div
+        className={styles.virtualContainer}
+        style={{ height: `${virtualizer.getTotalSize()}px` }}
+      >
+        {virtualizer.getVirtualItems().map((virtualItem: any) => (
+          <div
+            key={virtualItem.key}
+            className={styles.virtualItem}
+            style={{
+              height: `${virtualItem.size}px`,
+              transform: `translateY(${virtualItem.start}px)`,
+            }}
+          >
+            <NetworkListItem
+              entry={entries[virtualItem.index]}
+              index={virtualItem.index}
+            />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}; 

package/src/ui/network-toolbar.module.css

@@ -0,0 +1,9 @@
+.recordingButton {
+  margin-right: 8px;
+}
+
+.requestCount {
+  margin-left: auto;
+  font-size: 12px;
+  color: #666;
+} 

package/src/ui/network-toolbar.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Button, Toolbar } from './components';
+import styles from './network-toolbar.module.css';
+
+interface NetworkToolbarProps {
+  isRecording: boolean;
+  onToggleRecording: () => void;
+  onClear: () => void;
+  requestCount: number;
+}
+
+export const NetworkToolbar: React.FC<NetworkToolbarProps> = ({
+  isRecording,
+  onToggleRecording,
+  onClear,
+  requestCount,
+}) => {
+  return (
+    <Toolbar>
+      <Button
+        onClick={onToggleRecording}
+        variant={isRecording ? 'danger' : 'success'}
+        size="small"
+        className={styles.recordingButton}
+      >
+        {isRecording ? 'Stop' : 'Start'} Recording
+      </Button>
+      <Button
+        onClick={onClear}
+        variant="secondary"
+        size="small"
+      >
+        Clear
+      </Button>
+      <div className={styles.requestCount}>
+        {requestCount} requests
+      </div>
+    </Toolbar>
+  );
+}; 

package/src/ui/panel.module.css

@@ -0,0 +1,61 @@
+.container {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  font-family: system-ui, -apple-system, sans-serif;
+}
+
+.mainContent {
+  flex: 1;
+  display: flex;
+  overflow: hidden;
+  min-height: 0;
+}
+
+.networkListContainer {
+  width: 60%;
+  border-right: 1px solid #e0e0e0;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.listContent {
+  flex: 1;
+}
+
+.detailsContainer {
+  width: 40%;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.headerStatus {
+  width: 60px;
+  text-align: center;
+  flex-shrink: 0;
+}
+
+.headerMethod {
+  width: 80px;
+  text-align: center;
+  flex-shrink: 0;
+}
+
+.headerName {
+  flex: 1;
+  min-width: 0;
+}
+
+.headerTime {
+  width: 80px;
+  text-align: right;
+  flex-shrink: 0;
+}
+
+.headerSize {
+  width: 80px;
+  text-align: right;
+  flex-shrink: 0;
+} 

package/src/ui/panel.tsx

@@ -0,0 +1,201 @@
+import React, { useState, useEffect, useMemo } from 'react';
+import { useRozeniteDevToolsClient } from "@rozenite/plugin-bridge";
+import { NetworkEventMap, 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';
+
+export default function NetworkActivityPanel() {
+  const client = useRozeniteDevToolsClient<NetworkEventMap>({
+    pluginId: '@rozenite/network-activity-plugin',
+  });
+
+  const [networkEntries, setNetworkEntries] = useState<Map<string, NetworkEntry>>(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);
+  }, [networkEntries]);
+
+  const selectedEntry = selectedRequestId ? networkEntries.get(selectedRequestId) || null : null;
+
+  useEffect(() => {
+    if (!client) return;
+    if (!isRecording) return;
+
+    const subscriptions: Array<{ remove: () => void }> = [];
+
+    // Subscribe to Network events
+    subscriptions.push(
+      client.onMessage('Network.requestWillBeSent', (payload) => {
+        setNetworkEntries(prev => {
+          const newMap = new Map(prev);
+          newMap.set(payload.requestId, {
+            requestId: payload.requestId,
+            request: payload,
+            status: 'pending',
+            startTime: payload.timestamp,
+          });
+          return newMap;
+        });
+      })
+    );
+
+    subscriptions.push(
+      client.onMessage('Network.requestWillBeSentExtraInfo', (payload) => {
+        setNetworkEntries(prev => {
+          const newMap = new Map(prev);
+          const entry = newMap.get(payload.requestId);
+          if (entry) {
+            newMap.set(payload.requestId, {
+              ...entry,
+              extraInfo: payload,
+            });
+          }
+          return newMap;
+        });
+      })
+    );
+
+    subscriptions.push(
+      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,
+              response: payload,
+              status: 'loading',
+            });
+          }
+          return newMap;
+        });
+      })
+    );
+
+    subscriptions.push(
+      client.onMessage('Network.loadingFinished', (payload) => {
+        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
+            newMap.set(payload.requestId, {
+              ...entry,
+              loadingFinished: payload,
+              status: 'finished',
+              endTime,
+              duration,
+            });
+          }
+          return newMap;
+        });
+      })
+    );
+
+    subscriptions.push(
+      client.onMessage('Network.loadingFailed', (payload) => {
+        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
+            newMap.set(payload.requestId, {
+              ...entry,
+              loadingFailed: payload,
+              status: 'failed',
+              endTime,
+              duration,
+            });
+          }
+          return newMap;
+        });
+      })
+    );
+
+    return () => {
+      subscriptions.forEach(sub => sub.remove());
+    };
+  }, [client, isRecording]);
+
+  const clearNetworkLog = () => {
+    setNetworkEntries(new Map());
+    setSelectedRequestId(null);
+  };
+
+  const toggleRecording = () => {
+    setIsRecording(!isRecording);
+  };
+
+  const handleSelectRequest = (requestId: string) => {
+    setSelectedRequestId(requestId);
+  };
+
+  // Update container height on mount and resize
+  useEffect(() => {
+    const updateHeight = () => {
+      if (containerRef.current) {
+        const rect = containerRef.current.getBoundingClientRect();
+        setContainerHeight(rect.height - 120); // Subtract toolbar and header height
+      }
+    };
+
+    updateHeight();
+    window.addEventListener('resize', updateHeight);
+    return () => window.removeEventListener('resize', updateHeight);
+  }, []);
+
+  return (
+    <div 
+      ref={containerRef}
+      className={styles.container}
+    >
+      {/* Toolbar */}
+      <NetworkToolbar
+        isRecording={isRecording}
+        onToggleRecording={toggleRecording}
+        onClear={clearNetworkLog}
+        requestCount={sortedEntries.length}
+      />
+
+      {/* Main Content */}
+      <div className={styles.mainContent}>
+        {/* Network List */}
+        <div className={styles.networkListContainer}>
+          {/* List Header */}
+          <PanelHeader>
+            <div className={styles.headerStatus}>Status</div>
+            <div className={styles.headerMethod}>Method</div>
+            <div className={styles.headerName}>Name</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>
+
+        {/* Details Panel */}
+        <div className={styles.detailsContainer}>
+          <NetworkDetails entry={selectedEntry} />
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/ui/tanstack-query.tsx

@@ -0,0 +1,197 @@
+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';
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      queryFn: async () => {
+        // Prevent refetch from throwing an error
+        return Promise.resolve(null);
+      },
+    },
+  },
+});
+
+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;
+}
+
+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]);
+
+  useEffect(() => {
+    if (!client) return;
+
+    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)}`;
+      
+      // 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);
+    };
+
+    window.addEventListener('@tanstack/query-devtools-event', handleEvent);
+    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 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) {
+            existingQuery.setState(query.state);
+          } else {
+            queryCache.build(
+              queryClient,
+              {
+                queryKey: query.queryKey,
+                queryHash: query.queryHash,
+              },
+              query.state
+            );
+          }
+        } else if (type === 'added') {
+          const existingQuery = queryCache.get(query.queryHash);
+          if (!existingQuery) {
+            // Only add if it doesn't already exist
+            queryCache.build(
+              queryClient,
+              {
+                queryKey: query.queryKey,
+                queryHash: query.queryHash,
+              },
+              query.state
+            );
+          }
+        } else if (type === 'removed') {
+          const existingQuery = queryCache.get(query.queryHash);
+          if (existingQuery) {
+            queryCache.remove(existingQuery);
+          }
+        }
+      } 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 });
+          if (existingMutation) {
+            mutationCache.remove(existingMutation);
+          }
+
+          mutationCache.build(
+            queryClient,
+            mutation.options,
+            mutation.state
+          );
+        } else if (type === 'removed') {
+          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 });
+          
+          if (existingMutation) {
+            mutationCache.remove(existingMutation);
+            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])
+
+
+  return (
+    <ReactQueryDevtoolsPanel />
+  )
+}
+
+export default function TanStackQueryPanel() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <Wrapped />
+    </QueryClientProvider>
+  )
+}