@rozenite/network-activity-plugin 1.0.0-alpha.8 → 1.0.0

package/src/ui/components/OverrideResponse.tsx

@@ -0,0 +1,132 @@
+import { useRef, useState } from 'react';
+import { HttpNetworkEntry } from '../state/model';
+import { Section } from '../components/Section';
+import { KeyValueGrid } from '../components/KeyValueGrid';
+import { useNetworkActivityActions } from '../state/hooks';
+import { CodeEditor } from '../components/CodeEditor';
+import { RequestOverride } from '../../shared/client';
+import { Button } from './Button';
+import { Check, CircleSlash2 } from 'lucide-react';
+
+export type OverrideResponseProps = {
+  selectedRequest: HttpNetworkEntry;
+  initialOverride: RequestOverride | undefined;
+  onClear: () => void;
+};
+
+export const OverrideResponse = ({
+  selectedRequest,
+  initialOverride,
+  onClear,
+}: OverrideResponseProps) => {
+  const actions = useNetworkActivityActions();
+  const [savedOverride, setSavedOverride] = useState<
+    RequestOverride | undefined
+  >(initialOverride);
+  const [editedBody, setEditedBody] = useState<string | undefined>(
+    initialOverride?.body
+  );
+  const [editedStatus, setEditedStatus] = useState<number | undefined>(
+    initialOverride?.status
+  );
+  const responseEditorRef = useRef<HTMLPreElement>(null);
+  const responseBody = selectedRequest.response?.body;
+
+  const saveOverride = () => {
+    if (editedBody === undefined && editedStatus === undefined) return;
+
+    const newOverrideData = {
+      body: editedBody,
+      status: editedStatus,
+    };
+
+    setSavedOverride(newOverrideData);
+    actions.addOverride(selectedRequest.request.url, newOverrideData);
+  };
+
+  const clearOverride = () => {
+    setSavedOverride(undefined);
+    setEditedBody(undefined);
+    actions.clearOverride(selectedRequest.request.url);
+    onClear();
+  };
+
+  if (!responseBody || responseBody.data === null) {
+    return (
+      <div className="text-sm text-gray-400">
+        No response body available for this request
+      </div>
+    );
+  }
+
+  const { type } = responseBody;
+
+  const hasChanges =
+    editedBody !== savedOverride?.body ||
+    editedStatus !== savedOverride?.status;
+
+  const overrideActions = (
+    <>
+      <Button
+        variant="ghost"
+        size="xs"
+        className="text-violet-300 hover:text-violet-300 ms-2"
+        onClick={clearOverride}
+      >
+        <CircleSlash2 className="h-2 w-2" />
+        Clear override
+      </Button>
+
+      <Button
+        variant="ghost"
+        size="xs"
+        className="text-violet-300 hover:text-violet-300"
+        onClick={saveOverride}
+        disabled={!hasChanges}
+      >
+        <Check className="h-2 w-2" />
+        {hasChanges ? 'Save override' : 'Saved'}
+      </Button>
+    </>
+  );
+
+  if (savedOverride !== undefined) {
+    return (
+      <Section
+        title="Response Body"
+        collapsible={false}
+        action={overrideActions}
+      >
+        <div className="space-y-4">
+          <KeyValueGrid
+            items={[
+              {
+                key: 'Content-Type',
+                value: type,
+                valueClassName: 'text-blue-400',
+              },
+            ]}
+          />
+
+          <div className="grid grid-cols-[minmax(7rem,25%)_minmax(3rem,1fr)] gap-x-2 gap-y-2 text-sm">
+            <span className={'text-gray-400 wrap-anywhere'}>Status Code</span>
+            <input
+              type="number"
+              value={editedStatus}
+              onChange={(e) => {
+                setEditedStatus(parseInt(e.target.value));
+              }}
+              className="max-w-24 font-mono text-gray-300 whitespace-pre-wrap bg-gray-800 p-1 rounded-md border border-gray-700 overflow-x-auto wrap-anywhere ring-offset-blue-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+            />
+          </div>
+
+          <CodeEditor
+            data={savedOverride?.body}
+            ref={responseEditorRef}
+            onInput={(e) => setEditedBody(e.currentTarget.innerText)}
+          />
+        </div>
+      </Section>
+    );
+  }
+};

package/src/ui/components/RequestBody.tsx

