V1 Web PWA · Surface walkthrough

Mobile · The Phone Shells

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 discovery · route /mobile · auth signed-in · source apps/oshun/web/src/app/mobile/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; content re-verified 2026-06-03 against current source

Purpose#

Specimen page showcasing the Lilith mobile boards at native 375×812. Renders the MobileGallery composition — six per-room mobile mockups (home, Tara pre / play / post, Arete evening, Nyx night). Distinct from the live mobile experience; this page is a design-specimen surface.

Entry points#

  • Design-system index: /system (Lilith specimen sheet)
  • Direct URL / bookmark — yes (auth required; verify gating)
  • Cross-referenced from /tablet and /system/verify as a responsive-design-language specimen

Layout regions#

page.tsx is a one-liner: <MobileGallery />. Layout regions are defined in apps/oshun/web/src/app/mobile/MobileGallery.tsx, which composes the per-board components from apps/oshun/web/src/components/lilith/mobile.tsx. Per the metadata description, the gallery renders six mobile boards at the native 375×812 viewport, laid out for side-by-side comparison.

  • Six mobile boards:
    1. Home
    2. Tara · pre
    3. Tara · play
    4. Tara · post
    5. Arete · evening
    6. Nyx · night

Each board likely renders in its own phone-frame chrome (status bar, notch) so the design reads at native pixel size. Verify against MobileGallery.tsx.

States#

  • Default — all six boards render at native 375×812 px
  • Horizontal scroll on desktop — verify layout when viewport is wider than the gallery
  • Mobile-viewport visit — six full-bleed boards may stack vertically; verify
  • Reduced motion — no autoplay; verify any subtle motion respects preference
  • Standalone PWA — likely irrelevant for a specimen page but should render cleanly

Interactions#

Specimen surface — interactions are visual only. Verify against MobileGallery.tsx.

  • Each board — non-interactive (read-only mockup)
  • Inline labels (per board) — board name + caption (e.g., "Home · index", "Tara · pre-sit", etc.) verify presence

Data & contracts#

  • Reads: none — MobileGallery is purely composed of static mockups using Lilith primitives
  • Writes: none
  • Realtime: none
  • Caching: SSR static; SW cache
  • Auth/role check: verify middleware gating — /mobile is not in PUBLIC_PREFIXES so signed-in only
  • Metadata: title: 'Mobile · the phone shells', description: 'Six Lilith mobile boards at native 375×812 — home, Tara pre/play/post, Arete evening, Nyx night.', alternates.canonical: '/mobile'

Cross-references#

Open questions / known gaps#

  • Read MobileGallery.tsx to enumerate every board, label, and any subtle interaction
  • Confirm middleware gating — should this be public for design review, or signed-in-only?
  • Document how to compare against the live mobile shell (which lives at / and per-domain routes)
  • Confirm the six boards match the actual production mobile boards (drift risk between specimen and live)