@rozenite/network-activity-plugin 1.9.0 → 1.11.0

package/src/ui/response-renderers/__tests__/xml.test.tsx

@@ -0,0 +1,100 @@
+// @vitest-environment jsdom
+import type { ReactElement } from 'react';
+import { describe, expect, it } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/vitest';
+import { xmlRenderer } from '../xml';
+import type { RenderCtx } from '../types';
+
+const baseCtx: RenderCtx = {
+  contentType: 'application/xml',
+  url: 'https://example.com/feed.xml',
+};
+
+const renderXml = (view: 'preview' | 'raw', body: string) =>
+  render(xmlRenderer.render({ view, body, ctx: baseCtx }) as ReactElement);
+
+const VALID_XML =
+  '<feed xmlns="http://www.w3.org/2005/Atom"><title>Demo</title></feed>';
+
+describe('xmlRenderer', () => {
+  it('declares both preview and raw views with preview as default', () => {
+    expect(xmlRenderer.views).toEqual(['preview', 'raw']);
+    expect(xmlRenderer.defaultView).toBe('preview');
+  });
+
+  it('supports override (XML bodies are strings — the editor works on them)', () => {
+    expect(xmlRenderer.supportsOverride).toBe(true);
+  });
+
+  describe('preview view', () => {
+    it('renders the parsed XML tree (tag names visible)', () => {
+      renderXml('preview', VALID_XML);
+      // Each non-self-closing element renders both an open and a close
+      // tag with the same name — two occurrences each is expected.
+      expect(screen.getAllByText('feed').length).toBeGreaterThan(0);
+      expect(screen.getAllByText('title').length).toBeGreaterThan(0);
+      expect(screen.getByText('Demo')).toBeInTheDocument();
+    });
+  });
+
+  describe('raw view', () => {
+    it('renders the XML source as text and does not render a tree', () => {
+      renderXml('raw', VALID_XML);
+      // The full source should be present as a CodeBlock text node.
+      expect(screen.getByText(VALID_XML)).toBeInTheDocument();
+      // The tag-name span (used by the tree, with the standalone text
+      // "feed" inside a styled span) should not appear when raw — the
+      // raw source contains "feed" only inside the larger XML literal.
+      const standaloneFeed = screen
+        .queryAllByText('feed')
+        .filter((el) => el.tagName.toLowerCase() === 'span');
+      expect(standaloneFeed).toHaveLength(0);
+    });
+  });
+
+  describe('malformed XML', () => {
+    it('falls back to source + warning when parser produces a parsererror element', () => {
+      // Forces the Chrome-style failure where DOMParser returns a
+      // Document whose documentElement IS the parsererror element.
+      const MALFORMED = '<feed><unclosed></feed>';
+      renderXml('preview', MALFORMED);
+      expect(screen.getByText(MALFORMED)).toBeInTheDocument();
+      expect(
+        screen.getByText(/Failed to parse as XML, showing as raw text/),
+      ).toBeInTheDocument();
+    });
+
+    it('also flags Firefox-style nested parsererror (namespace-aware detection)', () => {
+      // Build a Document by hand that mimics Firefox's failure shape:
+      // a valid documentElement that nests a <parsererror> in the
+      // Firefox XML-parser-error namespace. The hasParseError helper
+      // must detect this via getElementsByTagNameNS, not just by
+      // checking documentElement.nodeName.
+      //
+      // We can't easily force the Firefox parser path inside jsdom,
+      // but we can verify the detector via a hand-crafted body that
+      // includes the FF namespace as XML — when DOMParser parses it,
+      // the resulting document will contain a parsererror in that NS.
+      const FIREFOX_LIKE =
+        '<root xmlns:px="http://www.mozilla.org/newlayout/xml/parsererror.xml"><px:parsererror>broken</px:parsererror></root>';
+      renderXml('preview', FIREFOX_LIKE);
+      expect(
+        screen.getByText(/Failed to parse as XML, showing as raw text/),
+      ).toBeInTheDocument();
+    });
+  });
+
+  describe('content-type acceptance', () => {
+    it('renders an application/xhtml+xml body as a tree', () => {
+      const XHTML =
+        '<html xmlns="http://www.w3.org/1999/xhtml"><body><p>Hi</p></body></html>';
+      renderXml('preview', XHTML);
+      // Each element renders open + close, so 2x per tag.
+      expect(screen.getAllByText('html').length).toBeGreaterThan(0);
+      expect(screen.getAllByText('body').length).toBeGreaterThan(0);
+      expect(screen.getAllByText('p').length).toBeGreaterThan(0);
+      expect(screen.getByText('Hi')).toBeInTheDocument();
+    });
+  });
+});

