feat(ui): improve onboarding UX

.husky/commit-msg

@@ -1 +1,14 @@
+#!/usr/bin/env bash
+# Check if pnpm is available
+if ! command -v pnpm >/dev/null 2>&1; then
+  echo "Error: pnpm not found in PATH"
+  echo "Please install pnpm or add it to your PATH"
+  exit 1
+fi
+
+# Load fnm if available
+if [ -f ~/.local/share/fnm/fnm ]; then
+  eval "$(~/.local/share/fnm/fnm env --shell bash)"
+fi
+
 pnpm commitlint --edit $1

.husky/pre-commit

@@ -1 +1,14 @@
+#!/usr/bin/env bash
+# Check if pnpm is available
+if ! command -v pnpm >/dev/null 2>&1; then
+  echo "Error: pnpm not found in PATH"
+  echo "Please install pnpm or add it to your PATH"
+  exit 1
+fi
+
+# Load fnm if available
+if [ -f ~/.local/share/fnm/fnm ]; then
+  eval "$(~/.local/share/fnm/fnm env --shell bash)"
+fi
+
 pnpm lint-staged

apps/ui/src/app/globals.css

@@ -8,6 +8,7 @@
 body {
 	@apply m-0;
 	font-family:
+		var(--font-geist),
 		-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
 		"Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 	-webkit-font-smoothing: antialiased;
@@ -16,7 +17,7 @@ body {
 
 code {
 	font-family:
-		source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
+		var(--font-geist-mono), source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
 }
 
 :root {
@@ -151,6 +152,7 @@ code {
 	* {
 		@apply border-border outline-ring/50;
 	}
+
 	body {
 		@apply bg-background text-foreground;
 	}
@@ -159,6 +161,7 @@ code {
 		from {
 			height: 0;
 		}
+
 		to {
 			height: var(--radix-accordion-content-height);
 		}
@@ -168,6 +171,7 @@ code {
 		from {
 			height: var(--radix-accordion-content-height);
 		}
+
 		to {
 			height: 0;
 		}
@@ -180,4 +184,4 @@ code {
 
 @utility animate-accordion-up {
 	animation: accordion-up 0.2s ease-out;
-}
+}

apps/ui/src/app/onboarding/onboarding-client.tsx

@@ -4,21 +4,53 @@ import { useRouter } from "next/navigation";
 import { useEffect } from "react";
 
 import { OnboardingWizard } from "@/components/onboarding/onboarding-wizard";
+import { UserProvider } from "@/components/providers/user-provider";
 import { useUser } from "@/hooks/useUser";
 
 export function OnboardingClient() {
 	const router = useRouter();
-	const { user } = useUser();
+	const { user, isLoading, error } = useUser();
 
 	useEffect(() => {
-		if (!user) {
+		if (!isLoading && !user && !error) {
 			router.push("/login");
 		}
-	}, [user, router]);
+	}, [user, isLoading, error, router]);
+
+	if (isLoading) {
+		return (
+			<div className="container mx-auto max-w-6xl py-10 flex items-center justify-center">
+				<div className="text-center">
+					<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto mb-4" />
+					<p className="text-muted-foreground">Loading...</p>
+				</div>
+			</div>
+		);
+	}
+
+	if (error) {
+		return (
+			<div className="container mx-auto max-w-6xl py-10 flex items-center justify-center">
+				<div className="text-center">
+					<p className="text-destructive mb-4">Failed to load user data</p>
+					<button
+						onClick={() => window.location.reload()}
+						className="px-4 py-2 bg-primary text-primary-foreground rounded"
+					>
+						Retry
+					</button>
+				</div>
+			</div>
+		);
+	}
 
 	if (!user) {
 		return null;
 	}
 
-	return <OnboardingWizard />;
+	return (
+		<UserProvider>
+			<OnboardingWizard />
+		</UserProvider>
+	);
 }

apps/ui/src/app/onboarding/page.tsx

@@ -1,22 +1,8 @@
-import { UserProvider } from "@/components/providers/user-provider";
-import { fetchServerData } from "@/lib/server-api";
-
 import { OnboardingClient } from "./onboarding-client";
 
-import type { User } from "@/lib/types";
-
-// Force dynamic rendering since this page uses server-side data fetching with cookies
+// Force dynamic rendering since this page uses client-side data fetching
 export const dynamic = "force-dynamic";
 
-export default async function OnboardingPage() {
-	const initialUserData = await fetchServerData<{ user: User }>(
-		"GET",
-		"/user/me",
-	);
-
-	return (
-		<UserProvider initialUserData={initialUserData}>
-			<OnboardingClient />
-		</UserProvider>
-	);
+export default function OnboardingPage() {
+	return <OnboardingClient />;
 }

apps/ui/src/components/onboarding/onboarding-wizard.tsx

@@ -6,12 +6,16 @@ import { usePostHog } from "posthog-js/react";
 import * as React from "react";
 import { useState } from "react";
 
-import { Card, CardContent } from "@/lib/components/card";
+import {
+	NavigationMenu,
+	NavigationMenuItem,
+	NavigationMenuList,
+} from "@/lib/components/navigation-menu";
 import { Stepper } from "@/lib/components/stepper";
 import { useApi } from "@/lib/fetch-client";
+import Logo from "@/lib/icons/Logo";
 import { useStripe } from "@/lib/stripe";
 
-import { ApiKeyStep } from "./api-key-step";
 import { CreditsStep } from "./credits-step";
 import { PlanChoiceStep } from "./plan-choice-step";
 import { ProviderKeyStep } from "./provider-key-step";
@@ -27,16 +31,12 @@ const getSteps = (flowType: FlowType) => [
 	},
 	{
 		id: "referral",
-		title: "How did you hear about us?",
+		title: "How did you find us?",
 		optional: true,
 	},
-	{
-		id: "api-key",
-		title: "API Key",
-	},
 	{
 		id: "plan-choice",
-		title: "Choose Plan",
+		title: "Choose your approach",
 	},
 	{
 		id: flowType === "credits" ? "credits" : "provider-key",
@@ -49,9 +49,11 @@ export function OnboardingWizard() {
 	const [activeStep, setActiveStep] = useState(0);
 	const [flowType, setFlowType] = useState<FlowType>(null);
 	const [hasSelectedPlan, setHasSelectedPlan] = useState(false);
+	const [selectedPlanName, setSelectedPlanName] = useState<string>("");
 	const [isPaymentSuccessful, setIsPaymentSuccessful] = useState(false);
 	const [referralSource, setReferralSource] = useState<string>("");
 	const [referralDetails, setReferralDetails] = useState<string>("");
+
 	const router = useRouter();
 	const posthog = usePostHog();
 	const { stripe, isLoading: stripeLoading } = useStripe();
@@ -65,8 +67,14 @@ export function OnboardingWizard() {
 	const STEPS = getSteps(flowType);
 
 	const handleStepChange = async (step: number) => {
-		// Special handling for plan choice step (now at index 3)
-		if (activeStep === 3) {
+		// Handle backward navigation
+		if (step < activeStep) {
+			setActiveStep(step);
+			return;
+		}
+
+		// Special handling for plan choice step (now at index 2)
+		if (activeStep === 2) {
 			if (!hasSelectedPlan) {
 				// Skip to dashboard if no plan selected
 				posthog.capture("onboarding_skipped", {
@@ -103,37 +111,47 @@ export function OnboardingWizard() {
 	const handleSelectCredits = () => {
 		setFlowType("credits");
 		setHasSelectedPlan(true);
-		setActiveStep(4);
+		setSelectedPlanName("Buy Credits");
+		setActiveStep(3);
 	};
 
 	const handleSelectBYOK = () => {
 		setFlowType("byok");
 		setHasSelectedPlan(true);
-		setActiveStep(4);
+		setSelectedPlanName("Bring Your Own Keys");
+		setActiveStep(3);
+	};
+
+	const handleSelectFreePlan = () => {
+		setHasSelectedPlan(true);
+		setSelectedPlanName("Free Plan");
+		// Continue to next step or complete onboarding
+		setActiveStep(3);
 	};
 
 	const handleReferralComplete = (source: string, details?: string) => {
 		setReferralSource(source);
 		if (details) {
 			setReferralDetails(details);
 		}
-		setActiveStep(2); // Move to API Key step
+		setActiveStep(2); // Move to Plan Choice step
 	};
 
 	// Special handling for PlanChoiceStep to pass callbacks
 	const renderCurrentStep = () => {
-		if (activeStep === 3) {
+		if (activeStep === 2) {
 			return (
 				<PlanChoiceStep
 					onSelectCredits={handleSelectCredits}
 					onSelectBYOK={handleSelectBYOK}
+					onSelectFreePlan={handleSelectFreePlan}
 					hasSelectedPlan={hasSelectedPlan}
 				/>
 			);
 		}
 
 		// For credits step, wrap with Stripe Elements
-		if (activeStep === 4 && flowType === "credits") {
+		if (activeStep === 3 && flowType === "credits") {
 			return stripeLoading ? (
 				<div className="p-6 text-center">Loading payment form...</div>
 			) : (
@@ -144,7 +162,7 @@ export function OnboardingWizard() {
 		}
 
 		// For BYOK step
-		if (activeStep === 4 && flowType === "byok") {
+		if (activeStep === 3 && flowType === "byok") {
 			return <ProviderKeyStep />;
 		}
 
@@ -157,24 +175,29 @@ export function OnboardingWizard() {
 			return <ReferralStep onComplete={handleReferralComplete} />;
 		}
 
-		if (activeStep === 2) {
-			return <ApiKeyStep />;
-		}
-
 		return null;
 	};
 
 	// Customize stepper steps to show appropriate button text
 	const getStepperSteps = () => {
 		return STEPS.map((step, index) => ({
 			...step,
-			// Make plan choice step show Skip when no selection
-			...(index === 3 &&
-				!hasSelectedPlan && {
-					customNextText: "Skip",
-				}),
+			// Welcome step shows dynamic text based on user state
+			...(index === 0 && {
+				customNextText: "Next: How did you find us?",
+			}),
+			// Referral step shows dynamic text based on user state
+			...(index === 1 && {
+				customNextText: "Next: Choose your approach",
+			}),
+			// Make plan choice step show dynamic text based on selected plan
+			...(index === 2 && {
+				customNextText: hasSelectedPlan
+					? `Continue with ${selectedPlanName}`
+					: "Skip",
+			}),
 			// Remove optional status from credits step when payment is successful
-			...(index === 4 &&
+			...(index === 3 &&
 				flowType === "credits" &&
 				isPaymentSuccessful && {
 					optional: false,
@@ -183,22 +206,31 @@ export function OnboardingWizard() {
 	};
 
 	return (
-		<div className="container mx-auto max-w-3xl py-10">
-			<Card>
-				<CardContent className="p-6 sm:p-8">
-					<Stepper
-						steps={getStepperSteps()}
-						activeStep={activeStep}
-						onStepChange={handleStepChange}
-						className="mb-6"
-						nextButtonDisabled={
-							activeStep === 4 && flowType === "credits" && !isPaymentSuccessful
-						}
-					>
-						{renderCurrentStep()}
-					</Stepper>
-				</CardContent>
-			</Card>
+		<div className="container mx-auto px-4 py-10">
+			<NavigationMenu className="mx-auto">
+				<NavigationMenuList>
+					<NavigationMenuItem asChild>
+						<div className="flex items-center space-x-2">
+							<Logo className="h-8 w-8 rounded-full text-black dark:text-white" />
+							<span className="text-xl font-bold tracking-tight text-zinc-900 dark:text-white">
+								LLM Gateway
+							</span>
+						</div>
+					</NavigationMenuItem>
+				</NavigationMenuList>
+			</NavigationMenu>
+
+			<Stepper
+				steps={getStepperSteps()}
+				activeStep={activeStep}
+				onStepChange={handleStepChange}
+				className="mb-6"
+				nextButtonDisabled={
+					activeStep === 3 && flowType === "credits" && !isPaymentSuccessful
+				}
+			>
+				{renderCurrentStep()}
+			</Stepper>
 		</div>
 	);
 }