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-page: #f1f5f9;
            --bg-table: #ffffff;
            --bg-header: #f8fafc;
            --bg-hover: #f1f5f9;
            --bg-selected: #eff6ff;
            --border-color: #e2e8f0;
            --border-selected: #3b82f6;
            
            --text-main: #0f172a;
            --text-muted: #64748b;
            --text-header: #475569;
            
            --status-success: #059669;
            --status-failed: #dc2626;
            --status-deploying: #d97706;

            --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
            --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        }

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

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

        .table-container {
            background-color: var(--bg-table);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
            width: 100%;
            max-width: 960px;
            overflow: hidden;
        }

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

        th {
            background-color: var(--bg-header);
            color: var(--text-header);
            font-weight: 600;
            padding: 10px 16px;
            border-bottom: 1px solid var(--border-color);
            user-select: none;
            cursor: pointer;
            white-space: nowrap;
        }

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

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

        .th-content.right {
            justify-content: flex-end;
        }

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

        .sort-icon.active {
            color: var(--text-main);
        }

        td {
            padding: 9px 16px;
            border-bottom: 1px solid var(--border-color);
            white-space: nowrap;
            vertical-align: middle;
            position: relative;
        }

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

        /* States */
        tr.hover-state {
            background-color: var(--bg-hover);
        }

        tr.selected-state {
            background-color: var(--bg-selected);
        }

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

        /* Typography */
        .mono {
            font-family: var(--font-mono);
            font-size: 12.5px;
            letter-spacing: -0.02em;
        }

        .service-name {
            font-weight: 500;
            color: var(--text-main);
        }

        .meta-text {
            color: var(--text-muted);
        }

        .align-right {
            text-align: right;
        }

        /* Status Badges */
        .status {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-weight: 500;
        }

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

        .status.success {
            color: var(--status-success);
        }

        .status.failed {
            color: var(--status-failed);
        }

        .status.deploying {
            color: var(--status-deploying);
        }

        .status.deploying .status-icon {
            animation: spin 2s linear infinite;
        }

        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

    </style>
