Repository: ggerganov/llama.cpp
File: tools/server/webui/src/lib/components/app/models/ModelsSelector.svelte (Svelte)

Code before:
			} else {
				highlightedIndex = compatibleIndices[currentPos + 1];
			}
		} else if (event.key === 'ArrowUp') {
			event.preventDefault();
			if (compatibleIndices.length === 0) return;

			const currentPos = compatibleIndices.indexOf(highlightedIndex);
			if (currentPos === -1 || currentPos === 0) {
				highlightedIndex = compatibleIndices[compatibleIndices.length - 1];
			} else {
				highlightedIndex = compatibleIndices[currentPos - 1];
			}
		} else if (event.key === 'Enter') {
			event.preventDefault();
			if (highlightedIndex >= 0 && highlightedIndex < filteredOptions.length) {
				const option = filteredOptions[highlightedIndex];
				if (isModelCompatible(option)) {
					handleSelect(option.id);
				}
			} else if (compatibleIndices.length > 0) {
				// No selection - highlight first compatible option
				highlightedIndex = compatibleIndices[0];
			}
		}
	}

	async function handleSelect(modelId: string) {
		const option = options.find((opt) => opt.id === modelId);
		if (!option) return;

		let shouldCloseMenu = true;

		if (onModelChange) {
			// If callback provided, use it (for regenerate functionality)
			const result = await onModelChange(option.id, option.model);

			// If callback returns false, keep menu open (validation failed)
			if (result === false) {
				shouldCloseMenu = false;
			}
		} else {
			// Update global selection
			await modelsStore.selectModelById(option.id);

			// Load the model if not already loaded (router mode)
			if (isRouter && getModelStatus(option.model) !== ServerModelStatus.LOADED) {
				try {
					await modelsStore.loadModel(option.model);
				} catch (error) {
					console.error('Failed to load model:', error);

Review comment (suggestion):
```suggestion
		if (options.length === 1) {
			return options[0];
		}
```

Code after:
			const selected = options.find((option) => option.id === activeId);
			if (selected) return selected;
		}

		// Show currentModel (from message payload or conversation)
		if (currentModel) {
			if (!isCurrentModelInCache()) {
				return {
					id: 'not-in-cache',
					model: currentModel,
					name: currentModel.split('/').pop() || currentModel,
					capabilities: []
				};
			}

			return options.find((option) => option.model === currentModel);
		}

		// Fallback to user selection (for new chats before first message)
		if (activeId) {
			return options.find((option) => option.id === activeId);
		}

		if (options.length === 1) {
			return options[0];
		}
		// No selection - return undefined to show "Select model"
		return undefined;
	}
</script>

<div class={cn('relative inline-flex flex-col items-end gap-1', className)}>
	{#if loading && options.length === 0 && isRouter}
		<div class="flex items-center gap-2 text-xs text-muted-foreground">
			<Loader2 class="h-3.5 w-3.5 animate-spin" />
			Loading models…
		</div>
	{:else if options.length === 0 && isRouter}
		<p class="text-xs text-muted-foreground">No models available.</p>
	{:else}
		{@const selectedOption = getDisplayOption()}

		{#if isRouter}
			<DropdownMenu.Root bind:open={isOpen} onOpenChange={handleOpenChange}>
				<DropdownMenu.Trigger
					disabled={disabled || updating}
					onclick={(e) => {
						e.preventDefault();
						e.stopPropagation();
					}}
				>