Merge pull request 'ISS-040: on-board package hover traces from carrier's current position' (#48) from fix/onboard-hover-current-location into master

CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## v0.23.2 — 2026-09-20 09:15
+- **On-board package hover previews the route from the carrier's current position (ISS-040).** Hovering a loaded package in the left pane used to draw the great-circle trace from the package's ORIGIN airport; it now starts at the carrying plane's live lat/lon — identical while grounded at the pickup, correct once the plane has departed with cargo still loaded. New pure builder `hoverTraceGeoJson(from: AirportCoord, toIcao, airportsByIcao)` in `lib/mapData.ts` (sibling of `hoverRouteGeoJson`, same shape/conventions; empty collection when the destination is missing); `components/Map.tsx`'s `applyHoverRef` looks up the carrier via the hover's `planeId` and uses it, falling back to the ICAO trace when no carrier is in state. The `[state]` effect now also re-applies the hover so the trace follows a moving carrier between polls while hovered (idempotent: one small setData + ring filters). Endpoint rings untouched — still ICAO-filtered origin/dest circles
+- Tests: unit — `lib/mapData.test.ts` gains a `hoverTraceGeoJson` block (exact endpoints from an arbitrary start coord; empty on missing dest). E2E — `e2e/hover.spec.ts`: new test loads a package at EDDF, dispatches the starter to LEMD via API, waits until its live position is >0.2° away from the hub, pauses the sim, hovers the on-board row and asserts some rendered trace segment starts within EPS of the carrier's live lat/lon AND some ends within EPS of LEMD AND no segment starts near EDDF (per-tile clipping handled via the existing cross-segment endpoint pattern); cleanup resumes + fast-forwards to arrival (auto-delivery) and flies home
+
+## v0.23.1 — 2026-09-20 08:42
+- **Toasts repositioned to the map's right edge (ISS-039).** The `.toasts` stack was `position: fixed` at the viewport bottom-right, overlapping the 280px right pane; its `right` changed 12px → 292px (= 280px right pane + 12px inset) so it now sits flush against the map's right edge with the same 12px margin. No JSX/endpoint changes — all positioning lives in that one CSS value
+- Tests: e2e wording only — `toasts.spec.ts` header comment, test title, and toast visibility assertion message updated from "bottom-right" to "map right edge / clear of the right pane"; no position assertions added (none existed), suite unchanged at 41 tests in 12 files
+- Verified: `tsc --noEmit` clean; unit suite green locally (288); `npx playwright test --list` = 41 tests in 12 files; e2e not run locally by design — CI verifies against an isolated stack
+
+## v0.23.0 — 2026-09-20 08:25
+- **Refuel-to-full row moves to the left pane (ISS-035).** Refueling a grounded plane is "anything with our plane", so it belongs in the left pane next to Relocate, not as a market row on the right. The `.market-row` JSX (`market-refuel-none` "All tanks full." span / `market-refuel-plane` select of grounded planes labeled `{planeName} — {fuel}/{maxFuel} L`, `market-refuel-cost` preview, `market-refuel` button → `POST /api/planes/{id}/refuel`) moved verbatim from the Market section in `components/RightPane.tsx` into a new "Refuel" `<section data-testid="refuel-section">` in `components/LeftPane.tsx`, inserted between Relocate and Time. Its state (`refuelPlaneId`) + derived values (`refuelable`, effective-selection `refuelPlane`, `refuelCost`) moved with it, reusing LeftPane's existing `grounded` list; busy gating rewired from RightPane's `busy` to LeftPane's own `useGameAction` instance (`actionsBusy`). Testids kept byte-identical so all e2e locators are unchanged. The per-package "Refuel" button in the On board section (`refuel-for-{pkg.id}`, mode 'forFlight') is a different feature and stays put; exported helpers `slotsUsedFor` / `loadEligiblePlanes` untouched
+- Tests: e2e — `right-pane.spec.ts`: the market test keeps its buy/sell assertions, renamed to reflect that the refuel row now renders inside `[data-testid="left-pane"]` (asserted before the click); functional cash/tank assertions unchanged; the for-leg test's title/comment updated from "market button" to left pane. `panes.spec.ts`: first test gains structural assertions — Refuel heading + `market-refuel` visible in the left pane, both absent from the right pane (same present-in-left / absent-from-right pattern as On board). No unit-test changes (suite stays at 288)
+- Verified: `tsc --noEmit` clean; unit suite green locally (288); `npx playwright test --list` = 41 tests in 12 files; e2e not run locally by design — CI verifies against an isolated stack
+
 ## v0.22.2 — 2026-09-20 07:32
 - Docs: ORCHESTRATOR.md successor-agent manual committed to the repo; its token reference now points to the gitignored local .env (GITEA_TOKEN, rotated after the Sept 2026 incident); §9 rewritten as durable 'how to find current state' guidance instead of a stale snapshot; no code changes
 

