From 43da6b86769a089e25305d17883ea13df756af33 Mon Sep 17 00:00:00 2001
From: Aleksander Grygier <aleksander.grygier@gmail.com>
Date: Fri, 23 Jan 2026 15:09:50 +0100
Subject: [PATCH] feat: UI improvements

---
 .../app/chat/ChatForm/ChatForm.svelte         |   4 +-
 .../ChatFormActionFileAttachments.svelte      |   9 +-
 .../ChatFormActions/ChatFormActions.svelte    |  10 +-
 .../webui/src/lib/components/app/index.ts     |   1 +
 .../app/mcp/McpActiveServersAvatars.svelte    |  67 ++++++++
 .../lib/components/app/mcp/McpSelector.svelte | 160 ++++++++----------
 .../mcp/McpServerCard/McpServerCard.svelte    |   5 +-
 .../McpServerCard/McpServerCardActions.svelte |   4 +-
 .../app/mcp/McpSettingsSection.svelte         |  70 ++++++--
 .../components/app/misc/SearchInput.svelte    |   2 +-
 .../app/misc/SearchableDropdownMenu.svelte    |   2 +-
 .../app/models/ModelsSelector.svelte          |   4 +-
 .../lib/components/ui/button/button.svelte    |   3 +-
 .../server/webui/src/lib/stores/mcp.svelte.ts |  36 +++-
 14 files changed, 252 insertions(+), 125 deletions(-)
 create mode 100644 tools/server/webui/src/lib/components/app/mcp/McpActiveServersAvatars.svelte

diff --git a/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatForm.svelte b/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatForm.svelte
index 7e469682c2..768c9f5b4f 100644
--- a/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatForm.svelte
+++ b/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatForm.svelte
@@ -304,11 +304,11 @@
 	/>
 
 	<div
-		class="flex-column relative min-h-[48px] items-center rounded-3xl px-5 py-3 shadow-sm transition-all focus-within:shadow-md"
+			class="flex-column relative min-h-[48px] items-center rounded-3xl p-2 pb-2.25 shadow-sm transition-all focus-within:shadow-md md:!p-3"
 		onpaste={handlePaste}
 	>
 		<ChatFormTextarea
-			bind:this={textareaRef}
+				class="px-2 py-1 md:py-0"
 			bind:value={message}
 			onKeydown={handleKeydown}
 			{disabled}
diff --git a/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionFileAttachments.svelte b/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionFileAttachments.svelte
index fee3946de6..0b9822351f 100644
--- a/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionFileAttachments.svelte
+++ b/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionFileAttachments.svelte
@@ -33,11 +33,7 @@
 		onMcpServersClick?.();
 	}
 
-	const fileUploadTooltipText = $derived.by(() => {
-		return !hasVisionModality
-			? 'Text files and PDFs supported. Images, audio, and video require vision models.'
-			: 'Add files, prompts and MCP Servers';
-	});
+	const fileUploadTooltipText = 'Add files, system prompt or MCP Servers';
 </script>
 
 <div class="flex items-center gap-1 {className}">
@@ -46,8 +42,9 @@
 			<Tooltip.Root>
 				<Tooltip.Trigger>
 					<Button
-						class="file-upload-button h-8 w-8 rounded-full bg-transparent p-0 text-muted-foreground hover:bg-foreground/10 hover:text-foreground"
+						class="file-upload-button h-8 w-8 rounded-full p-0"
 						{disabled}
+						variant="secondary"
 						type="button"
 					>
 						<span class="sr-only">{fileUploadTooltipText}</span>
diff --git a/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActions.svelte b/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActions.svelte
index 95a2aff67f..c68dc7dc2c 100644
--- a/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActions.svelte
+++ b/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActions.svelte
@@ -6,7 +6,7 @@
 		ChatFormActionRecord,
 		ChatFormActionSubmit,
 		DialogMcpServersSettings,
-		McpSelector,
+		McpActiveServersAvatars,
 		ModelsSelector
 	} from '$lib/components/app';
 	import { FileTypeCategory } from '$lib/enums';
