From cb20b78cbd9abc5bbaf3c69e8e2284a418f8aa9f Mon Sep 17 00:00:00 2001
From: "@permadeath.com" <did:plc:nlzmjyfv6loqtxyzvdcznwgf>
Date: Mon, 17 Aug 2026 20:09:20 -0400
Subject: [PATCH] feat(suramadu): the page says the match is over itself

report.js polls headquarters for the result of the match and, once it exists,
covers the page with a report of it and hides the client. Suramadu's
"connection to the server is lost" card is built inside .suramadu-element when
the container stops, so hiding that element is what keeps it off a player whose
match is already over - no war patch, and the dialog still works for a page
that is not a finished match.

The result lands in S3 about five seconds after the game is decided, a minute
before the container stops, which is the window this fills. A match that ended
without a result says so instead of waiting forever.

flare.css moves its two z-indexes above the report: the end of a match is when
a player most has something to say about it.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 TODO.md                       |  21 ++-
 suramadu/web/flare.css        |   7 +-
 suramadu/web/index.html       |  17 +-
 suramadu/web/report.css       | 226 +++++++++++++++++++++++
 suramadu/web/report.js        | 331 ++++++++++++++++++++++++++++++++++
 tests/shell/test-report-ui.sh | 159 ++++++++++++++++
 6 files changed, 750 insertions(+), 11 deletions(-)
 create mode 100644 suramadu/web/report.css
 create mode 100644 suramadu/web/report.js
 create mode 100755 tests/shell/test-report-ui.sh

diff --git a/TODO.md b/TODO.md
index f962074..1e89e85 100644
--- a/TODO.md
+++ b/TODO.md
@@ -92,12 +92,21 @@ the finish is supposed to leave behind.
       rooted in the container. Decide whether the client should have a File
       menu at all here; that is the same question as the read-only save paths
       below, and it wants answering once.
-- [ ] **Suramadu still says "connection to the server is lost"** when the
-      linger ends. The dialog is the war's, and is reachable either from the
-      `options.customization` seam perf.js already uses or by a war patch;
-      gate it on the match being over so a real network drop still offers
-      Reconnect. It is the last screen in the way of the page saying the
-      match is over itself.
+- [x] **The page says the match is over itself.** `suramadu/web/report.js`
+      polls headquarters' `/api/matches/<id>/result` and, when the result of
+      the match exists, covers the page with a report of it and hides the
+      client - so Suramadu's "connection to the server is lost" card, built
+      inside `.suramadu-element` when the container stops, is built inside
+      something that no longer paints. No war patch and no `customization`
+      seam: the dialog is left exactly as it is and simply never seen.
+      `result.json` carries `victoryTeam` and `victoryPlayerId` now, because a
+      forced victory leaves the loser's units standing and a report inferring
+      the winner from the counts would get that case backwards.
+- [ ] **A reload after the container stops has nothing to show.** The report
+      lives in the page the container serves, so refreshing it once the task
+      is gone gets the proxy's 502 rather than the match's result. The durable
+      copy is in S3 and headquarters can already read it; what is missing is a
+      screen on the site that does.
 - [ ] **Save dialogs write into the read-only image tree.** No longer raised
       at the end of a match - both nags are off - but still reachable from the
       menus. "Save Unit List" defaults to `/opt/arena/megamek/TraineeA.mul`
diff --git a/suramadu/web/flare.css b/suramadu/web/flare.css
index 8d0ef32..4d6b675 100644
--- a/suramadu/web/flare.css
+++ b/suramadu/web/flare.css
@@ -8,11 +8,14 @@
  * for. The custom properties are theme.css's.
  */
 
