From 603e09b6d86e52f66ba8105b3b343c7fea183c3c Mon Sep 17 00:00:00 2001
From: Dorian <z00york@mac.com>
Date: Fri, 31 Jul 2026 06:02:42 -0400
Subject: [PATCH] fix(join-bout): make the setup-guide mode picker visibly do
 something
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

BOT-02 consolidated the poll/webhook setup docs into one file
(BOTFIGHTS.md) that documents both options — correct by design, but the
UI still had a leftover watch(connectionMode, ...) that cleared and
refetched the *same* file every time you clicked WEBHOOK/POLLING, showing
a "Loading..." flash for content that never actually changed. From a
user's perspective the tab looked broken: click it, nothing visibly
different happens.

Fix: stop the pointless refetch, and add a `modeHint()` banner — colored
per mode, updates instantly on click — inside the guide viewer and
prepended to the copied text, pointing the reader/AI at "Option A: Polling
Bot" or "Option B: Webhook Bot" within the same doc. The mode picker now
produces an immediate, obvious visual change, and the copied prompt is
mode-aware even though the underlying file is shared by design.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 frontend/src/pages/JoinBoutPage.vue | 33 ++++++++++++++++++++++++++---
 1 file changed, 30 insertions(+), 3 deletions(-)

diff --git a/frontend/src/pages/JoinBoutPage.vue b/frontend/src/pages/JoinBoutPage.vue
index c8f778a..4ad13d6 100644
--- a/frontend/src/pages/JoinBoutPage.vue
+++ b/frontend/src/pages/JoinBoutPage.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch, onMounted, onUnmounted } from 'vue'
+import { ref, onMounted, onUnmounted } from 'vue'
 import { useRouter, onBeforeRouteLeave } from 'vue-router'
 import { useNostr } from '../composables/useNostr'
 import { useWallet } from '../composables/useWallet'
@@ -517,7 +517,10 @@ const showSetupContent = ref(false)
 const setupContent = ref('')
 const setupContentLoading = ref(false)
 const setupContentCopied = ref(false)
-watch(connectionMode, () => { setupContent.value = ''; showSetupContent.value = false })
+// The guide is ONE file covering both modes (BOT-02) — switching the mode
+// picker never changes which bytes get fetched, so don't clear/refetch here.
+// What DOES need to visibly react to the picker is `modeHint` below, so a
+// click still produces an immediate, obvious change instead of looking inert.
 
 function setupDocPath() {
   return '/docs/BOTFIGHTS.md'
@@ -527,6 +530,15 @@ function setupDocName() {
   return 'BOTFIGHTS.md'
 }
 
+// One-line banner shown in the guide viewer AND prepended to the copied
+// text, so picking POLLING vs WEBHOOK visibly does something even though
+// the underlying doc (both options, by design) never changes.
+function modeHint() {
+  return connectionMode.value === 'polling'
+    ? 'You picked POLLING — tell your AI to use "Option A: Polling Bot" below. No public URL needed.'
+    : 'You picked WEBHOOK — tell your AI to use "Option B: Webhook Bot" below. Needs a public URL.'
+}
+
 async function toggleSetupContent() {
   showSetupContent.value = !showSetupContent.value
   if (showSetupContent.value && !setupContent.value) {
@@ -562,9 +574,10 @@ async function copyFullPrompt() {
       setupContent.value = content
     } catch { /* fall through with empty content */ }
   }
-  const text = setupContent.value
+  const body = setupContent.value
     ? setupContent.value
     : `Read ${setupDocName()} and follow the setup instructions.\n\nBOT_ID=${botId.value}\nBOT_SECRET=${botSecret.value}`
+  const text = `${modeHint()}\n\n${body}`
   navigator.clipboard.writeText(text)
   setupGuideCopied.value = true
   setTimeout(() => { setupGuideCopied.value = false }, 2000)
@@ -1043,6 +1056,13 @@ function handleSignOut() {
                 {{ setupContentCopied ? 'COPIED' : 'COPY ALL' }}
               </button>
             </div>
+            <!-- Reacts instantly to the mode picker above, even though the
+                 file itself (one doc, both options) never changes — this is
+                 the visible confirmation that the picker did something. -->
+            <p class="px-3 py-2 border-b border-border/50 font-mono text-[9px] leading-relaxed"
+              :class="connectionMode === 'polling' ? 'text-neon-purple bg-neon-purple/5' : 'text-neon-cyan bg-neon-cyan/5'">
+              {{ modeHint() }}
+            </p>
             <div v-if="setupContentLoading" class="p-4 text-center">
               <p class="font-mono text-[10px] text-text-muted animate-pulse">Loading...</p>
             </div>
@@ -1354,6 +1374,13 @@ function handleSignOut() {
                 {{ setupContentCopied ? 'COPIED' : 'COPY ALL' }}
               </button>
             </div>
+            <!-- Reacts instantly to the mode picker above, even though the
+                 file itself (one doc, both options) never changes — this is
+                 the visible confirmation that the picker did something. -->
+            <p class="px-3 py-2 border-b border-border/50 font-mono text-[9px] leading-relaxed"
+              :class="connectionMode === 'polling' ? 'text-neon-purple bg-neon-purple/5' : 'text-neon-cyan bg-neon-cyan/5'">
+              {{ modeHint() }}
+            </p>
             <div v-if="setupContentLoading" class="p-4 text-center">
               <p class="font-mono text-[10px] text-text-muted animate-pulse">Loading...</p>
             </div>