Spaces:
Sleeping
Sleeping
File size: 2,951 Bytes
bc3902d | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 | "use client"
import React from "react"
export default function ReportPanel({ report, onClose }: { report: any, onClose: () => void }) {
if (!report) return null
const models = report.models || []
return (
<div className="absolute inset-0 z-50 flex items-start justify-center p-6 pointer-events-auto">
<div className="w-full max-w-4xl bg-black/95 border border-white/10 rounded-xl p-6 text-white shadow-2xl overflow-auto max-h-[90vh]">
<div className="flex items-center justify-between mb-4">
<h2 className="text-lg font-bold">Simulation Report</h2>
<button onClick={onClose} className="px-3 py-1 bg-white/5 rounded">Close</button>
</div>
<div className="mb-4 text-sm text-white/70">Summary metrics for this match.</div>
<div className="grid grid-cols-2 gap-4 mb-6">
<div className="bg-gray-900 p-4 rounded">
<div className="text-xs text-white/60">Rounds</div>
<div className="text-xl font-mono">{report.rounds}</div>
</div>
<div className="bg-gray-900 p-4 rounded">
<div className="text-xs text-white/60">Models</div>
<div className="text-xl font-mono">{models.length}</div>
</div>
</div>
<div className="space-y-4">
{models.map((m: any) => (
<div key={m.id} className="bg-gray-900 p-4 rounded">
<div className="flex items-center justify-between">
<div>
<div className="text-sm font-bold">{m.display_name || m.id}</div>
<div className="text-xs text-white/60">{m.id}</div>
</div>
<div className="text-right">
<div className="text-xs text-white/60">Decisions</div>
<div className="font-mono text-lg">{m.decisions}</div>
</div>
</div>
<div className="mt-3 grid grid-cols-4 gap-3 text-xs text-white/60">
<div>Distance travelled: <div className="text-white font-mono">{m.distance.toFixed(0)} px</div></div>
<div>Water pickups: <div className="text-white font-mono">{m.water_picks}</div></div>
<div>Extinguish score: <div className="text-white font-mono">{m.extinguish_score.toFixed(1)}</div></div>
<div>Logical moves: <div className="text-white font-mono">{Math.round(m.logical_pct)}%</div></div>
</div>
<div className="mt-3 text-xs">
<div className="text-white/70 mb-1">Top messages</div>
<div className="grid grid-cols-2 gap-2">
{(m.top_messages || []).map((msg: string, idx: number) => (
<div key={idx} className="text-[12px] font-mono text-white/80">- {msg}</div>
))}
</div>
</div>
</div>
))}
</div>
</div>
</div>
)
}
|