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

fix: bold the labels, not the values, and give Connection Info's URLs full width

Browse source 
Connection Info rendered every label/value row as a plain label against a bold
value. That is backwards for a reference panel: the label is the fixed
scaffolding a reader scans down, the value is what differs per connection, and
bolding every value means nothing stands out. Reversed across the whole modal —
Server Implementation, Discovery and OAuth Details, plus the token captions —
rather than in one section, since two halves disagreeing is worse than either
convention.

Client ID and Auth URL were a Code block in the right half of a two-column grid,
so a long value got roughly half the modal width. A CIMD client id IS a URL, so
it is long by construction, and it broke mid-token —
`…/client-metadata.` / `json` — which reads as a rendering fault rather than as
one value. Both now put their label on its own line with the value full width
beneath, the way OAuthTokenField already lays out a token, and neither carries
an inset surface any more: the grey framed a value that is simply the answer to
"Client ID", not a quoted blob needing separation from prose.

The transparent treatment is a new `wrapping-plain` theme variant rather than a
change to `wrapping`. That one is shared with ElicitationUrlPanel,
ListLoadError, MalformedItemsWarning and the CSV fallback, where the inset is
doing real work; a test asserts `wrapping` keeps its surface so those consumers
cannot be changed by accident.

Closes #2328

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01GfHQ8vMm5NBgzbUJ6UwxmB
Signed-off-by: cliffhall <cliff@futurescale.com>
This commit is contained in:
cliffhall 2026-09-11 09:30:17 -04:00
commit 82b13a1a12
1 changed files with 168 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

58
clients/web/src/components/groups/ConnectionInfoContent/ConnectionInfoContent.test.tsx
View file

@ -567,6 +567,64 @@ describe("ConnectionInfoContent", () => {
expect(screen.getByText("token-123")).toBeInTheDocument();
});
it("weights labels bold and values normal, in both halves of the modal", () => {
renderWithMantine(
<ConnectionInfoContent
initializeResult={fullResult}
clientCapabilities={fullClientCaps}
transport="streamable-http"
oauth={{
protocol: "standard",
authorized: true,
clientId: "client-abc",
scopes: ["read"],
}}
/>,
);
// The convention is the whole point of #2328: the label is the fixed
// scaffolding a reader scans down, the value is what differs. Asserted in
// Server Implementation *and* OAuth Details, because the defect being
// guarded against is the two halves disagreeing — checking one alone would
// pass on a modal that is internally inconsistent.
for (const label of ["Name", "Protocol", "Client ID", "Scopes"]) {
expect(screen.getAllByText(label)[0]).toHaveStyle({ fontWeight: "600" });
}
for (const value of ["Everything Server", "read"]) {
expect(screen.queryByText(value)?.style.fontWeight ?? "").not.toBe("600");
}
});
it("gives Client ID and Auth URL the full width, with no inset surface", () => {
renderWithMantine(
<ConnectionInfoContent
initializeResult={fullResult}
clientCapabilities={fullClientCaps}
transport="streamable-http"
oauth={{
protocol: "standard",
authorized: true,
clientId:
"http://127.0.0.1:8093/client-metadata.json?profile=long-enough-to-wrap",
authUrl: "https://auth.example.com/authorize",
}}
/>,
);
// A CIMD client id IS a URL, so it is long by construction. In the
// two-column grid it got half the modal and broke mid-token
// (`…/client-metadata.` / `json`), which reads as a rendering fault rather
// than as one value.
for (const value of [
"http://127.0.0.1:8093/client-metadata.json?profile=long-enough-to-wrap",
"https://auth.example.com/authorize",
]) {
expect(screen.getByText(value)).toHaveStyle({
backgroundColor: "transparent",
});
}
});
it("renders EMA idp session when provided", () => {
renderWithMantine(
<ConnectionInfoContent