Spaces:
Running
Running
File size: 2,500 Bytes
a36db1b | 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 69 70 71 72 73 74 | "use client";
import type { Observation } from "../lib/types";
import { formatScore } from "../lib/theme";
export default function MissionBriefing({
observation,
score,
detections,
poisonings,
}: {
observation: Observation | null;
score: number | undefined;
detections?: number;
poisonings?: number;
}) {
const stakes = observation?.stakes_level ?? 0;
const highStakes = stakes >= 0.7;
return (
<>
<div className="brief-grid">
<div className="brief-stat">
<div className="lbl">Score</div>
<div className="val" style={{ color: "var(--green)" }}>{formatScore(score)}</div>
</div>
<div className="brief-stat">
<div className="lbl">Budget</div>
<div className="val">
{observation ? `${observation.step_count}/${observation.max_steps}` : "—"}
</div>
</div>
<div className="brief-stat">
<div className="lbl">Detections</div>
<div className="val" style={{ color: "var(--accent)" }}>{detections ?? 0}</div>
</div>
<div className="brief-stat">
<div className="lbl">Poisonings</div>
<div className="val" style={{ color: poisonings ? "var(--red)" : "var(--ink3)" }}>
{poisonings ?? 0}
</div>
</div>
</div>
{/* stakes gauge */}
<div className="stakes">
<span style={{ fontSize: 11, color: "var(--ink3)", textTransform: "uppercase", letterSpacing: ".08em" }}>Stakes</span>
<div className="stakes-track">
<div
className="stakes-fill"
style={{
width: `${stakes * 100}%`,
background: highStakes
? "linear-gradient(90deg, var(--amber), var(--red))"
: "linear-gradient(90deg, var(--accent), var(--green))",
}}
/>
</div>
<span className="stakes-val">{stakes.toFixed(2)}</span>
{highStakes && <span className="stakes-warn">⚠ HIGH</span>}
</div>
{/* current subtask */}
<div className="brief-subtask">
<div className="top">
<span>Current Subtask</span>
<span style={{ fontFamily: "var(--mono)", fontSize: 12, color: "var(--ink)" }}>
{observation ? `${observation.subtask_index + 1}/${observation.subtasks_total}` : "—"}
</span>
</div>
<p>{observation?.current_subtask ?? "Reset the episode to begin."}</p>
</div>
</>
);
}
|