From 8b0a10f7d2eeab1d8b08b307a85e796bc7ad9ca0 Mon Sep 17 00:00:00 2001
From: Aleksander Grygier <aleksander.grygier@gmail.com>
Date: Wed, 23 Sep 2026 11:26:47 +0200
Subject: [PATCH] ui : show the model id and the base org avatar in the
 configuration header

Assisted-by: pi:llama.cpp/DeepSeek-V4.1-Flash
---
 .../ModelsManagerModelConfiguration.svelte    |  1 -
 ...delsManagerModelConfigurationHeader.svelte | 70 ++++---------------
 2 files changed, 14 insertions(+), 57 deletions(-)

diff --git a/tools/ui/src/lib/components/app/models/ModelsManager/ModelsManagerModelConfiguration/ModelsManagerModelConfiguration.svelte b/tools/ui/src/lib/components/app/models/ModelsManager/ModelsManagerModelConfiguration/ModelsManagerModelConfiguration.svelte
index 47f51668ef..356b86b9b4 100644
--- a/tools/ui/src/lib/components/app/models/ModelsManager/ModelsManagerModelConfiguration/ModelsManagerModelConfiguration.svelte
+++ b/tools/ui/src/lib/components/app/models/ModelsManager/ModelsManagerModelConfiguration/ModelsManagerModelConfiguration.svelte
@@ -60,7 +60,6 @@
 		{onToggleLoad}
 		{onUseInNewChat}
 		{option}
-		{serverProps}
 	/>
 
 	<Tabs.Root class="mt-3 min-h-0 flex-1 gap-0" onValueChange={(value) => (tab = value)} value={tab}>
diff --git a/tools/ui/src/lib/components/app/models/ModelsManager/ModelsManagerModelConfiguration/ModelsManagerModelConfigurationHeader.svelte b/tools/ui/src/lib/components/app/models/ModelsManager/ModelsManagerModelConfiguration/ModelsManagerModelConfigurationHeader.svelte
index 28824dd85d..acf301f7e8 100644
--- a/tools/ui/src/lib/components/app/models/ModelsManager/ModelsManagerModelConfiguration/ModelsManagerModelConfigurationHeader.svelte
+++ b/tools/ui/src/lib/components/app/models/ModelsManager/ModelsManagerModelConfiguration/ModelsManagerModelConfigurationHeader.svelte
@@ -1,14 +1,10 @@
 <script lang="ts">
-	import { modelQuantLabel, modelSizeLabel } from '../utils';
 	import { Play, Square, X } from '@lucide/svelte';
-	import { ModelAvatar, ModelCapabilityIcons } from '$lib/components/app';
-	import ModelsDiscoverDetailsMetadataItem from '$lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverDetailsMetadataItem.svelte';
+	import { ModelAvatar, ModelId } from '$lib/components/app';
 	import { Badge } from '$lib/components/ui/badge';
 	import { Button } from '$lib/components/ui/button';
 	import { ModelCapability } from '$lib/enums';
-	import type { ApiLlamaCppServerProps } from '$lib/types/api';
 	import type { ModelOption } from '$lib/types/models';
-	import { formatNumber } from '$lib/utils/formatters';
 
 	interface Props {
 		isCustomized: boolean;
@@ -17,26 +13,10 @@
 		onToggleLoad: () => void;
 		onUseInNewChat: () => void;
 		option: ModelOption;
-		serverProps: ApiLlamaCppServerProps | null | undefined;
 	}
 
-	let {
-		isCustomized,
-		isLoaded,
-		onClose,
-		onToggleLoad,
-		onUseInNewChat,
-		option,
-		serverProps
-	}: Props = $props();
+	let { isCustomized, isLoaded, onClose, onToggleLoad, onUseInNewChat, option }: Props = $props();
 
-	// the same chips the discovery details show for a repo, from what we know here
-	let params = $derived(option.parsedId?.params ?? null);
-	let quant = $derived(modelQuantLabel(option));
-	let context = $derived(
-		serverProps?.default_generation_settings?.n_ctx ?? option.contextLength ?? null
-	);
-	let size = $derived(modelSizeLabel(option));
 	let supportsToolUse = $derived(option.capabilities.includes(ModelCapability.TOOL_USE));
 	let supportsThinking = $derived(option.capabilities.includes(ModelCapability.REASONING));
 </script>
@@ -44,27 +24,28 @@
 <header class="space-y-3 px-4 pt-4">
 	<div class="flex items-start justify-between gap-3">
 		<div class="flex min-w-0 items-center gap-2">
-			<ModelAvatar {option} size="size-12" />
+			<ModelAvatar {option} showBaseModelAvatar size="size-12" />
 
 			<div class="min-w-0">
 				<div class="flex items-center gap-2">
-					<h1 class="truncate text-lg font-semibold">{option.name}</h1>
+					<ModelId
+						aliases={option.aliases}
+						class="min-w-0"
+						modalities={option.modalities}
+						modelId={option.model}
+						{supportsThinking}
+						{supportsToolUse}
+						tags={option.tags}
+						title={option.model}
+					/>
 
 					{#if isCustomized}
 						<Badge class="h-5 shrink-0 px-1.5 text-[10px]" variant="secondary">CUSTOMIZED</Badge>
 					{/if}
-
-					<ModelCapabilityIcons
-						gapClass="gap-2"
-						iconSize="h-4 w-4"
-						modalities={option.modalities}
-						{supportsThinking}
-						{supportsToolUse}
-					/>
 				</div>
 
 				<p class="truncate text-xs text-muted-foreground">
-					{option.model} · {isLoaded ? 'loaded' : 'not loaded'}
+					{isLoaded ? 'Loaded' : 'Not loaded'}
 				</p>
 			</div>
 		</div>
@@ -80,29 +61,6 @@
 		</Button>
 	</div>
 
-	{#if params || quant || context || size}
-		<div class="flex flex-wrap items-center gap-1.5">
-			{#if params}
-				<ModelsDiscoverDetailsMetadataItem label="Parameters" value={params} />
-			{/if}
-
-			{#if quant}
-				<ModelsDiscoverDetailsMetadataItem label="Quantization" value={quant} />
-			{/if}
-
-			{#if context}
-				<ModelsDiscoverDetailsMetadataItem
-					label="Context"
-					value={`${formatNumber(context)} tokens`}
-				/>
-			{/if}
-
-			{#if size}
-				<ModelsDiscoverDetailsMetadataItem label="Size" value={size} />
-			{/if}
-		</div>
-	{/if}
-
 	<div class="flex gap-2">
 		<Button class="flex-1 gap-1.5" onclick={onUseInNewChat} variant="outline">
 			<Play class="h-3.5 w-3.5" />