Add AI Summary tab for replay details with feature flag support

ai-summary-implementation.md

@@ -0,0 +1,131 @@
+# AI Summary Tab Implementation for Replay Details
+
+## Overview
+
+Added a new "AI Summary" tab to the Replay Details page that is visible only when the `organizations:replay-ai-summaries` feature flag is enabled. The tab is positioned before the Breadcrumbs tab and makes a POST request to `/organizations/{organization_slug}/replays/summary/` to fetch AI-generated summaries.
+
+## Changes Made
+
+### 1. Updated TabKey Enum
+
+**File:** `static/app/utils/replays/hooks/useActiveReplayTab.tsx`
+
+- Added `AI_SUMMARY = 'ai-summary'` to the TabKey enum
+- Added `TabKey.AI_SUMMARY` to the `supportedVideoTabs` array to ensure it works for mobile replays
+
+### 2. Updated FocusTabs Component
+
+**File:** `static/app/views/replays/detail/layout/focusTabs.tsx`
+
+- Added feature flag check for `replay-ai-summaries` in the `getReplayTabs` function
+- The AI Summary tab appears before Breadcrumbs when the feature flag is enabled
+- Added proper TypeScript typing for the Organization parameter
+
+### 3. Updated FocusArea Component
+
+**File:** `static/app/views/replays/detail/layout/focusArea.tsx`
+
+- Added case for `TabKey.AI_SUMMARY` to render the new `AISummary` component
+- Imported the new `AISummary` component
+
+### 4. Created AISummary Component
+
+**File:** `static/app/views/replays/detail/aiSummary/index.tsx`
+
+- **Loading State:** Shows `<LoadingIndicator>` while the API request is in flight
+- **Error State:** Shows error alert if the request fails
+- **Success State:** Displays the summary text from the API response
+- **API Integration:** Uses Sentry's `useApiQuery()` hook with proper query key configuration for POST requests
+- **Caching:** Implements 5-minute stale time for efficient caching
+- **Conditional Fetching:** Only makes requests when replay record is available
+- **Feature Flag:** Only accessible when `organizations:replay-ai-summaries` is enabled
+- **Styling:** Consistent with other replay detail tabs using styled components
+
+## API Integration Details
+
+### Query Key Structure
+
+```typescript
+function createAISummaryQueryKey(orgSlug: string, replayId: string): ApiQueryKey {
+  return [
+    `/organizations/${orgSlug}/replays/summary/`,
+    {
+      method: 'POST',
+      data: {
+        replayId,
+      },
+    },
+  ];
+}
+```
+
+### useApiQuery Configuration
+
+```typescript
+const {data, isLoading, isError} = useApiQuery<SummaryResponse>(
+  createAISummaryQueryKey(organization.slug, replayRecord?.id ?? ''),
+  {
+    staleTime: 5 * 60 * 1000, // 5 minutes
+    enabled: Boolean(replayRecord?.id),
+  }
+);
+```
+
+### Endpoint
+
+```
+POST /organizations/{organization_slug}/replays/summary/
+```
+
+### Request Body
+
+```json
+{
+  "replayId": "replay-id-here"
+}
+```
+
+### Expected Response
+
+```json
+{
+  "summary": "AI-generated summary text here"
+}
+```
+
+## Benefits of useApiQuery Implementation
+
+1. **Automatic Caching:** Built-in caching with 5-minute stale time prevents unnecessary requests
+2. **Request Deduplication:** Multiple components requesting the same data will share a single request
+3. **Background Refetching:** Automatic background updates when data becomes stale
+4. **Conditional Fetching:** Only makes requests when replay record is available
+5. **Error Handling:** Built-in error states and retry logic
+6. **Loading States:** Automatic loading state management
+7. **TypeScript Safety:** Full type safety with TypeScript generics
+
+## User Experience
+
+1. **Feature Flag Disabled:** AI Summary tab is completely hidden
+2. **Feature Flag Enabled:** AI Summary tab appears as the first tab before Breadcrumbs
+3. **First Load:** Shows loading indicator while fetching summary
+4. **Success:** Displays the summary text with proper formatting
+5. **Error:** Shows user-friendly error message
+6. **No Data:** Shows informational message when no summary is available
+7. **Subsequent Visits:** Cached data loads instantly within 5-minute window
+
+## Testing
+
+The implementation includes:
+
+- Data test ID: `replay-details-ai-summary-tab` for automated testing
+- Proper error handling for API failures
+- Loading states for better UX
+- Feature flag integration for gradual rollout
+- Conditional fetching to prevent unnecessary requests
+
+## Dependencies
+
+- Feature flag: `organizations:replay-ai-summaries` (already defined in `src/sentry/features/temporary.py`)
+- API endpoint: `/organizations/{organization_slug}/replays/summary/` (needs backend implementation)
+- Components: Uses existing Sentry UI components (`LoadingIndicator`, `Alert`, etc.)
+- Query Client: Uses Sentry's `useApiQuery` hook for data fetching and caching

static/app/utils/replays/hooks/useActiveReplayTab.tsx

