From 7e42218ab9a89f84e7d3084eda1def591bd6ba26 Mon Sep 17 00:00:00 2001
From: Satya Patel <satyapatel111@gmail.com>
Date: Fri, 12 Dec 2025 22:03:19 -0500
Subject: [PATCH 1/2] feat: add PostHog analytics to web and marketing apps
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add posthog-js to web and marketing apps
- Create instrumentation-client.ts for both apps with auto pageview/pageleave tracking
- Add PostHogUserIdentifier component for web app (syncs Clerk user to PostHog)
- Add CookieConsent component for marketing app (GDPR opt-out by default)
- Configure Next.js rewrites for /ingest proxy (bypasses ad blockers)
- Add ANALYTICS_CONSENT_KEY to shared constants for cross-app persistence
- Add NEXT_PUBLIC_POSTHOG_KEY and NEXT_PUBLIC_POSTHOG_HOST env vars

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .env.example                                  |  4 +
 apps/marketing/next.config.ts                 | 10 +++
 apps/marketing/package.json                   |  1 +
 apps/marketing/src/app/layout.tsx             |  3 +
 .../CookieConsent/CookieConsent.tsx           | 73 +++++++++++++++++++
 .../src/components/CookieConsent/index.ts     |  1 +
 apps/marketing/src/env.ts                     |  7 ++
 apps/marketing/src/instrumentation-client.ts  | 29 ++++++++
 apps/web/next.config.ts                       | 10 +++
 apps/web/package.json                         |  1 +
 apps/web/src/app/layout.tsx                   |  2 +
 .../PostHogUserIdentifier.tsx                 | 24 ++++++
 .../components/PostHogUserIdentifier/index.ts |  1 +
 apps/web/src/env.ts                           |  7 ++
 apps/web/src/instrumentation-client.ts        | 22 ++++++
 bun.lock                                      | 14 ++++
 packages/shared/src/constants.ts              |  3 +
 17 files changed, 212 insertions(+)
 create mode 100644 apps/marketing/src/components/CookieConsent/CookieConsent.tsx
 create mode 100644 apps/marketing/src/components/CookieConsent/index.ts
 create mode 100644 apps/marketing/src/instrumentation-client.ts
 create mode 100644 apps/web/src/components/PostHogUserIdentifier/PostHogUserIdentifier.tsx
 create mode 100644 apps/web/src/components/PostHogUserIdentifier/index.ts
 create mode 100644 apps/web/src/instrumentation-client.ts

diff --git a/.env.example b/.env.example
index 83145f284ae..d3743ec49cf 100644
--- a/.env.example
+++ b/.env.example
@@ -27,3 +27,7 @@ BLOB_READ_WRITE_TOKEN=your_blob_token_here
 # Desktop App
 VITE_DEV_SERVER_PORT=4927
 DESKTOP_AUTH_SECRET=your_desktop_auth_secret_here_min_32_chars
+
+# PostHog Analytics
+NEXT_PUBLIC_POSTHOG_KEY=your_posthog_project_api_key_here
+NEXT_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com
diff --git a/apps/marketing/next.config.ts b/apps/marketing/next.config.ts
index c9b9e812a6c..52f81bc9d9a 100644
--- a/apps/marketing/next.config.ts
+++ b/apps/marketing/next.config.ts
@@ -11,6 +11,16 @@ const config: NextConfig = {
 	reactStrictMode: true,
 	reactCompiler: true,
 	typescript: { ignoreBuildErrors: true },
+	rewrites: async () => [
+		{
+			source: "/ingest/static/:path*",
+			destination: "https://us-assets.i.posthog.com/static/:path*",
+		},
+		{
+			source: "/ingest/:path*",
+			destination: "https://us.i.posthog.com/:path*",
+		},
+	],
 };
 
 export default config;
diff --git a/apps/marketing/package.json b/apps/marketing/package.json
index 6c0656c0c35..f3371da3f55 100644
--- a/apps/marketing/package.json
+++ b/apps/marketing/package.json
@@ -22,6 +22,7 @@
 		"lucide-react": "^0.560.0",
 		"next": "^16.0.10",
 		"next-themes": "^0.4.6",
+		"posthog-js": "^1.306.1",
 		"react": "^19.2.3",
 		"react-dom": "^19.2.3",
 		"react-fast-marquee": "^1.6.5",
diff --git a/apps/marketing/src/app/layout.tsx b/apps/marketing/src/app/layout.tsx
index e6c95fbc026..921225dc1fe 100644
--- a/apps/marketing/src/app/layout.tsx
+++ b/apps/marketing/src/app/layout.tsx
@@ -7,6 +7,8 @@ import { ThemeProvider } from "next-themes";
 
 import { env } from "@/env";
 
+import { CookieConsent } from "@/components/CookieConsent";
+
 import { CTAButtons } from "./components/CTAButtons";
 import { Footer } from "./components/Footer";
 import { Header } from "./components/Header";
