From db9313a1e13bbfbfb5dfbe1fe608532b525233cf Mon Sep 17 00:00:00 2001
From: Knacky <knckydev@gmail.com>
Date: Fri, 15 May 2026 11:37:16 +0200
Subject: [PATCH] fix(m7): pin executed_at block to the top of the red form
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 frontend/src/pages/MissionTestPage.tsx | 88 ++++++++++++++++++--------
 1 file changed, 60 insertions(+), 28 deletions(-)

diff --git a/frontend/src/pages/MissionTestPage.tsx b/frontend/src/pages/MissionTestPage.tsx
index 595d087..b8d3368 100644
--- a/frontend/src/pages/MissionTestPage.tsx
+++ b/frontend/src/pages/MissionTestPage.tsx
@@ -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"