From 7af64f3a2972e12e52ed399d2b436939b55e31f2 Mon Sep 17 00:00:00 2001
From: Aleksander Grygier <aleksander.grygier@gmail.com>
Date: Sat, 15 Aug 2026 23:26:25 +0200
Subject: [PATCH] ui : add raw model id tooltip to model selector options

---
 .../lib/components/app/models/ModelId.svelte  | 20 ++++++++++++++++++-
 .../app/models/ModelsSelectorOption.svelte    |  1 +
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/tools/ui/src/lib/components/app/models/ModelId.svelte b/tools/ui/src/lib/components/app/models/ModelId.svelte
index 8c43c46306..2eafa90e34 100644
--- a/tools/ui/src/lib/components/app/models/ModelId.svelte
+++ b/tools/ui/src/lib/components/app/models/ModelId.svelte
@@ -10,6 +10,7 @@
 		modelId: string;
 		hideOrgName?: boolean;
 		showRaw?: boolean;
+		showRawTooltip?: boolean;
 		hideQuantization?: boolean;
 		hideTags?: boolean;
 		aliases?: string[];
@@ -28,6 +29,7 @@
 		modalities,
 		modelId,
 		showRaw = undefined,
+		showRawTooltip = false,
 		supportsThinking = false,
 		tags,
 		...rest
@@ -60,7 +62,7 @@
 {#if resolvedShowRaw}
 	<TruncatedText class="font-medium {className}" showTooltip={false} text={modelId} {...rest} />
 {:else}
-	<span class="flex min-w-0 items-center gap-1.5 {className}" {...rest}>
+	{#snippet nameAndBadges()}
 		<span class="min-w-0 truncate font-medium">
 			{#if !hideOrgName && parsed.orgName}{parsed.orgName}/{/if}{displayName}
 		</span>
@@ -94,6 +96,22 @@
 				{/each}
 			{/if}
 		</span>
+	{/snippet}
+
+	<span class="flex min-w-0 items-center gap-1.5 {className}" {...rest}>
+		{#if showRawTooltip}
+			<Tooltip.Root>
+				<Tooltip.Trigger class="flex min-w-0 items-center gap-1.5">
+					{@render nameAndBadges()}
+				</Tooltip.Trigger>
+
+				<Tooltip.Content>
+					<p>{modelId}</p>
+				</Tooltip.Content>
+			</Tooltip.Root>
+		{:else}
+			{@render nameAndBadges()}
+		{/if}
 
 		{#if hasModalityIcons}
 			<span class="inline-flex items-center gap-1.25 text-muted-foreground">
diff --git a/tools/ui/src/lib/components/app/models/ModelsSelectorOption.svelte b/tools/ui/src/lib/components/app/models/ModelsSelectorOption.svelte
index 34c72c2f8b..e83021b2b9 100644
--- a/tools/ui/src/lib/components/app/models/ModelsSelectorOption.svelte
+++ b/tools/ui/src/lib/components/app/models/ModelsSelectorOption.svelte
@@ -88,6 +88,7 @@
 		modelId={option.model}
 		modalities={modalities}
 		{supportsThinking}
+		showRawTooltip
 		tags={option.tags}
 	/>