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 Table</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-color: #f5f5f5;
            padding: 40px 20px;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            min-height: 100vh;
        }

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

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

        .table-header h2 {
            font-size: 16px;
            font-weight: 600;
            color: #1a1a1a;
        }

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

        thead {
            background-color: #f9f9f9;
            border-bottom: 1px solid #e5e5e5;
        }

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

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

        th.sortable-active {
            color: #1a1a1a;
            background-color: #efefef;
        }

        th.sortable-active::after {
            content: ' ↑';
            font-size: 11px;
            margin-left: 6px;
            opacity: 0.8;
        }

        th.sortable-active.desc::after {
            content: ' ↓';
        }

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

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

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

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

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

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

        .status-badge::before {
            content: '';
            display: inline-block;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            flex-shrink: 0;
        }

        .status-success {
            background-color: #e6f9f0;
            color: #0d7e52;
        }

        .status-success::before {
            background-color: #0d7e52;
        }

        .status-warning {
            background-color: #fef3e6;
            color: #8b5900;
        }

        .status-warning::before {
            background-color: #8b5900;
        }

        .status-error {
            background-color: #ffe6e6;
            color: #c41c1c;
        }

        .status-error::before {
            background-color: #c41c1c;
        }

        .status-pending {
            background-color: #e6e6ff;
            color: #4040cc;
        }

        .status-pending::before {
            background-color: #4040cc;
        }

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

        .region {
            color: #666;
            font-size: 12px;
        }

        .timestamp {
            color: #999;
            font-size: 12px;
            white-space: nowrap;
        }

        .duration {
            font-variant-numeric: tabular-nums;
            color: #666;
        }

        tbody tr:last-child td {
            border-bottom: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="table-header">
            <h2>Server Deployments</h2>
        </div>
        <table>
            <thead>
                <tr>
                    <th class="sortable-active">Status</th>
                    <th>Service Name</th>
                    <th>Region</th>
                    <th>Deployed By</th>
                    <th>Duration</th>
                    <th>Timestamp</th>
                </tr>
            </thead>
            <tbody>
                <tr class="selected">
                    <td><span class="status-badge status-success">● Active</span></td>
                    <td class="service-name">api-gateway-prod</td>
                    <td class="region">us-east-1</td>
                    <td>Alice Chen</td>
                    <td class="duration">2m 34s</td>
                    <td class="timestamp">2024-01-15 14:23:07</td>
                </tr>
                <tr>
                    <td><span class="status-badge status-success">● Active</span></td>
                    <td class="service-name">web-frontend-v2</td>
                    <td class="region">eu-west-1</td>
                    <td>James Wu</td>
                    <td class="duration">1m 12s</td>
                    <td class="timestamp">2024-01-15 13:45:22</td>
                </tr>
                <tr>
                    <td><span class="status-badge status-warning">● Degraded</span></td>
                    <td class="service-name">db-replica-03</td>
                    <td class="region">ap-southeast-2</td>
                    <td>Sarah Kim</td>
                    <td class="duration">5m 18s</td>
                    <td class="timestamp">2024-01-15 13:22:45</td>
                </tr>
                <tr>
                    <td><span class="status-badge status-error">● Failed</span></td>
                    <td class="service-name">worker-queue-beta</td>
                    <td class="region">us-west-2</td>
                    <td>Marcus Johnson</td>
                    <td class="duration">3m 55s</td>
                    <td class="timestamp">2024-01-15 12:58:11</td>
                </tr>
                <tr>
                    <td><span class="status-badge status-success">● Active</span></td>
                    <td class="service-name">cache-cluster-main</td>
                    <td class="region">us-east-1</td>
                    <td>Elena Rodriguez</td>
                    <td class="duration">45s</td>
                    <td class="timestamp">2024-01-15 11:34:56</td>
                </tr>
                <tr>
                    <td><span class="status-badge status-pending">● Pending</span></td>
                    <td class="service-name">analytics-pipeline-v3</td>
                    <td class="region">eu-central-1</td>
                    <td>David Park</td>
                    <td class="duration">0s</td>
                    <td class="timestamp">2024-01-15 10:12:33</td>
                </tr>
                <tr>
                    <td><span class="status-badge status-success">● Active</span></td>
                    <td class="service-name">storage-sync-service</td>
                    <td class="region">ap-northeast-1</td>
                    <td>Lisa Zhang</td>
                    <td class="duration">7m 42s</td>
                    <td class="timestamp">2024-01-15 09:47:18</td>
                </tr>
                <tr>
                    <td><span class="status-badge status-success">● Active</span></td>
                    <td class="service-name">notification-broker</td>
                    <td class="region">us-east-1</td>
                    <td>Robert Chen</td>
                    <td class="duration">2m 06s</td>
                    <td class="timestamp">2024-01-15 08:19:42</td>
                </tr>
            </tbody>
        </table>
    </div>

    <script>
        // Handle row selection
        const rows = document.querySelectorAll('tbody tr');
        rows.forEach((row, index) => {
            row.addEventListener('click', function() {
                rows.forEach(r => r.classList.remove('selected'));
                this.classList.add('selected');
            });
        });

        // Handle column header sorting
        const headers = document.querySelectorAll('thead th');
        headers.forEach((header, index) => {
            header.addEventListener('click', function() {
                // Remove active state from all headers
                headers.forEach(h => h.classList.remove('sortable-active', 'desc'));
                
                // Add active state to clicked header
                this.classList.add('sortable-active');
                
                // Toggle sort direction (for demo purposes, just show visual state)
                if (this.classList.contains('desc')) {
                    this.classList.remove('desc');
                } else {
                    this.classList.add('desc');
                }
            });
        });

        // Hover effect is handled by CSS, but this demonstrates the row is interactive
        rows.forEach(row => {
            row.addEventListener('mouseenter', function() {
                // Visual feedback is provided by CSS
            });
        });
    </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"
}