@@ -59,6 +61,7 @@ export default function RootLayout({
 						<Header ctaButtons={<CTAButtons />} />
 						{children}
 						<Footer />
+						<CookieConsent />
 					</ThemeProvider>
 				</body>
 			</html>
diff --git a/apps/marketing/src/components/CookieConsent/CookieConsent.tsx b/apps/marketing/src/components/CookieConsent/CookieConsent.tsx
new file mode 100644
index 00000000000..528674e7f28
--- /dev/null
+++ b/apps/marketing/src/components/CookieConsent/CookieConsent.tsx
@@ -0,0 +1,73 @@
+"use client";
+
+import { ANALYTICS_CONSENT_KEY } from "@superset/shared/constants";
+import { AnimatePresence, motion } from "framer-motion";
+import posthog from "posthog-js";
+import { useEffect, useState } from "react";
+
+export function CookieConsent() {
+	const [showBanner, setShowBanner] = useState(false);
+
+	useEffect(() => {
+		const consent = localStorage.getItem(ANALYTICS_CONSENT_KEY);
+		if (consent === null) {
+			setShowBanner(true);
+		}
+	}, []);
+
+	const handleAccept = () => {
+		localStorage.setItem(ANALYTICS_CONSENT_KEY, "accepted");
+		posthog.opt_in_capturing();
+		setShowBanner(false);
+	};
+
+	const handleDecline = () => {
+		localStorage.setItem(ANALYTICS_CONSENT_KEY, "declined");
+		setShowBanner(false);
+	};
+
+	return (
+		<AnimatePresence>
+			{showBanner && (
+				<div className="pointer-events-none fixed inset-x-0 bottom-0 z-50 flex justify-center p-4 sm:p-6">
+					<motion.div
+						initial={{ y: 100, opacity: 0 }}
+						animate={{ y: 0, opacity: 1 }}
+						exit={{ y: 100, opacity: 0 }}
+						transition={{ type: "spring", damping: 25, stiffness: 300 }}
+						className="pointer-events-auto w-full max-w-7xl"
+					>
+						<div className="relative rounded-2xl border border-border bg-background p-4 shadow-xl sm:p-6">
+							<div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+								<div className="pr-8 sm:pr-0">
+									<p className="text-sm text-muted-foreground">
+										We use cookies to analyze site usage and improve your
+										experience. If you're not okay with this, declining will
+										ensure you aren't tracked other than for essential site
+										functionality (i.e. logging in).
+									</p>
+								</div>
+								<div className="flex flex-col gap-2 sm:flex-row sm:gap-3">
+									<button
+										type="button"
+										onClick={handleDecline}
+										className="rounded-lg border border-border bg-background px-4 py-2 text-sm font-medium text-foreground transition-colors hover:bg-accent"
+									>
+										Decline
+									</button>
+									<button
+										type="button"
+										onClick={handleAccept}
+										className="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
+									>
+										Accept
+									</button>
+								</div>
+							</div>
+						</div>
+					</motion.div>
+				</div>
+			)}
+		</AnimatePresence>
+	);
+}
diff --git a/apps/marketing/src/components/CookieConsent/index.ts b/apps/marketing/src/components/CookieConsent/index.ts
new file mode 100644
index 00000000000..b63e94bca78
--- /dev/null
+++ b/apps/marketing/src/components/CookieConsent/index.ts
@@ -0,0 +1 @@
+export { CookieConsent } from "./CookieConsent";
diff --git a/apps/marketing/src/env.ts b/apps/marketing/src/env.ts
index 01e0458ce21..72f1f903b8d 100644
--- a/apps/marketing/src/env.ts
+++ b/apps/marketing/src/env.ts
@@ -17,6 +17,11 @@ export const env = createEnv({
 		NEXT_PUBLIC_WEB_URL: z.string().url(),
 		NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: z.string(),
 		NEXT_PUBLIC_COOKIE_DOMAIN: z.string(),
+		NEXT_PUBLIC_POSTHOG_KEY: z.string(),
+		NEXT_PUBLIC_POSTHOG_HOST: z
+			.string()
+			.url()
+			.default("https://us.i.posthog.com"),
 	},
 	experimental__runtimeEnv: {
 		NODE_ENV: process.env.NODE_ENV,
@@ -25,6 +30,8 @@ export const env = createEnv({
 		NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY:
 			process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY,
 		NEXT_PUBLIC_COOKIE_DOMAIN: process.env.NEXT_PUBLIC_COOKIE_DOMAIN,
+		NEXT_PUBLIC_POSTHOG_KEY: process.env.NEXT_PUBLIC_POSTHOG_KEY,
+		NEXT_PUBLIC_POSTHOG_HOST: process.env.NEXT_PUBLIC_POSTHOG_HOST,
 	},
 	skipValidation: !!process.env.SKIP_ENV_VALIDATION,
 });
diff --git a/apps/marketing/src/instrumentation-client.ts b/apps/marketing/src/instrumentation-client.ts
new file mode 100644
index 00000000000..71445024ec5
--- /dev/null
+++ b/apps/marketing/src/instrumentation-client.ts
@@ -0,0 +1,29 @@
+import { ANALYTICS_CONSENT_KEY } from "@superset/shared/constants";
+import posthog from "posthog-js";
+
+import { env } from "@/env";
+
+posthog.init(env.NEXT_PUBLIC_POSTHOG_KEY, {
+	api_host: "/ingest",
+	ui_host: "https://us.posthog.com",
+	defaults: "2025-11-30",
+	capture_pageview: "history_change",
+	capture_pageleave: true,
+	capture_exceptions: true,
+	debug: env.NODE_ENV === "development",
+	cross_subdomain_cookie: true,
+	persistence: "cookie",
+	persistence_name: env.NEXT_PUBLIC_COOKIE_DOMAIN,
+	opt_out_capturing_by_default: true,
+	loaded: (posthog) => {
+		posthog.register({
+			app_name: "marketing",
+			domain: window.location.hostname,
+		});
+
+		const consent = localStorage.getItem(ANALYTICS_CONSENT_KEY);
+		if (consent === "accepted") {
+			posthog.opt_in_capturing();
+		}
+	},
+});
diff --git a/apps/web/next.config.ts b/apps/web/next.config.ts
index db7abcb7fef..d8297109d31 100644
--- a/apps/web/next.config.ts
+++ b/apps/web/next.config.ts
@@ -10,6 +10,16 @@ if (process.env.NODE_ENV !== "production") {
 const config: NextConfig = {
 	reactCompiler: true,
 	typescript: { ignoreBuildErrors: true },
+	rewrites: async () => [
+		{
+			source: "/ingest/static/:path*",
+			destination: "https://us-assets.i.posthog.com/static/:path*",
+		},
+		{
+			source: "/ingest/:path*",
+			destination: "https://us.i.posthog.com/:path*",
+		},
+	],
 };
 
 export default config;
diff --git a/apps/web/package.json b/apps/web/package.json
index 11aa42e7e97..d0e788ce013 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -28,6 +28,7 @@
 		"lucide-react": "^0.560.0",
 		"next": "^16.0.10",
 		"next-themes": "^0.4.6",
+		"posthog-js": "^1.306.1",
 		"react": "^19.2.3",
 		"react-dom": "^19.2.3",
 		"react-icons": "^5.5.0",
diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx
index 4bbd4d7ecbd..2ee40fb78ff 100644
--- a/apps/web/src/app/layout.tsx
+++ b/apps/web/src/app/layout.tsx
@@ -4,6 +4,7 @@ import { cn } from "@superset/ui/utils";
 import type { Metadata, Viewport } from "next";
 import { IBM_Plex_Mono, Inter } from "next/font/google";
 
+import { PostHogUserIdentifier } from "@/components/PostHogUserIdentifier";
 import { env } from "@/env";
 
 import "./globals.css";
@@ -57,6 +58,7 @@ export default function RootLayout({
 					)}
 				>
 					<Providers>
+						<PostHogUserIdentifier />
 						{children}
 						<Toaster />
 					</Providers>
diff --git a/apps/web/src/components/PostHogUserIdentifier/PostHogUserIdentifier.tsx b/apps/web/src/components/PostHogUserIdentifier/PostHogUserIdentifier.tsx
new file mode 100644
index 00000000000..a54afc7f881
--- /dev/null
+++ b/apps/web/src/components/PostHogUserIdentifier/PostHogUserIdentifier.tsx
@@ -0,0 +1,24 @@
+"use client";
+
+import { useAuth, useUser } from "@clerk/nextjs";
+import posthog from "posthog-js";
+import { useEffect } from "react";
+
+export function PostHogUserIdentifier() {
+	const { userId } = useAuth();
+	const { user } = useUser();
+
+	useEffect(() => {
+		if (user) {
+			posthog.identify(user.id, {
+				email: user.primaryEmailAddress?.emailAddress,
+				name: user.fullName,
+				user_id: user.id,
+			});
+		} else if (!userId) {
+			posthog.reset();
+		}
+	}, [user, userId]);
+
+	return null;
+}
diff --git a/apps/web/src/components/PostHogUserIdentifier/index.ts b/apps/web/src/components/PostHogUserIdentifier/index.ts
new file mode 100644
index 00000000000..9c592fde4de
--- /dev/null
+++ b/apps/web/src/components/PostHogUserIdentifier/index.ts
@@ -0,0 +1 @@
+export { PostHogUserIdentifier } from "./PostHogUserIdentifier";
diff --git a/apps/web/src/env.ts b/apps/web/src/env.ts
index e621bfb19b2..30c62b28d94 100644
--- a/apps/web/src/env.ts
+++ b/apps/web/src/env.ts
@@ -23,6 +23,11 @@ export const env = createEnv({
 		NEXT_PUBLIC_DOCS_URL: z.string().url(),
 		NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: z.string(),
 		NEXT_PUBLIC_COOKIE_DOMAIN: z.string(),
+		NEXT_PUBLIC_POSTHOG_KEY: z.string(),
+		NEXT_PUBLIC_POSTHOG_HOST: z
+			.string()
+			.url()
+			.default("https://us.i.posthog.com"),
 	},
 
 	experimental__runtimeEnv: {
@@ -33,6 +38,8 @@ export const env = createEnv({
 		NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY:
 			process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY,
 		NEXT_PUBLIC_COOKIE_DOMAIN: process.env.NEXT_PUBLIC_COOKIE_DOMAIN,
+		NEXT_PUBLIC_POSTHOG_KEY: process.env.NEXT_PUBLIC_POSTHOG_KEY,
+		NEXT_PUBLIC_POSTHOG_HOST: process.env.NEXT_PUBLIC_POSTHOG_HOST,
 	},
 
 	skipValidation: !!process.env.SKIP_ENV_VALIDATION,
diff --git a/apps/web/src/instrumentation-client.ts b/apps/web/src/instrumentation-client.ts
new file mode 100644
index 00000000000..4cd63f41f25
--- /dev/null
+++ b/apps/web/src/instrumentation-client.ts
@@ -0,0 +1,22 @@
+import posthog from "posthog-js";
+
+import { env } from "@/env";
+
+posthog.init(env.NEXT_PUBLIC_POSTHOG_KEY, {
+	api_host: "/ingest",
+	ui_host: "https://us.posthog.com",
+	defaults: "2025-11-30",
+	capture_pageview: "history_change",
+	capture_pageleave: true,
+	capture_exceptions: true,
+	debug: env.NODE_ENV === "development",
+	cross_subdomain_cookie: true,
+	persistence: "cookie",
+	persistence_name: env.NEXT_PUBLIC_COOKIE_DOMAIN,
+	loaded: (posthog) => {
+		posthog.register({
+			app_name: "web",
+			domain: window.location.hostname,
+		});
+	},
+});
diff --git a/bun.lock b/bun.lock
index 20f35dbd9f0..d3be483b8c1 100644
--- a/bun.lock
+++ b/bun.lock
@@ -252,6 +252,7 @@
         "lucide-react": "^0.560.0",
         "next": "^16.0.10",
         "next-themes": "^0.4.6",
+        "posthog-js": "^1.306.1",
         "react": "^19.2.3",
         "react-dom": "^19.2.3",
         "react-fast-marquee": "^1.6.5",
@@ -294,6 +295,7 @@
         "lucide-react": "^0.560.0",
         "next": "^16.0.10",
         "next-themes": "^0.4.6",
+        "posthog-js": "^1.306.1",
         "react": "^19.2.3",
         "react-dom": "^19.2.3",
         "react-icons": "^5.5.0",
@@ -833,6 +835,8 @@
 
     "@pkgjs/parseargs": ["@pkgjs/parseargs@0.11.0", "", {}, "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg=="],
 
+    "@posthog/core": ["@posthog/core@1.7.1", "", { "dependencies": { "cross-spawn": "^7.0.6" } }, "sha512-kjK0eFMIpKo9GXIbts8VtAknsoZ18oZorANdtuTj1CbgS28t4ZVq//HAWhnxEuXRTrtkd+SUJ6Ux3j2Af8NCuA=="],
+
     "@radix-ui/number": ["@radix-ui/number@1.1.1", "", {}, "sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g=="],
 
     "@radix-ui/primitive": ["@radix-ui/primitive@1.1.3", "", {}, "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg=="],
@@ -1577,6 +1581,8 @@
 
     "copy-anything": ["copy-anything@4.0.5", "", { "dependencies": { "is-what": "^5.2.0" } }, "sha512-7Vv6asjS4gMOuILabD3l739tsaxFQmC+a7pLZm02zyvs8p977bL3zEgq3yDk5rn9B0PbYgIv++jmHcuUab4RhA=="],
 
+    "core-js": ["core-js@3.47.0", "", {}, "sha512-c3Q2VVkGAUyupsjRnaNX6u8Dq2vAdzm9iuPj5FW0fRxzlxgq9Q39MDq10IvmQSpLgHQNyQzQmOo6bgGHmH3NNg=="],
+
     "core-util-is": ["core-util-is@1.0.2", "", {}, "sha512-3lqz5YjWTYnW6dlDa5TLaTCcShfar1e40rmcJVwCBJC6mWlFuj0eCHIElmG1g5kyuJ/GD+8Wn4FFCcz4gJPfaQ=="],
 
     "cose-base": ["cose-base@1.0.3", "", { "dependencies": { "layout-base": "^1.0.0" } }, "sha512-s9whTXInMSgAp/NVXVNuVxVKzGH2qck3aQlVHxDCdAEPgtMKwc4Wq6/QKhgdEdgbLSi9rBTAcPoRa6JpiG4ksg=="],
@@ -2585,10 +2591,14 @@
 
     "postgres-interval": ["postgres-interval@1.2.0", "", { "dependencies": { "xtend": "^4.0.0" } }, "sha512-9ZhXKM/rw350N1ovuWHbGxnGh/SNJ4cnxHiM0rxE4VN41wsg8P8zWn9hv/buK00RP4WvlOyr/RBDiptyxVbkZQ=="],
 
+    "posthog-js": ["posthog-js@1.306.1", "", { "dependencies": { "@posthog/core": "1.7.1", "core-js": "^3.38.1", "fflate": "^0.4.8", "preact": "^10.19.3", "web-vitals": "^4.2.4" } }, "sha512-wO7bliv/5tlAlfoKCUzwkGXZVNexk0dHigMf9tNp0q1rzs62wThogREY7Tz7h/iWKYiuXy1RumtVlTmHuBXa1w=="],
+
     "postject": ["postject@1.0.0-alpha.6", "", { "dependencies": { "commander": "^9.4.0" }, "bin": { "postject": "dist/cli.js" } }, "sha512-b9Eb8h2eVqNE8edvKdwqkrY6O7kAwmI8kcnBv1NScolYJbo59XUF0noFq+lxbC1yN20bmC0WBEbDC5H/7ASb0A=="],
 
     "potpack": ["potpack@1.0.2", "", {}, "sha512-choctRBIV9EMT9WGAZHn3V7t0Z2pMQyl0EZE6pFc/6ml3ssw7Dlf/oAOvFwjm1HVsqfQN8GfeFyJ+d8tRzqueQ=="],
 
+    "preact": ["preact@10.28.0", "", {}, "sha512-rytDAoiXr3+t6OIP3WGlDd0ouCUG1iCWzkcY3++Nreuoi17y6T5i/zRhe6uYfoVcxq6YU+sBtJouuRDsq8vvqA=="],
+
     "pretty-ms": ["pretty-ms@9.3.0", "", { "dependencies": { "parse-ms": "^4.0.0" } }, "sha512-gjVS5hOP+M3wMm5nmNOucbIrqudzs9v/57bWRHQWLYklXqoXKrVfYW2W9+glfGsqtPgpiz5WwyEEB+ksXIx3gQ=="],
 
     "prismjs": ["prismjs@1.30.0", "", {}, "sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw=="],
@@ -3173,6 +3183,8 @@
 
     "web-namespaces": ["web-namespaces@2.0.1", "", {}, "sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ=="],
 
+    "web-vitals": ["web-vitals@4.2.4", "", {}, "sha512-r4DIlprAGwJ7YM11VZp4R884m0Vmgr6EAKe3P+kO0PPj3Unqyvv59rczf6UiGcb9Z8QxZVcqKNwv/g0WNdWwsw=="],
+
     "webgl-constants": ["webgl-constants@1.1.1", "", {}, "sha512-LkBXKjU5r9vAW7Gcu3T5u+5cvSvh5WwINdr0C+9jpzVB41cjQAP5ePArDtk/WHYdVj0GefCgM73BA7FlIiNtdg=="],
 
     "webgl-sdf-generator": ["webgl-sdf-generator@1.1.1", "", {}, "sha512-9Z0JcMTFxeE+b2x1LJTdnaT8rT8aEp7MVxkNwoycNmJWwPdzoXzMh0BjJSh/AEFP+KPYZUli814h8bJZFIZ2jA=="],
@@ -3495,6 +3507,8 @@
 
     "postcss/nanoid": ["nanoid@3.3.11", "", { "bin": { "nanoid": "bin/nanoid.cjs" } }, "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w=="],
 
+    "posthog-js/fflate": ["fflate@0.4.8", "", {}, "sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA=="],
+
     "postject/commander": ["commander@9.5.0", "", {}, "sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ=="],
 
     "promise-retry/retry": ["retry@0.12.0", "", {}, "sha512-9LkiTwjUh6rT555DtE9rTX+BKByPfrMzEAtnlEtdEwr3Nkffwiihqe2bWADg+OQRjt9gl6ICdmB/ZFDCGAtSow=="],
diff --git a/packages/shared/src/constants.ts b/packages/shared/src/constants.ts
index d7137c92094..74598e811b1 100644
--- a/packages/shared/src/constants.ts
+++ b/packages/shared/src/constants.ts
@@ -19,6 +19,9 @@ export const COMPANY = {
 // Theme
 export const THEME_STORAGE_KEY = "superset-theme";
 
+// Analytics
+export const ANALYTICS_CONSENT_KEY = "superset-analytics-consent";
+
 // Download URLs
 export const DOWNLOAD_URL_MAC_ARM64 = `${COMPANY.GITHUB_URL}/releases/latest/download/Superset-arm64.dmg`;
 

From b3748b4543a00c2ca67a4407af3c28f8d92e7d45 Mon Sep 17 00:00:00 2001
From: Satya Patel <satyapatel111@gmail.com>
Date: Sat, 13 Dec 2025 15:13:49 -0500
Subject: [PATCH 2/2] WIP

---
 .env.example                                  |   6 +-
 .github/workflows/deploy-preview.yml          |  11 +-
 .github/workflows/deploy-production.yml       |  11 +-
 .../ActivationFunnel/ActivationFunnel.tsx     | 120 +++++++
 .../components/ActivationFunnel/index.ts      |   1 +
 .../components/StatsCard/StatsCard.tsx        |  77 +++++
 .../(dashboard)/components/StatsCard/index.ts |   1 +
 .../UserEventsTable/UserEventsTable.tsx       | 161 ++++++++++
 .../components/UserEventsTable/index.ts       |   1 +
 .../(dashboard)/events/[personId]/page.tsx    | 220 +++++++++++++
 .../admin/src/app/(dashboard)/events/page.tsx | 222 +++++++++++++
 apps/admin/src/app/(dashboard)/page.tsx       | 144 ++++++++-
 bun.lock                                      |   3 +
 packages/trpc/package.json                    |   1 +
 packages/trpc/src/env.ts                      |   6 +-
 packages/trpc/src/lib/posthog.ts              | 214 +++++++++++++
 packages/trpc/src/root.ts                     |   2 +
 packages/trpc/src/router/analytics.ts         | 297 ++++++++++++++++++
 18 files changed, 1491 insertions(+), 7 deletions(-)
 create mode 100644 apps/admin/src/app/(dashboard)/components/ActivationFunnel/ActivationFunnel.tsx
 create mode 100644 apps/admin/src/app/(dashboard)/components/ActivationFunnel/index.ts
 create mode 100644 apps/admin/src/app/(dashboard)/components/StatsCard/StatsCard.tsx
 create mode 100644 apps/admin/src/app/(dashboard)/components/StatsCard/index.ts
 create mode 100644 apps/admin/src/app/(dashboard)/components/UserEventsTable/UserEventsTable.tsx
 create mode 100644 apps/admin/src/app/(dashboard)/components/UserEventsTable/index.ts
 create mode 100644 apps/admin/src/app/(dashboard)/events/[personId]/page.tsx
 create mode 100644 apps/admin/src/app/(dashboard)/events/page.tsx
 create mode 100644 packages/trpc/src/lib/posthog.ts
 create mode 100644 packages/trpc/src/router/analytics.ts

diff --git a/.env.example b/.env.example
index d3743ec49cf..dc963da4644 100644
--- a/.env.example
+++ b/.env.example
@@ -28,6 +28,10 @@ BLOB_READ_WRITE_TOKEN=your_blob_token_here
 VITE_DEV_SERVER_PORT=4927
 DESKTOP_AUTH_SECRET=your_desktop_auth_secret_here_min_32_chars
 
-# PostHog Analytics
+# PostHog Analytics (Client-side tracking)
 NEXT_PUBLIC_POSTHOG_KEY=your_posthog_project_api_key_here
 NEXT_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com
+
+# PostHog Analytics (Server-side API for admin dashboard)
+POSTHOG_API_KEY=your_posthog_personal_api_key_here
+POSTHOG_PROJECT_ID=your_posthog_project_id_here
diff --git a/.github/workflows/deploy-preview.yml b/.github/workflows/deploy-preview.yml
index bbd5ad8d046..0dbf951dc75 100644
--- a/.github/workflows/deploy-preview.yml
+++ b/.github/workflows/deploy-preview.yml
@@ -125,6 +125,8 @@ jobs:
           CLERK_WEBHOOK_SECRET: ${{ secrets.CLERK_WEBHOOK_SECRET }}
           NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: ${{ secrets.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY }}
           DESKTOP_AUTH_SECRET: ${{ secrets.DESKTOP_AUTH_SECRET }}
+          POSTHOG_API_KEY: ${{ secrets.POSTHOG_API_KEY }}
+          POSTHOG_PROJECT_ID: ${{ secrets.POSTHOG_PROJECT_ID }}
         run: |
           vercel pull --yes --environment=preview --token=$VERCEL_TOKEN
           vercel build --token=$VERCEL_TOKEN
@@ -137,7 +139,9 @@ jobs:
             --env NEXT_PUBLIC_WEB_URL=$NEXT_PUBLIC_WEB_URL \
             --env NEXT_PUBLIC_ADMIN_URL=$NEXT_PUBLIC_ADMIN_URL \
             --env NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=$NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY \
-            --env DESKTOP_AUTH_SECRET=$DESKTOP_AUTH_SECRET)
+            --env DESKTOP_AUTH_SECRET=$DESKTOP_AUTH_SECRET \
+            --env POSTHOG_API_KEY=$POSTHOG_API_KEY \
+            --env POSTHOG_PROJECT_ID=$POSTHOG_PROJECT_ID)
           vercel alias $VERCEL_URL ${{ env.API_ALIAS }} --scope=$VERCEL_ORG_ID --token=$VERCEL_TOKEN
           echo "vercel_url=$VERCEL_URL" >> $GITHUB_OUTPUT
 
@@ -208,6 +212,7 @@ jobs:
           NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: ${{ secrets.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY }}
           NEXT_PUBLIC_COOKIE_DOMAIN: ${{ secrets.NEXT_PUBLIC_COOKIE_DOMAIN }}
           DESKTOP_AUTH_SECRET: ${{ secrets.DESKTOP_AUTH_SECRET }}
+          NEXT_PUBLIC_POSTHOG_KEY: ${{ secrets.NEXT_PUBLIC_POSTHOG_KEY }}
         run: |
           vercel pull --yes --environment=preview --token=$VERCEL_TOKEN
           vercel build --token=$VERCEL_TOKEN
@@ -215,7 +220,8 @@ jobs:
             --env CLERK_SECRET_KEY=$CLERK_SECRET_KEY \
             --env DATABASE_URL=$DATABASE_URL \
             --env DATABASE_URL_UNPOOLED=$DATABASE_URL_UNPOOLED \
-            --env DESKTOP_AUTH_SECRET=$DESKTOP_AUTH_SECRET)
+            --env DESKTOP_AUTH_SECRET=$DESKTOP_AUTH_SECRET \
+            --env NEXT_PUBLIC_POSTHOG_KEY=$NEXT_PUBLIC_POSTHOG_KEY)
           vercel alias $VERCEL_URL ${{ env.WEB_ALIAS }} --scope=$VERCEL_ORG_ID --token=$VERCEL_TOKEN
           echo "vercel_url=$VERCEL_URL" >> $GITHUB_OUTPUT
 
@@ -270,6 +276,7 @@ jobs:
           CLERK_SECRET_KEY: ${{ secrets.CLERK_SECRET_KEY }}
           NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: ${{ secrets.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY }}
           NEXT_PUBLIC_COOKIE_DOMAIN: ${{ secrets.NEXT_PUBLIC_COOKIE_DOMAIN }}
+          NEXT_PUBLIC_POSTHOG_KEY: ${{ secrets.NEXT_PUBLIC_POSTHOG_KEY }}
         run: |
           vercel pull --yes --environment=preview --token=$VERCEL_TOKEN
           vercel build --token=$VERCEL_TOKEN
diff --git a/.github/workflows/deploy-production.yml b/.github/workflows/deploy-production.yml
index a4245f61626..6e7c1774feb 100644
--- a/.github/workflows/deploy-production.yml
+++ b/.github/workflows/deploy-production.yml
@@ -77,6 +77,8 @@ jobs:
           BLOB_READ_WRITE_TOKEN: ${{ secrets.BLOB_READ_WRITE_TOKEN }}
           NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: ${{ secrets.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY }}
           DESKTOP_AUTH_SECRET: ${{ secrets.DESKTOP_AUTH_SECRET }}
+          POSTHOG_API_KEY: ${{ secrets.POSTHOG_API_KEY }}
+          POSTHOG_PROJECT_ID: ${{ secrets.POSTHOG_PROJECT_ID }}
         run: |
           vercel pull --yes --environment=production --token=$VERCEL_TOKEN
           vercel build --prod --token=$VERCEL_TOKEN
@@ -89,7 +91,9 @@ jobs:
             --env NEXT_PUBLIC_WEB_URL=$NEXT_PUBLIC_WEB_URL \
             --env NEXT_PUBLIC_ADMIN_URL=$NEXT_PUBLIC_ADMIN_URL \
             --env NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=$NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY \
-            --env DESKTOP_AUTH_SECRET=$DESKTOP_AUTH_SECRET
+            --env DESKTOP_AUTH_SECRET=$DESKTOP_AUTH_SECRET \
+            --env POSTHOG_API_KEY=$POSTHOG_API_KEY \
+            --env POSTHOG_PROJECT_ID=$POSTHOG_PROJECT_ID
 
   deploy-web:
     name: Deploy Web to Vercel
@@ -132,6 +136,7 @@ jobs:
           NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: ${{ secrets.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY }}
           NEXT_PUBLIC_COOKIE_DOMAIN: ${{ secrets.NEXT_PUBLIC_COOKIE_DOMAIN }}
           DESKTOP_AUTH_SECRET: ${{ secrets.DESKTOP_AUTH_SECRET }}
+          NEXT_PUBLIC_POSTHOG_KEY: ${{ secrets.NEXT_PUBLIC_POSTHOG_KEY }}
         run: |
           vercel pull --yes --environment=production --token=$VERCEL_TOKEN
           vercel build --prod --token=$VERCEL_TOKEN
@@ -139,7 +144,8 @@ jobs:
             --env CLERK_SECRET_KEY=$CLERK_SECRET_KEY \
             --env DATABASE_URL=$DATABASE_URL \
             --env DATABASE_URL_UNPOOLED=$DATABASE_URL_UNPOOLED \
-            --env DESKTOP_AUTH_SECRET=$DESKTOP_AUTH_SECRET
+            --env DESKTOP_AUTH_SECRET=$DESKTOP_AUTH_SECRET \
+            --env NEXT_PUBLIC_POSTHOG_KEY=$NEXT_PUBLIC_POSTHOG_KEY
 
   deploy-marketing:
     name: Deploy Marketing to Vercel
@@ -178,6 +184,7 @@ jobs:
           CLERK_SECRET_KEY: ${{ secrets.CLERK_SECRET_KEY }}
           NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: ${{ secrets.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY }}
           NEXT_PUBLIC_COOKIE_DOMAIN: ${{ secrets.NEXT_PUBLIC_COOKIE_DOMAIN }}
+          NEXT_PUBLIC_POSTHOG_KEY: ${{ secrets.NEXT_PUBLIC_POSTHOG_KEY }}
         run: |
           vercel pull --yes --environment=production --token=$VERCEL_TOKEN
           vercel build --prod --token=$VERCEL_TOKEN
diff --git a/apps/admin/src/app/(dashboard)/components/ActivationFunnel/ActivationFunnel.tsx b/apps/admin/src/app/(dashboard)/components/ActivationFunnel/ActivationFunnel.tsx
new file mode 100644
index 00000000000..f13cfb4aefc
--- /dev/null
+++ b/apps/admin/src/app/(dashboard)/components/ActivationFunnel/ActivationFunnel.tsx
@@ -0,0 +1,120 @@
+"use client";
+
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@superset/ui/card";
+import { cn } from "@superset/ui/utils";
+import { LuArrowRight, LuLoaderCircle } from "react-icons/lu";
+
+interface FunnelStep {
+	name: string;
+	count: number;
+	conversionRate?: number;
+}
+
+interface ActivationFunnelProps {
+	steps: FunnelStep[];
+	isLoading?: boolean;
+	error?: string;
+}
+
+export function ActivationFunnel({
+	steps,
+	isLoading,
+	error,
+}: ActivationFunnelProps) {
+	if (isLoading) {
+		return (
+			<Card>
+				<CardHeader>
+					<CardTitle>Activation Funnel</CardTitle>
+					<CardDescription>
+						Signup → Download → First Task → Completed
+					</CardDescription>
+				</CardHeader>
+				<CardContent className="flex items-center justify-center py-12">
+					<LuLoaderCircle className="text-muted-foreground h-8 w-8 animate-spin" />
+				</CardContent>
+			</Card>
+		);
+	}
+
+	if (error) {
+		return (
+			<Card>
+				<CardHeader>
+					<CardTitle>Activation Funnel</CardTitle>
+				</CardHeader>
+				<CardContent className="text-muted-foreground py-12 text-center">
+					<p>Failed to load funnel data</p>
+					<p className="text-sm">{error}</p>
+				</CardContent>
+			</Card>
+		);
+	}
+
+	const maxCount = Math.max(...steps.map((s) => s.count), 1);
+
+	return (
+		<Card>
+			<CardHeader>
+				<CardTitle>Activation Funnel</CardTitle>
+				<CardDescription>
+					Track users through signup to first completed task
+				</CardDescription>
+			</CardHeader>
+			<CardContent>
+				<div className="flex items-end justify-between gap-2">
+					{steps.map((step, index) => (
+						<div key={step.name} className="flex flex-1 items-center gap-2">
+							<div className="flex flex-1 flex-col items-center">
+								<div
+									className="bg-primary/20 mb-2 w-full rounded-t-md transition-all"
+									style={{
+										height: `${Math.max((step.count / maxCount) * 120, 20)}px`,
+									}}
+								>
+									<div
+										className="bg-primary h-full w-full rounded-t-md"
+										style={{
+											opacity: 1 - index * 0.15,
+										}}
+									/>
+								</div>
+								<div className="text-center">
+									<div className="text-2xl font-bold">
+										{step.count.toLocaleString()}
+									</div>
+									<div className="text-muted-foreground text-xs">
+										{step.name}
+									</div>
+									{step.conversionRate !== undefined && index > 0 && (
+										<div
+											className={cn(
+												"mt-1 text-xs font-medium",
+												step.conversionRate >= 50
+													? "text-green-600"
+													: step.conversionRate >= 25
+														? "text-yellow-600"
+														: "text-red-600",
+											)}
+										>
+											{step.conversionRate.toFixed(0)}%
+										</div>
+									)}
+								</div>
+							</div>
+							{index < steps.length - 1 && (
+								<LuArrowRight className="text-muted-foreground h-4 w-4 shrink-0" />
+							)}
+						</div>
+					))}
+				</div>
+			</CardContent>
+		</Card>
+	);
+}
diff --git a/apps/admin/src/app/(dashboard)/components/ActivationFunnel/index.ts b/apps/admin/src/app/(dashboard)/components/ActivationFunnel/index.ts
new file mode 100644
index 00000000000..31176a0609d
--- /dev/null
+++ b/apps/admin/src/app/(dashboard)/components/ActivationFunnel/index.ts
@@ -0,0 +1 @@
+export { ActivationFunnel } from "./ActivationFunnel";
diff --git a/apps/admin/src/app/(dashboard)/components/StatsCard/StatsCard.tsx b/apps/admin/src/app/(dashboard)/components/StatsCard/StatsCard.tsx
new file mode 100644
index 00000000000..484515b4681
--- /dev/null
+++ b/apps/admin/src/app/(dashboard)/components/StatsCard/StatsCard.tsx
@@ -0,0 +1,77 @@
+"use client";
+
+import { Card, CardContent, CardHeader, CardTitle } from "@superset/ui/card";
+import { cn } from "@superset/ui/utils";
+import { LuArrowDown, LuArrowUp, LuMinus } from "react-icons/lu";
+
+interface StatsCardProps {
+	title: string;
+	value: number | string;
+	description?: string;
+	trend?: {
+		value: number;
+		label: string;
+	};
+	isLoading?: boolean;
+}
+
+export function StatsCard({
+	title,
+	value,
+	description,
+	trend,
+	isLoading,
+}: StatsCardProps) {
+	const trendDirection =
+		trend && trend.value > 0
+			? "up"
+			: trend && trend.value < 0
+				? "down"
+				: "neutral";
+
+	return (
+		<Card>
+			<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+				<CardTitle className="text-sm font-medium">{title}</CardTitle>
+			</CardHeader>
+			<CardContent>
+				{isLoading ? (
+					<div className="space-y-2">
+						<div className="bg-muted h-8 w-24 animate-pulse rounded" />
+						<div className="bg-muted h-4 w-32 animate-pulse rounded" />
+					</div>
+				) : (
+					<>
+						<div className="text-3xl font-bold">{value}</div>
+						{(trend || description) && (
+							<div className="text-muted-foreground mt-1 flex items-center gap-1 text-xs">
+								{trend && (
+									<span
+										className={cn(
+											"flex items-center gap-0.5 font-medium",
+											trendDirection === "up" && "text-green-600",
+											trendDirection === "down" && "text-red-600",
+										)}
+									>
+										{trendDirection === "up" && (
+											<LuArrowUp className="h-3 w-3" />
+										)}
+										{trendDirection === "down" && (
+											<LuArrowDown className="h-3 w-3" />
+										)}
+										{trendDirection === "neutral" && (
+											<LuMinus className="h-3 w-3" />
+										)}
+										{Math.abs(trend.value)}%
+									</span>
+								)}
+								{trend && <span>{trend.label}</span>}
+								{!trend && description && <span>{description}</span>}
+							</div>
+						)}
+					</>
+				)}
+			</CardContent>
+		</Card>
+	);
+}
diff --git a/apps/admin/src/app/(dashboard)/components/StatsCard/index.ts b/apps/admin/src/app/(dashboard)/components/StatsCard/index.ts
new file mode 100644
index 00000000000..437c6693033
--- /dev/null
+++ b/apps/admin/src/app/(dashboard)/components/StatsCard/index.ts
@@ -0,0 +1 @@
+export { StatsCard } from "./StatsCard";
diff --git a/apps/admin/src/app/(dashboard)/components/UserEventsTable/UserEventsTable.tsx b/apps/admin/src/app/(dashboard)/components/UserEventsTable/UserEventsTable.tsx
new file mode 100644
index 00000000000..7b8ee157464
--- /dev/null
+++ b/apps/admin/src/app/(dashboard)/components/UserEventsTable/UserEventsTable.tsx
@@ -0,0 +1,161 @@
+"use client";
+
+import { Badge } from "@superset/ui/badge";
+import { Button } from "@superset/ui/button";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@superset/ui/card";
+import {
+	Table,
+	TableBody,
+	TableCell,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from "@superset/ui/table";
+import { formatDistanceToNow } from "date-fns";
+import Link from "next/link";
+import { LuArrowRight, LuLoaderCircle } from "react-icons/lu";
+
+interface UserEvent {
+	id: string;
+	event: string;
+	distinctId: string;
+	timestamp: string;
+	person?: {
+		email?: string;
+		name?: string;
+	};
+}
+
+interface UserEventsTableProps {
+	events: UserEvent[];
+	isLoading?: boolean;
+	error?: string;
+	showViewAll?: boolean;
+}
+
+function getEventColor(event: string) {
+	if (event.startsWith("$")) {
+		return "secondary";
+	}
+	if (event.includes("completed") || event.includes("success")) {
+		return "default";
+	}
+	if (event.includes("error") || event.includes("failed")) {
+		return "destructive";
+	}
+	return "outline";
+}
+
+export function UserEventsTable({
+	events,
+	isLoading,
+	error,
+	showViewAll = true,
+}: UserEventsTableProps) {
+	if (isLoading) {
+		return (
+			<Card>
+				<CardHeader>
+					<CardTitle>Recent Activity</CardTitle>
+					<CardDescription>Latest user events</CardDescription>
+				</CardHeader>
+				<CardContent className="flex items-center justify-center py-12">
+					<LuLoaderCircle className="text-muted-foreground h-8 w-8 animate-spin" />
+				</CardContent>
+			</Card>
+		);
+	}
+
+	if (error) {
+		return (
+			<Card>
+				<CardHeader>
+					<CardTitle>Recent Activity</CardTitle>
+				</CardHeader>
+				<CardContent className="text-muted-foreground py-12 text-center">
+					<p>Failed to load events</p>
+					<p className="text-sm">{error}</p>
+				</CardContent>
+			</Card>
+		);
+	}
+
+	if (!events || events.length === 0) {
+		return (
+			<Card>
+				<CardHeader>
+					<CardTitle>Recent Activity</CardTitle>
+				</CardHeader>
+				<CardContent className="text-muted-foreground py-12 text-center">
+					<p>No recent events</p>
+				</CardContent>
+			</Card>
+		);
+	}
+
+	return (
+		<Card>
+			<CardHeader className="flex flex-row items-center justify-between">
+				<div>
+					<CardTitle>Recent Activity</CardTitle>
+					<CardDescription>Latest user events across all apps</CardDescription>
+				</div>
+				{showViewAll && (
+					<Button variant="ghost" size="sm" asChild>
+						<Link href="/events">
+							View All
+							<LuArrowRight className="ml-1 h-4 w-4" />
+						</Link>
+					</Button>
+				)}
+			</CardHeader>
+			<CardContent>
+				<Table>
+					<TableHeader>
+						<TableRow>
+							<TableHead>User</TableHead>
+							<TableHead>Event</TableHead>
+							<TableHead>Time</TableHead>
+						</TableRow>
+					</TableHeader>
+					<TableBody>
+						{events.slice(0, 10).map((event) => (
+							<TableRow key={event.id}>
+								<TableCell>
+									<div className="flex flex-col">
+										<span className="font-medium">
+											{event.person?.name ||
+												event.person?.email ||
+												event.distinctId.slice(0, 12) + "..."}
+										</span>
+										{event.person?.email && event.person?.name && (
+											<span className="text-muted-foreground text-xs">
+												{event.person.email}
+											</span>
+										)}
+									</div>
+								</TableCell>
+								<TableCell>
+									<Badge variant={getEventColor(event.event)}>
+										{event.event}
+									</Badge>
+								</TableCell>
+								<TableCell className="text-muted-foreground text-sm">
+									{formatDistanceToNow(new Date(event.timestamp), {
+										addSuffix: true,
+									})}
+								</TableCell>
+							</TableRow>
+						))}
+					</TableBody>
+				</Table>
+			</CardContent>
+		</Card>
+	);
+}
diff --git a/apps/admin/src/app/(dashboard)/components/UserEventsTable/index.ts b/apps/admin/src/app/(dashboard)/components/UserEventsTable/index.ts
new file mode 100644
index 00000000000..f4941d1e1ab
--- /dev/null
+++ b/apps/admin/src/app/(dashboard)/components/UserEventsTable/index.ts
@@ -0,0 +1 @@
+export { UserEventsTable } from "./UserEventsTable";
diff --git a/apps/admin/src/app/(dashboard)/events/[personId]/page.tsx b/apps/admin/src/app/(dashboard)/events/[personId]/page.tsx
new file mode 100644
index 00000000000..95ca00b1f72
--- /dev/null
+++ b/apps/admin/src/app/(dashboard)/events/[personId]/page.tsx
@@ -0,0 +1,220 @@
+"use client";
+
+import { Badge } from "@superset/ui/badge";
+import { Button } from "@superset/ui/button";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@superset/ui/card";
+import {
+	Table,
+	TableBody,
+	TableCell,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from "@superset/ui/table";
+import { useQuery } from "@tanstack/react-query";
+import { format, formatDistanceToNow } from "date-fns";
+import Link from "next/link";
+import { use } from "react";
+import {
+	LuArrowLeft,
+	LuCalendar,
+	LuLoaderCircle,
+	LuMail,
+	LuUser,
+} from "react-icons/lu";
+
+import { useTRPC } from "@/trpc/react";
+
+function getEventColor(event: string) {
+	if (event.startsWith("$")) {
+		return "secondary";
+	}
+	if (event.includes("completed") || event.includes("success")) {
+		return "default";
+	}
+	if (event.includes("error") || event.includes("failed")) {
+		return "destructive";
+	}
+	return "outline";
+}
+
+interface UserEventsPageProps {
+	params: Promise<{ personId: string }>;
+}
+
+export default function UserEventsPage({ params }: UserEventsPageProps) {
+	const { personId } = use(params);
+	const trpc = useTRPC();
+
+	const { data: eventsData, isLoading: isLoadingEvents } = useQuery(
+		trpc.analytics.getUserEvents.queryOptions({
+			personId,
+			limit: 100,
+		}),
+	);
+
+	const { data: usersData, isLoading: isLoadingUser } = useQuery(
+		trpc.analytics.searchUsers.queryOptions({
+			search: personId,
+			limit: 1,
+		}),
+	);
+
+	const user = usersData?.users?.[0];
+	const events = eventsData?.events ?? [];
+	const isLoading = isLoadingEvents || isLoadingUser;
+
+	if (isLoading) {
+		return (
+			<div className="space-y-6">
+				<div className="flex items-center gap-4">
+					<Button variant="ghost" size="icon" asChild>
+						<Link href="/events">
+							<LuArrowLeft className="h-4 w-4" />
+						</Link>
+					</Button>
+					<div>
+						<h1 className="text-3xl font-bold tracking-tight">User Events</h1>
+						<p className="text-muted-foreground">Loading user data...</p>
+					</div>
+				</div>
+				<Card>
+					<CardContent className="flex items-center justify-center py-12">
+						<LuLoaderCircle className="text-muted-foreground h-8 w-8 animate-spin" />
+					</CardContent>
+				</Card>
+			</div>
+		);
+	}
+
+	return (
+		<div className="space-y-6">
+			{/* Header with back button */}
+			<div className="flex items-center gap-4">
+				<Button variant="ghost" size="icon" asChild>
+					<Link href="/events">
+						<LuArrowLeft className="h-4 w-4" />
+					</Link>
+				</Button>
+				<div>
+					<h1 className="text-3xl font-bold tracking-tight">
+						{user?.name || user?.email || personId.slice(0, 16) + "..."}
+					</h1>
+					<p className="text-muted-foreground">User event timeline</p>
+				</div>
+			</div>
+
+			{/* User Info Card */}
+			<Card>
+				<CardHeader>
+					<CardTitle>User Information</CardTitle>
+				</CardHeader>
+				<CardContent>
+					<div className="grid gap-4 md:grid-cols-3">
+						<div className="flex items-center gap-3">
+							<div className="bg-muted flex h-10 w-10 items-center justify-center rounded-full">
+								<LuUser className="h-5 w-5" />
+							</div>
+							<div>
+								<div className="text-muted-foreground text-xs">Name</div>
+								<div className="font-medium">{user?.name || "Unknown"}</div>
+							</div>
+						</div>
+
+						<div className="flex items-center gap-3">
+							<div className="bg-muted flex h-10 w-10 items-center justify-center rounded-full">
+								<LuMail className="h-5 w-5" />
+							</div>
+							<div>
+								<div className="text-muted-foreground text-xs">Email</div>
+								<div className="font-medium">{user?.email || "Unknown"}</div>
+							</div>
+						</div>
+
+						<div className="flex items-center gap-3">
+							<div className="bg-muted flex h-10 w-10 items-center justify-center rounded-full">
+								<LuCalendar className="h-5 w-5" />
+							</div>
+							<div>
+								<div className="text-muted-foreground text-xs">First Seen</div>
+								<div className="font-medium">
+									{user?.createdAt
+										? format(new Date(user.createdAt), "MMM d, yyyy")
+										: "Unknown"}
+								</div>
+							</div>
+						</div>
+					</div>
+				</CardContent>
+			</Card>
+
+			{/* Event Timeline */}
+			<Card>
+				<CardHeader>
+					<CardTitle>Event Timeline</CardTitle>
+					<CardDescription>
+						{events.length} events recorded for this user
+					</CardDescription>
+				</CardHeader>
+				<CardContent>
+					{events.length === 0 ? (
+						<p className="text-muted-foreground py-8 text-center">
+							No events recorded for this user
+						</p>
+					) : (
+						<Table>
+							<TableHeader>
+								<TableRow>
+									<TableHead>Event</TableHead>
+									<TableHead>Time</TableHead>
+									<TableHead>Properties</TableHead>
+								</TableRow>
+							</TableHeader>
+							<TableBody>
+								{events.map((event) => (
+									<TableRow key={event.id}>
+										<TableCell>
+											<Badge variant={getEventColor(event.event)}>
+												{event.event}
+											</Badge>
+										</TableCell>
+										<TableCell>
+											<div className="flex flex-col">
+												<span className="text-sm">
+													{format(new Date(event.timestamp), "MMM d, yyyy")}
+												</span>
+												<span className="text-muted-foreground text-xs">
+													{formatDistanceToNow(new Date(event.timestamp), {
+														addSuffix: true,
+													})}
+												</span>
+											</div>
+										</TableCell>
+										<TableCell>
+											{event.properties &&
+											Object.keys(event.properties).length > 0 ? (
+												<div className="text-muted-foreground max-w-md truncate font-mono text-xs">
+													{JSON.stringify(event.properties)}
+												</div>
+											) : (
+												<span className="text-muted-foreground text-xs">
+													No properties
+												</span>
+											)}
+										</TableCell>
+									</TableRow>
+								))}
+							</TableBody>
+						</Table>
+					)}
+				</CardContent>
+			</Card>
+		</div>
+	);
+}
diff --git a/apps/admin/src/app/(dashboard)/events/page.tsx b/apps/admin/src/app/(dashboard)/events/page.tsx
new file mode 100644
index 00000000000..86115208701
--- /dev/null
+++ b/apps/admin/src/app/(dashboard)/events/page.tsx
@@ -0,0 +1,222 @@
+"use client";
+
+import { Badge } from "@superset/ui/badge";
+import { Button } from "@superset/ui/button";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@superset/ui/card";
+import { Input } from "@superset/ui/input";
+import {
+	Table,
+	TableBody,
+	TableCell,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from "@superset/ui/table";
+import { useQuery } from "@tanstack/react-query";
+import { formatDistanceToNow } from "date-fns";
+import Link from "next/link";
+import { useState } from "react";
+import { LuLoaderCircle, LuSearch, LuUser } from "react-icons/lu";
+
+import { useTRPC } from "@/trpc/react";
+
+function getEventColor(event: string) {
+	if (event.startsWith("$")) {
+		return "secondary";
+	}
+	if (event.includes("completed") || event.includes("success")) {
+		return "default";
+	}
+	if (event.includes("error") || event.includes("failed")) {
+		return "destructive";
+	}
+	return "outline";
+}
+
+export default function EventsPage() {
+	const [limit] = useState(50);
+	const [searchQuery, setSearchQuery] = useState("");
+	const trpc = useTRPC();
+
+	const { data, isLoading, error } = useQuery(
+		trpc.analytics.getRecentUserEvents.queryOptions({ limit }),
+	);
+
+	const { data: usersData, isLoading: isLoadingUsers } = useQuery(
+		trpc.analytics.searchUsers.queryOptions({
+			search: searchQuery || undefined,
+			limit: 20,
+		}),
+	);
+
+	if (isLoading) {
+		return (
+			<div className="space-y-6">
+				<div>
+					<h1 className="text-3xl font-bold tracking-tight">User Events</h1>
+					<p className="text-muted-foreground">
+						Track user activity and drill down into individual users
+					</p>
+				</div>
+				<Card>
+					<CardContent className="flex items-center justify-center py-12">
+						<LuLoaderCircle className="text-muted-foreground h-8 w-8 animate-spin" />
+					</CardContent>
+				</Card>
+			</div>
+		);
+	}
+
+	if (error) {
+		return (
+			<div className="space-y-6">
+				<div>
+					<h1 className="text-3xl font-bold tracking-tight">User Events</h1>
+				</div>
+				<Card>
+					<CardContent className="text-muted-foreground py-12 text-center">
+						<p>Failed to load events</p>
+						<p className="text-sm">{error.message}</p>
+					</CardContent>
+				</Card>
+			</div>
+		);
+	}
+
+	const events = data?.events ?? [];
+
+	return (
+		<div className="space-y-6">
+			<div>
+				<h1 className="text-3xl font-bold tracking-tight">User Events</h1>
+				<p className="text-muted-foreground">
+					Track user activity and drill down into individual users
+				</p>
+			</div>
+
+			<div className="grid gap-6 lg:grid-cols-3">
+				{/* Users Search Panel */}
+				<Card className="lg:col-span-1">
+					<CardHeader>
+						<CardTitle>Users</CardTitle>
+						<CardDescription>Search and browse users</CardDescription>
+					</CardHeader>
+					<CardContent className="space-y-4">
+						<div className="relative">
+							<LuSearch className="text-muted-foreground absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2" />
+							<Input
+								placeholder="Search by email or name..."
+								className="pl-9"
+								value={searchQuery}
+								onChange={(e) => setSearchQuery(e.target.value)}
+							/>
+						</div>
+
+						<div className="space-y-2">
+							{isLoadingUsers ? (
+								<div className="flex justify-center py-4">
+									<LuLoaderCircle className="text-muted-foreground h-5 w-5 animate-spin" />
+								</div>
+							) : usersData?.users && usersData.users.length > 0 ? (
+								usersData.users.map((user) => (
+									<Link
+										key={user.id}
+										href={`/events/${user.id}`}
+										className="hover:bg-muted flex items-center gap-3 rounded-lg border p-3 transition-colors"
+									>
+										<div className="bg-muted flex h-8 w-8 items-center justify-center rounded-full">
+											<LuUser className="h-4 w-4" />
+										</div>
+										<div className="min-w-0 flex-1">
+											<div className="truncate font-medium">
+												{user.name || user.email || user.distinctIds[0]}
+											</div>
+											{user.email && user.name && (
+												<div className="text-muted-foreground truncate text-xs">
+													{user.email}
+												</div>
+											)}
+										</div>
+									</Link>
+								))
+							) : (
+								<p className="text-muted-foreground py-4 text-center text-sm">
+									{searchQuery ? "No users found" : "Start typing to search"}
+								</p>
+							)}
+						</div>
+					</CardContent>
+				</Card>
+
+				{/* Recent Events Table */}
+				<Card className="lg:col-span-2">
+					<CardHeader>
+						<CardTitle>Recent Activity</CardTitle>
+						<CardDescription>
+							{events.length} most recent events across all users
+						</CardDescription>
+					</CardHeader>
+					<CardContent>
+						{events.length === 0 ? (
+							<p className="text-muted-foreground py-8 text-center">
+								No events recorded yet
+							</p>
+						) : (
+							<Table>
+								<TableHeader>
+									<TableRow>
+										<TableHead>User</TableHead>
+										<TableHead>Event</TableHead>
+										<TableHead>Time</TableHead>
+										<TableHead className="w-[80px]" />
+									</TableRow>
+								</TableHeader>
+								<TableBody>
+									{events.map((event) => (
+										<TableRow key={event.id}>
+											<TableCell>
+												<div className="flex flex-col">
+													<span className="font-medium">
+														{event.person?.name ||
+															event.person?.email ||
+															event.distinctId.slice(0, 12) + "..."}
+													</span>
+													{event.person?.email && event.person?.name && (
+														<span className="text-muted-foreground text-xs">
+															{event.person.email}
+														</span>
+													)}
+												</div>
+											</TableCell>
+											<TableCell>
+												<Badge variant={getEventColor(event.event)}>
+													{event.event}
+												</Badge>
+											</TableCell>
+											<TableCell className="text-muted-foreground text-sm">
+												{formatDistanceToNow(new Date(event.timestamp), {
+													addSuffix: true,
+												})}
+											</TableCell>
+											<TableCell>
+												<Button variant="ghost" size="sm" asChild>
+													<Link href={`/events/${event.distinctId}`}>View</Link>
+												</Button>
+											</TableCell>
+										</TableRow>
+									))}
+								</TableBody>
+							</Table>
+						)}
+					</CardContent>
+				</Card>
+			</div>
+		</div>
+	);
+}
diff --git a/apps/admin/src/app/(dashboard)/page.tsx b/apps/admin/src/app/(dashboard)/page.tsx
index a015f501e17..db58e9e9e71 100644
--- a/apps/admin/src/app/(dashboard)/page.tsx
+++ b/apps/admin/src/app/(dashboard)/page.tsx
@@ -1,3 +1,145 @@
+"use client";
+
+import { useQuery } from "@tanstack/react-query";
+
+import { useTRPC } from "@/trpc/react";
+
+import { ActivationFunnel } from "./components/ActivationFunnel";
+import { StatsCard } from "./components/StatsCard";
+import { UserEventsTable } from "./components/UserEventsTable";
+
 export default function DashboardPage() {
-	return null;
+	const trpc = useTRPC();
+
+	const { data: qualityWAU, isLoading: isLoadingWAU } = useQuery(
+		trpc.analytics.getQualityWAU.queryOptions(),
+	);
+
+	const { data: userStats, isLoading: isLoadingStats } = useQuery(
+		trpc.analytics.getUserStats.queryOptions(),
+	);
+
+	const {
+		data: funnelData,
+		isLoading: isLoadingFunnel,
+		error: funnelError,
+	} = useQuery(trpc.analytics.getActivationFunnel.queryOptions({}));
+
+	const {
+		data: eventsData,
+		isLoading: isLoadingEvents,
+		error: eventsError,
+	} = useQuery(trpc.analytics.getRecentUserEvents.queryOptions({ limit: 10 }));
+
+	// Transform funnel data to the format expected by the component
+	const funnelSteps = transformFunnelData(funnelData);
+
+	// Transform events data to the format expected by the component
+	const events =
+		eventsData?.events.map((event) => ({
+			id: event.id,
+			event: event.event,
+			distinctId: event.distinctId,
+			timestamp: event.timestamp,
+			person: event.person
+				? {
+						email: event.person.email,
+						name: event.person.name,
+					}
+				: undefined,
+		})) ?? [];
+
+	return (
+		<div className="space-y-6">
+			<div>
+				<h1 className="text-3xl font-bold tracking-tight">Dashboard</h1>
+				<p className="text-muted-foreground">
+					Key metrics and user activity overview
+				</p>
+			</div>
+
+			{/* Stats Cards Row */}
+			<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+				<StatsCard
+					title="Quality WAU"
+					value={qualityWAU?.count ?? 0}
+					description="Users with 3+ active days this week"
+					isLoading={isLoadingWAU}
+				/>
+				<StatsCard
+					title="Active Today"
+					value={userStats?.usersToday ?? 0}
+					description="Users active today"
+					isLoading={isLoadingStats}
+				/>
+				<StatsCard
+					title="Active (7d)"
+					value={userStats?.users7d ?? 0}
+					description="Users active in last 7 days"
+					isLoading={isLoadingStats}
+				/>
+				<StatsCard
+					title="Active (30d)"
+					value={userStats?.users30d ?? 0}
+					description="Users active in last 30 days"
+					isLoading={isLoadingStats}
+				/>
+			</div>
+
+			{/* Activation Funnel */}
+			<ActivationFunnel
+				steps={funnelSteps}
+				isLoading={isLoadingFunnel}
+				error={funnelError?.message}
+			/>
+
+			{/* Recent Activity */}
+			<UserEventsTable
+				events={events}
+				isLoading={isLoadingEvents}
+				error={eventsError?.message}
+				showViewAll={true}
+			/>
+		</div>
+	);
+}
+
+/**
+ * Transform PostHog funnel response to component format
+ */
+function transformFunnelData(
+	funnelData: unknown,
+): Array<{ name: string; count: number; conversionRate?: number }> {
+	if (!funnelData) {
+		return [];
+	}
+
+	// PostHog funnel response contains results with breakdown steps
+	const data = funnelData as {
+		results?: Array<{
+			count?: number;
+			name?: string;
+			order?: number;
+			conversion_rate?: number;
+		}>;
+	};
+
+	if (!data.results || !Array.isArray(data.results)) {
+		// Return empty default steps
+		return [
+			{ name: "Signup", count: 0 },
+			{ name: "Download", count: 0 },
+			{ name: "First Task", count: 0 },
+			{ name: "Completed", count: 0 },
+		];
+	}
+
+	const stepNames = ["Signup", "Download", "First Task", "Completed"];
+
+	return data.results.map((step, index) => ({
+		name: stepNames[index] ?? step.name ?? `Step ${index + 1}`,
+		count: step.count ?? 0,
+		conversionRate:
+			index > 0 ? (step.conversion_rate ?? 0) * 100 : undefined,
+	}));
 }
diff --git a/bun.lock b/bun.lock
index d3be483b8c1..74a3e906816 100644
--- a/bun.lock
+++ b/bun.lock
@@ -372,6 +372,7 @@
         "@t3-oss/env-core": "^0.13.8",
         "@trpc/server": "^11.7.1",
         "drizzle-orm": "0.45.1",
+        "posthog-node": "^5.17.2",
         "superjson": "^2.2.5",
         "zod": "^4.1.13",
       },
@@ -2593,6 +2594,8 @@
 
     "posthog-js": ["posthog-js@1.306.1", "", { "dependencies": { "@posthog/core": "1.7.1", "core-js": "^3.38.1", "fflate": "^0.4.8", "preact": "^10.19.3", "web-vitals": "^4.2.4" } }, "sha512-wO7bliv/5tlAlfoKCUzwkGXZVNexk0dHigMf9tNp0q1rzs62wThogREY7Tz7h/iWKYiuXy1RumtVlTmHuBXa1w=="],
 
+    "posthog-node": ["posthog-node@5.17.2", "", { "dependencies": { "@posthog/core": "1.7.1" } }, "sha512-lz3YJOr0Nmiz0yHASaINEDHqoV+0bC3eD8aZAG+Ky292dAnVYul+ga/dMX8KCBXg8hHfKdxw0SztYD5j6dgUqQ=="],
+
     "postject": ["postject@1.0.0-alpha.6", "", { "dependencies": { "commander": "^9.4.0" }, "bin": { "postject": "dist/cli.js" } }, "sha512-b9Eb8h2eVqNE8edvKdwqkrY6O7kAwmI8kcnBv1NScolYJbo59XUF0noFq+lxbC1yN20bmC0WBEbDC5H/7ASb0A=="],
 
     "potpack": ["potpack@1.0.2", "", {}, "sha512-choctRBIV9EMT9WGAZHn3V7t0Z2pMQyl0EZE6pFc/6ml3ssw7Dlf/oAOvFwjm1HVsqfQN8GfeFyJ+d8tRzqueQ=="],
diff --git a/packages/trpc/package.json b/packages/trpc/package.json
index bceef6e42bf..b1f7f370e2c 100644
--- a/packages/trpc/package.json
+++ b/packages/trpc/package.json
@@ -20,6 +20,7 @@
 		"@t3-oss/env-core": "^0.13.8",
 		"@trpc/server": "^11.7.1",
 		"drizzle-orm": "0.45.1",
+		"posthog-node": "^5.17.2",
 		"superjson": "^2.2.5",
 		"zod": "^4.1.13"
 	},
diff --git a/packages/trpc/src/env.ts b/packages/trpc/src/env.ts
index e8de5c3a5a3..8f337f6f54f 100644
--- a/packages/trpc/src/env.ts
+++ b/packages/trpc/src/env.ts
@@ -1,7 +1,11 @@
 import { createEnv } from "@t3-oss/env-core";
+import { z } from "zod";
 
 export const env = createEnv({
-	server: {},
+	server: {
+		POSTHOG_API_KEY: z.string().optional(),
+		POSTHOG_PROJECT_ID: z.string().optional(),
+	},
 	clientPrefix: "PUBLIC_",
 	client: {},
 	runtimeEnv: process.env,
diff --git a/packages/trpc/src/lib/posthog.ts b/packages/trpc/src/lib/posthog.ts
new file mode 100644
index 00000000000..034d1698628
--- /dev/null
+++ b/packages/trpc/src/lib/posthog.ts
@@ -0,0 +1,214 @@
+import { env } from "../env";
+
+const POSTHOG_API_BASE = "https://us.posthog.com/api";
+
+type PostHogQueryResult = {
+	results: unknown[];
+	columns?: string[];
+	hasMore?: boolean;
+};
+
+type TrendsQuerySource = {
+	kind: "TrendsQuery";
+	series: Array<{
+		kind: "EventsNode";
+		event: string;
+		math?: "total" | "dau" | "weekly_active" | "monthly_active" | "unique_session";
+	}>;
+	interval?: "hour" | "day" | "week" | "month";
+	dateRange?: {
+		date_from?: string;
+		date_to?: string;
+	};
+	filterTestAccounts?: boolean;
+};
+
+type FunnelsQuerySource = {
+	kind: "FunnelsQuery";
+	series: Array<{
+		kind: "EventsNode";
+		event: string;
+	}>;
+	dateRange?: {
+		date_from?: string;
+		date_to?: string;
+	};
+	funnelsFilter?: {
+		funnelWindowInterval?: number;
+		funnelWindowIntervalUnit?: "day" | "week" | "month";
+	};
+	filterTestAccounts?: boolean;
+};
+
+type HogQLQuerySource = {
+	kind: "HogQLQuery";
+	query: string;
+};
+
+type InsightVizNode = {
+	kind: "InsightVizNode";
+	source: TrendsQuerySource | FunnelsQuerySource;
+};
+
+type DataVisualizationNode = {
+	kind: "DataVisualizationNode";
+	source: HogQLQuerySource;
+};
+
+export type PostHogQuery = InsightVizNode | DataVisualizationNode;
+
+export async function queryPostHog<T = PostHogQueryResult>(
+	query: PostHogQuery,
+): Promise<T> {
+	const response = await fetch(
+		`${POSTHOG_API_BASE}/projects/${env.POSTHOG_PROJECT_ID}/query`,
+		{
+			method: "POST",
+			headers: {
+				"Content-Type": "application/json",
+				Authorization: `Bearer ${env.POSTHOG_API_KEY}`,
+			},
+			body: JSON.stringify({ query }),
+		},
+	);
+
+	if (!response.ok) {
+		const error = await response.text();
+		throw new Error(`PostHog API error: ${response.status} - ${error}`);
+	}
+
+	return response.json() as Promise<T>;
+}
+
+export async function getPersons(options?: {
+	limit?: number;
+	search?: string;
+}): Promise<{
+	results: Array<{
+		id: string;
+		distinct_ids: string[];
+		properties: Record<string, unknown>;
+		created_at: string;
+	}>;
+	next?: string;
+}> {
+	const params = new URLSearchParams();
+	if (options?.limit) params.set("limit", String(options.limit));
+	if (options?.search) params.set("search", options.search);
+
+	const response = await fetch(
+		`${POSTHOG_API_BASE}/projects/${env.POSTHOG_PROJECT_ID}/persons?${params}`,
+		{
+			headers: {
+				Authorization: `Bearer ${env.POSTHOG_API_KEY}`,
+			},
+		},
+	);
+
+	if (!response.ok) {
+		const error = await response.text();
+		throw new Error(`PostHog API error: ${response.status} - ${error}`);
+	}
+
+	return response.json() as Promise<{
+		results: Array<{
+			id: string;
+			distinct_ids: string[];
+			properties: Record<string, unknown>;
+			created_at: string;
+		}>;
+		next?: string;
+	}>;
+}
+
+export async function getPersonEvents(
+	personId: string,
+	options?: { limit?: number; before?: string },
+): Promise<{
+	results: Array<{
+		id: string;
+		event: string;
+		timestamp: string;
+		properties: Record<string, unknown>;
+	}>;
+	next?: string;
+}> {
+	const params = new URLSearchParams();
+	if (options?.limit) params.set("limit", String(options.limit));
+	if (options?.before) params.set("before", options.before);
+
+	const response = await fetch(
+		`${POSTHOG_API_BASE}/projects/${env.POSTHOG_PROJECT_ID}/persons/${personId}/events?${params}`,
+		{
+			headers: {
+				Authorization: `Bearer ${env.POSTHOG_API_KEY}`,
+			},
+		},
+	);
+
+	if (!response.ok) {
+		const error = await response.text();
+		throw new Error(`PostHog API error: ${response.status} - ${error}`);
+	}
+
+	return response.json() as Promise<{
+		results: Array<{
+			id: string;
+			event: string;
+			timestamp: string;
+			properties: Record<string, unknown>;
+		}>;
+		next?: string;
+	}>;
+}
+
+export async function getRecentEvents(options?: {
+	limit?: number;
+	event?: string;
+}): Promise<{
+	results: Array<{
+		id: string;
+		event: string;
+		distinct_id: string;
+		timestamp: string;
+		properties: Record<string, unknown>;
+		person?: {
+			distinct_ids: string[];
+			properties: Record<string, unknown>;
+		};
+	}>;
+	next?: string;
+}> {
+	const params = new URLSearchParams();
+	if (options?.limit) params.set("limit", String(options.limit));
+	if (options?.event) params.set("event", options.event);
+
+	const response = await fetch(
+		`${POSTHOG_API_BASE}/projects/${env.POSTHOG_PROJECT_ID}/events?${params}`,
+		{
+			headers: {
+				Authorization: `Bearer ${env.POSTHOG_API_KEY}`,
+			},
+		},
+	);
+
+	if (!response.ok) {
+		const error = await response.text();
+		throw new Error(`PostHog API error: ${response.status} - ${error}`);
+	}
+
+	return response.json() as Promise<{
+		results: Array<{
+			id: string;
+			event: string;
+			distinct_id: string;
+			timestamp: string;
+			properties: Record<string, unknown>;
+			person?: {
+				distinct_ids: string[];
+				properties: Record<string, unknown>;
+			};
+		}>;
+		next?: string;
+	}>;
+}
diff --git a/packages/trpc/src/root.ts b/packages/trpc/src/root.ts
index 100f3aa6abf..b42394b4a8f 100644
--- a/packages/trpc/src/root.ts
+++ b/packages/trpc/src/root.ts
@@ -1,6 +1,7 @@
 import type { inferRouterInputs, inferRouterOutputs } from "@trpc/server";
 
 import { adminRouter } from "./router/admin";
+import { analyticsRouter } from "./router/analytics";
 import { organizationRouter } from "./router/organization";
 import { repositoryRouter } from "./router/repository";
 import { taskRouter } from "./router/task";
@@ -9,6 +10,7 @@ import { createCallerFactory, createTRPCRouter } from "./trpc";
 
 export const appRouter = createTRPCRouter({
 	admin: adminRouter,
+	analytics: analyticsRouter,
 	organization: organizationRouter,
 	repository: repositoryRouter,
 	task: taskRouter,
diff --git a/packages/trpc/src/router/analytics.ts b/packages/trpc/src/router/analytics.ts
new file mode 100644
index 00000000000..3c164bc03d7
--- /dev/null
+++ b/packages/trpc/src/router/analytics.ts
@@ -0,0 +1,297 @@
+import type { TRPCRouterRecord } from "@trpc/server";
+import { z } from "zod";
+
+import {
+	getPersonEvents,
+	getPersons,
+	getRecentEvents,
+	queryPostHog,
+} from "../lib/posthog";
+import { adminProcedure } from "../trpc";
+
+export const analyticsRouter = {
+	/**
+	 * Get Quality WAU - users with 3+ active days in the last 7 days
+	 */
+	getQualityWAU: adminProcedure.query(async () => {
+		const result = await queryPostHog({
+			kind: "DataVisualizationNode",
+			source: {
+				kind: "HogQLQuery",
+				query: `
+					SELECT count(DISTINCT person_id) as quality_wau
+					FROM events
+					WHERE timestamp >= now() - INTERVAL 7 DAY
+					  AND event IN ('task_started', 'task_completed')
+					GROUP BY person_id
+					HAVING count(DISTINCT toDate(timestamp)) >= 3
+				`,
+			},
+		});
+
+		// Return count or 0 if no results
+		const results = result.results as Array<[number]>;
+		return {
+			count: results.length,
+			period: "7d",
+		};
+	}),
+
+	/**
+	 * Get Quality WAU trend over time
+	 */
+	getQualityWAUTrend: adminProcedure
+		.input(
+			z.object({
+				weeks: z.number().min(1).max(12).default(8),
+			}),
+		)
+		.query(async ({ input }) => {
+			const result = await queryPostHog({
+				kind: "DataVisualizationNode",
+				source: {
+					kind: "HogQLQuery",
+					query: `
+						WITH weekly_active AS (
+							SELECT
+								person_id,
+								toStartOfWeek(timestamp) as week,
+								count(DISTINCT toDate(timestamp)) as active_days
+							FROM events
+							WHERE timestamp >= now() - INTERVAL ${input.weeks} WEEK
+							  AND event IN ('task_started', 'task_completed')
+							GROUP BY person_id, week
+							HAVING active_days >= 3
+						)
+						SELECT
+							week,
+							count(DISTINCT person_id) as quality_wau
+						FROM weekly_active
+						GROUP BY week
+						ORDER BY week
+					`,
+				},
+			});
+
+			return {
+				data: result.results as Array<[string, number]>,
+				weeks: input.weeks,
+			};
+		}),
+
+	/**
+	 * Get activation funnel: Signup → Download → First Task → Completed
+	 */
+	getActivationFunnel: adminProcedure
+		.input(
+			z
+				.object({
+					dateFrom: z.string().optional(),
+					dateTo: z.string().optional(),
+				})
+				.optional(),
+		)
+		.query(async ({ input }) => {
+			const result = await queryPostHog({
+				kind: "InsightVizNode",
+				source: {
+					kind: "FunnelsQuery",
+					series: [
+						{ kind: "EventsNode", event: "$identify" },
+						{ kind: "EventsNode", event: "app_opened" },
+						{ kind: "EventsNode", event: "task_started" },
+						{ kind: "EventsNode", event: "task_completed" },
+					],
+					dateRange: {
+						date_from: input?.dateFrom ?? "-30d",
+						date_to: input?.dateTo,
+					},
+					funnelsFilter: {
+						funnelWindowInterval: 14,
+						funnelWindowIntervalUnit: "day",
+					},
+					filterTestAccounts: true,
+				},
+			});
+
+			return result;
+		}),
+
+	/**
+	 * Get week-over-week retention
+	 */
+	getRetention: adminProcedure
+		.input(
+			z
+				.object({
+					cohortWeeks: z.number().min(1).max(12).default(8),
+				})
+				.optional(),
+		)
+		.query(async ({ input }) => {
+			const weeks = input?.cohortWeeks ?? 8;
+
+			const result = await queryPostHog({
+				kind: "DataVisualizationNode",
+				source: {
+					kind: "HogQLQuery",
+					query: `
+						WITH
+							first_seen AS (
+								SELECT
+									person_id,
+									toStartOfWeek(min(timestamp)) as cohort_week
+								FROM events
+								WHERE event IN ('task_started', 'task_completed')
+								  AND timestamp >= now() - INTERVAL ${weeks} WEEK
+								GROUP BY person_id
+							),
+							weekly_activity AS (
+								SELECT
+									person_id,
+									toStartOfWeek(timestamp) as activity_week
+								FROM events
+								WHERE event IN ('task_started', 'task_completed')
+								  AND timestamp >= now() - INTERVAL ${weeks} WEEK
+								GROUP BY person_id, activity_week
+							)
+						SELECT
+							fs.cohort_week,
+							dateDiff('week', fs.cohort_week, wa.activity_week) as week_number,
+							count(DISTINCT wa.person_id) as users
+						FROM first_seen fs
+						LEFT JOIN weekly_activity wa ON fs.person_id = wa.person_id
+						WHERE wa.activity_week >= fs.cohort_week
+						GROUP BY fs.cohort_week, week_number
+						ORDER BY fs.cohort_week, week_number
+					`,
+				},
+			});
+
+			return {
+				data: result.results as Array<[string, number, number]>,
+				cohortWeeks: weeks,
+			};
+		}),
+
+	/**
+	 * Get recent user events for the activity feed
+	 */
+	getRecentUserEvents: adminProcedure
+		.input(
+			z
+				.object({
+					limit: z.number().min(1).max(100).default(50),
+				})
+				.optional(),
+		)
+		.query(async ({ input }) => {
+			const events = await getRecentEvents({
+				limit: input?.limit ?? 50,
+			});
+
+			return {
+				events: events.results.map((event) => ({
+					id: event.id,
+					event: event.event,
+					distinctId: event.distinct_id,
+					timestamp: event.timestamp,
+					properties: event.properties,
+					person: event.person
+						? {
+								distinctIds: event.person.distinct_ids,
+								email: event.person.properties.email as string | undefined,
+								name: event.person.properties.name as string | undefined,
+							}
+						: undefined,
+				})),
+			};
+		}),
+
+	/**
+	 * Get a specific user's events
+	 */
+	getUserEvents: adminProcedure
+		.input(
+			z.object({
+				personId: z.string(),
+				limit: z.number().min(1).max(100).default(50),
+				before: z.string().optional(),
+			}),
+		)
+		.query(async ({ input }) => {
+			const events = await getPersonEvents(input.personId, {
+				limit: input.limit,
+				before: input.before,
+			});
+
+			return {
+				events: events.results.map((event) => ({
+					id: event.id,
+					event: event.event,
+					timestamp: event.timestamp,
+					properties: event.properties,
+				})),
+				hasMore: !!events.next,
+			};
+		}),
+
+	/**
+	 * Search for users/persons
+	 */
+	searchUsers: adminProcedure
+		.input(
+			z
+				.object({
+					search: z.string().optional(),
+					limit: z.number().min(1).max(100).default(20),
+				})
+				.optional(),
+		)
+		.query(async ({ input }) => {
+			const persons = await getPersons({
+				limit: input?.limit ?? 20,
+				search: input?.search,
+			});
+
+			return {
+				users: persons.results.map((person) => ({
+					id: person.id,
+					distinctIds: person.distinct_ids,
+					email: person.properties.email as string | undefined,
+					name: person.properties.name as string | undefined,
+					createdAt: person.created_at,
+					properties: person.properties,
+				})),
+			};
+		}),
+
+	/**
+	 * Get user stats summary
+	 */
+	getUserStats: adminProcedure.query(async () => {
+		const result = await queryPostHog({
+			kind: "DataVisualizationNode",
+			source: {
+				kind: "HogQLQuery",
+				query: `
+					SELECT
+						count(DISTINCT person_id) as total_users,
+						countIf(DISTINCT person_id, timestamp >= now() - INTERVAL 1 DAY) as users_today,
+						countIf(DISTINCT person_id, timestamp >= now() - INTERVAL 7 DAY) as users_7d,
+						countIf(DISTINCT person_id, timestamp >= now() - INTERVAL 30 DAY) as users_30d
+					FROM events
+					WHERE event = '$identify'
+				`,
+			},
+		});
+
+		const row = (result.results as Array<[number, number, number, number]>)[0];
+		return {
+			totalUsers: row?.[0] ?? 0,
+			usersToday: row?.[1] ?? 0,
+			users7d: row?.[2] ?? 0,
+			users30d: row?.[3] ?? 0,
+		};
+	}),
+} satisfies TRPCRouterRecord;