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 Deployments</title>
    <style>
        :root {
            --bg-neutral: #eef1f4;
            --card-bg: #ffffff;
            --text-primary: #1a1d23;
            --text-secondary: #5a5f6b;
            --text-muted: #8b9099;
            --border-row: #e9ecf0;
            --border-card: #e2e5ea;
            --selected-bg: #eef4ff;
            --selected-accent: #3b6df0;
            --hovered-bg: #f7f8fa;
            --header-bg: #f4f6f8;
            --header-text: #4a4f5a;
            --sort-active: #3b6df0;
            --status-running: #1d9e5f;
            --status-failed: #e0454b;
            --status-pending: #d4850b;
            --status-stopped: #6f7583;
            --status-deploying: #3b6df0;
            --font-stack: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            --font-mono: 'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', 'Consolas', 'Monaco', monospace;
        }

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

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

        .deployments-panel {
            background: var(--card-bg);
            border-radius: 10px;
            border: 1px solid var(--border-card);
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 2px 6px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.01);
            overflow: hidden;
            width: 100%;
            max-width: 920px;
        }

        .panel-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 16px 20px;
            border-bottom: 1px solid var(--border-row);
            background: #fafbfc;
        }

        .panel-title {
            font-size: 14px;
            font-weight: 600;
            color: var(--text-primary);
            letter-spacing: -0.01em;
        }

        .panel-meta {
            font-size: 12px;
            color: var(--text-muted);
            font-weight: 500;
        }

        .table-wrapper {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            table-layout: auto;
            font-size: 13px;
            line-height: 1.4;
            color: var(--text-primary);
        }

        thead th {
            background: var(--header-bg);
            text-align: left;
            padding: 10px 14px;
            font-size: 11.5px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            color: var(--header-text);
            border-bottom: 1px solid var(--border-row);
            white-space: nowrap;
            user-select: none;
            cursor: default;
            transition: color 0.12s ease;
        }

        thead th.sortable {
            cursor: pointer;
        }

        thead th.sortable:hover {
            color: #2c3b5a;
        }

        thead th.sorted {
            color: var(--sort-active);
        }

        .sort-arrow {
            display: inline-block;
            margin-left: 5px;
            font-size: 10px;
            vertical-align: middle;
            color: var(--sort-active);
            position: relative;
            top: -1px;
        }

        thead th.sortable .sort-placeholder {
            display: inline-block;
            margin-left: 5px;
            font-size: 9px;
            color: #c5c9d2;
            vertical-align: middle;
            opacity: 0;
            transition: opacity 0.12s ease;
            position: relative;
            top: -1px;
        }

        thead th.sortable:hover .sort-placeholder {
            opacity: 0.6;
        }

        tbody td {
            padding: 10px 14px;
            border-bottom: 1px solid var(--border-row);
            vertical-align: middle;
            white-space: nowrap;
            background: #fff;
            transition: background-color 0.08s ease;
        }

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

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

        tbody tr.row-selected td:first-child {
            border-left: 3px solid var(--selected-accent);
            padding-left: 11px;
        }

        tbody tr.row-hovered td {
            background-color: var(--hovered-bg);
        }

        tbody tr.row-hovered td:first-child {
            padding-left: 14px;
        }

        .col-status {
            min-width: 110px;
        }
        .col-service {
            min-width: 150px;
            font-weight: 500;
        }
        .col-region {
            min-width: 125px;
            color: var(--text-secondary);
            font-size: 12.5px;
        }
        .col-deployer {
            min-width: 130px;
            color: var(--text-secondary);
        }
        .col-duration {
            min-width: 90px;
            font-variant-numeric: tabular-nums;
            font-family: var(--font-mono);
            font-size: 12.5px;
            letter-spacing: -0.01em;
        }
        .col-timestamp {
            min-width: 165px;
            font-variant-numeric: tabular-nums;
            font-family: var(--font-mono);
            font-size: 12.5px;
            color: var(--text-secondary);
            letter-spacing: -0.01em;
        }

        .status-indicator {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            font-size: 12.5px;
            font-weight: 500;
            letter-spacing: -0.01em;
        }

        .status-shape {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            line-height: 1;
            flex-shrink: 0;
            width: 16px;
            height: 16px;
            text-align: center;
        }

        .status-running .status-shape {
            color: var(--status-running);
            font-size: 14px;
        }
        .status-running {
            color: #1a7546;
        }

        .status-failed .status-shape {
            color: var(--status-failed);
            font-size: 12px;
            font-weight: 700;
        }
        .status-failed {
            color: #b8353a;
        }

        .status-pending .status-shape {
            color: var(--status-pending);
            font-size: 14px;
        }
        .status-pending {
            color: #9e6308;
        }

        .status-stopped .status-shape {
            color: var(--status-stopped);
            font-size: 10px;
        }
        .status-stopped {
            color: #515663;
        }

        .status-deploying .status-shape {
            color: var(--status-deploying);
            font-size: 11px;
        }
        .status-deploying {
            color: #2850c8;
        }

        .col-service code {
            font-family: var(--font-mono);
            font-size: 12.5px;
            font-weight: 500;
            letter-spacing: -0.01em;
            background: none;
            color: var(--text-primary);
        }

        .region-flag {
            display: inline-block;
            width: 7px;
            height: 7px;
            border-radius: 50%;
            margin-right: 6px;
            vertical-align: middle;
            position: relative;
            top: -1px;
            flex-shrink: 0;
        }
        .region-flag.us {
            background: #6b8dd6;
        }
        .region-flag.eu {
            background: #7eb8a0;
        }
        .region-flag.ap {
            background: #d4946a;
        }

        @media (max-width: 860px) {
            body {
                padding: 24px 12px;
            }
            .deployments-panel {
                border-radius: 6px;
            }
            table {
                font-size: 12px;
            }
            thead th,
            tbody td {
                padding: 8px 10px;
            }
            tbody tr.row-selected td:first-child {
                padding-left: 7px;
                border-left-width: 2px;
            }
            .col-timestamp {
                min-width: 140px;
            }
            .col-service {
                min-width: 120px;
            }
        }
    </style>
