diff --git a/web/src/index.css b/web/src/index.css
index 6e950fe..cded587 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -10097,49 +10097,56 @@ html.login-page--paused .login-page__flare {
 .bs-cmp-board__toolbar {
   display: flex;
   flex-wrap: wrap;
-  gap: 10px;
-  align-items: flex-end;
-  justify-content: space-between;
+  gap: 8px 12px;
+  align-items: center;
+  justify-content: flex-start;
+  flex: 0 0 auto;
+}
+
+.bs-cmp-board__actions {
+  margin-left: auto;
   flex: 0 0 auto;
 }
 
 .bs-cmp-sides {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
-  gap: 8px 12px;
+  display: inline-flex;
+  flex-wrap: wrap;
   align-items: center;
-  padding: 10px 12px;
-  border-radius: 10px;
+  gap: 6px 8px;
+  min-width: 0;
+  flex: 1 1 auto;
+  padding: 4px 8px;
+  border-radius: 8px;
   border: 1px solid var(--bs-cmp-border, rgba(148, 163, 184, 0.22));
-  background: rgba(15, 23, 42, 0.55);
-  flex: 0 0 auto;
+  background: rgba(15, 23, 42, 0.45);
 }
 
 .bs-cmp-sides__side {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 4px 8px;
   min-width: 0;
-  padding: 6px 10px;
-  border-radius: 8px;
+  padding: 2px 6px;
+  border-radius: 6px;
 }
 
 .bs-cmp-sides__side.is-before {
   background: rgba(239, 68, 68, 0.08);
-  border: 1px solid rgba(248, 113, 113, 0.28);
+  border: 1px solid rgba(248, 113, 113, 0.25);
 }
 
 .bs-cmp-sides__side.is-after {
   background: rgba(34, 197, 94, 0.08);
-  border: 1px solid rgba(74, 222, 128, 0.28);
+  border: 1px solid rgba(74, 222, 128, 0.25);
 }
 
 .bs-cmp-sides__tag {
   font-size: 10px;
   font-weight: 700;
   letter-spacing: 0.04em;
-  text-transform: uppercase;
   color: #94a3b8;
+  flex: 0 0 auto;
 }
 
 .bs-cmp-sides__side.is-before .bs-cmp-sides__tag {
@@ -10151,62 +10158,53 @@ html.login-page--paused .login-page__flare {
 }
 
 .bs-cmp-sides__name {
-  font-size: 15px;
+  font-size: 13px;
   font-weight: 700;
   color: #f1f5f9;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  max-width: 14rem;
   line-height: 1.3;
 }
 
 .bs-cmp-sides__meta {
   font-size: 11px;
   font-variant-numeric: tabular-nums;
-  overflow: hidden;
-  text-overflow: ellipsis;
   white-space: nowrap;
+  flex: 0 0 auto;
 }
 
 .bs-cmp-sides__vs {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 2.5rem;
-  height: 2.5rem;
+  flex: 0 0 auto;
+  padding: 2px 8px;
   border-radius: 999px;
   background: rgba(59, 130, 246, 0.18);
-  border: 1px solid rgba(96, 165, 250, 0.4);
+  border: 1px solid rgba(96, 165, 250, 0.35);
   color: #93c5fd;
-  font-size: 12px;
+  font-size: 11px;
   font-weight: 800;
   letter-spacing: 0.02em;
 }
 
-.bs-cmp-sides__context {
-  grid-column: 1 / -1;
-  font-size: 11px;
-  padding-top: 2px;
-  border-top: 1px solid rgba(148, 163, 184, 0.15);
-}
-
-@media (max-width: 720px) {
-  .bs-cmp-sides {
-    grid-template-columns: 1fr;
+@media (max-width: 900px) {
+  .bs-cmp-board__actions {
+    margin-left: 0;
   }
 
-  .bs-cmp-sides__vs {
-    justify-self: center;
-    width: auto;
-    height: auto;
-    padding: 2px 10px;
-    border-radius: 6px;
+  .bs-cmp-sides {
+    flex: 1 1 100%;
+    order: 3;
+  }
+
+  .bs-cmp-board__actions {
+    order: 2;
   }
 }
 
 .bs-cmp-board__body {
   display: grid;
-  grid-template-columns: minmax(176px, 220px) minmax(0, 1fr);
+  grid-template-columns: minmax(200px, 248px) minmax(0, 1fr);
   gap: 10px;
   flex: 1 1 auto;
   min-height: 0;
@@ -10310,49 +10308,68 @@ html.login-page--paused .login-page__flare {
   align-self: center;
 }
 
-.bs-cmp-nav__meta {
+.bs-cmp-nav__badges {
   display: flex;
-  flex-direction: column;
-  align-items: flex-start;
+  flex-wrap: wrap;
   gap: 4px;
-  font-size: 11px;
-  font-variant-numeric: tabular-nums;
-  color: var(--bs-cmp-muted);
-  line-height: 1.3;
   grid-column: 2;
   grid-row: 2;
   min-width: 0;
 }
 
-.bs-cmp-nav__counts {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px;
-}
-
-.bs-cmp-nav__counts > span {
+.bs-cmp-nav__badge {
   flex: 0 0 auto;
   white-space: nowrap;
   padding: 1px 6px;
   border-radius: 4px;
-  background: rgba(148, 163, 184, 0.12);
-  border: 1px solid rgba(148, 163, 184, 0.18);
+  font-size: 10px;
+  font-variant-numeric: tabular-nums;
+  line-height: 1.45;
+  color: #94a3b8;
+  background: rgba(148, 163, 184, 0.1);
+  border: 1px solid rgba(148, 163, 184, 0.16);
 }
 
-.bs-cmp-nav__meta em {
-  font-style: normal;
+.bs-cmp-nav__badge b {
   font-weight: 700;
+  margin-left: 2px;
   color: #cbd5e1;
 }
 
-.bs-cmp-nav__item.is-clean .bs-cmp-nav__meta em {
+.bs-cmp-nav__badge--removed.is-hot {
+  color: #fecaca;
+  background: rgba(239, 68, 68, 0.14);
+  border-color: rgba(248, 113, 113, 0.35);
+}
+
+.bs-cmp-nav__badge--removed.is-hot b {
+  color: #fca5a5;
+}
+
+.bs-cmp-nav__badge--added.is-hot {
+  color: #bbf7d0;
+  background: rgba(34, 197, 94, 0.14);
+  border-color: rgba(74, 222, 128, 0.35);
+}
+
+.bs-cmp-nav__badge--added.is-hot b {
   color: #86efac;
 }
 
-.bs-cmp-nav__item.has-diff .bs-cmp-nav__meta em {
+.bs-cmp-nav__badge--changed.is-hot {
+  color: #fde68a;
+  background: rgba(245, 158, 11, 0.14);
+  border-color: rgba(251, 191, 36, 0.35);
+}
+
+.bs-cmp-nav__badge--changed.is-hot b {
   color: #fbbf24;
 }
 
+.bs-cmp-nav__badge--unchanged b {
+  color: #94a3b8;
+}
+
 .bs-cmp-main {
   display: flex;
   flex-direction: column;
@@ -10715,13 +10732,9 @@ html.login-page--paused .login-page__flare {
 
   .bs-cmp-nav__item {
     flex: 0 0 auto;
-    min-width: 148px;
+    min-width: 180px;
     grid-template-columns: 8px minmax(0, 1fr);
   }
-
-  .bs-cmp-nav__meta {
-    display: none;
-  }
 }
 
 .bs-cmp-diff-table {
diff --git a/web/src/pages/network/BizComparePage.tsx b/web/src/pages/network/BizComparePage.tsx
index 8ee72b1..17e74bd 100644
--- a/web/src/pages/network/BizComparePage.tsx
+++ b/web/src/pages/network/BizComparePage.tsx
@@ -206,6 +206,22 @@ function toggleInList(list: string[], name: string, on: boolean): string[] {
   return list.filter((x) => x !== name);
 }
 
+function sideDeviceName(side?: {
+  ne_name?: string;
+  ne_ip?: string;
+  label?: string;
+  batch_id?: string;
+} | null): string {
+  if (!side) return "—";
+  return (
+    String(side.ne_name || "").trim() ||
+    String(side.ne_ip || "").trim() ||
+    String(side.label || "").trim() ||
+    String(side.batch_id || "").slice(0, 8) ||
+    "—"
+  );
+}
+
 function taskLabel(row: TaskOpt) {
   return `${row.ne_name || row.ne_ip || row.id} (${row.vendor || "-"})`;
 }
@@ -2068,10 +2084,10 @@ export function BizComparePage() {
                 >
                   <option value="">{t("bizCompare.pickRun")}</option>
                   {runs.map((r) => {
-                    const bl = (r as any).before?.label || "";
-                    const al = (r as any).after?.label || "";
+                    const bl = sideDeviceName((r as any).before);
+                    const al = sideDeviceName((r as any).after);
                     const sides =
-                      bl || al ? `${bl || "—"} → ${al || "—"} · ` : "";
+                      bl !== "—" || al !== "—" ? `${bl} → ${al} · ` : "";
                     return (
                       <option key={r.id} value={r.id}>
                         {sides}
@@ -2083,7 +2099,32 @@ export function BizComparePage() {
                     );
                   })}
                 </FieldSelect>
-                <div className="btn-row">
+                {runDetail ? (
+                  <div className="bs-cmp-sides" aria-label={t("bizCompare.sidesTitle")}>
+                    <div className="bs-cmp-sides__side is-before">
+                      <span className="bs-cmp-sides__tag">{t("bizCompare.sideBefore")}</span>
+                      <strong className="bs-cmp-sides__name" title={sideDeviceName(runDetail.before)}>
+                        {sideDeviceName(runDetail.before)}
+                      </strong>
+                      <span className="bs-cmp-sides__meta muted">
+                        {fmtTime(runDetail.before?.started_at)}
+                      </span>
+                    </div>
+                    <span className="bs-cmp-sides__vs" aria-hidden>
+                      {t("bizCompare.sidesVs")}
+                    </span>
+                    <div className="bs-cmp-sides__side is-after">
+                      <span className="bs-cmp-sides__tag">{t("bizCompare.sideAfter")}</span>
+                      <strong className="bs-cmp-sides__name" title={sideDeviceName(runDetail.after)}>
+                        {sideDeviceName(runDetail.after)}
+                      </strong>
+                      <span className="bs-cmp-sides__meta muted">
+                        {fmtTime(runDetail.after?.started_at)}
+                      </span>
+                    </div>
+                  </div>
+                ) : null}
+                <div className="btn-row bs-cmp-board__actions">
                   <Button
                     size="sm"
                     variant="secondary"
@@ -2104,64 +2145,6 @@ export function BizComparePage() {
               </div>
 
               {runDetail ? (
-                <>
-                  <div className="bs-cmp-sides" aria-label={t("bizCompare.sidesTitle")}>
-                    <div className="bs-cmp-sides__side is-before">
-                      <span className="bs-cmp-sides__tag">{t("bizCompare.sideBefore")}</span>
-                      <strong className="bs-cmp-sides__name" title={runDetail.before?.label || ""}>
-                        {runDetail.before?.label || runDetail.before_batch_id || "—"}
-                      </strong>
-                      <span className="bs-cmp-sides__meta muted">
-                        {[
-                          runDetail.before?.vendor,
-                          fmtTime(runDetail.before?.started_at),
-                          runDetail.before?.status
-                            ? `rows=${runDetail.before?.row_count ?? 0}`
-                            : "",
-                        ]
-                          .filter(Boolean)
-                          .join(" · ") || "—"}
-                      </span>
-                    </div>
-                    <div className="bs-cmp-sides__vs" aria-hidden>
-                      <span>{t("bizCompare.sidesVs")}</span>
-                    </div>
-                    <div className="bs-cmp-sides__side is-after">
-                      <span className="bs-cmp-sides__tag">{t("bizCompare.sideAfter")}</span>
-                      <strong className="bs-cmp-sides__name" title={runDetail.after?.label || ""}>
-                        {runDetail.after?.label || runDetail.after_batch_id || "—"}
-                      </strong>
-                      <span className="bs-cmp-sides__meta muted">
-                        {[
-                          runDetail.after?.vendor,
-                          fmtTime(runDetail.after?.started_at),
-                          runDetail.after?.status
-                            ? `rows=${runDetail.after?.row_count ?? 0}`
-                            : "",
-                        ]
-                          .filter(Boolean)
-                          .join(" · ") || "—"}
-                      </span>
-                    </div>
-                    {(runDetail.job_name || runDetail.template_name || runDetail.mapping_name) && (
-                      <div className="bs-cmp-sides__context muted">
-                        {[
-                          runDetail.job_name
-                            ? `${t("bizCompare.jobName")}: ${runDetail.job_name}`
-                            : "",
-                          runDetail.template_name
-                            ? `${t("bizCompare.template")}: ${runDetail.template_name}`
-                            : "",
-                          runDetail.mapping_name
-                            ? `${t("bizCompare.mapName")}: ${runDetail.mapping_name}`
-                            : "",
-                        ]
-                          .filter(Boolean)
-                          .join(" · ")}
-                      </div>
-                    )}
-                  </div>
-
                 <div className="bs-cmp-board__body">
                   <aside className="bs-cmp-nav" aria-label={t("bizCompare.sheetNavTitle")}>
                     <div className="bs-cmp-nav__head">
@@ -2210,25 +2193,31 @@ export function BizComparePage() {
                           >
                             <span className="bs-cmp-nav__dot" aria-hidden />
                             <span className="bs-cmp-nav__name">{c.metric_id}</span>
-                            <span className="bs-cmp-nav__meta">
-                              {dirty > 0 ? (
-                                <>
-                                  <em className="bs-cmp-nav__fail">{t("bizCompare.kindFail")}</em>
-                                  <span className="bs-cmp-nav__counts">
-                                    <span>
-                                      {t("bizCompare.missCount")} {Number(c.removed || 0)}
-                                    </span>
-                                    <span>
-                                      {t("bizCompare.extraCount")} {Number(c.added || 0)}
-                                    </span>
-                                    <span>
-                                      {t("bizCompare.mismatchCount")} {Number(c.changed || 0)}
-                                    </span>
-                                  </span>
-                                </>
-                              ) : (
-                                <em className="bs-cmp-nav__pass">{t("bizCompare.sheetAllPass")}</em>
-                              )}
+                            <span className="bs-cmp-nav__badges" aria-label={c.metric_id}>
+                              <span
+                                className={`bs-cmp-nav__badge bs-cmp-nav__badge--removed${
+                                  Number(c.removed || 0) > 0 ? " is-hot" : ""
+                                }`}
+                              >
+                                {t("bizCompare.missCount")} <b>{Number(c.removed || 0)}</b>
+                              </span>
+                              <span
+                                className={`bs-cmp-nav__badge bs-cmp-nav__badge--added${
+                                  Number(c.added || 0) > 0 ? " is-hot" : ""
+                                }`}
+                              >
+                                {t("bizCompare.extraCount")} <b>{Number(c.added || 0)}</b>
+                              </span>
+                              <span
+                                className={`bs-cmp-nav__badge bs-cmp-nav__badge--changed${
+                                  Number(c.changed || 0) > 0 ? " is-hot" : ""
+                                }`}
+                              >
+                                {t("bizCompare.mismatchCount")} <b>{Number(c.changed || 0)}</b>
+                              </span>
+                              <span className="bs-cmp-nav__badge bs-cmp-nav__badge--unchanged">
+                                {t("bizCompare.matchCount")} <b>{Number(c.unchanged || 0)}</b>
+                              </span>
                             </span>
                           </button>
                         );
@@ -2237,34 +2226,6 @@ export function BizComparePage() {
                   </aside>
 
                   <div className="bs-cmp-main">
-                    <div
-                      className={`bs-cmp-overview${summary.ok ? " is-ok" : " is-warn"}`}
-                    >
-                      <span className="bs-cmp-overview__tag">{t("bizCompare.runOverview")}</span>
-                      <span className="bs-cmp-overview__verdict">
-                        {summary.ok ? t("bizCompare.verdictPass") : t("bizCompare.verdictFail")}
-                      </span>
-                      <span className="bs-cmp-overview__stat">
-                        {t("bizCompare.failCount")}{" "}
-                        <b>{summary.diff_count ?? 0}</b>
-                      </span>
-                      <span className="bs-cmp-overview__stat">
-                        {t("bizCompare.missCount")} <b>{summary.removed ?? 0}</b>
-                      </span>
-                      <span className="bs-cmp-overview__stat">
-                        {t("bizCompare.extraCount")} <b>{summary.added ?? 0}</b>
-                      </span>
-                      <span className="bs-cmp-overview__stat">
-                        {t("bizCompare.mismatchCount")} <b>{summary.changed ?? 0}</b>
-                      </span>
-                      <span className="bs-cmp-overview__stat">
-                        {t("bizCompare.matchCount")} <b>{summary.unchanged ?? 0}</b>
-                      </span>
-                      <span className="bs-cmp-overview__time muted">
-                        {fmtTime(runDetail.created_at)}
-                      </span>
-                    </div>
-
                     <div
                       className={`bs-cmp-strip${
                         Number(activeSheetCard?.diff_count || 0) > 0 ? " is-warn" : " is-ok"
@@ -2477,7 +2438,6 @@ export function BizComparePage() {
                     />
                   </div>
                 </div>
-                </>
               ) : (
                 <div className="pt-list-empty">{t("bizCompare.noRuns")}</div>
               )}