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

Refactor renamed the component groups to something less obtuse:

Browse source 
Elements -> Groups -> Screens -> Views
This commit is contained in:
cliffhall 2026-03-28 12:58:47 -04:00
commit dd46acba87
2 changed files with 151 additions and 144 deletions
Download patch file Download diff file Expand all files Collapse all files

96
clients/web/src/components/groups/ServerInfoContent/ServerInfoContent.stories.tsx Normal file
View file

@ -0,0 +1,96 @@
import type { Meta, StoryObj } from "@storybook/react-vite";
import { ServerInfoContent } from "./ServerInfoContent";
const meta: Meta<typeof ServerInfoContent> = {
title: "Groups/ServerInfoContent",
component: ServerInfoContent,
};
export default meta;
type Story = StoryObj<typeof ServerInfoContent>;
export const FullCapabilities: Story = {
args: {
name: "Everything Server",
version: "2.1.0",
protocolVersion: "2025-03-26",
transport: "stdio",
serverCapabilities: [
{ name: "Tools", supported: true, count: 12 },
{ name: "Resources", supported: true, count: 8 },
{ name: "Prompts", supported: true, count: 5 },
{ name: "Logging", supported: true },
{ name: "Completions", supported: true },
{ name: "Sampling", supported: true },
{ name: "Elicitation", supported: true },
],
clientCapabilities: [
{ name: "Roots", supported: true, count: 3 },
{ name: "Sampling", supported: true },
{ name: "Elicitation", supported: true },
{ name: "Notifications", supported: true },
{ name: "Experimental", supported: true },
],
},
};
export const MinimalCapabilities: Story = {
args: {
name: "Simple Server",
version: "1.0.0",
protocolVersion: "2025-03-26",
transport: "http",
serverCapabilities: [
{ name: "Tools", supported: true, count: 2 },
{ name: "Resources", supported: false },
{ name: "Prompts", supported: false },
],
clientCapabilities: [
{ name: "Roots", supported: true },
{ name: "Sampling", supported: false },
{ name: "Elicitation", supported: false },
],
},
};
export const WithInstructions: Story = {
args: {
name: "Guided Server",
version: "1.5.0",
protocolVersion: "2025-03-26",
transport: "stdio",
serverCapabilities: [
{ name: "Tools", supported: true, count: 4 },
{ name: "Resources", supported: true, count: 2 },
{ name: "Prompts", supported: true, count: 1 },
],
clientCapabilities: [
{ name: "Roots", supported: true },
{ name: "Sampling", supported: true },
],
instructions:
"This server provides access to the project management system. Use the list_projects tool first to discover available projects before querying tasks. Rate limiting applies: max 60 requests per minute.",
},
};
export const WithOAuth: Story = {
args: {
name: "Authenticated Server",
version: "3.0.0",
protocolVersion: "2025-03-26",
transport: "http",
serverCapabilities: [
{ name: "Tools", supported: true, count: 6 },
{ name: "Resources", supported: true, count: 3 },
],
clientCapabilities: [
{ name: "Roots", supported: true },
{ name: "Sampling", supported: false },
],
oauthDetails: {
authUrl: "https://auth.example.com/oauth2/authorize",
scopes: ["read", "write", "admin"],
accessToken: "eyJhbGciOiJSUzI1NiIs...truncated",
},
},
};

125
clients/web/src/components/groups/ServerInfoContent/ServerInfoContent.tsx Normal file
View file

@ -0,0 +1,125 @@
import {
Badge,
Blockquote,
Code,
SimpleGrid,
Stack,
Text,
Title,
} from "@mantine/core";
import { CapabilityItem } from "../../elements/CapabilityItem/CapabilityItem";
export interface CapabilityInfo {
name: string;
supported: boolean;
count?: number;
}
export interface ServerInfoContentProps {
name: string;
version: string;
protocolVersion: string;
transport: string;
serverCapabilities: CapabilityInfo[];
clientCapabilities: CapabilityInfo[];
instructions?: string;
oauthDetails?: { authUrl?: string; scopes?: string[]; accessToken?: string };
}
const ValueText = Text.withProps({
size: "sm",
fw: 600,
});
function formatScopes(scopes: string[]): string {
return scopes.join(", ");
}
export function ServerInfoContent({
name,
version,
protocolVersion,
transport,
serverCapabilities,
clientCapabilities,
instructions,
oauthDetails,
}: ServerInfoContentProps) {
return (
<Stack gap="md">
<Title order={3}>Server Information</Title>
<SimpleGrid cols={2}>
<Text size="sm">Name</Text>
<ValueText>{name}</ValueText>
<Text size="sm">Version</Text>
<ValueText>{version}</ValueText>
<Text size="sm">Protocol</Text>
<ValueText>{protocolVersion}</ValueText>
<Text size="sm">Transport</Text>
<Badge variant="outline">{transport}</Badge>
</SimpleGrid>
<SimpleGrid cols={2}>
<Stack gap="xs">
<Title order={5}>Server Capabilities</Title>
{serverCapabilities.map((cap) => (
<CapabilityItem
key={cap.name}
name={cap.name}
supported={cap.supported}
count={cap.count}
/>
))}
</Stack>
<Stack gap="xs">
<Title order={5}>Client Capabilities</Title>
{clientCapabilities.map((cap) => (
<CapabilityItem
key={cap.name}
name={cap.name}
supported={cap.supported}
count={cap.count}
/>
))}
</Stack>
</SimpleGrid>
{instructions && (
<Stack gap="xs">
<Title order={5}>Server Instructions</Title>
<Blockquote>{instructions}</Blockquote>
</Stack>
)}
{oauthDetails && (
<Stack gap="xs">
<Title order={5}>OAuth Details</Title>
<Stack gap="xs">
{oauthDetails.authUrl && (
<SimpleGrid cols={2}>
<Text size="sm">Auth URL</Text>
<Code>{oauthDetails.authUrl}</Code>
</SimpleGrid>
)}
{oauthDetails.scopes && oauthDetails.scopes.length > 0 && (
<SimpleGrid cols={2}>
<Text size="sm">Scopes</Text>
<ValueText>{formatScopes(oauthDetails.scopes)}</ValueText>
</SimpleGrid>
)}
{oauthDetails.accessToken && (
<SimpleGrid cols={2}>
<Text size="sm">Access Token</Text>
<Code>{oauthDetails.accessToken}</Code>
</SimpleGrid>
)}
</Stack>
</Stack>
)}
</Stack>
);
}