@@ -0,0 +1,86 @@
+import { HttpRequestData } from '../state/model';
+import { KeyValueGrid, KeyValueItem } from './KeyValueGrid';
+import { CodeBlock } from './CodeBlock';
+import { JsonTree } from './JsonTree';
+import {
+  RequestBinaryPostData,
+  RequestFormDataPostData,
+} from '../../shared/client';
+
+type RequestBodyProps = {
+  data: HttpRequestData['data'];
+};
+
+const getFormDataBinaryEntries = (
+  key: string,
+  value: RequestBinaryPostData['value']
+): KeyValueItem[] => {
+  return [
+    {
+      key,
+      value: <span className="text-blue-400">[binary]</span>,
+    },
+    ...getBinaryEntries(value).map((item) => ({
+      ...item,
+      key: `  └─  ${item.key}`,
+      keyClassName: 'whitespace-pre',
+    })),
+  ];
+};
+
+const getBinaryEntries = (
+  value: RequestBinaryPostData['value']
+): KeyValueItem[] => {
+  const { size, type, name } = value;
+
+  const items: KeyValueItem[] = [];
+
+  if (name) {
+    items.push({ key: 'Name', value: name });
+  }
+
+  if (type) {
+    items.push({ key: 'Type', value: type });
+  }
+
+  items.push({ key: 'Size', value: `${size} bytes` });
+
+  return items;
+};
+
+const getFormDataEntries = (value: RequestFormDataPostData['value']) =>
+  Object.entries(value).flatMap(([key, { value, type }]) => {
+    if (type === 'binary') {
+      return getFormDataBinaryEntries(key, value);
+    }
+
+    return [{ key, value }];
+  });
+
+export const RequestBody = ({ data }: RequestBodyProps) => {
+  const { type: dataType, value } = data;
+
+  if (dataType === 'text') {
+    try {
+      const jsonData = JSON.parse(value);
+
+      return (
+        <CodeBlock>
+          <JsonTree data={jsonData} />
+        </CodeBlock>
+      );
+    } catch {
+      return <CodeBlock>{value}</CodeBlock>;
+    }
+  }
+
+  if (dataType === 'form-data') {
+    return <KeyValueGrid items={getFormDataEntries(value)} />;
+  }
+
+  if (dataType === 'binary') {
+    return <KeyValueGrid items={getBinaryEntries(value)} />;
+  }
+
+  return null;
+};

package/src/ui/components/RequestList.tsx

@@ -1,42 +1,38 @@
-import * as React from 'react';
+import { useMemo, useState } from 'react';
 import {
   createColumnHelper,
   flexRender,
   getCoreRowModel,
   getSortedRowModel,
+  SortingFn,
   SortingState,
   useReactTable,
 } from '@tanstack/react-table';
