@rozenite/network-activity-plugin 1.9.0 → 1.10.0

package/src/ui/tabs/ResponseTab.tsx

@@ -1,52 +1,44 @@
 import { useEffect, useRef, useState } from 'react';
 import { ScrollArea } from '../components/ScrollArea';
-import { JsonTree } from '../components/JsonTree';
 import { HttpNetworkEntry } from '../state/model';
 import { Section } from '../components/Section';
 import { KeyValueGrid } from '../components/KeyValueGrid';
-import { CodeBlock } from '../components/CodeBlock';
 import { useOverrides } from '../state/hooks';
 import { RequestOverride } from '../../shared/client';
 import { OverrideResponse } from '../components/OverrideResponse';
 import { Button } from '../components/Button';
 import { Pencil } from 'lucide-react';
-import { isJsonContentType } from '../../utils/getContentTypeMimeType';
+import { ViewToggle } from '../components/ViewToggle';
+import {
+  findRenderer,
+  type RenderCtx,
+  type ResponseView,
+} from '../response-renderers';
 
 export type ResponseTabProps = {
   selectedRequest: HttpNetworkEntry;
   supportsOverrides?: boolean;
+  // Sticky Preview/Raw preference is owned by the parent (SidePanel)
+  // so it survives the `<Tabs key={selectedRequest.id}>` remount that
+  // happens on every request switch. Renderers without the requested
+  // view fall back to their own `defaultView`.
+  preferredView: ResponseView;
+  onPreferredViewChange: (view: ResponseView) => void;
   onRequestResponseBody: (requestId: string) => void;
 };
 
