Merge pull request 'v0.22.0 — ISS-022/025/027 hover route trace (job list, on-board rows, relocation panel)' (#34 ) from feat/hover-trace into master

fix(e2e): renderedFeatures — evaluate maplibre geometry getter in-page before Playwright serialization drops it
fix(e2e): expectHoverRoute — ignore queryRenderedFeatures artifacts without LineString geometry (CI run #70 )
2026-09-20 03:58:03 +02:00 · 2026-09-20 01:50:23 +00:00 · 2026-09-20 01:22:23 +00:00 · 2026-09-19 22:52:12 +00:00 · 2026-09-19 22:01:02 +00:00 · 2026-09-19 21:47:00 +00:00
20 changed files with 1267 additions and 171 deletions
@@ -1,18 +1,16 @@
 # Flight Simulator — Workflow Rules
 ## Change process (mandatory)
-1. **Small, incremental changes** — work is done one change at a time, in smaller parts; each part must be tested thoroughly with unit and e2e tests covering it before moving on.
+1. **Small, incremental changes** — work is done one change at a time, in smaller parts; each part must be tested thoroughly with unit and e2e tests covering it before moving on. Connected issues/tasks that reference the same part of code MAY be done together on one branch/PR with a single version bump (e.g. two UI tweaks to the same panel).
 2. **Feature branch + PR** — every change lands on a feature branch off `master` (no direct pushes to master). The branch carries the commits below; open a pull request to `master`.
 3. **Changelog entry** — every such change is listed in `CHANGELOG.md` with date, time and version (format: `## v<version> — YYYY-MM-DD HH:MM`, then bullet points of what changed).
 4. **Version bump** — the version is updated in `package.json`.
-5. **CI must pass** — the PR's pipeline (build → unit tests → e2e, `.gitea/workflows/ci.yml`) must be green before merging. CI never deploys to production; its e2e runs against an isolated stack inside dind.
+5. **CI must pass** — enforced by branch protection on `master` (required status check `CI / build + unit + e2e (pull request)`): the PR cannot be merged until CI is green. Merge via auto-merge (`POST /repos/{owner}/{repo}/pulls/{n}/merge` with body `{"do":"merge","merge_style":"merge","merge_when_checks_succeed":true}`) so it merges automatically once CI passes. CI never deploys to production; its e2e runs against an isolated stack inside dind.
 6. **Tag + manual deploy after merge** — once merged, tag the version on `master` (e.g. `v0.13.0`). Production (`https://flight.dev.kkhost.pl`) is updated manually afterwards: `docker compose up -d --build` on the host.
 ## E2E tests (mandatory)
-1. **Docker compose instance is the app under test** — e2e always runs against a docker-compose build, never a local `next dev` on :3000 (dev builds don't render for non-loopback clients, and a second instance splits state). Locally that means the Traefik-routed instance at `https://flight.dev.kkhost.pl`; in CI it is an isolated stack inside dind (`docker-compose.ci.yml`) — **CI never deploys to or modifies production**.
+1. **CI-only** — e2e runs ONLY in CI, against an isolated docker stack inside dind built from `docker-compose.ci.yml` (project name `flight-ci`, app container on a static IP; see `.gitea/workflows/ci.yml`). There are NO local e2e runs at all: locally you verify with `tsc --noEmit` + `npx vitest run` + `npx playwright test --list` (typecheck, unit suite, specs compile and list), and the full e2e suite is verified by CI on every PR. **CI never deploys to or modifies production.**
-2. **Update before testing (local)** — deploy current code first: `docker compose up -d --build`, then run the suite with plain `npx playwright test`. The config's webServer block is off by default; set `E2E_DEPLOY_CMD` to have Playwright itself run a deploy command and wait for readiness.
+2. **CI env vars** (`playwright.config.ts`, all optional) — `E2E_BASE_URL` (app under test; CI sets it to the in-network app host, so the config's default of the live Traefik instance at `https://flight.dev.kkhost.pl` is never used), `E2E_DEPLOY_CMD` (runs as Playwright webServer: deploys the stack and waits for readiness before tests start; CI uses build + `up -d` + `logs -f`), `PW_REMOTE_BROWSER=0` (CI runs local chromium because the shared remote browser server at 192.168.1.4 cannot reach a stack inside dind — when unset, the config defaults to that remote server and to the live instance as baseURL), and `E2E_COMPOSE_ARGS`, read by `e2e/state.spec.ts` for its mid-run `docker compose restart flight` (CI points it at `-f docker-compose.ci.yml -p flight-ci`).
 3. **Remote browsers** — local runs drive browsers through the shared Playwright server at `192.168.1.4:3000` (Docker image tag must match this repo's @playwright/test version, pinned in devDependencies). Set `PW_REMOTE_BROWSER=0` to run local chromium instead — CI does, because the remote server cannot reach a stack inside dind.
 4. **CI env vars** (`playwright.config.ts`, all optional; defaults preserve the local flow) — `E2E_BASE_URL` (app under test), `E2E_DEPLOY_CMD` (webServer deploy command), `PW_REMOTE_BROWSER=0` (local browsers); `e2e/state.spec.ts` reads `E2E_COMPOSE_ARGS` for its mid-run container restart.
 ## API
 1. **Live base URL** — `https://flight.dev.kkhost.pl` (the docker-compose build behind Traefik).
@@ -1,5 +1,54 @@
 # Changelog
 ## v0.22.0 — 2026-09-19 21:42
 - **Hover route trace on job-list rows (ISS-022).** Hovering an open package in the right pane now draws the ENTIRE great-circle trace between origin and destination, not just the two endpoint rings. Zero pane edits — the rows already sent `{kind:'package', originIcao, destIcao}`; `components/Map.tsx` now derives from/to for any hover target carrying two ICAOs and pushes a new pure builder's output (`hoverRouteGeoJson(fromIcao, toIcao, airportsByIcao)` in `lib/mapData.ts`: one LineString via the existing `greatCircleArc` slerp, empty FeatureCollection when either endpoint is missing from the airport index or the `''` no-hover sentinel) into a NEW dedicated `hover-routes` GeoJSON source + top-most dashed `hover-route` LineLayer (paint: `#facc15` matching the airports-highlight ring, width 4, `line-dasharray [2,2]`). The shared `routes` source can't carry this — it only holds FLYING legs, so an open package's or a grounded relocation's planned route was never in it. The layer is added in `ensureLayers` after the highlight layers so style switches keep it; `applyHoverRef` re-pushes data on every hover
 - **Same trace on On-board cargo rows (ISS-025).** Each `onboard-package-{id}` row in the left pane's On board section now reports `{kind:'package', originIcao, destIcao, planeId: plane.id}` on mouseenter — same full trace as job-list rows PLUS the carrying plane's halo stays lit via the new optional `planeId` field (Map uses `h.planeId ?? ''` for the planes/routes-highlight filters). Mouseleave restores the block's plain `{kind:'plane', id}` highlight; leaving the whole block still ends at null because React fires the child's mouseleave before the parent's
 - **Relocate panel hover previews the planned flight (ISS-027).** The left pane's Relocate section gains `data-testid="relocate-section"` + enter/leave handlers: with a grounded plane AND destination selected it reports `{kind:'route', fromIcao: relocatePlane.locationIcao, toIcao: relocateDest.icao}` (else null), and Map draws the planned trace AND rings ONLY the target airport in airports-highlight (origin stays unmarked — the destination is what the issue asks to see). `HoverTarget` (`components/hoverTypes.ts`) extends to `{kind:'plane';id} | {kind:'package';originIcao;destIcao;planeId?} | {kind:'route';fromIcao;toIcao}`. Existing semantics unchanged: plane hovers filter the three highlight layers exactly as before, package hovers keep BOTH endpoint rings (now plus the trace)
 - **Target airport highlighted in a distinct color on job-list / relocation hover (ISS-022).** The destination of any two-endpoint hover now gets its own ring in a NEW top-most `airports-target-highlight` circle layer (`components/Map.tsx`, same `airports` source and r=9 transparent-fill geometry as airports-highlight, but green `#4ade80` stroke width 3 vs the yellow `#facc15` endpoint rings) — added last in `ensureLayers` so it also sits above the hover-route line at its endpoint; `applyHoverRef` filters it to the destination icao for BOTH `'package'` and `'route'` hovers (empty-string sentinel otherwise). airports-highlight itself is untouched, so the existing both-endpoints / target-only assertions stay valid
 - Tests: unit — new `describe('hoverRouteGeoJson …')` in `lib/mapData.test.ts`: no-hover sentinel → empty; two known airports → one arc with exact dataset endpoints; reversed-input symmetry; missing from/to ICAO → empty (baseline 283 → 288). e2e (`e2e/hover.spec.ts`) — open-package test extended with hover-route endpoint assertions (line geometry first/last coords compared against `/api/airports` lookups) + trace-clear check; new `hovering an on-board cargo row draws its trace and keeps the plane halo` (load via API, hover the row, assert trace endpoints + planes-highlight for that plane, abandon the package afterwards to leave a clean instance); new `hovering the Relocate section previews the planned route and target airport` (selects starter + LEMD via the existing testids, hovers `[data-testid="relocate-section"]`, asserts trace endpoints + target-only ring). New helpers: `airportLonLat(page, icao)` and `expectHoverRoute(page, fromIcao, toIcao)`; all new/extended assertions call `fitToAirports` first since `queryRenderedFeatures` is viewport-scoped
 - Verified: `tsc --noEmit` clean; unit suite green locally (288); `npx playwright test --list` = 41 tests (was 39, +2 new in hover.spec.ts); e2e not run locally by design — CI verifies against an isolated stack
 - **Fix: hover-route e2e timeouts (CI run #69).** All three trace tests failed at `expectHoverRoute` with the 15 s "waiting for the hover-route line EDDF → LEMD" timeout although the dashed trace WAS drawn correctly — the helper assumed `queryRenderedFeatures(undefined, {layers:['hover-route']})` returns exactly one feature whose endpoints are bit-identical to the `/api/airports` dataset coords. MapLibre GL JS stores GeoJSON geometry in per-tile INTEGER grids (`Math.round(extent·(x·2^z − tx))`, maplibre-gl 6.10) and clips long lines across tiles, so a 1420 km leg comes back as one feature PER intersecting tile (empirically 4 at z=4 / 5 at z=5 for EDDF→LEMD, verified against the installed build's GeoJSONVT) with endpoints quantized by up to ~half a grid step (~0.001° observed at z≥4, ~0.02° worst case at z=0): both the `feats.length !== 1` guard and the strict `===` coordinate comparisons could never be true. The helper now accepts any number of segments and matches endpoints within 0.05° (~5 km — above worst-case quantization at any zoom, below the distance between any two EU airports): some segment must start at origin and some end at destination; all other assertions unchanged. App side verified correct (no race: `ensureLayers` awaits the airport fetch before creating sources/layers and re-applies hover afterwards; layer/source ids match) — no app changes
 - **Fix: hover-route e2e — evaluate maplibre geometry in-page before Playwright serialization (CI runs #69–#71).** All three trace tests failed for a serialization reason, not a data one: `renderedFeatures` returned live `GeoJSONFeature` instances from `queryRenderedFeatures`, whose `geometry` is a lazy PROTOTYPE getter — and Playwright's evaluate serialization copies only own enumerable properties (verified empirically), so every feature arrived in test context WITHOUT geometry. Run #69 timed out on the strict length guard before touching it, run #70 threw `TypeError: Cannot read properties of undefined (reading 'coordinates')`, run #71's defensive filter found nothing and timed out. The helper now maps each feature to a plain object inside page.evaluate so the getter is evaluated in-page; the endpoint-matching predicate keeps its degenerate-segment filter as belt-and-braces — no app changes
 ## v0.21.0 — 2026-09-19 21:01
 - **Relocate panel moves to the left pane (ISS-023).** Flying an empty/grounded plane to another airport is "anything with our plane", so it belongs in the left pane, not as a market row on the right. The `.market-row.market-row-relocate` JSX (`relocate-plane` select of grounded planes labeled `{planeName} — {icao}`, `relocate-dest` name-sorted select, `relocate-go` button → `POST /api/planes/{id}/fly {destIcao}`) moved verbatim from `components/RightPane.tsx` into a new "Relocate" `<section>` in `components/LeftPane.tsx`, inserted between On board and Time. Its state (`relocatePlaneId` / `relocateDestIcao`) and the one-time `/api/airports` fetch (promise-ref pattern, GeoJSON → `{name, icao}[]` sorted by name) moved with it — the relocate-dest select was that fetch's only consumer in RightPane, so nothing else there changed. Busy gating rewired from RightPane's `busy` to LeftPane's own `useGameAction` instance (`actionsBusy`); a grounded-plane filter was added next to the existing `onboard` compute; plane labels reuse the expression already inlined in the Fleet rows. Testids kept byte-identical (`relocate-plane` / `relocate-dest` / `relocate-go`) and the row keeps its `.market-row market-row-relocate` classes (global CSS, works in the 360 px left pane); stale "280 px right pane" comment updated in `app/globals.css`. The map-popup relocation controls (`airport-popup-*`, Map.tsx) are a separate surface fed by the snapshot only — untouched
 - Tests: e2e — only `relocation.spec.ts` touches these testids and all locators are global, so no locator changes; the first test's title (which mentioned "right pane") and the file header comments now say left-pane Relocate section. No unit-test changes (baseline 283)
 - Verified: `tsc --noEmit` clean; unit suite green locally; e2e not run locally by design — CI verifies against an isolated stack
 ## v0.20.0 — 2026-09-19 19:21
 - **On board moved to the left pane (ISS-021).** The "On board" section (per-plane blocks with loaded/expired cargo rows, Refuel-for-leg / Fly-to / Abandon + penalty preview) now renders in `components/LeftPane.tsx` between Fleet and Time — wallet stays on top. The JSX moved verbatim (same testids: `onboard-{planeId}`, `onboard-package-{pkg.id}`, `refuel-for-*`, `fly-to-*`, `abandon-*` + penalty preview), along with the `onboard` computation (`planes.filter(flying || slotsUsedFor > 0)`) and per-plane cargo filter. All onboard e2e locators are global testids, so existing specs work unchanged
 - **Left pane widened: grid swapped to 360/1fr/280.** `.app-shell` in `app/globals.css` goes from `280px minmax(0, 1fr) 360px` to `360px minmax(0, 1fr) 280px` — total fixed width stays 640 px, so the map column is pixel-identical (map.spec.ts clicks via dynamic `map.project()`). Stale comments updated (on-board blocks now in the left pane; Relocate row comment reflects the 280 px right pane)
 - **Shared action runner hook.** RightPane's local `runAction` (busy gate, inline pane error + shell toast on failure, full post-action snapshot pushed via `applySnapshot`) extracted to new `lib/useGameAction.ts`: `useGameAction(state, applySnapshot, onError) → { runAction, busy, actionError }`, exact semantics kept incl. the non-2xx throw/catch and inline-error auto-clear on the next snapshot. Used in BOTH panes; LeftPane receives `applySnapshot` from the shell (`app/page.tsx`). RightPane keeps `[data-testid="right-error"]`; LeftPane gains a matching `[data-testid="left-action-error"]`. Pure helpers `slotsUsedFor` / `loadEligiblePlanes` stay exported from RightPane (unit tests import them there; LeftPane imports `slotsUsedFor` from it); the Market Relocate row + `/api/airports` fetch stay in RightPane
 - Tests: e2e — `panes.spec.ts` first test now also asserts the "On board" heading is visible inside `[data-testid="left-pane"]` and absent from the right pane; stale header comments updated in `actions.spec.ts` / `right-pane.spec.ts`. No unit-test changes (baseline 283)
 - Verified: `tsc --noEmit` clean; unit suite green locally; e2e not run locally by design — CI verifies against an isolated stack
 - **On-board cargo rows are two lines (ISS-028).** Each `onboard-package-*` row now stacks a full-width "Fly to <airport>" button on its own line above Refuel + Abandon side by side: `components/LeftPane.tsx` moves the fly-to button out of `.contract-main` into the row root and wraps refuel-for + abandon in a new `.onboard-actions` div — all testids, label text, penalty preview and disabled states unchanged. Long destination names in the fly-to label truncate with an ellipsis instead of overflowing: the label's inner span gets `min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap`, full name preserved via a `title` attribute (CSS in `app/globals.css`: `.onboard-block .contract-row` becomes flex-column, new `.onboard-fly-btn` / `.onboard-fly-label` / `.onboard-actions`). No e2e changes — specs locate everything by testid and assert no layout or button order; no version bump (part 2 of v0.20.0)
 ## v0.19.2 — 2026-09-19 20:06
 - **AGENTS.md "Change process" item 1** — connected issues/tasks that reference the same part of code may now be done together on one branch/PR with a single version bump (e.g. two UI tweaks to the same panel)
 - **AGENTS.md "E2E tests" section rewritten to match current reality** — e2e runs ONLY in CI, against an isolated docker stack inside dind (`docker-compose.ci.yml`); there are NO local e2e runs at all (local verification = `tsc --noEmit` + `npx vitest run` + `npx playwright test --list`; the full suite is verified by CI on every PR). Dropped the stale local-run instructions (deploying to the Traefik-routed instance before testing, driving browsers through the remote Playwright server at 192.168.1.4:3000); kept and reworded the CI env vars that actually exist in `playwright.config.ts` (`E2E_BASE_URL`, `E2E_DEPLOY_CMD`, `PW_REMOTE_BROWSER=0`, `E2E_COMPOSE_ARGS`)
 ## v0.19.1 — 2026-09-19 18:48
 - AGENTS.md: document that CI-green is enforced on master by branch protection (required status check) and that merges use auto-merge (`merge_when_checks_succeed`) so PRs merge automatically once CI passes
 ## v0.19.0 — 2026-09-19 18:05
 - **Auto-slow to 1× when all planes have landed (ISS-011).** When the last plane in flight lands, the sim slows down on its own so an idle fleet doesn't sit at 1000×. Server-side and authoritative: `tickOnce` (`lib/sim/engine.ts`) now remembers how many planes `deliverPackages` finalized during a tick, and when ≥1 plane landed this tick AND no plane remains with status `'flying'` AND the sim is not paused, it persists `timeScale = 1` on the same `sim_state` write as the clock — so the UI slider reflects it on the very next snapshot (no API or OpenAPI change: timeScale is still set via the existing `POST /api/sim`, and `clampTimeScale` semantics are untouched since 1 is a valid ladder value)
 - **Arrival-triggered, not idle-enforced.** The trigger fires only on the tick that processes a landing — a grounded fleet at high scale with no flight ever happening is left alone (this keeps the existing slider e2e in `panes.spec.ts` green: it sets 1000× and expects the server to confirm it while nothing is flying). Paused state is untouched: while paused no landings are processed, so a paused sim never auto-slows
 - **No auto-restore by design.** The previous scale is not remembered — once the game slows to 1× after the last landing, the player speeds up manually again (slider or `POST /api/sim`). Deliberately minimal scope: no "resume my old speed" behavior
 - Tests: unit — new `describe('auto-slow …')` block in `lib/sim/engine.test.ts`: last plane lands → stored timeScale becomes 1; a landing while another plane is still flying → no change; already at 1× → stays 1; paused sim with all planes landed → no change. e2e — new `e2e/auto-slow.spec.ts` (serial mode, SCALE=1000, self-heal fly-home in afterEach like relocation.spec.ts): sets 1000× via the API, dispatches plane-starter on the shortest leg from its hub (EDDF → nearest airport), waits for the landing and asserts the server's `timeScale` is exactly 1 in that snapshot, then proves manual override still works (`POST /api/sim {timeScale: 1000}` confirmed by response + fresh snapshot)
 - **e2e suite adapted to the new behavior.** Every existing spec that flies out-and-back relied on 1000× persisting across a landing — with ISS-011 it no longer does, so each return leg now re-sets SCALE explicitly: `flyHomeViaApi` in actions/relocation/right-pane/hover (re-set before the repositioning flight after waiting for an in-flight leg to land) and the restore legs inside the test bodies of actions.spec.ts (core loop, expired packages, validation paths ×2), right-pane.spec.ts (fly-to-destination, refuel-for-leg) and hover.spec.ts (flying-plane route highlight). map-interactions.spec.ts needed no change — its `loadAndFly` helper already re-sets SCALE before every landing wait
 - Verified: `tsc --noEmit` clean; unit suite green locally; e2e not run locally by design — CI verifies against an isolated stack
 ## v0.18.0 — 2026-09-19 16:02
 - **Relocate a grounded (empty) plane to any airport (ISS-010).** `flyPlane` has allowed pure repositioning since v0.12.0, but the UI only exposed flying for planes that carried cargo — an empty grounded plane had no fly control anywhere. Two new surfaces now drive the EXISTING `POST /api/planes/{id}/fly {destIcao}` endpoint (no API or OpenAPI change):
  - **Right-pane market row** (`components/RightPane.tsx`): a fourth `.market-row` with `[data-testid="relocate-plane"]` (grounded planes, "ATR 72-600 — EDDF" labels), `[data-testid="relocate-dest"]` (all airports from a one-time `GET /api/airports` fetch per page life — same promise-ref pattern as Map.tsx — sorted by name for stable e2e selection) and the `[data-testid="relocate-go"]` "Relocate" button, disabled while busy or until both selects have a value. Same effective-selection + `runAction` pattern as the buy/sell/refuel rows (first grounded plane / first airport preselected); the row wraps (`market-row-relocate`) since two selects don't fit one 360 px line
  - **Airport popup Relocate row** (`components/Map.tsx`): after the name/ICAO/local-time/weather lines, a `.popup-relocate` block with `[data-testid="airport-popup-plane"]` (grounded planes from the latest polled snapshot at click time) and `[data-testid="airport-popup-relocate"]` "Relocate here" — disabled until a plane is picked; on click it POSTs fly to the clicked airport, pushes the response snapshot through the shell's `applySnapshot` (new Map prop, same callback RightPane receives), and reports success/failure in `[data-testid="airport-popup-relocate-status"]`. With no grounded planes the row shows `[data-testid="airport-popup-no-planes"]` instead. Popups are plain HTML, not React — controls wired via `popup.getElement().querySelector(...)` after `.addTo(map)`
 - **Bigger airport markers (ISS-010).** The r=3 dots were hard to click: `airports-circles` paint in `components/Map.tsx` goes from radius 3 / stroke 1 to radius 5 / stroke 1.5, and the hover highlight ring follows (r=8 → r=9). Paint-only — no data or interaction changes
 - No server or OpenAPI changes — both surfaces reuse the existing fly endpoint (validations unchanged: 404 unknown plane / 409 flying or insufficient fuel / 400 unknown ICAO, strict unknown-field rejection kept)
 - Tests: e2e — new `e2e/relocation.spec.ts` (serial mode, SCALE=1000, self-heal fly-home in afterEach like actions.spec.ts): market-row test ensures plane-starter grounded at the hub via API, picks it + the nearest non-hub airport (shortest leg) and asserts `/api/state` shows `flying` with that destIcao after clicking Relocate; popup test clicks the isolated LFRS marker (projected-center pattern from map.spec.ts), asserts the select lists "ATR 72-600 — EDDF" and the button is disabled until a plane is picked, then relocates via the popup. Marker-size regression gate = the existing map.spec.ts click tests keep passing
 - Verified: `tsc --noEmit` clean; unit suite green locally (no lib/ changes — flyPlane's zero-package case already covered by actions.test.ts); e2e not run locally by design — CI verifies against an isolated stack
 - **Fix (CI run #50): POPUP_AIRPORT scoping in the popup relocation e2e.** The LFRS marker click passed `POPUP_AIRPORT` into a `page.evaluate(() => …)` callback that runs in the BROWSER, where Node-scope constants don't exist — deterministic `ReferenceError: POPUP_AIRPORT is not defined` (relocation.spec.ts popup test, both attempts of run #50). The constant is now passed as an evaluate argument (`page.evaluate(({lon, lat}) => …, POPUP_AIRPORT)`); the other evaluate in the file only touches browser globals and needed no change. Test-only — no app code touched
 - **Fix (CI run #51): strict-mode locator in the popup relocation e2e.** `expect(planeSel.locator('option')).toContainText(…)` resolved to BOTH options (placeholder + plane) → strict mode violation (relocation.spec.ts popup test, both attempts of run #51; the app rendered correctly). The assertion now targets `option[value="plane-starter"]` specifically with `toHaveText`. Test-only — no app code touched
 ## v0.17.0 — 2026-09-19 14:49
 - **Bottom-right toasts for action errors (ISS-008).** Error messages like "insufficient funds: a ATR 72-600 costs 200000, you have 62721" now appear as toasts in the bottom-right corner — new `lib/useToasts.ts` hook (`useToasts() → {toasts, push(kind, msg), dismiss(id)}`, auto-dismiss after ~5 s, queue capped at 4 dropping the oldest; pure core `pushToast` unit-tested) and new `components/Toasts.tsx` `<ToastStack>` (fixed container `.toasts`, items `[data-testid="toast"]` with class `toast toast-error|toast-info` + a × dismiss button). Wired into BOTH error paths: `RightPane.runAction`'s catch now calls the shell's `onError` in addition to keeping the inline `[data-testid="right-error"]` pane error, and `LeftPane.applySimControls`'s catch (previously console.error-only) reports "Failed to update time controls (…)" through the same callback. The shell (`app/page.tsx`) owns the hook and renders the stack; CSS in `app/globals.css`
 - **Event messages via snapshot diffing.** No server event feed exists, so new pure `lib/deriveEvents.ts` — `diffSnapshots(prev: StateSnapshot | null, next) → {kind:'info', message}[]` — derives human-readable events from the fields already in `/api/state`: plane landing (`flying→available`, "ATR 72-600 landed at Frankfurt"), package delivery (`loaded→delivered`, "Package delivered: +€X" with the reward), expiry (`open|loaded→expired`, "Package expired: A → B"), new packages (id only in next, "New package available: A → B") and planes bought/sold (plane id set changed, "Bought/Sold {model}"). The shell keeps a `prevRef` and diffs on every snapshot change, pushing each event as an info toast; the first snapshot after load emits nothing (no baseline — no page-load spam)
@@ -68,10 +68,46 @@ body {
  color: #cbd5e1;
 }
-/* v0.9.0 — single-screen 3-pane shell: left Assets / center map / right Jobs & Market */
+/* ISS-010 (v0.18.0) — Relocate row inside the airport popup (plain HTML, not React). */
 .popup-relocate {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
 }
 .popup-relocate select {
  font-size: 12px;
  padding: 3px 6px;
  border-radius: 4px;
  border: 1px solid rgba(148, 163, 184, 0.4);
 }
 .popup-relocate button {
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 4px;
  border: 1px solid rgba(148, 163, 184, 0.4);
  cursor: pointer;
 }
 .popup-relocate button:disabled {
  opacity: 0.5;
  cursor: default;
 }
 [data-testid='airport-popup-relocate-status'] {
  font-size: 11px;
  color: #334155;
 }
 /* v0.9.0 — single-screen 3-pane shell: left Assets / center map / right Jobs & Market.
   ISS-021 (v0.20.0): left widened to 360px (it now carries the On board section), right
   narrowed to 280px — total fixed width stays 640px, so the map column is unchanged. */
 .app-shell {
  display: grid;
-  grid-template-columns: 280px minmax(0, 1fr) 360px;
+  grid-template-columns: 360px minmax(0, 1fr) 280px;
  height: 100%;
 }
@@ -327,6 +363,12 @@ body {
  padding: 4px 0;
 }
 /* ISS-010 (v0.18.0) — the Relocate row carries TWO selects, so let it wrap instead of
   squeezing both below their readable width in the 360 px left pane (moved there in ISS-023 v0.21.0). */
 .market-row-relocate {
  flex-wrap: wrap;
 }
 .market-preview {
  font-size: 12px;
  color: #f8fafc;
@@ -334,7 +376,7 @@ body {
  font-variant-numeric: tabular-nums;
 }
-/* v0.12.0 — on-board blocks (per plane) in the right pane */
+/* v0.12.0 — on-board blocks (per plane); moved to the left pane in ISS-021 (v0.20.0) */
 .onboard-block {
  background: rgba(30, 41, 59, 0.6);
  border-radius: 6px;
@@ -342,10 +384,36 @@ body {
  margin-bottom: 8px;
 }
 /* ISS-028 (v0.20.0 part 2) — on-board cargo rows are two lines: a full-width fly-to button,
   then refuel + abandon side by side below it; long destination names truncate with an ellipsis. */
 .onboard-block .contract-row {
  background: transparent;
  padding: 6px 0 0;
  border-top: 1px solid rgba(148, 163, 184, 0.2);
  display: flex;
  flex-direction: column;
  gap: 5px;
 }
 .onboard-block .contract-row .contract-sub {
  margin-top: 0; /* row spacing comes from the container's gap */
 }
 .onboard-fly-btn {
  width: 100%;
 }
 .onboard-fly-label {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
 }
 .onboard-actions {
  display: flex;
  gap: 6px;
 }
 /* v0.17.0 — ISS-008: bottom-right toast stack (action errors + game events) */
@@ -43,9 +43,13 @@ export default function Home() {
  return (
    <div className="app-shell">
-      <LeftPane state={state} loading={loading} error={error} onRefresh={refresh} onHover={setHovered} onError={onError} />
+      {/* ISS-021 (v0.20.0) — applySnapshot also reaches the left pane: its On board section's
-      {/* v0.11.0 — the same polled snapshot drives the map's plane markers + route lines */}
+          refuel/fly/abandon actions push their response snapshot into the shared state */}
-      <Map state={state} hovered={hovered} />
+      <LeftPane state={state} loading={loading} error={error} onRefresh={refresh} applySnapshot={applySnapshot} onHover={setHovered} onError={onError} />
      {/* v0.11.0 — the same polled snapshot drives the map's plane markers + route lines;
          ISS-010 (v0.18.0) — applySnapshot lets the airport popup's Relocate row push its
          action response into the shared state, exactly like RightPane does */}
      <Map state={state} hovered={hovered} applySnapshot={applySnapshot} />
      <RightPane state={state} loading={loading} applySnapshot={applySnapshot} onHover={setHovered} onError={onError} />
      <ToastStack toasts={toasts} onDismiss={dismiss} />
    </div>
@@ -1,11 +1,15 @@
 'use client';
 import { useCallback, useEffect, useRef, useState, type ChangeEvent } from 'react';
 import type { GeoJsonFeatureCollection } from '@/lib/airports';
 import type { PlaneState, StateSnapshot } from '@/lib/game/state';
 import { PLANE_TYPES } from '@/lib/game/catalog';
-import { formatCash, formatFuel, formatSimClock } from '@/lib/format';
+import { abandonPenalty } from '@/lib/game/penalty';
 import { formatCash, formatDeadlineRelative, formatFuel, formatSimClock } from '@/lib/format';
 import { TIME_SCALES, scaleToSlider, sliderToScale } from '@/lib/timeScale';
 import { useGameAction } from '@/lib/useGameAction';
 import { useSimClock } from '@/lib/useSimClock';
 import { slotsUsedFor } from './RightPane';
 import type { HoverTarget } from './hoverTypes';
 interface LeftPaneProps {
@@ -14,6 +18,9 @@ interface LeftPaneProps {
  error: string | null;
  // The shell's single-poll refresh — called after a sim-control POST so the pane updates immediately.
  onRefresh: () => void;
  // ISS-021 (v0.20.0): push the full snapshot returned by an action endpoint into the shared shell
  // state — needed now that the On board section's refuel/fly/abandon actions live in this pane.
  applySnapshot: (snapshot: StateSnapshot) => void;
  // ISS-002 (v0.15.0): report fleet-row hovers to the shell so the map can highlight the plane.
  onHover: (target: HoverTarget | null) => void;
  // ISS-008 (v0.17.0): report a failed sim-control POST to the shell as an error toast.
@@ -83,9 +90,40 @@ export async function retrySimPost(
  return { ok: false, reason: 'exhausted', error: lastError };
 }
-export default function LeftPane({ state, loading, error, onRefresh, onHover, onError }: LeftPaneProps) {
+export default function LeftPane({ state, loading, error, onRefresh, applySnapshot, onHover, onError }: LeftPaneProps) {
  const [busy, setBusy] = useState(false);
  // ISS-021 (v0.20.0): shared action runner for the On board section (moved here from RightPane).
  const { runAction, busy: actionsBusy, actionError } = useGameAction(state, applySnapshot, onError);
  // ISS-023 (v0.21.0): Relocate selections — moved here from the right-pane market row; same
  // "effective selection" pattern as there: the user's pick while it stays valid, else a sensible
  // default (first grounded plane / first airport).
  const [relocatePlaneId, setRelocatePlaneId] = useState<string | null>(null);
  const [relocateDestIcao, setRelocateDestIcao] = useState<string | null>(null);
  // ISS-010 (v0.18.0): one-time /api/airports fetch per page life — destination options for the
  // Relocate section, sorted by name so e2e selection is stable. Same promise-ref pattern as Map.tsx;
  // on failure airportOptions stays null and the Relocate button simply remains disabled. Moved here
  // from RightPane in ISS-023 (v0.21.0) — the relocate-dest select was its only consumer there.
  const [airportOptions, setAirportOptions] = useState<Array<{ name: string; icao: string }> | null>(null);
  const airportsPromiseRef = useRef<Promise<Array<{ name: string; icao: string }>> | null>(null);
  useEffect(() => {
    if (!airportsPromiseRef.current) {
      airportsPromiseRef.current = fetch('/api/airports', { cache: 'no-store' })
        .then((res) => {
          if (!res.ok) throw new Error(`GET /api/airports → HTTP ${res.status}`);
          return res.json() as Promise<GeoJsonFeatureCollection>;
        })
        .then((fc) =>
          fc.features
            .map((f) => ({ name: f.properties.name, icao: f.properties.icao }))
            .sort((a, b) => a.name.localeCompare(b.name, 'en')),
        );
    }
    void airportsPromiseRef.current.then(setAirportOptions).catch(() => {});
  }, []);
  // POST /api/sim (retried up to SIM_POST_MAX_ATTEMPTS× on failure — CI runs #44/#47), then
  // refetch the full snapshot immediately so the pane reflects the new controls without waiting
  // for the next poll tick. After the final attempt fails keep the stale UI and surface an error
@@ -153,6 +191,20 @@ export default function LeftPane({ state, loading, error, onRefresh, onHover, on
  const paused = state?.simState.paused ?? false;
  const timeScale = state?.simState.timeScale ?? 1;
  // On board (v0.12.0, moved from the right pane in ISS-021 v0.20.0): every plane that carries
  // cargo or is mid-flight gets a block — its loaded/expired packages with fly-to-destination +
  // abandon controls, and flying planes show their current leg.
  const clockMs = state?.simState.clockMs ?? 0;
  const onboard = state ? state.planes.filter((p) => p.status === 'flying' || slotsUsedFor(state, p.id) > 0) : [];
  // ISS-023 (v0.21.0): Relocate — any GROUNDED plane can be repositioned to any airport via the
  // existing fly endpoint (pure repositioning, no package needed since v0.12.0). Moved here from
  // the right-pane market row; with state null both fall back to null and the section isn't rendered.
  const grounded = state ? state.planes.filter((p) => p.status === 'available') : [];
  const relocatePlane = grounded.find((p) => p.id === relocatePlaneId) ?? grounded[0] ?? null;
  const relocateDest =
    airportOptions === null ? null : airportOptions.find((a) => a.icao === relocateDestIcao) ?? airportOptions[0] ?? null;
  // Slider commit (v0.9.1): the displayed value follows the drag optimistically via
  // pendingScale; POST /api/sim fires after a 250 ms debounce, or immediately when the
  // user releases the slider (browsers fire a native 'change' on release). The server's
@@ -294,6 +346,167 @@ export default function LeftPane({ state, loading, error, onRefresh, onHover, on
            )}
          </section>
          {/* ISS-021 (v0.20.0): moved here from the right pane — between Fleet and Time. */}
          <section className="pane-section">
            <h3 className="pane-heading">On board</h3>
            {onboard.length === 0 ? (
              <p className="pane-muted">Nothing on board.</p>
            ) : (
              onboard.map((plane) => {
                const cargo = state.packages.filter(
                  (pkg) => pkg.planeId === plane.id && (pkg.status === 'loaded' || pkg.status === 'expired'),
                );
                return (
                  // ISS-002: hovering the on-board block (including its cargo rows) highlights the plane.
                  // Handlers live only on the outer div — React's enter/leave don't fire when moving to a
                  // child, so this covers the whole block without flicker between sub-elements.
                  <div
                    key={plane.id}
                    data-testid={`onboard-${plane.id}`}
                    className="onboard-block"
                    onMouseEnter={() => onHover({ kind: 'plane', id: plane.id })}
                    onMouseLeave={() => onHover(null)}
                  >
                    <div className="contract-main">
                      <span className="plane-model">{PLANE_TYPES[plane.model]?.name ?? plane.model}</span>
                      {plane.status === 'flying' ? (
                        <>
                          <span className="plane-status status-flying">in flight</span>
                          {plane.destName && (
                            <span data-testid={`plane-leg-${plane.id}`} className="contract-route">
                              {plane.locationName} → {plane.destName}
                            </span>
                          )}
                        </>
                      ) : (
                        <span className="plane-status status-available">{plane.locationIcao}</span>
                      )}
                    </div>
                    {cargo.map((pkg) => {
                      const penalty = abandonPenalty(pkg, clockMs);
                      return (
                        // ISS-025 (v0.22.0): hovering a loaded package draws its full origin→dest trace on the map —
                        // same as job-list rows — and keeps this plane's halo lit via planeId. Leaving the row restores
                        // the block's plain plane highlight; leaving the whole block still ends at null (the child's
                        // mouseleave fires before the parent's).
                        <div
                          key={pkg.id}
                          data-testid={`onboard-package-${pkg.id}`}
                          className="contract-row"
                          onMouseEnter={() => onHover({ kind: 'package', originIcao: pkg.originIcao, destIcao: pkg.destIcao, planeId: plane.id })}
                          onMouseLeave={() => onHover({ kind: 'plane', id: plane.id })}
                        >
                          <button
                            type="button"
                            data-testid={`fly-to-${pkg.id}`}
                            className="pane-btn onboard-fly-btn"
                            disabled={actionsBusy || plane.status !== 'available'}
                            onClick={() => void runAction(`/api/planes/${plane.id}/fly`, { destIcao: pkg.destIcao })}
                          >
                            <span className="onboard-fly-label" title={`Fly to ${pkg.destName}`}>
                              Fly to {pkg.destName}
                            </span>
                          </button>
                          <div className="onboard-actions">
                            <button
                              type="button"
                              data-testid={`refuel-for-${pkg.id}`}
                              className="pane-btn"
                              disabled={actionsBusy || plane.status !== 'available'}
                              onClick={() => void runAction(`/api/planes/${plane.id}/refuel`, { mode: 'forFlight', packageId: pkg.id })}
                            >
                              Refuel
                            </button>
                            <button
                              type="button"
                              data-testid={`abandon-${pkg.id}`}
                              className="pane-btn"
                              disabled={actionsBusy || plane.status !== 'available'}
                              onClick={() => void runAction(`/api/packages/${pkg.id}/abandon`)}
                            >
                              Abandon{' '}
                              <span data-testid={`abandon-penalty-${pkg.id}`}>−{formatCash(penalty)}</span>
                            </button>
                          </div>
                          <div className="contract-sub">
                            <span className="contract-route">{pkg.originName} → {pkg.destName}</span>
                            <span>{formatCash(pkg.reward)}</span>
                            {pkg.status === 'expired' ? (
                              <span data-testid={`onboard-expired-${pkg.id}`}>expired</span>
                            ) : (
                              <span>{formatDeadlineRelative(pkg.deadlineSimTime, clockMs)}</span>
                            )}
                          </div>
                        </div>
                      );
                    })}
                  </div>
                );
              })
            )}
          </section>
          {/* ISS-023 (v0.21.0): moved here from the right-pane market row — it belongs with
              everything else about our planes, between On board and Time. */}
          {/* ISS-027 (v0.22.0): hovering the section previews the planned relocation on the map —
              dashed trace from the selected plane's airport to the destination + a ring on the target.
              With no grounded plane or no loaded airport options there is nothing to preview → null. */}
          <section
            className="pane-section"
            data-testid="relocate-section"
            onMouseEnter={() =>
              onHover(
                relocatePlane && relocateDest
                  ? { kind: 'route', fromIcao: relocatePlane.locationIcao, toIcao: relocateDest.icao }
                  : null,
              )
            }
            onMouseLeave={() => onHover(null)}
          >
            <h3 className="pane-heading">Relocate</h3>
            {/* ISS-010 (v0.18.0): relocate a grounded plane — the fly endpoint already allows pure
                repositioning, this row just exposes it for planes with nothing on board. */}
            <div className="market-row market-row-relocate">
              <select
                data-testid="relocate-plane"
                aria-label="Plane to relocate"
                value={relocatePlane?.id ?? ''}
                onChange={(e) => setRelocatePlaneId(e.target.value || null)}
              >
                {grounded.map((p) => (
                  <option key={p.id} value={p.id}>
                    {PLANE_TYPES[p.model]?.name ?? p.model} — {p.locationIcao}
                  </option>
                ))}
              </select>
              <select
                data-testid="relocate-dest"
                aria-label="Relocation destination airport"
                value={relocateDest?.icao ?? ''}
                onChange={(e) => setRelocateDestIcao(e.target.value || null)}
              >
                {airportOptions?.map((a) => (
                  <option key={a.icao} value={a.icao}>
                    {a.name}
                  </option>
                ))}
              </select>
              <button
                type="button"
                data-testid="relocate-go"
                className="pane-btn"
                disabled={actionsBusy || relocatePlane === null || relocateDest === null}
                onClick={() => {
                  if (relocatePlane && relocateDest) {
                    void runAction(`/api/planes/${relocatePlane.id}/fly`, { destIcao: relocateDest.icao });
                  }
                }}
              >
                Relocate
              </button>
            </div>
          </section>
          <section className="pane-section">
            <h3 className="pane-heading">Time</h3>
            <p data-testid="sim-clock" className="sim-clock">
@@ -347,6 +560,8 @@ export default function LeftPane({ state, loading, error, onRefresh, onHover, on
              {error}
            </p>
          )}
          {/* ISS-021 (v0.20.0): inline error from a failed On board action — mirrors right-error. */}
          {actionError && <p data-testid="left-action-error" className="pane-error">{actionError}</p>}
        </>
      ) : null}
    </aside>
@@ -8,7 +8,7 @@ import { DEFAULT_STYLE_ID, STYLES, STYLE_STORAGE_KEY, isStyleId, localAssetsAvai
 import type { GeoJsonFeatureCollection } from '../lib/airports';
 import type { StateSnapshot } from '../lib/game/state';
 import type { HoverTarget } from './hoverTypes';
-import { planesGeoJson, routesGeoJson, type AirportCoord, type PlaneFeatureProps } from '../lib/mapData';
+import { hoverRouteGeoJson, planesGeoJson, routesGeoJson, type AirportCoord, type PlaneFeatureProps } from '../lib/mapData';
 import { weatherFor } from '../lib/weather';
 import { approxLocalTime } from '../lib/localTime';
@@ -33,6 +33,15 @@ const ROUTES_LEGS_LAYER_ID = 'routes-legs';
 const PLANES_HIGHLIGHT_LAYER_ID = 'planes-highlight';
 const ROUTES_HIGHLIGHT_LAYER_ID = 'routes-highlight';
 const AIRPORTS_HIGHLIGHT_LAYER_ID = 'airports-highlight';
 // ISS-022/025/027 (v0.22.0): the hover route trace — its OWN source + top-most dashed line,
 // because the shared `routes` source only holds FLYING legs: an open package's or a grounded
 // relocation's planned route is never in it. applyHoverRef pushes data into it on every hover.
 const HOVER_ROUTES_SOURCE_ID = 'hover-routes';
 const HOVER_ROUTE_LAYER_ID = 'hover-route';
 // ISS-022 (v0.22.0): the DESTINATION airport's ring — a second, differently-colored circle over
 // the same `airports` source so the target stands out from the origin's plain yellow ring.
 // applyHoverRef filters it to the hovered target's destination icao only.
 const AIRPORTS_TARGET_HIGHLIGHT_LAYER_ID = 'airports-target-highlight';
 function escapeHtml(s: string): string {
  return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
@@ -43,13 +52,17 @@ interface MapProps {
  // route lines. Null until the first successful poll.
  state?: StateSnapshot | null;
  // ISS-002 (v0.15.0): the side panels' hover target — highlights the matching plane
-  // (+ its route leg if flying) or a package's endpoint airports. Null = nothing hovered.
+  // (+ its route leg if flying) or a package's endpoint airports, and (ISS-022/025/027 v0.22.0)
  // draws the full great-circle trace between any hovered target's two endpoints. Null = nothing hovered.
  hovered?: HoverTarget | null;
  // ISS-010 (v0.18.0): push an action endpoint's full response snapshot into the shared
  // shell state — same callback RightPane receives, used by the airport popup's Relocate row.
  applySnapshot: (snapshot: StateSnapshot) => void;
 }
 // Named FlightMap (not Map): a component called `Map` would shadow the global
 // Map constructor inside its own body, breaking `new Map(...)` for the airport index.
-export default function FlightMap({ state, hovered }: MapProps) {
+export default function FlightMap({ state, hovered, applySnapshot }: MapProps) {
  const containerRef = useRef<HTMLDivElement>(null);
  const mapRef = useRef<maplibregl.Map | null>(null);
  // /api/airports is fetched at most once per page life: every styledata event
@@ -58,6 +71,12 @@ export default function FlightMap({ state, hovered }: MapProps) {
  // Latest snapshot + airport coordinate index, so the mount effect's styledata wiring
  // and the state-change effect can both push data without prop-drilling into closures.
  const stateRef = useRef<StateSnapshot | null>(null);
  // ISS-010 (v0.18.0): the shell's applySnapshot is stable (useCallback with no deps), but the
  // mount effect captures it once — keep a ref so the popup wiring always calls the latest one.
  const applySnapshotRef = useRef(applySnapshot);
  useEffect(() => {
    applySnapshotRef.current = applySnapshot;
  }, [applySnapshot]);
  const airportsIndexRef = useRef<Map<string, AirportCoord> | null>(null);
  const [airportCount, setAirportCount] = useState<number | null>(null);
  const [styleId, setStyleId] = useState<string>(DEFAULT_STYLE_ID);
@@ -92,22 +111,49 @@ export default function FlightMap({ state, hovered }: MapProps) {
    const map = mapRef.current;
    if (!map) return;
    const h = hoveredRef.current;
-    // The empty-string sentinel matches nothing: no feature has id/icao ''.
+    // The empty-string sentinel matches nothing: no feature has id/icao ''. A package hover may
-    const planeId = h && h.kind === 'plane' ? h.id : '';
+    // name its plane (ISS-025 on-board cargo rows), so that plane's halo stays lit too.
    let planeId = '';
    let fromIcao = '';
    let toIcao = '';
    if (h) {
      if (h.kind === 'plane') planeId = h.id;
      else if (h.kind === 'package') {
        planeId = h.planeId ?? '';
        fromIcao = h.originIcao;
        toIcao = h.destIcao;
      } else {
        // 'route' — the Relocate panel's planned flight: trace + target airport only.
        fromIcao = h.fromIcao;
        toIcao = h.toIcao;
      }
    }
    if (map.getLayer(PLANES_HIGHLIGHT_LAYER_ID)) {
      map.setFilter(PLANES_HIGHLIGHT_LAYER_ID, ['==', ['get', 'id'], planeId]);
    }
    if (map.getLayer(ROUTES_HIGHLIGHT_LAYER_ID)) {
      map.setFilter(ROUTES_HIGHLIGHT_LAYER_ID, ['==', ['get', 'planeId'], planeId]);
    }
-    const originIcao = h && h.kind === 'package' ? h.originIcao : '';
+    // ISS-022/025/027: the hover route trace — one great-circle line for any target carrying two
-    const destIcao = h && h.kind === 'package' ? h.destIcao : '';
+    // ICAOs (package origin→dest / relocate fromIcao→toIcao); empty when either endpoint is unknown.
    const hoverSource = map.getSource(HOVER_ROUTES_SOURCE_ID) as maplibregl.GeoJSONSource | undefined;
    if (hoverSource) {
      void hoverSource.setData(hoverRouteGeoJson(fromIcao, toIcao, airportsIndexRef.current ?? new Map()));
    }
    // Package hovers ring BOTH endpoints (v0.15.0 behavior); 'route' hovers ring the TARGET only —
    // the relocation's destination is what ISS-027 asks to see. Plane hovers ring nothing.
    const originIcao = h?.kind === 'package' ? fromIcao : '';
    const destIcao = h?.kind === 'package' || h?.kind === 'route' ? toIcao : '';
    if (map.getLayer(AIRPORTS_HIGHLIGHT_LAYER_ID)) {
      map.setFilter(
        AIRPORTS_HIGHLIGHT_LAYER_ID,
        ['any', ['==', ['get', 'icao'], originIcao], ['==', ['get', 'icao'], destIcao]],
      );
    }
    // ISS-022: the destination gets its own distinct-colored ring on top (package AND route hovers).
    if (map.getLayer(AIRPORTS_TARGET_HIGHLIGHT_LAYER_ID)) {
      map.setFilter(AIRPORTS_TARGET_HIGHLIGHT_LAYER_ID, ['==', ['get', 'icao'], destIcao]);
    }
  };
  useEffect(() => {
@@ -156,16 +202,67 @@ export default function FlightMap({ state, hovered }: MapProps) {
        // deterministic generated weather — no gameplay effects per PLAN.md.
        const w = weatherFor(p.icao);
        const localTime = approxLocalTime(p.lon, Date.now());
-        new maplibregl.Popup({ offset: 10 })
+        // ISS-010 (v0.18.0): Relocate row — grounded planes from the latest snapshot can be
        // repositioned to this airport via POST /api/planes/{id}/fly (pure repositioning).
        const st = stateRef.current;
        const groundedPlanes = st ? st.planes.filter((pl) => pl.status === 'available') : [];
        const planeLabel = (model: string) => st?.catalog.find((c) => c.model === model)?.label ?? model;
        const relocateHtml =
          groundedPlanes.length > 0
            ? `<select data-testid="airport-popup-plane" aria-label="Plane to relocate here">` +
              `<option value="">Select a plane\u2026</option>` +
              groundedPlanes.map(
                (pl) =>
                  `<option value="${escapeHtml(pl.id)}">${escapeHtml(planeLabel(pl.model))} \u2014 ${escapeHtml(pl.locationIcao)}</option>`,
              ).join('') +
              `</select><button type="button" data-testid="airport-popup-relocate" disabled>Relocate here</button>`
            : `<span data-testid="airport-popup-no-planes">No grounded planes to relocate.</span>`;
        const popup = new maplibregl.Popup({ offset: 10 })
          .setLngLat(f.geometry.coordinates as [number, number])
          .setHTML(
            `<div data-testid="airport-popup">` +
              `<strong>${escapeHtml(p.name)}</strong><br/>${escapeHtml(p.icao)}<br/>` +
              `<span data-testid="airport-local-time">${localTime} local (approx)</span><br/>` +
              `<span data-testid="airport-weather">${w.condition}, wind ${w.windDirDeg}\u00B0 / ${w.windKt} kt, vis ${w.visibilityM} m</span>` +
              `<div class="popup-relocate">` + relocateHtml + `<span data-testid="airport-popup-relocate-status"></span></div>` +
            `</div>`,
          )
          .addTo(map);
        // Popups are plain HTML, not React — the element only exists after addTo, so wire the
        // controls via querySelector (the select enables the button once a plane is picked).
        const el = popup.getElement();
        const select = el?.querySelector<HTMLSelectElement>('[data-testid="airport-popup-plane"]');
        const button = el?.querySelector<HTMLButtonElement>('[data-testid="airport-popup-relocate"]');
        // The status span is always in the popup HTML (even with no grounded planes), so it
        // exists whenever the select/button do.
        const statusEl = el?.querySelector<HTMLElement>('[data-testid="airport-popup-relocate-status"]');
        if (select && button && statusEl) {
          select.addEventListener('change', () => {
            button.disabled = select.value === '';
          });
          button.addEventListener('click', async () => {
            const planeId = select.value;
            if (!planeId || button.disabled) return;
            button.disabled = true;
            statusEl.textContent = 'Relocating\u2026';
            try {
              const res = await fetch(`/api/planes/${planeId}/fly`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ destIcao: p.icao }),
                cache: 'no-store',
              });
              const data = (await res.json()) as StateSnapshot & { error?: string };
              if (!res.ok) throw new Error(data.error ?? `HTTP ${res.status}`);
              applySnapshotRef.current(data); // shared shell state updates immediately, like the panes' runAction
              statusEl.textContent = 'Relocation started.';
            } catch (err) {
              statusEl.textContent = err instanceof Error ? err.message : String(err);
              button.disabled = false; // allow retry / picking another plane
            }
          });
        }
      };
      const onPlaneClick = (e: maplibregl.MapLayerMouseEvent) => {
@@ -224,9 +321,9 @@ export default function FlightMap({ state, hovered }: MapProps) {
            type: 'circle',
            source: AIRPORTS_SOURCE_ID,
            paint: {
-              'circle-radius': 3,
+              'circle-radius': 5, // ISS-010 (v0.18.0): bigger — the r=3 dots were hard to click
              'circle-color': '#e11d48',
-              'circle-stroke-width': 1,
+              'circle-stroke-width': 1.5,
              'circle-stroke-color': '#ffffff',
            },
          });
@@ -317,13 +414,48 @@ export default function FlightMap({ state, hovered }: MapProps) {
            source: AIRPORTS_SOURCE_ID,
            filter: ['any', ['==', ['get', 'icao'], ''], ['==', ['get', 'icao'], '']],
            paint: {
-              'circle-radius': 8, // ring around the base airport circles (r=3)
+              'circle-radius': 9, // ring around the base airport circles (r=5)
              'circle-color': 'rgba(0, 0, 0, 0)', // transparent fill — stroke-only ring
              'circle-stroke-width': 2.5,
              'circle-stroke-color': '#facc15',
            },
          });
        }
        // ISS-022/025/027 (v0.22.0): the hover route trace — added LAST so it sits above every
        // other layer, including the highlight rings at its endpoints. Own source: the shared
        // `routes` source only holds flying legs, never a planned one. Empty until a hover sets data.
        if (!map.getSource(HOVER_ROUTES_SOURCE_ID)) {
          map.addSource(HOVER_ROUTES_SOURCE_ID, { type: 'geojson', data: { type: 'FeatureCollection', features: [] } });
        }
        if (!map.getLayer(HOVER_ROUTE_LAYER_ID)) {
          map.addLayer({
            id: HOVER_ROUTE_LAYER_ID,
            type: 'line',
            source: HOVER_ROUTES_SOURCE_ID,
            paint: {
              'line-color': '#facc15', // matches the airports-highlight ring — one "trace" color
              'line-width': 4,
              'line-dasharray': [2, 2], // dashed = planned route, distinct from solid flying legs
            },
          });
        }
        // ISS-022 (v0.22.0): the destination's ring — same geometry as airports-highlight but a
        // DIFFERENT color so the target stands out over the origin's yellow ring; added last so it
        // also sits above the hover-route line at its endpoint. Starts filtered to match nothing.
        if (!map.getLayer(AIRPORTS_TARGET_HIGHLIGHT_LAYER_ID)) {
          map.addLayer({
            id: AIRPORTS_TARGET_HIGHLIGHT_LAYER_ID,
            type: 'circle',
            source: AIRPORTS_SOURCE_ID,
            filter: ['==', ['get', 'icao'], ''],
            paint: {
              'circle-radius': 9, // same ring size as airports-highlight (r=5 base circles)
              'circle-color': 'rgba(0, 0, 0, 0)', // transparent fill — stroke-only ring
              'circle-stroke-width': 3,
              'circle-stroke-color': '#4ade80', // green — distinct from the yellow endpoint rings
            },
          });
        }
        // Layer-scoped listeners survive setStyle (they filter by layer id at event
        // time), so off+on with the same reference re-wires without duplicating.
        map.off('click', AIRPORTS_LAYER_ID, onAirportClick);
@@ -1,10 +1,10 @@
 'use client';
-import { useCallback, useEffect, useState } from 'react';
+import { useState } from 'react';
 import type { PackageState, PlaneState, StateSnapshot } from '@/lib/game/state';
 import { PLANE_TYPES } from '@/lib/game/catalog';
 import { abandonPenalty } from '@/lib/game/penalty';
 import { formatCash, formatDeadlineRelative } from '@/lib/format';
 import { useGameAction } from '@/lib/useGameAction';
 import type { HoverTarget } from './hoverTypes';
 interface RightPaneProps {
@@ -108,13 +108,9 @@ function LoadControls({
 }
 export default function RightPane({ state, loading, applySnapshot, onHover, onError }: RightPaneProps) {
-  const [busy, setBusy] = useState(false);
+  // ISS-021 (v0.20.0): shared action runner — busy gate, inline pane error + shell toast on
-  // Inline error from a failed action — auto-clears on the next successful poll (the shell's
+  // failure, full post-action snapshot pushed into the shared state on success.
-  // snapshot prop changes every tick) or the next successful action.
+  const { runAction, busy, actionError } = useGameAction(state, applySnapshot, onError);
  const [actionError, setActionError] = useState<string | null>(null);
  useEffect(() => {
    if (state !== null) setActionError(null);
  }, [state]);
  // Market picker selections — same "effective selection" pattern as LoadControls: the
  // user's pick while it stays valid, else a sensible default (first catalog entry / first plane).
@@ -122,35 +118,8 @@ export default function RightPane({ state, loading, applySnapshot, onHover, onEr
  const [sellPlaneId, setSellPlaneId] = useState<string | null>(null);
  const [refuelPlaneId, setRefuelPlaneId] = useState<string | null>(null);
-  // POST an action endpoint. Every success returns the FULL post-action snapshot (v0.8.0
+  // ISS-023 (v0.21.0): the Relocate row moved to the left pane — it belongs with everything else
-  // convention) — pushed into the shared state immediately; a 4xx {error} body becomes the
+  // about our planes, not in the market. Its state + /api/airports fetch went with it.
  // inline pane error and the stale UI stays until the next poll. Buttons are disabled while
  // a request is in flight, so at most one action runs at a time.
  const runAction = useCallback(
    async (path: string, body?: unknown) => {
      if (busy) return;
      setBusy(true);
      try {
        const res = await fetch(path, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: body === undefined ? undefined : JSON.stringify(body),
          cache: 'no-store',
        });
        const data = (await res.json()) as StateSnapshot & { error?: string };
        if (!res.ok) throw new Error(data.error ?? `HTTP ${res.status}`);
        setActionError(null);
        applySnapshot(data);
      } catch (err) {
        const message = err instanceof Error ? err.message : String(err);
        setActionError(message); // inline pane error stays…
        onError?.(message); // …and the shell mirrors it as a bottom-right toast (ISS-008)
      } finally {
        setBusy(false);
      }
    },
    [applySnapshot, busy, onError],
  );
  if (loading && !state) {
    return (
@@ -165,13 +134,6 @@ export default function RightPane({ state, loading, applySnapshot, onHover, onEr
  const clockMs = state.simState.clockMs;
  const open = state.packages.filter((p) => p.status === 'open');
  // On board (v0.12.0): every plane that carries cargo or is mid-flight gets a block —
  // its loaded/expired packages with fly-to-destination + abandon controls, and flying
  // planes show their current leg.
  const onboard = state.planes.filter(
    (p) => p.status === 'flying' || slotsUsedFor(state, p.id) > 0,
  );
  const catalog = state.catalog;
  const buyEntry = catalog.find((e) => e.model === buyModelId) ?? catalog[0] ?? null;
@@ -182,7 +144,6 @@ export default function RightPane({ state, loading, applySnapshot, onHover, onEr
    state.planes.find((p) => p.id === refuelPlaneId && p.status === 'available' && p.fuel < p.maxFuel) ??
    refuelable[0] ??
    null;
  // Previews computed client-side from the snapshot's catalog + economy constants (v0.10.0).
  const sellEntry = sellPlane ? catalog.find((e) => e.model === sellPlane.model) : undefined;
  const sellPayout = sellEntry ? Math.round(sellEntry.price * state.sellFraction * 100) / 100 : null;
@@ -238,92 +199,7 @@ export default function RightPane({ state, loading, applySnapshot, onHover, onEr
        )}
      </section>
-      <section className="pane-section">
+      {/* ISS-021 (v0.20.0): the On board section moved to the left pane (between Fleet and Time). */}
        <h3 className="pane-heading">On board</h3>
        {onboard.length === 0 ? (
          <p className="pane-muted">Nothing on board.</p>
        ) : (
          onboard.map((plane) => {
            const cargo = state.packages.filter(
              (pkg) => pkg.planeId === plane.id && (pkg.status === 'loaded' || pkg.status === 'expired'),
            );
            return (
              // ISS-002: hovering the on-board block (including its cargo rows) highlights the plane.
              // Handlers live only on the outer div — React's enter/leave don't fire when moving to a
              // child, so this covers the whole block without flicker between sub-elements.
              <div
                key={plane.id}
                data-testid={`onboard-${plane.id}`}
                className="onboard-block"
                onMouseEnter={() => onHover({ kind: 'plane', id: plane.id })}
                onMouseLeave={() => onHover(null)}
              >
                <div className="contract-main">
                  <span className="plane-model">{planeName(plane)}</span>
                  {plane.status === 'flying' ? (
                    <>
                      <span className="plane-status status-flying">in flight</span>
                      {plane.destName && (
                        <span data-testid={`plane-leg-${plane.id}`} className="contract-route">
                          {plane.locationName} → {plane.destName}
                        </span>
                      )}
                    </>
                  ) : (
                    <span className="plane-status status-available">{plane.locationIcao}</span>
                  )}
                </div>
                {cargo.map((pkg) => {
                  const penalty = abandonPenalty(pkg, clockMs);
                  return (
                    <div key={pkg.id} data-testid={`onboard-package-${pkg.id}`} className="contract-row">
                      <div className="contract-main">
                        <button
                          type="button"
                          data-testid={`refuel-for-${pkg.id}`}
                          className="pane-btn"
                          disabled={busy || plane.status !== 'available'}
                          onClick={() => void runAction(`/api/planes/${plane.id}/refuel`, { mode: 'forFlight', packageId: pkg.id })}
                        >
                          Refuel
                        </button>
                        <button
                          type="button"
                          data-testid={`fly-to-${pkg.id}`}
                          className="pane-btn"
                          disabled={busy || plane.status !== 'available'}
                          onClick={() => void runAction(`/api/planes/${plane.id}/fly`, { destIcao: pkg.destIcao })}
                        >
                          Fly to {pkg.destName}
                        </button>
                        <button
                          type="button"
                          data-testid={`abandon-${pkg.id}`}
                          className="pane-btn"
                          disabled={busy || plane.status !== 'available'}
                          onClick={() => void runAction(`/api/packages/${pkg.id}/abandon`)}
                        >
                          Abandon{' '}
                          <span data-testid={`abandon-penalty-${pkg.id}`}>−{formatCash(penalty)}</span>
                        </button>
                      </div>
                      <div className="contract-sub">
                        <span className="contract-route">{pkg.originName} → {pkg.destName}</span>
                        <span>{formatCash(pkg.reward)}</span>
                        {pkg.status === 'expired' ? (
                          <span data-testid={`onboard-expired-${pkg.id}`}>expired</span>
                        ) : (
                          <span>{formatDeadlineRelative(pkg.deadlineSimTime, clockMs)}</span>
                        )}
                      </div>
                    </div>
                  );
                })}
              </div>
            );
          })
        )}
      </section>
      <section className="pane-section">
        <h3 className="pane-heading">Market</h3>
@@ -422,6 +298,8 @@ export default function RightPane({ state, loading, applySnapshot, onHover, onEr
            Refuel to full
          </button>
        </div>
        {/* ISS-023 (v0.21.0): the Relocate row moved to the left pane's "Relocate" section. */}
      </section>
      {actionError && <p data-testid="right-error" className="pane-error">{actionError}</p>}
@@ -1,7 +1,12 @@
 // ISS-002 — what a side-panel hover highlights on the map (v0.15.0): a plane marker
 // (+ its route leg if flying) or both endpoint airports of an open package. The shell
 // owns this state and passes it to <Map>; panes report it via their onHover callback.
 // ISS-022/025/027 (v0.22.0): any target carrying two ICAOs also makes the map draw the full
 // great-circle trace between them — package hovers carry origin→dest, 'route' hovers (the
 // Relocate panel) carry fromIcao→toIcao; a package hover may additionally name its plane so
 // that plane's halo stays lit alongside the trace.
 export type HoverTarget =
  | { kind: 'plane'; id: string }
-  | { kind: 'package'; originIcao: string; destIcao: string };
+  | { kind: 'package'; originIcao: string; destIcao: string; planeId?: string }
  | { kind: 'route'; fromIcao: string; toIcao: string };
@@ -3,7 +3,8 @@ import { expect, test } from '@playwright/test';
 // v0.12.0 package model against the live origin (https://flight.dev.kkhost.pl):
 // the full core loop through the UI — hook creates a short package at EDDF → Load
-// via the right pane → click its destination in the on-board list → fly at 1000× →
+// via the right pane → click its destination in the on-board list (left pane since
 // v0.20.0, ISS-021) → fly at 1000× →
 // arrival delivers EXACTLY the reward + rep; abandon deducts exactly the formula
 // penalty while grounded; expired packages deliver/abandon with no reward and no
 // penalty. Mirrors lib/game/penalty.ts for exact-value assertions.
@@ -117,6 +118,9 @@ async function flyHomeViaApi(page: Page): Promise<void> {
    plane = s.planes.find((p) => p.id === 'plane-starter')!;
  }
  if (plane.locationIcao !== HUB) {
    // ISS-011: the landing above auto-slown the sim to 1× — re-set SCALE so the return leg
    // fast-forwards instead of taking real-time hours.
    await setScale(page, SCALE);
    const res = await page.request.post(`/api/planes/${plane.id}/fly`, { data: { destIcao: HUB } });
    expect(res.ok()).toBeTruthy(); // repositioning needs no package (v0.12.0 manual flight)
    await expect.poll(async () => ((await getState(page)).planes.find((p) => p.id === 'plane-starter')!.locationIcao), { timeout: 240_000 }).toBe(HUB);
@@ -221,7 +225,9 @@ test('full core loop via UI: load → fly to destination → exact reward + rep
  const refuelCost = Math.round((afterRefuel.maxFuel - landed.fuel) * FUEL_PRICE_PER_L * 100) / 100;
  expect(s.account.cash).toBeCloseTo(before.account.cash + pkg.reward - refuelCost, 6);
-  // Restore: fly home (repositioning — no package needed in the v0.12.0 model).
+  // Restore: fly home (repositioning — no package needed in the v0.12.0 model). ISS-011: the
  // arrival above auto-slown the sim to 1×, so re-set SCALE for the return leg.
  await setScale(page, SCALE);
  const homeRes = await page.request.post(`/api/planes/${planeId}/fly`, { data: { destIcao: HUB } });
  expect(homeRes.ok()).toBeTruthy();
  await expect.poll(async () => ((await getState(page)).planes.find((p) => p.id === planeId)!.locationIcao), { timeout: 120_000 }).toBe(HUB);
@@ -308,8 +314,10 @@ test('expired packages deliver and abandon with no reward and no penalty', async
  expect(s.packages.find((p) => p.id === pkgB.id)!.status).toBe('abandoned');
  expect(s.account.cash).toBe(cashBeforeAbandon); // free — expired abandons cost nothing
-  // Restore: refuel + fly home (scale is still SCALE from the expiry wait above).
+  // Restore: refuel + fly home. ISS-011: the LEMD arrival above auto-slown the sim to 1×, so
  // re-set SCALE for the return leg (the expiry wait's scale no longer persists past a landing).
  await page.request.post('/api/planes/plane-starter/refuel');
  await setScale(page, SCALE);
  const homeRes = await page.request.post('/api/planes/plane-starter/fly', { data: { destIcao: HUB } });
  expect(homeRes.ok()).toBeTruthy();
  await expect.poll(async () => ((await getState(page)).planes.find((p) => p.id === 'plane-starter')!.locationIcao), { timeout: 240_000 }).toBe(HUB);
@@ -347,7 +355,9 @@ test('load and fly validation paths (404 / 409 / 400)', async ({ page }) => {
  res = await page.request.post(`/api/packages/${pkg.id}/abandon`);
  expect(res.status()).toBe(409);
-  // Fly home from the hop so the fuel section starts at the hub.
+  // Fly home from the hop so the fuel section starts at the hub. ISS-011: the hop arrival above
  // auto-slown the sim to 1×, so re-set SCALE for this leg.
  await setScale(page, SCALE);
  res = await page.request.post('/api/planes/plane-starter/fly', { data: { destIcao: HUB } });
  expect(res.ok()).toBeTruthy();
  await expect.poll(async () => ((await getState(page)).planes.find((p) => p.id === 'plane-starter')!.locationIcao), { timeout: 120_000 }).toBe(HUB);
@@ -370,6 +380,8 @@ test('load and fly validation paths (404 / 409 / 400)', async ({ page }) => {
  const atFar = sFar.planes.find((p) => p.id === 'plane-starter')!;
  expect(atFar.locationIcao).toBe(FAR);
  // The return leg fits: the weighted burn over it is less than what's left in the tank.
  // ISS-011: the FAR arrival above auto-slown the sim to 1×, so re-set SCALE for this leg.
  await setScale(page, SCALE);
  const backRes = await page.request.post('/api/planes/plane-starter/fly', { data: { destIcao: HUB } });
  expect(backRes.ok()).toBeTruthy();
  await expect.poll(async () => ((await getState(page)).planes.find((p) => p.id === 'plane-starter')!.locationIcao), { timeout: 240_000 }).toBe(HUB);
@@ -0,0 +1,130 @@
 import type { Page } from '@playwright/test';
 import { expect, test } from '@playwright/test';
 // v0.19.0 — ISS-011: when the LAST plane lands (no plane remains in flight) the sim auto-slows
 // to 1×, server-side and persisted on the sim_state row so the UI slider reflects it on the next
 // snapshot. Arrival-triggered by design: a grounded fleet at high scale is left alone, there is no
 // auto-restore — the player speeds up manually again (asserted below).
 const SCALE = 1000; // fastest sim speed — top of the v0.14.0 ladder (same convention as e2e/sim.spec.ts)
 const HUB = 'EDDF'; // Frankfurt Main — the seeded starter plane's home base (lib/game/seed.ts)
 interface SimState {
  clockMs: number;
  timeScale: number;
  paused: boolean;
 }
 interface StateBody {
  simState: SimState;
  planes: Array<{ id: string; status: string; locationIcao: string; destIcao: string | null }>;
 }
 async function getState(page: Page): Promise<StateBody> {
  const res = await page.request.get('/api/state');
  expect(res.ok()).toBeTruthy();
  return (await res.json()) as StateBody;
 }
 async function postSim(page: Page, body: Record<string, unknown>): Promise<void> {
  const res = await page.request.post('/api/sim', { data: body });
  expect(res.status()).toBe(200);
 }
 // Set the time scale and VERIFY from the response that it stuck — if something external ever
 // resets the live instance's controls mid-test, fail loudly here instead of timing out later.
 async function setScale(page: Page, scale: number): Promise<void> {
  const res = await page.request.post('/api/sim', { data: { timeScale: scale } });
  expect(res.status()).toBe(200);
  const body = (await res.json()) as SimState;
  expect(body.timeScale, `timeScale should be ${scale} after POST /api/sim`).toBe(scale);
 }
 // Closest airport to the hub from /api/airports → shortest possible leg (fastest e2e flight).
 async function nearestToHub(page: Page): Promise<{ icao: string }> {
  const res = await page.request.get('/api/airports');
  expect(res.ok()).toBeTruthy();
  const fc = (await res.json()) as { features: Array<{ properties: { icao: string; lat: number; lon: number } }> };
  const hub = fc.features.find((f) => f.properties.icao === HUB)!.properties;
  let nearest = fc.features.filter((f) => f.properties.icao !== HUB)[0].properties;
  for (const f of fc.features) {
    if (f.properties.icao === HUB) continue;
    const d = Math.hypot(f.properties.lat - hub.lat, f.properties.lon - hub.lon);
    const dn = Math.hypot(nearest.lat - hub.lat, nearest.lon - hub.lon);
    if (d < dn) nearest = f.properties;
  }
  return { icao: nearest.icao };
 }
 // Self-heal helper (same pattern as e2e/relocation.spec.ts): let any in-flight leg finish and
 // reposition plane-starter home via the API so every test starts from the canonical state even
 // after an interrupted previous run.
 async function flyHomeViaApi(page: Page): Promise<void> {
  let s = await getState(page);
  let plane = s.planes.find((p) => p.id === 'plane-starter')!;
  if (plane.status === 'flying' || plane.locationIcao !== HUB) {
    // Fast-forward any leftover leg / repositioning flight (~20 s real time worst case at 1000×).
    await setScale(page, SCALE);
  }
  if (plane.status === 'flying') {
    // Let the in-flight leg finish before repositioning. While flying, locationIcao stays at the
    // DEPARTURE airport — re-read state after landing before deciding whether a repositioning
    // flight is needed.
    await expect.poll(async () => ((await getState(page)).planes.find((p) => p.id === 'plane-starter')!.status), { timeout: 240_000 }).toBe('available');
    s = await getState(page);
    plane = s.planes.find((p) => p.id === 'plane-starter')!;
  }
  if (plane.locationIcao !== HUB) {
    // ISS-011: the landing above auto-slown the sim to 1× — re-set SCALE so the return leg
    // fast-forwards instead of taking real-time hours.
    await setScale(page, SCALE);
    const res = await page.request.post(`/api/planes/${plane.id}/fly`, { data: { destIcao: HUB } });
    expect(res.ok()).toBeTruthy(); // repositioning needs no package (v0.12.0 manual flight)
    await expect.poll(async () => ((await getState(page)).planes.find((p) => p.id === 'plane-starter')!.locationIcao), { timeout: 240_000 }).toBe(HUB);
  }
 }
 // Self-heal in CLEANUP (afterEach): the test deliberately leaves plane-starter at the far end, so
 // fast-forward + reposition home here; then restore scale=1 / unpaused for later specs.
 test.afterEach(async ({ page }) => {
  await flyHomeViaApi(page);
  await postSim(page, { timeScale: 1, paused: false });
 });
 test.describe.configure({ mode: 'serial' }); // shared live DB — order matters within this file
 test('auto-slow to 1× when the last plane lands; manual speed-up still works (ISS-011)', async ({ page }) => {
  test.setTimeout(300_000); // self-heal (worst case ~20 s at 1000×) + one short leg
  await flyHomeViaApi(page); // deterministic: the starter sits grounded at EDDF
  const nearest = await nearestToHub(page);
  // Set 1000× via the API and verify it stuck.
  await setScale(page, SCALE);
  // Dispatch plane-starter on the shortest leg from its hub (repositioning — no package needed).
  const flyRes = await page.request.post('/api/planes/plane-starter/fly', { data: { destIcao: nearest.icao } });
  expect(flyRes.status()).toBe(200);
  // Wait for the landing…
  let landedBody: StateBody | undefined;
  await expect
    .poll(async () => {
      const b = await getState(page);
      const p = b.planes.find((x) => x.id === 'plane-starter')!;
      if (p.status === 'available' && p.locationIcao === nearest.icao) landedBody = b;
      return !!landedBody;
    }, { timeout: 120_000, message: `waiting for plane-starter to land at ${nearest.icao}` })
    .toBe(true);
  // …and the server has auto-slown to 1× — persisted on sim_state, so this very snapshot shows it.
  expect(landedBody!.simState.timeScale).toBe(1);
  // Manual override still works: POST /api/sim {timeScale: 1000} → confirmed by the response…
  const post = await page.request.post('/api/sim', { data: { timeScale: SCALE } });
  expect(post.status()).toBe(200);
  expect(((await post.json()) as SimState).timeScale).toBe(SCALE);
  // …and by a fresh snapshot (no auto-restore of the previous scale — and no re-slow either,
  // since nothing is in flight: the trigger is arrival-based, not idle-enforcement).
  expect((await getState(page)).simState.timeScale).toBe(SCALE);
 });
@@ -6,6 +6,10 @@ import { test, expect, type Page } from '@playwright/test';
 // highlight layers (planes-highlight / routes-highlight / airports-highlight), each filtered
 // to match nothing until a hover sets the filter — asserted here via window.__flightMap's
 // queryRenderedFeatures, same pattern as e2e/map.spec.ts and e2e/map-interactions.spec.ts.
 // ISS-022/025/027 (v0.22.0): any hover carrying two endpoints ALSO draws the full great-circle
 // trace between them in a fourth top-most layer (`hover-route`, dashed) — job-list rows, on-board
 // cargo rows and the Relocate section; the relocate preview rings only its TARGET airport, which
 // additionally gets a distinct green ring in `airports-target-highlight` (ISS-022).
 const SCALE = 1000; // fastest sim speed (v0.14.0 ladder top) — keeps flights to seconds of real time
 const HUB = 'EDDF'; // must match HUB_ICAO in lib/game/seed.ts
@@ -89,6 +93,9 @@ async function flyHomeViaApi(page: Page): Promise<void> {
      .toBe(true);
  }
  if (starter.locationIcao !== HUB) {
    // ISS-011: the landing above auto-slown the sim to 1× — re-set SCALE so the return leg
    // fast-forwards instead of taking real-time hours.
    await setScale(page, SCALE);
    const res = await page.request.post('/api/planes/plane-starter/fly', { data: { destIcao: HUB } });
    expect(res.status()).toBe(200); // repositioning needs no package (v0.12.0 manual flight)
    await expect
@@ -110,12 +117,30 @@ async function waitForAirportCount(page: Page): Promise<void> {
 }
 // Rendered features of the given layers in the current viewport, [] until the map exists.
-function renderedFeatures(page: Page, layers: string[]) {
+function renderedFeatures(
  page: Page,
  layers: string[],
 ): Promise<Array<{ type?: unknown; id?: unknown; properties?: unknown; geometry?: unknown }>> {
  return page.evaluate((ls: string[]) => {
    const m = (window as any).__flightMap;
    if (!m) return [];
    try {
-      return m.queryRenderedFeatures(undefined, { layers: ls });
+      // queryRenderedFeatures returns live GeoJSONFeature instances whose `geometry` is a lazy
      // PROTOTYPE getter — Playwright's evaluate serialization copies only own enumerable props,
      // so geometry silently vanishes across the page boundary (CI runs #69–#71: strict-equality
      // timeouts → TypeError on f.geometry.coordinates → filter-found-nothing timeouts). Map to
      // plain objects IN-PAGE so the getter is evaluated before serialization.
      return (m.queryRenderedFeatures(undefined, { layers: ls }) as Array<{
        type?: unknown;
        id?: unknown;
        properties?: unknown;
        geometry?: unknown;
      }>).map((f) => ({
        type: f.type,
        id: f.id,
        properties: f.properties,
        geometry: f.geometry,
      }));
    } catch {
      return [];
    }
@@ -157,6 +182,56 @@ async function fitToAirports(page: Page, icaos: string[]): Promise<void> {
  await page.waitForTimeout(300);
 }
 // [lon, lat] of an airport from the same /api/airports dataset the map draws its traces from.
 async function airportLonLat(page: Page, icao: string): Promise<[number, number]> {
  const fc = (await (await page.request.get('/api/airports')).json()) as {
    features: Array<{ properties: { icao: string; lat: number; lon: number } }>;
  };
  const f = fc.features.find((x) => x.properties.icao === icao);
  if (!f) throw new Error(`airport ${icao} not found in /api/airports`);
  return [f.properties.lon, f.properties.lat];
 }
 // ISS-022/025/027: the hover-route layer must hold the great-circle trace from origin to dest.
 // MapLibre stores GeoJSON geometry in per-tile INTEGER grids and clips long lines across tiles, so
 // queryRenderedFeatures returns ONE FEATURE PER TILE the line crosses (the 1420 km EDDF→LEMD leg is
 // 4 segments at z=4 / 5 at z=5) with coordinates quantized to the rendered zoom's grid — up to ~half
 // a grid step off (~0.001° observed at z≥4, ~0.02° worst case at z=0). A strict single-feature +
 // exact-coords comparison can therefore never match even when the line is drawn correctly (CI run #69:
 // all three hover-route timeouts while the trace was visibly rendered), so we accept any number of
 // segments and require some segment to START within EPS of `from` and some to END within EPS of `to`.
 // The true endpoints survive clipping verbatim in whichever tile contains them. (CI runs #69–#71:
 // features could arrive WITHOUT a usable geometry because Playwright's evaluate serialization drops
 // the lazy prototype getter — not MapLibre artifacts; renderedFeatures now maps to plain objects
 // in-page.) The helper still filters to real LineString segments and treats "none yet" as keep-polling
 // instead of throwing inside the poll callback. Call fitToAirports([from, to]) first — rendered
 // features are viewport-scoped.
 const HOVER_ROUTE_EPS_DEG = 0.05; // ~5 km: above worst-case quantization at any zoom, below the distance between any two EU airports
 async function expectHoverRoute(page: Page, fromIcao: string, toIcao: string): Promise<void> {
  const [from, to] = await Promise.all([airportLonLat(page, fromIcao), airportLonLat(page, toIcao)]);
  const near = (a: [number, number], b: [number, number]) =>
    Math.abs(a[0] - b[0]) <= HOVER_ROUTE_EPS_DEG && Math.abs(a[1] - b[1]) <= HOVER_ROUTE_EPS_DEG;
  await expect.poll(async () => {
    const feats = (await renderedFeatures(page, ['hover-route'])) as Array<{ geometry?: { type: string; coordinates: [number, number][] } }>;
    // Features are plain objects with in-page-evaluated geometry (see renderedFeatures). The filter
    // guards against degenerate/zero-length clipped segments and keeps this poll callback total — a
    // throw inside expect.poll fails the test instantly instead of retrying. "None yet" → keep polling.
    const segs = feats.filter(
      (f): f is { geometry: { type: 'LineString'; coordinates: [number, number][] } } =>
        !!f.geometry && f.geometry.type === 'LineString' && Array.isArray(f.geometry.coordinates) && f.geometry.coordinates.length >= 2,
    );
    if (!segs.length) return false;
    // The line may be clipped into several per-tile segments — check the endpoints across all of them.
    const startsAtFrom = segs.some((f) => near(f.geometry.coordinates[0], from));
    const endsAtTo = segs.some((f) => {
      const c = f.geometry.coordinates;
      return near(c[c.length - 1], to);
    });
    return startsAtFrom && endsAtTo;
  }, { timeout: 15_000, message: `waiting for the hover-route line ${fromIcao} → ${toIcao}` }).toBe(true);
 }
 test('hovering a fleet row highlights the plane on the map', async ({ page }) => {
  test.setTimeout(300_000); // self-heal can take minutes after an interrupted run
  await flyHomeViaApi(page); // deterministic: the starter sits at EDDF, inside the initial view
@@ -227,6 +302,7 @@ test('hovering an open package highlights its endpoint airports', async ({ page
  await fitToAirports(page, [HUB, DEST]);
  expect(await renderedFeatures(page, ['airports-highlight'])).toHaveLength(0);
  expect(await renderedFeatures(page, ['airports-target-highlight'])).toHaveLength(0);
  await row.hover();
  await expect.poll(async () => {
@@ -235,11 +311,129 @@ test('hovering an open package highlights its endpoint airports', async ({ page
  }, { timeout: 15_000, message: 'waiting for the airports-highlight layer to show both endpoints' })
    .toBe(JSON.stringify([HUB, DEST].sort()));
  // ISS-022 (v0.22.0): the ENTIRE trace is drawn too — a great-circle line from origin to dest,
  // not just the endpoint rings.
  await expectHoverRoute(page, HUB, DEST);
  // And the TARGET airport gets its own distinct-colored ring — only the destination, never the origin.
  await expect.poll(async () => {
    const feats = (await renderedFeatures(page, ['airports-target-highlight'])) as Array<{ properties: Record<string, unknown> }>;
    return JSON.stringify(feats.map((f) => f.properties.icao).sort());
  }, { timeout: 15_000, message: 'waiting for the airports-target-highlight layer to ring only the destination' })
    .toBe(JSON.stringify([DEST]));
  await unhover(page);
  await expect.poll(async () => (await renderedFeatures(page, ['airports-highlight'])).length, {
    timeout: 15_000,
    message: 'waiting for the highlight to clear after mouseleave',
  }).toBe(0);
  await expect.poll(async () => (await renderedFeatures(page, ['hover-route'])).length, {
    timeout: 15_000,
    message: 'waiting for the hover route trace to clear after mouseleave',
  }).toBe(0);
  await expect.poll(async () => (await renderedFeatures(page, ['airports-target-highlight'])).length, {
    timeout: 15_000,
    message: 'waiting for the target ring to clear after mouseleave',
  }).toBe(0);
 });
 test('hovering an on-board cargo row draws its trace and keeps the plane halo', async ({ page }) => {
  test.setTimeout(300_000); // self-heal can take minutes after an interrupted run
  await flyHomeViaApi(page); // deterministic: the starter sits grounded at EDDF
  // Load a package onto the grounded starter so it shows up in the On board section.
  const pkg = await createPackage(page, HUB, DEST);
  const load = await page.request.post(`/api/packages/${pkg.id}/load`, { data: { planeId: 'plane-starter' } });
  expect(load.status()).toBe(200);
  await page.goto('/');
  await waitForAirportCount(page);
  const row = page.locator(`[data-testid="onboard-package-${pkg.id}"]`);
  await expect(row, 'the loaded package appears in the On board section').toBeVisible({ timeout: 15_000 });
  // Both endpoints must be in-viewport for queryRenderedFeatures to see the trace.
  await fitToAirports(page, [HUB, DEST]);
  await row.hover();
  // ISS-025 (v0.22.0): same full origin→dest trace as job-list rows…
  await expectHoverRoute(page, HUB, DEST);
  // …and the package's plane keeps its halo lit (the hover carries planeId).
  await expect.poll(async () => {
    const feats = (await renderedFeatures(page, ['planes-highlight'])) as Array<{ properties: Record<string, unknown> }>;
    return feats.length > 0 && feats[0].properties.id === 'plane-starter';
  }, { timeout: 15_000, message: 'waiting for the planes-highlight layer to show plane-starter' }).toBe(true);
  await unhover(page);
  await expect.poll(async () => (await renderedFeatures(page, ['hover-route'])).length, {
    timeout: 15_000,
    message: 'waiting for the hover route trace to clear after mouseleave',
  }).toBe(0);
  await expect.poll(async () => (await renderedFeatures(page, ['planes-highlight'])).length, {
    timeout: 15_000,
    message: 'waiting for the highlight to clear after mouseleave',
  }).toBe(0);
  // Leave the instance clean: abandon the loaded package so later specs start with an empty starter.
  const res = await page.request.post(`/api/packages/${pkg.id}/abandon`);
  expect(res.status()).toBe(200);
 });
 test('hovering the Relocate section previews the planned route and target airport', async ({ page }) => {
  test.setTimeout(300_000); // self-heal can take minutes after an interrupted run
  await flyHomeViaApi(page); // deterministic: the starter sits grounded at EDDF
  await page.goto('/');
  await waitForAirportCount(page);
  const section = page.getByTestId('relocate-section');
  await expect(section, 'the Relocate section is visible').toBeVisible({ timeout: 15_000 });
  // LeftPane fetches /api/airports on its own (separate from the map header count) — wait for
  // the destination options to populate before selecting.
  await expect(page.getByTestId('relocate-dest').locator(`option[value="${DEST}"]`)).toHaveCount(1, { timeout: 15_000 });
  // Pick the starter + a known destination explicitly (the effective-selection defaults already do this).
  await page.getByTestId('relocate-plane').selectOption('plane-starter');
  await page.getByTestId('relocate-dest').selectOption(DEST);
  // Both endpoints must be in-viewport for queryRenderedFeatures to see the trace.
  await fitToAirports(page, [HUB, DEST]);
  expect(await renderedFeatures(page, ['hover-route'])).toHaveLength(0);
  expect(await renderedFeatures(page, ['airports-highlight'])).toHaveLength(0);
  expect(await renderedFeatures(page, ['airports-target-highlight'])).toHaveLength(0);
  // ISS-027 (v0.22.0): hovering the panel with a plane + destination selected previews the flight —
  // dashed trace from the plane's airport to the destination…
  await section.hover();
  await expectHoverRoute(page, HUB, DEST);
  // …and rings ONLY the target airport (the origin stays unmarked).
  await expect.poll(async () => {
    const feats = (await renderedFeatures(page, ['airports-highlight'])) as Array<{ properties: Record<string, unknown> }>;
    return JSON.stringify(feats.map((f) => f.properties.icao).sort());
  }, { timeout: 15_000, message: 'waiting for the airports-highlight layer to ring only the target' })
    .toBe(JSON.stringify([DEST]));
  // …plus the destination's own distinct-colored ring (ISS-022) — same single icao.
  await expect.poll(async () => {
    const feats = (await renderedFeatures(page, ['airports-target-highlight'])) as Array<{ properties: Record<string, unknown> }>;
    return JSON.stringify(feats.map((f) => f.properties.icao).sort());
  }, { timeout: 15_000, message: 'waiting for the airports-target-highlight layer to ring only the target' })
    .toBe(JSON.stringify([DEST]));
  await unhover(page);
  await expect.poll(async () => (await renderedFeatures(page, ['hover-route'])).length, {
    timeout: 15_000,
    message: 'waiting for the hover route trace to clear after mouseleave',
  }).toBe(0);
  await expect.poll(async () => (await renderedFeatures(page, ['airports-highlight'])).length, {
    timeout: 15_000,
    message: 'waiting for the highlight to clear after mouseleave',
  }).toBe(0);
  await expect.poll(async () => (await renderedFeatures(page, ['airports-target-highlight'])).length, {
    timeout: 15_000,
    message: 'waiting for the target ring to clear after mouseleave',
  }).toBe(0);
 });
 test('hovering an on-board block of a flying plane highlights its route', async ({ page }) => {
@@ -291,6 +485,8 @@ test('hovering an on-board block of a flying plane highlights its route', async
    }, { timeout: 120_000, message: `waiting for plane-starter to land at ${DEST}` })
    .toBe(true);
  // ISS-011: the arrival above auto-slown the sim to 1×, so re-set SCALE for this leg.
  await setScale(page, SCALE);
  const home = await page.request.post('/api/planes/plane-starter/fly', { data: { destIcao: HUB } });
  expect(home.status()).toBe(200);
  await expect
@@ -69,6 +69,12 @@ test('left pane renders wallet, reputation and the starter fleet at Frankfurt',
  // Sim clock renders (UTC wall-clock of the game time).
  await expect(page.getByTestId('sim-clock')).toContainText(/UTC/);
  // ISS-021 (v0.20.0): the On board section moved to the left pane (between Fleet and Time) —
  // its heading renders here…
  await expect(page.getByTestId('left-pane').getByRole('heading', { name: 'On board', exact: true })).toBeVisible();
  // …and no longer in the right pane.
  await expect(page.getByTestId('right-pane').getByRole('heading', { name: 'On board', exact: true })).toHaveCount(0);
 });
 test('time controls: pause freezes the sim and the ladder slider sets timeScale', async ({ page }) => {
@@ -0,0 +1,189 @@
 import type { Page } from '@playwright/test';
 import { expect, test } from '@playwright/test';
 // v0.18.0 — ISS-010: relocating a GROUNDED (empty) plane to any airport against the live origin.
 // Two UI surfaces drive the EXISTING POST /api/planes/{id}/fly endpoint (pure repositioning has
 // been allowed since v0.12.0 — no API change): the left-pane Relocate section (ISS-023, v0.21.0)
 // (relocate-plane / relocate-dest / relocate-go) and the Relocate row inside the airport popup on
 // the map (airport-popup-plane / airport-popup-relocate). Marker-size regression is covered by
 // the existing e2e/map.spec.ts click tests, not here.
 const SCALE = 1000; // fastest sim speed (v0.14.0 ladder top) — keeps cleanup flights to seconds of real time
 const HUB = 'EDDF'; // Frankfurt Main — the seeded starter plane's home base (lib/game/seed.ts)
 // LFRS Nantes Atlantique — same isolated marker as e2e/map.spec.ts: its nearest neighbour is ~78 px
 // away at the initial zoom, so a click on its projected center cannot hit another circle.
 const POPUP_AIRPORT = { icao: 'LFRS', lon: -1.61073, lat: 47.153198 };
 interface StateBody {
  planes: Array<{ id: string; status: string; locationIcao: string; destIcao: string | null }>;
 }
 async function getState(page: Page): Promise<StateBody> {
  const res = await page.request.get('/api/state');
  expect(res.ok()).toBeTruthy();
  return (await res.json()) as StateBody;
 }
 async function postSim(page: Page, body: Record<string, unknown>): Promise<void> {
  const res = await page.request.post('/api/sim', { data: body });
  expect(res.ok()).toBeTruthy();
 }
 // Set the time scale and VERIFY from the response that it stuck — if something external ever
 // resets the live instance's controls mid-test, fail loudly here instead of timing out later.
 async function setScale(page: Page, scale: number): Promise<void> {
  const res = await page.request.post('/api/sim', { data: { timeScale: scale } });
  expect(res.status()).toBe(200);
  const body = (await res.json()) as { timeScale: number };
  expect(body.timeScale, `timeScale should be ${scale} after POST /api/sim`).toBe(scale);
 }
 // Closest airport to the hub from /api/airports → shortest possible leg (fuel trivial).
 async function nearestToHub(page: Page): Promise<{ icao: string }> {
  const res = await page.request.get('/api/airports');
  expect(res.ok()).toBeTruthy();
  const fc = (await res.json()) as { features: Array<{ properties: { icao: string; lat: number; lon: number } }> };
  const hub = fc.features.find((f) => f.properties.icao === HUB)!.properties;
  let nearest = fc.features.filter((f) => f.properties.icao !== HUB)[0].properties;
  for (const f of fc.features) {
    if (f.properties.icao === HUB) continue;
    const d = Math.hypot(f.properties.lat - hub.lat, f.properties.lon - hub.lon);
    const dn = Math.hypot(nearest.lat - hub.lat, nearest.lon - hub.lon);
    if (d < dn) nearest = f.properties;
  }
  return { icao: nearest.icao };
 }
 // Self-heal helper (same pattern as e2e/actions.spec.ts): let any in-flight leg finish and
 // reposition plane-starter home via the API — repositioning needs no package (v0.12.0 manual
 // flight) — so every test starts from the canonical state even after an interrupted previous run.
 async function flyHomeViaApi(page: Page): Promise<void> {
  let s = await getState(page);
  let plane = s.planes.find((p) => p.id === 'plane-starter')!;
  if (plane.status === 'flying' || plane.locationIcao !== HUB) {
    // Fast-forward any leftover leg / repositioning flight (~20 s real time worst case at 1000×).
    await setScale(page, SCALE);
  }
  if (plane.status === 'flying') {
    // While flying, locationIcao stays at the DEPARTURE airport — re-read state after landing
    // before deciding whether a repositioning flight is needed.
    await expect.poll(async () => ((await getState(page)).planes.find((p) => p.id === 'plane-starter')!.status), { timeout: 240_000 }).toBe('available');
    s = await getState(page);
    plane = s.planes.find((p) => p.id === 'plane-starter')!;
  }
  if (plane.locationIcao !== HUB) {
    // ISS-011: the landing above auto-slown the sim to 1× — re-set SCALE so the return leg
    // fast-forwards instead of taking real-time hours.
    await setScale(page, SCALE);
    const res = await page.request.post(`/api/planes/${plane.id}/fly`, { data: { destIcao: HUB } });
    expect(res.ok()).toBeTruthy(); // repositioning needs no package (v0.12.0 manual flight)
    await expect.poll(async () => ((await getState(page)).planes.find((p) => p.id === 'plane-starter')!.locationIcao), { timeout: 240_000 }).toBe(HUB);
  }
 }
 // Self-heal in CLEANUP (afterEach): the tests deliberately leave plane-starter mid-flight, so
 // fast-forward + reposition home here; then restore scale=1 / unpaused for later specs.
 test.afterEach(async ({ page }) => {
  await flyHomeViaApi(page);
  await postSim(page, { timeScale: 1, paused: false });
 });
 test.describe.configure({ mode: 'serial' }); // shared live DB — order matters within this file
 test('left pane Relocate section relocates a grounded plane', async ({ page }) => {
  test.setTimeout(300_000); // self-heal (worst case ~20 s at 1000×) + one short leg
  await flyHomeViaApi(page);
  // Full tank before departure — a partially drained plane left by an earlier spec could not
  // afford the cleanup round trip.
  const refuel = await page.request.post('/api/planes/plane-starter/refuel');
  expect(refuel.ok()).toBeTruthy();
  const nearest = await nearestToHub(page);
  await page.goto('/');
  const planeSel = page.getByTestId('relocate-plane');
  await expect(planeSel).toBeVisible({ timeout: 15_000 }); // pane renders once the first snapshot lands
  await planeSel.selectOption('plane-starter');
  // Destination options come from the one-time /api/airports fetch (sorted by name) — selectOption
  // waits until the matching option exists, so this doubles as the load wait.
  const destSel = page.getByTestId('relocate-dest');
  await destSel.selectOption(nearest.icao);
  const goBtn = page.getByTestId('relocate-go');
  await expect(goBtn).toBeEnabled();
  await goBtn.click();
  // The click fires the fly POST asynchronously (runAction is fire-and-forget from the test's view),
  // so poll until it took effect on the server.
  await expect.poll(async () => {
    const b = await getState(page);
    const p = b.planes.find((x) => x.id === 'plane-starter')!;
    return p.status === 'flying' && p.destIcao === nearest.icao;
  }, { timeout: 15_000, message: 'waiting for the relocate click to take effect (status "flying" + dest set)' }).toBe(true);
 });
 test('airport popup offers Relocate options for grounded planes', async ({ page }) => {
  test.setTimeout(300_000); // self-heal (worst case ~20 s at 1000×) + one leg to LFRS
  await flyHomeViaApi(page);
  const refuel = await page.request.post('/api/planes/plane-starter/refuel');
  expect(refuel.ok()).toBeTruthy();
  await page.goto('/');
  // Wait until the airport count renders (airports loaded) and the map has a snapshot containing
  // the plane — the popup's Relocate row is built from that same latest snapshot.
  const countEl = page.getByTestId('airport-count');
  await expect.poll(async () => {
    const text = (await countEl.textContent()) ?? '';
    const m = text.match(/(\d+)/);
    return m ? parseInt(m[1], 10) : -1;
  }, { timeout: 15_000 }).toBeGreaterThan(0);
  await expect.poll(async () =>
    page.evaluate(() => {
      const m = (window as any).__flightMap;
      if (!m || !m.getSource('planes')) return false;
      try {
        return m.querySourceFeatures('planes').some((f: { properties?: Record<string, unknown> }) => f.properties?.id === 'plane-starter');
      } catch {
        return false; // source not ready yet — keep polling
      }
    }),
    { timeout: 15_000 },
  ).toBe(true);
  // Click the LFRS marker (projected center — same pattern as e2e/map.spec.ts). The constant is
  // passed AS AN ARGUMENT: the evaluate callback runs in the browser, where Node-scope values don't exist.
  const pt = await page.evaluate(({ lon, lat }) => {
    const map = (window as any).__flightMap;
    const p = map.project([lon, lat]);
    const rect = map.getContainer().getBoundingClientRect();
    return { x: rect.left + p.x, y: rect.top + p.y };
  }, POPUP_AIRPORT);
  await page.mouse.click(pt.x, pt.y);
  const popup = page.getByTestId('airport-popup');
  await expect(popup).toBeVisible();
  await expect(popup).toContainText(POPUP_AIRPORT.icao);
  // The Relocate row: a select of grounded planes + the button (disabled until one is picked).
  const planeSel = page.getByTestId('airport-popup-plane');
  await expect(planeSel).toBeVisible();
  // Target THE PLANE OPTION specifically — locator('option') also matches the placeholder and
  // trips strict mode (CI run #51).
  await expect(planeSel.locator('option[value="plane-starter"]')).toHaveText(/ATR 72-600 — EDDF/);
  const goBtn = page.getByTestId('airport-popup-relocate');
  await expect(goBtn).toBeDisabled(); // placeholder selected
  await planeSel.selectOption('plane-starter');
  await expect(goBtn).toBeEnabled();
  await goBtn.click();
  await expect.poll(async () => {
    const b = await getState(page);
    const p = b.planes.find((x) => x.id === 'plane-starter')!;
    return p.status === 'flying' && p.destIcao === POPUP_AIRPORT.icao;
  }, { timeout: 15_000, message: 'waiting for the popup relocate click to take effect (status "flying" + dest set)' }).toBe(true);
 });
@@ -2,8 +2,9 @@ import type { Page } from '@playwright/test';
 import { expect, test } from '@playwright/test';
 // v0.12.0 — right Jobs & Market pane against the live origin: open packages render with
-// names/reward/deadline and Load (UI click) binds one to the starter; the on-board list shows
+// names/reward/deadline and Load (UI click) binds one to the starter; the on-board list
-// loaded packages with fly-to-destination + abandon buttons (penalty preview from the same
+// (moved to the left pane in v0.20.0, ISS-021) shows loaded packages with fly-to-destination +
 // abandon buttons (penalty preview from the same
 // formula as the server); flying planes show their current leg; market buy/sell/refuel previews
 // match the catalog + economy constants exposed in /api/state. Packages are created via
 // POST /api/test/create-package (FLIGHT_TEST_HOOKS=1), same pattern as e2e/actions.spec.ts.
@@ -174,6 +175,9 @@ async function flyHomeViaApi(page: Page): Promise<void> {
      .toBe(true);
  }
  if (starter.locationIcao !== HUB) {
    // ISS-011: the landing above auto-slown the sim to 1× — re-set SCALE so the return leg
    // fast-forwards instead of taking real-time hours.
    await setScale(page, SCALE);
    const res = await page.request.post('/api/planes/plane-starter/fly', { data: { destIcao: HUB } });
    expect(res.status()).toBe(200); // repositioning needs no package (v0.12.0 manual flight)
    await expect
@@ -284,6 +288,8 @@ test('on-board list: fly-to-destination + abandon with penalty preview; flying p
  await expect(onboardRow).not.toBeVisible({ timeout: 15_000 });
  // Restore: fly home so the live instance stays in its onboarding state for the next run.
  // ISS-011: the arrival above auto-slown the sim to 1×, so re-set SCALE for this leg.
  await setScale(page, SCALE);
  const homeRes = await page.request.post('/api/planes/plane-starter/fly', { data: { destIcao: HUB } });
  expect(homeRes.status()).toBe(200);
  await expect
@@ -401,7 +407,9 @@ test('on-board row Refuel tops up just enough for the package leg; market button
  await expect(page.getByTestId('market-refuel')).toHaveText('Refuel to full');
  // Restore: fly home — pkg2's destination IS the hub, so it delivers on arrival. The tank holds
-  // exactly the leg requirement, so this also proves "just enough" is enough.
+  // exactly the leg requirement, so this also proves "just enough" is enough. ISS-011: the far-end
  // arrival above auto-slown the sim to 1×, so re-set SCALE for this leg.
  await setScale(page, SCALE);
  expect((await page.request.post('/api/planes/plane-starter/fly', { data: { destIcao: HUB } })).status()).toBe(200);
  await expect
    .poll(async () => (await getState(page)).planes.find((p) => p.id === 'plane-starter')?.locationIcao === HUB, {
@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest';
 import type { StateSnapshot } from './game/state';
-import { planesGeoJson, routesGeoJson, greatCircleArc, ROUTE_ARC_SEGMENTS, type AirportCoord } from './mapData';
+import { planesGeoJson, routesGeoJson, hoverRouteGeoJson, greatCircleArc, ROUTE_ARC_SEGMENTS, type AirportCoord } from './mapData';
 import { haversineKm } from './geo';
 const AIRPORTS = new Map<string, AirportCoord>([
@@ -140,6 +140,42 @@ describe('routesGeoJson (v0.12.0 — one line per flying plane\'s current leg)',
  });
 });
 describe('hoverRouteGeoJson (ISS-022/025/027 v0.22.0 — hover route trace)', () => {
  it('returns an empty collection for the no-hover "" sentinel', () => {
    expect(hoverRouteGeoJson('', '', AIRPORTS)).toEqual({ type: 'FeatureCollection', features: [] });
  });
  it('draws one great-circle line between two known airports with exact endpoints', () => {
    const fc = hoverRouteGeoJson('EDDF', 'EHAM', AIRPORTS);
    expect(fc.features).toHaveLength(1);
    expect(fc.features[0].properties).toEqual({ planeId: '' }); // pure overlay — no owning plane
    const coords = fc.features[0].geometry.coordinates;
    expect(coords.length).toBe(ROUTE_ARC_SEGMENTS + 1); // sampled arc, not a 2-point chord
    expect(coords[0]).toEqual([8.56, 50.03]); // EDDF [lon, lat] — exact endpoint
    expect(coords[coords.length - 1]).toEqual([4.76, 52.31]); // EHAM — exact endpoint
  });
  it('draws the same trace reversed (endpoints swapped, arc mirrored)', () => {
    const ab = hoverRouteGeoJson('EDDF', 'EHAM', AIRPORTS).features[0].geometry.coordinates;
    const ba = hoverRouteGeoJson('EHAM', 'EDDF', AIRPORTS).features[0].geometry.coordinates;
    expect(ba.length).toBe(ab.length);
    // The slerp is symmetric up to floating-point rounding (1 − t ≠ (N−t)/N bit-exactly), so
    // compare with a tolerance: each reversed point sits on the forward arc within ~1e-9 degrees.
    for (let i = 0; i < ab.length; i++) {
      expect(Math.abs(ba[i][0] - ab[ab.length - 1 - i][0])).toBeLessThan(1e-9);
      expect(Math.abs(ba[i][1] - ab[ab.length - 1 - i][1])).toBeLessThan(1e-9);
    }
  });
  it('returns an empty collection when the from airport is missing from the dataset', () => {
    expect(hoverRouteGeoJson('ZZZZ', 'EDDV', AIRPORTS)).toEqual({ type: 'FeatureCollection', features: [] });
  });
  it('returns an empty collection when the to airport is missing from the dataset', () => {
    expect(hoverRouteGeoJson('EDDF', 'ZZZZ', AIRPORTS)).toEqual({ type: 'FeatureCollection', features: [] });
  });
 });
 describe('greatCircleArc (v0.12.2 — curved route traces)', () => {
  it('samples >2 points with the endpoints exactly at the airport coords', () => {
    const arc = greatCircleArc(AIRPORTS.get('EDDF')!, AIRPORTS.get('EHAM')!);
@@ -85,6 +85,33 @@ export function greatCircleArc(from: AirportCoord, to: AirportCoord): [number, n
  return coords;
 }
 // ISS-022/025/027 (v0.22.0): the hover route trace — one great-circle LineString between two
 // airports, drawn top-most while a panel row hovers (job-list rows, on-board cargo rows, the
 // Relocate section). Empty collection when either endpoint is missing from the dataset — never
 // guessed; the '' sentinel (no hovered target) resolves to nothing and yields the same.
 export function hoverRouteGeoJson(
  fromIcao: string,
  toIcao: string,
  airportsByIcao: ReadonlyMap<string, AirportCoord>,
 ): FeatureCollection<MapLineFeature> {
  const from = airportsByIcao.get(fromIcao);
  const to = airportsByIcao.get(toIcao);
  if (!from || !to) return EMPTY_LINES;
  return {
    type: 'FeatureCollection',
    features: [
      {
        type: 'Feature',
        geometry: {
          type: 'LineString',
          coordinates: greatCircleArc(from, to),
        },
        properties: { planeId: '' }, // no owning plane — a pure hover overlay
      },
    ],
  };
 }
 // One LineString per FLYING plane — its current leg from locationIcao to dest_icao.
 // Grounded planes draw nothing; a flying plane missing either endpoint from the
 // dataset is skipped, never guessed. The line is sampled along the great circle
@@ -237,6 +237,80 @@ describe('deliverPackages (v0.12.0 arrival delivery)', () => {
  });
 });
 describe('auto-slow to 1× when the last plane lands (ISS-011)', () => {
  const FROM = 'EDDF';
  const TO = 'LEMD';
  // Starter flying EDDF→LEMD with departureSimTime set so its arrival is EXACTLY T0 —
  // any advancing tick past T0 finalizes it. timeScale is the value under test.
  async function setupLanding(name: string, timeScale: number) {
    const inst = await freshDb(name);
    const fc = await loadAirportsGeoJson();
    const from = fc.features.find((f) => f.properties.icao === FROM)!.properties;
    const to = fc.features.find((f) => f.properties.icao === TO)!.properties;
    const km = haversineKm(from.lat, from.lon, to.lat, to.lon);
    const type = PLANE_TYPES.atr72;
    await inst.db.update(schema.simState).set({ timeScale });
    await inst.db.update(schema.planes)
      .set({ status: 'flying', destIcao: TO, departureSimTime: T0 - travelMs(km, type.speedKmh), fuel: type.maxFuel })
      .where(eq(schema.planes.id, 'plane-starter'));
    return { inst, from, km, type };
  }
  it('last plane lands → stored timeScale becomes 1', async () => {
    const { inst } = await setupLanding('autoslow-last.db', 1000);
    vi.setSystemTime(T0 + 2_000); // one full clamped tick at scale 1000 → clock T0+2e6 ≥ arrival (T0)
    const sim = await tickOnce(inst);
    expect(sim.timeScale).toBe(1); // persisted on the sim_state row…
    expect((await inst.db.select().from(schema.simState))[0].timeScale).toBe(1); // …and visible to the next snapshot
    expect((await inst.db.select().from(schema.planes))[0].status).toBe('available'); // landing itself unchanged
  });
  it('a landing while another plane is still flying → no change', async () => {
    const { inst, from, type } = await setupLanding('autoslow-other.db', 1000);
    // A second plane on the same route departing at T0 — arrives far after this tick's clock.
    await inst.db.insert(schema.planes).values({
      id: 'p-b', model: 'atr72', status: 'flying', fuel: type.maxFuel, maxFuel: type.maxFuel,
      locationIcao: FROM, destIcao: TO, lat: from.lat, lon: from.lon, departureSimTime: T0,
    });
    vi.setSystemTime(T0 + 2_000);
    const sim = await tickOnce(inst);
    expect(sim.timeScale).toBe(1000); // p-b still in flight — no auto-slow
    const byId = new Map((await inst.db.select().from(schema.planes)).map((p) => [p.id, p.status]));
    expect(byId.get('plane-starter')).toBe('available'); // the starter did land…
    expect(byId.get('p-b')).toBe('flying'); // …but the fleet is not idle
  });
  it('already at 1× → stays 1', async () => {
    const { inst } = await setupLanding('autoslow-one.db', 1);
    vi.setSystemTime(T0 + 2_000); // one tick at scale 1 advances 2e3 game ms — past the T0 arrival
    const sim = await tickOnce(inst);
    expect(sim.timeScale).toBe(1);
    expect((await inst.db.select().from(schema.planes))[0].status).toBe('available');
  });
  it('paused sim with all planes landed → no change', async () => {
    const inst = await freshDb('autoslow-paused.db');
    // The fleet is fully grounded (the seeded starter) — a paused tick must not touch the
    // scale even though "no plane in flight" holds: the trigger requires a landing this tick.
    await inst.db.update(schema.simState).set({ timeScale: 1000, paused: true });
    vi.setSystemTime(T0 + 5_000);
    const sim = await tickOnce(inst);
    expect(sim.timeScale).toBe(1000); // no landing processed while paused → trigger never fires
    expect((await inst.db.select().from(schema.planes))[0].status).toBe('available');
  });
 });
 describe('spawnOpenPackages', () => {
  it('tops the market up to MARKET_TARGET_OPEN_PACKAGES using the shared seed builder', async () => {
    const inst = await freshDb('spawn.db');
@@ -71,17 +71,33 @@ export async function tickOnce(inst: GameDb): Promise<schema.SimStateRow> {
  const advanceMs = sim.paused ? 0 : Math.min(elapsed, MAX_TICK_ELAPSED_MS) * sim.timeScale;
  const clockMs = Math.round(sim.clockMs + advanceMs);
  let landedThisTick = 0;
  if (advanceMs > 0) {
    await expirePackages(inst, clockMs);
-    await deliverPackages(inst, clockMs);
+    // ISS-011: remember the landings so the tick can auto-slow to 1× when this was
    // the last plane in flight.
    landedThisTick = await deliverPackages(inst, clockMs);
    await spawnOpenPackages(inst, clockMs);
    // AFTER delivery on purpose: a plane that just landed gets work spawned
    // at its new location within the same tick.
    await spawnCoveragePackages(inst, clockMs);
  }
  const sets: Partial<Pick<schema.SimStateRow, 'clockMs' | 'lastRealTickMs' | 'timeScale'>> = {
    clockMs,
    lastRealTickMs: nowMs,
  };
  // Auto-slow (ISS-011): when ≥1 plane landed this tick and NO plane remains in flight,
  // drop the stored timeScale to 1× — persisted here so the UI slider reflects it on the
  // next snapshot. Arrival-triggered by design: a grounded fleet at high scale is left
  // alone (the player speeds up manually again; there is no auto-restore).
  if (landedThisTick > 0 && !sim.paused) {
    const flying = await inst.db.select().from(schema.planes).where(eq(schema.planes.status, 'flying'));
    if (flying.length === 0) sets.timeScale = MIN_TIME_SCALE;
  }
  // Persist lastRealTickMs even when nothing advanced — it is the tick anchor.
-  await inst.db.update(schema.simState).set({ clockMs, lastRealTickMs: nowMs });
+  await inst.db.update(schema.simState).set(sets);
  await persist(inst);
  const updated = (await inst.db.select().from(schema.simState))[0];
  if (!updated) throw new Error('sim_state row missing after tick');
@@ -0,0 +1,53 @@
 'use client';
 import { useCallback, useEffect, useState } from 'react';
 import type { StateSnapshot } from '@/lib/game/state';
 // ISS-021 (v0.20.0) — shared action runner for the side panes (extracted verbatim from
 // RightPane.runAction when the On board section moved to LeftPane). POSTs an action endpoint;
 // every success returns the FULL post-action snapshot (v0.8.0 convention), pushed into the
 // shared shell state immediately via applySnapshot so the UI updates without waiting for the
 // next poll tick. A non-2xx {error} body becomes the pane's inline error AND is mirrored to
 // the shell as a bottom-right toast via onError (ISS-008 — both surfaces by design). Buttons
 // are disabled while a request is in flight, so at most one action runs per pane at a time.
 export function useGameAction(
  state: StateSnapshot | null,
  applySnapshot: (snapshot: StateSnapshot) => void,
  onError?: (message: string) => void,
 ): { runAction: (path: string, body?: unknown) => Promise<void>; busy: boolean; actionError: string | null } {
  const [busy, setBusy] = useState(false);
  // Inline error from a failed action — auto-clears on the next successful poll (the shell's
  // snapshot prop changes every tick) or the next successful action.
  const [actionError, setActionError] = useState<string | null>(null);
  useEffect(() => {
    if (state !== null) setActionError(null);
  }, [state]);
  const runAction = useCallback(
    async (path: string, body?: unknown) => {
      if (busy) return;
      setBusy(true);
      try {
        const res = await fetch(path, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: body === undefined ? undefined : JSON.stringify(body),
          cache: 'no-store',
        });
        const data = (await res.json()) as StateSnapshot & { error?: string };
        if (!res.ok) throw new Error(data.error ?? `HTTP ${res.status}`);
        setActionError(null);
        applySnapshot(data);
      } catch (err) {
        const message = err instanceof Error ? err.message : String(err);
        setActionError(message); // inline pane error stays…
        onError?.(message); // …and the shell mirrors it as a bottom-right toast (ISS-008)
      } finally {
        setBusy(false);
      }
    },
    [applySnapshot, busy, onError],
  );
  return { runAction, busy, actionError };
 }
@@ -1,6 +1,6 @@
 {
  "name": "flight-ops",
-  "version": "0.17.0",
+  "version": "0.22.0",
  "private": true,
  "scripts": {
    "dev": "next dev -p 3000",
Author	SHA1	Message	Date
kamilkrzywda	5391636979	Merge pull request 'v0.22.0 — ISS-022/025/027 hover route trace (job list, on-board rows, relocation panel)' (#34 ) from feat/hover-trace into master CI / build + unit + e2e (push) Failing after 7m10s Details	2026-09-20 03:58:03 +02:00
kamilkrzywda	ab79d9b17f	fix(e2e): renderedFeatures — evaluate maplibre geometry getter in-page before Playwright serialization drops it CI / build + unit + e2e (pull_request) Successful in 7m28s Details	2026-09-20 01:50:23 +00:00
kamilkrzywda	505a58b4fe	fix(e2e): expectHoverRoute — ignore queryRenderedFeatures artifacts without LineString geometry (CI run #70 ) CI / build + unit + e2e (pull_request) Failing after 7m49s Details	2026-09-20 01:22:23 +00:00
kamilkrzywda	2655ef81c8	fix: hover-route line not drawn in e2e — MapLibre clips queried lines across tiles and quantizes their coordinates (strict single-feature equality never matched) CI / build + unit + e2e (pull_request) Failing after 6m44s Details	2026-09-19 22:52:12 +00:00
kamilkrzywda	ac4e3fa316	feat: v0.22.0 — ISS-022 target airport distinct-color ring on job-list / relocation hover CI / build + unit + e2e (pull_request) Failing after 8m51s Details	2026-09-19 22:01:02 +00:00
kamilkrzywda	f2dbad5e03	feat: v0.22.0 — ISS-022/025/027 hover route trace on job list, on-board rows and relocation panel	2026-09-19 21:47:00 +00:00
kamilkrzywda	096a6bfe61	Merge pull request 'v0.21.0 — ISS-023 Relocate (empty flight) panel moves to left pane' (#33 ) from feat/relocate-left-pane into master CI / build + unit + e2e (push) Successful in 5m52s Details	2026-09-19 23:14:42 +02:00
kamilkrzywda	71ee63b38a	feat: v0.21.0 — ISS-023 Relocate panel moves to left pane CI / build + unit + e2e (pull_request) Successful in 5m54s Details	2026-09-19 21:02:55 +00:00
kamilkrzywda	a4f7947666	Merge pull request 'feat: v0.20.0 — ISS-021 move On board to left pane, widen left 360/280' (#31 ) from feat/onboard-left-pane into master CI / build + unit + e2e (push) Successful in 6m8s Details	2026-09-19 22:52:02 +02:00
kamilkrzywda	570ad52d47	feat: v0.20.0 part 2 — ISS-028 on-board rows two-line layout + airport name ellipsis CI / build + unit + e2e (pull_request) Successful in 7m1s Details	2026-09-19 20:41:33 +00:00
kamilkrzywda	59974d1b79	feat: v0.20.0 — ISS-021 move On board to left pane, widen left 360/280	2026-09-19 20:41:33 +00:00
kamilkrzywda	af5176354a	Merge pull request 'v0.19.2 — AGENTS.md: CI-only e2e workflow + connected-issues exception' (#32 ) from docs/agents-md-e2e-ci-only into master CI / build + unit + e2e (push) Successful in 6m23s Details	2026-09-19 22:34:34 +02:00
kamilkrzywda	f5468bb640	docs: v0.19.2 — AGENTS.md e2e section reflects CI-only runs; connected issues may be done together CI / build + unit + e2e (pull_request) Successful in 7m5s Details	2026-09-19 20:06:40 +00:00
kamilkrzywda	0970ee4710	docs: v0.19.1 — AGENTS.md documents enforced CI gate + auto-merge CI / build + unit + e2e (pull_request) Successful in 7m32s Details CI / build + unit + e2e (push) Successful in 6m43s Details	2026-09-19 18:49:52 +00:00
kamilkrzywda	6e1439391a	Merge pull request 'v0.19.0 — ISS-011 auto-slow to 1× when all planes have landed' (#24 ) from feat/auto-slow-on-idle into master CI / build + unit + e2e (push) Successful in 5m59s Details	2026-09-19 20:27:00 +02:00
kamilkrzywda	86379fc9c6	feat: v0.19.0 — ISS-011 auto-slow to 1x when all planes have landed CI / build + unit + e2e (pull_request) Successful in 6m14s Details	2026-09-19 18:07:42 +00:00
kamilkrzywda	f0602453ea	Merge pull request 'v0.18.0 — ISS-010 relocate empty planes + bigger airport markers + popup options' (#20 ) from feat/plane-relocation into master CI / build + unit + e2e (push) Successful in 6m4s Details	2026-09-19 18:44:56 +02:00
kamilkrzywda	337eda2743	test: target the plane option specifically in relocation popup e2e CI / build + unit + e2e (pull_request) Successful in 7m32s Details	2026-09-19 16:35:19 +00:00
kamilkrzywda	8852ae11f2	test: fix POPUP_AIRPORT scoping in relocation popup e2e CI / build + unit + e2e (pull_request) Failing after 6m49s Details	2026-09-19 16:23:03 +00:00
kamilkrzywda	008a77e456	feat: v0.18.0 part 3 — market row to relocate a grounded plane CI / build + unit + e2e (pull_request) Failing after 6m17s Details	2026-09-19 16:03:03 +00:00
kamilkrzywda	3e62d63418	feat: v0.18.0 part 2 — airport popup relocate options	2026-09-19 15:57:33 +00:00
kamilkrzywda	09c1d8bcd8	feat: v0.18.0 part 1 — ISS-010 bigger airport markers	2026-09-19 15:57:23 +00:00