* In App.tsx

- Add state for connectionType
  - Fetch connectionType from localstorage if present

* In Sidebar.tsx
  - Add dropdown for connectionType, only visible if transport type is not stdio

* In Sidebar.test.tsx
  - set connectionType to "proxy"

* In useConnection.ts
  - add connectionType param, defaulting to "proxy"
  - add state for mcpSessionId
  - Only check proxy health if the connection type is proxy
  - create a serverUrl variable which will either be the proxy url OR the server url depending upon the connection type
  - added captureResponseHeaders function to extract the protocol-related headers from a response.
  - when creating transport options and connectionType is "direct" and transportType is not "stdio",
    - add the appropriate `Accept` and `Content-Type` headers
    - capture the protocol related response headers and store them in the custom fetch handler
    - set serverUrl to be the server url, not the proxy url
  - if connection type is proxy set serverUrl to the mcpProxyUrl
  - use serverUrl instead of mcpProxyUrl for the  transport instantiation
* In useConnection.test.tsx
  - replaced test "sends X-MCP-Proxy-Auth header when proxy auth token is configured" with two tests:
    - "sends X-MCP-Proxy-Auth header when proxy auth token is configured for 'proxy' connectionType"
    - "does NOT send X-MCP-Proxy-Auth header when proxy auth token is configured for 'direct' connectionType"
   - added Connection URL Verification section with 2 tests
     - uses server URL directly when connectionType is 'direct'"
     - "uses proxy server URL when connectionType is 'proxy'"

client/src/App.tsx

@@ -107,6 +107,14 @@ const App = () => {
   const [transportType, setTransportType] = useState<
     "stdio" | "sse" | "streamable-http"
   >(getInitialTransportType);
+  const [connectionType, setConnectionType] = useState<"direct" | "proxy">(
+    () => {
+      return (
+        (localStorage.getItem("lastConnectionType") as "direct" | "proxy") ||
+        "proxy"
+      );
+    },
+  );
   const [logLevel, setLogLevel] = useState<LoggingLevel>("debug");
   const [notifications, setNotifications] = useState<ServerNotification[]>([]);
   const [roots, setRoots] = useState<Root[]>([]);
@@ -254,6 +262,7 @@ const App = () => {
     oauthClientId,
     oauthScope,
     config,
+    connectionType,
     onNotification: (notification) => {
       setNotifications((prev) => [...prev, notification as ServerNotification]);
     },
@@ -338,6 +347,10 @@ const App = () => {
     localStorage.setItem("lastTransportType", transportType);
   }, [transportType]);
 
+  useEffect(() => {
+    localStorage.setItem("lastConnectionType", connectionType);
+  }, [connectionType]);
+
   useEffect(() => {
     if (bearerToken) {
       localStorage.setItem("lastBearerToken", bearerToken);
@@ -882,6 +895,8 @@ const App = () => {
           logLevel={logLevel}
           sendLogLevelRequest={sendLogLevelRequest}
           loggingSupported={!!serverCapabilities?.logging || false}
+          connectionType={connectionType}
+          setConnectionType={setConnectionType}
         />
         <div
           onMouseDown={handleSidebarDragStart}