From d17f6970b9d4a6b887609314aabb20a034578a95 Mon Sep 17 00:00:00 2001
From: Dorian <dorian@Dorians-MacBook-Air.local>
Date: Fri, 13 Mar 2026 17:15:11 +0000
Subject: [PATCH] fix: move setup guide to post-registration step where
 credentials exist

- Remove setup guide from pre-registration bot-setup step (no credentials yet)
- Add collapsible guide preview to ready step with real bot_id/secret injected
- "COPY GUIDE + CREDENTIALS" copies the full guide with credentials embedded

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

diff --git a/frontend/src/pages/JoinBoutPage.vue b/frontend/src/pages/JoinBoutPage.vue
index 6479a1f..0d0d19e 100644
--- a/frontend/src/pages/JoinBoutPage.vue
+++ b/frontend/src/pages/JoinBoutPage.vue
@@ -965,7 +965,7 @@ function handleSignOut() {
             SET UP {{ botName.toUpperCase() }}
           </h2>
           <p class="font-mono text-text-muted text-xs">
-            Pick a mode, download the guide, tell your AI.
+            Pick how your bot connects.
           </p>
         </div>
 
@@ -1009,39 +1009,6 @@ function handleSignOut() {
           </button>
         </div>
 
-        <!-- Setup guide (collapsible) -->
-        <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="toggleSetupContent"
-          >
-            {{ showSetupContent ? 'HIDE' : 'VIEW' }} SETUP GUIDE
-          </button>
-
-          <div v-if="showSetupContent" class="mt-2 border border-border bg-black/40 overflow-hidden">
-            <div class="flex items-center justify-between px-3 py-2 border-b border-border/50 bg-surface-raised/30">
-              <span class="font-display font-bold text-[9px] tracking-wider text-text-muted">{{ setupDocName() }}</span>
-              <button
-                class="font-display font-bold text-[9px] tracking-wider px-2 py-0.5 border transition-all"
-                :class="setupContentCopied
-                  ? 'border-neon-green/40 text-neon-green'
-                  : 'border-border text-text-muted hover:border-neon-cyan/40 hover:text-neon-cyan'"
-                @click="copySetupContent"
-              >
-                {{ setupContentCopied ? 'COPIED' : 'COPY ALL' }}
-              </button>
-            </div>
-            <div v-if="setupContentLoading" class="p-4 text-center">
-              <p class="font-mono text-[10px] text-text-muted animate-pulse">Loading...</p>
-            </div>
-            <pre v-else class="p-3 font-mono text-[10px] text-text-secondary leading-relaxed
-                               overflow-x-auto max-h-80 overflow-y-auto whitespace-pre-wrap break-words select-all">{{ setupContent }}</pre>
-          </div>
-        </div>
-
         <!-- Safety callout -->
         <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">
@@ -1353,6 +1320,34 @@ function handleSignOut() {
             Paste this into your AI (Claude, ChatGPT, etc.) — it includes the full setup guide with your credentials.
             Save these credentials — the secret won't be shown again.
           </p>
+
+          <!-- Collapsible guide preview -->
+          <button
+            class="w-full mt-2 py-1.5 border border-border text-[9px] font-display font-bold tracking-wider
+                   text-text-muted hover:border-neon-cyan/40 hover:text-neon-cyan transition-all"
+            @click="toggleSetupContent"
+          >
+            {{ showSetupContent ? 'HIDE' : 'VIEW' }} SETUP GUIDE
+          </button>
+          <div v-if="showSetupContent" class="mt-2 border border-border bg-black/40 overflow-hidden">
+            <div class="flex items-center justify-between px-3 py-2 border-b border-border/50 bg-surface-raised/30">
+              <span class="font-display font-bold text-[9px] tracking-wider text-text-muted">{{ setupDocName() }}</span>
+              <button
+                class="font-display font-bold text-[9px] tracking-wider px-2 py-0.5 border transition-all"
+                :class="setupContentCopied
+                  ? 'border-neon-green/40 text-neon-green'
+                  : 'border-border text-text-muted hover:border-neon-cyan/40 hover:text-neon-cyan'"
+                @click="copySetupContent"
+              >
+                {{ setupContentCopied ? 'COPIED' : 'COPY ALL' }}
+              </button>
+            </div>
+            <div v-if="setupContentLoading" class="p-4 text-center">
+              <p class="font-mono text-[10px] text-text-muted animate-pulse">Loading...</p>
+            </div>
+            <pre v-else class="p-3 font-mono text-[10px] text-text-secondary leading-relaxed
+                               overflow-x-auto max-h-80 overflow-y-auto whitespace-pre-wrap break-words select-all">{{ setupContent }}</pre>
+          </div>
         </div>
 
         <div class="mb-4 text-center">