</head>
<body>

    <div class="table-container">
        <table>
            <thead>
                <tr>
                    <th>
                        <div class="th-content">
                            Status
                            <svg class="sort-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 15l5 5 5-5"/><path d="M7 9l5-5 5 5"/></svg>
                        </div>
                    </th>
                    <th>
                        <div class="th-content">
                            Service Name
                            <svg class="sort-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 15l5 5 5-5"/><path d="M7 9l5-5 5 5"/></svg>
                        </div>
                    </th>
                    <th>
                        <div class="th-content">
                            Region
                            <svg class="sort-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 15l5 5 5-5"/><path d="M7 9l5-5 5 5"/></svg>
                        </div>
                    </th>
                    <th>
                        <div class="th-content">
                            Deployed By
                            <svg class="sort-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 15l5 5 5-5"/><path d="M7 9l5-5 5 5"/></svg>
                        </div>
                    </th>
                    <th class="align-right">
                        <div class="th-content right">
                            Duration
                            <svg class="sort-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 15l5 5 5-5"/><path d="M7 9l5-5 5 5"/></svg>
                        </div>
                    </th>
                    <th class="align-right">
                        <div class="th-content right">
                            Timestamp
                            <svg class="sort-icon active" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>
                        </div>
                    </th>
                </tr>
            </thead>
            <tbody>
                <!-- Row 1 -->
                <tr>
                    <td>
                        <div class="status success">
                            <svg class="status-icon" viewBox="0 0 16 16" fill="currentColor"><path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.75.75 0 0 1 1.06-1.06L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"/></svg>
                            Succeeded
                        </div>
                    </td>
                    <td><span class="service-name">auth-api</span></td>
                    <td><span class="meta-text mono">us-east-1</span></td>
                    <td><span class="meta-text">github-actions</span></td>
                    <td class="align-right"><span class="mono">45s</span></td>
                    <td class="align-right"><span class="meta-text mono">2023-10-24 14:32:01</span></td>
                </tr>
                
                <!-- Row 2: Hovered State -->
                <tr class="hover-state">
                    <td>
                        <div class="status failed">
                            <svg class="status-icon" viewBox="0 0 16 16" fill="currentColor"><path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.75.75 0 1 1 1.06 1.06L9.06 8l3.22 3.22a.75.75 0 1 1-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 0 1-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"/></svg>
                            Failed
                        </div>
                    </td>
                    <td><span class="service-name">payment-gateway</span></td>
                    <td><span class="meta-text mono">eu-west-1</span></td>
                    <td><span class="meta-text">j.doe</span></td>
                    <td class="align-right"><span class="mono">12s</span></td>
                    <td class="align-right"><span class="meta-text mono">2023-10-24 13:15:44</span></td>
                </tr>

                <!-- Row 3 -->
                <tr>
                    <td>
                        <div class="status success">
                            <svg class="status-icon" viewBox="0 0 16 16" fill="currentColor"><path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.75.75 0 0 1 1.06-1.06L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"/></svg>
                            Succeeded
                        </div>
                    </td>
                    <td><span class="service-name">user-service</span></td>
                    <td><span class="meta-text mono">us-east-1</span></td>
                    <td><span class="meta-text">a.smith</span></td>
                    <td class="align-right"><span class="mono">32s</span></td>
                    <td class="align-right"><span class="meta-text mono">2023-10-24 11:02:19</span></td>
                </tr>

                <!-- Row 4: Selected State -->
                <tr class="selected-state">
                    <td>
                        <div class="status deploying">
                            <svg class="status-icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13.4 8c0 2.98-2.42 5.4-5.4 5.4-2.98 0-5.4-2.42-5.4-5.4 0-2.98 2.42-5.4 5.4-5.4M13.4 8V4.5M13.4 8H9.9"/></svg>
                            Deploying
                        </div>
                    </td>
                    <td><span class="service-name">search-indexer</span></td>
                    <td><span class="meta-text mono">us-west-2</span></td>
                    <td><span class="meta-text">gitlab-runner</span></td>
                    <td class="align-right"><span class="mono">2m 14s</span></td>
                    <td class="align-right"><span class="meta-text mono">2023-10-24 10:45:00</span></td>
                </tr>

                <!-- Row 5 -->
                <tr>
                    <td>
                        <div class="status success">
                            <svg class="status-icon" viewBox="0 0 16 16" fill="currentColor"><path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.75.75 0 0 1 1.06-1.06L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"/></svg>
                            Succeeded
                        </div>
                    </td>
                    <td><span class="service-name">image-processor</span></td>
                    <td><span class="meta-text mono">ap-northeast-1</span></td>
                    <td><span class="meta-text">j.doe</span></td>
                    <td class="align-right"><span class="mono">5m 02s</span></td>
                    <td class="align-right"><span class="meta-text mono">2023-10-24 09:12:33</span></td>
                </tr>

                <!-- Row 6 -->
                <tr>
                    <td>
                        <div class="status success">
                            <svg class="status-icon" viewBox="0 0 16 16" fill="currentColor"><path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.75.75 0 0 1 1.06-1.06L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"/></svg>
                            Succeeded
                        </div>
                    </td>
                    <td><span class="service-name">auth-api</span></td>
                    <td><span class="meta-text mono">eu-central-1</span></td>
                    <td><span class="meta-text">github-actions</span></td>
                    <td class="align-right"><span class="mono">41s</span></td>
                    <td class="align-right"><span class="meta-text mono">2023-10-23 18:44:12</span></td>
                </tr>

                <!-- Row 7 -->
                <tr>
                    <td>
                        <div class="status failed">
                            <svg class="status-icon" viewBox="0 0 16 16" fill="currentColor"><path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.75.75 0 1 1 1.06 1.06L9.06 8l3.22 3.22a.75.75 0 1 1-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 0 1-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"/></svg>
                            Failed
                        </div>
                    </td>
                    <td><span class="service-name">reporting-worker</span></td>
                    <td><span class="meta-text mono">us-east-1</span></td>
                    <td><span class="meta-text">b.wayne</span></td>
                    <td class="align-right"><span class="mono">4s</span></td>
                    <td class="align-right"><span class="meta-text mono">2023-10-23 15:30:00</span></td>
                </tr>

                <!-- Row 8 -->
                <tr>
                    <td>
                        <div class="status success">
                            <svg class="status-icon" viewBox="0 0 16 16" fill="currentColor"><path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.75.75 0 0 1 1.06-1.06L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"/></svg>
                            Succeeded
                        </div>
                    </td>
                    <td><span class="service-name">cache-invalidator</span></td>
                    <td><span class="meta-text mono">global</span></td>
                    <td><span class="meta-text">system</span></td>
                    <td class="align-right"><span class="mono">1s</span></td>
                    <td class="align-right"><span class="meta-text mono">2023-10-23 12:00:05</span></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"
}