package/src/ui/response-renderers/binary-too-large.tsx

@@ -0,0 +1,36 @@
+import type { ResponseRenderer } from './types';
+
+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`;
+};
+
+export const binaryTooLargeRenderer: ResponseRenderer = {
+  id: 'binary-too-large',
+  matches: (_contentType, body) =>
+    typeof body === 'object' &&
+    body !== null &&
+    body.kind === 'binary-too-large',
+  views: ['raw'],
+  defaultView: 'raw',
+  supportsOverride: false,
+  render: ({ body }) => {
+    if (
+      typeof body !== 'object' ||
+      body === null ||
+      body.kind !== 'binary-too-large'
+    ) {
+      return null;
+    }
+    return (
+      <div className="text-sm text-gray-400">
+        Response too large for preview ({formatBytes(body.size)})
+      </div>
+    );
+  },
+};

package/src/ui/response-renderers/binary.tsx

@@ -0,0 +1,31 @@
+import { HexView } from '../components/HexView';
+import { MetadataCard } from '../components/MetadataCard';
+import { base64ToBytes } from '../utils/download';
+import type { ResponseRenderer } from './types';
+
+// Non-image binary: PDF, audio, video, fonts, application/octet-stream,
+// anything else the server returns as bytes that isn't an image and
+// isn't text-friendly. The Raw view is the only sensible surface here
+// — there's no "preview" of a font or a zip the way there is of a PNG.
+export const binaryRenderer: ResponseRenderer = {
+  id: 'binary',
+  matches: (contentType, body) =>
+    typeof body === 'object' &&
+    body !== null &&
+    body.kind === 'binary' &&
+    !contentType.startsWith('image/'),
+  views: ['raw'],
+  defaultView: 'raw',
+  supportsOverride: false,
+  render: ({ body, ctx }) => {
+    if (typeof body !== 'object' || body === null || body.kind !== 'binary') {
+      return null;
+    }
+    return (
+      <div className="space-y-3">
+        <MetadataCard body={body} ctx={ctx} />
+        <HexView bytes={base64ToBytes(body.base64)} />
+      </div>
+    );
+  },
+};

package/src/ui/response-renderers/empty.tsx

@@ -0,0 +1,14 @@
+import type { ResponseRenderer } from './types';
+
+export const emptyRenderer: ResponseRenderer = {
+  id: 'empty',
+  matches: (_contentType, body) => body === null,
+  views: [],
+  defaultView: 'raw',
+  supportsOverride: false,
+  render: () => (
+    <div className="text-sm text-gray-400">
+      No response body available for this request
+    </div>
+  ),
+};

package/src/ui/response-renderers/html.tsx

@@ -0,0 +1,36 @@
+import { CodeBlock } from '../components/CodeBlock';
+import { normalizeContentType } from '../../utils/getContentTypeMimeType';
+import type { ResponseRenderer } from './types';
+
+// Primary defense is `sandbox=""` (empty value = all restrictions on),
+// which blocks script execution and gives the iframe a unique origin.
+// CSP is defense-in-depth against subresource fetches that sandbox does
+// not block (external images, stylesheets, fonts) — without it, previewing
+// arbitrary HTML would fire requests from the developer's browser to
+// whatever URLs the captured response references.
+const CSP_META =
+  '<meta http-equiv="Content-Security-Policy" content="default-src \'none\'; style-src \'unsafe-inline\'; img-src data:;">';
+
+export const htmlRenderer: ResponseRenderer = {
+  id: 'html',
+  matches: (contentType, body) =>
+    typeof body === 'string' &&
+    normalizeContentType(contentType) === 'text/html',
+  views: ['preview', 'raw'],
+  defaultView: 'preview',
+  supportsOverride: true,
+  render: ({ view, body }) => {
+    if (typeof body !== 'string') return null;
+    if (view === 'raw') {
+      return <CodeBlock>{body}</CodeBlock>;
+    }
+    return (
+      <iframe
+        title="HTML response preview"
+        sandbox=""
+        srcDoc={CSP_META + body}
+        className="w-full h-[500px] bg-white border border-gray-700 rounded-md"
+      />
+    );
+  },
+};

package/src/ui/response-renderers/image.tsx

@@ -0,0 +1,37 @@
+import { HexView } from '../components/HexView';
+import { MetadataCard } from '../components/MetadataCard';
+import { base64ToBytes } from '../utils/download';
+import type { ResponseRenderer } from './types';
+
+export const imageRenderer: ResponseRenderer = {
+  id: 'image',
+  matches: (contentType, body) =>
+    typeof body === 'object' &&
+    body !== null &&
+    body.kind === 'binary' &&
+    contentType.startsWith('image/'),
+  views: ['preview', 'raw'],
+  defaultView: 'preview',
+  supportsOverride: false,
+  render: ({ view, body, ctx }) => {
+    if (typeof body !== 'object' || body === null || body.kind !== 'binary') {
+      return null;
+    }
+    if (view === 'preview') {
+      const dataUrl = `data:${ctx.contentType};base64,${body.base64}`;
+      return (
+        <img
+          src={dataUrl}
+          alt="Response image"
+          className="max-w-full max-h-[400px] object-contain bg-gray-800 rounded-md border border-gray-700 p-2"
+        />
+      );
+    }
+    return (
+      <div className="space-y-3">
+        <MetadataCard body={body} ctx={ctx} />
+        <HexView bytes={base64ToBytes(body.base64)} />
+      </div>
+    );
+  },
+};

package/src/ui/response-renderers/index.ts

@@ -0,0 +1,55 @@
+import { binaryRenderer } from './binary';
+import { binaryTooLargeRenderer } from './binary-too-large';
+import { emptyRenderer } from './empty';
+import { htmlRenderer } from './html';
+import { imageRenderer } from './image';
+import { jsonRenderer } from './json';
+import { svgRenderer } from './svg';
+import { textFallbackRenderer } from './text-fallback';
+import { unknownRenderer } from './unknown';
+import { xmlRenderer } from './xml';
+import type { ResponseBody } from '../../shared/client';
+import type { ResponseRenderer } from './types';
+
+export type {
+  RenderCtx,
+  ResponseRenderer,
+  ResponseView,
+  RenderArgs,
+} from './types';
+
+// Order matters: matches() is evaluated top to bottom, first hit wins.
+// More specific predicates must come before more general ones — e.g.
+// SVG must match before generic image/* (SVG bodies are strings, but
+// the image renderer wouldn't claim them either; keeping SVG first is
+// belt-and-suspenders). Binary-too-large precedes any binary handler.
+// imageRenderer must precede binaryRenderer — both claim
+// `body.kind === 'binary'`, but image scopes itself to `image/*` and
+// binary takes everything else. text-fallback catches every remaining
+// string body; unknown is the defensive last-resort.
+export const renderers: ResponseRenderer[] = [
+  emptyRenderer,
+  binaryTooLargeRenderer,
+  svgRenderer,
+  imageRenderer,
+  binaryRenderer,
+  jsonRenderer,
+  htmlRenderer,
+  xmlRenderer,
+  textFallbackRenderer,
+  unknownRenderer,
+];
+
+export const findRenderer = (
+  contentType: string,
+  body: ResponseBody,
+): ResponseRenderer => {
+  for (const renderer of renderers) {
+    if (renderer.matches(contentType, body)) {
+      return renderer;
+    }
+  }
+  // `unknownRenderer` is the last entry with matches: () => true, so we
+  // never reach this — but TypeScript can't see that.
+  return unknownRenderer;
+};

package/src/ui/response-renderers/json.tsx

@@ -0,0 +1,40 @@
+import { CodeBlock } from '../components/CodeBlock';
+import { JsonTree } from '../components/JsonTree';
+import { isJsonContentType } from '../../utils/getContentTypeMimeType';
+import type { ResponseRenderer } from './types';
+
+export const jsonRenderer: ResponseRenderer = {
+  id: 'json',
+  matches: (contentType, body) =>
+    typeof body === 'string' && isJsonContentType(contentType),
+  views: ['preview', 'raw'],
+  defaultView: 'preview',
+  supportsOverride: true,
+  render: ({ view, body }) => {
+    if (typeof body !== 'string') return null;
+    let parsed: unknown;
+    try {
+      parsed = JSON.parse(body);
+    } catch {
+      return (
+        <>
+          <CodeBlock>{body}</CodeBlock>
+          <div className="text-xs text-gray-500 mt-1">
+            ⚠️ Failed to parse as JSON, showing as raw text
+          </div>
+        </>
+      );
+    }
+    if (view === 'raw') {
+      // Pretty-print regardless of the wire format. APIs commonly ship
+      // minified JSON, and re-serializing with 2-space indent is what
+      // makes the Raw view readable.
+      return <CodeBlock>{JSON.stringify(parsed, null, 2)}</CodeBlock>;
+    }
+    return (
+      <CodeBlock>
+        <JsonTree data={parsed} />
+      </CodeBlock>
+    );
+  },
+};

package/src/ui/response-renderers/svg.tsx

@@ -0,0 +1,27 @@
+import { CodeBlock } from '../components/CodeBlock';
+import type { ResponseRenderer } from './types';
+
+export const svgRenderer: ResponseRenderer = {
+  id: 'svg',
+  matches: (contentType, body) =>
+    typeof body === 'string' && contentType.startsWith('image/svg+xml'),
+  views: ['preview', 'raw'],
+  defaultView: 'preview',
+  supportsOverride: false,
+  render: ({ view, body }) => {
+    if (typeof body !== 'string') return null;
+    if (view === 'preview') {
+      // <img>-embedded SVG runs no scripts in any major browser — this
+      // is the safe way to render SVG from untrusted servers.
+      const dataUrl = `data:image/svg+xml;utf8,${encodeURIComponent(body)}`;
+      return (
+        <img
+          src={dataUrl}
+          alt="SVG response"
+          className="max-w-full max-h-[400px] object-contain bg-gray-800 rounded-md border border-gray-700 p-2"
+        />
+      );
+    }
+    return <CodeBlock>{body}</CodeBlock>;
+  },
+};

package/src/ui/response-renderers/text-fallback.tsx

@@ -0,0 +1,14 @@
+import { CodeBlock } from '../components/CodeBlock';
+import type { ResponseRenderer } from './types';
+
+export const textFallbackRenderer: ResponseRenderer = {
+  id: 'text-fallback',
+  matches: (_contentType, body) => typeof body === 'string',
+  views: ['raw'],
+  defaultView: 'raw',
+  supportsOverride: true,
+  render: ({ body }) => {
+    if (typeof body !== 'string') return null;
+    return <CodeBlock>{body}</CodeBlock>;
+  },
+};

package/src/ui/response-renderers/types.ts

@@ -0,0 +1,38 @@
+import type { ReactNode } from 'react';
+import type { HttpHeaders, ResponseBody } from '../../shared/client';
+
+export type ResponseView = 'preview' | 'raw';
+
+export type RenderCtx = {
+  contentType: string;
+  url: string;
+  // Response headers, used for fields like Content-Length and
+  // Content-Disposition filename. Optional so renderers can be
+  // tested with minimal fixtures.
+  headers?: HttpHeaders;
+  // Response size in bytes as reported by capture (may differ from
+  // the decoded base64 length when the server gzips on the wire).
+  size?: number;
+};
+
+export type RenderArgs = {
+  view: ResponseView;
+  body: ResponseBody;
+  ctx: RenderCtx;
+};
+
+// A response-format renderer: a self-contained entry the dispatcher
+// picks based on `matches`. Order in the `renderers` array is matching
+// priority — first match wins, so narrower predicates come before
+// wider fallbacks.
+export type ResponseRenderer = {
+  id: string;
+  matches: (contentType: string, body: ResponseBody) => boolean;
+  // Empty when the renderer has no toggleable views (e.g. a single
+  // placeholder for empty bodies). The Preview/Raw toggle is hidden
+  // unless `views.length > 1`.
+  views: ResponseView[];
+  defaultView: ResponseView;
+  supportsOverride: boolean;
+  render: (args: RenderArgs) => ReactNode;
+};

package/src/ui/response-renderers/unknown.tsx

@@ -0,0 +1,18 @@
+import type { ResponseRenderer } from './types';
+
+// Defensive last-resort match — every preceding renderer should already
+// have claimed any well-formed body. Reaching this renderer means the
+// wire format produced a shape no one handles, which is a bug somewhere
+// upstream. The label exposes the content-type for the bug report.
+export const unknownRenderer: ResponseRenderer = {
+  id: 'unknown',
+  matches: () => true,
+  views: [],
+  defaultView: 'raw',
+  supportsOverride: false,
+  render: ({ ctx }) => (
+    <div className="text-sm text-gray-400">
+      Could not display response (Content-Type: {ctx.contentType || 'unknown'})
+    </div>
+  ),
+};

package/src/ui/response-renderers/xml.tsx

@@ -0,0 +1,46 @@
+import { CodeBlock } from '../components/CodeBlock';
+import { XmlTree } from '../components/XmlTree';
+import { isXmlContentType } from '../../utils/getContentTypeMimeType';
+import type { ResponseRenderer } from './types';
+
+// DOMParser does not throw on malformed XML — instead it produces a
+// Document containing a `<parsererror>` element, but with different
+// placement across engines: Chrome/Safari put it as `documentElement`;
+// Firefox nests it under a dedicated namespace. Cover both.
+const FIREFOX_PARSERERROR_NS =
+  'http://www.mozilla.org/newlayout/xml/parsererror.xml';
+
+const hasParseError = (doc: Document): boolean =>
+  doc.documentElement.nodeName === 'parsererror' ||
+  doc.getElementsByTagNameNS(FIREFOX_PARSERERROR_NS, 'parsererror').length > 0;
+
+export const xmlRenderer: ResponseRenderer = {
+  id: 'xml',
+  matches: (contentType, body) =>
+    typeof body === 'string' && isXmlContentType(contentType),
+  views: ['preview', 'raw'],
+  defaultView: 'preview',
+  supportsOverride: true,
+  render: ({ view, body }) => {
+    if (typeof body !== 'string') return null;
+    const doc = new DOMParser().parseFromString(body, 'application/xml');
+    if (hasParseError(doc)) {
+      return (
+        <>
+          <CodeBlock>{body}</CodeBlock>
+          <div className="text-xs text-gray-500 mt-1">
+            ⚠️ Failed to parse as XML, showing as raw text
+          </div>
+        </>
+      );
+    }
+    if (view === 'raw') {
+      return <CodeBlock>{body}</CodeBlock>;
+    }
+    return (
+      <CodeBlock>
+        <XmlTree root={doc.documentElement} />
+      </CodeBlock>
+    );
+  },
+};

package/src/ui/state/__tests__/store.test.ts

@@ -0,0 +1,77 @@
+import { beforeAll, describe, expect, it, vi } from 'vitest';
+import type { createNetworkActivityStore as createStoreType } from '../store';
+
+let createNetworkActivityStore: typeof createStoreType;
+
+beforeAll(async () => {
+  const storage = new Map<string, string>();
+
+  vi.stubGlobal('localStorage', {
+    getItem: (key: string) => storage.get(key) ?? null,
+    setItem: (key: string, value: string) => {
+      storage.set(key, value);
+    },
+    removeItem: (key: string) => {
+      storage.delete(key);
+    },
+  });
+
+  ({ createNetworkActivityStore } = await import('../store'));
+});
+
+describe('network activity store', () => {
+  it('records elapsed duration for failed HTTP requests', () => {
+    const store = createNetworkActivityStore();
+
+    store.getState().handleEvent('request-sent', {
+      requestId: 'request-1',
+      timestamp: 100,
+      request: {
+        url: 'https://example.com/api',
+        method: 'GET',
+        headers: {},
+      },
+      initiator: {
+        type: 'script',
+      },
+      type: 'Fetch',
+    });
+    store.getState().handleEvent('request-failed', {
+      requestId: 'request-1',
+      timestamp: 250,
+      type: 'Fetch',
+      error: 'Network request failed',
+      canceled: false,
+    });
+
+    expect(store.getState().networkEntries.get('request-1')).toMatchObject({
+      status: 'failed',
+      duration: 150,
+    });
+  });
+
+  it('records elapsed duration for websocket errors', () => {
+    const store = createNetworkActivityStore();
+
+    store.getState().handleEvent('websocket-connect', {
+      type: 'websocket-connect',
+      url: 'wss://example.com/socket',
+      socketId: 'socket-1',
+      timestamp: 100,
+      protocols: null,
+      options: [],
+    });
+    store.getState().handleEvent('websocket-error', {
+      type: 'websocket-error',
+      url: 'wss://example.com/socket',
+      socketId: 'socket-1',
+      timestamp: 175,
+      error: 'Socket failed',
+    });
+
+    expect(store.getState().networkEntries.get('ws-socket-1')).toMatchObject({
+      status: 'error',
+      duration: 75,
+    });
+  });
+});

package/src/ui/state/derived.ts

@@ -18,6 +18,7 @@ export const getProcessedRequests = memoize((state: NetworkActivityState) => {
         id: httpEntry.id,
         type: 'http',
         source: httpEntry.source,
+        initiator: httpEntry.initiator,
         name: httpEntry.request.url,
         status: httpEntry.status,
         timestamp: httpEntry.timestamp,
@@ -25,6 +26,8 @@ export const getProcessedRequests = memoize((state: NetworkActivityState) => {
         size: httpEntry.size ?? null,
         method: httpEntry.request.method,
         httpStatus: httpEntry.response?.status,
+        contentType: httpEntry.response?.contentType,
+        ttfb: httpEntry.ttfb,
         progress: httpEntry.progress,
       });
     } else if (entry.type === 'websocket') {
@@ -40,12 +43,15 @@ export const getProcessedRequests = memoize((state: NetworkActivityState) => {
         size: null,
         method: 'WS',
         httpStatus: 0,
+        contentType: undefined,
       });
     } else if (entry.type === 'sse') {
       const sseEntry = entry as SSENetworkEntry;
       requests.push({
         id: sseEntry.id,
         type: 'sse',
+        source: sseEntry.source,
+        initiator: sseEntry.initiator,
         name: sseEntry.request.url,
         status: sseEntry.status,
         timestamp: sseEntry.timestamp,
@@ -53,6 +59,7 @@ export const getProcessedRequests = memoize((state: NetworkActivityState) => {
         size: null,
         method: 'SSE',
         httpStatus: 0,
+        contentType: sseEntry.response?.contentType,
       });
     }
   }
@@ -80,6 +87,7 @@ export const getRequestSummary = (
         id: httpEntry.id,
         type: 'http',
         source: httpEntry.source,
+        initiator: httpEntry.initiator,
         name: httpEntry.request.url,
         status: httpEntry.status,
         timestamp: httpEntry.timestamp,
@@ -87,6 +95,8 @@ export const getRequestSummary = (
         size: httpEntry.size ?? null,
         method: httpEntry.request.method,
         httpStatus: httpEntry.response?.status || 0,
+        contentType: httpEntry.response?.contentType,
+        ttfb: httpEntry.ttfb,
         progress: httpEntry.progress,
       };
     } else if (entry.type === 'websocket') {
@@ -102,12 +112,15 @@ export const getRequestSummary = (
         size: null,
         method: 'WS',
         httpStatus: 0,
+        contentType: undefined,
       };
     } else if (entry.type === 'sse') {
       const sseEntry = entry as SSENetworkEntry;
       return {
         id: sseEntry.id,
         type: 'sse',
+        source: sseEntry.source,
+        initiator: sseEntry.initiator,
         name: sseEntry.request.url,
         status: sseEntry.status,
         timestamp: sseEntry.timestamp,
@@ -115,6 +128,7 @@ export const getRequestSummary = (
         size: null,
         method: 'SSE',
         httpStatus: 0,
+        contentType: sseEntry.response?.contentType,
       };
     }