fix(web): reject a reshaped replay param, and forward a declared JSON body

Copilot's sixth pass generated no new inline comments; both suppressed ones
were right.

- `arguments` surviving the key check is not the same as being sent as
  written. `replayProtocolRequest` applies `arguments ?? {}`, so a `null` shown
  in the editor reaches the wire as `{}`; an array or scalar is not nullish and
  rides the cast into a call whose type says it is a named-argument record.
  `reshapedReplayParam` rejects both before Send. `name` and `uri` are
  deliberately not checked there — the dispatch already refuses those with a
  reason the caller shows as a toast, so they fail visibly rather than
  silently.

- `NetworkEntry` never forwarded the body's content type, so the Network tab
  could not reach the declared-JSON branch at all and a malformed
  `application/json` response read as plain text with no sign it was meant to
  be JSON. Forwarded — but only when the declared type *is* JSON: passing it
  wholesale would also route an HTML body into the sandboxed frame and a CSV
  one into a table, which is a change to what the Network tab is and not one
  this makes.

The `NetworkEntry > Auth Success` play function moved off `textContent` for
body assertions. Ace repaints its rows on an animation frame and virtualizes
them, so reading the DOM straight after Reveal returned the previous rows
under load — it passed in isolation and failed in the full run. It now reads
the editors' documents alongside the DOM text, and waits.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01UL9retfvAXRgvi6EWk4SY4
Signed-off-by: cliffhall <cliff@futurescale.com>

clients/web/src/components/groups/EditReplayModal/EditReplayModal.test.tsx

@@ -178,6 +178,25 @@ describe("EditReplayModal", () => {
     ).toBeInTheDocument();
   });
 
