UXS-003 — Mission Arc

Status · Draft v0.1 Visual fidelity · Verified against prototype (P03_mission-arc.html) IA anchor · §surfaces/fly · §topbar-patterns · §shared-tokens Related PRD · PRD-003 Related ADRs · ADR-009 (free-return), ADR-010 (Keplerian arcs) Related RFCs · RFC-002 (events schema), RFC-004 (URL sharing)

Why this UXS exists

The fly screen has the most complex layout of any screen — dual HUD panels, timeline scrubber, CAPCOM panels, and a full-viewport 3D or 2D canvas. This UXS defines the static appearance of all components and the visual distinction between outbound and return arcs.

Principles

• The spacecraft is always visible and identifiable
• Past trajectory is solid; future is dashed — the distinction is immediate
• Outbound arc (blue) and return arc (violet) are distinguishable without a legend
• HUD panels are readable at a glance — data, not decoration
• CAPCOM mode adds information without hiding the canvas

Scope

In scope: nav bar, 3D scene, 2D canvas, HUD panels (left identity, right navigation, right systems), CAPCOM panels, timeline scrubber, bottom bar, milestone markers (FLYBY, RETURN), spacecraft icon. Non-goals: animation easing, CAPCOM panel slide-in timing. Boundary note: CAPCOM event triggering logic belongs in the screen module.

Theme

Dark only.

Tokens

Inherited from IA

All shared tokens.

Defined here

arc-outbound:      rgba(68,102,255,0.75)   past, solid
arc-outbound-fut:  rgba(68,102,255,0.20)   future, dashed
arc-return:        rgba(123,156,255,0.75)  past, solid
arc-return-fut:    rgba(123,156,255,0.20)  future, dashed
flyby-marker:      rgba(193,68,14,0.8)     Mars red crosshair
return-marker:     rgba(75,156,211,0.8)    Earth blue crosshair
spacecraft-fill:   rgba(255,255,255,0.95)  chevron fill
spacecraft-border: rgba(68,102,255,0.8)    chevron stroke
hud-left-accent:   #4466ff
hud-right-accent:  #4ecdc4
hud-sys-accent:    #ff9940
capcom-accent:     rgba(0,220,80,0.7)

Layout

HUD panels (2D and 3D)

LEFT (identity, 225px):         RIGHT-TOP (navigation, 228px):
┌─────────────────────┐         ┌──────────────────────┐
│ ▌ EARTH → MARS FLY  │         │ ▌ NAVIGATION          │
│   ORRERY-1          │         │   Heliocentric vel.   │
│   Falcon Heavy      │         │   Distance from Earth │
│   Date / MET        │         │   Distance from Mars  │
└─────────────────────┘         │   Signal delay / Sun  │
                                 └──────────────────────┘
                                 RIGHT-BOTTOM (systems, 228px):
                                 ┌──────────────────────┐
                                 │ ▌ SYSTEMS             │
                                 │   Propellant bar      │
                                 │   Δv remaining bar    │
                                 │   ETA / Phase         │
                                 └──────────────────────┘

CAPCOM panels (left side, 222px, shown when CAPCOM active)

Three stacked panels replacing the left identity panel:

1. Mission events ticker (max-height 190px, scrollable)
2. Communications (signal delay, RTT, DSN contact)
3. Anomaly monitor (nominal / caution / critical)

Timeline scrubber (bottom bar, 68px)

Play/pause button · speed controls (1d/s, 7d/s, 30d/s, 90d/s) · scrubber track · MET display

Spacecraft icon

2D: white chevron (triangle with cut tail, 9px half-size) oriented along velocity vector, blue glow behind. 3D: cone (nose) + cylinder (body) + inverted cone (nozzle), oriented along velocity vector.

Component states

