Improve error handling for MCP transport failures

Enhances error reporting by preferring the original HTTP transport error when both HTTP and SSE transports fail, ensuring the UI displays the primary failure reason. Updates ServerCard to better display long error messages.

src/lib/components/mcp/ServerCard.svelte

@@ -139,7 +139,7 @@
 		{#if server.errorMessage}
 			<div class="mb-2 flex items-center gap-2">
 				<div
-					class="rounded bg-red-50 px-2 py-1 text-xs text-red-800 dark:bg-red-900/20 dark:text-red-200"
+					class="line-clamp-6 break-words rounded bg-red-50 px-2 py-1 text-xs text-red-800 dark:bg-red-900/20 dark:text-red-200"
 				>
 					{server.errorMessage}
 				</div>

src/lib/server/mcp/clientPool.ts

@@ -18,19 +18,32 @@ export async function getClient(server: McpServerConfig, signal?: AbortSignal):
 	const existing = pool.get(key);
 	if (existing) return existing;
 
+	let firstError: unknown;
 	const client = new Client({ name: "chat-ui-mcp", version: "0.1.0" });
 	const url = new URL(server.url);
 	const requestInit: RequestInit = { headers: server.headers, signal };
 	try {
 		try {
 			await client.connect(new StreamableHTTPClientTransport(url, { requestInit }));
-		} catch {
+		} catch (httpErr) {
+			// Remember the original HTTP transport error so we can surface it if the fallback also fails.
+			// Today we always show the SSE message, which is misleading when the real failure was HTTP (e.g. 500).
+			firstError = httpErr;
 			await client.connect(new SSEClientTransport(url, { requestInit }));
 		}
 	} catch (err) {
 		try {
 			await client.close?.();
 		} catch {}
+		// Prefer the HTTP error if both transports fail; otherwise fall back to the last error.
+		if (firstError) {
+			const message =
+				"HTTP transport failed: " +
+				String(firstError instanceof Error ? firstError.message : firstError) +
+				"; SSE fallback failed: " +
+				String(err instanceof Error ? err.message : err);
+			throw new Error(message, { cause: err instanceof Error ? err : undefined });
+		}
 		throw err;
 	}
 

src/routes/api/mcp/health/+server.ts

@@ -83,6 +83,7 @@ export const POST: RequestHandler = async ({ request, locals }) => {
 			signal,
 		};
 
+		let httpError: Error | undefined;
 		let lastError: Error | undefined;
 
 		// Try Streamable HTTP transport first
@@ -137,7 +138,8 @@ export const POST: RequestHandler = async ({ request, locals }) => {
 				return res;
 			}
 		} catch (error) {
-			lastError = error instanceof Error ? error : new Error(String(error));
+			httpError = error instanceof Error ? error : new Error(String(error));
+			lastError = httpError;
 			console.log("Streamable HTTP failed, trying SSE transport...", lastError.message);
 
 			// Close failed client
@@ -200,6 +202,14 @@ export const POST: RequestHandler = async ({ request, locals }) => {
 				}
 			} catch (sseError) {
 				lastError = sseError instanceof Error ? sseError : new Error(String(sseError));
+				// Prefer the HTTP error when both failed so UI shows the primary failure (e.g., HTTP 500) instead
+				// of the fallback SSE message.
+				if (httpError) {
+					lastError = new Error(
+						`HTTP transport failed: ${httpError.message}; SSE fallback failed: ${lastError.message}`,
+						{ cause: sseError instanceof Error ? sseError : undefined }
+					);
+				}
 				console.error("Both transports failed. Last error:", lastError);
 			}
 		}