filter occupation

mcpjam-inspector/client/src/App.tsx

@@ -1,4 +1,4 @@
-import { useConvexAuth } from "convex/react";
+import { useConvexAuth, useQuery } from "convex/react";
 import {
   useCallback,
   useEffect,
@@ -81,6 +81,7 @@ import {
 } from "./lib/theme-utils";
 import CompletingSignInLoading from "./components/CompletingSignInLoading";
 import LoadingScreen from "./components/LoadingScreen";
+import { OccupationGate } from "./components/signup/OccupationGate";
 import { Header } from "./components/Header";
 import { ThemePreset } from "./types/preferences/theme";
 import type {
@@ -344,6 +345,10 @@ export default function App() {
     isLoading: isWorkOsLoading,
   } = useAuth();
   const { isAuthenticated, isLoading: isAuthLoading } = useConvexAuth();
+  const currentUser = useQuery(
+    "users:getCurrentUser" as any,
+    isAuthenticated ? ({} as any) : "skip",
+  );
   const [hostedOAuthHandling, setHostedOAuthHandling] = useState(() => {
     if (!HOSTED_MODE) {
       return false;
@@ -596,7 +601,7 @@ export default function App() {
   // Set up Electron OAuth callback handling
   useElectronOAuth();
   // Ensure a `users` row exists after Convex auth
-  useEnsureDbUser();
+  const { isEnsuringUser } = useEnsureDbUser();
 
   const isDebugCallback = window.location.pathname.startsWith(
     "/oauth/callback/debug",
@@ -1792,6 +1797,28 @@ export default function App() {
     return <LoadingScreen />;
   }
 
+  if (
+    !isHostedChatRoute &&
+    isAuthenticated &&
+    (currentUser === undefined || currentUser === null || isEnsuringUser)
+  ) {
+    return <LoadingScreen />;
+  }
+
+  if (
+    !isHostedChatRoute &&
+    isAuthenticated &&
+    currentUser?.occupationRequired === true &&
+    !currentUser?.occupation?.trim()
+  ) {
+    return (
+      <OccupationGate
+        userId={workOsUser?.id ?? null}
+        email={workOsUser?.email}
+      />
+    );
+  }
+
   const shouldShowActiveServerSelector =
     activeTab === "tools" ||
     activeTab === "resources" ||

mcpjam-inspector/client/src/__tests__/App.hosted-oauth.test.tsx

@@ -190,7 +190,7 @@
 }));
 
 vi.mock("../hooks/useEnsureDbUser", () => ({
-  useEnsureDbUser: vi.fn(),
+  useEnsureDbUser: vi.fn(() => ({ isEnsuringUser: false })),
 }));
 
 vi.mock("../hooks/usePostHogIdentify", () => ({
@@ -577,7 +577,7 @@
 
     expect(
       screen.queryByTestId("hosted-oauth-loading")
     ).not.toBeInTheDocument();
     expect(screen.getByText("Servers Tab")).toBeInTheDocument();
 
     await waitFor(() => {
@@ -880,7 +880,7 @@
     render(<App />);
 
     await waitFor(() => {
       expect(mockChatboxesTab).toHaveBeenCalled();
     });
 
     const lastCall =
@@ -1033,7 +1033,7 @@
     render(<App />);
 
     await waitFor(() => {
       expect(mockMCPSidebar).toHaveBeenCalled();
     });
 
     const getLastSidebarProps = () =>
@@ -1111,7 +1111,7 @@
     render(<App />);
 
     await waitFor(() => {
       expect(mockMCPSidebar).toHaveBeenCalled();
     });
 
     const getLastSidebarProps = () =>
@@ -1225,7 +1225,7 @@
     render(<App />);
 
     await waitFor(() => {
       expect(mockMCPSidebar).toHaveBeenCalled();
     });
 
     const lastCall =
@@ -1304,7 +1304,7 @@
 
     render(<App />);
 
     await waitFor(() => {
       expect(replaceStateSpy).toHaveBeenCalledWith({}, "", "/billing");
       expect(screen.getByTestId("billing-handoff-overlay")).toBeInTheDocument();
     });
@@ -1322,7 +1322,7 @@
 
     render(<App />);
 
     await waitFor(() => {
       expect(replaceStateSpy).toHaveBeenCalledWith({}, "", "/");
       expect(screen.getByText("Servers Tab")).toBeInTheDocument();
     });
@@ -1358,7 +1358,7 @@
 
     render(<App />);
 
     await waitFor(() => {
       expect(screen.getByTestId("billing-handoff-overlay")).toBeInTheDocument();
       expect(mockOrganizationsTab).toHaveBeenCalled();
     });
@@ -1440,7 +1440,7 @@
 
     render(<App />);
 
     expect(screen.getByText("Preparing checkout...")).toBeInTheDocument();
 
     await waitFor(() => {
       expect(screen.getByTestId("billing-handoff-overlay")).toBeInTheDocument();
@@ -1513,7 +1513,7 @@
 
     render(<App />);
 
     await waitFor(() => {
       expect(screen.getByTestId("billing-handoff-overlay")).toBeInTheDocument();
       expect(screen.getByTestId("consume-checkout-intent")).toBeInTheDocument();
     });

mcpjam-inspector/client/src/components/signup/OccupationGate.tsx

@@ -0,0 +1,130 @@
+import { FormEvent, useState } from "react";
+import { useMutation } from "convex/react";
+import { usePostHog } from "posthog-js/react";
+import { ArrowRight, Check, Loader2 } from "lucide-react";
+import { Button } from "@mcpjam/design-system/button";
+import { standardEventProps } from "@/lib/PosthogUtils";
+import { cn } from "@/lib/utils";
+
+const OCCUPATION_SUGGESTIONS = [
+  "Software Engineer",
+  "Product Manager",
+  "Engineering Manager",
+  "Platform Engineer",
+  "Other",
+] as const;
+
+type Occupation = (typeof OCCUPATION_SUGGESTIONS)[number];
+
+interface OccupationGateProps {
+  userId?: string | null;
+  email?: string | null;
+}
+
+export function OccupationGate({ userId, email }: OccupationGateProps) {
+  const posthog = usePostHog();
+  const updateOccupation = useMutation("users:updateOccupation" as any);
+  const [selected, setSelected] = useState<Occupation | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const canSubmit = selected !== null && !isSubmitting;
+
+  const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    if (!selected) {
+      setError("Pick a role to continue.");
+      return;
+    }
+
+    setIsSubmitting(true);
+    setError(null);
+
+    try {
+      await updateOccupation({ occupation: selected });
+      posthog.setPersonProperties({ occupation: selected });
+      posthog.capture("signup_occupation_submitted", {
+        ...standardEventProps("signup_occupation_gate"),
+        occupation: selected,
+      });
+      posthog.register({ occupation: selected });
+    } catch (err) {
+      console.error("[signup] Failed to save occupation", err);
+      setError("Could not save your occupation. Please try again.");
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <main className="min-h-screen bg-background text-foreground">
+      <div className="mx-auto flex min-h-screen w-full max-w-lg flex-col justify-center px-6 py-12">
+        <div className="mb-10">
+          <img src="/mcp_jam.svg" alt="MCPJam" className="mb-8 h-9 w-auto" />
+          <h1 className="text-3xl font-semibold tracking-normal">
+            What is your role?
+          </h1>
+          <p className="mt-3 text-sm text-muted-foreground">
+            This helps us understand who is using MCPJam.
+          </p>
+        </div>
+
+        <form onSubmit={handleSubmit}>
+          <p className="mb-3 text-xs font-semibold uppercase tracking-widest text-muted-foreground">
+            Select one
+          </p>
+
+          <div className="flex flex-wrap gap-2">
+            {OCCUPATION_SUGGESTIONS.map((suggestion) => {
+              const isSelected = selected === suggestion;
+              return (
+                <button
+                  key={suggestion}
+                  type="button"
+                  onClick={() => {
+                    setSelected(suggestion);
+                    if (error) setError(null);
+                  }}
+                  className={cn(
+                    "flex items-center gap-1.5 rounded-full border px-4 py-2 text-sm font-medium transition-all duration-150",
+                    isSelected
+                      ? "border-primary bg-primary text-primary-foreground shadow-sm"
+                      : "border-border bg-background text-foreground hover:-translate-y-px hover:border-primary hover:bg-primary hover:text-primary-foreground hover:shadow-md",
+                  )}
+                >
+                  {isSelected && <Check className="h-3.5 w-3.5" />}
+                  {suggestion}
+                </button>
+              );
+            })}
+          </div>
+
+          {error ? (
+            <p className="mt-3 text-sm text-destructive">{error}</p>
+          ) : null}
+
+          <hr className="my-6 border-border" />
+
+          <Button type="submit" disabled={!canSubmit} className="w-full">
+            {isSubmitting ? (
+              <Loader2 className="h-4 w-4 animate-spin" />
+            ) : (
+              <ArrowRight className="h-4 w-4" />
+            )}
+            Continue
+          </Button>
+        </form>
+
+        {email ? (
+          <p className="mt-6 text-xs text-muted-foreground">
+            Signed in as {email}
+          </p>
+        ) : userId ? (
+          <p className="mt-6 text-xs text-muted-foreground">
+            Signed in to MCPJam
+          </p>
+        ) : null}
+      </div>
+    </main>
+  );
+}

mcpjam-inspector/client/src/hooks/__tests__/usePostHogIdentify.test.ts

@@ -19,6 +19,7 @@ const mockState = vi.hoisted(() => ({
   convexAuth: {
     isAuthenticated: false,
   },
+  convexUser: null as { occupation?: string } | null,
   detectPlatform: vi.fn(() => "mac"),
 }));
 
@@ -32,6 +33,7 @@ vi.mock("@workos-inc/authkit-react", () => ({
 
 vi.mock("convex/react", () => ({
   useConvexAuth: () => mockState.convexAuth,
+  useQuery: () => mockState.convexUser,
 }));
 
 vi.mock("@/lib/PosthogUtils", () => ({
@@ -44,6 +46,7 @@ describe("usePostHogIdentify", () => {
     vi.stubGlobal("__APP_VERSION__", "2.0.13-test");
     mockState.auth.user = null;
     mockState.convexAuth.isAuthenticated = false;
+    mockState.convexUser = null;
     mockState.detectPlatform.mockReturnValue("mac");
   });
 
@@ -114,4 +117,25 @@ describe("usePostHogIdentify", () => {
     });
     expect(mockState.posthog.identify).not.toHaveBeenCalled();
   });
+
+  it("adds occupation when the Convex user has one", () => {
+    mockState.auth.user = {
+      id: "user_123",
+      email: "user@example.com",
+      firstName: "Taylor",
+      lastName: "Smith",
+    };
+    mockState.convexAuth.isAuthenticated = true;
+    mockState.convexUser = { occupation: "Platform Engineer" };
+
+    renderHook(() => usePostHogIdentify());
+
+    expect(mockState.posthog.identify).toHaveBeenCalledWith("user_123", {
+      email: "user@example.com",
+      name: "Taylor Smith",
+      first_name: "Taylor",
+      last_name: "Smith",
+      occupation: "Platform Engineer",
+    });
+  });
 });

mcpjam-inspector/client/src/hooks/useEnsureDbUser.ts

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useMutation, useConvexAuth } from "convex/react";
 import { useAuth } from "@workos-inc/authkit-react";
 import * as Sentry from "@sentry/react";
@@ -13,25 +13,35 @@ export function useEnsureDbUser() {
   const { isAuthenticated, isLoading } = useConvexAuth();
   const ensureUser = useMutation("users:ensureUser" as any);
   const lastEnsuredUserIdRef = useRef<string | null>(null);
+  const [isEnsuringUser, setIsEnsuringUser] = useState(false);
 
   // Reset cache on logout so we re-run for the next login in the same session
   useEffect(() => {
     if (!isAuthenticated) {
       lastEnsuredUserIdRef.current = null;
+      setIsEnsuringUser(false);
       Sentry.setUser(null); // Clear Sentry user on logout
     }
   }, [isAuthenticated]);
 
   useEffect(() => {
-    if (isLoading) return;
+    if (isLoading) {
+      return;
+    }
     // WorkOS user hydration can briefly lead Convex auth. This is expected
     // during callback completion; wait for isAuthenticated instead of throwing.
-    if (!isAuthenticated) return;
-    if (!user) return;
+    if (!isAuthenticated || !user) {
+      setIsEnsuringUser(false);
+      return;
+    }
 
     // Only (re)ensure when the authenticated WorkOS user changes.
-    if (lastEnsuredUserIdRef.current === user.id) return;
+    if (lastEnsuredUserIdRef.current === user.id) {
+      setIsEnsuringUser(false);
+      return;
+    }
 
+    setIsEnsuringUser(true);
     ensureUser()
       .then((id: string | null) => {
         // eslint-disable-next-line no-console
@@ -44,6 +54,11 @@ export function useEnsureDbUser() {
         console.error("[auth] ensureUser failed", err);
         // allow retry next effect pass
         lastEnsuredUserIdRef.current = null;
+      })
+      .finally(() => {
+        setIsEnsuringUser(false);
       });
   }, [isAuthenticated, isLoading, user, ensureUser]);
+
+  return { isEnsuringUser };
 }

mcpjam-inspector/client/src/hooks/usePostHogIdentify.ts

@@ -1,7 +1,7 @@
 import { useEffect } from "react";
 import { usePostHog } from "posthog-js/react";
 import { useAuth } from "@workos-inc/authkit-react";
-import { useConvexAuth } from "convex/react";
+import { useConvexAuth, useQuery } from "convex/react";
 import { detectPlatform } from "@/lib/PosthogUtils";
 
 /**
@@ -12,23 +12,32 @@ export function usePostHogIdentify() {
   const posthog = usePostHog();
   const { user } = useAuth();
   const { isAuthenticated } = useConvexAuth();
+  const convexUser = useQuery(
+    "users:getCurrentUser" as any,
+    isAuthenticated ? ({} as any) : "skip"
+  );
 
   useEffect(() => {
     if (!posthog) return;
 
     // User is authenticated - identify them
     if (isAuthenticated && user) {
-      // Identify the user with their WorkOS ID
-      posthog.identify(user.id, {
+      const personProperties: Record<string, string | null | undefined> = {
         email: user.email,
         name:
           user.firstName && user.lastName
             ? `${user.firstName} ${user.lastName}`
             : user.email,
         first_name: user.firstName,
         last_name: user.lastName,
-        // Add any other user properties you want to track
-      });
+      };
+
+      if (convexUser?.occupation) {
+        personProperties.occupation = convexUser.occupation;
+      }
+
+      // Identify the user with their WorkOS ID
+      posthog.identify(user.id, personProperties);
 
       posthog.register({
         user_id: user.id,
@@ -43,5 +52,5 @@ export function usePostHogIdentify() {
         version: __APP_VERSION__,
       });
     }
-  }, [posthog, isAuthenticated, user]);
+  }, [posthog, isAuthenticated, user, convexUser]);
 }