From 1906821452163f276ee91dfc85b45ab99642f3e7 Mon Sep 17 00:00:00 2001
From: Dorian <dorian@Dorians-MacBook-Air.local>
Date: Sat, 7 Mar 2026 15:46:16 +0000
Subject: [PATCH] =?UTF-8?q?fix:=20human=20fight=20UX=20=E2=80=94=20SSE=20c?=
 =?UTF-8?q?hallenge=20input,=20fighter=20sprites,=20battle=20log=20questio?=
 =?UTF-8?q?ns,=20left-side=20positioning?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add SSE human_challenge listener for instant input activation with auto-focus
- Buffer challenges during 3s round cooldown, apply with correct remaining time
- Map 'human' archetype to fighter-looking archetypes (boxer, ninja, etc.) in sprite system
- Show challenge questions in battle log via round_start SSE events
- Ensure human players are always botA (left side) in queue matchmaking

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/pages/BotProfilePage.vue | 558 +++++++++++++-------------
 frontend/src/pages/FightPage.vue      |  63 ++-
 server/src/engine/queue.ts            |   7 +-
 3 files changed, 352 insertions(+), 276 deletions(-)

diff --git a/frontend/src/pages/BotProfilePage.vue b/frontend/src/pages/BotProfilePage.vue
index a73e842..eae7cfd 100644
--- a/frontend/src/pages/BotProfilePage.vue
+++ b/frontend/src/pages/BotProfilePage.vue
@@ -267,8 +267,8 @@ const tierClass = (t: number) => `tier-${t}`
 </script>
 
 <template>
-  <div class="h-[calc(100vh-4rem)] flex flex-col px-6 py-6 overflow-hidden">
-    <div class="max-w-lg mx-auto w-full flex flex-col flex-1 min-h-0">
+  <div class="h-[calc(100vh-4rem)] flex flex-col px-6 py-6 overflow-y-auto">
+    <div class="max-w-lg lg:max-w-4xl mx-auto w-full flex flex-col flex-1 min-h-0">
 
       <div v-if="isLoading" class="flex-1 flex items-center justify-center">
         <p class="font-display text-text-muted animate-pulse">LOADING...</p>
@@ -279,288 +279,302 @@ const tierClass = (t: number) => `tier-${t}`
       </div>
 
       <template v-else>
-        <!-- Header -->
-        <div class="text-center mb-5">
-          <!-- Human player: just the human avatar, centered -->
-          <div v-if="stats.archetype === 'human'" class="flex justify-center mb-3">
-            <HumanPreview
-              :seed="stats.avatarSeed || stats.name"
-              archetype="human"
-              :size="220"
-              :win-rate="(stats.winRate || 0) / 100"
-              anim="idle"
-              class="drop-shadow-[0_0_20px_rgba(0,255,255,0.3)]"
-            />
-          </div>
-          <!-- Bot player: human controller + wire + bot sprite -->
-          <div v-else class="flex items-end justify-between mb-3 relative">
-            <HumanPreview
-              :seed="stats.avatarSeed || stats.name"
-              :archetype="stats.archetype || 'standard'"
-              :size="200"
-              :win-rate="(stats.winRate || 0) / 100"
-              anim="idle"
-              class="drop-shadow-[0_0_12px_rgba(0,0,0,0.6)] shrink-0 relative z-10"
-            />
-            <!-- Wire from gamepad to bot with electricity -->
-            <svg class="absolute bottom-8 left-0 w-full h-24 z-0 pointer-events-none" preserveAspectRatio="none">
-              <defs>
-                <linearGradient id="wire-grad" x1="0%" y1="0%" x2="100%" y2="0%">
-                  <stop offset="0%" stop-color="#444455"/>
-                  <stop offset="50%" stop-color="#555566"/>
-                  <stop offset="100%" stop-color="#444455"/>
-                </linearGradient>
-                <filter id="elec-glow">
-                  <feGaussianBlur stdDeviation="3" result="blur"/>
-                  <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
-                </filter>
-              </defs>
-              <!-- Main wire -->
-              <path d="M 30% 85% Q 45% 40%, 55% 55% T 78% 30%" fill="none" stroke="url(#wire-grad)" stroke-width="3" stroke-linecap="round"/>
-              <!-- Electricity pulse 1 -->
-              <path class="elec-pulse-1" d="M 30% 85% Q 45% 40%, 55% 55% T 78% 30%" fill="none" stroke="#00f0ff" stroke-width="1.5" stroke-linecap="round" filter="url(#elec-glow)" stroke-dasharray="8 20" opacity="0.8"/>
-              <!-- Electricity pulse 2 (reverse) -->
-              <path class="elec-pulse-2" d="M 30% 85% Q 45% 40%, 55% 55% T 78% 30%" fill="none" stroke="#ff2d7b" stroke-width="1" stroke-linecap="round" filter="url(#elec-glow)" stroke-dasharray="5 25" opacity="0.6"/>
-              <!-- Spark nodes -->
-              <circle class="elec-spark-1" cx="45%" cy="55%" r="2" fill="#00f0ff" filter="url(#elec-glow)" opacity="0"/>
-              <circle class="elec-spark-2" cx="62%" cy="45%" r="2" fill="#ff2d7b" filter="url(#elec-glow)" opacity="0"/>
-            </svg>
-            <SpritePreview
-              :seed="stats.avatarSeed || stats.name"
-              :archetype="stats.archetype"
-              :tier="stats.tier"
-              :size="160"
-              :customization="stats.customization || undefined"
-              class="drop-shadow-[0_0_20px_var(--glow)] mx-auto relative z-10"
-              :style="{ '--glow': stats.tierColor + '80' } as any"
-            />
-          </div>
-          <h2 class="font-display font-black text-3xl sm:text-4xl tracking-wider gradient-text">
-            {{ stats.name }}
-          </h2>
-          <div class="inline-block px-3 py-0.5 border text-[9px] font-display font-black tracking-widest mt-1"
-               :style="{ borderColor: stats.tierColor, color: stats.tierColor, backgroundColor: 'rgba(0,0,0,0.8)' }">
-            {{ stats.tierName }}
-          </div>
-          <p class="font-display text-sm font-bold tracking-widest mt-1"
-             :style="{ color: stats.tierColor }">
-            {{ getStatusTitle(stats) }}
-          </p>
-          <p class="font-mono text-text-muted text-[10px] mt-0.5">
-            #{{ stats.rank }} of {{ stats.totalBots }}
-          </p>
-          <button
-            v-if="isOwner && stats.archetype !== 'human'"
-            class="mt-2 font-mono text-[10px] text-neon-cyan/60 hover:text-neon-cyan transition-colors"
-            @click="showCustomize = !showCustomize; if (showCustomize) initCustForm()"
-          >
-            {{ showCustomize ? 'CLOSE' : 'CUSTOMIZE' }}
-          </button>
-        </div>
+        <div class="lg:flex lg:gap-8 lg:items-start">
 
