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>
        body {
            font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
            margin: 20px;
            background-color: #f5f6f7;
            color: #333;
        }
        .table-container {
            background-color: white;
            border-radius: 4px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.16);
            overflow: hidden;
            max-width: 1200px;
            margin: 0 auto;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            font-size: 14px;
        }
        th {
            text-align: left;
            padding: 12px 16px;
            font-weight: 500;
            color: #555;
            background-color: #f9f9f9;
            border-bottom: 1px solid #e0e0e0;
            cursor: pointer;
            user-select: none;
        }
        th:hover {
            background-color: #edf0f4;
        }
        th.sortable::after {
            content: " ↵";
            opacity: 0.3;
        }
        th.sortable:hover::after {
            opacity: 0.8;
        }
        th.sorted-asc::after {
            content: " ↑";
            opacity: 1;
        }
        th.sorted-desc::after {
            content: " ↓";
            opacity: 1;
        }
        td {
            padding: 12px 16px;
            border-bottom: 1px solid #eee;
        }
        tr:hover {
            background-color: #f5f7fa;
        }
        tr.selected {
            background-color: #e8f0fe;
            border-left: 3px solid #1967d2;
        }
        .status {
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .status-circle {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            flex-shrink: 0;
        }
        .status-success .status-circle {
            background-color: #0b8043;
        }
        .status-failed .status-circle {
            background-color: #d93025;
        }
        .status-pending .status-circle {
            background-color: #f9ab00;
        }
        .status-text {
            font-size: 12px;
        }
        .service-name {
            font-family: monospace;
            font-size: 13px;
            color: #1b61ab;
        }
        .region {
            font-size: 13px;
            color: #5f6368;
        }
        .duration {
            font-family: monospace;
            color: #5f6368;
        }
        .timestamp {
            color: #5f6368;
            font-size: 13px;
        }
    </style>
</head>
<body>
    <div class="table-container">
        <table>
            <thead>
                <tr>
                    <th>Status</th>
                    <th class="sortable sorted-asc">Service Name</th>
                    <th class="sortable">Region</th>
                    <th class="sortable">Deployed By</th>
                    <th class="sortable">Duration</th>
                    <th class="sortable">Timestamp</th>
                </tr>
            </thead>
            <tbody>
                <tr class="selected">
                    <td class="status">
                        <div class="status-circle"></div>
                        <span class="status-text">Success</span>
                    </div>
                    </td>
                    <td class="service-name">api-gateway-v2</td>
                    <td class="region">us-east-1</td>
                    <td>j.smith@company.com</td>
                    <td class="duration">2m 18s</td>
                    <td class="timestamp">2023-10-15 08:42:11</td>
                </tr>
                <tr>
                    <td class="status status-failed">
                        <div class="status-circle"></div>
                        <span class="status-text">Failed</span>
                    </td>
                    <td class="service-name">data-processor-batch</td>
                    <td class="region">eu-west-2</td>
                    <td>m.johnson@company.com</td>
                    <td class="duration">4m 03s</td>
                    <td class="timestamp">2023-10-15 08:39:22</td>
                </tr>
                <tr class="hover">
                    <td class="status status-pending">
                        <div class="status-circle"></div>
                        <span class="status-text">Pending</span>
                    </td>
                    <td class="service-name">cache-cluster-redis</td>
                    <td class="region">us-west-2</td>
                    <td>r.davis@company.com</td>
                    <td class="duration">-</td>
                    <td class="timestamp">2023-10-15 08:38:45</td>
                </tr>
                <tr>
                    <td class="status status-success">
                        <div class="status-circle"></div>
                        <span class="status-text">Success</span>
                    </td>
                    <td class="service-name">auth-service-v4</td>
                    <td class="region">ap-southeast-1</td>
                    <td>j.wilson@company.com</td>
                    <td class="duration">1m 42s</td>
                    <td class="timestamp">2023-10-15 08:35:11</td>
                </tr>
                <tr>
                    <td class="status status-success">
                        <div class="status-circle"></div>
                        <span class="status-text">Success</span>
                    </td>
                    <td class="service-name">file-storage-s3</td>
                    <td class="region">us-east-1</td>
                    <td>m.johnson@company.com</td>
                    <td class="duration">3m 11s</td>
                    <td class="timestamp">2023-10-15 08:32:07</td>
                </tr>
                <tr>
                    <td class="status status-success">
                        <div class="status-circle"></div>
                        <span class="status-text">Success</span>
                    </td>
                    <td class="service-name">notification-service</td>
                    <td class="region">eu-central-1</td>
                    <td>r.davis@company.com</td>
                    <td class="duration">2m 01s</td>
                    <td class="timestamp">2023-10-15 08:29:44</td>
                </tr>
                <tr>
                    <td class="status status-failed">
                        <div class="status-circle"></div>
                        <span class="status-text">Failed</span>
                    </td>
                    <td class="service-name">analytics-worker</td>
                    <td class="region">us-west-1</td>
                    <td>j.smith@company.com</td>
                    <td class="duration">5m 22s</td>
                    <td class="timestamp">2023-10-15 08:25:12</td>
                </tr>
                <tr>
                    <td class="status status-success">
                        <div class="status-circle"></div>
                        <span class="status-text">Success</span>
                    </td>
                    <td class="service-name">backup-utility</td>
                    <td class="region">ap-northeast-1</td>
                    <td>j.wilson@company.com</td>
                    <td class="duration">4m 37s</td>
                    <td class="timestamp">2023-10-15 08:20:03</td>
                </tr>
            </tbody>
        </table>
    </div>

    <script>
        // Add hover effect for demonstration purposes
        document.querySelector('tr.hover').addEventListener('mouseover', function() {});
        // CSS :hover handles the visual effect
    </script>
</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"
}