From bf35c0594e443ff249d104401917e2bce91d8d8b Mon Sep 17 00:00:00 2001
From: oliver <zhoutianjun127@126.com>
Date: Fri, 18 Sep 2026 09:31:43 +0800
Subject: [PATCH] Label compare result columns with Key / Compare / Display
 roles.

Make field purpose visible in the sticky table header so reviewers can tell identity vs check vs context at a glance.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 web/src/index.css                        | 51 ++++++++++++++++++++++++
 web/src/pages/network/BizComparePage.tsx | 50 +++++++++++++++--------
 2 files changed, 84 insertions(+), 17 deletions(-)

diff --git a/web/src/index.css b/web/src/index.css
index d24de33..2390a2e 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -10637,6 +10637,57 @@ html.login-page--paused .login-page__flare {
   box-shadow: 0 1px 0 rgba(148, 163, 184, 0.22);
   font-size: 12px;
   white-space: nowrap;
+  vertical-align: bottom;
+}
+
+.bs-cmp-th {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 3px;
+  min-width: 0;
+}
+
+.bs-cmp-th__role {
+  display: inline-block;
+  padding: 0 5px;
+  border-radius: 3px;
+  font-size: 10px;
+  font-weight: 700;
+  line-height: 1.5;
+  letter-spacing: 0.02em;
+}
+
+.bs-cmp-th__role--key {
+  background: rgba(59, 130, 246, 0.2);
+  color: #93c5fd;
+}
+
+.bs-cmp-th__role--compare {
+  background: rgba(245, 158, 11, 0.22);
+  color: #fcd34d;
+}
+
+.bs-cmp-th__role--display {
+  background: rgba(148, 163, 184, 0.16);
+  color: #cbd5e1;
+}
+
+.bs-cmp-th__name {
+  color: #e2e8f0;
+  font-weight: 600;
+}
+
+.bs-cmp-col-key {
+  background: rgba(59, 130, 246, 0.06);
+}
+
+.bs-cmp-col-compare {
+  background: rgba(245, 158, 11, 0.05);
+}
+
+.bs-cmp-col-display {
+  background: transparent;
 }
 
 .bs-cmp-overview__verdict {
diff --git a/web/src/pages/network/BizComparePage.tsx b/web/src/pages/network/BizComparePage.tsx
index 22549da..ed8b17c 100644
--- a/web/src/pages/network/BizComparePage.tsx
+++ b/web/src/pages/network/BizComparePage.tsx
@@ -2254,25 +2254,41 @@ export function BizComparePage() {
                             <th className="bs-cmp-col-kind">{t("bizCompare.colKind")}</th>
                             <th className="bs-cmp-col-fail">{t("bizCompare.colFailFields")}</th>
                             {resultColumns.keys.map((k) => (
-                              <th key={k}>{k}</th>
-                            ))}
-                            {resultColumns.extras.map((f) => (
-                              <th
-                                key={f}
-                                className={
-                                  resultColumns.compareSet.has(f)
-                                    ? "bs-cmp-col-compare"
-                                    : "bs-cmp-col-display"
-                                }
-                                title={
-                                  resultColumns.compareSet.has(f)
-                                    ? t("bizCompare.compareFields")
-                                    : t("bizCompare.displayField")
-                                }
-                              >
-                                {f}
+                              <th key={k} className="bs-cmp-col-key">
+                                <span className="bs-cmp-th">
+                                  <span className="bs-cmp-th__role bs-cmp-th__role--key">
+                                    {t("bizCompare.keyFields")}
+                                  </span>
+                                  <span className="bs-cmp-th__name">{k}</span>
+                                </span>
                               </th>
                             ))}
+                            {resultColumns.extras.map((f) => {
+                              const isCmp = resultColumns.compareSet.has(f);
+                              return (
+                                <th
+                                  key={f}
+                                  className={
+                                    isCmp ? "bs-cmp-col-compare" : "bs-cmp-col-display"
+                                  }
+                                >
+                                  <span className="bs-cmp-th">
+                                    <span
+                                      className={`bs-cmp-th__role ${
+                                        isCmp
+                                          ? "bs-cmp-th__role--compare"
+                                          : "bs-cmp-th__role--display"
+                                      }`}
+                                    >
+                                      {isCmp
+                                        ? t("bizCompare.compareFields")
+                                        : t("bizCompare.displayField")}
+                                    </span>
+                                    <span className="bs-cmp-th__name">{f}</span>
+                                  </span>
+                                </th>
+                              );
+                            })}
                           </tr>
                         </thead>
                         <tbody>