fix: replace download with inline copy-paste setup guide, fix CSP for WASM + Nostr relays

- Replace file download with collapsible inline guide + COPY ALL button
- Guide content has bot_id/secret pre-filled from credentials
- JoinBoutPage: "COPY GUIDE + CREDENTIALS" eagerly loads guide content
- BotProfilePage: webhook/polling guide selector with copy after secret regen
- CSP: add wasm-unsafe-eval to scriptSrc (fixes Kokoro TTS WASM)
- CSP: add wss://relay.damus.io, wss://relay.nostr.band, wss://nos.lol to connectSrc

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

frontend/src/pages/BotProfilePage.vue

@@ -106,12 +106,16 @@ const webhookTestResult = ref<{ reachable: boolean; validResponse: boolean; late
 const webhookError = ref('')
 const webhookSuccess = ref('')
 
-// Setup guide download
+// Setup guide
 const showSetupGuide = ref(false)
 const isRegenerating = ref(false)
 const regeneratedSecret = ref('')
 const regeneratedBotId = ref('')
 const regenError = ref('')
+const guideContent = ref('')
+const guideLoading = ref(false)
+const guideCopied = ref(false)
+const guideMode = ref<'webhook' | 'polling'>('webhook')
 
 const ARCHETYPES = [
   'standard', 'lobster', 'sheep', 'cyborg', 'blob', 'tank', 'dog', 'cat',
@@ -290,26 +294,28 @@ async function handleRegenerateSecret() {
   isRegenerating.value = false
 }
 
-async function downloadGuide(mode: 'webhook' | 'polling') {
+async function loadGuide(mode: 'webhook' | 'polling') {
+  guideMode.value = mode
+  guideLoading.value = true
+  guideContent.value = ''
+  guideCopied.value = false
   const path = mode === 'polling' ? '/docs/BOTFIGHTS-POLLING.md' : '/docs/BOTFIGHTS-WEBHOOK.md'
-  const fileName = mode === 'polling' ? 'BOTFIGHTS-POLLING.md' : 'BOTFIGHTS-WEBHOOK.md'
   try {
     const res = await fetch(path)
     let content = await res.text()
     content = content.replace(/YOUR_BOT_ID/g, regeneratedBotId.value)
     content = content.replace(/YOUR_BOT_SECRET/g, regeneratedSecret.value)
-    const blob = new Blob([content], { type: 'text/markdown' })
-    const url = URL.createObjectURL(blob)
-    const a = document.createElement('a')
-    a.href = url
-    a.download = fileName
-    document.body.appendChild(a)
-    a.click()
-    document.body.removeChild(a)
-    URL.revokeObjectURL(url)
+    guideContent.value = content
   } catch {
-    window.open(path, '_blank')
+    guideContent.value = '# Failed to load setup guide'
   }
+  guideLoading.value = false
+}
+
+function copyGuide() {
+  navigator.clipboard.writeText(guideContent.value)
+  guideCopied.value = true
+  setTimeout(() => { guideCopied.value = false }, 2000)
 }
 
 onMounted(async () => {
@@ -835,11 +841,11 @@ const tierClass = (t: number) => `tier-${t}`
 
               <div v-if="showSetupGuide" class="mt-3 border border-border bg-surface-raised/60 p-4 space-y-3">
                 <p class="font-mono text-[10px] text-text-muted leading-relaxed">
-                  Download the setup guide with your credentials embedded.
+                  Get the setup guide with your credentials embedded.
                   This requires regenerating your bot secret (your old secret will stop working).
                 </p>
 
-                <!-- Already regenerated — show credentials + download -->
+                <!-- Already regenerated — show credentials + guide content -->
                 <template v-if="regeneratedSecret">
                   <div class="p-2.5 border border-neon-green/30 bg-neon-green/5">
                     <p class="font-display font-bold text-[10px] tracking-wider text-neon-green mb-2">NEW SECRET GENERATED</p>
@@ -850,24 +856,53 @@ const tierClass = (t: number) => `tier-${t}`
                     <p class="font-mono text-[9px] text-ko mt-2">Save this now. It will not be shown again after you leave this page.</p>
                   </div>
 
+                  <!-- Guide type selector -->
                   <div class="flex gap-2">
                     <button
-                      class="flex-1 py-2 bg-neon-purple/10 border border-neon-purple/40 text-neon-purple
-                             font-display font-bold text-[10px] tracking-wider
-                             hover:bg-neon-purple/20 transition-all"
-                      @click="downloadGuide('webhook')"
+                      class="flex-1 py-1.5 border font-display font-bold text-[10px] tracking-wider transition-all"
+                      :class="guideMode === 'webhook'
+                        ? 'border-neon-cyan/50 text-neon-cyan bg-neon-cyan/10'
+                        : 'border-border text-text-muted hover:border-neon-cyan/30'"
+                      @click="loadGuide('webhook')"
                     >
-                      WEBHOOK GUIDE
+                      WEBHOOK
                     </button>
                     <button
-                      class="flex-1 py-2 bg-neon-cyan/10 border border-neon-cyan/40 text-neon-cyan
-                             font-display font-bold text-[10px] tracking-wider
-                             hover:bg-neon-cyan/20 transition-all"
-                      @click="downloadGuide('polling')"
+                      class="flex-1 py-1.5 border font-display font-bold text-[10px] tracking-wider transition-all"
+                      :class="guideMode === 'polling'
+                        ? 'border-neon-purple/50 text-neon-purple bg-neon-purple/10'
+                        : 'border-border text-text-muted hover:border-neon-purple/30'"
+                      @click="loadGuide('polling')"
                     >
-                      POLLING GUIDE
+                      POLLING
                     </button>
                   </div>
+
+                  <!-- Guide content -->
+                  <div v-if="guideContent" class="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">
+                        {{ guideMode === 'polling' ? 'BOTFIGHTS-POLLING.md' : 'BOTFIGHTS-WEBHOOK.md' }}
+                      </span>
+                      <button
+                        class="font-display font-bold text-[9px] tracking-wider px-2 py-0.5 border transition-all"
+                        :class="guideCopied
+                          ? 'border-neon-green/40 text-neon-green'
+                          : 'border-border text-text-muted hover:border-neon-cyan/40 hover:text-neon-cyan'"
+                        @click="copyGuide"
+                      >
+                        {{ guideCopied ? 'COPIED' : 'COPY ALL' }}
+                      </button>
+                    </div>
+                    <pre class="p-3 font-mono text-[10px] text-text-secondary leading-relaxed
+                               overflow-x-auto max-h-60 overflow-y-auto whitespace-pre-wrap break-words select-all">{{ guideContent }}</pre>
+                  </div>
+                  <div v-else-if="guideLoading" class="p-4 text-center">
+                    <p class="font-mono text-[10px] text-text-muted animate-pulse">Loading...</p>
+                  </div>
+                  <p v-else class="font-mono text-[10px] text-text-muted text-center">
+                    Choose webhook or polling above to view the setup guide.
+                  </p>
                 </template>
 
                 <!-- Not yet regenerated — show button -->
@@ -882,7 +917,7 @@ const tierClass = (t: number) => `tier-${t}`
                     @click="handleRegenerateSecret"
                   >
                     <span v-if="isRegenerating" class="w-3 h-3 border-2 border-neon-yellow/30 border-t-neon-yellow rounded-full animate-spin" />
-                    {{ isRegenerating ? 'REGENERATING...' : 'REGENERATE SECRET & DOWNLOAD' }}
+                    {{ isRegenerating ? 'REGENERATING...' : 'REGENERATE SECRET' }}
                   </button>
                   <p class="font-mono text-[9px] text-text-muted">
                     Your current bot secret will be invalidated and replaced with a new one.

frontend/src/pages/JoinBoutPage.vue

@@ -527,6 +527,11 @@ async function confirmPolling() {
   }
 }
 
+const showSetupContent = ref(false)
+const setupContent = ref('')
+const setupContentLoading = ref(false)
+const setupContentCopied = ref(false)
+
 function setupDocPath() {
   return connectionMode.value === 'polling' ? '/docs/BOTFIGHTS-POLLING.md' : '/docs/BOTFIGHTS-WEBHOOK.md'
 }
@@ -535,29 +540,42 @@ function setupDocName() {
   return connectionMode.value === 'polling' ? 'BOTFIGHTS-POLLING.md' : 'BOTFIGHTS-WEBHOOK.md'
 }
 
-async function downloadSetupGuide() {
+async function toggleSetupContent() {
+  showSetupContent.value = !showSetupContent.value
+  if (showSetupContent.value && !setupContent.value) {
+    setupContentLoading.value = true
     try {
       const res = await fetch(setupDocPath())
       let content = await res.text()
       content = content.replace(/YOUR_BOT_ID/g, botId.value)
       content = content.replace(/YOUR_BOT_SECRET/g, botSecret.value)
-    const blob = new Blob([content], { type: 'text/markdown' })
-    const url = URL.createObjectURL(blob)
-    const a = document.createElement('a')
-    a.href = url
-    a.download = setupDocName()
-    document.body.appendChild(a)
-    a.click()
-    document.body.removeChild(a)
-    URL.revokeObjectURL(url)
+      setupContent.value = content
     } catch {
-    window.open(setupDocPath(), '_blank')
+      setupContent.value = '# Failed to load setup guide'
+    }
+    setupContentLoading.value = false
   }
 }
 
-function copyFullPrompt() {
-  const docName = setupDocName()
-  const text = `Read ${docName} and follow the setup instructions. Here are my credentials:\nBOT_ID=${botId.value}\nBOT_SECRET=${botSecret.value}`
+function copySetupContent() {
+  navigator.clipboard.writeText(setupContent.value)
+  setupContentCopied.value = true
+  setTimeout(() => { setupContentCopied.value = false }, 2000)
+}
+
+async function copyFullPrompt() {
+  if (!setupContent.value) {
+    try {
+      const res = await fetch(setupDocPath())
+      let content = await res.text()
+      content = content.replace(/YOUR_BOT_ID/g, botId.value)
+      content = content.replace(/YOUR_BOT_SECRET/g, botSecret.value)
+      setupContent.value = content
+    } catch { /* fall through with empty content */ }
+  }
+  const text = setupContent.value
+    ? setupContent.value
+    : `Read ${setupDocName()} and follow the setup instructions.\n\nBOT_ID=${botId.value}\nBOT_SECRET=${botSecret.value}`
   navigator.clipboard.writeText(text)
   setupGuideCopied.value = true
   setTimeout(() => { setupGuideCopied.value = false }, 2000)
@@ -991,20 +1009,37 @@ function handleSignOut() {
           </button>
         </div>
 
-        <!-- Download guide -->
+        <!-- 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="downloadSetupGuide"
+            @click="toggleSetupContent"
           >
-            DOWNLOAD {{ setupDocName() }}
+            {{ showSetupContent ? 'HIDE' : 'VIEW' }} SETUP GUIDE
           </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 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 -->
@@ -1297,49 +1332,25 @@ function handleSignOut() {
         <!-- Bot credentials (shown once after registration) -->
         <div v-if="botSecret" class="mb-4 p-3 border border-neon-cyan/20 bg-neon-cyan/5">
           <p class="font-display font-bold text-[10px] tracking-wider text-neon-cyan mb-2">
-            2 STEPS — THEN YOU'RE FIGHTING
+            COPY THIS TO YOUR AI
           </p>
 
-          <!-- Step 1: Download -->
-          <div class="flex items-start gap-2.5 mb-3">
-            <span class="font-display font-black text-neon-cyan text-xs mt-0.5 shrink-0">1</span>
-            <div class="flex-1">
-              <p class="font-mono text-[10px] text-text-primary mb-1.5">Download {{ setupDocName() }} into your workspace</p>
-              <button
-                class="w-full 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="downloadSetupGuide"
-              >
-                DOWNLOAD {{ setupDocName() }}
-              </button>
-            </div>
-          </div>
-
-          <!-- Step 2: Tell your AI -->
-          <div class="flex items-start gap-2.5 mb-3">
-            <span class="font-display font-black text-neon-cyan text-xs mt-0.5 shrink-0">2</span>
-            <div class="flex-1">
-              <p class="font-mono text-[10px] text-text-primary mb-1.5">Tell your AI this:</p>
-              <div class="bg-bg border border-border p-2.5 font-mono text-[10px] text-text-muted leading-relaxed select-all">
-                <p class="text-text-primary">Read {{ setupDocName() }} and follow the setup instructions. Here are my credentials:</p>
-                <div class="mt-1">
+          <div class="bg-bg border border-border p-2.5 font-mono text-[10px] text-text-muted leading-relaxed select-all mb-2">
             <div>BOT_ID=<span class="text-neon-cyan">{{ botId }}</span></div>
             <div>BOT_SECRET=<span class="text-neon-cyan">{{ botSecret }}</span></div>
           </div>
-              </div>
+
           <button
-                class="w-full mt-1.5 py-1.5 border border-border text-[9px] font-display font-bold tracking-wider
+            class="w-full py-2 border border-border text-[10px] font-display font-bold tracking-wider
                    hover:border-neon-cyan/40 hover:text-neon-cyan transition-all"
-                :class="setupGuideCopied ? 'text-neon-cyan border-neon-cyan/40' : 'text-text-muted'"
+            :class="setupGuideCopied ? 'text-neon-green border-neon-green/40' : 'text-text-muted'"
             @click="copyFullPrompt"
           >
-                {{ setupGuideCopied ? 'COPIED' : 'COPY FULL PROMPT' }}
+            {{ setupGuideCopied ? 'COPIED' : 'COPY GUIDE + CREDENTIALS' }}
           </button>
-            </div>
-          </div>
 
-          <p class="font-mono text-[9px] text-text-muted/60 leading-relaxed">
-            Your AI reads the guide, creates the bot, and starts it for you.
+          <p class="font-mono text-[9px] text-text-muted/60 leading-relaxed mt-2">
+            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>
         </div>

server/src/app.ts

@@ -54,10 +54,10 @@ app.use('*', async (c, next) => {
 app.use('*', secureHeaders({
   contentSecurityPolicy: process.env.NODE_ENV === 'production' ? {
     defaultSrc: ["'self'"],
-    scriptSrc: ["'self'", 'blob:'],
+    scriptSrc: ["'self'", 'blob:', "'wasm-unsafe-eval'"],
     styleSrc: ["'self'", "'unsafe-inline'", 'https://fonts.googleapis.com'],
     imgSrc: ["'self'", 'data:', 'blob:'],
-    connectSrc: ["'self'", 'https://huggingface.co', 'https://*.huggingface.co', 'https://*.hf.co', 'https://cdn.jsdelivr.net'],
+    connectSrc: ["'self'", 'https://huggingface.co', 'https://*.huggingface.co', 'https://*.hf.co', 'https://cdn.jsdelivr.net', 'wss://relay.damus.io', 'wss://relay.nostr.band', 'wss://nos.lol'],
     fontSrc: ["'self'", 'https://fonts.gstatic.com'],
     workerSrc: ["'self'", 'blob:'],
   } : undefined,