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-panel: #1a1d24;
        --border-color: #2a2f3a;
        --border-subtle: #212630;
        --text-primary: #e2e8f0;
        --text-secondary: #8b949e;
        --text-muted: #6e7681;
        --accent-blue: #38bdf8;
        --accent-blue-dim: rgba(56, 189, 248, 0.15);
        --row-hover: #222732;
        --row-selected: #1e293b;
        --row-selected-border: #38bdf8;
        
        --status-success: #4ade80;
        --status-success-bg: rgba(74, 222, 128, 0.1);
        --status-failed: #f87171;
        --status-failed-bg: rgba(248, 113, 113, 0.1);
        --status-progress: #fbbf24;
        --status-progress-bg: rgba(251, 191, 36, 0.1);
    }

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

    body {
        background-color: var(--bg-canvas);
        color: var(--text-primary);
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        font-size: 12px;
        line-height: 1.5;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        padding: 24px;
    }

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

    .table-header-meta {
        padding: 12px 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid var(--border-color);
        background: rgba(255, 255, 255, 0.01);
    }

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

    .table-title span {
        color: var(--text-secondary);
        font-weight: normal;
    }

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

    .badge-count {
        background: var(--border-color);
        color: var(--text-secondary);
        padding: 2px 6px;
        border-radius: 4px;
        font-size: 11px;
    }

    table {
        width: 100%;
        border-collapse: collapse;
        text-align: left;
        white-space: nowrap;
    }

    th, td {
        padding: 8px 16px;
    }

    th {
        background: #15181e;
        color: var(--text-secondary);
        font-weight: 600;
        border-bottom: 1px solid var(--border-color);
        user-select: none;
        letter-spacing: 0.03em;
    }

    th.sortable {
        cursor: pointer;
    }

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

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

    .sort-icon {
        display: inline-block;
        width: 12px;
        height: 12px;
        margin-left: 4px;
        vertical-align: middle;
        opacity: 0.8;
    }

    tr {
        border-bottom: 1px solid var(--border-subtle);
        transition: background-color 0.1s ease;
    }

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

    /* States requested: default, hovered row (row 3), selected row (row 5) */
    tr.default-row:hover {
        background-color: var(--row-hover);
    }

    tr.hovered-state {
        background-color: var(--row-hover);
    }

    tr.selected-state {
        background-color: var(--row-selected);
        box-shadow: inset 3px 0 0 var(--row-selected-border);
    }

    td {
        color: var(--text-primary);
    }

    .status-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 2px 8px;
        border-radius: 4px;
        font-size: 11px;
        font-weight: 500;
    }

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

    .status-success {
        background-color: var(--status-success-bg);
        color: var(--status-success);
        border: 1px solid rgba(74, 222, 128, 0.2);
    }
    .status-success .status-icon { background-color: var(--status-success); }

    .status-failed {
        background-color: var(--status-failed-bg);
        color: var(--status-failed);
        border: 1px solid rgba(248, 113, 113, 0.2);
    }
    .status-failed .status-icon { background-color: var(--status-failed); }

    .status-progress {
        background-color: var(--status-progress-bg);
        color: var(--status-progress);
        border: 1px solid rgba(251, 191, 36, 0.2);
    }
    .status-progress .status-icon { 
        background-color: var(--status-progress);
        box-shadow: 0 0 6px var(--status-progress);
    }

    .service-name {
        font-weight: 600;
        color: #f1f5f9;
    }

    .region {
        color: var(--text-secondary);
        background: rgba(255, 255, 255, 0.03);
        padding: 1px 5px;
        border-radius: 3px;
        font-size: 11px;
        border: 1px solid var(--border-subtle);
    }

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

    .duration {
        font-variant-numeric: tabular-nums;
        color: var(--text-primary);
    }

    .timestamp {
        color: var(--text-muted);
        font-variant-numeric: tabular-nums;
    }

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

    .legend {
        display: flex;
        gap: 16px;
    }

    .legend-item {
        display: flex;
        align-items: center;
        gap: 6px;
    }
</style>
</head>
<body>

