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>
    :root {
        --bg-canvas: #121417;
        --bg-surface: #1a1d24;
        --bg-surface-hover: #222630;
        --bg-surface-selected: #242c3d;
        --border-color: #2b303c;
        --border-subtle: #212630;
        --text-primary: #f0f2f5;
        --text-secondary: #9ba1ad;
        --text-tertiary: #6b7280;
        
        --status-success-bg: rgba(16, 185, 129, 0.12);
        --status-success-text: #34d399;
        --status-success-border: rgba(16, 185, 129, 0.3);
        
        --status-failed-bg: rgba(239, 68, 68, 0.12);
        --status-failed-text: #f87171;
        --status-failed-border: rgba(239, 68, 68, 0.3);

        --status-running-bg: rgba(59, 130, 246, 0.12);
        --status-running-text: #60a5fa;
        --status-running-border: rgba(59, 130, 246, 0.3);

        --status-queued-bg: rgba(156, 163, 175, 0.1);
        --status-queued-text: #9ca3af;
        --status-queued-border: rgba(156, 163, 175, 0.25);

        --accent: #3b82f6;
    }

    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    body {
        background-color: var(--bg-canvas);
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        color: var(--text-primary);
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        padding: 40px;
    }

    .wrapper {
        width: 100%;
        max-width: 1100px;
        background: var(--bg-surface);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
        overflow: hidden;
    }

    .table-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 20px;
        border-bottom: 1px solid var(--border-color);
        background: var(--bg-surface);
    }

    .table-title {
        font-size: 14px;
        font-weight: 600;
        letter-spacing: -0.01em;
        color: var(--text-primary);
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .record-count {
        font-size: 12px;
        font-weight: 400;
        color: var(--text-secondary);
        background: var(--border-color);
        padding: 2px 6px;
        border-radius: 4px;
    }

    .table-actions {
        display: flex;
        gap: 8px;
    }

    .btn-icon {
        background: transparent;
        border: 1px solid var(--border-color);
        color: var(--text-secondary);
        width: 28px;
        height: 28px;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    .btn-icon:hover {
        background: var(--bg-surface-hover);
        color: var(--text-primary);
    }

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

    th {
        background: #15181e;
        color: var(--text-secondary);
        font-weight: 500;
        padding: 10px 16px;
        border-bottom: 1px solid var(--border-color);
        user-select: none;
        white-space: nowrap;
    }

    th.sortable {
        cursor: pointer;
    }

    th.sortable:hover {
        color: var(--text-primary);
        background: #171b22;
    }

    th.sorted {
        color: var(--text-primary);
    }

    .sort-icon {
        display: inline-block;
        margin-left: 4px;
        font-size: 10px;
        vertical-align: middle;
        color: var(--accent);
    }

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

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

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

    tr.row-normal:hover {
        background-color: var(--bg-surface-hover);
    }

    tr.row-selected {
        background-color: var(--bg-surface-selected);
    }
    
    tr.row-selected td {
        border-bottom-color: rgba(59, 130, 246, 0.2);
    }

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

    .col-service {
        font-weight: 500;
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        font-size: 12px;
    }

    .col-region {
        color: var(--text-secondary);
    }

    .col-user {
        color: var(--text-primary);
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .user-avatar {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: #2b303c;
        font-size: 9px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--text-secondary);
        font-weight: 600;
    }

    .col-duration {
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        color: var(--text-secondary);
        font-size: 12px;
    }

    .col-time {
        color: var(--text-tertiary);
        font-size: 12px;
    }

    /* Status Badges */
    .badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 3px 8px;
        border-radius: 4px;
        font-size: 11px;
        font-weight: 500;
        border: 1px solid transparent;
        letter-spacing: -0.01em;
    }

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

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

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

    .badge-queued {
        background: var(--status-queued-bg);
        color: var(--status-queued-text);
        border-color: var(--status-queued-border);
    }

    .status-icon {
        width: 6px;
        height: 6px;
        border-radius: 50%;
    }

    .badge-success .status-icon { background: var(--status-success-text); }
    .badge-failed .status-icon { background: var(--status-failed-text); }
    .badge-running .status-icon { 
        background: var(--status-running-text);
        box-shadow: 0 0 6px var(--status-running-text);
    }
    .badge-queued .status-icon { background: var(--status-queued-text); }

    .table-footer {
        padding: 12px 20px;
        border-top: 1px solid var(--border-color);
        background: #15181e;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 12px;
        color: var(--text-tertiary);
    }

    .pagination {
        display: flex;
        gap: 4px;
    }

    .page-btn {
        background: transparent;
        border: 1px solid var(--border-color);
        color: var(--text-secondary);
        padding: 2px 8px;
        border-radius: 4px;
        cursor: pointer;
    }

    .page-btn:hover:not(:disabled) {
        background: var(--bg-surface-hover);
        color: var(--text-primary);
    }

    .page-btn:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }
</style>
</head>
<body>

