From 1c4b596b7953ba33d5e269b517b42c4c11839d74 Mon Sep 17 00:00:00 2001
From: Mahesh Sanikommu <maheshthedev@gmail.com>
Date: Sat, 20 Jun 2026 02:20:26 -0700
Subject: [PATCH] refactor(web): use posthog-js/react useFeatureFlagEnabled for
 flag gating

---
 apps/web/app/(app)/onboarding/page.tsx |  4 ++--
 apps/web/hooks/use-feature-flag.ts     | 14 --------------
 packages/lib/posthog.tsx               |  5 +++--
 3 files changed, 5 insertions(+), 18 deletions(-)
 delete mode 100644 apps/web/hooks/use-feature-flag.ts

diff --git a/apps/web/app/(app)/onboarding/page.tsx b/apps/web/app/(app)/onboarding/page.tsx
index cb24ab5b..bd814e8d 100644
--- a/apps/web/app/(app)/onboarding/page.tsx
+++ b/apps/web/app/(app)/onboarding/page.tsx
@@ -15,7 +15,7 @@ import {
 	type SourcesValues,
 } from "@/components/onboarding-brain/step-sources"
 import { StepIngest } from "@/components/onboarding-brain/step-ingest"
-import { useFeatureFlag } from "@/hooks/use-feature-flag"
+import { useFeatureFlagEnabled } from "posthog-js/react"
 import {
 	StepTeam,
 	type TeamValues,
@@ -66,7 +66,7 @@ export default function BrainOnboardingPage() {
 	)
 
 	// Team (Company Brain) onboarding is gated behind a private-beta flag.
-	const allowTeam = useFeatureFlag("company-brain-beta")
+	const allowTeam = useFeatureFlagEnabled("company-brain-beta") ?? false
 	const [mode, setMode] = useState<BrainMode>(detectedMode)
 	const [about, setAbout] = useState<AboutValues>({
 		name: user?.name ?? "",
diff --git a/apps/web/hooks/use-feature-flag.ts b/apps/web/hooks/use-feature-flag.ts
deleted file mode 100644
index 7ece41c3..00000000
--- a/apps/web/hooks/use-feature-flag.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import posthog from "posthog-js"
-import { useEffect, useState } from "react"
-
-// Reactive PostHog boolean flag via the global singleton (the app uses a custom
-// provider, so posthog-js/react hooks have no context). Unloaded/undefined = false.
-export function useFeatureFlag(key: string): boolean {
-	const [enabled, setEnabled] = useState(false)
-	useEffect(() => {
-		const sync = () => setEnabled(posthog.isFeatureEnabled?.(key) === true)
-		sync()
-		return posthog.onFeatureFlags(() => sync())
-	}, [key])
-	return enabled
-}
diff --git a/packages/lib/posthog.tsx b/packages/lib/posthog.tsx
index 540f2ab2..2d326976 100644
--- a/packages/lib/posthog.tsx
+++ b/packages/lib/posthog.tsx
@@ -2,6 +2,7 @@
 
 import { usePathname, useSearchParams } from "next/navigation"
 import posthog from "posthog-js"
+import { PostHogProvider as PHProvider } from "posthog-js/react"
 import { Suspense, useEffect } from "react"
 import { useSession } from "./auth"
 
@@ -65,12 +66,12 @@ export function PostHogProvider({ children }: { children: React.ReactNode }) {
 	}, [session?.user])
 
 	return (
-		<>
+		<PHProvider client={posthog}>
 			<Suspense fallback={null}>
 				{process.env.NODE_ENV === "production" && <PostHogPageTracking />}
 			</Suspense>
 			{children}
-		</>
+		</PHProvider>
 	)
 }