<div class="wrapper">
    <div class="table-header-meta">
        <div class="table-title">
            DEPLOYMENT_LOGS <span>/ production-cluster-01</span>
        </div>
        <div class="table-actions">
            <span class="badge-count">8 records</span>
        </div>
    </div>

    <table>
        <thead>
            <tr>
                <th class="sortable">Status</th>
                <th class="sortable sorted">Service Name <svg class="sort-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M18 15l-6 6-6-6M18 9l-6-6-6 6"/></svg></th>
                <th class="sortable">Region</th>
                <th class="sortable">Deployed By</th>
                <th class="sortable">Duration</th>
                <th class="sortable">Timestamp (UTC)</th>
            </tr>
        </thead>
        <tbody>
            <!-- Row 1: Default -->
            <tr class="default-row">
                <td><span class="status-badge status-success"><span class="status-icon"></span>SUCCESS</span></td>
                <td><span class="service-name">auth-service</span></td>
                <td><span class="region">us-east-1</span></td>
                <td class="user">j.doe</td>
                <td class="duration">42s</td>
                <td class="timestamp">2023-10-24 14:22:05</td>
            </tr>
            <!-- Row 2: Default -->
            <tr class="default-row">
                <td><span class="status-badge status-success"><span class="status-icon"></span>SUCCESS</span></td>
                <td><span class="service-name">payment-gateway</span></td>
                <td><span class="region">eu-west-1</span></td>
                <td class="user">m.smith</td>
                <td class="duration">1m 15s</td>
                <td class="timestamp">2023-10-24 14:18:30</td>
            </tr>
            <!-- Row 3: Hovered State -->
            <tr class="hovered-state">
                <td><span class="status-badge status-progress"><span class="status-icon"></span>BUILDING</span></td>
                <td><span class="service-name">notification-worker</span></td>
                <td><span class="region">us-west-2</span></td>
                <td class="user">a.jones</td>
                <td class="duration">3m 02s*</td>
                <td class="timestamp">2023-10-24 14:15:12</td>
            </tr>
            <!-- Row 4: Default -->
            <tr class="default-row">
                <td><span class="status-badge status-success"><span class="status-icon"></span>SUCCESS</span></td>
                <td><span class="service-name">user-profile-api</span></td>
                <td><span class="region">ap-southeast-1</span></td>
                <td class="user">k.chen</td>
                <td class="duration">28s</td>
                <td class="timestamp">2023-10-24 13:55:40</td>
            </tr>
            <!-- Row 5: Selected State -->
            <tr class="selected-state">
                <td><span class="status-badge status-failed"><span class="status-icon"></span>FAILED</span></td>
                <td><span class="service-name">inventory-sync</span></td>
                <td><span class="region">eu-central-1</span></td>
                <td class="user">d.vader</td>
                <td class="duration">54s</td>
                <td class="timestamp">2023-10-24 13:42:19</td>
            </tr>
            <!-- Row 6: Default -->
            <tr class="default-row">
                <td><span class="status-badge status-success"><span class="status-icon"></span>SUCCESS</span></td>
                <td><span class="service-name">analytics-ingest</span></td>
                <td><span class="region">us-east-2</span></td>
                <td class="user">s.Connor</td>
                <td class="duration">2m 10s</td>
                <td class="timestamp">2023-10-24 13:30:00</td>
            </tr>
            <!-- Row 7: Default -->
            <tr class="default-row">
                <td><span class="status-badge status-success"><span class="status-icon"></span>SUCCESS</span></td>
                <td><span class="service-name">search-indexer</span></td>
                <td><span class="region">sa-east-1</span></td>
                <td class="user">l.skywalker</td>
                <td class="duration">1m 05s</td>
                <td class="timestamp">2023-10-24 13:12:45</td>
            </tr>
            <!-- Row 8: Default -->
            <tr class="default-row">
                <td><span class="status-badge status-success"><span class="status-icon"></span>SUCCESS</span></td>
                <td><span class="service-name">edge-router</span></td>
                <td><span class="region">ap-northeast-1</span></td>
                <td class="user">b.Wayne</td>
                <td class="duration">19s</td>
                <td class="timestamp">2023-10-24 12:50:11</td>
            </tr>
        </tbody>
    </table>

    <div class="table-footer">
        <div class="legend">
            <div class="legend-item"><span class="status-badge status-success" style="padding:0 4px;"><span class="status-icon"></span></span> Success</div>
            <div class="legend-item"><span class="status-badge status-progress" style="padding:0 4px;"><span class="status-icon"></span></span> In Progress</div>
            <div class="legend-item"><span class="status-badge status-failed" style="padding:0 4px;"><span class="status-icon"></span></span> Failed</div>
        </div>
        <div>Showing rows 1-8 of 8</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"
}