feat: Mcp Server Selector

tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActions.svelte

@@ -6,7 +6,7 @@
 		ChatFormActionRecord,
 		ChatFormActionSubmit,
 		DialogMcpServersSettings,
-		McpActiveServersAvatars,
+		McpServerSelector,
 		ModelsSelector
 	} from '$lib/components/app';
 	import { mcpStore } from '$lib/stores/mcp.svelte';
@@ -180,7 +180,7 @@
 			onMcpServersClick={() => (showMcpDialog = true)}
 		/>
 
-		<McpActiveServersAvatars {disabled} onSettingsClick={() => (showMcpDialog = true)} />
+		<McpServerSelector {disabled} onSettingsClick={() => (showMcpDialog = true)} />
 	</div>
 
 	<div class="ml-auto flex items-center gap-1.5">

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

@@ -7,11 +7,9 @@
 
 	interface Props {
 		class?: string;
-		disabled?: boolean;
-		onSettingsClick?: () => void;
 	}
 
-	let { class: className = '', disabled = false, onSettingsClick }: Props = $props();
+	let { class: className = '' }: Props = $props();
 
 	let mcpServers = $derived(mcpStore.getServersSorted().filter((s) => s.enabled));
 	let enabledMcpServersForChat = $derived(
@@ -34,17 +32,7 @@
 </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={cn('inline-flex items-center gap-1.5', className)}>
 		<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">
@@ -63,5 +51,5 @@
 		{#if extraServersCount > 0}
 			<span class="text-xs text-muted-foreground">+{extraServersCount}</span>
 		{/if}
-	</button>
+	</div>
 {/if}

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

@@ -0,0 +1,139 @@
+<script lang="ts">
+	import { Settings } from '@lucide/svelte';
+	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
+	import { Switch } from '$lib/components/ui/switch';
+	import { DropdownMenuSearchable, McpActiveServersAvatars } from '$lib/components/app';
+	import { conversationsStore } from '$lib/stores/conversations.svelte';
+	import { mcpStore } from '$lib/stores/mcp.svelte';
+	import { mcpClient } from '$lib/clients/mcp.client';
+	import { getFaviconUrl } from '$lib/utils';
+	import { HealthCheckStatus } from '$lib/enums';
+	import type { MCPServerSettingsEntry } from '$lib/types';
+
+	interface Props {
+		class?: string;
+		disabled?: boolean;
+		onSettingsClick?: () => void;
+	}
+
+	let { class: className = '', disabled = false, onSettingsClick }: Props = $props();
+
+	let searchQuery = $state('');
+	let mcpServers = $derived(mcpStore.getServersSorted().filter((s) => s.enabled));
+	let hasMcpServers = $derived(mcpServers.length > 0);
+	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 mcpFavicons = $derived(
+		healthyEnabledMcpServers
+			.slice(0, 3)
+			.map((s) => ({ id: s.id, url: getFaviconUrl(s.url) }))
+			.filter((f) => f.url !== null)
+	);
+	let filteredMcpServers = $derived.by(() => {
+		const query = searchQuery.toLowerCase().trim();
+		if (query) {
+			return mcpServers.filter((s) => {
+				const name = getServerLabel(s).toLowerCase();
+				const url = s.url.toLowerCase();
+				return name.includes(query) || url.includes(query);
+			});
+		}
+		return mcpServers;
+	});
+
+	function getServerLabel(server: MCPServerSettingsEntry): string {
+		return mcpStore.getServerLabel(server);
+	}
+
+	function handleDropdownOpen(open: boolean) {
+		if (open) {
+			mcpClient.runHealthChecksForServers(mcpServers);
+		}
+	}
+
+	function isServerEnabledForChat(serverId: string): boolean {
+		return conversationsStore.isMcpServerEnabledForChat(serverId);
+	}
+
+	async function toggleServerForChat(serverId: string) {
+		await conversationsStore.toggleMcpServerForChat(serverId);
+	}
+</script>
+
+{#if hasMcpServers && hasEnabledMcpServers && mcpFavicons.length > 0}
+	<DropdownMenuSearchable
+		bind:searchValue={searchQuery}
+		placeholder="Search servers..."
+		emptyMessage="No servers found"
+		isEmpty={filteredMcpServers.length === 0}
+		{disabled}
+		onOpenChange={handleDropdownOpen}
+	>
+		{#snippet trigger()}
+			<button
+				type="button"
+				class="inline-flex cursor-pointer items-center rounded-sm py-1 disabled:cursor-not-allowed disabled:opacity-60"
+				{disabled}
+				aria-label="MCP Servers"
+			>
+				<McpActiveServersAvatars class={className} />
+			</button>
+		{/snippet}
+
+		<div class="max-h-64 overflow-y-auto">
+			{#each filteredMcpServers as server (server.id)}
+				{@const healthState = mcpStore.getHealthCheckState(server.id)}
+				{@const hasError = healthState.status === HealthCheckStatus.ERROR}
+				{@const isEnabledForChat = isServerEnabledForChat(server.id)}
+
+				<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)}
+					/>
+				</button>
+			{/each}
+		</div>
+
+		{#snippet footer()}
+			<DropdownMenu.Item class="flex cursor-pointer items-center gap-2" onclick={onSettingsClick}>
+				<Settings class="h-4 w-4" />
+				<span>Manage MCP Servers</span>
+			</DropdownMenu.Item>
+		{/snippet}
+	</DropdownMenuSearchable>
+{/if}

tools/server/webui/src/lib/components/app/mcp/index.ts

@@ -69,6 +69,33 @@ export { default as McpServersSettings } from './McpServersSettings.svelte';
  */
 export { default as McpActiveServersAvatars } from './McpActiveServersAvatars.svelte';
 
+/**
+ * **McpServerSelector** - Quick MCP server toggle dropdown
+ *
+ * Compact dropdown for quickly enabling/disabling MCP servers for the current chat.
+ * Uses McpActiveServersAvatars as trigger and shows searchable server list with switches.
+ *
+ * **Architecture:**
+ * - Uses DropdownMenuSearchable for searchable dropdown UI
+ * - McpActiveServersAvatars as the trigger element
+ * - Integrates with conversationsStore for per-chat toggle
+ * - Runs health checks on dropdown open
+ *
+ * **Features:**
+ * - Searchable server list by name/URL
+ * - Switch toggles matching McpServersSettings behavior
+ * - Error state display for unhealthy servers
+ * - Footer link to full MCP settings dialog
+ *
+ * @example
+ * ```svelte
+ * <McpServerSelector
+ *   onSettingsClick={() => showMcpSettings = true}
+ * />
+ * ```
+ */
+export { default as McpServerSelector } from './McpServerSelector.svelte';
+
 /**
  * **McpCapabilitiesBadges** - Server capabilities display
  *

tools/server/webui/src/lib/stores/mcp.svelte.ts

@@ -240,7 +240,7 @@ class MCPStore {
 
 	/**
 	 * Check if there are any available MCP servers (enabled in settings).
-	 * Used to determine if McpSelector should be shown.
+	 * Used to determine if McpServerSelector should be shown.
 	 */
 	hasAvailableServers(): boolean {
 		const servers = parseMcpServerSettings(config().mcpServers);