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

package/src/ui/components/FilterBar.tsx

@@ -0,0 +1,117 @@
+import { Input } from './Input';
+import { Button } from './Button';
+import { X, Filter, ChevronDown } from 'lucide-react';
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+} from './DropdownMenu';
+
+export type FilterState = {
+  text: string;
+  types: Set<'http' | 'websocket' | 'sse'>;
+};
+
+type FilterBarProps = {
+  filter: FilterState;
+  onFilterChange: (filter: FilterState) => void;
+};
+
+export const FilterBar = ({ filter, onFilterChange }: FilterBarProps) => {
+  const handleTextChange = (text: string) => {
+    onFilterChange({ ...filter, text });
+  };
+
+  const toggleType = (type: 'http' | 'websocket' | 'sse') => {
+    const newTypes = new Set(filter.types);
+    if (newTypes.has(type)) {
+      newTypes.delete(type);
+    } else {
+      newTypes.add(type);
+    }
+    onFilterChange({ ...filter, types: newTypes });
+  };
+
+  const clearFilters = () => {
+    onFilterChange({
+      text: '',
+      types: new Set(['http', 'websocket', 'sse']),
+    });
+  };
+
+  const hasActiveFilters = filter.text !== '' || filter.types.size < 3;
+  const isTypeFilterActive = filter.types.size < 3;
+
+  const getTypeLabel = (type: 'http' | 'websocket' | 'sse') => {
+    switch (type) {
+      case 'http':
+        return 'XHR';
+      case 'websocket':
+        return 'WS';
+      case 'sse':
+        return 'SSE';
+    }
+  };
+
+  return (
+    <div className="flex items-center gap-2 p-2 border-b border-gray-700 bg-gray-800">
+      {/* Text Filter */}
+      <div className="flex-1">
+        <Input
+          placeholder="Filter requests..."
+          value={filter.text}
+          onChange={(e) => handleTextChange(e.target.value)}
+          className="h-8 text-sm bg-gray-700 border-gray-600 text-gray-100 placeholder:text-gray-400"
+        />
+      </div>
+
+      {/* Request Type Filters Dropdown */}
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="ghost"
+            size="sm"
+            className={`h-8 px-3 text-xs transition-all ${
+              isTypeFilterActive
+                ? 'bg-blue-600/20 border border-blue-500/50 text-blue-300 hover:bg-blue-600/30'
+                : 'text-gray-300 hover:text-gray-100 hover:bg-gray-700'
+            }`}
+          >
+            <Filter className="h-3 w-3 mr-1" />
+            Types
+            <ChevronDown className="h-3 w-3 ml-1" />
+          </Button>
+        </DropdownMenuTrigger>
+
+        <DropdownMenuContent sideOffset={5} className="space-y-1">
+          {(['http', 'sse', 'websocket'] as const).map((type) => (
+            <DropdownMenuItem
+              key={type}
+              onClick={() => toggleType(type)}
+              className={
+                filter.types.has(type)
+                  ? 'bg-blue-600 text-white'
+                  : 'text-gray-300 hover:bg-gray-700 hover:text-gray-100'
+              }
+            >
+              {getTypeLabel(type)}
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      {/* Clear Filters */}
+      {hasActiveFilters && (
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={clearFilters}
+          className="h-8 w-8 p-0 text-gray-400 hover:text-blue-400"
+        >
+          <X className="h-4 w-4" />
+        </Button>
+      )}
+    </div>
+  );
+};

package/src/ui/components/Input.tsx

@@ -8,7 +8,7 @@ const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<'input'>>(
       <input
         type={type}
         className={cn(
-          'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+          'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-blue-500 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
           className
         )}
         ref={ref}

package/src/ui/components/JsonTree.tsx

@@ -35,13 +35,20 @@ export const JsonTree = ({
       shouldExpandNodeInitially={shouldExpandNodeInitially}
       // For objects and arrays
       getItemString={(_type, data, itemType, itemString) => (
-        <JsonTreeCopyableItem getCopyableValue={() => JSON.stringify(data, null, 2)}>
-          <>{itemType} {itemString}</>
+        <JsonTreeCopyableItem
+          getCopyableValue={() => JSON.stringify(data, null, 2)}
+        >
+          <>
+            {itemType} {itemString}
+          </>
         </JsonTreeCopyableItem>
       )}
       // For primitives
       valueRenderer={(valueAsString, value) => (
-        <JsonTreeCopyableItem getCopyableValue={() => String(value)} className="ml-2">
+        <JsonTreeCopyableItem
+          getCopyableValue={() => String(value)}
+          className="ml-2"
+        >
           {String(valueAsString)}
         </JsonTreeCopyableItem>
       )}

package/src/ui/components/JsonTreeCopyableItem.tsx

@@ -1,33 +1,37 @@
-import { Check, Copy } from "lucide-react";
-import { MouseEvent, PropsWithChildren } from "react";
-import { useCopyToClipboard } from "../hooks/useCopyToClipboard";
-import { cn } from "../utils/cn";
+import { Check, Copy } from 'lucide-react';
+import { MouseEvent, PropsWithChildren } from 'react';
+import { useCopyToClipboard } from '../hooks/useCopyToClipboard';
+import { cn } from '../utils/cn';
 
 type JsonTreeCopyableItemProps = PropsWithChildren<{
   getCopyableValue: () => string;
   className?: string;
 }>;
 
-export const JsonTreeCopyableItem = ({ children, getCopyableValue, className }: JsonTreeCopyableItemProps) => {
+export const JsonTreeCopyableItem = ({
+  children,
+  getCopyableValue,
+  className,
+}: JsonTreeCopyableItemProps) => {
   const { isCopied, copy } = useCopyToClipboard();
-  
+
   const handleCopy = (event: MouseEvent) => {
     event.stopPropagation();
 
     copy(getCopyableValue());
-  }
+  };
 
   const Icon = isCopied ? Check : Copy;
 
   return (
     <span className={cn('inline-block group', className)}>
       {children}
-      <div 
+      <div
         className="inline-block cursor-pointer opacity-0 group-hover:opacity-100 text-gray-500 hover:text-gray-300 transition-all p-2 -m-2 ml-0 translate-y-0.75"
         onClick={handleCopy}
       >
-        <Icon className='h-4 w-4' />
+        <Icon className="h-4 w-4" />
       </div>
     </span>
   );
-}
+};

package/src/ui/components/KeyValueGrid.tsx

@@ -0,0 +1,51 @@
+import React, { Fragment } from 'react';
+import { cn } from '../utils/cn';
+
+export type KeyValueItem = {
+  key: string;
+  value: React.ReactNode;
+  keyClassName?: string;
+  valueClassName?: string;
+};
+
+export type KeyValueGridProps = {
+  items?: KeyValueItem[];
+  emptyMessage?: string;
+  className?: string;
+};
+
+export const KeyValueGrid = ({
+  items = [],
+  emptyMessage,
+  className,
+}: KeyValueGridProps) => {
+  const gridClassName = cn(
+    'grid grid-cols-[minmax(7rem,25%)_minmax(3rem,1fr)] gap-x-2 gap-y-2 text-sm',
+    className
+  );
+
+  if (items.length === 0) {
+    return emptyMessage ? (
+      <div className={gridClassName}>
+        <span className="col-span-2 text-gray-500 italic">{emptyMessage}</span>
+      </div>
+    ) : null;
+  }
+
+  return (
+    <div className={gridClassName}>
+      {items.map((item, index) => (
+        <Fragment key={index}>
+          <span
+            className={cn('text-gray-400 wrap-anywhere', item.keyClassName)}
+          >
+            {item.key}
+          </span>
+          <span className={cn('wrap-anywhere', item.valueClassName)}>
+            {item.value}
+          </span>
+        </Fragment>
+      ))}
+    </div>
+  );
+};

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

@@ -9,13 +9,17 @@ import {
   useReactTable,
 } from '@tanstack/react-table';
 import { ProcessedRequest } from '../state/model';
-import { RequestId } from '../../shared/client';
+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: RequestId;
@@ -28,6 +32,7 @@ type NetworkRequest = {
   time: string;
   type: string;
   startTime: string;
+  hasOverride: boolean;
 };
 
 const formatSize = (bytes: number): string => {
@@ -70,11 +75,12 @@ const extractDomainAndPath = (
   }
 };
 
-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;
@@ -120,23 +126,35 @@ const sortTime: SortingFn<NetworkRequest> = (rowA, rowB, columnId) => {
 };
 
 const processNetworkRequests = (
-  processedRequests: ProcessedRequest[]
+  processedRequests: ProcessedRequest[],
+  overrides: Map<string, RequestOverride>,
+  showEntirePathAsName = false
 ): NetworkRequest[] => {
   return processedRequests.map((request): NetworkRequest => {
     const { domain, path } = extractDomainAndPath(request.name);
     const duration = request.duration || 0;
+    const hasOverride = overrides.has(request.name);
+
+    let statusDisplay: string | number = request.httpStatus || request.status;
+    if (request.status === 'loading' && request.progress?.lengthComputable) {
+      const percentage = Math.round(
+        (request.progress.loaded / request.progress.total) * 100,
+      );
+      statusDisplay = `${percentage}%`;
+    }
 
     return {
       id: request.id,
-      name: generateName(request.name),
-      status: request.httpStatus || request.status,
+      name: generateName(request.name, showEntirePathAsName),
+      status: statusDisplay,
       method: request.method,
       domain,
       path,
-      size: formatSize(request.size || 0),
+      size: isNumber(request.size) ? formatSize(request.size) : '—',
       time: formatDuration(duration),
       type: request.type,
       startTime: formatStartTime(request.timestamp),
+      hasOverride: hasOverride,
     };
   });
 };
@@ -152,8 +170,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',
   }),
@@ -183,27 +207,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 = () => {
+export type RequestListProps = {
+  filter: FilterState;
+};
+
+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(processedRequests);
-  }, [processedRequests]);
+    return processNetworkRequests(filteredRequests, overrides, clientUISettings?.showUrlAsName);
+  }, [filteredRequests, overrides, clientUISettings?.showUrlAsName]);
 
   const table = useReactTable({
     data: requests,

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>
+  );
+};