@rozenite/network-activity-plugin 1.9.0 → 1.11.0

package/src/ui/hooks/useNetworkActivitySessionExport.ts

@@ -0,0 +1,39 @@
+import { useCallback } from 'react';
+import { useNetworkActivityStore } from '../state/hooks';
+import { store } from '../state/store';
+import { downloadJson } from '../utils/download';
+import {
+  createNetworkActivitySessionExport,
+  getNetworkActivitySessionExportFileName,
+} from '../utils/sessionExport';
+
+export const useNetworkActivitySessionExport = () => {
+  const canExportSession = useNetworkActivityStore(
+    (state) => state.networkEntries.size > 0,
+  );
+
+  const exportSession = useCallback(() => {
+    const { networkEntries, websocketMessages } = store.getState();
+
+    if (networkEntries.size === 0) {
+      return;
+    }
+
+    const exportedAt = new Date();
+    const exportData = createNetworkActivitySessionExport(
+      networkEntries,
+      websocketMessages,
+      exportedAt,
+    );
+
+    downloadJson(
+      exportData,
+      getNetworkActivitySessionExportFileName(exportedAt),
+    );
+  }, []);
+
+  return {
+    canExportSession,
+    exportSession,
+  };
+};

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

@@ -0,0 +1,56 @@
+// @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 { binaryTooLargeRenderer } from '../binary-too-large';
+
+const ctx = {
+  contentType: 'image/jpeg',
+  url: 'https://example.com/huge.jpg',
+};
+
+describe('binaryTooLargeRenderer', () => {
+  it('declares only the raw view — no toggle should appear', () => {
+    expect(binaryTooLargeRenderer.views).toEqual(['raw']);
+  });
+
+  it('does not support override', () => {
+    expect(binaryTooLargeRenderer.supportsOverride).toBe(false);
+  });
+
+  it('formats sub-1MB sizes in KB', () => {
+    render(
+      binaryTooLargeRenderer.render({
+        view: 'raw',
+        body: { kind: 'binary-too-large', size: 800 * 1024 },
+        ctx,
+      }) as ReactElement,
+    );
+    expect(screen.getByText(/800\.0 KB/)).toBeInTheDocument();
+  });
+
+  it('formats multi-megabyte sizes in MB', () => {
+    render(
+      binaryTooLargeRenderer.render({
+        view: 'raw',
+        body: { kind: 'binary-too-large', size: 12_500_000 },
+        ctx,
+      }) as ReactElement,
+    );
+    expect(screen.getByText(/11\.9 MB/)).toBeInTheDocument();
+  });
+
+  it('surfaces the size inside the "Response too large for preview" message', () => {
+    render(
+      binaryTooLargeRenderer.render({
+        view: 'raw',
+        body: { kind: 'binary-too-large', size: 6_000_000 },
+        ctx,
+      }) as ReactElement,
+    );
+    expect(
+      screen.getByText(/Response too large for preview/),
+    ).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,96 @@
+// @vitest-environment jsdom
+import type { ReactElement } from 'react';
+import { describe, expect, it, vi, beforeEach } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { binaryRenderer } from '../binary';
+import type { RenderCtx } from '../types';
+
+const ctx: RenderCtx = {
+  contentType: 'application/pdf',
+  url: 'https://example.com/files/report.pdf',
+};
+
+const renderBinary = (base64 = 'AQID', override: Partial<RenderCtx> = {}) =>
+  render(
+    binaryRenderer.render({
+      view: 'raw',
+      body: { kind: 'binary', base64 },
+      ctx: { ...ctx, ...override },
+    }) as ReactElement,
+  );
+
+describe('binaryRenderer', () => {
+  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 only a raw view — no toggle should appear', () => {
+    expect(binaryRenderer.views).toEqual(['raw']);
+    expect(binaryRenderer.defaultView).toBe('raw');
+  });
+
+  it('does not support override', () => {
+    expect(binaryRenderer.supportsOverride).toBe(false);
+  });
+
+  it('matches binary bodies whose content-type is not an image', () => {
+    expect(
+      binaryRenderer.matches('application/pdf', {
+        kind: 'binary',
+        base64: 'AQID',
+      }),
+    ).toBe(true);
+    expect(
+      binaryRenderer.matches('application/octet-stream', {
+        kind: 'binary',
+        base64: 'AQID',
+      }),
+    ).toBe(true);
+    expect(
+      binaryRenderer.matches('audio/mpeg', {
+        kind: 'binary',
+        base64: 'AQID',
+      }),
+    ).toBe(true);
+  });
+
+  it('declines image binary bodies (those belong to imageRenderer)', () => {
+    expect(
+      binaryRenderer.matches('image/png', {
+        kind: 'binary',
+        base64: 'AQID',
+      }),
+    ).toBe(false);
+    expect(
+      binaryRenderer.matches('image/jpeg', {
+        kind: 'binary',
+        base64: 'AQID',
+      }),
+    ).toBe(false);
+  });
+
+  it('declines text bodies', () => {
+    expect(binaryRenderer.matches('text/plain', 'hello')).toBe(false);
+  });
+
+  it('renders the metadata card + hex view together', () => {
+    renderBinary('AQID');
+    // Metadata card: size + filename from URL.
+    expect(screen.getByText('Size')).toBeInTheDocument();
+    expect(screen.getByText('3 bytes')).toBeInTheDocument();
+    expect(screen.getByText('report.pdf')).toBeInTheDocument();
+    // Hex view: offset, hex pair, ASCII column.
+    expect(screen.getByText('00000000')).toBeInTheDocument();
+    expect(screen.getByText('01 02 03')).toBeInTheDocument();
+    expect(screen.getByText('|...|')).toBeInTheDocument();
+  });
+});

package/src/ui/response-renderers/__tests__/dispatch.test.ts

@@ -0,0 +1,124 @@
+import { describe, expect, it } from 'vitest';
+import { findRenderer, renderers } from '../index';
+import type { ResponseBody } from '../../../shared/client';
+
+describe('findRenderer', () => {
+  it('routes null body to the empty renderer', () => {
+    expect(findRenderer('text/plain', null).id).toBe('empty');
+  });
+
+  it('routes binary-too-large bodies to the binary-too-large renderer', () => {
+    const body: ResponseBody = { kind: 'binary-too-large', size: 9_999_999 };
+    expect(findRenderer('image/png', body).id).toBe('binary-too-large');
+  });
+
+  it('routes image/svg+xml strings to the svg renderer (not the image renderer)', () => {
+    expect(findRenderer('image/svg+xml', '<svg/>').id).toBe('svg');
+  });
+
+  it('routes image/png binary bodies to the image renderer', () => {
+    const body: ResponseBody = { kind: 'binary', base64: 'AQID' };
+    expect(findRenderer('image/png', body).id).toBe('image');
+  });
+
+  it('routes image/jpeg binary bodies to the image renderer', () => {
+    const body: ResponseBody = { kind: 'binary', base64: 'AQID' };
+    expect(findRenderer('image/jpeg', body).id).toBe('image');
+  });
+
+  it('routes non-image binary bodies to the binary renderer', () => {
+    const body: ResponseBody = { kind: 'binary', base64: 'AQID' };
+    expect(findRenderer('application/pdf', body).id).toBe('binary');
+    expect(findRenderer('application/octet-stream', body).id).toBe('binary');
+    expect(findRenderer('font/woff2', body).id).toBe('binary');
+    expect(findRenderer('audio/mpeg', body).id).toBe('binary');
+    expect(findRenderer('video/mp4', body).id).toBe('binary');
+    expect(findRenderer('application/zip', body).id).toBe('binary');
+  });
+
+  it('routes JSON content-types to the json renderer', () => {
+    expect(findRenderer('application/json', '{}').id).toBe('json');
+    expect(findRenderer('application/json; charset=utf-8', '{}').id).toBe(
+      'json',
+    );
+    expect(findRenderer('application/ld+json', '{}').id).toBe('json');
+  });
+
+  it('routes text/html (and its charset/case variants) to the html renderer', () => {
+    expect(findRenderer('text/html', '<p/>').id).toBe('html');
+    expect(findRenderer('text/html; charset=utf-8', '<p/>').id).toBe('html');
+    // Case-insensitive — proves we use normalizeContentType, not startsWith.
+    expect(findRenderer('text/HTML', '<p/>').id).toBe('html');
+    // Empty-string HTML body is still claimed by html (matcher is
+    // content-type-driven; the renderer happily produces a blank iframe).
+    expect(findRenderer('text/html', '').id).toBe('html');
+  });
+
+  it('routes XML content-types (and RFC 7303 +xml variants) to the xml renderer', () => {
+    expect(findRenderer('application/xml', '<x/>').id).toBe('xml');
+    expect(findRenderer('text/xml', '<x/>').id).toBe('xml');
+    expect(findRenderer('application/atom+xml', '<feed/>').id).toBe('xml');
+    expect(findRenderer('application/rss+xml', '<rss/>').id).toBe('xml');
+    expect(findRenderer('application/soap+xml; charset=utf-8', '<e/>').id).toBe(
+      'xml',
+    );
+    expect(findRenderer('application/xhtml+xml', '<html/>').id).toBe('xml');
+  });
+
+  it('keeps image/svg+xml routed to svg even though it would match the +xml suffix', () => {
+    // SVG matches isXmlContentType (it ends with +xml), but the registry
+    // order places svgRenderer earlier — first hit wins.
+    expect(findRenderer('image/svg+xml', '<svg/>').id).toBe('svg');
+  });
+
+  it('routes text/plain, application/javascript to the text fallback', () => {
+    expect(findRenderer('text/plain', 'hi').id).toBe('text-fallback');
+    expect(findRenderer('application/javascript', 'var a;').id).toBe(
+      'text-fallback',
+    );
+  });
+
+  it('routes string bodies with unknown content-types to the text fallback', () => {
+    expect(findRenderer('application/x-weird', 'hello').id).toBe(
+      'text-fallback',
+    );
+    expect(findRenderer('', 'hello').id).toBe('text-fallback');
+  });
+
+  it('falls through to the unknown renderer for unhandled non-null object bodies', () => {
+    // Build an off-union body shape to confirm the defensive last
+    // resort fires — should never happen in practice.
+    const offUnion = { kind: 'something-else' } as unknown as ResponseBody;
+    expect(findRenderer('application/octet-stream', offUnion).id).toBe(
+      'unknown',
+    );
+  });
+
+  it('places more specific matchers ahead of more general ones in the array', () => {
+    const ids = renderers.map((r) => r.id);
+    // svg must precede image; binary-too-large must precede image;
+    // image must precede binary (both claim body.kind === 'binary');
+    // empty must precede everything; unknown is the last entry.
+    expect(ids.indexOf('svg')).toBeLessThan(ids.indexOf('image'));
+    expect(ids.indexOf('binary-too-large')).toBeLessThan(ids.indexOf('image'));
+    expect(ids.indexOf('image')).toBeLessThan(ids.indexOf('binary'));
+    // html must precede text-fallback, otherwise text-fallback would
+    // claim every text/html body before html ever ran.
+    expect(ids.indexOf('html')).toBeLessThan(ids.indexOf('text-fallback'));
+    // svg must precede xml because image/svg+xml matches both
+    // predicates — registry order is the tiebreaker.
+    expect(ids.indexOf('svg')).toBeLessThan(ids.indexOf('xml'));
+    // xml must precede text-fallback, otherwise text-fallback would
+    // claim every XML-ish body before xml ever ran.
+    expect(ids.indexOf('xml')).toBeLessThan(ids.indexOf('text-fallback'));
+    expect(ids.indexOf('empty')).toBe(0);
+    expect(ids.indexOf('unknown')).toBe(ids.length - 1);
+  });
+
+  it('every renderer advertises a defaultView that appears in its views (or has empty views)', () => {
+    for (const renderer of renderers) {
+      if (renderer.views.length === 0) continue;
+      expect(renderer.views).toContain(renderer.defaultView);
+    }
+  });
+});

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

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

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

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

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