-        <!-- Customization panel (owner only) -->
-        <div v-if="showCustomize && isOwner" class="mb-4 border border-neon-cyan/20 bg-surface-raised/60 p-4">
-          <p class="font-display text-[10px] font-bold text-neon-cyan tracking-[0.15em] mb-3">
-            CUSTOMIZE CHARACTER
-          </p>
-
-          <!-- Live preview -->
-          <div class="flex justify-center mb-3">
-            <SpritePreview
-              :seed="stats.avatarSeed || stats.name"
-              :archetype="custForm.archetype || stats.archetype"
-              :tier="stats.tier"
-              :size="120"
-              :customization="previewCustomization"
-              class="drop-shadow-[0_0_12px_rgba(0,255,255,0.3)]"
-            />
-          </div>
-
-          <!-- Archetype selector -->
-          <label class="block mb-2">
-            <span class="font-display text-[9px] text-text-muted tracking-wider">ARCHETYPE</span>
-            <select
-              v-model="custForm.archetype"
-              class="mt-0.5 w-full bg-surface-base border border-border text-text-primary
-                     font-mono text-xs px-2 py-1.5 focus:border-neon-cyan/50 outline-none"
-            >
-              <option value="">Default (from seed)</option>
-              <option v-for="a in ARCHETYPES" :key="a" :value="a">{{ a.replace(/_/g, ' ') }}</option>
-            </select>
-          </label>
-
-          <!-- Colors -->
-          <div class="flex gap-3 mb-2">
-            <label class="flex-1">
-              <span class="font-display text-[9px] text-text-muted tracking-wider">PRIMARY</span>
-              <div class="flex items-center gap-1 mt-0.5">
-                <input type="color" v-model="custForm.primaryColor"
-                       class="w-8 h-8 border border-border bg-transparent cursor-pointer" />
-                <span class="font-mono text-[10px] text-text-muted">{{ custForm.primaryColor }}</span>
+          <!-- LEFT COLUMN: Character display -->
+          <div class="lg:w-[340px] lg:shrink-0 lg:sticky lg:top-6">
+            <div class="border border-border bg-surface-raised/30 p-4 mb-5 lg:mb-0">
+              <!-- Human player: just the human avatar, centered -->
+              <div v-if="stats.archetype === 'human'" class="flex justify-center mb-3">
+                <HumanPreview
+                  :seed="stats.avatarSeed || stats.name"
+                  archetype="human"
+                  :size="220"
+                  :win-rate="(stats.winRate || 0) / 100"
+                  anim="idle"
+                  class="drop-shadow-[0_0_20px_rgba(0,255,255,0.3)]"
+                />
               </div>
