From 5140c66469e8ee3f53d588854c8e64b256468e53 Mon Sep 17 00:00:00 2001
From: abap34 <abap0002@gmail.com>
Date: Thu, 9 Apr 2026 01:23:46 +0900
Subject: [PATCH] Redesign benchmark dashboard with clean monotone style

- Replace warm-toned palette with black/white/gray monotone
- Add sticky topbar, flat bordered panels, simplified tab bar
- Add gradient area fill and axis labels to SVG charts
- Add delta color coding (red/green) in comparison table
- Restructure PR sidebar as a bordered list with left-border active state
- Add benchmark count stat card

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 scripts/benchmark_pages/app.js     | 468 +++++++++---------
 scripts/benchmark_pages/index.html | 244 +++++-----
 scripts/benchmark_pages/styles.css | 749 ++++++++++++++++++++---------
 3 files changed, 890 insertions(+), 571 deletions(-)

diff --git a/scripts/benchmark_pages/app.js b/scripts/benchmark_pages/app.js
index d41a0ae..b7a701f 100644
--- a/scripts/benchmark_pages/app.js
+++ b/scripts/benchmark_pages/app.js
@@ -1,8 +1,6 @@
 async function loadDashboard() {
   const response = await fetch("./dashboard.json", { cache: "no-store" });
-  if (!response.ok) {
-    throw new Error("Failed to load dashboard data");
-  }
+  if (!response.ok) throw new Error("Failed to load dashboard data");
   return response.json();
 }
 
@@ -11,56 +9,56 @@ function shortCommit(commit) {
 }
 
 function formatMs(value) {
-  return `${value.toFixed(3)} ms`;
+  return `${value.toFixed(3)}`;
 }
 
 function formatDelta(value) {
   const sign = value > 0 ? "+" : "";
-  return `${sign}${value.toFixed(3)} ms`;
+  return `${sign}${value.toFixed(3)}`;
 }
 
 function formatDeltaPercent(value) {
-  if (!Number.isFinite(value)) {
-    return "n/a";
-  }
+  if (!Number.isFinite(value)) return "n/a";
   const sign = value > 0 ? "+" : "";
   return `${sign}${value.toFixed(1)}%`;
 }
 
 function formatTimestamp(value) {
-  return new Date(value).toLocaleString();
+  const d = new Date(value);
+  return d.toLocaleString("en-US", {
+    month: "short", day: "numeric", year: "numeric",
+    hour: "2-digit", minute: "2-digit",
+  });
 }
 
