Merge branch 'main' into add_proxy_config

Author: pulkitsharma07

client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@modelcontextprotocol/inspector-client",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "Client-side application for the Model Context Protocol inspector",
   "license": "MIT",
   "author": "Anthropic, PBC (https://anthropic.com)",

client/src/App.tsx

@@ -152,6 +152,7 @@ const App = () => {
     handleCompletion,
     completionsSupported,
     connect: connectMcpServer,
+    disconnect: disconnectMcpServer,
   } = useConnection({
     transportType,
     command,
@@ -466,6 +467,7 @@ const App = () => {
         bearerToken={bearerToken}
         setBearerToken={setBearerToken}
         onConnect={connectMcpServer}
+        onDisconnect={disconnectMcpServer}
         stdErrNotifications={stdErrNotifications}
         logLevel={logLevel}
         sendLogLevelRequest={sendLogLevelRequest}

client/src/components/Sidebar.tsx

@@ -11,6 +11,7 @@ import {
   RotateCcw,
   Settings,
   HelpCircle,
+  RefreshCwOff,
 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -51,6 +52,7 @@ interface SidebarProps {
   bearerToken: string;
   setBearerToken: (token: string) => void;
   onConnect: () => void;
+  onDisconnect: () => void;
   stdErrNotifications: StdErrNotification[];
   logLevel: LoggingLevel;
   sendLogLevelRequest: (level: LoggingLevel) => void;
@@ -74,6 +76,7 @@ const Sidebar = ({
   bearerToken,
   setBearerToken,
   onConnect,
+  onDisconnect,
   stdErrNotifications,
   logLevel,
   sendLogLevelRequest,
@@ -393,23 +396,24 @@ const Sidebar = ({
           </div>
 
           <div className="space-y-2">
-            <Button
-              data-testid="connect-button"
-              className="w-full"
-              onClick={onConnect}
-            >
-              {connectionStatus === "connected" ? (
-                <>
+            {connectionStatus === "connected" && (
+              <div className="grid grid-cols-2 gap-4">
+                <Button  data-testid="connect-button" onClick={onConnect}>
                   <RotateCcw className="w-4 h-4 mr-2" />
                   {transportType === "stdio" ? "Restart" : "Reconnect"}
-                </>
-              ) : (
-                <>
-                  <Play className="w-4 h-4 mr-2" />
-                  Connect
-                </>
-              )}
-            </Button>
+                </Button>
+                <Button onClick={onDisconnect}>
+                  <RefreshCwOff className="w-4 h-4 mr-2" />
+                  Disconnect
+                </Button>
+              </div>
+            )}
+            {connectionStatus !== "connected" && (
+              <Button className="w-full" onClick={onConnect}>
+                <Play className="w-4 h-4 mr-2" />
+                Connect
+              </Button>
+            )}
 
             <div className="flex items-center justify-center space-x-2 mb-4">
               <div

client/src/components/ToolsTab.tsx

@@ -1,4 +1,4 @@
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Input } from "@/components/ui/input";
@@ -13,7 +13,7 @@ import {
   ListToolsResult,
   Tool,
 } from "@modelcontextprotocol/sdk/types.js";
-import { AlertCircle, Send } from "lucide-react";
+import { Send } from "lucide-react";
 import { useEffect, useState } from "react";
 import ListPane from "./ListPane";
 import JsonView from "./JsonView";
@@ -27,7 +27,6 @@ const ToolsTab = ({
   setSelectedTool,
   toolResult,
   nextCursor,
-  error,
 }: {
   tools: Tool[];
   listTools: () => void;
@@ -147,13 +146,7 @@ const ToolsTab = ({
           </h3>
         </div>
         <div className="p-4">
-          {error ? (
-            <Alert variant="destructive">
-              <AlertCircle className="h-4 w-4" />
-              <AlertTitle>Error</AlertTitle>
-              <AlertDescription>{error}</AlertDescription>
-            </Alert>
-          ) : selectedTool ? (
+          {selectedTool ? (
             <div className="space-y-4">
               <p className="text-sm text-gray-600">
                 {selectedTool.description}
@@ -226,7 +219,11 @@ const ToolsTab = ({
                         </div>
                       ) : (
                         <Input
-                          type={prop.type === "number" ? "number" : "text"}
+                          type={
+                            prop.type === "number" || prop.type === "integer"
+                              ? "number"
+                              : "text"
+                          }
                           id={key}
                           name={key}
                           placeholder={prop.description}
@@ -235,7 +232,8 @@ const ToolsTab = ({
                             setParams({
                               ...params,
                               [key]:
-                                prop.type === "number"
+                                prop.type === "number" ||
+                                prop.type === "integer"
                                   ? Number(e.target.value)
                                   : e.target.value,
                             })

client/src/components/__tests__/Sidebar.test.tsx

@@ -27,6 +27,7 @@ describe("Sidebar Environment Variables", () => {
     bearerToken: "",
     setBearerToken: jest.fn(),
     onConnect: jest.fn(),
+    onDisconnect: jest.fn(),
     stdErrNotifications: [],
     logLevel: "info" as const,
     sendLogLevelRequest: jest.fn(),

client/src/components/__tests__/ToolsTab.test.tsx

@@ -1,5 +1,6 @@
 import { render, screen, fireEvent } from "@testing-library/react";
 import { describe, it, expect, jest } from "@jest/globals";
+import "@testing-library/jest-dom";
 import ToolsTab from "../ToolsTab";
 import { Tool } from "@modelcontextprotocol/sdk/types.js";
 import { Tabs } from "@/components/ui/tabs";
@@ -16,6 +17,16 @@ describe("ToolsTab", () => {
         },
       },
     },
+    {
+      name: "tool3",
+      description: "Integer tool",
+      inputSchema: {
+        type: "object" as const,
+        properties: {
+          count: { type: "integer" as const },
+        },
+      },
+    },
     {
       name: "tool2",
       description: "Second tool",
@@ -61,12 +72,31 @@ describe("ToolsTab", () => {
     // Switch to second tool
     rerender(
       <Tabs defaultValue="tools">
-        <ToolsTab {...defaultProps} selectedTool={mockTools[1]} />
+        <ToolsTab {...defaultProps} selectedTool={mockTools[2]} />
       </Tabs>,
     );
 
     // Verify input is reset
     const newInput = screen.getByRole("spinbutton") as HTMLInputElement;
     expect(newInput.value).toBe("");
   });
+  it("should handle integer type inputs", () => {
+    renderToolsTab({
+      selectedTool: mockTools[1], // Use the tool with integer type
+    });
+
+    const input = screen.getByRole("spinbutton", {
+      name: /count/i,
+    }) as HTMLInputElement;
+    expect(input).toHaveProperty("type", "number");
+    fireEvent.change(input, { target: { value: "42" } });
+    expect(input.value).toBe("42");
+
+    const submitButton = screen.getByRole("button", { name: /run tool/i });
+    fireEvent.click(submitButton);
+
+    expect(defaultProps.callTool).toHaveBeenCalledWith(mockTools[1].name, {
+      count: 42,
+    });
+  });
 });

client/src/lib/hooks/useConnection.ts

@@ -342,6 +342,14 @@ export function useConnection({
     }
   };
 
+  const disconnect = async () => {
+    await mcpClient?.close();
+    setMcpClient(null);
+    setConnectionStatus("disconnected");
+    setCompletionsSupported(false);
+    setServerCapabilities(null);
+  };
+
   return {
     connectionStatus,
     serverCapabilities,
@@ -352,5 +360,6 @@ export function useConnection({
     handleCompletion,
     completionsSupported,
     connect,
+    disconnect,
   };
 }

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@modelcontextprotocol/inspector",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "Model Context Protocol inspector",
   "license": "MIT",
   "author": "Anthropic, PBC (https://anthropic.com)",
@@ -36,8 +36,8 @@
     "publish-all": "npm publish --workspaces --access public && npm publish --access public"
   },
   "dependencies": {
-    "@modelcontextprotocol/inspector-client": "^0.7.0",
-    "@modelcontextprotocol/inspector-server": "^0.7.0",
+    "@modelcontextprotocol/inspector-client": "^0.8.0",
+    "@modelcontextprotocol/inspector-server": "^0.8.0",
     "concurrently": "^9.0.1",
     "shell-quote": "^1.8.2",
     "spawn-rx": "^5.1.2",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@modelcontextprotocol/inspector-server",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "Server-side application for the Model Context Protocol inspector",
   "license": "MIT",
   "author": "Anthropic, PBC (https://anthropic.com)",