modelcontextprotocol/inspector
Watch
1
0
Fork
You've already forked inspector
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2

feat(web): use the Ace JSON editor everywhere, and restore the raw-JSON toggle

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

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

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

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

Closes #2151

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01UL9retfvAXRgvi6EWk4SY4
Signed-off-by: cliffhall <cliff@futurescale.com>
This commit is contained in:
cliffhall 2026-08-27 02:24:22 -04:00
commit 1a2a36f0b8
2 changed files with 2026 additions and 448 deletions
Download patch file Download diff file Expand all files Collapse all files

5
clients/web/src/components/groups/ProtocolListPanel/ProtocolListPanel.test.tsx
View file

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

5
clients/web/src/components/groups/ProtocolListPanel/ProtocolListPanel.tsx
View file

@ -9,6 +9,7 @@ import {
Title,
UnstyledButton,
} from "@mantine/core";
import type { ReplayParamsOverride } from "../../../lib/protocolReplay";
import type { ProtocolEra } from "@modelcontextprotocol/client";
import type {
MessageEntry,
@ -47,7 +48,7 @@ export interface ProtocolListPanelProps {
onClearSection: (section: ProtocolSectionName) => void;
/** Export just one section's entries. */
onExportSection: (section: ProtocolSectionName) => void;
onReplay: (id: string) => void;
onReplay: (id: string, overrideParams?: ReplayParamsOverride) => void;
onTogglePin: (id: string) => void;
sortDirection: SortDirection;
onSortChange: (next: SortDirection) => void;
@ -326,7 +327,7 @@ export function ProtocolListPanel({
isPinned={sectionPinned}
isListExpanded={!compact}
embedded={embedded}
onReplay={() => onReplay(row.entry.id)}
onReplay={(overrideParams) => onReplay(row.entry.id, overrideParams)}
onTogglePin={() => onTogglePin(row.entry.id)}
onRevealInNetwork={
onRevealInNetwork && revealableIds?.has(row.entry.id)