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 = {}, @@ -86,4 +89,30 @@ describe("SlopDuplicateTrendCard", () => { render(); 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(); + 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 (