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>Server Deployments Table</title>
<style>
  :root {
    color-scheme: light;
    --page: #eef1f4;
    --surface: #ffffff;
    --line: #e2e7ec;
    --line-strong: #d5dce3;
    --text: #1f2933;
    --muted: #6b7785;
    --subtle: #8a96a3;
    --selected: #f0f6ff;
    --hovered: #f8fafc;
    --blue: #2e6fd0;
    --green: #23845b;
    --amber: #a56608;
    --red: #bd3d3d;
    --gray: #687581;
  }

  * {
    box-sizing: border-box;
  }

  body {
    margin: 0;
    min-width: 960px;
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 88px 48px;
    background: var(--page);
    color: var(--text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 13px;
    line-height: 1.4;
  }

  .table-card {
    width: 1080px;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: 9px;
    box-shadow: 0 8px 22px rgba(30, 42, 55, 0.06);
    overflow: hidden;
  }

  .table-heading {
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 22px;
    border-bottom: 1px solid var(--line);
  }

  .heading-title {
    margin: 0;
    font-size: 15px;
    font-weight: 650;
    letter-spacing: -0.01em;
  }

  .heading-meta {
    margin-top: 3px;
    color: var(--muted);
    font-size: 12px;
  }

  .heading-count {
    color: var(--muted);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
  }

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

  col.status { width: 17%; }
  col.service { width: 22%; }
  col.region { width: 15%; }
  col.deployed { width: 17%; }
  col.duration { width: 13%; }
  col.timestamp { width: 16%; }

  thead {
    background: #fafbfc;
  }

  th {
    height: 43px;
    padding: 0 20px;
    color: var(--muted);
    border-bottom: 1px solid var(--line);
    text-align: left;
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 0.045em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  th:last-child,
  td:last-child {
    padding-right: 24px;
  }

  .sort-button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
  }

  .sort-button[aria-sort="ascending"] {
    color: var(--text);
  }

  .sort-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border: 1px solid #cbd4dd;
    border-radius: 3px;
    color: var(--blue);
    font-size: 11px;
    line-height: 1;
    background: #fff;
  }

  tbody tr {
    height: 60px;
    border-bottom: 1px solid var(--line);
    transition: background 120ms ease;
  }

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

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

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

  tbody tr.is-selected td:first-child {
    box-shadow: inset 3px 0 0 var(--blue);
  }

  tbody tr.is-hovered td:first-child {
    box-shadow: inset 3px 0 0 #aeb9c5;
  }

  td {
    padding: 0 20px;
    color: var(--text);
    vertical-align: middle;
    white-space: nowrap;
  }

  .service-name {
    font-weight: 600;
    letter-spacing: -0.01em;
  }

  .service-id {
    margin-top: 2px;
    color: var(--subtle);
    font-size: 11px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  }

  .status-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 92px;
    color: var(--text);
    font-size: 12px;
    font-weight: 560;
  }

  .status-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    border: 2px solid currentColor;
    background: transparent;
  }

  .status-badge.success { color: var(--green); }
  .status-badge.success .status-dot { background: currentColor; }
  .status-badge.progress { color: var(--blue); }
  .status-badge.progress .status-dot {
    border-radius: 2px;
    background: currentColor;
  }
  .status-badge.warning { color: var(--amber); }
  .status-badge.warning .status-dot { background: currentColor; }
  .status-badge.failed { color: var(--red); }
  .status-badge.failed .status-dot {
    border-radius: 2px;
    background: linear-gradient(135deg, transparent 38%, currentColor 39%, currentColor 61%, transparent 62%);
  }
  .status-badge.neutral { color: var(--gray); }
  .status-badge.neutral .status-dot {
    border-style: dashed;
  }

  .region,
  .duration,
  .timestamp {
    color: #4f5d6b;
    font-variant-numeric: tabular-nums;
  }

  .region {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .region-code {
    color: var(--muted);
    font-size: 11px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  }

  .deployer {
    display: flex;
    align-items: center;
    gap: 9px;
  }

  .avatar {
    width: 25px;
    height: 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e7edf3;
    color: #516170;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .02em;
  }

  .avatar.blue { background: #dfeafb; color: #3767a7; }
  .avatar.green { background: #e1f0e9; color: #357456; }
  .avatar.gold { background: #f5ecd9; color: #86651f; }
  .avatar.purple { background: #ece7f5; color: #68568c; }

  .duration {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
  }

  .timestamp {
    font-size: 12px;
  }

  .table-footer {
    height: 42px;
    display: flex;
    align-items: center;
    padding: 0 22px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 11px;
  }

  .legend {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  .legend::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 2px;
    background: var(--blue);
  }
</style>
</head>
<body>
  <section class="table-card" aria-labelledby="deployments-title">
    <header class="table-heading">
      <div>
        <h1 class="heading-title" id="deployments-title">Server deployments</h1>
        <div class="heading-meta">Production deployment activity</div>
      </div>
      <div class="heading-count">8 records</div>
    </header>

    <table aria-label="Server deployment records">
      <colgroup>
        <col class="status">
        <col class="service">
        <col class="region">
        <col class="deployed">
        <col class="duration">
        <col class="timestamp">
      </colgroup>
      <thead>
        <tr>
          <th scope="col">Status</th>
          <th scope="col">Service name</th>
          <th scope="col">Region</th>
          <th scope="col">Deployed by</th>
          <th scope="col">Duration</th>
          <th scope="col" aria-sort="ascending">
            <button class="sort-button" type="button" aria-label="Timestamp, sorted ascending" aria-sort="ascending">
              Timestamp <span class="sort-arrow" aria-hidden="true">↑</span>
            </button>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><span class="status-badge success"><span class="status-dot"></span>Deployed</span></td>
          <td><div class="service-name">payments-api</div><div class="service-id">svc_8f2a1c</div></td>
          <td><div class="region">US East <span class="region-code">us-east-1</span></div></td>
          <td><div class="deployer"><span class="avatar blue">MC</span> Maya Chen</div></td>
          <td class="duration">4m 18s</td>
          <td class="timestamp">Today, 10:42:18</td>
        </tr>
        <tr class="is-selected" aria-selected="true">
          <td><span class="status-badge progress"><span class="status-dot"></span>In progress</span></td>
          <td><div class="service-name">catalog-worker</div><div class="service-id">svc_31bc77</div></td>
          <td><div class="region">EU West <span class="region-code">eu-west-1</span></div></td>
          <td><div class="deployer"><span class="avatar green">JR</span> Jonah Reed</div></td>
          <td class="duration">2m 51s</td>
          <td class="timestamp">Today, 10:39:04</td>
        </tr>
        <tr>
          <td><span class="status-badge success"><span class="status-dot"></span>Deployed</span></td>
          <td><div class="service-name">identity-gateway</div><div class="service-id">svc_5d09e4</div></td>
          <td><div class="region">Asia Pacific <span class="region-code">ap-southeast-1</span></div></td>
          <td><div class="deployer"><span class="avatar purple">AN</span> Aiko Nakamura</div></td>
          <td class="duration">5m 07s</td>
          <td class="timestamp">Today, 10:31:46</td>
        </tr>
        <tr class="is-hovered">
          <td><span class="status-badge failed"><span class="status-dot"></span>Failed</span></td>
          <td><div class="service-name">notifications</div><div class="service-id">svc_0a7c2e</div></td>
          <td><div class="region">US West <span class="region-code">us-west-2</span></div></td>
          <td><div class="deployer"><span class="avatar gold">DP</span> Dev Patel</div></td>
          <td class="duration">1m 26s</td>
          <td class="timestamp">Today, 10:24:11</td>
        </tr>
        <tr>
          <td><span class="status-badge success"><span class="status-dot"></span>Deployed</span></td>
          <td><div class="service-name">search-indexer</div><div class="service-id">svc_6e12bd</div></td>
          <td><div class="region">EU Central <span class="region-code">eu-central-1</span></div></td>
          <td><div class="deployer"><span class="avatar blue">MC</span> Maya Chen</div></td>
          <td class="duration">8m 42s</td>
          <td class="timestamp">Today, 10:16:53</td>
        </tr>
        <tr>
          <td><span class="status-badge neutral"><span class="status-dot"></span>Queued</span></td>
          <td><div class="service-name">reporting-service</div><div class="service-id">svc_93aa40</div></td>
          <td><div class="region">US East <span class="region-code">us-east-1</span></div></td>
          <td><div class="deployer"><span class="avatar green">JR</span> Jonah Reed</div></td>
          <td class="duration">—</td>
          <td class="timestamp">Today, 10:08:29</td>
        </tr>
        <tr>
          <td><span class="status-badge warning"><span class="status-dot"></span>Rolled back</span></td>
          <td><div class="service-name">media-transcoder</div><div class="service-id">svc_47d8f1</div></td>
          <td><div class="region">Asia Pacific <span class="region-code">ap-northeast-1</span></div></td>
          <td><div class="deployer"><span class="avatar purple">AN</span> Aiko Nakamura</div></td>
          <td class="duration">3m 33s</td>
          <td class="timestamp">Today, 09:57:06</td>
        </tr>
        <tr>
          <td><span class="status-badge success"><span class="status-dot"></span>Deployed</span></td>
          <td><div class="service-name">billing-webhooks</div><div class="service-id">svc_b2c118</div></td>
          <td><div class="region">US West <span class="region-code">us-west-2</span></div></td>
          <td><div class="deployer"><span class="avatar gold">DP</span> Dev Patel</div></td>
          <td class="duration">2m 09s</td>
          <td class="timestamp">Today, 09:48:37</td>
        </tr>
      </tbody>
    </table>

    <footer class="table-footer">
      <span class="legend">Selected deployment</span>
    </footer>
  </section>
</body>
</html>

request envelope — prompt redacted

{
  "model": "openai/gpt-5.6-luna",
  "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": "cb3bc47b-271f-4c9b-a222-cd70fff1d39b"
}