A multi-step support workflow: search and filters, synchronized state, validation, resolution, responsive operation, and accessible controls.
Triage Desk
A multi-step support workflow: search and filters, synchronized state, validation, resolution, responsive operation, and accessible controls.
One frozen interface task does not establish production readiness, domain expertise, or general agent reliability.
The latest published prompt.
Build a responsive one-page support operations workspace called TRIAGE DESK for a small software team. Seed exactly four incidents: INC-204, Checkout timeout, Northstar Bikes, Critical, Web, 6 min, Unassigned; INC-203, Duplicate invoice, Kanso Studio, High, Email, 18 min, Noor Patel; INC-202, Export stuck at 99%, Fieldnote Labs, Medium, Chat, 42 min, Imani Brooks; and INC-201, Cannot rename workspace, Alder & Co, Low, Email, 1 hr, Leo Martins. All four begin Open. Make urgency and current queue state easy to scan. Include text search, status filters for All, Open, and Resolved, and a severity filter; combinations must work together and show a clear empty-result state. Selecting a queue item must open a useful incident detail with the incident facts, a short customer report, and an activity timeline. In the detail, let the operator change severity, choose among Unassigned, Mira Chen, Noor Patel, Imani Brooks, and Leo Martins, write an internal note, and resolve the incident. Resolution must be blocked when the note is blank, with visible guidance. A successful resolution must preserve the note in the timeline, show a clear Resolved state, and update the queue, filters, and counts without losing the selected incident. Keep the workflow useful at narrow mobile widths and support keyboard operation with visible focus and properly associated labels. For standardized evidence, use these exact hooks: id="ticket-search" on the search input, id="severity-select" on the detail severity select with lowercase option values, id="owner-select" on the owner select with value "mira" for Mira Chen, id="internal-note" on the note field, and id="incident-status" on the selected incident's visible status. Give the selected incident control an accessible name containing its ID and title, and give the final action the accessible name "Resolve incident". Use one self-contained offline HTML file with vanilla CSS and JavaScript, with no external assets, fonts, libraries, APIs, or network requests.
10 checks, decided by a human.
- 01Exactly the four frozen incidents and their supplied facts are present, with every incident initially Open.
- 02The queue makes urgency, assignment, status, and useful aggregate counts easy to scan.
- 03Text search, status filters, and severity filtering compose correctly and include a clear empty-result state.
- 04Selecting an incident keeps the queue context visible and reveals its facts, customer report, and activity timeline.
- 05Severity and owner changes remain synchronized between the selected detail, queue, filters, and counts.
- 06Attempting to resolve with a blank internal note is blocked and produces visible, actionable guidance.
- 07A successful resolution preserves the note in the timeline and clearly changes the incident to Resolved.
- 08After resolution, the selected detail, queue row, filters, and aggregate counts remain mutually consistent.
- 09The workflow remains usable at narrow widths and provides semantic labels, keyboard operation, and visible focus.
- 10The artifact is one responsive, self-contained HTML document that works offline without external dependencies.
Published scorecards also apply 4 weighted craft dimensions. Their exact scores and rationale remain attached to each report.