# 06 — UI screens

## Primary screen: `/mortgage`

**Chat is the default canvas.** **Profile** and **Progress** are optional drawers. The customer can **toggle either panel on or off at any time** (header switches). Both may be collapsed so chat is full width.

Customer-facing progress **stops at step 8** (hand off to a licensed agent). Steps 9–11 (disclosures, e-app, issue) are **human-dependent** and are **not** shown in this UI.

```
Header:  [ Profile toggle ]  [ Progress toggle ]

┌──────── collapsed tab ┐  ┌──────── chat (flex) ────────┐  ┌ progress if ON ┐
│ PROFILE (if OFF)      │  │ messages + composer         │  │ steps 0–8 only │
└───────────────────────┘  └─────────────────────────────┘  └────────────────┘
```

### Chat pane

- Messages, typing indicator while GPT-4o-mini runs.
- Disclaimer strip: *Not a lender. Not a bind. Life insurance to help with a remaining mortgage.*
- If `stop_path`: show terminal card (wrong product / DNC).
- If `emergency_stop`: stop interview; show urgent-care message (health step).

### Profile pane

- Sections from [03-applicant-profile.md](./03-applicant-profile.md).
- Empty R fields: “We’ll ask this next.”
- BMI: show height, weight, computed BMI; do not show raw vector ids.
- Impairments: customer-friendly labels (Heart, Diabetes), not `ans_code`.

### Process pane (toggle)

- Vertical list **steps 0–8 only**.
- Step 8 is the last in-app step: induct / hand off to a licensed agent.
- Active step: **Goal**, **Exit gate**, missing fields.
- Do not render steps 9–11 in the stepper.

## Landing `/`

CTA: **Start mortgage protection chat**. Creates `caseId`, routes to `/mortgage`.

## Accessibility

- Don’t rely on color alone for R/S/O.
- Profile updates announced politely (aria-live polite) when fields fill.

Mockups (toggle states, steps 0–8 only):

| # | Profile | Chat | Progress | File |
|---|---------|------|----------|------|
| 1 | open | open | open | `mockup-1-all-open.png` |
| 2 | closed | open | closed | `mockup-2-chat-only.png` |
| 3 | open | open | closed | `mockup-3-profile-chat.png` |
| 4 | closed | open | open | `mockup-4-chat-progress.png` |


Reuse the knowledge HTML dark actuarial palette if desired (`#0b1220` / `#152033`), or a calmer consumer light theme. Keep **badges R/S** consistent with the dataset page so internal reviewers recognize the spec.