diff --git a/clients/web/README.md b/clients/web/README.md
index 372c960add..1ea62b2399 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,34 @@ 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**, 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)).
 
-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 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:
+
+- **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..66d5ace345 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,90 @@ 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();
+  });
+
+  // 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(
+      <ContentViewer block={block} mimeType="application/json" copyable />,
+    );
+    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", () => {
@@ -274,15 +354,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..65d149eb84 100644
--- a/clients/web/src/components/elements/ContentViewer/ContentViewer.tsx
+++ b/clients/web/src/components/elements/ContentViewer/ContentViewer.tsx
@@ -10,10 +10,12 @@ 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,
+  formatJsonDocument,
   getMimeKind,
   isSafeHref,
   isTextualKind,
@@ -58,8 +60,27 @@ 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;
 }
 
+/**
+ * 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}`;
 }
@@ -161,15 +182,95 @@ 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,
+  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={label}
+        value={formatted}
+        readOnly
+        // 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={JSON_DISPLAY_MAX_LINES}
+      />
+    </CopyableWrapper>
+  );
+}
+
 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.
+  //
+  // 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 (
     <CopyableWrapper copyable={copyable} copyValue={text}>
@@ -199,23 +300,40 @@ 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) {
     case "markdown":
       return <MarkdownContent text={text} copyable={copyable} />;
     case "json":
-      return (
-        <HighlightedContent
-          code={formatJson(text)}
-          language="json"
-          copyValue={text}
+      // `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}
+          // 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}
+          jsonLabel={jsonLabel}
         />
       );
     case "xml":
@@ -249,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}
+        />
+      );
   }
 }
 
@@ -277,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 (
@@ -290,6 +417,7 @@ function ResourceContent({
         mimeType={mimeType}
         copyable={copyable}
         wrap={wrap}
+        jsonLabel={jsonLabel}
       />
     );
   }
@@ -318,6 +446,7 @@ function ResourceContent({
         mimeType={mimeType}
         copyable={copyable}
         wrap={wrap}
+        jsonLabel={jsonLabel}
       />
     );
   }
@@ -330,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":
@@ -344,24 +475,47 @@ function BlockContent({
           mimeType={mimeType}
           copyable={copyable}
           wrap={wrap}
+          jsonLabel={jsonLabel}
         />
       );
     case "image":
       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
@@ -384,6 +538,7 @@ export function ContentViewer({
   copyable = false,
   mimeType,
   wrap = true,
+  jsonLabel = "JSON content",
 }: ContentViewerProps) {
   if (contents) {
     const effective =
@@ -394,6 +549,7 @@ export function ContentViewer({
         mimeType={effective}
         copyable={copyable}
         wrap={wrap}
+        jsonLabel={jsonLabel}
       />
     );
   }
@@ -404,6 +560,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 26ab07f5e8..d2997c2b47 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,
+  formatJsonDocument,
   looksLikeJson,
   PREVIEW_HTML_CSP,
   tryDecodeBase64ToBytes,
@@ -102,6 +103,35 @@ 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 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.
+  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", () => {
@@ -112,6 +142,38 @@ describe("looksLikeJson", () => {
   });
 });
 
+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.
+  // 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();
+    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(formatJsonDocument("42")).toBeNull();
+  });
+});
+
 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..670fa3b72b 100644
--- a/clients/web/src/components/elements/ContentViewer/contentViewerUtils.ts
+++ b/clients/web/src/components/elements/ContentViewer/contentViewerUtils.ts
@@ -1,8 +1,16 @@
 /**
- * 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 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 {
+  findDuplicateObjectKey,
+  findUnsendableNumberLiteral,
+} from "../../../utils/jsonObjectDraft";
 
 /**
  * The renderer family a MIME type maps to. `ContentViewer` switches on this to
@@ -130,18 +138,82 @@ 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 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) &&
+    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.
+    findDuplicateObjectKey(text) === null
+  );
+}
+
 /** Heuristic: does this plain text (no MIME) look like a JSON document? */
 export function looksLikeJson(text: string): boolean {
   const trimmed = text.trimStart();
   return trimmed.startsWith("{") || trimmed.startsWith("[");
 }
 
