add support for progress flow

pulkitsharma07 · pulkitsharma07 · commit a8ffc704f05c · 2025-04-04T01:44:30.000+05:30
diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -45,10 +45,7 @@ import Sidebar from "./components/Sidebar";
 import ToolsTab from "./components/ToolsTab";
 import { DEFAULT_INSPECTOR_CONFIG } from "./lib/constants";
 import { InspectorConfig } from "./lib/configurationTypes";
-import {
-  getMCPProxyAddress,
-  getMCPServerRequestTimeout,
-} from "./utils/configUtils";
+import { getMCPProxyAddress } from "./utils/configUtils";
 import { useToast } from "@/hooks/use-toast";
 
 const params = new URLSearchParams(window.location.search);
@@ -148,7 +145,7 @@ const App = () => {
     serverCapabilities,
     mcpClient,
     requestHistory,
-    makeRequest: makeConnectionRequest,
+    makeRequest,
     sendNotification,
     handleCompletion,
     completionsSupported,
@@ -161,8 +158,7 @@ const App = () => {
     sseUrl,
     env,
     bearerToken,
-    proxyServerUrl: getMCPProxyAddress(config),
-    requestTimeout: getMCPServerRequestTimeout(config),
+    config,
     onNotification: (notification) => {
       setNotifications((prev) => [...prev, notification as ServerNotification]);
     },
@@ -279,13 +275,13 @@ const App = () => {
     setErrors((prev) => ({ ...prev, [tabKey]: null }));
   };
 
-  const makeRequest = async <T extends z.ZodType>(
+  const makeConnectionRequest = async <T extends z.ZodType>(
     request: ClientRequest,
     schema: T,
     tabKey?: keyof typeof errors,
   ) => {
     try {
-      const response = await makeConnectionRequest(request, schema);
+      const response = await makeRequest(request, schema);
       if (tabKey !== undefined) {
         clearError(tabKey);
       }
@@ -303,7 +299,7 @@ const App = () => {
   };
 
   const listResources = async () => {
-    const response = await makeRequest(
+    const response = await makeConnectionRequest(
       {
         method: "resources/list" as const,
         params: nextResourceCursor ? { cursor: nextResourceCursor } : {},
@@ -316,7 +312,7 @@ const App = () => {
   };
 
   const listResourceTemplates = async () => {
-    const response = await makeRequest(
+    const response = await makeConnectionRequest(
       {
         method: "resources/templates/list" as const,
         params: nextResourceTemplateCursor
@@ -333,7 +329,7 @@ const App = () => {
   };
 
   const readResource = async (uri: string) => {
-    const response = await makeRequest(
+    const response = await makeConnectionRequest(
       {
         method: "resources/read" as const,
         params: { uri },
@@ -346,7 +342,7 @@ const App = () => {
 
   const subscribeToResource = async (uri: string) => {
     if (!resourceSubscriptions.has(uri)) {
-      await makeRequest(
+      await makeConnectionRequest(
         {
           method: "resources/subscribe" as const,
           params: { uri },
@@ -362,7 +358,7 @@ const App = () => {
 
   const unsubscribeFromResource = async (uri: string) => {
     if (resourceSubscriptions.has(uri)) {
-      await makeRequest(
+      await makeConnectionRequest(
         {
           method: "resources/unsubscribe" as const,
           params: { uri },
@@ -377,7 +373,7 @@ const App = () => {
   };
 
   const listPrompts = async () => {
-    const response = await makeRequest(
+    const response = await makeConnectionRequest(
       {
         method: "prompts/list" as const,
         params: nextPromptCursor ? { cursor: nextPromptCursor } : {},
@@ -390,7 +386,7 @@ const App = () => {
   };
 
   const getPrompt = async (name: string, args: Record<string, string> = {}) => {
-    const response = await makeRequest(
+    const response = await makeConnectionRequest(
       {
         method: "prompts/get" as const,
         params: { name, arguments: args },
@@ -402,7 +398,7 @@ const App = () => {
   };
 
   const listTools = async () => {
-    const response = await makeRequest(
+    const response = await makeConnectionRequest(
       {
         method: "tools/list" as const,
         params: nextToolCursor ? { cursor: nextToolCursor } : {},
@@ -415,7 +411,7 @@ const App = () => {
   };
 
   const callTool = async (name: string, params: Record<string, unknown>) => {
-    const response = await makeRequest(
+    const response = await makeConnectionRequest(
       {
         method: "tools/call" as const,
         params: {
@@ -437,7 +433,7 @@ const App = () => {
   };
 
   const sendLogLevelRequest = async (level: LoggingLevel) => {
-    await makeRequest(
+    await makeConnectionRequest(
       {
         method: "logging/setLevel" as const,
         params: { level },
@@ -654,7 +650,7 @@ const App = () => {
                     <ConsoleTab />
                     <PingTab
                       onPingClick={() => {
-                        void makeRequest(
+                        void makeConnectionRequest(
                           {
                             method: "ping" as const,
                           },
diff --git a/client/src/lib/configurationTypes.ts b/client/src/lib/configurationTypes.ts
@@ -15,5 +15,21 @@ export type InspectorConfig = {
    * Maximum time in milliseconds to wait for a response from the MCP server before timing out.
    */
   MCP_SERVER_REQUEST_TIMEOUT: ConfigItem;
+
+  /**
+   * Whether to reset the timeout on progress notifications. Useful for long-running operations that send periodic progress updates.
+   * Refer: https://spec.modelcontextprotocol.io/specification/2025-03-26/basic/utilities/progress/#progress-flow
+   */
+  MCP_SERVER_REQUEST_TIMEOUT_RESET_ON_PROGRESS: ConfigItem;
+
+  /**
+   * Maximum total time in milliseconds to wait for a response from the MCP server before timing out. Used in conjunction with MCP_SERVER_REQUEST_TIMEOUT_RESET_ON_PROGRESS.
+   * Refer: https://spec.modelcontextprotocol.io/specification/2025-03-26/basic/utilities/progress/#progress-flow
+   */
+  MCP_SERVER_REQUEST_TIMEOUT_MAX_TOTAL_TIMEOUT: ConfigItem;
+
+  /**
+   * The full address of the MCP Proxy Server, in case it is running on a non-default address. Example: http://10.1.1.22:5577
+   */
   MCP_PROXY_FULL_ADDRESS: ConfigItem;
 };
diff --git a/client/src/lib/constants.ts b/client/src/lib/constants.ts
@@ -25,6 +25,14 @@ export const DEFAULT_INSPECTOR_CONFIG: InspectorConfig = {
     description: "Timeout for requests to the MCP server (ms)",
     value: 10000,
   },
+  MCP_SERVER_REQUEST_TIMEOUT_RESET_ON_PROGRESS: {
+    description: "Reset timeout on progress notifications",
+    value: true,
+  },
+  MCP_SERVER_REQUEST_TIMEOUT_MAX_TOTAL_TIMEOUT: {
+    description: "Maximum total timeout for requests sent to the MCP server (ms)",
+    value: 60000,
+  },
   MCP_PROXY_FULL_ADDRESS: {
     description:
       "Set this if you are running the MCP Inspector Proxy on a non-default address. Example: http://10.1.1.22:5577",
diff --git a/client/src/lib/hooks/__tests__/useConnection.test.tsx b/client/src/lib/hooks/__tests__/useConnection.test.tsx
@@ -0,0 +1,165 @@
+import { renderHook, act } from "@testing-library/react";
+import { useConnection } from "../useConnection";
+import { z } from "zod";
+import { ClientRequest } from "@modelcontextprotocol/sdk/types.js";
+import { DEFAULT_INSPECTOR_CONFIG } from "../../constants";
+
+// Mock fetch
+global.fetch = jest.fn().mockResolvedValue({
+  json: () => Promise.resolve({ status: "ok" }),
+});
+
+// Mock the SDK dependencies
+const mockRequest = jest.fn().mockResolvedValue({ test: "response" });
+const mockClient = {
+  request: mockRequest,
+  notification: jest.fn(),
+  connect: jest.fn().mockResolvedValue(undefined),
+  close: jest.fn(),
+  getServerCapabilities: jest.fn(),
+  setNotificationHandler: jest.fn(),
+  setRequestHandler: jest.fn(),
+};
+
+jest.mock("@modelcontextprotocol/sdk/client/index.js", () => ({
+  Client: jest.fn().mockImplementation(() => mockClient),
+}));
+
+jest.mock("@modelcontextprotocol/sdk/client/sse.js", () => ({
+  SSEClientTransport: jest.fn(),
+  SseError: jest.fn(),
+}));
+
+jest.mock("@modelcontextprotocol/sdk/client/auth.js", () => ({
+  auth: jest.fn().mockResolvedValue("AUTHORIZED"),
+}));
+
+// Mock the toast hook
+jest.mock("@/hooks/use-toast", () => ({
+  useToast: () => ({
+    toast: jest.fn(),
+  }),
+}));
+
+// Mock the auth provider
+jest.mock("../../auth", () => ({
+  authProvider: {
+    tokens: jest.fn().mockResolvedValue({ access_token: "mock-token" }),
+  },
+}));
+
+describe("useConnection", () => {
+  const defaultProps = {
+    transportType: "sse" as const,
+    command: "",
+    args: "",
+    sseUrl: "http://localhost:8080",
+    env: {},
+    config: DEFAULT_INSPECTOR_CONFIG,
+  };
+
+  describe("Request Configuration", () => {
+    beforeEach(() => {
+      jest.clearAllMocks();
+    });
+
+    test("uses the default config values in makeRequest", async () => {
+      const { result } = renderHook(() => useConnection(defaultProps));
+
+      // Connect the client
+      await act(async () => {
+        await result.current.connect();
+      });
+
+      // Wait for state update
+      await act(async () => {
+        await new Promise((resolve) => setTimeout(resolve, 0));
+      });
+
+      const mockRequest: ClientRequest = {
+        method: "ping",
+        params: {},
+      };
+
+      const mockSchema = z.object({
+        test: z.string(),
+      });
+
+      await act(async () => {
+        await result.current.makeRequest(mockRequest, mockSchema);
+      });
+
+      expect(mockClient.request).toHaveBeenCalledWith(
+        mockRequest,
+        mockSchema,
+        expect.objectContaining({
+          timeout: DEFAULT_INSPECTOR_CONFIG.MCP_SERVER_REQUEST_TIMEOUT.value,
+          maxTotalTimeout:
+            DEFAULT_INSPECTOR_CONFIG
+              .MCP_SERVER_REQUEST_TIMEOUT_MAX_TOTAL_TIMEOUT.value,
+          resetTimeoutOnProgress:
+            DEFAULT_INSPECTOR_CONFIG
+              .MCP_SERVER_REQUEST_TIMEOUT_RESET_ON_PROGRESS.value,
+        }),
+      );
+    });
+
+    test("overrides the default config values when passed in options in makeRequest", async () => {
+      const { result } = renderHook(() => useConnection(defaultProps));
+
+      // Connect the client
+      await act(async () => {
+        await result.current.connect();
+      });
+
+      // Wait for state update
+      await act(async () => {
+        await new Promise((resolve) => setTimeout(resolve, 0));
+      });
+
+      const mockRequest: ClientRequest = {
+        method: "ping",
+        params: {},
+      };
+
+      const mockSchema = z.object({
+        test: z.string(),
+      });
+
+      await act(async () => {
+        await result.current.makeRequest(mockRequest, mockSchema, {
+          timeout: 1000,
+          maxTotalTimeout: 2000,
+          resetTimeoutOnProgress: false,
+        });
+      });
+
+      expect(mockClient.request).toHaveBeenCalledWith(
+        mockRequest,
+        mockSchema,
+        expect.objectContaining({
+          timeout: 1000,
+          maxTotalTimeout: 2000,
+          resetTimeoutOnProgress: false,
+        }),
+      );
+    });
+  });
+
+  test("throws error when mcpClient is not connected", async () => {
+    const { result } = renderHook(() => useConnection(defaultProps));
+
+    const mockRequest: ClientRequest = {
+      method: "ping",
+      params: {},
+    };
+
+    const mockSchema = z.object({
+      test: z.string(),
+    });
+
+    await expect(
+      result.current.makeRequest(mockRequest, mockSchema),
+    ).rejects.toThrow("MCP client not connected");
+  });
+});
diff --git a/client/src/lib/hooks/useConnection.ts b/client/src/lib/hooks/useConnection.ts
diff --git a/client/src/utils/configUtils.ts b/client/src/utils/configUtils.ts
