From 1f09984ddc4e466e833f5e7f7b3214d66a939c9a Mon Sep 17 00:00:00 2001
From: PostHog Code <code@posthog.com>
Date: Thu, 30 Apr 2026 18:02:00 +0000
Subject: [PATCH] feat(inbox): gate Inbox preview behind
 inbox-gated-due-to-scale flag

Show a teaser pane to large customers (gated via PostHog feature flag) while
self-driving Inbox rolls out. The teaser invites the user to register
interest, capturing an event that PostHog can use to track demand per org.

Generated-By: PostHog Code
Task-Id: 0aec9747-6100-4e9c-8948-e57a8babf58e
---
 .../inbox/components/InboxEmptyStates.tsx     | 78 ++++++++++++++++++-
 .../features/inbox/components/InboxView.tsx   |  7 +-
 apps/code/src/shared/constants.ts             |  1 +
 apps/code/src/shared/types/analytics.ts       |  6 ++
 4 files changed, 90 insertions(+), 2 deletions(-)

diff --git a/apps/code/src/renderer/features/inbox/components/InboxEmptyStates.tsx b/apps/code/src/renderer/features/inbox/components/InboxEmptyStates.tsx
index 5ca79a0eb..66d1d572f 100644
--- a/apps/code/src/renderer/features/inbox/components/InboxEmptyStates.tsx
+++ b/apps/code/src/renderer/features/inbox/components/InboxEmptyStates.tsx
@@ -1,10 +1,14 @@
 import { AnimatedEllipsis } from "@features/inbox/components/utils/AnimatedEllipsis";
 import { SOURCE_PRODUCT_META } from "@features/inbox/components/utils/source-product-icons";
-import { ArrowDownIcon } from "@phosphor-icons/react";
+import { ArrowDownIcon, CheckCircleIcon } from "@phosphor-icons/react";
 import { Box, Button, Flex, Text, Tooltip } from "@radix-ui/themes";
+import builderHog from "@renderer/assets/images/hedgehogs/builder-hog-03.png";
 import explorerHog from "@renderer/assets/images/hedgehogs/explorer-hog.png";
 import graphsHog from "@renderer/assets/images/hedgehogs/graphs-hog.png";
 import mailHog from "@renderer/assets/images/mail-hog.png";
+import { ANALYTICS_EVENTS } from "@shared/types/analytics";
+import { track } from "@utils/analytics";
+import { useState } from "react";
 
 // ── Full-width empty states ─────────────────────────────────────────────────
 
@@ -130,6 +134,78 @@ export function WarmingUpPane({
   );
 }
 
