Add support for custom headers and migrate from legacy auth

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",

client/src/App.tsx

@@ -74,6 +74,10 @@ import ElicitationTab, {
   PendingElicitationRequest,
   ElicitationResponse,
 } from "./components/ElicitationTab";
+import {
+  CustomHeaders,
+  migrateFromLegacyAuth,
+} from "./lib/types/customHeaders";
 
 const CONFIG_LOCAL_STORAGE_KEY = "inspectorConfig_v1";
 
@@ -127,6 +131,39 @@ 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 (error) {
+        console.warn(
+          `Failed to parse custom headers: "${savedHeaders}", will try legacy migration`,
+          error,
+        );
+        // 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);
+    }
+
+    // Default to Authorization: Bearer as the most common case
+    return [
+      {
+        name: "Authorization",
+        value: "Bearer ",
+        enabled: true,
+      },
+    ];
+  });
+
   const [pendingSampleRequests, setPendingSampleRequests] = useState<
     Array<
       PendingRequest & {
@@ -213,8 +250,7 @@ const App = () => {
     args,
     sseUrl,
     env,
-    bearerToken,
-    headerName,
+    customHeaders,
     oauthClientId,
     oauthScope,
     config,
@@ -303,13 +339,38 @@ 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(() => {
+    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]);
@@ -810,10 +871,8 @@ const App = () => {
           setEnv={setEnv}
           config={config}
           setConfig={setConfig}
-          bearerToken={bearerToken}
-          setBearerToken={setBearerToken}
-          headerName={headerName}
-          setHeaderName={setHeaderName}
+          customHeaders={customHeaders}
+          setCustomHeaders={setCustomHeaders}
           oauthClientId={oauthClientId}
           setOauthClientId={setOauthClientId}
           oauthScope={oauthScope}

client/src/components/CustomHeaders.tsx

@@ -0,0 +1,241 @@
+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 {
+      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"
+            data-testid="add-header-button"
+          >
+            <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"
+                  data-testid={`header-name-input-${index}`}
+                />
+                <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"
+                    data-testid={`header-value-input-${index}`}
+                  />
+                  <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;