<div class="wrapper">
    <div class="table-header">
        <div class="table-title">
            Server Deployments 
            <span class="record-count">8 records</span>
        </div>
        <div class="table-actions">
            <button class="btn-icon" title="Filter list">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"></polygon></svg>
            </button>
            <button class="btn-icon" title="Refresh data">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.5 2v6h-6M21.34 15.57a10 10 0 1 1-.57-8.38l5.73-5.73"></path></svg>
            </button>
        </div>
    </div>

    <table>
        <thead>
            <tr>
                <th class="col-status">Status</th>
                <th class="sortable sorted col-service">Service Name <span class="sort-icon">▼</span></th>
                <th>Region</th>
                <th>Deployed By</th>
                <th class="sortable">Duration <span class="sort-icon"></span></th>
                <th class="sortable">Timestamp <span class="sort-icon"></span></th>
            </tr>
        </thead>
        <tbody>
            <!-- Normal Row -->
            <tr class="row-normal">
                <td>
                    <span class="badge badge-success">
                        <span class="status-icon"></span>
                        SUCCESS
                    </span>
                </td>
                <td class="col-service">auth-api-prod</td>
                <td class="col-region">us-east-1</td>
                <td>
                    <div class="col-user">
                        <div class="user-avatar">JD</div>
                        <span>j.doe</span>
                    </div>
                </td>
                <td class="col-duration">42s</td>
                <td class="col-time">2 mins ago</td>
            </tr>

            <!-- Hovered Row -->
            <tr class="row-normal" style="background-color: var(--bg-surface-hover);">
                <td>
                    <span class="badge badge-running">
                        <span class="status-icon"></span>
                        DEPLOYING
                    </span>
                </td>
                <td class="col-service">payment-processor</td>
                <td class="col-region">eu-west-1</td>
                <td>
                    <div class="col-user">
                        <div class="user-avatar">AS</div>
                        <span>a.smith</span>
                    </div>
                </td>
                <td class="col-duration">1m 15s</td>
                <td class="col-time">Just now</td>
            </tr>

            <!-- Selected Row -->
            <tr class="row-selected">
                <td>
                    <span class="badge badge-failed">
                        <span class="status-icon"></span>
                        FAILED
                    </span>
                </td>
                <td class="col-service">notification-svc</td>
                <td class="col-region">ap-southeast-1</td>
                <td>
                    <div class="col-user">
                        <div class="user-avatar">MR</div>
                        <span>m.ross</span>
                    </div>
                </td>
                <td class="col-duration">2m 04s</td>
                <td class="col-time">14 mins ago</td>
            </tr>

            <!-- Normal Row -->
            <tr class="row-normal">
                <td>
                    <span class="badge badge-success">
                        <span class="status-icon"></span>
                        SUCCESS
                    </span>
                </td>
                <td class="col-service">user-profile-db</td>
                <td class="col-region">us-west-2</td>
                <td>
                    <div class="col-user">
                        <div class="user-avatar">KL</div>
                        <span>k.lee</span>
                    </div>
                </td>
                <td class="col-duration">58s</td>
                <td class="col-time">32 mins ago</td>
            </tr>

            <!-- Normal Row -->
            <tr class="row-normal">
                <td>
                    <span class="badge badge-success">
                        <span class="status-icon"></span>
                        SUCCESS
                    </span>
                </td>
                <td class="col-service">ingress-router-edge</td>
                <td class="col-region">sa-east-1</td>
                <td>
                    <div class="col-user">
                        <div class="user-avatar">JD</div>
                        <span>j.doe</span>
                    </div>
                </td>
                <td class="col-duration">29s</td>
                <td class="col-time">1 hour ago</td>
            </tr>

            <!-- Normal Row -->
            <tr class="row-normal">
                <td>
                    <span class="badge badge-queued">
                        <span class="status-icon"></span>
                        QUEUED
                    </span>
                </td>
                <td class="col-service">analytics-pipeline</td>
                <td class="col-region">eu-central-1</td>
                <td>
                    <div class="col-user">
                        <div class="user-avatar">BK</div>
                        <span>b.karp</span>
                    </div>
                </td>
                <td class="col-duration">—</td>
                <td class="col-time">Pending</td>
            </tr>

            <!-- Normal Row -->
            <tr class="row-normal">
                <td>
                    <span class="badge badge-success">
                        <span class="status-icon"></span>
                        SUCCESS
                    </span>
                </td>
                <td class="col-service">search-index-worker</td>
                <td class="col-region">us-east-2</td>
                <td>
                    <div class="col-user">
                        <div class="user-avatar">AS</div>
                        <span>a.smith</span>
                    </div>
                </td>
                <td class="col-duration">3m 12s</td>
                <td class="col-time">3 hours ago</td>
            </tr>

            <!-- Normal Row -->
            <tr class="row-normal">
                <td>
                    <span class="badge badge-success">
                        <span class="status-icon"></span>
                        SUCCESS
                    </span>
                </td>
                <td class="col-service">media-asset-cdn</td>
                <td class="col-region">ap-northeast-1</td>
                <td>
                    <div class="col-user">
                        <div class="user-avatar">KL</div>
                        <span>k.lee</span>
                    </div>
                </td>
                <td class="col-duration">1m 05s</td>
                <td class="col-time">4 hours ago</td>
            </tr>
        </tbody>
    </table>

    <div class="table-footer">
        <div>Showing 1-8 of 8 deployment records</div>
        <div class="pagination">
            <button class="page-btn" disabled>Prev</button>
            <button class="page-btn" disabled>Next</button>
        </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"
}