V1 Web PWA · Surface walkthrough

Domain switcher

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

walked
8sections3 minread
Markdown source
On this page

Context. surface customer · domain discovery · route /switcher · auth signed-in · source apps/oshun/web/src/app/switcher/page.tsx

Last walked. 2026-06-28 automated Playwright walk — authenticated direct route, actionable room links, active-room state, click navigation, listed keyboard shortcuts (Enter, Shift+N sample), Escape return-to-home behavior, route-level axe scan, render, expected content, and console/page-errors verified. Evidence: apps/oshun/web/e2e/domain-switcher.spec.ts

Purpose#

A bookmarkable surface for the desktop ⌘D domain-switch overlay — six rooms, one keystroke. Lists Tara, Arete, Veritas, Nyx, Nisaba, and Metis with labels, sub-labels, and keyboard shortcuts.

Entry points#

  • Keyboard shortcut — ⌘D chord (handled by the shell; see shell/06-keyboard-a11y.md). The in-shell overlay is the primary entry path; this route is the bookmarkable fallback / specimen
  • Direct URL / bookmark — yes; route is canonical
  • Shell nav — verify domain-switch icon in the shell header opens this page or the in-shell overlay

Layout regions#

page.tsx renders <DesktopSwitcher /> from @/components/lilith/system-pages, which now delegates the route behavior to apps/oshun/web/src/components/lilith/DesktopSwitcherClient.tsx. The component composes Lilith primitives:

  • LWebShell with <LCustomerNav active="today" /> at the top
  • Background masthead — large display ("The looker, again.") rendered at 35% opacity behind the overlay; non-interactive
  • Centered overlay panel (720 px wide, positioned absolutely):
    • Panel header — ⌘D monospace label, "Switch room" italic title, esc close-hint LCode
  • Room navigation — six anchor rows, one per SWITCHER_ROOMS entry, each row containing a domain glyph (LDomainMark), name, sub-label, and keyboard shortcut chip
    • Active room — current room (Tara in the fixture; here: true) rendered with paper background and 2px accent left border

States#

  • Active room indicator — exactly one row has data-switcher-current and aria-current="page" (today's fixture: Tara, kbd ↵)
  • Hovered / focused row — hover and :focus-visible apply the paper background; focus-visible also applies an inset accent ring
  • Mobile / small viewport — overlay width is min(720px, calc(100vw - 32px)); no horizontal overflow at narrow widths
  • Reduced motion — no animations declared.
  • Anonymous user — no auth guard in page.tsx; relies on shell middleware
  • Standalone PWA — verify cold-launch lands on this page if a relaunch target persisted it (no PWA-specific branch here)

Interactions#

The route now implements the listed room switching behavior directly. The in-shell overlay remains a separate shell keyboard surface, while /switcher is the bookmarkable fallback/specimen with equivalent room-launch affordances.

  • Room rows — six anchor rows under nav[aria-label="Rooms"]; each routes to /domains/<domain>?origin=switcher
    • Tara — sub: "sit", kbd: ↵, href /domains/tara?origin=switcher, active in fixture
    • Arete — sub: "the daily ritual", kbd: ⇧A, href /domains/arete?origin=switcher
    • Veritas — sub: "what is true", kbd: ⇧V, href /domains/veritas?origin=switcher
    • Nyx — sub: "the night", kbd: ⇧N, href /domains/nyx?origin=switcher
    • Nisaba — sub: "the reading desk", kbd: ⇧S, href /domains/nisaba?origin=switcher
    • Metis — sub: "the schoolroom", kbd: ⇧M, href /domains/metis?origin=switcher
  • Keyboard shortcuts
    • Enter routes to the active Tara row
    • Shift+A, Shift+V, Shift+N, Shift+S, Shift+M route to Arete, Veritas, Nyx, Nisaba, and Metis respectively
    • Shortcut handler ignores editable controls and Ctrl/Alt/Meta-modified events
  • Esc hint — Escape returns the specimen route to /

Data & contracts#

  • Reads: none — SWITCHER_ROOMS is a hard-coded tuple inside DesktopSwitcherClient.tsx
  • Writes: None.
  • Realtime: None.
  • Caching: SSR / static (no 'use client' on this page)
  • Auth/role check: shell middleware only

Cross-references#

Open questions / known gaps#

  • Room rows are anchor links with domain-specific hrefs and accessible link names
  • Listed keyboard chords are bound on the route
  • Escape returns the bookmarkable specimen to Home (/)
  • This route is documented as the bookmarkable fallback/specimen; the live ⌘D overlay remains the customer shell keyboard surface