data-table-component
rendered
the brief, redacted

Design a dense data table with sorting affordances and a selected row state. Tests whether a model can make information density feel calm rather than cramped.

559 chars · 82 words · fingerprint 3b4a4ef0b3ee

raw output — byte exact

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Deployments</title>
<style>
  :root{
    --bg: #f4f5f7;
    --panel: #ffffff;
    --border: #e2e4e8;
    --border-strong: #d3d6dc;
    --text: #23262b;
    --text-dim: #6b7078;
    --text-faint: #9096a0;
    --accent: #2f6fed;
    --accent-bg: #eaf1fe;
    --hover-bg: #f1f3f6;
    --success: #1a7f4b;
    --success-bg: #e6f5ec;
    --fail: #b3261e;
    --fail-bg: #fbeaea;
    --warn: #9a6300;
    --warn-bg: #fbf2e0;
    --progress: #3054a8;
    --progress-bg: #eaeff9;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  }

  html, body{
    background: var(--bg);
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
  }

  .wrap{
    padding: 48px 32px;
  }

  .panel{
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(20,22,26,0.04);
    width: 980px;
    overflow: hidden;
  }

  .panel-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
  }

  .panel-title{
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: 0.1px;
  }

  .panel-sub{
    font-size: 12px;
    color: var(--text-faint);
    margin-top: 2px;
  }

  .panel-meta{
    font-size: 12px;
    color: var(--text-dim);
  }

  table{
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
    color: var(--text);
  }

  thead th{
    text-align: left;
    font-weight: 600;
    color: var(--text-dim);
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 9px 14px;
    border-bottom: 1px solid var(--border-strong);
    background: #fafbfc;
    white-space: nowrap;
    user-select: none;
  }

  th.checkcol, td.checkcol{
    width: 34px;
    padding-left: 16px;
    padding-right: 4px;
  }

  th.sortable{
    cursor: pointer;
    position: relative;
  }

  th.sortable .th-inner{
    display: inline-flex;
    align-items: center;
    gap: 5px;
  }

  th.sortable .arrow{
    font-size: 9px;
    color: var(--text-faint);
  }

  th.sort-active{
    color: var(--accent);
    background: #f6f9ff;
  }

  th.sort-active .arrow{
    color: var(--accent);
  }

  tbody tr{
    border-bottom: 1px solid var(--border);
    transition: background 80ms ease;
  }

  tbody tr:last-child{
    border-bottom: none;
  }

  tbody td{
    padding: 9px 14px;
    vertical-align: middle;
    white-space: nowrap;
  }

  tbody tr.row-hover{
    background: var(--hover-bg);
  }

  tbody tr.row-selected{
    background: var(--accent-bg);
    box-shadow: inset 3px 0 0 var(--accent);
  }

  tbody tr.row-selected.row-hover{
    background: #e2ecfd;
  }

  input[type="checkbox"]{
    width: 14px;
    height: 14px;
    accent-color: var(--accent);
    cursor: pointer;
    vertical-align: middle;
  }

  .service{
    font-weight: 600;
    color: var(--text);
  }

  .service-id{
    display: block;
    font-weight: 400;
    color: var(--text-faint);
    font-size: 11px;
    margin-top: 1px;
    font-family: "SFMono-Regular", Consolas, monospace;
  }

  .region{
    color: var(--text-dim);
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 12px;
  }

  .user{
    display: flex;
    align-items: center;
    gap: 7px;
  }

  .avatar{
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: #dde2ea;
    color: #565d68;
    font-size: 9.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .duration{
    font-family: "SFMono-Regular", Consolas, monospace;
    color: var(--text-dim);
  }

  .timestamp{
    color: var(--text-dim);
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 12px;
  }

  .badge{
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px 3px 6px;
    border-radius: 4px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
  }

  .badge .glyph{
    font-size: 11px;
    line-height: 1;
    display: inline-block;
  }

  .badge.success{ background: var(--success-bg); color: var(--success); }
  .badge.fail{ background: var(--fail-bg); color: var(--fail); }
  .badge.warn{ background: var(--warn-bg); color: var(--warn); }
  .badge.progress{ background: var(--progress-bg); color: var(--progress); }

  .panel-footer{
    display:flex;
    align-items:center;
    justify-content: space-between;
    padding: 10px 18px;
    border-top: 1px solid var(--border);
    font-size: 11.5px;
    color: var(--text-faint);
  }
</style>
</head>
<body>

<div class="wrap">
  <div class="panel">

    <div class="panel-header">
      <div>
        <div class="panel-title">Deployments</div>
        <div class="panel-sub">production &amp; staging environments · last 24 hours</div>
      </div>
      <div class="panel-meta">8 of 214 records</div>
    </div>

    <table>
      <thead>
        <tr>
          <th class="checkcol"><input type="checkbox" aria-label="Select all"></th>
          <th>Status</th>
          <th>Service</th>
          <th>Region</th>
          <th>Deployed by</th>
          <th class="sortable">
            <span class="th-inner">Duration <span class="arrow">▲▼</span></span>
          </th>
          <th class="sortable sort-active">
            <span class="th-inner">Timestamp <span class="arrow">▼</span></span>
          </th>
        </tr>
      </thead>
      <tbody>

        <tr>
          <td class="checkcol"><input type="checkbox"></td>
          <td><span class="badge success"><span class="glyph">✓</span>Success</span></td>
          <td><span class="service">checkout-api<span class="service-id">svc-2291</span></span></td>
          <td><span class="region">us-east-1</span></td>
          <td><div class="user"><span class="avatar">MK</span>Mira Khan</div></td>
          <td><span class="duration">42s</span></td>
          <td><span class="timestamp">2024-06-11 14:22:03</span></td>
        </tr>

        <tr class="row-selected">
          <td class="checkcol"><input type="checkbox" checked></td>
          <td><span class="badge progress"><span class="glyph">◐</span>In progress</span></td>
          <td><span class="service">billing-worker<span class="service-id">svc-1187</span></span></td>
          <td><span class="region">eu-west-1</span></td>
          <td><div class="user"><span class="avatar">DT</span>Dan Torres</div></td>
          <td><span class="duration">1m 58s</span></td>
          <td><span class="timestamp">2024-06-11 14:18:47</span></td>
        </tr>

        <tr>
          <td class="checkcol"><input type="checkbox"></td>
          <td><span class="badge fail"><span class="glyph">✕</span>Failed</span></td>
          <td><span class="service">auth-gateway<span class="service-id">svc-0842</span></span></td>
          <td><span class="region">ap-southeast-2</span></td>
          <td><div class="user"><span class="avatar">RL</span>Ravi Lal</div></td>
          <td><span class="duration">0m 09s</span></td>
          <td><span class="timestamp">2024-06-11 13:59:12</span></td>
        </tr>

        <tr class="row-hover">
          <td class="checkcol"><input type="checkbox"></td>
          <td><span class="badge success"><span class="glyph">✓</span>Success</span></td>
          <td><span class="service">notification-svc<span class="service-id">svc-3310</span></span></td>
          <td><span class="region">us-east-1</span></td>
          <td><div class="user"><span class="avatar">SP</span>Sofia Perez</div></td>
          <td><span class="duration">36s</span></td>
          <td><span class="timestamp">2024-06-11 13:41:55</span></td>
        </tr>

        <tr>
          <td class="checkcol"><input type="checkbox"></td>
          <td><span class="badge warn"><span class="glyph">⚠</span>Rolled back</span></td>
          <td><span class="service">inventory-sync<span class="service-id">svc-1725</span></span></td>
          <td><span class="region">eu-central-1</span></td>
          <td><div class="user"><span class="avatar">JB</span>Jon Baird</div></td>
          <td><span class="duration">2m 14s</span></td>
          <td><span class="timestamp">2024-06-11 13:30:08</span></td>
        </tr>

        <tr>
          <td class="checkcol"><input type="checkbox"></td>
          <td><span class="badge success"><span class="glyph">✓</span>Success</span></td>
          <td><span class="service">search-indexer<span class="service-id">svc-2065</span></span></td>
          <td><span class="region">us-west-2</span></td>
          <td><div class="user"><span class="avatar">MK</span>Mira Khan</div></td>
          <td><span class="duration">51s</span></td>
          <td><span class="timestamp">2024-06-11 13:12:39</span></td>
        </tr>

        <tr>
          <td class="checkcol"><input type="checkbox"></td>
          <td><span class="badge progress"><span class="glyph">◐</span>In progress</span></td>
          <td><span class="service">image-resizer<span class="service-id">svc-4402</span></span></td>
          <td><span class="region">ap-south-1</span></td>
          <td><div class="user"><span class="avatar">AN</span>Amara Ng</div></td>
          <td><span class="duration">0m 27s</span></td>
          <td><span class="timestamp">2024-06-11 12:58:21</span></td>
        </tr>

        <tr>
          <td class="checkcol"><input type="checkbox"></td>
          <td><span class="badge fail"><span class="glyph">✕</span>Failed</span></td>
          <td><span class="service">payments-ledger<span class="service-id">svc-0951</span></span></td>
          <td><span class="region">us-east-1</span></td>
          <td><div class="user"><span class="avatar">DT</span>Dan Torres</div></td>
          <td><span class="duration">1m 03s</span></td>
          <td><span class="timestamp">2024-06-11 12:44:56</span></td>
        </tr>

      </tbody>
    </table>

    <div class="panel-footer">
      <span>Sorted by Timestamp · Descending</span>
      <span>Auto-refresh every 30s</span>
    </div>

  </div>
</div>

</body>
</html>
```

request envelope — prompt redacted

{
  "model": "anthropic/claude-sonnet-5",
  "system": "Respond with a single complete, self-contained HTML document rendering the component and nothing else. No markdown fences, no explanation. Inline all CSS and JavaScript, reference no external resource. Render the component at its natural size on a neutral background, with enough surrounding space that it can be photographed.",
  "messages": [
    {
      "role": "user",
      "content": "«REDACTED — 87 words, 559 chars»"
    }
  ],
  "maxOutputTokens": 32000,
  "gatewayStringId": "913c6230-cffd-4220-a05f-aa5c3bf66c4d"
}