fix(replay): sort chapters by start and fix breadcrumb timestamp (#94123)

before:
<img width="705" alt="SCR-20250623-mpwo"
src="https://github.com/user-attachments/assets/55fda7e9-57e5-4d45-9c89-c7215f28d5cd"
/>



after:
<img width="616" alt="SCR-20250623-mpve"
src="https://github.com/user-attachments/assets/b1fcac9f-ce58-428a-885d-1ddfe34912b0"
/>

Author: michellewzhang

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

@@ -119,8 +119,8 @@ function AiContent({replayRecord}: Props) {
     );
   }
 
-  const chapterData = summaryData?.data.time_ranges.map(
-    ({period_title, period_start, period_end}) => ({
+  const chapterData = summaryData?.data.time_ranges
+    .map(({period_title, period_start, period_end}) => ({
       title: period_title,
       start: period_start,
       end: period_end,
@@ -132,8 +132,8 @@ function AiContent({replayRecord}: Props) {
               breadcrumb.timestampMs >= period_start &&
               breadcrumb.timestampMs <= period_end
           ) ?? [],
-    })
-  );
+    }))
+    .sort((a, b) => a.start - b.start);
 
   return (
     <ErrorBoundary mini>
@@ -176,7 +176,7 @@ function AiContent({replayRecord}: Props) {
                     onShowSnippet={() => {}}
                     showSnippet={false}
                     allowShowSnippet={false}
-                    startTimestampMs={breadcrumb.timestampMs}
+                    startTimestampMs={replay?.getStartTimestampMs() ?? 0}
                     key={`breadcrumb-${j}`}
                     style={{}}
                   />