feat: UI improvement

tools/server/webui/src/lib/components/app/mcp/McpServerCard/McpServerCard.svelte

@@ -12,7 +12,6 @@
 	import McpServerCardDeleteDialog from './McpServerCardDeleteDialog.svelte';
 	import McpServerInfo from './McpServerInfo.svelte';
 	import McpConnectionLogs from './McpConnectionLogs.svelte';
-	import Badge from '$lib/components/ui/badge/badge.svelte';
 
 	interface Props {
 		server: MCPServerSettingsEntry;
@@ -65,12 +64,6 @@
 	let showDeleteDialog = $state(false);
 	let editFormRef: McpServerCardEditForm | null = $state(null);
 
-	const transportLabels: Record<string, string> = {
-		websocket: 'WebSocket',
-		streamable_http: 'HTTP',
-		sse: 'SSE'
-	};
-
 	onMount(() => {
 		if (!mcpStore.hasHealthCheck(server.id) && server.enabled && server.url.trim()) {
 			mcpClient.runHealthCheck(server);
@@ -128,6 +121,7 @@
 			{onToggle}
 			{serverInfo}
 			{capabilities}
+			{transportType}
 		/>
 
 		{#if isError && errorMessage}
@@ -155,19 +149,11 @@
 		</div>
 
 		<div class="mt-4 flex justify-between gap-4">
-			{#if transportType || protocolVersion}
+			{#if protocolVersion}
 				<div class="flex flex-wrap items-center gap-1">
-					{#if transportType}
-						<Badge variant="outline" class="h-5 gap-1 px-1.5 text-[10px]">
-							{transportLabels[transportType] || transportType}
-						</Badge>
-					{/if}
-
-					{#if protocolVersion}
-						<Badge variant="outline" class="h-5 gap-1 px-1.5 text-[10px]">
-							MCP {protocolVersion}
-						</Badge>
-					{/if}
+					<span class="text-[10px] text-muted-foreground">
+						Protocol version: {protocolVersion}
+					</span>
 				</div>
 			{/if}
 

tools/server/webui/src/lib/components/app/mcp/McpServerCard/McpServerCardHeader.svelte

@@ -2,6 +2,7 @@
 	import { Cable, ExternalLink } from '@lucide/svelte';
 	import { Switch } from '$lib/components/ui/switch';
 	import type { MCPServerInfo, MCPCapabilitiesInfo } from '$lib/types';
+	import { MCPTransportType } from '$lib/enums';
 	import { Badge } from '$lib/components/ui/badge';
 	import McpCapabilitiesBadges from './McpCapabilitiesBadges.svelte';
 
@@ -12,9 +13,24 @@
 		onToggle: (enabled: boolean) => void;
 		serverInfo?: MCPServerInfo;
 		capabilities?: MCPCapabilitiesInfo;
+		transportType?: MCPTransportType;
 	}
 
-	let { displayName, faviconUrl, enabled, onToggle, serverInfo, capabilities }: Props = $props();
+	let {
+		displayName,
+		faviconUrl,
+		enabled,
+		onToggle,
+		serverInfo,
+		capabilities,
+		transportType
+	}: Props = $props();
+
+	const transportLabels: Record<MCPTransportType, string> = {
+		[MCPTransportType.Websocket]: 'WebSocket',
+		[MCPTransportType.StreamableHttp]: 'HTTP',
+		[MCPTransportType.SSE]: 'SSE'
+	};
 </script>
 
 <div class="space-y-3">
@@ -59,8 +75,18 @@
 				{/if}
 			</div>
 
-			{#if capabilities}
-				<McpCapabilitiesBadges {capabilities} />
+			{#if capabilities || transportType}
+				<div class="flex flex-wrap items-center gap-1">
+					{#if transportType}
+						<Badge variant="outline" class="h-5 gap-1 px-1.5 text-[10px]">
+							{transportLabels[transportType] || transportType}
+						</Badge>
+					{/if}
+
+					{#if capabilities}
+						<McpCapabilitiesBadges {capabilities} />
+					{/if}
+				</div>
 			{/if}
 		</div>