ui : show the selected model's org avatar on the selector trigger

Assisted-by: pi:llama.cpp/GLM-5.3-Flash

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

@@ -8,9 +8,12 @@
 	import { orgOf } from '$lib/utils';
 	import { getBackend } from '$lib/utils/api-base';
 	import { getBackendCapabilities } from '$lib/utils/backend';
+	import type { Snippet } from 'svelte';
 
 	interface Props {
 		class?: string;
+		/** Rendered when the model has neither an org avatar nor a provider mark. */
+		fallback?: Snippet;
 		option: ModelOption;
 		quantPositionClass?: string;
 		quantSize?: string;
@@ -28,6 +31,7 @@
 
 	let {
 		class: className = '',
+		fallback,
 		option,
 		quantPositionClass = '-bottom-1 -right-1',
 		quantSize = 'h-3 w-3',
@@ -130,4 +134,6 @@
 			{size}
 		/>
 	</span>
+{:else}
+	{@render fallback?.()}
 {/if}

tools/ui/src/lib/components/app/models/ModelsSelector/ModelsSelectorTriggerIcon.svelte

@@ -1,32 +1,23 @@
 <script lang="ts">
-	import { BackendIcon } from '$lib/components/app/backends';
-	import { Logo } from '$lib/components/app/misc';
-	import { LOCAL_BACKEND_ID, MODEL_SELECTOR_ICON } from '$lib/constants';
+	import ModelAvatar from '../ModelAvatar.svelte';
+	import { MODEL_SELECTOR_ICON } from '$lib/constants';
 	import type { ModelOption } from '$lib/types/models';
-	import { getBackend } from '$lib/utils/api-base';
 
 	interface Props {
 		class?: string;
-		/** Selected model; its provider decides the mark, the generic icon when absent. */
+		/** Selected model; its avatar decides the mark, the generic icon when absent. */
 		option?: ModelOption | null;
 	}
 
-	let { class: className = 'size-1', option }: Props = $props();
-
-	// the bundled server has no favicon to resolve, its mark is the llama.cpp logo
-	let isLocal = $derived(getBackend(option?.backendId)?.id === LOCAL_BACKEND_ID);
+	let { class: className = 'h-3.5 w-3.5', option }: Props = $props();
 </script>
 
 {#if option}
-	<BackendIcon backend={getBackend(option.backendId)} class={className}>
+	<ModelAvatar class={className} {option} showQuantBadge={false} showRepoOrgAvatar size={className}>
 		{#snippet fallback()}
-			{#if isLocal}
-				<Logo class={className} style="--size: 95%; margin-top: 1px;" />
-			{:else}
-				<MODEL_SELECTOR_ICON class={className} />
-			{/if}
+			<MODEL_SELECTOR_ICON class={className} />
 		{/snippet}
-	</BackendIcon>
+	</ModelAvatar>
 {:else}
 	<MODEL_SELECTOR_ICON class={className} />
 {/if}

tools/ui/src/lib/components/app/models/ModelsSelector/index.ts

@@ -104,8 +104,8 @@ export { default as ModelsSelectorSheet } from './ModelsSelectorSheet.svelte';
 /**
  * **ModelsSelectorTriggerIcon** - Icon for the selector trigger button
  *
- * Shows the selected model's provider mark (preset logo or favicon) and falls
- * back to the generic model icon when the provider has none. The bundled local
- * server falls back to the llama.cpp logo.
+ * Shows the selected model's own org avatar (the same mark the option rows
+ * use) and falls back to the generic model icon when the model has neither an
+ * org nor a provider mark.
  */
 export { default as ModelsSelectorTriggerIcon } from './ModelsSelectorTriggerIcon.svelte';

tools/ui/src/lib/components/app/models/discover/ModelsDiscoverAvatar.svelte

@@ -59,7 +59,7 @@
 	});
 </script>
 
-<span class="relative mt-0.5 inline-flex shrink-0 {className}">
+<span class="relative inline-flex shrink-0 {className}">
 	{#if orgAvatarFailed}
 		<span
 			aria-hidden="true"