# 07 — User support detail UI (rich tickets)

**Agent:** 7/10 (`support-auto`)  
**Date:** 2026-08-05  
**Contract:** [02-contract.md](./02-contract.md) §2 / §4.4 / §9  
**Surfaces:** `/support/new`, `/support/[ticketId]` (list labels shared)

---

## Outcome

Customer Support Center UX for richer tickets:

1. **Create form** — category help text, priority help, optional SKU + tags (disclosure), existing subject/body counters.
2. **Thread** — distinct bubbles for you / human support / automated (KB|template) / AI-assisted / system; badges never impersonate a named agent.
3. **Progress** — status + `auto_reply_status` drive a polite “we're on it” / “quick answer sent” banner.
4. **CSAT** — unchanged (`SupportTicketRating` when resolved/closed).

Polish: `aria-describedby` on category/priority/optional fields; thread remains `role="log"` + visibility-aware 20s poll.

---

## Client changes

| File | Intent |
|------|--------|
| `apps/web/src/lib/support/types.ts` | Taxonomy categories + help; auto message/ticket fields; create `tags` / `related_sku` |
| `apps/web/src/lib/support/display.ts` | Labels, tag normalize, `messageKind*`, `ticketProgressState` |
| `apps/web/src/lib/support/api.ts` | Parse additive fields; POST optional tags/SKU |
| `apps/web/src/routes/support/new/+page.svelte` | Clearer create form |
| `apps/web/src/routes/support/[ticketId]/+page.svelte` | Thread + progress banner + tags/SKU chips |
| `apps/web/src/routes/support/+page.svelte` | Shared category/priority labels |

**ASSUMPTION:** Backend agent 5 exposes additive JSON (`tags`, `related_sku`, `auto_reply_status`, message `is_auto_reply` / `auto_source`). UI tolerates missing fields (progress falls back to status-only; bubbles fall back to role).

**ASSUMPTION:** Internal AI drafts (`ai_draft` / internal notes) stay stripped by existing `asTicket` filter — customers never see drafts.

---

## Message labeling (customer)

| Kind | Detection | Badge |
|------|-----------|-------|
| You | `author_role=user` | — |
| Support | `author_role=agent` | — |
| Automated | `is_auto_reply` + source `kb`/`template` (or system auto) | Automated answer |
| AI-assisted | `auto_source=ai` | AI-assisted |
| System | other `system` | — |

---

## Progress copy

| Condition | Title |
|-----------|-------|
| `closed` | Ticket closed |
| `resolved` | Marked resolved |
| `auto_reply_status` ∈ matched \| ai_sent | Quick answer sent |
| handed_off \| failed \| `pending` | We're on it |
| `open` (else) | Ticket received |

---

## Verification

```bash
cd apps/web && npm run check
```

Manual:

1. `/support/new` — change category/priority; help text updates; optional details expand; create with SKU/tags.
2. Thread — mock or real auto/AI system messages show distinct styles + badges.
3. Open → pending → resolved — progress banner + CSAT still submits.
4. Plan gate — `support.ticket_create` upgrade panel unchanged.

---

## Out of scope

- Staff approve/edit AI drafts (agent 8)
- Admin KB settings UI (agent 6)
- Backend match/AI (agents 3–5)