-function statusTone(status) {
-  return {
-    success: "success",
-    failure: "failure",
-    cancelled: "muted",
-    skipped: "muted",
-  }[status] || "muted";
+function formatDate(value) {
+  const d = new Date(value);
+  return d.toLocaleString("en-US", { month: "short", day: "numeric" });
+}
+
+function statusClass(status) {
+  return { success: "success", failure: "failure", cancelled: "muted", skipped: "muted" }[status] || "muted";
 }
 
 function benchmarkNames(entries) {
   const names = new Set();
-  entries.forEach((entry) => {
-    (entry.summary?.benchmarks || []).forEach((benchmark) => names.add(benchmark.name));
-  });
+  entries.forEach((e) => (e.summary?.benchmarks || []).forEach((b) => names.add(b.name)));
   return Array.from(names);
 }
 
 function benchmarkSeries(entries, benchmarkName) {
   return entries
     .map((entry) => {
-      const benchmark = (entry.summary?.benchmarks || []).find((item) => item.name === benchmarkName);
-      if (!benchmark) {
-        return null;
-      }
+      const b = (entry.summary?.benchmarks || []).find((x) => x.name === benchmarkName);
+      if (!b) return null;
       return {
         label: shortCommit(entry.commit),
+        date: formatDate(entry.updated_at || entry.created_at),
         timestamp: entry.updated_at || entry.created_at,
         href: entry.run_url,
-        value: benchmark.mean_ms,
-        meta: entry,
+        value: b.mean_ms,
+        min: b.min_ms,
+        max: b.max_ms,
       };
     })
     .filter(Boolean);
@@ -68,180 +66,188 @@ function benchmarkSeries(entries, benchmarkName) {
 
 function latestBenchmarkMap(entry) {
   const map = new Map();
-  (entry?.summary?.benchmarks || []).forEach((benchmark) => {
-    map.set(benchmark.name, benchmark);
-  });
+  (entry?.summary?.benchmarks || []).forEach((b) => map.set(b.name, b));
   return map;
 }
 
 function mainEntries(entries) {
   return entries.filter(
-    (entry) =>
-      entry.event === "push" &&
-      entry.branch === "main" &&
-      entry.summary?.bench_status === "success" &&
-      (entry.summary?.benchmarks || []).length > 0
+    (e) =>
+      e.event === "push" &&
+      e.branch === "main" &&
+      e.summary?.bench_status === "success" &&
+      (e.summary?.benchmarks || []).length > 0
   );
 }
 
 function pullRequestGroups(entries) {
   const groups = new Map();
-
   entries
-    .filter((entry) => entry.pr_number)
-    .forEach((entry) => {
-      if (!groups.has(entry.pr_number)) {
-        groups.set(entry.pr_number, []);
-      }
-      groups.get(entry.pr_number).push(entry);
+    .filter((e) => e.pr_number)
+    .forEach((e) => {
+      if (!groups.has(e.pr_number)) groups.set(e.pr_number, []);
+      groups.get(e.pr_number).push(e);
     });
 
   return Array.from(groups.entries())
     .map(([number, groupEntries]) => ({
       number,
       entries: groupEntries.sort(
-        (left, right) =>
-          new Date(left.updated_at || left.created_at) - new Date(right.updated_at || right.created_at)
+        (a, b) => new Date(a.updated_at || a.created_at) - new Date(b.updated_at || b.created_at)
       ),
     }))
-    .sort((left, right) => {
-      const leftLatest = left.entries[left.entries.length - 1];
-      const rightLatest = right.entries[right.entries.length - 1];
-      return new Date(rightLatest.updated_at || rightLatest.created_at) -
-        new Date(leftLatest.updated_at || leftLatest.created_at);
+    .sort((a, b) => {
+      const al = a.entries[a.entries.length - 1];
+      const bl = b.entries[b.entries.length - 1];
+      return new Date(bl.updated_at || bl.created_at) - new Date(al.updated_at || al.created_at);
     });
 }
 
 function setText(id, value) {
-  document.getElementById(id).textContent = value;
+  const el = document.getElementById(id);
+  if (el) el.textContent = value;
 }
 
 function setLink(id, href) {
-  const element = document.getElementById(id);
+  const el = document.getElementById(id);
+  if (!el) return;
   if (!href) {
-    element.classList.add("hidden");
-    element.removeAttribute("href");
-    return;
+    el.classList.add("hidden");
+    el.removeAttribute("href");
+  } else {
+    el.classList.remove("hidden");
+    el.href = href;
   }
-  element.classList.remove("hidden");
-  element.href = href;
 }
 
 function updateUrl(state) {
   const url = new URL(window.location.href);
-  if (state.selectedPrNumber) {
-    url.searchParams.set("pr", String(state.selectedPrNumber));
-  } else {
-    url.searchParams.delete("pr");
-  }
-  if (state.selectedBenchmark) {
-    url.searchParams.set("benchmark", state.selectedBenchmark);
-  } else {
-    url.searchParams.delete("benchmark");
-  }
+  state.selectedPrNumber
+    ? url.searchParams.set("pr", String(state.selectedPrNumber))
+    : url.searchParams.delete("pr");
+  state.selectedBenchmark
+    ? url.searchParams.set("benchmark", state.selectedBenchmark)
+    : url.searchParams.delete("benchmark");
   window.history.replaceState({}, "", url);
 }
 
 function renderTabs(containerId, names, selectedName, onSelect) {
   const container = document.getElementById(containerId);
+  if (!container) return;
   container.innerHTML = "";
-
   names.forEach((name) => {
-    const button = document.createElement("button");
-    button.type = "button";
-    button.className = `tab${name === selectedName ? " active" : ""}`;
-    button.textContent = name;
-    button.addEventListener("click", () => onSelect(name));
-    container.appendChild(button);
+    const btn = document.createElement("button");
+    btn.type = "button";
+    btn.className = `tab${name === selectedName ? " active" : ""}`;
+    btn.textContent = name;
+    btn.addEventListener("click", () => onSelect(name));
+    container.appendChild(btn);
   });
 }
 
 function renderChart(svgId, series, captionId) {
   const svg = document.getElementById(svgId);
   const caption = document.getElementById(captionId);
+  if (!svg) return;
 
   if (series.length === 0) {
     svg.innerHTML = "";
-    caption.textContent = "No data available";
+    if (caption) caption.textContent = "No data";
     return;
   }
 
-  caption.textContent = `${series.length} run(s) tracked`;
-
-  const width = 960;
-  const height = 340;
-  const margin = { top: 24, right: 24, bottom: 48, left: 64 };
-  const innerWidth = width - margin.left - margin.right;
-  const innerHeight = height - margin.top - margin.bottom;
-
-  const values = series.map((point) => point.value);
-  const min = Math.min(...values);
-  const max = Math.max(...values);
-  const span = Math.max(max - min, 1);
-  const labelStep = Math.max(1, Math.ceil(series.length / 6));
-
-  const x = (index) =>
-    margin.left + (series.length === 1 ? innerWidth / 2 : (innerWidth * index) / (series.length - 1));
-  const y = (value) =>
-    margin.top + innerHeight - ((value - min) / span) * innerHeight;
-
-  const path = series
-    .map((point, index) => `${index === 0 ? "M" : "L"} ${x(index)} ${y(point.value)}`)
-    .join(" ");
-
-  const grid = [0, 0.25, 0.5, 0.75, 1]
-    .map((ratio) => {
-      const yPos = margin.top + innerHeight * ratio;
-      return `<line class="chart-grid" x1="${margin.left}" y1="${yPos}" x2="${width - margin.right}" y2="${yPos}" />`;
-    })
-    .join("");
-
-  const labels = series
-    .map((point, index) => {
-      if (index % labelStep !== 0 && index !== series.length - 1) {
-        return "";
-      }
-      return `<text class="chart-label" x="${x(index)}" y="${height - 14}" text-anchor="middle">${point.label}</text>`;
-    })
-    .join("");
-
-  const points = series
-    .map((point, index) => {
-      const xPos = x(index);
-      const yPos = y(point.value);
-      return `
-        <a href="${point.href}" target="_blank" rel="noreferrer">
-          <circle class="chart-point" cx="${xPos}" cy="${yPos}" r="5" />
-        </a>
-        <text class="chart-value" x="${xPos}" y="${yPos - 12}" text-anchor="middle">${point.value.toFixed(2)}</text>
-      `;
-    })
-    .join("");
+  if (caption) caption.textContent = `${series.length} run${series.length !== 1 ? "s" : ""}`;
+
+  const W = 960;
+  const H = 260;
+  const pad = { top: 28, right: 32, bottom: 44, left: 72 };
+  const iW = W - pad.left - pad.right;
+  const iH = H - pad.top - pad.bottom;
+
+  const values = series.map((p) => p.value);
+  const rawMin = Math.min(...values);
+  const rawMax = Math.max(...values);
+  const span = Math.max(rawMax - rawMin, 0.1);
+  const yMin = rawMin - span * 0.15;
+  const yMax = rawMax + span * 0.15;
+  const ySpan = yMax - yMin;
+
+  const xPos = (i) =>
+    pad.left + (series.length === 1 ? iW / 2 : (iW * i) / (series.length - 1));
+  const yPos = (v) =>
+    pad.top + iH - ((v - yMin) / ySpan) * iH;
+
+  // grid & axis labels
+  const gridCount = 4;
+  let gridLines = "";
+  let yLabels = "";
+  for (let i = 0; i <= gridCount; i++) {
+    const ratio = i / gridCount;
+    const y = pad.top + iH * ratio;
+    const val = yMax - (yMax - yMin) * ratio;
+    gridLines += `<line class="chart-grid-line" x1="${pad.left}" y1="${y}" x2="${W - pad.right}" y2="${y}" />`;
+    yLabels += `<text class="chart-axis-label" x="${pad.left - 8}" y="${y + 4}" text-anchor="end">${val.toFixed(2)}</text>`;
+  }
+
+  // x-axis labels — show up to 8
+  const labelStep = Math.max(1, Math.ceil(series.length / 8));
+  let xLabels = "";
+  series.forEach((p, i) => {
+    if (i % labelStep !== 0 && i !== series.length - 1) return;
+    xLabels += `<text class="chart-tick" x="${xPos(i)}" y="${H - 6}" text-anchor="middle">${p.label}</text>`;
+  });
+
+  // line path
+  const linePath = series.map((p, i) => `${i === 0 ? "M" : "L"}${xPos(i)},${yPos(p.value)}`).join(" ");
+
+  // area path (closes at bottom)
+  const areaPath =
+    linePath +
+    ` L${xPos(series.length - 1)},${pad.top + iH} L${xPos(0)},${pad.top + iH} Z`;
+
+  // dots + value labels (only for small series or last point)
+  const showAllLabels = series.length <= 8;
+  let dots = "";
+  series.forEach((p, i) => {
+    const cx = xPos(i);
+    const cy = yPos(p.value);
+    const isLast = i === series.length - 1;
+    dots += `
+      <a href="${p.href}" target="_blank" rel="noreferrer">
+        <circle class="chart-dot" cx="${cx}" cy="${cy}" r="4">
+          <title>${p.date}: ${p.value.toFixed(3)} ms</title>
+        </circle>
+      </a>`;
+    if (showAllLabels || isLast) {
+      const anchor = cx < pad.left + 40 ? "start" : cx > W - pad.right - 40 ? "end" : "middle";
+      dots += `<text class="chart-value-label" x="${cx}" y="${cy - 10}" text-anchor="${anchor}">${p.value.toFixed(2)}</text>`;
+    }
+  });
 
   svg.innerHTML = `
-    ${grid}
-    <line class="chart-axis" x1="${margin.left}" y1="${height - margin.bottom}" x2="${width - margin.right}" y2="${height - margin.bottom}" />
-    <line class="chart-axis" x1="${margin.left}" y1="${margin.top}" x2="${margin.left}" y2="${height - margin.bottom}" />
-    <path class="chart-line" d="${path}" />
-    ${points}
-    ${labels}
-    <text class="chart-label" x="${margin.left}" y="${margin.top - 8}">${formatMs(max)}</text>
-    <text class="chart-label" x="${margin.left}" y="${height - margin.bottom + 18}">${formatMs(min)}</text>
+    ${gridLines}
+    <line class="chart-axis-line" x1="${pad.left}" y1="${pad.top}" x2="${pad.left}" y2="${pad.top + iH}" />
+    <line class="chart-axis-line" x1="${pad.left}" y1="${pad.top + iH}" x2="${W - pad.right}" y2="${pad.top + iH}" />
+    <path class="chart-area" d="${areaPath}" />
+    <path class="chart-line" d="${linePath}" />
+    ${dots}
+    ${yLabels}
+    ${xLabels}
   `;
 }
 
 function renderMainLatestTable(entry) {
   const tbody = document.getElementById("main-latest-table");
+  if (!tbody) return;
   tbody.innerHTML = "";
-
-  (entry?.summary?.benchmarks || []).forEach((benchmark) => {
+  (entry?.summary?.benchmarks || []).forEach((b) => {
     const row = document.createElement("tr");
     row.innerHTML = `
-      <td>${benchmark.name}</td>
-      <td>${benchmark.mean_ms.toFixed(3)}</td>
-      <td>${benchmark.min_ms.toFixed(3)}</td>
-      <td>${benchmark.max_ms.toFixed(3)}</td>
-      <td>${benchmark.iterations}</td>
+      <td>${b.name}</td>
+      <td class="mono">${b.mean_ms.toFixed(3)}</td>
+      <td class="mono">${b.min_ms.toFixed(3)}</td>
+      <td class="mono">${b.max_ms.toFixed(3)}</td>
+      <td class="mono">${b.iterations}</td>
     `;
     tbody.appendChild(row);
   });
@@ -249,90 +255,103 @@ function renderMainLatestTable(entry) {
 
 function renderMeta(payload, mainRunEntries, prGroups) {
   setText("repo-name", payload.repo);
-  setText("generated-at", formatTimestamp(payload.generated_at));
+  setText("generated-at", `Updated ${formatTimestamp(payload.generated_at)}`);
   setText("main-run-count", String(mainRunEntries.length));
   setText("pr-count", String(prGroups.length));
-}
-
-function renderMainCoverageLink(entry) {
-  setLink("main-coverage-link", entry?.summary?.coverage_url || null);
+  const names = benchmarkNames(mainRunEntries.concat(...prGroups.map((g) => g.entries)));
+  setText("bench-count", String(names.length));
 }
 
 function renderPrList(groups, selectedPrNumber, onSelect) {
   const container = document.getElementById("pr-list");
+  if (!container) return;
   container.innerHTML = "";
 
+  if (groups.length === 0) {
+    const empty = document.createElement("div");
+    empty.style.cssText = "padding:24px 16px;color:var(--text-muted);font-size:13px;";
+    empty.textContent = "No pull requests yet.";
+    container.appendChild(empty);
+    return;
+  }
+
   groups.forEach((group) => {
     const latest = group.entries[group.entries.length - 1];
-    const button = document.createElement("button");
-    button.type = "button";
-    button.className = `pr-item${group.number === selectedPrNumber ? " active" : ""}`;
-    button.addEventListener("click", () => onSelect(group.number));
+    const btn = document.createElement("button");
+    btn.type = "button";
+    btn.className = `pr-item${group.number === selectedPrNumber ? " active" : ""}`;
+    btn.addEventListener("click", () => onSelect(group.number));
+
+    const num = document.createElement("div");
+    num.className = "pr-item-number";
+    num.textContent = `#${group.number}`;
 
     const title = document.createElement("div");
     title.className = "pr-item-title";
-    title.textContent = `#${group.number} ${latest.title}`;
+    title.textContent = latest.title || latest.branch;
 
-    const meta = document.createElement("div");
-    meta.className = "pr-item-meta";
-    meta.textContent = `${latest.branch} · ${shortCommit(latest.commit)} · ${formatTimestamp(
-      latest.updated_at || latest.created_at
-    )}`;
+    const foot = document.createElement("div");
+    foot.className = "pr-item-foot";
 
-    const tone = statusTone(latest.summary?.coverage_status === "failure" ? "failure" : latest.conclusion);
-    const badge = document.createElement("span");
-    badge.className = `status-badge ${tone}`;
-    badge.textContent = latest.summary?.coverage_status === "failure" ? "coverage failed" : latest.conclusion;
+    const time = document.createElement("span");
+    time.className = "pr-item-time";
+    time.textContent = formatDate(latest.updated_at || latest.created_at);
 
-    button.appendChild(title);
-    button.appendChild(meta);
-    button.appendChild(badge);
-    container.appendChild(button);
+    const tone = statusClass(
+      latest.summary?.coverage_status === "failure" ? "failure" : latest.conclusion
+    );
+    const badge = document.createElement("span");
+    badge.className = `inline-badge ${tone}`;
+    badge.textContent =
+      latest.summary?.coverage_status === "failure" ? "cov failed" : latest.conclusion;
+
+    foot.appendChild(time);
+    foot.appendChild(badge);
+    btn.appendChild(num);
+    btn.appendChild(title);
+    btn.appendChild(foot);
+    container.appendChild(btn);
   });
 }
 
 function renderStatusBadges(entry) {
   const container = document.getElementById("pr-statuses");
+  if (!container) return;
   container.innerHTML = "";
 
-  const badges = [
-    ["tests", entry.summary?.test_status, `${entry.summary?.tests?.passed || 0} passed`],
-    ["bench", entry.summary?.bench_status, `${(entry.summary?.benchmarks || []).length} benchmarks`],
-    ["coverage", entry.summary?.coverage_status, entry.summary?.coverage_summary || "Unavailable"],
+  const items = [
+    ["Tests", entry.summary?.test_status, `${entry.summary?.tests?.passed || 0} passed`],
+    ["Bench", entry.summary?.bench_status, `${(entry.summary?.benchmarks || []).length} benchmarks`],
+    ["Coverage", entry.summary?.coverage_status, entry.summary?.coverage_summary || "Unavailable"],
   ];
 
-  badges.forEach(([label, status, detail]) => {
+  items.forEach(([label, status, detail]) => {
     const badge = document.createElement("div");
-    badge.className = `status-card ${statusTone(status)}`;
-    const name = document.createElement("div");
-    name.className = "status-name";
-    name.textContent = label;
-    const value = document.createElement("div");
-    value.className = "status-detail";
-    value.textContent = detail;
-    badge.appendChild(name);
-    badge.appendChild(value);
+    badge.className = `status-badge ${statusClass(status)}`;
+    badge.innerHTML = `<span class="badge-label">${label}</span><span class="badge-value">${detail}</span>`;
     container.appendChild(badge);
   });
 }
 
 function renderComparisonTable(prEntry, mainEntry) {
   const tbody = document.getElementById("pr-compare-table");
+  if (!tbody) return;
   tbody.innerHTML = "";
 
   const baseline = latestBenchmarkMap(mainEntry);
-  (prEntry.summary?.benchmarks || []).forEach((benchmark) => {
-    const base = baseline.get(benchmark.name);
-    const delta = base ? benchmark.mean_ms - base.mean_ms : NaN;
-    const deltaPercent = base ? (delta / base.mean_ms) * 100 : NaN;
+  (prEntry.summary?.benchmarks || []).forEach((b) => {
+    const base = baseline.get(b.name);
+    const delta = base ? b.mean_ms - base.mean_ms : NaN;
+    const pct = base ? (delta / base.mean_ms) * 100 : NaN;
+    const deltaClass = !base ? "" : delta > 0 ? " class=\"positive\"" : delta < 0 ? " class=\"negative\"" : "";
 
     const row = document.createElement("tr");
     row.innerHTML = `
-      <td>${benchmark.name}</td>
-      <td>${base ? base.mean_ms.toFixed(3) : "n/a"}</td>
-      <td>${benchmark.mean_ms.toFixed(3)}</td>
-      <td>${base ? formatDelta(delta) : "n/a"}</td>
-      <td>${base ? formatDeltaPercent(deltaPercent) : "n/a"}</td>
+      <td>${b.name}</td>
+      <td class="mono">${base ? base.mean_ms.toFixed(3) : "n/a"}</td>
+      <td class="mono">${b.mean_ms.toFixed(3)}</td>
+      <td class="mono"${deltaClass}>${base ? formatDelta(delta) : "n/a"}</td>
+      <td class="mono"${deltaClass}>${base ? formatDeltaPercent(pct) : "n/a"}</td>
     `;
     tbody.appendChild(row);
   });
@@ -340,6 +359,7 @@ function renderComparisonTable(prEntry, mainEntry) {
 
 function renderRunHistory(entries) {
   const container = document.getElementById("pr-run-history");
+  if (!container) return;
   container.innerHTML = "";
 
   entries
@@ -347,25 +367,38 @@ function renderRunHistory(entries) {
     .reverse()
     .forEach((entry) => {
       const item = document.createElement("a");
-      item.className = "history-item";
+      item.className = "run-history-item";
       item.href = entry.run_url;
       item.target = "_blank";
       item.rel = "noreferrer";
 
-      const top = document.createElement("div");
-      top.className = "history-top";
-      top.textContent = `${shortCommit(entry.commit)} · ${formatTimestamp(
-        entry.updated_at || entry.created_at
-      )}`;
+      const commit = document.createElement("span");
+      commit.className = "run-history-commit";
+      commit.textContent = shortCommit(entry.commit);
+
+      const info = document.createElement("div");
+      info.className = "run-history-info";
 
-      const bottom = document.createElement("div");
-      bottom.className = "history-bottom";
-      bottom.textContent = `${entry.summary?.tests?.passed || 0} tests passed · ${
-        entry.summary?.coverage_summary || "coverage unavailable"
+      const time = document.createElement("div");
+      time.className = "run-history-time";
+      time.textContent = formatTimestamp(entry.updated_at || entry.created_at);
+
+      const stats = document.createElement("div");
+      stats.className = "run-history-stats";
+      stats.textContent = `${entry.summary?.tests?.passed || 0} passed · ${
+        entry.summary?.coverage_summary || "coverage n/a"
       }`;
 
-      item.appendChild(top);
-      item.appendChild(bottom);
+      const tone = statusClass(entry.conclusion);
+      const badge = document.createElement("span");
+      badge.className = `inline-badge ${tone}`;
+      badge.textContent = entry.conclusion;
+
+      info.appendChild(time);
+      info.appendChild(stats);
+      item.appendChild(commit);
+      item.appendChild(info);
+      item.appendChild(badge);
       container.appendChild(item);
     });
 }
@@ -373,6 +406,7 @@ function renderRunHistory(entries) {
 function renderPrDetail(group, mainEntry, selectedBenchmark, onSelectBenchmark) {
   const empty = document.getElementById("pr-empty");
   const detail = document.getElementById("pr-detail");
+  if (!empty || !detail) return;
 
   if (!group) {
     empty.classList.remove("hidden");
@@ -384,10 +418,13 @@ function renderPrDetail(group, mainEntry, selectedBenchmark, onSelectBenchmark)
   detail.classList.remove("hidden");
 
   const latest = group.entries[group.entries.length - 1];
-  document.getElementById("pr-title").textContent = `#${group.number} ${latest.title}`;
-  document.getElementById("pr-meta").textContent = `${latest.branch} · latest ${formatTimestamp(
-    latest.updated_at || latest.created_at
-  )} · ${group.entries.length} run(s)`;
+  setText("pr-title", `#${group.number} ${latest.title || latest.branch}`);
+  setText(
+    "pr-meta",
+    `${latest.branch} · ${shortCommit(latest.commit)} · ${formatTimestamp(
+      latest.updated_at || latest.created_at
+    )} · ${group.entries.length} run${group.entries.length !== 1 ? "s" : ""}`
+  );
   setLink("pr-run-link", latest.run_url);
   setLink("pr-preview-link", latest.summary?.preview_url || null);
   setLink("pr-coverage-link", latest.summary?.coverage_url || null);
@@ -398,7 +435,7 @@ function renderPrDetail(group, mainEntry, selectedBenchmark, onSelectBenchmark)
   const benchmark = names.includes(selectedBenchmark) ? selectedBenchmark : names[0];
   renderTabs("pr-benchmark-tabs", names, benchmark, onSelectBenchmark);
 
-  document.getElementById("pr-chart-title").textContent = benchmark;
+  setText("pr-chart-title", benchmark || "—");
   renderChart("pr-chart", benchmarkSeries(group.entries, benchmark), "pr-chart-caption");
   renderComparisonTable(latest, mainEntry);
   renderRunHistory(group.entries);
@@ -406,15 +443,18 @@ function renderPrDetail(group, mainEntry, selectedBenchmark, onSelectBenchmark)
 
 function renderDashboard(payload) {
   const allEntries = payload.entries || [];
+
   if (allEntries.length === 0) {
     setText("repo-name", payload.repo || "Unknown");
-    setText("generated-at", formatTimestamp(payload.generated_at || new Date().toISOString()));
+    setText("generated-at", `Updated ${formatTimestamp(payload.generated_at || new Date().toISOString())}`);
     setText("main-run-count", "0");
     setText("pr-count", "0");
-    renderMainCoverageLink(null);
+    setText("bench-count", "0");
+    setLink("main-coverage-link", null);
     renderPrDetail(null, null, null, () => {});
     return;
   }
+
   const mainRunEntries = mainEntries(allEntries);
   const prGroups = pullRequestGroups(allEntries);
   const mainNames = benchmarkNames(mainRunEntries);
@@ -427,9 +467,9 @@ function renderDashboard(payload) {
 
   function render() {
     const latestMain = mainRunEntries[mainRunEntries.length - 1];
-    const selectedPrGroup = prGroups.find((group) => group.number === state.selectedPrNumber) || null;
-    const prBenchmarkNames = selectedPrGroup ? benchmarkNames(selectedPrGroup.entries) : [];
-    const availableNames = mainNames.length > 0 ? mainNames : prBenchmarkNames;
+    const selectedPrGroup = prGroups.find((g) => g.number === state.selectedPrNumber) || null;
+    const prBenchNames = selectedPrGroup ? benchmarkNames(selectedPrGroup.entries) : [];
+    const availableNames = mainNames.length > 0 ? mainNames : prBenchNames;
 
     if (!availableNames.includes(state.selectedBenchmark)) {
       state.selectedBenchmark = availableNames[0];
@@ -437,18 +477,15 @@ function renderDashboard(payload) {
 
     updateUrl(state);
     renderMeta(payload, mainRunEntries, prGroups);
-    renderMainCoverageLink(latestMain);
+    setLink("main-coverage-link", latestMain?.summary?.coverage_url || null);
+
     renderTabs("main-benchmark-tabs", availableNames, state.selectedBenchmark, (name) => {
       state.selectedBenchmark = name;
       render();
     });
 
-    document.getElementById("main-chart-title").textContent = state.selectedBenchmark || "No benchmark";
-    renderChart(
-      "main-chart",
-      benchmarkSeries(mainRunEntries, state.selectedBenchmark),
-      "main-chart-caption"
-    );
+    setText("main-chart-title", state.selectedBenchmark || "No benchmark data");
+    renderChart("main-chart", benchmarkSeries(mainRunEntries, state.selectedBenchmark), "main-chart-caption");
     renderMainLatestTable(latestMain);
 
     renderPrList(prGroups, state.selectedPrNumber, (number) => {
@@ -468,5 +505,8 @@ function renderDashboard(payload) {
 loadDashboard()
   .then(renderDashboard)
   .catch((error) => {
-    document.body.innerHTML = `<pre>${error.message}</pre>`;
+    document.body.innerHTML = `
+      <div style="display:flex;align-items:center;justify-content:center;min-height:100vh;font-family:monospace;color:#555;">
+        Failed to load dashboard: ${error.message}
+      </div>`;
   });
diff --git a/scripts/benchmark_pages/index.html b/scripts/benchmark_pages/index.html
index b44772f..cce977a 100644
--- a/scripts/benchmark_pages/index.html
+++ b/scripts/benchmark_pages/index.html
@@ -8,143 +8,151 @@
   </head>
   <body>
     <div class="page-shell">
-      <header class="hero">
-        <div class="eyebrow">ALMO / Quality Dashboard</div>
-        <h1>Main の推移と PR ごとの確認を、同じページで見られるようにする。</h1>
-        <p class="hero-copy">
-          `main` のベンチマーク推移、最近の PR の最新結果、PR ごとの再実行履歴と
-          `main` との差分をまとめて確認できます。
-        </p>
+
+      <header class="topbar">
+        <div class="topbar-left">
+          <span class="topbar-logo">ALMO</span>
+          <div class="topbar-sep"></div>
+          <span class="topbar-title">Benchmark Dashboard</span>
+        </div>
+        <span class="topbar-meta" id="generated-at"></span>
       </header>
 
-      <section class="meta-grid">
-        <article class="meta-card">
-          <div class="meta-label">Repository</div>
-          <div class="meta-value" id="repo-name">Loading...</div>
-        </article>
-        <article class="meta-card">
-          <div class="meta-label">Generated</div>
-          <div class="meta-value" id="generated-at">Loading...</div>
-        </article>
-        <article class="meta-card">
-          <div class="meta-label">Main Runs</div>
-          <div class="meta-value" id="main-run-count">0</div>
-        </article>
-        <article class="meta-card">
-          <div class="meta-label">Tracked PRs</div>
-          <div class="meta-value" id="pr-count">0</div>
-        </article>
-      </section>
-
-      <section class="panel">
-        <div class="section-head">
-          <div>
-            <div class="section-title">Main Trend</div>
-            <div class="section-caption">
-              `main` ブランチの成功 run をベースラインとして時系列で表示します。
-            </div>
+      <div class="main-content">
+
+        <div class="stats-row">
+          <div class="stat-cell">
+            <div class="stat-label">Repository</div>
+            <div class="stat-value mono" id="repo-name">—</div>
+          </div>
+          <div class="stat-cell">
+            <div class="stat-label">Main Runs</div>
+            <div class="stat-value" id="main-run-count">0</div>
+          </div>
+          <div class="stat-cell">
+            <div class="stat-label">Tracked PRs</div>
+            <div class="stat-value" id="pr-count">0</div>
+          </div>
+          <div class="stat-cell">
+            <div class="stat-label">Benchmarks</div>
+            <div class="stat-value" id="bench-count">0</div>
           </div>
-          <a id="main-coverage-link" class="run-link hidden" href="#" target="_blank" rel="noreferrer">
-            Open coverage
-          </a>
-        </div>
-        <div id="main-benchmark-tabs" class="tab-row"></div>
-        <div class="chart-head">
-          <div class="chart-title" id="main-chart-title">Loading...</div>
-          <div class="chart-caption" id="main-chart-caption"></div>
         </div>
-        <svg id="main-chart" viewBox="0 0 960 340" preserveAspectRatio="none"></svg>
-        <table class="data-table">
-          <thead>
-            <tr>
-              <th>Benchmark</th>
-              <th>Mean (ms)</th>
-              <th>Min (ms)</th>
-              <th>Max (ms)</th>
-              <th>Iterations</th>
-            </tr>
-          </thead>
-          <tbody id="main-latest-table"></tbody>
-        </table>
-      </section>
-
-      <section class="panel">
-        <div class="section-head">
-          <div>
-            <div class="section-title">PR Explorer</div>
-            <div class="section-caption">
-              PR ごとの最新 run と再実行の推移、`main` との差分を確認できます。
+
+        <!-- Main Trend -->
+        <div class="panel">
+          <div class="panel-header">
+            <div>
+              <div class="panel-title">Main Trend</div>
+              <div class="panel-caption">main ブランチの成功 run をベースラインとして時系列で表示</div>
             </div>
+            <a id="main-coverage-link" class="panel-link hidden" href="#" target="_blank" rel="noreferrer">Coverage report →</a>
           </div>
-        </div>
 
-        <div class="pr-layout">
-          <aside class="pr-list-panel">
-            <div class="pr-list-title">Recent Pull Requests</div>
-            <div id="pr-list" class="pr-list"></div>
-          </aside>
+          <div id="main-benchmark-tabs" class="tab-row"></div>
+
+          <div class="chart-meta">
+            <span class="chart-name" id="main-chart-title">—</span>
+            <span class="chart-runs" id="main-chart-caption"></span>
+          </div>
+          <div class="chart-wrap">
+            <svg id="main-chart" viewBox="0 0 960 260" preserveAspectRatio="none">
+              <defs>
+                <linearGradient id="chart-gradient" x1="0" y1="0" x2="0" y2="1">
+                  <stop offset="0%" stop-color="#171717" stop-opacity="0.08" />
+                  <stop offset="100%" stop-color="#171717" stop-opacity="0" />
+                </linearGradient>
+              </defs>
+            </svg>
+          </div>
+
+          <table class="data-table">
+            <thead>
+              <tr>
+                <th>Benchmark</th>
+                <th>Mean (ms)</th>
+                <th>Min (ms)</th>
+                <th>Max (ms)</th>
+                <th>Iterations</th>
+              </tr>
+            </thead>
+            <tbody id="main-latest-table"></tbody>
+          </table>
+        </div>
 
-          <div class="pr-detail-panel">
-            <div id="pr-empty" class="empty-state">
-              PR data is not available yet.
+        <!-- PR Explorer -->
+        <div class="panel">
+          <div class="panel-header">
+            <div>
+              <div class="panel-title">PR Explorer</div>
+              <div class="panel-caption">PR ごとの最新 run・再実行の推移・main との差分を確認</div>
             </div>
+          </div>
+
+          <div class="pr-layout">
+            <aside class="pr-sidebar">
+              <div class="pr-sidebar-header">Pull Requests</div>
+              <div id="pr-list" class="pr-list"></div>
+            </aside>
 
-            <div id="pr-detail" class="pr-detail hidden">
-              <div class="pr-header">
-                <div>
-                  <div class="pr-title-row">
-                    <div class="section-title" id="pr-title"></div>
-                    <div class="link-row">
-                      <a id="pr-run-link" class="run-link" href="#" target="_blank" rel="noreferrer">
-                        Open run
-                      </a>
-                      <a id="pr-preview-link" class="run-link hidden" href="#" target="_blank" rel="noreferrer">
-                        Open preview
-                      </a>
-                      <a id="pr-coverage-link" class="run-link hidden" href="#" target="_blank" rel="noreferrer">
-                        Open coverage
-                      </a>
+            <div class="pr-main">
+              <div id="pr-empty" class="empty-state">PR を選択してください</div>
+
+              <div id="pr-detail" class="pr-detail hidden">
+                <div class="pr-detail-header">
+                  <div class="pr-detail-top">
+                    <div>
+                      <div class="pr-detail-title" id="pr-title"></div>
+                      <div class="pr-detail-meta" id="pr-meta"></div>
+                    </div>
+                    <div class="pr-links">
+                      <a id="pr-run-link" class="panel-link" href="#" target="_blank" rel="noreferrer">Run →</a>
+                      <a id="pr-preview-link" class="panel-link hidden" href="#" target="_blank" rel="noreferrer">Preview →</a>
+                      <a id="pr-coverage-link" class="panel-link hidden" href="#" target="_blank" rel="noreferrer">Coverage →</a>
                     </div>
                   </div>
-                  <div class="section-caption" id="pr-meta"></div>
+                  <div id="pr-statuses" class="pr-status-row"></div>
                 </div>
-                <div id="pr-statuses" class="status-row"></div>
-              </div>
 
-              <div id="pr-benchmark-tabs" class="tab-row"></div>
+                <div id="pr-benchmark-tabs" class="tab-row"></div>
+
+                <div class="chart-meta">
+                  <span class="chart-name" id="pr-chart-title"></span>
+                  <span class="chart-runs" id="pr-chart-caption"></span>
+                </div>
+                <div class="chart-wrap">
+                  <svg id="pr-chart" viewBox="0 0 960 260" preserveAspectRatio="none"></svg>
+                </div>
+
+                <div class="detail-grid">
+                  <div class="subpanel">
+                    <div class="subpanel-header">Delta vs latest main</div>
+                    <table class="data-table">
+                      <thead>
+                        <tr>
+                          <th>Benchmark</th>
+                          <th>Main (ms)</th>
+                          <th>PR (ms)</th>
+                          <th>Delta (ms)</th>
+                          <th>Delta %</th>
+                        </tr>
+                      </thead>
+                      <tbody id="pr-compare-table"></tbody>
+                    </table>
+                  </div>
+
+                  <div class="subpanel">
+                    <div class="subpanel-header">Run History</div>
+                    <div id="pr-run-history" class="run-history"></div>
+                  </div>
+                </div>
 
-              <div class="chart-head">
-                <div class="chart-title" id="pr-chart-title"></div>
-                <div class="chart-caption" id="pr-chart-caption"></div>
-              </div>
-              <svg id="pr-chart" viewBox="0 0 960 320" preserveAspectRatio="none"></svg>
-
-              <div class="detail-grid">
-                <section class="subpanel">
-                  <div class="subpanel-title">Delta vs latest main</div>
-                  <table class="data-table compact">
-                    <thead>
-                      <tr>
-                        <th>Benchmark</th>
-                        <th>Main</th>
-                        <th>PR</th>
-                        <th>Delta</th>
-                        <th>Delta %</th>
-                      </tr>
-                    </thead>
-                    <tbody id="pr-compare-table"></tbody>
-                  </table>
-                </section>
-
-                <section class="subpanel">
-                  <div class="subpanel-title">PR run history</div>
-                  <div id="pr-run-history" class="run-history"></div>
-                </section>
               </div>
             </div>
           </div>
         </div>
-      </section>
+
+      </div>
     </div>
 
     <script src="./app.js"></script>
diff --git a/scripts/benchmark_pages/styles.css b/scripts/benchmark_pages/styles.css
index 4d26477..5785ccf 100644
--- a/scripts/benchmark_pages/styles.css
+++ b/scripts/benchmark_pages/styles.css
@@ -1,434 +1,705 @@
 :root {
-  --paper: #f7f1e6;
-  --ink: #17202a;
-  --muted: #67707c;
-  --panel: rgba(255, 253, 249, 0.82);
-  --line: rgba(23, 32, 42, 0.1);
-  --accent: #d6673b;
-  --accent-strong: #8d341a;
-  --accent-soft: rgba(214, 103, 59, 0.12);
-  --success: #1f7a58;
-  --success-soft: rgba(31, 122, 88, 0.12);
-  --failure: #b94343;
-  --failure-soft: rgba(185, 67, 67, 0.12);
+  --bg: #ffffff;
+  --surface: #fafafa;
+  --surface-2: #f4f4f4;
+  --border: #e8e8e8;
+  --border-strong: #d0d0d0;
+  --text: #0d0d0d;
+  --text-sub: #555555;
+  --text-muted: #999999;
+  --text-faint: #cccccc;
+  --ink: #171717;
+  --success: #1a6b3c;
+  --success-bg: #f2faf6;
+  --success-border: #b6ddc8;
+  --failure: #991b1b;
+  --failure-bg: #fef5f5;
+  --failure-border: #f0b9b9;
+  --warn: #7a5c00;
+  --warn-bg: #fffbee;
+  --warn-border: #e8d870;
 }
 
 * {
   box-sizing: border-box;
+  margin: 0;
+  padding: 0;
 }
 
 body {
-  margin: 0;
-  min-height: 100vh;
-  color: var(--ink);
-  background:
-    radial-gradient(circle at top left, rgba(214, 103, 59, 0.16), transparent 28%),
-    radial-gradient(circle at bottom right, rgba(141, 52, 26, 0.12), transparent 26%),
-    linear-gradient(180deg, #fbf6ee 0%, #efe3cf 100%);
-  font-family: "Avenir Next", "Segoe UI", sans-serif;
+  background: var(--bg);
+  color: var(--text);
+  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
 }
 
-code {
-  font-family: "SF Mono", "IBM Plex Mono", monospace;
+code,
+.mono {
+  font-family: "JetBrains Mono", "SF Mono", "Fira Mono", "IBM Plex Mono", monospace;
+  font-size: 0.88em;
 }
 
+/* ─── Layout ─────────────────────────────── */
+
 .page-shell {
-  width: min(1180px, calc(100vw - 32px));
-  margin: 0 auto;
-  padding: 28px 0 56px;
+  display: grid;
+  grid-template-rows: auto 1fr;
+  min-height: 100vh;
 }
 
-.hero,
-.meta-card,
-.panel,
-.pr-list-panel,
-.subpanel {
-  background: var(--panel);
-  border: 1px solid var(--line);
-  border-radius: 24px;
-  backdrop-filter: blur(14px);
-  box-shadow: 0 22px 60px rgba(23, 32, 42, 0.08);
+.topbar {
+  border-bottom: 1px solid var(--border);
+  padding: 0 32px;
+  height: 52px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: var(--bg);
+  position: sticky;
+  top: 0;
+  z-index: 10;
 }
 
-.hero {
-  padding: 30px;
+.topbar-left {
+  display: flex;
+  align-items: center;
+  gap: 12px;
 }
 
-.eyebrow {
-  margin-bottom: 14px;
-  color: var(--accent-strong);
-  font-size: 12px;
-  letter-spacing: 0.14em;
-  text-transform: uppercase;
+.topbar-logo {
+  font-size: 15px;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  color: var(--text);
 }
 
-.hero h1 {
-  margin: 0;
-  max-width: 12ch;
-  font-size: clamp(32px, 5.4vw, 62px);
-  line-height: 0.94;
-  font-family: "Iowan Old Style", "Palatino Linotype", serif;
+.topbar-sep {
+  width: 1px;
+  height: 16px;
+  background: var(--border-strong);
 }
 
-.hero-copy {
-  margin: 18px 0 0;
-  max-width: 68ch;
-  color: var(--muted);
-  line-height: 1.7;
+.topbar-title {
+  font-size: 13px;
+  color: var(--text-sub);
 }
 
-.meta-grid {
+.topbar-meta {
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
+.main-content {
+  max-width: 1280px;
+  width: 100%;
+  margin: 0 auto;
+  padding: 32px 32px 64px;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+/* ─── Stats row ──────────────────────────── */
+
+.stats-row {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 16px;
-  margin-top: 20px;
+  gap: 1px;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  overflow: hidden;
+  background: var(--border);
 }
 
-.meta-card {
-  padding: 20px;
+.stat-cell {
+  background: var(--bg);
+  padding: 20px 24px;
 }
 
-.meta-label,
-.section-caption {
-  font-size: 13px;
-  color: var(--muted);
+.stat-label {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--text-muted);
+  font-weight: 500;
 }
 
-.meta-value,
-.section-title,
-.chart-title {
-  margin-top: 8px;
-  font-size: 24px;
+.stat-value {
+  margin-top: 6px;
+  font-size: 26px;
   font-weight: 700;
+  letter-spacing: -0.02em;
+  color: var(--text);
+  line-height: 1;
+}
+
+.stat-value.mono {
+  font-size: 18px;
 }
 
+/* ─── Panel ──────────────────────────────── */
+
 .panel {
-  margin-top: 20px;
-  padding: 22px;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  background: var(--bg);
+  overflow: hidden;
 }
 
-.section-head,
-.chart-head,
-.pr-header,
-.pr-title-row,
-.link-row {
+.panel-header {
+  padding: 18px 24px;
+  border-bottom: 1px solid var(--border);
   display: flex;
-  align-items: flex-end;
+  align-items: center;
   justify-content: space-between;
   gap: 16px;
+  background: var(--surface);
+}
+
+.panel-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text);
+  letter-spacing: -0.01em;
+}
+
+.panel-caption {
+  font-size: 12px;
+  color: var(--text-muted);
+  margin-top: 2px;
 }
 
-.chart-head {
-  margin-top: 16px;
+.panel-body {
+  padding: 24px;
 }
 
+.panel-link {
+  font-size: 12px;
+  color: var(--text-sub);
+  text-decoration: none;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 5px 10px;
+  transition: background 120ms, border-color 120ms;
+  white-space: nowrap;
+}
+
+.panel-link:hover {
+  background: var(--surface-2);
+  border-color: var(--border-strong);
+}
+
+.panel-link.hidden {
+  display: none;
+}
+
+/* ─── Tab bar ────────────────────────────── */
+
 .tab-row {
   display: flex;
   flex-wrap: wrap;
-  gap: 10px;
-  margin-top: 16px;
+  gap: 6px;
+  padding: 16px 24px;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg);
 }
 
 .tab {
-  border: 1px solid var(--line);
-  border-radius: 999px;
-  padding: 10px 14px;
-  background: rgba(255, 255, 255, 0.7);
-  color: var(--ink);
+  padding: 5px 12px;
+  border-radius: 6px;
+  border: 1px solid var(--border);
+  background: transparent;
+  color: var(--text-sub);
+  font-size: 12px;
+  font-family: inherit;
   cursor: pointer;
-  transition: 140ms ease;
+  transition: background 100ms, color 100ms, border-color 100ms;
+  white-space: nowrap;
+}
+
+.tab:hover {
+  background: var(--surface-2);
+  color: var(--text);
 }
 
-.tab:hover,
 .tab.active {
-  background: var(--accent);
+  background: var(--ink);
   color: #fff;
-  border-color: transparent;
+  border-color: var(--ink);
+}
+
+/* ─── Chart ──────────────────────────────── */
+
+.chart-wrap {
+  padding: 0 24px 8px;
+}
+
+.chart-meta {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  padding: 14px 24px 0;
+}
+
+.chart-name {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text);
+}
+
+.chart-runs {
+  font-size: 12px;
+  color: var(--text-muted);
 }
 
 #main-chart,
 #pr-chart {
   width: 100%;
-  height: 340px;
-  margin-top: 14px;
+  height: 260px;
+  display: block;
   overflow: visible;
 }
 
-.chart-grid {
-  stroke: rgba(23, 32, 42, 0.08);
+.chart-grid-line {
+  stroke: var(--border);
   stroke-width: 1;
 }
 
-.chart-axis {
-  stroke: rgba(23, 32, 42, 0.18);
-  stroke-width: 1.2;
+.chart-axis-line {
+  stroke: var(--border-strong);
+  stroke-width: 1;
+}
+
+.chart-area {
+  fill: url(#chart-gradient);
 }
 
 .chart-line {
   fill: none;
-  stroke: var(--accent);
-  stroke-width: 4;
+  stroke: var(--ink);
+  stroke-width: 2.5;
   stroke-linecap: round;
   stroke-linejoin: round;
 }
 
-.chart-point {
-  fill: #fff;
-  stroke: var(--accent);
-  stroke-width: 3;
+.chart-dot {
+  fill: var(--bg);
+  stroke: var(--ink);
+  stroke-width: 2.5;
+  cursor: pointer;
+  transition: r 100ms;
 }
 
-.chart-label,
-.chart-value {
-  font-size: 12px;
-  fill: var(--muted);
-  font-family: "SF Mono", "IBM Plex Mono", monospace;
+.chart-dot:hover {
+  r: 6;
 }
 
-.chart-value {
-  fill: var(--ink);
+.chart-tick {
+  font-size: 11px;
+  fill: var(--text-muted);
+  font-family: "JetBrains Mono", "SF Mono", monospace;
 }
 
+.chart-axis-label {
+  font-size: 11px;
+  fill: var(--text-muted);
+  font-family: "JetBrains Mono", "SF Mono", monospace;
+}
+
+.chart-value-label {
+  font-size: 11px;
+  fill: var(--text-sub);
+  font-family: "JetBrains Mono", "SF Mono", monospace;
+}
+
+/* ─── Data table ─────────────────────────── */
+
 .data-table {
   width: 100%;
   border-collapse: collapse;
-  margin-top: 18px;
 }
 
-.data-table th,
-.data-table td {
-  padding: 12px 10px;
+.data-table th {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.07em;
+  color: var(--text-muted);
+  font-weight: 500;
+  padding: 10px 16px;
   text-align: left;
-  border-bottom: 1px solid var(--line);
+  border-bottom: 1px solid var(--border);
+  background: var(--surface);
 }
 
-.data-table th {
-  font-size: 12px;
-  color: var(--muted);
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
+.data-table td {
+  padding: 11px 16px;
+  border-bottom: 1px solid var(--border);
+  color: var(--text);
+  font-size: 13px;
 }
 
-.pr-layout {
-  display: grid;
-  grid-template-columns: 300px minmax(0, 1fr);
-  gap: 18px;
-  margin-top: 18px;
+.data-table tr:last-child td {
+  border-bottom: none;
+}
+
+.data-table td.mono {
+  color: var(--text-sub);
 }
 
-.pr-list-panel,
-.pr-detail-panel {
-  min-height: 100%;
+.data-table td.positive {
+  color: var(--failure);
 }
 
-.pr-list-panel {
-  padding: 18px;
+.data-table td.negative {
+  color: var(--success);
 }
 
-.pr-list-title,
-.subpanel-title {
-  font-size: 14px;
-  font-weight: 700;
+/* ─── PR layout ──────────────────────────── */
+
+.pr-layout {
+  display: grid;
+  grid-template-columns: 280px minmax(0, 1fr);
+  min-height: 500px;
+}
+
+.pr-sidebar {
+  border-right: 1px solid var(--border);
+  overflow-y: auto;
+}
+
+.pr-sidebar-header {
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--border);
+  font-size: 11px;
   text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: var(--muted);
+  letter-spacing: 0.07em;
+  color: var(--text-muted);
+  font-weight: 500;
+  background: var(--surface);
+  position: sticky;
+  top: 0;
 }
 
 .pr-list {
   display: flex;
   flex-direction: column;
-  gap: 10px;
-  margin-top: 14px;
 }
 
 .pr-item {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 6px;
   width: 100%;
-  padding: 14px;
-  border: 1px solid var(--line);
-  border-radius: 18px;
-  background: rgba(255, 255, 255, 0.62);
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--border);
+  background: transparent;
   cursor: pointer;
   text-align: left;
-  transition: 140ms ease;
+  border-left: 3px solid transparent;
+  transition: background 100ms;
+  font-family: inherit;
+  font-size: inherit;
+  color: inherit;
+}
+
+.pr-item:hover {
+  background: var(--surface);
 }
 
-.pr-item:hover,
 .pr-item.active {
-  transform: translateY(-1px);
-  border-color: rgba(214, 103, 59, 0.28);
-  box-shadow: 0 12px 30px rgba(214, 103, 59, 0.12);
+  background: var(--surface);
+  border-left-color: var(--ink);
 }
 
-.pr-item-title {
-  font-weight: 700;
+.pr-item-number {
+  font-size: 11px;
+  color: var(--text-muted);
+  font-family: "JetBrains Mono", "SF Mono", monospace;
 }
 
-.pr-item-meta,
-.history-bottom {
-  color: var(--muted);
+.pr-item-title {
   font-size: 13px;
+  font-weight: 500;
+  color: var(--text);
+  line-height: 1.4;
 }
 
-.pr-detail-panel {
-  padding: 18px 0 0;
+.pr-item-foot {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.pr-item-time {
+  font-size: 11px;
+  color: var(--text-muted);
+}
+
+/* ─── PR detail ──────────────────────────── */
+
+.pr-main {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
 }
 
 .pr-detail {
-  display: block;
+  display: flex;
+  flex-direction: column;
 }
 
-.hidden {
-  display: none;
+.pr-detail-header {
+  padding: 20px 24px;
+  border-bottom: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  background: var(--surface);
 }
 
-.empty-state {
-  min-height: 280px;
-  display: grid;
-  place-items: center;
-  color: var(--muted);
-  border: 1px dashed var(--line);
-  border-radius: 22px;
-  background: rgba(255, 255, 255, 0.45);
+.pr-detail-top {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
 }
 
-.run-link {
-  color: var(--accent-strong);
-  text-decoration: none;
-  font-weight: 700;
+.pr-detail-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text);
+  line-height: 1.4;
+}
+
+.pr-detail-meta {
+  font-size: 12px;
+  color: var(--text-muted);
+  margin-top: 4px;
+}
+
+.pr-links {
+  display: flex;
+  gap: 6px;
+  flex-shrink: 0;
 }
 
-.status-row {
+.pr-status-row {
   display: flex;
+  gap: 8px;
   flex-wrap: wrap;
-  gap: 10px;
 }
 
-.status-card,
+/* ─── Status badge ───────────────────────── */
+
 .status-badge {
-  border-radius: 999px;
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 4px 10px;
+  border-radius: 5px;
+  font-size: 11px;
+  font-weight: 500;
   border: 1px solid transparent;
+  line-height: 1.4;
 }
 
-.status-card {
-  min-width: 130px;
-  padding: 10px 12px;
+.status-badge .badge-label {
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: inherit;
+  opacity: 0.7;
+  font-size: 10px;
 }
 
-.status-name {
-  font-size: 11px;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
+.status-badge .badge-value {
+  font-weight: 600;
 }
 
-.status-detail {
-  margin-top: 4px;
-  font-size: 13px;
-  font-weight: 700;
+.status-badge.success {
+  color: var(--success);
+  background: var(--success-bg);
+  border-color: var(--success-border);
 }
 
-.status-badge {
-  width: fit-content;
-  padding: 6px 10px;
-  font-size: 12px;
+.status-badge.failure {
+  color: var(--failure);
+  background: var(--failure-bg);
+  border-color: var(--failure-border);
+}
+
+.status-badge.muted {
+  color: var(--text-sub);
+  background: var(--surface-2);
+  border-color: var(--border);
+}
+
+/* small inline badge (PR list) */
+.inline-badge {
+  display: inline-block;
+  padding: 2px 7px;
+  border-radius: 4px;
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
   text-transform: uppercase;
-  letter-spacing: 0.08em;
+  border: 1px solid transparent;
 }
 
-.success {
+.inline-badge.success {
   color: var(--success);
-  background: var(--success-soft);
-  border-color: rgba(31, 122, 88, 0.2);
+  background: var(--success-bg);
+  border-color: var(--success-border);
 }
 
-.failure {
+.inline-badge.failure {
   color: var(--failure);
-  background: var(--failure-soft);
-  border-color: rgba(185, 67, 67, 0.2);
+  background: var(--failure-bg);
+  border-color: var(--failure-border);
 }
 
-.muted {
-  color: var(--muted);
-  background: rgba(103, 112, 124, 0.1);
-  border-color: rgba(103, 112, 124, 0.16);
+.inline-badge.muted {
+  color: var(--text-sub);
+  background: var(--surface-2);
+  border-color: var(--border);
 }
 
+/* ─── Sub-panels (delta / run history) ──── */
+
 .detail-grid {
   display: grid;
-  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
-  gap: 16px;
-  margin-top: 18px;
+  grid-template-columns: minmax(0, 1.3fr) minmax(260px, 0.7fr);
+  border-top: 1px solid var(--border);
 }
 
 .subpanel {
-  padding: 18px;
+  overflow: hidden;
 }
 
-.compact {
-  margin-top: 14px;
+.subpanel + .subpanel {
+  border-left: 1px solid var(--border);
 }
 
+.subpanel-header {
+  padding: 12px 20px;
+  border-bottom: 1px solid var(--border);
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.07em;
+  color: var(--text-muted);
+  font-weight: 500;
+  background: var(--surface);
+}
+
+/* ─── Run history ────────────────────────── */
+
 .run-history {
   display: flex;
   flex-direction: column;
-  gap: 10px;
-  margin-top: 14px;
 }
 
-.history-item {
-  display: block;
-  padding: 14px;
-  border-radius: 16px;
-  border: 1px solid var(--line);
-  background: rgba(255, 255, 255, 0.56);
+.run-history-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 11px 20px;
+  border-bottom: 1px solid var(--border);
   text-decoration: none;
   color: inherit;
+  transition: background 100ms;
+  gap: 12px;
 }
 
-.history-top {
-  font-weight: 700;
-  margin-bottom: 6px;
+.run-history-item:hover {
+  background: var(--surface);
 }
 
-@media (max-width: 980px) {
-  .meta-grid {
+.run-history-item:last-child {
+  border-bottom: none;
+}
+
+.run-history-commit {
+  font-family: "JetBrains Mono", "SF Mono", monospace;
+  font-size: 12px;
+  color: var(--text-sub);
+  flex-shrink: 0;
+}
+
+.run-history-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.run-history-time {
+  font-size: 11px;
+  color: var(--text-muted);
+}
+
+.run-history-stats {
+  font-size: 11px;
+  color: var(--text-muted);
+  margin-top: 2px;
+}
+
+/* ─── Empty state ────────────────────────── */
+
+.empty-state {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 240px;
+  color: var(--text-muted);
+  font-size: 13px;
+}
+
+.hidden {
+  display: none !important;
+}
+
+/* ─── Responsive ─────────────────────────── */
+
+@media (max-width: 1024px) {
+  .stats-row {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
+}
 
-  .pr-layout,
-  .detail-grid {
+@media (max-width: 768px) {
+  .main-content {
+    padding: 20px 16px 48px;
+  }
+
+  .topbar {
+    padding: 0 16px;
+  }
+
+  .pr-layout {
     grid-template-columns: 1fr;
   }
-}
 
-@media (max-width: 640px) {
-  .page-shell {
-    width: min(1180px, calc(100vw - 20px));
-    padding-top: 16px;
+  .pr-sidebar {
+    border-right: none;
+    border-bottom: 1px solid var(--border);
+    max-height: 280px;
   }
 
-  .meta-grid {
+  .detail-grid {
     grid-template-columns: 1fr;
   }
 
-  .hero,
-  .panel {
-    padding: 18px;
+  .subpanel + .subpanel {
+    border-left: none;
+    border-top: 1px solid var(--border);
   }
+}
 
-  .section-head,
-  .chart-head,
-  .pr-header,
-  .pr-title-row,
-  .link-row {
-    flex-direction: column;
-    align-items: flex-start;
+@media (max-width: 480px) {
+  .stats-row {
+    grid-template-columns: 1fr;
   }
 
-  #main-chart,
-  #pr-chart {
-    height: 300px;
+  .pr-detail-top {
+    flex-direction: column;
   }
 }