npm - @rozenite/network-activity-plugin - Versions diffs - 1.9.0 → 1.10.0 - Mend

@rozenite/network-activity-plugin 1.9.0 → 1.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (72) hide show

package/CHANGELOG.md +43 -0
package/dist/devtools/App.html +2 -2
package/dist/devtools/assets/{App-m6xge0az.css → App-CUXU0mup.css} +152 -2
package/dist/devtools/assets/{App-hSoryVpJ.js → App-DsimzJvx.js} +6827 -970
package/dist/react-native/chunks/boot-recording.cjs +138 -14
package/dist/react-native/chunks/boot-recording.js +138 -14
package/dist/react-native/chunks/get-nitro-module.cjs +4 -1
package/dist/react-native/chunks/get-nitro-module.js +4 -1
package/dist/react-native/chunks/useNetworkActivityDevTools.require.cjs +20 -1
package/dist/react-native/chunks/useNetworkActivityDevTools.require.js +20 -1
package/dist/react-native/index.d.ts +37 -1
package/dist/rozenite.json +1 -1
package/dist/sdk/index.d.ts +37 -1
package/package.json +12 -7
package/src/react-native/agent/use-network-activity-agent-tools.ts +22 -4
package/src/react-native/http/__tests__/http-utils.test.ts +228 -0
package/src/react-native/http/http-utils.ts +208 -25
package/src/react-native/network-inspector.ts +2 -2
package/src/react-native/nitro-fetch/get-nitro-module.ts +5 -1
package/src/react-native/nitro-fetch/nitro-network-inspector.ts +8 -2
package/src/shared/http-events.ts +40 -1
package/src/ui/components/CodeBlock.tsx +45 -1
package/src/ui/components/FilterBar.tsx +366 -58
package/src/ui/components/HexView.tsx +54 -0
package/src/ui/components/MetadataCard.tsx +95 -0
package/src/ui/components/RequestList.tsx +192 -34
package/src/ui/components/SidePanel.tsx +42 -1
package/src/ui/components/ViewToggle.tsx +44 -0
package/src/ui/components/XmlTree.tsx +160 -0
package/src/ui/components/__tests__/CodeBlock.test.tsx +89 -0
package/src/ui/components/__tests__/HexView.test.tsx +41 -0
package/src/ui/components/__tests__/MetadataCard.test.tsx +107 -0
package/src/ui/components/__tests__/ViewToggle.test.tsx +80 -0
package/src/ui/components/__tests__/XmlTree.test.tsx +149 -0
package/src/ui/response-renderers/__tests__/binary-too-large.test.tsx +56 -0
package/src/ui/response-renderers/__tests__/binary.test.tsx +96 -0
package/src/ui/response-renderers/__tests__/dispatch.test.ts +124 -0
package/src/ui/response-renderers/__tests__/html.test.tsx +101 -0
package/src/ui/response-renderers/__tests__/image.test.tsx +73 -0
package/src/ui/response-renderers/__tests__/json.test.tsx +95 -0
package/src/ui/response-renderers/__tests__/svg.test.tsx +46 -0
package/src/ui/response-renderers/__tests__/xml.test.tsx +100 -0
package/src/ui/response-renderers/binary-too-large.tsx +36 -0
package/src/ui/response-renderers/binary.tsx +31 -0
package/src/ui/response-renderers/empty.tsx +14 -0
package/src/ui/response-renderers/html.tsx +36 -0
package/src/ui/response-renderers/image.tsx +37 -0
package/src/ui/response-renderers/index.ts +55 -0
package/src/ui/response-renderers/json.tsx +40 -0
package/src/ui/response-renderers/svg.tsx +27 -0
package/src/ui/response-renderers/text-fallback.tsx +14 -0
package/src/ui/response-renderers/types.ts +38 -0
package/src/ui/response-renderers/unknown.tsx +18 -0
package/src/ui/response-renderers/xml.tsx +46 -0
package/src/ui/state/derived.ts +12 -0
package/src/ui/state/model.ts +6 -1
package/src/ui/state/store.ts +39 -2
package/src/ui/tabs/InitiatorTab.tsx +230 -0
package/src/ui/tabs/ResponseTab.tsx +80 -97
package/src/ui/tabs/__tests__/ResponseTab.test.tsx +102 -0
package/src/ui/utils/__tests__/download.test.ts +115 -0
package/src/ui/utils/__tests__/hex.test.ts +84 -0
package/src/ui/utils/__tests__/symbolication.test.ts +207 -0
package/src/ui/utils/download.ts +154 -0
package/src/ui/utils/hex.ts +59 -0
package/src/ui/utils/initiator.ts +136 -0
package/src/ui/utils/symbolication.ts +248 -0
package/src/ui/views/InspectorView.tsx +8 -5
package/src/utils/__tests__/getContentTypeMimeType.test.ts +34 -0
package/src/utils/getContentTypeMimeType.ts +14 -0
package/vite.config.ts +5 -1
package/vitest.setup.ts +31 -0

