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>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background: #f5f5f5;
            padding: 40px;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            min-height: 100vh;
        }

        .container {
            background: white;
            border-radius: 8px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            max-width: 1200px;
            width: 100%;
        }

        .table-header {
            padding: 16px 20px;
            border-bottom: 1px solid #e0e0e0;
            background: #fafafa;
        }

        .table-title {
            font-size: 14px;
            font-weight: 600;
            color: #222;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            font-size: 13px;
            color: #333;
        }

        thead {
            background: #f9f9f9;
            border-bottom: 2px solid #e0e0e0;
        }

        th {
            padding: 12px 20px;
            text-align: left;
            font-weight: 600;
            color: #555;
            white-space: nowrap;
            user-select: none;
            cursor: pointer;
            transition: background-color 0.15s ease;
            position: relative;
        }

        th:hover {
            background-color: #f0f0f0;
        }

        th.sortable::after {
            content: '↕';
            margin-left: 6px;
            opacity: 0.3;
            font-size: 11px;
        }

        th.sorted-asc::after {
            content: '↑';
            opacity: 0.7;
            color: #0066cc;
        }

        th.sorted-desc::after {
            content: '↓';
            opacity: 0.7;
            color: #0066cc;
        }

        td {
            padding: 12px 20px;
            border-bottom: 1px solid #f0f0f0;
        }

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

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

        tbody tr.selected {
            background-color: #e3f2fd;
            border-left: 3px solid #0066cc;
            padding-left: 17px;
        }

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

        .status-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 4px 10px;
            border-radius: 3px;
            font-weight: 500;
            font-size: 12px;
            width: fit-content;
        }

        .status-active {
            background-color: #e8f5e9;
            color: #2e7d32;
            border: 1px solid #c8e6c9;
        }

        .status-active::before {
            content: '●';
            font-size: 8px;
        }

        .status-pending {
            background-color: #fff3e0;
            color: #e65100;
            border: 1px solid #ffe0b2;
        }

        .status-pending::before {
            content: '◐';
            font-size: 8px;
        }

        .status-failed {
            background-color: #ffebee;
            color: #c62828;
            border: 1px solid #ffcdd2;
        }

        .status-failed::before {
            content: '✕';
            font-size: 8px;
        }

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

        .region-badge {
            background-color: #f0f0f0;
            color: #555;
            padding: 2px 8px;
            border-radius: 2px;
            font-size: 12px;
            width: fit-content;
        }

        .deployed-by {
            color: #666;
        }

        .duration {
            font-family: 'Courier New', monospace;
            color: #555;
            text-align: right;
        }

        .timestamp {
            color: #999;
            font-size: 12px;
            white-space: nowrap;
            font-family: 'Courier New', monospace;
        }

        tr:last-child td {
            border-bottom: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="table-header">
            <div class="table-title">Server Deployments</div>
        </div>
        <table>
            <thead>
                <tr>
                    <th class="sortable">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>
                    <td><span class="status-badge status-active">Active</span></td>
                    <td class="service-name">api-gateway-v2</td>
                    <td><span class="region-badge">us-east-1</span></td>
                    <td class="deployed-by">alice@company.com</td>
                    <td class="duration">2m 34s</td>
                    <td class="timestamp">2024-01-15 14:32:18</td>
                </tr>
                <tr class="selected">
                    <td><span class="status-badge status-active">Active</span></td>
                    <td class="service-name">web-frontend</td>
                    <td><span class="region-badge">eu-west-1</span></td>
                    <td class="deployed-by">bob.martinez@company.com</td>
                    <td class="duration">1m 12s</td>
                    <td class="timestamp">2024-01-15 14:28:55</td>
                </tr>
                <tr>
                    <td><span class="status-badge status-pending">Pending</span></td>
                    <td class="service-name">data-processor</td>
                    <td><span class="region-badge">ap-southeast-1</span></td>
                    <td class="deployed-by">charlie.dev@company.com</td>
                    <td class="duration">45s</td>
                    <td class="timestamp">2024-01-15 14:27:32</td>
                </tr>
                <tr>
                    <td><span class="status-badge status-active">Active</span></td>
                    <td class="service-name">cache-service</td>
                    <td><span class="region-badge">us-west-2</span></td>
                    <td class="deployed-by">diana.ops@company.com</td>
                    <td class="duration">3m 08s</td>
                    <td class="timestamp">2024-01-15 14:15:22</td>
                </tr>
                <tr>
                    <td><span class="status-badge status-failed">Failed</span></td>
                    <td class="service-name">analytics-engine</td>
                    <td><span class="region-badge">eu-central-1</span></td>
                    <td class="deployed-by">eve.jenkins@company.com</td>
                    <td class="duration">5m 42s</td>
                    <td class="timestamp">2024-01-15 14:08:11</td>
                </tr>
                <tr>
                    <td><span class="status-badge status-active">Active</span></td>
                    <td class="service-name">auth-service</td>
                    <td><span class="region-badge">us-east-1</span></td>
                    <td class="deployed-by">frank.brown@company.com</td>
                    <td class="duration">1m 56s</td>
                    <td class="timestamp">2024-01-15 13:52:44</td>
                </tr>
                <tr>
                    <td><span class="status-badge status-active">Active</span></td>
                    <td class="service-name">notification-hub</td>
                    <td><span class="region-badge">ap-northeast-1</span></td>
                    <td class="deployed-by">grace.platform@company.com</td>
                    <td class="duration">2m 19s</td>
                    <td class="timestamp">2024-01-15 13:41:03</td>
                </tr>
                <tr>
                    <td><span class="status-badge status-pending">Pending</span></td>
                    <td class="service-name">search-index-v3</td>
                    <td><span class="region-badge">us-east-1</span></td>
                    <td class="deployed-by">henry.infra@company.com</td>
                    <td class="duration">8m 15s</td>
                    <td class="timestamp">2024-01-15 13:28:17</td>
                </tr>
            </tbody>
        </table>
    </div>

    <script>
        // Add hover effect interactivity
        const rows = document.querySelectorAll('tbody tr');
        
        rows.forEach(row => {
            row.addEventListener('click', () => {
                rows.forEach(r => r.classList.remove('selected'));
                row.classList.add('selected');
            });
        });

        // Add column header sorting state toggle
        const headers = document.querySelectorAll('th.sortable');
        headers.forEach((header, index) => {
            header.addEventListener('click', () => {
                headers.forEach(h => {
                    h.classList.remove('sorted-asc', 'sorted-desc');
                });
                
                if (index === 1) {
                    header.classList.add('sorted-asc');
                }
            });
        });
    </script>
</body>
</html>
```

request envelope — prompt redacted

{
  "model": "anthropic/claude-haiku-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": "189809da-2d08-4d08-bf2e-58338b3d0f1a"
}