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>
2026-03-13 14:06:34 +00:00
parent cef9f4188f
commit 60dd6893be
3 changed files with 138 additions and 92 deletions
@@ -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.
@@ -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() {
-  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)
-  } catch {
-    window.open(setupDocPath(), '_blank')
+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)
+      setupContent.value = content
+    } catch {
+      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 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>

-          <!-- 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>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
-                       hover:border-neon-cyan/40 hover:text-neon-cyan transition-all"
-                :class="setupGuideCopied ? 'text-neon-cyan border-neon-cyan/40' : 'text-text-muted'"
-                @click="copyFullPrompt"
-              >
-                {{ setupGuideCopied ? 'COPIED' : 'COPY FULL PROMPT' }}
-              </button>
-            </div>
-          </div>
+          <button
+            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-green border-neon-green/40' : 'text-text-muted'"
+            @click="copyFullPrompt"
+          >
+            {{ setupGuideCopied ? 'COPIED' : 'COPY GUIDE + CREDENTIALS' }}
+          </button>

-          <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>