Add proper support for progress flow during tool calling

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>

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>

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 });

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();
+  });
 });