-            </label>
-            <label class="flex-1">
-              <span class="font-display text-[9px] text-text-muted tracking-wider">SECONDARY</span>
-              <div class="flex items-center gap-1 mt-0.5">
-                <input type="color" v-model="custForm.secondaryColor"
-                       class="w-8 h-8 border border-border bg-transparent cursor-pointer" />
-                <span class="font-mono text-[10px] text-text-muted">{{ custForm.secondaryColor }}</span>
+              <!-- Bot player: human controller + wire + bot sprite -->
+              <div v-else class="flex items-end justify-between mb-3 relative">
+                <HumanPreview
+                  :seed="stats.avatarSeed || stats.name"
+                  :archetype="stats.archetype || 'standard'"
+                  :size="200"
+                  :win-rate="(stats.winRate || 0) / 100"
+                  anim="idle"
+                  class="drop-shadow-[0_0_12px_rgba(0,0,0,0.6)] shrink-0 relative z-10"
+                />
+                <!-- Wire from gamepad to bot with electricity -->
+                <svg class="absolute bottom-8 left-0 w-full h-24 z-0 pointer-events-none" preserveAspectRatio="none">
+                  <defs>
+                    <linearGradient id="wire-grad" x1="0%" y1="0%" x2="100%" y2="0%">
+                      <stop offset="0%" stop-color="#444455"/>
+                      <stop offset="50%" stop-color="#555566"/>
+                      <stop offset="100%" stop-color="#444455"/>
+                    </linearGradient>
+                    <filter id="elec-glow">
+                      <feGaussianBlur stdDeviation="3" result="blur"/>
+                      <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
+                    </filter>
+                  </defs>
+                  <!-- Main wire -->
+                  <path d="M 30% 85% Q 45% 40%, 55% 55% T 78% 30%" fill="none" stroke="url(#wire-grad)" stroke-width="3" stroke-linecap="round"/>
+                  <!-- Electricity pulse 1 -->
+                  <path class="elec-pulse-1" d="M 30% 85% Q 45% 40%, 55% 55% T 78% 30%" fill="none" stroke="#00f0ff" stroke-width="1.5" stroke-linecap="round" filter="url(#elec-glow)" stroke-dasharray="8 20" opacity="0.8"/>
+                  <!-- Electricity pulse 2 (reverse) -->
+                  <path class="elec-pulse-2" d="M 30% 85% Q 45% 40%, 55% 55% T 78% 30%" fill="none" stroke="#ff2d7b" stroke-width="1" stroke-linecap="round" filter="url(#elec-glow)" stroke-dasharray="5 25" opacity="0.6"/>
+                  <!-- Spark nodes -->
+                  <circle class="elec-spark-1" cx="45%" cy="55%" r="2" fill="#00f0ff" filter="url(#elec-glow)" opacity="0"/>
+                  <circle class="elec-spark-2" cx="62%" cy="45%" r="2" fill="#ff2d7b" filter="url(#elec-glow)" opacity="0"/>
+                </svg>
+                <SpritePreview
+                  :seed="stats.avatarSeed || stats.name"
+                  :archetype="stats.archetype"
+                  :tier="stats.tier"
+                  :size="160"
+                  :customization="stats.customization || undefined"
+                  class="drop-shadow-[0_0_20px_var(--glow)] mx-auto relative z-10"
+                  :style="{ '--glow': stats.tierColor + '80' } as any"
+                />
               </div>