+export function GatedDueToScalePane() {
+  const [registered, setRegistered] = useState(false);
+
+  const handleRegisterInterest = () => {
+    track(ANALYTICS_EVENTS.INBOX_INTEREST_REGISTERED);
+    setRegistered(true);
+  };
+
+  return (
+    <Flex
+      direction="column"
+      align="center"
+      justify="center"
+      height="100%"
+      px="5"
+    >
+      <Flex direction="column" align="center" className="max-w-[420px]">
+        <img src={builderHog} alt="" className="mb-[16px] w-[120px]" />
+
+        <Text
+          align="center"
+          className="font-bold text-(--gray-12) text-lg leading-6.5"
+        >
+          We're rolling out self-driving gradually
+          <AnimatedEllipsis />
+        </Text>
+
+        <Flex
+          direction="column"
+          align="center"
+          gap="3"
+          mt="3"
+          className="max-w-[340px]"
+        >
+          <Text
+            align="center"
+            className="text-(--gray-11) text-[13px] leading-[1.35]"
+          >
+            Inbox watches your sessions, issues, and evals around the clock, and
+            surfaces ready-to-run fixes.
+            <br />
+            <Text className="font-medium text-(--gray-12)">
+              We're scaling it up carefully so every report stays high-signal.
+            </Text>
+          </Text>
+        </Flex>
+
+        {registered ? (
+          <Flex align="center" gap="2" className="mt-[20px]">
+            <CheckCircleIcon
+              size={16}
+              weight="fill"
+              className="text-(--grass-9)"
+            />
+            <Text className="text-(--gray-11) text-[13px]">
+              Got it — we'll let you know.
+            </Text>
+          </Flex>
+        ) : (
+          <Button
+            size="2"
+            onClick={handleRegisterInterest}
+            className="mt-[20px]"
+          >
+            Let me know when self-driving is available for my organization
+          </Button>
+        )}
+      </Flex>
+    </Flex>
+  );
+}
+
 export function SelectReportPane() {
   return (
     <Flex
diff --git a/apps/code/src/renderer/features/inbox/components/InboxView.tsx b/apps/code/src/renderer/features/inbox/components/InboxView.tsx
index ecae766e5..8d9b25067 100644
--- a/apps/code/src/renderer/features/inbox/components/InboxView.tsx
+++ b/apps/code/src/renderer/features/inbox/components/InboxView.tsx
@@ -1,10 +1,15 @@
+import { useFeatureFlag } from "@hooks/useFeatureFlag";
 import { useSetHeaderContent } from "@hooks/useSetHeaderContent";
 import { EnvelopeSimpleIcon } from "@phosphor-icons/react";
 import { Flex, Text } from "@radix-ui/themes";
+import { INBOX_GATED_DUE_TO_SCALE_FLAG } from "@shared/constants";
 import { useMemo } from "react";
+import { GatedDueToScalePane } from "./InboxEmptyStates";
 import { InboxSignalsTab } from "./InboxSignalsTab";
 
 export function InboxView() {
+  const isGatedDueToScale = useFeatureFlag(INBOX_GATED_DUE_TO_SCALE_FLAG);
+
   const headerContent = useMemo(
     () => (
       <Flex align="center" gap="2" className="w-full min-w-0">
@@ -24,7 +29,7 @@ export function InboxView() {
 
   return (
     <div className="h-full">
-      <InboxSignalsTab />
+      {isGatedDueToScale ? <GatedDueToScalePane /> : <InboxSignalsTab />}
     </div>
   );
 }
diff --git a/apps/code/src/shared/constants.ts b/apps/code/src/shared/constants.ts
index 999b88f44..2c2a27339 100644
--- a/apps/code/src/shared/constants.ts
+++ b/apps/code/src/shared/constants.ts
@@ -1,4 +1,5 @@
 export const BILLING_FLAG = "posthog-code-billing";
+export const INBOX_GATED_DUE_TO_SCALE_FLAG = "inbox-gated-due-to-scale";
 export const BRANCH_PREFIX = "posthog-code/";
 export const DATA_DIR = ".posthog-code";
 export const WORKTREES_DIR = ".posthog-code/worktrees";
diff --git a/apps/code/src/shared/types/analytics.ts b/apps/code/src/shared/types/analytics.ts
index 03740d8f8..c098f87ae 100644
--- a/apps/code/src/shared/types/analytics.ts
+++ b/apps/code/src/shared/types/analytics.ts
@@ -319,6 +319,9 @@ export const ANALYTICS_EVENTS = {
   // Error events
   TASK_CREATION_FAILED: "Task creation failed",
   AGENT_SESSION_ERROR: "Agent session error",
+
+  // Inbox events
+  INBOX_INTEREST_REGISTERED: "Inbox interest registered",
 } as const;
 
 // Event property mapping
@@ -383,4 +386,7 @@ export type EventPropertyMap = {
   // Error events
   [ANALYTICS_EVENTS.TASK_CREATION_FAILED]: TaskCreationFailedProperties;
   [ANALYTICS_EVENTS.AGENT_SESSION_ERROR]: AgentSessionErrorProperties;
+
+  // Inbox events
+  [ANALYTICS_EVENTS.INBOX_INTEREST_REGISTERED]: never;
 };