fix: webhook verify shows loading spinner and better error on failure

Added isVerifyingWebhook state with spinner and disabled button during
webhook test. Improved error message to guide user on retry.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/src/pages/JoinBoutPage.vue

@@ -32,6 +32,7 @@ const isJoiningRanked = ref(false)
 const isJoiningPractice = ref(false)
 
 // Bot connection mode
+const isVerifyingWebhook = ref(false)
 const connectionMode = ref<'webhook' | 'polling'>('webhook')
 const botSecret = ref('')
 const botId = ref('')
@@ -501,13 +502,16 @@ async function confirmWebhook() {
   }
 
   error.value = ''
+  isVerifyingWebhook.value = true
   try {
     const result = await registerBot(botName.value.trim(), url, selectedArchetype.value)
     botId.value = result.bot.id
     botSecret.value = result.secret
     step.value = 'ready'
   } catch (e) {
-    handleError(e, 'Registration failed.')
+    handleError(e, 'Webhook verification failed. Check your URL and try again.')
+  } finally {
+    isVerifyingWebhook.value = false
   }
 }
 
@@ -1095,10 +1099,11 @@ function handleSignOut() {
                    font-display font-bold text-sm tracking-wider
                    hover:bg-neon-pink/20 transition-all
                    disabled:opacity-30 disabled:cursor-not-allowed"
-            :disabled="!webhookUrl.trim()"
+            :disabled="!webhookUrl.trim() || isVerifyingWebhook"
             @click="confirmWebhook"
           >
-            TEST & CREATE
+            <span v-if="isVerifyingWebhook" class="inline-block w-4 h-4 border-2 border-neon-pink/30 border-t-neon-pink rounded-full animate-spin mr-1 align-middle" />
+            {{ isVerifyingWebhook ? 'TESTING...' : 'TEST & CREATE' }}
           </button>
         </div>
       </template>