Demo: per-step action log showing which policy made each move (hanabi/mini-hanabi)

benchmark_ui/frontend/src/envs/hanabi/GameLog.tsx

@@ -20,9 +20,12 @@ export type LogEntry = {
 type Props = {
     entries: LogEntry[]
     state: HanabiState
+    // optional override for player labels. Defaults to ["You", "Partner"] for /play mode.
+    // /demo mode passes the actual policy names.
+    playerNames?: [string, string]
 }
 
-export function GameLog({ entries, state }: Props) {
+export function GameLog({ entries, state, playerNames }: Props) {
     if (entries.length === 0) {
         return (
             <div className="text-xs text-ink-500 italic">
@@ -41,7 +44,7 @@ export function GameLog({ entries, state }: Props) {
                 const absoluteIdx = total - 1 - revIdx
                 return (
                     <li key={absoluteIdx} className="text-sm animate-fade-in">
-                        <LogLine entry={entry} state={state} />
+                        <LogLine entry={entry} state={state} playerNames={playerNames} />
                     </li>
                 )
             })}
@@ -49,8 +52,9 @@ export function GameLog({ entries, state }: Props) {
     )
 }
 
-function LogLine({ entry, state }: { entry: LogEntry; state: HanabiState }) {
-    const who = entry.player === 0 ? "You" : "Partner"
+function LogLine({ entry, state, playerNames }: { entry: LogEntry; state: HanabiState; playerNames?: [string, string] }) {
+    const [name0, name1] = playerNames ?? ["You", "Partner"]
+    const who = entry.player === 0 ? name0 : name1
     const whoClass = entry.player === 0 ? "text-hanabi-blue" : "text-hanabi-yellow"
     const base = <span className={`font-medium ${whoClass}`}>{who}</span>
 
@@ -95,5 +99,5 @@ function LogLine({ entry, state }: { entry: LogEntry; state: HanabiState }) {
         )
     }
 
-    return <div className="text-ink-500">{who} passed</div>
+    return <div className="text-ink-500">{base} passed</div>
 }

benchmark_ui/frontend/src/pages/Demo.tsx

@@ -11,6 +11,7 @@ import {
     type PartnerInfo,
 } from "../api/client"
 import { getEnvComponents } from "../envs/registry"
+import { GameLog, type LogEntry } from "../envs/hanabi/GameLog"
 
 type AgentOption = {
     id: string
@@ -264,9 +265,20 @@ export function Demo() {
                             />
                         </div>
 
-                        {currentFrame.event && (
-                            <div className="text-xs font-mono text-ink-400">
-                                {JSON.stringify(currentFrame.event)}
+                        {(env === "hanabi" || env === "mini-hanabi") && parsedState && (
+                            <HanabiDemoLog
+                                frames={frames}
+                                upToIdx={frameIdx}
+                                state={parsedState as any}
+                                playerNames={[labelA, labelB]}
+                            />
+                        )}
+                        {!(env === "hanabi" || env === "mini-hanabi") && currentFrame.event && (
+                            <div className="text-xs text-ink-400">
+                                <span className="font-medium text-ink-200">
+                                    {currentFrame.actor === 0 ? labelA : labelB}
+                                </span>
+                                <span className="font-mono"> · {String((currentFrame.event as any).kind ?? JSON.stringify(currentFrame.event))}</span>
                             </div>
                         )}
                     </div>
@@ -282,6 +294,44 @@ export function Demo() {
     )
 }
 
+// Per-frame event narration for Hanabi/mini-hanabi demos so the user can see
+// each move attributed to a specific policy.
+function HanabiDemoLog({
+    frames, upToIdx, state, playerNames,
+}: {
+    frames: { event: Record<string, unknown> | null; actor: number | null }[]
+    upToIdx: number
+    state: any
+    playerNames: [string, string]
+}) {
+    const entries: LogEntry[] = []
+    for (let i = 0; i <= Math.min(upToIdx, frames.length - 1); i++) {
+        const f = frames[i]
+        if (!f.event || f.actor == null) continue
+        const ev = f.event as any
+        const player = (f.actor === 0 ? 0 : 1) as 0 | 1
+        if (ev.kind === "play" || ev.kind === "discard" || ev.kind === "hint_color" || ev.kind === "hint_rank" || ev.kind === "noop") {
+            entries.push({
+                player,
+                kind: ev.kind,
+                slot: ev.slot,
+                color: ev.color,
+                rank: ev.rank,
+                bombed: ev.bombed,
+                scored: ev.scored,
+                revealed: ev.revealed,
+            })
+        }
+    }
+    return (
+        <div className="rounded-lg border border-ink-800 bg-ink-950/40 p-4 max-h-72 overflow-y-auto">
+            <div className="text-xs uppercase tracking-wider text-ink-500 mb-2">Action log</div>
+            <GameLog entries={entries} state={state} playerNames={playerNames} />
+        </div>
+    )
+}
+
+
 function AgentSelect({
     label,
     options,