monashcoding · stevenphanny · May 23, 2026 · May 20, 2026 · May 23, 2026
diff --git a/frontend/.env.example b/frontend/.env.example
@@ -9,3 +9,7 @@ NEXTAUTH_URL=http://localhost:3000
 GOOGLE_CLIENT_ID=
 GOOGLE_CLIENT_SECRET=
 
+# PostHog
+NEXT_PUBLIC_POSTHOG_KEY=
+NEXT_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com
+
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -33,6 +33,7 @@
     "next-auth": "^4.24.13",
     "pino": "^9.11.0",
     "pino-pretty": "^13.1.1",
+    "posthog-js": "^1.374.2",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },

diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
@@ -71,6 +71,148 @@ body {
   top: 72px;
 }
 
+/* ==========================================================================
+   Signed-out product gates
+   ========================================================================== */
+
+.auth-required-panel {
+  min-height: min(520px, calc(100svh - 160px));
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 8px;
+  background:
+    radial-gradient(
+        circle at 1px 1px,
+        rgba(255, 255, 255, 0.08) 1px,
+        transparent 0
+      )
+      0 0 / 24px 24px,
+    linear-gradient(135deg, rgba(46, 46, 46, 0.96), rgba(31, 31, 31, 0.98));
+  display: grid;
+  grid-template-columns: minmax(0, 1.08fr) minmax(230px, 0.92fr);
+  gap: 24px;
+  align-items: center;
+  padding: clamp(24px, 5vw, 52px);
+  overflow: hidden;
+}
+.auth-required-copy {
+  max-width: 620px;
+}
+.auth-required-kicker {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--accent);
+  font-size: 12px;
+  font-weight: 900;
+  line-height: 1;
+  text-transform: uppercase;
+}
+.auth-required-lock {
+  width: 28px;
+  height: 28px;
+  border: 1px solid rgba(255, 226, 47, 0.32);
+  border-radius: 8px;
+  background: rgba(255, 226, 47, 0.1);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.auth-required-panel h1 {
+  max-width: 680px;
+  margin: 18px 0 0;
+  color: white;
+  font-size: clamp(30px, 4.5vw, 50px);
+  font-weight: 900;
+  line-height: 0.98;
+}
+.auth-required-copy > p {
+  max-width: 590px;
+  margin: 18px 0 0;
+  color: var(--muted-1);
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 1.55;
+}
+.auth-required-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-top: 26px;
+}
+.auth-required-primary,
+.auth-required-secondary {
+  min-height: 40px;
+  border-radius: 8px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 0 15px;
+  font-size: 13px;
+  font-weight: 900;
+  line-height: 1;
+  transition:
+    transform 0.12s ease,
+    filter 0.12s ease,
+    border-color 0.12s ease;
+}
+.auth-required-primary {
+  background: var(--accent);
+  color: #1f1f1f;
+}
+.auth-required-secondary {
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  background: rgba(255, 255, 255, 0.04);
+  color: rgba(255, 255, 255, 0.78);
+}
+.auth-required-primary:hover,
+.auth-required-secondary:hover {
+  transform: translateY(-1px);
+  filter: brightness(1.04);
+}
+.auth-required-secondary:hover {
+  border-color: rgba(255, 255, 255, 0.24);
+}
+.auth-required-feature-grid {
+  display: grid;
+  gap: 10px;
+}
+.auth-required-feature {
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.045);
+  display: grid;
+  grid-template-columns: 34px minmax(0, 1fr);
+  gap: 11px;
+  align-items: start;
+  padding: 14px;
+  backdrop-filter: blur(14px);
+}
+.auth-required-feature > span {
+  width: 34px;
+  height: 34px;
+  border-radius: 8px;
+  background: rgba(255, 226, 47, 0.1);
+  color: var(--accent);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.auth-required-feature h2 {
+  margin: 0;
+  color: white;
+  font-size: 13px;
+  font-weight: 900;
+  line-height: 1.15;
+}
+.auth-required-feature p {
+  margin: 5px 0 0;
+  color: var(--muted-2);
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1.4;
+}
+
 /* ==========================================================================
    Statistics
    ========================================================================== */

diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
@@ -23,6 +23,8 @@ import { Notifications } from "@mantine/notifications";
 
 import FirstVisitNotification from "@/components/ui/first-visit-notification";
 import AuthSessionProvider from "@/components/auth/session-provider";
+import { PHProvider } from "@/components/analytics/posthog-provider";
+import { PostHogPageView } from "@/components/analytics/posthog-pageview";
 
 export const metadata: Metadata = {
   title: {
@@ -53,26 +55,29 @@ export default function RootLayout({ children }: PropsWithChildren) {
         <ColorSchemeScript defaultColorScheme="dark" />
       </Head>
       <body className={`${poppins.className}`}>
-        <Suspense>
-          <AuthSessionProvider>
-            <MantineProvider theme={theme} defaultColorScheme="dark">
-              <FilterProvider>
-                <div className="min-h-screen flex flex-col px-6">
-                  <Notifications className="mploy-notifications" />
-                  <NavBar />
-                  <main className="">
-                    {children}
-                    <FirstVisitNotification />
-                    <FeedbackButton />
-                    <Analytics />
-                    <SpeedInsights />
-                    <GoogleAnalytics gaId="G-1RXLVCFJC0" />
-                  </main>
-                </div>
-              </FilterProvider>
-            </MantineProvider>
-          </AuthSessionProvider>
-        </Suspense>
+        <PHProvider>
+          <Suspense>
+            <PostHogPageView />
+            <AuthSessionProvider>
+              <MantineProvider theme={theme} defaultColorScheme="dark">
+                <FilterProvider>
+                  <div className="min-h-screen flex flex-col px-6">
+                    <Notifications className="mploy-notifications" />
+                    <NavBar />
+                    <main className="">
+                      {children}
+                      <FirstVisitNotification />
+                      <FeedbackButton />
+                      <Analytics />
+                      <SpeedInsights />
+                      <GoogleAnalytics gaId="G-1RXLVCFJC0" />
+                    </main>
+                  </div>
+                </FilterProvider>
+              </MantineProvider>
+            </AuthSessionProvider>
+          </Suspense>
+        </PHProvider>
       </body>
     </html>
   );

diff --git a/frontend/src/components/analytics/posthog-pageview.tsx b/frontend/src/components/analytics/posthog-pageview.tsx
@@ -0,0 +1,24 @@
+"use client";
+
+import { usePathname, useSearchParams } from "next/navigation";
+import { useEffect } from "react";
+import { usePostHog } from "posthog-js/react";
+
+export function PostHogPageView() {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const posthog = usePostHog();
+
+  useEffect(() => {
+    if (pathname && posthog) {
+      let url = window.origin + pathname;
+      const search = searchParams.toString();
+      if (search) {
+        url += `?${search}`;
+      }
+      posthog.capture("$pageview", { $current_url: url });
+    }
+  }, [pathname, searchParams, posthog]);
+
+  return null;
+}
diff --git a/frontend/src/components/analytics/posthog-provider.tsx b/frontend/src/components/analytics/posthog-provider.tsx
@@ -0,0 +1,24 @@
+"use client";
+
+import posthog from "posthog-js";
+import { PostHogProvider } from "posthog-js/react";
+import { useEffect } from "react";
+
+export function PHProvider({ children }: { children: React.ReactNode }) {
+  useEffect(() => {
+    const posthogKey = process.env.NEXT_PUBLIC_POSTHOG_KEY;
+
+    if (!posthogKey) {
+      return;
+    }
+
+    posthog.init(posthogKey, {
+      api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
+      ui_host: "https://us.posthog.com",
+      capture_pageview: false,
+      capture_pageleave: true,
+    });
+  }, []);
+
+  return <PostHogProvider client={posthog}>{children}</PostHogProvider>;
+}
diff --git a/frontend/src/components/applications/my-applications-client.tsx b/frontend/src/components/applications/my-applications-client.tsx
@@ -29,7 +29,6 @@ import {
   IconTrash,
 } from "@tabler/icons-react";
 import { notifications } from "@mantine/notifications";
-import Link from "next/link";
 import {
   ApplicationStatus,
   DbApplication,
@@ -63,6 +62,7 @@ import ApplicationDatePicker, {
   formatApplicationDateValue,
 } from "@/components/applications/application-date-picker";
 import { rolePalette } from "@/lib/role-palette";
+import AuthRequiredPanel from "@/components/auth/auth-required-panel";
 
 const SORT_STORAGE_KEY = "mp:apps:kanban-sort:v1";
 const DENSITY_STORAGE_KEY = "mp:apps:kanban-density:v1";
@@ -637,22 +637,7 @@ export default function MyApplicationsClient({
   }
 
   if (sessionStatus === "unauthenticated") {
-    return (
-      <Box
-        bg="secondary"
-        bd="2px solid selected"
-        className="rounded-xl p-4 text-sm"
-      >
-        You&apos;re not signed in.{" "}
-        <Link
-          className="underline font-semibold"
-          href="/sign-in?callbackUrl=%2Fmy-applications"
-        >
-          Sign in
-        </Link>{" "}
-        to view and manage your applications across devices.
-      </Box>
-    );
+    return <AuthRequiredPanel screen="applications" />;
   }
 
   const segmentedStyles = {