From cc9be5e930920b17339893bfecf2e78811d6a2f7 Mon Sep 17 00:00:00 2001 From: cliffhall Date: Tue, 21 Apr 2026 16:24:27 -0400 Subject: [PATCH] Address PR #1221 code review feedback - Fix getCapabilityEntries to iterate fixed key sets so unsupported capabilities render red X (was only showing present/supported ones) - Merge duplicate @mantine/core import in ViewHeader - Move ConnectionState from ServerCard to core/mcp/types.ts - Narrow onConnectionModeChange to "proxy" | "direct" instead of string Co-Authored-By: Claude Opus 4.6 (1M context) --- .../groups/ServerCard/ServerCard.stories.tsx | 6 ++-- .../groups/ServerCard/ServerCard.tsx | 8 +---- .../ServerInfoContent/ServerInfoContent.tsx | 31 ++++++++++++++++--- .../ServerSettingsForm/ServerSettingsForm.tsx | 4 +-- .../groups/ViewHeader/ViewHeader.tsx | 2 +- core/mcp/types.ts | 10 ++++++ 6 files changed, 44 insertions(+), 17 deletions(-) diff --git a/clients/web/src/components/groups/ServerCard/ServerCard.stories.tsx b/clients/web/src/components/groups/ServerCard/ServerCard.stories.tsx index 69ad208b..65aed920 100644 --- a/clients/web/src/components/groups/ServerCard/ServerCard.stories.tsx +++ b/clients/web/src/components/groups/ServerCard/ServerCard.stories.tsx @@ -1,7 +1,9 @@ -import type { MCPServerConfig } from "@inspector/core/mcp/types.js"; +import type { + ConnectionState, + MCPServerConfig, +} from "@inspector/core/mcp/types.js"; import type { Meta, StoryObj } from "@storybook/react-vite"; import { fn } from "storybook/test"; -import type { ConnectionState } from "./ServerCard"; import { ServerCard } from "./ServerCard"; const stdioConfig: MCPServerConfig = { diff --git a/clients/web/src/components/groups/ServerCard/ServerCard.tsx b/clients/web/src/components/groups/ServerCard/ServerCard.tsx index a1e11226..75f8292d 100644 --- a/clients/web/src/components/groups/ServerCard/ServerCard.tsx +++ b/clients/web/src/components/groups/ServerCard/ServerCard.tsx @@ -1,7 +1,7 @@ import { Badge, Button, Card, Group, Menu, Stack, Text } from "@mantine/core"; import type { Implementation } from "@modelcontextprotocol/sdk/types.js"; import type { - ConnectionStatus, + ConnectionState, MCPServerConfig, ServerType, } from "@inspector/core/mcp/types.js"; @@ -11,12 +11,6 @@ import { ConnectionToggle } from "../../elements/ConnectionToggle/ConnectionTogg import { ContentViewer } from "../../elements/ContentViewer/ContentViewer"; import { InlineError } from "../../elements/InlineError/InlineError"; -export interface ConnectionState { - status: ConnectionStatus; - retryCount?: number; - error?: { message: string; details?: string }; -} - export interface ServerCardProps { name: string; config: MCPServerConfig; diff --git a/clients/web/src/components/groups/ServerInfoContent/ServerInfoContent.tsx b/clients/web/src/components/groups/ServerInfoContent/ServerInfoContent.tsx index 607c0e6d..147d246d 100644 --- a/clients/web/src/components/groups/ServerInfoContent/ServerInfoContent.tsx +++ b/clients/web/src/components/groups/ServerInfoContent/ServerInfoContent.tsx @@ -39,12 +39,30 @@ function formatScopes(scopes: string[]): string { return scopes.join(", "); } +const SERVER_CAPABILITY_KEYS: CapabilityKey[] = [ + "tools", + "resources", + "prompts", + "logging", + "completions", + "tasks", + "experimental", +]; + +const CLIENT_CAPABILITY_KEYS: CapabilityKey[] = [ + "roots", + "sampling", + "elicitation", + "experimental", +]; + function getCapabilityEntries( capabilities: Record, + knownKeys: CapabilityKey[], ): { capability: CapabilityKey; supported: boolean }[] { - return Object.entries(capabilities).map(([key, value]) => ({ - capability: key as CapabilityKey, - supported: value != null, + return knownKeys.map((key) => ({ + capability: key, + supported: key in capabilities && capabilities[key] != null, })); } @@ -57,8 +75,11 @@ export function ServerInfoContent({ const { serverInfo, protocolVersion, capabilities, instructions } = initializeResult; - const serverCaps = getCapabilityEntries(capabilities); - const clientCaps = getCapabilityEntries(clientCapabilities); + const serverCaps = getCapabilityEntries(capabilities, SERVER_CAPABILITY_KEYS); + const clientCaps = getCapabilityEntries( + clientCapabilities, + CLIENT_CAPABILITY_KEYS, + ); return ( diff --git a/clients/web/src/components/groups/ServerSettingsForm/ServerSettingsForm.tsx b/clients/web/src/components/groups/ServerSettingsForm/ServerSettingsForm.tsx index 1320dc83..d1da1e4e 100644 --- a/clients/web/src/components/groups/ServerSettingsForm/ServerSettingsForm.tsx +++ b/clients/web/src/components/groups/ServerSettingsForm/ServerSettingsForm.tsx @@ -22,7 +22,7 @@ export interface ServerSettingsFormProps { settings: InspectorServerSettings; expandedSections: ServerSettingsSection[]; onExpandedSectionsChange: (sections: ServerSettingsSection[]) => void; - onConnectionModeChange: (mode: string) => void; + onConnectionModeChange: (mode: "proxy" | "direct") => void; onAddHeader: () => void; onRemoveHeader: (index: number) => void; onHeaderChange: (index: number, key: string, value: string) => void; @@ -129,7 +129,7 @@ export function ServerSettingsForm({ data={CONNECTION_MODE_OPTIONS} value={settings.connectionMode} onChange={(value) => { - if (value) onConnectionModeChange(value); + if (value) onConnectionModeChange(value as "proxy" | "direct"); }} description={ settings.connectionMode === "proxy" diff --git a/clients/web/src/components/groups/ViewHeader/ViewHeader.tsx b/clients/web/src/components/groups/ViewHeader/ViewHeader.tsx index 641ed8f0..4de55a89 100644 --- a/clients/web/src/components/groups/ViewHeader/ViewHeader.tsx +++ b/clients/web/src/components/groups/ViewHeader/ViewHeader.tsx @@ -7,8 +7,8 @@ import { SegmentedControl, Text, Title, + useComputedColorScheme, } from "@mantine/core"; -import { useComputedColorScheme } from "@mantine/core"; import type { Implementation } from "@modelcontextprotocol/sdk/types.js"; import { MdLightMode, MdDarkMode } from "react-icons/md"; import type { ConnectionStatus } from "@inspector/core/mcp/types.js"; diff --git a/core/mcp/types.ts b/core/mcp/types.ts index f0cdabbf..6ca15ef7 100644 --- a/core/mcp/types.ts +++ b/core/mcp/types.ts @@ -60,6 +60,16 @@ export type ConnectionStatus = | "connected" | "error"; +/** + * Snapshot of a server's connection state, used by dumb components + * that display status, retry count, and error details. + */ +export interface ConnectionState { + status: ConnectionStatus; + retryCount?: number; + error?: { message: string; details?: string }; +} + export interface StderrLogEntry { timestamp: Date; message: string;