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{
    --border: #e2e5e9;
    --border-strong: #d0d4da;
    --text-primary: #1c2127;
    --text-secondary: #6b7280;
    --text-tertiary: #97a0ab;
    --bg-page: #eef0f2;
    --bg-card: #ffffff;
    --bg-head: #f8f9fa;
    --bg-hover: #f2f6fb;
    --bg-selected: #eaf1fd;
    --accent: #2f6fed;
    --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  }

  *{ box-sizing: border-box; }

  body{
    margin:0;
    padding:48px;
    background:var(--bg-page);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    display:flex;
    align-items:flex-start;
    justify-content:center;
  }

  .panel{
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:8px;
    box-shadow:0 1px 2px rgba(16,24,40,0.04);
    width:960px;
    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-primary);
  }

  .panel-sub{
    font-size:12px;
    color:var(--text-secondary);
    margin-left:8px;
    font-weight:400;
  }

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

  table{
    width:100%;
    border-collapse: collapse;
    font-size:13px;
  }

  thead th{
    text-align:left;
    font-weight:600;
    font-size:11.5px;
    letter-spacing:0.02em;
    text-transform:uppercase;
    color:var(--text-secondary);
    background:var(--bg-head);
    padding:10px 16px;
    border-bottom:1px solid var(--border-strong);
    white-space:nowrap;
    user-select:none;
  }

  th.sortable{
    cursor:pointer;
  }

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

  th .arrow{
    display:inline-flex;
    width:10px;
    height:10px;
    opacity:0;
    color:var(--text-tertiary);
    transition:opacity .12s ease;
  }

  th.sortable:hover .arrow{
    opacity:0.55;
  }

  th.sorted-active{
    color:var(--text-primary);
  }

  th.sorted-active .arrow{
    opacity:1;
    color:var(--accent);
  }

  tbody td{
    padding:10px 16px;
    border-bottom:1px solid var(--border);
    color:var(--text-primary);
    vertical-align:middle;
  }

  tbody tr{
    transition: background-color .1s ease;
  }

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

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

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

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

  .col-check{
    width:36px;
    padding-right:0;
  }

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

  .service-name{
    font-weight:600;
    color:var(--text-primary);
  }
  .service-path{
    display:block;
    font-size:11.5px;
    color:var(--text-tertiary);
    font-family:var(--mono);
    margin-top:1px;
  }

  .region{
    font-family:var(--mono);
    font-size:12.5px;
    color:var(--text-secondary);
  }

  .deployer{
    display:flex;
    align-items:center;
    gap:8px;
  }
  .avatar{
    width:20px;
    height:20px;
    border-radius:50%;
    background:#dde3ea;
    color:#5b6472;
    font-size:10px;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
  }

  .duration{
    font-family:var(--mono);
    font-size:12.5px;
    color:var(--text-secondary);
  }

  .timestamp{
    font-family:var(--mono);
    font-size:12.5px;
    color:var(--text-secondary);
    white-space:nowrap;
  }

  /* Status badges: shape + icon + text, not color alone */
  .status{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:3px 8px 3px 6px;
    border-radius:5px;
    font-size:12px;
    font-weight:600;
    border:1px solid transparent;
    line-height:1.4;
  }
  .status .icon{
    width:14px;
    height:14px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
  }
  .status .icon svg{
    width:100%;
    height:100%;
    display:block;
  }

  .status--success{
    color:#0a6b3d;
    background:#e9f7f0;
    border-color:#c3e9d6;
  }
  .status--failed{
    color:#9c1c1c;
    background:#fdecec;
    border-color:#f4c6c6;
  }
  .status--warning{
    color:#8a5a00;
    background:#fff4e0;
    border-color:#f2ddac;
  }
  .status--progress{
    color:#1d4fbf;
    background:#eaf0fe;
    border-color:#c9d9fb;
  }
  .status--rolledback{
    color:#4a4f57;
    background:#eef0f2;
    border-color:#dadee3;
  }

  caption{
    caption-side: bottom;
    text-align:left;
    font-size:11px;
    color:var(--text-tertiary);
    padding:10px 18px;
  }
</style>
</head>
<body>

