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>Deployment History</title>
<style>
  :root{
    --bg: #eef0f3;
    --panel: #ffffff;
    --border: #dde1e6;
    --text: #23262b;
    --text-muted: #6b7280;
    --head-bg: #f6f7f9;
    --head-bg-active: #eef1f5;
    --row-hover: #f2f5f9;
    --row-selected: #e8f0fc;
    --row-selected-border: #3b6fd6;
    --accent: #3b6fd6;

    --status-success-bg: #e5f5ea;
    --status-success-fg: #1e6b3a;
    --status-failed-bg: #fbe9e9;
    --status-failed-fg: #a12b2b;
    --status-progress-bg: #eef1fb;
    --status-progress-fg: #3c4bab;
    --status-rollback-bg: #fdf3e3;
    --status-rollback-fg: #91621b;
  }

  * { box-sizing: border-box; }

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

  .wrap{
    width: 1040px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(20,20,30,0.04), 0 4px 14px rgba(20,20,30,0.05);
    overflow: hidden;
  }

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

  .toolbar h1{
    font-size: 14.5px;
    font-weight: 600;
    margin: 0;
    color: var(--text);
    letter-spacing: 0.1px;
  }

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

  .toolbar .count{
    font-size: 12px;
    color: var(--text-muted);
    background: var(--head-bg);
    border: 1px solid var(--border);
    padding: 3px 9px;
    border-radius: 20px;
  }

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

  col.c-check{ width: 40px; }
  col.c-status{ width: 130px; }
  col.c-name{ width: 220px; }
  col.c-region{ width: 130px; }
  col.c-by{ width: 150px; }
  col.c-duration{ width: 110px; }
  col.c-time{ width: 190px; }

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

  thead th:hover{
    color: var(--text);
  }

  thead th.sorted{
    background: var(--head-bg-active);
    color: var(--text);
  }

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

  .sort-icon{
    display:inline-flex;
    width: 10px;
    height: 10px;
    opacity: 0.35;
    flex-shrink:0;
  }

  th.sorted .sort-icon{
    opacity: 1;
  }

  thead th.c-check{
    cursor: default;
  }

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

  tbody tr{
    transition: background-color 80ms ease-out;
  }

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

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

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

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

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

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

  .status-pill{
    display:inline-flex;
    align-items:center;
    gap: 6px;
    padding: 3px 9px 3px 7px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
  }

  .status-pill svg{
    width: 12px;
    height: 12px;
    flex-shrink: 0;
  }

  .status-success{ background: var(--status-success-bg); color: var(--status-success-fg); }
  .status-failed{ background: var(--status-failed-bg); color: var(--status-failed-fg); }
  .status-progress{ background: var(--status-progress-bg); color: var(--status-progress-fg); }
  .status-rollback{ background: var(--status-rollback-bg); color: var(--status-rollback-fg); }

  .svc-name{
    font-weight: 600;
    color: var(--text);
  }
  .svc-tag{
    display:block;
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 1px;
    font-weight: 400;
  }

  .region{
    display:inline-flex;
    align-items:center;
    gap:6px;
    color: var(--text);
  }
  .region .dot{
    width:6px;
    height:6px;
    border-radius:50%;
    background: #9aa4b2;
    flex-shrink:0;
  }

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

  .mono{
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 12.5px;
    color: var(--text);
  }

  .muted{
    color: var(--text-muted);
  }

  tfoot td{
    padding: 10px 18px;
    font-size: 11.5px;
    color: var(--text-muted);
    background: var(--head-bg);
    border-top: 1px solid var(--border);
  }
</style>
</head>
<body>

