From c565f6e08712e56ca00117324e8a2c825bb232ea Mon Sep 17 00:00:00 2001
From: Cody <codrrrr@gmail.com>
Date: Sun, 31 May 2026 04:08:56 -0600
Subject: [PATCH 1/3] feat(compare): add /compare command with bedwars
 subcommand
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Extract getBedWarsTable() from BedWarsProfile into a StatColumn[][]
  descriptor so stat layout is defined once and consumed by both the
  normal profile and the new compare profile
- Add SplitPill component: split value box with per-player coloring
  (§a better / §c worse / §f equal) and ▲/▼ delta row
- Add generic CompareProfile driven purely by the descriptor; no
  per-game renderer files needed
- Add CompareCommand with @SubCommand bedwars; player2 defaults to
  the caller's linked account via existing missingSelfVerification logic
- Add compare / compare-command / compare-bedwars i18n keys (en-US)
- pnpm lint and pnpm test:types pass

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../src/commands/bedwars/bedwars.profile.tsx  |  88 +++++++--------
 .../src/commands/compare/compare.command.tsx  | 102 ++++++++++++++++++
 .../src/commands/compare/compare.profile.tsx  |  82 ++++++++++++++
 apps/discord-bot/src/components/SplitPill.tsx |  76 +++++++++++++
 apps/discord-bot/src/components/index.ts      |   1 +
 locales/en-US/default.json                    |   3 +
 6 files changed, 310 insertions(+), 42 deletions(-)
 create mode 100644 apps/discord-bot/src/commands/compare/compare.command.tsx
 create mode 100644 apps/discord-bot/src/commands/compare/compare.profile.tsx
 create mode 100644 apps/discord-bot/src/components/SplitPill.tsx

diff --git a/apps/discord-bot/src/commands/bedwars/bedwars.profile.tsx b/apps/discord-bot/src/commands/bedwars/bedwars.profile.tsx
index 452699499..ba92c73a9 100644
--- a/apps/discord-bot/src/commands/bedwars/bedwars.profile.tsx
+++ b/apps/discord-bot/src/commands/bedwars/bedwars.profile.tsx
@@ -6,17 +6,44 @@
  * https://github.com/Statsify/statsify/blob/main/LICENSE
  */
 
-import { BedWarsModes, FormattedGame, type GameMode } from "@statsify/schemas";
+import { BedWarsMode, BedWarsModes, FormattedGame, type GameMode } from "@statsify/schemas";
 import {
   Container,
   Footer,
   Header,
   Historical,
   SidebarItem,
+  StatColumn,
   Table,
   formatProgression,
 } from "#components";
 import type { BaseProfileProps } from "#commands/base.hypixel-command";
