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.0">
<title>Deployment Records</title>
<style>
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e8e6e1;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    font-size: 12.5px;
    line-height: 1.4;
    color: #1a1a1a;
    -webkit-font-smoothing: antialiased;
  }

  .table-wrap {
    background: #f7f6f3;
    border: 1px solid #c8c5bc;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    overflow: hidden;
    max-width: 920px;
  }

  table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
  }

  thead {
    background: #efeee9;
    border-bottom: 1px solid #c8c5bc;
  }

  th {
    text-align: left;
    padding: 7px 12px;
    font-weight: 550;
    font-size: 11px;
    letter-spacing: 0.02em;
    color: #5c5a54;
    text-transform: uppercase;
    user-select: none;
    white-space: nowrap;
    border-right: 1px solid #dddacf;
    position: relative;
  }

  th:last-child { border-right: none; }

  th.sortable {
    cursor: pointer;
  }

  th.sortable:hover {
    background: #e5e3dc;
    color: #2a2a2a;
  }

  th.sorted {
    background: #e0ded6;
    color: #1a1a1a;
  }

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

  .sort-icon {
    display: inline-block;
    margin-left: 4px;
    font-size: 9px;
    opacity: 0.35;
    vertical-align: middle;
  }

  th.sorted-asc .sort-icon::after { content: "▲"; }
  th.sorted-desc .sort-icon::after { content: "▼"; }
  th.sortable:not(.sorted) .sort-icon::after { content: "▲"; }

  col.status { width: 108px; }
  col.service { width: 168px; }
  col.region { width: 100px; }
  col.deployed-by { width: 128px; }
  col.duration { width: 88px; }
  col.timestamp { width: 148px; }

  td {
    padding: 6px 12px;
    border-bottom: 1px solid #e4e2db;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
  }

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

  tbody tr {
    background: #f7f6f3;
    transition: background 80ms linear;
  }

  tbody tr:hover,
  tbody tr.is-hovered {
    background: #eceae3;
  }

  tbody tr.is-selected {
    background: #dce6f2;
  }

  tbody tr.is-selected:hover,
  tbody tr.is-selected.is-hovered {
    background: #d0d//eef0;
  }

  tbody tr.is-selected td {
    border-bottom-color: #c5d0e0;
  }

  /* Status badges — shape + label, not colour alone */
  .status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.01em;
    padding: 2px 7px 2px 5px;
    border-radius: 3px;
    border: 1px solid transparent;
    line-height: 1.3;
  }

  .status .glyph {
    font-size: 10px;
    width: 12px;
    text-align: center;
    flex-shrink: 0;
    font-weight: 700;
  }

  .status--success {
    background: #e4ede4;
    border-color: #b0c4b0;
    color: #1e3d1e;
  }

  .status--running {
    background: #e4eaf2;
    border-color: #a8b8cc;
    color: #1a2e4a;
  }

  .status--failed {
    background: #f0e4e2;
    border-color: #ccb0aa;
    color: #4a1e18;
  }

  .status--pending {
    background: #f0ebe0;
    border-color: #cfc4a8;
    color: #3d3420;
  }

  .service-name {
    font-weight: 500;
    color: #1a1a1a;
    font-variant-numeric: tabular-nums;
  }

  .region {
    font-family: "SF Mono", "Menlo", "Consolas", ui-monospace, monospace;
    font-size: 11.5px;
    color: #3a3a3a;
  }

  .deployed-by {
    color: #2a2a2a;
  }

  .duration {
    font-variant-numeric: tabular-nums;
    font-family: "SF Mono", "Menlo", "Consolas", ui-monospace, monospace;
    font-size: 11.5px;
    color: #3a3a3a;
  }

  .timestamp {
    font-variant-numeric: tabular-nums;
    font-family: "SF Mono", "Menlo", "Consolas", ui-monospace, monospace;
    font-size: 11.5px;
    color: #4a4a4a;
  }

  /* Selection indicator bar */
  tbody tr.is-selected td:first-child {
    box-shadow: inset 3px 0 0 #3b6fb6;
  }
