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:
@@ -246,6 +246,66 @@ function RedZone({ test, missionId, canWriteRed }: RedZoneProps) {
|
|||||||
<Card accent="red" className="flex flex-col gap-3" data-testid="red-zone">
|
<Card accent="red" className="flex flex-col gap-3" data-testid="red-zone">
|
||||||
<SectionHeader prefix="Red" highlight="Execution" accent="red" />
|
<SectionHeader prefix="Red" highlight="Execution" accent="red" />
|
||||||
{apiErr && <Alert accent="red">{apiErr.message}</Alert>}
|
{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
|
<TextField
|
||||||
label="Command"
|
label="Command"
|
||||||
value={command}
|
value={command}
|
||||||
@@ -276,34 +336,6 @@ function RedZone({ test, missionId, canWriteRed }: RedZoneProps) {
|
|||||||
disabled={!canWriteRed}
|
disabled={!canWriteRed}
|
||||||
data-testid="red-comment"
|
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">
|
<div className="flex justify-end">
|
||||||
<Button
|
<Button
|
||||||
accent="red"
|
accent="red"
|
||||||
|
|||||||
Reference in New Issue
Block a user