ui : move mcp servers to the sidebar rail

The add menu keeps to what it attaches to the conversation, so the MCP
servers dialog moves to the sidebar rail and its menu entries and the
form callback they used go with it.

Assisted-by: pi:llama.cpp/DeepSeek-V4.1-Flash

tools/ui/src/lib/components/app/chat/ChatForm/ChatForm.svelte

@@ -8,8 +8,7 @@
 		ChatFormInputFileInputInvisible,
 		ChatFormMcpResourcesList,
 		ChatFormPickers,
-		DialogMcpResourcesBrowser,
-		DialogMcpServers
+		DialogMcpResourcesBrowser
 	} from '$lib/components/app';
 	import {
 		CLIPBOARD_CONTENT_QUOTE_PREFIX,
@@ -193,7 +192,6 @@
 	let preSelectedResourceUri = $state<string | undefined>(undefined);
 
 	// MCP Servers Dialog State
-	let isMcpServersDialogOpen = $state(false);
 
 	let currentConfig = $derived(settingsStore.config);
 
@@ -628,7 +626,6 @@
 				isReasoning={chatStore.isReasoning}
 				{isRecording}
 				onFileUpload={handleFileUpload}
-				onMcpSettingsClick={() => (isMcpServersDialogOpen = true)}
 				onMicClick={handleMicClick}
 				{onStop}
 				onSystemPromptClick={() => onSystemPromptClick?.({ files: uploadedFiles, message: value })}
@@ -667,5 +664,3 @@
 	}}
 	preSelectedUri={preSelectedResourceUri}
 />
-
-<DialogMcpServers bind:open={isMcpServersDialogOpen} />

tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddButton.svelte

@@ -15,11 +15,11 @@
 <Tooltip.Root>
 	<Tooltip.Trigger class="w-full">
 		<Button
-			class="file-upload-button md:h-8 md:w-8 h-9 w-9 rounded-full p-0"
+			class="file-upload-button bg-background h-9 w-9 rounded-full p-0 shadow-sm md:h-8 md:w-8 dark:bg-muted-foreground/15"
 			{disabled}
 			{onclick}
 			type="button"
-			variant="secondary"
+			variant="ghost"
 		>
 			<span class="sr-only">{ATTACHMENT_TOOLTIP_TEXT}</span>
 

tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddSheet.svelte

@@ -9,7 +9,6 @@
 		MessageSquare,
 		PencilRuler
 	} from '@lucide/svelte';
-	import { McpLogo } from '$lib/components/app';
 	import { Checkbox } from '$lib/components/ui/checkbox';
 	import * as Collapsible from '$lib/components/ui/collapsible';
 	import * as Sheet from '$lib/components/ui/sheet';
@@ -226,19 +225,6 @@
 							</div>
 						</Collapsible.Content>
 					</Collapsible.Root>
-
-					<button
-						class={sheetItemClass}
-						onclick={() => {
-							sheetOpen = false;
-							chatFormActions.onMcpSettingsClick?.();
-						}}
-						type="button"
-					>
-						<McpLogo class="inline {ICON_CLASS_DEFAULT} shrink-0" />
-
-						<span>MCP Servers</span>
-					</button>
 				{/if}
 			</div>
 		</Sheet.Content>

tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActions.svelte

@@ -30,7 +30,6 @@
 		uploadedFiles?: ChatUploadedFile[];
 		onFileUpload?: () => void;
 		onMicClick?: () => void;
-		onMcpSettingsClick?: () => void;
 		onStop?: () => void;
 		onSystemPromptClick?: () => void;
 	}
@@ -44,7 +43,6 @@
 		isReasoning = false,
 		isRecording = false,
 		onFileUpload,
-		onMcpSettingsClick,
 		onMicClick,
 		onStop,
 		onSystemPromptClick,
@@ -136,10 +134,6 @@
 		get onFileUpload() {
 			return onFileUpload;
 		},
-
-		get onMcpSettingsClick() {
-			return onMcpSettingsClick;
-		},
 		get onSystemPromptClick() {
 			return onSystemPromptClick;
 		}

tools/ui/src/lib/components/app/navigation/SidebarNavigation/SidebarNavigation.svelte

@@ -6,6 +6,7 @@
 		ActionIcon,
 		DialogConversationRename,
 		DialogManageModels,
+		DialogMcpServers,
 		DialogSettingsChat,
 		Logo,
 		SidebarNavigationActions,
@@ -94,6 +95,7 @@
 
 	let renameDialogOpen = $state(false);
 	let settingsDialogOpen = $state(false);