@@ -3,6 +3,7 @@ import {useCallback} from 'react';
 import useUrlParams from 'sentry/utils/useUrlParams';
 
 export enum TabKey {
+  AI = 'ai',
   BREADCRUMBS = 'breadcrumbs',
   CONSOLE = 'console',
   ERRORS = 'errors',
@@ -14,6 +15,7 @@ export enum TabKey {
 
 function isReplayTab({tab, isVideoReplay}: {isVideoReplay: boolean; tab: string}) {
   const supportedVideoTabs = [
+    TabKey.AI,
     TabKey.TAGS,
     TabKey.ERRORS,
     TabKey.BREADCRUMBS,

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

@@ -0,0 +1,106 @@
+import styled from '@emotion/styled';
+
+import {Alert} from 'sentry/components/core/alert';
+import LoadingIndicator from 'sentry/components/loadingIndicator';
+import {t} from 'sentry/locale';
+import {space} from 'sentry/styles/space';
+import type {ApiQueryKey} from 'sentry/utils/queryClient';
+import {useApiQuery} from 'sentry/utils/queryClient';
+import {decodeScalar} from 'sentry/utils/queryString';
+import useLocationQuery from 'sentry/utils/url/useLocationQuery';
+import useOrganization from 'sentry/utils/useOrganization';
+import useProjectFromId from 'sentry/utils/useProjectFromId';
+import FluidHeight from 'sentry/views/replays/detail/layout/fluidHeight';
+import TabItemContainer from 'sentry/views/replays/detail/tabItemContainer';
+import type {ReplayRecord} from 'sentry/views/replays/types';
+
+interface Props {
+  replayRecord: ReplayRecord | undefined;
+}
+
+interface SummaryResponse {
+  summary: string;
+}
+
+function createAISummaryQueryKey(
+  orgSlug: string,
+  projectSlug: string | undefined,
+  replayId: string
+): ApiQueryKey {
+  return [
+    `/projects/${orgSlug}/${projectSlug}/replays/${replayId}/summarize/breadcrumbs/`,
+  ];
+}
+
+export default function Ai({replayRecord}: Props) {
+  const organization = useOrganization();
+  const {project: project_id} = useLocationQuery({
+    fields: {project: decodeScalar},
+  });
+  const project = useProjectFromId({project_id});
+
+  const {
+    data: summaryData,
+    isLoading,
+    isError,
+    error,
+  } = useApiQuery<SummaryResponse>(
+    createAISummaryQueryKey(organization.slug, project?.slug, replayRecord?.id ?? ''),
+    {
+      staleTime: 5 * 60 * 1000, // 5 minutes
+      enabled: Boolean(replayRecord?.id && project?.slug),
+    }
+  );
+
+  const renderContent = () => {
+    if (isLoading) {
+      return (
+        <LoadingContainer>
+          <LoadingIndicator />
+        </LoadingContainer>
+      );
+    }
+
+    if (isError || error) {
+      return <Alert type="error">{t('Failed to load AI summary')}</Alert>;
+    }
+
+    if (!summaryData) {
+      return <Alert type="info">{t('No summary available for this replay.')}</Alert>;
+    }
+
+    return (
+      <SummaryContainer>
+        <SummaryText>{summaryData.summary}</SummaryText>
+      </SummaryContainer>
+    );
+  };
+
+  return (
+    <PaddedFluidHeight>
+      <TabItemContainer data-test-id="replay-details-ai-summary-tab">
+        {renderContent()}
+      </TabItemContainer>
+    </PaddedFluidHeight>
+  );
+}
+
+const PaddedFluidHeight = styled(FluidHeight)`
+  padding-top: ${space(1)};
+`;
+
+const LoadingContainer = styled('div')`
+  display: flex;
+  justify-content: center;
+  padding: ${space(4)};
+`;
+
+const SummaryContainer = styled('div')`
+  padding: ${space(2)};
+`;
+
+const SummaryText = styled('p')`
+  line-height: 1.6;
+  margin: 0;
+  white-space: pre-wrap;
+`;

static/app/views/replays/detail/layout/focusArea.tsx

@@ -1,4 +1,5 @@
 import useActiveReplayTab, {TabKey} from 'sentry/utils/replays/hooks/useActiveReplayTab';
+import Ai from 'sentry/views/replays/detail/ai';
 import Breadcrumbs from 'sentry/views/replays/detail/breadcrumbs';
 import Console from 'sentry/views/replays/detail/console';
 import ErrorList from 'sentry/views/replays/detail/errorList/index';
@@ -18,6 +19,8 @@ export default function FocusArea({
   const {getActiveTab} = useActiveReplayTab({isVideoReplay});
 
   switch (getActiveTab()) {
+    case TabKey.AI:
+      return <Ai replayRecord={replayRecord} />;
     case TabKey.NETWORK:
       return <NetworkList />;
     case TabKey.TRACE:

static/app/views/replays/detail/layout/focusTabs.tsx

@@ -4,17 +4,21 @@ import styled from '@emotion/styled';
 import {TabList, Tabs} from 'sentry/components/core/tabs';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
+import type {Organization} from 'sentry/types/organization';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import useActiveReplayTab, {TabKey} from 'sentry/utils/replays/hooks/useActiveReplayTab';
 import useOrganization from 'sentry/utils/useOrganization';
 
 function getReplayTabs({
   isVideoReplay,
+  organization,
 }: {
   isVideoReplay: boolean;
+  organization: Organization;
 }): Record<TabKey, ReactNode> {
   // For video replays, we hide the memory tab (not applicable for mobile)
   return {
+    [TabKey.AI]: organization.features.includes('replay-ai-summaries') ? t('AI') : null,
     [TabKey.BREADCRUMBS]: t('Breadcrumbs'),
     [TabKey.CONSOLE]: t('Console'),
     [TabKey.NETWORK]: t('Network'),
@@ -34,7 +38,7 @@ function FocusTabs({isVideoReplay}: Props) {
   const {getActiveTab, setActiveTab} = useActiveReplayTab({isVideoReplay});
   const activeTab = getActiveTab();
 
-  const tabs = Object.entries(getReplayTabs({isVideoReplay})).filter(
+  const tabs = Object.entries(getReplayTabs({isVideoReplay, organization})).filter(
     ([_, v]) => v !== null
   );