From 4b09f06132871a57f3bd21d55ab4c4784ca90862 Mon Sep 17 00:00:00 2001
From: Ami Suzuki <asuzuki@jumptrading.com>
Date: Sat, 29 Nov 2025 14:24:16 -0600
Subject: [PATCH] feat: shreds chart legend

---
 src/colors.ts                                 | 10 ++++++++
 .../ShredsProgression/ShredsChartLegend.tsx   | 21 +++++++++++++++++
 .../Overview/ShredsProgression/const.ts       | 23 +++++++++++++++++++
 .../Overview/ShredsProgression/index.tsx      |  6 ++++-
 .../ShredsProgression/shreds.module.css       | 10 ++++++++
 .../Firedancer/CatchingUp/index.tsx           |  6 ++++-
 6 files changed, 74 insertions(+), 2 deletions(-)
 create mode 100644 src/features/Overview/ShredsProgression/ShredsChartLegend.tsx
 create mode 100644 src/features/Overview/ShredsProgression/shreds.module.css

diff --git a/src/colors.ts b/src/colors.ts
index 1fd4a138..4b6ffbb3 100644
--- a/src/colors.ts
+++ b/src/colors.ts
@@ -153,6 +153,16 @@ export const shredReplayedNothingColor = "#616A68";
 export const shredSkippedColor = "#8B4648";
 export const shredPublishedColor = "#685C70";
 
+export const shredLabelRepairRequestedColor = "#8B5148";
+export const shredLabelReceivedTurbineColor = "#3E6883";
+export const shredLabelReceivedRepairColor = "#896549";
+export const shredLabelReplayStartedColor = "#3A7B84";
+export const shredLabelReplayedTurbineColor = "#59A693";
+export const shredLabelReplayedRepairColor = "#5C844B";
+export const shredLabelReplayedNothingColor = "#616A68";
+export const shredLabelSkippedColor = "#8B4648";
+export const shredLabelPublishedColor = "#685C70";
+
 // epoch bar
 export const epochTextColor = "#FAFAFA";
 export const epochNotLiveColor = "#3CB4FF";
diff --git a/src/features/Overview/ShredsProgression/ShredsChartLegend.tsx b/src/features/Overview/ShredsProgression/ShredsChartLegend.tsx
new file mode 100644
index 00000000..c3ccc607
--- /dev/null
+++ b/src/features/Overview/ShredsProgression/ShredsChartLegend.tsx
@@ -0,0 +1,21 @@
+import { Flex, Box, Text } from "@radix-ui/themes";
+import { legend } from "./const";
+import styles from "./shreds.module.css";
+
+export function ShredsChartLegend() {
+  return (
+    <Flex gap="15px" wrap="wrap">
+      {Object.entries(legend).map(([label, color]) => {
+        return (
+          <Flex key={label} gap="5px" flexShrink="0">
+            <Box
+              className={styles.legendColorBox}
+              style={{ backgroundColor: color }}
+            />
+            <Text className={styles.legendLabel}>{label}</Text>
+          </Flex>
+        );
+      })}
+    </Flex>
+  );
+}
diff --git a/src/features/Overview/ShredsProgression/const.ts b/src/features/Overview/ShredsProgression/const.ts
index 4110c751..14e30d7d 100644
--- a/src/features/Overview/ShredsProgression/const.ts
+++ b/src/features/Overview/ShredsProgression/const.ts
@@ -1,4 +1,15 @@
 import { ShredEvent } from "../../../api/entities";
+import {
+  shredLabelRepairRequestedColor,
+  shredLabelReceivedTurbineColor,
+  shredLabelReceivedRepairColor,
+  shredLabelReplayStartedColor,
+  shredLabelReplayedTurbineColor,
+  shredLabelReplayedRepairColor,
+  shredLabelReplayedNothingColor,
+  shredLabelSkippedColor,
+  shredLabelPublishedColor,
+} from "../../../colors";
 
 export const xRangeMs = 10_000;
 export const delayMs = 50;