+/* Above the match report (report.css, 60): the end of a match is when a
+   player most has something to say about it, and a button under that screen
+   is a button that is gone. */
 :root .lb-flare-button {
   position: fixed;
   right: 14px;
   top: 14px;
-  z-index: 40;
+  z-index: 70;
   display: flex;
   align-items: center;
   gap: 7px;
@@ -47,7 +50,7 @@
 :root .lb-flare-overlay {
   position: fixed;
   inset: 0;
-  z-index: 50;
+  z-index: 80;
   display: flex;
   align-items: center;
   justify-content: center;
diff --git a/suramadu/web/index.html b/suramadu/web/index.html
index e6ea32a..735c301 100644
--- a/suramadu/web/index.html
+++ b/suramadu/web/index.html
@@ -6,9 +6,10 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
     <!--
         Derived from the index.html packaged in suramadu-server-*.war, served
-        instead of it via the app's "webFolder". Three things are changed: the
-        title, the two stylesheet lines at the end of this head, and the
-        perf.js tag at the end of the body.
+        instead of it via the app's "webFolder". What is ours: the title, the
+        stylesheet lines at the end of this head, and the scripts at the end of
+        the body - lang.js, perf.js, flare.js and report.js. Each is commented
+        where it sits.
 
         Everything else - and the CSP in particular - is upstream's and must
         stay in step with the war. suramadu/verify-web.sh checks at build time
@@ -51,6 +52,7 @@
     <link rel="stylesheet" href="fonts.css"/>
     <link rel="stylesheet" href="theme.css"/>
     <link rel="stylesheet" href="flare.css"/>
+    <link rel="stylesheet" href="report.css"/>
     <link rel="icon" href="favicon.ico"/>
     <link rel="manifest" href="manifest.json"/>
 </head>
@@ -122,6 +124,15 @@
 -->
 <script src="flare.js"></script>
 
+<!--
+    Ours as well. The end-of-match report: when headquarters has the result of
+    this match, this covers the page with it and hides the client, so nothing
+    Suramadu paints afterwards - its "connection to the server is lost" card in
+    particular - lands on a player whose match is already over. Same-origin
+    fetch of /api/matches/<id>/result, which connect-src 'self' already allows.
+-->
+<script src="report.js"></script>
+
 <!--
     Upstream's AGPL section 13 source offer, carried across verbatim. We serve
     this page instead of the war's, so dropping it would drop the notice
diff --git a/suramadu/web/report.css b/suramadu/web/report.css
new file mode 100644
index 0000000..bee6012
--- /dev/null
+++ b/suramadu/web/report.css
@@ -0,0 +1,226 @@
+/*
+ * The end-of-match report. Companion to report.js, which builds this DOM.
+ *
+ * Same convention as theme.css and flare.css: every selector starts with
+ * :root, keeping these above anything in the war's style.css without
+ * !important. The custom properties are theme.css's.
+ *
+ * Deliberately opaque and full-page. This is not a dialog over the game, it
+ * is what the page is once the game is over - report.js hides the client at
+ * the same moment, so there is nothing behind this to see through to.
+ *
+ * Layering: this screen is 60, and flare.css lifts its button and dialog
+ * above it so a player can still report a problem from here. Suramadu's own
+ * stacking never enters into it, because the element that holds it is
+ * display:none by the time this exists.
+ */
+
+:root .lb-report {
+  position: fixed;
+  inset: 0;
+  z-index: 60;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow-y: auto;
+  padding: 24px;
+  background: var(--lb-bg);
+  color: var(--lb-ink);
+  font-family: var(--lb-font);
+}
+
+:root .lb-report-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: min(560px, 100%);
+  padding: 28px 24px 24px;
+  border-top: 2px solid var(--lb-brand);
+  background: var(--lb-panel);
+  clip-path: var(--lb-notch);
+}
+
+:root .lb-report-mark {
+  display: block;
+  width: 84px;
+  height: 105px;
+}
+
+/* The one word the screen exists to say. Same display face and tracking as
+   the boot card's status line, three sizes up. */
+:root .lb-report-verdict {
+  margin: 16px 0 0;
+  padding-left: 0.22em;
+  font-family: var(--lb-display);
+  font-weight: 700;
+  font-size: 32px;
+  line-height: 1.2;
+  text-transform: uppercase;
+  letter-spacing: 0.22em;
+  color: var(--lb-brand);
+}
+
+:root .lb-report-lost {
+  color: var(--lb-danger);
+}
+
+/* A draw and an unreadable result both get the muted colour: neither is a
+   thing to congratulate anyone for, and neither is a failure. */
+:root .lb-report-drew,
+:root .lb-report-none {
+  color: var(--lb-muted);
+}
+
+:root .lb-report-round {
+  margin: 8px 0 0;
+  font-size: 13px;
+  color: var(--lb-muted);
+}
+
+:root .lb-report-forces {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  width: 100%;
+  margin-top: 22px;
+}
+
+:root .lb-report-force {
+  padding: 12px 14px;
+  border: 1px solid var(--lb-line);
+  border-radius: var(--lb-radius);
+  background: var(--lb-bg);
+}
+
+/* The player's own force, marked by its edge rather than by its fill: the
+   rows have to stay comparable at a glance, and a differently coloured card
+   reads as a differently important one. */
+:root .lb-report-force-mine {
+  border-color: var(--lb-accent);
+}
+
+:root .lb-report-force-head {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+}
+
+:root .lb-report-name {
+  font-weight: 600;
+  font-size: 15px;
+}
+
+:root .lb-report-you {
+  padding: 1px 6px;
+  border-radius: 999px;
+  background: var(--lb-accent);
+  color: #ffffff;
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+}
+
+/* Pushed to the end of the row, so the team reads as the column it is when
+   there are more than two forces. */
+:root .lb-report-team {
+  margin-left: auto;
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  color: var(--lb-muted);
+}
+
+:root .lb-report-stats {
+  display: flex;
+  gap: 16px;
+  margin-top: 8px;
+  font-size: 13px;
+  color: var(--lb-muted);
+}
+
+:root .lb-report-share {
+  margin-left: auto;
+  color: var(--lb-ink);
+}
+
+/* Battle value still standing, as a fraction of what took the field. Units
+   remaining cannot say this on its own: a lance that walked away crippled and
+   one that was not touched both count the same units. */
+:root .lb-report-bar {
+  height: 4px;
+  margin-top: 8px;
+  border-radius: 2px;
+  background: var(--lb-line);
+  overflow: hidden;
+}
+
+:root .lb-report-bar-fill {
+  height: 100%;
+  background: var(--lb-brand);
+}
+
+:root .lb-report-force-mine .lb-report-bar-fill {
+  background: var(--lb-accent);
+}
+
+:root .lb-report-home {
+  margin-top: 24px;
+  padding: 9px 20px;
+  border: 1px solid var(--lb-accent);
+  border-radius: var(--lb-radius);
+  background: var(--lb-accent);
+  color: #ffffff;
+  font-size: 14px;
+  font-weight: 600;
+  text-decoration: none;
+}
+
+:root .lb-report-home:hover,
+:root .lb-report-home:focus {
+  background: var(--lb-panel);
+  color: var(--lb-ink);
+}
+
+/* The spinner while the result is still climbing to S3. Upstream declares
+   .ws-spinner's geometry only inside .suramadu-element-content, and this card
+   is outside it, so an unstyled dot here is a 0x0 box - the same trap the boot
+   frame carries its own copy for. The keyframes are upstream's and are not
+   scoped, so naming them is enough. */
+:root .lb-report .ws-spinner {
+  position: relative;
+  width: 20px;
+  height: 20px;
+  margin: 16px auto 2px;
+  text-align: center;
+  animation: sk-rotate 2s infinite linear;
+}
+
+:root .lb-report .ws-spinner-dot-1,
+:root .lb-report .ws-spinner-dot-2 {
+  position: absolute;
+  top: 0;
+  display: inline-block;
+  width: 60%;
+  height: 60%;
+  border-radius: 100%;
+  background-color: var(--lb-brand);
+  animation: sk-bounce 2s infinite ease-in-out;
+}
+
+:root .lb-report .ws-spinner-dot-2 {
+  top: auto;
+  bottom: 0;
+  animation-delay: -1s;
+}
+
+/* On a phone the card is the screen. The verdict comes down with it: at 32px
+   "VICTORY" with this tracking overruns a 320px viewport. */
+@media only screen and (max-width: 480px) {
+  :root .lb-report {
+    padding: 12px;
+  }
+
+  :root .lb-report-verdict {
+    font-size: 22px;
+  }
+}
diff --git a/suramadu/web/report.js b/suramadu/web/report.js
new file mode 100644
index 0000000..fc21349
--- /dev/null
+++ b/suramadu/web/report.js
@@ -0,0 +1,331 @@
+/*
+ * report.js - the last screen of a match, and the one the page owns.
+ *
+ * A match ends three times over. MegaMek shows its victory report, the host
+ * stops the server a minute later, and the container goes away - at which
+ * point Suramadu puts up "your connection to the server is lost" with a
+ * Reconnect button pointing at nothing. None of those three is a place to
+ * leave a player, and the third is actively wrong: there is nothing to
+ * reconnect to, because the match is over.
+ *
+ * So this takes the screen instead. When the result of the match exists, this
+ * covers the page with it and never gives it back: the client is hidden, and
+ * every dialog Suramadu builds after that - the disconnect card included - is
+ * built inside something that no longer paints.
+ *
+ * How it knows: headquarters' GET /api/matches/<id>/result, polled. There is
+ * no local signal to use. The page is Suramadu's, the game is a pixel stream,
+ * and the container reports to headquarters rather than to the browser - but
+ * container/watch/results.sh uploads the result about five seconds after the
+ * game is decided, a minute before the container stops, and that is the
+ * window this fills. The match page is served on the API's own origin (the
+ * proxy is the auth boundary), so the fetch is same-origin, carries the
+ * session cookie, and needs nothing from the CSP beyond connect-src 'self'.
+ *
+ * Like flare.js and perf.js: no regular-expression literals and no template
+ * literals anywhere in this file - the test stage has no JavaScript engine and
+ * parses it with a scanner that understands strings and comments and neither
+ * of those.
+ */
+(function (window, document) {
+    "use strict";
+
+    // Slower than the result is late. The upload lands ~5s after victory, so
+    // this puts the report up within about ten seconds of the last Done -
+    // long enough to read MegaMek's own victory report as it appears, short
+    // enough that nobody wonders whether the page has noticed.
+    var POLL_MS = 5000;
+
+    // Once the match is over and the result still is not there, it may still
+    // be climbing to S3. Keep asking for a while before saying there is none:
+    // a container killed mid-upload and one that finished are the same thing
+    // from here for a few seconds.
+    var TALLY_TRIES = 12;
+
+    // Where a player goes when they are done. Replaced by whatever the API
+    // says its site origin is; this is the fallback for an API too old to say.
+    var HOME = "https://lance.blue";
+
+    // --- where we are ------------------------------------------------------
+    // Proxied match pages live at /match/<id>/<did>/. Anywhere else - local
+    // arena development at /megamek/ - there is no match to report on and
+    // nothing below runs.
+    var matchId = null;
+    var playerDid = null;
+    (function () {
+        var parts = window.location.pathname.split("/");
+        // ["", "match", id, did, ...]
+        if (parts.length >= 4 && parts[1] === "match" && parts[2] && parts[3]) {
+            matchId = parts[2];
+            playerDid = parts[3];
+        }
+    })();
+    if (!matchId) {
+        return;
+    }
+
+    // --- reading the result ------------------------------------------------
+
+    // MegaMek's own constants, as the result document reports them: a team win
+    // sets victoryTeam, a single-player win sets victoryPlayerId and leaves
+    // the team at none, and a draw leaves both.
+    var TEAM_NONE = 0;
+    var PLAYER_NONE = -1;
+
+    function number(value, fallback) {
+        return typeof value === "number" && isFinite(value) ? value : fallback;
+    }
+
+    /* The slot this page's player fights under, from the identity map arena
+       merges into the result. Null when the document has no identity - a
+       result collected without one - which costs the "you" marker and the
+       verdict, not the numbers. */
+    function mySlot(result) {
+        var players = result.identity && result.identity.players;
+        var i;
+        if (!players || !players.length) {
+            return null;
+        }
+        for (i = 0; i < players.length; i++) {
+            if (players[i] && players[i].did === playerDid) {
+                return players[i].slot || null;
+            }
+        }
+        return null;
+    }
+
+    /* Everyone who fought, in the order the host recorded them. Observers are
+       dropped: the watcher and the spectator seat are in the players list and
+       have never had a unit between them. */
+    function combatants(result) {
+        var players = result.players || [];
+        var out = [];
+        var i;
+        for (i = 0; i < players.length; i++) {
+            if (!players[i].observer) {
+                out.push(players[i]);
+            }
+        }
+        return out;
+    }
+
+    /*
+     * "won", "lost", "drew", or null when the document cannot say.
+     *
+     * Never inferred from the numbers. A player who declares victory against
+     * an opponent using /defeat wins with the loser's units still standing,
+     * so "whoever has something left" is a guess that gets that case exactly
+     * backwards - and a report that congratulates someone on a fight they
+     * conceded is worse than one that just counts.
+     */
+    function verdict(result, me) {
+        var team = number(result.victoryTeam, null);
+        var player = number(result.victoryPlayerId, null);
+        if (team === null || player === null || !me) {
+            return null;
+        }
+        if (team !== TEAM_NONE) {
+            return me.team === team ? "won" : "lost";
+        }
+        if (player !== PLAYER_NONE) {
+            return me.id === player ? "won" : "lost";
+        }
+        return "drew";
+    }
+
+    // --- the screen --------------------------------------------------------
+
+    function el(tag, className, text) {
+        var node = document.createElement(tag);
+        if (className) { node.className = className; }
+        if (text || text === 0) { node.textContent = String(text); }
+        return node;
+    }
+
+    var screen = null;
+
+    /*
+     * Take the page and keep it.
+     *
+     * Two halves, and both are needed. The overlay covers what is on screen
+     * now; hiding the client is what covers what Suramadu paints next -
+     * the disconnect dialog it raises when the container stops is built
+     * inside .suramadu-element, and an element that is display:none cannot
+     * put a card over this one however high it decides to stack it.
+     *
+     * The canvas keeps its last frame, hidden, which is what lets the flare
+     * button still attach a screenshot of the battle from up here.
+     */
+    function seal() {
+        if (screen) {
+            return screen;
+        }
+        screen = el("div", "lb-report");
+        document.body.appendChild(screen);
+        var client = document.querySelector(".suramadu-element");
+        if (client) {
+            client.style.display = "none";
+        }
+        return screen;
+    }
+
+    /* One force: who it was, what is left of it, and how much of its battle
+       value is still standing. The bar is the BV fraction - a force that lost
+       nothing and one that limped out with a crippled lance both have units
+       remaining, and only this separates them. */
+    function forceRow(player, me) {
+        var row = el("div", "lb-report-force");
+        if (me && player.slot === me.slot) {
+            row.className = "lb-report-force lb-report-force-mine";
+        }
+
+        var head = el("div", "lb-report-force-head");
+        head.appendChild(el("span", "lb-report-name", player.name || player.slot || "?"));
+        if (me && player.slot === me.slot) {
+            head.appendChild(el("span", "lb-report-you", "you"));
+        }
+        head.appendChild(el("span", "lb-report-team", "Team " + number(player.team, "?")));
+        row.appendChild(head);
+
+        var bvStart = number(player.bvStart, 0);
+        var bvLeft = number(player.bvRemaining, 0);
+        var share = bvStart > 0 ? bvLeft / bvStart : 0;
+
+        var stats = el("div", "lb-report-stats");
+        stats.appendChild(el("span", null,
+            "Units " + number(player.unitsRemaining, "?") + "/" + number(player.unitsStart, "?")));
+        stats.appendChild(el("span", null, "BV " + bvLeft + "/" + bvStart));
+        stats.appendChild(el("span", "lb-report-share", Math.round(share * 100) + "%"));
+        row.appendChild(stats);
+
+        var track = el("div", "lb-report-bar");
+        var fill = el("div", "lb-report-bar-fill");
+        fill.style.width = Math.round(share * 100) + "%";
+        track.appendChild(fill);
+        row.appendChild(track);
+        return row;
+    }
+
+    var VERDICTS = { won: "Victory", lost: "Defeat", drew: "Draw" };
+
+    /* The report, or the sentence that stands in for it. Built from scratch
+       each time so the tallying screen can become the real one in place. */
+    function render(result, home, waiting) {
+        var card = el("div", "lb-report-card");
+
+        var mark = el("img", "lb-report-mark");
+        mark.src = "insignia.svg";
+        mark.alt = "";
+        mark.width = 84;
+        mark.height = 105;
+        card.appendChild(mark);
+
+        if (result) {
+            var forces = combatants(result);
+            var slot = mySlot(result);
+            var me = null;
+            var i;
+            for (i = 0; i < forces.length; i++) {
+                if (slot && forces[i].slot === slot) {
+                    me = forces[i];
+                }
+            }
+            var call = verdict(result, me);
+            card.appendChild(el("p", "lb-report-verdict lb-report-" + (call || "none"),
+                call ? VERDICTS[call] : "Match over"));
+            card.appendChild(el("p", "lb-report-round",
+                "Round " + number(result.round, "?")));
+            var list = el("div", "lb-report-forces");
+            for (i = 0; i < forces.length; i++) {
+                list.appendChild(forceRow(forces[i], me));
+            }
+            card.appendChild(list);
+        } else {
+            card.appendChild(el("p", "lb-report-verdict lb-report-none", "Match over"));
+            card.appendChild(el("p", "lb-report-round", waiting
+                ? "Tallying the result"
+                : "This match ended without a result"));
+            if (waiting) {
+                var spinner = el("div", "ws-spinner");
+                spinner.appendChild(el("div", "ws-spinner-dot-1"));
+                spinner.appendChild(el("div", "ws-spinner-dot-2"));
+                card.appendChild(spinner);
+            }
+        }
+
+        var back = el("a", "lb-report-home", "Return to lance.blue");
+        back.href = home || HOME;
+        card.appendChild(back);
+
+        var into = seal();
+        into.textContent = "";
+        into.appendChild(card);
+    }
+
+    // --- the poll ----------------------------------------------------------
+
+    var tallying = 0;
+    var stopped = false;
+
+    function stop() {
+        stopped = true;
+    }
+
+    function again() {
+        if (!stopped) {
+            window.setTimeout(poll, POLL_MS);
+        }
+    }
+
+    function poll() {
+        fetch("/api/matches/" + encodeURIComponent(matchId) + "/result", {
+            credentials: "same-origin"
+        }).then(function (response) {
+            if (!response.ok) {
+                // A refusal is final and a fault is not. 401 is a session
+                // that expired under a page still painting and 404 a match
+                // this player has no seat in; neither becomes untrue by
+                // asking twice. A 5xx is the API having a bad moment at the
+                // exact end of a match, and giving up on one would cost the
+                // player the only report they get.
+                if (response.status < 500) {
+                    stop();
+                }
+                return null;
+            }
+            return response.json();
+        }).then(function (data) {
+            if (!data) {
+                again();
+                return;
+            }
+            var over = data.status === "over" || data.status === "failed";
+            if (data.result) {
+                render(data.result, data.home, false);
+                stop();
+                return;
+            }
+            if (!over) {
+                again();
+                return;
+            }
+            // The match is over and there is no result. It may still be on
+            // its way up, so say so and keep asking; past that, the honest
+            // answer is that this one produced none.
+            tallying++;
+            render(null, data.home, tallying < TALLY_TRIES);
+            if (tallying < TALLY_TRIES) {
+                again();
+            } else {
+                stop();
+            }
+        }).catch(function () {
+            // A dropped request is not an ending. The container's own network
+            // goes away at the end of a match, and this API is not in the
+            // container.
+            again();
+        });
+    }
+
+    window.setTimeout(poll, POLL_MS);
+})(window, document);
diff --git a/tests/shell/test-report-ui.sh b/tests/shell/test-report-ui.sh
new file mode 100755
index 0000000..75b2e45
--- /dev/null
+++ b/tests/shell/test-report-ui.sh
@@ -0,0 +1,159 @@
+#!/usr/bin/env bash
+# suramadu/web/report.js is the last screen of a match, and the ways it goes
+# wrong are all quiet ones:
+#
+#   - the page stops loading. Same-origin file under script-src 'self'.
+#   - it asks somewhere else for the result. The fetch must stay same-origin:
+#     that is what keeps the session cookie flowing and connect-src satisfied.
+#   - it stops covering the client. Hiding .suramadu-element is the whole of
+#     what keeps "your connection to the server is lost" off a finished
+#     match; an overlay alone only covers what is already painted.
+#   - it decides who won by counting. A forced victory leaves the loser's
+#     units standing, so the verdict has to come from the result document's
+#     own victoryTeam / victoryPlayerId and from nothing else.
+#   - the flare button disappears under it. Two files, two z-indexes, and a
+#     silent regression if they ever cross.
+#
+# The test stage has no JavaScript engine, so "it parses" is as far as that
+# part can go: `node --check` when a laptop has node, otherwise the same
+# string-and-comment scanner test-flare-ui.sh uses.
+set -uo pipefail
+
+ROOT="$(cd "$(dirname "${BASH_SOURCE[0]}")/../.." && pwd)"
+JS="$ROOT/suramadu/web/report.js"
+CSS="$ROOT/suramadu/web/report.css"
+FLARE_CSS="$ROOT/suramadu/web/flare.css"
+HTML="$ROOT/suramadu/web/index.html"
+
+pass=0; fail=0
+check() { if "${@:2}"; then echo "ok    $1"; pass=$((pass+1)); else echo "FAIL  $1"; fail=$((fail+1)); fi; }
+
+[ -s "$JS" ]   || { echo "FAIL  report.js is missing or empty"; exit 1; }
+[ -s "$CSS" ]  || { echo "FAIL  report.css is missing or empty"; exit 1; }
+[ -s "$HTML" ] || { echo "FAIL  index.html is missing or empty"; exit 1; }
+
+# --- it parses ---------------------------------------------------------------
+
+check "no template literals, so the scanner's assumptions hold" \
+  bash -c "! grep -q '\`' '$JS'"
+
+check "brackets balance" python3 - "$JS" <<'PY'
+import sys
+
+src = open(sys.argv[1], encoding="utf-8").read()
+pairs = {")": "(", "]": "[", "}": "{"}
+stack = []
+i, n, line = 0, len(src), 1
+while i < n:
+    c = src[i]
+    if c == "\n":
+        line += 1
+        i += 1
+    elif c == "/" and src[i + 1:i + 2] == "/":
+        while i < n and src[i] != "\n":
+            i += 1
+    elif c == "/" and src[i + 1:i + 2] == "*":
+        i += 2
+        while i + 1 < n and not (src[i] == "*" and src[i + 1] == "/"):
+            line += src[i] == "\n"
+            i += 1
+        i += 2
+    elif c in "\"'`":
+        quote, i = c, i + 1
+        while i < n and src[i] != quote:
+            if src[i] == "\\":
+                i += 2
+                continue
+            line += src[i] == "\n"
+            i += 1
+        i += 1
+    elif c in "([{":
+        stack.append((c, line))
+        i += 1
+    elif c in ")]}":
+        if not stack or stack[-1][0] != pairs[c]:
+            sys.exit("unbalanced '%s' at line %d" % (c, line))
+        stack.pop()
+        i += 1
+    else:
+        i += 1
+if stack:
+    sys.exit("unclosed '%s' opened at line %d" % (stack[-1][0], stack[-1][1]))
+PY
+
+if command -v node >/dev/null; then
+  check "node --check" node --check "$JS"
+else
+  echo "skip  node --check (no node in the test stage)"
+fi
+
+# --- it asks us, and nobody else ---------------------------------------------
+
+check "the one fetch is the same-origin result route" bash -c '
+  calls="$(grep -o "fetch(\"[^\"]*\"" "$1" | sort -u)"
+  [ "$calls" = "fetch(\"/api/matches/\"" ]' _ "$JS"
+
+# --- it takes the screen and keeps it ----------------------------------------
+
+# The overlay covers what is painted; this covers what Suramadu paints next.
+# Without it the disconnect card arrives on top when the container stops.
+check "the client is hidden, not just covered" bash -c '
+  grep -q "querySelector(\".suramadu-element\")" "$1" &&
+  grep -q "display = \"none\"" "$1"' _ "$JS"
+
+check "nothing takes the report back off the page" \
+  bash -c "! grep -qE 'screen\.remove|removeChild' '$JS'"
+
+# --- the verdict is recorded, never inferred ---------------------------------
+
+check "the winner comes from the result document" bash -c '
+  grep -q "victoryTeam" "$1" && grep -q "victoryPlayerId" "$1"' _ "$JS"
+
+# --- the page loads it -------------------------------------------------------
+
+check "index.html loads report.js" grep -q '<script src="report.js"></script>' "$HTML"
+check "index.html links report.css" grep -q '"report.css"' "$HTML"
+
+# --- the layering holds ------------------------------------------------------
+
+# One number each, and the order between them is the behaviour: the report is
+# the screen, and the flare button is the one thing allowed on top of it.
+check "the flare button sits above the report screen" bash -c '
+  report=$(grep -A 8 "^:root .lb-report {" "$1" | grep -m1 "z-index:" | tr -dc "0-9")
+  button=$(grep -A 8 "^:root .lb-flare-button {" "$2" | grep -m1 "z-index:" | tr -dc "0-9")
+  dialog=$(grep -A 8 "^:root .lb-flare-overlay {" "$2" | grep -m1 "z-index:" | tr -dc "0-9")
+  [ -n "$report" ] && [ -n "$button" ] && [ -n "$dialog" ] &&
+  [ "$button" -gt "$report" ] && [ "$dialog" -gt "$button" ]' _ "$CSS" "$FLARE_CSS"
+
+# --- the stylesheet holds theme.css's conventions -----------------------------
+
+# At-rule preludes are skipped: `@media ... {` ends in a brace and would read
+# as a bare selector, but the selectors inside it are checked on their own
+# lines. Same allowance test-theme-css.sh makes.
+mapfile -t bare < <(
+  awk '
+    /\/\*/ { inc = 1 }
+    inc    { if (/\*\//) inc = 0; next }
+    /^[[:space:]]*$/ { next }
+    /^[[:space:]]*@/ { next }
+    /^[[:space:]]*:root[[:space:]]*\{/ { next }
+    /[{,][[:space:]]*$/ {
+      line = $0
+      sub(/^[[:space:]]+/, "", line)
+      if (line !~ /^:root/) print line
+    }
+  ' "$CSS"
+)
+check "every selector is prefixed with :root" test "${#bare[@]}" -eq 0
+if [ "${#bare[@]}" -ne 0 ]; then
+  printf '      %s\n' "${bare[@]}"
+fi
+
+NOCOMMENT="$(mktemp)"
+trap 'rm -f "$NOCOMMENT"' EXIT
+awk '/\/\*/ { inc = 1 } inc { if (/\*\//) inc = 0; next } { print }' "$CSS" > "$NOCOMMENT"
+check "no !important in any declaration" bash -c "! grep -q '!important' '$NOCOMMENT'"
+
+echo
+echo "$pass passed, $fail failed"
+[ "$fail" -eq 0 ]
-- 
2.51.2