V1 Web PWA · Surface walkthrough

Nyx · Near-Earth Object Tracker

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

walked
8sections2 minread
Markdown source
On this page

Context. surface customer · domain nyx · route /domains/nyx/neo · auth signed-in · source apps/oshun/web/src/app/domains/nyx/neo/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#

Browsable list of near-Earth objects (NEOs) — asteroid/comet trackers with risk indicators. Wired via apps/oshun/web/src/app/domains/nyx/neo/page.tsx ('use client') which mounts <NyxNEOTracker onBack={() => router.back()} />.

Entry points#

  • Direct URL / bookmark — yes (signed-in)
  • In-app navigation — verify Nyx hub link
  • Browser back affordance — in-component back button calls router.back()

Layout regions#

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

  • Header: back button (aria-label="Back"), AlertTriangle icon (var(--l-alert)), <h1>Near-Earth Object Tracker</h1>
  • Filters / summary strip — verify which filter chips appear (size / approach date / risk)
  • NEO list — rows per object with name, magnitude, miss distance, approach date, hazard flag
  • Detail / row drawer — verify whether selected NEO opens an inline detail panel

States#

  • Loading — bundled NEO data; client-only
  • Populated — default catalog visible
  • Filtered — chip narrows visible objects
  • Empty (filtered out) — verify empty-state copy
  • Hazardous flagged — objects exceeding hazard threshold render in alert color
  • Offline — static bundle; works offline

Interactions#

  • "Back" button (icon, ArrowLeft) — onBack → router.back()

Filters#

  • Each filter chip (button) — verify exact filter labels (e.g., All / Hazardous / Close-approach)

NEO list#

  • Each NEO row — verify whether row is interactive (opens detail) or read-only
  • Hazard badge — color-coded indicator
  • Miss distance / approach date / magnitude — read-only fields

Data & contracts#

  • Reads: bundled NEO data inside the component
  • Writes: none
  • Realtime: none
  • Caching: static client bundle
  • Auth/role check: middleware enforces signed-in for /domains/*

Cross-references#

Open questions / known gaps#

  • Enumerate the exact NEO dataset and counts
  • Confirm whether rows link to a per-object detail page or only inline expansion
  • Document hazard-flag thresholds (Torino / Palermo scale?)
  • Verify whether data is fixture or live-fetched (component is too large to scan inline — verify the data source)