feat: speech overflow fix, 60+ voice profiles, post-fight audio cleanup

- Change speak() default to cancelPrevious=true so voices don't queue endlessly
- Add stopAllAudio() export and wire into FightViewer unmount + post-fight
- Flush speech queue at fight end with delayed cancel for clean cutoff
- Expand from 30 to 60+ voice profiles (robots, accents, game, characters)
- Add speech bubbles showing bot responses during rounds
- Wire announceFinishHim/Fatality/FlawlessVictory/Devastating to not cancel

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

frontend/src/pages/FightPage.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted } from 'vue'
+import { ref, computed, onMounted, onUnmounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import FightViewer from '../components/FightViewer.vue'
 import { useNostr } from '../composables/useNostr'
@@ -7,19 +7,31 @@ import { useNostr } from '../composables/useNostr'
 const route = useRoute()
 const router = useRouter()
 const { bot: myBot, isLoggedIn } = useNostr()
-const fightId = route.params.fightId as string
+const fightId = ref(route.params.fightId as string)
 const fight = ref<any>(null)
 const isLoading = ref(true)
 const isRequeueing = ref(false)
 const isLive = ref(false)
 const liveRounds = ref(0)
 const fightError = ref('')
+const replayDone = ref(false)
+const autoBattle = ref(false)
+const autoBattleCount = ref(0)
 let pollHandle: ReturnType<typeof setInterval> | null = null
 let pollCount = 0
 
+const myBotId = computed(() => {
+  if (!isLoggedIn.value || !myBot.value || !fight.value) return null
+  if (myBot.value.id === fight.value.botA?.id) return fight.value.botA.id
+  if (myBot.value.id === fight.value.botB?.id) return fight.value.botB.id
+  return null
+})
+
+const showOverlay = computed(() => replayDone.value && !isRequeueing.value && !autoBattle.value)
+
 async function loadFight(): Promise<string | null> {
   try {
-    const res = await fetch(`/api/fights/${fightId}`)
+    const res = await fetch(`/api/fights/${fightId.value}`)
     if (res.ok) {
       const data = await res.json()
       liveRounds.value = data.rounds?.length || 0
@@ -32,50 +44,97 @@ async function loadFight(): Promise<string | null> {
   return null
 }
 
+function startPolling() {
+  pollCount = 0
+  pollHandle = setInterval(async () => {
+    pollCount++
+    const s = await loadFight()
+    if (s === 'finished') {
+      isLive.value = false
+      if (pollHandle) { clearInterval(pollHandle); pollHandle = null }
+    } else if (pollCount > 60) {
+      isLive.value = false
+      fightError.value = 'Fight took too long. It may still be running — try refreshing.'
+      if (pollHandle) { clearInterval(pollHandle); pollHandle = null }
+    }
+  }, 1500)
+}
+
 onMounted(async () => {
   const status = await loadFight()
   isLoading.value = false
 
-  if (status === null) {
-    // Fight doesn't exist yet — might still be creating. Poll briefly.
-    isLive.value = true
-  } else if (status !== 'finished') {
+  if (status === null || status !== 'finished') {
     isLive.value = true
   }
 
-  if (isLive.value) {
-    pollHandle = setInterval(async () => {
-      pollCount++
-      const s = await loadFight()
-      if (s === 'finished') {
-        isLive.value = false
-        if (pollHandle) { clearInterval(pollHandle); pollHandle = null }
-      } else if (pollCount > 60) {
-        // 90 seconds max wait
-        isLive.value = false
-        fightError.value = 'Fight took too long. It may still be running — try refreshing.'
-        if (pollHandle) { clearInterval(pollHandle); pollHandle = null }
-      }
-    }, 1500)
-  }
+  if (isLive.value) startPolling()
 })
 
 onUnmounted(() => {
   if (pollHandle) clearInterval(pollHandle)
+  autoBattle.value = false
 })
 
 async function fightAgain(botId: string) {
   if (isRequeueing.value) return
   isRequeueing.value = true
+  replayDone.value = false
   try {
     const res = await fetch(`/api/queue/join/${botId}`, { method: 'POST' })
     if (res.ok) {
       const data = await res.json()
-      router.push(`/arena/${data.fightId}`)
+      // Load the new fight in-place (new scene)
+      fightId.value = data.fightId
+      fight.value = null
+      isLive.value = true
+      liveRounds.value = 0
+      fightError.value = ''
+      window.history.replaceState({}, '', `/arena/${data.fightId}`)
+      startPolling()
     }
   } catch { /* */ }
   isRequeueing.value = false
 }
+
+async function matchmake(botId: string) {
+  if (isRequeueing.value) return
+  isRequeueing.value = true
+  replayDone.value = false
+  try {
+    const res = await fetch(`/api/fights/matchmake/${botId}`, { method: 'POST' })
+    if (res.ok) {
+      const data = await res.json()
+      fightId.value = data.fightId
+      fight.value = null
+      isLive.value = true
+      liveRounds.value = 0
+      fightError.value = ''
+      window.history.replaceState({}, '', `/arena/${data.fightId}`)
+      startPolling()
+    }
+  } catch { /* */ }
+  isRequeueing.value = false
+}
+
+function onReplayDone() {
+  replayDone.value = true
+  if (autoBattle.value && myBotId.value) {
+    autoBattleCount.value++
+    fightAgain(myBotId.value)
+  }
+}
+
+function startAutoBattle() {
+  if (!myBotId.value) return
+  autoBattle.value = true
+  autoBattleCount.value = 0
+  fightAgain(myBotId.value)
+}
+
+function stopAutoBattle() {
+  autoBattle.value = false
+}
 </script>
 
 <template>
@@ -84,12 +143,16 @@ async function fightAgain(botId: string) {
       <p class="font-display text-text-muted animate-pulse tracking-wider">LOADING FIGHT...</p>
     </div>
 
-    <div v-else-if="isLive" class="flex-1 flex flex-col items-center justify-center gap-4">
+    <div v-else-if="isLive && !fight" class="flex-1 flex flex-col items-center justify-center gap-4">
       <div class="w-16 h-16 border-4 border-neon-pink/30 border-t-neon-pink rounded-full animate-spin" />
       <p class="font-display text-neon-pink text-xl tracking-widest animate-pulse glow-pink">FIGHT IN PROGRESS</p>
       <p class="font-mono text-text-muted text-xs">
         Round {{ liveRounds }} — webhooks being called...
       </p>
+      <p v-if="autoBattle" class="font-pixel text-[10px] text-neon-yellow tracking-wider">
+        AUTO BATTLE #{{ autoBattleCount + 1 }}
+        <button class="ml-2 text-ko hover:text-text-primary transition-colors" @click="stopAutoBattle">STOP</button>
+      </p>
     </div>
 
     <div v-else-if="fightError" class="flex-1 flex flex-col items-center justify-center gap-3">
@@ -108,41 +171,100 @@ async function fightAgain(botId: string) {
     </div>
 
     <template v-else>
-      <FightViewer :fight="fight" :autoplay="true" class="flex-1 min-h-0" />
+      <div class="flex-1 min-h-0 relative">
+        <FightViewer :key="fightId" :fight="fight" :autoplay="true" class="h-full" @replay-done="onReplayDone" />
 
-      <!-- Big post-fight action bar -->
-      <div v-if="fight.status === 'finished'" class="flex-shrink-0 pt-2 sm:pt-3">
-        <div class="flex gap-2">
+        <!-- Post-fight overlay — on top of the game canvas -->
+        <Transition name="fade-up">
+          <div v-if="showOverlay"
+               class="absolute inset-0 z-50 flex items-end justify-center pointer-events-none pb-16 sm:pb-20">
+            <div class="pointer-events-auto flex flex-col items-center gap-2 sm:gap-3
+                        bg-black/80 backdrop-blur-sm border border-white/10 rounded-xl
+                        px-4 sm:px-8 py-4 sm:py-6 shadow-2xl max-w-md w-full mx-4">
+
+              <!-- Owner actions -->
+              <template v-if="myBotId">
+                <button
+                  class="w-full py-3 bg-neon-cyan/10 border-2 border-neon-cyan/50 text-neon-cyan
+                         font-display font-black text-sm tracking-widest rounded-lg
+                         hover:bg-neon-cyan/20 hover:border-neon-cyan transition-all neon-border-cyan"
+                  @click="fightAgain(myBotId!)"
+                >
+                  FIGHT ANOTHER BOT
+                </button>
+                <button
+                  class="w-full py-3 bg-neon-yellow/10 border-2 border-neon-yellow/50 text-neon-yellow
+                         font-display font-black text-sm tracking-widest rounded-lg
+                         hover:bg-neon-yellow/20 hover:border-neon-yellow transition-all"
+                  @click="startAutoBattle"
+                >
+                  AUTO BATTLE
+                  <span class="block font-mono text-[9px] tracking-wider text-neon-yellow/60 mt-0.5">
+                    CONTINUOUS FIGHTS
+                  </span>
+                </button>
+              </template>
+
+              <!-- Spectator actions -->
+              <template v-else-if="isLoggedIn && myBot">
+                <button
+                  class="w-full py-3 bg-neon-cyan/10 border-2 border-neon-cyan/50 text-neon-cyan
+                         font-display font-black text-sm tracking-widest rounded-lg
+                         hover:bg-neon-cyan/20 hover:border-neon-cyan transition-all neon-border-cyan"
+                  @click="matchmake(myBot!.id)"
+                >
+                  FIGHT WITH MY BOT
+                  <span class="block font-mono text-[9px] tracking-wider text-neon-cyan/60 mt-0.5">
+                    {{ myBot!.name.toUpperCase() }}
+                  </span>
+                </button>
+              </template>
+
+              <button
+                class="w-full py-2 border border-white/10 text-text-muted
+                       font-display text-xs tracking-widest rounded-lg
+                       hover:bg-white/5 hover:text-text-primary transition-all"
+                @click="$router.push('/join')"
+              >
+                BACK TO LOBBY
+              </button>
+            </div>
+          </div>
+        </Transition>
+
+        <!-- Auto-battle indicator -->
+        <div v-if="autoBattle && fight"
+             class="absolute top-2 right-2 z-50 flex items-center gap-2
+                    bg-black/80 border border-neon-yellow/30 rounded-lg px-3 py-1.5">
+          <span class="w-2 h-2 rounded-full bg-neon-yellow animate-pulse" />
+          <span class="font-pixel text-[10px] text-neon-yellow tracking-wider">
+            AUTO #{{ autoBattleCount }}
+          </span>
           <button
-            v-if="fight.botA && isLoggedIn && myBot?.id === fight.botA.id"
-            class="flex-1 py-3 sm:py-4 bg-neon-cyan/5 border-2 border-neon-cyan/50 text-neon-cyan
-                   font-display font-black text-sm sm:text-base tracking-widest
-                   hover:bg-neon-cyan/15 hover:border-neon-cyan transition-all neon-border-cyan
-                   disabled:opacity-30 disabled:cursor-not-allowed"
-            :disabled="isRequeueing"
-            @click="fightAgain(fight.botA.id)"
+            class="font-pixel text-[10px] text-ko hover:text-text-primary transition-colors ml-1"
+            @click="stopAutoBattle"
           >
-            {{ isRequeueing ? 'MATCHING...' : `FIGHT AGAIN` }}
-            <span class="block font-mono text-[9px] sm:text-[10px] tracking-wider text-neon-cyan/60 mt-0.5">
-              AS {{ fight.botA.name.toUpperCase() }}
-            </span>
-          </button>
-          <button
-            v-if="fight.botB && isLoggedIn && myBot?.id === fight.botB.id"
-            class="flex-1 py-3 sm:py-4 bg-neon-pink/5 border-2 border-neon-pink/50 text-neon-pink
-                   font-display font-black text-sm sm:text-base tracking-widest
-                   hover:bg-neon-pink/15 hover:border-neon-pink transition-all neon-border-pink
-                   disabled:opacity-30 disabled:cursor-not-allowed"
-            :disabled="isRequeueing"
-            @click="fightAgain(fight.botB.id)"
-          >
-            {{ isRequeueing ? 'MATCHING...' : `FIGHT AGAIN` }}
-            <span class="block font-mono text-[9px] sm:text-[10px] tracking-wider text-neon-pink/60 mt-0.5">
-              AS {{ fight.botB.name.toUpperCase() }}
-            </span>
+            STOP
           </button>
         </div>
       </div>
     </template>
   </div>
 </template>
+
+<style scoped>
+.fade-up-enter-active {
+  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+.fade-up-leave-active {
+  transition: all 0.2s ease-in;
+}
+.fade-up-enter-from {
+  opacity: 0;
+  transform: translateY(20px);
+}
+.fade-up-leave-to {
+  opacity: 0;
+  transform: translateY(10px);
+}
+</style>