ui : polish ModelId badges, reasoning panel and discover details

Hide the ModelId badge and icon wrappers when empty, normalize its indentation, and tighten the reasoning panel and discover detail spacing.

Assisted-by: pi:zai-org/GLM-5.3

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

@@ -88,6 +88,15 @@
 
 	let primaryAlias = $derived(uniqueAliases.length === 1 ? uniqueAliases[0] : null);
 	let displayName = $derived(primaryAlias ?? parsed.modelName ?? modelId);
+
+	let hasBadges = $derived(
+		parsed.sidecar ||
+			((parsed.params || params) && !hideParameters) ||
+			(parsed.quantization && !resolvedHideQuantization) ||
+			primaryAlias ||
+			uniqueAliases.length > 1 ||
+			(uniqueTags.length > 0 && !resolvedHideTags)
+	);
 </script>
 
 {#if resolvedShowRaw}
@@ -166,47 +175,49 @@
 			</span>
 		{/if}
 
-		<span class="inline-flex items-center gap-1 {wrap ? 'flex-wrap' : ''}">
-			{#if parsed.sidecar}
-				<span class={variantBadgeClass} title={`${parsed.sidecar.toUpperCase()} draft model`}>
-					{parsed.sidecar}
-				</span>
-			{/if}
-
-			{#if (parsed.params || params) && !hideParameters}
-				<span class={badgeClass}>
-					{parsed.params ?? params}{parsed.activatedParams ? `-${parsed.activatedParams}` : ''}
-				</span>
-			{/if}
-
-			{#each uniqueDraftSidecars as sidecar (sidecar)}
-				<span class={variantBadgeClass} title={`${sidecar.toUpperCase()} draft model available`}>
-					{sidecar}
-				</span>
-			{/each}
-
-			{#if parsed.quantization && !resolvedHideQuantization}
-				<span class={badgeClass}>
-					{parsed.quantization}
-				</span>
-			{/if}
-
-			{#if primaryAlias}
-				{#if primaryAlias !== parsed.modelName}
-					<span class={badgeClass}>{parsed.modelName ?? modelId}</span>
+		{#if hasBadges}
+			<span class="inline-flex items-center gap-1 {wrap ? 'flex-wrap' : ''}">
+				{#if parsed.sidecar}
+					<span class={variantBadgeClass} title={`${parsed.sidecar.toUpperCase()} draft model`}>
+						{parsed.sidecar}
+					</span>
 				{/if}
-			{:else if uniqueAliases.length > 1}
-				{#each uniqueAliases as alias (alias)}
-					<span class={badgeClass}>{alias}</span>
-				{/each}
-			{/if}
 
-			{#if uniqueTags.length > 0 && !resolvedHideTags}
-				{#each uniqueTags as tag (tag)}
-					<span class={tagBadgeClass}>{tag}</span>
+				{#if (parsed.params || params) && !hideParameters}
+					<span class={badgeClass}>
+						{parsed.params ?? params}{parsed.activatedParams ? `-${parsed.activatedParams}` : ''}
+					</span>
+				{/if}
+
+				{#each uniqueDraftSidecars as sidecar (sidecar)}
+					<span class={variantBadgeClass} title={`${sidecar.toUpperCase()} draft model available`}>
+						{sidecar}
+					</span>
 				{/each}
-			{/if}
-		</span>
+
+				{#if parsed.quantization && !resolvedHideQuantization}
+					<span class={badgeClass}>
+						{parsed.quantization}
+					</span>
+				{/if}
+
+				{#if primaryAlias}
+					{#if primaryAlias !== parsed.modelName}
+						<span class={badgeClass}>{parsed.modelName ?? modelId}</span>
+					{/if}
+				{:else if uniqueAliases.length > 1}
+					{#each uniqueAliases as alias (alias)}
+						<span class={badgeClass}>{alias}</span>
+					{/each}
+				{/if}
+
+				{#if uniqueTags.length > 0 && !resolvedHideTags}
+					{#each uniqueTags as tag (tag)}
+						<span class={tagBadgeClass}>{tag}</span>
+					{/each}
+				{/if}
+			</span>
+		{/if}
 	{/snippet}
 
 	<span
@@ -233,26 +244,28 @@
 			{#if !iconsOnNewLine}{@render capabilityIcons()}{/if}
 		</span>
 
-		<span class="inline-flex items-center gap-1.5">
-			{#if iconsOnNewLine}{@render capabilityIcons()}{/if}
+		{#if iconsOnNewLine || contextLength || sizeRange}
+			<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" />
+				{#if contextLength}
+					<span class="inline-flex items-center gap-1 text-muted-foreground">
+						<ScrollText class="h-3 w-3" />
 
-					<span class="text-xs">{formatParameters(contextLength)}</span>
-				</span>
-			{/if}
+						<span class="text-xs">{formatParameters(contextLength)}</span>
+					</span>
+				{/if}
 
-			{#if sizeRange}
-				<span class="inline-flex items-center gap-1 text-muted-foreground">
-					<Database class="h-3 w-3" />
+				{#if sizeRange}
+					<span class="inline-flex items-center gap-1 text-muted-foreground">
+						<Database class="h-3 w-3" />
 
-					<span class="text-xs"
-						>{HuggingFaceService.formatSizeRange(sizeRange.min, sizeRange.max)}</span
-					>
-				</span>
-			{/if}
-		</span>
+						<span class="text-xs"
+							>{HuggingFaceService.formatSizeRange(sizeRange.min, sizeRange.max)}</span
+						>
+					</span>
+				{/if}
+			</span>
+		{/if}
 	</span>
 {/if}

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

@@ -355,7 +355,7 @@
 							class={[
 								`inline-flex cursor-pointer items-center gap-1.5 rounded-sm bg-background px-1.5 py-1 text-xs shadow-sm transition hover:bg-muted-foreground/20 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-60 dark:bg-muted-foreground/15 dark:text-secondary-foreground`,
 								!ms.isCurrentModelInCache
-									? 'bg-red-400/10 !text-red-400 hover:bg-red-400/20 hover:text-red-400'
+									? 'bg-red-400/10 text-red-400! hover:bg-red-400/20 hover:text-red-400'
 									: forceForegroundText
 										? 'text-foreground'
 										: ms.isHighlightedCurrentModelActive

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

@@ -20,7 +20,7 @@
 	     through the `child` snippet to keep Collapsible.Trigger's native button.
 	     closeOnSelect keeps the menu open while the effort list is being used. -->
 	<DropdownMenu.Item
-		class="w-full min-w-0 cursor-pointer items-center gap-2 rounded-md px-2 py-1.75 text-left text-sm"
+		class="w-full min-w-0 cursor-pointer items-center gap-2 py-2 rounded-md text-left text-sm"
 		closeOnSelect={false}
 	>
 		{#snippet child({ props })}
@@ -36,10 +36,10 @@
 					<Lightbulb class="{ICON_CLASS_DEFAULT} shrink-0 text-muted-foreground" />
 				{/if}
 
-				<span class="flex min-w-0 flex-1 items-center gap-1.5">
+				<span class="flex min-w-0 flex-1 items-center gap-2">
 					<span class="truncate">Reasoning</span>
 
-					<span class="shrink-0 text-xs capitalize text-muted-foreground">
+					<span class="shrink-0 capitalize text-muted-foreground">
 						{reasoning.currentEffort}
 					</span>
 				</span>

tools/ui/src/lib/components/app/models/discover/ModelsDiscoverModelDetailsDownloadOptionsRow.svelte

@@ -19,7 +19,7 @@
 	let draftMemGb = $derived(draftFile ? minMemoryTierGb(draftFile.size ?? 0) : null);
 </script>
 
-<div class="grid grid-cols-[5rem_1fr] items-start gap-3 py-3">
+<div class="grid grid-cols-[5rem_1fr] items-center gap-3 py-3">
 	<div class="pt-1 text-sm tabular-nums text-muted-foreground">
 		{#if bitDepth === 99}
 			Other

tools/ui/src/lib/components/app/models/discover/ModelsDiscoverModelDetailsReadme.svelte

@@ -9,9 +9,7 @@
 </script>
 
 {#if readme}
-	<section class="space-y-2 bg-muted/50 p-3 rounded-xl">
-		<h2 class="text-xs font-semibold tracking-wide text-muted-foreground uppercase">README</h2>
-
+	<section class="bg-muted/50 p-3 rounded-xl">
 		<MarkdownContent allowHtml class="prose-sm max-w-none" content={readme} />
 	</section>
 {/if}