From b0624c9cb78b0a71c58a41a20e471379e8308d76 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ond=C5=99ej=20Syn=C3=A1=C4=8Dek?= <ondrej@wundergraph.com>
Date: Wed, 1 Apr 2026 12:38:01 +0200
Subject: [PATCH 1/7] feat: restrict onboarding content to max width

---
 studio/src/components/layout/onboarding-layout.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/studio/src/components/layout/onboarding-layout.tsx b/studio/src/components/layout/onboarding-layout.tsx
index 59932b0147..f99e5df3e8 100644
--- a/studio/src/components/layout/onboarding-layout.tsx
+++ b/studio/src/components/layout/onboarding-layout.tsx
@@ -5,7 +5,7 @@ export interface OnboardingLayoutProps {
 export const OnboardingLayout = ({ children }: OnboardingLayoutProps) => {
   return (
     <div className="flex min-h-screen w-full flex-col items-center justify-center bg-background font-sans antialiased">
-      <main className="w-full max-w-lg px-4">{children}</main>
+      <main className="w-full max-w-2xl px-6">{children}</main>
     </div>
   );
 };

From e205f5d6e9ee64de4c001bf3b09cf46375b59a49 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ond=C5=99ej=20Syn=C3=A1=C4=8Dek?= <ondrej@wundergraph.com>
Date: Wed, 1 Apr 2026 14:18:08 +0200
Subject: [PATCH 2/7] feat: improve onboarding layout

---
 .../components/layout/onboarding-layout.tsx   | 15 +++++++++++---
 studio/src/pages/onboarding/[step].tsx        | 20 +++++++++++++++----
 2 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/studio/src/components/layout/onboarding-layout.tsx b/studio/src/components/layout/onboarding-layout.tsx
index f99e5df3e8..567ffa9375 100644
--- a/studio/src/components/layout/onboarding-layout.tsx
+++ b/studio/src/components/layout/onboarding-layout.tsx
@@ -1,11 +1,20 @@
+import { Logo } from '../logo';
+
 export interface OnboardingLayoutProps {
   children?: React.ReactNode;
+  title?: string;
 }
 
-export const OnboardingLayout = ({ children }: OnboardingLayoutProps) => {
+export const OnboardingLayout = ({ children, title }: OnboardingLayoutProps) => {
   return (
-    <div className="flex min-h-screen w-full flex-col items-center justify-center bg-background font-sans antialiased">
-      <main className="w-full max-w-2xl px-6">{children}</main>
+    <div className="flex min-h-screen w-full flex-col bg-background font-sans antialiased">
+      <header className="mx-auto flex w-full max-w-2xl items-center gap-3 px-6 py-4">
+        <Logo width={32} height={32} />
+        {title && <h1 className="text-lg font-semibold tracking-tight">{title}</h1>}
+      </header>
+      <main className="flex w-full flex-1 items-center justify-center">
+        <div className="w-full max-w-2xl px-6">{children}</div>
+      </main>
     </div>
   );
 };
diff --git a/studio/src/pages/onboarding/[step].tsx b/studio/src/pages/onboarding/[step].tsx
index 362d096401..9820802195 100644
--- a/studio/src/pages/onboarding/[step].tsx
+++ b/studio/src/pages/onboarding/[step].tsx
@@ -12,16 +12,28 @@ const OnboardingStep: NextPageWithLayout = () => {
   switch (step) {
     case '0':
     case '1':
-      return <Step1 />;
+      return (
+        <OnboardingLayout title="Get started with WunderGraph">
+          <Step1 />
+        </OnboardingLayout>
+      );
     case '2':
-      return <Step2 />;
+      return (
+        <OnboardingLayout title="Create your first graph">
+          <Step2 />
+        </OnboardingLayout>
+      );
     case '3':
-      return <Step3 />;
+      return (
+        <OnboardingLayout title="Run your services">
+          <Step3 />
+        </OnboardingLayout>
+      )
     default:
       return null;
   }
 };
 
-OnboardingStep.getLayout = (page) => <OnboardingLayout>{page}</OnboardingLayout>;
+OnboardingStep.getLayout = (page) => page;
 
 export default OnboardingStep;

From 4461953a93358862e97ac42b21bd956cb8085d6a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ond=C5=99ej=20Syn=C3=A1=C4=8Dek?= <ondrej@wundergraph.com>
Date: Wed, 1 Apr 2026 14:29:59 +0200
Subject: [PATCH 3/7] feat: add stepper

---
 .../components/layout/onboarding-layout.tsx   | 20 +++---
 .../components/onboarding/onboarding-steps.ts | 10 +++
 studio/src/components/onboarding/stepper.tsx  | 63 +++++++++++++++++++
 studio/src/pages/onboarding/[step].tsx        | 32 +++++++---
 4 files changed, 107 insertions(+), 18 deletions(-)
 create mode 100644 studio/src/components/onboarding/onboarding-steps.ts
 create mode 100644 studio/src/components/onboarding/stepper.tsx

diff --git a/studio/src/components/layout/onboarding-layout.tsx b/studio/src/components/layout/onboarding-layout.tsx
index 567ffa9375..dde21fab83 100644
--- a/studio/src/components/layout/onboarding-layout.tsx
+++ b/studio/src/components/layout/onboarding-layout.tsx
@@ -1,19 +1,23 @@
 import { Logo } from '../logo';
+import { Card, CardContent } from '../ui/card';
+import { Stepper } from '../onboarding/stepper';
+import { ONBOARDING_STEPS } from '../onboarding/onboarding-steps';
+import { useOnboarding } from '@/hooks/use-onboarding';
 
-export interface OnboardingLayoutProps {
-  children?: React.ReactNode;
-  title?: string;
-}
+export const OnboardingLayout = ({ children, title }: { children?: React.ReactNode; title?: string }) => {
+  const { currentStep } = useOnboarding();
 
-export const OnboardingLayout = ({ children, title }: OnboardingLayoutProps) => {
   return (
     <div className="flex min-h-screen w-full flex-col bg-background font-sans antialiased">
-      <header className="mx-auto flex w-full max-w-2xl items-center gap-3 px-6 py-4">
+      <header className="mx-auto flex w-full max-w-2xl items-center gap-3 px-6 py-6">
         <Logo width={32} height={32} />
         {title && <h1 className="text-lg font-semibold tracking-tight">{title}</h1>}
+        <Stepper steps={ONBOARDING_STEPS} currentStep={(currentStep ?? 1) - 1} className="ml-auto" />
       </header>
-      <main className="flex w-full flex-1 items-center justify-center">
-        <div className="w-full max-w-2xl px-6">{children}</div>
+      <main className="w-full flex-1 px-6 pb-4 pt-12">
+        <Card className="mx-auto w-full max-w-2xl">
+          <CardContent className="p-6">{children}</CardContent>
+        </Card>
       </main>
     </div>
   );
diff --git a/studio/src/components/onboarding/onboarding-steps.ts b/studio/src/components/onboarding/onboarding-steps.ts
new file mode 100644
index 0000000000..f8ab26d64c
--- /dev/null
+++ b/studio/src/components/onboarding/onboarding-steps.ts
@@ -0,0 +1,10 @@
+export interface StepperStep {
+  number: number;
+  label: string;
+}
+
+export const ONBOARDING_STEPS: StepperStep[] = [
+  { number: 1, label: 'Get started with WunderGraph' },
+  { number: 2, label: 'Create your first graph' },
+  { number: 3, label: 'Run your services' },
+];
diff --git a/studio/src/components/onboarding/stepper.tsx b/studio/src/components/onboarding/stepper.tsx
new file mode 100644
index 0000000000..cfddd29c3c
--- /dev/null
+++ b/studio/src/components/onboarding/stepper.tsx
@@ -0,0 +1,63 @@
+import { cn } from '@/lib/utils';
+import { CheckIcon } from '@radix-ui/react-icons';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+import { useRouter } from 'next/router';
+import type { StepperStep } from './onboarding-steps';
+
+export function Stepper({
+  steps,
+  currentStep,
+  className,
+}: {
+  steps: StepperStep[];
+  currentStep: number;
+  className?: string;
+}) {
+  const router = useRouter();
+
+  return (
+    <TooltipProvider delayDuration={150}>
+      <div className={cn('flex items-center', className)}>
+        {steps.map((step, index) => {
+          const isCompleted = index < currentStep;
+          const isCurrent = index === currentStep;
+          const canNavigate = isCompleted && !isCurrent;
+
+          return (
+            <div key={step.number} className="flex items-center">
+              {index > 0 && (
+                <div className="h-0.5 w-8 bg-muted">
+                  <div
+                    className={cn(
+                      'h-full origin-left bg-primary transition-transform duration-300 ease-in-out',
+                      isCompleted || isCurrent ? 'scale-x-100' : 'scale-x-0',
+                    )}
+                  />
+                </div>
+              )}
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <button
+                    type="button"
+                    disabled={!canNavigate}
+                    onClick={canNavigate ? () => router.push(`/onboarding/${step.number}`) : undefined}
+                    className={cn(
+                      'flex h-6 w-6 items-center justify-center rounded-full border-2 text-xs font-medium transition-all duration-300',
+                      isCompleted && 'border-primary bg-primary text-primary-foreground',
+                      isCurrent && 'border-primary bg-background text-primary',
+                      !isCompleted && !isCurrent && 'border-muted bg-background text-muted-foreground',
+                      canNavigate ? 'cursor-pointer hover:opacity-80' : 'cursor-default',
+                    )}
+                  >
+                    {isCompleted ? <CheckIcon className="h-3 w-3 duration-200 animate-in zoom-in-0" /> : step.number}
+                  </button>
+                </TooltipTrigger>
+                <TooltipContent side="bottom">{step.label}</TooltipContent>
+              </Tooltip>
+            </div>
+          );
+        })}
+      </div>
+    </TooltipProvider>
+  );
+}
diff --git a/studio/src/pages/onboarding/[step].tsx b/studio/src/pages/onboarding/[step].tsx
index 9820802195..8beec4d58c 100644
--- a/studio/src/pages/onboarding/[step].tsx
+++ b/studio/src/pages/onboarding/[step].tsx
@@ -1,34 +1,46 @@
 import { OnboardingLayout } from '@/components/layout/onboarding-layout';
+import { ONBOARDING_STEPS } from '@/components/onboarding/onboarding-steps';
 import { Step1 } from '@/components/onboarding/step-1';
 import { Step2 } from '@/components/onboarding/step-2';
 import { Step3 } from '@/components/onboarding/step-3';
 import { NextPageWithLayout } from '@/lib/page';
 import { useRouter } from 'next/router';
 
+const normalizeOnboardingStep = (step: string | string[] | undefined) => {
+  const value = Array.isArray(step) ? step[0] : step;
+  const parsedStep = Number.parseInt(value ?? '', 10);
+
+  if (!Number.isInteger(parsedStep)) {
+    return 1;
+  }
+
+  return Math.min(Math.max(parsedStep, 1), ONBOARDING_STEPS.length);
+};
+
 const OnboardingStep: NextPageWithLayout = () => {
   const router = useRouter();
-  const { step } = router.query;
+  const stepNumber = normalizeOnboardingStep(router.query.step);
+  const title = ONBOARDING_STEPS[stepNumber - 1]?.label;
 
-  switch (step) {
-    case '0':
-    case '1':
+  switch (stepNumber) {
+    case 1:
       return (
-        <OnboardingLayout title="Get started with WunderGraph">
+        <OnboardingLayout title={title}>
           <Step1 />
         </OnboardingLayout>
       );
-    case '2':
+    case 2:
       return (
-        <OnboardingLayout title="Create your first graph">
+        <OnboardingLayout title={title}>
           <Step2 />
         </OnboardingLayout>
       );
-    case '3':
+    case 3:
       return (
-        <OnboardingLayout title="Run your services">
+        <OnboardingLayout title={title}>
           <Step3 />
         </OnboardingLayout>
-      )
+      );
     default:
       return null;
   }

From b4c1442450ae8cdc6e23e76f8f880d7263499e0b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ond=C5=99ej=20Syn=C3=A1=C4=8Dek?= <ondrej@wundergraph.com>
Date: Wed, 1 Apr 2026 14:48:38 +0200
Subject: [PATCH 4/7] feat: onboarding navigation buttons

---
 .../onboarding/onboarding-navigation.tsx      | 71 +++++++++++++++++++
 studio/src/components/onboarding/step-1.tsx   | 39 ++++------
 studio/src/components/onboarding/step-2.tsx   | 19 +----
 studio/src/components/onboarding/step-3.tsx   | 47 +++++-------
 4 files changed, 106 insertions(+), 70 deletions(-)
 create mode 100644 studio/src/components/onboarding/onboarding-navigation.tsx

diff --git a/studio/src/components/onboarding/onboarding-navigation.tsx b/studio/src/components/onboarding/onboarding-navigation.tsx
new file mode 100644
index 0000000000..08cfd700ef
--- /dev/null
+++ b/studio/src/components/onboarding/onboarding-navigation.tsx
@@ -0,0 +1,71 @@
+import { ArrowLeftIcon, ArrowRightIcon, InfoCircledIcon } from '@radix-ui/react-icons';
+import { Link } from '../ui/link';
+import { Button } from '../ui/button';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip';
+
+export const OnboardingNavigation = ({
+  backHref,
+  forward,
+  forwardLabel = 'Next',
+  onSkip,
+}: {
+  backHref?: string;
+  forward: { href: string } | { onClick: () => void; isLoading?: boolean };
+  forwardLabel?: string;
+  onSkip: () => void;
+}) => {
+  return (
+    <div className="flex w-full justify-between">
+      <div className="flex items-center gap-1">
+        <Button asChild variant="outline" onClick={onSkip}>
+          <Link href="/">Skip</Link>
+        </Button>
+        <Tooltip delayDuration={0}>
+          <TooltipTrigger asChild>
+            <button
+              type="button"
+              aria-label="Open onboarding tooltip"
+              className="rounded-sm border-0 bg-transparent p-0 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+            >
+              <InfoCircledIcon className="ml-2 size-3.5 text-muted-foreground" />
+            </button>
+          </TooltipTrigger>
+          <TooltipContent>You can always get back to this wizard from the application. Safe to skip.</TooltipContent>
+        </Tooltip>
+      </div>
+      <div className="flex gap-2">
+        {backHref ? (
+          <Button className="group" asChild variant="outline">
+            <Link href={backHref}>
+              <ArrowLeftIcon className="mr-2 transition-transform group-hover:-translate-x-1" />
+              Back
+            </Link>
+          </Button>
+        ) : (
+          <Button variant="outline" disabled>
+            <ArrowLeftIcon className="mr-2" />
+            Back
+          </Button>
+        )}
+        {'href' in forward ? (
+          <Button className="group" asChild>
+            <Link href={forward.href}>
+              {forwardLabel}
+              <ArrowRightIcon className="ml-2 transition-transform group-hover:translate-x-1" />
+            </Link>
+          </Button>
+        ) : (
+          <Button
+            className="group"
+            onClick={forward.onClick}
+            isLoading={forward.isLoading}
+            disabled={forward.isLoading}
+          >
+            {forwardLabel}
+            <ArrowRightIcon className="ml-2 transition-transform group-hover:translate-x-1" />
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+};
diff --git a/studio/src/components/onboarding/step-1.tsx b/studio/src/components/onboarding/step-1.tsx
index d7a5765738..743724102e 100644
--- a/studio/src/components/onboarding/step-1.tsx
+++ b/studio/src/components/onboarding/step-1.tsx
@@ -1,7 +1,6 @@
 import { useEffect } from 'react';
-import { Link } from '../ui/link';
-import { Button } from '../ui/button';
 import { useOnboarding } from '@/hooks/use-onboarding';
+import { OnboardingNavigation } from './onboarding-navigation';
 import { useMutation } from '@connectrpc/connect-query';
 import { createOnboarding } from '@wundergraph/cosmo-connect/dist/platform/v1/platform-PlatformService_connectquery';
 import { useRouter } from 'next/router';
@@ -44,29 +43,19 @@ export const Step1 = () => {
   return (
     <div className="flex flex-col items-center gap-4 text-center">
       <h2 className="text-2xl font-semibold tracking-tight">Step 1</h2>
-      <div className="flex w-full justify-between">
-        <Button asChild variant="secondary" onClick={setSkipped}>
-          <Link href="/">Skip</Link>
-        </Button>
-        <div className="flex">
-          <Button className="mr-2" asChild disabled>
-            <Link href="#">Back</Link>
-          </Button>
-          <Button
-            onClick={() => {
-              // TODO: replace with real values in form
-              mutate({
-                slack: true,
-                email: false,
-              });
-            }}
-            isLoading={isPending}
-            disabled={isPending}
-          >
-            Next
-          </Button>
-        </div>
-      </div>
+      <OnboardingNavigation
+        onSkip={setSkipped}
+        forward={{
+          onClick: () => {
+            // TODO: replace with real values in form
+            mutate({
+              slack: true,
+              email: false,
+            });
+          },
+          isLoading: isPending,
+        }}
+      />
     </div>
   );
 };
diff --git a/studio/src/components/onboarding/step-2.tsx b/studio/src/components/onboarding/step-2.tsx
index a8e559873f..62021a8745 100644
--- a/studio/src/components/onboarding/step-2.tsx
+++ b/studio/src/components/onboarding/step-2.tsx
@@ -1,7 +1,6 @@
 import { useEffect } from 'react';
-import { Link } from '../ui/link';
-import { Button } from '../ui/button';
 import { useOnboarding } from '@/hooks/use-onboarding';
+import { OnboardingNavigation } from './onboarding-navigation';
 
 export const Step2 = () => {
   const { setStep, setSkipped } = useOnboarding();
@@ -12,20 +11,8 @@ export const Step2 = () => {
 
   return (
     <div className="flex flex-col items-center gap-4 text-center">
-      <h2 className="text-2xl font-semibold tracking-tight">Step 2</h2>
-      <div className="flex w-full justify-between">
-        <Button asChild variant="secondary" onClick={setSkipped}>
-          <Link href="/">Skip</Link>
-        </Button>
-        <div className="flex">
-          <Button className="mr-2" asChild>
-            <Link href="/onboarding/1">Back</Link>
-          </Button>
-          <Button asChild>
-            <Link href="/onboarding/3">Next</Link>
-          </Button>
-        </div>
-      </div>
+      <h2 className="text-2xl font-semibold tracking-tight">Step 3</h2>
+      <OnboardingNavigation onSkip={setSkipped} backHref="/onboarding/2" forward={{ href: '/onboarding/4' }} />
     </div>
   );
 };
diff --git a/studio/src/components/onboarding/step-3.tsx b/studio/src/components/onboarding/step-3.tsx
index 0aff769f79..61e1dc0212 100644
--- a/studio/src/components/onboarding/step-3.tsx
+++ b/studio/src/components/onboarding/step-3.tsx
@@ -1,18 +1,21 @@
 import { useEffect } from 'react';
-import { useRouter } from 'next/router';
-import { useMutation } from '@connectrpc/connect-query';
 import { useOnboarding } from '@/hooks/use-onboarding';
+import { OnboardingNavigation } from './onboarding-navigation';
+import { useMutation } from '@connectrpc/connect-query';
 import { finishOnboarding } from '@wundergraph/cosmo-connect/dist/platform/v1/platform-PlatformService_connectquery';
-import { EnumStatusCode } from '@wundergraph/cosmo-connect/dist/common/common_pb';
 import { useToast } from '../ui/use-toast';
-import { Link } from '../ui/link';
-import { Button } from '../ui/button';
+import { useRouter } from 'next/router';
+import { EnumStatusCode } from '@wundergraph/cosmo-connect/dist/common/common_pb';
 
 export const Step3 = () => {
   const router = useRouter();
   const { toast } = useToast();
   const { setStep, setSkipped, setOnboarding } = useOnboarding();
 
+  useEffect(() => {
+    setStep(3);
+  }, [setStep]);
+
   const { mutate, isPending } = useMutation(finishOnboarding, {
     onSuccess: (d) => {
       if (d.response?.code !== EnumStatusCode.OK) {
@@ -40,32 +43,18 @@ export const Step3 = () => {
     },
   });
 
-  useEffect(() => {
-    setStep(3);
-  }, [setStep]);
-
   return (
     <div className="flex flex-col items-center gap-4 text-center">
-      <h2 className="text-2xl font-semibold tracking-tight">Step 3</h2>
-      <div className="flex w-full justify-between">
-        <Button asChild variant="secondary" onClick={setSkipped}>
-          <Link href="/">Skip</Link>
-        </Button>
-        <div className="flex">
-          <Button className="mr-2" asChild>
-            <Link href="/onboarding/2">Back</Link>
-          </Button>
-          <Button
-            onClick={() => {
-              mutate({});
-            }}
-            isLoading={isPending}
-            disabled={isPending}
-          >
-            Finish
-          </Button>
-        </div>
-      </div>
+      <h2 className="text-2xl font-semibold tracking-tight">Step 4</h2>
+      <OnboardingNavigation
+        onSkip={setSkipped}
+        backHref="/onboarding/3"
+        forward={{
+          onClick: () => mutate({}),
+          isLoading: isPending,
+        }}
+        forwardLabel="Finish"
+      />
     </div>
   );
 };

From 54e9d292214804ba4b0fd04b146f1697bc215ec2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ond=C5=99ej=20Syn=C3=A1=C4=8Dek?= <ondrej@wundergraph.com>
Date: Wed, 1 Apr 2026 14:56:24 +0200
Subject: [PATCH 5/7] feat: common layout for the step content

---
 studio/src/components/layout/onboarding-layout.tsx |  4 ++--
 .../components/onboarding/onboarding-container.tsx |  3 +++
 .../onboarding/onboarding-navigation.tsx           |  2 +-
 studio/src/components/onboarding/step-1.tsx        |  5 +++--
 studio/src/components/onboarding/step-2.tsx        |  9 +++++----
 studio/src/components/onboarding/step-3.tsx        | 14 ++++++--------
 studio/tailwind.config.js                          |  3 +++
 7 files changed, 23 insertions(+), 17 deletions(-)
 create mode 100644 studio/src/components/onboarding/onboarding-container.tsx

diff --git a/studio/src/components/layout/onboarding-layout.tsx b/studio/src/components/layout/onboarding-layout.tsx
index dde21fab83..4d7742232c 100644
--- a/studio/src/components/layout/onboarding-layout.tsx
+++ b/studio/src/components/layout/onboarding-layout.tsx
@@ -9,14 +9,14 @@ export const OnboardingLayout = ({ children, title }: { children?: React.ReactNo
 
   return (
     <div className="flex min-h-screen w-full flex-col bg-background font-sans antialiased">
-      <header className="mx-auto flex w-full max-w-2xl items-center gap-3 px-6 py-6">
+      <header className="mx-auto flex w-full max-w-2xl items-center gap-3 py-6">
         <Logo width={32} height={32} />
         {title && <h1 className="text-lg font-semibold tracking-tight">{title}</h1>}
         <Stepper steps={ONBOARDING_STEPS} currentStep={(currentStep ?? 1) - 1} className="ml-auto" />
       </header>
       <main className="w-full flex-1 px-6 pb-4 pt-12">
         <Card className="mx-auto w-full max-w-2xl">
-          <CardContent className="p-6">{children}</CardContent>
+          <CardContent className="flex min-h-[788px] flex-col p-6">{children}</CardContent>
         </Card>
       </main>
     </div>
diff --git a/studio/src/components/onboarding/onboarding-container.tsx b/studio/src/components/onboarding/onboarding-container.tsx
new file mode 100644
index 0000000000..acdf36cc10
--- /dev/null
+++ b/studio/src/components/onboarding/onboarding-container.tsx
@@ -0,0 +1,3 @@
+export const OnboardingContainer = ({ children }: { children: React.ReactNode }) => {
+  return <div className="flex flex-1 flex-col items-center gap-4 text-center">{children}</div>;
+};
diff --git a/studio/src/components/onboarding/onboarding-navigation.tsx b/studio/src/components/onboarding/onboarding-navigation.tsx
index 08cfd700ef..6be0af3c0d 100644
--- a/studio/src/components/onboarding/onboarding-navigation.tsx
+++ b/studio/src/components/onboarding/onboarding-navigation.tsx
@@ -15,7 +15,7 @@ export const OnboardingNavigation = ({
   onSkip: () => void;
 }) => {
   return (
-    <div className="flex w-full justify-between">
+    <div className="mt-auto flex w-full justify-between pt-8">
       <div className="flex items-center gap-1">
         <Button asChild variant="outline" onClick={onSkip}>
           <Link href="/">Skip</Link>
diff --git a/studio/src/components/onboarding/step-1.tsx b/studio/src/components/onboarding/step-1.tsx
index 743724102e..4e83bb2c00 100644
--- a/studio/src/components/onboarding/step-1.tsx
+++ b/studio/src/components/onboarding/step-1.tsx
@@ -1,5 +1,6 @@
 import { useEffect } from 'react';
 import { useOnboarding } from '@/hooks/use-onboarding';
+import { OnboardingContainer } from './onboarding-container';
 import { OnboardingNavigation } from './onboarding-navigation';
 import { useMutation } from '@connectrpc/connect-query';
 import { createOnboarding } from '@wundergraph/cosmo-connect/dist/platform/v1/platform-PlatformService_connectquery';
@@ -41,7 +42,7 @@ export const Step1 = () => {
   }, [setStep]);
 
   return (
-    <div className="flex flex-col items-center gap-4 text-center">
+    <OnboardingContainer>
       <h2 className="text-2xl font-semibold tracking-tight">Step 1</h2>
       <OnboardingNavigation
         onSkip={setSkipped}
@@ -56,6 +57,6 @@ export const Step1 = () => {
           isLoading: isPending,
         }}
       />
-    </div>
+    </OnboardingContainer>
   );
 };
diff --git a/studio/src/components/onboarding/step-2.tsx b/studio/src/components/onboarding/step-2.tsx
index 62021a8745..c65af338b3 100644
--- a/studio/src/components/onboarding/step-2.tsx
+++ b/studio/src/components/onboarding/step-2.tsx
@@ -1,5 +1,6 @@
 import { useEffect } from 'react';
 import { useOnboarding } from '@/hooks/use-onboarding';
+import { OnboardingContainer } from './onboarding-container';
 import { OnboardingNavigation } from './onboarding-navigation';
 
 export const Step2 = () => {
@@ -10,9 +11,9 @@ export const Step2 = () => {
   }, [setStep]);
 
   return (
-    <div className="flex flex-col items-center gap-4 text-center">
-      <h2 className="text-2xl font-semibold tracking-tight">Step 3</h2>
-      <OnboardingNavigation onSkip={setSkipped} backHref="/onboarding/2" forward={{ href: '/onboarding/4' }} />
-    </div>
+    <OnboardingContainer>
+      <h2 className="text-2xl font-semibold tracking-tight">Step 2</h2>
+      <OnboardingNavigation onSkip={setSkipped} backHref="/onboarding/1" forward={{ href: '/onboarding/3' }} />
+    </OnboardingContainer>
   );
 };
diff --git a/studio/src/components/onboarding/step-3.tsx b/studio/src/components/onboarding/step-3.tsx
index 61e1dc0212..599a705d3f 100644
--- a/studio/src/components/onboarding/step-3.tsx
+++ b/studio/src/components/onboarding/step-3.tsx
@@ -1,5 +1,6 @@
 import { useEffect } from 'react';
 import { useOnboarding } from '@/hooks/use-onboarding';
+import { OnboardingContainer } from './onboarding-container';
 import { OnboardingNavigation } from './onboarding-navigation';
 import { useMutation } from '@connectrpc/connect-query';
 import { finishOnboarding } from '@wundergraph/cosmo-connect/dist/platform/v1/platform-PlatformService_connectquery';
@@ -44,17 +45,14 @@ export const Step3 = () => {
   });
 
   return (
-    <div className="flex flex-col items-center gap-4 text-center">
-      <h2 className="text-2xl font-semibold tracking-tight">Step 4</h2>
+    <OnboardingContainer>
+      <h2 className="text-2xl font-semibold tracking-tight">Step 3</h2>
       <OnboardingNavigation
         onSkip={setSkipped}
-        backHref="/onboarding/3"
-        forward={{
-          onClick: () => mutate({}),
-          isLoading: isPending,
-        }}
+        backHref="/onboarding/2"
+        forward={{ onClick: () => mutate({}), isLoading: isPending }}
         forwardLabel="Finish"
       />
-    </div>
+    </OnboardingContainer>
   );
 };
diff --git a/studio/tailwind.config.js b/studio/tailwind.config.js
index 6dd94d02ae..c151a91bf7 100644
--- a/studio/tailwind.config.js
+++ b/studio/tailwind.config.js
@@ -92,6 +92,9 @@ export default {
           950: 'hsl(var(--gray-950))',
         },
       },
+      spacing: {
+        160: '40rem',
+      },
       borderRadius: {
         lg: 'var(--radius)',
         md: 'calc(var(--radius) - 2px)',

From a551a980c29c427461679cced50486cc92f4b7cb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ond=C5=99ej=20Syn=C3=A1=C4=8Dek?= <ondrej@wundergraph.com>
Date: Thu, 2 Apr 2026 10:10:25 +0200
Subject: [PATCH 6/7] feat: step 1 functionality

---
 .../onboarding/onboarding-navigation.tsx      |   4 +-
 .../onboarding/onboarding-provider.tsx        |   2 +
 studio/src/components/onboarding/step-1.tsx   | 127 ++++++++-
 studio/src/components/onboarding/step-3.tsx   |   2 +
 .../onboarding/traffic-animation.tsx          | 261 ++++++++++++++++++
 studio/src/hooks/use-onboarding-navigation.ts |   2 +
 6 files changed, 387 insertions(+), 11 deletions(-)
 create mode 100644 studio/src/components/onboarding/traffic-animation.tsx

diff --git a/studio/src/components/onboarding/onboarding-navigation.tsx b/studio/src/components/onboarding/onboarding-navigation.tsx
index 6be0af3c0d..0f0ead164b 100644
--- a/studio/src/components/onboarding/onboarding-navigation.tsx
+++ b/studio/src/components/onboarding/onboarding-navigation.tsx
@@ -10,7 +10,7 @@ export const OnboardingNavigation = ({
   onSkip,
 }: {
   backHref?: string;
-  forward: { href: string } | { onClick: () => void; isLoading?: boolean };
+  forward: { href: string } | { onClick: () => void; isLoading?: boolean; disabled?: boolean };
   forwardLabel?: string;
   onSkip: () => void;
 }) => {
@@ -59,7 +59,7 @@ export const OnboardingNavigation = ({
             className="group"
             onClick={forward.onClick}
             isLoading={forward.isLoading}
-            disabled={forward.isLoading}
+            disabled={forward.isLoading || forward.disabled}
           >
             {forwardLabel}
             <ArrowRightIcon className="ml-2 transition-transform group-hover:translate-x-1" />
diff --git a/studio/src/components/onboarding/onboarding-provider.tsx b/studio/src/components/onboarding/onboarding-provider.tsx
index ac1c98c528..f7b677f552 100644
--- a/studio/src/components/onboarding/onboarding-provider.tsx
+++ b/studio/src/components/onboarding/onboarding-provider.tsx
@@ -14,6 +14,8 @@ import { useSessionStorage } from '@/hooks/use-session-storage';
 type Onboarding = {
   finishedAt?: Date;
   federatedGraphsCount: number;
+  slack: boolean;
+  email: boolean;
 };
 
 export interface OnboardingState {
diff --git a/studio/src/components/onboarding/step-1.tsx b/studio/src/components/onboarding/step-1.tsx
index 4e83bb2c00..0064645f27 100644
--- a/studio/src/components/onboarding/step-1.tsx
+++ b/studio/src/components/onboarding/step-1.tsx
@@ -7,11 +7,44 @@ import { createOnboarding } from '@wundergraph/cosmo-connect/dist/platform/v1/pl
 import { useRouter } from 'next/router';
 import { EnumStatusCode } from '@wundergraph/cosmo-connect/dist/common/common_pb';
 import { useToast } from '../ui/use-toast';
+import { SubmitHandler, useZodForm } from '@/hooks/use-form';
+import { Controller } from 'react-hook-form';
+import { z } from 'zod';
+import { Form } from '../ui/form';
+import { Checkbox } from '../ui/checkbox';
+import { TrafficAnimation } from './traffic-animation';
+
+const onboardingSchema = z.object({
+  channels: z.object({
+    slack: z.boolean(),
+    email: z.boolean(),
+  }),
+});
+
+type OnboardingFormValues = z.infer<typeof onboardingSchema>;
+
+const WhyListItem = ({ title, text }: { title: string; text: string }) => (
+  <li className="flex gap-2">
+    <span className="mt-2 size-1.5 shrink-0 rounded-full bg-muted-foreground/60" />
+    <div className="flex flex-col">
+      <span className="text-sm font-medium">{title}</span>
+      <span className="text-sm text-muted-foreground">{text}</span>
+    </div>
+  </li>
+);
 
 export const Step1 = () => {
   const router = useRouter();
   const { toast } = useToast();
-  const { setStep, setSkipped, setOnboarding } = useOnboarding();
+  const { setStep, setSkipped, setOnboarding, onboarding } = useOnboarding();
+
+  const form = useZodForm<OnboardingFormValues>({
+    mode: 'onChange',
+    schema: onboardingSchema,
+    defaultValues: {
+      channels: { slack: onboarding?.slack ?? false, email: onboarding?.email ?? false },
+    },
+  });
 
   const { mutate, isPending } = useMutation(createOnboarding, {
     onSuccess: (d) => {
@@ -23,9 +56,12 @@ export const Step1 = () => {
         return;
       }
 
+      const formValues = form.getValues();
       setOnboarding({
         federatedGraphsCount: d.federatedGraphsCount,
         finishedAt: d.finishedAt ? new Date(d.finishedAt) : undefined,
+        slack: formValues.channels.slack,
+        email: formValues.channels.email,
       });
       router.push('/onboarding/2');
     },
@@ -37,23 +73,96 @@ export const Step1 = () => {
     },
   });
 
+  const onSubmit: SubmitHandler<OnboardingFormValues> = (data) => {
+    mutate({
+      slack: data.channels.slack,
+      email: data.channels.email,
+    });
+  };
+
   useEffect(() => {
     setStep(1);
   }, [setStep]);
 
   return (
     <OnboardingContainer>
-      <h2 className="text-2xl font-semibold tracking-tight">Step 1</h2>
+      <div className="flex w-full flex-col gap-8 text-left">
+        <div className="space-y-2">
+          <p className="text-sm text-muted-foreground">
+            In ~<span className="font-medium text-foreground">3 minutes</span> you will have a federated GraphQL graph
+            running locally and serving live traffic into Cosmo Cloud platform.
+          </p>
+        </div>
+
+        <TrafficAnimation />
+
+        <div className="space-y-3">
+          <p className="text-sm font-semibold">What you will do</p>
+          <ul className="flex flex-col gap-3">
+            <WhyListItem
+              title="Create your first graph"
+              text="See how the products and reviews subgraphs compose into one supergraph, giving your client a single endpoint to resolve the data it needs."
+            />
+            <WhyListItem
+              title="Run your services"
+              text="Run the same router stack you would run in production, locally."
+            />
+            <WhyListItem title="Send a query" text="Watch real request metrics flow through the router." />
+          </ul>
+        </div>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="w-full" aria-busy={isPending}>
+            <div className="rounded-md border border-dashed p-4">
+              <p className="text-sm font-medium">If you get stuck, how can we reach you?</p>
+              <div className="mt-3 flex flex-col gap-3">
+                <Controller
+                  control={form.control}
+                  name="channels.slack"
+                  render={({ field }) => (
+                    <label className="flex items-start gap-3">
+                      <Checkbox
+                        checked={field.value}
+                        disabled={isPending}
+                        onCheckedChange={(checked) => field.onChange(checked === true)}
+                      />
+                      <div className="flex flex-col gap-y-1">
+                        <span className="text-sm font-medium leading-none">Slack</span>
+                        <span className="text-[0.8rem] text-muted-foreground">
+                          We automatically create a Slack channel for you.
+                        </span>
+                      </div>
+                    </label>
+                  )}
+                />
+                <Controller
+                  control={form.control}
+                  name="channels.email"
+                  render={({ field }) => (
+                    <label className="flex items-start gap-3">
+                      <Checkbox
+                        checked={field.value}
+                        disabled={isPending}
+                        onCheckedChange={(checked) => field.onChange(checked === true)}
+                      />
+                      <div className="flex flex-col gap-y-1">
+                        <span className="text-sm font-medium leading-none">Email</span>
+                        <span className="text-[0.8rem] text-muted-foreground">Receive updates via email.</span>
+                      </div>
+                    </label>
+                  )}
+                />
+              </div>
+            </div>
+          </form>
+        </Form>
+      </div>
+
       <OnboardingNavigation
         onSkip={setSkipped}
+        forwardLabel="Start the tour"
         forward={{
-          onClick: () => {
-            // TODO: replace with real values in form
-            mutate({
-              slack: true,
-              email: false,
-            });
-          },
+          onClick: form.handleSubmit(onSubmit),
           isLoading: isPending,
         }}
       />
diff --git a/studio/src/components/onboarding/step-3.tsx b/studio/src/components/onboarding/step-3.tsx
index 599a705d3f..3aa6678a99 100644
--- a/studio/src/components/onboarding/step-3.tsx
+++ b/studio/src/components/onboarding/step-3.tsx
@@ -31,6 +31,8 @@ export const Step3 = () => {
         ...prev,
         finishedAt: new Date(d.finishedAt),
         federatedGraphsCount: d.federatedGraphsCount,
+        slack: Boolean(prev?.slack),
+        email: Boolean(prev?.email),
       }));
 
       setStep(undefined);
diff --git a/studio/src/components/onboarding/traffic-animation.tsx b/studio/src/components/onboarding/traffic-animation.tsx
new file mode 100644
index 0000000000..b8ab5ac094
--- /dev/null
+++ b/studio/src/components/onboarding/traffic-animation.tsx
@@ -0,0 +1,261 @@
+import { motion } from 'framer-motion';
+import { Logo } from '../logo';
+
+// --- SVG layout ---
+const VB_W = 700;
+const VB_H = 220;
+const CARD_R = 8;
+const MONO_FONT = 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace';
+const EASE_OUT: [number, number, number, number] = [0.25, 0.46, 0.45, 0.94];
+const ease = (duration: number, delay = 0) => ({ duration, delay, ease: EASE_OUT });
+
+// Node boxes
+const CLIENT = { x: 30, y: 90, w: 110, h: 40 };
+const ROUTER = { x: 280, y: 80, w: 140, h: 60 };
+const PRODUCTS = { x: 560, y: 30, w: 110, h: 40 };
+const REVIEWS = { x: 560, y: 150, w: 110, h: 40 };
+
+// Edge endpoints (right/left midpoints of the boxes)
+const CLIENT_R: [number, number] = [CLIENT.x + CLIENT.w, CLIENT.y + CLIENT.h / 2];
+const ROUTER_L: [number, number] = [ROUTER.x, ROUTER.y + ROUTER.h / 2];
+const ROUTER_R: [number, number] = [ROUTER.x + ROUTER.w, ROUTER.y + ROUTER.h / 2];
+const PRODUCTS_L: [number, number] = [PRODUCTS.x, PRODUCTS.y + PRODUCTS.h / 2];
+const REVIEWS_L: [number, number] = [REVIEWS.x, REVIEWS.y + REVIEWS.h / 2];
+
+const edgePath = (a: [number, number], b: [number, number]) => `M ${a[0]} ${a[1]} L ${b[0]} ${b[1]}`;
+
+const EDGE_CLIENT_ROUTER = edgePath(CLIENT_R, ROUTER_L);
+const EDGE_ROUTER_PRODUCTS = edgePath(ROUTER_R, PRODUCTS_L);
+const EDGE_ROUTER_REVIEWS = edgePath(ROUTER_R, REVIEWS_L);
+
+// --- Timing (all relative to mount, seconds) ---
+const T_NODES = 0;
+const T_LABELS = 0.6;
+const T_EDGES = 1.0;
+const T_REQ = 1.3;
+const T_FANOUT = 1.8;
+const T_RESOLVE = 2.4;
+const T_FANIN = 2.7;
+const T_MERGED = 3.3;
+const T_SETTLE = 3.8;
+
+const REQ_DUR = 0.5;
+const FANOUT_DUR = 0.6;
+const PULSE_DUR = 0.6;
+
+// --- Node ---
+
+interface NodeProps {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+  label: string;
+  delay: number;
+  clipId: string;
+  showLogo?: boolean;
+  large?: boolean;
+}
+
+function Node({ x, y, w, h, label, delay, clipId, showLogo, large }: NodeProps) {
+  const cx = x + w / 2;
+  const cy = y + h / 2;
+  const fontSize = large ? 12 : 11;
+  const textX = x + (showLogo ? 32 : 14);
+  const textY = y + h / 2 + 1;
+
+  return (
+    <g>
+      <defs>
+        <clipPath id={`${clipId}-wipe`}>
+          <motion.rect
+            x={x}
+            y={y}
+            height={h}
+            initial={{ width: 0 }}
+            animate={{ width: w }}
+            transition={ease(0.45, T_LABELS + delay)}
+          />
+        </clipPath>
+      </defs>
+
+      {/* Outer box — zoom from center */}
+      <motion.rect
+        initial={{ x: cx, y: cy, width: 0, height: 0, rx: CARD_R }}
+        animate={{ x, y, width: w, height: h, rx: CARD_R }}
+        transition={ease(0.5, T_NODES + delay)}
+        fill="hsl(var(--card))"
+        stroke={large ? 'hsl(var(--primary))' : 'hsl(var(--border))'}
+        strokeWidth={large ? 1.5 : 1}
+      />
+
+      {/* Label (+ optional logo) clipped for wipe-in */}
+      <g clipPath={`url(#${clipId}-wipe)`}>
+        {showLogo && (
+          <foreignObject x={x + 12} y={y + h / 2 - 7} width={14} height={14}>
+            <div style={{ color: 'hsl(var(--primary))', lineHeight: 0 }}>
+              <Logo width={14} height={14} />
+            </div>
+          </foreignObject>
+        )}
+        <text
+          x={textX}
+          y={textY}
+          dominantBaseline="central"
+          fill={large ? 'hsl(var(--primary))' : 'hsl(var(--foreground))'}
+          fontSize={fontSize}
+          fontWeight={600}
+          fontFamily={MONO_FONT}
+          letterSpacing="0.05em"
+        >
+          {label}
+        </text>
+      </g>
+    </g>
+  );
+}
+
+// --- Edge ---
+
+function Edge({ d }: { d: string }) {
+  return (
+    <motion.path
+      d={d}
+      fill="none"
+      strokeWidth={1.5}
+      strokeDasharray="6 5"
+      strokeLinecap="round"
+      initial={{ opacity: 0, stroke: 'hsl(var(--muted-foreground))' }}
+      animate={{
+        opacity: [0, 0.35, 0.35, 0.55],
+        stroke: [
+          'hsl(var(--muted-foreground))',
+          'hsl(var(--muted-foreground))',
+          'hsl(var(--muted-foreground))',
+          'hsl(var(--primary))',
+        ],
+      }}
+      transition={{
+        duration: T_SETTLE + 0.4 - T_EDGES,
+        delay: T_EDGES,
+        times: [0, 0.12, (T_SETTLE - T_EDGES) / (T_SETTLE + 0.4 - T_EDGES), 1],
+        ease: 'linear',
+      }}
+    />
+  );
+}
+
+// --- Packet ---
+
+interface PacketProps {
+  from: [number, number];
+  to: [number, number];
+  delay: number;
+  duration: number;
+}
+
+function Packet({ from, to, delay, duration }: PacketProps) {
+  return (
+    <motion.circle
+      r={4}
+      fill="hsl(var(--primary))"
+      filter="url(#packet-glow)"
+      initial={{ cx: from[0], cy: from[1], opacity: 0 }}
+      animate={{
+        cx: [from[0], to[0]],
+        cy: [from[1], to[1]],
+        opacity: [0, 1, 1, 0],
+      }}
+      transition={{
+        cx: { duration, delay, ease: 'linear' },
+        cy: { duration, delay, ease: 'linear' },
+        opacity: { duration, delay, times: [0, 0.1, 0.85, 1] },
+      }}
+    />
+  );
+}
+
+// --- Resolve pulse ---
+
+function ResolvePulse({ cx, cy, delay }: { cx: number; cy: number; delay: number }) {
+  return (
+    <motion.circle
+      cx={cx}
+      cy={cy}
+      fill="none"
+      stroke="hsl(var(--primary))"
+      initial={{ r: 4, opacity: 0, strokeWidth: 2 }}
+      animate={{ r: [4, 22], opacity: [0.7, 0], strokeWidth: [2, 0.5] }}
+      transition={{ duration: PULSE_DUR, delay, ease: 'easeOut' }}
+    />
+  );
+}
+
+// --- Root ---
+
+export function TrafficAnimation() {
+  return (
+    <div className="w-full overflow-hidden rounded-lg border border-border bg-muted/30">
+      <svg viewBox={`0 0 ${VB_W} ${VB_H}`} className="w-full">
+        <defs>
+          <filter id="packet-glow" x="-50%" y="-50%" width="200%" height="200%">
+            <feGaussianBlur in="SourceGraphic" stdDeviation="2.5" result="blur" />
+            <feFlood floodColor="hsl(var(--primary))" floodOpacity="0.5" result="color" />
+            <feComposite in="color" in2="blur" operator="in" result="glow" />
+            <feMerge>
+              <feMergeNode in="glow" />
+              <feMergeNode in="SourceGraphic" />
+            </feMerge>
+          </filter>
+        </defs>
+
+        {/* Edges (behind nodes) */}
+        <Edge d={EDGE_CLIENT_ROUTER} />
+        <Edge d={EDGE_ROUTER_PRODUCTS} />
+        <Edge d={EDGE_ROUTER_REVIEWS} />
+
+        {/* Nodes */}
+        <Node x={CLIENT.x} y={CLIENT.y} w={CLIENT.w} h={CLIENT.h} label="client" delay={0} clipId="n-client" />
+        <Node
+          x={ROUTER.x}
+          y={ROUTER.y}
+          w={ROUTER.w}
+          h={ROUTER.h}
+          label="Cosmo router"
+          delay={0.15}
+          clipId="n-router"
+          showLogo
+          large
+        />
+        <Node
+          x={PRODUCTS.x}
+          y={PRODUCTS.y}
+          w={PRODUCTS.w}
+          h={PRODUCTS.h}
+          label="products"
+          delay={0.3}
+          clipId="n-products"
+        />
+        <Node x={REVIEWS.x} y={REVIEWS.y} w={REVIEWS.w} h={REVIEWS.h} label="reviews" delay={0.45} clipId="n-reviews" />
+
+        {/* Request: client → router */}
+        <Packet from={CLIENT_R} to={ROUTER_L} delay={T_REQ} duration={REQ_DUR} />
+
+        {/* Fan-out: router → products + router → reviews */}
+        <Packet from={ROUTER_R} to={PRODUCTS_L} delay={T_FANOUT} duration={FANOUT_DUR} />
+        <Packet from={ROUTER_R} to={REVIEWS_L} delay={T_FANOUT} duration={FANOUT_DUR} />
+
+        {/* Resolve pulses at subgraphs */}
+        <ResolvePulse cx={PRODUCTS_L[0]} cy={PRODUCTS_L[1]} delay={T_RESOLVE} />
+        <ResolvePulse cx={REVIEWS_L[0]} cy={REVIEWS_L[1]} delay={T_RESOLVE} />
+
+        {/* Fan-in: products → router + reviews → router */}
+        <Packet from={PRODUCTS_L} to={ROUTER_R} delay={T_FANIN} duration={FANOUT_DUR} />
+        <Packet from={REVIEWS_L} to={ROUTER_R} delay={T_FANIN} duration={FANOUT_DUR} />
+
+        {/* Merged: router → client */}
+        <Packet from={ROUTER_L} to={CLIENT_R} delay={T_MERGED} duration={REQ_DUR} />
+      </svg>
+    </div>
+  );
+}
diff --git a/studio/src/hooks/use-onboarding-navigation.ts b/studio/src/hooks/use-onboarding-navigation.ts
index b907617c98..65534a4b62 100644
--- a/studio/src/hooks/use-onboarding-navigation.ts
+++ b/studio/src/hooks/use-onboarding-navigation.ts
@@ -29,6 +29,8 @@ export const useOnboardingNavigation = () => {
       setOnboarding({
         finishedAt: data.finishedAt ? new Date(data.finishedAt) : undefined,
         federatedGraphsCount: data.federatedGraphsCount,
+        slack: data.slack,
+        email: data.email,
       });
     },
     [initialLoadSuccess, data, setOnboarding],

From 4cfeb5805d910cb61cbf5c1f273d61494360a350 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ond=C5=99ej=20Syn=C3=A1=C4=8Dek?= <ondrej@wundergraph.com>
Date: Fri, 24 Apr 2026 08:38:30 +0200
Subject: [PATCH 7/7] fix: simplify argument passing

---
 studio/src/components/onboarding/step-1.tsx | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/studio/src/components/onboarding/step-1.tsx b/studio/src/components/onboarding/step-1.tsx
index 0064645f27..63a532edc2 100644
--- a/studio/src/components/onboarding/step-1.tsx
+++ b/studio/src/components/onboarding/step-1.tsx
@@ -42,7 +42,7 @@ export const Step1 = () => {
     mode: 'onChange',
     schema: onboardingSchema,
     defaultValues: {
-      channels: { slack: onboarding?.slack ?? false, email: onboarding?.email ?? false },
+      channels: onboarding,
     },
   });
 
@@ -74,10 +74,7 @@ export const Step1 = () => {
   });
 
   const onSubmit: SubmitHandler<OnboardingFormValues> = (data) => {
-    mutate({
-      slack: data.channels.slack,
-      email: data.channels.email,
-    });
+    mutate(data.channels);
   };
 
   useEffect(() => {