From 31b8db98ab11ca5b09b65e4a2cb6533730d11d45 Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Tue, 21 Apr 2026 12:58:24 -0400
Subject: [PATCH] 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>
---
 .../ExperimentalFeaturesPanel.stories.tsx     |  1 -
 .../ExperimentalFeaturesPanel.tsx             | 57 ++++++++++++++-----
 .../groups/RootsTable/RootsTable.tsx          |  6 +-
 3 files changed, 46 insertions(+), 18 deletions(-)

diff --git a/clients/web/src/components/groups/ExperimentalFeaturesPanel/ExperimentalFeaturesPanel.stories.tsx b/clients/web/src/components/groups/ExperimentalFeaturesPanel/ExperimentalFeaturesPanel.stories.tsx
index e2f04be8..37b133f5 100644
--- a/clients/web/src/components/groups/ExperimentalFeaturesPanel/ExperimentalFeaturesPanel.stories.tsx
+++ b/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: [],
diff --git a/clients/web/src/components/groups/ExperimentalFeaturesPanel/ExperimentalFeaturesPanel.tsx b/clients/web/src/components/groups/ExperimentalFeaturesPanel/ExperimentalFeaturesPanel.tsx
index e245fc41..41406a27 100644
--- a/clients/web/src/components/groups/ExperimentalFeaturesPanel/ExperimentalFeaturesPanel.tsx
+++ b/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,19 +157,26 @@ export function ExperimentalFeaturesPanel({
       {serverEntries.length === 0 ? (
         <Text c="dimmed">No experimental capabilities</Text>
       ) : (
-        serverEntries.map(([name, value]) => (
-          <CapCard key={name}>
-            <Stack gap="xs">
-              <Text fw={600}>{name}</Text>
-              <MetaText>{JSON.stringify(value)}</MetaText>
-              <Group>
-                <CompactButton onClick={() => onTestCapability(name)}>
-                  Test →
-                </CompactButton>
-              </Group>
-            </Stack>
-          </CapCard>
-        ))
+        serverEntries.map(([name, value]) => {
+          const description = getCapabilityDescription(value);
+          const methods = getCapabilityMethods(value);
+          return (
+            <CapCard key={name}>
+              <Stack gap="xs">
+                <Text fw={600}>{name}</Text>
+                {description && <HintText>{description}</HintText>}
+                {methods && methods.length > 0 && (
+                  <MetaText>{formatMethods(methods)}</MetaText>
+                )}
+                <Group>
+                  <CompactButton onClick={() => onTestCapability(name)}>
+                    Test →
+                  </CompactButton>
+                </Group>
+              </Stack>
+            </CapCard>
+          );
+        })
       )}
 
       <Divider />
diff --git a/clients/web/src/components/groups/RootsTable/RootsTable.tsx b/clients/web/src/components/groups/RootsTable/RootsTable.tsx
index 0665ee10..cec0d343 100644
--- a/clients/web/src/components/groups/RootsTable/RootsTable.tsx
+++ b/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;
 }