fix(m7): pin executed_at block to the top of the red form

User feedback: the execution timestamp is the anchor the blue team
correlates their logs against, so it should be the *first* thing in the
red form, not the last (where it lived alongside the override toggle).

Moved the executed-at block above Command/Output/Comment and wrapped it
in a tinted red sub-card (border-red/40 bg-red/5) so it reads as the
form's headline. The block now shows:
- the current `executed_at` (with an `· overridden` hint when applicable),
  or a "Not yet executed" stub when the test is still pending,
- the override toggle (disabled until the test reaches executed/reviewed),
- the local datetime-local input + a small "Browser local time — server
  stores UTC" hint so an operator typing 10:30 in Paris isn't surprised
  to see 08:30Z in the JSON.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Knacky
2026-05-15 11:37:16 +02:00
parent 5030f4bd83
commit db9313a1e1

View File

@@ -246,6 +246,66 @@ function RedZone({ test, missionId, canWriteRed }: RedZoneProps) {
<Card accent="red" className="flex flex-col gap-3" data-testid="red-zone">
<SectionHeader prefix="Red" highlight="Execution" accent="red" />
{apiErr && <Alert accent="red">{apiErr.message}</Alert>}
{/* The execution timestamp is the anchor the blue team correlates their
logs against, so it lives at the very top of the form (cf. user
feedback 2026-05-15). */}
<div
className="rounded-md border border-red/40 bg-red/5 p-3"
data-testid="red-executed-block"
>
<div className="flex flex-wrap items-baseline justify-between gap-2 mb-2">
<span className="font-mono text-2xs uppercase tracking-wider2 text-red">
Executed at
</span>
{test.executed_at ? (
<code
className="font-mono text-2xs text-text-bright"
data-testid="red-executed-current"
>
{test.executed_at}
{test.executed_at_overridden && (
<span className="ml-2 text-text-dim">· overridden</span>
)}
</code>
) : (
<span className="font-mono text-2xs text-text-dim">
Not yet executed use the "→ Executed" transition above to stamp.
</span>
)}
</div>
<label className="flex items-center gap-2 font-mono text-2xs text-text-dim">
<input
type="checkbox"
checked={override}
onChange={(e) => setOverride(e.target.checked)}
disabled={!canOverride}
data-testid="red-executed-override"
/>
Override timestamp
{!canOverride && (
<span className="text-text-dim/60">
(mark the test executed first)
</span>
)}
</label>
{override && (
<div className="mt-2 flex flex-col gap-1">
<input
type="datetime-local"
value={executedAtLocal}
onChange={(e) => setExecutedAtLocal(e.target.value)}
disabled={!canOverride}
className="rounded-md border border-border bg-bg-card px-2 py-1 font-mono text-xs text-text"
data-testid="red-executed-at"
/>
<span className="font-mono text-3xs text-text-dim">
Browser local time server stores the UTC equivalent.
</span>
</div>
)}
</div>
<TextField
label="Command"
value={command}
@@ -276,34 +336,6 @@ function RedZone({ test, missionId, canWriteRed }: RedZoneProps) {
disabled={!canWriteRed}
data-testid="red-comment"
/>
<div className="flex flex-wrap items-center gap-3">
<label className="flex items-center gap-2 font-mono text-2xs text-text-dim">
<input
type="checkbox"
checked={override}
onChange={(e) => setOverride(e.target.checked)}
disabled={!canOverride}
data-testid="red-executed-override"
/>
Override executed-at timestamp
</label>
{override && (
<input
type="datetime-local"
value={executedAtLocal}
onChange={(e) => setExecutedAtLocal(e.target.value)}
disabled={!canOverride}
className="rounded-md border border-border bg-bg-card px-2 py-1 font-mono text-2xs text-text"
data-testid="red-executed-at"
/>
)}
{!override && test.executed_at && (
<span className="font-mono text-2xs text-text-dim">
auto-stamped at{' '}
<code className="text-text">{test.executed_at}</code>
</span>
)}
</div>
<div className="flex justify-end">
<Button
accent="red"