← Component Specifications

KCM Airport Detail — Design Gap

Work item AB#2450 Epic AB#1821 Status Awaiting design

The gap

Figma covers the KCM airport list but not the airport detail. Node 4562:8249 “Airports” is an alphabetical list screen (ABQ, ANC, ATL… with chevrons) — the wrong granularity for the route it would need to back. The Design-Source Gap Inventory searched all four file keys for a single-airport detail frame and found none; the route was reclassified from UNCERTAIN to GAP on that pass.

Unlike the MEC scaffolds, this is not a mock-data problem: both sides render live data for the same airport. The gap is purely design-side — the Blazor page's layout (IATA hero, check-in notes, KCM airlines list) was derived from what the API contract offers, and the contract is thin. KCMAirportItem carries an airport code, a name, free-text check-in notes and a map URL; the page's own comments record that a city line, per-airport KCM/CASS badges and a structured terminal/hours/status table all had no contract backing and were dropped or never built.

What ships today

AspectNative (XAML)Blazor (this build)
Surface KCMAirportDetailsPage, titled “Airport Details” /kcm/airport/{Code}, titled “Airport Detail”, in AlpaScreen chrome
Content Terminal map and the airport's check-in notes IATA hero (code + airport name), CHECK-IN NOTES section, VIEW AIRPORT MAP link when a mapUrl exists, then the KCM AIRLINES reference list
Data Live KCM feed Same live feed via IScaffoldJumpseatQueries; identical check-in notes observed for ATL
Missing-airport state — EmptyState for an unresolvable code (added in AB#2390 after the page half-rendered without explanation)

Side by side

Captured 2026-08-12 on an iPhone 17 Pro Max simulator (iOS 26.4), build commit 34737cb4, against live data — the same airport on both sides (ATL), showing identical check-in notes.

Native (XAML, shipped today)

Native XAML KCM Airport Details page for ATL — terminal map and check-in notes

KCMAirportDetailsPage — map first Reached KCM → KCM Airports → ATL. Titled “Airport Details”; the terminal map leads, with the check-in notes beneath it.

Blazor (this build, for review)

Blazor /kcm/airport/ATL page — IATA hero, check-in notes and KCM airlines list

KcmAirportDetailPage — contract-derived layout /kcm/airport/ATL, titled “Airport Detail”. IATA hero with the airport name, the same check-in notes as native, a map link instead of an inline map, and the KCM AIRLINES list — a reference list, because KCM participation is airline-level and the contract has no per-airport airline relation.

Verification

Walked live on an iPhone 17 Pro Max simulator, build 34737cb4:

native KCM -> KCM Airports -> ATL -> "Airport Details" (terminal map + check-in notes) blazor /kcm/airport/ATL -> "Airport Detail" (IATA hero + notes + KCM Airlines) check-in notes: identical text on both sides (same live feed) error banner: none

The contract facts are from the page source, not inference: KcmAirportDetailPage.razor's comments record that KCMAirportItem carries code and name only for the hero, that the scaffold's city line and per-airport badges had no contract backing, and that the structured checkpoint table is a backend model gap tracked in the KCM data-gap doc.

Open questions

#ForQuestion
1DesignDoes the airport detail page get its own frame, or is it derived from the existing Airports list frame (node 4562:8249) plus standard sections? It is the only KCM screen without a frame at its own granularity.
2DesignMap treatment: native leads with an inline terminal map; Blazor demotes it to a “VIEW AIRPORT MAP” link. Which is the intended hierarchy for a pilot standing at the airport?
3DesignShould the KCM Airlines list render on every airport's detail page? Participation is airline-level — the list is identical for every airport — so it is reference material, not airport data. Keep it here, move it behind a link, or leave it to /kcm/airlines?
4ProductIs a structured checkpoint table (terminal, hours, status) wanted? KCMAirportItem has no backing fields for one — free-text checkinNotes is all the feed provides — so this is a backend model change before it is a design change.
5CommsTitle copy: native says “Airport Details”, Blazor says “Airport Detail”. Trivial, but one should be canonical before a design frame bakes it in.

References