+import type { LocalizeFunction } from "@statsify/discord";
+
+export function getBedWarsTable(stats: BedWarsMode, t: LocalizeFunction): StatColumn[][] {
+  return [
+    [
+      { title: t("stats.wins"), color: "§a", value: stats.wins },
+      { title: t("stats.losses"), color: "§c", value: stats.losses, lowerIsBetter: true },
+      { title: t("stats.wlr"), color: "§6", value: stats.wlr },
+    ],
+    [
+      { title: t("stats.finalKills"), color: "§a", value: stats.finalKills },
+      { title: t("stats.finalDeaths"), color: "§c", value: stats.finalDeaths, lowerIsBetter: true },
+      { title: t("stats.fkdr"), color: "§6", value: stats.fkdr },
+    ],
+    [
+      { title: t("stats.kills"), color: "§a", value: stats.kills },
+      { title: t("stats.deaths"), color: "§c", value: stats.deaths, lowerIsBetter: true },
+      { title: t("stats.kdr"), color: "§6", value: stats.kdr },
+    ],
+    [
+      { title: t("stats.bedsBroken"), color: "§a", value: stats.bedsBroken },
+      { title: t("stats.bedsLost"), color: "§c", value: stats.bedsLost, lowerIsBetter: true },
+      { title: t("stats.bblr"), color: "§6", value: stats.bblr },
+    ],
+  ];
+}
 
 export interface BedWarsProfileProps extends BaseProfileProps {
   mode: GameMode<BedWarsModes>;
@@ -71,47 +98,24 @@ export const BedWarsProfile = ({
         time={time}
       />
       <Table.table>
-        <Table.tr>
-          <Table.td title={t("stats.wins")} value={t(stats.wins)} color="§a" />
-          <Table.td title={t("stats.losses")} value={t(stats.losses)} color="§c" />
-          <Table.td title={t("stats.wlr")} value={t(stats.wlr)} color="§6" />
-        </Table.tr>
-        <Table.tr>
-          <Table.td
-            title={t("stats.finalKills")}
-            value={t(stats.finalKills)}
-            color="§a"
-          />
-          <Table.td
-            title={t("stats.finalDeaths")}
-            value={t(stats.finalDeaths)}
-            color="§c"
-          />
-          <Table.td title={t("stats.fkdr")} value={t(stats.fkdr)} color="§6" />
-        </Table.tr>
-        <Table.tr>
-          <Table.td title={t("stats.kills")} value={t(stats.kills)} color="§a" />
-          <Table.td title={t("stats.deaths")} value={t(stats.deaths)} color="§c" />
-          <Table.td title={t("stats.kdr")} value={t(stats.kdr)} color="§6" />
-        </Table.tr>
-        <Table.tr>
-          <Table.td
-            title={t("stats.bedsBroken")}
-            value={t(stats.bedsBroken)}
-            color="§a"
-          />
-          <Table.td title={t("stats.bedsLost")} value={t(stats.bedsLost)} color="§c" />
-          <Table.td title={t("stats.bblr")} value={t(stats.bblr)} color="§6" />
-        </Table.tr>
-        <Historical.progression
-          time={time}
-          progression={bedwars.progression}
-          current={bedwars.levelFormatted}
-          next={bedwars.nextLevelFormatted}
-          t={t}
-          level={bedwars.level}
-          exp={bedwars.exp}
-        />
+        {[
+          ...getBedWarsTable(stats, t).map((row) => (
+            <Table.tr>
+              {row.map((col) => (
+                <Table.td title={col.title} value={t(col.value)} color={col.color} />
+              ))}
+            </Table.tr>
+          )),
+          <Historical.progression
+            time={time}
+            progression={bedwars.progression}
+            current={bedwars.levelFormatted}
+            next={bedwars.nextLevelFormatted}
+            t={t}
+            level={bedwars.level}
+            exp={bedwars.exp}
+          />,
+        ]}
       </Table.table>
       <Footer logo={logo} user={user} />
     </Container>
diff --git a/apps/discord-bot/src/commands/compare/compare.command.tsx b/apps/discord-bot/src/commands/compare/compare.command.tsx
new file mode 100644
index 000000000..b8229e73f
--- /dev/null
+++ b/apps/discord-bot/src/commands/compare/compare.command.tsx
@@ -0,0 +1,102 @@
+/**
+ * Copyright (c) Statsify
+ *
+ * This source code is licensed under the GNU GPL v3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ * https://github.com/Statsify/statsify/blob/main/LICENSE
+ */
+
+import {
+  ApiModeFromGameModes,
+  BEDWARS_MODES,
+  BedWarsModes,
+  FormattedGame,
+  type GameModeWithSubModes,
+  type GameModes,
+  type Player,
+} from "@statsify/schemas";
+import {
+  ApiService,
+  Command,
+  CommandContext,
+  type LocalizeFunction,
+  Page,
+  PaginateService,
+  PlayerArgument,
+  SubCommand,
+} from "@statsify/discord";
+import { CompareProfile } from "./compare.profile.js";
+import { GamesWithBackgrounds, mapBackground } from "#constants";
+import { StatColumn } from "#components";
+import { getBackground, getLogo } from "@statsify/assets";
+import { getBedWarsTable } from "../bedwars/bedwars.profile.js";
+import { getTheme } from "#themes";
+import { render } from "@statsify/rendering";
+
+const args = [new PlayerArgument("player", true), new PlayerArgument("player2", false)];
+
+@Command({ description: (t) => t("commands.compare") })
+export class CompareCommand {
+  public constructor(
+    private readonly apiService: ApiService,
+    private readonly paginateService: PaginateService
+  ) {}
+
+  @SubCommand({ description: (t) => t("commands.compare-bedwars"), args })
+  public bedwars(context: CommandContext) {
+    return this.run(
+      context,
+      BEDWARS_MODES,
+      (player, modeApi, t) =>
+        getBedWarsTable(
+          player.stats.bedwars[modeApi as ApiModeFromGameModes<BedWarsModes>],
+          t
+        ),
+      (t, mode) => `§l${FormattedGame.BEDWARS} §fCompare §r(${mode.formatted})`
+    );
+  }
+
+  private async run<T extends GamesWithBackgrounds>(
+    context: CommandContext,
+    modes: GameModes<T>,
+    getTable: (player: Player, modeApi: string, t: LocalizeFunction) => StatColumn[][],
+    getTitle: (t: LocalizeFunction, mode: GameModeWithSubModes<T>) => string
+  ) {
+    const user = context.getUser();
+
+    const [player, player2] = await Promise.all([
+      this.apiService.getPlayer(context.option("player", ""), user),
+      this.apiService.getPlayer(context.option("player2", ""), user),
+    ]);
+
+    const logo = await getLogo(user);
+    const allModes = modes.getModes();
+
+    const pages: Page[] = allModes.map((mode) => ({
+      label: mode.formatted,
+      generator: async (t) => {
+        const bg = await getBackground(...mapBackground(modes, mode.api));
+        const table1 = getTable(player, mode.api, t);
+        const table2 = getTable(player2, mode.api, t);
+
+        const profile = (
+          <CompareProfile
+            player={player}
+            player2={player2}
+            background={bg}
+            logo={logo}
+            user={user}
+            t={t}
+            table1={table1}
+            table2={table2}
+            title={getTitle(t, mode)}
+          />
+        );
+
+        return render(profile, getTheme(user));
+      },
+    }));
+
+    return this.paginateService.paginate(context, pages);
+  }
+}
diff --git a/apps/discord-bot/src/commands/compare/compare.profile.tsx b/apps/discord-bot/src/commands/compare/compare.profile.tsx
new file mode 100644
index 000000000..7fff10f44
--- /dev/null
+++ b/apps/discord-bot/src/commands/compare/compare.profile.tsx
@@ -0,0 +1,82 @@
+/**
+ * Copyright (c) Statsify
+ *
+ * This source code is licensed under the GNU GPL v3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ * https://github.com/Statsify/statsify/blob/main/LICENSE
+ */
+
+import {
+  Container,
+  Footer,
+  SplitPill,
+  StatColumn,
+  Table,
+} from "#components";
+import type { Image } from "skia-canvas";
+import type { LocalizeFunction } from "@statsify/discord";
+import type { Player, User } from "@statsify/schemas";
+
+export interface CompareProfileProps {
+  player: Player;
+  player2: Player;
+  background: Image;
+  logo: Image;
+  user: User | null;
+  t: LocalizeFunction;
+  table1: StatColumn[][];
+  table2: StatColumn[][];
+  title: string;
+}
+
+export const CompareProfile = ({
+  player,
+  player2,
+  background,
+  logo,
+  user,
+  t,
+  table1,
+  table2,
+  title,
+}: CompareProfileProps) => (
+  <Container background={background}>
+    <div width="100%" location="center">
+      <text margin={{ top: 8, bottom: 8, left: 12, right: 12 }}>{title}</text>
+    </div>
+    <div width="100%" location="center" margin={{ bottom: 4 }}>
+      <text>{`§a${player.prefixName} §7vs §c${player2.prefixName}`}</text>
+    </div>
+    <Table.table>
+      {table1.map((row, ri) => (
+        <Table.tr>
+          {row.map((col1, ci) => {
+            const col2 = table2[ri][ci];
+            const delta = Math.abs(col1.value - col2.value);
+            if (col1.comparable === false) {
+              return (
+                <Table.td
+                  title={col1.title}
+                  value={`${t(col1.value)} §7/ ${t(col2.value)}`}
+                  color={col1.color}
+                />
+              );
+            }
+            return (
+              <SplitPill
+                title={col1.title}
+                leftValue={col1.value}
+                rightValue={col2.value}
+                leftFormatted={t(col1.value)}
+                rightFormatted={t(col2.value)}
+                deltaFormatted={t(delta)}
+                lowerIsBetter={col1.lowerIsBetter}
+              />
+            );
+          })}
+        </Table.tr>
+      ))}
+    </Table.table>
+    <Footer logo={logo} user={user} />
+  </Container>
+);
diff --git a/apps/discord-bot/src/components/SplitPill.tsx b/apps/discord-bot/src/components/SplitPill.tsx
new file mode 100644
index 000000000..0ad174c46
--- /dev/null
+++ b/apps/discord-bot/src/components/SplitPill.tsx
@@ -0,0 +1,76 @@
+/**
+ * Copyright (c) Statsify
+ *
+ * This source code is licensed under the GNU GPL v3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ * https://github.com/Statsify/statsify/blob/main/LICENSE
+ */
+
+export interface StatColumn {
+  title: string;
+  color: string;
+  value: number;
+  lowerIsBetter?: boolean;
+  comparable?: boolean;
+}
+
+export interface SplitPillProps {
+  title: string;
+  leftValue: number;
+  rightValue: number;
+  leftFormatted: string;
+  rightFormatted: string;
+  deltaFormatted: string;
+  lowerIsBetter?: boolean;
+}
+
+export const SplitPill = ({
+  title,
+  leftValue,
+  rightValue,
+  leftFormatted,
+  rightFormatted,
+  deltaFormatted,
+  lowerIsBetter = false,
+}: SplitPillProps) => {
+  const isEqual = leftValue === rightValue;
+  const leftWins = lowerIsBetter ? leftValue < rightValue : leftValue > rightValue;
+  const leftColor = isEqual ? "§f" : (leftWins ? "§a" : "§c");
+  const rightColor = isEqual ? "§f" : (leftWins ? "§c" : "§a");
+
+  let leftDelta: string;
+  let rightDelta: string;
+
+  if (isEqual) {
+    leftDelta = `§7${deltaFormatted}`;
+    rightDelta = `§7${deltaFormatted}`;
+  } else if (leftWins) {
+    leftDelta = `§a▲ ${deltaFormatted}`;
+    rightDelta = `§c▼ ${deltaFormatted}`;
+  } else {
+    leftDelta = `§c▼ ${deltaFormatted}`;
+    rightDelta = `§a▲ ${deltaFormatted}`;
+  }
+
+  return (
+    <box direction="column" location="center" width="100%">
+      <text margin={{ top: 8, bottom: 4, left: 6, right: 6 }}>{`§7${title}`}</text>
+      <div width="100%" direction="row">
+        <div width="1/2" location="center">
+          <text margin={{ top: 0, bottom: 4, left: 10, right: 10 }}>{`§^4^${leftColor}${leftFormatted}`}</text>
+        </div>
+        <div width="1/2" location="center">
+          <text margin={{ top: 0, bottom: 4, left: 10, right: 10 }}>{`§^4^${rightColor}${rightFormatted}`}</text>
+        </div>
+      </div>
+      <div width="100%" direction="row">
+        <div width="1/2" location="center">
+          <text margin={{ bottom: 8 }}>{leftDelta}</text>
+        </div>
+        <div width="1/2" location="center">
+          <text margin={{ bottom: 8 }}>{rightDelta}</text>
+        </div>
+      </div>
+    </box>
+  );
+};
diff --git a/apps/discord-bot/src/components/index.ts b/apps/discord-bot/src/components/index.ts
index bdd58d484..15d2f6bde 100644
--- a/apps/discord-bot/src/components/index.ts
+++ b/apps/discord-bot/src/components/index.ts
@@ -19,3 +19,4 @@ export * from "./Sidebar.js";
 export * from "./Skin.js";
 export * from "./Table/index.js";
 export * from "./GameList.js";
+export * from "./SplitPill.js";
diff --git a/locales/en-US/default.json b/locales/en-US/default.json
index b66f3e884..d4650f525 100644
--- a/locales/en-US/default.json
+++ b/locales/en-US/default.json
@@ -26,6 +26,9 @@
     "badge-set": "Upload a new profile badge",
     "badge-view": "View your current profile badge",
     "bedwars": "$t(commands.hypixel-command, { \"name\": \"BedWars\" })",
+    "compare": "View a head-to-head comparison of two players' stats",
+    "compare-command": "Compare two players' {{name}} stats",
+    "compare-bedwars": "$t(commands.compare-command, { \"name\": \"BedWars\" })",
     "bedwars-challenges": "$t(commands.hypixel-command, { \"name\": \"BedWars Challenges\" })",
     "blitzsg": "$t(commands.hypixel-command, { \"name\": \"BlitzSG\" })",
     "buildbattle": "$t(commands.hypixel-command, { \"name\": \"Build Battle\" })",

From 145eca0d85a227a1329900f08250a14927b4373d Mon Sep 17 00:00:00 2001
From: Cody <codrrrr@gmail.com>
Date: Sun, 31 May 2026 05:09:15 -0600
Subject: [PATCH 2/3] feat(compare): render player heads flanking names in
 compare header
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fetch both players' head images (HEAD_SIZE=32px) in parallel with the
logo in the shared run() path, so every future game subcommand inherits
heads with no per-game work. Heads are passed as Image|null — a failed
fetch degrades gracefully to name-only display via the nameRow array
conditional. API base comes from the existing config-driven
getPlayerHead() on ApiService (same pattern as getPlayerSkin).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../src/commands/compare/compare.command.tsx  | 11 ++-
 .../src/commands/compare/compare.profile.tsx  | 87 +++++++++++--------
 2 files changed, 59 insertions(+), 39 deletions(-)

diff --git a/apps/discord-bot/src/commands/compare/compare.command.tsx b/apps/discord-bot/src/commands/compare/compare.command.tsx
index b8229e73f..054cf1753 100644
--- a/apps/discord-bot/src/commands/compare/compare.command.tsx
+++ b/apps/discord-bot/src/commands/compare/compare.command.tsx
@@ -25,7 +25,7 @@ import {
   PlayerArgument,
   SubCommand,
 } from "@statsify/discord";
-import { CompareProfile } from "./compare.profile.js";
+import { CompareProfile, HEAD_SIZE } from "./compare.profile.js";
 import { GamesWithBackgrounds, mapBackground } from "#constants";
 import { StatColumn } from "#components";
 import { getBackground, getLogo } from "@statsify/assets";
@@ -69,7 +69,12 @@ export class CompareCommand {
       this.apiService.getPlayer(context.option("player2", ""), user),
     ]);
 
-    const logo = await getLogo(user);
+    const [logo, head1, head2] = await Promise.all([
+      getLogo(user),
+      this.apiService.getPlayerHead(player.uuid, HEAD_SIZE).catch(() => null),
+      this.apiService.getPlayerHead(player2.uuid, HEAD_SIZE).catch(() => null),
+    ]);
+
     const allModes = modes.getModes();
 
     const pages: Page[] = allModes.map((mode) => ({
@@ -83,6 +88,8 @@ export class CompareCommand {
           <CompareProfile
             player={player}
             player2={player2}
+            head1={head1}
+            head2={head2}
             background={bg}
             logo={logo}
             user={user}
diff --git a/apps/discord-bot/src/commands/compare/compare.profile.tsx b/apps/discord-bot/src/commands/compare/compare.profile.tsx
index 7fff10f44..c139c484c 100644
--- a/apps/discord-bot/src/commands/compare/compare.profile.tsx
+++ b/apps/discord-bot/src/commands/compare/compare.profile.tsx
@@ -17,9 +17,13 @@ import type { Image } from "skia-canvas";
 import type { LocalizeFunction } from "@statsify/discord";
 import type { Player, User } from "@statsify/schemas";
 
+export const HEAD_SIZE = 32;
+
 export interface CompareProfileProps {
   player: Player;
   player2: Player;
+  head1: Image | null;
+  head2: Image | null;
   background: Image;
   logo: Image;
   user: User | null;
@@ -32,6 +36,8 @@ export interface CompareProfileProps {
 export const CompareProfile = ({
   player,
   player2,
+  head1,
+  head2,
   background,
   logo,
   user,
@@ -39,44 +45,51 @@ export const CompareProfile = ({
   table1,
   table2,
   title,
-}: CompareProfileProps) => (
-  <Container background={background}>
-    <div width="100%" location="center">
-      <text margin={{ top: 8, bottom: 8, left: 12, right: 12 }}>{title}</text>
-    </div>
-    <div width="100%" location="center" margin={{ bottom: 4 }}>
-      <text>{`§a${player.prefixName} §7vs §c${player2.prefixName}`}</text>
-    </div>
-    <Table.table>
-      {table1.map((row, ri) => (
-        <Table.tr>
-          {row.map((col1, ci) => {
-            const col2 = table2[ri][ci];
-            const delta = Math.abs(col1.value - col2.value);
-            if (col1.comparable === false) {
+}: CompareProfileProps) => {
+  const nameRow: JSX.Element[] = [];
+  if (head1) nameRow.push(<img image={head1} width={HEAD_SIZE} height={HEAD_SIZE} margin={{ right: 6 }} />);
+  nameRow.push(<text>{`§a${player.prefixName} §7vs §c${player2.prefixName}`}</text>);
+  if (head2) nameRow.push(<img image={head2} width={HEAD_SIZE} height={HEAD_SIZE} margin={{ left: 6 }} />);
+
+  return (
+    <Container background={background}>
+      <div width="100%" location="center">
+        <text margin={{ top: 8, bottom: 8, left: 12, right: 12 }}>{title}</text>
+      </div>
+      <div width="100%" location="center" direction="row" margin={{ bottom: 4 }}>
+        {nameRow}
+      </div>
+      <Table.table>
+        {table1.map((row, ri) => (
+          <Table.tr>
+            {row.map((col1, ci) => {
+              const col2 = table2[ri][ci];
+              const delta = Math.abs(col1.value - col2.value);
+              if (col1.comparable === false) {
+                return (
+                  <Table.td
+                    title={col1.title}
+                    value={`${t(col1.value)} §7/ ${t(col2.value)}`}
+                    color={col1.color}
+                  />
+                );
+              }
               return (
-                <Table.td
+                <SplitPill
                   title={col1.title}
-                  value={`${t(col1.value)} §7/ ${t(col2.value)}`}
-                  color={col1.color}
+                  leftValue={col1.value}
+                  rightValue={col2.value}
+                  leftFormatted={t(col1.value)}
+                  rightFormatted={t(col2.value)}
+                  deltaFormatted={t(delta)}
+                  lowerIsBetter={col1.lowerIsBetter}
                 />
               );
-            }
-            return (
-              <SplitPill
-                title={col1.title}
-                leftValue={col1.value}
-                rightValue={col2.value}
-                leftFormatted={t(col1.value)}
-                rightFormatted={t(col2.value)}
-                deltaFormatted={t(delta)}
-                lowerIsBetter={col1.lowerIsBetter}
-              />
-            );
-          })}
-        </Table.tr>
-      ))}
-    </Table.table>
-    <Footer logo={logo} user={user} />
-  </Container>
-);
+            })}
+          </Table.tr>
+        ))}
+      </Table.table>
+      <Footer logo={logo} user={user} />
+    </Container>
+  );
+};

From 071366b3f74de30285368e3304a47e5613249528 Mon Sep 17 00:00:00 2001
From: Cody <codrrrr@gmail.com>
Date: Mon, 1 Jun 2026 03:59:05 -0600
Subject: [PATCH 3/3] fix(compare): round delta values for accurate comparisons

---
 apps/discord-bot/src/commands/compare/compare.profile.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/apps/discord-bot/src/commands/compare/compare.profile.tsx b/apps/discord-bot/src/commands/compare/compare.profile.tsx
index c139c484c..79049c32d 100644
--- a/apps/discord-bot/src/commands/compare/compare.profile.tsx
+++ b/apps/discord-bot/src/commands/compare/compare.profile.tsx
@@ -16,6 +16,7 @@ import {
 import type { Image } from "skia-canvas";
 import type { LocalizeFunction } from "@statsify/discord";
 import type { Player, User } from "@statsify/schemas";
+import { roundTo } from "@statsify/math";
 
 export const HEAD_SIZE = 32;
 
@@ -64,7 +65,7 @@ export const CompareProfile = ({
           <Table.tr>
             {row.map((col1, ci) => {
               const col2 = table2[ri][ci];
-              const delta = Math.abs(col1.value - col2.value);
+              const delta = roundTo(Math.abs(col1.value - col2.value));
               if (col1.comparable === false) {
                 return (
                   <Table.td