fix status dot

Author: tonxxd

packages/inspector/src/client/components/InspectorDashboard.tsx

@@ -124,8 +124,13 @@ export function InspectorDashboard() {
           }, {} as Record<string, string>),
         }
 
+    // Map UI transport type to actual transport type
+    // "SSE" in UI means "Streamable HTTP" which uses 'http' transport
+    // "WebSocket" in UI means "WebSocket" which uses 'sse' transport
+    const actualTransportType = transportType === 'SSE' ? 'http' : 'sse'
+
     // For now, use URL as both ID and name - this will need proper implementation
-    addConnection(url, url, proxyConfig)
+    addConnection(url, url, proxyConfig, actualTransportType)
   }
 
   const handleClearAllConnections = () => {
@@ -222,7 +227,7 @@ export function InspectorDashboard() {
               >
                 <Badge variant="secondary" className="text-xs cursor-pointer hover:bg-secondary/80 transition-colors">
                   v
-                  {typeof window !== 'undefined' && (window as any).__INSPECTOR_VERSION__ || '1.0.0'}
+                  {(typeof window !== 'undefined' && (window as any).__INSPECTOR_VERSION__) || '1.0.0'}
                 </Badge>
               </a>
             </TooltipTrigger>
@@ -268,7 +273,7 @@ export function InspectorDashboard() {
                           <div className="flex items-center gap-3">
                             <h4 className="font-semibold text-sm">{connection.name}</h4>
                             <div className="flex items-center gap-2">
-                              {connection.error
+                              {connection.error && connection.state !== 'ready'
                                 ? (
                                     <Tooltip>
                                       <TooltipTrigger asChild>
@@ -398,8 +403,8 @@ export function InspectorDashboard() {
                 <SelectValue />
               </SelectTrigger>
               <SelectContent>
-                <SelectItem value="SSE">Streamable HTTP</SelectItem>
-                <SelectItem value="WebSocket">WebSocket</SelectItem>
+                <SelectItem value="SSE">Streamable HTTP (Recommended)</SelectItem>
+                <SelectItem value="WebSocket">Server-Sent Events (SSE)</SelectItem>
               </SelectContent>
             </Select>
           </div>

packages/inspector/src/client/components/Layout.tsx

@@ -233,7 +233,7 @@ export function Layout({ children }: LayoutProps) {
       const existing = connections.find(c => c.url === autoConnectUrl)
       if (!existing) {
         setIsAutoConnecting(true)
-        addConnection(autoConnectUrl, 'Local MCP Server')
+        addConnection(autoConnectUrl, 'Local MCP Server', undefined, 'http')
         // Navigate immediately but keep loading screen visible a bit longer to avoid flash
         navigate(`/servers/${encodeURIComponent(autoConnectUrl)}`)
         setTimeout(() => {
@@ -254,7 +254,7 @@ export function Layout({ children }: LayoutProps) {
           const existing = connections.find(c => c.url === config.autoConnectUrl)
           if (!existing) {
             // Auto-connect to the local server
-            addConnection(config.autoConnectUrl, 'Local MCP Server')
+            addConnection(config.autoConnectUrl, 'Local MCP Server', undefined, 'http')
           }
         }
       })
@@ -383,7 +383,7 @@ export function Layout({ children }: LayoutProps) {
                         </span>
                         {selectedServer && (
                           <div className="flex items-center gap-2">
-                            {selectedServer.error
+                            {selectedServer.error && selectedServer.state !== 'ready'
                               ? (
                                   <Tooltip>
                                     <TooltipTrigger asChild>

packages/inspector/src/client/context/McpContext.tsx

@@ -21,7 +21,7 @@ interface MCPConnection {
 
 interface McpContextType {
   connections: MCPConnection[]
-  addConnection: (url: string, name?: string, proxyConfig?: { proxyAddress?: string, proxyToken?: string, customHeaders?: Record<string, string> }) => void
+  addConnection: (url: string, name?: string, proxyConfig?: { proxyAddress?: string, proxyToken?: string, customHeaders?: Record<string, string> }, transportType?: 'http' | 'sse') => void
   removeConnection: (id: string) => void
   getConnection: (id: string) => MCPConnection | undefined
 }
@@ -33,12 +33,14 @@ interface SavedConnection {
   url: string
   name: string
   proxyConfig?: { proxyAddress?: string, proxyToken?: string, customHeaders?: Record<string, string> }
+  transportType?: 'http' | 'sse'
 }
 
-function McpConnectionWrapper({ url, name, proxyConfig, onUpdate, onRemove: _onRemove }: {
+function McpConnectionWrapper({ url, name, proxyConfig, transportType, onUpdate, onRemove: _onRemove }: {
   url: string
   name: string
   proxyConfig?: { proxyAddress?: string, proxyToken?: string, customHeaders?: Record<string, string> }
+  transportType?: 'http' | 'sse'
   onUpdate: (connection: MCPConnection) => void
   onRemove: () => void
 }) {
@@ -79,6 +81,7 @@ function McpConnectionWrapper({ url, name, proxyConfig, onUpdate, onRemove: _onR
     url: finalUrl,
     callbackUrl,
     customHeaders: Object.keys(customHeaders).length > 0 ? customHeaders : undefined,
+    transportType: transportType || 'http', // Default to 'http' for Streamable HTTP
   })
   const onUpdateRef = useRef(onUpdate)
   const prevConnectionRef = useRef<MCPConnection | null>(null)
@@ -194,12 +197,21 @@ export function McpProvider({ children }: { children: ReactNode }) {
                 && typeof conn.id === 'string'
                 && typeof conn.url === 'string'
                 && typeof conn.name === 'string'
+            }).map((conn: any) => {
+              // Migrate existing connections to include transportType
+              if (!conn.transportType) {
+                conn.transportType = 'http' // Default to 'http' for Streamable HTTP
+              }
+              return conn
             })
           : []
 
-        // If we filtered out any invalid connections, update localStorage
-        if (validConnections.length !== parsed.length) {
-          console.warn('Cleaned up invalid connections from localStorage')
+        // If we filtered out any invalid connections or migrated transport types, update localStorage
+        const hasChanges = validConnections.length !== parsed.length
+          || validConnections.some((conn: any) => conn.transportType === 'http' && !parsed.find((p: any) => p.id === conn.id && p.transportType))
+
+        if (hasChanges) {
+          console.warn('Updated connections in localStorage with transport type migration')
           localStorage.setItem('mcp-inspector-connections', JSON.stringify(validConnections))
         }
 
@@ -218,13 +230,14 @@ export function McpProvider({ children }: { children: ReactNode }) {
     setConnectionVersion(v => v + 1)
   }, [])
 
-  const addConnection = useCallback((url: string, name?: string, proxyConfig?: { proxyAddress?: string, proxyToken?: string, customHeaders?: Record<string, string> }) => {
+  const addConnection = useCallback((url: string, name?: string, proxyConfig?: { proxyAddress?: string, proxyToken?: string, customHeaders?: Record<string, string> }, transportType?: 'http' | 'sse') => {
     const connectionName = name || url
     const newConnection: SavedConnection = {
       id: url,
       url,
       name: connectionName,
       proxyConfig,
+      transportType: transportType || 'http', // Default to 'http' for Streamable HTTP
     }
 
     setSavedConnections((prev) => {
@@ -289,6 +302,7 @@ export function McpProvider({ children }: { children: ReactNode }) {
           url={saved.url}
           name={saved.name}
           proxyConfig={saved.proxyConfig}
+          transportType={saved.transportType}
           onUpdate={updateConnection}
           onRemove={() => removeConnection(saved.id)}
         />

packages/mcp-use/src/server/mcp-server.ts

@@ -46,7 +46,7 @@ export class McpServer {
     this.app.use((req, res, next) => {
       res.header('Access-Control-Allow-Origin', '*')
       res.header('Access-Control-Allow-Methods', 'GET, POST, DELETE, OPTIONS')
-      res.header('Access-Control-Allow-Headers', 'Content-Type')
+      res.header('Access-Control-Allow-Headers', 'Content-Type, Accept, Authorization, mcp-protocol-version, mcp-session-id, X-Proxy-Token, X-Target-URL')
       next()
     })
 
@@ -316,10 +316,14 @@ export class McpServer {
     const { StreamableHTTPServerTransport } = await import('@modelcontextprotocol/sdk/server/streamableHttp.js')
 
     // Create StreamableHTTPServerTransport in stateless mode
+    // Note: Stateless mode means one active connection at a time
+    // For multiple concurrent inspectors, use the built-in proxy or same-origin connections
     const httpTransport = new StreamableHTTPServerTransport({
-      sessionIdGenerator: undefined // Stateless mode
+      sessionIdGenerator: undefined, // Stateless mode
+      enableJsonResponse: true
     })
 
+
     // Connect the MCP server to the transport
     await this.server.connect(httpTransport)