Arc (outbound, past): solid blue 1.5px line Arc (outbound, future): dashed blue 20% opacity, [5,5] dash pattern Arc (return, past): solid violet 1.5px Arc (return, future): dashed violet 20%, [5,5] Flyby ring (near Mars, progress 0.45–0.55): pulsing red ring, opacity 0.3–0.7 Flyby ring (all other times): hidden CAPCOM button (inactive): border rgba(78,205,196,0.7), bg rgba(78,205,196,0.12), color #4ecdc4CAPCOM button (active): border #4ecdc4, bg rgba(78,205,196,0.22), color #fff, box-shadow 0 0 10px rgba(78,205,196,0.4)Anomaly (nominal): border rgba(40,40,40,1), color rgba(78,205,196,0.7), text "ALL SYSTEMS NOMINAL" Anomaly (caution): border rgba(255,200,80,0.5), color #ffc850, text "⚠ CAUTION: FUEL LOW" Anomaly (critical): border rgba(255,80,80,0.6), color #ff6060, blinking, text "⚠ CRITICAL"

Accessibility

• Canvas screens: aria-label describing the mission arc view
• CAPCOM panels: HTML content, screen-reader accessible
• prefers-reduced-motion: freeze simTime, disable auto-orbit

Acceptance criteria

As-built note (2026-10-16): the boxes below were not maintained after implementation and are not a record of what shipped. For shipped behaviour see docs/adr/TA.md and CHANGELOG.md.

• [ ] Outbound arc renders in blue; return arc renders in violet
• [ ] Past trajectory solid; future trajectory dashed
• [ ] Flyby marker visible only near Mars (progress 0.45–0.55)
• [ ] RETURN marker visible at Earth arrival position
• [ ] Spacecraft chevron oriented along velocity direction in 2D
• [ ] Spacecraft rocket shape visible and oriented in 3D
• [ ] CAPCOM button click shows/hides CAPCOM panels
• [ ] Mission event ticker scrolls; past events shown, oldest faded
• [ ] Signal delay updates from actual Earth distance
• [ ] Anomaly monitor transitions: nominal → caution → critical at fuel thresholds
• [ ] Timeline scrubber thumb tracks progress; drag works
• [ ] Speed buttons highlight active speed

---

Extension — Flight params HUD readout (v0.1.7 / ADR-027)

When the loaded mission has a populated flight sub-object, /fly's HUD surfaces real per-mission flight parameters instead of the synthesised defaults.

Layout addition

A new FLIGHT PARAMS group sits below the existing NAV HUD on the left rail:

LAUNCH C3        11.2 km²/s²
ARRIVAL V∞        5.6 km/s
TOTAL ∆v          6.1 km/s     [src: NASA MSL Press Kit]

Source citation collapses on phones (≤767 px) into a tap-to-reveal tooltip on the row.

Sparse-data caveat banner

When flight_data_quality !== "measured", a one-line banner sits above FLIGHT PARAMS, amber tint (#ffc850 border, rgba(255,200,80,0.18) bg). Plain-language copy is i18n-keyed.

Missing values

Render as — (em-dash). Never as 0 or null. Never invent a plausible-sounding default.

Arc geometry hook

If flight.arrival.v_infinity_km_s is present, the outbound arc's terminal segment uses it (not the Lambert-default V∞) so two missions to the same destination on the same dates render visibly distinct paths when their target geometry differs. Falls back to the v0.1.6 Lambert geometry when absent.

Tokens (extension)

FLIGHT PARAMS group bg: rgba(20,30,55,0.72) matching existing HUD tint FLIGHT PARAMS label: Space Mono, 10 px, rgba(180,200,255,0.85)FLIGHT PARAMS value: Space Mono, 13 px, accent per-row (∆v #ffc850, V∞ #4ecdc4, C3 #4b9cd3) Caveat banner: #ffc850 border 1 px, rgba(255,200,80,0.18) bg, 12 px Space Mono uppercase

Acceptance criteria (extension)

• [ ] When mission.flight is present, FLIGHT PARAMS group renders below NAV
• [ ] When mission.flight is absent, no FLIGHT PARAMS group appears (no regression)
• [ ] When flight_data_quality !== "measured", caveat banner shows
• [ ] Missing fields render as —, never as 0 or undefined
• [ ] Source citation accessible (visible desktop, tooltip mobile)
• [ ] Arc terminal uses real V∞ when present