From 9c44f5a917fc628e870073c126bf9480c98c7f73 Mon Sep 17 00:00:00 2001
From: hugocasa <hugo@casademont.ch>
Date: Tue, 13 Oct 2026 16:20:53 +0200
Subject: [PATCH] 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        | 6 +++++-
 .../src/lib/components/common/radioCard/RadioCard.svelte  | 8 +++++++-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/frontend/src/lib/components/AppConnectInner.svelte b/frontend/src/lib/components/AppConnectInner.svelte
index 18a28ec95d..4dc05972ca 100644
--- a/frontend/src/lib/components/AppConnectInner.svelte
+++ b/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'
diff --git a/frontend/src/lib/components/common/radioCard/RadioCard.svelte b/frontend/src/lib/components/common/radioCard/RadioCard.svelte
index e152324fce..6e7aa67ef8 100644
--- a/frontend/src/lib/components/common/radioCard/RadioCard.svelte
+++ b/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)()}