Flight Finder Audit
The live Blazor Flight Finder (Jumpseat) pages measured against the Figma design source and the
documented component specs — all 9 screens from the
Flight Finder page spec, plus the implemented-but-unspecced
/jumpseat/details page. Capture-only: findings are classified and logged here; fixes are separate
work items.
Outcome in one paragraph. The Flight Finder surface is structurally complete for the
search → results → filter loop (search form, segmented trip pills, advanced search, results from the live API,
sort/filter overlay, recent/saved lists all exist and work), and the Advanced Search and Filter/Sort overlays
match their component specs (D44, D41) closely. The two headline problems are functional, not cosmetic:
FF-1 — the Flight Details page is a hardcoded static mock (every result card opens the same
UA 1482 DEN→MIA content regardless of what was tapped), and FF-2 — the Airline Policies
detail screen (Figma
4713:25339) does not exist at all; list rows self-link with a dead chevron.
Both have since been resolved. FF-2's detail screen was built 28 minutes after this audit ran
(see the FF-2 and FF-3 rows in §3); FF-1's mock page was replaced by the Figma inline-expand (D64) and then, for
tapped flight alerts, by a real data-driven detail screen (D66) — see the FF-1 row in §4.
Below those, the results flight card renders a different anatomy than the Figma results mock
(flight-card-og), and a cluster of smaller copy/typography/affordance divergences is logged in §4.
1 · Method
- Mapped the 9 spec screens (Figma node → implemented route) from pages/flight-finder.html; confirmed
psH738AqHDxuMyFm897f9ris the design-library source of record (figma-component-specs.json_resync, 2026-06-17). Superseded 2026-07-30: the working file isowEYzHf7FrHRvWC2u82UOl— see Figma Sync Procedure § Source of record. The nodes cited in this audit have not been re-verified against it. - Pulled a reference screenshot of each Figma node with
get_screenshot(393×852 frames). - Built the app from the
imp/blazor-hybridtip and deployed to a visible iPhone 17 Pro Max simulator. - Walked every route live via MauiDevFlow — including a real flight search (ATL→TPA, live production API) to reach genuine results, the sort/filter overlay from real state, and a real card-tap into
/jumpseat/details. - Verified styling claims at DOM level with CDP
Runtime evaluate(computed styles), not from screenshots alone. - Classified every divergence against the component specs and decisions record before logging it — a divergence that a spec already documents (e.g. D55) is cited, not re-flagged.
2 · Screen verdict matrix
| Screen | Figma node | Route | Verdict | Summary |
|---|---|---|---|---|
| Search | 4713:25117 | /jumpseat/search |
DIVERGES | Structure matches (pills, 3 fields, advanced, chevron CTA, 3-up footer); copy/labels, date format, swap affordance and tab-nav styling diverge (FF-6…FF-9). |
| Filter/Sort overlay | 4713:25163 | modal on results | PASS* | Matches D41 component structure (tabs, Airline/Aircraft/Flight Status, Apply/Clear). Small chrome deltas vs the page mock (FF-10). |
| Results | 4713:25168 | /jumpseat/results |
DIVERGES | Live API works; card anatomy is not the Figma flight-card-og and has no spec of its own (FF-4); header controls differ (FF-5). |
| Flight Details | — none — | /jumpseat/details |
STATIC MOCK | Page is hardcoded UA 1482 DEN→MIA with no @code block, parameters or API call — selected flight never flows through (FF-1). |
| Recent Searches | 4713:25203 | /jumpseat/recent |
DOCUMENTED | Row anatomy divergence (persistent action column vs swipe-to-reveal) already recorded as unresolved in the Saved Search Card spec (D55). FF-12. |
| Saved Searches | 4713:25253 | /jumpseat/saved-searches |
DOCUMENTED | Same D55 treatment (heart-remove instead of swipe trash). FF-12. |
| Saved Flights | 4713:25365 | /jumpseat/saved |
DIVERGES | Simplified rows vs the full flight-card-og anatomy (legs, layover chips, inline expand); persistent bell/trash vs swipe-reveal. Known LIB-queue gap, partially documented (FF-11). |
| Airline Policies — Search | 4713:25303 | inline on list page | PASS* | Superseded 2026-08-12 — rebuilt to the design's search state: a title-bar search icon swaps the nav row for the white search field (mag · field · X, the X clears and closes); rows drop the chevron while searching, per the state's own row variant. Filter logic (name/IATA/ICAO) unchanged. |
| Airline Policies — List | 4713:25321 | /jumpseat/airline-policies |
PASS* | Superseded 2026-08-12 — FF-3 was already resolved 2026-07-18; the 2026-08-12 rebuild (own alpa-jspol-* classes) removes the StatusBadge pills (carrier flags stay on the detail page), and rows now use the design's » chevron (icons/chevron.svg) on border/default rules. |
| Airline Policies — Detail | 4713:25339 | /jumpseat/airline-policy |
PASS* | PolicyViewModel already carries the fields the design needs.PolicyViewModel does not carry the design's four fields.
Aligned 2026-08-12 — body brought to the design: heading/weight mapping (Lora SemiBold → Futura PT Book 400), CMS <strong><u> section headings de-underlined and mapped to Display/XS, CMS spacer paragraphs stripped in CmsHtml (16/8px rhythm measured on device), hr hidden, title-bar hairline (border/subtle) added via FixedContent, uppercase title. |
3 · What matches (verified live)
- Advanced Search (D44) — expanded content matches the component spec field-for-field: Avoid Connection, Connect Via, Min Connection Time + Length of Travel range sliders, the 3 checklist rows (Search by Arrival Date / Include Cargo Carriers / Show Codeshare), and Save Search to Favorites.
- Filter/Sort overlay (D41) — Sort/Filter pill toggle, Airline / Aircraft / Flight Status filter accordions, sort radio list (Arrival Time, Departure Time, Connection Time, Number of Connections, Total Trip Time), APPLY + clear actions, ✕ dismiss returning to results with state kept client-side.
- Trip-type segmented pills — Nonstop / One Stop / Multileg, white container, blue selected pill.
- SEARCH FLIGHTS chevron-capped primary CTA and the ADVANCED SEARCH pill-38 trigger.
- 3-up footer — Recent Searches / Saved Searches / Saved Flights icon buttons (D42 pattern).
- Live data end-to-end — a real ATL→TPA search hit the production flight-search API and rendered genuine flights (WN 516, DL 2605, DL 1227, DL 1587); the summary line reflected the real query.
- Recent/Saved Searches rows — exactly match the implemented Saved Search Card spec (D55): route codes + trip-type · date meta line + Action Column (heart / search-history), heart filled red on saved items.
4 · Discrepancy log
| # | Sev | Where | Finding | Classification / suggested disposition |
|---|---|---|---|---|
| FF-1 RESOLVED | High | JumpseatDetailsPage.razor |
Page is a fully hardcoded static mock — UA 1482 DEN→MIA literals in markup, no @code block, no
parameters, no FindFlightInfoAsync call. Tapping the Southwest WN 516 ATL→TPA result opens
"United Airlines · UA 1482 · DEN→MIA". Also: the screen doesn't exist in the Figma set at all — the design expands
results inline (flight-card-og expand chevron). |
FindFlightInfoAsync), or (b) drop the page and build the Figma inline-expand. File as Bug; the
inline-vs-page question is a design question (proposed DQ).Resolved — both halves, in two passes. (b) first: the static mock page was deleted and the Figma inline-expand built into FlightCard (D64,
2026-07-18, AB#2299). Then (a), for the entry point D64 did not cover — a tapped flight alert now opens a
dedicated detail screen for the flight it names, with real data flowing through
FindFlightInfoAsync on landing, on pull-to-refresh and on app resume
(D66, 2026-08-14, AB#2461/AB#2465). The inline-vs-page question
resolved as both, split by entry point: results expand inline, a push tap gets the screen. The
results-card tap remains inline-only and is the one open piece. |
| FF-2 RESOLVED | High | JumpseatAirlinePoliciesPage.razor:25 |
4713:25339) is not implemented. Rows render
href="/jumpseat/airline-policies" — a self-link — so the chevron affordance goes nowhere.Resolved 2026-07-18, confirmed 2026-07-31. This was accurate when audited ( Audited: 2026-07-18 16:35 ET) and superseded 28 minutes later:
7654d893 at 17:03 the same day built the detail screen. Rows now link to
/jumpseat/airline-policy?airline=…, which resolves to
JumpseatAirlinePolicyDetailPage.razor. |
No longer actionable as written. The residual gap is narrower and is a data-shape
ask, not a build: contrary to the original note, PolicyViewModel does not
expose the design's four fields — it carries a single CMS Description and no
last-updated date. Tracked as KCM-7 in
kcm-spec-reconciliation.html. |
| FF-3 RESOLVED | Med | Airline Policies list | Resolved 2026-07-18 in the same commit as FF-2. |
Fixed — JumpseatAirlinePoliciesPage.razor:64 now applies
.OrderBy(p => p.Name, StringComparer.OrdinalIgnoreCase). |
| FF-4 | Med-High | Results card (.alpa-flight-card) |
Live card anatomy (carrier name top-left, duration top-right, times + solid timeline with endpoint dots,
airports, flight number, nav chevron ›) is not the Figma results mock's flight-card-og (edge-aligned bold IATA +
times, per-leg dotted carrier rails, layover chips, date line, duration+type line, inline expand chevron ⌄).
flight-card-og is documented (D15–D17) as a Track B native component (FlightCardView : ContentView);
the Blazor results card has no spec — page-compositions.html slot 5 still
says "Results layout not captured … TBD". |
Spec gap + design divergence. Needs a decision: adopt the current Blazor card as the documented control (spec it), or rebuild toward flight-card-og. Ties to the known LIB-queue "flight-card expanded structure" gap. |
| FF-5 | Low | Results header | Figma: back chevron + "DEN to MIA • Multileg • Mon Apr 20" + single sliders (filter/sort) icon. Live: no back, "ATL to TPA · Nonstop · Sun Jul 19", two outlined buttons "Sort" and "Filter". | Divergence; the split Sort/Filter buttons arguably communicate better. Disposition with FF-13. |
| FF-6 | Low | Search form copy | Labels FROM / TO vs Figma "Origin" / "Destination"; placeholders "Origin airport or city" / "Destination airport or city" vs Figma "City or Airport" (both fields). | Copy divergence — cheap to align once design confirms which copy is current. |
| FF-7 | Low | Date display | Depart field shows "Jul 19, 2026"; recent/saved rows "Mon Apr 20"; Figma uses weekday-first long form ("Monday, April 20"). | Formatting divergence — pick one convention across the feature. |
| FF-8 | Low | Origin/destination swap | Live: circular ⇅ swap button centered between the fields. Figma: dashed vertical rail + plane glyph to the right of the two fields (no explicit swap control). | Divergence — the live control adds real utility; needs design blessing, not necessarily a revert. |
| FF-9 | Med | Interior tab nav (.alpa-tab) |
DOM-verified: both states render Futura PT, text-transform:uppercase, 12px; active is blue
#007bc2 text + 3px blue underline. The component
spec says default = Afacad SemiBold (no decoration), active = Futura PT Demi + underline, mixed case, navy.
First tab also sits flush against the viewport edge and nearly touches the second ("FLIGHT FINDER" / "AIRLINE
POLICIES" ~0 gap). |
Styling divergence against an existing spec — fixable in CSS. (Spec itself still awaits its naming D-number.) |
| FF-10 | Low | Filter overlay chrome | vs page mock 4713:25163: missing "Sort & Filter" title; ✕ is top-left (Figma: top-right);
APPLY is bottom-pinned plain rectangle (Figma: chevron-capped, directly under content); "clear" lowercase
(Figma "CLEAR" uppercase); unselected segment white (Figma light-blue #dfedf9). |
Cosmetic deltas on an otherwise spec-matching control; batch into one styling pass. |
| FF-11 | Med | Saved Flights rows | Live rows are a simplified saved-card variant (route codes, carrier · flight · date, times → duration, persistent
bell + trash icons). Figma 4713:25365 shows full flight-card-og rows (per-leg rails, layover chips,
inline expand) with swipe-to-reveal bell/trash. |
FIXED — WI-C (AB#2314): rows are real collapsed FlightCards (flight card-og master, inline expand included) inside SwipeRevealRow with the bell/trash tray; persistent icons removed. |
| FF-12 | — | Recent/Saved Searches rows | Row anatomy (persistent Action Column vs Figma large-IATA + plane glyph + swipe-to-reveal) — already recorded as an unresolved divergence in the Saved Search Card spec (D55, 2026-07-14). | FIXED — WI-C (AB#2314): swipe-to-reveal trays built on both lists (save heart / trash), row-tap re-runs; the D55 divergence paragraph in the Saved Search Card spec is closed. |
| FF-13 | Med | All Jumpseat sub-pages | Figma shows a ‹ back chevron on every sub-page header (Recent, Saved, Saved Flights, Policies, Results).
Live: none of the six pages set AlpaScreen ShowBack — other implemented pages
(e.g. KcmAirlinesPage) do. |
Navigation-affordance divergence; one-attribute fix per page once confirmed. |
| FF-14 | Low | Search/results title bar | Live shows the AlpaScreen "Jumpseat" title band between top nav and interior tabs; the Figma search mock goes straight from top chrome to the tab strip. | Template-level chrome question (AlpaScreen standard vs per-design headers) — affects more than this feature. |
| FF-15 RESOLVED | Low | Airline Policies list rows | 4713:25303); (b) rows add ALPA/CASS StatusBadge atoms not in the Figma mock (data enrichment);
(c) chevron glyph › vs Figma ».Resolved 2026-08-12 in the Figma-alignment rebuild of the list page. |
(a) search is now the design's toggled title-bar state; (b) pills removed — carrier flags surface on the
detail page's "ALPA/CASS Carrier" line; (c) rows use the » vector (icons/chevron.svg). |
| FF-16 | Med | Testability — all Jumpseat pages | No element on any Jumpseat page carries a pagename.semanticIdN automation id (top-nav ids only;
every form input, pill, card and button has an empty id). This audit had to drive the UI by placeholder
text and class selectors. |
Blocks the walkthrough → automated-UI-test-replay convention used for Login/Promo/Favorites (BlazorWalkthroughTests). Add ids when any FF fix touches these pages. |
| FF-17 | Med | page-compositions.html § Flight Finder | The composition table describes an older design: "ONE WAY | ROUND TRIP" 2-tab pills, a blue (#007bc2)
form container with white "Departure/Arrival Airport" labels, and a "Flight Finder" nav-controls bar with back — none
of which match the current Figma node 4713:25117 (Nonstop/One Stop/Multileg, plain light form,
no title bar) or the live page. Results slot still "TBD". |
STALE SPEC — refresh the section from node 4713:25117/25168
(doc-only change, separate from code fixes). |
5 · Visual comparison
Search
Figma 4713:25117
Live /jumpseat/search
Live — Advanced Search open (matches D44)
Results → Details
Figma 4713:25168 (flight-card-og rows)
Live — real ATL→TPA API results (FF-4/FF-5)
Live /jumpseat/details — static UA 1482 mock (FF-1)
Filter / Sort overlay
Figma 4713:25163
Live — Filter tab (FF-10)
Live — Sort tab (5 radio options)
Recent / Saved Searches / Saved Flights
Figma 4713:25203 (swipe-to-reveal)
Live — Saved Search Card rows (D55)
Live — saved rows, heart-remove (D55)
Figma 4713:25365 (flight-card-og + swipe)
Live — simplified rows, persistent bell/trash (FF-11)
Airline Policies
Figma 4713:25321 (alphabetical)
Live 2026-08-12 — Figma-aligned rebuild (FF-3/FF-15 resolved)
Figma 4713:25339 — built 2026-07-18; body structure still diverges (FF-2)
Figma 4713:25303 — implemented as inline filter (FF-15)
Figma 4713:25253 (for FF-12 reference)
6 · Cross-cutting chrome (recorded, out of scope)
- Bottom tab bar — Figma mocks show 5 tabs (HOME / JUMPSEAT / KCM / FTDT / MY MEC); live shows the user-customizable 3-tab default. Owned by the Shortcut-Nav/tab-bar workstream (AB#2272 server-driven tab bar).
- Top nav icon side — Figma mocks predate the resolved hamburger/quick-nav swap (AB#2281); live arrangement is the current decision, not a divergence.
- Etiquette / Mission tabs — present live in the interior nav per design; their content is outside the 9-screen Flight Finder set and was not audited.
7 · Suggested work-item breakdown
Bug — Flight Details static mock (FF-1): wire selected-flight data through, or replace with the Figma inline-expand; includes the inline-vs-page design question.Done — inline-expand 2026-07-18 (D64, AB#2299); dedicated alert-tap detail screen 2026-08-14 (D66, AB#2461/AB#2465). The design question resolved as both, split by entry point.Bug — Airline Policies detail missing + list unsorted (FF-2, FF-3): build the detail screen fromDone 2026-07-18 (PolicyViewModel; sort the list.7654d893) — both shipped in one commit. What remains is a backend ask for four discrete policy fields plus a last-updated date, tracked as KCM-7 in kcm-spec-reconciliation.html.- Task — Results/Saved-Flights card reconciliation (FF-4, FF-11): decide the Blazor flight-card anatomy (adopt-and-spec current vs rebuild to flight-card-og), then align both screens.
- Task — styling/copy alignment pass (FF-5…FF-10, FF-13…FF-15): tab-nav CSS, labels/placeholders, date format, back affordances, filter-overlay chrome — one batch once design confirms dispositions.
- Task — automation ids for Jumpseat pages (FF-16): apply
pagename.semanticIdN, then extend BlazorWalkthroughTests coverage. - Docs — refresh page-compositions Flight Finder section (FF-17).