-            </label>
+
+              <!-- Name & tier info below the sprite -->
+              <div class="text-center">
+                <h2 class="font-display font-black text-3xl sm:text-4xl tracking-wider gradient-text">
+                  {{ stats.name }}
+                </h2>
+                <div class="inline-block px-3 py-0.5 border text-[9px] font-display font-black tracking-widest mt-1"
+                     :style="{ borderColor: stats.tierColor, color: stats.tierColor, backgroundColor: 'rgba(0,0,0,0.8)' }">
+                  {{ stats.tierName }}
+                </div>
+                <p class="font-display text-sm font-bold tracking-widest mt-1"
+                   :style="{ color: stats.tierColor }">
+                  {{ getStatusTitle(stats) }}
+                </p>
+                <p class="font-mono text-text-muted text-[10px] mt-0.5">
+                  #{{ stats.rank }} of {{ stats.totalBots }}
+                </p>
+                <button
+                  v-if="isOwner && stats.archetype !== 'human'"
+                  class="mt-2 font-mono text-[10px] text-neon-cyan/60 hover:text-neon-cyan transition-colors"
+                  @click="showCustomize = !showCustomize; if (showCustomize) initCustForm()"
+                >
+                  {{ showCustomize ? 'CLOSE' : 'CUSTOMIZE' }}
+                </button>
+              </div>
+            </div>
+
+            <!-- Customization panel (owner only) — below sprite on left column -->
+            <div v-if="showCustomize && isOwner" class="mt-4 border border-neon-cyan/20 bg-surface-raised/60 p-4 lg:mb-0 mb-4">
+              <p class="font-display text-[10px] font-bold text-neon-cyan tracking-[0.15em] mb-3">
+                CUSTOMIZE CHARACTER
+              </p>
+
+              <!-- Live preview -->
+              <div class="flex justify-center mb-3">
+                <SpritePreview
+                  :seed="stats.avatarSeed || stats.name"
+                  :archetype="custForm.archetype || stats.archetype"
+                  :tier="stats.tier"
+                  :size="120"
+                  :customization="previewCustomization"
+                  class="drop-shadow-[0_0_12px_rgba(0,255,255,0.3)]"
+                />
+              </div>
+
+              <!-- Archetype selector -->
+              <label class="block mb-2">
+                <span class="font-display text-[9px] text-text-muted tracking-wider">ARCHETYPE</span>
+                <select
+                  v-model="custForm.archetype"
+                  class="mt-0.5 w-full bg-surface-base border border-border text-text-primary
+                         font-mono text-xs px-2 py-1.5 focus:border-neon-cyan/50 outline-none"
+                >
+                  <option value="">Default (from seed)</option>
+                  <option v-for="a in ARCHETYPES" :key="a" :value="a">{{ a.replace(/_/g, ' ') }}</option>
+                </select>
+              </label>
+
+              <!-- Colors -->
+              <div class="flex gap-3 mb-2">
+                <label class="flex-1">
+                  <span class="font-display text-[9px] text-text-muted tracking-wider">PRIMARY</span>
+                  <div class="flex items-center gap-1 mt-0.5">
+                    <input type="color" v-model="custForm.primaryColor"
+                           class="w-8 h-8 border border-border bg-transparent cursor-pointer" />
+                    <span class="font-mono text-[10px] text-text-muted">{{ custForm.primaryColor }}</span>
+                  </div>
+                </label>
+                <label class="flex-1">
+                  <span class="font-display text-[9px] text-text-muted tracking-wider">SECONDARY</span>
+                  <div class="flex items-center gap-1 mt-0.5">
+                    <input type="color" v-model="custForm.secondaryColor"
+                           class="w-8 h-8 border border-border bg-transparent cursor-pointer" />
+                    <span class="font-mono text-[10px] text-text-muted">{{ custForm.secondaryColor }}</span>
+                  </div>
+                </label>
+              </div>
+
+              <!-- Accessories -->
+              <p class="font-display text-[9px] text-text-muted tracking-wider mb-1">ACCESSORIES</p>
+              <div class="flex gap-3 mb-3">
+                <label class="flex items-center gap-1 cursor-pointer">
+                  <input type="checkbox" v-model="custForm.forceVisor"
+                         class="accent-neon-cyan" />
+                  <span class="font-mono text-[10px] text-text-secondary">Visor</span>
+                </label>
+                <label class="flex items-center gap-1 cursor-pointer">
+                  <input type="checkbox" v-model="custForm.forceMohawk"
+                         class="accent-neon-cyan" />
+                  <span class="font-mono text-[10px] text-text-secondary">Mohawk</span>
+                </label>
+                <label class="flex items-center gap-1 cursor-pointer">
+                  <input type="checkbox" v-model="custForm.forceHorns"
+                         class="accent-neon-cyan" />
+                  <span class="font-mono text-[10px] text-text-secondary">Horns</span>
+                </label>
+              </div>
+
+              <p v-if="custError" class="font-mono text-[10px] text-neon-pink mb-2">{{ custError }}</p>
+
+              <button
+                class="w-full py-2 bg-neon-cyan/10 border border-neon-cyan/40 text-neon-cyan
+                       font-display font-bold text-xs tracking-wider
+                       hover:bg-neon-cyan/20 transition-all
+                       disabled:opacity-30 disabled:cursor-not-allowed"
+                :disabled="isSaving"
+                @click="saveCustomization"
+              >
+                {{ isSaving ? 'SAVING...' : 'SAVE LOOK' }}
+              </button>
+            </div>
           </div>
 
-          <!-- Accessories -->
-          <p class="font-display text-[9px] text-text-muted tracking-wider mb-1">ACCESSORIES</p>
-          <div class="flex gap-3 mb-3">
-            <label class="flex items-center gap-1 cursor-pointer">
-              <input type="checkbox" v-model="custForm.forceVisor"
-                     class="accent-neon-cyan" />
-              <span class="font-mono text-[10px] text-text-secondary">Visor</span>
-            </label>
-            <label class="flex items-center gap-1 cursor-pointer">
-              <input type="checkbox" v-model="custForm.forceMohawk"
-                     class="accent-neon-cyan" />
-              <span class="font-mono text-[10px] text-text-secondary">Mohawk</span>
-            </label>
-            <label class="flex items-center gap-1 cursor-pointer">
-              <input type="checkbox" v-model="custForm.forceHorns"
-                     class="accent-neon-cyan" />
-              <span class="font-mono text-[10px] text-text-secondary">Horns</span>
-            </label>
-          </div>
+          <!-- RIGHT COLUMN: Stats, actions, fights -->
+          <div class="flex-1 min-w-0 flex flex-col min-h-0">
 
