fix(web,mobile): bot approvals are visible on the PR summary (#25829)

Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>

Author: t3dotgg

apps/mobile/src/features/pull-requests/pullRequestActivityFilter.test.ts

@@ -57,4 +57,19 @@ describe("mobile activity filters", () => {
         .activity.reviewThreads,
     ).toEqual([]);
   });
+
+  it("keeps bot review verdicts when bot comments are hidden", () => {
+    const result = filterPullRequestActivity(
+      {
+        ...activity,
+        comments: [
+          comment("approved", bot, "APPROVED"),
+          comment("changes", bot, "CHANGES_REQUESTED"),
+          comment("commented", bot, "COMMENTED"),
+        ],
+      },
+      DEFAULT_ACTIVITY_FILTER,
+    );
+    expect(result.activity.comments.map((entry) => entry.id)).toEqual(["approved", "changes"]);
+  });
 });

apps/mobile/src/features/pull-requests/pullRequestActivityFilter.ts

@@ -18,6 +18,12 @@ function isBot(actor: PullRequestActor | null) {
   return actor?.isBot === true;
 }
 
+// A bot's approval or change request is a verdict, not chatter.
+function isVerdict(reviewState: string | null) {
+  const state = reviewState?.trim().toUpperCase().replaceAll("-", "_");
+  return state === "APPROVED" || state === "CHANGES_REQUESTED";
+}
+
 function eventCount(activity: PullRequestActivity) {
   const discussionIds = new Set(
     activity.reviewThreads.flatMap((thread) => thread.comments.map((comment) => comment.id)),
@@ -50,7 +56,7 @@ export function filterPullRequestActivity(activity: PullRequestActivity, filter:
       : activity.comments.filter(
           (comment) =>
             !allDiscussionIds.has(comment.id) &&
-            (filter.bots || !isBot(comment.author)) &&
+            (filter.bots || !isBot(comment.author) || isVerdict(comment.reviewState)) &&
             (filter.resolved || comment.reviewState?.trim().toLowerCase() !== "dismissed"),
         );
   const filtered = {

apps/web/src/components/pullRequest/PullRequestSummaryTab.tsx

@@ -49,6 +49,7 @@ import {
   PullRequestLabelChip,
   PullRequestReviewOutcomeBadge,
   pullRequestReviewOutcomeLabel,
+  PullRequestReviewOutcomeAvatarBadge,
   pullRequestReviewOutcomeRingClassName,
   pullRequestReviewOutcomeStaleLabel,
 } from "./pullRequestPresentation";
@@ -689,11 +690,17 @@ export function PullRequestSummaryTab({
                             variant="avatar"
                           />
                           {entry.outcome ? (
-                            <span className="sr-only">
-                              {entry.stale
-                                ? pullRequestReviewOutcomeStaleLabel(entry.outcome)
-                                : pullRequestReviewOutcomeLabel(entry.outcome)}
-                            </span>
+                            <>
+                              <PullRequestReviewOutcomeAvatarBadge
+                                outcome={entry.outcome}
+                                stale={entry.stale}
+                              />
+                              <span className="sr-only">
+                                {entry.stale
+                                  ? pullRequestReviewOutcomeStaleLabel(entry.outcome)
+                                  : pullRequestReviewOutcomeLabel(entry.outcome)}
+                              </span>
+                            </>
                           ) : null}
                         </TooltipTrigger>
                         <TooltipPopup side="bottom">

apps/web/src/components/pullRequest/pullRequestDetail.logic.test.ts

@@ -561,6 +561,28 @@ describe("review thread conversations", () => {
     );
   });
 
+  it("keeps bot review verdicts when bot comments are hidden", () => {
+    const review = (id: string, reviewState: string) => ({
+      ...comment(id, 9),
+      author: bot,
+      kind: "review" as const,
+      reviewState,
+    });
+    const items = pullRequestConversationItems(
+      [
+        review("approved", "APPROVED"),
+        review("changes", "CHANGES_REQUESTED"),
+        review("commented", "COMMENTED"),
+      ],
+      [],
+    );
+    expect(
+      filterPullRequestConversationItems(items, { bots: false, resolved: false }).map(
+        (item) => item.id,
+      ),
+    ).toEqual(["approved", "changes"]);
+  });
+
   it("distinguishes unloaded replies from complete threads, even when the host only supplies a cursor", () => {
     const timeline = (reviewThread: PullRequestReviewThread) =>
       buildPullRequestTimeline({

apps/web/src/components/pullRequest/pullRequestDetail.logic.ts

@@ -621,6 +621,11 @@ export function isPullRequestCommentFinished(
   );
 }
 
+function isPullRequestVerdict(reviewState: string | null): boolean {
+  const outcome = pullRequestReviewOutcome(reviewState);
+  return outcome === "approved" || outcome === "changes-requested";
+}
+
 export function filterPullRequestConversationItems(
   items: ReadonlyArray<PullRequestConversationItem>,
   filter: { readonly bots: boolean; readonly resolved: boolean },
@@ -629,7 +634,10 @@ export function filterPullRequestConversationItems(
     // Matching any member keeps the finding beside a human reply to a bot.
     pullRequestConversationItemComments(item).some(
       (comment) =>
-        (filter.bots || comment.author?.isBot !== true) &&
+        // A bot's approval or change request is a verdict, not chatter.
+        (filter.bots ||
+          comment.author?.isBot !== true ||
+          isPullRequestVerdict(comment.reviewState)) &&
         (filter.resolved ||
           !isPullRequestCommentFinished(comment, item.kind === "thread" ? item.thread : undefined)),
     ),

apps/web/src/components/pullRequest/pullRequestPresentation.tsx

@@ -279,6 +279,7 @@ const REVIEW_OUTCOME_PRESENTATION = {
     ringClassName: "ring-2 ring-emerald-500 dark:ring-emerald-400",
     staleRingClassName:
       "ring-2 ring-[color-mix(in_srgb,var(--color-emerald-500)_35%,var(--background))] dark:ring-[color-mix(in_srgb,var(--color-emerald-400)_35%,var(--background))]",
+    fillClassName: "fill-emerald-500 dark:fill-emerald-400",
     badgeVariant: "success",
   },
   "changes-requested": {
@@ -287,6 +288,7 @@ const REVIEW_OUTCOME_PRESENTATION = {
     toneClassName: "text-destructive",
     ringClassName: "ring-2 ring-destructive",
     staleRingClassName: "ring-2 ring-[color-mix(in_srgb,var(--destructive)_35%,var(--background))]",
+    fillClassName: "fill-destructive",
     badgeVariant: "error",
   },
   dismissed: {
@@ -296,6 +298,7 @@ const REVIEW_OUTCOME_PRESENTATION = {
     ringClassName: "ring-2 ring-muted-foreground/60",
     staleRingClassName:
       "ring-2 ring-[color-mix(in_srgb,var(--contrast-muted-foreground)_30%,var(--background))]",
+    fillClassName: "fill-muted-foreground",
     badgeVariant: "outline",
   },
 } as const satisfies Record<
@@ -306,6 +309,7 @@ const REVIEW_OUTCOME_PRESENTATION = {
     toneClassName: string;
     ringClassName: string;
     staleRingClassName: string;
+    fillClassName: string;
     badgeVariant: "success" | "error" | "outline";
   }
 >;
@@ -343,6 +347,28 @@ export function PullRequestReviewOutcomeIcon({
   );
 }
 
+// Ring color alone blends into colorful bot avatars; the glyph gives each verdict a shape.
+export function PullRequestReviewOutcomeAvatarBadge({
+  outcome,
+  stale = false,
+}: {
+  outcome: PullRequestReviewOutcome;
+  stale?: boolean;
+}) {
+  const presentation = REVIEW_OUTCOME_PRESENTATION[outcome];
+  return (
+    <presentation.Icon
+      aria-hidden
+      strokeWidth={3}
+      className={cn(
+        "absolute -right-1 -bottom-1 size-3 text-background",
+        presentation.fillClassName,
+        stale && "opacity-50",
+      )}
+    />
+  );
+}
+
 export function pullRequestReviewOutcomeLabel(outcome: PullRequestReviewOutcome): string {
   return REVIEW_OUTCOME_PRESENTATION[outcome].label;
 }