</head>
<body>
    <div class="deployments-panel">
        <div class="panel-header">
            <span class="panel-title">Deployments</span>
            <span class="panel-meta">8 records &middot; Last updated 2 min ago</span>
        </div>
        <div class="table-wrapper">
            <table>
                <thead>
                    <tr>
                        <th class="col-status sortable">
                            Status
                            <span class="sort-placeholder">↕</span>
                        </th>
                        <th class="col-service sortable">
                            Service Name
                            <span class="sort-placeholder">↕</span>
                        </th>
                        <th class="col-region sortable">
                            Region
                            <span class="sort-placeholder">↕</span>
                        </th>
                        <th class="col-deployer sortable">
                            Deployed By
                            <span class="sort-placeholder">↕</span>
                        </th>
                        <th class="col-duration sortable">
                            Duration
                            <span class="sort-placeholder">↕</span>
                        </th>
                        <th class="col-timestamp sorted">
                            Timestamp
                            <span class="sort-arrow">▼</span>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="row-selected">
                        <td class="col-status">
                            <span class="status-indicator status-running">
                                <span class="status-shape">●</span>
                                Running
                            </span>
                        </td>
                        <td class="col-service"><code>api-gateway</code></td>
                        <td class="col-region">
                            <span class="region-flag us"></span>us-east-1
                        </td>
                        <td class="col-deployer">Alice Chen</td>
                        <td class="col-duration">4m 32s</td>
                        <td class="col-timestamp">2024-12-15 14:32:10</td>
                    </tr>
                    <tr>
                        <td class="col-status">
                            <span class="status-indicator status-failed">
                                <span class="status-shape">✕</span>
                                Failed
                            </span>
                        </td>
                        <td class="col-service"><code>user-service</code></td>
                        <td class="col-region">
                            <span class="region-flag eu"></span>eu-west-2
                        </td>
                        <td class="col-deployer">Bob Martinez</td>
                        <td class="col-duration">12m 08s</td>
                        <td class="col-timestamp">2024-12-15 14:28:45</td>
                    </tr>
                    <tr class="row-hovered">
                        <td class="col-status">
                            <span class="status-indicator status-running">
                                <span class="status-shape">●</span>
                                Running
                            </span>
                        </td>
                        <td class="col-service"><code>payment-worker</code></td>
                        <td class="col-region">
                            <span class="region-flag us"></span>us-east-1
                        </td>
                        <td class="col-deployer">Alice Chen</td>
                        <td class="col-duration">2m 15s</td>
                        <td class="col-timestamp">2024-12-15 14:35:22</td>
                    </tr>
                    <tr>
                        <td class="col-status">
                            <span class="status-indicator status-pending">
                                <span class="status-shape">○</span>
                                Pending
                            </span>
                        </td>
                        <td class="col-service"><code>notification-svc</code></td>
                        <td class="col-region">
                            <span class="region-flag ap"></span>ap-southeast-1
                        </td>
                        <td class="col-deployer">Diana Kim</td>
                        <td class="col-duration">&mdash;</td>
                        <td class="col-timestamp">2024-12-15 14:36:01</td>
                    </tr>
                    <tr>
                        <td class="col-status">
                            <span class="status-indicator status-stopped">
                                <span class="status-shape">■</span>
                                Stopped
                            </span>
                        </td>
                        <td class="col-service"><code>cache-layer</code></td>
                        <td class="col-region">
                            <span class="region-flag us"></span>us-west-2
                        </td>
                        <td class="col-deployer">Charlie Okafor</td>
                        <td class="col-duration">8m 00s</td>
                        <td class="col-timestamp">2024-12-15 14:20:33</td>
                    </tr>
                    <tr>
                        <td class="col-status">
                            <span class="status-indicator status-running">
                                <span class="status-shape">●</span>
                                Running
                            </span>
                        </td>
                        <td class="col-service"><code>auth-service</code></td>
                        <td class="col-region">
                            <span class="region-flag eu"></span>eu-central-1
                        </td>
                        <td class="col-deployer">Bob Martinez</td>
                        <td class="col-duration">1m 47s</td>
                        <td class="col-timestamp">2024-12-15 14:37:15</td>
                    </tr>
                    <tr>
                        <td class="col-status">
                            <span class="status-indicator status-deploying">
                                <span class="status-shape">▲</span>
                                Deploying
                            </span>
                        </td>
                        <td class="col-service"><code>search-index</code></td>
                        <td class="col-region">
                            <span class="region-flag us"></span>us-east-1
                        </td>
                        <td class="col-deployer">Diana Kim</td>
                        <td class="col-duration">3m 20s</td>
                        <td class="col-timestamp">2024-12-15 14:34:50</td>
                    </tr>
                    <tr>
                        <td class="col-status">
                            <span class="status-indicator status-failed">
                                <span class="status-shape">✕</span>
                                Failed
                            </span>
                        </td>
                        <td class="col-service"><code>log-aggregator</code></td>
                        <td class="col-region">
                            <span class="region-flag us"></span>us-west-2
                        </td>
                        <td class="col-deployer">Charlie Okafor</td>
                        <td class="col-duration">15m 42s</td>
                        <td class="col-timestamp">2024-12-15 14:19:08</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</body>
</html>
```

request envelope — prompt redacted

{
  "model": "deepseek/deepseek-v4-pro",
  "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": "fe6a6f66-4ed7-4df8-8302-305b7500d370"
}