-          <p v-if="custError" class="font-mono text-[10px] text-neon-pink mb-2">{{ custError }}</p>
+            <!-- Stats -->
+            <div class="grid grid-cols-3 gap-2 mb-4">
+              <div class="border border-border bg-surface-raised/50 p-2.5 text-center">
+                <p class="font-display font-black text-xl text-neon-cyan">{{ Math.round(stats.eloRating) }}</p>
+                <p class="font-display text-[8px] text-text-muted tracking-wider mt-0.5">ELO</p>
+              </div>
+              <div class="border border-border bg-surface-raised/50 p-2.5 text-center">
+                <p class="font-display font-black text-xl">
+                  <span class="text-neon-cyan">{{ stats.wins }}</span>
+                  <span class="text-text-muted text-sm">-</span>
+                  <span class="text-neon-pink">{{ stats.losses }}</span>
+                </p>
+                <p class="font-display text-[8px] text-text-muted tracking-wider mt-0.5">RECORD</p>
+              </div>
+              <div class="border border-border bg-surface-raised/50 p-2.5 text-center">
+                <p class="font-display font-black text-xl"
+                   :class="stats.winRate >= 60 ? 'text-neon-cyan' : stats.winRate >= 40 ? 'text-neon-yellow' : 'text-neon-pink'">
+                  {{ stats.winRate }}%
+                </p>
+                <p class="font-display text-[8px] text-text-muted tracking-wider mt-0.5">WIN RATE</p>
+              </div>
+            </div>
 
-          <button
-            class="w-full py-2 bg-neon-cyan/10 border border-neon-cyan/40 text-neon-cyan
-                   font-display font-bold text-xs tracking-wider
-                   hover:bg-neon-cyan/20 transition-all
-                   disabled:opacity-30 disabled:cursor-not-allowed"
-            :disabled="isSaving"
-            @click="saveCustomization"
-          >
-            {{ isSaving ? 'SAVING...' : 'SAVE LOOK' }}
-          </button>
-        </div>
+            <!-- Streaks row -->
+            <div class="flex gap-2 mb-4">
+              <div class="flex-1 border border-border bg-surface-raised/50 p-2.5 text-center">
+                <p class="font-display font-bold text-base"
+                   :class="stats.winStreak >= 3 ? 'text-neon-yellow' : 'text-text-primary'">
+                  {{ stats.winStreak > 0 ? `${stats.winStreak}x` : '-' }}
+                </p>
+                <p class="font-display text-[8px] text-text-muted tracking-wider mt-0.5">STREAK</p>
+              </div>
+              <div class="flex-1 border border-border bg-surface-raised/50 p-2.5 text-center">
+                <p class="font-display font-bold text-base text-text-primary">{{ stats.bestStreak }}x</p>
+                <p class="font-display text-[8px] text-text-muted tracking-wider mt-0.5">BEST</p>
+              </div>
+              <div class="flex-1 border border-border bg-surface-raised/50 p-2.5 text-center">
+                <p class="font-display font-bold text-base text-text-primary">{{ stats.totalFights }}</p>
+                <p class="font-display text-[8px] text-text-muted tracking-wider mt-0.5">FIGHTS</p>
+              </div>
+            </div>
 
-        <!-- Stats -->
-        <div class="grid grid-cols-3 gap-2 mb-4">
-          <div class="border border-border bg-surface-raised/50 p-2.5 text-center">
-            <p class="font-display font-black text-xl text-neon-cyan">{{ Math.round(stats.eloRating) }}</p>
-            <p class="font-display text-[8px] text-text-muted tracking-wider mt-0.5">ELO</p>
-          </div>
-          <div class="border border-border bg-surface-raised/50 p-2.5 text-center">
-            <p class="font-display font-black text-xl">
-              <span class="text-neon-cyan">{{ stats.wins }}</span>
-              <span class="text-text-muted text-sm">-</span>
-              <span class="text-neon-pink">{{ stats.losses }}</span>
+            <!-- Fight actions -->
+            <div class="flex gap-2 mb-4">
+              <button
+                class="flex-1 py-3 bg-neon-pink/10 border-2 border-neon-pink/50 text-neon-pink
+                       font-display font-black text-sm tracking-wider
+                       hover:bg-neon-pink/20 transition-all neon-border-pink
+                       disabled:opacity-30 disabled:cursor-not-allowed"
+                :disabled="isJoining"
+                @click="instantFight"
+              >
+                {{ isJoining ? 'MATCHING...' : 'INSTANT FIGHT' }}
+              </button>
+              <button
+                class="flex-1 py-3 border-2 border-neon-purple/50 text-neon-purple
+                       font-display font-bold text-sm tracking-wider
+                       hover:bg-neon-purple/10 transition-all"
+                @click="showChoose = !showChoose"
+              >
+                CHOOSE FIGHT
+              </button>
+            </div>
+
+            <!-- Choose your fight panel -->
+            <div v-if="showChoose" class="mb-4 border border-border bg-surface-raised/50 p-3">
+              <p class="font-display text-[10px] font-bold text-text-muted tracking-[0.15em] mb-2">
+                FIGHTERS WAITING
+              </p>
+              <div v-if="waitingFighters.length === 0" class="text-center py-3">
+                <p class="font-mono text-xs text-text-muted">Nobody waiting. Use Instant Fight instead.</p>
+              </div>
+              <button
+                v-for="fighter in waitingFighters"
+                :key="fighter.botId"
+                class="w-full flex items-center justify-between px-3 py-2 border border-border
+                       hover:border-neon-cyan/30 hover:bg-neon-cyan/5 transition-all mb-1 text-xs
+                       disabled:opacity-30"
+                :disabled="isJoining || fighter.botId === stats.id"
+                @click="fightSpecific(fighter.botId)"
+              >
+                <span class="font-display font-bold text-text-primary">{{ fighter.botName }}</span>
+                <span class="font-mono text-text-muted">{{ Math.round(fighter.eloRating) }} ELO</span>
+              </button>
+            </div>
+
+            <!-- Recent fights -->
+            <p class="font-display text-[10px] font-bold text-text-muted tracking-[0.15em] mb-2">
+              RECENT BOUTS
             </p>
