From 1f89bfe475339bf6b33651240f0fbe99ef24c10c Mon Sep 17 00:00:00 2001
From: Aleksander Grygier <aleksander.grygier@gmail.com>
Date: Sun, 20 Sep 2026 01:36:33 +0200
Subject: [PATCH] ui : manage backends in their own dialog

Assisted-by: pi:llama.cpp/DeepSeek-V4.1-Flash
---
 .../app/dialogs/DialogBackends.svelte         | 35 ++++++++++++
 .../src/lib/components/app/dialogs/index.ts   |  1 +
 .../ModelsSelectorDropdown.svelte             | 15 +++---
 .../ModelsSelector/ModelsSelectorSheet.svelte |  2 +-
 .../SidebarNavigation.svelte                  |  5 ++
 .../SidebarNavigationActions.svelte           | 54 ++++++++++---------
 .../settings/SettingsChat/SettingsChat.svelte |  3 --
 .../src/lib/constants/settings.constants.ts   | 25 ---------
 tools/ui/src/lib/constants/ui.constants.ts    |  7 ++-
 tools/ui/src/lib/enums/ui.enums.ts            |  1 +
 10 files changed, 87 insertions(+), 61 deletions(-)
 create mode 100644 tools/ui/src/lib/components/app/dialogs/DialogBackends.svelte

