pneumo

M3: Web app shell — theme, API client, key store, setup and login (ENG-252) #18

Merged

demi.dev 1w ago

targeting main from stoopkidddd/eng-252-m3-web-app-shell-theme-api-client-key-store-setup-and-login

Merged opened by and assigned to

demi.dev 1w ago targeting main from stoopkidddd/eng-252-m3-web-app-shell-theme-api-client-key-store-setup-and-login

Linear: https://linear.app/engineereddev/issue/ENG-252

What's in this PR:

Theme: generated tokens.css, self-hosted Chivo 600 / Public Sans 400, base styles, light/dark via prefers-color-scheme, a visible 2 px focus ring, and a header with mark + wordmark + nav (Home, Devices, Settings), all per brand/DESIGN.md.
Router and guards from GET /api/health: uninitialized → /setup, signed out → /login, signed in → /.
src/api/client.ts: typed calls derived from the @pneumo/protocol route table, bearer from the session, ErrorBody → ApiError, and a global 401 → clear the session and go to /login.
src/session/store.ts: IndexedDB pneumo/session with { deviceId, token, mk } and a non-extractable contentKey (§6.9).
Setup (§7.2): token from #token=, a missing-token error, passphrase ≥ 12 (NFC) twice with show/hide, UA device name, busy state, then a one-time "can't be recovered" acknowledgment. Login (§7.3) with 401/429 messages. A Settings stub with Sign out.
Vite dev proxy for /api and /api/ws. Playwright harness: MinIO + built web + built server on random ports, UPLOAD_MODE=direct, a known setup token; shared fixtures; axe; mise run e2e:web.

Verify (lead, rebased on 555a737):

pnpm install --frozen-lockfile → exit 0
mise run check:web → exit 0 (Tests 18 passed (18); production build OK)
mise run e2e:web → exit 0 (8 passed: setup end to end, second-browser login, reload persistence, sign-out/re-login, wrong passphrase, missing token, rate limit, revocation sign-out, axe on every new view)
Screenshots (not committed, apps/web/test-results/screens/): setup, setup-missing-token, login, warning, home, devices, settings, each light and dark, plus mobile setup/login.
No pneumo-e2e-* containers left.

Deviations:

Passphrase length counts NFC-normalized characters, and confirmation compares normalized strings.
Setup saves the session only after the recovery warning is acknowledged.
Fresh-instance fixtures use extra isolated random-port servers with unique S3 prefixes.

🤖 Generated with Claude Code

Commits 3

chore: regenerate lockfile

+483 -2

M3: Fix client-side navigation and cover auth failures (ENG-252)

+347 -6

M3: Add branded web setup and login shell (ENG-252)

+2250 -14

Comments

v0 1w ago

demi.dev 1w ago

pneumo-reviewer: round 1, REQUEST_CHANGES #

Crypto, key storage, the API client and the guards are correct and match §6.9, §7.2, §7.3 and §8. check:web and e2e:web pass. A probe against the built server with the real §12.6 CSP showed no CSP violations, and both fonts loaded. One fix and two DoD gaps before merge.

Findings #

FIX (often 10 × bad 2 = 20), App.tsx:115 (also :101 brand link, AuthView.tsx:190): nav, brand and "Already set up? Sign in" are plain <a href> with no click interception, so every in-app navigation is a full document load. A probe confirmed it: the page state was gone after clicking Devices, and a document load fired. Each click re-runs /api/health and /api/me, the nav disappears and "Connecting to Pneumo…" flashes. The WebSocket in later issues would reconnect on every nav. Fix: intercept internal links (preventDefault → pushState → setPath), keep replaceState for guard redirects, and add a Playwright "no reload on nav" assertion.
Missing DoD: no component tests for SettingsView (DELETE → clear → onSignedOut order, network failure, silent 401) or for AuthView's error mapping (401 copy, exact 429 minutes from Retry-After, 403/409 setup copy).
Missing DoD: the "Connection unavailable" screen (App.tsx:125-132) has no axe scan and no light/dark screenshots.
FILE (4), AuthView.tsx:76-78: the session is kept only in memory until the warning is acknowledged; a reload at the warning leaves a phantom setup device.
FILE (4), AuthView.tsx:29: the #token= fragment is removed on mount, so reloading /setup loses the token.
FILE (3), client.ts:199-202: any 401, including from login, clears the IndexedDB session, so a wrong passphrase in one tab signs out another.
FILE (2), AuthView.tsx:90: "Try again in 1 minutes".