-            <p class="font-display text-[8px] text-text-muted tracking-wider mt-0.5">RECORD</p>
-          </div>
-          <div class="border border-border bg-surface-raised/50 p-2.5 text-center">
-            <p class="font-display font-black text-xl"
-               :class="stats.winRate >= 60 ? 'text-neon-cyan' : stats.winRate >= 40 ? 'text-neon-yellow' : 'text-neon-pink'">
-              {{ stats.winRate }}%
-            </p>
-            <p class="font-display text-[8px] text-text-muted tracking-wider mt-0.5">WIN RATE</p>
-          </div>
-        </div>
+            <div class="flex-1 min-h-0 overflow-y-auto space-y-1.5">
+              <RouterLink
+                v-for="fight in stats.recentFights"
+                :key="fight.id"
+                :to="`/arena/${fight.id}`"
+                class="flex items-center justify-between px-3 py-2 border border-border
+                       bg-surface-raised/30 hover:border-neon-pink/30 transition-all text-xs"
+              >
+                <span class="font-display font-bold w-6"
+                      :class="fight.result === 'W' ? 'text-neon-cyan' : fight.result === 'L' ? 'text-neon-pink' : 'text-text-muted'">
+                  {{ fight.result }}
+                </span>
+                <span class="font-mono text-text-secondary flex-1 ml-2">vs {{ fight.opponent }}</span>
+                <span class="font-mono text-[10px] text-text-muted">R{{ fight.rounds }}</span>
+              </RouterLink>
+              <div v-if="stats.recentFights.length === 0" class="text-center py-4">
+                <p class="font-mono text-text-muted text-xs">No fights yet. Hit Instant Fight!</p>
+              </div>
+            </div>
 
-        <!-- Streaks row -->
-        <div class="flex gap-2 mb-4">
-          <div class="flex-1 border border-border bg-surface-raised/50 p-2.5 text-center">
-            <p class="font-display font-bold text-base"
-               :class="stats.winStreak >= 3 ? 'text-neon-yellow' : 'text-text-primary'">
-              {{ stats.winStreak > 0 ? `${stats.winStreak}x` : '-' }}
-            </p>
-            <p class="font-display text-[8px] text-text-muted tracking-wider mt-0.5">STREAK</p>
+            <!-- Sign out (only if owner) -->
+            <div v-if="isOwner" class="mt-3 text-center flex-shrink-0">
+              <button
+                class="font-mono text-[10px] text-text-muted hover:text-ko transition-colors"
+                @click="handleSignOut"
+              >
+                Sign out
+              </button>
+            </div>
           </div>
-          <div class="flex-1 border border-border bg-surface-raised/50 p-2.5 text-center">
-            <p class="font-display font-bold text-base text-text-primary">{{ stats.bestStreak }}x</p>
-            <p class="font-display text-[8px] text-text-muted tracking-wider mt-0.5">BEST</p>
-          </div>
-          <div class="flex-1 border border-border bg-surface-raised/50 p-2.5 text-center">
-            <p class="font-display font-bold text-base text-text-primary">{{ stats.totalFights }}</p>
-            <p class="font-display text-[8px] text-text-muted tracking-wider mt-0.5">FIGHTS</p>
-          </div>
-        </div>
 
