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 {
    color-scheme: light;
    --page: #f3f5f7;
    --surface: #ffffff;
    --surface-soft: #fafbfc;
    --line: #dfe4ea;
    --line-strong: #cbd3dc;
    --text: #202936;
    --muted: #697586;
    --subtle: #8792a1;
    --blue: #2468b1;
    --blue-soft: #eaf3ff;
    --blue-line: #a9c8ec;
    --hover: #f4f7fa;
    --success-bg: #eef8f1;
    --success-line: #b8dcc2;
    --success-text: #216b3d;
    --warn-bg: #fff7e7;
    --warn-line: #e8cf93;
    --warn-text: #895b09;
    --fail-bg: #fff0f0;
    --fail-line: #e6b8b8;
    --fail-text: #9b3131;
    --running-bg: #eff4ff;
    --running-line: #b7caed;
    --running-text: #285c9c;
  }

  * { box-sizing: border-box; }

  body {
    margin: 0;
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 64px 40px;
    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.35;
  }

  .table-card {
    width: min(1050px, 100%);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 9px;
    box-shadow: 0 2px 7px rgba(24, 36, 49, 0.055);
    overflow: hidden;
  }

  .table-heading {
    min-height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 15px 20px 14px;
    border-bottom: 1px solid var(--line);
  }

  .heading-copy {
    min-width: 0;
  }

  h1 {
    margin: 0;
    color: #17202b;
    font-size: 15px;
    font-weight: 650;
    letter-spacing: -0.01em;
  }

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

  .record-count {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 9px;
    color: #526172;
    background: #f5f7f9;
    border: 1px solid var(--line);
    border-radius: 5px;
    font-size: 12px;
    font-weight: 550;
  }

  .table-wrap {
    overflow-x: auto;
  }

  table {
    width: 100%;
    min-width: 820px;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
  }

  col.status { width: 140px; }
  col.service { width: 220px; }
  col.region { width: 140px; }
  col.deployer { width: 165px; }
  col.duration { width: 112px; }
  col.timestamp { width: auto; }

  thead th {
    height: 39px;
    padding: 0 16px;
    background: var(--surface-soft);
    border-bottom: 1px solid var(--line);
    color: #667384;
    text-align: left;
    text-transform: uppercase;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.055em;
    white-space: nowrap;
  }

  thead th:first-child,
  tbody td:first-child { padding-left: 20px; }

  thead th:last-child,
  tbody td:last-child { padding-right: 20px; }

  .sortable {
    background: #f5f8fb;
    color: #45586c;
  }

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

  .sort-arrow {
    width: 12px;
    height: 12px;
    color: var(--blue);
  }

  tbody tr {
    height: 49px;
    background: var(--surface);
  }

  tbody tr + tr td {
    border-top: 1px solid #e9edf1;
  }

  tbody td {
    padding: 0 16px;
    color: #344252;
    vertical-align: middle;
    white-space: nowrap;
  }

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

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

  tbody tr.selected td {
    background: var(--blue-soft);
    border-top-color: var(--blue-line);
    border-bottom: 1px solid var(--blue-line);
  }

  tbody tr.selected + tr td {
    border-top-color: transparent;
  }

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

  tbody tr:hover td {
    background: #f2f6fa;
  }

  tbody tr.selected:hover td {
    background: #e5f1ff;
  }

  .status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 82px;
    min-height: 24px;
    padding: 3px 8px 3px 6px;
    border: 1px solid;
    border-radius: 5px;
    font-size: 11.5px;
    font-weight: 650;
    line-height: 1;
  }

  .status-badge svg {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
    stroke-width: 2.25;
  }

  .success {
    color: var(--success-text);
    background: var(--success-bg);
    border-color: var(--success-line);
  }

  .warning {
    color: var(--warn-text);
    background: var(--warn-bg);
    border-color: var(--warn-line);
  }

  .failed {
    color: var(--fail-text);
    background: var(--fail-bg);
    border-color: var(--fail-line);
  }

  .running {
    color: var(--running-text);
    background: var(--running-bg);
    border-color: var(--running-line);
  }

  .service-name {
    color: #273545;
    font-weight: 620;
  }

  .region-code,
  .duration,
  time {
    color: #516071;
    font-variant-numeric: tabular-nums;
  }

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

  .avatar {
    width: 23px;
    height: 23px;
    display: inline-grid;
    place-items: center;
    border: 1px solid #cfd8e1;
    border-radius: 50%;
    background: #eef2f6;
    color: #526374;
    font-size: 9px;
    font-weight: 750;
    letter-spacing: 0.01em;
  }

  .selected .avatar {
    background: #d9eaff;
    border-color: #a9c9ec;
    color: #275e9e;
  }

  .timestamp-cell {
    color: #526172;
  }

  .selection-note {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 8px;
    color: #2766a7;
    font-size: 10.5px;
    font-weight: 650;
    vertical-align: middle;
  }

  .selection-note svg {
    width: 12px;
    height: 12px;
  }

  .table-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 42px;
    padding: 0 20px;
    border-top: 1px solid var(--line);
    background: #fbfcfd;
    color: var(--muted);
    font-size: 11.5px;
  }

  .key {
    display: flex;
    align-items: center;
    gap: 14px;
  }

  .key-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
  }

  .key-swatch {
    width: 12px;
    height: 12px;
    border: 1px solid var(--line-strong);
    border-radius: 3px;
    background: var(--hover);
  }

  .key-swatch.selected-key {
    background: var(--blue-soft);
    border-color: var(--blue-line);
    box-shadow: inset 2px 0 0 var(--blue);
  }

  .page-label {
    font-variant-numeric: tabular-nums;
  }
