Veritas · mobile claim peek (specimen)

Purpose#

A design specimen — the Veritas reader as it appears on a phone, hosted inside a desktop "ink-bezel" PhoneFrame so it can be reviewed on a laptop. Body lines are colour-banded by confidence and the active claim opens a tap-to-peek card with confidence bar, source count, and source bands. Underlying mobile component (VeritasMobile) is the same one a real mobile shell would render.

Entry points#

• Direct URL / bookmark — yes (auth required); not surfaced by any in-product nav in code
• Internal design review — file header calls it "Hosted in a desktop ink-bezel frame so it can be reviewed on a laptop"
• Cross-link from /system specimen index — verify whether the system pages link here

Layout regions#

Unlike the other depth views, page.tsx builds the layout itself rather than delegating to a room. Mounted in LWebShell with LCustomerNav active="library" and a wrapper that constrains content to maxWidth: 720.

• Header: Lilith customer nav (Library tab active)
• Specimen masthead (LMasthead):
  • Left: Specimen · Veritas mobile
  • Right: 375 × 812 (target viewport)
  • Kicker: Read on the phone
  • Title: "Tap-to-peek." (em on "peek")
• "How this reads" preface: LEyebrow + italic SERIF paragraph explaining the colour-banded underlines and the tap-to-peek peek-card behaviour
• Phone frame (PhoneFrame with label="Veritas · mobile" and caption "Reader with tap-to-peek claim card."), centred, padded
• Inside the phone frame — VeritasMobile renders an LPhoneShell with:
  • LStatusBar
  • Top row: Veritas eyebrow, accent eyebrow N claims · M sources
  • Story header: Energy · supply code label, story headline (26px serif), byline eyebrow
  • Lead paragraph (first 3 sentences): each non-trivial sentence is underlined in its confidence colour and optionally carries a coloured superscript footnote
  • Tap-to-peek card (accent border, paper background): tap-to-peek · claim 1 eyebrow, italic claim title, confidence bar with conf · 0.NN and N sources row, then per-source rows showing italic source name + VrBand chip
  • Rest paragraph (sentences 4+): same underline/superscript treatment
  • Bottom action bar (absolute, 28px from bottom): Sources · N (ghost), Story · over time (primary)
  • LHomeIndicator (iOS-style home bar)

States#

• Loading — getVeritasMobile() awaited server-side; no client skeleton
• Populated — fixture renders lead paragraph, peek card, rest paragraph, and bottom actions
• No "rest" paragraphs — when data.paragraphs.length <= 3, the rest block is omitted ({rest.length > 0 && ...})
• Error (recoverable) — fetch failure → nearest error.tsx
• Offline — cached HTML; nothing client-side here
• Standalone PWA — irrelevant; this is a specimen surface hosted in desktop chrome, not the real mobile shell
• Real mobile viewport — verify the VeritasMobile component renders acceptably when rendered without the PhoneFrame wrapper (i.e., on an actual phone)
• Empty — N/A; the fixture always returns at least three sentences and a peek claim with sources
• Gated — none coded

Interactions#

Specimen chrome#

• LMasthead — static; non-interactive
• PhoneFrame — wrapper element; no interactions documented in the page-level code (verify what PhoneFrame exposes — likely just visual bezel + caption)

Inside the phone — underlined sentences#

• Underlined sentence (<span> with borderBottom) — visual only in code; the "tap" promise in the lede copy is not wired (no onClick)
• Superscript footnote (<sup>) — not interactive

Inside the phone — tap-to-peek card#

• Peek card (<div> with accent border) — non-interactive container in code; the headline "tap-to-peek" is descriptive rather than functional here
• Confidence bar — visual element with data.peekClaim.confidence percent width
• Per-source row — italic name + VrBand chip; non-interactive

Inside the phone — bottom action bar#

• Sources · N (LBtn kind="ghost" size="lg")
  • Function: not wired in VeritasMobile (no onClick); verify the design intent — likely targets /veritas/source or an in-app sources sheet
• Story · over time (LBtn kind="primary" size="lg")
  • Function: not wired in VeritasMobile; verify the design intent — likely targets /veritas/story

Data & contracts#

• Reads: getVeritasMobile() from @/lib/lilith-data/veritas-depth — returns VeritasMobileData ({ storyCount, storyHeadline, byline, paragraphs[], peekClaim })
• Writes: none
• Realtime: none
• Caching: server fetch
• Auth/role check: shell middleware (verify)
• Page metadata: title: "Veritas · mobile claim peek", description "The Veritas reader on a phone — every underline opens a claim card.", alternates.canonical: /veritas/mobile

Cross-references#

• Page-level mobile wrapper: apps/oshun/web/src/app/veritas/mobile/page.tsx
• Component: apps/oshun/web/src/components/lilith/veritas.tsx — VeritasMobile (lines 1938–2123)
• Phone bezel: apps/oshun/web/src/components/lilith/mobile.tsx (PhoneFrame)
• Shell atoms: LWebShell, LCustomerNav, LMasthead, LEyebrow, LPhoneShell, LStatusBar, LHomeIndicator, LBtn from @/design-system/lilith
• Data: apps/oshun/web/src/lib/lilith-data/veritas-depth.ts (getVeritasMobile)
• Sibling routes:
  • veritas.md, veritas-claim.md, veritas-story.md, veritas-source.md
• Feature spec: V1/features.md

Open questions / known gaps#

• The whole purpose of the file header is "tap-to-peek" but the underline <span>s and the peek card are non-interactive in code. Confirm whether this surface is purely a still specimen or whether a separate mobile shell adds interactivity
• The two bottom buttons have no onClick; if the route is reachable from a real mobile shell, those should navigate — file as a wiring gap
• On a real mobile device (not the desktop frame), the absolute-positioned bottom bar may collide with the system home indicator; verify
• Confirm whether the page should set robots: { index: false, follow: false } like /veritas/retraction does (this is a specimen)