@@ -18,3 +29,15 @@ export const shredEventDescPriorities: Exclude<
   ShredEvent.shred_received_turbine,
   ShredEvent.shred_repair_request,
 ];
+
+export const legend = {
+  "Repair Requested": shredLabelRepairRequestedColor,
+  "Received Turbine": shredLabelReceivedTurbineColor,
+  "Received Repair": shredLabelReceivedRepairColor,
+  "Replay Started": shredLabelReplayStartedColor,
+  "Replayed Turbine": shredLabelReplayedTurbineColor,
+  "Replayed Repair": shredLabelReplayedRepairColor,
+  "Replayed Nothing": shredLabelReplayedNothingColor,
+  Skipped: shredLabelSkippedColor,
+  Published: shredLabelPublishedColor,
+};
diff --git a/src/features/Overview/ShredsProgression/index.tsx b/src/features/Overview/ShredsProgression/index.tsx
index bc006e3a..b50089f7 100644
--- a/src/features/Overview/ShredsProgression/index.tsx
+++ b/src/features/Overview/ShredsProgression/index.tsx
@@ -6,6 +6,7 @@ import { useAtomValue } from "jotai";
 import { ClientEnum } from "../../../api/entities";
 import { clientAtom } from "../../../atoms";
 import ShredsChart from "./ShredsChart";
+import { ShredsChartLegend } from "./ShredsChartLegend";
 
 export default function ShredsProgression() {
   const client = useAtomValue(clientAtom);
@@ -15,7 +16,10 @@ export default function ShredsProgression() {
   return (
     <Card>
       <Flex direction="column" gap="4">
-        <CardHeader text="Shreds" />
+        <Flex gap="15px" align="center" wrap="wrap">
+          <CardHeader text="Shreds" />
+          <ShredsChartLegend />
+        </Flex>
         <Box height="400px">
           <ShredsChart
             chartId="overview-shreds-chart"
diff --git a/src/features/Overview/ShredsProgression/shreds.module.css b/src/features/Overview/ShredsProgression/shreds.module.css
new file mode 100644
index 00000000..8d28edf4
--- /dev/null
+++ b/src/features/Overview/ShredsProgression/shreds.module.css
@@ -0,0 +1,10 @@
+.legend-color-box {
+  width: 10px;
+  height: 10px;
+  border-radius: 1px;
+}
+
+.legend-label {
+  font-size: 10px;
+  color: var(--header-label-text-color);
+}
diff --git a/src/features/StartupProgress/Firedancer/CatchingUp/index.tsx b/src/features/StartupProgress/Firedancer/CatchingUp/index.tsx
index 090b165a..2ca7048f 100644
--- a/src/features/StartupProgress/Firedancer/CatchingUp/index.tsx
+++ b/src/features/StartupProgress/Firedancer/CatchingUp/index.tsx
@@ -10,6 +10,7 @@ import CatchingUpTiles from "./CatchingUpTiles";
 import { PhaseHeader } from "../PhaseHeader";
 import useEstimateTotalSlots from "./useCatchingUpRates";
 import { BarsStats } from "./BarsStats";
+import { ShredsChartLegend } from "../../../Overview/ShredsProgression/ShredsChartLegend";
 
 export default function CatchingUp() {
   const setContainerEl = useSetAtom(catchingUpContainerElAtom);
@@ -30,7 +31,10 @@ export default function CatchingUp() {
         )}
 
         <Card className={styles.card} mb="14px">
-          <Text className={styles.title}>Shreds</Text>
+          <Flex gap="15px" align="center" wrap="wrap">
+            <Text className={styles.title}>Shreds</Text>
+            <ShredsChartLegend />
+          </Flex>
           <Box flexGrow="1" minHeight="280px">
             <ShredsChart chartId="catching-up-shreds" isOnStartupScreen />
           </Box>