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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Deployment Records</title>
    <style>
        :root {
            --bg-neutral: #e5e7eb;
            --tbl-bg: #ffffff;
            --tbl-border: #e4e4e7;
            --th-bg: #f8fafc;
            --th-text: #64748b;
            --th-hover: #f1f5f9;
            --td-text: #334155;
            --td-text-subtle: #64748b;
            --td-border: #f1f5f9;
            
            --row-hover-bg: #f8fafc;
            --row-selected-bg: #eff6ff;
            --row-selected-border: #bfdbfe;
            --row-selected-accent: #3b82f6;

            --status-success-bg: #ecfdf5;
            --status-success-text: #065f46;
            --status-success-icon: #10b981;
            
            --status-failed-bg: #fef2f2;
            --status-failed-text: #991b1b;
            --status-failed-icon: #ef4444;
            
            --status-running-bg: #fffbeb;
            --status-running-text: #92400e;
            --status-running-icon: #f59e0b;

            --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
        }

        *, *::before, *::after {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            padding: 64px;
            background-color: var(--bg-neutral);
            font-family: var(--font-family);
            display: flex;
            justify-content: center;
            align-items: flex-start;
            min-height: 100vh;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        .table-container {
            width: 100%;
            max-width: 1060px;
            background-color: var(--tbl-bg);
            border: 1px solid var(--tbl-border);
            border-radius: 8px;
            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }

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

        th {
            background-color: var(--th-bg);
            color: var(--th-text);
            font-weight: 500;
            padding: 10px 16px;
            border-bottom: 1px solid var(--tbl-border);
            white-space: nowrap;
            user-select: none;
            transition: background-color 0.15s ease;
        }

        th.sortable {
            cursor: pointer;
        }

        th.sortable:hover {
            background-color: var(--th-hover);
        }

        .th-content {
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .sort-icon {
            width: 14px;
            height: 14px;
            color: #94a3b8;
        }

        th.sorted-desc {
            color: #0f172a;
            font-weight: 600;
        }

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

        td {
            padding: 12px 16px;
            color: var(--td-text);
            border-bottom: 1px solid var(--td-border);
            white-space: nowrap;
        }

        tr:last-child td {
            border-bottom: none;
        }

        /* Column Specific Styling */
        .col-checkbox { width: 44px; padding-right: 8px; }
        .col-status { width: 130px; }
        .col-service { font-weight: 500; color: #0f172a; }
        .col-region { color: var(--td-text-subtle); }
        .col-user { color: var(--td-text-subtle); }
        .col-duration { text-align: right; font-variant-numeric: tabular-nums; }
        .col-timestamp { text-align: right; color: var(--td-text-subtle); font-variant-numeric: tabular-nums; }

        th.col-duration, th.col-timestamp {
            text-align: right;
        }
        
        th.col-duration .th-content, th.col-timestamp .th-content {
            flex-direction: row-reverse; /* Put icon on left for right-aligned headers */
        }

        /* Row States */
        tr.hovered td {
            background-color: var(--row-hover-bg);
        }

        tr.selected td {
            background-color: var(--row-selected-bg);
            border-bottom-color: var(--row-selected-border);
        }

        tr.selected td:first-child {
            position: relative;
        }

        tr.selected td:first-child::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 2px;
            background-color: var(--row-selected-accent);
        }

        /* Custom Checkbox */
        .checkbox-wrapper {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .checkbox {
            width: 16px;
            height: 16px;
            border: 1px solid #cbd5e1;
            border-radius: 4px;
            background-color: #ffffff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            box-shadow: inset 0 1px 2px rgba(0,0,0,0.02);
        }

        .checkbox.checked {
            background-color: var(--row-selected-accent);
            border-color: var(--row-selected-accent);
        }

        .checkbox.checked::after {
            content: '';
            width: 4px;
            height: 8px;
            border: 2px solid white;
            border-top: 0;
            border-left: 0;
            transform: rotate(45deg) translate(-1px, -1px);
        }

        /* Status Badges */
        .status-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 600;
            letter-spacing: 0.02em;
        }

        .status-icon {
            width: 14px;
            height: 14px;
        }

        .status-success {
            background-color: var(--status-success-bg);
            color: var(--status-success-text);
        }
        .status-success .status-icon { color: var(--status-success-icon); }

        .status-failed {
            background-color: var(--status-failed-bg);
            color: var(--status-failed-text);
        }
        .status-failed .status-icon { color: var(--status-failed-icon); }

        .status-running {
            background-color: var(--status-running-bg);
            color: var(--status-running-text);
        }
        .status-running .status-icon { color: var(--status-running-icon); }

    </style>
</head>
<body>

    <div class="table-container">
        <table>
            <thead>
                <tr>
                    <th class="col-checkbox">
                        <div class="checkbox-wrapper">
                            <div class="checkbox" aria-label="Select all rows"></div>
                        </div>
                    </th>
                    <th class="col-status sortable">
                        <div class="th-content">
                            Status
                            <svg class="sort-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 3a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L10 4.852 7.3 7.76a.75.75 0 01-1.1-1.02l3.25-3.5A.75.75 0 0110 3zm-3.76 9.2a.75.75 0 011.06.04l2.7 2.908 2.7-2.908a.75.75 0 111.1 1.02l-3.25 3.5a.75.75 0 01-1.1 0l-3.25-3.5a.75.75 0 01.04-1.06z" clip-rule="evenodd" /></svg>
                        </div>
                    </th>
                    <th class="sortable">
                        <div class="th-content">
                            Service Name
                            <svg class="sort-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 3a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L10 4.852 7.3 7.76a.75.75 0 01-1.1-1.02l3.25-3.5A.75.75 0 0110 3zm-3.76 9.2a.75.75 0 011.06.04l2.7 2.908 2.7-2.908a.75.75 0 111.1 1.02l-3.25 3.5a.75.75 0 01-1.1 0l-3.25-3.5a.75.75 0 01.04-1.06z" clip-rule="evenodd" /></svg>
                        </div>
                    </th>
                    <th class="sortable">
                        <div class="th-content">
                            Region
                            <svg class="sort-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 3a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L10 4.852 7.3 7.76a.75.75 0 01-1.1-1.02l3.25-3.5A.75.75 0 0110 3zm-3.76 9.2a.75.75 0 011.06.04l2.7 2.908 2.7-2.908a.75.75 0 111.1 1.02l-3.25 3.5a.75.75 0 01-1.1 0l-3.25-3.5a.75.75 0 01.04-1.06z" clip-rule="evenodd" /></svg>
                        </div>
                    </th>
                    <th class="sortable">
                        <div class="th-content">
                            Deployed By
                            <svg class="sort-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 3a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L10 4.852 7.3 7.76a.75.75 0 01-1.1-1.02l3.25-3.5A.75.75 0 0110 3zm-3.76 9.2a.75.75 0 011.06.04l2.7 2.908 2.7-2.908a.75.75 0 111.1 1.02l-3.25 3.5a.75.75 0 01-1.1 0l-3.25-3.5a.75.75 0 01.04-1.06z" clip-rule="evenodd" /></svg>
                        </div>
                    </th>
                    <th class="col-duration sortable">
                        <div class="th-content">
                            Duration
                            <svg class="sort-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 3a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L10 4.852 7.3 7.76a.75.75 0 01-1.1-1.02l3.25-3.5A.75.75 0 0110 3zm-3.76 9.2a.75.75 0 011.06.04l2.7 2.908 2.7-2.908a.75.75 0 111.1 1.02l-3.25 3.5a.75.75 0 01-1.1 0l-3.25-3.5a.75.75 0 01.04-1.06z" clip-rule="evenodd" /></svg>
                        </div>
                    </th>
                    <th class="col-timestamp sortable sorted-desc">
                        <div class="th-content">
                            Timestamp
                            <svg class="sort-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" /></svg>
                        </div>
                    </th>
                </tr>
            </thead>
            <tbody>
                <!-- Row 1 (Selected) -->
                <tr class="selected">
                    <td class="col-checkbox">
                        <div class="checkbox-wrapper">
                            <div class="checkbox checked" aria-label="Deselect row"></div>
                        </div>
                    </td>
                    <td class="col-status">
                        <span class="status-badge status-success">
                            <svg class="status-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" /></svg>
                            Success
                        </span>
                    </td>
                    <td class="col-service">payment-processor-v3</td>
                    <td class="col-region">eu-west-1</td>
                    <td class="col-user">ci-automation-bot</td>
                    <td class="col-duration">45s</td>
                    <td class="col-timestamp">2023-10-27 14:32:01</td>
                </tr>

                <!-- Row 2 -->
                <tr>
                    <td class="col-checkbox">
                        <div class="checkbox-wrapper"><div class="checkbox"></div></div>
                    </td>
                    <td class="col-status">
                        <span class="status-badge status-success">
                            <svg class="status-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" /></svg>
                            Success
                        </span>
                    </td>
                    <td class="col-service">auth-gateway</td>
                    <td class="col-region">us-east-1</td>
                    <td class="col-user">sarah.connor@acme.inc</td>
                    <td class="col-duration">1m 12s</td>
                    <td class="col-timestamp">2023-10-27 14:15:40</td>
                </tr>

                <!-- Row 3 (Hovered) -->
                <tr class="hovered">
                    <td class="col-checkbox">
                        <div class="checkbox-wrapper"><div class="checkbox"></div></div>
                    </td>
                    <td class="col-status">
                        <span class="status-badge status-failed">
                            <svg class="status-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd" /></svg>
                            Failed
                        </span>
                    </td>
                    <td class="col-service">inventory-db-migrate</td>
                    <td class="col-region">ap-southeast-2</td>
                    <td class="col-user">david.miller@acme.inc</td>
                    <td class="col-duration">3m 05s</td>
                    <td class="col-timestamp">2023-10-27 13:55:12</td>
                </tr>

                <!-- Row 4 -->
                <tr>
                    <td class="col-checkbox">
                        <div class="checkbox-wrapper"><div class="checkbox"></div></div>
                    </td>
                    <td class="col-status">
                        <span class="status-badge status-running">
                            <svg class="status-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M15.312 11.424a5.5 5.5 0 01-9.201 2.466l-.312-.311h2.433a.75.75 0 000-1.5H3.989a.75.75 0 00-.75.75v4.242a.75.75 0 001.5 0v-2.43l.31.31a7 7 0 0011.712-3.138.75.75 0 00-1.449-.39zm1.23-3.723a.75.75 0 00.219-.53V2.929a.75.75 0 00-1.5 0V5.36l-.31-.31A7 7 0 003.239 8.188a.75.75 0 101.448.389A5.5 5.5 0 0113.89 6.11l.311.31h-2.432a.75.75 0 000 1.5h4.243a.75.75 0 00.53-.219z" clip-rule="evenodd" /></svg>
                            Running
                        </span>
                    </td>
                    <td class="col-service">search-indexer-cluster</td>
                    <td class="col-region">us-west-2</td>
                    <td class="col-user">ci-automation-bot</td>
                    <td class="col-duration">2m 10s</td>
                    <td class="col-timestamp">2023-10-27 13:40:00</td>
                </tr>

                <!-- Row 5 -->
                <tr>
                    <td class="col-checkbox">
                        <div class="checkbox-wrapper"><div class="checkbox"></div></div>
                    </td>
                    <td class="col-status">
                        <span class="status-badge status-success">
                            <svg class="status-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" /></svg>
                            Success
                        </span>
                    </td>
                    <td class="col-service">notification-worker</td>
                    <td class="col-region">eu-central-1</td>
                    <td class="col-user">emily.chen@acme.inc</td>
                    <td class="col-duration">18s</td>
                    <td class="col-timestamp">2023-10-27 11:20:55</td>
                </tr>

                <!-- Row 6 -->
                <tr>
                    <td class="col-checkbox">
                        <div class="checkbox-wrapper"><div class="checkbox"></div></div>
                    </td>
                    <td class="col-status">
                        <span class="status-badge status-success">
                            <svg class="status-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" /></svg>
                            Success
                        </span>
                    </td>
                    <td class="col-service">user-profile-api</td>
                    <td class="col-region">us-east-2</td>
                    <td class="col-user">ci-automation-bot</td>
                    <td class="col-duration">54s</td>
                    <td class="col-timestamp">2023-10-27 09:10:01</td>
                </tr>

                <!-- Row 7 -->
                <tr>
                    <td class="col-checkbox">
                        <div class="checkbox-wrapper"><div class="checkbox"></div></div>
                    </td>
                    <td class="col-status">
                        <span class="status-badge status-failed">
                            <svg class="status-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd" /></svg>
                            Failed
                        </span>
                    </td>
                    <td class="col-service">billing-export-job</td>
                    <td class="col-region">us-west-1</td>
                    <td class="col-user">admin-sys</td>
                    <td class="col-duration">12s</td>
                    <td class="col-timestamp">2023-10-26 22:45:30</td>
                </tr>

                <!-- Row 8 -->
                <tr>
                    <td class="col-checkbox">
                        <div class="checkbox-wrapper"><div class="checkbox"></div></div>
                    </td>
                    <td class="col-status">
                        <span class="status-badge status-success">
                            <svg class="status-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" /></svg>
                            Success
                        </span>
                    </td>
                    <td class="col-service">frontend-dashboard-ui</td>
                    <td class="col-region">global-edge</td>
                    <td class="col-user">ci-automation-bot</td>
                    <td class="col-duration">4m 20s</td>
                    <td class="col-timestamp">2023-10-26 18:05:11</td>
                </tr>
            </tbody>
        </table>
    </div>

</body>
</html>

request envelope — prompt redacted

{
  "model": "google/gemini-3.1-pro-preview",
  "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": "46969d2a-0148-4454-b6aa-023c181af8a7"
}