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) <noreply@anthropic.com>

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 = {

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;

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<string, unknown>,
+  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 (
     <Stack gap="md">

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"

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";

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;