<div class="wrap">
  <div class="toolbar">
    <div>
      <h1>Deployment History</h1>
      <div class="sub">Production &amp; staging deploy events across all services</div>
    </div>
    <div class="count">8 records</div>
  </div>

  <table>
    <colgroup>
      <col class="c-check">
      <col class="c-status">
      <col class="c-name">
      <col class="c-region">
      <col class="c-by">
      <col class="c-duration">
      <col class="c-time">
    </colgroup>
    <thead>
      <tr>
        <th class="c-check"><input type="checkbox" aria-label="Select all"></th>
        <th>
          <div class="th-inner">
            <span>Status</span>
            <svg class="sort-icon" viewBox="0 0 10 10" fill="none"><path d="M2 4L5 1L8 4" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/><path d="M2 6L5 9L8 6" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>
          </div>
        </th>
        <th>
          <div class="th-inner">
            <span>Service</span>
            <svg class="sort-icon" viewBox="0 0 10 10" fill="none"><path d="M2 4L5 1L8 4" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/><path d="M2 6L5 9L8 6" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>
          </div>
        </th>
        <th>
          <div class="th-inner">
            <span>Region</span>
            <svg class="sort-icon" viewBox="0 0 10 10" fill="none"><path d="M2 4L5 1L8 4" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/><path d="M2 6L5 9L8 6" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>
          </div>
        </th>
        <th>
          <div class="th-inner">
            <span>Deployed by</span>
            <svg class="sort-icon" viewBox="0 0 10 10" fill="none"><path d="M2 4L5 1L8 4" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/><path d="M2 6L5 9L8 6" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>
          </div>
        </th>
        <th>
          <div class="th-inner">
            <span>Duration</span>
            <svg class="sort-icon" viewBox="0 0 10 10" fill="none"><path d="M2 4L5 1L8 4" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/><path d="M2 6L5 9L8 6" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>
          </div>
        </th>
        <th class="sorted">
          <div class="th-inner">
            <span>Timestamp</span>
            <svg class="sort-icon" viewBox="0 0 10 10" fill="none"><path d="M2 6L5 9L8 6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
          </div>
        </th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td><input type="checkbox"></td>
        <td>
          <span class="status-pill status-success">
            <svg viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="7" stroke="currentColor" stroke-width="1.4"/><path d="M5 8.2L7 10.2L11 6" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
            Success
          </span>
        </td>
        <td><span class="svc-name">payments-api</span><span class="svc-tag">v2.14.0</span></td>
        <td><span class="region"><span class="dot"></span>us-east-1</span></td>
        <td><div class="deployer"><div class="avatar">MR</div>M. Reyes</div></td>
        <td class="mono">1m 42s</td>
        <td class="mono">2024-06-12 14:03:11</td>
      </tr>

      <tr class="is-selected">
        <td><input type="checkbox" checked></td>
        <td>
          <span class="status-pill status-failed">
            <svg viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="7" stroke="currentColor" stroke-width="1.4"/><path d="M5.5 5.5L10.5 10.5M10.5 5.5L5.5 10.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
            Failed
          </span>
        </td>
        <td><span class="svc-name">auth-gateway</span><span class="svc-tag">v4.2.1</span></td>
        <td><span class="region"><span class="dot"></span>eu-west-2</span></td>
        <td><div class="deployer"><div class="avatar">KT</div>K. Tan</div></td>
        <td class="mono">0m 58s</td>
        <td class="mono">2024-06-12 13:41:57</td>
      </tr>

      <tr>
        <td><input type="checkbox"></td>
        <td>
          <span class="status-pill status-progress">
            <svg viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="7" stroke="currentColor" stroke-width="1.4" stroke-dasharray="3 3"/><circle cx="8" cy="8" r="1.6" fill="currentColor"/></svg>
            In progress
          </span>
        </td>
        <td><span class="svc-name">notifications-worker</span><span class="svc-tag">v1.9.3</span></td>
        <td><span class="region"><span class="dot"></span>ap-south-1</span></td>
        <td><div class="deployer"><div class="avatar">JL</div>J. Lindqvist</div></td>
        <td class="mono">—</td>
        <td class="mono">2024-06-12 13:37:04</td>
      </tr>

      <tr class="is-hovered">
        <td><input type="checkbox"></td>
        <td>
          <span class="status-pill status-success">
            <svg viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="7" stroke="currentColor" stroke-width="1.4"/><path d="M5 8.2L7 10.2L11 6" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
            Success
          </span>
        </td>
        <td><span class="svc-name">billing-service</span><span class="svc-tag">v3.0.6</span></td>
        <td><span class="region"><span class="dot"></span>us-east-1</span></td>
        <td><div class="deployer"><div class="avatar">AC</div>A. Chowdhury</div></td>
        <td class="mono">2m 07s</td>
        <td class="mono">2024-06-12 12:58:23</td>
      </tr>

      <tr>
        <td><input type="checkbox"></td>
        <td>
          <span class="status-pill status-rollback">
            <svg viewBox="0 0 16 16" fill="none"><path d="M4 8a4.5 4.5 0 1 1 1.3 3.2" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/><path d="M4 5.2V8H6.8" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
            Rolled back
          </span>
        </td>
        <td><span class="svc-name">search-indexer</span><span class="svc-tag">v0.44.2</span></td>
        <td><span class="region"><span class="dot"></span>eu-central-1</span></td>
        <td><div class="deployer"><div class="avatar">MR</div>M. Reyes</div></td>
        <td class="mono">3m 15s</td>
        <td class="mono">2024-06-12 11:22:49</td>
      </tr>

      <tr>
        <td><input type="checkbox"></td>
        <td>
          <span class="status-pill status-success">
            <svg viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="7" stroke="currentColor" stroke-width="1.4"/><path d="M5 8.2L7 10.2L11 6" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
            Success
          </span>
        </td>
        <td><span class="svc-name">image-resizer</span><span class="svc-tag">v1.3.0</span></td>
        <td><span class="region"><span class="dot"></span>ap-southeast-2</span></td>
        <td><div class="deployer"><div class="avatar">DP</div>D. Petrov</div></td>
        <td class="mono">0m 51s</td>
        <td class="mono">2024-06-12 10:47:02</td>
      </tr>

      <tr>
        <td><input type="checkbox"></td>
        <td>
          <span class="status-pill status-failed">
            <svg viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="7" stroke="currentColor" stroke-width="1.4"/><path d="M5.5 5.5L10.5 10.5M10.5 5.5L5.5 10.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
            Failed
          </span>
        </td>
        <td><span class="svc-name">recommendation-engine</span><span class="svc-tag">v2.7.4</span></td>
        <td><span class="region"><span class="dot"></span>us-west-2</span></td>
        <td><div class="deployer"><div class="avatar">KT</div>K. Tan</div></td>
        <td class="mono">1m 09s</td>
        <td class="mono">2024-06-12 09:12:36</td>
      </tr>

      <tr>
        <td><input type="checkbox"></td>
        <td>
          <span class="status-pill status-success">
            <svg viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="7" stroke="currentColor" stroke-width="1.4"/><path d="M5 8.2L7 10.2L11 6" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
            Success
          </span>
        </td>
        <td><span class="svc-name">cdn-edge-config</span><span class="svc-tag">v5.1.2</span></td>
        <td><span class="region"><span class="dot"></span>eu-west-2</span></td>
        <td><div class="deployer"><div class="avatar">JL</div>J. Lindqvist</div></td>
        <td class="mono">0m 33s</td>
        <td class="mono">2024-06-12 08:04:18</td>
      </tr>
    </tbody>

    <tfoot>
      <tr>
        <td colspan="7">Sorted by Timestamp · Descending &nbsp;·&nbsp; 1 row selected</td>
      </tr>
    </tfoot>
  </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"
}