feat(seer): Add quick fix labels to issue stream and issue details (#91837)

Adjusts the Autofix badge in the issue stream to also say "Quick Fix"
and have a different tooltip if the fixability score is very high.

In the header of Issue Details, also show a Quick Fix badge only if the
fixability score is very high (does not show anything about Autofix).

(design approved by @vuluongj20 )


<img width="467" alt="Screenshot 2025-05-16 at 2 31 06 PM"
src="https://github.com/user-attachments/assets/b40cdfcd-2f13-42df-8be1-b30bb469bac5"
/>

<img width="503" alt="Screenshot 2025-05-16 at 2 13 05 PM"
src="https://github.com/user-attachments/assets/a03097cd-0f6a-400d-80f0-d153f2ee5aa8"
/>
<img width="757" alt="Screenshot 2025-05-16 at 2 23 27 PM"
src="https://github.com/user-attachments/assets/8ae17792-356d-4a89-b489-e9e939547732"
/>

---------

Co-authored-by: Scott Cooper <scttcper@gmail.com>

Author: roaga

static/app/components/eventOrGroupExtraDetails.tsx

@@ -1,15 +1,13 @@
 import {Fragment} from 'react';
 import styled from '@emotion/styled';
 
-import {SeerIcon} from 'sentry/components/ai/SeerIcon';
-import {Tooltip} from 'sentry/components/core/tooltip';
-import {getAutofixRunExists} from 'sentry/components/events/autofix/utils';
 import EventAnnotation from 'sentry/components/events/eventAnnotation';
 import GlobalSelectionLink from 'sentry/components/globalSelectionLink';
 import ShortId from 'sentry/components/group/inboxBadges/shortId';
 import TimesTag from 'sentry/components/group/inboxBadges/timesTag';
 import UnhandledTag from 'sentry/components/group/inboxBadges/unhandledTag';
 import IssueReplayCount from 'sentry/components/group/issueReplayCount';
+import IssueSeerBadge from 'sentry/components/group/issueSeerBadge';
 import ProjectBadge from 'sentry/components/idBadge/projectBadge';
 import ExternalLink from 'sentry/components/links/externalLink';
 import Link from 'sentry/components/links/link';
@@ -78,11 +76,6 @@ function EventOrGroupExtraDetails({data, showAssignee, showLifetime = true}: Pro
     data.issueCategory &&
     !!getReplayCountForIssue(data.id, data.issueCategory);
 
-  const showSeer =
-    organization.features.includes('gen-ai-features') &&
-    !organization.hideAiFeatures &&
-    getAutofixRunExists(data as Group);
-
   const {subtitle} = getTitle(data);
 
   const items = [
@@ -115,13 +108,7 @@ function EventOrGroupExtraDetails({data, showAssignee, showLifetime = true}: Pro
       </CommentsLink>
     ) : null,
     showReplayCount ? <IssueReplayCount group={data as Group} /> : null,
-    showSeer ? (
-      <Tooltip title="Seer has a potential fix for this issue" skipWrapper>
-        <CommentsLink to={{pathname: `${issuesPath}${id}`, query: {seerDrawer: true}}}>
-          <SeerIcon size="sm" />
-        </CommentsLink>
-      </Tooltip>
-    ) : null,
+    <IssueSeerBadge group={data as Group} key="issue-seer-badge" />,
     logger ? (
       <LoggerAnnotation>
         <GlobalSelectionLink

static/app/components/events/autofix/utils.tsx

@@ -183,3 +183,7 @@ export function getAutofixRunExists(group: Group) {
 
   return autofixRanWithinTtl;
 }
+
+export function isIssueQuickFixable(group: Group) {
+  return group.seerFixabilityScore && group.seerFixabilityScore > 0.72;
+}

static/app/components/group/issueSeerBadge.tsx

@@ -0,0 +1,69 @@
+import styled from '@emotion/styled';
+
+import {SeerIcon} from 'sentry/components/ai/SeerIcon';
+import {Tooltip} from 'sentry/components/core/tooltip';
+import {
+  getAutofixRunExists,
+  isIssueQuickFixable,
+} from 'sentry/components/events/autofix/utils';
+import Link from 'sentry/components/links/link';
+import {t} from 'sentry/locale';
+import {space} from 'sentry/styles/space';
+import type {Group} from 'sentry/types/group';
+import {useLocation} from 'sentry/utils/useLocation';
+import useOrganization from 'sentry/utils/useOrganization';
+
+interface IssueSeerBadgeProps {
+  group: Group;
+}
+
+function IssueSeerBadge({group}: IssueSeerBadgeProps) {
+  const organization = useOrganization();
+  const issuesPath = `/organizations/${organization.slug}/issues/`;
+  const location = useLocation();
+
+  const autofixRunExists = getAutofixRunExists(group);
+  const seerFixable = isIssueQuickFixable(group);
+  const showSeer =
+    organization.features.includes('gen-ai-features') &&
+    !organization.hideAiFeatures &&
+    (autofixRunExists || seerFixable);
+
+  let seerTitle = null;
+  if (autofixRunExists && seerFixable) {
+    seerTitle = t('Seer has a potential quick fix for this issue');
+  } else if (autofixRunExists) {
+    seerTitle = t('Seer has insight into this issue');
+  } else if (seerFixable) {
+    seerTitle = t('This issue might be quick to fix');
+  }
+
+  if (!showSeer) {
+    return null;
+  }
+
+  return (
+    <Tooltip title={seerTitle} skipWrapper>
+      <SeerLink
+        to={{
+          pathname: `${issuesPath}${group.id}/`,
+          query: {...location.query, seerDrawer: true},
+        }}
+      >
+        <SeerIcon size="sm" />
+        {seerFixable && <p>{t('Quick Fix')}</p>}
+      </SeerLink>
+    </Tooltip>
+  );
+}
+
+const SeerLink = styled(Link)`
+  display: inline-grid;
+  gap: ${space(0.5)};
+  align-items: center;
+  grid-auto-flow: column;
+  color: ${p => p.theme.textColor};
+  position: relative;
+`;
+
+export default IssueSeerBadge;

static/app/views/issueDetails/streamline/header/header.tsx

@@ -40,6 +40,7 @@ import {GroupHeaderAssigneeSelector} from 'sentry/views/issueDetails/streamline/
 import {AttachmentsBadge} from 'sentry/views/issueDetails/streamline/header/attachmentsBadge';
 import {IssueIdBreadcrumb} from 'sentry/views/issueDetails/streamline/header/issueIdBreadcrumb';
 import {ReplayBadge} from 'sentry/views/issueDetails/streamline/header/replayBadge';
+import SeerBadge from 'sentry/views/issueDetails/streamline/header/seerBadge';
 import {UserFeedbackBadge} from 'sentry/views/issueDetails/streamline/header/userFeedbackBadge';
 import {Tab, TabPaths} from 'sentry/views/issueDetails/types';
 import {useGroupDetailsRoute} from 'sentry/views/issueDetails/useGroupDetailsRoute';
@@ -193,6 +194,7 @@ export default function StreamlinedGroupHeader({
               <AttachmentsBadge group={group} />
               <UserFeedbackBadge group={group} project={project} />
               <ReplayBadge group={group} project={project} />
+              <SeerBadge group={group} />
             </ErrorBoundary>
           </Flex>
         </HeaderGrid>

static/app/views/issueDetails/streamline/header/seerBadge.tsx

@@ -0,0 +1,42 @@
+import styled from '@emotion/styled';
+
+import {SeerIcon} from 'sentry/components/ai/SeerIcon';
+import {Tooltip} from 'sentry/components/core/tooltip';
+import {isIssueQuickFixable} from 'sentry/components/events/autofix/utils';
+import {t} from 'sentry/locale';
+import {space} from 'sentry/styles/space';
+import type {Group} from 'sentry/types/group';
+import useOrganization from 'sentry/utils/useOrganization';
+import {Divider} from 'sentry/views/issueDetails/divider';
+
+function SeerBadge({group}: {group: Group}) {
+  const organization = useOrganization();
+  const seerFixable = isIssueQuickFixable(group);
+
+  if (
+    !organization.features.includes('gen-ai-features') ||
+    organization.hideAiFeatures ||
+    !seerFixable
+  ) {
+    return null;
+  }
+
+  return (
+    <Tooltip title={t('This issue might be quick to fix')} skipWrapper>
+      <Wrapper>
+        <Divider />
+        <SeerIcon size="sm" />
+        {seerFixable && <span>{t('Quick Fix')}</span>}
+      </Wrapper>
+    </Tooltip>
+  );
+}
+
+const Wrapper = styled('div')`
+  display: flex;
+  align-items: center;
+  gap: ${space(0.5)};
+  color: ${p => p.theme.subText};
+`;
+
+export default SeerBadge;