improve auto presentation

src/lib/components/icon-provider.svelte

@@ -659,6 +659,19 @@ C 321.52 279.69 330.41 279.63 336.00 278.00 Z"
 			/>
 		</g>
 	</svg>
+{:else if provider === "auto"}
+	<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"
+		><!-- Icon from Lucide by Lucide Contributors - https://github.com/lucide-icons/lucide/blob/main/LICENSE --><g
+			fill="none"
+			stroke="currentColor"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			stroke-width="2"
+			><path d="M12 8V4H8" /><rect width="16" height="12" x="4" y="8" rx="2" /><path
+				d="M2 14h2m16 0h2m-7-1v2m-6-2v2"
+			/></g
+		></svg
+	>
 {:else if children}{@render children()}{:else}
 	<div class="size-4 flex-none rounded-sm bg-gray-200"></div>
 {/if}

src/lib/components/inference-playground/provider-select.svelte

@@ -70,6 +70,11 @@
 
 		return words.join(" ");
 	}
+
+	function getProviderName(provider: string) {
+		if (provider in nameMap) return formatName(provider);
+		return provider === "auto" ? "Choose automatically" : provider;
+	}
 </script>
 
 <div class="flex flex-col gap-2">
@@ -89,7 +94,7 @@
 	>
 		<div class="flex items-center gap-1 text-sm">
 			<IconProvider provider={conversation.data.provider} />
-			{formatName(conversation.data.provider ?? "") ?? "loading"}
+			{getProviderName(conversation.data.provider ?? "") ?? "loading"}
 		</div>
 		<div
 			class="absolute right-2 grid size-4 flex-none place-items-center rounded-sm bg-gray-100 text-xs dark:bg-gray-600"
@@ -99,19 +104,19 @@
 	</button>
 
 	<div {...select.content} class="rounded-lg border bg-gray-100 dark:border-gray-700 dark:bg-gray-800">
-		{#snippet option(provider: string, label?: string)}
+		{#snippet option(provider: string)}
 			<div {...select.getOption(provider)} class="group block w-full p-1 text-sm dark:text-white">
 				<div
 					class="flex items-center gap-2 rounded-md px-2 py-1.5 group-data-[highlighted]:bg-gray-200 dark:group-data-[highlighted]:bg-gray-700"
 				>
 					<IconProvider {provider} />
-					{formatName(label ?? provider)}
+					{getProviderName(provider)}
 				</div>
 			</div>
 		{/snippet}
 		{#each conversation.model.inferenceProviderMapping as { provider, providerId } (provider + providerId)}
 			{@render option(provider)}
 		{/each}
-		{@render option("auto", "Choose automatically")}
+		{@render option("auto")}
 	</div>
 </div>