Improve tool update display and MCP client fallback

Enhanced ToolUpdate.svelte to better format and display tool parameters, outputs, and error messages. Refactored httpClient.ts to robustly fallback from streamable to SSE transport, improving error handling and connection management for MCP tool calls.

Author: gary149

src/lib/components/chat/ToolUpdate.svelte

@@ -30,6 +30,18 @@
 	let animation: Animation | undefined = $state();
 	let showingLoadingBar = $state(false);
 
+	const formatValue = (value: unknown): string => {
+		if (value == null) return "";
+		if (typeof value === "object") {
+			try {
+				return JSON.stringify(value, null, 2);
+			} catch {
+				return String(value);
+			}
+		}
+		return String(value);
+	};
+
 	$effect(() => {
 		if (!toolError && !toolDone && loading && loadingBarEl && eta) {
 			loadingBarEl.classList.remove("hidden");
@@ -50,10 +62,11 @@
 			showingLoadingBar = false;
 			loadingBarEl.classList.remove("hidden");
 			animation?.cancel();
-			animation = loadingBarEl.animate(
-				[{ width: loadingBarEl.style.width }, { width: "calc(100%+1rem)" }],
-				{ duration: 300, fill: "forwards" }
-			);
+			const fromWidth = getComputedStyle(loadingBarEl).width;
+			animation = loadingBarEl.animate([{ width: fromWidth }, { width: "calc(100%+1rem)" }], {
+				duration: 300,
+				fill: "forwards",
+			});
 			setTimeout(() => loadingBarEl?.classList.add("hidden"), 300);
 		}
 	});
