@rozenite/network-activity-plugin 1.9.0 → 1.10.0

package/src/ui/components/RequestList.tsx

@@ -8,8 +8,13 @@ import {
   SortingState,
   useReactTable,
 } from '@tanstack/react-table';
-import { ProcessedRequest } from '../state/model';
-import { RequestId, RequestOverride } from '../../shared/client';
+import type { ProcessedRequest } from '../state/model';
+import type {
+  HttpMethod,
+  NetworkEventSource,
+  RequestId,
+  RequestOverride,
+} from '../../shared/client';
 import {
   useNetworkActivityActions,
   useOverrides,
@@ -20,18 +25,22 @@ import {
 import { getStatusColor } from '../utils/getStatusColor';
 import { FilterState } from './FilterBar';
 import { isNumber } from '../../utils/typeChecks';
-import type { NetworkEventSource } from '../../shared/client';
 
 type NetworkRequest = {
   id: RequestId;
   name: string;
   status: string | number;
-  method: string;
+  statusCode?: number;
+  statusState: ProcessedRequest['status'];
+  method: ProcessedRequest['method'];
   domain: string;
   path: string;
+  contentType?: string;
   size: string;
+  sizeBytes: number | null;
   time: string;
-  type: string;
+  durationMs: number;
+  type: ProcessedRequest['type'];
   source?: NetworkEventSource;
   startTime: string;
   hasOverride: boolean;
@@ -139,6 +148,175 @@ const sortTime: SortingFn<NetworkRequest> = (rowA, rowB, columnId) => {
   return getNumericValue(a) - getNumericValue(b);
 };
 
+const parseThreshold = (value: string): number | null => {
+  const normalizedValue = value.trim();
+  if (!normalizedValue) {
+    return null;
+  }
+
+  const parsedValue = Number(normalizedValue);
+  return Number.isFinite(parsedValue) ? parsedValue : null;
+};
+
+const matchesStatusFilter = (
+  statusCode: number | undefined,
+  statusFilter: string,
+) => {
+  const normalizedFilter = statusFilter.trim().toLowerCase();
+  if (!normalizedFilter) {
+    return true;
+  }
+
+  if (statusCode === undefined) {
+    return false;
+  }
+
+  const statusRangeMatch = normalizedFilter.match(/^(\d{3})\s*-\s*(\d{3})$/);
+  if (statusRangeMatch) {
+    const min = Number(statusRangeMatch[1]);
+    const max = Number(statusRangeMatch[2]);
+    return statusCode >= min && statusCode <= max;
+  }
+
+  const statusClassMatch = normalizedFilter.match(/^([1-5])xx$/);
+  if (statusClassMatch) {
+    return Math.floor(statusCode / 100) === Number(statusClassMatch[1]);
+  }
+
+  const comparisonMatch = normalizedFilter.match(/^(>=|<=|>|<)\s*(\d{3})$/);
+  if (comparisonMatch) {
+    const value = Number(comparisonMatch[2]);
+    switch (comparisonMatch[1]) {
+      case '>=':
+        return statusCode >= value;
+      case '<=':
+        return statusCode <= value;
+      case '>':
+        return statusCode > value;
+      case '<':
+        return statusCode < value;
+    }
+  }
+
+  return statusCode === Number(normalizedFilter);
+};
+
+const isInFlightStatus = (status: string) => {
+  return ['pending', 'loading', 'connecting', 'open'].includes(status);
+};
+
+const isFailedStatus = (status: string) => {
+  return ['failed', 'error'].includes(status);
+};
+
+const isHttpMethod = (method: NetworkRequest['method']): method is HttpMethod =>
+  method !== 'WS' && method !== 'SSE';
+
+const filterNetworkRequests = (
+  requests: NetworkRequest[],
+  filter: FilterState,
+) => {
+  const searchText = filter.text.trim().toLowerCase();
+  const domainFilter = filter.advanced.domain.trim().toLowerCase();
+  const contentTypeFilter = filter.advanced.contentType.trim().toLowerCase();
+  const minSize = parseThreshold(filter.advanced.minSize);
+  const maxSize = parseThreshold(filter.advanced.maxSize);
+  const minDuration = parseThreshold(filter.advanced.minDuration);
+  const maxDuration = parseThreshold(filter.advanced.maxDuration);
+
+  return requests.filter((request) => {
+    if (filter.types.size > 0 && !filter.types.has(request.type)) {
+      return false;
+    }
+
+    if (
+      filter.advanced.methods.size > 0 &&
+      (!isHttpMethod(request.method) ||
+        !filter.advanced.methods.has(request.method))
+    ) {
+      return false;
+    }
+
+    if (
+      filter.advanced.sources.size > 0 &&
+      (!request.source || !filter.advanced.sources.has(request.source))
+    ) {
+      return false;
+    }
+
+    if (!matchesStatusFilter(request.statusCode, filter.advanced.status)) {
+      return false;
+    }
+
+    if (domainFilter && !request.domain.toLowerCase().includes(domainFilter)) {
+      return false;
+    }
+
+    if (
+      contentTypeFilter &&
+      !request.contentType?.toLowerCase().includes(contentTypeFilter)
+    ) {
+      return false;
+    }
+
+    if (filter.advanced.failedOnly && !isFailedStatus(request.statusState)) {
+      return false;
+    }
+
+    if (
+      filter.advanced.inFlightOnly &&
+      !isInFlightStatus(request.statusState)
+    ) {
+      return false;
+    }
+
+    if (filter.advanced.overriddenOnly && !request.hasOverride) {
+      return false;
+    }
+
+    if (
+      minSize !== null &&
+      (request.sizeBytes === null || request.sizeBytes < minSize)
+    ) {
+      return false;
+    }
+
+    if (
+      maxSize !== null &&
+      (request.sizeBytes === null || request.sizeBytes > maxSize)
+    ) {
+      return false;
+    }
+
+    if (minDuration !== null && request.durationMs < minDuration) {
+      return false;
+    }
+
+    if (maxDuration !== null && request.durationMs > maxDuration) {
+      return false;
+    }
+
+    if (searchText) {
+      const searchableFields = [
+        request.name,
+        request.method,
+        request.status,
+        request.domain,
+        request.path,
+        request.source,
+        request.type,
+        request.contentType,
+      ]
+        .join(' ')
+        .toLowerCase();
+
+      return searchableFields.includes(searchText);
+    }
+
+    return true;
+  });
+};
+
 const processNetworkRequests = (
   processedRequests: ProcessedRequest[],
   overrides: Map<string, RequestOverride>,
@@ -161,11 +339,16 @@ const processNetworkRequests = (
       id: request.id,
       name: generateName(request.name, showEntirePathAsName),
       status: statusDisplay,
+      statusCode: request.httpStatus || undefined,
+      statusState: request.status,
       method: request.method,
       domain,
       path,
+      contentType: request.contentType,
       size: isNumber(request.size) ? formatSize(request.size) : '—',
+      sizeBytes: isNumber(request.size) ? request.size : null,
       time: formatDuration(duration),
+      durationMs: duration,
       type: request.type,
       source: request.source,
       startTime: formatStartTime(request.timestamp),
@@ -256,39 +439,14 @@ export const RequestList = ({ filter }: RequestListProps) => {
   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,
+    const allRequests = processNetworkRequests(
+      processedRequests,
       overrides,
       clientUISettings?.showUrlAsName,
     );
-  }, [filteredRequests, overrides, clientUISettings?.showUrlAsName]);
+    return filterNetworkRequests(allRequests, filter);
+  }, [processedRequests, overrides, clientUISettings?.showUrlAsName, filter]);
 
   const table = useReactTable({
     data: requests,

package/src/ui/components/SidePanel.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { Badge } from './Badge';
 import { Button } from './Button';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from './Tabs';
@@ -6,6 +7,7 @@ import { RequestTab } from '../tabs/RequestTab';
 import { ResponseTab } from '../tabs/ResponseTab';
 import { CookiesTab } from '../tabs/CookiesTab';
 import { TimingTab } from '../tabs/TimingTab';
+import { InitiatorTab } from '../tabs/InitiatorTab';
 import { X } from 'lucide-react';
 import {
   useNetworkActivityActions,
@@ -17,6 +19,7 @@ import { NetworkEntry as OldNetworkEntry } from '../types';
 import { getStatusColor } from '../utils/getStatusColor';
 import { MessagesTab } from '../tabs/MessagesTab';
 import { SSEMessagesTab } from '../tabs/SSEMessagesTab';
+import type { ResponseView } from '../response-renderers';
 
 const getTypeColor = (type: string) => {
   const colors: Record<string, string> = {
@@ -87,6 +90,14 @@ export const SidePanel = () => {
   const selectedRequest = useSelectedRequest();
   const client = useNetworkActivityStore((state) => state._client);
   const overrides = useOverrides();
+  // Sticky Preview/Raw preference. Lives here, not in ResponseTab,
+  // because the `<Tabs key={selectedRequest.id}>` below intentionally
+  // remounts the Tabs subtree on every request switch (so the active
+  // inner tab resets). SidePanel itself stays mounted across request
+  // switches, so the preference survives — flipping to Raw on one
+  // response keeps Raw selected for every subsequent response whose
+  // renderer supports it. Resets when the panel is closed.
+  const [preferredView, setPreferredView] = useState<ResponseView>('preview');
 
   const onClose = (): void => {
     actions.setSelectedRequest(null);
@@ -166,6 +177,12 @@ export const SidePanel = () => {
           >
             Cookies
           </TabsTrigger>
+          <TabsTrigger
+            value="initiator"
+            className="data-[state=active]:bg-gray-700"
+          >
+            Initiator
+          </TabsTrigger>
           <TabsTrigger
             value="timing"
             className="data-[state=active]:bg-gray-700"
@@ -197,6 +214,12 @@ export const SidePanel = () => {
           >
             Messages
           </TabsTrigger>
+          <TabsTrigger
+            value="initiator"
+            className="data-[state=active]:bg-gray-700"
+          >
+            Initiator
+          </TabsTrigger>
         </>
       );
     }
@@ -229,6 +252,8 @@ export const SidePanel = () => {
             <ResponseTab
               selectedRequest={httpDetails}
               supportsOverrides={supportsOverrides}
+              preferredView={preferredView}
+              onPreferredViewChange={setPreferredView}
               onRequestResponseBody={(requestId) => {
                 if (client) {
                   client.send('get-response-body', {
@@ -243,6 +268,10 @@ export const SidePanel = () => {
             <CookiesTab selectedRequest={httpDetails} />
           </TabsContent>
 
+          <TabsContent value="initiator" className="flex-1 m-0 overflow-hidden">
+            <InitiatorTab selectedRequest={httpDetails} />
+          </TabsContent>
+
           <TabsContent value="timing" className="flex-1 m-0 overflow-hidden">
             <TimingTab selectedRequest={httpDetails} />
           </TabsContent>
@@ -275,6 +304,10 @@ export const SidePanel = () => {
             <SSEMessagesTab selectedRequest={sseDetails} />
           </TabsContent>
 
+          <TabsContent value="initiator" className="flex-1 m-0 overflow-hidden">
+            <InitiatorTab selectedRequest={sseDetails} />
+          </TabsContent>
+
           <TabsContent value="cookies" className="flex-1 m-0 overflow-hidden">
             <CookiesTab selectedRequest={sseDetails} />
           </TabsContent>
@@ -324,7 +357,15 @@ export const SidePanel = () => {
           }
           className="h-full flex flex-col"
         >
-          <TabsList className="grid w-full grid-cols-5 bg-gray-800 rounded-none border-b border-gray-700">
+          <TabsList
+            className={`grid w-full ${
+              selectedRequest.type === 'http'
+                ? 'grid-cols-6'
+                : selectedRequest.type === 'sse'
+                  ? 'grid-cols-4'
+                  : 'grid-cols-1'
+            } bg-gray-800 rounded-none border-b border-gray-700`}
+          >
             {getTabsListTriggers()}
           </TabsList>
 

package/src/ui/components/ViewToggle.tsx

@@ -0,0 +1,44 @@
+import type { ResponseView } from '../response-renderers';
+import { cn } from '../utils/cn';
+
+const VIEW_LABELS: Record<ResponseView, string> = {
+  preview: 'Preview',
+  raw: 'Raw',
+};
+
+export type ViewToggleProps = {
+  views: ResponseView[];
+  value: ResponseView;
+  onChange: (view: ResponseView) => void;
+};
+
+export const ViewToggle = ({ views, value, onChange }: ViewToggleProps) => {
+  if (views.length <= 1) return null;
+  return (
+    <div
+      role="tablist"
+      className="flex items-center rounded-md border border-gray-700 overflow-hidden ms-2"
+    >
+      {views.map((v) => (
+        <button
+          key={v}
+          type="button"
+          role="tab"
+          aria-selected={value === v}
+          onClick={(e) => {
+            e.stopPropagation();
+            onChange(v);
+          }}
+          className={cn(
+            'px-2 py-0.5 text-xs transition-colors',
+            value === v
+              ? 'bg-blue-600 text-white'
+              : 'text-gray-300 hover:bg-gray-700',
+          )}
+        >
+          {VIEW_LABELS[v]}
+        </button>
+      ))}
+    </div>
+  );
+};

package/src/ui/components/XmlTree.tsx

@@ -0,0 +1,160 @@
+import { useState } from 'react';
+import { ChevronDown, ChevronRight } from 'lucide-react';
+import { JsonTreeCopyableItem } from './JsonTreeCopyableItem';
+
+export type XmlTreeProps = {
+  root: Element;
+};
+
+export const XmlTree = ({ root }: XmlTreeProps) => {
+  return (
+    <div className="font-mono text-sm text-gray-200">
+      <XmlNode node={root} depth={0} />
+    </div>
+  );
+};
+
+type XmlNodeProps = {
+  node: Node;
+  depth: number;
+};
+
+// Whitespace-only text between sibling elements is DOM-pretty-print
+// noise. Filter it so a 10-element document doesn't render as 21 nodes.
+// Mixed content like `<p>Hello <b>world</b>!</p>` survives because its
+// fragments contain non-whitespace.
+const isWhitespaceOnlyText = (node: Node): boolean =>
+  node.nodeType === Node.TEXT_NODE && /^\s*$/.test(node.nodeValue ?? '');
+
+const renderableChildren = (node: Node): Node[] =>
+  Array.from(node.childNodes).filter((child) => !isWhitespaceOnlyText(child));
+
+const XmlNode = ({ node, depth }: XmlNodeProps) => {
+  if (node.nodeType === Node.ELEMENT_NODE) {
+    return <XmlElementNode element={node as Element} depth={depth} />;
+  }
+  if (node.nodeType === Node.CDATA_SECTION_NODE) {
+    return <XmlCDataNode cdata={node as CDATASection} depth={depth} />;
+  }
+  if (node.nodeType === Node.TEXT_NODE) {
+    return <XmlTextNode text={node as Text} depth={depth} />;
+  }
+  // Comments, processing instructions, DOCTYPE — intentionally not
+  // rendered in the tree. They're rare in API responses; the Raw view
+  // still shows them verbatim.
+  return null;
+};
+
+type XmlElementNodeProps = {
+  element: Element;
+  depth: number;
+};
+
+const XmlElementNode = ({ element, depth }: XmlElementNodeProps) => {
+  const [expanded, setExpanded] = useState(true);
+  const children = renderableChildren(element);
+  const hasChildren = children.length > 0;
+  const tagName = element.nodeName;
+  const attributes = Array.from(element.attributes);
+
+  // Self-closing if no renderable children.
+  const isSelfClosing = !hasChildren;
+
+  const serializeSubtree = () => new XMLSerializer().serializeToString(element);
+
+  return (
+    <div style={{ paddingLeft: depth === 0 ? 0 : `1rem` }}>
+      <div className="flex items-start">
+        {hasChildren ? (
+          <button
+            type="button"
+            onClick={() => setExpanded((v) => !v)}
+            className="mt-0.5 mr-1 -ml-5 text-gray-500 hover:text-gray-300 transition-colors"
+            aria-label={expanded ? 'Collapse' : 'Expand'}
+          >
+            {expanded ? (
+              <ChevronDown className="h-3 w-3" />
+            ) : (
+              <ChevronRight className="h-3 w-3" />
+            )}
+          </button>
+        ) : null}
+        <JsonTreeCopyableItem getCopyableValue={serializeSubtree}>
+          <span>
+            <span className="text-gray-500">&lt;</span>
+            <span className="text-blue-400">{tagName}</span>
+            {attributes.map((attr) => (
+              <XmlAttribute key={attr.name} attr={attr} />
+            ))}
+            <span className="text-gray-500">{isSelfClosing ? ' />' : '>'}</span>
+          </span>
+        </JsonTreeCopyableItem>
+      </div>
+
+      {hasChildren ? (
+        <>
+          <div style={{ display: expanded ? 'block' : 'none' }}>
+            {children.map((child, idx) => (
+              <XmlNode key={idx} node={child} depth={depth + 1} />
+            ))}
+          </div>
+          {/* Collapsed inline closing tag preview — gives a visual hint
+              of what was collapsed. */}
+          {!expanded ? <span className="text-gray-500 ml-1">…</span> : null}
+          <div>
+            <span className="text-gray-500">&lt;/</span>
+            <span className="text-blue-400">{tagName}</span>
+            <span className="text-gray-500">&gt;</span>
+          </div>
+        </>
+      ) : null}
+    </div>
+  );
+};
+
+const XmlAttribute = ({ attr }: { attr: Attr }) => (
+  <>
+    <span> </span>
+    <span className="text-amber-400">{attr.name}</span>
+    <span className="text-gray-500">=</span>
+    <span className="text-gray-500">&quot;</span>
+    <span className="text-green-400">{attr.value}</span>
+    <span className="text-gray-500">&quot;</span>
+  </>
+);
+
+type XmlTextNodeProps = {
+  text: Text;
+  depth: number;
+};
+
+const XmlTextNode = ({ text, depth }: XmlTextNodeProps) => {
+  const value = text.nodeValue ?? '';
+  return (
+    <div style={{ paddingLeft: depth === 0 ? 0 : `1rem` }}>
+      <JsonTreeCopyableItem getCopyableValue={() => value}>
+        <span className="text-gray-200">{value}</span>
+      </JsonTreeCopyableItem>
+    </div>
+  );
+};
+
+type XmlCDataNodeProps = {
+  cdata: CDATASection;
+  depth: number;
+};
+
+const XmlCDataNode = ({ cdata, depth }: XmlCDataNodeProps) => {
+  const value = cdata.nodeValue ?? '';
+  return (
+    <div style={{ paddingLeft: depth === 0 ? 0 : `1rem` }}>
+      <JsonTreeCopyableItem getCopyableValue={() => value}>
+        <span>
+          <span className="text-purple-400">&lt;![CDATA[</span>
+          <span className="text-gray-200 whitespace-pre-wrap">{value}</span>
+          <span className="text-purple-400">]]&gt;</span>
+        </span>
+      </JsonTreeCopyableItem>
+    </div>
+  );
+};

package/src/ui/components/__tests__/CodeBlock.test.tsx

@@ -0,0 +1,89 @@
+// @vitest-environment jsdom
+import { describe, expect, it } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/vitest';
+import { CodeBlock } from '../CodeBlock';
+
+describe('CodeBlock', () => {
+  it('renders small string content as a <pre> (no virtualization)', () => {
+    const { container } = render(<CodeBlock>{'a'.repeat(100)}</CodeBlock>);
+    expect(container.querySelector('pre')).toBeInTheDocument();
+    expect(screen.queryByTestId('virtuoso-mock')).toBeNull();
+  });
+
+  it('stays flat at exactly the 50_000-character boundary (inclusive)', () => {
+    // The branch condition is `> 50_000`, so length === 50_000 must
+    // still render as <pre>. Locks the inclusive-boundary semantics.
+    const { container } = render(<CodeBlock>{'a'.repeat(50_000)}</CodeBlock>);
+    expect(container.querySelector('pre')).toBeInTheDocument();
+    expect(screen.queryByTestId('virtuoso-mock')).toBeNull();
+  });
+
+  it('switches to virtualized rendering at 50_001 characters', () => {
+    const { container } = render(<CodeBlock>{'a'.repeat(50_001)}</CodeBlock>);
+    expect(screen.getByTestId('virtuoso-mock')).toBeInTheDocument();
+    // No <pre> emitted by CodeBlock when on the virtualized path.
+    expect(container.querySelector('pre')).toBeNull();
+  });
+
+  it('preserves the body content across the virtualization threshold', () => {
+    // Build a body whose head and tail are recognizable tokens. The
+    // vi.mock passthrough renders every row, so both ends should be
+    // visible in the DOM after virtualization kicks in.
+    const filler = 'x'.repeat(50_000);
+    const body = `START\n${filler}\nEND`;
+    render(<CodeBlock>{body}</CodeBlock>);
+    expect(screen.getByTestId('virtuoso-mock')).toBeInTheDocument();
+    expect(screen.getByText('START')).toBeInTheDocument();
+    expect(screen.getByText('END')).toBeInTheDocument();
+  });
+
+  it('splits virtualized content into one row per newline', () => {
+    const lines = ['line-a', 'line-b', 'line-c'];
+    // Pad with a single long line so total length crosses the threshold,
+    // keeping the lines themselves short and matchable.
+    const body = `${lines.join('\n')}\n${'y'.repeat(50_001)}`;
+    render(<CodeBlock>{body}</CodeBlock>);
+    expect(screen.getByText('line-a')).toBeInTheDocument();
+    expect(screen.getByText('line-b')).toBeInTheDocument();
+    expect(screen.getByText('line-c')).toBeInTheDocument();
+  });
+
+  it('renders React-element children unchanged regardless of nested content size', () => {
+    // typeof children !== 'string' MUST take precedence — even if the
+    // wrapped element contains an enormous string internally, CodeBlock
+    // should stay on the flat <pre> path because the children prop
+    // itself is a React element, not a string.
+    const huge = 'z'.repeat(50_001);
+    const { container } = render(
+      <CodeBlock>
+        <div data-testid="custom-child">{huge}</div>
+      </CodeBlock>,
+    );
+    expect(container.querySelector('pre')).toBeInTheDocument();
+    expect(screen.queryByTestId('virtuoso-mock')).toBeNull();
+    expect(screen.getByTestId('custom-child')).toBeInTheDocument();
+  });
+
+  it('forwards className to the flat <pre> branch', () => {
+    const { container } = render(
+      <CodeBlock className="extra-class">{'short'}</CodeBlock>,
+    );
+    const pre = container.querySelector('pre');
+    expect(pre).toBeInTheDocument();
+    expect(pre?.className).toContain('extra-class');
+  });
+
+  it('forwards className to the virtualized branch via Virtuoso', () => {
+    const { container } = render(
+      <CodeBlock className="extra-class">{'a'.repeat(50_001)}</CodeBlock>,
+    );
+    const mockRoot = container.querySelector('[data-testid="virtuoso-mock"]');
+    expect(mockRoot).toBeInTheDocument();
+    // The vi.mock passthrough forwards `className` onto the wrapper so
+    // we can assert the prop reached Virtuoso. The real Virtuoso applies
+    // it to its outer scroll container, giving the same dark-bg /
+    // monospace / border styling as the flat <pre> branch.
+    expect(mockRoot?.className).toContain('extra-class');
+  });
+});