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 Deployment Records</title>
    <style>
        :root {
            --bg-page: #f2f4f7;
            --bg-card: #ffffff;
            --bg-header: #f9fafb;
            --bg-hover: #f4f5f7;
            --bg-selected: #eef4ff;
            --border: #e5e7eb;
            --border-selected: #3b82f6;
            --text-primary: #1a1d23;
            --text-secondary: #5f6672;
            --text-tertiary: #8b919d;
            --text-header: #4a5059;
            --green: #22c55e;
            --red: #ef4444;
            --blue: #3b82f6;
            --amber: #f59e0b;
            --teal: #10b981;
            --font-stack: 'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            --font-mono: 'SF Mono', 'JetBrains Mono', 'Fira Code', 'Consolas', 'Monaco', monospace;
        }

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

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

        .table-card {
            background: var(--bg-card);
            border-radius: 10px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.03);
            overflow: hidden;
            width: fit-content;
            min-width: 780px;
            max-width: 960px;
        }

        .table-top-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 14px 20px;
            border-bottom: 1px solid var(--border);
            background: var(--bg-card);
        }

        .table-top-bar-left {
            display: flex;
            align-items: center;
            gap: 10px;
        }

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

        .badge-count {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: #f1f3f6;
            color: var(--text-secondary);
            font-size: 11px;
            font-weight: 500;
            padding: 2px 8px;
            border-radius: 10px;
            letter-spacing: 0.01em;
            min-width: 22px;
        }

        .table-top-bar-right {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .dot-indicator {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            display: inline-block;
            flex-shrink: 0;
            margin-right: 2px;
        }
        .dot-green {
            background: var(--green);
        }
        .dot-red {
            background: var(--red);
        }
        .dot-blue {
            background: var(--blue);
        }
        .dot-amber {
            background: var(--amber);
        }
        .dot-teal {
            background: var(--teal);
        }

        .legend-item {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            font-size: 10px;
            color: var(--text-tertiary);
            letter-spacing: 0.01em;
            font-weight: 500;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            table-layout: auto;
        }

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

        thead th.sortable {
            cursor: pointer;
        }

        thead th.sortable:hover {
            color: var(--text-primary);
        }

        thead th.sort-active {
            color: var(--blue);
            cursor: pointer;
        }

        thead th .sort-arrow {
            display: inline-block;
            font-size: 9px;
            margin-left: 5px;
            vertical-align: 1px;
            opacity: 0.9;
            font-weight: 700;
        }

        thead th.sortable .sort-arrow-placeholder {
            display: inline-block;
            font-size: 8px;
            margin-left: 5px;
            vertical-align: 1px;
            opacity: 0.25;
            font-weight: 400;
            color: var(--text-tertiary);
        }

        tbody td {
            padding: 10px 16px;
            font-size: 13px;
            color: var(--text-primary);
            border-bottom: 1px solid #f0f1f3;
            white-space: nowrap;
            letter-spacing: -0.01em;
        }

        tbody tr {
            transition: background-color 0.1s ease;
            cursor: default;
        }

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

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

        tbody tr.row-selected td:first-child {
            padding-left: 13px;
        }

        .status-cell {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            font-weight: 500;
            font-size: 12.5px;
        }

        .status-dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            flex-shrink: 0;
            box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.04);
        }
        .status-dot.status-active {
            background: var(--green);
        }
        .status-dot.status-failed {
            background: var(--red);
        }
        .status-dot.status-deploying {
            background: var(--blue);
            box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
        }
        .status-dot.status-pending {
            background: var(--amber);
        }
        .status-dot.status-stable {
            background: var(--teal);
        }

        .status-label {
            color: var(--text-primary);
            font-weight: 500;
        }
        .status-label.failed-text {
            color: #b91c1c;
            font-weight: 600;
        }

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

        .region-text {
            color: var(--text-secondary);
            font-family: var(--font-mono);
            font-size: 12px;
            letter-spacing: -0.01em;
        }

        .deployed-by {
            color: var(--text-primary);
            font-weight: 450;
        }

        .duration-text {
            font-family: var(--font-mono);
            font-size: 12px;
            color: var(--text-secondary);
            letter-spacing: -0.01em;
        }
        .duration-na {
            color: var(--text-tertiary);
            font-style: normal;
            font-family: var(--font-stack);
            font-size: 13px;
        }

        .timestamp-text {
            font-family: var(--font-mono);
            font-size: 11.5px;
            color: var(--text-secondary);
            letter-spacing: -0.01em;
        }

        tbody tr.row-selected .service-name {
            color: #1d4ed8;
            font-weight: 600;
        }

        tbody tr.row-selected .status-label {
            font-weight: 600;
        }
    </style>
