Dockline: Exception Queue and Recovery Plans

Build Dockline Ops Control: a working, self-contained operations admin dashboard for a shift lead who must inspect six shipping exceptions, acknowledge them without losing records, and draft a local recovery plan. Return complete runnable HTML with embedded CSS and JavaScript, not another design brief. No packages, remote fonts, images, storage or backend. The optional hosted measurement script described below is the only permitted subrequest; the UI must work when it is missing or blocked. All data and actions are fictional and stay in this tab. Do not imply live monitoring, dispatched work, saved server records or notified customers.

Inputs and customization
- Product: Dockline Ops Control. Workspace: Northeast operations. Snapshot label: Sample shift · 09:42. Change these display strings in one CONFIG object, along with the record fixtures and owner list. Render configurable text with textContent, never as HTML.
- Owners: Maria Chen, Jay Patel, Rowan Imani, Sam Brooks, Luz Romero. All are fictional.
- Six records; cents are integer USD exposure, not orders or invoice payments:
  ORD-78142 | 10:30 | Sort cell capacity breach | ALB-03 | Maria Chen | 1840000 | Critical
  ORD-78177 | 10:45 | Carrier pickup missed scan | PRV-01 | Jay Patel | 720000 | Carrier
  ORD-78201 | 11:00 | Cold-chain confirmation missing | PRV-01 | Jay Patel | 1290000 | Critical
  ORD-78234 | 11:15 | Dock door unavailable | ALB-03 | Rowan Imani | 510000 | Critical
  ORD-78310 | 11:30 | Linehaul tender rejected | EWR-08 | Sam Brooks | 980000 | Carrier
  ORD-78355 | 12:00 | Address verification hold | BDL-02 | Luz Romero | 160000 | Review
- Initial record status: Open. Available status values: Open, Acknowledged, Plan drafted. Risk class is separate and never changes merely from acknowledgment or planning. Money must always derive from cents; initial exposure is $55,000 and critical count is 3. No fabricated percentages or recovery-performance claims.
- Customize colors and spacing with CSS variables. Keep fixture IDs unique, times in HH:MM format, exposure nonnegative integers and owners in the allowed list. Document these assumptions beside CONFIG.

Preserve the existing Dockline visual language
Use a restrained warm-paper operations interface, dark ink, burnt-orange primary action and teal secondary emphasis. System sans serif; tabular numerals for money/time and a mono treatment for IDs. Retain a compact top brand bar, a summary strip, a dense exception queue and a recovery inspector at the right on desktop. Remove ornamental moving throughput lanes and unrelated faux health/audit metrics. This is a targeted quality repair within the existing design, not a new marketing page. Clear column alignment, quiet one-pixel dividers, 8px corner radii, deliberate 13–16px controls, generous enough line heights. Make all six rows visible at 1440×900; the queue is the primary surface. Avoid decorative gradients, stock art and unnecessary cards. Provide a source link to /prompts/app-dashboards-dashboard-design-prompts-for-admin-panels-20260630-free/.

Queue and derived summary
- Above the queue show Search exceptions, Site (All sites plus four fixture site codes), Risk (All risks/Critical/Carrier/Review), and Status (All statuses/Open/Acknowledged/Plan drafted). Compose all four filters with a case-insensitive substring search across ID, issue, site and current owner. Provide Clear filters.
- Summary is explicitly labeled Matching exceptions and derived from the same filtered records: count, critical count, exposure and plan-drafted count. Initial values 6, 3, $55,000, 0. Status Open after acknowledging the first record yields 5, 2, $36,600, 0. Acknowledging must never erase records. Resetting status to All shows all six and the changed status.
- Default sort is ascending promise time then ID. Queue columns: ID/promise, issue/site, owner, exposure, status and an explicit Inspect button with record ID in its accessible name. Risk appears as a text label, never only color. Selected row has a visible treatment. Never depend on clickable rows alone.
- Select the first visible record by default. When filtering hides selection, select the next visible record. Zero matches means no selected record, a helpful empty message and Clear filters, with all four derived summaries zero and no stale inspector actions. Changing filters back restores a valid selection.

Local record workflow
- Inspector repeats the selected ID, risk, issue, site, promise, exposure and current status. It must be directly after the queue at narrow widths; Inspect moves focus to its heading and scrolls it into view. Do not use a floating panel that hides the queue. Initial inspector form is visible and usable.
- Acknowledge changes only the selected Open record to Acknowledged, updates queue/summary and appends one local activity entry. Disable it for Acknowledged or Plan drafted records with truthful text. Acknowledged exposure is still included: acknowledgment does not resolve the exception.
- Recovery form: Assigned owner (select), Recovery note (textarea, trim, require 10–240 characters), and Draft recovery plan. Prefill current owner, empty note. Show associated validation and focus invalid note. Submit on an Open or Acknowledged record. Allow at most one plan per record; once drafted show an immutable plan receipt with its ID, original snapshot of record ID/issue/site/promise/exposure, chosen owner, note, and the words Local draft. No work dispatched. Freeze editing/acknowledgment for that record. Current owner changes to the draft's owner only on success.
- Drafting takes 600ms to show an honest local loading state. Snapshot the submitted record, owner and trimmed note. Disable filters, record navigation and form while pending, but allow Cancel draft and Reset demo. Cancellation or reset invalidates the pending callback and does not create a plan. Double-click cannot create duplicate plans.
- A details element labeled Demo controls contains Fail next draft (checkbox). Consume it on the next valid submission. Failure keeps the original submitted snapshot and form values, leaves records/counts unchanged, announces Could not create this local draft, and offers Retry draft and Dismiss error. Retry uses the original snapshot and succeeds unless a fresh failure is explicitly selected. Disable changing form/filter/selection while this retryable error is open. Canceling a retry preserves the original error and retry option. Dismiss error unlocks editing without discarding typed values.
- Number successful plans sequentially DL-001, DL-002, etc.; canceled/failed attempts consume no IDs. Acknowledge and draft entries show only real local actions (no seeded fake events). Reset demo cancels pending work, restores exact fixtures, selection/filters/form, clears activity, failure controls and plan sequence. Reloading also starts fresh; say Changes reset on reload.

