From a8ffc704f05cd1f8e0050cebd6f83a337fbddffc Mon Sep 17 00:00:00 2001
From: Pulkit Sharma <avastpulkit@gmail.com>
Date: Fri, 4 Apr 2025 01:44:30 +0530
Subject: [PATCH 01/19] add support for progress flow

---
 client/src/App.tsx                            |  36 ++--
 client/src/lib/configurationTypes.ts          |  16 ++
 client/src/lib/constants.ts                   |   8 +
 .../hooks/__tests__/useConnection.test.tsx    | 165 ++++++++++++++++++
 client/src/lib/hooks/useConnection.ts         |  40 +++--
 client/src/utils/configUtils.ts               |  12 ++
 6 files changed, 238 insertions(+), 39 deletions(-)
 create mode 100644 client/src/lib/hooks/__tests__/useConnection.test.tsx

diff --git a/client/src/App.tsx b/client/src/App.tsx
index 7564544..61dcad7 100644
--- 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
index df9eb29..d0c1263 100644
--- 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
index c370b34..9caf4bc 100644
--- 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
new file mode 100644
index 0000000..7a96802
--- /dev/null
+++ 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
index bff01ce..d67c623 100644
--- a/client/src/lib/hooks/useConnection.ts
+++ b/client/src/lib/hooks/useConnection.ts
@@ -24,6 +24,7 @@ import {
   ToolListChangedNotificationSchema,
   PromptListChangedNotificationSchema,
 } from "@modelcontextprotocol/sdk/types.js";
+import { RequestOptions } from "@modelcontextprotocol/sdk/shared/protocol.js";
 import { useState } from "react";
 import { useToast } from "@/hooks/use-toast";
 import { z } from "zod";
@@ -32,6 +33,13 @@ import { Notification, StdErrNotificationSchema } from "../notificationTypes";
 import { auth } from "@modelcontextprotocol/sdk/client/auth.js";
 import { authProvider } from "../auth";
 import packageJson from "../../../package.json";