+  // Surviving the key check is not the same as being sent as written:
+  // `replayProtocolRequest` applies `arguments ?? {}`, so a null shown in the
+  // editor reaches the wire as `{}`.
+  it("disables Send for a null arguments, which would be sent as {}", async () => {
+    renderWithMantine(<EditReplayModal {...baseProps} method="tools/call" />);
+    await setAceText('{"name":"echo","arguments":null}');
+    expect(screen.getByRole("button", { name: "Send" })).toBeDisabled();
+    expect(screen.getByText(/sent as `\{\}` when null/)).toBeInTheDocument();
+  });
+
+  it("disables Send for a non-object arguments", async () => {
+    renderWithMantine(<EditReplayModal {...baseProps} method="tools/call" />);
+    await setAceText('{"name":"echo","arguments":[1,2]}');
+    expect(screen.getByRole("button", { name: "Send" })).toBeDisabled();
+    expect(
+      screen.getByText(/`arguments` must be a JSON object/),
+    ).toBeInTheDocument();
+  });
+
   it("closes without sending when cancelled", async () => {
     const user = userEvent.setup();
     const onSend = vi.fn();

clients/web/src/components/groups/EditReplayModal/EditReplayModal.tsx

@@ -2,7 +2,10 @@ import { useState } from "react";
 import { Alert, Button, Group, Modal, Stack, Text } from "@mantine/core";
 import { JsonEditor } from "../../elements/JsonEditor/JsonEditor";
 import { isJsonObject } from "../../../utils/jsonObjectDraft";
-import { replayableParams } from "../../../lib/protocolReplay";
+import {
+  replayableParams,
+  reshapedReplayParam,
+} from "../../../lib/protocolReplay";
 import { isSerializableJson } from "@inspector/core/json/jsonUtils.js";
 
 export interface EditReplayModalProps {
@@ -106,6 +109,12 @@ function parseParamsDraft(
       } so this matches what is sent`,
     };
   }
+  // Surviving the key check is not the same as being sent as written: see
+  // `reshapedReplayParam` for the two ways `arguments` does not.
+  const reshaped = reshapedReplayParam(method, parsed);
+  if (reshaped !== null) {
+    return { ok: false, error: reshaped };
+  }
   return { ok: true, value: parsed };
 }
 

clients/web/src/components/groups/NetworkEntry/NetworkEntry.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { expect, userEvent, within } from "storybook/test";
+import { expect, userEvent, waitFor, within } from "storybook/test";
 import type { FetchRequestEntry } from "../../../../../../core/mcp/types.js";
 import { NetworkEntry } from "./NetworkEntry";
 
@@ -104,6 +104,26 @@ export const TransportSuccessExpanded: Story = {
   args: { entry: transportEntry, isListExpanded: true },
 };
 
+/**
+ * Every rendered body, as text, however each one is rendered.
+ *
+ * A JSON body renders in Ace (#2151), which repaints its rows on an animation
+ * frame — so reading `canvasElement.textContent` straight after a state change
+ * can still return the previous rows, and does under load. It also virtualizes,
+ * so only what its viewport covers is in the DOM at all. Reading the editors'
+ * documents alongside the DOM text is immediate and complete; the DOM half is
+ * kept because a body that renders as plain text is not in any editor.
+ */
+function renderedBodyText(canvasElement: HTMLElement): string {
+  const editors = Array.from(canvasElement.querySelectorAll(".ace_editor")).map(
+    (node) =>
+      (
+        node as HTMLElement & { env?: { editor?: { getValue(): string } } }
+      ).env?.editor?.getValue() ?? "",
+  );
+  return [canvasElement.textContent ?? "", ...editors].join("\n");
+}
+
 export const AuthSuccess: Story = {
   args: { entry: authEntry, isListExpanded: true },
   play: async ({ canvasElement }) => {
@@ -113,10 +133,12 @@ export const AuthSuccess: Story = {
     // must not be visible until explicitly revealed.
     const hidden = canvas.getAllByText("Secrets hidden");
     await expect(hidden.length).toBeGreaterThanOrEqual(2);
-    await expect(canvasElement.textContent).not.toContain("eyJhbGciOiJSUzI1");
-    await expect(canvasElement.textContent).toContain("••••••••");
+    await expect(renderedBodyText(canvasElement)).not.toContain(
+      "eyJhbGciOiJSUzI1",
+    );
+    await expect(renderedBodyText(canvasElement)).toContain("••••••••");
     // Non-secret fields stay visible.
-    await expect(canvasElement.textContent).toContain("Bearer");
+    await expect(renderedBodyText(canvasElement)).toContain("Bearer");
 
     // Reveal every masked body and confirm the raw response token appears.
     const revealButtons = canvas.getAllByRole("button", {
@@ -128,7 +150,11 @@ export const AuthSuccess: Story = {
     await expect(
       canvas.getAllByText("Secrets revealed").length,
     ).toBeGreaterThanOrEqual(revealButtons.length);
-    await expect(canvasElement.textContent).toContain("eyJhbGciOiJSUzI1");
+    await waitFor(async () => {
+      await expect(renderedBodyText(canvasElement)).toContain(
+        "eyJhbGciOiJSUzI1",
+      );
+    });
   },
 };
 

clients/web/src/components/groups/NetworkEntry/NetworkEntry.test.tsx

@@ -7,7 +7,7 @@ import {
   screen,
   waitFor,
 } from "../../../test/renderWithMantine";
-import { getAceText } from "../../../test/aceEditor";
+import { getAceText, getAceTextByLabel } from "../../../test/aceEditor";
 import { NetworkEntry } from "./NetworkEntry";
 
 const baseEntry: FetchRequestEntry = {
@@ -209,6 +209,35 @@ describe("NetworkEntry", () => {
     expect(screen.queryByText("Response Body")).not.toBeInTheDocument();
   });
 
+  // The declared content type reaches `ContentViewer`, so a body the server
+  // *said* was JSON renders as JSON even when it does not parse. Without it
+  // the Network tab could only ever reach the parse-it-first heuristic, and a
+  // malformed JSON response read as plain text with no sign it was meant to be
+  // JSON.
+  it("renders a malformed but declared JSON body as JSON", () => {
+    const malformed: FetchRequestEntry = {
+      ...baseEntry,
+      responseHeaders: { "content-type": "application/json" },
+      responseBody: '{"ok":',
+    };
+    renderWithMantine(<NetworkEntry entry={malformed} isListExpanded={true} />);
+    expect(getAceTextByLabel(/Response body JSON/)).toBe('{"ok":');
+  });
+
+  // Narrowed to JSON on purpose: forwarding the content type wholesale would
+  // route an HTML body into the sandboxed frame and a CSV one into a table,
+  // which is a change to what the Network tab is.
+  it("does not route a non-JSON declared body to another renderer", () => {
+    const html: FetchRequestEntry = {
+      ...baseEntry,
+      responseHeaders: { "content-type": "text/html" },
+      responseBody: "<p>hi</p>",
+    };
+    renderWithMantine(<NetworkEntry entry={html} isListExpanded={true} />);
+    expect(screen.getByText("<p>hi</p>")).toBeInTheDocument();
+    expect(document.querySelector("iframe")).toBeNull();
+  });
+
   it("shows a 'too large' notice when a body exceeds the inline preview limit", async () => {
     const user = userEvent.setup();
     const huge = "x".repeat(150_000);

clients/web/src/components/groups/NetworkEntry/NetworkEntry.tsx

@@ -17,6 +17,7 @@ import { RiErrorWarningLine } from "react-icons/ri";
 import type { FetchRequestEntry } from "@inspector/core/mcp/types.js";
 import { isLongLivedStreamResponse } from "@inspector/core/mcp/fetchTracking.js";
 import { ContentViewer } from "../../elements/ContentViewer/ContentViewer";
+import { getMimeKind } from "../../elements/ContentViewer/contentViewerUtils";
 import { CopyButton } from "../../elements/CopyButton/CopyButton";
 import { ExpandToggle } from "../../elements/ExpandToggle/ExpandToggle";
 import { MethodBadge } from "../../elements/MethodBadge/MethodBadge";
@@ -391,6 +392,23 @@ function BodyPreview({
 
   const tooLarge = body.length > MAX_INLINE_BODY_CHARS;
 
+  // Forward the declared MIME, but only when it is JSON.
+  //
+  // `ContentViewer` renders a *declared* `application/json` as JSON even when
+  // it does not parse — the server said what it sent — while an undeclared
+  // body only gets that treatment if it parses. Without this the Network tab
+  // could never reach the declared branch, so a malformed JSON response read
+  // as plain text with no indication that it was meant to be JSON.
+  //
+  // Narrowed to JSON on purpose: forwarding the content type wholesale would
+  // also route a `text/html` body into the sandboxed HTML frame and a
+  // `text/csv` one into a table. Turning wire bodies into rendered documents
+  // is a real change to what the Network tab is, and not one this makes.
+  const jsonMimeType =
+    contentType && getMimeKind(contentType) === "json"
+      ? contentType
+      : undefined;
+
   // OAuth responses (token exchange, DCR) and the token request carry
   // bearer-grade secrets. Mask them by default and gate the raw values behind
   // an explicit reveal so they aren't exposed at a glance during a
@@ -424,6 +442,7 @@ function BodyPreview({
       <ContentViewer
         block={{ type: "text", text: body }}
         copyable
+        mimeType={jsonMimeType}
         jsonLabel={`${label} JSON`}
       />
     );
@@ -448,6 +467,9 @@ function BodyPreview({
       <ContentViewer
         block={{ type: "text", text: shown }}
         copyable
+        // The masked form is what is rendered, and masking can leave a
+        // still-valid JSON document — so the declared type still applies.
+        mimeType={jsonMimeType}
         jsonLabel={`${label} JSON`}
       />
     </Stack>