Address PR #1220 code review feedback

- Remove unused clientExperimental prop from ExperimentalFeaturesPanel
- Restore readable display of server capabilities by extracting
  description and methods fields when present instead of raw JSON
- Extract RootDraft type alias to avoid repeated inline type

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

clients/web/src/components/groups/ExperimentalFeaturesPanel/ExperimentalFeaturesPanel.stories.tsx

@@ -23,7 +23,6 @@ const meta: Meta<typeof ExperimentalFeaturesPanel> = {
     onHeaderChange: fn(),
     onCopyResponse: fn(),
     onTestCapability: fn(),
-    clientExperimental: {},
     clientToggles: defaultClientToggles,
     customHeaders: [],
     requestHistory: [],

clients/web/src/components/groups/ExperimentalFeaturesPanel/ExperimentalFeaturesPanel.tsx

@@ -15,7 +15,6 @@ import {
   Title,
 } from "@mantine/core";
 import type {
-  ClientCapabilities,
   JSONRPCErrorResponse,
   JSONRPCResponse,
   ServerCapabilities,
@@ -40,7 +39,6 @@ export interface RequestHistoryItem {
 
 export interface ExperimentalFeaturesPanelProps {
   serverExperimental: ServerCapabilities["experimental"];
-  clientExperimental: ClientCapabilities["experimental"];
   clientToggles: ClientExperimentalToggle[];
   requestDraft: string;
   response?: JSONRPCResponse | JSONRPCErrorResponse;
@@ -108,6 +106,28 @@ function getCapabilityEntries(
   return Object.entries(experimental);
 }
 
+function getCapabilityDescription(value: object): string | undefined {
+  if ("description" in value && typeof value.description === "string") {
+    return value.description;
+  }
+  return undefined;
+}
+
+function getCapabilityMethods(value: object): string[] | undefined {
+  if (
+    "methods" in value &&
+    Array.isArray(value.methods) &&
+    value.methods.every((m: unknown) => typeof m === "string")
+  ) {
+    return value.methods as string[];
+  }
+  return undefined;
+}
+
+function formatMethods(methods: string[]): string {
+  return `Methods: ${methods.join(", ")}`;
+}
+
 export function ExperimentalFeaturesPanel({
   serverExperimental,
   clientToggles,
@@ -137,11 +157,17 @@ export function ExperimentalFeaturesPanel({
       {serverEntries.length === 0 ? (
         <Text c="dimmed">No experimental capabilities</Text>
       ) : (
-        serverEntries.map(([name, value]) => (
+        serverEntries.map(([name, value]) => {
+          const description = getCapabilityDescription(value);
+          const methods = getCapabilityMethods(value);
+          return (
             <CapCard key={name}>
               <Stack gap="xs">
                 <Text fw={600}>{name}</Text>
-              <MetaText>{JSON.stringify(value)}</MetaText>
+                {description && <HintText>{description}</HintText>}
+                {methods && methods.length > 0 && (
+                  <MetaText>{formatMethods(methods)}</MetaText>
+                )}
                 <Group>
                   <CompactButton onClick={() => onTestCapability(name)}>
                     Test →
@@ -149,7 +175,8 @@ export function ExperimentalFeaturesPanel({
                 </Group>
               </Stack>
             </CapCard>
-        ))
+          );
+        })
       )}
 
       <Divider />

clients/web/src/components/groups/RootsTable/RootsTable.tsx

@@ -12,11 +12,13 @@ import {
 } from "@mantine/core";
 import type { Root } from "@modelcontextprotocol/sdk/types.js";
 
+export type RootDraft = { name: string; uri: string };
+
 export interface RootsTableProps {
   roots: Root[];
-  newRootDraft: { name: string; uri: string };
+  newRootDraft: RootDraft;
   onRemoveRoot: (uri: string) => void;
-  onNewRootDraftChange: (draft: { name: string; uri: string }) => void;
+  onNewRootDraftChange: (draft: RootDraft) => void;
   onAddRoot: () => void;
   onBrowse: () => void;
 }