From 1a2a36f0b8e4161252c15d1ca835788485ad0908 Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Thu, 27 Aug 2026 02:24:22 -0400
Subject: [PATCH 01/14] feat(web): use the Ace JSON editor everywhere, and
 restore the raw-JSON toggle
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Extracts the Ace integration #2094 carried inline into a shared
`elements/JsonEditor`, and renders it on every surface where the web
client types or displays JSON.

The element is deliberately text in, text out. The two editing contracts
above it disagree about what an unparseable draft means — JsonObjectInput
keeps the last valid object and says nothing to its parent, SchemaJsonField
reports `undefined` and blocks submission (#2020) — so parsing, and the
draft/value split that goes with it, stays with each caller.

Surfaces: SchemaJsonField (inherited by all four SchemaForm consumers), a
new "Edit as JSON" switch for the whole arguments object, the server.json
File Contents box, the raw JSON-RPC request box, ContentViewer's JSON
branch (read-only, inherited by its eleven consumers), and a new "Edit and
replay" modal on a Protocol entry.

Ace read-only replaces the CodeHighlight JSON path and the Prism `json`
grammar loader is dropped: folding, not colorization, is what it adds, and
two highlighters for one language drift. `wrap={false}` callers and untyped
text that only looks like JSON keep the plain renderer.

Closes #2151

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/README.md                         |  31 +-
 clients/web/src/App.css                       |   7 +
 .../CodeHighlight/CodeHighlight.stories.tsx   |  11 +-
 .../CodeHighlight/CodeHighlight.test.tsx      |  23 +-
 .../elements/CodeHighlight/CodeHighlight.tsx  |   6 +-
 .../ContentViewer/ContentViewer.test.tsx      |  42 +-
 .../elements/ContentViewer/ContentViewer.tsx  |  64 ++-
 .../ContentViewer/contentViewerUtils.test.ts  |  24 ++
 .../ContentViewer/contentViewerUtils.ts       |  21 +
 .../EditReplayButton.stories.tsx              |  24 ++
 .../EditReplayButton.test.tsx                 |  21 +
 .../EditReplayButton/EditReplayButton.tsx     |  31 ++
 .../JsonEditor/JsonEditor.stories.tsx         | 117 ++++++
 .../elements/JsonEditor/JsonEditor.test.tsx   | 190 +++++++++
 .../elements/JsonEditor/JsonEditor.tsx        | 263 +++++++++++++
 .../JsonObjectInput/JsonObjectInput.tsx       | 195 ++-------
 .../AppDetailPanel/AppDetailPanel.test.tsx    |   7 +-
 .../EditReplayModal.stories.tsx               |  51 +++
 .../EditReplayModal/EditReplayModal.test.tsx  | 121 ++++++
 .../EditReplayModal/EditReplayModal.tsx       | 133 +++++++
 .../ExperimentalFeaturesPanel.test.tsx        |   7 +-
 .../ExperimentalFeaturesPanel.tsx             |  33 +-
 .../ImportServerJsonPanel.test.tsx            |   9 +-
 .../ImportServerJsonPanel.tsx                 |  54 +--
 .../MrtrConversation/MrtrConversation.tsx     |   7 +-
 .../groups/NetworkEntry/NetworkEntry.test.tsx |  22 +-
 .../ProtocolEntry/ProtocolEntry.test.tsx      |  79 ++++
 .../groups/ProtocolEntry/ProtocolEntry.tsx    |  50 ++-
 .../ProtocolListPanel.test.tsx                |   5 +-
 .../ProtocolListPanel/ProtocolListPanel.tsx   |   5 +-
 .../ResourceLink/ResourceLink.stories.tsx     |  13 +-
 .../groups/ResourceLink/ResourceLink.test.tsx |  27 +-
 .../ResourcePreviewPanel.test.tsx             |   8 +-
 .../groups/SchemaForm/SchemaForm.stories.tsx  |  43 +-
 .../groups/SchemaForm/SchemaForm.test.tsx     | 369 +++++++++++++-----
 .../groups/SchemaForm/SchemaForm.tsx          | 182 ++++++++-
 .../ServerImportJsonModal.test.tsx            |  37 +-
 .../StructuredOutputPanel.test.tsx            |  15 +-
 .../ToolDetailPanel/ToolDetailPanel.test.tsx  |   7 +-
 .../ToolResultPanel/ToolResultPanel.test.tsx  |   7 +-
 .../screens/ProtocolScreen/ProtocolScreen.tsx |   3 +-
 .../views/InspectorView/InspectorView.tsx     |   3 +-
 .../web/src/hooks/useExportActions.test.tsx   |  32 ++
 clients/web/src/hooks/useExportActions.ts     |  24 +-
 clients/web/src/lib/protocolReplay.ts         |  12 +
 clients/web/src/test/aceEditor.ts             |  39 +-
 46 files changed, 2026 insertions(+), 448 deletions(-)
 create mode 100644 clients/web/src/components/elements/EditReplayButton/EditReplayButton.stories.tsx
 create mode 100644 clients/web/src/components/elements/EditReplayButton/EditReplayButton.test.tsx
 create mode 100644 clients/web/src/components/elements/EditReplayButton/EditReplayButton.tsx
 create mode 100644 clients/web/src/components/elements/JsonEditor/JsonEditor.stories.tsx
 create mode 100644 clients/web/src/components/elements/JsonEditor/JsonEditor.test.tsx
 create mode 100644 clients/web/src/components/elements/JsonEditor/JsonEditor.tsx
 create mode 100644 clients/web/src/components/groups/EditReplayModal/EditReplayModal.stories.tsx
 create mode 100644 clients/web/src/components/groups/EditReplayModal/EditReplayModal.test.tsx
 create mode 100644 clients/web/src/components/groups/EditReplayModal/EditReplayModal.tsx

diff --git a/clients/web/README.md b/clients/web/README.md
index 934b799c54..02fe4d893c 100644
--- a/clients/web/README.md
+++ b/clients/web/README.md
@@ -49,8 +49,8 @@ Components live under `src/components/` in four layers, smallest to largest:
 
 | Layer       | Count | What it is                                                                     |
 | ----------- | ----- | ------------------------------------------------------------------------------ |
-| `elements/` | ~31   | Leaf presentational pieces (badges, buttons, toggles) over Mantine primitives. |
-| `groups/`   | ~63   | Composite pieces (cards, panels, modals, control bars).                        |
+| `elements/` | ~48   | Leaf presentational pieces (badges, buttons, toggles) over Mantine primitives. |
+| `groups/`   | ~64   | Composite pieces (cards, panels, modals, control bars).                        |
 | `screens/`  | ~11   | Full tab screens (Tools, Resources, Servers, monitoring screens…).             |
 | `views/`    | 1     | `InspectorView` — the top-level layout that composes the screens.              |
 
@@ -283,17 +283,32 @@ Each customized Mantine component has a `Theme<Name>.ts` file (`Button.ts`, `Tex
 
 **`cssVariables.ts` is the third piece, beside the component files and `App.css`.** It holds overrides for the CSS variables `MantineProvider` injects at runtime, which `App.css` cannot reach: the provider appends its generated `<style>` after the stylesheet imports, so a `:root` rule there loses on source order at equal specificity. `cssVariablesResolver` is the supported seam. It is passed at **all three** `MantineProvider` sites — the app (`main.tsx`), the Storybook preview, and `renderWithMantine` — so the running app, the stories, and the tests cannot disagree about a token's value. It currently corrects `--mantine-color-error`, whose Mantine defaults fail WCAG AA in both schemes at the size input error text renders.
 
-## Code editing (`JsonObjectInput`)
+## JSON editing and display (`JsonEditor`)
 
-Payloads whose _values_ may be arbitrary JSON — `_meta` is the case that forced it ([#1910](https://github.com/modelcontextprotocol/inspector/issues/1910)) — are edited with **Ace** (`react-ace` + `ace-builds`, declared in this client because they render React) rather than the key/value rows used for headers and env, which cannot express an object value. Ace brings code folding, brace auto-closing, and per-line error annotation from its JSON worker.
+Every surface in this client where JSON is typed or displayed renders one element: **`elements/JsonEditor`**, an **Ace** editor (`react-ace` + `ace-builds`, declared in this client because they render React). Ace brings code folding, line numbers, brace auto-closing, and per-line error annotation from its JSON worker — the last three are why hand-writing a nested payload in a bare textarea was the actual pain ([#2151](https://github.com/modelcontextprotocol/inspector/issues/2151)).
 
-Three integration details are load-bearing:
+`JsonEditor` is deliberately **text in, text out**: it never parses. The editing contracts above it disagree about what an unparseable draft means, and neither can be expressed by a component that decides for them:
 
-- **The worker is imported as `?url`** so Vite emits it as an asset. Without it Ace fetches `worker-json.js` from a path that does not exist in a bundled app and silently loses its annotations.
-- **The gutter's colors are overridden in `App.css`**, keyed off Ace's cssClass (`ace-github` / `ace-github-dark` — _not_ the `theme-github_dark` module name). Ace's own themes are 1.89:1 and 4.13:1 there, both under AA, and folding needs the gutter so it cannot simply be hidden.
+| Consumer | While the draft is invalid |
+| --- | --- |
+| `elements/JsonObjectInput` (Server Settings → Request Metadata) | Parent is **not** told; the last valid object stands. There is no Save button to gate — `onChange` writes straight through — so emitting `{}` would discard configured metadata on a stray keystroke ([#1910](https://github.com/modelcontextprotocol/inspector/issues/1910)). |
+| `SchemaJsonField` (the object/array/union fallback in `groups/SchemaForm`) | Parent is told `undefined`, **and** invalidity is reported up through `onValidityChange` so Execute / Open App / Submit are disabled ([#2020](https://github.com/modelcontextprotocol/inspector/issues/2020)). |
+| `SchemaForm`'s **Edit as JSON** switch | Same as above, for the whole arguments object — the v1 escape hatch, restored. Seeded from what the form holds, so a root-union switch's pruning ([#2123](https://github.com/modelcontextprotocol/inspector/issues/2123)) is not undone by a round trip. |
+| `groups/EditReplayModal` (Protocol → Edit and replay) | Send is disabled. Unlike the metadata editor this modal *has* a commit gesture to gate. |
+| `groups/ImportServerJsonPanel`, `groups/ExperimentalFeaturesPanel` | The panel owns the text and validates it itself. |
+| `elements/ContentViewer`'s JSON branch | Read-only — see below. |
+
+**Read-only mode is what `ContentViewer` renders JSON as**, and through it every JSON payload in the app: Protocol and Network entries, tool results, structured output, resource previews, server cards. Highlighting is *not* what that buys — JSON already highlighted, via the lazily-imported Prism grammar `CodeHighlight` loads. What Ace adds is **folding**, line numbers and a gutter on a large payload. The Prism `json` grammar was dropped in the same change rather than kept beside it: two highlighters for one language drift, and nothing else asks for `json`. Two cases stay on the plain renderer — a `wrap={false}` caller (the server card's fixed-height, single-line box) and untyped text that only *looks* like JSON but does not parse, which in an editor would frame a server's prose as a malformed document.
+
+Five integration details are load-bearing:
+
+- **The worker is imported as `?url`** so Vite emits it as an asset. Without it Ace fetches `worker-json.js` from a path that does not exist in a bundled app and silently loses its annotations. It is registered at **module scope** — the registration is global to Ace and idempotent, so it must not move into a per-mount effect.
+- **Ace fires two change events for a replace** (a remove, then an insert), so a select-all-and-retype passes through a momentarily *empty* document. `JsonEditor` coalesces the pair in a microtask and reports only the settled text; acting on the first event reports the empty document as the user's answer.
+- **The gutter's colors are overridden in `App.css`**, keyed off Ace's cssClass (`ace-github` / `ace-github-dark` — _not_ the `theme-github_dark` module name). Ace's own themes are 1.89:1 and 4.13:1 there, both under AA, and folding needs the gutter so it cannot simply be hidden. The read-only caret is hidden the same way (`.json-editor-readonly`), since `readOnly` has no option that removes it.
 - **The label and error are wired to Ace's hidden textarea by hand.** `Input.Wrapper` associates a _Mantine_ input through context; Ace renders its own DOM, so the id, `aria-invalid` and `aria-describedby` are set on the textarea in an effect.
+- **`ariaLabel` is required.** Ace names its hidden textarea "Cursor at row N", which is a position readout rather than a name — and it only recomputes that label when the cursor moves, so the option has to be applied *and* recomputed in `onLoad` to reach the DOM before the user clicks in.
 
-**Testing it is split by necessity.** Ace's input path does not work under happy-dom — `userEvent.type` reaches the textarea and produces no edit — so a keyboard test in the unit project passes while asserting nothing. Unit tests drive the editor instance through `src/test/aceEditor.ts`; real keyboard behaviour lives in the Storybook play functions, which run in Chromium.
+**Testing it is split by necessity.** Ace's input path does not work under happy-dom — `userEvent.type` reaches the textarea and produces no edit — so a keyboard test in the unit project passes while asserting nothing. Unit tests drive the editor instance through `src/test/aceEditor.ts` (`setAceText` / `getAceText`, plus the `*ByLabel` variants for a screen holding more than one editor); real keyboard behaviour lives in the Storybook play functions, which run in Chromium. The same split applies to *reading* a payload back: Ace virtualizes its lines, so a read-only editor's text is not fully in the DOM and assertions go through the editor rather than `getByText`.
 
 ## Testing
 
diff --git a/clients/web/src/App.css b/clients/web/src/App.css
index a32c6435d2..42bc7e363c 100644
--- a/clients/web/src/App.css
+++ b/clients/web/src/App.css
@@ -615,3 +615,10 @@ body.resizing-col {
 .ace_editor.ace-github-dark .ace_gutter {
   color: var(--inspector-code-gutter-text);
 }
+
+/* A read-only Ace editor still paints a caret, which reads as an editable field
+   whose keystrokes are being swallowed. `readOnly` has no option that removes
+   it, so — like the gutter above — it can only be reached by selector. */
+.ace_editor.json-editor-readonly .ace_cursor {
+  display: none;
+}
diff --git a/clients/web/src/components/elements/CodeHighlight/CodeHighlight.stories.tsx b/clients/web/src/components/elements/CodeHighlight/CodeHighlight.stories.tsx
index 8c91af13dc..4b126466f1 100644
--- a/clients/web/src/components/elements/CodeHighlight/CodeHighlight.stories.tsx
+++ b/clients/web/src/components/elements/CodeHighlight/CodeHighlight.stories.tsx
@@ -9,14 +9,11 @@ const meta: Meta<typeof CodeHighlight> = {
 export default meta;
 type Story = StoryObj<typeof CodeHighlight>;
 
-export const Json: Story = {
+// No JSON story: JSON is rendered by `JsonEditor` (read-only), not here (#2151).
+export const Yaml: Story = {
   args: {
-    language: "json",
-    code: JSON.stringify(
-      { name: "my-app", version: "1.0.0", tags: ["a", "b"] },
-      null,
-      2,
-    ),
+    language: "yaml",
+    code: "name: my-app\nversion: 1.0.0\ntags:\n  - a\n  - b",
   },
 };
 
diff --git a/clients/web/src/components/elements/CodeHighlight/CodeHighlight.test.tsx b/clients/web/src/components/elements/CodeHighlight/CodeHighlight.test.tsx
index 91049089b9..5a90cef337 100644
--- a/clients/web/src/components/elements/CodeHighlight/CodeHighlight.test.tsx
+++ b/clients/web/src/components/elements/CodeHighlight/CodeHighlight.test.tsx
@@ -22,9 +22,6 @@ vi.mock("react-syntax-highlighter/dist/esm/prism-light", () => ({
 vi.mock("react-syntax-highlighter/dist/esm/styles/prism/tomorrow", () => ({
   default: {},
 }));
-vi.mock("react-syntax-highlighter/dist/esm/languages/prism/json", () => ({
-  default: { __grammar: "json" },
-}));
 vi.mock("react-syntax-highlighter/dist/esm/languages/prism/markup", () => ({
   default: { __grammar: "markup" },
 }));
@@ -53,15 +50,15 @@ beforeEach(() => {
 describe("CodeHighlight", () => {
   it("renders plain code initially, then upgrades to the highlighter", async () => {
     const CodeHighlight = await loadComponent();
-    renderWithMantine(<CodeHighlight language="json" code='{"a":1}' />);
+    renderWithMantine(<CodeHighlight language="yaml" code="a: 1" />);
     // Plain Mantine Code before the grammar resolves.
     expect(screen.queryByTestId("prism")).not.toBeInTheDocument();
-    expect(screen.getByText('{"a":1}')).toBeInTheDocument();
+    expect(screen.getByText("a: 1")).toBeInTheDocument();
     // After the lazy grammar loads, the prism runtime takes over.
     const prism = await screen.findByTestId("prism");
-    expect(prism).toHaveAttribute("data-language", "json");
-    expect(registerLanguage).toHaveBeenCalledWith("json", {
-      __grammar: "json",
+    expect(prism).toHaveAttribute("data-language", "yaml");
+    expect(registerLanguage).toHaveBeenCalledWith("yaml", {
+      __grammar: "yaml",
     });
   });
 
@@ -113,14 +110,14 @@ describe("CodeHighlight", () => {
   it("reuses an already-registered grammar without re-importing", async () => {
     const CodeHighlight = await loadComponent();
     const { unmount } = renderWithMantine(
-      <CodeHighlight language="json" code='{"a":1}' />,
+      <CodeHighlight language="yaml" code="a: 1" />,
     );
     await screen.findByTestId("prism");
     expect(registerLanguage).toHaveBeenCalledTimes(1);
     unmount();
-    // A second mount finds json already registered: ready synchronously, no
+    // A second mount finds yaml already registered: ready synchronously, no
     // second registerLanguage call.
-    renderWithMantine(<CodeHighlight language="json" code='{"b":2}' />);
+    renderWithMantine(<CodeHighlight language="yaml" code="b: 2" />);
     expect(await screen.findByTestId("prism")).toBeInTheDocument();
     expect(registerLanguage).toHaveBeenCalledTimes(1);
   });
@@ -128,7 +125,7 @@ describe("CodeHighlight", () => {
   it("loads a second language reusing the already-loaded runtime", async () => {
     const CodeHighlight = await loadComponent();
     const { unmount } = renderWithMantine(
-      <CodeHighlight language="json" code='{"a":1}' />,
+      <CodeHighlight language="yaml" code="a: 1" />,
     );
     await screen.findByTestId("prism");
     unmount();
@@ -146,7 +143,7 @@ describe("CodeHighlight", () => {
     const CodeHighlight = await loadComponent();
     renderWithMantine(
       <>
-        <CodeHighlight language="json" code='{"a":1}' />
+        <CodeHighlight language="yaml" code="a: 1" />
         <CodeHighlight language="css" code=".a{}" />
       </>,
     );
diff --git a/clients/web/src/components/elements/CodeHighlight/CodeHighlight.tsx b/clients/web/src/components/elements/CodeHighlight/CodeHighlight.tsx
index cfce77b847..d3c00d7266 100644
--- a/clients/web/src/components/elements/CodeHighlight/CodeHighlight.tsx
+++ b/clients/web/src/components/elements/CodeHighlight/CodeHighlight.tsx
@@ -35,7 +35,11 @@ type PrismRuntime = ComponentType<{
  * below if the canonical Prism name differs) as the type matrix grows.
  */
 const LANGUAGE_LOADERS: Record<string, () => Promise<{ default: Grammar }>> = {
-  json: () => import("react-syntax-highlighter/dist/esm/languages/prism/json"),
+  // No `json` entry, deliberately (#2151). JSON is rendered by the Ace-backed
+  // `JsonEditor` in read-only mode, which folds and numbers a large payload —
+  // things a Prism block cannot do. Registering the grammar here as well would
+  // leave two highlighters for one language, differing in appearance and
+  // drifting apart; there is no caller left that asks for it.
   markup: () =>
     import("react-syntax-highlighter/dist/esm/languages/prism/markup"),
   css: () => import("react-syntax-highlighter/dist/esm/languages/prism/css"),
diff --git a/clients/web/src/components/elements/ContentViewer/ContentViewer.test.tsx b/clients/web/src/components/elements/ContentViewer/ContentViewer.test.tsx
index dd777da385..53366fdff4 100644
--- a/clients/web/src/components/elements/ContentViewer/ContentViewer.test.tsx
+++ b/clients/web/src/components/elements/ContentViewer/ContentViewer.test.tsx
@@ -5,6 +5,7 @@ import type {
   TextResourceContents,
 } from "@modelcontextprotocol/client";
 import { renderWithMantine, screen } from "../../../test/renderWithMantine";
+import { getAceText } from "../../../test/aceEditor";
 import { ContentViewer } from "./ContentViewer";
 
 // Stub the lazy highlighter so JSON/XML/CSS branches are assertable
@@ -28,16 +29,19 @@ describe("ContentViewer", () => {
     expect(screen.getByText("hello world")).toBeInTheDocument();
   });
 
-  it("pretty-prints JSON text", () => {
+  it("pretty-prints JSON text into the JSON editor", () => {
     const block: ContentBlock = { type: "text", text: '{"a":1}' };
     renderWithMantine(<ContentViewer block={block} />);
-    expect(screen.getByText(/"a": 1/)).toBeInTheDocument();
+    expect(getAceText()).toBe('{\n  "a": 1\n}');
   });
 
+  // Text that merely *starts* like JSON stays plain: presenting it in a JSON
+  // gutter would frame the server's prose as a malformed document (#2151).
   it("falls back to raw text when JSON is malformed", () => {
     const block: ContentBlock = { type: "text", text: "{ broken" };
     renderWithMantine(<ContentViewer block={block} />);
     expect(screen.getByText("{ broken")).toBeInTheDocument();
+    expect(document.querySelector(".ace_editor")).toBeNull();
   });
 
   it("renders a copy overlay when copyable", () => {
@@ -206,14 +210,34 @@ describe("ContentViewer", () => {
     expect(screen.getByRole("button")).toBeInTheDocument();
   });
 
-  it("highlights a JSON text block when mimeType is application/json", () => {
+  it("renders a declared JSON text block in the JSON editor", () => {
     const block: ContentBlock = { type: "text", text: '{"a":1}' };
     renderWithMantine(
       <ContentViewer block={block} mimeType="application/json" />,
     );
-    const probe = screen.getByTestId("code-highlight");
-    expect(probe).toHaveAttribute("data-language", "json");
-    expect(probe.textContent).toContain('"a": 1');
+    expect(getAceText()).toBe('{\n  "a": 1\n}');
+    // The Prism path is no longer taken for JSON — one highlighter per
+    // language, and Ace is the one that folds (#2151).
+    expect(screen.queryByTestId("code-highlight")).not.toBeInTheDocument();
+  });
+
+  // The server card's fixed-height, single-line box (`wrap={false}`) must not
+  // become a multi-line editor, whatever MIME it declares.
+  it("keeps a non-wrapping JSON block on the plain renderer", () => {
+    const block: ContentBlock = { type: "text", text: '{"a":1}' };
+    renderWithMantine(
+      <ContentViewer block={block} mimeType="application/json" wrap={false} />,
+    );
+    expect(document.querySelector(".ace_editor")).toBeNull();
+    expect(screen.getByText(/"a": 1/)).toBeInTheDocument();
+  });
+
+  it("keeps the copy overlay above the JSON editor", () => {
+    const block: ContentBlock = { type: "text", text: '{"a":1}' };
+    renderWithMantine(
+      <ContentViewer block={block} mimeType="application/json" copyable />,
+    );
+    expect(screen.getByRole("button", { name: "Copy" })).toBeInTheDocument();
   });
 
   it("renders nothing when neither block nor contents is provided", () => {
@@ -274,15 +298,13 @@ describe("ContentViewer (resource contents)", () => {
     ).toBeInTheDocument();
   });
 
-  it("highlights JSON contents", () => {
+  it("renders JSON contents in the JSON editor", () => {
     renderWithMantine(
       <ContentViewer
         contents={text({ text: '{"a":1}', mimeType: "application/json" })}
       />,
     );
-    const probe = screen.getByTestId("code-highlight");
-    expect(probe).toHaveAttribute("data-language", "json");
-    expect(probe.textContent).toContain('"a": 1');
+    expect(getAceText()).toBe('{\n  "a": 1\n}');
   });
 
   it("indents and highlights XML contents", () => {
diff --git a/clients/web/src/components/elements/ContentViewer/ContentViewer.tsx b/clients/web/src/components/elements/ContentViewer/ContentViewer.tsx
index fac6000f15..998ae42ae6 100644
--- a/clients/web/src/components/elements/ContentViewer/ContentViewer.tsx
+++ b/clients/web/src/components/elements/ContentViewer/ContentViewer.tsx
@@ -10,11 +10,13 @@ import type { Components } from "react-markdown";
 import remarkGfm from "remark-gfm";
 import { CodeHighlight } from "../CodeHighlight/CodeHighlight";
 import { CopyButton } from "../CopyButton/CopyButton";
+import { JsonEditor } from "../JsonEditor/JsonEditor";
 import { ResourceLinkInfo } from "../ResourceLinkInfo/ResourceLinkInfo";
 import {
   formatJson,
   formatXml,
   getMimeKind,
+  isJsonDocument,
   isSafeHref,
   isTextualKind,
   looksLikeJson,
@@ -161,6 +163,46 @@ function HighlightedContent({
   );
 }
 
+/**
+ * A read-only JSON payload, rendered in the same Ace editor the JSON *input*
+ * surfaces use (#2151).
+ *
+ * Highlighting is not what this buys — JSON already highlighted here, through
+ * the lazily-imported Prism grammar `CodeHighlight` loads. What Ace adds is
+ * **folding**, line numbers and a gutter, which is the difference between
+ * reading a large `tools/call` result and scrolling past it. Prism's `json`
+ * grammar was dropped in the same change rather than kept beside this: two
+ * highlighters for one language drift, and nothing else asks for `json`.
+ *
+ * The copy affordance is unchanged — `CopyableWrapper` overlays it above
+ * whichever renderer was picked, so `copyable` keeps working across the swap.
+ * It copies the *original* text, not the pretty-printed form, matching every
+ * other branch here.
+ */
+function JsonContent({ text, copyable }: { text: string; copyable: boolean }) {
+  return (
+    <CopyableWrapper copyable={copyable} copyValue={text}>
+      <JsonEditor
+        ariaLabel="JSON content"
+        value={formatJson(text)}
+        readOnly
+        // Sized to the payload, both ways. A two-line result must not open six
+        // rows of blank editor — and an uncapped `maxLines` is what keeps a
+        // large one from growing its *own* scroller inside the host's: every
+        // consumer here already provides the scroll container it wants (the
+        // structured-output section caps at `mah` and scrolls; a result panel
+        // scrolls whole), and a second scrollbar nested in the first is both
+        // worse to use and a change to layout this swap has no business making.
+        // It also keeps every line in the DOM, as the preformatted block it
+        // replaces did — Ace renders only what its own viewport covers, so a
+        // capped editor would silently drop the rest from find-in-page.
+        minLines={1}
+        maxLines={Infinity}
+      />
+    </CopyableWrapper>
+  );
+}
+
 function PlainTextContent({
   text,
   copyable,
@@ -170,6 +212,13 @@ function PlainTextContent({
   copyable: boolean;
   wrap: boolean;
 }) {
+  // Untyped text that really parses as JSON gets the JSON renderer too — the
+  // heuristic is how a server that sent no MIME type still reads well. Not when
+  // `wrap` is false, though: that caller wants one clipped line at a fixed
+  // height, which a multi-line editor is not.
+  if (wrap && isJsonDocument(text)) {
+    return <JsonContent text={text} copyable={copyable} />;
+  }
   const displayText = looksLikeJson(text) ? formatJson(text) : text;
   return (
     <CopyableWrapper copyable={copyable} copyValue={text}>
@@ -210,13 +259,14 @@ function TextualContent({
     case "markdown":
       return <MarkdownContent text={text} copyable={copyable} />;
     case "json":
-      return (
-        <HighlightedContent
-          code={formatJson(text)}
-          language="json"
-          copyValue={text}
-          copyable={copyable}
-        />
+      // `wrap={false}` is a fixed-height, single-line, ellipsis-clipped box
+      // (the server card's command/URL). Pretty-printed JSON collapsed onto one
+      // line is exactly what that prop is documented not to be used for, so
+      // that caller keeps the plain renderer.
+      return wrap ? (
+        <JsonContent text={text} copyable={copyable} />
+      ) : (
+        <PlainTextContent text={text} copyable={copyable} wrap={wrap} />
       );
     case "xml":
       return (
diff --git a/clients/web/src/components/elements/ContentViewer/contentViewerUtils.test.ts b/clients/web/src/components/elements/ContentViewer/contentViewerUtils.test.ts
index 26ab07f5e8..d7bc4340ab 100644
--- a/clients/web/src/components/elements/ContentViewer/contentViewerUtils.test.ts
+++ b/clients/web/src/components/elements/ContentViewer/contentViewerUtils.test.ts
@@ -7,6 +7,7 @@ import {
   getMimeKind,
   isSafeHref,
   isTextualKind,
+  isJsonDocument,
   looksLikeJson,
   PREVIEW_HTML_CSP,
   tryDecodeBase64ToBytes,
@@ -112,6 +113,29 @@ describe("looksLikeJson", () => {
   });
 });
 
+describe("isJsonDocument", () => {
+  it("accepts text that really parses as JSON", () => {
+    expect(isJsonDocument('  {"a":1}')).toBe(true);
+    expect(isJsonDocument("[1,2]")).toBe(true);
+  });
+
+  // The stricter half of the heuristic (#2151). Text that merely *starts* like
+  // JSON must not be handed to the JSON editor: a note beginning `{` would then
+  // be presented as a document, in a JSON gutter, framed as malformed.
+  it("rejects text that only looks like JSON", () => {
+    expect(isJsonDocument("{ broken")).toBe(false);
+    expect(isJsonDocument("[unclosed")).toBe(false);
+    expect(isJsonDocument("plain")).toBe(false);
+  });
+
+  // A bare scalar is valid JSON but never looked like a document, so it stays
+  // on the plain renderer — otherwise ordinary prose that happens to be a
+  // number would open an editor.
+  it("rejects a scalar that never looked like a document", () => {
+    expect(isJsonDocument("42")).toBe(false);
+  });
+});
+
 describe("formatXml", () => {
   it("indents nested elements", () => {
     const out = formatXml("<a><b>x</b></a>");
diff --git a/clients/web/src/components/elements/ContentViewer/contentViewerUtils.ts b/clients/web/src/components/elements/ContentViewer/contentViewerUtils.ts
index c56b6f78fd..32a425f9a7 100644
--- a/clients/web/src/components/elements/ContentViewer/contentViewerUtils.ts
+++ b/clients/web/src/components/elements/ContentViewer/contentViewerUtils.ts
@@ -142,6 +142,27 @@ export function looksLikeJson(text: string): boolean {
   return trimmed.startsWith("{") || trimmed.startsWith("[");
 }
 
+/**
+ * Whether untyped text really is a JSON document, not merely shaped like one.
+ *
+ * {@link looksLikeJson} only tests the first character, which is enough to
+ * decide whether to *try* pretty-printing — a failed parse falls back to the
+ * original text and nothing is lost. It is not enough to decide to hand the
+ * text to the JSON editor: a note beginning `{` would then be presented as a
+ * JSON document, in a JSON gutter, with the server's plain text framed as
+ * malformed. A declared `application/json` is different — there the server said
+ * what it sent, so its own broken payload is shown as JSON on purpose.
+ */
+export function isJsonDocument(text: string): boolean {
+  if (!looksLikeJson(text)) return false;
+  try {
+    JSON.parse(text);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
 /**
  * Indent a single-line or minified XML/HTML-ish document for readability before
  * syntax highlighting. Hand-rolled: split on `>\s*<` boundaries, then track a
diff --git a/clients/web/src/components/elements/EditReplayButton/EditReplayButton.stories.tsx b/clients/web/src/components/elements/EditReplayButton/EditReplayButton.stories.tsx
new file mode 100644
index 0000000000..42331d91e3
--- /dev/null
+++ b/clients/web/src/components/elements/EditReplayButton/EditReplayButton.stories.tsx
@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, fn, within } from "storybook/test";
+import { EditReplayButton } from "./EditReplayButton";
+
+const meta: Meta<typeof EditReplayButton> = {
+  title: "Elements/EditReplayButton",
+  component: EditReplayButton,
+  args: { onClick: fn() },
+};
+
+export default meta;
+type Story = StoryObj<typeof EditReplayButton>;
+
+export const Default: Story = {};
+
+export const Activated: Story = {
+  play: async ({ args, canvasElement, userEvent }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(
+      canvas.getByRole("button", { name: "Edit and replay" }),
+    );
+    await expect(args.onClick).toHaveBeenCalled();
+  },
+};
diff --git a/clients/web/src/components/elements/EditReplayButton/EditReplayButton.test.tsx b/clients/web/src/components/elements/EditReplayButton/EditReplayButton.test.tsx
new file mode 100644
index 0000000000..f3e196a338
--- /dev/null
+++ b/clients/web/src/components/elements/EditReplayButton/EditReplayButton.test.tsx
@@ -0,0 +1,21 @@
+import { describe, it, expect, vi } from "vitest";
+import userEvent from "@testing-library/user-event";
+import { renderWithMantine, screen } from "../../../test/renderWithMantine";
+import { EditReplayButton } from "./EditReplayButton";
+
+describe("EditReplayButton", () => {
+  it("is named for assistive tech", () => {
+    renderWithMantine(<EditReplayButton onClick={vi.fn()} />);
+    expect(
+      screen.getByRole("button", { name: "Edit and replay" }),
+    ).toBeInTheDocument();
+  });
+
+  it("invokes onClick when activated", async () => {
+    const user = userEvent.setup();
+    const onClick = vi.fn();
+    renderWithMantine(<EditReplayButton onClick={onClick} />);
+    await user.click(screen.getByRole("button", { name: "Edit and replay" }));
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/clients/web/src/components/elements/EditReplayButton/EditReplayButton.tsx b/clients/web/src/components/elements/EditReplayButton/EditReplayButton.tsx
new file mode 100644
index 0000000000..e0e910d38d
--- /dev/null
+++ b/clients/web/src/components/elements/EditReplayButton/EditReplayButton.tsx
@@ -0,0 +1,31 @@
+import { ActionIcon, Tooltip } from "@mantine/core";
+import { MdEditNote } from "react-icons/md";
+
+export interface EditReplayButtonProps {
+  /** Open the editor seeded with the owning entry's request params. */
+  onClick: () => void;
+}
+
+/**
+ * "Edit and replay" — the sibling of {@link ReplayButton} that stops for the
+ * params instead of re-sending them verbatim (#2151).
+ *
+ * Same subtle gray icon-button styling as Replay and the pin toggle, so the
+ * three read as one control cluster on a Protocol entry.
+ */
+const EditReplayActionIcon = ActionIcon.withProps({
+  variant: "subtle",
+  color: "gray",
+  size: "md",
+  "aria-label": "Edit and replay",
+});
+
+export function EditReplayButton({ onClick }: EditReplayButtonProps) {
+  return (
+    <Tooltip label="Edit and replay">
+      <EditReplayActionIcon onClick={onClick}>
+        <MdEditNote size={20} />
+      </EditReplayActionIcon>
+    </Tooltip>
+  );
+}
diff --git a/clients/web/src/components/elements/JsonEditor/JsonEditor.stories.tsx b/clients/web/src/components/elements/JsonEditor/JsonEditor.stories.tsx
new file mode 100644
index 0000000000..7b0128e2ad
--- /dev/null
+++ b/clients/web/src/components/elements/JsonEditor/JsonEditor.stories.tsx
@@ -0,0 +1,117 @@
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, userEvent } from "storybook/test";
+import { JsonEditor } from "./JsonEditor";
+
+const meta: Meta<typeof JsonEditor> = {
+  title: "Elements/JsonEditor",
+  component: JsonEditor,
+};
+
+export default meta;
+type Story = StoryObj<typeof JsonEditor>;
+
+const SAMPLE = JSON.stringify(
+  {
+    trace: { id: "abc-123", sampled: true },
+    tags: ["alpha", "beta"],
+    retries: 3,
+  },
+  null,
+  2,
+);
+
+/** The live editor instance, which Ace hangs off its container as `env.editor`. */
+function aceEditor(canvasElement: HTMLElement): {
+  focus(): void;
+  getValue(): string;
+} {
+  const container = canvasElement.querySelector(".ace_editor");
+  const editor = (
+    container as
+      | (HTMLElement & {
+          env?: { editor?: { focus(): void; getValue(): string } };
+        })
+      | null
+  )?.env?.editor;
+  if (!editor) throw new Error("Ace editor not mounted");
+  return editor;
+}
+
+/**
+ * Stateful wrapper: the editor is controlled on text by every real consumer, so
+ * a story without one would not accept a keystroke.
+ *
+ * Ace's *keyboard* behavior — auto-closing a brace, keeping an invalid draft
+ * raw, the worker's gutter annotation — is covered by the `JsonObjectInput`
+ * play functions, which drive this same editor through its object-shaped
+ * wrapper. What is left to pin here is the read-only mode those cannot reach.
+ */
+function Editable({ initial }: { initial: string }) {
+  const [text, setText] = useState(initial);
+  return (
+    <JsonEditor
+      ariaLabel="Payload JSON"
+      label="Payload"
+      value={text}
+      onChange={setText}
+    />
+  );
+}
+
+export const Editing: Story = {
+  render: () => <Editable initial={SAMPLE} />,
+};
+
+export const Empty: Story = {
+  render: () => <Editable initial="" />,
+};
+
+export const WithError: Story = {
+  args: {
+    ariaLabel: "Payload JSON",
+    label: "Payload",
+    value: '{"a":',
+    description: "Sent with every request.",
+    error: "Not valid JSON — changes are not applied",
+    onChange: () => {},
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    ariaLabel: "Payload JSON",
+    label: "Payload",
+    value: SAMPLE,
+    disabled: true,
+    onChange: () => {},
+  },
+};
+
+/**
+ * Display mode — what every read-only JSON payload in the app renders as
+ * (#2151). It keeps the folding and the line numbers a large `tools/call`
+ * result gains from, and takes no input.
+ *
+ * The keystroke assertion is the point: a read-only Ace editor is still
+ * focusable and still owns a hidden textarea, so "does not edit" is a real
+ * behavior to pin rather than a property of the markup.
+ */
+export const ReadOnly: Story = {
+  args: {
+    ariaLabel: "JSON content",
+    value: SAMPLE,
+    readOnly: true,
+  },
+  play: async ({ canvasElement }) => {
+    const editor = aceEditor(canvasElement);
+    editor.focus();
+    await userEvent.keyboard("x");
+    await expect(editor.getValue()).toBe(SAMPLE);
+    // The caret is hidden too — a blinking cursor in a box that swallows every
+    // keystroke reads as a broken field.
+    await expect(
+      canvasElement.querySelector(".json-editor-readonly"),
+    ).not.toBeNull();
+  },
+};
diff --git a/clients/web/src/components/elements/JsonEditor/JsonEditor.test.tsx b/clients/web/src/components/elements/JsonEditor/JsonEditor.test.tsx
new file mode 100644
index 0000000000..a8824f0213
--- /dev/null
+++ b/clients/web/src/components/elements/JsonEditor/JsonEditor.test.tsx
@@ -0,0 +1,190 @@
+import { useState } from "react";
+import { describe, it, expect, vi } from "vitest";
+import { screen } from "@testing-library/react";
+import { renderWithMantine } from "../../../test/renderWithMantine";
+import { aceLabel, getAceText, setAceText } from "../../../test/aceEditor";
+import { JsonEditor } from "./JsonEditor";
+
+const LABEL = "Payload JSON";
+
+/** Controlled on text, which is the contract every consumer uses. */
+function Harness({
+  initial,
+  onChange,
+}: {
+  initial: string;
+  onChange?: (text: string) => void;
+}) {
+  const [text, setText] = useState(initial);
+  return (
+    <JsonEditor
+      ariaLabel={LABEL}
+      value={text}
+      onChange={(next) => {
+        setText(next);
+        onChange?.(next);
+      }}
+    />
+  );
+}
+
+describe("JsonEditor", () => {
+  it("names the editor for assistive tech", () => {
+    renderWithMantine(<Harness initial="" />);
+    // Ace composes "<label>, Cursor at row N", so the match is by substring —
+    // the position readout is Ace's, the name is ours.
+    expect(screen.getByLabelText(aceLabel(LABEL))).toBeInTheDocument();
+  });
+
+  it("shows the text it is given, verbatim", () => {
+    // Braces, not a bare JSX string: a JSX string attribute does not process
+    // escapes, so `'…\n…'` written inline would be a literal backslash-n.
+    renderWithMantine(<Harness initial={'{\n  "a": 1\n}'} />);
+    expect(getAceText()).toBe('{\n  "a": 1\n}');
+  });
+
+  it("reports the settled text of an edit", async () => {
+    const onChange = vi.fn();
+    renderWithMantine(<Harness initial="" onChange={onChange} />);
+    await setAceText('{"a":1}');
+    expect(onChange).toHaveBeenLastCalledWith('{"a":1}');
+  });
+
+  // Ace fires a *remove* then an *insert* for a replace. Reporting the first
+  // would tell the consumer the document is empty, which for `JsonObjectInput`
+  // means `{}` — the user's saved metadata, wiped a keystroke before the
+  // replacement lands.
+  it("reports a replace once, not as an empty document first", async () => {
+    const onChange = vi.fn();
+    renderWithMantine(<Harness initial='{"keep":1}' onChange={onChange} />);
+    await setAceText('{"next":2}');
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith('{"next":2}');
+  });
+
+  it("uses Ace's dark theme under a dark color scheme", () => {
+    renderWithMantine(<Harness initial="" />, { colorScheme: "dark" });
+    // `ace-github-dark`, hyphenated — Ace's cssClass, not the module name
+    // (`theme-github_dark`). The App.css gutter-contrast override keys off this
+    // same class, so getting it wrong silently drops the fix in dark mode.
+    expect(document.querySelector(".ace-github-dark")).not.toBeNull();
+    expect(document.querySelector(".ace-github")).toBeNull();
+  });
+
+  it("uses Ace's light theme under a light color scheme", () => {
+    renderWithMantine(<Harness initial="" />, { colorScheme: "light" });
+    expect(document.querySelector(".ace-github")).not.toBeNull();
+    expect(document.querySelector(".ace-github_dark")).toBeNull();
+  });
+
+  describe("wrapper wiring", () => {
+    it("associates the label, description and error with the editor", () => {
+      renderWithMantine(
+        <JsonEditor
+          ariaLabel={LABEL}
+          value=""
+          onChange={vi.fn()}
+          label="Metadata"
+          description="Sent with every request."
+          error="Not valid JSON"
+        />,
+      );
+      const input = screen.getByLabelText(aceLabel(LABEL));
+      expect(input).toHaveAttribute("aria-invalid", "true");
+      const describedBy = input.getAttribute("aria-describedby")?.split(" ");
+      expect(describedBy).toHaveLength(2);
+      // Both nodes exist and are the ones named — a description that is never
+      // announced, or an error pointing at nothing, is the failure mode here.
+      for (const id of describedBy ?? []) {
+        expect(document.getElementById(id)).toBeInTheDocument();
+      }
+      expect(screen.getByText("Not valid JSON")).toBeInTheDocument();
+    });
+
+    it("drops the error wiring once the text is valid again", () => {
+      const { rerender } = renderWithMantine(
+        <JsonEditor
+          ariaLabel={LABEL}
+          value=""
+          onChange={vi.fn()}
+          error="Not valid JSON"
+        />,
+      );
+      rerender(<JsonEditor ariaLabel={LABEL} value="" onChange={vi.fn()} />);
+      const input = screen.getByLabelText(aceLabel(LABEL));
+      expect(input).not.toHaveAttribute("aria-invalid");
+      expect(input).not.toHaveAttribute("aria-describedby");
+    });
+  });
+
+  describe("read-only", () => {
+    it("is read-only when no change handler is supplied", () => {
+      renderWithMantine(<JsonEditor ariaLabel={LABEL} value='{"a":1}' />);
+      expect(getAceText()).toBe('{"a":1}');
+      expect(document.querySelector(".json-editor-readonly")).not.toBeNull();
+    });
+
+    it("is read-only when asked, even with a handler", () => {
+      renderWithMantine(
+        <JsonEditor
+          ariaLabel={LABEL}
+          value='{"a":1}'
+          onChange={vi.fn()}
+          readOnly
+        />,
+      );
+      expect(document.querySelector(".json-editor-readonly")).not.toBeNull();
+    });
+
+    it("is read-only and dimmed when disabled", () => {
+      const { container } = renderWithMantine(
+        <JsonEditor
+          ariaLabel={LABEL}
+          value='{"a":1}'
+          onChange={vi.fn()}
+          disabled
+        />,
+      );
+      expect(document.querySelector(".json-editor-readonly")).not.toBeNull();
+      // The only affordance a pointer user gets, since Ace has no disabled
+      // state of its own.
+      expect(container.querySelector('[style*="opacity: 0.6"]')).not.toBeNull();
+    });
+
+    // Read-only is derived state, so both transitions happen to an editor that
+    // is already mounted — and react-ace's `componentDidUpdate` reads
+    // `prevProps.className.trim()` with no guard when the class changes. An
+    // `undefined` on either side of that swap throws, or writes the literal
+    // class name "undefined" onto the element.
+    it("becomes editable when a handler arrives", () => {
+      const { rerender } = renderWithMantine(
+        <JsonEditor ariaLabel={LABEL} value='{"a":1}' />,
+      );
+      expect(document.querySelector(".json-editor-readonly")).not.toBeNull();
+      rerender(
+        <JsonEditor ariaLabel={LABEL} value='{"a":1}' onChange={vi.fn()} />,
+      );
+      expect(document.querySelector(".json-editor-readonly")).toBeNull();
+      expect(document.querySelector(".undefined")).toBeNull();
+    });
+
+    // The direction a tool form takes when a call goes in flight: the panel
+    // disables the whole form, so an editable editor becomes read-only in
+    // place. This threw before the class was made unconditionally a string.
+    it("becomes read-only when the form is disabled mid-edit", () => {
+      const { rerender } = renderWithMantine(
+        <JsonEditor ariaLabel={LABEL} value='{"a":1}' onChange={vi.fn()} />,
+      );
+      expect(document.querySelector(".json-editor-readonly")).toBeNull();
+      rerender(
+        <JsonEditor
+          ariaLabel={LABEL}
+          value='{"a":1}'
+          onChange={vi.fn()}
+          disabled
+        />,
+      );
+      expect(document.querySelector(".json-editor-readonly")).not.toBeNull();
+    });
+  });
+});
diff --git a/clients/web/src/components/elements/JsonEditor/JsonEditor.tsx b/clients/web/src/components/elements/JsonEditor/JsonEditor.tsx
new file mode 100644
index 0000000000..469e8600f1
--- /dev/null
+++ b/clients/web/src/components/elements/JsonEditor/JsonEditor.tsx
@@ -0,0 +1,263 @@
+import { useEffect, useId, useRef } from "react";
+import type { ReactNode } from "react";
+import { Input, useComputedColorScheme } from "@mantine/core";
+import type { Ace } from "ace-builds";
+import AceEditor from "react-ace";
+import ace from "ace-builds/src-noconflict/ace";
+import "ace-builds/src-noconflict/mode-json";
+import "ace-builds/src-noconflict/theme-github";
+import "ace-builds/src-noconflict/theme-github_dark";
+// `?url` so Vite emits the worker as its own asset and hands back a real URL.
+// Without it Ace fetches `worker-json.js` from a path that does not exist in a
+// bundled app, silently loses its annotations, and logs a fetch error.
+import jsonWorkerUrl from "ace-builds/src-noconflict/worker-json.js?url";
+
+// Module scope: registering the worker URL is global to Ace and idempotent, so
+// it must not be repeated per mount.
+ace.config.setModuleUrl("ace/mode/json_worker", jsonWorkerUrl);
+
+export interface JsonEditorProps {
+  /**
+   * The text the editor displays. This is a **text** contract, not a JSON one:
+   * the editor never parses, so a caller holding a value keeps its own draft
+   * text and decides for itself what an unparseable draft means.
+   */
+  value: string;
+  /**
+   * Settled text after an edit. Omitted for a read-only editor.
+   *
+   * Called once per edit, not once per Ace change event — see the coalescing
+   * note on `handleChange`.
+   */
+  onChange?: (text: string) => void;
+  /**
+   * Display only: no caret, no editing, and no JSON worker (its annotations
+   * describe a document the user cannot fix). Implied when `onChange` is
+   * omitted.
+   */
+  readOnly?: boolean;
+  /**
+   * Accessible name for the editor's text input. Ace labels its hidden
+   * textarea "Cursor at row N" by default, which is a position readout rather
+   * than a name — so this is what makes the control identifiable to a screen
+   * reader, and what `getByLabelText` finds in a test.
+   */
+  ariaLabel: string;
+  label?: ReactNode;
+  description?: ReactNode;
+  /** Rendered by the wrapper and referenced from the editor's `aria-describedby`. */
+  error?: ReactNode;
+  withAsterisk?: boolean;
+  /**
+   * Non-editable *and* visibly inert, for a form whose whole surface is
+   * disabled. Ace has no disabled state of its own, so this is read-only plus
+   * a dimmed wrapper.
+   */
+  disabled?: boolean;
+  /** Rows shown before the editor grows; it autosizes between these bounds. */
+  minLines?: number;
+  maxLines?: number;
+}
+
+/**
+ * The Ace-backed JSON editor every JSON-typing and JSON-displaying surface in
+ * the web client renders (#2151).
+ *
+ * Ace rather than a plain textarea because hand-writing JSON in a bare box is
+ * the actual pain: Ace closes a brace when you open one, folds a nested
+ * payload, numbers its lines, and — via its JSON worker — marks the offending
+ * line in the gutter instead of reporting one message for the whole document.
+ * Read-only it keeps the folding and the line numbers, which is what a large
+ * response payload gains over a preformatted block.
+ *
+ * Deliberately **text in, text out**. The two editing contracts above it want
+ * different things from an unparseable draft — `JsonObjectInput` keeps the last
+ * valid object and says nothing to its parent, `SchemaJsonField` reports
+ * `undefined` and blocks submission — and neither can be expressed by a
+ * component that decides what a draft means. So parsing, and the draft/value
+ * split that goes with it, belongs to each caller; only the editing surface is
+ * shared.
+ */
+export function JsonEditor({
+  value,
+  onChange,
+  readOnly,
+  ariaLabel,
+  label,
+  description,
+  error,
+  withAsterisk,
+  disabled = false,
+  minLines = 6,
+  maxLines = 24,
+}: JsonEditorProps) {
+  // `getInitialValueInEffect: false` so the first render already has the real
+  // scheme; otherwise the editor mounts light and repaints, which is visible.
+  const colorScheme = useComputedColorScheme("light", {
+    getInitialValueInEffect: false,
+  });
+
+  // Text from the most recent change event in the current tick, and whether a
+  // flush is already queued to consume it. Two refs rather than one nullable
+  // one so the flush reads a plain `string` — folding them together would add
+  // a null check that nothing can ever satisfy. See `handleChange`.
+  const pendingTextRef = useRef("");
+  const flushScheduledRef = useRef(false);
+  // Read through a ref so the coalescing flush always calls the current
+  // handler, without the handler's identity being part of any dependency list.
+  const onChangeRef = useRef(onChange);
+  useEffect(() => {
+    onChangeRef.current = onChange;
+  });
+
+  /**
+   * Coalesce the change events Ace fires within one edit, and act on the last.
+   *
+   * A replace — select-all-and-retype, or a paste over a selection — is a
+   * *remove* followed by an *insert*, and Ace fires a change event for each.
+   * Acting on the first would report the momentarily-empty document as the
+   * user's answer: for `JsonObjectInput` that is `{}`, which overwrites the
+   * metadata they had just selected; for a raw-JSON form it is a cleared
+   * arguments object. If the replacement text then failed to parse, that empty
+   * value is what they would be left with.
+   *
+   * A microtask is enough because both events are dispatched synchronously
+   * inside the same edit, so the flush sees only the settled text.
+   */
+  const handleChange = (text: string) => {
+    pendingTextRef.current = text;
+    if (flushScheduledRef.current) return;
+    flushScheduledRef.current = true;
+    queueMicrotask(() => {
+      flushScheduledRef.current = false;
+      onChangeRef.current?.(pendingTextRef.current);
+    });
+  };
+
+  const wrapperId = useId();
+  const editorRef = useRef<Ace.Editor | null>(null);
+  const isReadOnly = readOnly === true || disabled || onChange === undefined;
+  const hasError = error !== undefined && error !== null && error !== false;
+
+  // `Input.Wrapper` labels and describes a Mantine input through context. Ace
+  // is not one — it renders its own DOM — so the wrapper's label and error node
+  // exist but point at nothing, leaving the control unassociated with the error
+  // a screen reader needs and its visible label inert on click.
+  //
+  // A genuine external-system sync, so an effect rather than `useValueChange`:
+  // it writes to a DOM node React does not own. Giving the textarea the
+  // wrapper's own id is what makes the `<label for>` focus the editor; the
+  // error wiring follows Mantine's `${id}-error` naming.
+  useEffect(() => {
+    const element = editorRef.current?.textInput.getElement();
+    /* v8 ignore next -- the ref is set in `onLoad`, which react-ace calls
+       synchronously on mount, so this effect always sees an element. */
+    if (!element) return;
+    element.id = wrapperId;
+
+    // Both the description and the error are rendered by the wrapper and both
+    // describe this control, so both ids belong here — a supplied description
+    // is otherwise never announced, and it must not be dropped just because the
+    // draft went invalid. Mantine renders each only when its prop is set, so
+    // referencing an absent one would point at nothing.
+    const describedBy = [
+      description === undefined ? null : `${wrapperId}-description`,
+      hasError ? `${wrapperId}-error` : null,
+    ].filter((id) => id !== null);
+
+    if (describedBy.length > 0) {
+      element.setAttribute("aria-describedby", describedBy.join(" "));
+    } else {
+      element.removeAttribute("aria-describedby");
+    }
+
+    if (hasError) {
+      element.setAttribute("aria-invalid", "true");
+    } else {
+      element.removeAttribute("aria-invalid");
+    }
+  }, [wrapperId, hasError, description]);
+
+  return (
+    <Input.Wrapper
+      id={wrapperId}
+      label={label}
+      description={description}
+      error={error}
+      withAsterisk={withAsterisk}
+      // Ace has no disabled state, so the only signal a pointer user gets is
+      // that the surface is dimmed — the same affordance a disabled Mantine
+      // input carries.
+      opacity={disabled ? 0.6 : undefined}
+      w="100%"
+    >
+      <AceEditor
+        mode="json"
+        theme={colorScheme === "dark" ? "github_dark" : "github"}
+        // react-ace uses `name` as the editor container's DOM id, so a fixed
+        // value would collide the moment two of these render — and it must also
+        // differ from the id given to the textarea below, which is the one the
+        // wrapper's `<label for>` points at.
+        name={`${wrapperId}-editor`}
+        // A class, not a style: Ace renders its own DOM and paints a caret even
+        // when read-only, which reads as an editable field whose keystrokes are
+        // being swallowed. Hiding it needs a selector into that DOM, which is
+        // the same reason the gutter override in App.css exists.
+        //
+        // `""` rather than `undefined` for the off case: react-ace's
+        // `componentDidUpdate` reads `prevProps.className.trim()` whenever the
+        // class changes, with no guard — so going *to* a class from `undefined`
+        // throws, and going *from* one to `undefined` writes the literal class
+        // name "undefined" onto the element. Both are reachable here, because
+        // read-only is derived state: a tool form disables itself while a call
+        // is in flight, which flips this on an editor already mounted.
+        className={isReadOnly ? "json-editor-readonly" : ""}
+        value={value}
+        onChange={handleChange}
+        readOnly={isReadOnly}
+        width="100%"
+        minLines={minLines}
+        maxLines={maxLines}
+        tabSize={2}
+        showPrintMargin={false}
+        // A read-only editor is a rendering of someone else's payload, so it
+        // carries none of the caret furniture an editable one does.
+        highlightActiveLine={!isReadOnly}
+        editorProps={{ $blockScrolling: Infinity }}
+        onLoad={(editor) => {
+          editorRef.current = editor;
+          // `textInputAriaLabel` alone is not enough: Ace composes the hidden
+          // textarea's label as "<label>, Cursor at row N" inside
+          // `TextInput.setAriaLabel`, and only recomputes it when the cursor
+          // moves — so an option applied at mount does not reach the DOM until
+          // the user clicks into the editor. Until then the control's only
+          // accessible name is the position readout, which names nothing.
+          // Setting it here and recomputing once is what makes the editor
+          // identifiable from first paint.
+          editor.setOption("textInputAriaLabel", ariaLabel);
+          editor.textInput.setAriaLabel();
+        }}
+        setOptions={{
+          // The JSON worker is what puts a marker on the offending line rather
+          // than one message for the whole document. Pointless on a read-only
+          // document — the reader cannot act on what it flags — and actively
+          // misleading where the text is a *fragment* rendered for display.
+          useWorker: !isReadOnly,
+          // Closes a brace/bracket/quote when you open one, and skips over the
+          // closing one you then type. On by default; named because it is half
+          // of why this component exists.
+          behavioursEnabled: true,
+          // Roving-tabindex arrow-key navigation plus an Esc-to-exit-trap, so
+          // the editor does not swallow Tab for keyboard users.
+          enableKeyboardAccessibility: true,
+          textInputAriaLabel: ariaLabel,
+          showFoldWidgets: true,
+          displayIndentGuides: true,
+          useSoftTabs: true,
+          scrollPastEnd: false,
+          highlightGutterLine: !isReadOnly,
+        }}
+      />
+    </Input.Wrapper>
+  );
+}
diff --git a/clients/web/src/components/elements/JsonObjectInput/JsonObjectInput.tsx b/clients/web/src/components/elements/JsonObjectInput/JsonObjectInput.tsx
index 9c5842f99c..4218e71b41 100644
--- a/clients/web/src/components/elements/JsonObjectInput/JsonObjectInput.tsx
+++ b/clients/web/src/components/elements/JsonObjectInput/JsonObjectInput.tsx
@@ -1,22 +1,8 @@
-import { useEffect, useId, useRef, useState } from "react";
-import { Input, useComputedColorScheme } from "@mantine/core";
-import type { Ace } from "ace-builds";
-import AceEditor from "react-ace";
-import ace from "ace-builds/src-noconflict/ace";
-import "ace-builds/src-noconflict/mode-json";
-import "ace-builds/src-noconflict/theme-github";
-import "ace-builds/src-noconflict/theme-github_dark";
-// `?url` so Vite emits the worker as its own asset and hands back a real URL.
-// Without it Ace fetches `worker-json.js` from a path that does not exist in a
-// bundled app, silently loses its annotations, and logs a fetch error.
-import jsonWorkerUrl from "ace-builds/src-noconflict/worker-json.js?url";
+import { useState } from "react";
 import type { StrictJsonObject } from "@inspector/core/json/jsonUtils.js";
 import { useValueChange } from "../../../hooks/useValueChange";
 import { parseJsonObjectDraft } from "../../../utils/jsonObjectDraft";
-
-// Module scope: registering the worker URL is global to Ace and idempotent, so
-// it must not be repeated per mount.
-ace.config.setModuleUrl("ace/mode/json_worker", jsonWorkerUrl);
+import { JsonEditor } from "../JsonEditor/JsonEditor";
 
 /** Two-space canonical form — the same shape the catalog file is written in. */
 function serialize(value: StrictJsonObject): string {
@@ -28,12 +14,7 @@ export interface JsonObjectInputProps {
   onChange: (value: StrictJsonObject) => void;
   label?: string;
   description?: string;
-  /**
-   * Accessible name for the editor's text input. Ace labels its hidden
-   * textarea "Cursor at row N" by default, which is a position readout rather
-   * than a name — so this is what makes the control identifiable to a screen
-   * reader, and what `getByLabelText` finds in a test.
-   */
+  /** See {@link JsonEditor}'s prop of the same name — Ace names its own input. */
   ariaLabel: string;
   /** Rows shown before the editor grows; it autosizes between these bounds. */
   minLines?: number;
@@ -50,10 +31,9 @@ export interface JsonObjectInputProps {
  * `_meta` value to a string, so a `{ key, value }` row editor cannot express
  * what the protocol allows.
  *
- * Built on Ace rather than a plain textarea because hand-writing JSON in a bare
- * box is the actual pain: Ace closes a brace when you open one, folds nested
- * objects, and — via its JSON worker — marks the offending line in the gutter
- * instead of reporting one message for the whole document.
+ * The editing surface is {@link JsonEditor}, shared with every other JSON
+ * surface in the client (#2151). What lives here is the *contract*: an object
+ * in, an object out, and a decision about what an unparseable draft means.
  *
  * The text the user is typing is the source of truth for what is *displayed*;
  * the parent only ever sees a parsed object. That split is what makes the box
@@ -75,8 +55,8 @@ export function JsonObjectInput({
   label,
   description,
   ariaLabel,
-  minLines = 6,
-  maxLines = 24,
+  minLines,
+  maxLines,
 }: JsonObjectInputProps) {
   const [draft, setDraft] = useState(() => serialize(value));
   // The canonical JSON of the last value this component emitted.
@@ -85,63 +65,22 @@ export function JsonObjectInput({
   // echoing back what we just sent it, and the draft alone cannot: while the
   // text is invalid it parses to nothing, so every parent change would look
   // external and overwrite what is being typed.
-  //
-  // That is not hypothetical. Ace's `setValue` — which is what a select-all
-  // paste and any programmatic replace go through — fires *two* change events,
-  // a remove then an insert. The remove leaves an empty document, which is a
-  // valid `{}` and gets emitted; the insert then leaves invalid text. Comparing
-  // against the draft, the `{}` echo reads as an external reset and wipes the
-  // pasted text a keystroke after it lands.
   const [echoed, setEchoed] = useState(() => serialize(value));
-  // `getInitialValueInEffect: false` so the first render already has the real
-  // scheme; otherwise the editor mounts light and repaints, which is visible.
-  const colorScheme = useComputedColorScheme("light", {
-    getInitialValueInEffect: false,
-  });
-
-  // Re-sync only on a value this component did not produce, so an external
-  // reset (switching servers, a reloaded catalog) reaches the editor while an
-  // in-progress edit is left alone. Compared through canonical JSON because the
-  // parent hands back a fresh object each time.
-  // Text from the most recent change event in the current tick, and whether a
-  // flush is already queued to consume it. Two refs rather than one nullable
-  // one so the flush reads a plain `string` — folding them together would add
-  // a null check that nothing can ever satisfy. See `handleChange`.
-  const pendingTextRef = useRef("");
-  const flushScheduledRef = useRef(false);
 
-  /**
-   * Coalesce the change events Ace fires within one edit, and act on the last.
-   *
-   * A replace — select-all-and-retype, or a paste over a selection — is a
-   * *remove* followed by an *insert*, and Ace fires a change event for each.
-   * Acting on the first would read the momentarily-empty document as the user
-   * clearing the field, emit `{}` to the parent, and so wipe their saved
-   * metadata the instant they selected it. If the replacement text then failed
-   * to parse, `{}` is what they would be left with.
-   *
-   * A microtask is enough because both events are dispatched synchronously
-   * inside the same edit, so the flush sees only the settled text.
-   */
   const handleChange = (text: string) => {
-    pendingTextRef.current = text;
-    if (flushScheduledRef.current) return;
-    flushScheduledRef.current = true;
-    queueMicrotask(() => {
-      flushScheduledRef.current = false;
-      const settled = pendingTextRef.current;
-      setDraft(settled);
-      const result = parseJsonObjectDraft(settled);
-      if (!result.ok) return;
-      setEchoed(serialize(result.value));
-      onChange(result.value);
-    });
+    setDraft(text);
+    const result = parseJsonObjectDraft(text);
+    if (!result.ok) return;
+    setEchoed(serialize(result.value));
+    onChange(result.value);
   };
 
-  const wrapperId = useId();
-  const editorRef = useRef<Ace.Editor | null>(null);
-
   const parsed = parseJsonObjectDraft(draft);
+
+  // Re-sync only on a value this component did not produce, so an external
+  // reset (switching servers, a reloaded catalog) reaches the editor while an
+  // in-progress edit is left alone. Compared through canonical JSON because the
+  // parent hands back a fresh object each time.
   useValueChange(serialize(value), (next) => {
     if (next === echoed) return;
     setDraft(next);
@@ -152,100 +91,16 @@ export function JsonObjectInput({
     setEchoed(next);
   });
 
-  // `Input.Wrapper` labels and describes a Mantine input through context. Ace
-  // is not one — it renders its own DOM — so the wrapper's label and error node
-  // exist but point at nothing, leaving the control unassociated with the error
-  // a screen reader needs and its visible label inert on click.
-  //
-  // A genuine external-system sync, so an effect rather than `useValueChange`:
-  // it writes to a DOM node React does not own. Giving the textarea the
-  // wrapper's own id is what makes the `<label for>` focus the editor; the
-  // error wiring follows Mantine's `${id}-error` naming.
-  useEffect(() => {
-    const element = editorRef.current?.textInput.getElement();
-    /* v8 ignore next -- the ref is set in `onLoad`, which react-ace calls
-       synchronously on mount, so this effect always sees an element. */
-    if (!element) return;
-    element.id = wrapperId;
-
-    // Both the description and the error are rendered by the wrapper and both
-    // describe this control, so both ids belong here — a supplied description
-    // is otherwise never announced, and it must not be dropped just because the
-    // draft went invalid. Mantine renders each only when its prop is set, so
-    // referencing an absent one would point at nothing.
-    const describedBy = [
-      description === undefined ? null : `${wrapperId}-description`,
-      parsed.ok ? null : `${wrapperId}-error`,
-    ].filter((id) => id !== null);
-
-    if (describedBy.length > 0) {
-      element.setAttribute("aria-describedby", describedBy.join(" "));
-    } else {
-      element.removeAttribute("aria-describedby");
-    }
-
-    if (parsed.ok) {
-      element.removeAttribute("aria-invalid");
-    } else {
-      element.setAttribute("aria-invalid", "true");
-    }
-  }, [wrapperId, parsed.ok, description]);
-
   return (
-    <Input.Wrapper
-      id={wrapperId}
+    <JsonEditor
+      value={draft}
+      onChange={handleChange}
       label={label}
       description={description}
+      ariaLabel={ariaLabel}
       error={parsed.ok ? undefined : parsed.error}
-      w="100%"
-    >
-      <AceEditor
-        mode="json"
-        theme={colorScheme === "dark" ? "github_dark" : "github"}
-        // react-ace uses `name` as the editor container's DOM id, so a fixed
-        // value would collide the moment two of these render — and it must also
-        // differ from the id given to the textarea below, which is the one the
-        // wrapper's `<label for>` points at.
-        name={`${wrapperId}-editor`}
-        value={draft}
-        onChange={handleChange}
-        width="100%"
-        minLines={minLines}
-        maxLines={maxLines}
-        tabSize={2}
-        showPrintMargin={false}
-        editorProps={{ $blockScrolling: Infinity }}
-        onLoad={(editor) => {
-          editorRef.current = editor;
-          // `textInputAriaLabel` alone is not enough: Ace composes the hidden
-          // textarea's label as "<label>, Cursor at row N" inside
-          // `TextInput.setAriaLabel`, and only recomputes it when the cursor
-          // moves — so an option applied at mount does not reach the DOM until
-          // the user clicks into the editor. Until then the control's only
-          // accessible name is the position readout, which names nothing.
-          // Setting it here and recomputing once is what makes the editor
-          // identifiable from first paint.
-          editor.setOption("textInputAriaLabel", ariaLabel);
-          editor.textInput.setAriaLabel();
-        }}
-        setOptions={{
-          // The JSON worker is what puts a marker on the offending line rather
-          // than one message for the whole document.
-          useWorker: true,
-          // Closes a brace/bracket/quote when you open one, and skips over the
-          // closing one you then type. On by default; named because it is half
-          // of why this component exists.
-          behavioursEnabled: true,
-          // Roving-tabindex arrow-key navigation plus an Esc-to-exit-trap, so
-          // the editor does not swallow Tab for keyboard users.
-          enableKeyboardAccessibility: true,
-          textInputAriaLabel: ariaLabel,
-          showFoldWidgets: true,
-          displayIndentGuides: true,
-          useSoftTabs: true,
-          scrollPastEnd: false,
-        }}
-      />
-    </Input.Wrapper>
+      minLines={minLines}
+      maxLines={maxLines}
+    />
   );
 }
diff --git a/clients/web/src/components/groups/AppDetailPanel/AppDetailPanel.test.tsx b/clients/web/src/components/groups/AppDetailPanel/AppDetailPanel.test.tsx
index ad14b1c30b..687d2a8157 100644
--- a/clients/web/src/components/groups/AppDetailPanel/AppDetailPanel.test.tsx
+++ b/clients/web/src/components/groups/AppDetailPanel/AppDetailPanel.test.tsx
@@ -2,6 +2,7 @@ import { describe, it, expect, vi } from "vitest";
 import userEvent from "@testing-library/user-event";
 import type { Tool } from "@modelcontextprotocol/client";
 import { renderWithMantine, screen } from "../../../test/renderWithMantine";
+import { setAceTextByLabel } from "../../../test/aceEditor";
 import { AppDetailPanel } from "./AppDetailPanel";
 
 const noFieldsTool: Tool = {
@@ -179,7 +180,6 @@ describe("AppDetailPanel", () => {
   // `undefined` — so an optional argument was dropped from the call with no
   // gate. The form reports draft validity for this reason.
   it("disables Open App while a field holds text it cannot send", async () => {
-    const user = userEvent.setup();
     const jsonFieldTool: Tool = {
       name: "chart_app",
       title: "Chart App",
@@ -192,11 +192,10 @@ describe("AppDetailPanel", () => {
     const openApp = screen.getByRole("button", { name: /open app/i });
     expect(openApp).not.toBeDisabled();
 
-    const jsonInput = screen.getByLabelText(/Series/);
-    await user.type(jsonInput, "x");
+    await setAceTextByLabel(/Series/, "x");
     expect(openApp).toBeDisabled();
 
-    await user.clear(jsonInput);
+    await setAceTextByLabel(/Series/, "");
     expect(openApp).not.toBeDisabled();
   });
 });
diff --git a/clients/web/src/components/groups/EditReplayModal/EditReplayModal.stories.tsx b/clients/web/src/components/groups/EditReplayModal/EditReplayModal.stories.tsx
new file mode 100644
index 0000000000..46a19f4a47
--- /dev/null
+++ b/clients/web/src/components/groups/EditReplayModal/EditReplayModal.stories.tsx
@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, fn, within } from "storybook/test";
+import { EditReplayModal } from "./EditReplayModal";
+
+const meta: Meta<typeof EditReplayModal> = {
+  title: "Groups/EditReplayModal",
+  component: EditReplayModal,
+  args: {
+    opened: true,
+    method: "tools/call",
+    params: { name: "get_weather", arguments: { city: "Boston" } },
+    onSend: fn(),
+    onClose: fn(),
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof EditReplayModal>;
+
+export const Default: Story = {};
+
+/** A request that carried no params — `tools/list` and friends. */
+export const NoParams: Story = {
+  args: { method: "tools/list", params: undefined },
+};
+
+/**
+ * Ace's own editing behavior is covered by the `JsonObjectInput` play
+ * functions; what this pins is the gate on top of it — invalid text must not be
+ * sendable, because unlike the metadata editor this modal commits.
+ */
+export const InvalidDraftBlocksSend: Story = {
+  play: async ({ canvasElement, userEvent }) => {
+    const canvas = within(canvasElement);
+    // Modals render in a portal, so the body is the canvas here.
+    const body = within(document.body);
+    const editor = document.querySelector(".ace_editor") as HTMLElement & {
+      env: { editor: { focus(): void; selectAll(): void } };
+    };
+    editor.env.editor.focus();
+    editor.env.editor.selectAll();
+    await userEvent.keyboard("{Backspace}");
+    // A bare number: valid JSON, wrong shape for JSON-RPC `params`.
+    await userEvent.keyboard("42");
+
+    await expect(await body.findByText(/must be a JSON object/i)).toBeVisible();
+    await expect(body.getByRole("button", { name: "Send" })).toBeDisabled();
+    // The canvas itself holds no controls — everything is portalled.
+    await expect(canvas.queryByRole("button", { name: "Send" })).toBeNull();
+  },
+};
diff --git a/clients/web/src/components/groups/EditReplayModal/EditReplayModal.test.tsx b/clients/web/src/components/groups/EditReplayModal/EditReplayModal.test.tsx
new file mode 100644
index 0000000000..6f5d2eafe3
--- /dev/null
+++ b/clients/web/src/components/groups/EditReplayModal/EditReplayModal.test.tsx
@@ -0,0 +1,121 @@
+import { describe, it, expect, vi } from "vitest";
+import userEvent from "@testing-library/user-event";
+import { renderWithMantine, screen } from "../../../test/renderWithMantine";
+import { getAceText, setAceText } from "../../../test/aceEditor";
+import { EditReplayModal } from "./EditReplayModal";
+
+const baseProps = {
+  opened: true,
+  method: "tools/call",
+  onSend: vi.fn(),
+  onClose: vi.fn(),
+};
+
+describe("EditReplayModal", () => {
+  it("renders nothing while closed", () => {
+    renderWithMantine(<EditReplayModal {...baseProps} opened={false} />);
+    expect(screen.queryByRole("button", { name: "Send" })).toBeNull();
+  });
+
+  it("seeds the editor with the entry's params and names the method", () => {
+    renderWithMantine(
+      <EditReplayModal {...baseProps} params={{ name: "echo" }} />,
+    );
+    expect(getAceText()).toBe('{\n  "name": "echo"\n}');
+    expect(screen.getByText("tools/call")).toBeInTheDocument();
+  });
+
+  it("opens empty for a request that carried no params", () => {
+    renderWithMantine(<EditReplayModal {...baseProps} method="tools/list" />);
+    expect(getAceText()).toBe("");
+    expect(screen.getByRole("button", { name: "Send" })).not.toBeDisabled();
+  });
+
+  it("sends the edited params and closes", async () => {
+    const user = userEvent.setup();
+    const onSend = vi.fn();
+    const onClose = vi.fn();
+    renderWithMantine(
+      <EditReplayModal
+        {...baseProps}
+        params={{ name: "echo" }}
+        onSend={onSend}
+        onClose={onClose}
+      />,
+    );
+    await setAceText('{"name":"add","arguments":{"a":1}}');
+    await user.click(screen.getByRole("button", { name: "Send" }));
+    expect(onSend).toHaveBeenCalledWith({
+      name: "add",
+      arguments: { a: 1 },
+    });
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  // `null`, not `undefined`: the caller has to be able to tell "the user
+  // cleared the editor" from "the user did not edit anything" (#2151).
+  it("reports an emptied editor as no params at all", async () => {
+    const user = userEvent.setup();
+    const onSend = vi.fn();
+    renderWithMantine(
+      <EditReplayModal
+        {...baseProps}
+        params={{ name: "echo" }}
+        onSend={onSend}
+      />,
+    );
+    await setAceText("");
+    await user.click(screen.getByRole("button", { name: "Send" }));
+    expect(onSend).toHaveBeenCalledWith(null);
+  });
+
+  // Unlike the metadata editor, this modal has a commit gesture to gate — so
+  // invalid text must disable it rather than silently sending the last value
+  // that parsed.
+  it("disables Send while the draft does not parse", async () => {
+    renderWithMantine(
+      <EditReplayModal {...baseProps} params={{ name: "echo" }} />,
+    );
+    await setAceText('{"name":');
+    expect(screen.getByRole("button", { name: "Send" })).toBeDisabled();
+    expect(screen.getByText(/Not valid JSON/)).toBeInTheDocument();
+  });
+
+  it("disables Send for JSON that is not an object", async () => {
+    renderWithMantine(<EditReplayModal {...baseProps} />);
+    await setAceText("42");
+    expect(screen.getByRole("button", { name: "Send" })).toBeDisabled();
+    expect(screen.getByText(/must be a JSON object/i)).toBeInTheDocument();
+  });
+
+  it("closes without sending when cancelled", async () => {
+    const user = userEvent.setup();
+    const onSend = vi.fn();
+    const onClose = vi.fn();
+    renderWithMantine(
+      <EditReplayModal {...baseProps} onSend={onSend} onClose={onClose} />,
+    );
+    await user.click(screen.getByRole("button", { name: "Cancel" }));
+    expect(onClose).toHaveBeenCalledTimes(1);
+    expect(onSend).not.toHaveBeenCalled();
+  });
+
+  // The draft belongs to the sitting the user opened it in. Reopening must show
+  // the entry's params again, not whatever they typed and abandoned last time.
+  it("reseeds from the entry when reopened", async () => {
+    const { rerender } = renderWithMantine(
+      <EditReplayModal {...baseProps} params={{ name: "echo" }} />,
+    );
+    await setAceText('{"name":"abandoned"}');
+
+    rerender(
+      <EditReplayModal
+        {...baseProps}
+        opened={false}
+        params={{ name: "echo" }}
+      />,
+    );
+    rerender(<EditReplayModal {...baseProps} params={{ name: "echo" }} />);
+    expect(getAceText()).toBe('{\n  "name": "echo"\n}');
+  });
+});
diff --git a/clients/web/src/components/groups/EditReplayModal/EditReplayModal.tsx b/clients/web/src/components/groups/EditReplayModal/EditReplayModal.tsx
new file mode 100644
index 0000000000..e047651760
--- /dev/null
+++ b/clients/web/src/components/groups/EditReplayModal/EditReplayModal.tsx
@@ -0,0 +1,133 @@
+import { useState } from "react";
+import { Button, Group, Modal, Stack, Text } from "@mantine/core";
+import { JsonEditor } from "../../elements/JsonEditor/JsonEditor";
+import { isJsonObject } from "../../../utils/jsonObjectDraft";
+
+export interface EditReplayModalProps {
+  opened: boolean;
+  /** The method being replayed, shown so the editor is unambiguous. */
+  method: string;
+  /** The originating entry's params, seeded into the editor. */
+  params?: Record<string, unknown>;
+  /**
+   * Re-issue the request with these params. `null` means "send no params",
+   * which is a request an empty editor can legitimately express — see
+   * {@link ReplayParamsOverride} for why it is not `undefined`.
+   */
+  onSend: (params: Record<string, unknown> | null) => void;
+  onClose: () => void;
+}
+
+const MethodText = Text.withProps({
+  size: "sm",
+  c: "dimmed",
+  ff: "monospace",
+});
+
+const Footer = Group.withProps({ justify: "flex-end", gap: "sm" });
+
+/**
+ * What the editor's text currently means: the params to send, or why they
+ * cannot be sent.
+ *
+ * Empty text is "no params" rather than an error — a `tools/list` replay
+ * genuinely carries none, and an empty editor wearing a red error would read as
+ * broken. A non-object is reported separately from text that is not JSON at
+ * all: JSON-RPC `params` must be a structured value, so `42` is a shape that
+ * cannot be sent however finished it is.
+ */
+function parseParamsDraft(
+  text: string,
+):
+  | { ok: true; value: Record<string, unknown> | null }
+  | { ok: false; error: string } {
+  if (text.trim() === "") return { ok: true, value: null };
+  let parsed: unknown;
+  try {
+    parsed = JSON.parse(text);
+  } catch {
+    return { ok: false, error: "Not valid JSON — this cannot be sent" };
+  }
+  if (!isJsonObject(parsed)) {
+    return { ok: false, error: "Params must be a JSON object (`{ … }`)" };
+  }
+  return { ok: true, value: parsed };
+}
+
+/**
+ * The modal's body, split out so its draft is owned by a component Mantine
+ * unmounts on close — which is what makes reopening start from the entry's
+ * params again rather than from whatever was last typed and abandoned.
+ */
+function EditReplayForm({
+  method,
+  params,
+  onSend,
+  onClose,
+}: Omit<EditReplayModalProps, "opened">) {
+  const [draft, setDraft] = useState(() =>
+    params === undefined ? "" : JSON.stringify(params, null, 2),
+  );
+  const parsed = parseParamsDraft(draft);
+
+  return (
+    <Stack gap="sm">
+      <MethodText>{method}</MethodText>
+      <JsonEditor
+        ariaLabel="Request params"
+        label="Params"
+        value={draft}
+        onChange={setDraft}
+        error={parsed.ok ? undefined : parsed.error}
+        minLines={8}
+        maxLines={24}
+      />
+      <Footer>
+        <Button variant="default" onClick={onClose}>
+          Cancel
+        </Button>
+        <Button
+          // Unlike the metadata editor, this modal *has* a commit gesture to
+          // gate — so invalid text disables Send rather than quietly sending
+          // the last value that parsed. Same reasoning as `SchemaJsonField`.
+          disabled={!parsed.ok}
+          onClick={() => {
+            /* v8 ignore next -- Send is disabled while the draft is invalid */
+            if (!parsed.ok) return;
+            onSend(parsed.value);
+            onClose();
+          }}
+        >
+          Send
+        </Button>
+      </Footer>
+    </Stack>
+  );
+}
+
+/**
+ * Edit a Protocol entry's request params, then replay it (#2151).
+ *
+ * Replay itself is one click and unchanged; this is a second way to *supply*
+ * the params, not a second replay implementation — Send dispatches through the
+ * same `replayProtocolRequest` the plain Replay button does, so the same
+ * method gate and the same "Can't replay" failure toast apply.
+ */
+export function EditReplayModal({
+  opened,
+  method,
+  params,
+  onSend,
+  onClose,
+}: EditReplayModalProps) {
+  return (
+    <Modal opened={opened} onClose={onClose} title="Edit and replay" size="lg">
+      <EditReplayForm
+        method={method}
+        params={params}
+        onSend={onSend}
+        onClose={onClose}
+      />
+    </Modal>
+  );
+}
diff --git a/clients/web/src/components/groups/ExperimentalFeaturesPanel/ExperimentalFeaturesPanel.test.tsx b/clients/web/src/components/groups/ExperimentalFeaturesPanel/ExperimentalFeaturesPanel.test.tsx
index b9b3b8c378..98dd3882b0 100644
--- a/clients/web/src/components/groups/ExperimentalFeaturesPanel/ExperimentalFeaturesPanel.test.tsx
+++ b/clients/web/src/components/groups/ExperimentalFeaturesPanel/ExperimentalFeaturesPanel.test.tsx
@@ -1,6 +1,7 @@
 import { describe, it, expect, vi } from "vitest";
 import userEvent from "@testing-library/user-event";
 import { renderWithMantine, screen } from "../../../test/renderWithMantine";
+import { setAceText } from "../../../test/aceEditor";
 import { ExperimentalFeaturesPanel } from "./ExperimentalFeaturesPanel";
 import type { RequestHistoryItem } from "./ExperimentalFeaturesPanel";
 
@@ -273,8 +274,7 @@ describe("ExperimentalFeaturesPanel", () => {
     expect(onRemoveHeader).toHaveBeenCalledWith(1);
   });
 
-  it("invokes onRequestChange when the request textarea changes", async () => {
-    const user = userEvent.setup();
+  it("invokes onRequestChange when the request editor changes", async () => {
     const onRequestChange = vi.fn();
     renderWithMantine(
       <ExperimentalFeaturesPanel
@@ -283,8 +283,7 @@ describe("ExperimentalFeaturesPanel", () => {
         onRequestChange={onRequestChange}
       />,
     );
-    const textarea = screen.getByLabelText("Request");
-    await user.type(textarea, "x");
+    await setAceText("x");
     expect(onRequestChange).toHaveBeenCalledWith("x");
   });
 
diff --git a/clients/web/src/components/groups/ExperimentalFeaturesPanel/ExperimentalFeaturesPanel.tsx b/clients/web/src/components/groups/ExperimentalFeaturesPanel/ExperimentalFeaturesPanel.tsx
index 270c7aa3c0..a0f8832085 100644
--- a/clients/web/src/components/groups/ExperimentalFeaturesPanel/ExperimentalFeaturesPanel.tsx
+++ b/clients/web/src/components/groups/ExperimentalFeaturesPanel/ExperimentalFeaturesPanel.tsx
@@ -15,6 +15,7 @@ import {
   Title,
 } from "@mantine/core";
 import { ClearButton } from "../../elements/ClearButton/ClearButton";
+import { JsonEditor } from "../../elements/JsonEditor/JsonEditor";
 import type {
   ClientCapabilities,
   JSONRPCErrorResponse,
@@ -107,14 +108,6 @@ const HeaderValueInput = TextInput.withProps({
   rightSectionPointerEvents: "auto",
 });
 
-const RequestTextarea = Textarea.withProps({
-  label: "Request",
-  ff: "monospace",
-  autosize: true,
-  minRows: 6,
-  rightSectionPointerEvents: "auto",
-});
-
 const ResponseTextarea = Textarea.withProps({
   "aria-label": "Response",
   ff: "monospace",
@@ -311,17 +304,25 @@ export function ExperimentalFeaturesPanel({
         <CompactButton onClick={onAddHeader}>+ Add Header</CompactButton>
       </Group>
 
-      <RequestTextarea
+      <JsonEditor
+        label="Request"
+        ariaLabel="Request"
         value={requestDraft}
-        onChange={(e) => onRequestChange(e.currentTarget.value)}
-        rightSection={
-          requestDraft ? (
-            <ClearButton onClick={() => onRequestChange("")} />
-          ) : null
-        }
+        onChange={onRequestChange}
+        minLines={6}
+        maxLines={20}
       />
 
-      <Button onClick={onSendRequest}>Send Request</Button>
+      <Group>
+        <Button onClick={onSendRequest}>Send Request</Button>
+        {/* Beside Send rather than inside the editor: Ace renders its own
+            DOM and has no `rightSection` to hang a control in. */}
+        {requestDraft ? (
+          <Button variant="default" onClick={() => onRequestChange("")}>
+            Clear
+          </Button>
+        ) : null}
+      </Group>
 
       {response && (
         <>
diff --git a/clients/web/src/components/groups/ImportServerJsonPanel/ImportServerJsonPanel.test.tsx b/clients/web/src/components/groups/ImportServerJsonPanel/ImportServerJsonPanel.test.tsx
index f060547ca3..376475b22b 100644
--- a/clients/web/src/components/groups/ImportServerJsonPanel/ImportServerJsonPanel.test.tsx
+++ b/clients/web/src/components/groups/ImportServerJsonPanel/ImportServerJsonPanel.test.tsx
@@ -2,6 +2,7 @@ import { describe, it, expect, vi } from "vitest";
 import userEvent from "@testing-library/user-event";
 import type { InspectorServerJsonDraft } from "@inspector/core/mcp/types.js";
 import { renderWithMantine, screen } from "../../../test/renderWithMantine";
+import { setAceText } from "../../../test/aceEditor";
 import {
   ImportServerJsonPanel,
   type EnvVarInfo,
@@ -48,8 +49,7 @@ describe("ImportServerJsonPanel", () => {
     ).not.toBeInTheDocument();
   });
 
-  it("invokes onJsonChange when typing in the textarea", async () => {
-    const user = userEvent.setup();
+  it("invokes onJsonChange when the JSON editor changes", async () => {
     const onJsonChange = vi.fn();
     renderWithMantine(
       <ImportServerJsonPanel
@@ -60,10 +60,7 @@ describe("ImportServerJsonPanel", () => {
         envVars={[]}
       />,
     );
-    // The first textbox is the JSON textarea
-    const allTextboxes = screen.getAllByRole("textbox");
-    // userEvent.type treats `{` as a key-descriptor delimiter; escape with `{{`
-    await user.type(allTextboxes[0], "x");
+    await setAceText("x");
     expect(onJsonChange).toHaveBeenCalledWith("x");
   });
 
diff --git a/clients/web/src/components/groups/ImportServerJsonPanel/ImportServerJsonPanel.tsx b/clients/web/src/components/groups/ImportServerJsonPanel/ImportServerJsonPanel.tsx
index 6c72cfbb8c..3bd467965c 100644
--- a/clients/web/src/components/groups/ImportServerJsonPanel/ImportServerJsonPanel.tsx
+++ b/clients/web/src/components/groups/ImportServerJsonPanel/ImportServerJsonPanel.tsx
@@ -8,10 +8,10 @@ import {
   Stack,
   Text,
   TextInput,
-  Textarea,
   Title,
 } from "@mantine/core";
 import { ClearButton } from "../../elements/ClearButton/ClearButton";
+import { JsonEditor } from "../../elements/JsonEditor/JsonEditor";
 import type { InspectorServerJsonDraft } from "@inspector/core/mcp/types.js";
 
 export interface ValidationResult {
@@ -89,18 +89,23 @@ const HeaderRow = Group.withProps({
   wrap: "nowrap",
 });
 
+// The header's trailing controls. `nowrap` keeps Clear beside Choose file…
+// rather than wrapping one under the other in a narrow modal.
+const HeaderActions = Group.withProps({ gap: "xs", wrap: "nowrap" });
+
 const ChooseFileButton = Button.withProps({
   variant: "default",
   size: "xs",
 });
 
-const FileContentsTextarea = Textarea.withProps({
-  "aria-label": "File Contents",
-  ff: "monospace",
-  autosize: true,
-  minRows: 8,
-  maxRows: 15,
-  rightSectionPointerEvents: "auto",
+// Clears the pasted document. It sits in the header row rather than inside the
+// editor: Ace renders its own DOM and has no `rightSection` to hang a control
+// in, and an absolutely-positioned button over a scrolling editor would sit on
+// top of the text it is meant to help with.
+const ClearContentsButton = Button.withProps({
+  variant: "subtle",
+  size: "xs",
+  color: "gray",
 });
 
 const DefaultNameInput = TextInput.withProps({
@@ -143,13 +148,20 @@ export function ImportServerJsonPanel({
     <Stack gap="md">
       <HeaderRow>
         <HintText>Paste server.json content, or load it from a file:</HintText>
-        {onPickFile ? (
-          <FileButton accept="application/json,.json" onChange={onPickFile}>
-            {(props) => (
-              <ChooseFileButton {...props}>Choose file…</ChooseFileButton>
-            )}
-          </FileButton>
-        ) : null}
+        <HeaderActions>
+          {hasContent && (
+            <ClearContentsButton onClick={() => onJsonChange("")}>
+              Clear
+            </ClearContentsButton>
+          )}
+          {onPickFile ? (
+            <FileButton accept="application/json,.json" onChange={onPickFile}>
+              {(props) => (
+                <ChooseFileButton {...props}>Choose file…</ChooseFileButton>
+              )}
+            </FileButton>
+          ) : null}
+        </HeaderActions>
       </HeaderRow>
 
       {/* Accordions here stay inline: Accordion is a compound,
@@ -177,14 +189,12 @@ export function ImportServerJsonPanel({
             File Contents
           </Accordion.Control>
           <Accordion.Panel>
-            <FileContentsTextarea
+            <JsonEditor
+              ariaLabel="File Contents"
               value={draft.rawText}
-              onChange={(e) => onJsonChange(e.currentTarget.value)}
-              rightSection={
-                draft.rawText ? (
-                  <ClearButton onClick={() => onJsonChange("")} />
-                ) : null
-              }
+              onChange={onJsonChange}
+              minLines={8}
+              maxLines={20}
             />
           </Accordion.Panel>
         </Accordion.Item>
diff --git a/clients/web/src/components/groups/MrtrConversation/MrtrConversation.tsx b/clients/web/src/components/groups/MrtrConversation/MrtrConversation.tsx
index 0ad1780438..47e4fb8378 100644
--- a/clients/web/src/components/groups/MrtrConversation/MrtrConversation.tsx
+++ b/clients/web/src/components/groups/MrtrConversation/MrtrConversation.tsx
@@ -8,6 +8,7 @@ import {
   Stack,
   Text,
 } from "@mantine/core";
+import type { ReplayParamsOverride } from "../../../lib/protocolReplay";
 import type { MessageEntry } from "@inspector/core/mcp/types.js";
 import { ProtocolEntry } from "../ProtocolEntry/ProtocolEntry";
 import { ExpandToggle } from "../../elements/ExpandToggle/ExpandToggle";
@@ -26,7 +27,7 @@ export interface MrtrConversationProps {
   isListExpanded: boolean;
   /** Compact per-round layout for the narrow monitoring column. */
   embedded?: boolean;
-  onReplay: (id: string) => void;
+  onReplay: (id: string, overrideParams?: ReplayParamsOverride) => void;
   onTogglePin: (id: string) => void;
 }
 
@@ -182,7 +183,9 @@ export function MrtrConversation({
                   isPinned={pinnedIds.has(round.id)}
                   isListExpanded={isListExpanded}
                   embedded={embedded}
-                  onReplay={() => onReplay(round.id)}
+                  onReplay={(overrideParams) =>
+                    onReplay(round.id, overrideParams)
+                  }
                   onTogglePin={() => onTogglePin(round.id)}
                 />
               </Stack>
diff --git a/clients/web/src/components/groups/NetworkEntry/NetworkEntry.test.tsx b/clients/web/src/components/groups/NetworkEntry/NetworkEntry.test.tsx
index d0ea1fc425..0f8c225058 100644
--- a/clients/web/src/components/groups/NetworkEntry/NetworkEntry.test.tsx
+++ b/clients/web/src/components/groups/NetworkEntry/NetworkEntry.test.tsx
@@ -7,6 +7,7 @@ import {
   screen,
   waitFor,
 } from "../../../test/renderWithMantine";
+import { getAceText } from "../../../test/aceEditor";
 import { NetworkEntry } from "./NetworkEntry";
 
 const baseEntry: FetchRequestEntry = {
@@ -232,28 +233,29 @@ describe("NetworkEntry", () => {
         token_type: "Bearer",
       }),
     };
-    const { container } = renderWithMantine(
-      <NetworkEntry entry={authEntry} isListExpanded={true} />,
-    );
-    // Masked by default: the reveal affordance is present and the raw secret
-    // is nowhere in the DOM, but non-secret fields still render.
+    renderWithMantine(<NetworkEntry entry={authEntry} isListExpanded={true} />);
+    // Masked by default: the reveal affordance is present and the raw secret is
+    // nowhere in the rendered body, but non-secret fields still render. Read
+    // through the JSON editor rather than the DOM — Ace virtualizes its lines,
+    // so what the document holds is a function of a viewport happy-dom has no
+    // layout to give it.
     expect(screen.getByText("Secrets hidden")).toBeInTheDocument();
-    expect(container.textContent).not.toContain("super-secret-token");
-    expect(container.textContent).toContain("••••••••");
-    expect(container.textContent).toContain("Bearer");
+    expect(getAceText()).not.toContain("super-secret-token");
+    expect(getAceText()).toContain("••••••••");
+    expect(getAceText()).toContain("Bearer");
 
     await user.click(
       screen.getByRole("button", { name: "Reveal secrets in body" }),
     );
 
     expect(screen.getByText("Secrets revealed")).toBeInTheDocument();
-    expect(container.textContent).toContain("super-secret-token");
+    expect(getAceText()).toContain("super-secret-token");
 
     // Toggling back re-masks.
     await user.click(
       screen.getByRole("button", { name: "Hide secrets in body" }),
     );
-    expect(container.textContent).not.toContain("super-secret-token");
+    expect(getAceText()).not.toContain("super-secret-token");
   });
 
   it("masks a form-encoded request body (code/verifier) until revealed", async () => {
diff --git a/clients/web/src/components/groups/ProtocolEntry/ProtocolEntry.test.tsx b/clients/web/src/components/groups/ProtocolEntry/ProtocolEntry.test.tsx
index 45d658c42c..f86c694005 100644
--- a/clients/web/src/components/groups/ProtocolEntry/ProtocolEntry.test.tsx
+++ b/clients/web/src/components/groups/ProtocolEntry/ProtocolEntry.test.tsx
@@ -2,6 +2,7 @@ import { describe, it, expect, vi } from "vitest";
 import userEvent from "@testing-library/user-event";
 import type { MessageEntry } from "@inspector/core/mcp/types.js";
 import { renderWithMantine, screen } from "../../../test/renderWithMantine";
+import { getAceText, setAceText } from "../../../test/aceEditor";
 import { ProtocolEntry } from "./ProtocolEntry";
 
 const successEntry: MessageEntry = {
@@ -203,6 +204,84 @@ describe("ProtocolEntry", () => {
     expect(onReplay).toHaveBeenCalledTimes(1);
   });
 
+  // Edit-and-replay is a second way to *supply* the params, not a second replay
+  // implementation — it dispatches through the same `onReplay` (#2151).
+  describe("edit and replay (#2151)", () => {
+    async function openEditor(user: ReturnType<typeof userEvent.setup>) {
+      await user.click(screen.getByRole("button", { name: "Edit and replay" }));
+    }
+
+    it("seeds the editor with the entry's params", async () => {
+      const user = userEvent.setup();
+      renderWithMantine(<ProtocolEntry {...baseProps} entry={successEntry} />);
+      await openEditor(user);
+      expect(JSON.parse(getAceText())).toEqual({
+        name: "get_weather",
+        arguments: { city: "San Francisco" },
+      });
+    });
+
+    it("replays with the edited params", async () => {
+      const user = userEvent.setup();
+      const onReplay = vi.fn();
+      renderWithMantine(
+        <ProtocolEntry
+          {...baseProps}
+          entry={successEntry}
+          onReplay={onReplay}
+        />,
+      );
+      await openEditor(user);
+      await setAceText('{"name":"get_weather","arguments":{"city":"Boston"}}');
+      await user.click(screen.getByRole("button", { name: "Send" }));
+
+      expect(onReplay).toHaveBeenCalledWith({
+        name: "get_weather",
+        arguments: { city: "Boston" },
+      });
+      // And the modal is gone — the entry itself is unchanged.
+      expect(screen.queryByRole("button", { name: "Send" })).toBeNull();
+    });
+
+    it("replays verbatim from the plain Replay button", async () => {
+      const user = userEvent.setup();
+      const onReplay = vi.fn();
+      renderWithMantine(
+        <ProtocolEntry
+          {...baseProps}
+          entry={successEntry}
+          onReplay={onReplay}
+        />,
+      );
+      await user.click(screen.getByRole("button", { name: "Replay" }));
+      // No argument at all: "not edited" has to be distinguishable from
+      // "edited to no params" one level up.
+      expect(onReplay).toHaveBeenCalledWith();
+    });
+
+    it("is offered only where Replay is", () => {
+      const notification: MessageEntry = {
+        id: "note-1",
+        timestamp: new Date(),
+        direction: "notification",
+        message: { jsonrpc: "2.0", method: "notifications/message" },
+      };
+      renderWithMantine(<ProtocolEntry {...baseProps} entry={notification} />);
+      expect(
+        screen.queryByRole("button", { name: "Edit and replay" }),
+      ).toBeNull();
+    });
+
+    it("is offered in the compact layout too", () => {
+      renderWithMantine(
+        <ProtocolEntry {...baseProps} entry={successEntry} embedded />,
+      );
+      expect(
+        screen.getByRole("button", { name: "Edit and replay" }),
+      ).toBeInTheDocument();
+    });
+  });
+
   it("hides the Replay button for a method that can't be replayed", () => {
     // A notification isn't a replayable client→server request.
     renderWithMantine(
diff --git a/clients/web/src/components/groups/ProtocolEntry/ProtocolEntry.tsx b/clients/web/src/components/groups/ProtocolEntry/ProtocolEntry.tsx
index 0df02f05ba..c87638ff72 100644
--- a/clients/web/src/components/groups/ProtocolEntry/ProtocolEntry.tsx
+++ b/clients/web/src/components/groups/ProtocolEntry/ProtocolEntry.tsx
@@ -21,6 +21,8 @@ import { McpErrorBadge } from "../../elements/McpErrorBadge/McpErrorBadge";
 import { ExpandToggle } from "../../elements/ExpandToggle/ExpandToggle";
 import { PinToggle } from "../../elements/PinToggle/PinToggle";
 import { ReplayButton } from "../../elements/ReplayButton/ReplayButton";
+import { EditReplayButton } from "../../elements/EditReplayButton/EditReplayButton";
+import { EditReplayModal } from "../EditReplayModal/EditReplayModal";
 import { useValueChange } from "../../../hooks/useValueChange";
 import {
   classifyProtocolSpecError,
@@ -32,12 +34,19 @@ import {
   extractSubscriptionId,
 } from "../protocolUtils.js";
 import { isReplayableProtocolMethod } from "../../../utils/replayableProtocolMethods";
+import type { ReplayParamsOverride } from "../../../lib/protocolReplay";
 
 export interface ProtocolEntryProps {
   entry: MessageEntry;
   isPinned: boolean;
   isListExpanded: boolean;
-  onReplay: () => void;
+  /**
+   * Re-issue this entry's request. Called with no argument by the Replay
+   * button (the entry's own params, verbatim), and with an edited params object
+   * by the Edit-and-replay modal — one dispatch path, two ways to supply the
+   * params (#2151).
+   */
+  onReplay: (overrideParams?: ReplayParamsOverride) => void;
   onTogglePin: () => void;
   /**
    * Compact two-line header for the narrow monitoring sidebar (#1616): line 1 is
@@ -194,6 +203,17 @@ function formatTimestampCompact(date: Date): string {
   return date.toISOString().slice(11, 19);
 }
 
+// The request's `params` object, which the Edit-and-replay editor is seeded
+// from and the expanded detail renders. `undefined` for a frame that carries
+// none — a bare `tools/list`, or a response.
+function extractParams(
+  entry: MessageEntry,
+): Record<string, unknown> | undefined {
+  const msg = entry.message;
+  if (!("params" in msg) || !msg.params) return undefined;
+  return msg.params as Record<string, unknown>;
+}
+
 function extractTarget(entry: MessageEntry): string | undefined {
   const msg = entry.message;
   if (!("params" in msg) || !msg.params) return undefined;
@@ -306,10 +326,12 @@ export function ProtocolEntry({
   correlatedHttpStatus,
 }: ProtocolEntryProps) {
   const [isExpanded, setIsExpanded] = useState(isListExpanded);
+  const [isEditingReplay, setIsEditingReplay] = useState(false);
   const method = extractMethod(entry);
   const target = extractTarget(entry);
   const resourceUri = extractResourceUri(entry);
   const status = extractStatus(entry);
+  const requestParams = extractParams(entry);
   const canReplay = isReplayableProtocolMethod(method);
   const resultType = extractResultType(entry);
   const subscriptionId = extractSubscriptionId(entry);
@@ -363,6 +385,14 @@ export function ProtocolEntry({
   const durationText = entry.duration != null && (
     <DurationText>{formatDuration(entry.duration)}</DurationText>
   );
+  // Both replay affordances are gated on the same predicate, so a method that
+  // cannot be replayed does not offer an editor that would fail on Send.
+  const replayControls = canReplay && (
+    <>
+      <ReplayButton onReplay={() => onReplay()} />
+      <EditReplayButton onClick={() => setIsEditingReplay(true)} />
+    </>
+  );
 
   return (
     <EntryContainer>
@@ -401,7 +431,7 @@ export function ProtocolEntry({
                 )}
               </HeaderCluster>
               <ControlsCluster>
-                {canReplay && <ReplayButton onReplay={onReplay} />}
+                {replayControls}
                 <PinToggle pinned={isPinned} onToggle={onTogglePin} />
                 <ExpandToggle
                   expanded={isExpanded}
@@ -436,7 +466,7 @@ export function ProtocolEntry({
             </HeaderRow>
 
             <ToggleRow>
-              {canReplay && <ReplayButton onReplay={onReplay} />}
+              {replayControls}
               <PinToggle pinned={isPinned} onToggle={onTogglePin} />
               <ExpandToggle
                 expanded={isExpanded}
@@ -446,6 +476,16 @@ export function ProtocolEntry({
           </>
         )}
 
+        {canReplay && (
+          <EditReplayModal
+            opened={isEditingReplay}
+            method={method}
+            params={requestParams}
+            onSend={onReplay}
+            onClose={() => setIsEditingReplay(false)}
+          />
+        )}
+
         <Collapse in={isExpanded}>
           <Stack gap="sm">
             <Divider />
@@ -464,13 +504,13 @@ export function ProtocolEntry({
                 }
               />
             )}
-            {"params" in entry.message && entry.message.params && (
+            {requestParams && (
               <Stack gap="xs">
                 <Text size="sm">Parameters:</Text>
                 <ContentViewer
                   block={{
                     type: "text",
-                    text: serializeMessage(entry.message.params),
+                    text: serializeMessage(requestParams),
                   }}
                   copyable
                 />
diff --git a/clients/web/src/components/groups/ProtocolListPanel/ProtocolListPanel.test.tsx b/clients/web/src/components/groups/ProtocolListPanel/ProtocolListPanel.test.tsx
index 086011cf70..d1e51b3c67 100644
--- a/clients/web/src/components/groups/ProtocolListPanel/ProtocolListPanel.test.tsx
+++ b/clients/web/src/components/groups/ProtocolListPanel/ProtocolListPanel.test.tsx
@@ -321,7 +321,8 @@ describe("ProtocolListPanel", () => {
       />,
     );
     await user.click(screen.getByRole("button", { name: "Replay" }));
-    expect(onReplay).toHaveBeenCalledWith("req-1");
+    // The second argument is the Edit-and-replay override, absent here (#2151).
+    expect(onReplay).toHaveBeenCalledWith("req-1", undefined);
   });
 
   it("invokes onTogglePin with the entry id when Pin is clicked", async () => {
@@ -364,7 +365,7 @@ describe("ProtocolListPanel", () => {
       />,
     );
     await user.click(screen.getByRole("button", { name: "Replay" }));
-    expect(onReplay).toHaveBeenCalledWith("req-1");
+    expect(onReplay).toHaveBeenCalledWith("req-1", undefined);
     await user.click(screen.getByRole("button", { name: "Unpin" }));
     expect(onTogglePin).toHaveBeenCalledWith("req-1");
   });
diff --git a/clients/web/src/components/groups/ProtocolListPanel/ProtocolListPanel.tsx b/clients/web/src/components/groups/ProtocolListPanel/ProtocolListPanel.tsx
index 69214ef0e3..6456da0fbe 100644
--- a/clients/web/src/components/groups/ProtocolListPanel/ProtocolListPanel.tsx
+++ b/clients/web/src/components/groups/ProtocolListPanel/ProtocolListPanel.tsx
@@ -9,6 +9,7 @@ import {
   Title,
   UnstyledButton,
 } from "@mantine/core";
+import type { ReplayParamsOverride } from "../../../lib/protocolReplay";
 import type { ProtocolEra } from "@modelcontextprotocol/client";
 import type {
   MessageEntry,
@@ -47,7 +48,7 @@ export interface ProtocolListPanelProps {
   onClearSection: (section: ProtocolSectionName) => void;
   /** Export just one section's entries. */
   onExportSection: (section: ProtocolSectionName) => void;
-  onReplay: (id: string) => void;
+  onReplay: (id: string, overrideParams?: ReplayParamsOverride) => void;
   onTogglePin: (id: string) => void;
   sortDirection: SortDirection;
   onSortChange: (next: SortDirection) => void;
@@ -326,7 +327,7 @@ export function ProtocolListPanel({
           isPinned={sectionPinned}
           isListExpanded={!compact}
           embedded={embedded}
-          onReplay={() => onReplay(row.entry.id)}
+          onReplay={(overrideParams) => onReplay(row.entry.id, overrideParams)}
           onTogglePin={() => onTogglePin(row.entry.id)}
           onRevealInNetwork={
             onRevealInNetwork && revealableIds?.has(row.entry.id)
diff --git a/clients/web/src/components/groups/ResourceLink/ResourceLink.stories.tsx b/clients/web/src/components/groups/ResourceLink/ResourceLink.stories.tsx
index ac6b6ca2e5..5cd2ad1fca 100644
--- a/clients/web/src/components/groups/ResourceLink/ResourceLink.stories.tsx
+++ b/clients/web/src/components/groups/ResourceLink/ResourceLink.stories.tsx
@@ -90,8 +90,15 @@ export const LargeResult: Story = {
     );
     // The `"blob"` key appears only in the expanded read result's JSON (not in
     // the metadata badge), so it confirms the inline result rendered.
-    await waitFor(() =>
-      expect(canvas.getByText(/"blob":/)).toBeInTheDocument(),
-    );
+    //
+    // Read through the editor rather than with `getByText`: the JSON renders in
+    // Ace (#2151), which puts every token in its own element — so a matcher
+    // spanning the `"blob"`/`:` boundary can never match a single node.
+    await waitFor(async () => {
+      const editor = canvasElement.querySelector(".ace_editor") as
+        | (HTMLElement & { env?: { editor?: { getValue(): string } } })
+        | null;
+      await expect(editor?.env?.editor?.getValue() ?? "").toContain('"blob":');
+    });
   },
 };
diff --git a/clients/web/src/components/groups/ResourceLink/ResourceLink.test.tsx b/clients/web/src/components/groups/ResourceLink/ResourceLink.test.tsx
index 731c4a9a9c..24184a326b 100644
--- a/clients/web/src/components/groups/ResourceLink/ResourceLink.test.tsx
+++ b/clients/web/src/components/groups/ResourceLink/ResourceLink.test.tsx
@@ -6,6 +6,7 @@ import {
   screen,
   waitFor,
 } from "../../../test/renderWithMantine";
+import { getAceText } from "../../../test/aceEditor";
 import { ResourceLink } from "./ResourceLink";
 
 const URI = "file:///docs/readme.md";
@@ -46,9 +47,9 @@ describe("ResourceLink", () => {
 
     expect(onReadResource).toHaveBeenCalledWith(URI);
     // The full read result is rendered inline as formatted JSON.
-    await waitFor(() =>
-      expect(screen.getByText(/"hello body"/)).toBeInTheDocument(),
-    );
+    // The body lands in the read-only JSON editor, whose lines are
+    // virtualized — so it is read through the editor, not the DOM.
+    await waitFor(() => expect(getAceText()).toContain('"hello body"'));
     // The toggle flips to the collapse control once expanded.
     expect(
       screen.getByRole("button", { name: `Collapse resource ${URI}` }),
@@ -65,9 +66,9 @@ describe("ResourceLink", () => {
     await user.click(
       screen.getByRole("button", { name: `Expand resource ${URI}` }),
     );
-    await waitFor(() =>
-      expect(screen.getByText(/"cached body"/)).toBeInTheDocument(),
-    );
+    // The body lands in the read-only JSON editor, whose lines are
+    // virtualized — so it is read through the editor, not the DOM.
+    await waitFor(() => expect(getAceText()).toContain('"cached body"'));
 
     // Collapse — the toggle flips back to the expand control. (The read result
     // stays mounted inside the animated Collapse, so it isn't re-read.)
@@ -82,7 +83,7 @@ describe("ResourceLink", () => {
     await user.click(
       screen.getByRole("button", { name: `Expand resource ${URI}` }),
     );
-    expect(screen.getByText(/"cached body"/)).toBeInTheDocument();
+    expect(getAceText()).toContain('"cached body"');
     expect(onReadResource).toHaveBeenCalledTimes(1);
   });
 
@@ -146,9 +147,9 @@ describe("ResourceLink", () => {
       screen.getByRole("button", { name: `Expand resource ${URI}` }),
     );
 
-    await waitFor(() =>
-      expect(screen.getByText(/"recovered body"/)).toBeInTheDocument(),
-    );
+    // The body lands in the read-only JSON editor, whose lines are
+    // virtualized — so it is read through the editor, not the DOM.
+    await waitFor(() => expect(getAceText()).toContain('"recovered body"'));
     expect(
       screen.queryByText("Failed to read resource"),
     ).not.toBeInTheDocument();
@@ -183,8 +184,8 @@ describe("ResourceLink", () => {
     expect(onReadResource).toHaveBeenCalledTimes(1);
 
     resolveRead(readResult("in flight body"));
-    await waitFor(() =>
-      expect(screen.getByText(/"in flight body"/)).toBeInTheDocument(),
-    );
+    // The body lands in the read-only JSON editor, whose lines are
+    // virtualized — so it is read through the editor, not the DOM.
+    await waitFor(() => expect(getAceText()).toContain('"in flight body"'));
   });
 });
diff --git a/clients/web/src/components/groups/ResourcePreviewPanel/ResourcePreviewPanel.test.tsx b/clients/web/src/components/groups/ResourcePreviewPanel/ResourcePreviewPanel.test.tsx
index b8283ed9e9..d5f5a5939f 100644
--- a/clients/web/src/components/groups/ResourcePreviewPanel/ResourcePreviewPanel.test.tsx
+++ b/clients/web/src/components/groups/ResourcePreviewPanel/ResourcePreviewPanel.test.tsx
@@ -6,6 +6,7 @@ import type {
   TextResourceContents,
 } from "@modelcontextprotocol/client";
 import { renderWithMantine, screen } from "../../../test/renderWithMantine";
+import { getAceText } from "../../../test/aceEditor";
 import { ResourcePreviewPanel } from "./ResourcePreviewPanel";
 
 // Stub the lazy highlighter so JSON/XML/CSS branches render synchronously
@@ -483,7 +484,7 @@ describe("ResourcePreviewPanel", () => {
       expect(screen.getByText("text/csv")).toBeInTheDocument();
     });
 
-    it("infers application/json from a .json URI and highlights", () => {
+    it("infers application/json from a .json URI and renders the editor", () => {
       renderWithMantine(
         <ResourcePreviewPanel
           {...baseProps}
@@ -491,10 +492,7 @@ describe("ResourcePreviewPanel", () => {
           contents={[{ uri: "file:///cfg.json", text: '{"a":1}' }]}
         />,
       );
-      expect(screen.getByTestId("code-highlight")).toHaveAttribute(
-        "data-language",
-        "json",
-      );
+      expect(getAceText()).toBe('{\n  "a": 1\n}');
     });
 
     it("infers application/xml from a .xml URI and highlights", () => {
diff --git a/clients/web/src/components/groups/SchemaForm/SchemaForm.stories.tsx b/clients/web/src/components/groups/SchemaForm/SchemaForm.stories.tsx
index e5fbf760fd..345513b76f 100644
--- a/clients/web/src/components/groups/SchemaForm/SchemaForm.stories.tsx
+++ b/clients/web/src/components/groups/SchemaForm/SchemaForm.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { fn } from "storybook/test";
+import { expect, fn, within } from "storybook/test";
 import { SchemaForm } from "./SchemaForm";
 
 const meta: Meta<typeof SchemaForm> = {
@@ -218,3 +218,44 @@ export const RootUnion: Story = {
     values: { kind: "email" },
   },
 };
+
+/**
+ * The v1 escape hatch, restored (#2151): flip the form over and edit the whole
+ * arguments object as JSON.
+ *
+ * The play function is where the real behavior lives, because Ace's keyboard
+ * path only works in a real browser — the unit suite drives the editor through
+ * its API instead.
+ */
+export const RawJsonToggle: Story = {
+  args: {
+    schema: {
+      type: "object",
+      properties: {
+        name: { type: "string", title: "Name" },
+        count: { type: "integer", title: "Count" },
+      },
+    },
+    values: { name: "Example", count: 3 },
+  },
+  play: async ({ canvasElement, userEvent }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByLabelText("Edit as JSON"));
+
+    // The widgets are gone, replaced by one editor holding the same values.
+    await expect(canvas.queryByLabelText(/^Name$/)).toBeNull();
+    const editor = canvasElement.querySelector(".ace_editor") as HTMLElement & {
+      env: { editor: { getValue(): string } };
+    };
+    await expect(JSON.parse(editor.env.editor.getValue())).toEqual({
+      name: "Example",
+      count: 3,
+    });
+
+    // And back: the switch is the only way out, and it leaves the widgets on
+    // screen. (This story's `onChange` is a spy, so the values it renders are
+    // the ones it was given.)
+    await userEvent.click(canvas.getByLabelText("Edit as JSON"));
+    await expect(canvas.getByLabelText(/^Name$/)).toBeVisible();
+  },
+};
diff --git a/clients/web/src/components/groups/SchemaForm/SchemaForm.test.tsx b/clients/web/src/components/groups/SchemaForm/SchemaForm.test.tsx
index 826f759d64..6f913944ad 100644
--- a/clients/web/src/components/groups/SchemaForm/SchemaForm.test.tsx
+++ b/clients/web/src/components/groups/SchemaForm/SchemaForm.test.tsx
@@ -9,6 +9,7 @@ import {
   screen,
   waitFor,
 } from "../../../test/renderWithMantine";
+import { getAceTextByLabel, setAceTextByLabel } from "../../../test/aceEditor";
 import { SchemaForm } from "./SchemaForm";
 
 describe("SchemaForm", () => {
@@ -719,8 +720,7 @@ describe("SchemaForm", () => {
     expect(screen.getByText("Config")).toBeInTheDocument();
   });
 
-  it("invokes onChange via JsonInput when valid JSON is pasted", async () => {
-    const user = userEvent.setup();
+  it("invokes onChange via the JSON editor when valid JSON is pasted", async () => {
     const onChange = vi.fn();
     const schema: InspectorFormSchema = {
       type: "object",
@@ -731,9 +731,7 @@ describe("SchemaForm", () => {
     renderWithMantine(
       <SchemaForm schema={schema} values={{}} onChange={onChange} />,
     );
-    const jsonInput = screen.getByLabelText(/Config/) as HTMLTextAreaElement;
-    jsonInput.focus();
-    await user.paste("[1,2]");
+    await setAceTextByLabel(/Config/, "[1,2]");
     expect(onChange).toHaveBeenCalled();
     const lastCall = onChange.mock.calls[onChange.mock.calls.length - 1][0];
     expect(lastCall.config).toEqual([1, 2]);
@@ -746,7 +744,6 @@ describe("SchemaForm", () => {
   // more since #2007, whose fix deliberately routes object unions to this
   // editor: a fallback nobody can type into is not a fallback.
   it("shows an error while the JSON draft does not parse", async () => {
-    const user = userEvent.setup();
     const schema: InspectorFormSchema = {
       type: "object",
       properties: {
@@ -761,13 +758,12 @@ describe("SchemaForm", () => {
     }
     renderWithMantine(<Harness />);
 
-    const jsonInput = screen.getByLabelText(/Config/) as HTMLTextAreaElement;
-    await user.type(jsonInput, "[[1,");
+    await setAceTextByLabel(/Config/, "[1,");
     // Invalid text yields no value, so without this the field would submit as
     // absent while the user is still looking at what they typed.
     expect(screen.getByText(/Not valid JSON/)).toBeInTheDocument();
 
-    await user.type(jsonInput, "2]");
+    await setAceTextByLabel(/Config/, "[1,2]");
     expect(screen.queryByText(/Not valid JSON/)).not.toBeInTheDocument();
   });
 
@@ -785,7 +781,6 @@ describe("SchemaForm", () => {
   });
 
   it("reports no value, not raw text, while the JSON is mid-edit", async () => {
-    const user = userEvent.setup();
     const onChange = vi.fn();
     const schema: InspectorFormSchema = {
       type: "object",
@@ -796,13 +791,17 @@ describe("SchemaForm", () => {
     renderWithMantine(
       <SchemaForm schema={schema} values={{}} onChange={onChange} />,
     );
-    const jsonInput = screen.getByLabelText(/Config/) as HTMLTextAreaElement;
-    await user.type(jsonInput, "x");
+    await setAceTextByLabel(/Config/, "x");
     expect(onChange).toHaveBeenLastCalledWith({ config: undefined });
   });
 
-  it("lets an array literal be typed one character at a time", async () => {
-    const user = userEvent.setup();
+  // Ace is not typed into here — it reads keystrokes through an offscreen
+  // textarea plus selection state happy-dom does not implement, so a simulated
+  // keypress produces no edit at all (see `test/aceEditor.ts`). What this can
+  // still pin is the mechanism that broke: each settled draft is displayed
+  // verbatim rather than re-serialized. Real character-by-character typing is
+  // covered by the `SchemaForm` play function, which runs in Chromium.
+  it("shows each JSON draft verbatim as it is built up", async () => {
     const schema: InspectorFormSchema = {
       type: "object",
       properties: {
@@ -820,16 +819,15 @@ describe("SchemaForm", () => {
     }
     renderWithMantine(<Harness />);
 
-    const jsonInput = screen.getByLabelText(/Config/) as HTMLTextAreaElement;
-    // `[` is a userEvent keyboard descriptor, so it is escaped as `[[`.
-    await user.type(jsonInput, '[[1,"a"]');
-
-    // The box shows exactly what was typed — no injected quotes or backslashes.
-    expect(jsonInput.value).toBe('[1,"a"]');
+    for (const step of ["[", "[1", '[1,"', '[1,"a', '[1,"a"]']) {
+      await setAceTextByLabel(/Config/, step);
+      // The box shows exactly what was typed — no injected quotes, no
+      // backslashes, at any point along the way.
+      expect(getAceTextByLabel(/Config/)).toBe(step);
+    }
   });
 
   it("keeps an in-progress draft visible instead of rewriting it", async () => {
-    const user = userEvent.setup();
     const schema: InspectorFormSchema = {
       type: "object",
       properties: {
@@ -844,13 +842,12 @@ describe("SchemaForm", () => {
     }
     renderWithMantine(<Harness />);
 
-    const jsonInput = screen.getByLabelText(/Config/) as HTMLTextAreaElement;
-    await user.type(jsonInput, "[[1,");
+    await setAceTextByLabel(/Config/, "[1,");
     // Unparseable so far, and it must survive the re-render untouched.
-    expect(jsonInput.value).toBe("[1,");
+    expect(getAceTextByLabel(/Config/)).toBe("[1,");
 
-    await user.type(jsonInput, "2]");
-    expect(jsonInput.value).toBe("[1,2]");
+    await setAceTextByLabel(/Config/, "[1,2]");
+    expect(getAceTextByLabel(/Config/)).toBe("[1,2]");
   });
 
   it("uses default values when value is undefined", () => {
@@ -1334,7 +1331,6 @@ describe("SchemaForm draft validity (#2020)", () => {
   });
 
   it("reports an unparseable JSON draft, then clears it once the text parses", async () => {
-    const user = userEvent.setup();
     const onValidityChange = vi.fn();
     renderWithMantine(
       <ValidityHarness
@@ -1343,11 +1339,10 @@ describe("SchemaForm draft validity (#2020)", () => {
       />,
     );
 
-    const jsonInput = screen.getByLabelText(/Config/) as HTMLTextAreaElement;
-    await user.type(jsonInput, "[[1,");
+    await setAceTextByLabel(/Config/, "[1,");
     expect(onValidityChange).toHaveBeenLastCalledWith(true);
 
-    await user.type(jsonInput, "2]");
+    await setAceTextByLabel(/Config/, "[1,2]");
     expect(onValidityChange).toHaveBeenLastCalledWith(false);
   });
 
@@ -1380,7 +1375,6 @@ describe("SchemaForm draft validity (#2020)", () => {
   });
 
   it("stays invalid while any one field is invalid", async () => {
-    const user = userEvent.setup();
     const onValidityChange = vi.fn();
     const schema: InspectorFormSchema = {
       type: "object",
@@ -1393,20 +1387,19 @@ describe("SchemaForm draft validity (#2020)", () => {
       <ValidityHarness schema={schema} onValidityChange={onValidityChange} />,
     );
 
-    await user.type(screen.getByLabelText(/First/), "x");
-    await user.type(screen.getByLabelText(/Second/), "y");
+    await setAceTextByLabel(/First/, "x");
+    await setAceTextByLabel(/Second/, "y");
     expect(onValidityChange).toHaveBeenLastCalledWith(true);
 
     // One of the two recovering is not enough.
-    await user.clear(screen.getByLabelText(/First/));
+    await setAceTextByLabel(/First/, "");
     expect(onValidityChange).toHaveBeenLastCalledWith(true);
 
-    await user.clear(screen.getByLabelText(/Second/));
+    await setAceTextByLabel(/Second/, "");
     expect(onValidityChange).toHaveBeenLastCalledWith(false);
   });
 
   it("surfaces a nested object's invalid draft through the outer form", async () => {
-    const user = userEvent.setup();
     const onValidityChange = vi.fn();
     const schema: InspectorFormSchema = {
       type: "object",
@@ -1424,12 +1417,11 @@ describe("SchemaForm draft validity (#2020)", () => {
       <ValidityHarness schema={schema} onValidityChange={onValidityChange} />,
     );
 
-    await user.type(screen.getByLabelText(/Config/), "x");
+    await setAceTextByLabel(/Config/, "x");
     expect(onValidityChange).toHaveBeenLastCalledWith(true);
   });
 
   it("clears a stale invalid draft when the form moves to another entity", async () => {
-    const user = userEvent.setup();
     const onValidityChange = vi.fn();
     const { rerender } = renderWithMantine(
       <ValidityHarness
@@ -1439,7 +1431,7 @@ describe("SchemaForm draft validity (#2020)", () => {
       />,
     );
 
-    await user.type(screen.getByLabelText(/Config/), "x");
+    await setAceTextByLabel(/Config/, "x");
     expect(onValidityChange).toHaveBeenLastCalledWith(true);
 
     // Switching entities remounts the field, discarding its draft — so text
@@ -1455,7 +1447,6 @@ describe("SchemaForm draft validity (#2020)", () => {
   });
 
   it("reports valid when the form unmounts holding an invalid draft", async () => {
-    const user = userEvent.setup();
     const onValidityChange = vi.fn();
     const { unmount } = renderWithMantine(
       <ValidityHarness
@@ -1464,7 +1455,7 @@ describe("SchemaForm draft validity (#2020)", () => {
       />,
     );
 
-    await user.type(screen.getByLabelText(/Config/), "x");
+    await setAceTextByLabel(/Config/, "x");
     expect(onValidityChange).toHaveBeenLastCalledWith(true);
 
     unmount();
@@ -1472,11 +1463,10 @@ describe("SchemaForm draft validity (#2020)", () => {
   });
 
   it("renders without a validity callback", async () => {
-    const user = userEvent.setup();
     renderWithMantine(
       <SchemaForm schema={jsonSchema} values={{}} onChange={vi.fn()} />,
     );
-    await user.type(screen.getByLabelText(/Config/), "x");
+    await setAceTextByLabel(/Config/, "x");
     expect(screen.getByText(/Not valid JSON/)).toBeInTheDocument();
   });
 });
@@ -1508,7 +1498,6 @@ describe("JSON editor escaping (#1853, #1856, #1885)", () => {
 
   // #1853: `batch_process_items`, typed character by character.
   it("types a string array through without escaping it (#1853)", async () => {
-    const user = userEvent.setup();
     const schema: InspectorFormSchema = {
       type: "object",
       properties: {
@@ -1522,19 +1511,16 @@ describe("JSON editor escaping (#1853, #1856, #1885)", () => {
     };
     renderWithMantine(<EscapingHarness schema={schema} />);
 
-    const jsonInput = screen.getByLabelText(/Item Ids/) as HTMLTextAreaElement;
-    // `[` opens a userEvent keyboard descriptor, so it is escaped as `[[`.
-    await user.type(jsonInput, '[["item-1","item-2"]');
+    await setAceTextByLabel(/Item Ids/, '["item-1","item-2"]');
 
-    expect(jsonInput.value).toBe('["item-1","item-2"]');
-    expect(jsonInput.value).not.toContain("\\");
+    expect(getAceTextByLabel(/Item Ids/)).toBe('["item-1","item-2"]');
+    expect(getAceTextByLabel(/Item Ids/)).not.toContain("\\");
   });
 
   // #1853 again, from the comment thread: the caret sitting *outside* the
   // quotes of a `""` value. One keystroke there made the draft invalid, which
   // is all it took — `""` + `a` rendered as `"\"\"a"`.
   it("keeps a keystroke typed outside a string's quotes literal (#1853)", async () => {
-    const user = userEvent.setup();
     const schema: InspectorFormSchema = {
       type: "object",
       // No `type`, so the field lands on the JSON editor holding a string.
@@ -1544,18 +1530,14 @@ describe("JSON editor escaping (#1853, #1856, #1885)", () => {
       <EscapingHarness schema={schema} initial={{ note: "" }} />,
     );
 
-    const jsonInput = screen.getByRole("textbox", {
-      name: /Note/,
-    }) as HTMLTextAreaElement;
-    await user.click(jsonInput);
-    await user.keyboard("{End}a");
+    expect(getAceTextByLabel(/Note/)).toBe('""');
+    await setAceTextByLabel(/Note/, '""a');
 
-    expect(jsonInput.value).toBe('""a');
+    expect(getAceTextByLabel(/Note/)).toBe('""a');
   });
 
   // #1856: `sum_numbers`, Backspace with the caret after the closing `]`.
   it("keeps the draft raw when Backspace invalidates an array (#1856)", async () => {
-    const user = userEvent.setup();
     const schema: InspectorFormSchema = {
       type: "object",
       properties: {
@@ -1571,22 +1553,21 @@ describe("JSON editor escaping (#1853, #1856, #1885)", () => {
       <EscapingHarness schema={schema} initial={{ numbers: [1, 2] }} />,
     );
 
-    const jsonInput = screen.getByLabelText(/Numbers/) as HTMLTextAreaElement;
-    await user.click(jsonInput);
-    await user.keyboard("{End}{Backspace}");
+    expect(getAceTextByLabel(/Numbers/)).toBe("[\n  1,\n  2\n]");
 
     // Exactly the seeded text minus its last character — the draft the reporter
     // expected, where the field instead showed a quoted, escaped string.
-    expect(jsonInput.value).toBe("[\n  1,\n  2\n");
+    await setAceTextByLabel(/Numbers/, "[\n  1,\n  2\n");
+    expect(getAceTextByLabel(/Numbers/)).toBe("[\n  1,\n  2\n");
 
     // Each further edit compounded the escaping, so keep going.
-    await user.keyboard("{Backspace}{Backspace}");
-    expect(jsonInput.value).not.toContain("\\");
-    expect(jsonInput.value.startsWith('"')).toBe(false);
+    await setAceTextByLabel(/Numbers/, "[\n  1,\n  ");
+    expect(getAceTextByLabel(/Numbers/)).not.toContain("\\");
+    expect(getAceTextByLabel(/Numbers/).startsWith('"')).toBe(false);
 
     // And the draft is still live: closing it back up produces a real array.
-    await user.keyboard("2]");
-    expect(jsonInput.value).toBe("[\n  1,\n  2]");
+    await setAceTextByLabel(/Numbers/, "[\n  1,\n  2]");
+    expect(getAceTextByLabel(/Numbers/)).toBe("[\n  1,\n  2]");
   });
 
   // #1885: FastMCP's `b: int | None = None`, which compiles to an `anyOf` with
@@ -1626,7 +1607,6 @@ describe("JSON editor escaping (#1853, #1856, #1885)", () => {
   // sends to the JSON editor (an array union). Backspacing the `null` token
   // there is the exact keystroke sequence from #1885's recording.
   it("backspaces a null default in the JSON editor without escaping (#1885)", async () => {
-    const user = userEvent.setup();
     const schema: InspectorFormSchema = {
       type: "object",
       properties: {
@@ -1641,16 +1621,14 @@ describe("JSON editor escaping (#1853, #1856, #1885)", () => {
     // being resolved — the state the reporter's recording starts from.
     renderWithMantine(<EscapingHarness schema={schema} />);
 
-    const jsonInput = screen.getByLabelText(/Cfg/) as HTMLTextAreaElement;
-    expect(jsonInput.value).toBe("null");
+    expect(getAceTextByLabel(/Cfg/)).toBe("null");
 
-    await user.click(jsonInput);
-    await user.keyboard("{End}{Backspace}");
-    expect(jsonInput.value).toBe("nul");
+    await setAceTextByLabel(/Cfg/, "nul");
+    expect(getAceTextByLabel(/Cfg/)).toBe("nul");
 
-    await user.keyboard("{Backspace}{Backspace}{Backspace}");
-    expect(jsonInput.value).toBe("");
-    expect(jsonInput.value).not.toContain("\\");
+    await setAceTextByLabel(/Cfg/, "");
+    expect(getAceTextByLabel(/Cfg/)).toBe("");
+    expect(getAceTextByLabel(/Cfg/)).not.toContain("\\");
   });
 });
 
@@ -1691,13 +1669,10 @@ describe("SchemaForm defaulted fields (#2026)", () => {
 
   it("opens the JSON editor on the schema default", () => {
     renderWithMantine(<DefaultHarness schema={arrayWithDefault} />);
-    expect((screen.getByLabelText(/Tags/) as HTMLTextAreaElement).value).toBe(
-      '[\n  "a"\n]',
-    );
+    expect(getAceTextByLabel(/Tags/)).toBe('[\n  "a"\n]');
   });
 
   it("keeps a keystroke typed into a defaulted JSON field", async () => {
-    const user = userEvent.setup();
     // Seeded with a value that is equal to the schema default but is not the
     // same object — how values parsed off the wire or out of a deep link
     // arrive. Sharing the reference (what `collectSchemaDefaults` produces) is
@@ -1706,26 +1681,21 @@ describe("SchemaForm defaulted fields (#2026)", () => {
       <DefaultHarness schema={arrayWithDefault} initial={{ tags: ["a"] }} />,
     );
 
-    const jsonInput = screen.getByLabelText(/Tags/) as HTMLTextAreaElement;
-    await user.click(jsonInput);
-    await user.keyboard("{End}x");
+    await setAceTextByLabel(/Tags/, '[\n  "a"\n]x');
 
     // The invalid draft is the user's, not the default reasserting itself.
-    expect(jsonInput.value).toBe('[\n  "a"\n]x');
+    expect(getAceTextByLabel(/Tags/)).toBe('[\n  "a"\n]x');
   });
 
   it("lets a defaulted JSON field be edited to a new value", async () => {
-    const user = userEvent.setup();
     // Distinct-object seed again, for the reason above.
     renderWithMantine(
       <DefaultHarness schema={arrayWithDefault} initial={{ tags: ["a"] }} />,
     );
 
-    const jsonInput = screen.getByLabelText(/Tags/) as HTMLTextAreaElement;
-    await user.clear(jsonInput);
-    await user.type(jsonInput, '[["b"]');
+    await setAceTextByLabel(/Tags/, '["b"]');
 
-    expect(jsonInput.value).toBe('["b"]');
+    expect(getAceTextByLabel(/Tags/)).toBe('["b"]');
     expect(screen.queryByText(/Not valid JSON/)).not.toBeInTheDocument();
   });
 
@@ -1737,7 +1707,9 @@ describe("SchemaForm defaulted fields (#2026)", () => {
     };
     renderWithMantine(<DefaultHarness schema={schema} initial={{ n: 30 }} />);
 
-    const n = screen.getByLabelText(/N/) as HTMLInputElement;
+    // Anchored: the form now also renders an "Edit as JSON" switch, which a
+    // bare /N/ matches too.
+    const n = screen.getByLabelText(/^N$/) as HTMLInputElement;
     expect(n.value).toBe("30");
 
     await user.click(n);
@@ -1790,9 +1762,224 @@ describe("SchemaForm defaulted fields (#2026)", () => {
     const user = userEvent.setup();
     renderWithMantine(<ExternalHarness />);
 
-    const jsonInput = screen.getByLabelText(/Tags/) as HTMLTextAreaElement;
     await user.click(screen.getByRole("button", { name: "load example" }));
-    expect(jsonInput.value).toBe('[\n  "z"\n]');
+    expect(getAceTextByLabel(/Tags/)).toBe('[\n  "z"\n]');
+  });
+});
+
+// The v1 escape hatch, restored (#2151): a rendered form can be flipped over to
+// editing its whole arguments object as JSON, so a value the widgets cannot
+// express — or a payload the user wants to paste in whole — has a route in.
+describe("SchemaForm raw JSON (#2151)", () => {
+  const schema: InspectorFormSchema = {
+    type: "object",
+    properties: {
+      name: { type: "string", title: "Name" },
+      count: { type: "integer", title: "Count" },
+    },
+  };
+
+  function RawHarness({
+    initial = {},
+    onValidityChange,
+    resetKey,
+    schema: override,
+  }: {
+    initial?: Record<string, unknown>;
+    onValidityChange?: (hasInvalidDraft: boolean) => void;
+    resetKey?: string;
+    schema?: InspectorFormSchema;
+  }) {
+    const [values, setValues] = useState<Record<string, unknown>>(initial);
+    return (
+      <SchemaForm
+        schema={override ?? schema}
+        values={values}
+        onChange={setValues}
+        resetKey={resetKey}
+        onValidityChange={onValidityChange}
+      />
+    );
+  }
+
+  async function enableRawJson(user: ReturnType<typeof userEvent.setup>) {
+    await user.click(screen.getByLabelText("Edit as JSON"));
+  }
+
+  it("replaces the widgets with one editor holding the current values", async () => {
+    const user = userEvent.setup();
+    renderWithMantine(<RawHarness initial={{ name: "a", count: 2 }} />);
+    expect(screen.getByLabelText(/^Name$/)).toBeInTheDocument();
+
+    await enableRawJson(user);
+
+    expect(screen.queryByLabelText(/^Name$/)).toBeNull();
+    expect(getAceTextByLabel(/Arguments JSON/)).toBe(
+      '{\n  "name": "a",\n  "count": 2\n}',
+    );
+  });
+
+  it("emits the edited object, and the widgets show it on the way back", async () => {
+    const user = userEvent.setup();
+    renderWithMantine(<RawHarness initial={{ name: "a", count: 2 }} />);
+    await enableRawJson(user);
+
+    await setAceTextByLabel(/Arguments JSON/, '{"name":"b","count":9}');
+    await user.click(screen.getByLabelText("Edit as JSON"));
+
+    expect((screen.getByLabelText(/^Name$/) as HTMLInputElement).value).toBe(
+      "b",
+    );
+    expect((screen.getByLabelText(/^Count$/) as HTMLInputElement).value).toBe(
+      "9",
+    );
+  });
+
+  // A field the schema does not declare has no widget, which is the case the
+  // escape hatch exists for — so it must survive the round trip.
+  it("carries a value no widget can express", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    renderWithMantine(
+      <SchemaForm schema={schema} values={{}} onChange={onChange} />,
+    );
+    await enableRawJson(user);
+    await setAceTextByLabel(/Arguments JSON/, '{"extra":{"deep":[1,2]}}');
+    expect(onChange).toHaveBeenLastCalledWith({ extra: { deep: [1, 2] } });
+  });
+
+  it("blocks submission while the draft does not parse, and clears it after", async () => {
+    const user = userEvent.setup();
+    const onValidityChange = vi.fn();
+    renderWithMantine(<RawHarness onValidityChange={onValidityChange} />);
+    await enableRawJson(user);
+
+    await setAceTextByLabel(/Arguments JSON/, '{"a":');
+    expect(onValidityChange).toHaveBeenLastCalledWith(true);
+    expect(screen.getByText(/Not valid JSON/)).toBeInTheDocument();
+
+    await setAceTextByLabel(/Arguments JSON/, '{"a":1}');
+    expect(onValidityChange).toHaveBeenLastCalledWith(false);
+  });
+
+  it("blocks submission for JSON that is not an object", async () => {
+    const user = userEvent.setup();
+    const onValidityChange = vi.fn();
+    renderWithMantine(<RawHarness onValidityChange={onValidityChange} />);
+    await enableRawJson(user);
+
+    await setAceTextByLabel(/Arguments JSON/, "[1,2]");
+    expect(onValidityChange).toHaveBeenLastCalledWith(true);
+    expect(screen.getByText(/must be a JSON object/i)).toBeInTheDocument();
+  });
+
+  // Turning the switch back off unmounts the editor, so text that can no longer
+  // be seen must not keep the submit button disabled.
+  it("clears the block when switched back to the widgets", async () => {
+    const user = userEvent.setup();
+    const onValidityChange = vi.fn();
+    renderWithMantine(<RawHarness onValidityChange={onValidityChange} />);
+    await enableRawJson(user);
+    await setAceTextByLabel(/Arguments JSON/, '{"a":');
+    expect(onValidityChange).toHaveBeenLastCalledWith(true);
+
+    await user.click(screen.getByLabelText("Edit as JSON"));
+    expect(onValidityChange).toHaveBeenLastCalledWith(false);
+  });
+
+  it("clears an empty editor to no arguments rather than erroring", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    renderWithMantine(
+      <SchemaForm schema={schema} values={{ name: "a" }} onChange={onChange} />,
+    );
+    await enableRawJson(user);
+    await setAceTextByLabel(/Arguments JSON/, "");
+    expect(onChange).toHaveBeenLastCalledWith({});
+    expect(screen.queryByText(/Not valid JSON/)).toBeNull();
+  });
+
+  // #2123: switching a root union drops the outgoing branch's values. The raw
+  // editor is seeded from what the form holds, so a round trip through it must
+  // not resurrect them.
+  it("does not resurrect a pruned branch's values", async () => {
+    const user = userEvent.setup();
+    const union: InspectorFormSchema = {
+      type: "object",
+      anyOf: [
+        {
+          type: "object",
+          title: "Email",
+          properties: { address: { type: "string", title: "Address" } },
+        },
+        {
+          type: "object",
+          title: "SMS",
+          properties: { phone: { type: "string", title: "Phone" } },
+        },
+      ],
+    };
+    renderWithMantine(
+      <RawHarness schema={union} initial={{ address: "a@b.c" }} />,
+    );
+
+    // Switch branches — `address` belongs to the outgoing shape and is dropped.
+    await user.click(screen.getByRole("textbox", { name: /Variant/ }));
+    await user.click(screen.getByRole("option", { name: "SMS" }));
+
+    await enableRawJson(user);
+    expect(getAceTextByLabel(/Arguments JSON/)).not.toContain("address");
+  });
+
+  // A draft is typed for one entity. Left in the box, it would be submitted for
+  // the next — the same reasoning `resetKey` documents for every other
+  // draft-holding field.
+  it("discards the draft when the form moves to another entity", async () => {
+    const user = userEvent.setup();
+    // Uncontrolled on purpose: the values must stay put so the only thing that
+    // could carry the text across is the editor's own draft.
+    const { rerender } = renderWithMantine(
+      <SchemaForm
+        schema={schema}
+        values={{}}
+        onChange={vi.fn()}
+        resetKey="first_tool"
+      />,
+    );
+    await enableRawJson(user);
+    await setAceTextByLabel(/Arguments JSON/, '{"name":"typed for the first"}');
+
+    rerender(
+      <SchemaForm
+        schema={schema}
+        values={{}}
+        onChange={vi.fn()}
+        resetKey="second_tool"
+      />,
+    );
+    expect(getAceTextByLabel(/Arguments JSON/)).toBe("{}");
+  });
+
+  // A per-field switch would offer to edit a fragment of the payload the outer
+  // switch already covers whole — and would nest one JSON editor inside another
+  // the moment both were on.
+  it("offers no switch on a nested object's form", async () => {
+    const user = userEvent.setup();
+    const nested: InspectorFormSchema = {
+      type: "object",
+      properties: {
+        outer: {
+          type: "object",
+          title: "Outer",
+          properties: { inner: { type: "string", title: "Inner" } },
+        },
+      },
+    };
+    renderWithMantine(<RawHarness schema={nested} />);
+    expect(screen.getAllByLabelText("Edit as JSON")).toHaveLength(1);
+
+    await enableRawJson(user);
+    expect(screen.getAllByLabelText("Edit as JSON")).toHaveLength(1);
   });
 });
 
diff --git a/clients/web/src/components/groups/SchemaForm/SchemaForm.tsx b/clients/web/src/components/groups/SchemaForm/SchemaForm.tsx
index 0f1468a32f..360347e4e5 100644
--- a/clients/web/src/components/groups/SchemaForm/SchemaForm.tsx
+++ b/clients/web/src/components/groups/SchemaForm/SchemaForm.tsx
@@ -1,11 +1,11 @@
 import {
   Checkbox,
   Group,
-  JsonInput,
   MultiSelect,
   NumberInput,
   Select,
   Stack,
+  Switch,
   Text,
   rem,
   Textarea,
@@ -23,6 +23,8 @@ import {
 } from "react";
 import { ClearButton } from "../../elements/ClearButton/ClearButton";
 import { EnlargeButton } from "../../elements/EnlargeButton/EnlargeButton";
+import { JsonEditor } from "../../elements/JsonEditor/JsonEditor";
+import { isJsonObject } from "../../../utils/jsonObjectDraft";
 import { useValueChange } from "../../../hooks/useValueChange";
 import type {
   InspectorFormSchema,
@@ -62,9 +64,13 @@ const BranchSelect = Select.withProps({
   allowDeselect: false,
 });
 
-const SchemaJsonInput = JsonInput.withProps({
-  formatOnBlur: true,
-  autosize: true,
+// The "Edit as JSON" flip for the whole arguments object (#2151). Right-aligned
+// on its own row so it reads as a mode for the form rather than as its first
+// field.
+const RawJsonSwitch = Switch.withProps({
+  label: "Edit as JSON",
+  size: "sm",
+  labelPosition: "left",
 });
 
 // A string field after its enlarge button has been used (#2042). `autosize`
@@ -416,14 +422,17 @@ function SchemaJsonField({
   useDraftValidity(fieldName, !hasInvalidDraft, onValidityChange);
 
   return (
-    <SchemaJsonInput
+    <JsonEditor
       {...inputProps}
+      ariaLabel={inputProps.label}
       value={draft}
       error={
         hasInvalidDraft
           ? "Not valid JSON — this field will be omitted"
           : undefined
       }
+      minLines={4}
+      maxLines={16}
       onChange={(text) => {
         setDraft(text);
         onChange(parseJsonDraft(text));
@@ -548,6 +557,113 @@ function SchemaNumberInput({
   );
 }
 
+/**
+ * What the raw-JSON editor's draft text currently means: the arguments object
+ * to emit, or why it cannot be emitted.
+ *
+ * Empty text is `{}` rather than an error — clearing the box is how "send no
+ * arguments" is spelled, and an empty editor wearing a red error would read as
+ * broken. A non-object (`[1,2]`, `"a"`, `42`) is reported separately from text
+ * that is not JSON at all, because they are different mistakes: the second is
+ * usually mid-edit, the first is a shape the form cannot use however finished
+ * it is.
+ */
+function parseRawArgumentsDraft(
+  text: string,
+): { ok: true; value: Record<string, unknown> } | { ok: false; error: string } {
+  if (text.trim() === "") return { ok: true, value: {} };
+  let parsed: unknown;
+  try {
+    parsed = JSON.parse(text);
+  } catch {
+    return { ok: false, error: "Not valid JSON — this cannot be submitted" };
+  }
+  if (!isJsonObject(parsed)) {
+    return {
+      ok: false,
+      error: "Arguments must be a JSON object (`{ … }`)",
+    };
+  }
+  return { ok: true, value: parsed };
+}
+
+interface RawArgumentsFieldProps {
+  values: Record<string, unknown>;
+  onChange: (values: Record<string, unknown>) => void;
+  disabled: boolean;
+  /** Mirrors {@link SchemaFormProps.onValidityChange} for this one editor. */
+  onInvalidChange: (hasInvalidDraft: boolean) => void;
+}
+
+/**
+ * The whole arguments object as one JSON document (#2151).
+ *
+ * v1 let a rendered form be flipped over to editing its arguments as JSON, and
+ * v2 shipped without the escape hatch — so a value the widgets cannot express,
+ * or a payload the user wants to paste in whole, had no route in.
+ *
+ * Same draft/value split as {@link SchemaJsonField}, and for the same reason:
+ * the text is the source of truth for what is displayed, the parent only ever
+ * sees a parsed object. Unlike `JsonObjectInput`, invalid text is **reported
+ * upward** rather than quietly dropped — this editor sits in front of a commit
+ * gesture (Execute / Open App / Submit), and #2020 says a draft that cannot be
+ * sent must disable it rather than silently submitting the last value that
+ * parsed.
+ *
+ * Note what this deliberately does *not* do: it never re-imposes the form's
+ * defaults or a branch's fields on the text. Switching a root union prunes the
+ * outgoing branch's values (#2123), and the pruned object is what arrives here
+ * — so a round trip through JSON cannot resurrect them.
+ */
+function RawArgumentsField({
+  values,
+  onChange,
+  disabled,
+  onInvalidChange,
+}: RawArgumentsFieldProps) {
+  const [draft, setDraft] = useState(() => serializeJson(values));
+  // Canonical JSON of the last object this editor emitted, so the re-sync below
+  // can tell an external change from the parent echoing back our own — the
+  // draft alone cannot, since invalid text parses to nothing and every parent
+  // change would then look external. See `JsonObjectInput` for the long form.
+  const [echoed, setEchoed] = useState(() => serializeJson(values));
+
+  const parsed = parseRawArgumentsDraft(draft);
+
+  useValueChange(serializeJson(values), (next) => {
+    if (next === echoed) return;
+    setDraft(next);
+    setEchoed(next);
+  });
+
+  // An effect, not a render-time call: validity also moves when the *parent*
+  // replaces the values, and reporting during that render would update another
+  // component mid-render. The cleanup clears the block, so toggling back to the
+  // widgets cannot leave submission disabled on text no longer on screen.
+  useEffect(() => {
+    onInvalidChange(!parsed.ok);
+    return () => onInvalidChange(false);
+  }, [parsed.ok, onInvalidChange]);
+
+  return (
+    <JsonEditor
+      ariaLabel="Arguments JSON"
+      value={draft}
+      disabled={disabled}
+      error={parsed.ok ? undefined : parsed.error}
+      minLines={8}
+      maxLines={24}
+      onChange={(text) => {
+        setDraft(text);
+        const next = parseRawArgumentsDraft(text);
+        if (!next.ok) return;
+        setEchoed(serializeJson(next.value));
+        onChange(next.value);
+      }}
+    />
+  );
+}
+
 export interface SchemaFormProps {
   schema: InspectorFormSchema;
   values: Record<string, unknown>;
@@ -587,6 +703,16 @@ export interface SchemaFormProps {
    * called when the answer changes, not on every render.
    */
   onValidityChange?: (hasInvalidDraft: boolean) => void;
+  /**
+   * Whether to offer the "Edit as JSON" switch that flips the whole arguments
+   * object over to a raw editor (#2151).
+   *
+   * Defaults to on. Passed `false` for a **nested** object field's form, where
+   * a per-field switch would offer to edit a fragment of the payload the outer
+   * switch already covers whole — and would put a second, narrower JSON editor
+   * inside the first the moment both were on.
+   */
+  allowRawJson?: boolean;
 }
 
 function getDefaultValue(fieldSchema: InspectorFormSchema): unknown {
@@ -613,6 +739,7 @@ export function SchemaForm({
   disabled = false,
   resetKey,
   onValidityChange,
+  allowRawJson = true,
 }: SchemaFormProps) {
   // Composition at the root of the schema, flattened before anything is
   // rendered (#2123). `allOf` is folded into `base`; a top-level `oneOf`/`anyOf`
@@ -670,6 +797,20 @@ export function SchemaForm({
     () => new Set(),
   );
 
+  // Whether the whole arguments object is being edited as JSON (#2151), and
+  // whether that editor's text can be sent. Kept apart from `invalidFields`
+  // rather than reported under a reserved name: field names come straight out
+  // of a server's schema, so any sentinel this form invented could collide with
+  // a real argument and clear a block the user cannot see.
+  const [rawJsonMode, setRawJsonMode] = useState(false);
+  const [rawJsonInvalid, setRawJsonInvalid] = useState(false);
+
+  // Stable so `RawArgumentsField`'s reporting effect subscribes once rather
+  // than per render — the same reason `reportFieldValidity` below is memoized.
+  const reportRawJsonValidity = useCallback((invalid: boolean) => {
+    setRawJsonInvalid(invalid);
+  }, []);
+
   // The names of string fields the user has enlarged into a multiline text area
   // (#2042). One-way by design — see EnlargeButton — so a name only ever enters
   // this set.
@@ -791,7 +932,7 @@ export function SchemaForm({
   // rendered holds no drafts, so an unmounted nested form must not leave the
   // outer one blocked. It runs in the same commit as the re-report, so the
   // transient `false` is never rendered.
-  const hasInvalidDraft = invalidFields.size > 0;
+  const hasInvalidDraft = invalidFields.size > 0 || rawJsonInvalid;
   useEffect(() => {
     notifyValidity.current?.(hasInvalidDraft);
     return () => notifyValidity.current?.(false);
@@ -1217,6 +1358,9 @@ export function SchemaForm({
               onValidityChange={(nestedInvalid) =>
                 reportFieldValidity(fieldName, !nestedInvalid)
               }
+              // The outer switch already edits this object as part of the whole
+              // payload; a second one here would nest a JSON editor inside it.
+              allowRawJson={false}
             />
           </IndentedStack>
         </Stack>
@@ -1245,6 +1389,15 @@ export function SchemaForm({
 
   return (
     <Stack gap="sm">
+      {allowRawJson && (
+        <Group justify="flex-end">
+          <RawJsonSwitch
+            checked={rawJsonMode}
+            disabled={disabled}
+            onChange={(event) => setRawJsonMode(event.currentTarget.checked)}
+          />
+        </Group>
+      )}
       {activeBranch && branches.length > 1 && (
         <BranchSelect
           data={branches.map((branch, index) => ({
@@ -1259,8 +1412,21 @@ export function SchemaForm({
           }
         />
       )}
-      {Object.entries(properties).map(([fieldName, fieldSchema]) =>
-        renderField(fieldName, fieldSchema),
+      {rawJsonMode ? (
+        // Keyed by the entity and branch, like every draft-holding field: text
+        // typed for one tool must not be left in the box for the next, and
+        // switching a root union prunes values the stale draft would restore.
+        <RawArgumentsField
+          key={draftKey ?? "raw-json"}
+          values={values}
+          onChange={onChange}
+          disabled={disabled}
+          onInvalidChange={reportRawJsonValidity}
+        />
+      ) : (
+        Object.entries(properties).map(([fieldName, fieldSchema]) =>
+          renderField(fieldName, fieldSchema),
+        )
       )}
     </Stack>
   );
diff --git a/clients/web/src/components/groups/ServerImportJsonModal/ServerImportJsonModal.test.tsx b/clients/web/src/components/groups/ServerImportJsonModal/ServerImportJsonModal.test.tsx
index 1627e37139..36b389b089 100644
--- a/clients/web/src/components/groups/ServerImportJsonModal/ServerImportJsonModal.test.tsx
+++ b/clients/web/src/components/groups/ServerImportJsonModal/ServerImportJsonModal.test.tsx
@@ -6,6 +6,7 @@ import {
   fireEvent,
   waitFor,
 } from "../../../test/renderWithMantine";
+import { setAceText } from "../../../test/aceEditor";
 import { ServerImportJsonModal } from "./ServerImportJsonModal";
 
 const npmJson = JSON.stringify({
@@ -31,10 +32,14 @@ const multiPackageJson = JSON.stringify({
   ],
 });
 
-/** The JSON textarea is the first textbox the panel renders. */
-function pasteJson(text: string) {
-  const textarea = screen.getAllByRole("textbox")[0];
-  fireEvent.change(textarea, { target: { value: text } });
+/**
+ * Replace the File Contents editor's document the way a paste would.
+ *
+ * Async because the panel's editor is Ace, which coalesces the paired
+ * remove/insert events a replace fires — see `test/aceEditor.ts`.
+ */
+async function pasteJson(text: string) {
+  await setAceText(text);
 }
 
 describe("ServerImportJsonModal", () => {
@@ -74,7 +79,7 @@ describe("ServerImportJsonModal", () => {
         onAddServer={vi.fn()}
       />,
     );
-    pasteJson(npmJson);
+    await pasteJson(npmJson);
     // Validation is debounced, so it appears after a short pause.
     expect(
       await screen.findByText(/Valid server.json for "io.github.me\/weather"/),
@@ -94,7 +99,7 @@ describe("ServerImportJsonModal", () => {
         onAddServer={vi.fn()}
       />,
     );
-    pasteJson("{not json");
+    await pasteJson("{not json");
     expect(await screen.findByText(/Invalid JSON/)).toBeInTheDocument();
   });
 
@@ -107,7 +112,7 @@ describe("ServerImportJsonModal", () => {
         onAddServer={vi.fn()}
       />,
     );
-    pasteJson(npmJson);
+    await pasteJson(npmJson);
     expect(
       await screen.findByText(/A server with id "weather" already exists/),
     ).toBeInTheDocument();
@@ -125,7 +130,7 @@ describe("ServerImportJsonModal", () => {
         onAddServer={onAddServer}
       />,
     );
-    pasteJson(npmJson);
+    await pasteJson(npmJson);
     // The env-var inputs appear after the debounced parse.
     await user.type(await screen.findByLabelText(/API_KEY/), "secret");
     await user.click(screen.getByRole("button", { name: "Add Server" }));
@@ -152,7 +157,7 @@ describe("ServerImportJsonModal", () => {
         onAddServer={onAddServer}
       />,
     );
-    pasteJson(npmJson);
+    await pasteJson(npmJson);
     await user.type(screen.getByLabelText("Override"), "my-weather");
     await waitFor(() =>
       expect(screen.getByRole("button", { name: "Add Server" })).toBeEnabled(),
@@ -173,7 +178,7 @@ describe("ServerImportJsonModal", () => {
         onAddServer={onAddServer}
       />,
     );
-    pasteJson(multiPackageJson);
+    await pasteJson(multiPackageJson);
     // The package radios appear after the debounced parse.
     await user.click(await screen.findByLabelText(/pypi: multi-py/));
     await user.click(screen.getByRole("button", { name: "Add Server" }));
@@ -193,7 +198,7 @@ describe("ServerImportJsonModal", () => {
         onAddServer={onAddServer}
       />,
     );
-    pasteJson(npmJson);
+    await pasteJson(npmJson);
     await waitFor(() =>
       expect(screen.getByRole("button", { name: "Add Server" })).toBeEnabled(),
     );
@@ -226,13 +231,13 @@ describe("ServerImportJsonModal", () => {
         onAddServer={onAddServer}
       />,
     );
-    pasteJson(npmJson);
+    await pasteJson(npmJson);
     await waitFor(() =>
       expect(screen.getByRole("button", { name: "Add Server" })).toBeEnabled(),
     );
     // Replace with invalid content; the button hasn't re-disabled yet (the
     // debounce is still pending), so clicking exercises the submit-time guard.
-    pasteJson("{not json");
+    await pasteJson("{not json");
     fireEvent.click(screen.getByRole("button", { name: "Add Server" }));
     expect(onAddServer).not.toHaveBeenCalled();
     expect(
@@ -276,7 +281,7 @@ describe("ServerImportJsonModal", () => {
     );
     const disclosure = screen.getByRole("button", { name: "File Contents" });
     expect(disclosure).toHaveAttribute("aria-expanded", "true");
-    pasteJson(npmJson);
+    await pasteJson(npmJson);
     await waitFor(
       () => expect(disclosure).toHaveAttribute("aria-expanded", "false"),
       { timeout: 3000 },
@@ -293,7 +298,7 @@ describe("ServerImportJsonModal", () => {
         onAddServer={vi.fn()}
       />,
     );
-    pasteJson(npmJson);
+    await pasteJson(npmJson);
     const disclosure = screen.getByRole("button", { name: "File Contents" });
     // Clear via the textarea's Clear button while still expanded.
     await user.click(screen.getAllByRole("button", { name: "Clear" })[0]);
@@ -311,7 +316,7 @@ describe("ServerImportJsonModal", () => {
         onAddServer={onAddServer}
       />,
     );
-    pasteJson(npmJson);
+    await pasteJson(npmJson);
     await user.type(screen.getByLabelText("Override"), "bad id!");
     expect(
       await screen.findByText(/Server id must use only letters/),
diff --git a/clients/web/src/components/groups/StructuredOutputPanel/StructuredOutputPanel.test.tsx b/clients/web/src/components/groups/StructuredOutputPanel/StructuredOutputPanel.test.tsx
index dd23d48921..026effe0bb 100644
--- a/clients/web/src/components/groups/StructuredOutputPanel/StructuredOutputPanel.test.tsx
+++ b/clients/web/src/components/groups/StructuredOutputPanel/StructuredOutputPanel.test.tsx
@@ -1,6 +1,7 @@
 import { describe, it, expect, vi } from "vitest";
 import userEvent from "@testing-library/user-event";
 import { renderWithMantine, screen } from "../../../test/renderWithMantine";
+import { getAceText } from "../../../test/aceEditor";
 import { StructuredOutputPanel } from "./StructuredOutputPanel";
 
 // The real CodeHighlight dynamic-imports the Prism runtime and each grammar
@@ -30,12 +31,14 @@ describe("StructuredOutputPanel", () => {
     expect(
       screen.getByRole("heading", { name: "Structured Output" }),
     ).toBeInTheDocument();
-    const code = screen.getByTestId("code-highlight");
-    expect(code).toHaveAttribute("data-language", "json");
-    expect(code).toHaveTextContent(/"total": 2/);
+    // Read through the editor rather than the DOM: Ace virtualizes its lines,
+    // so only what a viewport would show is in the document — and happy-dom has
+    // no layout to give it one.
+    const shown = getAceText();
+    expect(shown).toContain('"total": 2');
     // Nested values are inspectable field by field, not summarized away.
-    expect(code).toHaveTextContent(/"name": "Item A"/);
-    expect(code).toHaveTextContent(/"tags"/);
+    expect(shown).toContain('"name": "Item A"');
+    expect(shown).toContain('"tags"');
   });
 
   it("starts expanded by default", () => {
@@ -82,7 +85,7 @@ describe("StructuredOutputPanel", () => {
     expect(
       screen.getByRole("heading", { name: "Structured Output" }),
     ).toBeInTheDocument();
-    expect(screen.getByTestId("code-highlight")).toHaveTextContent("{}");
+    expect(getAceText()).toBe("{}");
   });
 });
 
diff --git a/clients/web/src/components/groups/ToolDetailPanel/ToolDetailPanel.test.tsx b/clients/web/src/components/groups/ToolDetailPanel/ToolDetailPanel.test.tsx
index 9e54987adc..298ce9fcc0 100644
--- a/clients/web/src/components/groups/ToolDetailPanel/ToolDetailPanel.test.tsx
+++ b/clients/web/src/components/groups/ToolDetailPanel/ToolDetailPanel.test.tsx
@@ -2,6 +2,7 @@ import { describe, it, expect, vi } from "vitest";
 import userEvent from "@testing-library/user-event";
 import type { Tool } from "@modelcontextprotocol/client";
 import { renderWithMantine, screen } from "../../../test/renderWithMantine";
+import { setAceTextByLabel } from "../../../test/aceEditor";
 import { ToolDetailPanel } from "./ToolDetailPanel";
 
 const simpleTool: Tool = {
@@ -572,7 +573,6 @@ describe("ToolDetailPanel", () => {
     });
 
     it("disables Execute while an optional field holds text it cannot send", async () => {
-      const user = userEvent.setup();
       renderWithMantine(
         <ToolDetailPanel {...baseProps} tool={optionalJsonTool} />,
       );
@@ -582,11 +582,10 @@ describe("ToolDetailPanel", () => {
       // The draft never reaches `formValues` — the field reports `undefined`
       // for text it cannot parse — so only the form's validity channel makes
       // this visible to the gate.
-      const jsonInput = screen.getByLabelText(/Payload/);
-      await user.type(jsonInput, "x");
+      await setAceTextByLabel(/Payload/, "x");
       expect(execute).toBeDisabled();
 
-      await user.clear(jsonInput);
+      await setAceTextByLabel(/Payload/, "");
       expect(execute).not.toBeDisabled();
     });
   });
diff --git a/clients/web/src/components/groups/ToolResultPanel/ToolResultPanel.test.tsx b/clients/web/src/components/groups/ToolResultPanel/ToolResultPanel.test.tsx
index 0820e01bd8..e1d783a4c0 100644
--- a/clients/web/src/components/groups/ToolResultPanel/ToolResultPanel.test.tsx
+++ b/clients/web/src/components/groups/ToolResultPanel/ToolResultPanel.test.tsx
@@ -6,6 +6,7 @@ import {
   screen,
   waitFor,
 } from "../../../test/renderWithMantine";
+import { getAceText } from "../../../test/aceEditor";
 import { ToolResultPanel } from "./ToolResultPanel";
 import { resultHasResourceLinks } from "./toolResultUtils";
 
@@ -78,9 +79,9 @@ describe("ToolResultPanel", () => {
       screen.getByRole("button", { name: "Expand resource demo://r/1" }),
     );
     expect(onReadResource).toHaveBeenCalledWith("demo://r/1");
-    await waitFor(() =>
-      expect(screen.getByText(/"linked body"/)).toBeInTheDocument(),
-    );
+    // The body lands in the read-only JSON editor, whose lines are
+    // virtualized — so it is read through the editor, not the DOM.
+    await waitFor(() => expect(getAceText()).toContain('"linked body"'));
   });
 
   it("collapses consecutive resource_link blocks into a single box", () => {
diff --git a/clients/web/src/components/screens/ProtocolScreen/ProtocolScreen.tsx b/clients/web/src/components/screens/ProtocolScreen/ProtocolScreen.tsx
index cf6698d20a..4a7a9c6619 100644
--- a/clients/web/src/components/screens/ProtocolScreen/ProtocolScreen.tsx
+++ b/clients/web/src/components/screens/ProtocolScreen/ProtocolScreen.tsx
@@ -1,5 +1,6 @@
 import { useCallback, useMemo } from "react";
 import { Card, Flex, Stack } from "@mantine/core";
+import type { ReplayParamsOverride } from "../../../lib/protocolReplay";
 import type { ProtocolEra } from "@modelcontextprotocol/client";
 import type {
   MessageEntry,
@@ -22,7 +23,7 @@ export interface ProtocolScreenProps {
   onExport: () => void;
   onClearSection: (section: "pinned" | "history") => void;
   onExportSection: (section: "pinned" | "history") => void;
-  onReplay: (id: string) => void;
+  onReplay: (id: string, overrideParams?: ReplayParamsOverride) => void;
   onTogglePin: (id: string) => void;
   sortDirection: SortDirection;
   onSortChange: (next: SortDirection) => void;
diff --git a/clients/web/src/components/views/InspectorView/InspectorView.tsx b/clients/web/src/components/views/InspectorView/InspectorView.tsx
index 43749729c5..1d679cd77a 100644
--- a/clients/web/src/components/views/InspectorView/InspectorView.tsx
+++ b/clients/web/src/components/views/InspectorView/InspectorView.tsx
@@ -7,6 +7,7 @@ import {
   type Ref,
 } from "react";
 import type { MalformedListItem } from "@inspector/core/mcp";
+import type { ReplayParamsOverride } from "../../../lib/protocolReplay";
 import type { DeepLink, DeepLinkParseStatus } from "../../../utils/deepLink";
 import {
   AppShell,
@@ -615,7 +616,7 @@ export interface InspectorViewProps {
   onExportProtocol: () => void;
   onClearProtocolSection: (section: "pinned" | "history") => void;
   onExportProtocolSection: (section: "pinned" | "history") => void;
-  onReplayProtocol: (id: string) => void;
+  onReplayProtocol: (id: string, overrideParams?: ReplayParamsOverride) => void;
   onTogglePinProtocol: (id: string) => void;
 
   onNetworkUiChange: (next: NetworkUiState) => void;
diff --git a/clients/web/src/hooks/useExportActions.test.tsx b/clients/web/src/hooks/useExportActions.test.tsx
index db0bffd8bd..0f5d167bb2 100644
--- a/clients/web/src/hooks/useExportActions.test.tsx
+++ b/clients/web/src/hooks/useExportActions.test.tsx
@@ -232,6 +232,38 @@ describe("useExportActions", () => {
       expect(notificationsMock.show).not.toHaveBeenCalled();
     });
 
+    // Edit-and-replay dispatches through this same call, so the only thing that
+    // distinguishes it is the params (#2151).
+    it("re-issues with edited params when given an override", async () => {
+      replayProtocolRequest.mockResolvedValue(null);
+      const h = harness({ messages: [request("r1", "tools/list")] });
+      h.run((api) => api.onReplayProtocol("r1", { a: 2, b: "x" }));
+      await vi.waitFor(() => {
+        expect(replayProtocolRequest).toHaveBeenCalledWith(
+          expect.anything(),
+          "tools/list",
+          { a: 2, b: "x" },
+          [],
+        );
+      });
+    });
+
+    // `null` is an edit to no params at all — an emptied editor — and must not
+    // be read as "no edit", which would silently re-send the original params.
+    it("re-issues with no params when the override is null", async () => {
+      replayProtocolRequest.mockResolvedValue(null);
+      const h = harness({ messages: [request("r1", "tools/list")] });
+      h.run((api) => api.onReplayProtocol("r1", null));
+      await vi.waitFor(() => {
+        expect(replayProtocolRequest).toHaveBeenCalledWith(
+          expect.anything(),
+          "tools/list",
+          undefined,
+          [],
+        );
+      });
+    });
+
     it("surfaces a pre-flight refusal as a toast", async () => {
       replayProtocolRequest.mockResolvedValue("Nope.");
       const h = harness({ messages: [request("r1", "tools/list")] });
diff --git a/clients/web/src/hooks/useExportActions.ts b/clients/web/src/hooks/useExportActions.ts
index 68f0f10f47..f367df0a73 100644
--- a/clients/web/src/hooks/useExportActions.ts
+++ b/clients/web/src/hooks/useExportActions.ts
@@ -12,7 +12,10 @@ import type {
 } from "@inspector/core/mcp/types.js";
 import type { LogEntryData } from "../components/elements/LogEntry/LogEntry";
 import { buildExportFilename, downloadJsonFile } from "../lib/downloadFile";
-import { replayProtocolRequest } from "../lib/protocolReplay";
+import {
+  replayProtocolRequest,
+  type ReplayParamsOverride,
+} from "../lib/protocolReplay";
 
 /** One Protocol panel section, split by pin membership. */
 export type ProtocolSection = "pinned" | "history";
@@ -56,7 +59,12 @@ export interface ExportActions {
   onExportConsole: () => void;
   onClearProtocolSection: (section: ProtocolSection) => void;
   onExportProtocolSection: (section: ProtocolSection) => void;
-  onReplayProtocol: (id: string) => void;
+  /**
+   * Replay a Protocol entry. `overrideParams` replaces the entry's own params,
+   * which is how the Edit-and-replay editor dispatches (#2151) — same code
+   * path, same method gate, same failure toast.
+   */
+  onReplayProtocol: (id: string, overrideParams?: ReplayParamsOverride) => void;
 }
 
 /**
@@ -179,15 +187,19 @@ export function useExportActions({
   // call error already shows up as the replayed entry's Error status, so only a
   // pre-flight failure (nothing logged) needs the fallback toast.
   const onReplayProtocol = useCallback(
-    (id: string) => {
+    (id: string, overrideParams?: ReplayParamsOverride) => {
       if (!inspectorClient) return;
       const entry = messages.find((m) => m.id === id);
       if (!entry || !("method" in entry.message)) return;
       const { method } = entry.message;
+      // See `ReplayParamsOverride`: `null` is an edit to no params at all,
+      // `undefined` is no edit — so only the latter falls back to the entry's.
       const params =
-        "params" in entry.message
-          ? (entry.message.params as Record<string, unknown> | undefined)
-          : undefined;
+        overrideParams === undefined
+          ? "params" in entry.message
+            ? (entry.message.params as Record<string, unknown> | undefined)
+            : undefined
+          : (overrideParams ?? undefined);
       void replayProtocolRequest(inspectorClient, method, params, tools)
         .then((reason) => {
           if (reason) {
diff --git a/clients/web/src/lib/protocolReplay.ts b/clients/web/src/lib/protocolReplay.ts
index 2eff86a542..609ea430bf 100644
--- a/clients/web/src/lib/protocolReplay.ts
+++ b/clients/web/src/lib/protocolReplay.ts
@@ -58,6 +58,18 @@ export type ReplayClient = Pick<
   | "ping"
 >;
 
+/**
+ * Params supplied by the Edit-and-replay editor, in place of the entry's own
+ * (#2151).
+ *
+ * `undefined` and `null` are **not** interchangeable, which is why this is not
+ * just an optional object: `undefined` means the user did not edit anything —
+ * replay the entry verbatim — while `null` means they cleared the editor, which
+ * is a legitimate replay of a params-less request. Collapsing the two would
+ * make an emptied editor silently re-send the original params.
+ */
+export type ReplayParamsOverride = Record<string, unknown> | null | undefined;
+
 export async function replayProtocolRequest(
   client: ReplayClient,
   method: string,
diff --git a/clients/web/src/test/aceEditor.ts b/clients/web/src/test/aceEditor.ts
index 1243926c21..fa95e82f6b 100644
--- a/clients/web/src/test/aceEditor.ts
+++ b/clients/web/src/test/aceEditor.ts
@@ -1,4 +1,4 @@
-import { act } from "@testing-library/react";
+import { act, screen } from "@testing-library/react";
 import type { Ace } from "ace-builds";
 
 /**
@@ -56,3 +56,40 @@ export async function setAceText(
 export function aceLabel(label: string): RegExp {
   return new RegExp(label.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"));
 }
+
+/**
+ * The editor whose accessible name matches `label`, for a screen holding more
+ * than one — a form with two JSON fields, or a JSON field beside the
+ * raw-arguments editor.
+ *
+ * Goes via the labelled text input rather than indexing `.ace_editor` nodes,
+ * because document order is not something a test should depend on: adding a
+ * field above the one under test would silently retarget every assertion.
+ */
+export function getAceEditorByLabel(label: string | RegExp): Ace.Editor {
+  const input = screen.getByLabelText(
+    typeof label === "string" ? aceLabel(label) : label,
+  );
+  const container = input.closest(".ace_editor");
+  const editor = (
+    container as (HTMLElement & { env?: { editor?: Ace.Editor } }) | null
+  )?.env?.editor;
+  if (!editor) throw new Error(`No Ace editor labelled ${String(label)}`);
+  return editor;
+}
+
+/** {@link getAceText} for one of several editors. */
+export function getAceTextByLabel(label: string | RegExp): string {
+  return getAceEditorByLabel(label).getValue();
+}
+
+/** {@link setAceText} for one of several editors. */
+export async function setAceTextByLabel(
+  label: string | RegExp,
+  text: string,
+): Promise<void> {
+  const editor = getAceEditorByLabel(label);
+  await act(async () => {
+    editor.setValue(text, 1);
+  });
+}

From c9fb461bf07c313a2d46abfe6d81048ef5531305 Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Thu, 27 Aug 2026 02:44:21 -0400
Subject: [PATCH 02/14] fix(web): address Copilot review on the shared JSON
 editor
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Cap the read-only editor's `maxLines` at 200. Uncapped, Ace renders every
  line of a payload and its viewport virtualization never engages — which
  matters because the Protocol and Network lists are not virtualized and keep
  each entry's payload mounted inside its `Collapse`. 200 is chosen so no real
  payload nests a scrollbar inside its host's while the pathological one stays
  bounded; the StructuredOutputPanel `Large` story now pins both halves (full
  payload in the document, only part of it in the DOM).

- Take a disabled editor out of the tab order and give it `aria-disabled`.
  Ace has no disabled state, so its hidden textarea kept `tabindex="0"` and a
  keyboard user could tab into a field every neighbouring control had dropped
  — landing somewhere that looks editable and swallows what they type. A
  merely read-only editor stays focusable, since a payload has to be
  keyboard-scrollable (WCAG SC 2.1.1).

- Reword a confusing comment in the EditReplayModal test.

The `Disabled` story additionally scopes the axe `color-contrast` rule off:
WCAG 1.4.3 exempts inactive components, and axe cannot see that the dimmed
gutter belongs to one because the disabled state lives on Ace's hidden
textarea. Scoped to that one story so the rule still covers everything else.

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>
---
 .../elements/ContentViewer/ContentViewer.tsx  | 36 ++++++++++++-----
 .../JsonEditor/JsonEditor.stories.tsx         | 29 ++++++++++++++
 .../elements/JsonEditor/JsonEditor.test.tsx   | 40 +++++++++++++++++++
 .../elements/JsonEditor/JsonEditor.tsx        | 23 ++++++++++-
 .../EditReplayModal/EditReplayModal.test.tsx  |  5 ++-
 .../StructuredOutputPanel.stories.tsx         | 32 +++++++++++----
 6 files changed, 144 insertions(+), 21 deletions(-)

diff --git a/clients/web/src/components/elements/ContentViewer/ContentViewer.tsx b/clients/web/src/components/elements/ContentViewer/ContentViewer.tsx
index 998ae42ae6..7d7fbfc339 100644
--- a/clients/web/src/components/elements/ContentViewer/ContentViewer.tsx
+++ b/clients/web/src/components/elements/ContentViewer/ContentViewer.tsx
@@ -62,6 +62,12 @@ export interface ContentViewerProps {
   wrap?: boolean;
 }
 
+/**
+ * Rows a read-only JSON payload renders before the editor scrolls internally
+ * instead of growing. See the note at the `JsonEditor` that uses it.
+ */
+const JSON_DISPLAY_MAX_LINES = 200;
+
 function buildDataUri(mimeType: string, data: string): string {
   return `data:${mimeType};base64,${data}`;
 }
@@ -186,18 +192,26 @@ function JsonContent({ text, copyable }: { text: string; copyable: boolean }) {
         ariaLabel="JSON content"
         value={formatJson(text)}
         readOnly
-        // Sized to the payload, both ways. A two-line result must not open six
-        // rows of blank editor — and an uncapped `maxLines` is what keeps a
-        // large one from growing its *own* scroller inside the host's: every
-        // consumer here already provides the scroll container it wants (the
-        // structured-output section caps at `mah` and scrolls; a result panel
-        // scrolls whole), and a second scrollbar nested in the first is both
-        // worse to use and a change to layout this swap has no business making.
-        // It also keeps every line in the DOM, as the preformatted block it
-        // replaces did — Ace renders only what its own viewport covers, so a
-        // capped editor would silently drop the rest from find-in-page.
+        // Sized to the payload, and capped.
+        //
+        // `minLines={1}` so a two-line result does not open six rows of blank
+        // editor. The cap is the more interesting number, and it is a trade:
+        //
+        // - Below it the editor grows to fit, so the *host's* scroll container
+        //   is the only one — every consumer already provides the one it wants
+        //   (the structured-output section caps at `mah` and scrolls; a result
+        //   panel scrolls whole), and nesting a second scrollbar inside it is
+        //   worse to use.
+        // - Above it Ace scrolls internally and renders only the rows its own
+        //   viewport covers. That is the point of having a cap at all: the
+        //   Protocol and Network lists are not virtualized and keep every
+        //   entry's payload mounted inside its `Collapse`, so an uncapped
+        //   editor would put a whole 10k-line response in the DOM per entry.
+        //
+        // 200 is chosen so essentially no real payload nests a scrollbar while
+        // the pathological one stays bounded.
         minLines={1}
-        maxLines={Infinity}
+        maxLines={JSON_DISPLAY_MAX_LINES}
       />
     </CopyableWrapper>
   );
diff --git a/clients/web/src/components/elements/JsonEditor/JsonEditor.stories.tsx b/clients/web/src/components/elements/JsonEditor/JsonEditor.stories.tsx
index 7b0128e2ad..356150b6aa 100644
--- a/clients/web/src/components/elements/JsonEditor/JsonEditor.stories.tsx
+++ b/clients/web/src/components/elements/JsonEditor/JsonEditor.stories.tsx
@@ -78,6 +78,11 @@ export const WithError: Story = {
   },
 };
 
+/**
+ * Switched off by the form around it — what a tool panel does to every field
+ * while a call is in flight. Ace has no disabled state, so this is read-only
+ * plus a dimmed wrapper, `aria-disabled`, and removal from the tab order.
+ */
 export const Disabled: Story = {
   args: {
     ariaLabel: "Payload JSON",
@@ -86,6 +91,30 @@ export const Disabled: Story = {
     disabled: true,
     onChange: () => {},
   },
+  parameters: {
+    a11y: {
+      config: {
+        rules: [
+          // Re-stated because a story's `a11y.config.rules` replaces the
+          // preview's rather than merging with it — dropping this would make
+          // `region` fire here and nowhere else.
+          { id: "region", enabled: false },
+          // WCAG 1.4.3 exempts "inactive user interface components" from the
+          // contrast minimum, and this whole editor is one: the dimming is the
+          // affordance that says so. axe cannot see that, because the disabled
+          // state lives on Ace's hidden textarea while the text it measures is
+          // in the separately-rendered gutter — so it reports the dimmed line
+          // numbers as a violation on every row.
+          //
+          // Scoped to this story on purpose. Every other story here, and the
+          // whole read-only path, is still contrast-checked; a preview-level
+          // disable would retire the rule for the enabled editor too, which is
+          // where it has something to catch.
+          { id: "color-contrast", enabled: false },
+        ],
+      },
+    },
+  },
 };
 
 /**
diff --git a/clients/web/src/components/elements/JsonEditor/JsonEditor.test.tsx b/clients/web/src/components/elements/JsonEditor/JsonEditor.test.tsx
index a8824f0213..ae84b0c3c9 100644
--- a/clients/web/src/components/elements/JsonEditor/JsonEditor.test.tsx
+++ b/clients/web/src/components/elements/JsonEditor/JsonEditor.test.tsx
@@ -136,6 +136,46 @@ describe("JsonEditor", () => {
       expect(document.querySelector(".json-editor-readonly")).not.toBeNull();
     });
 
+    // Ace has no disabled state, so its hidden textarea keeps `tabindex="0"`
+    // unless something takes it out — leaving a keyboard user able to tab into
+    // a field the rest of the form has switched off, with nothing announced.
+    it("leaves the tab order and says so when disabled", () => {
+      const { rerender } = renderWithMantine(
+        <JsonEditor ariaLabel={LABEL} value='{"a":1}' onChange={vi.fn()} />,
+      );
+      const input = screen.getByLabelText(aceLabel(LABEL));
+      expect(input).toHaveAttribute("tabindex", "0");
+      expect(input).not.toHaveAttribute("aria-disabled");
+
+      rerender(
+        <JsonEditor
+          ariaLabel={LABEL}
+          value='{"a":1}'
+          onChange={vi.fn()}
+          disabled
+        />,
+      );
+      expect(input).toHaveAttribute("tabindex", "-1");
+      expect(input).toHaveAttribute("aria-disabled", "true");
+
+      // …and both are restored when the form re-enables.
+      rerender(
+        <JsonEditor ariaLabel={LABEL} value='{"a":1}' onChange={vi.fn()} />,
+      );
+      expect(input).toHaveAttribute("tabindex", "0");
+      expect(input).not.toHaveAttribute("aria-disabled");
+    });
+
+    // Read-only is not disabled: a payload the user may need to scroll past the
+    // bottom of has to be reachable by keyboard (WCAG SC 2.1.1), which is why
+    // the preformatted block this replaced carried `tabIndex={0}`.
+    it("stays focusable when merely read-only", () => {
+      renderWithMantine(<JsonEditor ariaLabel={LABEL} value='{"a":1}' />);
+      const input = screen.getByLabelText(aceLabel(LABEL));
+      expect(input).toHaveAttribute("tabindex", "0");
+      expect(input).not.toHaveAttribute("aria-disabled");
+    });
+
     it("is read-only and dimmed when disabled", () => {
       const { container } = renderWithMantine(
         <JsonEditor
diff --git a/clients/web/src/components/elements/JsonEditor/JsonEditor.tsx b/clients/web/src/components/elements/JsonEditor/JsonEditor.tsx
index 469e8600f1..17f436cda8 100644
--- a/clients/web/src/components/elements/JsonEditor/JsonEditor.tsx
+++ b/clients/web/src/components/elements/JsonEditor/JsonEditor.tsx
@@ -176,7 +176,28 @@ export function JsonEditor({
     } else {
       element.removeAttribute("aria-invalid");
     }
-  }, [wrapperId, hasError, description]);
+
+    // `disabled` and `readOnly` are different states here, and only one of them
+    // leaves the tab order.
+    //
+    // A **read-only** editor is a rendering of a payload the user may need to
+    // read past the bottom of, so it stays focusable — the same reason the
+    // preformatted block it replaced carries `tabIndex={0}` (WCAG SC 2.1.1).
+    //
+    // A **disabled** one is a control the rest of the form has switched off. Ace
+    // has no disabled state, so without this its hidden textarea keeps
+    // `tabindex="0"` and a keyboard user tabs into a field every other control
+    // beside it has dropped out of the order — landing somewhere that looks
+    // editable and silently swallows what they type. Assistive tech is told
+    // nothing either, since dimming is a purely visual signal.
+    if (disabled) {
+      element.setAttribute("aria-disabled", "true");
+      element.tabIndex = -1;
+    } else {
+      element.removeAttribute("aria-disabled");
+      element.tabIndex = 0;
+    }
+  }, [wrapperId, hasError, description, disabled]);
 
   return (
     <Input.Wrapper
diff --git a/clients/web/src/components/groups/EditReplayModal/EditReplayModal.test.tsx b/clients/web/src/components/groups/EditReplayModal/EditReplayModal.test.tsx
index 6f5d2eafe3..2d7096831d 100644
--- a/clients/web/src/components/groups/EditReplayModal/EditReplayModal.test.tsx
+++ b/clients/web/src/components/groups/EditReplayModal/EditReplayModal.test.tsx
@@ -100,8 +100,9 @@ describe("EditReplayModal", () => {
     expect(onSend).not.toHaveBeenCalled();
   });
 
-  // The draft belongs to the sitting the user opened it in. Reopening must show
-  // the entry's params again, not whatever they typed and abandoned last time.
+  // The draft belongs to the one opening of the modal it was typed in.
+  // Reopening must show the entry's params again, not whatever was typed and
+  // abandoned last time.
   it("reseeds from the entry when reopened", async () => {
     const { rerender } = renderWithMantine(
       <EditReplayModal {...baseProps} params={{ name: "echo" }} />,
diff --git a/clients/web/src/components/groups/StructuredOutputPanel/StructuredOutputPanel.stories.tsx b/clients/web/src/components/groups/StructuredOutputPanel/StructuredOutputPanel.stories.tsx
index 78f1ea8dfa..56ffea187c 100644
--- a/clients/web/src/components/groups/StructuredOutputPanel/StructuredOutputPanel.stories.tsx
+++ b/clients/web/src/components/groups/StructuredOutputPanel/StructuredOutputPanel.stories.tsx
@@ -16,8 +16,10 @@ const flat = {
   city: "San Francisco",
 };
 
-// Long enough that the payload exceeds the section's max height and scrolls
-// within it rather than pushing the rest of the result panel down.
+// Long enough on both counts that matter: the payload exceeds the section's max
+// height (so it scrolls within it rather than pushing the rest of the result
+// panel down) *and* it exceeds the read-only editor's line cap, so Ace renders
+// only the rows its own viewport covers.
 const large = {
   rows: Array.from({ length: 60 }, (_, index) => ({
     id: index + 1,
@@ -45,8 +47,8 @@ export const Nested: Story = {
       canvas.getByRole("heading", { name: "Structured Output" }),
     ).toBeInTheDocument();
     // The section starts expanded, so the payload is visible without a click.
-    // Asserted on the container's text: once the Prism grammar loads, the JSON
-    // is split across per-token elements, so no single node holds the value.
+    // Asserted on the container's text: the JSON renders in Ace, which puts
+    // each token in its own element, so no single node holds the value.
     await waitFor(() =>
       expect(canvasElement.textContent).toContain('"Item A"'),
     );
@@ -62,14 +64,30 @@ export const Flat: Story = {
 // A payload taller than the section's cap scrolls inside it rather than
 // pushing the rest of the result panel down. Asserted on the real geometry,
 // so dropping `mah` (or moving it to the wrong element) fails here.
+//
+// It also pins the read-only editor's line cap (#2151). The Protocol and
+// Network lists are not virtualized and keep every entry's payload mounted
+// inside its `Collapse`, so an uncapped editor would put a whole large response
+// in the DOM per entry. The two assertions below are the difference between
+// "capped" and "truncated": the full payload is in the *document*, and only
+// part of it is in the *DOM*.
 export const Large: Story = {
   args: {
     structuredContent: large,
   },
   play: async ({ canvasElement }) => {
-    await waitFor(() =>
-      expect(canvasElement.textContent).toContain('"Row 60"'),
-    );
+    const editorNode = await waitFor(() => {
+      const node = canvasElement.querySelector(".ace_editor");
+      if (!node) throw new Error("JSON editor not mounted");
+      return node as HTMLElement & { env: { editor: { getValue(): string } } };
+    });
+
+    // Nothing is lost: the last row is in the document the editor holds, so it
+    // is reachable by scrolling, folding, and the copy button.
+    await expect(editorNode.env.editor.getValue()).toContain('"Row 60"');
+    // …and it is not rendered, which is the virtualization the cap buys.
+    await expect(canvasElement.textContent).not.toContain('"Row 60"');
+
     const viewport = canvasElement.querySelector(
       ".mantine-ScrollArea-viewport",
     );

From b4083ee5fb73d37c87d429f82fbe0c72899172dd Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Thu, 27 Aug 2026 03:01:47 -0400
Subject: [PATCH 03/14] fix(web): reject non-finite numbers, and keep the
 branch picker with the raw draft
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two more from Copilot's second pass, both real.

- Every JSON-draft parser now rejects a value `JSON.stringify` cannot write
  back. `JSON.parse("1e400")` yields `Infinity`, which serializes as `null` —
  so an editor showing `1e400` would have sent `null`, which is exactly the
  misreport `isSerializableJson` was written for. `parseJsonObjectDraft`
  already guarded; the raw-arguments editor and the Edit-and-replay modal did
  not, and neither did `SchemaJsonField`'s `parseJsonDraft` — the last
  predates this PR but is the same defect in the same family, so it is fixed
  with them rather than left as the odd one out.

- Editing a root union's discriminator in the raw document now moves the
  Variant picker. Nothing in `values` names a branch, so the index is held by
  the form and was only re-derived on `resetKey` or a rewritten union; a raw
  edit had no other signal, so `{"kind":"email"}` → `{"kind":"sms",…}` left
  the picker on Email and switching back to the widgets rendered the Email
  branch over SMS values. The current branch is kept when the values identify
  none, since the discriminator is absent every time it is retyped.

The raw editor is keyed by entity only, not by entity-and-branch like the
per-field editors: it holds the whole arguments object, so a branch move must
re-sync it rather than remount it — a remount would reformat the text being
typed and drop the caret to the top.

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>
---
 .../EditReplayModal/EditReplayModal.test.tsx  |  10 ++
 .../EditReplayModal/EditReplayModal.tsx       |  15 +-
 .../groups/SchemaForm/SchemaForm.test.tsx     | 137 ++++++++++++++++++
 .../groups/SchemaForm/SchemaForm.tsx          |  64 +++++++-
 4 files changed, 218 insertions(+), 8 deletions(-)

diff --git a/clients/web/src/components/groups/EditReplayModal/EditReplayModal.test.tsx b/clients/web/src/components/groups/EditReplayModal/EditReplayModal.test.tsx
index 2d7096831d..5ba5d9d6a7 100644
--- a/clients/web/src/components/groups/EditReplayModal/EditReplayModal.test.tsx
+++ b/clients/web/src/components/groups/EditReplayModal/EditReplayModal.test.tsx
@@ -88,6 +88,16 @@ describe("EditReplayModal", () => {
     expect(screen.getByText(/must be a JSON object/i)).toBeInTheDocument();
   });
 
+  // `JSON.parse("1e400")` yields `Infinity`, which `JSON.stringify` writes back
+  // as `null` — so Send would dispatch a number the user never typed while the
+  // editor still showed what they wrote.
+  it("disables Send for a number that cannot survive being sent", async () => {
+    renderWithMantine(<EditReplayModal {...baseProps} />);
+    await setAceText('{"limit":1e400}');
+    expect(screen.getByRole("button", { name: "Send" })).toBeDisabled();
+    expect(screen.getByText(/Numbers must be finite/)).toBeInTheDocument();
+  });
+
   it("closes without sending when cancelled", async () => {
     const user = userEvent.setup();
     const onSend = vi.fn();
diff --git a/clients/web/src/components/groups/EditReplayModal/EditReplayModal.tsx b/clients/web/src/components/groups/EditReplayModal/EditReplayModal.tsx
index e047651760..784db9b77e 100644
--- a/clients/web/src/components/groups/EditReplayModal/EditReplayModal.tsx
+++ b/clients/web/src/components/groups/EditReplayModal/EditReplayModal.tsx
@@ -2,6 +2,7 @@ import { useState } from "react";
 import { Button, Group, Modal, Stack, Text } from "@mantine/core";
 import { JsonEditor } from "../../elements/JsonEditor/JsonEditor";
 import { isJsonObject } from "../../../utils/jsonObjectDraft";
+import { isSerializableJson } from "@inspector/core/json/jsonUtils.js";
 
 export interface EditReplayModalProps {
   opened: boolean;
@@ -34,7 +35,8 @@ const Footer = Group.withProps({ justify: "flex-end", gap: "sm" });
  * genuinely carries none, and an empty editor wearing a red error would read as
  * broken. A non-object is reported separately from text that is not JSON at
  * all: JSON-RPC `params` must be a structured value, so `42` is a shape that
- * cannot be sent however finished it is.
+ * cannot be sent however finished it is. A number that overflows is a third
+ * case, and the subtlest — see the note on that branch.
  */
 function parseParamsDraft(
   text: string,
@@ -51,6 +53,17 @@ function parseParamsDraft(
   if (!isJsonObject(parsed)) {
     return { ok: false, error: "Params must be a JSON object (`{ … }`)" };
   }
+  // `JSON.parse` accepts numeric literals it cannot represent: `1e400` parses to
+  // `Infinity`, which `JSON.stringify` then writes as `null`. Accepting it here
+  // would show the user one value and send another — the one thing an inspector
+  // must not do. Same guard, same reason, as `parseJsonObjectDraft`.
+  if (!isSerializableJson(parsed)) {
+    return {
+      ok: false,
+      error:
+        "Numbers must be finite — a value like `1e400` overflows and would be sent as null",
+    };
+  }
   return { ok: true, value: parsed };
 }
 
diff --git a/clients/web/src/components/groups/SchemaForm/SchemaForm.test.tsx b/clients/web/src/components/groups/SchemaForm/SchemaForm.test.tsx
index 6f913944ad..08eab255da 100644
--- a/clients/web/src/components/groups/SchemaForm/SchemaForm.test.tsx
+++ b/clients/web/src/components/groups/SchemaForm/SchemaForm.test.tsx
@@ -1899,6 +1899,143 @@ describe("SchemaForm raw JSON (#2151)", () => {
     expect(screen.queryByText(/Not valid JSON/)).toBeNull();
   });
 
+  // `JSON.parse("1e400")` yields `Infinity`, which `JSON.stringify` writes back
+  // as `null`. Submitting it would send a number the user never typed while the
+  // editor still showed what they wrote.
+  it("blocks submission for a number that cannot survive being sent", async () => {
+    const user = userEvent.setup();
+    const onValidityChange = vi.fn();
+    renderWithMantine(<RawHarness onValidityChange={onValidityChange} />);
+    await enableRawJson(user);
+
+    await setAceTextByLabel(/Arguments JSON/, '{"count":1e400}');
+    expect(onValidityChange).toHaveBeenLastCalledWith(true);
+    expect(screen.getByText(/Numbers must be finite/)).toBeInTheDocument();
+  });
+
+  // Nothing in `values` names a branch, so the picker's index is held by the
+  // form. Editing the discriminator in the raw document is a change to which
+  // branch is in effect, and it carries no other signal — without the re-derive
+  // the picker keeps showing the outgoing branch over the incoming values.
+  it("moves the branch picker when the raw document changes the discriminator", async () => {
+    const user = userEvent.setup();
+    const union: InspectorFormSchema = {
+      type: "object",
+      anyOf: [
+        {
+          type: "object",
+          title: "Email",
+          properties: {
+            kind: { type: "string", const: "email" },
+            address: { type: "string", title: "Address" },
+          },
+          required: ["kind"],
+        },
+        {
+          type: "object",
+          title: "SMS",
+          properties: {
+            kind: { type: "string", const: "sms" },
+            phone: { type: "string", title: "Phone" },
+          },
+          required: ["kind"],
+        },
+      ],
+    };
+    renderWithMantine(
+      <RawHarness schema={union} initial={{ kind: "email" }} />,
+    );
+    expect(
+      (screen.getByRole("textbox", { name: /Variant/ }) as HTMLInputElement)
+        .value,
+    ).toBe("Email");
+
+    await enableRawJson(user);
+    await setAceTextByLabel(
+      /Arguments JSON/,
+      '{"kind":"sms","phone":"555-0100"}',
+    );
+
+    expect(
+      (screen.getByRole("textbox", { name: /Variant/ }) as HTMLInputElement)
+        .value,
+    ).toBe("SMS");
+
+    // And the widgets agree with it on the way back.
+    await user.click(screen.getByLabelText("Edit as JSON"));
+    // Anchored: the branch picker's own options carry these words too.
+    expect(screen.getByLabelText(/^Phone$/)).toBeInTheDocument();
+    expect(screen.queryByLabelText(/^Address$/)).toBeNull();
+  });
+
+  // The editor holds the whole arguments object, not a per-branch slice, so a
+  // branch move must not remount it — that would reformat the text being typed
+  // and drop the caret to the top. Pinned by the text surviving verbatim: a
+  // remount reseeds from `values`, which is pretty-printed.
+  it("does not reformat the draft when the branch moves under it", async () => {
+    const user = userEvent.setup();
+    const union: InspectorFormSchema = {
+      type: "object",
+      anyOf: [
+        {
+          type: "object",
+          title: "Email",
+          properties: { kind: { type: "string", const: "email" } },
+          required: ["kind"],
+        },
+        {
+          type: "object",
+          title: "SMS",
+          properties: { kind: { type: "string", const: "sms" } },
+          required: ["kind"],
+        },
+      ],
+    };
+    renderWithMantine(
+      <RawHarness schema={union} initial={{ kind: "email" }} />,
+    );
+    await enableRawJson(user);
+
+    await setAceTextByLabel(/Arguments JSON/, '{"kind":"sms"}');
+    expect(getAceTextByLabel(/Arguments JSON/)).toBe('{"kind":"sms"}');
+  });
+
+  // The discriminator is cleared and retyped on the way between branches, so
+  // snapping to the first branch the moment it stops matching would move the
+  // picker under the user mid-edit.
+  it("keeps the current branch while the discriminator is absent", async () => {
+    const user = userEvent.setup();
+    const union: InspectorFormSchema = {
+      type: "object",
+      anyOf: [
+        {
+          type: "object",
+          title: "Email",
+          properties: { kind: { type: "string", const: "email" } },
+          required: ["kind"],
+        },
+        {
+          type: "object",
+          title: "SMS",
+          properties: { kind: { type: "string", const: "sms" } },
+          required: ["kind"],
+        },
+      ],
+    };
+    renderWithMantine(<RawHarness schema={union} initial={{ kind: "sms" }} />);
+    await enableRawJson(user);
+    expect(
+      (screen.getByRole("textbox", { name: /Variant/ }) as HTMLInputElement)
+        .value,
+    ).toBe("SMS");
+
+    await setAceTextByLabel(/Arguments JSON/, '{"note":"mid-edit"}');
+    expect(
+      (screen.getByRole("textbox", { name: /Variant/ }) as HTMLInputElement)
+        .value,
+    ).toBe("SMS");
+  });
+
   // #2123: switching a root union drops the outgoing branch's values. The raw
   // editor is seeded from what the form holds, so a round trip through it must
   // not resurrect them.
diff --git a/clients/web/src/components/groups/SchemaForm/SchemaForm.tsx b/clients/web/src/components/groups/SchemaForm/SchemaForm.tsx
index 360347e4e5..a24649a800 100644
--- a/clients/web/src/components/groups/SchemaForm/SchemaForm.tsx
+++ b/clients/web/src/components/groups/SchemaForm/SchemaForm.tsx
@@ -25,6 +25,7 @@ import { ClearButton } from "../../elements/ClearButton/ClearButton";
 import { EnlargeButton } from "../../elements/EnlargeButton/EnlargeButton";
 import { JsonEditor } from "../../elements/JsonEditor/JsonEditor";
 import { isJsonObject } from "../../../utils/jsonObjectDraft";
+import { isSerializableJson } from "@inspector/core/json/jsonUtils.js";
 import { useValueChange } from "../../../hooks/useValueChange";
 import type {
   InspectorFormSchema,
@@ -272,16 +273,29 @@ function toNumericValue(raw: string | number): number | undefined {
   return Number.isSafeInteger(Math.trunc(parsed)) ? parsed : undefined;
 }
 
-/** Parse editor text, reporting `undefined` for anything that is not JSON yet. */
+/**
+ * Parse editor text, reporting `undefined` for anything this client cannot
+ * send.
+ *
+ * That covers text that is not JSON *yet* — the mid-edit state this field's
+ * whole draft/value split exists for — and text that parses but does not
+ * survive being written back out: `JSON.parse("1e400")` yields `Infinity`,
+ * which `JSON.stringify` writes as `null`. Both report no value, so the field
+ * shows its error and `onValidityChange` blocks submission, rather than sending
+ * a number the user never typed. Same guard, same reason, as
+ * `parseJsonObjectDraft` and the raw-arguments editor above.
+ */
 function parseJsonDraft(text: string): unknown {
   if (text.trim() === "") {
     return undefined;
   }
+  let parsed: unknown;
   try {
-    return JSON.parse(text);
+    parsed = JSON.parse(text);
   } catch {
     return undefined;
   }
+  return isSerializableJson(parsed) ? parsed : undefined;
 }
 
 /** Structural equality for the draft/value re-sync, via canonical JSON. */
@@ -584,6 +598,17 @@ function parseRawArgumentsDraft(
       error: "Arguments must be a JSON object (`{ … }`)",
     };
   }
+  // `JSON.parse` accepts numeric literals it cannot represent: `1e400` parses to
+  // `Infinity`, which `JSON.stringify` then writes as `null`. Accepting it here
+  // would show the user one value and send another — the one thing an inspector
+  // must not do. Same guard, same reason, as `parseJsonObjectDraft`.
+  if (!isSerializableJson(parsed)) {
+    return {
+      ok: false,
+      error:
+        "Numbers must be finite — a value like `1e400` overflows and would be sent as null",
+    };
+  }
   return { ok: true, value: parsed };
 }
 
@@ -942,6 +967,27 @@ export function SchemaForm({
     onChange({ ...values, [fieldName]: fieldValue });
   }
 
+  /**
+   * Take the raw editor's object, and move the branch picker with it.
+   *
+   * Nothing in `values` names a branch, so the picker's index is held here and
+   * is only ever re-derived when something says the values changed underneath
+   * (`resetKey`, a rewritten union). Editing the discriminator in the raw
+   * document is exactly that, and it has no other signal: without this, turning
+   * `{"kind":"email"}` into `{"kind":"sms",…}` leaves the picker on Email, and
+   * switching back to the widgets renders the Email branch over SMS values —
+   * showing one shape while submitting another.
+   *
+   * The current branch is kept when the values identify none, rather than
+   * snapping to the first: the user passes through that state every time they
+   * clear the discriminator to retype it.
+   */
+  function handleRawArgumentsChange(next: Record<string, unknown>) {
+    onChange(next);
+    if (branches.length === 0) return;
+    setBranchIndex(selectBranchIndex(branches, next) ?? branchIndex);
+  }
+
   /**
    * Switch branches, and move `values` with the form.
    *
@@ -1413,13 +1459,17 @@ export function SchemaForm({
         />
       )}
       {rawJsonMode ? (
-        // Keyed by the entity and branch, like every draft-holding field: text
-        // typed for one tool must not be left in the box for the next, and
-        // switching a root union prunes values the stale draft would restore.
+        // Keyed by the *entity* only, unlike the per-field editors, which are
+        // keyed by entity and branch. This editor holds the whole arguments
+        // object, which is not a per-branch thing: switching branches rewrites
+        // `values`, and the re-sync below picks that up without a remount.
+        // Keying it by branch too would remount it the moment an edit to the
+        // discriminator moved the picker — reformatting the text the user was
+        // typing and dropping their caret to the top.
         <RawArgumentsField
-          key={draftKey ?? "raw-json"}
+          key={resetKey ?? "raw-json"}
           values={values}
-          onChange={onChange}
+          onChange={handleRawArgumentsChange}
           disabled={disabled}
           onInvalidChange={reportRawJsonValidity}
         />

From 12c00d8c63288fd515bd24f60699737481605cbf Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Thu, 27 Aug 2026 03:16:44 -0400
Subject: [PATCH 04/14] fix(web): re-apply the editor's accessible name, and
 correct the README's scope
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Copilot's third pass generated no new inline comments; all three of its
suppressed ones were right.

- `ariaLabel` is now re-applied from the wiring effect, not only at mount.
  `setOptions` updates Ace's option when the prop changes, but Ace recomputes
  the textarea's `aria-label` from it inside `TextInput.setAriaLabel()`, which
  it calls when the cursor moves — so a name that changed while the editor
  stayed mounted (a tool refreshed in place under a new field title, which
  `SchemaJsonField` passes straight through) left the visible label and the
  accessible name disagreeing until the user clicked into the box. `onLoad`
  keeps doing it too, since an effect runs after paint and this is the
  control's only name.

- The README claimed this editor is on "every surface where JSON is typed or
  displayed", which is false in two places it now names instead:
  `ExperimentalFeaturesPanel`'s JSON-RPC *response* is still a read-only
  `Textarea` (only its request box moved), and `OAuthTokenField` renders a
  decoded JWT in a `Code` block beside the raw token. Both bypass
  `ContentViewer` and so are not reached by its JSON branch. Documenting them
  as exceptions is what keeps the section from sending a maintainer to the
  wrong abstraction.

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/README.md                         |  6 +++--
 .../elements/JsonEditor/JsonEditor.test.tsx   | 19 ++++++++++++++++
 .../elements/JsonEditor/JsonEditor.tsx        | 22 ++++++++++++++++---
 3 files changed, 42 insertions(+), 5 deletions(-)

diff --git a/clients/web/README.md b/clients/web/README.md
index 02fe4d893c..0fa6194394 100644
--- a/clients/web/README.md
+++ b/clients/web/README.md
@@ -285,7 +285,7 @@ Each customized Mantine component has a `Theme<Name>.ts` file (`Button.ts`, `Tex
 
 ## JSON editing and display (`JsonEditor`)
 
-Every surface in this client where JSON is typed or displayed renders one element: **`elements/JsonEditor`**, an **Ace** editor (`react-ace` + `ace-builds`, declared in this client because they render React). Ace brings code folding, line numbers, brace auto-closing, and per-line error annotation from its JSON worker — the last three are why hand-writing a nested payload in a bare textarea was the actual pain ([#2151](https://github.com/modelcontextprotocol/inspector/issues/2151)).
+Every surface in this client where JSON is **typed**, plus `ContentViewer`'s read-only JSON branch, renders one element: **`elements/JsonEditor`**, an **Ace** editor (`react-ace` + `ace-builds`, declared in this client because they render React). Ace brings code folding, line numbers, brace auto-closing, and per-line error annotation from its JSON worker — the last three are why hand-writing a nested payload in a bare textarea was the actual pain ([#2151](https://github.com/modelcontextprotocol/inspector/issues/2151)).
 
 `JsonEditor` is deliberately **text in, text out**: it never parses. The editing contracts above it disagree about what an unparseable draft means, and neither can be expressed by a component that decides for them:
 
@@ -298,7 +298,9 @@ Every surface in this client where JSON is typed or displayed renders one elemen
 | `groups/ImportServerJsonPanel`, `groups/ExperimentalFeaturesPanel` | The panel owns the text and validates it itself. |
 | `elements/ContentViewer`'s JSON branch | Read-only — see below. |
 
-**Read-only mode is what `ContentViewer` renders JSON as**, and through it every JSON payload in the app: Protocol and Network entries, tool results, structured output, resource previews, server cards. Highlighting is *not* what that buys — JSON already highlighted, via the lazily-imported Prism grammar `CodeHighlight` loads. What Ace adds is **folding**, line numbers and a gutter on a large payload. The Prism `json` grammar was dropped in the same change rather than kept beside it: two highlighters for one language drift, and nothing else asks for `json`. Two cases stay on the plain renderer — a `wrap={false}` caller (the server card's fixed-height, single-line box) and untyped text that only *looks* like JSON but does not parse, which in an editor would frame a server's prose as a malformed document.
+**Read-only mode is what `ContentViewer` renders JSON as**, and through it every payload that reaches the app that way: Protocol and Network entries, tool results, structured output, resource previews, server cards. Highlighting is *not* what that buys — JSON already highlighted, via the lazily-imported Prism grammar `CodeHighlight` loads. What Ace adds is **folding**, line numbers and a gutter on a large payload. The Prism `json` grammar was dropped in the same change rather than kept beside it: two highlighters for one language drift, and nothing else asks for `json`. Two cases stay on the plain renderer — a `wrap={false}` caller (the server card's fixed-height, single-line box) and untyped text that only *looks* like JSON but does not parse, which in an editor would frame a server's prose as a malformed document.
+
+Two read-only JSON displays deliberately do **not** go through `ContentViewer`, and so are not on this editor — worth knowing before assuming it is the route for all of them. `ExperimentalFeaturesPanel` renders its JSON-RPC **response** in a read-only `Textarea` (its *request* box is on the editor), and `ConnectionInfoContent/OAuthTokenField` renders a decoded JWT in a `Code` block beside the raw token, where the decoded/raw toggle and the copy affordance belong to the field rather than to a viewer. Both are candidates for the same treatment; neither is in [#2151](https://github.com/modelcontextprotocol/inspector/issues/2151)'s scope.
 
 Five integration details are load-bearing:
 
diff --git a/clients/web/src/components/elements/JsonEditor/JsonEditor.test.tsx b/clients/web/src/components/elements/JsonEditor/JsonEditor.test.tsx
index ae84b0c3c9..f50b36b077 100644
--- a/clients/web/src/components/elements/JsonEditor/JsonEditor.test.tsx
+++ b/clients/web/src/components/elements/JsonEditor/JsonEditor.test.tsx
@@ -36,6 +36,25 @@ describe("JsonEditor", () => {
     expect(screen.getByLabelText(aceLabel(LABEL))).toBeInTheDocument();
   });
 
+  // Ace recomputes the textarea's `aria-label` from its option only when the
+  // cursor moves, so a name that changes while the editor stays mounted — a
+  // tool refreshed in place under a new field title — would leave the visible
+  // label and the accessible name disagreeing until the user clicked into it.
+  it("re-applies the accessible name when it changes in place", () => {
+    const { rerender } = renderWithMantine(
+      <JsonEditor ariaLabel="Series JSON" value="" onChange={vi.fn()} />,
+    );
+    expect(screen.getByLabelText(aceLabel("Series JSON"))).toBeInTheDocument();
+
+    rerender(
+      <JsonEditor ariaLabel="Data points JSON" value="" onChange={vi.fn()} />,
+    );
+    expect(
+      screen.getByLabelText(aceLabel("Data points JSON")),
+    ).toBeInTheDocument();
+    expect(screen.queryByLabelText(aceLabel("Series JSON"))).toBeNull();
+  });
+
   it("shows the text it is given, verbatim", () => {
     // Braces, not a bare JSX string: a JSX string attribute does not process
     // escapes, so `'…\n…'` written inline would be a literal backslash-n.
diff --git a/clients/web/src/components/elements/JsonEditor/JsonEditor.tsx b/clients/web/src/components/elements/JsonEditor/JsonEditor.tsx
index 17f436cda8..751c1ecf1e 100644
--- a/clients/web/src/components/elements/JsonEditor/JsonEditor.tsx
+++ b/clients/web/src/components/elements/JsonEditor/JsonEditor.tsx
@@ -149,12 +149,28 @@ export function JsonEditor({
   // wrapper's own id is what makes the `<label for>` focus the editor; the
   // error wiring follows Mantine's `${id}-error` naming.
   useEffect(() => {
-    const element = editorRef.current?.textInput.getElement();
+    const editor = editorRef.current;
+    const element = editor?.textInput.getElement();
     /* v8 ignore next -- the ref is set in `onLoad`, which react-ace calls
        synchronously on mount, so this effect always sees an element. */
-    if (!element) return;
+    if (!editor || !element) return;
     element.id = wrapperId;
 
+    // Re-apply the accessible name, not just set it once at mount.
+    //
+    // `setOptions` does update Ace's *option* when `ariaLabel` changes, but Ace
+    // only recomputes the textarea's `aria-label` from it inside
+    // `TextInput.setAriaLabel()`, which it calls when the cursor moves. So a
+    // name that changes while the editor stays mounted — a tool refreshed in
+    // place under a new field title, which `SchemaJsonField` passes straight
+    // through — leaves the visible label and the accessible name disagreeing
+    // until the user happens to click into the box.
+    //
+    // `onLoad` still does this too: an effect runs after paint, and this is the
+    // control's only name, so mount should not present a frame without it.
+    editor.setOption("textInputAriaLabel", ariaLabel);
+    editor.textInput.setAriaLabel();
+
     // Both the description and the error are rendered by the wrapper and both
     // describe this control, so both ids belong here — a supplied description
     // is otherwise never announced, and it must not be dropped just because the
@@ -197,7 +213,7 @@ export function JsonEditor({
       element.removeAttribute("aria-disabled");
       element.tabIndex = 0;
     }
-  }, [wrapperId, hasError, description, disabled]);
+  }, [wrapperId, hasError, description, disabled, ariaLabel]);
 
   return (
     <Input.Wrapper

From 5abe289caaff1f9f993fad7e82e0ecf5b6071354 Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Thu, 27 Aug 2026 03:37:03 -0400
Subject: [PATCH 05/14] fix(web): seed Edit-and-replay from what replay sends,
 name each JSON editor
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Copilot's fourth pass, one inline plus two suppressed. All three were right.

- The modal presented the whole captured frame as editable, but replay does
  not re-send a frame: it dispatches through the typed InspectorClient
  methods, whose signatures have no room for `_meta` (a captured `tools/call`
  carries `_meta.progressToken`) or for any list-request key but `cursor`. So
  editing `_meta` and pressing Send transmitted something other than what was
  on screen. `replayableParams` now projects the frame down to what the
  dispatcher actually reads, the modal seeds from that, and it names what was
  left out rather than leaving the difference to be discovered. The projection
  lives beside the dispatch switch because the two are halves of one contract.

- `ContentViewer` gains `jsonLabel`, so a read-only JSON editor can say what
  it holds. Every one of them announced "JSON content", and an expanded
  Protocol entry has two while the list has many pairs — leaving a screen
  reader with indistinguishable textboxes and only the visible headings to
  tell them apart. Protocol entries now name theirs per method and direction,
  Network entries per request/response body.

- `isJsonDocument` became `formatJsonDocument`, returning the formatted text
  instead of a boolean. The heuristic path parsed the payload to decide and
  then parsed it again to render; Protocol and Network hand over serialized
  bodies as untyped text and are not virtualized, so a long history paid twice
  per payload per render.

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>
---
 .../ContentViewer/ContentViewer.test.tsx      | 23 +++++
 .../elements/ContentViewer/ContentViewer.tsx  | 89 +++++++++++++++++--
 .../ContentViewer/contentViewerUtils.test.ts  | 20 ++---
 .../ContentViewer/contentViewerUtils.ts       | 17 ++--
 .../EditReplayModal/EditReplayModal.test.tsx  | 38 ++++++++
 .../EditReplayModal/EditReplayModal.tsx       | 41 ++++++++-
 .../groups/NetworkEntry/NetworkEntry.tsx      | 23 ++++-
 .../ProtocolEntry/ProtocolEntry.test.tsx      | 40 +++++++++
 .../groups/ProtocolEntry/ProtocolEntry.tsx    | 16 +++-
 clients/web/src/lib/protocolReplay.test.ts    | 74 +++++++++++++++
 clients/web/src/lib/protocolReplay.ts         | 63 +++++++++++++
 11 files changed, 413 insertions(+), 31 deletions(-)

diff --git a/clients/web/src/components/elements/ContentViewer/ContentViewer.test.tsx b/clients/web/src/components/elements/ContentViewer/ContentViewer.test.tsx
index 53366fdff4..bfd65added 100644
--- a/clients/web/src/components/elements/ContentViewer/ContentViewer.test.tsx
+++ b/clients/web/src/components/elements/ContentViewer/ContentViewer.test.tsx
@@ -232,6 +232,29 @@ describe("ContentViewer", () => {
     expect(screen.getByText(/"a": 1/)).toBeInTheDocument();
   });
 
+  // An expanded Protocol entry holds two of these and a list holds many pairs,
+  // so an unnamed editor leaves a screen reader tabbing through textboxes that
+  // all announce the same thing.
+  it("names the JSON editor from jsonLabel", () => {
+    const block: ContentBlock = { type: "text", text: '{"a":1}' };
+    renderWithMantine(
+      <ContentViewer
+        block={block}
+        mimeType="application/json"
+        jsonLabel="tools/call response JSON"
+      />,
+    );
+    expect(
+      screen.getByLabelText(/tools\/call response JSON/),
+    ).toBeInTheDocument();
+  });
+
+  it("falls back to a generic name when no label is given", () => {
+    const block: ContentBlock = { type: "text", text: '{"a":1}' };
+    renderWithMantine(<ContentViewer block={block} />);
+    expect(screen.getByLabelText(/JSON content/)).toBeInTheDocument();
+  });
+
   it("keeps the copy overlay above the JSON editor", () => {
     const block: ContentBlock = { type: "text", text: '{"a":1}' };
     renderWithMantine(
diff --git a/clients/web/src/components/elements/ContentViewer/ContentViewer.tsx b/clients/web/src/components/elements/ContentViewer/ContentViewer.tsx
index 7d7fbfc339..59789532aa 100644
--- a/clients/web/src/components/elements/ContentViewer/ContentViewer.tsx
+++ b/clients/web/src/components/elements/ContentViewer/ContentViewer.tsx
@@ -15,8 +15,8 @@ import { ResourceLinkInfo } from "../ResourceLinkInfo/ResourceLinkInfo";
 import {
   formatJson,
   formatXml,
+  formatJsonDocument,
   getMimeKind,
-  isJsonDocument,
   isSafeHref,
   isTextualKind,
   looksLikeJson,
@@ -60,6 +60,19 @@ export interface ContentViewerProps {
    * one line — don't pass it for multi-line content.
    */
   wrap?: boolean;
+  /**
+   * Accessible name for the read-only JSON editor a JSON payload renders in.
+   *
+   * Say what the payload *is* whenever a screen can hold more than one: an
+   * expanded Protocol entry carries both its parameters and its response, and
+   * a list of them carries many such pairs — so the default leaves a screen
+   * reader tabbing through textboxes that all announce the same thing, with
+   * only the visible section headings to tell them apart.
+   *
+   * Reaches the JSON branch only; every other renderer here is not a control
+   * and takes no name.
+   */
+  jsonLabel?: string;
 }
 
 /**
@@ -185,12 +198,24 @@ function HighlightedContent({
  * It copies the *original* text, not the pretty-printed form, matching every
  * other branch here.
  */
-function JsonContent({ text, copyable }: { text: string; copyable: boolean }) {
+function JsonContent({
+  text,
+  formatted,
+  copyable,
+  label,
+}: {
+  /** The original payload — what the copy button copies. */
+  text: string;
+  /** Its pretty-printed form, already parsed once by whoever decided to use it. */
+  formatted: string;
+  copyable: boolean;
+  label: string;
+}) {
   return (
     <CopyableWrapper copyable={copyable} copyValue={text}>
       <JsonEditor
-        ariaLabel="JSON content"
-        value={formatJson(text)}
+        ariaLabel={label}
+        value={formatted}
         readOnly
         // Sized to the payload, and capped.
         //
@@ -221,17 +246,30 @@ function PlainTextContent({
   text,
   copyable,
   wrap,
+  jsonLabel,
 }: {
   text: string;
   copyable: boolean;
   wrap: boolean;
+  jsonLabel: string;
 }) {
   // Untyped text that really parses as JSON gets the JSON renderer too — the
   // heuristic is how a server that sent no MIME type still reads well. Not when
   // `wrap` is false, though: that caller wants one clipped line at a fixed
   // height, which a multi-line editor is not.
-  if (wrap && isJsonDocument(text)) {
-    return <JsonContent text={text} copyable={copyable} />;
+  //
+  // The formatted text comes back from the same call that decided, so the
+  // payload is parsed once rather than once to test and again to render.
+  const asJson = wrap ? formatJsonDocument(text) : null;
+  if (asJson !== null) {
+    return (
+      <JsonContent
+        text={text}
+        formatted={asJson}
+        copyable={copyable}
+        label={jsonLabel}
+      />
+    );
   }
   const displayText = looksLikeJson(text) ? formatJson(text) : text;
   return (
@@ -262,11 +300,13 @@ function TextualContent({
   mimeType,
   copyable,
   wrap,
+  jsonLabel,
 }: {
   text: string;
   mimeType: string | undefined;
   copyable: boolean;
   wrap: boolean;
+  jsonLabel: string;
 }) {
   const kind = mimeType ? getMimeKind(mimeType) : "text";
   switch (kind) {
@@ -278,9 +318,23 @@ function TextualContent({
       // line is exactly what that prop is documented not to be used for, so
       // that caller keeps the plain renderer.
       return wrap ? (
-        <JsonContent text={text} copyable={copyable} />
+        <JsonContent
+          text={text}
+          // A *declared* `application/json` renders as JSON even when it does
+          // not parse — the server said what it sent — so this cannot go
+          // through `formatJsonDocument`, which reports unparseable text as
+          // not-JSON. `formatJson` returns the original on failure.
+          formatted={formatJson(text)}
+          copyable={copyable}
+          label={jsonLabel}
+        />
       ) : (
-        <PlainTextContent text={text} copyable={copyable} wrap={wrap} />
+        <PlainTextContent
+          text={text}
+          copyable={copyable}
+          wrap={wrap}
+          jsonLabel={jsonLabel}
+        />
       );
     case "xml":
       return (
@@ -313,7 +367,14 @@ function TextualContent({
         </Stack>
       );
     default:
-      return <PlainTextContent text={text} copyable={copyable} wrap={wrap} />;
+      return (
+        <PlainTextContent
+          text={text}
+          copyable={copyable}
+          wrap={wrap}
+          jsonLabel={jsonLabel}
+        />
+      );
   }
 }
 
@@ -341,11 +402,13 @@ function ResourceContent({
   mimeType,
   copyable,
   wrap,
+  jsonLabel,
 }: {
   contents: TextResourceContents | BlobResourceContents;
   mimeType: string;
   copyable: boolean;
   wrap: boolean;
+  jsonLabel: string;
 }) {
   if ("text" in contents) {
     return (
@@ -354,6 +417,7 @@ function ResourceContent({
         mimeType={mimeType}
         copyable={copyable}
         wrap={wrap}
+        jsonLabel={jsonLabel}
       />
     );
   }
@@ -382,6 +446,7 @@ function ResourceContent({
         mimeType={mimeType}
         copyable={copyable}
         wrap={wrap}
+        jsonLabel={jsonLabel}
       />
     );
   }
@@ -394,11 +459,13 @@ function BlockContent({
   mimeType,
   copyable,
   wrap,
+  jsonLabel,
 }: {
   block: ContentBlock;
   mimeType: string | undefined;
   copyable: boolean;
   wrap: boolean;
+  jsonLabel: string;
 }) {
   switch (block.type) {
     case "text":
@@ -408,6 +475,7 @@ function BlockContent({
           mimeType={mimeType}
           copyable={copyable}
           wrap={wrap}
+          jsonLabel={jsonLabel}
         />
       );
     case "image":
@@ -448,6 +516,7 @@ export function ContentViewer({
   copyable = false,
   mimeType,
   wrap = true,
+  jsonLabel = "JSON content",
 }: ContentViewerProps) {
   if (contents) {
     const effective =
@@ -458,6 +527,7 @@ export function ContentViewer({
         mimeType={effective}
         copyable={copyable}
         wrap={wrap}
+        jsonLabel={jsonLabel}
       />
     );
   }
@@ -468,6 +538,7 @@ export function ContentViewer({
       mimeType={mimeType}
       copyable={copyable}
       wrap={wrap}
+      jsonLabel={jsonLabel}
     />
   );
 }
diff --git a/clients/web/src/components/elements/ContentViewer/contentViewerUtils.test.ts b/clients/web/src/components/elements/ContentViewer/contentViewerUtils.test.ts
index d7bc4340ab..731c15c45d 100644
--- a/clients/web/src/components/elements/ContentViewer/contentViewerUtils.test.ts
+++ b/clients/web/src/components/elements/ContentViewer/contentViewerUtils.test.ts
@@ -7,7 +7,7 @@ import {
   getMimeKind,
   isSafeHref,
   isTextualKind,
-  isJsonDocument,
+  formatJsonDocument,
   looksLikeJson,
   PREVIEW_HTML_CSP,
   tryDecodeBase64ToBytes,
@@ -113,26 +113,26 @@ describe("looksLikeJson", () => {
   });
 });
 
-describe("isJsonDocument", () => {
-  it("accepts text that really parses as JSON", () => {
-    expect(isJsonDocument('  {"a":1}')).toBe(true);
-    expect(isJsonDocument("[1,2]")).toBe(true);
+describe("formatJsonDocument", () => {
+  it("pretty-prints text that really parses as JSON", () => {
+    expect(formatJsonDocument('  {"a":1}')).toBe('{\n  "a": 1\n}');
+    expect(formatJsonDocument("[1,2]")).toBe("[\n  1,\n  2\n]");
   });
 
   // The stricter half of the heuristic (#2151). Text that merely *starts* like
   // JSON must not be handed to the JSON editor: a note beginning `{` would then
   // be presented as a document, in a JSON gutter, framed as malformed.
-  it("rejects text that only looks like JSON", () => {
-    expect(isJsonDocument("{ broken")).toBe(false);
-    expect(isJsonDocument("[unclosed")).toBe(false);
-    expect(isJsonDocument("plain")).toBe(false);
+  it("reports text that only looks like JSON as not JSON", () => {
+    expect(formatJsonDocument("{ broken")).toBeNull();
+    expect(formatJsonDocument("[unclosed")).toBeNull();
+    expect(formatJsonDocument("plain")).toBeNull();
   });
 
   // A bare scalar is valid JSON but never looked like a document, so it stays
   // on the plain renderer — otherwise ordinary prose that happens to be a
   // number would open an editor.
   it("rejects a scalar that never looked like a document", () => {
-    expect(isJsonDocument("42")).toBe(false);
+    expect(formatJsonDocument("42")).toBeNull();
   });
 });
 
diff --git a/clients/web/src/components/elements/ContentViewer/contentViewerUtils.ts b/clients/web/src/components/elements/ContentViewer/contentViewerUtils.ts
index 32a425f9a7..5d73fe8301 100644
--- a/clients/web/src/components/elements/ContentViewer/contentViewerUtils.ts
+++ b/clients/web/src/components/elements/ContentViewer/contentViewerUtils.ts
@@ -143,7 +143,8 @@ export function looksLikeJson(text: string): boolean {
 }
 
 /**
- * Whether untyped text really is a JSON document, not merely shaped like one.
+ * Pretty-print untyped text if it really is a JSON document, or report that it
+ * is not.
  *
  * {@link looksLikeJson} only tests the first character, which is enough to
  * decide whether to *try* pretty-printing — a failed parse falls back to the
@@ -152,14 +153,18 @@ export function looksLikeJson(text: string): boolean {
  * JSON document, in a JSON gutter, with the server's plain text framed as
  * malformed. A declared `application/json` is different — there the server said
  * what it sent, so its own broken payload is shown as JSON on purpose.
+ *
+ * Returns the formatted text rather than a boolean so the caller does not parse
+ * a second time to render what this already parsed to decide. Protocol and
+ * Network entries hand their serialized bodies over as untyped text and are not
+ * virtualized, so a long history pays for every parse on every render.
  */
-export function isJsonDocument(text: string): boolean {
-  if (!looksLikeJson(text)) return false;
+export function formatJsonDocument(text: string): string | null {
+  if (!looksLikeJson(text)) return null;
   try {
-    JSON.parse(text);
-    return true;
+    return JSON.stringify(JSON.parse(text), null, 2);
   } catch {
-    return false;
+    return null;
   }
 }
 
diff --git a/clients/web/src/components/groups/EditReplayModal/EditReplayModal.test.tsx b/clients/web/src/components/groups/EditReplayModal/EditReplayModal.test.tsx
index 5ba5d9d6a7..81cde85020 100644
--- a/clients/web/src/components/groups/EditReplayModal/EditReplayModal.test.tsx
+++ b/clients/web/src/components/groups/EditReplayModal/EditReplayModal.test.tsx
@@ -98,6 +98,44 @@ describe("EditReplayModal", () => {
     expect(screen.getByText(/Numbers must be finite/)).toBeInTheDocument();
   });
 
+  // Replay dispatches through the typed client methods, so a param they have no
+  // room for is dropped. Saying which, rather than seeding it into the editor,
+  // is what keeps the modal from inviting an edit that Send discards.
+  it("names the params replay cannot re-send", () => {
+    renderWithMantine(
+      <EditReplayModal
+        {...baseProps}
+        params={{ name: "echo" }}
+        droppedParamKeys={["_meta"]}
+      />,
+    );
+    expect(screen.getByText(/`_meta` is not re-sent/)).toBeInTheDocument();
+  });
+
+  it("says nothing when every param survives", () => {
+    renderWithMantine(
+      <EditReplayModal
+        {...baseProps}
+        params={{ name: "echo" }}
+        droppedParamKeys={[]}
+      />,
+    );
+    expect(screen.queryByText(/not re-sent/)).toBeNull();
+  });
+
+  it("agrees with its verb for several dropped params", () => {
+    renderWithMantine(
+      <EditReplayModal
+        {...baseProps}
+        params={{ cursor: "abc" }}
+        droppedParamKeys={["_meta", "extra"]}
+      />,
+    );
+    expect(
+      screen.getByText(/`_meta`, `extra` are not re-sent/),
+    ).toBeInTheDocument();
+  });
+
   it("closes without sending when cancelled", async () => {
     const user = userEvent.setup();
     const onSend = vi.fn();
diff --git a/clients/web/src/components/groups/EditReplayModal/EditReplayModal.tsx b/clients/web/src/components/groups/EditReplayModal/EditReplayModal.tsx
index 784db9b77e..be1dd877cd 100644
--- a/clients/web/src/components/groups/EditReplayModal/EditReplayModal.tsx
+++ b/clients/web/src/components/groups/EditReplayModal/EditReplayModal.tsx
@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { Button, Group, Modal, Stack, Text } from "@mantine/core";
+import { Alert, Button, Group, Modal, Stack, Text } from "@mantine/core";
 import { JsonEditor } from "../../elements/JsonEditor/JsonEditor";
 import { isJsonObject } from "../../../utils/jsonObjectDraft";
 import { isSerializableJson } from "@inspector/core/json/jsonUtils.js";
@@ -8,8 +8,22 @@ export interface EditReplayModalProps {
   opened: boolean;
   /** The method being replayed, shown so the editor is unambiguous. */
   method: string;
-  /** The originating entry's params, seeded into the editor. */
+  /**
+   * The originating entry's params, seeded into the editor — already reduced to
+   * the ones replay will actually read. See {@link droppedParamKeys}.
+   */
   params?: Record<string, unknown>;
+  /**
+   * Param names the entry carried that replay cannot re-send, so the modal can
+   * say so rather than leave the difference to be discovered.
+   *
+   * Replay dispatches through the typed `InspectorClient` methods rather than
+   * re-sending the captured frame, and those signatures have no room for
+   * `_meta` (or for anything but `cursor` on a list request). Seeding the
+   * editor with them would invite an edit that Send silently discards, which is
+   * the one thing an inspector must not do.
+   */
+  droppedParamKeys?: string[];
   /**
    * Re-issue the request with these params. `null` means "send no params",
    * which is a request an empty editor can legitimately express — see
@@ -27,6 +41,17 @@ const MethodText = Text.withProps({
 
 const Footer = Group.withProps({ justify: "flex-end", gap: "sm" });
 
+// Names the params replay cannot carry. `light` and gray rather than a warning
+// colour: nothing is wrong and there is nothing for the user to fix — it is a
+// property of how replay dispatches.
+const DroppedNote = Alert.withProps({ variant: "light", color: "gray" });
+
+/** "`a`, `b` are" / "`a` is" — the list, agreeing with its verb. */
+function formatDroppedKeys(keys: string[]): string {
+  const names = keys.map((key) => `\`${key}\``).join(", ");
+  return `${names} ${keys.length === 1 ? "is" : "are"}`;
+}
+
 /**
  * What the editor's text currently means: the params to send, or why they
  * cannot be sent.
@@ -75,6 +100,7 @@ function parseParamsDraft(
 function EditReplayForm({
   method,
   params,
+  droppedParamKeys,
   onSend,
   onClose,
 }: Omit<EditReplayModalProps, "opened">) {
@@ -86,6 +112,15 @@ function EditReplayForm({
   return (
     <Stack gap="sm">
       <MethodText>{method}</MethodText>
+      {droppedParamKeys && droppedParamKeys.length > 0 && (
+        <DroppedNote>
+          <Text size="xs">
+            {`Replay re-issues this request through the client's own ${method}
+              method, which carries only the fields below, so
+              ${formatDroppedKeys(droppedParamKeys)} not re-sent.`}
+          </Text>
+        </DroppedNote>
+      )}
       <JsonEditor
         ariaLabel="Request params"
         label="Params"
@@ -130,6 +165,7 @@ export function EditReplayModal({
   opened,
   method,
   params,
+  droppedParamKeys,
   onSend,
   onClose,
 }: EditReplayModalProps) {
@@ -138,6 +174,7 @@ export function EditReplayModal({
       <EditReplayForm
         method={method}
         params={params}
+        droppedParamKeys={droppedParamKeys}
         onSend={onSend}
         onClose={onClose}
       />
diff --git a/clients/web/src/components/groups/NetworkEntry/NetworkEntry.tsx b/clients/web/src/components/groups/NetworkEntry/NetworkEntry.tsx
index 7ef790bc54..399cdfe4a4 100644
--- a/clients/web/src/components/groups/NetworkEntry/NetworkEntry.tsx
+++ b/clients/web/src/components/groups/NetworkEntry/NetworkEntry.tsx
@@ -371,9 +371,16 @@ const RevealButton = Button.withProps({
 function BodyPreview({
   body,
   contentType,
+  label,
 }: {
   body: string;
   contentType?: string;
+  /**
+   * What this body *is* ("Request body", "Response body"), so a JSON payload's
+   * editor is named. An expanded entry holds both, and the list holds many
+   * pairs, so unnamed they all announce identically to a screen reader.
+   */
+  label: string;
 }) {
   // Reveal state for masked secrets. Hooks run before any early return so the
   // order stays stable across the too-large / has-secrets branches. The reveal
@@ -413,7 +420,13 @@ function BodyPreview({
   }
 
   if (!hasSecrets) {
-    return <ContentViewer block={{ type: "text", text: body }} copyable />;
+    return (
+      <ContentViewer
+        block={{ type: "text", text: body }}
+        copyable
+        jsonLabel={`${label} JSON`}
+      />
+    );
   }
 
   const shown = revealed ? body : masked;
@@ -432,7 +445,11 @@ function BodyPreview({
           {revealed ? "Hide" : "Reveal"}
         </RevealButton>
       </Group>
-      <ContentViewer block={{ type: "text", text: shown }} copyable />
+      <ContentViewer
+        block={{ type: "text", text: shown }}
+        copyable
+        jsonLabel={`${label} JSON`}
+      />
     </Stack>
   );
 }
@@ -587,6 +604,7 @@ export function NetworkEntry({
                   key={`${entry.requestHeaders["content-type"] ?? ""}|${entry.requestBody}`}
                   body={entry.requestBody}
                   contentType={entry.requestHeaders["content-type"]}
+                  label="Request body"
                 />
               </Stack>
             )}
@@ -604,6 +622,7 @@ export function NetworkEntry({
                     key={`${entry.responseHeaders?.["content-type"] ?? ""}|${entry.responseBody}`}
                     body={entry.responseBody}
                     contentType={entry.responseHeaders?.["content-type"]}
+                    label="Response body"
                   />
                 ) : (
                   <DimmedNote>
diff --git a/clients/web/src/components/groups/ProtocolEntry/ProtocolEntry.test.tsx b/clients/web/src/components/groups/ProtocolEntry/ProtocolEntry.test.tsx
index f86c694005..c7f19756e9 100644
--- a/clients/web/src/components/groups/ProtocolEntry/ProtocolEntry.test.tsx
+++ b/clients/web/src/components/groups/ProtocolEntry/ProtocolEntry.test.tsx
@@ -221,6 +221,28 @@ describe("ProtocolEntry", () => {
       });
     });
 
+    // The entry's frame carries `_meta.progressToken`, which replay cannot
+    // re-send — so it must not appear in the editor as though it could.
+    it("seeds only the params replay will actually read", async () => {
+      const user = userEvent.setup();
+      const withMeta: MessageEntry = {
+        ...successEntry,
+        message: {
+          ...successEntry.message,
+          params: {
+            name: "get_weather",
+            arguments: { city: "San Francisco" },
+            _meta: { progressToken: 2 },
+          },
+        },
+      } as MessageEntry;
+      renderWithMantine(<ProtocolEntry {...baseProps} entry={withMeta} />);
+      await openEditor(user);
+
+      expect(getAceText()).not.toContain("_meta");
+      expect(screen.getByText(/`_meta` is not re-sent/)).toBeInTheDocument();
+    });
+
     it("replays with the edited params", async () => {
       const user = userEvent.setup();
       const onReplay = vi.fn();
@@ -419,6 +441,24 @@ describe("ProtocolEntry", () => {
     ).toBeInTheDocument();
   });
 
+  // Both payloads render the same kind of control, so without distinct names a
+  // screen reader announces them identically.
+  it("names the parameters and response editors distinctly", () => {
+    renderWithMantine(
+      <ProtocolEntry
+        {...baseProps}
+        entry={successEntry}
+        isListExpanded={true}
+      />,
+    );
+    expect(
+      screen.getByLabelText(/tools\/call request parameters JSON/),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByLabelText(/tools\/call response JSON/),
+    ).toBeInTheDocument();
+  });
+
   it("does not render the Parameters section when message has no params", () => {
     renderWithMantine(
       <ProtocolEntry
diff --git a/clients/web/src/components/groups/ProtocolEntry/ProtocolEntry.tsx b/clients/web/src/components/groups/ProtocolEntry/ProtocolEntry.tsx
index c87638ff72..1b397421c7 100644
--- a/clients/web/src/components/groups/ProtocolEntry/ProtocolEntry.tsx
+++ b/clients/web/src/components/groups/ProtocolEntry/ProtocolEntry.tsx
@@ -34,7 +34,10 @@ import {
   extractSubscriptionId,
 } from "../protocolUtils.js";
 import { isReplayableProtocolMethod } from "../../../utils/replayableProtocolMethods";
-import type { ReplayParamsOverride } from "../../../lib/protocolReplay";
+import {
+  replayableParams,
+  type ReplayParamsOverride,
+} from "../../../lib/protocolReplay";
 
 export interface ProtocolEntryProps {
   entry: MessageEntry;
@@ -333,6 +336,7 @@ export function ProtocolEntry({
   const status = extractStatus(entry);
   const requestParams = extractParams(entry);
   const canReplay = isReplayableProtocolMethod(method);
+  const editableParams = replayableParams(method, requestParams);
   const resultType = extractResultType(entry);
   const subscriptionId = extractSubscriptionId(entry);
 
@@ -480,7 +484,10 @@ export function ProtocolEntry({
           <EditReplayModal
             opened={isEditingReplay}
             method={method}
-            params={requestParams}
+            // Seeded with what replay will actually read, not the whole frame:
+            // the editor must not offer a field that Send would drop.
+            params={editableParams.params}
+            droppedParamKeys={editableParams.dropped}
             onSend={onReplay}
             onClose={() => setIsEditingReplay(false)}
           />
@@ -513,6 +520,10 @@ export function ProtocolEntry({
                     text: serializeMessage(requestParams),
                   }}
                   copyable
+                  // Named, because an expanded entry holds two of these and a
+                  // list holds many pairs — unnamed they all announce the same
+                  // thing, leaving only the visible headings to tell them apart.
+                  jsonLabel={`${method} request parameters JSON`}
                 />
               </Stack>
             )}
@@ -525,6 +536,7 @@ export function ProtocolEntry({
                     text: serializeMessage(entry.response),
                   }}
                   copyable
+                  jsonLabel={`${method} response JSON`}
                 />
               </Stack>
             )}
diff --git a/clients/web/src/lib/protocolReplay.test.ts b/clients/web/src/lib/protocolReplay.test.ts
index a3b90fb202..b60b0174f9 100644
--- a/clients/web/src/lib/protocolReplay.test.ts
+++ b/clients/web/src/lib/protocolReplay.test.ts
@@ -4,6 +4,7 @@ import type { MessageEntry } from "@inspector/core/mcp/types.js";
 import {
   messagesToLogEntries,
   replayProtocolRequest,
+  replayableParams,
   type ReplayClient,
 } from "./protocolReplay";
 
@@ -61,6 +62,79 @@ describe("messagesToLogEntries", () => {
   });
 });
 
+// The projection the Edit-and-replay editor seeds from. It is the other half
+// of the dispatch switch: replay re-issues through the typed client methods
+// rather than re-sending the frame, so anything those signatures have no room
+// for is dropped — and an editor that offered it would invite an edit that Send
+// silently discards.
+describe("replayableParams", () => {
+  it("keeps the name and arguments of a tool call, and drops _meta", () => {
+    expect(
+      replayableParams("tools/call", {
+        name: "get_weather",
+        arguments: { city: "Boston" },
+        _meta: { progressToken: 2 },
+      }),
+    ).toEqual({
+      params: { name: "get_weather", arguments: { city: "Boston" } },
+      dropped: ["_meta"],
+    });
+  });
+
+  it("keeps the name and arguments of a prompt get", () => {
+    expect(
+      replayableParams("prompts/get", { name: "greet", arguments: { a: 1 } }),
+    ).toEqual({
+      params: { name: "greet", arguments: { a: 1 } },
+      dropped: [],
+    });
+  });
+
+  it("keeps only the uri of a resource read", () => {
+    expect(
+      replayableParams("resources/read", { uri: "file:///a", _meta: {} }),
+    ).toEqual({ params: { uri: "file:///a" }, dropped: ["_meta"] });
+  });
+
+  it("keeps only a string cursor on a list request", () => {
+    expect(
+      replayableParams("tools/list", { cursor: "abc", _meta: {} }),
+    ).toEqual({ params: { cursor: "abc" }, dropped: ["_meta"] });
+  });
+
+  // The dispatcher ignores a non-string cursor, so keeping it would put a value
+  // in the editor that changes nothing about what is sent.
+  it("drops a cursor that is not a string", () => {
+    expect(replayableParams("resources/list", { cursor: 7 })).toEqual({
+      params: undefined,
+      dropped: ["cursor"],
+    });
+  });
+
+  it("keeps nothing for ping", () => {
+    expect(replayableParams("ping", { _meta: {} })).toEqual({
+      params: undefined,
+      dropped: ["_meta"],
+    });
+  });
+
+  it("reports no params for a request that carried none", () => {
+    expect(replayableParams("tools/list", undefined)).toEqual({
+      params: undefined,
+      dropped: [],
+    });
+  });
+
+  // A name only counts as dropped if it was there: an absent `arguments` is not
+  // something the user is being told they will lose.
+  it("does not report absent names as dropped", () => {
+    expect(replayableParams("tools/call", { name: "echo" })).toEqual({
+      params: { name: "echo" },
+      dropped: [],
+    });
+  });
+});
+
 describe("replayProtocolRequest", () => {
   const tool: Tool = { name: "echo", inputSchema: { type: "object" } };
 
diff --git a/clients/web/src/lib/protocolReplay.ts b/clients/web/src/lib/protocolReplay.ts
index 609ea430bf..5bee902688 100644
--- a/clients/web/src/lib/protocolReplay.ts
+++ b/clients/web/src/lib/protocolReplay.ts
@@ -70,6 +70,69 @@ export type ReplayClient = Pick<
  */
 export type ReplayParamsOverride = Record<string, unknown> | null | undefined;
 
+/**
+ * The params of a replayed request that `replayProtocolRequest` actually reads,
+ * per method.
+ *
+ * This is the other half of the switch below, and the two must move together.
+ * Replay does not re-send a captured frame verbatim — it dispatches through the
+ * typed `InspectorClient` methods, which take named arguments. Everything those
+ * signatures have no room for is dropped: `_meta` on any method (a captured
+ * `tools/call` carries `_meta.progressToken`), and every key of a list request
+ * other than `cursor`.
+ *
+ * That is invisible and harmless for one-click Replay, which re-sends what it
+ * was given. It is neither once the params are put in front of the user to
+ * edit (#2151): an editor showing `_meta` invites them to change it, and Send
+ * would then transmit something other than what they were looking at. So the
+ * Edit-and-replay modal seeds from *this* rather than from the raw frame, and
+ * names what it left out.
+ */
+export function replayableParams(
+  method: string,
+  params: Record<string, unknown> | undefined,
+): { params: Record<string, unknown> | undefined; dropped: string[] } {
+  if (!params) return { params: undefined, dropped: [] };
+
+  const keep = (...names: string[]): string[] =>
+    names.filter((name) => Object.hasOwn(params, name));
+
+  let kept: string[];
+  switch (method) {
+    case "tools/call":
+    case "prompts/get":
+      kept = keep("name", "arguments");
+      break;
+    case "resources/read":
+      kept = keep("uri");
+      break;
+    case "tools/list":
+    case "prompts/list":
+    case "resources/list":
+    case "resources/templates/list":
+    case "tasks/list":
+      // Only a *string* cursor survives: the dispatcher ignores any other type,
+      // so keeping it would put a value in the editor that changes nothing.
+      kept = typeof params.cursor === "string" ? ["cursor"] : [];
+      break;
+    default:
+      // `ping` takes nothing, and an unreplayable method never reaches here.
+      kept = [];
+      break;
+  }
+
+  const dropped = Object.keys(params).filter((name) => !kept.includes(name));
+  // `fromEntries`, never an assignment loop: an argument legitimately named
+  // `__proto__` would otherwise reach the prototype setter.
+  return {
+    params:
+      kept.length > 0
+        ? Object.fromEntries(kept.map((name) => [name, params[name]]))
+        : undefined,
+    dropped,
+  };
+}
+
 export async function replayProtocolRequest(
   client: ReplayClient,
   method: string,

From 4e7537ea76d650261e736431e5c924993933c6dc Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Thu, 27 Aug 2026 03:50:57 -0400
Subject: [PATCH 06/14] fix(web): validate the edited replay draft, not just
 its seed
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Copilot's fifth pass: one comment, and the completion of the previous round's
fix. Seeding the editor from `replayableParams` stopped it *offering* a key
the dispatcher would drop, but nothing stopped one being typed in — adding
`_meta` to a `tools/list` draft still let Send close the modal and discard it.

`parseParamsDraft` now takes the method and rejects any key the dispatch would
not read, so Send is disabled with the offending names rather than silently
dropping them. It asks the same `replayableParams` the seed is built from, so
the editor and the dispatcher cannot disagree about which keys survive.

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>
---
 .../EditReplayModal/EditReplayModal.test.tsx  | 42 +++++++++++++++++++
 .../EditReplayModal/EditReplayModal.tsx       | 23 ++++++++--
 2 files changed, 62 insertions(+), 3 deletions(-)

diff --git a/clients/web/src/components/groups/EditReplayModal/EditReplayModal.test.tsx b/clients/web/src/components/groups/EditReplayModal/EditReplayModal.test.tsx
index 81cde85020..ad49c77045 100644
--- a/clients/web/src/components/groups/EditReplayModal/EditReplayModal.test.tsx
+++ b/clients/web/src/components/groups/EditReplayModal/EditReplayModal.test.tsx
@@ -136,6 +136,48 @@ describe("EditReplayModal", () => {
     ).toBeInTheDocument();
   });
 
+  // Seeding from the projection is only half of it: a key the dispatcher does
+  // not read can be *added* to the draft, and Send would then discard an edit
+  // the user was looking at.
+  it("disables Send for a key this method's dispatch would not read", async () => {
+    renderWithMantine(
+      <EditReplayModal {...baseProps} method="tools/list" params={undefined} />,
+    );
+    await setAceText('{"cursor":"abc","_meta":{"progressToken":1}}');
+    expect(screen.getByRole("button", { name: "Send" })).toBeDisabled();
+    expect(
+      screen.getByText(/`_meta` is not carried by tools\/list/),
+    ).toBeInTheDocument();
+  });
+
+  it("re-enables Send once the unsupported key is removed", async () => {
+    renderWithMantine(
+      <EditReplayModal {...baseProps} method="tools/list" params={undefined} />,
+    );
+    await setAceText('{"cursor":"abc","_meta":{}}');
+    expect(screen.getByRole("button", { name: "Send" })).toBeDisabled();
+
+    await setAceText('{"cursor":"abc"}');
+    expect(screen.getByRole("button", { name: "Send" })).not.toBeDisabled();
+    expect(screen.queryByText(/not carried by/)).toBeNull();
+  });
+
+  // The check is per method, not a fixed key list: `arguments` is read by a
+  // tool call and by nothing on a list request.
+  it("judges a key against the method it would be sent to", async () => {
+    const { rerender } = renderWithMantine(
+      <EditReplayModal {...baseProps} method="tools/call" />,
+    );
+    await setAceText('{"name":"echo","arguments":{"a":1}}');
+    expect(screen.getByRole("button", { name: "Send" })).not.toBeDisabled();
+
+    rerender(<EditReplayModal {...baseProps} method="tools/list" />);
+    expect(screen.getByRole("button", { name: "Send" })).toBeDisabled();
+    expect(
+      screen.getByText(/`name`, `arguments` are not carried by tools\/list/),
+    ).toBeInTheDocument();
+  });
+
   it("closes without sending when cancelled", async () => {
     const user = userEvent.setup();
     const onSend = vi.fn();
diff --git a/clients/web/src/components/groups/EditReplayModal/EditReplayModal.tsx b/clients/web/src/components/groups/EditReplayModal/EditReplayModal.tsx
index be1dd877cd..d8fcfb83ca 100644
--- a/clients/web/src/components/groups/EditReplayModal/EditReplayModal.tsx
+++ b/clients/web/src/components/groups/EditReplayModal/EditReplayModal.tsx
@@ -2,6 +2,7 @@ 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 { isSerializableJson } from "@inspector/core/json/jsonUtils.js";
 
 export interface EditReplayModalProps {
@@ -60,10 +61,12 @@ function formatDroppedKeys(keys: string[]): string {
  * genuinely carries none, and an empty editor wearing a red error would read as
  * broken. A non-object is reported separately from text that is not JSON at
  * all: JSON-RPC `params` must be a structured value, so `42` is a shape that
- * cannot be sent however finished it is. A number that overflows is a third
- * case, and the subtlest — see the note on that branch.
+ * cannot be sent however finished it is. A number that overflows, and a key
+ * this method's dispatch does not read, are the two subtle cases — see the
+ * notes on those branches.
  */
 function parseParamsDraft(
+  method: string,
   text: string,
 ):
   | { ok: true; value: Record<string, unknown> | null }
@@ -89,6 +92,20 @@ function parseParamsDraft(
         "Numbers must be finite — a value like `1e400` overflows and would be sent as null",
     };
   }
+  // Seeding from the projection is only half of it: a key the dispatcher does
+  // not read can also be *added* to the draft, and Send would then discard an
+  // edit the user was looking at. Checked with the same function the seed is
+  // built from, so the editor and the dispatcher cannot disagree about which
+  // keys survive.
+  const { dropped } = replayableParams(method, parsed);
+  if (dropped.length > 0) {
+    return {
+      ok: false,
+      error: `${formatDroppedKeys(dropped)} not carried by ${method} — remove ${
+        dropped.length === 1 ? "it" : "them"
+      } so this matches what is sent`,
+    };
+  }
   return { ok: true, value: parsed };
 }
 
@@ -107,7 +124,7 @@ function EditReplayForm({
   const [draft, setDraft] = useState(() =>
     params === undefined ? "" : JSON.stringify(params, null, 2),
   );
-  const parsed = parseParamsDraft(draft);
+  const parsed = parseParamsDraft(method, draft);
 
   return (
     <Stack gap="sm">

From 0e9069a78dc1609a3ccfff2b4bbd8900e6df9687 Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Thu, 27 Aug 2026 04:17:19 -0400
Subject: [PATCH 07/14] fix(web): reject a reshaped replay param, and forward a
 declared JSON body
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 .../EditReplayModal/EditReplayModal.test.tsx  | 19 +++++++++
 .../EditReplayModal/EditReplayModal.tsx       | 11 +++++-
 .../NetworkEntry/NetworkEntry.stories.tsx     | 36 ++++++++++++++---
 .../groups/NetworkEntry/NetworkEntry.test.tsx | 31 ++++++++++++++-
 .../groups/NetworkEntry/NetworkEntry.tsx      | 22 +++++++++++
 clients/web/src/lib/protocolReplay.test.ts    | 39 +++++++++++++++++++
 clients/web/src/lib/protocolReplay.ts         | 35 +++++++++++++++++
 7 files changed, 186 insertions(+), 7 deletions(-)

diff --git a/clients/web/src/components/groups/EditReplayModal/EditReplayModal.test.tsx b/clients/web/src/components/groups/EditReplayModal/EditReplayModal.test.tsx
index ad49c77045..b7160a7906 100644
--- a/clients/web/src/components/groups/EditReplayModal/EditReplayModal.test.tsx
+++ b/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();
diff --git a/clients/web/src/components/groups/EditReplayModal/EditReplayModal.tsx b/clients/web/src/components/groups/EditReplayModal/EditReplayModal.tsx
index d8fcfb83ca..eb28d3e1c2 100644
--- a/clients/web/src/components/groups/EditReplayModal/EditReplayModal.tsx
+++ b/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 };
 }
 
diff --git a/clients/web/src/components/groups/NetworkEntry/NetworkEntry.stories.tsx b/clients/web/src/components/groups/NetworkEntry/NetworkEntry.stories.tsx
index a4f052545d..21349a413d 100644
--- a/clients/web/src/components/groups/NetworkEntry/NetworkEntry.stories.tsx
+++ b/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",
+      );
+    });
   },
 };
 
diff --git a/clients/web/src/components/groups/NetworkEntry/NetworkEntry.test.tsx b/clients/web/src/components/groups/NetworkEntry/NetworkEntry.test.tsx
index 0f8c225058..e42d841cec 100644
--- a/clients/web/src/components/groups/NetworkEntry/NetworkEntry.test.tsx
+++ b/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);
diff --git a/clients/web/src/components/groups/NetworkEntry/NetworkEntry.tsx b/clients/web/src/components/groups/NetworkEntry/NetworkEntry.tsx
index 399cdfe4a4..8aecb0fc0e 100644
--- a/clients/web/src/components/groups/NetworkEntry/NetworkEntry.tsx
+++ b/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>
diff --git a/clients/web/src/lib/protocolReplay.test.ts b/clients/web/src/lib/protocolReplay.test.ts
index b60b0174f9..35c80e3b02 100644
--- a/clients/web/src/lib/protocolReplay.test.ts
+++ b/clients/web/src/lib/protocolReplay.test.ts
@@ -5,6 +5,7 @@ import {
   messagesToLogEntries,
   replayProtocolRequest,
   replayableParams,
+  reshapedReplayParam,
   type ReplayClient,
 } from "./protocolReplay";
 
@@ -135,6 +136,44 @@ describe("replayableParams", () => {
   });
 });
 
+// `replayableParams` answers which keys survive; this answers whether the
+// surviving ones survive intact.
+describe("reshapedReplayParam", () => {
+  it("accepts an object arguments", () => {
+    expect(
+      reshapedReplayParam("tools/call", { name: "x", arguments: { a: 1 } }),
+    ).toBeNull();
+  });
+
+  it("accepts an absent arguments", () => {
+    expect(reshapedReplayParam("tools/call", { name: "x" })).toBeNull();
+  });
+
+  // The sharp case: `?? {}` replaces a null, so the editor shows `null` and the
+  // wire carries `{}`.
+  it("rejects a null arguments, which is sent as an empty object", () => {
+    expect(
+      reshapedReplayParam("tools/call", { name: "x", arguments: null }),
+    ).toMatch(/sent as `\{\}` when null/);
+  });
+
+  it.each([
+    ["an array", [1, 2]],
+    ["a number", 4],
+    ["a string", "a"],
+  ])("rejects %s arguments", (_label, args) => {
+    expect(
+      reshapedReplayParam("prompts/get", { name: "x", arguments: args }),
+    ).toMatch(/must be a JSON object/);
+  });
+
+  it("has nothing to say about methods that take no arguments", () => {
+    expect(reshapedReplayParam("tools/list", { cursor: "a" })).toBeNull();
+    expect(reshapedReplayParam("resources/read", { uri: "x://y" })).toBeNull();
+    expect(reshapedReplayParam("ping", undefined)).toBeNull();
+  });
+});
+
 describe("replayProtocolRequest", () => {
   const tool: Tool = { name: "echo", inputSchema: { type: "object" } };
 
diff --git a/clients/web/src/lib/protocolReplay.ts b/clients/web/src/lib/protocolReplay.ts
index 5bee902688..47fcff523b 100644
--- a/clients/web/src/lib/protocolReplay.ts
+++ b/clients/web/src/lib/protocolReplay.ts
@@ -133,6 +133,41 @@ export function replayableParams(
   };
 }
 
+/**
+ * A param the dispatch below would *reshape* on the way out, or null when every
+ * kept param is sent as written.
+ *
+ * {@link replayableParams} answers which keys survive; this answers whether the
+ * surviving ones survive *intact*. Only `arguments` can fail that today, and it
+ * fails two ways, both of which the Edit-and-replay editor has to catch before
+ * Send:
+ *
+ * - `arguments: null` is nullish, so `?? {}` replaces it — the editor shows
+ *   `null` and the wire carries `{}`.
+ * - `arguments: [1,2]` or `arguments: 4` is not nullish, so the cast carries it
+ *   through unchanged into a call whose type says it is a named-argument
+ *   record. Nothing reshapes it, but nothing can send it either.
+ *
+ * `name` and `uri` are deliberately not checked here: the dispatch already
+ * refuses a missing or non-string one with a reason the caller surfaces as a
+ * toast, so those fail visibly rather than silently.
+ */
+export function reshapedReplayParam(
+  method: string,
+  params: Record<string, unknown> | undefined,
+): string | null {
+  if (!params) return null;
+  if (method !== "tools/call" && method !== "prompts/get") return null;
+  if (!Object.hasOwn(params, "arguments")) return null;
+  const args = params.arguments;
+  const isRecord =
+    args !== null && typeof args === "object" && !Array.isArray(args);
+  if (isRecord) return null;
+  return args === null
+    ? "`arguments` is sent as `{}` when null — remove it, or give it an object"
+    : "`arguments` must be a JSON object (`{ … }`)";
+}
+
 export async function replayProtocolRequest(
   client: ReplayClient,
   method: string,

From 8f4aa7f8afecf2462043e9205e2fbadff5d3c483 Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Thu, 27 Aug 2026 04:34:45 -0400
Subject: [PATCH 08/14] fix(web): reject drafts whose digits or types would not
 survive being sent
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Copilot's seventh pass, three comments, all the same class: the editor showing
one value while the wire carries another.

- `JSON.parse` rounds a whole number past 2^53−1 to the nearest double, so a
  draft reading `{"id":9007199254740993}` submits `…992`. New
  `hasRoundedInteger`, applied by all four JSON-draft parsers — the raw
  arguments editor, `SchemaJsonField`, the Edit-and-replay modal, and
  `parseJsonObjectDraft`, which Copilot did not flag but shares the defect.

  It is narrower than "unsafe integer": it also requires the number's shortest
  form to be written out in full, because JS stringifies from 1e21 upward in
  exponent form and such a value was typed that way — `{"n":1e308}` is a
  legitimate `_meta` value that `parseJsonObjectDraft`'s tests already pin as
  accepted. It still refuses the rare full-form integer that happens to be
  exactly representable, erring toward refusing a sendable value rather than
  misreporting an unsendable one — the trade `toNumericValue` already makes.

- `getPrompt` runs `convertPromptArguments`, which JSON-stringifies every
  non-string argument, so `{"count":2}` leaves as `{"count":"2"}` while the
  editor still shows a number. `reshapedReplayParam` now rejects a non-string
  prompt argument. Not a workaround: the spec types
  `GetPromptRequest.params.arguments` as `Record<string, string>`, so a string
  is the only thing a prompt argument can be. `tools/call` is untouched —
  `callTool` sends its arguments as given.

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>
---
 .../EditReplayModal/EditReplayModal.test.tsx  | 20 +++++++
 .../EditReplayModal/EditReplayModal.tsx       |  9 +++-
 .../groups/SchemaForm/SchemaForm.test.tsx     | 16 ++++++
 .../groups/SchemaForm/SchemaForm.tsx          | 23 ++++++--
 clients/web/src/lib/protocolReplay.test.ts    | 32 ++++++++++++
 clients/web/src/lib/protocolReplay.ts         | 29 ++++++++---
 clients/web/src/utils/jsonObjectDraft.test.ts | 48 ++++++++++++++++-
 clients/web/src/utils/jsonObjectDraft.ts      | 52 +++++++++++++++++++
 8 files changed, 216 insertions(+), 13 deletions(-)

diff --git a/clients/web/src/components/groups/EditReplayModal/EditReplayModal.test.tsx b/clients/web/src/components/groups/EditReplayModal/EditReplayModal.test.tsx
index b7160a7906..e43deaa897 100644
--- a/clients/web/src/components/groups/EditReplayModal/EditReplayModal.test.tsx
+++ b/clients/web/src/components/groups/EditReplayModal/EditReplayModal.test.tsx
@@ -197,6 +197,26 @@ describe("EditReplayModal", () => {
     ).toBeInTheDocument();
   });
 
+  // `JSON.parse` rounds a whole number past 2^53−1 to the nearest double, so
+  // the draft shows digits the wire will not carry.
+  it("disables Send for a whole number that loses digits when parsed", async () => {
+    renderWithMantine(<EditReplayModal {...baseProps} method="tools/call" />);
+    await setAceText('{"name":"echo","arguments":{"id":9007199254740993}}');
+    expect(screen.getByRole("button", { name: "Send" })).toBeDisabled();
+    expect(
+      screen.getByText(/Whole numbers must be within/),
+    ).toBeInTheDocument();
+  });
+
+  it("disables Send for a non-string prompt argument", async () => {
+    renderWithMantine(<EditReplayModal {...baseProps} method="prompts/get" />);
+    await setAceText('{"name":"greet","arguments":{"count":2}}');
+    expect(screen.getByRole("button", { name: "Send" })).toBeDisabled();
+    expect(
+      screen.getByText(/`count` would be sent as JSON text/),
+    ).toBeInTheDocument();
+  });
+
   it("closes without sending when cancelled", async () => {
     const user = userEvent.setup();
     const onSend = vi.fn();
diff --git a/clients/web/src/components/groups/EditReplayModal/EditReplayModal.tsx b/clients/web/src/components/groups/EditReplayModal/EditReplayModal.tsx
index eb28d3e1c2..c70d258fba 100644
--- a/clients/web/src/components/groups/EditReplayModal/EditReplayModal.tsx
+++ b/clients/web/src/components/groups/EditReplayModal/EditReplayModal.tsx
@@ -1,7 +1,11 @@
 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 {
+  hasRoundedInteger,
+  isJsonObject,
+  ROUNDED_INTEGER_ERROR,
+} from "../../../utils/jsonObjectDraft";
 import {
   replayableParams,
   reshapedReplayParam,
@@ -95,6 +99,9 @@ function parseParamsDraft(
         "Numbers must be finite — a value like `1e400` overflows and would be sent as null",
     };
   }
+  if (hasRoundedInteger(parsed)) {
+    return { ok: false, error: ROUNDED_INTEGER_ERROR };
+  }
   // Seeding from the projection is only half of it: a key the dispatcher does
   // not read can also be *added* to the draft, and Send would then discard an
   // edit the user was looking at. Checked with the same function the seed is
diff --git a/clients/web/src/components/groups/SchemaForm/SchemaForm.test.tsx b/clients/web/src/components/groups/SchemaForm/SchemaForm.test.tsx
index 08eab255da..485beb5a08 100644
--- a/clients/web/src/components/groups/SchemaForm/SchemaForm.test.tsx
+++ b/clients/web/src/components/groups/SchemaForm/SchemaForm.test.tsx
@@ -1913,6 +1913,22 @@ describe("SchemaForm raw JSON (#2151)", () => {
     expect(screen.getByText(/Numbers must be finite/)).toBeInTheDocument();
   });
 
+  // The quieter half of the same defect the `1e400` case covers: a whole number
+  // past 2^53−1 is rounded by `JSON.parse`, so the editor would show digits the
+  // wire will not carry.
+  it("blocks submission for a whole number that loses digits when parsed", async () => {
+    const user = userEvent.setup();
+    const onValidityChange = vi.fn();
+    renderWithMantine(<RawHarness onValidityChange={onValidityChange} />);
+    await enableRawJson(user);
+
+    await setAceTextByLabel(/Arguments JSON/, '{"id":9007199254740993}');
+    expect(onValidityChange).toHaveBeenLastCalledWith(true);
+    expect(
+      screen.getByText(/Whole numbers must be within/),
+    ).toBeInTheDocument();
+  });
+
   // Nothing in `values` names a branch, so the picker's index is held by the
   // form. Editing the discriminator in the raw document is a change to which
   // branch is in effect, and it carries no other signal — without the re-derive
diff --git a/clients/web/src/components/groups/SchemaForm/SchemaForm.tsx b/clients/web/src/components/groups/SchemaForm/SchemaForm.tsx
index a24649a800..e533c5fce6 100644
--- a/clients/web/src/components/groups/SchemaForm/SchemaForm.tsx
+++ b/clients/web/src/components/groups/SchemaForm/SchemaForm.tsx
@@ -24,7 +24,11 @@ import {
 import { ClearButton } from "../../elements/ClearButton/ClearButton";
 import { EnlargeButton } from "../../elements/EnlargeButton/EnlargeButton";
 import { JsonEditor } from "../../elements/JsonEditor/JsonEditor";
-import { isJsonObject } from "../../../utils/jsonObjectDraft";
+import {
+  hasRoundedInteger,
+  isJsonObject,
+  ROUNDED_INTEGER_ERROR,
+} from "../../../utils/jsonObjectDraft";
 import { isSerializableJson } from "@inspector/core/json/jsonUtils.js";
 import { useValueChange } from "../../../hooks/useValueChange";
 import type {
@@ -280,9 +284,10 @@ function toNumericValue(raw: string | number): number | undefined {
  * That covers text that is not JSON *yet* — the mid-edit state this field's
  * whole draft/value split exists for — and text that parses but does not
  * survive being written back out: `JSON.parse("1e400")` yields `Infinity`,
- * which `JSON.stringify` writes as `null`. Both report no value, so the field
- * shows its error and `onValidityChange` blocks submission, rather than sending
- * a number the user never typed. Same guard, same reason, as
+ * which `JSON.stringify` writes as `null`, and a whole number past 2^53−1 is
+ * rounded to the nearest double. All three report no value, so the field shows
+ * its error and `onValidityChange` blocks submission, rather than sending a
+ * number the user never typed. Same guards, same reason, as
  * `parseJsonObjectDraft` and the raw-arguments editor above.
  */
 function parseJsonDraft(text: string): unknown {
@@ -295,7 +300,10 @@ function parseJsonDraft(text: string): unknown {
   } catch {
     return undefined;
   }
-  return isSerializableJson(parsed) ? parsed : undefined;
+  if (!isSerializableJson(parsed) || hasRoundedInteger(parsed)) {
+    return undefined;
+  }
+  return parsed;
 }
 
 /** Structural equality for the draft/value re-sync, via canonical JSON. */
@@ -609,6 +617,11 @@ function parseRawArgumentsDraft(
         "Numbers must be finite — a value like `1e400` overflows and would be sent as null",
     };
   }
+  // The quieter half of the same defect: a whole number past 2^53−1 parses to
+  // the nearest double, so the draft shows digits the wire will not carry.
+  if (hasRoundedInteger(parsed)) {
+    return { ok: false, error: ROUNDED_INTEGER_ERROR };
+  }
   return { ok: true, value: parsed };
 }
 
diff --git a/clients/web/src/lib/protocolReplay.test.ts b/clients/web/src/lib/protocolReplay.test.ts
index 35c80e3b02..6e1d38cb1a 100644
--- a/clients/web/src/lib/protocolReplay.test.ts
+++ b/clients/web/src/lib/protocolReplay.test.ts
@@ -167,6 +167,38 @@ describe("reshapedReplayParam", () => {
     ).toMatch(/must be a JSON object/);
   });
 
+  // `getPrompt` runs `convertPromptArguments`, which JSON-stringifies anything
+  // that is not already a string — so `{count: 2}` goes out as `{count: "2"}`
+  // while the editor still shows the number. The spec types a prompt argument
+  // as a string, so this is the protocol, not a quirk to route around.
+  it("rejects a non-string prompt argument, which is stringified on the way out", () => {
+    expect(
+      reshapedReplayParam("prompts/get", {
+        name: "greet",
+        arguments: { count: 2, who: "ada" },
+      }),
+    ).toMatch(/`count` would be sent as JSON text/);
+  });
+
+  it("accepts string prompt arguments", () => {
+    expect(
+      reshapedReplayParam("prompts/get", {
+        name: "greet",
+        arguments: { count: "2", who: "ada" },
+      }),
+    ).toBeNull();
+  });
+
+  // `callTool` sends its arguments as given, so the same shape is fine there.
+  it("leaves a tool call's non-string arguments alone", () => {
+    expect(
+      reshapedReplayParam("tools/call", {
+        name: "add",
+        arguments: { a: 1, b: 2 },
+      }),
+    ).toBeNull();
+  });
+
   it("has nothing to say about methods that take no arguments", () => {
     expect(reshapedReplayParam("tools/list", { cursor: "a" })).toBeNull();
     expect(reshapedReplayParam("resources/read", { uri: "x://y" })).toBeNull();
diff --git a/clients/web/src/lib/protocolReplay.ts b/clients/web/src/lib/protocolReplay.ts
index 47fcff523b..768909d24d 100644
--- a/clients/web/src/lib/protocolReplay.ts
+++ b/clients/web/src/lib/protocolReplay.ts
@@ -138,8 +138,8 @@ export function replayableParams(
  * kept param is sent as written.
  *
  * {@link replayableParams} answers which keys survive; this answers whether the
- * surviving ones survive *intact*. Only `arguments` can fail that today, and it
- * fails two ways, both of which the Edit-and-replay editor has to catch before
+ * surviving ones survive *intact*. Only `arguments` can fail that, and it fails
+ * three ways, each of which the Edit-and-replay editor has to catch before
  * Send:
  *
  * - `arguments: null` is nullish, so `?? {}` replaces it — the editor shows
@@ -147,6 +147,13 @@ export function replayableParams(
  * - `arguments: [1,2]` or `arguments: 4` is not nullish, so the cast carries it
  *   through unchanged into a call whose type says it is a named-argument
  *   record. Nothing reshapes it, but nothing can send it either.
+ * - For **`prompts/get` only**, a non-string *value*. `getPrompt` runs
+ *   `convertPromptArguments`, which `JSON.stringify`s anything that is not
+ *   already a string — so `{"count": 2}` is sent as `{"count": "2"}` while the
+ *   editor still shows the number. This is not a quirk to route around: the
+ *   spec types `GetPromptRequest.params.arguments` as `Record<string, string>`,
+ *   so a string is the only thing a prompt argument can be. `tools/call` is
+ *   unaffected — `callTool` sends its arguments as given.
  *
  * `name` and `uri` are deliberately not checked here: the dispatch already
  * refuses a missing or non-string one with a reason the caller surfaces as a
@@ -162,10 +169,20 @@ export function reshapedReplayParam(
   const args = params.arguments;
   const isRecord =
     args !== null && typeof args === "object" && !Array.isArray(args);
-  if (isRecord) return null;
-  return args === null
-    ? "`arguments` is sent as `{}` when null — remove it, or give it an object"
-    : "`arguments` must be a JSON object (`{ … }`)";
+  if (!isRecord) {
+    return args === null
+      ? "`arguments` is sent as `{}` when null — remove it, or give it an object"
+      : "`arguments` must be a JSON object (`{ … }`)";
+  }
+  if (method === "prompts/get") {
+    const coerced = Object.entries(args as Record<string, unknown>)
+      .filter(([, value]) => typeof value !== "string")
+      .map(([key]) => `\`${key}\``);
+    if (coerced.length > 0) {
+      return `A prompt argument is always a string — ${coerced.join(", ")} would be sent as JSON text`;
+    }
+  }
+  return null;
 }
 
 export async function replayProtocolRequest(
diff --git a/clients/web/src/utils/jsonObjectDraft.test.ts b/clients/web/src/utils/jsonObjectDraft.test.ts
index 51e835a425..5e8be685a1 100644
--- a/clients/web/src/utils/jsonObjectDraft.test.ts
+++ b/clients/web/src/utils/jsonObjectDraft.test.ts
@@ -1,5 +1,51 @@
 import { describe, it, expect } from "vitest";
-import { parseJsonObjectDraft } from "./jsonObjectDraft";
+import { hasRoundedInteger, parseJsonObjectDraft } from "./jsonObjectDraft";
+
+// `isSerializableJson` catches a literal too large to represent (`1e400` →
+// `Infinity` → `null` on the wire). This is the quieter one: a whole number
+// past 2^53−1 parses to the nearest double, so the draft shows digits the wire
+// will not carry.
+describe("hasRoundedInteger", () => {
+  it("accepts whole numbers inside the safe range", () => {
+    expect(hasRoundedInteger({ id: Number.MAX_SAFE_INTEGER })).toBe(false);
+    expect(hasRoundedInteger({ id: -Number.MAX_SAFE_INTEGER })).toBe(false);
+    expect(hasRoundedInteger({ id: 0 })).toBe(false);
+  });
+
+  it("rejects a whole number past the safe range", () => {
+    // Typed as …93, parsed as …92.
+    expect(hasRoundedInteger(JSON.parse('{"id":9007199254740993}'))).toBe(true);
+  });
+
+  // A fractional or exponent-form value is a double by nature and is sent as
+  // the double it parsed to, so nothing is lost between typing and sending.
+  it("accepts a fractional value however large", () => {
+    expect(hasRoundedInteger({ ratio: 1.5 })).toBe(false);
+    expect(hasRoundedInteger({ ratio: 0.1 + 0.2 })).toBe(false);
+  });
+
+  // JS stringifies from 1e21 upward in exponent form, so such a value was typed
+  // that way and the parsed double is what was asked for. `parseJsonObjectDraft`
+  // has always accepted these.
+  it("accepts a value whose shortest form carries an exponent", () => {
+    expect(hasRoundedInteger({ n: 1e308 })).toBe(false);
+    expect(hasRoundedInteger({ n: 1e21 })).toBe(false);
+  });
+
+  it("looks inside arrays and nested objects", () => {
+    expect(hasRoundedInteger(JSON.parse('[{"a":[9007199254740993]}]'))).toBe(
+      true,
+    );
+    expect(hasRoundedInteger({ a: { b: [1, 2, "x", null, true] } })).toBe(
+      false,
+    );
+  });
+
+  it("has nothing to say about non-numeric values", () => {
+    expect(hasRoundedInteger("9007199254740993")).toBe(false);
+    expect(hasRoundedInteger(null)).toBe(false);
+  });
+});
 
 describe("parseJsonObjectDraft", () => {
   it("reads empty text as the empty object rather than an error", () => {
diff --git a/clients/web/src/utils/jsonObjectDraft.ts b/clients/web/src/utils/jsonObjectDraft.ts
index 731d6b8f9c..d69ac326d7 100644
--- a/clients/web/src/utils/jsonObjectDraft.ts
+++ b/clients/web/src/utils/jsonObjectDraft.ts
@@ -20,6 +20,55 @@ export function isJsonObject(value: unknown): value is StrictJsonObject {
   return value !== null && typeof value === "object" && !Array.isArray(value);
 }
 
+/**
+ * Whether `JSON.parse` dropped digits from a whole number written out in full.
+ *
+ * `isSerializableJson` catches a literal too large to *represent* — `1e400`
+ * parses to `Infinity` and writes back as `null`. This catches the quieter one:
+ * a whole number past 2^53−1 parses to the nearest double, so
+ * `{"id":9007199254740993}` becomes `…992` with no error anywhere. The draft
+ * still shows what was typed, which is what makes it a misreport rather than a
+ * formatting difference — the editor displays one value and the wire carries
+ * another. Snowflake-style ids are the realistic case.
+ *
+ * Two conditions, and the second is what keeps this from over-reaching:
+ *
+ * - **An unsafe whole number.** A fractional value is a double by nature and is
+ *   sent as the double it parsed to, so nothing is lost between typing and
+ *   sending.
+ * - **Whose shortest representation is written out in full.** JS switches to
+ *   exponent form at 1e21, so a value that stringifies as `1e+308` was typed in
+ *   exponent form, where the parsed double *is* the value the user asked for.
+ *   Without this, `{"n":1e308}` — a legitimate `_meta` value — would be
+ *   refused, which `parseJsonObjectDraft`'s own tests pin against.
+ *
+ * It still refuses the rare full-form integer past 2^53−1 that happens to be
+ * exactly representable (2^54, say), because nothing here can tell it apart
+ * from one that lost digits without the original literal. That errs toward
+ * refusing a sendable value rather than misreporting an unsendable one, which
+ * is the same trade `toNumericValue` makes for the schema form's number input.
+ */
+export function hasRoundedInteger(value: unknown): boolean {
+  if (typeof value === "number") {
+    return (
+      Number.isInteger(value) &&
+      !Number.isSafeInteger(value) &&
+      !String(value).includes("e")
+    );
+  }
+  if (Array.isArray(value)) return value.some(hasRoundedInteger);
+  if (value !== null && typeof value === "object") {
+    return Object.values(value as Record<string, unknown>).some(
+      hasRoundedInteger,
+    );
+  }
+  return false;
+}
+
+/** The message every draft parser uses for {@link hasRoundedInteger}. */
+export const ROUNDED_INTEGER_ERROR =
+  "Whole numbers must be within ±(2^53 − 1) — a longer one is rounded when parsed, so a different value would be sent";
+
 /**
  * Read a JSON-object editor's draft text.
  *
@@ -60,5 +109,8 @@ export function parseJsonObjectDraft(text: string): JsonObjectDraft {
         "Numbers must be finite — a value like `1e400` overflows and would be sent as null",
     };
   }
+  if (hasRoundedInteger(parsed)) {
+    return { ok: false, error: ROUNDED_INTEGER_ERROR };
+  }
   return { ok: true, value: parsed };
 }

From fcdc65b2893df82f1b07f17ebd16da83bc4043bb Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Thu, 27 Aug 2026 04:56:22 -0400
Subject: [PATCH 09/14] fix(web): read the literal, not the parsed number;
 project cursors and tool args
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Copilot's eighth pass, three comments, all real.

- The precision check now reads the **source text**. Inferring the literal from
  `String(value)` was wrong in both directions: it accepted every full-form
  integer at or above 1e21 (`1000000000000000000001` parses to `1e21` and is
  written back as `1e+21`), and refused `2^54`, which is written out in full
  and exactly representable. `hasImpreciseIntegerLiteral` scans the draft for
  numeric tokens — skipping strings, so a digit-string value is untouched — and
  compares `BigInt(literal)` against `BigInt(Number(literal))`, which is exact.

- `""` is now reported as a surviving cursor for `tools/list` only. It builds
  its params with `cursor !== undefined` and carries the empty string
  deliberately; the other four list adapters use a truthiness check and drop
  it, so the editor showed `{"cursor":""}` while `{}` went out. The asymmetry
  looks like a latent bug in those four, but this function's job is to describe
  what the dispatch does.

- `callTool` runs every string-valued argument through `convertToolParameters`,
  so `{"count":"2"}` against a numeric schema is sent as `{"count":2}`.
  `reshapedReplayParam` now takes the tool and detects that by running the same
  conversion and comparing, rather than restating its rules — the two cannot
  drift. `tools` is threaded to `ProtocolEntry` for it, optional throughout: an
  unknown tool skips the check rather than blocking a replay.

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>
---
 .../EditReplayModal/EditReplayModal.test.tsx  |   2 +-
 .../EditReplayModal/EditReplayModal.tsx       |  19 +++-
 .../MrtrConversation/MrtrConversation.tsx     |   9 ++
 .../groups/ProtocolEntry/ProtocolEntry.tsx    |  16 +++
 .../ProtocolListPanel/ProtocolListPanel.tsx   |  10 ++
 .../groups/SchemaForm/SchemaForm.test.tsx     |   2 +-
 .../groups/SchemaForm/SchemaForm.tsx          |   6 +-
 .../screens/ProtocolScreen/ProtocolScreen.tsx |   9 ++
 .../views/InspectorView/InspectorView.tsx     |   3 +
 clients/web/src/lib/protocolReplay.test.ts    | 104 +++++++++++++++++
 clients/web/src/lib/protocolReplay.ts         |  54 ++++++++-
 clients/web/src/utils/jsonObjectDraft.test.ts |  71 ++++++++----
 clients/web/src/utils/jsonObjectDraft.ts      | 106 +++++++++++-------
 13 files changed, 336 insertions(+), 75 deletions(-)

diff --git a/clients/web/src/components/groups/EditReplayModal/EditReplayModal.test.tsx b/clients/web/src/components/groups/EditReplayModal/EditReplayModal.test.tsx
index e43deaa897..5fdaa6aabd 100644
--- a/clients/web/src/components/groups/EditReplayModal/EditReplayModal.test.tsx
+++ b/clients/web/src/components/groups/EditReplayModal/EditReplayModal.test.tsx
@@ -204,7 +204,7 @@ describe("EditReplayModal", () => {
     await setAceText('{"name":"echo","arguments":{"id":9007199254740993}}');
     expect(screen.getByRole("button", { name: "Send" })).toBeDisabled();
     expect(
-      screen.getByText(/Whole numbers must be within/),
+      screen.getByText(/A whole number written out in full must be within/),
     ).toBeInTheDocument();
   });
 
diff --git a/clients/web/src/components/groups/EditReplayModal/EditReplayModal.tsx b/clients/web/src/components/groups/EditReplayModal/EditReplayModal.tsx
index c70d258fba..480f87ccc8 100644
--- a/clients/web/src/components/groups/EditReplayModal/EditReplayModal.tsx
+++ b/clients/web/src/components/groups/EditReplayModal/EditReplayModal.tsx
@@ -1,8 +1,9 @@
 import { useState } from "react";
+import type { Tool } from "@modelcontextprotocol/client";
 import { Alert, Button, Group, Modal, Stack, Text } from "@mantine/core";
 import { JsonEditor } from "../../elements/JsonEditor/JsonEditor";
 import {
-  hasRoundedInteger,
+  hasImpreciseIntegerLiteral,
   isJsonObject,
   ROUNDED_INTEGER_ERROR,
 } from "../../../utils/jsonObjectDraft";
@@ -32,6 +33,12 @@ export interface EditReplayModalProps {
    * the one thing an inspector must not do.
    */
   droppedParamKeys?: string[];
+  /**
+   * The tool a `tools/call` replay would invoke, when it is known. Only used to
+   * detect an argument the client would coerce to the type the schema declares
+   * — see {@link reshapedReplayParam}.
+   */
+  tool?: Tool;
   /**
    * Re-issue the request with these params. `null` means "send no params",
    * which is a request an empty editor can legitimately express — see
@@ -75,6 +82,7 @@ function formatDroppedKeys(keys: string[]): string {
 function parseParamsDraft(
   method: string,
   text: string,
+  tool: Tool | undefined,
 ):
   | { ok: true; value: Record<string, unknown> | null }
   | { ok: false; error: string } {
@@ -99,7 +107,7 @@ function parseParamsDraft(
         "Numbers must be finite — a value like `1e400` overflows and would be sent as null",
     };
   }
-  if (hasRoundedInteger(parsed)) {
+  if (hasImpreciseIntegerLiteral(text)) {
     return { ok: false, error: ROUNDED_INTEGER_ERROR };
   }
   // Seeding from the projection is only half of it: a key the dispatcher does
@@ -118,7 +126,7 @@ function parseParamsDraft(
   }
   // 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);
+  const reshaped = reshapedReplayParam(method, parsed, tool);
   if (reshaped !== null) {
     return { ok: false, error: reshaped };
   }
@@ -134,13 +142,14 @@ function EditReplayForm({
   method,
   params,
   droppedParamKeys,
+  tool,
   onSend,
   onClose,
 }: Omit<EditReplayModalProps, "opened">) {
   const [draft, setDraft] = useState(() =>
     params === undefined ? "" : JSON.stringify(params, null, 2),
   );
-  const parsed = parseParamsDraft(method, draft);
+  const parsed = parseParamsDraft(method, draft, tool);
 
   return (
     <Stack gap="sm">
@@ -199,6 +208,7 @@ export function EditReplayModal({
   method,
   params,
   droppedParamKeys,
+  tool,
   onSend,
   onClose,
 }: EditReplayModalProps) {
@@ -208,6 +218,7 @@ export function EditReplayModal({
         method={method}
         params={params}
         droppedParamKeys={droppedParamKeys}
+        tool={tool}
         onSend={onSend}
         onClose={onClose}
       />
diff --git a/clients/web/src/components/groups/MrtrConversation/MrtrConversation.tsx b/clients/web/src/components/groups/MrtrConversation/MrtrConversation.tsx
index 47e4fb8378..100fdcb933 100644
--- a/clients/web/src/components/groups/MrtrConversation/MrtrConversation.tsx
+++ b/clients/web/src/components/groups/MrtrConversation/MrtrConversation.tsx
@@ -1,4 +1,5 @@
 import { useState } from "react";
+import type { Tool } from "@modelcontextprotocol/client";
 import {
   Badge,
   Collapse,
@@ -28,6 +29,12 @@ export interface MrtrConversationProps {
   /** Compact per-round layout for the narrow monitoring column. */
   embedded?: boolean;
   onReplay: (id: string, overrideParams?: ReplayParamsOverride) => void;
+  /**
+   * The connected server's tools. Forwarded to each entry only so an edited
+   * `tools/call` replay can tell whether an argument would be coerced by the
+   * schema on the way out (#2151).
+   */
+  tools?: Tool[];
   onTogglePin: (id: string) => void;
 }
 
@@ -123,6 +130,7 @@ function formatRoundLabel(index: number): string {
 }
 
 export function MrtrConversation({
+  tools,
   requestState,
   rounds,
   pinnedIds,
@@ -187,6 +195,7 @@ export function MrtrConversation({
                     onReplay(round.id, overrideParams)
                   }
                   onTogglePin={() => onTogglePin(round.id)}
+                  tools={tools}
                 />
               </Stack>
             ))}
diff --git a/clients/web/src/components/groups/ProtocolEntry/ProtocolEntry.tsx b/clients/web/src/components/groups/ProtocolEntry/ProtocolEntry.tsx
index 1b397421c7..644a892d61 100644
--- a/clients/web/src/components/groups/ProtocolEntry/ProtocolEntry.tsx
+++ b/clients/web/src/components/groups/ProtocolEntry/ProtocolEntry.tsx
@@ -12,6 +12,7 @@ import {
   Text,
 } from "@mantine/core";
 import { RiErrorWarningLine } from "react-icons/ri";
+import type { Tool } from "@modelcontextprotocol/client";
 import type { MessageEntry } from "@inspector/core/mcp/types.js";
 import { ContentViewer } from "../../elements/ContentViewer/ContentViewer";
 import { CopyButton } from "../../elements/CopyButton/CopyButton";
@@ -70,6 +71,13 @@ export interface ProtocolEntryProps {
    * correlated HTTP record.
    */
   correlatedHttpStatus?: number;
+  /**
+   * The connected server's tools, used only to tell whether an edited
+   * `tools/call` argument would be coerced by the schema on the way out
+   * (#2151). Optional: without it that one check is skipped, which is the right
+   * answer when the tool list is not known rather than a reason to block.
+   */
+  tools?: Tool[];
 }
 
 const EntryContainer = Card.withProps({
@@ -327,6 +335,7 @@ export function ProtocolEntry({
   embedded = false,
   onRevealInNetwork,
   correlatedHttpStatus,
+  tools,
 }: ProtocolEntryProps) {
   const [isExpanded, setIsExpanded] = useState(isListExpanded);
   const [isEditingReplay, setIsEditingReplay] = useState(false);
@@ -337,6 +346,12 @@ export function ProtocolEntry({
   const requestParams = extractParams(entry);
   const canReplay = isReplayableProtocolMethod(method);
   const editableParams = replayableParams(method, requestParams);
+  // The tool this entry called, when it called one — the schema an edited
+  // argument would be coerced against.
+  const replayedTool =
+    method === "tools/call" && typeof requestParams?.name === "string"
+      ? tools?.find((candidate) => candidate.name === requestParams.name)
+      : undefined;
   const resultType = extractResultType(entry);
   const subscriptionId = extractSubscriptionId(entry);
 
@@ -488,6 +503,7 @@ export function ProtocolEntry({
             // the editor must not offer a field that Send would drop.
             params={editableParams.params}
             droppedParamKeys={editableParams.dropped}
+            tool={replayedTool}
             onSend={onReplay}
             onClose={() => setIsEditingReplay(false)}
           />
diff --git a/clients/web/src/components/groups/ProtocolListPanel/ProtocolListPanel.tsx b/clients/web/src/components/groups/ProtocolListPanel/ProtocolListPanel.tsx
index 6456da0fbe..0ebe496912 100644
--- a/clients/web/src/components/groups/ProtocolListPanel/ProtocolListPanel.tsx
+++ b/clients/web/src/components/groups/ProtocolListPanel/ProtocolListPanel.tsx
@@ -1,4 +1,5 @@
 import { useMemo, useState, type ReactNode } from "react";
+import type { Tool } from "@modelcontextprotocol/client";
 import {
   Button,
   Collapse,
@@ -49,6 +50,12 @@ export interface ProtocolListPanelProps {
   /** Export just one section's entries. */
   onExportSection: (section: ProtocolSectionName) => void;
   onReplay: (id: string, overrideParams?: ReplayParamsOverride) => void;
+  /**
+   * The connected server's tools. Forwarded to each entry only so an edited
+   * `tools/call` replay can tell whether an argument would be coerced by the
+   * schema on the way out (#2151).
+   */
+  tools?: Tool[];
   onTogglePin: (id: string) => void;
   sortDirection: SortDirection;
   onSortChange: (next: SortDirection) => void;
@@ -236,6 +243,7 @@ function matchesFilters(
 }
 
 export function ProtocolListPanel({
+  tools,
   entries,
   pinnedIds,
   searchText,
@@ -319,6 +327,7 @@ export function ProtocolListPanel({
           embedded={embedded}
           onReplay={onReplay}
           onTogglePin={onTogglePin}
+          tools={tools}
         />
       ) : (
         <ProtocolEntry
@@ -335,6 +344,7 @@ export function ProtocolListPanel({
               : undefined
           }
           correlatedHttpStatus={correlatedStatusById?.get(row.entry.id)}
+          tools={tools}
         />
       ),
     );
diff --git a/clients/web/src/components/groups/SchemaForm/SchemaForm.test.tsx b/clients/web/src/components/groups/SchemaForm/SchemaForm.test.tsx
index 485beb5a08..6ec97cd9e4 100644
--- a/clients/web/src/components/groups/SchemaForm/SchemaForm.test.tsx
+++ b/clients/web/src/components/groups/SchemaForm/SchemaForm.test.tsx
@@ -1925,7 +1925,7 @@ describe("SchemaForm raw JSON (#2151)", () => {
     await setAceTextByLabel(/Arguments JSON/, '{"id":9007199254740993}');
     expect(onValidityChange).toHaveBeenLastCalledWith(true);
     expect(
-      screen.getByText(/Whole numbers must be within/),
+      screen.getByText(/A whole number written out in full must be within/),
     ).toBeInTheDocument();
   });
 
diff --git a/clients/web/src/components/groups/SchemaForm/SchemaForm.tsx b/clients/web/src/components/groups/SchemaForm/SchemaForm.tsx
index e533c5fce6..5259869733 100644
--- a/clients/web/src/components/groups/SchemaForm/SchemaForm.tsx
+++ b/clients/web/src/components/groups/SchemaForm/SchemaForm.tsx
@@ -25,7 +25,7 @@ import { ClearButton } from "../../elements/ClearButton/ClearButton";
 import { EnlargeButton } from "../../elements/EnlargeButton/EnlargeButton";
 import { JsonEditor } from "../../elements/JsonEditor/JsonEditor";
 import {
-  hasRoundedInteger,
+  hasImpreciseIntegerLiteral,
   isJsonObject,
   ROUNDED_INTEGER_ERROR,
 } from "../../../utils/jsonObjectDraft";
@@ -300,7 +300,7 @@ function parseJsonDraft(text: string): unknown {
   } catch {
     return undefined;
   }
-  if (!isSerializableJson(parsed) || hasRoundedInteger(parsed)) {
+  if (!isSerializableJson(parsed) || hasImpreciseIntegerLiteral(text)) {
     return undefined;
   }
   return parsed;
@@ -619,7 +619,7 @@ function parseRawArgumentsDraft(
   }
   // The quieter half of the same defect: a whole number past 2^53−1 parses to
   // the nearest double, so the draft shows digits the wire will not carry.
-  if (hasRoundedInteger(parsed)) {
+  if (hasImpreciseIntegerLiteral(text)) {
     return { ok: false, error: ROUNDED_INTEGER_ERROR };
   }
   return { ok: true, value: parsed };
diff --git a/clients/web/src/components/screens/ProtocolScreen/ProtocolScreen.tsx b/clients/web/src/components/screens/ProtocolScreen/ProtocolScreen.tsx
index 4a7a9c6619..c25a9f8744 100644
--- a/clients/web/src/components/screens/ProtocolScreen/ProtocolScreen.tsx
+++ b/clients/web/src/components/screens/ProtocolScreen/ProtocolScreen.tsx
@@ -1,4 +1,5 @@
 import { useCallback, useMemo } from "react";
+import type { Tool } from "@modelcontextprotocol/client";
 import { Card, Flex, Stack } from "@mantine/core";
 import type { ReplayParamsOverride } from "../../../lib/protocolReplay";
 import type { ProtocolEra } from "@modelcontextprotocol/client";
@@ -24,6 +25,12 @@ export interface ProtocolScreenProps {
   onClearSection: (section: "pinned" | "history") => void;
   onExportSection: (section: "pinned" | "history") => void;
   onReplay: (id: string, overrideParams?: ReplayParamsOverride) => void;
+  /**
+   * The connected server's tools. Forwarded to each entry only so an edited
+   * `tools/call` replay can tell whether an argument would be coerced by the
+   * schema on the way out (#2151).
+   */
+  tools?: Tool[];
   onTogglePin: (id: string) => void;
   sortDirection: SortDirection;
   onSortChange: (next: SortDirection) => void;
@@ -70,6 +77,7 @@ const SidebarCard = Card.withProps({
 });
 
 export function ProtocolScreen({
+  tools,
   entries,
   pinnedIds,
   protocolEra,
@@ -155,6 +163,7 @@ export function ProtocolScreen({
         onClearSection={onClearSection}
         onExportSection={onExportSection}
         onReplay={onReplay}
+        tools={tools}
         onTogglePin={onTogglePin}
         sortDirection={sortDirection}
         onSortChange={onSortChange}
diff --git a/clients/web/src/components/views/InspectorView/InspectorView.tsx b/clients/web/src/components/views/InspectorView/InspectorView.tsx
index 1d679cd77a..05336feb8d 100644
--- a/clients/web/src/components/views/InspectorView/InspectorView.tsx
+++ b/clients/web/src/components/views/InspectorView/InspectorView.tsx
@@ -1255,6 +1255,9 @@ export function InspectorView({
     onExportSection: onExportProtocolSection,
     onReplay: onReplayProtocol,
     onTogglePin: onTogglePinProtocol,
+    // Only so an edited `tools/call` replay can tell whether an argument would
+    // be coerced by the schema on the way out (#2151).
+    tools,
     sortDirection: protocolSort,
     onSortChange: setProtocolSort,
     compact: protocolCompact,
diff --git a/clients/web/src/lib/protocolReplay.test.ts b/clients/web/src/lib/protocolReplay.test.ts
index 6e1d38cb1a..5e7f48f18f 100644
--- a/clients/web/src/lib/protocolReplay.test.ts
+++ b/clients/web/src/lib/protocolReplay.test.ts
@@ -103,6 +103,45 @@ describe("replayableParams", () => {
     ).toEqual({ params: { cursor: "abc" }, dropped: ["_meta"] });
   });
 
+  // `listTools` builds its params with `cursor !== undefined`, carrying `""`
+  // deliberately — its own comment says dropping it asks for page one again.
+  it("keeps an empty cursor on tools/list, which preserves it", () => {
+    expect(replayableParams("tools/list", { cursor: "" })).toEqual({
+      params: { cursor: "" },
+      dropped: [],
+    });
+  });
+
+  // The other four adapters build theirs with a truthiness check, so `""` never
+  // reaches the wire. Reporting it as kept would show `{"cursor":""}` in the
+  // editor while `{}` was sent.
+  it.each([
+    "prompts/list",
+    "resources/list",
+    "resources/templates/list",
+    "tasks/list",
+  ])("drops an empty cursor on %s, which does not preserve it", (method) => {
+    expect(replayableParams(method, { cursor: "" })).toEqual({
+      params: undefined,
+      dropped: ["cursor"],
+    });
+  });
+
+  it("keeps a non-empty cursor on every list method", () => {
+    for (const method of [
+      "tools/list",
+      "prompts/list",
+      "resources/list",
+      "resources/templates/list",
+      "tasks/list",
+    ]) {
+      expect(replayableParams(method, { cursor: "abc" })).toEqual({
+        params: { cursor: "abc" },
+        dropped: [],
+      });
+    }
+  });
+
   // The dispatcher ignores a non-string cursor, so keeping it would put a value
   // in the editor that changes nothing about what is sent.
   it("drops a cursor that is not a string", () => {
@@ -199,6 +238,71 @@ describe("reshapedReplayParam", () => {
     ).toBeNull();
   });
 
+  // `callTool` runs every *string* entry through `convertToolParameters`,
+  // because the Tools form hands everything over as text — so a string typed
+  // against a numeric schema is sent as a number.
+  it("rejects a tool argument the schema would coerce", () => {
+    const tool: Tool = {
+      name: "add",
+      inputSchema: {
+        type: "object",
+        properties: { count: { type: "number" } },
+      },
+    };
+    expect(
+      reshapedReplayParam(
+        "tools/call",
+        { name: "add", arguments: { count: "2" } },
+        tool,
+      ),
+    ).toMatch(/`count` would be converted/);
+  });
+
+  it("accepts a tool argument already written with the declared type", () => {
+    const tool: Tool = {
+      name: "add",
+      inputSchema: {
+        type: "object",
+        properties: { count: { type: "number" } },
+      },
+    };
+    expect(
+      reshapedReplayParam(
+        "tools/call",
+        { name: "add", arguments: { count: 2 } },
+        tool,
+      ),
+    ).toBeNull();
+  });
+
+  it("accepts a string argument the schema declares as a string", () => {
+    const tool: Tool = {
+      name: "echo",
+      inputSchema: {
+        type: "object",
+        properties: { message: { type: "string" } },
+      },
+    };
+    expect(
+      reshapedReplayParam(
+        "tools/call",
+        { name: "echo", arguments: { message: "hi" } },
+        tool,
+      ),
+    ).toBeNull();
+  });
+
+  // Nothing can be said about a coercion whose schema is unknown, and refusing
+  // on that basis would block a replay that is very likely fine.
+  it("skips the coercion check when the tool is not known", () => {
+    expect(
+      reshapedReplayParam("tools/call", {
+        name: "add",
+        arguments: { count: "2" },
+      }),
+    ).toBeNull();
+  });
+
   it("has nothing to say about methods that take no arguments", () => {
     expect(reshapedReplayParam("tools/list", { cursor: "a" })).toBeNull();
     expect(reshapedReplayParam("resources/read", { uri: "x://y" })).toBeNull();
diff --git a/clients/web/src/lib/protocolReplay.ts b/clients/web/src/lib/protocolReplay.ts
index 768909d24d..95c545fdcc 100644
--- a/clients/web/src/lib/protocolReplay.ts
+++ b/clients/web/src/lib/protocolReplay.ts
@@ -9,6 +9,7 @@ import type { MessageEntry } from "@inspector/core/mcp/types.js";
 // `components → lib → utils` direction still holds: `LogEntryData` is the shape
 // the Logs screen renders, and this module exists to produce exactly that.
 import type { LogEntryData } from "../components/elements/LogEntry/LogEntry";
+import { convertToolParameters } from "@inspector/core/json/jsonUtils.js";
 import { isReplayableProtocolMethod } from "../utils/replayableProtocolMethods";
 
 // Derive `LogEntryData[]` from the MessageLog by filtering for the
@@ -113,7 +114,19 @@ export function replayableParams(
     case "tasks/list":
       // Only a *string* cursor survives: the dispatcher ignores any other type,
       // so keeping it would put a value in the editor that changes nothing.
-      kept = typeof params.cursor === "string" ? ["cursor"] : [];
+      //
+      // And an **empty** one survives on `tools/list` alone. `listTools` builds
+      // its params with `cursor !== undefined`, carrying `""` deliberately —
+      // its own comment explains that dropping it asks for page one again. The
+      // other four adapters use a truthiness check and drop it. That asymmetry
+      // looks like a latent bug in those four rather than an intention, but
+      // this function's job is to describe what the dispatch *does*, so it
+      // reports the empty cursor as dropped where it would be dropped.
+      kept =
+        typeof params.cursor === "string" &&
+        (method === "tools/list" || params.cursor !== "")
+          ? ["cursor"]
+          : [];
       break;
     default:
       // `ping` takes nothing, and an unreplayable method never reaches here.
@@ -147,13 +160,19 @@ export function replayableParams(
  * - `arguments: [1,2]` or `arguments: 4` is not nullish, so the cast carries it
  *   through unchanged into a call whose type says it is a named-argument
  *   record. Nothing reshapes it, but nothing can send it either.
- * - For **`prompts/get` only**, a non-string *value*. `getPrompt` runs
+ * - For **`prompts/get`**, a non-string *value*. `getPrompt` runs
  *   `convertPromptArguments`, which `JSON.stringify`s anything that is not
  *   already a string — so `{"count": 2}` is sent as `{"count": "2"}` while the
  *   editor still shows the number. This is not a quirk to route around: the
  *   spec types `GetPromptRequest.params.arguments` as `Record<string, string>`,
- *   so a string is the only thing a prompt argument can be. `tools/call` is
- *   unaffected — `callTool` sends its arguments as given.
+ *   so a string is the only thing a prompt argument can be.
+ * - For **`tools/call`**, the mirror image. `callTool` runs every *string*
+ *   entry through `convertToolParameters`, because the Tools form hands
+ *   everything over as text — so `{"count": "2"}` against a schema declaring a
+ *   number is sent as `{"count": 2}`. Detected by running that same conversion
+ *   and comparing, rather than by reimplementing its rules, so the two cannot
+ *   drift. Needs the `tool`; without one this check is skipped, since nothing
+ *   can be said about a coercion whose schema is unknown.
  *
  * `name` and `uri` are deliberately not checked here: the dispatch already
  * refuses a missing or non-string one with a reason the caller surfaces as a
@@ -162,6 +181,7 @@ export function replayableParams(
 export function reshapedReplayParam(
   method: string,
   params: Record<string, unknown> | undefined,
+  tool?: Tool,
 ): string | null {
   if (!params) return null;
   if (method !== "tools/call" && method !== "prompts/get") return null;
@@ -182,9 +202,35 @@ export function reshapedReplayParam(
       return `A prompt argument is always a string — ${coerced.join(", ")} would be sent as JSON text`;
     }
   }
+  if (method === "tools/call" && tool) {
+    const coerced = coercedToolArgs(tool, args as Record<string, unknown>);
+    if (coerced.length > 0) {
+      return `${coerced.join(", ")} would be converted to the type ${tool.name}'s schema declares — write the value with that type instead`;
+    }
+  }
   return null;
 }
 
+/**
+ * The string-valued argument names `callTool` would convert, per the tool's
+ * schema.
+ *
+ * Runs the conversion the client runs and compares, rather than restating its
+ * rules: `convertToolParameters` is the function on the other side, so asking
+ * it is the only way this cannot drift from what is actually sent.
+ */
+function coercedToolArgs(tool: Tool, args: Record<string, unknown>): string[] {
+  const stringArgs: Record<string, string> = {};
+  for (const [key, value] of Object.entries(args)) {
+    if (typeof value === "string") stringArgs[key] = value;
+  }
+  if (Object.keys(stringArgs).length === 0) return [];
+  const converted = convertToolParameters(tool, stringArgs);
+  return Object.keys(stringArgs)
+    .filter((key) => converted[key] !== stringArgs[key])
+    .map((key) => `\`${key}\``);
+}
+
 export async function replayProtocolRequest(
   client: ReplayClient,
   method: string,
diff --git a/clients/web/src/utils/jsonObjectDraft.test.ts b/clients/web/src/utils/jsonObjectDraft.test.ts
index 5e8be685a1..5788817d5a 100644
--- a/clients/web/src/utils/jsonObjectDraft.test.ts
+++ b/clients/web/src/utils/jsonObjectDraft.test.ts
@@ -1,49 +1,72 @@
 import { describe, it, expect } from "vitest";
-import { hasRoundedInteger, parseJsonObjectDraft } from "./jsonObjectDraft";
+import {
+  hasImpreciseIntegerLiteral,
+  parseJsonObjectDraft,
+} from "./jsonObjectDraft";
 
 // `isSerializableJson` catches a literal too large to represent (`1e400` →
 // `Infinity` → `null` on the wire). This is the quieter one: a whole number
 // past 2^53−1 parses to the nearest double, so the draft shows digits the wire
 // will not carry.
-describe("hasRoundedInteger", () => {
+describe("hasImpreciseIntegerLiteral", () => {
   it("accepts whole numbers inside the safe range", () => {
-    expect(hasRoundedInteger({ id: Number.MAX_SAFE_INTEGER })).toBe(false);
-    expect(hasRoundedInteger({ id: -Number.MAX_SAFE_INTEGER })).toBe(false);
-    expect(hasRoundedInteger({ id: 0 })).toBe(false);
+    expect(hasImpreciseIntegerLiteral('{"id":9007199254740991}')).toBe(false);
+    expect(hasImpreciseIntegerLiteral('{"id":-9007199254740991}')).toBe(false);
+    expect(hasImpreciseIntegerLiteral('{"id":0}')).toBe(false);
   });
 
-  it("rejects a whole number past the safe range", () => {
+  it("rejects a whole number that loses digits when parsed", () => {
     // Typed as …93, parsed as …92.
-    expect(hasRoundedInteger(JSON.parse('{"id":9007199254740993}'))).toBe(true);
+    expect(hasImpreciseIntegerLiteral('{"id":9007199254740993}')).toBe(true);
+  });
+
+  // The case the previous, value-based check could not see: at or above 1e21
+  // JS stringifies in exponent form, so inferring the literal from the parsed
+  // number said "exponent form, nothing lost" about digits that were lost.
+  it("rejects a full-form literal at or above 1e21", () => {
+    expect(hasImpreciseIntegerLiteral('{"id":1000000000000000000001}')).toBe(
+      true,
+    );
+  });
+
+  // …and the false positive it also had. Written out in full, past the safe
+  // range, and exactly representable, so it is sent as written.
+  it("accepts a full-form literal that is exactly representable", () => {
+    expect(hasImpreciseIntegerLiteral('{"id":18014398509481984}')).toBe(false);
   });
 
   // A fractional or exponent-form value is a double by nature and is sent as
   // the double it parsed to, so nothing is lost between typing and sending.
-  it("accepts a fractional value however large", () => {
-    expect(hasRoundedInteger({ ratio: 1.5 })).toBe(false);
-    expect(hasRoundedInteger({ ratio: 0.1 + 0.2 })).toBe(false);
+  it("accepts fractional and exponent-form values", () => {
+    expect(hasImpreciseIntegerLiteral('{"n":1.5}')).toBe(false);
+    expect(hasImpreciseIntegerLiteral('{"n":1e308}')).toBe(false);
+    expect(hasImpreciseIntegerLiteral('{"n":1e21}')).toBe(false);
+    expect(hasImpreciseIntegerLiteral('{"n":-2.5e-7}')).toBe(false);
   });
 
-  // JS stringifies from 1e21 upward in exponent form, so such a value was typed
-  // that way and the parsed double is what was asked for. `parseJsonObjectDraft`
-  // has always accepted these.
-  it("accepts a value whose shortest form carries an exponent", () => {
-    expect(hasRoundedInteger({ n: 1e308 })).toBe(false);
-    expect(hasRoundedInteger({ n: 1e21 })).toBe(false);
+  // The reason this scans rather than running a regex over the text: those
+  // digits are a *string*, sent back exactly as written.
+  it("ignores digits inside a string", () => {
+    expect(hasImpreciseIntegerLiteral('{"id":"9007199254740993"}')).toBe(false);
   });
 
-  it("looks inside arrays and nested objects", () => {
-    expect(hasRoundedInteger(JSON.parse('[{"a":[9007199254740993]}]'))).toBe(
-      true,
-    );
-    expect(hasRoundedInteger({ a: { b: [1, 2, "x", null, true] } })).toBe(
+  it("ignores digits inside a key, and an escaped quote inside a string", () => {
+    expect(hasImpreciseIntegerLiteral('{"9007199254740993":1}')).toBe(false);
+    expect(
+      hasImpreciseIntegerLiteral('{"a":"say \\"9007199254740993\\"","b":1}'),
+    ).toBe(false);
+  });
+
+  it("looks through arrays and nesting", () => {
+    expect(hasImpreciseIntegerLiteral('[{"a":[9007199254740993]}]')).toBe(true);
+    expect(hasImpreciseIntegerLiteral('{"a":{"b":[1,2,"x",null,true]}}')).toBe(
       false,
     );
   });
 
-  it("has nothing to say about non-numeric values", () => {
-    expect(hasRoundedInteger("9007199254740993")).toBe(false);
-    expect(hasRoundedInteger(null)).toBe(false);
+  it("says nothing about text that is not JSON", () => {
+    expect(hasImpreciseIntegerLiteral("")).toBe(false);
+    expect(hasImpreciseIntegerLiteral("{")).toBe(false);
   });
 });
 
diff --git a/clients/web/src/utils/jsonObjectDraft.ts b/clients/web/src/utils/jsonObjectDraft.ts
index d69ac326d7..a847408380 100644
--- a/clients/web/src/utils/jsonObjectDraft.ts
+++ b/clients/web/src/utils/jsonObjectDraft.ts
@@ -21,53 +21,83 @@ export function isJsonObject(value: unknown): value is StrictJsonObject {
 }
 
 /**
- * Whether `JSON.parse` dropped digits from a whole number written out in full.
+ * Whether the draft text writes a whole number out in full that `JSON.parse`
+ * cannot represent exactly.
  *
- * `isSerializableJson` catches a literal too large to *represent* — `1e400`
- * parses to `Infinity` and writes back as `null`. This catches the quieter one:
- * a whole number past 2^53−1 parses to the nearest double, so
- * `{"id":9007199254740993}` becomes `…992` with no error anywhere. The draft
- * still shows what was typed, which is what makes it a misreport rather than a
- * formatting difference — the editor displays one value and the wire carries
- * another. Snowflake-style ids are the realistic case.
+ * `isSerializableJson` catches a literal too large to represent at all —
+ * `1e400` parses to `Infinity` and writes back as `null`. This catches the
+ * quieter one: `{"id":9007199254740993}` parses to `…992`, and
+ * `{"id":1000000000000000000001}` parses to `1e21` and is written back as
+ * `1e+21`. Either way the editor shows digits the wire will not carry.
+ * Snowflake-style ids are the realistic case.
  *
- * Two conditions, and the second is what keeps this from over-reaching:
+ * It reads the **source text**, which is the only place the answer exists: the
+ * parsed number has already lost whatever it lost, so nothing about its value
+ * distinguishes `1000000000000000000001` from `1e21`. An earlier attempt
+ * inferred it from `String(value)` and was wrong in both directions — it
+ * refused `2^54` (written in full and exactly representable) and accepted every
+ * full-form literal at or above 1e21, where JS switches to exponent form.
  *
- * - **An unsafe whole number.** A fractional value is a double by nature and is
- *   sent as the double it parsed to, so nothing is lost between typing and
- *   sending.
- * - **Whose shortest representation is written out in full.** JS switches to
- *   exponent form at 1e21, so a value that stringifies as `1e+308` was typed in
- *   exponent form, where the parsed double *is* the value the user asked for.
- *   Without this, `{"n":1e308}` — a legitimate `_meta` value — would be
- *   refused, which `parseJsonObjectDraft`'s own tests pin against.
- *
- * It still refuses the rare full-form integer past 2^53−1 that happens to be
- * exactly representable (2^54, say), because nothing here can tell it apart
- * from one that lost digits without the original literal. That errs toward
- * refusing a sendable value rather than misreporting an unsendable one, which
- * is the same trade `toNumericValue` makes for the schema form's number input.
+ * Only integer literals written out in full are checked. An exponent or a
+ * fraction is a double by nature and is sent as the double it parsed to, so
+ * nothing is lost between typing and sending — and `{"n":1e308}` stays
+ * acceptable, which `parseJsonObjectDraft`'s own tests pin.
  */
-export function hasRoundedInteger(value: unknown): boolean {
-  if (typeof value === "number") {
-    return (
-      Number.isInteger(value) &&
-      !Number.isSafeInteger(value) &&
-      !String(value).includes("e")
-    );
-  }
-  if (Array.isArray(value)) return value.some(hasRoundedInteger);
-  if (value !== null && typeof value === "object") {
-    return Object.values(value as Record<string, unknown>).some(
-      hasRoundedInteger,
-    );
+export function hasImpreciseIntegerLiteral(text: string): boolean {
+  for (const literal of jsonNumberLiterals(text)) {
+    if (!/^-?\d+$/.test(literal)) continue;
+    // BigInt on both sides, so the comparison is exact: `Number(literal)` is an
+    // integer-valued double, and converting it back shows what survived.
+    if (BigInt(literal) !== BigInt(Number(literal))) return true;
   }
   return false;
 }
 
+/** Matches one JSON number token, anchored where the scan currently stands. */
+const JSON_NUMBER = /-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?/y;
+
+/**
+ * The numeric literals of a JSON document, in source order, skipping anything
+ * inside a string.
+ *
+ * The string-skipping is the whole reason this is a scanner rather than a
+ * regex over the text: `{"id":"9007199254740993"}` carries those digits as a
+ * *string*, which is sent back exactly as written and must not be refused.
+ * Object keys are strings too, so they are skipped by the same rule.
+ */
+function* jsonNumberLiterals(text: string): Generator<string> {
+  let index = 0;
+  let inString = false;
+  while (index < text.length) {
+    const char = text[index];
+    if (inString) {
+      // A backslash escapes the next character, including a closing quote.
+      index += char === "\\" ? 2 : 1;
+      if (char === '"') inString = false;
+      continue;
+    }
+    if (char === '"') {
+      inString = true;
+      index += 1;
+      continue;
+    }
+    if (char === "-" || (char >= "0" && char <= "9")) {
+      JSON_NUMBER.lastIndex = index;
+      const match = JSON_NUMBER.exec(text);
+      /* v8 ignore next -- the sticky pattern always matches from a digit or a
+         `-`, which is the only way this branch is entered. */
+      if (!match) break;
+      yield match[0];
+      index = JSON_NUMBER.lastIndex;
+      continue;
+    }
+    index += 1;
+  }
+}
+
 /** The message every draft parser uses for {@link hasRoundedInteger}. */
 export const ROUNDED_INTEGER_ERROR =
-  "Whole numbers must be within ±(2^53 − 1) — a longer one is rounded when parsed, so a different value would be sent";
+  "A whole number written out in full must be within ±(2^53 − 1) — a longer one loses digits when parsed, so a different value would be sent";
 
 /**
  * Read a JSON-object editor's draft text.
@@ -109,7 +139,7 @@ export function parseJsonObjectDraft(text: string): JsonObjectDraft {
         "Numbers must be finite — a value like `1e400` overflows and would be sent as null",
     };
   }
-  if (hasRoundedInteger(parsed)) {
+  if (hasImpreciseIntegerLiteral(text)) {
     return { ok: false, error: ROUNDED_INTEGER_ERROR };
   }
   return { ok: true, value: parsed };

From 03bf9ece426c835907f47525a3ca19bca7763d69 Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Thu, 27 Aug 2026 05:16:23 -0400
Subject: [PATCH 10/14] fix(web): resolve the replay tool from the draft, and
 say why a draft is stuck
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Copilot's ninth pass, three comments, two of them consequences of round 8.

- The coercion check resolved the tool from the *entry's* name while the modal
  lets `name` be edited, so retargeting an `echo` replay at `add` validated
  against `echo`. The modal now takes the whole tool list and resolves from the
  draft's current name, which is the one the dispatch will look up.

- `IMPRECISE_INTEGER_ERROR` (was `ROUNDED_INTEGER_ERROR`) no longer names the
  safe-integer range, because the range is not the rule: a whole number past
  ±(2^53 − 1) that is exactly representable round-trips and is accepted. It
  talks about exact representability instead, and its doc links the helper that
  actually exists.

- `SchemaJsonField` carries the parser's reason instead of flattening every
  case to "Not valid JSON", which misdiagnosed a document that parses fine and
  holds a number this client cannot send — leaving the user reading about
  syntax while looking at syntactically fine JSON.

The last one had a bug the gate caught rather than the tests: empty text is not
a *problem*, so routing the value through the reason check let `JSON.parse("")`
throw out of the change handler. It surfaced as five unhandled errors across
four suites with every assertion still green, which is why `npm run ci` and not
`npm run test` is the gate. Excluded explicitly, with a regression test.

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>
---
 .../EditReplayModal/EditReplayModal.test.tsx  | 50 ++++++++++++-
 .../EditReplayModal/EditReplayModal.tsx       | 35 ++++++---
 .../groups/ProtocolEntry/ProtocolEntry.tsx    | 10 +--
 .../groups/SchemaForm/SchemaForm.test.tsx     | 51 ++++++++++++-
 .../groups/SchemaForm/SchemaForm.tsx          | 75 +++++++++++++------
 clients/web/src/utils/jsonObjectDraft.ts      | 14 +++-
 6 files changed, 186 insertions(+), 49 deletions(-)

diff --git a/clients/web/src/components/groups/EditReplayModal/EditReplayModal.test.tsx b/clients/web/src/components/groups/EditReplayModal/EditReplayModal.test.tsx
index 5fdaa6aabd..ff8614cafc 100644
--- a/clients/web/src/components/groups/EditReplayModal/EditReplayModal.test.tsx
+++ b/clients/web/src/components/groups/EditReplayModal/EditReplayModal.test.tsx
@@ -2,8 +2,23 @@ import { describe, it, expect, vi } from "vitest";
 import userEvent from "@testing-library/user-event";
 import { renderWithMantine, screen } from "../../../test/renderWithMantine";
 import { getAceText, setAceText } from "../../../test/aceEditor";
+import type { Tool } from "@modelcontextprotocol/client";
 import { EditReplayModal } from "./EditReplayModal";
 
+const TOOLS: Tool[] = [
+  {
+    name: "echo",
+    inputSchema: {
+      type: "object",
+      properties: { message: { type: "string" } },
+    },
+  },
+  {
+    name: "add",
+    inputSchema: { type: "object", properties: { count: { type: "number" } } },
+  },
+];
+
 const baseProps = {
   opened: true,
   method: "tools/call",
@@ -204,7 +219,7 @@ describe("EditReplayModal", () => {
     await setAceText('{"name":"echo","arguments":{"id":9007199254740993}}');
     expect(screen.getByRole("button", { name: "Send" })).toBeDisabled();
     expect(
-      screen.getByText(/A whole number written out in full must be within/),
+      screen.getByText(/cannot be represented exactly/),
     ).toBeInTheDocument();
   });
 
@@ -217,6 +232,39 @@ describe("EditReplayModal", () => {
     ).toBeInTheDocument();
   });
 
+  // `callTool` coerces string arguments to the type the schema declares, so
+  // `"2"` against a numeric field is sent as `2`.
+  it("disables Send for a tool argument the schema would coerce", async () => {
+    renderWithMantine(
+      <EditReplayModal {...baseProps} method="tools/call" tools={TOOLS} />,
+    );
+    await setAceText('{"name":"add","arguments":{"count":"2"}}');
+    expect(screen.getByRole("button", { name: "Send" })).toBeDisabled();
+    expect(screen.getByText(/`count` would be converted/)).toBeInTheDocument();
+  });
+
+  // `name` is editable, so the schema to validate against is whichever tool the
+  // draft *now* names — not the one the entry happened to call.
+  it("re-validates against the tool the draft retargets to", async () => {
+    renderWithMantine(
+      <EditReplayModal
+        {...baseProps}
+        method="tools/call"
+        params={{ name: "echo", arguments: { message: "hi" } }}
+        tools={TOOLS}
+      />,
+    );
+    expect(screen.getByRole("button", { name: "Send" })).not.toBeDisabled();
+
+    // Retargeted at `add`, whose `count` is a number — the string would coerce.
+    await setAceText('{"name":"add","arguments":{"count":"2"}}');
+    expect(screen.getByRole("button", { name: "Send" })).toBeDisabled();
+
+    // And back: `echo`'s `message` is a string, so nothing is converted.
+    await setAceText('{"name":"echo","arguments":{"message":"2"}}');
+    expect(screen.getByRole("button", { name: "Send" })).not.toBeDisabled();
+  });
+
   it("closes without sending when cancelled", async () => {
     const user = userEvent.setup();
     const onSend = vi.fn();
diff --git a/clients/web/src/components/groups/EditReplayModal/EditReplayModal.tsx b/clients/web/src/components/groups/EditReplayModal/EditReplayModal.tsx
index 480f87ccc8..17bee0f184 100644
--- a/clients/web/src/components/groups/EditReplayModal/EditReplayModal.tsx
+++ b/clients/web/src/components/groups/EditReplayModal/EditReplayModal.tsx
@@ -5,7 +5,7 @@ import { JsonEditor } from "../../elements/JsonEditor/JsonEditor";
 import {
   hasImpreciseIntegerLiteral,
   isJsonObject,
-  ROUNDED_INTEGER_ERROR,
+  IMPRECISE_INTEGER_ERROR,
 } from "../../../utils/jsonObjectDraft";
 import {
   replayableParams,
@@ -34,11 +34,15 @@ export interface EditReplayModalProps {
    */
   droppedParamKeys?: string[];
   /**
-   * The tool a `tools/call` replay would invoke, when it is known. Only used to
-   * detect an argument the client would coerce to the type the schema declares
-   * — see {@link reshapedReplayParam}.
+   * The connected server's tools, used only to detect an argument the client
+   * would coerce to the type the schema declares — see
+   * {@link reshapedReplayParam}.
+   *
+   * The whole list rather than the one the entry called, because `name` is
+   * itself editable: retargeting an `echo` replay at `add` has to be validated
+   * against `add`'s schema, not the one the entry happened to use.
    */
-  tool?: Tool;
+  tools?: Tool[];
   /**
    * Re-issue the request with these params. `null` means "send no params",
    * which is a request an empty editor can legitimately express — see
@@ -82,7 +86,7 @@ function formatDroppedKeys(keys: string[]): string {
 function parseParamsDraft(
   method: string,
   text: string,
-  tool: Tool | undefined,
+  tools: Tool[] | undefined,
 ):
   | { ok: true; value: Record<string, unknown> | null }
   | { ok: false; error: string } {
@@ -108,7 +112,7 @@ function parseParamsDraft(
     };
   }
   if (hasImpreciseIntegerLiteral(text)) {
-    return { ok: false, error: ROUNDED_INTEGER_ERROR };
+    return { ok: false, error: IMPRECISE_INTEGER_ERROR };
   }
   // Seeding from the projection is only half of it: a key the dispatcher does
   // not read can also be *added* to the draft, and Send would then discard an
@@ -126,7 +130,14 @@ function parseParamsDraft(
   }
   // 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, tool);
+  // Resolved from the *draft's* name, so retargeting the call re-validates
+  // against the tool it would actually reach.
+  const named = typeof parsed.name === "string" ? parsed.name : undefined;
+  const reshaped = reshapedReplayParam(
+    method,
+    parsed,
+    tools?.find((candidate) => candidate.name === named),
+  );
   if (reshaped !== null) {
     return { ok: false, error: reshaped };
   }
@@ -142,14 +153,14 @@ function EditReplayForm({
   method,
   params,
   droppedParamKeys,
-  tool,
+  tools,
   onSend,
   onClose,
 }: Omit<EditReplayModalProps, "opened">) {
   const [draft, setDraft] = useState(() =>
     params === undefined ? "" : JSON.stringify(params, null, 2),
   );
-  const parsed = parseParamsDraft(method, draft, tool);
+  const parsed = parseParamsDraft(method, draft, tools);
 
   return (
     <Stack gap="sm">
@@ -208,7 +219,7 @@ export function EditReplayModal({
   method,
   params,
   droppedParamKeys,
-  tool,
+  tools,
   onSend,
   onClose,
 }: EditReplayModalProps) {
@@ -218,7 +229,7 @@ export function EditReplayModal({
         method={method}
         params={params}
         droppedParamKeys={droppedParamKeys}
-        tool={tool}
+        tools={tools}
         onSend={onSend}
         onClose={onClose}
       />
diff --git a/clients/web/src/components/groups/ProtocolEntry/ProtocolEntry.tsx b/clients/web/src/components/groups/ProtocolEntry/ProtocolEntry.tsx
index 644a892d61..a6abd2e731 100644
--- a/clients/web/src/components/groups/ProtocolEntry/ProtocolEntry.tsx
+++ b/clients/web/src/components/groups/ProtocolEntry/ProtocolEntry.tsx
@@ -346,12 +346,6 @@ export function ProtocolEntry({
   const requestParams = extractParams(entry);
   const canReplay = isReplayableProtocolMethod(method);
   const editableParams = replayableParams(method, requestParams);
-  // The tool this entry called, when it called one — the schema an edited
-  // argument would be coerced against.
-  const replayedTool =
-    method === "tools/call" && typeof requestParams?.name === "string"
-      ? tools?.find((candidate) => candidate.name === requestParams.name)
-      : undefined;
   const resultType = extractResultType(entry);
   const subscriptionId = extractSubscriptionId(entry);
 
@@ -503,7 +497,9 @@ export function ProtocolEntry({
             // the editor must not offer a field that Send would drop.
             params={editableParams.params}
             droppedParamKeys={editableParams.dropped}
-            tool={replayedTool}
+            // The whole list, not this entry's tool: `name` is editable, so the
+            // schema to validate against is whichever the draft now names.
+            tools={tools}
             onSend={onReplay}
             onClose={() => setIsEditingReplay(false)}
           />
diff --git a/clients/web/src/components/groups/SchemaForm/SchemaForm.test.tsx b/clients/web/src/components/groups/SchemaForm/SchemaForm.test.tsx
index 6ec97cd9e4..77b6dbb928 100644
--- a/clients/web/src/components/groups/SchemaForm/SchemaForm.test.tsx
+++ b/clients/web/src/components/groups/SchemaForm/SchemaForm.test.tsx
@@ -767,6 +767,55 @@ describe("SchemaForm", () => {
     expect(screen.queryByText(/Not valid JSON/)).not.toBeInTheDocument();
   });
 
+  // "Not valid JSON" would misdiagnose a document that parses perfectly well
+  // and holds a number this client cannot put on the wire — leaving the user
+  // reading about syntax while looking at syntactically fine JSON.
+  it("says why the draft cannot be sent, not just that it cannot", async () => {
+    const schema: InspectorFormSchema = {
+      type: "object",
+      properties: {
+        config: { type: "array", title: "Config" },
+      },
+    };
+    renderWithMantine(
+      <SchemaForm schema={schema} values={{}} onChange={vi.fn()} />,
+    );
+
+    await setAceTextByLabel(/Config/, "[1,");
+    expect(screen.getByText(/^Not valid JSON/)).toBeInTheDocument();
+
+    await setAceTextByLabel(/Config/, "[1e400]");
+    expect(screen.getByText(/^Numbers must be finite/)).toBeInTheDocument();
+
+    await setAceTextByLabel(/Config/, "[9007199254740993]");
+    expect(
+      screen.getByText(/^This whole number cannot be represented exactly/),
+    ).toBeInTheDocument();
+
+    await setAceTextByLabel(/Config/, "[1,2]");
+    expect(screen.queryByText(/this field will be omitted/)).toBeNull();
+  });
+
+  // An untouched optional field is not a problem, but it is not a value either
+  // — excluding it before the reason check rather than by it is what keeps
+  // `JSON.parse("")` from throwing out of the change handler.
+  it("reports no value and no error for an emptied JSON field", async () => {
+    const onChange = vi.fn();
+    const schema: InspectorFormSchema = {
+      type: "object",
+      properties: {
+        config: { type: "array", title: "Config", default: [1] },
+      },
+    };
+    renderWithMantine(
+      <SchemaForm schema={schema} values={{}} onChange={onChange} />,
+    );
+
+    await setAceTextByLabel(/Config/, "");
+    expect(onChange).toHaveBeenLastCalledWith({ config: undefined });
+    expect(screen.queryByText(/this field will be omitted/)).toBeNull();
+  });
+
   it("shows no error for an empty optional field", () => {
     const schema: InspectorFormSchema = {
       type: "object",
@@ -1925,7 +1974,7 @@ describe("SchemaForm raw JSON (#2151)", () => {
     await setAceTextByLabel(/Arguments JSON/, '{"id":9007199254740993}');
     expect(onValidityChange).toHaveBeenLastCalledWith(true);
     expect(
-      screen.getByText(/A whole number written out in full must be within/),
+      screen.getByText(/cannot be represented exactly/),
     ).toBeInTheDocument();
   });
 
diff --git a/clients/web/src/components/groups/SchemaForm/SchemaForm.tsx b/clients/web/src/components/groups/SchemaForm/SchemaForm.tsx
index 5259869733..73cbcccc09 100644
--- a/clients/web/src/components/groups/SchemaForm/SchemaForm.tsx
+++ b/clients/web/src/components/groups/SchemaForm/SchemaForm.tsx
@@ -27,7 +27,7 @@ import { JsonEditor } from "../../elements/JsonEditor/JsonEditor";
 import {
   hasImpreciseIntegerLiteral,
   isJsonObject,
-  ROUNDED_INTEGER_ERROR,
+  IMPRECISE_INTEGER_ERROR,
 } from "../../../utils/jsonObjectDraft";
 import { isSerializableJson } from "@inspector/core/json/jsonUtils.js";
 import { useValueChange } from "../../../hooks/useValueChange";
@@ -284,26 +284,55 @@ function toNumericValue(raw: string | number): number | undefined {
  * That covers text that is not JSON *yet* — the mid-edit state this field's
  * whole draft/value split exists for — and text that parses but does not
  * survive being written back out: `JSON.parse("1e400")` yields `Infinity`,
- * which `JSON.stringify` writes as `null`, and a whole number past 2^53−1 is
- * rounded to the nearest double. All three report no value, so the field shows
- * its error and `onValidityChange` blocks submission, rather than sending a
- * number the user never typed. Same guards, same reason, as
- * `parseJsonObjectDraft` and the raw-arguments editor above.
+ * which `JSON.stringify` writes as `null`, and a whole number written out in
+ * full that cannot be represented exactly is rounded. All three report no
+ * value, so the field shows its error and `onValidityChange` blocks submission,
+ * rather than sending a number the user never typed. Same guards, same reason,
+ * as `parseJsonObjectDraft` and the raw-arguments editor above.
+ *
+ * The *reason* is `describeJsonDraftProblem`'s to give — this only answers
+ * whether there is a value.
  */
 function parseJsonDraft(text: string): unknown {
-  if (text.trim() === "") {
+  // Empty text is not a *problem* — an untouched optional field is fine — but
+  // it is not a value either, so it is excluded before the reason check rather
+  // than by it. Missing that let `JSON.parse("")` throw.
+  if (text.trim() === "" || describeJsonDraftProblem(text) !== null) {
     return undefined;
   }
+  // Cannot throw: a reason of `null` means the text already parsed. Re-reading
+  // it here rather than having the reason function return the value keeps one
+  // set of rules, which is what stops the two from disagreeing.
+  return JSON.parse(text);
+}
+
+/**
+ * Why this draft cannot be sent, phrased for the field, or `null` when it can.
+ *
+ * Three different mistakes, and the field says which. Flattening them to "Not
+ * valid JSON" misdiagnoses a document that parses perfectly well and happens to
+ * hold a number this client cannot put on the wire — leaving the user reading a
+ * message about syntax while looking at syntactically fine JSON, with no clue
+ * what to change.
+ *
+ * Each ends with the same consequence, because it is the same one: an
+ * unsendable draft reports no value, so the argument is omitted.
+ */
+function describeJsonDraftProblem(text: string): string | null {
+  if (text.trim() === "") return null;
   let parsed: unknown;
   try {
     parsed = JSON.parse(text);
   } catch {
-    return undefined;
+    return "Not valid JSON — this field will be omitted";
   }
-  if (!isSerializableJson(parsed) || hasImpreciseIntegerLiteral(text)) {
-    return undefined;
+  if (!isSerializableJson(parsed)) {
+    return "Numbers must be finite — this field will be omitted";
   }
-  return parsed;
+  if (hasImpreciseIntegerLiteral(text)) {
+    return `${IMPRECISE_INTEGER_ERROR} — this field will be omitted`;
+  }
+  return null;
 }
 
 /** Structural equality for the draft/value re-sync, via canonical JSON. */
@@ -435,24 +464,22 @@ function SchemaJsonField({
     }
   });
 
-  // Text that is present but does not parse yields no value, so the field would
-  // otherwise submit as absent while the user is still looking at what they
-  // typed. Saying so on the field keeps that from being silent; reporting it
-  // upward is what keeps it from being submittable.
-  const hasInvalidDraft =
-    draft.trim() !== "" && parseJsonDraft(draft) === undefined;
-  useDraftValidity(fieldName, !hasInvalidDraft, onValidityChange);
+  // Text that is present but yields no value would otherwise submit as absent
+  // while the user is still looking at what they typed. Saying so on the field
+  // keeps that from being silent; reporting it upward is what keeps it from
+  // being submittable. The *reason* is carried through rather than flattened —
+  // "not valid JSON" is a misdiagnosis of a document that parses fine and holds
+  // a number this client cannot send.
+  const draftProblem =
+    draft.trim() === "" ? null : describeJsonDraftProblem(draft);
+  useDraftValidity(fieldName, draftProblem === null, onValidityChange);
 
   return (
     <JsonEditor
       {...inputProps}
       ariaLabel={inputProps.label}
       value={draft}
-      error={
-        hasInvalidDraft
-          ? "Not valid JSON — this field will be omitted"
-          : undefined
-      }
+      error={draftProblem ?? undefined}
       minLines={4}
       maxLines={16}
       onChange={(text) => {
@@ -620,7 +647,7 @@ function parseRawArgumentsDraft(
   // The quieter half of the same defect: a whole number past 2^53−1 parses to
   // the nearest double, so the draft shows digits the wire will not carry.
   if (hasImpreciseIntegerLiteral(text)) {
-    return { ok: false, error: ROUNDED_INTEGER_ERROR };
+    return { ok: false, error: IMPRECISE_INTEGER_ERROR };
   }
   return { ok: true, value: parsed };
 }
diff --git a/clients/web/src/utils/jsonObjectDraft.ts b/clients/web/src/utils/jsonObjectDraft.ts
index a847408380..d06ccdc946 100644
--- a/clients/web/src/utils/jsonObjectDraft.ts
+++ b/clients/web/src/utils/jsonObjectDraft.ts
@@ -95,9 +95,15 @@ function* jsonNumberLiterals(text: string): Generator<string> {
   }
 }
 
-/** The message every draft parser uses for {@link hasRoundedInteger}. */
-export const ROUNDED_INTEGER_ERROR =
-  "A whole number written out in full must be within ±(2^53 − 1) — a longer one loses digits when parsed, so a different value would be sent";
+/**
+ * The message every draft parser uses for {@link hasImpreciseIntegerLiteral}.
+ *
+ * Phrased as "cannot be represented exactly" rather than naming the safe-integer
+ * range, because the range is not the rule: a whole number past ±(2^53 − 1) that
+ * *is* exactly representable — 2^54, say — round-trips and is accepted.
+ */
+export const IMPRECISE_INTEGER_ERROR =
+  "This whole number cannot be represented exactly — it is rounded when parsed, so a different value would be sent";
 
 /**
  * Read a JSON-object editor's draft text.
@@ -140,7 +146,7 @@ export function parseJsonObjectDraft(text: string): JsonObjectDraft {
     };
   }
   if (hasImpreciseIntegerLiteral(text)) {
-    return { ok: false, error: ROUNDED_INTEGER_ERROR };
+    return { ok: false, error: IMPRECISE_INTEGER_ERROR };
   }
   return { ok: true, value: parsed };
 }

From 390e0c45ed15be1d9bb7cdf94a0ff11a5de7e0a6 Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Thu, 27 Aug 2026 05:34:33 -0400
Subject: [PATCH 11/14] fix(web): stop the read-only viewer reformatting a
 payload into a different one
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Copilot's tenth pass generated no new inline comments. Of its two suppressed
ones, this fixes the first and declines the second.

`ContentViewer` pretty-prints by `JSON.parse` then `JSON.stringify`, which is a
round trip through JavaScript's number type and is not lossless. A server
sending `{"id":9007199254740993}` was shown `…992`, and one sending
`{"limit":1e400}` was shown `null`. Neither is a formatting difference: both
are the viewer telling the reader something untrue about the payload it
received, which for an inspector is the worst kind of bug. It predates this PR
— `formatJson` has always round-tripped — but this PR is where the read-only
JSON path was rebuilt, and the same two predicates the draft parsers use answer
it exactly.

Both formatters now display the payload as it arrived when reindenting would
alter a value: unindented, but honest. The copy button already copied the
original text either way, so this makes the screen agree with it.

Not changed: a literal whose *spelling* is normalized but whose value is not.
`0.10000000000000001` and `0.1` are the same double, as are `1e2` and `100`, so
those still format. Rejecting them would mean refusing any literal not already
in JS's shortest form — `1.50`, `1e2`, `0.5000` — which blocks drafts that send
exactly what they mean. The integer guard stays because there the digits name a
value the double is not.

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>
---
 .../ContentViewer/contentViewerUtils.test.ts  | 29 ++++++++++++
 .../ContentViewer/contentViewerUtils.ts       | 46 +++++++++++++++++--
 2 files changed, 70 insertions(+), 5 deletions(-)

diff --git a/clients/web/src/components/elements/ContentViewer/contentViewerUtils.test.ts b/clients/web/src/components/elements/ContentViewer/contentViewerUtils.test.ts
index 731c15c45d..691919862c 100644
--- a/clients/web/src/components/elements/ContentViewer/contentViewerUtils.test.ts
+++ b/clients/web/src/components/elements/ContentViewer/contentViewerUtils.test.ts
@@ -103,6 +103,26 @@ describe("formatJson", () => {
   it("returns the input unchanged when invalid", () => {
     expect(formatJson("{ broken")).toBe("{ broken");
   });
+
+  // Pretty-printing is a round trip through JS's number type, which is not
+  // lossless. Reformatting these would show the reader something other than
+  // what the sender put on the wire — the worst kind of bug in an inspector.
+  it("leaves a payload alone when reindenting would change a value", () => {
+    // Would render as …992.
+    expect(formatJson('{"id":9007199254740993}')).toBe(
+      '{"id":9007199254740993}',
+    );
+    // `JSON.parse` yields Infinity, which `JSON.stringify` writes as null.
+    expect(formatJson('{"limit":1e400}')).toBe('{"limit":1e400}');
+  });
+
+  // The spelling of a number changes on a round trip and its *value* does not,
+  // so these still get indented: `0.10000000000000001` and `0.1` are the same
+  // double, and `1e2` and `100` are the same number.
+  it("still formats a payload whose numbers only change spelling", () => {
+    expect(formatJson('{"n":0.10000000000000001}')).toBe('{\n  "n": 0.1\n}');
+    expect(formatJson('{"n":1e2}')).toBe('{\n  "n": 100\n}');
+  });
 });
 
 describe("looksLikeJson", () => {
@@ -122,6 +142,15 @@ describe("formatJsonDocument", () => {
   // The stricter half of the heuristic (#2151). Text that merely *starts* like
   // JSON must not be handed to the JSON editor: a note beginning `{` would then
   // be presented as a document, in a JSON gutter, framed as malformed.
+  // Still a JSON document — it just does not get reindented when reindenting
+  // would change what it says.
+  it("returns the source unindented when reindenting would change a value", () => {
+    expect(formatJsonDocument('{"id":9007199254740993}')).toBe(
+      '{"id":9007199254740993}',
+    );
+    expect(formatJsonDocument('{"limit":1e400}')).toBe('{"limit":1e400}');
+  });
+
   it("reports text that only looks like JSON as not JSON", () => {
     expect(formatJsonDocument("{ broken")).toBeNull();
     expect(formatJsonDocument("[unclosed")).toBeNull();
diff --git a/clients/web/src/components/elements/ContentViewer/contentViewerUtils.ts b/clients/web/src/components/elements/ContentViewer/contentViewerUtils.ts
index 5d73fe8301..a353185796 100644
--- a/clients/web/src/components/elements/ContentViewer/contentViewerUtils.ts
+++ b/clients/web/src/components/elements/ContentViewer/contentViewerUtils.ts
@@ -1,8 +1,13 @@
 /**
- * Pure helpers backing the per-MIME dispatch in {@link ContentViewer}. Kept in
- * a dependency-free module so they can be unit-tested in isolation and reused by
- * the blob renderers (PDF / CSV / HTML) without dragging in React.
+ * Pure helpers backing the per-MIME dispatch in {@link ContentViewer}. Kept
+ * free of component dependencies so they can be unit-tested in isolation and
+ * reused by the blob renderers (PDF / CSV / HTML) without dragging in React.
+ * The two pure predicates imported below are the exception that proves it:
+ * plain functions over a string, shared so the viewer and the JSON editors
+ * cannot disagree about which payloads survive a round trip.
  */
+import { isSerializableJson } from "@inspector/core/json/jsonUtils.js";
+import { hasImpreciseIntegerLiteral } from "../../../utils/jsonObjectDraft";
 
 /**
  * The renderer family a MIME type maps to. `ContentViewer` switches on this to
@@ -130,12 +135,38 @@ export function tryDecodeBase64ToBytes(
 /** Pretty-print JSON text; returns the input unchanged when it doesn't parse. */
 export function formatJson(content: string): string {
   try {
-    return JSON.stringify(JSON.parse(content), null, 2);
+    const parsed: unknown = JSON.parse(content);
+    return reformatsFaithfully(content, parsed)
+      ? JSON.stringify(parsed, null, 2)
+      : content;
   } catch {
     return content;
   }
 }
 
+/**
+ * Whether pretty-printing this payload would show the reader the same values
+ * the sender put on the wire.
+ *
+ * Pretty-printing here is `JSON.parse` then `JSON.stringify`, which is a
+ * *round trip through JavaScript's number type* — and that is not lossless.
+ * A server sending `{"id":9007199254740993}` would be shown `…992`, and one
+ * sending `{"limit":1e400}` would be shown `null`, because `JSON.parse` yields
+ * `Infinity` and `JSON.stringify` writes that as null. Neither is a formatting
+ * difference; both are the viewer telling the reader something untrue about
+ * the payload it received, which for an inspector is the worst kind of bug.
+ *
+ * So when the round trip would alter a value, the payload is displayed exactly
+ * as it arrived — unindented, but honest. The copy button already copied the
+ * original text either way; this makes what is on screen agree with it.
+ *
+ * The same two checks the draft parsers use, which is why they live in
+ * `utils/jsonObjectDraft` rather than beside either caller.
+ */
+function reformatsFaithfully(text: string, parsed: unknown): boolean {
+  return isSerializableJson(parsed) && !hasImpreciseIntegerLiteral(text);
+}
+
 /** Heuristic: does this plain text (no MIME) look like a JSON document? */
 export function looksLikeJson(text: string): boolean {
   const trimmed = text.trimStart();
@@ -162,7 +193,12 @@ export function looksLikeJson(text: string): boolean {
 export function formatJsonDocument(text: string): string | null {
   if (!looksLikeJson(text)) return null;
   try {
-    return JSON.stringify(JSON.parse(text), null, 2);
+    const parsed: unknown = JSON.parse(text);
+    // Still a JSON document either way — it just does not get reindented when
+    // reindenting would change what it says. See `reformatsFaithfully`.
+    return reformatsFaithfully(text, parsed)
+      ? JSON.stringify(parsed, null, 2)
+      : text;
   } catch {
     return null;
   }

From 1b28fc8218f12eb998eced458637ec12a65701ce Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Thu, 27 Aug 2026 05:53:18 -0400
Subject: [PATCH 12/14] fix(web): detect duplicate object keys, which
 JSON.parse drops silently
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Copilot's eleventh pass: three comments, one defect in three places.

`JSON.parse` accepts duplicate member names and keeps the last without
complaint, so `{"role":"user","role":"admin"}` becomes `{"role":"admin"}` —
a document that renders, and submits, as *less* than it says. In the read-only
viewer that is the Inspector hiding what the server sent; in a draft it is the
editor showing more than the wire will carry. Nothing downstream could catch
it, because by the time `JSON.parse` returns the evidence is gone.

New `findDuplicateObjectKey` scans the source, scoped per object so
`{"a":{"a":1}}` and `[{"a":1},{"a":2}]` are fine, and compares names by decoded
value so `"a"` and `"a"` collide as they should. It shares its
escape-handling with the number-literal scanner, which now reads strings
through the same helper rather than skipping them inline.

Wired into all four JSON-draft parsers and into the viewer's faithfulness
check, so the same document is refused, or shown unindented, everywhere.

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>
---
 .../ContentViewer/contentViewerUtils.test.ts  |   9 ++
 .../ContentViewer/contentViewerUtils.ts       |  22 +++-
 .../EditReplayModal/EditReplayModal.test.tsx  |   9 ++
 .../EditReplayModal/EditReplayModal.tsx       |   6 +
 .../groups/SchemaForm/SchemaForm.test.tsx     |  19 ++++
 .../groups/SchemaForm/SchemaForm.tsx          |  10 ++
 clients/web/src/utils/jsonObjectDraft.test.ts |  52 +++++++++
 clients/web/src/utils/jsonObjectDraft.ts      | 105 ++++++++++++++++--
 8 files changed, 217 insertions(+), 15 deletions(-)

diff --git a/clients/web/src/components/elements/ContentViewer/contentViewerUtils.test.ts b/clients/web/src/components/elements/ContentViewer/contentViewerUtils.test.ts
index 691919862c..d2997c2b47 100644
--- a/clients/web/src/components/elements/ContentViewer/contentViewerUtils.test.ts
+++ b/clients/web/src/components/elements/ContentViewer/contentViewerUtils.test.ts
@@ -116,6 +116,15 @@ describe("formatJson", () => {
     expect(formatJson('{"limit":1e400}')).toBe('{"limit":1e400}');
   });
 
+  // The starkest instance of the same class: only the *second* `role` survives
+  // `JSON.parse`, so reindenting would show the reader less than the server
+  // sent.
+  it("leaves a payload alone when it names the same member twice", () => {
+    expect(formatJson('{"role":"user","role":"admin"}')).toBe(
+      '{"role":"user","role":"admin"}',
+    );
+  });
+
   // The spelling of a number changes on a round trip and its *value* does not,
   // so these still get indented: `0.10000000000000001` and `0.1` are the same
   // double, and `1e2` and `100` are the same number.
diff --git a/clients/web/src/components/elements/ContentViewer/contentViewerUtils.ts b/clients/web/src/components/elements/ContentViewer/contentViewerUtils.ts
index a353185796..92c5a44ae3 100644
--- a/clients/web/src/components/elements/ContentViewer/contentViewerUtils.ts
+++ b/clients/web/src/components/elements/ContentViewer/contentViewerUtils.ts
@@ -2,12 +2,15 @@
  * Pure helpers backing the per-MIME dispatch in {@link ContentViewer}. Kept
  * free of component dependencies so they can be unit-tested in isolation and
  * reused by the blob renderers (PDF / CSV / HTML) without dragging in React.
- * The two pure predicates imported below are the exception that proves it:
- * plain functions over a string, shared so the viewer and the JSON editors
- * cannot disagree about which payloads survive a round trip.
+ * The predicates imported below are the exception that proves it: plain
+ * functions over a string, shared so the viewer and the JSON editors cannot
+ * disagree about which payloads survive a round trip.
  */
 import { isSerializableJson } from "@inspector/core/json/jsonUtils.js";
-import { hasImpreciseIntegerLiteral } from "../../../utils/jsonObjectDraft";
+import {
+  findDuplicateObjectKey,
+  hasImpreciseIntegerLiteral,
+} from "../../../utils/jsonObjectDraft";
 
 /**
  * The renderer family a MIME type maps to. `ContentViewer` switches on this to
@@ -160,11 +163,18 @@ export function formatJson(content: string): string {
  * as it arrived — unindented, but honest. The copy button already copied the
  * original text either way; this makes what is on screen agree with it.
  *
- * The same two checks the draft parsers use, which is why they live in
+ * The same checks the draft parsers use, which is why they live in
  * `utils/jsonObjectDraft` rather than beside either caller.
  */
 function reformatsFaithfully(text: string, parsed: unknown): boolean {
-  return isSerializableJson(parsed) && !hasImpreciseIntegerLiteral(text);
+  return (
+    isSerializableJson(parsed) &&
+    !hasImpreciseIntegerLiteral(text) &&
+    // A duplicate member name is the same class and the starkest instance:
+    // `{"role":"user","role":"admin"}` would be *shown* as only the second,
+    // which is the viewer hiding what the server sent.
+    findDuplicateObjectKey(text) === null
+  );
 }
 
 /** Heuristic: does this plain text (no MIME) look like a JSON document? */
diff --git a/clients/web/src/components/groups/EditReplayModal/EditReplayModal.test.tsx b/clients/web/src/components/groups/EditReplayModal/EditReplayModal.test.tsx
index ff8614cafc..c041cbaea1 100644
--- a/clients/web/src/components/groups/EditReplayModal/EditReplayModal.test.tsx
+++ b/clients/web/src/components/groups/EditReplayModal/EditReplayModal.test.tsx
@@ -265,6 +265,15 @@ describe("EditReplayModal", () => {
     expect(screen.getByRole("button", { name: "Send" })).not.toBeDisabled();
   });
 
+  // `JSON.parse` keeps only the last occurrence, so the draft would show two
+  // cursors and Send would dispatch one.
+  it("disables Send for a document that names the same member twice", async () => {
+    renderWithMantine(<EditReplayModal {...baseProps} method="tools/list" />);
+    await setAceText('{"cursor":"first","cursor":"second"}');
+    expect(screen.getByRole("button", { name: "Send" })).toBeDisabled();
+    expect(screen.getByText(/`cursor` appears twice/)).toBeInTheDocument();
+  });
+
   it("closes without sending when cancelled", async () => {
     const user = userEvent.setup();
     const onSend = vi.fn();
diff --git a/clients/web/src/components/groups/EditReplayModal/EditReplayModal.tsx b/clients/web/src/components/groups/EditReplayModal/EditReplayModal.tsx
index 17bee0f184..17069c3801 100644
--- a/clients/web/src/components/groups/EditReplayModal/EditReplayModal.tsx
+++ b/clients/web/src/components/groups/EditReplayModal/EditReplayModal.tsx
@@ -3,6 +3,8 @@ import type { Tool } from "@modelcontextprotocol/client";
 import { Alert, Button, Group, Modal, Stack, Text } from "@mantine/core";
 import { JsonEditor } from "../../elements/JsonEditor/JsonEditor";
 import {
+  duplicateKeyError,
+  findDuplicateObjectKey,
   hasImpreciseIntegerLiteral,
   isJsonObject,
   IMPRECISE_INTEGER_ERROR,
@@ -114,6 +116,10 @@ function parseParamsDraft(
   if (hasImpreciseIntegerLiteral(text)) {
     return { ok: false, error: IMPRECISE_INTEGER_ERROR };
   }
+  const duplicate = findDuplicateObjectKey(text);
+  if (duplicate !== null) {
+    return { ok: false, error: duplicateKeyError(duplicate) };
+  }
   // Seeding from the projection is only half of it: a key the dispatcher does
   // not read can also be *added* to the draft, and Send would then discard an
   // edit the user was looking at. Checked with the same function the seed is
diff --git a/clients/web/src/components/groups/SchemaForm/SchemaForm.test.tsx b/clients/web/src/components/groups/SchemaForm/SchemaForm.test.tsx
index 77b6dbb928..a2c5e0917f 100644
--- a/clients/web/src/components/groups/SchemaForm/SchemaForm.test.tsx
+++ b/clients/web/src/components/groups/SchemaForm/SchemaForm.test.tsx
@@ -792,6 +792,9 @@ describe("SchemaForm", () => {
       screen.getByText(/^This whole number cannot be represented exactly/),
     ).toBeInTheDocument();
 
+    await setAceTextByLabel(/Config/, '[{"a":1,"a":2}]');
+    expect(screen.getByText(/^`a` appears twice/)).toBeInTheDocument();
+
     await setAceTextByLabel(/Config/, "[1,2]");
     expect(screen.queryByText(/this field will be omitted/)).toBeNull();
   });
@@ -1978,6 +1981,22 @@ describe("SchemaForm raw JSON (#2151)", () => {
     ).toBeInTheDocument();
   });
 
+  // `JSON.parse` keeps only the last occurrence, so the editor would show a
+  // document that submits as less than it says.
+  it("blocks submission for a document that names the same member twice", async () => {
+    const user = userEvent.setup();
+    const onValidityChange = vi.fn();
+    renderWithMantine(<RawHarness onValidityChange={onValidityChange} />);
+    await enableRawJson(user);
+
+    await setAceTextByLabel(
+      /Arguments JSON/,
+      '{"mode":"safe","mode":"unsafe"}',
+    );
+    expect(onValidityChange).toHaveBeenLastCalledWith(true);
+    expect(screen.getByText(/`mode` appears twice/)).toBeInTheDocument();
+  });
+
   // Nothing in `values` names a branch, so the picker's index is held by the
   // form. Editing the discriminator in the raw document is a change to which
   // branch is in effect, and it carries no other signal — without the re-derive
diff --git a/clients/web/src/components/groups/SchemaForm/SchemaForm.tsx b/clients/web/src/components/groups/SchemaForm/SchemaForm.tsx
index 73cbcccc09..748ce5547d 100644
--- a/clients/web/src/components/groups/SchemaForm/SchemaForm.tsx
+++ b/clients/web/src/components/groups/SchemaForm/SchemaForm.tsx
@@ -25,6 +25,8 @@ import { ClearButton } from "../../elements/ClearButton/ClearButton";
 import { EnlargeButton } from "../../elements/EnlargeButton/EnlargeButton";
 import { JsonEditor } from "../../elements/JsonEditor/JsonEditor";
 import {
+  duplicateKeyError,
+  findDuplicateObjectKey,
   hasImpreciseIntegerLiteral,
   isJsonObject,
   IMPRECISE_INTEGER_ERROR,
@@ -332,6 +334,10 @@ function describeJsonDraftProblem(text: string): string | null {
   if (hasImpreciseIntegerLiteral(text)) {
     return `${IMPRECISE_INTEGER_ERROR} — this field will be omitted`;
   }
+  const duplicate = findDuplicateObjectKey(text);
+  if (duplicate !== null) {
+    return `${duplicateKeyError(duplicate)} — this field will be omitted`;
+  }
   return null;
 }
 
@@ -649,6 +655,10 @@ function parseRawArgumentsDraft(
   if (hasImpreciseIntegerLiteral(text)) {
     return { ok: false, error: IMPRECISE_INTEGER_ERROR };
   }
+  const duplicate = findDuplicateObjectKey(text);
+  if (duplicate !== null) {
+    return { ok: false, error: duplicateKeyError(duplicate) };
+  }
   return { ok: true, value: parsed };
 }
 
diff --git a/clients/web/src/utils/jsonObjectDraft.test.ts b/clients/web/src/utils/jsonObjectDraft.test.ts
index 5788817d5a..9c3b8a0c43 100644
--- a/clients/web/src/utils/jsonObjectDraft.test.ts
+++ b/clients/web/src/utils/jsonObjectDraft.test.ts
@@ -1,5 +1,6 @@
 import { describe, it, expect } from "vitest";
 import {
+  findDuplicateObjectKey,
   hasImpreciseIntegerLiteral,
   parseJsonObjectDraft,
 } from "./jsonObjectDraft";
@@ -70,6 +71,51 @@ describe("hasImpreciseIntegerLiteral", () => {
   });
 });
 
+// `JSON.parse` accepts duplicate member names and keeps the last silently, so
+// the evidence is gone by the time it returns — nothing downstream can see that
+// the document said more than the value carries.
+describe("findDuplicateObjectKey", () => {
+  it("names the repeated member", () => {
+    expect(findDuplicateObjectKey('{"role":"user","role":"admin"}')).toBe(
+      "role",
+    );
+  });
+
+  it("accepts a document whose names are all distinct", () => {
+    expect(findDuplicateObjectKey('{"a":1,"b":2}')).toBeNull();
+  });
+
+  // The repeat has to be within one set of braces.
+  it("scopes the check per object", () => {
+    expect(findDuplicateObjectKey('{"a":{"a":1}}')).toBeNull();
+    expect(findDuplicateObjectKey('[{"a":1},{"a":2}]')).toBeNull();
+  });
+
+  it("finds a repeat nested inside another object or an array", () => {
+    expect(findDuplicateObjectKey('{"outer":{"a":1,"a":2}}')).toBe("a");
+    expect(findDuplicateObjectKey('[{"a":1,"a":2}]')).toBe("a");
+  });
+
+  // Compared by decoded value: `"a"` and `"\u0061"` name the same member, so
+  // comparing the raw source would miss a duplicate written the second way.
+  it("compares names by value, not by spelling", () => {
+    expect(findDuplicateObjectKey('{"a":1,"\\u0061":2}')).toBe("a");
+  });
+
+  // A string *value* that repeats is not a duplicate name, and a name that
+  // merely appears inside one is not either.
+  it("does not confuse values with names", () => {
+    expect(findDuplicateObjectKey('{"a":"x","b":"x"}')).toBeNull();
+    expect(findDuplicateObjectKey('{"a":"b","c":1}')).toBeNull();
+    expect(findDuplicateObjectKey('{"a":"}\\"a\\":1{","b":2}')).toBeNull();
+  });
+
+  it("says nothing about a half-typed draft", () => {
+    expect(findDuplicateObjectKey('{"a":1,"a')).toBeNull();
+    expect(findDuplicateObjectKey("")).toBeNull();
+  });
+});
+
 describe("parseJsonObjectDraft", () => {
   it("reads empty text as the empty object rather than an error", () => {
     expect(parseJsonObjectDraft("")).toEqual({ ok: true, value: {} });
@@ -112,6 +158,12 @@ describe("parseJsonObjectDraft", () => {
     });
   });
 
+  it("rejects a document that names the same member twice", () => {
+    const result = parseJsonObjectDraft('{"role":"user","role":"admin"}');
+    expect(result.ok).toBe(false);
+    expect(result.ok === false && result.error).toMatch(/`role` appears twice/);
+  });
+
   it("rejects text that is not JSON", () => {
     expect(parseJsonObjectDraft('{"a":')).toEqual({
       ok: false,
diff --git a/clients/web/src/utils/jsonObjectDraft.ts b/clients/web/src/utils/jsonObjectDraft.ts
index d06ccdc946..98b049ea1f 100644
--- a/clients/web/src/utils/jsonObjectDraft.ts
+++ b/clients/web/src/utils/jsonObjectDraft.ts
@@ -67,18 +67,10 @@ const JSON_NUMBER = /-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?/y;
  */
 function* jsonNumberLiterals(text: string): Generator<string> {
   let index = 0;
-  let inString = false;
   while (index < text.length) {
     const char = text[index];
-    if (inString) {
-      // A backslash escapes the next character, including a closing quote.
-      index += char === "\\" ? 2 : 1;
-      if (char === '"') inString = false;
-      continue;
-    }
     if (char === '"') {
-      inString = true;
-      index += 1;
+      index = readStringToken(text, index).next;
       continue;
     }
     if (char === "-" || (char >= "0" && char <= "9")) {
@@ -95,6 +87,97 @@ function* jsonNumberLiterals(text: string): Generator<string> {
   }
 }
 
+/**
+ * Read one JSON string token starting at the opening quote.
+ *
+ * Returns where the token ends and its raw source, escapes intact — the caller
+ * decodes only when it needs the *value*, which for a key it does: `"a"` and
+ * `"\u0061"` name the same member, so comparing the raw forms would miss a
+ * duplicate written the second way.
+ *
+ * Shared by both scanners here so the escape handling — a backslash consumes
+ * the next character, including a closing quote — is written once.
+ */
+function readStringToken(
+  text: string,
+  start: number,
+): { raw: string; next: number } {
+  let index = start + 1;
+  while (index < text.length) {
+    const char = text[index];
+    if (char === "\\") {
+      index += 2;
+      continue;
+    }
+    index += 1;
+    if (char === '"') break;
+  }
+  return { raw: text.slice(start, index), next: index };
+}
+
+/**
+ * The first object member name this document declares twice, or `null`.
+ *
+ * `JSON.parse` accepts duplicate names and keeps the last silently, so
+ * `{"role":"user","role":"admin"}` becomes `{"role":"admin"}` — a document that
+ * renders, and submits, as *less* than it says. In a read-only view that is the
+ * Inspector hiding what the server sent; in a draft it is the editor showing
+ * more than the wire will carry. Neither is acceptable, and nothing else here
+ * detects it, because by the time `JSON.parse` returns the evidence is gone.
+ *
+ * Scoped per object, so `{"a":{"a":1}}` and `[{"a":1},{"a":2}]` are fine — the
+ * repeat has to be within one set of braces.
+ */
+export function findDuplicateObjectKey(text: string): string | null {
+  // One frame per open brace or bracket; `null` marks an array, whose members
+  // are not named and so cannot collide.
+  const stack: (Set<string> | null)[] = [];
+  let expectKey = false;
+  let index = 0;
+  while (index < text.length) {
+    const char = text[index];
+    if (char === '"') {
+      const { raw, next } = readStringToken(text, index);
+      const frame = stack[stack.length - 1];
+      if (expectKey && frame) {
+        let name: string;
+        try {
+          name = JSON.parse(raw) as string;
+        } catch {
+          // An unterminated string at the end of a half-typed draft. There is
+          // no key here to compare, and the parse will report the real problem.
+          return null;
+        }
+        if (frame.has(name)) return name;
+        frame.add(name);
+        expectKey = false;
+      }
+      index = next;
+      continue;
+    }
+    if (char === "{") {
+      stack.push(new Set());
+      expectKey = true;
+    } else if (char === "[") {
+      stack.push(null);
+      expectKey = false;
+    } else if (char === "}" || char === "]") {
+      stack.pop();
+      expectKey = false;
+    } else if (char === ",") {
+      // Only an object's separator introduces a name; an array's does not.
+      expectKey = stack[stack.length - 1] != null;
+    }
+    index += 1;
+  }
+  return null;
+}
+
+/** The message every draft parser uses for {@link findDuplicateObjectKey}. */
+export function duplicateKeyError(key: string): string {
+  return `\`${key}\` appears twice in the same object — JSON keeps only the last, so part of this would not be sent`;
+}
+
 /**
  * The message every draft parser uses for {@link hasImpreciseIntegerLiteral}.
  *
@@ -148,5 +231,9 @@ export function parseJsonObjectDraft(text: string): JsonObjectDraft {
   if (hasImpreciseIntegerLiteral(text)) {
     return { ok: false, error: IMPRECISE_INTEGER_ERROR };
   }
+  const duplicate = findDuplicateObjectKey(text);
+  if (duplicate !== null) {
+    return { ok: false, error: duplicateKeyError(duplicate) };
+  }
   return { ok: true, value: parsed };
 }

From 8aa6f0150516198d0255a1175b354f87656b133a Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Thu, 27 Aug 2026 06:11:23 -0400
Subject: [PATCH 13/14] fix(web): reject a negative-zero literal, which loses
 its sign when serialized
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Copilot's twelfth pass. The suppressed comment is right and is fixed here; the
inline one is real too, but needs a core API change and is filed as #2171.

`-0` is represented exactly, so the digit comparison had nothing to say about
it — but `JSON.stringify` writes it as `0`, so the loss happens on the way
*out* rather than on the way in. The editor showed `-0` and the wire carried
`0`, and the viewer rewrote a received `-0` while pretty-printing.

`hasImpreciseIntegerLiteral` becomes `findUnsendableNumberLiteral`, checking
`Object.is(Number(literal), -0)` for every numeric spelling — `-0`, `-0.0`,
`-0e1` — before the integer-only digit check. Returning the offending literal
rather than a boolean lets the message name it, which is more use than either
of the two rules behind it and matches how the duplicate-key message reads.

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>
---
 .../ContentViewer/contentViewerUtils.ts       |  4 +-
 .../EditReplayModal/EditReplayModal.test.tsx  |  4 +-
 .../EditReplayModal/EditReplayModal.tsx       |  9 +--
 .../groups/SchemaForm/SchemaForm.test.tsx     |  6 +-
 .../groups/SchemaForm/SchemaForm.tsx          | 14 +++--
 clients/web/src/utils/jsonObjectDraft.test.ts | 62 ++++++++++++-------
 clients/web/src/utils/jsonObjectDraft.ts      | 44 ++++++++-----
 7 files changed, 85 insertions(+), 58 deletions(-)

diff --git a/clients/web/src/components/elements/ContentViewer/contentViewerUtils.ts b/clients/web/src/components/elements/ContentViewer/contentViewerUtils.ts
index 92c5a44ae3..670fa3b72b 100644
--- a/clients/web/src/components/elements/ContentViewer/contentViewerUtils.ts
+++ b/clients/web/src/components/elements/ContentViewer/contentViewerUtils.ts
@@ -9,7 +9,7 @@
 import { isSerializableJson } from "@inspector/core/json/jsonUtils.js";
 import {
   findDuplicateObjectKey,
-  hasImpreciseIntegerLiteral,
+  findUnsendableNumberLiteral,
 } from "../../../utils/jsonObjectDraft";
 
 /**
@@ -169,7 +169,7 @@ export function formatJson(content: string): string {
 function reformatsFaithfully(text: string, parsed: unknown): boolean {
   return (
     isSerializableJson(parsed) &&
-    !hasImpreciseIntegerLiteral(text) &&
+    findUnsendableNumberLiteral(text) === null &&
     // A duplicate member name is the same class and the starkest instance:
     // `{"role":"user","role":"admin"}` would be *shown* as only the second,
     // which is the viewer hiding what the server sent.
diff --git a/clients/web/src/components/groups/EditReplayModal/EditReplayModal.test.tsx b/clients/web/src/components/groups/EditReplayModal/EditReplayModal.test.tsx
index c041cbaea1..e2d1682633 100644
--- a/clients/web/src/components/groups/EditReplayModal/EditReplayModal.test.tsx
+++ b/clients/web/src/components/groups/EditReplayModal/EditReplayModal.test.tsx
@@ -218,9 +218,7 @@ describe("EditReplayModal", () => {
     renderWithMantine(<EditReplayModal {...baseProps} method="tools/call" />);
     await setAceText('{"name":"echo","arguments":{"id":9007199254740993}}');
     expect(screen.getByRole("button", { name: "Send" })).toBeDisabled();
-    expect(
-      screen.getByText(/cannot be represented exactly/),
-    ).toBeInTheDocument();
+    expect(screen.getByText(/would not arrive as written/)).toBeInTheDocument();
   });
 
   it("disables Send for a non-string prompt argument", async () => {
diff --git a/clients/web/src/components/groups/EditReplayModal/EditReplayModal.tsx b/clients/web/src/components/groups/EditReplayModal/EditReplayModal.tsx
index 17069c3801..bcc12cc49e 100644
--- a/clients/web/src/components/groups/EditReplayModal/EditReplayModal.tsx
+++ b/clients/web/src/components/groups/EditReplayModal/EditReplayModal.tsx
@@ -5,9 +5,9 @@ import { JsonEditor } from "../../elements/JsonEditor/JsonEditor";
 import {
   duplicateKeyError,
   findDuplicateObjectKey,
-  hasImpreciseIntegerLiteral,
+  findUnsendableNumberLiteral,
   isJsonObject,
-  IMPRECISE_INTEGER_ERROR,
+  unsendableNumberError,
 } from "../../../utils/jsonObjectDraft";
 import {
   replayableParams,
@@ -113,8 +113,9 @@ function parseParamsDraft(
         "Numbers must be finite — a value like `1e400` overflows and would be sent as null",
     };
   }
-  if (hasImpreciseIntegerLiteral(text)) {
-    return { ok: false, error: IMPRECISE_INTEGER_ERROR };
+  const unsendable = findUnsendableNumberLiteral(text);
+  if (unsendable !== null) {
+    return { ok: false, error: unsendableNumberError(unsendable) };
   }
   const duplicate = findDuplicateObjectKey(text);
   if (duplicate !== null) {
diff --git a/clients/web/src/components/groups/SchemaForm/SchemaForm.test.tsx b/clients/web/src/components/groups/SchemaForm/SchemaForm.test.tsx
index a2c5e0917f..fde96a823b 100644
--- a/clients/web/src/components/groups/SchemaForm/SchemaForm.test.tsx
+++ b/clients/web/src/components/groups/SchemaForm/SchemaForm.test.tsx
@@ -789,7 +789,7 @@ describe("SchemaForm", () => {
 
     await setAceTextByLabel(/Config/, "[9007199254740993]");
     expect(
-      screen.getByText(/^This whole number cannot be represented exactly/),
+      screen.getByText(/^`9007199254740993` would not arrive as written/),
     ).toBeInTheDocument();
 
     await setAceTextByLabel(/Config/, '[{"a":1,"a":2}]');
@@ -1976,9 +1976,7 @@ describe("SchemaForm raw JSON (#2151)", () => {
 
     await setAceTextByLabel(/Arguments JSON/, '{"id":9007199254740993}');
     expect(onValidityChange).toHaveBeenLastCalledWith(true);
-    expect(
-      screen.getByText(/cannot be represented exactly/),
-    ).toBeInTheDocument();
+    expect(screen.getByText(/would not arrive as written/)).toBeInTheDocument();
   });
 
   // `JSON.parse` keeps only the last occurrence, so the editor would show a
diff --git a/clients/web/src/components/groups/SchemaForm/SchemaForm.tsx b/clients/web/src/components/groups/SchemaForm/SchemaForm.tsx
index 748ce5547d..4ea9fb953f 100644
--- a/clients/web/src/components/groups/SchemaForm/SchemaForm.tsx
+++ b/clients/web/src/components/groups/SchemaForm/SchemaForm.tsx
@@ -27,9 +27,9 @@ import { JsonEditor } from "../../elements/JsonEditor/JsonEditor";
 import {
   duplicateKeyError,
   findDuplicateObjectKey,
-  hasImpreciseIntegerLiteral,
+  findUnsendableNumberLiteral,
   isJsonObject,
-  IMPRECISE_INTEGER_ERROR,
+  unsendableNumberError,
 } from "../../../utils/jsonObjectDraft";
 import { isSerializableJson } from "@inspector/core/json/jsonUtils.js";
 import { useValueChange } from "../../../hooks/useValueChange";
@@ -331,8 +331,9 @@ function describeJsonDraftProblem(text: string): string | null {
   if (!isSerializableJson(parsed)) {
     return "Numbers must be finite — this field will be omitted";
   }
-  if (hasImpreciseIntegerLiteral(text)) {
-    return `${IMPRECISE_INTEGER_ERROR} — this field will be omitted`;
+  const unsendable = findUnsendableNumberLiteral(text);
+  if (unsendable !== null) {
+    return `${unsendableNumberError(unsendable)} — this field will be omitted`;
   }
   const duplicate = findDuplicateObjectKey(text);
   if (duplicate !== null) {
@@ -652,8 +653,9 @@ function parseRawArgumentsDraft(
   }
   // The quieter half of the same defect: a whole number past 2^53−1 parses to
   // the nearest double, so the draft shows digits the wire will not carry.
-  if (hasImpreciseIntegerLiteral(text)) {
-    return { ok: false, error: IMPRECISE_INTEGER_ERROR };
+  const unsendable = findUnsendableNumberLiteral(text);
+  if (unsendable !== null) {
+    return { ok: false, error: unsendableNumberError(unsendable) };
   }
   const duplicate = findDuplicateObjectKey(text);
   if (duplicate !== null) {
diff --git a/clients/web/src/utils/jsonObjectDraft.test.ts b/clients/web/src/utils/jsonObjectDraft.test.ts
index 9c3b8a0c43..d9fb4462b2 100644
--- a/clients/web/src/utils/jsonObjectDraft.test.ts
+++ b/clients/web/src/utils/jsonObjectDraft.test.ts
@@ -1,7 +1,7 @@
 import { describe, it, expect } from "vitest";
 import {
   findDuplicateObjectKey,
-  hasImpreciseIntegerLiteral,
+  findUnsendableNumberLiteral,
   parseJsonObjectDraft,
 } from "./jsonObjectDraft";
 
@@ -9,65 +9,83 @@ import {
 // `Infinity` → `null` on the wire). This is the quieter one: a whole number
 // past 2^53−1 parses to the nearest double, so the draft shows digits the wire
 // will not carry.
-describe("hasImpreciseIntegerLiteral", () => {
+describe("findUnsendableNumberLiteral", () => {
   it("accepts whole numbers inside the safe range", () => {
-    expect(hasImpreciseIntegerLiteral('{"id":9007199254740991}')).toBe(false);
-    expect(hasImpreciseIntegerLiteral('{"id":-9007199254740991}')).toBe(false);
-    expect(hasImpreciseIntegerLiteral('{"id":0}')).toBe(false);
+    expect(findUnsendableNumberLiteral('{"id":9007199254740991}')).toBeNull();
+    expect(findUnsendableNumberLiteral('{"id":-9007199254740991}')).toBeNull();
+    expect(findUnsendableNumberLiteral('{"id":0}')).toBeNull();
   });
 
   it("rejects a whole number that loses digits when parsed", () => {
     // Typed as …93, parsed as …92.
-    expect(hasImpreciseIntegerLiteral('{"id":9007199254740993}')).toBe(true);
+    expect(findUnsendableNumberLiteral('{"id":9007199254740993}')).toBe(
+      "9007199254740993",
+    );
   });
 
   // The case the previous, value-based check could not see: at or above 1e21
   // JS stringifies in exponent form, so inferring the literal from the parsed
   // number said "exponent form, nothing lost" about digits that were lost.
   it("rejects a full-form literal at or above 1e21", () => {
-    expect(hasImpreciseIntegerLiteral('{"id":1000000000000000000001}')).toBe(
-      true,
+    expect(findUnsendableNumberLiteral('{"id":1000000000000000000001}')).toBe(
+      "1000000000000000000001",
     );
   });
 
   // …and the false positive it also had. Written out in full, past the safe
   // range, and exactly representable, so it is sent as written.
   it("accepts a full-form literal that is exactly representable", () => {
-    expect(hasImpreciseIntegerLiteral('{"id":18014398509481984}')).toBe(false);
+    expect(findUnsendableNumberLiteral('{"id":18014398509481984}')).toBeNull();
   });
 
   // A fractional or exponent-form value is a double by nature and is sent as
   // the double it parsed to, so nothing is lost between typing and sending.
   it("accepts fractional and exponent-form values", () => {
-    expect(hasImpreciseIntegerLiteral('{"n":1.5}')).toBe(false);
-    expect(hasImpreciseIntegerLiteral('{"n":1e308}')).toBe(false);
-    expect(hasImpreciseIntegerLiteral('{"n":1e21}')).toBe(false);
-    expect(hasImpreciseIntegerLiteral('{"n":-2.5e-7}')).toBe(false);
+    expect(findUnsendableNumberLiteral('{"n":1.5}')).toBeNull();
+    expect(findUnsendableNumberLiteral('{"n":1e308}')).toBeNull();
+    expect(findUnsendableNumberLiteral('{"n":1e21}')).toBeNull();
+    expect(findUnsendableNumberLiteral('{"n":-2.5e-7}')).toBeNull();
   });
 
   // The reason this scans rather than running a regex over the text: those
   // digits are a *string*, sent back exactly as written.
   it("ignores digits inside a string", () => {
-    expect(hasImpreciseIntegerLiteral('{"id":"9007199254740993"}')).toBe(false);
+    expect(findUnsendableNumberLiteral('{"id":"9007199254740993"}')).toBeNull();
   });
 
   it("ignores digits inside a key, and an escaped quote inside a string", () => {
-    expect(hasImpreciseIntegerLiteral('{"9007199254740993":1}')).toBe(false);
+    expect(findUnsendableNumberLiteral('{"9007199254740993":1}')).toBeNull();
     expect(
-      hasImpreciseIntegerLiteral('{"a":"say \\"9007199254740993\\"","b":1}'),
-    ).toBe(false);
+      findUnsendableNumberLiteral('{"a":"say \\"9007199254740993\\"","b":1}'),
+    ).toBeNull();
   });
 
   it("looks through arrays and nesting", () => {
-    expect(hasImpreciseIntegerLiteral('[{"a":[9007199254740993]}]')).toBe(true);
-    expect(hasImpreciseIntegerLiteral('{"a":{"b":[1,2,"x",null,true]}}')).toBe(
-      false,
+    expect(findUnsendableNumberLiteral('[{"a":[9007199254740993]}]')).toBe(
+      "9007199254740993",
     );
+    expect(
+      findUnsendableNumberLiteral('{"a":{"b":[1,2,"x",null,true]}}'),
+    ).toBeNull();
+  });
+
+  // Represented exactly, so the digit comparison has nothing to say — but
+  // `JSON.stringify` writes it as `0`, losing the sign on the way *out*.
+  it.each(["-0", "-0.0", "-0e1", "-0.0e-5"])(
+    "rejects negative zero written as %s",
+    (literal) => {
+      expect(findUnsendableNumberLiteral(`{"n":${literal}}`)).toBe(literal);
+    },
+  );
+
+  it("accepts a positive zero", () => {
+    expect(findUnsendableNumberLiteral('{"n":0}')).toBeNull();
+    expect(findUnsendableNumberLiteral('{"n":0.0}')).toBeNull();
   });
 
   it("says nothing about text that is not JSON", () => {
-    expect(hasImpreciseIntegerLiteral("")).toBe(false);
-    expect(hasImpreciseIntegerLiteral("{")).toBe(false);
+    expect(findUnsendableNumberLiteral("")).toBeNull();
+    expect(findUnsendableNumberLiteral("{")).toBeNull();
   });
 });
 
diff --git a/clients/web/src/utils/jsonObjectDraft.ts b/clients/web/src/utils/jsonObjectDraft.ts
index 98b049ea1f..e3c722ed28 100644
--- a/clients/web/src/utils/jsonObjectDraft.ts
+++ b/clients/web/src/utils/jsonObjectDraft.ts
@@ -21,8 +21,8 @@ export function isJsonObject(value: unknown): value is StrictJsonObject {
 }
 
 /**
- * Whether the draft text writes a whole number out in full that `JSON.parse`
- * cannot represent exactly.
+ * The first numeric literal in the draft that would not arrive as written, or
+ * `null` when every number survives the trip.
  *
  * `isSerializableJson` catches a literal too large to represent at all —
  * `1e400` parses to `Infinity` and writes back as `null`. This catches the
@@ -38,19 +38,25 @@ export function isJsonObject(value: unknown): value is StrictJsonObject {
  * refused `2^54` (written in full and exactly representable) and accepted every
  * full-form literal at or above 1e21, where JS switches to exponent form.
  *
- * Only integer literals written out in full are checked. An exponent or a
- * fraction is a double by nature and is sent as the double it parsed to, so
- * nothing is lost between typing and sending — and `{"n":1e308}` stays
- * acceptable, which `parseJsonObjectDraft`'s own tests pin.
+ * Only integer literals written out in full are checked for lost digits. An
+ * exponent or a fraction is a double by nature and is sent as the double it
+ * parsed to, so nothing is lost between typing and sending — and `{"n":1e308}`
+ * stays acceptable, which `parseJsonObjectDraft`'s own tests pin. Negative zero
+ * is the exception, and is checked in every spelling: there the loss happens on
+ * the way *out*, not on the way in.
  */
-export function hasImpreciseIntegerLiteral(text: string): boolean {
+export function findUnsendableNumberLiteral(text: string): string | null {
   for (const literal of jsonNumberLiterals(text)) {
+    // Negative zero, in any spelling — `-0`, `-0.0`, `-0e1`. It is represented
+    // exactly, so the digit comparison below has nothing to say about it, but
+    // `JSON.stringify` writes it as `0`: the sign is lost on the way out.
+    if (Object.is(Number(literal), -0)) return literal;
     if (!/^-?\d+$/.test(literal)) continue;
     // BigInt on both sides, so the comparison is exact: `Number(literal)` is an
     // integer-valued double, and converting it back shows what survived.
-    if (BigInt(literal) !== BigInt(Number(literal))) return true;
+    if (BigInt(literal) !== BigInt(Number(literal))) return literal;
   }
-  return false;
+  return null;
 }
 
 /** Matches one JSON number token, anchored where the scan currently stands. */
@@ -179,14 +185,17 @@ export function duplicateKeyError(key: string): string {
 }
 
 /**
- * The message every draft parser uses for {@link hasImpreciseIntegerLiteral}.
+ * The message every draft parser uses for
+ * {@link findUnsendableNumberLiteral}.
  *
- * Phrased as "cannot be represented exactly" rather than naming the safe-integer
- * range, because the range is not the rule: a whole number past ±(2^53 − 1) that
- * *is* exactly representable — 2^54, say — round-trips and is accepted.
+ * Names the literal rather than the rule, because the rule is two rules: a
+ * whole number can lose digits on the way in, and a negative zero loses its
+ * sign on the way out. Naming what is wrong with *this* document is more use
+ * than either explanation, and it is how the duplicate-key message reads too.
  */
-export const IMPRECISE_INTEGER_ERROR =
-  "This whole number cannot be represented exactly — it is rounded when parsed, so a different value would be sent";
+export function unsendableNumberError(literal: string): string {
+  return `\`${literal}\` would not arrive as written — it changes when serialized, so a different value would be sent`;
+}
 
 /**
  * Read a JSON-object editor's draft text.
@@ -228,8 +237,9 @@ export function parseJsonObjectDraft(text: string): JsonObjectDraft {
         "Numbers must be finite — a value like `1e400` overflows and would be sent as null",
     };
   }
-  if (hasImpreciseIntegerLiteral(text)) {
-    return { ok: false, error: IMPRECISE_INTEGER_ERROR };
+  const unsendable = findUnsendableNumberLiteral(text);
+  if (unsendable !== null) {
+    return { ok: false, error: unsendableNumberError(unsendable) };
   }
   const duplicate = findDuplicateObjectKey(text);
   if (duplicate !== null) {

From 684eb9c7bc4462f43c08a299b1d657f3b50baee0 Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Thu, 27 Aug 2026 06:26:23 -0400
Subject: [PATCH 14/14] fix(web): reject an underflowing literal, and route
 embedded JSON resources
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Copilot's thirteenth pass, two comments, both real.

- `1e-400` has a nonzero mantissa and parses to `0`. The digit comparison skips
  it for being exponent-form and it is not negative zero, so nothing saw a
  document that says one number and sends none of it. Caught now by pairing
  `Number(literal) === 0` with a nonzero digit in the mantissa, which leaves a
  literal written as zero (`0e-400`) and a subnormal that still parses to
  something (`1e-320`) alone.

- The `resource` content-block branch rendered every embedded resource in a
  plain code block, ignoring `resource.mimeType`, so a prompt message carrying
  JSON did not inherit this migration even though the text-block branch did. An
  embedded *text* resource declaring JSON now goes through the same dispatch.

Narrowed to JSON, as the Network tab's bodies are: routing every declared type
through would also put an embedded `text/html` resource into the sandboxed
frame and a `text/csv` one into a table. The Resources screen already renders
resource contents that way, so doing it here too is defensible — but it is a
change to what a tool result *is*, and belongs to whoever decides that.

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>
---
 .../ContentViewer/ContentViewer.test.tsx      | 33 +++++++++++++++++++
 .../elements/ContentViewer/ContentViewer.tsx  | 30 ++++++++++++++---
 clients/web/src/utils/jsonObjectDraft.test.ts | 17 ++++++++++
 clients/web/src/utils/jsonObjectDraft.ts      | 23 +++++++++++--
 4 files changed, 96 insertions(+), 7 deletions(-)

diff --git a/clients/web/src/components/elements/ContentViewer/ContentViewer.test.tsx b/clients/web/src/components/elements/ContentViewer/ContentViewer.test.tsx
index bfd65added..66d5ace345 100644
--- a/clients/web/src/components/elements/ContentViewer/ContentViewer.test.tsx
+++ b/clients/web/src/components/elements/ContentViewer/ContentViewer.test.tsx
@@ -263,6 +263,39 @@ describe("ContentViewer", () => {
     expect(screen.getByRole("button", { name: "Copy" })).toBeInTheDocument();
   });
 
+  // The `resource` block branch used to render every embedded resource in a
+  // plain code block, so a prompt message carrying JSON did not inherit this
+  // migration even though the text-block branch did.
+  it("renders an embedded JSON resource in the JSON editor", () => {
+    const block: ContentBlock = {
+      type: "resource",
+      resource: {
+        uri: "file:///a.json",
+        mimeType: "application/json",
+        text: '{"a":1}',
+      },
+    };
+    renderWithMantine(<ContentViewer block={block} />);
+    expect(getAceText()).toBe('{\n  "a": 1\n}');
+  });
+
+  // Narrowed to JSON on purpose: routing every declared type through would put
+  // an embedded `text/html` resource into the sandboxed frame, which is a
+  // change to what a tool result is.
+  it("leaves a non-JSON embedded resource on the plain renderer", () => {
+    const block: ContentBlock = {
+      type: "resource",
+      resource: {
+        uri: "file:///a.html",
+        mimeType: "text/html",
+        text: "<p>hi</p>",
+      },
+    };
+    renderWithMantine(<ContentViewer block={block} />);
+    expect(screen.getByText("<p>hi</p>")).toBeInTheDocument();
+    expect(document.querySelector("iframe")).toBeNull();
+  });
+
   it("renders nothing when neither block nor contents is provided", () => {
     const { container } = renderWithMantine(<ContentViewer />);
     // MantineProvider injects a <style> node; assert no actual content renders.
diff --git a/clients/web/src/components/elements/ContentViewer/ContentViewer.tsx b/clients/web/src/components/elements/ContentViewer/ContentViewer.tsx
index 59789532aa..65d149eb84 100644
--- a/clients/web/src/components/elements/ContentViewer/ContentViewer.tsx
+++ b/clients/web/src/components/elements/ContentViewer/ContentViewer.tsx
@@ -482,18 +482,40 @@ function BlockContent({
       return <ImageContent data={block.data} mimeType={block.mimeType} />;
     case "audio":
       return <AudioContent data={block.data} mimeType={block.mimeType} />;
-    case "resource":
+    case "resource": {
+      // An embedded *text* resource that declares JSON goes through the same
+      // dispatch a text block does, so this branch inherits the JSON renderer
+      // rather than staying on a plain code block (#2151).
+      //
+      // Narrowed to JSON on purpose, the same way the Network tab's bodies are:
+      // routing every declared type through would also put an embedded
+      // `text/html` resource into the sandboxed frame and a `text/csv` one into
+      // a table. The Resources screen already renders resource contents that
+      // way, so doing it here too is defensible — but it is a change to what a
+      // tool result *is*, and belongs to whoever decides that rather than to
+      // this swap.
+      const embedded = "text" in block.resource ? block.resource : null;
+      if (embedded && getMimeKind(embedded.mimeType ?? "") === "json") {
+        return (
+          <TextualContent
+            text={embedded.text}
+            mimeType={embedded.mimeType}
+            copyable={copyable}
+            wrap={wrap}
+            jsonLabel={jsonLabel}
+          />
+        );
+      }
       return (
         <Stack gap="xs">
           <ContentWrapper>
             <CodeBlock>
-              {"text" in block.resource
-                ? block.resource.text
-                : `[blob: ${block.resource.uri}]`}
+              {embedded ? embedded.text : `[blob: ${block.resource.uri}]`}
             </CodeBlock>
           </ContentWrapper>
         </Stack>
       );
+    }
     case "resource_link":
       // Static metadata only. The interactive, read-on-demand presentation
       // lives in the `groups/ResourceLink` group, rendered by content-block
diff --git a/clients/web/src/utils/jsonObjectDraft.test.ts b/clients/web/src/utils/jsonObjectDraft.test.ts
index d9fb4462b2..535deb74ab 100644
--- a/clients/web/src/utils/jsonObjectDraft.test.ts
+++ b/clients/web/src/utils/jsonObjectDraft.test.ts
@@ -78,9 +78,26 @@ describe("findUnsendableNumberLiteral", () => {
     },
   );
 
+  // A nonzero literal that parses to zero anyway: the digit comparison skips it
+  // for being exponent-form, and it is not negative zero, so nothing else here
+  // would see a document that says one number and sends none of it.
+  it.each(["1e-400", "-1e-400", "0.00001e-400", "9e-999"])(
+    "rejects a literal that underflows to zero: %s",
+    (literal) => {
+      expect(findUnsendableNumberLiteral(`{"n":${literal}}`)).toBe(literal);
+    },
+  );
+
+  // Subnormal but representable — a real value, not an underflow to nothing.
+  it("accepts a subnormal that still parses to something", () => {
+    expect(findUnsendableNumberLiteral('{"n":1e-320}')).toBeNull();
+  });
+
   it("accepts a positive zero", () => {
     expect(findUnsendableNumberLiteral('{"n":0}')).toBeNull();
     expect(findUnsendableNumberLiteral('{"n":0.0}')).toBeNull();
+    // Written as zero, so it is zero — not an underflow.
+    expect(findUnsendableNumberLiteral('{"n":0e-400}')).toBeNull();
   });
 
   it("says nothing about text that is not JSON", () => {
diff --git a/clients/web/src/utils/jsonObjectDraft.ts b/clients/web/src/utils/jsonObjectDraft.ts
index e3c722ed28..7dc26fddcd 100644
--- a/clients/web/src/utils/jsonObjectDraft.ts
+++ b/clients/web/src/utils/jsonObjectDraft.ts
@@ -41,9 +41,10 @@ export function isJsonObject(value: unknown): value is StrictJsonObject {
  * Only integer literals written out in full are checked for lost digits. An
  * exponent or a fraction is a double by nature and is sent as the double it
  * parsed to, so nothing is lost between typing and sending — and `{"n":1e308}`
- * stays acceptable, which `parseJsonObjectDraft`'s own tests pin. Negative zero
- * is the exception, and is checked in every spelling: there the loss happens on
- * the way *out*, not on the way in.
+ * stays acceptable, which `parseJsonObjectDraft`'s own tests pin. The two
+ * exceptions are checked in every spelling: negative zero, where the loss
+ * happens on the way *out*, and underflow, where a nonzero literal parses to
+ * zero on the way in.
  */
 export function findUnsendableNumberLiteral(text: string): string | null {
   for (const literal of jsonNumberLiterals(text)) {
@@ -51,6 +52,13 @@ export function findUnsendableNumberLiteral(text: string): string | null {
     // exactly, so the digit comparison below has nothing to say about it, but
     // `JSON.stringify` writes it as `0`: the sign is lost on the way out.
     if (Object.is(Number(literal), -0)) return literal;
+    // Underflow: a literal with a nonzero mantissa that parses to zero anyway,
+    // `1e-400` being the shape of it. The digit comparison skips it for being
+    // exponent-form, and it is not negative zero, so nothing else here sees a
+    // document that says one number and sends none of it.
+    if (Number(literal) === 0 && /[1-9]/.test(mantissaOf(literal))) {
+      return literal;
+    }
     if (!/^-?\d+$/.test(literal)) continue;
     // BigInt on both sides, so the comparison is exact: `Number(literal)` is an
     // integer-valued double, and converting it back shows what survived.
@@ -59,6 +67,15 @@ export function findUnsendableNumberLiteral(text: string): string | null {
   return null;
 }
 
+/**
+ * The part of a numeric literal before its exponent — `1` of `1e-400`, `-0.0`
+ * of `-0.0e5`. Whether it holds a nonzero digit is what separates a literal
+ * that underflowed to zero from one that was written as zero.
+ */
+function mantissaOf(literal: string): string {
+  return literal.split(/[eE]/)[0];
+}
+
 /** Matches one JSON number token, anchored where the scan currently stands. */
 const JSON_NUMBER = /-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?/y;