From 77e38d68f298a3e3af877a2a44142d8dd7dc34c5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sigbj=C3=B8rn=20Skj=C3=A6ret?= <sigbjorn.skjaeret@scala.com>
Date: Mon, 18 May 2026 12:42:56 +0200
Subject: [PATCH 1/8] add myself to conversion (#23261)

---
 CODEOWNERS | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CODEOWNERS b/CODEOWNERS
index f58f0f830fa..f92fe98ce8c 100644
--- a/CODEOWNERS
+++ b/CODEOWNERS
@@ -26,6 +26,7 @@
 /common/fit.*                           @JohannesGaessler
 /common/jinja/                          @CISC
 /common/ngram-map.*                     @srogmann
+/conversion/                            @CISC
 /convert_*.py                           @CISC
 /docs/backend/snapdragon/               @ggml-org/ggml-hexagon
 /examples/batched.swift/                @ggerganov

From 49c21f97cd04c7eedb0318aaf00b18344cfea688 Mon Sep 17 00:00:00 2001
From: Andrei <abetlen@gmail.com>
Date: Mon, 18 May 2026 04:20:49 -0700
Subject: [PATCH 2/8] llama: initialize pre-norm embedding mask flag (#23256)

---
 src/llama-context.cpp | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/llama-context.cpp b/src/llama-context.cpp
index b1b12d017c0..3cc8ffa6668 100644
--- a/src/llama-context.cpp
+++ b/src/llama-context.cpp
@@ -64,8 +64,9 @@ llama_context::llama_context(
     cparams.yarn_attn_factor = params.yarn_attn_factor >= 0.0f ? params.yarn_attn_factor : hparams.yarn_attn_factor;
     cparams.yarn_beta_fast   = params.yarn_beta_fast   >= 0.0f ? params.yarn_beta_fast   : hparams.yarn_beta_fast;
     cparams.yarn_beta_slow   = params.yarn_beta_slow   >= 0.0f ? params.yarn_beta_slow   : hparams.yarn_beta_slow;
-    cparams.embeddings       = params.embeddings;
-    cparams.embeddings_pre_norm = false;
+    cparams.embeddings                  = params.embeddings;
+    cparams.embeddings_pre_norm         = false;
+    cparams.embeddings_pre_norm_masked  = false;
     cparams.offload_kqv      = params.offload_kqv;
     cparams.no_perf          = params.no_perf;
     cparams.pooling_type     = params.pooling_type;

From 232f466583de284d0b5c7bdeda80002f6cb89097 Mon Sep 17 00:00:00 2001
From: Martin Andersson <zoi@inversi0n.org>
Date: Mon, 18 May 2026 14:08:02 +0200
Subject: [PATCH 3/8] webui: fix Tailwind v4 utility classes missing when built
 via cmake (#23253)

---
 tools/ui/src/app.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/tools/ui/src/app.css b/tools/ui/src/app.css
index 6e29b70a35a..10480f977be 100644
--- a/tools/ui/src/app.css
+++ b/tools/ui/src/app.css
@@ -1,4 +1,5 @@
 @import 'tailwindcss';
+@source ".";
 
 @import 'tw-animate-css';
 

From a135ec0baa1bcf7eb0437c9fd04920f87cf33ace Mon Sep 17 00:00:00 2001
From: Aleksander Grygier <aleksander.grygier@gmail.com>
Date: Mon, 18 May 2026 15:10:14 +0200
Subject: [PATCH 4/8] ui: Centralize monospace font styles in app.css (#23272)

---
 tools/ui/src/app.css                                       | 7 +++++++
 .../ChatMessageAssistant/ChatMessageAssistant.svelte       | 3 ---
 .../app/content/MarkdownContent/MarkdownContent.svelte     | 3 ---
 .../components/app/content/SyntaxHighlightedCode.svelte    | 6 ------
 4 files changed, 7 insertions(+), 12 deletions(-)

diff --git a/tools/ui/src/app.css b/tools/ui/src/app.css
index 10480f977be..d6dc6670c0c 100644
--- a/tools/ui/src/app.css
+++ b/tools/ui/src/app.css
@@ -40,6 +40,9 @@
 	--sidebar-ring: oklch(0.708 0 0);
 	--code-background: oklch(0.985 0 0);
 	--code-foreground: oklch(0.145 0 0);
+	--font-mono:
+		ui-monospace, SFMono-Regular, 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas,
+		'Liberation Mono', Menlo, monospace;
 	--layer-popover: 1000000;
 
 	--chat-form-area-height: 8rem;
@@ -172,6 +175,10 @@
 	*::-webkit-scrollbar-thumb:hover {
 		background: hsl(var(--muted-foreground) / 0.5);
 	}
+
+	:where(code, pre, kbd, samp) {
+		font-family: var(--font-mono);
+	}
 }
 
 @layer utilities {
diff --git a/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageAssistant/ChatMessageAssistant.svelte b/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageAssistant/ChatMessageAssistant.svelte
index b4d69b932ab..4c74206f1be 100644
--- a/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageAssistant/ChatMessageAssistant.svelte
+++ b/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageAssistant/ChatMessageAssistant.svelte
@@ -379,9 +379,6 @@
 		border-radius: 1rem;
 		background: hsl(var(--muted) / 0.3);
 		color: var(--foreground);
-		font-family:
-			ui-monospace, SFMono-Regular, 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas,
-			'Liberation Mono', Menlo, monospace;
 		font-size: 0.875rem;
 		line-height: 1.6;
 		white-space: pre-wrap;
diff --git a/tools/ui/src/lib/components/app/content/MarkdownContent/MarkdownContent.svelte b/tools/ui/src/lib/components/app/content/MarkdownContent/MarkdownContent.svelte
index c1b71e4519e..3a11854b6e4 100644
--- a/tools/ui/src/lib/components/app/content/MarkdownContent/MarkdownContent.svelte
+++ b/tools/ui/src/lib/components/app/content/MarkdownContent/MarkdownContent.svelte
@@ -742,9 +742,6 @@
 		padding: 0.125rem 0.375rem;
 		border-radius: 0.375rem;
 		font-size: 0.875rem;
-		font-family:
-			ui-monospace, SFMono-Regular, 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas,
-			'Liberation Mono', Menlo, monospace;
 	}
 
 	div :global(pre) {
diff --git a/tools/ui/src/lib/components/app/content/SyntaxHighlightedCode.svelte b/tools/ui/src/lib/components/app/content/SyntaxHighlightedCode.svelte
index 41d59324cb4..c4d1706bfe1 100644
--- a/tools/ui/src/lib/components/app/content/SyntaxHighlightedCode.svelte
+++ b/tools/ui/src/lib/components/app/content/SyntaxHighlightedCode.svelte
@@ -80,12 +80,6 @@
 </div>
 
 <style>
-	.code-preview-wrapper {
-		font-family:
-			ui-monospace, SFMono-Regular, 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas,
-			'Liberation Mono', Menlo, monospace;
-	}
-
 	.code-preview-wrapper pre {
 		background: transparent;
 	}

From 1ff0fc138461c882db6a50b5545601182994ff2e Mon Sep 17 00:00:00 2001
From: Aleksander Grygier <aleksander.grygier@gmail.com>
Date: Mon, 18 May 2026 16:09:40 +0200
Subject: [PATCH 5/8] ui: Refactor models store, MCP service, and gate logs
 behind VITE_DEBUG (#23236)

* refactor: Scope console logs to `DEV` + `VITE_DEBUG` env vars

* refactor: skip MCP proxy probe when no server requires it

* refactor: suppress expected disconnect errors during MCP client shutdown

* refactor: Deduplicate requests

* refactor: deduplicate model fetching across ROUTER and MODEL modes

* refactor: Clean up models logic

* chore: Add `.env.example` file

* refactor: replace client-side CORS proxy probe with server status flag

* refactor: Post-review fixes

* test: add vitest client setup with API fetch mocks
---
 tools/server/server-context.cpp               |   1 +
 tools/server/server-models.cpp                |   1 +
 tools/ui/.env.example                         |   2 +
 .../ChatFormActionModels.svelte               |  28 +-
 .../ChatFormPickerMcpPrompts.svelte           |   4 +-
 .../lib/hooks/use-models-selector.svelte.ts   |  32 +-
 tools/ui/src/lib/services/mcp.service.ts      |  59 ++-
 .../ui/src/lib/services/migration.service.ts  |  59 ++-
 tools/ui/src/lib/stores/mcp.svelte.ts         |  25 +-
 tools/ui/src/lib/stores/models.svelte.ts      | 369 +++++++-----------
 tools/ui/src/lib/types/api.d.ts               |   1 +
 tools/ui/src/lib/utils/api-key-validation.ts  |  18 +-
 tools/ui/src/lib/utils/legacy-migration.ts    |  17 +-
 tools/ui/src/routes/(chat)/+page.svelte       |  17 +-
 tools/ui/src/routes/+layout.svelte            |  49 +--
 tools/ui/tests/client/page.svelte.test.ts     |   7 +-
 tools/ui/vitest-setup-client.ts               |  76 ++++
 17 files changed, 413 insertions(+), 352 deletions(-)
 create mode 100644 tools/ui/.env.example

diff --git a/tools/server/server-context.cpp b/tools/server/server-context.cpp
index 0f3fb9efa3c..6b16c6b4962 100644
--- a/tools/server/server-context.cpp
+++ b/tools/server/server-context.cpp
@@ -3885,6 +3885,7 @@ void server_routes::init_routes() {
             { "eos_token",                   meta->eos_token_str },
             { "build_info",                  meta->build_info },
             { "is_sleeping",                 queue_tasks.is_sleeping() },
+            { "cors_proxy_enabled",          params.ui_mcp_proxy || params.webui_mcp_proxy },
         };
         if (params.use_jinja) {
             if (!tmpl_tools.empty()) {
diff --git a/tools/server/server-models.cpp b/tools/server/server-models.cpp
index 6c6fed52d58..ccf42320f77 100644
--- a/tools/server/server-models.cpp
+++ b/tools/server/server-models.cpp
@@ -1165,6 +1165,7 @@ void server_models_routes::init_routes() {
                 // Deprecated: use ui_settings instead (kept for backward compat)
                 {"webui_settings",  webui_settings},
                 {"build_info",     std::string(llama_build_info())},
+                {"cors_proxy_enabled", params.ui_mcp_proxy || params.webui_mcp_proxy},
             });
             return res;
         }
diff --git a/tools/ui/.env.example b/tools/ui/.env.example
new file mode 100644
index 00000000000..9a995b746f6
--- /dev/null
+++ b/tools/ui/.env.example
@@ -0,0 +1,2 @@
+VITE_PUBLIC_APP_NAME='llama-ui'
+# VITE_DEBUG='true'
diff --git a/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionModels.svelte b/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionModels.svelte
index 2f9471e0ddd..29702060565 100644
--- a/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionModels.svelte
+++ b/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionModels.svelte
@@ -7,7 +7,6 @@
 	import { activeMessages } from '$lib/stores/conversations.svelte';
 
 	interface Props {
-		currentModel?: string;
 		disabled?: boolean;
 		forceForegroundText?: boolean;
 		hasAudioModality?: boolean;
@@ -20,7 +19,6 @@
 	}
 
 	let {
-		currentModel,
 		disabled = false,
 		forceForegroundText = false,
 		hasAudioModality = $bindable(false),
@@ -41,14 +39,28 @@
 
 	let lastSyncedConversationModel: string | null = null;
 
+	let selectorModel = $derived(conversationModel ?? modelsStore.selectedModelName ?? null);
+
 	$effect(() => {
 		if (conversationModel && conversationModel !== lastSyncedConversationModel) {
-			lastSyncedConversationModel = conversationModel;
+			if (modelOptions().some((m) => m.model === conversationModel)) {
+				modelsStore.selectedModelName = conversationModel;
+				modelsStore.selectModelByName(conversationModel);
+			} else {
+				modelsStore.selectedModelName = null;
+				modelsStore.clearSelection();
+			}
 
-			modelsStore.selectModelByName(conversationModel);
-		} else if (isRouter && !modelsStore.selectedModelId && modelsStore.loadedModelIds.length > 0) {
+			lastSyncedConversationModel = conversationModel;
+		} else if (
+			isRouter &&
+			!modelsStore.selectedModelId &&
+			modelsStore.loadedModelIds.length > 0 &&
+			activeMessages().length > 0 &&
+			!conversationModel
+		) {
 			lastSyncedConversationModel = null;
-			// auto-select the first loaded model only when nothing is selected yet
+
 			const first = modelOptions().find((m) => modelsStore.loadedModelIds.includes(m.model));
 
 			if (first) modelsStore.selectModelById(first.id);
@@ -151,7 +163,7 @@
 	<ModelsSelectorSheet
 		disabled={disabled || isOffline}
 		bind:this={selectorModelRef}
-		{currentModel}
+		currentModel={selectorModel}
 		{forceForegroundText}
 		{useGlobalSelection}
 	/>
@@ -159,7 +171,7 @@
 	<ModelsSelectorDropdown
 		disabled={disabled || isOffline}
 		bind:this={selectorModelRef}
-		{currentModel}
+		currentModel={selectorModel}
 		{forceForegroundText}
 		{useGlobalSelection}
 	/>
diff --git a/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormPickers/ChatFormPickerMcpPrompts/ChatFormPickerMcpPrompts.svelte b/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormPickers/ChatFormPickerMcpPrompts/ChatFormPickerMcpPrompts.svelte
index 567fdac4704..ff734ac88fb 100644
--- a/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormPickers/ChatFormPickerMcpPrompts/ChatFormPickerMcpPrompts.svelte
+++ b/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormPickers/ChatFormPickerMcpPrompts/ChatFormPickerMcpPrompts.svelte
@@ -162,7 +162,7 @@
 			return;
 		}
 
-		if (import.meta.env.DEV) {
+		if (import.meta.env.DEV && import.meta.env.VITE_DEBUG) {
 			console.log('[ChatFormPickerMcpPrompts] Fetching completions for:', {
 				serverName: selectedPrompt.serverName,
 				promptName: selectedPrompt.name,
@@ -181,7 +181,7 @@
 				value
 			);
 
-			if (import.meta.env.DEV) {
+			if (import.meta.env.DEV && import.meta.env.VITE_DEBUG) {
 				console.log('[ChatFormPickerMcpPrompts] Autocomplete result:', {
 					argName,
 					value,
diff --git a/tools/ui/src/lib/hooks/use-models-selector.svelte.ts b/tools/ui/src/lib/hooks/use-models-selector.svelte.ts
index 537a2af1841..098cb2c27aa 100644
--- a/tools/ui/src/lib/hooks/use-models-selector.svelte.ts
+++ b/tools/ui/src/lib/hooks/use-models-selector.svelte.ts
@@ -66,7 +66,6 @@ export function useModelsSelector(opts: UseModelsSelectorOptions): UseModelsSele
 	const serverModel = $derived(singleModelName());
 
 	const currentModel = $derived(opts.currentModel());
-	const useGlobalSelection = $derived(opts.useGlobalSelection?.() ?? false);
 	const onModelChange = $derived(opts.onModelChange?.());
 
 	const isHighlightedCurrentModelActive = $derived.by(() => {
@@ -128,6 +127,7 @@ export function useModelsSelector(opts: UseModelsSelectorOptions): UseModelsSele
 
 		if (onModelChange) {
 			const result = await onModelChange(option.id, option.model);
+
 			if (result === false) {
 				shouldCloseMenu = false;
 			}
@@ -142,12 +142,14 @@ export function useModelsSelector(opts: UseModelsSelectorOptions): UseModelsSele
 				const textarea = document.querySelector<HTMLTextAreaElement>(
 					'[data-slot="chat-form"] textarea'
 				);
+
 				textarea?.focus();
 			});
 		}
 
 		if (!onModelChange && isRouter && !modelsStore.isModelLoaded(option.model)) {
 			isLoadingModel = true;
+
 			modelsStore
 				.loadModel(option.model)
 				.catch((error) => console.error('Failed to load model:', error))
@@ -158,6 +160,7 @@ export function useModelsSelector(opts: UseModelsSelectorOptions): UseModelsSele
 	function getDisplayOption(): ModelOption | undefined {
 		if (!isRouter) {
 			const displayModel = serverModel || currentModel;
+
 			if (displayModel) {
 				return {
 					id: serverModel ? 'current' : 'offline-current',
@@ -166,12 +169,8 @@ export function useModelsSelector(opts: UseModelsSelectorOptions): UseModelsSele
 					capabilities: []
 				};
 			}
-			return undefined;
-		}
 
-		if (useGlobalSelection && activeId) {
-			const selected = options.find((option) => option.id === activeId);
-			if (selected) return selected;
+			return undefined;
 		}
 
 		if (currentModel) {
@@ -183,6 +182,7 @@ export function useModelsSelector(opts: UseModelsSelectorOptions): UseModelsSele
 					capabilities: []
 				};
 			}
+
 			return options.find((option) => option.model === currentModel);
 		}
 
@@ -197,57 +197,77 @@ export function useModelsSelector(opts: UseModelsSelectorOptions): UseModelsSele
 		get options() {
 			return options;
 		},
+
 		get loading() {
 			return loading;
 		},
+
 		get updating() {
 			return updating;
 		},
+
 		get activeId() {
 			return activeId;
 		},
+
 		get isRouter() {
 			return isRouter;
 		},
+
 		get serverModel() {
 			return serverModel;
 		},
+
 		get isHighlightedCurrentModelActive() {
 			return isHighlightedCurrentModelActive;
 		},
+
 		get isCurrentModelInCache() {
 			return isCurrentModelInCache;
 		},
+
 		get filteredOptions() {
 			return filteredOptions;
 		},
+
 		get groupedFilteredOptions() {
 			return groupedFilteredOptions;
 		},
+
 		get isLoadingModel() {
 			return isLoadingModel;
 		},
+
 		get searchTerm() {
 			return searchTerm;
 		},
+
 		get showModelDialog() {
 			return showModelDialog;
 		},
+
 		get infoModelId() {
 			return infoModelId;
 		},
+
 		setSearchTerm(value: string) {
 			searchTerm = value;
 		},
+
 		setShowModelDialog(value: boolean) {
 			showModelDialog = value;
 		},
+
 		handleInfoClick,
+
 		handleSelect,
+
 		handleOpenChange,
+
 		isFavorite(model: string) {
 			return modelsStore.favoriteModelIds.has(model);
 		},
+
 		getDisplayOption
 	};
 }
diff --git a/tools/ui/src/lib/services/mcp.service.ts b/tools/ui/src/lib/services/mcp.service.ts
index 44cbd4a8aaf..d596381aa05 100644
--- a/tools/ui/src/lib/services/mcp.service.ts
+++ b/tools/ui/src/lib/services/mcp.service.ts
@@ -392,7 +392,7 @@ export class MCPService {
 
 			const url = new URL(config.url);
 
-			if (import.meta.env.DEV) {
+			if (import.meta.env.DEV && import.meta.env.VITE_DEBUG) {
 				console.log(`[MCPService] Creating WebSocket transport for ${url.href}`);
 			}
 
@@ -413,12 +413,12 @@ export class MCPService {
 			onLog
 		);
 
-		if (useProxy && import.meta.env.DEV) {
+		if (useProxy && import.meta.env.DEV && import.meta.env.VITE_DEBUG) {
 			console.log(`[MCPService] Using CORS proxy for ${config.url} -> ${url.href}`);
 		}
 
 		try {
-			if (import.meta.env.DEV) {
+			if (import.meta.env.DEV && import.meta.env.VITE_DEBUG) {
 				console.log(`[MCPService] Creating StreamableHTTP transport for ${url.href}`);
 			}
 
@@ -520,7 +520,7 @@ export class MCPService {
 			)
 		);
 
-		if (import.meta.env.DEV) {
+		if (import.meta.env.DEV && import.meta.env.VITE_DEBUG) {
 			console.log(`[MCPService][${serverName}] Creating transport...`);
 		}
 
@@ -560,6 +560,22 @@ export class MCPService {
 		);
 
 		const runtimeErrorHandler = (error: Error) => {
+			// Ignore errors that are expected when the SDK's transport is closed,
+			// or when connecting to servers that don't support SSE (stateless-only
+			// endpoints returning 405). The SDK wraps the original AbortError in
+			// a new Error with the message "SSE stream disconnected: AbortError",
+			// and also produces "Cannot cancel a stream locked by a reader".
+			// DOMException is thrown by the browser when aborting fetch requests.
+			const msg = error.message || String(error);
+			if (
+				error.name === 'AbortError' ||
+				error instanceof DOMException ||
+				msg.includes('SSE stream disconnected') ||
+				msg.includes('stream locked by a reader') ||
+				msg.includes('The operation was aborted')
+			) {
+				return;
+			}
 			console.error(`[MCPService][${serverName}] Protocol error after initialize:`, error);
 		};
 
@@ -658,7 +674,10 @@ export class MCPService {
 			this.createLog(MCPConnectionPhase.LISTING_TOOLS, 'Listing available tools...')
 		);
 
-		console.log(`[MCPService][${serverName}] Connected, listing tools...`);
+		if (import.meta.env.DEV && import.meta.env.VITE_DEBUG) {
+			console.log(`[MCPService][${serverName}] Connected, listing tools...`);
+		}
+
 		const tools = await this.listTools({
 			client,
 			transport,
@@ -680,10 +699,11 @@ export class MCPService {
 				`Connection established with ${tools.length} tools (${connectionTimeMs}ms)`
 			)
 		);
-
-		console.log(
-			`[MCPService][${serverName}] Initialization complete with ${tools.length} tools in ${connectionTimeMs}ms`
-		);
+		if (import.meta.env.DEV && import.meta.env.VITE_DEBUG) {
+			console.log(
+				`[MCPService][${serverName}] Initialization complete with ${tools.length} tools in ${connectionTimeMs}ms`
+			);
+		}
 
 		return {
 			client,
@@ -709,9 +729,22 @@ export class MCPService {
 	 * @param connection - The active MCP connection to close
 	 */
 	static async disconnect(connection: MCPConnection): Promise<void> {
-		console.log(`[MCPService][${connection.serverName}] Disconnecting...`);
+		if (import.meta.env.DEV && import.meta.env.VITE_DEBUG) {
+			console.log(`[MCPService][${connection.serverName}] Disconnecting...`);
+		}
+
 		try {
-			// Prevent reconnection on voluntary disconnect
+			// Terminate the session first for streamable-http transports to cleanly
+			// close streams, matching the inspector's disconnect flow.
+			if (connection.transport instanceof StreamableHTTPClientTransport) {
+				await connection.transport.terminateSession();
+			}
+
+			// Clear error handlers before closing to prevent noise from expected
+			// abort errors during shutdown. The inspector avoids this entirely
+			// by not setting onerror, but since we use it for protocol logging,
+			// we must clear it before disconnect.
+			connection.client.onerror = undefined;
 			if (connection.transport.onclose) {
 				connection.transport.onclose = undefined;
 			}
@@ -1078,7 +1111,9 @@ export class MCPService {
 		try {
 			await connection.client.unsubscribeResource({ uri });
 
-			console.log(`[MCPService][${connection.serverName}] Unsubscribed from resource: ${uri}`);
+			if (import.meta.env.DEV && import.meta.env.VITE_DEBUG) {
+				console.log(`[MCPService][${connection.serverName}] Unsubscribed from resource: ${uri}`);
+			}
 		} catch (error) {
 			console.error(
 				`[MCPService][${connection.serverName}] Failed to unsubscribe from resource:`,
diff --git a/tools/ui/src/lib/services/migration.service.ts b/tools/ui/src/lib/services/migration.service.ts
index 5ed24c00d92..35d47070acf 100644
--- a/tools/ui/src/lib/services/migration.service.ts
+++ b/tools/ui/src/lib/services/migration.service.ts
@@ -119,7 +119,8 @@ const localStorageMigration: Migration = {
 			// Only migrate if new key doesn't already exist
 			const newValue = localStorage.getItem(newKey);
 			if (newValue !== null) {
-				console.log(`[Migration] localStorage: ${newKey} already exists, skipping`);
+				if (import.meta.env.DEV && import.meta.env.VITE_DEBUG)
+					console.log(`[Migration] localStorage: ${newKey} already exists, skipping`);
 				continue;
 			}
 
@@ -127,9 +128,11 @@ const localStorageMigration: Migration = {
 			if (oldValue !== null) {
 				localStorage.setItem(newKey, oldValue);
 				// Keep old key for downgrade compatibility - DO NOT DELETE
-				console.log(
-					`[Migration] localStorage: copied ${deprecatedKey} → ${newKey} (preserved old)`
-				);
+				if (import.meta.env.DEV && import.meta.env.VITE_DEBUG) {
+					console.log(
+						`[Migration] localStorage: copied ${deprecatedKey} → ${newKey} (preserved old)`
+					);
+				}
 			}
 		}
 	}
@@ -146,7 +149,8 @@ const idxdbMigration: Migration = {
 	async run(): Promise<void> {
 		const oldDbNames = await Dexie.getDatabaseNames();
 		if (!oldDbNames.includes(DB_APP_NAME_DEPRECATED)) {
-			console.log('[Migration] IndexedDB: no old database found, skipping');
+			if (import.meta.env.DEV && import.meta.env.VITE_DEBUG)
+				console.log('[Migration] IndexedDB: no old database found, skipping');
 			return;
 		}
 
@@ -155,11 +159,13 @@ const idxdbMigration: Migration = {
 		newDb.version(1).stores(IDXDB_STORES);
 		const existingConvs = await newDb.table(IDXDB_TABLES.conversations).count();
 		if (existingConvs > 0) {
-			console.log('[Migration] IndexedDB: new database already has data, skipping');
+			if (import.meta.env.DEV && import.meta.env.VITE_DEBUG)
+				console.log('[Migration] IndexedDB: new database already has data, skipping');
 			return;
 		}
 
-		console.log('[Migration] IndexedDB: copying from', DB_APP_NAME_DEPRECATED);
+		if (import.meta.env.DEV && import.meta.env.VITE_DEBUG)
+			console.log('[Migration] IndexedDB: copying from', DB_APP_NAME_DEPRECATED);
 
 		const oldDb = new Dexie(DB_APP_NAME_DEPRECATED);
 		oldDb.version(1).stores(IDXDB_STORES);
@@ -169,15 +175,18 @@ const idxdbMigration: Migration = {
 
 		if (conversations.length > 0) {
 			await newDb.table(IDXDB_TABLES.conversations).bulkAdd(conversations);
-			console.log(`[Migration] IndexedDB: copied ${conversations.length} conversations`);
+			if (import.meta.env.DEV && import.meta.env.VITE_DEBUG)
+				console.log(`[Migration] IndexedDB: copied ${conversations.length} conversations`);
 		}
 		if (messages.length > 0) {
 			await newDb.table(IDXDB_TABLES.messages).bulkAdd(messages);
-			console.log(`[Migration] IndexedDB: copied ${messages.length} messages`);
+			if (import.meta.env.DEV && import.meta.env.VITE_DEBUG)
+				console.log(`[Migration] IndexedDB: copied ${messages.length} messages`);
 		}
 
 		// Non-destructive: DO NOT delete old database - keep for downgrade compatibility
-		console.log('[Migration] IndexedDB: preserved old database for downgrade compatibility');
+		if (import.meta.env.DEV && import.meta.env.VITE_DEBUG)
+			console.log('[Migration] IndexedDB: preserved old database for downgrade compatibility');
 	}
 };
 
@@ -419,7 +428,8 @@ const legacyMessageMigration: Migration = {
 			}
 		}
 
-		console.log(`[Migration] Legacy messages: migrated ${migratedCount} messages`);
+		if (import.meta.env.DEV && import.meta.env.VITE_DEBUG)
+			console.log(`[Migration] Legacy messages: migrated ${migratedCount} messages`);
 	}
 };
 
@@ -434,7 +444,8 @@ const themeMigration: Migration = {
 	async run(): Promise<void> {
 		const legacyTheme = localStorage.getItem('theme');
 		if (legacyTheme === null) {
-			console.log('[Migration] Theme: no legacy theme key found, skipping');
+			if (import.meta.env.DEV && import.meta.env.VITE_DEBUG)
+				console.log('[Migration] Theme: no legacy theme key found, skipping');
 			return;
 		}
 
@@ -443,7 +454,8 @@ const themeMigration: Migration = {
 		const config = configRaw ? JSON.parse(configRaw) : {};
 
 		if (SETTINGS_KEYS.THEME in config) {
-			console.log('[Migration] Theme: config already has theme, skipping');
+			if (import.meta.env.DEV && import.meta.env.VITE_DEBUG)
+				console.log('[Migration] Theme: config already has theme, skipping');
 			return;
 		}
 
@@ -451,7 +463,8 @@ const themeMigration: Migration = {
 		localStorage.setItem(CONFIG_LOCALSTORAGE_KEY, JSON.stringify(config));
 
 		// Non-destructive: DO NOT delete legacy theme key - keep for downgrade compatibility
-		console.log(`[Migration] Theme: copied standalone theme to config (preserved old key)`);
+		if (import.meta.env.DEV && import.meta.env.VITE_DEBUG)
+			console.log(`[Migration] Theme: copied standalone theme to config (preserved old key)`);
 	}
 };
 
@@ -491,7 +504,8 @@ export const MigrationService = {
 	 */
 	resetState(): void {
 		localStorage.removeItem(MIGRATION_STATE_KEY);
-		console.log('[Migration] State reset - all migrations will run again');
+		if (import.meta.env.DEV && import.meta.env.VITE_DEBUG)
+			console.log('[Migration] State reset - all migrations will run again');
 	},
 
 	/**
@@ -500,25 +514,30 @@ export const MigrationService = {
 	 */
 	async runAllMigrations(): Promise<void> {
 		const state = getMigrationState();
-		console.log('[Migration] Starting migration run, state:', state);
+		if (import.meta.env.DEV && import.meta.env.VITE_DEBUG)
+			console.log('[Migration] Starting migration run, state:', state);
 
 		for (const migration of migrations) {
 			if (isMigrationCompleted(migration.id)) {
-				console.log(`[Migration] ${migration.id}: already completed, skipping`);
+				if (import.meta.env.DEV && import.meta.env.VITE_DEBUG)
+					console.log(`[Migration] ${migration.id}: already completed, skipping`);
 				continue;
 			}
 
 			try {
-				console.log(`[Migration] ${migration.id}: running...`);
+				if (import.meta.env.DEV && import.meta.env.VITE_DEBUG)
+					console.log(`[Migration] ${migration.id}: running...`);
 				await migration.run();
 				markMigrationCompleted(migration.id);
-				console.log(`[Migration] ${migration.id}: completed successfully`);
+				if (import.meta.env.DEV && import.meta.env.VITE_DEBUG)
+					console.log(`[Migration] ${migration.id}: completed successfully`);
 			} catch (error) {
 				console.error(`[Migration] ${migration.id}: failed`, error);
 				markMigrationFailed(migration.id);
 			}
 		}
 
-		console.log('[Migration] All migrations complete');
+		if (import.meta.env.DEV && import.meta.env.VITE_DEBUG)
+			console.log('[Migration] All migrations complete');
 	}
 };
diff --git a/tools/ui/src/lib/stores/mcp.svelte.ts b/tools/ui/src/lib/stores/mcp.svelte.ts
index 8fb306da881..effb78e339b 100644
--- a/tools/ui/src/lib/stores/mcp.svelte.ts
+++ b/tools/ui/src/lib/stores/mcp.svelte.ts
@@ -20,11 +20,11 @@
  */
 
 import { browser } from '$app/environment';
-import { base } from '$app/paths';
 import { SETTINGS_KEYS } from '$lib/constants';
 import { MCPService } from '$lib/services/mcp.service';
 import { config, settingsStore } from '$lib/stores/settings.svelte';
 import { mcpResourceStore } from '$lib/stores/mcp-resources.svelte';
+import { serverStore } from '$lib/stores/server.svelte';
 import { mode } from 'mode-watcher';
 import {
 	parseMcpServerSettings,
@@ -43,7 +43,6 @@ import {
 	ToolCallType
 } from '$lib/enums';
 import {
-	CORS_PROXY_ENDPOINT,
 	DEFAULT_CACHE_TTL_MS,
 	DEFAULT_MCP_CONFIG,
 	EXPECTED_THEMED_ICON_PAIR_COUNT,
@@ -86,7 +85,6 @@ class MCPStore {
 	private _toolCount = $state(0);
 	private _connectedServers = $state<string[]>([]);
 	private _healthChecks = $state<Record<string, HealthCheckState>>({});
-	private _proxyAvailable = $state(false);
 
 	private connections = new Map<string, MCPConnection>();
 	private toolsIndex = new Map<string, string>();
@@ -96,27 +94,8 @@ class MCPStore {
 	private initPromise: Promise<boolean> | null = null;
 	private activeFlowCount = 0;
 
-	constructor() {
-		if (browser) {
-			this.probeProxy();
-		}
-	}
-
-	/**
-	 * Probes the CORS proxy endpoint to determine availability.
-	 * The endpoint is only registered when llama-server runs with --ui-mcp-proxy.
-	 */
-	async probeProxy(): Promise<void> {
-		try {
-			const response = await fetch(`${base}${CORS_PROXY_ENDPOINT}`, { method: 'HEAD' });
-			this._proxyAvailable = response.status !== 404;
-		} catch {
-			this._proxyAvailable = false;
-		}
-	}
-
 	get isProxyAvailable(): boolean {
-		return this._proxyAvailable;
+		return serverStore.props?.cors_proxy_enabled ?? false;
 	}
 
 	/**
diff --git a/tools/ui/src/lib/stores/models.svelte.ts b/tools/ui/src/lib/stores/models.svelte.ts
index 45981b38fa0..bc99d7412cd 100644
--- a/tools/ui/src/lib/stores/models.svelte.ts
+++ b/tools/ui/src/lib/stores/models.svelte.ts
@@ -3,7 +3,7 @@ import { toast } from 'svelte-sonner';
 import { ServerModelStatus, ModelModality } from '$lib/enums';
 import { ModelsService } from '$lib/services/models.service';
 import { PropsService } from '$lib/services/props.service';
-import { serverStore } from '$lib/stores/server.svelte';
+import { serverStore, isRouterMode } from '$lib/stores/server.svelte';
 import { TTLCache } from '$lib/utils';
 import {
 	MODEL_PROPS_CACHE_TTL_MS,
@@ -14,14 +14,7 @@ import {
 import { conversationsStore } from '$lib/stores/conversations.svelte';
 
 /**
- * modelsStore - Reactive store for model management in both MODEL and ROUTER modes
- *
- * This store manages:
- * - Available models list
- * - Selected model for new conversations
- * - Loaded models tracking (ROUTER mode)
- * - Model usage tracking per conversation
- * - Automatic unloading of unused models
+ * modelsStore - Reactive store for model management in both MODEL and ROUTER modes.
  *
  * **Architecture & Relationships:**
  * - **ModelsService**: Stateless service for model API communication
@@ -31,14 +24,8 @@ import { conversationsStore } from '$lib/stores/conversations.svelte';
  *
  * **API Inconsistency Workaround:**
  * In MODEL mode, `/props` returns modalities for the single model.
- * In ROUTER mode, `/props` has no modalities - must use `/props?model=<id>` per model.
+ * In ROUTER mode, `/props` has no modalities — must use `/props?model=<id>` per model.
  * This store normalizes this behavior so consumers don't need to know the server mode.
- *
- * **Key Features:**
- * - **MODEL mode**: Single model, always loaded
- * - **ROUTER mode**: Multi-model with load/unload capability
- * - **Auto-unload**: Automatically unloads models not used by any conversation
- * - **Lazy loading**: ensureModelLoaded() loads models on demand
  */
 class ModelsStore {
 	/**
@@ -57,8 +44,8 @@ class ModelsStore {
 	selectedModelId = $state<string | null>(null);
 	selectedModelName = $state<string | null>(null);
 
-	// dedup concurrent fetch() callers, all awaiters share the same inflight promise
-	// without this, ?model=<name> URL handler raced an in-progress fetch and saw an empty list
+	// Dedup concurrent fetch() callers — all awaiters share the same inflight promise.
+	// Without this, ?model=<name> URL handler races an in-progress fetch and sees an empty list.
 	private inflightFetch: Promise<void> | null = null;
 
 	private modelUsage = $state<Map<string, SvelteSet<string>>>(new Map());
@@ -67,9 +54,9 @@ class ModelsStore {
 	favoriteModelIds = $state<Set<string>>(this.loadFavoritesFromStorage());
 
 	/**
-	 * Model-specific props cache with TTL
-	 * Key: modelId, Value: props data including modalities
-	 * TTL: 10 minutes - props don't change frequently
+	 * Model-specific props cache with TTL.
+	 * Key: modelId, Value: props data including modalities.
+	 * TTL: 10 minutes — props don't change frequently.
 	 */
 	private modelPropsCache = new TTLCache<string, ApiLlamaCppServerProps>({
 		ttlMs: MODEL_PROPS_CACHE_TTL_MS,
@@ -78,7 +65,7 @@ class ModelsStore {
 	private modelPropsFetching = $state<Set<string>>(new Set());
 
 	/**
-	 * Version counter for props cache - used to trigger reactivity when props are updated
+	 * Version counter for props cache — used to trigger reactivity when props are updated.
 	 */
 	propsCacheVersion = $state(0);
 
@@ -92,7 +79,7 @@ class ModelsStore {
 
 	get selectedModel(): ModelOption | null {
 		if (!this.selectedModelId) return null;
-		return this.models.find((model) => model.id === this.selectedModelId) ?? null;
+		return this.models.find((m) => m.id === this.selectedModelId) ?? null;
 	}
 
 	get loadedModelIds(): string[] {
@@ -117,7 +104,7 @@ class ModelsStore {
 	 * In ROUTER mode, returns null (model is per-conversation).
 	 */
 	get singleModelName(): string | null {
-		if (serverStore.isRouterMode) return null;
+		if (isRouterMode()) return null;
 
 		const props = serverStore.props;
 		if (props?.model_alias) return props.model_alias;
@@ -126,6 +113,11 @@ class ModelsStore {
 		return props.model_path.split(/(\\|\/)/).pop() || null;
 	}
 
+	get selectedModelContextSize(): number | null {
+		if (!this.selectedModelName) return null;
+		return this.getModelContextSize(this.selectedModelName);
+	}
+
 	/**
 	 *
 	 *
@@ -134,10 +126,6 @@ class ModelsStore {
 	 *
 	 */
 
-	/**
-	 * Get modalities for a specific model
-	 * Returns cached modalities from model props
-	 */
 	getModelModalities(modelId: string): ModelModalities | null {
 		const model = this.models.find((m) => m.model === modelId || m.id === modelId);
 		if (model?.modalities) {
@@ -146,46 +134,29 @@ class ModelsStore {
 
 		const props = this.modelPropsCache.get(modelId);
 		if (props?.modalities) {
-			return {
-				vision: props.modalities.vision ?? false,
-				audio: props.modalities.audio ?? false,
-				video: props.modalities.video ?? false
-			};
+			return this.buildModalities(props.modalities);
 		}
 
 		return null;
 	}
 
-	/**
-	 * Check if a model supports vision modality
-	 */
 	modelSupportsVision(modelId: string): boolean {
 		return this.getModelModalities(modelId)?.vision ?? false;
 	}
 
-	/**
-	 * Check if a model supports audio modality
-	 */
 	modelSupportsAudio(modelId: string): boolean {
 		return this.getModelModalities(modelId)?.audio ?? false;
 	}
 
-	/**
-	 * Check if a model supports video modality
-	 */
 	modelSupportsVideo(modelId: string): boolean {
 		return this.getModelModalities(modelId)?.video ?? false;
 	}
 
-	/**
-	 * Get model modalities as an array of ModelModality enum values
-	 */
 	getModelModalitiesArray(modelId: string): ModelModality[] {
 		const modalities = this.getModelModalities(modelId);
 		if (!modalities) return [];
 
 		const result: ModelModality[] = [];
-
 		if (modalities.vision) result.push(ModelModality.VISION);
 		if (modalities.audio) result.push(ModelModality.AUDIO);
 		if (modalities.video) result.push(ModelModality.VIDEO);
@@ -193,16 +164,10 @@ class ModelsStore {
 		return result;
 	}
 
-	/**
-	 * Get props for a specific model (from cache)
-	 */
 	getModelProps(modelId: string): ApiLlamaCppServerProps | null {
 		return this.modelPropsCache.get(modelId);
 	}
 
-	/**
-	 * Get context size (n_ctx) for a specific model from cached props
-	 */
 	getModelContextSize(modelId: string): number | null {
 		const props = this.getModelProps(modelId);
 		const nCtx = props?.default_generation_settings?.n_ctx;
@@ -210,17 +175,6 @@ class ModelsStore {
 		return typeof nCtx === 'number' ? nCtx : null;
 	}
 
-	/**
-	 * Get context size for the currently selected model or null if no model is selected
-	 */
-	get selectedModelContextSize(): number | null {
-		if (!this.selectedModelName) return null;
-		return this.getModelContextSize(this.selectedModelName);
-	}
-
-	/**
-	 * Check if props are being fetched for a model
-	 */
 	isModelPropsFetching(modelId: string): boolean {
 		return this.modelPropsFetching.has(modelId);
 	}
@@ -235,10 +189,10 @@ class ModelsStore {
 
 	isModelLoaded(modelId: string): boolean {
 		const model = this.routerModels.find((m) => m.id === modelId);
+
 		return (
 			model?.status.value === ServerModelStatus.LOADED ||
-			model?.status.value === ServerModelStatus.SLEEPING ||
-			false
+			model?.status.value === ServerModelStatus.SLEEPING
 		);
 	}
 
@@ -248,6 +202,7 @@ class ModelsStore {
 
 	getModelStatus(modelId: string): ServerModelStatus | null {
 		const model = this.routerModels.find((m) => m.id === modelId);
+
 		return model?.status.value ?? null;
 	}
 
@@ -257,6 +212,7 @@ class ModelsStore {
 
 	isModelInUse(modelId: string): boolean {
 		const usage = this.modelUsage.get(modelId);
+
 		return usage !== undefined && usage.size > 0;
 	}
 
@@ -269,8 +225,8 @@ class ModelsStore {
 	 */
 
 	/**
-	 * Fetch list of models from server and detect server role
-	 * Also fetches modalities for MODEL mode (single model)
+	 * Fetch list of models from server and detect server role.
+	 * Also fetches modalities for MODEL mode (single model).
 	 */
 	async fetch(force = false): Promise<void> {
 		if (this.inflightFetch) return this.inflightFetch;
@@ -293,69 +249,87 @@ class ModelsStore {
 				await serverStore.fetch();
 			}
 
-			const response = await ModelsService.list();
-
-			const models: ModelOption[] = response.data.map((item: ApiModelDataEntry, index: number) => {
-				const details = response.models?.[index];
-				const rawCapabilities = Array.isArray(details?.capabilities) ? details?.capabilities : [];
-				const displayNameSource =
-					details?.name && details.name.trim().length > 0 ? details.name : item.id;
-				const displayName = this.toDisplayName(displayNameSource);
-				const modelId = details?.model || item.id;
-
-				return {
-					id: item.id,
-					name: displayName,
-					model: modelId,
-					description: details?.description,
-					capabilities: rawCapabilities.filter((value: unknown): value is string => Boolean(value)),
-					details: details?.details,
-					meta: item.meta ?? null,
-					parsedId: ModelsService.parseModelId(modelId),
-					aliases: item.aliases ?? [],
-					tags: item.tags ?? []
-				} satisfies ModelOption;
-			});
+			const router = isRouterMode();
 
-			this.models = models;
-
-			// WORKAROUND: In MODEL mode, /props returns modalities for the single model,
-			// but /v1/models doesn't include modalities. We bridge this gap here.
-			const serverProps = serverStore.props;
-			if (serverStore.isModelMode && this.models.length > 0 && serverProps?.modalities) {
-				const modalities: ModelModalities = {
-					vision: serverProps.modalities.vision ?? false,
-					audio: serverProps.modalities.audio ?? false,
-					video: serverProps.modalities.video ?? false
-				};
-				this.modelPropsCache.set(this.models[0].model, serverProps);
-				this.models = this.models.map((model, index) =>
-					index === 0 ? { ...model, modalities } : model
-				);
+			if (router) {
+				const response = await ModelsService.listRouter();
+
+				this.routerModels = response.data;
+				this.models = this.buildModelOptions(response);
+
+				await this.fetchModalitiesForLoadedModels();
+
+				const visible = this.getVisibleModels();
+
+				if (visible.length === 1 && this.isModelLoaded(visible[0].model)) {
+					this.selectModelById(visible[0].id);
+				}
+			} else {
+				this.models = await this.fetchModelModeInternal();
 			}
 		} catch (error) {
 			this.models = [];
 			this.error = error instanceof Error ? error.message : 'Failed to load models';
+
 			throw error;
 		} finally {
 			this.loading = false;
 		}
 	}
 
+	/** Fetch models in MODEL mode (single model, standard OpenAI-compatible). */
+	private async fetchModelModeInternal(): Promise<ModelOption[]> {
+		const response = await ModelsService.list();
+
+		return this.buildModelOptions(response);
+	}
+
+	/**
+	 * Build ModelOption[] from an API response.
+	 * Both MODEL and ROUTER modes share the same mapping logic;
+	 * they differ only in which endpoint is called.
+	 */
+	private buildModelOptions(
+		response: ApiModelListResponse | ApiRouterModelsListResponse
+	): ModelOption[] {
+		return response.data.map((item: ApiModelDataEntry, index: number) => {
+			const details = response.models?.[index];
+			const rawCapabilities = Array.isArray(details?.capabilities) ? details?.capabilities : [];
+			const displayNameSource =
+				details?.name && details.name.trim().length > 0 ? details.name : item.id;
+			const modelId = details?.model || item.id;
+
+			return {
+				id: item.id,
+				name: this.toDisplayName(displayNameSource),
+				model: modelId,
+				description: details?.description,
+				capabilities: rawCapabilities.filter((value: unknown): value is string => Boolean(value)),
+				details: details?.details,
+				meta: item.meta ?? null,
+				parsedId: ModelsService.parseModelId(modelId),
+				aliases: item.aliases ?? [],
+				tags: item.tags ?? []
+			};
+		});
+	}
+
 	/**
-	 * Fetch router models with full metadata (ROUTER mode only)
-	 * This fetches the /models endpoint which returns status info for each model
+	 * Fetch router models with full metadata (ROUTER mode only).
+	 * No-op in router mode — fetch() already calls listRouter() internally.
+	 * Kept for API compatibility (e.g. handleOpenChange dropdown open handler).
 	 */
 	async fetchRouterModels(): Promise<void> {
+		if (!isRouterMode()) return;
+
 		try {
 			const response = await ModelsService.listRouter();
 			this.routerModels = response.data;
 			await this.fetchModalitiesForLoadedModels();
 
-			const o = this.models.filter((option) => this.getModelProps(option.model)?.ui !== false);
-
-			if (o.length === 1 && this.isModelLoaded(o[0].model)) {
-				this.selectModelById(o[0].id);
+			const visible = this.getVisibleModels();
+			if (visible.length === 1 && this.isModelLoaded(visible[0].model)) {
+				this.selectModelById(visible[0].id);
 			}
 		} catch (error) {
 			console.warn('Failed to fetch router models:', error);
@@ -364,10 +338,10 @@ class ModelsStore {
 	}
 
 	/**
-	 * Fetch props for a specific model from /props endpoint
-	 * Uses caching to avoid redundant requests
+	 * Fetch props for a specific model from /props endpoint.
+	 * Uses caching to avoid redundant requests.
 	 *
-	 * In ROUTER mode, this will only fetch props if the model is loaded,
+	 * In ROUTER mode, this only fetches props if the model is loaded,
 	 * since unloaded models return 400 from /props endpoint.
 	 *
 	 * @param modelId - Model identifier to fetch props for
@@ -397,10 +371,7 @@ class ModelsStore {
 		}
 	}
 
-	/**
-	 * Fetch modalities for all loaded models from /props endpoint
-	 * This updates the modalities field in models array
-	 */
+	/** Fetch modalities for all loaded models from /props endpoint. */
 	async fetchModalitiesForLoadedModels(): Promise<void> {
 		const loadedModelIds = this.loadedModelIds;
 		if (loadedModelIds.length === 0) return;
@@ -410,7 +381,6 @@ class ModelsStore {
 		try {
 			const results = await Promise.all(propsPromises);
 
-			// Update models with modalities
 			this.models = this.models.map((model) => {
 				const modelIndex = loadedModelIds.indexOf(model.model);
 				if (modelIndex === -1) return model;
@@ -418,13 +388,7 @@ class ModelsStore {
 				const props = results[modelIndex];
 				if (!props?.modalities) return model;
 
-				const modalities: ModelModalities = {
-					vision: props.modalities.vision ?? false,
-					audio: props.modalities.audio ?? false,
-					video: props.modalities.video ?? false
-				};
-
-				return { ...model, modalities };
+				return { ...model, modalities: this.buildModalities(props.modalities) };
 			});
 
 			this.propsCacheVersion++;
@@ -433,17 +397,38 @@ class ModelsStore {
 		}
 	}
 
+	/**
+	 * Update modalities for a specific model.
+	 * Called when a model is loaded or when we need fresh modality data.
+	 */
+	async updateModelModalities(modelId: string): Promise<void> {
+		const props = await this.fetchModelProps(modelId);
+		if (!props?.modalities) return;
+
+		this.models = this.models.map((model) =>
+			model.model === modelId
+				? { ...model, modalities: this.buildModalities(props.modalities!) }
+				: model
+		);
+
+		this.propsCacheVersion++;
+	}
+
+	/**
+	 * Filter to models visible in the UI (ui !== false).
+	 */
+	private getVisibleModels(): ModelOption[] {
+		return this.models.filter((option) => this.getModelProps(option.model)?.ui !== false);
+	}
+
 	/**
 	 * Gets the model name from the last assistant message in the active conversation.
-	 * Iterates backward through messages to find the most recent message with a model.
 	 * Used by both the chat page and settings page to maintain model consistency.
-	 * @returns The model name or null if not found
 	 */
 	getModelFromLastAssistantResponse(): string | null {
 		const messages = conversationsStore.activeMessages;
 		if (!messages || messages.length === 0) return null;
 
-		// Iterate backward to find the last message with a model
 		for (let i = messages.length - 1; i >= 0; i--) {
 			if (messages[i].model) {
 				return messages[i].model;
@@ -456,22 +441,13 @@ class ModelsStore {
 	/**
 	 * Auto-selects the model from the last assistant response if available and loaded.
 	 * Returns true if a model was selected, false otherwise.
-	 * This is used by the chat page to maintain model consistency across page navigation.
 	 */
 	async selectModelFromLastAssistantResponse(): Promise<boolean> {
 		const lastModel = this.getModelFromLastAssistantResponse();
-		if (!lastModel) return false;
-
-		// Skip if already selected
-		if (this.selectedModelName === lastModel) return false;
+		if (!lastModel || this.selectedModelName === lastModel) return false;
 
 		const matchingModel = this.models.find((option) => option.model === lastModel);
-		if (!matchingModel) return false;
-
-		if (!this.isModelLoaded(lastModel)) {
-			console.log('[modelsStore] last assistant model not loaded:', lastModel);
-			return false;
-		}
+		if (!matchingModel || !this.isModelLoaded(lastModel)) return false;
 
 		try {
 			await this.selectModelById(matchingModel.id);
@@ -484,22 +460,17 @@ class ModelsStore {
 	}
 
 	/**
-	 * Auto-selects the first available model if none is selected, and fetches its props.
+	 * Auto-selects the first available model if none is selected.
 	 * Prioritizes:
 	 * 1. Model from active conversation's last assistant response (if loaded)
 	 * 2. Model from active conversation's last assistant response (if not loaded)
 	 * 3. First loaded model (not from active conversation)
 	 * 4. First available model
-	 * This is used to ensure default values are populated in settings pages.
 	 */
 	async ensureFirstModelSelected(): Promise<void> {
 		if (this.selectedModelName) return;
 
-		// Filter models that are visible in the UI
-		const availableModels = this.models.filter(
-			(option) => this.getModelProps(option.model)?.ui !== false
-		);
-
+		const availableModels = this.getVisibleModels();
 		if (availableModels.length === 0) return;
 
 		// Try to select model from last assistant response first
@@ -515,7 +486,7 @@ class ModelsStore {
 			}
 		}
 
-		// Try to find a loaded model first
+		// Try a loaded model first
 		const loadedModel = availableModels.find((m) => this.isModelLoaded(m.model));
 		if (loadedModel) {
 			await this.selectModelById(loadedModel.id);
@@ -524,34 +495,7 @@ class ModelsStore {
 		}
 
 		// Fall back to the first available model
-		const firstModel = availableModels[0];
-		await this.selectModelById(firstModel.id);
-		// Don't fetch props for unloaded models (will fail in ROUTER mode)
-	}
-
-	/**
-	 * Update modalities for a specific model
-	 * Called when a model is loaded or when we need fresh modality data
-	 */
-	async updateModelModalities(modelId: string): Promise<void> {
-		try {
-			const props = await this.fetchModelProps(modelId);
-			if (!props?.modalities) return;
-
-			const modalities: ModelModalities = {
-				vision: props.modalities.vision ?? false,
-				audio: props.modalities.audio ?? false,
-				video: props.modalities.video ?? false
-			};
-
-			this.models = this.models.map((model) =>
-				model.model === modelId ? { ...model, modalities } : model
-			);
-
-			this.propsCacheVersion++;
-		} catch (error) {
-			console.warn(`Failed to update modalities for model ${modelId}:`, error);
-		}
+		await this.selectModelById(availableModels[0].id);
 	}
 
 	/**
@@ -562,9 +506,6 @@ class ModelsStore {
 	 *
 	 */
 
-	/**
-	 * Select a model for new conversations
-	 */
 	async selectModelById(modelId: string): Promise<void> {
 		if (!modelId || this.updating) return;
 		if (this.selectedModelId === modelId) return;
@@ -584,8 +525,7 @@ class ModelsStore {
 	}
 
 	/**
-	 * Select a model by its model name (used for syncing with conversation model)
-	 * @param modelName - Model name to select (e.g., "ggml-org/GLM-4.7-Flash-GGUF")
+	 * Select a model by its model name (used for syncing with conversation model).
 	 */
 	selectModelByName(modelName: string): void {
 		const option = this.models.find((model) => model.model === modelName);
@@ -615,7 +555,7 @@ class ModelsStore {
 	/**
 	 *
 	 *
-	 * Loading/Unloading Models
+	 * Loading / Unloading Models
 	 *
 	 *
 	 */
@@ -623,27 +563,18 @@ class ModelsStore {
 	/**
 	 * WORKAROUND: Polling for model status after load/unload operations.
 	 *
-	 * Currently, the `/models/load` and `/models/unload` endpoints return success
-	 * before the operation actually completes on the server. This means an immediate
-	 * request to `/models` returns stale status (e.g., "loading" after load request,
-	 * "loaded" after unload request).
+	 * Currently, `/models/load` and `/models/unload` return success before
+	 * the operation actually completes on the server.
 	 *
-	 * TODO: Remove this polling once llama-server properly waits for the operation
-	 * to complete before returning success from `/load` and `/unload` endpoints.
-	 * At that point, a single `fetchRouterModels()` call after the operation will
-	 * be sufficient to get the correct status.
+	 * TODO: Remove polling once llama-server properly waits for the operation
+	 * to complete before returning success.
 	 */
 
-	/** Polling interval in ms for checking model status */
 	private static readonly STATUS_POLL_INTERVAL = 500;
 
 	/**
 	 * Poll for expected model status after load/unload operation.
-	 * Keeps polling indefinitely until the model reaches the expected status or fails.
-	 *
-	 * @param modelId - Model identifier to check
-	 * @param expectedStatus - Expected status to wait for
-	 * @throws Error if model reaches FAILED status
+	 * Keeps polling until the model reaches the expected status or fails.
 	 */
 	private async pollForModelStatus(
 		modelId: string,
@@ -654,9 +585,7 @@ class ModelsStore {
 			await this.fetchRouterModels();
 
 			const currentStatus = this.getModelStatus(modelId);
-			if (currentStatus === expectedStatus) {
-				return;
-			}
+			if (currentStatus === expectedStatus) return;
 
 			if (currentStatus === ServerModelStatus.FAILED) {
 				throw new Error(
@@ -677,15 +606,8 @@ class ModelsStore {
 		}
 	}
 
-	/**
-	 * Load a model (ROUTER mode)
-	 * @param modelId - Model identifier to load
-	 */
 	async loadModel(modelId: string): Promise<void> {
-		if (this.isModelLoaded(modelId)) {
-			return;
-		}
-
+		if (this.isModelLoaded(modelId)) return;
 		if (this.modelLoadingStates.get(modelId)) return;
 
 		this.modelLoadingStates.set(modelId, true);
@@ -694,7 +616,6 @@ class ModelsStore {
 		try {
 			await ModelsService.load(modelId);
 			await this.pollForModelStatus(modelId, ServerModelStatus.LOADED);
-
 			await this.updateModelModalities(modelId);
 			toast.success(`Model loaded: ${this.toDisplayName(modelId)}`);
 		} catch (error) {
@@ -706,15 +627,8 @@ class ModelsStore {
 		}
 	}
 
-	/**
-	 * Unload a model (ROUTER mode)
-	 * @param modelId - Model identifier to unload
-	 */
 	async unloadModel(modelId: string): Promise<void> {
-		if (!this.isModelLoaded(modelId)) {
-			return;
-		}
-
+		if (!this.isModelLoaded(modelId)) return;
 		if (this.modelLoadingStates.get(modelId)) return;
 
 		this.modelLoadingStates.set(modelId, true);
@@ -722,7 +636,6 @@ class ModelsStore {
 
 		try {
 			await ModelsService.unload(modelId);
-
 			await this.pollForModelStatus(modelId, ServerModelStatus.UNLOADED);
 			toast.info(`Model unloaded: ${this.toDisplayName(modelId)}`);
 		} catch (error) {
@@ -734,15 +647,8 @@ class ModelsStore {
 		}
 	}
 
-	/**
-	 * Ensure a model is loaded before use
-	 * @param modelId - Model identifier to ensure is loaded
-	 */
 	async ensureModelLoaded(modelId: string): Promise<void> {
-		if (this.isModelLoaded(modelId)) {
-			return;
-		}
-
+		if (this.isModelLoaded(modelId)) return;
 		await this.loadModel(modelId);
 	}
 
@@ -779,11 +685,9 @@ class ModelsStore {
 	private loadFavoritesFromStorage(): Set<string> {
 		try {
 			const raw = localStorage.getItem(FAVORITE_MODELS_LOCALSTORAGE_KEY);
-
 			return raw ? new Set(JSON.parse(raw) as string[]) : new Set();
 		} catch {
 			toast.error('Failed to load favorite models from local storage');
-
 			return new Set();
 		}
 	}
@@ -799,10 +703,19 @@ class ModelsStore {
 	private toDisplayName(id: string): string {
 		const segments = id.split(/\\|\//);
 		const candidate = segments.pop();
-
 		return candidate && candidate.trim().length > 0 ? candidate : id;
 	}
 
+	private buildModalities(
+		modalities: NonNullable<ApiLlamaCppServerProps['modalities']>
+	): ModelModalities {
+		return {
+			vision: modalities.vision ?? false,
+			audio: modalities.audio ?? false,
+			video: modalities.video ?? false
+		};
+	}
+
 	clear(): void {
 		this.models = [];
 		this.routerModels = [];
diff --git a/tools/ui/src/lib/types/api.d.ts b/tools/ui/src/lib/types/api.d.ts
index 316ad552842..5f0a38dd3c3 100644
--- a/tools/ui/src/lib/types/api.d.ts
+++ b/tools/ui/src/lib/types/api.d.ts
@@ -203,6 +203,7 @@ export interface ApiLlamaCppServerProps {
 	/** @deprecated Use {@link ui_settings} instead */
 	webui_settings?: Record<string, string | number | boolean>;
 	ui_settings?: Record<string, string | number | boolean>;
+	cors_proxy_enabled?: boolean;
 }
 
 export interface ApiChatCompletionRequest {
diff --git a/tools/ui/src/lib/utils/api-key-validation.ts b/tools/ui/src/lib/utils/api-key-validation.ts
index 948b7d7b6bb..dbbf9a09b2b 100644
--- a/tools/ui/src/lib/utils/api-key-validation.ts
+++ b/tools/ui/src/lib/utils/api-key-validation.ts
@@ -12,17 +12,21 @@ export async function validateApiKey(fetch: typeof globalThis.fetch): Promise<vo
 		return;
 	}
 
-	try {
-		const apiKey = config().apiKey;
+	const apiKey = config().apiKey;
+
+	// No API key configured — server doesn't require auth, skip the request entirely.
+	// The /props endpoint is only protected when the server has API keys configured,
+	// and in that case the client always has one set (from settings).
+	if (!apiKey) {
+		return;
+	}
 
+	try {
 		const headers: Record<string, string> = {
-			'Content-Type': 'application/json'
+			'Content-Type': 'application/json',
+			Authorization: `Bearer ${apiKey}`
 		};
 
-		if (apiKey) {
-			headers.Authorization = `Bearer ${apiKey}`;
-		}
-
 		const response = await fetch(`${base}/props`, { headers });
 
 		if (!response.ok) {
diff --git a/tools/ui/src/lib/utils/legacy-migration.ts b/tools/ui/src/lib/utils/legacy-migration.ts
index 19755f6eee9..6b0890a3631 100644
--- a/tools/ui/src/lib/utils/legacy-migration.ts
+++ b/tools/ui/src/lib/utils/legacy-migration.ts
@@ -333,7 +333,8 @@ async function migrateConversation(convId: string): Promise<number> {
 export async function runLegacyMigration(): Promise<void> {
 	if (!isMigrationNeeded()) return;
 
-	console.log('[Migration] Starting legacy message format migration...');
+	if (import.meta.env.DEV && import.meta.env.VITE_DEBUG)
+		console.log('[Migration] Starting legacy message format migration...');
 
 	try {
 		const conversations = await DatabaseService.getAllConversations();
@@ -344,12 +345,14 @@ export async function runLegacyMigration(): Promise<void> {
 			totalMigrated += count;
 		}
 
-		if (totalMigrated > 0) {
-			console.log(
-				`[Migration] Migrated ${totalMigrated} messages across ${conversations.length} conversations`
-			);
-		} else {
-			console.log('[Migration] No legacy messages found, marking as done');
+		if (import.meta.env.DEV && import.meta.env.VITE_DEBUG) {
+			if (totalMigrated > 0) {
+				console.log(
+					`[Migration] Migrated ${totalMigrated} messages across ${conversations.length} conversations`
+				);
+			} else {
+				console.log('[Migration] No legacy messages found, marking as done');
+			}
 		}
 
 		markMigrationDone();
diff --git a/tools/ui/src/routes/(chat)/+page.svelte b/tools/ui/src/routes/(chat)/+page.svelte
index c272b438ef1..9db1d445fe8 100644
--- a/tools/ui/src/routes/(chat)/+page.svelte
+++ b/tools/ui/src/routes/(chat)/+page.svelte
@@ -3,7 +3,6 @@
 	import { chatStore } from '$lib/stores/chat.svelte';
 	import { conversationsStore, isConversationsInitialized } from '$lib/stores/conversations.svelte';
 	import { modelsStore, modelOptions } from '$lib/stores/models.svelte';
-	import { isRouterMode } from '$lib/stores/server.svelte';
 	import { onMount } from 'svelte';
 	import { page } from '$app/state';
 	import { replaceState } from '$app/navigation';
@@ -72,23 +71,13 @@
 		conversationsStore.clearActiveConversation();
 		chatStore.clearUIState();
 
-		if (
-			isRouterMode() &&
-			modelsStore.selectedModelName &&
-			!modelsStore.isModelLoaded(modelsStore.selectedModelName)
-		) {
-			modelsStore.clearSelection();
-
-			const first = modelOptions().find((m) => modelsStore.loadedModelIds.includes(m.model));
-			if (first) {
-				await modelsStore.selectModelById(first.id);
-			}
-		}
+		await modelsStore.fetch();
 
-		// Handle URL params only if we have ?q= or ?model= or ?new_chat=true
 		if (qParam !== null || modelParam !== null || newChatParam === 'true') {
 			await handleUrlParams();
 		}
+
+		await modelsStore.ensureFirstModelSelected();
 	});
 </script>
 
diff --git a/tools/ui/src/routes/+layout.svelte b/tools/ui/src/routes/+layout.svelte
index e03d13fefda..b35d20a5cd5 100644
--- a/tools/ui/src/routes/+layout.svelte
+++ b/tools/ui/src/routes/+layout.svelte
@@ -84,29 +84,34 @@
 	function checkApiKey() {
 		const apiKey = config().apiKey;
 
-		if (
-			(page.route.id === '/(chat)' || page.route.id === '/(chat)/chat/[id]') &&
-			page.status !== 401 &&
-			page.status !== 403
-		) {
-			const headers: Record<string, string> = {
-				'Content-Type': 'application/json'
-			};
-
-			if (apiKey && apiKey.trim() !== '') {
-				headers.Authorization = `Bearer ${apiKey.trim()}`;
-			}
-
-			fetch(`${base}/props`, { headers })
-				.then((response) => {
-					if (response.status === 401 || response.status === 403) {
-						window.location.reload();
-					}
-				})
-				.catch((e) => {
-					console.error('Error checking API key:', e);
-				});
+		// No API key configured — server doesn't require auth, no need to validate.
+		// This mirrors the early return in validateApiKey() to avoid redundant /props requests.
+		if (!apiKey || apiKey.trim() === '') {
+			return;
 		}
+
+		untrack(() => {
+			if (
+				(page.route.id === '/(chat)' || page.route.id === '/(chat)/chat/[id]') &&
+				page.status !== 401 &&
+				page.status !== 403
+			) {
+				const headers: Record<string, string> = {
+					'Content-Type': 'application/json',
+					Authorization: `Bearer ${apiKey.trim()}`
+				};
+
+				fetch(`${base}/props`, { headers })
+					.then((response) => {
+						if (response.status === 401 || response.status === 403) {
+							window.location.reload();
+						}
+					})
+					.catch((e) => {
+						console.error('Error checking API key:', e);
+					});
+			}
+		});
 	}
 
 	function handleTitleUpdateCancel() {
diff --git a/tools/ui/tests/client/page.svelte.test.ts b/tools/ui/tests/client/page.svelte.test.ts
index 6849beb27b2..32e333d7f51 100644
--- a/tools/ui/tests/client/page.svelte.test.ts
+++ b/tools/ui/tests/client/page.svelte.test.ts
@@ -4,8 +4,9 @@ import TestWrapper from './components/TestWrapper.svelte';
 
 describe('/+page.svelte', () => {
 	it('should render page without throwing', async () => {
-		// Basic smoke test - page should render without throwing errors
-		// API calls will fail in test environment but component should still mount
-		expect(() => render(TestWrapper)).not.toThrow();
+		// Basic smoke test - page should render without throwing errors.
+		// API calls are mocked in vitest-setup-client.ts.
+		await render(TestWrapper);
+		expect(true).toBe(true);
 	});
 });
diff --git a/tools/ui/vitest-setup-client.ts b/tools/ui/vitest-setup-client.ts
index 570b9f0e1a0..0b753db02b1 100644
--- a/tools/ui/vitest-setup-client.ts
+++ b/tools/ui/vitest-setup-client.ts
@@ -1,2 +1,78 @@
 /// <reference types="@vitest/browser/matchers" />
 /// <reference types="@vitest/browser/providers/playwright" />
+
+import { beforeEach, vi } from 'vitest';
+
+// Mock fetch for API calls during client tests.
+// In test environment there is no backend server, so we intercept
+// the specific endpoints the app uses and return valid mock data.
+beforeEach(() => {
+	const originalFetch = globalThis.fetch;
+
+	vi.spyOn(globalThis, 'fetch').mockImplementation(async (input: RequestInfo | URL, init?: RequestInit) => {
+		const url = typeof input === 'string' ? input : input instanceof URL ? input.href : input.url;
+
+		// Mock server props endpoint
+		if (url.includes('/server')) {
+			return new Response(
+				JSON.stringify({
+					mode: 'router',
+					version: 'test',
+					git_commit: 'test',
+					git_branch: 'test'
+				}),
+				{ status: 200, headers: { 'Content-Type': 'application/json' } }
+			);
+		}
+
+		// Mock models list endpoint
+		if (/\/v1\/models|\/models\b/.test(url)) {
+			return new Response(
+				JSON.stringify({
+					object: 'list',
+					data: [
+						{
+							id: 'test-model.gguf',
+							object: 'model',
+							owned_by: 'llamacpp',
+							created: 0,
+							in_cache: false,
+							path: 'models/test-model.gguf',
+							status: { value: 'unloaded' },
+							meta: {}
+						}
+					],
+					models: [
+						{
+							model: 'test-model.gguf',
+							name: 'Test Model',
+							details: {}
+						}
+					]
+				}),
+				{ status: 200, headers: { 'Content-Type': 'application/json' } }
+			);
+		}
+
+		// Mock /props endpoint (used for modalities)
+		if (url.includes('/props')) {
+			return new Response(
+				JSON.stringify({
+					default_generation_settings: { n_ctx: 2048 }
+				}),
+				{ status: 200, headers: { 'Content-Type': 'application/json' } }
+			);
+		}
+
+		// Mock /tools endpoint (used for built-in tools list)
+		if (url.includes('/tools')) {
+			return new Response(JSON.stringify([]), {
+				status: 200,
+				headers: { 'Content-Type': 'application/json' }
+			});
+		}
+
+		// Default: use real fetch
+		return originalFetch(input, init);
+	});
+});

From b9a2170fce1f3f33cb4934b34efecb806bbbb348 Mon Sep 17 00:00:00 2001
From: Aleksander Grygier <aleksander.grygier@gmail.com>
Date: Mon, 18 May 2026 16:17:21 +0200
Subject: [PATCH 6/8] feat: add scroll-to-bottom button to chat + prevent
 forced scroll down (#23270)

---
 .../app/chat/ChatScreen/ChatScreen.svelte     |  9 +++-
 .../ChatScreenActionScrollDown.svelte         | 48 +++++++++++++++++++
 tools/ui/src/lib/components/app/chat/index.ts |  7 +++
 .../src/lib/hooks/use-auto-scroll.svelte.ts   |  8 ++++
 4 files changed, 70 insertions(+), 2 deletions(-)
 create mode 100644 tools/ui/src/lib/components/app/chat/ChatScreen/ChatScreenActionScrollDown.svelte

diff --git a/tools/ui/src/lib/components/app/chat/ChatScreen/ChatScreen.svelte b/tools/ui/src/lib/components/app/chat/ChatScreen/ChatScreen.svelte
index dc3eab134f4..bd93a569ce6 100644
--- a/tools/ui/src/lib/components/app/chat/ChatScreen/ChatScreen.svelte
+++ b/tools/ui/src/lib/components/app/chat/ChatScreen/ChatScreen.svelte
@@ -8,6 +8,7 @@
 		ChatMessages,
 		ChatScreenDragOverlay,
 		ChatScreenProcessingInfo,
+		ChatScreenActionScrollDown,
 		DialogEmptyFileAlert,
 		DialogFileUploadError,
 		DialogChatError,
@@ -338,7 +339,9 @@
 	});
 
 	function handleMessagesReady() {
-		if (!disableAutoScroll && !autoScroll.userScrolledUp) {
+		if (disableAutoScroll) return;
+
+		if (!autoScroll.userScrolledUp) {
 			requestAnimationFrame(() => {
 				autoScroll.scrollToBottom('instant');
 			});
@@ -405,7 +408,7 @@
 			<div
 				class="pointer-events-none {isEmpty
 					? 'absolute bottom-[calc(50dvh-7rem)]'
-					: 'sticky bottom-4'} right-4 left-4 mt-auto pt-16 transition-all duration-200"
+					: 'sticky bottom-4'} right-4 left-4 mt-auto -mb-14 pt-16 transition-all duration-200"
 			>
 				{#if isEmpty}
 					<div class="mb-8 px-4 text-center" use:fadeInView={{ duration: 300 }}>
@@ -419,6 +422,8 @@
 					</div>
 				{/if}
 
+				<ChatScreenActionScrollDown container={chatScrollContainer} />
+
 				{#if page.params.id}
 					<ChatScreenProcessingInfo />
 				{/if}
diff --git a/tools/ui/src/lib/components/app/chat/ChatScreen/ChatScreenActionScrollDown.svelte b/tools/ui/src/lib/components/app/chat/ChatScreen/ChatScreenActionScrollDown.svelte
new file mode 100644
index 00000000000..3f3ee867710
--- /dev/null
+++ b/tools/ui/src/lib/components/app/chat/ChatScreen/ChatScreenActionScrollDown.svelte
@@ -0,0 +1,48 @@
+<script lang="ts">
+	import { ArrowDown } from '@lucide/svelte';
+	import { Button } from '$lib/components/ui/button';
+
+	let { container }: { container: HTMLDivElement | undefined } = $props();
+
+	let show = $state(false);
+
+	function checkVisibility() {
+		if (!container) return;
+		const { scrollTop, scrollHeight, clientHeight } = container;
+		const distanceFromBottom = scrollHeight - clientHeight - scrollTop;
+		show = distanceFromBottom > clientHeight * 0.5;
+	}
+
+	function scrollToBottom() {
+		if (container) {
+			container.scrollTo({
+				top: container.scrollHeight,
+				behavior: 'smooth'
+			});
+		}
+	}
+
+	$effect(() => {
+		const c = container;
+		if (c) {
+			c.addEventListener('scroll', checkVisibility);
+			checkVisibility();
+			return () => {
+				c.removeEventListener('scroll', checkVisibility);
+			};
+		}
+	});
+</script>
+
+<div class="pointer-events-auto relative z-50 mx-auto mb-4 flex max-w-[48rem] justify-center">
+	<Button
+		onclick={scrollToBottom}
+		variant="secondary"
+		size="icon"
+		class="h-10 w-10 rounded-full bg-background/80 shadow-lg backdrop-blur-sm transition-all duration-200 hover:bg-muted/80"
+		aria-label="Scroll to bottom"
+		style="transform: translateY({show ? '0' : '20px'}); opacity: {show ? 1 : 0};"
+	>
+		<ArrowDown class="h-4 w-4" />
+	</Button>
+</div>
diff --git a/tools/ui/src/lib/components/app/chat/index.ts b/tools/ui/src/lib/components/app/chat/index.ts
index 5f65979803c..9c7ce864e21 100644
--- a/tools/ui/src/lib/components/app/chat/index.ts
+++ b/tools/ui/src/lib/components/app/chat/index.ts
@@ -667,3 +667,10 @@ export { default as ChatScreenForm } from './ChatScreen/ChatScreenForm.svelte';
  * Only visible when `isCurrentConversationLoading` is true.
  */
 export { default as ChatScreenProcessingInfo } from './ChatScreen/ChatScreenProcessingInfo.svelte';
+
+/**
+ * Scroll-to-bottom action button. Displays a floating button when the user
+ * has scrolled up more than half a viewport height from the bottom.
+ * Takes the chat container element as a prop to manage scroll state internally.
+ */
+export { default as ChatScreenActionScrollDown } from './ChatScreen/ChatScreenActionScrollDown.svelte';
diff --git a/tools/ui/src/lib/hooks/use-auto-scroll.svelte.ts b/tools/ui/src/lib/hooks/use-auto-scroll.svelte.ts
index f59e3ed4b72..7bac452e4e9 100644
--- a/tools/ui/src/lib/hooks/use-auto-scroll.svelte.ts
+++ b/tools/ui/src/lib/hooks/use-auto-scroll.svelte.ts
@@ -100,6 +100,14 @@ export class AutoScrollController {
 		this._autoScrollEnabled = true;
 	}
 
+	/**
+	 * Resets scroll state when switching conversations.
+	 */
+	resetScrollState(): void {
+		this._userScrolledUp = false;
+		this._autoScrollEnabled = true;
+	}
+
 	/**
 	 * Starts the auto-scroll interval for continuous scrolling during streaming.
 	 */

From 3a9c1b854dc9290be7cf8e4c89bd404770020161 Mon Sep 17 00:00:00 2001
From: Aleksander Grygier <aleksander.grygier@gmail.com>
Date: Mon, 18 May 2026 16:26:01 +0200
Subject: [PATCH 7/8] ui: Update KaTeX package and clean up logs from `sass`
 warnings (#23275)

* ui: migrate katex imports to @use to resolve SCSS deprecation warnings

* ci: Use `ubuntu-slim` for CI (UI) workflow
---
 .github/workflows/ui-ci.yml           |  4 ++--
 tools/ui/package-lock.json            |  6 +++---
 tools/ui/src/styles/katex-custom.scss |  9 ++++++---
 tools/ui/vite.config.ts               | 12 ------------
 4 files changed, 11 insertions(+), 20 deletions(-)

diff --git a/.github/workflows/ui-ci.yml b/.github/workflows/ui-ci.yml
index 43d6e125687..7f6f467ddaa 100644
--- a/.github/workflows/ui-ci.yml
+++ b/.github/workflows/ui-ci.yml
@@ -41,7 +41,7 @@ jobs:
   ui-checks:
     name: UI Checks
     needs: ui-build
-    runs-on: ubuntu-24.04-arm
+    runs-on: ubuntu-slim
     continue-on-error: true
     steps:
       - name: Checkout code
@@ -93,7 +93,7 @@ jobs:
   e2e-tests:
     name: E2E Tests
     needs: ui-build
-    runs-on: ubuntu-24.04-arm
+    runs-on: ubuntu-slim
     steps:
       - name: Checkout code
         uses: actions/checkout@v6
diff --git a/tools/ui/package-lock.json b/tools/ui/package-lock.json
index bf23307b82c..3686eb3261e 100644
--- a/tools/ui/package-lock.json
+++ b/tools/ui/package-lock.json
@@ -6008,9 +6008,9 @@
 			}
 		},
 		"node_modules/katex": {
-			"version": "0.16.22",
-			"resolved": "https://registry.npmjs.org/katex/-/katex-0.16.22.tgz",
-			"integrity": "sha512-XCHRdUw4lf3SKBaJe4EvgqIuWwkPSo9XoeO8GjQW94Bp7TWv9hNhzZjZ+OH9yf1UmLygb7DIT5GSFQiyt16zYg==",
+			"version": "0.16.47",
+			"resolved": "https://registry.npmjs.org/katex/-/katex-0.16.47.tgz",
+			"integrity": "sha512-Eeo8Ys1doU1z+x8AZsPpQu+p/QcZBI5PeOo7QGQdy2x2m0MU/hYagBbGOmXwr5KVbEfVuWv9LpnQWeehogurjg==",
 			"dev": true,
 			"funding": [
 				"https://opencollective.com/katex",
diff --git a/tools/ui/src/styles/katex-custom.scss b/tools/ui/src/styles/katex-custom.scss
index 9c8b96ed52f..0e385844a18 100644
--- a/tools/ui/src/styles/katex-custom.scss
+++ b/tools/ui/src/styles/katex-custom.scss
@@ -8,6 +8,9 @@ $use-ttf: false;
 $font-folder: 'katex-fonts';
 
 // Import KaTeX SCSS with overridden variables
-// Note: @import is deprecated but required because KaTeX uses @import internally
-// The deprecation warnings are from KaTeX's code and cannot be avoided
-@import 'katex/src/styles/katex.scss';
+@use 'katex/src/styles/katex.scss' with (
+	$use-woff2: true,
+	$use-woff: false,
+	$use-ttf: false,
+	$font-folder: 'katex-fonts'
+);
diff --git a/tools/ui/vite.config.ts b/tools/ui/vite.config.ts
index d3db24bf2bf..f89a689d5e6 100644
--- a/tools/ui/vite.config.ts
+++ b/tools/ui/vite.config.ts
@@ -23,18 +23,6 @@ export default defineConfig({
 		minify: true
 	},
 
-	css: {
-		preprocessorOptions: {
-			scss: {
-				additionalData: `
-					$use-woff2: true;
-					$use-woff: false;
-					$use-ttf: false;
-				`
-			}
-		}
-	},
-
 	plugins: [tailwindcss(), sveltekit(), devtoolsJson(), llamaCppBuildPlugin()],
 
 	test: {

From 45b455e66fc09abed65b7d52d42a4a29ba0d45d6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adrien=20Gallou=C3=ABt?= <angt@huggingface.co>
Date: Mon, 18 May 2026 17:11:47 +0200
Subject: [PATCH 8/8] common : remove hf cache migration (#23266)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Adrien Gallouët <angt@huggingface.co>
---
 common/arg.cpp      |   7 --
 common/hf-cache.cpp | 274 --------------------------------------------
 common/hf-cache.h   |   4 -
 3 files changed, 285 deletions(-)

diff --git a/common/arg.cpp b/common/arg.cpp
index d7a935fc179..ab23b77e021 100644
--- a/common/arg.cpp
+++ b/common/arg.cpp
@@ -4,7 +4,6 @@
 #include "chat.h"
 #include "common.h"
 #include "download.h"
-#include "hf-cache.h"
 #include "json-schema-to-grammar.h"
 #include "log.h"
 #include "sampling.h"
@@ -586,12 +585,6 @@ static bool common_params_parse_ex(int argc, char ** argv, common_params_context
     // parse the first time to get -hf option (used for remote preset)
     parse_cli_args();
 
-    // TODO: Remove later
-    try {
-        hf_cache::migrate_old_cache_to_hf_cache(params.hf_token, params.offline);
-    } catch (const std::exception & e) {
-        LOG_WRN("HF cache migration failed: %s\n", e.what());
-    }
     // export_graph_ops loads only metadata
     const bool skip_model_download = ctx_arg.ex == LLAMA_EXAMPLE_EXPORT_GRAPH_OPS;
 
diff --git a/common/hf-cache.cpp b/common/hf-cache.cpp
index 20f33e4c7f4..ba7417a12bb 100644
--- a/common/hf-cache.cpp
+++ b/common/hf-cache.cpp
@@ -11,7 +11,6 @@
 #include <filesystem>
 #include <fstream>
 #include <atomic>
-#include <regex> // migration only
 #include <string>
 #include <string_view>
 #include <stdexcept>
@@ -336,15 +335,9 @@ hf_files get_repo_files(const std::string & repo_id,
                 if (item["lfs"].contains("oid") && item["lfs"]["oid"].is_string()) {
                     file.oid = item["lfs"]["oid"].get<std::string>();
                 }
-                if (item["lfs"].contains("size") && item["lfs"]["size"].is_number()) {
-                    file.size = item["lfs"]["size"].get<size_t>();
-                }
             } else if (item.contains("oid") && item["oid"].is_string()) {
                 file.oid = item["oid"].get<std::string>();
             }
-            if (file.size == 0 && item.contains("size") && item["size"].is_number()) {
-                file.size = item["size"].get<size_t>();
-            }
 
             if (!file.oid.empty() && !is_valid_oid(file.oid)) {
                 LOG_WRN("%s: skip invalid oid: %s\n", __func__, file.oid.c_str());
@@ -502,271 +495,4 @@ std::string finalize_file(const hf_file & file) {
     return file.final_path;
 }
 
-// delete everything after this line, one day
-
-// copied from download.cpp without the tag part
-struct gguf_split_info {
-    std::string prefix; // tag included
-    int index;
-    int count;
-};
-
-static gguf_split_info get_gguf_split_info(const std::string & path) {
-    static const std::regex re_split("^(.+)-([0-9]{5})-of-([0-9]{5})$", std::regex::icase);
-    std::smatch m;
-
-    std::string prefix = path;
-    if (!string_remove_suffix(prefix, ".gguf")) {
-        return {};
-    }
-
-    int index = 1;
-    int count = 1;
-
-    if (std::regex_match(prefix, m, re_split)) {
-        index = std::stoi(m[2].str());
-        count = std::stoi(m[3].str());
-        prefix = m[1].str();
-    }
-
-    return {std::move(prefix), index, count};
-}
-
-static std::pair<std::string, std::string> parse_manifest_name(std::string & filename) {
-    static const std::regex re(R"(^manifest=([^=]+)=([^=]+)=.*\.json$)");
-    std::smatch match;
-    if (std::regex_match(filename, match, re)) {
-        return {match[1].str(), match[2].str()};
-    }
-    return {};
-}
-
-static std::string make_old_cache_filename(const std::string & owner,
-                                           const std::string & repo,
-                                           const std::string & filename) {
-    auto result = owner + "_" + repo + "_" + filename;
-    string_replace_all(result, "/", "_");
-    return result;
-}
-
-struct migrate_file {
-    std::string path;
-    std::string sha256;
-    size_t size;
-    fs::path old_path;
-    fs::path etag_path;
-    const hf_file * file;
-};
-
-using migrate_files = std::vector<migrate_file>;
-
-static bool collect_file(const fs::path    & old_cache,
-                         const std::string & owner,
-                         const std::string & repo,
-                         const std::string & path,
-                         const std::string & sha256,
-                         const hf_files    & files,
-                         migrate_files     & to_migrate) {
-
-    const hf_file * file = nullptr;
-
-    for (const auto & f : files) {
-        if (f.path == path) {
-            file = &f;
-            break;
-        }
-    }
-
-    std::string old_filename = make_old_cache_filename(owner, repo, path);
-    fs::path old_path = old_cache / old_filename;
-    fs::path etag_path = old_path.string() + ".etag";
-
-    if (!fs::exists(old_path)) {
-        if (file && fs::exists(file->final_path)) {
-            return true;
-        }
-        LOG_WRN("%s: %s not found in old cache or HF cache\n", __func__, old_filename.c_str());
-        return false;
-    }
-
-    if (!file) {
-        LOG_WRN("%s: %s not found in current repo\n", __func__, old_filename.c_str());
-        return false;
-    }
-
-    if (!sha256.empty() && !file->oid.empty() && sha256 != file->oid) {
-        LOG_WRN("%s: %s is not up to date (sha256 mismatch)\n", __func__, old_filename.c_str());
-        return false;
-    }
-
-    if (file->size > 0) {
-        size_t size = fs::file_size(old_path);
-        if (size != file->size) {
-            LOG_WRN("%s: %s has wrong size %zu (expected %zu)\n", __func__, old_filename.c_str(), size, file->size);
-            return false;
-        }
-    }
-
-    to_migrate.push_back({path, sha256, file->size, old_path, etag_path, file});
-    return true;
-}
-
-static bool collect_files(const fs::path    & old_cache,
-                          const std::string & owner,
-                          const std::string & repo,
-                          const nl::json    & node,
-                          const hf_files    & files,
-                          migrate_files     & to_migrate) {
-
-    if (!node.contains("rfilename") ||
-        !node.contains("lfs")       ||
-        !node["lfs"].contains("sha256")) {
-        return true;
-    }
-
-    std::string path = node["rfilename"];
-    std::string sha256 = node["lfs"]["sha256"];
-
-    auto split = get_gguf_split_info(path);
-
-    if (split.count <= 1) {
-        return collect_file(old_cache, owner, repo, path, sha256, files, to_migrate);
-    }
-
-    std::vector<std::pair<std::string, std::string>> splits;
-
-    for (const auto & f : files) {
-        auto split_f = get_gguf_split_info(f.path);
-        if (split_f.count == split.count && split_f.prefix == split.prefix) {
-            // sadly the manifest only provides the sha256 of the first file (index == 1)
-            // the rest will be verified using the size...
-            std::string f_sha256 = (split_f.index == 1) ? sha256 : "";
-            splits.emplace_back(f.path, f_sha256);
-        }
-    }
-
-    if ((int)splits.size() != split.count) {
-        LOG_WRN("%s: expected %d split files but found %d in repo\n", __func__, split.count, (int)splits.size());
-        return false;
-    }
-
-    for (const auto & [f_path, f_sha256] : splits) {
-        if (!collect_file(old_cache, owner, repo, f_path, f_sha256, files, to_migrate)) {
-            return false;
-        }
-    }
-
-    return true;
-}
-
-static bool migrate_file(const migrate_file & file) {
-    std::error_code ec;
-
-    fs::path new_path(file.file->local_path);
-    fs::create_directories(new_path.parent_path(), ec);
-
-    if (!fs::exists(new_path, ec)) {
-        fs::rename(file.old_path, new_path, ec);
-        if (ec) {
-            fs::copy_file(file.old_path, new_path, ec);
-            if (ec) {
-                LOG_ERR("%s: failed to move/copy %s: %s\n", __func__, file.old_path.string().c_str(), ec.message().c_str());
-                return false;
-            }
-        }
-        fs::remove(file.old_path, ec);
-    }
-    fs::remove(file.etag_path, ec);
-
-    std::string filename = finalize_file(*file.file);
-    LOG_INF("%s: migrated %s -> %s\n", __func__, file.old_path.filename().string().c_str(), filename.c_str());
-    return true;
-}
-
-void migrate_old_cache_to_hf_cache(const std::string & token, bool offline) {
-    fs::path old_cache = fs_get_cache_directory();
-    if (!fs::exists(old_cache)) {
-        return;
-    }
-
-    if (offline) {
-        LOG_WRN("%s: skipping migration in offline mode (will run when online)\n", __func__);
-        return; // -hf is not going to work
-    }
-
-    bool warned = false;
-
-    for (const auto & entry : fs::directory_iterator(old_cache)) {
-        if (!entry.is_regular_file()) {
-            continue;
-        }
-        auto filename = entry.path().filename().string();
-        auto [owner, repo] = parse_manifest_name(filename);
-
-        if (owner.empty() || repo.empty()) {
-            continue;
-        }
-
-        if (!warned) {
-            warned = true;
-            LOG_WRN("================================================================================\n"
-                    "WARNING: Migrating cache to HuggingFace cache directory\n"
-                    "  Old cache: %s\n"
-                    "  New cache: %s\n"
-                    "This one-time migration moves models previously downloaded with -hf\n"
-                    "from the legacy llama.cpp cache to the standard HuggingFace cache.\n"
-                    "Models downloaded with --model-url are not affected.\n"
-                    "================================================================================\n",
-                    old_cache.string().c_str(), get_cache_directory().string().c_str());
-        }
-
-        auto repo_id = owner + "/" + repo;
-        auto files = get_repo_files(repo_id, token);
-
-        if (files.empty()) {
-            LOG_WRN("%s: could not get repo files for %s, skipping\n", __func__, repo_id.c_str());
-            continue;
-        }
-
-        migrate_files to_migrate;
-        bool ok = true;
-
-        try {
-            std::ifstream manifest(entry.path());
-            auto json = nl::json::parse(manifest);
-            for (const char * key : {"ggufFile", "mmprojFile"}) {
-                if (json.contains(key)) {
-                    if (!collect_files(old_cache, owner, repo, json[key], files, to_migrate)) {
-                        ok = false;
-                        break;
-                    }
-                }
-            }
-        } catch (const std::exception & e) {
-            LOG_WRN("%s: failed to parse manifest %s: %s\n", __func__, filename.c_str(), e.what());
-            continue;
-        }
-
-        if (!ok) {
-            LOG_WRN("%s: migration skipped: one or more files failed validation\n", __func__);
-            continue;
-        }
-
-        for (const auto & file : to_migrate) {
-            if (!migrate_file(file)) {
-                ok = false;
-                break;
-            }
-        }
-
-        if (!ok) {
-            LOG_WRN("%s: migration failed: could not migrate all files\n", __func__);
-            continue;
-        }
-
-        LOG_INF("%s: migration complete, deleting manifest: %s\n", __func__, entry.path().string().c_str());
-        fs::remove(entry.path());
-    }
-}
-
 } // namespace hf_cache
diff --git a/common/hf-cache.h b/common/hf-cache.h
index 9e46f977437..23fa0adb729 100644
--- a/common/hf-cache.h
+++ b/common/hf-cache.h
@@ -14,7 +14,6 @@ struct hf_file {
     std::string final_path;
     std::string oid;
     std::string repo_id;
-    size_t size = 0; // only for the migration
 };
 
 using hf_files = std::vector<hf_file>;
@@ -30,7 +29,4 @@ hf_files get_cached_files(const std::string & repo_id = {});
 // Create snapshot path (link or move/copy) and return it
 std::string finalize_file(const hf_file & file);
 
-// TODO: Remove later
-void migrate_old_cache_to_hf_cache(const std::string & token, bool offline = false);
-
 } // namespace hf_cache