From 59504ac336608f18570008e571977c9f245514d1 Mon Sep 17 00:00:00 2001
From: Alejandro Borbolla <alejandro.borbolla@datadoghq.com>
Date: Thu, 31 Jul 2025 00:31:34 +0200
Subject: [PATCH 01/13] refactor: Add `useCopy()`

The `useCopy()` hook is pretty simple, as it handle a state variable
(`copied`) and put it back to false after a `timeout`
---
 client/src/lib/hooks/useCopy.ts | 29 +++++++++++++++++++++++++++++
 1 file changed, 29 insertions(+)
 create mode 100644 client/src/lib/hooks/useCopy.ts

diff --git a/client/src/lib/hooks/useCopy.ts b/client/src/lib/hooks/useCopy.ts
new file mode 100644
index 00000000..8dd7e401
--- /dev/null
+++ b/client/src/lib/hooks/useCopy.ts
@@ -0,0 +1,29 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+type UseCopyProps = {
+  timeout?: number;
+};
+
+function useCopy({ timeout = 500 }: UseCopyProps = {}) {
+  const [copied, setCopied] = useState(false);
+
+  useEffect(() => {
+    let timeoutId: NodeJS.Timeout;
+    if (copied) {
+      timeoutId = setTimeout(() => {
+        setCopied(false);
+      }, timeout);
+    }
+    return () => {
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
+    };
+  }, [copied]);
+
+  return { copied, setCopied };
+}
+
+export default useCopy;

From 8589faa4c4b6c201c6ece7bcc563f9cccee49a5f Mon Sep 17 00:00:00 2001
From: Alejandro Borbolla <alejandro.borbolla@datadoghq.com>
Date: Thu, 31 Jul 2025 00:32:39 +0200
Subject: [PATCH 02/13] refactor: Use `useCopy()` in `JsonView`

---
 client/src/components/JsonView.tsx | 17 ++---------------
 1 file changed, 2 insertions(+), 15 deletions(-)

diff --git a/client/src/components/JsonView.tsx b/client/src/components/JsonView.tsx
index e9ef0d2d..7cb38667 100644
--- a/client/src/components/JsonView.tsx
+++ b/client/src/components/JsonView.tsx
@@ -5,6 +5,7 @@ import { Copy, CheckCheck } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { useToast } from "@/lib/hooks/useToast";
 import { getDataType, tryParseJson } from "@/utils/jsonUtils";
