descrybe/docs/support-auto/07-user-support-detail-ui.md

07 — User support detail UI (rich tickets)

Agent: 7/10 (support-auto)
Date: 2026-08-05
Contract: 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

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)