<div class="panel">
  <div class="panel-header">
    <div>
      <span class="panel-title">Recent Deployments</span>
      <span class="panel-sub">8 records</span>
    </div>
    <div class="panel-meta">1 selected</div>
  </div>

  <table>
    <thead>
      <tr>
        <th class="col-check"><input type="checkbox" aria-label="Select all rows"></th>
        <th class="sortable" aria-sort="none">
          <span class="th-inner">Status
            <span class="arrow">
              <svg viewBox="0 0 10 10" fill="none"><path d="M2 6l3 3 3-3M5 9V1" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>
            </span>
          </span>
        </th>
        <th class="sortable" aria-sort="none">
          <span class="th-inner">Service
            <span class="arrow">
              <svg viewBox="0 0 10 10" fill="none"><path d="M2 6l3 3 3-3M5 9V1" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>
            </span>
          </span>
        </th>
        <th class="sortable" aria-sort="none">
          <span class="th-inner">Region
            <span class="arrow">
              <svg viewBox="0 0 10 10" fill="none"><path d="M2 6l3 3 3-3M5 9V1" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>
            </span>
          </span>
        </th>
        <th class="sortable" aria-sort="none">
          <span class="th-inner">Deployed by
            <span class="arrow">
              <svg viewBox="0 0 10 10" fill="none"><path d="M2 6l3 3 3-3M5 9V1" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>
            </span>
          </span>
        </th>
        <th class="sortable" aria-sort="none">
          <span class="th-inner">Duration
            <span class="arrow">
              <svg viewBox="0 0 10 10" fill="none"><path d="M2 6l3 3 3-3M5 9V1" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>
            </span>
          </span>
        </th>
        <th class="sortable sorted-active" aria-sort="descending">
          <span class="th-inner">Timestamp
            <span class="arrow">
              <svg viewBox="0 0 10 10" fill="none"><path d="M2 4l3-3 3 3M5 1v8" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
            </span>
          </span>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="col-check"><input type="checkbox"></td>
        <td>
          <span class="status status--success">
            <span class="icon"><svg viewBox="0 0 16 16" fill="none"><path d="M3 8.5l3 3 7-7" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
            Success
          </span>
        </td>
        <td><span class="service-name">payment-service</span><span class="service-path">svc/payment/prod</span></td>
        <td class="region">us-east-1</td>
        <td><div class="deployer"><span class="avatar">AC</span>a.chen</div></td>
        <td class="duration">2m 14s</td>
        <td class="timestamp">2024-03-18 14:32:05</td>
      </tr>

      <tr>
        <td class="col-check"><input type="checkbox"></td>
        <td>
          <span class="status status--progress">
            <span class="icon"><svg viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="1.8" stroke-dasharray="3 3"/></svg></span>
            In Progress
          </span>
        </td>
        <td><span class="service-name">auth-gateway</span><span class="service-path">svc/auth/prod</span></td>
        <td class="region">eu-west-1</td>
        <td><div class="deployer"><span class="avatar">MR</span>m.rodriguez</div></td>
        <td class="duration">45s</td>
        <td class="timestamp">2024-03-18 14:28:41</td>
      </tr>

      <tr class="row-hover-demo">
        <td class="col-check"><input type="checkbox"></td>
        <td>
          <span class="status status--failed">
            <span class="icon"><svg viewBox="0 0 16 16" fill="none"><path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg></span>
            Failed
          </span>
        </td>
        <td><span class="service-name">inventory-api</span><span class="service-path">svc/inventory/prod</span></td>
        <td class="region">ap-southeast-2</td>
        <td><div class="deployer"><span class="avatar">SP</span>s.patel</div></td>
        <td class="duration">1m 03s</td>
        <td class="timestamp">2024-03-18 13:57:12</td>
      </tr>

      <tr>
        <td class="col-check"><input type="checkbox"></td>
        <td>
          <span class="status status--success">
            <span class="icon"><svg viewBox="0 0 16 16" fill="none"><path d="M3 8.5l3 3 7-7" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
            Success
          </span>
        </td>
        <td><span class="service-name">notification-worker</span><span class="service-path">svc/notify/prod</span></td>
        <td class="region">us-west-2</td>
        <td><div class="deployer"><span class="avatar">AC</span>a.chen</div></td>
        <td class="duration">3m 41s</td>
        <td class="timestamp">2024-03-18 13:40:09</td>
      </tr>

      <tr class="row-selected">
        <td class="col-check"><input type="checkbox" checked></td>
        <td>
          <span class="status status--warning">
            <span class="icon"><svg viewBox="0 0 16 16" fill="none"><path d="M8 2l7 12H1L8 2z" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/><path d="M8 6.5v3.2" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/><circle cx="8" cy="12" r="0.8" fill="currentColor"/></svg></span>
            Warning
          </span>
        </td>
        <td><span class="service-name">search-indexer</span><span class="service-path">svc/search/prod</span></td>
        <td class="region">us-east-1</td>
        <td><div class="deployer"><span class="avatar">JK</span>j.kim</div></td>
        <td class="duration">5m 02s</td>
        <td class="timestamp">2024-03-18 12:58:33</td>
      </tr>

      <tr>
        <td class="col-check"><input type="checkbox"></td>
        <td>
          <span class="status status--success">
            <span class="icon"><svg viewBox="0 0 16 16" fill="none"><path d="M3 8.5l3 3 7-7" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
            Success
          </span>
        </td>
        <td><span class="service-name">billing-service</span><span class="service-path">svc/billing/prod</span></td>
        <td class="region">eu-central-1</td>
        <td><div class="deployer"><span class="avatar">MR</span>m.rodriguez</div></td>
        <td class="duration">2m 30s</td>
        <td class="timestamp">2024-03-18 12:15:47</td>
      </tr>

      <tr>
        <td class="col-check"><input type="checkbox"></td>
        <td>
          <span class="status status--rolledback">
            <span class="icon"><svg viewBox="0 0 16 16" fill="none"><path d="M4 8a4 4 0 117 2.6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/><path d="M4 5.5V8h2.5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
            Rolled Back
          </span>
        </td>
        <td><span class="service-name">user-profile-api</span><span class="service-path">svc/profile/prod</span></td>
        <td class="region">us-east-1</td>
        <td><div class="deployer"><span class="avatar">SP</span>s.patel</div></td>
        <td class="duration">1m 47s</td>
        <td class="timestamp">2024-03-18 11:49:22</td>
      </tr>

      <tr>
        <td class="col-check"><input type="checkbox"></td>
        <td>
          <span class="status status--success">
            <span class="icon"><svg viewBox="0 0 16 16" fill="none"><path d="M3 8.5l3 3 7-7" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
            Success
          </span>
        </td>
        <td><span class="service-name">cache-warmer</span><span class="service-path">svc/cache/prod</span></td>
        <td class="region">ap-northeast-1</td>
        <td><div class="deployer"><span class="avatar">JK</span>j.kim</div></td>
        <td class="duration">58s</td>
        <td class="timestamp">2024-03-18 11:20:03</td>
      </tr>
    </tbody>
  </table>
</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"
}