ui : align the table columns and mark non repo models with the provider icon

Assisted-by: pi:llama.cpp/DeepSeek-V4.1-Flash

tools/ui/src/lib/components/app/models/ModelAvatar.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
 	import ModelsDiscoverAvatar from './discover/ModelsDiscoverAvatar.svelte';
+	import { BackendIcon } from '$lib/components/app/backends';
+	import { Logo } from '$lib/components/app/misc';
 	import { HF_BASE_MODEL_TAG_REGEX } from '$lib/constants';
 	import { HuggingFaceService, ModelsService } from '$lib/services';
 	import type { ModelOption } from '$lib/types/models';
@@ -30,6 +32,10 @@
 
 	let parsedId = $derived(ModelsService.parseModelId(option.model));
 	let orgName = $derived(parsedId.orgName);
+	// a llama-compat model whose id carries no `org/name` is not a Hugging Face repo,
+	// so the provider's own mark identifies it better than an initial
+	let isLlamaCompat = $derived(getBackendCapabilities(getBackend(option.backendId)).props);
+	let useProviderIcon = $derived(isLlamaCompat && !orgName);
 	let tagBaseModel = $derived(
 		(option.tags ?? [])
 			.find((t) => HF_BASE_MODEL_TAG_REGEX.test(t))
@@ -92,7 +98,15 @@
 	});
 </script>
 
-{#if orgName}
+{#if useProviderIcon}
+	<span class={['inline-flex shrink-0', className]}>
+		<BackendIcon backend={getBackend(option.backendId)} class={size}>
+			{#snippet fallback()}
+				<Logo class={size} style="--size: 100%" />
+			{/snippet}
+		</BackendIcon>
+	</span>
+{:else if orgName}
 	<span bind:this={avatarEl} class={['inline-flex shrink-0', className]}>
 		<ModelsDiscoverAvatar
 			class="mt-0"

tools/ui/src/lib/components/app/models/ModelContext.svelte

@@ -5,10 +5,11 @@
 	import { formatParameters } from '$lib/utils/formatters';
 
 	interface Props {
+		class?: string;
 		option: ModelOption;
 	}
 
-	let { option }: Props = $props();
+	let { class: className = '', option }: Props = $props();
 
 	// a listing that reports a context window (OpenRouter, Groq, HF) needs no lookup
 	let reported = $derived(option.contextLength ?? null);
@@ -67,6 +68,6 @@
 	let context = $derived(reported ?? fetched);
 </script>
 
-<span class="text-sm text-muted-foreground">
+<span class={['text-sm text-muted-foreground', className]}>
 	{context ? `${formatParameters(context)} tokens` : '—'}
 </span>

tools/ui/src/lib/components/app/models/ModelLoadControl.svelte

@@ -10,6 +10,7 @@
 	interface Props {
 		/** Backend can load and unload models, llama-compat servers only. */
 		canLoad: boolean;
+		class?: string;
 		isFailed?: boolean;
 		isLoaded: boolean;
 		isLoading?: boolean;
@@ -27,6 +28,7 @@
 
 	let {
 		canLoad,
+		class: className = '',
 		isFailed = false,
 		isLoaded,
 		isLoading = false,
@@ -45,7 +47,7 @@
 	);
 </script>
 
-<div class="flex w-5 shrink-0 items-center justify-center">
+<div class={['flex w-5 shrink-0 items-center justify-center', className]}>
 	{#if !canLoad}
 		{#if showBackendMark}
 			<BackendIcon backend={getBackend(option.backendId)} class="h-3.5 w-3.5" />

tools/ui/src/lib/components/app/models/ModelsManager/ModelsManagerModelsTable.svelte

@@ -145,14 +145,15 @@
 				/>
 			</span>
 
-			<ModelContext {option} />
+			<ModelContext class="justify-self-end" {option} />
 
-			<span class="text-sm text-muted-foreground">
+			<span class="justify-self-end text-sm text-muted-foreground">
 				{formatLastUsed(modelsStore.recentModelUsage[option.id])}
 			</span>
 
 			<ModelLoadControl
 				{canLoad}
+				class="justify-self-center"
 				{isFailed}
 				{isLoaded}
 				{isLoading}
@@ -162,7 +163,7 @@
 				showRemoteMark
 			/>
 
-			<div class="flex items-center justify-end">
+			<div class="flex items-center justify-center justify-self-center">
 				<DropdownMenuActions
 					actions={rowActions(option, canLoad, isLoaded, favorite, isHidden)}
 					align="end"
@@ -193,13 +194,13 @@
 	>
 		<span>Model</span>
 
-		<span>Context</span>
+		<span class="text-right">Context</span>
 
-		<span>Last used</span>
+		<span class="text-right">Last used</span>
 
 		<span class="text-center">Status</span>
 
-		<span class="text-right">Actions</span>
+		<span class="text-center">Actions</span>
 	</div>
 
 	<div class="min-h-0 flex-1 overflow-y-auto">