+import {
+  getMCPProxyAddress,
+  getMCPServerRequestMaxTotalTimeout,
+  resetRequestTimeoutOnProgress,
+} from "@/utils/configUtils";
+import { getMCPServerRequestTimeout } from "@/utils/configUtils";
+import { InspectorConfig } from "../configurationTypes";
 
 interface UseConnectionOptions {
   transportType: "stdio" | "sse";
@@ -39,9 +47,8 @@ interface UseConnectionOptions {
   args: string;
   sseUrl: string;
   env: Record<string, string>;
-  proxyServerUrl: string;
   bearerToken?: string;
-  requestTimeout?: number;
+  config: InspectorConfig;
   onNotification?: (notification: Notification) => void;
   onStdErrNotification?: (notification: Notification) => void;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -50,21 +57,14 @@ interface UseConnectionOptions {
   getRoots?: () => any[];
 }
 
-interface RequestOptions {
-  signal?: AbortSignal;
-  timeout?: number;
-  suppressToast?: boolean;
-}
-
 export function useConnection({
   transportType,
   command,
   args,
   sseUrl,
   env,
-  proxyServerUrl,
   bearerToken,
-  requestTimeout,
+  config,
   onNotification,
   onStdErrNotification,
   onPendingRequest,
@@ -94,7 +94,7 @@ export function useConnection({
   const makeRequest = async <T extends z.ZodType>(
     request: ClientRequest,
     schema: T,
-    options?: RequestOptions,
+    options?: RequestOptions & { suppressToast?: boolean },
   ): Promise<z.output<T>> => {
     if (!mcpClient) {
       throw new Error("MCP client not connected");
@@ -102,23 +102,25 @@ export function useConnection({
 
     try {
       const abortController = new AbortController();
-      const timeoutId = setTimeout(() => {
-        abortController.abort("Request timed out");
-      }, options?.timeout ?? requestTimeout);
-
       let response;
       try {
         response = await mcpClient.request(request, schema, {
           signal: options?.signal ?? abortController.signal,
+          resetTimeoutOnProgress:
+            options?.resetTimeoutOnProgress ??
+            resetRequestTimeoutOnProgress(config),
+          timeout: options?.timeout ?? getMCPServerRequestTimeout(config),
+          maxTotalTimeout:
+            options?.maxTotalTimeout ??
+            getMCPServerRequestMaxTotalTimeout(config),
         });
+
         pushHistory(request, response);
       } catch (error) {
         const errorMessage =
           error instanceof Error ? error.message : String(error);
         pushHistory(request, { error: errorMessage });
         throw error;
-      } finally {
-        clearTimeout(timeoutId);
       }
 
       return response;
@@ -211,7 +213,7 @@ export function useConnection({
 
   const checkProxyHealth = async () => {
     try {
-      const proxyHealthUrl = new URL(`${proxyServerUrl}/health`);
+      const proxyHealthUrl = new URL(`${getMCPProxyAddress(config)}/health`);
       const proxyHealthResponse = await fetch(proxyHealthUrl);
       const proxyHealth = await proxyHealthResponse.json();
       if (proxyHealth?.status !== "ok") {
@@ -256,7 +258,7 @@ export function useConnection({
       setConnectionStatus("error-connecting-to-proxy");
       return;
     }
-    const mcpProxyServerUrl = new URL(`${proxyServerUrl}/sse`);
+    const mcpProxyServerUrl = new URL(`${getMCPProxyAddress(config)}/sse`);
     mcpProxyServerUrl.searchParams.append("transportType", transportType);
     if (transportType === "stdio") {
       mcpProxyServerUrl.searchParams.append("command", command);
diff --git a/client/src/utils/configUtils.ts b/client/src/utils/configUtils.ts
index a6f2dd2..3295f7d 100644
--- a/client/src/utils/configUtils.ts
+++ b/client/src/utils/configUtils.ts
@@ -12,3 +12,15 @@ export const getMCPProxyAddress = (config: InspectorConfig): string => {
 export const getMCPServerRequestTimeout = (config: InspectorConfig): number => {
   return config.MCP_SERVER_REQUEST_TIMEOUT.value as number;
 };
+
+export const resetRequestTimeoutOnProgress = (
+  config: InspectorConfig,
+): boolean => {
+  return config.MCP_SERVER_REQUEST_TIMEOUT_RESET_ON_PROGRESS.value as boolean;
+};
+
+export const getMCPServerRequestMaxTotalTimeout = (
+  config: InspectorConfig,
+): number => {
+  return config.MCP_SERVER_REQUEST_TIMEOUT_MAX_TOTAL_TIMEOUT.value as number;
+};

From b8ab30fdf3ae0fc7ce20565ebb5ee5ac954fbd5a Mon Sep 17 00:00:00 2001
From: yusheng chen <samuel871211@gmail.com>
Date: Fri, 4 Apr 2025 19:26:11 +0800
Subject: [PATCH 02/19] chore: move `@types/prismjs` to `devDependencies`

---
 client/package.json | 4 ++--
 package-lock.json   | 5 ++++-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/client/package.json b/client/package.json
index f43ab23..d111210 100644
--- a/client/package.json
+++ b/client/package.json
@@ -32,9 +32,8 @@
     "@radix-ui/react-select": "^2.1.2",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-tabs": "^1.1.1",
-    "@radix-ui/react-tooltip": "^1.1.8",
     "@radix-ui/react-toast": "^1.2.6",
-    "@types/prismjs": "^1.26.5",
+    "@radix-ui/react-tooltip": "^1.1.8",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "cmdk": "^1.0.4",
@@ -55,6 +54,7 @@
     "@testing-library/react": "^16.2.0",
     "@types/jest": "^29.5.14",
     "@types/node": "^22.7.5",
+    "@types/prismjs": "^1.26.5",
     "@types/react": "^18.3.10",
     "@types/react-dom": "^18.3.0",
     "@types/serve-handler": "^6.1.4",
diff --git a/package-lock.json b/package-lock.json
index 42fec87..1dcc8d1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -46,7 +46,6 @@
         "@radix-ui/react-tabs": "^1.1.1",
         "@radix-ui/react-toast": "^1.2.6",
         "@radix-ui/react-tooltip": "^1.1.8",
-        "@types/prismjs": "^1.26.5",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.1",
         "cmdk": "^1.0.4",
@@ -70,6 +69,7 @@
         "@testing-library/react": "^16.2.0",
         "@types/jest": "^29.5.14",
         "@types/node": "^22.7.5",
+        "@types/prismjs": "^1.26.5",
         "@types/react": "^18.3.10",
         "@types/react-dom": "^18.3.0",
         "@types/serve-handler": "^6.1.4",
@@ -3566,6 +3566,9 @@
     },
     "node_modules/@types/prismjs": {
       "version": "1.26.5",
+      "resolved": "https://registry.npmjs.org/@types/prismjs/-/prismjs-1.26.5.tgz",
+      "integrity": "sha512-AUZTa7hQ2KY5L7AmtSiqxlhWxb4ina0yd8hNbl4TWuqnv/pFP0nDMb3YrfSBf4hJVGLh2YEIBfKaBW/9UEl6IQ==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/@types/prop-types": {

From 0fd2e12c7b93ea7526d98aa1e6f5b301591af771 Mon Sep 17 00:00:00 2001
From: Shinya Fujino <shf0811@gmail.com>
Date: Fri, 4 Apr 2025 22:39:43 +0900
Subject: [PATCH 03/19] Fix inconsistent gap between TabsList and TabsContent

---
 client/src/components/PingTab.tsx      |  18 +-
 client/src/components/PromptsTab.tsx   | 158 ++++++-------
 client/src/components/ResourcesTab.tsx | 293 +++++++++++++------------
 client/src/components/RootsTab.tsx     |  64 +++---
 client/src/components/SamplingTab.tsx  |  54 ++---
 client/src/components/ToolsTab.tsx     | 260 +++++++++++-----------
 6 files changed, 432 insertions(+), 415 deletions(-)

diff --git a/client/src/components/PingTab.tsx b/client/src/components/PingTab.tsx
index 287356c..6546901 100644
--- a/client/src/components/PingTab.tsx
+++ b/client/src/components/PingTab.tsx
@@ -3,14 +3,16 @@ import { Button } from "@/components/ui/button";
 
 const PingTab = ({ onPingClick }: { onPingClick: () => void }) => {
   return (
-    <TabsContent value="ping" className="grid grid-cols-2 gap-4">
-      <div className="col-span-2 flex justify-center items-center">
-        <Button
-          onClick={onPingClick}
-          className="font-bold py-6 px-12 rounded-full"
-        >
-          Ping Server
-        </Button>
+    <TabsContent value="ping">
+      <div className="grid grid-cols-2 gap-4">
+        <div className="col-span-2 flex justify-center items-center">
+          <Button
+            onClick={onPingClick}
+            className="font-bold py-6 px-12 rounded-full"
+          >
+            Ping Server
+          </Button>
+        </div>
       </div>
     </TabsContent>
   );
diff --git a/client/src/components/PromptsTab.tsx b/client/src/components/PromptsTab.tsx
index 48c847d..80e5fe6 100644
--- a/client/src/components/PromptsTab.tsx
+++ b/client/src/components/PromptsTab.tsx
@@ -84,84 +84,88 @@ const PromptsTab = ({
   };
 
   return (
-    <TabsContent value="prompts" className="grid grid-cols-2 gap-4">
-      <ListPane
-        items={prompts}
-        listItems={listPrompts}
-        clearItems={clearPrompts}
-        setSelectedItem={(prompt) => {
-          setSelectedPrompt(prompt);
-          setPromptArgs({});
-        }}
-        renderItem={(prompt) => (
-          <>
-            <span className="flex-1">{prompt.name}</span>
-            <span className="text-sm text-gray-500">{prompt.description}</span>
-          </>
-        )}
-        title="Prompts"
-        buttonText={nextCursor ? "List More Prompts" : "List Prompts"}
-        isButtonDisabled={!nextCursor && prompts.length > 0}
-      />
-
-      <div className="bg-card rounded-lg shadow">
-        <div className="p-4 border-b border-gray-200">
-          <h3 className="font-semibold">
-            {selectedPrompt ? selectedPrompt.name : "Select a prompt"}
-          </h3>
-        </div>
-        <div className="p-4">
-          {error ? (
-            <Alert variant="destructive">
-              <AlertCircle className="h-4 w-4" />
-              <AlertTitle>Error</AlertTitle>
-              <AlertDescription>{error}</AlertDescription>
-            </Alert>
-          ) : selectedPrompt ? (
-            <div className="space-y-4">
-              {selectedPrompt.description && (
-                <p className="text-sm text-gray-600">
-                  {selectedPrompt.description}
-                </p>
-              )}
-              {selectedPrompt.arguments?.map((arg) => (
-                <div key={arg.name}>
-                  <Label htmlFor={arg.name}>{arg.name}</Label>
-                  <Combobox
-                    id={arg.name}
-                    placeholder={`Enter ${arg.name}`}
-                    value={promptArgs[arg.name] || ""}
-                    onChange={(value) => handleInputChange(arg.name, value)}
-                    onInputChange={(value) =>
-                      handleInputChange(arg.name, value)
-                    }
-                    options={completions[arg.name] || []}
-                  />
-
-                  {arg.description && (
-                    <p className="text-xs text-gray-500 mt-1">
-                      {arg.description}
-                      {arg.required && (
-                        <span className="text-xs mt-1 ml-1">(Required)</span>
-                      )}
-                    </p>
-                  )}
-                </div>
-              ))}
-              <Button onClick={handleGetPrompt} className="w-full">
-                Get Prompt
-              </Button>
-              {promptContent && (
-                <JsonView data={promptContent} withCopyButton={false} />
-              )}
-            </div>
-          ) : (
-            <Alert>
-              <AlertDescription>
-                Select a prompt from the list to view and use it
-              </AlertDescription>
-            </Alert>
+    <TabsContent value="prompts">
+      <div className="grid grid-cols-2 gap-4">
+        <ListPane
+          items={prompts}
+          listItems={listPrompts}
+          clearItems={clearPrompts}
+          setSelectedItem={(prompt) => {
+            setSelectedPrompt(prompt);
+            setPromptArgs({});
+          }}
+          renderItem={(prompt) => (
+            <>
+              <span className="flex-1">{prompt.name}</span>
+              <span className="text-sm text-gray-500">
+                {prompt.description}
+              </span>
+            </>
           )}
+          title="Prompts"
+          buttonText={nextCursor ? "List More Prompts" : "List Prompts"}
+          isButtonDisabled={!nextCursor && prompts.length > 0}
+        />
+
+        <div className="bg-card rounded-lg shadow">
+          <div className="p-4 border-b border-gray-200">
+            <h3 className="font-semibold">
+              {selectedPrompt ? selectedPrompt.name : "Select a prompt"}
+            </h3>
+          </div>
+          <div className="p-4">
+            {error ? (
+              <Alert variant="destructive">
+                <AlertCircle className="h-4 w-4" />
+                <AlertTitle>Error</AlertTitle>
+                <AlertDescription>{error}</AlertDescription>
+              </Alert>
+            ) : selectedPrompt ? (
+              <div className="space-y-4">
+                {selectedPrompt.description && (
+                  <p className="text-sm text-gray-600">
+                    {selectedPrompt.description}
+                  </p>
+                )}
+                {selectedPrompt.arguments?.map((arg) => (
+                  <div key={arg.name}>
+                    <Label htmlFor={arg.name}>{arg.name}</Label>
+                    <Combobox
+                      id={arg.name}
+                      placeholder={`Enter ${arg.name}`}
+                      value={promptArgs[arg.name] || ""}
+                      onChange={(value) => handleInputChange(arg.name, value)}
+                      onInputChange={(value) =>
+                        handleInputChange(arg.name, value)
+                      }
+                      options={completions[arg.name] || []}
+                    />
+
+                    {arg.description && (
+                      <p className="text-xs text-gray-500 mt-1">
+                        {arg.description}
+                        {arg.required && (
+                          <span className="text-xs mt-1 ml-1">(Required)</span>
+                        )}
+                      </p>
+                    )}
+                  </div>
+                ))}
+                <Button onClick={handleGetPrompt} className="w-full">
+                  Get Prompt
+                </Button>
+                {promptContent && (
+                  <JsonView data={promptContent} withCopyButton={false} />
+                )}
+              </div>
+            ) : (
+              <Alert>
+                <AlertDescription>
+                  Select a prompt from the list to view and use it
+                </AlertDescription>
+              </Alert>
+            )}
+          </div>
         </div>
       </div>
     </TabsContent>
diff --git a/client/src/components/ResourcesTab.tsx b/client/src/components/ResourcesTab.tsx
index 2a10824..23cfbe7 100644
--- a/client/src/components/ResourcesTab.tsx
+++ b/client/src/components/ResourcesTab.tsx
@@ -111,155 +111,158 @@ const ResourcesTab = ({
   };
 
   return (
-    <TabsContent value="resources" className="grid grid-cols-3 gap-4">
-      <ListPane
-        items={resources}
-        listItems={listResources}
-        clearItems={clearResources}
-        setSelectedItem={(resource) => {
-          setSelectedResource(resource);
-          readResource(resource.uri);
-          setSelectedTemplate(null);
-        }}
-        renderItem={(resource) => (
-          <div className="flex items-center w-full">
-            <FileText className="w-4 h-4 mr-2 flex-shrink-0 text-gray-500" />
-            <span className="flex-1 truncate" title={resource.uri.toString()}>
-              {resource.name}
-            </span>
-            <ChevronRight className="w-4 h-4 flex-shrink-0 text-gray-400" />
-          </div>
-        )}
-        title="Resources"
-        buttonText={nextCursor ? "List More Resources" : "List Resources"}
-        isButtonDisabled={!nextCursor && resources.length > 0}
-      />
-
-      <ListPane
-        items={resourceTemplates}
-        listItems={listResourceTemplates}
-        clearItems={clearResourceTemplates}
-        setSelectedItem={(template) => {
-          setSelectedTemplate(template);
-          setSelectedResource(null);
-          setTemplateValues({});
-        }}
-        renderItem={(template) => (
-          <div className="flex items-center w-full">
-            <FileText className="w-4 h-4 mr-2 flex-shrink-0 text-gray-500" />
-            <span className="flex-1 truncate" title={template.uriTemplate}>
-              {template.name}
-            </span>
-            <ChevronRight className="w-4 h-4 flex-shrink-0 text-gray-400" />
-          </div>
-        )}
-        title="Resource Templates"
-        buttonText={
-          nextTemplateCursor ? "List More Templates" : "List Templates"
-        }
-        isButtonDisabled={!nextTemplateCursor && resourceTemplates.length > 0}
-      />
-
-      <div className="bg-card rounded-lg shadow">
-        <div className="p-4 border-b border-gray-200 flex justify-between items-center">
-          <h3
-            className="font-semibold truncate"
-            title={selectedResource?.name || selectedTemplate?.name}
-          >
-            {selectedResource
-              ? selectedResource.name
-              : selectedTemplate
-                ? selectedTemplate.name
-                : "Select a resource or template"}
-          </h3>
-          {selectedResource && (
-            <div className="flex row-auto gap-1 justify-end w-2/5">
-              {resourceSubscriptionsSupported &&
-                !resourceSubscriptions.has(selectedResource.uri) && (
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    onClick={() => subscribeToResource(selectedResource.uri)}
-                  >
-                    Subscribe
-                  </Button>
-                )}
-              {resourceSubscriptionsSupported &&
-                resourceSubscriptions.has(selectedResource.uri) && (
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    onClick={() =>
-                      unsubscribeFromResource(selectedResource.uri)
-                    }
-                  >
-                    Unsubscribe
-                  </Button>
-                )}
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={() => readResource(selectedResource.uri)}
-              >
-                <RefreshCw className="w-4 h-4 mr-2" />
-                Refresh
-              </Button>
+    <TabsContent value="resources">
+      <div className="grid grid-cols-3 gap-4">
+        <ListPane
+          items={resources}
+          listItems={listResources}
+          clearItems={clearResources}
+          setSelectedItem={(resource) => {
+            setSelectedResource(resource);
+            readResource(resource.uri);
+            setSelectedTemplate(null);
+          }}
+          renderItem={(resource) => (
+            <div className="flex items-center w-full">
+              <FileText className="w-4 h-4 mr-2 flex-shrink-0 text-gray-500" />
+              <span className="flex-1 truncate" title={resource.uri.toString()}>
+                {resource.name}
+              </span>
+              <ChevronRight className="w-4 h-4 flex-shrink-0 text-gray-400" />
             </div>
           )}
-        </div>
-        <div className="p-4">
-          {error ? (
-            <Alert variant="destructive">
-              <AlertCircle className="h-4 w-4" />
-              <AlertTitle>Error</AlertTitle>
-              <AlertDescription>{error}</AlertDescription>
-            </Alert>
-          ) : selectedResource ? (
-            <JsonView
-              data={resourceContent}
-              className="bg-gray-50 dark:bg-gray-800 p-4 rounded text-sm overflow-auto max-h-96 text-gray-900 dark:text-gray-100"
-            />
-          ) : selectedTemplate ? (
-            <div className="space-y-4">
-              <p className="text-sm text-gray-600">
-                {selectedTemplate.description}
-              </p>
-              {selectedTemplate.uriTemplate
-                .match(/{([^}]+)}/g)
-                ?.map((param) => {
-                  const key = param.slice(1, -1);
-                  return (
-                    <div key={key}>
-                      <Label htmlFor={key}>{key}</Label>
-                      <Combobox
-                        id={key}
-                        placeholder={`Enter ${key}`}
-                        value={templateValues[key] || ""}
-                        onChange={(value) =>
-                          handleTemplateValueChange(key, value)
-                        }
-                        onInputChange={(value) =>
-                          handleTemplateValueChange(key, value)
-                        }
-                        options={completions[key] || []}
-                      />
-                    </div>
-                  );
-                })}
-              <Button
-                onClick={handleReadTemplateResource}
-                disabled={Object.keys(templateValues).length === 0}
-              >
-                Read Resource
-              </Button>
+          title="Resources"
+          buttonText={nextCursor ? "List More Resources" : "List Resources"}
+          isButtonDisabled={!nextCursor && resources.length > 0}
+        />
+
+        <ListPane
+          items={resourceTemplates}
+          listItems={listResourceTemplates}
+          clearItems={clearResourceTemplates}
+          setSelectedItem={(template) => {
+            setSelectedTemplate(template);
+            setSelectedResource(null);
+            setTemplateValues({});
+          }}
+          renderItem={(template) => (
+            <div className="flex items-center w-full">
+              <FileText className="w-4 h-4 mr-2 flex-shrink-0 text-gray-500" />
+              <span className="flex-1 truncate" title={template.uriTemplate}>
+                {template.name}
+              </span>
+              <ChevronRight className="w-4 h-4 flex-shrink-0 text-gray-400" />
             </div>
-          ) : (
-            <Alert>
-              <AlertDescription>
-                Select a resource or template from the list to view its contents
-              </AlertDescription>
-            </Alert>
           )}
+          title="Resource Templates"
+          buttonText={
+            nextTemplateCursor ? "List More Templates" : "List Templates"
+          }
+          isButtonDisabled={!nextTemplateCursor && resourceTemplates.length > 0}
+        />
+
+        <div className="bg-card rounded-lg shadow">
+          <div className="p-4 border-b border-gray-200 flex justify-between items-center">
+            <h3
+              className="font-semibold truncate"
+              title={selectedResource?.name || selectedTemplate?.name}
+            >
+              {selectedResource
+                ? selectedResource.name
+                : selectedTemplate
+                  ? selectedTemplate.name
+                  : "Select a resource or template"}
+            </h3>
+            {selectedResource && (
+              <div className="flex row-auto gap-1 justify-end w-2/5">
+                {resourceSubscriptionsSupported &&
+                  !resourceSubscriptions.has(selectedResource.uri) && (
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={() => subscribeToResource(selectedResource.uri)}
+                    >
+                      Subscribe
+                    </Button>
+                  )}
+                {resourceSubscriptionsSupported &&
+                  resourceSubscriptions.has(selectedResource.uri) && (
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={() =>
+                        unsubscribeFromResource(selectedResource.uri)
+                      }
+                    >
+                      Unsubscribe
+                    </Button>
+                  )}
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => readResource(selectedResource.uri)}
+                >
+                  <RefreshCw className="w-4 h-4 mr-2" />
+                  Refresh
+                </Button>
+              </div>
+            )}
+          </div>
+          <div className="p-4">
+            {error ? (
+              <Alert variant="destructive">
+                <AlertCircle className="h-4 w-4" />
+                <AlertTitle>Error</AlertTitle>
+                <AlertDescription>{error}</AlertDescription>
+              </Alert>
+            ) : selectedResource ? (
+              <JsonView
+                data={resourceContent}
+                className="bg-gray-50 dark:bg-gray-800 p-4 rounded text-sm overflow-auto max-h-96 text-gray-900 dark:text-gray-100"
+              />
+            ) : selectedTemplate ? (
+              <div className="space-y-4">
+                <p className="text-sm text-gray-600">
+                  {selectedTemplate.description}
+                </p>
+                {selectedTemplate.uriTemplate
+                  .match(/{([^}]+)}/g)
+                  ?.map((param) => {
+                    const key = param.slice(1, -1);
+                    return (
+                      <div key={key}>
+                        <Label htmlFor={key}>{key}</Label>
+                        <Combobox
+                          id={key}
+                          placeholder={`Enter ${key}`}
+                          value={templateValues[key] || ""}
+                          onChange={(value) =>
+                            handleTemplateValueChange(key, value)
+                          }
+                          onInputChange={(value) =>
+                            handleTemplateValueChange(key, value)
+                          }
+                          options={completions[key] || []}
+                        />
+                      </div>
+                    );
+                  })}
+                <Button
+                  onClick={handleReadTemplateResource}
+                  disabled={Object.keys(templateValues).length === 0}
+                >
+                  Read Resource
+                </Button>
+              </div>
+            ) : (
+              <Alert>
+                <AlertDescription>
+                  Select a resource or template from the list to view its
+                  contents
+                </AlertDescription>
+              </Alert>
+            )}
+          </div>
         </div>
       </div>
     </TabsContent>
diff --git a/client/src/components/RootsTab.tsx b/client/src/components/RootsTab.tsx
index 33f60d5..308b88b 100644
--- a/client/src/components/RootsTab.tsx
+++ b/client/src/components/RootsTab.tsx
@@ -35,40 +35,42 @@ const RootsTab = ({
   };
 
   return (
-    <TabsContent value="roots" className="space-y-4">
-      <Alert>
-        <AlertDescription>
-          Configure the root directories that the server can access
-        </AlertDescription>
-      </Alert>
+    <TabsContent value="roots">
+      <div className="space-y-4">
+        <Alert>
+          <AlertDescription>
+            Configure the root directories that the server can access
+          </AlertDescription>
+        </Alert>
 
-      {roots.map((root, index) => (
-        <div key={index} className="flex gap-2 items-center">
-          <Input
-            placeholder="file:// URI"
-            value={root.uri}
-            onChange={(e) => updateRoot(index, "uri", e.target.value)}
-            className="flex-1"
-          />
-          <Button
-            variant="destructive"
-            size="sm"
-            onClick={() => removeRoot(index)}
-          >
-            <Minus className="h-4 w-4" />
+        {roots.map((root, index) => (
+          <div key={index} className="flex gap-2 items-center">
+            <Input
+              placeholder="file:// URI"
+              value={root.uri}
+              onChange={(e) => updateRoot(index, "uri", e.target.value)}
+              className="flex-1"
+            />
+            <Button
+              variant="destructive"
+              size="sm"
+              onClick={() => removeRoot(index)}
+            >
+              <Minus className="h-4 w-4" />
+            </Button>
+          </div>
+        ))}
+
+        <div className="flex gap-2">
+          <Button variant="outline" onClick={addRoot}>
+            <Plus className="h-4 w-4 mr-2" />
+            Add Root
+          </Button>
+          <Button onClick={handleSave}>
+            <Save className="h-4 w-4 mr-2" />
+            Save Changes
           </Button>
         </div>
-      ))}
-
-      <div className="flex gap-2">
-        <Button variant="outline" onClick={addRoot}>
-          <Plus className="h-4 w-4 mr-2" />
-          Add Root
-        </Button>
-        <Button onClick={handleSave}>
-          <Save className="h-4 w-4 mr-2" />
-          Save Changes
-        </Button>
       </div>
     </TabsContent>
   );
diff --git a/client/src/components/SamplingTab.tsx b/client/src/components/SamplingTab.tsx
index a72ea7d..d7d0212 100644
--- a/client/src/components/SamplingTab.tsx
+++ b/client/src/components/SamplingTab.tsx
@@ -33,33 +33,37 @@ const SamplingTab = ({ pendingRequests, onApprove, onReject }: Props) => {
   };
 
   return (
-    <TabsContent value="sampling" className="h-96">
-      <Alert>
-        <AlertDescription>
-          When the server requests LLM sampling, requests will appear here for
-          approval.
-        </AlertDescription>
-      </Alert>
-      <div className="mt-4 space-y-4">
-        <h3 className="text-lg font-semibold">Recent Requests</h3>
-        {pendingRequests.map((request) => (
-          <div key={request.id} className="p-4 border rounded-lg space-y-4">
-            <JsonView
-              className="bg-gray-50 dark:bg-gray-800 dark:text-gray-100 rounded"
-              data={JSON.stringify(request.request)}
-            />
+    <TabsContent value="sampling">
+      <div className="h-96">
+        <Alert>
+          <AlertDescription>
+            When the server requests LLM sampling, requests will appear here for
+            approval.
+          </AlertDescription>
+        </Alert>
+        <div className="mt-4 space-y-4">
+          <h3 className="text-lg font-semibold">Recent Requests</h3>
+          {pendingRequests.map((request) => (
+            <div key={request.id} className="p-4 border rounded-lg space-y-4">
+              <JsonView
+                className="bg-gray-50 dark:bg-gray-800 dark:text-gray-100 rounded"
+                data={JSON.stringify(request.request)}
+              />
 
-            <div className="flex space-x-2">
-              <Button onClick={() => handleApprove(request.id)}>Approve</Button>
-              <Button variant="outline" onClick={() => onReject(request.id)}>
-                Reject
-              </Button>
+              <div className="flex space-x-2">
+                <Button onClick={() => handleApprove(request.id)}>
+                  Approve
+                </Button>
+                <Button variant="outline" onClick={() => onReject(request.id)}>
+                  Reject
+                </Button>
+              </div>
             </div>
-          </div>
-        ))}
-        {pendingRequests.length === 0 && (
-          <p className="text-gray-500">No pending requests</p>
-        )}
+          ))}
+          {pendingRequests.length === 0 && (
+            <p className="text-gray-500">No pending requests</p>
+          )}
+        </div>
       </div>
     </TabsContent>
   );
diff --git a/client/src/components/ToolsTab.tsx b/client/src/components/ToolsTab.tsx
index a9e9bf8..0316c88 100644
--- a/client/src/components/ToolsTab.tsx
+++ b/client/src/components/ToolsTab.tsx
@@ -106,147 +106,149 @@ const ToolsTab = ({
   };
 
   return (
-    <TabsContent value="tools" className="grid grid-cols-2 gap-4">
-      <ListPane
-        items={tools}
-        listItems={listTools}
-        clearItems={() => {
-          clearTools();
-          setSelectedTool(null);
-        }}
-        setSelectedItem={setSelectedTool}
-        renderItem={(tool) => (
-          <>
-            <span className="flex-1">{tool.name}</span>
-            <span className="text-sm text-gray-500 text-right">
-              {tool.description}
-            </span>
-          </>
-        )}
-        title="Tools"
-        buttonText={nextCursor ? "List More Tools" : "List Tools"}
-        isButtonDisabled={!nextCursor && tools.length > 0}
-      />
+    <TabsContent value="tools">
+      <div className="grid grid-cols-2 gap-4">
+        <ListPane
+          items={tools}
+          listItems={listTools}
+          clearItems={() => {
+            clearTools();
+            setSelectedTool(null);
+          }}
+          setSelectedItem={setSelectedTool}
+          renderItem={(tool) => (
+            <>
+              <span className="flex-1">{tool.name}</span>
+              <span className="text-sm text-gray-500 text-right">
+                {tool.description}
+              </span>
+            </>
+          )}
+          title="Tools"
+          buttonText={nextCursor ? "List More Tools" : "List Tools"}
+          isButtonDisabled={!nextCursor && tools.length > 0}
+        />
 
-      <div className="bg-card rounded-lg shadow">
-        <div className="p-4 border-b border-gray-200">
-          <h3 className="font-semibold">
-            {selectedTool ? selectedTool.name : "Select a tool"}
-          </h3>
-        </div>
-        <div className="p-4">
-          {selectedTool ? (
-            <div className="space-y-4">
-              <p className="text-sm text-gray-600">
-                {selectedTool.description}
-              </p>
-              {Object.entries(selectedTool.inputSchema.properties ?? []).map(
-                ([key, value]) => {
-                  const prop = value as JsonSchemaType;
-                  return (
-                    <div key={key}>
-                      <Label
-                        htmlFor={key}
-                        className="block text-sm font-medium text-gray-700"
-                      >
-                        {key}
-                      </Label>
-                      {prop.type === "boolean" ? (
-                        <div className="flex items-center space-x-2 mt-2">
-                          <Checkbox
+        <div className="bg-card rounded-lg shadow">
+          <div className="p-4 border-b border-gray-200">
+            <h3 className="font-semibold">
+              {selectedTool ? selectedTool.name : "Select a tool"}
+            </h3>
+          </div>
+          <div className="p-4">
+            {selectedTool ? (
+              <div className="space-y-4">
+                <p className="text-sm text-gray-600">
+                  {selectedTool.description}
+                </p>
+                {Object.entries(selectedTool.inputSchema.properties ?? []).map(
+                  ([key, value]) => {
+                    const prop = value as JsonSchemaType;
+                    return (
+                      <div key={key}>
+                        <Label
+                          htmlFor={key}
+                          className="block text-sm font-medium text-gray-700"
+                        >
+                          {key}
+                        </Label>
+                        {prop.type === "boolean" ? (
+                          <div className="flex items-center space-x-2 mt-2">
+                            <Checkbox
+                              id={key}
+                              name={key}
+                              checked={!!params[key]}
+                              onCheckedChange={(checked: boolean) =>
+                                setParams({
+                                  ...params,
+                                  [key]: checked,
+                                })
+                              }
+                            />
+                            <label
+                              htmlFor={key}
+                              className="text-sm font-medium text-gray-700 dark:text-gray-300"
+                            >
+                              {prop.description || "Toggle this option"}
+                            </label>
+                          </div>
+                        ) : prop.type === "string" ? (
+                          <Textarea
                             id={key}
                             name={key}
-                            checked={!!params[key]}
-                            onCheckedChange={(checked: boolean) =>
+                            placeholder={prop.description}
+                            value={(params[key] as string) ?? ""}
+                            onChange={(e) =>
                               setParams({
                                 ...params,
-                                [key]: checked,
+                                [key]: e.target.value,
                               })
                             }
+                            className="mt-1"
                           />
-                          <label
-                            htmlFor={key}
-                            className="text-sm font-medium text-gray-700 dark:text-gray-300"
-                          >
-                            {prop.description || "Toggle this option"}
-                          </label>
-                        </div>
-                      ) : prop.type === "string" ? (
-                        <Textarea
-                          id={key}
-                          name={key}
-                          placeholder={prop.description}
-                          value={(params[key] as string) ?? ""}
-                          onChange={(e) =>
-                            setParams({
-                              ...params,
-                              [key]: e.target.value,
-                            })
-                          }
-                          className="mt-1"
-                        />
-                      ) : prop.type === "object" || prop.type === "array" ? (
-                        <div className="mt-1">
-                          <DynamicJsonForm
-                            schema={{
-                              type: prop.type,
-                              properties: prop.properties,
-                              description: prop.description,
-                              items: prop.items,
-                            }}
-                            value={
-                              (params[key] as JsonValue) ??
-                              generateDefaultValue(prop)
+                        ) : prop.type === "object" || prop.type === "array" ? (
+                          <div className="mt-1">
+                            <DynamicJsonForm
+                              schema={{
+                                type: prop.type,
+                                properties: prop.properties,
+                                description: prop.description,
+                                items: prop.items,
+                              }}
+                              value={
+                                (params[key] as JsonValue) ??
+                                generateDefaultValue(prop)
+                              }
+                              onChange={(newValue: JsonValue) => {
+                                setParams({
+                                  ...params,
+                                  [key]: newValue,
+                                });
+                              }}
+                            />
+                          </div>
+                        ) : (
+                          <Input
+                            type={
+                              prop.type === "number" || prop.type === "integer"
+                                ? "number"
+                                : "text"
                             }
-                            onChange={(newValue: JsonValue) => {
+                            id={key}
+                            name={key}
+                            placeholder={prop.description}
+                            value={(params[key] as string) ?? ""}
+                            onChange={(e) =>
                               setParams({
                                 ...params,
-                                [key]: newValue,
-                              });
-                            }}
+                                [key]:
+                                  prop.type === "number" ||
+                                  prop.type === "integer"
+                                    ? Number(e.target.value)
+                                    : e.target.value,
+                              })
+                            }
+                            className="mt-1"
                           />
-                        </div>
-                      ) : (
-                        <Input
-                          type={
-                            prop.type === "number" || prop.type === "integer"
-                              ? "number"
-                              : "text"
-                          }
-                          id={key}
-                          name={key}
-                          placeholder={prop.description}
-                          value={(params[key] as string) ?? ""}
-                          onChange={(e) =>
-                            setParams({
-                              ...params,
-                              [key]:
-                                prop.type === "number" ||
-                                prop.type === "integer"
-                                  ? Number(e.target.value)
-                                  : e.target.value,
-                            })
-                          }
-                          className="mt-1"
-                        />
-                      )}
-                    </div>
-                  );
-                },
-              )}
-              <Button onClick={() => callTool(selectedTool.name, params)}>
-                <Send className="w-4 h-4 mr-2" />
-                Run Tool
-              </Button>
-              {toolResult && renderToolResult()}
-            </div>
-          ) : (
-            <Alert>
-              <AlertDescription>
-                Select a tool from the list to view its details and run it
-              </AlertDescription>
-            </Alert>
-          )}
+                        )}
+                      </div>
+                    );
+                  },
+                )}
+                <Button onClick={() => callTool(selectedTool.name, params)}>
+                  <Send className="w-4 h-4 mr-2" />
+                  Run Tool
+                </Button>
+                {toolResult && renderToolResult()}
+              </div>
+            ) : (
+              <Alert>
+                <AlertDescription>
+                  Select a tool from the list to view its details and run it
+                </AlertDescription>
+              </Alert>
+            )}
+          </div>
         </div>
       </div>
     </TabsContent>

From 402cde025b6eb6217d075b6990410c19321dbb4f Mon Sep 17 00:00:00 2001
From: Shinya Fujino <shf0811@gmail.com>
Date: Sat, 5 Apr 2025 00:51:31 +0900
Subject: [PATCH 04/19] Enhance Sidebar component accessibility

---
 client/src/components/Sidebar.tsx | 58 +++++++++++++++++++++++++------
 1 file changed, 48 insertions(+), 10 deletions(-)

diff --git a/client/src/components/Sidebar.tsx b/client/src/components/Sidebar.tsx
index 19f8020..379cc48 100644
--- a/client/src/components/Sidebar.tsx
+++ b/client/src/components/Sidebar.tsx
@@ -103,14 +103,19 @@ const Sidebar = ({
       <div className="p-4 flex-1 overflow-auto">
         <div className="space-y-4">
           <div className="space-y-2">
-            <label className="text-sm font-medium">Transport Type</label>
+            <label
+              className="text-sm font-medium"
+              htmlFor="transport-type-select"
+            >
+              Transport Type
+            </label>
             <Select
               value={transportType}
               onValueChange={(value: "stdio" | "sse") =>
                 setTransportType(value)
               }
             >
-              <SelectTrigger>
+              <SelectTrigger id="transport-type-select">
                 <SelectValue placeholder="Select transport type" />
               </SelectTrigger>
               <SelectContent>
@@ -123,8 +128,11 @@ const Sidebar = ({
           {transportType === "stdio" ? (
             <>
               <div className="space-y-2">
-                <label className="text-sm font-medium">Command</label>
+                <label className="text-sm font-medium" htmlFor="command-input">
+                  Command
+                </label>
                 <Input
+                  id="command-input"
                   placeholder="Command"
                   value={command}
                   onChange={(e) => setCommand(e.target.value)}
@@ -132,8 +140,14 @@ const Sidebar = ({
                 />
               </div>
               <div className="space-y-2">
-                <label className="text-sm font-medium">Arguments</label>
+                <label
+                  className="text-sm font-medium"
+                  htmlFor="arguments-input"
+                >
+                  Arguments
+                </label>
                 <Input
+                  id="arguments-input"
                   placeholder="Arguments (space-separated)"
                   value={args}
                   onChange={(e) => setArgs(e.target.value)}
@@ -144,8 +158,11 @@ const Sidebar = ({
           ) : (
             <>
               <div className="space-y-2">
-                <label className="text-sm font-medium">URL</label>
+                <label className="text-sm font-medium" htmlFor="sse-url-input">
+                  URL
+                </label>
                 <Input
+                  id="sse-url-input"
                   placeholder="URL"
                   value={sseUrl}
                   onChange={(e) => setSseUrl(e.target.value)}
@@ -157,6 +174,7 @@ const Sidebar = ({
                   variant="outline"
                   onClick={() => setShowBearerToken(!showBearerToken)}
                   className="flex items-center w-full"
+                  aria-expanded={showBearerToken}
                 >
                   {showBearerToken ? (
                     <ChevronDown className="w-4 h-4 mr-2" />
@@ -167,8 +185,14 @@ const Sidebar = ({
                 </Button>
                 {showBearerToken && (
                   <div className="space-y-2">
-                    <label className="text-sm font-medium">Bearer Token</label>
+                    <label
+                      className="text-sm font-medium"
+                      htmlFor="bearer-token-input"
+                    >
+                      Bearer Token
+                    </label>
                     <Input
+                      id="bearer-token-input"
                       placeholder="Bearer Token"
                       value={bearerToken}
                       onChange={(e) => setBearerToken(e.target.value)}
@@ -187,6 +211,7 @@ const Sidebar = ({
                 onClick={() => setShowEnvVars(!showEnvVars)}
                 className="flex items-center w-full"
                 data-testid="env-vars-button"
+                aria-expanded={showEnvVars}
               >
                 {showEnvVars ? (
                   <ChevronDown className="w-4 h-4 mr-2" />
@@ -201,6 +226,7 @@ const Sidebar = ({
                     <div key={idx} className="space-y-2 pb-4">
                       <div className="flex gap-2">
                         <Input
+                          aria-label={`Environment variable key ${idx + 1}`}
                           placeholder="Key"
                           value={key}
                           onChange={(e) => {
@@ -243,6 +269,7 @@ const Sidebar = ({
                       </div>
                       <div className="flex gap-2">
                         <Input
+                          aria-label={`Environment variable value ${idx + 1}`}
                           type={shownEnvVars.has(key) ? "text" : "password"}
                           placeholder="Value"
                           value={value}
@@ -309,6 +336,7 @@ const Sidebar = ({
               onClick={() => setShowConfig(!showConfig)}
               className="flex items-center w-full"
               data-testid="config-button"
+              aria-expanded={showConfig}
             >
               {showConfig ? (
                 <ChevronDown className="w-4 h-4 mr-2" />
@@ -325,7 +353,10 @@ const Sidebar = ({
                   return (
                     <div key={key} className="space-y-2">
                       <div className="flex items-center gap-1">
-                        <label className="text-sm font-medium text-green-600">
+                        <label
+                          className="text-sm font-medium text-green-600"
+                          htmlFor={`${configKey}-input`}
+                        >
                           {configKey}
                         </label>
                         <Tooltip>
@@ -339,6 +370,7 @@ const Sidebar = ({
                       </div>
                       {typeof configItem.value === "number" ? (
                         <Input
+                          id={`${configKey}-input`}
                           type="number"
                           data-testid={`${configKey}-input`}
                           value={configItem.value}
@@ -365,7 +397,7 @@ const Sidebar = ({
                             setConfig(newConfig);
                           }}
                         >
-                          <SelectTrigger>
+                          <SelectTrigger id={`${configKey}-input`}>
                             <SelectValue />
                           </SelectTrigger>
                           <SelectContent>
@@ -375,6 +407,7 @@ const Sidebar = ({
                         </Select>
                       ) : (
                         <Input
+                          id={`${configKey}-input`}
                           data-testid={`${configKey}-input`}
                           value={configItem.value}
                           onChange={(e) => {
@@ -448,14 +481,19 @@ const Sidebar = ({
 
             {loggingSupported && connectionStatus === "connected" && (
               <div className="space-y-2">
-                <label className="text-sm font-medium">Logging Level</label>
+                <label
+                  className="text-sm font-medium"
+                  htmlFor="logging-level-select"
+                >
+                  Logging Level
+                </label>
                 <Select
                   value={logLevel}
                   onValueChange={(value: LoggingLevel) =>
                     sendLogLevelRequest(value)
                   }
                 >
-                  <SelectTrigger>
+                  <SelectTrigger id="logging-level-select">
                     <SelectValue placeholder="Select logging level" />
                   </SelectTrigger>
                   <SelectContent>

From e35343537cced3f92ac012202d434af135231e2e Mon Sep 17 00:00:00 2001
From: Pulkit Sharma <avastpulkit@gmail.com>
Date: Sat, 5 Apr 2025 01:46:57 +0530
Subject: [PATCH 05/19] Add proper support for progress flow during tool
 calling

---
 client/src/App.tsx                            | 44 +++++++++------
 client/src/components/Sidebar.tsx             |  2 +-
 client/src/components/ToolsTab.tsx            | 31 +++++++++--
 .../src/components/__tests__/Sidebar.test.tsx | 48 +++++++++++++++++
 .../components/__tests__/ToolsTab.test.tsx    | 54 ++++++++++++++++---
 client/src/lib/configurationTypes.ts          |  4 +-
 client/src/lib/constants.ts                   |  7 +--
 .../hooks/__tests__/useConnection.test.tsx    |  7 ++-
 client/src/lib/hooks/useConnection.ts         | 42 ++++++++++-----
 client/src/utils/configUtils.ts               |  4 +-
 package-lock.json                             | 22 ++++----
 11 files changed, 204 insertions(+), 61 deletions(-)

diff --git a/client/src/App.tsx b/client/src/App.tsx
index 61dcad7..dd7894f 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -411,21 +411,34 @@ const App = () => {
   };
 
   const callTool = async (name: string, params: Record<string, unknown>) => {
-    const response = await makeConnectionRequest(
-      {
-        method: "tools/call" as const,
-        params: {
-          name,
-          arguments: params,
-          _meta: {
-            progressToken: progressTokenRef.current++,
+    try {
+      const response = await makeConnectionRequest(
+        {
+          method: "tools/call" as const,
+          params: {
+            name,
+            arguments: params,
+            _meta: {
+              progressToken: progressTokenRef.current++,
+            },
           },
         },
-      },
-      CompatibilityCallToolResultSchema,
-      "tools",
-    );
-    setToolResult(response);
+        CompatibilityCallToolResultSchema,
+        "tools",
+      );
+      setToolResult(response);
+    } catch (e) {
+      const toolResult: CompatibilityCallToolResult = {
+        content: [
+          {
+            type: "text",
+            text: (e as Error).message ?? String(e),
+          },
+        ],
+        isError: true,
+      };
+      setToolResult(toolResult);
+    }
   };
 
   const handleRootsChange = async () => {
@@ -633,9 +646,10 @@ const App = () => {
                         setTools([]);
                         setNextToolCursor(undefined);
                       }}
-                      callTool={(name, params) => {
+                      callTool={async (name, params) => {
                         clearError("tools");
-                        callTool(name, params);
+                        setToolResult(null);
+                        await callTool(name, params);
                       }}
                       selectedTool={selectedTool}
                       setSelectedTool={(tool) => {
diff --git a/client/src/components/Sidebar.tsx b/client/src/components/Sidebar.tsx
index 19f8020..039453e 100644
--- a/client/src/components/Sidebar.tsx
+++ b/client/src/components/Sidebar.tsx
@@ -325,7 +325,7 @@ const Sidebar = ({
                   return (
                     <div key={key} className="space-y-2">
                       <div className="flex items-center gap-1">
-                        <label className="text-sm font-medium text-green-600">
+                        <label className="text-sm font-medium text-green-600 break-all">
                           {configKey}
                         </label>
                         <Tooltip>
diff --git a/client/src/components/ToolsTab.tsx b/client/src/components/ToolsTab.tsx
index a9e9bf8..b016627 100644
--- a/client/src/components/ToolsTab.tsx
+++ b/client/src/components/ToolsTab.tsx
@@ -13,7 +13,7 @@ import {
   ListToolsResult,
   Tool,
 } from "@modelcontextprotocol/sdk/types.js";
-import { Send } from "lucide-react";
+import { Loader2, Send } from "lucide-react";
 import { useEffect, useState } from "react";
 import ListPane from "./ListPane";
 import JsonView from "./JsonView";
@@ -31,7 +31,7 @@ const ToolsTab = ({
   tools: Tool[];
   listTools: () => void;
   clearTools: () => void;
-  callTool: (name: string, params: Record<string, unknown>) => void;
+  callTool: (name: string, params: Record<string, unknown>) => Promise<void>;
   selectedTool: Tool | null;
   setSelectedTool: (tool: Tool | null) => void;
   toolResult: CompatibilityCallToolResult | null;
@@ -39,6 +39,8 @@ const ToolsTab = ({
   error: string | null;
 }) => {
   const [params, setParams] = useState<Record<string, unknown>>({});
+  const [isToolRunning, setIsToolRunning] = useState(false);
+
   useEffect(() => {
     setParams({});
   }, [selectedTool]);
@@ -234,9 +236,28 @@ const ToolsTab = ({
                   );
                 },
               )}
-              <Button onClick={() => callTool(selectedTool.name, params)}>
-                <Send className="w-4 h-4 mr-2" />
-                Run Tool
+              <Button
+                onClick={async () => {
+                  try {
+                    setIsToolRunning(true);
+                    await callTool(selectedTool.name, params);
+                  } finally {
+                    setIsToolRunning(false);
+                  }
+                }}
+                disabled={isToolRunning}
+              >
+                {isToolRunning ? (
+                  <>
+                    <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                    Running...
+                  </>
+                ) : (
+                  <>
+                    <Send className="w-4 h-4 mr-2" />
+                    Run Tool
+                  </>
+                )}
               </Button>
               {toolResult && renderToolResult()}
             </div>
diff --git a/client/src/components/__tests__/Sidebar.test.tsx b/client/src/components/__tests__/Sidebar.test.tsx
index e527f6d..4d0e3f1 100644
--- a/client/src/components/__tests__/Sidebar.test.tsx
+++ b/client/src/components/__tests__/Sidebar.test.tsx
@@ -350,6 +350,54 @@ describe("Sidebar Environment Variables", () => {
       );
     });
 
+    it("should update MCP server proxy address", () => {
+      const setConfig = jest.fn();
+      renderSidebar({ config: DEFAULT_INSPECTOR_CONFIG, setConfig });
+
+      openConfigSection();
+
+      const proxyAddressInput = screen.getByTestId(
+        "MCP_PROXY_FULL_ADDRESS-input",
+      );
+      fireEvent.change(proxyAddressInput, {
+        target: { value: "http://localhost:8080" },
+      });
+
+      expect(setConfig).toHaveBeenCalledWith(
+        expect.objectContaining({
+          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",
+            value: "http://localhost:8080",
+          },
+        }),
+      );
+    });
+
+    it("should update max total timeout", () => {
+      const setConfig = jest.fn();
+      renderSidebar({ config: DEFAULT_INSPECTOR_CONFIG, setConfig });
+
+      openConfigSection();
+
+      const maxTotalTimeoutInput = screen.getByTestId(
+        "MCP_REQUEST_MAX_TOTAL_TIMEOUT-input",
+      );
+      fireEvent.change(maxTotalTimeoutInput, {
+        target: { value: "10000" },
+      });
+
+      expect(setConfig).toHaveBeenCalledWith(
+        expect.objectContaining({
+          MCP_REQUEST_MAX_TOTAL_TIMEOUT: {
+            description:
+              "Maximum total timeout for requests sent to the MCP server (ms) (Use with progress notifications)",
+            value: 10000,
+          },
+        }),
+      );
+    });
+
     it("should handle invalid timeout values entered by user", () => {
       const setConfig = jest.fn();
       renderSidebar({ config: DEFAULT_INSPECTOR_CONFIG, setConfig });
diff --git a/client/src/components/__tests__/ToolsTab.test.tsx b/client/src/components/__tests__/ToolsTab.test.tsx
index 349977a..c46a32f 100644
--- a/client/src/components/__tests__/ToolsTab.test.tsx
+++ b/client/src/components/__tests__/ToolsTab.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen, fireEvent } from "@testing-library/react";
+import { render, screen, fireEvent, act } from "@testing-library/react";
 import { describe, it, expect, jest } from "@jest/globals";
 import "@testing-library/jest-dom";
 import ToolsTab from "../ToolsTab";
@@ -43,7 +43,7 @@ describe("ToolsTab", () => {
     tools: mockTools,
     listTools: jest.fn(),
     clearTools: jest.fn(),
-    callTool: jest.fn(),
+    callTool: jest.fn(async () => {}),
     selectedTool: null,
     setSelectedTool: jest.fn(),
     toolResult: null,
@@ -59,14 +59,16 @@ describe("ToolsTab", () => {
     );
   };
 
-  it("should reset input values when switching tools", () => {
+  it("should reset input values when switching tools", async () => {
     const { rerender } = renderToolsTab({
       selectedTool: mockTools[0],
     });
 
     // Enter a value in the first tool's input
     const input = screen.getByRole("spinbutton") as HTMLInputElement;
-    fireEvent.change(input, { target: { value: "42" } });
+    await act(async () => {
+      fireEvent.change(input, { target: { value: "42" } });
+    });
     expect(input.value).toBe("42");
 
     // Switch to second tool
@@ -80,7 +82,8 @@ describe("ToolsTab", () => {
     const newInput = screen.getByRole("spinbutton") as HTMLInputElement;
     expect(newInput.value).toBe("");
   });
-  it("should handle integer type inputs", () => {
+
+  it("should handle integer type inputs", async () => {
     renderToolsTab({
       selectedTool: mockTools[1], // Use the tool with integer type
     });
@@ -93,10 +96,49 @@ describe("ToolsTab", () => {
     expect(input.value).toBe("42");
 
     const submitButton = screen.getByRole("button", { name: /run tool/i });
-    fireEvent.click(submitButton);
+    await act(async () => {
+      fireEvent.click(submitButton);
+    });
 
     expect(defaultProps.callTool).toHaveBeenCalledWith(mockTools[1].name, {
       count: 42,
     });
   });
+
+  it("should disable button and change text while tool is running", async () => {
+    // Create a promise that we can resolve later
+    let resolvePromise: ((value: unknown) => void) | undefined;
+    const mockPromise = new Promise((resolve) => {
+      resolvePromise = resolve;
+    });
+
+    // Mock callTool to return our promise
+    const mockCallTool = jest.fn().mockReturnValue(mockPromise);
+
+    renderToolsTab({
+      selectedTool: mockTools[0],
+      callTool: mockCallTool,
+    });
+
+    const submitButton = screen.getByRole("button", { name: /run tool/i });
+    expect(submitButton.getAttribute("disabled")).toBeNull();
+
+    // Click the button and verify immediate state changes
+    await act(async () => {
+      fireEvent.click(submitButton);
+    });
+
+    // Verify button is disabled and text changed
+    expect(submitButton.getAttribute("disabled")).not.toBeNull();
+    expect(submitButton.textContent).toBe("Running...");
+
+    // Resolve the promise to simulate tool completion
+    await act(async () => {
+      if (resolvePromise) {
+        await resolvePromise({});
+      }
+    });
+
+    expect(submitButton.getAttribute("disabled")).toBeNull();
+  });
 });
diff --git a/client/src/lib/configurationTypes.ts b/client/src/lib/configurationTypes.ts
index d0c1263..b4dd86e 100644
--- a/client/src/lib/configurationTypes.ts
+++ b/client/src/lib/configurationTypes.ts
@@ -20,13 +20,13 @@ export type InspectorConfig = {
    * 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;
+  MCP_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;
+  MCP_REQUEST_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
diff --git a/client/src/lib/constants.ts b/client/src/lib/constants.ts
index 9caf4bc..f594827 100644
--- a/client/src/lib/constants.ts
+++ b/client/src/lib/constants.ts
@@ -25,12 +25,13 @@ export const DEFAULT_INSPECTOR_CONFIG: InspectorConfig = {
     description: "Timeout for requests to the MCP server (ms)",
     value: 10000,
   },
-  MCP_SERVER_REQUEST_TIMEOUT_RESET_ON_PROGRESS: {
+  MCP_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)",
+  MCP_REQUEST_MAX_TOTAL_TIMEOUT: {
+    description:
+      "Maximum total timeout for requests sent to the MCP server (ms) (Use with progress notifications)",
     value: 60000,
   },
   MCP_PROXY_FULL_ADDRESS: {
diff --git a/client/src/lib/hooks/__tests__/useConnection.test.tsx b/client/src/lib/hooks/__tests__/useConnection.test.tsx
index 7a96802..1671b70 100644
--- a/client/src/lib/hooks/__tests__/useConnection.test.tsx
+++ b/client/src/lib/hooks/__tests__/useConnection.test.tsx
@@ -95,11 +95,10 @@ describe("useConnection", () => {
         expect.objectContaining({
           timeout: DEFAULT_INSPECTOR_CONFIG.MCP_SERVER_REQUEST_TIMEOUT.value,
           maxTotalTimeout:
-            DEFAULT_INSPECTOR_CONFIG
-              .MCP_SERVER_REQUEST_TIMEOUT_MAX_TOTAL_TIMEOUT.value,
+            DEFAULT_INSPECTOR_CONFIG.MCP_REQUEST_MAX_TOTAL_TIMEOUT.value,
           resetTimeoutOnProgress:
-            DEFAULT_INSPECTOR_CONFIG
-              .MCP_SERVER_REQUEST_TIMEOUT_RESET_ON_PROGRESS.value,
+            DEFAULT_INSPECTOR_CONFIG.MCP_REQUEST_TIMEOUT_RESET_ON_PROGRESS
+              .value,
         }),
       );
     });
diff --git a/client/src/lib/hooks/useConnection.ts b/client/src/lib/hooks/useConnection.ts
index d67c623..ac4605c 100644
--- a/client/src/lib/hooks/useConnection.ts
+++ b/client/src/lib/hooks/useConnection.ts
@@ -8,7 +8,6 @@ import {
   ClientRequest,
   CreateMessageRequestSchema,
   ListRootsRequestSchema,
-  ProgressNotificationSchema,
   ResourceUpdatedNotificationSchema,
   LoggingMessageNotificationSchema,
   Request,
@@ -23,6 +22,7 @@ import {
   ResourceListChangedNotificationSchema,
   ToolListChangedNotificationSchema,
   PromptListChangedNotificationSchema,
+  Progress,
 } from "@modelcontextprotocol/sdk/types.js";
 import { RequestOptions } from "@modelcontextprotocol/sdk/shared/protocol.js";
 import { useState } from "react";
@@ -99,21 +99,38 @@ export function useConnection({
     if (!mcpClient) {
       throw new Error("MCP client not connected");
     }
-
     try {
       const abortController = new AbortController();
+
+      // prepare MCP Client request options
+      const mcpRequestOptions: RequestOptions = {
+        signal: options?.signal ?? abortController.signal,
+        resetTimeoutOnProgress:
+          options?.resetTimeoutOnProgress ??
+          resetRequestTimeoutOnProgress(config),
+        timeout: options?.timeout ?? getMCPServerRequestTimeout(config),
+        maxTotalTimeout:
+          options?.maxTotalTimeout ??
+          getMCPServerRequestMaxTotalTimeout(config),
+      };
+
+      // If progress notifications are enabled, add an onprogress hook to the MCP Client request options
+      // This is required by SDK to reset the timeout on progress notifications
+      if (mcpRequestOptions.resetTimeoutOnProgress) {
+        mcpRequestOptions.onprogress = (params: Progress) => {
+          // Add progress notification to `Server Notification` window in the UI
+          if (onNotification) {
+            onNotification({
+              method: "notification/progress",
+              params,
+            });
+          }
+        };
+      }
+
       let response;
       try {
-        response = await mcpClient.request(request, schema, {
-          signal: options?.signal ?? abortController.signal,
-          resetTimeoutOnProgress:
-            options?.resetTimeoutOnProgress ??
-            resetRequestTimeoutOnProgress(config),
-          timeout: options?.timeout ?? getMCPServerRequestTimeout(config),
-          maxTotalTimeout:
-            options?.maxTotalTimeout ??
-            getMCPServerRequestMaxTotalTimeout(config),
-        });
+        response = await mcpClient.request(request, schema, mcpRequestOptions);
 
         pushHistory(request, response);
       } catch (error) {
@@ -291,7 +308,6 @@ export function useConnection({
       if (onNotification) {
         [
           CancelledNotificationSchema,
-          ProgressNotificationSchema,
           LoggingMessageNotificationSchema,
           ResourceUpdatedNotificationSchema,
           ResourceListChangedNotificationSchema,
diff --git a/client/src/utils/configUtils.ts b/client/src/utils/configUtils.ts
index 577e86a..86e1643 100644
--- a/client/src/utils/configUtils.ts
+++ b/client/src/utils/configUtils.ts
@@ -16,11 +16,11 @@ export const getMCPServerRequestTimeout = (config: InspectorConfig): number => {
 export const resetRequestTimeoutOnProgress = (
   config: InspectorConfig,
 ): boolean => {
-  return config.MCP_SERVER_REQUEST_TIMEOUT_RESET_ON_PROGRESS.value as boolean;
+  return config.MCP_REQUEST_TIMEOUT_RESET_ON_PROGRESS.value as boolean;
 };
 
 export const getMCPServerRequestMaxTotalTimeout = (
   config: InspectorConfig,
 ): number => {
-  return config.MCP_SERVER_REQUEST_TIMEOUT_MAX_TOTAL_TIMEOUT.value as number;
+  return config.MCP_REQUEST_MAX_TOTAL_TIMEOUT.value as number;
 };
diff --git a/package-lock.json b/package-lock.json
index e626474..1f0b1a0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,20 +1,20 @@
 {
   "name": "@modelcontextprotocol/inspector",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@modelcontextprotocol/inspector",
-      "version": "0.8.0",
+      "version": "0.8.1",
       "license": "MIT",
       "workspaces": [
         "client",
         "server"
       ],
       "dependencies": {
-        "@modelcontextprotocol/inspector-client": "^0.8.0",
-        "@modelcontextprotocol/inspector-server": "^0.8.0",
+        "@modelcontextprotocol/inspector-client": "^0.8.1",
+        "@modelcontextprotocol/inspector-server": "^0.8.1",
         "concurrently": "^9.0.1",
         "shell-quote": "^1.8.2",
         "spawn-rx": "^5.1.2",
@@ -32,10 +32,10 @@
     },
     "client": {
       "name": "@modelcontextprotocol/inspector-client",
-      "version": "0.8.0",
+      "version": "0.8.1",
       "license": "MIT",
       "dependencies": {
-        "@modelcontextprotocol/sdk": "^1.6.1",
+        "@modelcontextprotocol/sdk": "^1.8.0",
         "@radix-ui/react-checkbox": "^1.1.4",
         "@radix-ui/react-dialog": "^1.1.3",
         "@radix-ui/react-icons": "^1.3.0",
@@ -1329,11 +1329,13 @@
       "link": true
     },
     "node_modules/@modelcontextprotocol/sdk": {
-      "version": "1.6.1",
-      "license": "MIT",
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/@modelcontextprotocol/sdk/-/sdk-1.8.0.tgz",
+      "integrity": "sha512-e06W7SwrontJDHwCawNO5SGxG+nU9AAx+jpHHZqGl/WrDBdWOpvirC+s58VpJTB5QemI4jTRcjWT4Pt3Q1NPQQ==",
       "dependencies": {
         "content-type": "^1.0.5",
         "cors": "^2.8.5",
+        "cross-spawn": "^7.0.3",
         "eventsource": "^3.0.2",
         "express": "^5.0.1",
         "express-rate-limit": "^7.5.0",
@@ -9483,10 +9485,10 @@
     },
     "server": {
       "name": "@modelcontextprotocol/inspector-server",
-      "version": "0.8.0",
+      "version": "0.8.1",
       "license": "MIT",
       "dependencies": {
-        "@modelcontextprotocol/sdk": "^1.6.1",
+        "@modelcontextprotocol/sdk": "^1.8.0",
         "cors": "^2.8.5",
         "express": "^4.21.0",
         "ws": "^8.18.0",

From 6be05c5278ae830bcee8915fa5d02a03cff0218d Mon Sep 17 00:00:00 2001
From: Pulkit Sharma <avastpulkit@gmail.com>
Date: Sat, 5 Apr 2025 13:06:25 +0530
Subject: [PATCH 06/19] update docs

---
 README.md | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index c43f943..a11e13a 100644
--- a/README.md
+++ b/README.md
@@ -48,12 +48,16 @@ The MCP Inspector includes a proxy server that can run and communicate with loca
 
 ### Configuration
 
-The MCP Inspector supports the following configuration settings. To change them click on the `Configuration` button in the MCP Inspector UI :
+The MCP Inspector supports the following configuration settings. To change them, click on the `Configuration` button in the MCP Inspector UI:
 
-| Name                       | Purpose                                                                                   | Default Value |
-| -------------------------- | ----------------------------------------------------------------------------------------- | ------------- |
-| MCP_SERVER_REQUEST_TIMEOUT | Maximum time in milliseconds to wait for a response from the MCP server before timing out | 10000         |
-| MCP_PROXY_FULL_ADDRESS     | The full URL of the MCP Inspector proxy server (e.g. `http://10.2.1.14:2277`)             | `null`        |
+| Setting                                 | Description                                                                                                  | Default |
+| --------------------------------------- | ------------------------------------------------------------------------------------------------------------ | ------- |
+| `MCP_SERVER_REQUEST_TIMEOUT`            | Timeout for requests to the MCP server (ms)                                                                  | 10000   |
+| `MCP_REQUEST_TIMEOUT_RESET_ON_PROGRESS` | Reset timeout on progress notifications                                                                      | true    |
+| `MCP_REQUEST_MAX_TOTAL_TIMEOUT`         | Maximum total timeout for requests sent to the MCP server (ms) (Use with progress notifications)             | 60000   |
+| `MCP_PROXY_FULL_ADDRESS`                | Set this if you are running the MCP Inspector Proxy on a non-default address. Example: http://10.1.1.22:5577 | ""      |
+
+These settings can be adjusted in real-time through the UI and will persist across sessions.
 
 ### From this repository
 

From 8d20044b33dfb53ebad7f642fe68f3726f5028c6 Mon Sep 17 00:00:00 2001
From: Nathan Arseneau <arseneau.nathan@gmail.com>
Date: Sat, 5 Apr 2025 11:47:44 -0400
Subject: [PATCH 07/19] fix darkmode color and padding for the tab item

---
 client/src/components/PromptsTab.tsx   | 2 +-
 client/src/components/ResourcesTab.tsx | 2 +-
 client/src/components/ToolsTab.tsx     | 2 +-
 client/src/components/ui/tabs.tsx      | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/client/src/components/PromptsTab.tsx b/client/src/components/PromptsTab.tsx
index 48c847d..6470673 100644
--- a/client/src/components/PromptsTab.tsx
+++ b/client/src/components/PromptsTab.tsx
@@ -105,7 +105,7 @@ const PromptsTab = ({
       />
 
       <div className="bg-card rounded-lg shadow">
-        <div className="p-4 border-b border-gray-200">
+        <div className="p-4 border-b border-gray-200 dark:border-gray-700">
           <h3 className="font-semibold">
             {selectedPrompt ? selectedPrompt.name : "Select a prompt"}
           </h3>
diff --git a/client/src/components/ResourcesTab.tsx b/client/src/components/ResourcesTab.tsx
index 2a10824..f27c91c 100644
--- a/client/src/components/ResourcesTab.tsx
+++ b/client/src/components/ResourcesTab.tsx
@@ -161,7 +161,7 @@ const ResourcesTab = ({
       />
 
       <div className="bg-card rounded-lg shadow">
-        <div className="p-4 border-b border-gray-200 flex justify-between items-center">
+        <div className="p-4 border-b border-gray-200 dark:border-gray-700 flex justify-between items-center">
           <h3
             className="font-semibold truncate"
             title={selectedResource?.name || selectedTemplate?.name}
diff --git a/client/src/components/ToolsTab.tsx b/client/src/components/ToolsTab.tsx
index a9e9bf8..2320624 100644
--- a/client/src/components/ToolsTab.tsx
+++ b/client/src/components/ToolsTab.tsx
@@ -129,7 +129,7 @@ const ToolsTab = ({
       />
 
       <div className="bg-card rounded-lg shadow">
-        <div className="p-4 border-b border-gray-200">
+        <div className="p-4 border-b border-gray-200 dark:border-gray-700">
           <h3 className="font-semibold">
             {selectedTool ? selectedTool.name : "Select a tool"}
           </h3>
diff --git a/client/src/components/ui/tabs.tsx b/client/src/components/ui/tabs.tsx
index d1b685f..55b941a 100644
--- a/client/src/components/ui/tabs.tsx
+++ b/client/src/components/ui/tabs.tsx
@@ -42,7 +42,7 @@ const TabsContent = React.forwardRef<
   <TabsPrimitive.Content
     ref={ref}
     className={cn(
-      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      "ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
       className,
     )}
     {...props}

From a3be8f6376b9abe580113b15c508982db840ca77 Mon Sep 17 00:00:00 2001
From: kavinkumarbaskar <kavinkumarbaskar@gmail.com>
Date: Sat, 5 Apr 2025 23:24:10 +0530
Subject: [PATCH 08/19] feat: highlight tool errors in red text

---
 client/src/components/JsonView.tsx | 15 ++++++++++-----
 client/src/components/ToolsTab.tsx |  4 ++--
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/client/src/components/JsonView.tsx b/client/src/components/JsonView.tsx
index b59f3cc..a4ed95f 100644
--- a/client/src/components/JsonView.tsx
+++ b/client/src/components/JsonView.tsx
@@ -11,6 +11,7 @@ interface JsonViewProps {
   initialExpandDepth?: number;
   className?: string;
   withCopyButton?: boolean;
+  isError?: boolean;
 }
 
 function tryParseJson(str: string): { success: boolean; data: JsonValue } {
@@ -35,6 +36,7 @@ const JsonView = memo(
     initialExpandDepth = 3,
     className,
     withCopyButton = true,
+    isError = false
   }: JsonViewProps) => {
     const { toast } = useToast();
     const [copied, setCopied] = useState(false);
@@ -100,6 +102,7 @@ const JsonView = memo(
             name={name}
             depth={0}
             initialExpandDepth={initialExpandDepth}
+            isError = {isError}
           />
         </div>
       </div>
@@ -114,10 +117,11 @@ interface JsonNodeProps {
   name?: string;
   depth: number;
   initialExpandDepth: number;
+  isError?: boolean;
 }
 
 const JsonNode = memo(
-  ({ data, name, depth = 0, initialExpandDepth }: JsonNodeProps) => {
+  ({ data, name, depth = 0, initialExpandDepth, isError = false }: JsonNodeProps) => {
     const [isExpanded, setIsExpanded] = useState(depth < initialExpandDepth);
 
     const getDataType = (value: JsonValue): string => {
@@ -133,7 +137,8 @@ const JsonNode = memo(
       boolean: "text-amber-600",
       null: "text-purple-600",
       undefined: "text-gray-600",
-      string: "text-green-600 break-all whitespace-pre-wrap",
+      string: "text-green-600 group-hover:text-green-500",
+      error: "text-red-600 group-hover:text-red-500",
       default: "text-gray-700",
     };
 
@@ -236,7 +241,7 @@ const JsonNode = memo(
                 {name}:
               </span>
             )}
-            <pre className={typeStyleMap.string}>"{value}"</pre>
+            <pre className={clsx(typeStyleMap.string, "break-all whitespace-pre-wrap")}>"{value}"</pre>
           </div>
         );
       }
@@ -250,8 +255,8 @@ const JsonNode = memo(
           )}
           <pre
             className={clsx(
-              typeStyleMap.string,
-              "cursor-pointer group-hover:text-green-500",
+              isError ? typeStyleMap.error : typeStyleMap.string,
+              "cursor-pointer break-all whitespace-pre-wrap",
             )}
             onClick={() => setIsExpanded(!isExpanded)}
             title={isExpanded ? "Click to collapse" : "Click to expand"}
diff --git a/client/src/components/ToolsTab.tsx b/client/src/components/ToolsTab.tsx
index a9e9bf8..7f84eac 100644
--- a/client/src/components/ToolsTab.tsx
+++ b/client/src/components/ToolsTab.tsx
@@ -66,11 +66,11 @@ const ToolsTab = ({
       return (
         <>
           <h4 className="font-semibold mb-2">
-            Tool Result: {isError ? "Error" : "Success"}
+            Tool Result: {isError ? <span className="text-red-600 font-semibold">Error</span> : <span className="text-green-600 font-semibold">Success</span>}
           </h4>
           {structuredResult.content.map((item, index) => (
             <div key={index} className="mb-2">
-              {item.type === "text" && <JsonView data={item.text} />}
+              {item.type === "text" && <JsonView data={item.text} isError={isError}/>}
               {item.type === "image" && (
                 <img
                   src={`data:${item.mimeType};base64,${item.data}`}

From ca1854b0719fa9566de5003be176136df61579fc Mon Sep 17 00:00:00 2001
From: kavinkumarbaskar <kavinkumarbaskar@gmail.com>
Date: Sat, 5 Apr 2025 23:32:10 +0530
Subject: [PATCH 09/19] ran npm run prettier-fix  command to fix the code
 styling

---
 client/src/components/JsonView.tsx | 21 +++++++++++++++++----
 client/src/components/ToolsTab.tsx | 11 +++++++++--
 2 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/client/src/components/JsonView.tsx b/client/src/components/JsonView.tsx
index a4ed95f..46a267d 100644
--- a/client/src/components/JsonView.tsx
+++ b/client/src/components/JsonView.tsx
@@ -36,7 +36,7 @@ const JsonView = memo(
     initialExpandDepth = 3,
     className,
     withCopyButton = true,
-    isError = false
+    isError = false,
   }: JsonViewProps) => {
     const { toast } = useToast();
     const [copied, setCopied] = useState(false);
@@ -102,7 +102,7 @@ const JsonView = memo(
             name={name}
             depth={0}
             initialExpandDepth={initialExpandDepth}
-            isError = {isError}
+            isError={isError}
           />
         </div>
       </div>
@@ -121,7 +121,13 @@ interface JsonNodeProps {
 }
 
 const JsonNode = memo(
-  ({ data, name, depth = 0, initialExpandDepth, isError = false }: JsonNodeProps) => {
+  ({
+    data,
+    name,
+    depth = 0,
+    initialExpandDepth,
+    isError = false,
+  }: JsonNodeProps) => {
     const [isExpanded, setIsExpanded] = useState(depth < initialExpandDepth);
 
     const getDataType = (value: JsonValue): string => {
@@ -241,7 +247,14 @@ const JsonNode = memo(
                 {name}:
               </span>
             )}
-            <pre className={clsx(typeStyleMap.string, "break-all whitespace-pre-wrap")}>"{value}"</pre>
+            <pre
+              className={clsx(
+                typeStyleMap.string,
+                "break-all whitespace-pre-wrap",
+              )}
+            >
+              "{value}"
+            </pre>
           </div>
         );
       }
diff --git a/client/src/components/ToolsTab.tsx b/client/src/components/ToolsTab.tsx
index 7f84eac..bc598e7 100644
--- a/client/src/components/ToolsTab.tsx
+++ b/client/src/components/ToolsTab.tsx
@@ -66,11 +66,18 @@ const ToolsTab = ({
       return (
         <>
           <h4 className="font-semibold mb-2">
-            Tool Result: {isError ? <span className="text-red-600 font-semibold">Error</span> : <span className="text-green-600 font-semibold">Success</span>}
+            Tool Result:{" "}
+            {isError ? (
+              <span className="text-red-600 font-semibold">Error</span>
+            ) : (
+              <span className="text-green-600 font-semibold">Success</span>
+            )}
           </h4>
           {structuredResult.content.map((item, index) => (
             <div key={index} className="mb-2">
-              {item.type === "text" && <JsonView data={item.text} isError={isError}/>}
+              {item.type === "text" && (
+                <JsonView data={item.text} isError={isError} />
+              )}
               {item.type === "image" && (
                 <img
                   src={`data:${item.mimeType};base64,${item.data}`}

From a506e4c4194fa8e69a93462880119519b87808e3 Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Mon, 7 Apr 2025 12:19:34 -0400
Subject: [PATCH 10/19] Bump version to 0.8.2 * In package.json   - Use
 inspector-[client|server] version 0.8.2 * In [client|server]/package.json   -
 New version to 0.8.2   - Use typescript SDK version 1.9.0 * In
 package-lock.json   - above changes   - sdk dependency's version increased:
 node_modules/@modelcontextprotocol/sdk/node_modules/pkce-challenge

---
 client/package.json |  4 ++--
 package-lock.json   | 33 +++++++++++++++++++++------------
 package.json        |  6 +++---
 server/package.json |  4 ++--
 4 files changed, 28 insertions(+), 19 deletions(-)

diff --git a/client/package.json b/client/package.json
index f43ab23..30955a9 100644
--- a/client/package.json
+++ b/client/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@modelcontextprotocol/inspector-client",
-  "version": "0.8.1",
+  "version": "0.8.2",
   "description": "Client-side application for the Model Context Protocol inspector",
   "license": "MIT",
   "author": "Anthropic, PBC (https://anthropic.com)",
@@ -23,7 +23,7 @@
     "test:watch": "jest --config jest.config.cjs --watch"
   },
   "dependencies": {
-    "@modelcontextprotocol/sdk": "^1.8.0",
+    "@modelcontextprotocol/sdk": "^1.9.0",
     "@radix-ui/react-checkbox": "^1.1.4",
     "@radix-ui/react-dialog": "^1.1.3",
     "@radix-ui/react-icons": "^1.3.0",
diff --git a/package-lock.json b/package-lock.json
index 42fec87..534c05d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,20 +1,20 @@
 {
   "name": "@modelcontextprotocol/inspector",
-  "version": "0.8.1",
+  "version": "0.8.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@modelcontextprotocol/inspector",
-      "version": "0.8.1",
+      "version": "0.8.2",
       "license": "MIT",
       "workspaces": [
         "client",
         "server"
       ],
       "dependencies": {
-        "@modelcontextprotocol/inspector-client": "^0.8.1",
-        "@modelcontextprotocol/inspector-server": "^0.8.1",
+        "@modelcontextprotocol/inspector-client": "^0.8.2",
+        "@modelcontextprotocol/inspector-server": "^0.8.2",
         "concurrently": "^9.0.1",
         "shell-quote": "^1.8.2",
         "spawn-rx": "^5.1.2",
@@ -32,10 +32,10 @@
     },
     "client": {
       "name": "@modelcontextprotocol/inspector-client",
-      "version": "0.8.1",
+      "version": "0.8.2",
       "license": "MIT",
       "dependencies": {
-        "@modelcontextprotocol/sdk": "^1.8.0",
+        "@modelcontextprotocol/sdk": "^1.9.0",
         "@radix-ui/react-checkbox": "^1.1.4",
         "@radix-ui/react-dialog": "^1.1.3",
         "@radix-ui/react-icons": "^1.3.0",
@@ -1329,9 +1329,9 @@
       "link": true
     },
     "node_modules/@modelcontextprotocol/sdk": {
-      "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/@modelcontextprotocol/sdk/-/sdk-1.8.0.tgz",
-      "integrity": "sha512-e06W7SwrontJDHwCawNO5SGxG+nU9AAx+jpHHZqGl/WrDBdWOpvirC+s58VpJTB5QemI4jTRcjWT4Pt3Q1NPQQ==",
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@modelcontextprotocol/sdk/-/sdk-1.9.0.tgz",
+      "integrity": "sha512-Jq2EUCQpe0iyO5FGpzVYDNFR6oR53AIrwph9yWl7uSc7IWUMsrmpmSaTGra5hQNunXpM+9oit85p924jWuHzUA==",
       "license": "MIT",
       "dependencies": {
         "content-type": "^1.0.5",
@@ -1340,7 +1340,7 @@
         "eventsource": "^3.0.2",
         "express": "^5.0.1",
         "express-rate-limit": "^7.5.0",
-        "pkce-challenge": "^4.1.0",
+        "pkce-challenge": "^5.0.0",
         "raw-body": "^3.0.0",
         "zod": "^3.23.8",
         "zod-to-json-schema": "^3.24.1"
@@ -1585,6 +1585,15 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/@modelcontextprotocol/sdk/node_modules/pkce-challenge": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/pkce-challenge/-/pkce-challenge-5.0.0.tgz",
+      "integrity": "sha512-ueGLflrrnvwB3xuo/uGob5pd5FN7l0MsLf0Z87o/UQmRtwjvfylfc9MurIxRAWywCYTgrvpXBcqjV4OfCYGCIQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
     "node_modules/@modelcontextprotocol/sdk/node_modules/send": {
       "version": "1.1.0",
       "license": "MIT",
@@ -9486,10 +9495,10 @@
     },
     "server": {
       "name": "@modelcontextprotocol/inspector-server",
-      "version": "0.8.1",
+      "version": "0.8.2",
       "license": "MIT",
       "dependencies": {
-        "@modelcontextprotocol/sdk": "^1.8.0",
+        "@modelcontextprotocol/sdk": "^1.9.0",
         "cors": "^2.8.5",
         "express": "^4.21.0",
         "ws": "^8.18.0",
diff --git a/package.json b/package.json
index 453fa71..f9d2217 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@modelcontextprotocol/inspector",
-  "version": "0.8.1",
+  "version": "0.8.2",
   "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.8.1",
-    "@modelcontextprotocol/inspector-server": "^0.8.1",
+    "@modelcontextprotocol/inspector-client": "^0.8.2",
+    "@modelcontextprotocol/inspector-server": "^0.8.2",
     "concurrently": "^9.0.1",
     "shell-quote": "^1.8.2",
     "spawn-rx": "^5.1.2",
diff --git a/server/package.json b/server/package.json
index 9da3ca8..248db61 100644
--- a/server/package.json
+++ b/server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@modelcontextprotocol/inspector-server",
-  "version": "0.8.1",
+  "version": "0.8.2",
   "description": "Server-side application for the Model Context Protocol inspector",
   "license": "MIT",
   "author": "Anthropic, PBC (https://anthropic.com)",
@@ -27,7 +27,7 @@
     "typescript": "^5.6.2"
   },
   "dependencies": {
-    "@modelcontextprotocol/sdk": "^1.8.0",
+    "@modelcontextprotocol/sdk": "^1.9.0",
     "cors": "^2.8.5",
     "express": "^4.21.0",
     "ws": "^8.18.0",

From 6bcf1531c3c7ec8baad5ed54e25171a52172e212 Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Mon, 7 Apr 2025 12:32:06 -0400
Subject: [PATCH 11/19] Bump version to 0.8.2 * In README   - Point to
 inspector screenshot's rawcontent address so it doesn't appear as a broken
 image in the NPM package view.

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index c43f943..d307b01 100644
--- a/README.md
+++ b/README.md
@@ -2,7 +2,7 @@
 
 The MCP inspector is a developer tool for testing and debugging MCP servers.
 
-![MCP Inspector Screenshot](mcp-inspector.png)
+![MCP Inspector Screenshot](https://raw.githubusercontent.com/modelcontextprotocol/inspector/main/mcp-inspector.png)
 
 ## Running the Inspector
 

From c5dc4ded5c9ac260cb12845b43245260e9c27ac9 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Mon, 7 Apr 2025 17:30:21 +0000
Subject: [PATCH 12/19] Bump vite in the npm_and_yarn group across 1 directory

Bumps the npm_and_yarn group with 1 update in the / directory: [vite](https://github.com/vitejs/vite/tree/HEAD/packages/vite).


Updates `vite` from 5.4.16 to 5.4.17
- [Release notes](https://github.com/vitejs/vite/releases)
- [Changelog](https://github.com/vitejs/vite/blob/v5.4.17/packages/vite/CHANGELOG.md)
- [Commits](https://github.com/vitejs/vite/commits/v5.4.17/packages/vite)

---
updated-dependencies:
- dependency-name: vite
  dependency-version: 5.4.17
  dependency-type: direct:development
  dependency-group: npm_and_yarn
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 package-lock.json | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/package-lock.json b/package-lock.json
index 534c05d..dacfab8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9133,7 +9133,9 @@
       }
     },
     "node_modules/vite": {
-      "version": "5.4.16",
+      "version": "5.4.17",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.17.tgz",
+      "integrity": "sha512-5+VqZryDj4wgCs55o9Lp+p8GE78TLVg0lasCH5xFZ4jacZjtqZa6JUw9/p0WeAojaOfncSM6v77InkFPGnvPvg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {

From f71613227f29703bcfe97fc645ed72e385bce9c2 Mon Sep 17 00:00:00 2001
From: Pulkit Sharma <avastpulkit@gmail.com>
Date: Wed, 9 Apr 2025 00:40:42 +0530
Subject: [PATCH 13/19] rename

---
 client/src/App.tsx | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/client/src/App.tsx b/client/src/App.tsx
index dd7894f..68d67a9 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -275,7 +275,7 @@ const App = () => {
     setErrors((prev) => ({ ...prev, [tabKey]: null }));
   };
 
-  const makeConnectionRequest = async <T extends z.ZodType>(
+  const sendMCPRequest = async <T extends z.ZodType>(
     request: ClientRequest,
     schema: T,
     tabKey?: keyof typeof errors,
@@ -299,7 +299,7 @@ const App = () => {
   };
 
   const listResources = async () => {
-    const response = await makeConnectionRequest(
+    const response = await sendMCPRequest(
       {
         method: "resources/list" as const,
         params: nextResourceCursor ? { cursor: nextResourceCursor } : {},
@@ -312,7 +312,7 @@ const App = () => {
   };
 
   const listResourceTemplates = async () => {
-    const response = await makeConnectionRequest(
+    const response = await sendMCPRequest(
       {
         method: "resources/templates/list" as const,
         params: nextResourceTemplateCursor
@@ -329,7 +329,7 @@ const App = () => {
   };
 
   const readResource = async (uri: string) => {
-    const response = await makeConnectionRequest(
+    const response = await sendMCPRequest(
       {
         method: "resources/read" as const,
         params: { uri },
@@ -342,7 +342,7 @@ const App = () => {
 
   const subscribeToResource = async (uri: string) => {
     if (!resourceSubscriptions.has(uri)) {
-      await makeConnectionRequest(
+      await sendMCPRequest(
         {
           method: "resources/subscribe" as const,
           params: { uri },
@@ -358,7 +358,7 @@ const App = () => {
 
   const unsubscribeFromResource = async (uri: string) => {
     if (resourceSubscriptions.has(uri)) {
-      await makeConnectionRequest(
+      await sendMCPRequest(
         {
           method: "resources/unsubscribe" as const,
           params: { uri },
@@ -373,7 +373,7 @@ const App = () => {
   };
 
   const listPrompts = async () => {
-    const response = await makeConnectionRequest(
+    const response = await sendMCPRequest(
       {
         method: "prompts/list" as const,
         params: nextPromptCursor ? { cursor: nextPromptCursor } : {},
@@ -386,7 +386,7 @@ const App = () => {
   };
 
   const getPrompt = async (name: string, args: Record<string, string> = {}) => {
-    const response = await makeConnectionRequest(
+    const response = await sendMCPRequest(
       {
         method: "prompts/get" as const,
         params: { name, arguments: args },
@@ -398,7 +398,7 @@ const App = () => {
   };
 
   const listTools = async () => {
-    const response = await makeConnectionRequest(
+    const response = await sendMCPRequest(
       {
         method: "tools/list" as const,
         params: nextToolCursor ? { cursor: nextToolCursor } : {},
@@ -412,7 +412,7 @@ const App = () => {
 
   const callTool = async (name: string, params: Record<string, unknown>) => {
     try {
-      const response = await makeConnectionRequest(
+      const response = await sendMCPRequest(
         {
           method: "tools/call" as const,
           params: {
@@ -446,7 +446,7 @@ const App = () => {
   };
 
   const sendLogLevelRequest = async (level: LoggingLevel) => {
-    await makeConnectionRequest(
+    await sendMCPRequest(
       {
         method: "logging/setLevel" as const,
         params: { level },
@@ -664,7 +664,7 @@ const App = () => {
                     <ConsoleTab />
                     <PingTab
                       onPingClick={() => {
-                        void makeConnectionRequest(
+                        void sendMCPRequest(
                           {
                             method: "ping" as const,
                           },

From 48917ca4e5f3aefd4207f49fb82afa94c91c5c92 Mon Sep 17 00:00:00 2001
From: Pulkit Sharma <avastpulkit@gmail.com>
Date: Wed, 9 Apr 2025 01:12:02 +0530
Subject: [PATCH 14/19] don't show full config keys

---
 client/src/App.tsx                               | 14 +++++++++++++-
 client/src/components/Sidebar.tsx                |  2 +-
 client/src/components/__tests__/Sidebar.test.tsx | 12 +++++-------
 client/src/lib/constants.ts                      | 10 ++++------
 4 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/client/src/App.tsx b/client/src/App.tsx
index 68d67a9..e2aab1b 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -95,10 +95,22 @@ const App = () => {
   const [config, setConfig] = useState<InspectorConfig>(() => {
     const savedConfig = localStorage.getItem(CONFIG_LOCAL_STORAGE_KEY);
     if (savedConfig) {
-      return {
+      // merge default config with saved config
+      const mergedConfig = {
         ...DEFAULT_INSPECTOR_CONFIG,
         ...JSON.parse(savedConfig),
       } as InspectorConfig;
+
+      // update description of keys to match the new description (in case of any updates to the default config description)
+      Object.entries(mergedConfig).forEach(([key, value]) => {
+        mergedConfig[key as keyof InspectorConfig] = {
+          ...value,
+          description:
+            DEFAULT_INSPECTOR_CONFIG[key as keyof InspectorConfig].description,
+        };
+      });
+
+      return mergedConfig;
     }
     return DEFAULT_INSPECTOR_CONFIG;
   });
diff --git a/client/src/components/Sidebar.tsx b/client/src/components/Sidebar.tsx
index 039453e..2ef54b1 100644
--- a/client/src/components/Sidebar.tsx
+++ b/client/src/components/Sidebar.tsx
@@ -326,7 +326,7 @@ const Sidebar = ({
                     <div key={key} className="space-y-2">
                       <div className="flex items-center gap-1">
                         <label className="text-sm font-medium text-green-600 break-all">
-                          {configKey}
+                          {configItem.description}
                         </label>
                         <Tooltip>
                           <TooltipTrigger asChild>
diff --git a/client/src/components/__tests__/Sidebar.test.tsx b/client/src/components/__tests__/Sidebar.test.tsx
index 4d0e3f1..f373a41 100644
--- a/client/src/components/__tests__/Sidebar.test.tsx
+++ b/client/src/components/__tests__/Sidebar.test.tsx
@@ -343,7 +343,7 @@ describe("Sidebar Environment Variables", () => {
       expect(setConfig).toHaveBeenCalledWith(
         expect.objectContaining({
           MCP_SERVER_REQUEST_TIMEOUT: {
-            description: "Timeout for requests to the MCP server (ms)",
+            description: "Request Timeout",
             value: 5000,
           },
         }),
@@ -366,8 +366,7 @@ describe("Sidebar Environment Variables", () => {
       expect(setConfig).toHaveBeenCalledWith(
         expect.objectContaining({
           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",
+            description: "Inspector Proxy Address",
             value: "http://localhost:8080",
           },
         }),
@@ -390,8 +389,7 @@ describe("Sidebar Environment Variables", () => {
       expect(setConfig).toHaveBeenCalledWith(
         expect.objectContaining({
           MCP_REQUEST_MAX_TOTAL_TIMEOUT: {
-            description:
-              "Maximum total timeout for requests sent to the MCP server (ms) (Use with progress notifications)",
+            description: "Maximum Total Timeout",
             value: 10000,
           },
         }),
@@ -412,7 +410,7 @@ describe("Sidebar Environment Variables", () => {
       expect(setConfig).toHaveBeenCalledWith(
         expect.objectContaining({
           MCP_SERVER_REQUEST_TIMEOUT: {
-            description: "Timeout for requests to the MCP server (ms)",
+            description: "Request Timeout",
             value: 0,
           },
         }),
@@ -457,7 +455,7 @@ describe("Sidebar Environment Variables", () => {
       expect(setConfig).toHaveBeenLastCalledWith(
         expect.objectContaining({
           MCP_SERVER_REQUEST_TIMEOUT: {
-            description: "Timeout for requests to the MCP server (ms)",
+            description: "Request Timeout",
             value: 3000,
           },
         }),
diff --git a/client/src/lib/constants.ts b/client/src/lib/constants.ts
index f594827..1a772f5 100644
--- a/client/src/lib/constants.ts
+++ b/client/src/lib/constants.ts
@@ -22,21 +22,19 @@ export const DEFAULT_MCP_PROXY_LISTEN_PORT = "6277";
  **/
 export const DEFAULT_INSPECTOR_CONFIG: InspectorConfig = {
   MCP_SERVER_REQUEST_TIMEOUT: {
-    description: "Timeout for requests to the MCP server (ms)",
+    description: "Request Timeout",
     value: 10000,
   },
   MCP_REQUEST_TIMEOUT_RESET_ON_PROGRESS: {
-    description: "Reset timeout on progress notifications",
+    description: "Reset Timeout on Progress",
     value: true,
   },
   MCP_REQUEST_MAX_TOTAL_TIMEOUT: {
-    description:
-      "Maximum total timeout for requests sent to the MCP server (ms) (Use with progress notifications)",
+    description: "Maximum Total Timeout",
     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",
+    description: "Inspector Proxy Address",
     value: "",
   },
 } as const;

From 9c6663c4c26dddf708bb01ab2f983ec7af08d3db Mon Sep 17 00:00:00 2001
From: Pulkit Sharma <avastpulkit@gmail.com>
Date: Wed, 9 Apr 2025 01:24:23 +0530
Subject: [PATCH 15/19] add label to configItem, use that in UI

---
 client/src/App.tsx                              |  3 +--
 client/src/components/Sidebar.tsx               |  2 +-
 .../src/components/__tests__/Sidebar.test.tsx   | 17 ++++++++++++-----
 client/src/lib/configurationTypes.ts            |  1 +
 client/src/lib/constants.ts                     | 14 ++++++++++----
 5 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/client/src/App.tsx b/client/src/App.tsx
index e2aab1b..4f99ffd 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -105,8 +105,7 @@ const App = () => {
       Object.entries(mergedConfig).forEach(([key, value]) => {
         mergedConfig[key as keyof InspectorConfig] = {
           ...value,
-          description:
-            DEFAULT_INSPECTOR_CONFIG[key as keyof InspectorConfig].description,
+          label: DEFAULT_INSPECTOR_CONFIG[key as keyof InspectorConfig].label,
         };
       });
 
diff --git a/client/src/components/Sidebar.tsx b/client/src/components/Sidebar.tsx
index 2ef54b1..4633d64 100644
--- a/client/src/components/Sidebar.tsx
+++ b/client/src/components/Sidebar.tsx
@@ -326,7 +326,7 @@ const Sidebar = ({
                     <div key={key} className="space-y-2">
                       <div className="flex items-center gap-1">
                         <label className="text-sm font-medium text-green-600 break-all">
-                          {configItem.description}
+                          {configItem.label}
                         </label>
                         <Tooltip>
                           <TooltipTrigger asChild>
diff --git a/client/src/components/__tests__/Sidebar.test.tsx b/client/src/components/__tests__/Sidebar.test.tsx
index f373a41..8e72b00 100644
--- a/client/src/components/__tests__/Sidebar.test.tsx
+++ b/client/src/components/__tests__/Sidebar.test.tsx
@@ -343,7 +343,8 @@ describe("Sidebar Environment Variables", () => {
       expect(setConfig).toHaveBeenCalledWith(
         expect.objectContaining({
           MCP_SERVER_REQUEST_TIMEOUT: {
-            description: "Request Timeout",
+            label: "Request Timeout",
+            description: "Timeout for requests to the MCP server (ms)",
             value: 5000,
           },
         }),
@@ -366,7 +367,9 @@ describe("Sidebar Environment Variables", () => {
       expect(setConfig).toHaveBeenCalledWith(
         expect.objectContaining({
           MCP_PROXY_FULL_ADDRESS: {
-            description: "Inspector Proxy Address",
+            label: "Inspector Proxy Address",
+            description:
+              "Set this if you are running the MCP Inspector Proxy on a non-default address. Example: http://10.1.1.22:5577",
             value: "http://localhost:8080",
           },
         }),
@@ -389,7 +392,9 @@ describe("Sidebar Environment Variables", () => {
       expect(setConfig).toHaveBeenCalledWith(
         expect.objectContaining({
           MCP_REQUEST_MAX_TOTAL_TIMEOUT: {
-            description: "Maximum Total Timeout",
+            label: "Maximum Total Timeout",
+            description:
+              "Maximum total timeout for requests sent to the MCP server (ms) (Use with progress notifications)",
             value: 10000,
           },
         }),
@@ -410,7 +415,8 @@ describe("Sidebar Environment Variables", () => {
       expect(setConfig).toHaveBeenCalledWith(
         expect.objectContaining({
           MCP_SERVER_REQUEST_TIMEOUT: {
-            description: "Request Timeout",
+            label: "Request Timeout",
+            description: "Timeout for requests to the MCP server (ms)",
             value: 0,
           },
         }),
@@ -455,7 +461,8 @@ describe("Sidebar Environment Variables", () => {
       expect(setConfig).toHaveBeenLastCalledWith(
         expect.objectContaining({
           MCP_SERVER_REQUEST_TIMEOUT: {
-            description: "Request Timeout",
+            label: "Request Timeout",
+            description: "Timeout for requests to the MCP server (ms)",
             value: 3000,
           },
         }),
diff --git a/client/src/lib/configurationTypes.ts b/client/src/lib/configurationTypes.ts
index b4dd86e..7c74bb7 100644
--- a/client/src/lib/configurationTypes.ts
+++ b/client/src/lib/configurationTypes.ts
@@ -1,4 +1,5 @@
 export type ConfigItem = {
+  label: string;
   description: string;
   value: string | number | boolean;
 };
diff --git a/client/src/lib/constants.ts b/client/src/lib/constants.ts
index 1a772f5..e7fa14c 100644
--- a/client/src/lib/constants.ts
+++ b/client/src/lib/constants.ts
@@ -22,19 +22,25 @@ export const DEFAULT_MCP_PROXY_LISTEN_PORT = "6277";
  **/
 export const DEFAULT_INSPECTOR_CONFIG: InspectorConfig = {
   MCP_SERVER_REQUEST_TIMEOUT: {
-    description: "Request Timeout",
+    label: "Request Timeout",
+    description: "Timeout for requests to the MCP server (ms)",
     value: 10000,
   },
   MCP_REQUEST_TIMEOUT_RESET_ON_PROGRESS: {
-    description: "Reset Timeout on Progress",
+    label: "Reset Timeout on Progress",
+    description: "Reset timeout on progress notifications",
     value: true,
   },
   MCP_REQUEST_MAX_TOTAL_TIMEOUT: {
-    description: "Maximum Total Timeout",
+    label: "Maximum Total Timeout",
+    description:
+      "Maximum total timeout for requests sent to the MCP server (ms) (Use with progress notifications)",
     value: 60000,
   },
   MCP_PROXY_FULL_ADDRESS: {
-    description: "Inspector Proxy Address",
+    label: "Inspector Proxy Address",
+    description:
+      "Set this if you are running the MCP Inspector Proxy on a non-default address. Example: http://10.1.1.22:5577",
     value: "",
   },
 } as const;

From fe74dbea7491c63bfdacdf144d72d9fb9bf2deaf Mon Sep 17 00:00:00 2001
From: yushengchen <yushengchen@nine-yi.com>
Date: Tue, 8 Apr 2025 09:51:50 +0800
Subject: [PATCH 16/19] refactor(json): Consolidate JSON utilities and type
 definitions
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Modified files:
- client/src/components/DynamicJsonForm.tsx
- client/src/components/JsonView.tsx
- client/src/components/ToolsTab.tsx
- client/src/components/__tests__/DynamicJsonForm.test.tsx
- client/src/utils/__tests__/jsonPathUtils.test.ts → client/src/utils/__tests__/jsonUtils.test.ts
- client/src/utils/__tests__/schemaUtils.test.ts
- client/src/utils/jsonPathUtils.ts → client/src/utils/jsonUtils.ts
- client/src/utils/schemaUtils.ts

Descriptions:
- Move JSON type definitions from DynamicJsonForm to centralized jsonUtils
- Consolidate utility functions (getDataType, tryParseJson) into jsonUtils
- Rename jsonPathUtils to jsonUtils for better semantic clarity
- Add comprehensive test coverage for new utility functions
- Update imports across all affected components
- Improve type references consistency throughout the codebase
---
 client/src/components/DynamicJsonForm.tsx     |  28 +---
 client/src/components/JsonView.tsx            |  32 +---
 client/src/components/ToolsTab.tsx            |   3 +-
 .../__tests__/DynamicJsonForm.test.tsx        |   2 +-
 ...sonPathUtils.test.ts => jsonUtils.test.ts} | 145 +++++++++++++++++-
 .../src/utils/__tests__/schemaUtils.test.ts   |   2 +-
 .../utils/{jsonPathUtils.ts => jsonUtils.ts}  |  52 ++++++-
 client/src/utils/schemaUtils.ts               |   3 +-
 8 files changed, 206 insertions(+), 61 deletions(-)
 rename client/src/utils/__tests__/{jsonPathUtils.test.ts => jsonUtils.test.ts} (58%)
 rename client/src/utils/{jsonPathUtils.ts => jsonUtils.ts} (76%)

diff --git a/client/src/components/DynamicJsonForm.tsx b/client/src/components/DynamicJsonForm.tsx
index f5b0d63..bd77639 100644
--- a/client/src/components/DynamicJsonForm.tsx
+++ b/client/src/components/DynamicJsonForm.tsx
@@ -3,33 +3,9 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import JsonEditor from "./JsonEditor";
-import { updateValueAtPath, JsonObject } from "@/utils/jsonPathUtils";
+import { updateValueAtPath } from "@/utils/jsonUtils";
 import { generateDefaultValue, formatFieldLabel } from "@/utils/schemaUtils";
-
-export type JsonValue =
-  | string
-  | number
-  | boolean
-  | null
-  | undefined
-  | JsonValue[]
-  | { [key: string]: JsonValue };
-
-export type JsonSchemaType = {
-  type:
-    | "string"
-    | "number"
-    | "integer"
-    | "boolean"
-    | "array"
-    | "object"
-    | "null";
-  description?: string;
-  required?: boolean;
-  default?: JsonValue;
-  properties?: Record<string, JsonSchemaType>;
-  items?: JsonSchemaType;
-};
+import type { JsonValue, JsonSchemaType, JsonObject } from "@/utils/jsonUtils";
 
 interface DynamicJsonFormProps {
   schema: JsonSchemaType;
diff --git a/client/src/components/JsonView.tsx b/client/src/components/JsonView.tsx
index b59f3cc..9787b76 100644
--- a/client/src/components/JsonView.tsx
+++ b/client/src/components/JsonView.tsx
@@ -1,9 +1,10 @@
 import { useState, memo, useMemo, useCallback, useEffect } from "react";
-import { JsonValue } from "./DynamicJsonForm";
+import type { JsonValue } from "@/utils/jsonUtils";
 import clsx from "clsx";
 import { Copy, CheckCheck } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { useToast } from "@/hooks/use-toast";
+import { getDataType, tryParseJson } from "@/utils/jsonUtils";
 
 interface JsonViewProps {
   data: unknown;
@@ -13,21 +14,6 @@ interface JsonViewProps {
   withCopyButton?: boolean;
 }
 
-function tryParseJson(str: string): { success: boolean; data: JsonValue } {
-  const trimmed = str.trim();
-  if (
-    !(trimmed.startsWith("{") && trimmed.endsWith("}")) &&
-    !(trimmed.startsWith("[") && trimmed.endsWith("]"))
-  ) {
-    return { success: false, data: str };
-  }
-  try {
-    return { success: true, data: JSON.parse(str) };
-  } catch {
-    return { success: false, data: str };
-  }
-}
-
 const JsonView = memo(
   ({
     data,
@@ -119,23 +105,15 @@ interface JsonNodeProps {
 const JsonNode = memo(
   ({ data, name, depth = 0, initialExpandDepth }: JsonNodeProps) => {
     const [isExpanded, setIsExpanded] = useState(depth < initialExpandDepth);
-
-    const getDataType = (value: JsonValue): string => {
-      if (Array.isArray(value)) return "array";
-      if (value === null) return "null";
-      return typeof value;
-    };
-
-    const dataType = getDataType(data);
-
-    const typeStyleMap: Record<string, string> = {
+    const [typeStyleMap] = useState<Record<string, string>>({
       number: "text-blue-600",
       boolean: "text-amber-600",
       null: "text-purple-600",
       undefined: "text-gray-600",
       string: "text-green-600 break-all whitespace-pre-wrap",
       default: "text-gray-700",
-    };
+    });
+    const dataType = getDataType(data);
 
     const renderCollapsible = (isArray: boolean) => {
       const items = isArray
diff --git a/client/src/components/ToolsTab.tsx b/client/src/components/ToolsTab.tsx
index 2fbe7d5..ea123db 100644
--- a/client/src/components/ToolsTab.tsx
+++ b/client/src/components/ToolsTab.tsx
@@ -5,7 +5,8 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { TabsContent } from "@/components/ui/tabs";
 import { Textarea } from "@/components/ui/textarea";
-import DynamicJsonForm, { JsonSchemaType, JsonValue } from "./DynamicJsonForm";
+import DynamicJsonForm from "./DynamicJsonForm";
+import type { JsonValue, JsonSchemaType } from "@/utils/jsonUtils";
 import { generateDefaultValue } from "@/utils/schemaUtils";
 import {
   CallToolResultSchema,
diff --git a/client/src/components/__tests__/DynamicJsonForm.test.tsx b/client/src/components/__tests__/DynamicJsonForm.test.tsx
index fce6014..1ad4d04 100644
--- a/client/src/components/__tests__/DynamicJsonForm.test.tsx
+++ b/client/src/components/__tests__/DynamicJsonForm.test.tsx
@@ -1,7 +1,7 @@
 import { render, screen, fireEvent } from "@testing-library/react";
 import { describe, it, expect, jest } from "@jest/globals";
 import DynamicJsonForm from "../DynamicJsonForm";
-import type { JsonSchemaType } from "../DynamicJsonForm";
+import type { JsonSchemaType } from "@/utils/jsonUtils";
 
 describe("DynamicJsonForm String Fields", () => {
   const renderForm = (props = {}) => {
diff --git a/client/src/utils/__tests__/jsonPathUtils.test.ts b/client/src/utils/__tests__/jsonUtils.test.ts
similarity index 58%
rename from client/src/utils/__tests__/jsonPathUtils.test.ts
rename to client/src/utils/__tests__/jsonUtils.test.ts
index b6ef7e9..2a580f4 100644
--- a/client/src/utils/__tests__/jsonPathUtils.test.ts
+++ b/client/src/utils/__tests__/jsonUtils.test.ts
@@ -1,5 +1,146 @@
-import { updateValueAtPath, getValueAtPath } from "../jsonPathUtils";
-import { JsonValue } from "../../components/DynamicJsonForm";
+import {
+  getDataType,
+  tryParseJson,
+  updateValueAtPath,
+  getValueAtPath,
+} from "../jsonUtils";
+import type { JsonValue } from "../jsonUtils";
+
+describe("getDataType", () => {
+  test("should return 'string' for string values", () => {
+    expect(getDataType("hello")).toBe("string");
+    expect(getDataType("")).toBe("string");
+  });
+
+  test("should return 'number' for number values", () => {
+    expect(getDataType(123)).toBe("number");
+    expect(getDataType(0)).toBe("number");
+    expect(getDataType(-10)).toBe("number");
+    expect(getDataType(1.5)).toBe("number");
+    expect(getDataType(NaN)).toBe("number");
+    expect(getDataType(Infinity)).toBe("number");
+  });
+
+  test("should return 'boolean' for boolean values", () => {
+    expect(getDataType(true)).toBe("boolean");
+    expect(getDataType(false)).toBe("boolean");
+  });
+
+  test("should return 'undefined' for undefined value", () => {
+    expect(getDataType(undefined)).toBe("undefined");
+  });
+
+  test("should return 'object' for object values", () => {
+    expect(getDataType({})).toBe("object");
+    expect(getDataType({ key: "value" })).toBe("object");
+  });
+
+  test("should return 'array' for array values", () => {
+    expect(getDataType([])).toBe("array");
+    expect(getDataType([1, 2, 3])).toBe("array");
+    expect(getDataType(["a", "b", "c"])).toBe("array");
+    expect(getDataType([{}, { nested: true }])).toBe("array");
+  });
+
+  test("should return 'null' for null value", () => {
+    expect(getDataType(null)).toBe("null");
+  });
+});
+
+describe("tryParseJson", () => {
+  test("should correctly parse valid JSON object", () => {
+    const jsonString = '{"name":"test","value":123}';
+    const result = tryParseJson(jsonString);
+
+    expect(result.success).toBe(true);
+    expect(result.data).toEqual({ name: "test", value: 123 });
+  });
+
+  test("should correctly parse valid JSON array", () => {
+    const jsonString = '[1,2,3,"test"]';
+    const result = tryParseJson(jsonString);
+
+    expect(result.success).toBe(true);
+    expect(result.data).toEqual([1, 2, 3, "test"]);
+  });
+
+  test("should correctly parse JSON with whitespace", () => {
+    const jsonString = '  {  "name"  :  "test"  }  ';
+    const result = tryParseJson(jsonString);
+
+    expect(result.success).toBe(true);
+    expect(result.data).toEqual({ name: "test" });
+  });
+
+  test("should correctly parse nested JSON structures", () => {
+    const jsonString =
+      '{"user":{"name":"test","details":{"age":30}},"items":[1,2,3]}';
+    const result = tryParseJson(jsonString);
+
+    expect(result.success).toBe(true);
+    expect(result.data).toEqual({
+      user: {
+        name: "test",
+        details: {
+          age: 30,
+        },
+      },
+      items: [1, 2, 3],
+    });
+  });
+
+  test("should correctly parse empty objects and arrays", () => {
+    expect(tryParseJson("{}").success).toBe(true);
+    expect(tryParseJson("{}").data).toEqual({});
+
+    expect(tryParseJson("[]").success).toBe(true);
+    expect(tryParseJson("[]").data).toEqual([]);
+  });
+
+  test("should return failure for non-JSON strings", () => {
+    const nonJsonString = "this is not json";
+    const result = tryParseJson(nonJsonString);
+
+    expect(result.success).toBe(false);
+    expect(result.data).toBe(nonJsonString);
+  });
+
+  test("should return failure for malformed JSON", () => {
+    const malformedJson = '{"name":"test",}';
+    const result = tryParseJson(malformedJson);
+
+    expect(result.success).toBe(false);
+    expect(result.data).toBe(malformedJson);
+  });
+
+  test("should return failure for strings with correct delimiters but invalid JSON", () => {
+    const invalidJson = "{name:test}";
+    const result = tryParseJson(invalidJson);
+
+    expect(result.success).toBe(false);
+    expect(result.data).toBe(invalidJson);
+  });
+
+  test("should handle edge cases", () => {
+    expect(tryParseJson("").success).toBe(false);
+    expect(tryParseJson("").data).toBe("");
+
+    expect(tryParseJson("   ").success).toBe(false);
+    expect(tryParseJson("   ").data).toBe("   ");
+
+    expect(tryParseJson("null").success).toBe(false);
+    expect(tryParseJson("null").data).toBe("null");
+
+    expect(tryParseJson('"string"').success).toBe(false);
+    expect(tryParseJson('"string"').data).toBe('"string"');
+
+    expect(tryParseJson("123").success).toBe(false);
+    expect(tryParseJson("123").data).toBe("123");
+
+    expect(tryParseJson("true").success).toBe(false);
+    expect(tryParseJson("true").data).toBe("true");
+  });
+});
 
 describe("updateValueAtPath", () => {
   // Basic functionality tests
diff --git a/client/src/utils/__tests__/schemaUtils.test.ts b/client/src/utils/__tests__/schemaUtils.test.ts
index 6462e12..4c834fe 100644
--- a/client/src/utils/__tests__/schemaUtils.test.ts
+++ b/client/src/utils/__tests__/schemaUtils.test.ts
@@ -1,5 +1,5 @@
 import { generateDefaultValue, formatFieldLabel } from "../schemaUtils";
-import { JsonSchemaType } from "../../components/DynamicJsonForm";
+import type { JsonSchemaType } from "../jsonUtils";
 
 describe("generateDefaultValue", () => {
   test("generates default string", () => {
diff --git a/client/src/utils/jsonPathUtils.ts b/client/src/utils/jsonUtils.ts
similarity index 76%
rename from client/src/utils/jsonPathUtils.ts
rename to client/src/utils/jsonUtils.ts
index ac99940..0987859 100644
--- a/client/src/utils/jsonPathUtils.ts
+++ b/client/src/utils/jsonUtils.ts
@@ -1,7 +1,57 @@
-import { JsonValue } from "../components/DynamicJsonForm";
+export type JsonValue =
+  | string
+  | number
+  | boolean
+  | null
+  | undefined
+  | JsonValue[]
+  | { [key: string]: JsonValue };
+
+export type JsonSchemaType = {
+  type:
+    | "string"
+    | "number"
+    | "integer"
+    | "boolean"
+    | "array"
+    | "object"
+    | "null";
+  description?: string;
+  required?: boolean;
+  default?: JsonValue;
+  properties?: Record<string, JsonSchemaType>;
+  items?: JsonSchemaType;
+};
 
 export type JsonObject = { [key: string]: JsonValue };
 
+const typeofVariable = typeof "random variable";
+export function getDataType(
+  value: JsonValue,
+): typeof typeofVariable | "array" | "null" {
+  if (Array.isArray(value)) return "array";
+  if (value === null) return "null";
+  return typeof value;
+}
+
+export function tryParseJson(str: string): {
+  success: boolean;
+  data: JsonValue;
+} {
+  const trimmed = str.trim();
+  if (
+    !(trimmed.startsWith("{") && trimmed.endsWith("}")) &&
+    !(trimmed.startsWith("[") && trimmed.endsWith("]"))
+  ) {
+    return { success: false, data: str };
+  }
+  try {
+    return { success: true, data: JSON.parse(str) };
+  } catch {
+    return { success: false, data: str };
+  }
+}
+
 /**
  * Updates a value at a specific path in a nested JSON structure
  * @param obj The original JSON value
diff --git a/client/src/utils/schemaUtils.ts b/client/src/utils/schemaUtils.ts
index 686030f..ea92065 100644
--- a/client/src/utils/schemaUtils.ts
+++ b/client/src/utils/schemaUtils.ts
@@ -1,5 +1,4 @@
-import { JsonValue, JsonSchemaType } from "../components/DynamicJsonForm";
-import { JsonObject } from "./jsonPathUtils";
+import type { JsonValue, JsonSchemaType, JsonObject } from "./jsonUtils";
 
 /**
  * Generates a default value based on a JSON schema type

From 068d43226f24201776d9e78144554e8601b6bd4b Mon Sep 17 00:00:00 2001
From: yushengchen <yushengchen@nine-yi.com>
Date: Wed, 9 Apr 2025 09:24:42 +0800
Subject: [PATCH 17/19] refactor: remove `as any` of file `jsonUtils.test.ts`

refactor: extract `DataType` as the return type of function `getDataType`
---
 client/src/utils/__tests__/jsonUtils.test.ts | 14 ++++++--------
 client/src/utils/jsonUtils.ts                | 17 +++++++++++++----
 2 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/client/src/utils/__tests__/jsonUtils.test.ts b/client/src/utils/__tests__/jsonUtils.test.ts
index 2a580f4..055e1df 100644
--- a/client/src/utils/__tests__/jsonUtils.test.ts
+++ b/client/src/utils/__tests__/jsonUtils.test.ts
@@ -149,17 +149,17 @@ describe("updateValueAtPath", () => {
   });
 
   test("initializes an empty object when input is null/undefined and path starts with a string", () => {
-    expect(updateValueAtPath(null as any, ["foo"], "bar")).toEqual({
+    expect(updateValueAtPath(null, ["foo"], "bar")).toEqual({
       foo: "bar",
     });
-    expect(updateValueAtPath(undefined as any, ["foo"], "bar")).toEqual({
+    expect(updateValueAtPath(undefined, ["foo"], "bar")).toEqual({
       foo: "bar",
     });
   });
 
   test("initializes an empty array when input is null/undefined and path starts with a number", () => {
-    expect(updateValueAtPath(null as any, ["0"], "bar")).toEqual(["bar"]);
-    expect(updateValueAtPath(undefined as any, ["0"], "bar")).toEqual(["bar"]);
+    expect(updateValueAtPath(null, ["0"], "bar")).toEqual(["bar"]);
+    expect(updateValueAtPath(undefined, ["0"], "bar")).toEqual(["bar"]);
   });
 
   // Object update tests
@@ -293,10 +293,8 @@ describe("getValueAtPath", () => {
   });
 
   test("returns default value when input is null/undefined", () => {
-    expect(getValueAtPath(null as any, ["foo"], "default")).toBe("default");
-    expect(getValueAtPath(undefined as any, ["foo"], "default")).toBe(
-      "default",
-    );
+    expect(getValueAtPath(null, ["foo"], "default")).toBe("default");
+    expect(getValueAtPath(undefined, ["foo"], "default")).toBe("default");
   });
 
   test("handles array indices correctly", () => {
diff --git a/client/src/utils/jsonUtils.ts b/client/src/utils/jsonUtils.ts
index 0987859..28cbf30 100644
--- a/client/src/utils/jsonUtils.ts
+++ b/client/src/utils/jsonUtils.ts
@@ -25,10 +25,19 @@ export type JsonSchemaType = {
 
 export type JsonObject = { [key: string]: JsonValue };
 
-const typeofVariable = typeof "random variable";
-export function getDataType(
-  value: JsonValue,
-): typeof typeofVariable | "array" | "null" {
+export type DataType =
+  | "string"
+  | "number"
+  | "bigint"
+  | "boolean"
+  | "symbol"
+  | "undefined"
+  | "object"
+  | "function"
+  | "array"
+  | "null";
+
+export function getDataType(value: JsonValue): DataType {
   if (Array.isArray(value)) return "array";
   if (value === null) return "null";
   return typeof value;

From 727e0753e480a398d738044fa948dc987719d225 Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Wed, 9 Apr 2025 11:52:31 -0400
Subject: [PATCH 18/19] This fixes #273

* In Sidebar.tsx
  - In Reconnect button handler, call onDisconnect before onConnect

See: https://github.com/modelcontextprotocol/inspector/issues/273#issuecomment-2789895596
---
 client/src/components/Sidebar.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Sidebar.tsx b/client/src/components/Sidebar.tsx
index 4633d64..31f9b68 100644
--- a/client/src/components/Sidebar.tsx
+++ b/client/src/components/Sidebar.tsx
@@ -398,7 +398,13 @@ const Sidebar = ({
           <div className="space-y-2">
             {connectionStatus === "connected" && (
               <div className="grid grid-cols-2 gap-4">
-                <Button data-testid="connect-button" onClick={onConnect}>
+                <Button
+                  data-testid="connect-button"
+                  onClick={() => {
+                    onDisconnect();
+                    onConnect();
+                  }}
+                >
                   <RotateCcw className="w-4 h-4 mr-2" />
                   {transportType === "stdio" ? "Restart" : "Reconnect"}
                 </Button>

From eab6b42ac61eb680e9ce4e89865d9c83dbcf3f69 Mon Sep 17 00:00:00 2001
From: KavyapriyaJG <kavya2002erd@gmail.com>
Date: Sat, 12 Apr 2025 02:10:37 +0530
Subject: [PATCH 19/19] Fix - Lint warnings and errors in client

Lint issues fixed:
1. Removed unused error variable in catch block
2. Changed 'ActionTypes' type to enum
3. Removed unnecessary interface extensions
4. Removed unused export component
5. Added the missing dependencies to useMemo
6. Fixed the inline function issue by changing it to useMemo
---
 client/src/components/ui/button.tsx        |  2 +-
 client/src/components/ui/input.tsx         |  3 +-
 client/src/components/ui/textarea.tsx      |  3 +-
 client/src/hooks/use-toast.ts              | 42 +++++++++++-----------
 client/src/lib/hooks/useCompletionState.ts | 19 +++++-----
 client/src/lib/useTheme.ts                 |  5 ++-
 6 files changed, 38 insertions(+), 36 deletions(-)

diff --git a/client/src/components/ui/button.tsx b/client/src/components/ui/button.tsx
index 084150e..8e435c3 100644
--- a/client/src/components/ui/button.tsx
+++ b/client/src/components/ui/button.tsx
@@ -54,4 +54,4 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 );
 Button.displayName = "Button";
 
-export { Button, buttonVariants };
+export { Button };
diff --git a/client/src/components/ui/input.tsx b/client/src/components/ui/input.tsx
index ef29a4a..2fd0054 100644
--- a/client/src/components/ui/input.tsx
+++ b/client/src/components/ui/input.tsx
@@ -2,8 +2,7 @@ import * as React from "react";
 
 import { cn } from "@/lib/utils";
 
-export interface InputProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {}
+export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
   ({ className, type, ...props }, ref) => {
diff --git a/client/src/components/ui/textarea.tsx b/client/src/components/ui/textarea.tsx
index 0e546bb..a066282 100644
--- a/client/src/components/ui/textarea.tsx
+++ b/client/src/components/ui/textarea.tsx
@@ -2,8 +2,7 @@ import * as React from "react";
 
 import { cn } from "@/lib/utils";
 
-export interface TextareaProps
-  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
 
 const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
   ({ className, ...props }, ref) => {
diff --git a/client/src/hooks/use-toast.ts b/client/src/hooks/use-toast.ts
index 6555e79..b705655 100644
--- a/client/src/hooks/use-toast.ts
+++ b/client/src/hooks/use-toast.ts
@@ -15,13 +15,6 @@ type ToasterToast = ToastProps & {
   action?: ToastActionElement;
 };
 
-const actionTypes = {
-  ADD_TOAST: "ADD_TOAST",
-  UPDATE_TOAST: "UPDATE_TOAST",
-  DISMISS_TOAST: "DISMISS_TOAST",
-  REMOVE_TOAST: "REMOVE_TOAST",
-} as const;
-
 let count = 0;
 
 function genId() {
@@ -29,23 +22,28 @@ function genId() {
   return count.toString();
 }
 
-type ActionType = typeof actionTypes;
+const enum ActionType {
+  ADD_TOAST = "ADD_TOAST",
+  UPDATE_TOAST = "UPDATE_TOAST",
+  DISMISS_TOAST = "DISMISS_TOAST",
+  REMOVE_TOAST = "REMOVE_TOAST",
+}
 
 type Action =
   | {
-      type: ActionType["ADD_TOAST"];
+      type: ActionType.ADD_TOAST;
       toast: ToasterToast;
     }
   | {
-      type: ActionType["UPDATE_TOAST"];
+      type: ActionType.UPDATE_TOAST;
       toast: Partial<ToasterToast>;
     }
   | {
-      type: ActionType["DISMISS_TOAST"];
+      type: ActionType.DISMISS_TOAST;
       toastId?: ToasterToast["id"];
     }
   | {
-      type: ActionType["REMOVE_TOAST"];
+      type: ActionType.REMOVE_TOAST;
       toastId?: ToasterToast["id"];
     };
 
@@ -63,7 +61,7 @@ const addToRemoveQueue = (toastId: string) => {
   const timeout = setTimeout(() => {
     toastTimeouts.delete(toastId);
     dispatch({
-      type: "REMOVE_TOAST",
+      type: ActionType.REMOVE_TOAST,
       toastId: toastId,
     });
   }, TOAST_REMOVE_DELAY);
@@ -73,13 +71,13 @@ const addToRemoveQueue = (toastId: string) => {
 
 export const reducer = (state: State, action: Action): State => {
   switch (action.type) {
-    case "ADD_TOAST":
+    case ActionType.ADD_TOAST:
       return {
         ...state,
         toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
       };
 
-    case "UPDATE_TOAST":
+    case ActionType.UPDATE_TOAST:
       return {
         ...state,
         toasts: state.toasts.map((t) =>
@@ -87,7 +85,7 @@ export const reducer = (state: State, action: Action): State => {
         ),
       };
 
-    case "DISMISS_TOAST": {
+    case ActionType.DISMISS_TOAST: {
       const { toastId } = action;
 
       // ! Side effects ! - This could be extracted into a dismissToast() action,
@@ -112,7 +110,7 @@ export const reducer = (state: State, action: Action): State => {
         ),
       };
     }
-    case "REMOVE_TOAST":
+    case ActionType.REMOVE_TOAST:
       if (action.toastId === undefined) {
         return {
           ...state,
@@ -144,13 +142,14 @@ function toast({ ...props }: Toast) {
 
   const update = (props: ToasterToast) =>
     dispatch({
-      type: "UPDATE_TOAST",
+      type: ActionType.UPDATE_TOAST,
       toast: { ...props, id },
     });
-  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id });
+  const dismiss = () =>
+    dispatch({ type: ActionType.DISMISS_TOAST, toastId: id });
 
   dispatch({
-    type: "ADD_TOAST",
+    type: ActionType.ADD_TOAST,
     toast: {
       ...props,
       id,
@@ -184,7 +183,8 @@ function useToast() {
   return {
     ...state,
     toast,
-    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
+    dismiss: (toastId?: string) =>
+      dispatch({ type: ActionType.DISMISS_TOAST, toastId }),
   };
 }
 
diff --git a/client/src/lib/hooks/useCompletionState.ts b/client/src/lib/hooks/useCompletionState.ts
index 694253b..71492e3 100644
--- a/client/src/lib/hooks/useCompletionState.ts
+++ b/client/src/lib/hooks/useCompletionState.ts
@@ -1,4 +1,4 @@
-import { useState, useCallback, useEffect, useRef } from "react";
+import { useState, useCallback, useEffect, useRef, useMemo } from "react";
 import {
   ResourceReference,
   PromptReference,
@@ -15,9 +15,11 @@ function debounce<T extends (...args: any[]) => PromiseLike<void>>(
   wait: number,
 ): (...args: Parameters<T>) => void {
   let timeout: ReturnType<typeof setTimeout>;
-  return function (...args: Parameters<T>) {
+  return (...args: Parameters<T>) => {
     clearTimeout(timeout);
-    timeout = setTimeout(() => func(...args), wait);
+    timeout = setTimeout(() => {
+      void func(...args);
+    }, wait);
   };
 }
 
@@ -58,8 +60,8 @@ export function useCompletionState(
     });
   }, [cleanup]);
 
-  const requestCompletions = useCallback(
-    debounce(
+  const requestCompletions = useMemo(() => {
+    return debounce(
       async (
         ref: ResourceReference | PromptReference,
         argName: string,
@@ -94,7 +96,7 @@ export function useCompletionState(
               loading: { ...prev.loading, [argName]: false },
             }));
           }
-        } catch (err) {
+        } catch {
           if (!abortController.signal.aborted) {
             setState((prev) => ({
               ...prev,
@@ -108,9 +110,8 @@ export function useCompletionState(
         }
       },
       debounceMs,
-    ),
-    [handleCompletion, completionsSupported, cleanup, debounceMs],
-  );
+    );
+  }, [handleCompletion, completionsSupported, cleanup, debounceMs]);
 
   // Clear completions when support status changes
   useEffect(() => {
diff --git a/client/src/lib/useTheme.ts b/client/src/lib/useTheme.ts
index 9e76611..bd0d112 100644
--- a/client/src/lib/useTheme.ts
+++ b/client/src/lib/useTheme.ts
@@ -43,7 +43,10 @@ const useTheme = (): [Theme, (mode: Theme) => void] => {
       document.documentElement.classList.toggle("dark", newTheme === "dark");
     }
   }, []);
-  return useMemo(() => [theme, setThemeWithSideEffect], [theme]);
+  return useMemo(
+    () => [theme, setThemeWithSideEffect],
+    [theme, setThemeWithSideEffect],
+  );
 };
 
 export default useTheme;