fix: badge the unavailable sign-in option in the oauth resource form (#11728)

Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>

frontend/src/lib/components/AppConnectInner.svelte

@@ -25,7 +25,7 @@
 	import { registryEntryFor, registryCcCapableFor, stripSandboxSuffix } from './oauthRegistry'
 	import { createEventDispatcher, onDestroy, tick } from 'svelte'
 	import Path from './Path.svelte'
-	import { ListRow, RadioCard, Skeleton } from './common'
+	import { Badge, ListRow, RadioCard, Skeleton } from './common'
 	import { useListHighlight } from './common/listRow/listHighlight.svelte'
 	import ApiConnectForm from './ApiConnectForm.svelte'
 	import SearchItems from './SearchItems.svelte'
@@ -1545,7 +1545,11 @@
 									selected={!useClientCredentials}
 									onSelect={selectAuthCodeGrant}
 									disabled={signInNeedsInstanceClient}
+									badge={signInNeedsInstanceClient ? setupNeededBadge : undefined}
 								/>
+								{#snippet setupNeededBadge()}
+									<Badge verySmall class="px-2">Instance setup needed</Badge>
+								{/snippet}
 								<RadioCard
 									label={useSharedInstanceCreds
 										? 'Use the configured instance credentials'

frontend/src/lib/components/common/radioCard/RadioCard.svelte

@@ -10,6 +10,7 @@
 		onSelect,
 		disabled = false,
 		icon = undefined,
+		badge = undefined,
 		showRadio = true,
 		class: className = ''
 	}: {
@@ -25,6 +26,8 @@
 		disabled?: boolean
 		/** Optional leading icon, rendered after the radio */
 		icon?: Snippet
+		/** Optional badge rendered right after the label */
+		badge?: Snippet
 		/** Draw the radio glyph. Turn it off where the card itself is the only
 		 * control and the border and tint already say which one is picked — the dot
 		 * is then a second, redundant answer to the same question. The group still
@@ -70,7 +73,10 @@
 			<div class="shrink-0 mt-0.5">{@render icon()}</div>
 		{/if}
 		<div class="flex-1 min-w-0">
-			<div class="text-xs font-semibold text-emphasis">{label}</div>
+			<div class="flex items-center gap-2 text-xs font-semibold text-emphasis">
+				{label}
+				{@render badge?.()}
+			</div>
 			{#if describedBySnippet}
 				<div class="text-xs font-normal text-secondary mt-0.5">
 					{@render (description as Snippet)()}