UXS-004 — Mission Library

Status · Draft v0.1 Visual fidelity · Verified against prototype (P04_mission-library.html) IA anchor · §surfaces/missions · §topbar-patterns · §shared-tokens Related PRD · PRD-004 Related RFCs · RFC-002 (mission schema), RFC-004 (URL params)

Why this UXS exists

The mission library is the most HTML-intensive screen — a card grid, filter bar, and detail panel. This UXS defines the card appearance, agency colour system, filter states, and detail panel content layout.

Principles

• Agency colour is the dominant identity signal on each card
• The "first" line earns the click — it must be readable at card size
• Filter state is immediately obvious
• The detail panel tells the mission's story before it lists its data

Scope

In scope: nav bar, filter bar, card grid, card states, detail panel (OVERVIEW, GALLERY, LEARN tabs), agency logo treatment. Non-goals: card sort order, filter animation. Boundary note: Gallery image loading from NASA API belongs in the screen module.

Theme

Dark only.

Tokens

Inherited from IA

All shared tokens, agency colour tokens.

Defined here

card-bg:          rgba(8,8,24,0.95)
card-border:      rgba(255,255,255,0.06)
card-border-hover: rgba(255,255,255,0.15)
card-selected:    1px solid [agency-color], box-shadow 0 0 20px [agency-color]22
filter-active:    rgba(68,102,255,0.25) bg, rgba(68,102,255,0.5) border
filter-inactive:  transparent bg, rgba(255,255,255,0.1) border

Layout

Filter bar (below nav, 40px)

Two filter groups: DESTINATION (ALL / MARS / MOON) and STATUS (ALL / ACTIVE / FLOWN / PLANNED). Each filter is a pill button.

Card grid

Responsive: 3 columns at full width. Each card ~200px wide. Card contains:

• Agency logo top-left (40px)
• Agency colour accent bar left edge (4px)
• Mission name: Bebas Neue 22px
• Type line: Space Mono 7px, rgba(255,255,255,0.4)
• Year: Space Mono 8px, rgba(255,255,255,0.3)
• "First" line: Space Mono 8px, rgba(255,255,255,0.7)

Detail panel (right, 340px)

Same panel component as explore screen. Three tabs: OVERVIEW, GALLERY, LEARN.

OVERVIEW contains:

• Mission header (agency, name, type, status badge)
• Data grid (departure, arrival, transit, vehicle, payload, delta-v)
• Editorial description (Crimson Pro italic 13px)
• "Road to Mars" or "Capability" contextual block (left-border accent)
• FLY THIS MISSION button (if applicable)

GALLERY: image grid from NASA Images API, 2 columns, captions below each.

LEARN: tiered links (INTRO teal, CORE blue, DEEP orange).

Component states

Card (default): card-bg, card-border, hover lifts slightly Card (hovered): card-border-hover, subtle shadow Card (selected): agency-colour border, panel open Filter pill (active): filter-activeFilter pill (inactive): filter-inactiveStatus badge (ACTIVE): green tint background, "ACTIVE" text Status badge (FLOWN): neutral, "FLOWN" Status badge (PLANNED): blue tint, "PLANNED" Data quality badge (partial/reconstructed): amber, shown in panel header FLY button (enabled): same as configurator FLY button Gallery image (loading): grey placeholder rect with spinner Gallery image (loaded): image with caption below

Accessibility

• Cards: role="button" or <button>, keyboard navigable, enter to select
• Filter pills: role="radio" in a role="radiogroup" per filter group
• Detail panel: semantic headings, screen-reader accessible

Acceptance criteria

• [ ] All 32 mission cards visible, correctly coloured by agency
• [ ] MARS filter shows 16 cards; MOON filter shows 16 cards
• [ ] ACTIVE filter shows only active missions
• [ ] Selected card has agency-colour border
• [ ] Detail panel opens on card click
• [ ] OVERVIEW tab shows all mission data fields
• [ ] GALLERY tab shows NASA Images API results or placeholder
• [ ] LEARN tab shows tiered links in three colour tiers
• [ ] FLY THIS MISSION button present for missions with arc data
• [ ] FLY button navigates to /fly?mission=[id]

---

Extension — FLIGHT tab + timeline navigator (v0.1.7 / ADR-027)

