@rozenite/network-activity-plugin 1.9.0 → 1.11.0

package/src/ui/components/CodeBlock.tsx

@@ -1,8 +1,15 @@
-import { HTMLProps } from 'react';
+import { HTMLProps, useMemo } from 'react';
+import { Virtuoso } from 'react-virtuoso';
 import { cn } from '../utils/cn';
 
 export type CodeBlockProps = HTMLProps<HTMLPreElement>;
 
+// Above this character count, string content renders through Virtuoso
+// instead of a flat <pre>. Tuned so typical responses (<20KB) stay on
+// the simple path, while pathological payloads (large pretty-printed
+// JSON / minified bundles served as text / huge logs) virtualize.
+const VIRTUALIZATION_THRESHOLD = 50_000;
+
 const codeBlockClassNames =
   'text-sm font-mono text-gray-300 whitespace-pre-wrap bg-gray-800 p-3 rounded-md border border-gray-700 overflow-x-auto wrap-anywhere';
 
@@ -11,9 +18,46 @@ export const CodeBlock = ({
   className,
   ...props
 }: CodeBlockProps) => {
+  // Only string children are eligible for virtualization. Component
+  // children (JsonTree / XmlTree / etc.) manage their own rendering;
+  // CodeBlock here just provides the monospace-on-dark frame.
+  if (
+    typeof children === 'string' &&
+    children.length > VIRTUALIZATION_THRESHOLD
+  ) {
+    return <VirtualizedCodeBlock text={children} className={className} />;
+  }
+
   return (
     <pre className={cn(codeBlockClassNames, className)} {...props}>
       {children}
     </pre>
   );
 };
+
+type VirtualizedCodeBlockProps = {
+  text: string;
+  className?: string;
+};
+
+const VirtualizedCodeBlock = ({
+  text,
+  className,
+}: VirtualizedCodeBlockProps) => {
+  const lines = useMemo(() => text.split('\n'), [text]);
+
+  // Content with no newlines collapses to a single row containing the
+  // entire payload. Browser wrapping (whitespace-pre-wrap, wrap-anywhere)
+  // still keeps layout sane, but there's no real virtualization benefit
+  // for that shape — the size win shows up once the body has many lines.
+  return (
+    <Virtuoso
+      style={{ height: 500 }}
+      totalCount={lines.length}
+      itemContent={(idx) => (
+        <div className="whitespace-pre-wrap wrap-anywhere">{lines[idx]}</div>
+      )}
+      className={cn(codeBlockClassNames, className)}
+    />
+  );
+};

package/src/ui/components/FilterBar.tsx

@@ -1,29 +1,189 @@
+import { useState } from 'react';
+import {
+  autoUpdate,
+  flip,
+  FloatingPortal,
+  offset,
+  shift,
+  size,
+  useClick,
+  useDismiss,
+  useFloating,
+  useInteractions,
+  useRole,
+} from '@floating-ui/react';
 import { Input } from './Input';
 import { Button } from './Button';
-import { X, Filter, ChevronDown } from 'lucide-react';
+import { X, Filter, ChevronDown, Check } from 'lucide-react';
+import type { HttpMethod, NetworkEventSource } from '../../shared/client';
 import {
-  DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuItem,
-} from './DropdownMenu';
-
-export type FilterState = {
-  text: string;
-  types: Set<'http' | 'websocket' | 'sse'>;
-};
+  createDefaultFilter,
+  DEFAULT_REQUEST_TYPES,
+} from '../state/filter';
+import type {
+  AdvancedFilterState,
+  FilterState,
+  RequestTypeFilter,
+} from '../state/filter';
 
 type FilterBarProps = {
   filter: FilterState;
   onFilterChange: (filter: FilterState) => void;
 };
 
