---
path: /mobile
surface: customer
domain: discovery
auth: signed-in
source: apps/oshun/web/src/app/mobile/page.tsx
status: walked
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'
---

# Mobile · The Phone Shells

## 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

- Tablet specimen: [`tablet.md`](./tablet.md)
- System specimen: [`../13-system/system.md`](../13-system/system.md)
- System verify:
  [`../13-system/system-verify.md`](../13-system/system-verify.md)
- Component sources:
  - `apps/oshun/web/src/app/mobile/MobileGallery.tsx`
  - `apps/oshun/web/src/components/lilith/mobile.tsx` (per-board components in a
    single file)

## 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)