+import useCopy from "@/lib/hooks/useCopy";
 
 interface JsonViewProps {
   data: unknown;
@@ -25,21 +26,7 @@ const JsonView = memo(
     isError = false,
   }: JsonViewProps) => {
     const { toast } = useToast();
-    const [copied, setCopied] = useState(false);
-
-    useEffect(() => {
-      let timeoutId: NodeJS.Timeout;
-      if (copied) {
-        timeoutId = setTimeout(() => {
-          setCopied(false);
-        }, 500);
-      }
-      return () => {
-        if (timeoutId) {
-          clearTimeout(timeoutId);
-        }
-      };
-    }, [copied]);
+    const { copied, setCopied } = useCopy();
 
     const normalizedData = useMemo(() => {
       return typeof data === "string"

From 5bbd9f736dd38916f812e7eac96e92f720e93561 Mon Sep 17 00:00:00 2001
From: Alejandro Borbolla <alejandro.borbolla@datadoghq.com>
Date: Thu, 31 Jul 2025 00:32:56 +0200
Subject: [PATCH 03/13] feat: Copy the input parameters of tools

---
 client/src/components/ToolsTab.tsx | 84 +++++++++++++++++++++---------
 1 file changed, 60 insertions(+), 24 deletions(-)

diff --git a/client/src/components/ToolsTab.tsx b/client/src/components/ToolsTab.tsx
index 2eb682e5..04bd0465 100644
--- a/client/src/components/ToolsTab.tsx
+++ b/client/src/components/ToolsTab.tsx
@@ -13,11 +13,20 @@ import {
   ListToolsResult,
   Tool,
 } from "@modelcontextprotocol/sdk/types.js";
-import { Loader2, Send, ChevronDown, ChevronUp } from "lucide-react";
+import {
+  Loader2,
+  Send,
+  ChevronDown,
+  ChevronUp,
+  Copy,
+  CheckCheck,
+} from "lucide-react";
 import { useEffect, useState } from "react";
 import ListPane from "./ListPane";
 import JsonView from "./JsonView";
 import ToolResults from "./ToolResults";
+import { useToast } from "@/lib/hooks/useToast";
+import useCopy from "@/lib/hooks/useCopy";
 
 // Type guard to safely detect the optional _meta field without using `any`
 const hasMeta = (tool: Tool): tool is Tool & { _meta: unknown } =>
@@ -51,6 +60,8 @@ const ToolsTab = ({
   const [isToolRunning, setIsToolRunning] = useState(false);
   const [isOutputSchemaExpanded, setIsOutputSchemaExpanded] = useState(false);
   const [isMetaExpanded, setIsMetaExpanded] = useState(false);
+  const { toast } = useToast();
+  const { copied, setCopied } = useCopy();
 
   useEffect(() => {
     const params = Object.entries(
@@ -284,29 +295,54 @@ const ToolsTab = ({
                       </div>
                     </div>
                   )}
-                <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>
+                <div className="flex gap-2">
+                  <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>
+                  <Button
+                    onClick={async () => {
+                      try {
+                        navigator.clipboard.writeText(
+                          JSON.stringify(params, null, 2),
+                        );
+                        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",
+                        });
+                      }
+                    }}
+                  >
+                    {copied ? (
+                      <CheckCheck className="h-4 w-4 mr-2 dark:text-green-700 text-green-600" />
+                    ) : (
+                      <Copy className="h-4 w-4 mr-2" />
+                    )}
+                    Copy Input
+                  </Button>
+                </div>
                 <ToolResults
                   toolResult={toolResult}
                   selectedTool={selectedTool}

From 16e007709035581ef3e5355a9599b61d8a5eb9a8 Mon Sep 17 00:00:00 2001
From: Alejandro Borbolla <alejandro.borbolla@datadoghq.com>
Date: Mon, 1 Sep 2025 18:31:52 +0200
Subject: [PATCH 04/13] fix: Assess PR comments (typo)

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

diff --git a/client/src/components/ToolsTab.tsx b/client/src/components/ToolsTab.tsx
index acabd733..377521ae 100644
--- a/client/src/components/ToolsTab.tsx
+++ b/client/src/components/ToolsTab.tsx
@@ -336,7 +336,7 @@ const ToolsTab = ({
                       } catch (error) {
                         toast({
                           title: "Error",
-                          description: `There was an error coping result into the clipboard: ${error instanceof Error ? error.message : String(error)}`,
+                          description: `There was an error copying input to the clipboard: ${error instanceof Error ? error.message : String(error)}`,
                           variant: "destructive",
                         });
                       }

From 2fd781ab8187fe36a16c36639860b5dd7ad26735 Mon Sep 17 00:00:00 2001
From: Alejandro Borbolla <alejandro.borbolla@datadoghq.com>
Date: Mon, 1 Sep 2025 18:32:16 +0200
Subject: [PATCH 05/13] fix: CI by removing unused `useEffect`

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

diff --git a/client/src/components/JsonView.tsx b/client/src/components/JsonView.tsx
index 7cb38667..1febff6a 100644
--- a/client/src/components/JsonView.tsx
+++ b/client/src/components/JsonView.tsx
@@ -1,4 +1,4 @@
-import { useState, memo, useMemo, useCallback, useEffect } from "react";
+import { useState, memo, useMemo, useCallback } from "react";
 import type { JsonValue } from "@/utils/jsonUtils";
 import clsx from "clsx";
 import { Copy, CheckCheck } from "lucide-react";

From c5acc6312921fdd9009796113488400c2ac1d14c Mon Sep 17 00:00:00 2001
From: "jeetul.samaiya" <jeetul.samaiya@rapidops.com>
Date: Tue, 26 Aug 2025 18:51:06 +0530
Subject: [PATCH 06/13] Add support for custom headers and migrate from legacy
 auth

- Introduced CustomHeaders component for managing custom headers.
- Updated Sidebar to include CustomHeaders component.
- Enhanced useConnection hook to handle custom headers and legacy auth migration.
- Added tests for custom headers functionality.
- Updated package.json and package-lock.json for new dependencies.
---
 client/package.json                           |   2 +
 client/src/App.tsx                            |  43 ++++
 client/src/components/CustomHeaders.tsx       | 215 ++++++++++++++++++
 client/src/components/Sidebar.tsx             |  54 ++---
 .../src/components/__tests__/Sidebar.test.tsx |   4 +
 client/src/components/ui/switch.tsx           |  27 +++
 .../hooks/__tests__/useConnection.test.tsx    | 130 +++++++++++
 client/src/lib/hooks/useConnection.ts         |  58 ++++-
 client/src/lib/types/customHeaders.ts         |  59 +++++
 package-lock.json                             |  40 ++++
 server/package.json                           |   3 +
 server/src/index.ts                           |  17 ++
 12 files changed, 605 insertions(+), 47 deletions(-)
 create mode 100644 client/src/components/CustomHeaders.tsx
 create mode 100644 client/src/components/ui/switch.tsx
 create mode 100644 client/src/lib/types/customHeaders.ts

diff --git a/client/package.json b/client/package.json
index 61f65b62..6b84b106 100644
--- a/client/package.json
+++ b/client/package.json
@@ -33,6 +33,7 @@
     "@radix-ui/react-popover": "^1.1.3",
     "@radix-ui/react-select": "^2.1.2",
     "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-switch": "^1.2.6",
     "@radix-ui/react-tabs": "^1.1.1",
     "@radix-ui/react-toast": "^1.2.6",
     "@radix-ui/react-tooltip": "^1.1.8",
@@ -69,6 +70,7 @@
     "globals": "^15.9.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
+    "jest-fixed-jsdom": "^0.0.9",
     "postcss": "^8.5.6",
     "tailwindcss": "^3.4.13",
     "tailwindcss-animate": "^1.0.7",
diff --git a/client/src/App.tsx b/client/src/App.tsx
index 60ce90c5..ff44759e 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -74,6 +74,7 @@ import ElicitationTab, {
   PendingElicitationRequest,
   ElicitationResponse,
 } from "./components/ElicitationTab";
+import { CustomHeaders, migrateFromLegacyAuth } from "./lib/types/customHeaders";
 
 const CONFIG_LOCAL_STORAGE_KEY = "inspectorConfig_v1";
 
@@ -127,6 +128,28 @@ const App = () => {
     return localStorage.getItem("lastOauthScope") || "";
   });
 
+  // Custom headers state with migration from legacy auth
+  const [customHeaders, setCustomHeaders] = useState<CustomHeaders>(() => {
+    const savedHeaders = localStorage.getItem("lastCustomHeaders");
+    if (savedHeaders) {
+      try {
+        return JSON.parse(savedHeaders);
+      } catch {
+        // Fall back to migration if JSON parsing fails
+      }
+    }
+
+    // Migrate from legacy auth if available
+    const legacyToken = localStorage.getItem("lastBearerToken") || "";
+    const legacyHeaderName = localStorage.getItem("lastHeaderName") || "";
+
+    if (legacyToken) {
+      return migrateFromLegacyAuth(legacyToken, legacyHeaderName);
+    }
+
+    return [];
+  });
+
   const [pendingSampleRequests, setPendingSampleRequests] = useState<
     Array<
       PendingRequest & {
@@ -215,6 +238,7 @@ const App = () => {
     env,
     bearerToken,
     headerName,
+    customHeaders,
     oauthClientId,
     oauthScope,
     config,
@@ -310,6 +334,23 @@ const App = () => {
     localStorage.setItem("lastHeaderName", headerName);
   }, [headerName]);
 
+  useEffect(() => {
+    localStorage.setItem("lastCustomHeaders", JSON.stringify(customHeaders));
+  }, [customHeaders]);
+
+  // Auto-migrate from legacy auth when custom headers are empty but legacy auth exists
+  useEffect(() => {
+    if (customHeaders.length === 0 && (bearerToken || headerName)) {
+      const migratedHeaders = migrateFromLegacyAuth(bearerToken, headerName);
+      if (migratedHeaders.length > 0) {
+        setCustomHeaders(migratedHeaders);
+        // Clear legacy auth after migration
+        setBearerToken("");
+        setHeaderName("");
+      }
+    }
+  }, [bearerToken, headerName, customHeaders, setCustomHeaders]);
+
   useEffect(() => {
     localStorage.setItem("lastOauthClientId", oauthClientId);
   }, [oauthClientId]);
@@ -814,6 +855,8 @@ const App = () => {
           setBearerToken={setBearerToken}
           headerName={headerName}
           setHeaderName={setHeaderName}
+          customHeaders={customHeaders}
+          setCustomHeaders={setCustomHeaders}
           oauthClientId={oauthClientId}
           setOauthClientId={setOauthClientId}
           oauthScope={oauthScope}
diff --git a/client/src/components/CustomHeaders.tsx b/client/src/components/CustomHeaders.tsx
new file mode 100644
index 00000000..9196480e
--- /dev/null
+++ b/client/src/components/CustomHeaders.tsx
@@ -0,0 +1,215 @@
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Switch } from "@/components/ui/switch";
+import { Plus, Trash2, Eye, EyeOff } from "lucide-react";
+import { CustomHeaders as CustomHeadersType, CustomHeader, createEmptyHeader } from "@/lib/types/customHeaders";
+
+interface CustomHeadersProps {
+  headers: CustomHeadersType;
+  onChange: (headers: CustomHeadersType) => void;
+  className?: string;
+}
+
+const CustomHeaders = ({ headers, onChange, className }: CustomHeadersProps) => {
+  const [isJsonMode, setIsJsonMode] = useState(false);
+  const [jsonValue, setJsonValue] = useState("");
+  const [jsonError, setJsonError] = useState<string | null>(null);
+  const [visibleValues, setVisibleValues] = useState<Set<number>>(new Set());
+
+  const updateHeader = (index: number, field: keyof CustomHeader, value: string | boolean) => {
+    const newHeaders = [...headers];
+    newHeaders[index] = { ...newHeaders[index], [field]: value };
+    onChange(newHeaders);
+  };
+
+  const addHeader = () => {
+    onChange([...headers, createEmptyHeader()]);
+  };
+
+  const removeHeader = (index: number) => {
+    const newHeaders = headers.filter((_, i) => i !== index);
+    onChange(newHeaders);
+  };
+
+  const toggleValueVisibility = (index: number) => {
+    const newVisible = new Set(visibleValues);
+    if (newVisible.has(index)) {
+      newVisible.delete(index);
+    } else {
+      newVisible.add(index);
+    }
+    setVisibleValues(newVisible);
+  };
+
+  const switchToJsonMode = () => {
+    const jsonObject: Record<string, string> = {};
+    headers.forEach((header) => {
+      if (header.enabled && header.name.trim() && header.value.trim()) {
+        jsonObject[header.name.trim()] = header.value.trim();
+      }
+    });
+    setJsonValue(JSON.stringify(jsonObject, null, 2));
+    setJsonError(null);
+    setIsJsonMode(true);
+  };
+
+  const switchToFormMode = () => {
+    try {
+      const parsed = JSON.parse(jsonValue);
+      if (typeof parsed !== "object" || parsed === null || Array.isArray(parsed)) {
+        setJsonError("JSON must be an object with string key-value pairs");
+        return;
+      }
+
+      const newHeaders: CustomHeadersType = Object.entries(parsed).map(([name, value]) => ({
+        name,
+        value: String(value),
+        enabled: true,
+      }));
+
+      onChange(newHeaders);
+      setJsonError(null);
+      setIsJsonMode(false);
+    } catch (error) {
+      setJsonError("Invalid JSON format");
+    }
+  };
+
+  const handleJsonChange = (value: string) => {
+    setJsonValue(value);
+    setJsonError(null);
+  };
+
+  if (isJsonMode) {
+    return (
+      <div className={`space-y-3 ${className}`}>
+        <div className="flex justify-between items-center gap-2">
+          <h4 className="text-sm font-semibold flex-shrink-0">Custom Headers (JSON)</h4>
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            onClick={switchToFormMode}
+            className="flex-shrink-0"
+          >
+            Switch to Form
+          </Button>
+        </div>
+        <div className="space-y-2">
+          <Textarea
+            value={jsonValue}
+            onChange={(e) => handleJsonChange(e.target.value)}
+            placeholder='{\n  "Authorization": "Bearer token123",\n  "X-Tenant-ID": "acme-inc",\n  "X-Environment": "staging"\n}'
+            className="font-mono text-sm min-h-[100px] resize-none"
+          />
+          {jsonError && (
+            <p className="text-sm text-red-600">{jsonError}</p>
+          )}
+          <p className="text-xs text-muted-foreground">
+            Enter headers as a JSON object with string key-value pairs.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={`space-y-3 ${className}`}>
+      <div className="flex justify-between items-center gap-2">
+        <h4 className="text-sm font-semibold flex-shrink-0">Custom Headers</h4>
+        <div className="flex gap-1 flex-shrink-0">
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            onClick={switchToJsonMode}
+            className="text-xs px-2"
+          >
+            JSON
+          </Button>
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            onClick={addHeader}
+            className="text-xs px-2"
+          >
+            <Plus className="w-3 h-3 mr-1" />
+            Add
+          </Button>
+        </div>
+      </div>
+
+      {headers.length === 0 ? (
+        <div className="text-center py-4 text-muted-foreground">
+          <p className="text-sm">No custom headers configured</p>
+          <p className="text-xs mt-1">Click "Add" to get started</p>
+        </div>
+      ) : (
+        <div className="space-y-2 max-h-[300px] overflow-y-auto">
+          {headers.map((header, index) => (
+            <div
+              key={index}
+              className="flex items-start gap-2 p-2 border rounded-md"
+            >
+              <Switch
+                checked={header.enabled}
+                onCheckedChange={(enabled) => updateHeader(index, "enabled", enabled)}
+                className="shrink-0 mt-2"
+              />
+              <div className="flex-1 min-w-0 space-y-2">
+                <Input
+                  placeholder="Header Name"
+                  value={header.name}
+                  onChange={(e) => updateHeader(index, "name", e.target.value)}
+                  className="font-mono text-xs"
+                />
+                <div className="relative">
+                  <Input
+                    placeholder="Header Value"
+                    value={header.value}
+                    onChange={(e) => updateHeader(index, "value", e.target.value)}
+                    type={visibleValues.has(index) ? "text" : "password"}
+                    className="font-mono text-xs pr-8"
+                  />
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => toggleValueVisibility(index)}
+                    className="absolute right-1 top-1/2 -translate-y-1/2 h-6 w-6 p-0"
+                  >
+                    {visibleValues.has(index) ? (
+                      <EyeOff className="w-3 h-3" />
+                    ) : (
+                      <Eye className="w-3 h-3" />
+                    )}
+                  </Button>
+                </div>
+              </div>
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                onClick={() => removeHeader(index)}
+                className="shrink-0 text-red-600 hover:text-red-700 hover:bg-red-50 h-6 w-6 p-0 mt-2"
+              >
+                <Trash2 className="w-3 h-3" />
+              </Button>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {headers.length > 0 && (
+        <p className="text-xs text-muted-foreground">
+          Use the toggle to enable/disable headers. Only enabled headers with both name and value will be sent.
+        </p>
+      )}
+    </div>
+  );
+};
+
+export default CustomHeaders;
diff --git a/client/src/components/Sidebar.tsx b/client/src/components/Sidebar.tsx
index a44c6e29..e7b101ec 100644
--- a/client/src/components/Sidebar.tsx
+++ b/client/src/components/Sidebar.tsx
@@ -37,6 +37,8 @@ import {
   TooltipTrigger,
   TooltipContent,
 } from "@/components/ui/tooltip";
+import CustomHeaders from "./CustomHeaders";
+import { CustomHeaders as CustomHeadersType } from "@/lib/types/customHeaders";
 import { useToast } from "../lib/hooks/useToast";
 
 interface SidebarProps {
@@ -51,10 +53,14 @@ interface SidebarProps {
   setSseUrl: (url: string) => void;
   env: Record<string, string>;
   setEnv: (env: Record<string, string>) => void;
+  // Legacy auth props (for backward compatibility)
   bearerToken: string;
   setBearerToken: (token: string) => void;
   headerName?: string;
   setHeaderName?: (name: string) => void;
+  // New custom headers support
+  customHeaders: CustomHeadersType;
+  setCustomHeaders: (headers: CustomHeadersType) => void;
   oauthClientId: string;
   setOauthClientId: (id: string) => void;
   oauthScope: string;
@@ -80,10 +86,12 @@ const Sidebar = ({
   setSseUrl,
   env,
   setEnv,
-  bearerToken,
-  setBearerToken,
-  headerName,
-  setHeaderName,
+  bearerToken: _bearerToken,
+  setBearerToken: _setBearerToken,
+  headerName: _headerName,
+  setHeaderName: _setHeaderName,
+  customHeaders,
+  setCustomHeaders,
   oauthClientId,
   setOauthClientId,
   oauthScope,
@@ -497,38 +505,12 @@ const Sidebar = ({
             </Button>
             {showAuthConfig && (
               <>
-                {/* Bearer Token Section */}
-                <div className="space-y-2 p-3 rounded border">
-                  <h4 className="text-sm font-semibold flex items-center">
-                    API Token Authentication
-                  </h4>
-                  <div className="space-y-2">
-                    <label className="text-sm font-medium">Header Name</label>
-                    <Input
-                      placeholder="Authorization"
-                      onChange={(e) =>
-                        setHeaderName && setHeaderName(e.target.value)
-                      }
-                      data-testid="header-input"
-                      className="font-mono"
-                      value={headerName}
-                    />
-                    <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)}
-                      data-testid="bearer-token-input"
-                      className="font-mono"
-                      type="password"
-                    />
-                  </div>
+                {/* Custom Headers Section */}
+                <div className="p-3 rounded border overflow-hidden">
+                  <CustomHeaders
+                    headers={customHeaders}
+                    onChange={setCustomHeaders}
+                  />
                 </div>
                 {transportType !== "stdio" && (
                   // OAuth Configuration
diff --git a/client/src/components/__tests__/Sidebar.test.tsx b/client/src/components/__tests__/Sidebar.test.tsx
index 8f693717..1cb221c5 100644
--- a/client/src/components/__tests__/Sidebar.test.tsx
+++ b/client/src/components/__tests__/Sidebar.test.tsx
@@ -50,6 +50,10 @@ describe("Sidebar", () => {
     setEnv: jest.fn(),
     bearerToken: "",
     setBearerToken: jest.fn(),
+    headerName: "",
+    setHeaderName: jest.fn(),
+    customHeaders: [],
+    setCustomHeaders: jest.fn(),
     onConnect: jest.fn(),
     onDisconnect: jest.fn(),
     stdErrNotifications: [],
diff --git a/client/src/components/ui/switch.tsx b/client/src/components/ui/switch.tsx
new file mode 100644
index 00000000..f15014bd
--- /dev/null
+++ b/client/src/components/ui/switch.tsx
@@ -0,0 +1,27 @@
+import * as React from "react";
+import * as SwitchPrimitives from "@radix-ui/react-switch";
+
+import { cn } from "@/lib/utils";
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      className
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
+      )}
+    />
+  </SwitchPrimitives.Root>
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
+
+export { Switch };
diff --git a/client/src/lib/hooks/__tests__/useConnection.test.tsx b/client/src/lib/hooks/__tests__/useConnection.test.tsx
index 624583dc..c2db0cde 100644
--- a/client/src/lib/hooks/__tests__/useConnection.test.tsx
+++ b/client/src/lib/hooks/__tests__/useConnection.test.tsx
@@ -13,6 +13,7 @@ import {
 } from "@modelcontextprotocol/sdk/types.js";
 import { auth } from "@modelcontextprotocol/sdk/client/auth.js";
 import { discoverScopes } from "../../auth";
+import { CustomHeaders } from "../../types/customHeaders";
 
 // Mock fetch
 global.fetch = jest.fn().mockResolvedValue({
@@ -740,6 +741,135 @@ describe("useConnection", () => {
     });
   });
 
+  describe("Custom Headers", () => {
+    beforeEach(() => {
+      jest.clearAllMocks();
+      // Reset the mock transport objects
+      mockSSETransport.url = undefined;
+      mockSSETransport.options = undefined;
+      mockStreamableHTTPTransport.url = undefined;
+      mockStreamableHTTPTransport.options = undefined;
+    });
+
+    test("sends multiple custom headers correctly", async () => {
+      const customHeaders: CustomHeaders = [
+        { name: "Authorization", value: "Bearer token123", enabled: true },
+        { name: "X-Tenant-ID", value: "acme-inc", enabled: true },
+        { name: "X-Environment", value: "staging", enabled: true },
+      ];
+
+      const propsWithCustomHeaders = {
+        ...defaultProps,
+        customHeaders,
+      };
+
+      const { result } = renderHook(() =>
+        useConnection(propsWithCustomHeaders),
+      );
+
+      await act(async () => {
+        await result.current.connect();
+      });
+
+      // Check that the transport was created with the correct headers
+      expect(mockSSETransport.options).toBeDefined();
+      expect(mockSSETransport.options?.requestInit?.headers).toBeDefined();
+
+      const headers = mockSSETransport.options?.requestInit?.headers;
+      expect(headers).toHaveProperty("Authorization", "Bearer token123");
+      expect(headers).toHaveProperty("X-Tenant-ID", "acme-inc");
+      expect(headers).toHaveProperty("X-Environment", "staging");
+      expect(headers).toHaveProperty("x-custom-auth-headers", JSON.stringify(["X-Tenant-ID", "X-Environment"]));
+    });
+
+    test("ignores disabled custom headers", async () => {
+      const customHeaders: CustomHeaders = [
+        { name: "Authorization", value: "Bearer token123", enabled: true },
+        { name: "X-Disabled", value: "should-not-appear", enabled: false },
+        { name: "X-Enabled", value: "should-appear", enabled: true },
+      ];
+
+      const propsWithCustomHeaders = {
+        ...defaultProps,
+        customHeaders,
+      };
+
+      const { result } = renderHook(() =>
+        useConnection(propsWithCustomHeaders),
+      );
+
+      await act(async () => {
+        await result.current.connect();
+      });
+
+      const headers = mockSSETransport.options?.requestInit?.headers;
+      expect(headers).toHaveProperty("Authorization", "Bearer token123");
+      expect(headers).toHaveProperty("X-Enabled", "should-appear");
+      expect(headers).not.toHaveProperty("X-Disabled");
+    });
+
+    test("migrates from legacy bearerToken and headerName", async () => {
+      const propsWithLegacyAuth = {
+        ...defaultProps,
+        bearerToken: "legacy-token",
+        headerName: "X-Custom-Auth",
+      };
+
+      const { result } = renderHook(() =>
+        useConnection(propsWithLegacyAuth),
+      );
+
+      await act(async () => {
+        await result.current.connect();
+      });
+
+      const headers = mockSSETransport.options?.requestInit?.headers;
+      expect(headers).toHaveProperty("X-Custom-Auth", "legacy-token");
+      expect(headers).toHaveProperty("x-custom-auth-headers", JSON.stringify(["X-Custom-Auth"]));
+    });
+
+    test("uses OAuth token when no custom headers or legacy auth provided", async () => {
+      const propsWithoutAuth = {
+        ...defaultProps,
+      };
+
+      const { result } = renderHook(() =>
+        useConnection(propsWithoutAuth),
+      );
+
+      await act(async () => {
+        await result.current.connect();
+      });
+
+      const headers = mockSSETransport.options?.requestInit?.headers;
+      expect(headers).toHaveProperty("Authorization", "Bearer mock-token");
+    });
+
+    test("prioritizes custom headers over legacy auth", async () => {
+      const customHeaders: CustomHeaders = [
+        { name: "Authorization", value: "Bearer custom-token", enabled: true },
+      ];
+
+      const propsWithBothAuth = {
+        ...defaultProps,
+        customHeaders,
+        bearerToken: "legacy-token",
+        headerName: "Authorization",
+      };
+
+      const { result } = renderHook(() =>
+        useConnection(propsWithBothAuth),
+      );
+
+      await act(async () => {
+        await result.current.connect();
+      });
+
+      const headers = mockSSETransport.options?.requestInit?.headers;
+      expect(headers).toHaveProperty("Authorization", "Bearer custom-token");
+    });
+  });
+
   describe("OAuth Error Handling with Scope Discovery", () => {
     beforeEach(() => {
       jest.clearAllMocks();
diff --git a/client/src/lib/hooks/useConnection.ts b/client/src/lib/hooks/useConnection.ts
index bfb72941..04778157 100644
--- a/client/src/lib/hooks/useConnection.ts
+++ b/client/src/lib/hooks/useConnection.ts
@@ -57,6 +57,7 @@ import {
 import { getMCPServerRequestTimeout } from "@/utils/configUtils";
 import { InspectorConfig } from "../configurationTypes";
 import { Transport } from "@modelcontextprotocol/sdk/shared/transport.js";
+import { CustomHeaders, migrateFromLegacyAuth } from "../types/customHeaders";
 
 interface UseConnectionOptions {
   transportType: "stdio" | "sse" | "streamable-http";
@@ -64,8 +65,11 @@ interface UseConnectionOptions {
   args: string;
   sseUrl: string;
   env: Record<string, string>;
+  // Legacy auth support (for backward compatibility)
   bearerToken?: string;
   headerName?: string;
+  // New custom headers support
+  customHeaders?: CustomHeaders;
   oauthClientId?: string;
   oauthScope?: string;
   config: InspectorConfig;
@@ -88,6 +92,7 @@ export function useConnection({
   env,
   bearerToken,
   headerName,
+  customHeaders,
   oauthClientId,
   oauthScope,
   config,
@@ -379,21 +384,52 @@ export function useConnection({
       // Create an auth provider with the current server URL
       const serverAuthProvider = new InspectorOAuthClientProvider(sseUrl);
 
-      // Use manually provided bearer token if available, otherwise use OAuth tokens
-      const token =
-        bearerToken || (await serverAuthProvider.tokens())?.access_token;
-      if (token) {
-        const authHeaderName = headerName || "Authorization";
+      // Handle custom headers (new approach) or legacy auth (backward compatibility)
+      let finalHeaders: CustomHeaders = [];
 
-        // Add custom header name as a special request header to let the server know which header to pass through
-        if (authHeaderName.toLowerCase() !== "authorization") {
-          headers[authHeaderName] = token;
-          headers["x-custom-auth-header"] = authHeaderName;
-        } else {
-          headers[authHeaderName] = `Bearer ${token}`;
+      if (customHeaders && customHeaders.length > 0) {
+        // Use new custom headers approach
+        finalHeaders = customHeaders;
+      } else if (bearerToken || headerName) {
+        // Migrate from legacy auth approach
+        finalHeaders = migrateFromLegacyAuth(bearerToken, headerName);
+      }
+
+      // Add OAuth token if available and no custom headers are set
+      if (finalHeaders.length === 0) {
+        const oauthToken = (await serverAuthProvider.tokens())?.access_token;
+        if (oauthToken) {
+          finalHeaders = [
+            {
+              name: "Authorization",
+              value: `Bearer ${oauthToken}`,
+              enabled: true,
+            },
+          ];
         }
       }
 
+      // Process all enabled custom headers
+      const customHeaderNames: string[] = [];
+      finalHeaders.forEach((header) => {
+        if (header.enabled && header.name.trim() && header.value.trim()) {
+          const headerName = header.name.trim();
+          const headerValue = header.value.trim();
+
+          headers[headerName] = headerValue;
+
+          // Track custom header names for server processing
+          if (headerName.toLowerCase() !== "authorization") {
+            customHeaderNames.push(headerName);
+          }
+        }
+      });
+
+      // Add custom header names as a special request header for server processing
+      if (customHeaderNames.length > 0) {
+        headers["x-custom-auth-headers"] = JSON.stringify(customHeaderNames);
+      }
+
       // Add proxy authentication
       const { token: proxyAuthToken, header: proxyAuthTokenHeader } =
         getMCPProxyAuthToken(config);
diff --git a/client/src/lib/types/customHeaders.ts b/client/src/lib/types/customHeaders.ts
new file mode 100644
index 00000000..0c82d38f
--- /dev/null
+++ b/client/src/lib/types/customHeaders.ts
@@ -0,0 +1,59 @@
+export interface CustomHeader {
+  name: string;
+  value: string;
+  enabled: boolean;
+}
+
+export type CustomHeaders = CustomHeader[];
+
+export const createEmptyHeader = (): CustomHeader => ({
+  name: "",
+  value: "",
+  enabled: true,
+});
+
+export const createHeaderFromBearerToken = (
+  bearerToken: string,
+  headerName?: string,
+): CustomHeader => ({
+  name: headerName || "Authorization",
+  value: headerName?.toLowerCase() === "authorization" || !headerName 
+    ? `Bearer ${bearerToken}` 
+    : bearerToken,
+  enabled: true,
+});
+
+export const getEnabledHeaders = (headers: CustomHeaders): CustomHeaders => {
+  return headers.filter(header => header.enabled && header.name.trim() && header.value.trim());
+};
+
+export const headersToRecord = (headers: CustomHeaders): Record<string, string> => {
+  const enabledHeaders = getEnabledHeaders(headers);
+  const record: Record<string, string> = {};
+  
+  enabledHeaders.forEach(header => {
+    record[header.name.trim()] = header.value.trim();
+  });
+  
+  return record;
+};
+
+export const recordToHeaders = (record: Record<string, string>): CustomHeaders => {
+  return Object.entries(record).map(([name, value]) => ({
+    name,
+    value,
+    enabled: true,
+  }));
+};
+
+// Migration helper for backward compatibility
+export const migrateFromLegacyAuth = (
+  bearerToken?: string,
+  headerName?: string,
+): CustomHeaders => {
+  if (!bearerToken) {
+    return [];
+  }
+  
+  return [createHeaderFromBearerToken(bearerToken, headerName)];
+};
diff --git a/package-lock.json b/package-lock.json
index 91385dd4..f5452d65 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -80,6 +80,7 @@
         "@radix-ui/react-popover": "^1.1.3",
         "@radix-ui/react-select": "^2.1.2",
         "@radix-ui/react-slot": "^1.1.0",
+        "@radix-ui/react-switch": "^1.2.6",
         "@radix-ui/react-tabs": "^1.1.1",
         "@radix-ui/react-toast": "^1.2.6",
         "@radix-ui/react-tooltip": "^1.1.8",
@@ -119,6 +120,7 @@
         "globals": "^15.9.0",
         "jest": "^29.7.0",
         "jest-environment-jsdom": "^29.7.0",
+        "jest-fixed-jsdom": "^0.0.9",
         "postcss": "^8.5.6",
         "tailwindcss": "^3.4.13",
         "tailwindcss-animate": "^1.0.7",
@@ -2619,6 +2621,41 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-switch": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-switch/-/react-switch-1.2.6.tgz",
+      "integrity": "sha512-bByzr1+ep1zk4VubeEVViV592vu2lHE2BZY5OnzehZqOOgogN80+mNtCqPkhn2gklJqOpxWgPoYTSnhBCqpOXQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-previous": "1.1.1",
+        "@radix-ui/react-use-size": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-switch/node_modules/@radix-ui/primitive": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.3.tgz",
+      "integrity": "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==",
+      "license": "MIT"
+    },
     "node_modules/@radix-ui/react-tabs": {
       "version": "1.1.12",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.1.12.tgz",
@@ -11752,6 +11789,8 @@
         "@modelcontextprotocol/sdk": "^1.17.5",
         "cors": "^2.8.5",
         "express": "^5.1.0",
+        "shell-quote": "^1.8.3",
+        "spawn-rx": "^5.1.2",
         "ws": "^8.18.0",
         "zod": "^3.25.76"
       },
@@ -11761,6 +11800,7 @@
       "devDependencies": {
         "@types/cors": "^2.8.19",
         "@types/express": "^4.17.23",
+        "@types/shell-quote": "^1.7.5",
         "@types/ws": "^8.5.12",
         "tsx": "^4.19.0",
         "typescript": "^5.6.2"
diff --git a/server/package.json b/server/package.json
index 39cc08f1..52c8c25a 100644
--- a/server/package.json
+++ b/server/package.json
@@ -22,6 +22,7 @@
   "devDependencies": {
     "@types/cors": "^2.8.19",
     "@types/express": "^4.17.23",
+    "@types/shell-quote": "^1.7.5",
     "@types/ws": "^8.5.12",
     "tsx": "^4.19.0",
     "typescript": "^5.6.2"
@@ -30,6 +31,8 @@
     "@modelcontextprotocol/sdk": "^1.17.5",
     "cors": "^2.8.5",
     "express": "^5.1.0",
+    "shell-quote": "^1.8.3",
+    "spawn-rx": "^5.1.2",
     "ws": "^8.18.0",
     "zod": "^3.25.76"
   }
diff --git a/server/src/index.ts b/server/src/index.ts
index 3f739f39..27515c19 100644
--- a/server/src/index.ts
+++ b/server/src/index.ts
@@ -90,6 +90,23 @@ const getHttpHeaders = (req: express.Request): Record<string, string> => {
     }
   }
 
+  // Handle multiple custom headers (new approach)
+  if (req.headers["x-custom-auth-headers"] !== undefined) {
+    try {
+      const customHeaderNames = JSON.parse(req.headers["x-custom-auth-headers"] as string) as string[];
+      if (Array.isArray(customHeaderNames)) {
+        customHeaderNames.forEach((headerName) => {
+          const lowerCaseHeaderName = headerName.toLowerCase();
+          if (req.headers[lowerCaseHeaderName] !== undefined) {
+            const value = req.headers[lowerCaseHeaderName];
+            headers[headerName] = Array.isArray(value) ? value[value.length - 1] : value;
+          }
+        });
+      }
+    } catch (error) {
+      console.warn("Failed to parse x-custom-auth-headers:", error);
+    }
+  }
   return headers;
 };
 

From cb8c45456b5a81f9aa582ef05e2d760a861ec46b Mon Sep 17 00:00:00 2001
From: "jeetul.samaiya" <jeetul.samaiya@rapidops.com>
Date: Mon, 1 Sep 2025 12:15:37 +0530
Subject: [PATCH 07/13] refactor: improve code formatting and readability
 across multiple files

---
 client/src/App.tsx                            |  5 +-
 client/src/components/CustomHeaders.tsx       | 55 +++++++++++++------
 client/src/components/ui/switch.tsx           |  4 +-
 .../hooks/__tests__/useConnection.test.tsx    | 22 ++++----
 client/src/lib/types/customHeaders.ts         | 27 +++++----
 server/src/index.ts                           |  8 ++-
 6 files changed, 79 insertions(+), 42 deletions(-)

diff --git a/client/src/App.tsx b/client/src/App.tsx
index ff44759e..17c50435 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -74,7 +74,10 @@ import ElicitationTab, {
   PendingElicitationRequest,
   ElicitationResponse,
 } from "./components/ElicitationTab";
-import { CustomHeaders, migrateFromLegacyAuth } from "./lib/types/customHeaders";
+import {
+  CustomHeaders,
+  migrateFromLegacyAuth,
+} from "./lib/types/customHeaders";
 
 const CONFIG_LOCAL_STORAGE_KEY = "inspectorConfig_v1";
 
diff --git a/client/src/components/CustomHeaders.tsx b/client/src/components/CustomHeaders.tsx
index 9196480e..35b12212 100644
--- a/client/src/components/CustomHeaders.tsx
+++ b/client/src/components/CustomHeaders.tsx
@@ -4,7 +4,11 @@ import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 import { Switch } from "@/components/ui/switch";
 import { Plus, Trash2, Eye, EyeOff } from "lucide-react";
-import { CustomHeaders as CustomHeadersType, CustomHeader, createEmptyHeader } from "@/lib/types/customHeaders";
+import {
+  CustomHeaders as CustomHeadersType,
+  CustomHeader,
+  createEmptyHeader,
+} from "@/lib/types/customHeaders";
 
 interface CustomHeadersProps {
   headers: CustomHeadersType;
@@ -12,13 +16,21 @@ interface CustomHeadersProps {
   className?: string;
 }
 
-const CustomHeaders = ({ headers, onChange, className }: CustomHeadersProps) => {
+const CustomHeaders = ({
+  headers,
+  onChange,
+  className,
+}: CustomHeadersProps) => {
   const [isJsonMode, setIsJsonMode] = useState(false);
   const [jsonValue, setJsonValue] = useState("");
   const [jsonError, setJsonError] = useState<string | null>(null);
   const [visibleValues, setVisibleValues] = useState<Set<number>>(new Set());
 
-  const updateHeader = (index: number, field: keyof CustomHeader, value: string | boolean) => {
+  const updateHeader = (
+    index: number,
+    field: keyof CustomHeader,
+    value: string | boolean,
+  ) => {
     const newHeaders = [...headers];
     newHeaders[index] = { ...newHeaders[index], [field]: value };
     onChange(newHeaders);
@@ -58,16 +70,22 @@ const CustomHeaders = ({ headers, onChange, className }: CustomHeadersProps) =>
   const switchToFormMode = () => {
     try {
       const parsed = JSON.parse(jsonValue);
-      if (typeof parsed !== "object" || parsed === null || Array.isArray(parsed)) {
+      if (
+        typeof parsed !== "object" ||
+        parsed === null ||
+        Array.isArray(parsed)
+      ) {
         setJsonError("JSON must be an object with string key-value pairs");
         return;
       }
 
-      const newHeaders: CustomHeadersType = Object.entries(parsed).map(([name, value]) => ({
-        name,
-        value: String(value),
-        enabled: true,
-      }));
+      const newHeaders: CustomHeadersType = Object.entries(parsed).map(
+        ([name, value]) => ({
+          name,
+          value: String(value),
+          enabled: true,
+        }),
+      );
 
       onChange(newHeaders);
       setJsonError(null);
@@ -86,7 +104,9 @@ const CustomHeaders = ({ headers, onChange, className }: CustomHeadersProps) =>
     return (
       <div className={`space-y-3 ${className}`}>
         <div className="flex justify-between items-center gap-2">
-          <h4 className="text-sm font-semibold flex-shrink-0">Custom Headers (JSON)</h4>
+          <h4 className="text-sm font-semibold flex-shrink-0">
+            Custom Headers (JSON)
+          </h4>
           <Button
             type="button"
             variant="outline"
@@ -104,9 +124,7 @@ const CustomHeaders = ({ headers, onChange, className }: CustomHeadersProps) =>
             placeholder='{\n  "Authorization": "Bearer token123",\n  "X-Tenant-ID": "acme-inc",\n  "X-Environment": "staging"\n}'
             className="font-mono text-sm min-h-[100px] resize-none"
           />
-          {jsonError && (
-            <p className="text-sm text-red-600">{jsonError}</p>
-          )}
+          {jsonError && <p className="text-sm text-red-600">{jsonError}</p>}
           <p className="text-xs text-muted-foreground">
             Enter headers as a JSON object with string key-value pairs.
           </p>
@@ -156,7 +174,9 @@ const CustomHeaders = ({ headers, onChange, className }: CustomHeadersProps) =>
             >
               <Switch
                 checked={header.enabled}
-                onCheckedChange={(enabled) => updateHeader(index, "enabled", enabled)}
+                onCheckedChange={(enabled) =>
+                  updateHeader(index, "enabled", enabled)
+                }
                 className="shrink-0 mt-2"
               />
               <div className="flex-1 min-w-0 space-y-2">
@@ -170,7 +190,9 @@ const CustomHeaders = ({ headers, onChange, className }: CustomHeadersProps) =>
                   <Input
                     placeholder="Header Value"
                     value={header.value}
-                    onChange={(e) => updateHeader(index, "value", e.target.value)}
+                    onChange={(e) =>
+                      updateHeader(index, "value", e.target.value)
+                    }
                     type={visibleValues.has(index) ? "text" : "password"}
                     className="font-mono text-xs pr-8"
                   />
@@ -205,7 +227,8 @@ const CustomHeaders = ({ headers, onChange, className }: CustomHeadersProps) =>
 
       {headers.length > 0 && (
         <p className="text-xs text-muted-foreground">
-          Use the toggle to enable/disable headers. Only enabled headers with both name and value will be sent.
+          Use the toggle to enable/disable headers. Only enabled headers with
+          both name and value will be sent.
         </p>
       )}
     </div>
diff --git a/client/src/components/ui/switch.tsx b/client/src/components/ui/switch.tsx
index f15014bd..6338184e 100644
--- a/client/src/components/ui/switch.tsx
+++ b/client/src/components/ui/switch.tsx
@@ -10,14 +10,14 @@ const Switch = React.forwardRef<
   <SwitchPrimitives.Root
     className={cn(
       "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
-      className
+      className,
     )}
     {...props}
     ref={ref}
   >
     <SwitchPrimitives.Thumb
       className={cn(
-        "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
+        "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0",
       )}
     />
   </SwitchPrimitives.Root>
diff --git a/client/src/lib/hooks/__tests__/useConnection.test.tsx b/client/src/lib/hooks/__tests__/useConnection.test.tsx
index c2db0cde..8047bed8 100644
--- a/client/src/lib/hooks/__tests__/useConnection.test.tsx
+++ b/client/src/lib/hooks/__tests__/useConnection.test.tsx
@@ -779,7 +779,10 @@ describe("useConnection", () => {
       expect(headers).toHaveProperty("Authorization", "Bearer token123");
       expect(headers).toHaveProperty("X-Tenant-ID", "acme-inc");
       expect(headers).toHaveProperty("X-Environment", "staging");
-      expect(headers).toHaveProperty("x-custom-auth-headers", JSON.stringify(["X-Tenant-ID", "X-Environment"]));
+      expect(headers).toHaveProperty(
+        "x-custom-auth-headers",
+        JSON.stringify(["X-Tenant-ID", "X-Environment"]),
+      );
     });
 
     test("ignores disabled custom headers", async () => {
@@ -815,9 +818,7 @@ describe("useConnection", () => {
         headerName: "X-Custom-Auth",
       };
 
-      const { result } = renderHook(() =>
-        useConnection(propsWithLegacyAuth),
-      );
+      const { result } = renderHook(() => useConnection(propsWithLegacyAuth));
 
       await act(async () => {
         await result.current.connect();
@@ -825,7 +826,10 @@ describe("useConnection", () => {
 
       const headers = mockSSETransport.options?.requestInit?.headers;
       expect(headers).toHaveProperty("X-Custom-Auth", "legacy-token");
-      expect(headers).toHaveProperty("x-custom-auth-headers", JSON.stringify(["X-Custom-Auth"]));
+      expect(headers).toHaveProperty(
+        "x-custom-auth-headers",
+        JSON.stringify(["X-Custom-Auth"]),
+      );
     });
 
     test("uses OAuth token when no custom headers or legacy auth provided", async () => {
@@ -833,9 +837,7 @@ describe("useConnection", () => {
         ...defaultProps,
       };
 
-      const { result } = renderHook(() =>
-        useConnection(propsWithoutAuth),
-      );
+      const { result } = renderHook(() => useConnection(propsWithoutAuth));
 
       await act(async () => {
         await result.current.connect();
@@ -857,9 +859,7 @@ describe("useConnection", () => {
         headerName: "Authorization",
       };
 
-      const { result } = renderHook(() =>
-        useConnection(propsWithBothAuth),
-      );
+      const { result } = renderHook(() => useConnection(propsWithBothAuth));
 
       await act(async () => {
         await result.current.connect();
diff --git a/client/src/lib/types/customHeaders.ts b/client/src/lib/types/customHeaders.ts
index 0c82d38f..3443727a 100644
--- a/client/src/lib/types/customHeaders.ts
+++ b/client/src/lib/types/customHeaders.ts
@@ -17,28 +17,35 @@ export const createHeaderFromBearerToken = (
   headerName?: string,
 ): CustomHeader => ({
   name: headerName || "Authorization",
-  value: headerName?.toLowerCase() === "authorization" || !headerName 
-    ? `Bearer ${bearerToken}` 
-    : bearerToken,
+  value:
+    headerName?.toLowerCase() === "authorization" || !headerName
+      ? `Bearer ${bearerToken}`
+      : bearerToken,
   enabled: true,
 });
 
 export const getEnabledHeaders = (headers: CustomHeaders): CustomHeaders => {
-  return headers.filter(header => header.enabled && header.name.trim() && header.value.trim());
+  return headers.filter(
+    (header) => header.enabled && header.name.trim() && header.value.trim(),
+  );
 };
 
-export const headersToRecord = (headers: CustomHeaders): Record<string, string> => {
+export const headersToRecord = (
+  headers: CustomHeaders,
+): Record<string, string> => {
   const enabledHeaders = getEnabledHeaders(headers);
   const record: Record<string, string> = {};
-  
-  enabledHeaders.forEach(header => {
+
+  enabledHeaders.forEach((header) => {
     record[header.name.trim()] = header.value.trim();
   });
-  
+
   return record;
 };
 
-export const recordToHeaders = (record: Record<string, string>): CustomHeaders => {
+export const recordToHeaders = (
+  record: Record<string, string>,
+): CustomHeaders => {
   return Object.entries(record).map(([name, value]) => ({
     name,
     value,
@@ -54,6 +61,6 @@ export const migrateFromLegacyAuth = (
   if (!bearerToken) {
     return [];
   }
-  
+
   return [createHeaderFromBearerToken(bearerToken, headerName)];
 };
diff --git a/server/src/index.ts b/server/src/index.ts
index 27515c19..af3ea928 100644
--- a/server/src/index.ts
+++ b/server/src/index.ts
@@ -93,13 +93,17 @@ const getHttpHeaders = (req: express.Request): Record<string, string> => {
   // Handle multiple custom headers (new approach)
   if (req.headers["x-custom-auth-headers"] !== undefined) {
     try {
-      const customHeaderNames = JSON.parse(req.headers["x-custom-auth-headers"] as string) as string[];
+      const customHeaderNames = JSON.parse(
+        req.headers["x-custom-auth-headers"] as string,
+      ) as string[];
       if (Array.isArray(customHeaderNames)) {
         customHeaderNames.forEach((headerName) => {
           const lowerCaseHeaderName = headerName.toLowerCase();
           if (req.headers[lowerCaseHeaderName] !== undefined) {
             const value = req.headers[lowerCaseHeaderName];
-            headers[headerName] = Array.isArray(value) ? value[value.length - 1] : value;
+            headers[headerName] = Array.isArray(value)
+              ? value[value.length - 1]
+              : value;
           }
         });
       }

From 6f727b6662594651b57d1d633377485a750781b5 Mon Sep 17 00:00:00 2001
From: "jeetul.samaiya" <jeetul.samaiya@rapidops.com>
Date: Sun, 7 Sep 2025 14:22:14 +0530
Subject: [PATCH 08/13] fix: update error handling in JSON parsing and add
 ESLint rule for unused variables

---
 client/eslint.config.js                 | 4 ++++
 client/src/components/CustomHeaders.tsx | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/client/eslint.config.js b/client/eslint.config.js
index 79a552ea..c689c75d 100644
--- a/client/eslint.config.js
+++ b/client/eslint.config.js
@@ -23,6 +23,10 @@ export default tseslint.config(
         "warn",
         { allowConstantExport: true },
       ],
+      "@typescript-eslint/no-unused-vars": [
+        "error",
+        { argsIgnorePattern: "^_" },
+      ],
     },
   },
 );
diff --git a/client/src/components/CustomHeaders.tsx b/client/src/components/CustomHeaders.tsx
index 35b12212..67aee18d 100644
--- a/client/src/components/CustomHeaders.tsx
+++ b/client/src/components/CustomHeaders.tsx
@@ -90,7 +90,7 @@ const CustomHeaders = ({
       onChange(newHeaders);
       setJsonError(null);
       setIsJsonMode(false);
-    } catch (error) {
+    } catch {
       setJsonError("Invalid JSON format");
     }
   };

From fde55efc2f000f76d4b2f244482a4e19ce0104ea Mon Sep 17 00:00:00 2001
From: "jeetul.samaiya" <jeetul.samaiya@rapidops.com>
Date: Wed, 10 Sep 2025 18:50:15 +0530
Subject: [PATCH 09/13] fix: standardize formatting in bug report issue
 template

---
 .github/ISSUE_TEMPLATE/bug_report.md | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
index 28e0bbd5..0db5467a 100644
--- a/.github/ISSUE_TEMPLATE/bug_report.md
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -1,13 +1,13 @@
 ---
 name: Bug report
 about: Create a report to help us improve
-title: ''
-labels: ''
-assignees: ''
-
+title: ""
+labels: ""
+assignees: ""
 ---
 
 **Inspector Version**
+
 - [e.g. 0.16.5)
 
 **Describe the bug**
@@ -15,6 +15,7 @@ A clear and concise description of what the bug is.
 
 **To Reproduce**
 Steps to reproduce the behavior:
+
 1. Go to '...'
 2. Click on '....'
 3. Scroll down to '....'
@@ -27,8 +28,9 @@ A clear and concise description of what you expected to happen.
 If applicable, add screenshots to help explain your problem.
 
 **Environment (please complete the following information):**
- - OS: [e.g. iOS]
- - Browser [e.g. chrome, safari]
+
+- OS: [e.g. iOS]
+- Browser [e.g. chrome, safari]
 
 **Additional context**
 Add any other context about the problem here.

From 90ab419d124e1a880d8150fbcf05d9b9d15f764e Mon Sep 17 00:00:00 2001
From: "jeetul.samaiya" <jeetul.samaiya@rapidops.com>
Date: Wed, 10 Sep 2025 21:01:24 +0530
Subject: [PATCH 10/13] fix: enhance error handling for custom headers and
 improve test coverage for header management

---
 client/src/App.tsx                            |   6 +-
 client/src/components/CustomHeaders.tsx       |   3 +
 .../src/components/__tests__/Sidebar.test.tsx | 195 ++++++++++++++----
 3 files changed, 163 insertions(+), 41 deletions(-)

diff --git a/client/src/App.tsx b/client/src/App.tsx
index 17c50435..1454811a 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -137,7 +137,11 @@ const App = () => {
     if (savedHeaders) {
       try {
         return JSON.parse(savedHeaders);
-      } catch {
+      } catch (error) {
+        console.warn(
+          `Failed to parse custom headers: "${savedHeaders}", will try legacy migration`,
+          error,
+        );
         // Fall back to migration if JSON parsing fails
       }
     }
diff --git a/client/src/components/CustomHeaders.tsx b/client/src/components/CustomHeaders.tsx
index 67aee18d..463f7333 100644
--- a/client/src/components/CustomHeaders.tsx
+++ b/client/src/components/CustomHeaders.tsx
@@ -153,6 +153,7 @@ const CustomHeaders = ({
             size="sm"
             onClick={addHeader}
             className="text-xs px-2"
+            data-testid="add-header-button"
           >
             <Plus className="w-3 h-3 mr-1" />
             Add
@@ -185,6 +186,7 @@ const CustomHeaders = ({
                   value={header.name}
                   onChange={(e) => updateHeader(index, "name", e.target.value)}
                   className="font-mono text-xs"
+                  data-testid={`header-name-input-${index}`}
                 />
                 <div className="relative">
                   <Input
@@ -195,6 +197,7 @@ const CustomHeaders = ({
                     }
                     type={visibleValues.has(index) ? "text" : "password"}
                     className="font-mono text-xs pr-8"
+                    data-testid={`header-value-input-${index}`}
                   />
                   <Button
                     type="button"
diff --git a/client/src/components/__tests__/Sidebar.test.tsx b/client/src/components/__tests__/Sidebar.test.tsx
index 1cb221c5..300f3c16 100644
--- a/client/src/components/__tests__/Sidebar.test.tsx
+++ b/client/src/components/__tests__/Sidebar.test.tsx
@@ -1,4 +1,10 @@
-import { render, screen, fireEvent, act } from "@testing-library/react";
+import {
+  render,
+  screen,
+  fireEvent,
+  act,
+  waitFor,
+} from "@testing-library/react";
 import "@testing-library/jest-dom";
 import { describe, it, beforeEach, jest } from "@jest/globals";
 import Sidebar from "../Sidebar";
@@ -623,117 +629,179 @@ describe("Sidebar", () => {
       fireEvent.click(button);
     };
 
-    it("should update bearer token", () => {
-      const setBearerToken = jest.fn();
+    it("should update bearer token via custom headers", async () => {
+      const setCustomHeaders = jest.fn();
       renderSidebar({
-        bearerToken: "",
-        setBearerToken,
+        customHeaders: [],
+        setCustomHeaders,
         transportType: "sse", // Set transport type to SSE
       });
 
       openAuthSection();
 
-      const tokenInput = screen.getByTestId("bearer-token-input");
-      fireEvent.change(tokenInput, { target: { value: "new_token" } });
+      // Add a new header
+      const addButton = screen.getByTestId("add-header-button");
+      fireEvent.click(addButton);
 
-      expect(setBearerToken).toHaveBeenCalledWith("new_token");
+      // Verify that setCustomHeaders was called to add an empty header
+      expect(setCustomHeaders).toHaveBeenCalledWith([
+        {
+          name: "",
+          value: "",
+          enabled: true,
+        },
+      ]);
     });
 
-    it("should update header name", () => {
-      const setHeaderName = jest.fn();
+    it("should update header name via custom headers", () => {
+      const setCustomHeaders = jest.fn();
       renderSidebar({
-        headerName: "Authorization",
-        setHeaderName,
+        customHeaders: [
+          {
+            name: "Authorization",
+            value: "Bearer token123",
+            enabled: true,
+          },
+        ],
+        setCustomHeaders,
         transportType: "sse",
       });
 
       openAuthSection();
 
-      const headerInput = screen.getByTestId("header-input");
-      fireEvent.change(headerInput, { target: { value: "X-Custom-Auth" } });
+      const headerNameInput = screen.getByTestId("header-name-input-0");
+      fireEvent.change(headerNameInput, { target: { value: "X-Custom-Auth" } });
 
-      expect(setHeaderName).toHaveBeenCalledWith("X-Custom-Auth");
+      expect(setCustomHeaders).toHaveBeenCalledWith([
+        {
+          name: "X-Custom-Auth",
+          value: "Bearer token123",
+          enabled: true,
+        },
+      ]);
     });
 
-    it("should clear bearer token", () => {
-      const setBearerToken = jest.fn();
+    it("should clear bearer token via custom headers", () => {
+      const setCustomHeaders = jest.fn();
       renderSidebar({
-        bearerToken: "existing_token",
-        setBearerToken,
+        customHeaders: [
+          {
+            name: "Authorization",
+            value: "Bearer existing_token",
+            enabled: true,
+          },
+        ],
+        setCustomHeaders,
         transportType: "sse", // Set transport type to SSE
       });
 
       openAuthSection();
 
-      const tokenInput = screen.getByTestId("bearer-token-input");
-      fireEvent.change(tokenInput, { target: { value: "" } });
+      const headerValueInput = screen.getByTestId("header-value-input-0");
+      fireEvent.change(headerValueInput, { target: { value: "" } });
 
-      expect(setBearerToken).toHaveBeenCalledWith("");
+      expect(setCustomHeaders).toHaveBeenCalledWith([
+        {
+          name: "Authorization",
+          value: "",
+          enabled: true,
+        },
+      ]);
     });
 
-    it("should properly render bearer token input", () => {
+    it("should properly render header value input as password field", () => {
       const { rerender } = renderSidebar({
-        bearerToken: "existing_token",
+        customHeaders: [
+          {
+            name: "Authorization",
+            value: "Bearer existing_token",
+            enabled: true,
+          },
+        ],
         transportType: "sse", // Set transport type to SSE
       });
 
       openAuthSection();
 
       // Token input should be a password field
-      const tokenInput = screen.getByTestId("bearer-token-input");
+      const tokenInput = screen.getByTestId("header-value-input-0");
       expect(tokenInput).toHaveProperty("type", "password");
 
       // Update the token
-      fireEvent.change(tokenInput, { target: { value: "new_token" } });
+      fireEvent.change(tokenInput, { target: { value: "Bearer new_token" } });
 
       // Rerender with updated token
       rerender(
         <TooltipProvider>
           <Sidebar
             {...defaultProps}
-            bearerToken="new_token"
+            customHeaders={[
+              {
+                name: "Authorization",
+                value: "Bearer new_token",
+                enabled: true,
+              },
+            ]}
             transportType="sse"
           />
         </TooltipProvider>,
       );
 
       // Token input should still exist after update
-      expect(screen.getByTestId("bearer-token-input")).toBeInTheDocument();
+      expect(screen.getByTestId("header-value-input-0")).toBeInTheDocument();
     });
 
     it("should maintain token visibility state after update", () => {
       const { rerender } = renderSidebar({
-        bearerToken: "existing_token",
+        customHeaders: [
+          {
+            name: "Authorization",
+            value: "Bearer existing_token",
+            enabled: true,
+          },
+        ],
         transportType: "sse", // Set transport type to SSE
       });
 
       openAuthSection();
 
       // Token input should be a password field
-      const tokenInput = screen.getByTestId("bearer-token-input");
+      const tokenInput = screen.getByTestId("header-value-input-0");
       expect(tokenInput).toHaveProperty("type", "password");
 
       // Update the token
-      fireEvent.change(tokenInput, { target: { value: "new_token" } });
+      fireEvent.change(tokenInput, { target: { value: "Bearer new_token" } });
 
       // Rerender with updated token
       rerender(
         <TooltipProvider>
           <Sidebar
             {...defaultProps}
-            bearerToken="new_token"
+            customHeaders={[
+              {
+                name: "Authorization",
+                value: "Bearer new_token",
+                enabled: true,
+              },
+            ]}
             transportType="sse"
           />
         </TooltipProvider>,
       );
 
       // Token input should still exist after update
-      expect(screen.getByTestId("bearer-token-input")).toBeInTheDocument();
+      expect(screen.getByTestId("header-value-input-0")).toBeInTheDocument();
     });
 
     it("should maintain header name when toggling auth section", () => {
       renderSidebar({
-        headerName: "X-API-Key",
+        customHeaders: [
+          {
+            name: "X-API-Key",
+            value: "api-key-123",
+            enabled: true,
+          },
+        ],
         transportType: "sse",
       });
 
@@ -741,7 +809,7 @@ describe("Sidebar", () => {
       openAuthSection();
 
       // Verify header name is displayed
-      const headerInput = screen.getByTestId("header-input");
+      const headerInput = screen.getByTestId("header-name-input-0");
       expect(headerInput).toHaveValue("X-API-Key");
 
       // Close auth section
@@ -752,19 +820,66 @@ describe("Sidebar", () => {
       fireEvent.click(authButton);
 
       // Verify header name is still preserved
-      expect(screen.getByTestId("header-input")).toHaveValue("X-API-Key");
+      expect(screen.getByTestId("header-name-input-0")).toHaveValue(
+        "X-API-Key",
+      );
     });
 
-    it("should display default header name when not specified", () => {
+    it("should display placeholder for header name when no headers exist", () => {
       renderSidebar({
-        headerName: undefined,
+        customHeaders: [],
         transportType: "sse",
       });
 
       openAuthSection();
 
-      const headerInput = screen.getByTestId("header-input");
-      expect(headerInput).toHaveAttribute("placeholder", "Authorization");
+      // Verify that the "No custom headers configured" message is shown
+      expect(
+        screen.getByText("No custom headers configured"),
+      ).toBeInTheDocument();
+      expect(
+        screen.getByText('Click "Add" to get started'),
+      ).toBeInTheDocument();
+
+      // Verify the Add button is present
+      const addButton = screen.getByTestId("add-header-button");
+      expect(addButton).toBeInTheDocument();
+    });
+
+    it("should allow editing existing headers", () => {
+      const setCustomHeaders = jest.fn();
+      renderSidebar({
+        customHeaders: [
+          {
+            name: "Authorization",
+            value: "Bearer token123",
+            enabled: true,
+          },
+        ],
+        setCustomHeaders,
+        transportType: "sse",
+      });
+
+      openAuthSection();
+
+      // Verify header inputs are rendered
+      const headerNameInput = screen.getByTestId("header-name-input-0");
+      const headerValueInput = screen.getByTestId("header-value-input-0");
+
+      expect(headerNameInput).toHaveValue("Authorization");
+      expect(headerValueInput).toHaveValue("Bearer token123");
+      expect(headerNameInput).toHaveAttribute("placeholder", "Header Name");
+      expect(headerValueInput).toHaveAttribute("placeholder", "Header Value");
+
+      // Update header name
+      fireEvent.change(headerNameInput, { target: { value: "X-API-Key" } });
+      expect(setCustomHeaders).toHaveBeenCalledWith([
+        {
+          name: "X-API-Key",
+          value: "Bearer token123",
+          enabled: true,
+        },
+      ]);
     });
   });
 

From 70ddef28f2f6255e317cf0c9eeb38842955dcfbd Mon Sep 17 00:00:00 2001
From: Basil Hosmer <basil@anthropic.com>
Date: Fri, 12 Sep 2025 22:23:32 -0400
Subject: [PATCH 11/13] Fix OAuth redirect URI mismatch in debug flow

Register both normal and debug redirect URIs in client metadata to prevent mismatch errors when using the Auth tab's debug mode versus normal connection flow.
---
 client/src/lib/auth.ts | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/client/src/lib/auth.ts b/client/src/lib/auth.ts
index c1505398..0a8d26cf 100644
--- a/client/src/lib/auth.ts
+++ b/client/src/lib/auth.ts
@@ -117,9 +117,14 @@ export class InspectorOAuthClientProvider implements OAuthClientProvider {
     return window.location.origin + "/oauth/callback";
   }
 
+  get debugRedirectUrl() {
+    return window.location.origin + "/oauth/callback/debug";
+  }
+
   get clientMetadata(): OAuthClientMetadata {
+    // Register both redirect URIs to support both normal and debug flows
     return {
-      redirect_uris: [this.redirectUrl],
+      redirect_uris: [this.redirectUrl, this.debugRedirectUrl],
       token_endpoint_auth_method: "none",
       grant_types: ["authorization_code", "refresh_token"],
       response_types: ["code"],
@@ -223,11 +228,13 @@ export class InspectorOAuthClientProvider implements OAuthClientProvider {
   }
 }
 
-// Overrides debug URL and allows saving server OAuth metadata to
+// Overrides redirect URL to use the debug endpoint and allows saving server OAuth metadata to
 // display in debug UI.
 export class DebugInspectorOAuthClientProvider extends InspectorOAuthClientProvider {
   get redirectUrl(): string {
-    return `${window.location.origin}/oauth/callback/debug`;
+    // We can use the debug redirect URL here because it was already registered
+    // in the parent class's clientMetadata along with the normal redirect URL
+    return this.debugRedirectUrl;
   }
 
   saveServerMetadata(metadata: OAuthMetadata) {

From e08ce8cee9425588d858b0d0a6dff8729aeed485 Mon Sep 17 00:00:00 2001
From: "jeetul.samaiya" <jeetul.samaiya@rapidops.com>
Date: Mon, 15 Sep 2025 20:19:56 +0530
Subject: [PATCH 12/13] feat: add default Authorization Bearer header and clean
 up legacy auth

- Provide "Authorization: Bearer " as default starting header
- Remove legacy auth props from components
- Centralize migration logic and fix localStorage cleanup
- Update tests for new auth architecture
---
 client/eslint.config.js                       |  4 ---
 client/src/App.tsx                            | 27 ++++++++++++-------
 client/src/components/Sidebar.tsx             | 11 +-------
 .../src/components/__tests__/Sidebar.test.tsx | 12 +--------
 .../hooks/__tests__/useConnection.test.tsx    | 24 ++++++++++++-----
 client/src/lib/hooks/useConnection.ts         | 21 +++------------
 client/src/lib/types/customHeaders.ts         |  8 +++---
 7 files changed, 45 insertions(+), 62 deletions(-)

diff --git a/client/eslint.config.js b/client/eslint.config.js
index c689c75d..79a552ea 100644
--- a/client/eslint.config.js
+++ b/client/eslint.config.js
@@ -23,10 +23,6 @@ export default tseslint.config(
         "warn",
         { allowConstantExport: true },
       ],
-      "@typescript-eslint/no-unused-vars": [
-        "error",
-        { argsIgnorePattern: "^_" },
-      ],
     },
   },
 );
diff --git a/client/src/App.tsx b/client/src/App.tsx
index 1454811a..4c35b0ec 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -154,7 +154,14 @@ const App = () => {
       return migrateFromLegacyAuth(legacyToken, legacyHeaderName);
     }
 
-    return [];
+    // Default to Authorization: Bearer as the most common case
+    return [
+      {
+        name: "Authorization",
+        value: "Bearer ",
+        enabled: true,
+      },
+    ];
   });
 
   const [pendingSampleRequests, setPendingSampleRequests] = useState<
@@ -243,8 +250,6 @@ const App = () => {
     args,
     sseUrl,
     env,
-    bearerToken,
-    headerName,
     customHeaders,
     oauthClientId,
     oauthScope,
@@ -334,11 +339,19 @@ const App = () => {
   }, [transportType]);
 
   useEffect(() => {
-    localStorage.setItem("lastBearerToken", bearerToken);
+    if (bearerToken) {
+      localStorage.setItem("lastBearerToken", bearerToken);
+    } else {
+      localStorage.removeItem("lastBearerToken");
+    }
   }, [bearerToken]);
 
   useEffect(() => {
-    localStorage.setItem("lastHeaderName", headerName);
+    if (headerName) {
+      localStorage.setItem("lastHeaderName", headerName);
+    } else {
+      localStorage.removeItem("lastHeaderName");
+    }
   }, [headerName]);
 
   useEffect(() => {
@@ -858,10 +871,6 @@ const App = () => {
           setEnv={setEnv}
           config={config}
           setConfig={setConfig}
-          bearerToken={bearerToken}
-          setBearerToken={setBearerToken}
-          headerName={headerName}
-          setHeaderName={setHeaderName}
           customHeaders={customHeaders}
           setCustomHeaders={setCustomHeaders}
           oauthClientId={oauthClientId}
diff --git a/client/src/components/Sidebar.tsx b/client/src/components/Sidebar.tsx
index 9806624f..c0c61fbe 100644
--- a/client/src/components/Sidebar.tsx
+++ b/client/src/components/Sidebar.tsx
@@ -53,12 +53,7 @@ interface SidebarProps {
   setSseUrl: (url: string) => void;
   env: Record<string, string>;
   setEnv: (env: Record<string, string>) => void;
-  // Legacy auth props (for backward compatibility)
-  bearerToken: string;
-  setBearerToken: (token: string) => void;
-  headerName?: string;
-  setHeaderName?: (name: string) => void;
-  // New custom headers support
+  // Custom headers support
   customHeaders: CustomHeadersType;
   setCustomHeaders: (headers: CustomHeadersType) => void;
   oauthClientId: string;
@@ -86,10 +81,6 @@ const Sidebar = ({
   setSseUrl,
   env,
   setEnv,
-  bearerToken: _bearerToken,
-  setBearerToken: _setBearerToken,
-  headerName: _headerName,
-  setHeaderName: _setHeaderName,
   customHeaders,
   setCustomHeaders,
   oauthClientId,
diff --git a/client/src/components/__tests__/Sidebar.test.tsx b/client/src/components/__tests__/Sidebar.test.tsx
index b6797d38..3a23daaf 100644
--- a/client/src/components/__tests__/Sidebar.test.tsx
+++ b/client/src/components/__tests__/Sidebar.test.tsx
@@ -1,10 +1,4 @@
-import {
-  render,
-  screen,
-  fireEvent,
-  act,
-  waitFor,
-} from "@testing-library/react";
+import { render, screen, fireEvent, act } from "@testing-library/react";
 import "@testing-library/jest-dom";
 import { describe, it, beforeEach, jest } from "@jest/globals";
 import Sidebar from "../Sidebar";
@@ -54,10 +48,6 @@ describe("Sidebar", () => {
     setOauthScope: jest.fn(),
     env: {},
     setEnv: jest.fn(),
-    bearerToken: "",
-    setBearerToken: jest.fn(),
-    headerName: "",
-    setHeaderName: jest.fn(),
     customHeaders: [],
     setCustomHeaders: jest.fn(),
     onConnect: jest.fn(),
diff --git a/client/src/lib/hooks/__tests__/useConnection.test.tsx b/client/src/lib/hooks/__tests__/useConnection.test.tsx
index 8047bed8..a94f2386 100644
--- a/client/src/lib/hooks/__tests__/useConnection.test.tsx
+++ b/client/src/lib/hooks/__tests__/useConnection.test.tsx
@@ -649,9 +649,17 @@ describe("useConnection", () => {
     });
 
     test("preserves server Authorization header when proxy auth is configured", async () => {
+      const customHeaders: CustomHeaders = [
+        {
+          name: "Authorization",
+          value: "Bearer server-auth-token",
+          enabled: true,
+        },
+      ];
+
       const propsWithBothAuth = {
         ...defaultProps,
-        bearerToken: "server-auth-token",
+        customHeaders,
         config: {
           ...DEFAULT_INSPECTOR_CONFIG,
           MCP_PROXY_AUTH_TOKEN: {
@@ -811,14 +819,18 @@ describe("useConnection", () => {
       expect(headers).not.toHaveProperty("X-Disabled");
     });
 
-    test("migrates from legacy bearerToken and headerName", async () => {
-      const propsWithLegacyAuth = {
+    test("handles migrated legacy auth via custom headers", async () => {
+      // Simulate what App.tsx would do - migrate legacy auth to custom headers
+      const customHeaders: CustomHeaders = [
+        { name: "X-Custom-Auth", value: "legacy-token", enabled: true },
+      ];
+
+      const propsWithMigratedAuth = {
         ...defaultProps,
-        bearerToken: "legacy-token",
-        headerName: "X-Custom-Auth",
+        customHeaders,
       };
 
-      const { result } = renderHook(() => useConnection(propsWithLegacyAuth));
+      const { result } = renderHook(() => useConnection(propsWithMigratedAuth));
 
       await act(async () => {
         await result.current.connect();
diff --git a/client/src/lib/hooks/useConnection.ts b/client/src/lib/hooks/useConnection.ts
index 04778157..f47f0d15 100644
--- a/client/src/lib/hooks/useConnection.ts
+++ b/client/src/lib/hooks/useConnection.ts
@@ -57,7 +57,7 @@ import {
 import { getMCPServerRequestTimeout } from "@/utils/configUtils";
 import { InspectorConfig } from "../configurationTypes";
 import { Transport } from "@modelcontextprotocol/sdk/shared/transport.js";
-import { CustomHeaders, migrateFromLegacyAuth } from "../types/customHeaders";
+import { CustomHeaders } from "../types/customHeaders";
 
 interface UseConnectionOptions {
   transportType: "stdio" | "sse" | "streamable-http";
@@ -65,10 +65,7 @@ interface UseConnectionOptions {
   args: string;
   sseUrl: string;
   env: Record<string, string>;
-  // Legacy auth support (for backward compatibility)
-  bearerToken?: string;
-  headerName?: string;
-  // New custom headers support
+  // Custom headers support
   customHeaders?: CustomHeaders;
   oauthClientId?: string;
   oauthScope?: string;
@@ -90,8 +87,6 @@ export function useConnection({
   args,
   sseUrl,
   env,
-  bearerToken,
-  headerName,
   customHeaders,
   oauthClientId,
   oauthScope,
@@ -384,16 +379,8 @@ export function useConnection({
       // Create an auth provider with the current server URL
       const serverAuthProvider = new InspectorOAuthClientProvider(sseUrl);
 
-      // Handle custom headers (new approach) or legacy auth (backward compatibility)
-      let finalHeaders: CustomHeaders = [];
-
-      if (customHeaders && customHeaders.length > 0) {
-        // Use new custom headers approach
-        finalHeaders = customHeaders;
-      } else if (bearerToken || headerName) {
-        // Migrate from legacy auth approach
-        finalHeaders = migrateFromLegacyAuth(bearerToken, headerName);
-      }
+      // Use custom headers (migration is handled in App.tsx)
+      let finalHeaders: CustomHeaders = customHeaders || [];
 
       // Add OAuth token if available and no custom headers are set
       if (finalHeaders.length === 0) {
diff --git a/client/src/lib/types/customHeaders.ts b/client/src/lib/types/customHeaders.ts
index 3443727a..46e7237d 100644
--- a/client/src/lib/types/customHeaders.ts
+++ b/client/src/lib/types/customHeaders.ts
@@ -58,9 +58,7 @@ export const migrateFromLegacyAuth = (
   bearerToken?: string,
   headerName?: string,
 ): CustomHeaders => {
-  if (!bearerToken) {
-    return [];
-  }
-
-  return [createHeaderFromBearerToken(bearerToken, headerName)];
+  return bearerToken
+    ? [createHeaderFromBearerToken(bearerToken, headerName)]
+    : [];
 };

From 51d28cd7b4701d715bf3957239682cae2ac9a945 Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Mon, 15 Sep 2025 18:09:44 -0400
Subject: [PATCH 13/13] When the client sends a request, do not pass on the
 mcp-session-id header for the Client <-> Proxy connection. This causes a
 problem for stateless SSE or StreamableHttp connections.

---
 server/src/index.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/server/src/index.ts b/server/src/index.ts
index af3ea928..7e966d34 100644
--- a/server/src/index.ts
+++ b/server/src/index.ts
@@ -53,8 +53,8 @@ const getHttpHeaders = (req: express.Request): Record<string, string> => {
       lowerKey === "authorization" ||
       lowerKey === "last-event-id"
     ) {
-      // Exclude the proxy's own authentication header
-      if (lowerKey !== "x-mcp-proxy-auth") {
+      // Exclude the proxy's own authentication header and the Client <-> Proxy session ID header
+      if (lowerKey !== "x-mcp-proxy-auth" && lowerKey !== "mcp-session-id") {
         const value = req.headers[key];
 
         if (typeof value === "string") {