From 017d0e3e4c2935ada1171dd86210d7e7b4adf67b Mon Sep 17 00:00:00 2001
From: Dorian <dorian@Dorians-MacBook-Air.local>
Date: Thu, 12 Mar 2026 17:02:45 +0000
Subject: [PATCH] fix: consolidate bot setup into single step with doc download
 + mode picker

Merged bot-setup and choose-connection into one actionable step.
Users now see mode picker, download button for the correct guide
(BOTFIGHTS-WEBHOOK.md or BOTFIGHTS-POLLING.md), and safety info
all on one screen instead of two filler steps with no actions.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/pages/JoinBoutPage.vue | 206 ++++++++++------------------
 1 file changed, 72 insertions(+), 134 deletions(-)

diff --git a/frontend/src/pages/JoinBoutPage.vue b/frontend/src/pages/JoinBoutPage.vue
index db04d93..117f07a 100644
--- a/frontend/src/pages/JoinBoutPage.vue
+++ b/frontend/src/pages/JoinBoutPage.vue
@@ -18,7 +18,7 @@ const nsecInput = ref('')
 const rememberKey = ref(false)
 const { isWalletConnected, payEntryFee, paymentStatus } = useWallet()
 
-// Steps: 'login' | 'choose-mode' | 'pick-character' | 'name-bot' | 'bot-setup' | 'choose-connection' | 'add-webhook' |
+// Steps: 'login' | 'choose-mode' | 'pick-character' | 'name-bot' | 'bot-setup' | 'add-webhook' |
 //         'pick-human-avatar' | 'name-human' | 'human-guide' | 'ready'
 const step = ref<string>('login')
 const isHumanMode = ref(false)
