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">
    <title>Server Deployment Records</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        }

        body {
            background-color: #f1f3f5;
            color: #212529;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            padding: 24px;
        }

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

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

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

        .table-meta {
            font-size: 12px;
            color: #6c757d;
        }

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

        th {
            background-color: #f8f9fa;
            color: #495057;
            font-weight: 600;
            padding: 10px 16px;
            border-bottom: 2px solid #dee2e6;
            user-select: none;
            white-space: nowrap;
        }

        th.sortable {
            cursor: pointer;
        }

        th.sortable:hover {
            color: #212529;
            background-color: #f1f3f5;
        }

        th.sorted {
            color: #212529;
        }

        .sort-icon {
            display: inline-block;
            margin-left: 4px;
            font-size: 10px;
            vertical-align: middle;
            color: #adb5bd;
        }

        th.sorted .sort-icon {
            color: #212529;
        }

        td {
            padding: 10px 16px;
            border-bottom: 1px solid #e9ecef;
            color: #495057;
            white-space: nowrap;
        }

        /* Row States */
        tbody tr {
            transition: background-color 0.1s ease;
        }

        tbody tr:hover td {
            background-color: #f8f9fa;
            color: #212529;
        }

        tbody tr.selected td {
            background-color: #e7f5ff;
            border-bottom-color: #bbe4ff;
            color: #1864ab;
        }
        
        tbody tr.selected:hover td {
            background-color: #d0ebff;
        }

        /* Column Specifics */
        .col-status {
            width: 130px;
        }

        .col-service {
            font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
            font-weight: 500;
            color: #212529;
        }

        .col-region {
            color: #6c757d;
        }

        .col-duration, .col-time {
            font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
            font-size: 12px;
            color: #6c757d;
        }

        /* Status Badge Component */
        .status-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 12px;
            font-weight: 500;
        }

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

        /* Status Variants */
        .status-success .status-icon {
            background-color: #2b8a3e;
            box-shadow: 0 0 0 2px #dce7dc;
        }
        .status-success span:last-child {
            color: #2b8a3e;
        }

        .status-failed .status-icon {
            background-color: #c92a2a;
            box-shadow: 0 0 0 2px #f9dede;
        }
        .status-failed span:last-child {
            color: #c92a2a;
        }

        .status-in-progress .status-icon {
            background-color: #f59f00;
            box-shadow: 0 0 0 2px #fff3d6;
        }
        .status-in-progress span:last-child {
            color: #e67700;
        }

        .status-rolled-back .status-icon {
            background-color: #868e96;
            box-shadow: 0 0 0 2px #e9ecef;
        }
        .status-rolled-back span:last-child {
            color: #495057;
        }

        .table-footer {
            padding: 12px 20px;
            background-color: #f8f9fa;
            border-top: 1px solid #e9ecef;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 12px;
            color: #6c757d;
        }
    </style>
</head>
<body>

<div class="table-container">
    <div class="table-header-bar">
        <div class="table-title">Server Deployments</div>
        <div class="table-meta">Environment: <strong>Production-US-East</strong></div>
    </div>

    <table>
        <thead>
            <tr>
                <th class="col-status sortable">Status</th>
                <th class="col-service sortable sorted">Service Name <span class="sort-icon">▲</span></th>
                <th class="col-region sortable">Region</th>
                <th class="sortable">Deployed By</th>
                <th class="col-duration sortable">Duration</th>
                <th class="col-time sortable">Timestamp</th>
            </tr>
        </thead>
        <tbody>
            <!-- Row 1: Normal -->
            <tr>
                <td>
                    <div class="status-badge status-success">
                        <span class="status-icon"></span>
                        <span>Success</span>
                    </div>
                </td>
                <td class="col-service">auth-service</td>
                <td class="col-region">us-east-1</td>
                <td>m.chen</td>
                <td class="col-duration">42s</td>
                <td class="col-time">2023-10-24 14:22:01</td>
            </tr>

            <!-- Row 2: Hovered (Simulated via class for static requirement) -->
            <tr style="background-color: #f8f9fa;">
                <td>
                    <div class="status-badge status-success">
                        <span class="status-icon"></span>
                        <span>Success</span>
                    </div>
                </td>
                <td class="col-service">billing-api</td>
                <td class="col-region">us-west-2</td>
                <td>s.patel</td>
                <td class="col-duration">1m 15s</td>
                <td class="col-time">2023-10-24 14:18:45</td>
            </tr>

            <!-- Row 3: Normal -->
            <tr>
                <td>
                    <div class="status-badge status-in-progress">
                        <span class="status-icon"></span>
                        <span>In Progress</span>
                    </div>
                </td>
                <td class="col-service">cache-redis-node</td>
                <td class="col-region">eu-central-1</td>
                <td>a.kovalev</td>
                <td class="col-duration">3m 04s</td>
                <td class="col-time">2023-10-24 14:15.10</td>
            </tr>

            <!-- Row 4: SELECTED -->
            <tr class="selected">
                <td>
                    <div class="status-badge status-failed">
                        <span class="status-icon"></span>
                        <span>Failed</span>
                    </div>
                </td>
                <td class="col-service">data-ingestion-worker</td>
                <td class="col-region">us-east-2</td>
                <td>d.jenkins</td>
                <td class="col-duration">45s</td>
                <td class="col-time">2023-10-24 14:10:55</td>
            </tr>

            <!-- Row 5: Normal -->
            <tr>
                <td>
                    <div class="status-badge status-rolled-back">
                        <span class="status-icon"></span>
                        <span>Rolled Back</span>
                    </div>
                </td>
                <td class="col-service">notification-svc</td>
                <td class="col-region">ap-southeast-1</td>
                <td>l.wilson</td>
                <td class="col-duration">1m 50s</td>
                <td class="col-time">2023-10-24 13:55:20</td>
            </tr>

            <!-- Row 6: Normal -->
            <tr>
                <td>
                    <div class="status-badge status-success">
                        <span class="status-icon"></span>
                        <span>Success</span>
                    </div>
                </td>
                <td class="col-service">payment-gateway</td>
                <td class="col-region">us-east-1</td>
                <td>m.chen</td>
                <td class="col-duration">58s</td>
                <td class="col-time">2023-10-24 13:42:11</td>
            </tr>

            <!-- Row 7: Normal -->
            <tr>
                <td>
                    <div class="status-badge status-success">
                        <span class="status-icon"></span>
                        <span>Success</span>
                    </div>
                </td>
                <td class="col-service">search-index-api</td>
                <td class="col-region">eu-west-1</td>
                <td>k.johansson</td>
                <td class="col-duration">2m 12s</td>
                <td class="col-time">2023-10-24 13:30:04</td>
            </tr>

            <!-- Row 8: Normal -->
            <tr>
                <td>
                    <div class="status-badge status-success">
                        <span class="status-icon"></span>
                        <span>Success</span>
                    </div>
                </td>
                <td class="col-service">user-profile-svc</td>
                <td class="col-region">us-west-2</td>
                <td>s.patel</td>
                <td class="col-duration">31s</td>
                <td class="col-time">2023-10-24 13:15:50</td>
            </tr>
        </tbody>
    </table>

    <div class="table-footer">
        <div>Showing 8 of 148 deployment records</div>
        <div>Page 1 of 19</div>
    </div>
</div>

</body>
</html>
```

request envelope — prompt redacted

{
  "model": "google/gemini-3.5-flash-lite",
  "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": "8491f856-2274-4cba-9747-9c6bc0f0c4ae"
}