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>Deployment records table</title>
  <style>
    :root {
      --canvas: #eef0f2;
      --surface: #ffffff;
      --line: #dfe3e7;
      --line-strong: #cbd2d9;
      --text: #20262d;
      --muted: #68737e;
      --header: #f7f8f9;
      --hover: #f4f7fa;
      --selected: #edf4fb;
      --selected-line: #5f87aa;
      --blue: #356b96;
      --green: #27724b;
      --red: #9d3c3c;
      --amber: #8a6315;
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      min-height: 100vh;
      display: grid;
      place-items: center;
      padding: 56px;
      background: var(--canvas);
      color: var(--text);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      font-size: 13px;
      line-height: 1.35;
    }

    .table-card {
      width: 1060px;
      background: var(--surface);
      border: 1px solid var(--line-strong);
      border-radius: 7px;
      overflow: hidden;
      box-shadow: 0 1px 2px rgba(27, 37, 46, .06);
    }

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

    .table-title {
      display: flex;
      align-items: baseline;
      gap: 10px;
    }

    .table-title h1 {
      margin: 0;
      font-size: 14px;
      font-weight: 650;
      letter-spacing: -.01em;
    }

    .record-count {
      color: var(--muted);
      font-size: 12px;
    }

    .updated {
      display: flex;
      align-items: center;
      gap: 7px;
      color: var(--muted);
      font-size: 12px;
    }

    .live-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #4b8a67;
      box-shadow: 0 0 0 3px #e9f3ed;
    }

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

    col.status { width: 149px; }
    col.service { width: 238px; }
    col.region { width: 165px; }
    col.deployer { width: 186px; }
    col.duration { width: 124px; }
    col.timestamp { width: 198px; }

    thead th {
      height: 39px;
      padding: 0 18px;
      background: var(--header);
      border-bottom: 1px solid var(--line-strong);
      color: #5b6670;
      text-align: left;
      font-size: 11px;
      font-weight: 650;
      letter-spacing: .035em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    thead th:not(:first-child),
    tbody td:not(:first-child) {
      border-left: 1px solid #edf0f2;
    }

    .sort-header {
      color: #38434c;
    }

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

    .sort-mark {
      display: inline-flex;
      flex-direction: column;
      gap: 1px;
      width: 8px;
      height: 12px;
      justify-content: center;
    }

    .sort-mark i {
      display: block;
      width: 0;
      height: 0;
      margin: 0 auto;
      border-left: 3.5px solid transparent;
      border-right: 3.5px solid transparent;
    }

    .sort-mark .up {
      border-bottom: 4px solid #9ca5ad;
    }

    .sort-mark .down {
      border-top: 4px solid #3d6e97;
    }

    tbody tr {
      height: 48px;
      background: #fff;
    }

    tbody tr + tr td {
      border-top: 1px solid var(--line);
    }

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

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

    tbody tr.is-selected td {
      background: var(--selected);
      border-top-color: #c7dae9;
      border-bottom: 1px solid #c7dae9;
    }

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

    td {
      padding: 0 18px;
      vertical-align: middle;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .status-cell {
      padding-right: 12px;
    }

    .status {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-weight: 550;
      font-size: 12px;
    }

    .status-icon {
      width: 16px;
      height: 16px;
      display: inline-grid;
      place-items: center;
      flex: 0 0 16px;
      border-radius: 50%;
      font-size: 11px;
      font-weight: 750;
      line-height: 1;
    }

    .succeeded .status-icon {
      color: var(--green);
      background: #e8f4ed;
      border: 1px solid #a8cfb6;
    }

    .running .status-icon {
      color: var(--blue);
      background: #eaf2f8;
      border: 1px solid #abc6dd;
      font-size: 9px;
    }

    .failed .status-icon {
      color: var(--red);
      background: #f9eded;
      border: 1px solid #dfb4b4;
      font-size: 13px;
    }

    .queued .status-icon {
      color: var(--amber);
      background: #fbf4e5;
      border: 1px solid #dec68b;
      font-size: 12px;
    }

    .service-name {
      color: #25313a;
      font-weight: 620;
      letter-spacing: -.005em;
    }

    .service-meta {
      display: inline;
      margin-left: 7px;
      color: #79838c;
      font-size: 12px;
    }

    .region, .deployer, .timestamp {
      color: #48545e;
    }

    .duration {
      color: #34414b;
      font-variant-numeric: tabular-nums;
    }

    .timestamp {
      font-variant-numeric: tabular-nums;
      font-size: 12px;
    }

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

    .state-note {
      margin-left: auto;
      color: #74808a;
    }

    .state-note strong {
      color: #53616c;
      font-weight: 600;
    }
  </style>
</head>
<body>
  <section class="table-card" aria-labelledby="deployments-title">
    <header class="table-toolbar">
      <div class="table-title">
        <h1 id="deployments-title">Deployment history</h1>
        <span class="record-count">8 records</span>
      </div>
      <div class="updated">
        <span class="live-dot" aria-hidden="true"></span>
        Updated just now
      </div>
    </header>

    <table aria-label="Server deployment records">
      <colgroup>
        <col class="status">
        <col class="service">
        <col class="region">
        <col class="deployer">
        <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" class="sort-header" aria-sort="descending">
            <button class="sort-button" type="button" aria-label="Timestamp, sorted descending">
              Timestamp
              <span class="sort-mark" aria-hidden="true">
                <i class="up"></i><i class="down"></i>
              </span>
            </button>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="status-cell">
            <span class="status succeeded"><span class="status-icon">✓</span>Succeeded</span>
          </td>
          <td><span class="service-name">api-gateway</span><span class="service-meta">v2.14.0</span></td>
          <td class="region">us-east-1</td>
          <td class="deployer">Maya Chen</td>
          <td class="duration">2m 18s</td>
          <td class="timestamp">Today, 14:32</td>
        </tr>
        <tr class="is-hovered">
          <td class="status-cell">
            <span class="status running"><span class="status-icon">●</span>Running</span>
          </td>
          <td><span class="service-name">billing-worker</span><span class="service-meta">v1.9.3</span></td>
          <td class="region">eu-west-1</td>
          <td class="deployer">Arjun Patel</td>
          <td class="duration">1m 07s</td>
          <td class="timestamp">Today, 14:18</td>
        </tr>
        <tr class="is-selected" aria-selected="true">
          <td class="status-cell">
            <span class="status succeeded"><span class="status-icon">✓</span>Succeeded</span>
          </td>
          <td><span class="service-name">checkout-web</span><span class="service-meta">v4.6.1</span></td>
          <td class="region">us-west-2</td>
          <td class="deployer">Nora Williams</td>
          <td class="duration">3m 42s</td>
          <td class="timestamp">Today, 13:56</td>
        </tr>
        <tr>
          <td class="status-cell">
            <span class="status failed"><span class="status-icon">×</span>Failed</span>
          </td>
          <td><span class="service-name">search-indexer</span><span class="service-meta">v3.2.8</span></td>
          <td class="region">ap-southeast-1</td>
          <td class="deployer">Leo Martins</td>
          <td class="duration">0m 49s</td>
          <td class="timestamp">Today, 13:41</td>
        </tr>
        <tr>
          <td class="status-cell">
            <span class="status succeeded"><span class="status-icon">✓</span>Succeeded</span>
          </td>
          <td><span class="service-name">identity-service</span><span class="service-meta">v5.1.0</span></td>
          <td class="region">us-east-1</td>
          <td class="deployer">Maya Chen</td>
          <td class="duration">2m 05s</td>
          <td class="timestamp">Today, 13:22</td>
        </tr>
        <tr>
          <td class="status-cell">
            <span class="status queued"><span class="status-icon">⋯</span>Queued</span>
          </td>
          <td><span class="service-name">reporting-api</span><span class="service-meta">v2.8.4</span></td>
          <td class="region">eu-central-1</td>
          <td class="deployer">Priya Shah</td>
          <td class="duration">—</td>
          <td class="timestamp">Today, 13:09</td>
        </tr>
        <tr>
          <td class="status-cell">
            <span class="status succeeded"><span class="status-icon">✓</span>Succeeded</span>
          </td>
          <td><span class="service-name">notification-hub</span><span class="service-meta">v1.12.2</span></td>
          <td class="region">us-west-2</td>
          <td class="deployer">Ethan Brooks</td>
          <td class="duration">1m 54s</td>
          <td class="timestamp">Today, 12:47</td>
        </tr>
        <tr>
          <td class="status-cell">
            <span class="status succeeded"><span class="status-icon">✓</span>Succeeded</span>
          </td>
          <td><span class="service-name">asset-processor</span><span class="service-meta">v2.3.7</span></td>
          <td class="region">ap-southeast-1</td>
          <td class="deployer">Arjun Patel</td>
          <td class="duration">4m 11s</td>
          <td class="timestamp">Today, 12:18</td>
        </tr>
      </tbody>
    </table>

    <footer class="table-footer">
      Showing 8 most recent deployments
      <span class="state-note"><strong>Selected:</strong> checkout-web &nbsp;·&nbsp; Hover preview shown on billing-worker</span>
    </footer>
  </section>
</body>
</html>

request envelope — prompt redacted

{
  "model": "openai/gpt-5.6-terra",
  "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": "9bd8bad1-4193-4e89-a67d-78fe58951673"
}