Onboarding red dots, part 3: the go-live Overview
Gera, 2026-10-04: a red dot to the right of anything still open. On the Overview: beside each open Required item.
5 Oct 2026 · branch feat/onboarding-red-dots-overview · captured against propflow-stage · at 79157aae022+local
Data note. Every name and balance below comes from propflow-stage, which is anonymized by construction (ADR-0097/0110 — phones in the impossible +1000 NPA, emails @example.test). The identical capture against prod would carry real tenants' names and balances and is not safe to attach anywhere, which is why the generator refuses to run against one.
1 · Empty: a company that has done nothing yet
A brand-new test company: every Required item is open, so each carries the red dot right after its name. Optional items carry none.
Asserted in the captured DOM — Before Clara goes live · Required · required items done · Invite your team and check everyone can sign in · Choose which buildings Clara works in · Connect · Still open
Sections 2–8 and notes
2 · Partly done
Part-way through: done Required items are ticked and have no dot (their room is kept, so nothing shifts); open Required items still have one. Optional items never do.
Asserted in the captured DOM — Before Clara goes live · Required · required items done · Invite your team and check everyone can sign in · Choose which buildings Clara works in · Connect · Still open
3 · Furthest along (dark)
The most complete test company, dark mode: the red badge token has its own dark value.
Asserted in the captured DOM — Before Clara goes live · Required · required items done · Invite your team and check everyone can sign in · Choose which buildings Clara works in · Connect · Still open
4 · Phone, light
Phone width: the dot stays beside the item's name, before its Required tag, with no sideways scroll.
Asserted in the captured DOM — Before Clara goes live · Required · required items done · Invite your team and check everyone can sign in · Choose which buildings Clara works in · Connect · Still open
5 · Phone, dark
Phone width, dark.
Asserted in the captured DOM — Before Clara goes live · Required · required items done · Invite your team and check everyone can sign in · Choose which buildings Clara works in · Connect · Still open
6 · Loading: static words at once, skeletons only for values
The checklist read is held open: labels and tags are real; no dot is drawn yet, and every Required line already holds the dot's room (screen rule 18).
Asserted in the captured DOM — Before Clara goes live · Set up billing · Required · Choose which buildings Clara works in · Optional
7 · Live: “You're live”
A live company sees "You're live" and no checklist, so no dots at all.
Asserted in the captured DOM — You're live
8 · Live, phone dark
Live, phone dark: no dots.
Asserted in the captured DOM — You're live
What is pinned by tests
go-live-overview-dots.dom.test.tsx renders the real checklist: the dot on open Required items (questions included), room kept with no dot on done ones, nothing on Optional items, the dot on an item we could not check (it is open, never shown as done), and room kept while loading. Reading the item's state instead of its one open answer turns the could-not-check case red.