package/src/ui/response-renderers/__tests__/html.test.tsx ADDED Viewed

@@ -0,0 +1,101 @@
+// @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 { htmlRenderer } from '../html';
+import type { RenderCtx } from '../types';
+const baseCtx: RenderCtx = {
+  contentType: 'text/html',
+  url: 'https://example.com/page.html',
+};
+const HTML_BODY = '<!DOCTYPE html><html><body><h1>Hello</h1></body></html>';
+const renderHtml = (view: 'preview' | 'raw', body = HTML_BODY) =>
+  render(htmlRenderer.render({ view, body, ctx: baseCtx }) as ReactElement);
+const getIframe = (container: HTMLElement): HTMLIFrameElement => {
+  const iframe = container.querySelector('iframe');
+  if (!iframe) throw new Error('expected an <iframe> in the rendered output');
+  return iframe;
+};
+describe('htmlRenderer', () => {
+  it('declares both preview and raw views with preview as default', () => {
+    expect(htmlRenderer.views).toEqual(['preview', 'raw']);
+    expect(htmlRenderer.defaultView).toBe('preview');
+  });
+  it('supports override (HTML bodies are strings — the editor works on them)', () => {
+    expect(htmlRenderer.supportsOverride).toBe(true);
+  });
+  describe('preview view', () => {
+    it('renders a sandboxed iframe', () => {
+      const { container } = renderHtml('preview');
+      const iframe = getIframe(container);
+      // `sandbox=""` (empty value = all restrictions applied) is the
+      // primary defense. Loosening this would let scripts run in the
+      // captured response — never do it.
+      expect(iframe.getAttribute('sandbox')).toBe('');
+    });
+    it('prepends the CSP meta tag to the srcdoc before the body', () => {
+      const { container } = renderHtml('preview');
+      const srcdoc = getIframe(container).getAttribute('srcdoc') ?? '';
+      expect(
+        srcdoc.startsWith('<meta http-equiv="Content-Security-Policy"'),
+      ).toBe(true);
+      expect(srcdoc).toContain("default-src 'none'");
+      expect(srcdoc).toContain("style-src 'unsafe-inline'");
+      expect(srcdoc).toContain('img-src data:');
+      expect(srcdoc.endsWith(HTML_BODY)).toBe(true);
+    });
+    it('preserves the body verbatim — no stripping, no escaping', () => {
+      const body = '<p>1 &lt; 2</p><!-- comment --><span attr="x">y</span>';
+      const { container } = renderHtml('preview', body);
+      const srcdoc = getIframe(container).getAttribute('srcdoc') ?? '';
+      expect(srcdoc).toContain(body);
+    });
+  });
+  describe('raw view', () => {
+    it('renders the HTML source as text and does not render an iframe', () => {
+      const { container } = renderHtml('raw');
+      expect(container.querySelector('iframe')).toBeNull();
+      expect(screen.getByText(HTML_BODY)).toBeInTheDocument();
+    });
+  });
+  describe('xss attempt regression', () => {
+    // jsdom does not execute iframe srcdoc, so we can't assert "the
+    // script did not run." Instead we lock the *attributes* that prevent
+    // execution: `sandbox=""` stays empty, the CSP meta is present, and
+    // the script tag survives unmodified in srcdoc (we don't pre-strip —
+    // sandbox blocks execution at the iframe boundary). A future change
+    // that loosens `sandbox` or drops the CSP prefix will fail this test.
+    const XSS_BODY =
+      '<html><body><script>window.__xssFired = true; alert(1)</script><p>after</p></body></html>';
+    it('keeps sandbox empty even for HTML containing <script>', () => {
+      const { container } = renderHtml('preview', XSS_BODY);
+      expect(getIframe(container).getAttribute('sandbox')).toBe('');
+    });
+    it('keeps the CSP meta in srcdoc even for HTML containing <script>', () => {
+      const { container } = renderHtml('preview', XSS_BODY);
+      const srcdoc = getIframe(container).getAttribute('srcdoc') ?? '';
+      expect(srcdoc).toContain('Content-Security-Policy');
+    });
+    it('does not strip script tags from the body — sandbox is the boundary', () => {
+      const { container } = renderHtml('preview', XSS_BODY);
+      const srcdoc = getIframe(container).getAttribute('srcdoc') ?? '';
+      expect(srcdoc).toContain('<script>');
+      expect(srcdoc).toContain('window.__xssFired');
+    });
+  });
+});

