v0.1.0 — undo, the crew's reach on the board, workers on the card, and four engine bugs

Fifteen items from two playtest sessions. Three that read as drawing faults were engine
bugs: cars could be added to a train that was not being made up (50 offers in 8 games),
the make-up panel merged two trains and could couple a car to the wrong one, and an
Office upgrade silently deleted what a Modifier had added. A fourth was a sentinel
inside a coordinate's own value range — a Mainline placement travelling as row -1, which
is an ordinary district row.

Trains are now drawn the way they stand: west on the left, nose toward the way the engine
faces, on both the district card and the Division chip. Undo steps back through the game
by replaying the save without its last intent. The switching walk keeps its rejections, so
the board can say why a square is not offered. Laborers and Porters are on the card, and
the rule that a district only grows outwards is finally written down.

Versions start here: third digit for fixes, second for a feature set, 1.0 for a release.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01GgtkX8JnvKa8y2tuJ8aQf4

src/web/panels.ts

@@ -183,7 +183,23 @@ export function facilitiesHtml(f: Frame): string {
              * and what the Modifiers beside it added.
              */
             `<div class="caps">` +
-            stat('laborers', x.laborers, x.base.laborers, 'Actions this facility can take each Stage — one Laborer moves one load one square.') +
+            /**
+             * PORTERS TOO, NOT JUST LABORERS.
+             *
+             * `porters` has been on the view-model all along and no renderer ever printed it — so a
+             * Waiting Area, Restaurant or Hotel beside the Office, whose whole effect is +1 porter
+             * and +1 passenger slot, showed exactly half of what it did. Reported: "it gave me an
+             * extra porter that I see no indication of anywhere."
+             *
+             * A facility has one kind of worker or the other: Laborers work freight, Porters work
+             * passengers. Showing the row that is always 0/0 would be noise, so each shows its own.
+             */
+            (Number(x.laborers.split('/').pop()) > 0 || x.base.laborers > 0
+              ? stat('laborers', x.laborers, x.base.laborers, 'Actions this facility can take each Stage — one Laborer moves one load one square. Left of the slash is how many are still free this Stage.')
+              : '') +
+            (Number(x.porters.split('/').pop()) > 0 || x.base.porters > 0
+              ? stat('porters', x.porters, x.base.porters, 'Passenger work, one action each per Stage: a Porter boards or detrains passengers, and earns the Revenue in a single action. Left of the slash is how many are still free this Stage.')
+              : '') +
             (x.allowsOut ? stat('out', String(x.greenCap), x.base.out, 'Green boxes: loads waiting to be worked onto a car.') : '') +
             (x.allowsIn ? stat('in', String(x.redCap), x.base.in, 'Red boxes: loads cleared off an arriving car.') : '') +
             (x.modifiers.length
@@ -279,6 +295,18 @@ h3{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:#8b94a3;ma
 @keyframes ttflash{0%{background:#2f6b47;border-color:#8fd6a0;transform:scale(1.18)}
   100%{background:#222c38;border-color:#4d6fa8;transform:scale(1)}}
 @media(prefers-reduced-motion:reduce){.tt-slot.fresh{animation:none;outline:2px solid #8fd6a0}}
+/* THE KEY TO THE FOUR STATES ABOVE. A slot can be lit blue, ringed violet, dimmed, or flashing
+   green, and nothing said which was which — reported as "what do the colours mean?" The green one
+   in particular is a MOMENT, not a state: it marks the slot the die just filled and is gone by the
+   next render, so without a key it reads as a category of train. */
+.tt-key{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px;font-size:10px;color:#8b94a3}
+.tt-key span{display:inline-flex;align-items:center;gap:4px}
+.tt-key span::before{content:"";width:9px;height:9px;border-radius:2px;border:1px solid #2c333d;
+  background:#1a1f26}
+.tt-key .k-due::before{background:#222c38;border-color:#4d6fa8}
+.tt-key .k-now::before{border-color:#b98cf0;box-shadow:0 0 0 1px rgba(150,110,230,.35)}
+.tt-key .k-past::before{opacity:.45}
+.tt-key .k-fresh::before{background:#2f6b47;border-color:#8fd6a0}
 ul.blocked{margin:0;padding-left:18px}
 .sev-waiting{color:#8b94a3}.sev-risk{color:#e0b060}.sev-stuck{color:#e58080}
 .fac{border-top:1px solid #2c333d;padding:7px 0}