From 0dddfbf37d4ca84ba4e066ef5b91ef1da5ee8ed1 Mon Sep 17 00:00:00 2001
From: philluiz2323 <philluiz2323@gmail.com>
Date: Sat, 25 Jul 2026 18:55:22 -0700
Subject: [PATCH] fix(ui): resolve slop/duplicate legend latest week per series

latestWeekWithSignal previously returned the newest week with either
series present, and both legends reused that single week. When only one
series was populated on the newest signal week, the other legend showed
empty even if an earlier week had real data. Parameterize by series and
cover the divergent-null case.

Closes #8667
---
 .../slop-duplicate-trend-card-model.ts        |  5 ++-
 .../slop-duplicate-trend-card.test.tsx        | 31 ++++++++++++++++++-
 .../app-panels/slop-duplicate-trend-card.tsx  | 13 ++++----
 3 files changed, 41 insertions(+), 8 deletions(-)

diff --git a/apps/loopover-ui/src/components/site/app-panels/slop-duplicate-trend-card-model.ts b/apps/loopover-ui/src/components/site/app-panels/slop-duplicate-trend-card-model.ts
index a4bc515a89..5bdf4e452b 100644
--- a/apps/loopover-ui/src/components/site/app-panels/slop-duplicate-trend-card-model.ts
+++ b/apps/loopover-ui/src/components/site/app-panels/slop-duplicate-trend-card-model.ts
@@ -45,13 +45,16 @@ export function trendHasAnySignal(weeks: SlopDuplicateTrendWeek[]): boolean {
   return seriesHasSignal(weeks, "slop") || seriesHasSignal(weeks, "duplicate");
 }
 
+/** Most recent week with a non-null value for the given series (independent per series). */
 export function latestWeekWithSignal(
   weeks: SlopDuplicateTrendWeek[],
+  series: "slop" | "duplicate",
 ): SlopDuplicateTrendWeek | null {
   for (let index = weeks.length - 1; index >= 0; index -= 1) {
     const week = weeks[index];
     if (!week) continue;
-    if (week.slopFlagRatePct !== null || week.duplicateFlagRatePct !== null) return week;
+    const value = series === "slop" ? week.slopFlagRatePct : week.duplicateFlagRatePct;
+    if (value !== null) return week;
   }
   return null;
 }
diff --git a/apps/loopover-ui/src/components/site/app-panels/slop-duplicate-trend-card.test.tsx b/apps/loopover-ui/src/components/site/app-panels/slop-duplicate-trend-card.test.tsx
index 0b1417a0f2..3b08ece9d7 100644
--- a/apps/loopover-ui/src/components/site/app-panels/slop-duplicate-trend-card.test.tsx
+++ b/apps/loopover-ui/src/components/site/app-panels/slop-duplicate-trend-card.test.tsx
@@ -2,7 +2,10 @@ import { render, screen } from "@testing-library/react";
 import { describe, expect, it } from "vitest";
 
 import { SlopDuplicateTrendCard } from "@/components/site/app-panels/slop-duplicate-trend-card";
-import type { MaintainerSlopDuplicateTrend } from "@/components/site/app-panels/slop-duplicate-trend-card-model";
+import {
+  latestWeekWithSignal,
+  type MaintainerSlopDuplicateTrend,
+} from "@/components/site/app-panels/slop-duplicate-trend-card-model";
 
 function trend(
   overrides: Partial<MaintainerSlopDuplicateTrend> = {},
@@ -86,4 +89,30 @@ describe("SlopDuplicateTrendCard", () => {
     render(<SlopDuplicateTrendCard trend={trend({ stale: true })} />);
     expect(screen.getByText(/stale snapshot/i)).toBeTruthy();
   });
+
+  it("resolves each series' legend from its own latest signal-bearing week", () => {
+    // Most recent week has only duplicate signal; earlier week has slop (and band).
+    // Shared "latest any signal" would hide the slop band behind the null series.
+    const weeks = [
+      {
+        weekStart: "2026-06-02",
+        slopFlagRatePct: 18.5,
+        slopBandLabel: "elevated" as const,
+        duplicateFlagRatePct: null,
+      },
+      {
+        weekStart: "2026-06-09",
+        slopFlagRatePct: null,
+        slopBandLabel: null,
+        duplicateFlagRatePct: 40,
+      },
+    ];
+
+    expect(latestWeekWithSignal(weeks, "slop")?.weekStart).toBe("2026-06-02");
+    expect(latestWeekWithSignal(weeks, "duplicate")?.weekStart).toBe("2026-06-09");
+
+    render(<SlopDuplicateTrendCard trend={trend({ weeks })} />);
+    expect(screen.getByText(/latest band: elevated/i)).toBeTruthy();
+    expect(screen.getByText(/latest: 40%/i)).toBeTruthy();
+  });
 });
diff --git a/apps/loopover-ui/src/components/site/app-panels/slop-duplicate-trend-card.tsx b/apps/loopover-ui/src/components/site/app-panels/slop-duplicate-trend-card.tsx
index 7e01136f94..8c92e06971 100644
--- a/apps/loopover-ui/src/components/site/app-panels/slop-duplicate-trend-card.tsx
+++ b/apps/loopover-ui/src/components/site/app-panels/slop-duplicate-trend-card.tsx
@@ -26,7 +26,8 @@ export function SlopDuplicateTrendCard({ trend }: { trend: MaintainerSlopDuplica
   const hasSignal = trendHasAnySignal(trend.weeks);
   const hasSlop = seriesHasSignal(trend.weeks, "slop");
   const hasDuplicate = seriesHasSignal(trend.weeks, "duplicate");
-  const latest = latestWeekWithSignal(trend.weeks);
+  const latestSlop = latestWeekWithSignal(trend.weeks, "slop");
+  const latestDuplicate = latestWeekWithSignal(trend.weeks, "duplicate");
 
   return (
     <AnalyticsCardShell
@@ -51,20 +52,20 @@ export function SlopDuplicateTrendCard({ trend }: { trend: MaintainerSlopDuplica
           color="var(--mint)"
           label="Slop flag rate"
           detail={
-            latest?.slopBandLabel
-              ? `latest band: ${latest.slopBandLabel}`
+            latestSlop?.slopBandLabel
+              ? `latest band: ${latestSlop.slopBandLabel}`
               : hasSlop
-                ? `latest: ${formatTrendRatePct(latest?.slopFlagRatePct)}`
+                ? `latest: ${formatTrendRatePct(latestSlop?.slopFlagRatePct)}`
                 : "no slop samples"
           }
-          bandLabel={latest?.slopBandLabel}
+          bandLabel={latestSlop?.slopBandLabel}
         />
         <LegendItem
           color="var(--warning)"
           label="Duplicate flag rate"
           detail={
             hasDuplicate
-              ? `latest: ${formatTrendRatePct(latest?.duplicateFlagRatePct)}`
+              ? `latest: ${formatTrendRatePct(latestDuplicate?.duplicateFlagRatePct)}`
               : "no duplicate samples"
           }
         />