From cf3c0ec470e68bf92d17ce0d163479e3fe18343b Mon Sep 17 00:00:00 2001
From: "lorenzo.neumann" <36760115+ln-12@users.noreply.github.com>
Date: Thu, 28 Aug 2025 12:20:27 +0200
Subject: [PATCH 01/14] added copy functionality to JsonView component

---
 client/src/components/JsonView.tsx | 102 ++++++++++++++++++++++++++++-
 1 file changed, 99 insertions(+), 3 deletions(-)

diff --git a/client/src/components/JsonView.tsx b/client/src/components/JsonView.tsx
index e9ef0d2d..575b1375 100644
--- a/client/src/components/JsonView.tsx
+++ b/client/src/components/JsonView.tsx
@@ -1,4 +1,5 @@
 import { useState, memo, useMemo, useCallback, useEffect } from "react";
+import type React from "react";
 import type { JsonValue } from "@/utils/jsonUtils";
 import clsx from "clsx";
 import { Copy, CheckCheck } from "lucide-react";
@@ -114,6 +115,7 @@ const JsonNode = memo(
     initialExpandDepth,
     isError = false,
   }: JsonNodeProps) => {
+    const { toast } = useToast();
     const [isExpanded, setIsExpanded] = useState(depth < initialExpandDepth);
     const [typeStyleMap] = useState<Record<string, string>>({
       number: "text-blue-600",
@@ -126,6 +128,52 @@ const JsonNode = memo(
     });
     const dataType = getDataType(data);
 
+    const [copied, setCopied] = useState(false);
+    useEffect(() => {
+      let timeoutId: NodeJS.Timeout;
+      if (copied) {
+        timeoutId = setTimeout(() => setCopied(false), 500);
+      }
+      return () => {
+        if (timeoutId) clearTimeout(timeoutId);
+      };
+    }, [copied]);
+
+    const handleCopyValue = useCallback(
+      (value: JsonValue) => {
+        try {
+          let text: string;
+          const valueType = getDataType(value);
+          switch (valueType) {
+            case "string":
+              text = value as unknown as string;
+              break;
+            case "number":
+            case "boolean":
+              text = String(value);
+              break;
+            case "null":
+              text = "null";
+              break;
+            case "undefined":
+              text = "undefined";
+              break;
+            default:
+              text = JSON.stringify(value);
+          }
+          navigator.clipboard.writeText(text);
+          setCopied(true);
+        } catch (error) {
+          toast({
+            title: "Error",
+            description: `There was an error coping result into the clipboard: ${error instanceof Error ? error.message : String(error)}`,
+            variant: "destructive",
+          });
+        }
+      },
+      [toast],
+    );
+
     const renderCollapsible = (isArray: boolean) => {
       const items = isArray
         ? (data as JsonValue[])
@@ -219,7 +267,7 @@ const JsonNode = memo(
 
       if (!isTooLong) {
         return (
-          <div className="flex mr-1 rounded hover:bg-gray-800/20">
+          <div className="flex mr-1 rounded hover:bg-gray-800/20 group items-start">
             {name && (
               <span className="mr-1 text-gray-600 dark:text-gray-400">
                 {name}:
@@ -233,12 +281,28 @@ const JsonNode = memo(
             >
               "{value}"
             </pre>
+            <Button
+              variant="ghost"
+              className="ml-1 h-6 w-6 p-0 opacity-0 group-hover:opacity-100"
+              onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
+                e.stopPropagation();
+                handleCopyValue(value as unknown as JsonValue);
+              }}
+              aria-label={name ? `Copy value of ${name}` : "Copy value"}
+              title={name ? `Copy value of ${name}` : "Copy value"}
+            >
+              {copied ? (
+                <CheckCheck className="size-4 dark:text-green-700 text-green-600" />
+              ) : (
+                <Copy className="size-4 text-foreground" />
+              )}
+            </Button>
           </div>
         );
       }
 
       return (
-        <div className="flex mr-1 rounded group hover:bg-gray-800/20">
+        <div className="flex mr-1 rounded group hover:bg-gray-800/20 items-start">
           {name && (
             <span className="mr-1 text-gray-600 dark:text-gray-400 dark:group-hover:text-gray-100 group-hover:text-gray-400">
               {name}:
@@ -254,6 +318,22 @@ const JsonNode = memo(
           >
             {isExpanded ? `"${value}"` : `"${value.slice(0, maxLength)}..."`}
           </pre>
+          <Button
+            variant="ghost"
+            className="ml-1 h-6 w-6 p-0 opacity-0 group-hover:opacity-100"
+            onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
+              e.stopPropagation();
+              handleCopyValue(value as unknown as JsonValue);
+            }}
+            aria-label={name ? `Copy value of ${name}` : "Copy value"}
+            title={name ? `Copy value of ${name}` : "Copy value"}
+          >
+            {copied ? (
+              <CheckCheck className="size-4 dark:text-green-700 text-green-600" />
+            ) : (
+              <Copy className="size-4 text-foreground" />
+            )}
+          </Button>
         </div>
       );
     };
@@ -266,7 +346,7 @@ const JsonNode = memo(
         return renderString(data as string);
       default:
         return (
-          <div className="flex items-center mr-1 rounded hover:bg-gray-800/20">
+          <div className="flex items-center mr-1 rounded hover:bg-gray-800/20 group">
             {name && (
               <span className="mr-1 text-gray-600 dark:text-gray-400">
                 {name}:
@@ -275,6 +355,22 @@ const JsonNode = memo(
             <span className={typeStyleMap[dataType] || typeStyleMap.default}>
               {data === null ? "null" : String(data)}
             </span>
+            <Button
+              variant="ghost"
+              className="ml-1 h-6 w-6 p-0 opacity-0 group-hover:opacity-100"
+              onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
+                e.stopPropagation();
+                handleCopyValue(data as JsonValue);
+              }}
+              aria-label={name ? `Copy value of ${name}` : "Copy value"}
+              title={name ? `Copy value of ${name}` : "Copy value"}
+            >
+              {copied ? (
+                <CheckCheck className="size-4 dark:text-green-700 text-green-600" />
+              ) : (
+                <Copy className="size-4 text-foreground" />
+              )}
+            </Button>
           </div>
         );
     }

From a1e04c72feef262b0f5fe0d696f180c5ed5e459c Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Wed, 10 Sep 2025 02:14:39 +0000
Subject: [PATCH 02/14] 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 6.3.5 to 6.3.6
- [Release notes](https://github.com/vitejs/vite/releases)
- [Changelog](https://github.com/vitejs/vite/blob/v6.3.6/packages/vite/CHANGELOG.md)
- [Commits](https://github.com/vitejs/vite/commits/v6.3.6/packages/vite)

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

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

diff --git a/package-lock.json b/package-lock.json
index 91385dd4..176fbf5e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11342,9 +11342,9 @@
       }
     },
     "node_modules/vite": {
-      "version": "6.3.5",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-6.3.5.tgz",
-      "integrity": "sha512-cZn6NDFE7wdTpINgs++ZJ4N49W2vRp8LCKrn3Ob1kYNtOo21vfDoaV5GzBfLU4MovSAB8uNRm4jgzVQZ+mBzPQ==",
+      "version": "6.3.6",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-6.3.6.tgz",
+      "integrity": "sha512-0msEVHJEScQbhkbVTb/4iHZdJ6SXp/AvxL2sjwYQFfBqleHtnCqv1J3sa9zbWz/6kW1m9Tfzn92vW+kZ1WV6QA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {

From 89f6945ee484f7440fc541ebc90416fa11487763 Mon Sep 17 00:00:00 2001
From: bill lau <liubeitongxue@icloud.com>
Date: Thu, 11 Sep 2025 17:24:07 +0800
Subject: [PATCH 03/14] fix wrong role default value

---
 client/src/components/SamplingRequest.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/SamplingRequest.tsx b/client/src/components/SamplingRequest.tsx
index 0e6f365e..62c9dac6 100644
--- a/client/src/components/SamplingRequest.tsx
+++ b/client/src/components/SamplingRequest.tsx
@@ -56,7 +56,7 @@ const SamplingRequest = ({
         },
         role: {
           type: "string",
-          default: "endTurn",
+          default: "assistant",
           description: "Role of the model",
         },
         content: {

From 5bec008b8172f3892ad7d736b039e0667cce04ab Mon Sep 17 00:00:00 2001
From: Kenneth Sinder <kenneth@makenotion.com>
Date: Sun, 21 Sep 2025 10:05:40 -0700
Subject: [PATCH 04/14] ToolsTab: truncate tool descriptions for nicer
 rendering

---
 client/src/components/ToolsTab.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/client/src/components/ToolsTab.tsx b/client/src/components/ToolsTab.tsx
index 377521ae..6c72b208 100644
--- a/client/src/components/ToolsTab.tsx
+++ b/client/src/components/ToolsTab.tsx
@@ -95,7 +95,7 @@ const ToolsTab = ({
           renderItem={(tool) => (
             <div className="flex flex-col items-start">
               <span className="flex-1">{tool.name}</span>
-              <span className="text-sm text-gray-500 text-left">
+              <span className="text-sm text-gray-500 text-left line-clamp-3">
                 {tool.description}
               </span>
             </div>
@@ -114,9 +114,12 @@ const ToolsTab = ({
           <div className="p-4">
             {selectedTool ? (
               <div className="space-y-4">
-                <p className="text-sm text-gray-600 dark:text-gray-400">
+                <div className="text-sm font-medium">Description</div>
+                <div className="text-sm text-gray-600 dark:text-gray-400 whitespace-pre-wrap max-h-48 overflow-y-auto">
                   {selectedTool.description}
-                </p>
+                </div>
+                <hr className="border-t border-gray-300 my-4" />
+                <div className="text-sm font-medium">Inputs & Outputs</div>
                 {Object.entries(selectedTool.inputSchema.properties ?? []).map(
                   ([key, value]) => {
                     const prop = normalizeUnionType(value as JsonSchemaType);

From 3d3a79e10950aa0bada35bb674c9d7b529965c33 Mon Sep 17 00:00:00 2001
From: olaservo <olahungerford@gmail.com>
Date: Tue, 7 Oct 2025 20:57:42 -0700
Subject: [PATCH 05/14] Add enum parameter support in ToolsTab component and
 corresponding tests
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 client/src/components/ToolsTab.tsx            | 43 ++++++++++++++
 .../components/__tests__/ToolsTab.test.tsx    | 58 +++++++++++++++++++
 2 files changed, 101 insertions(+)

diff --git a/client/src/components/ToolsTab.tsx b/client/src/components/ToolsTab.tsx
index 0123296a..0c7cb17a 100644
--- a/client/src/components/ToolsTab.tsx
+++ b/client/src/components/ToolsTab.tsx
@@ -5,6 +5,13 @@ 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 {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 import DynamicJsonForm, { DynamicJsonFormRef } from "./DynamicJsonForm";
 import type { JsonValue, JsonSchemaType } from "@/utils/jsonUtils";
 import {
@@ -180,6 +187,42 @@ const ToolsTab = ({
                               {prop.description || "Toggle this option"}
                             </label>
                           </div>
+                        ) : prop.type === "string" && prop.enum ? (
+                          <Select
+                            value={
+                              params[key] === undefined
+                                ? ""
+                                : String(params[key])
+                            }
+                            onValueChange={(value) => {
+                              if (value === "") {
+                                setParams({
+                                  ...params,
+                                  [key]: undefined,
+                                });
+                              } else {
+                                setParams({
+                                  ...params,
+                                  [key]: value,
+                                });
+                              }
+                            }}
+                          >
+                            <SelectTrigger id={key} className="mt-1">
+                              <SelectValue
+                                placeholder={
+                                  prop.description || "Select an option"
+                                }
+                              />
+                            </SelectTrigger>
+                            <SelectContent>
+                              {prop.enum.map((option) => (
+                                <SelectItem key={option} value={option}>
+                                  {option}
+                                </SelectItem>
+                              ))}
+                            </SelectContent>
+                          </Select>
                         ) : prop.type === "string" ? (
                           <Textarea
                             id={key}
diff --git a/client/src/components/__tests__/ToolsTab.test.tsx b/client/src/components/__tests__/ToolsTab.test.tsx
index a50f62df..ee8cac6d 100644
--- a/client/src/components/__tests__/ToolsTab.test.tsx
+++ b/client/src/components/__tests__/ToolsTab.test.tsx
@@ -638,6 +638,64 @@ describe("ToolsTab", () => {
     });
   });
 
+  describe("Enum Parameters", () => {
+    const toolWithEnumParam: Tool = {
+      name: "enumTool",
+      description: "Tool with enum parameter",
+      inputSchema: {
+        type: "object" as const,
+        properties: {
+          format: {
+            type: "string" as const,
+            enum: ["json", "xml", "csv", "yaml"],
+            description: "Output format",
+          },
+        },
+      },
+    };
+
+    beforeEach(() => {
+      // Mock scrollIntoView for Radix UI Select
+      Element.prototype.scrollIntoView = jest.fn();
+    });
+
+    it("should render enum parameter as dropdown", () => {
+      renderToolsTab({
+        tools: [toolWithEnumParam],
+        selectedTool: toolWithEnumParam,
+      });
+
+      // Should render a select button instead of textarea
+      const selectTrigger = screen.getByRole("combobox", { name: /format/i });
+      expect(selectTrigger).toBeInTheDocument();
+    });
+
+    it("should render non-enum string parameter as textarea", () => {
+      const toolWithStringParam: Tool = {
+        name: "stringTool",
+        description: "Tool with regular string parameter",
+        inputSchema: {
+          type: "object" as const,
+          properties: {
+            text: {
+              type: "string" as const,
+              description: "Some text input",
+            },
+          },
+        },
+      };
+
+      renderToolsTab({
+        tools: [toolWithStringParam],
+        selectedTool: toolWithStringParam,
+      });
+
+      // Should render textarea, not select
+      expect(screen.queryByRole("combobox")).not.toBeInTheDocument();
+      expect(screen.getByRole("textbox")).toBeInTheDocument();
+    });
+  });
+
   describe("JSON Validation Integration", () => {
     const toolWithJsonParams: Tool = {
       name: "jsonTool",

From 694b20225197576e38e15cd40054cf3e73cf67c7 Mon Sep 17 00:00:00 2001
From: olaservo <olahungerford@gmail.com>
Date: Wed, 8 Oct 2025 07:38:10 -0700
Subject: [PATCH 06/14] Move CLAUDE.md content to AGENTS.md

---
 .worktrees/pr-767 |  1 +
 .worktrees/pr-822 |  1 +
 AGENTS.md         | 33 +++++++++++++++++++++++++++++++++
 CLAUDE.md         | 34 +---------------------------------
 4 files changed, 36 insertions(+), 33 deletions(-)
 create mode 160000 .worktrees/pr-767
 create mode 160000 .worktrees/pr-822
 create mode 100644 AGENTS.md

diff --git a/.worktrees/pr-767 b/.worktrees/pr-767
new file mode 160000
index 00000000..1778ab70
--- /dev/null
+++ b/.worktrees/pr-767
@@ -0,0 +1 @@
+Subproject commit 1778ab70ca0fc2c0c9a4aa8f15c0aa28bd0c5271
diff --git a/.worktrees/pr-822 b/.worktrees/pr-822
new file mode 160000
index 00000000..4298132f
--- /dev/null
+++ b/.worktrees/pr-822
@@ -0,0 +1 @@
+Subproject commit 4298132f93a3c2cf404f55ff5c56a38ca7ee1280
diff --git a/AGENTS.md b/AGENTS.md
new file mode 100644
index 00000000..ec826b1f
--- /dev/null
+++ b/AGENTS.md
@@ -0,0 +1,33 @@
+# MCP Inspector Development Guide
+
+## Build Commands
+
+- Build all: `npm run build`
+- Build client: `npm run build-client`
+- Build server: `npm run build-server`
+- Development mode: `npm run dev` (use `npm run dev:windows` on Windows)
+- Format code: `npm run prettier-fix`
+- Client lint: `cd client && npm run lint`
+
+## Code Style Guidelines
+
+- Use TypeScript with proper type annotations
+- Follow React functional component patterns with hooks
+- Use ES modules (import/export) not CommonJS
+- Use Prettier for formatting (auto-formatted on commit)
+- Follow existing naming conventions:
+  - camelCase for variables and functions
+  - PascalCase for component names and types
+  - kebab-case for file names
+- Use async/await for asynchronous operations
+- Implement proper error handling with try/catch blocks
+- Use Tailwind CSS for styling in the client
+- Keep components small and focused on a single responsibility
+
+## Project Organization
+
+The project is organized as a monorepo with workspaces:
+
+- `client/`: React frontend with Vite, TypeScript and Tailwind
+- `server/`: Express backend with TypeScript
+- `cli/`: Command-line interface for testing and invoking MCP server methods directly
diff --git a/CLAUDE.md b/CLAUDE.md
index ec826b1f..285e0f5b 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -1,33 +1 @@
-# MCP Inspector Development Guide
-
-## Build Commands
-
-- Build all: `npm run build`
-- Build client: `npm run build-client`
-- Build server: `npm run build-server`
-- Development mode: `npm run dev` (use `npm run dev:windows` on Windows)
-- Format code: `npm run prettier-fix`
-- Client lint: `cd client && npm run lint`
-
-## Code Style Guidelines
-
-- Use TypeScript with proper type annotations
-- Follow React functional component patterns with hooks
-- Use ES modules (import/export) not CommonJS
-- Use Prettier for formatting (auto-formatted on commit)
-- Follow existing naming conventions:
-  - camelCase for variables and functions
-  - PascalCase for component names and types
-  - kebab-case for file names
-- Use async/await for asynchronous operations
-- Implement proper error handling with try/catch blocks
-- Use Tailwind CSS for styling in the client
-- Keep components small and focused on a single responsibility
-
-## Project Organization
-
-The project is organized as a monorepo with workspaces:
-
-- `client/`: React frontend with Vite, TypeScript and Tailwind
-- `server/`: Express backend with TypeScript
-- `cli/`: Command-line interface for testing and invoking MCP server methods directly
+@./AGENTS.md

From 68a9cce437e7ae281b55218d4e208d29dd983378 Mon Sep 17 00:00:00 2001
From: olaservo <olahungerford@gmail.com>
Date: Wed, 8 Oct 2025 07:46:58 -0700
Subject: [PATCH 07/14] Remove accidental commits

---
 .worktrees/pr-767 | 1 -
 .worktrees/pr-822 | 1 -
 2 files changed, 2 deletions(-)
 delete mode 160000 .worktrees/pr-767
 delete mode 160000 .worktrees/pr-822

diff --git a/.worktrees/pr-767 b/.worktrees/pr-767
deleted file mode 160000
index 1778ab70..00000000
--- a/.worktrees/pr-767
+++ /dev/null
@@ -1 +0,0 @@
-Subproject commit 1778ab70ca0fc2c0c9a4aa8f15c0aa28bd0c5271
diff --git a/.worktrees/pr-822 b/.worktrees/pr-822
deleted file mode 160000
index 4298132f..00000000
--- a/.worktrees/pr-822
+++ /dev/null
@@ -1 +0,0 @@
-Subproject commit 4298132f93a3c2cf404f55ff5c56a38ca7ee1280

From 3fd0feb75aa05732bbfb75e11a2728fdfbdababe Mon Sep 17 00:00:00 2001
From: Greg Saab <greg@timescale.com>
Date: Wed, 8 Oct 2025 12:22:47 -0400
Subject: [PATCH 08/14] if a field is nullable, provide a means of specifying
 `null`

---
 client/src/components/ToolsTab.tsx | 42 +++++++++++++++++++++++-------
 client/src/utils/jsonUtils.ts      |  1 +
 client/src/utils/schemaUtils.ts    | 16 ++++++------
 3 files changed, 42 insertions(+), 17 deletions(-)

diff --git a/client/src/components/ToolsTab.tsx b/client/src/components/ToolsTab.tsx
index 0123296a..0ef80f77 100644
--- a/client/src/components/ToolsTab.tsx
+++ b/client/src/components/ToolsTab.tsx
@@ -151,15 +151,39 @@ const ToolsTab = ({
                     const required = isPropertyRequired(key, inputSchema);
                     return (
                       <div key={key}>
-                        <Label
-                          htmlFor={key}
-                          className="block text-sm font-medium text-gray-700 dark:text-gray-300"
-                        >
-                          {key}
-                          {required && (
-                            <span className="text-red-500 ml-1">*</span>
-                          )}
-                        </Label>
+                        <div className="flex justify-between">
+                          <Label
+                            htmlFor={key}
+                            className="block text-sm font-medium text-gray-700 dark:text-gray-300"
+                          >
+                            {key}
+                            {required && (
+                              <span className="text-red-500 ml-1">*</span>
+                            )}
+                          </Label>
+                          {prop.nullable ? (
+                            <div className="flex items-center space-x-2">
+                              <Checkbox
+                                id={key}
+                                name={key}
+                                checked={params[key] === null}
+                                onCheckedChange={(checked: boolean) =>
+                                  setParams({
+                                    ...params,
+                                    [key]: checked ? null : prop.default,
+                                  })
+                                }
+                              />
+                              <label
+                                htmlFor={key}
+                                className="text-sm font-medium text-gray-700 dark:text-gray-300"
+                              >
+                                Null
+                              </label>
+                            </div>
+                          ) : null}
+                        </div>
+
                         {prop.type === "boolean" ? (
                           <div className="flex items-center space-x-2 mt-2">
                             <Checkbox
diff --git a/client/src/utils/jsonUtils.ts b/client/src/utils/jsonUtils.ts
index 08de50ba..3a9336f1 100644
--- a/client/src/utils/jsonUtils.ts
+++ b/client/src/utils/jsonUtils.ts
@@ -41,6 +41,7 @@ export type JsonSchemaType = {
   maximum?: number;
   minLength?: number;
   maxLength?: number;
+  nullable?: boolean;
   pattern?: string;
   format?: string;
   enum?: string[];
diff --git a/client/src/utils/schemaUtils.ts b/client/src/utils/schemaUtils.ts
index 4ad8e8ca..73137805 100644
--- a/client/src/utils/schemaUtils.ts
+++ b/client/src/utils/schemaUtils.ts
@@ -158,7 +158,7 @@ export function normalizeUnionType(schema: JsonSchemaType): JsonSchemaType {
     schema.anyOf.some((t) => (t as JsonSchemaType).type === "string") &&
     schema.anyOf.some((t) => (t as JsonSchemaType).type === "null")
   ) {
-    return { ...schema, type: "string", anyOf: undefined };
+    return { ...schema, type: "string", anyOf: undefined, nullable: true };
   }
 
   // Handle anyOf with exactly boolean and null (FastMCP pattern)
@@ -168,7 +168,7 @@ export function normalizeUnionType(schema: JsonSchemaType): JsonSchemaType {
     schema.anyOf.some((t) => (t as JsonSchemaType).type === "boolean") &&
     schema.anyOf.some((t) => (t as JsonSchemaType).type === "null")
   ) {
-    return { ...schema, type: "boolean", anyOf: undefined };
+    return { ...schema, type: "boolean", anyOf: undefined, nullable: true };
   }
 
   // Handle anyOf with exactly number and null (FastMCP pattern)
@@ -178,7 +178,7 @@ export function normalizeUnionType(schema: JsonSchemaType): JsonSchemaType {
     schema.anyOf.some((t) => (t as JsonSchemaType).type === "number") &&
     schema.anyOf.some((t) => (t as JsonSchemaType).type === "null")
   ) {
-    return { ...schema, type: "number", anyOf: undefined };
+    return { ...schema, type: "number", anyOf: undefined, nullable: true };
   }
 
   // Handle anyOf with exactly integer and null (FastMCP pattern)
@@ -188,7 +188,7 @@ export function normalizeUnionType(schema: JsonSchemaType): JsonSchemaType {
     schema.anyOf.some((t) => (t as JsonSchemaType).type === "integer") &&
     schema.anyOf.some((t) => (t as JsonSchemaType).type === "null")
   ) {
-    return { ...schema, type: "integer", anyOf: undefined };
+    return { ...schema, type: "integer", anyOf: undefined, nullable: true };
   }
 
   // Handle array type with exactly string and null
@@ -198,7 +198,7 @@ export function normalizeUnionType(schema: JsonSchemaType): JsonSchemaType {
     schema.type.includes("string") &&
     schema.type.includes("null")
   ) {
-    return { ...schema, type: "string" };
+    return { ...schema, type: "string", nullable: true };
   }
 
   // Handle array type with exactly boolean and null
@@ -208,7 +208,7 @@ export function normalizeUnionType(schema: JsonSchemaType): JsonSchemaType {
     schema.type.includes("boolean") &&
     schema.type.includes("null")
   ) {
-    return { ...schema, type: "boolean" };
+    return { ...schema, type: "boolean", nullable: true };
   }
 
   // Handle array type with exactly number and null
@@ -218,7 +218,7 @@ export function normalizeUnionType(schema: JsonSchemaType): JsonSchemaType {
     schema.type.includes("number") &&
     schema.type.includes("null")
   ) {
-    return { ...schema, type: "number" };
+    return { ...schema, type: "number", nullable: true };
   }
 
   // Handle array type with exactly integer and null
@@ -228,7 +228,7 @@ export function normalizeUnionType(schema: JsonSchemaType): JsonSchemaType {
     schema.type.includes("integer") &&
     schema.type.includes("null")
   ) {
-    return { ...schema, type: "integer" };
+    return { ...schema, type: "integer", nullable: true };
   }
 
   return schema;

From 9e74437dab56b2afce1882b3613d63c720269e6e Mon Sep 17 00:00:00 2001
From: Greg Saab <greg@timescale.com>
Date: Wed, 8 Oct 2025 12:34:13 -0400
Subject: [PATCH 09/14] update specs

---
 client/src/utils/__tests__/schemaUtils.test.ts | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/client/src/utils/__tests__/schemaUtils.test.ts b/client/src/utils/__tests__/schemaUtils.test.ts
index 0e832b09..98bfcb0b 100644
--- a/client/src/utils/__tests__/schemaUtils.test.ts
+++ b/client/src/utils/__tests__/schemaUtils.test.ts
@@ -188,6 +188,7 @@ describe("normalizeUnionType", () => {
     expect(normalized.type).toBe("boolean");
     expect(normalized.anyOf).toBeUndefined();
     expect(normalized.description).toBe("Optional boolean parameter");
+    expect(normalized.nullable).toBeTruthy();
   });
 
   test("normalizes array type with string and null to string type", () => {
@@ -200,6 +201,7 @@ describe("normalizeUnionType", () => {
 
     expect(normalized.type).toBe("string");
     expect(normalized.description).toBe("Optional string parameter");
+    expect(normalized.nullable).toBeTruthy();
   });
 
   test("normalizes array type with boolean and null to boolean type", () => {
@@ -212,6 +214,7 @@ describe("normalizeUnionType", () => {
 
     expect(normalized.type).toBe("boolean");
     expect(normalized.description).toBe("Optional boolean parameter");
+    expect(normalized.nullable).toBeTruthy();
   });
 
   test("normalizes anyOf with number and null to number type", () => {
@@ -225,6 +228,7 @@ describe("normalizeUnionType", () => {
     expect(normalized.type).toBe("number");
     expect(normalized.anyOf).toBeUndefined();
     expect(normalized.description).toBe("Optional number parameter");
+    expect(normalized.nullable).toBeTruthy();
   });
 
   test("normalizes anyOf with integer and null to integer type", () => {
@@ -238,6 +242,7 @@ describe("normalizeUnionType", () => {
     expect(normalized.type).toBe("integer");
     expect(normalized.anyOf).toBeUndefined();
     expect(normalized.description).toBe("Optional integer parameter");
+    expect(normalized.nullable).toBeTruthy();
   });
 
   test("normalizes array type with number and null to number type", () => {
@@ -250,6 +255,7 @@ describe("normalizeUnionType", () => {
 
     expect(normalized.type).toBe("number");
     expect(normalized.description).toBe("Optional number parameter");
+    expect(normalized.nullable).toBeTruthy();
   });
 
   test("normalizes array type with integer and null to integer type", () => {
@@ -262,6 +268,7 @@ describe("normalizeUnionType", () => {
 
     expect(normalized.type).toBe("integer");
     expect(normalized.description).toBe("Optional integer parameter");
+    expect(normalized.nullable).toBeTruthy();
   });
 
   test("handles anyOf with reversed order (null first)", () => {
@@ -273,6 +280,7 @@ describe("normalizeUnionType", () => {
 
     expect(normalized.type).toBe("string");
     expect(normalized.anyOf).toBeUndefined();
+    expect(normalized.nullable).toBeTruthy();
   });
 
   test("leaves non-union schemas unchanged", () => {
@@ -294,6 +302,7 @@ describe("normalizeUnionType", () => {
     const normalized = normalizeUnionType(schema);
 
     expect(normalized).toEqual(schema);
+    expect(normalized.nullable).toBeFalsy();
   });
 
   test("leaves anyOf with more than two types unchanged", () => {
@@ -343,6 +352,7 @@ describe("normalizeUnionType", () => {
     expect(normalized.minLength).toBe(1);
     expect(normalized.maxLength).toBe(100);
     expect(normalized.pattern).toBe("^[a-z]+$");
+    expect(normalized.nullable).toBeTruthy();
   });
 });
 

From 6facce3fc1962986064c2df5f648a747d3eb0855 Mon Sep 17 00:00:00 2001
From: Greg Saab <greg@timescale.com>
Date: Wed, 8 Oct 2025 13:04:50 -0400
Subject: [PATCH 10/14] conditionally render the checkbox

---
 client/src/components/ToolsTab.tsx | 252 +++++++++++++++--------------
 1 file changed, 129 insertions(+), 123 deletions(-)

diff --git a/client/src/components/ToolsTab.tsx b/client/src/components/ToolsTab.tsx
index 0ef80f77..871e3838 100644
--- a/client/src/components/ToolsTab.tsx
+++ b/client/src/components/ToolsTab.tsx
@@ -178,145 +178,151 @@ const ToolsTab = ({
                                 htmlFor={key}
                                 className="text-sm font-medium text-gray-700 dark:text-gray-300"
                               >
-                                Null
+                                null
                               </label>
                             </div>
                           ) : null}
                         </div>
 
-                        {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}
-                            placeholder={prop.description}
-                            value={
-                              params[key] === undefined
-                                ? ""
-                                : String(params[key])
-                            }
-                            onChange={(e) => {
-                              const value = e.target.value;
-                              if (value === "") {
-                                // Field cleared - set to undefined
-                                setParams({
-                                  ...params,
-                                  [key]: undefined,
-                                });
-                              } else {
-                                // Field has value - keep as string
-                                setParams({
-                                  ...params,
-                                  [key]: value,
-                                });
-                              }
-                            }}
-                            className="mt-1"
-                          />
-                        ) : prop.type === "object" || prop.type === "array" ? (
-                          <div className="mt-1">
-                            <DynamicJsonForm
-                              ref={(ref) => (formRefs.current[key] = ref)}
-                              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,
-                                });
-                                // Check validation after a short delay to allow form to update
-                                setTimeout(checkValidationErrors, 100);
-                              }}
-                            />
-                          </div>
-                        ) : prop.type === "number" ||
-                          prop.type === "integer" ? (
-                          <Input
-                            type="number"
-                            id={key}
-                            name={key}
-                            placeholder={prop.description}
-                            value={
-                              params[key] === undefined
-                                ? ""
-                                : String(params[key])
-                            }
-                            onChange={(e) => {
-                              const value = e.target.value;
-                              if (value === "") {
-                                // Field cleared - set to undefined
-                                setParams({
-                                  ...params,
-                                  [key]: undefined,
-                                });
-                              } else {
-                                // Field has value - try to convert to number, but store input either way
-                                const num = Number(value);
-                                if (!isNaN(num)) {
+                        <div
+                          role="toolinputwrapper"
+                          className={`${prop.nullable && params[key] === null ? "pointer-events-none opacity-50" : ""}`}
+                        >
+                          {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]: num,
+                                    [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}
+                              placeholder={prop.description}
+                              value={
+                                params[key] === undefined
+                                  ? ""
+                                  : String(params[key])
+                              }
+                              onChange={(e) => {
+                                const value = e.target.value;
+                                if (value === "") {
+                                  // Field cleared - set to undefined
+                                  setParams({
+                                    ...params,
+                                    [key]: undefined,
                                   });
                                 } else {
-                                  // Store invalid input as string - let server validate
+                                  // Field has value - keep as string
                                   setParams({
                                     ...params,
                                     [key]: value,
                                   });
                                 }
-                              }
-                            }}
-                            className="mt-1"
-                          />
-                        ) : (
-                          <div className="mt-1">
-                            <DynamicJsonForm
-                              ref={(ref) => (formRefs.current[key] = ref)}
-                              schema={{
-                                type: prop.type,
-                                properties: prop.properties,
-                                description: prop.description,
-                                items: prop.items,
-                              }}
-                              value={params[key] as JsonValue}
-                              onChange={(newValue: JsonValue) => {
-                                setParams({
-                                  ...params,
-                                  [key]: newValue,
-                                });
-                                // Check validation after a short delay to allow form to update
-                                setTimeout(checkValidationErrors, 100);
                               }}
+                              className="mt-1"
                             />
-                          </div>
-                        )}
+                          ) : prop.type === "object" ||
+                            prop.type === "array" ? (
+                            <div className="mt-1">
+                              <DynamicJsonForm
+                                ref={(ref) => (formRefs.current[key] = ref)}
+                                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,
+                                  });
+                                  // Check validation after a short delay to allow form to update
+                                  setTimeout(checkValidationErrors, 100);
+                                }}
+                              />
+                            </div>
+                          ) : prop.type === "number" ||
+                            prop.type === "integer" ? (
+                            <Input
+                              type="number"
+                              id={key}
+                              name={key}
+                              placeholder={prop.description}
+                              value={
+                                params[key] === undefined
+                                  ? ""
+                                  : String(params[key])
+                              }
+                              onChange={(e) => {
+                                const value = e.target.value;
+                                if (value === "") {
+                                  // Field cleared - set to undefined
+                                  setParams({
+                                    ...params,
+                                    [key]: undefined,
+                                  });
+                                } else {
+                                  // Field has value - try to convert to number, but store input either way
+                                  const num = Number(value);
+                                  if (!isNaN(num)) {
+                                    setParams({
+                                      ...params,
+                                      [key]: num,
+                                    });
+                                  } else {
+                                    // Store invalid input as string - let server validate
+                                    setParams({
+                                      ...params,
+                                      [key]: value,
+                                    });
+                                  }
+                                }
+                              }}
+                              className="mt-1"
+                            />
+                          ) : (
+                            <div className="mt-1">
+                              <DynamicJsonForm
+                                ref={(ref) => (formRefs.current[key] = ref)}
+                                schema={{
+                                  type: prop.type,
+                                  properties: prop.properties,
+                                  description: prop.description,
+                                  items: prop.items,
+                                }}
+                                value={params[key] as JsonValue}
+                                onChange={(newValue: JsonValue) => {
+                                  setParams({
+                                    ...params,
+                                    [key]: newValue,
+                                  });
+                                  // Check validation after a short delay to allow form to update
+                                  setTimeout(checkValidationErrors, 100);
+                                }}
+                              />
+                            </div>
+                          )}
+                        </div>
                       </div>
                     );
                   },

From 6dd62d3a6d1a1c3b013fbed691d6b30d7e6554e6 Mon Sep 17 00:00:00 2001
From: Greg Saab <greg@timescale.com>
Date: Wed, 8 Oct 2025 13:04:57 -0400
Subject: [PATCH 11/14] add UI spec

---
 .../components/__tests__/ToolsTab.test.tsx    | 42 +++++++++++++++++++
 1 file changed, 42 insertions(+)

diff --git a/client/src/components/__tests__/ToolsTab.test.tsx b/client/src/components/__tests__/ToolsTab.test.tsx
index a50f62df..a1d8f605 100644
--- a/client/src/components/__tests__/ToolsTab.test.tsx
+++ b/client/src/components/__tests__/ToolsTab.test.tsx
@@ -44,6 +44,16 @@ describe("ToolsTab", () => {
         },
       },
     },
+    {
+      name: "tool4",
+      description: "Tool with nullable field",
+      inputSchema: {
+        type: "object" as const,
+        properties: {
+          num: { type: ["number", "null"] as const },
+        },
+      },
+    },
   ];
 
   const defaultProps = {
@@ -135,6 +145,38 @@ describe("ToolsTab", () => {
     });
   });
 
+  it("should allow specifying null value", async () => {
+    const mockCallTool = jest.fn();
+    const toolWithNullableField = mockTools[3];
+
+    renderToolsTab({
+      tools: [toolWithNullableField],
+      selectedTool: toolWithNullableField,
+      callTool: mockCallTool,
+    });
+
+    const nullToggleButton = screen.getByRole("checkbox", { name: /null/i });
+    expect(nullToggleButton).toBeInTheDocument();
+
+    await act(async () => {
+      fireEvent.click(nullToggleButton);
+    });
+
+    expect(screen.getByRole("toolinputwrapper").classList).toContain(
+      "pointer-events-none",
+    );
+
+    const runButton = screen.getByRole("button", { name: /run tool/i });
+    await act(async () => {
+      fireEvent.click(runButton);
+    });
+
+    // Tool should have been called with null value
+    expect(mockCallTool).toHaveBeenCalledWith(toolWithNullableField.name, {
+      num: null,
+    });
+  });
+
   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;

From 653e0f87d1d4957c3b7fb98a4be8efe9c45c28cc Mon Sep 17 00:00:00 2001
From: anilkumar <anilkumar567849@gmail.com>
Date: Thu, 9 Oct 2025 00:03:32 +0530
Subject: [PATCH 12/14] fix: prevent long unbreakable words in alert messages
 from overflowing container

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

diff --git a/client/src/components/PromptsTab.tsx b/client/src/components/PromptsTab.tsx
index 0df36bb8..424845d0 100644
--- a/client/src/components/PromptsTab.tsx
+++ b/client/src/components/PromptsTab.tsx
@@ -131,7 +131,9 @@ const PromptsTab = ({
               <Alert variant="destructive">
                 <AlertCircle className="h-4 w-4" />
                 <AlertTitle>Error</AlertTitle>
-                <AlertDescription>{error}</AlertDescription>
+                <AlertDescription className="break-all">
+                  {error}
+                </AlertDescription>
               </Alert>
             ) : selectedPrompt ? (
               <div className="space-y-4">
diff --git a/client/src/components/ResourcesTab.tsx b/client/src/components/ResourcesTab.tsx
index 874e0ff7..f44a8402 100644
--- a/client/src/components/ResourcesTab.tsx
+++ b/client/src/components/ResourcesTab.tsx
@@ -225,7 +225,9 @@ const ResourcesTab = ({
               <Alert variant="destructive">
                 <AlertCircle className="h-4 w-4" />
                 <AlertTitle>Error</AlertTitle>
-                <AlertDescription>{error}</AlertDescription>
+                <AlertDescription className="break-all">
+                  {error}
+                </AlertDescription>
               </Alert>
             ) : selectedResource ? (
               <JsonView
diff --git a/client/src/components/ToolsTab.tsx b/client/src/components/ToolsTab.tsx
index 0123296a..7692b79c 100644
--- a/client/src/components/ToolsTab.tsx
+++ b/client/src/components/ToolsTab.tsx
@@ -137,7 +137,9 @@ const ToolsTab = ({
                   <Alert variant="destructive">
                     <AlertCircle className="h-4 w-4" />
                     <AlertTitle>Error</AlertTitle>
-                    <AlertDescription>{error}</AlertDescription>
+                    <AlertDescription className="break-all">
+                      {error}
+                    </AlertDescription>
                   </Alert>
                 )}
                 <p className="text-sm text-gray-600 dark:text-gray-400">

From 4e901430710bfbcc19005241ab0d9efd5f642d2c Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Fri, 10 Oct 2025 11:45:18 -0400
Subject: [PATCH 13/14] Fix linter complaints * In JsonView.tsx   - add
 setCopied to dependencies of handleCopy useCallback * In useCopy.ts   - add
 timeout to useEffect inside useCopy hook

---
 client/src/components/JsonView.tsx | 2 +-
 client/src/lib/hooks/useCopy.ts    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/components/JsonView.tsx b/client/src/components/JsonView.tsx
index 1febff6a..1eb2bbb7 100644
--- a/client/src/components/JsonView.tsx
+++ b/client/src/components/JsonView.tsx
@@ -51,7 +51,7 @@ const JsonView = memo(
           variant: "destructive",
         });
       }
-    }, [toast, normalizedData]);
+    }, [toast, normalizedData, setCopied]);
 
     return (
       <div className={clsx("p-4 border rounded relative", className)}>
diff --git a/client/src/lib/hooks/useCopy.ts b/client/src/lib/hooks/useCopy.ts
index 8dd7e401..148d603d 100644
--- a/client/src/lib/hooks/useCopy.ts
+++ b/client/src/lib/hooks/useCopy.ts
@@ -21,7 +21,7 @@ function useCopy({ timeout = 500 }: UseCopyProps = {}) {
         clearTimeout(timeoutId);
       }
     };
-  }, [copied]);
+  }, [copied, timeout]);
 
   return { copied, setCopied };
 }

From bc1ca95aea751cd0686678a22bea8880dfa524d3 Mon Sep 17 00:00:00 2001
From: crondinini-ant <camila@anthropic.com>
Date: Fri, 10 Oct 2025 18:21:34 +0100
Subject: [PATCH 14/14] add client secret option

---
 client/src/App.tsx                            | 11 ++++++
 client/src/components/Sidebar.tsx             | 37 +++++++++++++++++++
 .../src/components/__tests__/Sidebar.test.tsx |  2 +
 client/src/lib/hooks/useConnection.ts         | 14 ++++++-
 4 files changed, 62 insertions(+), 2 deletions(-)

diff --git a/client/src/App.tsx b/client/src/App.tsx
index b7fc607b..5937d738 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -141,6 +141,10 @@ const App = () => {
     return localStorage.getItem("lastOauthScope") || "";
   });
 
+  const [oauthClientSecret, setOauthClientSecret] = useState<string>(() => {
+    return localStorage.getItem("lastOauthClientSecret") || "";
+  });
+
   // Custom headers state with migration from legacy auth
   const [customHeaders, setCustomHeaders] = useState<CustomHeaders>(() => {
     const savedHeaders = localStorage.getItem("lastCustomHeaders");
@@ -262,6 +266,7 @@ const App = () => {
     env,
     customHeaders,
     oauthClientId,
+    oauthClientSecret,
     oauthScope,
     config,
     connectionType,
@@ -394,6 +399,10 @@ const App = () => {
     localStorage.setItem("lastOauthScope", oauthScope);
   }, [oauthScope]);
 
+  useEffect(() => {
+    localStorage.setItem("lastOauthClientSecret", oauthClientSecret);
+  }, [oauthClientSecret]);
+
   useEffect(() => {
     saveInspectorConfig(CONFIG_LOCAL_STORAGE_KEY, config);
   }, [config]);
@@ -900,6 +909,8 @@ const App = () => {
           setCustomHeaders={setCustomHeaders}
           oauthClientId={oauthClientId}
           setOauthClientId={setOauthClientId}
+          oauthClientSecret={oauthClientSecret}
+          setOauthClientSecret={setOauthClientSecret}
           oauthScope={oauthScope}
           setOauthScope={setOauthScope}
           onConnect={connectMcpServer}
diff --git a/client/src/components/Sidebar.tsx b/client/src/components/Sidebar.tsx
index 889380d8..b369a967 100644
--- a/client/src/components/Sidebar.tsx
+++ b/client/src/components/Sidebar.tsx
@@ -58,6 +58,8 @@ interface SidebarProps {
   setCustomHeaders: (headers: CustomHeadersType) => void;
   oauthClientId: string;
   setOauthClientId: (id: string) => void;
+  oauthClientSecret: string;
+  setOauthClientSecret: (secret: string) => void;
   oauthScope: string;
   setOauthScope: (scope: string) => void;
   onConnect: () => void;
@@ -87,6 +89,8 @@ const Sidebar = ({
   setCustomHeaders,
   oauthClientId,
   setOauthClientId,
+  oauthClientSecret,
+  setOauthClientSecret,
   oauthScope,
   setOauthScope,
   onConnect,
@@ -104,6 +108,7 @@ const Sidebar = ({
   const [showAuthConfig, setShowAuthConfig] = useState(false);
   const [showConfig, setShowConfig] = useState(false);
   const [shownEnvVars, setShownEnvVars] = useState<Set<string>>(new Set());
+  const [showClientSecret, setShowClientSecret] = useState(false);
   const [copiedServerEntry, setCopiedServerEntry] = useState(false);
   const [copiedServerFile, setCopiedServerFile] = useState(false);
   const { toast } = useToast();
@@ -555,6 +560,38 @@ const Sidebar = ({
                         data-testid="oauth-client-id-input"
                         className="font-mono"
                       />
+                      <label className="text-sm font-medium">
+                        Client Secret
+                      </label>
+                      <div className="flex gap-2">
+                        <Input
+                          type={showClientSecret ? "text" : "password"}
+                          placeholder="Client Secret (optional)"
+                          onChange={(e) => setOauthClientSecret(e.target.value)}
+                          value={oauthClientSecret}
+                          data-testid="oauth-client-secret-input"
+                          className="font-mono"
+                        />
+                        <Button
+                          variant="outline"
+                          size="icon"
+                          className="h-9 w-9 p-0 shrink-0"
+                          onClick={() => setShowClientSecret(!showClientSecret)}
+                          aria-label={
+                            showClientSecret ? "Hide secret" : "Show secret"
+                          }
+                          aria-pressed={showClientSecret}
+                          title={
+                            showClientSecret ? "Hide secret" : "Show secret"
+                          }
+                        >
+                          {showClientSecret ? (
+                            <Eye className="h-4 w-4" aria-hidden="true" />
+                          ) : (
+                            <EyeOff className="h-4 w-4" aria-hidden="true" />
+                          )}
+                        </Button>
+                      </div>
                       <label className="text-sm font-medium">
                         Redirect URL
                       </label>
diff --git a/client/src/components/__tests__/Sidebar.test.tsx b/client/src/components/__tests__/Sidebar.test.tsx
index 4684eb63..c1f39592 100644
--- a/client/src/components/__tests__/Sidebar.test.tsx
+++ b/client/src/components/__tests__/Sidebar.test.tsx
@@ -44,6 +44,8 @@ describe("Sidebar", () => {
     setSseUrl: jest.fn(),
     oauthClientId: "",
     setOauthClientId: jest.fn(),
+    oauthClientSecret: "",
+    setOauthClientSecret: jest.fn(),
     oauthScope: "",
     setOauthScope: jest.fn(),
     env: {},
diff --git a/client/src/lib/hooks/useConnection.ts b/client/src/lib/hooks/useConnection.ts
index 37073e9b..8639feeb 100644
--- a/client/src/lib/hooks/useConnection.ts
+++ b/client/src/lib/hooks/useConnection.ts
@@ -67,6 +67,7 @@ interface UseConnectionOptions {
   // Custom headers support
   customHeaders?: CustomHeaders;
   oauthClientId?: string;
+  oauthClientSecret?: string;
   oauthScope?: string;
   config: InspectorConfig;
   connectionType?: "direct" | "proxy";
@@ -89,6 +90,7 @@ export function useConnection({
   env,
   customHeaders,
   oauthClientId,
+  oauthClientSecret,
   oauthScope,
   config,
   connectionType = "proxy",
@@ -125,12 +127,20 @@ export function useConnection({
       return;
     }
 
+    const clientInformation: { client_id: string; client_secret?: string } = {
+      client_id: oauthClientId,
+    };
+
+    if (oauthClientSecret) {
+      clientInformation.client_secret = oauthClientSecret;
+    }
+
     saveClientInformationToSessionStorage({
       serverUrl: sseUrl,
-      clientInformation: { client_id: oauthClientId },
+      clientInformation,
       isPreregistered: true,
     });
-  }, [oauthClientId, sseUrl]);
+  }, [oauthClientId, oauthClientSecret, sseUrl]);
 
   const pushHistory = (request: object, response?: object) => {
     setRequestHistory((prev) => [