# Tablet ops dashboard grid > **Build brief for a coding agent.** Rebuild this piece in the reader's stack. If they haven't said which stack, ask once, then default to semantic HTML + CSS + a little vanilla JS. Match the numbers below; don't "improve" them. ## What it is An operations overview for a fictional platform team ("Halden Ops") on a landscape tablet: a 60px top bar with a health dot, environment label and a four-segment time control, then a 3-column × 2-row card grid. The wide card is a single-series requests line chart with a soft area fill, a dashed crosshair and a tooltip that follows the pointer; next to it a half-circle gauge draws its arc with a stroke-dashoffset transition; the second row holds a live event feed that prepends a row every 4 seconds with a slide-in, a p95 latency bar strip and a region availability list. Everything numeric is Chivo Mono; headings and big numbers are Chivo. One teal series colour; green, amber and red are reserved for status and always paired with text or an icon. ## Reference behaviour 1. Initial state: "1h" pressed. Chart shows 24 points, big number "48.2k" with "+6.1% vs. previous period". The gauge arc animates from 0 to 92% over 800ms on load. The feed already holds three rows; the clock in the top bar shows the current time and ticks every second. 2. Every 4000ms a new event row is prepended to the feed: it slides in from −10px with a fade over 360ms while its height grows from 0 to 40px; the list is capped at six rows (the oldest is removed). Rows carry an 8px status dot (green ok, amber warn, red crit), a title, a mono sub-line and a mono timestamp. 3. Click a time segment (6h / 24h / 7d): the pressed segment turns off-white with dark text; the line and area paths morph to the new series over 400ms (same point count, `transition: d`); the big number, delta and "last 6h" label update instantly. 4. Move the pointer over the chart: a dashed vertical crosshair snaps to the nearest of the 24 points, a 10px teal marker with a 2px panel-coloured ring sits on the line, and a tooltip ("52,000 rpm") floats above the point. Leaving the chart hides all three over 160ms. 5. Hover a latency bar: it turns teal and shows its value in a native tooltip; the last bar is always teal (the current bucket). 6. The region list shows four availability bars; us-e1 is amber at 97.40 and the card footer reads "us-e1 degraded since 13:50" with a warning icon in amber. 7. Nothing else is clickable; the piece is a live screen. Reloading replays the gauge draw. ## Structure ``` 1180 × 820 ┌──────────────────────────────────────────────────────────────────────────────┐ │ ● Halden Ops prod · eu-north-1 ( 1h | 6h | 24h | 7d ) 14:32:08 │ 60 ├──────────────────────────┬──────────────────────────┬────────────────────────┤ │ REQUESTS PER MINUTE last 1h │ ERROR BUDGET 30-day │ │ 48.2k │ ╭────────╮ │ │ +6.1% vs. previous period │ ╱ ╲ │ gauge 180×110 │ ╱╲ ╱╲___╱‾╲ │ 92% │ │ ‾╱ ‾‾‾╱ ‾‾╲_ ← line 2px, area 14% │ remaining · 0.07% │ │ ┊ crosshair + tooltip on hover │ (ok) Within SLO │ ├──────────────────────────┼──────────────────────────┼────────────────────────┤ │ LIVE EVENTS every 4s │ P95 LATENCY per 5 min │ REGION HEALTH │ │ ● Deploy finished 14:32 │ 184ms │ eu-n1 ▬▬▬▬▬▬▬▬▬ 99.98 │ │ ● Autoscaled… 14:32 │ −12ms after v2.14 │ eu-w2 ▬▬▬▬▬▬▬▬▬ 99.95 │ │ ● Latency spike… 14:32 │ ▂▃▅▄▃▂▃▅▆▅▄▃▂▃▄▅▆▅▄▃▂▃▄▆ │ us-e1 ▬▬▬▬▬▬▬ 97.40 │ │ …(max 6 rows) │ │ ap-s1 ▬▬▬▬▬▬▬▬▬ 99.91 │ │ │ │ (!) us-e1 degraded… │ └──────────────────────────┴──────────────────────────┴────────────────────────┘ grid: 3 cols, 2 rows, 16px gap, 24px side padding; cards 20px padding, 12px radius ``` - `
` — `

` with health dot, `.env` label, `.seg[role=group]` of four `