V1 Web PWA · Surface walkthrough

Nyx · Time Travel

A per-surface walkthrough of the V1 Web PWA customer surface: layout, states, interactions, data, and cross-references.

walked
8sections3 minread

On this page

Context. surface customer · domain nyx · route /domains/nyx/time-travel · auth signed-in · source apps/oshun/web/src/app/domains/nyx/time-travel/page.tsx

Last walked. 2026-05-29 automated runtime walk (Playwright headless) — render, /v1 data (2xx), console/page-errors, expected content, screenshot verified; live screen-reader, touch, offline, and telemetry-delivery checks pending a manual AT pass. Evidence: WALKTHROUGH/results/runtime-sweep-2026-05-29.md

Purpose#

Temporal-scrubbing surface — set any date between −4000 and 4000 CE and watch the sky at that moment, with playback controls, speed presets, and dedicated tabs for historical events, axial precession demonstrations, and planetary retrograde motion. Wired via apps/oshun/web/src/app/domains/nyx/time-travel/page.tsx ('use client') which mounts <NyxTimeTravel onClose={() => router.back()} />.

Entry points#

  • Direct URL / bookmark — yes (signed-in)
  • In-app navigation — verify Nyx hub link, and any "rewind / fast forward" affordance on the star chart
  • Browser back affordance — in-component back button calls router.back()

Layout regions#

NyxTimeTravel (apps/oshun/web/src/components/domains/nyx/NyxTimeTravel.tsx):

  • Header: back button (no aria-label snippet visible — verify), title <h1>Time Travel</h1>
  • Tab bar: four tabs from TABSSky View (sky), Historical Events (events), Precession, Retrograde
  • Sky View tab:
    • Date & Time card — Year (-4000 to 4000), Month, Day, Hour (UT) numeric inputs; large display of current year on the right
    • Playback barRev (backward) / Play/Pause / Fwd (forward) / speed <select aria-label="Playback speed"> with SPEED_PRESETS (1 sec/s → 1 month/s) / "Today" preset reset button
    • Sky Visualization card — heading "Sky at " + rendered sky
    • Preset Buttons card — historical-date presets

States#

  • Loading — bundled simulation data; client-only
  • Default tabSky View with current date (verify initial activeTab and seed date)
  • Playing forwardisPlaying true, direction='forward'; Pause shown
  • Playing backwardisPlaying true, direction='backward'
  • Speed changed — speed <select> updates speedIndex; playback rate changes
  • Year at limit (−4000 or +4000) — clamped via Math.max/Math.min in the year input
  • Today preset clicked — date resets to current new Date()
  • Historical Events tab — verify event timeline content
  • Precession tab — verify visualization
  • Retrograde tab — verify retrograde motion display
  • Offline — static client bundle; works offline

Interactions#

  • Back button (icon, ArrowLeft) — verify exact aria-label

Tab bar (four tabs)#

  • Sky View tab — sets activeTab='sky'
  • Historical Events tab — sets activeTab='events'
  • Precession tab — sets activeTab='precession'
  • Retrograde tab — sets activeTab='retrograde'

Date & Time inputs#

  • Year input (number, min −4000 max 4000) — aria-label="Year (-4000 to 4000)"
  • Month input (number, min 1 max 12) — aria-label="Month"
  • Day input (number, min 1 max 31) — aria-label="Day"
  • Hour input (number, min 0 max 23) — aria-label="Hour (UT)"

Playback controls#

  • Rev button (icon, Rewind) — sets direction='backward'
  • Play / Pause button (icon, Play/Pause)
    • Screen reader: aria-label="Play" / "Pause"
    • Function: toggles isPlaying
  • Fwd button (icon, FastForward) — sets direction='forward'
  • Playback speed selectaria-label="Playback speed"
    • Options from SPEED_PRESETS: 1 sec/s, 1 min/s, 1 hr/s, 1 day/s, 1 month/s (and beyond — verify the rest of the list)
  • "Today" preset button (icon, RotateCcw) — resets via goToPreset({ label: 'Today', year, month, day })

Preset buttons card#

  • Each preset (button) — verify exact list (e.g., Halley's Comet apparitions, Battle of Hastings, etc.)

Data & contracts#

  • Reads: bundled simulation data inside the component (~1700 lines)
  • Writes: none persisted; state is in-memory
  • Realtime: in-component playback timer
  • Caching: static client bundle
  • Auth/role check: middleware enforces signed-in for /domains/*

Cross-references#

Open questions / known gaps#

  • Verify back-button aria-label (not in the snippet I read)
  • Document the full preset list and where each preset jumps to
  • Confirm whether playback animates continuously while a tab other than Sky View is active
  • Confirm the relationship between Time Travel and the star chart's ±12 h slider — should one supersede the other?