ui : show the quantizer org on the model rows of a family

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

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

@@ -18,6 +18,9 @@
 		 *  corner badge. Resolving the base org costs one Hugging Face request per repo, so
 		 *  it waits until the row is near the viewport. */
 		showBaseModelAvatar?: boolean;
+		/** Show the repo's own org as the main image, skipping the base model.
+		 *  Used inside a heading that already carries the base org. */
+		showRepoOrgAvatar?: boolean;
 		/** Keep the quantizer badge off, e.g. when a row stands for a whole family. */
 		showQuantBadge?: boolean;
 		size?: string;
@@ -30,6 +33,7 @@
 		quantSize = 'h-3 w-3',
 		showBaseModelAvatar = false,
 		showQuantBadge = true,
+		showRepoOrgAvatar = false,
 		size = 'size-5'
 	}: Props = $props();
 
@@ -113,8 +117,8 @@
 	<span bind:this={avatarEl} class={['inline-flex shrink-0', className]}>
 		<ModelsDiscoverAvatar
 			class="mt-0"
-			org={baseModelOrg ?? orgName}
-			quantOrg={showBaseModelAvatar && showQuantBadge ? orgName : undefined}
+			org={showRepoOrgAvatar ? orgName : (baseModelOrg ?? orgName)}
+			quantOrg={showBaseModelAvatar && showQuantBadge && !showRepoOrgAvatar ? orgName : undefined}
 			{quantPositionClass}
 			{quantSize}
 			{size}

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

@@ -186,7 +186,12 @@
 			tabindex="0"
 		>
 			<span class="flex min-w-0 items-center gap-3" style="padding-left: {indent}px">
-				<ModelAvatar {option} showBaseModelAvatar size="size-9" />
+				<ModelAvatar
+					{option}
+					showBaseModelAvatar={!settingsStore.config.groupModelsByFamily}
+					showRepoOrgAvatar={settingsStore.config.groupModelsByFamily}
+					size="size-9"
+				/>
 
 				<ModelId
 					aliases={option.aliases}
@@ -237,7 +242,12 @@
 			tabindex="0"
 		>
 			<span class="flex min-w-0 items-center gap-3" style="padding-left: {indent}px">
-				<ModelAvatar option={entry.base} showBaseModelAvatar size="size-9" />
+				<ModelAvatar
+					option={entry.base}
+					showBaseModelAvatar={!settingsStore.config.groupModelsByFamily}
+					showRepoOrgAvatar={settingsStore.config.groupModelsByFamily}
+					size="size-9"
+				/>
 
 				<span class="min-w-0">
 					<ModelId

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

@@ -342,7 +342,8 @@
 									onMouseEnter={() => (highlightedId = option.id)}
 									onSelect={ms.handleSelect}
 									{option}
-									showBaseModelAvatar
+									showBaseModelAvatar={!settingsStore.config.groupModelsByFamily}
+									showRepoOrgAvatar={settingsStore.config.groupModelsByFamily}
 								/>
 							{/snippet}
 

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

@@ -156,7 +156,8 @@
 		onMouseEnter={() => {}}
 		{onSelect}
 		{option}
-		showBaseModelAvatar
+		showBaseModelAvatar={!settingsStore.config.groupModelsByFamily}
+		showRepoOrgAvatar={settingsStore.config.groupModelsByFamily}
 	/>
 {/snippet}
 

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

@@ -19,6 +19,8 @@
 		onKeyDown: (e: KeyboardEvent) => void;
 		/** Show the base model's org as the main avatar and the repo (quant) org as the corner badge; resolves the base org lazily via HF. */
 		showBaseModelAvatar?: boolean;
+		/** Show the repo's own org instead of the base model's. */
+		showRepoOrgAvatar?: boolean;
 	}
 
 	let {
@@ -30,7 +32,8 @@
 		onMouseEnter,
 		onSelect,
 		option,
-		showBaseModelAvatar = false
+		showBaseModelAvatar = false,
+		showRepoOrgAvatar = false
 	}: Props = $props();
 
 	// row actions follow the backend that serves the row, not the selected one
@@ -86,7 +89,7 @@
 	tabindex="0"
 	title={loadTitle}
 >
-	<ModelAvatar {option} {showBaseModelAvatar} />
+	<ModelAvatar {option} {showBaseModelAvatar} {showRepoOrgAvatar} />
 
 	<ModelId
 		aliases={option.aliases}