PostHog · Twixes · Jun 9, 2026 · Jun 11, 2026 · Jun 11, 2026
diff --git a/.github/workflows/react-doctor.yml b/.github/workflows/react-doctor.yml
@@ -43,6 +43,8 @@ jobs:
           NO_COLOR: "1"
           REACT_DOCTOR_BASE_SHA: ${{ github.event.pull_request.base.sha }}
           HEAD_SHA: ${{ github.event.pull_request.head.sha }}
+          # Bypass `min-release-age` from .npmrc for this CI-only pinned utility.
+          NPM_CONFIG_MIN_RELEASE_AGE: "0"
         run: |
           # -e omitted: exit codes are captured and inspected explicitly.
           set -uo pipefail
@@ -59,7 +61,7 @@ jobs:
           fi
           REPORT="${RUNNER_TEMP}/react-doctor-report.json"
           status=0
-          npx --yes react-doctor@0.4.2 . --blocking error --changed-files-from "$CHANGED" --json --json-compact --no-telemetry > "$REPORT" || status=$?
+          npx --yes react-doctor@0.5.1 . --blocking error --changed-files-from "$CHANGED" --json --json-compact --no-telemetry > "$REPORT" || status=$?
           echo "exit-code=$status" >> "$GITHUB_OUTPUT"
           echo "report=$REPORT" >> "$GITHUB_OUTPUT"
           if [ "$status" -ne 0 ]; then

diff --git a/packages/ui/src/assets/services/posthog-slack-app.png b/packages/ui/src/assets/services/posthog-slack-app.png
diff --git a/packages/ui/src/features/agents/components/AgentsView.tsx b/packages/ui/src/features/agents/components/AgentsView.tsx
@@ -1,5 +1,6 @@
 import { RobotIcon } from "@phosphor-icons/react";
 import { ConfigureAgentsSection } from "@posthog/ui/features/inbox/components/ConfigureAgentsSection";
+import { InboxOnboardingCallout } from "@posthog/ui/features/inbox/components/onboarding/InboxOnboardingCallout";
 import { useSetHeaderContent } from "@posthog/ui/hooks/useSetHeaderContent";
 import { Flex, Text } from "@radix-ui/themes";
 import { useMemo } from "react";