</style>
</head>
<body>
  <main class="table-card" aria-labelledby="deployment-title">
    <header class="table-heading">
      <div class="heading-copy">
        <h1 id="deployment-title">Deployment records</h1>
        <p class="heading-meta">Production environment · Latest deployment activity</p>
      </div>
      <div class="record-count" aria-label="8 deployment records">8 records</div>
    </header>

    <div class="table-wrap">
      <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="sortable" aria-sort="descending">
              <span class="sort-label">
                Timestamp
                <svg class="sort-arrow" viewBox="0 0 16 16" aria-hidden="true" fill="none">
                  <path d="M8 3.25v8.5M4.75 8.5 8 11.75 11.25 8.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </span>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              <span class="status-badge success">
                <svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="m3.2 8.1 3.05 3.05L12.8 4.6" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></svg>
                Succeeded
              </span>
            </td>
            <td><span class="service-name">checkout-api</span></td>
            <td><span class="region-code">us-east-1</span></td>
            <td><span class="deployer"><span class="avatar">MC</span>Maya Chen</span></td>
            <td><span class="duration">2m 14s</span></td>
            <td class="timestamp-cell"><time datetime="2025-03-08T14:32:00Z">Mar 08, 2025 · 14:32 UTC</time></td>
          </tr>

          <tr>
            <td>
              <span class="status-badge running">
                <svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><circle cx="8" cy="8" r="5.15" stroke="currentColor"/><path d="M8 5.1v3.2l2.15 1.35" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></svg>
                Running
              </span>
            </td>
            <td><span class="service-name">notifications-worker</span></td>
            <td><span class="region-code">eu-west-1</span></td>
            <td><span class="deployer"><span class="avatar">AO</span>Andre Oliveira</span></td>
            <td><span class="duration">4m 08s</span></td>
            <td class="timestamp-cell"><time datetime="2025-03-08T14:27:00Z">Mar 08, 2025 · 14:27 UTC</time></td>
          </tr>

          <tr>
            <td>
              <span class="status-badge warning">
                <svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M8 2.5 14 13H2L8 2.5Z" stroke="currentColor" stroke-linejoin="round"/><path d="M8 5.7v3.65M8 11.35v.1" stroke="currentColor" stroke-linecap="round"/></svg>
                Warning
              </span>
            </td>
            <td><span class="service-name">catalog-search</span></td>
            <td><span class="region-code">us-west-2</span></td>
            <td><span class="deployer"><span class="avatar">JP</span>Jordan Park</span></td>
            <td><span class="duration">3m 41s</span></td>
            <td class="timestamp-cell"><time datetime="2025-03-08T14:18:00Z">Mar 08, 2025 · 14:18 UTC</time></td>
          </tr>

          <tr class="hovered">
            <td>
              <span class="status-badge success">
                <svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="m3.2 8.1 3.05 3.05L12.8 4.6" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></svg>
                Succeeded
              </span>
            </td>
            <td><span class="service-name">identity-gateway</span></td>
            <td><span class="region-code">ap-southeast-2</span></td>
            <td><span class="deployer"><span class="avatar">SL</span>Sofia Lin</span></td>
            <td><span class="duration">1m 56s</span></td>
            <td class="timestamp-cell"><time datetime="2025-03-08T14:06:00Z">Mar 08, 2025 · 14:06 UTC</time></td>
          </tr>

          <tr>
            <td>
              <span class="status-badge failed">
                <svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><circle cx="8" cy="8" r="5.2" stroke="currentColor"/><path d="m5.9 5.9 4.2 4.2m0-4.2-4.2 4.2" stroke="currentColor" stroke-linecap="round"/></svg>
                Failed
              </span>
            </td>
            <td><span class="service-name">billing-events</span></td>
            <td><span class="region-code">eu-central-1</span></td>
            <td><span class="deployer"><span class="avatar">RB</span>Ravi Bhat</span></td>
            <td><span class="duration">0m 47s</span></td>
            <td class="timestamp-cell"><time datetime="2025-03-08T13:54:00Z">Mar 08, 2025 · 13:54 UTC</time></td>
          </tr>

          <tr class="selected" aria-selected="true">
            <td>
              <span class="status-badge success">
                <svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="m3.2 8.1 3.05 3.05L12.8 4.6" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></svg>
                Succeeded
              </span>
            </td>
            <td>
              <span class="service-name">customer-profile</span>
              <span class="selection-note">
                <svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="m3.2 8.1 3.05 3.05L12.8 4.6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                Selected
              </span>
            </td>
            <td><span class="region-code">us-east-1</span></td>
            <td><span class="deployer"><span class="avatar">MC</span>Maya Chen</span></td>
            <td><span class="duration">2m 32s</span></td>
            <td class="timestamp-cell"><time datetime="2025-03-08T13:38:00Z">Mar 08, 2025 · 13:38 UTC</time></td>
          </tr>

          <tr>
            <td>
              <span class="status-badge success">
                <svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="m3.2 8.1 3.05 3.05L12.8 4.6" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></svg>
                Succeeded
              </span>
            </td>
            <td><span class="service-name">media-processor</span></td>
            <td><span class="region-code">ap-northeast-1</span></td>
            <td><span class="deployer"><span class="avatar">DK</span>Devon King</span></td>
            <td><span class="duration">5m 19s</span></td>
            <td class="timestamp-cell"><time datetime="2025-03-08T13:21:00Z">Mar 08, 2025 · 13:21 UTC</time></td>
          </tr>

          <tr>
            <td>
              <span class="status-badge success">
                <svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="m3.2 8.1 3.05 3.05L12.8 4.6" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></svg>
                Succeeded
              </span>
            </td>
            <td><span class="service-name">reporting-export</span></td>
            <td><span class="region-code">us-west-2</span></td>
            <td><span class="deployer"><span class="avatar">SL</span>Sofia Lin</span></td>
            <td><span class="duration">2m 08s</span></td>
            <td class="timestamp-cell"><time datetime="2025-03-08T13:05:00Z">Mar 08, 2025 · 13:05 UTC</time></td>
          </tr>
        </tbody>
      </table>
    </div>

    <footer class="table-footer">
      <div class="key" aria-label="Table state legend">
        <span class="key-item"><span class="key-swatch" aria-hidden="true"></span>Hover state</span>
        <span class="key-item"><span class="key-swatch selected-key" aria-hidden="true"></span>Selected row</span>
      </div>
      <span class="page-label">Showing 1–8 of 8</span>
    </footer>
  </main>
</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"
}