Portable recovery receipt
- Add Copy receipt to each successful immutable receipt. Build the exact plain-text output once from the submitted snapshot, with this line order: Dockline local recovery receipt; Plan: DL-001 (the actual sequential ID); Exception: record ID; Issue: original issue; Site: original site; Promise: original promise; Exposure (USD): formatted dollars; Assigned owner: chosen owner; a blank line; Recovery note:; the trimmed note preserving line breaks; a blank line; Local draft. No work dispatched. Copy must never read mutable form fields or another selected record.
- Use await navigator.clipboard.writeText(receiptText). Show Copying receipt… and disable the copy button while pending. Show Receipt copied only after the actual write resolves. For unavailable API, denied permission or rejected write, say Clipboard unavailable. Select and copy the receipt below.; reveal a labeled read-only textarea containing the exact receipt, focus it and select its full text. Offer Retry copy. Do not imply manual selection copied anything.
- Reset and changing selection invalidate pending copy feedback and measurement. A late clipboard resolution must not announce stale success or emit a copy event for a reset or different record. Explain that a pending browser clipboard write cannot be revoked. Receipt contents remain identical on retry and when revisiting a plan; copying adds no plan or local activity entry.

Optional hosted measurement
- Include <script defer src="/prototype-analytics.js"></script>. This is an optional host-provided adapter, not a dependency of the local workflow; missing, blocked or failing measurement must never prevent inspecting, drafting, copying or resetting. On a standalone host it may be omitted. Keep local data in this tab except when the user explicitly copies a receipt to their clipboard.
- Dispatch window CustomEvent('uipl:prototype-outcome', {detail: 'recovery_draft_created'}) exactly once after a successful receipt has been created. Invalid notes, failures, cancellation, acknowledgement and reset emit no outcome event. Dispatch window CustomEvent('uipl:prototype-output-copy', {detail: 'recovery_receipt'}) only after confirmed clipboard-write success for the still-current receipt. Never emit on click, unavailable/denied copy, manual selection or a stale asynchronous result.
- These event details are fixed strings. Never include record IDs, names, notes, receipt contents, search terms, timestamps or other entered values in events. The hosted adapter alone owns consent, deduplication and transport; do not implement network calls or analytics storage in this HTML.

Responsive and accessible states
- At widths 1440 and 1024 use queue + inspector when space permits; at 768 and below stack them. At 390 and 320 use readable labeled record rows/cards, without a page-level sideways scroll or clipped table cells. Put compact matching summary before records. Inputs at least 16px and buttons/touch targets at least 44px on mobile. Long words, names and notes wrap; whitespace in notes is preserved.
- Use semantic landmarks/headings/labels, native buttons/selects/textarea, visible 2px focus outlines and logical keyboard order. Announce loading, cancellation, failure and success via a persistent polite status region, avoid duplicate announcements, and keep action focus sensible when UI changes. Disable unavailable actions natively and explain why. WCAG AA contrast for text, badges and controls.
- Prefer a static UI. No animation under reduced motion or Save-Data. Must remain usable at 200% CSS zoom. No timers other than the disclosed draft simulation, and no entered values in measurement events.
- Visible disclosure: Fictional shift data. Changes stay in this tab; no work is dispatched. Changes reset on reload.

Acceptance checklist
1. Initial six records equal 3 critical / $55,000 / 0 plans. Compose site + risk + status + search; clear and zero-state recovery retain correct selection and exact summaries.
2. Acknowledge ORD-78142; it remains visible, status changes, no money disappears. Status Open shows exactly 5 records, 2 critical and $36,600; show all to inspect it again. Repeated acknowledgment is disabled.
3. Invalid 9-character/whitespace notes produce no mutation. A valid note and allowed owner create DL-001 after loading, update exactly one record, and preserve an immutable receipt and one activity entry. No send/save/server claim.
4. Forced failure changes nothing; retry uses the original snapshot, succeeds once, and consumes one ID. Cancel, retry cancellation, dismissal, reset during pending and rapid double-submit never leave late results or duplicate plans.
5. Filtering to no matches removes stale inspector/form. Inspect works with keyboard and moves heading focus on mobile. Complete the recovery form at 320px without sideways scrolling; long notes/text remain readable.
6. Verify desktop/mobile, loading, empty, invalid/error and completed states, contrast, focus, reduced motion and reload reset in a real browser. Report actual tool/model/date and remaining limitations separately. Do not claim human review, other-model compatibility or live integrations.

7. Confirm actual clipboard text equals the immutable receipt at desktop and mobile widths. Exercise denied/unavailable clipboard, manual selection, retry, repeated clicks, record changes and reset during pending copy; no stale success or events. Verify fixed event detail values only after real completed actions and continued usability with the hosted script blocked.