fix: human fight UX — SSE challenge input, fighter sprites, battle log questions, left-side positioning

- 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

@@ -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="h-[calc(100vh-4rem)] flex flex-col px-6 py-6 overflow-y-auto">
-    <div class="max-w-lg mx-auto w-full flex flex-col flex-1 min-h-0">
+    <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,8 +279,11 @@ const tierClass = (t: number) => `tier-${t}`
       </div>
 
       <template v-else>
-        <!-- Header -->
+        <div class="lg:flex lg:gap-8 lg:items-start">
-        <div class="text-center mb-5">
+
+          <!-- 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
@@ -335,6 +338,9 @@ const tierClass = (t: number) => `tier-${t}`
                   :style="{ '--glow': stats.tierColor + '80' } as any"
                 />
               </div>
+
+              <!-- 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>
@@ -357,9 +363,10 @@ const tierClass = (t: number) => `tier-${t}`
                   {{ showCustomize ? 'CLOSE' : 'CUSTOMIZE' }}
                 </button>
               </div>
+            </div>
 
-        <!-- Customization panel (owner only) -->
+            <!-- Customization panel (owner only) — below sprite on left column -->
-        <div v-if="showCustomize && isOwner" class="mb-4 border border-neon-cyan/20 bg-surface-raised/60 p-4">
+            <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>
@@ -442,6 +449,10 @@ const tierClass = (t: number) => `tier-${t}`
                 {{ isSaving ? 'SAVING...' : 'SAVE LOOK' }}
               </button>
             </div>
+          </div>
+
+          <!-- RIGHT COLUMN: Stats, actions, fights -->
+          <div class="flex-1 min-w-0 flex flex-col min-h-0">
 
             <!-- Stats -->
             <div class="grid grid-cols-3 gap-2 mb-4">
@@ -485,7 +496,7 @@ const tierClass = (t: number) => `tier-${t}`
               </div>
             </div>
 
-        <!-- Fight actions (only for owner or anyone for now) -->
+            <!-- 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
@@ -562,6 +573,9 @@ const tierClass = (t: number) => `tier-${t}`
                 Sign out
               </button>
             </div>
+          </div>
+
+        </div>
       </template>
     </div>
   </div>

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 },
+    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: data.botB.archetype, customization: data.botB.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>

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
+    // Start the fight — ensure human players are always botA (left side)
-    const fightId = await startFight(opponent.botId, botId)
+    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
   }