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: #f4f4f5;
        --bg-surface: #ffffff;
        --bg-header: #fafafa;
        --bg-hover: #f4f4f5;
        --bg-selected: #f0f9ff;
        
        --border-light: #e4e4e7;
        --border-accent: #38bdf8;
        
        --text-primary: #18181b;
        --text-secondary: #71717a;
        --text-tertiary: #a1a1aa;
        
        --status-success-bg: #dcfce7;
        --status-success-text: #166534;
        --status-failed-bg: #fee2e2;
        --status-failed-text: #991b1b;
        --status-running-bg: #e0f2fe;
        --status-running-text: #075985;
        --status-pending-bg: #f4f4f5;
        --status-pending-text: #52525b;

        --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);
        color: var(--text-primary);
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        padding: 4rem;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .table-container {
        background-color: var(--bg-surface);
        border: 1px solid var(--border-light);
        border-radius: 8px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.025);
        width: 100%;
        max-width: 1024px;
        overflow-x: auto;
    }

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

    th, td {
        padding: 10px 16px;
        border-bottom: 1px solid var(--border-light);
    }

    th {
        background-color: var(--bg-header);
        color: var(--text-secondary);
        font-weight: 500;
        user-select: none;
    }

    th.sortable {
        cursor: pointer;
    }

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

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

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

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

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

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

    /* States */
    tr.is-selected {
        background-color: var(--bg-selected);
        box-shadow: inset 2px 0 0 var(--border-accent);
    }

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

    /* Checkbox styling */
    input[type="checkbox"] {
        appearance: none;
        background-color: var(--bg-surface);
        margin: 0;
        width: 14px;
        height: 14px;
        border: 1px solid #d4d4d8;
        border-radius: 3px;
        display: grid;
        place-content: center;
        cursor: pointer;
        position: relative;
        top: 2px;
    }

    input[type="checkbox"]::before {
        content: "";
        width: 8px;
        height: 8px;
        transform: scale(0);
        transition: 120ms transform ease-in-out;
        box-shadow: inset 1em 1em white;
        background-color: white;
        transform-origin: center;
        clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    }

    input[type="checkbox"]:checked {
        background-color: #0ea5e9;
        border-color: #0ea5e9;
    }

    input[type="checkbox"]:checked::before {
        transform: scale(1);
    }

    /* Cell specifics */
    .checkbox-cell {
        width: 32px;
        padding-right: 0;
    }

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

    .mono {
        font-family: var(--font-mono);
        font-size: 12px;
        color: var(--text-secondary);
        font-variant-numeric: tabular-nums;
    }

    /* Status Badge */
    .status {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 3px 8px 3px 6px;
        border-radius: 12px;
        font-size: 12px;
        font-weight: 500;
        line-height: 1;
    }

    .status svg {
        width: 14px;
        height: 14px;
    }

    .status-success { background-color: var(--status-success-bg); color: var(--status-success-text); }
    .status-failed { background-color: var(--status-failed-bg); color: var(--status-failed-text); }
    .status-running { background-color: var(--status-running-bg); color: var(--status-running-text); }
    .status-pending { background-color: var(--status-pending-bg); color: var(--status-pending-text); }

    .status-running svg {
        animation: spin 2s linear infinite;
    }

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

    /* Avatar */
    .user-cell {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .avatar {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.5px;
    }

    .avatar-bot { background-color: #f3f4f6; color: #4b5563; }
    .avatar-1 { background-color: #e0e7ff; color: #3730a3; }
    .avatar-2 { background-color: #fce7f3; color: #9d174d; }
    .avatar-3 { background-color: #dcfce7; color: #166534; }
    .avatar-sys { background-color: #fee2e2; color: #991b1b; }

</style>
</head>
<body>

<div class="table-container">
    <table>
        <thead>
            <tr>
                <th class="checkbox-cell">
                    <input type="checkbox" aria-label="Select all rows">
                </th>
                <th>Status</th>
                <th class="sortable">Service Name</th>
                <th class="sortable">Region</th>
                <th class="sortable">Deployed By</th>
                <th class="sortable">Duration</th>
                <th class="sortable active-sort">
                    <div class="th-content">
                        Timestamp
                        <svg class="sort-icon" xmlns="http://www.w3.org/2000/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="M12 5v14M19 12l-7 7-7-7"/>
                        </svg>
                    </div>
                </th>
            </tr>
        </thead>
        <tbody>
            <!-- Row 1: Selected State -->
            <tr class="is-selected">
                <td class="checkbox-cell"><input type="checkbox" checked aria-label="Select row"></td>
                <td>
                    <div class="status status-success">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                        Success
                    </div>
                </td>
                <td class="service-name">web-frontend</td>
                <td class="mono">us-east-1</td>
                <td>
                    <div class="user-cell">
                        <div class="avatar avatar-bot">DB</div>
                        <span>deploy-bot</span>
                    </div>
                </td>
                <td class="mono">01m 24s</td>
                <td class="mono">Oct 26, 14:32:01 UTC</td>
            </tr>

            <!-- Row 2: Hovered State -->
            <tr class="is-hovered">
                <td class="checkbox-cell"><input type="checkbox" aria-label="Select row"></td>
                <td>
                    <div class="status status-running">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
                        In Progress
                    </div>
                </td>
                <td class="service-name">auth-api</td>
                <td class="mono">eu-central-1</td>
                <td>
                    <div class="user-cell">
                        <div class="avatar avatar-1">AS</div>
                        <span>A. Smith</span>
                    </div>
                </td>
                <td class="mono">03m 05s</td>
                <td class="mono">Oct 26, 14:30:12 UTC</td>
            </tr>

            <!-- Row 3: Normal / Failed -->
            <tr>
                <td class="checkbox-cell"><input type="checkbox" aria-label="Select row"></td>
                <td>
                    <div class="status status-failed">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                        Failed
                    </div>
                </td>
                <td class="service-name">billing-worker</td>
                <td class="mono">us-west-2</td>
                <td>
                    <div class="user-cell">
                        <div class="avatar avatar-2">SC</div>
                        <span>S. Connor</span>
                    </div>
                </td>
                <td class="mono">00m 45s</td>
                <td class="mono">Oct 26, 14:28:55 UTC</td>
            </tr>

            <!-- Row 4: Normal -->
            <tr>
                <td class="checkbox-cell"><input type="checkbox" aria-label="Select row"></td>
                <td>
                    <div class="status status-success">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                        Success
                    </div>
                </td>
                <td class="service-name">search-indexer</td>
                <td class="mono">ap-northeast-1</td>
                <td>
                    <div class="user-cell">
                        <div class="avatar avatar-3">AP</div>
                        <span>A. Patel</span>
                    </div>
                </td>
                <td class="mono">04m 12s</td>
                <td class="mono">Oct 26, 14:15:00 UTC</td>
            </tr>

            <!-- Row 5: Normal -->
            <tr>
                <td class="checkbox-cell"><input type="checkbox" aria-label="Select row"></td>
                <td>
                    <div class="status status-success">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                        Success
                    </div>
                </td>
                <td class="service-name">cache-node</td>
                <td class="mono">us-east-1</td>
                <td>
                    <div class="user-cell">
                        <div class="avatar avatar-bot">DB</div>
                        <span>deploy-bot</span>
                    </div>
                </td>
                <td class="mono">00m 18s</td>
                <td class="mono">Oct 26, 13:50:22 UTC</td>
            </tr>

            <!-- Row 6: Normal / Pending -->
            <tr>
                <td class="checkbox-cell"><input type="checkbox" aria-label="Select row"></td>
                <td>
                    <div class="status status-pending">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                        Pending
                    </div>
                </td>
                <td class="service-name">notification-svc</td>
                <td class="mono">global</td>
                <td>
                    <div class="user-cell">
                        <div class="avatar avatar-sys">SY</div>
                        <span>System</span>
                    </div>
                </td>
                <td class="mono">--</td>
                <td class="mono">Oct 26, 13:45:00 UTC</td>
            </tr>

            <!-- Row 7: Normal -->
            <tr>
                <td class="checkbox-cell"><input type="checkbox" aria-label="Select row"></td>
                <td>
                    <div class="status status-success">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                        Success
                    </div>
                </td>
                <td class="service-name">analytics-pipe</td>
                <td class="mono">eu-west-1</td>
                <td>
                    <div class="user-cell">
                        <div class="avatar avatar-1">MR</div>
                        <span>M. Rossi</span>
                    </div>
                </td>
                <td class="mono">12m 30s</td>
                <td class="mono">Oct 26, 12:10:45 UTC</td>
            </tr>

            <!-- Row 8: Normal -->
            <tr>
                <td class="checkbox-cell"><input type="checkbox" aria-label="Select row"></td>
                <td>
                    <div class="status status-success">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                        Success
                    </div>
                </td>
                <td class="service-name">db-migration</td>
                <td class="mono">us-east-1</td>
                <td>
                    <div class="user-cell">
                        <div class="avatar avatar-1">AS</div>
                        <span>A. Smith</span>
                    </div>
                </td>
                <td class="mono">45m 10s</td>
                <td class="mono">Oct 26, 10:05:01 UTC</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"
}