package/src/ui/response-renderers/__tests__/image.test.tsx ADDED Viewed

@@ -0,0 +1,73 @@
+// @vitest-environment jsdom
+import type { ReactElement } from 'react';
+import { describe, expect, it, vi, beforeEach } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/vitest';
+import { imageRenderer } from '../image';
+import type { RenderCtx } from '../types';
+const ctx: RenderCtx = {
+  contentType: 'image/png',
+  url: 'https://example.com/cat.png',
+};
+const renderImage = (
+  view: 'preview' | 'raw',
+  base64 = 'AQID',
+  override: Partial<RenderCtx> = {},
+) =>
+  render(
+    imageRenderer.render({
+      view,
+      body: { kind: 'binary', base64 },
+      ctx: { ...ctx, ...override },
+    }) as ReactElement,
+  );
+describe('imageRenderer', () => {
+  beforeEach(() => {
+    Object.defineProperty(URL, 'createObjectURL', {
+      configurable: true,
+      writable: true,
+      value: vi.fn(() => 'blob:fake-url'),
+    });
+    Object.defineProperty(URL, 'revokeObjectURL', {
+      configurable: true,
+      writable: true,
+      value: vi.fn(),
+    });
+  });
+  it('declares both preview and raw views with preview as default', () => {
+    expect(imageRenderer.views).toEqual(['preview', 'raw']);
+    expect(imageRenderer.defaultView).toBe('preview');
+  });
+  it('does not support override (binary bodies cannot round-trip through the override editor)', () => {
+    expect(imageRenderer.supportsOverride).toBe(false);
+  });
+  it('renders an <img> with the correct base64 data URL in preview', () => {
+    renderImage('preview', 'iVBORw0K');
+    const img = screen.getByRole('img');
+    expect(img).toHaveAttribute('src', 'data:image/png;base64,iVBORw0K');
+  });
+  it('uses the ctx content-type in the data URL prefix, not a hard-coded one', () => {
+    renderImage('preview', 'AQID', { contentType: 'image/jpeg' });
+    const img = screen.getByRole('img');
+    expect(img).toHaveAttribute('src', 'data:image/jpeg;base64,AQID');
+  });
+  it('renders metadata card + hex view (no <img>) in raw view', () => {
+    renderImage('raw', 'AQID');
+    expect(screen.queryByRole('img')).toBeNull();
+    // Metadata card: size + filename derived from URL.
+    expect(screen.getByText('Size')).toBeInTheDocument();
+    expect(screen.getByText('3 bytes')).toBeInTheDocument();
+    expect(screen.getByText('cat.png')).toBeInTheDocument();
+    // HexView surfaces the bytes.
+    expect(screen.getByText('00000000')).toBeInTheDocument();
+    expect(screen.getByText('01 02 03')).toBeInTheDocument();
+  });
+});

package/src/ui/response-renderers/__tests__/json.test.tsx ADDED Viewed

