V1 Web PWA · Surface walkthrough

Nyx · Deep-Sky Catalog

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/catalogs · auth signed-in · source apps/oshun/web/src/app/domains/nyx/catalogs/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#

A browsable catalog of deep-sky objects (Messier, NGC, IC) — list/grid view with filtering. Wired via apps/oshun/web/src/app/domains/nyx/catalogs/page.tsx ('use client') which mounts <NyxCatalogBrowser onBack={() => router.back()} />.

Entry points#

  • Direct URL / bookmark — yes (signed-in)
  • In-app navigation — verify whether Nyx domain hub or telescope GoTo flow surfaces a "Browse catalog" link
  • Browser back affordance — in-component back button calls router.back()

Layout regions#

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

  • Header: back button (aria-label="Back"), Telescope icon, <h1>Deep-Sky Catalog</h1>
  • Filter / search controls: filter chips, view-mode toggle (list ↔ grid; aria-label="Switch to grid view" / "Switch to list view")
  • Object list/grid: rows or tiles per catalog object
  • Detail panel — opens when an object is selected (verify whether modal, inline expansion, or right-side drawer)

States#

  • Loading — bundled dataset; no async load
  • Populated (list view, default) — default catalog selection visible
  • Populated (grid view) — toggled via the view-mode button
  • Filtered — chip filter narrows visible objects
  • Empty (filtered out) — no objects match filter; verify empty-state copy
  • Object selected — detail panel populated with object metadata
  • Offline — static bundle; renders offline

Interactions#

  • "Back" button (icon button, ArrowLeft)
    • Function: onBack → router.back()
    • Screen reader: "Back"

View / filter controls#

  • Filter chips / categories — verify each category label and click behaviour
  • View-mode toggle (icon button)
    • Function: flips list ↔ grid layout
    • Screen reader: aria-label swaps between "Switch to grid view" / "Switch to list view"

Object list / grid#

  • Object item (button) — tap selects the object and opens detail
  • Hovered / selected state — verify visual differentiation

Detail panel#

  • Metadata fields — verify which fields appear (RA / Dec, magnitude, size, constellation, type)
  • Close affordance — if drawer/modal, verify close behaviour

Data & contracts#

  • Reads: bundled catalog data inside the component (~1000 lines source); verify the exact catalog symbol
  • 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 catalog dataset (Messier / NGC / IC) and counts
  • Confirm whether selected objects link out to the telescope GoTo flow or the star chart
  • Document detail panel keyboard behaviour and Esc-to-close