FILE items are recorded on ENG-275; code left alone.

Spec checks #

§13 stack, routes, guards, typed client, CSS on tokens, fonts, light/dark and focus OK (router: finding 1). §7.2 and §7.3 OK, with all derivation via @pneumo/crypto; the passphrase never leaves the browser; the token is only in the fragment. §6.9 OK (non-extractable contentKey survives reload; clear() on sign-out and 401). §8 ErrorBody → ApiError OK. §12.6 CSP OK (no inline scripts or styles). DESIGN.md OK. Contract freeze and hot files OK (mise.toml gains only e2e:web).

DoD checks #

The issue's own unit tests are present (passphrase rules, guards, client errors, store with fake-indexeddb). Playwright covers every new flow. axe and screenshots are present for every view except "Connection unavailable" (finding 3). Component tests are missing for Settings and the AuthView error mapping (finding 2).

Tests run by the reviewer: mise run check:web exit 0 (18 tests, build OK); mise run e2e:web exit 0 (8 passed); nav and CSP probes as above. → omp round 2 for findings 1–3.

v1 1w ago

demi.dev 1w ago

pneumo-reviewer: round 2, APPROVE #

Round 2 fixes the FIX finding and fills the three DoD gaps. The rebase onto b36ad4b is clean: f13c158 matches 04b554e under apps/web, mise.toml and packages. Nothing under packages/, apps/server or apps/android changed, and the frozen lockfile installs.

Findings #

Round 1 FIX (score 20), full reload on every nav: resolved. A new Link component (apps/web/src/Link.tsx) pushes history for primary same-origin clicks and leaves modified, other-target, download and cross-origin clicks native. Guards keep replaceState. Probe: 0 document loads, page state kept, focus to #main, title updates; Back after sign-out lands on /login. Covered by e2e/web.spec.ts:319 (no load, no health/me refetch, Back/Forward).
Missing DoD, component tests: resolved. SettingsView (DELETE → clear → onSignedOut order, network failure, silent 401), AuthView (401, setup 403/409, Retry-After 120 s → 2 min, 121 s → 3 min), Link.
Missing DoD, "Connection unavailable": resolved. axe scan (web.spec.ts:352) and light/dark screenshots.
FILE (often 1 × bad 2 = 2, new), AuthView.tsx:94 with :191: after a setup 409 ("already set up… Open Sign in"), client-side nav keeps initialized false, so the guard bounces back to /setup. It's a dead end until a manual reload. Possible fix: refetch health on a setup 409.
Round 1 FILE findings (persist-after-ack, token lost on reload, login 401 clearing another tab, "1 minutes") are unchanged and recorded on ENG-275.

Spec / DoD #

§13 now OK (client-side router with history; guards unchanged). §7.2, §7.3 (exact copy now unit-tested), §6.9, §8 and §12.6 OK. DESIGN.md OK. Every new flow has Playwright coverage, axe on every view, and light/dark screenshots (19 files).

Tests run by the reviewer on 4b6787c: frozen install exit 0; mise run check:web exit 0 (35 tests); mise run e2e:web exit 0 (10 passed). Pipeline for 4b6787c: 3/3 green.

Versions

pneumo-reviewer: round 1, REQUEST_CHANGES #

Findings #

Spec checks #

DoD checks #

pneumo-reviewer: round 2, APPROVE #

Findings #

Spec / DoD #