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

Phase 2: Refactor Server/Settings/ViewShell cluster to MCP SDK types

Browse source 
ServerCard: Replace flat scalar props (name, version, transport, status,
error) with grouped objects (config: MCPServerConfig, info?: Implementation,
connection: ConnectionState). Remove auto-connect useEffect — dumb
components must not self-dispatch side effects. Derive transport and
command/url from config.

ServerInfoContent: Replace flat props with initializeResult: InitializeResult
and clientCapabilities: ClientCapabilities from MCP SDK. Derive capability
lists by iterating the ServerCapabilities record.

ServerSettingsForm: Collapse flat setting props (connectionMode, headers,
metadata, timeouts, oauth*) into settings: InspectorServerSettings. Add
InspectorServerSettings type to core/mcp/types.ts.

ImportServerJsonPanel: Replace scattered scalar props (jsonContent,
selectedPackageIndex, serverName) with draft: InspectorServerJsonDraft.

ViewHeader: Replace serverName: string with serverInfo: Implementation.
Use ConnectionStatus from core types.

ConnectedView: Update to pass serverInfo: Implementation instead of
serverName. Use ConnectionStatus type.

Update all stories for ServerCard, ServerInfoContent, ServerSettingsForm,
ImportServerJsonPanel, ViewHeader, ServerListScreen, ConnectedView, and
UnconnectedView.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
cliffhall 2026-04-21 15:22:08 -04:00
commit 771a67ee20
1 changed files with 562 additions and 539 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,6 +1,31 @@
import type {
ClientCapabilities,
InitializeResult,
} from "@modelcontextprotocol/sdk/types.js";
import type { Meta, StoryObj } from "@storybook/react-vite";
import { ServerInfoContent } from "./ServerInfoContent";
const fullResult: InitializeResult = {
protocolVersion: "2025-03-26",
serverInfo: { name: "Everything Server", version: "2.1.0" },
capabilities: {
tools: { listChanged: true },
resources: { subscribe: true, listChanged: true },
prompts: { listChanged: true },
logging: {},
completions: {},
},
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.",
};
const fullClientCaps: ClientCapabilities = {
roots: { listChanged: true },
sampling: {},
elicitation: {},
experimental: {},
};
const meta: Meta<typeof ServerInfoContent> = {
title: "Groups/ServerInfoContent",
component: ServerInfoContent,
@ -11,80 +36,54 @@ type Story = StoryObj<typeof ServerInfoContent>;
export const FullCapabilities: Story = {
args: {
name: "Everything Server",
version: "2.1.0",
protocolVersion: "2025-03-26",
initializeResult: fullResult,
clientCapabilities: fullClientCaps,
transport: "stdio",
serverCapabilities: [
{ capability: "tools", supported: true, count: 12 },
{ capability: "resources", supported: true, count: 8 },
{ capability: "prompts", supported: true, count: 5 },
{ capability: "logging", supported: true },
{ capability: "completions", supported: true },
],
clientCapabilities: [
{ capability: "roots", supported: true, count: 3 },
{ capability: "sampling", supported: true },
{ capability: "elicitation", supported: true },
{ capability: "experimental", supported: true },
],
},
};
export const MinimalCapabilities: Story = {
args: {
name: "Simple Server",
version: "1.0.0",
protocolVersion: "2025-03-26",
initializeResult: {
protocolVersion: "2025-03-26",
serverInfo: { name: "Simple Server", version: "1.0.0" },
capabilities: {
tools: { listChanged: false },
},
},
clientCapabilities: {
roots: { listChanged: true },
},
transport: "streamable-http",
serverCapabilities: [
{ capability: "tools", supported: true, count: 2 },
{ capability: "resources", supported: false },
{ capability: "prompts", supported: false },
],
clientCapabilities: [
{ capability: "roots", supported: true },
{ capability: "sampling", supported: false },
{ capability: "elicitation", supported: false },
],
},
};
export const WithInstructions: Story = {
args: {
name: "Guided Server",
version: "1.5.0",
protocolVersion: "2025-03-26",
initializeResult: fullResult,
clientCapabilities: {
roots: { listChanged: true },
sampling: {},
},
transport: "stdio",
serverCapabilities: [
{ capability: "tools", supported: true, count: 4 },
{ capability: "resources", supported: true, count: 2 },
{ capability: "prompts", supported: true, count: 1 },
],
clientCapabilities: [
{ capability: "roots", supported: true },
{ capability: "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",
initializeResult: {
protocolVersion: "2025-03-26",
serverInfo: { name: "Authenticated Server", version: "3.0.0" },
capabilities: {
tools: { listChanged: true },
resources: { subscribe: true },
},
},
clientCapabilities: {
roots: { listChanged: true },
},
transport: "streamable-http",
serverCapabilities: [
{ capability: "tools", supported: true, count: 6 },
{ capability: "resources", supported: true, count: 3 },
],
clientCapabilities: [
{ capability: "roots", supported: true },
{ capability: "sampling", supported: false },
],
oauthDetails: {
oauth: {
authUrl: "https://auth.example.com/oauth2/authorize",
scopes: ["read", "write", "admin"],
accessToken: "eyJhbGciOiJSUzI1NiIs...truncated",