From 700e1e816fba77fc57669497ea2b67758549a882 Mon Sep 17 00:00:00 2001
From: ZhouGuangyuan <zhouguangyuan.xian@gmail.com>
Date: Mon, 3 Aug 2026 11:24:18 +0800
Subject: [PATCH] ci: clarify LLGo dashboard benchmark groups

---
 ci/llgo-size/README.md      | 4 +++-
 ci/llgo-size/site/app.js    | 9 ++++++---
 ci/llgo-size/site/style.css | 4 ++++
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/ci/llgo-size/README.md b/ci/llgo-size/README.md
index fd6605a..bed1512 100644
--- a/ci/llgo-size/README.md
+++ b/ci/llgo-size/README.md
@@ -41,7 +41,9 @@ The published dashboard presents wall time as its primary human-facing duration
 and retains `user + sys` as secondary diagnostic context. Binary size and wall
 time use separate commit matrices on the same page; each cell is ranked against
 the other build modes for the same benchmark and commit, with smaller values
-receiving the stronger favorable background.
+receiving the stronger favorable background. Matrix rows are visually grouped
+by benchmark: the benchmark name appears once at the start of its build modes,
+and a full-width separator marks the next benchmark.
 
 The `llgo-main-updated` repository-dispatch event from `xgo-dev/llgo` first
 updates `LLGO_COMMIT` on the benchmarks `main` branch, then explicitly starts a
diff --git a/ci/llgo-size/site/app.js b/ci/llgo-size/site/app.js
index 3e01bc6..f5e9770 100644
--- a/ci/llgo-size/site/app.js
+++ b/ci/llgo-size/site/app.js
@@ -306,12 +306,15 @@ function renderMatrix(target, runs, documents, baselineDocument, measure) {
   const head = '<thead><tr><th class="matrix-label-cell">Benchmark / mode</th>' + runs.map(headerHtml).join("") + "</tr></thead>";
   const rows = [];
   state.benchmarkNames.forEach(function (benchmarkName) {
-    configs.forEach(function (config) {
-      const label = '<th class="matrix-label-cell"><span class="benchmark-name">' + escapeHtml(benchmarkName) + '</span><span class="config-name">' + escapeHtml(compactConfigLabels[config]) + "</span></th>";
+    configs.forEach(function (config, configIndex) {
+      const benchmarkLabel = configIndex === 0 ? '<span class="benchmark-name">' + escapeHtml(benchmarkName) + "</span>" : "";
+      const configClass = configIndex === 0 ? "config-name" : "config-name config-continuation";
+      const label = '<th class="matrix-label-cell" aria-label="' + escapeHtml(benchmarkName + " · " + compactConfigLabels[config]) + '">' + benchmarkLabel + '<span class="' + configClass + '">' + escapeHtml(compactConfigLabels[config]) + "</span></th>";
       const cells = runs.map(function (run, index) {
         return cellHtml(maps[index].get(benchmarkName), config, measure, run.key, baselineMap.get(benchmarkName));
       }).join("");
-      rows.push("<tr>" + label + cells + "</tr>");
+      const groupClass = configIndex === 0 ? "benchmark-group-start" : "";
+      rows.push('<tr class="' + groupClass + '">' + label + cells + "</tr>");
     });
   });
   target.classList.toggle("comparison-mode", state.comparisonMode);
diff --git a/ci/llgo-size/site/style.css b/ci/llgo-size/site/style.css
index fb047c6..cafdd75 100644
--- a/ci/llgo-size/site/style.css
+++ b/ci/llgo-size/site/style.css
@@ -81,12 +81,16 @@ select:focus, input:focus, button:focus-visible { border-color: #5c82e8; outline
 .comparison-table thead th { background: #f7f9fd; color: #566982; font-size: 9px; font-weight: 850; text-align: center; }
 .comparison-table tbody th { background: #fff; text-align: left; }
 .comparison-table tbody tr:hover th { background: #f8faff; }
+.comparison-table tbody .benchmark-group-start:not(:first-child) > * { border-top: 7px solid #e7edf5; box-shadow: inset 0 1px 0 #b7c4d5; }
+.comparison-table tbody .benchmark-group-start:not(:first-child) > .selected-a,
+.comparison-table tbody .benchmark-group-start:not(:first-child) > .selected-b { box-shadow: inset 2px 0 0 var(--accent), inset -2px 0 0 var(--accent), inset 0 1px 0 #b7c4d5; }
 .comparison-table tbody tr:last-child > * { border-bottom: 0; }
 .comparison-table tr > *:last-child { border-right: 0; }
 .matrix-label-cell { position: sticky; left: 0; z-index: 2; width: 136px; min-width: 136px; max-width: 136px; padding: 7px !important; overflow-wrap: anywhere; white-space: normal !important; }
 .comparison-table thead .matrix-label-cell { z-index: 4; background: #f7f9fd; color: #294369; line-height: 1.2; }
 .benchmark-name { display: block; color: #18365d; font-size: 10px; font-weight: 800; line-height: 1.2; }
 .config-name { display: block; margin-top: 2px; color: #718097; font-size: 9px; font-weight: 700; line-height: 1.15; }
+.config-continuation { margin-top: 0; padding-left: 9px; border-left: 2px solid #d5deea; }
 .commit-header { width: 132px; min-width: 132px; padding: 0 !important; }
 .commit-button { display: grid; width: 100%; min-height: 53px; padding: 7px 6px; border: 0; background: transparent; color: inherit; place-content: center; }
 .comparison-mode .commit-button:hover { background: #edf3ff; color: #204ba8; }