-import { NetworkEntry } from '../types';
-import { RequestId } from '../../shared/client';
-import { getHttpHeaderValue } from '../utils/getHttpHeaderValue';
+import { ProcessedRequest } from '../state/model';
+import { RequestId, RequestOverride } from '../../shared/client';
+import {
+  useNetworkActivityActions,
+  useOverrides,
+  useProcessedRequests,
+  useSelectedRequestId,
+  useClientUISettings,
+} from '../state/hooks';
+import { getStatusColor } from '../utils/getStatusColor';
+import { FilterState } from './FilterBar';
+import { isNumber } from '../../utils/typeChecks';
 
 type NetworkRequest = {
-  id: string;
+  id: RequestId;
   name: string;
-  status: number;
+  status: string | number;
   method: string;
   domain: string;
   path: string;
   size: string;
   time: string;
   type: string;
-  initiator: string;
   startTime: string;
-  requestBody?: {
-    type: string;
-    data: string;
-  };
-  responseBody?: {
-    type: string;
-    data: string | null;
-  };
-};
-
-type RequestListProps = {
-  networkEntries: Map<RequestId, NetworkEntry>;
-  selectedRequestId: RequestId | null;
-  onRequestSelect: (requestId: RequestId) => void;
+  hasOverride: boolean;
 };
 
 const formatSize = (bytes: number): string => {
@@ -68,85 +64,30 @@ const extractDomainAndPath = (
   url: string
 ): { domain: string; path: string } => {
   try {
-    const urlObj = new URL(url);
+    const { hostname, pathname, search, hash, port } = new URL(url);
+
     return {
-      domain: urlObj.hostname,
-      path: urlObj.pathname + urlObj.search + urlObj.hash,
+      domain: `${hostname}${port ? `:${port}` : ''}`,
+      path: `${pathname}${search}${hash}`,
     };
   } catch {
     return { domain: 'unknown', path: url };
   }
 };
 
-const generateName = (url: string): string => {
+const generateName = (url: string, showEntirePathName = false): string => {
   try {
     const urlObj = new URL(url);
     const pathname = urlObj.pathname;
-    const filename = pathname.split('/').pop();
+    const filename = showEntirePathName ? undefined : pathname.split('/').pop();
+    
     return filename || pathname || urlObj.hostname;
   } catch {
     return url;
   }
 };
 
-const formatInitiator = (initiator: any): string => {
-  if (!initiator) return 'Other';
-  if (initiator.type === 'script' && initiator.url) {
-    try {
-      const url = new URL(initiator.url);
-      const filename = url.pathname.split('/').pop() || url.hostname;
-      const line = initiator.lineNumber ? `:${initiator.lineNumber}` : '';
-      return `${filename}${line}`;
-    } catch {
-      return 'Script';
-    }
-  }
-  return initiator.type || 'Other';
-};
-
-const mapResourceType = (type: string): string => {
-  const typeMap: Record<string, string> = {
-    Document: 'document',
-    Stylesheet: 'stylesheet',
-    Image: 'img',
-    Media: 'media',
-    Font: 'font',
-    Script: 'script',
-    XHR: 'xhr',
-    Fetch: 'xhr',
-    EventSource: 'eventsource',
-    WebSocket: 'websocket',
-    Manifest: 'manifest',
-    Other: 'other',
-    Ping: 'ping',
-    CSPViolationReport: 'csp',
-    Preflight: 'preflight',
-    Subresource: 'subresource',
-  };
-  return typeMap[type] || 'other';
-};
-
-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',
-  };
-  return colors[type] || 'bg-gray-600';
-};
-
-const getStatusColor = (status: number) => {
-  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';
-};
-
-// Custom sorting functions
-const sortSize = (rowA: any, rowB: any, columnId: string) => {
+const sortSize: SortingFn<NetworkRequest> = (rowA, rowB, columnId) => {
   const a = rowA.getValue(columnId) as string;
   const b = rowB.getValue(columnId) as string;
 
@@ -168,7 +109,7 @@ const sortSize = (rowA: any, rowB: any, columnId: string) => {
   return getNumericValue(a) - getNumericValue(b);
 };
 
-const sortTime = (rowA: any, rowB: any, columnId: string) => {
+const sortTime: SortingFn<NetworkRequest> = (rowA, rowB, columnId) => {
   const a = rowA.getValue(columnId) as string;
   const b = rowB.getValue(columnId) as string;
 
@@ -184,38 +125,28 @@ const sortTime = (rowA: any, rowB: any, columnId: string) => {
   return getNumericValue(a) - getNumericValue(b);
 };
 
-// Convert NetworkEntry to NetworkRequest for UI display
-const processNetworkEntries = (
-  networkEntries: Map<RequestId, NetworkEntry>
+const processNetworkRequests = (
+  processedRequests: ProcessedRequest[],
+  overrides: Map<string, RequestOverride>,
+  showEntirePathAsName = false
 ): NetworkRequest[] => {
-  return Array.from(networkEntries.values()).map((entry): NetworkRequest => {
-    const { domain, path } = extractDomainAndPath(entry.url);
-    const duration = entry.duration || 0;
+  return processedRequests.map((request): NetworkRequest => {
+    const { domain, path } = extractDomainAndPath(request.name);
+    const duration = request.duration || 0;
+    const hasOverride = overrides.has(request.name);
 
     return {
-      id: entry.requestId,
-      name: generateName(entry.url),
-      status: entry.response?.status || 0,
-      method: entry.request?.method || 'GET',
+      id: request.id,
+      name: generateName(request.name, showEntirePathAsName),
+      status: request.httpStatus || request.status,
+      method: request.method,
       domain,
       path,
-      size: formatSize(entry.size || 0),
+      size: isNumber(request.size) ? formatSize(request.size) : '—',
       time: formatDuration(duration),
-      type: mapResourceType(entry.type || 'Other'),
-      initiator: formatInitiator(entry.initiator),
-      startTime: formatStartTime(entry.startTime || 0),
-      requestBody: entry.request?.postData
-        ? {
-            type: getHttpHeaderValue(entry.request.headers, 'content-type') || 'text/plain',
-            data: entry.request.postData,
-          }
-        : undefined,
-      responseBody: entry.responseBody
-        ? {
-            type: entry.response?.contentType || 'application/octet-stream',
-            data: entry.responseBody.body,
-          }
-        : undefined,
+      type: request.type,
+      startTime: formatStartTime(request.timestamp),
+      hasOverride: hasOverride,
     };
   });
 };
@@ -231,8 +162,14 @@ const columns = [
   }),
   columnHelper.accessor('name', {
     header: 'Name',
-    cell: ({ getValue }) => (
-      <div className="flex-1 min-w-0 truncate">{getValue()}</div>
+    cell: ({ row, getValue }) => (
+      <div className="flex-1 min-w-0 truncate" title={row.original.path}>
+        {getValue()}
+
+        {row.original.hasOverride && (
+          <span className="w-2 h-2 rounded-full bg-violet-300 ms-2 inline-block"></span>
+        )}
+      </div>
     ),
     sortingFn: 'alphanumeric',
   }),
@@ -262,28 +199,63 @@ const columns = [
   }),
   columnHelper.accessor('size', {
     header: 'Size',
-    cell: ({ getValue }) => <div className="text-gray-300">{getValue()}</div>,
+    cell: ({ getValue }) => (
+      <div className="text-gray-300 whitespace-nowrap">{getValue()}</div>
+    ),
     size: 80,
     sortingFn: sortSize,
   }),
   columnHelper.accessor('time', {
     header: 'Time',
-    cell: ({ getValue }) => <div className="text-gray-300">{getValue()}</div>,
+    cell: ({ getValue }) => (
+      <div className="text-gray-300 whitespace-nowrap">{getValue()}</div>
+    ),
     size: 80,
     sortingFn: sortTime,
   }),
 ];
 
-export const RequestList: React.FC<RequestListProps> = ({
-  networkEntries,
-  selectedRequestId,
-  onRequestSelect,
-}) => {
-  const [sorting, setSorting] = React.useState<SortingState>([]);
+export type RequestListProps = {
+  filter: FilterState;
+};
 
-  const requests = React.useMemo(() => {
-    return processNetworkEntries(networkEntries);
-  }, [networkEntries]);
+export const RequestList = ({ filter }: RequestListProps) => {
+  const actions = useNetworkActivityActions();
+  const processedRequests = useProcessedRequests();
+  const selectedRequestId = useSelectedRequestId();
+  const [sorting, setSorting] = useState<SortingState>([]);
+  const overrides = useOverrides();
+  const clientUISettings = useClientUISettings();
+
+  // Filter requests based on current filter state
+  const filteredRequests = useMemo(() => {
+    return processedRequests.filter((request) => {
+      // Type filter
+      if (!filter.types.has(request.type)) {
+        return false;
+      }
+
+      // Text filter
+      if (filter.text) {
+        const searchText = filter.text.toLowerCase();
+        const searchableFields = [
+          request.name,
+          request.method,
+          request.status.toString(),
+        ]
+          .join(' ')
+          .toLowerCase();
+
+        return searchableFields.includes(searchText);
+      }
+
+      return true;
+    });
+  }, [processedRequests, filter]);
+
+  const requests = useMemo(() => {
+    return processNetworkRequests(filteredRequests, overrides, clientUISettings?.showUrlAsName);
+  }, [filteredRequests, overrides, clientUISettings?.showUrlAsName]);
 
   const table = useReactTable({
     data: requests,
@@ -296,6 +268,10 @@ export const RequestList: React.FC<RequestListProps> = ({
     },
   });
 
+  const onRequestSelect = (requestId: RequestId): void => {
+    actions.setSelectedRequest(requestId);
+  };
+
   return (
     <div className="flex-1 overflow-auto">
       <table className="w-full">
@@ -367,11 +343,5 @@ export {
   formatStartTime,
   extractDomainAndPath,
   generateName,
-  formatInitiator,
-  mapResourceType,
-  getTypeColor,
-  getStatusColor,
-  processNetworkEntries,
+  processNetworkRequests,
 };
-
-export type { NetworkRequest };

package/src/ui/components/ScrollArea.tsx

@@ -18,6 +18,7 @@ const ScrollArea = React.forwardRef<
       {children}
     </ScrollAreaPrimitive.Viewport>
     <ScrollBar />
+    <ScrollBar orientation="horizontal" />
     <ScrollAreaPrimitive.Corner />
   </ScrollAreaPrimitive.Root>
 ));

package/src/ui/components/Section.tsx

@@ -0,0 +1,46 @@
+import React, { useState } from 'react';
+import { cn } from '../utils/cn';
+
+export type SectionProps = {
+  title: string;
+  children: React.ReactNode;
+  collapsible?: boolean;
+  action?: React.ReactNode;
+};
+
+export const Section = ({
+  title,
+  children,
+  collapsible = true,
+  action,
+}: SectionProps) => {
+  const [isCollapsed, setIsCollapsed] = useState(false);
+
+  const isChildrenVisible = !collapsible || !isCollapsed;
+
+  const handleCollapseSection = () => {
+    setIsCollapsed((prevState) => !prevState);
+  };
+
+  const headerClassName = `flex items-center w-full text-left text-sm text-gray-300 mb-2 ${
+    collapsible ? 'hover:text-white' : 'cursor-default'
+  }`;
+
+  return (
+    <div>
+      <button
+        onClick={collapsible ? handleCollapseSection : undefined}
+        className={headerClassName}
+        tabIndex={collapsible ? 0 : -1}
+      >
+        {collapsible && (
+          <span className={cn('mr-2', { 'rotate-90': !isCollapsed })}>▶</span>
+        )}
+        <span className="font-medium me-auto">{title}</span>
+
+        {action}
+      </button>
+      {isChildrenVisible && children}
+    </div>
+  );
+};