From 84d6a812ca603c9ad81d21b63d7ce3b6ef647db8 Mon Sep 17 00:00:00 2001
From: Aleksander Grygier <aleksander.grygier@gmail.com>
Date: Sat, 22 Aug 2026 18:02:25 +0200
Subject: [PATCH] chore: Format

---
 tools/ui/src/lib/components/app/models/ModelId.svelte     | 8 ++++++++
 .../lib/components/app/models/ModelsSelectorOption.svelte | 2 +-
 .../ui/src/lib/components/ui/dialog/dialog-header.svelte  | 2 +-
 3 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/tools/ui/src/lib/components/app/models/ModelId.svelte b/tools/ui/src/lib/components/app/models/ModelId.svelte
index de73f9255a..e5bfcfb063 100644
--- a/tools/ui/src/lib/components/app/models/ModelId.svelte
+++ b/tools/ui/src/lib/components/app/models/ModelId.svelte
@@ -48,6 +48,8 @@
 		'inline-flex w-fit shrink-0 items-center justify-center whitespace-nowrap rounded-md border border-border/50 px-1 py-0 text-[10px] font-mono bg-foreground/15 dark:bg-foreground/10 text-foreground [a&]:hover:bg-foreground/25';
 	const tagBadgeClass =
 		'inline-flex w-fit shrink-0 items-center justify-center whitespace-nowrap rounded-md border border-border/50 px-1 py-0 text-[10px] font-mono text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground';
+	const variantBadgeClass =
+		'inline-flex w-fit shrink-0 items-center justify-center whitespace-nowrap rounded-md bg-primary px-1.5 py-0 text-[10px] font-mono font-semibold uppercase tracking-wide text-primary-foreground';
 
 	let parsed = $derived(ModelsService.parseModelId(modelId));
 	let resolvedShowRaw = $derived(
@@ -84,6 +86,12 @@
 		</span>
 
 		<span class="inline-flex items-center gap-1">
+			{#if parsed.variant}
+				<span class={variantBadgeClass} title={`${parsed.variant.toUpperCase()} draft model`}>
+					{parsed.variant}
+				</span>
+			{/if}
+
 			{#if parsed.params}
 				<span class={badgeClass}>
 					{parsed.params}{parsed.activatedParams ? `-${parsed.activatedParams}` : ''}
diff --git a/tools/ui/src/lib/components/app/models/ModelsSelectorOption.svelte b/tools/ui/src/lib/components/app/models/ModelsSelectorOption.svelte
index 981eed14d2..21c24f3ec4 100644
--- a/tools/ui/src/lib/components/app/models/ModelsSelectorOption.svelte
+++ b/tools/ui/src/lib/components/app/models/ModelsSelectorOption.svelte
@@ -90,8 +90,8 @@
 		{hideOrgName}
 		{modalities}
 		modelId={option.model}
-		{supportsThinking}
 		showRawTooltip
+		{supportsThinking}
 		tags={option.tags}
 	/>
 
diff --git a/tools/ui/src/lib/components/ui/dialog/dialog-header.svelte b/tools/ui/src/lib/components/ui/dialog/dialog-header.svelte
index d2751649b4..fd590e1860 100644
--- a/tools/ui/src/lib/components/ui/dialog/dialog-header.svelte
+++ b/tools/ui/src/lib/components/ui/dialog/dialog-header.svelte
@@ -22,11 +22,11 @@
 -->
 <div
 	bind:this={ref}
-	data-slot="dialog-header"
 	class={cn(
 		'flex flex-col gap-2 text-center sm:text-left sticky top-0 z-50 bg-background md:bg-transparent',
 		className
 	)}
+	data-slot="dialog-header"
 	{...restProps}
 >
 	{@render children?.()}