@@ -0,0 +1,95 @@
+// @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 { jsonRenderer } from '../json';
+import type { RenderCtx } from '../types';
+const baseCtx: RenderCtx = {
+  contentType: 'application/json',
+  url: 'https://example.com/data.json',
+};
+const renderJson = (view: 'preview' | 'raw', body: string) =>
+  render(jsonRenderer.render({ view, body, ctx: baseCtx }) as ReactElement);
+const MINIFIED = '{"name":"alice","tags":["a","b"],"meta":{"id":42}}';
+describe('jsonRenderer', () => {
+  it('declares both preview and raw views with preview as default', () => {
+    expect(jsonRenderer.views).toEqual(['preview', 'raw']);
+    expect(jsonRenderer.defaultView).toBe('preview');
+  });
+  it('supports override (JSON bodies are strings)', () => {
+    expect(jsonRenderer.supportsOverride).toBe(true);
+  });
+  describe('preview view', () => {
+    it('renders the parsed JSON as a tree with keys and values visible', () => {
+      renderJson('preview', MINIFIED);
+      // react-json-tree renders the keys; we just need to confirm
+      // some tree-shaped content is present, not the raw source.
+      expect(screen.queryByText(MINIFIED)).toBeNull();
+      // The values appear somewhere in the tree.
+      expect(screen.getAllByText(/alice/).length).toBeGreaterThan(0);
+    });
+  });
+  describe('raw view', () => {
+    it('renders the JSON pretty-printed with 2-space indent, not the literal body', () => {
+      const { container } = render(
+        jsonRenderer.render({
+          view: 'raw',
+          body: MINIFIED,
+          ctx: baseCtx,
+        }) as ReactElement,
+      );
+      const text = container.textContent ?? '';
+      // The literal minified source should NOT appear verbatim — the
+      // raw view re-serializes with indentation.
+      expect(text).not.toContain(MINIFIED);
+      // The re-serialized output must be multi-line (proves indent
+      // happened) and must contain 2-space indented keys.
+      expect(text).toMatch(/\n/);
+      expect(text).toMatch(/^ {2}"name"/m);
+      // Sanity: round-tripping back through JSON.parse yields the
+      // same logical value.
+      expect(JSON.parse(text)).toEqual(JSON.parse(MINIFIED));
+    });
+    it('uses exactly 2 spaces per indent level', () => {
+      const { container } = render(
+        jsonRenderer.render({
+          view: 'raw',
+          body: '{"a":{"b":1}}',
+          ctx: baseCtx,
+        }) as ReactElement,
+      );
+      const text = container.textContent ?? '';
+      // Nested key 'b' should be indented 4 spaces (two levels × 2).
+      expect(text).toMatch(/^ {4}"b"/m);
+    });
+  });
+  describe('malformed JSON', () => {
+    it('falls back to source + warning in preview view', () => {
+      const MALFORMED = '{ not valid json ]';
+      renderJson('preview', MALFORMED);
+      expect(screen.getByText(MALFORMED)).toBeInTheDocument();
+      expect(
+        screen.getByText(/Failed to parse as JSON, showing as raw text/),
+      ).toBeInTheDocument();
+    });
+    it('falls back to source + warning in raw view too (ignores active view)', () => {
+      const MALFORMED = '{ not valid json ]';
+      renderJson('raw', MALFORMED);
+      expect(screen.getByText(MALFORMED)).toBeInTheDocument();
+      expect(
+        screen.getByText(/Failed to parse as JSON, showing as raw text/),
+      ).toBeInTheDocument();
+    });
+  });
+});

package/src/ui/response-renderers/__tests__/svg.test.tsx ADDED Viewed

@@ -0,0 +1,46 @@
+// @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 { svgRenderer } from '../svg';
+import type { RenderCtx } from '../types';
+const ctx: RenderCtx = {
+  contentType: 'image/svg+xml',
+  url: 'https://example.com/icon.svg',
+};
+const SVG_SOURCE =
+  '<svg xmlns="http://www.w3.org/2000/svg"><circle r="5"/></svg>';
+const renderSvg = (view: 'preview' | 'raw', body = SVG_SOURCE) =>
+  render(svgRenderer.render({ view, body, ctx }) as ReactElement);
+describe('svgRenderer', () => {
+  it('declares both preview and raw views with preview as default', () => {
+    expect(svgRenderer.views).toEqual(['preview', 'raw']);
+    expect(svgRenderer.defaultView).toBe('preview');
+  });
+  it('does not support override (keeps parity with binary image semantics)', () => {
+    expect(svgRenderer.supportsOverride).toBe(false);
+  });
+  it('renders an <img> with a utf8 data URL in preview — never base64', () => {
+    renderSvg('preview');
+    const img = screen.getByRole('img');
+    const src = img.getAttribute('src') ?? '';
+    expect(src.startsWith('data:image/svg+xml;utf8,')).toBe(true);
+    // The encoded payload must round-trip back to the original source —
+    // proves we URL-encoded the SVG text rather than dropping it.
+    const encoded = src.slice('data:image/svg+xml;utf8,'.length);
+    expect(decodeURIComponent(encoded)).toBe(SVG_SOURCE);
+  });
+  it('renders the SVG source verbatim (not base64) in raw view', () => {
+    renderSvg('raw');
+    expect(screen.queryByRole('img')).toBeNull();
+    expect(screen.getByText(SVG_SOURCE)).toBeInTheDocument();
+  });
+});

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

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

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