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

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>

clients/web/src/components/screens/ServerListScreen/ServerListScreen.stories.tsx

@@ -46,48 +46,56 @@ function makeServerCallbacks(): Pick<
 
 const connectedStdioServer: ServerCardProps = {
   name: "Local Dev Server",
-  version: "1.2.0",
-  transport: "stdio",
+  config: {
+    command: "npx @modelcontextprotocol/server-filesystem /home/user/projects",
+  },
+  info: { name: "Local Dev Server", version: "1.2.0" },
+  connection: { status: "connected" },
   connectionMode: "Direct",
-  command: "npx @modelcontextprotocol/server-filesystem /home/user/projects",
-  status: "connected",
   canTestClientFeatures: true,
   ...makeServerCallbacks(),
 };
 
 const disconnectedStdioServer: ServerCardProps = {
   name: "Database Tools",
-  version: "0.9.1",
-  transport: "stdio",
+  config: {
+    command: "python -m mcp_server_sqlite --db-path ./data.db",
+  },
+  info: { name: "Database Tools", version: "0.9.1" },
+  connection: { status: "disconnected" },
   connectionMode: "Direct",
-  command: "python -m mcp_server_sqlite --db-path ./data.db",
-  status: "disconnected",
   canTestClientFeatures: false,
   ...makeServerCallbacks(),
 };
 
 const failedHttpServer: ServerCardProps = {
   name: "Remote API Server",
-  version: "2.0.0",
-  transport: "streamable-http",
-  connectionMode: "Streamable HTTP",
-  command: "https://api.example.com/mcp",
-  status: "error",
-  retryCount: 3,
-  error: {
-    message: "Connection refused",
-    details: "ECONNREFUSED 127.0.0.1:8080 - The server may not be running.",
+  config: {
+    type: "streamable-http",
+    url: "https://api.example.com/mcp",
   },
+  info: { name: "Remote API Server", version: "2.0.0" },
+  connection: {
+    status: "error",
+    retryCount: 3,
+    error: {
+      message: "Connection refused",
+      details: "ECONNREFUSED 127.0.0.1:8080 - The server may not be running.",
+    },
+  },
+  connectionMode: "Streamable HTTP",
   canTestClientFeatures: false,
   ...makeServerCallbacks(),
 };
 
 const connectingHttpServer: ServerCardProps = {
   name: "Staging Server",
-  transport: "streamable-http",
+  config: {
+    type: "streamable-http",
+    url: "https://staging.example.com/mcp",
+  },
+  connection: { status: "connecting" },
   connectionMode: "Streamable HTTP",
-  command: "https://staging.example.com/mcp",
-  status: "connecting",
   canTestClientFeatures: false,
   ...makeServerCallbacks(),
 };

clients/web/src/components/screens/ServerListScreen/ServerListScreen.tsx

@@ -31,7 +31,7 @@ export function ServerListScreen({
   const [activeServer, setActiveServer] = useState<string | undefined>();
 
   function handleToggleList() {
-    setCompact((prev) => (prev === true ? false : true));
+    setCompact((prev) => !prev);
   }
 
   return (