Fixing /sse support (#12)

* /sse still not working

* Add transport type selector to inspector UI and comprehensive transport testing

- Add transport type dropdown to inspector UI (auto, HTTP, SSE) with session storage persistence
- Update test framework to support transport type selection in test scenarios
- Add comprehensive test cases covering:
  * Working /mcp endpoints with auto and HTTP transports
  * SSE endpoint with SSE transport (expected to pass)
  * SSE endpoint with auto transport (expected to fail - demonstrates current fallback issue)
- Test structure now provides clear visibility into transport-specific behavior
- All tests properly named and categorized for easy identification of failing scenarios

* Gearing up to "make amp do it"

* fix: improve SSE fallback logic in auto transport mode

- Fix issue where SSE fallback was not attempted when HTTP transport failed
- Specific error types (404, 405, CORS) now correctly trigger SSE fallback
- Allow SSE fallback even when component state is 'failed' from previous attempts
- Maintain proper error handling for non-fallback HTTP errors
- All 6 transport scenarios now pass integration tests

The core issue was that failConnection() was being called for HTTP errors
before returning 'fallback', which set the component state to 'failed' and
prevented the orchestration logic from attempting SSE fallback. Now only
specific HTTP errors that should trigger fallback avoid calling failConnection
immediately, allowing the SSE transport to be attempted as expected.

---------

Co-authored-by: Glen Maddern <glen@glenmaddern.com>

examples/inspector/src/components/McpServers.tsx

@@ -3,14 +3,22 @@ import { useMcp, type Tool } from 'use-mcp/react'
 import { Info, X, ChevronRight, ChevronDown } from 'lucide-react'
 
 // MCP Connection wrapper that only renders when active
-function McpConnection({ serverUrl, onConnectionUpdate }: { serverUrl: string; onConnectionUpdate: (data: any) => void }) {
+function McpConnection({
+  serverUrl,
+  transportType,
+  onConnectionUpdate,
+}: {
+  serverUrl: string
+  transportType: 'auto' | 'http' | 'sse'
+  onConnectionUpdate: (data: any) => void
+}) {
   // Use the MCP hook with the server URL
   const connection = useMcp({
     url: serverUrl,
     debug: true,
     autoRetry: false,
     popupFeatures: 'width=500,height=600,resizable=yes,scrollbars=yes',
-    transportType: 'auto',
+    transportType,
   })
 
   // Update parent component with connection data
@@ -26,6 +34,9 @@ export function McpServers({ onToolsUpdate }: { onToolsUpdate?: (tools: Tool[])
   const [serverUrl, setServerUrl] = useState(() => {
     return sessionStorage.getItem('mcpServerUrl') || ''
   })
+  const [transportType, setTransportType] = useState<'auto' | 'http' | 'sse'>(() => {
+    return (sessionStorage.getItem('mcpTransportType') as 'auto' | 'http' | 'sse') || 'auto'
+  })
   const [isActive, setIsActive] = useState(false)
 
   const [connectionData, setConnectionData] = useState<any>({
@@ -293,6 +304,20 @@ export function McpServers({ onToolsUpdate }: { onToolsUpdate?: (tools: Tool[])
             }}
             disabled={isActive && state !== 'failed'}
           />
+          <select
+            className="p-2 border border-gray-200 rounded text-sm focus:outline-none focus:ring-1 focus:ring-blue-300"
+            value={transportType}
+            onChange={(e) => {
+              const newValue = e.target.value as 'auto' | 'http' | 'sse'
+              setTransportType(newValue)
+              sessionStorage.setItem('mcpTransportType', newValue)
+            }}
+            disabled={isActive && state !== 'failed'}
+          >
+            <option value="auto">Auto</option>
+            <option value="http">HTTP</option>
+            <option value="sse">SSE</option>
+          </select>
 
           {state === 'ready' || (isActive && state !== 'not-connected' && state !== 'failed') ? (
             <button
@@ -477,7 +502,7 @@ export function McpServers({ onToolsUpdate }: { onToolsUpdate?: (tools: Tool[])
       </div>
 
       {/* Only render the actual MCP connection when active */}
-      {isActive && <McpConnection serverUrl={serverUrl} onConnectionUpdate={setConnectionData} />}
+      {isActive && <McpConnection serverUrl={serverUrl} transportType={transportType} onConnectionUpdate={setConnectionData} />}
     </section>
   )
 }

examples/inspector/vite.config.ts

@@ -6,7 +6,7 @@ import tailwindcss from '@tailwindcss/vite'
 export default defineConfig({
   plugins: [react(), tailwindcss()],
   build: {
-    // @ts-ignore
-    minify: !process.env.NO_MINIFY,
+    // @ts-expect-error I don't want to install @types/node for this one line
+    minify: process.env.NO_MINIFY !== 'true',
   },
 })