feat: Make retries more visible (#1255)

### Summary
Retries discoverability was low and many users wasn't noticing that
activity is currently retrying. This changes increases visibility of the
retries badge by changing it color to a color that brings attention
(warning) and changing the icon to `Retries`

### Testing
Tested on grouped list
<img width="2082" height="698" alt="Screenshot 2026-04-23 at 11 49 30"
src="https://github.com/user-attachments/assets/0d607c40-d21d-4836-8860-509305945b8b"
/>

Tested on ungrouped list
<img width="1745" height="1197" alt="Screenshot 2026-04-23 at 11 52 16"
src="https://github.com/user-attachments/assets/7e482325-2de0-44be-9e84-9b5899b40b6e"
/>


Test old history unchanged
<img width="1721" height="870" alt="Screenshot 2026-04-22 at 22 03 12"
src="https://github.com/user-attachments/assets/5713d4bb-96bc-408b-8ca7-cf976d15dbf6"
/>

Author: Assem-Uber

src/views/workflow-history-v2/config/workflow-history-details-row-parsers.config.ts

@@ -37,7 +37,10 @@ const workflowHistoryDetailsRowParsersConfig: Array<DetailsRowItemParser> = [
     matcher: (name) => name === 'attempt',
     hide: (_, value) => typeof value === 'number' && value <= 0,
     icon: MdReplay,
-    customTooltipContent: () => 'retries',
+    customRenderValue: ({ value }) =>
+      value === 1 ? '1 Retry' : `${value} Retries`,
+    // TODO: Provide more flexible render methods to avoid adding new props for each customization
+    badgeColor: 'warning',
   },
   {
     name: 'Workflow links as having clickable content',

src/views/workflow-history-v2/workflow-history-details-row/helpers/__tests__/get-parsed-details-row-items.test.ts

@@ -43,6 +43,7 @@ jest.mock('../../../config/workflow-history-details-row-parsers.config', () => {
         icon: mockIcon,
         customTooltipContent: jest.fn(() => 'retries'),
         omitWrapping: true,
+        badgeColor: 'warning',
       },
     ] satisfies Array<DetailsRowItemParser>,
   };
@@ -353,4 +354,24 @@ describe(getParsedDetailsRowItems.name, () => {
     expect(result).toHaveLength(1);
     expect(result[0].omitWrapping).toBe(true);
   });
+
+  it('should include badgeColor from parser config when available', () => {
+    const detailsEntries: EventDetailsEntries = [
+      {
+        key: 'attempt',
+        path: 'attempt',
+        value: 2,
+        renderConfig: {
+          name: 'Test Config',
+          key: 'test',
+        },
+        isGroup: false,
+      },
+    ];
+
+    const result = getParsedDetailsRowItems(detailsEntries);
+
+    expect(result).toHaveLength(1);
+    expect(result[0].badgeColor).toBe('warning');
+  });
 });

src/views/workflow-history-v2/workflow-history-details-row/helpers/get-parsed-details-row-items.ts

@@ -52,6 +52,7 @@ export default function getParsedDetailsRowItems(
       invertTooltipColors: parserConfig?.invertTooltipColors,
       omitWrapping: parserConfig?.omitWrapping,
       hasClickableContent: parserConfig?.hasClickableContent,
+      badgeColor: parserConfig?.badgeColor,
     });
 
     return acc;

src/views/workflow-history-v2/workflow-history-details-row/workflow-history-details-row.styles.ts

@@ -12,35 +12,53 @@ export const styled = {
   })),
   DetailsFieldContainer: createStyled<
     'div',
-    { $isNegative: boolean; $omitWrapping: boolean }
+    {
+      $isNegative: boolean;
+      $omitWrapping: boolean;
+      $badgeColor?: 'warning';
+    }
   >(
     'div',
     ({
       $theme,
       $isNegative,
       $omitWrapping,
+      $badgeColor,
     }: {
       $theme: Theme;
       $isNegative: boolean;
       $omitWrapping: boolean;
-    }) => ({
-      display: 'flex',
-      alignItems: 'center',
-      gap: $theme.sizing.scale100,
-      color: $isNegative
-        ? $theme.colors.contentNegative
-        : $theme.colors.contentPrimary,
-      height: $theme.sizing.scale700,
-      ...($omitWrapping
-        ? {}
-        : {
-            padding: `${$theme.sizing.scale0} ${$theme.sizing.scale100}`,
-            backgroundColor: $isNegative
-              ? $theme.colors.backgroundNegativeLight
-              : $theme.colors.backgroundSecondary,
-            borderRadius: $theme.borders.radius200,
-          }),
-    })
+      $badgeColor?: 'warning';
+    }) => {
+      let color: string;
+      let backgroundColorWhenWrapped: string;
+
+      if ($isNegative) {
+        color = $theme.colors.contentNegative;
+        backgroundColorWhenWrapped = $theme.colors.backgroundNegativeLight;
+      } else if ($badgeColor === 'warning') {
+        color = $theme.colors.warning700;
+        backgroundColorWhenWrapped = $theme.colors.backgroundWarningLight;
+      } else {
+        color = $theme.colors.contentPrimary;
+        backgroundColorWhenWrapped = $theme.colors.backgroundSecondary;
+      }
+
+      return {
+        display: 'flex',
+        alignItems: 'center',
+        gap: $theme.sizing.scale100,
+        color,
+        height: $theme.sizing.scale700,
+        ...($omitWrapping
+          ? {}
+          : {
+              padding: `${$theme.sizing.scale0} ${$theme.sizing.scale100}`,
+              backgroundColor: backgroundColorWhenWrapped,
+              borderRadius: $theme.borders.radius200,
+            }),
+      };
+    }
   ),
 };
 

src/views/workflow-history-v2/workflow-history-details-row/workflow-history-details-row.tsx

@@ -58,6 +58,7 @@ export default function WorkflowHistoryDetailsRow({
             <styled.DetailsFieldContainer
               $isNegative={isNegative}
               $omitWrapping={item.omitWrapping ?? false}
+              $badgeColor={item.badgeColor}
               {...(item.hasClickableContent
                 ? {
                     onClick: (e: React.MouseEvent<HTMLDivElement>) =>

src/views/workflow-history-v2/workflow-history-details-row/workflow-history-details-row.types.ts

@@ -53,6 +53,8 @@ export type DetailsRowItemParser = {
   omitWrapping?: boolean;
   /** Optional flag to stop click event propagation if the item has clickable content */
   hasClickableContent?: boolean;
+  /** Optional semantic badge color for the field pill (e.g. retries / attempt count) */
+  badgeColor?: 'warning';
 };
 
 export type DetailsRowItem = {
@@ -68,6 +70,7 @@ export type DetailsRowItem = {
   invertTooltipColors?: boolean;
   omitWrapping?: boolean;
   hasClickableContent?: boolean;
+  badgeColor?: 'warning';
 };
 
 export type Props = {