fix: honor disableKillCount in playback UI (#87)

ui/src/hooks/__tests__/useCustomize.test.tsx

@@ -127,6 +127,28 @@ describe("useCustomize", () => {
     expect(document.documentElement.style.getPropertyValue("--accent-primary")).toBe("");
   });
 
+  it("honors disableKillCount even when customize is not enabled", async () => {
+    mockGetCustomize.mockResolvedValue({
+      enabled: false,
+      disableKillCount: true,
+      websiteURL: "https://should-not-appear.com",
+    });
+
+    const { getByTestId } = render(() => (
+      <CustomizeProvider>
+        <TestConsumer onConfig={() => {}} />
+      </CustomizeProvider>
+    ));
+
+    await vi.waitFor(() => {
+      const parsed = JSON.parse(getByTestId("config").textContent || "{}") as CustomizeConfig;
+      expect(parsed.disableKillCount).toBe(true);
+    });
+    // Branding fields must NOT leak through when customize is disabled.
+    const parsed = JSON.parse(getByTestId("config").textContent || "{}") as CustomizeConfig;
+    expect(parsed.websiteURL).toBeUndefined();
+  });
+
   it("cleans up applied properties on unmount", async () => {
     mockGetCustomize.mockResolvedValue({
       enabled: true,

ui/src/hooks/useCustomize.tsx

@@ -19,7 +19,14 @@ export function CustomizeProvider(props: {
     try {
       const api = new ApiClient();
       const data = await api.getCustomize();
-      if (!data.enabled) return;
+      if (!data.enabled) {
+        // disableKillCount is a privacy toggle, not a branding option, so
+        // honor it even when customize itself is not enabled.
+        if (data.disableKillCount) {
+          setConfig({ disableKillCount: true });
+        }
+        return;
+      }
       setConfig(data);
 
       // Apply CSS variable overrides to :root

ui/src/pages/recording-playback/components/StatsTab.tsx

@@ -3,6 +3,7 @@ import type { JSX } from "solid-js";
 import type { Side } from "../../../data/types";
 import { SIDE_COLORS_UI, SIDE_BG_COLORS } from "../../../config/sideColors";
 import { useEngine } from "../../../hooks/useEngine";
+import { useCustomize } from "../../../hooks/useCustomize";
 import { useI18n } from "../../../hooks/useLocale";
 import styles from "./SidePanel.module.css";
 
@@ -33,7 +34,9 @@ interface LeaderboardEntry {
 
 export function StatsTab(): JSX.Element {
   const engine = useEngine();
+  const customize = useCustomize();
   const { t } = useI18n();
+  const showPlayerKillCount = (): boolean => !customize().disableKillCount;
 
   // Frame-aware kill/death counts
   const killDeathCounts = createMemo(() =>
@@ -150,7 +153,7 @@ export function StatsTab(): JSX.Element {
         </div>
 
         {/* Leaderboard */}
-        <Show when={leaderboard().length > 0}>
+        <Show when={showPlayerKillCount() && leaderboard().length > 0}>
           <div>
             <div class={styles.statsLabel}>{t("leaderboard")}</div>
             <div class={styles.leaderboard} style={{ "margin-top": "8px" }}>

ui/src/pages/recording-playback/components/UnitsTab.tsx

@@ -4,6 +4,7 @@ import type { Side } from "../../../data/types";
 import type { Unit } from "../../../playback/entities/unit";
 import { SIDE_COLORS_UI, SIDE_BG_COLORS } from "../../../config/sideColors";
 import { useEngine } from "../../../hooks/useEngine";
+import { useCustomize } from "../../../hooks/useCustomize";
 import { useI18n } from "../../../hooks/useLocale";
 import { activeSide, setActiveSide } from "../shortcuts";
 import { CrosshairIcon, ChevronRightIcon, EyeOffIcon, EyeIcon, NavigationIcon } from "../../../components/Icons";
@@ -32,7 +33,9 @@ export interface UnitsTabProps {
 
 export function UnitsTab(props: UnitsTabProps): JSX.Element {
   const engine = useEngine();
+  const customize = useCustomize();
   const { t } = useI18n();
+  const showKillCount = (): boolean => !customize().disableKillCount;
   const [expandedGroups, setExpandedGroups] = createSignal<Set<string>>(new Set());
   const [selectedUnit, setSelectedUnit] = createSignal<number | null>(null);
 
@@ -221,7 +224,7 @@ export function UnitsTab(props: UnitsTabProps): JSX.Element {
                                 <span class={styles.unitRole}>{unit.role}</span>
                               </Show>
                             </span>
-                            <Show when={(killDeathCounts().kills.get(unit.id) ?? 0) > 0}>
+                            <Show when={showKillCount() && (killDeathCounts().kills.get(unit.id) ?? 0) > 0}>
                               <span class={styles.unitKills}>
                                 <CrosshairIcon size={10} />
                                 {killDeathCounts().kills.get(unit.id)}
@@ -240,6 +243,7 @@ export function UnitsTab(props: UnitsTabProps): JSX.Element {
                               onToggleFollow={toggleFollow}
                               onToggleBlacklist={props.onToggleBlacklist}
                               side={activeSide()}
+                              showKillCount={showKillCount()}
                             />
                           </Show>
                         </>
@@ -267,6 +271,7 @@ interface UnitDetailCardProps {
   onToggleFollow: (unitId: number) => void;
   onToggleBlacklist?: (playerEntityId: number) => void;
   side: Side;
+  showKillCount: boolean;
 }
 
 function UnitDetailCard(props: UnitDetailCardProps): JSX.Element {
@@ -277,24 +282,26 @@ function UnitDetailCard(props: UnitDetailCardProps): JSX.Element {
     >
       {/* Stats row */}
       <div class={styles.detailStats}>
-        <div class={styles.detailStatPill}>
-          <div
-            class={styles.detailStatValue}
-            style={{ color: props.kills > 0 ? "var(--accent-danger)" : "var(--text-dimmest)" }}
-          >
-            {props.kills}
+        <Show when={props.showKillCount}>
+          <div class={styles.detailStatPill}>
+            <div
+              class={styles.detailStatValue}
+              style={{ color: props.kills > 0 ? "var(--accent-danger)" : "var(--text-dimmest)" }}
+            >
+              {props.kills}
+            </div>
+            <div class={styles.detailStatLabel}>KILLS</div>
           </div>
-          <div class={styles.detailStatLabel}>KILLS</div>
-        </div>
-        <div class={styles.detailStatPill}>
-          <div
-            class={styles.detailStatValue}
-            style={{ color: props.deaths > 0 ? "var(--accent-warning)" : "var(--text-dimmest)" }}
-          >
-            {props.deaths}
+          <div class={styles.detailStatPill}>
+            <div
+              class={styles.detailStatValue}
+              style={{ color: props.deaths > 0 ? "var(--accent-warning)" : "var(--text-dimmest)" }}
+            >
+              {props.deaths}
+            </div>
+            <div class={styles.detailStatLabel}>DEATHS</div>
           </div>
-          <div class={styles.detailStatLabel}>DEATHS</div>
-        </div>
+        </Show>
         <div class={styles.detailStatPill}>
           {(() => {
             const visible = props.isBlacklisted ? 0 : props.markerCount;