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

package/src/ui/network-details.tsx

@@ -1,14 +1,124 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { NetworkEntry } from '../types/network';
 import { formatFileSize, formatDuration, formatLongUrl } from './utils';
 import { Card, EmptyState, Tooltip } from './components';
 import styles from './network-details.module.css';
 
+// Enhanced network entry type to match the panel
+type EnhancedNetworkEntry = NetworkEntry & {
+  type?: string;
+  initiator?: {
+    type: string;
+    url?: string;
+    lineNumber?: number;
+    columnNumber?: number;
+  };
+  request?: {
+    url: string;
+    method: string;
+    headers: Record<string, string>;
+    postData?: string;
+    hasPostData?: boolean;
+  };
+  response?: {
+    url: string;
+    status: number;
+    statusText: string;
+    headers: Record<string, string>;
+    mimeType: string;
+    encodedDataLength: number;
+    responseTime: number;
+  };
+  responseBody?: {
+    body: string;
+    base64Encoded: boolean;
+  };
+  dataLength?: number;
+};
+
+// Symbolication response types
+interface SymbolicatedStackFrame {
+  column: number;
+  file: string;
+  lineNumber: number;
+  methodName: string;
+  collapse: boolean;
+}
+
+interface CodeFrame {
+  content: string;
+  location: {
+    row: number;
+    column: number;
+  };
+  fileName: string;
+}
+
+interface SymbolicationResponse {
+  codeFrame: CodeFrame;
+  stack: SymbolicatedStackFrame[];
+}
+
 interface NetworkDetailsProps {
-  entry: NetworkEntry | null;
+  entry: EnhancedNetworkEntry | null;
+  onRequestResponseBody?: (requestId: string) => void;
 }
 
