TicketCard

components/ui/ticket-card.tsx

A queue card for one support ticket. The ticket number is treated as content rather than chrome — monospaced, exact and copyable in one press — the subject clamps to two lines, and the footer carries the requester, the channel they wrote in on, and how long they have been waiting. The wait shifts to a heavier and then a destructive reading as the SLA slips, and the breach is spelled out beside the status so the colour is never the only signal.

Default

Copying the ticket number

The number is the string an agent pastes into every other system, so it gets a real button. The icon swaps to a check and a live region says which number was copied, without moving focus.

Past its SLA

The one state that earns colour. The breach is named next to the status and the wait goes heavier as well as red, so neither reading depends on seeing the hue.

No requester on file

A ticket raised through the portal without a matched contact keeps the avatar's space and says what is missing, so the row does not collapse.

Long subject

The subject clamps to two lines and the requester line truncates, so a wordy complaint cannot push the wait time off the card.

Loading

The skeleton holds the real card's height and its footer, so a queue does not jump when the tickets arrive.

Loading ticket

In a queue

The density case: three tickets stacked, with the status pills on one axis and the wait times on another, so a breach is visible without reading a word.