Flight queue UI: dotted map line, left-pane Queue sub-section, e2e (ISS-043 part 2)

components/LeftPane.tsx

@@ -107,6 +107,10 @@ export default function LeftPane({ state, loading, error, onRefresh, applySnapsh
   // a sensible default (first grounded plane with fuel below max).
   const [refuelPlaneId, setRefuelPlaneId] = useState<string | null>(null);
 
+  // ISS-043 (v0.26.0): flight-queue "add" destination — one shared pick across every on-board
+  // block's queue-add select (the e2e fleet is a single plane; per-block state would be dead weight).
+  const [queueAddDestIcao, setQueueAddDestIcao] = 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
@@ -200,7 +204,11 @@ export default function LeftPane({ state, loading, error, onRefresh, applySnapsh
   // 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-043 (v0.26.0): a plane with queued legs always shows its block too — the queue is the
+  // reason it's here even when grounded with nothing on board.
+  const onboard = state
+    ? state.planes.filter((p) => p.status === 'flying' || slotsUsedFor(state, p.id) > 0 || (p.queue?.length ?? 0) > 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
@@ -455,6 +463,53 @@ export default function LeftPane({ state, loading, error, onRefresh, applySnapsh
                         </div>
                       );
                     })}
+                    {/* ISS-043 (v0.26.0): flight queue — the not-yet-started legs with cancel, plus an
+                        add control reusing this pane's already-fetched airport options (no second fetch). */}
+                    <div className="queue-subsection">
+                      <span className="queue-heading">Queue</span>
+                      {plane.queue.map((icao, i) => (
+                        <div key={`${icao}-${i}`} data-testid={`queue-leg-${i}`} className="queue-row">
+                          <span className="contract-route">
+                            {airportOptions?.find((a) => a.icao === icao)?.name ?? icao} ({icao})
+                          </span>
+                          <button
+                            type="button"
+                            data-testid={`queue-cancel-${i}`}
+                            className="pane-btn"
+                            disabled={actionsBusy}
+                            onClick={() => void runAction(`/api/planes/${plane.id}/queue/cancel`, { index: i })}
+                          >
+                            Cancel
+                          </button>
+                        </div>
+                      ))}
+                      <div className="market-row">
+                        <select
+                          data-testid="queue-add-dest"
+                          aria-label="Airport to add to the flight queue"
+                          value={queueAddDestIcao ?? ''}
+                          onChange={(e) => setQueueAddDestIcao(e.target.value || null)}
+                        >
+                          <option value="">Select an airport…</option>
+                          {airportOptions?.map((a) => (
+                            <option key={a.icao} value={a.icao}>
+                              {a.name}
+                            </option>
+                          ))}
+                        </select>
+                        <button
+                          type="button"
+                          data-testid="queue-add"
+                          className="pane-btn"
+                          disabled={actionsBusy || queueAddDestIcao === null}
+                          onClick={() => {
+                            if (queueAddDestIcao) void runAction(`/api/planes/${plane.id}/queue`, { destIcao: queueAddDestIcao });
+                          }}
+                        >
+                          Add to queue
+                        </button>
+                      </div>
+                    </div>
                   </div>
                 );
               })

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, hoverTraceGeoJson, planesGeoJson, routesGeoJson, type AirportCoord, type PlaneFeatureProps } from '../lib/mapData';
+import { hoverRouteGeoJson, hoverTraceGeoJson, planesGeoJson, queuedRoutesGeoJson, routesGeoJson, type AirportCoord, type PlaneFeatureProps } from '../lib/mapData';
 import { weatherFor } from '../lib/weather';
 import { approxLocalTime } from '../lib/localTime';
 
@@ -28,6 +28,10 @@ const PLANES_GROUNDED_LAYER_ID = 'planes-grounded';
 const PLANES_FLYING_LAYER_ID = 'planes-flying';
 const ROUTES_SOURCE_ID = 'routes';
 const ROUTES_LEGS_LAYER_ID = 'routes-legs';
+// ISS-043 (v0.26.0): the dotted queue line — a flying plane's NOT-yet-started 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-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';
@@ -95,6 +99,11 @@ export default function FlightMap({ state, hovered, applySnapshot }: MapProps) {
     if (routesSource && airportsIndexRef.current) {
       void routesSource.setData(routesGeoJson(st, airportsIndexRef.current));
     }
+    // ISS-043 (v0.26.0): the dotted queue line — same airport-index guard as the solid legs above.
+    const queueRoutesSource = map.getSource(QUEUE_ROUTES_SOURCE_ID) as maplibregl.GeoJSONSource | undefined;
+    if (queueRoutesSource && airportsIndexRef.current) {
+      void queueRoutesSource.setData(queuedRoutesGeoJson(st.planes, airportsIndexRef.current));
+    }
   };
 
   useEffect(() => {
@@ -357,6 +366,27 @@ 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
+        // "planned/future", distinct from the solid 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',
+            data: queuedRoutesGeoJson(stateRef.current?.planes ?? [], airportsIndexRef.current ?? new Map()),
+          });
+        }
+        if (!map.getLayer(QUEUE_ROUTES_LAYER_ID)) {
+          map.addLayer({
+            id: QUEUE_ROUTES_LAYER_ID,
+            type: 'line',
+            source: QUEUE_ROUTES_SOURCE_ID,
+            paint: {
+              'line-color': '#64748b', // muted slate — planned legs, not actively flying
+              'line-width': 3,
+              'line-dasharray': [0.1, 1.5], // dotted — distinct from solid legs and the [2,2] hover dash
+            },
+          });
+        }
         if (!map.getSource(PLANES_SOURCE_ID)) {
           map.addSource(PLANES_SOURCE_ID, { type: 'geojson', data: planesGeoJson(stateRef.current) });
         }