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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Deployments — data table</title>
<style>
  :root{
    --bg:#e9e9e6;
    --card:#ffffff;
    --line:#e2e2dd;
    --line-strong:#d3d3cc;
    --ink:#26262b;
    --ink-2:#55555c;
    --muted:#84847d;
    --hover:#f5f5f2;
    --sel:#eef3fa;
    --sel-line:#c7d8ee;
    --accent:#3a6ea8;
  }

  html,body{margin:0;padding:0;}
  body{
    background:var(--bg);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
    color:var(--ink);
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:100vh;
    padding:72px 56px;
    box-sizing:border-box;
  }

  .card{
    width:1004px;
    background:var(--card);
    border:1px solid var(--line-strong);
    border-radius:8px;
    box-shadow:0 1px 1px rgba(30,30,25,.04), 0 8px 24px -12px rgba(30,30,25,.18);
    overflow:hidden;
  }

  /* ---------- header ---------- */
  .card-hd{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:24px;
    padding:16px 18px 14px;
    border-bottom:1px solid var(--line);
  }
  .card-hd h1{
    margin:0;
    font-size:14px;
    font-weight:600;
    letter-spacing:.005em;
  }
  .card-hd .sub{
    margin:3px 0 0;
    font-size:11.5px;
    color:var(--muted);
    letter-spacing:.01em;
  }
  .hd-right{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:11.5px;
    color:var(--muted);
  }
  .selcount{
    color:var(--accent);
    background:var(--sel);
    border:1px solid var(--sel-line);
    border-radius:4px;
    padding:2px 7px;
    font-variant-numeric:tabular-nums;
  }
  .vr{
    width:1px;height:14px;background:var(--line-strong);display:inline-block;
  }
  .btn{
    font:inherit;
    font-size:11.5px;
    color:var(--ink-2);
    background:#fbfbf9;
    border:1px solid var(--line-strong);
    border-radius:4px;
    padding:4px 9px;
    cursor:pointer;
  }
  .btn:hover{background:#f2f2ef;}

  /* ---------- table ---------- */
  table{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    font-size:12.5px;
  }
  colgroup col.c-check{width:38px}
  colgroup col.c-status{width:146px}
  colgroup col.c-svc{width:246px}
  colgroup col.c-region{width:132px}
  colgroup col.c-by{width:158px}
  colgroup col.c-dur{width:92px}
  colgroup col.c-ts{width:auto}

  thead th{
    text-align:left;
    padding:0;
    background:#fafaf8;
    border-bottom:1px solid var(--line-strong);
    font-weight:600;
    vertical-align:middle;
    height:31px;
  }
  thead th .lbl{
    display:block;
    padding:0 12px;
    font-size:10.5px;
    letter-spacing:.07em;
    text-transform:uppercase;
    color:var(--muted);
    white-space:nowrap;
  }
  thead th.num .lbl{text-align:right}

  /* sortable headers */
  th button.sort{
    font:inherit;
    font-size:10.5px;
    letter-spacing:.07em;
    text-transform:uppercase;
    font-weight:600;
    color:var(--muted);
    background:none;
    border:0;
    margin:0;
    padding:0 12px;
    height:31px;
    width:100%;
    display:inline-flex;
    align-items:center;
    gap:5px;
    cursor:pointer;
    white-space:nowrap;
  }
  th.num button.sort{justify-content:flex-end}
  th button.sort .caret{
    font-size:8px;
    line-height:1;
    opacity:0;
    transform:translateY(-1px);
  }
  th button.sort:hover{color:var(--ink-2);}
  th button.sort:hover .caret{opacity:.5;}
  /* active sort state */
  th[aria-sort] button.sort{color:var(--ink);}
  th[aria-sort] button.sort .caret{opacity:1;color:var(--accent);}
  th[aria-sort]{
    background:#f4f5f7;
    box-shadow:inset 0 -2px 0 var(--accent);
  }

  tbody td{
    padding:0 12px;
    height:41px;
    border-bottom:1px solid var(--line);
    color:var(--ink-2);
    vertical-align:middle;
    white-space:nowrap;
  }
  tbody tr:last-child td{border-bottom:0;}
  tbody td.num{text-align:right;}

  .mono{
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
    font-size:11.5px;
    font-variant-numeric:tabular-nums;
    letter-spacing:-.01em;
  }
  .svc{color:var(--ink);font-weight:500;}
  .sha{color:#a0a099;margin-left:7px;}
  .dur{color:var(--ink);}
  .ts{color:var(--ink-2);}
  .ts .zone{color:#a3a39c;}

  /* row states */
  tbody tr td:first-child{
    box-shadow:inset 2px 0 0 transparent;
  }
  tbody tr:hover td,
  tbody tr.is-hover td{background:var(--hover);}
  tbody tr.is-selected td{background:var(--sel);}
  tbody tr.is-selected:hover td{background:#e7eef8;}
  tbody tr.is-selected td:first-child{box-shadow:inset 2px 0 0 var(--accent);}
  tbody tr.is-selected .svc{color:#1f3a5c;}

  /* checkbox */
  .cb{
    appearance:none;-webkit-appearance:none;
    width:13px;height:13px;
    border:1px solid #b6b6ae;
    border-radius:3px;
    background:#fff;
    display:block;
    margin:0;
    cursor:pointer;
    position:relative;
  }
  .cb:hover{border-color:#8d8d85;}
  .cb:checked{background:var(--accent);border-color:#315f92;}
  .cb:checked::after{
    content:"";
    position:absolute;left:3.5px;top:1px;
    width:3px;height:6.5px;
    border:solid #fff;
    border-width:0 1.6px 1.6px 0;
    transform:rotate(42deg);
  }
  .cb:indeterminate{background:#fff;border-color:#9a9a92;}
  .cb:indeterminate::after{
    content:"";position:absolute;left:2px;top:5px;width:7px;height:1.6px;background:var(--accent);
  }

  /* ---------- status ---------- */
  .st{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:11.5px;
    font-weight:500;
    letter-spacing:.005em;
    color:var(--ink);
    white-space:nowrap;
  }
  .st .gl{
    flex:0 0 auto;
    width:15px;height:15px;
    border-radius:3px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:9.5px;
    line-height:1;
    font-weight:700;
    border:1px solid;
  }
  /* each status = distinct glyph + distinct border/fill, readable in greyscale */
  .st-ok   .gl{background:#e7efe8;border-color:#b6cdbb;color:#2c6340;}
  .st-fail .gl{background:#f7e8e5;border-color:#dfb8b1;color:#8f3428;}
  .st-run  .gl{background:#fdf3df;border-color:#e2cd9d;color:#7d5a12;}
  .st-queue .gl{background:#f1f1ee;border-color:#cfcfc7;color:#6d6d65;}
  .st-back .gl{background:#eceaf6;border-color:#c3bee0;color:#4b428c;}
  .st-cancel .gl{background:#f4f4f2;border-color:#d6d6ce;color:#8b8b83;}
  .st-cancel{color:var(--ink-2);}

  /* who */
  .who{display:inline-flex;align-items:center;gap:7px;}
  .av{
    width:19px;height:19px;border-radius:50%;
    background:#eeeeea;border:1px solid #dedeD7;
    color:#6e6e66;
    font-size:9px;font-weight:700;letter-spacing:.02em;
    display:inline-flex;align-items:center;justify-content:center;
  }
  .av.bot{border-radius:4px;background:#e9edf3;border-color:#d5dde8;color:#4f6party;}
  .av.bot{color:#4f6a8c;}
  .who span.nm{color:var(--ink-2);}

  /* ---------- footer ---------- */
  .card-ft{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:9px 14px 9px 18px;
    border-top:1px solid var(--line);
    background:#fafaf8;
    font-size:11px;
    color:var(--muted);
  }
  .card-ft .keys{display:flex;gap:14px;align-items:center;}
  kbd{
    font-family:inherit;font-size:10px;
    border:1px solid var(--line-strong);
    border-bottom-width:2px;
    border-radius:3px;
    background:#fff;
    padding:1px 4px;
    color:var(--ink-2);
  }
  .pager{display:flex;gap:6px;align-items:center;}
  .pager .btn{padding:3px 8px;line-height:1.4;}
  .pager .btn[disabled]{color:#b5b5ad;cursor:default;background:#f7f7f5;}
</style>
</head>
<body>

<section class="card" aria-label="Server deployment records">
  <header class="card-hd">
    <div>
      <h1>Deployments</h1>
      <p class="sub">production &middot; last 24 hours &middot; auto-refresh 30s</p>
    </div>
    <div class="hd-right">
      <span class="selcount">1 selected</span>
      <button class="btn" type="button">Re-run</button>
      <span class="vr" aria-hidden="true"></span>
      <span>8 of 126 records</span>
    </div>
  </header>

  <table>
    <colgroup>
      <col class="c-check"><col class="c-status"><col class="c-svc"><col class="c-region">
      <col class="c-by"><col class="c-dur"><col class="c-ts">
    </colgroup>
    <thead>
      <tr>
        <th scope="col">
          <span class="lbl" style="padding-right:0">
            <input class="cb" type="checkbox" aria-label="Select all rows" indeterminate>
          </span>
        </th>
        <th scope="col"><button class="sort" type="button">Status <span class="caret" aria-hidden="true">▾</span></button></th>
        <th scope="col"><button class="sort" type="button">Service <span class="caret" aria-hidden="true">▾</span></button></th>
        <th scope="col"><button class="sort" type="button">Region <span class="caret" aria-hidden="true">▾</span></button></th>
        <th scope="col"><span class="lbl">Deployed by</span></th>
        <th scope="col" class="num"><button class="sort" type="button">Duration <span class="caret" aria-hidden="true">▾</span></button></th>
        <th scope="col" aria-sort="descending"><button class="sort" type="button">Timestamp <span class="caret" aria-hidden="true">▾</span></button></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input class="cb" type="checkbox" aria-label="Select deployment checkout-api"></td>
        <td><span class="st st-run"><span class="gl" aria-hidden="true">◐</span>Deploying</span></td>
        <td><span class="mono svc">checkout-api</span><span class="mono sha">4f1c9ab</span></td>
        <td><span class="mono">us-east-1</span></td>
        <td><span class="who"><span class="av">DK</span><span class="nm">D. Kowalski</span></span></td>
        <td class="num mono dur">0m 51s</td>
        <td><span class="mono ts">Jun 11 · 14:41:07 <span class="zone">UTC</span></span></td>
      </tr>

      <tr>
        <td><input class="cb" type="checkbox" aria-label="Select deployment search-indexer"></td>
        <td><span class="st st-queue"><span class="gl" aria-hidden="true">⋯</span>Queued</span></td>
        <td><span class="mono svc">search-indexer</span><span class="mono sha">c07d3e2</span></td>
        <td><span class="mono">eu-west-1</span></td>
        <td><span class="who"><span class="av bot">CI</span><span class="nm">pipeline-bot</span></span></td>
        <td class="num mono dur">—</td>
        <td><span class="mono ts">Jun 11 · 14:39:52 <span class="zone">UTC</span></span></td>
      </tr>

      <tr class="is-selected" aria-selected="true">
        <td><input class="cb" type="checkbox" checked aria-label="Select deployment payments-worker"></td>
        <td><span class="st st-fail"><span class="gl" aria-hidden="true">✕</span>Failed</span></td>
        <td><span class="mono svc">payments-worker</span><span class="mono sha">9ba2f60</span></td>
        <td><span class="mono">us-east-1</span></td>
        <td><span class="who"><span class="av">MR</span><span class="nm">M. Ruiz</span></span></td>
        <td class="num mono dur">3m 12s</td>
        <td><span class="mono ts">Jun 11 · 13:58:24 <span class="zone">UTC</span></span></td>
      </tr>

      <tr>
        <td><input class="cb" type="checkbox" aria-label="Select deployment identity-gateway"></td>
        <td><span class="st st-ok"><span class="gl" aria-hidden="true">✓</span>Succeeded</span></td>
        <td><span class="mono svc">identity-gateway</span><span class="mono sha">21e77c4</span></td>
        <td><span class="mono">ap-south-1</span></td>
        <td><span class="who"><span class="av">AT</span><span class="nm">A. Thorne</span></span></td>
        <td class="num mono dur">1m 44s</td>
        <td><span class="mono ts">Jun 11 · 13:20:10 <span class="zone">UTC</span></span></td>
      </tr>

      <tr class="is-hover">
        <td><input class="cb" type="checkbox" aria-label="Select deployment media-transcoder"></td>
        <td><span class="st st-back"><span class="gl" aria-hidden="true">↩</span>Rolled back</span></td>
        <td><span class="mono svc">media-transcoder</span><span class="mono sha">88fd105</span></td>
        <td><span class="mono">eu-central-1</span></td>
        <td><span class="who"><span class="av">SO</span><span class="nm">S. Okafor</span></span></td>
        <td class="num mono dur">6m 03s</td>
        <td><span class="mono ts">Jun 11 · 12:47:36 <span class="zone">UTC</span></span></td>
      </tr>

      <tr>
        <td><input class="cb" type="checkbox" aria-label="Select deployment notifications-api"></td>
        <td><span class="st st-ok"><span class="gl" aria-hidden="true">✓</span>Succeeded</span></td>
        <td><span class="mono svc">notifications-api</span><span class="mono sha">7c4b019</span></td>
        <td><span class="mono">us-west-2</span></td>
        <td><span class="who"><span class="av bot">CI</span><span class="nm">pipeline-bot</span></span></td>
        <td class="num mono dur">2m 08s</td>
        <td><span class="mono ts">Jun 11 · 11:59:41 <span class="zone">UTC</span></span></td>
      </tr>

      <tr>
        <td><input class="cb" type="checkbox" aria-label="Select deployment ledger-service"></td>
        <td><span class="st st-cancel"><span class="gl" aria-hidden="true">⊘</span>Canceled</span></td>
        <td><span class="mono svc">ledger-service</span><span class="mono sha">e50a8d7</span></td>
        <td><span class="mono">sa-east-1</span></td>
        <td><span class="who"><span class="av">JL</span><span class="nm">J. Lindqvist</span></span></td>
        <td class="num mono dur">0m 19s</td>
        <td><span class="mono ts">Jun 11 · 10:33:02 <span class="zone">UTC</span></span></td>
      </tr>

      <tr>
        <td><input class="cb" type="checkbox" aria-label="Select deployment edge-router"></td>
        <td><span class="st st-ok"><span class="gl" aria-hidden="true">✓</span>Succeeded</span></td>
        <td><span class="mono svc">edge-router</span><span class="mono sha">1d9ff32</span></td>
        <td><span class="mono">ap-northeast-1</span></td>
        <td><span class="who"><span class="av">PN</span><span class="nm">P. Nakamura</span></span></td>
        <td class="num mono dur">4m 27s</td>
        <td><span class="mono ts">Jun 11 · 09:14:55 <span class="zone">UTC</span></span></td>
      </tr>
    </tbody>
  </table>

  <footer class="card-ft">
    <div class="keys">
      <span>Sorted by <strong style="color:var(--ink-2);font-weight:600">Timestamp</strong>, newest first</span>
      <span class="vr" aria-hidden="true"></span>
      <span><kbd>⇧</kbd> + click to select a range</span>
    </div>
    <div class="pager">
      <span>Rows 1–8</span>
      <button class="btn" type="button" disabled>Previous</button>
      <button class="btn" type="button">Next</button>
    </div>
  </footer>
</section>

<script>
  // header "select all" shown in the partial (indeterminate) state
  document.addEventListener('DOMContentLoaded', function () {
    var head = document.querySelector('thead .cb');
    if (head) head.indeterminate = true;
  });
</script>
</body>
</html>

request envelope — prompt redacted

{
  "model": "anthropic/claude-opus-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": "e1ccbf59-1f3c-41f8-b074-88ee6a731c02"
}