SPA revamp: implement the chosen direction — field-first phone (B), ledger desktop (A), one attention line (C)

[mforce]

Tracking issue for the SPA revamp. Owner decision recorded on #656 (2026-09-02): a combination — B's field-first phone, A's ledger desktop, C's attention strip reduced to one line on both. This issue carries the work; #656 stays the home of the three visual-identity questions, which the design doc answers.

What was decided, and why

Three rendered directions were built from the app's own seeded data (four houses, 327/298/341 collected with House C not recorded, 63,122 eggs on hand by grade, the 14-day trend, four real orders), differing in point of view rather than palette:

• A — the ledger. The screen is the working record. Ruled rows, numerals first, no cards.
• B — field-first. The hen-house phone is primary; one task per screen, glove-sized targets; desktop is the same parts wider.
• C — operations console. Status before records; a persistent attention strip; built for the night check.

Chosen: phone = B, desktop = A, both = one attention line. The app has exactly two real contexts — a phone in a shed and a desk in an office — and the renders designed for each were B-phone and A-desktop. (The A-phone and C-phone renders reused desktop tables at 390px and overflowed; they were not fair renders of those directions.)

Sequence

1. Design doc in docs/designs/ — must answer SPA: visual identity — brand-derived link colour, display optical size, two-colour mark (owner decisions) #656's three questions (link colour derived from the brand, display optical size via the already-installed Inter opsz axis, the two-colour mark) and the two questions nobody has asked: the IA (18-link flat sidebar in 5 groups, bottom tabs + "More" sheet on phone) and the layout system (today: everything is a white card; A has none, B has cards for houses only).
2. Grill the design doc (contrarian pass) before signoff.
3. Slices, each filed on this epic, sized so each can be rendered and looked at; one PR per slice; every PR attaches a 1:1 before/after comparison captured from a stack rebuilt at the head under review (the only check in this repo that reads the rendered result; it found the sole real defect in the punch-list).

Constraints the slices inherit (from #650–#657, all shipped)

• Sentence-case labels everywhere; caps survive only on nav group dividers (web/src/styles.caps.test.ts).
• EmptyState (13 list screens, two variants, emptyStates.guard.test.ts) and .toolbar are reused, never rebuilt; --shadow-card is retired; the elevation guard (styles.elevation.test.ts) allow-lists exactly which selectors may cast a shadow — extend deliberately.
• Count a selector's call sites before styling it (grep -rn "<class>" web/src --include='*.tsx'); zero is a legitimate, stated answer.
• Removing a presentational transform makes every string it transformed a caller — read the strings in all three locales.
• Every web/ change ships Vitest tests in the same PR; style facts jsdom cannot see go in a styles.*.test.ts parsing styles.css with postcss.
• Coverage is a ratchet with <1 pt headroom on functions — never re-baseline to get green.
• i18n is not English-first: every new string ships en/es/tl inline, machine-drafted and flagged for native review; Spanish and Tagalog run longer.
• Docs in sync: GLOSSARY + Help page in the same PR when a concept appears or changes; a pure restyle owes neither and says so.

Touchpoints

• SPA: visual identity — brand-derived link colour, display optical size, two-colour mark (owner decisions) #656 — held for this; its three questions are answered by the design doc, not piecemeal.
• SPA: Audit has no date-range filter, and an audit trail is the screen that most needs one #666 (Audit has no date filter) and SPA: Expenses filters by a single month, where every sibling screen filters by a date range #667 (Expenses filters by month, siblings by range) — decide inside the design doc whether the revamp absorbs them or they stay separate.

Materials

Rendered mockups (desktop 1440×1000 and phone 390×844 for A/B/C), the handoff notes and the decision log live in the driver's records (~/.claude/driver-records/cluckwork-revamp/), not in the repo; the design doc brings whatever the repo needs to keep.