ui: Refactor models store, MCP service, and gate logs behind VITE_DEBUG

tools/server/server-context.cpp

@@ -3880,6 +3880,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()) {

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;
         }

tools/ui/.env.example

@@ -0,0 +1,2 @@
+VITE_PUBLIC_APP_NAME='llama-ui'
+# VITE_DEBUG='true'

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,15 +163,15 @@
 	<ModelsSelectorSheet
 		disabled={disabled || isOffline}
 		bind:this={selectorModelRef}
-		{currentModel}
+		currentModel={selectorModel}
 		{forceForegroundText}
 		{useGlobalSelection}
 	/>
 {:else}
 	<ModelsSelectorDropdown
 		disabled={disabled || isOffline}
 		bind:this={selectorModelRef}
-		{currentModel}
+		currentModel={selectorModel}
 		{forceForegroundText}
 		{useGlobalSelection}
 	/>

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,

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
 	};
 }

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:`,