-type ResponseBodySectionProps = {
-  action?: React.ReactNode;
-  children: React.ReactNode;
-};
-
-const RenderResponseBodySection = ({
-  children,
-  action,
-}: ResponseBodySectionProps) => {
-  return (
-    <Section title="Response Body" collapsible={false} action={action}>
-      <div className="space-y-4">{children}</div>
-    </Section>
-  );
-};
-
 export const ResponseTab = ({
   selectedRequest,
   supportsOverrides = true,
+  preferredView,
+  onPreferredViewChange,
   onRequestResponseBody,
 }: ResponseTabProps) => {
   const onRequestResponseBodyRef = useRef(onRequestResponseBody);
   const overrides = useOverrides();
   const [initialOverride, setInitialOverride] = useState<
     RequestOverride | undefined
-  >(() => {
-    const override = overrides.get(selectedRequest.request.url);
-    return override;
-  });
+  >(() => overrides.get(selectedRequest.request.url));
 
   useEffect(() => {
     onRequestResponseBodyRef.current = onRequestResponseBody;
@@ -61,7 +53,7 @@ export const ResponseTab = ({
   const responseBody = selectedRequest.response?.body;
 
   const renderResponseBody = () => {
-    if (!responseBody || responseBody.data === null) {
+    if (!responseBody) {
       return (
         <div className="text-sm text-gray-400">
           No response body available for this request
@@ -70,97 +62,88 @@ export const ResponseTab = ({
     }
 
     const { type, data } = responseBody;
-    const statusCode = selectedRequest.response?.status;
-
-    const contentTypeGrid = (
-      <KeyValueGrid
-        items={[
-          {
-            key: 'Content-Type',
-            value: type,
-            valueClassName: 'text-blue-400',
-          },
-        ]}
-      />
-    );
+    const renderer = findRenderer(type, data);
+    const activeView = renderer.views.includes(preferredView)
+      ? preferredView
+      : renderer.defaultView;
+    const ctx: RenderCtx = {
+      contentType: type,
+      url: selectedRequest.request.url,
+      headers: selectedRequest.response?.headers,
+      size: selectedRequest.response?.size,
+    };
+
+    // Override engaged: replace the whole panel with the override editor.
+    // Only reachable for renderers that support override AND when the
+    // user has clicked into the override flow.
+    if (
+      supportsOverrides &&
+      renderer.supportsOverride &&
+      initialOverride !== undefined
+    ) {
+      return (
+        <OverrideResponse
+          selectedRequest={selectedRequest}
+          initialOverride={initialOverride}
+          onClear={() => setInitialOverride(undefined)}
+        />
+      );
+    }
 
-    const overrideAction = supportsOverrides ? (
+    const canOverride =
+      renderer.supportsOverride &&
+      supportsOverrides &&
+      typeof data === 'string';
+    const overrideAction = canOverride ? (
       <Button
         variant="ghost"
         size="xs"
         className="text-violet-300 hover:text-violet-300"
-        onClick={() =>
+        onClick={(e) => {
+          e.stopPropagation();
           setInitialOverride({
             body: data,
-            status: statusCode,
-          })
-        }
+            status: selectedRequest.response?.status,
+          });
+        }}
       >
         <Pencil className="h-2 w-2" />
         Override
       </Button>
     ) : null;
 
-    if (supportsOverrides && initialOverride !== undefined) {
-      return (
-        <OverrideResponse
-          selectedRequest={selectedRequest}
-          initialOverride={initialOverride}
-          onClear={() => setInitialOverride(undefined)}
+    const toggle =
+      renderer.views.length > 1 ? (
+        <ViewToggle
+          views={renderer.views}
+          value={activeView}
+          onChange={onPreferredViewChange}
         />
-      );
-    }
+      ) : null;
 
-    if (isJsonContentType(type)) {
-      let bodyContent;
-
-      try {
-        const jsonData = JSON.parse(data);
-
-        bodyContent = (
-          <CodeBlock>
-            <JsonTree data={jsonData} />
-          </CodeBlock>
-        );
-      } catch {
-        bodyContent = (
-          <>
-            <CodeBlock>{data}</CodeBlock>
-            <div className="text-xs text-gray-500 mt-1">
-              ⚠️ Failed to parse as JSON, showing as raw text
-            </div>
-          </>
-        );
-      }
-
-      return (
-        <RenderResponseBodySection action={overrideAction}>
-          {contentTypeGrid}
-          {bodyContent}
-        </RenderResponseBodySection>
-      );
-    }
-
-    if (
-      type.startsWith('text/') ||
-      type.startsWith('application/xml') ||
-      type.startsWith('application/javascript')
-    ) {
-      return (
-        <RenderResponseBodySection action={overrideAction}>
-          {contentTypeGrid}
-          <CodeBlock>{data}</CodeBlock>
-        </RenderResponseBodySection>
-      );
-    }
+    const sectionAction =
+      toggle || overrideAction ? (
+        <div className="flex items-center gap-1">
+          {toggle}
+          {overrideAction}
+        </div>
+      ) : null;
 
     return (
-      <RenderResponseBodySection>
-        {contentTypeGrid}
-        <div className="text-sm text-gray-400">
-          Binary content not shown - {data.length} bytes
+      <Section title="Response Body" collapsible={false} action={sectionAction}>
+        <div className="space-y-4">
+          <KeyValueGrid
+            items={[
+              {
+                key: 'Content-Type',
+                value: type,
+                valueClassName: 'text-blue-400',
+              },
+            ]}
+          />
+          {renderer.render({ view: activeView, body: data, ctx })}
         </div>
-      </RenderResponseBodySection>
+      </Section>
     );
   };
 

package/src/ui/tabs/__tests__/ResponseTab.test.tsx

@@ -0,0 +1,102 @@
+// @vitest-environment jsdom
+import { useState } from 'react';
+import { describe, expect, it } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom/vitest';
+import { ResponseTab } from '../ResponseTab';
+import type { HttpNetworkEntry } from '../../state/model';
+import type { ResponseView } from '../../response-renderers';
+
+const makeSvgEntry = (id: string, source: string): HttpNetworkEntry => ({
+  id,
+  type: 'http',
+  timestamp: 0,
+  status: 'finished',
+  request: {
+    url: `https://example.com/${id}.svg`,
+    method: 'GET',
+    headers: {},
+  },
+  response: {
+    url: `https://example.com/${id}.svg`,
+    status: 200,
+    statusText: 'OK',
+    headers: {},
+    contentType: 'image/svg+xml',
+    size: source.length,
+    responseTime: 0,
+    body: { type: 'image/svg+xml', data: source },
+  },
+});
+
+// Mirrors the SidePanel structure that surfaced the original bug:
+// `preferredView` lives in the parent; an outer wrapper is keyed on
+// `selectedRequest.id` to match `SidePanel.tsx`'s
+// `<Tabs key={selectedRequest.id}>` semantics (the wrapper forces a
+// remount of ResponseTab on every request switch, which is intentional
+// for other reasons — see SidePanel comments).
+const StickyPreferenceHarness = ({
+  initialRequest,
+  nextRequest,
+}: {
+  initialRequest: HttpNetworkEntry;
+  nextRequest: HttpNetworkEntry;
+}) => {
+  const [request, setRequest] = useState<HttpNetworkEntry>(initialRequest);
+  const [preferredView, setPreferredView] = useState<ResponseView>('preview');
+  return (
+    <>
+      <button onClick={() => setRequest(nextRequest)}>switch-request</button>
+      <div key={request.id}>
+        <ResponseTab
+          selectedRequest={request}
+          preferredView={preferredView}
+          onPreferredViewChange={setPreferredView}
+          onRequestResponseBody={() => {}}
+        />
+      </div>
+    </>
+  );
+};
+
+describe('ResponseTab — sticky Preview/Raw preference', () => {
+  it('persists the toggle across a keyed remount triggered by a request switch', () => {
+    const first = makeSvgEntry('first', '<svg id="first"/>');
+    const second = makeSvgEntry('second', '<svg id="second"/>');
+
+    render(
+      <StickyPreferenceHarness initialRequest={first} nextRequest={second} />,
+    );
+
+    // Preview is the default view for the SVG renderer — an inline <img>
+    // is rendered, no <pre> source view yet.
+    expect(screen.getByRole('img')).toBeInTheDocument();
+
+    // Flip to Raw via the ViewToggle.
+    fireEvent.click(screen.getByRole('tab', { name: 'Raw' }));
+    expect(screen.queryByRole('img')).toBeNull();
+    expect(screen.getByText('<svg id="first"/>')).toBeInTheDocument();
+    expect(screen.getByRole('tab', { name: 'Raw' })).toHaveAttribute(
+      'aria-selected',
+      'true',
+    );
+
+    // Switch to a different request. The wrapper's `key` changes, so the
+    // ResponseTab subtree is unmounted and a fresh instance mounts —
+    // exactly the situation that caused the original sticky-preference
+    // bug when state lived inside ResponseTab.
+    fireEvent.click(screen.getByRole('button', { name: 'switch-request' }));
+
+    // The new request's body should be visible (proves the remount
+    // happened and we are now rendering the second entry).
+    expect(screen.getByText('<svg id="second"/>')).toBeInTheDocument();
+    // And — the regression guard — the toggle should still be on Raw,
+    // not reset to the renderer's Preview default. The lifted state in
+    // the parent harness survived the keyed remount.
+    expect(screen.queryByRole('img')).toBeNull();
+    expect(screen.getByRole('tab', { name: 'Raw' })).toHaveAttribute(
+      'aria-selected',
+      'true',
+    );
+  });
+});

package/src/ui/utils/__tests__/download.test.ts

@@ -0,0 +1,115 @@
+// @vitest-environment jsdom
+import { describe, expect, it } from 'vitest';
+import {
+  base64ToBlob,
+  base64ToBytes,
+  deriveFilename,
+  readHeader,
+} from '../download';
+
+describe('base64ToBytes', () => {
+  it('decodes "AQID" to the 3-byte sequence [1, 2, 3]', () => {
+    expect(Array.from(base64ToBytes('AQID'))).toEqual([1, 2, 3]);
+  });
+
+  it('returns an empty array for the empty string', () => {
+    expect(base64ToBytes('').byteLength).toBe(0);
+  });
+});
+
+describe('base64ToBlob', () => {
+  it('produces a Blob with the right content-type and byte length', () => {
+    const blob = base64ToBlob('AQID', 'image/png');
+    expect(blob.type).toBe('image/png');
+    expect(blob.size).toBe(3);
+  });
+
+  it('falls back to application/octet-stream when no content-type is given', () => {
+    const blob = base64ToBlob('AQID', '');
+    expect(blob.type).toBe('application/octet-stream');
+  });
+});
+
+describe('readHeader', () => {
+  it('returns the value for a case-insensitive lookup', () => {
+    expect(readHeader({ 'Content-Length': '42' }, 'content-length')).toBe('42');
+    expect(readHeader({ 'content-type': 'text/html' }, 'Content-Type')).toBe(
+      'text/html',
+    );
+  });
+
+  it('returns the first value when the header carries an array', () => {
+    expect(readHeader({ 'Set-Cookie': ['a=1', 'b=2'] }, 'Set-Cookie')).toBe(
+      'a=1',
+    );
+  });
+
+  it('returns undefined for missing headers or missing headers map', () => {
+    expect(readHeader(undefined, 'Content-Type')).toBeUndefined();
+    expect(readHeader({}, 'Content-Type')).toBeUndefined();
+  });
+});
+
+describe('deriveFilename', () => {
+  it('prefers Content-Disposition filename when present', () => {
+    expect(
+      deriveFilename({
+        headers: {
+          'Content-Disposition': 'attachment; filename="report.pdf"',
+        },
+        url: 'https://example.com/api/download?id=42',
+        contentType: 'application/pdf',
+      }),
+    ).toBe('report.pdf');
+  });
+
+  it('prefers RFC 5987 filename* when both forms are present', () => {
+    expect(
+      deriveFilename({
+        headers: {
+          'Content-Disposition':
+            'attachment; filename="fallback.bin"; filename*=UTF-8\'\'spaced%20name.bin',
+        },
+        url: 'https://example.com/api/x',
+        contentType: 'application/octet-stream',
+      }),
+    ).toBe('spaced name.bin');
+  });
+
+  it('falls back to the URL last path segment when no Content-Disposition', () => {
+    expect(
+      deriveFilename({
+        url: 'https://cdn.example.com/files/sub/document.pdf?ver=2',
+        contentType: 'application/pdf',
+      }),
+    ).toBe('document.pdf');
+  });
+
+  it('uses the .bin fallback for unrecognised content-types when nothing else matches', () => {
+    // No headers, opaque URL (no usable path segments), unknown content-type.
+    expect(
+      deriveFilename({
+        url: 'https://api.example.com/',
+        contentType: 'application/x-protobuf',
+      }),
+    ).toBe('response.bin');
+  });
+
+  it('uses a known extension from the content-type map when no name elsewhere', () => {
+    expect(
+      deriveFilename({
+        url: 'https://api.example.com/',
+        contentType: 'image/png',
+      }),
+    ).toBe('response.png');
+  });
+
+  it('strips parameters off the content-type before lookup', () => {
+    expect(
+      deriveFilename({
+        url: 'https://api.example.com/',
+        contentType: 'application/json; charset=utf-8',
+      }),
+    ).toBe('response.json');
+  });
+});

package/src/ui/utils/__tests__/hex.test.ts

@@ -0,0 +1,84 @@
+import { describe, expect, it } from 'vitest';
+import {
+  BYTES_PER_HEX_ROW,
+  formatHexRow,
+  rowCountForByteLength,
+  toAsciiChar,
+  toHexPair,
+} from '../hex';
+
+describe('toHexPair', () => {
+  it('uppercases and zero-pads to two characters', () => {
+    expect(toHexPair(0)).toBe('00');
+    expect(toHexPair(0x0a)).toBe('0A');
+    expect(toHexPair(0xff)).toBe('FF');
+  });
+});
+
+describe('toAsciiChar', () => {
+  it('renders printable ASCII characters verbatim', () => {
+    expect(toAsciiChar(0x20)).toBe(' ');
+    expect(toAsciiChar(0x41)).toBe('A');
+    expect(toAsciiChar(0x7e)).toBe('~');
+  });
+
+  it('renders non-printable bytes as a dot', () => {
+    expect(toAsciiChar(0x00)).toBe('.');
+    expect(toAsciiChar(0x1f)).toBe('.');
+    expect(toAsciiChar(0x7f)).toBe('.');
+    expect(toAsciiChar(0xff)).toBe('.');
+  });
+});
+
+describe('formatHexRow', () => {
+  it('formats a full row with the post-byte-8 double-space gap', () => {
+    const bytes = new Uint8Array([
+      0x48, 0x65, 0x6c, 0x6c, 0x6f, 0x20, 0x77, 0x6f, 0x72, 0x6c, 0x64, 0x21,
+      0x0a, 0x0d, 0x09, 0xff,
+    ]);
+    const row = formatHexRow(bytes, 0);
+    expect(row.offset).toBe('00000000');
+    expect(row.hex).toBe('48 65 6C 6C 6F 20 77 6F  72 6C 64 21 0A 0D 09 FF');
+    // "Hello wo" + "rld!" + non-printables.
+    expect(row.ascii).toBe('Hello world!....');
+  });
+
+  it('formats a short trailing row without padding the hex column', () => {
+    const bytes = new Uint8Array([0x68, 0x65, 0x6c]);
+    const row = formatHexRow(bytes, 0);
+    expect(row.offset).toBe('00000000');
+    expect(row.hex).toBe('68 65 6C');
+    expect(row.ascii).toBe('hel');
+  });
+
+  it('respects the rowStart offset in the rendered offset column', () => {
+    const bytes = new Uint8Array(48);
+    const row = formatHexRow(bytes, 32);
+    expect(row.offset).toBe('00000020');
+  });
+
+  it('preserves the half-row gap on a row that has at least one byte in the right group', () => {
+    const bytes = new Uint8Array(BYTES_PER_HEX_ROW);
+    bytes[BYTES_PER_HEX_ROW - 1] = 0xab;
+    const row = formatHexRow(bytes, 0);
+    // 8 zero pairs + double-space + 7 zero pairs + AB
+    expect(row.hex.split('  ')).toHaveLength(2);
+    expect(row.hex.endsWith('AB')).toBe(true);
+  });
+});
+
+describe('rowCountForByteLength', () => {
+  it('returns 0 for an empty buffer', () => {
+    expect(rowCountForByteLength(0)).toBe(0);
+  });
+
+  it('returns 1 for any non-empty buffer up to BYTES_PER_HEX_ROW', () => {
+    expect(rowCountForByteLength(1)).toBe(1);
+    expect(rowCountForByteLength(BYTES_PER_HEX_ROW)).toBe(1);
+  });
+
+  it('rounds up partial rows', () => {
+    expect(rowCountForByteLength(BYTES_PER_HEX_ROW + 1)).toBe(2);
+    expect(rowCountForByteLength(BYTES_PER_HEX_ROW * 2 + 5)).toBe(3);
+  });
+});