</head>
<body>
    <div class="table-card">
        <div class="table-top-bar">
            <div class="table-top-bar-left">
                <span class="table-title">Deployments</span>
                <span class="badge-count">8</span>
            </div>
            <div class="table-top-bar-right">
                <span class="legend-item"><span class="dot-indicator dot-green"></span> Active</span>
                <span class="legend-item"><span class="dot-indicator dot-blue"></span> Deploying</span>
                <span class="legend-item"><span class="dot-indicator dot-amber"></span> Pending</span>
                <span class="legend-item"><span class="dot-indicator dot-red"></span> Failed</span>
            </div>
        </div>
        <table>
            <thead>
                <tr>
                    <th>Status</th>
                    <th class="sort-active sortable">
                        Service Name
                        <span class="sort-arrow">▲</span>
                    </th>
                    <th class="sortable">
                        Region
                        <span class="sort-arrow-placeholder">⇅</span>
                    </th>
                    <th>Deployed By</th>
                    <th>Duration</th>
                    <th class="sortable">
                        Timestamp
                        <span class="sort-arrow-placeholder">⇅</span>
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <span class="status-cell">
                            <span class="status-dot status-active"></span>
                            <span class="status-label">Active</span>
                        </span>
                    </td>
                    <td><span class="service-name">api-gateway-prod</span></td>
                    <td><span class="region-text">us-east-1</span></td>
                    <td><span class="deployed-by">Sarah Chen</span></td>
                    <td><span class="duration-text">2m 34s</span></td>
                    <td><span class="timestamp-text">2025-01-15 14:32:10</span></td>
                </tr>
                <tr>
                    <td>
                        <span class="status-cell">
                            <span class="status-dot status-active"></span>
                            <span class="status-label">Active</span>
                        </span>
                    </td>
                    <td><span class="service-name">user-service</span></td>
                    <td><span class="region-text">eu-west-2</span></td>
                    <td><span class="deployed-by">James Wilson</span></td>
                    <td><span class="duration-text">1m 12s</span></td>
                    <td><span class="timestamp-text">2025-01-15 14:28:45</span></td>
                </tr>
                <tr class="row-hovered">
                    <td>
                        <span class="status-cell">
                            <span class="status-dot status-failed"></span>
                            <span class="status-label failed-text">Failed</span>
                        </span>
                    </td>
                    <td><span class="service-name">payment-worker</span></td>
                    <td><span class="region-text">us-east-1</span></td>
                    <td><span class="deployed-by">Maria Garcia</span></td>
                    <td><span class="duration-text">5m 01s</span></td>
                    <td><span class="timestamp-text">2025-01-15 14:15:22</span></td>
                </tr>
                <tr>
                    <td>
                        <span class="status-cell">
                            <span class="status-dot status-active"></span>
                            <span class="status-label">Active</span>
                        </span>
                    </td>
                    <td><span class="service-name">cache-layer</span></td>
                    <td><span class="region-text">ap-southeast-1</span></td>
                    <td><span class="deployed-by">Alex Kim</span></td>
                    <td><span class="duration-text">45s</span></td>
                    <td><span class="timestamp-text">2025-01-15 14:10:05</span></td>
                </tr>
                <tr class="row-selected">
                    <td>
                        <span class="status-cell">
                            <span class="status-dot status-deploying"></span>
                            <span class="status-label">Deploying</span>
                        </span>
                    </td>
                    <td><span class="service-name">search-index</span></td>
                    <td><span class="region-text">us-west-2</span></td>
                    <td><span class="deployed-by">Priya Patel</span></td>
                    <td><span class="duration-text">3m 18s</span></td>
                    <td><span class="timestamp-text">2025-01-15 14:05:30</span></td>
                </tr>
                <tr>
                    <td>
                        <span class="status-cell">
                            <span class="status-dot status-pending"></span>
                            <span class="status-label">Pending</span>
                        </span>
                    </td>
                    <td><span class="service-name">notification-svc</span></td>
                    <td><span class="region-text">eu-central-1</span></td>
                    <td><span class="deployed-by">Tom Baker</span></td>
                    <td><span class="duration-na">—</span></td>
                    <td><span class="timestamp-text">2025-01-15 14:00:00</span></td>
                </tr>
                <tr>
                    <td>
                        <span class="status-cell">
                            <span class="status-dot status-active"></span>
                            <span class="status-label">Active</span>
                        </span>
                    </td>
                    <td><span class="service-name">data-sync</span></td>
                    <td><span class="region-text">us-east-1</span></td>
                    <td><span class="deployed-by">Lisa Zhang</span></td>
                    <td><span class="duration-text">1m 47s</span></td>
                    <td><span class="timestamp-text">2025-01-15 13:55:12</span></td>
                </tr>
                <tr>
                    <td>
                        <span class="status-cell">
                            <span class="status-dot status-stable"></span>
                            <span class="status-label">Stable</span>
                        </span>
                    </td>
                    <td><span class="service-name">auth-service</span></td>
                    <td><span class="region-text">us-west-2</span></td>
                    <td><span class="deployed-by">Ryan O'Neil</span></td>
                    <td><span class="duration-text">4m 22s</span></td>
                    <td><span class="timestamp-text">2025-01-15 13:50:00</span></td>
                </tr>
            </tbody>
        </table>
    </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"
}