+/**
+ * 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
+ * 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.
+ *
+ * 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 formatJsonDocument(text: string): string | null {
+  if (!looksLikeJson(text)) return null;
+  try {
+    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;
+  }
+}
+
 /**
  * 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..356150b6aa
--- /dev/null
+++ b/clients/web/src/components/elements/JsonEditor/JsonEditor.stories.tsx
@@ -0,0 +1,146 @@
+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: () => {},
+  },
+};
+
+/**
+ * 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",
+    label: "Payload",
+    value: SAMPLE,
+    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 },
+        ],
+      },
+    },
+  },
+};
+
+/**
+ * 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..f50b36b077
--- /dev/null
+++ b/clients/web/src/components/elements/JsonEditor/JsonEditor.test.tsx
@@ -0,0 +1,249 @@
+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();
+  });
+
+  // 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.
+    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();
+    });
+
+    // 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
+          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..751c1ecf1e
--- /dev/null
+++ b/clients/web/src/components/elements/JsonEditor/JsonEditor.tsx
@@ -0,0 +1,300 @@
+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 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 (!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
+    // 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");
+    }
+
+    // `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, ariaLabel]);
+
+  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..e2d1682633
--- /dev/null
+++ b/clients/web/src/components/groups/EditReplayModal/EditReplayModal.test.tsx
@@ -0,0 +1,306 @@
+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",
+  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();
+  });
+
+  // `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();
+  });
+
+  // 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();
+  });
+
+  // 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();
+  });
+
+  // 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();
+  });
+
+  // `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(/would not arrive as written/)).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();
+  });
+
+  // `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();
+  });
+
+  // `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();
+    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 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" }} />,
+    );
+    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..bcc12cc49e
--- /dev/null
+++ b/clients/web/src/components/groups/EditReplayModal/EditReplayModal.tsx
@@ -0,0 +1,245 @@
+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 {
+  duplicateKeyError,
+  findDuplicateObjectKey,
+  findUnsendableNumberLiteral,
+  isJsonObject,
+  unsendableNumberError,
+} from "../../../utils/jsonObjectDraft";
+import {
+  replayableParams,
+  reshapedReplayParam,
+} from "../../../lib/protocolReplay";
+import { isSerializableJson } from "@inspector/core/json/jsonUtils.js";
+
+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 — 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[];
+  /**
+   * 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.
+   */
+  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
+   * {@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" });
+
+// 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.
+ *
+ * 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. 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,
+  tools: Tool[] | undefined,
+):
+  | { 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 (`{ … }`)" };
+  }
+  // `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",
+    };
+  }
+  const unsendable = findUnsendableNumberLiteral(text);
+  if (unsendable !== null) {
+    return { ok: false, error: unsendableNumberError(unsendable) };
+  }
+  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
+  // 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`,
+    };
+  }
+  // Surviving the key check is not the same as being sent as written: see
+  // `reshapedReplayParam` for the two ways `arguments` does not.
+  // 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 };
+  }
+  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,
+  droppedParamKeys,
+  tools,
+  onSend,
+  onClose,
+}: Omit<EditReplayModalProps, "opened">) {
+  const [draft, setDraft] = useState(() =>
+    params === undefined ? "" : JSON.stringify(params, null, 2),
+  );
+  const parsed = parseParamsDraft(method, draft, tools);
+
+  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"
+        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,
+  droppedParamKeys,
+  tools,
+  onSend,
+  onClose,
+}: EditReplayModalProps) {
+  return (
+    <Modal opened={opened} onClose={onClose} title="Edit and replay" size="lg">
+      <EditReplayForm
+        method={method}
+        params={params}
+        droppedParamKeys={droppedParamKeys}
+        tools={tools}
+        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..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,
@@ -8,6 +9,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 +28,13 @@ 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;
+  /**
+   * 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;
 }
 
@@ -122,6 +130,7 @@ function formatRoundLabel(index: number): string {
 }
 
 export function MrtrConversation({
+  tools,
   requestState,
   rounds,
   pinnedIds,
@@ -182,8 +191,11 @@ 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)}
+                  tools={tools}
                 />
               </Stack>
             ))}
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 d0ea1fc425..e42d841cec 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, getAceTextByLabel } from "../../../test/aceEditor";
 import { NetworkEntry } from "./NetworkEntry";
 
 const baseEntry: FetchRequestEntry = {
@@ -208,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);
@@ -232,28 +262,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/NetworkEntry/NetworkEntry.tsx b/clients/web/src/components/groups/NetworkEntry/NetworkEntry.tsx
index 7ef790bc54..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";
@@ -371,9 +372,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
@@ -384,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
@@ -413,7 +438,14 @@ function BodyPreview({
   }
 
   if (!hasSecrets) {
-    return <ContentViewer block={{ type: "text", text: body }} copyable />;
+    return (
+      <ContentViewer
+        block={{ type: "text", text: body }}
+        copyable
+        mimeType={jsonMimeType}
+        jsonLabel={`${label} JSON`}
+      />
+    );
   }
 
   const shown = revealed ? body : masked;
@@ -432,7 +464,14 @@ function BodyPreview({
           {revealed ? "Hide" : "Reveal"}
         </RevealButton>
       </Group>
-      <ContentViewer block={{ type: "text", text: shown }} copyable />
+      <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>
   );
 }
@@ -587,6 +626,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 +644,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 45d658c42c..c7f19756e9 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,106 @@ 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" },
+      });
+    });
+
+    // 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();
+      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(
@@ -340,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 0df02f05ba..a6abd2e731 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";
@@ -21,6 +22,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 +35,22 @@ import {
   extractSubscriptionId,
 } from "../protocolUtils.js";
 import { isReplayableProtocolMethod } from "../../../utils/replayableProtocolMethods";
+import {
+  replayableParams,
+  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
@@ -58,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({
@@ -194,6 +214,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;
@@ -304,13 +335,17 @@ export function ProtocolEntry({
   embedded = false,
   onRevealInNetwork,
   correlatedHttpStatus,
+  tools,
 }: 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 editableParams = replayableParams(method, requestParams);
   const resultType = extractResultType(entry);
   const subscriptionId = extractSubscriptionId(entry);
 
@@ -363,6 +398,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 +444,7 @@ export function ProtocolEntry({
                 )}
               </HeaderCluster>
               <ControlsCluster>
-                {canReplay && <ReplayButton onReplay={onReplay} />}
+                {replayControls}
                 <PinToggle pinned={isPinned} onToggle={onTogglePin} />
                 <ExpandToggle
                   expanded={isExpanded}
@@ -436,7 +479,7 @@ export function ProtocolEntry({
             </HeaderRow>
 
             <ToggleRow>
-              {canReplay && <ReplayButton onReplay={onReplay} />}
+              {replayControls}
               <PinToggle pinned={isPinned} onToggle={onTogglePin} />
               <ExpandToggle
                 expanded={isExpanded}
@@ -446,6 +489,22 @@ export function ProtocolEntry({
           </>
         )}
 
+        {canReplay && (
+          <EditReplayModal
+            opened={isEditingReplay}
+            method={method}
+            // 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}
+            // 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)}
+          />
+        )}
+
         <Collapse in={isExpanded}>
           <Stack gap="sm">
             <Divider />
@@ -464,15 +523,19 @@ 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
+                  // 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>
             )}
@@ -485,6 +548,7 @@ export function ProtocolEntry({
                     text: serializeMessage(entry.response),
                   }}
                   copyable
+                  jsonLabel={`${method} response JSON`}
                 />
               </Stack>
             )}
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..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,
@@ -9,6 +10,7 @@ import {
   Title,
   UnstyledButton,
 } from "@mantine/core";
+import type { ReplayParamsOverride } from "../../../lib/protocolReplay";
 import type { ProtocolEra } from "@modelcontextprotocol/client";
 import type {
   MessageEntry,
@@ -47,7 +49,13 @@ 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;
+  /**
+   * 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;
@@ -235,6 +243,7 @@ function matchesFilters(
 }
 
 export function ProtocolListPanel({
+  tools,
   entries,
   pinnedIds,
   searchText,
@@ -318,6 +327,7 @@ export function ProtocolListPanel({
           embedded={embedded}
           onReplay={onReplay}
           onTogglePin={onTogglePin}
+          tools={tools}
         />
       ) : (
         <ProtocolEntry
@@ -326,7 +336,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)
@@ -334,6 +344,7 @@ export function ProtocolListPanel({
               : undefined
           }
           correlatedHttpStatus={correlatedStatusById?.get(row.entry.id)}
+          tools={tools}
         />
       ),
     );
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..fde96a823b 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,16 +758,67 @@ 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();
   });
 
+  // "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(/^`9007199254740993` would not arrive as written/),
+    ).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();
+  });
+
+  // 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",
@@ -785,7 +833,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 +843,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 +871,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 +894,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 +1383,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 +1391,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 +1427,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 +1439,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 +1469,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 +1483,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 +1499,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 +1507,7 @@ describe("SchemaForm draft validity (#2020)", () => {
       />,
     );
 
-    await user.type(screen.getByLabelText(/Config/), "x");
+    await setAceTextByLabel(/Config/, "x");
     expect(onValidityChange).toHaveBeenLastCalledWith(true);
 
     unmount();
@@ -1472,11 +1515,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 +1550,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 +1563,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 +1582,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 +1605,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 +1659,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 +1673,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 +1721,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 +1733,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 +1759,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 +1814,391 @@ 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();
+  });
+
+  // `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();
+  });
+
+  // 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(/would not arrive as written/)).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
+  // 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.
+  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..4ea9fb953f 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,15 @@ import {
 } from "react";
 import { ClearButton } from "../../elements/ClearButton/ClearButton";
 import { EnlargeButton } from "../../elements/EnlargeButton/EnlargeButton";
+import { JsonEditor } from "../../elements/JsonEditor/JsonEditor";
+import {
+  duplicateKeyError,
+  findDuplicateObjectKey,
+  findUnsendableNumberLiteral,
+  isJsonObject,
+  unsendableNumberError,
+} from "../../../utils/jsonObjectDraft";
+import { isSerializableJson } from "@inspector/core/json/jsonUtils.js";
 import { useValueChange } from "../../../hooks/useValueChange";
 import type {
   InspectorFormSchema,
@@ -62,9 +71,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`
@@ -266,16 +279,67 @@ 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`, 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 {
-    return JSON.parse(text);
+    parsed = JSON.parse(text);
   } catch {
-    return undefined;
+    return "Not valid JSON — this field will be omitted";
+  }
+  if (!isSerializableJson(parsed)) {
+    return "Numbers must be finite — 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) {
+    return `${duplicateKeyError(duplicate)} — this field will be omitted`;
+  }
+  return null;
 }
 
 /** Structural equality for the draft/value re-sync, via canonical JSON. */
@@ -407,23 +471,24 @@ 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 (
-    <SchemaJsonInput
+    <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) => {
         setDraft(text);
         onChange(parseJsonDraft(text));
@@ -548,6 +613,134 @@ 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 (`{ … }`)",
+    };
+  }
+  // `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",
+    };
+  }
+  // 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.
+  const unsendable = findUnsendableNumberLiteral(text);
+  if (unsendable !== null) {
+    return { ok: false, error: unsendableNumberError(unsendable) };
+  }
+  const duplicate = findDuplicateObjectKey(text);
+  if (duplicate !== null) {
+    return { ok: false, error: duplicateKeyError(duplicate) };
+  }
+  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 +780,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 +816,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 +874,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 +1009,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);
@@ -801,6 +1019,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.
    *