+	let mcpDialogOpen = $state(false);
 	let renameTargetConversationId = $state<string | null>(null);
 	let renameDraft = $state('');
 	let renameOriginalTitle = $state('');
@@ -391,6 +393,7 @@
 				class="px-2"
 				isExpandedMode={innerWidth > 768 ? uiStore.isSidebarExpanded : true}
 				onManageModelsClick={() => uiStore.openModelsManager()}
+				onMcpClick={() => (mcpDialogOpen = true)}
 				onNewChat={() => {
 					if (deviceStore.isMobile) {
 						scheduleMobileCollapse();
@@ -454,6 +457,8 @@
 
 <DialogSettingsChat bind:open={settingsDialogOpen} />
 
+<DialogMcpServers bind:open={mcpDialogOpen} />
+
 <DialogManageModels bind:open={uiStore.manageModelsOpen} />
 
 <style>

tools/ui/src/lib/components/app/navigation/SidebarNavigation/SidebarNavigationActions.svelte

@@ -26,6 +26,7 @@
 		onSearchDeactivated?: () => void;
 		onSearchClick?: () => void;
 		onManageModelsClick?: () => void;
+		onMcpClick?: () => void;
 		onNewChat?: () => void;
 		onSettingsClick?: () => void;
 	}
@@ -35,6 +36,7 @@
 		isExpandedMode = false,
 		isSearchModeActive = $bindable(false),
 		onManageModelsClick,
+		onMcpClick,
 		onNewChat,
 		onSearchClick,
 		onSearchDeactivated,
@@ -123,16 +125,18 @@
 						}
 					: item.action === SidebarAction.MANAGE_MODELS
 						? () => onManageModelsClick?.()
-						: item.action === SidebarAction.SETTINGS
-							? () => onSettingsClick?.()
-							: item.route
-								? () => {
-										onNewChat?.();
-										goto(item.route!);
-									}
-								: isSearchOnMobile
-									? undefined
-									: onSearchClick}
+						: item.action === SidebarAction.MCP
+							? () => onMcpClick?.()
+							: item.action === SidebarAction.SETTINGS
+								? () => onSettingsClick?.()
+								: item.route
+									? () => {
+											onNewChat?.();
+											goto(item.route!);
+										}
+									: isSearchOnMobile
+										? undefined
+										: onSearchClick}
 			{@const itemTransition = {
 				delay: !initialized ? i * ICON_STRIP_TRANSITION_DELAY_MULTIPLIER : 0,
 				duration: ICON_STRIP_TRANSITION_DURATION,
@@ -181,16 +185,18 @@
 						}
 					: item.action === SidebarAction.MANAGE_MODELS
 						? () => onManageModelsClick?.()
-						: item.action === SidebarAction.SETTINGS
-							? () => onSettingsClick?.()
-							: item.route
-								? () => {
-										onNewChat?.();
-										goto(item.route!);
-									}
-								: isSearchOnMobile
-									? undefined
-									: onSearchClick}
+						: item.action === SidebarAction.MCP
+							? () => onMcpClick?.()
+							: item.action === SidebarAction.SETTINGS
+								? () => onSettingsClick?.()
+								: item.route
+									? () => {
+											onNewChat?.();
+											goto(item.route!);
+										}
+									: isSearchOnMobile
+										? undefined
+										: onSearchClick}
 			{@const itemTransition = {
 				delay: !initialized ? i * ICON_STRIP_TRANSITION_DELAY_MULTIPLIER : 0,
 				duration: ICON_STRIP_TRANSITION_DURATION,

tools/ui/src/lib/constants/ui.constants.ts

@@ -1,5 +1,6 @@
 import { MODEL_ICON } from './icons.constants';
 import { Search, Settings, SquarePen } from '@lucide/svelte';
+import McpLogo from '$lib/components/app/mcp/McpLogo.svelte';
 import { SidebarAction, ToolSource } from '$lib/enums';
 import type { DesktopIconStripItem } from '$lib/types';
 
@@ -79,6 +80,11 @@ export const SIDEBAR_ACTIONS_ITEMS: DesktopIconStripItem[] = [
 		icon: MODEL_ICON,
 		tooltip: 'Models'
 	},
+	{
+		action: SidebarAction.MCP,
+		icon: McpLogo,
+		tooltip: 'MCP'
+	},
 	{
 		action: SidebarAction.SETTINGS,
 		icon: Settings,

tools/ui/src/lib/enums/ui.enums.ts

@@ -24,6 +24,7 @@ export enum ScrollCarouselVariant {
  */
 export enum SidebarAction {
 	MANAGE_MODELS = 'manage-models',
+	MCP = 'mcp',
 	NEW_CHAT = 'new-chat',
 	SETTINGS = 'settings'
 }