Prototype — prd-79-insurance-multiselect
Every screen and state, on desktop and mobile, at a glance. Click any frame — or Enter the prototype — to open it live.
Reach: Protection tab
Default state. One AIA bundle card (Life $400k + Trauma $80k, per-cover amounts) alongside four single-type cards. Summary bar reconciles exactly: 5 active, $510/mo (tile = sum of the cards' rounded monthlies).
Reach: + Add a policy tile
Type picker open, no covers yet, Save disabled.
Reach: pick a single type
One cover row; premium label reads 'Premium amount' (not Total); no bundle helper copy. No regression.
Reach: pick 2+ types
Inline cover amount per type; one shared total premium ('Total premium amount'); one shared renewal date; visible optional documents.
Reach: bundle → 'Set a different date per cover'
Renewal expanded to one Month/Year pair per cover (Life/Trauma Mar 2027, Income Aug 2027).
Reach: Save clicked (in flight)
Save button disabled with a spinner + 'Saving…'; fields preserved.
Reach: save request fails
Friendly non-technical banner at the top of the form; everything the user typed is preserved for retry.
Reach: successful save
Success: toast 'Bundle saved - 3 covers'; the newly added highlighted card is the exact Partners Life 3-cover bundle the form sequence shows (~$199/mo, renews Mar 2027). Summary reconciles: 6 active, $709/mo.
Reach: Edit on the bundle card
Edit modal pre-filled from the seeded AIA bundle - covers populated, shared renewal detected, header reads 'Edit policy'.
Reach: recorded review date over 12 months old
Warning Banner. Hidden for the default persona (no review date recorded).
Reach: policies / recommendations fetch in flight
Snapshot skeleton + recommendations sparkle cluster.
Reach: brand-new account, no policies
Snapshot 'Add your first policy' empty state + recommendations empty state.