Ops work queue

<main class="stack" data-gap="lg">
  <div class="cluster" data-justify="between">
    <div>
      <div class="card-label">Workspace</div>
      <h1 style="margin:0.25rem 0 0;letter-spacing:-0.02em">Ticket queue</h1>
    </div>
    <div class="cluster" data-gap="sm"><span class="badge" data-tone="warning"><span class="badge-icon"><svg class="icon" aria-hidden="true"><use href="#i-triangle-alert"/></svg></span>3 critical</span><button type="button" class="button" data-variant="outline">Filters</button></div>
  </div>
  <div class="metrics-grid" data-tile-count="3">
    <div class="metric-tile" data-metric-key="open">
      <div class="metric-label">Open</div>
      <div class="metric-value">18</div>
    </div>
    <div class="metric-tile" data-metric-key="wip" data-tone="accent">
      <div class="metric-label">In progress</div>
      <div class="metric-value">7</div>
    </div>
    <div class="metric-tile" data-metric-key="critical" data-tone="destructive">
      <div class="metric-label">Critical</div>
      <div class="metric-value">3</div>
    </div>
  </div>
  <div class="stack" data-gap="sm" aria-label="Open tickets">
    <div class="queue-row attn-both attn-tone-critical" data-queue-row data-attn="critical">
      <div class="queue-row-main">
        <div class="queue-row-headline"><span class="queue-row-title">Billing charge failed — Acme</span><span class="badge" data-tone="destructive">critical</span></div>
        <p class="queue-row-attn">SLA breaches at 16:00 — assign now.</p>
        <span class="queue-row-date">opened 2h ago</span>
      </div>
      <div class="cluster" data-gap="xs"><button type="button" class="button" data-variant="primary" data-size="sm">Claim</button><button type="button" class="button" data-variant="outline" data-size="sm" data-dialog-open="ops-peek">Peek</button></div>
    </div>
    <div class="queue-row " data-queue-row>
      <div class="queue-row-main">
        <div class="queue-row-headline"><span class="queue-row-title">SSO login loop — Globex</span><span class="badge" data-tone="warning">high</span></div>
        <span class="queue-row-date">opened 5h ago</span>
      </div>
      <div class="cluster" data-gap="xs"><button type="button" class="button" data-variant="primary" data-size="sm">Claim</button><button type="button" class="button" data-variant="outline" data-size="sm">Open</button></div>
    </div>
    <div class="queue-row " data-queue-row>
      <div class="queue-row-main">
        <div class="queue-row-headline"><span class="queue-row-title">Export CSV empty — Initech</span><span class="badge" data-tone="neutral">medium</span></div>
        <span class="queue-row-date">opened yesterday</span>
      </div>
      <div class="cluster" data-gap="xs"><button type="button" class="button" data-variant="primary" data-size="sm">Claim</button></div>
    </div>
  </div>
  <div id="toast" class="toast-stack" data-toast-stack aria-live="polite">
    <div class="toast" data-toast-level="success" data-remove-after="8000" role="status">
      <div class="toast__body">
        <div class="toast__title">Ticket claimed</div>
        <div class="toast__message">Billing charge failed — Acme is yours.</div>
        <div class="toast__actions"><button type="button" class="button" data-variant="ghost" data-size="sm">View</button></div>
      </div>
    </div>
  </div>
</main>
<dialog class="dialog" id="ops-peek" aria-labelledby="ops-peek-title" closedby="any">
  <form method="dialog">
    <div class="dialog__header">
      <h2 class="dialog__title" id="ops-peek-title">Billing charge failed</h2>
      <button type="submit" class="dialog__close" aria-label="Close dialog"><svg class="icon" aria-hidden="true"><use href="#i-x"/></svg></button>
    </div>
    <div class="dialog__body">
      <p>Peek fragment — enough to claim or escalate without leaving the queue. Full record is a separate owned URL.</p>
    </div>
    <div class="dialog__footer"><button type="submit" class="button" data-variant="outline">Close</button><button type="submit" class="button" data-variant="primary" value="claim">Claim</button></div>
  </form>
</dialog>