webui: Improvements for Models Selector UI (#20066)

tools/server/webui/src/lib/components/app/models/ModelBadge.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { Package } from '@lucide/svelte';
 	import { BadgeInfo, ActionIconCopyToClipboard } from '$lib/components/app';
+	import ModelId from './ModelId.svelte';
 	import { modelsStore } from '$lib/stores/models.svelte';
 	import { serverStore } from '$lib/stores/server.svelte';
 	import * as Tooltip from '$lib/components/ui/tooltip';
@@ -23,6 +24,7 @@
 
 	let model = $derived(modelProp || modelsStore.singleModelName);
 	let isModelMode = $derived(serverStore.isModelMode);
+	let shouldShow = $derived(model && (modelProp !== undefined || isModelMode));
 </script>
 
 {#snippet badgeContent()}
@@ -31,7 +33,9 @@
 			<Package class="h-3 w-3" />
 		{/snippet}
 
-		{model}
+		{#if model}
+			<ModelId modelId={model} />
+		{/if}
 
 		{#if showCopyIcon}
 			<ActionIconCopyToClipboard text={model || ''} ariaLabel="Copy model name" />
@@ -39,7 +43,7 @@
 	</BadgeInfo>
 {/snippet}
 
-{#if model && isModelMode}
+{#if shouldShow}
 	{#if showTooltip}
 		<Tooltip.Root>
 			<Tooltip.Trigger>

tools/server/webui/src/lib/components/app/models/ModelId.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+	import { ModelsService } from '$lib/services/models.service';
+	import { config } from '$lib/stores/settings.svelte';
+
+	interface Props {
+		modelId: string;
+		showOrgName?: boolean;
+		showRaw?: boolean;
+		aliases?: string[];
+		tags?: string[];
+		class?: string;
+	}
+
+	let {
+		modelId,
+		showOrgName = false,
+		showRaw = undefined,
+		aliases,
+		tags,
+		class: className = ''
+	}: Props = $props();
+
+	const badgeClass =
+		'inline-flex w-fit shrink-0 items-center justify-center whitespace-nowrap rounded-md border border-border/50 px-1 py-0 text-[10px] font-mono bg-foreground/15 dark:bg-foreground/10 text-foreground [a&]:hover:bg-foreground/25';
+	const tagBadgeClass =
+		'inline-flex w-fit shrink-0 items-center justify-center whitespace-nowrap rounded-md border border-border/50 px-1 py-0 text-[10px] font-mono text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground';
+
+	let parsed = $derived(ModelsService.parseModelId(modelId));
+	let resolvedShowRaw = $derived(showRaw ?? (config().showRawModelNames as boolean) ?? false);
+</script>
+
+{#if resolvedShowRaw}
+	<span class="min-w-0 truncate font-medium {className}">{modelId}</span>
+{:else}
+	<span class="flex min-w-0 flex-wrap items-center gap-1 {className}">
+		<span class="min-w-0 truncate font-medium">
+			{#if showOrgName}{parsed.orgName}/{/if}{parsed.modelName ?? modelId}
+		</span>
+
+		{#if parsed.params}
+			<span class={badgeClass}>
+				{parsed.params}{parsed.activatedParams ? `-${parsed.activatedParams}` : ''}
+			</span>
+		{/if}
+
+		{#if parsed.quantization}
+			<span class={badgeClass}>
+				{parsed.quantization}
+			</span>
+		{/if}
+
+		{#if aliases && aliases.length > 0}
+			{#each aliases as alias (alias)}
+				<span class={badgeClass}>{alias}</span>
+			{/each}
+		{/if}
+
+		{#if tags && tags.length > 0}
+			{#each tags as tag (tag)}
+				<span class={tagBadgeClass}>{tag}</span>
+			{/each}
+		{/if}
+	</span>
+{/if}

tools/server/webui/src/lib/components/app/models/ModelsSelector.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
-	import { ChevronDown, Loader2, Package, Power } from '@lucide/svelte';
+	import { SvelteMap } from 'svelte/reactivity';
+	import { ChevronDown, Loader2, Package } from '@lucide/svelte';
 	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
 	import * as Tooltip from '$lib/components/ui/tooltip';
 	import { cn } from '$lib/components/ui/utils';
@@ -10,35 +11,33 @@
 		modelsLoading,
 		modelsUpdating,
 		selectedModelId,
-		routerModels,
 		singleModelName
 	} from '$lib/stores/models.svelte';
-	import { KeyboardKey, ServerModelStatus } from '$lib/enums';
+	import { KeyboardKey } from '$lib/enums';
 	import { isRouterMode } from '$lib/stores/server.svelte';
 	import {
 		DialogModelInformation,
 		DropdownMenuSearchable,
-		TruncatedText
+		ModelId,
+		ModelsSelectorOption
 	} from '$lib/components/app';
 	import type { ModelOption } from '$lib/types/models';
 
 	interface Props {
 		class?: string;
 		currentModel?: string | null;
-		/** Callback when model changes. Return false to keep menu open (e.g., for validation failures) */
-		onModelChange?: (modelId: string, modelName: string) => Promise<boolean> | boolean | void;
 		disabled?: boolean;
 		forceForegroundText?: boolean;
-		/** When true, user's global selection takes priority over currentModel (for form selector) */
+		onModelChange?: (modelId: string, modelName: string) => Promise<boolean> | boolean | void;
 		useGlobalSelection?: boolean;
 	}
 
 	let {
 		class: className = '',
 		currentModel = null,
-		onModelChange,
 		disabled = false,
 		forceForegroundText = false,
+		onModelChange,
 		useGlobalSelection = false
 	}: Props = $props();
 
@@ -55,46 +54,109 @@
 	let isRouter = $derived(isRouterMode());
 	let serverModel = $derived(singleModelName());
 
-	// Reactive router models state - needed for proper reactivity of status checks
-	let currentRouterModels = $derived(routerModels());
+	let isHighlightedCurrentModelActive = $derived.by(() => {
+		if (!isRouter || !currentModel) return false;
 
-	function getModelStatus(modelId: string): ServerModelStatus | null {
-		const model = currentRouterModels.find((m) => m.id === modelId);
-		return (model?.status?.value as ServerModelStatus) ?? null;
-	}
+		const currentOption = options.find((option) => option.model === currentModel);
 
-	let isHighlightedCurrentModelActive = $derived(
-		!isRouter || !currentModel
-			? false
-			: (() => {
-					const currentOption = options.find((option) => option.model === currentModel);
+		return currentOption ? currentOption.id === activeId : false;
+	});
 
-					return currentOption ? currentOption.id === activeId : false;
-				})()
-	);
-
-	let isCurrentModelInCache = $derived(() => {
+	let isCurrentModelInCache = $derived.by(() => {
 		if (!isRouter || !currentModel) return true;
 
 		return options.some((option) => option.model === currentModel);
 	});
 
+	let isLoadingModel = $state(false);
+
 	let searchTerm = $state('');
 	let highlightedIndex = $state<number>(-1);
 
-	let filteredOptions: ModelOption[] = $derived(
-		(() => {
-			const term = searchTerm.trim().toLowerCase();
-			if (!term) return options;
+	let filteredOptions: ModelOption[] = $derived.by(() => {
+		const term = searchTerm.trim().toLowerCase();
+		if (!term) return options;
 
-			return options.filter(
-				(option) =>
-					option.model.toLowerCase().includes(term) || option.name?.toLowerCase().includes(term)
-			);
-		})()
-	);
+		return options.filter(
+			(option) =>
+				option.model.toLowerCase().includes(term) ||
+				option.name?.toLowerCase().includes(term) ||
+				option.aliases?.some((alias: string) => alias.toLowerCase().includes(term)) ||
+				option.tags?.some((tag: string) => tag.toLowerCase().includes(term))
+		);
+	});
+
+	let groupedFilteredOptions = $derived.by(() => {
+		const favIds = modelsStore.favouriteModelIds;
+		const result: {
+			orgName: string | null;
+			isFavouritesGroup: boolean;
+			isLoadedGroup: boolean;
+			items: { option: ModelOption; flatIndex: number }[];
+		}[] = [];
+
+		// Loaded models group (top)
+		const loadedItems: { option: ModelOption; flatIndex: number }[] = [];
+		for (let i = 0; i < filteredOptions.length; i++) {
+			if (modelsStore.isModelLoaded(filteredOptions[i].model)) {
+				loadedItems.push({ option: filteredOptions[i], flatIndex: i });
+			}
+		}
+
+		if (loadedItems.length > 0) {
+			result.push({
+				orgName: null,
+				isFavouritesGroup: false,
+				isLoadedGroup: true,
+				items: loadedItems
+			});
+		}
+
+		// Favourites group
+		const loadedModelIds = new Set(loadedItems.map((item) => item.option.model));
+		const favItems: { option: ModelOption; flatIndex: number }[] = [];
+		for (let i = 0; i < filteredOptions.length; i++) {
+			if (favIds.has(filteredOptions[i].model) && !loadedModelIds.has(filteredOptions[i].model)) {
+				favItems.push({ option: filteredOptions[i], flatIndex: i });
+			}
+		}
+
+		if (favItems.length > 0) {
+			result.push({
+				orgName: null,
+				isFavouritesGroup: true,
+				isLoadedGroup: false,
+				items: favItems
+			});
+		}
+
+		// Org groups (excluding loaded and favourites)
+		const orgGroups = new SvelteMap<string, { option: ModelOption; flatIndex: number }[]>();
+		for (let i = 0; i < filteredOptions.length; i++) {
+			const option = filteredOptions[i];
+
+			if (loadedModelIds.has(option.model) || favIds.has(option.model)) continue;
+
+			const orgName = option.parsedId?.orgName ?? null;
+			const key = orgName ?? '';
+
+			if (!orgGroups.has(key)) orgGroups.set(key, []);
+
+			orgGroups.get(key)!.push({ option, flatIndex: i });
+		}
+
+		for (const [orgName, items] of orgGroups) {
+			result.push({
+				orgName: orgName || null,
+				isFavouritesGroup: false,
+				isLoadedGroup: false,
+				items
+			});
+		}
+
+		return result;
+	});
 
-	// Reset highlighted index when search term changes
 	$effect(() => {
 		void searchTerm;
 		highlightedIndex = -1;
@@ -109,8 +171,6 @@
 		});
 	});
 
-	// Handle changes to the model selector dropdown or the model dialog, depending on if the server is in
-	// router mode or not.
 	function handleOpenChange(open: boolean) {
 		if (loading || updating) return;
 
@@ -142,6 +202,7 @@
 
 		if (event.key === KeyboardKey.ARROW_DOWN) {
 			event.preventDefault();
+
 			if (filteredOptions.length === 0) return;
 
 			if (highlightedIndex === -1 || highlightedIndex === filteredOptions.length - 1) {
@@ -151,6 +212,7 @@
 			}
 		} else if (event.key === KeyboardKey.ARROW_UP) {
 			event.preventDefault();
+
 			if (filteredOptions.length === 0) return;
 
 			if (highlightedIndex === -1 || highlightedIndex === 0) {
@@ -160,11 +222,12 @@
 			}
 		} else if (event.key === KeyboardKey.ENTER) {
 			event.preventDefault();
+
 			if (highlightedIndex >= 0 && highlightedIndex < filteredOptions.length) {
 				const option = filteredOptions[highlightedIndex];
+
 				handleSelect(option.id);
 			} else if (filteredOptions.length > 0) {
-				// No selection - highlight first option
 				highlightedIndex = 0;
 			}
 		}
@@ -177,31 +240,18 @@
 		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);
-				}
-			}
 		}
 
 		if (shouldCloseMenu) {
 			handleOpenChange(false);
 
-			// Focus the chat textarea after model selection
 			requestAnimationFrame(() => {
 				const textarea = document.querySelector<HTMLTextAreaElement>(
 					'[data-slot="chat-form"] textarea'
@@ -209,32 +259,39 @@
 				textarea?.focus();
 			});
 		}
+
+		if (!onModelChange && isRouter && !modelsStore.isModelLoaded(option.model)) {
+			isLoadingModel = true;
+			modelsStore
+				.loadModel(option.model)
+				.catch((error) => console.error('Failed to load model:', error))
+				.finally(() => (isLoadingModel = false));
+		}
 	}
 
 	function getDisplayOption(): ModelOption | undefined {
 		if (!isRouter) {
-			if (serverModel) {
+			const displayModel = serverModel || currentModel;
+			if (displayModel) {
 				return {
-					id: 'current',
-					model: serverModel,
-					name: serverModel.split('/').pop() || serverModel,
-					capabilities: [] // Empty array for single model mode
+					id: serverModel ? 'current' : 'offline-current',
+					model: displayModel,
+					name: displayModel.split('/').pop() || displayModel,
+					capabilities: []
 				};
 			}
 
 			return undefined;
 		}
 
-		// When useGlobalSelection is true (form selector), prioritize user selection
-		// Otherwise (message display), prioritize currentModel
 		if (useGlobalSelection && activeId) {
 			const selected = options.find((option) => option.id === activeId);
+
 			if (selected) return selected;
 		}
 
-		// Show currentModel (from message payload or conversation)
 		if (currentModel) {
-			if (!isCurrentModelInCache()) {
+			if (!isCurrentModelInCache) {
 				return {
 					id: 'not-in-cache',
 					model: currentModel,
@@ -246,12 +303,10 @@
 			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);
 		}
 
-		// No selection - return undefined to show "Select model"
 		return undefined;
 	}
 </script>
@@ -260,10 +315,25 @@
 	{#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>
+		{#if currentModel}
+			<span
+				class={cn(
+					'inline-flex items-center gap-1.5 rounded-sm bg-muted-foreground/10 px-1.5 py-1 text-xs text-muted-foreground',
+					className
+				)}
+				style="max-width: min(calc(100cqw - 9rem), 20rem)"
+			>
+				<Package class="h-3.5 w-3.5" />
+
+				<ModelId modelId={currentModel} class="min-w-0" showOrgName />
+			</span>
+		{:else}
+			<p class="text-xs text-muted-foreground">No models available.</p>
+		{/if}
 	{:else}
 		{@const selectedOption = getDisplayOption()}
 
@@ -280,7 +350,7 @@
 						type="button"
 						class={cn(
 							`inline-grid cursor-pointer grid-cols-[1fr_auto_1fr] items-center gap-1.5 rounded-sm bg-muted-foreground/10 px-1.5 py-1 text-xs transition hover:text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-60`,
-							!isCurrentModelInCache()
+							!isCurrentModelInCache
 								? 'bg-red-400/10 !text-red-400 hover:bg-red-400/20 hover:text-red-400'
 								: forceForegroundText
 									? 'text-foreground'
@@ -294,12 +364,21 @@
 					>
 						<Package class="h-3.5 w-3.5" />
 
-						<TruncatedText
-							text={selectedOption?.model || 'Select model'}
-							class="min-w-0 font-medium"
-						/>
+						{#if selectedOption}
+							<Tooltip.Root>
+								<Tooltip.Trigger class="min-w-0 overflow-hidden">
+									<ModelId modelId={selectedOption.model} class="min-w-0" showOrgName />
+								</Tooltip.Trigger>
 
-						{#if updating}
+								<Tooltip.Content>
+									<p class="font-mono">{selectedOption.model}</p>
+								</Tooltip.Content>
+							</Tooltip.Root>
+						{:else}
+							<span class="min-w-0 font-medium">Select model</span>
+						{/if}
+
+						{#if updating || isLoadingModel}
 							<Loader2 class="h-3 w-3.5 animate-spin" />
 						{:else}
 							<ChevronDown class="h-3 w-3.5" />
@@ -316,10 +395,10 @@
 						placeholder="Search models..."
 						onSearchKeyDown={handleSearchKeyDown}
 						emptyMessage="No models found."
-						isEmpty={filteredOptions.length === 0 && isCurrentModelInCache()}
+						isEmpty={filteredOptions.length === 0 && isCurrentModelInCache}
 					>
 						<div class="models-list">
-							{#if !isCurrentModelInCache() && currentModel}
+							{#if !isCurrentModelInCache && currentModel}
 								<!-- Show unavailable model as first option (disabled) -->
 								<button
 									type="button"
@@ -329,90 +408,54 @@
 									aria-disabled="true"
 									disabled
 								>
-									<span
-										class="min-w-0 flex-1 truncate text-left sm:overflow-visible sm:text-clip sm:whitespace-nowrap"
-									>
-										{selectedOption?.name || currentModel}
-									</span>
+									<ModelId modelId={currentModel} class="flex-1" showOrgName />
+
 									<span class="ml-2 text-xs whitespace-nowrap opacity-70">(not available)</span>
 								</button>
-								<div class="my-1 h-px bg-border"></div>
 							{/if}
+
 							{#if filteredOptions.length === 0}
 								<p class="px-4 py-3 text-sm text-muted-foreground">No models found.</p>
 							{/if}
-							{#each filteredOptions as option, index (option.id)}
-								{@const status = getModelStatus(option.model)}
-								{@const isLoaded = status === ServerModelStatus.LOADED}
-								{@const isLoading = status === ServerModelStatus.LOADING}
-								{@const isSelected = currentModel === option.model || activeId === option.id}
-								{@const isHighlighted = index === highlightedIndex}
 
-								<div
-									class={cn(
-										'group flex w-full items-center gap-2 rounded-sm p-2 text-left text-sm transition focus:outline-none',
-										'cursor-pointer hover:bg-muted focus:bg-muted',
-										isSelected || isHighlighted
-											? 'bg-accent text-accent-foreground'
-											: 'hover:bg-accent hover:text-accent-foreground',
-										isLoaded ? 'text-popover-foreground' : 'text-muted-foreground'
-									)}
-									role="option"
-									aria-selected={isSelected || isHighlighted}
-									tabindex="0"
-									onclick={() => handleSelect(option.id)}
-									onmouseenter={() => (highlightedIndex = index)}
-									onkeydown={(e) => {
-										if (e.key === 'Enter' || e.key === ' ') {
-											e.preventDefault();
-											handleSelect(option.id);
-										}
-									}}
-								>
-									<span
-										class="min-w-0 flex-1 truncate text-left sm:overflow-visible sm:pr-2 sm:text-clip sm:whitespace-nowrap"
+							{#each groupedFilteredOptions as group (group.isLoadedGroup ? '__loaded__' : group.isFavouritesGroup ? '__favourites__' : group.orgName)}
+								{#if group.isLoadedGroup}
+									<p class="px-2 py-2 text-xs font-semibold text-muted-foreground/60 select-none">
+										Loaded models
+									</p>
+								{:else if group.isFavouritesGroup}
+									<p class="px-2 py-2 text-xs font-semibold text-muted-foreground/60 select-none">
+										Favourite models
+									</p>
+								{:else if group.orgName}
+									<p
+										class="px-2 py-2 text-xs font-semibold text-muted-foreground/60 select-none [&:not(:first-child)]:mt-2"
 									>
-										{option.model}
-									</span>
+										{group.orgName}
+									</p>
+								{/if}
 
-									<div class="flex w-6 shrink-0 justify-center">
-										{#if isLoading}
-											<Tooltip.Root>
-												<Tooltip.Trigger>
-													<Loader2 class="h-4 w-4 animate-spin text-muted-foreground" />
-												</Tooltip.Trigger>
-												<Tooltip.Content class="z-[9999]">
-													<p>Loading model...</p>
-												</Tooltip.Content>
-											</Tooltip.Root>
-										{:else if isLoaded}
-											<Tooltip.Root>
-												<Tooltip.Trigger>
-													<button
-														type="button"
-														class="relative flex h-4 w-4 items-center justify-center"
-														onclick={(e) => {
-															e.stopPropagation();
-															modelsStore.unloadModel(option.model);
-														}}
-													>
-														<span
-															class="h-2 w-2 rounded-full bg-green-500 transition-opacity group-hover:opacity-0"
-														></span>
-														<Power
-															class="absolute h-4 w-4 text-red-500 opacity-0 transition-opacity group-hover:opacity-100 hover:text-red-600"
-														/>
-													</button>
-												</Tooltip.Trigger>
-												<Tooltip.Content class="z-[9999]">
-													<p>Unload model</p>
-												</Tooltip.Content>
-											</Tooltip.Root>
-										{:else}
-											<span class="h-2 w-2 rounded-full bg-muted-foreground/50"></span>
-										{/if}
-									</div>
-								</div>
+								{#each group.items as { option, flatIndex } (group.isLoadedGroup ? `loaded-${option.id}` : group.isFavouritesGroup ? `fav-${option.id}` : option.id)}
+									{@const isSelected = currentModel === option.model || activeId === option.id}
+									{@const isHighlighted = flatIndex === highlightedIndex}
+									{@const isFav = modelsStore.favouriteModelIds.has(option.model)}
+
+									<ModelsSelectorOption
+										{option}
+										{isSelected}
+										{isHighlighted}
+										{isFav}
+										showOrgName={group.isFavouritesGroup || group.isLoadedGroup}
+										onSelect={handleSelect}
+										onMouseEnter={() => (highlightedIndex = flatIndex)}
+										onKeyDown={(e) => {
+											if (e.key === KeyboardKey.ENTER || e.key === KeyboardKey.SPACE) {
+												e.preventDefault();
+												handleSelect(option.id);
+											}
+										}}
+									/>
+								{/each}
 							{/each}
 						</div>
 					</DropdownMenuSearchable>
@@ -422,7 +465,7 @@
 			<button
 				class={cn(
 					`inline-flex cursor-pointer items-center gap-1.5 rounded-sm bg-muted-foreground/10 px-1.5 py-1 text-xs transition hover:text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-60`,
-					!isCurrentModelInCache()
+					!isCurrentModelInCache
 						? 'bg-red-400/10 !text-red-400 hover:bg-red-400/20 hover:text-red-400'
 						: forceForegroundText
 							? 'text-foreground'
@@ -437,7 +480,17 @@
 			>
 				<Package class="h-3.5 w-3.5" />
 
-				<TruncatedText text={selectedOption?.model || ''} class="min-w-0 font-medium" />
+				{#if selectedOption}
+					<Tooltip.Root>
+						<Tooltip.Trigger class="min-w-0 overflow-hidden">
+							<ModelId modelId={selectedOption.model} class="min-w-0" showOrgName />
+						</Tooltip.Trigger>
+
+						<Tooltip.Content>
+							<p class="font-mono">{selectedOption.model}</p>
+						</Tooltip.Content>
+					</Tooltip.Root>
+				{/if}
 
 				{#if updating}
 					<Loader2 class="h-3 w-3.5 animate-spin" />

tools/server/webui/src/lib/components/app/models/ModelsSelectorOption.svelte

@@ -0,0 +1,143 @@
+<script lang="ts">
+	import { CircleAlert, Heart, HeartOff, Loader2, Power, PowerOff, RotateCw } from '@lucide/svelte';
+	import { cn } from '$lib/components/ui/utils';
+	import { ActionIcon, ModelId } from '$lib/components/app';
+	import type { ModelOption } from '$lib/types/models';
+	import { ServerModelStatus } from '$lib/enums';
+	import { modelsStore, routerModels } from '$lib/stores/models.svelte';
+
+	interface Props {
+		option: ModelOption;
+		isSelected: boolean;
+		isHighlighted: boolean;
+		isFav: boolean;
+		showOrgName?: boolean;
+		onSelect: (modelId: string) => void;
+		onMouseEnter: () => void;
+		onKeyDown: (e: KeyboardEvent) => void;
+	}
+
+	let {
+		option,
+		isSelected,
+		isHighlighted,
+		isFav,
+		showOrgName = false,
+		onSelect,
+		onMouseEnter,
+		onKeyDown
+	}: Props = $props();
+
+	let currentRouterModels = $derived(routerModels());
+	let serverStatus = $derived.by(() => {
+		const model = currentRouterModels.find((m) => m.id === option.model);
+		return (model?.status?.value as ServerModelStatus) ?? null;
+	});
+	let isOperationInProgress = $derived(modelsStore.isModelOperationInProgress(option.model));
+	let isFailed = $derived(serverStatus === ServerModelStatus.FAILED);
+	let isLoaded = $derived(serverStatus === ServerModelStatus.LOADED && !isOperationInProgress);
+	let isLoading = $derived(serverStatus === ServerModelStatus.LOADING || isOperationInProgress);
+</script>
+
+<div
+	class={cn(
+		'group flex w-full items-center gap-2 rounded-sm p-2 text-left text-sm transition focus:outline-none',
+		'cursor-pointer hover:bg-muted focus:bg-muted',
+		isSelected || isHighlighted
+			? 'bg-accent text-accent-foreground'
+			: 'hover:bg-accent hover:text-accent-foreground',
+		isLoaded ? 'text-popover-foreground' : 'text-muted-foreground'
+	)}
+	role="option"
+	aria-selected={isSelected || isHighlighted}
+	tabindex="0"
+	onclick={() => onSelect(option.id)}
+	onmouseenter={onMouseEnter}
+	onkeydown={onKeyDown}
+>
+	<ModelId
+		modelId={option.model}
+		{showOrgName}
+		aliases={option.aliases}
+		tags={option.tags}
+		class="flex-1"
+	/>
+
+	<div class="flex shrink-0 items-center gap-2.5">
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<!-- svelte-ignore a11y_click_events_have_key_events -->
+		<div
+			class="pointer-events-none flex w-4 items-center justify-center pl-2 opacity-0 group-hover:pointer-events-auto group-hover:opacity-100"
+			onclick={(e) => e.stopPropagation()}
+		>
+			{#if isFav}
+				<ActionIcon
+					iconSize="h-2.5 w-2.5"
+					icon={HeartOff}
+					tooltip="Remove from favourites"
+					class="h-3 w-3 hover:text-foreground"
+					onclick={() => modelsStore.toggleFavourite(option.model)}
+				/>
+			{:else}
+				<ActionIcon
+					iconSize="h-2.5 w-2.5"
+					icon={Heart}
+					tooltip="Add to favourites"
+					class="h-3 w-3 hover:text-foreground"
+					onclick={() => modelsStore.toggleFavourite(option.model)}
+				/>
+			{/if}
+		</div>
+		{#if isLoading}
+			<Loader2 class="h-4 w-4 animate-spin text-muted-foreground" />
+		{:else if isFailed}
+			<div class="flex w-4 items-center justify-center">
+				<CircleAlert class="h-3.5 w-3.5 text-red-500 group-hover:hidden" />
+
+				<!-- svelte-ignore a11y_no_static_element_interactions -->
+				<!-- svelte-ignore a11y_click_events_have_key_events -->
+				<div class="hidden group-hover:flex" onclick={(e) => e.stopPropagation()}>
+					<ActionIcon
+						iconSize="h-2.5 w-2.5"
+						icon={RotateCw}
+						tooltip="Retry loading model"
+						class="h-3 w-3 text-red-500 hover:text-foreground"
+						onclick={() => modelsStore.loadModel(option.model)}
+					/>
+				</div>
+			</div>
+		{:else if isLoaded}
+			<div class="flex w-4 items-center justify-center">
+				<span class="h-2 w-2 rounded-full bg-green-500 group-hover:hidden"></span>
+
+				<!-- svelte-ignore a11y_no_static_element_interactions -->
+				<!-- svelte-ignore a11y_click_events_have_key_events -->
+				<div class="hidden group-hover:flex" onclick={(e) => e.stopPropagation()}>
+					<ActionIcon
+						iconSize="h-2.5 w-2.5"
+						icon={PowerOff}
+						tooltip="Unload model"
+						class="h-3 w-3 text-red-500 hover:text-red-600"
+						onclick={() => modelsStore.unloadModel(option.model)}
+					/>
+				</div>
+			</div>
+		{:else}
+			<div class="flex w-4 items-center justify-center">
+				<span class="h-2 w-2 rounded-full bg-muted-foreground/50 group-hover:hidden"></span>
+
+				<!-- svelte-ignore a11y_no_static_element_interactions -->
+				<!-- svelte-ignore a11y_click_events_have_key_events -->
+				<div class="hidden group-hover:flex" onclick={(e) => e.stopPropagation()}>
+					<ActionIcon
+						iconSize="h-2.5 w-2.5"
+						icon={Power}
+						tooltip="Load model"
+						class="h-3 w-3"
+						onclick={() => modelsStore.loadModel(option.model)}
+					/>
+				</div>
+			</div>
+		{/if}
+	</div>
+</div>

tools/server/webui/src/lib/components/app/models/index.ts

@@ -71,3 +71,5 @@ export { default as ModelsSelector } from './ModelsSelector.svelte';
  * ```
  */
 export { default as ModelBadge } from './ModelBadge.svelte';
+export { default as ModelId } from './ModelId.svelte';
+export { default as ModelsSelectorOption } from './ModelsSelectorOption.svelte';