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

web: server-screen, footer, monitoring-sidebar, and responsive-header polish (#1683)
Some checks failed
Run install, format, lint, build, and test on every push / build (push) Has been cancelled
Details
Run install, format, lint, build, and test on every push / publish (push) Has been cancelled
Details
Run install, format, lint, build, and test on every push / publish-github-container-registry (push) Has been cancelled
Details

Browse source 
Closes #1682

Server-screen, footer, monitoring-sidebar, and responsive-header polish: connected-card highlight/scroll + Failed status, footer row + MCP-docs tooltip, Servers box, card-surface refresh (gray-0 entry cards + white code), monitoring-sidebar layout, a 1280px responsive floor honored by the header (always-icon Disconnect, always-SegmentedControl tabs, 1500px status text, always-available sidebar), a horizontally-scrollable long resource URI in the compact Protocol entry, and copy buttons beside resource URIs / network URLs.

🤖 Generated with [Claude Code](https://claude.com/claude-code)
This commit is contained in:
Cliff Hall 2026-07-14 08:55:39 -04:00 • committed by GitHub
commit 8d33e76f97
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 707 additions and 274 deletions
Download patch file Download diff file Expand all files Collapse all files

50
clients/web/src/components/groups/ProtocolEntry/ProtocolEntry.stories.tsx
View file

@ -1,4 +1,5 @@
import type { Meta, StoryObj } from "@storybook/react-vite";
import { Box } from "@mantine/core";
import type { MessageEntry } from "../../../../../../core/mcp/types.js";
import { fn } from "storybook/test";
import { ProtocolEntry } from "./ProtocolEntry";
@ -76,6 +77,36 @@ const resourceReadEntry: MessageEntry = {
duration: 45,
};
// A resources/read whose URI overflows the narrow monitoring column, so the
// embedded header shows it in a horizontal scroll area rather than truncating.
const longUriResourceEntry: MessageEntry = {
id: "req-5",
timestamp: new Date("2026-03-17T10:35:00Z"),
direction: "request",
origin: "client",
message: {
jsonrpc: "2.0",
id: 5,
method: "resources/read",
params: {
uri: "demo://resource/static/document/architecture/overview/system-design-and-data-flow.md",
},
},
response: {
jsonrpc: "2.0",
id: 5,
result: {
contents: [
{
uri: "demo://resource/static/document/architecture/overview/system-design-and-data-flow.md",
text: "# Architecture Overview",
},
],
},
},
duration: 41,
};
const pendingEntry: MessageEntry = {
id: "req-4",
timestamp: new Date("2026-03-17T10:34:00Z"),
@ -128,3 +159,22 @@ export const Pending: Story = {
isListExpanded: false,
},
};
// Embedded (monitoring-sidebar) layout with a long resource URI: the target sits
// in a horizontal scroll area rather than truncating with an ellipsis. Wrapped
// in the pinned column's width so the overflow is visible.
export const EmbeddedLongUri: Story = {
args: {
entry: longUriResourceEntry,
isPinned: false,
isListExpanded: false,
embedded: true,
},
decorators: [
(Story) => (
<Box w={340}>
<Story />
</Box>
),
],
};