+const HTTP_METHODS: HttpMethod[] = [
+  'GET',
+  'POST',
+  'PUT',
+  'PATCH',
+  'DELETE',
+  'HEAD',
+];
+const SOURCES: NetworkEventSource[] = ['builtin', 'nitro'];
+
+const getTypeLabel = (type: RequestTypeFilter) => {
+  switch (type) {
+    case 'http':
+      return 'XHR';
+    case 'websocket':
+      return 'WS';
+    case 'sse':
+      return 'SSE';
+  }
+};
+
+const getSourceLabel = (source: NetworkEventSource) => {
+  switch (source) {
+    case 'builtin':
+      return 'Built-in';
+    case 'nitro':
+      return 'Nitro';
+  }
+};
+
+const getAdvancedFilterCount = (advanced: AdvancedFilterState) => {
+  return [
+    advanced.methods.size > 0,
+    advanced.sources.size > 0,
+    advanced.status.trim() !== '',
+    advanced.domain.trim() !== '',
+    advanced.contentType.trim() !== '',
+    advanced.failedOnly,
+    advanced.inFlightOnly,
+    advanced.overriddenOnly,
+    advanced.minSize.trim() !== '',
+    advanced.maxSize.trim() !== '',
+    advanced.minDuration.trim() !== '',
+    advanced.maxDuration.trim() !== '',
+  ].filter(Boolean).length;
+};
+
+const getActiveFilterCount = (filter: FilterState) => {
+  const typeFilterCount =
+    filter.types.size < DEFAULT_REQUEST_TYPES.length ? 1 : 0;
+
+  return typeFilterCount + getAdvancedFilterCount(filter.advanced);
+};
+
+const FilterField = ({
+  label,
+  value,
+  placeholder,
+  onChange,
+}: {
+  label: string;
+  value: string;
+  placeholder: string;
+  onChange: (value: string) => void;
+}) => (
+  <label className="block space-y-1 px-2 py-1">
+    <span className="text-xs text-gray-400">{label}</span>
+    <Input
+      value={value}
+      placeholder={placeholder}
+      onChange={(event) => onChange(event.target.value)}
+      onClick={(event) => event.stopPropagation()}
+      onKeyDown={(event) => event.stopPropagation()}
+      className="h-7 bg-gray-900 border-gray-700 text-xs text-gray-100 placeholder:text-gray-500"
+    />
+  </label>
+);
+
+const FilterPanelLabel = ({ children }: { children: string }) => (
+  <div className="px-2 py-1.5 text-xs font-semibold text-gray-400">
+    {children}
+  </div>
+);
+
+const FilterPanelSeparator = () => (
+  <div className="-mx-1 my-1 h-px bg-gray-700" />
+);
+
+const FilterCheckbox = ({
+  checked,
+  onCheckedChange,
+  children,
+}: {
+  checked: boolean;
+  onCheckedChange: (checked: boolean) => void;
+  children: string;
+}) => (
+  <button
+    type="button"
+    role="checkbox"
+    aria-checked={checked}
+    className="relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-left text-sm outline-none transition-colors hover:bg-gray-700 focus:bg-gray-700 focus:text-gray-100"
+    onClick={() => onCheckedChange(!checked)}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      {checked && <Check className="h-4 w-4" />}
+    </span>
+    {children}
+  </button>
+);
+
 export const FilterBar = ({ filter, onFilterChange }: FilterBarProps) => {
+  const [isFilterPanelOpen, setIsFilterPanelOpen] = useState(false);
+  const { refs, floatingStyles, context } = useFloating({
+    open: isFilterPanelOpen,
+    onOpenChange: setIsFilterPanelOpen,
+    whileElementsMounted: autoUpdate,
+    middleware: [
+      offset(5),
+      flip({ padding: 8 }),
+      shift({ padding: 8 }),
+      size({
+        padding: 8,
+        apply({ availableHeight, elements }) {
+          elements.floating.style.maxHeight = `${availableHeight}px`;
+        },
+      }),
+    ],
+  });
+  const click = useClick(context);
+  const dismiss = useDismiss(context);
+  const role = useRole(context);
+  const { getReferenceProps, getFloatingProps } = useInteractions([
+    click,
+    dismiss,
+    role,
+  ]);
+
   const handleTextChange = (text: string) => {
     onFilterChange({ ...filter, text });
   };
 
-  const toggleType = (type: 'http' | 'websocket' | 'sse') => {
+  const updateAdvancedFilter = (patch: Partial<AdvancedFilterState>) => {
+    onFilterChange({
+      ...filter,
+      advanced: {
+        ...filter.advanced,
+        ...patch,
+      },
+    });
+  };
+
+  const toggleType = (type: RequestTypeFilter) => {
     const newTypes = new Set(filter.types);
     if (newTypes.has(type)) {
       newTypes.delete(type);
@@ -33,30 +193,35 @@ export const FilterBar = ({ filter, onFilterChange }: FilterBarProps) => {
     onFilterChange({ ...filter, types: newTypes });
   };
 
-  const clearFilters = () => {
-    onFilterChange({
-      text: '',
-      types: new Set(['http', 'websocket', 'sse']),
-    });
+  const toggleMethod = (method: HttpMethod) => {
+    const methods = new Set(filter.advanced.methods);
+    if (methods.has(method)) {
+      methods.delete(method);
+    } else {
+      methods.add(method);
+    }
+    updateAdvancedFilter({ methods });
   };
 
-  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';
+  const toggleSource = (source: NetworkEventSource) => {
+    const sources = new Set(filter.advanced.sources);
+    if (sources.has(source)) {
+      sources.delete(source);
+    } else {
+      sources.add(source);
     }
+    updateAdvancedFilter({ sources });
   };
 
+  const clearFilters = () => {
+    onFilterChange(createDefaultFilter());
+  };
+
+  const activeFilterCount = getActiveFilterCount(filter);
+  const hasActiveFilters = filter.text.trim() !== '' || activeFilterCount > 0;
+
   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..."
@@ -66,42 +231,153 @@ export const FilterBar = ({ filter, onFilterChange }: FilterBarProps) => {
         />
       </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'
-            }`}
+      <Button
+        ref={refs.setReference}
+        variant="ghost"
+        size="sm"
+        className={`h-8 px-3 text-xs transition-all ${
+          activeFilterCount > 0
+            ? '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'
+        }`}
+        {...getReferenceProps()}
+      >
+        <Filter className="h-3 w-3 mr-1" />
+        Filters
+        {activeFilterCount > 0 && (
+          <span className="rounded bg-blue-500/30 px-1 text-[10px] text-blue-100">
+            {activeFilterCount}
+          </span>
+        )}
+        <ChevronDown className="h-3 w-3 ml-1" />
+      </Button>
+
+      {isFilterPanelOpen && (
+        <FloatingPortal>
+          <div
+            ref={refs.setFloating}
+            className="z-50 w-80 space-y-1 overflow-y-auto overscroll-contain rounded-md border border-gray-600 bg-gray-800 p-1 text-gray-100 shadow-lg"
+            style={floatingStyles}
+            {...getFloatingProps()}
           >
-            <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'
+            <FilterPanelLabel>Request Type</FilterPanelLabel>
+            {DEFAULT_REQUEST_TYPES.map((type) => (
+              <FilterCheckbox
+                key={type}
+                checked={filter.types.has(type)}
+                onCheckedChange={() => toggleType(type)}
+              >
+                {getTypeLabel(type)}
+              </FilterCheckbox>
+            ))}
+
+            <FilterPanelSeparator />
+            <FilterPanelLabel>Method</FilterPanelLabel>
+            <div className="grid grid-cols-2">
+              {HTTP_METHODS.map((method) => (
+                <FilterCheckbox
+                  key={method}
+                  checked={filter.advanced.methods.has(method)}
+                  onCheckedChange={() => toggleMethod(method)}
+                >
+                  {method}
+                </FilterCheckbox>
+              ))}
+            </div>
+
+            <FilterPanelSeparator />
+            <FilterPanelLabel>Request Source</FilterPanelLabel>
+            {SOURCES.map((source) => (
+              <FilterCheckbox
+                key={source}
+                checked={filter.advanced.sources.has(source)}
+                onCheckedChange={() => toggleSource(source)}
+              >
+                {getSourceLabel(source)}
+              </FilterCheckbox>
+            ))}
+
+            <FilterPanelSeparator />
+            <FilterCheckbox
+              checked={filter.advanced.failedOnly}
+              onCheckedChange={(checked) =>
+                updateAdvancedFilter({ failedOnly: checked })
+              }
+            >
+              Failed only
+            </FilterCheckbox>
+            <FilterCheckbox
+              checked={filter.advanced.inFlightOnly}
+              onCheckedChange={(checked) =>
+                updateAdvancedFilter({ inFlightOnly: checked })
+              }
+            >
+              In-flight only
+            </FilterCheckbox>
+            <FilterCheckbox
+              checked={filter.advanced.overriddenOnly}
+              onCheckedChange={(checked) =>
+                updateAdvancedFilter({ overriddenOnly: checked })
               }
             >
-              {getTypeLabel(type)}
-            </DropdownMenuItem>
-          ))}
-        </DropdownMenuContent>
-      </DropdownMenu>
+              Overridden only
+            </FilterCheckbox>
+
+            <FilterPanelSeparator />
+            <div className="grid grid-cols-2 gap-x-2">
+              <FilterField
+                label="Status"
+                value={filter.advanced.status}
+                placeholder="200, 2xx, >=400"
+                onChange={(status) => updateAdvancedFilter({ status })}
+              />
+              <FilterField
+                label="Domain"
+                value={filter.advanced.domain}
+                placeholder="api.example.com"
+                onChange={(domain) => updateAdvancedFilter({ domain })}
+              />
+              <FilterField
+                label="MIME Type"
+                value={filter.advanced.contentType}
+                placeholder="json"
+                onChange={(contentType) =>
+                  updateAdvancedFilter({ contentType })
+                }
+              />
+              <FilterField
+                label="Min Size"
+                value={filter.advanced.minSize}
+                placeholder="1024"
+                onChange={(minSize) => updateAdvancedFilter({ minSize })}
+              />
+              <FilterField
+                label="Max Size"
+                value={filter.advanced.maxSize}
+                placeholder="50000"
+                onChange={(maxSize) => updateAdvancedFilter({ maxSize })}
+              />
+              <FilterField
+                label="Min Duration"
+                value={filter.advanced.minDuration}
+                placeholder="500"
+                onChange={(minDuration) =>
+                  updateAdvancedFilter({ minDuration })
+                }
+              />
+              <FilterField
+                label="Max Duration"
+                value={filter.advanced.maxDuration}
+                placeholder="2000"
+                onChange={(maxDuration) =>
+                  updateAdvancedFilter({ maxDuration })
+                }
+              />
+            </div>
+          </div>
+        </FloatingPortal>
+      )}
 
-      {/* Clear Filters */}
       {hasActiveFilters && (
         <Button
           variant="ghost"

package/src/ui/components/HexView.tsx

@@ -0,0 +1,54 @@
+import { Virtuoso } from 'react-virtuoso';
+import {
+  BYTES_PER_HEX_ROW,
+  formatHexRow,
+  rowCountForByteLength,
+} from '../utils/hex';
+
+export type HexViewProps = {
+  bytes: Uint8Array;
+};
+
+type HexRowProps = {
+  offset: string;
+  hex: string;
+  ascii: string;
+};
+
+// Rendered each scroll tick by virtuoso. Kept inline rather than
+// memoized because the per-row work is dominated by `formatHexRow`
+// which itself is cheap; memoizing wouldn't change cost meaningfully.
+const HexRow = ({ offset, hex, ascii }: HexRowProps) => (
+  <div className="flex gap-4 font-mono text-xs leading-snug whitespace-pre">
+    <span className="text-gray-500">{offset}</span>
+    <span className="text-gray-200">{hex}</span>
+    <span className="text-gray-400">{`|${ascii}|`}</span>
+  </div>
+);
+
+// Virtualized hex view. Each row is the classic offset / hex / ASCII
+// triple; native text selection covers what's currently rendered
+// (off-screen rows are unmounted, by design). When users need every
+// byte they reach for the Download button on the metadata card.
+export const HexView = ({ bytes }: HexViewProps) => {
+  const totalCount = rowCountForByteLength(bytes.byteLength);
+
+  if (totalCount === 0) {
+    return (
+      <div className="text-xs text-gray-500 italic">No bytes to display.</div>
+    );
+  }
+
+  return (
+    <div className="bg-gray-900 border border-gray-700 rounded">
+      <Virtuoso
+        style={{ height: 320 }}
+        totalCount={totalCount}
+        itemContent={(index) => {
+          const row = formatHexRow(bytes, index * BYTES_PER_HEX_ROW);
+          return <HexRow offset={row.offset} hex={row.hex} ascii={row.ascii} />;
+        }}
+      />
+    </div>
+  );
+};

package/src/ui/components/MetadataCard.tsx

@@ -0,0 +1,95 @@
+import { Download } from 'lucide-react';
+import { KeyValueGrid } from './KeyValueGrid';
+import {
+  base64ToBlob,
+  deriveFilename,
+  downloadBlob,
+  readHeader,
+} from '../utils/download';
+import type { RenderCtx } from '../response-renderers/types';
+
+export type MetadataCardBody =
+  | { kind: 'binary'; base64: string }
+  | { kind: 'binary-too-large'; size: number };
+
+export type MetadataCardProps = {
+  body: MetadataCardBody;
+  ctx: RenderCtx;
+};
+
+const formatBytes = (bytes: number): string => {
+  if (bytes >= 1024 * 1024) {
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+  }
+  if (bytes >= 1024) {
+    return `${(bytes / 1024).toFixed(1)} KB`;
+  }
+  return `${bytes} bytes`;
+};
+
+// base64 inflates ~33%; subtract trailing `=` padding for the true
+// decoded byte count.
+const decodedByteCount = (base64: string): number => {
+  const padding = base64.endsWith('==') ? 2 : base64.endsWith('=') ? 1 : 0;
+  return Math.floor((base64.length * 3) / 4) - padding;
+};
+
+export const MetadataCard = ({ body, ctx }: MetadataCardProps) => {
+  const decodedSize =
+    body.kind === 'binary' ? decodedByteCount(body.base64) : body.size;
+
+  const contentLengthHeader = readHeader(ctx.headers, 'Content-Length');
+  const filename = deriveFilename({
+    headers: ctx.headers,
+    url: ctx.url,
+    contentType: ctx.contentType,
+  });
+
+  const isDownloadAvailable = body.kind === 'binary';
+  const downloadTitle = isDownloadAvailable
+    ? `Download ${filename}`
+    : `Response too large to download (> 5 MB cap, size: ${formatBytes(decodedSize)})`;
+
+  const handleDownload = () => {
+    if (body.kind !== 'binary') return;
+    const blob = base64ToBlob(body.base64, ctx.contentType);
+    downloadBlob(blob, filename);
+  };
+
+  return (
+    <div className="flex items-start justify-between gap-3 bg-gray-800 border border-gray-700 rounded p-3">
+      <div className="flex-1 min-w-0">
+        <KeyValueGrid
+          items={[
+            {
+              key: 'Size',
+              value: formatBytes(decodedSize),
+            },
+            ...(contentLengthHeader
+              ? [
+                  {
+                    key: 'Content-Length',
+                    value: contentLengthHeader,
+                  },
+                ]
+              : []),
+            {
+              key: 'Filename',
+              value: filename,
+            },
+          ]}
+        />
+      </div>
+      <button
+        type="button"
+        onClick={handleDownload}
+        disabled={!isDownloadAvailable}
+        title={downloadTitle}
+        className="inline-flex items-center gap-1 px-2 py-1 text-xs rounded border border-violet-500 text-violet-200 hover:bg-violet-900/40 disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent transition-colors"
+      >
+        <Download className="h-3 w-3" />
+        Download
+      </button>
+    </div>
+  );
+};