-        <!-- Fight actions (only for owner or anyone for now) -->
-        <div class="flex gap-2 mb-4">
-          <button
-            class="flex-1 py-3 bg-neon-pink/10 border-2 border-neon-pink/50 text-neon-pink
-                   font-display font-black text-sm tracking-wider
-                   hover:bg-neon-pink/20 transition-all neon-border-pink
-                   disabled:opacity-30 disabled:cursor-not-allowed"
-            :disabled="isJoining"
-            @click="instantFight"
-          >
-            {{ isJoining ? 'MATCHING...' : 'INSTANT FIGHT' }}
-          </button>
-          <button
-            class="flex-1 py-3 border-2 border-neon-purple/50 text-neon-purple
-                   font-display font-bold text-sm tracking-wider
-                   hover:bg-neon-purple/10 transition-all"
-            @click="showChoose = !showChoose"
-          >
-            CHOOSE FIGHT
-          </button>
-        </div>
-
-        <!-- Choose your fight panel -->
-        <div v-if="showChoose" class="mb-4 border border-border bg-surface-raised/50 p-3">
-          <p class="font-display text-[10px] font-bold text-text-muted tracking-[0.15em] mb-2">
-            FIGHTERS WAITING
-          </p>
-          <div v-if="waitingFighters.length === 0" class="text-center py-3">
-            <p class="font-mono text-xs text-text-muted">Nobody waiting. Use Instant Fight instead.</p>
-          </div>
-          <button
-            v-for="fighter in waitingFighters"
-            :key="fighter.botId"
-            class="w-full flex items-center justify-between px-3 py-2 border border-border
-                   hover:border-neon-cyan/30 hover:bg-neon-cyan/5 transition-all mb-1 text-xs
-                   disabled:opacity-30"
-            :disabled="isJoining || fighter.botId === stats.id"
-            @click="fightSpecific(fighter.botId)"
-          >
-            <span class="font-display font-bold text-text-primary">{{ fighter.botName }}</span>
-            <span class="font-mono text-text-muted">{{ Math.round(fighter.eloRating) }} ELO</span>
-          </button>
-        </div>
-
-        <!-- Recent fights -->
-        <p class="font-display text-[10px] font-bold text-text-muted tracking-[0.15em] mb-2">
-          RECENT BOUTS
-        </p>
-        <div class="flex-1 min-h-0 overflow-y-auto space-y-1.5">
-          <RouterLink
-            v-for="fight in stats.recentFights"
-            :key="fight.id"
-            :to="`/arena/${fight.id}`"
-            class="flex items-center justify-between px-3 py-2 border border-border
-                   bg-surface-raised/30 hover:border-neon-pink/30 transition-all text-xs"
-          >
-            <span class="font-display font-bold w-6"
-                  :class="fight.result === 'W' ? 'text-neon-cyan' : fight.result === 'L' ? 'text-neon-pink' : 'text-text-muted'">
-              {{ fight.result }}
-            </span>
-            <span class="font-mono text-text-secondary flex-1 ml-2">vs {{ fight.opponent }}</span>
-            <span class="font-mono text-[10px] text-text-muted">R{{ fight.rounds }}</span>
-          </RouterLink>
-          <div v-if="stats.recentFights.length === 0" class="text-center py-4">
-            <p class="font-mono text-text-muted text-xs">No fights yet. Hit Instant Fight!</p>
-          </div>
-        </div>
-
-        <!-- Sign out (only if owner) -->
-        <div v-if="isOwner" class="mt-3 text-center flex-shrink-0">
-          <button
-            class="font-mono text-[10px] text-text-muted hover:text-ko transition-colors"
-            @click="handleSignOut"
-          >
-            Sign out
-          </button>
         </div>
       </template>
     </div>
diff --git a/frontend/src/pages/FightPage.vue b/frontend/src/pages/FightPage.vue
index 72283e8..0f82bfa 100644
--- a/frontend/src/pages/FightPage.vue
+++ b/frontend/src/pages/FightPage.vue
@@ -64,6 +64,33 @@ const liveAnnouncement = ref('')
 const liveAnnouncementColor = ref('#ffffff')
 const liveAnnouncementVisible = ref(false)
 const currentChallengeInfo = ref<{ type: string; label: string } | null>(null)