Two new surfaces on /missions: a per-mission FLIGHT tab in the detail panel, and a timeline navigator at the top of the screen.

FLIGHT tab (mission detail panel)

Sits between OVERVIEW and GALLERY. Two-column layout on desktop (≥768 px), stacked on mobile. Sections:

• Caveat banner (only when flight_data_quality !== "measured") — amber, one-line plain-language ("Reconstructed flight data — values approximate").
• LAUNCH — vehicle stage, C3 (km²/s²), declination (°), mass at TLI/TMI (kg), source citation.
• CRUISE — TCM count, peak heliocentric speed (km/s), source.
• ARRIVAL — V∞ (km/s), entry/orbital geometry (periapsis km / inclination °), orbit-insertion ∆v (km/s), source.
• TOTALS — total mission ∆v, TLI/TMI ∆v breakdown, source.
• EVENTS — MET-stamped list, each row: T+nnnd · TYPE · note. Note text comes from i18n overlay; type is enum.

Each section is collapsible on mobile (initially open). Missing values render as —. Each subsection's source shows as a small italic citation under the section's last value.

Timeline navigator (top of /missions)

[1957════════════════════════════════════════════════2030]
   ·  ·  · · ·    ·   · ·    · · · · ·   · ·· · ·· · ·
              ╞══════════════╡   ← drag handles
                   [filter: 1969 → 1976]

• Fixed range 1957 → 2030. Decade ticks: 1957 1965 1975 1985 1995 2005 2015 2025 2030.
• Mission dots at dot.x = ((mission.year - 1957) / (2030 - 1957)) * width, agency-coloured.
• Two drag handles bound a year-window; cards below filter to the windowed missions.
• Tap/click a dot → jump to that mission (highlights on strip + opens detail panel).
• Pinch-to-zoom on mobile expands the strip into a custom zoom range; two-finger pan slides the window.
• Reduced-motion users see a <input type="number"> pair for from and to instead of the strip.

Tokens (extension)

FLIGHT tab section header: Bebas Neue, 14 px, rgba(220,230,255,0.95), letter-spacing 0.08 em FLIGHT tab value: Space Mono, 13 px, #fffFLIGHT tab source line: Crimson Pro italic, 11 px, rgba(180,200,255,0.6)FLIGHT tab caveat banner: #ffc850 border 1 px, rgba(255,200,80,0.18) bg, 12 px Space Mono Timeline strip height: 80 px desktop, 64 px mobile Timeline strip bg: rgba(20,30,55,0.72) matching panel tint Timeline tick label: Space Mono, 10 px, rgba(180,200,255,0.6)Timeline mission dot: 6 px mobile / 8 px desktop, mission.color, box-shadow 0 0 6px rgba(0,0,0,0.6) for legibility Timeline drag handle: 14 px wide, #4ecdc4 accent, 44 × 44 hit area per ADR-025 Timeline windowed range bg: rgba(78,205,196,0.18)

Accessibility (extension)

• Timeline navigator: role="slider" per drag handle with aria-valuemin / aria-valuemax / aria-valuenow set in years.
• Mission dots: role="button" with aria-label="{mission.name}, launched {year}".
• Reduced-motion: number inputs labelled "From year" / "To year" with same year bounds.
• FLIGHT tab: each subsection uses <section> with <h3> heading; <dl>/<dt>/<dd> for key-value rows so screen readers traverse coherently.

Acceptance criteria (extension)

• [ ] FLIGHT tab visible only when mission has flight data; falls back gracefully when absent
• [ ] Sparse-data banner shown only when flight_data_quality !== "measured"
• [ ] All numeric values render as — when missing — never 0 or undefined
• [ ] Source citations visible per subsection
• [ ] Events list shows MET-stamped entries with i18n notes
• [ ] Timeline navigator strip renders all 32 missions as agency-coloured dots
• [ ] Drag handles filter the card grid below in real time (debounced 100 ms)
• [ ] URL syncs ?from=YYYY&to=YYYY; deep-link restores the window
• [ ] Mobile pinch-to-zoom expands the strip; two-finger pan slides
• [ ] Reduced-motion variant: number inputs replace the strip
• [ ] Mission-dot tap highlights + opens detail panel
• [ ] No regression on existing OVERVIEW / GALLERY / LEARN tabs