UXS-002 — Mission Configurator

Status · Accepted (v0.1 base + v0.1.6 multi-destination extension locked by ADR-026) Visual fidelity · Verified against prototype (P02_mission-configurator.html) IA anchor · §surfaces/plan · §topbar-patterns · §shared-tokens Related PRD · PRD-002 Related ADRs · ADR-008 (Lambert worker) Related RFCs · RFC-003 (Lambert worker protocol)

Why this UXS exists

The porkchop plot is a 2D colour-mapped grid. This UXS defines its visual encoding, the right panel that appears on cell selection, the vehicle selector, and the outcome display (viable vs delta-v deficit).

Principles

• Blue = cheap, orange = expensive — intuitive before explanation
• The selected cell is unambiguous against the colour field
• Failure state (delta-v deficit) is visible and specific, not hidden
• The right panel reads as a mission brief

Scope

In scope: nav bar, porkchop canvas, axis labels, colour scale, selected cell highlight, right panel (vehicle selector, delta-v budget, FLY button), progress indicator during computation. Non-goals: date slider interaction timing, cell hover debounce. Boundary note: Lambert computation progress reporting belongs in RFC-003.

Theme

Dark only.

Tokens

Inherited from IA

All shared tokens.

Defined here

porkchop-min-dv:  hsl(210,90%,55%)   best windows — blue
porkchop-mid-dv:  hsl(45,90%,55%)    marginal — yellow
porkchop-max-dv:  hsl(20,90%,50%)    expensive — orange
porkchop-nosoln:  rgba(20,20,30,1)   no solution — near-black
selected-cell:    rgba(255,255,255,0.9) outline, 1.5px
axis-label:       rgba(255,255,255,0.4) 7px Space Mono
progress-bar:     linear-gradient(to right, #4466ff, #4ecdc4)
deficit-colour:   #ff6060
viable-colour:    #4ecdc4

Layout

┌────────────────────────────────────────────────────────┐
│  NAV BAR (52px)                                        │
├────────────────────────────────────────────────────────┤
│  Porkchop plot canvas                  │ Right panel   │
│  (fills remaining space minus panel)  │ (280px)       │
│                                        │               │
│  Y: arrival dates                      │ Mission brief │
│  X: departure dates                    │ Vehicle select│
│  Colour: delta-v                       │ Δv budget     │
│                                        │ FLY button    │
└────────────────────────────────────────────────────────┘

Right panel: background rgba(4,4,12,0.97), border-left 1px solid rgba(255,255,255,0.07), padding 16px 20px.

Component states

Cell (default): colour from delta-v cost, no outline Cell (hovered): tooltip showing dep date, arr date, transit, dv Cell (selected): white outline 1.5px; right panel populates Right panel (empty): "SELECT A LAUNCH WINDOW" hint text Right panel (viable): mission brief, vehicle dropdown, delta-v bar in teal, FLY button enabled Right panel (deficit): mission brief, vehicle dropdown, delta-v bar in red, deficit amount shown, FLY button disabled Progress bar (computing): gradient bar fills left-to-right, "COMPUTING 11,200 TRAJECTORIES" label FLY button (enabled): background #1a33bb, border rgba(68,102,255,0.55), white text FLY button (disabled): background rgba(255,255,255,0.05), color rgba(255,255,255,0.25)

Accessibility

• Canvas: aria-label="Porkchop plot showing delta-v cost for departure and arrival date combinations"
• Right panel content is HTML — screen reader accessible
• FLY button disabled state uses both visual and aria-disabled="true"

Acceptance criteria

• [ ] Porkchop plot renders with correct colour mapping (blue valleys, orange peaks)
• [ ] Selected cell has visible white outline
• [ ] Right panel shows departure date, arrival date, transit time, delta-v on cell click
• [ ] Vehicle dropdown changes delta-v budget calculation
• [ ] Viable missions show teal delta-v bar and enabled FLY button
• [ ] Deficit missions show red bar, deficit amount, disabled FLY button
• [ ] Progress bar appears during Lambert computation
• [ ] FLY button navigates to /fly?mission=orrery-1 (or selected mission)

Extension · multi-destination selectors (v0.1.6 / ADR-026)

Status · Decided · locked by ADR-026 (closes RFC-007) Scope · Adds two controls above the porkchop canvas; the existing visual contract for the plot, right panel, and vehicle selector is preserved.

New layout fragment

┌────────────────────────────────────────────────────────┐
│  NAV BAR (52px)                                        │
├────────────────────────────────────────────────────────┤
│  [DESTINATION ▼ Mars]  [LANDING][FLYBY]   ⓘ │ Right    │
│  Porkchop plot canvas (per destination) │ panel        │
│  Y: arrival dates                       │              │
│  X: departure dates                     │              │
│  Colour: delta-v                        │              │
└────────────────────────────────────────────────────────┘

Mars stays the default destination on first load (preserves the existing entry experience). URL params ?dest=jupiter&type=flyby pre-apply.

New tokens

selector-bar-bg:        rgba(8,10,22,0.92)
selector-bar-height:    44px (mobile-first per ADR-018)
mission-type-active:    rgba(68,102,255,0.22) bg + 1px #4466ff border
mission-type-disabled:  rgba(255,255,255,0.04) bg + rgba(255,255,255,0.05) text
                        (used when LANDING is offered on a gas giant)

New component states

Destination selector (default): native <select> styled to the existing rocket-vehicle pattern in UXS-002. Lists Mercury, Venus, Mars, Jupiter, Saturn. Mission-type toggle (default): two pill buttons (LANDING / FLYBY) per the /missions filter pattern (ADR-025 tier-1 ARIA). Mission-type toggle (gas giant): LANDING pill rendered disabled with aria-disabled="true" and a tooltip — "Landing on a gas giant is not a defined manoeuvre. See Galileo (/missions?id=galileo) for orbit-insertion behaviour." FLYBY remains active. Porkchop (computing — per-destination switch): the existing progress bar reappears when the user changes destination (a new Lambert grid is being loaded or computed). Cancel-on-restart contract from ADR-022 still applies.

Layout adjustments

• Selector bar sits between the nav bar and the porkchop canvas, full width minus the right panel.
• On mobile (≤767px) the selectors collapse below the porkchop canvas, with destination as a <select> and mission-type as a horizontal pill row that matches the existing filter-pill height (44px from ADR-025 tier-1).

Extended acceptance criteria

• [ ] Destination selector lists 5 planets (Mercury, Venus, Mars, Jupiter, Saturn) in expected order
• [ ] Mars is the default destination on first load
• [ ] URL ?dest=jupiter pre-selects Jupiter on entry
• [ ] LANDING + FLYBY active for Mercury, Venus, Mars
• [ ] LANDING disabled with tooltip for Jupiter, Saturn; FLYBY active
• [ ] Porkchop transfer-time axis re-scales per destination (Mars: 80–520 d; Jupiter: 400–1500 d; Saturn: 800–3000 d)
• [ ] FLY button navigates to a per-destination /fly route that renders an outbound-only arc (using the v0.1.2 per-mission arc helper)
• [ ] Mobile magnifier (ADR-023) continues to work at the new per-destination resolutions
• [ ] No regression on the existing Mars porkchop experience