Copy Build a query-performance workbench with Tailwind CSS. Include database and time-range filters, p95 latency and throughput metrics, a ranked query table with calls, rows, duration, and trend, plus a detail panel showing the selected SQL, execution-plan steps, and a recommendation. Add JavaScript that selects rows, updates the detail panel from data, and filters to slow queries only.<div class="min-h-screen bg-neutral-100 p-5"><section class="mx-auto max-w-6xl overflow-hidden rounded-2xl border border-neutral-200 bg-white shadow-sm"><header class="flex flex-col gap-4 border-b border-neutral-200 px-5 py-4 sm:flex-row sm:items-center"><div class="flex-1"><h1 class="font-semibold text-neutral-900">Query performance</h1><p class="text-xs text-neutral-400">production-primary · sampled continuously</p></div><select class="rounded-lg border border-neutral-200 px-3 py-2 text-xs"><option>Postgres production</option><option>Postgres analytics</option></select><select class="rounded-lg border border-neutral-200 px-3 py-2 text-xs"><option>Last hour</option><option>Last 24 hours</option></select><label class="flex items-center gap-2 text-xs text-neutral-500"><input id="slowOnly" type="checkbox" /> Slow only</label></header><div class="grid border-b border-neutral-200 sm:grid-cols-3"><div class="p-5"><p class="text-xs text-neutral-400">p95 latency</p><strong class="mt-1 block text-2xl text-neutral-900">184 ms</strong><span class="text-xs text-red-600">↑ 23% from baseline</span></div><div class="border-t p-5 sm:border-l sm:border-t-0"><p class="text-xs text-neutral-400">Queries / second</p><strong class="mt-1 block text-2xl text-neutral-900">2,841</strong><span class="text-xs text-green-600">Healthy throughput</span></div><div class="border-t p-5 sm:border-l sm:border-t-0"><p class="text-xs text-neutral-400">Time in database</p><strong class="mt-1 block text-2xl text-neutral-900">31.6%</strong><span class="text-xs text-neutral-400">of request duration</span></div></div><div class="grid lg:grid-cols-[1.15fr_0.85fr]"><div class="overflow-x-auto border-b lg:border-b-0 lg:border-r"><table class="w-full text-left text-xs"><thead class="bg-neutral-50 text-neutral-400"><tr><th class="px-4 py-3 font-medium">Query</th><th class="px-3 py-3 font-medium">Calls</th><th class="px-3 py-3 font-medium">p95</th><th class="px-3 py-3 font-medium">Trend</th></tr></thead><tbody id="queryRows"><tr data-query="orders" data-slow="true" class="cursor-pointer border-t border-neutral-100 bg-amber-50"><td class="max-w-xs truncate px-4 py-3 font-mono">SELECT orders JOIN customers</td><td class="px-3 py-3">18.4k</td><td class="px-3 py-3 text-red-600">812 ms</td><td class="px-3 py-3">↑ 41%</td></tr><tr data-query="events" data-slow="false" class="cursor-pointer border-t border-neutral-100"><td class="max-w-xs truncate px-4 py-3 font-mono">INSERT INTO events</td><td class="px-3 py-3">92.1k</td><td class="px-3 py-3">24 ms</td><td class="px-3 py-3">→ 2%</td></tr><tr data-query="accounts" data-slow="true" class="cursor-pointer border-t border-neutral-100"><td class="max-w-xs truncate px-4 py-3 font-mono">UPDATE accounts SET balance</td><td class="px-3 py-3">7.8k</td><td class="px-3 py-3 text-amber-600">436 ms</td><td class="px-3 py-3">↑ 18%</td></tr></tbody></table></div><aside class="p-5"><p class="text-xs font-semibold uppercase tracking-wider text-neutral-400">Selected query</p><pre id="querySql" class="mt-3 overflow-x-auto rounded-xl bg-neutral-950 p-4 text-xs leading-5 text-cyan-200"></pre><div id="queryPlan" class="mt-4 space-y-2"></div><div class="mt-4 rounded-xl bg-violet-50 p-4"><p class="text-xs font-semibold text-violet-800">Recommendation</p><p id="queryAdvice" class="mt-1 text-xs leading-5 text-violet-700"></p></div></aside></div></section></div>var queryData = { orders: { sql: "SELECT o.id, c.tier FROM orders o JOIN customers c ON c.id = o.customer_id WHERE o.created_at > $1", plan: ["Sequential scan · orders", "Hash join · customers", "Sort · created_at"], advice: "Add a composite index on orders(created_at, customer_id)." }, events: { sql: "INSERT INTO events (type, payload) VALUES ($1, $2)", plan: ["Insert · events", "WAL flush"], advice: "This query is healthy. No index change recommended." }, accounts: { sql: "UPDATE accounts SET balance = balance + $1 WHERE id = $2", plan: ["Index scan · accounts_pkey", "Row lock wait · 311 ms"], advice: "Batch updates by account and retry lock conflicts with jitter." } }; var rows = [].slice.call(document.querySelectorAll("[data-query]")); function selectQuery(row) { var item = queryData[row.getAttribute("data-query")]; rows.forEach(function (candidate) { candidate.classList.toggle("bg-amber-50", candidate === row); }); document.getElementById("querySql").textContent = item.sql; document.getElementById("queryPlan").innerHTML = item.plan.map(function (step, index) { return '<div class="flex gap-3 rounded-lg border border-neutral-100 p-2.5 text-xs"><span class="text-neutral-300">' + (index + 1) + '</span><span class="text-neutral-600">' + step + '</span></div>'; }).join(""); document.getElementById("queryAdvice").textContent = item.advice; } rows.forEach(function (row) { row.addEventListener("click", function () { selectQuery(row); }); }); document.getElementById("slowOnly").addEventListener("change", function () { var checked = this.checked; rows.forEach(function (row) { row.classList.toggle("hidden", checked && row.getAttribute("data-slow") !== "true"); }); }); selectQuery(rows[0]); 