feat(replay): add error and feedback icons on chapter rows (#95496)

closes
https://linear.app/getsentry/issue/REPLAY-489/highlight-errors-and-feedback-on-chapters


https://github.com/user-attachments/assets/392faed9-3367-49bf-9708-574140aa8c58

Author: michellewzhang

static/app/views/replays/detail/ai/chapterList.tsx

@@ -1,11 +1,11 @@
-import {useCallback, useMemo} from 'react';
+import {useCallback, useMemo, useState} from 'react';
 import styled from '@emotion/styled';
 import classNames from 'classnames';
 
 import {Alert} from 'sentry/components/core/alert';
 import EmptyMessage from 'sentry/components/emptyMessage';
 import {useReplayContext} from 'sentry/components/replays/replayContext';
-import {IconChevron} from 'sentry/icons';
+import {IconChevron, IconFire, IconMegaphone} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import useCrumbHandlers from 'sentry/utils/replays/hooks/useCrumbHandlers';
@@ -33,10 +33,12 @@ export function ChapterList({summaryData}: Props) {
   const chapterData = useMemo(
     () =>
       summaryData?.data.time_ranges
-        .map(({period_title, period_start, period_end}) => ({
+        .map(({period_title, period_start, period_end, error, feedback}) => ({
           title: period_title,
           start: period_start,
           end: period_end,
+          error,
+          feedback,
           breadcrumbs:
             replay
               ?.getChapterFrames()
@@ -60,14 +62,16 @@ export function ChapterList({summaryData}: Props) {
 
   return (
     <ChaptersList>
-      {chapterData.map(({title, start, end, breadcrumbs}, i) => (
+      {chapterData.map(({title, start, end, breadcrumbs, error, feedback}, i) => (
         <ChapterRow
           key={i}
           title={title}
           start={start}
           end={end}
           breadcrumbs={breadcrumbs}
           onClickChapterTimestamp={onClickChapterTimestamp}
+          error={error}
+          feedback={feedback}
         />
       ))}
     </ChaptersList>
@@ -81,9 +85,13 @@ function ChapterRow({
   breadcrumbs,
   onClickChapterTimestamp,
   className,
+  error,
+  feedback,
 }: {
   breadcrumbs: ReplayFrame[];
   end: number;
+  error: boolean;
+  feedback: boolean;
   onClickChapterTimestamp: (event: React.MouseEvent<Element>, start: number) => void;
   start: number;
   title: string;
@@ -92,6 +100,7 @@ function ChapterRow({
   const {replay, currentTime} = useReplayContext();
   const {onClickTimestamp} = useCrumbHandlers();
   const [currentHoverTime] = useCurrentHoverTime();
+  const [isHovered, setIsHovered] = useState(false);
 
   const startOffset = Math.max(start - (replay?.getStartTimestampMs() ?? 0), 0);
   const endOffset = Math.max(end - (replay?.getStartTimestampMs() ?? 0), 0);
@@ -107,11 +116,27 @@ function ChapterRow({
         beforeHoverTime: currentHoverTime === undefined ? undefined : isBeforeHover,
         afterHoverTime: currentHoverTime === undefined ? undefined : !isBeforeHover,
       })}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
     >
-      <Chapter>
-        <ChapterIconArrowWrapper>
-          <ChapterIconArrow direction="right" size="xs" />
-        </ChapterIconArrowWrapper>
+      <Chapter error={error} feedback={feedback}>
+        <ChapterIconWrapper>
+          {error ? (
+            isHovered ? (
+              <ChapterIconArrow direction="right" size="xs" color="errorText" />
+            ) : (
+              <IconFire size="xs" color="errorText" />
+            )
+          ) : feedback ? (
+            isHovered ? (
+              <ChapterIconArrow direction="right" size="xs" color="pink300" />
+            ) : (
+              <IconMegaphone size="xs" color="pink300" />
+            )
+          ) : (
+            <ChapterIconArrow direction="right" size="xs" />
+          )}
+        </ChapterIconWrapper>
         <ChapterTitle>
           <span>{title}</span>
 
@@ -149,12 +174,14 @@ function ChapterRow({
   );
 }
 
-const ChapterIconArrowWrapper = styled('div')`
+const ChapterIconWrapper = styled('div')`
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: ${space(1)} ${space(0.5)};
+  padding: ${space(0.5)};
+  margin-right: ${space(1)};
   background-color: ${p => p.theme.background};
+  border-radius: 50%;
   z-index: 2; /* needs to be above "ChapterWrapper summary::after" */
 `;
 
@@ -191,6 +218,7 @@ const ChapterWrapper = styled('details')`
 
   &:last-child summary::after {
     bottom: 0;
+    display: none; /* hide the vertical line for the last chapter */
   }
 
   &.activeChapter .beforeCurrentTime:last-child {
@@ -212,12 +240,22 @@ const ChapterBreadcrumbRow = styled(BreadcrumbRow)`
   }
 `;
 
-const Chapter = styled('summary')`
+const Chapter = styled('summary')<{error?: boolean; feedback?: boolean}>`
   cursor: pointer;
   display: flex;
   align-items: center;
   font-size: ${p => p.theme.fontSize.lg};
   padding: 0 ${space(0.75)};
+  color: ${p =>
+    p.error ? p.theme.errorText : p.feedback ? p.theme.pink300 : p.theme.textColor};
+  &:hover {
+    background-color: ${p =>
+      p.error
+        ? p.theme.red100
+        : p.feedback
+          ? p.theme.pink100
+          : p.theme.backgroundSecondary};
+  }
 
   /* sorry */
   &:focus-visible {
@@ -243,9 +281,8 @@ const ChapterTitle = styled('div')`
     font-weight: ${p => p.theme.fontWeight.bold};
   }
 
-  :not(details[open] &) {
-    border-bottom: 1px solid ${p => p.theme.innerBorder};
-  }
+  border-bottom: 1px solid ${p => p.theme.innerBorder};
+
   details:last-child:not([open]) & {
     border-bottom: none;
   }

static/app/views/replays/detail/ai/useFetchReplaySummary.tsx

@@ -7,7 +7,13 @@ import useProjectFromId from 'sentry/utils/useProjectFromId';
 export interface SummaryResponse {
   data: {
     summary: string;
-    time_ranges: Array<{period_end: number; period_start: number; period_title: string}>;
+    time_ranges: Array<{
+      error: boolean;
+      feedback: boolean;
+      period_end: number;
+      period_start: number;
+      period_title: string;
+    }>;
     title: string;
   };
 }