app/globals.css

@@ -420,7 +420,8 @@ body {
 .toasts {
   position: fixed;
   bottom: 12px;
-  right: 12px;
+  /* 280px right pane + 12px inset — sits flush against the map's right edge, clear of the right pane */
+  right: 292px;
   z-index: 50; /* above map popups/controls and the app header */
   display: flex;
   flex-direction: column;

components/LeftPane.tsx

@@ -102,6 +102,11 @@ export default function LeftPane({ state, loading, error, onRefresh, applySnapsh
   const [relocatePlaneId, setRelocatePlaneId] = useState<string | null>(null);
   const [relocateDestIcao, setRelocateDestIcao] = useState<string | null>(null);
 
+  // ISS-035 (v0.23.0): Refuel-to-full selection — moved here from the right-pane market row; same
+  // "effective selection" pattern as Relocate above: the user's pick while it stays refuelable, else
+  // a sensible default (first grounded plane with fuel below max).
+  const [refuelPlaneId, setRefuelPlaneId] = 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
@@ -205,6 +210,16 @@ export default function LeftPane({ state, loading, error, onRefresh, applySnapsh
   const relocateDest =
     airportOptions === null ? null : airportOptions.find((a) => a.icao === relocateDestIcao) ?? airportOptions[0] ?? null;
 
+  // ISS-035 (v0.23.0): Refuel-to-full — any GROUNDED plane with fuel below max can be topped up via the
+  // existing refuel endpoint (no body → server defaults to mode 'full'). Moved here from the right-pane
+  // market row; reuses `grounded` above, and with state null falls back to null.
+  const refuelable = grounded.filter((p) => p.fuel < p.maxFuel);
+  const refuelPlane =
+    (state?.planes.find((p) => p.id === refuelPlaneId && p.status === 'available' && p.fuel < p.maxFuel)) ??
+    refuelable[0] ??
+    null;
+  const refuelCost = refuelPlane && state ? (refuelPlane.maxFuel - refuelPlane.fuel) * state.fuelPricePerL : 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
@@ -507,6 +522,50 @@ export default function LeftPane({ state, loading, error, onRefresh, applySnapsh
             </div>
           </section>
 
+          {/* ISS-035 (v0.23.0): moved here from the right-pane market row — it belongs with everything else
+              about our planes, next to Relocate. Plain section: no hover handlers (refuel is not a route). */}
+          <section className="pane-section" data-testid="refuel-section">
+            <h3 className="pane-heading">Refuel</h3>
+            {/* Moved verbatim from the right-pane Market section — same testids/labels; the per-package
+                "Refuel" button in On board (mode 'forFlight') is a different feature and stays there. */}
+            <div className="market-row">
+              {refuelable.length === 0 ? (
+                <span data-testid="market-refuel-none" className="pane-muted">
+                  All tanks full.
+                </span>
+              ) : (
+                <>
+                  <select
+                    data-testid="market-refuel-plane"
+                    aria-label="Plane to refuel"
+                    value={refuelPlane?.id ?? ''}
+                    onChange={(e) => setRefuelPlaneId(e.target.value || null)}
+                  >
+                    {refuelable.map((p) => (
+                      <option key={p.id} value={p.id}>
+                        {PLANE_TYPES[p.model]?.name ?? p.model} — {Math.round(p.fuel)} / {p.maxFuel} L
+                      </option>
+                    ))}
+                  </select>
+                  <span data-testid="market-refuel-cost" className="market-preview">
+                    {refuelCost !== null ? formatCash(refuelCost) : ''}
+                  </span>
+                </>
+              )}
+              <button
+                type="button"
+                data-testid="market-refuel"
+                className="pane-btn"
+                disabled={actionsBusy || refuelPlane === null}
+                onClick={() => {
+                  if (refuelPlane) void runAction(`/api/planes/${refuelPlane.id}/refuel`);
+                }}
+              >
+                Refuel to full
+              </button>
+            </div>
+          </section>
+
           <section className="pane-section">
             <h3 className="pane-heading">Time</h3>
             <p data-testid="sim-clock" className="sim-clock">

components/Map.tsx

@@ -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 { hoverRouteGeoJson, planesGeoJson, routesGeoJson, type AirportCoord, type PlaneFeatureProps } from '../lib/mapData';
+import { hoverRouteGeoJson, hoverTraceGeoJson, planesGeoJson, routesGeoJson, type AirportCoord, type PlaneFeatureProps } from '../lib/mapData';
 import { weatherFor } from '../lib/weather';
 import { approxLocalTime } from '../lib/localTime';
 
@@ -100,6 +100,9 @@ export default function FlightMap({ state, hovered, applySnapshot }: MapProps) {
   useEffect(() => {
     stateRef.current = state ?? null;
     applyDynamicRef.current();
+    // ISS-040 (v0.23.2): re-apply the hover too, so an on-board package's trace follows a moving
+    // carrier between polls while hovered — idempotent and cheap (one small setData + ring filters).
+    applyHoverRef.current();
   }, [state]);
 
   // ISS-002 (v0.15.0): hover highlight — same ref + effect pattern as the snapshot above.
@@ -138,7 +141,14 @@ export default function FlightMap({ state, hovered, applySnapshot }: MapProps) {
     // 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()));
+      // ISS-040 (v0.23.2): an on-board package's trace starts from the carrier plane's LIVE position,
+      // not its origin airport — identical to before while grounded at the pickup, different once it
+      // has departed with cargo still loaded. No carrier in state yet → fall back to the ICAO trace.
+      const idx = airportsIndexRef.current ?? new Map();
+      const carrier = h?.kind === 'package' && h.planeId ? stateRef.current?.planes.find((p) => p.id === h.planeId) : undefined;
+      void hoverSource.setData(
+        carrier ? hoverTraceGeoJson({ lat: carrier.lat, lon: carrier.lon }, toIcao, idx) : hoverRouteGeoJson(fromIcao, toIcao, idx),
+      );
     }
     // 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.

components/RightPane.tsx

@@ -116,10 +116,11 @@ export default function RightPane({ state, loading, applySnapshot, onHover, onEr
   // user's pick while it stays valid, else a sensible default (first catalog entry / first plane).
   const [buyModelId, setBuyModelId] = useState<string | null>(null);
   const [sellPlaneId, setSellPlaneId] = useState<string | null>(null);
-  const [refuelPlaneId, setRefuelPlaneId] = useState<string | null>(null);
 
   // ISS-023 (v0.21.0): the Relocate row moved to the left pane — it belongs with everything else
   // about our planes, not in the market. Its state + /api/airports fetch went with it.
+  // ISS-035 (v0.23.0): same for the Refuel-to-full row — its state + derived values moved to the
+  // left pane's "Refuel" section next to Relocate.
 
   if (loading && !state) {
     return (
@@ -139,15 +140,9 @@ export default function RightPane({ state, loading, applySnapshot, onHover, onEr
 
   const grounded = state.planes.filter((p) => p.status === 'available');
   const sellPlane = state.planes.find((p) => p.id === sellPlaneId && p.status === 'available') ?? grounded[0] ?? null;
-  const refuelable = grounded.filter((p) => p.fuel < p.maxFuel);
-  const refuelPlane =
-    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;
-  const refuelCost = refuelPlane ? (refuelPlane.maxFuel - refuelPlane.fuel) * state.fuelPricePerL : null;
 
   return (
     <aside data-testid="right-pane" className="pane right-pane">
@@ -262,44 +257,8 @@ export default function RightPane({ state, loading, applySnapshot, onHover, onEr
           </button>
         </div>
 
-        <div className="market-row">
-          {refuelable.length === 0 ? (
-            <span data-testid="market-refuel-none" className="pane-muted">
-              All tanks full.
-            </span>
-          ) : (
-            <>
-              <select
-                data-testid="market-refuel-plane"
-                aria-label="Plane to refuel"
-                value={refuelPlane?.id ?? ''}
-                onChange={(e) => setRefuelPlaneId(e.target.value || null)}
-              >
-                {refuelable.map((p) => (
-                  <option key={p.id} value={p.id}>
-                    {planeName(p)} — {Math.round(p.fuel)} / {p.maxFuel} L
-                  </option>
-                ))}
-              </select>
-              <span data-testid="market-refuel-cost" className="market-preview">
-                {refuelCost !== null ? formatCash(refuelCost) : ''}
-              </span>
-            </>
-          )}
-          <button
-            type="button"
-            data-testid="market-refuel"
-            className="pane-btn"
-            disabled={busy || refuelPlane === null}
-            onClick={() => {
-              if (refuelPlane) void runAction(`/api/planes/${refuelPlane.id}/refuel`);
-            }}
-          >
-            Refuel to full
-          </button>
-        </div>
-
         {/* ISS-023 (v0.21.0): the Relocate row moved to the left pane's "Relocate" section. */}
+        {/* ISS-035 (v0.23.0): the Refuel-to-full row moved to the left pane's "Refuel" section, next to Relocate. */}
       </section>
 
       {actionError && <p data-testid="right-error" className="pane-error">{actionError}</p>}

e2e/hover.spec.ts

@@ -24,6 +24,8 @@ interface PlaneState {
   maxFuel: number;
   locationIcao: string;
   destIcao: string | null;
+  lat: number; // live position — interpolated per snapshot while flying, airport coords when grounded
+  lon: number;
 }
 
 interface PackageState {
@@ -496,3 +498,95 @@ test('hovering an on-board block of a flying plane highlights its route', async
     })
     .toBe(true);
 });
+
+test('hovering an on-board package while its carrier is mid-flight traces from current position', async ({ page }) => {
+  test.setTimeout(600_000); // self-heal + one flight at scale 1000 + fly-home cleanup
+  await flyHomeViaApi(page);
+
+  // Full tank before departure — the EDDF↔LEMD round trip burns ~4970 L of the 6300 L tank.
+  const refuel = await page.request.post('/api/planes/plane-starter/refuel');
+  expect(refuel.status()).toBe(200);
+
+  await page.goto('/');
+  await waitForAirportCount(page);
+
+  // Load + fly via the API (same pattern as e2e/map-interactions.spec.ts), then speed up.
+  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);
+  const fly = await page.request.post('/api/planes/plane-starter/fly', { data: { destIcao: DEST } });
+  expect(fly.status()).toBe(200);
+  await setScale(page, SCALE);
+
+  // Wait until the starter is GENUINELY mid-flight — its live position clearly away from EDDF in
+  // both axes (well past HOVER_ROUTE_EPS_DEG) so "the trace starts at the plane" and "it starts at
+  // the pickup airport" are distinguishable. The ~10 s leg at scale 1000 gives a wide window.
+  const hubLonLat = await airportLonLat(page, HUB);
+  await expect
+    .poll(async () => {
+      const p = (await getState(page)).planes.find((x) => x.id === 'plane-starter');
+      if (!p || p.status !== 'flying') return false;
+      return Math.abs(p.lon - hubLonLat[0]) > 0.2 && Math.abs(p.lat - hubLonLat[1]) > 0.2;
+    }, { timeout: 60_000, message: 'waiting for plane-starter to be clearly away from the hub' })
+    .toBe(true);
+
+  // Freeze mid-flight so the position is stable while we assert (same pause pattern as the
+  // flying-plane hover test above): paused, every /api/state snapshot reports the same lat/lon.
+  await postSim(page, { paused: true });
+
+  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]);
+
+  const live = (await getState(page)).planes.find((x) => x.id === 'plane-starter')!;
+  const liveLonLat: [number, number] = [live.lon, live.lat]; // stable — the sim is paused
+  const destLonLat = await airportLonLat(page, DEST);
+
+  await row.hover();
+  // ISS-040 (v0.23.2): the trace starts at the carrier's LIVE position and ends at the destination,
+  // and NO segment may start near the pickup airport (the old origin-based behavior). Same per-tile
+  // clipping/quantization caveats as expectHoverRoute — check endpoints across all segments with EPS.
+  await expect.poll(async () => {
+    const feats = (await renderedFeatures(page, ['hover-route'])) as Array<{ geometry?: { type: string; coordinates: [number, number][] } }>;
+    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;
+    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;
+    const startsAtLive = segs.some((f) => near(f.geometry.coordinates[0], liveLonLat));
+    const endsAtDest = segs.some((f) => near(f.geometry.coordinates[f.geometry.coordinates.length - 1], destLonLat));
+    const noneStartsAtHub = !segs.some((f) => near(f.geometry.coordinates[0], hubLonLat));
+    return startsAtLive && endsAtDest && noneStartsAtHub;
+  }, { timeout: 15_000, message: 'waiting for the hover-route trace to run from the live position to the destination' }).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);
+
+  // Resume and fast-forward to arrival — landing at DEST auto-delivers the package (v0.12.0), so
+  // flying home afterwards leaves the starter clean for the other specs.
+  await postSim(page, { timeScale: SCALE, paused: false });
+  await expect
+    .poll(async () => {
+      const p = (await getState(page)).planes.find((x) => x.id === 'plane-starter');
+      return !!p && p.status === 'available' && p.locationIcao === DEST;
+    }, { 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
+    .poll(async () => (await getState(page)).planes.find((p) => p.id === 'plane-starter')?.locationIcao === HUB, {
+      timeout: 120_000,
+      message: 'waiting for plane-starter to land back at the hub',
+    })
+    .toBe(true);
+});

e2e/panes.spec.ts

@@ -75,6 +75,14 @@ test('left pane renders wallet, reputation and the starter fleet at Frankfurt',
   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);
+
+  // ISS-035 (v0.23.0): the Refuel-to-full row moved to the left pane next to Relocate — its section
+  // heading and button render here…
+  await expect(page.getByTestId('left-pane').getByRole('heading', { name: 'Refuel', exact: true })).toBeVisible();
+  await expect(page.getByTestId('left-pane').getByTestId('market-refuel')).toBeVisible();
+  // …and neither the heading nor the row remains in the right pane.
+  await expect(page.getByTestId('right-pane').getByRole('heading', { name: 'Refuel', exact: true })).toHaveCount(0);
+  await expect(page.getByTestId('right-pane').getByTestId('market-refuel')).toHaveCount(0);
 });
 
 test('time controls: pause freezes the sim and the ladder slider sets timeScale', async ({ page }) => {

e2e/right-pane.spec.ts

@@ -5,8 +5,9 @@ import { expect, test } from '@playwright/test';
 // names/reward/deadline and Load (UI click) binds one to the starter; the on-board list
 // (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
+// formula as the server); flying planes show their current leg; market buy/sell previews match
-// match the catalog + economy constants exposed in /api/state. Packages are created via
+// the catalog + economy constants exposed in /api/state, and the Refuel-to-full row (moved to the
+// left pane in v0.23.0, ISS-035) deducts exactly its cost. Packages are created via
 // POST /api/test/create-package (FLIGHT_TEST_HOOKS=1), same pattern as e2e/actions.spec.ts.
 
 const SCALE = 1000; // fastest sim speed (v0.14.0 ladder top) — keeps flights to seconds of real time
@@ -300,7 +301,7 @@ test('on-board list: fly-to-destination + abandon with penalty preview; flying p
     .toBe(true);
 });
 
-test('market buy/sell/refuel render with previews from the catalog in /api/state; refuel deducts exactly', async ({ page }) => {
+test('market buy/sell render with previews from the catalog in /api/state; left-pane Refuel deducts exactly', async ({ page }) => {
   test.setTimeout(300_000); // self-heal can take minutes after an interrupted run
   await flyHomeViaApi(page); // grounded starter at EDDF (tank partial after the previous test's flight)
 
@@ -325,6 +326,9 @@ test('market buy/sell/refuel render with previews from the catalog in /api/state
   const payout = Math.round(entry.price * body.sellFraction * 100) / 100;
   await expect(page.getByTestId('market-sell-payout')).toContainText(eur(payout));
 
+  // ISS-035 (v0.23.0): the Refuel-to-full row now lives in the LEFT pane next to Relocate — same global testids.
+  await expect(page.getByTestId('left-pane').getByTestId('market-refuel')).toBeVisible({ timeout: 15_000 });
+
   // Refuel through the pane: the flight genuinely burned fuel…
   if (starter.fuel < starter.maxFuel) {
     const expectedCost = Math.round((starter.maxFuel - starter.fuel) * body.fuelPricePerL * 100) / 100;
@@ -348,7 +352,7 @@ test('market buy/sell/refuel render with previews from the catalog in /api/state
   }
 });
 
-test('on-board row Refuel tops up just enough for the package leg; market button says "Refuel to full"', async ({ page }) => {
+test('on-board row Refuel tops up just enough for the package leg; left-pane button says "Refuel to full"', async ({ page }) => {
   test.setTimeout(300_000); // self-heal + one long flight each way at scale 1000
   await flyHomeViaApi(page);
 
@@ -403,7 +407,7 @@ test('on-board row Refuel tops up just enough for the package leg; market button
   expect(post.account.cash).toBeCloseTo(cashBefore - expectedCost, 6);
   expect(post.planes.find((p) => p.id === 'plane-starter')!.fuel).toBeCloseTo(fuelBefore + liters, 6);
 
-  // Market row: the fill-up button is labeled "Refuel to full" (testid unchanged).
+  // Left pane (moved from the market in v0.23.0, ISS-035): the fill-up button is labeled "Refuel to full" (testid unchanged).
   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

e2e/toasts.spec.ts

@@ -1,9 +1,10 @@
 import type { Page } from '@playwright/test';
 import { expect, test } from '@playwright/test';
 
-// v0.17.0 — ISS-008: action errors surface as bottom-right toasts (in addition to the inline
+// v0.17.0 — ISS-008: action errors surface as toasts at the map's right edge (clear of the
-// pane error) and game events appear as info toasts via snapshot diffing; the left-pane Time
+// right pane, in addition to the inline pane error) and game events appear as info toasts via
-// section offers an explicit "Enable notifications" opt-in for browser notifications.
+// snapshot diffing; the left-pane Time section offers an explicit "Enable notifications" opt-in
+// for browser notifications.
 
 interface CatalogEntry {
   model: string;
@@ -22,7 +23,7 @@ async function getState(page: Page): Promise<StateBody> {
   return (await res.json()) as StateBody;
 }
 
-test('failed actions toast bottom-right (inline error stays) and the Time section offers a notifications opt-in', async ({ page }) => {
+test('failed actions toast at the map right edge, clear of the right pane (inline error stays), and the Time section offers a notifications opt-in', async ({ page }) => {
   await page.goto('/');
   const buyModel = page.getByTestId('market-buy-model');
   await expect(buyModel, 'the market section renders once the first snapshot lands').toBeVisible({ timeout: 15_000 });
@@ -38,7 +39,7 @@ test('failed actions toast bottom-right (inline error stays) and the Time sectio
 
     // The toast appears with the server's error message and the error variant class…
     const toast = page.locator('[data-testid="toast"]').filter({ hasText: /insufficient funds/i });
-    await expect(toast, 'the error toast appears bottom-right').toBeVisible({ timeout: 10_000 });
+    await expect(toast, 'the error toast appears at the map right edge').toBeVisible({ timeout: 10_000 });
     await expect(toast).toHaveClass(/toast-error/);
 
     // …and the inline pane error still shows (both surfaces by design). It auto-clears on the

lib/mapData.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest';
 import type { StateSnapshot } from './game/state';
-import { planesGeoJson, routesGeoJson, hoverRouteGeoJson, greatCircleArc, ROUTE_ARC_SEGMENTS, type AirportCoord } from './mapData';
+import { planesGeoJson, routesGeoJson, hoverRouteGeoJson, hoverTraceGeoJson, greatCircleArc, ROUTE_ARC_SEGMENTS, type AirportCoord } from './mapData';
 import { haversineKm } from './geo';
 
 const AIRPORTS = new Map<string, AirportCoord>([
@@ -176,6 +176,23 @@ describe('hoverRouteGeoJson (ISS-022/025/027 v0.22.0 — hover route trace)', ()
   });
 });
 
+describe('hoverTraceGeoJson (ISS-040 v0.23.2 — on-board package trace from the carrier\'s live position)', () => {
+  it('draws one great-circle line from the given start coord to the dest airport with exact endpoints', () => {
+    const from = { lat: 51.2, lon: 9.1 }; // a mid-flight position — not an airport
+    const fc = hoverTraceGeoJson(from, '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([9.1, 51.2]); // live start — exact endpoint
+    expect(coords[coords.length - 1]).toEqual([4.76, 52.31]); // EHAM — exact endpoint
+  });
+
+  it('returns an empty collection when the dest airport is missing from the dataset', () => {
+    expect(hoverTraceGeoJson({ lat: 0, lon: 0 }, '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')!);

lib/mapData.ts

@@ -112,6 +112,32 @@ export function hoverRouteGeoJson(
   };
 }
 
+// ISS-040 (v0.23.2): the on-board package hover trace — same shape as hoverRouteGeoJson but the
+// start is a live COORDINATE (the carrier plane's current position), not an airport ICAO: once the
+// plane has departed with cargo still loaded, the preview must begin where it actually is. Empty
+// collection when the destination is missing from the dataset — never guessed.
+export function hoverTraceGeoJson(
+  from: AirportCoord,
+  toIcao: string,
+  airportsByIcao: ReadonlyMap<string, AirportCoord>,
+): FeatureCollection<MapLineFeature> {
+  const to = airportsByIcao.get(toIcao);
+  if (!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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "flight-ops",
-  "version": "0.22.2",
+  "version": "0.23.2",
   "private": true,
   "scripts": {
     "dev": "next dev -p 3000",