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 Table</title>
<style>
  :root {
    --bg: #f3f4f6;
    --surface: #ffffff;
    --border: #dfe3e8;
    --border-soft: #ebedf0;
    --text: #20252d;
    --muted: #67717e;
    --header: #f8f9fa;
    --hover: #f2f6fa;
    --selected: #e8f1fb;
    --selected-border: #3b78b8;
    --success: #237a4b;
    --success-bg: #e8f5ed;
    --pending: #90630a;
    --pending-bg: #fff5d9;
    --failed: #a4403e;
    --failed-bg: #fbeceb;
    --neutral: #536273;
    --neutral-bg: #eef1f4;
    --shadow: 0 1px 2px rgba(22, 29, 37, .05), 0 7px 22px rgba(22, 29, 37, .05);
  }

  * { box-sizing: border-box; }

  body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 56px;
    background:
      linear-gradient(90deg, rgba(115, 125, 135, .028) 1px, transparent 1px),
      linear-gradient(rgba(115, 125, 135, .028) 1px, transparent 1px),
      var(--bg);
    background-size: 24px 24px;
    color: var(--text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 13px;
    letter-spacing: .005em;
  }

  .table-card {
    width: 1080px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--shadow);
    overflow: hidden;
  }

  .table-topbar {
    min-height: 62px;
    padding: 14px 18px 13px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border);
  }

  .title-group {
    display: flex;
    align-items: center;
    gap: 11px;
  }

  .title-group h1 {
    margin: 0;
    font-size: 15px;
    line-height: 20px;
    font-weight: 650;
    letter-spacing: -.01em;
  }

  .record-count {
    color: var(--muted);
    background: #f1f3f5;
    border: 1px solid #e4e7eb;
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 550;
    line-height: 16px;
  }

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

  .sync-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4b926c;
    box-shadow: 0 0 0 3px #e6f4ec;
  }

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

  col.status { width: 145px; }
  col.service { width: 236px; }
  col.region { width: 160px; }
  col.deployed { width: 180px; }
  col.duration { width: 130px; }
  col.timestamp { width: 229px; }

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

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

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

  .sort-active {
    color: #344555;
  }

  .sort-indicator {
    display: inline-flex;
    width: 14px;
    height: 14px;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    color: #3471ad;
    background: #eaf2fa;
  }

  tbody tr {
    height: 53px;
    border-bottom: 1px solid var(--border-soft);
    background: #fff;
  }

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

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

  tbody tr.hovered {
    background: var(--hover);
    box-shadow: inset 3px 0 0 #9db4c9;
  }

  tbody tr.selected {
    background: var(--selected);
    box-shadow: inset 3px 0 0 var(--selected-border);
  }

  .status-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 94px;
    height: 24px;
    padding: 0 9px 0 7px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 620;
    line-height: 1;
  }

  .status-icon {
    width: 12px;
    height: 12px;
    flex: 0 0 auto;
  }

  .completed { color: var(--success); background: var(--success-bg); }
  .pending { color: var(--pending); background: var(--pending-bg); }
  .failed { color: var(--failed); background: var(--failed-bg); }
  .rolled-back { color: var(--neutral); background: var(--neutral-bg); }

  .service-name {
    font-weight: 590;
    color: #29323d;
  }

  .service-meta {
    margin-left: 7px;
    color: #828b96;
    font-size: 12px;
  }

  .region {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #46515d;
  }

  .region-marker {
    width: 7px;
    height: 7px;
    border: 1.5px solid #87919c;
    border-radius: 50%;
  }

  .person {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #3e4955;
  }

  .avatar {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .01em;
  }

  .av-1 { color: #315c86; background: #deebf7; }
  .av-2 { color: #72522b; background: #f5ead8; }
  .av-3 { color: #5c477c; background: #ebe3f7; }
  .av-4 { color: #3b6b57; background: #dcefe6; }
  .av-5 { color: #7a4543; background: #f4e1e0; }

  .duration {
    color: #4d5966;
    font-variant-numeric: tabular-nums;
  }

  .timestamp {
    color: #54606d;
    font-variant-numeric: tabular-nums;
    font-size: 12.5px;
  }

  .selected .service-name,
  .selected .timestamp {
    color: #244d75;
  }

  .row-marker {
    display: none;
  }

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

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

  .legend-line {
    width: 15px;
    height: 2px;
    background: var(--selected-border);
  }

  .page-state {
    color: #78828d;
  }
</style>
</head>
<body>
  <main class="table-card" aria-label="Server deployment records">
    <header class="table-topbar">
      <div class="title-group">
        <h1>Deployment records</h1>
        <span class="record-count">8 records</span>
      </div>
      <div class="sync-state">
        <span class="sync-dot" aria-hidden="true"></span>
        <span>Updated just now</span>
      </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="descending">
            <span class="header-content sort-active">
              Timestamp
              <span class="sort-indicator" aria-label="Sorted descending">
                <svg width="10" height="10" viewBox="0 0 10 10" aria-hidden="true">
                  <path d="M5 1.2v6.1M2.5 5.1 5 7.7l2.5-2.6" fill="none" stroke="currentColor" stroke-width="1.35" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </span>
            </span>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <span class="status-badge completed">
              <svg class="status-icon" viewBox="0 0 12 12" aria-hidden="true">
                <circle cx="6" cy="6" r="5" fill="none" stroke="currentColor" stroke-width="1.5"/>
                <path d="m3.4 6.1 1.65 1.65L8.7 4.2" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
              Completed
            </span>
          </td>
          <td><span class="service-name">api-gateway</span><span class="service-meta">v2.18.4</span></td>
          <td><span class="region"><i class="region-marker"></i>us-east-1</span></td>
          <td><span class="person"><span class="avatar av-1">MK</span>Maya Kim</span></td>
          <td class="duration">2m 14s</td>
          <td class="timestamp">Today, 10:42:18 AM</td>
        </tr>

        <tr class="selected" aria-selected="true">
          <td>
            <span class="status-badge completed">
              <svg class="status-icon" viewBox="0 0 12 12" aria-hidden="true">
                <circle cx="6" cy="6" r="5" fill="none" stroke="currentColor" stroke-width="1.5"/>
                <path d="m3.4 6.1 1.65 1.65L8.7 4.2" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
              Completed
            </span>
          </td>
          <td><span class="service-name">billing-worker</span><span class="service-meta">v1.9.0</span></td>
          <td><span class="region"><i class="region-marker"></i>eu-west-1</span></td>
          <td><span class="person"><span class="avatar av-2">JT</span>Jon Torres</span></td>
          <td class="duration">48s</td>
          <td class="timestamp">Today, 10:36:04 AM</td>
        </tr>

        <tr class="hovered">
          <td>
            <span class="status-badge pending">
              <svg class="status-icon" viewBox="0 0 12 12" aria-hidden="true">
                <circle cx="6" cy="6" r="5" fill="none" stroke="currentColor" stroke-width="1.5"/>
                <path d="M6 3.1v3.15l2.05 1.2" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
              Pending
            </span>
          </td>
          <td><span class="service-name">search-indexer</span><span class="service-meta">v4.3.1</span></td>
          <td><span class="region"><i class="region-marker"></i>us-west-2</span></td>
          <td><span class="person"><span class="avatar av-3">AB</span>Ari Bennett</span></td>
          <td class="duration">—</td>
          <td class="timestamp">Today, 10:28:53 AM</td>
        </tr>

        <tr>
          <td>
            <span class="status-badge failed">
              <svg class="status-icon" viewBox="0 0 12 12" aria-hidden="true">
                <circle cx="6" cy="6" r="5" fill="none" stroke="currentColor" stroke-width="1.5"/>
                <path d="m4.1 4.1 3.8 3.8m0-3.8-3.8 3.8" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
              </svg>
              Failed
            </span>
          </td>
          <td><span class="service-name">auth-service</span><span class="service-meta">v3.12.0</span></td>
          <td><span class="region"><i class="region-marker"></i>ap-southeast-1</span></td>
          <td><span class="person"><span class="avatar av-4">SL</span>Sam Lee</span></td>
          <td class="duration">1m 07s</td>
          <td class="timestamp">Today, 10:15:31 AM</td>
        </tr>

        <tr>
          <td>
            <span class="status-badge rolled-back">
              <svg class="status-icon" viewBox="0 0 12 12" aria-hidden="true">
                <path d="M4.45 3.1 2.2 5.25 4.45 7.4M2.45 5.25h4.05a2.55 2.55 0 1 1-1.8 4.35" fill="none" stroke="currentColor" stroke-width="1.35" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
              Rolled back
            </span>
          </td>
          <td><span class="service-name">notifications</span><span class="service-meta">v1.24.6</span></td>
          <td><span class="region"><i class="region-marker"></i>us-east-1</span></td>
          <td><span class="person"><span class="avatar av-5">NP</span>Nora Patel</span></td>
          <td class="duration">34s</td>
          <td class="timestamp">Today, 9:58:09 AM</td>
        </tr>

        <tr>
          <td>
            <span class="status-badge completed">
              <svg class="status-icon" viewBox="0 0 12 12" aria-hidden="true">
                <circle cx="6" cy="6" r="5" fill="none" stroke="currentColor" stroke-width="1.5"/>
                <path d="m3.4 6.1 1.65 1.65L8.7 4.2" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
              Completed
            </span>
          </td>
          <td><span class="service-name">customer-portal</span><span class="service-meta">v5.6.2</span></td>
          <td><span class="region"><i class="region-marker"></i>eu-central-1</span></td>
          <td><span class="person"><span class="avatar av-1">MK</span>Maya Kim</span></td>
          <td class="duration">3m 21s</td>
          <td class="timestamp">Today, 9:41:46 AM</td>
        </tr>

        <tr>
          <td>
            <span class="status-badge completed">
              <svg class="status-icon" viewBox="0 0 12 12" aria-hidden="true">
                <circle cx="6" cy="6" r="5" fill="none" stroke="currentColor" stroke-width="1.5"/>
                <path d="m3.4 6.1 1.65 1.65L8.7 4.2" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
              Completed
            </span>
          </td>
          <td><span class="service-name">event-ingest</span><span class="service-meta">v2.7.8</span></td>
          <td><span class="region"><i class="region-marker"></i>us-west-2</span></td>
          <td><span class="person"><span class="avatar av-2">JT</span>Jon Torres</span></td>
          <td class="duration">1m 42s</td>
          <td class="timestamp">Today, 9:24:12 AM</td>
        </tr>

        <tr>
          <td>
            <span class="status-badge failed">
              <svg class="status-icon" viewBox="0 0 12 12" aria-hidden="true">
                <circle cx="6" cy="6" r="5" fill="none" stroke="currentColor" stroke-width="1.5"/>
                <path d="m4.1 4.1 3.8 3.8m0-3.8-3.8 3.8" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
              </svg>
              Failed
            </span>
          </td>
          <td><span class="service-name">media-processor</span><span class="service-meta">v0.18.9</span></td>
          <td><span class="region"><i class="region-marker"></i>ap-northeast-1</span></td>
          <td><span class="person"><span class="avatar av-3">AB</span>Ari Bennett</span></td>
          <td class="duration">56s</td>
          <td class="timestamp">Today, 9:10:27 AM</td>
        </tr>
      </tbody>
    </table>

    <footer class="table-footer">
      <div class="footer-legend"><span class="legend-line"></span><span>Selected deployment</span></div>
      <div class="page-state">Showing 1–8 of 8</div>
    </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"
}