-export const NetworkDetails: React.FC<NetworkDetailsProps> = ({ entry }) => {
+export const NetworkDetails: React.FC<NetworkDetailsProps> = ({
+  entry,
+  onRequestResponseBody,
+}) => {
+  const [isSymbolicating, setIsSymbolicating] = useState(false);
+  const [, forceUpdate] = useState({});
+
+  const symbolicateCaller = async () => {
+    if (!entry?.initiator) return;
+
+    setIsSymbolicating(true);
+    try {
+      const stackData = {
+        stack: [
+          {
+            column: entry.initiator.columnNumber || 0,
+            file: entry.initiator.url || '',
+            lineNumber: entry.initiator.lineNumber || 0,
+          },
+        ],
+      };
+
+      const response = await fetch(`${window.location.origin}/symbolicate`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(stackData),
+      });
+
+      if (response.ok) {
+        const data: SymbolicationResponse = await response.json();
+
+        // Update the entry.initiator with symbolicated data
+        if (data.stack && data.stack.length > 0) {
+          const symbolicatedFrame = data.stack[0];
+          if (entry.initiator) {
+            entry.initiator.url = symbolicatedFrame.file;
+            entry.initiator.lineNumber = symbolicatedFrame.lineNumber;
+            entry.initiator.columnNumber = symbolicatedFrame.column;
+            // Add method name to initiator
+            (entry.initiator as any).methodName = symbolicatedFrame.methodName;
+          }
+        }
+        forceUpdate({});
+      } else {
+        console.error('Symbolication failed:', response.statusText);
+      }
+    } catch (error) {
+      console.error('Symbolication error:', error);
+    } finally {
+      setIsSymbolicating(false);
+    }
+  };
+
   if (!entry) {
     return <EmptyState message="Select a request to view details" />;
   }
@@ -20,25 +130,59 @@ export const NetworkDetails: React.FC<NetworkDetailsProps> = ({ entry }) => {
         <h3 className={styles.cardTitle}>General</h3>
         <div className={styles.infoText}>
           <div className={styles.infoRowUrl}>
-            <strong>Request URL:</strong> 
-            <Tooltip content={entry.request.request.url} showOnlyWhenTruncated>
+            <strong>Request URL:</strong>
+            <Tooltip content={entry.url} showOnlyWhenTruncated>
               <span className={styles.urlText}>
-                {formatLongUrl(entry.request.request.url, 100)}
+                {formatLongUrl(entry.url, 100)}
               </span>
             </Tooltip>
           </div>
           <div className={styles.infoRow}>
-            <strong>Request Method:</strong> {entry.request.request.method}
-          </div>
-          <div className={styles.infoRow}>
-            <strong>Status Code:</strong> {entry.response?.response.status || 'Pending'}
+            <strong>Request Method:</strong> {entry.method}
           </div>
           <div className={styles.infoRow}>
-            <strong>Remote Address:</strong> {entry.response?.response.remoteIPAddress || 'Unknown'}
+            <strong>Status Code:</strong> {entry.response?.status || 'Pending'}
           </div>
           <div className={styles.infoRow}>
-            <strong>Referrer Policy:</strong> {entry.request.request.headers['referer'] || 'no-referrer'}
+            <strong>Status:</strong> {entry.status}
           </div>
+          {entry.type && (
+            <div className={styles.infoRow}>
+              <strong>Resource Type:</strong> {entry.type}
+            </div>
+          )}
+          {entry.initiator && (
+            <div className={styles.infoRow}>
+              <strong>Initiator:</strong> {entry.initiator.type}
+              {(entry.initiator as any).methodName && (
+                <div className={styles.infoRowSub}>
+                  <strong>Method:</strong> {(entry.initiator as any).methodName}
+                </div>
+              )}
+              {entry.initiator.url && (
+                <div className={styles.infoRowSub}>
+                  <strong>URL:</strong> {entry.initiator.url}
+                </div>
+              )}
+              {entry.initiator.lineNumber && (
+                <div className={styles.infoRowSub}>
+                  <strong>Line:</strong> {entry.initiator.lineNumber}:
+                  {entry.initiator.columnNumber || 0}
+                </div>
+              )}
+              <div className={styles.infoRowSub}>
+                <button
+                  className={styles.symbolicateButton}
+                  onClick={symbolicateCaller}
+                  disabled={isSymbolicating}
+                >
+                  {isSymbolicating
+                    ? 'Symbolicating...'
+                    : 'Symbolicate initiator'}
+                </button>
+              </div>
+            </div>
+          )}
         </div>
       </Card>
 
@@ -47,13 +191,11 @@ export const NetworkDetails: React.FC<NetworkDetailsProps> = ({ entry }) => {
         <Card className={styles.card}>
           <h3 className={styles.cardTitle}>Response Headers</h3>
           <div className={styles.headersContainer}>
-            {Object.entries(entry.response.response.headers).map(([key, value]) => (
+            {Object.entries(entry.response.headers).map(([key, value]) => (
               <div key={key} className={styles.headerRow}>
-                <strong>{key}:</strong> 
+                <strong>{key}:</strong>
                 <Tooltip content={value} showOnlyWhenTruncated>
-                  <span className={styles.headerValue}>
-                    {value}
-                  </span>
+                  <span className={styles.headerValue}>{value}</span>
                 </Tooltip>
               </div>
             ))}
@@ -65,13 +207,11 @@ export const NetworkDetails: React.FC<NetworkDetailsProps> = ({ entry }) => {
       <Card className={styles.card}>
         <h3 className={styles.cardTitle}>Request Headers</h3>
         <div className={styles.headersContainer}>
-          {Object.entries(entry.request.request.headers).map(([key, value]) => (
+          {Object.entries(entry.headers).map(([key, value]) => (
             <div key={key} className={styles.headerRow}>
-              <strong>{key}:</strong> 
+              <strong>{key}:</strong>
               <Tooltip content={value} showOnlyWhenTruncated>
-                <span className={styles.headerValue}>
-                  {value}
-                </span>
+                <span className={styles.headerValue}>{value}</span>
               </Tooltip>
             </div>
           ))}
@@ -79,51 +219,122 @@ export const NetworkDetails: React.FC<NetworkDetailsProps> = ({ entry }) => {
       </Card>
 
       {/* Size Information */}
-      {entry.response && (
+      {(entry.encodedDataLength || entry.dataLength) && (
         <Card className={styles.card}>
           <h3 className={styles.cardTitle}>Size Information</h3>
           <div className={styles.infoText}>
-            <div className={styles.infoRow}>
-              <strong>Decoded Body Size:</strong> {formatFileSize(entry.response.response.decodedBodySize)}
-            </div>
+            {entry.dataLength && (
+              <div className={styles.infoRow}>
+                <strong>Data Length:</strong> {formatFileSize(entry.dataLength)}
+              </div>
+            )}
+            {entry.encodedDataLength && (
+              <div className={styles.infoRow}>
+                <strong>Encoded Data Length:</strong>{' '}
+                {formatFileSize(entry.encodedDataLength)}
+              </div>
+            )}
+            {entry.response?.mimeType && (
+              <div className={styles.infoRow}>
+                <strong>MIME Type:</strong> {entry.response.mimeType}
+              </div>
+            )}
           </div>
         </Card>
       )}
 
       {/* Timing Information */}
-      {entry.response?.response.timing && (
+      {entry.duration && (
         <Card className={styles.card}>
           <h3 className={styles.cardTitle}>Timing</h3>
           <div className={styles.infoText}>
             <div className={styles.infoRow}>
-              <strong>Time to First Byte:</strong> {entry.response.response.timing.receiveHeadersEnd - entry.response.response.timing.sendEnd}ms
+              <strong>Duration:</strong> {formatDuration(entry.duration)}
             </div>
             <div className={styles.infoRow}>
-              <strong>Total Duration:</strong> {entry.duration ? formatDuration(entry.duration) : 'Unknown'}
+              <strong>Start Time:</strong>{' '}
+              {new Date(entry.startTime).toLocaleTimeString()}
             </div>
+            {entry.endTime && (
+              <div className={styles.infoRow}>
+                <strong>End Time:</strong>{' '}
+                {new Date(entry.endTime).toLocaleTimeString()}
+              </div>
+            )}
+            {entry.response?.responseTime && (
+              <div className={styles.infoRow}>
+                <strong>Response Time:</strong>{' '}
+                {new Date(entry.response.responseTime).toLocaleTimeString()}
+              </div>
+            )}
           </div>
         </Card>
       )}
 
       {/* Error Information */}
-      {entry.loadingFailed && (
+      {entry.status === 'failed' && (
         <Card className={styles.card}>
-          <h3 className={styles.cardTitleError}>Error</h3>
+          <h3 className={styles.cardTitle}>Error Information</h3>
           <div className={styles.infoText}>
             <div className={styles.infoRow}>
-              <strong>Error Text:</strong> {entry.loadingFailed.errorText}
+              <strong>Error:</strong> {entry.errorText || 'Unknown error'}
             </div>
             <div className={styles.infoRow}>
-              <strong>Type:</strong> {entry.loadingFailed.type}
+              <strong>Canceled:</strong> {entry.canceled ? 'Yes' : 'No'}
             </div>
-            {entry.loadingFailed.blockedReason && (
-              <div className={styles.infoRow}>
-                <strong>Blocked Reason:</strong> {entry.loadingFailed.blockedReason}
-              </div>
-            )}
-            {entry.loadingFailed.canceled && (
+          </div>
+        </Card>
+      )}
+
+      {/* Post Data */}
+      {entry.postData && (
+        <Card className={styles.card}>
+          <h3 className={styles.cardTitle}>Post Data</h3>
+          <div className={styles.postDataContainer}>
+            <pre className={styles.postDataText}>{entry.postData}</pre>
+          </div>
+        </Card>
+      )}
+
+      {/* Response Body */}
+      {entry.response && (
+        <Card className={styles.card}>
+          <h3 className={styles.cardTitle}>Response Body</h3>
+          {entry.responseBody ? (
+            <div className={styles.responseBodyContainer}>
+              <pre className={styles.responseBodyText}>
+                {entry.responseBody.base64Encoded
+                  ? atob(entry.responseBody.body)
+                  : entry.responseBody.body}
+              </pre>
+            </div>
+          ) : (
+            <div className={styles.responseBodyContainer}>
+              <button
+                className={styles.loadResponseBodyButton}
+                onClick={() => onRequestResponseBody?.(entry.requestId)}
+                disabled={!onRequestResponseBody}
+              >
+                Load Response Body
+              </button>
+            </div>
+          )}
+        </Card>
+      )}
+
+      {/* Request Details */}
+      {entry.request && (
+        <Card className={styles.card}>
+          <h3 className={styles.cardTitle}>Request Details</h3>
+          <div className={styles.infoText}>
+            <div className={styles.infoRow}>
+              <strong>Has Post Data:</strong>{' '}
+              {entry.request.hasPostData ? 'Yes' : 'No'}
+            </div>
+            {entry.request.postData && (
               <div className={styles.infoRow}>
-                <strong>Canceled:</strong> Yes
+                <strong>Post Data Length:</strong>{' '}
+                {entry.request.postData.length} characters
               </div>
             )}
           </div>
@@ -131,4 +342,4 @@ export const NetworkDetails: React.FC<NetworkDetailsProps> = ({ entry }) => {
       )}
     </div>
   );
-}; 
+};

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

@@ -63,6 +63,12 @@
   min-width: 0;
 }
 
+.typeColumn {
+  width: 100px;
+  text-align: center;
+  flex-shrink: 0;
+}
+
 .domainText {
   font-weight: bold;
   color: #333;

package/src/ui/network-list.tsx

@@ -1,12 +1,46 @@
 import React from 'react';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { NetworkEntry } from '../types/network';
-import { getStatusColor, getMethodColor, formatDuration, formatFileSize, parseUrl } from './utils';
+import {
+  getStatusColor,
+  getMethodColor,
+  formatDuration,
+  formatFileSize,
+  parseUrl,
+} from './utils';
 import { Badge, Tooltip } from './components';
 import styles from './network-list.module.css';
 
+// Enhanced network entry type to match the panel
+type EnhancedNetworkEntry = NetworkEntry & {
+  type?: string;
+  initiator?: {
+    type: string;
+    url?: string;
+    lineNumber?: number;
+    columnNumber?: number;
+  };
+  request?: {
+    url: string;
+    method: string;
+    headers: Record<string, string>;
+    postData?: string;
+    hasPostData?: boolean;
+  };
+  response?: {
+    url: string;
+    status: number;
+    statusText: string;
+    headers: Record<string, string>;
+    mimeType: string;
+    encodedDataLength: number;
+    responseTime: number;
+  };
+  dataLength?: number;
+};
+
 interface NetworkListProps {
-  entries: NetworkEntry[];
+  entries: EnhancedNetworkEntry[];
   selectedRequestId: string | null;
   onSelect: (requestId: string) => void;
   height: number;
@@ -14,6 +48,56 @@ interface NetworkListProps {
 
 const ITEM_HEIGHT = 60; // Height of each network list item
 
+const getResourceTypeColor = (type: string): string => {
+  switch (type) {
+    case 'Document':
+      return '#4285f4';
+    case 'Stylesheet':
+      return '#34a853';
+    case 'Script':
+      return '#fbbc04';
+    case 'Image':
+      return '#ea4335';
+    case 'Font':
+      return '#9c27b0';
+    case 'XHR':
+      return '#ff9800';
+    case 'Fetch':
+      return '#2196f3';
+    case 'WebSocket':
+      return '#00bcd4';
+    case 'Media':
+      return '#e91e63';
+    default:
+      return '#757575';
+  }
+};
+
+const getStatusDisplay = (
+  entry: EnhancedNetworkEntry
+): { text: string; color: string } => {
+  if (entry.status === 'failed') {
+    return { text: 'Failed', color: '#d32f2f' };
+  }
+  if (entry.status === 'pending') {
+    return { text: 'Pending', color: '#ff9800' };
+  }
+  if (entry.status === 'loading') {
+    return { text: 'Loading', color: '#2196f3' };
+  }
+  if (entry.status === 'finished') {
+    const status = entry.response?.status || 0;
+    if (status >= 400) {
+      return { text: status.toString(), color: '#d32f2f' };
+    }
+    if (status >= 300) {
+      return { text: status.toString(), color: '#ff9800' };
+    }
+    return { text: status.toString(), color: '#4caf50' };
+  }
+  return { text: '...', color: '#757575' };
+};
+
 export const NetworkList: React.FC<NetworkListProps> = ({
   entries,
   selectedRequestId,
@@ -29,16 +113,18 @@ export const NetworkList: React.FC<NetworkListProps> = ({
     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 NetworkListItem: React.FC<{
+    entry: EnhancedNetworkEntry;
+    index: number;
+  }> = ({ entry, index }) => {
+    const method = entry.method;
+    const url = entry.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 resourceType = entry.type || 'Other';
+
+    // Get size information - prefer dataLength over encodedDataLength for display
+    const displaySize = entry.dataLength || entry.encodedDataLength || 0;
+    const statusDisplay = getStatusDisplay(entry);
 
     const isSelected = selectedRequestId === entry.requestId;
 
@@ -48,53 +134,70 @@ export const NetworkList: React.FC<NetworkListProps> = ({
         onClick={() => onSelect(entry.requestId)}
       >
         <div className={styles.statusColumn}>
-          <Tooltip 
-            content={`Status: ${status || 'Pending'}`} 
+          <Tooltip
+            content={`Status: ${statusDisplay.text}`}
             showOnlyWhenTruncated
-            variant={status >= 400 ? 'error' : status >= 300 ? 'warning' : 'info'}
+            variant={
+              statusDisplay.color === '#d32f2f'
+                ? 'error'
+                : statusDisplay.color === '#ff9800'
+                ? 'warning'
+                : 'info'
+            }
           >
-            <Badge color={getStatusColor(status)}>
-              {status || '...'}
-            </Badge>
+            <Badge color={statusDisplay.color}>{statusDisplay.text}</Badge>
           </Tooltip>
         </div>
         <div className={styles.methodColumn}>
-          <Tooltip 
-            content={`Method: ${method}`} 
+          <Tooltip
+            content={`Method: ${method}`}
             showOnlyWhenTruncated
             variant="info"
           >
-            <Badge color={getMethodColor(method)}>
-              {method}
-            </Badge>
+            <Badge color={getMethodColor(method)}>{method}</Badge>
           </Tooltip>
         </div>
         <div className={styles.urlColumn}>
           <Tooltip content={domain} showOnlyWhenTruncated>
-            <div className={styles.domainText}>
-              {domain}
-            </div>
+            <div className={styles.domainText}>{domain}</div>
           </Tooltip>
           <Tooltip content={path} showOnlyWhenTruncated>
-            <div className={styles.pathText}>
-              {path}
-            </div>
+            <div className={styles.pathText}>{path}</div>
           </Tooltip>
           <Tooltip content={url} showOnlyWhenTruncated>
-            <div className={styles.fullUrlText}>
-              {url}
-            </div>
+            <div className={styles.fullUrlText}>{url}</div>
+          </Tooltip>
+        </div>
+        <div className={styles.typeColumn}>
+          <Tooltip
+            content={`Resource Type: ${resourceType}`}
+            showOnlyWhenTruncated
+            variant="info"
+          >
+            <Badge color={getResourceTypeColor(resourceType)}>
+              {resourceType}
+            </Badge>
           </Tooltip>
         </div>
         <div className={styles.durationColumn}>
-          <Tooltip content={`Duration: ${entry.duration ? formatDuration(entry.duration) : 'Pending'}`} showOnlyWhenTruncated>
+          <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>
+          <Tooltip
+            content={`Size: ${
+              displaySize > 0 ? formatFileSize(displaySize) : 'Unknown'
+            }`}
+            showOnlyWhenTruncated
+          >
             <span className={styles.columnText}>
               {displaySize > 0 ? formatFileSize(displaySize) : '...'}
             </span>
@@ -104,31 +207,23 @@ export const NetworkList: React.FC<NetworkListProps> = ({
     );
   };
 
-  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 ref={parentRef} className={styles.networkList} style={{ height }}>
       <div
-        className={styles.virtualContainer}
-        style={{ height: `${virtualizer.getTotalSize()}px` }}
+        style={{
+          height: `${virtualizer.getTotalSize()}px`,
+          width: '100%',
+          position: 'relative',
+        }}
       >
-        {virtualizer.getVirtualItems().map((virtualItem: any) => (
+        {virtualizer.getVirtualItems().map((virtualItem) => (
           <div
             key={virtualItem.key}
-            className={styles.virtualItem}
             style={{
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              width: '100%',
               height: `${virtualItem.size}px`,
               transform: `translateY(${virtualItem.start}px)`,
             }}
@@ -142,4 +237,4 @@ export const NetworkList: React.FC<NetworkListProps> = ({
       </div>
     </div>
   );
-}; 
+};

package/src/ui/network-toolbar.tsx

@@ -25,16 +25,10 @@ export const NetworkToolbar: React.FC<NetworkToolbarProps> = ({
       >
         {isRecording ? 'Stop' : 'Start'} Recording
       </Button>
-      <Button
-        onClick={onClear}
-        variant="secondary"
-        size="small"
-      >
+      <Button onClick={onClear} variant="secondary" size="small">
         Clear
       </Button>
-      <div className={styles.requestCount}>
-        {requestCount} requests
-      </div>
+      <div className={styles.requestCount}>{requestCount} requests</div>
     </Toolbar>
   );
-}; 
+};