Merge pull request 'v0.50.0 — queued/planned route dotted line yellow-ish instead of gray (#98)' (#103) from feat/queued-route-color into master

Extract the queue-line color from an inline literal to exported
QUEUE_ROUTE_LINE_COLOR and retune it #64748b -> #d4a017. Dashed style
and width unchanged. Unit test pins the constant; existing e2e specs
(queue.spec.ts, relocation.spec.ts) already cover the rendering path.

CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## v0.50.0 — 2026-09-22 08:00
+- **Queued/planned route line is now amber/gold instead of gray (ISS-098).** The dotted queue line in `components/Map.tsx` (a flying plane's not-yet-started legs, ISS-043) was drawn in muted slate `#64748b`. It is now an amber/gold `#d4a017`, readable on both light and dark tiles. The color was extracted from the inline literal to a new exported module-scope constant `QUEUE_ROUTE_LINE_COLOR` so it is testable; the dashed/dotted style (`line-dasharray [0.1, 1.5]`) and width (3) are unchanged
+- **Tests.** Unit +1: new `components/map.test.ts` pins `QUEUE_ROUTE_LINE_COLOR === '#d4a017'`. No new e2e spec — the existing queued-route rendering paths (`e2e/queue.spec.ts`, `e2e/relocation.spec.ts`) already exercise this layer, and a pure color swap needs no behavioral coverage
+
+## v0.49.0 — 2026-09-22 07:25
+- **Airport popup Relocate now works for flying/repairing planes (ISS-096).** The Relocate row in the map's airport popup (`components/Map.tsx`) previously listed only grounded planes and showed "No grounded planes to relocate." when none was available. It now lists ALL planes from the latest snapshot, and the click handler picks the endpoint by the SELECTED plane's current status: `available` → `POST /api/planes/{id}/fly` (immediate relocation, unchanged), `flying`/`repairing` → `POST /api/planes/{id}/queue` (the destination is appended to the plane's flight queue and chains on landing). Success text is "Relocation started." for fly and "Added to queue." for queue; the no-planes fallback guard is reworded to "No planes to relocate." No API changes — both endpoints existed since v0.25.0/v0.46.0
+- **Tests.** E2E +1 (`e2e/relocation.spec.ts`): dispatches the starter plane on a leg via the API so it is flying, slows the sim to 1x so the leg cannot land mid-test, opens the airport popup for a different airport, selects the flying plane from the (now full) list and clicks "Relocate here", then asserts via state that the plane's `queue` contains the clicked airport's ICAO while it is still flying its original destination
+
+## v0.48.0 — 2026-09-22 06:55
+- **Leg distance shown on contracts (ISS-095).** `PackageState` gains `distanceKm` (`lib/game/state.ts`) — the great-circle origin→dest distance, computed server-side in `getStateSnapshot()` from the airport GeoJSON already loaded for live-plane math (same `haversineKm` as flight movement; 0 if a coord is missing). Shown in two places via new `formatKm()` (`lib/format.ts`, integer km, no space before "km"): the on-board contract line (`EGCC → GMME 554km €23,826.00 …`) and the job-list row (`€37,408.00 215km Perishables 0.4t …`). OpenAPI spec updated in lockstep; nothing stored
+- **Tests.** Unit: `app/api/state/route.test.ts` asserts every package's `distanceKm` equals the haversine of its airports' coordinates (computed with the same lib/geo helper); `lib/openapi.test.ts` pinned key list gains `distanceKm`; new `formatKm` test in `lib/format.test.ts`. E2E: `right-pane.spec.ts` +2 assertions (job-row distance span matches /^\d+km$/, generic and hook-created package), `actions.spec.ts` +1 (on-board line)
+
 ## v0.47.0 — 2026-09-21 23:01
 - **Job payoff retuned so weight dominates (ISS-090).** `REWARD_PER_KG` in `lib/game/seed.ts` rises from €0.5/kg to €2.0/kg — the linear form is unchanged, only the constant moves. Before, the weight term was small vs base+distance, so heavier jobs barely paid more (a 1000 km leg: €3,250 @500 kg → €5,000 @4,000 kg — per-kg rate fell from €4.59 to €1.01) and there was no sense in taking heavy jobs; after the retune the same leg pays €4,000 / €11,000, so weight clearly drives payoff. Safe for viability: fuel burn (`lib/sim/movement.ts`) is weight-independent, so this only raises income
 - **Tests.** `seed.test.ts`: stale test name "… 0.5 * weightKg …" made generic; new literal pins in the `rewardFor` formula test — `rewardFor(1000, 4000) === 11_000` and `rewardFor(1000, 500) === 4_000` — so future retunes are deliberate. All other reward assertions recompute through the exported constants and pass unchanged

app/api/state/route.test.ts

@@ -2,6 +2,8 @@ import fs from 'node:fs/promises';
 import os from 'node:os';
 import path from 'node:path';
 import { afterAll, beforeAll, describe, expect, it } from 'vitest';
+import { loadAirportsGeoJson } from '@/lib/airports';
+import { haversineKm } from '@/lib/geo';
 import { FUEL_PRICE_PER_L, PLANE_TYPES, SELL_FRACTION } from '@/lib/game/catalog';
 import { GET } from './route';
 
@@ -58,9 +60,20 @@ describe('GET /api/state', () => {
 
     const packages = body.packages as Array<Record<string, unknown>>;
     expect(packages.length).toBeGreaterThan(0);
-    for (const key of ['id', 'originIcao', 'destIcao', 'reward', 'cargoType', 'weightKg', 'deadlineSimTime', 'status']) {
+    for (const key of ['id', 'originIcao', 'destIcao', 'reward', 'cargoType', 'weightKg', 'distanceKm', 'deadlineSimTime', 'status']) {
       expect(packages[0], `package.${key}`).toHaveProperty(key);
     }
+
+    // v0.48.0 (ISS-095): distanceKm is computed server-side — it must equal the haversine of the
+    // fixture airports' coordinates for every package in the snapshot.
+    const fc = await loadAirportsGeoJson();
+    const coords = new Map(fc.features.map((f) => [f.properties.icao, f.properties]));
+    for (const pkg of packages) {
+      const from = coords.get(String(pkg.originIcao));
+      const to = coords.get(String(pkg.destIcao));
+      if (!from || !to) continue; // missing coord → 0 fallback (cannot happen with the committed dataset)
+      expect(pkg.distanceKm, `package ${String(pkg.id)} distance`).toBeCloseTo(haversineKm(from.lat, from.lon, to.lat, to.lon), 6);
+    }
   });
 
   it('is stable across repeated calls (same seeded DB)', async () => {

components/LeftPane.tsx

@@ -5,7 +5,7 @@ import type { GeoJsonFeatureCollection } from '@/lib/airports';
 import type { PlaneState, StateSnapshot } from '@/lib/game/state';
 import { PLANE_TYPES } from '@/lib/game/catalog';
 import { abandonPenalty } from '@/lib/game/penalty';
-import { formatCash, formatDeadlineRelative, formatFuel, formatSimClock, formatSpecialLabel } from '@/lib/format';
+import { formatCash, formatDeadlineRelative, formatFuel, formatKm, formatSimClock, formatSpecialLabel } from '@/lib/format';
 import { TIME_SCALES, scaleToSlider, sliderToScale } from '@/lib/timeScale';
 import { useGameAction } from '@/lib/useGameAction';
 import { useSimClock } from '@/lib/useSimClock';
@@ -441,6 +441,8 @@ export default function LeftPane({ state, loading, error, onRefresh, applySnapsh
                               <span data-testid={`onboard-route-${pkg.id}`} className="contract-route">
                                 {pkg.originIcao} → {pkg.destIcao}
                               </span>
+                              {/* v0.48.0 (ISS-095): leg distance after the route, e.g. "EGCC → GMME 554km". */}
+                              <span data-testid={`onboard-distance-${pkg.id}`}>{formatKm(pkg.distanceKm)}</span>
                               {/* v0.37.0 (ISS-073): special-status badge — rendered only when the package has one. */}
                               {pkg.special && (
                                 <span data-testid={`package-special-${pkg.id}`} className="special-badge">

components/Map.tsx

@@ -32,6 +32,8 @@ const ROUTES_LEGS_LAYER_ID = 'routes-legs';
 // (dest → queue[0] → …) as their own source + layer, drawn under everything else dynamic.
 const QUEUE_ROUTES_SOURCE_ID = 'queue-routes';
 const QUEUE_ROUTES_LAYER_ID = 'queue-routes';
+// ISS-098 (v0.50.0): amber/gold — planned legs read as "queued", visible on light and dark tiles alike.
+export const QUEUE_ROUTE_LINE_COLOR = '#d4a017';
 // ISS-002 (v0.15.0): top-most hover-highlight layers, added after the base layers so they
 // render above them. Each starts filtered to match nothing; applyHoverRef drives the filters.
 const PLANES_HIGHLIGHT_LAYER_ID = 'planes-highlight';
@@ -231,21 +233,22 @@ export default function FlightMap({ state, hovered, applySnapshot }: MapProps) {
         // deterministic generated weather — no gameplay effects per PLAN.md.
         const w = weatherFor(p.icao);
         const localTime = approxLocalTime(p.lon, Date.now());
-        // ISS-010 (v0.18.0): Relocate row — grounded planes from the latest snapshot can be
+        // ISS-010 (v0.18.0): Relocate row — every plane from the latest snapshot can be sent to
-        // repositioned to this airport via POST /api/planes/{id}/fly (pure repositioning).
+        // this airport: grounded ones fly immediately (POST /api/planes/{id}/fly), flying/repairing
+        // ones get the leg appended to their queue (POST /api/planes/{id}/queue, ISS-096 v0.49.0).
         const st = stateRef.current;
-        const groundedPlanes = st ? st.planes.filter((pl) => pl.status === 'available') : [];
+        const planes = st ? st.planes : [];
         const planeLabel = (model: string) => st?.catalog.find((c) => c.model === model)?.label ?? model;
         const relocateHtml =
-          groundedPlanes.length > 0
+          planes.length > 0
             ? `<select data-testid="airport-popup-plane" aria-label="Plane to relocate here">` +
               `<option value="">Select a plane\u2026</option>` +
-              groundedPlanes.map(
+              planes.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>`;
+            : `<span data-testid="airport-popup-no-planes">No planes to relocate.</span>`;
         const popup = new maplibregl.Popup({ offset: 10 })
           .setLngLat(f.geometry.coordinates as [number, number])
           .setHTML(
@@ -263,7 +266,7 @@ export default function FlightMap({ state, hovered, applySnapshot }: MapProps) {
         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
+        // The status span is always in the popup HTML (even with no planes), so it
         // exists whenever the select/button do.
         const statusEl = el?.querySelector<HTMLElement>('[data-testid="airport-popup-relocate-status"]');
         if (select && button && statusEl) {
@@ -276,7 +279,11 @@ export default function FlightMap({ state, hovered, applySnapshot }: MapProps) {
             button.disabled = true;
             statusEl.textContent = 'Relocating\u2026';
             try {
-              const res = await fetch(`/api/planes/${planeId}/fly`, {
+              // ISS-096 (v0.49.0): endpoint follows the SELECTED plane's current status — grounded
+              // planes fly now, flying/repairing ones get the leg queued for after landing.
+              const planeStatus = stateRef.current?.planes.find((pl) => pl.id === planeId)?.status ?? 'available';
+              const action = planeStatus === 'available' ? 'fly' : 'queue';
+              const res = await fetch(`/api/planes/${planeId}/${action}`, {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
                 body: JSON.stringify({ destIcao: p.icao }),
@@ -285,7 +292,7 @@ export default function FlightMap({ state, hovered, applySnapshot }: MapProps) {
               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.';
+              statusEl.textContent = action === 'fly' ? 'Relocation started.' : 'Added to queue.';
             } catch (err) {
               statusEl.textContent = err instanceof Error ? err.message : String(err);
               button.disabled = false; // allow retry / picking another plane
@@ -377,8 +384,8 @@ export default function FlightMap({ state, hovered, applySnapshot }: MapProps) {
           });
         }
         // ISS-043 (v0.26.0): dotted queue line — added after routes-legs but BEFORE the hover
-        // layers so a hovered trace still draws on top of it. Muted slate + fine dots reads as
+        // layers so a hovered trace still draws on top of it. Amber/gold + fine dots reads as
-        // "planned/future", distinct from the solid amber active leg and the [2,2] yellow hover dash.
+        // "planned/future", distinct from the solid bright-amber active leg and the [2,2] yellow hover dash.
         if (!map.getSource(QUEUE_ROUTES_SOURCE_ID)) {
           map.addSource(QUEUE_ROUTES_SOURCE_ID, {
             type: 'geojson',
@@ -391,7 +398,7 @@ export default function FlightMap({ state, hovered, applySnapshot }: MapProps) {
             type: 'line',
             source: QUEUE_ROUTES_SOURCE_ID,
             paint: {
-              'line-color': '#64748b', // muted slate — planned legs, not actively flying
+              'line-color': QUEUE_ROUTE_LINE_COLOR, // amber/gold — planned legs, not actively flying (ISS-098)
               'line-width': 3,
               'line-dasharray': [0.1, 1.5], // dotted — distinct from solid legs and the [2,2] hover dash
             },

components/RightPane.tsx

@@ -4,7 +4,7 @@ import { useState } from 'react';
 import type { PackageState, PlaneState, StateSnapshot } from '@/lib/game/state';
 import { MAX_PLANE_DISCOUNT, PLANE_DISCOUNT_PER_REP, PLANE_TYPES, repRate, SELL_FRACTION } from '@/lib/game/catalog';
 import { maxRangeKm } from '@/lib/sim/movement';
-import { formatCargo, formatCash, formatDeadlineRelative, formatSpecialLabel } from '@/lib/format';
+import { formatCargo, formatCash, formatDeadlineRelative, formatKm, formatSpecialLabel } from '@/lib/format';
 import { useGameAction } from '@/lib/useGameAction';
 import type { HoverTarget } from './hoverTypes';
 
@@ -234,6 +234,8 @@ export default function RightPane({ state, loading, applySnapshot, onHover, onEr
                   </div>
                   <div className="contract-sub">
                     <span data-testid={`open-package-reward-${pkg.id}`}>{formatCash(pkg.reward)}</span>
+                    {/* v0.48.0 (ISS-095): leg distance after the reward, e.g. "€37,408.00 215km". */}
+                    <span data-testid={`open-package-distance-${pkg.id}`}>{formatKm(pkg.distanceKm)}</span>
                     {/* ISS-066 (v0.35.0): cargo shows as type + tonnage ("Mail 10.0t"), not "type × count". */}
                     <span data-testid={`open-package-cargo-${pkg.id}`}>{formatCargo(pkg.cargoType, pkg.weightKg)}</span>
                     <span data-testid={`open-package-deadline-${pkg.id}`}>

components/map.test.ts

@@ -0,0 +1,11 @@
+import { describe, expect, it } from 'vitest';
+import { QUEUE_ROUTE_LINE_COLOR } from './Map';
+
+// ISS-098 (v0.50.0): the dotted queued/planned route line is amber/gold, not gray — pinned so a
+// future retune is deliberate. E2E already exercises the rendering path (queue.spec.ts, relocation.spec.ts).
+
+describe('queued route line color', () => {
+  it('pins the amber/gold queue-line color readable on light and dark tiles', () => {
+    expect(QUEUE_ROUTE_LINE_COLOR).toBe('#d4a017');
+  });
+});

components/right-pane.test.ts

@@ -42,6 +42,7 @@ function pkg(over: Partial<PackageState> & Pick<PackageState, 'id'>): PackageSta
     cargoCount: 4,
     weightKg: 1_000,
     special: null, // v0.37.0 (ISS-073) — no special status by default in fixtures
+    distanceKm: 1839, // v0.48.0 (ISS-095) — EDDF→LEMD great-circle distance
     deadlineSimTime: 1_000_000,
     status: 'open',
     planeId: null,

e2e/actions.spec.ts

@@ -197,6 +197,8 @@ test('full core loop via UI: load → fly to destination → exact reward + rep
   await expect(onboardRow, 'loaded package appears in the on-board list').toBeVisible();
   // ISS-081 (v0.40.0): the on-board route shows ICAO tags, not full airport names.
   await expect(page.getByTestId(`onboard-route-${pkg.id}`)).toContainText(`${HUB} → ${nearest.icao}`);
+  // v0.48.0 (ISS-095): leg distance on the on-board line, right after the route — integer km.
+  await expect(page.getByTestId(`onboard-distance-${pkg.id}`)).toHaveText(/^\d+km$/);
 
   // FLY via the UI: click the fly-to button in the on-board list (ISS-081: ICAO label).
   const flyBtn = page.getByTestId(`fly-to-${pkg.id}`);

e2e/relocation.spec.ts

@@ -5,8 +5,9 @@ import { expect, test } from '@playwright/test';
 // 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 map (airport-popup-plane / airport-popup-relocate). Since v0.49.0 (ISS-096) the popup row also
-// the existing e2e/map.spec.ts click tests, not here.
+// works for FLYING planes — it then appends to POST /api/planes/{id}/queue instead of flying now.
+// 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)
@@ -15,7 +16,7 @@ const HUB = 'EDDF'; // Frankfurt Main — the seeded starter plane's home base (
 const POPUP_AIRPORT = { icao: 'LFRS', lon: -1.61073, lat: 47.153198 };
 
 interface StateBody {
-  planes: Array<{ id: string; status: string; maxFuel: number; locationIcao: string; destIcao: string | null }>;
+  planes: Array<{ id: string; status: string; maxFuel: number; locationIcao: string; destIcao: string | null; queue: string[] }>;
 }
 
 async function getState(page: Page): Promise<StateBody> {
@@ -195,3 +196,82 @@ test('airport popup offers Relocate options for grounded planes', async ({ page
     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);
 });
+
+test('airport popup Relocate queues a leg for a flying plane', async ({ page }) => {
+  test.setTimeout(300_000); // self-heal (worst case ~20 s at 1000×) + one short leg, fast-forwarded in cleanup
+  await flyHomeViaApi(page);
+
+  // Full tank before departure — deterministic baseline (ISS-082 hook; dispatch would auto-refuel anyway).
+  await setFuelFull(page, 'plane-starter');
+
+  // ISS-096: the popup must offer Relocate for a FLYING plane too. Dispatch the starter on a leg via
+  // the API, then slow the sim to 1x so the leg cannot land during the UI steps (at 1x even the
+  // shortest leg takes minutes of real time) — "still flying its original destination" below is
+  // deterministic regardless of how fast the UI moves.
+  const nearest = await nearestToHub(page);
+  expect(nearest.icao).not.toBe(POPUP_AIRPORT.icao); // popup click target must differ from the active leg
+  await setScale(page, 1);
+
+  const flyRes = await page.request.post('/api/planes/plane-starter/fly', { data: { destIcao: nearest.icao } });
+  expect(flyRes.ok()).toBeTruthy();
+  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 API dispatch to take effect (status "flying" + dest set)' }).toBe(true);
+
+  await page.goto('/');
+
+  // Same map-ready waits as the grounded popup test above: airport count rendered + a snapshot with
+  // the plane in the planes source — 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);
+
+  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 now lists ALL planes (ISS-096) — the flying starter is selectable even though it
+  // is not grounded; while flying its option shows the DEPARTURE airport.
+  const planeSel = page.getByTestId('airport-popup-plane');
+  await expect(planeSel).toBeVisible();
+  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();
+
+  // The click fires the queue POST asynchronously — poll until it took effect: the leg is APPENDED to
+  // the flight queue while the plane keeps flying its original destination.
+  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 && p.queue.includes(POPUP_AIRPORT.icao);
+  }, { timeout: 15_000, message: 'waiting for the popup relocate click to take effect (queue contains LFRS, still flying original dest)' }).toBe(true);
+});

e2e/right-pane.spec.ts

@@ -210,6 +210,8 @@ test('open packages render with names, reward and deadline; Load is enabled at a
   await expect(rows.first(), 'an open package row appears').toBeVisible({ timeout: 15_000 });
   await expect(rows.first()).toContainText(/→/);
   await expect(page.locator('[data-testid^="open-package-reward-"]').first()).toContainText('€');
+  // v0.48.0 (ISS-095): leg distance on the job row — integer km, no space before "km".
+  await expect(page.locator('[data-testid^="open-package-distance-"]').first()).toHaveText(/^\d+km$/);
 
   // Deterministic target: a hook-created EDDF package — Load is enabled (starter at origin, free slot).
   const nearest = await nearestToHub(page);
@@ -220,6 +222,8 @@ test('open packages render with names, reward and deadline; Load is enabled at a
   // 4 t is within the starter ATR's 4.8 t maxPayloadKg, so Load stays enabled below.
   await expect(page.getByTestId(`open-package-cargo-${pkg.id}`)).toContainText('4.0t');
   await expect(page.getByTestId(`open-package-reward-${pkg.id}`)).toContainText(eur(pkg.reward));
+  // v0.48.0 (ISS-095): the hook-created package's row shows its leg distance too.
+  await expect(page.getByTestId(`open-package-distance-${pkg.id}`)).toHaveText(/^\d+km$/);
   const loadBtn = page.getByTestId(`load-${pkg.id}`);
   await expect(loadBtn).toBeEnabled();
 

lib/deriveEvents.test.ts

@@ -38,6 +38,7 @@ const basePackage = (id: string): PackageState => ({
   cargoCount: 2,
     weightKg: 600,
     special: null, // v0.37.0 (ISS-073) — no special status by default in fixtures
+    distanceKm: 1839, // v0.48.0 (ISS-095) — EDDF→LEMD great-circle distance
     deadlineSimTime: 0,
   status: 'open',
   planeId: null,

lib/format.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest';
-import { formatCargo, formatCash, formatDeadlineRelative, formatDuration, formatFuel, formatSimClock } from './format';
+import { formatCargo, formatCash, formatDeadlineRelative, formatDuration, formatFuel, formatKm, formatSimClock } from './format';
 
 describe('formatCash', () => {
   it('formats EUR with thousands separators and two decimals', () => {
@@ -30,6 +30,14 @@ describe('formatCargo', () => {
   });
 });
 
+describe('formatKm', () => {
+  it('rounds to integer km with no space before "km" (v0.48.0, ISS-095)', () => {
+    expect(formatKm(554)).toBe('554km');
+    expect(formatKm(214.6)).toBe('215km');
+    expect(formatKm(0)).toBe('0km');
+  });
+});
+
 describe('formatSimClock', () => {
   it('formats epoch ms as a UTC wall-clock string with seconds (deterministic across timezones)', () => {
     expect(formatSimClock(Date.UTC(2026, 8, 17, 14, 5))).toBe('2026-09-17 14:05:00 UTC');

lib/format.ts

@@ -16,6 +16,11 @@ export function formatCargo(cargoType: string, weightKg: number): string {
   return `${cargoType} ${(weightKg / 1000).toFixed(1)}t`;
 }
 
+// Leg distance for contract rows (v0.48.0, ISS-095): "554km" — integer km, no space before "km".
+export function formatKm(km: number): string {
+  return `${Math.round(km)}km`;
+}
+
 // Special-status badge label (v0.37.0, ISS-073): "priority" → "Priority".
 export function formatSpecialLabel(special: string): string {
   return special.charAt(0).toUpperCase() + special.slice(1);

lib/game/state.ts

@@ -62,6 +62,8 @@ export interface PackageState {
   weightKg: number;
   // Special status (v0.37.0, ISS-073) — key into lib/game/specials.ts SPECIALS; null = none.
   special: string | null;
+  // Great-circle leg distance in km (v0.48.0, ISS-095) — computed from airport coords, not stored.
+  distanceKm: number;
   deadlineSimTime: number;
   // 'ignored' (v0.29.0, ISS-047 part B) = a dismissed open job — terminal, leaves the market.
   status: 'open' | 'loaded' | 'delivered' | 'expired' | 'abandoned' | 'ignored';
@@ -100,6 +102,12 @@ export async function getStateSnapshot(): Promise<StateSnapshot> {
   const nameByIcao = new Map(fc.features.map((f) => [f.properties.icao, f.properties.name]));
   const nameOf = (icao: string) => nameByIcao.get(icao) ?? icao;
   const coordsByIcao = new Map(fc.features.map((f) => [f.properties.icao, f.properties]));
+  // v0.48.0 (ISS-095): leg distance for the UI — same haversine as live-plane math; 0 if a coord is missing.
+  const legDistanceKm = (originIcao: string, destIcao: string) => {
+    const from = coordsByIcao.get(originIcao);
+    const to = coordsByIcao.get(destIcao);
+    return from && to ? haversineKm(from.lat, from.lon, to.lat, to.lon) : 0;
+  };
 
   // Analytic movement (v0.7.0): a flying plane's stored lat/lon/fuel are its
   // departure values — live position and fuel are pure functions of the clock.
@@ -162,6 +170,7 @@ export async function getStateSnapshot(): Promise<StateSnapshot> {
       cargoCount: p.cargoCount,
       weightKg: p.weightKg,
       special: p.special,
+      distanceKm: legDistanceKm(p.originIcao, p.destIcao), // v0.48.0 (ISS-095)
       deadlineSimTime: p.deadlineSimTime,
       status: p.status,
       planeId: p.planeId,

lib/openapi.test.ts

@@ -136,6 +136,7 @@ describe('OpenAPI spec', () => {
       'deadlineSimTime',
       'destIcao',
       'destName',
+      'distanceKm', // v0.48.0 (ISS-095) — great-circle leg distance in km
       'id',
       'originIcao',
       'originName',

lib/openapi.ts

@@ -633,6 +633,7 @@ export const openApiSpec = {
           cargoCount: { type: 'integer' },
           weightKg: { type: 'number', description: 'Package weight in kg (v0.27.0) — drives load validation and the per-kg payout part.' },
           special: { type: ['string', 'null'], description: 'Special status from the specials registry (v0.37.0); null = none.' },
+          distanceKm: { type: 'number', description: 'Great-circle leg distance in km (v0.48.0) — computed server-side from airport coordinates, not stored.' },
           deadlineSimTime: { type: 'integer', description: 'Sim-clock epoch ms (game time)' },
           // 'expired' = an open OR loaded package whose deadline passed on a tick;
           // loaded expired packages keep their slot, deliver no reward, abandon free.
@@ -651,6 +652,7 @@ export const openApiSpec = {
           'cargoType',
           'cargoCount',
           'weightKg', // v0.27.0 (ISS-045) — package weight in kg
+          'distanceKm', // v0.48.0 (ISS-095) — great-circle leg distance in km
           'deadlineSimTime',
           'status',
           'planeId',

package.json

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