feat: UI improvements

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Cable, ExternalLink } from '@lucide/svelte';
+	import { Cable, ExternalLink, Globe, Zap, Radio } from '@lucide/svelte';
 	import { Switch } from '$lib/components/ui/switch';
 	import type { MCPServerInfo, MCPCapabilitiesInfo } from '$lib/types';
 	import { MCPTransportType } from '$lib/enums';
@@ -31,6 +31,12 @@
 		[MCPTransportType.StreamableHttp]: 'HTTP',
 		[MCPTransportType.SSE]: 'SSE'
 	};
+
+	const transportIcons: Record<MCPTransportType, typeof Cable> = {
+		[MCPTransportType.Websocket]: Zap,
+		[MCPTransportType.StreamableHttp]: Globe,
+		[MCPTransportType.SSE]: Radio
+	};
 </script>
 
 <div class="space-y-3">
@@ -78,7 +84,11 @@
 			{#if capabilities || transportType}
 				<div class="flex flex-wrap items-center gap-1">
 					{#if transportType}
+						{@const TransportIcon = transportIcons[transportType]}
 						<Badge variant="outline" class="h-5 gap-1 px-1.5 text-[10px]">
+							{#if TransportIcon}
+								<TransportIcon class="h-3 w-3" />
+							{/if}
 							{transportLabels[transportType] || transportType}
 						</Badge>
 					{/if}

tools/server/webui/src/lib/components/app/models/ModelsSelector.svelte

@@ -370,7 +370,7 @@
 										: 'text-muted-foreground',
 							isOpen ? 'text-foreground' : ''
 						)}
-						style="max-width: min(calc(100cqw - 6.5rem), 20rem)"
+						style="max-width: min(calc(100cqw - 11.5rem), 20rem)"
 						disabled={disabled || updating}
 					>
 						<Package class="h-3.5 w-3.5" />