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

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Server Deployment Records</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        }

        body {
            background-color: #f5f7fa;
            padding: 24px;
            color: #333;
            display: flex;
            justify-content: center;
        }

        .table-container {
            width: 100%;
            max-width: 1200px;
            background-color: #fff;
            border-radius: 6px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.16);
            overflow: hidden;
        }

        .table-header {
            background-color: #f5f7fa;
            border-bottom: 1px solid #e1e4e8;
            position: relative;
        }

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

        thead th {
            text-align: left;
            padding: 12px 16px;
            font-size: 14px;
            font-weight: 500;
            color: #555;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            position: relative;
            cursor: pointer;
        }

        thead th:hover {
            background-color: #eef1f5;
        }

        thead th.sorted-asc::after,
        thead th.sorted-desc::after {
            content: '';
            position: absolute;
            right: 8px;
            top: 50%;
            transform: translateY(-50%);
            width: 0;
            height: 0;
            border: 5px solid transparent;
        }

        thead th.sorted-asc::after {
            border-bottom-color: #555;
            margin-top: -2px;
        }

        thead th.sorted-desc::after {
            border-top-color: #555;
            margin-top: 3px;
        }

        tbody td {
            padding: 12px 16px;
            font-size: 14px;
            border-bottom: 1px solid #eef1f5;
        }

        tbody tr {
            transition: background-color 0.1s ease;
        }

        tbody tr:hover {
            background-color: #f6f8fa;
        }

        tbody tr.selected {
            background-color: #e6f7ff;
        }

        .status {
            display: flex;
            align-items: center;
        }

        .status-indicator {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            margin-right: 8px;
        }

        .status-success {
            background-color: #28a745;
        }

        .status-failed {
            background-color: #d73a49;
        }

        .status-pending {
            background-color: #d8b00d;
        }

        .status-text {
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .service-name {
            font-weight: 500;
            color: #24292e;
        }

        .region {
            font-size: 13px;
            color: #555;
        }

        .deployed-by {
            color: #555;
            font-size: 13px;
        }

        .duration {
            font-size: 13px;
            color: #555;
        }

        .timestamp {
            font-size: 13px;
            color: #666;
        }
    </style>
</head>
<body>
    <div class="table-container">
        <table>
            <thead class="table-header">
                <tr>
                    <th class="sorted-desc">Status</th>
                    <th>Service Name</th>
                    <th>Region</th>
                    <th>Deployed By</th>
                    <th>Duration</th>
                    <th>Timestamp</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <div class="status">
                            <span class="status-indicator status-success"></span>
                            <span class="status-text">Success</span>
                        </div>
                    </td>
                    <td class="service-name">api-gateway</td>
                    <td class="region">us-east-1</td>
                    <td class="deployed-by">j.smith@company.com</td>
                    <td class="duration">2m 18s</td>
                    <td class="timestamp">2023-10-15 14:22:31</td>
                </tr>
                <tr class="selected">
                    <td>
                        <div class="status">
                            <span class="status-indicator status-success"></span>
                            <span class="status-text">Success</span>
                        </div>
                    </td>
                    <td class="service-name">user-service</td>
                    <td class="region">eu-west-2</td>
                    <td class="deployed-by">a.jones@company.com</td>
                    <td class="duration">3m 42s</td>
                    <td class="timestamp">2023-10-15 13:58:12</td>
                </tr>
                <tr>
                    <td>
                        <div class="status">
                            <span class="status-indicator status-failed"></span>
                            <span class="status-text">Failed</span>
                        </div>
                    </td>
                    <td class="service-name">payment-processor</td>
                    <td class="region">ap-southeast-1</td>
                    <td class="deployed-by">m.wilson@company.com</td>
                    <td class="duration">5m 11s</td>
                    <td class="timestamp">2023-10-15 13:45:07</td>
                </tr>
                <tr>
                    <td>
                        <div class="status">
                            <span class="status-indicator status-pending"></span>
                            <span class="status-text">Pending</span>
                        </div>
                    </td>
                    <td class="service-name">auth-service</td>
                    <td class="region">us-west-2</td>
                    <td class="deployed-by">j.doe@company.com</td>
                    <td class="duration">-</td>
                    <td class="timestamp">2023-10-15 13:30:45</td>
                </tr>
                <tr>
                    <td>
                        <div class="status">
                            <span class="status-indicator status-success"></span>
                            <span class="status-text">Success</span>
                        </div>
                    </td>
                    <td class="service-name">search-index</td>
                    <td class="region">eu-central-1</td>
                    <td class="deployed-by">r.patel@company.com</td>
                    <td class="duration">1m 56s</td>
                    <td class="timestamp">2023-10-15 13:12:23</td>
                </tr>
                <tr>
                    <td>
                        <div class="status">
                            <span class="status-indicator status-success"></span>
                            <span class="status-text">Success</span>
                        </div>
                    </td>
                    <td class="service-name">notification-svc</td>
                    <td class="region">us-east-1</td>
                    <td class="deployed-by">j.smith@company.com</td>
                    <td class="duration">2m 34s</td>
                    <td class="timestamp">2023-10-15 12:45:18</td>
                </tr>
                <tr>
                    <td>
                        <div class="status">
                            <span class="status-indicator status-failed"></span>
                            <span class="status-text">Failed</span>
                        </div>
                    </td>
                    <td class="service-name">reporting-engine</td>
                    <td class="region">ap-northeast-1</td>
                    <td class="deployed-by">m.wilson@company.com</td>
                    <td class="duration">4m 22s</td>
                    <td class="timestamp">2023-10-15 12:30:01</td>
                </tr>
                <tr>
                    <td>
                        <div class="status">
                            <span class="status-indicator status-success"></span>
                            <span class="status-text">Success</span>
                        </div>
                    </td>
                    <td class="service-name">cache-layer</td>
                    <td class="region">us-west-1</td>
                    <td class="deployed-by">a.jones@company.com</td>
                    <td class="duration">1m 43s</td>
                    <td class="timestamp">2023-10-15 12:15:33</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>
```

request envelope — prompt redacted

{
  "model": "alibaba/qwen-3-235b",
  "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": "dfb92529-6711-4845-b6bc-0818572a0de8"
}