@@ -920,58 +920,92 @@ function handleSignOut() {
         </div>
       </template>
 
-      <!-- STEP: BOT SETUP — easy setup messaging -->
+      <!-- STEP: BOT SETUP — pick mode, download doc, get prompt -->
       <template v-else-if="step === 'bot-setup'">
-        <div class="text-center mb-5">
+        <div class="text-center mb-4">
           <h2 class="font-display font-black text-2xl tracking-wider gradient-text mb-2">
-            EASY SETUP
+            SET UP {{ botName.toUpperCase() }}
           </h2>
           <p class="font-mono text-text-muted text-xs">
-            Your AI sets everything up. You just tell it to.
+            Pick a mode, download the guide, tell your AI.
           </p>
         </div>
 
-        <!-- How it works steps -->
-        <div class="space-y-2.5 mb-5">
-          <div class="flex items-start gap-3 p-2.5 border border-border bg-surface">
-            <span class="font-display font-black text-neon-cyan text-sm mt-0.5">1</span>
-            <div>
-              <p class="font-mono text-xs text-text-primary">Pick your connection mode (next step)</p>
-              <p class="font-mono text-[10px] text-text-muted mt-0.5">Webhook (fastest) or polling (easiest, no public URL)</p>
+        <!-- Mode picker -->
+        <div class="space-y-2 mb-4">
+          <button
+            class="w-full p-3 border-2 text-left transition-all"
+            :class="connectionMode === 'webhook'
+              ? 'border-neon-cyan/60 bg-neon-cyan/10'
+              : 'border-border bg-surface hover:border-neon-cyan/30'"
+            @click="connectionMode = 'webhook'"
+          >
+            <div class="flex items-center gap-2 mb-1">
+              <span class="font-display font-black text-sm"
+                :class="connectionMode === 'webhook' ? 'text-neon-cyan' : 'text-text-secondary'">
+                WEBHOOK
+              </span>
+              <span class="font-mono text-[9px] px-1.5 py-0.5 border border-neon-cyan/30 text-neon-cyan">FASTEST</span>
             </div>
-          </div>
-          <div class="flex items-start gap-3 p-2.5 border border-border bg-surface">
-            <span class="font-display font-black text-neon-cyan text-sm mt-0.5">2</span>
-            <div>
-              <p class="font-mono text-xs text-text-primary">Download BOTFIGHTS.md into your workspace</p>
-              <p class="font-mono text-[10px] text-text-muted mt-0.5">One file — your AI reads it and builds the bot</p>
+            <p class="font-mono text-[10px] text-text-muted leading-relaxed">
+              We POST challenges to your server. Needs a public URL.
+            </p>
+          </button>
+          <button
+            class="w-full p-3 border-2 text-left transition-all"
+            :class="connectionMode === 'polling'
+              ? 'border-neon-purple/60 bg-neon-purple/10'
+              : 'border-border bg-surface hover:border-neon-purple/30'"
+            @click="connectionMode = 'polling'"
+          >
+            <div class="flex items-center gap-2 mb-1">
+              <span class="font-display font-black text-sm"
+                :class="connectionMode === 'polling' ? 'text-neon-purple' : 'text-text-secondary'">
+                POLLING
+              </span>
+              <span class="font-mono text-[9px] px-1.5 py-0.5 border border-border text-text-muted">EASIEST</span>
             </div>
-          </div>
-          <div class="flex items-start gap-3 p-2.5 border border-border bg-surface">
-            <span class="font-display font-black text-neon-cyan text-sm mt-0.5">3</span>
-            <div>
-              <p class="font-mono text-xs text-text-primary">Copy the prompt we give you and paste it to your AI</p>
-              <p class="font-mono text-[10px] text-text-muted mt-0.5">Includes your credentials. AI handles everything. Done.</p>
-            </div>
-          </div>
+            <p class="font-mono text-[10px] text-text-muted leading-relaxed">
+              Your bot polls us. No public URL needed. Just keep it running.
+            </p>
+          </button>
+        </div>
+
+        <!-- Download guide -->
+        <div class="mb-3">
+          <button
+            class="w-full py-2.5 border-2 font-display font-bold text-sm tracking-wider transition-all"
+            :class="connectionMode === 'webhook'
+              ? 'border-neon-cyan/50 text-neon-cyan hover:bg-neon-cyan/10'
+              : 'border-neon-purple/50 text-neon-purple hover:bg-neon-purple/10'"
+            @click="downloadSetupGuide"
+          >
+            DOWNLOAD {{ setupDocName() }}
+          </button>
+          <p class="font-mono text-[10px] text-text-muted mt-1 text-center">
+            Put this file in your workspace — your AI reads it to build the bot
+          </p>
         </div>
 
         <!-- Safety callout -->
-        <div class="p-3 border border-neon-cyan/20 bg-neon-cyan/5 mb-5">
-          <p class="font-display font-bold text-[10px] tracking-wider text-neon-cyan mb-1.5">
+        <div class="p-2.5 border border-neon-cyan/20 bg-neon-cyan/5 mb-4">
+          <p class="font-display font-bold text-[10px] tracking-wider text-neon-cyan mb-1">
             SAFE & SIMPLE
           </p>
-          <ul class="font-mono text-[10px] text-text-muted space-y-1 leading-relaxed">
-            <li>Your <span class="text-text-secondary">API keys stay on your machine</span> — we never see them</li>
-            <li>We only send <span class="text-text-secondary">fight questions</span> — nothing else</li>
-            <li>Private IPs and internal URLs are <span class="text-text-secondary">blocked</span></li>
-            <li>Small JSON payloads (<span class="text-text-secondary">&lt;2KB</span>), responses capped at <span class="text-text-secondary">10KB</span></li>
-            <li>Give the setup guide to your AI and it builds the bot for you</li>
+          <ul class="font-mono text-[10px] text-text-muted space-y-0.5 leading-relaxed">
+            <li v-if="connectionMode === 'webhook'">
+              We only send <span class="text-text-secondary">POST</span> requests with fight questions
+            </li>
+            <li v-if="connectionMode === 'polling'">
+              <span class="text-text-secondary">No incoming connections</span> — outbound only
+            </li>
+            <li>Your <span class="text-text-secondary">API keys stay on your machine</span></li>
+            <li>Private IPs <span class="text-text-secondary">blocked</span>, payloads <span class="text-text-secondary">&lt;2KB</span></li>
           </ul>
         </div>
 
-        <!-- Tech details toggle for curious users -->
-        <details class="mb-5 group">
+        <!-- What's happening -->
+        <details class="mb-4 group">
           <summary class="font-display font-bold text-[10px] tracking-wider text-text-secondary cursor-pointer
                          hover:text-neon-purple transition-colors select-none">
             WHAT'S ACTUALLY HAPPENING?
@@ -980,7 +1014,6 @@ function handleSignOut() {
             Your AI runs a small server that receives fight challenges from BOTFIGHTS.
             When a challenge comes in, it uses Claude to figure out the answer and fires it back.
             5-10 rounds per fight, scored on correctness and speed.
-            You don't need to understand any of this — just tell your AI to set it up.
           </p>
         </details>
 
@@ -992,101 +1025,6 @@ function handleSignOut() {
           >
             BACK
           </button>
-          <button
-            class="flex-1 py-3 bg-neon-cyan/10 border-2 border-neon-cyan/50 text-neon-cyan
-                   font-display font-bold text-sm tracking-wider
-                   hover:bg-neon-cyan/20 transition-all"
-            @click="step = 'choose-connection'"
-          >
-            GOT IT, NEXT
-          </button>
-        </div>
-      </template>
-
-      <!-- STEP: CHOOSE CONNECTION MODE -->
-      <template v-else-if="step === 'choose-connection'">
-        <div class="text-center mb-5">
-          <h2 class="font-display font-black text-2xl tracking-wider gradient-text mb-2">
-            CONNECTION MODE
-          </h2>
-          <p class="font-mono text-text-muted text-xs">
-            How should we reach <span class="text-neon-cyan">{{ botName }}</span>?
-          </p>
-        </div>
-
-        <div class="space-y-3 mb-5">
-          <!-- Webhook option -->
-          <button
-            class="w-full p-4 border-2 text-left transition-all"
-            :class="connectionMode === 'webhook'
-              ? 'border-neon-cyan/60 bg-neon-cyan/10'
-              : 'border-border bg-surface hover:border-neon-cyan/30'"
-            @click="connectionMode = 'webhook'"
-          >
-            <div class="flex items-center gap-3 mb-1.5">
-              <span class="font-display font-black text-sm"
-                :class="connectionMode === 'webhook' ? 'text-neon-cyan' : 'text-text-secondary'">
-                WEBHOOK
-              </span>
-              <span class="font-mono text-[9px] px-1.5 py-0.5 border border-neon-cyan/30 text-neon-cyan">RECOMMENDED</span>
-            </div>
-            <p class="font-mono text-[10px] text-text-muted leading-relaxed">
-              We POST challenges to your server. Fastest response times.
-              Requires a public URL (ngrok, cloudflared, VPS, etc.)
-            </p>
-          </button>
-
-          <!-- Polling option -->
-          <button
-            class="w-full p-4 border-2 text-left transition-all"
-            :class="connectionMode === 'polling'
-              ? 'border-neon-purple/60 bg-neon-purple/10'
-              : 'border-border bg-surface hover:border-neon-purple/30'"
-            @click="connectionMode = 'polling'"
-          >
-            <div class="flex items-center gap-3 mb-1.5">
-              <span class="font-display font-black text-sm"
-                :class="connectionMode === 'polling' ? 'text-neon-purple' : 'text-text-secondary'">
-                POLLING
-              </span>
-              <span class="font-mono text-[9px] px-1.5 py-0.5 border border-border text-text-muted">EASIEST</span>
-            </div>
-            <p class="font-mono text-[10px] text-text-muted leading-relaxed">
-              Your bot polls us for challenges. No public URL needed.
-              Runs from any machine — just keep the script running.
-            </p>
-          </button>
-        </div>
-
-        <!-- Safety callout -->
-        <div class="p-3 border border-neon-cyan/20 bg-neon-cyan/5 mb-5">
-          <p class="font-display font-bold text-[10px] tracking-wider text-neon-cyan mb-1.5">
-            SAFE & SIMPLE
-          </p>
-          <ul class="font-mono text-[10px] text-text-muted space-y-1 leading-relaxed">
-            <li v-if="connectionMode === 'webhook'">
-              We only send <span class="text-text-secondary">POST</span> requests with fight questions — nothing else
-            </li>
-            <li v-if="connectionMode === 'polling'">
-              <span class="text-text-secondary">No incoming connections</span> — your bot only makes outbound requests
-            </li>
-            <li>Private IPs and internal URLs are <span class="text-text-secondary">blocked</span></li>
-            <li>Payloads are small JSON (<span class="text-text-secondary">&lt;2KB</span>)</li>
-            <li>Your <span class="text-text-secondary">API keys stay on your machine</span> — we never see them</li>
-            <li>
-              <span class="text-text-secondary">Give the setup guide to your AI</span> and it builds the bot for you
-            </li>
-          </ul>
-        </div>
-
-        <div class="flex gap-2">
-          <button
-            class="flex-1 py-3 border-2 border-border text-text-muted font-display font-bold text-sm tracking-wider
-                   hover:border-neon-purple/40 transition-all"
-            @click="step = 'bot-setup'"
-          >
-            BACK
-          </button>
           <button
             v-if="connectionMode === 'webhook'"
             class="flex-1 py-3 bg-neon-cyan/10 border-2 border-neon-cyan/50 text-neon-cyan
@@ -1094,7 +1032,7 @@ function handleSignOut() {
                    hover:bg-neon-cyan/20 transition-all"
             @click="step = 'add-webhook'"
           >
-            SET UP WEBHOOK
+            NEXT
           </button>
           <button
             v-else
@@ -1148,7 +1086,7 @@ function handleSignOut() {
           <button
             class="flex-1 py-3 border-2 border-border text-text-muted font-display font-bold text-sm tracking-wider
                    hover:border-neon-purple/40 transition-all"
-            @click="step = 'choose-connection'"
+            @click="step = 'bot-setup'"
           >
             BACK
           </button>