From 549630bae10f1812f96cd50afdc47bb2bf6fb665 Mon Sep 17 00:00:00 2001
From: Aleksander Grygier <aleksander.grygier@gmail.com>
Date: Tue, 1 Sep 2026 12:50:55 +0200
Subject: [PATCH] feat: render capability icons in the meta row of multi-line
 model ids

With iconsOnNewLine, the tool use / reasoning / modality icons now sit
in the second row, in line with context length and disk size, instead of
competing with the name on the identity line. Icons render through a
shared snippet in both positions; single-line usages keep the icons
inline after the name.

Assisted-by: pi:GLM-5.3-Flash
---
 .../lib/components/app/models/ModelId.svelte  | 132 +++++++++---------
 1 file changed, 69 insertions(+), 63 deletions(-)

diff --git a/tools/ui/src/lib/components/app/models/ModelId.svelte b/tools/ui/src/lib/components/app/models/ModelId.svelte
index 8ccbcdb664..341a807b04 100644
--- a/tools/ui/src/lib/components/app/models/ModelId.svelte
+++ b/tools/ui/src/lib/components/app/models/ModelId.svelte
@@ -93,6 +93,72 @@
 {#if resolvedShowRaw}
 	<TruncatedText class="font-medium {className}" showTooltip={false} text={modelId} {...rest} />
 {:else}
+	{#snippet capabilityIcons()}
+		{#if supportsToolUse}
+			<Tooltip.Root>
+				<Tooltip.Trigger>
+					<Wrench class="h-3 w-3 text-muted-foreground" />
+				</Tooltip.Trigger>
+
+				<Tooltip.Content>
+					<p>Tool use</p>
+				</Tooltip.Content>
+			</Tooltip.Root>
+		{/if}
+
+		{#if supportsThinking && !hideReasoning}
+			<Tooltip.Root>
+				<Tooltip.Trigger>
+					<Lightbulb class="h-3 w-3 text-muted-foreground" />
+				</Tooltip.Trigger>
+
+				<Tooltip.Content>
+					<p>Reasoning</p>
+				</Tooltip.Content>
+			</Tooltip.Root>
+		{/if}
+
+		{#if hasModalityIcons && !hideModalities}
+			<span class="inline-flex items-center gap-1.25 text-muted-foreground">
+				{#if modalities?.vision}
+					<Tooltip.Root>
+						<Tooltip.Trigger>
+							<Image class="h-3 w-3 text-muted-foreground" />
+						</Tooltip.Trigger>
+
+						<Tooltip.Content>
+							<p>Vision</p>
+						</Tooltip.Content>
+					</Tooltip.Root>
+				{/if}
+
+				{#if modalities?.video}
+					<Tooltip.Root>
+						<Tooltip.Trigger>
+							<Video class="h-3 w-3 text-muted-foreground" />
+						</Tooltip.Trigger>
+
+						<Tooltip.Content>
+							<p>Video</p>
+						</Tooltip.Content>
+					</Tooltip.Root>
+				{/if}
+
+				{#if modalities?.audio}
+					<Tooltip.Root>
+						<Tooltip.Trigger>
+							<Mic class="h-3 w-3 text-muted-foreground" />
+						</Tooltip.Trigger>
+
+						<Tooltip.Content>
+							<p>Audio</p>
+						</Tooltip.Content>
+					</Tooltip.Root>
+				{/if}
+			</span>
+		{/if}
+	{/snippet}
+
 	{#snippet nameAndBadges()}
 		{#if !hideName}
 			<span class="min-w-0 truncate font-medium">
@@ -164,72 +230,12 @@
 				{@render nameAndBadges()}
 			{/if}
 
-			{#if supportsToolUse}
-				<Tooltip.Root>
-					<Tooltip.Trigger>
-						<Wrench class="h-3 w-3 text-muted-foreground" />
-					</Tooltip.Trigger>
-
-					<Tooltip.Content>
-						<p>Tool use</p>
-					</Tooltip.Content>
-				</Tooltip.Root>
-			{/if}
-
-			{#if supportsThinking && !hideReasoning}
-				<Tooltip.Root>
-					<Tooltip.Trigger>
-						<Lightbulb class="h-3 w-3 text-muted-foreground" />
-					</Tooltip.Trigger>
-
-					<Tooltip.Content>
-						<p>Reasoning</p>
-					</Tooltip.Content>
-				</Tooltip.Root>
-			{/if}
-
-			{#if hasModalityIcons && !hideModalities}
-				<span class="inline-flex items-center gap-1.25 text-muted-foreground">
-					{#if modalities?.vision}
-						<Tooltip.Root>
-							<Tooltip.Trigger>
-								<Image class="h-3 w-3 text-muted-foreground" />
-							</Tooltip.Trigger>
-
-							<Tooltip.Content>
-								<p>Vision</p>
-							</Tooltip.Content>
-						</Tooltip.Root>
-					{/if}
-
-					{#if modalities?.video}
-						<Tooltip.Root>
-							<Tooltip.Trigger>
-								<Video class="h-3 w-3 text-muted-foreground" />
-							</Tooltip.Trigger>
-
-							<Tooltip.Content>
-								<p>Video</p>
-							</Tooltip.Content>
-						</Tooltip.Root>
-					{/if}
-
-					{#if modalities?.audio}
-						<Tooltip.Root>
-							<Tooltip.Trigger>
-								<Mic class="h-3 w-3 text-muted-foreground" />
-							</Tooltip.Trigger>
-
-							<Tooltip.Content>
-								<p>Audio</p>
-							</Tooltip.Content>
-						</Tooltip.Root>
-					{/if}
-				</span>
-			{/if}
+			{#if !iconsOnNewLine}{@render capabilityIcons()}{/if}
 		</span>
 
 		<span class="inline-flex items-center gap-1.5">
+			{#if iconsOnNewLine}{@render capabilityIcons()}{/if}
+
 			{#if contextLength}
 				<span class="inline-flex items-center gap-1 text-muted-foreground">
 					<ScrollText class="h-3 w-3" />