@@ -1217,6 +1456,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 +1487,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 +1510,25 @@ export function SchemaForm({
           }
         />
       )}
-      {Object.entries(properties).map(([fieldName, fieldSchema]) =>
-        renderField(fieldName, fieldSchema),
+      {rawJsonMode ? (
+        // 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={resetKey ?? "raw-json"}
+          values={values}
+          onChange={handleRawArgumentsChange}
+          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.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",
     );
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..c25a9f8744 100644
--- a/clients/web/src/components/screens/ProtocolScreen/ProtocolScreen.tsx
+++ b/clients/web/src/components/screens/ProtocolScreen/ProtocolScreen.tsx
@@ -1,5 +1,7 @@
 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";
 import type {
   MessageEntry,
@@ -22,7 +24,13 @@ 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;
+  /**
+   * 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;
@@ -69,6 +77,7 @@ const SidebarCard = Card.withProps({
 });
 
 export function ProtocolScreen({
+  tools,
   entries,
   pinnedIds,
   protocolEra,
@@ -154,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 43749729c5..05336feb8d 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;
@@ -1254,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/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.test.ts b/clients/web/src/lib/protocolReplay.test.ts
index a3b90fb202..5e7f48f18f 100644
--- a/clients/web/src/lib/protocolReplay.test.ts
+++ b/clients/web/src/lib/protocolReplay.test.ts
@@ -4,6 +4,8 @@ import type { MessageEntry } from "@inspector/core/mcp/types.js";
 import {
   messagesToLogEntries,
   replayProtocolRequest,
+  replayableParams,
+  reshapedReplayParam,
   type ReplayClient,
 } from "./protocolReplay";
 
@@ -61,6 +63,253 @@ 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"] });
+  });
+
+  // `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", () => {
+    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: [],
+    });
+  });
+});
+
+// `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/);
+  });
+
+  // `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();
+  });
+
+  // `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();
+    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 2eff86a542..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
@@ -58,6 +59,178 @@ 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;
+
+/**
+ * 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.
+      //
+      // 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.
+      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,
+  };
+}
+
+/**
+ * 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, 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
+ *   `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.
+ * - 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.
+ * - 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
+ * toast, so those fail visibly rather than silently.
+ */
+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;
+  if (!Object.hasOwn(params, "arguments")) return null;
+  const args = params.arguments;
+  const isRecord =
+    args !== null && typeof args === "object" && !Array.isArray(args);
+  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`;
+    }
+  }
+  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/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);
+  });
+}
diff --git a/clients/web/src/utils/jsonObjectDraft.test.ts b/clients/web/src/utils/jsonObjectDraft.test.ts
index 51e835a425..535deb74ab 100644
--- a/clients/web/src/utils/jsonObjectDraft.test.ts
+++ b/clients/web/src/utils/jsonObjectDraft.test.ts
@@ -1,5 +1,155 @@
 import { describe, it, expect } from "vitest";
-import { parseJsonObjectDraft } from "./jsonObjectDraft";
+import {
+  findDuplicateObjectKey,
+  findUnsendableNumberLiteral,
+  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("findUnsendableNumberLiteral", () => {
+  it("accepts whole numbers inside the safe range", () => {
+    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(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(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(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(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(findUnsendableNumberLiteral('{"id":"9007199254740993"}')).toBeNull();
+  });
+
+  it("ignores digits inside a key, and an escaped quote inside a string", () => {
+    expect(findUnsendableNumberLiteral('{"9007199254740993":1}')).toBeNull();
+    expect(
+      findUnsendableNumberLiteral('{"a":"say \\"9007199254740993\\"","b":1}'),
+    ).toBeNull();
+  });
+
+  it("looks through arrays and nesting", () => {
+    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);
+    },
+  );
+
+  // 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", () => {
+    expect(findUnsendableNumberLiteral("")).toBeNull();
+    expect(findUnsendableNumberLiteral("{")).toBeNull();
+  });
+});
+
+// `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", () => {
@@ -43,6 +193,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 731d6b8f9c..7dc26fddcd 100644
--- a/clients/web/src/utils/jsonObjectDraft.ts
+++ b/clients/web/src/utils/jsonObjectDraft.ts
@@ -20,6 +20,200 @@ export function isJsonObject(value: unknown): value is StrictJsonObject {
   return value !== null && typeof value === "object" && !Array.isArray(value);
 }
 
+/**
+ * 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
+ * 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.
+ *
+ * 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.
+ *
+ * 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. 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)) {
+    // 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;
+    // 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.
+    if (BigInt(literal) !== BigInt(Number(literal))) return literal;
+  }
+  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;
+
+/**
+ * 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;
+  while (index < text.length) {
+    const char = text[index];
+    if (char === '"') {
+      index = readStringToken(text, index).next;
+      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;
+  }
+}
+
+/**
+ * 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 findUnsendableNumberLiteral}.
+ *
+ * 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 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.
  *
@@ -60,5 +254,13 @@ export function parseJsonObjectDraft(text: string): JsonObjectDraft {
         "Numbers must be finite — a value like `1e400` overflows and would be sent as null",
     };
   }
+  const unsendable = findUnsendableNumberLiteral(text);
+  if (unsendable !== null) {
+    return { ok: false, error: unsendableNumberError(unsendable) };
+  }
+  const duplicate = findDuplicateObjectKey(text);
+  if (duplicate !== null) {
+    return { ok: false, error: duplicateKeyError(duplicate) };
+  }
   return { ok: true, value: parsed };
 }