fix(inbox): show true tab counts and hide zero counts (#2714)

Author: andrewm4894

packages/api-client/src/posthog-client.ts

@@ -2737,6 +2737,12 @@ export class PostHogAPIClient {
     if (params?.priority) {
       url.searchParams.set("priority", params.priority);
     }
+    if (params?.has_implementation_pr != null) {
+      url.searchParams.set(
+        "has_implementation_pr",
+        String(params.has_implementation_pr),
+      );
+    }
 
     const response = await this.api.fetcher.fetch({
       method: "get",

packages/core/src/inbox/reportFiltering.ts

@@ -19,20 +19,6 @@ function normalizeReviewerId(value: string): string {
   return value.trim();
 }
 
-/**
- * Reports that are surfaced to the current user as needing review: ready,
- * immediately actionable, and addressed to them. Used for both the sidebar
- * red badge count and the inbox toolbar "up for review" byline so the two
- * numbers always agree.
- */
-export function isReportUpForReview(report: SignalReport): boolean {
-  return (
-    report.status === "ready" &&
-    report.is_suggested_reviewer === true &&
-    report.actionability === "immediately_actionable"
-  );
-}
-
 export function filterReportsBySearch(
   reports: SignalReport[],
   query: string,

packages/shared/src/domain-types.ts

@@ -505,6 +505,11 @@ export interface SignalReportsQueryParams {
   suggested_reviewers?: string;
   /** Comma-separated `P0`–`P4` priorities — only returns reports with one of these priorities. */
   priority?: string;
+  /**
+   * Filter by whether a shipped implementation pull request exists. `true` keeps only PR
+   * reports, `false` only non-PR reports. Pair with `limit: 1` to count PR reports cheaply.
+   */
+  has_implementation_pr?: boolean;
 }
 
 /** Values match `SignalReportTask.Relationship` on the PostHog API. */

packages/ui/src/features/home/components/HomeView.tsx

@@ -286,9 +286,11 @@ function Section({ title, count, icon, children }: SectionProps) {
       >
         {icon}
         <Text className="font-semibold text-[12px] text-gray-12">{title}</Text>
-        <Text className="rounded-full bg-(--gray-a3) px-1.5 py-px font-medium text-(--gray-11) text-[10.5px] tabular-nums">
-          {count}
-        </Text>
+        {count > 0 && (
+          <Text className="rounded-full bg-(--gray-a3) px-1.5 py-px font-medium text-(--gray-11) text-[10.5px] tabular-nums">
+            {count}
+          </Text>
+        )}
       </Flex>
       {children}
     </Box>

packages/ui/src/features/inbox/components/InboxReportListTab.tsx

@@ -73,6 +73,12 @@ interface InboxReportListTabProps {
     reports: SignalReport[];
     children: ReactNode;
   }>;
+  /**
+   * Fetch a server-filtered PR-only list instead of the broad pipeline list, so
+   * the tab body comes from the same source as the Pull-requests count (a PR
+   * past the broad list's first page would otherwise not render).
+   */
+  pullRequestsOnly?: boolean;
 }
 
 /**
@@ -89,8 +95,11 @@ export function InboxReportListTab({
   searchPlaceholder,
   emptyState,
   CardListWrapper,
+  pullRequestsOnly = false,
 }: InboxReportListTabProps) {
-  const { scopedReports, allReports, isLoading } = useInboxAllReports();
+  const { scopedReports, allReports, isLoading } = useInboxAllReports({
+    pullRequestsOnly,
+  });
   const scope = useInboxReviewerScopeStore((s) => s.scope);
   const [dismissReport, setDismissReport] = useState<SignalReport | null>(null);
 

packages/ui/src/features/inbox/components/InboxTabBar.tsx

@@ -49,15 +49,17 @@ export function InboxTabBar({ counts }: InboxTabBarProps) {
                 <span className="font-medium text-[13px]">
                   {INBOX_TAB_LABEL[key]}
                 </span>
-                <span
-                  className={
-                    isActive
-                      ? "text-[12px] text-gray-11 tabular-nums"
-                      : "text-[12px] text-gray-10 tabular-nums"
-                  }
-                >
-                  {counts[key]}
-                </span>
+                {counts[key] > 0 && (
+                  <span
+                    className={
+                      isActive
+                        ? "text-[12px] text-gray-11 tabular-nums"
+                        : "text-[12px] text-gray-10 tabular-nums"
+                    }
+                  >
+                    {counts[key]}
+                  </span>
+                )}
               </TabsTrigger>
             );
           })}

packages/ui/src/features/inbox/components/PullRequestsTab.tsx

@@ -14,6 +14,7 @@ export function PullRequestsTab() {
   return (
     <InboxReportListTab
       predicate={isPullRequestReport}
+      pullRequestsOnly
       Card={PullRequestCard}
       CardListWrapper={PullRequestsBatchProvider}
       searchPlaceholder="Search pull requests…"

packages/ui/src/features/inbox/components/RunsTab.tsx

@@ -187,7 +187,11 @@ function RunsSection({
           <Text className="font-semibold text-[13px] text-gray-12">
             {title}
           </Text>
-          <Text className="text-[12px] text-gray-10 tabular-nums">{count}</Text>
+          {count > 0 && (
+            <Text className="text-[12px] text-gray-10 tabular-nums">
+              {count}
+            </Text>
+          )}
           {isLive && count > 0 && (
             <span
               className="inline-flex h-1.5 w-1.5 animate-pulse rounded-full bg-(--blue-9)"

packages/ui/src/features/inbox/hooks/useInboxAllReports.ts

@@ -9,12 +9,18 @@ import {
 import {
   computeInboxTabCounts,
   INBOX_SCOPE_FOR_YOU,
+  isExcludedFromInbox,
+  isPullRequestReport,
+  isReportTabReport,
   matchesReviewerScope,
   parseTeammateInboxScope,
 } from "@posthog/core/inbox/reportMembership";
 import { useOptionalAuthenticatedClient } from "@posthog/ui/features/auth/authClient";
 import { useCurrentUser } from "@posthog/ui/features/auth/useCurrentUser";
-import { useInboxReportsInfinite } from "@posthog/ui/features/inbox/hooks/useInboxReports";
+import {
+  useInboxReports,
+  useInboxReportsInfinite,
+} from "@posthog/ui/features/inbox/hooks/useInboxReports";
 import { useInboxReviewerScopeStore } from "@posthog/ui/features/inbox/stores/inboxReviewerScopeStore";
 import { useInboxSignalsFilterStore } from "@posthog/ui/features/inbox/stores/inboxSignalsFilterStore";
 import { useMemo } from "react";
@@ -36,9 +42,15 @@ const EMPTY_FILTER_ARRAY: never[] = [];
 export function useInboxAllReports(options?: {
   ignoreScope?: boolean;
   ignoreFilters?: boolean;
+  pullRequestsOnly?: boolean;
 }) {
   const ignoreScope = options?.ignoreScope ?? false;
   const ignoreFilters = options?.ignoreFilters ?? false;
+  // The Pull requests tab fetches a server-filtered list (reports that have a
+  // shipped PR) so its list body comes from the same source as its count — a PR
+  // sitting past the broad list's first page no longer renders an empty tab
+  // under a positive badge.
+  const pullRequestsOnly = options?.pullRequestsOnly ?? false;
   const scope = useInboxReviewerScopeStore((s) => s.scope);
   const searchQuery = useInboxSignalsFilterStore((s) =>
     ignoreFilters ? "" : s.searchQuery,
@@ -69,6 +81,7 @@ export function useInboxAllReports(options?: {
   const query = useInboxReportsInfinite(
     {
       status: INBOX_PIPELINE_STATUS_FILTER,
+      has_implementation_pr: pullRequestsOnly ? true : undefined,
       ordering: buildSignalReportListOrdering(sortField, sortDirection),
       source_product:
         sourceProductFilter.length > 0
@@ -90,6 +103,36 @@ export function useInboxAllReports(options?: {
     },
   );
 
+  // True count of pull-request reports for the active scope. The infinite list
+  // only holds the first page(s), so deriving pulls from loaded reports caps at
+  // the page size and depends on ordering (a PR can sit past page 1). A cheap
+  // `limit: 1` count query with the server-side `has_implementation_pr` filter
+  // returns the real total regardless of page size.
+  const pullRequestCountQuery = useInboxReports(
+    {
+      status: INBOX_PIPELINE_STATUS_FILTER,
+      has_implementation_pr: true,
+      // Mirror the list query's active filters so the badge matches the tab
+      // body. These are empty when `ignoreFilters` is set (sidebar usage), so
+      // the count stays scope-only there.
+      source_product:
+        sourceProductFilter.length > 0
+          ? sourceProductFilter.join(",")
+          : undefined,
+      priority: buildPriorityFilterParam(priorityFilter),
+      suggested_reviewers: reviewerUuid
+        ? buildSuggestedReviewerFilterParam([reviewerUuid])
+        : undefined,
+      limit: 1,
+    },
+    {
+      enabled: !isForYou || reviewerUuid != null,
+      refetchInterval: INBOX_REFETCH_INTERVAL_MS,
+      refetchIntervalInBackground: false,
+    },
+  );
+  const pullRequestTotal = pullRequestCountQuery.data?.count ?? 0;
+
   const scopedReports = useMemo(() => {
     const byScope = ignoreScope
       ? query.allReports
@@ -99,10 +142,33 @@ export function useInboxAllReports(options?: {
       : byScope;
   }, [query.allReports, scope, searchQuery, ignoreScope]);
 
-  const counts = useMemo(
-    () => computeInboxTabCounts(query.allReports, scope),
-    [query.allReports, scope],
-  );
+  const counts = useMemo(() => {
+    const loaded = computeInboxTabCounts(query.allReports, scope);
+    // The list is an infinite query that only holds the pages loaded so far
+    // (100 per page), so the loaded-derived Reports count caps at the page size
+    // and reads as a misleading "100". Reports is the dominant bucket, so derive
+    // its true size from the backend total `count` (unaffected by the page cap)
+    // minus the non-report items the total also includes. PRs use the true
+    // `pullRequestTotal` (also a real backend count), so PRs sitting past the
+    // loaded page don't inflate Reports. Runs/failed without a PR stay
+    // loaded-derived — small, newest-first, and an accepted approximation.
+    const loadedOtherNonReport = query.allReports.filter(
+      (r) =>
+        matchesReviewerScope(r, scope) &&
+        !isExcludedFromInbox(r) &&
+        !isReportTabReport(r) &&
+        !isPullRequestReport(r),
+    ).length;
+    return {
+      ...loaded,
+      // True backend counts, unaffected by the list's page-size cap.
+      pulls: pullRequestTotal,
+      reports: Math.max(
+        0,
+        query.totalCount - pullRequestTotal - loadedOtherNonReport,
+      ),
+    };
+  }, [query.allReports, query.totalCount, scope, pullRequestTotal]);
 
   return {
     ...query,

packages/ui/src/features/inbox/hooks/useReportOpenTracker.ts

@@ -50,12 +50,20 @@ export function useReportOpenTracker(
   report: SignalReport,
   tab: InboxDetailTab,
 ): void {
-  // The Pull requests / Reports tabs render the scoped+filtered list; the Runs
-  // tab is project-wide. Mount only the query matching the originating tab so
-  // rank is relative to the rows the user actually saw (and so a non-run detail
-  // doesn't start the unused project-wide poll alongside the scoped one).
+  // Mount only the query matching the originating tab so rank is relative to the
+  // rows the user actually saw (and so a non-run detail doesn't start the unused
+  // project-wide poll alongside the scoped one):
+  //   - Runs tab is project-wide (ignoreScope/ignoreFilters).
+  //   - Pull requests tab renders the server-filtered PR-only list, so mirror
+  //     that here — otherwise a PR past the broad list's first page would get
+  //     rank -1 and a list_size from the broad list, not the rows shown.
+  //   - Reports tab renders the scoped+filtered broad list.
   const { scopedReports } = useInboxAllReports(
-    tab === "runs" ? { ignoreScope: true, ignoreFilters: true } : undefined,
+    tab === "runs"
+      ? { ignoreScope: true, ignoreFilters: true }
+      : tab === "pulls"
+        ? { pullRequestsOnly: true }
+        : undefined,
   );
   const visible = inboxDetailTabReports(tab, scopedReports);