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', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
            background-color: #f5f5f5;
            padding: 40px 20px;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            min-height: 100vh;
        }

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

        .table-header {
            padding: 16px 20px;
            border-bottom: 1px solid #e5e5e5;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .table-title {
            font-size: 14px;
            font-weight: 600;
            color: #1a1a1a;
        }

        .table-subtitle {
            font-size: 12px;
            color: #999;
            margin-top: 2px;
        }

        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;
            letter-spacing: 0.3px;
            white-space: nowrap;
        }

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

        .sort-indicator {
            display: inline-block;
            margin-left: 6px;
            font-size: 11px;
            opacity: 0;
            transition: opacity 0.2s;
        }

        th:hover .sort-indicator,
        th.sorted .sort-indicator {
            opacity: 1;
        }

        th.sorted {
            background-color: #f0f0f0;
            color: #333;
        }

        tbody tr {
            border-bottom: 1px solid #f0f0f0;
            transition: background-color 0.15s;
        }

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

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

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

        td {
            padding: 12px 20px;
            vertical-align: middle;
        }

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

        .status-icon {
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            flex-shrink: 0;
        }

        .status-success {
            background-color: #ecfdf5;
            color: #065f46;
        }

        .status-success .status-icon {
            background-color: #10b981;
        }

        .status-warning {
            background-color: #fffbeb;
            color: #92400e;
        }

        .status-warning .status-icon {
            background-color: #f59e0b;
        }

        .status-error {
            background-color: #fef2f2;
            color: #991b1b;
        }

        .status-error .status-icon {
            background-color: #ef4444;
        }

        .status-pending {
            background-color: #f0f9ff;
            color: #0c4a6e;
        }

        .status-pending .status-icon {
            background-color: #3b82f6;
        }

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

        .region {
            color: #666;
        }

        .deployed-by {
            color: #666;
        }

        .duration {
            color: #999;
            font-family: 'Monaco', 'Courier New', monospace;
            font-size: 12px;
        }

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

        .table-footer {
            padding: 12px 20px;
            border-top: 1px solid #e5e5e5;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 12px;
            color: #999;
            background-color: #f9f9f9;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="table-header">
            <div>
                <div class="table-title">Deployment Records</div>
                <div class="table-subtitle">8 total deployments</div>
            </div>
        </div>

        <table>
            <thead>
                <tr>
                    <th class="sorted">
                        Status
                        <span class="sort-indicator">↓</span>
                    </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>
                        <div class="status-badge status-success">
                            <span class="status-icon"></span>
                            <span>Active</span>
                        </div>
                    </td>
                    <td class="service-name">api-gateway-prod</td>
                    <td class="region">us-east-1</td>
                    <td class="deployed-by">alice.chen</td>
                    <td class="duration">2m 34s</td>
                    <td class="timestamp">2024-01-15 14:32:10</td>
                </tr>
                <tr>
                    <td>
                        <div class="status-badge status-success">
                            <span class="status-icon"></span>
                            <span>Active</span>
                        </div>
                    </td>
                    <td class="service-name">web-frontend</td>
                    <td class="region">eu-west-1</td>
                    <td class="deployed-by">marcus.lopez</td>
                    <td class="duration">1m 58s</td>
                    <td class="timestamp">2024-01-15 13:45:22</td>
                </tr>
                <tr class="hovered">
                    <td>
                        <div class="status-badge status-warning">
                            <span class="status-icon"></span>
                            <span>Degraded</span>
                        </div>
                    </td>
                    <td class="service-name">cache-service</td>
                    <td class="region">ap-south-1</td>
                    <td class="deployed-by">priya.sharma</td>
                    <td class="duration">5m 12s</td>
                    <td class="timestamp">2024-01-15 12:18:45</td>
                </tr>
                <tr>
                    <td>
                        <div class="status-badge status-success">
                            <span class="status-icon"></span>
                            <span>Active</span>
                        </div>
                    </td>
                    <td class="service-name">database-primary</td>
                    <td class="region">us-west-2</td>
                    <td class="deployed-by">james.wilson</td>
                    <td class="duration">8m 47s</td>
                    <td class="timestamp">2024-01-15 11:23:33</td>
                </tr>
                <tr>
                    <td>
                        <div class="status-badge status-success">
                            <span class="status-icon"></span>
                            <span>Active</span>
                        </div>
                    </td>
                    <td class="service-name">auth-service</td>
                    <td class="region">us-east-1</td>
                    <td class="deployed-by">sarah.kim</td>
                    <td class="duration">3m 15s</td>
                    <td class="timestamp">2024-01-15 10:54:12</td>
                </tr>
                <tr>
                    <td>
                        <div class="status-badge status-pending">
                            <span class="status-icon"></span>
                            <span>Pending</span>
                        </div>
                    </td>
                    <td class="service-name">worker-queue</td>
                    <td class="region">eu-central-1</td>
                    <td class="deployed-by">david.mueller</td>
                    <td class="duration">—</td>
                    <td class="timestamp">2024-01-15 10:12:08</td>
                </tr>
                <tr>
                    <td>
                        <div class="status-badge status-success">
                            <span class="status-icon"></span>
                            <span>Active</span>
                        </div>
                    </td>
                    <td class="service-name">analytics-pipeline</td>
                    <td class="region">us-east-1</td>
                    <td class="deployed-by">emma.rodriguez</td>
                    <td class="duration">4m 22s</td>
                    <td class="timestamp">2024-01-15 09:37:50</td>
                </tr>
                <tr>
                    <td>
                        <div class="status-badge status-error">
                            <span class="status-icon"></span>
                            <span>Failed</span>
                        </div>
                    </td>
                    <td class="service-name">notification-service</td>
                    <td class="region">ap-northeast-1</td>
                    <td class="deployed-by">sophia.patel</td>
                    <td class="duration">6m 05s</td>
                    <td class="timestamp">2024-01-15 08:42:19</td>
                </tr>
            </tbody>
        </table>

        <div class="table-footer">
            <div>8 of 8 records displayed</div>
            <div>Last updated: 2024-01-15 14:32:10</div>
        </div>
    </div>

    <script>
        // Add hover effect to demonstrate state
        const rows = document.querySelectorAll('tbody tr');
        rows.forEach((row, index) => {
            if (index === 2) {
                row.style.backgroundColor = '#f8f8f8';
            }
        });

        // Make table interactive
        document.addEventListener('DOMContentLoaded', function() {
            rows.forEach(row => {
                row.addEventListener('click', function() {
                    rows.forEach(r => r.classList.remove('selected'));
                    this.classList.add('selected');
                });
            });
        });
    </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"
}