@@ -111,10 +124,10 @@
 				</div>
 				<ul class="py-1 text-sm">
 					{#each Object.entries(update.call.parameters ?? {}) as [key, value]}
-						{#if value !== null}
+						{#if value != null}
 							<li>
 								<span class="font-semibold">{key}</span>:
-								<span>{value}</span>
+								<span class="whitespace-pre-wrap">{formatValue(value)}</span>
 							</li>
 						{/if}
 					{/each}
@@ -133,15 +146,23 @@
 				<ul class="py-1 text-sm">
 					{#each update.result.outputs as output}
 						{#each Object.entries(output) as [key, value]}
-							{#if value !== null}
+							{#if value != null}
 								<li>
 									<span class="font-semibold">{key}</span>:
-									<span>{value}</span>
+									<span class="whitespace-pre-wrap">{formatValue(value)}</span>
 								</li>
 							{/if}
 						{/each}
 					{/each}
 				</ul>
+			{:else if isMessageToolResultUpdate(update) && update.result.status === ToolResultStatus.Error && update.result.display}
+				<div class="mt-1 flex items-center gap-2 opacity-80">
+					<h3 class="text-sm text-red-600 dark:text-red-400">Error</h3>
+					<div class="h-px flex-1 bg-gradient-to-r from-red-500/20"></div>
+				</div>
+				<p class="whitespace-pre-wrap text-sm text-red-600 dark:text-red-400">
+					{update.result.message}
+				</p>
 			{/if}
 		{/each}
 	</details>
@@ -152,6 +173,15 @@
 		display: none;
 	}
 
+	@keyframes loading {
+		0% {
+			stroke-dashoffset: 61.45;
+		}
+		100% {
+			stroke-dashoffset: 0;
+		}
+	}
+
 	.loading-path {
 		stroke-dasharray: 61.45;
 		animation: loading 2s linear infinite;

src/lib/server/mcp/httpClient.ts

@@ -24,92 +24,62 @@ export async function callMcpTool(
 	args: unknown = {},
 	{ timeoutMs = DEFAULT_TIMEOUT_MS }: { timeoutMs?: number } = {}
 ): Promise<string> {
-	const controller = new AbortController();
-	const timeout = setTimeout(() => controller.abort(), timeoutMs);
-
-	const client = new Client({ name: "chat-ui-mcp", version: "0.1.0" });
 	const url = toUrl(server.url);
-
 	const normalizedArgs =
 		typeof args === "object" && args !== null && !Array.isArray(args)
 			? (args as Record<string, unknown>)
 			: undefined;
 
-	async function connectStreamable() {
-		const transport = new StreamableHTTPClientTransport(url, {
-			requestInit: { headers: server.headers },
-		});
+	async function connect(kind: "streamable" | "sse", signal: AbortSignal, client: Client) {
+		const requestInit: RequestInit = { headers: server.headers, signal };
+		const transport =
+			kind === "streamable"
+				? new StreamableHTTPClientTransport(url, { requestInit })
+				: new SSEClientTransport(url, { requestInit });
 		await client.connect(transport);
 	}
 
-	async function connectSse() {
-		const transport = new SSEClientTransport(url, {
-			requestInit: { headers: server.headers },
-		});
-		await client.connect(transport);
-	}
+	let lastError: unknown;
 
-	try {
-		let usingSse = false;
-		try {
-			await connectStreamable();
-		} catch {
-			await connectSse();
-			usingSse = true;
-		}
+	for (const kind of ["streamable", "sse"] as const) {
+		const controller = new AbortController();
+		const client = new Client({ name: "chat-ui-mcp", version: "0.1.0" });
+		const timeout = setTimeout(() => controller.abort(), timeoutMs);
 
-		const runTool = async () => client.callTool({ name: tool, arguments: normalizedArgs });
-		type CallToolResult = Awaited<ReturnType<typeof runTool>>;
+		try {
+			await connect(kind, controller.signal, client);
+			const response = await client.callTool({ name: tool, arguments: normalizedArgs });
+			const parts = Array.isArray(response?.content) ? (response.content as Array<unknown>) : [];
+			const textParts = parts
+				.filter((part): part is { type: "text"; text: string } => {
+					if (typeof part !== "object" || part === null) return false;
+					const candidate = part as { type?: unknown; text?: unknown };
+					return candidate.type === "text" && typeof candidate.text === "string";
+				})
+				.map((part) => part.text);
 
-		const raceWithTimeout = <T>(promise: Promise<T>) =>
-			Promise.race([
-				promise,
-				new Promise<never>((_, reject) => {
-					controller.signal.addEventListener(
-						"abort",
-						() => reject(new Error("MCP tool call timed out")),
-						{
-							once: true,
-						}
-					);
-				}),
-			]);
+			if (textParts.length > 0) {
+				return textParts.join("\n");
+			}
 
-		let response: CallToolResult;
-		try {
-			response = await raceWithTimeout(runTool());
+			return JSON.stringify(response);
 		} catch (error) {
-			if (usingSse) throw error;
+			lastError = error;
+			if (kind === "sse") {
+				throw error;
+			}
+		} finally {
+			clearTimeout(timeout);
+			controller.abort();
 			try {
 				await client.close?.();
 			} catch {
 				// ignore close errors
 			}
-			await connectSse();
-			usingSse = true;
-			response = await raceWithTimeout(runTool());
-		}
-
-		const parts = Array.isArray(response?.content) ? (response.content as Array<unknown>) : [];
-		const textParts = parts
-			.filter((part): part is { type: "text"; text: string } => {
-				if (typeof part !== "object" || part === null) return false;
-				const candidate = part as { type?: unknown; text?: unknown };
-				return candidate.type === "text" && typeof candidate.text === "string";
-			})
-			.map((part) => part.text);
-
-		if (textParts.length > 0) {
-			return textParts.join("\n");
-		}
-
-		return JSON.stringify(response);
-	} finally {
-		clearTimeout(timeout);
-		try {
-			await client.close?.();
-		} catch {
-			// ignore close errors
 		}
 	}
+
+	throw lastError instanceof Error
+		? lastError
+		: new Error(String(lastError ?? "MCP tool call failed"));
 }