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">
<title>Deployments — Data Table</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }

  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: #e8e8e5;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 72px 56px;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  .mono {
    font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-variant-numeric: tabular-nums;
  }

  /* ---------- Card ---------- */
  .table-card {
    width: max-content;
    min-width: 892px;
    background: #ffffff;
    border: 1px solid #dcdad5;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(24,24,20,.04), 0 16px 40px -16px rgba(24,24,20,.14);
    overflow: hidden;
  }

  /* ---------- Toolbar ---------- */
  .toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 16px;
    border-bottom: 1px solid #ebeae6;
  }
  .toolbar-left { display: flex; align-items: center; }
  .title { font-size: 13px; font-weight: 600; color: #1c1c19; letter-spacing: .01em; }
  .count {
    margin-left: 9px;
    font-size: 11px;
    font-weight: 500;
    color: #6f6e69;
    background: #f3f3f0;
    border: 1px solid #e5e4e0;
    border-radius: 999px;
    padding: 1px 8px;
    line-height: 16px;
  }
  .chip {
    margin-left: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 8px 0 9px;
    font-size: 11.5px;
    color: #565550;
    background: #fbfbfa;
    border: 1px solid #e2e1dc;
    border-radius: 6px;
  }
  .chip-dot { width: 6px; height: 6px; border-radius: 50%; background: #3d9a57; }
  .chip svg { color: #9b9a94; }

  .search { position: relative; }
  .search svg {
    position: absolute;
    left: 9px; top: 50%;
    transform: translateY(-50%);
    color: #a09f99;
    pointer-events: none;
  }
  .search input {
    width: 208px;
    height: 28px;
    font-family: inherit;
    font-size: 12px;
    color: #1c1c19;
    padding: 0 10px 0 29px;
    background: #fafaf8;
    border: 1px solid #e0dfd9;
    border-radius: 6px;
    outline: none;
  }
  .search input::placeholder { color: #a5a49e; }
  .search input:focus { border-color: #c7c6c0; background: #ffffff; }

  /* ---------- Table ---------- */
  table { border-collapse: collapse; }
  thead th {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .065em;
    text-transform: uppercase;
    color: #8f8e88;
    text-align: left;
    white-space: nowrap;
    padding: 8px 14px;
    background: #fcfcfa;
    border-bottom: 1px solid #e9e8e4;
    cursor: pointer;
    user-select: none;
  }
  thead th.check { cursor: default; }
  thead th.sorted { color: #1f1f1c; }
  thead th.sorted svg { margin-left: 4px; vertical-align: -1.5px; }

  tbody td {
    font-size: 13px;
    color: #2b2b28;
    padding: 8px 14px;
    border-bottom: 1px solid #f1f0ec;
    vertical-align: middle;
    white-space: nowrap;
  }
  tbody tr:last-child td { border-bottom: none; }

  th.check, td.check { width: 42px; padding-left: 16px; padding-right: 6px; }
  input[type="checkbox"] {
    appearance: auto;
    accent-color: #2f6bde;
    width: 14px; height: 14px;
    margin: 0;
    display: block;
    cursor: pointer;
  }

  .num { text-align: right; }

  /* Row states */
  tr.hover td { background: #f6f6f3; }
  tr.selected td { background: #f0f6ff; }
  tr.selected td:first-child { box-shadow: inset 2px 0 0 #2f6bde; }

  /* ---------- Status pills (icon + label, never colour alone) ---------- */
  .status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    padding: 4px 10px 4px 7px;
    border-radius: 999px;
    border: 1px solid transparent;
  }
  .status svg { flex: none; }
  .st-success  { color: #1c7a3d; background: #eff8f1; border-color: #d2e9d8; }
  .st-failed   { color: #b3261e; background: #fdf1f0; border-color: #f2d3d0; }
  .st-progress { color: #2f5fd0; background: #f0f5ff; border-color: #d4e2fa; }
  .st-queued   { color: #62615c; background: #f4f4f1; border-color: #e4e3df; }
  .st-rollback { color: #8f650e; background: #fbf6e9; border-color: #eedfb8; }

  /* ---------- Cells ---------- */
  .svc { font-weight: 500; color: #1e1e1b; }
  .hash {
    margin-left: 8px;
    font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    color: #a3a29c;
  }
  .region { font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; color: #5c5b56; }

  .user { display: flex; align-items: center; font-size: 12.5px; color: #33322e; }
  .avatar {
    width: 22px; height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .04em;
    margin-right: 8px;
    border: 1px solid rgba(0,0,0,.05);
    flex: none;
  }
  .u1 { background: #eaeff3; color: #4e6a80; }
  .u2 { background: #f1ede6; color: #7c6e55; }
  .u3 { background: #ecf2ec; color: #57795c; }
  .u4 { background: #f3ecec; color: #8a5f5f; }
  .u5 { background: #e9f1ef; color: #51746b; }
  .u6 { background: #efedf3; color: #6c6186; }
  .u7 { background: #f1efe5; color: #7d734b; }
  .u8 { background: #edf0ea; color: #63755a; }

  .duration { font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; color: #3c3b36; font-variant-numeric: tabular-nums; }
  .duration.na { color: #bab9b3; }
  .ts { font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; color: #6e6d67; font-variant-numeric: tabular-nums; }

  /* ---------- Footer ---------- */
  .footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-top: 1px solid #ebeae6;
    font-size: 12px;
    color: #8a8983;
  }
</style>
</head>
<body>

<div class="table-card" role="region" aria-label="Server deployment records">

  <!-- Toolbar -->
  <div class="toolbar">
    <div class="toolbar-left">
      <span class="title">Deployments</span>
      <span class="count">8</span>
      <span class="chip">
        <span class="chip-dot"></span>Production
        <svg width="10" height="10" viewBox="0 0 12 12" fill="none"><path d="M3 4.6l3 3 3-3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
      </span>
    </div>
    <div class="search">
      <svg width="13" height="13" viewBox="0 0 12 12" fill="none"><circle cx="5.2" cy="5.2" r="3.6" stroke="currentColor" stroke-width="1.4"/><path d="M8 8l2.4 2.4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
      <input type="text" placeholder="Filter by service…" aria-label="Filter by service">
    </div>
  </div>

  <!-- Table -->
  <table>
    <thead>
      <tr>
        <th class="check" scope="col"><input type="checkbox" id="selectAll" aria-label="Select all deployments"></th>
        <th scope="col">Status</th>
        <th scope="col">Service</th>
        <th scope="col">Region</th>
        <th scope="col">Deployed by</th>
        <th scope="col" class="num">Duration</th>
        <th scope="col" class="sorted" aria-sort="descending">Timestamp
          <svg width="11" height="11" viewBox="0 0 12 12" fill="none" aria-hidden="true"><path d="M6 1.8v8M3.4 7L6 9.6l2.6-2.6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
        </th>
      </tr>
    </thead>
    <tbody>

      <tr>
        <td class="check"><input type="checkbox" aria-label="Select api-gateway deployment"></td>
        <td><span class="status st-success"><svg width="12" height="12" viewBox="0 0 12 12" fill="none"><circle cx="6" cy="6" r="5" stroke="currentColor" stroke-width="1.4"/><path d="M3.8 6.3l1.4 1.4 3-3.2" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>Success</span></td>
        <td><span class="svc">api-gateway</span><span class="hash">c41fa9e</span></td>
        <td class="region">us-east-1</td>
        <td><span class="user"><span class="avatar u1">AS</span>Ana Sousa</span></td>
        <td class="num"><span class="duration">1m 42s</span></td>
        <td><span class="ts">12 Jun · 14:32:08</span></td>
      </tr>

      <tr>
        <td class="check"><input type="checkbox" aria-label="Select auth-service deployment"></td>
        <td><span class="status st-success"><svg width="12" height="12" viewBox="0 0 12 12" fill="none"><circle cx="6" cy="6" r="5" stroke="currentColor" stroke-width="1.4"/><path d="M3.8 6.3l1.4 1.4 3-3.2" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>Success</span></td>
        <td><span class="svc">auth-service</span><span class="hash">9b0d3f1</span></td>
        <td class="region">eu-west-1</td>
        <td><span class="user"><span class="avatar u2">MC</span>Marcus Chen</span></td>
        <td class="num"><span class="duration">58s</span></td>
        <td><span class="ts">12 Jun · 14:18:52</span></td>
      </tr>

      <tr class="hover">
        <td class="check"><input type="checkbox" aria-label="Select search-indexer deployment"></td>
        <td><span class="status st-progress"><svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M6 1.2a4.8 4.8 0 1 1-4.8 4.8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>In progress</span></td>
        <td><span class="svc">search-indexer</span><span class="hash">77ac2b4</span></td>
        <td class="region">us-west-2</td>
        <td><span class="user"><span class="avatar u3">PN</span>Priya Nair</span></td>
        <td class="num"><span class="duration">2m 05s</span></td>
        <td><span class="ts">12 Jun · 13:57:20</span></td>
      </tr>

      <tr class="selected">
        <td class="check"><input type="checkbox" checked aria-label="Select billing-worker deployment"></td>
        <td><span class="status st-failed"><svg width="12" height="12" viewBox="0 0 12 12" fill="none"><circle cx="6" cy="6" r="5" stroke="currentColor" stroke-width="1.4"/><path d="M4.3 4.3l3.4 3.4M7.7 4.3L4.3 7.7" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>Failed</span></td>
        <td><span class="svc">billing-worker</span><span class="hash">e5c8a07</span></td>
        <td class="region">eu-central-1</td>
        <td><span class="user"><span class="avatar u4">TE</span>Tom Ellery</span></td>
        <td class="num"><span class="duration">3m 11s</span></td>
        <td><span class="ts">12 Jun · 13:41:03</span></td>
      </tr>

      <tr>
        <td class="check"><input type="checkbox" aria-label="Select edge-cache deployment"></td>
        <td><span class="status st-success"><svg width="12" height="12" viewBox="0 0 12 12" fill="none"><circle cx="6" cy="6" r="5" stroke="currentColor" stroke-width="1.4"/><path d="M3.8 6.3l1.4 1.4 3-3.2" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>Success</span></td>
        <td><span class="svc">edge-cache</span><span class="hash">3fd9e55</span></td>
        <td class="region">ap-southeast-2</td>
        <td><span class="user"><span class="avatar u5">JP</span>Jin Park</span></td>
        <td class="num"><span class="duration">44s</span></td>
        <td><span class="ts">12 Jun · 12:26:47</span></td>
      </tr>

      <tr>
        <td class="check"><input type="checkbox" aria-label="Select session-store deployment"></td>
        <td><span class="status st-rollback"><svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M1.6 6a4.4 4.4 0 1 0 4.4-4.4 4.9 4.9 0 0 0-3.3 1.35L1.6 4.2" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/><path d="M1.6 1.6v2.6h2.6" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>Rolled back</span></td>
        <td><span class="svc">session-store</span><span class="hash">8a1b6cc</span></td>
        <td class="region">us-east-1</td>
        <td><span class="user"><span class="avatar u6">LV</span>Lena Vogt</span></td>
        <td class="num"><span class="duration">1m 18s</span></td>
        <td><span class="ts">12 Jun · 11:03:15</span></td>
      </tr>

      <tr>
        <td class="check"><input type="checkbox" aria-label="Select metrics-pipeline deployment"></td>
        <td><span class="status st-queued"><svg width="12" height="12" viewBox="0 0 12 12" fill="none"><circle cx="6" cy="6" r="4.8" stroke="currentColor" stroke-width="1.3"/><path d="M6 3.7V6l1.6 1.1" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>Queued</span></td>
        <td><span class="svc">metrics-pipeline</span><span class="hash">b64d021</span></td>
        <td class="region">eu-west-1</td>
        <td><span class="user"><span class="avatar u7">OH</span>Omar Haddad</span></td>
        <td class="num"><span class="duration na">—</span></td>
        <td><span class="ts">12 Jun · 09:47:58</span></td>
      </tr>

      <tr>
        <td class="check"><input type="checkbox" aria-label="Select notifications deployment"></td>
        <td><span class="status st-success"><svg width="12" height="12" viewBox="0 0 12 12" fill="none"><circle cx="6" cy="6" r="5" stroke="currentColor" stroke-width="1.4"/><path d="M3.8 6.3l1.4 1.4 3-3.2" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>Success</span></td>
        <td><span class="svc">notifications</span><span class="hash">f0e3d98</span></td>
        <td class="region">us-west-2</td>
        <td><span class="user"><span class="avatar u8">GL</span>Grace Liu</span></td>
        <td class="num"><span class="duration">1m 07s</span></td>
        <td><span class="ts">11 Jun · 22:15:40</span></td>
      </tr>

    </tbody>
  </table>

  <!-- Footer -->
  <div class="footer">
    <span>8 deployments · 1 selected</span>
    <span>Page 1 of 1</span>
  </div>

</div>

<script>
  // Header checkbox reflects the partially-selected state of the rows
  document.getElementById('selectAll').indeterminate = true;
</script>

</body>
</html>

request envelope — prompt redacted

{
  "model": "moonshotai/kimi-k3",
  "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": "1bfbb92f-8faa-4d8c-820a-3bc9a9aa46b6"
}