</style>
</head>
<body>
  <div class="table-wrap">
    <table>
      <colgroup>
        <col class="status">
        <col class="service">
        <col class="region">
        <col class="deployed-by">
        <col class="duration">
        <col class="timestamp">
      </colgroup>
      <thead>
        <tr>
          <th class="sortable">Status<span class="sort-icon"></span></th>
          <th class="sortable">Service name<span class="sort-icon"></span></th>
          <th class="sortable sorted sorted-asc">Region<span class="sort-icon"></span></th>
          <th class="sortable">Deployed by<span class="sort-icon"></span></th>
          <th class="sortable">Duration<span class="sort-icon"></span></th>
          <th class="sortable">Timestamp<span class="sort-icon"></span></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><span class="status status--success"><span class="glyph">✓</span>Success</span></td>
          <td><span class="service-name">auth-gateway</span></td>
          <td><span class="region">us-east-1</span></td>
          <td><span class="deployed-by">m.chen</span></td>
          <td><span class="duration">1m 12s</span></td>
          <td><span class="timestamp">2025-03-14 09:02:11</span></td>
        </tr>
        <tr class="is-hovered">
          <td><span class="status status--running"><span class="glyph">◉</span>Running</span></td>
          <td><span class="service-name">billing-api</span></td>
          <td><span class="region">eu-west-1</span></td>
          <td><span class="deployed-by">j.okonkwo</span></td>
          <td><span class="duration">4m 03s</span></td>
          <td><span class="timestamp">2025-03-14 09:18:44</span></td>
        </tr>
        <tr>
          <td><span class="status status--success"><span class="glyph">✓</span>Success</span></td>
          <td><span class="service-name">catalog-service</span></td>
          <td><span class="region">us-west-2</span></td>
          <td><span class="deployed-by">a.petrov</span></td>
          <td><span class="duration">2m 41s</span></td>
          <td><span class="timestamp">2025-03-14 08:55:02</span></td>
        </tr>
        <tr class="is-selected">
          <td><span class="status status--failed"><span class="glyph">✕</span>Failed</span></td>
          <td><span class="service-name">image-resizer</span></td>
          <td><span class="region">ap-south-1</span></td>
          <td><span class="deployed-by">s.nakamura</span></td>
          <td><span class="duration">0m 48s</span></td>
          <td><span class="timestamp">2025-03-14 08:41:19</span></td>
        </tr>
        <tr>
          <td><span class="status status--pending"><span class="glyph">◌</span>Pending</span></td>
          <td><span class="service-name">notify-worker</span></td>
          <td><span class="region">eu-central-1</span></td>
          <td><span class="deployed-by">r.alvarez</span></td>
          <td><span class="duration">—</span></td>
          <td><span class="timestamp">2025-03-14 09:22:00</span></td>
        </tr>
        <tr>
          <td><span class="status status--success"><span class="glyph">✓</span>Success</span></td>
          <td><span class="service-name">search-indexer</span></td>
          <td><span class="region">us-east-1</span></td>
          <td><span class="deployed-by">m.chen</span></td>
          <td><span class="duration">6m 17s</span></td>
          <td><span class="timestamp">2025-03-14 07:58:33</span></td>
        </tr>
        <tr>
          <td><span class="status status--running"><span class="glyph">◉</span>Running</span></td>
          <td><span class="service-name">session-store</span></td>
          <td><span class="region">ap-northeast-1</span></td>
          <td><span class="deployed-by">l.bergstrom</span></td>
          <td><span class="duration">1m 55s</span></td>
          <td><span class="timestamp">2025-03-14 09:20:08</span></td>
        </tr>
        <tr>
          <td><span class="status status--success"><span class="glyph">✓</span>Success</span></td>
          <td><span class="service-name">webhook-relay</span></td>
          <td><span class="region">eu-west-1</span></td>
          <td><span class="deployed-by">j.okonkwo</span></td>
          <td><span class="duration">3m 09s</span></td>
          <td><span class="timestamp">2025-03-14 08:12:47</span></td>
        </tr>
      </tbody>
    </table>
  </div>
</body>
</html>

request envelope — prompt redacted

{
  "model": "xai/grok-4.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": "79967a98-155d-437c-bc43-1a033488fd6d"
}