diff --git a/tools/ui/src/lib/components/app/dialogs/DialogBackends.svelte b/tools/ui/src/lib/components/app/dialogs/DialogBackends.svelte
new file mode 100644
index 0000000000..301643127a
--- /dev/null
+++ b/tools/ui/src/lib/components/app/dialogs/DialogBackends.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { SettingsBackends } from '$lib/components/app/backends';
+	import { Logo } from '$lib/components/app/misc';
+	import * as Dialog from '$lib/components/ui/dialog';
+
+	interface Props {
+		open?: boolean;
+		onOpenChange?: (open: boolean) => void;
+	}
+
+	let { onOpenChange, open = $bindable(false) }: Props = $props();
+
+	function handleOpenChange(value: boolean) {
+		open = value;
+		onOpenChange?.(value);
+	}
+</script>
+
+<Dialog.Root onOpenChange={handleOpenChange} {open}>
+	<Dialog.Content class="md:max-h-[80vh]! md:w-[calc(100vw-4rem)]! md:max-w-164! flex flex-col">
+		<Dialog.Header>
+			<Dialog.Title class="flex items-center gap-2">
+				<Logo class="h-5 w-5" style="--size: 1.25rem" />
+
+				<span>Backends</span>
+			</Dialog.Title>
+
+			<Dialog.Description>
+				Endpoints this UI can talk to. The built-in backend is the llama.cpp server serving it.
+			</Dialog.Description>
+		</Dialog.Header>
+
+		<SettingsBackends class="mt-4 overflow-y-auto" />
+	</Dialog.Content>
+</Dialog.Root>
diff --git a/tools/ui/src/lib/components/app/dialogs/index.ts b/tools/ui/src/lib/components/app/dialogs/index.ts
index 5f05f91750..037d255558 100644
--- a/tools/ui/src/lib/components/app/dialogs/index.ts
+++ b/tools/ui/src/lib/components/app/dialogs/index.ts
@@ -106,6 +106,7 @@ export { default as DialogExportSettings } from './DialogExportSettings.svelte';
  * />
  * ```
  */
+export { default as DialogBackends } from './DialogBackends.svelte';
 export { default as DialogConfirmation } from './DialogConfirmation.svelte';
 
 /**
diff --git a/tools/ui/src/lib/components/app/models/ModelsSelector/ModelsSelectorDropdown.svelte b/tools/ui/src/lib/components/app/models/ModelsSelector/ModelsSelectorDropdown.svelte
index 9142c12a4d..51bcdc6a5f 100644
--- a/tools/ui/src/lib/components/app/models/ModelsSelector/ModelsSelectorDropdown.svelte
+++ b/tools/ui/src/lib/components/app/models/ModelsSelector/ModelsSelectorDropdown.svelte
@@ -244,7 +244,7 @@
 							>
 								<MODEL_SELECTOR_ICON class="h-3.5 w-3.5 shrink-0" />
 
-								<span class="flex min-w-0 items-center gap-1">
+								<span class="flex min-w-0 items-center gap-0.5">
 									{#if selectedOption}
 										<ModelId
 											class="min-w-0 overflow-hidden"
@@ -364,16 +364,17 @@
 						</div>
 
 						{#snippet footer()}
-							<!-- Sticky actions footer: reasoning effort panel.
-							     Sticks to the bottom of the content scrollport. -->
+							<!-- Sticky actions footer: backends, then the reasoning effort
+							     panel. Sticks to the bottom of the content scrollport. -->
+
+							<ModelsSelectorReasoningPanel inMenu />
+
 							<div
-								class="px-1.5"
+								class="flex flex-col px-1.5"
 								onfocusin={clearHighlight}
 								onmouseenter={clearHighlight}
 								role="none"
-							>
-								<ModelsSelectorReasoningPanel inMenu />
-							</div>
+							></div>
 						{/snippet}
 					</DropdownMenuSearchable>
 				</DropdownMenu.Content>
diff --git a/tools/ui/src/lib/components/app/models/ModelsSelector/ModelsSelectorSheet.svelte b/tools/ui/src/lib/components/app/models/ModelsSelector/ModelsSelectorSheet.svelte
index 2add96ba63..23f95f31cd 100644
--- a/tools/ui/src/lib/components/app/models/ModelsSelector/ModelsSelectorSheet.svelte
+++ b/tools/ui/src/lib/components/app/models/ModelsSelector/ModelsSelectorSheet.svelte
@@ -204,7 +204,7 @@
 							/>
 						</div>
 
-						<div class="px-2 pb-1">
+						<div class="flex flex-col px-2 pb-1">
 							<ModelsSelectorReasoningPanel />
 						</div>
 					</div>
diff --git a/tools/ui/src/lib/components/app/navigation/SidebarNavigation/SidebarNavigation.svelte b/tools/ui/src/lib/components/app/navigation/SidebarNavigation/SidebarNavigation.svelte
index 375461cc57..0f881076cd 100644
--- a/tools/ui/src/lib/components/app/navigation/SidebarNavigation/SidebarNavigation.svelte
+++ b/tools/ui/src/lib/components/app/navigation/SidebarNavigation/SidebarNavigation.svelte
@@ -4,6 +4,7 @@
 	import { page } from '$app/state';
 	import {
 		ActionIcon,
+		DialogBackends,
 		DialogConversationRename,
 		DialogModelsDiscover,
 		DialogSettingsChat,
@@ -94,6 +95,7 @@
 
 	let renameDialogOpen = $state(false);
 	let settingsDialogOpen = $state(false);
+	let backendsDialogOpen = $state(false);
 	let modelsDiscoverOpen = $state(false);
 	let renameTargetConversationId = $state<string | null>(null);
 	let renameDraft = $state('');
@@ -391,6 +393,7 @@
 				bind:searchQuery
 				class="px-2"
 				isExpandedMode={innerWidth > 768 ? uiStore.isSidebarExpanded : true}
+				onBackendsClick={() => (backendsDialogOpen = true)}
 				onDiscoverModelsClick={() => (modelsDiscoverOpen = true)}
 				onNewChat={() => {
 					if (deviceStore.isMobile) {
@@ -455,6 +458,8 @@
 
 <DialogSettingsChat bind:open={settingsDialogOpen} />
 
+<DialogBackends bind:open={backendsDialogOpen} />
+
 <DialogModelsDiscover bind:open={modelsDiscoverOpen} />
 
 <style>
diff --git a/tools/ui/src/lib/components/app/navigation/SidebarNavigation/SidebarNavigationActions.svelte b/tools/ui/src/lib/components/app/navigation/SidebarNavigation/SidebarNavigationActions.svelte
index 176a831432..c24ebbf9c1 100644
--- a/tools/ui/src/lib/components/app/navigation/SidebarNavigation/SidebarNavigationActions.svelte
+++ b/tools/ui/src/lib/components/app/navigation/SidebarNavigation/SidebarNavigationActions.svelte
@@ -9,6 +9,7 @@
 		ICON_STRIP_TRANSITION_DELAY_MULTIPLIER,
 		ICON_STRIP_TRANSITION_DURATION,
 		ROUTES,
+		SETTINGS_KEYS,
 		SIDEBAR_ACTIONS_ITEMS
 	} from '$lib/constants';
 	import { SidebarAction, TooltipSide } from '$lib/enums';
@@ -25,8 +26,9 @@
 		searchQuery: string;
 		onSearchDeactivated?: () => void;
 		onSearchClick?: () => void;
-		onNewChat?: () => void;
+		onBackendsClick?: () => void;
 		onDiscoverModelsClick?: () => void;
+		onNewChat?: () => void;
 		onSettingsClick?: () => void;
 	}
 
@@ -34,6 +36,7 @@
 		class: className,
 		isExpandedMode = false,
 		isSearchModeActive = $bindable(false),
+		onBackendsClick,
 		onDiscoverModelsClick,
 		onNewChat,
 		onSearchClick,
@@ -48,10 +51,9 @@
 
 	const isOnMobile = $derived(deviceStore.isMobile);
 
-	// Discover models is opt-in (General settings) and needs the router's
-	// download endpoints; hide it when either gate is closed
+	// discovery needs the local router's download endpoints
 	const actionsItems = $derived(
-		serverStore.localIsRouter && settingsStore.config.enableDiscoverModels
+		serverStore.localIsRouter && settingsStore.config[SETTINGS_KEYS.ENABLE_DISCOVER_MODELS] === true
 			? SIDEBAR_ACTIONS_ITEMS
 			: SIDEBAR_ACTIONS_ITEMS.filter((item) => item.action !== SidebarAction.DISCOVER_MODELS)
 	);
@@ -129,16 +131,18 @@
 						}
 					: item.action === SidebarAction.DISCOVER_MODELS
 						? () => onDiscoverModelsClick?.()
-						: item.action === SidebarAction.SETTINGS
-							? () => onSettingsClick?.()
-							: item.route
-								? () => {
-										onNewChat?.();
-										goto(item.route!);
-									}
-								: isSearchOnMobile
-									? undefined
-									: onSearchClick}
+						: item.action === SidebarAction.BACKENDS
+							? () => onBackendsClick?.()
+							: 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,
@@ -187,16 +191,18 @@
 						}
 					: item.action === SidebarAction.DISCOVER_MODELS
 						? () => onDiscoverModelsClick?.()
-						: item.action === SidebarAction.SETTINGS
-							? () => onSettingsClick?.()
-							: item.route
-								? () => {
-										onNewChat?.();
-										goto(item.route!);
-									}
-								: isSearchOnMobile
-									? undefined
-									: onSearchClick}
+						: item.action === SidebarAction.BACKENDS
+							? () => onBackendsClick?.()
+							: 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,
diff --git a/tools/ui/src/lib/components/app/settings/SettingsChat/SettingsChat.svelte b/tools/ui/src/lib/components/app/settings/SettingsChat/SettingsChat.svelte
index 024c98f300..a128821142 100644
--- a/tools/ui/src/lib/components/app/settings/SettingsChat/SettingsChat.svelte
+++ b/tools/ui/src/lib/components/app/settings/SettingsChat/SettingsChat.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { RefreshCw } from '@lucide/svelte';
-	import { SettingsBackends } from '$lib/components/app/backends';
 	import {
 		SettingsChatDesktopSidebar,
 		SettingsChatFields,
@@ -165,8 +164,6 @@
 						<SettingsChatToolsTab />
 					{:else if currentSection.slug === SETTINGS_SECTION_SLUGS.IMPORT_EXPORT}
 						<SettingsChatImportExportTab />
-					{:else if currentSection.slug === SETTINGS_SECTION_SLUGS.BACKENDS}
-						<SettingsBackends />
 					{:else if currentSection.fields}
 						<div class="space-y-6">
 							<SettingsChatFields
diff --git a/tools/ui/src/lib/constants/settings.constants.ts b/tools/ui/src/lib/constants/settings.constants.ts
index ed731678f7..b08781e54d 100644
--- a/tools/ui/src/lib/constants/settings.constants.ts
+++ b/tools/ui/src/lib/constants/settings.constants.ts
@@ -11,7 +11,6 @@ import {
 	Monitor,
 	Moon,
 	PencilRuler,
-	Server,
 	SlidersVertical,
 	Sun
 } from '@lucide/svelte';
@@ -197,30 +196,6 @@ export const SETTINGS_REGISTRY: SettingsSectionEntry[] = [
 		slug: SETTINGS_SECTION_SLUGS.GENERAL,
 		title: SETTINGS_SECTION_TITLES.GENERAL
 	},
-	// Backends (non-UI config object)
-	{
-		icon: Server,
-		settings: [
-			{
-				defaultValue: '[]',
-				help: 'Configure external API backends as a JSON list. The local backend is always available.',
-				key: SETTINGS_KEYS.BACKENDS,
-				label: 'Backends',
-				standaloneField: false,
-				type: SettingsFieldType.INPUT
-			},
-			{
-				defaultValue: true,
-				help: 'Query the llama-server that serves this UI. Disable it when this UI runs standalone and talks to external backends only.',
-				key: SETTINGS_KEYS.LOCAL_BACKEND_ENABLED,
-				label: 'Local backend',
-				standaloneField: false,
-				type: SettingsFieldType.CHECKBOX
-			}
-		],
-		slug: SETTINGS_SECTION_SLUGS.BACKENDS,
-		title: SETTINGS_SECTION_TITLES.BACKENDS
-	},
 	// Display
 	{
 		icon: Monitor,
diff --git a/tools/ui/src/lib/constants/ui.constants.ts b/tools/ui/src/lib/constants/ui.constants.ts
index e547e53b69..9dcc0819ef 100644
--- a/tools/ui/src/lib/constants/ui.constants.ts
+++ b/tools/ui/src/lib/constants/ui.constants.ts
@@ -1,4 +1,4 @@
-import { Package, PackageSearch, Search, Settings, SquarePen } from '@lucide/svelte';
+import { Package, PackageSearch, Search, Server, Settings, SquarePen } from '@lucide/svelte';
 import { SidebarAction, ToolSource } from '$lib/enums';
 import type { DesktopIconStripItem } from '$lib/types';
 
@@ -74,6 +74,11 @@ export const SIDEBAR_ACTIONS_ITEMS: DesktopIconStripItem[] = [
 		icon: PackageSearch,
 		tooltip: 'Discover models'
 	},
+	{
+		action: SidebarAction.BACKENDS,
+		icon: Server,
+		tooltip: 'Backends'
+	},
 	{
 		action: SidebarAction.SETTINGS,
 		icon: Settings,
diff --git a/tools/ui/src/lib/enums/ui.enums.ts b/tools/ui/src/lib/enums/ui.enums.ts
index 036dacee18..121c3495e3 100644
--- a/tools/ui/src/lib/enums/ui.enums.ts
+++ b/tools/ui/src/lib/enums/ui.enums.ts
@@ -23,6 +23,7 @@ export enum ScrollCarouselVariant {
  * Sidebar icon strip actions handled directly by the sidebar.
  */
 export enum SidebarAction {
+	BACKENDS = 'backends',
 	DISCOVER_MODELS = 'discover-models',
 	NEW_CHAT = 'new-chat',
 	SETTINGS = 'settings'