+const pendingChallengeData = ref<{ data: any; receivedAt: number } | null>(null)
+
+// Map 'human' archetype to a human-like fighter archetype for the sprite system
+const HUMAN_FIGHTER_ARCHETYPES = ['boxer', 'wrestler', 'gladiator', 'ninja', 'cowboy', 'pirate', 'samurai', 'viking', 'knight']
+function humanFighterArchetype(seed: string): string {
+  let h = 0
+  for (let i = 0; i < seed.length; i++) h = ((h << 5) - h + seed.charCodeAt(i)) | 0
+  return HUMAN_FIGHTER_ARCHETYPES[Math.abs(h) % HUMAN_FIGHTER_ARCHETYPES.length]
+}
+
+function applyChallenge(data: any, receivedAt?: number) {
+  const elapsed = receivedAt ? Date.now() - receivedAt : 0
+  const remaining = Math.max(1000, (data.timeoutMs || 8000) - elapsed)
+  humanChallenge.value = {
+    type: data.type,
+    label: data.label,
+    prompt: data.prompt,
+    roundNumber: data.round,
+    remainingMs: remaining,
+    scoring: data.scoring,
+  }
+  humanAnswer.value = ''
+  humanSubmitted.value = false
+  humanTimer.value = Math.ceil(remaining / 1000)
+  startTimer()
+  nextTick(() => answerInput.value?.focus())
+}
 
 const myBotId = computed(() => {
   if (!isLoggedIn.value || !myBot.value) return null
@@ -222,10 +249,14 @@ async function initLiveScene() {
     liveCanvas.value = newCanvas
   }
 
+  // Map 'human' archetype to a fighter-looking archetype for the sprite system
+  const archA = data.botA.archetype === 'human' ? humanFighterArchetype(data.botA.avatarSeed || data.botA.name) : data.botA.archetype
+  const archB = data.botB.archetype === 'human' ? humanFighterArchetype(data.botB.avatarSeed || data.botB.name) : data.botB.archetype
+
   liveScene = await createFightScene({
     canvas: liveCanvas.value,
-    botA: { name: data.botA.name, seed: data.botA.avatarSeed || data.botA.name, tier: data.botA.tier, archetype: data.botA.archetype, customization: data.botA.customization },
-    botB: { name: data.botB.name, seed: data.botB.avatarSeed || data.botB.name, tier: data.botB.tier, archetype: data.botB.archetype, customization: data.botB.customization },
+    botA: { name: data.botA.name, seed: data.botA.avatarSeed || data.botA.name, tier: data.botA.tier, archetype: archA, customization: data.botA.customization },
+    botB: { name: data.botB.name, seed: data.botB.avatarSeed || data.botB.name, tier: data.botB.tier, archetype: archB, customization: data.botB.customization },
     arena: data.arena,
   })
 
@@ -256,6 +287,25 @@ function connectSSE() {
     try {
       const data = JSON.parse(e.data)
       currentChallengeInfo.value = { type: data.challenge.type, label: data.challenge.label }
+      // Show challenge question in battle log
+      liveLogItems.value.push({
+        type: 'challenge',
+        round: data.round,
+        text: `${data.challenge.label}: ${data.challenge.prompt}`,
+        color: 'neon-green',
+      })
+      scrollLiveLog()
+    } catch { /* */ }
+  })
+
+  eventSource.addEventListener('human_challenge', (e) => {
+    try {
+      const data = JSON.parse(e.data)
+      if (roundCooldown.value > 0) {
+        pendingChallengeData.value = { data, receivedAt: Date.now() }
+      } else {
+        applyChallenge(data)
+      }
     } catch { /* */ }
   })
 
@@ -370,6 +420,11 @@ async function handleRoundEnd(data: any) {
     roundCooldown.value--
     if (roundCooldown.value <= 0) {
       if (cooldownHandle) { clearInterval(cooldownHandle); cooldownHandle = null }
+      // Apply any buffered challenge from SSE
+      if (pendingChallengeData.value) {
+        applyChallenge(pendingChallengeData.value.data, pendingChallengeData.value.receivedAt)
+        pendingChallengeData.value = null
+      }
     }
   }, 1000)
 }
@@ -467,6 +522,7 @@ async function fightAgain(botId: string) {
   replayDone.value = false
   humanChallenge.value = null
   humanSubmitted.value = false
+  pendingChallengeData.value = null
   roundCooldown.value = 0
   if (liveScene) { liveScene.destroy(); liveScene = null }
   liveSceneReady.value = false
@@ -567,6 +623,9 @@ function stopAutoBattle() {
           <div v-for="(item, idx) in liveLogItems" :key="idx">
             <div v-if="item.type === 'divider'" class="py-1.5"><div class="border-t border-white/5" /></div>
             <p v-else-if="item.type === 'header'" class="text-neon-purple font-bold text-base tracking-wide pt-3 pb-1 uppercase">{{ item.text }}</p>
+            <div v-else-if="item.type === 'challenge'" class="bg-neon-green/[0.06] border border-neon-green/20 rounded-md px-3 py-1.5 my-1">
+              <p class="text-neon-green text-xs font-mono leading-snug">{{ item.text }}</p>
+            </div>
             <div v-else-if="item.type === 'responseA'" class="bg-neon-cyan/[0.04] border-l-2 border-neon-cyan/30 rounded-r-md px-3 py-1.5 my-1">
               <p class="text-neon-cyan text-sm leading-snug">{{ item.text }}</p>
             </div>
diff --git a/server/src/engine/queue.ts b/server/src/engine/queue.ts
index 80c1582..85b5d8b 100644
--- a/server/src/engine/queue.ts
+++ b/server/src/engine/queue.ts
@@ -91,8 +91,11 @@ export async function joinQueue(botId: string): Promise<string> {
     const opponent = waitingQueue.shift()!
     clearTimeout(opponent.timeoutHandle)
 
-    // Start the fight
-    const fightId = await startFight(opponent.botId, botId)
+    // Start the fight — ensure human players are always botA (left side)
+    const isHumanJoiner = bot.webhookUrl === 'http://human.local/'
+    const fightId = isHumanJoiner
+      ? await startFight(botId, opponent.botId)
+      : await startFight(opponent.botId, botId)
     opponent.resolve(fightId)
     return fightId
   }