Support Queue Triage and Assignment

Build a runnable, self-contained HTML/CSS/JavaScript support dashboard, not another design brief. The buyer job is a support lead finding the next at-risk conversation and assigning it to a named specialist with a visible, consistent result.

Inputs and customization
- Product name: RelayDock. Audience: a small B2B SaaS support team. Replace these with your product and team.
- Supply ticket records with id, subject, fictional organization, queue, priority, minutes until SLA, assignee (or Unassigned), and a short issue summary. Supply specialist names and their queues. Replace sample records and thresholds together when adapting.
- Default fictional tickets: RD-1042 / Webhook deliveries failing / Northstar Demo / Technical / High / 8 minutes / Unassigned; RD-1043 / Invoice export missing rows / Juniper Demo / Billing / High / 22 minutes / Unassigned; RD-1044 / Invite link expired / Lumen Demo / Access / Normal / 75 minutes / Mina Patel; RD-1045 / API timeout after import / Atlas Demo / Technical / High / -4 minutes / Unassigned; RD-1046 / Update billing contact / Cedar Demo / Billing / Normal / 140 minutes / Owen Brooks; RD-1047 / SSO setup question / Orbit Demo / Access / Normal / 95 minutes / Mina Patel.
- Specialists: Alex Chen (Technical), Owen Brooks (Billing), Mina Patel (Access). Allow reassignment only to a specialist matching the selected ticket queue. Use an explicit selector, never an invented best-specialist claim.
- SLA risk means due in 30 minutes or less, including overdue. Use fixed demo times; do not imply live monitoring.

Composition and visual system
- Create one calm work surface: compact product rail on desktop, queue workspace, and selected-ticket inspector. Lead with “Support queue” and a plain-language count of unassigned at-risk tickets, followed by filters and the actual queue. Avoid decorative KPI cards or charts.
- White workspace, cool slate background, deep navy text, cobalt actions, amber due-soon and red overdue labels. Use system sans-serif with a readable 14–16px working size, clear headings, tabular time values, subtle row separators and generous space around the primary action.
- Each row exposes id, subject, organization, queue, written SLA status and assignee. Sort by SLA urgency. Priority, selection and risk cannot rely on color alone.
- Keep “Fictional demo data. Changes stay in this page.” visible. No stock art, fake testimonials, sales claims, network requests, sign-in or third-party dependencies.

Working behavior and constraints
- Maintain one ticket array and derive the list, result count, risk count, selected detail and assignee from it. Search by id, subject or organization; combine search, queue selector and “Unassigned only” filter. Clearing filters restores all six records. If selection is filtered out, clear the inspector with guidance instead of displaying a hidden ticket.
- A real button on every row opens the ticket inspector. Show the same id, subject, issue summary, SLA, queue and assignee; provide a labeled matching-specialist selector and “Assign ticket” action. On assignment update that record and every visible representation, announce the change, and accurately explain that no notification was sent. Disable a repeated assignment to the same person. If an unassigned-only filter hides the assigned ticket, clear selection and announce why. Other records must not change.
- Provide an explicit demo-data selector for Ready, Loading, Empty and Error states. Loading shows a status and disables mutation. Empty explains that the demo has no tickets and offers Restore demo data. Error gives a specific failed-load message and Retry; retry restores the current in-memory records, preserving assignments. These are controlled simulations, not actual failed API calls.
- Reset demo restores original records, filters and selection. No fake send, publish, automatic rebalance or backend-success actions. No timers are needed for SLA values.

Responsive and accessible states
- Check 1440px, 1024px, 768px, 390px and 320px. At narrow widths remove the decorative rail, stack filters, convert rows into readable ticket blocks, and open the inspector as an accessible native modal with Close. Keep subject, SLA, current assignee and action available; no page-level horizontal scrolling or clipped long names.
- Use native buttons, labels and selects; visible keyboard focus; an aria-live status for assignment/filter/data-state updates. Modal Escape/Close returns focus to its trigger when present, otherwise to the queue heading. Preserve a clear selection state and stable focus after filters hide a ticket. Respect reduced motion with no essential animation.

Acceptance checklist
1. Searching RD-1042 returns exactly that ticket; a nonsense query explains no matches and Clear filters restores six.
2. Queue + search + unassigned filters compose, with correct counts. Filtered-out tickets never remain actionable in the inspector.
3. Open RD-1042, assign Alex Chen, and verify the same assignee in the row and inspector; unassigned at-risk count drops from three to two. Repeating the same assignment is disabled.
4. Under Unassigned only, assign RD-1045; it leaves the list, the selection clears, other records retain their values, and the result is announced without claiming a message was sent.
5. Loading and Error never expose an enabled mutation. Retry retains an earlier assignment; Empty has an obvious restore path; Reset restores the original six tickets.
6. Keyboard-only selection, assignment, mobile modal close and Escape work with focus restored. No overflow at all five widths; long subject/name stress, reduced motion, contrast and console errors are checked.

Deliver the complete runnable implementation and report the actual checks performed, tool/model, date and remaining limits. Do not claim human review or compatibility with an untested tool. Production adaptation still needs real authentication, server validation, persistence and authorization.