@@ -27,7 +28,7 @@ export function AgentsView() {
       <Flex
         direction="column"
         gap="0.5"
-        className="cursor-default select-none border-(--gray-5) border-b px-6 pt-5 pb-5"
+        className="cursor-default select-none border-gray-5 border-b px-6 pt-5 pb-5"
       >
         <Text className="font-bold text-[22px] text-gray-12 leading-tight tracking-tight">
           Agents
@@ -38,6 +39,7 @@ export function AgentsView() {
         </Text>
       </Flex>
 
+      <InboxOnboardingCallout />
       <div className="min-h-0 flex-1 overflow-auto">
         <div className="mx-auto max-w-4xl px-6 py-6">
           <ConfigureAgentsSection />

diff --git a/packages/ui/src/features/inbox/components/ConfigureAgentsSection.tsx b/packages/ui/src/features/inbox/components/ConfigureAgentsSection.tsx
@@ -91,7 +91,7 @@ export function ConfigureAgentsSection() {
     userAutonomyConfig?.autostart_priority ?? NEVER_AUTOSTART_VALUE;
 
   return (
-    <Flex direction="column" gap="8">
+    <Flex direction="column" gap="4">
       {showSetupTask ? <SetupTaskSection /> : null}
 
       <Subsection
@@ -418,7 +418,7 @@ function Subsection({ title, description, children }: SubsectionProps) {
     <Flex
       direction="column"
       gap="4"
-      className="border-(--gray-5) border-t pt-8 first:border-t-0 first:pt-0"
+      className="border-(--gray-5) border-t pt-4 first:border-t-0 first:pt-0"
     >
       <Flex direction="column" gap="1">
         <Flex align="center" gap="2" wrap="wrap">

diff --git a/packages/ui/src/features/inbox/components/InboxView.tsx b/packages/ui/src/features/inbox/components/InboxView.tsx
@@ -1,11 +1,19 @@
 import { EnvelopeSimpleIcon } from "@phosphor-icons/react";
 import { isInboxDetailPath } from "@posthog/core/inbox/reportMembership";
 import { InboxPageHeader } from "@posthog/ui/features/inbox/components/InboxPageHeader";
+import {
+  InboxOnboardingHeader,
+  InboxOnboardingPane,
+} from "@posthog/ui/features/inbox/components/onboarding/InboxOnboardingPane";
+import {
+  useInboxOnboardingSessionStore,
+  useInboxOnboardingState,
+} from "@posthog/ui/features/inbox/components/onboarding/useInboxOnboardingState";
 import { useInboxAllReports } from "@posthog/ui/features/inbox/hooks/useInboxAllReports";
 import { useSetHeaderContent } from "@posthog/ui/hooks/useSetHeaderContent";
 import { Flex, Text } from "@radix-ui/themes";
 import { Outlet, useRouterState } from "@tanstack/react-router";
-import { useMemo } from "react";
+import { useEffect, useMemo } from "react";
 
 /**
  * Inbox shell. Owns the in-page header (title + RFC subtitle + tab bar) and
@@ -33,12 +41,35 @@ export function InboxView() {
   const { counts } = useInboxAllReports();
   const pathname = useRouterState({ select: (s) => s.location.pathname });
   const isDetailView = isInboxDetailPath(pathname);
+  const onboarding = useInboxOnboardingState();
+  const active = useInboxOnboardingSessionStore((s) => s.active);
+  const finished = useInboxOnboardingSessionStore((s) => s.finished);
+  const setActive = useInboxOnboardingSessionStore((s) => s.setActive);
+
+  // Latch onboarding visibility once per session from `isComplete`. After that
+  // the user only leaves by finishing the Activate step, so completing the last
+  // step doesn't unmount the pane mid-flow.
+  useEffect(() => {
+    if (!onboarding.isLoading && active === null) {
+      setActive(!onboarding.isComplete);
+    }
+  }, [onboarding.isLoading, onboarding.isComplete, active, setActive]);
+
+  const showOnboarding =
+    !isDetailView &&
+    !onboarding.isLoading &&
+    !finished &&
+    (active === true || !onboarding.isComplete);
 
   return (
     <Flex direction="column" className="h-full min-h-0">
-      {!isDetailView && <InboxPageHeader counts={counts} />}
+      {showOnboarding ? (
+        <InboxOnboardingHeader />
+      ) : (
+        !isDetailView && <InboxPageHeader counts={counts} />
+      )}
       <div className="min-h-0 flex-1 overflow-auto">
-        <Outlet />
+        {showOnboarding ? <InboxOnboardingPane /> : <Outlet />}
       </div>
     </Flex>
   );

diff --git a/packages/ui/src/features/inbox/components/PullRequestCard.tsx b/packages/ui/src/features/inbox/components/PullRequestCard.tsx
@@ -1,23 +1,16 @@
-import { ThumbsDownIcon } from "@phosphor-icons/react";
 import { extractRepoSelectionRepository } from "@posthog/core/inbox/artefacts";
 import {
   deriveHeadline,
   displayConventionalCommitTitle,
   parseConventionalCommitTitle,
   parsePrUrl,
 } from "@posthog/core/inbox/reportPresentation";
-import { Button, cn } from "@posthog/quill";
 import type { SignalReport } from "@posthog/shared/types";
-import { ConventionalCommitScopeTag } from "@posthog/ui/features/inbox/components/ConventionalCommitScopeTag";
-import { InboxCardSourceMeta } from "@posthog/ui/features/inbox/components/InboxCardSourceMeta";
-import { InboxCardTitle } from "@posthog/ui/features/inbox/components/InboxCardTitle";
 import { PrDiffStats } from "@posthog/ui/features/inbox/components/PrDiffStats";
-import { PriorityMonogram } from "@posthog/ui/features/inbox/components/PriorityMonogram";
+import { PullRequestCardView } from "@posthog/ui/features/inbox/components/PullRequestCardView";
 import { SuggestedReviewerAvatarStack } from "@posthog/ui/features/inbox/components/SuggestedReviewerAvatarStack";
 import { useInboxReportDetailPrefetch } from "@posthog/ui/features/inbox/hooks/useInboxReportDetailPrefetch";
 import { useInboxReportArtefacts } from "@posthog/ui/features/inbox/hooks/useInboxReports";
-import { Button as UiButton } from "@posthog/ui/primitives/Button";
-import { Flex, Text } from "@radix-ui/themes";
 import { Link, useNavigate } from "@tanstack/react-router";
 import type { MouseEvent } from "react";
 
@@ -64,105 +57,50 @@ export function PullRequestCard({
   );
 
   return (
-    <div
-      className={cn(
-        "group flex w-full items-start gap-3 rounded-(--radius-2) border border-border bg-(--color-panel-solid) px-4 py-3.5 transition duration-150 hover:border-(--gray-6) hover:bg-(--gray-2) hover:shadow-sm",
-        isSelected &&
-          "border-(--accent-8) bg-(--accent-2) ring-(--accent-8) ring-2 ring-inset",
+    <PullRequestCardView
+      priority={report.priority}
+      conventionalTitle={conventionalTitle}
+      title={cardTitle}
+      headline={deriveHeadline(report.summary)}
+      repoSlug={repoSlug}
+      sourceProducts={report.source_products}
+      isSelected={isSelected}
+      pointerHandlers={pointerHandlers}
+      diffSlot={
+        report.implementation_pr_url ? (
+          <PrDiffStats prUrl={report.implementation_pr_url} hideWhileLoading />
+        ) : null
+      }
+      reviewersSlot={
+        <SuggestedReviewerAvatarStack
+          reportId={report.id}
+          artefacts={artefactsResp ?? null}
+        />
+      }
+      onReview={() => {
+        prefetch();
+        navigate(detailRoute);
+      }}
+      onDismiss={onDismiss}
+      dismissDisabledReason={dismissDisabledReason}
+      isDismissPending={isDismissPending}
+      renderSummary={(summary, className) => (
+        <Link
+          {...detailRoute}
+          preload="intent"
+          onClick={(event) => {
+            onRowClick?.(event);
+            if (event.metaKey || event.ctrlKey || event.shiftKey) {
+              event.preventDefault();
+              return;
+            }
+            prefetch();
+          }}
+          className={className}
+        >
+          {summary}
+        </Link>
       )}
-      {...pointerHandlers}
-    >
-      <Link
-        {...detailRoute}
-        preload="intent"
-        onClick={(event) => {
-          onRowClick?.(event);
-          if (event.metaKey || event.ctrlKey || event.shiftKey) {
-            event.preventDefault();
-            return;
-          }
-          prefetch();
-        }}
-        className="flex min-w-0 flex-1 items-start gap-3 text-left text-inherit no-underline focus-visible:outline-none"
-      >
-        <PriorityMonogram priority={report.priority} />
-
-        <Flex direction="column" gap="1.5" className="min-w-0 flex-1">
-          <Flex align="center" gap="1" wrap="wrap" className="min-w-0">
-            {conventionalTitle && (
-              <ConventionalCommitScopeTag
-                type={conventionalTitle.type}
-                scope={conventionalTitle.scope}
-                compact
-              />
-            )}
-            <InboxCardTitle>{cardTitle}</InboxCardTitle>
-          </Flex>
-
-          {(() => {
-            const headline = deriveHeadline(report.summary);
-            return headline ? (
-              <Text className="wrap-break-word mt-0.5 line-clamp-2 text-[12.5px] text-gray-10 leading-snug">
-                {headline}
-              </Text>
-            ) : null;
-          })()}
-
-          <InboxCardSourceMeta
-            repoSlug={repoSlug}
-            sourceProducts={report.source_products}
-          />
-        </Flex>
-      </Link>
-
-      <Flex
-        align="center"
-        className="gap-3.5 self-stretch border-border border-l pl-3"
-      >
-        <Flex align="center" gap="2" className="shrink-0">
-          {report.implementation_pr_url && (
-            <PrDiffStats
-              prUrl={report.implementation_pr_url}
-              hideWhileLoading
-            />
-          )}
-          <SuggestedReviewerAvatarStack
-            reportId={report.id}
-            artefacts={artefactsResp ?? null}
-          />
-        </Flex>
-        <Flex align="center" className="shrink-0 gap-2.5">
-          <UiButton
-            type="button"
-            variant="soft"
-            color="gray"
-            size="1"
-            aria-label="Dismiss this report"
-            tooltipContent="Dismiss this report"
-            disabled={dismissDisabledReason !== null || isDismissPending}
-            disabledReason={dismissDisabledReason}
-            loading={isDismissPending}
-            onClick={(event) => {
-              event.stopPropagation();
-              onDismiss();
-            }}
-          >
-            <ThumbsDownIcon size={14} />
-          </UiButton>
-          <Button
-            type="button"
-            variant="primary"
-            size="sm"
-            onClick={(event) => {
-              event.stopPropagation();
-              prefetch();
-              navigate(detailRoute);
-            }}
-          >
-            Review
-          </Button>
-        </Flex>
-      </Flex>
-    </div>
+    />
   );
 }