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</title>
<style>
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    font-size: 13px;
    line-height: 1.4;
    color: #1a1d23;
    background: #e8e9eb;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 32px;
  }

  .table-wrap {
    background: #fff;
    border: 1px solid #d0d3d9;
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    overflow: hidden;
    width: 860px;
  }

  .table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid #e2e4e8;
    background: #f7f8f9;
  }

  .table-toolbar h1 {
    font-size: 13px;
    font-weight: 600;
    color: #1a1d23;
    letter-spacing: -0.01em;
  }

  .table-toolbar span {
    font-size: 12px;
    color: #6b7280;
  }

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

  thead th {
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    color: #5c6370;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 8px 12px;
    background: #fafafb;
    border-bottom: 1px solid #e2e4e8;
    white-space: nowrap;
    user-select: none;
    cursor: pointer;
    position: relative;
  }

  thead th:hover {
    color: #1a1d23;
    background: #f0f1f3;
  }

  thead th.sorted {
    color: #1a1d23;
    background: #eef0f3;
  }

  thead th .sort-icon {
    display: inline-block;
    margin-left: 4px;
    vertical-align: middle;
    opacity: 0.35;
  }

  thead th.sorted .sort-icon {
    opacity: 1;
  }

  thead th .sort-icon svg {
    display: block;
  }

  tbody td {
    padding: 7px 12px;
    border-bottom: 1px solid #eef0f2;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #2c3038;
  }

  tbody tr:last-child td {
    border-bottom: none;
  }

  tbody tr {
    cursor: default;
    transition: background 0.08s ease;
  }

  /* Hovered row (third data row) */
  tbody tr.hovered {
    background: #f3f5f8;
  }

  /* Selected row (fifth data row) */
  tbody tr.selected {
    background: #e8f0fe;
  }

  tbody tr.selected td {
    color: #1a1d23;
  }

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

  /* Column widths */
  .col-status { width: 108px; }
  .col-service { width: 168px; }
  .col-region { width: 110px; }
  .col-deployed { width: 130px; }
  .col-duration { width: 90px; }
  .col-timestamp { width: auto; }

  /* Status badges — shape + text, not colour alone */
  .status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    padding: 3px 7px 3px 5px;
    border-radius: 3px;
    border: 1px solid transparent;
  }

  .status .glyph {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .status .glyph svg {
    display: block;
  }

  .status-healthy {
    color: #0d6b3c;
    background: #e6f5ed;
    border-color: #b7e0c8;
  }

  .status-deploying {
    color: #1a4f9c;
    background: #e8f0fc;
    border-color: #b8cff0;
  }

  .status-failed {
    color: #9b1c1c;
    background: #fce8e8;
    border-color: #f0b8b8;
  }

  .status-degraded {
    color: #8a5a00;
    background: #fef6e0;
    border-color: #f0d890;
  }

  .service-name {
    font-weight: 500;
    color: #1a1d23;
    font-variant-numeric: tabular-nums;
  }

  .mono {
    font-family: "SF Mono", "Menlo", "Consolas", monospace;
    font-size: 12px;
    color: #3d4450;
    font-variant-numeric: tabular-nums;
  }

  .muted {
    color: #6b7280;
  }
</style>
</head>
<body>
  <div class="table-wrap">
    <div class="table-toolbar">
      <h1>Deployments</h1>
      <span>8 records</span>
    </div>
    <table>
      <thead>
        <tr>
          <th class="col-status">Status</th>
          <th class="col-service">Service</th>
          <th class="col-region">Region</th>
          <th class="col-deployed">Deployed by</th>
          <th class="col-duration sorted">
            Duration
            <span class="sort-icon" aria-label="sorted ascending">
              <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
                <path d="M6 2.5L6 9.5" stroke="#1a1d23" stroke-width="1.4" stroke-linecap="round"/>
                <path d="M3.5 5L6 2.5L8.5 5" stroke="#1a1d23" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </span>
          </th>
          <th class="col-timestamp">Timestamp</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <span class="status status-healthy">
              <span class="glyph">
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                  <circle cx="7" cy="7" r="5.25" stroke="#0d6b3c" stroke-width="1.4"/>
                  <path d="M4.5 7.1L6.2 8.8L9.5 5.2" stroke="#0d6b3c" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </span>
              Healthy
            </span>
          </td>
          <td><span class="service-name">api-gateway</span></td>
          <td class="mono">us-east-1</td>
          <td>m.chen</td>
          <td class="mono">1m 12s</td>
          <td class="mono muted">2025-03-14 09:42:18</td>
        </tr>
        <tr>
          <td>
            <span class="status status-deploying">
              <span class="glyph">
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                  <path d="M7 2.5V4.2" stroke="#1a4f9c" stroke-width="1.4" stroke-linecap="round"/>
                  <path d="M7 9.8V11.5" stroke="#1a4f9c" stroke-width="1.4" stroke-linecap="round" opacity="0.4"/>
                  <path d="M3.82 3.82L5.02 5.02" stroke="#1a4f9c" stroke-width="1.4" stroke-linecap="round" opacity="0.85"/>
                  <path d="M8.98 8.98L10.18 10.18" stroke="#1a4f9c" stroke-width="1.4" stroke-linecap="round" opacity="0.35"/>
                  <path d="M2.5 7H4.2" stroke="#1a4f9c" stroke-width="1.4" stroke-linecap="round" opacity="0.7"/>
                  <path d="M9.8 7H11.5" stroke="#1a4f9c" stroke-width="1.4" stroke-linecap="round" opacity="0.3"/>
                  <path d="M3.82 10.18L5.02 8.98" stroke="#1a4f9c" stroke-width="1.4" stroke-linecap="round" opacity="0.55"/>
                  <path d="M8.98 5.02L10.18 3.82" stroke="#1a4f9c" stroke-width="1.4" stroke-linecap="round" opacity="0.25"/>
                </svg>
              </span>
              Deploying
            </span>
          </td>
          <td><span class="service-name">auth-service</span></td>
          <td class="mono">eu-west-1</td>
          <td>j.okonkwo</td>
          <td class="mono">3m 48s</td>
          <td class="mono muted">2025-03-14 09:38:05</td>
        </tr>
        <tr class="hovered">
          <td>
            <span class="status status-healthy">
              <span class="glyph">
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                  <circle cx="7" cy="7" r="5.25" stroke="#0d6b3c" stroke-width="1.4"/>
                  <path d="M4.5 7.1L6.2 8.8L9.5 5.2" stroke="#0d6b3c" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </span>
              Healthy
            </span>
          </td>
          <td><span class="service-name">billing-worker</span></td>
          <td class="mono">us-west-2</td>
          <td>a.petrov</td>
          <td class="mono">0m 54s</td>
          <td class="mono muted">2025-03-14 09:31:44</td>
        </tr>
        <tr>
          <td>
            <span class="status status-failed">
              <span class="glyph">
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                  <circle cx="7" cy="7" r="5.25" stroke="#9b1c1c" stroke-width="1.4"/>
                  <path d="M5 5L9 9" stroke="#9b1c1c" stroke-width="1.4" stroke-linecap="round"/>
                  <path d="M9 5L5 9" stroke="#9b1c1c" stroke-width="1.4" stroke-linecap="round"/>
                </svg>
              </span>
              Failed
            </span>
          </td>
          <td><span class="service-name">image-resizer</span></td>
          <td class="mono">ap-south-1</td>
          <td>s.nakamura</td>
          <td class="mono">2m 07s</td>
          <td class="mono muted">2025-03-14 09:22:11</td>
        </tr>
        <tr class="selected">
          <td>
            <span class="status status-degraded">
              <span class="glyph">
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                  <path d="M7 2.2L12.3 11.5H1.7L7 2.2Z" stroke="#8a5a00" stroke-width="1.4" stroke-linejoin="round"/>
                  <path d="M7 5.8V8.2" stroke="#8a5a00" stroke-width="1.4" stroke-linecap="round"/>
                  <circle cx="7" cy="9.8" r="0.7" fill="#8a5a00"/>
                </svg>
              </span>
              Degraded
            </span>
          </td>
          <td><span class="service-name">search-indexer</span></td>
          <td class="mono">eu-central-1</td>
          <td>r.alvarez</td>
          <td class="mono">4m 21s</td>
          <td class="mono muted">2025-03-14 09:15:33</td>
        </tr>
        <tr>
          <td>
            <span class="status status-healthy">
              <span class="glyph">
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                  <circle cx="7" cy="7" r="5.25" stroke="#0d6b3c" stroke-width="1.4"/>
                  <path d="M4.5 7.1L6.2 8.8L9.5 5.2" stroke="#0d6b3c" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </span>
              Healthy
            </span>
          </td>
          <td><span class="service-name">notif-dispatcher</span></td>
          <td class="mono">us-east-1</td>
          <td>m.chen</td>
          <td class="mono">1m 39s</td>
          <td class="mono muted">2025-03-14 09:08:57</td>
        </tr>
        <tr>
          <td>
            <span class="status status-healthy">
              <span class="glyph">
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                  <circle cx="7" cy="7" r="5.25" stroke="#0d6b3c" stroke-width="1.4"/>
                  <path d="M4.5 7.1L6.2 8.8L9.5 5.2" stroke="#0d6b3c" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </span>
              Healthy
            </span>
          </td>
          <td><span class="service-name">session-store</span></td>
          <td class="mono">ap-northeast-1</td>
          <td>l.bergstrom</td>
          <td class="mono">0m 41s</td>
          <td class="mono muted">2025-03-14 08:55:20</td>
        </tr>
        <tr>
          <td>
            <span class="status status-deploying">
              <span class="glyph">
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                  <path d="M7 2.5V4.2" stroke="#1a4f9c" stroke-width="1.4" stroke-linecap="round"/>
                  <path d="M7 9.8V11.5" stroke="#1a4f9c" stroke-width="1.4" stroke-linecap="round" opacity="0.4"/>
                  <path d="M3.82 3.82L5.02 5.02" stroke="#1a4f9c" stroke-width="1.4" stroke-linecap="round" opacity="0.85"/>
                  <path d="M8.98 8.98L10.18 10.18" stroke="#1a4f9c" stroke-width="1.4" stroke-linecap="round" opacity="0.35"/>
                  <path d="M2.5 7H4.2" stroke="#1a4f9c" stroke-width="1.4" stroke-linecap="round" opacity="0.7"/>
                  <path d="M9.8 7H11.5" stroke="#1a4f9c" stroke-width="1.4" stroke-linecap="round" opacity="0.3"/>
                  <path d="M3.82 10.18L5.02 8.98" stroke="#1a4f9c" stroke-width="1.4" stroke-linecap="round" opacity="0.55"/>
                  <path d="M8.98 5.02L10.18 3.82" stroke="#1a4f9c" stroke-width="1.4" stroke-linecap="round" opacity="0.25"/>
                </svg>
              </span>
              Deploying
            </span>
          </td>
          <td><span class="service-name">log-aggregator</span></td>
          <td class="mono">eu-west-2</td>
          <td>j.okonkwo</td>
          <td class="mono">5m 03s</td>
          <td class="mono muted">2025-03-14 08:49:02</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>
</html>

request envelope — prompt redacted

{
  "model": "xai/grok-4.5",
  "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": "79967a98-155d-437c-bc43-1a033488fd6d"
}