@@ -16,7 +16,6 @@
 	import { isRouterMode } from '$lib/stores/server.svelte';
 	import { chatStore } from '$lib/stores/chat.svelte';
 	import { activeMessages } from '$lib/stores/conversations.svelte';
-	import { mcpStore } from '$lib/stores/mcp.svelte';
 
 	interface Props {
 		canSend?: boolean;
@@ -158,11 +157,10 @@
 	}
 
 	let showMcpDialog = $state(false);
-	let hasAvailableMcpServers = $derived(mcpStore.hasAvailableServers());
 </script>
 
 <div class="flex w-full items-center gap-3 {className}" style="container-type: inline-size">
-	<div class="mr-auto flex items-center gap-1.5">
+	<div class="mr-auto flex items-center gap-2">
 		<ChatFormActionFileAttachments
 			{disabled}
 			{hasAudioModality}
@@ -172,9 +170,7 @@
 			onMcpServersClick={() => (showMcpDialog = true)}
 		/>
 
-		{#if hasAvailableMcpServers}
-			<McpSelector {disabled} onSettingsClick={() => (showMcpDialog = true)} />
-		{/if}
+		<McpActiveServersAvatars {disabled} onSettingsClick={() => (showMcpDialog = true)} />
 	</div>
 
 	<div class="ml-auto flex items-center gap-1.5">
diff --git a/tools/server/webui/src/lib/components/app/index.ts b/tools/server/webui/src/lib/components/app/index.ts
index 2f80665113..58918e052d 100644
--- a/tools/server/webui/src/lib/components/app/index.ts
+++ b/tools/server/webui/src/lib/components/app/index.ts
@@ -79,6 +79,7 @@ export { default as ModelsSelector } from './models/ModelsSelector.svelte';
 
 // MCP
 
+export { default as McpActiveServersAvatars } from './mcp/McpActiveServersAvatars.svelte';
 export { default as McpSelector } from './mcp/McpSelector.svelte';
 export { default as McpSettingsSection } from './mcp/McpSettingsSection.svelte';
 
diff --git a/tools/server/webui/src/lib/components/app/mcp/McpActiveServersAvatars.svelte b/tools/server/webui/src/lib/components/app/mcp/McpActiveServersAvatars.svelte
new file mode 100644
index 0000000000..b22e928a26
--- /dev/null
+++ b/tools/server/webui/src/lib/components/app/mcp/McpActiveServersAvatars.svelte
@@ -0,0 +1,67 @@
+<script lang="ts">
+	import { cn } from '$lib/components/ui/utils';
+	import { conversationsStore } from '$lib/stores/conversations.svelte';
+	import { mcpStore } from '$lib/stores/mcp.svelte';
+	import { getFaviconUrl } from '$lib/utils/mcp';
+	import { HealthCheckStatus } from '$lib/enums';
+
+	interface Props {
+		class?: string;
+		disabled?: boolean;
+		onSettingsClick?: () => void;
+	}
+
+	let { class: className = '', disabled = false, onSettingsClick }: Props = $props();
+
+	let mcpServers = $derived(mcpStore.getServersSorted().filter((s) => s.enabled));
+	let enabledMcpServersForChat = $derived(
+		mcpServers.filter((s) => conversationsStore.isMcpServerEnabledForChat(s.id) && s.url.trim())
+	);
+	let healthyEnabledMcpServers = $derived(
+		enabledMcpServersForChat.filter((s) => {
+			const healthState = mcpStore.getHealthCheckState(s.id);
+			return healthState.status !== HealthCheckStatus.Error;
+		})
+	);
+	let hasEnabledMcpServers = $derived(enabledMcpServersForChat.length > 0);
+	let extraServersCount = $derived(Math.max(0, healthyEnabledMcpServers.length - 3));
+	let mcpFavicons = $derived(
+		healthyEnabledMcpServers
+			.slice(0, 3)
+			.map((s) => ({ id: s.id, url: getFaviconUrl(s.url) }))
+			.filter((f) => f.url !== null)
+	);
+</script>
+
+{#if hasEnabledMcpServers && mcpFavicons.length > 0}
+	<button
+		type="button"
+		class={cn(
+			'inline-flex items-center gap-1.5 rounded-sm py-1',
+			disabled ? 'cursor-not-allowed opacity-60' : 'cursor-pointer',
+			className
+		)}
+		onclick={onSettingsClick}
+		{disabled}
+		aria-label="MCP Servers"
+	>
+		<div class="flex -space-x-1">
+			{#each mcpFavicons as favicon (favicon.id)}
+				<div class="box-shadow-lg overflow-hidden rounded-full bg-muted ring-1 ring-muted">
+					<img
+						src={favicon.url}
+						alt=""
+						class="h-4 w-4"
+						onerror={(e) => {
+							(e.currentTarget as HTMLImageElement).style.display = 'none';
+						}}
+					/>
+				</div>
+			{/each}
+		</div>
+
+		{#if extraServersCount > 0}
+			<span class="text-xs text-muted-foreground">+{extraServersCount}</span>
+		{/if}
+	</button>
+{/if}
diff --git a/tools/server/webui/src/lib/components/app/mcp/McpSelector.svelte b/tools/server/webui/src/lib/components/app/mcp/McpSelector.svelte
index b94aaf7101..3c3d156b65 100644
--- a/tools/server/webui/src/lib/components/app/mcp/McpSelector.svelte
+++ b/tools/server/webui/src/lib/components/app/mcp/McpSelector.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
 	import { ChevronDown, Settings } from '@lucide/svelte';
+	import { Skeleton } from '$lib/components/ui/skeleton';
 	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
 	import { Switch } from '$lib/components/ui/switch';
 	import { cn } from '$lib/components/ui/utils';
 	import { SearchableDropdownMenu } from '$lib/components/app';
 	import McpLogo from '$lib/components/app/misc/McpLogo.svelte';
-	import { settingsStore } from '$lib/stores/settings.svelte';
 	import { conversationsStore } from '$lib/stores/conversations.svelte';
-	import { parseMcpServerSettings, getMcpServerLabel, getFaviconUrl } from '$lib/utils/mcp';
+	import { getMcpServerLabel, getFaviconUrl } from '$lib/utils/mcp';
 	import type { MCPServerSettingsEntry } from '$lib/types';
 	import { HealthCheckStatus } from '$lib/enums';
 	import { mcpStore } from '$lib/stores/mcp.svelte';
@@ -22,75 +22,41 @@
 	let { class: className = '', disabled = false, onSettingsClick }: Props = $props();
 
 	let searchQuery = $state('');
-
-	// Only show servers that are enabled in settings (available for use)
-	let mcpServers = $derived.by(() => {
-		return parseMcpServerSettings(settingsStore.config.mcpServers).filter((s) => s.enabled);
-	});
-
+	let mcpServers = $derived(mcpStore.getServersSorted().filter((s) => s.enabled));
 	let hasMcpServers = $derived(mcpServers.length > 0);
-
-	let mcpUsageStats = $derived(mcpStore.getUsageStats());
-
-	function getServerUsageCount(serverId: string): number {
-		return mcpUsageStats[serverId] || 0;
-	}
-
-	function isServerEnabledForChat(serverId: string): boolean {
-		return conversationsStore.isMcpServerEnabledForChat(serverId);
-	}
-
-	function getServerLabel(server: MCPServerSettingsEntry): string {
-		return getMcpServerLabel(server, mcpStore.getHealthCheckState(server.id));
-	}
-
+	let isLoading = $derived(mcpStore.isAnyServerLoading());
 	let enabledMcpServersForChat = $derived(
 		mcpServers.filter((s) => isServerEnabledForChat(s.id) && s.url.trim())
 	);
-
 	let healthyEnabledMcpServers = $derived(
 		enabledMcpServersForChat.filter((s) => {
 			const healthState = mcpStore.getHealthCheckState(s.id);
 			return healthState.status !== 'error';
 		})
 	);
-
 	let hasEnabledMcpServers = $derived(enabledMcpServersForChat.length > 0);
-
-	let sortedMcpServers = $derived(
-		[...mcpServers].sort((a, b) => {
-			// First: enabled for chat servers come first
-			const aEnabled = isServerEnabledForChat(a.id);
-			const bEnabled = isServerEnabledForChat(b.id);
-			if (aEnabled !== bEnabled) return aEnabled ? -1 : 1;
-
-			// Then sort by usage count (descending)
-			const usageA = getServerUsageCount(a.id);
-			const usageB = getServerUsageCount(b.id);
-			if (usageB !== usageA) return usageB - usageA;
-
-			// Then alphabetically by name
-			return getServerLabel(a).localeCompare(getServerLabel(b));
-		})
-	);
-
-	let filteredMcpServers = $derived(() => {
+	let extraServersCount = $derived(Math.max(0, healthyEnabledMcpServers.length - 3));
+	let filteredMcpServers = $derived.by(() => {
 		const query = searchQuery.toLowerCase().trim();
 		if (query) {
-			return sortedMcpServers.filter((s) => {
+			return mcpServers.filter((s) => {
 				const name = getServerLabel(s).toLowerCase();
 				const url = s.url.toLowerCase();
 				return name.includes(query) || url.includes(query);
 			});
 		}
 
-		return sortedMcpServers.slice(0, 4);
+		return mcpServers;
 	});
+	let mcpFavicons = $derived(
+		healthyEnabledMcpServers
+			.slice(0, 3)
+			.map((s) => ({ id: s.id, url: getFaviconUrl(s.url) }))
+			.filter((f) => f.url !== null)
+	);
 
-	let extraServersCount = $derived(Math.max(0, healthyEnabledMcpServers.length - 3));
-
-	async function toggleServerForChat(serverId: string) {
-		await conversationsStore.toggleMcpServerForChat(serverId);
+	function getServerLabel(server: MCPServerSettingsEntry): string {
+		return getMcpServerLabel(server, mcpStore.getHealthCheckState(server.id));
 	}
 
 	function handleDropdownOpen(open: boolean) {
@@ -99,12 +65,13 @@
 		}
 	}
 
-	let mcpFavicons = $derived(
-		healthyEnabledMcpServers
-			.slice(0, 3)
-			.map((s) => ({ id: s.id, url: getFaviconUrl(s.url) }))
-			.filter((f) => f.url !== null)
-	);
+	function isServerEnabledForChat(serverId: string): boolean {
+		return conversationsStore.isMcpServerEnabledForChat(serverId);
+	}
+
+	async function toggleServerForChat(serverId: string) {
+		await conversationsStore.toggleMcpServerForChat(serverId);
+	}
 </script>
 
 {#if hasMcpServers}
@@ -112,7 +79,7 @@
 		bind:searchValue={searchQuery}
 		placeholder="Search servers..."
 		emptyMessage="No servers found"
-		isEmpty={filteredMcpServers().length === 0}
+		isEmpty={filteredMcpServers.length === 0}
 		{disabled}
 		onOpenChange={handleDropdownOpen}
 	>
@@ -154,37 +121,58 @@
 			</button>
 		{/snippet}
 
-		{#each filteredMcpServers() as server (server.id)}
-			{@const healthState = mcpStore.getHealthCheckState(server.id)}
-			{@const hasError = healthState.status === HealthCheckStatus.Error}
-			{@const isEnabledForChat = isServerEnabledForChat(server.id)}
+		<div class="max-h-64 overflow-y-auto">
+			{#if isLoading}
+				{#each mcpServers as server (server.id)}
+					<div class="flex items-center justify-between gap-2 px-2 py-2">
+						<div class="flex min-w-0 flex-1 items-center gap-2">
+							<Skeleton class="h-4 w-4 shrink-0 rounded-sm" />
+							<Skeleton class="h-4 w-24" />
+						</div>
+						<Skeleton class="h-5 w-9 rounded-full" />
+					</div>
+				{/each}
+			{:else}
+				{#each filteredMcpServers as server (server.id)}
+					{@const healthState = mcpStore.getHealthCheckState(server.id)}
+					{@const hasError = healthState.status === HealthCheckStatus.Error}
+					{@const isEnabledForChat = isServerEnabledForChat(server.id)}
 
-			<div class="flex items-center justify-between gap-2 px-2 py-2">
-				<div class="flex min-w-0 flex-1 items-center gap-2">
-					{#if getFaviconUrl(server.url)}
-						<img
-							src={getFaviconUrl(server.url)}
-							alt=""
-							class="h-4 w-4 shrink-0 rounded-sm"
-							onerror={(e) => {
-								(e.currentTarget as HTMLImageElement).style.display = 'none';
-							}}
+					<button
+						type="button"
+						class="flex w-full items-center justify-between gap-2 px-2 py-2 text-left transition-colors hover:bg-accent disabled:cursor-not-allowed disabled:opacity-50"
+						onclick={() => !hasError && toggleServerForChat(server.id)}
+						disabled={hasError}
+					>
+						<div class="flex min-w-0 flex-1 items-center gap-2">
+							{#if getFaviconUrl(server.url)}
+								<img
+									src={getFaviconUrl(server.url)}
+									alt=""
+									class="h-4 w-4 shrink-0 rounded-sm"
+									onerror={(e) => {
+										(e.currentTarget as HTMLImageElement).style.display = 'none';
+									}}
+								/>
+							{/if}
+							<span class="truncate text-sm">{getServerLabel(server)}</span>
+							{#if hasError}
+								<span
+									class="shrink-0 rounded bg-destructive/15 px-1.5 py-0.5 text-xs text-destructive"
+									>Error</span
+								>
+							{/if}
+						</div>
+						<Switch
+							checked={isEnabledForChat}
+							disabled={hasError}
+							onclick={(e: MouseEvent) => e.stopPropagation()}
+							onCheckedChange={() => toggleServerForChat(server.id)}
 						/>
-					{/if}
-					<span class="truncate text-sm">{getServerLabel(server)}</span>
-					{#if hasError}
-						<span class="shrink-0 rounded bg-destructive/15 px-1.5 py-0.5 text-xs text-destructive"
-							>Error</span
-						>
-					{/if}
-				</div>
-				<Switch
-					checked={isEnabledForChat}
-					onCheckedChange={() => toggleServerForChat(server.id)}
-					disabled={hasError}
-				/>
-			</div>
-		{/each}
+					</button>
+				{/each}
+			{/if}
+		</div>
 
 		{#snippet footer()}
 			<DropdownMenu.Item class="flex cursor-pointer items-center gap-2" onclick={onSettingsClick}>
diff --git a/tools/server/webui/src/lib/components/app/mcp/McpServerCard/McpServerCard.svelte b/tools/server/webui/src/lib/components/app/mcp/McpServerCard/McpServerCard.svelte
index c44249acc9..e39a11d341 100644
--- a/tools/server/webui/src/lib/components/app/mcp/McpServerCard/McpServerCard.svelte
+++ b/tools/server/webui/src/lib/components/app/mcp/McpServerCard/McpServerCard.svelte
@@ -18,12 +18,13 @@
 	interface Props {
 		server: MCPServerSettingsEntry;
 		faviconUrl: string | null;
+		enabled?: boolean;
 		onToggle: (enabled: boolean) => void;
 		onUpdate: (updates: Partial<MCPServerSettingsEntry>) => void;
 		onDelete: () => void;
 	}
 
-	let { server, faviconUrl, onToggle, onUpdate, onDelete }: Props = $props();
+	let { server, faviconUrl, enabled, onToggle, onUpdate, onDelete }: Props = $props();
 
 	let healthState = $derived<HealthCheckState>(mcpStore.getHealthCheckState(server.id));
 	let displayName = $derived(getMcpServerLabel(server, healthState));
@@ -116,7 +117,7 @@
 		<McpServerCardHeader
 			{displayName}
 			{faviconUrl}
-			enabled={server.enabled}
+			enabled={enabled ?? server.enabled}
 			{onToggle}
 			{serverInfo}
 			{capabilities}
diff --git a/tools/server/webui/src/lib/components/app/mcp/McpServerCard/McpServerCardActions.svelte b/tools/server/webui/src/lib/components/app/mcp/McpServerCard/McpServerCardActions.svelte
index 9abacf149f..6f137fa21b 100644
--- a/tools/server/webui/src/lib/components/app/mcp/McpServerCard/McpServerCardActions.svelte
+++ b/tools/server/webui/src/lib/components/app/mcp/McpServerCard/McpServerCardActions.svelte
@@ -16,6 +16,7 @@
 	<Button variant="ghost" size="icon" class="h-7 w-7" onclick={onEdit} aria-label="Edit">
 		<Pencil class="h-3.5 w-3.5" />
 	</Button>
+
 	<Button
 		variant="ghost"
 		size="icon"
@@ -26,10 +27,11 @@
 	>
 		<RefreshCw class="h-3.5 w-3.5" />
 	</Button>
+
 	<Button
 		variant="ghost"
 		size="icon"
-		class="hover:text-destructive-foreground h-7 w-7 text-destructive hover:bg-destructive"
+		class="hover:text-destructive-foreground h-7 w-7 text-destructive hover:bg-destructive/10"
 		onclick={onDelete}
 		aria-label="Delete"
 	>
diff --git a/tools/server/webui/src/lib/components/app/mcp/McpSettingsSection.svelte b/tools/server/webui/src/lib/components/app/mcp/McpSettingsSection.svelte
index 7f4bf4b10d..908d5c63a1 100644
--- a/tools/server/webui/src/lib/components/app/mcp/McpSettingsSection.svelte
+++ b/tools/server/webui/src/lib/components/app/mcp/McpSettingsSection.svelte
@@ -3,13 +3,16 @@
 	import { Button } from '$lib/components/ui/button';
 	import * as Card from '$lib/components/ui/card';
 	import { getFaviconUrl } from '$lib/utils/mcp';
-	import type { MCPServerSettingsEntry } from '$lib/types';
 	import { mcpStore } from '$lib/stores/mcp.svelte';
+	import { conversationsStore } from '$lib/stores/conversations.svelte';
 	import { McpServerCard } from '$lib/components/app/mcp/McpServerCard';
 	import McpServerForm from './McpServerForm.svelte';
+	import { Skeleton } from '$lib/components/ui/skeleton';
 
-	// Get servers from store
-	let servers = $derived<MCPServerSettingsEntry[]>(mcpStore.getServers());
+	// Use store methods for consistent sorting logic
+	let rawServers = $derived(mcpStore.getServers());
+	let servers = $derived(mcpStore.getServersSorted());
+	let isLoading = $derived(mcpStore.isAnyServerLoading());
 
 	// New server form state
 	let isAddingServer = $state(false);
@@ -112,17 +115,58 @@
 		</div>
 	{/if}
 
-	{#if servers.length > 0}
+	{#if rawServers.length > 0}
 		<div class="space-y-3">
-			{#each servers as server (server.id)}
-				<McpServerCard
-					{server}
-					faviconUrl={getFaviconUrl(server.url)}
-					onToggle={(enabled) => mcpStore.updateServer(server.id, { enabled })}
-					onUpdate={(updates) => mcpStore.updateServer(server.id, updates)}
-					onDelete={() => mcpStore.removeServer(server.id)}
-				/>
-			{/each}
+			{#if isLoading}
+				<!-- Show skeleton cards while health checks are in progress -->
+				{#each rawServers as server (server.id)}
+					<Card.Root class="grid gap-3 p-4">
+						<!-- Header: favicon + name + version ... toggle -->
+						<div class="flex items-center justify-between gap-4">
+							<div class="flex items-center gap-2">
+								<Skeleton class="h-5 w-5 rounded" />
+								<Skeleton class="h-5 w-28" />
+								<Skeleton class="h-5 w-12 rounded-full" />
+							</div>
+							<Skeleton class="h-6 w-11 rounded-full" />
+						</div>
+
+						<!-- Capability badges -->
+						<div class="flex flex-wrap gap-1.5">
+							<Skeleton class="h-5 w-14 rounded-full" />
+							<Skeleton class="h-5 w-12 rounded-full" />
+							<Skeleton class="h-5 w-16 rounded-full" />
+						</div>
+
+						<!-- Tools & Connection info -->
+						<div class="space-y-1.5">
+							<Skeleton class="h-4 w-40" />
+							<Skeleton class="h-4 w-52" />
+						</div>
+
+						<!-- Protocol version -->
+						<Skeleton class="h-3.5 w-36" />
+
+						<!-- Action buttons -->
+						<div class="flex justify-end gap-2">
+							<Skeleton class="h-8 w-8 rounded" />
+							<Skeleton class="h-8 w-8 rounded" />
+							<Skeleton class="h-8 w-8 rounded" />
+						</div>
+					</Card.Root>
+				{/each}
+			{:else}
+				{#each servers as server (server.id)}
+					<McpServerCard
+						{server}
+						faviconUrl={getFaviconUrl(server.url)}
+						enabled={conversationsStore.isMcpServerEnabledForChat(server.id)}
+						onToggle={async () => await conversationsStore.toggleMcpServerForChat(server.id)}
+						onUpdate={(updates) => mcpStore.updateServer(server.id, updates)}
+						onDelete={() => mcpStore.removeServer(server.id)}
+					/>
+				{/each}
+			{/if}
 		</div>
 	{/if}
 </div>
diff --git a/tools/server/webui/src/lib/components/app/misc/SearchInput.svelte b/tools/server/webui/src/lib/components/app/misc/SearchInput.svelte
index 15cd6abaa9..9a8088d9da 100644
--- a/tools/server/webui/src/lib/components/app/misc/SearchInput.svelte
+++ b/tools/server/webui/src/lib/components/app/misc/SearchInput.svelte
@@ -46,7 +46,7 @@
 
 <div class="relative {className}">
 	<Search
-		class="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 transform text-muted-foreground"
+		class="absolute top-1/2 left-3 z-10 h-4 w-4 -translate-y-1/2 transform text-muted-foreground"
 	/>
 
 	<Input
diff --git a/tools/server/webui/src/lib/components/app/misc/SearchableDropdownMenu.svelte b/tools/server/webui/src/lib/components/app/misc/SearchableDropdownMenu.svelte
index cd798fc028..94ab8f320d 100644
--- a/tools/server/webui/src/lib/components/app/misc/SearchableDropdownMenu.svelte
+++ b/tools/server/webui/src/lib/components/app/misc/SearchableDropdownMenu.svelte
@@ -85,7 +85,7 @@
 			/>
 		</div>
 
-		<div class={cn('overflow-y-auto', 'max-h-[--bits-dropdown-menu-content-available-height]')}>
+		<div class={cn('overflow-y-auto', 'max-h-[10rem]')}>
 			{@render children()}
 
 			{#if isEmpty}
diff --git a/tools/server/webui/src/lib/components/app/models/ModelsSelector.svelte b/tools/server/webui/src/lib/components/app/models/ModelsSelector.svelte
index 7e183bd979..cdbb294125 100644
--- a/tools/server/webui/src/lib/components/app/models/ModelsSelector.svelte
+++ b/tools/server/webui/src/lib/components/app/models/ModelsSelector.svelte
@@ -277,7 +277,7 @@
 					<button
 						type="button"
 						class={cn(
-							`inline-flex cursor-pointer items-center gap-1.5 rounded-sm bg-muted-foreground/10 px-1.5 py-1 text-xs transition hover:text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-60`,
+							`inline-grid cursor-pointer grid-cols-[1fr_auto_1fr] items-center gap-1.5 rounded-sm bg-muted-foreground/10 px-1.5 py-1 text-xs transition hover:text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-60`,
 							!isCurrentModelInCache()
 								? 'bg-red-400/10 !text-red-400 hover:bg-red-400/20 hover:text-red-400'
 								: forceForegroundText
@@ -287,7 +287,7 @@
 										: 'text-muted-foreground',
 							isOpen ? 'text-foreground' : ''
 						)}
-						style="max-width: min(calc(100cqw - 11.5rem), 20rem)"
+						style="max-width: min(calc(100cqw - 9rem), 20rem)"
 						disabled={disabled || updating}
 					>
 						<Package class="h-3.5 w-3.5" />
diff --git a/tools/server/webui/src/lib/components/ui/button/button.svelte b/tools/server/webui/src/lib/components/ui/button/button.svelte
index d29358c8e0..e1171b3286 100644
--- a/tools/server/webui/src/lib/components/ui/button/button.svelte
+++ b/tools/server/webui/src/lib/components/ui/button/button.svelte
@@ -12,8 +12,7 @@
 					'bg-destructive shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 text-white',
 				outline:
 					'bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border',
-				secondary:
-					'dark:bg-secondary dark:text-secondary-foreground bg-background shadow-sm text-foreground hover:bg-muted-foreground/20',
+				secondary: 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
 				ghost: 'hover:text-accent-foreground hover:bg-muted-foreground/10',
 				link: 'text-primary underline-offset-4 hover:underline'
 			},
diff --git a/tools/server/webui/src/lib/stores/mcp.svelte.ts b/tools/server/webui/src/lib/stores/mcp.svelte.ts
index e54c3fa2ff..2f296860ac 100644
--- a/tools/server/webui/src/lib/stores/mcp.svelte.ts
+++ b/tools/server/webui/src/lib/stores/mcp.svelte.ts
@@ -22,7 +22,8 @@
 import { mcpClient } from '$lib/clients/mcp.client';
 import type { HealthCheckState, MCPServerSettingsEntry, McpServerUsageStats } from '$lib/types';
 import type { McpServerOverride } from '$lib/types/database';
-import { buildMcpClientConfig, parseMcpServerSettings } from '$lib/utils/mcp';
+import { buildMcpClientConfig, parseMcpServerSettings, getMcpServerLabel } from '$lib/utils/mcp';
+import { HealthCheckStatus } from '$lib/enums';
 import { config, settingsStore } from '$lib/stores/settings.svelte';
 import { DEFAULT_MCP_CONFIG } from '$lib/constants/mcp';
 
@@ -165,12 +166,43 @@ class MCPStore {
 	 */
 
 	/**
-	 * Get all configured MCP servers from settings
+	 * Get all configured MCP servers from settings (unsorted).
 	 */
 	getServers(): MCPServerSettingsEntry[] {
 		return parseMcpServerSettings(config().mcpServers);
 	}
 
+	/**
+	 * Check if any server is still loading (idle or connecting).
+	 */
+	isAnyServerLoading(): boolean {
+		const servers = this.getServers();
+		return servers.some((s) => {
+			const state = this.getHealthCheckState(s.id);
+			return state.status === HealthCheckStatus.Idle || state.status === HealthCheckStatus.Connecting;
+		});
+	}
+
+	/**
+	 * Get servers sorted alphabetically by display label.
+	 * Returns unsorted list while health checks are in progress to prevent UI jumping.
+	 */
+	getServersSorted(): MCPServerSettingsEntry[] {
+		const servers = this.getServers();
+		
+		// Don't sort while any server is still loading - prevents UI jumping
+		if (this.isAnyServerLoading()) {
+			return servers;
+		}
+		
+		// Sort alphabetically by display label once all health checks are done
+		return [...servers].sort((a, b) => {
+			const labelA = getMcpServerLabel(a, this.getHealthCheckState(a.id));
+			const labelB = getMcpServerLabel(b, this.getHealthCheckState(b.id));
+			return labelA.localeCompare(labelB);
+		});
+	}
+
 	/**
 	 * Add a new MCP server
 	 */